4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T685e,"use client"; import { cn } from "cn"; import { Direction as DirectionPrimitive, Slot as SlotPrimitive, } from "radix-ui"; import * as React from "react"; import { useComposedRefs } from "@/lib/compose-refs"; import { VisuallyHiddenInput } from "@/registry/bases/radix/components/visually-hidden-input"; import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref"; import { useIsomorphicLayoutEffect } from "@/registry/bases/radix/hooks/use-isomorphic-layout-effect"; import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref"; import { IconPlaceholder } from "@/registry/icons/icon-placeholder"; type Direction = "ltr" | "rtl"; type Orientation = "horizontal" | "vertical"; type ActivationMode = "automatic" | "manual"; type Size = "default" | "sm" | "lg"; type Step = 0.5 | 1; type DataState = "full" | "partial" | "empty"; type FocusIntent = "first" | "last" | "prev" | "next"; type RootElement = React.ComponentRef; type ItemElement = React.ComponentRef; const ROOT_NAME = "Rating"; const ITEM_NAME = "RatingItem"; const ENTRY_FOCUS = "ratingFocusGroup.onEntryFocus"; const EVENT_OPTIONS = { bubbles: false, cancelable: true }; function getItemId(id: string, value: number) { return `${id}-item-${value}`; } function getPartialFillGradientId(id: string, step: Step) { return `partial-fill-gradient-${id}-${step}`; } const MAP_KEY_TO_FOCUS_INTENT: Record = { ArrowLeft: "prev", ArrowUp: "prev", ArrowRight: "next", ArrowDown: "next", Home: "first", End: "last", }; function getDirectionAwareKey(key: string, dir?: Direction) { if (dir !== "rtl") return key; return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key; } function getFocusIntent( event: React.KeyboardEvent, dir?: Direction, orientation?: Orientation, ) { const key = getDirectionAwareKey(event.key, dir); if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return undefined; if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return undefined; return MAP_KEY_TO_FOCUS_INTENT[key]; } function focusFirst( candidates: React.RefObject[], preventScroll = false, ) { const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement; for (const candidateRef of candidates) { const candidate = candidateRef.current; if (!candidate) continue; if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return; candidate.focus({ preventScroll }); if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return; } } interface StoreState { value: number; hoveredValue: number | null; } interface Store { subscribe: (callback: () => void) => () => void; getState: () => StoreState; setState: (key: K, value: StoreState[K]) => void; notify: () => void; } const StoreContext = React.createContext(null); function useStoreContext(consumerName: string) { const context = React.useContext(StoreContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``); } return context; } function useStore( selector: (state: StoreState) => T, ogStore?: Store | null, ): T { const contextStore = React.useContext(StoreContext); const store = ogStore ?? contextStore; if (!store) { throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``); } const getSnapshot = React.useCallback( () => selector(store.getState()), [store, selector], ); return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot); } interface ItemData { id: string; ref: React.RefObject; value: number; disabled: boolean; } interface RatingContextValue { rootId: string; dir: Direction; orientation: Orientation; activationMode: ActivationMode; size: Size; max: number; step: Step; clearable: boolean; disabled: boolean; readOnly: boolean; getAutoIndex: (instanceId: string) => number; } const RatingContext = React.createContext(null); function useRatingContext(consumerName: string) { const context = React.useContext(RatingContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``); } return context; } interface FocusContextValue { tabStopId: string | null; onItemFocus: (tabStopId: string) => void; onItemShiftTab: () => void; onFocusableItemAdd: () => void; onFocusableItemRemove: () => void; onItemRegister: (item: ItemData) => void; onItemUnregister: (id: string) => void; getItems: () => ItemData[]; } const FocusContext = React.createContext(null); function useFocusContext(consumerName: string) { const context = React.useContext(FocusContext); if (!context) { throw new Error( `\`${consumerName}\` must be used within \`FocusProvider\``, ); } return context; } interface RatingProps extends React.ComponentProps<"div"> { value?: number; defaultValue?: number; onValueChange?: (value: number) => void; onHover?: (value: number | null) => void; max?: number; activationMode?: ActivationMode; dir?: Direction; orientation?: Orientation; size?: Size; asChild?: boolean; step?: Step; clearable?: boolean; disabled?: boolean; readOnly?: boolean; required?: boolean; name?: string; } function Rating(props: RatingProps) { const { value: valueProp, defaultValue = 0, onValueChange, onHover, onFocus: onFocusProp, onMouseDown: onMouseDownProp, dir: dirProp, orientation = "horizontal", activationMode = "automatic", size = "default", max = 5, step = 1, clearable = false, asChild, disabled = false, readOnly = false, required = false, className, id, name, ref, ...rootProps } = props; const dir = DirectionPrimitive.useDirection(dirProp); const instanceId = React.useId(); const rootId = id ?? instanceId; const listenersRef = useLazyRef(() => new Set<() => void>()); const stateRef = useLazyRef(() => ({ value: valueProp ?? defaultValue, hoveredValue: null, })); const propsRef = useAsRef({ onValueChange, onHover, onFocus: onFocusProp, onMouseDown: onMouseDownProp, step, }); const store = React.useMemo(() => { return { subscribe: (cb) => { listenersRef.current.add(cb); return () => listenersRef.current.delete(cb); }, getState: () => stateRef.current, setState: (key, value) => { if (Object.is(stateRef.current[key], value)) return; if (key === "value" && typeof value === "number") { stateRef.current.value = value; propsRef.current.onValueChange?.(value); } else if (key === "hoveredValue") { stateRef.current.hoveredValue = value as number | null; propsRef.current.onHover?.(value as number | null); } else { stateRef.current[key] = value; } store.notify(); }, notify: () => { for (const cb of listenersRef.current) { cb(); } }, }; }, [listenersRef, stateRef, propsRef]); useIsomorphicLayoutEffect(() => { if (valueProp !== undefined) { store.setState("value", valueProp); } }, [valueProp]); const value = useStore((state) => state.value, store); const [formTrigger, setFormTrigger] = React.useState( null, ); const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node)); const isFormControl = formTrigger ? !!formTrigger.closest("form") : true; const [tabStopId, setTabStopId] = React.useState(null); const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false); const [focusableItemCount, setFocusableItemCount] = React.useState(0); const isClickFocusRef = React.useRef(false); const itemsRef = React.useRef>(new Map()); const autoIndexMapRef = React.useRef(new Map()); const nextAutoIndexRef = React.useRef(0); const getAutoIndex = React.useCallback((instanceId: string) => { const existingIndex = autoIndexMapRef.current.get(instanceId); if (existingIndex !== undefined) { return existingIndex; } const newIndex = nextAutoIndexRef.current++; autoIndexMapRef.current.set(instanceId, newIndex); return newIndex; }, []); const onItemFocus = React.useCallback((tabStopId: string) => { setTabStopId(tabStopId); }, []); const onItemShiftTab = React.useCallback(() => { setIsTabbingBackOut(true); }, []); const onFocusableItemAdd = React.useCallback(() => { setFocusableItemCount((prevCount) => prevCount + 1); }, []); const onFocusableItemRemove = React.useCallback(() => { setFocusableItemCount((prevCount) => prevCount - 1); }, []); const onItemRegister = React.useCallback((item: ItemData) => { itemsRef.current.set(item.id, item); }, []); const onItemUnregister = React.useCallback((id: string) => { itemsRef.current.delete(id); }, []); const getItems = React.useCallback(() => { return Array.from(itemsRef.current.values()) .filter((item) => item.ref.current) .sort((a, b) => { const elementA = a.ref.current; const elementB = b.ref.current; if (!elementA || !elementB) return 0; const position = elementA.compareDocumentPosition(elementB); if (position & Node.DOCUMENT_POSITION_FOLLOWING) { return -1; } if (position & Node.DOCUMENT_POSITION_PRECEDING) { return 1; } return 0; }); }, []); const onBlur = React.useCallback( (event: React.FocusEvent) => { rootProps.onBlur?.(event); if (event.defaultPrevented) return; setIsTabbingBackOut(false); }, [rootProps.onBlur], ); const onFocus = React.useCallback( (event: React.FocusEvent) => { propsRef.current.onFocus?.(event); if (event.defaultPrevented) return; const isKeyboardFocus = !isClickFocusRef.current; if ( event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut ) { const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS); event.currentTarget.dispatchEvent(entryFocusEvent); if (!entryFocusEvent.defaultPrevented) { const items = Array.from(itemsRef.current.values()).filter( (item) => !item.disabled, ); // For half-step ratings, find the item that represents the selected value // by looking for the ceiling value (e.g., 3.5 → find item with value 4) const selectedItem = propsRef.current.step < 1 ? items.find((item) => item.value === Math.ceil(value)) : items.find((item) => item.value === value); const currentItem = items.find((item) => item.id === tabStopId); const candidateItems = [selectedItem, currentItem, ...items].filter( Boolean, ) as ItemData[]; const candidateRefs = candidateItems.map((item) => item.ref); focusFirst(candidateRefs, false); } } isClickFocusRef.current = false; }, [propsRef, isTabbingBackOut, value, tabStopId], ); const onMouseDown = React.useCallback( (event: React.MouseEvent) => { propsRef.current.onMouseDown?.(event); if (event.defaultPrevented) return; isClickFocusRef.current = true; }, [propsRef], ); const contextValue = React.useMemo( () => ({ rootId, dir, orientation, activationMode, disabled, readOnly, size, max, step, clearable, getAutoIndex, }), [ rootId, dir, orientation, activationMode, disabled, readOnly, size, max, step, clearable, getAutoIndex, ], ); const focusContextValue = React.useMemo( () => ({ tabStopId, onItemFocus, onItemShiftTab, onFocusableItemAdd, onFocusableItemRemove, onItemRegister, onItemUnregister, getItems, }), [ tabStopId, onItemFocus, onItemShiftTab, onFocusableItemAdd, onFocusableItemRemove, onItemRegister, onItemUnregister, getItems, ], ); const RootPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( {isFormControl && ( )} ); } interface RatingItemProps extends Omit< React.ComponentProps<"button">, "children" > { index?: number; asChild?: boolean; children?: React.ReactNode | ((dataState: DataState) => React.ReactNode); } function RatingItem(props: RatingItemProps) { const { index, asChild, onClick: onClickProp, onFocus: onFocusProp, onKeyDown: onKeyDownProp, onMouseDown: onMouseDownProp, onMouseEnter: onMouseEnterProp, onMouseMove: onMouseMoveProp, onMouseLeave: onMouseLeaveProp, disabled, className, children, ref, ...itemProps } = props; const itemRef = React.useRef(null); const composedRef = useComposedRefs(ref, itemRef); const context = useRatingContext(ITEM_NAME); const instanceId = React.useId(); const actualIndex = React.useMemo(() => { if (index !== undefined) { return index; } return context.getAutoIndex(instanceId); }, [index, context, instanceId]); const itemValue = actualIndex + 1; const store = useStoreContext(ITEM_NAME); const focusContext = useFocusContext(ITEM_NAME); const value = useStore((state) => state.value); const hoveredValue = useStore((state) => state.hoveredValue); const clearable = context.clearable; const step = context.step; const activationMode = context.activationMode; const itemId = getItemId(context.rootId, itemValue); const isDisabled = context.disabled || disabled; const isReadOnly = context.readOnly; const isTabStop = focusContext.tabStopId === itemId; const displayValue = hoveredValue ?? value; const isFilled = displayValue >= itemValue; const isPartiallyFilled = step < 1 && displayValue >= itemValue - step && displayValue < itemValue; const isHovered = hoveredValue !== null && hoveredValue < itemValue; const isMouseClickRef = React.useRef(false); const propsRef = useAsRef({ onClick: onClickProp, onFocus: onFocusProp, onKeyDown: onKeyDownProp, onMouseDown: onMouseDownProp, onMouseEnter: onMouseEnterProp, onMouseMove: onMouseMoveProp, onMouseLeave: onMouseLeaveProp, }); useIsomorphicLayoutEffect(() => { focusContext.onItemRegister({ id: itemId, ref: itemRef, value: itemValue, disabled: !!isDisabled, }); if (!isDisabled) { focusContext.onFocusableItemAdd(); } return () => { focusContext.onItemUnregister(itemId); if (!isDisabled) { focusContext.onFocusableItemRemove(); } }; }, [focusContext, itemId, itemValue, isDisabled]); const onClick = React.useCallback( (event: React.MouseEvent) => { propsRef.current.onClick?.(event); if (event.defaultPrevented) return; if (!isDisabled && !isReadOnly) { let newValue = itemValue; if (step < 1) { const rect = event.currentTarget.getBoundingClientRect(); const clickX = event.clientX - rect.left; const isLeftHalf = clickX < rect.width / 2; if (context.dir === "rtl") { if (!isLeftHalf) { newValue = itemValue - step; } } else { if (isLeftHalf) { newValue = itemValue - step; } } } if (clearable && value === newValue) { newValue = 0; } store.setState("value", newValue); } }, [ isDisabled, isReadOnly, clearable, step, value, itemValue, store, context.dir, propsRef, ], ); const onFocus = React.useCallback( (event: React.FocusEvent) => { propsRef.current.onFocus?.(event); if (event.defaultPrevented) return; focusContext.onItemFocus(itemId); const isKeyboardFocus = !isMouseClickRef.current; if ( !isDisabled && !isReadOnly && activationMode !== "manual" && isKeyboardFocus ) { // For half-step mode, check if the current value is a half-step that belongs to this item // e.g., if value is 3.5 and itemValue is 4, don't change it const isHalfStepValue = step < 1 && value === itemValue - step; if (!isHalfStepValue) { const newValue = clearable && value === itemValue ? 0 : itemValue; store.setState("value", newValue); } } isMouseClickRef.current = false; }, [ focusContext, itemId, activationMode, isDisabled, isReadOnly, clearable, value, itemValue, step, store, propsRef, ], ); const onKeyDown = React.useCallback( (event: React.KeyboardEvent) => { propsRef.current.onKeyDown?.(event); if (event.defaultPrevented) return; if ( (event.key === "Enter" || event.key === " ") && activationMode === "manual" ) { event.preventDefault(); if (!isDisabled && !isReadOnly && itemRef.current) { itemRef.current.click(); } return; } if (event.key === "Tab" && event.shiftKey) { focusContext.onItemShiftTab(); return; } if (event.target !== event.currentTarget) return; const focusIntent = getFocusIntent( event, context.dir, context.orientation, ); if (focusIntent !== undefined) { if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return; event.preventDefault(); // For half-step mode, increment/decrement by step value instead of jumping to next item if (step < 1 && (focusIntent === "prev" || focusIntent === "next")) { if (!isDisabled && !isReadOnly) { let newValue = value; if (focusIntent === "next") { newValue = Math.min(value + step, context.max); } else { newValue = Math.max(value - step, 0); } store.setState("value", newValue); // Find and focus the item that represents this value const items = focusContext .getItems() .filter((item) => !item.disabled); const targetItem = items.find( (item) => item.value === Math.ceil(newValue), ); if (targetItem?.ref.current) { queueMicrotask(() => targetItem.ref.current?.focus()); } } return; } // For full-step mode or Home/End keys, use the original navigation const items = focusContext.getItems().filter((item) => !item.disabled); let candidateRefs = items.map((item) => item.ref); if (focusIntent === "last") { candidateRefs.reverse(); } else if (focusIntent === "prev" || focusIntent === "next") { if (focusIntent === "prev") candidateRefs.reverse(); const currentIndex = candidateRefs.findIndex( (ref) => ref.current === event.currentTarget, ); candidateRefs = candidateRefs.slice(currentIndex + 1); } queueMicrotask(() => focusFirst(candidateRefs)); } }, [ focusContext, context.dir, context.orientation, activationMode, isDisabled, isReadOnly, step, value, context.max, store, propsRef, ], ); const onMouseDown = React.useCallback( (event: React.MouseEvent) => { propsRef.current.onMouseDown?.(event); if (event.defaultPrevented) return; isMouseClickRef.current = true; if (isDisabled) { event.preventDefault(); } else { focusContext.onItemFocus(itemId); } }, [focusContext, itemId, isDisabled, propsRef], ); const onMouseEnter = React.useCallback( (event: React.MouseEvent) => { propsRef.current.onMouseEnter?.(event); if (event.defaultPrevented) return; if (!isDisabled && !isReadOnly) { let hoverValue = itemValue; if (step < 1) { const rect = event.currentTarget.getBoundingClientRect(); const mouseX = event.clientX - rect.left; const isLeftHalf = mouseX < rect.width / 2; if (context.dir === "rtl") { if (!isLeftHalf) { hoverValue = itemValue - step; } } else { if (isLeftHalf) { hoverValue = itemValue - step; } } } store.setState("hoveredValue", hoverValue); } }, [isDisabled, isReadOnly, step, itemValue, store, context.dir, propsRef], ); const onMouseLeave = React.useCallback( (event: React.MouseEvent) => { propsRef.current.onMouseLeave?.(event); if (event.defaultPrevented) return; if (!isDisabled && !isReadOnly) { store.setState("hoveredValue", null); } }, [isDisabled, isReadOnly, store, propsRef], ); const onMouseMove = React.useCallback( (event: React.MouseEvent) => { propsRef.current.onMouseMove?.(event); if (event.defaultPrevented) return; if (!isDisabled && !isReadOnly && step < 1) { const rect = event.currentTarget.getBoundingClientRect(); const mouseX = event.clientX - rect.left; const isLeftHalf = mouseX < rect.width / 2; let hoverValue = itemValue; if (context.dir === "rtl") { hoverValue = !isLeftHalf ? itemValue - step : itemValue; } else { hoverValue = isLeftHalf ? itemValue - step : itemValue; } store.setState("hoveredValue", hoverValue); } }, [isDisabled, isReadOnly, step, itemValue, store, context.dir, propsRef], ); const dataState: DataState = isFilled ? "full" : isPartiallyFilled ? "partial" : "empty"; const ItemPrimitive = asChild ? SlotPrimitive.Slot : "button"; return ( {typeof children === "function" ? children(dataState) : (children ?? ( ))} ); } export { Rating, RatingItem, useStore as useRating }; 52:Tfef,"use client"; import * as React from "react"; type InputValue = string[] | string; interface VisuallyHiddenInputProps extends Omit< React.InputHTMLAttributes, "value" | "checked" | "onReset" > { value?: T; checked?: boolean; control: HTMLElement | null; bubbles?: boolean; } function VisuallyHiddenInput( props: VisuallyHiddenInputProps, ) { const { control, value, checked, bubbles = true, type = "hidden", style, ...inputProps } = props; const isCheckInput = React.useMemo( () => type === "checkbox" || type === "radio" || type === "switch", [type], ); const inputRef = React.useRef(null); const prevValueRef = React.useRef<{ value: T | boolean | undefined; previous: T | boolean | undefined; }>({ value: isCheckInput ? checked : value, previous: isCheckInput ? checked : value, }); const prevValue = React.useMemo(() => { const currentValue = isCheckInput ? checked : value; if (prevValueRef.current.value !== currentValue) { prevValueRef.current.previous = prevValueRef.current.value; prevValueRef.current.value = currentValue; } return prevValueRef.current.previous; }, [isCheckInput, value, checked]); const [controlSize, setControlSize] = React.useState<{ width?: number; height?: number; }>({}); React.useLayoutEffect(() => { if (!control) { setControlSize({}); return; } setControlSize({ width: control.offsetWidth, height: control.offsetHeight, }); if (typeof window === "undefined") return; const resizeObserver = new ResizeObserver((entries) => { if (!Array.isArray(entries) || !entries.length) return; const entry = entries[0]; if (!entry) return; let width: number; let height: number; if ("borderBoxSize" in entry) { const borderSizeEntry = entry.borderBoxSize; const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry; width = borderSize.inlineSize; height = borderSize.blockSize; } else { width = control.offsetWidth; height = control.offsetHeight; } setControlSize({ width, height }); }); resizeObserver.observe(control, { box: "border-box" }); return () => { resizeObserver.disconnect(); }; }, [control]); React.useEffect(() => { const input = inputRef.current; if (!input) return; const inputProto = window.HTMLInputElement.prototype; const propertyKey = isCheckInput ? "checked" : "value"; const eventType = isCheckInput ? "click" : "input"; const currentValue = isCheckInput ? checked : value; const serializedCurrentValue = isCheckInput ? checked : typeof value === "object" && value !== null ? JSON.stringify(value) : value; const descriptor = Object.getOwnPropertyDescriptor(inputProto, propertyKey); const setter = descriptor?.set; if (prevValue !== currentValue && setter) { const event = new Event(eventType, { bubbles }); setter.call(input, serializedCurrentValue); input.dispatchEvent(event); } }, [prevValue, value, checked, bubbles, isCheckInput]); const composedStyle = React.useMemo(() => { return { ...style, ...(controlSize.width !== undefined && controlSize.height !== undefined ? controlSize : {}), border: 0, clip: "rect(0 0 0 0)", clipPath: "inset(50%)", height: "1px", margin: "-1px", overflow: "hidden", padding: 0, position: "absolute", whiteSpace: "nowrap", width: "1px", }; }, [style, controlSize]); return ( ); } export { VisuallyHiddenInput }; 53:T76f,/** * @see https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx */ import * as React from "react"; type PossibleRef = React.Ref | undefined; /** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */ function setRef(ref: PossibleRef, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { ref.current = value; } } /** * A utility to compose multiple refs together * Accepts callback refs and RefObject(s) */ function composeRefs(...refs: PossibleRef[]): React.RefCallback { return (node) => { let hasCleanup = false; const cleanups = refs.map((ref) => { const cleanup = setRef(ref, node); if (!hasCleanup && typeof cleanup === "function") { hasCleanup = true; } return cleanup; }); // React <19 will log an error to the console if a callback ref returns a // value. We don't use ref cleanups internally so this will only happen if a // user's ref callback returns a value, which we only expect if they are // using the cleanup functionality added in React 19. if (hasCleanup) { return () => { for (let i = 0; i < cleanups.length; i++) { const cleanup = cleanups[i]; if (typeof cleanup === "function") { cleanup(); } else { setRef(refs[i], null); } } }; } }; } /** * A custom hook that composes multiple refs * Accepts callback refs and RefObject(s) */ function useComposedRefs(...refs: PossibleRef[]): React.RefCallback { // oxlint-disable-next-line react/exhaustive-deps -- we want to memoize by all values return React.useCallback(composeRefs(...refs), refs); } export { composeRefs, useComposedRefs }; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"cn"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":["@diceui/use-as-ref","@diceui/use-isomorphic-layout-effect","@diceui/use-lazy-ref"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"ui/rating.tsx","content":"$51","type":"registry:ui","target":""},{"path":"components/visually-hidden-input.tsx","content":"$52","type":"registry:component","target":""},{"path":"lib/compose-refs.ts","content":"$53","type":"registry:lib","target":""}],"className":"h-[70svh] min-h-80"}]]}]