{"version":3,"file":"MultiSelect.mjs","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport { __CloseButtonProps } from '../CloseButton';\nimport {\n Combobox,\n ComboboxLikeProps,\n ComboboxLikeStylesNames,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n useCombobox,\n} from '../Combobox';\nimport { __BaseInputProps, __InputStylesNames } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\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 /** Default value for uncontrolled component */\n defaultValue?: string[];\n\n /** Called whe value changes */\n onChange?: (value: string[]) => 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, `Infinity` by default */\n maxValues?: number;\n\n /** Determines whether the select should be searchable, `false` by default */\n searchable?: boolean;\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 check icon should be displayed near the selected option label, `true` by default */\n withCheckIcon?: boolean;\n\n /** Position of the check icon relative to the option label, `'left'` by default */\n checkIconPosition?: 'left' | 'right';\n\n /** Determines whether picked options should be removed from the options list, `false` by default */\n hidePickedOptions?: boolean;\n\n /** Determines whether the clear button should be displayed in the right section when the component has value, `false` by default */\n clearable?: boolean;\n\n /** Props passed down to the clear button */\n clearButtonProps?: __CloseButtonProps & ElementProps<'button'>;\n\n /** Props passed down to the hidden input */\n hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;\n\n /** Divider used to separate values in the hidden input `value` attribute, `','` by default */\n hiddenInputValuesDivider?: string;\n}\n\nexport type MultiSelectFactory = Factory<{\n props: MultiSelectProps;\n ref: HTMLInputElement;\n stylesNames: MultiSelectStylesNames;\n}>;\n\nconst defaultProps: Partial = {\n maxValues: Infinity,\n withCheckIcon: true,\n checkIconPosition: 'left',\n hiddenInputValuesDivider: ',',\n};\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 onPaste,\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 ...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 {\n styleProps,\n rest: { type, ...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 getStyles = useStyles({\n name: 'MultiSelect',\n classes: {} as any,\n props,\n classNames,\n styles,\n unstyled,\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 setValue(_value.slice(0, _value.length - 1));\n }\n };\n\n const values = _value.map((item, index) => (\n setValue(_value.filter((i) => item !== i))}\n unstyled={unstyled}\n {...getStyles('pill')}\n >\n {optionsLockup[item]?.label || item}\n \n ));\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, _value]);\n\n const clearButton = clearable && _value.length > 0 && !disabled && !readOnly && (\n {\n setValue([]);\n setSearchValue('');\n }}\n />\n );\n\n const filteredData = filterPickedValues({ data: parsedData, value: _value });\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 } else if (_value.length < maxValues!) {\n setValue([..._value, optionsLockup[val].value]);\n }\n }}\n {...comboboxProps}\n >\n \n \n }\n rightSectionPointerEvents={rightSectionPointerEvents || (clearButton ? 'all' : '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 multiline\n withErrorStyles={withErrorStyles}\n __stylesApiProps={{\n ...props,\n rightSectionPointerEvents:\n rightSectionPointerEvents || (clearButton ? '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 >\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