npm - acinguiux-ds-react-framework - Versions diffs - 0.1.18 → 0.1.20 - Mend

acinguiux-ds-react-framework 0.1.18 → 0.1.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1016) hide show

package/build/esm/components/Select/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import {\n type ChangeEventHandler,\n type FocusEvent,\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\n\nimport { SELECT_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport classNames from 'classnames';\nimport { SelectUtils } from 'acinguiux-ds-react-base/components/Select';\n\nimport type { ISelectProps, ValueType } from './Select.types';\nimport { Popover, PopoverTrigger } from '../Popover/Popover';\nimport { ChevronDown } from '../Icon/components';\nimport { useFocusRingOnKeyboard } from '../../hooks/useFocusRingOnKeyboard';\nimport { SelectInput, SelectPopoverContent, SelectTag, SelectedSingleOptionLabel } from './Select.styles';\nimport { SelectListItem, SelectListItemHeader } from '../ListItem/SelectListItem';\nimport { useOptions } from './hooks/useOptions';\nimport { useElementRect } from './hooks/useElementRect';\nimport { strIncludes } from './utils/strUtils';\nimport { updateSelectedValues } from './utils/selection';\nimport { asArray } from './utils/props';\nimport Flexbox from '../Flexbox/Flexbox';\nimport { SelectLoading } from './components/SelectLoading';\n\nconst Select = forwardRef<HTMLInputElement, ISelectProps>(\n (\n {\n id: idProp,\n defaultOpen,\n className,\n size = Sizes.Medium,\n mode = 'single',\n placeholder,\n loading = false,\n invalid = false,\n showSearch = true,\n allowClear,\n placement,\n disabled,\n options: originalOptions,\n onFocus,\n onBlur,\n onClick,\n children,\n optionFilterProp = 'label',\n optionLabelProp = 'label',\n onSearch,\n onSelect,\n onDeselect,\n onClear,\n onChange,\n defaultValue,\n suffix,\n value,\n style,\n // This prop is not used in the new Select implementation, but kept for compatibility.\n // If you need virtualized options, please use the DeprecatedSelect component.\n virtual: _virtual = false,\n ...rest\n }: ISelectProps,\n ref,\n ): ReactElement => {\n const inputRef = useRef<HTMLInputElement>(null);\n const optionsContainerRef = useRef<HTMLDivElement>(null);\n const [isOpen, setIsOpen] = useState(defaultOpen ?? false);\n const id = useId();\n const [handled, setHandled] = useState(false);\n const inputId = idProp ?? `select-${id}-input`;\n const [searchValue, setSearchValue] = useState<string>('');\n const [selectedNodeValues, setSelectedNodeValues] = useState<ValueType[]>(() => asArray(defaultValue ?? value));\n const options = useOptions(children, `select-${id}`, originalOptions);\n const flatOptions = useMemo(\n () => options.flatMap((opt) => (opt.isGroup ? [opt, ...opt.options] : [opt])),\n [options],\n );\n const filteredOptions = useMemo(\n () =>\n searchValue && searchValue.trim().length > 0\n ? flatOptions.filter(\n (opt) =>\n opt?.isGroup \|\|\n strIncludes(opt?.[optionFilterProp as keyof (typeof options)[number]] as string, searchValue),\n )\n : flatOptions,\n [flatOptions, searchValue, optionFilterProp],\n );\n const availableOptionKeys = useMemo(\n () => filteredOptions.filter((opt) => opt && !opt.isGroup && opt.disabled !== true).map((opt) => opt.key),\n [filteredOptions],\n );\n\n const [currentNodeKey, setCurrentNodeKey] = useState<string \| null>(null);\n\n // Set the initial current node key to the first available option\n useEffect(() => {\n setCurrentNodeKey(flatOptions.find((opt) => !opt.isGroup && !opt.disabled)?.key ?? null);\n }, [flatOptions]);\n\n const handleOnChange = useCallback(\n (newNodeValues: ValueType[]) => {\n if (mode === 'single') {\n onChange?.(newNodeValues.length === 1 ? newNodeValues[0] : null);\n return;\n }\n\n onChange?.(newNodeValues);\n },\n [mode, onChange],\n );\n\n const selectNodeValue = useCallback(\n (nodeValue: ValueType) => {\n const {\n current: newSelectedValues,\n added,\n removed,\n } = updateSelectedValues(selectedNodeValues, nodeValue, mode, allowClear);\n\n added.forEach((addedValue) => {\n const addedOption = flatOptions.find((opt) => !opt.isGroup && opt.value === addedValue);\n if (SelectUtils.isOption(addedOption) && onSelect) {\n onSelect(addedOption.value, addedOption);\n }\n });\n removed.forEach((removedValue) => {\n const removedOption = flatOptions.find((opt) => !opt.isGroup && opt.value === removedValue);\n if (SelectUtils.isOption(removedOption) && onDeselect) {\n onDeselect(removedOption.value, removedOption);\n }\n });\n\n setSelectedNodeValues(newSelectedValues);\n handleOnChange(newSelectedValues);\n\n setSearchValue('');\n if (mode === 'single') {\n setIsOpen(false);\n }\n },\n [selectedNodeValues, mode, allowClear, handleOnChange, flatOptions, onSelect, onDeselect],\n );\n\n // define node values based on selected node keys\n // This is used for the input label and for the selected tags in multiple mode.\n const selectedNodeLabels = useMemo(\n () =>\n selectedNodeValues?.map(\n (nodeValue) =>\n (options\n .flatMap((opt) => (opt.isGroup ? opt.options : [opt]))\n .find((opt) => !opt.isGroup && opt.value === nodeValue)?.[\n optionLabelProp as keyof (typeof options)[number]\n ] ?? nodeValue) as string,\n ),\n [options, selectedNodeValues, optionLabelProp],\n );\n\n // Scroll to the current node when it changes; this is useful for keyboard navigation and for options that are not visible\n // in the viewport.\n useEffect(() => {\n if (currentNodeKey) {\n document.getElementById(currentNodeKey)?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n }\n }, [currentNodeKey]);\n\n // Calculate the width of the input wrapper to set the width of the options container (popover content)\n const inputWrapperRect = useElementRect(inputRef.current?.parentElement?.parentElement);\n\n useImperativeHandle(ref, () => inputRef.current!);\n\n const { focusKind, handleOnClick, handleOnFocus, handleOnBlur, handleOnMouseDownCapture } = useFocusRingOnKeyboard({\n inputRef,\n onFocus,\n onBlur,\n onClick,\n });\n\n const onBlurHandler = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (handled) {\n return;\n }\n // If the blur event is triggered by clicking outside the select options, close the dropdown\n // If the related target is not part of the select options, close the dropdown\n // If the related target is part of the select options, keep the dropdown open\n if (\n !event.relatedTarget \|\|\n (!event.currentTarget.contains(event.relatedTarget) &&\n (event.relatedTarget as HTMLElement).id !== `select-${id}-controls` &&\n (event.relatedTarget as HTMLElement).parentElement?.id !== `select-${id}-options-container`)\n ) {\n setSearchValue('');\n handleOnBlur(event);\n setIsOpen(false);\n } else {\n handleOnFocus(event);\n inputRef.current?.focus();\n }\n },\n [handleOnBlur, handleOnFocus, id, handled],\n );\n\n const onkeydownHandler = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (!isOpen && ['Enter', 'ArrowUp', 'ArrowDown', ' '].includes(event.key)) {\n event.preventDefault();\n event.stopPropagation();\n setIsOpen(true);\n return;\n }\n\n if (event.key === 'Escape') {\n event.preventDefault();\n setIsOpen(false);\n return;\n }\n\n inputRef.current?.focus();\n\n if (\n allowClear &&\n (event.key === 'Backspace' \|\| event.key === 'Delete') &&\n (!searchValue \|\| searchValue.trim().length === 0) &&\n selectedNodeValues.length > 0\n ) {\n selectNodeValue(selectedNodeValues[selectedNodeValues.length - 1]);\n }\n\n if (availableOptionKeys.length === 0) {\n return;\n }\n\n if (event.key === 'Enter' \|\| ((!searchValue \|\| searchValue.trim().length === 0) && event.key === ' ')) {\n event.preventDefault();\n const currentNode = flatOptions.find((opt) => !opt.isGroup && opt.key === currentNodeKey);\n selectNodeValue(currentNode && !currentNode?.isGroup ? (currentNode.value ?? null) : null);\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n setCurrentNodeKey((prevKey) => {\n const currentNodeIdx = prevKey ? availableOptionKeys.indexOf(prevKey) : -1;\n if (currentNodeIdx === -1 \|\| currentNodeIdx === availableOptionKeys.length - 1) {\n return availableOptionKeys?.[0] ?? null;\n }\n\n return availableOptionKeys?.[currentNodeIdx + 1] ?? null;\n });\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n setCurrentNodeKey((prevKey) => {\n const currentNodeIdx = prevKey ? availableOptionKeys.indexOf(prevKey) : -1;\n if (currentNodeIdx <= 0) {\n return availableOptionKeys?.[availableOptionKeys.length - 1] ?? null;\n }\n return availableOptionKeys?.[currentNodeIdx - 1] ?? null;\n });\n }\n },\n [\n isOpen,\n allowClear,\n availableOptionKeys,\n searchValue,\n selectedNodeValues,\n selectNodeValue,\n flatOptions,\n currentNodeKey,\n ],\n );\n\n const handleSearchChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n const newValue = event.target.value;\n\n setSearchValue(newValue);\n onSearch?.(newValue);\n },\n [onSearch],\n );\n\n return (\n <Popover open={isOpen} onOpenChange={setIsOpen}>\n <label\n htmlFor={inputId}\n id={`select-${id}-label`}\n tabIndex={-1}\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0px',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0px, 0px, 0px, 0px)',\n whiteSpace: 'nowrap',\n borderWidth: '0px',\n }}\n >\n {selectedNodeValues.join(', ')}\n </label>\n <PopoverTrigger asChild={true}>\n <SelectInput\n inputRef={inputRef}\n data-focused={focusKind}\n $mode={mode}\n className={classNames(SELECT_CLASS, className)}\n style={style}\n size={size}\n allowReadOnlyClear={true}\n readOnly={!showSearch}\n onFocus={handleOnFocus}\n onBlur={onBlurHandler}\n wrapperProps={{\n onMouseDownCapture: (e) => {\n setHandled(true);\n handleOnMouseDownCapture(e);\n },\n onClick: (e) => {\n if (!e.isDefaultPrevented()) {\n inputRef.current?.click();\n }\n setHandled(false);\n handleOnClick(e);\n },\n }}\n onClick={(e) => {\n if (showSearch && !disabled && !e.isDefaultPrevented()) {\n setIsOpen(true);\n e.preventDefault();\n }\n setHandled(false);\n e.stopPropagation();\n }}\n invalid={invalid}\n loading={loading}\n disabled={disabled}\n onKeyDown={onkeydownHandler}\n value={searchValue}\n onChange={handleSearchChange}\n name=\"select-input\"\n type=\"text\"\n customPrefix={\n mode === 'multiple' &&\n selectedNodeValues.map((sNodeValue, index) => (\n <SelectTag\n sentiment=\"information\"\n $disabled={disabled}\n $invalid={invalid}\n size={size}\n closeButton={!disabled && allowClear}\n onCloseClick={() => {\n selectNodeValue(sNodeValue);\n }}\n key={`select-${id}-value-${sNodeValue}`}\n >\n {selectedNodeLabels[index]}\n </SelectTag>\n ))\n }\n customSuffix={\n selectedNodeValues.length > 0 &&\n mode === 'single' &&\n (!searchValue \|\| searchValue.trim().length === 0) && (\n <SelectedSingleOptionLabel disabled={disabled} id={`select-${id}-value`} size={size}>\n {selectedNodeLabels[0]}\n </SelectedSingleOptionLabel>\n )\n }\n suffix={{\n transparent: true,\n node: suffix ? (\n <Flexbox gap=\"2px\">\n {suffix}\n <ChevronDown />\n </Flexbox>\n ) : (\n <ChevronDown />\n ),\n onClick: (e) => {\n const clickEvent = new Event('click', { bubbles: true, cancelable: true });\n if (showSearch && !disabled) {\n setIsOpen((prev) => !prev);\n clickEvent.preventDefault();\n e.preventDefault();\n }\n inputRef.current?.dispatchEvent(clickEvent);\n },\n }}\n placeholder={\n !searchValue && ((selectedNodeValues.length === 0 && mode === 'single') \|\| mode === 'multiple')\n ? placeholder\n : ''\n }\n allowClear={allowClear && ((val) => val !== '' \|\| selectedNodeValues.length > 0)}\n onClear={() => {\n selectNodeValue(null);\n onClear?.();\n }}\n autoComplete=\"off\"\n autoCorrect=\"off\"\n multiple={mode !== 'single'}\n spellCheck=\"false\"\n aria-autocomplete=\"list\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-controls={isOpen ? `select-${id}-controls` : undefined}\n aria-labelledby={`select-${id}-label`}\n id={inputId}\n aria-activedescendant={isOpen ? (currentNodeKey ?? undefined) : undefined}\n {...rest}\n />\n </PopoverTrigger>\n <SelectPopoverContent\n role=\"listbox\"\n align=\"start\"\n side=\"bottom\"\n ref={optionsContainerRef}\n style={{\n width: inputWrapperRect?.width ?? 'auto',\n }}\n size={size === Sizes.XSmall ? Sizes.Small : size}\n sideOffset={4}\n alignOffset={0}\n tabIndex={-1}\n onOpenAutoFocus={(e) => {\n // prevent default focus behavior\n e.preventDefault();\n e.stopPropagation();\n }}\n aria-label=\"Suggestions\"\n id={`select-${id}-controls`}\n padding={false}\n >\n <div id={`select-${id}-options-container`} role=\"presentation\" tabIndex={-1}>\n {!loading &&\n filteredOptions.map((option) => {\n if (option.isGroup && filteredOptions.some((opt) => !opt.isGroup && opt.key.startsWith(option.key))) {\n return (\n <SelectListItemHeader\n size={size === Sizes.XSmall ? Sizes.Small : size}\n key={option.key}\n id={option.key}\n role=\"group\"\n label={option.label}\n />\n );\n } else if (!option.isGroup) {\n return (\n <SelectListItem\n id={option.key}\n size={size === Sizes.XSmall ? Sizes.Small : size}\n key={option.key}\n role=\"option\"\n tabIndex={-1}\n onMouseMove={() => !option.disabled && setCurrentNodeKey(option.key)}\n onClick={() => !option.disabled && selectNodeValue(option.value ?? null)}\n onKeyDown={(event) => onkeydownHandler(event as unknown as React.KeyboardEvent<HTMLInputElement>)}\n selected={selectedNodeValues.includes(option.value ?? null)}\n aria-selected={currentNodeKey === option.key}\n disabled={option.disabled}\n label={option.label}\n />\n );\n }\n return null;\n })}\n </div>\n {!loading && (filteredOptions.length === 0 \|\| filteredOptions.every((opt) => opt.isGroup)) && (\n <SelectListItemHeader\n style={{ textAlign: 'center' }}\n size={size === Sizes.XSmall ? Sizes.Small : size}\n id={`select-${id}-options-not-found`}\n role=\"alert\"\n aria-live=\"polite\"\n aria-atomic={true}\n aria-label=\"No options found\"\n label=\"No options found\"\n />\n )}\n {loading && <SelectLoading id={id} size={size} />}\n </SelectPopoverContent>\n </Popover>\n );\n },\n);\n\nexport default Select;\n"],"names":["Select","forwardRef","idProp","defaultOpen","className","size","Sizes","mode","placeholder","loading","invalid","showSearch","allowClear","placement","disabled","originalOptions","onFocus","onBlur","onClick","children","optionFilterProp","optionLabelProp","onSearch","onSelect","onDeselect","onClear","onChange","defaultValue","suffix","value","style","_virtual","rest","ref","inputRef","useRef","optionsContainerRef","isOpen","setIsOpen","useState","id","useId","handled","setHandled","inputId","searchValue","setSearchValue","selectedNodeValues","setSelectedNodeValues","asArray","options","useOptions","flatOptions","useMemo","opt","filteredOptions","strIncludes","availableOptionKeys","currentNodeKey","setCurrentNodeKey","useEffect","_a","handleOnChange","useCallback","newNodeValues","selectNodeValue","nodeValue","newSelectedValues","added","removed","updateSelectedValues","addedValue","addedOption","SelectUtils.isOption","removedValue","removedOption","selectedNodeLabels","inputWrapperRect","useElementRect","_b","useImperativeHandle","focusKind","handleOnClick","handleOnFocus","handleOnBlur","handleOnMouseDownCapture","useFocusRingOnKeyboard","onBlurHandler","event","onkeydownHandler","currentNode","prevKey","currentNodeIdx","handleSearchChange","newValue","jsxs","Popover","jsx","PopoverTrigger","SelectInput","classNames","SELECT_CLASS","sNodeValue","index","SelectTag","SelectedSingleOptionLabel","Flexbox","ChevronDown","clickEvent","prev","val","SelectPopoverContent","option","SelectListItemHeader","SelectListItem","SelectLoading"],"mappings":"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"}
1	+ {"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import {\n type ChangeEventHandler,\n type FocusEvent,\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\n\nimport { SELECT_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport classNames from 'classnames';\nimport { SelectUtils } from 'acinguiux-ds-react-base/components/Select';\n\nimport type { ISelectProps, ValueType } from './Select.types';\nimport { Popover, PopoverTrigger } from '../Popover/Popover';\nimport { ChevronDown } from '../Icon/components';\nimport { useFocusRingOnKeyboard } from '../../hooks/useFocusRingOnKeyboard';\nimport { SelectInput, SelectPopoverContent, SelectTag, SelectedSingleOptionLabel } from './Select.styles';\nimport ListItem from '../ListItem/ListItem';\nimport { useOptions } from './hooks/useOptions';\nimport { useElementRect } from './hooks/useElementRect';\nimport { strIncludes } from './utils/strUtils';\nimport { updateSelectedValues } from './utils/selection';\nimport { asArray } from './utils/props';\nimport Flexbox from '../Flexbox/Flexbox';\nimport { SelectLoading } from './components/SelectLoading';\nimport { onKeyDownHandle } from './utils/keydown';\nimport ListItemHeader from '../ListItem/ListItemHeader';\n\nconst Select = forwardRef<HTMLInputElement, ISelectProps>(\n (\n {\n id: idProp,\n defaultOpen,\n className,\n size = Sizes.Medium,\n mode = 'single',\n placeholder,\n loading = false,\n invalid = false,\n showSearch = true,\n allowClear,\n placement,\n disabled,\n options: originalOptions,\n onFocus,\n onBlur,\n onClick,\n children,\n optionFilterProp = 'label',\n optionLabelProp = 'label',\n optionSelectionType,\n optionShowInputControls,\n optionMutliline = false,\n onKeyDown,\n onSearch,\n onSelect,\n onDeselect,\n onClear,\n onChange,\n defaultValue,\n suffix,\n value,\n style,\n // This prop is not used in the new Select implementation, but kept for compatibility.\n // If you need virtualized options, please use the DeprecatedSelect component.\n virtual: _virtual = false,\n ...rest\n }: ISelectProps,\n ref,\n ): ReactElement => {\n const inputRef = useRef<HTMLInputElement>(null);\n const optionsContainerRef = useRef<HTMLDivElement>(null);\n const [isOpen, setIsOpen] = useState(defaultOpen ?? false);\n const id = useId();\n const [handled, setHandled] = useState(false);\n const inputId = idProp ?? `select-${id}-input`;\n const [searchValue, setSearchValue] = useState<string>('');\n const [selectedNodeValues, setSelectedNodeValues] = useState<ValueType[]>(() => asArray(defaultValue ?? value));\n const options = useOptions(children, `select-${id}`, originalOptions);\n const flatOptions = useMemo(\n () => options.flatMap((opt) => (opt.isGroup ? [opt, ...opt.options] : [opt])),\n [options],\n );\n const filteredOptions = useMemo(\n () =>\n searchValue && searchValue.trim().length > 0\n ? flatOptions.filter(\n (opt) =>\n opt?.isGroup \|\|\n strIncludes(opt?.[optionFilterProp as keyof (typeof options)[number]] as string, searchValue),\n )\n : flatOptions,\n [flatOptions, searchValue, optionFilterProp],\n );\n const availableOptionKeys = useMemo(\n () => filteredOptions.filter((opt) => opt && !opt.isGroup && opt.disabled !== true).map((opt) => opt.key),\n [filteredOptions],\n );\n\n const [currentNodeKey, setCurrentNodeKey] = useState<string \| null>(null);\n\n // Set the initial current node key to the first available option\n useEffect(() => {\n setCurrentNodeKey(flatOptions.find((opt) => !opt.isGroup && !opt.disabled)?.key ?? null);\n }, [flatOptions]);\n\n const handleOnChange = useCallback(\n (newNodeValues: ValueType[]) => {\n if (mode === 'single') {\n onChange?.(newNodeValues.length === 1 ? newNodeValues[0] : null);\n return;\n }\n\n onChange?.(newNodeValues);\n },\n [mode, onChange],\n );\n\n useEffect(() => {\n if (mode === 'single') {\n setSelectedNodeValues(value ? [value] : []);\n } else if (Array.isArray(value)) {\n setSelectedNodeValues(value);\n }\n }, [value, mode]);\n\n const selectNodeValue = useCallback(\n (nodeValue: ValueType) => {\n const {\n current: newSelectedValues,\n added,\n removed,\n } = updateSelectedValues(selectedNodeValues, nodeValue, mode, allowClear);\n\n added.forEach((addedValue) => {\n const addedOption = flatOptions.find((opt) => !opt.isGroup && opt.value === addedValue);\n if (SelectUtils.isOption(addedOption) && onSelect) {\n onSelect(addedOption.value, addedOption);\n }\n });\n removed.forEach((removedValue) => {\n const removedOption = flatOptions.find((opt) => !opt.isGroup && opt.value === removedValue);\n if (SelectUtils.isOption(removedOption) && onDeselect) {\n onDeselect(removedOption.value, removedOption);\n }\n });\n\n setSelectedNodeValues(newSelectedValues);\n handleOnChange(newSelectedValues);\n\n setSearchValue('');\n if (mode === 'single') {\n setIsOpen(false);\n }\n },\n [selectedNodeValues, mode, allowClear, handleOnChange, flatOptions, onSelect, onDeselect],\n );\n\n // define node values based on selected node keys\n // This is used for the input label and for the selected tags in multiple mode.\n const selectedNodeLabels = useMemo(\n () =>\n selectedNodeValues?.map(\n (nodeValue) =>\n (options\n .flatMap((opt) => (opt.isGroup ? opt.options : [opt]))\n .find((opt) => !opt.isGroup && opt.value === nodeValue)?.[\n optionLabelProp as keyof (typeof options)[number]\n ] ?? nodeValue) as string,\n ),\n [options, selectedNodeValues, optionLabelProp],\n );\n\n // Scroll to the current node when it changes; this is useful for keyboard navigation and for options that are not visible\n // in the viewport.\n useEffect(() => {\n if (currentNodeKey) {\n document.getElementById(currentNodeKey)?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n }\n }, [currentNodeKey]);\n\n // Calculate the width of the input wrapper to set the width of the options container (popover content)\n const inputWrapperRect = useElementRect(inputRef.current?.parentElement?.parentElement);\n\n useImperativeHandle(ref, () => inputRef.current!);\n\n const { focusKind, handleOnClick, handleOnFocus, handleOnBlur, handleOnMouseDownCapture } = useFocusRingOnKeyboard({\n inputRef,\n onFocus,\n onBlur,\n onClick,\n });\n\n const onBlurHandler = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (handled) {\n return;\n }\n // If the blur event is triggered by clicking outside the select options, close the dropdown\n // If the related target is not part of the select options, close the dropdown\n // If the related target is part of the select options, keep the dropdown open\n if (\n !event.relatedTarget \|\|\n (!event.currentTarget.contains(event.relatedTarget) &&\n (event.relatedTarget as HTMLElement).id !== `select-${id}-controls` &&\n (event.relatedTarget as HTMLElement).parentElement?.id !== `select-${id}-options-container`)\n ) {\n setSearchValue('');\n handleOnBlur(event);\n setIsOpen(false);\n } else {\n handleOnFocus(event);\n inputRef.current?.focus();\n }\n },\n [handleOnBlur, handleOnFocus, id, handled],\n );\n\n const onkeydownHandler = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDownHandle(event, {\n isOpen,\n setIsOpen,\n input: inputRef.current,\n allowClear: Boolean(allowClear),\n availableOptionKeys,\n searchValue,\n selectedNodeValues,\n selectNodeValue,\n flatOptions,\n currentNodeKey,\n setCurrentNodeKey,\n });\n onKeyDown?.(event);\n },\n [\n onKeyDown,\n isOpen,\n allowClear,\n availableOptionKeys,\n searchValue,\n selectedNodeValues,\n selectNodeValue,\n flatOptions,\n currentNodeKey,\n ],\n );\n\n const handleSearchChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n const newValue = event.target.value;\n\n setSearchValue(newValue);\n onSearch?.(newValue);\n },\n [onSearch],\n );\n\n return (\n <Popover open={isOpen} onOpenChange={setIsOpen}>\n <label\n htmlFor={inputId}\n id={`select-${id}-label`}\n tabIndex={-1}\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0px',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0px, 0px, 0px, 0px)',\n whiteSpace: 'nowrap',\n borderWidth: '0px',\n }}\n >\n {selectedNodeValues.join(', ')}\n </label>\n <PopoverTrigger asChild={true}>\n <SelectInput\n inputRef={inputRef}\n data-focused={focusKind}\n $mode={mode}\n className={classNames(SELECT_CLASS, className)}\n style={style}\n size={size}\n allowReadOnlyClear={true}\n readOnly={!showSearch}\n onFocus={handleOnFocus}\n onBlur={onBlurHandler}\n wrapperProps={{\n onMouseDownCapture: (e) => {\n setHandled(true);\n handleOnMouseDownCapture(e);\n },\n onClick: (e) => {\n if (!e.isDefaultPrevented()) {\n inputRef.current?.click();\n }\n setHandled(false);\n handleOnClick(e);\n },\n }}\n onClick={(e) => {\n if (showSearch && !disabled && !e.isDefaultPrevented()) {\n setIsOpen(true);\n e.preventDefault();\n }\n setHandled(false);\n e.stopPropagation();\n }}\n invalid={invalid}\n loading={loading}\n disabled={disabled}\n onKeyDown={onkeydownHandler}\n value={searchValue}\n onChange={handleSearchChange}\n name=\"select-input\"\n type=\"text\"\n customPrefix={\n mode === 'multiple' &&\n selectedNodeValues.map((sNodeValue, index) => (\n <SelectTag\n sentiment=\"information\"\n $disabled={disabled}\n $invalid={invalid}\n size={size}\n closeButton={!disabled && allowClear}\n onCloseClick={() => {\n selectNodeValue(sNodeValue);\n }}\n key={`select-${id}-value-${sNodeValue}`}\n >\n {selectedNodeLabels[index]}\n </SelectTag>\n ))\n }\n customSuffix={\n selectedNodeValues.length > 0 &&\n mode === 'single' &&\n (!searchValue \|\| searchValue.trim().length === 0) && (\n <SelectedSingleOptionLabel disabled={disabled} id={`select-${id}-value`} size={size}>\n {selectedNodeLabels[0]}\n </SelectedSingleOptionLabel>\n )\n }\n suffix={{\n transparent: true,\n node: suffix ? (\n <Flexbox gap=\"2px\">\n {suffix}\n <ChevronDown />\n </Flexbox>\n ) : (\n <ChevronDown />\n ),\n onClick: (e) => {\n const clickEvent = new Event('click', { bubbles: true, cancelable: true });\n if (showSearch && !disabled) {\n setIsOpen((prev) => !prev);\n clickEvent.preventDefault();\n e.preventDefault();\n }\n inputRef.current?.dispatchEvent(clickEvent);\n },\n }}\n placeholder={\n !searchValue && ((selectedNodeValues.length === 0 && mode === 'single') \|\| mode === 'multiple')\n ? placeholder\n : ''\n }\n allowClear={allowClear && ((val) => val !== '' \|\| selectedNodeValues.length > 0)}\n onClear={() => {\n selectNodeValue(null);\n onClear?.();\n }}\n autoComplete=\"off\"\n autoCorrect=\"off\"\n multiple={mode !== 'single'}\n spellCheck=\"false\"\n aria-autocomplete=\"list\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-controls={isOpen ? `select-${id}-controls` : undefined}\n aria-labelledby={`select-${id}-label`}\n id={inputId}\n aria-activedescendant={isOpen ? (currentNodeKey ?? undefined) : undefined}\n {...rest}\n />\n </PopoverTrigger>\n <SelectPopoverContent\n role=\"listbox\"\n align=\"start\"\n side=\"bottom\"\n ref={optionsContainerRef}\n style={{\n width: inputWrapperRect?.width ?? 'auto',\n }}\n size={size === Sizes.XSmall ? Sizes.Small : size}\n sideOffset={4}\n alignOffset={0}\n tabIndex={-1}\n onOpenAutoFocus={(e) => {\n // prevent default focus behavior\n e.preventDefault();\n e.stopPropagation();\n }}\n aria-label=\"Suggestions\"\n id={`select-${id}-controls`}\n padding={false}\n >\n <div id={`select-${id}-options-container`} role=\"presentation\" tabIndex={-1}>\n {!loading &&\n filteredOptions.map((option, i) => {\n if (option.isGroup && filteredOptions.some((opt) => !opt.isGroup && opt.key.startsWith(option.key))) {\n return (\n <ListItemHeader\n size={size === Sizes.XSmall ? Sizes.Small : size}\n key={option.key}\n id={option.key}\n role=\"group\"\n label={option.label}\n divider={i !== 0}\n />\n );\n } else if (!option.isGroup) {\n return (\n <ListItem\n id={option.key}\n size={size === Sizes.XSmall ? Sizes.Small : size}\n key={option.key}\n role=\"option\"\n tabIndex={-1}\n onMouseMove={() => !option.disabled && setCurrentNodeKey(option.key)}\n onClick={() => !option.disabled && selectNodeValue(option.value ?? null)}\n onKeyDown={(event) => onkeydownHandler(event as unknown as React.KeyboardEvent<HTMLInputElement>)}\n selected={selectedNodeValues.includes(option.value ?? null)}\n aria-selected={currentNodeKey === option.key}\n disabled={option.disabled}\n multiline={optionMutliline}\n label={option.label}\n optionItem={true}\n selectionType={optionSelectionType ?? (!mode \|\| mode === 'single' ? 'radio' : 'checkbox')}\n showInputControls={optionShowInputControls}\n />\n );\n }\n return null;\n })}\n </div>\n {!loading && (filteredOptions.length === 0 \|\| filteredOptions.every((opt) => opt.isGroup)) && (\n <ListItemHeader\n style={{ textAlign: 'center' }}\n size={size === Sizes.XSmall ? Sizes.Small : size}\n id={`select-${id}-options-not-found`}\n role=\"alert\"\n aria-live=\"polite\"\n aria-atomic={true}\n aria-label=\"No options found\"\n label=\"No options found\"\n divider={false}\n />\n )}\n {loading && <SelectLoading id={id} size={size} />}\n </SelectPopoverContent>\n </Popover>\n );\n },\n);\n\nexport default Select;\n"],"names":["Select","forwardRef","idProp","defaultOpen","className","size","Sizes","mode","placeholder","loading","invalid","showSearch","allowClear","placement","disabled","originalOptions","onFocus","onBlur","onClick","children","optionFilterProp","optionLabelProp","optionSelectionType","optionShowInputControls","optionMutliline","onKeyDown","onSearch","onSelect","onDeselect","onClear","onChange","defaultValue","suffix","value","style","_virtual","rest","ref","inputRef","useRef","optionsContainerRef","isOpen","setIsOpen","useState","id","useId","handled","setHandled","inputId","searchValue","setSearchValue","selectedNodeValues","setSelectedNodeValues","asArray","options","useOptions","flatOptions","useMemo","opt","filteredOptions","strIncludes","availableOptionKeys","currentNodeKey","setCurrentNodeKey","useEffect","handleOnChange","useCallback","newNodeValues","selectNodeValue","nodeValue","newSelectedValues","added","removed","updateSelectedValues","addedValue","addedOption","SelectUtils.isOption","removedValue","removedOption","selectedNodeLabels","inputWrapperRect","useElementRect","useImperativeHandle","focusKind","handleOnClick","handleOnFocus","handleOnBlur","handleOnMouseDownCapture","useFocusRingOnKeyboard","onBlurHandler","event","onkeydownHandler","onKeyDownHandle","handleSearchChange","newValue","jsxs","Popover","jsx","PopoverTrigger","SelectInput","classNames","SELECT_CLASS","sNodeValue","index","SelectTag","SelectedSingleOptionLabel","Flexbox","ChevronDown","clickEvent","prev","val","SelectPopoverContent","option","i","ListItemHeader","ListItem","SelectLoading"],"mappings":"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"}

package/build/esm/components/Select/Select.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQ3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAMnE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C,eAAO,MAAM,SAAS;;;;;;gBAA6B,OAAO;eAAa,OAAO;;;;kGA8C7E,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;;+OAErC,CAAC;AAEF,eAAO,MAAM,WAAW;YAA0D,YAAY,CAAC,MAAM,CAAC;~~2FAyFrG~~,CAAC;AAQF,eAAO,MAAM,oBAAoB;;6WAiBhC,CAAC"}
1	+ {"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQ3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAMnE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C,eAAO,MAAM,SAAS;;;;;;gBAA6B,OAAO;eAAa,OAAO;;;;kGA8C7E,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;;+OAErC,CAAC;AAEF,eAAO,MAAM,WAAW;YAA0D,YAAY,CAAC,MAAM,CAAC;2FAsFrG,CAAC;AAQF,eAAO,MAAM,oBAAoB;;6WAiBhC,CAAC"}

package/build/esm/components/Select/Select.styles.js CHANGED Viewed

@@ -1,26 +1,26 @@
 import { styled as p, css as r } from "styled-components";
-import { Variables as n } from "../../react-base/src/theme/types/layer.js";
+import { Variables as o } from "../../react-base/src/theme/types/layer.js";
 import { consts as i } from "../../react-base/src/components/Input/Input.consts.js";
-import { newConsts as o } from "../../react-base/src/components/Select/Select.consts.js";
+import { newConsts as n } from "../../react-base/src/components/Select/Select.consts.js";
 import { PopoverContent as u } from "../Popover/Popover.js";
 import { LoadingContainer as x } from "../Loading/Loading.styles.js";
 import { ClearButton as f } from "../TextInput/TextInput.styles.js";
 import h from "../TextInput/TextInput.js";
 import $ from "../Tag/Tag.js";
-import { TagLabelContainer as d, TagButton as m } from "../Tag/Tag.styles.js";
-import { Flexbox as s } from "../Flexbox/Flexbox.styles.js";
+import { TagLabelContainer as l, TagButton as m } from "../Tag/Tag.styles.js";
+import { Flexbox as g } from "../Flexbox/Flexbox.styles.js";
 import w from "../Text/components/Label/Label.js";
-import { Label as g } from "../Text/components/Label/Label.styles.js";
-const c = p($)`
-  ${({ theme: t, $invalid: e, $disabled: a, size: l }) => r`
+import { Label as c } from "../Text/components/Label/Label.styles.js";
+const s = p($)`
+  ${({ theme: t, $invalid: e, $disabled: a, size: d }) => r`
     &,
     & ${m} {
-      background-color: ${t.layer({ disabled: a, sentiment: e ? "negative" : "information" })[e ? n.BackgroundSentiment : n.BackgroundSelected]};
+      background-color: ${t.layer({ disabled: a, sentiment: e ? "negative" : "information" })[e ? o.BackgroundSentiment : o.BackgroundSelected]};
     }
     ${a && r`
-      & ${d} > ${g} {
-        color: ${t.layer({ disabled: a, sentiment: e ? "negative" : "information" })[n.TextOnFoundationStrong]};
+      & ${l} > ${c} {
+        color: ${t.layer({ disabled: a, sentiment: e ? "negative" : "information" })[o.TextOnFoundationStrong]};
       }
     `};
@@ -28,23 +28,23 @@ const c = p($)`
       &:has(${m}:hover) {
         &,
         & ${m} {
-          background-color: ${t.layer({ sentiment: e ? "negative" : "information", state: "hover" })[e ? n.BackgroundSentiment : n.BackgroundSelected]};
+          background-color: ${t.layer({ sentiment: e ? "negative" : "information", state: "hover" })[e ? o.BackgroundSentiment : o.BackgroundSelected]};
         }
       }
       &:has(${m}:active) {
         &,
         & ${m} {
-          background-color: ${t.layer({ sentiment: e ? "negative" : "information", state: "press" })[e ? n.BackgroundSentiment : n.BackgroundSelected]};
+          background-color: ${t.layer({ sentiment: e ? "negative" : "information", state: "press" })[e ? o.BackgroundSentiment : o.BackgroundSelected]};
         }
       }
     `};
-    padding-inline: ${o[l ?? "medium"].tags.padding}px;
-    gap: ${o[l ?? "medium"].tags.gap}px;
+    padding-inline: ${n[d ?? "medium"].tags.padding}px;
+    gap: ${n[d ?? "medium"].tags.gap}px;
-    & ${d} {
+    & ${l} {
       padding-inline: 0;
-      gap: ${o[l ?? "medium"].tags.textGap}px;
+      gap: ${n[d ?? "medium"].tags.textGap}px;
     }
   `};
 `, b = p(w)`
@@ -52,6 +52,8 @@ const c = p($)`
 `, R = p(h)(
   ({ $mode: t, size: e, readOnly: a }) => r`
     align-items: flex-start;
+    max-width: 100%;
+    overflow: hidden;
     ${a && r`
       &,
@@ -72,7 +74,7 @@ const c = p($)`
       --select-clear-btn-size: ${i[e ?? "medium"].iconSize + i[e ?? "medium"].padding.inline * 2 + i[e ?? "medium"].containerGap}px;
     }
-    ${s}:has(input) {
+    ${g}:has(input) {
       position: relative;
     }
@@ -89,10 +91,10 @@ const c = p($)`
     }
     ${t === "multiple" && r`
-      ${s}:has(input) {
-        gap: ${o[e ?? "medium"].gap}px;
-        &:has(${c}) {
-          padding: ${o[e ?? "medium"].prefixPadding}px;
+      ${g}:has(input) {
+        gap: ${n[e ?? "medium"].gap}px;
+        &:has(${s}) {
+          padding: ${n[e ?? "medium"].prefixPadding}px;
           input {
             padding: 0;
@@ -105,28 +107,23 @@ const c = p($)`
       }
     `}
-    ${g} {
+    ${c} {
       text-overflow: ellipsis;
     }
-    ${c} {
-      height: ${o[e ?? "medium"].tags.height}px;
-      border-radius: ${o[e ?? "medium"].tags.borderRadius}px;
+    ${s} {
+      height: ${n[e ?? "medium"].tags.height}px;
+      border-radius: ${n[e ?? "medium"].tags.borderRadius}px;
       overflow: hidden;
       position: relative;
       max-width: 100%;
-      ${d} {
+      ${l} {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
         min-width: 0;
         max-width: 100%;
         display: block;
-        ${g} {
-          display: flex;
-          align-items: center;
-        }
       }
     }
   `
@@ -155,7 +152,7 @@ const c = p($)`
 export {
   R as SelectInput,
   V as SelectPopoverContent,
-  c as SelectTag,
+  s as SelectTag,
   b as SelectedSingleOptionLabel
 };
 //# sourceMappingURL=Select.styles.js.map

package/build/esm/components/Select/Select.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.styles.js","sources":["../../../../src/components/Select/Select.styles.ts"],"sourcesContent":["import { FC } from 'react';\n\nimport { css, styled } from 'styled-components';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { InputConsts } from 'acinguiux-ds-react-base/components/Input';\nimport { SelectConsts } from 'acinguiux-ds-react-base/components/Select';\n\nimport { PopoverContent } from '../Popover/Popover';\nimport { ITextInputPropsImpl } from '../TextInput/TextInput.types';\nimport { LoadingContainer } from '../Loading/Loading.styles';\nimport { ClearButton } from '../TextInput/TextInput.styles';\nimport TextInput from '../TextInput/TextInput';\nimport Tag from '../Tag/Tag';\nimport { TagButton, TagLabelContainer } from '../Tag/Tag.styles';\nimport { ISelectProps } from './Select.types';\nimport { Flexbox } from '../Flexbox/Flexbox.styles';\nimport Label from '../Text/components/Label/Label';\nimport { Label as LabelStyles } from '../Text/components/Label/Label.styles';\n\nexport const SelectTag = styled(Tag)<{ $disabled?: boolean; $invalid?: boolean }>`\n ${({ theme, $invalid, $disabled, size }) => css`\n &,\n & ${TagButton} {\n background-color: ${theme.layer({ disabled: $disabled, sentiment: $invalid ? 'negative' : 'information' })[\n $invalid ? Variables.BackgroundSentiment : Variables.BackgroundSelected\n ]};\n }\n\n ${$disabled &&\n css`\n & ${TagLabelContainer} > ${LabelStyles} {\n color: ${theme.layer({ disabled: $disabled, sentiment: $invalid ? 'negative' : 'information' })[\n Variables.TextOnFoundationStrong\n ]};\n }\n `};\n\n ${!$disabled &&\n css`\n &:has(${TagButton}:hover) {\n &,\n & ${TagButton} {\n background-color: ${theme.layer({ sentiment: $invalid ? 'negative' : 'information', state: 'hover' })[\n $invalid ? Variables.BackgroundSentiment : Variables.BackgroundSelected\n ]};\n }\n }\n &:has(${TagButton}:active) {\n &,\n & ${TagButton} {\n background-color: ${theme.layer({ sentiment: $invalid ? 'negative' : 'information', state: 'press' })[\n $invalid ? Variables.BackgroundSentiment : Variables.BackgroundSelected\n ]};\n }\n }\n `};\n\n padding-inline: ${SelectConsts.newConsts[size ?? 'medium'].tags.padding}px;\n gap: ${SelectConsts.newConsts[size ?? 'medium'].tags.gap}px;\n\n & ${TagLabelContainer} {\n padding-inline: 0;\n gap: ${SelectConsts.newConsts[size ?? 'medium'].tags.textGap}px;\n }\n `};\n`;\n\nexport const SelectedSingleOptionLabel = styled(Label)`\n position: absolute;\n`;\n\nexport const SelectInput = styled(TextInput as FC<ITextInputPropsImpl>)<{ $mode?: ISelectProps['mode'] }>(\n ({ $mode, size, readOnly }) => css`\n align-items: flex-start;\n\n ${readOnly &&\n css`\n &,\n & input {\n cursor: default;\n }\n `};\n\n &:has([data-affix='suffix']) {\n --select-arrow-size: ${InputConsts.consts[size ?? 'medium'].iconSize +\n InputConsts.consts[size ?? 'medium'].padding.inline +\n InputConsts.consts[size ?? 'medium'].containerGap}px;\n }\n\n &:has(${LoadingContainer}) {\n --select-loading-size: ${InputConsts.consts[size ?? 'medium'].iconSize +\n InputConsts.consts[size ?? 'medium'].padding.inline * 2 +\n InputConsts.consts[size ?? 'medium'].containerGap}px;\n }\n\n &:has(${ClearButton}) {\n --select-clear-btn-size: ${InputConsts.consts[size ?? 'medium'].iconSize +\n InputConsts.consts[size ?? 'medium'].padding.inline * 2 +\n InputConsts.consts[size ?? 'medium'].containerGap}px;\n }\n\n ${Flexbox}:has(input) {\n position: relative;\n }\n\n ${SelectedSingleOptionLabel} {\n --single-option-label-padding: ${InputConsts.consts[size ?? 'medium'].padding.inline}px;\n left: var(--single-option-label-padding);\n white-space: nowrap;\n min-width: 0;\n width: 100%;\n max-width: calc(100% - var(--single-option-label-padding));\n overflow: hidden;\n display: block;\n text-overflow: ellipsis;\n }\n\n ${$mode === 'multiple' &&\n css`\n ${Flexbox}:has(input) {\n gap: ${SelectConsts.newConsts[size ?? 'medium'].gap}px;\n &:has(${SelectTag}) {\n padding: ${SelectConsts.newConsts[size ?? 'medium'].prefixPadding}px;\n\n input {\n padding: 0;\n }\n }\n }\n\n input {\n width: auto;\n }\n `}\n\n ${LabelStyles} {\n text-overflow: ellipsis;\n }\n\n ${SelectTag} {\n height: ${SelectConsts.newConsts[size ?? 'medium'].tags.height}px;\n border-radius: ${SelectConsts.newConsts[size ?? 'medium'].tags.borderRadius}px;\n overflow: hidden;\n position: relative;\n max-width: 100%;\n ${TagLabelContainer} {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n min-width: 0;\n max-width: 100%;\n display: block;\n~~\n ${LabelStyles} {\n display: flex;\n align-items: center;\n }\n~~ }\n }\n `,\n);\n\nconst listItemSize = {\n small: 32,\n medium: 40,\n large: 48,\n};\n\nexport const SelectPopoverContent = styled(PopoverContent)`\n max-height: min(300px, calc(var(--radix-popper-available-height) - 10px));\n overflow-y: auto;\n\n & > :first-child:has() {\n margin-inline: 4px;\n }\n\n & > :has() {\n min-height: calc(${({ size }) => listItemSize[size ?? 'medium']}px);\n margin: 4px 0;\n gap: 4px;\n display: flex;\n align-items: stretch;\n justify-content: start;\n flex-direction: column;\n }\n`;\n"],"names":["SelectTag","styled","Tag","theme","$invalid","$disabled","size","css","TagButton","Variables","TagLabelContainer","LabelStyles","SelectConsts.newConsts","SelectedSingleOptionLabel","Label","SelectInput","TextInput","$mode","readOnly","InputConsts.consts","LoadingContainer","ClearButton","Flexbox","listItemSize","SelectPopoverContent","PopoverContent"],"mappings":";;;;;;;;;;;;;AAmBO,MAAMA,IAAYC,EAAOC,CAAG;AAAA,IAC/B,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,WAAAC,GAAW,MAAAC,QAAWC;AAAA;AAAA,QAEtCC,CAAS;AAAA,0BACSL,EAAM,MAAM,EAAE,UAAUE,GAAW,WAAWD,IAAW,aAAa,cAAA,CAAe,EACvGA,IAAWK,EAAU,sBAAsBA,EAAU,kBACvD,CAAC;AAAA;AAAA;AAAA,MAGDJ,KACFE;AAAA,UACMG,CAAiB,MAAMC,CAAW;AAAA,iBAC3BR,EAAM,MAAM,EAAE,UAAUE,GAAW,WAAWD,IAAW,aAAa,cAAA,CAAe,EAC5FK,EAAU,sBACZ,CAAC;AAAA;AAAA,KAEJ;AAAA;AAAA,MAEC,CAACJ,KACHE;AAAA,cACUC,CAAS;AAAA;AAAA,YAEXA,CAAS;AAAA,8BACSL,EAAM,MAAM,EAAE,WAAWC,IAAW,aAAa,eAAe,OAAO,QAAA,CAAS,EAClGA,IAAWK,EAAU,sBAAsBA,EAAU,kBACvD,CAAC;AAAA;AAAA;AAAA,cAGGD,CAAS;AAAA;AAAA,YAEXA,CAAS;AAAA,8BACSL,EAAM,MAAM,EAAE,WAAWC,IAAW,aAAa,eAAe,OAAO,QAAA,CAAS,EAClGA,IAAWK,EAAU,sBAAsBA,EAAU,kBACvD,CAAC;AAAA;AAAA;AAAA,KAGN;AAAA;AAAA,sBAEiBG,EAAuBN,KAAQ,QAAQ,EAAE,KAAK,OAAO;AAAA,WAChEM,EAAuBN,KAAQ,QAAQ,EAAE,KAAK,GAAG;AAAA;AAAA,QAEpDI,CAAiB;AAAA;AAAA,aAEZE,EAAuBN,KAAQ,QAAQ,EAAE,KAAK,OAAO;AAAA;AAAA,GAE/D;AAAA,GAGUO,IAA4BZ,EAAOa,CAAK;AAAA;AAAA,GAIxCC,IAAcd,EAAOe,CAAoC;AAAA,EACpE,CAAC,EAAE,OAAAC,GAAO,MAAAX,GAAM,UAAAY,QAAeX;AAAA;AAAA;AAAA,~~MAG3BW~~,KACFX;AAAA;AAAA;AAAA;AAAA;AAAA,KAKC;AAAA;AAAA;AAAA,6BAGwBY,EAAmBb,KAAQ,QAAQ,EAAE,WAC5Da,EAAmBb,KAAQ,QAAQ,EAAE,QAAQ,SAC7Ca,EAAmBb,KAAQ,QAAQ,EAAE,YAAY;AAAA;AAAA;AAAA,YAG3Cc,CAAgB;AAAA,+BACGD,EAAmBb,KAAQ,QAAQ,EAAE,WAC9Da,EAAmBb,KAAQ,QAAQ,EAAE,QAAQ,SAAS,IACtDa,EAAmBb,KAAQ,QAAQ,EAAE,YAAY;AAAA;AAAA;AAAA,YAG3Ce,CAAW;AAAA,iCACUF,EAAmBb,KAAQ,QAAQ,EAAE,WAChEa,EAAmBb,KAAQ,QAAQ,EAAE,QAAQ,SAAS,IACtDa,EAAmBb,KAAQ,QAAQ,EAAE,YAAY;AAAA;AAAA;AAAA,MAGjDgB,CAAO;AAAA;AAAA;AAAA;AAAA,MAIPT,CAAyB;AAAA,uCACQM,EAAmBb,KAAQ,QAAQ,EAAE,QAAQ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWpFW,MAAU,cACZV;AAAA,QACIe,CAAO;AAAA,eACAV,EAAuBN,KAAQ,QAAQ,EAAE,GAAG;AAAA,gBAC3CN,CAAS;AAAA,qBACJY,EAAuBN,KAAQ,QAAQ,EAAE,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAWtE;AAAA;AAAA,MAECK,CAAW;AAAA;AAAA;AAAA;AAAA,MAIXX,CAAS;AAAA,gBACCY,EAAuBN,KAAQ,QAAQ,EAAE,KAAK,MAAM;AAAA,uBAC7CM,EAAuBN,KAAQ,QAAQ,EAAE,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,QAIzEI,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA~~,UAQfC,CAAW~~;AAAA;~~AAAA;AAAA;AAAA;AAAA;AAAA;AAOrB~~,~~GAEMY~~,IAAe;AAAA,EACnB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAEaC,IAAuBvB,EAAOwB,CAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBASlC,CAAC,EAAE,MAAAnB,EAAA,MAAWiB,EAAajB,KAAQ,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"Select.styles.js","sources":["../../../../src/components/Select/Select.styles.ts"],"sourcesContent":["import { FC } from 'react';\n\nimport { css, styled } from 'styled-components';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { InputConsts } from 'acinguiux-ds-react-base/components/Input';\nimport { SelectConsts } from 'acinguiux-ds-react-base/components/Select';\n\nimport { PopoverContent } from '../Popover/Popover';\nimport { ITextInputPropsImpl } from '../TextInput/TextInput.types';\nimport { LoadingContainer } from '../Loading/Loading.styles';\nimport { ClearButton } from '../TextInput/TextInput.styles';\nimport TextInput from '../TextInput/TextInput';\nimport Tag from '../Tag/Tag';\nimport { TagButton, TagLabelContainer } from '../Tag/Tag.styles';\nimport { ISelectProps } from './Select.types';\nimport { Flexbox } from '../Flexbox/Flexbox.styles';\nimport Label from '../Text/components/Label/Label';\nimport { Label as LabelStyles } from '../Text/components/Label/Label.styles';\n\nexport const SelectTag = styled(Tag)<{ $disabled?: boolean; $invalid?: boolean }>`\n ${({ theme, $invalid, $disabled, size }) => css`\n &,\n & ${TagButton} {\n background-color: ${theme.layer({ disabled: $disabled, sentiment: $invalid ? 'negative' : 'information' })[\n $invalid ? Variables.BackgroundSentiment : Variables.BackgroundSelected\n ]};\n }\n\n ${$disabled &&\n css`\n & ${TagLabelContainer} > ${LabelStyles} {\n color: ${theme.layer({ disabled: $disabled, sentiment: $invalid ? 'negative' : 'information' })[\n Variables.TextOnFoundationStrong\n ]};\n }\n `};\n\n ${!$disabled &&\n css`\n &:has(${TagButton}:hover) {\n &,\n & ${TagButton} {\n background-color: ${theme.layer({ sentiment: $invalid ? 'negative' : 'information', state: 'hover' })[\n $invalid ? Variables.BackgroundSentiment : Variables.BackgroundSelected\n ]};\n }\n }\n &:has(${TagButton}:active) {\n &,\n & ${TagButton} {\n background-color: ${theme.layer({ sentiment: $invalid ? 'negative' : 'information', state: 'press' })[\n $invalid ? Variables.BackgroundSentiment : Variables.BackgroundSelected\n ]};\n }\n }\n `};\n\n padding-inline: ${SelectConsts.newConsts[size ?? 'medium'].tags.padding}px;\n gap: ${SelectConsts.newConsts[size ?? 'medium'].tags.gap}px;\n\n & ${TagLabelContainer} {\n padding-inline: 0;\n gap: ${SelectConsts.newConsts[size ?? 'medium'].tags.textGap}px;\n }\n `};\n`;\n\nexport const SelectedSingleOptionLabel = styled(Label)`\n position: absolute;\n`;\n\nexport const SelectInput = styled(TextInput as FC<ITextInputPropsImpl>)<{ $mode?: ISelectProps['mode'] }>(\n ({ $mode, size, readOnly }) => css`\n align-items: flex-start;\n max-width: 100%;\n overflow: hidden;\n\n ${readOnly &&\n css`\n &,\n & input {\n cursor: default;\n }\n `};\n\n &:has([data-affix='suffix']) {\n --select-arrow-size: ${InputConsts.consts[size ?? 'medium'].iconSize +\n InputConsts.consts[size ?? 'medium'].padding.inline +\n InputConsts.consts[size ?? 'medium'].containerGap}px;\n }\n\n &:has(${LoadingContainer}) {\n --select-loading-size: ${InputConsts.consts[size ?? 'medium'].iconSize +\n InputConsts.consts[size ?? 'medium'].padding.inline * 2 +\n InputConsts.consts[size ?? 'medium'].containerGap}px;\n }\n\n &:has(${ClearButton}) {\n --select-clear-btn-size: ${InputConsts.consts[size ?? 'medium'].iconSize +\n InputConsts.consts[size ?? 'medium'].padding.inline * 2 +\n InputConsts.consts[size ?? 'medium'].containerGap}px;\n }\n\n ${Flexbox}:has(input) {\n position: relative;\n }\n\n ${SelectedSingleOptionLabel} {\n --single-option-label-padding: ${InputConsts.consts[size ?? 'medium'].padding.inline}px;\n left: var(--single-option-label-padding);\n white-space: nowrap;\n min-width: 0;\n width: 100%;\n max-width: calc(100% - var(--single-option-label-padding));\n overflow: hidden;\n display: block;\n text-overflow: ellipsis;\n }\n\n ${$mode === 'multiple' &&\n css`\n ${Flexbox}:has(input) {\n gap: ${SelectConsts.newConsts[size ?? 'medium'].gap}px;\n &:has(${SelectTag}) {\n padding: ${SelectConsts.newConsts[size ?? 'medium'].prefixPadding}px;\n\n input {\n padding: 0;\n }\n }\n }\n\n input {\n width: auto;\n }\n `}\n\n ${LabelStyles} {\n text-overflow: ellipsis;\n }\n\n ${SelectTag} {\n height: ${SelectConsts.newConsts[size ?? 'medium'].tags.height}px;\n border-radius: ${SelectConsts.newConsts[size ?? 'medium'].tags.borderRadius}px;\n overflow: hidden;\n position: relative;\n max-width: 100%;\n ${TagLabelContainer} {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n min-width: 0;\n max-width: 100%;\n display: block;\n }\n }\n `,\n);\n\nconst listItemSize = {\n small: 32,\n medium: 40,\n large: 48,\n};\n\nexport const SelectPopoverContent = styled(PopoverContent)`\n max-height: min(300px, calc(var(--radix-popper-available-height) - 10px));\n overflow-y: auto;\n\n & > :first-child:has() {\n margin-inline: 4px;\n }\n\n & > :has() {\n min-height: calc(${({ size }) => listItemSize[size ?? 'medium']}px);\n margin: 4px 0;\n gap: 4px;\n display: flex;\n align-items: stretch;\n justify-content: start;\n flex-direction: column;\n }\n`;\n"],"names":["SelectTag","styled","Tag","theme","$invalid","$disabled","size","css","TagButton","Variables","TagLabelContainer","LabelStyles","SelectConsts.newConsts","SelectedSingleOptionLabel","Label","SelectInput","TextInput","$mode","readOnly","InputConsts.consts","LoadingContainer","ClearButton","Flexbox","listItemSize","SelectPopoverContent","PopoverContent"],"mappings":"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"}

package/build/esm/components/Select/Select.types.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { AriaAttributes, CSSProperties, ReactNode } from 'react';
 import type { SelectTypes } from '../../react-base/src/components/Select';
+import { IListItemProps } from '../ListItem/ListItem.types';
 export type SelectMode = SelectTypes.Mode;
 export type SelectHandler<Value> = (value: Value, option: SelectTypes.IOption) => void;
 type ArrayElementType<T> = T extends (infer E)[] ? E : T;
@@ -12,8 +13,12 @@ export interface ISelectProps<Value = any> extends SelectTypes.IProps, AriaAttri
     defaultOpen?: boolean;
     optionFilterProp?: string;
     optionLabelProp?: string;
+    optionShowInputControls?: IListItemProps['showInputControls'];
+    optionMutliline?: boolean;
+    optionSelectionType?: IListItemProps['selectionType'];
     suffix?: ReactNode;
     onChange?: (value: Value) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
     onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;

package/build/esm/components/Select/Select.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAE7E,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC;AAE1C,MAAM,MAAM,aAAa,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,OAAO,KAAK,IAAI,CAAC;AACvF,KAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;AAGzD,MAAM,WAAW,YAAY,CAAC,KAAK,GAAG,GAAG,CAAE,SAAQ,WAAW,CAAC,MAAM,EAAE,cAAc;IACnF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;IAClD,UAAU,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;CACrD;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC"}
1	+ {"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAE7E,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC;AAE1C,MAAM,MAAM,aAAa,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,OAAO,KAAK,IAAI,CAAC;AACvF,KAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;AAGzD,MAAM,WAAW,YAAY,CAAC,KAAK,GAAG,GAAG,CAAE,SAAQ,WAAW,CAAC,MAAM,EAAE,cAAc;IACnF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uBAAuB,CAAC,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC;IAC9D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IACtD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;IAClD,UAAU,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;CACrD;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC"}

package/build/esm/components/Select/components/SelectLoading.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectLoading.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/SelectLoading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAKxE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,aAAa,iBAAkB,kBAAkB,~~4CAW7D~~,CAAC"}
1	+ {"version":3,"file":"SelectLoading.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/SelectLoading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAKxE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,aAAa,iBAAkB,kBAAkB,4CAY7D,CAAC"}

package/build/esm/components/Select/components/SelectLoading.js CHANGED Viewed

@@ -1,20 +1,21 @@
 import { jsx as l } from "react/jsx-runtime";
-import { Sizes as t } from "../../../react-base/src/consts/index.js";
-import { SelectListItemHeader as a } from "../../ListItem/SelectListItem.js";
-const n = ({ id: i, size: e }) => /* @__PURE__ */ l(
-  a,
+import { Sizes as i } from "../../../react-base/src/consts/index.js";
+import t from "../../ListItem/ListItemHeader.js";
+const d = ({ id: a, size: e }) => /* @__PURE__ */ l(
+  t,
   {
     style: { textAlign: "center" },
-    size: e === t.XSmall ? t.Small : e,
-    id: `select-${i}-options-loading`,
+    size: e === i.XSmall ? i.Small : e,
+    id: `select-${a}-options-loading`,
     role: "alert",
     "aria-live": "polite",
     "aria-atomic": !0,
     "aria-label": "Loading...",
-    label: "Loading..."
+    label: "Loading...",
+    divider: !1
   }
 );
 export {
-  n as SelectLoading
+  d as SelectLoading
 };
 //# sourceMappingURL=SelectLoading.js.map

package/build/esm/components/Select/components/SelectLoading.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectLoading.js","sources":["../../../../../src/components/Select/components/SelectLoading.tsx"],"sourcesContent":["import { SelectTypes } from 'acinguiux-ds-react-base/components/Select';\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\n\nimport { ~~SelectListItemHeader }~~ from '../../ListItem/~~SelectListItem~~';\n\nexport type SelectLoadingProps = {\n size?: SelectTypes.Size;\n id?: string;\n};\n\nexport const SelectLoading = ({ id, size }: SelectLoadingProps) => (\n <~~SelectListItemHeader~~\n style={{ textAlign: 'center' }}\n size={size === Sizes.XSmall ? Sizes.Small : size}\n id={`select-${id}-options-loading`}\n role=\"alert\"\n aria-live=\"polite\"\n aria-atomic={true}\n aria-label=\"Loading...\"\n label=\"Loading...\"\n />\n);\n"],"names":["SelectLoading","id","size","jsx","~~SelectListItemHeader~~","Sizes"],"mappings":";;;AAUO,MAAMA,IAAgB,CAAC,EAAE,IAAAC,GAAI,MAAAC,QAClC,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAO,EAAE,WAAW,SAAA;AAAA,IACpB,MAAMF,MAASG,EAAM,SAASA,EAAM,QAAQH;AAAA,IAC5C,IAAI,UAAUD,CAAE;AAAA,IAChB,MAAK;AAAA,IACL,aAAU;AAAA,IACV,eAAa;AAAA,IACb,cAAW;AAAA,IACX,OAAM;AAAA,EAAA;~~AACR~~;"}
1	+ {"version":3,"file":"SelectLoading.js","sources":["../../../../../src/components/Select/components/SelectLoading.tsx"],"sourcesContent":["import { SelectTypes } from 'acinguiux-ds-react-base/components/Select';\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\n\nimport ListItemHeader from '../../ListItem/ListItemHeader';\n\nexport type SelectLoadingProps = {\n size?: SelectTypes.Size;\n id?: string;\n};\n\nexport const SelectLoading = ({ id, size }: SelectLoadingProps) => (\n <ListItemHeader\n style={{ textAlign: 'center' }}\n size={size === Sizes.XSmall ? Sizes.Small : size}\n id={`select-${id}-options-loading`}\n role=\"alert\"\n aria-live=\"polite\"\n aria-atomic={true}\n aria-label=\"Loading...\"\n label=\"Loading...\"\n divider={false}\n />\n);\n"],"names":["SelectLoading","id","size","jsx","ListItemHeader","Sizes"],"mappings":";;;AAUO,MAAMA,IAAgB,CAAC,EAAE,IAAAC,GAAI,MAAAC,QAClC,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAO,EAAE,WAAW,SAAA;AAAA,IACpB,MAAMF,MAASG,EAAM,SAASA,EAAM,QAAQH;AAAA,IAC5C,IAAI,UAAUD,CAAE;AAAA,IAChB,MAAK;AAAA,IACL,aAAU;AAAA,IACV,eAAa;AAAA,IACb,cAAW;AAAA,IACX,OAAM;AAAA,IACN,SAAS;AAAA,EAAA;AACX;"}

package/build/esm/components/Select/utils/keydown.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import type { Dispatch, KeyboardEvent, SetStateAction } from 'react';
+import type { SelectTypes } from '../../../react-base/src/components/Select';
+import { ValueType } from '../Select.types';
+export interface KeyDownHandleOptions {
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    input: HTMLInputElement | null;
+    allowClear: boolean;
+    searchValue: string;
+    selectedNodeValues: ValueType[];
+    selectNodeValue: (value: ValueType) => void;
+    availableOptionKeys: string[];
+    flatOptions: SelectTypes.IOption[];
+    currentNodeKey: string | null;
+    setCurrentNodeKey: Dispatch<SetStateAction<string | null>>;
+}
+export declare const onKeyDownHandle: (event: KeyboardEvent<HTMLInputElement>, options: KeyDownHandleOptions) => void;
+//# sourceMappingURL=keydown.d.ts.map

package/build/esm/components/Select/utils/keydown.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"keydown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/utils/keydown.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAE7E,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7C,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,SAAS,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC5C,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,WAAW,EAAE,WAAW,CAAC,OAAO,EAAE,CAAC;IACnC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CAC5D;AAID,eAAO,MAAM,eAAe,UAAW,aAAa,CAAC,gBAAgB,CAAC,WAAW,oBAAoB,KAAG,IA6DvG,CAAC"}

package/build/esm/components/Select/utils/keydown.js ADDED Viewed

@@ -0,0 +1,28 @@
+const u = (l, e) => {
+  if (!e.isOpen && ["Enter", "ArrowUp", "ArrowDown", " "].includes(l.key)) {
+    l.preventDefault(), l.stopPropagation(), e.setIsOpen(!0);
+    return;
+  }
+  if (l.key === "Escape") {
+    l.preventDefault(), e.setIsOpen(!1);
+    return;
+  }
+  if (e.input?.focus(), e.allowClear && (l.key === "Backspace" || l.key === "Delete") && (!e.searchValue || e.searchValue.trim().length === 0) && e.selectedNodeValues.length > 0 && e.selectNodeValue(e.selectedNodeValues[e.selectedNodeValues.length - 1]), e.availableOptionKeys.length !== 0) {
+    if (l.key === "Enter" || (!e.searchValue || e.searchValue.trim().length === 0) && l.key === " ") {
+      l.preventDefault();
+      const a = e.flatOptions.find((r) => !r.isGroup && r.key === e.currentNodeKey);
+      e.selectNodeValue(a && !a?.isGroup ? a.value ?? null : null);
+    }
+    l.key === "ArrowDown" && (l.preventDefault(), e.setCurrentNodeKey((a) => {
+      const r = a ? e.availableOptionKeys.indexOf(a) : -1;
+      return r === -1 || r === e.availableOptionKeys.length - 1 ? e.availableOptionKeys?.[0] ?? null : e.availableOptionKeys?.[r + 1] ?? null;
+    })), l.key === "ArrowUp" && (l.preventDefault(), e.setCurrentNodeKey((a) => {
+      const r = a ? e.availableOptionKeys.indexOf(a) : -1;
+      return r <= 0 ? e.availableOptionKeys?.[e.availableOptionKeys.length - 1] ?? null : e.availableOptionKeys?.[r - 1] ?? null;
+    }));
+  }
+};
+export {
+  u as onKeyDownHandle
+};
+//# sourceMappingURL=keydown.js.map

package/build/esm/components/Select/utils/keydown.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"keydown.js","sources":["../../../../../src/components/Select/utils/keydown.ts"],"sourcesContent":["import type { Dispatch, KeyboardEvent, SetStateAction } from 'react';\n\nimport type { SelectTypes } from 'acinguiux-ds-react-base/components/Select';\n\nimport { ValueType } from '../Select.types';\n\nexport interface KeyDownHandleOptions {\n isOpen: boolean;\n setIsOpen: Dispatch<SetStateAction<boolean>>;\n input: HTMLInputElement | null;\n allowClear: boolean;\n searchValue: string;\n selectedNodeValues: ValueType[];\n selectNodeValue: (value: ValueType) => void;\n availableOptionKeys: string[];\n flatOptions: SelectTypes.IOption[];\n currentNodeKey: string | null;\n setCurrentNodeKey: Dispatch<SetStateAction<string | null>>;\n}\n\n// Transforms the Select state according to the key pressed\n// Would need to be refactored into a more testable piece of logic\nexport const onKeyDownHandle = (event: KeyboardEvent<HTMLInputElement>, options: KeyDownHandleOptions): void => {\n if (!options.isOpen && ['Enter', 'ArrowUp', 'ArrowDown', ' '].includes(event.key)) {\n event.preventDefault();\n event.stopPropagation();\n options.setIsOpen(true);\n return;\n }\n\n if (event.key === 'Escape') {\n event.preventDefault();\n options.setIsOpen(false);\n\n return;\n }\n\n options.input?.focus();\n\n if (\n options.allowClear &&\n (event.key === 'Backspace' || event.key === 'Delete') &&\n (!options.searchValue || options.searchValue.trim().length === 0) &&\n options.selectedNodeValues.length > 0\n ) {\n options.selectNodeValue(options.selectedNodeValues[options.selectedNodeValues.length - 1]);\n }\n\n if (options.availableOptionKeys.length === 0) {\n return;\n }\n\n if (\n event.key === 'Enter' ||\n ((!options.searchValue || options.searchValue.trim().length === 0) && event.key === ' ')\n ) {\n event.preventDefault();\n const currentNode = options.flatOptions.find((opt) => !opt.isGroup && opt.key === options.currentNodeKey);\n options.selectNodeValue(currentNode && !currentNode?.isGroup ? (currentNode.value ?? null) : null);\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n options.setCurrentNodeKey((prevKey: string | null) => {\n const currentNodeIdx = prevKey ? options.availableOptionKeys.indexOf(prevKey) : -1;\n if (currentNodeIdx === -1 || currentNodeIdx === options.availableOptionKeys.length - 1) {\n return options.availableOptionKeys?.[0] ?? null;\n }\n\n return options.availableOptionKeys?.[currentNodeIdx + 1] ?? null;\n });\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n options.setCurrentNodeKey((prevKey) => {\n const currentNodeIdx = prevKey ? options.availableOptionKeys.indexOf(prevKey) : -1;\n if (currentNodeIdx <= 0) {\n return options.availableOptionKeys?.[options.availableOptionKeys.length - 1] ?? null;\n }\n return options.availableOptionKeys?.[currentNodeIdx - 1] ?? null;\n });\n }\n};\n"],"names":["onKeyDownHandle","event","options","currentNode","opt","prevKey","currentNodeIdx"],"mappings":"AAsBO,MAAMA,IAAkB,CAACC,GAAwCC,MAAwC;AAC9G,MAAI,CAACA,EAAQ,UAAU,CAAC,SAAS,WAAW,aAAa,GAAG,EAAE,SAASD,EAAM,GAAG,GAAG;AACjF,IAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNC,EAAQ,UAAU,EAAI;AACtB;AAAA,EACF;AAEA,MAAID,EAAM,QAAQ,UAAU;AAC1B,IAAAA,EAAM,eAAA,GACNC,EAAQ,UAAU,EAAK;AAEvB;AAAA,EACF;AAaA,MAXAA,EAAQ,OAAO,MAAA,GAGbA,EAAQ,eACPD,EAAM,QAAQ,eAAeA,EAAM,QAAQ,cAC3C,CAACC,EAAQ,eAAeA,EAAQ,YAAY,OAAO,WAAW,MAC/DA,EAAQ,mBAAmB,SAAS,KAEpCA,EAAQ,gBAAgBA,EAAQ,mBAAmBA,EAAQ,mBAAmB,SAAS,CAAC,CAAC,GAGvFA,EAAQ,oBAAoB,WAAW,GAI3C;AAAA,QACED,EAAM,QAAQ,YACZ,CAACC,EAAQ,eAAeA,EAAQ,YAAY,KAAA,EAAO,WAAW,MAAMD,EAAM,QAAQ,KACpF;AACA,MAAAA,EAAM,eAAA;AACN,YAAME,IAAcD,EAAQ,YAAY,KAAK,CAACE,MAAQ,CAACA,EAAI,WAAWA,EAAI,QAAQF,EAAQ,cAAc;AACxG,MAAAA,EAAQ,gBAAgBC,KAAe,CAACA,GAAa,UAAWA,EAAY,SAAS,OAAQ,IAAI;AAAA,IACnG;AAEA,IAAIF,EAAM,QAAQ,gBAChBA,EAAM,eAAA,GACNC,EAAQ,kBAAkB,CAACG,MAA2B;AACpD,YAAMC,IAAiBD,IAAUH,EAAQ,oBAAoB,QAAQG,CAAO,IAAI;AAChF,aAAIC,MAAmB,MAAMA,MAAmBJ,EAAQ,oBAAoB,SAAS,IAC5EA,EAAQ,sBAAsB,CAAC,KAAK,OAGtCA,EAAQ,sBAAsBI,IAAiB,CAAC,KAAK;AAAA,IAC9D,CAAC,IAGCL,EAAM,QAAQ,cAChBA,EAAM,eAAA,GACNC,EAAQ,kBAAkB,CAACG,MAAY;AACrC,YAAMC,IAAiBD,IAAUH,EAAQ,oBAAoB,QAAQG,CAAO,IAAI;AAChF,aAAIC,KAAkB,IACbJ,EAAQ,sBAAsBA,EAAQ,oBAAoB,SAAS,CAAC,KAAK,OAE3EA,EAAQ,sBAAsBI,IAAiB,CAAC,KAAK;AAAA,IAC9D,CAAC;AAAA;AAEL;"}

package/build/esm/components/Select/utils/strUtils.js CHANGED Viewed

@@ -1,5 +1,5 @@
-const n = (e, o) => typeof e == "object" && Array.isArray(e) ? n(e.join(""), o) : (typeof e == "string" && (e == null ? void 0 : e.toLowerCase().includes(o.toLowerCase().trim()))) ?? !1;
+const r = (e, o) => typeof e == "object" && Array.isArray(e) ? r(e.join(""), o) : (typeof e == "string" && e?.toLowerCase().includes(o.toLowerCase().trim())) ?? !1;
 export {
-  n as strIncludes
+  r as strIncludes
 };
 //# sourceMappingURL=strUtils.js.map

package/build/esm/components/Select/utils/strUtils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"strUtils.js","sources":["../../../../../src/components/Select/utils/strUtils.ts"],"sourcesContent":["type stringOrArray = string \| null \| undefined \| string[];\n\nexport const strIncludes = (str: stringOrArray, search: string): boolean => {\n if (typeof str === 'object' && Array.isArray(str)) {\n return strIncludes(str.join(''), search);\n }\n\n return (typeof str === 'string' && str?.toLowerCase().includes(search.toLowerCase().trim())) ?? false;\n};\n"],"names":["strIncludes","str","search"],"mappings":"AAEO,MAAMA,IAAc,CAACC,GAAoBC,MAC1C,OAAOD,KAAQ,YAAY,MAAM,QAAQA,CAAG,IACvCD,EAAYC,EAAI,KAAK,EAAE,GAAGC,CAAM,KAGjC,OAAOD,KAAQ,~~aAAYA~~,~~KAAA~~,~~gBAAAA~~,~~EAAK~~,~~cAAc,~~SAASC,EAAO,YAAA,EAAc,KAAA,~~QAAY~~;"}
1	+ {"version":3,"file":"strUtils.js","sources":["../../../../../src/components/Select/utils/strUtils.ts"],"sourcesContent":["type stringOrArray = string \| null \| undefined \| string[];\n\nexport const strIncludes = (str: stringOrArray, search: string): boolean => {\n if (typeof str === 'object' && Array.isArray(str)) {\n return strIncludes(str.join(''), search);\n }\n\n return (typeof str === 'string' && str?.toLowerCase().includes(search.toLowerCase().trim())) ?? false;\n};\n"],"names":["strIncludes","str","search"],"mappings":"AAEO,MAAMA,IAAc,CAACC,GAAoBC,MAC1C,OAAOD,KAAQ,YAAY,MAAM,QAAQA,CAAG,IACvCD,EAAYC,EAAI,KAAK,EAAE,GAAGC,CAAM,KAGjC,OAAOD,KAAQ,YAAYA,GAAK,YAAA,EAAc,SAASC,EAAO,YAAA,EAAc,KAAA,CAAM,MAAM;"}