@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.3

package/input-nested-multi-select/input-nested-multi-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-nested-multi-select.js","sources":["../../src/input-nested-multi-select/input-nested-multi-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport isEqual from \"lodash/isEqual\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type {\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n} from \"../shared/dropdown-list-v2\";\nimport {\n    buildKeyPathToSet,\n    ExpandableElement,\n    NestedDropdownList,\n} from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator, StringHelper } from \"../util\";\nimport type { SelectedItem } from \"./helpers\";\nimport { getSelectedItems, getSelectedSubItems } from \"./helpers\";\nimport type { InputNestedMultiSelectProps } from \"./types\";\n\nexport const InputNestedMultiSelect = <V1, V2, V3>({\n    placeholder = \"Select\",\n    options: _options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    selectedKeyPaths: _selectedKeyPaths,\n    mode,\n    valueToStringFunction,\n    enableSearch,\n    searchPlaceholder,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    readOnly,\n    onSearch,\n    onSelectOptions,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    onBlur,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    variant = \"default\",\n    alignment,\n    dropdownZIndex,\n    dropdownWidth,\n    dropdownRootNode,\n}: InputNestedMultiSelectProps<V1, V2, V3>): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE\n    // =========================================================================\n    const { multiSelectedLabel } = customLabels || {};\n    const options = _options as NestedDropdownListItemProps<V1 | V2 | V3>[];\n    const [selectedKeyPaths, setSelectedKeyPaths] = useState<Set<string>>(\n        _selectedKeyPaths\n            ? buildKeyPathToSet(_selectedKeyPaths)\n            : new Set<string>()\n    );\n    const [selectedItems, setSelectedItems] = useState<\n        SelectedItem<V1 | V2 | V3>[]\n    >([]);\n\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const newKeyPath = _selectedKeyPaths || [];\n        const selectedItems = getSelectedItems(options, newKeyPath);\n\n        setSelectedKeyPaths(buildKeyPathToSet(newKeyPath));\n        setSelectedItems(selectedItems);\n    }, [_selectedKeyPaths, options]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelectAll = (\n        keyPaths: string[][],\n        items: NestedDropdownListLocalItem<V1 | V2 | V3>[]\n    ) => {\n        const selectedItems = items.map((item) => ({\n            keyPath: item.keyPath,\n            label: item.item.label,\n            value: item.item.value,\n        }));\n        setSelectedKeyPaths(buildKeyPathToSet(keyPaths));\n        setSelectedItems(selectedItems);\n        performOnSelectOptions(keyPaths, selectedItems);\n    };\n\n    const handleListItemClick = (\n        listItem: NestedDropdownListLocalItem<V1 | V2 | V3>\n    ) => {\n        const newSelectedItems: SelectedItem<V1 | V2 | V3>[] =\n            getNewSelection(listItem);\n        const newKeyPaths = newSelectedItems.map((item) => item.keyPath);\n        setSelectedItems(newSelectedItems);\n        setSelectedKeyPaths(buildKeyPathToSet(newKeyPaths));\n        performOnSelectOptions(newKeyPaths, newSelectedItems);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTION\n    // =========================================================================\n    const getDisplayValue = (): string => {\n        if (selectedItems.length > 1) {\n            return multiSelectedLabel || `${selectedItems.length} selected`;\n        }\n\n        const { label, value } = selectedItems[0];\n        if (valueToStringFunction) {\n            return valueToStringFunction(value);\n        } else {\n            return label;\n        }\n    };\n\n    const truncateValue = (value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef && labelContainerRef.current) {\n                widthOfElement =\n                    labelContainerRef.current.getBoundingClientRect().width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 6);\n        }\n\n        return value;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show && onHideOptions) {\n            onHideOptions();\n        }\n\n        if (show && onShowOptions) {\n            onShowOptions();\n        }\n    };\n\n    const performOnSelectOptions = (\n        keyPaths: string[][],\n        items: SelectedItem<V1 | V2 | V3>[]\n    ) => {\n        if (onSelectOptions) {\n            const returnValue = items.map((item) => item.value);\n            onSelectOptions(keyPaths, returnValue);\n        }\n    };\n\n    const getNewSelection = (\n        item: NestedDropdownListLocalItem<V1 | V2 | V3>\n    ): SelectedItem<V1 | V2 | V3>[] => {\n        if (item.checked === true) {\n            // remove item or subitems\n            return selectedItems.filter((selectedItem) => {\n                const ancestorKeyPath = selectedItem.keyPath.slice(\n                    0,\n                    item.keyPath.length\n                );\n                return !isEqual(item.keyPath, ancestorKeyPath);\n            });\n        } else {\n            // select item or all subitems\n            const nextSelection = [...selectedItems];\n            const newItemsToAdd = item.hasSubItems\n                ? getSelectedSubItems(options, item.keyPath)\n                : [\n                      {\n                          value: item.item.value,\n                          label: item.item.label,\n                          keyPath: item.keyPath,\n                      },\n                  ];\n            newItemsToAdd.forEach((addedItem) => {\n                if (\n                    !selectedItems.find((selectedItem) =>\n                        isEqual(selectedItem.keyPath, addedItem.keyPath)\n                    )\n                ) {\n                    nextSelection.push(addedItem);\n                }\n            });\n            return nextSelection;\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTION\n    // =========================================================================\n    const renderLabel = () => {\n        if (isEmpty(selectedItems)) {\n            return (\n                <PlaceholderLabel $truncateType={optionTruncationType}>\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else {\n            return (\n                <ValueLabel $truncateType={optionTruncationType}>\n                    {truncateValue(getDisplayValue())}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} $disabled={disabled}>\n            {renderLabel()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"tree\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <NestedDropdownList\n                listboxId={internalId}\n                listItems={options}\n                multiSelect\n                selectedKeyPaths={selectedKeyPaths}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                enableSearch={enableSearch}\n                searchPlaceholder={searchPlaceholder}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                onSelectItem={handleListItemClick}\n                onSelectAll={handleSelectAll}\n                onRetry={onRetry}\n                onSearch={onSearch}\n                variant={variant}\n                mode={mode}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={showOptions}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            clickToToggle\n            offset={8}\n            alignment={alignment}\n            fitAvailableHeight\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["InputNestedMultiSelect","placeholder","options","_options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","selectedKeyPaths","_selectedKeyPaths","mode","valueToStringFunction","enableSearch","searchPlaceholder","hideNoResultsDisplay","noResultsDescription","customLabels","readOnly","onSearch","onSelectOptions","onShowOptions","onHideOptions","onRetry","onBlur","optionsLoadState","optionTruncationType","variant","alignment","dropdownZIndex","dropdownWidth","dropdownRootNode","multiSelectedLabel","setSelectedKeyPaths","useState","buildKeyPathToSet","Set","selectedItems","setSelectedItems","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","newKeyPath","getSelectedItems","handleSelectAll","keyPaths","items","map","item","keyPath","label","value","performOnSelectOptions","handleListItemClick","listItem","newSelectedItems","getNewSelection","newKeyPaths","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","getDisplayValue","length","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","triggerOptionDisplayCallback","show","returnValue","checked","filter","selectedItem","ancestorKeyPath","slice","isEqual","nextSelection","hasSubItems","getSelectedSubItems","forEach","addedItem","find","push","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","$focused","$disabled","$error","children","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","isEmpty","PlaceholderLabel","$truncateType","ValueLabel","renderDropdown","NestedDropdownList","listItems","multiSelect","itemsLoadState","itemTruncationType","onSelectItem","onSelectAll","matchElementWidth","onOpen","onClose","reason","onDismiss","_a","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"input-nested-multi-select.js","sources":["../../src/input-nested-multi-select/input-nested-multi-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport isEqual from \"lodash/isEqual\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type {\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n} from \"../shared/dropdown-list\";\nimport {\n    buildKeyPathToSet,\n    ExpandableElement,\n    NestedDropdownList,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { StringHelper, useId } from \"../util\";\nimport type { SelectedItem } from \"./helpers\";\nimport { getSelectedItems, getSelectedSubItems } from \"./helpers\";\nimport type { InputNestedMultiSelectProps } from \"./types\";\n\nexport const InputNestedMultiSelect = <V1, V2, V3>({\n    placeholder = \"Select\",\n    options: _options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    selectedKeyPaths: _selectedKeyPaths,\n    mode,\n    valueToStringFunction,\n    enableSearch,\n    searchPlaceholder,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    readOnly,\n    onSearch,\n    onSelectOptions,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    onBlur,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    variant = \"default\",\n    alignment,\n    dropdownZIndex,\n    dropdownWidth,\n    dropdownRootNode,\n}: InputNestedMultiSelectProps<V1, V2, V3>): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE\n    // =========================================================================\n    const { multiSelectedLabel } = customLabels || {};\n    const options = _options as NestedDropdownListItemProps<V1 | V2 | V3>[];\n    const [selectedKeyPaths, setSelectedKeyPaths] = useState<Set<string>>(\n        _selectedKeyPaths\n            ? buildKeyPathToSet(_selectedKeyPaths)\n            : new Set<string>()\n    );\n    const [selectedItems, setSelectedItems] = useState<\n        SelectedItem<V1 | V2 | V3>[]\n    >([]);\n\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const newKeyPath = _selectedKeyPaths || [];\n        const selectedItems = getSelectedItems(options, newKeyPath);\n\n        setSelectedKeyPaths(buildKeyPathToSet(newKeyPath));\n        setSelectedItems(selectedItems);\n    }, [_selectedKeyPaths, options]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelectAll = (\n        keyPaths: string[][],\n        items: NestedDropdownListLocalItem<V1 | V2 | V3>[]\n    ) => {\n        const selectedItems = items.map((item) => ({\n            keyPath: item.keyPath,\n            label: item.item.label,\n            value: item.item.value,\n        }));\n        setSelectedKeyPaths(buildKeyPathToSet(keyPaths));\n        setSelectedItems(selectedItems);\n        performOnSelectOptions(keyPaths, selectedItems);\n    };\n\n    const handleListItemClick = (\n        listItem: NestedDropdownListLocalItem<V1 | V2 | V3>\n    ) => {\n        const newSelectedItems: SelectedItem<V1 | V2 | V3>[] =\n            getNewSelection(listItem);\n        const newKeyPaths = newSelectedItems.map((item) => item.keyPath);\n        setSelectedItems(newSelectedItems);\n        setSelectedKeyPaths(buildKeyPathToSet(newKeyPaths));\n        performOnSelectOptions(newKeyPaths, newSelectedItems);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTION\n    // =========================================================================\n    const getDisplayValue = (): string => {\n        if (selectedItems.length > 1) {\n            return multiSelectedLabel || `${selectedItems.length} selected`;\n        }\n\n        const { label, value } = selectedItems[0];\n        if (valueToStringFunction) {\n            return valueToStringFunction(value);\n        } else {\n            return label;\n        }\n    };\n\n    const truncateValue = (value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef && labelContainerRef.current) {\n                widthOfElement =\n                    labelContainerRef.current.getBoundingClientRect().width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 6);\n        }\n\n        return value;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show && onHideOptions) {\n            onHideOptions();\n        }\n\n        if (show && onShowOptions) {\n            onShowOptions();\n        }\n    };\n\n    const performOnSelectOptions = (\n        keyPaths: string[][],\n        items: SelectedItem<V1 | V2 | V3>[]\n    ) => {\n        if (onSelectOptions) {\n            const returnValue = items.map((item) => item.value);\n            onSelectOptions(keyPaths, returnValue);\n        }\n    };\n\n    const getNewSelection = (\n        item: NestedDropdownListLocalItem<V1 | V2 | V3>\n    ): SelectedItem<V1 | V2 | V3>[] => {\n        if (item.checked === true) {\n            // remove item or subitems\n            return selectedItems.filter((selectedItem) => {\n                const ancestorKeyPath = selectedItem.keyPath.slice(\n                    0,\n                    item.keyPath.length\n                );\n                return !isEqual(item.keyPath, ancestorKeyPath);\n            });\n        } else {\n            // select item or all subitems\n            const nextSelection = [...selectedItems];\n            const newItemsToAdd = item.hasSubItems\n                ? getSelectedSubItems(options, item.keyPath)\n                : [\n                      {\n                          value: item.item.value,\n                          label: item.item.label,\n                          keyPath: item.keyPath,\n                      },\n                  ];\n            newItemsToAdd.forEach((addedItem) => {\n                if (\n                    !selectedItems.find((selectedItem) =>\n                        isEqual(selectedItem.keyPath, addedItem.keyPath)\n                    )\n                ) {\n                    nextSelection.push(addedItem);\n                }\n            });\n            return nextSelection;\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTION\n    // =========================================================================\n    const renderLabel = () => {\n        if (isEmpty(selectedItems)) {\n            return (\n                <PlaceholderLabel truncateType={optionTruncationType}>\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else {\n            return (\n                <ValueLabel truncateType={optionTruncationType}>\n                    {truncateValue(getDisplayValue())}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} disabled={disabled}>\n            {renderLabel()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"tree\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <NestedDropdownList\n                listboxId={internalId}\n                listItems={options}\n                multiSelect\n                selectedKeyPaths={selectedKeyPaths}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                enableSearch={enableSearch}\n                searchPlaceholder={searchPlaceholder}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                onSelectItem={handleListItemClick}\n                onSelectAll={handleSelectAll}\n                onRetry={onRetry}\n                onSearch={onSearch}\n                variant={variant}\n                mode={mode}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={showOptions}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            clickToToggle\n            offset={8}\n            alignment={alignment}\n            fitAvailableHeight\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["InputNestedMultiSelect","placeholder","options","_options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","selectedKeyPaths","_selectedKeyPaths","mode","valueToStringFunction","enableSearch","searchPlaceholder","hideNoResultsDisplay","noResultsDescription","customLabels","readOnly","onSearch","onSelectOptions","onShowOptions","onHideOptions","onRetry","onBlur","optionsLoadState","optionTruncationType","variant","alignment","dropdownZIndex","dropdownWidth","dropdownRootNode","multiSelectedLabel","setSelectedKeyPaths","useState","buildKeyPathToSet","Set","selectedItems","setSelectedItems","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","newKeyPath","getSelectedItems","handleSelectAll","keyPaths","items","map","item","keyPath","label","value","performOnSelectOptions","handleListItemClick","listItem","newSelectedItems","getNewSelection","newKeyPaths","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","getDisplayValue","length","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","triggerOptionDisplayCallback","show","returnValue","checked","filter","selectedItem","ancestorKeyPath","slice","isEqual","nextSelection","hasSubItems","getSelectedSubItems","forEach","addedItem","find","push","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","children","LabelContainer","isEmpty","PlaceholderLabel","truncateType","ValueLabel","renderDropdown","NestedDropdownList","listItems","multiSelect","itemsLoadState","itemTruncationType","onSelectItem","onSelectAll","matchElementWidth","onOpen","onClose","reason","onDismiss","_a","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/input-nested-multi-select/types.d.ts

@@ -1,5 +1,5 @@
 import type { InputNestedSelectOptionsProps, InputNestedSelectSharedProps, L1OptionProps } from "../input-nested-select";
-import type { DropdownCustomLabelProps, DropdownSearchProps } from "../shared/dropdown-list-v2/types";
+import type { DropdownCustomLabelProps, DropdownSearchProps } from "../shared/dropdown-list/types";
 export interface InputNestedMultiSelectProps<V1, V2, V3> extends React.HTMLAttributes<HTMLElement>, InputNestedSelectOptionsProps<V1, V2, V3>, InputNestedSelectSharedProps<V1, V2, V3>, DropdownSearchProps<L1OptionProps<V1, V2, V3>> {
     /** Specifies key paths to select particular option label */
     selectedKeyPaths?: string[][] | undefined;

package/input-nested-select/input-nested-select.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import r from"../external/lodash/isEmpty.js";import{useState as t,useRef as o,useEffect as n}from"react";import"styled-components";import{StringHelper as l}from"../util/string-helper.js";import"../v3_theme/index.js";import"../shared/dropdown-list-v2/dropdown-label.styles.js";import"../shared/dropdown-list-v2/dropdown-list.js";import"../shared/dropdown-list-v2/dropdown-list-state.js";import{ExpandableElement as d}from"../shared/dropdown-list-v2/expandable-element.js";import{NestedDropdownList as a}from"../shared/dropdown-list-v2/nested-dropdown-list.js";import{buildKeyPathToSet as i,findItemByKeyPath as s}from"../shared/dropdown-list-v2/nested-dropdown-list-helpers.js";import{LabelContainer as p,PlaceholderLabel as c,ValueLabel as m}from"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as u}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputBox as h}from"../shared/input-wrapper/input-wrapper.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as w}from"../util/simple-id-generator.js";const b=({placeholder:b="Select",options:y,disabled:f,error:v,className:j,"data-testid":g,id:S,"aria-labelledby":x,"aria-describedby":T,"aria-invalid":O,selectedKeyPath:R,mode:I,valueToStringFunction:$,enableSearch:D,searchPlaceholder:N,selectableCategory:L,hideNoResultsDisplay:P,noResultsDescription:C,customLabels:k,readOnly:B,onBlur:E,onSearch:F,onSelectOption:H,onShowOptions:K,onHideOptions:W,onRetry:Z,optionsLoadState:A="success",optionTruncationType:_="end",variant:q="default",alignment:z,dropdownZIndex:G,dropdownWidth:J,dropdownRootNode:M})=>{const Q=y,[U,V]=t(R?i([R]):new Set),[X,Y]=t(),[ee,re]=t(!1),[te,oe]=t(!1),[ne]=t((()=>w.generate())),le=o(null),de=o(null),ae=o(null);n((()=>{V(R?i([R]):new Set);const e=s(Q,R||[]);Y(null!=e?e:void 0)}),[R,Q]);const ie=e=>{var r;const{keyPath:t,item:{label:o,value:n}}=e;V(i([t])),Y({label:o,value:n}),re(!1),ue(!1),null===(r=de.current)||void 0===r||r.focus(),null==H||H(t,n)},se=()=>{te||ee||oe(!0)},pe=e=>{te&&!ee&&le.current&&!le.current.contains(e.relatedTarget)&&(oe(!1),null==E||E())},ce=()=>{if(!X)return"";const{label:e,value:r}=X;return $?$(r):e},me=e=>{if("middle"===_){let r=0;return ae&&ae.current&&(r=ae.current.getBoundingClientRect().width),l.truncateOneLine(e,r,120,6)}return e},ue=e=>{!e&&W&&W(),e&&K&&K()};return e(u,{enabled:!B&&!f,isOpen:ee,renderElement:()=>e(h,{className:j,"data-testid":g,id:S,ref:le,tabIndex:-1,onFocus:se,onBlur:pe,$focused:te,$disabled:f,$readOnly:B,$error:v,children:e(d,{ref:de,disabled:f,expanded:ee,listboxId:ne,popupRole:"tree",readOnly:B,variant:q,"aria-labelledby":x,"aria-describedby":T,"aria-invalid":O,children:e(p,{ref:ae,$disabled:f,children:r(X)?e(c,{$truncateType:_,children:b}):e(m,{$truncateType:_,children:me(ce())})})})}),renderDropdown:()=>e(a,{listboxId:ne,listItems:Q,selectedKeyPaths:U,selectableCategory:L,itemsLoadState:A,itemTruncationType:_,enableSearch:D,searchPlaceholder:N,hideNoResultsDisplay:P,noResultsDescription:C,customLabels:k,onSelectItem:ie,onRetry:Z,onSearch:F,variant:q,mode:I,width:J,matchElementWidth:!0}),onOpen:()=>{re(!0),ue(!0),oe(!0)},onClose:e=>{re(!1),ue(!1),"click"!==e&&(oe(!1),null==E||E())},onDismiss:()=>{var e;null===(e=de.current)||void 0===e||e.focus(),re(!1),ue(!1)},clickToToggle:!0,offset:8,alignment:z,fitAvailableHeight:!0,customZIndex:G,rootNode:M})};export{b as InputNestedSelect};
+import{jsx as e}from"react/jsx-runtime";import r from"../external/lodash/isEmpty.js";import{useState as t,useRef as o,useEffect as n}from"react";import"clsx";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as i}from"../util/simple-id-generator.js";import{StringHelper as d}from"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import"../shared/dropdown-list/dropdown-list.js";import"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as l}from"../shared/dropdown-list/expandable-element.js";import{NestedDropdownList as s}from"../shared/dropdown-list/nested-dropdown-list.js";import{buildKeyPathToSet as a,findItemByKeyPath as p}from"../shared/dropdown-list/nested-dropdown-list-helpers.js";import{ElementWithDropdown as m}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{LabelContainer as c,PlaceholderLabel as u,ValueLabel as h}from"../shared/dropdown-wrapper/dropdown-wrapper.js";import{InputBox as w}from"../shared/input-wrapper/input-wrapper.js";const b=({placeholder:b="Select",options:y,disabled:f,error:j,className:v,"data-testid":x,id:g,"aria-labelledby":S,"aria-describedby":T,"aria-invalid":O,selectedKeyPath:R,mode:I,valueToStringFunction:k,enableSearch:D,searchPlaceholder:N,selectableCategory:P,hideNoResultsDisplay:C,noResultsDescription:L,customLabels:_,readOnly:A,onBlur:B,onSearch:E,onSelectOption:H,onShowOptions:q,onHideOptions:F,onRetry:K,optionsLoadState:W="success",optionTruncationType:Z="end",variant:G="default",alignment:M,dropdownZIndex:z,dropdownWidth:J,dropdownRootNode:Q})=>{const U=y,[V,X]=t(R?a([R]):new Set),[Y,$]=t(),[ee,re]=t(!1),[te,oe]=t(!1),ne=i(),ie=o(null),de=o(null),le=o(null);n((()=>{X(R?a([R]):new Set);const e=p(U,R||[]);$(null!=e?e:void 0)}),[R,U]);const se=e=>{var r;const{keyPath:t,item:{label:o,value:n}}=e;X(a([t])),$({label:o,value:n}),re(!1),ue(!1),null===(r=de.current)||void 0===r||r.focus(),null==H||H(t,n)},ae=()=>{te||ee||oe(!0)},pe=e=>{te&&!ee&&ie.current&&!ie.current.contains(e.relatedTarget)&&(oe(!1),null==B||B())},me=()=>{if(!Y)return"";const{label:e,value:r}=Y;return k?k(r):e},ce=e=>{if("middle"===Z){let r=0;return le&&le.current&&(r=le.current.getBoundingClientRect().width),d.truncateOneLine(e,r,120,6)}return e},ue=e=>{!e&&F&&F(),e&&q&&q()};return e(m,{enabled:!A&&!f,isOpen:ee,renderElement:()=>e(w,{className:v,"data-testid":x,id:g,ref:ie,tabIndex:-1,onFocus:ae,onBlur:pe,focused:te,disabled:f,readOnly:A,error:j,children:e(l,{ref:de,disabled:f,expanded:ee,listboxId:ne,popupRole:"tree",readOnly:A,variant:G,"aria-labelledby":S,"aria-describedby":T,"aria-invalid":O,children:e(c,{ref:le,disabled:f,children:r(Y)?e(u,{truncateType:Z,children:b}):e(h,{truncateType:Z,children:ce(me())})})})}),renderDropdown:()=>e(s,{listboxId:ne,listItems:U,selectedKeyPaths:V,selectableCategory:P,itemsLoadState:W,itemTruncationType:Z,enableSearch:D,searchPlaceholder:N,hideNoResultsDisplay:C,noResultsDescription:L,customLabels:_,onSelectItem:se,onRetry:K,onSearch:E,variant:G,mode:I,width:J,matchElementWidth:!0}),onOpen:()=>{re(!0),ue(!0),oe(!0)},onClose:e=>{re(!1),ue(!1),"click"!==e&&(oe(!1),null==B||B())},onDismiss:()=>{var e;null===(e=de.current)||void 0===e||e.focus(),re(!1),ue(!1)},clickToToggle:!0,offset:8,alignment:M,fitAvailableHeight:!0,customZIndex:z,rootNode:Q})};export{b as InputNestedSelect};
 //# sourceMappingURL=input-nested-select.js.map

package/input-nested-select/input-nested-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-nested-select.js","sources":["../../src/input-nested-select/input-nested-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type {\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n} from \"../shared/dropdown-list-v2\";\nimport {\n    buildKeyPathToSet,\n    ExpandableElement,\n    findItemByKeyPath,\n    NestedDropdownList,\n} from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator, StringHelper } from \"../util\";\nimport type {\n    InputNestedSelectProps,\n    L1OptionProps,\n    L2OptionProps,\n    L3OptionProps,\n} from \"./types\";\n\nexport type CombinedOptionProps<V1, V2, V3> =\n    | L1OptionProps<V1, V2, V3>\n    | L2OptionProps<V2, V3>\n    | L3OptionProps<V3>;\n\ninterface SelectedItemType<V1, V2, V3> {\n    label: string;\n    value: V1 | V2 | V3;\n}\n\nexport const InputNestedSelect = <V1, V2, V3>({\n    placeholder = \"Select\",\n    options: _options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    selectedKeyPath: _selectedKeyPath,\n    mode,\n    valueToStringFunction,\n    enableSearch,\n    searchPlaceholder,\n    selectableCategory,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    readOnly,\n    onBlur,\n    onSearch,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    variant = \"default\",\n    alignment,\n    dropdownZIndex,\n    dropdownWidth,\n    dropdownRootNode,\n}: InputNestedSelectProps<V1, V2, V3>): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE\n    // =========================================================================\n    const options = _options as NestedDropdownListItemProps<V1 | V2 | V3>[];\n    const [selectedKeyPaths, setSelectedKeyPaths] = useState<Set<string>>(\n        _selectedKeyPath\n            ? buildKeyPathToSet([_selectedKeyPath])\n            : new Set<string>()\n    );\n    const [selectedItem, setSelectedItem] =\n        useState<SelectedItemType<V1, V2, V3>>();\n\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setSelectedKeyPaths(\n            _selectedKeyPath\n                ? buildKeyPathToSet([_selectedKeyPath])\n                : new Set<string>()\n        );\n        const selectedItem = findItemByKeyPath(options, _selectedKeyPath || []);\n        setSelectedItem(selectedItem ?? undefined);\n    }, [_selectedKeyPath, options]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleListItemClick = (\n        listItem: NestedDropdownListLocalItem<V1 | V2 | V3>\n    ) => {\n        const {\n            keyPath,\n            item: { label, value },\n        } = listItem;\n        setSelectedKeyPaths(buildKeyPathToSet([keyPath]));\n        setSelectedItem({ label, value });\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        selectorRef.current?.focus();\n        onSelectOption?.(keyPath, value);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTION\n    // =========================================================================\n    const getDisplayValue = (): string => {\n        if (!selectedItem) return \"\";\n        const { label, value } = selectedItem;\n\n        if (valueToStringFunction) {\n            return valueToStringFunction(value);\n        } else {\n            return label;\n        }\n    };\n\n    const truncateValue = (value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef && labelContainerRef.current) {\n                widthOfElement =\n                    labelContainerRef.current.getBoundingClientRect().width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 6);\n        }\n\n        return value;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show && onHideOptions) {\n            onHideOptions();\n        }\n\n        if (show && onShowOptions) {\n            onShowOptions();\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTION\n    // =========================================================================\n    const renderLabel = () => {\n        if (isEmpty(selectedItem)) {\n            return (\n                <PlaceholderLabel $truncateType={optionTruncationType}>\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else {\n            return (\n                <ValueLabel $truncateType={optionTruncationType}>\n                    {truncateValue(getDisplayValue())}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} $disabled={disabled}>\n            {renderLabel()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"tree\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <NestedDropdownList\n                listboxId={internalId}\n                listItems={options}\n                selectedKeyPaths={selectedKeyPaths}\n                selectableCategory={selectableCategory}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                enableSearch={enableSearch}\n                searchPlaceholder={searchPlaceholder}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                onSelectItem={handleListItemClick}\n                onRetry={onRetry}\n                onSearch={onSearch}\n                variant={variant}\n                mode={mode}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={showOptions}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            clickToToggle\n            offset={8}\n            alignment={alignment}\n            fitAvailableHeight\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["InputNestedSelect","placeholder","options","_options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","selectedKeyPath","_selectedKeyPath","mode","valueToStringFunction","enableSearch","searchPlaceholder","selectableCategory","hideNoResultsDisplay","noResultsDescription","customLabels","readOnly","onBlur","onSearch","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","variant","alignment","dropdownZIndex","dropdownWidth","dropdownRootNode","selectedKeyPaths","setSelectedKeyPaths","useState","buildKeyPathToSet","Set","selectedItem","setSelectedItem","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","findItemByKeyPath","undefined","handleListItemClick","listItem","keyPath","item","label","value","triggerOptionDisplayCallback","_a","current","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","$focused","$disabled","$error","children","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","isEmpty","PlaceholderLabel","$truncateType","ValueLabel","renderDropdown","NestedDropdownList","listItems","itemsLoadState","itemTruncationType","onSelectItem","matchElementWidth","onOpen","onClose","reason","onDismiss","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"input-nested-select.js","sources":["../../src/input-nested-select/input-nested-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type {\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n} from \"../shared/dropdown-list\";\nimport {\n    buildKeyPathToSet,\n    ExpandableElement,\n    findItemByKeyPath,\n    NestedDropdownList,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { StringHelper, useId } from \"../util\";\nimport type {\n    InputNestedSelectProps,\n    L1OptionProps,\n    L2OptionProps,\n    L3OptionProps,\n} from \"./types\";\n\nexport type CombinedOptionProps<V1, V2, V3> =\n    | L1OptionProps<V1, V2, V3>\n    | L2OptionProps<V2, V3>\n    | L3OptionProps<V3>;\n\ninterface SelectedItemType<V1, V2, V3> {\n    label: string;\n    value: V1 | V2 | V3;\n}\n\nexport const InputNestedSelect = <V1, V2, V3>({\n    placeholder = \"Select\",\n    options: _options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    selectedKeyPath: _selectedKeyPath,\n    mode,\n    valueToStringFunction,\n    enableSearch,\n    searchPlaceholder,\n    selectableCategory,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    readOnly,\n    onBlur,\n    onSearch,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    variant = \"default\",\n    alignment,\n    dropdownZIndex,\n    dropdownWidth,\n    dropdownRootNode,\n}: InputNestedSelectProps<V1, V2, V3>): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE\n    // =========================================================================\n    const options = _options as NestedDropdownListItemProps<V1 | V2 | V3>[];\n    const [selectedKeyPaths, setSelectedKeyPaths] = useState<Set<string>>(\n        _selectedKeyPath\n            ? buildKeyPathToSet([_selectedKeyPath])\n            : new Set<string>()\n    );\n    const [selectedItem, setSelectedItem] =\n        useState<SelectedItemType<V1, V2, V3>>();\n\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setSelectedKeyPaths(\n            _selectedKeyPath\n                ? buildKeyPathToSet([_selectedKeyPath])\n                : new Set<string>()\n        );\n        const selectedItem = findItemByKeyPath(options, _selectedKeyPath || []);\n        setSelectedItem(selectedItem ?? undefined);\n    }, [_selectedKeyPath, options]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleListItemClick = (\n        listItem: NestedDropdownListLocalItem<V1 | V2 | V3>\n    ) => {\n        const {\n            keyPath,\n            item: { label, value },\n        } = listItem;\n        setSelectedKeyPaths(buildKeyPathToSet([keyPath]));\n        setSelectedItem({ label, value });\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        selectorRef.current?.focus();\n        onSelectOption?.(keyPath, value);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTION\n    // =========================================================================\n    const getDisplayValue = (): string => {\n        if (!selectedItem) return \"\";\n        const { label, value } = selectedItem;\n\n        if (valueToStringFunction) {\n            return valueToStringFunction(value);\n        } else {\n            return label;\n        }\n    };\n\n    const truncateValue = (value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef && labelContainerRef.current) {\n                widthOfElement =\n                    labelContainerRef.current.getBoundingClientRect().width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 6);\n        }\n\n        return value;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show && onHideOptions) {\n            onHideOptions();\n        }\n\n        if (show && onShowOptions) {\n            onShowOptions();\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTION\n    // =========================================================================\n    const renderLabel = () => {\n        if (isEmpty(selectedItem)) {\n            return (\n                <PlaceholderLabel truncateType={optionTruncationType}>\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else {\n            return (\n                <ValueLabel truncateType={optionTruncationType}>\n                    {truncateValue(getDisplayValue())}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} disabled={disabled}>\n            {renderLabel()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"tree\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <NestedDropdownList\n                listboxId={internalId}\n                listItems={options}\n                selectedKeyPaths={selectedKeyPaths}\n                selectableCategory={selectableCategory}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                enableSearch={enableSearch}\n                searchPlaceholder={searchPlaceholder}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                onSelectItem={handleListItemClick}\n                onRetry={onRetry}\n                onSearch={onSearch}\n                variant={variant}\n                mode={mode}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={showOptions}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            clickToToggle\n            offset={8}\n            alignment={alignment}\n            fitAvailableHeight\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["InputNestedSelect","placeholder","options","_options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","selectedKeyPath","_selectedKeyPath","mode","valueToStringFunction","enableSearch","searchPlaceholder","selectableCategory","hideNoResultsDisplay","noResultsDescription","customLabels","readOnly","onBlur","onSearch","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","variant","alignment","dropdownZIndex","dropdownWidth","dropdownRootNode","selectedKeyPaths","setSelectedKeyPaths","useState","buildKeyPathToSet","Set","selectedItem","setSelectedItem","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","findItemByKeyPath","undefined","handleListItemClick","listItem","keyPath","item","label","value","triggerOptionDisplayCallback","_a","current","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","children","LabelContainer","isEmpty","PlaceholderLabel","truncateType","ValueLabel","renderDropdown","NestedDropdownList","listItems","itemsLoadState","itemTruncationType","onSelectItem","matchElementWidth","onOpen","onClose","reason","onDismiss","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/input-nested-select/types.d.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from "react";
 import type { InputSelectOptionsProps, InputSelectSharedProps } from "../input-select";
-import type { DropdownCustomLabelProps, DropdownSearchProps, DropdownVariantType, ExpandMode } from "../shared/dropdown-list-v2/types";
+import type { DropdownCustomLabelProps, DropdownSearchProps, DropdownVariantType, ExpandMode } from "../shared/dropdown-list/types";
 import type { DropdownAlignmentType } from "../shared/dropdown-wrapper/types";
 export interface InputNestedSelectOptionsProps<V1, V2, V3> extends Omit<InputSelectOptionsProps<V1>, "options"> {
     options: L1OptionProps<V1, V2, V3>[];

package/input-range-select/input-range-select.d.ts

@@ -1,2 +1,2 @@
 import type { InputRangeSelectProps } from "./types";
-export declare const InputRangeSelect: <T, V>({ selectedOptions, placeholders, options, disabled, className, readOnly, error, "data-testid": testId, id, enableSearch, searchFunction, searchPlaceholder, valueExtractor, valueToStringFunction, listExtractor, displayValueExtractor, onSelectOption, onShowOptions, onHideOptions, onRetry, optionsLoadState, optionTruncationType, renderCustomSelectedOption, renderListItem, renderCustomCallToAction, alignment, dropdownZIndex, dropdownRootNode, dropdownWidth, ...otherProps }: InputRangeSelectProps<T, V>) => JSX.Element;
+export declare const InputRangeSelect: <T, V>({ selectedOptions, placeholders, options, disabled, className, readOnly, error, "data-testid": testId, id, enableSearch, searchFunction, searchPlaceholder, valueExtractor, valueToStringFunction, listExtractor, displayValueExtractor, onSelectOption, onShowOptions, onHideOptions, onRetry, optionsLoadState, optionTruncationType, renderCustomSelectedOption, renderListItem, renderCustomCallToAction, alignment, dropdownZIndex, dropdownRootNode, dropdownWidth, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: InputRangeSelectProps<T, V>) => JSX.Element;

package/input-range-select/input-range-select.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as o}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as i,useMemo as l}from"react";import{ClearIcon as d}from"../input/input.style.js";import"styled-components";import{StringHelper as s}from"../util/string-helper.js";import"../v3_theme/index.js";import"../shared/dropdown-list-v2/dropdown-label.styles.js";import{DropdownList as a}from"../shared/dropdown-list-v2/dropdown-list.js";import{DropdownListState as c}from"../shared/dropdown-list-v2/dropdown-list-state.js";import"../shared/dropdown-list-v2/expandable-element.js";import"@lifesg/react-icons/caret-right";import"react-virtuoso";import"../button/button.style.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as p}from"../util/simple-id-generator.js";import{Wrapper as u,LabelContainer as m,PlaceholderLabel as h,ValueLabel as v}from"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as f}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../shared/dropdown-list-v2/dropdown-list.styles.js";import"../shared/dropdown-list-v2/dropdown-search.js";import"../shared/dropdown-list-v2/nested-dropdown-list.styles.js";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import{RangeInputInnerContainer as w}from"../shared/range-input-inner-container/range-input-inner-container.js";import{StyledInputWrapper as g,ClearIconContainer as j}from"./input-range-select.style.js";const y=y=>{var{selectedOptions:x,placeholders:b={from:"Select",to:"Select"},options:S,disabled:T,className:O,readOnly:C,error:E,"data-testid":I,id:$,enableSearch:A=!1,searchFunction:D,searchPlaceholder:_,valueExtractor:L,valueToStringFunction:F,listExtractor:N,displayValueExtractor:R,onSelectOption:k,onShowOptions:P,onHideOptions:B,onRetry:H,optionsLoadState:W={from:"success",to:"success"},optionTruncationType:Z="middle",renderCustomSelectedOption:V,renderListItem:q,renderCustomCallToAction:G,alignment:K,dropdownZIndex:z,dropdownRootNode:J,dropdownWidth:M}=y,Q=e(y,["selectedOptions","placeholders","options","disabled","className","readOnly","error","data-testid","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth"]);const[U,X]=t(),[Y,ee]=t(),[re,oe]=t("none"),te="none"!==re,[ne,ie]=t(!1),le=n(null),de={from:n(null),to:n(null)},se=n(null),[ae]=t((()=>null!=$?$:p.generate())),ce=`${ae}-range-listbox`;i((()=>{X(null==x?void 0:x.from),ee(null==x?void 0:x.to)}),[x]),i((()=>{var e;te&&"to"===re&&(null===(e=se.current)||void 0===e||e.refocus({index:0}))}),[te,re]);const pe=e=>{e||null==B||B(),e&&(null==P||P())},ue=e=>{var r,o;const t="from"===e?U:Y;if(!t)return"";if(R)return R(t);if(L){const e=L(t);return F?F(e):null!==(o=null===(r=null==e?void 0:e.toString)||void 0===r?void 0:r.call(e))&&void 0!==o?o:""}return t.toString()},me=(e,r)=>{var o;if("middle"===Z){let t=0;return(null===(o=de[e])||void 0===o?void 0:o.current)&&(t=de[e].current.getBoundingClientRect().width),s.truncateOneLine(r,t,120,8)}return r},he=()=>{switch(re){case"from":return"start";case"to":return"end";case"none":return re}},ve=l((()=>{var e;return"none"===re?[]:null!==(e=null==S?void 0:S[re])&&void 0!==e?e:[]}),[re,S]),fe=l((()=>{if("none"===re)return[];const e="from"===re?U:Y;return e?[e]:[]}),[re,U,Y]),we=e=>r=>{r.stopPropagation(),r.preventDefault(),T||C||(oe("to"===e&&U?"to":"from"),pe(!0))},ge=(e,r)=>{var o;if("none"!==re){if("from"===re)return X(e),null==k||k({from:e},r),ee(void 0),oe("to"),void pe(!0);ee(e),null==k||k({to:e},r),oe("none"),pe(!1),null===(o=le.current)||void 0===o||o.focus(),ie(!0)}},je=()=>{var e;oe("none"),pe(!1),null===(e=le.current)||void 0===e||e.focus(),ie(!0),U&&Y||(X(void 0),ee(void 0))},ye=e=>{var r;e.stopPropagation(),e.preventDefault(),X(void 0),ee(void 0),null==k||k({from:void 0,to:void 0},void 0),null===(r=le.current)||void 0===r||r.focus(),ie(!0)},xe=()=>ie(!0),be=e=>{ne&&!te&&le.current&&!le.current.contains(e.relatedTarget)&&ie(!1)},Se=e=>{if(!T&&!C&&!te&&e.currentTarget===e.target)switch(e.key){case"Enter":case" ":case"ArrowDown":e.preventDefault(),oe("from"),pe(!0)}},Te=e=>{const o="from"===e?U:Y;return o?V?V(o):r(v,{$truncateType:Z,children:me(e,ue(e))}):r(h,{$truncateType:Z,children:me(e,(null==b?void 0:b[e])||"")})},Oe=e=>r(m,{onClick:we(e),ref:de[e],$disabled:T,children:Te(e)});return r(u,Object.assign({id:$},Q,{children:r(c,{children:r(f,{enabled:!C&&!T,isOpen:te,renderElement:()=>o(g,{className:O,"data-testid":I,ref:le,tabIndex:0,onFocus:xe,onBlur:be,$focused:ne||te,$disabled:T,$readOnly:C,$error:E,onKeyDown:Se,children:[o(w,{currentActive:he(),error:E,children:[Oe("from"),Oe("to")]}),!te&&U&&Y&&!C&&!T&&r(j,{onClick:ye,type:"button","aria-label":"Clear",children:r(d,{"aria-hidden":!0})})]}),renderDropdown:()=>r(a,{ref:se,"data-testid":`${I}-dropdown`,listboxId:ce,listItems:ve,onSelectItem:ge,onDismiss:je,valueExtractor:L,listExtractor:N,selectedItems:fe,itemsLoadState:W[re],itemTruncationType:Z,onRetry:H,width:M,matchElementWidth:!M,enableSearch:A,searchFunction:D,searchPlaceholder:_,renderListItem:q,renderCustomCallToAction:G}),onOpen:()=>{T||C||"none"===re&&(oe("from"),pe(!0))},onClose:()=>{oe("none"),pe(!1),U&&Y||(X(void 0),ee(void 0)),ie(!1)},onDismiss:je,clickToToggle:!1,offset:8,alignment:K,fitAvailableHeight:!0,customZIndex:z,rootNode:J})})}))};export{y as InputRangeSelect};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as o}from"react/jsx-runtime";import t from"clsx";import{useState as n,useRef as i,useEffect as s,useMemo as l}from"react";import{VisuallyHidden as a,concatIds as d}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as c}from"../util/simple-id-generator.js";import{StringHelper as p}from"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import{DropdownList as m}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as u}from"../shared/dropdown-list/dropdown-list-state.js";import"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as h}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as f,ClearButton as v}from"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";import{PlaceholderLabel as w,ValueLabel as b}from"../shared/dropdown-wrapper/dropdown-wrapper.js";import{clearButtonContainer as y}from"../shared/input-wrapper/input-wrapper.styles.js";import{RangeInputInnerContainer as g}from"../shared/range-input-inner-container/range-input-inner-container.js";import{styledInputWrapper as j,rangeSelectorButton as x}from"./input-range-select.styles.js";const S=S=>{var{selectedOptions:T,placeholders:_={from:"Select",to:"Select"},options:C,disabled:O,className:A,readOnly:I,error:k,"data-testid":E,id:P,enableSearch:D=!1,searchFunction:L,searchPlaceholder:N,valueExtractor:q,valueToStringFunction:H,listExtractor:F,displayValueExtractor:R,onSelectOption:$,onShowOptions:G,onHideOptions:M,onRetry:B,optionsLoadState:W={from:"success",to:"success"},optionTruncationType:Z="middle",renderCustomSelectedOption:V,renderListItem:z,renderCustomCallToAction:K,alignment:J,dropdownZIndex:Q,dropdownRootNode:U,dropdownWidth:X,"aria-labelledby":Y,"aria-describedby":ee}=S,re=e(S,["selectedOptions","placeholders","options","disabled","className","readOnly","error","data-testid","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-labelledby","aria-describedby"]);const[oe,te]=n(),[ne,ie]=n(),[se,le]=n("none"),ae="none"!==se,de={from:i(null),to:i(null)},ce=i(null),pe=c(),me=`${pe}-range-listbox`,ue=`${pe}-from-label`,he=`${pe}-to-label`;s((()=>{te(null==T?void 0:T.from),ie(null==T?void 0:T.to)}),[T]),s((()=>{var e;ae&&"to"===se&&(null===(e=ce.current)||void 0===e||e.refocus({index:0}))}),[ae,se]);const fe=e=>{e||null==M||M(),e&&(null==G||G())},ve=e=>{var r,o;const t="from"===e?oe:ne;if(!t)return"";if(R)return R(t);if(q){const e=q(t);return H?H(e):null!==(o=null===(r=null==e?void 0:e.toString)||void 0===r?void 0:r.call(e))&&void 0!==o?o:""}return t.toString()},we=(e,r)=>{var o;if("middle"===Z){let t=0;return(null===(o=de[e])||void 0===o?void 0:o.current)&&(t=de[e].current.getBoundingClientRect().width),p.truncateOneLine(r,t,120,8)}return r},be=()=>{switch(se){case"from":return"start";case"to":return"end";case"none":return se}},ye=l((()=>{var e;return"none"===se?[]:null!==(e=null==C?void 0:C[se])&&void 0!==e?e:[]}),[se,C]),ge=l((()=>{if("none"===se)return[];const e="from"===se?oe:ne;return e?[e]:[]}),[se,oe,ne]),je=e=>{if(O||I)return;le("to"!==e||oe?e:"from"),fe(!0)},xe=e=>{var r;null===(r=de[e].current)||void 0===r||r.focus()},Se=e=>d("from"===e?ue:he,Y),Te=e=>r=>{r.stopPropagation(),r.preventDefault(),je(e)},_e=e=>r=>{if(!O&&!I)switch(r.key){case"Enter":case" ":case"ArrowDown":r.preventDefault(),je(e)}},Ce=(e,r)=>{if("none"!==se){if("from"===se)return te(e),null==$||$({from:e},r),ie(void 0),le("to"),fe(!0),void xe("to");ie(e),null==$||$({to:e},r),le("none"),fe(!1),xe("to")}},Oe=()=>{const e=se;le("none"),fe(!1),xe("to"===e?"to":"from"),oe&&ne||(te(void 0),ie(void 0))},Ae=e=>{e.stopPropagation(),e.preventDefault(),te(void 0),ie(void 0),null==$||$({from:void 0,to:void 0},void 0),xe("from")},Ie=e=>{const o="from"===e?oe:ne;return o?V?V(o):r(b,{truncateType:Z,children:we(e,ve(e))}):r(w,{truncateType:Z,children:we(e,(null==_?void 0:_[e])||"")})},ke=e=>r("button",{type:"button",role:"combobox","aria-labelledby":Se(e),"aria-describedby":ee,"aria-expanded":ae&&se===e,"aria-controls":me,"aria-disabled":O,"aria-readonly":I,onClick:Te(e),onKeyDown:_e(e),ref:de[e],tabIndex:0,className:x,children:Ie(e)});return r("div",Object.assign({id:P},re,{children:r(u,{children:r(h,{enabled:!I&&!O,isOpen:ae,renderElement:()=>o(f,{className:t(j,A),"data-testid":E,disabled:O,readOnly:I,error:k,focused:ae,children:[r(a,{id:ue,children:(null==_?void 0:_.from)||"Select From"}),r(a,{id:he,children:(null==_?void 0:_.to)||"Select To"}),o(g,{currentActive:be(),error:k,children:[ke("from"),ke("to")]}),!ae&&oe&&ne&&!I&&!O&&r("div",{className:y,children:r(v,{onClick:Ae,type:"button","aria-label":"Clear"})})]}),renderDropdown:()=>r(m,{ref:ce,"data-testid":`${E}-dropdown`,listboxId:me,ariaLabel:"from"===se?`Selecting for: ${null==_?void 0:_.from}`:"to"===se?`Selecting for: ${null==_?void 0:_.to}`:void 0,listItems:ye,onSelectItem:Ce,onDismiss:Oe,valueExtractor:q,listExtractor:F,selectedItems:ge,itemsLoadState:W[se],itemTruncationType:Z,onRetry:B,width:X,matchElementWidth:!X,enableSearch:D,searchFunction:L,searchPlaceholder:N,renderListItem:z,renderCustomCallToAction:K}),onOpen:()=>{O||I||"none"===se&&(le("from"),fe(!0))},onClose:()=>{le("none"),fe(!1),oe&&ne||(te(void 0),ie(void 0))},onDismiss:Oe,clickToToggle:!1,offset:8,alignment:J,fitAvailableHeight:!0,customZIndex:Q,rootNode:U})})}))};export{S as InputRangeSelect};
 //# sourceMappingURL=input-range-select.js.map

package/input-range-select/input-range-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-range-select.js","sources":["../../src/input-range-select/input-range-select.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { ClearIcon } from \"../input/input.style\";\nimport type { DropdownListApi } from \"../shared/dropdown-list-v2\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n    Wrapper,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport {\n    ClearIconContainer,\n    StyledInputWrapper,\n} from \"./input-range-select.style\";\nimport type { InputRangeSelectProps } from \"./types\";\n\ntype RangeType = \"from\" | \"to\";\n\nexport const InputRangeSelect = <T, V>({\n    selectedOptions,\n    placeholders = { from: \"Select\", to: \"Select\" },\n    options,\n    disabled,\n    className,\n    readOnly,\n    error,\n    \"data-testid\": testId,\n    id,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    valueToStringFunction,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = { from: \"success\", to: \"success\" },\n    optionTruncationType = \"middle\",\n    renderCustomSelectedOption,\n    renderListItem,\n    renderCustomCallToAction,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    ...otherProps\n}: InputRangeSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedFromValue, setSelectedFromValue] = useState<T | undefined>();\n    const [selectedToValue, setSelectedToValue] = useState<T | undefined>();\n    const [focusedInput, setFocusedInput] = useState<RangeType | \"none\">(\n        \"none\"\n    );\n    const isOpen = focusedInput !== \"none\";\n    const [isFocused, setIsFocused] = useState(false);\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const labelContainerRef = {\n        from: useRef<HTMLDivElement>(null),\n        to: useRef<HTMLDivElement>(null),\n    };\n    const dropdownRef = useRef<DropdownListApi>(null);\n\n    const [internalId] = useState<string>(\n        () => id ?? SimpleIdGenerator.generate()\n    );\n    const listboxId = `${internalId}-range-listbox`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedFromValue(selectedOptions?.from);\n        setSelectedToValue(selectedOptions?.to);\n    }, [selectedOptions]);\n\n    useEffect(() => {\n        if (!isOpen) return;\n\n        if (focusedInput === \"to\") {\n            dropdownRef.current?.refocus({ index: 0 });\n        }\n    }, [isOpen, focusedInput]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show) onHideOptions?.();\n        if (show) onShowOptions?.();\n    };\n\n    const getDisplayValue = (rangeType: RangeType): string => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n        if (!selected) return \"\";\n\n        if (displayValueExtractor) return displayValueExtractor(selected);\n\n        if (valueExtractor) {\n            const value = valueExtractor(selected);\n            return valueToStringFunction\n                ? valueToStringFunction(value)\n                : value?.toString?.() ?? \"\";\n        }\n\n        return selected.toString();\n    };\n\n    const truncateValue = (type: RangeType, value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef[type]?.current) {\n                widthOfElement =\n                    labelContainerRef[type].current.getBoundingClientRect()\n                        .width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n        }\n        return value;\n    };\n\n    const getCurrentFocused = (): \"none\" | \"start\" | \"end\" => {\n        switch (focusedInput) {\n            case \"from\":\n                return \"start\";\n            case \"to\":\n                return \"end\";\n            case \"none\":\n                return focusedInput;\n        }\n    };\n\n    const currentOptions = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        return options?.[focusedInput] ?? [];\n    }, [focusedInput, options]);\n\n    const currentSelectedItems = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        const selected =\n            focusedInput === \"from\" ? selectedFromValue : selectedToValue;\n        return selected ? [selected] : [];\n    }, [focusedInput, selectedFromValue, selectedToValue]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelectorClick =\n        (rangeType?: RangeType) => (event: React.MouseEvent) => {\n            event.stopPropagation();\n            event.preventDefault();\n\n            if (disabled || readOnly) return;\n\n            if (rangeType === \"to\" && selectedFromValue) {\n                setFocusedInput(\"to\");\n            } else {\n                setFocusedInput(\"from\");\n            }\n\n            triggerOptionDisplayCallback(true);\n        };\n\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        if (focusedInput === \"none\") return;\n\n        if (focusedInput === \"from\") {\n            setSelectedFromValue(item);\n            onSelectOption?.({ from: item }, extractedValue);\n\n            setSelectedToValue(undefined);\n            setFocusedInput(\"to\");\n            triggerOptionDisplayCallback(true);\n            return;\n        }\n\n        setSelectedToValue(item);\n        onSelectOption?.({ to: item }, extractedValue);\n\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n        nodeRef.current?.focus();\n        setIsFocused(true);\n    };\n\n    const handleDismiss = () => {\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        nodeRef.current?.focus();\n        setIsFocused(true);\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n    };\n\n    const handleClose = () => {\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n\n        setIsFocused(false);\n    };\n\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n        if (focusedInput === \"none\") {\n            setFocusedInput(\"from\");\n            triggerOptionDisplayCallback(true);\n        }\n    };\n\n    const handleClear = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n        setSelectedFromValue(undefined);\n        setSelectedToValue(undefined);\n        onSelectOption?.({ from: undefined, to: undefined }, undefined);\n\n        nodeRef.current?.focus();\n        setIsFocused(true);\n    };\n\n    const handleNodeFocus = () => setIsFocused(true);\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            isFocused &&\n            !isOpen &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setIsFocused(false);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (disabled || readOnly) return;\n        if (isOpen) return;\n        if (event.currentTarget !== event.target) return;\n\n        switch (event.key) {\n            case \"Enter\":\n            case \" \":\n            case \"ArrowDown\":\n                event.preventDefault();\n                setFocusedInput(\"from\");\n                triggerOptionDisplayCallback(true);\n                break;\n            default:\n                break;\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderLabel = (rangeType: RangeType) => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n\n        if (!selected) {\n            return (\n                <PlaceholderLabel $truncateType={optionTruncationType}>\n                    {truncateValue(rangeType, placeholders?.[rangeType] || \"\")}\n                </PlaceholderLabel>\n            );\n        }\n\n        if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        }\n\n        return (\n            <ValueLabel $truncateType={optionTruncationType}>\n                {truncateValue(rangeType, getDisplayValue(rangeType))}\n            </ValueLabel>\n        );\n    };\n\n    const renderSelectorContent = (rangeType: RangeType) => (\n        <LabelContainer\n            onClick={handleSelectorClick(rangeType)}\n            ref={labelContainerRef[rangeType]}\n            $disabled={disabled}\n        >\n            {renderLabel(rangeType)}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <StyledInputWrapper\n                className={className}\n                data-testid={testId}\n                ref={nodeRef}\n                tabIndex={0}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={isFocused || isOpen}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n                onKeyDown={handleKeyDown}\n            >\n                <RangeInputInnerContainer\n                    currentActive={getCurrentFocused()}\n                    error={error}\n                >\n                    {renderSelectorContent(\"from\")}\n                    {renderSelectorContent(\"to\")}\n                </RangeInputInnerContainer>\n\n                {!isOpen &&\n                    selectedFromValue &&\n                    selectedToValue &&\n                    !readOnly &&\n                    !disabled && (\n                        <ClearIconContainer\n                            onClick={handleClear}\n                            type=\"button\"\n                            aria-label=\"Clear\"\n                        >\n                            <ClearIcon aria-hidden />\n                        </ClearIconContainer>\n                    )}\n            </StyledInputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                ref={dropdownRef}\n                data-testid={`${testId}-dropdown`}\n                listboxId={listboxId}\n                listItems={currentOptions}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                selectedItems={currentSelectedItems}\n                itemsLoadState={optionsLoadState[focusedInput as RangeType]}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                width={dropdownWidth}\n                matchElementWidth={!dropdownWidth}\n                enableSearch={enableSearch}\n                searchFunction={searchFunction}\n                searchPlaceholder={searchPlaceholder}\n                renderListItem={renderListItem}\n                renderCustomCallToAction={renderCustomCallToAction}\n            />\n        );\n    };\n\n    return (\n        <Wrapper id={id} {...otherProps}>\n            <DropdownListState>\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={isOpen}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle={false}\n                    offset={8}\n                    alignment={alignment}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                />\n            </DropdownListState>\n        </Wrapper>\n    );\n};\n"],"names":["InputRangeSelect","_a","selectedOptions","placeholders","from","to","options","disabled","className","readOnly","error","testId","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","otherProps","__rest","selectedFromValue","setSelectedFromValue","useState","selectedToValue","setSelectedToValue","focusedInput","setFocusedInput","isOpen","isFocused","setIsFocused","nodeRef","useRef","labelContainerRef","dropdownRef","internalId","SimpleIdGenerator","generate","listboxId","useEffect","current","refocus","index","triggerOptionDisplayCallback","show","getDisplayValue","rangeType","selected","value","_b","toString","call","truncateValue","type","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","getCurrentFocused","currentOptions","useMemo","currentSelectedItems","handleSelectorClick","event","stopPropagation","preventDefault","handleListItemClick","item","extractedValue","undefined","focus","handleDismiss","handleClear","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleKeyDown","currentTarget","target","key","renderLabel","_jsx","ValueLabel","$truncateType","PlaceholderLabel","renderSelectorContent","LabelContainer","onClick","ref","$disabled","children","Wrapper","Object","assign","DropdownListState","ElementWithDropdown","enabled","renderElement","_jsxs","StyledInputWrapper","tabIndex","onFocus","onBlur","$focused","$readOnly","$error","onKeyDown","RangeInputInnerContainer","currentActive","ClearIconContainer","ClearIcon","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"input-range-select.js","sources":["../../src/input-range-select/input-range-select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport type { DropdownListApi } from \"../shared/dropdown-list\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { ClearButton, InputWrapper } from \"../shared/input-wrapper\";\nimport * as inputWrapperStyles from \"../shared/input-wrapper/input-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport * as styles from \"./input-range-select.styles\";\nimport type { InputRangeSelectProps } from \"./types\";\n\ntype RangeType = \"from\" | \"to\";\n\nexport const InputRangeSelect = <T, V>({\n    selectedOptions,\n    placeholders = { from: \"Select\", to: \"Select\" },\n    options,\n    disabled,\n    className,\n    readOnly,\n    error,\n    \"data-testid\": testId,\n    id,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    valueToStringFunction,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = { from: \"success\", to: \"success\" },\n    optionTruncationType = \"middle\",\n    renderCustomSelectedOption,\n    renderListItem,\n    renderCustomCallToAction,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: InputRangeSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedFromValue, setSelectedFromValue] = useState<T | undefined>();\n    const [selectedToValue, setSelectedToValue] = useState<T | undefined>();\n    const [focusedInput, setFocusedInput] = useState<RangeType | \"none\">(\n        \"none\"\n    );\n    const isOpen = focusedInput !== \"none\";\n\n    const labelButtonRef = {\n        from: useRef<HTMLButtonElement>(null),\n        to: useRef<HTMLButtonElement>(null),\n    };\n    const dropdownRef = useRef<DropdownListApi>(null);\n\n    const internalId = useId();\n    const listboxId = `${internalId}-range-listbox`;\n    const fromLabelId = `${internalId}-from-label`;\n    const toLabelId = `${internalId}-to-label`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedFromValue(selectedOptions?.from);\n        setSelectedToValue(selectedOptions?.to);\n    }, [selectedOptions]);\n\n    useEffect(() => {\n        if (!isOpen) return;\n\n        if (focusedInput === \"to\") {\n            dropdownRef.current?.refocus({ index: 0 });\n        }\n    }, [isOpen, focusedInput]);\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show) onHideOptions?.();\n        if (show) onShowOptions?.();\n    };\n\n    const getDisplayValue = (rangeType: RangeType): string => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n        if (!selected) return \"\";\n\n        if (displayValueExtractor) return displayValueExtractor(selected);\n\n        if (valueExtractor) {\n            const value = valueExtractor(selected);\n            return valueToStringFunction\n                ? valueToStringFunction(value)\n                : value?.toString?.() ?? \"\";\n        }\n\n        return selected.toString();\n    };\n\n    const truncateValue = (type: RangeType, value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelButtonRef[type]?.current) {\n                widthOfElement =\n                    labelButtonRef[type].current.getBoundingClientRect().width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n        }\n        return value;\n    };\n\n    const getCurrentFocused = (): \"none\" | \"start\" | \"end\" => {\n        switch (focusedInput) {\n            case \"from\":\n                return \"start\";\n            case \"to\":\n                return \"end\";\n            case \"none\":\n                return focusedInput;\n        }\n    };\n\n    const currentOptions = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        return options?.[focusedInput] ?? [];\n    }, [focusedInput, options]);\n\n    const currentSelectedItems = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        const selected =\n            focusedInput === \"from\" ? selectedFromValue : selectedToValue;\n        return selected ? [selected] : [];\n    }, [focusedInput, selectedFromValue, selectedToValue]);\n\n    const openDropdownFor = (rangeType: RangeType) => {\n        if (disabled || readOnly) return;\n\n        const nextFocusedInput =\n            rangeType === \"to\" && !selectedFromValue ? \"from\" : rangeType;\n\n        setFocusedInput(nextFocusedInput);\n        triggerOptionDisplayCallback(true);\n    };\n\n    const focusButton = (type: RangeType) => {\n        labelButtonRef[type].current?.focus();\n    };\n\n    const getButtonLabelledBy = (rangeType: RangeType) => {\n        const rangeLabelId = rangeType === \"from\" ? fromLabelId : toLabelId;\n        return concatIds(rangeLabelId, ariaLabelledBy);\n    };\n\n    const getDropdownAriaLabel = () => {\n        if (focusedInput === \"from\") {\n            return `Selecting for: ${placeholders?.from}`;\n        }\n\n        if (focusedInput === \"to\") {\n            return `Selecting for: ${placeholders?.to}`;\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelectorClick =\n        (rangeType: RangeType) => (event: React.MouseEvent) => {\n            event.stopPropagation();\n            event.preventDefault();\n            openDropdownFor(rangeType);\n        };\n\n    const handleSelectorKeyDown =\n        (rangeType: RangeType) =>\n        (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (disabled || readOnly) return;\n\n            switch (event.key) {\n                case \"Enter\":\n                case \" \":\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    openDropdownFor(rangeType);\n                    break;\n                default:\n                    break;\n            }\n        };\n\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        if (focusedInput === \"none\") return;\n\n        if (focusedInput === \"from\") {\n            setSelectedFromValue(item);\n            onSelectOption?.({ from: item }, extractedValue);\n\n            setSelectedToValue(undefined);\n            setFocusedInput(\"to\");\n            triggerOptionDisplayCallback(true);\n            focusButton(\"to\");\n            return;\n        }\n\n        setSelectedToValue(item);\n        onSelectOption?.({ to: item }, extractedValue);\n\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n        focusButton(\"to\");\n    };\n\n    const handleDismiss = () => {\n        const last = focusedInput;\n\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        if (last === \"to\") focusButton(\"to\");\n        else focusButton(\"from\");\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n    };\n\n    const handleClose = () => {\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n    };\n\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n\n        if (focusedInput === \"none\") {\n            setFocusedInput(\"from\");\n            triggerOptionDisplayCallback(true);\n        }\n    };\n\n    const handleClear = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n        setSelectedFromValue(undefined);\n        setSelectedToValue(undefined);\n        onSelectOption?.({ from: undefined, to: undefined }, undefined);\n\n        focusButton(\"from\");\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderLabel = (rangeType: RangeType) => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n\n        if (!selected) {\n            return (\n                <PlaceholderLabel truncateType={optionTruncationType}>\n                    {truncateValue(rangeType, placeholders?.[rangeType] || \"\")}\n                </PlaceholderLabel>\n            );\n        }\n\n        if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        }\n\n        return (\n            <ValueLabel truncateType={optionTruncationType}>\n                {truncateValue(rangeType, getDisplayValue(rangeType))}\n            </ValueLabel>\n        );\n    };\n\n    const renderSelectorContent = (rangeType: RangeType) => (\n        <button\n            type=\"button\"\n            role=\"combobox\"\n            aria-labelledby={getButtonLabelledBy(rangeType)}\n            aria-describedby={ariaDescribedBy}\n            aria-expanded={isOpen && focusedInput === rangeType}\n            aria-controls={listboxId}\n            aria-disabled={disabled}\n            aria-readonly={readOnly}\n            onClick={handleSelectorClick(rangeType)}\n            onKeyDown={handleSelectorKeyDown(rangeType)}\n            ref={labelButtonRef[rangeType]}\n            tabIndex={0}\n            className={styles.rangeSelectorButton}\n        >\n            {renderLabel(rangeType)}\n        </button>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputWrapper\n                className={clsx(styles.styledInputWrapper, className)}\n                data-testid={testId}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n                focused={isOpen}\n            >\n                <VisuallyHidden id={fromLabelId}>\n                    {placeholders?.from || \"Select From\"}\n                </VisuallyHidden>\n                <VisuallyHidden id={toLabelId}>\n                    {placeholders?.to || \"Select To\"}\n                </VisuallyHidden>\n\n                <RangeInputInnerContainer\n                    currentActive={getCurrentFocused()}\n                    error={error}\n                >\n                    {renderSelectorContent(\"from\")}\n                    {renderSelectorContent(\"to\")}\n                </RangeInputInnerContainer>\n\n                {!isOpen &&\n                    selectedFromValue &&\n                    selectedToValue &&\n                    !readOnly &&\n                    !disabled && (\n                        <div\n                            className={inputWrapperStyles.clearButtonContainer}\n                        >\n                            <ClearButton\n                                onClick={handleClear}\n                                type=\"button\"\n                                aria-label=\"Clear\"\n                            />\n                        </div>\n                    )}\n            </InputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                ref={dropdownRef}\n                data-testid={`${testId}-dropdown`}\n                listboxId={listboxId}\n                ariaLabel={getDropdownAriaLabel()}\n                listItems={currentOptions}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                selectedItems={currentSelectedItems}\n                itemsLoadState={optionsLoadState[focusedInput as RangeType]}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                width={dropdownWidth}\n                matchElementWidth={!dropdownWidth}\n                enableSearch={enableSearch}\n                searchFunction={searchFunction}\n                searchPlaceholder={searchPlaceholder}\n                renderListItem={renderListItem}\n                renderCustomCallToAction={renderCustomCallToAction}\n            />\n        );\n    };\n\n    return (\n        <div id={id} {...otherProps}>\n            <DropdownListState>\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={isOpen}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle={false}\n                    offset={8}\n                    alignment={alignment}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                />\n            </DropdownListState>\n        </div>\n    );\n};\n"],"names":["InputRangeSelect","_a","selectedOptions","placeholders","from","to","options","disabled","className","readOnly","error","testId","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","selectedFromValue","setSelectedFromValue","useState","selectedToValue","setSelectedToValue","focusedInput","setFocusedInput","isOpen","labelButtonRef","useRef","dropdownRef","internalId","useId","listboxId","fromLabelId","toLabelId","useEffect","current","refocus","index","triggerOptionDisplayCallback","show","getDisplayValue","rangeType","selected","value","_b","toString","call","truncateValue","type","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","getCurrentFocused","currentOptions","useMemo","currentSelectedItems","openDropdownFor","focusButton","focus","getButtonLabelledBy","concatIds","handleSelectorClick","event","stopPropagation","preventDefault","handleSelectorKeyDown","key","handleListItemClick","item","extractedValue","undefined","handleDismiss","last","handleClear","renderLabel","_jsx","ValueLabel","truncateType","children","PlaceholderLabel","renderSelectorContent","role","onClick","onKeyDown","ref","tabIndex","styles.rangeSelectorButton","Object","assign","DropdownListState","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","clsx","styles.styledInputWrapper","focused","VisuallyHidden","RangeInputInnerContainer","currentActive","inputWrapperStyles.clearButtonContainer","ClearButton","renderDropdown","DropdownList","ariaLabel","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/input-range-select/input-range-select.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styledInputWrapper: import("@linaria/core").LinariaClassName;
+export declare const rangeSelectorButton: import("@linaria/core").LinariaClassName;

package/input-range-select/input-range-select.styles.js

@@ -0,0 +1,2 @@
+import"./input-range-select.styles_adbrbm.css";const e="s7h6auw",s="ryu6qy6";export{s as rangeSelectorButton,e as styledInputWrapper};
+//# sourceMappingURL=input-range-select.styles.js.map

package/input-range-select/input-range-select.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-range-select.styles.js","sources":["../../src/input-range-select/input-range-select.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Radius } from \"../theme\";\n\nexport const styledInputWrapper = css`\n    height: 3rem;\n`;\n\nexport const rangeSelectorButton = css`\n    appearance: none;\n    border: 0;\n    background: transparent;\n    display: flex;\n    flex: 1;\n    color: ${Colour.text};\n\n    &:focus,\n    &:active {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"border-focus\"]};\n        border-radius: ${Radius.sm};\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n    }\n`;\n"],"names":["styledInputWrapper","rangeSelectorButton"],"mappings":"iFAIO,MAAMA,EAAkB,UAIlBC,EAAmB"}

package/input-range-select/input-range-select.styles_adbrbm.css

@@ -0,0 +1,2 @@
+.s7h6auw{height:3rem;}
+.ryu6qy6{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border:0;background:transparent;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;color:var(--fds-colour-text);}.ryu6qy6:focus,.ryu6qy6:active{outline:none;}.ryu6qy6:focus-visible{outline:2px solid var(--fds-colour-border-focus);border-radius:var(--fds-radius-sm);}.ryu6qy6:disabled{cursor:not-allowed;}

package/input-range-select/types.d.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from "react";
 import type { InputSelectOptionsProps, InputSelectSharedProps } from "../input-select/types";
-import type { DropdownDisplayProps, DropdownSearchProps, ItemsLoadStateType } from "../shared/dropdown-list-v2/types";
+import type { DropdownDisplayProps, DropdownSearchProps, ItemsLoadStateType } from "../shared/dropdown-list/types";
 import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
 export interface InputRangeSelectOptionsProps<T> extends Omit<InputSelectOptionsProps<T>, "options" | "optionsLoadState"> {
     options: InputRangeProp<T[]>;

package/input-range-slider/input-range-slider.d.ts

@@ -1,2 +1,2 @@
 import type { InputRangeSliderProps } from "./types";
-export declare const InputRangeSlider: ({ value, min, max, step, minRange, numOfThumbs, colors, disabled, readOnly, ariaLabels, showSliderLabels, sliderLabelPrefix, sliderLabelSuffix, showIndicatorLabel, indicatorLabelPrefix, indicatorLabelSuffix, renderSliderLabel, onChange, onChangeEnd, ...otherProps }: InputRangeSliderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputRangeSlider: ({ id, value, min, max, step, minRange, numOfThumbs, colors, disabled, readOnly, showSliderLabels, sliderLabelPrefix, sliderLabelSuffix, showIndicatorLabel, indicatorLabelPrefix, indicatorLabelSuffix, ariaLabels, ariaDescriptions, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, renderSliderLabel, onChange, onChangeEnd, className, ...otherProps }: InputRangeSliderProps) => import("react/jsx-runtime").JSX.Element;

package/input-range-slider/input-range-slider.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as n,jsx as r}from"react/jsx-runtime";import{useState as i,useEffect as l}from"react";import{V3_Colour as a}from"../v3_theme/index.js";import{Wrapper as t,IndicatorLabelContainer as d,Slider as s,SliderTrack as o,SliderThumb as c,Knob as b,LabelContainer as u,LabelText as f}from"./input-range-slider.styles.js";const h=h=>{var{value:m,min:x=0,max:g=100,step:p=1,minRange:L,numOfThumbs:v=2,colors:$,disabled:O,readOnly:S,ariaLabels:j,showSliderLabels:y,sliderLabelPrefix:C,sliderLabelSuffix:w,showIndicatorLabel:I,indicatorLabelPrefix:P,indicatorLabelSuffix:T,renderSliderLabel:_,onChange:k,onChangeEnd:A}=h,E=e(h,["value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","ariaLabels","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","renderSliderLabel","onChange","onChangeEnd"]);const[M,R]=i(q()),D=function(){const e=function(){const e=O||S?a["border-disabled"]:a["border-strong"],n=O||S?a["border-selected-disabled"]:a["border-selected"];if(1===v)return[n,e];const r=[];r.push(e);for(let e=0;e<v-1;e++)r.push(n);return r.push(e),r}();return new Array(v+1).fill(0).map(((n,r)=>(null==$?void 0:$[r])||e[r]))}();l((()=>{m!==M&&R(q())}),[m]);function q(){if(m&&m.length===v)return m;const e=[];for(let n=0;n<v;n++)e.push(x+p*n);return e}const z=e=>_?_(e):n(f,{children:[C,e,w]});return n(t,Object.assign({},E,{children:[I&&r(d,{children:(()=>{let e="";if(1===M.length)e=`${M[0]}`;else if(2===M.length)e=`${M[0]} - ${M[1]}`;else if(M.length>2){e=`${Math.min(...M)} - ${Math.max(...M)}`}return n(f,{children:[P,e,T]})})()}),r(s,{step:p,min:x,max:g,value:M,disabled:O||S,onChange:(e,n)=>{if("number"==typeof e){const n=[e];R(n),null==k||k(n)}else{if(n>-1&&M[n]===e[n])return;const r=[...e];R(r),null==k||k(r)}},onAfterChange:e=>{if("number"==typeof e){const n=[e];R(n),null==A||A(n)}else{const n=[...e];R(n),null==A||A(n)}},minDistance:L,ariaLabel:j,renderThumb:(e,n)=>r(c,Object.assign({"data-testid":`slider-thumb-${n.index}`},e,{tabIndex:O?void 0:e.tabIndex,children:r(b,{$disabled:O,$readOnly:S})})),renderTrack:(e,n)=>r(o,Object.assign({"data-testid":`slider-track-${n.index}`},e,{$color:D[n.index]}))}),y&&n(u,{children:[r("div",{children:z(x)}),r("div",{children:z(g)})]})]}))};export{h as InputRangeSlider};
+import{__rest as e}from"../_virtual/_tslib.js";import{useState as r,useEffect as i,createElement as n}from"react";import{jsxs as t,jsx as a}from"react/jsx-runtime";import{clearAnnouncer as l,announce as s}from"@react-aria/live-announcer";import o from"clsx";import d from"react-slider";import{VisuallyHidden as u,concatIds as c}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as m}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as h}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"../theme/utils/use-media-query.js";import{Typography as f}from"../typography/index.js";import{indicatorLabelContainer as b,slider as p,labelContainer as v,wrapper as g,labelText as y}from"./input-range-slider.styles.js";import{Track as x,Thumb as $}from"./slider-components.js";const j=j=>{var{id:L,value:w,min:k=0,max:C=100,step:N=1,minRange:O=0,numOfThumbs:S=2,colors:A,disabled:D,readOnly:T,showSliderLabels:M,sliderLabelPrefix:P,sliderLabelSuffix:B,showIndicatorLabel:I,indicatorLabelPrefix:E,indicatorLabelSuffix:R,ariaLabels:U,ariaDescriptions:q,"aria-invalid":_,"aria-labelledby":F,"aria-describedby":H,renderSliderLabel:K,onChange:z,onChangeEnd:G,className:J}=j,Q=e(j,["id","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","ariaLabels","ariaDescriptions","aria-invalid","aria-labelledby","aria-describedby","renderSliderLabel","onChange","onChangeEnd","className"]);const[V,W]=r(le()),[X,Y]=r(null),Z=h(),ee=function(){const e=function(){const e=D||T?m["border-disabled"]:m["border-strong"],r=D||T?m["border-selected-disabled"]:m["border-selected"];if(1===S)return[r,e];const i=[e];for(let e=0;e<S-1;e++)i.push(r);return i.push(e),i}();return new Array(S+1).fill(0).map(((r,i)=>(null==A?void 0:A[i])||e[i]))}(),re=`${Z}-indicator`,ie=`${Z}-instruction`,ne=Array.from({length:S},((e,r)=>(null==U?void 0:U[r])||function(e){return 1===S?"":0===e?"Minimum value slider":e===S-1?"Maximum value slider":"Indeterminate value slider"}(r)));i((()=>{w!==V&&W(le())}),[w]);const te=(e,r)=>{if(D||T)return;const i=function(e,r){if(S<2)return"";const i=V[r],n=r>0?V[r-1]:void 0,t=r<V.length-1?V[r+1]:void 0,a=ne[r],l=r>0?ne[r-1]:void 0,s=r<ne.length-1?ne[r+1]:void 0;if(function(e){return["ArrowRight","ArrowUp","PageUp","End"].includes(e)}(e)&&void 0!==t&&i>=t-O)return`The ${se(a)} has reached its limit. Increase the ${oe(s)} to set a higher ${oe(a)}.`;if(function(e){return["ArrowLeft","ArrowDown","PageDown","Home"].includes(e)}(e)&&void 0!==n&&i<=n+O)return`The ${se(a)} has reached its limit. Decrease the ${oe(l)} to set a lower ${oe(a)}.`;return""}(e.key,r);i&&(l("assertive"),s(i,"assertive"))},ae=(e,r)=>{if(D||T)return;const i=Number(e.currentTarget.value),n=[...V];n[r]=function(e,r,i){const n=de(r,i),t=ue(r,i);return Math.min(t,Math.max(n,e))}(i,r,V),W(n),null==z||z(n),null==G||G(n)};function le(){if(w&&w.length===S)return w;const e=[];for(let r=0;r<S;r++)e.push(k+N*r);return e}function se(e){return e?e.toLowerCase():"slider"}function oe(e){return e?e.replace(/ slider$/i,"").toLowerCase():"slider"}function de(e,r=V){return 0===e?k:r[e-1]+O}function ue(e,r=V){return e===r.length-1?C:r[e+1]-O}const ce=e=>K?K(e):t(f.BodyBL,{className:y,children:[P,e,B]});return t("div",Object.assign({},Q,{id:L,role:"group","aria-labelledby":F,"aria-disabled":D,className:o(g,J),children:[!D&&!T&&a(u,{id:ie,children:"Use left and right arrow keys to adjust the slider."}),I&&a("div",{id:re,className:b,children:(()=>{let e="";if(1===V.length)e=`${V[0]}`;else if(2===V.length)e=`${V[0]} - ${V[1]}`;else if(V.length>2){e=`${Math.min(...V)} - ${Math.max(...V)}`}return t(f.BodyBL,{className:y,children:[E,e,R]})})()}),V.map(((e,r)=>{const i=`${Z}-thumb-label-${r}`,n=function(e){return null==q?void 0:q[e]}(r),l=n?`${Z}-thumb-description-${r}`:void 0;return t(u,{children:[l&&a("span",{id:l,children:n}),a("span",{id:i,children:ne[r]}),a("input",{"data-testid":`slider-input-${r}`,type:"range",min:de(r),max:ue(r),step:N,value:e,"aria-disabled":D||void 0,readOnly:T,"aria-labelledby":c(F,i),"aria-describedby":(o=l,c(H,I?re:void 0,D||T?void 0:ie,o)),"aria-valuetext":(s=e,`${P||""}${s}${B||""}`),"aria-invalid":_,onFocus:()=>Y(r),onBlur:()=>Y(null),onChange:e=>ae(e,r),onKeyDown:e=>{te(e,r)}})]},`native-slider-${r}`);var s,o})),a(d,{step:N,min:k,max:C,value:V,disabled:D||T,onChange:(e,r)=>{if(T||D)return;if("number"==typeof e){const r=[e];return W(r),void(null==z||z(r))}if(r>-1&&V[r]===e[r])return;const i=[...e];W(i),null==z||z(i)},onAfterChange:e=>{if(T||D)return;if("number"==typeof e){const r=[e];return W(r),void(null==G||G(r))}const r=[...e];W(r),null==G||G(r)},minDistance:O,"aria-hidden":!0,className:p,renderThumb:(e,r)=>n($,Object.assign({"data-testid":`slider-thumb-${r.index}`},e,{key:e.key,tabIndex:-1,"aria-hidden":!0,focused:X===r.index,disabled:D,readOnly:T})),renderTrack:(e,r)=>n(x,Object.assign({"data-testid":`slider-track-${r.index}`},e,{key:e.key,color:ee[r.index]}))}),M&&t("div",{className:v,children:[a("div",{children:ce(k)}),a("div",{children:ce(C)})]})]}))};export{j as InputRangeSlider};
 //# sourceMappingURL=input-range-slider.js.map

package/input-range-slider/input-range-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-range-slider.js","sources":["../../src/input-range-slider/input-range-slider.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { V3_Colour } from \"../v3_theme\";\nimport {\n    IndicatorLabelContainer,\n    Knob,\n    LabelContainer,\n    LabelText,\n    Slider,\n    SliderThumb,\n    SliderTrack,\n    Wrapper,\n} from \"./input-range-slider.styles\";\nimport type { InputRangeSliderProps } from \"./types\";\n\nexport const InputRangeSlider = ({\n    value,\n    min = 0,\n    max = 100,\n    step = 1,\n    minRange,\n    numOfThumbs = 2,\n    colors,\n    disabled,\n    readOnly,\n    ariaLabels,\n    showSliderLabels,\n    sliderLabelPrefix,\n    sliderLabelSuffix,\n    showIndicatorLabel,\n    indicatorLabelPrefix,\n    indicatorLabelSuffix,\n    renderSliderLabel,\n    onChange,\n    onChangeEnd,\n    ...otherProps\n}: InputRangeSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [selection, setSelection] = useState<number[]>(initialiseSelection());\n    const trackColors = getTrackColors();\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initialiseSelection());\n        }\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (value: number | readonly number[], index: number) => {\n        if (typeof value === \"number\") {\n            const val = [value];\n            setSelection(val);\n            onChange?.(val);\n        } else {\n            if (index > -1 && selection[index] === value[index]) {\n                // skip unnecessary update when dragging the start thumb across the end thumb\n                return;\n            }\n            const newSelection = [...value];\n            setSelection(newSelection);\n            onChange?.(newSelection);\n        }\n    };\n\n    const handleChangeEnd = (value: number | readonly number[]) => {\n        if (typeof value === \"number\") {\n            const val = [value];\n            setSelection(val);\n            onChangeEnd?.(val);\n        } else {\n            const newSelection = [...value];\n            setSelection(newSelection);\n            onChangeEnd?.(newSelection);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initialiseSelection() {\n        if (value && value.length === numOfThumbs) {\n            return value;\n        }\n\n        const values: number[] = [];\n        for (let i = 0; i < numOfThumbs; i++) {\n            values.push(min + step * i);\n        }\n        return values;\n    }\n\n    function getTrackColors() {\n        const defaultColors = getDefaultColors();\n        return new Array(numOfThumbs + 1).fill(0).map((_, i) => {\n            return colors?.[i] || defaultColors[i];\n        });\n    }\n\n    function getDefaultColors() {\n        const inactiveColor =\n            disabled || readOnly\n                ? V3_Colour[\"border-disabled\"]\n                : V3_Colour[\"border-strong\"];\n        const activeColor =\n            disabled || readOnly\n                ? V3_Colour[\"border-selected-disabled\"]\n                : V3_Colour[\"border-selected\"];\n\n        if (numOfThumbs === 1) {\n            return [activeColor, inactiveColor];\n        }\n\n        const defaultColors: typeof colors = [];\n        defaultColors.push(inactiveColor);\n        for (let i = 0; i < numOfThumbs - 1; i++) {\n            defaultColors.push(activeColor);\n        }\n        defaultColors.push(inactiveColor);\n        return defaultColors;\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const formatLabel = (value: number) => {\n        if (renderSliderLabel) {\n            return renderSliderLabel(value);\n        }\n\n        return (\n            <LabelText>\n                {sliderLabelPrefix}\n                {value}\n                {sliderLabelSuffix}\n            </LabelText>\n        );\n    };\n\n    const formatIndicationLabel = () => {\n        let formattedSelection = \"\";\n\n        if (selection.length === 1) {\n            formattedSelection = `${selection[0]}`;\n        } else if (selection.length === 2) {\n            formattedSelection = `${selection[0]} - ${selection[1]}`;\n        } else if (selection.length > 2) {\n            const min = Math.min(...selection);\n            const max = Math.max(...selection);\n            formattedSelection = `${min} - ${max}`;\n        }\n\n        return (\n            <LabelText>\n                {indicatorLabelPrefix}\n                {formattedSelection}\n                {indicatorLabelSuffix}\n            </LabelText>\n        );\n    };\n\n    return (\n        <Wrapper {...otherProps}>\n            {showIndicatorLabel && (\n                <IndicatorLabelContainer>\n                    {formatIndicationLabel()}\n                </IndicatorLabelContainer>\n            )}\n            <Slider\n                step={step}\n                min={min}\n                max={max}\n                value={selection}\n                disabled={disabled || readOnly}\n                onChange={handleChange}\n                onAfterChange={handleChangeEnd}\n                minDistance={minRange}\n                ariaLabel={ariaLabels}\n                renderThumb={(\n                    thumbProps: React.HTMLAttributes<HTMLDivElement>,\n                    state\n                ) => {\n                    return (\n                        <SliderThumb\n                            data-testid={`slider-thumb-${state.index}`}\n                            {...thumbProps}\n                            tabIndex={\n                                disabled ? undefined : thumbProps.tabIndex\n                            }\n                        >\n                            <Knob $disabled={disabled} $readOnly={readOnly} />\n                        </SliderThumb>\n                    );\n                }}\n                renderTrack={(\n                    trackProps: React.HTMLAttributes<HTMLDivElement>,\n                    state\n                ) => {\n                    return (\n                        <SliderTrack\n                            data-testid={`slider-track-${state.index}`}\n                            {...trackProps}\n                            $color={trackColors[state.index]}\n                        />\n                    );\n                }}\n            />\n            {showSliderLabels && (\n                <LabelContainer>\n                    <div>{formatLabel(min)}</div>\n                    <div>{formatLabel(max)}</div>\n                </LabelContainer>\n            )}\n        </Wrapper>\n    );\n};\n"],"names":["InputRangeSlider","_a","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","ariaLabels","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","renderSliderLabel","onChange","onChangeEnd","otherProps","__rest","selection","setSelection","useState","initialiseSelection","trackColors","defaultColors","inactiveColor","V3_Colour","activeColor","push","i","getDefaultColors","Array","fill","map","_","getTrackColors","useEffect","length","values","formatLabel","_jsxs","LabelText","children","Wrapper","Object","assign","_jsx","IndicatorLabelContainer","formattedSelection","Math","formatIndicationLabel","Slider","index","val","newSelection","onAfterChange","minDistance","ariaLabel","renderThumb","thumbProps","state","SliderThumb","tabIndex","undefined","Knob","$disabled","$readOnly","renderTrack","trackProps","SliderTrack","$color","LabelContainer"],"mappings":"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"}
+{"version":3,"file":"input-range-slider.js","sources":["../../src/input-range-slider/input-range-slider.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport ReactSlider from \"react-slider\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { Colour } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-range-slider.styles\";\nimport { Thumb, Track } from \"./slider-components\";\nimport type { InputRangeSliderProps } from \"./types\";\n\nexport const InputRangeSlider = ({\n    id,\n    value,\n    min = 0,\n    max = 100,\n    step = 1,\n    minRange = 0,\n    numOfThumbs = 2,\n    colors,\n    disabled,\n    readOnly,\n    showSliderLabels,\n    sliderLabelPrefix,\n    sliderLabelSuffix,\n    showIndicatorLabel,\n    indicatorLabelPrefix,\n    indicatorLabelSuffix,\n    ariaLabels,\n    ariaDescriptions,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    renderSliderLabel,\n    onChange,\n    onChangeEnd,\n    className,\n    ...otherProps\n}: InputRangeSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [selection, setSelection] = useState<number[]>(initialiseSelection());\n    const [focusedThumbIndex, setFocusedThumbIndex] = useState<number | null>(\n        null\n    );\n    const internalId = useId();\n    const trackColors = getTrackColors();\n    const indicatorTextId = `${internalId}-indicator`;\n    const instructionTextId = `${internalId}-instruction`;\n    const resolvedAriaLabels = getResolvedAriaLabels();\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initialiseSelection());\n        }\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (value: number | readonly number[], index: number) => {\n        if (readOnly || disabled) {\n            return;\n        }\n\n        if (typeof value === \"number\") {\n            const nextValue = [value];\n            setSelection(nextValue);\n            onChange?.(nextValue);\n            return;\n        }\n\n        if (index > -1 && selection[index] === value[index]) {\n            // skip unnecessary update when dragging the start thumb across the end thumb\n            return;\n        }\n\n        const nextValue = [...value];\n        setSelection(nextValue);\n        onChange?.(nextValue);\n    };\n\n    const handleChangeEnd = (value: number | readonly number[]) => {\n        if (readOnly || disabled) {\n            return;\n        }\n\n        if (typeof value === \"number\") {\n            const val = [value];\n            setSelection(val);\n            onChangeEnd?.(val);\n            return;\n        }\n\n        const newSelection = [...value];\n        setSelection(newSelection);\n        onChangeEnd?.(newSelection);\n    };\n\n    const handleThumbKeyDown = (\n        event: React.KeyboardEvent<HTMLDivElement>,\n        index: number\n    ) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        const message = getBlockedMovementMessage(event.key, index);\n\n        if (!message) {\n            return;\n        }\n\n        clearAnnouncer(\"assertive\");\n        announce(message, \"assertive\");\n    };\n\n    const handleNativeRangeChange = (\n        event: React.ChangeEvent<HTMLInputElement>,\n        index: number\n    ) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        const nextRawValue = Number(event.currentTarget.value);\n\n        const nextSelection = [...selection];\n        nextSelection[index] = clampValueForThumb(\n            nextRawValue,\n            index,\n            selection\n        );\n\n        setSelection(nextSelection);\n        onChange?.(nextSelection);\n        onChangeEnd?.(nextSelection);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initialiseSelection() {\n        if (value && value.length === numOfThumbs) {\n            return value;\n        }\n\n        const values: number[] = [];\n        for (let i = 0; i < numOfThumbs; i++) {\n            values.push(min + step * i);\n        }\n        return values;\n    }\n\n    function getResolvedAriaLabels() {\n        return Array.from({ length: numOfThumbs }, (_, index) => {\n            return ariaLabels?.[index] || getDefaultAriaLabel(index);\n        });\n    }\n\n    function getDefaultAriaLabel(index: number) {\n        if (numOfThumbs === 1) {\n            return \"\";\n        }\n\n        if (index === 0) {\n            return \"Minimum value slider\";\n        }\n\n        if (index === numOfThumbs - 1) {\n            return \"Maximum value slider\";\n        }\n\n        return \"Indeterminate value slider\";\n    }\n\n    function getThumbDescriptionText(index: number) {\n        return ariaDescriptions?.[index];\n    }\n\n    function getTrackColors() {\n        const defaultColors = getDefaultColors();\n        return new Array(numOfThumbs + 1).fill(0).map((_, i) => {\n            return colors?.[i] || defaultColors[i];\n        });\n    }\n\n    function getDefaultColors() {\n        const inactiveColor =\n            disabled || readOnly\n                ? Colour[\"border-disabled\"]\n                : Colour[\"border-strong\"];\n        const activeColor =\n            disabled || readOnly\n                ? Colour[\"border-selected-disabled\"]\n                : Colour[\"border-selected\"];\n\n        if (numOfThumbs === 1) {\n            return [activeColor, inactiveColor];\n        }\n\n        const defaultColors: typeof colors = [inactiveColor];\n\n        for (let index = 0; index < numOfThumbs - 1; index++) {\n            defaultColors.push(activeColor);\n        }\n\n        defaultColors.push(inactiveColor);\n        return defaultColors;\n    }\n\n    function getValueText(currentValue: number) {\n        return `${sliderLabelPrefix || \"\"}${currentValue}${\n            sliderLabelSuffix || \"\"\n        }`;\n    }\n\n    function getThumbDescriptionIds(thumbDescriptionId?: string) {\n        return concatIds(\n            ariaDescribedBy,\n            showIndicatorLabel ? indicatorTextId : undefined,\n            disabled || readOnly ? undefined : instructionTextId,\n            thumbDescriptionId\n        );\n    }\n\n    function isIncreaseKey(key: string) {\n        return [\"ArrowRight\", \"ArrowUp\", \"PageUp\", \"End\"].includes(key);\n    }\n\n    function isDecreaseKey(key: string) {\n        return [\"ArrowLeft\", \"ArrowDown\", \"PageDown\", \"Home\"].includes(key);\n    }\n\n    function getSliderTypeText(label?: string) {\n        if (!label) {\n            return \"slider\";\n        }\n\n        return label.toLowerCase();\n    }\n\n    function getSliderTargetText(label?: string) {\n        if (!label) {\n            return \"slider\";\n        }\n\n        return label.replace(/ slider$/i, \"\").toLowerCase();\n    }\n\n    function getBlockedMovementMessage(key: string, index: number) {\n        if (numOfThumbs < 2) {\n            return \"\";\n        }\n\n        const currentValue = selection[index];\n        const previousValue = index > 0 ? selection[index - 1] : undefined;\n        const nextValue =\n            index < selection.length - 1 ? selection[index + 1] : undefined;\n\n        const currentLabel = resolvedAriaLabels[index];\n        const previousLabel =\n            index > 0 ? resolvedAriaLabels[index - 1] : undefined;\n        const nextLabel =\n            index < resolvedAriaLabels.length - 1\n                ? resolvedAriaLabels[index + 1]\n                : undefined;\n\n        if (isIncreaseKey(key)) {\n            if (\n                nextValue !== undefined &&\n                currentValue >= nextValue - minRange\n            ) {\n                return `The ${getSliderTypeText(\n                    currentLabel\n                )} has reached its limit. Increase the ${getSliderTargetText(\n                    nextLabel\n                )} to set a higher ${getSliderTargetText(currentLabel)}.`;\n            }\n        }\n\n        if (isDecreaseKey(key)) {\n            if (\n                previousValue !== undefined &&\n                currentValue <= previousValue + minRange\n            ) {\n                return `The ${getSliderTypeText(\n                    currentLabel\n                )} has reached its limit. Decrease the ${getSliderTargetText(\n                    previousLabel\n                )} to set a lower ${getSliderTargetText(currentLabel)}.`;\n            }\n        }\n\n        return \"\";\n    }\n\n    function getThumbMin(index: number, values = selection) {\n        if (index === 0) {\n            return min;\n        }\n\n        return values[index - 1] + minRange;\n    }\n\n    function getThumbMax(index: number, values = selection) {\n        if (index === values.length - 1) {\n            return max;\n        }\n\n        return values[index + 1] - minRange;\n    }\n\n    function clampValueForThumb(\n        nextValue: number,\n        index: number,\n        values: number[]\n    ) {\n        const minAllowed = getThumbMin(index, values);\n        const maxAllowed = getThumbMax(index, values);\n\n        return Math.min(maxAllowed, Math.max(minAllowed, nextValue));\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const formatLabel = (value: number) => {\n        if (renderSliderLabel) {\n            return renderSliderLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL className={styles.labelText}>\n                {sliderLabelPrefix}\n                {value}\n                {sliderLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const formatIndicationLabel = () => {\n        let formattedSelection = \"\";\n\n        if (selection.length === 1) {\n            formattedSelection = `${selection[0]}`;\n        } else if (selection.length === 2) {\n            formattedSelection = `${selection[0]} - ${selection[1]}`;\n        } else if (selection.length > 2) {\n            const minValue = Math.min(...selection);\n            const maxValue = Math.max(...selection);\n            formattedSelection = `${minValue} - ${maxValue}`;\n        }\n\n        return (\n            <Typography.BodyBL className={styles.labelText}>\n                {indicatorLabelPrefix}\n                {formattedSelection}\n                {indicatorLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    return (\n        <div\n            {...otherProps}\n            id={id}\n            role=\"group\"\n            aria-labelledby={ariaLabelledBy}\n            aria-disabled={disabled}\n            className={clsx(styles.wrapper, className)}\n        >\n            {!disabled && !readOnly && (\n                <VisuallyHidden id={instructionTextId}>\n                    Use left and right arrow keys to adjust the slider.\n                </VisuallyHidden>\n            )}\n\n            {showIndicatorLabel && (\n                <div\n                    id={indicatorTextId}\n                    className={styles.indicatorLabelContainer}\n                >\n                    {formatIndicationLabel()}\n                </div>\n            )}\n\n            {selection.map((thumbValue, index) => {\n                const thumbLabelTextId = `${internalId}-thumb-label-${index}`;\n                const thumbDescriptionText = getThumbDescriptionText(index);\n                const thumbDescriptionTextId = thumbDescriptionText\n                    ? `${internalId}-thumb-description-${index}`\n                    : undefined;\n\n                return (\n                    <VisuallyHidden key={`native-slider-${index}`}>\n                        {thumbDescriptionTextId && (\n                            <span id={thumbDescriptionTextId}>\n                                {thumbDescriptionText}\n                            </span>\n                        )}\n                        <span id={thumbLabelTextId}>\n                            {resolvedAriaLabels[index]}\n                        </span>\n\n                        <input\n                            data-testid={`slider-input-${index}`}\n                            type=\"range\"\n                            min={getThumbMin(index)}\n                            max={getThumbMax(index)}\n                            step={step}\n                            value={thumbValue}\n                            aria-disabled={disabled || undefined}\n                            readOnly={readOnly}\n                            aria-labelledby={concatIds(\n                                ariaLabelledBy,\n                                thumbLabelTextId\n                            )}\n                            aria-describedby={getThumbDescriptionIds(\n                                thumbDescriptionTextId\n                            )}\n                            aria-valuetext={getValueText(thumbValue)}\n                            aria-invalid={ariaInvalid}\n                            onFocus={() => setFocusedThumbIndex(index)}\n                            onBlur={() => setFocusedThumbIndex(null)}\n                            onChange={(event) =>\n                                handleNativeRangeChange(event, index)\n                            }\n                            onKeyDown={(event) => {\n                                handleThumbKeyDown(event, index);\n                            }}\n                        />\n                    </VisuallyHidden>\n                );\n            })}\n\n            {/* Native range inputs provide the accessible interaction model.\n                The visible react-slider is presentation-only. */}\n            <ReactSlider\n                step={step}\n                min={min}\n                max={max}\n                value={selection}\n                disabled={disabled || readOnly}\n                onChange={handleChange}\n                onAfterChange={handleChangeEnd}\n                minDistance={minRange}\n                aria-hidden\n                className={styles.slider}\n                renderThumb={(thumbProps, state) => {\n                    return (\n                        <Thumb\n                            data-testid={`slider-thumb-${state.index}`}\n                            {...thumbProps}\n                            key={thumbProps.key}\n                            tabIndex={-1}\n                            aria-hidden\n                            focused={focusedThumbIndex === state.index}\n                            disabled={disabled}\n                            readOnly={readOnly}\n                        />\n                    );\n                }}\n                renderTrack={(trackProps, state) => {\n                    return (\n                        <Track\n                            data-testid={`slider-track-${state.index}`}\n                            {...trackProps}\n                            key={trackProps.key}\n                            color={trackColors[state.index]}\n                        />\n                    );\n                }}\n            />\n\n            {showSliderLabels && (\n                <div className={styles.labelContainer}>\n                    <div>{formatLabel(min)}</div>\n                    <div>{formatLabel(max)}</div>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["InputRangeSlider","_a","id","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","ariaLabels","ariaDescriptions","ariaInvalid","ariaLabelledBy","ariaDescribedBy","renderSliderLabel","onChange","onChangeEnd","className","otherProps","__rest","selection","setSelection","useState","initialiseSelection","focusedThumbIndex","setFocusedThumbIndex","internalId","useId","trackColors","defaultColors","inactiveColor","Colour","activeColor","index","push","getDefaultColors","Array","fill","map","_","i","getTrackColors","indicatorTextId","instructionTextId","resolvedAriaLabels","from","length","getDefaultAriaLabel","useEffect","handleThumbKeyDown","event","message","key","currentValue","previousValue","undefined","nextValue","currentLabel","previousLabel","nextLabel","includes","isIncreaseKey","getSliderTypeText","getSliderTargetText","isDecreaseKey","getBlockedMovementMessage","clearAnnouncer","announce","handleNativeRangeChange","nextRawValue","Number","currentTarget","nextSelection","values","minAllowed","getThumbMin","maxAllowed","getThumbMax","Math","clampValueForThumb","label","toLowerCase","replace","formatLabel","_jsxs","Typography","BodyBL","styles.labelText","children","Object","assign","role","clsx","styles.wrapper","_jsx","VisuallyHidden","styles.indicatorLabelContainer","formattedSelection","formatIndicationLabel","thumbValue","thumbLabelTextId","thumbDescriptionText","getThumbDescriptionText","thumbDescriptionTextId","type","concatIds","thumbDescriptionId","onFocus","onBlur","onKeyDown","ReactSlider","onAfterChange","val","newSelection","minDistance","styles.slider","renderThumb","thumbProps","state","_createElement","Thumb","tabIndex","focused","renderTrack","trackProps","Track","color","styles.labelContainer"],"mappings":"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"}