52: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"] 53: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"] 54:T3641,"use client" import * as React from "react" import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox" import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react" import { Virtuoso, type VirtuosoHandle } from "react-virtuoso" import { Hitbox } from "@/components/ui/hitbox" import { ScrollArea } from "@/components/ui/scroll-area" import { cn } from "@/lib/utils" /** * ComboboxContent renders through a Portal, so it doesn't inherit `dir` from * a nearby wrapper (only from document.documentElement). ComboboxInputGroup * measures the ambient direction where it's actually rendered and pushes it * here so ComboboxContent can apply it explicitly to the portaled popup. */ const ComboboxDirContext = React.createContext<{ dir: "ltr" | "rtl" setDir: (dir: "ltr" | "rtl") => void }>({ dir: "ltr", setDir: () => {} }) /** * The scrollable viewport element behind ComboboxContent's ScrollArea. * ComboboxVirtualList reads this to drive react-virtuoso's * `customScrollParent`, so it needs the real DOM node, not ScrollArea's * Radix-style wrapper. */ const ComboboxViewportContext = React.createContext(null) interface ComboboxVirtualizerHandle { scrollToIndex: (index: number) => void } /** * Bridges keyboard highlight events on the (possibly distant) Combobox Root * down to whichever ComboboxVirtualList is currently mounted inside it, so * arrowing onto an item that's scrolled out of the virtualized window still * scrolls it into view. A ref (not state) on purpose: it's written by a * descendant after Root has already rendered, and reading it happens inside * an event callback, not during render. */ const ComboboxVirtualizerContext = React.createContext | null>( null ) function Combobox({ onItemHighlighted, ...props }: ComboboxPrimitive.Root.Props) { const [dir, setDir] = React.useState<"ltr" | "rtl">("ltr") const contextValue = React.useMemo(() => ({ dir, setDir }), [dir]) const virtualizerHandleRef = React.useRef( null ) return ( { onItemHighlighted?.(value, eventDetails) if (eventDetails.reason === "keyboard") { virtualizerHandleRef.current?.scrollToIndex(eventDetails.index) } }} {...props} /> ) } function ComboboxInputGroup({ className, ...props }: ComboboxPrimitive.InputGroup.Props) { const ref = React.useRef(null) const { setDir } = React.useContext(ComboboxDirContext) React.useEffect(() => { function update() { if (!ref.current) return setDir(getComputedStyle(ref.current).direction === "rtl" ? "rtl" : "ltr") } update() const observer = new MutationObserver(update) observer.observe(document.documentElement, { attributes: true, attributeFilter: ["dir"], subtree: true, }) return () => observer.disconnect() }, [setDir]) return ( ) } function ComboboxInput({ className, ...props }: ComboboxPrimitive.Input.Props) { return ( ) } function ComboboxIcon({ className, ...props }: ComboboxPrimitive.Icon.Props) { return ( ) } function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) { return ( ) } function ComboboxContent({ className, sideOffset = 6, children, ...props }: ComboboxPrimitive.Positioner.Props & { sideOffset?: number }) { const { dir } = React.useContext(ComboboxDirContext) const [viewportElement, setViewportElement] = React.useState(null) return ( {children} ) } function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) { return ( ) } function ComboboxCollection(props: ComboboxPrimitive.Collection.Props) { return } /** * A windowed alternative to `ComboboxList`, for lists with enough items that * rendering them all as DOM nodes becomes a real cost (see the "virtualize * lists exceeding 50 items" guideline). Opt in per-usage by swapping * `ComboboxList` for this component — everything else about `Combobox` * composition stays the same. * * Must be used with `` on the root so Base UI hands * scroll-position and typeahead bookkeeping over to the virtualizer instead * of assuming every item is mounted. * * Reads the currently filtered items directly from Base UI's internal * filtering (`Combobox.useFilteredItems`) rather than taking an `items` prop, * so it always windows exactly what the root would otherwise render — typing * a search query re-windows automatically. */ function ComboboxVirtualList({ estimateSize = 36, overscan = 8, className, children, ...props }: { /** Estimated row height in pixels, used before an item's real height is measured on mount. @default 36 */ estimateSize?: number /** Extra pixels rendered outside the visible viewport, in each direction, to reduce blank flashes while scrolling fast. @default 8 */ overscan?: number children: (item: T, index: number) => React.ReactNode } & Omit) { const items = ComboboxPrimitive.useFilteredItems() const viewportElement = React.useContext(ComboboxViewportContext) const virtualizerHandleRef = React.useContext(ComboboxVirtualizerContext) const virtuosoRef = React.useRef(null) React.useEffect(() => { if (!virtualizerHandleRef) return virtualizerHandleRef.current = { scrollToIndex: (index) => virtuosoRef.current?.scrollIntoView({ index, behavior: "auto" }), } return () => { virtualizerHandleRef.current = null } }, [virtualizerHandleRef]) return ( {/* customScrollParent falls back to Virtuoso's own self-contained scrolling until the outer ScrollArea's viewport DOM node is available, instead of rendering nothing while it waits — gating the whole list on that ref could leave it permanently empty if the ref never resolved in time. `style` height is only used in that fallback case; Virtuoso ignores it once customScrollParent is set. */} children(items[index] as T, index)} /> ) } function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) { return ( ) } function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) { return ( {children} ) } function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) { return ( ) } function ComboboxGroupLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) { return ( ) } function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) { return ( ) } function ComboboxChips({ className, ...props }: ComboboxPrimitive.Chips.Props) { const ref = React.useRef(null) const { setDir } = React.useContext(ComboboxDirContext) React.useEffect(() => { function update() { if (!ref.current) return setDir(getComputedStyle(ref.current).direction === "rtl" ? "rtl" : "ltr") } update() const observer = new MutationObserver(update) observer.observe(document.documentElement, { attributes: true, attributeFilter: ["dir"], subtree: true, }) return () => observer.disconnect() }, [setDir]) return ( ) } function ComboboxValue(props: ComboboxPrimitive.Value.Props) { return } function ComboboxChip({ className, children, ...props }: ComboboxPrimitive.Chip.Props) { return ( {children} ) } function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props) { return ( ) } export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxIcon, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxValue, ComboboxVirtualList, } 51:["$","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","react-virtuoso",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-virtuoso","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":"react-virtuoso"}]]}]}]]}],["$","$L52",null,{"namespace":"@persianlabsui","registryDependencies":["utils","@persianlabsui/scroll-area"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/base/ui/combobox.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]