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

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

@@ -0,0 +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 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        isOptionDisabled,\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 findNextEnabledIndex = (\n        startIndex: number,\n        direction: 1 | -1\n    ): number => {\n        const nextIndex = startIndex + direction;\n        if (!isOptionDisabled) {\n            return nextIndex >= 0 && nextIndex < displayListItems.length\n                ? nextIndex\n                : -1;\n        }\n        let index = nextIndex;\n        while (index >= 0 && index < displayListItems.length) {\n            if (!isOptionDisabled(displayListItems[index])) {\n                return index;\n            }\n            index += direction;\n        }\n        return -1;\n    };\n\n    const handleKeyboardPress = (event: KeyboardEvent) => {\n        switch (event.code) {\n            case \"ArrowDown\": {\n                event.preventDefault();\n                const nextIndex = findNextEnabledIndex(focusedIndex, 1);\n                if (nextIndex !== -1) {\n                    listItemRefs.current[nextIndex]?.focus();\n                    setFocusedIndex(nextIndex);\n                }\n                break;\n            }\n            case \"ArrowUp\": {\n                event.preventDefault();\n                const prevIndex = findNextEnabledIndex(focusedIndex, -1);\n                if (prevIndex !== -1) {\n                    listItemRefs.current[prevIndex]?.focus();\n                    setFocusedIndex(prevIndex);\n                } else if (searchInputRef.current) {\n                    searchInputRef.current.focus();\n                    setFocusedIndex(-1);\n                }\n                break;\n            }\n            case \"Space\":\n            case \"Enter\":\n                if (\n                    focusedIndex >= 0 &&\n                    (document.activeElement ===\n                        listItemRefs.current[focusedIndex] ||\n                        document.activeElement === searchInputRef.current)\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 (isOptionDisabled && isOptionDisabled(item)) return;\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 || !displayListItems.length) return;\n\n        const index = displayListItems.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            const firstEnabled = isOptionDisabled\n                ? displayListItems.findIndex((item) => !isOptionDisabled(item))\n                : 0;\n            const startIndex = firstEnabled !== -1 ? firstEnabled : 0;\n            virtuosoRef.current?.scrollToIndex({ index: startIndex });\n            setFocusedIndex(startIndex);\n            setTimeout(() => listItemRefs.current[startIndex]?.focus(), 200);\n        }\n    }, [\n        checkListItemSelected,\n        disableItemFocus,\n        displayListItems,\n        focusedIndex,\n        mounted,\n        setFocusedIndex,\n        isOptionDisabled,\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 = (\n        item: T,\n        selected: boolean,\n        disabled: boolean\n    ) => {\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={disabled}\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 =\n                (!selected && hasSelectedMax) ||\n                (!!isOptionDisabled && isOptionDisabled(item));\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, disabled })\n                    ) : (\n                        <>\n                            {renderListItemIcon(selected)}\n                            {renderDropdownLabel(item, selected, disabled)}\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                {\n                    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                    renderCustomCallToAction(onDismiss as any, displayListItems)\n                }\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","isOptionDisabled","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","findNextEnabledIndex","startIndex","direction","handleListItemClick","upcomingIndex","getValue","handleSearchInputChange","event","target","handleOnClear","handleTryAgain","useEventListener","code","preventDefault","prevIndex","document","activeElement","useImperativeHandle","useEffect","scrollTo","top","timer","indexOf","clearTimeout","firstEnabled","_c","renderListItemIcon","selected","_jsx","SquareFillIcon","className","clsx","styles.baseCheckboxIndicatorStyle","styles.checkboxDisabledIndicator","SquareTickFillIcon","styles.checkboxSelectedIndicator","SquareIcon","styles.checkboxUnselectedIndicator","TickIcon","styles.baseIndicatorStyle","styles.selectedIndicator","renderDropdownLabel","disabled","DropdownLabel","displayType","label","maxLines","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

@@ -0,0 +1,2 @@
+"use strict";require("./dropdown-list.styles_konwm.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

@@ -0,0 +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 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":"gHA4JuB,6CA3BgB,qCAVR,4CAwBO,4CARA,+CAIE,4BAnHlB,yCA4DY,4BAgGZ,uBA5FL,2BAQI,iCAWM,0CAIQ,mCAIN,yCA6EK,wCApBD,kCATL,qCAbG,qCAzBD,2BA8DV,yBA5KE,CAElBA,eAAgB,qEAuJO"}

package/cjs/shared/dropdown-list/dropdown-list.styles_konwm.css

@@ -0,0 +1,26 @@
+@layer fds{.c1wprmqt{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);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-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[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-body);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;}
+.l1sloxru{background:var(--fds-colour-bg-hover-subtle);}
+.lp7vqom{background:var(--fds-colour-bg-hover);}
+.l1li8r4s{cursor:not-allowed;}
+.b3myji2{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1lh;width:1rem;}
+.s1bv8amb{color:var(--fds-colour-icon-selected);}
+.bswyxh7{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1lh;width:1lh;}
+.c1kods4c{color:var(--fds-colour-icon-selected);}
+.c2iuhda{color:var(--fds-colour-icon-primary-subtlest);}
+.cxvb3yc{color:var(--fds-colour-icon-disabled-subtle);}
+.s1gfnl3t{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}
+.b51546q{cursor:pointer;overflow:hidden;color:var(--fds-colour-text-primary);font-size:inherit;}
+.s5v4wu0{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);padding:var(--fds-spacing-8);}
+.t14h29ix{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.rlpycri{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:var(--fds-spacing-12) var(--fds-spacing-16);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--fds-colour-text);}
+.l9eregy{margin-right:var(--fds-spacing-4);color:var(--fds-colour-icon-error);height:1em;width:1em;}
+.smon6ho{margin-right:var(--fds-spacing-8);color:var(--fds-colour-icon);}
+.n1mo99ai{color:var(--fds-colour-text-subtle);padding:0 var(--fds-spacing-16);padding-bottom:var(--fds-spacing-12);}}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons/cross"),s=require("@lifesg/react-icons/magnifier"),i=require("clsx"),c=require("react"),l=require("../clickable-icon/clickable-icon.js"),n=require("../input-wrapper/input-wrapper.js"),t=require("./dropdown-search.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=o(i);const d=c.forwardRef(((i,c)=>{var{value:o,variant:d,onClear:f}=i,j=e.__rest(i,["value","variant","onClear"]);return r.jsxs("div",{className:u.default(t.container,"small"===d&&t.containerVariantSmall),children:[r.jsxs("label",{className:u.default(t.searchBox,"small"===d&&t.searchBoxVariantSmall),children:[r.jsx(s.MagnifierIcon,{"aria-hidden":!0,className:t.searchIcon}),r.jsx(n.BasicInput,Object.assign({ref:c,value:o,variant:d,className:t.searchInput},j))]}),o&&r.jsx(l.ClickableIcon,{"aria-label":"Clear search",focusOutline:"browser",onClick:f,className:t.clearButton,children:r.jsx(a.CrossIcon,{"aria-hidden":!0})})]})}));exports.DropdownSearch=d;
+//# sourceMappingURL=dropdown-search.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-search.js","sources":["../../../../src/shared/dropdown-list/dropdown-search.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { MagnifierIcon } from \"@lifesg/react-icons/magnifier\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ClickableIcon } from \"../clickable-icon\";\nimport { BasicInput } from \"../input-wrapper\";\nimport * as styles from \"./dropdown-search.styles\";\nimport type { DropdownVariantType } from \"./types\";\n\ninterface Props extends React.HTMLAttributes<HTMLInputElement> {\n    value: string /** override to cast type */;\n    variant?: DropdownVariantType | undefined;\n    onClear?: (() => void) | undefined;\n}\n\nconst Component = (\n    { value, variant, onClear, ...otherProps }: Props,\n    ref: React.Ref<HTMLInputElement>\n): JSX.Element => {\n    return (\n        <div\n            className={clsx(\n                styles.container,\n                variant === \"small\" && styles.containerVariantSmall\n            )}\n        >\n            <label\n                className={clsx(\n                    styles.searchBox,\n                    variant === \"small\" && styles.searchBoxVariantSmall\n                )}\n            >\n                <MagnifierIcon aria-hidden className={styles.searchIcon} />\n                <BasicInput\n                    ref={ref}\n                    value={value}\n                    variant={variant}\n                    className={styles.searchInput}\n                    {...otherProps}\n                />\n            </label>\n            {value && (\n                <ClickableIcon\n                    aria-label=\"Clear search\"\n                    focusOutline=\"browser\"\n                    onClick={onClear}\n                    className={styles.clearButton}\n                >\n                    <CrossIcon aria-hidden />\n                </ClickableIcon>\n            )}\n        </div>\n    );\n};\n\nexport const DropdownSearch = forwardRef(Component);\n"],"names":["DropdownSearch","forwardRef","_a","ref","value","variant","onClear","otherProps","__rest","_jsxs","className","clsx","styles.container","styles.containerVariantSmall","children","styles.searchBox","styles.searchBoxVariantSmall","_jsx","MagnifierIcon","styles.searchIcon","BasicInput","Object","assign","styles.searchInput","ClickableIcon","focusOutline","onClick","styles.clearButton","CrossIcon"],"mappings":"yaAiBA,MAwCaA,EAAiBC,EAAAA,YAxCZ,CACdC,EACAC,SADAC,MAAEA,EAAKC,QAAEA,EAAOC,QAAEA,KAAYC,EAAUC,EAAAA,OAAAN,EAAxC,CAAA,QAAA,UAAA,YAGA,OACIO,EAAAA,YACIC,UAAWC,EAAAA,QACPC,EAAAA,UACY,UAAZP,GAAuBQ,EAAAA,uBAC1BC,SAAA,CAEDL,EAAAA,KAAA,QAAA,CACIC,UAAWC,EAAAA,QACPI,EAAAA,UACY,UAAZV,GAAuBW,EAAAA,uBAC1BF,SAAA,CAEDG,EAAAA,IAACC,gBAAa,CAAA,eAAA,EAAaR,UAAWS,EAAAA,aACtCF,EAAAA,IAACG,EAAAA,WAAUC,OAAAC,OAAA,CACPnB,IAAKA,EACLC,MAAOA,EACPC,QAASA,EACTK,UAAWa,EAAAA,aACPhB,OAGXH,GACGa,EAAAA,IAACO,EAAAA,cAAa,CAAA,aACC,eACXC,aAAa,UACbC,QAASpB,EACTI,UAAWiB,EAAAA,YAAkBb,SAE7BG,EAAAA,IAACW,EAAAA,kCAGP"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./dropdown-search.styles_1hc1gkh.css");exports.clearButton="c1ml832z",exports.container="cimxtn",exports.containerVariantSmall="c5t5jsb",exports.searchBox="s9xptf8",exports.searchBoxVariantSmall="s15dwc6n",exports.searchIcon="s18shux7",exports.searchInput="slme00w";
+//# sourceMappingURL=dropdown-search.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-search.styles.js","sources":["../../../../src/shared/dropdown-list/dropdown-search.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const container = css`\n    background: ${Colour[\"bg-strong\"]};\n    border-radius: ${Radius[\"sm\"]};\n    display: flex;\n    align-items: center;\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const containerVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const searchBox = css`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    padding: 10px ${Spacing[\"spacing-8\"]};\n`;\n\nexport const searchBoxVariantSmall = css`\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n`;\n\nexport const searchInput = css`\n    flex: 1;\n`;\n\nexport const searchIcon = css`\n    color: ${Colour[\"icon\"]};\n    flex-shrink: 0;\n    height: 1em;\n    width: 1em;\n`;\n\nexport const clearButton = css`\n    flex-shrink: 0;\n    align-self: stretch;\n    box-sizing: content-box;\n    padding: ${Spacing[\"spacing-8\"]};\n    margin-left: calc(${Spacing[\"spacing-8\"]} * -1);\n    color: ${Colour[\"icon\"]};\n    cursor: pointer;\n    font-size: inherit;\n\n    svg {\n        flex-shrink: 0;\n        height: 1em;\n        width: 1em;\n    }\n`;\n"],"names":[],"mappings":"qHA2CwB,6BAnCF,uCAQY,4BAIZ,wCAQY,8BAQX,+BAJC"}

package/cjs/shared/dropdown-list/dropdown-search.styles_1hc1gkh.css

@@ -0,0 +1,7 @@
+@layer fds{.cimxtn{background:var(--fds-colour-bg-strong);border-radius:var(--fds-radius-sm);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.c5t5jsb{font-family:var(--fds-font-family-body);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);}
+.s9xptf8{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-8);padding:10px var(--fds-spacing-8);}
+.s15dwc6n{padding:var(--fds-spacing-8) var(--fds-spacing-16);}
+.slme00w{-webkit-flex:1;-ms-flex:1;flex:1;}
+.s18shux7{color:var(--fds-colour-icon);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1em;width:1em;}
+.c1ml832z{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;box-sizing:content-box;padding:var(--fds-spacing-8);margin-left:calc(var(--fds-spacing-8) * -1);color:var(--fds-colour-icon);cursor:pointer;font-size:inherit;}.c1ml832z svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1em;width:1em;}}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("@lifesg/react-icons/chevron-down"),t=require("clsx"),i=require("react"),n=require("../input-wrapper/input-wrapper.js"),s=require("./expandable-element.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(t);const d=(t,i)=>{var{children:l,className:d,disabled:c,expanded:p,listboxId:u,popupRole:x,readOnly:b,variant:m}=t,f=e.__rest(t,["children","className","disabled","expanded","listboxId","popupRole","readOnly","variant"]);return a.jsxs(n.BasicButton,Object.assign({ref:i,type:"button",role:"combobox","aria-expanded":p,"aria-haspopup":x,"aria-controls":p?u:void 0,"data-testid":"selector","aria-disabled":c,"aria-readonly":b,className:o.default(s.selector,"small"===m&&s.selectorVariantSmall,!b&&s.selectorEditable,d)},f,{children:[l,!b&&a.jsx("div",{className:o.default(s.iconContainer,p&&s.iconContainerExpanded),children:a.jsx(r.ChevronDownIcon,{"aria-hidden":!0})})]}))},c=i.forwardRef(d);exports.Component=d,exports.ExpandableElement=c;
+//# sourceMappingURL=expandable-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-element.js","sources":["../../../../src/shared/dropdown-list/expandable-element.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport clsx from \"clsx\";\nimport type { AriaAttributes, Ref } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { BasicButton } from \"../input-wrapper\";\nimport * as styles from \"./expandable-element.styles\";\nimport type { DropdownVariantType } from \"./types\";\n\nexport interface ExpandableElementProps\n    extends Pick<\n        AriaAttributes,\n        \"aria-labelledby\" | \"aria-describedby\" | \"aria-invalid\"\n    > {\n    children: React.ReactNode;\n    className?: string | undefined;\n    disabled: boolean | undefined;\n    expanded: boolean | undefined;\n    listboxId: string;\n    popupRole: AriaAttributes[\"aria-haspopup\"];\n    readOnly: boolean | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const Component = (\n    {\n        children,\n        className,\n        disabled,\n        expanded,\n        listboxId,\n        popupRole,\n        readOnly,\n        variant,\n        ...otherProps\n    }: ExpandableElementProps,\n    ref: Ref<HTMLButtonElement>\n) => {\n    return (\n        <BasicButton\n            ref={ref}\n            type=\"button\"\n            role=\"combobox\"\n            aria-expanded={expanded}\n            aria-haspopup={popupRole}\n            aria-controls={expanded ? listboxId : undefined}\n            data-testid=\"selector\"\n            aria-disabled={disabled}\n            aria-readonly={readOnly}\n            className={clsx(\n                styles.selector,\n                variant === \"small\" && styles.selectorVariantSmall,\n                !readOnly && styles.selectorEditable,\n                className\n            )}\n            {...otherProps}\n        >\n            {children}\n            {!readOnly && (\n                <div\n                    className={clsx(\n                        styles.iconContainer,\n                        expanded && styles.iconContainerExpanded\n                    )}\n                >\n                    <ChevronDownIcon aria-hidden />\n                </div>\n            )}\n        </BasicButton>\n    );\n};\n\nexport const ExpandableElement = forwardRef(Component);\n"],"names":["Component","_a","ref","children","className","disabled","expanded","listboxId","popupRole","readOnly","variant","otherProps","__rest","_jsxs","BasicButton","Object","assign","type","role","undefined","clsx","styles.selector","styles.selectorVariantSmall","styles.selectorEditable","_jsx","styles.iconContainer","styles.iconContainerExpanded","ChevronDownIcon","ExpandableElement","forwardRef"],"mappings":"6VAwBaA,EAAY,CACrBC,EAWAC,SAXAC,SACIA,EAAQC,UACRA,EAASC,SACTA,EAAQC,SACRA,EAAQC,UACRA,EAASC,UACTA,EAASC,SACTA,EAAQC,QACRA,GAAOT,EACJU,EAAUC,EAAAA,OAAAX,EATjB,6FAaA,OACIY,EAAAA,KAACC,EAAAA,YAAWC,OAAAC,OAAA,CACRd,IAAKA,EACLe,KAAK,SACLC,KAAK,WAAU,gBACAZ,EAAQ,gBACRE,kBACAF,EAAWC,OAAYY,EAAS,cACnC,2BACGd,EAAQ,gBACRI,EACfL,UAAWgB,EAAAA,QACPC,EAAAA,SACY,UAAZX,GAAuBY,EAAAA,sBACtBb,GAAYc,EAAAA,iBACbnB,IAEAO,EAAU,CAAAR,SAAA,CAEbA,GACCM,GACEe,EAAAA,WACIpB,UAAWgB,EAAAA,QACPK,EAAAA,cACAnB,GAAYoB,EAAAA,gCAGhBF,EAAAA,IAACG,EAAAA,yCAGC,EAITC,EAAoBC,EAAAA,WAAW7B"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./expandable-element.styles_rkkvqr.css");exports.iconContainer="i11rk48k",exports.iconContainerExpanded="i1r624au",exports.selector="s14ftgne",exports.selectorEditable="s2pr33o",exports.selectorVariantSmall="s14xk9xz";
+//# sourceMappingURL=expandable-element.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-element.styles.js","sources":["../../../../src/shared/dropdown-list/expandable-element.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const selector = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    width: 100%;\n\n    ${Font[\"body-baseline-regular\"]}\n    height: calc(3rem - 2px);\n\n    &:disabled {\n        cursor: not-allowed;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const selectorVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n    height: calc(2.5rem - 2px);\n`;\n\nexport const selectorEditable = css`\n    padding: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const iconContainer = css`\n    display: flex;\n    align-items: center;\n    transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n\n    svg {\n        color: ${Colour[\"icon\"]};\n        height: 1em;\n        width: 1em;\n    }\n`;\n\nexport const iconContainerExpanded = css`\n    transform: rotate(180deg);\n`;\n"],"names":[],"mappings":"yHAoC0B,yCAYQ,4BAxCb,oCAwBQ,uCALI"}

package/cjs/shared/dropdown-list/expandable-element.styles_rkkvqr.css

@@ -0,0 +1,5 @@
+@layer fds{.s14ftgne{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-8);width:100%;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);height:calc(3rem - 2px);}.s14ftgne:disabled{cursor:not-allowed;}.s14ftgne:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-2px;}
+.s14xk9xz{font-family:var(--fds-font-family-body);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);height:calc(2.5rem - 2px);}
+.s2pr33o{padding:var(--fds-spacing-16);}
+.i11rk48k{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:-webkit-transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}.i11rk48k svg{color:var(--fds-colour-icon);height:1em;width:1em;}
+.i1r624au{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}}

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

@@ -0,0 +1 @@
+{"version":3,"file":"nested-dropdown-list-helpers.js","sources":["../../../../src/shared/dropdown-list/nested-dropdown-list-helpers.ts"],"sourcesContent":["import { produce } from \"immer\";\nimport isEmpty from \"lodash/isEmpty\";\nimport isEqual from \"lodash/isEqual\";\n\nimport type {\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n} from \"./types\";\n\n/**\n * builds a flattened representation of the tree\n * the items are listed in their visual order\n */\nexport const flattenList = <T>(\n    nestedList: NestedDropdownListItemProps<T>[],\n    selectedKeyPaths: Set<string>,\n    multiSelect: boolean,\n    searchTerm: string,\n    initialExpanded: boolean\n): NestedDropdownListLocalItem<T>[] => {\n    const items: NestedDropdownListLocalItem<T>[] = [];\n\n    const flatten = (\n        list: NestedDropdownListItemProps<T>[],\n        parentItem: NestedDropdownListLocalItem<T> | undefined\n    ) => {\n        const current: NestedDropdownListLocalItem<T>[] = [];\n        const hasNestedSiblings = list.some(\n            (option) => option.subItems?.length\n        );\n\n        list.forEach((option, i) => {\n            const level = parentItem ? parentItem.level + 1 : 0;\n            const keyPath = parentItem\n                ? [...parentItem.keyPath, option.key]\n                : [option.key];\n            const keyPathString = buildKeyPath(keyPath);\n\n            const item: (typeof items)[number] = {\n                item: option,\n                index: items.length,\n                indexInParent: i,\n                parentSetSize: list.length,\n                keyPath,\n                parentIndex: parentItem ? parentItem.index : -1,\n                parentKeyPath: parentItem ? parentItem.keyPath : [],\n                level,\n                visible:\n                    level === 0 ||\n                    initialExpanded ||\n                    parentItem?.expanded ||\n                    false,\n                expanded: initialExpanded,\n                checked: selectedKeyPaths.has(keyPathString),\n                hasSubItems: !!option.subItems?.length,\n                subItemIndexes: [],\n                hasNestedSiblings,\n                matched: searchTerm\n                    ? option.label.toLowerCase().indexOf(searchTerm) !== -1\n                    : false,\n                hasMatchedSubItems: false,\n            };\n            current.push(item);\n            items.push(item);\n\n            if (option.subItems?.length) {\n                const children = flatten(option.subItems, item);\n\n                if (multiSelect && item.checked !== true) {\n                    const allChildrenSelected = children.every(\n                        (child) => child.checked === true\n                    );\n                    const mixed = children.some(\n                        (child) => child.checked !== false\n                    );\n\n                    if (allChildrenSelected) {\n                        item.checked = true;\n                    } else if (mixed) {\n                        item.checked = \"mixed\";\n                    }\n                }\n\n                item.hasMatchedSubItems = children.some(\n                    (child) => child.matched || child.hasMatchedSubItems\n                );\n                item.subItemIndexes = children.map((child) => child.index);\n            }\n        });\n        return current;\n    };\n\n    flatten(nestedList, undefined);\n    return items;\n};\n\nexport const expandSelectedSubtrees = <T>(\n    list: NestedDropdownListLocalItem<T>[]\n) => {\n    return produce(list, (draft) => {\n        const selectedItems = draft.filter((item) => item.checked === true);\n        for (const selectedItem of selectedItems) {\n            let parentIndex = selectedItem.parentIndex;\n            while (parentIndex >= 0) {\n                const parent = draft[parentIndex];\n                parent.visible = true;\n                parent.expanded = true;\n\n                for (const i of parent.subItemIndexes) {\n                    draft[i].visible = true;\n                }\n\n                parentIndex = parent.parentIndex;\n            }\n        }\n    });\n};\n\nexport const expandMatchedSubtrees = <T>(\n    list: NestedDropdownListLocalItem<T>[]\n) => {\n    return produce(list, (draft) => {\n        for (const item of draft) {\n            if (item.matched) {\n                item.visible = true;\n            }\n\n            if (item.hasMatchedSubItems) {\n                item.visible = true;\n                item.expanded = true;\n\n                for (const i of item.subItemIndexes) {\n                    draft[i].visible = true;\n                }\n            }\n        }\n    });\n};\n\nexport const expandFirstSubtree = <T>(\n    list: NestedDropdownListLocalItem<T>[]\n) => {\n    return produce(list, (draft) => {\n        const firstSubtreeIndex = draft.findIndex((item) => item.hasSubItems);\n        if (firstSubtreeIndex < 0) {\n            return;\n        }\n        let index = firstSubtreeIndex;\n        let length = 0;\n        // find the first subtree\n        for (let i = index; i < draft.length; i++) {\n            const nextItemLength = draft[i].keyPath.length;\n            if (nextItemLength > length) {\n                length = nextItemLength;\n            } else if (nextItemLength < length) {\n                break;\n            }\n\n            index = i;\n            draft[i].visible = true;\n            draft[i].expanded = true;\n        }\n\n        // expand siblings of ancestors\n        for (let i = 0; i < draft.length; i++) {\n            const item = draft[i];\n            const parentKeyPath = item.keyPath.slice(0, -1);\n            const ancestorKeyPath = draft[index].keyPath.slice(\n                0,\n                parentKeyPath.length\n            );\n            if (isEqual(parentKeyPath, ancestorKeyPath)) {\n                item.visible = true;\n            }\n        }\n        return draft;\n    });\n};\n\nexport const toggleSubtree = <T>(\n    list: NestedDropdownListLocalItem<T>[],\n    index: number,\n    expanded: boolean\n) => {\n    return produce(list, (draft) => {\n        draft[index].expanded = expanded;\n        const keyPath = draft[index].keyPath;\n        for (let i = index + 1; i < draft.length; i++) {\n            const item = draft[i];\n            const parent = draft[item.parentIndex];\n            const ancestorKeyPath = item.keyPath.slice(0, keyPath.length);\n            if (isEqual(keyPath, ancestorKeyPath)) {\n                item.visible = expanded && parent.expanded && parent.visible;\n            } else {\n                // no more descendents\n                break;\n            }\n        }\n    });\n};\n\nexport const updateSelectedState = <T>(\n    list: NestedDropdownListLocalItem<T>[],\n    selectedKeyPaths: Set<string>,\n    multiSelect: boolean\n) => {\n    const res = produce(list, (draft) => {\n        for (let i = draft.length - 1; i >= 0; i--) {\n            const item = draft[i];\n            const itemKeyPathString = buildKeyPath(item.keyPath);\n            item.checked = selectedKeyPaths.has(itemKeyPathString);\n            if (item.hasSubItems) {\n                if (multiSelect && item.checked !== true) {\n                    const children = item.subItemIndexes.map(\n                        (index) => draft[index]\n                    );\n\n                    const allChildrenSelected = children.every(\n                        (child) => child.checked === true\n                    );\n                    const mixed = children.some(\n                        (child) => child.checked !== false\n                    );\n\n                    if (allChildrenSelected) {\n                        item.checked = true;\n                    } else if (mixed) {\n                        item.checked = \"mixed\";\n                    }\n                }\n            }\n        }\n    });\n    return res;\n};\n\nexport const findItemFromStart = <T>(\n    arr: T[],\n    predicate: (e: T) => boolean,\n    start: number\n): T | undefined => {\n    for (let i = start; i < arr.length; i++) {\n        if (predicate(arr[i])) {\n            return arr[i];\n        }\n    }\n\n    return undefined;\n};\n\nexport const findItemFromEnd = <T>(\n    arr: T[],\n    predicate: (e: T) => boolean,\n    end: number\n): T | undefined => {\n    for (let i = end; i >= 0; i--) {\n        if (predicate(arr[i])) {\n            return arr[i];\n        }\n    }\n\n    return undefined;\n};\n\nexport const findItemByKeyPath = <T>(\n    nestedList: NestedDropdownListItemProps<T>[] | undefined,\n    keyPath: string[]\n): NestedDropdownListItemProps<T> | undefined => {\n    const [currentKey, ...nextKeyPath] = keyPath;\n    if (isEmpty(nestedList) || isEmpty(currentKey)) {\n        return undefined;\n    }\n\n    const item = nestedList!.find((item) => item.key === currentKey);\n\n    if (!item || !nextKeyPath.length) {\n        return item;\n    }\n\n    return findItemByKeyPath(item.subItems, nextKeyPath);\n};\n\nexport const buildKeyPath = (keyPath: string[]): string => {\n    return keyPath.join(\",\");\n};\n\nexport const buildKeyPathToSet = (keyPathArr: string[][]): Set<string> => {\n    return new Set<string>(keyPathArr.map((keyPath) => keyPath.join(\",\")));\n};\n"],"names":["findItemByKeyPath","nestedList","keyPath","currentKey","nextKeyPath","isEmpty","item","find","key","length","subItems","buildKeyPath","join","keyPathArr","Set","map","list","produce","draft","firstSubtreeIndex","findIndex","hasSubItems","index","i","nextItemLength","visible","expanded","parentKeyPath","slice","ancestorKeyPath","isEqual","matched","hasMatchedSubItems","subItemIndexes","selectedItems","filter","checked","selectedItem","parentIndex","parent","arr","predicate","end","start","selectedKeyPaths","multiSelect","searchTerm","initialExpanded","items","flatten","parentItem","current","hasNestedSiblings","some","option","_a","forEach","level","keyPathString","indexInParent","parentSetSize","has","label","toLowerCase","indexOf","push","_b","children","allChildrenSelected","every","child","mixed","undefined","itemKeyPathString"],"mappings":"gIAaO,MA2PMA,EAAoB,CAC7BC,EACAC,KAEA,MAAOC,KAAeC,GAAeF,EACrC,GAAIG,EAAAA,QAAQJ,IAAeI,EAAAA,QAAQF,GAC/B,OAGJ,MAAMG,EAAOL,EAAYM,MAAMD,GAASA,EAAKE,MAAQL,IAErD,OAAKG,GAASF,EAAYK,OAInBT,EAAkBM,EAAKI,SAAUN,GAH7BE,CAGyC,EAG3CK,EAAgBT,GAClBA,EAAQU,KAAK,sDAGUC,GACvB,IAAIC,IAAYD,EAAWE,KAAKb,GAAYA,EAAQU,KAAK,mCAnJhEI,GAEOC,EAAAA,QAAQD,GAAOE,IAClB,MAAMC,EAAoBD,EAAME,WAAWd,GAASA,EAAKe,cACzD,GAAIF,EAAoB,EACpB,OAEJ,IAAIG,EAAQH,EACRV,EAAS,EAEb,IAAK,IAAIc,EAAID,EAAOC,EAAIL,EAAMT,OAAQc,IAAK,CACvC,MAAMC,EAAiBN,EAAMK,GAAGrB,QAAQO,OACxC,GAAIe,EAAiBf,EACjBA,EAASe,OACN,GAAIA,EAAiBf,EACxB,MAGJa,EAAQC,EACRL,EAAMK,GAAGE,SAAU,EACnBP,EAAMK,GAAGG,UAAW,CACxB,CAGA,IAAK,IAAIH,EAAI,EAAGA,EAAIL,EAAMT,OAAQc,IAAK,CACnC,MAAMjB,EAAOY,EAAMK,GACbI,EAAgBrB,EAAKJ,QAAQ0B,MAAM,GAAG,GACtCC,EAAkBX,EAAMI,GAAOpB,QAAQ0B,MACzC,EACAD,EAAclB,QAEdqB,EAAAA,QAAQH,EAAeE,KACvBvB,EAAKmB,SAAU,EAEvB,CACA,OAAOP,CAAK,kCAxDhBF,GAEOC,EAAAA,QAAQD,GAAOE,IAClB,IAAK,MAAMZ,KAAQY,EAKf,GAJIZ,EAAKyB,UACLzB,EAAKmB,SAAU,GAGfnB,EAAK0B,mBAAoB,CACzB1B,EAAKmB,SAAU,EACfnB,EAAKoB,UAAW,EAEhB,IAAK,MAAMH,KAAKjB,EAAK2B,eACjBf,EAAMK,GAAGE,SAAU,CAE3B,CACJ,mCAtCJT,GAEOC,EAAAA,QAAQD,GAAOE,IAClB,MAAMgB,EAAgBhB,EAAMiB,QAAQ7B,IAA0B,IAAjBA,EAAK8B,UAClD,IAAK,MAAMC,KAAgBH,EAAe,CACtC,IAAII,EAAcD,EAAaC,YAC/B,KAAOA,GAAe,GAAG,CACrB,MAAMC,EAASrB,EAAMoB,GACrBC,EAAOd,SAAU,EACjBc,EAAOb,UAAW,EAElB,IAAK,MAAMH,KAAKgB,EAAON,eACnBf,EAAMK,GAAGE,SAAU,EAGvBa,EAAcC,EAAOD,WACzB,CACJ,yDAwIuB,CAC3BE,EACAC,EACAC,KAEA,IAAK,IAAInB,EAAImB,EAAKnB,GAAK,EAAGA,IACtB,GAAIkB,EAAUD,EAAIjB,IACd,OAAOiB,EAAIjB,EAIH,4BAzBa,CAC7BiB,EACAC,EACAE,KAEA,IAAK,IAAIpB,EAAIoB,EAAOpB,EAAIiB,EAAI/B,OAAQc,IAChC,GAAIkB,EAAUD,EAAIjB,IACd,OAAOiB,EAAIjB,EAIH,sBA1OO,CACvBtB,EACA2C,EACAC,EACAC,EACAC,KAEA,MAAMC,EAA0C,GAE1CC,EAAU,CACZjC,EACAkC,KAEA,MAAMC,EAA4C,GAC5CC,EAAoBpC,EAAKqC,MAC1BC,UAAW,eAAAC,EAAAD,EAAO5C,+BAAUD,MAAM,IA6DvC,OA1DAO,EAAKwC,SAAQ,CAACF,EAAQ/B,aAClB,MAAMkC,EAAQP,EAAaA,EAAWO,MAAQ,EAAI,EAC5CvD,EAAUgD,EACV,IAAIA,EAAWhD,QAASoD,EAAO9C,KAC/B,CAAC8C,EAAO9C,KACRkD,EAAgB/C,EAAaT,GAE7BI,EAA+B,CACjCA,KAAMgD,EACNhC,MAAO0B,EAAMvC,OACbkD,cAAepC,EACfqC,cAAe5C,EAAKP,OACpBP,UACAoC,YAAaY,EAAaA,EAAW5B,OAAQ,EAC7CK,cAAeuB,EAAaA,EAAWhD,QAAU,GACjDuD,QACAhC,QACc,IAAVgC,GACAV,IACAG,aAAU,EAAVA,EAAYxB,YACZ,EACJA,SAAUqB,EACVX,QAASQ,EAAiBiB,IAAIH,GAC9BrC,eAA8B,QAAfkC,EAAAD,EAAO5C,gBAAQ,IAAA6C,OAAA,EAAAA,EAAE9C,QAChCwB,eAAgB,GAChBmB,oBACArB,UAASe,IACgD,IAAnDQ,EAAOQ,MAAMC,cAAcC,QAAQlB,GAEzCd,oBAAoB,GAKxB,GAHAmB,EAAQc,KAAK3D,GACb0C,EAAMiB,KAAK3D,GAEQ,UAAfgD,EAAO5C,gBAAQ,IAAAwD,OAAA,EAAAA,EAAEzD,OAAQ,CACzB,MAAM0D,EAAWlB,EAAQK,EAAO5C,SAAUJ,GAE1C,GAAIuC,IAAgC,IAAjBvC,EAAK8B,QAAkB,CACtC,MAAMgC,EAAsBD,EAASE,OAChCC,IAA4B,IAAlBA,EAAMlC,UAEfmC,EAAQJ,EAASd,MAClBiB,IAA4B,IAAlBA,EAAMlC,UAGjBgC,EACA9D,EAAK8B,SAAU,EACRmC,IACPjE,EAAK8B,QAAU,QAEvB,CAEA9B,EAAK0B,mBAAqBmC,EAASd,MAC9BiB,GAAUA,EAAMvC,SAAWuC,EAAMtC,qBAEtC1B,EAAK2B,eAAiBkC,EAASpD,KAAKuD,GAAUA,EAAMhD,OACxD,KAEG6B,CAAO,EAIlB,OADAF,EAAQhD,OAAYuE,GACbxB,CAAK,wBAsFa,CACzBhC,EACAM,EACAI,IAEOT,EAAAA,QAAQD,GAAOE,IAClBA,EAAMI,GAAOI,SAAWA,EACxB,MAAMxB,EAAUgB,EAAMI,GAAOpB,QAC7B,IAAK,IAAIqB,EAAID,EAAQ,EAAGC,EAAIL,EAAMT,OAAQc,IAAK,CAC3C,MAAMjB,EAAOY,EAAMK,GACbgB,EAASrB,EAAMZ,EAAKgC,aACpBT,EAAkBvB,EAAKJ,QAAQ0B,MAAM,EAAG1B,EAAQO,QACtD,IAAIqB,EAAAA,QAAQ5B,EAAS2B,GAIjB,MAHAvB,EAAKmB,QAAUC,GAAYa,EAAOb,UAAYa,EAAOd,OAK7D,iCAI2B,CAC/BT,EACA4B,EACAC,IAEY5B,EAAAA,QAAQD,GAAOE,IACvB,IAAK,IAAIK,EAAIL,EAAMT,OAAS,EAAGc,GAAK,EAAGA,IAAK,CACxC,MAAMjB,EAAOY,EAAMK,GACbkD,EAAoB9D,EAAaL,EAAKJ,SAE5C,GADAI,EAAK8B,QAAUQ,EAAiBiB,IAAIY,GAChCnE,EAAKe,aACDwB,IAAgC,IAAjBvC,EAAK8B,QAAkB,CACtC,MAAM+B,EAAW7D,EAAK2B,eAAelB,KAChCO,GAAUJ,EAAMI,KAGf8C,EAAsBD,EAASE,OAChCC,IAA4B,IAAlBA,EAAMlC,UAEfmC,EAAQJ,EAASd,MAClBiB,IAA4B,IAAlBA,EAAMlC,UAGjBgC,EACA9D,EAAK8B,SAAU,EACRmC,IACPjE,EAAK8B,QAAU,QAEvB,CAER"}

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

@@ -0,0 +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"),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

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

@@ -0,0 +1 @@
+{"version":3,"file":"nested-dropdown-list.js","sources":["../../../../src/shared/dropdown-list/nested-dropdown-list.tsx"],"sourcesContent":["import { CaretRightIcon } from \"@lifesg/react-icons/caret-right\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { MinusSquareFillIcon } from \"@lifesg/react-icons/minus-square-fill\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Virtuoso } from \"react-virtuoso\";\n\nimport { Markup } from \"../../markup\";\nimport { useApplyStyle } from \"../../theme\";\nimport {\n    mergeRefs,\n    useEvent,\n    useEventListener,\n    useIsMounted,\n} from \"../../util\";\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 { DropdownSearch } from \"./dropdown-search\";\nimport * as nestedStyles from \"./nested-dropdown-list.styles\";\nimport {\n    expandFirstSubtree,\n    expandMatchedSubtrees,\n    expandSelectedSubtrees,\n    findItemFromEnd,\n    findItemFromStart,\n    flattenList,\n    toggleSubtree,\n    updateSelectedState,\n} from \"./nested-dropdown-list-helpers\";\nimport type {\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n    NestedDropdownListProps,\n} from \"./types\";\nimport { VirtuosoItem, VirtuosoList } from \"./virtuoso-components\";\n\nexport const NestedDropdownList = <T,>({\n    listItems,\n    multiSelect = false,\n    selectedKeyPaths,\n    itemsLoadState = \"success\",\n    itemTruncationType = \"end\",\n    itemMaxLines = 2,\n    variant = \"default\",\n    listboxId,\n    matchElementWidth = false,\n    width,\n    mode = \"default\",\n    selectableCategory: _selectableCategory,\n    onSelectItem,\n    onSelectAll,\n    onRetry,\n    /* DropdownSearchProps */\n    enableSearch,\n    hideNoResultsDisplay,\n    noResultsDescription: _noResultsDescription,\n    customLabels,\n    searchPlaceholder: _searchPlaceholder,\n    onSearch,\n}: NestedDropdownListProps<T>) => {\n    // =========================================================================\n    // CONST, STATE, REF\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 selectableCategory = multiSelect || _selectableCategory;\n\n    const {\n        elementWidth,\n        setFloatingRef,\n        getFloatingProps,\n        styles: floatingStyles,\n    } = useDropdownRender();\n    const [searchValue, setSearchValue] = useState<string>(\"\");\n    const searchTerm = searchValue.toLowerCase().trim();\n    const [searchActive, setSearchActive] = useState<boolean>(false);\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const listItemRefs = useRef<(HTMLElement | null)[]>([]);\n    const searchInputRef = useRef<HTMLInputElement>(null);\n    const mounted = useIsMounted();\n\n    // maintaining a separate list for search and non-search as we need to\n    // preserve the original expanded state\n    const [unfilteredListItems, setUnfilteredListItems] = useState<\n        NestedDropdownListLocalItem<T>[]\n    >([]);\n    const [filteredListItems, setFilteredListItems] = useState<\n        NestedDropdownListLocalItem<T>[]\n    >([]);\n\n    const activeList = searchActive ? filteredListItems : unfilteredListItems;\n\n    const maxLevel = useMemo(() => {\n        let currentMaxLevel = 0;\n        for (const item of unfilteredListItems) {\n            if (item.level > currentMaxLevel) {\n                currentMaxLevel = item.level;\n            }\n        }\n        return currentMaxLevel;\n    }, [unfilteredListItems]);\n\n    // TODO: persist in context?\n    const [focusedIndex, setFocusedIndex] = useState(0);\n\n    /**\n     * NOTE: Keeping track of the visible items to pass to Virtuoso for virtualisation to work.\n     * This is required due to the nature of show/hide sub-items, to omit them from the DOM entirely.\n     */\n    const [visibleItems, setVisibleItems] = useState<\n        NestedDropdownListLocalItem<T>[]\n    >([]);\n\n    // NOTE: Maintaining a separate index for UI to keep track on which item (in terms of Virtuoso's indexing) is currently focused on keyboard press events.\n    const [virtuosoIndex, setVirtuosoIndex] = useState(0);\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    // EVENT HANDLERS\n    // =========================================================================\n    const handleKeyboardPress = (event: KeyboardEvent) => {\n        /**\n         *  NOTE: When navigating up/down the list using keyboard, need to use virtuoso index, when expanding/collapsing, need actual index as we need to toggle the visible state of the sub-items\n         */\n        switch (event.code) {\n            case \"ArrowDown\": {\n                event.preventDefault();\n                const upcomingItem = findItemFromStart(\n                    activeList,\n                    (item) => item.visible,\n                    focusedIndex + 1\n                );\n                if (upcomingItem) {\n                    setVirtuosoIndex((vIndex) => vIndex + 1);\n                    setFocusedIndex(upcomingItem.index);\n                    listItemRefs.current[upcomingItem.index]?.focus();\n                }\n                break;\n            }\n            case \"ArrowUp\": {\n                event.preventDefault();\n                const upcomingItem = findItemFromEnd(\n                    activeList,\n                    (item) => item.visible,\n                    focusedIndex - 1\n                );\n                if (upcomingItem) {\n                    setVirtuosoIndex((vIndex) => vIndex - 1);\n                    setFocusedIndex(upcomingItem.index);\n                    listItemRefs.current[upcomingItem.index]?.focus();\n                } else if (virtuosoIndex === 0 && searchInputRef.current) {\n                    searchInputRef.current.focus();\n                    setVirtuosoIndex(-1);\n                    setFocusedIndex(-1);\n                }\n                break;\n            }\n            case \"ArrowRight\": {\n                event.preventDefault();\n                toggleCategory(focusedIndex, true, virtuosoIndex);\n                break;\n            }\n            case \"ArrowLeft\": {\n                event.preventDefault();\n                toggleCategory(focusedIndex, false, virtuosoIndex);\n                break;\n            }\n            case \"Space\": {\n                if (\n                    document.activeElement ===\n                    listItemRefs.current[focusedIndex]\n                ) {\n                    event.preventDefault();\n                    const target = activeList[focusedIndex];\n                    if (target.hasSubItems && !selectableCategory) {\n                        return;\n                    }\n                    onSelectItem?.(target);\n                }\n                break;\n            }\n        }\n    };\n\n    const handleSearchInputChange = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        const value = event.target.value;\n        setSearchValue(value);\n\n        if (value === \"\") {\n            setSearchActive(false);\n        } else if (value.trim().length >= 3) {\n            setSearchActive(true);\n        }\n\n        onSearch?.();\n    };\n\n    const handleOnClear = () => {\n        setSearchValue(\"\");\n        setSearchActive(false);\n        searchInputRef.current?.focus();\n\n        onSearch?.();\n    };\n\n    const handleTryAgain = () => {\n        onRetry?.();\n    };\n\n    const handleListItemClick = (itemIndex: number, vIndex: number) => {\n        setVirtuosoIndex(vIndex);\n        setFocusedIndex(itemIndex);\n        onSelectItem?.(activeList[itemIndex]);\n    };\n\n    const handleListItemHover = (\n        virtuosoIndex: number,\n        listItem: NestedDropdownListLocalItem<T>\n    ) => {\n        setFocusedIndex(listItem.index);\n        setVirtuosoIndex(virtuosoIndex);\n    };\n\n    const handleOnSelectAll = () => {\n        if (selectedKeyPaths.size === 0) {\n            const keyPaths: string[][] = [];\n            const items: NestedDropdownListLocalItem<T>[] = [];\n            unfilteredListItems.forEach((item) => {\n                if (item.hasSubItems) {\n                    return;\n                }\n                keyPaths.push(item.keyPath);\n                items.push(item);\n            });\n\n            onSelectAll?.(keyPaths, items);\n        } else {\n            onSelectAll?.([], []);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const flatten = useEvent(\n        (\n            nestedList: NestedDropdownListItemProps<T>[],\n            initialExpanded: boolean\n        ): NestedDropdownListLocalItem<T>[] => {\n            return flattenList(\n                nestedList,\n                selectedKeyPaths,\n                multiSelect,\n                searchTerm,\n                initialExpanded\n            );\n        }\n    );\n\n    const flattenDefaultMode = useEvent(\n        (nestedList: NestedDropdownListItemProps<T>[]) => {\n            if (selectedKeyPaths.size) {\n                return expandSelectedSubtrees(flatten(nestedList, false));\n            } else {\n                return expandFirstSubtree(flatten(nestedList, false));\n            }\n        }\n    );\n\n    const filter = useEvent((nestedList: NestedDropdownListItemProps<T>[]) => {\n        const filterMatchedItems = (list: NestedDropdownListItemProps<T>[]) => {\n            const matchedItems: NestedDropdownListItemProps<T>[] = [];\n            for (const item of list) {\n                const match =\n                    item.label.toLowerCase().indexOf(searchTerm) !== -1;\n\n                if (match) {\n                    matchedItems.push(item);\n                    continue;\n                }\n\n                if (item.subItems) {\n                    const matchedSubItems = filterMatchedItems(item.subItems);\n                    if (matchedSubItems.length > 0) {\n                        matchedItems.push({\n                            ...item,\n                            subItems: matchedSubItems,\n                        });\n                        continue;\n                    }\n                }\n            }\n            return matchedItems;\n        };\n        return filterMatchedItems(nestedList);\n    });\n\n    const updateSelectedItemsInList = useEvent(() => {\n        setUnfilteredListItems((unfilteredListItems) =>\n            updateSelectedState(\n                unfilteredListItems,\n                selectedKeyPaths,\n                multiSelect\n            )\n        );\n\n        if (searchActive) {\n            setFilteredListItems((filteredListItems) =>\n                updateSelectedState(\n                    filteredListItems,\n                    selectedKeyPaths,\n                    multiSelect\n                )\n            );\n        }\n    });\n\n    const toggleCategory = (\n        index: number,\n        nextExpanded: boolean,\n        virtuosoIndex: number\n    ) => {\n        const list = toggleSubtree(activeList, index, nextExpanded);\n        setFocusedIndex(index);\n        setVirtuosoIndex(virtuosoIndex);\n        if (searchActive) {\n            setFilteredListItems(list);\n        } else {\n            setUnfilteredListItems(list);\n        }\n    };\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEventListener(\"keydown\", handleKeyboardPress);\n\n    useEffect(() => {\n        let list: NestedDropdownListLocalItem<T>[] = [];\n        if (mode === \"default\") {\n            list = flattenDefaultMode(listItems);\n        } else if (mode === \"expand\") {\n            list = flatten(listItems, true);\n        } else if (mode === \"collapse\") {\n            list = flatten(listItems, false);\n        }\n        setUnfilteredListItems(list);\n    }, [flatten, flattenDefaultMode, listItems, mode]);\n\n    useEffect(() => {\n        // Filter out non-visible items before passing to Virtuoso\n        setVisibleItems(activeList.filter((item) => item.visible));\n    }, [searchActive, activeList]);\n\n    useEffect(() => {\n        updateSelectedItemsInList();\n    }, [multiSelect, selectedKeyPaths, updateSelectedItemsInList]);\n\n    useEffect(() => {\n        if (searchActive && searchValue.trim().length >= 3) {\n            const filteredListItems = filter(listItems);\n            const list = expandMatchedSubtrees(\n                flatten(filteredListItems, false)\n            );\n\n            setFilteredListItems(list);\n        }\n    }, [filter, flatten, listItems, searchActive, searchValue]);\n\n    useEffect(() => {\n        if (mounted) {\n            // only run on mount\n            return;\n        }\n\n        // Focus search input if there is one\n        if (searchInputRef.current) {\n            setFocusedIndex(-1);\n            setVirtuosoIndex(-1);\n            setTimeout(() => searchInputRef.current?.focus(), 200); // wait for animation\n        } else if (listItemRefs.current[focusedIndex]) {\n            // Else focus on the specified element\n            setTimeout(() => listItemRefs.current[focusedIndex]?.focus(), 200);\n        } else {\n            // Else focus on the first list item\n            setFocusedIndex(0);\n            setVirtuosoIndex(0);\n            setTimeout(() => listItemRefs.current[0]?.focus(), 200);\n        }\n    }, [focusedIndex, virtuosoIndex, mounted]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderSearchInput = () => {\n        if (enableSearch && 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            multiSelect &&\n            !searchActive &&\n            unfilteredListItems.length > 0 &&\n            itemsLoadState === \"success\"\n        ) {\n            return (\n                <div className={styles.selectAllContainer}>\n                    <BasicButton\n                        onClick={handleOnSelectAll}\n                        type=\"button\"\n                        className={clsx(\n                            styles.baseButton,\n                            styles.selectAllButton\n                        )}\n                    >\n                        {selectedKeyPaths.size === 0\n                            ? selectAllButtonLabel\n                            : clearAllButtonLabel}\n                    </BasicButton>\n                </div>\n            );\n        }\n    };\n\n    const renderNoResults = () => {\n        if (\n            !hideNoResultsDisplay &&\n            searchActive &&\n            filteredListItems.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    const renderSelectionIcon = (listItem: NestedDropdownListLocalItem<T>) => {\n        if (multiSelect) {\n            switch (listItem.checked) {\n                case \"mixed\":\n                    return (\n                        <MinusSquareFillIcon\n                            aria-hidden\n                            className={nestedStyles.checkboxMixedIndicator}\n                        />\n                    );\n                case true:\n                    return (\n                        <SquareTickFillIcon\n                            aria-hidden\n                            className={clsx(\n                                styles.baseCheckboxIndicatorStyle,\n                                styles.checkboxSelectedIndicator\n                            )}\n                        />\n                    );\n                default:\n                    return (\n                        <SquareIcon\n                            aria-hidden\n                            className={clsx(\n                                styles.baseCheckboxIndicatorStyle,\n                                styles.checkboxUnselectedIndicator\n                            )}\n                        />\n                    );\n            }\n        }\n\n        if (listItem.hasSubItems) {\n            // no icon needed\n            return;\n        }\n\n        return (\n            <div\n                className={clsx(\n                    nestedStyles.selectionIndicator,\n                    (listItem.hasNestedSiblings || listItem.level === 0) &&\n                        nestedStyles.selectionIndicatorNested\n                )}\n            >\n                {listItem.checked && (\n                    <TickIcon\n                        aria-hidden\n                        className={clsx(\n                            styles.baseIndicatorStyle,\n                            styles.selectedIndicator\n                        )}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    const renderItem = (\n        listItem: NestedDropdownListLocalItem<T>,\n        vIndex: number\n    ) => {\n        const {\n            level,\n            visible,\n            expanded,\n            keyPath,\n            checked,\n            hasSubItems,\n            indexInParent,\n            parentSetSize,\n        } = listItem;\n        const itemIndex = listItem.index;\n        const active = virtuosoIndex === vIndex;\n        const toggleable = hasSubItems && !selectableCategory;\n\n        return (\n            <li\n                key={`[${keyPath.join(\"---\")}]`}\n                role=\"none\"\n                className={clsx(\n                    nestedStyles.listItemContainer,\n                    !visible && nestedStyles.listItemContainerHidden\n                )}\n            >\n                {maxLevel > 0 && (\n                    <div\n                        className={nestedStyles.indent}\n                        ref={(node) => {\n                            if (node) {\n                                node.style.setProperty(\n                                    nestedStyles.tokens.level,\n                                    String(level)\n                                );\n                            }\n                        }}\n                    />\n                )}\n                {maxLevel > 0 && !hasSubItems && multiSelect && (\n                    <div className={nestedStyles.unexpandableIndicator} />\n                )}\n                <div\n                    aria-checked={checked} // not working with safari voiceover\n                    aria-selected={!!checked} // required for safari voiceover\n                    aria-expanded={hasSubItems ? expanded : undefined}\n                    aria-level={level + 1}\n                    aria-posinset={indexInParent + 1}\n                    aria-setsize={parentSetSize}\n                    data-testid=\"list-item\"\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        if (toggleable) {\n                            toggleCategory(itemIndex, !expanded, vIndex);\n                        } else {\n                            handleListItemClick(itemIndex, vIndex);\n                        }\n                    }}\n                    onMouseEnter={() => handleListItemHover(vIndex, listItem)}\n                    ref={(node) =>\n                        (listItemRefs.current[listItem.index] = node)\n                    }\n                    role=\"treeitem\"\n                    tabIndex={active ? 0 : -1}\n                    className={clsx(\n                        nestedStyles.listItem,\n                        active && nestedStyles.listItemActive,\n                        toggleable && nestedStyles.listItemToggleable\n                    )}\n                >\n                    {hasSubItems && (\n                        // not an actual button, only required for visual display\n                        <div\n                            data-testid=\"toggle-category-button\"\n                            onClick={(e) => {\n                                e.stopPropagation();\n                                toggleCategory(itemIndex, !expanded, vIndex);\n                            }}\n                            className={clsx(\n                                nestedStyles.expandButton,\n                                expanded && nestedStyles.expandButtonExpanded\n                            )}\n                            aria-hidden\n                        >\n                            <CaretRightIcon />\n                        </div>\n                    )}\n                    {renderSelectionIcon(listItem)}\n                    <DropdownLabel\n                        bold={hasSubItems}\n                        searchTerm={searchActive ? searchTerm : undefined}\n                        label={listItem.item.label}\n                        selected={!!checked}\n                        truncationType={itemTruncationType}\n                        maxLines={itemMaxLines}\n                    />\n                </div>\n            </li>\n        );\n    };\n\n    const renderVirtualisedList = () => {\n        const isTestEnv = process.env.NODE_ENV === \"test\";\n\n        return (\n            <Virtuoso\n                style={{ height: \"100%\" }}\n                customScrollParent={nodeRef.current ?? undefined}\n                data={visibleItems}\n                itemContent={(vIndex, item) => renderItem(item, vIndex)}\n                components={{\n                    List: VirtuosoList,\n                    Item: VirtuosoItem,\n                }}\n                context={{\n                    listProps: {\n                        id: listboxId,\n                        role: \"tree\",\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 ? visibleItems.length : undefined}\n                // omit the `initialItemCount` prop to resolve NaN error\n                {...(isTestEnv\n                    ? {\n                          initialItemCount: visibleItems.length,\n                      }\n                    : {})}\n            />\n        );\n    };\n\n    const renderList = () => {\n        return (\n            <div data-testid=\"nested-dropdown-list\" className={styles.list}>\n                {renderSearchInput()}\n                {renderSelectAll()}\n                {renderNoResults()}\n                {renderLoading()}\n                {renderTryAgain()}\n                {renderVirtualisedList()}\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            {renderList()}\n        </div>\n    );\n};\n"],"names":["listItems","multiSelect","selectedKeyPaths","itemsLoadState","itemTruncationType","itemMaxLines","variant","listboxId","matchElementWidth","width","mode","selectableCategory","_selectableCategory","onSelectItem","onSelectAll","onRetry","enableSearch","hideNoResultsDisplay","noResultsDescription","_noResultsDescription","customLabels","searchPlaceholder","_searchPlaceholder","onSearch","noResultsLabel","selectAllButtonLabel","clearAllButtonLabel","elementWidth","setFloatingRef","getFloatingProps","styles","floatingStyles","useDropdownRender","searchValue","setSearchValue","useState","searchTerm","toLowerCase","trim","searchActive","setSearchActive","nodeRef","useRef","listItemRefs","searchInputRef","mounted","useIsMounted","unfilteredListItems","setUnfilteredListItems","filteredListItems","setFilteredListItems","activeList","maxLevel","useMemo","currentMaxLevel","item","level","focusedIndex","setFocusedIndex","visibleItems","setVisibleItems","virtuosoIndex","setVirtuosoIndex","containerWidth","containerWidthType","useApplyStyle","styles.tokens","handleSearchInputChange","event","value","target","length","handleOnClear","_a","current","focus","handleTryAgain","handleOnSelectAll","size","keyPaths","items","forEach","hasSubItems","push","keyPath","flatten","useEvent","nestedList","initialExpanded","flattenList","flattenDefaultMode","expandSelectedSubtrees","expandFirstSubtree","filter","filterMatchedItems","list","matchedItems","label","indexOf","subItems","matchedSubItems","Object","assign","updateSelectedItemsInList","updateSelectedState","toggleCategory","index","nextExpanded","toggleSubtree","useEventListener","code","preventDefault","upcomingItem","findItemFromStart","visible","vIndex","findItemFromEnd","_b","document","activeElement","useEffect","expandMatchedSubtrees","setTimeout","renderSearchInput","_jsx","DropdownSearch","ref","onChange","placeholder","onClear","renderSelectAll","className","styles.selectAllContainer","children","BasicButton","onClick","type","clsx","styles.baseButton","styles.selectAllButton","renderNoResults","_jsxs","styles.resultStateContainer","ExclamationCircleFillIcon","styles.labelIcon","Markup","styles.noResultDescContainer","renderLoading","ComponentLoadingSpinner","styles.spinner","renderTryAgain","styles.tryAgainButton","renderSelectionIcon","listItem","checked","MinusSquareFillIcon","nestedStyles.checkboxMixedIndicator","SquareTickFillIcon","styles.baseCheckboxIndicatorStyle","styles.checkboxSelectedIndicator","SquareIcon","styles.checkboxUnselectedIndicator","nestedStyles.selectionIndicator","hasNestedSiblings","nestedStyles.selectionIndicatorNested","TickIcon","styles.baseIndicatorStyle","styles.selectedIndicator","renderItem","expanded","indexInParent","parentSetSize","itemIndex","active","toggleable","role","nestedStyles.listItemContainer","nestedStyles.listItemContainerHidden","nestedStyles.indent","node","style","setProperty","nestedStyles.tokens","String","nestedStyles.unexpandableIndicator","undefined","e","stopPropagation","handleListItemClick","onMouseEnter","handleListItemHover","tabIndex","nestedStyles.listItem","nestedStyles.listItemActive","nestedStyles.listItemToggleable","nestedStyles.expandButton","nestedStyles.expandButtonExpanded","CaretRightIcon","DropdownLabel","bold","selected","truncationType","maxLines","join","renderVirtualisedList","isTestEnv","process","env","NODE_ENV","Virtuoso","height","customScrollParent","data","itemContent","components","List","VirtuosoList","Item","VirtuosoItem","context","listProps","id","listItemProps","initialItemCount","mergeRefs","styles.container","styles.containerVariantSmall","styles.list"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./nested-dropdown-list.styles_wdhxoe.css");exports.checkboxMixedIndicator="c1an54qc",exports.expandButton="e11oztmx",exports.expandButtonExpanded="e18lkgul",exports.indent="i1roxhhm",exports.listItem="l7sjxgx",exports.listItemActive="l1lwwclz",exports.listItemContainer="l6gdpz7",exports.listItemContainerHidden="l2m1xi2",exports.listItemToggleable="lda1ll2",exports.selectionIndicator="simvld9",exports.selectionIndicatorNested="s1en693q",exports.tokens={level:"--fds-internal-nestedDropdownList-indentLevel"},exports.unexpandableIndicator="uz6io6h";
+//# sourceMappingURL=nested-dropdown-list.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nested-dropdown-list.styles.js","sources":["../../../../src/shared/dropdown-list/nested-dropdown-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Motion, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const tokens = {\n    level: \"--fds-internal-nestedDropdownList-indentLevel\",\n};\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\n\nexport const listItemContainer = css`\n    display: flex;\n`;\n\nexport const listItemContainerHidden = css`\n    display: none;\n`;\n\nexport const listItem = css`\n    flex: 1;\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    overflow: hidden;\n    border-radius: ${Radius[\"none\"]};\n    outline: none;\n`;\n\nexport const listItemToggleable = css`\n    cursor: default;\n`;\n\nexport const listItemActive = css`\n    background: ${Colour[\"bg-hover\"]};\n`;\n\nexport const indent = css`\n    ${tokens.level}: 0;\n    height: 1px;\n    width: calc((1lh + ${Spacing[\"spacing-8\"]}) * var(${tokens.level}));\n`;\n\nexport const expandButton = css`\n    width: 1lh;\n    height: 1lh;\n    color: ${Colour[\"icon-primary\"]};\n    cursor: pointer;\n\n    svg {\n        width: 1lh;\n        height: 1lh;\n        transition: transform ${Motion[\"duration-350\"]}\n            ${Motion[\"ease-standard\"]};\n    }\n`;\n\nexport const expandButtonExpanded = css`\n    svg {\n        transform: rotate(90deg);\n    }\n`;\n\nexport const unexpandableIndicator = css`\n    width: 1lh;\n    height: 1lh;\n    margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const selectionIndicator = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: ${Spacing[\"spacing-16\"]};\n    display: flex;\n    justify-content: center;\n`;\n\nexport const selectionIndicatorNested = css`\n    width: 1lh;\n`;\n\nexport const checkboxMixedIndicator = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${Colour[\"icon-selected\"]};\n`;\n"],"names":["level"],"mappings":"oIAwFmC,gCAtCV,wCAcQ,0BApBd,4BApBE,iCAgBM,qCAxBG,0CAIM,qCAgBL,qCAwCA,2CAQM,0BA5Ef,CAClBA,MAAO,+EA6DuB"}

package/cjs/shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css

@@ -0,0 +1,12 @@
+@layer fds{.l6gdpz7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.l2m1xi2{display:none;}
+.l7sjxgx{-webkit-flex:1;-ms-flex:1;flex:1;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;overflow:hidden;border-radius:var(--fds-radius-none);outline:none;}
+.lda1ll2{cursor:default;}
+.l1lwwclz{background:var(--fds-colour-bg-hover);}
+.i1roxhhm{--fds-internal-nestedDropdownList-indentLevel:0;height:1px;width:calc((1lh + var(--fds-spacing-8)) * var(--fds-internal-nestedDropdownList-indentLevel));}
+.e11oztmx{width:1lh;height:1lh;color:var(--fds-colour-icon-primary);cursor:pointer;}.e11oztmx svg{width:1lh;height:1lh;-webkit-transition:-webkit-transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);}
+.e18lkgul svg{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}
+.uz6io6h{width:1lh;height:1lh;margin-right:var(--fds-spacing-8);}
+.simvld9{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1lh;width:var(--fds-spacing-16);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.s1en693q{width:1lh;}
+.c1an54qc{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1lh;width:1lh;color:var(--fds-colour-icon-selected);}}

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

@@ -0,0 +1,2 @@
+"use strict";var t=require("../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),r=require("react");const s=r.forwardRef(((r,s)=>{const{context:i}=r,o=t.__rest(r,["context"]);return e.jsx("div",Object.assign({ref:s},null==i?void 0:i.listProps,o))})),i=r.forwardRef(((r,s)=>{const{context:i,item:o}=r,n=t.__rest(r,["context","item"]);return e.jsx("div",Object.assign({ref:s},null==i?void 0:i.listItemProps,n))}));exports.VirtuosoItem=i,exports.VirtuosoList=s;
+//# sourceMappingURL=virtuoso-components.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"virtuoso-components.js","sources":["../../../../src/shared/dropdown-list/virtuoso-components.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { Components } from \"react-virtuoso\";\n\ninterface VirtuosoContext {\n    listProps: React.HTMLAttributes<HTMLDivElement>;\n    listItemProps: React.HTMLAttributes<HTMLDivElement>;\n}\n\ntype VirtuosoListProps = Exclude<\n    Components<unknown, VirtuosoContext>[\"List\"],\n    undefined\n>;\n\ntype VirtuosoItemProps = Exclude<\n    Components<unknown, VirtuosoContext>[\"Item\"],\n    undefined\n>;\n\nconst List = (\n    props: ComponentProps<VirtuosoListProps>,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const { context, ...otherProps } = props;\n    return <div ref={ref} {...context?.listProps} {...otherProps} />;\n};\n\nexport const VirtuosoList = forwardRef(List);\n\nconst Item = (\n    props: ComponentProps<VirtuosoItemProps>,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const { context, item: _item, ...otherProps } = props;\n\n    return <div ref={ref} {...context?.listItemProps} {...otherProps} />;\n};\n\nexport const VirtuosoItem = forwardRef(Item);\n"],"names":["VirtuosoList","forwardRef","props","ref","context","otherProps","__rest","_jsx","Object","assign","listProps","VirtuosoItem","item","_item","listItemProps"],"mappings":"yGAmBA,MAQaA,EAAeC,EAAAA,YARf,CACTC,EACAC,KAEA,MAAMC,QAAEA,GAA2BF,EAAfG,EAAUC,EAAAA,OAAKJ,EAA7B,CAAA,YACN,OAAOK,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAKN,IAAKA,GAASC,aAAO,EAAPA,EAASM,UAAeL,GAAc,IAcvDM,EAAeV,EAAAA,YATf,CACTC,EACAC,KAEA,MAAMC,QAAEA,EAASQ,KAAMC,GAAyBX,EAAfG,EAAUC,EAAAA,OAAKJ,EAA1C,CAAA,UAAA,SAEN,OAAOK,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAKN,IAAKA,GAASC,aAAO,EAAPA,EAASU,cAAmBT,GAAc"}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),a=require("clsx"),r=require("react"),t=require("./dropdown-wrapper.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(a);const d=r.forwardRef((function({disabled:a,children:r},l){return e.jsx("div",{className:t.labelContainer,"data-disabled":a,ref:l,children:r})}));exports.LabelContainer=d,exports.PlaceholderLabel=({variant:a,truncateType:r,children:l})=>e.jsx("div",{className:n.default(t.valueLabel,t.placeholderLabel),"data-variant":a,"data-truncate":r,children:l}),exports.ValueLabel=({variant:a,truncateType:r,children:l})=>e.jsx("div",{className:t.valueLabel,"data-variant":a,"data-truncate":r,children:l});
+//# sourceMappingURL=dropdown-wrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-wrapper.js","sources":["../../../../src/shared/dropdown-wrapper/dropdown-wrapper.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport * as styles from \"./dropdown-wrapper.styles\";\nimport type { LabelContainerProps, ValueLabelProps } from \"./types\";\n\nexport const ValueLabel = ({\n    variant,\n    truncateType,\n    children,\n}: ValueLabelProps) => (\n    <div\n        className={styles.valueLabel}\n        data-variant={variant}\n        data-truncate={truncateType}\n    >\n        {children}\n    </div>\n);\n\nexport const PlaceholderLabel = ({\n    variant,\n    truncateType,\n    children,\n}: ValueLabelProps) => (\n    <div\n        className={clsx(styles.valueLabel, styles.placeholderLabel)}\n        data-variant={variant}\n        data-truncate={truncateType}\n    >\n        {children}\n    </div>\n);\n\nexport const LabelContainer = forwardRef<HTMLDivElement, LabelContainerProps>(\n    function LabelContainer({ disabled, children }, ref) {\n        return (\n            <div\n                className={styles.labelContainer}\n                data-disabled={disabled}\n                ref={ref}\n            >\n                {children}\n            </div>\n        );\n    }\n);\n"],"names":["LabelContainer","forwardRef","disabled","children","ref","_jsx","className","styles.labelContainer","variant","truncateType","clsx","styles.valueLabel","styles.placeholderLabel"],"mappings":"kNAMO,MA4BMA,EAAiBC,EAAAA,YAC1B,UAAwBC,SAAEA,EAAQC,SAAEA,GAAYC,GAC5C,OACIC,MAAA,MAAA,CACIC,UAAWC,EAAAA,eAAqB,gBACjBL,EACfE,IAAKA,WAEJD,GAGb,sDAzB4B,EAC5BK,UACAC,eACAN,cAEAE,EAAAA,IAAA,MAAA,CACIC,UAAWI,EAAAA,QAAKC,aAAmBC,EAAAA,kBAAwB,eAC7CJ,EAAO,gBACNC,WAEdN,uBAxBiB,EACtBK,UACAC,eACAN,cAEAE,EAAAA,IAAA,MAAA,CACIC,UAAWK,EAAAA,WAAiB,eACdH,EAAO,gBACNC,EAAYN,SAE1BA"}

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

@@ -1,131 +1,2 @@
-"use strict";var o=require("@lifesg/react-icons/chevron-down"),e=require("styled-components"),r=require("../../v3_theme/index.js"),t=require("../styles/index.js");function i(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var n=i(e);const d=o=>"small"===o?2.5:3,s=n.default.div`
-    position: relative;
-    width: 100%;
-    ${o=>{const r=d(o.$variant);return e.css`
-            min-height: ${r}rem;
-            height: ${r}rem; // Need this to persist the height when expanding or collapsing list
-        `}}
-`,a=e.css`
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 ${r.V3_Spacing["spacing-16"]};
-    // exclude top and bottom borders
-    height: calc(${o=>d(o.$variant)}rem - 2px);
-    width: 100%;
-    border-radius: ${r.V3_Radius.sm};
-    border: none;
-    background: transparent;
-
-    &:focus,
-    &:active {
-        outline: none;
-    }
-
-    &:focus-visible {
-        outline: 2px solid ${r.V3_Colour["border-focus"]};
-    }
-`,l=n.default.button`
-    ${a}
-    cursor: pointer;
-`;n.default.div`
-    ${a}
-`;const u=e.keyframes`
-	from {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		z-index: 2;
-	}
-
-	to {
-		position: relative;
-        width: 100%;
-	}
-`;n.default.div`
-    position: relative;
-    border: ${r.V3_Border["width-010"]} ${r.V3_Border.solid}
-        ${r.V3_Colour.border};
-    border-radius: ${r.V3_Radius.sm};
-    background: ${r.V3_Colour.bg};
-    overflow: hidden;
-
-    &:focus-within {
-        border-color: ${r.V3_Colour["border-focus"]};
-        box-shadow: 0px 0px 4px 0px
-            rgb(from ${r.V3_Colour["border-focus"]} r g b / 50%) inset; // TODO: confirm shadow
-    }
-
-    ${o=>o.$expanded?e.css`
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                z-index: 2;
-            `:e.css`
-                animation: ${u} 0.5s ease-in-out;
-            `}
-
-    ${o=>o.$disabled?e.css`
-                background: ${r.V3_Colour["bg-disabled"]};
-
-                ${l} {
-                    cursor: not-allowed;
-                }
-
-                &:focus-within {
-                    border-color: ${r.V3_Colour.border};
-                    box-shadow: none;
-                }
-            `:o.$readOnly?e.css`
-                border: none;
-                background: transparent !important;
-
-                ${l} {
-                    padding: 0;
-                }
-
-                &:focus-within {
-                    border: none;
-                    box-shadow: none;
-                }
-            `:o.$error?e.css`
-                border-color: ${r.V3_Colour["border-error"]};
-
-                &:focus-within {
-                    border-color: ${r.V3_Colour["border-error"]};
-                    box-shadow: 0px 0px 4px 0px
-                        rgb(from ${r.V3_Colour["border-error"]} r g b / 50%) inset; // TODO: confirm shadow
-                }
-            `:void 0}
-`,n.default.div`
-    transform: rotate(${o=>o.$expanded?180:0}deg);
-    transition: transform ${r.V3_Motion["duration-250"]}
-        ${r.V3_Motion["ease-default"]};
-    margin-left: ${r.V3_Spacing["spacing-16"]};
-`,n.default(o.ChevronDownIcon)`
-    color: ${r.V3_Colour.icon};
-`,n.default.div`
-    height: 1px;
-    background: ${r.V3_Colour.border};
-    margin: 0 ${r.V3_Spacing["spacing-8"]};
-`;const c=n.default.div`
-    display: flex;
-    flex: 1;
-    word-break: break-all;
-    ${o=>{if(o.$disabled)return e.css`
-                color: ${r.V3_Colour["text-disabled"]};
-            `}}
-`,b=n.default.div`
-    ${o=>"small"===o.$variant?r.V3_Font["body-md-regular"]:r.V3_Font["body-baseline-regular"]}
-    text-align: left;
-    ${o=>{if("middle"!==o.$truncateType)return e.css`
-                    ${t.lineClampCss(1)}
-                `}}
-    overflow: hidden;
-`,p=n.default(b)`
-    color: ${r.V3_Colour["text-subtler"]};
-`;exports.LabelContainer=c,exports.PlaceholderLabel=p,exports.Selector=l,exports.ValueLabel=b,exports.Wrapper=s,exports.baseSelectorCSS=a;
+"use strict";require("./dropdown-wrapper.styles_15hwwoj.css");exports.labelContainer="l9c71lq",exports.placeholderLabel="p3mumjy",exports.valueLabel="vlxe5wy";
 //# sourceMappingURL=dropdown-wrapper.styles.js.map