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:Tca5b,'use client'; import { ChevronsUpDown, GripVertical, Loader2, PlusIcon, X } from 'lucide-react'; import { Dispatch, FC, ReactNode, SetStateAction, createContext, useContext, useEffect, useRef, useState } from 'react'; import { DndProvider, useDrag, useDrop } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { compositeFieldDefault, compositeFieldZero } from '@/lib/recipes'; import { cn } from '@/lib/utils'; import { isMobileDevice } from '@/lib/is-mobile'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card/Card'; import { Checkbox } from '@/components/ui/checkbox'; import { Chip } from '@/components/ui/chip'; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'; import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Sheet, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'; import { Spacing } from '@/components/ui/spacing'; import { LabelScope, useLabels, usePreset } from '@/components/ui/labels-context'; export type MultiSelectOptionId = string; export type MultiSelectOption = { label: string; id: MultiSelectOptionId; // Marks this value as invalid. Its chip uses the destructive look and is announced as invalid. invalid?: boolean; }; type InvalidValueProps = { invalidValues?: MultiSelectOptionId[]; isValueInvalid?: (id: MultiSelectOptionId) => boolean; loading?: boolean; }; // A selected id that is not in the options is shown with its id as label (never an empty chip). const resolveSelectedOption = (options: MultiSelectOption[] | undefined, id: MultiSelectOptionId): MultiSelectOption => options?.find((option) => option.id === id) ?? { id, label: id }; // A selected value is invalid when the option says so, the consumer marks it, or it is not in the options (unless options are still loading). const isSelectedValueInvalid = (options: MultiSelectOption[] | undefined, id: MultiSelectOptionId, { invalidValues, isValueInvalid, loading }: InvalidValueProps) => { const option = options?.find((o) => o.id === id); if (!option) return !loading; return Boolean(option.invalid) || Boolean(invalidValues?.includes(id)) || isValueInvalid?.(id) === true; }; // Create a context for managing the currently open MultiSelect export const MultiSelectContext = createContext<{ openId: string | null; setOpenId: Dispatch>; }>({ openId: null, setOpenId: () => {}, }); interface MultiSelectProviderProps { children: React.ReactNode; } const MultiSelectProvider: FC = ({ children }) => { const [openId, setOpenId] = useState(null); return {children}; }; export interface MultiSelectProps { // Built-in texts. Each wins over the provider text. emptyText?: string; addHintText?: string; loadingText?: string; addNewText?: string; options: MultiSelectOption[]; selected: MultiSelectOptionId[]; onChange: Dispatch>; onAddItemClick?: (item: string) => void; placeholder?: string; loading?: boolean; defaultValue?: string; label?: string; id: string; disabled?: boolean; disableSearch?: boolean; chipsInside?: boolean; disableAddNew?: boolean; decentToggle?: boolean; useSheet?: boolean; useDragAndDrop?: boolean; dropdownClassName?: string; chipsAsCol?: boolean; disableCheckbox?: boolean; hideCheckedItems?: boolean; selectedOptionsAsText?: boolean; renderItem?: (option: MultiSelectOption) => React.ReactNode; onUpdateOrder?: (options: MultiSelectOption[]) => void; onlyCheckOnCheckbox?: boolean; orderCheckedOnTop?: boolean; selectedOptionsAsListItems?: boolean; chipVariant?: 'default' | 'secondary' | 'info' | 'success' | 'destructive'; customAction?: React.ReactNode; customAddAction?: React.ReactNode; description?: string; useSheetText?: string; useSheetTrigger?: React.ReactNode; disableCheckAll?: boolean; highlightChipById?: MultiSelectOptionId[]; isMobile?: boolean; icon?: ReactNode; mode?: 'default' | 'persistent'; applyButtonText?: string; cancelButtonText?: string; onCancel?: () => void; disableBackdropClose?: boolean; truncateChips?: boolean; disableMaxChips?: boolean; maxChipsToShow?: number; /** * Forces the error-token treatment (`border-error`) on the trigger and sets `aria-invalid`, * mirroring ``'s `aria-[invalid=true]:border-error` (select.tsx) so a required * MultiSelect can show the same validation-error state as the base Select (SELECT-MAT-07). */ invalid?: boolean; /** Points to the id of an external error message, announced via `aria-describedby`. */ ariaDescribedBy?: string; // Ids of selected values to show as invalid (destructive chip, announced as invalid). Same as `invalid: true` on the option. invalidValues?: MultiSelectOptionId[]; // Decides per selected id whether the value is invalid. A selected id that is missing from `options` is always invalid (unless `loading`). isValueInvalid?: (id: MultiSelectOptionId) => boolean; // Accessible name of the field when there is no visible `label`. Falls back to the placeholder. ariaLabel?: string; // Shows the chosen values as plain chips on the muted read-only surface. Stays focusable (`aria-readonly`), cannot be opened or changed. readOnly?: boolean; } const multiSelectLabelId = (id?: string) => (id ? `${id}-label` : undefined); const MultiSelectLabel: FC<{ label?: string; disabled?: boolean; htmlFor?: string }> = ({ label, disabled = false, htmlFor = 'multiselect', }) => label ? ( {label} ) : ( <> ); const MultiSelectInput: FC< MultiSelectProps & { comboboxRef: React.RefObject; chipsInside?: boolean; height: number[]; setOpenId: Dispatch>; open: boolean; id: string; disabled?: boolean; placeholder?: string; options?: MultiSelectOption[]; selected?: MultiSelectOptionId[]; handleUnselect: (item: MultiSelectOptionId) => void; disableSearch?: boolean; inputRef: React.RefObject; search: string; setSearch: Dispatch>; handleSearchChange: (value: string) => void; handleKeyDown: (e: React.KeyboardEvent) => void; decentToggle?: boolean; noButton?: boolean; onUpdateOrder: (options: MultiSelectOption[]) => void; useSheetText?: string; useSheetTrigger?: React.ReactNode; disableMaxChips?: boolean; maxChipsToShow?: number; } > = ({ comboboxRef, chipsInside, height, setOpenId, open, id, disabled, placeholder, options, selected, handleUnselect, disableSearch, inputRef, search, handleSearchChange, handleKeyDown, decentToggle, useSheet, useDragAndDrop, noButton = false, onChange, onUpdateOrder, chipVariant, useSheetText, useSheetTrigger, icon, disableMaxChips, maxChipsToShow = 3, invalid, ariaDescribedBy, label, ariaLabel, invalidValues, isValueInvalid, loading, }) => { const l = useLabels(); const zero = usePreset() === 'zero'; const invalidProps = { invalidValues, isValueInvalid, loading }; const anyValueInvalid = (selected ?? []).some((id) => isSelectedValueInvalid(options, id, invalidProps)); return ( ); }; const DraggableChip: FC<{ option: MultiSelectOption; index: number; selected: MultiSelectOptionId[]; onChange: Dispatch>; handleUnselect: (item: MultiSelectOptionId) => void; disabled?: boolean; useDragAndDrop?: boolean; selectedOptionsAsText?: boolean; chipsAsCol?: boolean; onUpdateOrder: (updatedOptions: MultiSelectOption[]) => void; options: MultiSelectOption[]; selectedOptionsAsListItems?: boolean; chipVariant?: 'default' | 'secondary' | 'info' | 'success' | 'destructive'; truncateChips?: boolean; invalid?: boolean; }> = ({ option, index, handleUnselect, disabled, useDragAndDrop, selectedOptionsAsText, chipsAsCol, onUpdateOrder, options, selectedOptionsAsListItems, chipVariant, truncateChips, invalid, }) => { const l = useLabels(); const zero = usePreset() === 'zero'; const ref = useRef(null); const [, drop] = useDrop({ accept: 'chip', hover(item: { index: number }) { if (item.index === index) return; const updatedOptions = [...options]; const draggedOption = updatedOptions.splice(item.index, 1)[0]; updatedOptions.splice(index, 0, draggedOption); onUpdateOrder(updatedOptions); item.index = index; }, }); const [{ isDragging }, drag] = useDrag({ type: 'chip', item: { type: 'chip', index }, collect: (monitor) => ({ isDragging: monitor.isDragging(), }), }); if (useDragAndDrop) { drag(drop(ref)); } return ( <> {useDragAndDrop && (

)}

{useDragAndDrop && } {selectedOptionsAsText ? (

{option?.label} {invalid && {l.invalidSuffix}}

) : ( handleUnselect(option?.id)} removeLabel={l.remove(option?.label)} /> )}

); }; const MultiSelectDropdownActions: FC<{ disableAddNew?: boolean; disabled?: boolean; loading?: boolean; handleDialogSubmit: () => void; search: string; isNewItem: (item: string) => boolean; setOpenId: Dispatch>; useSheet?: boolean; disableCheckAll?: boolean; options: MultiSelectOption[]; selected: MultiSelectOptionId[]; onChange: Dispatch>; mode?: 'default' | 'persistent'; hasChanges?: boolean; onApply?: () => void; onCancel?: () => void; applyButtonText?: string; cancelButtonText?: string; disableBackdropClose?: boolean; customAction?: React.ReactNode; customAddAction?: React.ReactNode; }> = ({ disableAddNew, disabled, loading, handleDialogSubmit, search, isNewItem, setOpenId, useSheet, disableCheckAll, options, selected, onChange, mode, hasChanges, onApply, onCancel, applyButtonText, cancelButtonText, disableBackdropClose, customAction, customAddAction, }) => { const l = useLabels(); const handleCheckAll = () => { const allSelected = options.map((option) => option.id); onChange(allSelected); }; const handleUncheckAll = () => { onChange([]); }; const getCheckboxState = () => { if (selected.length === options.length) { return 'checked'; } else if (selected.length > 0) { return 'indeterminate'; } else { return 'unchecked'; } }; return ( <> {!disableCheckAll && (

{getCheckboxState() === 'checked' ? ( ) : ( )}

)} {!disableAddNew && !customAction && !customAddAction && ( )} {customAddAction} {mode === 'persistent' ? ( <> ) : ( <> {useSheet ? ( ) : ( )} )} {/* `text-general-warning-hover` — the same warning-role token Alert's `warning` variant uses for its text (alert.tsx), not a raw `amber-600` swatch (SELECT-MAT-04). */} {mode === 'persistent' && hasChanges && (

{l.unsavedChanges}

)}

); }; const MultiSelectDropdown: FC< MultiSelectProps & { id: string; options: MultiSelectOption[]; selected: MultiSelectOptionId[]; onChange: Dispatch>; handleDialogSubmit: () => void; dropdownRef: React.RefObject; search: string; setSearch: Dispatch>; dropdownDirection: 'down' | 'up'; isNewItem: (item: string) => boolean; disableAddNew?: boolean; disabled?: boolean; loading?: boolean; open: boolean; topDistances: () => number | undefined; height: number[]; inputRef: React.RefObject; setOpenId: Dispatch>; useSheet?: boolean; useDragAndDrop?: boolean; mode?: 'default' | 'persistent'; hasChanges?: boolean; onApply?: () => void; onCancel?: () => void; applyButtonText?: string; cancelButtonText?: string; disableBackdropClose?: boolean; customAddAction?: React.ReactNode; } > = ({ id, options, selected, onChange, handleDialogSubmit, dropdownRef, search, setSearch, dropdownDirection, isNewItem, disableAddNew, disabled, loading, open, topDistances, height, inputRef, setOpenId, useSheet = false, disableCheckbox, hideCheckedItems, renderItem, onlyCheckOnCheckbox, orderCheckedOnTop, // New prop isMobile, disableCheckAll, mode, hasChanges, onApply, onCancel, applyButtonText, cancelButtonText, disableBackdropClose, customAction, customAddAction, }) => { const l = useLabels(); const isVisible = useSheet ? true : open; const multiSelectDropdownActionsProps = { disableAddNew, disableCheckAll, disabled, loading, handleDialogSubmit, search, isNewItem, setOpenId, useSheet, onlyCheckOnCheckbox, options, selected, onChange, mode, hasChanges, onApply, onCancel, applyButtonText, cancelButtonText, disableBackdropClose, customAction, customAddAction, }; const multiSelectCommandItemProps = { selected, onChange, setSearch, inputRef, setOpenId, id, disabled, disableCheckbox, renderItem, onlyCheckOnCheckbox, isMobile, }; const sortedOptions = orderCheckedOnTop ? options.slice().sort((a, b) => { const aSelected = selected.includes(a.id); const bSelected = selected.includes(b.id); if (aSelected && !bSelected) return -1; if (!aSelected && bSelected) return 1; return 0; }) : options; return ( isVisible && (

{l.notFound} {l.pressEnterToAdd} {sortedOptions.length > 0 && sortedOptions .filter((option) => !hideCheckedItems || !selected.includes(option.id)) .map((option) => ( ))}

) ); }; const MultiSelectCommandItem: FC<{ option: MultiSelectOption; selected: MultiSelectOptionId[]; onChange: Dispatch>; setSearch: Dispatch>; inputRef: React.RefObject; setOpenId: Dispatch>; id: string; disabled?: boolean; disableCheckbox?: boolean; renderItem?: (option: MultiSelectOption) => React.ReactNode; onlyCheckOnCheckbox?: boolean; isMobile?: boolean; }> = ({ option, selected, onChange, setSearch, inputRef, setOpenId, id, disabled, disableCheckbox, renderItem, onlyCheckOnCheckbox, isMobile, }) => { return ( { if (!disabled) { onChange((prevSelected) => prevSelected.includes(option.id) ? prevSelected.filter((item) => item !== option.id) : [...prevSelected, option.id], ); // Keep search and selection state setOpenId(id); } } } onKeyDown={(e) => { if (e.key === ' ' && !disabled) { // Space key - toggle selection e.preventDefault(); e.stopPropagation(); onChange((prevSelected) => prevSelected.includes(option.id) ? prevSelected.filter((item) => item !== option.id) : [...prevSelected, option.id], ); setOpenId(id); } else if (e.key === 'Tab' && !e.shiftKey) { // Tab - return to search e.preventDefault(); e.stopPropagation(); inputRef.current?.focus(); } // Let cmdk handle Enter and arrow keys }} > {!disableCheckbox && ( { if (!disabled) { onChange((prevSelected) => prevSelected.includes(option.id) ? prevSelected.filter((item) => item !== option.id) : [...prevSelected, option.id], ); // Keep search and selection state when clicking checkbox setOpenId(id); } } : undefined } /> )} {renderItem ? ( renderItem(option) ) : ( {option.label} )} ); }; const MultiSelectField: FC = ({ options = [], selected = [], onChange, onAddItemClick, placeholder: placeholderProp, loading = false, defaultValue = '', label, id, disabled = false, disableSearch = false, chipsInside = false, disableAddNew = false, decentToggle = false, useSheet = false, useDragAndDrop = false, dropdownClassName = '[&_[cmdk-list-sizer]]:max-h-[250px]', chipsAsCol = false, disableCheckbox = false, hideCheckedItems = false, selectedOptionsAsText = false, selectedOptionsAsListItems = false, renderItem, onUpdateOrder = () => {}, onlyCheckOnCheckbox = false, orderCheckedOnTop = false, chipVariant = 'info', customAction = null, customAddAction = null, description, useSheetText, useSheetTrigger, disableCheckAll = false, highlightChipById = [], isMobile = false, icon, mode = 'default', applyButtonText: applyButtonTextProp, cancelButtonText: cancelButtonTextProp, onCancel, disableBackdropClose = false, truncateChips = false, disableMaxChips = false, maxChipsToShow = 3, invalid = false, ariaDescribedBy, ariaLabel, invalidValues, isValueInvalid, }) => { const l = useLabels(); const placeholder = placeholderProp ?? l.searchEllipsis; const applyButtonText = applyButtonTextProp ?? l.apply; const cancelButtonText = cancelButtonTextProp ?? l.cancel; const { openId, setOpenId } = useContext(MultiSelectContext); const [search, setSearch] = useState(defaultValue); const [height, setHeight] = useState([]); const [dropdownDirection, setDropdownDirection] = useState<'down' | 'up'>('down'); const labelHeight = label ? 36 : 0; const comboboxRef = useRef(null); const chipWrapperRef = useRef(null); const dropdownRef = useRef(null); const inputRef = useRef(null); const [dialogOpen, setDialogOpen] = useState(false); const [newItemLabel, setNewItemLabel] = useState(''); const initialHeight = 44; // State for persistent mode const [tempSelected, setTempSelected] = useState(selected); const [hasChanges, setHasChanges] = useState(false); const open = openId === id; // Update temp selections when selected prop changes (for persistent mode) useEffect(() => { if (mode === 'persistent') { setTempSelected(selected); setHasChanges(false); } }, [selected, mode]); useEffect(() => { if (search !== '') { setOpenId(id); } }, [search, setOpenId, id]); useEffect(() => { const handleClick = (e: MouseEvent) => { if (e.target instanceof Element && !e.target.closest('.command')) { setOpenId(null); } }; const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') { setOpenId(null); } }; document.addEventListener('click', handleClick); document.addEventListener('keydown', handleKeyDown); return () => { document.removeEventListener('click', handleClick); document.removeEventListener('keydown', handleKeyDown); }; }, [setOpenId]); useEffect(() => { if (useSheet) return; const handleResize = () => { if (!comboboxRef.current) return; const rectCombobox = comboboxRef.current.getBoundingClientRect(); const rectDropdown = dropdownRef.current?.getBoundingClientRect(); const viewportHeight = window.innerHeight; if (rectCombobox.top > viewportHeight - rectCombobox.bottom) { setDropdownDirection('up'); } else { setDropdownDirection('down'); } if (rectCombobox.top < 208 && viewportHeight - rectCombobox.bottom < 208) { if (!dropdownRef.current) return; dropdownRef.current?.setAttribute( 'style', `position: fixed; top: 0; height: 100% !important; width: ${ rectCombobox.width ? rectCombobox.width : 0 }px !important;`, ); dropdownRef.current .querySelector('[role="listbox"]') ?.setAttribute( 'style', `max-height: ${disableAddNew ? viewportHeight - 16 : viewportHeight - 16 - 50}px !important;`, ); } if (!rectDropdown?.height) return; }; const handleHeight = (entries: ResizeObserverEntry[]) => { const heightArr = [initialHeight, initialHeight]; for (const [index, entry] of entries.entries()) { const { height } = entry.contentRect; heightArr[index] = height === 0 ? initialHeight : height; } setHeight(heightArr); }; const observer = new ResizeObserver((entries) => { handleHeight(entries); handleResize(); }); // Capture the nodes so cleanup unobserves exactly what this effect observed const combobox = comboboxRef.current; const chipWrapper = chipWrapperRef.current; const dropdown = dropdownRef.current; if (combobox) observer.observe(combobox); if (chipWrapper) observer.observe(chipWrapper); return () => { if (combobox) observer.unobserve(combobox); if (chipWrapper) observer.unobserve(chipWrapper); if (dropdown) observer.unobserve(dropdown); window.removeEventListener('resize', handleResize); }; }, [open, selected, disableAddNew, useSheet]); useEffect(() => { const isMobileDev = isMobileDevice(); if (open && inputRef.current && !isMobileDev && !useSheet) { inputRef.current.focus(); } }, [open, useSheet]); useEffect(() => { setTimeout(() => { inputRef.current?.blur(); }, 0); }, []); // Check for changes in persistent mode useEffect(() => { if (mode === 'persistent') { const hasChanges = JSON.stringify(tempSelected.sort()) !== JSON.stringify(selected.sort()); setHasChanges(hasChanges); } }, [tempSelected, selected, mode]); const handleUnselect = (item: MultiSelectOptionId) => { if (mode === 'persistent') { setTempSelected((prevSelected) => prevSelected.filter((i) => i !== item)); } else { onChange((prevSelected) => prevSelected.filter((i) => i !== item)); } }; const handleApply = () => { onChange(tempSelected); if (!disableBackdropClose) { setOpenId(null); } setHasChanges(false); }; const handleCancel = () => { setTempSelected(selected); setHasChanges(false); if (onCancel) { onCancel(); } else if (!disableBackdropClose) { setOpenId(null); } }; const isNewItem = (item: string) => options?.every((option) => option.label !== item.trim()); const handleSearchChange = (value: string) => { setSearch(value); }; const handleDialogSubmit = () => { if (isNewItem(search)) { setDialogOpen(true); setNewItemLabel(search.trim()); } }; const handleAddNewItem = () => { if (onAddItemClick && isNewItem(newItemLabel)) { onAddItemClick(newItemLabel); setNewItemLabel(''); setDialogOpen(false); setTimeout(() => { inputRef.current?.focus(); }, 0); } }; const hasFilteredMatches = (searchTerm: string) => { if (!searchTerm.trim()) return true; // Empty search shows all items const normalizedSearch = searchTerm.toLowerCase().trim(); return options.some((option) => option.label.toLowerCase().includes(normalizedSearch)); }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Backspace' && search === '') { e.preventDefault(); if (mode === 'persistent') { setTempSelected((prevSelected) => prevSelected.slice(0, -1)); } else { onChange((prevSelected) => prevSelected.slice(0, -1)); } } // Handle Enter key - only trigger add new when there are NO matches if (e.key === 'Enter' && search.trim() && !disableAddNew) { // Only prevent default and show add dialog if there are no filtered matches if (!hasFilteredMatches(search) && isNewItem(search)) { e.preventDefault(); setNewItemLabel(search.trim()); setDialogOpen(true); } // Otherwise, let cmdk handle the Enter key to select/toggle the first match } // Note: Arrow keys are handled by cmdk itself for navigation // We don't need to handle them manually }; const topDistances = () => { if (dropdownDirection === 'up') return undefined; const inputHeight = height[0]; const chipsHeight = height[1]; const chipsOutside = !chipsInside; if (chipsOutside) { const currentSelected = mode === 'persistent' ? tempSelected : selected; if (currentSelected.length === 0) { return inputHeight + labelHeight; } else { return inputHeight + chipsHeight + labelHeight + 4; } } if (chipsInside) { return inputHeight < initialHeight ? inputHeight + labelHeight : inputHeight + labelHeight + 12; } }; const multiSelectInputProps = { setSearch, onChange: mode === 'persistent' ? setTempSelected : onChange, comboboxRef, chipsInside, height, setOpenId, open, id, disabled, placeholder, options, selected: mode === 'persistent' ? tempSelected : selected, handleUnselect, disableSearch, inputRef, search, handleSearchChange, handleKeyDown, decentToggle, useSheet, onUpdateOrder, chipVariant, useSheetText, useSheetTrigger, icon, disableMaxChips, maxChipsToShow, invalid, ariaDescribedBy, label, ariaLabel, invalidValues, isValueInvalid, loading, }; const multiSelectChipsProps = { selected: mode === 'persistent' ? tempSelected : selected, options, handleUnselect, chipWrapperRef, disabled, chipsInside, onChange: mode === 'persistent' ? setTempSelected : onChange, useDragAndDrop, id, chipsAsCol, selectedOptionsAsText, onUpdateOrder, selectedOptionsAsListItems, chipVariant, highlightChipById, truncateChips, disableMaxChips, maxChipsToShow, invalidValues, isValueInvalid, loading, }; const multiSelectDropdownProps = { id, options, selected: mode === 'persistent' ? tempSelected : selected, onChange: mode === 'persistent' ? setTempSelected : onChange, handleDialogSubmit, dropdownRef, search, setSearch, dropdownDirection, isNewItem, disableAddNew, disabled, loading, open, topDistances, height, inputRef, setOpenId, useSheet, useDragAndDrop, dropdownClassName, disableCheckbox, hideCheckedItems, renderItem, onUpdateOrder, onlyCheckOnCheckbox, orderCheckedOnTop, disableCheckAll, isMobile, mode, hasChanges, onApply: handleApply, onCancel: handleCancel, applyButtonText, cancelButtonText, customAction, customAddAction, }; return ( {useSheet ? ( {customAction ? ( {customAction} ) : ( )} {description && {description}} {!chipsInside && } e.preventDefault() : undefined} > {customAction ? ( {label}

{customAction}

) : ( {label} )} {description && {description}} {!chipsInside && } {mode === 'persistent' && disableBackdropClose && ( )} ) : ( {customAction ? ( {customAction} ) : ( )} {description && {description}} {!chipsInside && } )} ); }; const MultiSelectChips: FC< MultiSelectProps & { chipWrapperRef: React.RefObject; handleUnselect: (item: MultiSelectOptionId) => void; disabled?: boolean; chipsInside?: boolean; useDragAndDrop?: boolean; onUpdateOrder: (options: MultiSelectOption[]) => void; highlightChipById?: MultiSelectOptionId[]; truncateChips?: boolean; disableMaxChips?: boolean; maxChipsToShow?: number; } & InvalidValueProps > = ({ selected, options, handleUnselect, chipWrapperRef, disabled, onChange, useDragAndDrop, chipsAsCol, selectedOptionsAsText, onUpdateOrder, selectedOptionsAsListItems, chipVariant, highlightChipById = [], truncateChips, disableMaxChips = false, maxChipsToShow = 3, invalidValues, isValueInvalid, loading, }) => { const l = useLabels(); const invalidProps = { invalidValues, isValueInvalid, loading }; const visibleItems = disableMaxChips ? selected : selected.slice(0, maxChipsToShow); const remainingCount = disableMaxChips ? 0 : selected.length - maxChipsToShow; return ( selected.length > 0 && (

{visibleItems.map((item, index) => ( resolveSelectedOption(options, id))} selectedOptionsAsListItems={selectedOptionsAsListItems} chipVariant={highlightChipById.includes(item) ? 'info' : chipVariant} truncateChips={truncateChips} invalid={isSelectedValueInvalid(options, item, invalidProps)} /> ))} {remainingCount > 0 && (

+{remainingCount} {l.itemCount(remainingCount)}

)}

) ); }; const labelScope = (props: { emptyText?: string; addHintText?: string; loadingText?: string; addNewText?: string }) => ({ ...(props.emptyText !== undefined && { notFound: props.emptyText }), ...(props.addHintText !== undefined && { pressEnterToAdd: props.addHintText }), ...(props.loadingText !== undefined && { pleaseWait: props.loadingText }), ...(props.addNewText !== undefined && { addNew: props.addNewText }), }); const MultiSelect: FC = ({ readOnly = false, ...props }) => { const l = useLabels(); const zero = usePreset() === 'zero'; if (!readOnly) { return ( ); } const { id, label, options = [], selected = [], placeholder = l.searchEllipsis, className, invalid = false, ariaDescribedBy } = props as MultiSelectProps & { className?: string }; const chosen = selected.map((id) => resolveSelectedOption(options, id)); const invalidProps = { invalidValues: props.invalidValues, isValueInvalid: props.isValueInvalid, loading: props.loading }; const anyValueInvalid = chosen.some((option) => isSelectedValueInvalid(options, option.id, invalidProps)); return ( {label && } ); }; export { MultiSelect, MultiSelectChips, MultiSelectCommandItem, MultiSelectDropdown, MultiSelectDropdownActions, MultiSelectInput, MultiSelectLabel, MultiSelectProvider, }; 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","lucide-react@^0.379.0",{"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@^0.379.0"}]]}]}],["$","li","react-dnd@^16.0.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-dnd","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-dnd@^16.0.1"}]]}]}],["$","li","react-dnd-html5-backend@^16.0.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-dnd-html5-backend","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-dnd-html5-backend@^16.0.1"}]]}]}]]}],["$","$L51",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/button.json","https://zero-design.itdone.de/r/card-default.json","https://zero-design.itdone.de/r/checkbox.json","https://zero-design.itdone.de/r/chip.json","https://zero-design.itdone.de/r/command.json","https://zero-design.itdone.de/r/dialog.json","https://zero-design.itdone.de/r/input.json","https://zero-design.itdone.de/r/is-mobile.json","https://zero-design.itdone.de/r/label.json","https://zero-design.itdone.de/r/labels-context.json","https://zero-design.itdone.de/r/recipes.json","https://zero-design.itdone.de/r/sheet.json","https://zero-design.itdone.de/r/spacing.json","https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/multiselect.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]