{"version":3,"file":"MultiSelect.cjs","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n MantineColor,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport {\n Combobox,\n ComboboxItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n useCombobox,\n} from '../Combobox';\nimport { __BaseInputProps, __InputStylesNames, InputClearButtonProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedValues } from './filter-picked-values';\n\nexport type MultiSelectStylesNames =\n | __InputStylesNames\n | ComboboxLikeStylesNames\n | 'pill'\n | 'pillsList'\n | 'inputField';\n\nexport interface MultiSelectProps\n extends BoxProps,\n __BaseInputProps,\n ComboboxLikeProps,\n StylesApiProps,\n ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {\n /** Controlled component value */\n value?: string[];\n\n /** Uncontrolled component default value */\n defaultValue?: string[];\n\n /** Called when value changes */\n onChange?: (value: string[]) => void;\n\n /** Called with `value` of the removed item */\n onRemove?: (value: string) => void;\n\n /** Called when the clear button is clicked */\n onClear?: () => void;\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 /** Maximum number of values, no limit if not set */\n maxValues?: number;\n\n /** Allows searching @default `false` */\n searchable?: boolean;\n\n /** Message displayed when no option matches the current search query while the `searchable` prop is set or there is no data */\n nothingFoundMessage?: React.ReactNode;\n\n /** If set, the check icon is displayed near the selected option label @default `true` */\n withCheckIcon?: boolean;\n\n /** Position of the check icon relative to the option label @default `'left'` */\n checkIconPosition?: 'left' | 'right';\n\n /** If set, picked options are removed from the options list @default `false` */\n hidePickedOptions?: boolean;\n\n /** If set, the clear button is displayed in the right section when the component has value @default `false` */\n clearable?: boolean;\n\n /** Props passed down to the clear button */\n clearButtonProps?: InputClearButtonProps;\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 @default `','` */\n hiddenInputValuesDivider?: string;\n\n /** A function to render content of the option, replaces the default content of the option */\n renderOption?: (item: ComboboxLikeRenderOptionInput) => React.ReactNode;\n\n /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n scrollAreaProps?: ScrollAreaProps;\n\n /** Controls color of the default chevron */\n chevronColor?: MantineColor;\n\n /** Clear search value when item is selected */\n clearSearchOnChange?: boolean;\n}\n\nexport type MultiSelectFactory = Factory<{\n props: MultiSelectProps;\n ref: HTMLInputElement;\n stylesNames: MultiSelectStylesNames;\n}>;\n\nconst defaultProps = {\n maxValues: Infinity,\n withCheckIcon: true,\n checkIconPosition: 'left',\n hiddenInputValuesDivider: ',',\n clearSearchOnChange: true,\n size: 'sm',\n} satisfies Partial;\n\nexport const MultiSelect = factory((_props, ref) => {\n const props = useProps('MultiSelect', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n size,\n value,\n defaultValue,\n onChange,\n onKeyDown,\n variant,\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 radius,\n rightSection,\n rightSectionWidth,\n rightSectionPointerEvents,\n rightSectionProps,\n leftSection,\n leftSectionWidth,\n leftSectionPointerEvents,\n leftSectionProps,\n inputContainer,\n inputWrapperOrder,\n withAsterisk,\n labelProps,\n descriptionProps,\n errorProps,\n wrapperProps,\n description,\n label,\n error,\n maxValues,\n searchable,\n nothingFoundMessage,\n withCheckIcon,\n checkIconPosition,\n hidePickedOptions,\n withErrorStyles,\n name,\n form,\n id,\n clearable,\n clearButtonProps,\n hiddenInputProps,\n placeholder,\n hiddenInputValuesDivider,\n required,\n mod,\n renderOption,\n onRemove,\n onClear,\n scrollAreaProps,\n chevronColor,\n attributes,\n clearSearchOnChange,\n ...others\n } = props;\n\n const _id = useId(id);\n const parsedData = getParsedComboboxData(data);\n const optionsLockup = getOptionsLockup(parsedData);\n const retainedSelectedOptions = useRef>({});\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 {\n styleProps,\n rest: { type, autoComplete, ...rest },\n } = extractStyleProps(others);\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 handleSearchChange = (value: string) => {\n setSearchValue(value);\n combobox.resetSelectedOption();\n };\n\n const getStyles = useStyles({\n name: 'MultiSelect',\n classes: {} as any,\n props,\n classNames,\n styles,\n unstyled,\n attributes,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({\n props,\n styles,\n classNames,\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 (event.key === 'Backspace' && _searchValue.length === 0 && _value.length > 0) {\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 const optionData = optionsLockup[item] || retainedSelectedOptions.current[item];\n return (\n {\n setValue(_value.filter((i) => item !== i));\n onRemove?.(item);\n }}\n unstyled={unstyled}\n disabled={disabled}\n {...getStyles('pill')}\n >\n {optionData?.label || item}\n \n );\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, _searchValue]);\n\n useEffect(() => {\n _value.forEach((val) => {\n if (val in optionsLockup) {\n retainedSelectedOptions.current[val] = optionsLockup[val];\n }\n });\n }, [optionsLockup, _value]);\n\n const clearButton = (\n {\n onClear?.();\n setValue([]);\n handleSearchChange('');\n }}\n />\n );\n\n const filteredData = filterPickedValues({ data: parsedData, value: _value });\n const _clearable = clearable && _value.length > 0 && !disabled && !readOnly;\n\n return (\n <>\n {\n onOptionSubmit?.(val);\n if (clearSearchOnChange) {\n handleSearchChange('');\n }\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 __clearSection={clearButton}\n __clearable={_clearable}\n rightSection={rightSection}\n rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n rightSectionWidth={rightSectionWidth}\n rightSectionProps={rightSectionProps}\n leftSection={leftSection}\n leftSectionWidth={leftSectionWidth}\n leftSectionPointerEvents={leftSectionPointerEvents}\n leftSectionProps={leftSectionProps}\n inputContainer={inputContainer}\n inputWrapperOrder={inputWrapperOrder}\n withAsterisk={withAsterisk}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorProps={errorProps}\n wrapperProps={wrapperProps}\n description={description}\n label={label}\n error={error}\n withErrorStyles={withErrorStyles}\n __stylesApiProps={{\n ...props,\n rightSectionPointerEvents: rightSectionPointerEvents || (_clearable ? 'all' : 'none'),\n multiline: true,\n }}\n pointer={!searchable}\n onClick={() => (searchable ? combobox.openDropdown() : combobox.toggleDropdown())}\n data-expanded={combobox.dropdownOpened || undefined}\n id={_id}\n required={required}\n mod={mod}\n attributes={attributes}\n >\n \n {values}\n \n {\n onFocus?.(event);\n searchable && combobox.openDropdown();\n }}\n onBlur={(event) => {\n onBlur?.(event);\n combobox.closeDropdown();\n handleSearchChange('');\n }}\n onKeyDown={handleInputKeydown}\n value={_searchValue}\n onChange={(event) => {\n handleSearchChange(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