@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

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

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

package/cjs/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 { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport isEqual from \"lodash/isEqual\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport {\n    ExpandableElement,\n    NestedDropdownList,\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n    buildKeyPathToSet,\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.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { StringHelper, useId } from \"../util\";\nimport { SelectedItem, getSelectedItems, getSelectedSubItems } from \"./helpers\";\nimport { 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":["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","$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 {\n    InputNestedMultiSelectProps,\n    InputNestedMultiSelectValue,\n    InputNestedMultiSelectValues,\n} from \"./types\";\n\n// @catalog\n/**\n * A multi-select input that presents options in a nested hierarchy, up to three levels deep.\n *\n * Use `InputNestedMultiSelect` when users need to choose multiple values from a\n * hierarchical option tree. Selecting a parent item automatically selects all its\n * leaf descendants; deselecting a parent removes all its descendants from the\n * selection.\n * @keywords combobox, dropdown, field, form, hierarchical, input, multi-value, multiple, tree\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    type NestedValue = InputNestedMultiSelectValue<V1, V2, V3>;\n\n    const { multiSelectedLabel } = customLabels || {};\n    const options = _options as NestedDropdownListItemProps<NestedValue>[];\n    const [selectedKeyPaths, setSelectedKeyPaths] = useState<Set<string>>(\n        _selectedKeyPaths\n            ? buildKeyPathToSet(_selectedKeyPaths)\n            : new Set<string>()\n    );\n    const [selectedItems, setSelectedItems] = useState<\n        SelectedItem<NestedValue>[]\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<NestedValue>[]\n    ) => {\n        const selectedItems: SelectedItem<NestedValue>[] = items.map(\n            (item) => ({\n                keyPath: item.keyPath,\n                label: item.item.label,\n                value: item.item.value,\n            })\n        );\n        setSelectedKeyPaths(buildKeyPathToSet(keyPaths));\n        setSelectedItems(selectedItems);\n        performOnSelectOptions(keyPaths, selectedItems);\n    };\n\n    const handleListItemClick = (\n        listItem: NestedDropdownListLocalItem<NestedValue>\n    ) => {\n        const newSelectedItems: SelectedItem<NestedValue>[] =\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<NestedValue>[]\n    ) => {\n        if (onSelectOptions) {\n            const returnValue: InputNestedMultiSelectValues<V1, V2, V3> =\n                items.map((item) => item.value);\n            onSelectOptions(keyPaths, returnValue);\n        }\n    };\n\n    const getNewSelection = (\n        item: NestedDropdownListLocalItem<NestedValue>\n    ): SelectedItem<NestedValue>[] => {\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":["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/cjs/input-nested-select/input-nested-select.js

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

package/cjs/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 { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport {\n    ExpandableElement,\n    NestedDropdownList,\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n    buildKeyPathToSet,\n    findItemByKeyPath,\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.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { StringHelper, useId } from \"../util\";\nimport {\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":["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","$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 { InputNestedSelectProps } from \"./types\";\n\ninterface SelectedItemType<V1, V2, V3> {\n    label: string;\n    value: V1 | V2 | V3;\n}\n\n// @catalog\n/**\n * A single-select input that presents options in a hierarchy, up to three levels deep.\n *\n * Use `InputNestedSelect` when users need to choose a value from a\n * hierarchical option tree. The dropdown renders as an expandable tree.\n * Parent nodes collapse or expand their children, and only one leaf or category\n * value can be selected at a time.\n * @keywords combobox, dropdown, field, form, hierarchical, input, tree\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":["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/cjs/input-range-select/input-range-select.js

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

package/cjs/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 React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { ClearIcon } from \"../input/input.style\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport {\n    DropdownList,\n    DropdownListApi,\n    DropdownListState,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    PlaceholderLabel,\n    ValueLabel,\n    Wrapper,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport {\n    ClearIconContainer,\n    RangeSelectorButton,\n    StyledInputWrapper,\n} from \"./input-range-select.style\";\nimport { 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    isOptionDisabled,\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        <RangeSelectorButton\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        >\n            {renderLabel(rangeType)}\n        </RangeSelectorButton>\n    );\n\n    const renderElement = () => {\n        return (\n            <StyledInputWrapper\n                className={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                        <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                ariaLabel={getDropdownAriaLabel()}\n                listItems={currentOptions}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                isOptionDisabled={isOptionDisabled}\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":["_a","selectedOptions","placeholders","from","to","options","disabled","className","readOnly","error","testId","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","isOptionDisabled","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","rangeLabelId","concatIds","handleSelectorClick","event","stopPropagation","preventDefault","handleSelectorKeyDown","key","handleListItemClick","item","extractedValue","undefined","handleDismiss","last","handleClear","renderLabel","_jsx","ValueLabel","$truncateType","PlaceholderLabel","renderSelectorContent","RangeSelectorButton","role","onClick","onKeyDown","ref","tabIndex","children","Wrapper","Object","assign","DropdownListState","ElementWithDropdown","enabled","renderElement","_jsxs","StyledInputWrapper","$disabled","$readOnly","$focused","VisuallyHidden","RangeInputInnerContainer","currentActive","ClearIconContainer","ClearIcon","renderDropdown","DropdownList","ariaLabel","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\n// @catalog\n/**\n * A paired combobox input for selecting a start and end value from dropdown lists.\n *\n * Use `InputRangeSelect` when a consumer must choose a range by picking two\n * values — one for \"from\" and one for \"to\" — each from their own option list.\n * @keywords combobox, dropdown, field, form, input, pair, range\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    isOptionDisabled,\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                isOptionDisabled={isOptionDisabled}\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":["_a","selectedOptions","placeholders","from","to","options","disabled","className","readOnly","error","testId","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","isOptionDisabled","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","rangeLabelId","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/cjs/input-range-select/input-range-select.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./input-range-select.styles_adbrbm.css");exports.rangeSelectorButton="ryu6qy6",exports.styledInputWrapper="s7h6auw";
+//# sourceMappingURL=input-range-select.styles.js.map

package/cjs/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":[],"mappings":"6HAQgC,qCAJD"}

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

@@ -0,0 +1,2 @@
+@layer fds{.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/cjs/input-range-slider/input-range-slider.js

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