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

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

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

package/shared/dropdown-list/dropdown-list.styles.d.ts

@@ -1,7 +1,7 @@
+export type ContainerWidthType = "default" | "custom" | "match";
 export declare const tokens: {
     readonly availableWidth: "--fds-internal-dropdownList-container-availableWidth";
     readonly containerWidth: "--fds-internal-dropdownList-containerWidth";
-    readonly containerMinWidth: "--fds-internal-dropdownList-containerMinWidth";
     readonly xSpacing: "--fds-internal-dropdownList-container-xSpacing";
 };
 export declare const container: import("@linaria/core").LinariaClassName;

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

@@ -1,2 +1,2 @@
-import"./dropdown-list.styles_1qveyb9.css";const i={containerWidth:"--fds-internal-dropdownList-containerWidth",containerMinWidth:"--fds-internal-dropdownList-containerMinWidth"},n="c1wprmqt",o="cv4jfw8",s="llrkh2h",t="lsgm7b1",r="l1sloxru",d="lp7vqom",l="l1li8r4s",c="b3myji2",e="s1bv8amb",h="bswyxh7",a="c1kods4c",p="c2iuhda",b="cxvb3yc",m="s1gfnl3t",w="b51546q",y="s5v4wu0",v="t14h29ix",x="rlpycri",f="l9eregy",q="smon6ho",W="n1mo99ai";export{w as baseButton,h as baseCheckboxIndicatorStyle,c as baseIndicatorStyle,b as checkboxDisabledIndicator,a as checkboxSelectedIndicator,p as checkboxUnselectedIndicator,n as container,o as containerVariantSmall,f as labelIcon,s as list,t as listItem,r as listItemActive,d as listItemActiveSelected,l as listItemDisabled,W as noResultDescContainer,x as resultStateContainer,y as selectAllButton,m as selectAllContainer,e as selectedIndicator,q as spinner,i as tokens,v as tryAgainButton};
+import"./dropdown-list.styles_1kt4zhf.css";const s={containerWidth:"--fds-internal-dropdownList-containerWidth"},o="c1wprmqt",r="cv4jfw8",t="llrkh2h",i="lsgm7b1",l="l1sloxru",n="lp7vqom",c="l1li8r4s",d="b3myji2",h="s1bv8amb",e="bswyxh7",m="c1kods4c",p="c2iuhda",a="cxvb3yc",b="s1gfnl3t",w="b51546q",y="s5v4wu0",v="t14h29ix",x="rlpycri",f="l9eregy",_="smon6ho",g="n1mo99ai";export{w as baseButton,e as baseCheckboxIndicatorStyle,d as baseIndicatorStyle,a as checkboxDisabledIndicator,m as checkboxSelectedIndicator,p as checkboxUnselectedIndicator,o as container,r as containerVariantSmall,f as labelIcon,t as list,i as listItem,l as listItemActive,n as listItemActiveSelected,c as listItemDisabled,g as noResultDescContainer,x as resultStateContainer,y as selectAllButton,b as selectAllContainer,h as selectedIndicator,_ as spinner,s as tokens,v as tryAgainButton};
 //# sourceMappingURL=dropdown-list.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-list.styles.js","sources":["../../../src/shared/dropdown-list/dropdown-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../../theme\";\nimport * as elementWithDropdownStyles from \"../dropdown-wrapper/element-with-dropdown.styles\";\n\nexport const tokens = {\n    availableWidth: \"--fds-internal-dropdownList-container-availableWidth\",\n\n    containerWidth: \"--fds-internal-dropdownList-containerWidth\",\n    containerMinWidth: \"--fds-internal-dropdownList-containerMinWidth\",\n\n    xSpacing: \"--fds-internal-dropdownList-container-xSpacing\",\n} as const;\n\n// -----------------------------------------------------------------------------\n// MAIN STYLES\n// -----------------------------------------------------------------------------\nexport const container = css`\n    ${Font[\"body-baseline-regular\"]}\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n\n    ${tokens.xSpacing}: 0px;\n    ${elementWithDropdownStyles.tokens.availableHeight}: initial;\n    ${tokens.availableWidth}: calc(\n        100vw - var(${tokens.xSpacing}) * 2\n    );\n\n    ${MediaQuery.MaxWidth.sm} {\n        ${tokens.xSpacing}: ${Breakpoint[\"sm-margin\"]};\n        max-height: 15rem;\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        ${tokens.xSpacing}: ${Breakpoint[\"xs-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        ${tokens.xSpacing}: ${Breakpoint[\"xxs-margin\"]};\n    }\n\n    max-width: var(${tokens.availableWidth});\n    min-width: var(\n        ${tokens.containerMinWidth},\n        min(23rem, var(${tokens.availableWidth}))\n    );\n    width: var(${tokens.containerWidth});\n    max-height: min(\n        27rem,\n        var(${elementWithDropdownStyles.tokens.availableHeight}, 9999px)\n    );\n    overflow: hidden;\n    overflow-y: auto;\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n\nexport const containerVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const list = css`\n    background: transparent;\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\nexport const listItem = css`\n    display: flex;\n    align-items: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    cursor: pointer;\n    border: none;\n    border-radius: ${Radius[\"none\"]};\n    outline: none;\n`;\n\nexport const listItemActive = css`\n    background: ${Colour[\"bg-hover-subtle\"]};\n`;\n\nexport const listItemActiveSelected = css`\n    background: ${Colour[\"bg-hover\"]};\n`;\n\nexport const listItemDisabled = css`\n    cursor: not-allowed;\n`;\n\nexport const baseIndicatorStyle = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1rem;\n`;\n\nexport const selectedIndicator = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const baseCheckboxIndicatorStyle = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n`;\n\nexport const checkboxSelectedIndicator = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const checkboxUnselectedIndicator = css`\n    color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const checkboxDisabledIndicator = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ELEMENT STYLES\n// -----------------------------------------------------------------------------\nexport const selectAllContainer = css`\n    width: 100%;\n    display: flex;\n    justify-content: flex-end;\n`;\n\nexport const baseButton = css`\n    cursor: pointer;\n    overflow: hidden;\n    color: ${Colour[\"text-primary\"]};\n    font-size: inherit;\n`;\n\nexport const selectAllButton = css`\n    ${Font[\"body-md-semibold\"]}\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const tryAgainButton = css`\n    ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const resultStateContainer = css`\n    width: 100%;\n    display: flex;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    align-items: center;\n    color: ${Colour[\"text\"]};\n`;\n\nexport const labelIcon = css`\n    margin-right: ${Spacing[\"spacing-4\"]};\n    color: ${Colour[\"icon-error\"]};\n    height: 1em;\n    width: 1em;\n`;\n\nexport const spinner = css`\n    margin-right: ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"icon\"]};\n`;\n\nexport const noResultDescContainer = css`\n    color: ${Colour[\"text-subtle\"]};\n    padding: 0 ${Spacing[\"spacing-16\"]};\n    padding-bottom: ${Spacing[\"spacing-12\"]};\n`;\n"],"names":["tokens","containerWidth","containerMinWidth","container","containerVariantSmall","list","listItem","listItemActive","listItemActiveSelected","listItemDisabled","baseIndicatorStyle","selectedIndicator","baseCheckboxIndicatorStyle","checkboxSelectedIndicator","checkboxUnselectedIndicator","checkboxDisabledIndicator","selectAllContainer","baseButton","selectAllButton","tryAgainButton","resultStateContainer","labelIcon","spinner","noResultDescContainer"],"mappings":"+EAaO,MAAMA,EAAS,CAGlBC,eAAgB,6CAChBC,kBAAmB,iDAQVC,EAAS,WAsDTC,EAAqB,UAIrBC,EAAI,UAQJC,EAAQ,UAWRC,EAAc,WAIdC,EAAsB,UAItBC,EAAgB,WAIhBC,EAAkB,UAMlBC,EAAiB,WAIjBC,EAA0B,UAM1BC,EAAyB,WAIzBC,EAA2B,UAI3BC,EAAyB,UAOzBC,EAAkB,WAMlBC,EAAU,UAOVC,EAAe,UAKfC,EAAc,WAIdC,EAAoB,UAQpBC,EAAS,UAOTC,EAAO,UAKPC,EAAqB"}
+{"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":["tokens","containerWidth","container","containerVariantSmall","list","listItem","listItemActive","listItemActiveSelected","listItemDisabled","baseIndicatorStyle","selectedIndicator","baseCheckboxIndicatorStyle","checkboxSelectedIndicator","checkboxUnselectedIndicator","checkboxDisabledIndicator","selectAllContainer","baseButton","selectAllButton","tryAgainButton","resultStateContainer","labelIcon","spinner","noResultDescContainer"],"mappings":"+EAeO,MAAMA,EAAS,CAElBC,eAAgB,8CAOPC,EAAS,WA4DTC,EAAqB,UAIrBC,EAAI,UAQJC,EAAQ,UAWRC,EAAc,WAIdC,EAAsB,UAItBC,EAAgB,WAIhBC,EAAkB,UAMlBC,EAAiB,WAIjBC,EAA0B,UAM1BC,EAAyB,WAIzBC,EAA2B,UAI3BC,EAAyB,UAOzBC,EAAkB,WAMlBC,EAAU,UAOVC,EAAe,UAKfC,EAAc,WAIdC,EAAoB,UAQpBC,EAAS,UAOTC,EAAO,UAKPC,EAAqB"}

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

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

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

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

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

@@ -1 +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 * 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    let containerWidthStyle = {};\n    if (width) {\n        containerWidthStyle = {\n            [styles.tokens.containerWidth]: `${width}px`,\n            [styles.tokens.containerMinWidth]: `0px`,\n        };\n    } else if (matchElementWidth && elementWidth) {\n        containerWidthStyle = {\n            [styles.tokens.containerWidth]: `${elementWidth}px`,\n            [styles.tokens.containerMinWidth]: `${elementWidth}px`,\n        };\n    }\n\n    // =========================================================================\n    // 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    // APPLY STYLE\n    // =========================================================================\n\n    useApplyStyle(nodeRef, {\n        ...containerWidthStyle,\n    });\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            className={clsx(\n                styles.container,\n                variant === \"small\" && styles.containerVariantSmall\n            )}\n            style={floatingStyles}\n        >\n            {renderList()}\n        </div>\n    );\n};\n"],"names":["NestedDropdownList","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","containerWidthStyle","styles.tokens","containerWidth","containerMinWidth","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","useApplyStyle","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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"}
+{"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":["NestedDropdownList","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/shared/dropdown-wrapper/element-with-dropdown.js

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import{useFloating as o,autoUpdate as n,offset as r,flip as l,shift as s,limitShift as a,size as m,useTransitionStyles as d,useClick as p,useDismiss as h,useInteractions as c,FloatingPortal as g,FloatingFocusManager as f}from"@floating-ui/react";import{createContext as u,useContext as j,useRef as y}from"react";import{useResizeDetector as b}from"../../external/react-resize-detector/build/index.esm.js";import{useFloatingChild as x}from"../../overlay/use-floating-context.js";import"../../theme/theme-provider/index.js";import{useInheritedThemeScope as v}from"../../theme/theme-provider/hooks.js";import"../../theme/tokens/border.js";import{Breakpoint as w}from"../../theme/tokens/breakpoint.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useSafeMaxWidthMediaQuery as k}from"../../theme/utils/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useDesignToken as F}from"../../theme/utils/use-design-token.js";import{tokens as O}from"./element-with-dropdown.styles.js";const P=e=>"right"===e?"bottom-end":"bottom-start",H=u({elementWidth:0,styles:{},setFloatingRef:()=>{},getFloatingProps:()=>({})}),R=()=>j(H),W=({enabled:u,isOpen:j,onOpen:R,onClose:W,onDismiss:M,renderElement:q,renderDropdown:z,customZIndex:C,clickToToggle:D=!1,offset:E=0,alignment:I="left",fitAvailableHeight:S,rootNode:T,positionRef:A})=>{var N;const Z=F(w["sm-max"]),$=k(Z),B=y(null),{width:G=0}=b({targetRef:null!=A?A:B,handleHeight:!1}),J={name:"center",fn:({x:e,rects:t})=>({x:(0===e||e+t.floating.width===window.innerWidth)&&$?(window.innerWidth-t.floating.width)/2:e})},{refs:K,floatingStyles:L,context:Q}=o({open:j,onOpenChange:(e,t,i)=>{"escape-key"===i?null==M||M():e&&!j?null==R||R():!e&&j&&(null==W||W(i))},whileElementsMounted:n,placement:P(I),middleware:[r(E),l(),s({limiter:a()}),m({apply({availableHeight:e,elements:t}){!S||e>=t.floating.scrollHeight?t.floating.style.setProperty(O.availableHeight,""):t.floating.style.setProperty(O.availableHeight,`${Math.max(0,e)}px`)}}),J]}),U=x(),{isMounted:V,styles:X}=d(Q,{initial:{opacity:0},open:{opacity:1},duration:300}),{themeProps:Y,themeStyle:_}=v(V),ee=p(Q,{enabled:u,toggle:D,keyboardHandlers:D}),te=h(Q,{enabled:u}),{getReferenceProps:ie,getFloatingProps:oe}=c([ee,te]),ne={elementWidth:G,styles:Object.assign(Object.assign(Object.assign({},X),L),{zIndex:null!==(N=null!=C?C:U)&&void 0!==N?N:50}),setFloatingRef:K.setFloating,getFloatingProps:oe};return e(t,{children:[i("div",Object.assign({ref:e=>{B.current=e,K.setReference(e)}},ie(),{children:q()})),V&&i(g,{root:T,children:i(f,{context:Q,modal:!1,initialFocus:-1,returnFocus:!1,children:i(H.Provider,{value:ne,children:i("div",Object.assign({},Y,{style:_,children:z(ne)}))})})})]})};export{H as DropdownRenderContext,W as ElementWithDropdown,R as useDropdownRender};
+import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import{useFloating as o,autoUpdate as n,offset as r,flip as l,shift as s,limitShift as a,size as m,useTransitionStyles as d,useClick as p,useDismiss as c,useInteractions as g,FloatingPortal as h,FloatingFocusManager as f}from"@floating-ui/react";import{createContext as u,useContext as j,useRef as y}from"react";import{useResizeDetector as b}from"../../external/react-resize-detector/build/index.esm.js";import{useFloatingChild as x}from"../../overlay/use-floating-context.js";import"../../theme/theme-provider/index.js";import{useInheritedThemeScope as v}from"../../theme/theme-provider/hooks.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as w}from"../../theme/utils/use-media-query.js";import{tokens as k}from"./element-with-dropdown.styles.js";const F=e=>"right"===e?"bottom-end":"bottom-start",O=u({elementWidth:0,styles:{},setFloatingRef:()=>{},getFloatingProps:()=>({})}),P=()=>j(O),H=({enabled:u,isOpen:j,onOpen:P,onClose:H,onDismiss:R,renderElement:W,renderDropdown:M,customZIndex:q,clickToToggle:z=!1,offset:C=0,alignment:D="left",fitAvailableHeight:E,rootNode:I,positionRef:S})=>{var T;const A=w("sm"),N=y(null),{width:Z=0}=b({targetRef:null!=S?S:N,handleHeight:!1}),$={name:"center",fn:({x:e,rects:t})=>({x:(0===e||e+t.floating.width===window.innerWidth)&&A?(window.innerWidth-t.floating.width)/2:e})},{refs:B,floatingStyles:G,context:J}=o({open:j,onOpenChange:(e,t,i)=>{"escape-key"===i?null==R||R():e&&!j?null==P||P():!e&&j&&(null==H||H(i))},whileElementsMounted:n,placement:F(D),middleware:[r(C),l(),s({limiter:a()}),m({apply({availableHeight:e,elements:t}){!E||e>=t.floating.scrollHeight?t.floating.style.setProperty(k.availableHeight,""):t.floating.style.setProperty(k.availableHeight,`${Math.max(0,e)}px`)}}),$]}),K=x(),{isMounted:L,styles:Q}=d(J,{initial:{opacity:0},open:{opacity:1},duration:300}),{themeProps:U,themeStyle:V}=v(L),X=p(J,{enabled:u,toggle:z,keyboardHandlers:z}),Y=c(J,{enabled:u}),{getReferenceProps:_,getFloatingProps:ee}=g([X,Y]),te={elementWidth:Z,styles:Object.assign(Object.assign(Object.assign({},Q),G),{zIndex:null!==(T=null!=q?q:K)&&void 0!==T?T:50}),setFloatingRef:B.setFloating,getFloatingProps:ee};return e(t,{children:[i("div",Object.assign({ref:e=>{N.current=e,B.setReference(e)}},_(),{children:W()})),L&&i(h,{root:I,children:i(f,{context:J,modal:!1,initialFocus:-1,returnFocus:!1,children:i(O.Provider,{value:te,children:i("div",Object.assign({},U,{style:V,children:M(te)}))})})})]})};export{O as DropdownRenderContext,H as ElementWithDropdown,P as useDropdownRender};
 //# sourceMappingURL=element-with-dropdown.js.map