51: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/3j06ow7w40nxu.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"] 52: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/3j06ow7w40nxu.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"] 53:T528d,"use client"; import * as React from "react"; import { AnimatePresence, LayoutGroup, motion, useReducedMotion, } from "motion/react"; import { cn } from "@/lib/utils"; type FloatingSelectOptionBase = { /** What renders for this option. Can be text or any node. */ label: React.ReactNode; /** Optional leading node (icon, swatch, etc.) shown before the label. */ icon?: React.ReactNode; }; export type FloatingSelectOption = FloatingSelectOptionBase & ( | { /** Stable value passed back in callbacks. */ value: string; /** @deprecated Use `value`. Kept for compatibility with earlier versions. */ id?: string; } | { /** @deprecated Use `value`. Kept for compatibility with earlier versions. */ id: string; /** Stable value passed back in callbacks. */ value?: string; } ); export interface FloatingSelectProps extends Omit< React.ComponentProps<"div">, "defaultValue" | "onChange" | "children" > { /** The choices revealed when the button is opened. */ options: FloatingSelectOption[]; /** Trigger label shown before the selected value. */ label?: React.ReactNode; /** Optional leading icon for the trigger. */ icon?: React.ReactNode; /** Uncontrolled initial selected option value. */ defaultValue?: string; /** Controlled selected option value. */ value?: string; /** Fires with the selected option whenever it changes. */ onValueChange?: (value: string, option: FloatingSelectOption) => void; /** @deprecated Use `onValueChange`. Kept for compatibility with earlier versions. */ onChange?: (value: string, option: FloatingSelectOption) => void; /** Controlled open state of the options panel. */ open?: boolean; /** Uncontrolled initial open state. */ defaultOpen?: boolean; /** Fires whenever the panel requests an open-state change. */ onOpenChange?: (open: boolean) => void; /** Close the panel after selecting an option. */ closeOnSelect?: boolean; /** Show the selected value next to the trigger label. */ showSelectedValue?: boolean; /** Pin the select to the viewport, or render it in normal document flow. */ placement?: "fixed" | "inline"; /** Pin the select to the top or bottom of the viewport. */ position?: "top" | "bottom"; /** Horizontal alignment of the floating select. */ align?: "start" | "center" | "end"; /** Distance from the pinned edge, in pixels. */ offset?: number; /** Play the entrance animation on mount. */ reveal?: boolean; /** Classes applied to the floating shell. */ className?: string; /** Classes applied to the trigger button. */ triggerClassName?: string; /** Classes applied to the options panel. */ panelClassName?: string; /** * Classes applied to the outer positioning wrapper (the element carrying * `fixed`/`z-50` in `placement="fixed"`), so the stacking context can be * overridden without forking the component. */ wrapperClassName?: string; } const EASE_OUT = [0.22, 1, 0.36, 1] as const; const SHELL_LAYOUT_DURATION = 0.26; const PANEL_DURATION = 0.16; const OPTION_STAGGER = 0.028; const OPTION_DELAY = 0.04; const OPTION_DURATION = 0.13; const SHELL_TRANSITION = { layout: { type: "spring", duration: SHELL_LAYOUT_DURATION, bounce: 0 }, opacity: { duration: PANEL_DURATION, ease: EASE_OUT }, y: { duration: 0.22, ease: EASE_OUT }, } as const; const PANEL_TRANSITION = { duration: PANEL_DURATION, ease: EASE_OUT }; const PANEL_EXIT_TRANSITION = { duration: 0.08, ease: EASE_OUT }; const ACTIVE_SURFACE_TRANSITION = { type: "spring", duration: 0.22, bounce: 0, opacity: { duration: 0.14, ease: EASE_OUT }, } as const; function getCssPixels(value: string) { const pixels = Number.parseFloat(value); return Number.isFinite(pixels) ? pixels : 0; } function getOptionValue(option: FloatingSelectOption) { return (option.value ?? option.id) as string; } function getOpenHoverLockDelay(optionCount: number) { const listDuration = OPTION_DELAY + Math.max(optionCount - 1, 0) * OPTION_STAGGER + OPTION_DURATION; return Math.ceil( Math.max(SHELL_LAYOUT_DURATION, PANEL_DURATION, listDuration) * 1000, ); } export function FloatingSelect({ options, label = "Select", icon, defaultValue, value, onValueChange, onChange, open: openProp, defaultOpen = false, onOpenChange, closeOnSelect = true, showSelectedValue = true, placement = "fixed", position = "bottom", align = "center", offset = 16, reveal = false, className, triggerClassName, panelClassName, wrapperClassName, ...props }: FloatingSelectProps) { const shellRef = React.useRef(null); const triggerRef = React.useRef(null); const reactId = React.useId(); const listboxId = `${reactId}-listbox`; const shouldReduceMotion = useReducedMotion(); const openControlled = openProp !== undefined; const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen); const open = openControlled ? openProp : uncontrolledOpen; const setOpen = React.useCallback( (nextOpen: boolean) => { if (!openControlled) { setUncontrolledOpen(nextOpen); } onOpenChange?.(nextOpen); }, [onOpenChange, openControlled], ); const [optionHoverLocked, setOptionHoverLocked] = React.useState(false); const [inlineAnchorSize, setInlineAnchorSize] = React.useState<{ width: number; height: number; } | null>(null); const [internalSelected, setInternalSelected] = React.useState( defaultValue ?? (options[0] ? getOptionValue(options[0]) : ""), ); // Roving tabindex: only one option is in the tab order, so Tab leaves the // listbox instead of walking every option. It follows focus, falling back // to the selected option (or the first) before any option has been focused. const [focusedOptionValue, setFocusedOptionValue] = React.useState< string | null >(null); // The trigger and the listbox are swapped in and out of the DOM by // AnimatePresence, so focus must be managed manually: into the selected // option when the listbox mounts, back onto the trigger after keyboard or // selection closes (pointer dismissals leave focus where the user clicked). const pendingTriggerFocusRef = React.useRef(false); React.useEffect(() => { const shellElement = shellRef.current; if (!shellElement) return; if (open) { const target = shellElement.querySelector( '[role="option"][aria-selected="true"]', ) ?? shellElement.querySelector('[role="option"]'); target?.focus(); return; } if (pendingTriggerFocusRef.current) { pendingTriggerFocusRef.current = false; shellElement .querySelector('[data-slot="floating-select-trigger"]') ?.focus(); } }, [open]); React.useEffect(() => { if (!open) return; // Escape belongs to this select only while focus is inside it, so a page // shortcut or a surrounding dialog keeps its own Escape otherwise. The // capture phase on window runs before any document-level dismiss layer, // which is what lets a select inside a dialog close alone. function onKeyDown(event: KeyboardEvent) { if (event.key !== "Escape" || event.defaultPrevented) return; const shellElement = shellRef.current; if (!shellElement) return; const target = event.target; const withinShell = shellElement.contains(document.activeElement) || (target instanceof Node && shellElement.contains(target)); if (!withinShell) return; event.preventDefault(); event.stopPropagation(); pendingTriggerFocusRef.current = true; setOpen(false); } window.addEventListener("keydown", onKeyDown, true); return () => window.removeEventListener("keydown", onKeyDown, true); }, [open, setOpen]); React.useEffect(() => { if (!open) return; function onPointerDown(event: PointerEvent) { if (!shellRef.current?.contains(event.target as Node)) { setOpen(false); } } document.addEventListener("pointerdown", onPointerDown); return () => document.removeEventListener("pointerdown", onPointerDown); }, [open, setOpen]); React.useEffect(() => { if (!open || shouldReduceMotion === true || !optionHoverLocked) return; const timeout = window.setTimeout(() => { setOptionHoverLocked(false); }, getOpenHoverLockDelay(options.length)); return () => window.clearTimeout(timeout); }, [open, optionHoverLocked, options.length, shouldReduceMotion]); const selectedValue = value ?? internalSelected ?? (options[0] ? getOptionValue(options[0]) : ""); const selectedOption = options.find( (option) => getOptionValue(option) === selectedValue, ); const tabbableOptionValue = options.some( (option) => getOptionValue(option) === focusedOptionValue, ) ? focusedOptionValue : selectedOption ? selectedValue : options[0] ? getOptionValue(options[0]) : null; const alignClass = align === "start" ? "justify-start" : align === "end" ? "justify-end" : "justify-center"; const transformOriginX = align === "start" ? "left" : align === "end" ? "right" : "center"; const transformOrigin = `${transformOriginX} ${position}`; const edgeOffset = (offset + 20) * (position === "top" ? -1 : 1); const activeSurfaceLayoutId = shouldReduceMotion ? undefined : "floating-select-active-surface"; const optionHoverEnabled = shouldReduceMotion === true || !optionHoverLocked; const handleSelect = (option: FloatingSelectOption) => { const nextValue = getOptionValue(option); if (value === undefined) { setInternalSelected(nextValue); } onValueChange?.(nextValue, option); if (!onValueChange) { onChange?.(nextValue, option); } if (closeOnSelect) { pendingTriggerFocusRef.current = true; setOpen(false); } }; // role="listbox" promises arrow-key navigation; options are real buttons, // so roving focus is enough (no aria-activedescendant needed). const handleListboxKeyDown = (event: React.KeyboardEvent) => { if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return; const optionElements = Array.from( event.currentTarget.querySelectorAll('[role="option"]'), ); if (optionElements.length === 0) return; event.preventDefault(); const currentIndex = optionElements.indexOf( document.activeElement as HTMLButtonElement, ); const lastIndex = optionElements.length - 1; let nextIndex = 0; if (event.key === "ArrowDown") { nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % optionElements.length; } else if (event.key === "ArrowUp") { nextIndex = currentIndex < 0 ? lastIndex : (currentIndex - 1 + optionElements.length) % optionElements.length; } else if (event.key === "End") { nextIndex = lastIndex; } optionElements[nextIndex]?.focus(); }; const updateInlineAnchorSize = React.useCallback( (nextSize: { width: number; height: number }) => { setInlineAnchorSize((current) => { if ( current?.width === nextSize.width && current.height === nextSize.height ) { return current; } return nextSize; }); }, [], ); const measureInlineAnchorSize = React.useCallback(() => { if (placement !== "inline") return; const trigger = triggerRef.current; if (!trigger) return; const { width, height } = trigger.getBoundingClientRect(); const shell = shellRef.current; const shellStyles = shell ? window.getComputedStyle(shell) : null; const borderX = shellStyles ? getCssPixels(shellStyles.borderLeftWidth) + getCssPixels(shellStyles.borderRightWidth) : 0; const borderY = shellStyles ? getCssPixels(shellStyles.borderTopWidth) + getCssPixels(shellStyles.borderBottomWidth) : 0; updateInlineAnchorSize({ width: width + borderX, height: height + borderY, }); }, [placement, updateInlineAnchorSize]); // Tabbing (or programmatic focus) out of the open panel closes it. A null // relatedTarget is ignored on purpose: it is what a click on the panel's // non-focusable padding, a Safari button press, or the window losing focus // produce, none of which mean the user left. Pointer dismissals outside are // already handled by the document pointerdown listener. const handleShellBlur = (event: React.FocusEvent) => { if (!open) return; const nextFocus = event.relatedTarget; if (nextFocus instanceof Node && !event.currentTarget.contains(nextFocus)) { setOpen(false); } }; const handleOpen = () => { measureInlineAnchorSize(); setOptionHoverLocked(shouldReduceMotion !== true); setOpen(true); }; const reduceMotionTransition = shouldReduceMotion ? { duration: 0 } : {}; const listVariants = { hidden: {}, visible: { transition: { staggerChildren: OPTION_STAGGER, staggerDirection: position === "bottom" ? -1 : 1, delayChildren: OPTION_DELAY, }, }, }; const optionVariants = { hidden: { opacity: 0, y: position === "bottom" ? 3 : -3 }, visible: { opacity: 1, y: 0, transition: { duration: OPTION_DURATION, ease: EASE_OUT }, }, }; const shell = ( {open ? ( ) : ( )} ); if (placement === "inline") { return (

{shell}

); } return (

{shell}

); } 50:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@ericts","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/base/ui/floating-select.tsx","content":"$53","type":"registry:ui","target":"@ui/floating-select.tsx"}],"className":"h-[70svh] min-h-80"}]]}]