50: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"] 51: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"] 52:T4f65,"use client"; // Adapted from Pure UI: https://github.com/MusKRI/pure-ui/tree/main/src/registry/pure-ui/ui/combobox import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox"; import { cn } from "cn"; import { createContext, useCallback, useContext, useEffect, useRef, useState, type ComponentProps, type RefObject, } from "react"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { ScrollArea, ScrollAreaContent } from "@/components/ui/scroll-area"; // Styles for invalid animation shake const invalidShakeStyles = ` @keyframes iandefined-invalid-shake-replay { 0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 28.57% { transform: translateX(6px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 57.14% { transform: translateX(-6px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 78.57% { transform: translateX(4px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 100% { transform: translateX(0); } } [data-invalid-shake="owner"] { animation-duration: 280ms; animation-timing-function: linear; } [data-invalid-shake="owner"].is-shaking[aria-invalid="true"], [data-invalid-shake="owner"].is-shaking[data-invalid], [data-invalid-shake="owner"].is-shaking:has([aria-invalid="true"]), [data-invalid-shake="owner"].is-shaking:has([data-invalid]) { animation-name: iandefined-invalid-shake-replay; will-change: transform; } @media (prefers-reduced-motion: reduce) { [data-invalid-shake="owner"] { animation: none !important; transform: none !important; } } `; type ComboboxContextValue = { chipsRef: RefObject; multiple: boolean; open: boolean; setOpen: (open: boolean) => void; isFocused: boolean; setIsFocused: (isFocused: boolean) => void; }; const ComboboxContext = createContext(null); function useComboboxContext() { const context = useContext(ComboboxContext); if (!context) throw new Error("Combobox parts must be used within Combobox"); return context; } type ComboboxProps< Value, Multiple extends boolean | undefined = false, > = ComboboxPrimitive.Root.Props; function Combobox({ open: controlledOpen, defaultOpen = false, onOpenChange, multiple = false as Multiple, ...props }: ComboboxProps) { const chipsRef = useRef(null); const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen); const [isFocused, setIsFocused] = useState(false); const open = controlledOpen ?? uncontrolledOpen; const handleOpenChange = ( nextOpen: boolean, eventDetails: ComboboxPrimitive.Root.ChangeEventDetails ) => { if (controlledOpen === undefined) { setUncontrolledOpen(nextOpen); } onOpenChange?.(nextOpen, eventDetails); }; return ( { if (controlledOpen === undefined) { setUncontrolledOpen(nextOpen); } }, isFocused, setIsFocused, }} > ); } function ComboboxValue(props: ComboboxPrimitive.Value.Props) { return ; } import { ChevronsUpDownIcon, X, Check } from "lucide-react"; type ComboboxInputProps = ComboboxPrimitive.Input.Props & { isClearable?: boolean; showTrigger?: boolean; }; function ComboboxInput({ isClearable = false, showTrigger = true, className, ...props }: ComboboxInputProps) { const { multiple, open, isFocused } = useComboboxContext(); const isSelecting = open || isFocused; if (multiple) { return ( ); } return (

} {...props} /> {showTrigger && ( )} {isClearable && ( )}

); } function ComboboxLabel(props: ComponentProps) { return ; } function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) { return ( ); } function ComboboxTrigger({ className, ...props }: ComboboxPrimitive.Trigger.Props) { return ( ); } type ComboboxChipsProps = ComboboxPrimitive.Chips.Props & { overflowBehavior?: "wrap" | "wrap-when-open" | "cutoff"; maxCount?: number; }; function ComboboxChips({ className, overflowBehavior = "wrap-when-open", maxCount, children, onFocus, onBlur, ...props }: ComboboxChipsProps) { const { chipsRef, open, isFocused, setIsFocused } = useComboboxContext(); const overflowBadgeRef = useRef(null); const [overflowAmount, setOverflowAmount] = useState(0); const isSelecting = open || isFocused; const shouldWrap = overflowBehavior === "wrap" || (overflowBehavior === "wrap-when-open" && isSelecting); const checkOverflow = useCallback(() => { const container = chipsRef.current; if (!container) return; const items = container.querySelectorAll( "[data-slot=combobox-chip]" ); const badge = overflowBadgeRef.current; if (shouldWrap) { items.forEach((item) => { item.style.removeProperty("display"); }); if (badge) { badge.style.display = "none"; } setOverflowAmount(0); return; } // Reset items to visible, hide badge items.forEach((item) => { item.style.removeProperty("display"); }); if (badge) { badge.style.display = "none"; } if (items.length === 0) { setOverflowAmount(0); return; } if (maxCount !== undefined && items.length > maxCount) { const amount = items.length - maxCount; for (let i = items.length - 1; i >= maxCount; i--) { const item = items[i]; if (item) item.style.display = "none"; } if (badge) { badge.style.removeProperty("display"); badge.textContent = `+${amount}`; } setOverflowAmount(amount); return; } // Dynamic single line check if (container.scrollWidth <= container.clientWidth + 1) { setOverflowAmount(0); return; } let amount = 0; for (let i = items.length - 1; i >= 0; i--) { amount = items.length - i; const item = items[i]; if (item) { item.style.display = "none"; } if (badge) { badge.style.removeProperty("display"); badge.textContent = `+${amount}`; } if (container.scrollWidth <= container.clientWidth + 1) { break; } } setOverflowAmount(amount); }, [chipsRef, shouldWrap, maxCount]); useEffect(() => { const rafId = requestAnimationFrame(() => { checkOverflow(); }); return () => cancelAnimationFrame(rafId); }, [checkOverflow]); useEffect(() => { const container = chipsRef.current; if (!container) return; let rafId: number | null = null; const scheduleCheck = () => { if (rafId !== null) cancelAnimationFrame(rafId); rafId = requestAnimationFrame(() => { checkOverflow(); }); }; const resizeObserver = new ResizeObserver(scheduleCheck); resizeObserver.observe(container); const mutationObserver = new MutationObserver(scheduleCheck); mutationObserver.observe(container, { childList: true, subtree: true }); return () => { if (rafId !== null) cancelAnimationFrame(rafId); resizeObserver.disconnect(); mutationObserver.disconnect(); }; }, [checkOverflow, chipsRef]); return ( <> { setIsFocused(true); onFocus?.(e); }} onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) { setIsFocused(false); } onBlur?.(e); }} {...props} > {children} +{overflowAmount} ); } function ComboboxChip({ className, children, ...props }: ComboboxPrimitive.Chip.Props) { return ( {children} ); } function ComboboxChipRemove({ className, children, ...props }: ComboboxPrimitive.ChipRemove.Props) { return ( {children ?? } ); } // Note: Select and DatePickerTimer scroll natively without ScrollArea by placing overflow-y-auto directly // on an element with an explicit max-h or height. When nesting ScrollArea in a flex popup (like Combobox and // Autocomplete), ScrollArea.Root must establish a flex container with min-h-0 flex-1 overflow-hidden so Firefox // (Gecko) does not compute Viewport's percentage height as auto, which would disable scrolling. function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) { return ( ); } function ComboboxPortal(props: ComboboxPrimitive.Portal.Props) { return ; } type ComboboxPositionerProps = ComboboxPrimitive.Positioner.Props; function ComboboxPositioner({ className, ...props }: ComboboxPositionerProps) { return ( ); } type ComboboxPopupProps = ComboboxPrimitive.Popup.Props & Pick< ComboboxPositionerProps, "align" | "alignOffset" | "side" | "sideOffset" >; function ComboboxPopup({ align = "center", alignOffset = 0, className, side = "bottom", sideOffset = 0, children, ...props }: ComboboxPopupProps) { const { chipsRef, multiple } = useComboboxContext(); return ( {children} ); } function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) { return ( ); } function ComboboxCollection(props: ComboboxPrimitive.Collection.Props) { return ( ); } function ComboboxRow(props: ComboboxPrimitive.Row.Props) { return ; } function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) { return (

{children}

); } function ComboboxGroup(props: ComboboxPrimitive.Group.Props) { return ; } function ComboboxGroupLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) { return ( ); } function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) { return ( ); } export { Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, type ComboboxChipsProps, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPopup, type ComboboxPopupProps, ComboboxPortal, ComboboxPositioner, ComboboxRow, ComboboxSeparator, ComboboxTrigger, ComboboxValue, }; 4f:["$","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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@iandefined","registryDependencies":["https://ui.iandefined.com/r/input.json","https://ui.iandefined.com/r/label.json","https://ui.iandefined.com/r/scroll-area.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/base/combobox.tsx","content":"$52","type":"registry:ui","target":"components/ui/combobox.tsx"}],"className":"h-[70svh] min-h-80"}]]}]