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:T23a0,"use client"; import { ChevronDownIcon, CrossSmallIcon } from "blode-icons-react"; import { useCombobox, useMultipleSelection } from "downshift"; import type { UseMultipleSelectionStateChange } from "downshift"; import snakeCase from "lodash/snakeCase"; import uniqBy from "lodash/uniqBy"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover"; import { Badge } from "./badge"; import type { BadgeProps } from "./badge"; export interface MultiComboboxOption { description?: string; id?: string | number; label?: string; variant?: BadgeProps["variant"]; } export type OnMultiChangeParams = ( changes: UseMultipleSelectionStateChange, ) => void; export interface MultiComboboxProps { create?: boolean; disabled?: boolean; id?: string; inputClassName?: string; maxDropdownHeight?: number; onChange?: OnMultiChangeParams; onInputChange?: (value: string) => void; options: MultiComboboxOption[]; placeholder?: string; ref?: React.Ref; startOpen?: boolean; values?: MultiComboboxOption[]; } export interface MultiComboboxRef { clearInput: () => void; } const getFilteredOptions = ( options: MultiComboboxOption[], selectedItems: MultiComboboxOption[], inputValue: string, ) => { const lowerCasedInputValue = inputValue.toLowerCase(); return options.filter( (option) => !selectedItems.some(({ id }) => id === option.id) && (option.label || "").toLowerCase().includes(lowerCasedInputValue), ); }; const MultiCombobox = ({ options, values, onChange, onInputChange, startOpen, placeholder = "Filter", create = false, id, inputClassName, disabled = false, maxDropdownHeight = 250, ref, }: MultiComboboxProps) => { const [inputValue, setInputValue] = React.useState(""); const [selectedItems, setSelectedItems] = React.useState(values ?? []); const [prevValues, setPrevValues] = React.useState(values); if (values !== prevValues) { setPrevValues(values); setSelectedItems(values ?? []); } const items = React.useMemo( () => getFilteredOptions(options, selectedItems, inputValue), [options, selectedItems, inputValue], ); const { getSelectedItemProps, getDropdownProps, removeSelectedItem, addSelectedItem } = useMultipleSelection({ onStateChange(changes) { const uniqueItems = uniqBy(changes.selectedItems ?? [], ({ id: itemId }) => itemId); switch (changes.type) { case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace: case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete: case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace: case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem: case useMultipleSelection.stateChangeTypes.FunctionAddSelectedItem: { setSelectedItems(uniqueItems); break; } default: { break; } } onChange?.({ ...changes, selectedItems: uniqueItems, }); }, selectedItems, }); const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, setInputValue: comboboxSetInputValue, openMenu, } = useCombobox({ defaultHighlightedIndex: 0, initialIsOpen: startOpen, itemToString(item) { return item?.label || ""; }, items, labelId: id, onStateChange(changes) { switch (changes.type) { case useCombobox.stateChangeTypes.InputKeyDownEnter: case useCombobox.stateChangeTypes.ItemClick: { if (changes.selectedItem) { addSelectedItem(changes.selectedItem); } setInputValue(""); comboboxSetInputValue(""); break; } case useCombobox.stateChangeTypes.InputChange: { const nextValue = changes.inputValue ?? ""; setInputValue(nextValue); onInputChange?.(nextValue); break; } default: { break; } } }, selectedItem: null, }); const clearInput = React.useCallback(() => { setInputValue(""); comboboxSetInputValue(""); }, [comboboxSetInputValue]); React.useImperativeHandle( ref, () => ({ clearInput, }), [clearInput], ); const handleCreate = () => { const normalizedInput = inputValue.trim(); if (!normalizedInput) { return; } addSelectedItem({ id: snakeCase(normalizedInput), label: normalizedInput, }); clearInput(); }; const shouldCreate = create && inputValue.trim().length > 0; return (

))} { event.stopPropagation(); if (!disabled) { openMenu(); } }, onFocus: () => { if (!disabled) { openMenu(); } }, preventKeyAction: isOpen, }), )} />

event.preventDefault()} sideOffset={0} >

{shouldCreate ? ( ) : null} {isOpen && items.map((item, index) => (

{item.label}

))} {items.length === 0 ? (

No results

) : null}

); }; export { MultiCombobox }; 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","@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","downshift",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/downshift","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":"downshift"}]]}]}],["$","li","lodash",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lodash","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":"lodash"}]]}]}],["$","li","blode-icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/blode-icons-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":"blode-icons-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@blode","registryDependencies":["badge"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ui/multi-combobox.tsx","content":"$53","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]