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

package/cjs/input-group/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","sources":["../../../src/input-group/input-group.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    AddonWrapper,\n    LabelAddonContainer,\n    MainInput,\n    NoAddonWrapper,\n} from \"./input-group.style\";\nimport { InputGroupListAddon } from \"./input-group-list-addon\";\nimport type {\n    CustomAddon,\n    InputGroupProps,\n    LabelAddon,\n    ListAddon,\n} from \"./types\";\n\nconst Component = <T, V>(\n    { addon, error, className, ...otherProps }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    const renderNoAddons = () => (\n        <NoAddonWrapper\n            $disabled={otherProps.disabled}\n            $error={error}\n            $readOnly={otherProps.readOnly}\n            data-testid={otherProps[\"data-testid\"]}\n            className={className}\n            $noBorder={otherProps.noBorder}\n        >\n            <MainInput\n                ref={ref}\n                {...otherProps}\n                data-testid=\"input\"\n                styleType=\"no-border\"\n            />\n        </NoAddonWrapper>\n    );\n\n    if (addon) {\n        const { type = \"label\", position = \"left\" } = addon;\n        const { allowClear } = otherProps;\n\n        switch (type) {\n            case \"list\": {\n                const listAddon = addon.attributes as ListAddon<T, V>;\n                if (listAddon.options && listAddon.options.length > 0) {\n                    return (\n                        <InputGroupListAddon\n                            ref={ref}\n                            addon={addon}\n                            error={error}\n                            className={className}\n                            noBorder={otherProps.noBorder}\n                            {...otherProps}\n                        />\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n            case \"custom\": {\n                const customAddon = addon.attributes as CustomAddon;\n                if (customAddon.children) {\n                    return (\n                        <AddonWrapper\n                            $error={error}\n                            $disabled={otherProps.disabled}\n                            $readOnly={otherProps.readOnly}\n                            data-testid={otherProps[\"data-testid\"]}\n                            $position={position}\n                            className={className}\n                            $noBorder={otherProps.noBorder}\n                        >\n                            <LabelAddonContainer\n                                data-testid=\"addon\"\n                                $disabled={otherProps.disabled}\n                                $readOnly={otherProps.readOnly}\n                                $position={position}\n                            >\n                                {customAddon.children}\n                            </LabelAddonContainer>\n                            <MainInput\n                                ref={ref}\n                                {...otherProps}\n                                allowClear={allowClear && position !== \"right\"}\n                                error={error}\n                                data-testid=\"input\"\n                                styleType=\"no-border\"\n                            />\n                        </AddonWrapper>\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n            default: {\n                const labelAddon = addon.attributes as LabelAddon;\n                if (labelAddon.value) {\n                    return (\n                        <AddonWrapper\n                            $disabled={otherProps.disabled}\n                            $error={error}\n                            $readOnly={otherProps.readOnly}\n                            data-testid={otherProps[\"data-testid\"]}\n                            $position={position}\n                            className={className}\n                            $noBorder={otherProps.noBorder}\n                        >\n                            <LabelAddonContainer\n                                data-testid=\"addon\"\n                                $disabled={otherProps.disabled}\n                                $readOnly={otherProps.readOnly}\n                                $position={position}\n                            >\n                                {labelAddon.value}\n                            </LabelAddonContainer>\n                            <MainInput\n                                ref={ref}\n                                {...otherProps}\n                                allowClear={allowClear && position !== \"right\"}\n                                error={error}\n                                data-testid=\"input\"\n                                styleType=\"no-border\"\n                            />\n                        </AddonWrapper>\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n        }\n    } else {\n        return renderNoAddons();\n    }\n};\n\nexport const InputGroup = React.forwardRef(Component);\n"],"names":["InputGroup","React","forwardRef","_a","ref","addon","error","className","otherProps","__rest","renderNoAddons","_jsx","NoAddonWrapper","$disabled","disabled","$error","readOnly","noBorder","children","MainInput","Object","assign","styleType","type","position","allowClear","listAddon","attributes","options","length","InputGroupListAddon","customAddon","_jsxs","AddonWrapper","$readOnly","$position","$noBorder","LabelAddonContainer","labelAddon","value"],"mappings":"2PAgBA,MAwHaA,OAAaC,QAAMC,YAxHd,CACdC,EACAC,SADAC,MAAEA,EAAKC,MAAEA,EAAKC,UAAEA,KAAcC,EAAUC,EAAAA,OAAAN,EAAxC,CAAA,QAAA,QAAA,cAGA,MAAMO,EAAiB,IACnBC,MAACC,EAAAA,eAAc,CAAAC,UACAL,EAAWM,SAAQC,OACtBT,YACGE,EAAWQ,SAAQ,cACjBR,EAAW,eACxBD,UAAWA,YACAC,EAAWS,SAAQC,SAE9BP,EAAAA,IAACQ,EAAAA,UAASC,OAAAC,OAAA,CACNjB,IAAKA,GACDI,EAAU,CAAA,cACF,QACZc,UAAU,iBAKtB,IAAIjB,EA8FA,OAAOK,IA9FA,CACP,MAAMa,KAAEA,EAAO,QAAOC,SAAEA,EAAW,QAAWnB,GACxCoB,WAAEA,GAAejB,EAEvB,OAAQe,GACJ,IAAK,OAAQ,CACT,MAAMG,EAAYrB,EAAMsB,WACxB,OAAID,EAAUE,SAAWF,EAAUE,QAAQC,OAAS,EAE5ClB,EAAAA,IAACmB,EAAAA,oBAAmBV,OAAAC,OAAA,CAChBjB,IAAKA,EACLC,MAAOA,EACPC,MAAOA,EACPC,UAAWA,EACXU,SAAUT,EAAWS,UACjBT,IAILE,GAEf,CACA,IAAK,SAAU,CACX,MAAMqB,EAAc1B,EAAMsB,WAC1B,OAAII,EAAYb,SAERc,EAAAA,KAACC,EAAAA,aAAY,CAAAlB,OACDT,YACGE,EAAWM,SAAQoB,UACnB1B,EAAWQ,SAAQ,cACjBR,EAAW,eAAc2B,UAC3BX,EACXjB,UAAWA,EAAS6B,UACT5B,EAAWS,SAAQC,SAAA,CAE9BP,EAAAA,IAAC0B,EAAAA,oBAAmB,CAAA,cACJ,kBACD7B,EAAWM,SAAQoB,UACnB1B,EAAWQ,mBACXQ,EAAQN,SAElBa,EAAYb,WAEjBP,EAAAA,IAACQ,EAAAA,yBACGf,IAAKA,GACDI,EAAU,CACdiB,WAAYA,GAA2B,UAAbD,EAC1BlB,MAAOA,EAAK,cACA,QACZgB,UAAU,kBAKfZ,GAEf,CACA,QAAS,CACL,MAAM4B,EAAajC,EAAMsB,WACzB,OAAIW,EAAWC,MAEPP,EAAAA,KAACC,EAAAA,aAAY,CAAApB,UACEL,EAAWM,SAAQC,OACtBT,EAAK4B,UACF1B,EAAWQ,SAAQ,cACjBR,EAAW,eAAc2B,UAC3BX,EACXjB,UAAWA,EAAS6B,UACT5B,EAAWS,SAAQC,SAAA,CAE9BP,EAAAA,IAAC0B,EAAAA,oBAAmB,CAAA,cACJ,kBACD7B,EAAWM,SAAQoB,UACnB1B,EAAWQ,mBACXQ,EAAQN,SAElBoB,EAAWC,QAEhB5B,EAAAA,IAACQ,EAAAA,yBACGf,IAAKA,GACDI,EAAU,CACdiB,WAAYA,GAA2B,UAAbD,EAC1BlB,MAAOA,EAAK,cACA,QACZgB,UAAU,kBAKfZ,GAEf,EAER,CAEA"}
+{"version":3,"file":"input-group.js","sources":["../../../src/input-group/input-group.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-group.styles\";\nimport { InputGroupListAddon } from \"./input-group-list-addon\";\nimport type {\n    CustomAddon,\n    InputGroupProps,\n    LabelAddon,\n    ListAddon,\n} from \"./types\";\n\nconst Component = <T, V>(\n    {\n        addon,\n        error,\n        className,\n        noBorder,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        ...otherProps\n    }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const internalId = useId();\n    const addonId = `${internalId}-addon`;\n    const ariaLabelId = `${internalId}-ariaLabelId`;\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderNoAddons = () => (\n        <InputBox\n            disabled={otherProps.disabled}\n            error={error}\n            readOnly={otherProps.readOnly}\n            noBorder={noBorder}\n            data-testid={otherProps[\"data-testid\"]}\n            className={clsx(styles.noAddonWrapper, className)}\n            data-read-only={otherProps.readOnly}\n            data-no-border={noBorder}\n        >\n            <VisuallyHidden aria-hidden id={ariaLabelId}>\n                {ariaLabel}\n            </VisuallyHidden>\n            <Input\n                ref={ref}\n                {...otherProps}\n                data-testid=\"input\"\n                styleType=\"no-border\"\n                aria-labelledby={concatIds(ariaLabelId, ariaLabelledBy)}\n            />\n        </InputBox>\n    );\n\n    const renderWithAddon = (\n        addonContent: React.ReactNode,\n        position: \"left\" | \"right\",\n        allowClear?: boolean\n    ) => (\n        <InputBox\n            disabled={otherProps.disabled}\n            error={error}\n            readOnly={otherProps.readOnly}\n            noBorder={noBorder}\n            data-testid={otherProps[\"data-testid\"]}\n            className={clsx(styles.addonWrapper, className)}\n            data-read-only={otherProps.readOnly}\n            data-no-border={noBorder}\n            data-position={position}\n        >\n            <div\n                data-testid=\"addon\"\n                id={addonId}\n                className={styles.labelAddonContainer}\n                data-disabled={otherProps.disabled}\n                data-read-only={otherProps.readOnly}\n                data-position={position}\n            >\n                {addonContent}\n            </div>\n            <VisuallyHidden aria-hidden id={ariaLabelId}>\n                {ariaLabel}\n            </VisuallyHidden>\n            <Input\n                ref={ref}\n                {...otherProps}\n                aria-labelledby={concatIds(\n                    ariaLabelId,\n                    ariaLabelledBy,\n                    addonId\n                )}\n                allowClear={allowClear && position !== \"right\"}\n                error={error}\n                data-testid=\"input\"\n                styleType=\"no-border\"\n            />\n        </InputBox>\n    );\n\n    if (addon) {\n        const { type = \"label\", position = \"left\" } = addon;\n        const { allowClear } = otherProps;\n\n        switch (type) {\n            case \"list\": {\n                const listAddon = addon.attributes as ListAddon<T, V>;\n                if (listAddon.options && listAddon.options.length > 0) {\n                    return (\n                        <InputGroupListAddon\n                            ref={ref}\n                            addon={addon}\n                            error={error}\n                            className={className}\n                            noBorder={noBorder}\n                            aria-label={ariaLabel}\n                            aria-labelledby={ariaLabelledBy}\n                            {...otherProps}\n                        />\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n\n            case \"custom\": {\n                const customAddon = addon.attributes as CustomAddon;\n                if (customAddon.children) {\n                    return renderWithAddon(\n                        customAddon.children,\n                        position,\n                        allowClear\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n            default: {\n                const labelAddon = addon.attributes as LabelAddon;\n                if (labelAddon.value) {\n                    return renderWithAddon(\n                        labelAddon.value,\n                        position,\n                        allowClear\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n        }\n    } else {\n        return renderNoAddons();\n    }\n};\n\n// @catalog\n/**\n * A single-line text input optionally paired with a static label, a custom element, or a\n * dropdown list selector.\n *\n * Use `InputGroup` when the input needs contextual decoration such as a unit label,\n * a country-code dropdown, or a fully custom slot.\n * @keywords field, form, input, prefix, suffix\n */\nexport const InputGroup = React.forwardRef(Component);\n"],"names":["InputGroup","React","forwardRef","_a","ref","addon","error","className","noBorder","ariaLabel","ariaLabelledBy","otherProps","__rest","internalId","useId","addonId","ariaLabelId","renderNoAddons","_jsxs","InputBox","disabled","readOnly","clsx","styles.noAddonWrapper","_jsx","VisuallyHidden","id","children","Input","Object","assign","styleType","concatIds","renderWithAddon","addonContent","position","allowClear","styles.addonWrapper","styles.labelAddonContainer","type","listAddon","attributes","options","length","InputGroupListAddon","customAddon","labelAddon","value"],"mappings":"0mBAgBA,MA2JaA,OAAaC,QAAMC,YA3Jd,CACdC,EASAC,SATAC,MACIA,EAAKC,MACLA,EAAKC,UACLA,EAASC,SACTA,EACA,aAAcC,EACd,kBAAmBC,GAAcP,EAC9BQ,EAAUC,EAAAA,OAAAT,EAPjB,yEAcA,MAAMU,EAAaC,EAAAA,QACbC,EAAU,GAAGF,UACbG,EAAc,GAAGH,gBAKjBI,EAAiB,IACnBC,EAAAA,KAACC,EAAAA,SAAQ,CACLC,SAAUT,EAAWS,SACrBd,MAAOA,EACPe,SAAUV,EAAWU,SACrBb,SAAUA,gBACGG,EAAW,eACxBJ,UAAWe,EAAAA,QAAKC,EAAAA,eAAuBhB,oBACvBI,EAAWU,SAAQ,iBACnBb,YAEhBgB,MAACC,EAAAA,eAAc,CAAA,eAAA,EAAaC,GAAIV,EAAWW,SACtClB,IAELe,EAAAA,IAACI,EAAAA,MAAKC,OAAAC,OAAA,CACF1B,IAAKA,GACDO,iBACQ,QACZoB,UAAU,8BACOC,EAAAA,UAAUhB,EAAaN,SAK9CuB,EAAkB,CACpBC,EACAC,EACAC,IAEAlB,EAAAA,KAACC,EAAAA,SAAQ,CACLC,SAAUT,EAAWS,SACrBd,MAAOA,EACPe,SAAUV,EAAWU,SACrBb,SAAUA,EAAQ,cACLG,EAAW,eACxBJ,UAAWe,EAAAA,QAAKe,EAAAA,aAAqB9B,GAAU,iBAC/BI,EAAWU,SAAQ,iBACnBb,EAAQ,gBACT2B,EAAQR,SAAA,CAEvBH,MAAA,MAAA,CAAA,cACgB,QACZE,GAAIX,EACJR,UAAW+B,sBAA0B,gBACtB3B,EAAWS,SAAQ,iBAClBT,EAAWU,SAAQ,gBACpBc,EAAQR,SAEtBO,IAELV,EAAAA,IAACC,iBAAc,CAAA,eAAA,EAAaC,GAAIV,EAAWW,SACtClB,IAELe,MAACI,EAAAA,qBACGxB,IAAKA,GACDO,EAAU,CAAA,kBACGqB,EAAAA,UACbhB,EACAN,EACAK,GAEJqB,WAAYA,GAA2B,UAAbD,EAC1B7B,MAAOA,EAAK,cACA,QACZyB,UAAU,kBAKtB,IAAI1B,EAmDA,OAAOY,IAnDA,CACP,MAAMsB,KAAEA,EAAO,QAAOJ,SAAEA,EAAW,QAAW9B,GACxC+B,WAAEA,GAAezB,EAEvB,OAAQ4B,GACJ,IAAK,OAAQ,CACT,MAAMC,EAAYnC,EAAMoC,WACxB,OAAID,EAAUE,SAAWF,EAAUE,QAAQC,OAAS,EAE5CnB,EAAAA,IAACoB,sBAAmBf,OAAAC,OAAA,CAChB1B,IAAKA,EACLC,MAAOA,EACPC,MAAOA,EACPC,UAAWA,EACXC,SAAUA,EAAQ,aACNC,EAAS,kBACJC,GACbC,IAILM,GAEf,CAEA,IAAK,SAAU,CACX,MAAM4B,EAAcxC,EAAMoC,WAC1B,OAAII,EAAYlB,SACLM,EACHY,EAAYlB,SACZQ,EACAC,GAGGnB,GAEf,CACA,QAAS,CACL,MAAM6B,EAAazC,EAAMoC,WACzB,OAAIK,EAAWC,MACJd,EACHa,EAAWC,MACXZ,EACAC,GAGGnB,GAEf,EAER,CAEA"}

package/cjs/input-group/input-group.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./input-group.styles_bqye6f.css");exports.addonWrapper="afvd13",exports.labelAddonContainer="l1s6ick6",exports.noAddonWrapper="nx53mj4";
+//# sourceMappingURL=input-group.styles.js.map

package/cjs/input-group/input-group.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.styles.js","sources":["../../../src/input-group/input-group.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const addonWrapper = css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    padding: 0 ${Spacing[\"spacing-16\"]};\n\n    &[data-read-only=\"true\"] {\n        padding: 0;\n    }\n\n    &[data-no-border=\"true\"] {\n        padding: 0;\n    }\n\n    &[data-position=\"right\"] {\n        flex-direction: row-reverse;\n    }\n`;\n\nexport const noAddonWrapper = css`\n    display: flex;\n    position: relative;\n    width: 100%;\n    padding: 0 ${Spacing[\"spacing-16\"]};\n\n    &[data-read-only=\"true\"] {\n        padding: 0;\n    }\n\n    &[data-no-border=\"true\"] {\n        padding: 0;\n    }\n`;\n\nexport const labelAddonContainer = css`\n    position: relative;\n    display: flex;\n    align-items: center;\n    margin-right: ${Spacing[\"spacing-12\"]};\n\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    /* SVG Icon */\n    svg {\n        height: 1em;\n        width: 1em;\n    }\n\n    &[data-disabled=\"true\"] {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    &[data-read-only=\"true\"] {\n        margin-right: ${Spacing[\"spacing-4\"]};\n    }\n\n    &[data-position=\"right\"] {\n        margin-right: 0;\n        margin-left: ${Spacing[\"spacing-12\"]};\n    }\n\n    &[data-position=\"right\"][data-read-only=\"true\"] {\n        margin-right: 0;\n        margin-left: ${Spacing[\"spacing-4\"]};\n    }\n`;\n"],"names":[],"mappings":"wGAOyB,qCAkCO,kCAfL"}

package/cjs/input-group/input-group.styles_bqye6f.css

@@ -0,0 +1,3 @@
+@layer fds{.afvd13{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:0 var(--fds-spacing-16);}.afvd13[data-read-only="true"]{padding:0;}.afvd13[data-no-border="true"]{padding:0;}.afvd13[data-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.nx53mj4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:100%;padding:0 var(--fds-spacing-16);}.nx53mj4[data-read-only="true"]{padding:0;}.nx53mj4[data-no-border="true"]{padding:0;}
+.l1s6ick6{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--fds-spacing-12);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}.l1s6ick6 svg{height:1em;width:1em;}.l1s6ick6[data-disabled="true"]{color:var(--fds-colour-text-subtler);}.l1s6ick6[data-read-only="true"]{margin-right:var(--fds-spacing-4);}.l1s6ick6[data-position="right"]{margin-right:0;margin-left:var(--fds-spacing-12);}.l1s6ick6[data-position="right"][data-read-only="true"]{margin-right:0;margin-left:var(--fds-spacing-4);}}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("../external/lodash/findIndex.js"),t=require("react");require("styled-components"),require("../util/string-helper.js"),require("../v3_theme/index.js"),require("../shared/dropdown-list-v2/dropdown-label.styles.js");var s=require("../shared/dropdown-list-v2/dropdown-list.js"),l=require("../shared/dropdown-list-v2/dropdown-list-state.js"),a=require("../shared/dropdown-list-v2/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var n=require("../util/simple-id-generator.js"),i=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),o=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list-v2/dropdown-list.styles.js"),require("../shared/dropdown-list-v2/dropdown-search.js"),require("../shared/dropdown-list-v2/nested-dropdown-list.styles.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");var d=require("../shared/input-wrapper/input-wrapper.js");exports.InputMultiSelect=({selectedOptions:u,placeholder:c="Select",options:p,disabled:h,error:m,className:x,"data-testid":j,id:b,"aria-labelledby":q,"aria-describedby":w,"aria-invalid":v,enableSearch:y=!1,searchFunction:S,searchPlaceholder:g,valueExtractor:f,listExtractor:I,onSelectOptions:T,onShowOptions:L,onHideOptions:D,onRetry:E,optionsLoadState:R="success",optionTruncationType:O="end",renderListItem:$,hideNoResultsDisplay:A,noResultsDescription:C,customLabels:N,renderCustomCallToAction:_,onBlur:B,variant:k="default",readOnly:F,alignment:P,dropdownZIndex:W,maxSelectable:G,dropdownRootNode:H,dropdownWidth:Z})=>{const{allSelectedLabel:M,multiSelectedLabel:V}=N||{},[z,J]=t.useState(u||[]),[K,Q]=t.useState(!1),[U,X]=t.useState(!1),[Y]=t.useState((()=>n.SimpleIdGenerator.generate())),ee=t.useRef(null),re=t.useRef(null);t.useEffect((()=>{J(u||[])}),[u]);const te=()=>{z&&z.length>0||G?(J([]),oe([])):(J(p),oe(p))},se=(e,t)=>{const s=[...z],l=r.default(z,(e=>(f?f(e):e)===t));l>-1?s.splice(l,1):s.push(e),J(s),oe(s)},le=()=>{K&&(Q(!1),ie(!1))},ae=()=>{U||K||X(!0)},ne=e=>{U&&!K&&ee.current&&!ee.current.contains(e.relatedTarget)&&(X(!1),null==B||B())},ie=e=>{!e&&D&&D(),e&&L&&L()},oe=e=>{T&&T(e)};return e.jsx(l.DropdownListState,{children:e.jsx(o.ElementWithDropdown,{enabled:!F&&!h,isOpen:K,renderElement:()=>e.jsx(d.InputBox,{className:x,"data-testid":j,id:b,ref:ee,tabIndex:-1,onFocus:ae,onBlur:ne,$focused:U,$disabled:h,$readOnly:F,$error:m,children:e.jsx(a.ExpandableElement,{ref:re,disabled:h,expanded:K,listboxId:Y,popupRole:"listbox",readOnly:F,variant:k,"aria-labelledby":q,"aria-describedby":w,"aria-invalid":v,children:e.jsx(i.LabelContainer,{$disabled:h,children:z&&0!==z.length?e.jsx(i.ValueLabel,{$variant:k,children:p&&z.length===p.length?M||"All selected":V||`${z.length} selected`}):e.jsx(i.PlaceholderLabel,{$truncateType:O,$variant:k,children:c})})})}),renderDropdown:()=>e.jsx(s.DropdownList,{listboxId:Y,listItems:p,onSelectItem:se,onDismiss:le,valueExtractor:f,listExtractor:I,enableSearch:y,searchFunction:S,searchPlaceholder:g,multiSelect:!0,maxSelectable:G,selectedItems:z,onSelectAll:te,onRetry:E,itemsLoadState:R,itemTruncationType:O,renderListItem:$,hideNoResultsDisplay:A,noResultsDescription:C,customLabels:N,renderCustomCallToAction:_,variant:k,width:Z,matchElementWidth:!0}),onOpen:()=>{Q(!0),ie(!0),X(!0)},onClose:e=>{Q(!1),ie(!1),"click"!==e&&(X(!1),null==B||B())},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),Q(!1),ie(!1)},clickToToggle:!0,offset:8,alignment:P,fitAvailableHeight:!0,customZIndex:W,rootNode:H})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("../external/lodash/findIndex.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 s=require("../util/simple-id-generator.js");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 i=require("../shared/dropdown-list/dropdown-list.js"),l=require("../shared/dropdown-list/dropdown-list-state.js"),a=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("../_virtual/_tslib.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var n=require("../shared/dropdown-wrapper/element-with-dropdown.js"),o=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 d=require("../shared/dropdown-wrapper/dropdown-wrapper.js");exports.InputMultiSelect=({selectedOptions:u,placeholder:c="Select",options:p,disabled:h,error:m,className:q,"data-testid":x,id:j,"aria-labelledby":b,"aria-describedby":w,"aria-invalid":g,enableSearch:f=!1,searchFunction:y,searchPlaceholder:v,valueExtractor:_,listExtractor:S,onSelectOptions:T,onShowOptions:I,onHideOptions:A,onRetry:L,optionsLoadState:k="success",optionTruncationType:C="end",renderListItem:D,hideNoResultsDisplay:E,noResultsDescription:R,customLabels:O,renderCustomCallToAction:P,onBlur:H,variant:N="default",readOnly:B,alignment:G,dropdownZIndex:M,maxSelectable:F,dropdownRootNode:W,dropdownWidth:Z})=>{const{allSelectedLabel:V,multiSelectedLabel:$}=O||{},[z,J]=t.useState(u||[]),[K,Q]=t.useState(!1),[U,X]=t.useState(!1),Y=s.useId(),ee=t.useRef(null),re=t.useRef(null);t.useEffect((()=>{J(u||[])}),[u]);const te=()=>{z&&z.length>0||F?(J([]),oe([])):(J(p),oe(p))},se=(e,t)=>{const s=[...z],i=r.default(z,(e=>(_?_(e):e)===t));i>-1?s.splice(i,1):s.push(e),J(s),oe(s)},ie=()=>{K&&(Q(!1),ne(!1))},le=()=>{U||K||X(!0)},ae=e=>{U&&!K&&ee.current&&!ee.current.contains(e.relatedTarget)&&(X(!1),null==H||H())},ne=e=>{!e&&A&&A(),e&&I&&I()},oe=e=>{T&&T(e)};return e.jsx(l.DropdownListState,{children:e.jsx(n.ElementWithDropdown,{enabled:!B&&!h,isOpen:K,renderElement:()=>e.jsx(o.InputBox,{className:q,"data-testid":x,id:j,ref:ee,tabIndex:-1,onFocus:le,onBlur:ae,focused:U,disabled:h,readOnly:B,error:m,children:e.jsx(a.ExpandableElement,{ref:re,disabled:h,expanded:K,listboxId:Y,popupRole:"listbox",readOnly:B,variant:N,"aria-labelledby":b,"aria-describedby":w,"aria-invalid":g,children:e.jsx(d.LabelContainer,{disabled:h,children:z&&0!==z.length?e.jsx(d.ValueLabel,{variant:N,truncateType:C,children:p&&z.length===p.length?V||"All selected":$||`${z.length} selected`}):e.jsx(d.PlaceholderLabel,{variant:N,truncateType:C,children:c})})})}),renderDropdown:()=>e.jsx(i.DropdownList,{listboxId:Y,listItems:p,onSelectItem:se,onDismiss:ie,valueExtractor:_,listExtractor:S,enableSearch:f,searchFunction:y,searchPlaceholder:v,multiSelect:!0,maxSelectable:F,selectedItems:z,onSelectAll:te,onRetry:L,itemsLoadState:k,itemTruncationType:C,renderListItem:D,hideNoResultsDisplay:E,noResultsDescription:R,customLabels:O,renderCustomCallToAction:P,variant:N,width:Z,matchElementWidth:!0}),onOpen:()=>{Q(!0),ne(!0),X(!0)},onClose:e=>{Q(!1),ne(!1),"click"!==e&&(X(!1),null==H||H())},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),Q(!1),ne(!1)},clickToToggle:!0,offset:8,alignment:G,fitAvailableHeight:!0,customZIndex:M,rootNode:W})})};
 //# sourceMappingURL=input-multi-select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-multi-select.js","sources":["../../../src/input-multi-select/input-multi-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport findIndex from \"lodash/findIndex\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n    DropdownList,\n    DropdownListState,\n    ExpandableElement,\n} from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator } from \"../util\";\nimport type { InputMultiSelectProps } from \"./types\";\n\nexport const InputMultiSelect = <T, V>({\n    selectedOptions,\n    placeholder = \"Select\",\n    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    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    listExtractor,\n    onSelectOptions,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    renderListItem,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    renderCustomCallToAction,\n    onBlur,\n    variant = \"default\",\n    readOnly,\n    alignment,\n    dropdownZIndex,\n    maxSelectable,\n    dropdownRootNode,\n    dropdownWidth,\n}: InputMultiSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const { allSelectedLabel, multiSelectedLabel } = customLabels || {};\n    const [selected, setSelected] = useState<T[]>(selectedOptions || []);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOptions || []);\n    }, [selectedOptions]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelectAllClick = () => {\n        if ((selected && selected.length > 0) || maxSelectable) {\n            setSelected([]);\n            performOnSelectOptions([]);\n        } else {\n            setSelected(options);\n            performOnSelectOptions(options);\n        }\n    };\n\n    const handleListItemClick = (item: T, extractedValue: T | V) => {\n        const selectedCopy = [...selected];\n\n        // Check if it is a selection or deselection\n        const itemIndex = findIndex(selected, (item) => {\n            const valueToCompare = valueExtractor ? valueExtractor(item) : item;\n            return valueToCompare === extractedValue;\n        });\n\n        if (itemIndex > -1) {\n            // Item exists in selected. This indicates a deselection\n            selectedCopy.splice(itemIndex, 1);\n        } else {\n            // Item does not exist in selected. This indicates a selection\n            selectedCopy.push(item);\n        }\n\n        setSelected(selectedCopy);\n        performOnSelectOptions(selectedCopy);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\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 = () => {\n        if (options && selected.length === options.length) {\n            return allSelectedLabel || \"All selected\";\n        }\n\n        return multiSelectedLabel || `${selected.length} selected`;\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 = (options: T[]) => {\n        if (onSelectOptions) {\n            onSelectOptions(options);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected || selected.length === 0) {\n            return (\n                <PlaceholderLabel\n                    $truncateType={optionTruncationType}\n                    $variant={variant}\n                >\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else {\n            return (\n                <ValueLabel $variant={variant}>{getDisplayValue()}</ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer $disabled={disabled}>{renderLabel()}</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=\"listbox\"\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            <DropdownList\n                listboxId={internalId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                searchFunction={searchFunction}\n                searchPlaceholder={searchPlaceholder}\n                multiSelect\n                maxSelectable={maxSelectable}\n                selectedItems={selected}\n                onSelectAll={handleSelectAllClick}\n                onRetry={onRetry}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                renderListItem={renderListItem}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                renderCustomCallToAction={renderCustomCallToAction}\n                variant={variant}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <DropdownListState>\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        </DropdownListState>\n    );\n};\n"],"names":["selectedOptions","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","listExtractor","onSelectOptions","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","maxSelectable","dropdownRootNode","dropdownWidth","allSelectedLabel","multiSelectedLabel","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","nodeRef","useRef","selectorRef","useEffect","handleSelectAllClick","length","performOnSelectOptions","handleListItemClick","item","extractedValue","selectedCopy","itemIndex","findIndex","splice","push","handleListDismiss","triggerOptionDisplayCallback","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","$focused","$disabled","$error","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","$variant","PlaceholderLabel","$truncateType","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","multiSelect","selectedItems","onSelectAll","itemsLoadState","itemTruncationType","width","matchElementWidth","onOpen","onClose","reason","_a","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"input-multi-select.js","sources":["../../../src/input-multi-select/input-multi-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport findIndex from \"lodash/findIndex\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n    DropdownList,\n    DropdownListState,\n    ExpandableElement,\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 { useId } from \"../util\";\nimport type { InputMultiSelectProps } from \"./types\";\n\n// @catalog\n/**\n * A dropdown field that lets users select multiple options from a list.\n *\n * Use `InputMultiSelect` when users need to pick one or more items from a\n * predefined list.\n * @keywords combobox, dropdown, field, form, input, multi-value, multiple, select\n */\nexport const InputMultiSelect = <T, V>({\n    selectedOptions,\n    placeholder = \"Select\",\n    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    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    listExtractor,\n    onSelectOptions,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    renderListItem,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    renderCustomCallToAction,\n    onBlur,\n    variant = \"default\",\n    readOnly,\n    alignment,\n    dropdownZIndex,\n    maxSelectable,\n    dropdownRootNode,\n    dropdownWidth,\n}: InputMultiSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const { allSelectedLabel, multiSelectedLabel } = customLabels || {};\n    const [selected, setSelected] = useState<T[]>(selectedOptions || []);\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\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOptions || []);\n    }, [selectedOptions]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelectAllClick = () => {\n        if ((selected && selected.length > 0) || maxSelectable) {\n            setSelected([]);\n            performOnSelectOptions([]);\n        } else {\n            setSelected(options);\n            performOnSelectOptions(options);\n        }\n    };\n\n    const handleListItemClick = (item: T, extractedValue: T | V) => {\n        const selectedCopy = [...selected];\n\n        // Check if it is a selection or deselection\n        const itemIndex = findIndex(selected, (item) => {\n            const valueToCompare = valueExtractor ? valueExtractor(item) : item;\n            return valueToCompare === extractedValue;\n        });\n\n        if (itemIndex > -1) {\n            // Item exists in selected. This indicates a deselection\n            selectedCopy.splice(itemIndex, 1);\n        } else {\n            // Item does not exist in selected. This indicates a selection\n            selectedCopy.push(item);\n        }\n\n        setSelected(selectedCopy);\n        performOnSelectOptions(selectedCopy);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\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 = () => {\n        if (options && selected.length === options.length) {\n            return allSelectedLabel || \"All selected\";\n        }\n\n        return multiSelectedLabel || `${selected.length} selected`;\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 = (options: T[]) => {\n        if (onSelectOptions) {\n            onSelectOptions(options);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected || selected.length === 0) {\n            return (\n                <PlaceholderLabel\n                    variant={variant}\n                    truncateType={optionTruncationType}\n                >\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else {\n            return (\n                <ValueLabel\n                    variant={variant}\n                    truncateType={optionTruncationType}\n                >\n                    {getDisplayValue()}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer disabled={disabled}>{renderLabel()}</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=\"listbox\"\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            <DropdownList\n                listboxId={internalId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                searchFunction={searchFunction}\n                searchPlaceholder={searchPlaceholder}\n                multiSelect\n                maxSelectable={maxSelectable}\n                selectedItems={selected}\n                onSelectAll={handleSelectAllClick}\n                onRetry={onRetry}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                renderListItem={renderListItem}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                renderCustomCallToAction={renderCustomCallToAction}\n                variant={variant}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <DropdownListState>\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        </DropdownListState>\n    );\n};\n"],"names":["selectedOptions","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","listExtractor","onSelectOptions","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","maxSelectable","dropdownRootNode","dropdownWidth","allSelectedLabel","multiSelectedLabel","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","useEffect","handleSelectAllClick","length","performOnSelectOptions","handleListItemClick","item","extractedValue","selectedCopy","itemIndex","findIndex","splice","push","handleListDismiss","triggerOptionDisplayCallback","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","truncateType","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","multiSelect","selectedItems","onSelectAll","itemsLoadState","itemTruncationType","width","matchElementWidth","onOpen","onClose","reason","_a","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sources":["../../../src/input-nested-multi-select/helpers.ts"],"sourcesContent":["import isEmpty from \"lodash/isEmpty\";\n\nimport type { NestedDropdownListItemProps } from \"../shared/dropdown-list-v2\";\n\nconst findSelectedItem = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[] | undefined,\n    keyPath: string[]\n): NestedDropdownListItemProps<V1 | V2 | V3> | undefined => {\n    const [currentKey, ...nextKeyPath] = keyPath;\n\n    if (isEmpty(options) || !currentKey) {\n        return undefined;\n    }\n\n    const item = options!.find((item) => item.key === currentKey);\n\n    if (!item) {\n        return undefined;\n    }\n\n    if (!nextKeyPath.length) {\n        return item;\n    }\n\n    return findSelectedItem(item.subItems, nextKeyPath);\n};\n\nexport const getSelectedItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    keyPaths: string[][]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const selectedItems: SelectedItem<V1 | V2 | V3>[] = [];\n\n    for (let i = 0; i < keyPaths.length; i++) {\n        const keyPath = keyPaths[i];\n        const item = findSelectedItem(options, keyPath);\n\n        if (item) {\n            selectedItems.push({\n                value: item.value,\n                label: item.label,\n                keyPath: keyPath,\n            });\n        }\n    }\n\n    return selectedItems;\n};\n\nexport interface SelectedItem<T> {\n    label: string;\n    keyPath: string[];\n    value: T;\n}\n\nconst findSubItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    parentKeyPath: string[]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const selectedItems: SelectedItem<V1 | V2 | V3>[] = [];\n\n    for (const option of options) {\n        if (option.subItems) {\n            selectedItems.push(\n                ...findSubItems(option.subItems, [...parentKeyPath, option.key])\n            );\n        } else {\n            selectedItems.push({\n                value: option.value,\n                label: option.label,\n                keyPath: [...parentKeyPath, option.key],\n            });\n        }\n    }\n\n    return selectedItems;\n};\n\nexport const getSelectedSubItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    keyPath: string[]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const item = findSelectedItem(options, keyPath);\n\n    if (item && item.subItems) {\n        return findSubItems(item.subItems, keyPath);\n    }\n\n    return [];\n};\n"],"names":["findSelectedItem","options","keyPath","currentKey","nextKeyPath","isEmpty","item","find","key","length","subItems","findSubItems","parentKeyPath","selectedItems","option","push","value","label","keyPaths","i"],"mappings":"4DAIA,MAAMA,EAAmB,CACrBC,EACAC,KAEA,MAAOC,KAAeC,GAAeF,EAErC,GAAIG,UAAQJ,KAAaE,EACrB,OAGJ,MAAMG,EAAOL,EAASM,MAAMD,GAASA,EAAKE,MAAQL,IAElD,OAAKG,EAIAF,EAAYK,OAIVT,EAAiBM,EAAKI,SAAUN,GAH5BE,OALX,CAQmD,EA+BjDK,EAAe,CACjBV,EACAW,KAEA,MAAMC,EAA8C,GAEpD,IAAK,MAAMC,KAAUb,EACba,EAAOJ,SACPG,EAAcE,QACPJ,EAAaG,EAAOJ,SAAU,IAAIE,EAAeE,EAAON,OAG/DK,EAAcE,KAAK,CACfC,MAAOF,EAAOE,MACdC,MAAOH,EAAOG,MACdf,QAAS,IAAIU,EAAeE,EAAON,OAK/C,OAAOK,CAAa,2BAhDQ,CAC5BZ,EACAiB,KAEA,MAAML,EAA8C,GAEpD,IAAK,IAAIM,EAAI,EAAGA,EAAID,EAAST,OAAQU,IAAK,CACtC,MAAMjB,EAAUgB,EAASC,GACnBb,EAAON,EAAiBC,EAASC,GAEnCI,GACAO,EAAcE,KAAK,CACfC,MAAOV,EAAKU,MACZC,MAAOX,EAAKW,MACZf,QAASA,GAGrB,CAEA,OAAOW,CAAa,8BAgCW,CAC/BZ,EACAC,KAEA,MAAMI,EAAON,EAAiBC,EAASC,GAEvC,OAAII,GAAQA,EAAKI,SACNC,EAAaL,EAAKI,SAAUR,GAGhC,EAAE"}
+{"version":3,"file":"helpers.js","sources":["../../../src/input-nested-multi-select/helpers.ts"],"sourcesContent":["import isEmpty from \"lodash/isEmpty\";\n\nimport type { NestedDropdownListItemProps } from \"../shared/dropdown-list\";\n\nconst findSelectedItem = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[] | undefined,\n    keyPath: string[]\n): NestedDropdownListItemProps<V1 | V2 | V3> | undefined => {\n    const [currentKey, ...nextKeyPath] = keyPath;\n\n    if (isEmpty(options) || !currentKey) {\n        return undefined;\n    }\n\n    const item = options!.find((item) => item.key === currentKey);\n\n    if (!item) {\n        return undefined;\n    }\n\n    if (!nextKeyPath.length) {\n        return item;\n    }\n\n    return findSelectedItem(item.subItems, nextKeyPath);\n};\n\nexport const getSelectedItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    keyPaths: string[][]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const selectedItems: SelectedItem<V1 | V2 | V3>[] = [];\n\n    for (let i = 0; i < keyPaths.length; i++) {\n        const keyPath = keyPaths[i];\n        const item = findSelectedItem(options, keyPath);\n\n        if (item) {\n            selectedItems.push({\n                value: item.value,\n                label: item.label,\n                keyPath: keyPath,\n            });\n        }\n    }\n\n    return selectedItems;\n};\n\nexport interface SelectedItem<T> {\n    label: string;\n    keyPath: string[];\n    value: T;\n}\n\nconst findSubItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    parentKeyPath: string[]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const selectedItems: SelectedItem<V1 | V2 | V3>[] = [];\n\n    for (const option of options) {\n        if (option.subItems) {\n            selectedItems.push(\n                ...findSubItems(option.subItems, [...parentKeyPath, option.key])\n            );\n        } else {\n            selectedItems.push({\n                value: option.value,\n                label: option.label,\n                keyPath: [...parentKeyPath, option.key],\n            });\n        }\n    }\n\n    return selectedItems;\n};\n\nexport const getSelectedSubItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    keyPath: string[]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const item = findSelectedItem(options, keyPath);\n\n    if (item && item.subItems) {\n        return findSubItems(item.subItems, keyPath);\n    }\n\n    return [];\n};\n"],"names":["findSelectedItem","options","keyPath","currentKey","nextKeyPath","isEmpty","item","find","key","length","subItems","findSubItems","parentKeyPath","selectedItems","option","push","value","label","keyPaths","i"],"mappings":"4DAIA,MAAMA,EAAmB,CACrBC,EACAC,KAEA,MAAOC,KAAeC,GAAeF,EAErC,GAAIG,UAAQJ,KAAaE,EACrB,OAGJ,MAAMG,EAAOL,EAASM,MAAMD,GAASA,EAAKE,MAAQL,IAElD,OAAKG,EAIAF,EAAYK,OAIVT,EAAiBM,EAAKI,SAAUN,GAH5BE,OALX,CAQmD,EA+BjDK,EAAe,CACjBV,EACAW,KAEA,MAAMC,EAA8C,GAEpD,IAAK,MAAMC,KAAUb,EACba,EAAOJ,SACPG,EAAcE,QACPJ,EAAaG,EAAOJ,SAAU,IAAIE,EAAeE,EAAON,OAG/DK,EAAcE,KAAK,CACfC,MAAOF,EAAOE,MACdC,MAAOH,EAAOG,MACdf,QAAS,IAAIU,EAAeE,EAAON,OAK/C,OAAOK,CAAa,2BAhDQ,CAC5BZ,EACAiB,KAEA,MAAML,EAA8C,GAEpD,IAAK,IAAIM,EAAI,EAAGA,EAAID,EAAST,OAAQU,IAAK,CACtC,MAAMjB,EAAUgB,EAASC,GACnBb,EAAON,EAAiBC,EAASC,GAEnCI,GACAO,EAAcE,KAAK,CACfC,MAAOV,EAAKU,MACZC,MAAOX,EAAKW,MACZf,QAASA,GAGrB,CAEA,OAAOW,CAAa,8BAgCW,CAC/BZ,EACAC,KAEA,MAAMI,EAAON,EAAiBC,EAASC,GAEvC,OAAII,GAAQA,EAAKI,SACNC,EAAaL,EAAKI,SAAUR,GAGhC,EAAE"}

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");var a=require("../util/string-helper.js");require("../v3_theme/index.js"),require("../shared/dropdown-list-v2/dropdown-label.styles.js"),require("../shared/dropdown-list-v2/dropdown-list.js"),require("../shared/dropdown-list-v2/dropdown-list-state.js");var n=require("../shared/dropdown-list-v2/expandable-element.js"),s=require("../shared/dropdown-list-v2/nested-dropdown-list.js"),d=require("../shared/dropdown-list-v2/nested-dropdown-list-helpers.js"),i=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),o=require("../shared/dropdown-wrapper/element-with-dropdown.js"),u=require("../shared/input-wrapper/input-wrapper.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var c=require("../util/simple-id-generator.js"),p=require("./helpers.js");exports.InputNestedMultiSelect=({placeholder:h="Select",options:m,disabled:b,error:y,className:w,"data-testid":S,id:j,"aria-labelledby":v,"aria-describedby":f,"aria-invalid":x,selectedKeyPaths:q,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:G})=>{const{multiSelectedLabel:M}=L||{},V=m,[_,z]=l.useState(q?d.buildKeyPathToSet(q):new Set),[J,Q]=l.useState([]),[U,X]=l.useState(!1),[Y,ee]=l.useState(!1),[te]=l.useState((()=>c.SimpleIdGenerator.generate())),re=l.useRef(null),le=l.useRef(null),ae=l.useRef(null);l.useEffect((()=>{const e=q||[],t=p.getSelectedItems(V,e);z(d.buildKeyPathToSet(e)),Q(t)}),[q,V]);const ne=(e,t)=>{const r=t.map((e=>({keyPath:e.keyPath,label:e.item.label,value:e.item.value})));z(d.buildKeyPathToSet(e)),Q(r),pe(e,r)},se=e=>{const t=he(e),r=t.map((e=>e.keyPath));Q(t),z(d.buildKeyPathToSet(r)),pe(r,t)},de=()=>{Y||U||ee(!0)},ie=e=>{Y&&!U&&re.current&&!re.current.contains(e.relatedTarget)&&(ee(!1),null==B||B())},oe=()=>{if(J.length>1)return M||`${J.length} selected`;const{label:e,value:t}=J[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 J.filter((t=>{const l=t.keyPath.slice(0,e.keyPath.length);return!r.default(e.keyPath,l)}));{const t=[...J];return(e.hasSubItems?p.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(u.InputBox,{className:w,"data-testid":S,id:j,ref:re,tabIndex:-1,onFocus:de,onBlur:ie,$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:W,"aria-labelledby":v,"aria-describedby":f,"aria-invalid":x,children:e.jsx(i.LabelContainer,{ref:ae,$disabled:b,children:t.default(J)?e.jsx(i.PlaceholderLabel,{$truncateType:H,children:h}):e.jsx(i.ValueLabel,{$truncateType:H,children:ue(oe())})})})}),renderDropdown:()=>e.jsx(s.NestedDropdownList,{listboxId:te,listItems:V,multiSelect:!0,selectedKeyPaths:_,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:()=>{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:A,fitAvailableHeight:!0,customZIndex:F,rootNode:G})};
+"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 type { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport isEqual from \"lodash/isEqual\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type {\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n} from \"../shared/dropdown-list-v2\";\nimport {\n    buildKeyPathToSet,\n    ExpandableElement,\n    NestedDropdownList,\n} from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator, StringHelper } from \"../util\";\nimport type { SelectedItem } from \"./helpers\";\nimport { getSelectedItems, getSelectedSubItems } from \"./helpers\";\nimport type { InputNestedMultiSelectProps } from \"./types\";\n\nexport const InputNestedMultiSelect = <V1, V2, V3>({\n    placeholder = \"Select\",\n    options: _options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    selectedKeyPaths: _selectedKeyPaths,\n    mode,\n    valueToStringFunction,\n    enableSearch,\n    searchPlaceholder,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    readOnly,\n    onSearch,\n    onSelectOptions,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    onBlur,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    variant = \"default\",\n    alignment,\n    dropdownZIndex,\n    dropdownWidth,\n    dropdownRootNode,\n}: InputNestedMultiSelectProps<V1, V2, V3>): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE\n    // =========================================================================\n    const { multiSelectedLabel } = customLabels || {};\n    const options = _options as NestedDropdownListItemProps<V1 | V2 | V3>[];\n    const [selectedKeyPaths, setSelectedKeyPaths] = useState<Set<string>>(\n        _selectedKeyPaths\n            ? buildKeyPathToSet(_selectedKeyPaths)\n            : new Set<string>()\n    );\n    const [selectedItems, setSelectedItems] = useState<\n        SelectedItem<V1 | V2 | V3>[]\n    >([]);\n\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const newKeyPath = _selectedKeyPaths || [];\n        const selectedItems = getSelectedItems(options, newKeyPath);\n\n        setSelectedKeyPaths(buildKeyPathToSet(newKeyPath));\n        setSelectedItems(selectedItems);\n    }, [_selectedKeyPaths, options]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelectAll = (\n        keyPaths: string[][],\n        items: NestedDropdownListLocalItem<V1 | V2 | V3>[]\n    ) => {\n        const selectedItems = items.map((item) => ({\n            keyPath: item.keyPath,\n            label: item.item.label,\n            value: item.item.value,\n        }));\n        setSelectedKeyPaths(buildKeyPathToSet(keyPaths));\n        setSelectedItems(selectedItems);\n        performOnSelectOptions(keyPaths, selectedItems);\n    };\n\n    const handleListItemClick = (\n        listItem: NestedDropdownListLocalItem<V1 | V2 | V3>\n    ) => {\n        const newSelectedItems: SelectedItem<V1 | V2 | V3>[] =\n            getNewSelection(listItem);\n        const newKeyPaths = newSelectedItems.map((item) => item.keyPath);\n        setSelectedItems(newSelectedItems);\n        setSelectedKeyPaths(buildKeyPathToSet(newKeyPaths));\n        performOnSelectOptions(newKeyPaths, newSelectedItems);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTION\n    // =========================================================================\n    const getDisplayValue = (): string => {\n        if (selectedItems.length > 1) {\n            return multiSelectedLabel || `${selectedItems.length} selected`;\n        }\n\n        const { label, value } = selectedItems[0];\n        if (valueToStringFunction) {\n            return valueToStringFunction(value);\n        } else {\n            return label;\n        }\n    };\n\n    const truncateValue = (value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef && labelContainerRef.current) {\n                widthOfElement =\n                    labelContainerRef.current.getBoundingClientRect().width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 6);\n        }\n\n        return value;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show && onHideOptions) {\n            onHideOptions();\n        }\n\n        if (show && onShowOptions) {\n            onShowOptions();\n        }\n    };\n\n    const performOnSelectOptions = (\n        keyPaths: string[][],\n        items: SelectedItem<V1 | V2 | V3>[]\n    ) => {\n        if (onSelectOptions) {\n            const returnValue = items.map((item) => item.value);\n            onSelectOptions(keyPaths, returnValue);\n        }\n    };\n\n    const getNewSelection = (\n        item: NestedDropdownListLocalItem<V1 | V2 | V3>\n    ): SelectedItem<V1 | V2 | V3>[] => {\n        if (item.checked === true) {\n            // remove item or subitems\n            return selectedItems.filter((selectedItem) => {\n                const ancestorKeyPath = selectedItem.keyPath.slice(\n                    0,\n                    item.keyPath.length\n                );\n                return !isEqual(item.keyPath, ancestorKeyPath);\n            });\n        } else {\n            // select item or all subitems\n            const nextSelection = [...selectedItems];\n            const newItemsToAdd = item.hasSubItems\n                ? getSelectedSubItems(options, item.keyPath)\n                : [\n                      {\n                          value: item.item.value,\n                          label: item.item.label,\n                          keyPath: item.keyPath,\n                      },\n                  ];\n            newItemsToAdd.forEach((addedItem) => {\n                if (\n                    !selectedItems.find((selectedItem) =>\n                        isEqual(selectedItem.keyPath, addedItem.keyPath)\n                    )\n                ) {\n                    nextSelection.push(addedItem);\n                }\n            });\n            return nextSelection;\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTION\n    // =========================================================================\n    const renderLabel = () => {\n        if (isEmpty(selectedItems)) {\n            return (\n                <PlaceholderLabel $truncateType={optionTruncationType}>\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else {\n            return (\n                <ValueLabel $truncateType={optionTruncationType}>\n                    {truncateValue(getDisplayValue())}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} $disabled={disabled}>\n            {renderLabel()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"tree\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <NestedDropdownList\n                listboxId={internalId}\n                listItems={options}\n                multiSelect\n                selectedKeyPaths={selectedKeyPaths}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                enableSearch={enableSearch}\n                searchPlaceholder={searchPlaceholder}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                onSelectItem={handleListItemClick}\n                onSelectAll={handleSelectAll}\n                onRetry={onRetry}\n                onSearch={onSearch}\n                variant={variant}\n                mode={mode}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={showOptions}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            clickToToggle\n            offset={8}\n            alignment={alignment}\n            fitAvailableHeight\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["placeholder","options","_options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","selectedKeyPaths","_selectedKeyPaths","mode","valueToStringFunction","enableSearch","searchPlaceholder","hideNoResultsDisplay","noResultsDescription","customLabels","readOnly","onSearch","onSelectOptions","onShowOptions","onHideOptions","onRetry","onBlur","optionsLoadState","optionTruncationType","variant","alignment","dropdownZIndex","dropdownWidth","dropdownRootNode","multiSelectedLabel","setSelectedKeyPaths","useState","buildKeyPathToSet","Set","selectedItems","setSelectedItems","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","newKeyPath","getSelectedItems","handleSelectAll","keyPaths","items","map","item","keyPath","label","value","performOnSelectOptions","handleListItemClick","listItem","newSelectedItems","getNewSelection","newKeyPaths","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","getDisplayValue","length","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","triggerOptionDisplayCallback","show","returnValue","checked","filter","selectedItem","ancestorKeyPath","slice","isEqual","nextSelection","hasSubItems","getSelectedSubItems","forEach","addedItem","find","push","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","$focused","$disabled","$error","children","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","isEmpty","PlaceholderLabel","$truncateType","ValueLabel","renderDropdown","NestedDropdownList","listItems","multiSelect","itemsLoadState","itemTruncationType","onSelectItem","onSelectAll","matchElementWidth","onOpen","onClose","reason","onDismiss","_a","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"input-nested-multi-select.js","sources":["../../../src/input-nested-multi-select/input-nested-multi-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport isEqual from \"lodash/isEqual\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type {\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n} from \"../shared/dropdown-list\";\nimport {\n    buildKeyPathToSet,\n    ExpandableElement,\n    NestedDropdownList,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { StringHelper, useId } from \"../util\";\nimport type { SelectedItem } from \"./helpers\";\nimport { getSelectedItems, getSelectedSubItems } from \"./helpers\";\nimport type {\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");var n=require("../util/string-helper.js");require("../v3_theme/index.js"),require("../shared/dropdown-list-v2/dropdown-label.styles.js"),require("../shared/dropdown-list-v2/dropdown-list.js"),require("../shared/dropdown-list-v2/dropdown-list-state.js");var l=require("../shared/dropdown-list-v2/expandable-element.js"),a=require("../shared/dropdown-list-v2/nested-dropdown-list.js"),s=require("../shared/dropdown-list-v2/nested-dropdown-list-helpers.js"),d=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),o=require("../shared/dropdown-wrapper/element-with-dropdown.js"),i=require("../shared/input-wrapper/input-wrapper.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var u=require("../util/simple-id-generator.js");exports.InputNestedSelect=({placeholder:c="Select",options:p,disabled:h,error:b,className:w,"data-testid":m,id:y,"aria-labelledby":v,"aria-describedby":j,"aria-invalid":S,selectedKeyPath:x,mode:f,valueToStringFunction:q,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 G=p,[V,_]=t.useState(x?s.buildKeyPathToSet([x]):new Set),[z,J]=t.useState(),[M,Q]=t.useState(!1),[U,X]=t.useState(!1),[Y]=t.useState((()=>u.SimpleIdGenerator.generate())),ee=t.useRef(null),re=t.useRef(null),te=t.useRef(null);t.useEffect((()=>{_(x?s.buildKeyPathToSet([x]):new Set);const e=s.findItemByKeyPath(G,x||[]);J(null!=e?e:void 0)}),[x,G]);const ne=e=>{var r;const{keyPath:t,item:{label:n,value:l}}=e;_(s.buildKeyPathToSet([t])),J({label:n,value:l}),Q(!1),oe(!1),null===(r=re.current)||void 0===r||r.focus(),null==E||E(t,l)},le=()=>{U||M||X(!0)},ae=e=>{U&&!M&&ee.current&&!ee.current.contains(e.relatedTarget)&&(X(!1),null==D||D())},se=()=>{if(!z)return"";const{label:e,value:r}=z;return q?q(r):e},de=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},oe=e=>{!e&&K&&K(),e&&$&&$()};return e.jsx(o.ElementWithDropdown,{enabled:!O&&!h,isOpen:M,renderElement:()=>e.jsx(i.InputBox,{className:w,"data-testid":m,id:y,ref:ee,tabIndex:-1,onFocus:le,onBlur:ae,$focused:U,$disabled:h,$readOnly:O,$error:b,children:e.jsx(l.ExpandableElement,{ref:re,disabled:h,expanded:M,listboxId:Y,popupRole:"tree",readOnly:O,variant:H,"aria-labelledby":v,"aria-describedby":j,"aria-invalid":S,children:e.jsx(d.LabelContainer,{ref:te,$disabled:h,children:r.default(z)?e.jsx(d.PlaceholderLabel,{$truncateType:k,children:c}):e.jsx(d.ValueLabel,{$truncateType:k,children:de(se())})})})}),renderDropdown:()=>e.jsx(a.NestedDropdownList,{listboxId:Y,listItems:G,selectedKeyPaths:V,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:f,width:Z,matchElementWidth:!0}),onOpen:()=>{Q(!0),oe(!0),X(!0)},onClose:e=>{Q(!1),oe(!1),"click"!==e&&(X(!1),null==D||D())},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),Q(!1),oe(!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 type { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type {\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n} from \"../shared/dropdown-list-v2\";\nimport {\n    buildKeyPathToSet,\n    ExpandableElement,\n    findItemByKeyPath,\n    NestedDropdownList,\n} from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator, StringHelper } from \"../util\";\nimport type {\n    InputNestedSelectProps,\n    L1OptionProps,\n    L2OptionProps,\n    L3OptionProps,\n} from \"./types\";\n\nexport type CombinedOptionProps<V1, V2, V3> =\n    | L1OptionProps<V1, V2, V3>\n    | L2OptionProps<V2, V3>\n    | L3OptionProps<V3>;\n\ninterface SelectedItemType<V1, V2, V3> {\n    label: string;\n    value: V1 | V2 | V3;\n}\n\nexport const InputNestedSelect = <V1, V2, V3>({\n    placeholder = \"Select\",\n    options: _options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    selectedKeyPath: _selectedKeyPath,\n    mode,\n    valueToStringFunction,\n    enableSearch,\n    searchPlaceholder,\n    selectableCategory,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    readOnly,\n    onBlur,\n    onSearch,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    variant = \"default\",\n    alignment,\n    dropdownZIndex,\n    dropdownWidth,\n    dropdownRootNode,\n}: InputNestedSelectProps<V1, V2, V3>): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE\n    // =========================================================================\n    const options = _options as NestedDropdownListItemProps<V1 | V2 | V3>[];\n    const [selectedKeyPaths, setSelectedKeyPaths] = useState<Set<string>>(\n        _selectedKeyPath\n            ? buildKeyPathToSet([_selectedKeyPath])\n            : new Set<string>()\n    );\n    const [selectedItem, setSelectedItem] =\n        useState<SelectedItemType<V1, V2, V3>>();\n\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setSelectedKeyPaths(\n            _selectedKeyPath\n                ? buildKeyPathToSet([_selectedKeyPath])\n                : new Set<string>()\n        );\n        const selectedItem = findItemByKeyPath(options, _selectedKeyPath || []);\n        setSelectedItem(selectedItem ?? undefined);\n    }, [_selectedKeyPath, options]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleListItemClick = (\n        listItem: NestedDropdownListLocalItem<V1 | V2 | V3>\n    ) => {\n        const {\n            keyPath,\n            item: { label, value },\n        } = listItem;\n        setSelectedKeyPaths(buildKeyPathToSet([keyPath]));\n        setSelectedItem({ label, value });\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        selectorRef.current?.focus();\n        onSelectOption?.(keyPath, value);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTION\n    // =========================================================================\n    const getDisplayValue = (): string => {\n        if (!selectedItem) return \"\";\n        const { label, value } = selectedItem;\n\n        if (valueToStringFunction) {\n            return valueToStringFunction(value);\n        } else {\n            return label;\n        }\n    };\n\n    const truncateValue = (value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef && labelContainerRef.current) {\n                widthOfElement =\n                    labelContainerRef.current.getBoundingClientRect().width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 6);\n        }\n\n        return value;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show && onHideOptions) {\n            onHideOptions();\n        }\n\n        if (show && onShowOptions) {\n            onShowOptions();\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTION\n    // =========================================================================\n    const renderLabel = () => {\n        if (isEmpty(selectedItem)) {\n            return (\n                <PlaceholderLabel $truncateType={optionTruncationType}>\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else {\n            return (\n                <ValueLabel $truncateType={optionTruncationType}>\n                    {truncateValue(getDisplayValue())}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} $disabled={disabled}>\n            {renderLabel()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"tree\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <NestedDropdownList\n                listboxId={internalId}\n                listItems={options}\n                selectedKeyPaths={selectedKeyPaths}\n                selectableCategory={selectableCategory}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                enableSearch={enableSearch}\n                searchPlaceholder={searchPlaceholder}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                onSelectItem={handleListItemClick}\n                onRetry={onRetry}\n                onSearch={onSearch}\n                variant={variant}\n                mode={mode}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={showOptions}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            clickToToggle\n            offset={8}\n            alignment={alignment}\n            fitAvailableHeight\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["placeholder","options","_options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","selectedKeyPath","_selectedKeyPath","mode","valueToStringFunction","enableSearch","searchPlaceholder","selectableCategory","hideNoResultsDisplay","noResultsDescription","customLabels","readOnly","onBlur","onSearch","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","variant","alignment","dropdownZIndex","dropdownWidth","dropdownRootNode","selectedKeyPaths","setSelectedKeyPaths","useState","buildKeyPathToSet","Set","selectedItem","setSelectedItem","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","findItemByKeyPath","undefined","handleListItemClick","listItem","keyPath","item","label","value","triggerOptionDisplayCallback","_a","current","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","$focused","$disabled","$error","children","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","isEmpty","PlaceholderLabel","$truncateType","ValueLabel","renderDropdown","NestedDropdownList","listItems","itemsLoadState","itemTruncationType","onSelectItem","matchElementWidth","onOpen","onClose","reason","onDismiss","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"input-nested-select.js","sources":["../../../src/input-nested-select/input-nested-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type {\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n} from \"../shared/dropdown-list\";\nimport {\n    buildKeyPathToSet,\n    ExpandableElement,\n    findItemByKeyPath,\n    NestedDropdownList,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { StringHelper, useId } from \"../util\";\nimport type { 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"),n=require("../input/input.style.js");require("styled-components");var o=require("../util/string-helper.js");require("../v3_theme/index.js"),require("../shared/dropdown-list-v2/dropdown-label.styles.js");var i=require("../shared/dropdown-list-v2/dropdown-list.js"),s=require("../shared/dropdown-list-v2/dropdown-list-state.js");require("../shared/dropdown-list-v2/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js"),a=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),d=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list-v2/dropdown-list.styles.js"),require("../shared/dropdown-list-v2/dropdown-search.js"),require("../shared/dropdown-list-v2/nested-dropdown-list.styles.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");var u=require("../shared/range-input-inner-container/range-input-inner-container.js"),c=require("./input-range-select.style.js");exports.InputRangeSelect=p=>{var{selectedOptions:h,placeholders:v={from:"Select",to:"Select"},options:m,disabled:f,className:j,readOnly:w,error:x,"data-testid":g,id:q,enableSearch:S=!1,searchFunction:y,searchPlaceholder:b,valueExtractor:T,valueToStringFunction:C,listExtractor:I,displayValueExtractor:O,onSelectOption:E,onShowOptions:L,onHideOptions:R,onRetry:D,optionsLoadState:_={from:"success",to:"success"},optionTruncationType:$="middle",renderCustomSelectedOption:A,renderListItem:F,renderCustomCallToAction:N,alignment:P,dropdownZIndex:W,dropdownRootNode:k,dropdownWidth:B}=p,H=e.__rest(p,["selectedOptions","placeholders","options","disabled","className","readOnly","error","data-testid","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth"]);const[V,Z]=t.useState(),[G,M]=t.useState(),[K,z]=t.useState("none"),J="none"!==K,[Q,U]=t.useState(!1),X=t.useRef(null),Y={from:t.useRef(null),to:t.useRef(null)},ee=t.useRef(null),[re]=t.useState((()=>null!=q?q:l.SimpleIdGenerator.generate())),te=`${re}-range-listbox`;t.useEffect((()=>{Z(null==h?void 0:h.from),M(null==h?void 0:h.to)}),[h]),t.useEffect((()=>{var e;J&&"to"===K&&(null===(e=ee.current)||void 0===e||e.refocus({index:0}))}),[J,K]);const ne=e=>{e||null==R||R(),e&&(null==L||L())},oe=e=>{var r,t;const n="from"===e?V:G;if(!n)return"";if(O)return O(n);if(T){const e=T(n);return C?C(e):null!==(t=null===(r=null==e?void 0:e.toString)||void 0===r?void 0:r.call(e))&&void 0!==t?t:""}return n.toString()},ie=(e,r)=>{var t;if("middle"===$){let n=0;return(null===(t=Y[e])||void 0===t?void 0:t.current)&&(n=Y[e].current.getBoundingClientRect().width),o.StringHelper.truncateOneLine(r,n,120,8)}return r},se=()=>{switch(K){case"from":return"start";case"to":return"end";case"none":return K}},le=t.useMemo((()=>{var e;return"none"===K?[]:null!==(e=null==m?void 0:m[K])&&void 0!==e?e:[]}),[K,m]),ae=t.useMemo((()=>{if("none"===K)return[];const e="from"===K?V:G;return e?[e]:[]}),[K,V,G]),de=e=>r=>{r.stopPropagation(),r.preventDefault(),f||w||(z("to"===e&&V?"to":"from"),ne(!0))},ue=(e,r)=>{var t;if("none"!==K){if("from"===K)return Z(e),null==E||E({from:e},r),M(void 0),z("to"),void ne(!0);M(e),null==E||E({to:e},r),z("none"),ne(!1),null===(t=X.current)||void 0===t||t.focus(),U(!0)}},ce=()=>{var e;z("none"),ne(!1),null===(e=X.current)||void 0===e||e.focus(),U(!0),V&&G||(Z(void 0),M(void 0))},pe=e=>{var r;e.stopPropagation(),e.preventDefault(),Z(void 0),M(void 0),null==E||E({from:void 0,to:void 0},void 0),null===(r=X.current)||void 0===r||r.focus(),U(!0)},he=()=>U(!0),ve=e=>{Q&&!J&&X.current&&!X.current.contains(e.relatedTarget)&&U(!1)},me=e=>{if(!f&&!w&&!J&&e.currentTarget===e.target)switch(e.key){case"Enter":case" ":case"ArrowDown":e.preventDefault(),z("from"),ne(!0)}},fe=e=>{const t="from"===e?V:G;return t?A?A(t):r.jsx(a.ValueLabel,{$truncateType:$,children:ie(e,oe(e))}):r.jsx(a.PlaceholderLabel,{$truncateType:$,children:ie(e,(null==v?void 0:v[e])||"")})},je=e=>r.jsx(a.LabelContainer,{onClick:de(e),ref:Y[e],$disabled:f,children:fe(e)});return r.jsx(a.Wrapper,Object.assign({id:q},H,{children:r.jsx(s.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!w&&!f,isOpen:J,renderElement:()=>r.jsxs(c.StyledInputWrapper,{className:j,"data-testid":g,ref:X,tabIndex:0,onFocus:he,onBlur:ve,$focused:Q||J,$disabled:f,$readOnly:w,$error:x,onKeyDown:me,children:[r.jsxs(u.RangeInputInnerContainer,{currentActive:se(),error:x,children:[je("from"),je("to")]}),!J&&V&&G&&!w&&!f&&r.jsx(c.ClearIconContainer,{onClick:pe,type:"button","aria-label":"Clear",children:r.jsx(n.ClearIcon,{"aria-hidden":!0})})]}),renderDropdown:()=>r.jsx(i.DropdownList,{ref:ee,"data-testid":`${g}-dropdown`,listboxId:te,listItems:le,onSelectItem:ue,onDismiss:ce,valueExtractor:T,listExtractor:I,selectedItems:ae,itemsLoadState:_[K],itemTruncationType:$,onRetry:D,width:B,matchElementWidth:!B,enableSearch:S,searchFunction:y,searchPlaceholder:b,renderListItem:F,renderCustomCallToAction:N}),onOpen:()=>{f||w||"none"===K&&(z("from"),ne(!0))},onClose:()=>{z("none"),ne(!1),V&&G||(Z(void 0),M(void 0)),U(!1)},onDismiss:ce,clickToToggle:!1,offset:8,alignment:P,fitAvailableHeight:!0,customZIndex:W,rootNode:k})})}))};
+"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