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

package/cjs/shared/dropdown-list/dropdown-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-label.js","sources":["../../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Font } from \"../../theme\";\nimport { useApplyStyle } from \"../../theme/utils/use-apply-styles\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport * as styles from \"./dropdown-label.styles\";\nimport type { DropdownVariantType, LabelDisplayType } from \"./types\";\n\ninterface DropdownLabelProps {\n    bold?: boolean | undefined;\n    displayType?: LabelDisplayType | undefined;\n    label: string;\n    maxLines?: number | undefined;\n    searchTerm?: string | undefined;\n    selected?: boolean | undefined;\n    disabled?: boolean | undefined;\n    sublabel?: string | undefined;\n    truncationType?: \"middle\" | \"end\" | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const DropdownLabel = ({\n    bold,\n    displayType = \"inline\",\n    label,\n    searchTerm,\n    maxLines = 2,\n    selected,\n    disabled,\n    sublabel,\n    truncationType = \"middle\",\n    variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]\n            : Font.Spec[\"body-size-baseline\"];\n    const fontFamily = Font.Spec[\"font-family\"];\n    const { ref, width } = useResizeDetector();\n\n    const primaryTextRef = useRef<HTMLDivElement>(null);\n    const secondaryTextRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(primaryTextRef, {\n        [styles.tokens.primaryText.maxLines]: String(maxLines),\n    });\n\n    useApplyStyle(secondaryTextRef, {\n        [styles.tokens.secondaryText.maxLines]: String(maxLines),\n    });\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const hasExceededContainer = useCallback(\n        (displayText: string) => {\n            if (displayType !== \"inline\" || !width) {\n                return false;\n            }\n\n            // best-effort attempt to check if multi-line text will overflow,\n            // rendering an actual element in the DOM might be more accurate\n            // but might not be performant for large lists\n            const textWidth = StringHelper.getTextWidth(\n                displayText,\n                `${fontSize} '${fontFamily}'`\n            );\n\n            // there's less space than expected due to word breaks, so an\n            // arbitary offset is applied\n            return textWidth > width - 50;\n        },\n        [width, displayType, fontSize, fontFamily]\n    );\n\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const shouldTruncateTitle = useMemo(\n        () => hasExceededContainer(label),\n        [hasExceededContainer, label]\n    );\n    const shouldTruncateLabel = useMemo(\n        () => sublabel && hasExceededContainer(sublabel),\n        [hasExceededContainer, sublabel]\n    );\n\n    // css cannot truncate inline elements so force the display to render\n    // them separately\n    const itemDisplayType =\n        truncationType === \"middle\" &&\n        (shouldTruncateTitle || shouldTruncateLabel)\n            ? \"next-line\"\n            : displayType;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMatchInBold = (displayText: string) => {\n        if (!searchTerm) {\n            return displayText;\n        }\n\n        const match = searchTerm.toLowerCase().trim();\n        const startIndex = displayText.toLowerCase().indexOf(match);\n        const endIndex = startIndex + searchTerm.length;\n\n        if (startIndex === -1) {\n            return displayText;\n        }\n\n        return (\n            <>\n                {label.slice(0, startIndex)}\n                <span className={styles.matchedText}>\n                    {label.slice(startIndex, endIndex)}\n                </span>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateFirstLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateSecondLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                styles.label,\n                variant === \"small\" && styles.labelVariantSmall,\n                itemDisplayType === \"next-line\" && styles.labelNextLine\n            )}\n        >\n            <div\n                ref={primaryTextRef}\n                aria-label={label}\n                className={clsx(\n                    styles.primaryText,\n                    bold && styles.primaryTextBold,\n                    disabled && styles.primaryTextDisabled,\n                    !disabled && selected && styles.primaryTextSelected,\n                    itemDisplayType === \"inline\" &&\n                        styles.primaryTextLabelInline,\n                    truncationType === \"end\" && styles.primaryTextTruncateEnd\n                )}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </div>\n            {sublabel && (\n                <div\n                    ref={secondaryTextRef}\n                    aria-label={sublabel}\n                    className={clsx(\n                        styles.secondaryText,\n                        itemDisplayType === \"inline\" &&\n                            styles.secondaryTextLabelInline,\n                        truncationType === \"end\" &&\n                            styles.secondaryTextTruncateEnd,\n                        displayType === \"next-line\"\n                            ? styles.secondaryTextNextLine\n                            : styles.secondaryTextInline\n                    )}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","primaryTextRef","useRef","secondaryTextRef","useApplyStyle","styles.tokens","primaryText","String","secondaryText","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","className","styles.matchedText","renderTruncatedText","clsx","styles.baseTruncateStyle","styles.truncateFirstLine","styles.truncateLineSingle","styles.truncateSecondLine","styles.label","styles.labelVariantSmall","styles.labelNextLine","styles.primaryText","styles.primaryTextBold","styles.primaryTextDisabled","styles.primaryTextSelected","styles.primaryTextLabelInline","styles.primaryTextTruncateEnd","styles.secondaryText","styles.secondaryTextLabelInline","styles.secondaryTextTruncateEnd","styles.secondaryTextNextLine","styles.secondaryTextInline"],"mappings":"opBAuB6B,EACzBA,OACAC,cAAc,SACdC,QACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EACU,UAAZD,EACME,EAAAA,KAAKC,KAAK,gBACVD,EAAAA,KAAKC,KAAK,sBACdC,EAAaF,EAAAA,KAAKC,KAAK,gBACvBE,IAAEA,EAAGC,MAAEA,GAAUC,sBAEjBC,EAAiBC,EAAAA,OAAuB,MACxCC,EAAmBD,EAAAA,OAAuB,MAEhDE,EAAAA,cAAcH,EAAgB,CAC1B,CAACI,EAAAA,OAAcC,YAAYlB,UAAWmB,OAAOnB,KAGjDgB,EAAAA,cAAcD,EAAkB,CAC5B,CAACE,EAAAA,OAAcG,cAAcpB,UAAWmB,OAAOnB,KAMnD,MAAMqB,EAAuBC,eACxBC,IACG,GAAoB,WAAhB1B,IAA6Bc,EAC7B,OAAO,EAaX,OAPkBa,eAAaC,aAC3BF,EACA,GAAGjB,MAAaG,MAKDE,EAAQ,EAAE,GAEjC,CAACA,EAAOd,EAAaS,EAAUG,IAM7BiB,EAAsBC,EAAAA,SACxB,IAAMN,EAAqBvB,IAC3B,CAACuB,EAAsBvB,IAErB8B,EAAsBD,WACxB,IAAMxB,GAAYkB,EAAqBlB,IACvC,CAACkB,EAAsBlB,IAKrB0B,EACiB,WAAnBzB,IACCsB,GAAuBE,GAClB,YACA/B,EAKJiC,EAAqBP,IACvB,IAAKxB,EACD,OAAOwB,EAGX,MAAMQ,EAAQhC,EAAWiC,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAanC,EAAWsC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,OAAAC,EAAAA,SAAA,CAAAC,SAAA,CACK1C,EAAM2C,MAAM,EAAGP,GAChBQ,EAAAA,IAAA,OAAA,CAAMC,UAAWC,EAAAA,YAAkBJ,SAC9B1C,EAAM2C,MAAMP,EAAYE,KAE5BtC,EAAM2C,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIE,EAAAA,IAAA,MAAA,CACIC,UAAWG,EAAAA,QACPC,EAAAA,kBACAC,oBACa,IAAbhD,GAAkBiD,EAAAA,oBACrB,eAAA,EAAAT,SAGAV,EAAkBP,KAEvBmB,EAAAA,IAAA,MAAA,CACIC,UAAWG,EAAAA,QACPC,EAAAA,kBACAG,EAAAA,mBACa,IAAblD,GAAkBiD,EAAAA,oBACrB,eAAA,EAAAT,SAGAV,EAAkBP,QAMnC,OACIe,EAAAA,KAAA,MAAA,CACI5B,IAAKA,EACLiC,UAAWG,EAAAA,QACPK,EAAAA,MACY,UAAZ9C,GAAuB+C,EAAAA,kBACH,cAApBvB,GAAmCwB,EAAAA,eACtCb,SAAA,CAEDE,EAAAA,WACIhC,IAAKG,EAAc,aACPf,EACZ6C,UAAWG,EAAAA,QACPQ,cACA1D,GAAQ2D,EAAAA,gBACRrD,GAAYsD,EAAAA,qBACXtD,GAAYD,GAAYwD,EAAAA,oBACL,WAApB5B,GACI6B,EAAAA,uBACe,QAAnBtD,GAA4BuD,EAAAA,wBAC/BnB,SAEmB,WAAnBpC,GAA+BsB,EAC1BmB,EAAoB/C,GACpBgC,EAAkBhC,KAE3BK,GACGuC,EAAAA,IAAA,MAAA,CACIhC,IAAKK,EAAgB,aACTZ,EACZwC,UAAWG,EAAAA,QACPc,EAAAA,cACoB,WAApB/B,GACIgC,EAAAA,yBACe,QAAnBzD,GACI0D,EAAAA,yBACY,cAAhBjE,EACMkE,EAAAA,sBACAC,EAAAA,8BAGU,WAAnB5D,GAA+BwB,EAC1BiB,EAAoB1C,GACpBA,MAGZ"}
+{"version":3,"file":"dropdown-label.js","sources":["../../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Font } from \"../../theme\";\nimport { useApplyStyle } from \"../../theme/utils/use-apply-styles\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport * as styles from \"./dropdown-label.styles\";\nimport type { DropdownVariantType, LabelDisplayType } from \"./types\";\n\ninterface DropdownLabelProps {\n    bold?: boolean | undefined;\n    displayType?: LabelDisplayType | undefined;\n    label: string;\n    maxLines?: number | undefined;\n    searchTerm?: string | undefined;\n    selected?: boolean | undefined;\n    disabled?: boolean | undefined;\n    sublabel?: string | undefined;\n    truncationType?: \"middle\" | \"end\" | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const DropdownLabel = ({\n    bold,\n    displayType = \"inline\",\n    label,\n    searchTerm,\n    maxLines = 2,\n    selected,\n    disabled,\n    sublabel,\n    truncationType = \"middle\",\n    variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]\n            : Font.Spec[\"body-size-baseline\"];\n    const fontFamily = Font.Spec[\"font-family\"];\n    const { ref, width } = useResizeDetector();\n\n    const primaryTextRef = useRef<HTMLDivElement>(null);\n    const secondaryTextRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(primaryTextRef, {\n        [styles.tokens.primaryText.maxLines]: String(maxLines),\n    });\n\n    useApplyStyle(secondaryTextRef, {\n        [styles.tokens.secondaryText.maxLines]: String(maxLines),\n    });\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const hasExceededContainer = useCallback(\n        (displayText: string) => {\n            if (displayType !== \"inline\" || !width) {\n                return false;\n            }\n\n            // best-effort attempt to check if multi-line text will overflow,\n            // rendering an actual element in the DOM might be more accurate\n            // but might not be performant for large lists\n            const textWidth = StringHelper.getTextWidth(\n                displayText,\n                `${fontSize} '${fontFamily}'`\n            );\n\n            // there's less space than expected due to word breaks, so an\n            // arbitary offset is applied\n            return textWidth > width - 50;\n        },\n        [width, displayType, fontSize, fontFamily]\n    );\n\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const shouldTruncateTitle = useMemo(\n        () => hasExceededContainer(label),\n        [hasExceededContainer, label]\n    );\n    const shouldTruncateLabel = useMemo(\n        () => sublabel && hasExceededContainer(sublabel),\n        [hasExceededContainer, sublabel]\n    );\n\n    // css cannot truncate inline elements so force the display to render\n    // them separately\n    const itemDisplayType =\n        truncationType === \"middle\" &&\n        (shouldTruncateTitle || shouldTruncateLabel)\n            ? \"next-line\"\n            : displayType;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMatchInBold = (displayText: string) => {\n        if (!searchTerm) {\n            return displayText;\n        }\n\n        const match = searchTerm.toLowerCase().trim();\n        const startIndex = displayText.toLowerCase().indexOf(match);\n        const endIndex = startIndex + searchTerm.length;\n\n        if (startIndex === -1) {\n            return displayText;\n        }\n\n        return (\n            <>\n                {label.slice(0, startIndex)}\n                <span className={styles.matchedText}>\n                    {label.slice(startIndex, endIndex)}\n                </span>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateFirstLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateSecondLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                styles.label,\n                variant === \"small\" && styles.labelVariantSmall,\n                itemDisplayType === \"next-line\" && styles.labelNextLine\n            )}\n        >\n            <div\n                ref={primaryTextRef}\n                aria-label={label}\n                className={clsx(\n                    styles.primaryText,\n                    bold && styles.primaryTextBold,\n                    disabled && styles.primaryTextDisabled,\n                    !disabled && selected && styles.primaryTextSelected,\n                    itemDisplayType === \"inline\" &&\n                        styles.primaryTextLabelInline,\n                    truncationType === \"end\" && styles.primaryTextTruncateEnd\n                )}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </div>\n            {sublabel && (\n                <div\n                    ref={secondaryTextRef}\n                    aria-label={sublabel}\n                    className={clsx(\n                        styles.secondaryText,\n                        itemDisplayType === \"inline\" &&\n                            styles.secondaryTextLabelInline,\n                        truncationType === \"end\" &&\n                            styles.secondaryTextTruncateEnd,\n                        displayType === \"next-line\"\n                            ? styles.secondaryTextNextLine\n                            : styles.secondaryTextInline\n                    )}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","primaryTextRef","useRef","secondaryTextRef","useApplyStyle","styles.tokens","primaryText","String","secondaryText","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","className","styles.matchedText","renderTruncatedText","clsx","styles.baseTruncateStyle","styles.truncateFirstLine","styles.truncateLineSingle","styles.truncateSecondLine","styles.label","styles.labelVariantSmall","styles.labelNextLine","styles.primaryText","styles.primaryTextBold","styles.primaryTextDisabled","styles.primaryTextSelected","styles.primaryTextLabelInline","styles.primaryTextTruncateEnd","styles.secondaryText","styles.secondaryTextLabelInline","styles.secondaryTextTruncateEnd","styles.secondaryTextNextLine","styles.secondaryTextInline"],"mappings":"wsBAuB6B,EACzBA,OACAC,cAAc,SACdC,QACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EACU,UAAZD,EACME,EAAAA,KAAKC,KAAK,gBACVD,EAAAA,KAAKC,KAAK,sBACdC,EAAaF,EAAAA,KAAKC,KAAK,gBACvBE,IAAEA,EAAGC,MAAEA,GAAUC,sBAEjBC,EAAiBC,EAAAA,OAAuB,MACxCC,EAAmBD,EAAAA,OAAuB,MAEhDE,EAAAA,cAAcH,EAAgB,CAC1B,CAACI,EAAAA,OAAcC,YAAYlB,UAAWmB,OAAOnB,KAGjDgB,EAAAA,cAAcD,EAAkB,CAC5B,CAACE,EAAAA,OAAcG,cAAcpB,UAAWmB,OAAOnB,KAMnD,MAAMqB,EAAuBC,eACxBC,IACG,GAAoB,WAAhB1B,IAA6Bc,EAC7B,OAAO,EAaX,OAPkBa,eAAaC,aAC3BF,EACA,GAAGjB,MAAaG,MAKDE,EAAQ,EAAE,GAEjC,CAACA,EAAOd,EAAaS,EAAUG,IAM7BiB,EAAsBC,EAAAA,SACxB,IAAMN,EAAqBvB,IAC3B,CAACuB,EAAsBvB,IAErB8B,EAAsBD,WACxB,IAAMxB,GAAYkB,EAAqBlB,IACvC,CAACkB,EAAsBlB,IAKrB0B,EACiB,WAAnBzB,IACCsB,GAAuBE,GAClB,YACA/B,EAKJiC,EAAqBP,IACvB,IAAKxB,EACD,OAAOwB,EAGX,MAAMQ,EAAQhC,EAAWiC,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAanC,EAAWsC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,OAAAC,EAAAA,SAAA,CAAAC,SAAA,CACK1C,EAAM2C,MAAM,EAAGP,GAChBQ,EAAAA,IAAA,OAAA,CAAMC,UAAWC,EAAAA,YAAkBJ,SAC9B1C,EAAM2C,MAAMP,EAAYE,KAE5BtC,EAAM2C,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIE,EAAAA,IAAA,MAAA,CACIC,UAAWG,EAAAA,QACPC,EAAAA,kBACAC,oBACa,IAAbhD,GAAkBiD,EAAAA,oBACrB,eAAA,EAAAT,SAGAV,EAAkBP,KAEvBmB,EAAAA,IAAA,MAAA,CACIC,UAAWG,EAAAA,QACPC,EAAAA,kBACAG,EAAAA,mBACa,IAAblD,GAAkBiD,EAAAA,oBACrB,eAAA,EAAAT,SAGAV,EAAkBP,QAMnC,OACIe,EAAAA,KAAA,MAAA,CACI5B,IAAKA,EACLiC,UAAWG,EAAAA,QACPK,EAAAA,MACY,UAAZ9C,GAAuB+C,EAAAA,kBACH,cAApBvB,GAAmCwB,EAAAA,eACtCb,SAAA,CAEDE,EAAAA,WACIhC,IAAKG,EAAc,aACPf,EACZ6C,UAAWG,EAAAA,QACPQ,cACA1D,GAAQ2D,EAAAA,gBACRrD,GAAYsD,EAAAA,qBACXtD,GAAYD,GAAYwD,EAAAA,oBACL,WAApB5B,GACI6B,EAAAA,uBACe,QAAnBtD,GAA4BuD,EAAAA,wBAC/BnB,SAEmB,WAAnBpC,GAA+BsB,EAC1BmB,EAAoB/C,GACpBgC,EAAkBhC,KAE3BK,GACGuC,EAAAA,IAAA,MAAA,CACIhC,IAAKK,EAAgB,aACTZ,EACZwC,UAAWG,EAAAA,QACPc,EAAAA,cACoB,WAApB/B,GACIgC,EAAAA,yBACe,QAAnBzD,GACI0D,EAAAA,yBACY,cAAhBjE,EACMkE,EAAAA,sBACAC,EAAAA,8BAGU,WAAnB5D,GAA+BwB,EAC1BiB,EAAoB1C,GACpBA,MAGZ"}

package/cjs/shared/dropdown-list/dropdown-list.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons/exclamation-circle-fill"),r=require("@lifesg/react-icons/square"),n=require("@lifesg/react-icons/square-fill"),s=require("@lifesg/react-icons/square-tick-fill"),l=require("@lifesg/react-icons/tick"),i=require("clsx"),a=require("../../external/lodash/find.js"),o=require("../../external/lodash/isEqual.js"),u=require("react"),c=require("react-virtuoso"),d=require("../../markup/markup.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var m=require("../../theme/utils/use-apply-styles.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var v=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var f=require("../../util/use-event.js"),p=require("../../util/use-event-listener.js"),x=require("../../util/use-mount.js"),h=require("../../util/use-previous.js"),j=require("../accessibility/index.js"),b=require("../component-loading-spinner/component-loading-spinner.js"),q=require("../dropdown-wrapper/element-with-dropdown.js"),g=require("../input-wrapper/input-wrapper.js"),I=require("./dropdown-label.js"),y=require("./dropdown-list.styles.js"),S=require("./dropdown-list-state.js"),k=require("./dropdown-search.js"),C=require("./virtuoso-components.js");function w(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var T=w(i);const L=u.forwardRef((({listItems:i,multiSelect:w,maxSelectable:L,selectedItems:N,disableItemFocus:E,itemsLoadState:D="success",itemTruncationType:R="end",itemMaxLines:A=2,labelDisplayType:F="inline",variant:B="default",listboxId:M,ariaLabel:P,matchElementWidth:V=!1,width:W,topScrollItem:O,onSelectItem:$,onSelectAll:_,onDismiss:H,onRetry:U,valueExtractor:z,listExtractor:G,renderListItem:J,renderCustomCallToAction:K,enableSearch:Q,hideNoResultsDisplay:X,noResultsDescription:Y,customLabels:Z,searchPlaceholder:ee,searchFunction:te,onSearch:re},ne)=>{const{noResultsLabel:se="No results found.",selectAllButtonLabel:le="Select all",clearAllButtonLabel:ie="Clear all"}=Z||{},ae=(null==Z?void 0:Z.searchPlaceholder)||ee||"Search",oe=(null==Z?void 0:Z.noResultsDescription)||Y,{focusedIndex:ue,setFocusedIndex:ce}=u.useContext(S.DropdownListStateContext),{elementWidth:de,setFloatingRef:me,getFloatingProps:ve,styles:fe}=q.useDropdownRender(),[pe,xe]=u.useState(""),[he,je]=u.useState(null!=i?i:[]),be=h.useCompare(D),qe=x.useIsMounted(),ge=u.useRef(null),Ie=u.useRef([]),ye=u.useRef(null),Se=u.useRef(null),ke=!!L&&!!N&&(null==N?void 0:N.length)===L;let Ce={};W?Ce={[y.tokens.containerWidth]:`${W}px`,[y.tokens.containerMinWidth]:"0px"}:V&&de&&(Ce={[y.tokens.containerWidth]:`${de}px`,[y.tokens.containerMinWidth]:`${de}px`});const we=e=>{const t=G?G(e):null==e?void 0:e.toString();return"object"==typeof t?{title:t.title,secondaryLabel:t.secondaryLabel}:{title:null!=t?t:""}},Te=u.useCallback((e=>!!a.default(N,(t=>o.default(t,e)))),[N]),Le=f.useEvent((()=>null==te?void 0:te(pe))),Ne=f.useEvent((()=>null==i?void 0:i.filter((e=>{const{title:t,secondaryLabel:r}=we(e),n=pe.trim().toLowerCase();return t.toLowerCase().includes(n)||r&&r.toLowerCase().includes(n)})))),Ee=u.useCallback((e=>{var t,r;if(E)return;if(ye.current)return ce(-1),void setTimeout((()=>{var e;return null===(e=ye.current)||void 0===e?void 0:e.focus()}),0);const n=null!=he?he:[];if(0===n.length)return;if(void 0!==(null==e?void 0:e.index)){const r=Math.max(0,Math.min(e.index,n.length-1));return null===(t=Se.current)||void 0===t||t.scrollToIndex({index:r,align:"center"}),ce(r),void setTimeout((()=>{var e;return null===(e=Ie.current[r])||void 0===e?void 0:e.focus()}),0)}const s=(null==e?void 0:e.preferSelected)?n.findIndex((e=>Te(e))):-1,l=-1!==s?s:ue>=0&&ue<n.length?ue:0;null===(r=Se.current)||void 0===r||r.scrollToIndex({index:l,align:"center"}),ce(l),setTimeout((()=>{var e;return null===(e=Ie.current[l])||void 0===e?void 0:e.focus()}),0)}),[Te,E,he,ue,ce]),De=(e,t)=>{ke&&!Te(e)||(ce(t),null==$||$(e,(e=>z?z(e):e)(e)))},Re=e=>{const t=e.target.value;xe(t),null==re||re()},Ae=()=>{var e;xe(""),null===(e=ye.current)||void 0===e||e.focus(),null==re||re()},Fe=()=>null==U?void 0:U();p.useEventListener("keydown",(e=>{var t,r;switch(e.code){case"ArrowDown":if(e.preventDefault(),ue<he.length-1){const e=ue+1;null===(t=Ie.current[e])||void 0===t||t.focus(),ce(e)}break;case"ArrowUp":if(e.preventDefault(),ue>0){const e=ue-1;null===(r=Ie.current[e])||void 0===r||r.focus(),ce(e)}else 0===ue&&ye.current&&(ye.current.focus(),ce(-1));break;case"Space":case"Enter":document.activeElement===Ie.current[ue]&&(e.preventDefault(),he[ue]&&De(he[ue],ue))}})),u.useImperativeHandle(ne,(()=>({refocus:Ee})),[Ee]),u.useEffect((()=>{var e;if(!O)return void(null===(e=Se.current)||void 0===e||e.scrollTo({top:0}));const t=setTimeout((()=>{if(!i)return;const e=i.indexOf(O);Se.current&&-1!==e&&(Se.current.scrollToIndex({index:e}),ce(e))}),0);return()=>clearTimeout(t)}),[Ie,i,ce,O]),u.useEffect((()=>{E||qe&&be&&"success"===D&&ye.current&&(ce(-1),ye.current.focus())}),[qe,be,D,ce,E]),u.useEffect((()=>{var e;je(null!==(e=""===pe?i:te?Le():Ne())&&void 0!==e?e:[])}),[Le,Ne,i,te,pe]),u.useEffect((()=>{var e,t,r;if(qe)return;if(E||!i)return;const n=i.findIndex((e=>Te(e)));ye.current?(ce(-1),setTimeout((()=>{var e;return null===(e=ye.current)||void 0===e?void 0:e.focus()}),200)):ue>0?(null===(e=Se.current)||void 0===e||e.scrollToIndex({index:ue,align:"center"}),setTimeout((()=>{var e;return null===(e=Ie.current[ue])||void 0===e?void 0:e.focus()}),200)):-1!==n?(null===(t=Se.current)||void 0===t||t.scrollToIndex({index:n,align:"center"}),ce(n),setTimeout((()=>{var e;return null===(e=Ie.current[n])||void 0===e?void 0:e.focus()}),200)):(null===(r=Se.current)||void 0===r||r.scrollToIndex({index:0}),ce(0),setTimeout((()=>{var e;return null===(e=Ie.current[0])||void 0===e?void 0:e.focus()}),200))}),[Te,E,ue,i,qe,ce]),m.useApplyStyle(ge,Object.assign({},Ce));const Be=t=>w?ke&&!t?e.jsx(n.SquareFillIcon,{"aria-hidden":!0,className:T.default(y.baseCheckboxIndicatorStyle,y.checkboxDisabledIndicator)}):t?e.jsx(s.SquareTickFillIcon,{"aria-hidden":!0,className:T.default(y.baseCheckboxIndicatorStyle,y.checkboxSelectedIndicator)}):e.jsx(r.SquareIcon,{"aria-hidden":!0,className:T.default(y.baseCheckboxIndicatorStyle,y.checkboxUnselectedIndicator)}):t?e.jsx(l.TickIcon,{"aria-hidden":!0,className:T.default(y.baseIndicatorStyle,y.selectedIndicator)}):e.jsx("div",{className:y.baseIndicatorStyle}),Me=(t,r)=>{const{title:n,secondaryLabel:s}=we(t);return e.jsx(I.DropdownLabel,{displayType:F,label:n,maxLines:A,selected:r,disabled:!r&&ke,sublabel:s,truncationType:R,variant:B})},Pe=(t,r)=>{if(!U||"success"===D){const n=Te(t),s=r===ue,l=!n&&ke;return e.jsx("li",{"aria-selected":n,"aria-multiselectable":w,"aria-disabled":l,"aria-posinset":r+1,"aria-setsize":null==he?void 0:he.length,"data-testid":"list-item",onClick:()=>De(t,r),onMouseEnter:()=>(e=>ce(e))(r),ref:e=>{Ie.current[r]=e},role:"option",tabIndex:s?0:-1,className:T.default(y.listItem,l&&y.listItemDisabled||s&&n&&y.listItemActiveSelected||s&&y.listItemActive),children:J?J(t,{selected:n}):e.jsxs(e.Fragment,{children:[Be(n),Me(t,n)]})},((e,t)=>`item_${t}__${z?z(e):e}`)(t,r))}},Ve=()=>{if((Q||te)&&"success"===D)return e.jsx(k.DropdownSearch,{ref:ye,onChange:Re,value:pe,placeholder:ae,"data-testid":"search-input","aria-label":"Enter text to search",onClear:Ae,variant:B})},We=()=>{if(N&&w&&he.length>0&&!pe&&"success"===D)return e.jsx("div",{className:y.selectAllContainer,children:e.jsx(g.BasicButton,{onClick:_,type:"button",className:T.default(y.baseButton,y.selectAllButton),children:L||0!==N.length?ie:le})})},Oe=()=>{if(!X&&(pe||!Q)&&0===he.length&&"success"===D)return e.jsxs(e.Fragment,{children:[e.jsxs("div",{"data-testid":"list-no-results",className:y.resultStateContainer,children:[e.jsx(t.ExclamationCircleFillIcon,{"data-testid":"no-result-icon",className:y.labelIcon}),se]}),oe&&e.jsx(d.Markup,{"data-testid":"no-result-desc",className:y.noResultDescContainer,children:oe})]})},$e=()=>{if(U&&"loading"===D)return e.jsxs("div",{"data-testid":"list-loading",className:y.resultStateContainer,children:[e.jsx(b.ComponentLoadingSpinner,{className:y.spinner}),"Loading..."]})},_e=()=>{if(U&&"fail"===D)return e.jsxs("div",{"data-testid":"list-fail",className:y.resultStateContainer,children:[e.jsx(t.ExclamationCircleFillIcon,{"data-testid":"load-error-icon",className:y.labelIcon}),"Failed to load. ",e.jsx(g.BasicButton,{onClick:Fe,type:"button",className:T.default(y.baseButton,y.tryAgainButton),children:"Try again."})]})},He=()=>{var t;const r="test"===process.env.NODE_ENV;return e.jsx(c.Virtuoso,Object.assign({ref:Se,style:{height:"100%"},data:he,customScrollParent:null!==(t=ge.current)&&void 0!==t?t:void 0,itemContent:(e,t)=>Pe(t,e),components:{List:C.VirtuosoList,Item:C.VirtuosoItem},context:{listProps:{id:M,role:"listbox","aria-multiselectable":w},listItemProps:{role:"none"}}},r?{initialItemCount:he.length}:{}),r?he.length:void 0)};return e.jsxs("div",Object.assign({"data-testid":"dropdown-container",ref:v.mergeRefs(ge,me)},ve(),{className:T.default(y.container,"small"===B&&y.containerVariantSmall),style:fe,children:[e.jsx(j.VisuallyHidden,{role:"status",children:P}),e.jsxs("div",{"data-testid":"dropdown-list",role:"group","aria-label":P,className:y.list,children:[Ve(),We(),Oe(),$e(),_e(),He()]}),(()=>{if(K)return e.jsx("div",{"data-testid":"custom-cta",children:K(H,he)})})()]}))}));exports.DropdownList=L;
+"use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons/exclamation-circle-fill"),r=require("@lifesg/react-icons/square"),s=require("@lifesg/react-icons/square-fill"),l=require("@lifesg/react-icons/square-tick-fill"),n=require("@lifesg/react-icons/tick"),i=require("clsx"),a=require("../../external/lodash/find.js"),o=require("../../external/lodash/isEqual.js"),u=require("react"),c=require("react-virtuoso"),d=require("../../markup/markup.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var m=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var v=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var f=require("../../util/use-event.js"),p=require("../../util/use-event-listener.js"),h=require("../../util/use-mount.js"),x=require("../../util/use-previous.js"),j=require("../accessibility/index.js"),b=require("../component-loading-spinner/component-loading-spinner.js"),q=require("../dropdown-wrapper/element-with-dropdown.js"),I=require("../input-wrapper/input-wrapper.js"),g=require("./dropdown-label.js"),y=require("./dropdown-list.styles.js"),S=require("./dropdown-list-state.js"),C=require("./dropdown-search.js"),w=require("./virtuoso-components.js");function k(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var T=k(i);const L=u.forwardRef((({listItems:i,multiSelect:k,maxSelectable:L,selectedItems:N,disableItemFocus:E,itemsLoadState:D="success",itemTruncationType:R="end",itemMaxLines:A=2,labelDisplayType:F="inline",variant:B="default",listboxId:M,ariaLabel:P,matchElementWidth:V=!1,width:O,topScrollItem:_,onSelectItem:W,onSelectAll:$,onDismiss:H,onRetry:U,valueExtractor:z,listExtractor:G,renderListItem:J,renderCustomCallToAction:K,enableSearch:Q,hideNoResultsDisplay:X,noResultsDescription:Y,customLabels:Z,searchPlaceholder:ee,searchFunction:te,onSearch:re},se)=>{const{noResultsLabel:le="No results found.",selectAllButtonLabel:ne="Select all",clearAllButtonLabel:ie="Clear all"}=Z||{},ae=(null==Z?void 0:Z.searchPlaceholder)||ee||"Search",oe=(null==Z?void 0:Z.noResultsDescription)||Y,{focusedIndex:ue,setFocusedIndex:ce}=u.useContext(S.DropdownListStateContext),{elementWidth:de,setFloatingRef:me,getFloatingProps:ve,styles:fe}=q.useDropdownRender(),[pe,he]=u.useState(""),[xe,je]=u.useState(null!=i?i:[]),be=x.useCompare(D),qe=h.useIsMounted(),Ie=u.useRef(null),ge=u.useRef([]),ye=u.useRef(null),Se=u.useRef(null),Ce=!!L&&!!N&&(null==N?void 0:N.length)===L;let we,ke="default";O?(we=O,ke="custom"):V&&de&&(we=`${de}px`,ke="match"),m.useApplyStyle(Ie,{[y.tokens.containerWidth]:we});const Te=e=>{const t=G?G(e):null==e?void 0:e.toString();return"object"==typeof t?{title:t.title,secondaryLabel:t.secondaryLabel}:{title:null!=t?t:""}},Le=u.useCallback((e=>!!a.default(N,(t=>o.default(t,e)))),[N]),Ne=f.useEvent((()=>null==te?void 0:te(pe))),Ee=f.useEvent((()=>null==i?void 0:i.filter((e=>{const{title:t,secondaryLabel:r}=Te(e),s=pe.trim().toLowerCase();return t.toLowerCase().includes(s)||r&&r.toLowerCase().includes(s)})))),De=u.useCallback((e=>{var t,r;if(E)return;if(ye.current)return ce(-1),void setTimeout((()=>{var e;return null===(e=ye.current)||void 0===e?void 0:e.focus()}),0);const s=null!=xe?xe:[];if(0===s.length)return;if(void 0!==(null==e?void 0:e.index)){const r=Math.max(0,Math.min(e.index,s.length-1));return null===(t=Se.current)||void 0===t||t.scrollToIndex({index:r,align:"center"}),ce(r),void setTimeout((()=>{var e;return null===(e=ge.current[r])||void 0===e?void 0:e.focus()}),0)}const l=(null==e?void 0:e.preferSelected)?s.findIndex((e=>Le(e))):-1,n=-1!==l?l:ue>=0&&ue<s.length?ue:0;null===(r=Se.current)||void 0===r||r.scrollToIndex({index:n,align:"center"}),ce(n),setTimeout((()=>{var e;return null===(e=ge.current[n])||void 0===e?void 0:e.focus()}),0)}),[Le,E,xe,ue,ce]),Re=(e,t)=>{Ce&&!Le(e)||(ce(t),null==W||W(e,(e=>z?z(e):e)(e)))},Ae=e=>{const t=e.target.value;he(t),null==re||re()},Fe=()=>{var e;he(""),null===(e=ye.current)||void 0===e||e.focus(),null==re||re()},Be=()=>null==U?void 0:U();p.useEventListener("keydown",(e=>{var t,r;switch(e.code){case"ArrowDown":if(e.preventDefault(),ue<xe.length-1){const e=ue+1;null===(t=ge.current[e])||void 0===t||t.focus(),ce(e)}break;case"ArrowUp":if(e.preventDefault(),ue>0){const e=ue-1;null===(r=ge.current[e])||void 0===r||r.focus(),ce(e)}else 0===ue&&ye.current&&(ye.current.focus(),ce(-1));break;case"Space":case"Enter":document.activeElement===ge.current[ue]&&(e.preventDefault(),xe[ue]&&Re(xe[ue],ue))}})),u.useImperativeHandle(se,(()=>({refocus:De})),[De]),u.useEffect((()=>{var e;if(!_)return void(null===(e=Se.current)||void 0===e||e.scrollTo({top:0}));const t=setTimeout((()=>{if(!i)return;const e=i.indexOf(_);Se.current&&-1!==e&&(Se.current.scrollToIndex({index:e}),ce(e))}),0);return()=>clearTimeout(t)}),[ge,i,ce,_]),u.useEffect((()=>{E||qe&&be&&"success"===D&&ye.current&&(ce(-1),ye.current.focus())}),[qe,be,D,ce,E]),u.useEffect((()=>{var e;je(null!==(e=""===pe?i:te?Ne():Ee())&&void 0!==e?e:[])}),[Ne,Ee,i,te,pe]),u.useEffect((()=>{var e,t,r;if(qe)return;if(E||!i)return;const s=i.findIndex((e=>Le(e)));ye.current?(ce(-1),setTimeout((()=>{var e;return null===(e=ye.current)||void 0===e?void 0:e.focus()}),200)):ue>0?(null===(e=Se.current)||void 0===e||e.scrollToIndex({index:ue,align:"center"}),setTimeout((()=>{var e;return null===(e=ge.current[ue])||void 0===e?void 0:e.focus()}),200)):-1!==s?(null===(t=Se.current)||void 0===t||t.scrollToIndex({index:s,align:"center"}),ce(s),setTimeout((()=>{var e;return null===(e=ge.current[s])||void 0===e?void 0:e.focus()}),200)):(null===(r=Se.current)||void 0===r||r.scrollToIndex({index:0}),ce(0),setTimeout((()=>{var e;return null===(e=ge.current[0])||void 0===e?void 0:e.focus()}),200))}),[Le,E,ue,i,qe,ce]);const Me=t=>k?Ce&&!t?e.jsx(s.SquareFillIcon,{"aria-hidden":!0,className:T.default(y.baseCheckboxIndicatorStyle,y.checkboxDisabledIndicator)}):t?e.jsx(l.SquareTickFillIcon,{"aria-hidden":!0,className:T.default(y.baseCheckboxIndicatorStyle,y.checkboxSelectedIndicator)}):e.jsx(r.SquareIcon,{"aria-hidden":!0,className:T.default(y.baseCheckboxIndicatorStyle,y.checkboxUnselectedIndicator)}):t?e.jsx(n.TickIcon,{"aria-hidden":!0,className:T.default(y.baseIndicatorStyle,y.selectedIndicator)}):e.jsx("div",{className:y.baseIndicatorStyle}),Pe=(t,r)=>{const{title:s,secondaryLabel:l}=Te(t);return e.jsx(g.DropdownLabel,{displayType:F,label:s,maxLines:A,selected:r,disabled:!r&&Ce,sublabel:l,truncationType:R,variant:B})},Ve=(t,r)=>{if(!U||"success"===D){const s=Le(t),l=r===ue,n=!s&&Ce;return e.jsx("li",{"aria-selected":s,"aria-multiselectable":k,"aria-disabled":n,"aria-posinset":r+1,"aria-setsize":null==xe?void 0:xe.length,"data-testid":"list-item",onClick:()=>Re(t,r),onMouseEnter:()=>(e=>ce(e))(r),ref:e=>{ge.current[r]=e},role:"option",tabIndex:l?0:-1,className:T.default(y.listItem,n&&y.listItemDisabled||l&&s&&y.listItemActiveSelected||l&&y.listItemActive),children:J?J(t,{selected:s}):e.jsxs(e.Fragment,{children:[Me(s),Pe(t,s)]})},((e,t)=>`item_${t}__${z?z(e):e}`)(t,r))}},Oe=()=>{if((Q||te)&&"success"===D)return e.jsx(C.DropdownSearch,{ref:ye,onChange:Ae,value:pe,placeholder:ae,"data-testid":"search-input","aria-label":"Enter text to search",onClear:Fe,variant:B})},_e=()=>{if(N&&k&&xe.length>0&&!pe&&"success"===D)return e.jsx("div",{className:y.selectAllContainer,children:e.jsx(I.BasicButton,{onClick:$,type:"button",className:T.default(y.baseButton,y.selectAllButton),children:L||0!==N.length?ie:ne})})},We=()=>{if(!X&&(pe||!Q)&&0===xe.length&&"success"===D)return e.jsxs(e.Fragment,{children:[e.jsxs("div",{"data-testid":"list-no-results",className:y.resultStateContainer,children:[e.jsx(t.ExclamationCircleFillIcon,{"data-testid":"no-result-icon",className:y.labelIcon}),le]}),oe&&e.jsx(d.Markup,{"data-testid":"no-result-desc",className:y.noResultDescContainer,children:oe})]})},$e=()=>{if(U&&"loading"===D)return e.jsxs("div",{"data-testid":"list-loading",className:y.resultStateContainer,children:[e.jsx(b.ComponentLoadingSpinner,{className:y.spinner}),"Loading..."]})},He=()=>{if(U&&"fail"===D)return e.jsxs("div",{"data-testid":"list-fail",className:y.resultStateContainer,children:[e.jsx(t.ExclamationCircleFillIcon,{"data-testid":"load-error-icon",className:y.labelIcon}),"Failed to load. ",e.jsx(I.BasicButton,{onClick:Be,type:"button",className:T.default(y.baseButton,y.tryAgainButton),children:"Try again."})]})},Ue=()=>{var t;const r="test"===process.env.NODE_ENV;return e.jsx(c.Virtuoso,Object.assign({ref:Se,style:{height:"100%"},data:xe,customScrollParent:null!==(t=Ie.current)&&void 0!==t?t:void 0,itemContent:(e,t)=>Ve(t,e),components:{List:w.VirtuosoList,Item:w.VirtuosoItem},context:{listProps:{id:M,role:"listbox","aria-multiselectable":k},listItemProps:{role:"none"}}},r?{initialItemCount:xe.length}:{}),r?xe.length:void 0)};return e.jsxs("div",Object.assign({"data-testid":"dropdown-container",ref:v.mergeRefs(Ie,me)},ve(),{"data-width-type":ke,className:T.default(y.container,"small"===B&&y.containerVariantSmall),style:fe,children:[e.jsx(j.VisuallyHidden,{role:"status",children:P}),e.jsxs("div",{"data-testid":"dropdown-list",role:"group","aria-label":P,className:y.list,children:[Oe(),_e(),We(),$e(),He(),Ue()]}),(()=>{if(K)return e.jsx("div",{"data-testid":"custom-cta",children:K(H,xe)})})()]}))}));exports.DropdownList=L;
 //# sourceMappingURL=dropdown-list.js.map

package/cjs/shared/dropdown-list/dropdown-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-list.js","sources":["../../../../src/shared/dropdown-list/dropdown-list.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareFillIcon } from \"@lifesg/react-icons/square-fill\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport find from \"lodash/find\";\nimport isEqual from \"lodash/isEqual\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport type { VirtuosoHandle } from \"react-virtuoso\";\nimport { Virtuoso } from \"react-virtuoso\";\n\nimport { Markup } from \"../../markup\";\nimport { useApplyStyle } from \"../../theme\";\nimport {\n    mergeRefs,\n    useCompare,\n    useEvent,\n    useEventListener,\n    useIsMounted,\n} from \"../../util\";\nimport { VisuallyHidden } from \"../accessibility\";\nimport { ComponentLoadingSpinner } from \"../component-loading-spinner\";\nimport { useDropdownRender } from \"../dropdown-wrapper\";\nimport { BasicButton } from \"../input-wrapper\";\nimport { DropdownLabel } from \"./dropdown-label\";\nimport * as styles from \"./dropdown-list.styles\";\nimport { DropdownListStateContext } from \"./dropdown-list-state\";\nimport { DropdownSearch } from \"./dropdown-search\";\nimport type {\n    DropdownListApi,\n    DropdownListProps,\n    ListItemDisplayProps,\n} from \"./types\";\nimport { VirtuosoItem, VirtuosoList } from \"./virtuoso-components\";\n\n/**\n * NOTE: This component is not directly exportable but forms part of a component\n */\nconst DropdownListInner = <T, V>(\n    {\n        listItems,\n        multiSelect,\n        maxSelectable,\n        selectedItems,\n        disableItemFocus,\n        itemsLoadState = \"success\",\n        itemTruncationType = \"end\",\n        itemMaxLines = 2,\n        labelDisplayType = \"inline\",\n        variant = \"default\",\n        listboxId,\n        ariaLabel,\n        matchElementWidth = false,\n        width,\n        topScrollItem,\n        onSelectItem,\n        onSelectAll,\n        onDismiss,\n        onRetry,\n        /* DropdownDisplayProps */\n        valueExtractor,\n        listExtractor,\n        renderListItem,\n        renderCustomCallToAction,\n        /* DropdownSearchProps */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription: _noResultsDescription,\n        customLabels,\n        searchPlaceholder: _searchPlaceholder,\n        searchFunction,\n        onSearch,\n    }: DropdownListProps<T, V>,\n    ref: React.ForwardedRef<DropdownListApi>\n): JSX.Element => {\n    // =========================================================================\n    // CONST, REF, STATE\n    // =========================================================================\n    const {\n        noResultsLabel = \"No results found.\",\n        selectAllButtonLabel = \"Select all\",\n        clearAllButtonLabel = \"Clear all\",\n    } = customLabels || {};\n    const searchPlaceholder =\n        customLabels?.searchPlaceholder || _searchPlaceholder || \"Search\";\n    const noResultsDescription =\n        customLabels?.noResultsDescription || _noResultsDescription;\n    const { focusedIndex, setFocusedIndex } = useContext(\n        DropdownListStateContext\n    );\n    const {\n        elementWidth,\n        setFloatingRef,\n        getFloatingProps,\n        styles: floatingStyles,\n    } = useDropdownRender();\n    const [searchValue, setSearchValue] = useState<string>(\"\");\n    const [displayListItems, setDisplayListItems] = useState(listItems ?? []);\n    const itemsLoadStateChanged = useCompare(itemsLoadState);\n    const mounted = useIsMounted();\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const listItemRefs = useRef<(HTMLElement | null)[]>([]);\n    const searchInputRef = useRef<HTMLInputElement>(null);\n    const virtuosoRef = useRef<VirtuosoHandle>(null);\n\n    const hasSelectedMax =\n        !!maxSelectable &&\n        !!selectedItems &&\n        selectedItems?.length === maxSelectable;\n\n    let containerWidthStyle = {};\n    if (width) {\n        containerWidthStyle = {\n            [styles.tokens.containerWidth]: `${width}px`,\n            [styles.tokens.containerMinWidth]: `0px`,\n        };\n    } else if (matchElementWidth && elementWidth) {\n        containerWidthStyle = {\n            [styles.tokens.containerWidth]: `${elementWidth}px`,\n            [styles.tokens.containerMinWidth]: `${elementWidth}px`,\n        };\n    }\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getValue = (item: T): V => {\n        return valueExtractor ? valueExtractor(item) : (item as unknown as V);\n    };\n\n    const getItemKey = (item: T, index: number) => {\n        const formattedValue = valueExtractor ? valueExtractor(item) : item;\n        return `item_${index}__${formattedValue}`;\n    };\n\n    const getOptionLabel = (item: T): ListItemDisplayProps => {\n        const value = listExtractor ? listExtractor(item) : item?.toString();\n\n        if (typeof value === \"object\") {\n            return { title: value.title, secondaryLabel: value.secondaryLabel };\n        }\n\n        return { title: value ?? \"\" };\n    };\n\n    const checkListItemSelected = useCallback(\n        (item: T): boolean => {\n            return !!find(selectedItems, (arrItem) => {\n                return isEqual(arrItem, item);\n            });\n        },\n        [selectedItems]\n    );\n\n    const filterItemsByCustomSearch = useEvent(() => {\n        return searchFunction?.(searchValue);\n    });\n\n    const filterItemsByLabel = useEvent(() => {\n        return listItems?.filter((item) => {\n            const { title, secondaryLabel } = getOptionLabel(item);\n            const updatedSearchValue = searchValue.trim().toLowerCase();\n            return (\n                title.toLowerCase().includes(updatedSearchValue) ||\n                (secondaryLabel &&\n                    secondaryLabel.toLowerCase().includes(updatedSearchValue))\n            );\n        });\n    });\n\n    const refocus = useCallback(\n        (opts?: { index?: number; preferSelected?: boolean }) => {\n            if (disableItemFocus) return;\n\n            if (searchInputRef.current) {\n                setFocusedIndex(-1);\n                setTimeout(() => searchInputRef.current?.focus(), 0);\n                return;\n            }\n\n            const items = displayListItems ?? [];\n            if (items.length === 0) return;\n\n            if (opts?.index !== undefined) {\n                const forced = Math.max(\n                    0,\n                    Math.min(opts.index, items.length - 1)\n                );\n                virtuosoRef.current?.scrollToIndex({\n                    index: forced,\n                    align: \"center\",\n                });\n                setFocusedIndex(forced);\n                setTimeout(() => listItemRefs.current[forced]?.focus(), 0);\n\n                return;\n            }\n\n            const selectedIndex = opts?.preferSelected\n                ? items.findIndex((item) => checkListItemSelected(item))\n                : -1;\n\n            const nextIndex =\n                selectedIndex !== -1\n                    ? selectedIndex\n                    : focusedIndex >= 0 && focusedIndex < items.length\n                    ? focusedIndex\n                    : 0;\n\n            virtuosoRef.current?.scrollToIndex({\n                index: nextIndex,\n                align: \"center\",\n            });\n            setFocusedIndex(nextIndex);\n            setTimeout(() => listItemRefs.current[nextIndex]?.focus(), 0);\n        },\n        [\n            checkListItemSelected,\n            disableItemFocus,\n            displayListItems,\n            focusedIndex,\n            setFocusedIndex,\n        ]\n    );\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleKeyboardPress = (event: KeyboardEvent) => {\n        switch (event.code) {\n            case \"ArrowDown\":\n                event.preventDefault();\n                if (focusedIndex < displayListItems.length - 1) {\n                    const upcomingIndex = focusedIndex + 1;\n                    listItemRefs.current[upcomingIndex]?.focus();\n                    setFocusedIndex(upcomingIndex);\n                }\n                break;\n            case \"ArrowUp\":\n                event.preventDefault();\n                if (focusedIndex > 0) {\n                    const upcomingIndex = focusedIndex - 1;\n                    listItemRefs.current[upcomingIndex]?.focus();\n                    setFocusedIndex(upcomingIndex);\n                } else if (focusedIndex === 0 && searchInputRef.current) {\n                    searchInputRef.current.focus();\n                    setFocusedIndex(-1);\n                }\n                break;\n            case \"Space\":\n            case \"Enter\":\n                if (\n                    document.activeElement ===\n                    listItemRefs.current[focusedIndex]\n                ) {\n                    event.preventDefault();\n                    if (displayListItems[focusedIndex]) {\n                        handleListItemClick(\n                            displayListItems[focusedIndex],\n                            focusedIndex\n                        );\n                    }\n                }\n                break;\n            default:\n                break;\n        }\n    };\n\n    const handleListItemClick = (item: T, upcomingIndex: number) => {\n        if (hasSelectedMax && !checkListItemSelected(item)) return;\n        setFocusedIndex(upcomingIndex);\n        onSelectItem?.(item, getValue(item));\n    };\n\n    const handleListItemHover = (index: number) => setFocusedIndex(index);\n\n    const handleSearchInputChange = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        const value = event.target.value;\n        setSearchValue(value);\n        onSearch?.();\n    };\n\n    const handleOnClear = () => {\n        setSearchValue(\"\");\n        searchInputRef.current?.focus();\n        onSearch?.();\n    };\n\n    const handleTryAgain = () => onRetry?.();\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEventListener(\"keydown\", handleKeyboardPress);\n    useImperativeHandle(ref, () => ({ refocus }), [refocus]);\n\n    useEffect(() => {\n        if (!topScrollItem) {\n            virtuosoRef.current?.scrollTo({ top: 0 });\n            return;\n        }\n        const timer = setTimeout(() => {\n            if (!listItems) return;\n\n            const index = listItems.indexOf(topScrollItem);\n            if (virtuosoRef.current && index !== -1) {\n                virtuosoRef.current.scrollToIndex({ index });\n                setFocusedIndex(index);\n            }\n        }, 0);\n\n        return () => clearTimeout(timer);\n    }, [listItemRefs, listItems, setFocusedIndex, topScrollItem]);\n\n    useEffect(() => {\n        if (disableItemFocus) return;\n        if (!mounted || !itemsLoadStateChanged) return;\n\n        if (itemsLoadState === \"success\") {\n            if (searchInputRef.current) {\n                setFocusedIndex(-1);\n                searchInputRef.current.focus();\n            }\n        }\n    }, [\n        mounted,\n        itemsLoadStateChanged,\n        itemsLoadState,\n        setFocusedIndex,\n        disableItemFocus,\n    ]);\n\n    useEffect(() => {\n        const filterItems = () => {\n            if (searchValue === \"\") {\n                return listItems;\n            } else if (searchFunction) {\n                return filterItemsByCustomSearch();\n            } else {\n                return filterItemsByLabel();\n            }\n        };\n\n        setDisplayListItems(filterItems() ?? []);\n    }, [\n        filterItemsByCustomSearch,\n        filterItemsByLabel,\n        listItems,\n        searchFunction,\n        searchValue,\n    ]);\n\n    useEffect(() => {\n        if (mounted) {\n            return;\n        }\n\n        if (disableItemFocus || !listItems) return;\n\n        const index = listItems.findIndex((item) =>\n            checkListItemSelected(item)\n        );\n\n        if (searchInputRef.current) {\n            setFocusedIndex(-1);\n            setTimeout(() => searchInputRef.current?.focus(), 200);\n        } else if (focusedIndex > 0) {\n            virtuosoRef.current?.scrollToIndex({\n                index: focusedIndex,\n                align: \"center\",\n            });\n            setTimeout(() => listItemRefs.current[focusedIndex]?.focus(), 200);\n        } else if (index !== -1) {\n            virtuosoRef.current?.scrollToIndex({ index, align: \"center\" });\n            setFocusedIndex(index);\n            setTimeout(() => listItemRefs.current[index]?.focus(), 200);\n        } else {\n            virtuosoRef.current?.scrollToIndex({ index: 0 });\n            setFocusedIndex(0);\n            setTimeout(() => listItemRefs.current[0]?.focus(), 200);\n        }\n    }, [\n        checkListItemSelected,\n        disableItemFocus,\n        focusedIndex,\n        listItems,\n        mounted,\n        setFocusedIndex,\n    ]);\n\n    // =========================================================================\n    // APPLY STYLES\n    // =========================================================================\n\n    useApplyStyle(nodeRef, {\n        ...containerWidthStyle,\n    });\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderListItemIcon = (selected: boolean) => {\n        if (multiSelect) {\n            if (hasSelectedMax && !selected) {\n                return (\n                    <SquareFillIcon\n                        aria-hidden\n                        className={clsx(\n                            styles.baseCheckboxIndicatorStyle,\n                            styles.checkboxDisabledIndicator\n                        )}\n                    />\n                );\n            }\n\n            return selected ? (\n                <SquareTickFillIcon\n                    aria-hidden\n                    className={clsx(\n                        styles.baseCheckboxIndicatorStyle,\n                        styles.checkboxSelectedIndicator\n                    )}\n                />\n            ) : (\n                <SquareIcon\n                    aria-hidden\n                    className={clsx(\n                        styles.baseCheckboxIndicatorStyle,\n                        styles.checkboxUnselectedIndicator\n                    )}\n                />\n            );\n        }\n\n        return selected ? (\n            <TickIcon\n                aria-hidden\n                className={clsx(\n                    styles.baseIndicatorStyle,\n                    styles.selectedIndicator\n                )}\n            />\n        ) : (\n            <div className={styles.baseIndicatorStyle} />\n        );\n    };\n\n    const renderDropdownLabel = (item: T, selected: boolean) => {\n        const { title, secondaryLabel } = getOptionLabel(item);\n\n        return (\n            <DropdownLabel\n                displayType={labelDisplayType}\n                label={title}\n                maxLines={itemMaxLines}\n                selected={selected}\n                disabled={!selected && hasSelectedMax}\n                sublabel={secondaryLabel}\n                truncationType={itemTruncationType}\n                variant={variant}\n            />\n        );\n    };\n\n    const renderItem = (item: T, index: number) => {\n        if (!onRetry || itemsLoadState === \"success\") {\n            const selected = checkListItemSelected(item);\n            const active = index === focusedIndex;\n            const disabled = !selected && hasSelectedMax;\n            return (\n                <li\n                    aria-selected={selected}\n                    aria-multiselectable={multiSelect}\n                    aria-disabled={disabled}\n                    aria-posinset={index + 1}\n                    aria-setsize={displayListItems?.length}\n                    data-testid=\"list-item\"\n                    key={getItemKey(item, index)}\n                    onClick={() => handleListItemClick(item, index)}\n                    onMouseEnter={() => handleListItemHover(index)}\n                    ref={(element) => {\n                        listItemRefs.current[index] = element;\n                    }}\n                    role=\"option\"\n                    tabIndex={active ? 0 : -1}\n                    className={clsx(\n                        styles.listItem,\n                        (disabled && styles.listItemDisabled) ||\n                            (active &&\n                                selected &&\n                                styles.listItemActiveSelected) ||\n                            (active && styles.listItemActive)\n                    )}\n                >\n                    {renderListItem ? (\n                        renderListItem(item, { selected })\n                    ) : (\n                        <>\n                            {renderListItemIcon(selected)}\n                            {renderDropdownLabel(item, selected)}\n                        </>\n                    )}\n                </li>\n            );\n        }\n    };\n\n    const renderSearchInput = () => {\n        if ((enableSearch || searchFunction) && itemsLoadState === \"success\") {\n            return (\n                <DropdownSearch\n                    ref={searchInputRef}\n                    onChange={handleSearchInputChange}\n                    value={searchValue}\n                    placeholder={searchPlaceholder}\n                    data-testid=\"search-input\"\n                    aria-label=\"Enter text to search\"\n                    onClear={handleOnClear}\n                    variant={variant}\n                />\n            );\n        }\n    };\n\n    const renderSelectAll = () => {\n        if (\n            selectedItems &&\n            multiSelect &&\n            displayListItems.length > 0 &&\n            !searchValue &&\n            itemsLoadState === \"success\"\n        ) {\n            return (\n                <div className={styles.selectAllContainer}>\n                    <BasicButton\n                        onClick={onSelectAll}\n                        type=\"button\"\n                        className={clsx(\n                            styles.baseButton,\n                            styles.selectAllButton\n                        )}\n                    >\n                        {maxSelectable || selectedItems.length !== 0\n                            ? clearAllButtonLabel\n                            : selectAllButtonLabel}\n                    </BasicButton>\n                </div>\n            );\n        }\n    };\n\n    const renderNoResults = () => {\n        if (\n            !hideNoResultsDisplay &&\n            (searchValue || !enableSearch) &&\n            displayListItems.length === 0 &&\n            itemsLoadState === \"success\"\n        ) {\n            return (\n                <>\n                    <div\n                        data-testid=\"list-no-results\"\n                        className={styles.resultStateContainer}\n                    >\n                        <ExclamationCircleFillIcon\n                            data-testid=\"no-result-icon\"\n                            className={styles.labelIcon}\n                        />\n                        {noResultsLabel}\n                    </div>\n                    {noResultsDescription && (\n                        <Markup\n                            data-testid=\"no-result-desc\"\n                            className={styles.noResultDescContainer}\n                        >\n                            {noResultsDescription}\n                        </Markup>\n                    )}\n                </>\n            );\n        }\n    };\n\n    const renderLoading = () => {\n        if (onRetry && itemsLoadState === \"loading\") {\n            return (\n                <div\n                    data-testid=\"list-loading\"\n                    className={styles.resultStateContainer}\n                >\n                    <ComponentLoadingSpinner className={styles.spinner} />\n                    Loading...\n                </div>\n            );\n        }\n    };\n\n    const renderTryAgain = () => {\n        if (onRetry && itemsLoadState === \"fail\") {\n            return (\n                <div\n                    data-testid=\"list-fail\"\n                    className={styles.resultStateContainer}\n                >\n                    <ExclamationCircleFillIcon\n                        data-testid=\"load-error-icon\"\n                        className={styles.labelIcon}\n                    />\n                    Failed to load.&nbsp;\n                    <BasicButton\n                        onClick={handleTryAgain}\n                        type=\"button\"\n                        className={clsx(\n                            styles.baseButton,\n                            styles.tryAgainButton\n                        )}\n                    >\n                        Try again.\n                    </BasicButton>\n                </div>\n            );\n        }\n    };\n\n    const renderVirtualisedList = () => {\n        const isTestEnv = process.env.NODE_ENV === \"test\";\n\n        return (\n            <Virtuoso\n                ref={virtuosoRef}\n                style={{ height: \"100%\" }}\n                data={displayListItems}\n                customScrollParent={nodeRef.current ?? undefined}\n                itemContent={(index, item) => renderItem(item, index)}\n                components={{\n                    List: VirtuosoList,\n                    Item: VirtuosoItem,\n                }}\n                context={{\n                    listProps: {\n                        id: listboxId,\n                        role: \"listbox\",\n                        \"aria-multiselectable\": multiSelect,\n                    },\n                    listItemProps: {\n                        role: \"none\",\n                    },\n                }}\n                // disable virtualisation in tests\n                // https://github.com/petyosi/react-virtuoso/issues/26#issuecomment-1040316576\n                // explicitly set the `key` prop to avoid React warning\n                key={isTestEnv ? displayListItems.length : undefined}\n                // omit the `initialItemCount` prop to resolve NaN error\n                {...(isTestEnv\n                    ? {\n                          initialItemCount: displayListItems.length,\n                      }\n                    : {})}\n            />\n        );\n    };\n\n    const renderList = () => {\n        return (\n            <div\n                data-testid=\"dropdown-list\"\n                role=\"group\"\n                aria-label={ariaLabel}\n                className={styles.list}\n            >\n                {renderSearchInput()}\n                {renderSelectAll()}\n                {renderNoResults()}\n                {renderLoading()}\n                {renderTryAgain()}\n                {renderVirtualisedList()}\n            </div>\n        );\n    };\n\n    const renderBottomCta = () => {\n        if (!renderCustomCallToAction) {\n            return;\n        }\n\n        return (\n            <div data-testid=\"custom-cta\">\n                {renderCustomCallToAction(onDismiss as any, displayListItems)}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            data-testid=\"dropdown-container\"\n            ref={mergeRefs(nodeRef, setFloatingRef)}\n            {...getFloatingProps()}\n            className={clsx(\n                styles.container,\n                variant === \"small\" && styles.containerVariantSmall\n            )}\n            style={floatingStyles}\n        >\n            <VisuallyHidden role=\"status\">{ariaLabel}</VisuallyHidden>\n            {renderList()}\n            {renderBottomCta()}\n        </div>\n    );\n};\n\nexport const DropdownList = forwardRef(DropdownListInner);\n"],"names":["DropdownList","forwardRef","listItems","multiSelect","maxSelectable","selectedItems","disableItemFocus","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","variant","listboxId","ariaLabel","matchElementWidth","width","topScrollItem","onSelectItem","onSelectAll","onDismiss","onRetry","valueExtractor","listExtractor","renderListItem","renderCustomCallToAction","enableSearch","hideNoResultsDisplay","noResultsDescription","_noResultsDescription","customLabels","searchPlaceholder","_searchPlaceholder","searchFunction","onSearch","ref","noResultsLabel","selectAllButtonLabel","clearAllButtonLabel","focusedIndex","setFocusedIndex","useContext","DropdownListStateContext","elementWidth","setFloatingRef","getFloatingProps","styles","floatingStyles","useDropdownRender","searchValue","setSearchValue","useState","displayListItems","setDisplayListItems","itemsLoadStateChanged","useCompare","mounted","useIsMounted","nodeRef","useRef","listItemRefs","searchInputRef","virtuosoRef","hasSelectedMax","length","containerWidthStyle","styles.tokens","containerWidth","containerMinWidth","getOptionLabel","item","value","toString","title","secondaryLabel","checkListItemSelected","useCallback","find","arrItem","isEqual","filterItemsByCustomSearch","useEvent","filterItemsByLabel","filter","updatedSearchValue","trim","toLowerCase","includes","refocus","opts","current","setTimeout","_a","focus","items","undefined","index","forced","Math","max","min","scrollToIndex","align","selectedIndex","preferSelected","findIndex","nextIndex","_b","handleListItemClick","upcomingIndex","getValue","handleSearchInputChange","event","target","handleOnClear","handleTryAgain","useEventListener","code","preventDefault","document","activeElement","useImperativeHandle","useEffect","scrollTo","top","timer","indexOf","clearTimeout","_c","useApplyStyle","Object","assign","renderListItemIcon","selected","_jsx","SquareFillIcon","className","clsx","styles.baseCheckboxIndicatorStyle","styles.checkboxDisabledIndicator","SquareTickFillIcon","styles.checkboxSelectedIndicator","SquareIcon","styles.checkboxUnselectedIndicator","TickIcon","styles.baseIndicatorStyle","styles.selectedIndicator","renderDropdownLabel","DropdownLabel","displayType","label","maxLines","disabled","sublabel","truncationType","renderItem","active","onClick","onMouseEnter","handleListItemHover","element","role","tabIndex","styles.listItem","styles.listItemDisabled","styles.listItemActiveSelected","styles.listItemActive","children","_jsxs","_Fragment","getItemKey","renderSearchInput","DropdownSearch","onChange","placeholder","onClear","renderSelectAll","styles.selectAllContainer","BasicButton","type","styles.baseButton","styles.selectAllButton","renderNoResults","styles.resultStateContainer","ExclamationCircleFillIcon","styles.labelIcon","Markup","styles.noResultDescContainer","renderLoading","ComponentLoadingSpinner","styles.spinner","renderTryAgain","styles.tryAgainButton","renderVirtualisedList","isTestEnv","process","env","NODE_ENV","Virtuoso","style","height","data","customScrollParent","itemContent","components","List","VirtuosoList","Item","VirtuosoItem","context","listProps","id","listItemProps","initialItemCount","mergeRefs","styles.container","styles.containerVariantSmall","VisuallyHidden","styles.list","renderBottomCta"],"mappings":"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"}
+{"version":3,"file":"dropdown-list.js","sources":["../../../../src/shared/dropdown-list/dropdown-list.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareFillIcon } from \"@lifesg/react-icons/square-fill\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport find from \"lodash/find\";\nimport isEqual from \"lodash/isEqual\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport type { VirtuosoHandle } from \"react-virtuoso\";\nimport { Virtuoso } from \"react-virtuoso\";\n\nimport { Markup } from \"../../markup\";\nimport { useApplyStyle } from \"../../theme\";\nimport {\n    mergeRefs,\n    useCompare,\n    useEvent,\n    useEventListener,\n    useIsMounted,\n} from \"../../util\";\nimport { VisuallyHidden } from \"../accessibility\";\nimport { ComponentLoadingSpinner } from \"../component-loading-spinner\";\nimport { useDropdownRender } from \"../dropdown-wrapper\";\nimport { BasicButton } from \"../input-wrapper\";\nimport { DropdownLabel } from \"./dropdown-label\";\nimport type { ContainerWidthType } from \"./dropdown-list.styles\";\nimport * as styles from \"./dropdown-list.styles\";\nimport { DropdownListStateContext } from \"./dropdown-list-state\";\nimport { DropdownSearch } from \"./dropdown-search\";\nimport type {\n    DropdownListApi,\n    DropdownListProps,\n    ListItemDisplayProps,\n} from \"./types\";\nimport { VirtuosoItem, VirtuosoList } from \"./virtuoso-components\";\n\n/**\n * NOTE: This component is not directly exportable but forms part of a component\n */\nconst DropdownListInner = <T, V>(\n    {\n        listItems,\n        multiSelect,\n        maxSelectable,\n        selectedItems,\n        disableItemFocus,\n        itemsLoadState = \"success\",\n        itemTruncationType = \"end\",\n        itemMaxLines = 2,\n        labelDisplayType = \"inline\",\n        variant = \"default\",\n        listboxId,\n        ariaLabel,\n        matchElementWidth = false,\n        width,\n        topScrollItem,\n        onSelectItem,\n        onSelectAll,\n        onDismiss,\n        onRetry,\n        /* DropdownDisplayProps */\n        valueExtractor,\n        listExtractor,\n        renderListItem,\n        renderCustomCallToAction,\n        /* DropdownSearchProps */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription: _noResultsDescription,\n        customLabels,\n        searchPlaceholder: _searchPlaceholder,\n        searchFunction,\n        onSearch,\n    }: DropdownListProps<T, V>,\n    ref: React.ForwardedRef<DropdownListApi>\n): JSX.Element => {\n    // =========================================================================\n    // CONST, REF, STATE\n    // =========================================================================\n    const {\n        noResultsLabel = \"No results found.\",\n        selectAllButtonLabel = \"Select all\",\n        clearAllButtonLabel = \"Clear all\",\n    } = customLabels || {};\n    const searchPlaceholder =\n        customLabels?.searchPlaceholder || _searchPlaceholder || \"Search\";\n    const noResultsDescription =\n        customLabels?.noResultsDescription || _noResultsDescription;\n    const { focusedIndex, setFocusedIndex } = useContext(\n        DropdownListStateContext\n    );\n    const {\n        elementWidth,\n        setFloatingRef,\n        getFloatingProps,\n        styles: floatingStyles,\n    } = useDropdownRender();\n    const [searchValue, setSearchValue] = useState<string>(\"\");\n    const [displayListItems, setDisplayListItems] = useState(listItems ?? []);\n    const itemsLoadStateChanged = useCompare(itemsLoadState);\n    const mounted = useIsMounted();\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const listItemRefs = useRef<(HTMLElement | null)[]>([]);\n    const searchInputRef = useRef<HTMLInputElement>(null);\n    const virtuosoRef = useRef<VirtuosoHandle>(null);\n\n    const hasSelectedMax =\n        !!maxSelectable &&\n        !!selectedItems &&\n        selectedItems?.length === maxSelectable;\n\n    // =========================================================================\n    // APPLY STYLES\n    // =========================================================================\n    let containerWidthType: ContainerWidthType = \"default\";\n    let containerWidth: string | undefined = undefined;\n    if (width) {\n        containerWidth = width;\n        containerWidthType = \"custom\";\n    } else if (matchElementWidth && elementWidth) {\n        containerWidth = `${elementWidth}px`;\n        containerWidthType = \"match\";\n    }\n\n    useApplyStyle(nodeRef, {\n        [styles.tokens.containerWidth]: containerWidth,\n    });\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getValue = (item: T): V => {\n        return valueExtractor ? valueExtractor(item) : (item as unknown as V);\n    };\n\n    const getItemKey = (item: T, index: number) => {\n        const formattedValue = valueExtractor ? valueExtractor(item) : item;\n        return `item_${index}__${formattedValue}`;\n    };\n\n    const getOptionLabel = (item: T): ListItemDisplayProps => {\n        const value = listExtractor ? listExtractor(item) : item?.toString();\n\n        if (typeof value === \"object\") {\n            return { title: value.title, secondaryLabel: value.secondaryLabel };\n        }\n\n        return { title: value ?? \"\" };\n    };\n\n    const checkListItemSelected = useCallback(\n        (item: T): boolean => {\n            return !!find(selectedItems, (arrItem) => {\n                return isEqual(arrItem, item);\n            });\n        },\n        [selectedItems]\n    );\n\n    const filterItemsByCustomSearch = useEvent(() => {\n        return searchFunction?.(searchValue);\n    });\n\n    const filterItemsByLabel = useEvent(() => {\n        return listItems?.filter((item) => {\n            const { title, secondaryLabel } = getOptionLabel(item);\n            const updatedSearchValue = searchValue.trim().toLowerCase();\n            return (\n                title.toLowerCase().includes(updatedSearchValue) ||\n                (secondaryLabel &&\n                    secondaryLabel.toLowerCase().includes(updatedSearchValue))\n            );\n        });\n    });\n\n    const refocus = useCallback(\n        (opts?: { index?: number; preferSelected?: boolean }) => {\n            if (disableItemFocus) return;\n\n            if (searchInputRef.current) {\n                setFocusedIndex(-1);\n                setTimeout(() => searchInputRef.current?.focus(), 0);\n                return;\n            }\n\n            const items = displayListItems ?? [];\n            if (items.length === 0) return;\n\n            if (opts?.index !== undefined) {\n                const forced = Math.max(\n                    0,\n                    Math.min(opts.index, items.length - 1)\n                );\n                virtuosoRef.current?.scrollToIndex({\n                    index: forced,\n                    align: \"center\",\n                });\n                setFocusedIndex(forced);\n                setTimeout(() => listItemRefs.current[forced]?.focus(), 0);\n\n                return;\n            }\n\n            const selectedIndex = opts?.preferSelected\n                ? items.findIndex((item) => checkListItemSelected(item))\n                : -1;\n\n            const nextIndex =\n                selectedIndex !== -1\n                    ? selectedIndex\n                    : focusedIndex >= 0 && focusedIndex < items.length\n                    ? focusedIndex\n                    : 0;\n\n            virtuosoRef.current?.scrollToIndex({\n                index: nextIndex,\n                align: \"center\",\n            });\n            setFocusedIndex(nextIndex);\n            setTimeout(() => listItemRefs.current[nextIndex]?.focus(), 0);\n        },\n        [\n            checkListItemSelected,\n            disableItemFocus,\n            displayListItems,\n            focusedIndex,\n            setFocusedIndex,\n        ]\n    );\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleKeyboardPress = (event: KeyboardEvent) => {\n        switch (event.code) {\n            case \"ArrowDown\":\n                event.preventDefault();\n                if (focusedIndex < displayListItems.length - 1) {\n                    const upcomingIndex = focusedIndex + 1;\n                    listItemRefs.current[upcomingIndex]?.focus();\n                    setFocusedIndex(upcomingIndex);\n                }\n                break;\n            case \"ArrowUp\":\n                event.preventDefault();\n                if (focusedIndex > 0) {\n                    const upcomingIndex = focusedIndex - 1;\n                    listItemRefs.current[upcomingIndex]?.focus();\n                    setFocusedIndex(upcomingIndex);\n                } else if (focusedIndex === 0 && searchInputRef.current) {\n                    searchInputRef.current.focus();\n                    setFocusedIndex(-1);\n                }\n                break;\n            case \"Space\":\n            case \"Enter\":\n                if (\n                    document.activeElement ===\n                    listItemRefs.current[focusedIndex]\n                ) {\n                    event.preventDefault();\n                    if (displayListItems[focusedIndex]) {\n                        handleListItemClick(\n                            displayListItems[focusedIndex],\n                            focusedIndex\n                        );\n                    }\n                }\n                break;\n            default:\n                break;\n        }\n    };\n\n    const handleListItemClick = (item: T, upcomingIndex: number) => {\n        if (hasSelectedMax && !checkListItemSelected(item)) return;\n        setFocusedIndex(upcomingIndex);\n        onSelectItem?.(item, getValue(item));\n    };\n\n    const handleListItemHover = (index: number) => setFocusedIndex(index);\n\n    const handleSearchInputChange = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        const value = event.target.value;\n        setSearchValue(value);\n        onSearch?.();\n    };\n\n    const handleOnClear = () => {\n        setSearchValue(\"\");\n        searchInputRef.current?.focus();\n        onSearch?.();\n    };\n\n    const handleTryAgain = () => onRetry?.();\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEventListener(\"keydown\", handleKeyboardPress);\n    useImperativeHandle(ref, () => ({ refocus }), [refocus]);\n\n    useEffect(() => {\n        if (!topScrollItem) {\n            virtuosoRef.current?.scrollTo({ top: 0 });\n            return;\n        }\n        const timer = setTimeout(() => {\n            if (!listItems) return;\n\n            const index = listItems.indexOf(topScrollItem);\n            if (virtuosoRef.current && index !== -1) {\n                virtuosoRef.current.scrollToIndex({ index });\n                setFocusedIndex(index);\n            }\n        }, 0);\n\n        return () => clearTimeout(timer);\n    }, [listItemRefs, listItems, setFocusedIndex, topScrollItem]);\n\n    useEffect(() => {\n        if (disableItemFocus) return;\n        if (!mounted || !itemsLoadStateChanged) return;\n\n        if (itemsLoadState === \"success\") {\n            if (searchInputRef.current) {\n                setFocusedIndex(-1);\n                searchInputRef.current.focus();\n            }\n        }\n    }, [\n        mounted,\n        itemsLoadStateChanged,\n        itemsLoadState,\n        setFocusedIndex,\n        disableItemFocus,\n    ]);\n\n    useEffect(() => {\n        const filterItems = () => {\n            if (searchValue === \"\") {\n                return listItems;\n            } else if (searchFunction) {\n                return filterItemsByCustomSearch();\n            } else {\n                return filterItemsByLabel();\n            }\n        };\n\n        setDisplayListItems(filterItems() ?? []);\n    }, [\n        filterItemsByCustomSearch,\n        filterItemsByLabel,\n        listItems,\n        searchFunction,\n        searchValue,\n    ]);\n\n    useEffect(() => {\n        if (mounted) {\n            return;\n        }\n\n        if (disableItemFocus || !listItems) return;\n\n        const index = listItems.findIndex((item) =>\n            checkListItemSelected(item)\n        );\n\n        if (searchInputRef.current) {\n            setFocusedIndex(-1);\n            setTimeout(() => searchInputRef.current?.focus(), 200);\n        } else if (focusedIndex > 0) {\n            virtuosoRef.current?.scrollToIndex({\n                index: focusedIndex,\n                align: \"center\",\n            });\n            setTimeout(() => listItemRefs.current[focusedIndex]?.focus(), 200);\n        } else if (index !== -1) {\n            virtuosoRef.current?.scrollToIndex({ index, align: \"center\" });\n            setFocusedIndex(index);\n            setTimeout(() => listItemRefs.current[index]?.focus(), 200);\n        } else {\n            virtuosoRef.current?.scrollToIndex({ index: 0 });\n            setFocusedIndex(0);\n            setTimeout(() => listItemRefs.current[0]?.focus(), 200);\n        }\n    }, [\n        checkListItemSelected,\n        disableItemFocus,\n        focusedIndex,\n        listItems,\n        mounted,\n        setFocusedIndex,\n    ]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderListItemIcon = (selected: boolean) => {\n        if (multiSelect) {\n            if (hasSelectedMax && !selected) {\n                return (\n                    <SquareFillIcon\n                        aria-hidden\n                        className={clsx(\n                            styles.baseCheckboxIndicatorStyle,\n                            styles.checkboxDisabledIndicator\n                        )}\n                    />\n                );\n            }\n\n            return selected ? (\n                <SquareTickFillIcon\n                    aria-hidden\n                    className={clsx(\n                        styles.baseCheckboxIndicatorStyle,\n                        styles.checkboxSelectedIndicator\n                    )}\n                />\n            ) : (\n                <SquareIcon\n                    aria-hidden\n                    className={clsx(\n                        styles.baseCheckboxIndicatorStyle,\n                        styles.checkboxUnselectedIndicator\n                    )}\n                />\n            );\n        }\n\n        return selected ? (\n            <TickIcon\n                aria-hidden\n                className={clsx(\n                    styles.baseIndicatorStyle,\n                    styles.selectedIndicator\n                )}\n            />\n        ) : (\n            <div className={styles.baseIndicatorStyle} />\n        );\n    };\n\n    const renderDropdownLabel = (item: T, selected: boolean) => {\n        const { title, secondaryLabel } = getOptionLabel(item);\n\n        return (\n            <DropdownLabel\n                displayType={labelDisplayType}\n                label={title}\n                maxLines={itemMaxLines}\n                selected={selected}\n                disabled={!selected && hasSelectedMax}\n                sublabel={secondaryLabel}\n                truncationType={itemTruncationType}\n                variant={variant}\n            />\n        );\n    };\n\n    const renderItem = (item: T, index: number) => {\n        if (!onRetry || itemsLoadState === \"success\") {\n            const selected = checkListItemSelected(item);\n            const active = index === focusedIndex;\n            const disabled = !selected && hasSelectedMax;\n            return (\n                <li\n                    aria-selected={selected}\n                    aria-multiselectable={multiSelect}\n                    aria-disabled={disabled}\n                    aria-posinset={index + 1}\n                    aria-setsize={displayListItems?.length}\n                    data-testid=\"list-item\"\n                    key={getItemKey(item, index)}\n                    onClick={() => handleListItemClick(item, index)}\n                    onMouseEnter={() => handleListItemHover(index)}\n                    ref={(element) => {\n                        listItemRefs.current[index] = element;\n                    }}\n                    role=\"option\"\n                    tabIndex={active ? 0 : -1}\n                    className={clsx(\n                        styles.listItem,\n                        (disabled && styles.listItemDisabled) ||\n                            (active &&\n                                selected &&\n                                styles.listItemActiveSelected) ||\n                            (active && styles.listItemActive)\n                    )}\n                >\n                    {renderListItem ? (\n                        renderListItem(item, { selected })\n                    ) : (\n                        <>\n                            {renderListItemIcon(selected)}\n                            {renderDropdownLabel(item, selected)}\n                        </>\n                    )}\n                </li>\n            );\n        }\n    };\n\n    const renderSearchInput = () => {\n        if ((enableSearch || searchFunction) && itemsLoadState === \"success\") {\n            return (\n                <DropdownSearch\n                    ref={searchInputRef}\n                    onChange={handleSearchInputChange}\n                    value={searchValue}\n                    placeholder={searchPlaceholder}\n                    data-testid=\"search-input\"\n                    aria-label=\"Enter text to search\"\n                    onClear={handleOnClear}\n                    variant={variant}\n                />\n            );\n        }\n    };\n\n    const renderSelectAll = () => {\n        if (\n            selectedItems &&\n            multiSelect &&\n            displayListItems.length > 0 &&\n            !searchValue &&\n            itemsLoadState === \"success\"\n        ) {\n            return (\n                <div className={styles.selectAllContainer}>\n                    <BasicButton\n                        onClick={onSelectAll}\n                        type=\"button\"\n                        className={clsx(\n                            styles.baseButton,\n                            styles.selectAllButton\n                        )}\n                    >\n                        {maxSelectable || selectedItems.length !== 0\n                            ? clearAllButtonLabel\n                            : selectAllButtonLabel}\n                    </BasicButton>\n                </div>\n            );\n        }\n    };\n\n    const renderNoResults = () => {\n        if (\n            !hideNoResultsDisplay &&\n            (searchValue || !enableSearch) &&\n            displayListItems.length === 0 &&\n            itemsLoadState === \"success\"\n        ) {\n            return (\n                <>\n                    <div\n                        data-testid=\"list-no-results\"\n                        className={styles.resultStateContainer}\n                    >\n                        <ExclamationCircleFillIcon\n                            data-testid=\"no-result-icon\"\n                            className={styles.labelIcon}\n                        />\n                        {noResultsLabel}\n                    </div>\n                    {noResultsDescription && (\n                        <Markup\n                            data-testid=\"no-result-desc\"\n                            className={styles.noResultDescContainer}\n                        >\n                            {noResultsDescription}\n                        </Markup>\n                    )}\n                </>\n            );\n        }\n    };\n\n    const renderLoading = () => {\n        if (onRetry && itemsLoadState === \"loading\") {\n            return (\n                <div\n                    data-testid=\"list-loading\"\n                    className={styles.resultStateContainer}\n                >\n                    <ComponentLoadingSpinner className={styles.spinner} />\n                    Loading...\n                </div>\n            );\n        }\n    };\n\n    const renderTryAgain = () => {\n        if (onRetry && itemsLoadState === \"fail\") {\n            return (\n                <div\n                    data-testid=\"list-fail\"\n                    className={styles.resultStateContainer}\n                >\n                    <ExclamationCircleFillIcon\n                        data-testid=\"load-error-icon\"\n                        className={styles.labelIcon}\n                    />\n                    Failed to load.&nbsp;\n                    <BasicButton\n                        onClick={handleTryAgain}\n                        type=\"button\"\n                        className={clsx(\n                            styles.baseButton,\n                            styles.tryAgainButton\n                        )}\n                    >\n                        Try again.\n                    </BasicButton>\n                </div>\n            );\n        }\n    };\n\n    const renderVirtualisedList = () => {\n        const isTestEnv = process.env.NODE_ENV === \"test\";\n\n        return (\n            <Virtuoso\n                ref={virtuosoRef}\n                style={{ height: \"100%\" }}\n                data={displayListItems}\n                customScrollParent={nodeRef.current ?? undefined}\n                itemContent={(index, item) => renderItem(item, index)}\n                components={{\n                    List: VirtuosoList,\n                    Item: VirtuosoItem,\n                }}\n                context={{\n                    listProps: {\n                        id: listboxId,\n                        role: \"listbox\",\n                        \"aria-multiselectable\": multiSelect,\n                    },\n                    listItemProps: {\n                        role: \"none\",\n                    },\n                }}\n                // disable virtualisation in tests\n                // https://github.com/petyosi/react-virtuoso/issues/26#issuecomment-1040316576\n                // explicitly set the `key` prop to avoid React warning\n                key={isTestEnv ? displayListItems.length : undefined}\n                // omit the `initialItemCount` prop to resolve NaN error\n                {...(isTestEnv\n                    ? {\n                          initialItemCount: displayListItems.length,\n                      }\n                    : {})}\n            />\n        );\n    };\n\n    const renderList = () => {\n        return (\n            <div\n                data-testid=\"dropdown-list\"\n                role=\"group\"\n                aria-label={ariaLabel}\n                className={styles.list}\n            >\n                {renderSearchInput()}\n                {renderSelectAll()}\n                {renderNoResults()}\n                {renderLoading()}\n                {renderTryAgain()}\n                {renderVirtualisedList()}\n            </div>\n        );\n    };\n\n    const renderBottomCta = () => {\n        if (!renderCustomCallToAction) {\n            return;\n        }\n\n        return (\n            <div data-testid=\"custom-cta\">\n                {renderCustomCallToAction(onDismiss as any, displayListItems)}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            data-testid=\"dropdown-container\"\n            ref={mergeRefs(nodeRef, setFloatingRef)}\n            {...getFloatingProps()}\n            data-width-type={containerWidthType}\n            className={clsx(\n                styles.container,\n                variant === \"small\" && styles.containerVariantSmall\n            )}\n            style={floatingStyles}\n        >\n            <VisuallyHidden role=\"status\">{ariaLabel}</VisuallyHidden>\n            {renderList()}\n            {renderBottomCta()}\n        </div>\n    );\n};\n\nexport const DropdownList = forwardRef(DropdownListInner);\n"],"names":["DropdownList","forwardRef","listItems","multiSelect","maxSelectable","selectedItems","disableItemFocus","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","variant","listboxId","ariaLabel","matchElementWidth","width","topScrollItem","onSelectItem","onSelectAll","onDismiss","onRetry","valueExtractor","listExtractor","renderListItem","renderCustomCallToAction","enableSearch","hideNoResultsDisplay","noResultsDescription","_noResultsDescription","customLabels","searchPlaceholder","_searchPlaceholder","searchFunction","onSearch","ref","noResultsLabel","selectAllButtonLabel","clearAllButtonLabel","focusedIndex","setFocusedIndex","useContext","DropdownListStateContext","elementWidth","setFloatingRef","getFloatingProps","styles","floatingStyles","useDropdownRender","searchValue","setSearchValue","useState","displayListItems","setDisplayListItems","itemsLoadStateChanged","useCompare","mounted","useIsMounted","nodeRef","useRef","listItemRefs","searchInputRef","virtuosoRef","hasSelectedMax","length","containerWidth","containerWidthType","useApplyStyle","styles.tokens","getOptionLabel","item","value","toString","title","secondaryLabel","checkListItemSelected","useCallback","find","arrItem","isEqual","filterItemsByCustomSearch","useEvent","filterItemsByLabel","filter","updatedSearchValue","trim","toLowerCase","includes","refocus","opts","current","setTimeout","_a","focus","items","undefined","index","forced","Math","max","min","scrollToIndex","align","selectedIndex","preferSelected","findIndex","nextIndex","_b","handleListItemClick","upcomingIndex","getValue","handleSearchInputChange","event","target","handleOnClear","handleTryAgain","useEventListener","code","preventDefault","document","activeElement","useImperativeHandle","useEffect","scrollTo","top","timer","indexOf","clearTimeout","_c","renderListItemIcon","selected","_jsx","SquareFillIcon","className","clsx","styles.baseCheckboxIndicatorStyle","styles.checkboxDisabledIndicator","SquareTickFillIcon","styles.checkboxSelectedIndicator","SquareIcon","styles.checkboxUnselectedIndicator","TickIcon","styles.baseIndicatorStyle","styles.selectedIndicator","renderDropdownLabel","DropdownLabel","displayType","label","maxLines","disabled","sublabel","truncationType","renderItem","active","onClick","onMouseEnter","handleListItemHover","element","role","tabIndex","styles.listItem","styles.listItemDisabled","styles.listItemActiveSelected","styles.listItemActive","children","_jsxs","_Fragment","getItemKey","renderSearchInput","DropdownSearch","onChange","placeholder","onClear","renderSelectAll","styles.selectAllContainer","BasicButton","type","styles.baseButton","styles.selectAllButton","renderNoResults","styles.resultStateContainer","ExclamationCircleFillIcon","styles.labelIcon","Markup","styles.noResultDescContainer","renderLoading","ComponentLoadingSpinner","styles.spinner","renderTryAgain","styles.tryAgainButton","renderVirtualisedList","isTestEnv","process","env","NODE_ENV","Virtuoso","Object","assign","style","height","data","customScrollParent","itemContent","components","List","VirtuosoList","Item","VirtuosoItem","context","listProps","id","listItemProps","initialItemCount","mergeRefs","styles.container","styles.containerVariantSmall","VisuallyHidden","styles.list","renderBottomCta"],"mappings":"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"}

package/cjs/shared/dropdown-list/dropdown-list.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./dropdown-list.styles_1qveyb9.css");exports.baseButton="b51546q",exports.baseCheckboxIndicatorStyle="bswyxh7",exports.baseIndicatorStyle="b3myji2",exports.checkboxDisabledIndicator="cxvb3yc",exports.checkboxSelectedIndicator="c1kods4c",exports.checkboxUnselectedIndicator="c2iuhda",exports.container="c1wprmqt",exports.containerVariantSmall="cv4jfw8",exports.labelIcon="l9eregy",exports.list="llrkh2h",exports.listItem="lsgm7b1",exports.listItemActive="l1sloxru",exports.listItemActiveSelected="lp7vqom",exports.listItemDisabled="l1li8r4s",exports.noResultDescContainer="n1mo99ai",exports.resultStateContainer="rlpycri",exports.selectAllButton="s5v4wu0",exports.selectAllContainer="s1gfnl3t",exports.selectedIndicator="s1bv8amb",exports.spinner="smon6ho",exports.tokens={containerWidth:"--fds-internal-dropdownList-containerWidth",containerMinWidth:"--fds-internal-dropdownList-containerMinWidth"},exports.tryAgainButton="t14h29ix";
+"use strict";require("./dropdown-list.styles_1kt4zhf.css");exports.baseButton="b51546q",exports.baseCheckboxIndicatorStyle="bswyxh7",exports.baseIndicatorStyle="b3myji2",exports.checkboxDisabledIndicator="cxvb3yc",exports.checkboxSelectedIndicator="c1kods4c",exports.checkboxUnselectedIndicator="c2iuhda",exports.container="c1wprmqt",exports.containerVariantSmall="cv4jfw8",exports.labelIcon="l9eregy",exports.list="llrkh2h",exports.listItem="lsgm7b1",exports.listItemActive="l1sloxru",exports.listItemActiveSelected="lp7vqom",exports.listItemDisabled="l1li8r4s",exports.noResultDescContainer="n1mo99ai",exports.resultStateContainer="rlpycri",exports.selectAllButton="s5v4wu0",exports.selectAllContainer="s1gfnl3t",exports.selectedIndicator="s1bv8amb",exports.spinner="smon6ho",exports.tokens={containerWidth:"--fds-internal-dropdownList-containerWidth"},exports.tryAgainButton="t14h29ix";
 //# sourceMappingURL=dropdown-list.styles.js.map

package/cjs/shared/dropdown-list/dropdown-list.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-list.styles.js","sources":["../../../../src/shared/dropdown-list/dropdown-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../../theme\";\nimport * as elementWithDropdownStyles from \"../dropdown-wrapper/element-with-dropdown.styles\";\n\nexport const tokens = {\n    availableWidth: \"--fds-internal-dropdownList-container-availableWidth\",\n\n    containerWidth: \"--fds-internal-dropdownList-containerWidth\",\n    containerMinWidth: \"--fds-internal-dropdownList-containerMinWidth\",\n\n    xSpacing: \"--fds-internal-dropdownList-container-xSpacing\",\n} as const;\n\n// -----------------------------------------------------------------------------\n// MAIN STYLES\n// -----------------------------------------------------------------------------\nexport const container = css`\n    ${Font[\"body-baseline-regular\"]}\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n\n    ${tokens.xSpacing}: 0px;\n    ${elementWithDropdownStyles.tokens.availableHeight}: initial;\n    ${tokens.availableWidth}: calc(\n        100vw - var(${tokens.xSpacing}) * 2\n    );\n\n    ${MediaQuery.MaxWidth.sm} {\n        ${tokens.xSpacing}: ${Breakpoint[\"sm-margin\"]};\n        max-height: 15rem;\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        ${tokens.xSpacing}: ${Breakpoint[\"xs-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        ${tokens.xSpacing}: ${Breakpoint[\"xxs-margin\"]};\n    }\n\n    max-width: var(${tokens.availableWidth});\n    min-width: var(\n        ${tokens.containerMinWidth},\n        min(23rem, var(${tokens.availableWidth}))\n    );\n    width: var(${tokens.containerWidth});\n    max-height: min(\n        27rem,\n        var(${elementWithDropdownStyles.tokens.availableHeight}, 9999px)\n    );\n    overflow: hidden;\n    overflow-y: auto;\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n\nexport const containerVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const list = css`\n    background: transparent;\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\nexport const listItem = css`\n    display: flex;\n    align-items: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    cursor: pointer;\n    border: none;\n    border-radius: ${Radius[\"none\"]};\n    outline: none;\n`;\n\nexport const listItemActive = css`\n    background: ${Colour[\"bg-hover-subtle\"]};\n`;\n\nexport const listItemActiveSelected = css`\n    background: ${Colour[\"bg-hover\"]};\n`;\n\nexport const listItemDisabled = css`\n    cursor: not-allowed;\n`;\n\nexport const baseIndicatorStyle = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1rem;\n`;\n\nexport const selectedIndicator = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const baseCheckboxIndicatorStyle = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n`;\n\nexport const checkboxSelectedIndicator = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const checkboxUnselectedIndicator = css`\n    color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const checkboxDisabledIndicator = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ELEMENT STYLES\n// -----------------------------------------------------------------------------\nexport const selectAllContainer = css`\n    width: 100%;\n    display: flex;\n    justify-content: flex-end;\n`;\n\nexport const baseButton = css`\n    cursor: pointer;\n    overflow: hidden;\n    color: ${Colour[\"text-primary\"]};\n    font-size: inherit;\n`;\n\nexport const selectAllButton = css`\n    ${Font[\"body-md-semibold\"]}\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const tryAgainButton = css`\n    ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const resultStateContainer = css`\n    width: 100%;\n    display: flex;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    align-items: center;\n    color: ${Colour[\"text\"]};\n`;\n\nexport const labelIcon = css`\n    margin-right: ${Spacing[\"spacing-4\"]};\n    color: ${Colour[\"icon-error\"]};\n    height: 1em;\n    width: 1em;\n`;\n\nexport const spinner = css`\n    margin-right: ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"icon\"]};\n`;\n\nexport const noResultDescContainer = css`\n    color: ${Colour[\"text-subtle\"]};\n    padding: 0 ${Spacing[\"spacing-16\"]};\n    padding-bottom: ${Spacing[\"spacing-12\"]};\n`;\n"],"names":["containerWidth","containerMinWidth"],"mappings":"kHAuJuB,6CA3BgB,qCAVR,4CAwBO,4CARA,+CAIE,4BA7GlB,yCAsDY,4BAgGZ,uBA5FL,2BAQI,iCAWM,0CAIQ,mCAIN,yCA6EK,wCApBD,kCATL,qCAbG,qCAzBD,2BA8DV,yBAzKE,CAGlBA,eAAgB,6CAChBC,kBAAmB,wEAkJI"}
+{"version":3,"file":"dropdown-list.styles.js","sources":["../../../../src/shared/dropdown-list/dropdown-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../../theme\";\nimport * as elementWithDropdownStyles from \"../dropdown-wrapper/element-with-dropdown.styles\";\n\nexport type ContainerWidthType = \"default\" | \"custom\" | \"match\";\n\nexport const tokens = {\n    availableWidth: \"--fds-internal-dropdownList-container-availableWidth\",\n    containerWidth: \"--fds-internal-dropdownList-containerWidth\",\n    xSpacing: \"--fds-internal-dropdownList-container-xSpacing\",\n} as const;\n\n// -----------------------------------------------------------------------------\n// MAIN STYLES\n// -----------------------------------------------------------------------------\nexport const container = css`\n    ${Font[\"body-baseline-regular\"]}\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n\n    ${tokens.xSpacing}: 0px;\n    ${tokens.availableWidth}: calc(\n        100vw - var(${tokens.xSpacing}) * 2\n    );\n\n    ${MediaQuery.MaxWidth.sm} {\n        ${tokens.xSpacing}: ${Breakpoint[\"sm-margin\"]};\n        max-height: 15rem;\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        ${tokens.xSpacing}: ${Breakpoint[\"xs-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        ${tokens.xSpacing}: ${Breakpoint[\"xxs-margin\"]};\n    }\n\n    &[data-width-type=\"default\"] {\n        min-width: min(23rem, var(${tokens.availableWidth}));\n    }\n\n    &[data-width-type=\"custom\"] {\n        width: var(${tokens.containerWidth});\n    }\n\n    &[data-width-type=\"match\"] {\n        width: var(${tokens.containerWidth});\n        min-width: min(23rem, var(${tokens.availableWidth}));\n    }\n\n    max-height: min(\n        27rem,\n        var(${elementWithDropdownStyles.tokens.availableHeight}, 9999px)\n    );\n    overflow: hidden;\n    overflow-y: auto;\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n\nexport const containerVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const list = css`\n    background: transparent;\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\nexport const listItem = css`\n    display: flex;\n    align-items: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    cursor: pointer;\n    border: none;\n    border-radius: ${Radius[\"none\"]};\n    outline: none;\n`;\n\nexport const listItemActive = css`\n    background: ${Colour[\"bg-hover-subtle\"]};\n`;\n\nexport const listItemActiveSelected = css`\n    background: ${Colour[\"bg-hover\"]};\n`;\n\nexport const listItemDisabled = css`\n    cursor: not-allowed;\n`;\n\nexport const baseIndicatorStyle = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1rem;\n`;\n\nexport const selectedIndicator = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const baseCheckboxIndicatorStyle = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n`;\n\nexport const checkboxSelectedIndicator = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const checkboxUnselectedIndicator = css`\n    color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const checkboxDisabledIndicator = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ELEMENT STYLES\n// -----------------------------------------------------------------------------\nexport const selectAllContainer = css`\n    width: 100%;\n    display: flex;\n    justify-content: flex-end;\n`;\n\nexport const baseButton = css`\n    cursor: pointer;\n    overflow: hidden;\n    color: ${Colour[\"text-primary\"]};\n    font-size: inherit;\n`;\n\nexport const selectAllButton = css`\n    ${Font[\"body-md-semibold\"]}\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const tryAgainButton = css`\n    ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const resultStateContainer = css`\n    width: 100%;\n    display: flex;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    align-items: center;\n    color: ${Colour[\"text\"]};\n`;\n\nexport const labelIcon = css`\n    margin-right: ${Spacing[\"spacing-4\"]};\n    color: ${Colour[\"icon-error\"]};\n    height: 1em;\n    width: 1em;\n`;\n\nexport const spinner = css`\n    margin-right: ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"icon\"]};\n`;\n\nexport const noResultDescContainer = css`\n    color: ${Colour[\"text-subtle\"]};\n    padding: 0 ${Spacing[\"spacing-16\"]};\n    padding-bottom: ${Spacing[\"spacing-12\"]};\n`;\n"],"names":["containerWidth"],"mappings":"kHA4JuB,6CA3BgB,qCAVR,4CAwBO,4CARA,+CAIE,4BAnHlB,yCA4DY,4BAgGZ,uBA5FL,2BAQI,iCAWM,0CAIQ,mCAIN,yCA6EK,wCApBD,kCATL,qCAbG,qCAzBD,2BA8DV,yBA5KE,CAElBA,eAAgB,qEAuJO"}

package/{shared/dropdown-list/dropdown-list.styles_1qveyb9.css → cjs/shared/dropdown-list/dropdown-list.styles_1kt4zhf.css}

@@ -1,12 +1,9 @@
-.c1wprmqt{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);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);--fds-internal-dropdownList-container-xSpacing:0px;--fds-internal-dropdownWrapper-availableHeight:initial;--fds-internal-dropdownList-container-availableWidth:calc(
+.c1wprmqt{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);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);--fds-internal-dropdownList-container-xSpacing:0px;--fds-internal-dropdownList-container-availableWidth:calc(
         100vw - var(--fds-internal-dropdownList-container-xSpacing) * 2
-    );max-width:var(--fds-internal-dropdownList-container-availableWidth);min-width:var(
-        --fds-internal-dropdownList-containerMinWidth,
-        min(23rem, var(--fds-internal-dropdownList-container-availableWidth))
-    );width:var(--fds-internal-dropdownList-containerWidth);max-height:min(
+    );max-height:min(
         27rem,
         var(--fds-internal-dropdownWrapper-availableHeight, 9999px)
-    );overflow:hidden;overflow-y:auto;}:where(body.fds-breakpoint-sm-max) .c1wprmqt{--fds-internal-dropdownList-container-xSpacing:var(--fds-breakpoint-margin-sm);max-height:15rem;}:where(body.fds-breakpoint-xs-max) .c1wprmqt{--fds-internal-dropdownList-container-xSpacing:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .c1wprmqt{--fds-internal-dropdownList-container-xSpacing:var(--fds-breakpoint-margin-xxs);}.c1wprmqt::-webkit-scrollbar{width:14px;}.c1wprmqt::-webkit-scrollbar-track{background:transparent;}.c1wprmqt::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}
+    );overflow:hidden;overflow-y:auto;}:where(body.fds-breakpoint-sm-max) .c1wprmqt{--fds-internal-dropdownList-container-xSpacing:var(--fds-breakpoint-margin-sm);max-height:15rem;}:where(body.fds-breakpoint-xs-max) .c1wprmqt{--fds-internal-dropdownList-container-xSpacing:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .c1wprmqt{--fds-internal-dropdownList-container-xSpacing:var(--fds-breakpoint-margin-xxs);}.c1wprmqt[data-width-type="default"]{min-width:min(23rem, var(--fds-internal-dropdownList-container-availableWidth));}.c1wprmqt[data-width-type="custom"]{width:var(--fds-internal-dropdownList-containerWidth);}.c1wprmqt[data-width-type="match"]{width:var(--fds-internal-dropdownList-containerWidth);min-width:min(23rem, var(--fds-internal-dropdownList-container-availableWidth));}.c1wprmqt::-webkit-scrollbar{width:14px;}.c1wprmqt::-webkit-scrollbar-track{background:transparent;}.c1wprmqt::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}
 .cv4jfw8{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
 .llrkh2h{background:transparent;padding:var(--fds-spacing-8);}
 .lsgm7b1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:var(--fds-spacing-8);padding:var(--fds-spacing-12) var(--fds-spacing-8);cursor:pointer;border:none;border-radius:var(--fds-radius-none);outline:none;}

package/cjs/shared/dropdown-list/nested-dropdown-list.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons/caret-right"),s=require("@lifesg/react-icons/exclamation-circle-fill"),r=require("@lifesg/react-icons/minus-square-fill"),n=require("@lifesg/react-icons/square"),i=require("@lifesg/react-icons/square-tick-fill"),a=require("@lifesg/react-icons/tick"),l=require("clsx"),o=require("react"),c=require("react-virtuoso"),u=require("../../markup/markup.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var d=require("../../theme/utils/use-apply-styles.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var m=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var p=require("../../util/use-event.js"),h=require("../../util/use-event-listener.js"),f=require("../../util/use-mount.js"),v=require("../component-loading-spinner/component-loading-spinner.js"),x=require("../dropdown-wrapper/element-with-dropdown.js"),j=require("../input-wrapper/input-wrapper.js"),b=require("./dropdown-label.js"),g=require("./dropdown-list.styles.js"),S=require("./dropdown-search.js"),q=require("./nested-dropdown-list.styles.js"),I=require("./nested-dropdown-list-helpers.js"),k=require("./virtuoso-components.js");function y(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var N=y(l);exports.NestedDropdownList=({listItems:l,multiSelect:y=!1,selectedKeyPaths:w,itemsLoadState:C="success",itemTruncationType:E="end",itemMaxLines:L=2,variant:D="default",listboxId:R,matchElementWidth:P=!1,width:A,mode:B="default",selectableCategory:F,onSelectItem:T,onSelectAll:M,onRetry:O,enableSearch:W,hideNoResultsDisplay:z,noResultsDescription:V,customLabels:$,searchPlaceholder:U,onSearch:H})=>{const{noResultsLabel:K="No results found.",selectAllButtonLabel:_="Select all",clearAllButtonLabel:G="Clear all"}=$||{},J=(null==$?void 0:$.searchPlaceholder)||U||"Search",Q=(null==$?void 0:$.noResultsDescription)||V,X=y||F,{elementWidth:Y,setFloatingRef:Z,getFloatingProps:ee,styles:te}=x.useDropdownRender(),[se,re]=o.useState(""),ne=se.toLowerCase().trim(),[ie,ae]=o.useState(!1),le=o.useRef(null),oe=o.useRef([]),ce=o.useRef(null),ue=f.useIsMounted(),[de,me]=o.useState([]),[pe,he]=o.useState([]),fe=ie?pe:de,ve=o.useMemo((()=>{let e=0;for(const t of de)t.level>e&&(e=t.level);return e}),[de]),[xe,je]=o.useState(0),[be,ge]=o.useState([]),[Se,qe]=o.useState(0);let Ie={};A?Ie={[g.tokens.containerWidth]:`${A}px`,[g.tokens.containerMinWidth]:"0px"}:P&&Y&&(Ie={[g.tokens.containerWidth]:`${Y}px`,[g.tokens.containerMinWidth]:`${Y}px`});const ke=e=>{const t=e.target.value;re(t),""===t?ae(!1):t.trim().length>=3&&ae(!0),null==H||H()},ye=()=>{var e;re(""),ae(!1),null===(e=ce.current)||void 0===e||e.focus(),null==H||H()},Ne=()=>{null==O||O()},we=()=>{if(0===w.size){const e=[],t=[];de.forEach((s=>{s.hasSubItems||(e.push(s.keyPath),t.push(s))})),null==M||M(e,t)}else null==M||M([],[])},Ce=p.useEvent(((e,t)=>I.flattenList(e,w,y,ne,t))),Ee=p.useEvent((e=>w.size?I.expandSelectedSubtrees(Ce(e,!1)):I.expandFirstSubtree(Ce(e,!1)))),Le=p.useEvent((e=>{const t=e=>{const s=[];for(const r of e){if(-1!==r.label.toLowerCase().indexOf(ne))s.push(r);else if(r.subItems){const e=t(r.subItems);if(e.length>0){s.push(Object.assign(Object.assign({},r),{subItems:e}));continue}}}return s};return t(e)})),De=p.useEvent((()=>{me((e=>I.updateSelectedState(e,w,y))),ie&&he((e=>I.updateSelectedState(e,w,y)))})),Re=(e,t,s)=>{const r=I.toggleSubtree(fe,e,t);je(e),qe(s),ie?he(r):me(r)};h.useEventListener("keydown",(e=>{var t,s;switch(e.code){case"ArrowDown":{e.preventDefault();const s=I.findItemFromStart(fe,(e=>e.visible),xe+1);s&&(qe((e=>e+1)),je(s.index),null===(t=oe.current[s.index])||void 0===t||t.focus());break}case"ArrowUp":{e.preventDefault();const t=I.findItemFromEnd(fe,(e=>e.visible),xe-1);t?(qe((e=>e-1)),je(t.index),null===(s=oe.current[t.index])||void 0===s||s.focus()):0===Se&&ce.current&&(ce.current.focus(),qe(-1),je(-1));break}case"ArrowRight":e.preventDefault(),Re(xe,!0,Se);break;case"ArrowLeft":e.preventDefault(),Re(xe,!1,Se);break;case"Space":if(document.activeElement===oe.current[xe]){e.preventDefault();const t=fe[xe];if(t.hasSubItems&&!X)return;null==T||T(t)}}})),o.useEffect((()=>{let e=[];"default"===B?e=Ee(l):"expand"===B?e=Ce(l,!0):"collapse"===B&&(e=Ce(l,!1)),me(e)}),[Ce,Ee,l,B]),o.useEffect((()=>{ge(fe.filter((e=>e.visible)))}),[ie,fe]),o.useEffect((()=>{De()}),[y,w,De]),o.useEffect((()=>{if(ie&&se.trim().length>=3){const e=Le(l),t=I.expandMatchedSubtrees(Ce(e,!1));he(t)}}),[Le,Ce,l,ie,se]),o.useEffect((()=>{ue||(ce.current?(je(-1),qe(-1),setTimeout((()=>{var e;return null===(e=ce.current)||void 0===e?void 0:e.focus()}),200)):oe.current[xe]?setTimeout((()=>{var e;return null===(e=oe.current[xe])||void 0===e?void 0:e.focus()}),200):(je(0),qe(0),setTimeout((()=>{var e;return null===(e=oe.current[0])||void 0===e?void 0:e.focus()}),200)))}),[xe,Se,ue]),d.useApplyStyle(le,Object.assign({},Ie));const Pe=()=>{if(W&&"success"===C)return e.jsx(S.DropdownSearch,{ref:ce,onChange:ke,value:se,placeholder:J,"data-testid":"search-input","aria-label":"Enter text to search",onClear:ye,variant:D})},Ae=()=>{if(y&&!ie&&de.length>0&&"success"===C)return e.jsx("div",{className:g.selectAllContainer,children:e.jsx(j.BasicButton,{onClick:we,type:"button",className:N.default(g.baseButton,g.selectAllButton),children:0===w.size?_:G})})},Be=()=>{if(!z&&ie&&0===pe.length&&"success"===C)return e.jsxs(e.Fragment,{children:[e.jsxs("div",{"data-testid":"list-no-results",className:g.resultStateContainer,children:[e.jsx(s.ExclamationCircleFillIcon,{"data-testid":"no-result-icon",className:g.labelIcon}),K]}),Q&&e.jsx(u.Markup,{"data-testid":"no-result-desc",className:g.noResultDescContainer,children:Q})]})},Fe=()=>{if(O&&"loading"===C)return e.jsxs("div",{"data-testid":"list-loading",className:g.resultStateContainer,children:[e.jsx(v.ComponentLoadingSpinner,{className:g.spinner}),"Loading..."]})},Te=()=>{if(O&&"fail"===C)return e.jsxs("div",{"data-testid":"list-fail",className:g.resultStateContainer,children:[e.jsx(s.ExclamationCircleFillIcon,{"data-testid":"load-error-icon",className:g.labelIcon}),"Failed to load. ",e.jsx(j.BasicButton,{onClick:Ne,type:"button",className:N.default(g.baseButton,g.tryAgainButton),children:"Try again."})]})},Me=t=>{if(y)switch(t.checked){case"mixed":return e.jsx(r.MinusSquareFillIcon,{"aria-hidden":!0,className:q.checkboxMixedIndicator});case!0:return e.jsx(i.SquareTickFillIcon,{"aria-hidden":!0,className:N.default(g.baseCheckboxIndicatorStyle,g.checkboxSelectedIndicator)});default:return e.jsx(n.SquareIcon,{"aria-hidden":!0,className:N.default(g.baseCheckboxIndicatorStyle,g.checkboxUnselectedIndicator)})}if(!t.hasSubItems)return e.jsx("div",{className:N.default(q.selectionIndicator,(t.hasNestedSiblings||0===t.level)&&q.selectionIndicatorNested),children:t.checked&&e.jsx(a.TickIcon,{"aria-hidden":!0,className:N.default(g.baseIndicatorStyle,g.selectedIndicator)})})},Oe=(s,r)=>{const{level:n,visible:i,expanded:a,keyPath:l,checked:o,hasSubItems:c,indexInParent:u,parentSetSize:d}=s,m=s.index,p=Se===r,h=c&&!X;return e.jsxs("li",{role:"none",className:N.default(q.listItemContainer,!i&&q.listItemContainerHidden),children:[ve>0&&e.jsx("div",{className:q.indent,ref:e=>{e&&e.style.setProperty(q.tokens.level,String(n))}}),ve>0&&!c&&y&&e.jsx("div",{className:q.unexpandableIndicator}),e.jsxs("div",{"aria-checked":o,"aria-selected":!!o,"aria-expanded":c?a:void 0,"aria-level":n+1,"aria-posinset":u+1,"aria-setsize":d,"data-testid":"list-item",onClick:e=>{e.stopPropagation(),h?Re(m,!a,r):((e,t)=>{qe(t),je(e),null==T||T(fe[e])})(m,r)},onMouseEnter:()=>((e,t)=>{je(t.index),qe(e)})(r,s),ref:e=>oe.current[s.index]=e,role:"treeitem",tabIndex:p?0:-1,className:N.default(q.listItem,p&&q.listItemActive,h&&q.listItemToggleable),children:[c&&e.jsx("div",{"data-testid":"toggle-category-button",onClick:e=>{e.stopPropagation(),Re(m,!a,r)},className:N.default(q.expandButton,a&&q.expandButtonExpanded),"aria-hidden":!0,children:e.jsx(t.CaretRightIcon,{})}),Me(s),e.jsx(b.DropdownLabel,{bold:c,searchTerm:ie?ne:void 0,label:s.item.label,selected:!!o,truncationType:E,maxLines:L})]})]},`[${l.join("---")}]`)},We=()=>{var t;const s="test"===process.env.NODE_ENV;return e.jsx(c.Virtuoso,Object.assign({style:{height:"100%"},customScrollParent:null!==(t=le.current)&&void 0!==t?t:void 0,data:be,itemContent:(e,t)=>Oe(t,e),components:{List:k.VirtuosoList,Item:k.VirtuosoItem},context:{listProps:{id:R,role:"tree","aria-multiselectable":y},listItemProps:{role:"none"}}},s?{initialItemCount:be.length}:{}),s?be.length:void 0)};return e.jsx("div",Object.assign({"data-testid":"dropdown-container",ref:m.mergeRefs(le,Z)},ee(),{className:N.default(g.container,"small"===D&&g.containerVariantSmall),style:te,children:e.jsxs("div",{"data-testid":"nested-dropdown-list",className:g.list,children:[Pe(),Ae(),Be(),Fe(),Te(),We()]})}))};
+"use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons/caret-right"),s=require("@lifesg/react-icons/exclamation-circle-fill"),r=require("@lifesg/react-icons/minus-square-fill"),n=require("@lifesg/react-icons/square"),i=require("@lifesg/react-icons/square-tick-fill"),a=require("@lifesg/react-icons/tick"),l=require("clsx"),o=require("react"),u=require("react-virtuoso"),c=require("../../markup/markup.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var d=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var m=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var h=require("../../util/use-event.js"),p=require("../../util/use-event-listener.js"),f=require("../../util/use-mount.js"),v=require("../component-loading-spinner/component-loading-spinner.js"),x=require("../dropdown-wrapper/element-with-dropdown.js"),j=require("../input-wrapper/input-wrapper.js"),b=require("./dropdown-label.js"),g=require("./dropdown-list.styles.js"),S=require("./dropdown-search.js"),q=require("./nested-dropdown-list.styles.js"),I=require("./nested-dropdown-list-helpers.js"),y=require("./virtuoso-components.js");function k(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var w=k(l);exports.NestedDropdownList=({listItems:l,multiSelect:k=!1,selectedKeyPaths:N,itemsLoadState:C="success",itemTruncationType:E="end",itemMaxLines:L=2,variant:D="default",listboxId:R,matchElementWidth:P=!1,width:A,mode:B="default",selectableCategory:F,onSelectItem:T,onSelectAll:M,onRetry:O,enableSearch:z,hideNoResultsDisplay:V,noResultsDescription:W,customLabels:U,searchPlaceholder:$,onSearch:H})=>{const{noResultsLabel:K="No results found.",selectAllButtonLabel:_="Select all",clearAllButtonLabel:G="Clear all"}=U||{},J=(null==U?void 0:U.searchPlaceholder)||$||"Search",Q=(null==U?void 0:U.noResultsDescription)||W,X=k||F,{elementWidth:Y,setFloatingRef:Z,getFloatingProps:ee,styles:te}=x.useDropdownRender(),[se,re]=o.useState(""),ne=se.toLowerCase().trim(),[ie,ae]=o.useState(!1),le=o.useRef(null),oe=o.useRef([]),ue=o.useRef(null),ce=f.useIsMounted(),[de,me]=o.useState([]),[he,pe]=o.useState([]),fe=ie?he:de,ve=o.useMemo((()=>{let e=0;for(const t of de)t.level>e&&(e=t.level);return e}),[de]),[xe,je]=o.useState(0),[be,ge]=o.useState([]),[Se,qe]=o.useState(0);let Ie,ye="default";A?(Ie=A,ye="custom"):P&&Y&&(Ie=`${Y}px`,ye="match"),d.useApplyStyle(le,{[g.tokens.containerWidth]:Ie});const ke=e=>{const t=e.target.value;re(t),""===t?ae(!1):t.trim().length>=3&&ae(!0),null==H||H()},we=()=>{var e;re(""),ae(!1),null===(e=ue.current)||void 0===e||e.focus(),null==H||H()},Ne=()=>{null==O||O()},Ce=()=>{if(0===N.size){const e=[],t=[];de.forEach((s=>{s.hasSubItems||(e.push(s.keyPath),t.push(s))})),null==M||M(e,t)}else null==M||M([],[])},Ee=h.useEvent(((e,t)=>I.flattenList(e,N,k,ne,t))),Le=h.useEvent((e=>N.size?I.expandSelectedSubtrees(Ee(e,!1)):I.expandFirstSubtree(Ee(e,!1)))),De=h.useEvent((e=>{const t=e=>{const s=[];for(const r of e){if(-1!==r.label.toLowerCase().indexOf(ne))s.push(r);else if(r.subItems){const e=t(r.subItems);if(e.length>0){s.push(Object.assign(Object.assign({},r),{subItems:e}));continue}}}return s};return t(e)})),Re=h.useEvent((()=>{me((e=>I.updateSelectedState(e,N,k))),ie&&pe((e=>I.updateSelectedState(e,N,k)))})),Pe=(e,t,s)=>{const r=I.toggleSubtree(fe,e,t);je(e),qe(s),ie?pe(r):me(r)};p.useEventListener("keydown",(e=>{var t,s;switch(e.code){case"ArrowDown":{e.preventDefault();const s=I.findItemFromStart(fe,(e=>e.visible),xe+1);s&&(qe((e=>e+1)),je(s.index),null===(t=oe.current[s.index])||void 0===t||t.focus());break}case"ArrowUp":{e.preventDefault();const t=I.findItemFromEnd(fe,(e=>e.visible),xe-1);t?(qe((e=>e-1)),je(t.index),null===(s=oe.current[t.index])||void 0===s||s.focus()):0===Se&&ue.current&&(ue.current.focus(),qe(-1),je(-1));break}case"ArrowRight":e.preventDefault(),Pe(xe,!0,Se);break;case"ArrowLeft":e.preventDefault(),Pe(xe,!1,Se);break;case"Space":if(document.activeElement===oe.current[xe]){e.preventDefault();const t=fe[xe];if(t.hasSubItems&&!X)return;null==T||T(t)}}})),o.useEffect((()=>{let e=[];"default"===B?e=Le(l):"expand"===B?e=Ee(l,!0):"collapse"===B&&(e=Ee(l,!1)),me(e)}),[Ee,Le,l,B]),o.useEffect((()=>{ge(fe.filter((e=>e.visible)))}),[ie,fe]),o.useEffect((()=>{Re()}),[k,N,Re]),o.useEffect((()=>{if(ie&&se.trim().length>=3){const e=De(l),t=I.expandMatchedSubtrees(Ee(e,!1));pe(t)}}),[De,Ee,l,ie,se]),o.useEffect((()=>{ce||(ue.current?(je(-1),qe(-1),setTimeout((()=>{var e;return null===(e=ue.current)||void 0===e?void 0:e.focus()}),200)):oe.current[xe]?setTimeout((()=>{var e;return null===(e=oe.current[xe])||void 0===e?void 0:e.focus()}),200):(je(0),qe(0),setTimeout((()=>{var e;return null===(e=oe.current[0])||void 0===e?void 0:e.focus()}),200)))}),[xe,Se,ce]);const Ae=()=>{if(z&&"success"===C)return e.jsx(S.DropdownSearch,{ref:ue,onChange:ke,value:se,placeholder:J,"data-testid":"search-input","aria-label":"Enter text to search",onClear:we,variant:D})},Be=()=>{if(k&&!ie&&de.length>0&&"success"===C)return e.jsx("div",{className:g.selectAllContainer,children:e.jsx(j.BasicButton,{onClick:Ce,type:"button",className:w.default(g.baseButton,g.selectAllButton),children:0===N.size?_:G})})},Fe=()=>{if(!V&&ie&&0===he.length&&"success"===C)return e.jsxs(e.Fragment,{children:[e.jsxs("div",{"data-testid":"list-no-results",className:g.resultStateContainer,children:[e.jsx(s.ExclamationCircleFillIcon,{"data-testid":"no-result-icon",className:g.labelIcon}),K]}),Q&&e.jsx(c.Markup,{"data-testid":"no-result-desc",className:g.noResultDescContainer,children:Q})]})},Te=()=>{if(O&&"loading"===C)return e.jsxs("div",{"data-testid":"list-loading",className:g.resultStateContainer,children:[e.jsx(v.ComponentLoadingSpinner,{className:g.spinner}),"Loading..."]})},Me=()=>{if(O&&"fail"===C)return e.jsxs("div",{"data-testid":"list-fail",className:g.resultStateContainer,children:[e.jsx(s.ExclamationCircleFillIcon,{"data-testid":"load-error-icon",className:g.labelIcon}),"Failed to load. ",e.jsx(j.BasicButton,{onClick:Ne,type:"button",className:w.default(g.baseButton,g.tryAgainButton),children:"Try again."})]})},Oe=t=>{if(k)switch(t.checked){case"mixed":return e.jsx(r.MinusSquareFillIcon,{"aria-hidden":!0,className:q.checkboxMixedIndicator});case!0:return e.jsx(i.SquareTickFillIcon,{"aria-hidden":!0,className:w.default(g.baseCheckboxIndicatorStyle,g.checkboxSelectedIndicator)});default:return e.jsx(n.SquareIcon,{"aria-hidden":!0,className:w.default(g.baseCheckboxIndicatorStyle,g.checkboxUnselectedIndicator)})}if(!t.hasSubItems)return e.jsx("div",{className:w.default(q.selectionIndicator,(t.hasNestedSiblings||0===t.level)&&q.selectionIndicatorNested),children:t.checked&&e.jsx(a.TickIcon,{"aria-hidden":!0,className:w.default(g.baseIndicatorStyle,g.selectedIndicator)})})},ze=(s,r)=>{const{level:n,visible:i,expanded:a,keyPath:l,checked:o,hasSubItems:u,indexInParent:c,parentSetSize:d}=s,m=s.index,h=Se===r,p=u&&!X;return e.jsxs("li",{role:"none",className:w.default(q.listItemContainer,!i&&q.listItemContainerHidden),children:[ve>0&&e.jsx("div",{className:q.indent,ref:e=>{e&&e.style.setProperty(q.tokens.level,String(n))}}),ve>0&&!u&&k&&e.jsx("div",{className:q.unexpandableIndicator}),e.jsxs("div",{"aria-checked":o,"aria-selected":!!o,"aria-expanded":u?a:void 0,"aria-level":n+1,"aria-posinset":c+1,"aria-setsize":d,"data-testid":"list-item",onClick:e=>{e.stopPropagation(),p?Pe(m,!a,r):((e,t)=>{qe(t),je(e),null==T||T(fe[e])})(m,r)},onMouseEnter:()=>((e,t)=>{je(t.index),qe(e)})(r,s),ref:e=>oe.current[s.index]=e,role:"treeitem",tabIndex:h?0:-1,className:w.default(q.listItem,h&&q.listItemActive,p&&q.listItemToggleable),children:[u&&e.jsx("div",{"data-testid":"toggle-category-button",onClick:e=>{e.stopPropagation(),Pe(m,!a,r)},className:w.default(q.expandButton,a&&q.expandButtonExpanded),"aria-hidden":!0,children:e.jsx(t.CaretRightIcon,{})}),Oe(s),e.jsx(b.DropdownLabel,{bold:u,searchTerm:ie?ne:void 0,label:s.item.label,selected:!!o,truncationType:E,maxLines:L})]})]},`[${l.join("---")}]`)},Ve=()=>{var t;const s="test"===process.env.NODE_ENV;return e.jsx(u.Virtuoso,Object.assign({style:{height:"100%"},customScrollParent:null!==(t=le.current)&&void 0!==t?t:void 0,data:be,itemContent:(e,t)=>ze(t,e),components:{List:y.VirtuosoList,Item:y.VirtuosoItem},context:{listProps:{id:R,role:"tree","aria-multiselectable":k},listItemProps:{role:"none"}}},s?{initialItemCount:be.length}:{}),s?be.length:void 0)};return e.jsx("div",Object.assign({"data-testid":"dropdown-container",ref:m.mergeRefs(le,Z)},ee(),{"data-width-type":ye,className:w.default(g.container,"small"===D&&g.containerVariantSmall),style:te,children:e.jsxs("div",{"data-testid":"nested-dropdown-list",className:g.list,children:[Ae(),Be(),Fe(),Te(),Me(),Ve()]})}))};
 //# sourceMappingURL=nested-dropdown-list.js.map