{"version":3,"file":"MultiSelect.cjs","sources":["../../src/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useId, useUncontrolled } from \"@rtdui/hooks\";\nimport {\n Combobox,\n type ComboboxClearButtonProps,\n type ComboboxItem,\n type ComboboxLikeProps,\n type ComboboxLikeRenderOptionInput,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n useCombobox,\n} from \"../Combobox\";\nimport { Chip } from \"../Chip\";\nimport { ChipsInput } from \"../ChipsInput\";\nimport { filterPickedValues } from \"./filter-picked-values\";\nimport type { InputBaseOwnProps } from \"../InputBase\";\n\nexport interface MultiSelectProps\n extends\n ComboboxLikeProps,\n Omit,\n Omit<\n React.ComponentProps<\"input\">,\n \"size\" | \"value\" | \"defaultValue\" | \"onChange\"\n > {\n /** Controlled component value */\n value?: string[];\n\n /** Default value for uncontrolled component */\n defaultValue?: string[];\n\n /** Called whe value changes */\n onChange?: (value: string[]) => void;\n\n /** Called when the clear button is clicked */\n onClear?: () => void;\n\n /** Determines whether the select should be searchable\n * @default false\n */\n searchable?: boolean;\n\n /** Controlled search value */\n searchValue?: string;\n\n /** Default search value */\n defaultSearchValue?: string;\n\n /** Called when search changes */\n onSearchChange?: (value: string) => void;\n\n /** Determines whether check icon should be displayed near the selected option label\n * @default true\n */\n withCheckIcon?: boolean;\n\n /** Position of the check icon relative to the option label\n * @default \"left\"\n */\n checkIconPosition?: \"left\" | \"right\";\n\n /** Message displayed when no option matched current search query, only applicable when `searchable` prop is set */\n nothingFoundMessage?: React.ReactNode;\n\n /** Determines whether the clear button should be displayed in the right section when the component has value\n * @default false\n */\n clearable?: boolean;\n\n /** Props passed down to the clear button */\n clearButtonProps?: ComboboxClearButtonProps;\n\n /** Props passed down to the hidden input */\n hiddenInputProps?: Omit, \"value\">;\n\n /** Divider used to separate values in the hidden input `value` attribute\n * @default \",\"\n */\n hiddenInputValuesDivider?: string;\n\n /** A function to render content of the option, replaces the default content of the option */\n renderOption?: (\n item: ComboboxLikeRenderOptionInput,\n ) => React.ReactNode;\n\n autoComplete?: string;\n\n /** Called with `value` of the removed item */\n onRemove?: (value: string) => void;\n\n /** Maximum number of values\n * @default Infinity\n */\n maxValues?: number;\n /** Determines whether picked options should be removed from the options list\n * @default false\n */\n hidePickedOptions?: boolean;\n}\n\nexport function MultiSelect(props: MultiSelectProps) {\n const {\n ref,\n className,\n style,\n size = \"sm\",\n value,\n defaultValue,\n onChange,\n onKeyDown,\n data,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownOpen,\n onDropdownClose,\n selectFirstOptionOnChange,\n onOptionSubmit,\n comboboxProps,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n readOnly,\n disabled,\n onFocus,\n onBlur,\n onPaste,\n rightSection,\n leftSection,\n label,\n error,\n maxValues = Number.POSITIVE_INFINITY,\n searchable,\n nothingFoundMessage,\n withCheckIcon = true,\n checkIconPosition = \"left\",\n hidePickedOptions,\n name,\n form,\n id,\n clearable,\n clearButtonProps,\n hiddenInputProps,\n placeholder,\n hiddenInputValuesDivider = \",\",\n required,\n renderOption,\n onRemove,\n onClear,\n autoComplete = \"off\",\n ...others\n } = props;\n\n const _id = useId(id);\n const parsedData = getParsedComboboxData(data);\n const optionsLockup = getOptionsLockup(parsedData);\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen,\n onDropdownClose: () => {\n onDropdownClose?.();\n combobox.resetSelectedOption();\n },\n });\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: [],\n onChange,\n });\n\n const [_searchValue, setSearchValue] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: \"\",\n onChange: onSearchChange,\n });\n\n const handleInputKeydown = (event: React.KeyboardEvent) => {\n onKeyDown?.(event);\n\n if (event.key === \" \" && !searchable) {\n event.preventDefault();\n combobox.toggleDropdown();\n }\n\n if (\n event.key === \"Backspace\" &&\n _searchValue.length === 0 &&\n _value.length > 0\n ) {\n onRemove?.(_value[_value.length - 1]);\n setValue(_value.slice(0, _value.length - 1));\n }\n };\n\n const values = _value.map((item, index) => (\n {\n setValue(_value.filter((i) => item !== i));\n onRemove?.(item);\n }\n : undefined\n }\n label={optionsLockup[item]?.label || item}\n />\n ));\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, _value]);\n\n const clearButton = clearable &&\n _value.length > 0 &&\n !disabled &&\n !readOnly && (\n {\n onClear?.();\n setValue([]);\n setSearchValue(\"\");\n }}\n />\n );\n\n const filteredData = filterPickedValues({\n data: parsedData,\n value: _value,\n });\n\n return (\n <>\n {\n onOptionSubmit?.(val);\n setSearchValue(\"\");\n combobox.updateSelectedOptionIndex(\"selected\");\n\n if (_value.includes(optionsLockup[val].value)) {\n setValue(_value.filter((v) => v !== optionsLockup[val].value));\n onRemove?.(optionsLockup[val].value);\n } else if (_value.length < maxValues!) {\n setValue([..._value, optionsLockup[val].value]);\n }\n }}\n {...comboboxProps}\n >\n \n \n }\n rightSectionPointerEvents={clearButton ? \"auto\" : undefined}\n rightSectionWidth=\"32px\"\n leftSection={leftSection}\n label={label}\n error={error}\n multiline\n slots={{\n input: !searchable ? \"cursor-pointer\" : undefined,\n }}\n pointer={!searchable}\n onClick={() =>\n searchable ? combobox.openDropdown() : combobox.toggleDropdown()\n }\n data-expanded={combobox.dropdownOpened || undefined}\n id={_id}\n required={required}\n >\n \n {values}\n \n {\n onFocus?.(event);\n searchable && combobox.openDropdown();\n }}\n onBlur={(event) => {\n onBlur?.(event);\n combobox.closeDropdown();\n setSearchValue(\"\");\n }}\n onKeyDown={handleInputKeydown}\n value={_searchValue}\n onChange={(event) => {\n setSearchValue(event.currentTarget.value);\n searchable && combobox.openDropdown();\n selectFirstOptionOnChange && combobox.selectFirstOption();\n }}\n disabled={disabled}\n readOnly={readOnly || !searchable}\n pointer={!searchable}\n />\n \n \n \n \n\n