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

package/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":"0SAgBA,MAwHaA,EAAaC,EAAMC,YAxHd,CACdC,EACAC,SADAC,MAAEA,EAAKC,MAAEA,EAAKC,UAAEA,KAAcC,EAAUC,EAAAN,EAAxC,CAAA,QAAA,QAAA,cAGA,MAAMO,EAAiB,IACnBC,EAACC,EAAc,CAAAC,UACAL,EAAWM,SAAQC,OACtBT,YACGE,EAAWQ,SAAQ,cACjBR,EAAW,eACxBD,UAAWA,YACAC,EAAWS,SAAQC,SAE9BP,EAACQ,EAASC,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,EAACmB,EAAmBV,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,EAACC,EAAY,CAAAlB,OACDT,YACGE,EAAWM,SAAQoB,UACnB1B,EAAWQ,SAAQ,cACjBR,EAAW,eAAc2B,UAC3BX,EACXjB,UAAWA,EAAS6B,UACT5B,EAAWS,SAAQC,SAAA,CAE9BP,EAAC0B,EAAmB,CAAA,cACJ,kBACD7B,EAAWM,SAAQoB,UACnB1B,EAAWQ,mBACXQ,EAAQN,SAElBa,EAAYb,WAEjBP,EAACQ,iBACGf,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,EAACC,EAAY,CAAApB,UACEL,EAAWM,SAAQC,OACtBT,EAAK4B,UACF1B,EAAWQ,SAAQ,cACjBR,EAAW,eAAc2B,UAC3BX,EACXjB,UAAWA,EAAS6B,UACT5B,EAAWS,SAAQC,SAAA,CAE9BP,EAAC0B,EAAmB,CAAA,cACJ,kBACD7B,EAAWM,SAAQoB,UACnB1B,EAAWQ,mBACXQ,EAAQN,SAElBoB,EAAWC,QAEhB5B,EAACQ,iBACGf,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            <Input\n                ref={ref}\n                {...otherProps}\n                data-testid=\"input\"\n                styleType=\"no-border\"\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\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","_jsx","InputBox","disabled","readOnly","clsx","styles.noAddonWrapper","children","Input","Object","assign","styleType","renderWithAddon","addonContent","position","allowClear","_jsxs","styles.addonWrapper","id","styles.labelAddonContainer","VisuallyHidden","concatIds","type","listAddon","attributes","options","length","InputGroupListAddon","customAddon","labelAddon","value"],"mappings":"orBAgBA,MA8IaA,EAAaC,EAAMC,YA9Id,CACdC,EASAC,SATAC,MACIA,EAAKC,MACLA,EAAKC,UACLA,EAASC,SACTA,EACA,aAAcC,EACd,kBAAmBC,GAAcP,EAC9BQ,EAAUC,EAAAT,EAPjB,yEAcA,MAAMU,EAAaC,IACbC,EAAU,GAAGF,UACbG,EAAc,GAAGH,gBAKjBI,EAAiB,IACnBC,EAACC,EAAQ,CACLC,SAAUT,EAAWS,SACrBd,MAAOA,EACPe,SAAUV,EAAWU,SACrBb,SAAUA,EAAQ,cACLG,EAAW,eACxBJ,UAAWe,EAAKC,EAAuBhB,GAAU,iBACjCI,EAAWU,SAAQ,iBACnBb,EAAQgB,SAExBN,EAACO,EAAKC,OAAAC,OAAA,CACFvB,IAAKA,GACDO,EAAU,CAAA,cACF,QACZiB,UAAU,iBAKhBC,EAAkB,CACpBC,EACAC,EACAC,IAEAC,EAACd,EAAQ,CACLC,SAAUT,EAAWS,SACrBd,MAAOA,EACPe,SAAUV,EAAWU,SACrBb,SAAUA,EAAQ,cACLG,EAAW,eACxBJ,UAAWe,EAAKY,EAAqB3B,GAAU,iBAC/BI,EAAWU,SAAQ,iBACnBb,EAAQ,gBACTuB,EAAQP,SAAA,CAEvBN,EAAA,MAAA,CAAA,cACgB,QACZiB,GAAIpB,EACJR,UAAW6B,EAA0B,gBACtBzB,EAAWS,SAAQ,iBAClBT,EAAWU,SAAQ,gBACpBU,EAAQP,SAEtBM,IAELZ,EAACmB,EAAc,CAAA,eAAA,EAAaF,GAAInB,EAAWQ,SACtCf,IAELS,EAACO,iBACGrB,IAAKA,GACDO,EAAU,CAAA,kBACG2B,EACbtB,EACAN,EACAK,GAEJiB,WAAYA,GAA2B,UAAbD,EAC1BzB,MAAOA,EAAK,cACA,QACZsB,UAAU,kBAKtB,IAAIvB,EAmDA,OAAOY,IAnDA,CACP,MAAMsB,KAAEA,EAAO,QAAOR,SAAEA,EAAW,QAAW1B,GACxC2B,WAAEA,GAAerB,EAEvB,OAAQ4B,GACJ,IAAK,OAAQ,CACT,MAAMC,EAAYnC,EAAMoC,WACxB,OAAID,EAAUE,SAAWF,EAAUE,QAAQC,OAAS,EAE5CzB,EAAC0B,EAAmBlB,OAAAC,OAAA,CAChBvB,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,EAAYrB,SACLK,EACHgB,EAAYrB,SACZO,EACAC,GAGGf,GAEf,CACA,QAAS,CACL,MAAM6B,EAAazC,EAAMoC,WACzB,OAAIK,EAAWC,MACJlB,EACHiB,EAAWC,MACXhB,EACAC,GAGGf,GAEf,EAER,CAEA"}

package/input-group/input-group.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const addonWrapper: import("@linaria/core").LinariaClassName;
+export declare const noAddonWrapper: import("@linaria/core").LinariaClassName;
+export declare const labelAddonContainer: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./input-group.styles_fpy81r.css";const p="afvd13",s="nx53mj4",t="l1s6ick6";export{p as addonWrapper,t as labelAddonContainer,s as noAddonWrapper};
+//# sourceMappingURL=input-group.styles.js.map

package/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":["addonWrapper","noAddonWrapper","labelAddonContainer"],"mappings":"mEAOO,MAAMA,EAAY,SAmBZC,EAAc,UAedC,EAAmB"}

package/input-group/input-group.styles_fpy81r.css

@@ -0,0 +1,3 @@
+.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);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/input-group/types.d.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from "react";
 import type { InputProps } from "../input/types";
-import type { DropdownDisplayProps, DropdownSearchProps, ItemsLoadStateType, TruncateType } from "../shared/dropdown-list-v2";
+import type { DropdownDisplayProps, DropdownSearchProps, ItemsLoadStateType, TruncateType } from "../shared/dropdown-list";
 export type InputGroupAddonType = "label" | "list" | "custom";
 export type InputGroupAddonPosition = "left" | "right" | undefined;
 export interface CustomAddon {

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

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

package/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":["InputMultiSelect","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\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":["InputMultiSelect","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/input-multi-select/types.d.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from "react";
 import type { InputSelectOptionsProps, InputSelectSharedProps } from "../input-select/types";
-import type { DropdownCustomLabelProps, DropdownDisplayProps, DropdownSearchProps, DropdownVariantType } from "../shared/dropdown-list-v2/types";
+import type { DropdownCustomLabelProps, DropdownDisplayProps, DropdownSearchProps, DropdownVariantType } from "../shared/dropdown-list/types";
 import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
 export interface InputMultiSelectProps<T, V> extends React.HTMLAttributes<HTMLElement>, InputSelectOptionsProps<T>, InputSelectSharedProps<T>, DropdownDisplayProps<T, V>, DropdownSearchProps<T> {
     readOnly?: boolean | undefined;

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

@@ -1,4 +1,4 @@
-import type { NestedDropdownListItemProps } from "../shared/dropdown-list-v2";
+import type { NestedDropdownListItemProps } from "../shared/dropdown-list";
 export declare const getSelectedItems: <V1, V2, V3>(options: NestedDropdownListItemProps<V1 | V2 | V3>[], keyPaths: string[][]) => SelectedItem<V1 | V2 | V3>[];
 export interface SelectedItem<T> {
     label: string;

package/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","getSelectedItems","keyPaths","selectedItems","i","push","value","label","findSubItems","parentKeyPath","option","getSelectedSubItems"],"mappings":"6CAIA,MAAMA,EAAmB,CACrBC,EACAC,KAEA,MAAOC,KAAeC,GAAeF,EAErC,GAAIG,EAAQJ,KAAaE,EACrB,OAGJ,MAAMG,EAAOL,EAASM,MAAMD,GAASA,EAAKE,MAAQL,IAElD,OAAKG,EAIAF,EAAYK,OAIVT,EAAiBM,EAAKI,SAAUN,GAH5BE,OALX,CAQmD,EAG1CK,EAAmB,CAC5BV,EACAW,KAEA,MAAMC,EAA8C,GAEpD,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAASH,OAAQK,IAAK,CACtC,MAAMZ,EAAUU,EAASE,GACnBR,EAAON,EAAiBC,EAASC,GAEnCI,GACAO,EAAcE,KAAK,CACfC,MAAOV,EAAKU,MACZC,MAAOX,EAAKW,MACZf,QAASA,GAGrB,CAEA,OAAOW,CAAa,EASlBK,EAAe,CACjBjB,EACAkB,KAEA,MAAMN,EAA8C,GAEpD,IAAK,MAAMO,KAAUnB,EACbmB,EAAOV,SACPG,EAAcE,QACPG,EAAaE,EAAOV,SAAU,IAAIS,EAAeC,EAAOZ,OAG/DK,EAAcE,KAAK,CACfC,MAAOI,EAAOJ,MACdC,MAAOG,EAAOH,MACdf,QAAS,IAAIiB,EAAeC,EAAOZ,OAK/C,OAAOK,CAAa,EAGXQ,EAAsB,CAC/BpB,EACAC,KAEA,MAAMI,EAAON,EAAiBC,EAASC,GAEvC,OAAII,GAAQA,EAAKI,SACNQ,EAAaZ,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","getSelectedItems","keyPaths","selectedItems","i","push","value","label","findSubItems","parentKeyPath","option","getSelectedSubItems"],"mappings":"6CAIA,MAAMA,EAAmB,CACrBC,EACAC,KAEA,MAAOC,KAAeC,GAAeF,EAErC,GAAIG,EAAQJ,KAAaE,EACrB,OAGJ,MAAMG,EAAOL,EAASM,MAAMD,GAASA,EAAKE,MAAQL,IAElD,OAAKG,EAIAF,EAAYK,OAIVT,EAAiBM,EAAKI,SAAUN,GAH5BE,OALX,CAQmD,EAG1CK,EAAmB,CAC5BV,EACAW,KAEA,MAAMC,EAA8C,GAEpD,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAASH,OAAQK,IAAK,CACtC,MAAMZ,EAAUU,EAASE,GACnBR,EAAON,EAAiBC,EAASC,GAEnCI,GACAO,EAAcE,KAAK,CACfC,MAAOV,EAAKU,MACZC,MAAOX,EAAKW,MACZf,QAASA,GAGrB,CAEA,OAAOW,CAAa,EASlBK,EAAe,CACjBjB,EACAkB,KAEA,MAAMN,EAA8C,GAEpD,IAAK,MAAMO,KAAUnB,EACbmB,EAAOV,SACPG,EAAcE,QACPG,EAAaE,EAAOV,SAAU,IAAIS,EAAeC,EAAOZ,OAG/DK,EAAcE,KAAK,CACfC,MAAOI,EAAOJ,MACdC,MAAOG,EAAOH,MACdf,QAAS,IAAIiB,EAAeC,EAAOZ,OAK/C,OAAOK,CAAa,EAGXQ,EAAsB,CAC/BpB,EACAC,KAEA,MAAMI,EAAON,EAAiBC,EAASC,GAEvC,OAAII,GAAQA,EAAKI,SACNQ,EAAaZ,EAAKI,SAAUR,GAGhC,EAAE"}

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"input-nested-select.js","sources":["../../src/input-nested-select/input-nested-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type {\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n} from \"../shared/dropdown-list-v2\";\nimport {\n    buildKeyPathToSet,\n    ExpandableElement,\n    findItemByKeyPath,\n    NestedDropdownList,\n} from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator, StringHelper } from \"../util\";\nimport type {\n    InputNestedSelectProps,\n    L1OptionProps,\n    L2OptionProps,\n    L3OptionProps,\n} from \"./types\";\n\nexport type CombinedOptionProps<V1, V2, V3> =\n    | L1OptionProps<V1, V2, V3>\n    | L2OptionProps<V2, V3>\n    | L3OptionProps<V3>;\n\ninterface SelectedItemType<V1, V2, V3> {\n    label: string;\n    value: V1 | V2 | V3;\n}\n\nexport const InputNestedSelect = <V1, V2, V3>({\n    placeholder = \"Select\",\n    options: _options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    selectedKeyPath: _selectedKeyPath,\n    mode,\n    valueToStringFunction,\n    enableSearch,\n    searchPlaceholder,\n    selectableCategory,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    readOnly,\n    onBlur,\n    onSearch,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    variant = \"default\",\n    alignment,\n    dropdownZIndex,\n    dropdownWidth,\n    dropdownRootNode,\n}: InputNestedSelectProps<V1, V2, V3>): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE\n    // =========================================================================\n    const options = _options as NestedDropdownListItemProps<V1 | V2 | V3>[];\n    const [selectedKeyPaths, setSelectedKeyPaths] = useState<Set<string>>(\n        _selectedKeyPath\n            ? buildKeyPathToSet([_selectedKeyPath])\n            : new Set<string>()\n    );\n    const [selectedItem, setSelectedItem] =\n        useState<SelectedItemType<V1, V2, V3>>();\n\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setSelectedKeyPaths(\n            _selectedKeyPath\n                ? buildKeyPathToSet([_selectedKeyPath])\n                : new Set<string>()\n        );\n        const selectedItem = findItemByKeyPath(options, _selectedKeyPath || []);\n        setSelectedItem(selectedItem ?? undefined);\n    }, [_selectedKeyPath, options]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleListItemClick = (\n        listItem: NestedDropdownListLocalItem<V1 | V2 | V3>\n    ) => {\n        const {\n            keyPath,\n            item: { label, value },\n        } = listItem;\n        setSelectedKeyPaths(buildKeyPathToSet([keyPath]));\n        setSelectedItem({ label, value });\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        selectorRef.current?.focus();\n        onSelectOption?.(keyPath, value);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTION\n    // =========================================================================\n    const getDisplayValue = (): string => {\n        if (!selectedItem) return \"\";\n        const { label, value } = selectedItem;\n\n        if (valueToStringFunction) {\n            return valueToStringFunction(value);\n        } else {\n            return label;\n        }\n    };\n\n    const truncateValue = (value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef && labelContainerRef.current) {\n                widthOfElement =\n                    labelContainerRef.current.getBoundingClientRect().width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 6);\n        }\n\n        return value;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show && onHideOptions) {\n            onHideOptions();\n        }\n\n        if (show && onShowOptions) {\n            onShowOptions();\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTION\n    // =========================================================================\n    const renderLabel = () => {\n        if (isEmpty(selectedItem)) {\n            return (\n                <PlaceholderLabel $truncateType={optionTruncationType}>\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else {\n            return (\n                <ValueLabel $truncateType={optionTruncationType}>\n                    {truncateValue(getDisplayValue())}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} $disabled={disabled}>\n            {renderLabel()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"tree\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <NestedDropdownList\n                listboxId={internalId}\n                listItems={options}\n                selectedKeyPaths={selectedKeyPaths}\n                selectableCategory={selectableCategory}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                enableSearch={enableSearch}\n                searchPlaceholder={searchPlaceholder}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                onSelectItem={handleListItemClick}\n                onRetry={onRetry}\n                onSearch={onSearch}\n                variant={variant}\n                mode={mode}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={showOptions}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            clickToToggle\n            offset={8}\n            alignment={alignment}\n            fitAvailableHeight\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["InputNestedSelect","placeholder","options","_options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","selectedKeyPath","_selectedKeyPath","mode","valueToStringFunction","enableSearch","searchPlaceholder","selectableCategory","hideNoResultsDisplay","noResultsDescription","customLabels","readOnly","onBlur","onSearch","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","variant","alignment","dropdownZIndex","dropdownWidth","dropdownRootNode","selectedKeyPaths","setSelectedKeyPaths","useState","buildKeyPathToSet","Set","selectedItem","setSelectedItem","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","findItemByKeyPath","undefined","handleListItemClick","listItem","keyPath","item","label","value","triggerOptionDisplayCallback","_a","current","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","$focused","$disabled","$error","children","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","isEmpty","PlaceholderLabel","$truncateType","ValueLabel","renderDropdown","NestedDropdownList","listItems","itemsLoadState","itemTruncationType","onSelectItem","matchElementWidth","onOpen","onClose","reason","onDismiss","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"input-nested-select.js","sources":["../../src/input-nested-select/input-nested-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type {\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n} from \"../shared/dropdown-list\";\nimport {\n    buildKeyPathToSet,\n    ExpandableElement,\n    findItemByKeyPath,\n    NestedDropdownList,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { StringHelper, useId } from \"../util\";\nimport type {\n    InputNestedSelectProps,\n    L1OptionProps,\n    L2OptionProps,\n    L3OptionProps,\n} from \"./types\";\n\nexport type CombinedOptionProps<V1, V2, V3> =\n    | L1OptionProps<V1, V2, V3>\n    | L2OptionProps<V2, V3>\n    | L3OptionProps<V3>;\n\ninterface SelectedItemType<V1, V2, V3> {\n    label: string;\n    value: V1 | V2 | V3;\n}\n\nexport const InputNestedSelect = <V1, V2, V3>({\n    placeholder = \"Select\",\n    options: _options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    selectedKeyPath: _selectedKeyPath,\n    mode,\n    valueToStringFunction,\n    enableSearch,\n    searchPlaceholder,\n    selectableCategory,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    readOnly,\n    onBlur,\n    onSearch,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    variant = \"default\",\n    alignment,\n    dropdownZIndex,\n    dropdownWidth,\n    dropdownRootNode,\n}: InputNestedSelectProps<V1, V2, V3>): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE\n    // =========================================================================\n    const options = _options as NestedDropdownListItemProps<V1 | V2 | V3>[];\n    const [selectedKeyPaths, setSelectedKeyPaths] = useState<Set<string>>(\n        _selectedKeyPath\n            ? buildKeyPathToSet([_selectedKeyPath])\n            : new Set<string>()\n    );\n    const [selectedItem, setSelectedItem] =\n        useState<SelectedItemType<V1, V2, V3>>();\n\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setSelectedKeyPaths(\n            _selectedKeyPath\n                ? buildKeyPathToSet([_selectedKeyPath])\n                : new Set<string>()\n        );\n        const selectedItem = findItemByKeyPath(options, _selectedKeyPath || []);\n        setSelectedItem(selectedItem ?? undefined);\n    }, [_selectedKeyPath, options]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleListItemClick = (\n        listItem: NestedDropdownListLocalItem<V1 | V2 | V3>\n    ) => {\n        const {\n            keyPath,\n            item: { label, value },\n        } = listItem;\n        setSelectedKeyPaths(buildKeyPathToSet([keyPath]));\n        setSelectedItem({ label, value });\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        selectorRef.current?.focus();\n        onSelectOption?.(keyPath, value);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTION\n    // =========================================================================\n    const getDisplayValue = (): string => {\n        if (!selectedItem) return \"\";\n        const { label, value } = selectedItem;\n\n        if (valueToStringFunction) {\n            return valueToStringFunction(value);\n        } else {\n            return label;\n        }\n    };\n\n    const truncateValue = (value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef && labelContainerRef.current) {\n                widthOfElement =\n                    labelContainerRef.current.getBoundingClientRect().width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 6);\n        }\n\n        return value;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show && onHideOptions) {\n            onHideOptions();\n        }\n\n        if (show && onShowOptions) {\n            onShowOptions();\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTION\n    // =========================================================================\n    const renderLabel = () => {\n        if (isEmpty(selectedItem)) {\n            return (\n                <PlaceholderLabel truncateType={optionTruncationType}>\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else {\n            return (\n                <ValueLabel truncateType={optionTruncationType}>\n                    {truncateValue(getDisplayValue())}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} disabled={disabled}>\n            {renderLabel()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"tree\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <NestedDropdownList\n                listboxId={internalId}\n                listItems={options}\n                selectedKeyPaths={selectedKeyPaths}\n                selectableCategory={selectableCategory}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                enableSearch={enableSearch}\n                searchPlaceholder={searchPlaceholder}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                onSelectItem={handleListItemClick}\n                onRetry={onRetry}\n                onSearch={onSearch}\n                variant={variant}\n                mode={mode}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={showOptions}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            clickToToggle\n            offset={8}\n            alignment={alignment}\n            fitAvailableHeight\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["InputNestedSelect","placeholder","options","_options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","selectedKeyPath","_selectedKeyPath","mode","valueToStringFunction","enableSearch","searchPlaceholder","selectableCategory","hideNoResultsDisplay","noResultsDescription","customLabels","readOnly","onBlur","onSearch","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","variant","alignment","dropdownZIndex","dropdownWidth","dropdownRootNode","selectedKeyPaths","setSelectedKeyPaths","useState","buildKeyPathToSet","Set","selectedItem","setSelectedItem","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","findItemByKeyPath","undefined","handleListItemClick","listItem","keyPath","item","label","value","triggerOptionDisplayCallback","_a","current","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","children","LabelContainer","isEmpty","PlaceholderLabel","truncateType","ValueLabel","renderDropdown","NestedDropdownList","listItems","itemsLoadState","itemTruncationType","onSelectItem","matchElementWidth","onOpen","onClose","reason","onDismiss","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"q0CAwCaA,EAAoB,EAC7BC,cAAc,SACdC,QAASC,EACTC,WACAC,QACAC,YACA,cAAeC,EACfC,KACA,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,EAChBC,gBAAiBC,EACjBC,OACAC,wBACAC,eACAC,oBACAC,qBACAC,uBACAC,uBACAC,eACAC,WACAC,SACAC,WACAC,iBACAC,gBACAC,gBACAC,UACAC,mBAAmB,UACnBC,uBAAuB,MACvBC,UAAU,UACVC,YACAC,iBACAC,gBACAC,uBAKA,MAAMjC,EAAUC,GACTiC,EAAkBC,GAAuBC,EAC5CzB,EACM0B,EAAkB,CAAC1B,IACnB,IAAI2B,MAEPC,EAAcC,GACjBJ,KAEGK,GAAaC,IAAkBN,GAAkB,IACjDO,GAASC,IAAcR,GAAkB,GAC1CS,GAAaC,IAEbC,GAAUC,EAAuB,MACjCC,GAAcD,EAA0B,MACxCE,GAAoBF,EAAuB,MAKjDG,GAAU,KACNhB,EACIxB,EACM0B,EAAkB,CAAC1B,IACnB,IAAI2B,KAEd,MAAMC,EAAea,EAAkBpD,EAASW,GAAoB,IACpE6B,EAAgBD,QAAAA,OAAgBc,EAAU,GAC3C,CAAC1C,EAAkBX,IAKtB,MAAMsD,GACFC,UAEA,MAAMC,QACFA,EACAC,MAAMC,MAAEA,EAAKC,MAAEA,IACfJ,EACJpB,EAAoBE,EAAkB,CAACmB,KACvChB,EAAgB,CAAEkB,QAAOC,UACzBjB,IAAe,GACfkB,IAA6B,GAEV,QAAnBC,EAAAZ,GAAYa,eAAO,IAAAD,GAAAA,EAAEE,QACrBxC,SAAAA,EAAiBiC,EAASG,EAAM,EAG9BK,GAAkB,KACfrB,IAAYF,IACbG,IAAW,EACf,EAGEqB,GAAkBC,IAEhBvB,KACCF,IACDM,GAAQe,UACPf,GAAQe,QAAQK,SAASD,EAAEE,iBAE5BxB,IAAW,GACXvB,SAAAA,IACJ,EA6BEgD,GAAkB,KACpB,IAAK9B,EAAc,MAAO,GAC1B,MAAMmB,MAAEA,EAAKC,MAAEA,GAAUpB,EAEzB,OAAI1B,EACOA,EAAsB8C,GAEtBD,CACX,EAGEY,GAAiBX,IACnB,GAA6B,WAAzB/B,EAAmC,CACnC,IAAI2C,EAAiB,EAKrB,OAJIrB,IAAqBA,GAAkBY,UACvCS,EACIrB,GAAkBY,QAAQU,wBAAwBC,OAEnDC,EAAaC,gBAAgBhB,EAAOY,EAAgB,IAAK,EACpE,CAEA,OAAOZ,CAAK,EAGVC,GAAgCgB,KAC7BA,GAAQnD,GACTA,IAGAmD,GAAQpD,GACRA,GACJ,EAsFJ,OACIqD,EAACC,EAAmB,CAChBC,SAAU3D,IAAalB,EACvB8E,OAAQvC,GACRwC,cA9Dc,IAEdJ,EAACK,GACG9E,UAAWA,EAAS,cACPC,EACbC,GAAIA,EACJ6E,IAAKpC,GACLqC,UAAU,EACVC,QAASrB,GACT3C,OAAQ4C,GACRtB,QAASA,GACTzC,SAAUA,EACVkB,SAAUA,EACVjB,MAAOA,WAEP0E,EAACS,GACGH,IAAKlC,GACL/C,SAAUA,EACVqF,SAAU9C,GACV+C,UAAW3C,GACX4C,UAAU,OACVrE,SAAUA,EACVS,QAASA,EAAO,kBACCtB,qBACCC,EAAe,eACnBC,EAAWiF,SA9BrCb,EAACc,EAAc,CAACR,IAAKjC,GAAmBhD,SAAUA,WAhB9C0F,EAAQrD,GAEJsC,EAACgB,EAAgB,CAACC,aAAclE,EAAoB8D,SAC/C3F,IAKL8E,EAACkB,EAAU,CAACD,aAAclE,EAAoB8D,SACzCpB,GAAcD,cA2EvB2B,eA9Be,IAEfnB,EAACoB,EAAkB,CACfT,UAAW3C,GACXqD,UAAWlG,EACXkC,iBAAkBA,EAClBlB,mBAAoBA,EACpBmF,eAAgBxE,EAChByE,mBAAoBxE,EACpBd,aAAcA,EACdC,kBAAmBA,EACnBE,qBAAsBA,EACtBC,qBAAsBA,EACtBC,aAAcA,EACdkF,aAAc/C,GACd5B,QAASA,EACTJ,SAAUA,EACVO,QAASA,EACTjB,KAAMA,EACN6D,MAAOzC,EACPsE,mBAAiB,IAWrBC,OArJW,KACf7D,IAAe,GACfkB,IAA6B,GAC7BhB,IAAW,EAAK,EAmJZ4D,QAhJaC,IACjB/D,IAAe,GACfkB,IAA6B,GAGd,UAAX6C,IACA7D,IAAW,GACXvB,SAAAA,IACJ,EAyIIqF,UAtIc,WACC,QAAnB7C,EAAAZ,GAAYa,eAAO,IAAAD,GAAAA,EAAEE,QACrBrB,IAAe,GACfkB,IAA6B,EAAM,EAoI/B+C,eAAa,EACbC,OAAQ,EACR9E,UAAWA,EACX+E,oBAAkB,EAClBC,aAAc/E,EACdgF,SAAU9E,GACZ"}

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

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

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

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

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

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