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

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

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-list.js","sources":["../../../../src/shared/dropdown-list-v2/dropdown-list.tsx"],"sourcesContent":["import 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 {\n    mergeRefs,\n    useCompare,\n    useEvent,\n    useEventListener,\n    useIsMounted,\n} from \"../../util\";\nimport { useDropdownRender } from \"../dropdown-wrapper\";\nimport { DropdownLabel } from \"./dropdown-label\";\nimport {\n    CheckboxDisabledIndicator,\n    CheckboxSelectedIndicator,\n    CheckboxUnselectedIndicator,\n    Container,\n    LabelIcon,\n    List,\n    Listbox,\n    ListItem,\n    NoResultDescContainer,\n    ResultStateContainer,\n    SelectAllButton,\n    SelectAllContainer,\n    SelectedIndicator,\n    Spinner,\n    TryAgainButton,\n    UnselectedIndicator,\n} 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\";\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        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 { elementWidth, setFloatingRef, getFloatingProps, styles } =\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 listRef = useRef<HTMLDivElement>(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    // 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        // This is needed as some items might have the same value\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                // Cannot go further than last element\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                // Cannot go further than first element\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        // Delay to ensure render is complete\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\n        // skip effect as dependency did not change\n        if (!mounted || !itemsLoadStateChanged) return;\n\n        // Reset focus when options are loaded\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            // only run on mount\n            return;\n        }\n\n        if (disableItemFocus || !listItems) return;\n\n        const index = listItems.findIndex((item) =>\n            checkListItemSelected(item)\n        );\n\n        // Focus search input if there is one\n        if (searchInputRef.current) {\n            setFocusedIndex(-1);\n            setTimeout(() => searchInputRef.current?.focus(), 200); // Wait for animation\n        } else if (focusedIndex > 0) {\n            // Else focus on the specified element\n            virtuosoRef.current?.scrollToIndex({\n                index: focusedIndex,\n                align: \"center\",\n            });\n            setTimeout(() => listItemRefs.current[focusedIndex]?.focus(), 200);\n        } else if (index !== -1) {\n            // Else focus on the selected element\n            virtuosoRef.current?.scrollToIndex({ index, align: \"center\" });\n            setFocusedIndex(index);\n            setTimeout(() => listItemRefs.current[index]?.focus(), 200);\n        } else {\n            // Else focus on the first list item\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 <CheckboxDisabledIndicator aria-hidden />;\n            }\n\n            return selected ? (\n                <CheckboxSelectedIndicator aria-hidden />\n            ) : (\n                <CheckboxUnselectedIndicator aria-hidden />\n            );\n        }\n\n        return selected ? (\n            <SelectedIndicator aria-hidden />\n        ) : (\n            <UnselectedIndicator />\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            return (\n                <ListItem\n                    aria-selected={selected}\n                    aria-multiselectable={multiSelect}\n                    aria-disabled={!selected && hasSelectedMax}\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                    $active={active}\n                    $selected={selected}\n                    $disabled={!selected && hasSelectedMax}\n                >\n                    {renderListItem ? (\n                        renderListItem(item, { selected })\n                    ) : (\n                        <>\n                            {renderListItemIcon(selected)}\n                            {renderDropdownLabel(item, selected)}\n                        </>\n                    )}\n                </ListItem>\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                <SelectAllContainer>\n                    <SelectAllButton\n                        onClick={onSelectAll}\n                        type=\"button\"\n                        $variant={variant}\n                    >\n                        {maxSelectable || selectedItems.length !== 0\n                            ? clearAllButtonLabel\n                            : selectAllButtonLabel}\n                    </SelectAllButton>\n                </SelectAllContainer>\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                    <ResultStateContainer data-testid=\"list-no-results\">\n                        <LabelIcon data-testid=\"no-result-icon\" />\n                        {noResultsLabel}\n                    </ResultStateContainer>\n                    {noResultsDescription && (\n                        <NoResultDescContainer data-testid=\"no-result-desc\">\n                            {noResultsDescription}\n                        </NoResultDescContainer>\n                    )}\n                </>\n            );\n        }\n    };\n\n    const renderLoading = () => {\n        if (onRetry && itemsLoadState === \"loading\") {\n            return (\n                <ResultStateContainer data-testid=\"list-loading\">\n                    <Spinner />\n                    Loading...\n                </ResultStateContainer>\n            );\n        }\n    };\n\n    const renderTryAgain = () => {\n        if (onRetry && itemsLoadState === \"fail\") {\n            return (\n                <ResultStateContainer data-testid=\"list-fail\">\n                    <LabelIcon data-testid=\"load-error-icon\" />\n                    Failed to load.&nbsp;\n                    <TryAgainButton\n                        onClick={handleTryAgain}\n                        type=\"button\"\n                        $variant={variant}\n                    >\n                        Try again.\n                    </TryAgainButton>\n                </ResultStateContainer>\n            );\n        }\n    };\n\n    const renderVirtualisedList = () => {\n        const isTestEnv = process.env.NODE_ENV === \"test\";\n\n        return (\n            <Listbox role=\"listbox\" id={listboxId}>\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                    // 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            </Listbox>\n        );\n    };\n\n    const renderList = () => {\n        return (\n            <List ref={listRef} data-testid=\"dropdown-list\">\n                {renderSearchInput()}\n                {renderSelectAll()}\n                {renderNoResults()}\n                {renderLoading()}\n                {renderTryAgain()}\n                {renderVirtualisedList()}\n            </List>\n        );\n    };\n\n    const renderBottomCta = () => {\n        if (!renderCustomCallToAction) {\n            return;\n        }\n\n        // FIXME: implement onDismiss handling\n        return (\n            <div data-testid=\"custom-cta\">\n                {renderCustomCallToAction(onDismiss as any, displayListItems)}\n            </div>\n        );\n    };\n\n    return (\n        <Container\n            data-testid=\"dropdown-container\"\n            ref={mergeRefs(nodeRef, setFloatingRef)}\n            style={styles}\n            {...getFloatingProps()}\n            $width={matchElementWidth ? elementWidth : undefined}\n            $customWidth={width}\n            $variant={variant}\n        >\n            {renderList()}\n            {renderBottomCta()}\n        </Container>\n    );\n};\n\nexport const DropdownList = forwardRef(DropdownListInner);\n"],"names":["DropdownList","forwardRef","listItems","multiSelect","maxSelectable","selectedItems","disableItemFocus","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","variant","listboxId","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","useDropdownRender","searchValue","setSearchValue","useState","displayListItems","setDisplayListItems","itemsLoadStateChanged","useCompare","mounted","useIsMounted","nodeRef","useRef","listRef","listItemRefs","searchInputRef","virtuosoRef","hasSelectedMax","length","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","CheckboxDisabledIndicator","CheckboxSelectedIndicator","CheckboxUnselectedIndicator","SelectedIndicator","UnselectedIndicator","renderDropdownLabel","DropdownLabel","displayType","label","maxLines","disabled","sublabel","truncationType","renderItem","active","ListItem","onClick","onMouseEnter","handleListItemHover","element","role","tabIndex","$active","$selected","$disabled","children","_jsxs","_Fragment","getItemKey","renderSearchInput","DropdownSearch","onChange","placeholder","onClear","renderSelectAll","SelectAllContainer","SelectAllButton","type","$variant","renderNoResults","ResultStateContainer","LabelIcon","NoResultDescContainer","renderLoading","Spinner","renderTryAgain","TryAgainButton","renderVirtualisedList","isTestEnv","process","env","NODE_ENV","Listbox","id","Virtuoso","Object","assign","style","height","data","customScrollParent","itemContent","initialItemCount","Container","mergeRefs","$customWidth","List","renderBottomCta"],"mappings":"2wBAqDA,MA6kBaA,EAAeC,EAAAA,YA7kBF,EAElBC,YACAC,cACAC,gBACAC,gBACAC,mBACAC,iBAAiB,UACjBC,qBAAqB,MACrBC,eAAe,EACfC,mBAAmB,SACnBC,UAAU,UACVC,YACAC,qBAAoB,EACpBC,QACAC,gBACAC,eACAC,cACAC,YACAC,UAEAC,iBACAC,gBACAC,iBACAC,2BAEAC,eACAC,uBACAC,qBAAsBC,EACtBC,eACAC,kBAAmBC,EACnBC,iBACAC,YAEJC,KAKA,MAAMC,eACFA,EAAiB,oBAAmBC,qBACpCA,EAAuB,aAAYC,oBACnCA,EAAsB,aACtBR,GAAgB,CAAA,EACdC,GACFD,aAAY,EAAZA,EAAcC,oBAAqBC,GAAsB,SACvDJ,GACFE,aAAY,EAAZA,EAAcF,uBAAwBC,GACpCU,aAAEA,EAAYC,gBAAEA,GAAoBC,EAAAA,WACtCC,EAAAA,2BAEEC,aAAEA,EAAYC,eAAEA,EAAcC,iBAAEA,GAAgBC,OAAEA,IACpDC,EAAAA,qBACGC,GAAaC,IAAkBC,EAAAA,SAAiB,KAChDC,GAAkBC,IAAuBF,WAAS9C,QAAAA,EAAa,IAChEiD,GAAwBC,EAAAA,WAAW7C,GACnC8C,GAAUC,EAAAA,eAEVC,GAAUC,EAAAA,OAA8B,MACxCC,GAAUD,EAAAA,OAAuB,MACjCE,GAAeF,EAAAA,OAA+B,IAC9CG,GAAiBH,EAAAA,OAAyB,MAC1CI,GAAcJ,EAAAA,OAAuB,MAErCK,KACAzD,KACAC,IACFA,aAAa,EAAbA,EAAeyD,UAAW1D,EAexB2D,GAAkBC,IACpB,MAAMC,EAAQ5C,EAAgBA,EAAc2C,GAAQA,eAAAA,EAAME,WAE1D,MAAqB,iBAAVD,EACA,CAAEE,MAAOF,EAAME,MAAOC,eAAgBH,EAAMG,gBAGhD,CAAED,MAAOF,QAAAA,EAAS,GAAI,EAG3BI,GAAwBC,eACzBN,KACYO,EAAAA,QAAKlE,GAAgBmE,GACnBC,EAAAA,QAAQD,EAASR,MAGhC,CAAC3D,IAGCqE,GAA4BC,EAAAA,UAAS,IAChC5C,aAAc,EAAdA,EAAiBe,MAGtB8B,GAAqBD,EAAAA,UAAS,IACzBzE,aAAS,EAATA,EAAW2E,QAAQb,IACtB,MAAMG,MAAEA,EAAKC,eAAEA,GAAmBL,GAAeC,GAC3Cc,EAAqBhC,GAAYiC,OAAOC,cAC9C,OACIb,EAAMa,cAAcC,SAASH,IAC5BV,GACGA,EAAeY,cAAcC,SAASH,EAAoB,MAKpEI,GAAUZ,eACXa,YACG,GAAI7E,EAAkB,OAEtB,GAAIqD,GAAeyB,QAGf,OAFA9C,GAAgB,QAChB+C,YAAW,KAAK,IAAAC,EAAC,OAAsB,UAAtB3B,GAAeyB,eAAO,IAAAE,OAAA,EAAAA,EAAEC,OAAO,GAAE,GAItD,MAAMC,EAAQvC,SAAAA,GAAoB,GAClC,GAAqB,IAAjBuC,EAAM1B,OAAc,OAExB,QAAoB2B,KAAhBN,aAAI,EAAJA,EAAMO,OAAqB,CAC3B,MAAMC,EAASC,KAAKC,IAChB,EACAD,KAAKE,IAAIX,EAAKO,MAAOF,EAAM1B,OAAS,IASxC,OAPmB,QAAnBwB,EAAA1B,GAAYwB,eAAO,IAAAE,GAAAA,EAAES,cAAc,CAC/BL,MAAOC,EACPK,MAAO,WAEX1D,EAAgBqD,QAChBN,YAAW,KAAK,IAAAC,EAAC,OAA4B,QAA5BA,EAAA5B,GAAa0B,QAAQO,UAAO,IAAAL,OAAA,EAAAA,EAAEC,OAAO,GAAE,EAG5D,CAEA,MAAMU,GAAgBd,aAAI,EAAJA,EAAMe,gBACtBV,EAAMW,WAAWnC,GAASK,GAAsBL,MAChD,EAEAoC,GACgB,IAAlBH,EACMA,EACA5D,GAAgB,GAAKA,EAAemD,EAAM1B,OAC1CzB,EACA,EAES,QAAnBgE,EAAAzC,GAAYwB,eAAO,IAAAiB,GAAAA,EAAEN,cAAc,CAC/BL,MAAOU,EACPJ,MAAO,WAEX1D,EAAgB8D,GAChBf,YAAW,KAAK,IAAAC,EAAC,OAA+B,QAA/BA,EAAA5B,GAAa0B,QAAQgB,UAAU,IAAAd,OAAA,EAAAA,EAAEC,OAAO,GAAE,EAAE,GAEjE,CACIlB,GACA/D,EACA2C,GACAZ,EACAC,IAkDFgE,GAAsB,CAACtC,EAASuC,KAC9B1C,KAAmBQ,GAAsBL,KAC7C1B,EAAgBiE,GAChBvF,SAAAA,EAAegD,EArJF,CAACA,GACP5C,EAAiBA,EAAe4C,GAASA,EAoJ3BwC,CAASxC,IAAM,EAKlCyC,GACFC,IAEA,MAAMzC,EAAQyC,EAAMC,OAAO1C,MAC3BlB,GAAekB,GACfjC,SAAAA,GAAY,EAGV4E,GAAgB,WAClB7D,GAAe,IACO,QAAtBuC,EAAA3B,GAAeyB,eAAO,IAAAE,GAAAA,EAAEC,QACxBvD,SAAAA,GAAY,EAGV6E,GAAiB,IAAM1F,aAAO,EAAPA,IAK7B2F,EAAAA,iBAAiB,WAtEYJ,YACzB,OAAQA,EAAMK,MACV,IAAK,YAGD,GAFAL,EAAMM,iBAEF3E,EAAeY,GAAiBa,OAAS,EAAG,CAC5C,MAAMyC,EAAgBlE,EAAe,EACF,QAAnCiD,EAAA5B,GAAa0B,QAAQmB,UAAc,IAAAjB,GAAAA,EAAEC,QACrCjD,EAAgBiE,EACpB,CACA,MACJ,IAAK,UAGD,GAFAG,EAAMM,iBAEF3E,EAAe,EAAG,CAClB,MAAMkE,EAAgBlE,EAAe,EACF,QAAnCgE,EAAA3C,GAAa0B,QAAQmB,UAAc,IAAAF,GAAAA,EAAEd,QACrCjD,EAAgBiE,EACpB,MAA4B,IAAjBlE,GAAsBsB,GAAeyB,UAC5CzB,GAAeyB,QAAQG,QACvBjD,GAAgB,IAEpB,MACJ,IAAK,QACL,IAAK,QAEG2E,SAASC,gBACTxD,GAAa0B,QAAQ/C,KAErBqE,EAAMM,iBACF/D,GAAiBZ,IACjBiE,GACIrD,GAAiBZ,GACjBA,QAsCxB8E,EAAAA,oBAAoBlF,GAAK,KAAA,CAASiD,cAAY,CAACA,KAE/CkC,EAAAA,WAAU,WACN,IAAKrG,EAED,YADmB,QAAnBuE,EAAA1B,GAAYwB,eAAO,IAAAE,GAAAA,EAAE+B,SAAS,CAAEC,IAAK,KAIzC,MAAMC,EAAQlC,YAAW,KACrB,IAAKnF,EAAW,OAEhB,MAAMwF,EAAQxF,EAAUsH,QAAQzG,GAC5B6C,GAAYwB,cAAWM,IACvB9B,GAAYwB,QAAQW,cAAc,CAAEL,UACpCpD,EAAgBoD,GACpB,GACD,GAEH,MAAO,IAAM+B,aAAaF,EAAM,GACjC,CAAC7D,GAAcxD,EAAWoC,EAAiBvB,IAE9CqG,EAAAA,WAAU,KACF9G,GAGC+C,IAAYF,IAGM,YAAnB5C,GACIoD,GAAeyB,UACf9C,GAAgB,GAChBqB,GAAeyB,QAAQG,QAE/B,GACD,CACClC,GACAF,GACA5C,EACA+B,EACAhC,IAGJ8G,EAAAA,WAAU,WAWNlE,GAAiC,QAAboC,EATI,KAAhBxC,GACO5C,EACA6B,EACA2C,KAEAE,YAIkB,IAAAU,EAAAA,EAAI,GAAG,GACzC,CACCZ,GACAE,GACA1E,EACA6B,EACAe,KAGJsE,EAAAA,WAAU,eACN,GAAI/D,GAEA,OAGJ,GAAI/C,IAAqBJ,EAAW,OAEpC,MAAMwF,EAAQxF,EAAUiG,WAAWnC,GAC/BK,GAAsBL,KAItBL,GAAeyB,SACf9C,GAAgB,GAChB+C,YAAW,WAAM,eAAAC,EAAA3B,GAAeyB,8BAASG,OAAO,GAAE,MAC3ClD,EAAe,GAEH,QAAnBiD,EAAA1B,GAAYwB,eAAO,IAAAE,GAAAA,EAAES,cAAc,CAC/BL,MAAOrD,EACP2D,MAAO,WAEXX,YAAW,KAAK,IAAAC,EAAC,OAAkC,QAAlCA,EAAA5B,GAAa0B,QAAQ/C,UAAa,IAAAiD,OAAA,EAAAA,EAAEC,OAAO,GAAE,OAC7C,IAAVG,GAEY,QAAnBW,EAAAzC,GAAYwB,eAAO,IAAAiB,GAAAA,EAAEN,cAAc,CAAEL,QAAOM,MAAO,WACnD1D,EAAgBoD,GAChBL,YAAW,KAAK,IAAAC,EAAC,OAA2B,QAA3BA,EAAA5B,GAAa0B,QAAQM,UAAM,IAAAJ,OAAA,EAAAA,EAAEC,OAAO,GAAE,OAGpC,QAAnBmC,EAAA9D,GAAYwB,eAAO,IAAAsC,GAAAA,EAAE3B,cAAc,CAAEL,MAAO,IAC5CpD,EAAgB,GAChB+C,YAAW,KAAK,IAAAC,EAAC,OAAuB,QAAvBA,EAAA5B,GAAa0B,QAAQ,UAAE,IAAAE,OAAA,EAAAA,EAAEC,OAAO,GAAE,KACvD,GACD,CACClB,GACA/D,EACA+B,EACAnC,EACAmD,GACAf,IAMJ,MAAMqF,GAAsBC,GACpBzH,EACI0D,KAAmB+D,EACZC,EAAAA,IAACC,EAAAA,0BAAyB,CAAA,eAAA,IAG9BF,EACHC,EAAAA,IAACE,4BAAyB,CAAA,eAAA,IAE1BF,EAAAA,IAACG,EAAAA,4BAA2B,CAAA,eAAA,IAI7BJ,EACHC,EAAAA,IAACI,EAAAA,kBAAiB,CAAA,eAAA,IAElBJ,EAAAA,IAACK,sBAAmB,CAAA,GAItBC,GAAsB,CAACnE,EAAS4D,KAClC,MAAMzD,MAAEA,EAAKC,eAAEA,GAAmBL,GAAeC,GAEjD,OACI6D,EAAAA,IAACO,iBACGC,YAAa3H,EACb4H,MAAOnE,EACPoE,SAAU9H,EACVmH,SAAUA,EACVY,UAAWZ,GAAY/D,GACvB4E,SAAUrE,EACVsE,eAAgBlI,EAChBG,QAASA,GACX,EAIJgI,GAAa,CAAC3E,EAAS0B,KACzB,IAAKvE,GAA8B,YAAnBZ,EAA8B,CAC1C,MAAMqH,EAAWvD,GAAsBL,GACjC4E,EAASlD,IAAUrD,EACzB,OACIwF,EAAAA,IAACgB,EAAAA,SAAQ,CAAA,gBACUjB,yBACOzH,EAAW,iBACjByH,GAAY/D,mBACb6B,EAAQ,EAAC,eACVzC,cAAgB,EAAhBA,GAAkBa,OAAM,cAC1B,YAEZgF,QAAS,IAAMxC,GAAoBtC,EAAM0B,GACzCqD,aAAc,IArLF,CAACrD,GAAkBpD,EAAgBoD,GAqL3BsD,CAAoBtD,GACxCzD,IAAMgH,IACFvF,GAAa0B,QAAQM,GAASuD,CAAO,EAEzCC,KAAK,SACLC,SAAUP,EAAS,GAAI,EAAEQ,QAChBR,EAAMS,UACJzB,EAAQ0B,WACP1B,GAAY/D,GAAc0F,SAErCjI,EACGA,EAAe0C,EAAM,CAAE4D,aAEvB4B,OAAAC,EAAAA,SAAA,CAAAF,SAAA,CACK5B,GAAmBC,GACnBO,GAAoBnE,EAAM4D,OAxVhC,EAAC5D,EAAS0B,IAGlB,QAAQA,MAFQtE,EAAiBA,EAAe4C,GAAQA,IAsU9C0F,CAAW1F,EAAM0B,GAsBlC,GAGEiE,GAAoB,KACtB,IAAKnI,GAAgBO,IAAsC,YAAnBxB,EACpC,OACIsH,EAAAA,IAAC+B,EAAAA,eAAc,CACX3H,IAAK0B,GACLkG,SAAUpD,GACVxC,MAAOnB,GACPgH,YAAajI,EAAiB,cAClB,eAAc,aACf,uBACXkI,QAASnD,GACTjG,QAASA,GAGrB,EAGEqJ,GAAkB,KACpB,GACI3J,GACAF,GACA8C,GAAiBa,OAAS,IACzBhB,IACkB,YAAnBvC,EAEA,OACIsH,EAAAA,IAACoC,EAAAA,mBAAkB,CAAAV,SACf1B,EAAAA,IAACqC,EAAAA,gBAAe,CACZpB,QAAS7H,EACTkJ,KAAK,SAAQC,SACHzJ,EAAO4I,SAEhBnJ,GAA0C,IAAzBC,EAAcyD,OAC1B1B,EACAD,KAItB,EAGEkI,GAAkB,KACpB,IACK5I,IACAqB,KAAgBtB,IACW,IAA5ByB,GAAiBa,QACE,YAAnBvD,EAEA,OACIiJ,EAAAA,KAAAC,EAAAA,SAAA,CAAAF,SAAA,CACIC,EAAAA,KAACc,EAAAA,qBAAoB,CAAA,cAAa,kBAAiBf,SAAA,CAC/C1B,EAAAA,IAAC0C,EAAAA,UAAS,CAAA,cAAa,mBACtBrI,KAEJR,GACGmG,EAAAA,IAAC2C,EAAAA,sBAAqB,CAAA,cAAa,iBAAgBjB,SAC9C7H,MAKrB,EAGE+I,GAAgB,KAClB,GAAItJ,GAA8B,YAAnBZ,EACX,OACIiJ,OAACc,EAAAA,qBAAoB,CAAA,cAAa,eAAcf,SAAA,CAC5C1B,EAAAA,IAAC6C,EAAAA,QAAO,CAAA,GAAG,eAIvB,EAGEC,GAAiB,KACnB,GAAIxJ,GAA8B,SAAnBZ,EACX,OACIiJ,OAACc,EAAAA,qBAAoB,CAAA,cAAa,YAAWf,SAAA,CACzC1B,EAAAA,IAAC0C,EAAAA,UAAS,CAAA,cAAa,oBAAoB,mBAE3C1C,EAAAA,IAAC+C,iBAAc,CACX9B,QAASjC,GACTsD,KAAK,SAAQC,SACHzJ,EAAO4I,SAAA,iBAMjC,EAGEsB,GAAwB,WAC1B,MAAMC,EAAqC,SAAzBC,QAAQC,IAAIC,SAE9B,OACIpD,EAAAA,IAACqD,EAAAA,QAAO,CAAChC,KAAK,UAAUiC,GAAIvK,EAAS2I,SACjC1B,EAAAA,IAACuD,EAAAA,SAAQC,OAAAC,OAAA,CACLrJ,IAAK2B,GACL2H,MAAO,CAAEC,OAAQ,QACjBC,KAAMxI,GACNyI,mBAAmC,QAAfpG,EAAA/B,GAAQ6B,eAAO,IAAAE,EAAAA,OAAIG,EACvCkG,YAAa,CAACjG,EAAO1B,IAAS2E,GAAW3E,EAAM0B,IAM1CoF,EACC,CACIc,iBAAkB3I,GAAiBa,QAEvC,CAAA,GANDgH,EAAY7H,GAAiBa,YAAS2B,IAQzC,EA8BlB,OACI+D,EAAAA,KAACqC,EAAAA,uCACe,qBACZ5J,IAAK6J,EAAAA,UAAUvI,GAASb,GACxB6I,MAAO3I,IACHD,aACI9B,EAAoB4B,OAAegD,EAASsG,aACtCjL,WACJH,EAAO4I,SAAA,CAhCjBC,EAAAA,KAACwC,EAAAA,KAAI,CAAC/J,IAAKwB,GAAO,cAAc,gBAAe8F,SAAA,CAC1CI,KACAK,KACAK,KACAI,KACAE,KACAE,QAKW,MACpB,GAAKtJ,EAKL,OACIsG,EAAAA,IAAA,MAAA,CAAA,cAAiB,aAAY0B,SACxBhI,EAAyBL,EAAkB+B,KAC1C,EAeLgJ,MACO"}

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

@@ -1,125 +0,0 @@
-"use strict";var e=require("@lifesg/react-icons/exclamation-circle-fill"),i=require("@lifesg/react-icons/square"),r=require("@lifesg/react-icons/square-fill"),t=require("@lifesg/react-icons/square-tick-fill"),o=require("@lifesg/react-icons/tick"),a=require("styled-components"),n=require("../../v3_theme/index.js"),l=require("../component-loading-spinner/component-loading-spinner.js"),s=require("../html-content/html-content.js"),d=require("../input-wrapper/input-wrapper.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=c(a);const u=p.default.div`
-    border: ${n.V3_Border["width-010"]} ${n.V3_Border.solid}
-        ${n.V3_Colour.border};
-    border-radius: ${n.V3_Radius.sm};
-    background: ${n.V3_Colour.bg};
-
-    --x-spacing: 0px;
-    --available-width: calc(100vw - var(--x-spacing) * 2);
-
-    ${n.V3_MediaQuery.MaxWidth.sm} {
-        --x-spacing: ${n.V3_Breakpoint["sm-margin"]}px;
-        max-height: 15rem;
-    }
-
-    ${n.V3_MediaQuery.MaxWidth.xs} {
-        --x-spacing: ${n.V3_Breakpoint["xs-margin"]}px;
-    }
-
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        --x-spacing: ${n.V3_Breakpoint["xxs-margin"]}px;
-    }
-
-    max-width: var(--available-width);
-
-    ${e=>e.$customWidth?`width: ${e.$customWidth};`:e.$width?`width: ${e.$width}px; min-width: min(23rem, var(--available-width));`:"min-width: min(23rem, var(--available-width));"}
-
-    max-height: min(27rem, var(--available-height, infinity * 1px));
-    overflow: hidden;
-    overflow-y: auto;
-    ${e=>"small"===e.$variant?n.V3_Font["body-md-regular"]:n.V3_Font["body-baseline-regular"]}
-
-    &::-webkit-scrollbar {
-        width: 14px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: ${n.V3_Colour["bg-inverse-subtlest"]};
-        border: 5px solid transparent;
-        border-radius: ${n.V3_Radius.full};
-        background-clip: padding-box;
-    }
-`,g=p.default.div`
-    background: transparent;
-    padding: ${n.V3_Spacing["spacing-8"]};
-`,h=p.default.ul`
-    list-style-type: none;
-`,x=p.default.li`
-    display: flex;
-    align-items: flex-start;
-    gap: ${n.V3_Spacing["spacing-8"]};
-    padding: ${n.V3_Spacing["spacing-12"]} ${n.V3_Spacing["spacing-8"]};
-    cursor: pointer;
-    border: none;
-    border-radius: ${n.V3_Radius.none};
-    outline: none;
-
-    ${e=>e.$disabled?a.css`
-                cursor: not-allowed;
-            `:e.$active&&e.$selected?a.css`
-                background: ${n.V3_Colour["bg-hover"]};
-            `:e.$active?a.css`
-                background: ${n.V3_Colour["bg-hover-subtle"]};
-            `:void 0}
-`,$=p.default(o.TickIcon)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1rem;
-    color: ${n.V3_Colour["icon-selected"]};
-`,b=p.default.div`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1rem;
-`,m=p.default(t.SquareTickFillIcon)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1lh;
-    color: ${n.V3_Colour["icon-selected"]};
-`,f=p.default(i.SquareIcon)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1lh;
-    color: ${n.V3_Colour["icon-primary-subtlest"]};
-`,_=p.default(r.SquareFillIcon)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1lh;
-    color: ${n.V3_Colour["icon-disabled-subtle"]};
-`,V=p.default.div`
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-`,w=p.default(d.BasicButton)`
-    cursor: pointer;
-    overflow: hidden;
-    color: ${n.V3_Colour["text-primary"]};
-    font-size: inherit;
-`,v=p.default(w)`
-    ${n.V3_Font["body-baseline-semibold"]}
-`,k=p.default(w)`
-    ${n.V3_Font["body-md-semibold"]}
-    padding: ${n.V3_Spacing["spacing-8"]} ${n.V3_Spacing["spacing-8"]};
-`,C=p.default.div`
-    width: 100%;
-    display: flex;
-    padding: ${n.V3_Spacing["spacing-12"]} ${n.V3_Spacing["spacing-16"]};
-    align-items: center;
-`,S=p.default(e.ExclamationCircleFillIcon)`
-    margin-right: ${n.V3_Spacing["spacing-4"]};
-    color: ${n.V3_Colour["icon-error"]};
-    height: 1em;
-    width: 1em;
-`,y=p.default(l.ComponentLoadingSpinner)`
-    margin-right: ${n.V3_Spacing["spacing-8"]};
-    color: ${n.V3_Colour.icon};
-`,q=p.default.div`
-    ${s.applyHtmlContentStyle()}
-    color: ${n.V3_Colour["text-subtle"]};
-    padding: 0 ${n.V3_Spacing["spacing-16"]} ${n.V3_Spacing["spacing-12"]}
-        ${n.V3_Spacing["spacing-16"]};
-`;exports.CheckboxDisabledIndicator=_,exports.CheckboxSelectedIndicator=m,exports.CheckboxUnselectedIndicator=f,exports.Container=u,exports.DropdownCommonButton=w,exports.LabelIcon=S,exports.List=g,exports.ListItem=x,exports.Listbox=h,exports.NoResultDescContainer=q,exports.ResultStateContainer=C,exports.SelectAllButton=k,exports.SelectAllContainer=V,exports.SelectedIndicator=$,exports.Spinner=y,exports.TryAgainButton=v,exports.UnselectedIndicator=b;
-//# sourceMappingURL=dropdown-list.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-list.styles.js","sources":["../../../../src/shared/dropdown-list-v2/dropdown-list.styles.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 styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Breakpoint,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport { ComponentLoadingSpinner } from \"../component-loading-spinner\";\nimport { applyHtmlContentStyle } from \"../html-content/html-content\";\nimport { BasicButton } from \"../input-wrapper/input-wrapper\";\nimport type { DropdownVariantType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ContainerStyleProps {\n    $width?: number;\n    $customWidth?: string;\n    $variant: DropdownVariantType;\n}\n\ninterface ListItemStyleProps {\n    $active: boolean;\n    $selected: boolean;\n    $disabled: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN STYLES\n// -----------------------------------------------------------------------------\nexport const Container = styled.div<ContainerStyleProps>`\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    background: ${V3_Colour[\"bg\"]};\n\n    --x-spacing: 0px;\n    --available-width: calc(100vw - var(--x-spacing) * 2);\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        --x-spacing: ${V3_Breakpoint[\"sm-margin\"]}px;\n        max-height: 15rem;\n    }\n\n    ${V3_MediaQuery.MaxWidth.xs} {\n        --x-spacing: ${V3_Breakpoint[\"xs-margin\"]}px;\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        --x-spacing: ${V3_Breakpoint[\"xxs-margin\"]}px;\n    }\n\n    max-width: var(--available-width);\n\n    ${(props) => {\n        if (props.$customWidth) return `width: ${props.$customWidth};`;\n        if (props.$width)\n            return `width: ${props.$width}px; min-width: min(23rem, var(--available-width));`;\n\n        return \"min-width: min(23rem, var(--available-width));\";\n    }}\n\n    max-height: min(27rem, var(--available-height, infinity * 1px));\n    overflow: hidden;\n    overflow-y: auto;\n    ${(props) =>\n        props.$variant === \"small\"\n            ? V3_Font[\"body-md-regular\"]\n            : V3_Font[\"body-baseline-regular\"]}\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${V3_Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${V3_Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\nexport const List = styled.div`\n    background: transparent;\n    padding: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const Listbox = styled.ul`\n    list-style-type: none;\n`;\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\n\nexport const ListItem = styled.li<ListItemStyleProps>`\n    display: flex;\n    align-items: flex-start;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n    padding: ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-8\"]};\n    cursor: pointer;\n    border: none;\n    border-radius: ${V3_Radius[\"none\"]};\n    outline: none;\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                cursor: not-allowed;\n            `;\n        } else if (props.$active && props.$selected) {\n            return css`\n                background: ${V3_Colour[\"bg-hover\"]};\n            `;\n        } else if (props.$active) {\n            return css`\n                background: ${V3_Colour[\"bg-hover-subtle\"]};\n            `;\n        }\n    }}\n`;\n\nexport const SelectedIndicator = styled(TickIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1rem;\n    color: ${V3_Colour[\"icon-selected\"]};\n`;\n\nexport const UnselectedIndicator = styled.div`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1rem;\n`;\n\nexport const CheckboxSelectedIndicator = styled(SquareTickFillIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${V3_Colour[\"icon-selected\"]};\n`;\n\nexport const CheckboxUnselectedIndicator = styled(SquareIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${V3_Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const CheckboxDisabledIndicator = styled(SquareFillIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${V3_Colour[\"icon-disabled-subtle\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ELEMENT STYLES\n// -----------------------------------------------------------------------------\n\nexport const SelectAllContainer = styled.div`\n    width: 100%;\n    display: flex;\n    justify-content: flex-end;\n`;\n\nexport const DropdownCommonButton = styled(BasicButton)`\n    cursor: pointer;\n    overflow: hidden;\n    color: ${V3_Colour[\"text-primary\"]};\n    font-size: inherit;\n`;\n\nexport const TryAgainButton = styled(DropdownCommonButton)`\n    ${V3_Font[\"body-baseline-semibold\"]}\n`;\n\nexport const SelectAllButton = styled(DropdownCommonButton)`\n    ${V3_Font[\"body-md-semibold\"]}\n    padding: ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const ResultStateContainer = styled.div`\n    width: 100%;\n    display: flex;\n    padding: ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-16\"]};\n    align-items: center;\n`;\n\nexport const LabelIcon = styled(ExclamationCircleFillIcon)`\n    margin-right: ${V3_Spacing[\"spacing-4\"]};\n    color: ${V3_Colour[\"icon-error\"]};\n    height: 1em;\n    width: 1em;\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    margin-right: ${V3_Spacing[\"spacing-8\"]};\n    color: ${V3_Colour[\"icon\"]};\n`;\n\nexport const NoResultDescContainer = styled.div`\n    ${applyHtmlContentStyle()}\n    color: ${V3_Colour[\"text-subtle\"]};\n    padding: 0 ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-12\"]}\n        ${V3_Spacing[\"spacing-16\"]};\n`;\n"],"names":["Container","styled","div","V3_Border","V3_Colour","V3_Radius","V3_MediaQuery","MaxWidth","sm","V3_Breakpoint","xs","xxs","props","$customWidth","$width","$variant","V3_Font","List","V3_Spacing","Listbox","ul","ListItem","li","$disabled","css","$active","$selected","SelectedIndicator","TickIcon","UnselectedIndicator","CheckboxSelectedIndicator","SquareTickFillIcon","CheckboxUnselectedIndicator","SquareIcon","CheckboxDisabledIndicator","SquareFillIcon","SelectAllContainer","DropdownCommonButton","BasicButton","TryAgainButton","SelectAllButton","ResultStateContainer","LabelIcon","ExclamationCircleFillIcon","Spinner","ComponentLoadingSpinner","NoResultDescContainer","applyHtmlContentStyle"],"mappings":"ijBA2CO,MAAMA,EAAYC,EAAAA,QAAOC,GAAwB;cAC1CC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CC,EAAAA,UAAkB;qBACPC,EAAAA,UAAc;kBACjBD,EAAAA,UAAc;;;;;MAK1BE,EAAAA,cAAcC,SAASC;uBACNC,EAAAA,cAAc;;;;MAI/BH,EAAAA,cAAcC,SAASG;uBACND,EAAAA,cAAc;;;MAG/BH,EAAAA,cAAcC,SAASI;uBACNF,EAAAA,cAAc;;;;;MAK9BG,GACKA,EAAMC,aAAqB,UAAUD,EAAMC,gBAC3CD,EAAME,OACC,UAAUF,EAAME,2DAEpB;;;;;MAMRF,GACoB,UAAnBA,EAAMG,SACAC,EAAAA,QAAQ,mBACRA,EAAAA,QAAQ;;;;;;;;;;;sBAWAZ,EAAAA,UAAU;;yBAEPC,EAAAA,UAAgB;;;EAI5BY,EAAOhB,EAAAA,QAAOC,GAAG;;eAEfgB,EAAAA,WAAW;EAGbC,EAAUlB,EAAAA,QAAOmB,EAAE;;EAQnBC,EAAWpB,EAAAA,QAAOqB,EAAsB;;;WAG1CJ,EAAAA,WAAW;eACPA,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;;qBAGjCb,EAAAA,UAAgB;;;MAG9BO,GACKA,EAAMW,UACCC,KAAG;;cAGHZ,EAAMa,SAAWb,EAAMc,UACvBF,KAAG;8BACQpB,EAAAA,UAAU;cAErBQ,EAAMa,QACND,KAAG;8BACQpB,EAAAA,UAAU;mBAFzB;EAQFuB,EAAoB1B,EAAAA,QAAO2B,EAAAA,SAAS;;;;aAIpCxB,EAAAA,UAAU;EAGVyB,EAAsB5B,EAAAA,QAAOC,GAAG;;;;EAMhC4B,EAA4B7B,EAAAA,QAAO8B,EAAAA,mBAAmB;;;;aAItD3B,EAAAA,UAAU;EAGV4B,EAA8B/B,EAAAA,QAAOgC,EAAAA,WAAW;;;;aAIhD7B,EAAAA,UAAU;EAGV8B,EAA4BjC,EAAAA,QAAOkC,EAAAA,eAAe;;;;aAIlD/B,EAAAA,UAAU;EAOVgC,EAAqBnC,EAAAA,QAAOC,GAAG;;;;EAM/BmC,EAAuBpC,EAAAA,QAAOqC,EAAAA,YAAY;;;aAG1ClC,EAAAA,UAAU;;EAIVmC,EAAiBtC,EAAAA,QAAOoC,EAAqB;MACpDrB,EAAAA,QAAQ;EAGDwB,EAAkBvC,EAAAA,QAAOoC,EAAqB;MACrDrB,EAAAA,QAAQ;eACCE,EAAAA,WAAW,gBAAgBA,EAAAA,WAAW;EAGxCuB,EAAuBxC,EAAAA,QAAOC,GAAG;;;eAG/BgB,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;EAIzCwB,EAAYzC,EAAAA,QAAO0C,EAAAA,0BAA0B;oBACtCzB,EAAAA,WAAW;aAClBd,EAAAA,UAAU;;;EAKVwC,EAAU3C,EAAAA,QAAO4C,EAAAA,wBAAwB;oBAClC3B,EAAAA,WAAW;aAClBd,EAAAA,UAAgB;EAGhB0C,EAAwB7C,EAAAA,QAAOC,GAAG;MACzC6C;aACO3C,EAAAA,UAAU;iBACNc,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;UAC9CA,EAAAA,WAAW;"}

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

@@ -1,2 +0,0 @@
-"use strict";var r=require("../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),a=require("@lifesg/react-icons/cross"),s=require("react"),i=require("./dropdown-search.styles.js");const n=s.forwardRef(((s,n)=>{var{value:t,variant:c,onClear:o}=s,l=r.__rest(s,["value","variant","onClear"]);return e.jsxs(i.Container,{$variant:c,children:[e.jsxs(i.SearchBox,{$variant:c,children:[e.jsx(i.SearchIcon,{"aria-hidden":!0}),e.jsx(i.SearchInput,Object.assign({ref:n,value:t,$variant:c},l))]}),t&&e.jsx(i.ClearButton,{"aria-label":"Clear search",focusOutline:"browser",onClick:o,children:e.jsx(a.CrossIcon,{"aria-hidden":!0})})]})}));exports.DropdownSearch=n;
-//# sourceMappingURL=dropdown-search.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-search.js","sources":["../../../../src/shared/dropdown-list-v2/dropdown-search.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport type React from \"react\";\nimport { forwardRef } from \"react\";\n\nimport type { DropdownVariantType } from \"../dropdown-list/types\";\nimport {\n    ClearButton,\n    Container,\n    SearchBox,\n    SearchIcon,\n    SearchInput,\n} from \"./dropdown-search.styles\";\n\ninterface Props extends React.HTMLAttributes<HTMLInputElement> {\n    value: string /** override to cast type */;\n    variant?: DropdownVariantType | undefined;\n    onClear?: (() => void) | undefined;\n}\n\nconst Component = (\n    { value, variant, onClear, ...otherProps }: Props,\n    ref: React.Ref<HTMLInputElement>\n): JSX.Element => {\n    return (\n        <Container $variant={variant}>\n            <SearchBox $variant={variant}>\n                <SearchIcon aria-hidden />\n                <SearchInput\n                    ref={ref}\n                    value={value}\n                    $variant={variant}\n                    {...otherProps}\n                />\n            </SearchBox>\n            {value && (\n                <ClearButton\n                    aria-label=\"Clear search\"\n                    focusOutline=\"browser\"\n                    onClick={onClear}\n                >\n                    <CrossIcon aria-hidden />\n                </ClearButton>\n            )}\n        </Container>\n    );\n};\n\nexport const DropdownSearch = forwardRef(Component);\n"],"names":["DropdownSearch","forwardRef","_a","ref","value","variant","onClear","otherProps","__rest","_jsxs","Container","$variant","SearchBox","children","_jsx","SearchIcon","SearchInput","Object","assign","ClearButton","focusOutline","onClick","CrossIcon"],"mappings":"yLAmBA,MA4BaA,EAAiBC,EAAAA,YA5BZ,CACdC,EACAC,SADAC,MAAEA,EAAKC,QAAEA,EAAOC,QAAEA,KAAYC,EAAUC,EAAAA,OAAAN,EAAxC,CAAA,QAAA,UAAA,YAGA,OACIO,OAACC,EAAAA,UAAS,CAAAC,SAAWN,YACjBI,EAAAA,KAACG,EAAAA,UAAS,CAAAD,SAAWN,EAAOQ,SAAA,CACxBC,EAAAA,IAACC,aAAU,CAAA,eAAA,IACXD,EAAAA,IAACE,EAAAA,YAAWC,OAAAC,OAAA,CACRf,IAAKA,EACLC,MAAOA,EAAKO,SACFN,GACNE,OAGXH,GACGU,EAAAA,IAACK,cAAW,CAAA,aACG,eACXC,aAAa,UACbC,QAASf,EAAOO,SAEhBC,EAAAA,IAACQ,EAAAA,UAAS,CAAA,eAAA,QAGV"}

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

@@ -1,39 +0,0 @@
-"use strict";var e=require("@lifesg/react-icons/magnifier"),i=require("styled-components"),n=require("../../v3_theme/index.js"),r=require("../clickable-icon/clickable-icon.js"),a=require("../input-wrapper/input-wrapper.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=t(i);const c=s.default.div`
-    background: ${n.V3_Colour["bg-strong"]};
-    border-radius: ${n.V3_Radius.sm};
-    display: flex;
-    align-items: center;
-
-    ${e=>"small"===e.$variant?n.V3_Font["body-md-regular"]:n.V3_Font["body-baseline-regular"]}
-`,o=s.default.label`
-    flex: 1;
-    display: flex;
-    align-items: center;
-    gap: ${n.V3_Spacing["spacing-8"]};
-    padding: ${e=>"small"===e.$variant?i.css`
-                  ${n.V3_Spacing["spacing-8"]} ${n.V3_Spacing["spacing-16"]}
-              `:i.css`10px ${n.V3_Spacing["spacing-8"]}`};
-`,l=s.default(a.BasicInput)`
-    flex: 1;
-`,p=s.default(e.MagnifierIcon)`
-    color: ${n.V3_Colour.icon};
-    flex-shrink: 0;
-    height: 1em;
-    width: 1em;
-`,g=s.default(r.ClickableIcon)`
-    flex-shrink: 0;
-    align-self: stretch;
-    box-sizing: content-box;
-    padding: ${n.V3_Spacing["spacing-8"]};
-    margin-left: -${n.V3_Spacing["spacing-8"]};
-    color: ${n.V3_Colour.icon};
-    cursor: pointer;
-    font-size: inherit;
-
-    svg {
-        flex-shrink: 0;
-        height: 1em;
-        width: 1em;
-    }
-`;exports.ClearButton=g,exports.Container=c,exports.SearchBox=o,exports.SearchIcon=p,exports.SearchInput=l;
-//# sourceMappingURL=dropdown-search.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-search.styles.js","sources":["../../../../src/shared/dropdown-list-v2/dropdown-search.styles.tsx"],"sourcesContent":["import { MagnifierIcon } from \"@lifesg/react-icons/magnifier\";\nimport styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Font, V3_Radius, V3_Spacing } from \"../../v3_theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport type { DropdownVariantType } from \"../dropdown-list/types\";\nimport type { InputStyleProps } from \"../input-wrapper/input-wrapper\";\nimport { BasicInput } from \"../input-wrapper/input-wrapper\";\n\n//=============================================================================\n// STYLE INTERFACE\n//=============================================================================\nexport interface StyleProps {\n    $variant: DropdownVariantType | undefined;\n}\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = styled.div<StyleProps>`\n    background: ${V3_Colour[\"bg-strong\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    display: flex;\n    align-items: center;\n\n    ${(props) =>\n        props.$variant === \"small\"\n            ? V3_Font[\"body-md-regular\"]\n            : V3_Font[\"body-baseline-regular\"]}\n`;\n\nexport const SearchBox = styled.label<StyleProps>`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n    padding: ${(props) =>\n        props.$variant === \"small\"\n            ? css`\n                  ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-16\"]}\n              `\n            : // TODO: confirm vertical spacing\n              css`10px ${V3_Spacing[\"spacing-8\"]}`};\n`;\n\nexport const SearchInput = styled(BasicInput)<InputStyleProps>`\n    flex: 1;\n`;\n\nexport const SearchIcon = styled(MagnifierIcon)`\n    color: ${V3_Colour[\"icon\"]};\n    flex-shrink: 0;\n    height: 1em;\n    width: 1em;\n`;\n\nexport const ClearButton = styled(ClickableIcon)`\n    flex-shrink: 0;\n    align-self: stretch;\n    box-sizing: content-box;\n    padding: ${V3_Spacing[\"spacing-8\"]};\n    margin-left: -${V3_Spacing[\"spacing-8\"]};\n    color: ${V3_Colour[\"icon\"]};\n    cursor: pointer;\n    font-size: inherit;\n\n    svg {\n        flex-shrink: 0;\n        height: 1em;\n        width: 1em;\n    }\n`;\n"],"names":["Container","styled","div","V3_Colour","V3_Radius","props","$variant","V3_Font","SearchBox","label","V3_Spacing","css","SearchInput","BasicInput","SearchIcon","MagnifierIcon","ClearButton","ClickableIcon"],"mappings":"mTAmBO,MAAMA,EAAYC,EAAAA,QAAOC,GAAe;kBAC7BC,EAAAA,UAAU;qBACPC,EAAAA,UAAc;;;;MAI5BC,GACoB,UAAnBA,EAAMC,SACAC,EAAAA,QAAQ,mBACRA,EAAAA,QAAQ;EAGTC,EAAYP,EAAAA,QAAOQ,KAAiB;;;;WAItCC,EAAAA,WAAW;eACNL,GACW,UAAnBA,EAAMC,SACAK,KAAG;oBACGD,EAAAA,WAAW,gBAAgBA,EAAAA,WAAW;gBAG5CC,EAAAA,GAAG,QAAQD,EAAAA,WAAW;EAGvBE,EAAcX,EAAAA,QAAOY,EAAAA,WAA4B;;EAIjDC,EAAab,EAAAA,QAAOc,EAAAA,cAAc;aAClCZ,EAAAA,UAAgB;;;;EAMhBa,EAAcf,EAAAA,QAAOgB,EAAAA,cAAc;;;;eAIjCP,EAAAA,WAAW;oBACNA,EAAAA,WAAW;aAClBP,EAAAA,UAAgB;;;;;;;;;"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"expandable-element.js","sources":["../../../../src/shared/dropdown-list-v2/expandable-element.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport type { AriaAttributes, Ref } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { IconContainer, Selector } from \"./expandable-element.styles\";\nimport type { DropdownVariantType } from \"./types\";\n\nexport interface ExpandableElementProps\n    extends Pick<\n        AriaAttributes,\n        \"aria-labelledby\" | \"aria-describedby\" | \"aria-invalid\"\n    > {\n    children: React.ReactNode;\n    disabled: boolean | undefined;\n    expanded: boolean | undefined;\n    listboxId: string;\n    popupRole: AriaAttributes[\"aria-haspopup\"];\n    readOnly: boolean | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const Component = (\n    {\n        children,\n        disabled,\n        expanded,\n        listboxId,\n        popupRole,\n        readOnly,\n        variant,\n        ...otherProps\n    }: ExpandableElementProps,\n    ref: Ref<HTMLButtonElement>\n) => {\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    return (\n        <Selector\n            ref={ref}\n            type=\"button\"\n            role=\"combobox\"\n            aria-expanded={expanded}\n            aria-haspopup={popupRole}\n            aria-controls={expanded ? listboxId : undefined} // only apply when dropdown is mounted\n            data-testid=\"selector\"\n            aria-disabled={disabled}\n            aria-readonly={readOnly}\n            $variant={variant}\n            $readOnly={readOnly}\n            {...otherProps}\n        >\n            {children}\n            {!readOnly && (\n                <IconContainer $expanded={expanded} $variant={variant}>\n                    <ChevronDownIcon aria-hidden />\n                </IconContainer>\n            )}\n        </Selector>\n    );\n};\n\nexport const ExpandableElement = forwardRef(Component);\n"],"names":["Component","_a","ref","children","disabled","expanded","listboxId","popupRole","readOnly","variant","otherProps","__rest","_jsxs","Selector","Object","assign","type","role","undefined","$variant","$readOnly","_jsx","IconContainer","$expanded","ChevronDownIcon","ExpandableElement","forwardRef"],"mappings":"yMAqBaA,EAAY,CACrBC,EAUAC,KAVA,IAAAC,SACIA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,UACRA,EAASC,UACTA,EAASC,SACTA,EAAQC,QACRA,GAAOR,EACJS,EAAUC,EAAAA,OAAAV,EARjB,iFAeA,OACIW,OAACC,EAAAA,SAAQC,OAAAC,OAAA,CACLb,IAAKA,EACLc,KAAK,SACLC,KAAK,WAAU,gBACAZ,EAAQ,gBACRE,EAAS,gBACTF,EAAWC,OAAYY,EAAS,cACnC,WAAU,gBACPd,EAAQ,gBACRI,EAAQW,SACbV,EAAOW,UACNZ,GACPE,EAAU,CAAAP,SAAA,CAEbA,GACCK,GACEa,EAAAA,IAACC,EAAAA,cAAa,CAAAC,UAAYlB,EAAQc,SAAYV,EAAON,SACjDkB,EAAAA,IAACG,EAAAA,gBAAe,CAAA,eAAA,SAGjB,EAINC,EAAoBC,EAAAA,WAAW1B"}

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

@@ -1,37 +0,0 @@
-"use strict";var e=require("styled-components"),t=require("../../v3_theme/index.js"),i=require("../input-wrapper/input-wrapper.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(e);const r=n.default(i.BasicButton)`
-    display: flex;
-    align-items: center;
-    gap: ${t.V3_Spacing["spacing-8"]};
-    width: 100%;
-    padding: ${e=>e.$readOnly?`0 ${t.V3_Spacing["spacing-16"]}`:t.V3_Spacing["spacing-16"]};
-
-    ${i=>"small"===i.$variant?e.css`
-                  ${t.V3_Font["body-md-regular"]}
-                  height: calc(2.5rem - 2px); // exclude top and bottom borders
-              `:e.css`
-                  ${t.V3_Font["body-baseline-regular"]}
-                  height: calc(3rem - 2px);
-              `}
-
-    &:disabled {
-        cursor: not-allowed;
-    }
-
-    &:focus-visible {
-        outline: 2px solid ${t.V3_Colour["focus-ring"]};
-        outline-offset: -2px;
-    }
-`,a=n.default.div`
-    display: flex;
-    align-items: center;
-    transform: rotate(${e=>e.$expanded?180:0}deg);
-    transition: transform ${t.V3_Motion["duration-250"]}
-        ${t.V3_Motion["ease-default"]};
-
-    svg {
-        color: ${t.V3_Colour.icon};
-        height: 1em;
-        width: 1em;
-    }
-`;exports.IconContainer=a,exports.Selector=r;
-//# sourceMappingURL=expandable-element.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"expandable-element.styles.js","sources":["../../../../src/shared/dropdown-list-v2/expandable-element.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Font, V3_Motion, V3_Spacing } from \"../../v3_theme\";\nimport { BasicButton } from \"../input-wrapper/input-wrapper\";\nimport type { DropdownVariantType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $expanded?: boolean;\n    $variant?: DropdownVariantType;\n    $readOnly?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Selector = styled(BasicButton)<StyleProps>`\n    display: flex;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n    width: 100%;\n    padding: ${(props) =>\n        props.$readOnly\n            ? `0 ${V3_Spacing[\"spacing-16\"]}`\n            : V3_Spacing[\"spacing-16\"]};\n\n    ${(props) =>\n        props.$variant === \"small\"\n            ? css`\n                  ${V3_Font[\"body-md-regular\"]}\n                  height: calc(2.5rem - 2px); // exclude top and bottom borders\n              `\n            : css`\n                  ${V3_Font[\"body-baseline-regular\"]}\n                  height: calc(3rem - 2px);\n              `}\n\n    &:disabled {\n        cursor: not-allowed;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const IconContainer = styled.div<StyleProps>`\n    display: flex;\n    align-items: center;\n    transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);\n    transition: transform ${V3_Motion[\"duration-250\"]}\n        ${V3_Motion[\"ease-default\"]};\n\n    svg {\n        color: ${V3_Colour[\"icon\"]};\n        height: 1em;\n        width: 1em;\n    }\n`;\n"],"names":["Selector","styled","BasicButton","V3_Spacing","props","$readOnly","$variant","css","V3_Font","V3_Colour","IconContainer","div","$expanded","V3_Motion"],"mappings":"6NAkBaA,EAAWC,EAAAA,QAAOC,EAAAA,YAAwB;;;WAG5CC,EAAAA,WAAW;;eAENC,GACRA,EAAMC,UACA,KAAKF,aAAW,gBAChBA,EAAAA,WAAW;;MAElBC,GACoB,UAAnBA,EAAME,SACAC,KAAG;oBACGC,EAAAA,QAAQ;;gBAGdD,KAAG;oBACGC,EAAAA,QAAQ;;;;;;;;;6BASCC,EAAAA,UAAU;;;EAK1BC,EAAgBT,EAAAA,QAAOU,GAAe;;;wBAG1BP,GAAWA,EAAMQ,UAAY,IAAM;4BAChCC,EAAAA,UAAU;UAC5BA,EAAAA,UAAU;;;iBAGHJ,EAAAA,UAAgB;;;;"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"nested-dropdown-list-helpers.js","sources":["../../../../src/shared/dropdown-list-v2/nested-dropdown-list-helpers.ts"],"sourcesContent":["import { produce } from \"immer\";\nimport isEmpty from \"lodash/isEmpty\";\nimport isEqual from \"lodash/isEqual\";\n\nimport type {\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n} from \"./types\";\n\n/**\n * builds a flattened representation of the tree\n * the items are listed in their visual order\n */\nexport const flattenList = <T>(\n    nestedList: NestedDropdownListItemProps<T>[],\n    selectedKeyPaths: Set<string>,\n    multiSelect: boolean,\n    searchTerm: string,\n    initialExpanded: boolean\n): NestedDropdownListLocalItem<T>[] => {\n    const items: NestedDropdownListLocalItem<T>[] = [];\n\n    const flatten = (\n        list: NestedDropdownListItemProps<T>[],\n        parentItem: NestedDropdownListLocalItem<T> | undefined\n    ) => {\n        const current: NestedDropdownListLocalItem<T>[] = [];\n        const hasNestedSiblings = list.some(\n            (option) => option.subItems?.length\n        );\n\n        list.forEach((option, i) => {\n            const level = parentItem ? parentItem.level + 1 : 0;\n            const keyPath = parentItem\n                ? [...parentItem.keyPath, option.key]\n                : [option.key];\n            const keyPathString = buildKeyPath(keyPath);\n\n            const item: (typeof items)[number] = {\n                item: option,\n                index: items.length,\n                indexInParent: i,\n                parentSetSize: list.length,\n                keyPath,\n                parentIndex: parentItem ? parentItem.index : -1,\n                parentKeyPath: parentItem ? parentItem.keyPath : [],\n                level,\n                visible:\n                    level === 0 ||\n                    initialExpanded ||\n                    parentItem?.expanded ||\n                    false,\n                expanded: initialExpanded,\n                checked: selectedKeyPaths.has(keyPathString),\n                hasSubItems: !!option.subItems?.length,\n                subItemIndexes: [],\n                hasNestedSiblings,\n                matched: searchTerm\n                    ? option.label.toLowerCase().indexOf(searchTerm) !== -1\n                    : false,\n                hasMatchedSubItems: false,\n            };\n            current.push(item);\n            items.push(item);\n\n            if (option.subItems?.length) {\n                const children = flatten(option.subItems, item);\n\n                if (multiSelect && item.checked !== true) {\n                    const allChildrenSelected = children.every(\n                        (child) => child.checked === true\n                    );\n                    const mixed = children.some(\n                        (child) => child.checked !== false\n                    );\n\n                    if (allChildrenSelected) {\n                        item.checked = true;\n                    } else if (mixed) {\n                        item.checked = \"mixed\";\n                    }\n                }\n\n                item.hasMatchedSubItems = children.some(\n                    (child) => child.matched || child.hasMatchedSubItems\n                );\n                item.subItemIndexes = children.map((child) => child.index);\n            }\n        });\n        return current;\n    };\n\n    flatten(nestedList, undefined);\n    return items;\n};\n\nexport const expandSelectedSubtrees = <T>(\n    list: NestedDropdownListLocalItem<T>[]\n) => {\n    return produce(list, (draft) => {\n        const selectedItems = draft.filter((item) => item.checked === true);\n        for (const selectedItem of selectedItems) {\n            let parentIndex = selectedItem.parentIndex;\n            while (parentIndex >= 0) {\n                const parent = draft[parentIndex];\n                parent.visible = true;\n                parent.expanded = true;\n\n                for (const i of parent.subItemIndexes) {\n                    draft[i].visible = true;\n                }\n\n                parentIndex = parent.parentIndex;\n            }\n        }\n    });\n};\n\nexport const expandMatchedSubtrees = <T>(\n    list: NestedDropdownListLocalItem<T>[]\n) => {\n    return produce(list, (draft) => {\n        for (const item of draft) {\n            if (item.matched) {\n                item.visible = true;\n            }\n\n            if (item.hasMatchedSubItems) {\n                item.visible = true;\n                item.expanded = true;\n\n                for (const i of item.subItemIndexes) {\n                    draft[i].visible = true;\n                }\n            }\n        }\n    });\n};\n\nexport const expandFirstSubtree = <T>(\n    list: NestedDropdownListLocalItem<T>[]\n) => {\n    return produce(list, (draft) => {\n        const firstSubtreeIndex = draft.findIndex((item) => item.hasSubItems);\n        if (firstSubtreeIndex < 0) {\n            return;\n        }\n        let index = firstSubtreeIndex;\n        let length = 0;\n        // find the first subtree\n        for (let i = index; i < draft.length; i++) {\n            const nextItemLength = draft[i].keyPath.length;\n            if (nextItemLength > length) {\n                length = nextItemLength;\n            } else if (nextItemLength < length) {\n                break;\n            }\n\n            index = i;\n            draft[i].visible = true;\n            draft[i].expanded = true;\n        }\n\n        // expand siblings of ancestors\n        for (let i = 0; i < draft.length; i++) {\n            const item = draft[i];\n            const parentKeyPath = item.keyPath.slice(0, -1);\n            const ancestorKeyPath = draft[index].keyPath.slice(\n                0,\n                parentKeyPath.length\n            );\n            if (isEqual(parentKeyPath, ancestorKeyPath)) {\n                item.visible = true;\n            }\n        }\n        return draft;\n    });\n};\n\nexport const toggleSubtree = <T>(\n    list: NestedDropdownListLocalItem<T>[],\n    index: number,\n    expanded: boolean\n) => {\n    return produce(list, (draft) => {\n        draft[index].expanded = expanded;\n        const keyPath = draft[index].keyPath;\n        for (let i = index + 1; i < draft.length; i++) {\n            const item = draft[i];\n            const parent = draft[item.parentIndex];\n            const ancestorKeyPath = item.keyPath.slice(0, keyPath.length);\n            if (isEqual(keyPath, ancestorKeyPath)) {\n                item.visible = expanded && parent.expanded && parent.visible;\n            } else {\n                // no more descendents\n                break;\n            }\n        }\n    });\n};\n\nexport const updateSelectedState = <T>(\n    list: NestedDropdownListLocalItem<T>[],\n    selectedKeyPaths: Set<string>,\n    multiSelect: boolean\n) => {\n    const res = produce(list, (draft) => {\n        for (let i = draft.length - 1; i >= 0; i--) {\n            const item = draft[i];\n            const itemKeyPathString = buildKeyPath(item.keyPath);\n            item.checked = selectedKeyPaths.has(itemKeyPathString);\n            if (item.hasSubItems) {\n                if (multiSelect && item.checked !== true) {\n                    const children = item.subItemIndexes.map(\n                        (index) => draft[index]\n                    );\n\n                    const allChildrenSelected = children.every(\n                        (child) => child.checked === true\n                    );\n                    const mixed = children.some(\n                        (child) => child.checked !== false\n                    );\n\n                    if (allChildrenSelected) {\n                        item.checked = true;\n                    } else if (mixed) {\n                        item.checked = \"mixed\";\n                    }\n                }\n            }\n        }\n    });\n    return res;\n};\n\nexport const findItemFromStart = <T>(\n    arr: T[],\n    predicate: (e: T) => boolean,\n    start: number\n): T | undefined => {\n    for (let i = start; i < arr.length; i++) {\n        if (predicate(arr[i])) {\n            return arr[i];\n        }\n    }\n\n    return undefined;\n};\n\nexport const findItemFromEnd = <T>(\n    arr: T[],\n    predicate: (e: T) => boolean,\n    end: number\n): T | undefined => {\n    for (let i = end; i >= 0; i--) {\n        if (predicate(arr[i])) {\n            return arr[i];\n        }\n    }\n\n    return undefined;\n};\n\nexport const findItemByKeyPath = <T>(\n    nestedList: NestedDropdownListItemProps<T>[] | undefined,\n    keyPath: string[]\n): NestedDropdownListItemProps<T> | undefined => {\n    const [currentKey, ...nextKeyPath] = keyPath;\n    if (isEmpty(nestedList) || isEmpty(currentKey)) {\n        return undefined;\n    }\n\n    const item = nestedList!.find((item) => item.key === currentKey);\n\n    if (!item || !nextKeyPath.length) {\n        return item;\n    }\n\n    return findItemByKeyPath(item.subItems, nextKeyPath);\n};\n\nexport const buildKeyPath = (keyPath: string[]): string => {\n    return keyPath.join(\",\");\n};\n\nexport const buildKeyPathToSet = (keyPathArr: string[][]): Set<string> => {\n    return new Set<string>(keyPathArr.map((keyPath) => keyPath.join(\",\")));\n};\n"],"names":["findItemByKeyPath","nestedList","keyPath","currentKey","nextKeyPath","isEmpty","item","find","key","length","subItems","buildKeyPath","join","keyPathArr","Set","map","list","produce","draft","firstSubtreeIndex","findIndex","hasSubItems","index","i","nextItemLength","visible","expanded","parentKeyPath","slice","ancestorKeyPath","isEqual","matched","hasMatchedSubItems","subItemIndexes","selectedItems","filter","checked","selectedItem","parentIndex","parent","arr","predicate","end","start","selectedKeyPaths","multiSelect","searchTerm","initialExpanded","items","flatten","parentItem","current","hasNestedSiblings","some","option","_a","forEach","level","keyPathString","indexInParent","parentSetSize","has","label","toLowerCase","indexOf","push","_b","children","allChildrenSelected","every","child","mixed","undefined","itemKeyPathString"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons/caret-right"),r=require("react"),s=require("react-virtuoso"),n=require("../../button/button.style.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var i=require("../../util/merge-refs.js");require("../../util/string-helper.js");var a=require("../../util/use-event.js"),l=require("../../util/use-event-listener.js"),o=require("../../util/use-mount.js");require("../dropdown-wrapper/dropdown-wrapper.styles.js");var u=require("../dropdown-wrapper/element-with-dropdown.js"),d=require("./dropdown-label.js"),c=require("./dropdown-list.styles.js"),h=require("./dropdown-search.js"),f=require("./nested-dropdown-list.styles.js"),p=require("./nested-dropdown-list-helpers.js");exports.NestedDropdownList=({listItems:v,multiSelect:x=!1,selectedKeyPaths:b,itemsLoadState:j="success",itemTruncationType:m="end",itemMaxLines:S=2,variant:g="default",listboxId:w,matchElementWidth:I=!1,width:C,mode:y="default",selectableCategory:L,onSelectItem:q,onSelectAll:E,onRetry:k,enableSearch:R,hideNoResultsDisplay:D,noResultsDescription:$,customLabels:A,searchPlaceholder:P,onSearch:T})=>{const{noResultsLabel:N="No results found.",selectAllButtonLabel:F="Select all",clearAllButtonLabel:M="Clear all"}=A||{},O=(null==A?void 0:A.searchPlaceholder)||P||"Search",z=(null==A?void 0:A.noResultsDescription)||$,B=x||L,{elementWidth:U,setFloatingRef:W,getFloatingProps:V,styles:K}=u.useDropdownRender(),[_,G]=r.useState(""),H=_.toLowerCase().trim(),[J,Q]=r.useState(!1),X=r.useRef(null),Y=r.useRef(null),Z=r.useRef([]),ee=r.useRef(null),te=o.useIsMounted(),[re,se]=r.useState([]),[ne,ie]=r.useState([]),ae=J?ne:re,le=r.useMemo((()=>{let e=0;for(const t of re)t.level>e&&(e=t.level);return e}),[re]),[oe,ue]=r.useState(0),[de,ce]=r.useState([]),[he,fe]=r.useState(0),pe=e=>{const t=e.target.value;G(t),""===t?Q(!1):t.trim().length>=3&&Q(!0),null==T||T()},ve=()=>{var e;G(""),Q(!1),null===(e=ee.current)||void 0===e||e.focus(),null==T||T()},xe=()=>{null==k||k()},be=()=>{if(0===b.size){const e=[],t=[];re.forEach((r=>{r.hasSubItems||(e.push(r.keyPath),t.push(r))})),null==E||E(e,t)}else null==E||E([],[])},je=a.useEvent(((e,t)=>p.flattenList(e,b,x,H,t))),me=a.useEvent((e=>b.size?p.expandSelectedSubtrees(je(e,!1)):p.expandFirstSubtree(je(e,!1)))),Se=a.useEvent((e=>{const t=e=>{const r=[];for(const s of e){if(-1!==s.label.toLowerCase().indexOf(H))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)})),ge=a.useEvent((()=>{se((e=>p.updateSelectedState(e,b,x))),J&&ie((e=>p.updateSelectedState(e,b,x)))})),we=(e,t,r)=>{const s=p.toggleSubtree(ae,e,t);ue(e),fe(r),J?ie(s):se(s)};l.useEventListener("keydown",(e=>{var t,r;switch(e.code){case"ArrowDown":{e.preventDefault();const r=p.findItemFromStart(ae,(e=>e.visible),oe+1);r&&(fe((e=>e+1)),ue(r.index),null===(t=Z.current[r.index])||void 0===t||t.focus());break}case"ArrowUp":{e.preventDefault();const t=p.findItemFromEnd(ae,(e=>e.visible),oe-1);t?(fe((e=>e-1)),ue(t.index),null===(r=Z.current[t.index])||void 0===r||r.focus()):0===he&&ee.current&&(ee.current.focus(),fe(-1),ue(-1));break}case"ArrowRight":e.preventDefault(),we(oe,!0,he);break;case"ArrowLeft":e.preventDefault(),we(oe,!1,he);break;case"Space":if(document.activeElement===Z.current[oe]){e.preventDefault();const t=ae[oe];if(t.hasSubItems&&!B)return;null==q||q(t)}}})),r.useEffect((()=>{let e=[];"default"===y?e=me(v):"expand"===y?e=je(v,!0):"collapse"===y&&(e=je(v,!1)),se(e)}),[je,me,v,y]),r.useEffect((()=>{ce(ae.filter((e=>e.visible)))}),[J,ae]),r.useEffect((()=>{ge()}),[x,b,ge]),r.useEffect((()=>{if(J&&_.trim().length>=3){const e=Se(v),t=p.expandMatchedSubtrees(je(e,!1));ie(t)}}),[Se,je,v,J,_]),r.useEffect((()=>{te||(ee.current?(ue(-1),fe(-1),setTimeout((()=>{var e;return null===(e=ee.current)||void 0===e?void 0:e.focus()}),200)):Z.current[oe]?setTimeout((()=>{var e;return null===(e=Z.current[oe])||void 0===e?void 0:e.focus()}),200):(ue(0),fe(0),setTimeout((()=>{var e;return null===(e=Z.current[0])||void 0===e?void 0:e.focus()}),200)))}),[oe,he,te]);const Ie=()=>{if(R&&"success"===j)return e.jsx(h.DropdownSearch,{ref:ee,onChange:pe,value:_,placeholder:O,"data-testid":"search-input","aria-label":"Enter text to search",onClear:ve,variant:g})},Ce=()=>{if(x&&!J&&re.length>0&&"success"===j)return e.jsx(c.SelectAllContainer,{children:e.jsx(c.SelectAllButton,{onClick:be,type:"button",$variant:g,children:0===b.size?F:M})})},ye=()=>{if(!D&&J&&0===ne.length&&"success"===j)return e.jsxs(e.Fragment,{children:[e.jsxs(c.ResultStateContainer,{"data-testid":"list-no-results",children:[e.jsx(c.LabelIcon,{"data-testid":"no-result-icon"}),N]}),z&&e.jsx(c.NoResultDescContainer,{"data-testid":"no-result-desc",children:z})]})},Le=()=>{if(k&&"loading"===j)return e.jsxs(c.ResultStateContainer,{"data-testid":"list-loading",children:[e.jsx(n.Spinner,{$hasChildren:!0}),"Loading..."]})},qe=()=>{if(k&&"fail"===j)return e.jsxs(c.ResultStateContainer,{"data-testid":"list-fail",children:[e.jsx(c.LabelIcon,{"data-testid":"load-error-icon"}),"Failed to load. ",e.jsx(c.TryAgainButton,{onClick:xe,type:"button",$variant:g,children:"Try again."})]})},Ee=t=>{if(x)switch(t.checked){case"mixed":return e.jsx(f.CheckboxMixedIndicator,{"aria-hidden":!0});case!0:return e.jsx(c.CheckboxSelectedIndicator,{"aria-hidden":!0});default:return e.jsx(c.CheckboxUnselectedIndicator,{"aria-hidden":!0})}if(!t.hasSubItems)return e.jsx(f.SelectionIndicator,{$hasNestedSiblings:t.hasNestedSiblings||0===t.level,children:t.checked&&e.jsx(c.SelectedIndicator,{"aria-hidden":!0})})},ke=(r,s)=>{const{level:n,visible:i,expanded:a,keyPath:l,checked:o,hasSubItems:u,indexInParent:c,parentSetSize:h}=r,p=r.index,v=he===s,b=u&&!B;return e.jsxs(f.ListItemContainer,{$visible:i,children:[le>0&&e.jsx(f.Indent,{$level:n}),le>0&&!u&&x&&e.jsx(f.UnexpandableIndicator,{}),e.jsxs(f.ListItem,{"aria-checked":o,"aria-selected":!!o,"aria-expanded":u?a:void 0,"aria-level":n+1,"aria-posinset":c+1,"aria-setsize":h,"data-testid":"list-item",onClick:e=>{e.stopPropagation(),b?we(p,!a,s):((e,t)=>{fe(t),ue(e),null==q||q(ae[e])})(p,s)},onMouseEnter:()=>((e,t)=>{ue(t.index),fe(e)})(s,r),ref:e=>Z.current[r.index]=e,role:"treeitem",tabIndex:v?0:-1,$active:v,$toggleable:b,children:[u&&e.jsx(f.ExpandButton,{"data-testid":"toggle-category-button",onClick:e=>{e.stopPropagation(),we(p,!a,s)},$expanded:a,children:e.jsx(t.CaretRightIcon,{})}),Ee(r),e.jsx(d.DropdownLabel,{bold:u,searchTerm:J?H:void 0,label:r.item.label,selected:!!o,truncationType:m,maxLines:S})]})]},`[${l.join("---")}]`)},Re=()=>{var t;const r="test"===process.env.NODE_ENV;return e.jsx("div",{"aria-multiselectable":x,id:w,ref:Y,role:"tree",children:e.jsx(s.Virtuoso,Object.assign({style:{height:"100%"},customScrollParent:null!==(t=X.current)&&void 0!==t?t:void 0,data:de,itemContent:(e,t)=>ke(t,e)},r?{initialItemCount:de.length}:{}),r?de.length:void 0)})};return e.jsx(c.Container,Object.assign({"data-testid":"dropdown-container",ref:i.mergeRefs(X,W),style:K},V(),{$width:I?U:void 0,$variant:g,$customWidth:C,children:e.jsxs(c.List,{"data-testid":"nested-dropdown-list",children:[Ie(),Ce(),ye(),Le(),qe(),Re()]})}))};
-//# sourceMappingURL=nested-dropdown-list.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"nested-dropdown-list.js","sources":["../../../../src/shared/dropdown-list-v2/nested-dropdown-list.tsx"],"sourcesContent":["import { CaretRightIcon } from \"@lifesg/react-icons/caret-right\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Virtuoso } from \"react-virtuoso\";\n\nimport { Spinner } from \"../../button/button.style\";\nimport {\n    mergeRefs,\n    useEvent,\n    useEventListener,\n    useIsMounted,\n} from \"../../util\";\nimport { useDropdownRender } from \"../dropdown-wrapper\";\nimport { DropdownLabel } from \"./dropdown-label\";\nimport {\n    CheckboxSelectedIndicator,\n    CheckboxUnselectedIndicator,\n    Container,\n    LabelIcon,\n    List,\n    NoResultDescContainer,\n    ResultStateContainer,\n    SelectAllButton,\n    SelectAllContainer,\n    SelectedIndicator,\n    TryAgainButton,\n} from \"./dropdown-list.styles\";\nimport { DropdownSearch } from \"./dropdown-search\";\nimport {\n    CheckboxMixedIndicator,\n    ExpandButton,\n    Indent,\n    ListItem,\n    ListItemContainer,\n    SelectionIndicator,\n    UnexpandableIndicator,\n} 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\";\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 { elementWidth, setFloatingRef, getFloatingProps, styles } =\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 listRef = 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    // 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                <SelectAllContainer>\n                    <SelectAllButton\n                        onClick={handleOnSelectAll}\n                        type=\"button\"\n                        $variant={variant}\n                    >\n                        {selectedKeyPaths.size === 0\n                            ? selectAllButtonLabel\n                            : clearAllButtonLabel}\n                    </SelectAllButton>\n                </SelectAllContainer>\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                    <ResultStateContainer data-testid=\"list-no-results\">\n                        <LabelIcon data-testid=\"no-result-icon\" />\n                        {noResultsLabel}\n                    </ResultStateContainer>\n                    {noResultsDescription && (\n                        <NoResultDescContainer data-testid=\"no-result-desc\">\n                            {noResultsDescription}\n                        </NoResultDescContainer>\n                    )}\n                </>\n            );\n        }\n    };\n\n    const renderLoading = () => {\n        if (onRetry && itemsLoadState === \"loading\") {\n            return (\n                <ResultStateContainer data-testid=\"list-loading\">\n                    <Spinner $hasChildren={true} />\n                    Loading...\n                </ResultStateContainer>\n            );\n        }\n    };\n\n    const renderTryAgain = () => {\n        if (onRetry && itemsLoadState === \"fail\") {\n            return (\n                <ResultStateContainer data-testid=\"list-fail\">\n                    <LabelIcon data-testid=\"load-error-icon\" />\n                    Failed to load.&nbsp;\n                    <TryAgainButton\n                        onClick={handleTryAgain}\n                        type=\"button\"\n                        $variant={variant}\n                    >\n                        Try again.\n                    </TryAgainButton>\n                </ResultStateContainer>\n            );\n        }\n    };\n    const renderSelectionIcon = (listItem: NestedDropdownListLocalItem<T>) => {\n        if (multiSelect) {\n            switch (listItem.checked) {\n                case \"mixed\":\n                    return <CheckboxMixedIndicator aria-hidden />;\n                case true:\n                    return <CheckboxSelectedIndicator aria-hidden />;\n                default:\n                    return <CheckboxUnselectedIndicator aria-hidden />;\n            }\n        }\n\n        if (listItem.hasSubItems) {\n            // no icon needed\n            return;\n        }\n\n        return (\n            <SelectionIndicator\n                $hasNestedSiblings={\n                    listItem.hasNestedSiblings || listItem.level === 0\n                }\n            >\n                {listItem.checked && <SelectedIndicator aria-hidden />}\n            </SelectionIndicator>\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            <ListItemContainer\n                key={`[${keyPath.join(\"---\")}]`}\n                $visible={visible}\n            >\n                {maxLevel > 0 && <Indent $level={level} />}\n                {maxLevel > 0 && !hasSubItems && multiSelect && (\n                    <UnexpandableIndicator />\n                )}\n                <ListItem\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                    $active={active}\n                    $toggleable={toggleable}\n                >\n                    {hasSubItems && (\n                        // not an actual button, only required for visual display\n                        <ExpandButton\n                            data-testid=\"toggle-category-button\"\n                            onClick={(e) => {\n                                e.stopPropagation();\n                                toggleCategory(itemIndex, !expanded, vIndex);\n                            }}\n                            $expanded={expanded}\n                        >\n                            <CaretRightIcon />\n                        </ExpandButton>\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                </ListItem>\n            </ListItemContainer>\n        );\n    };\n\n    const renderVirtualisedList = () => {\n        const isTestEnv = process.env.NODE_ENV === \"test\";\n\n        return (\n            <div\n                aria-multiselectable={multiSelect}\n                id={listboxId}\n                ref={listRef}\n                role=\"tree\"\n            >\n                <Virtuoso\n                    style={{ height: \"100%\" }}\n                    customScrollParent={nodeRef.current ?? undefined}\n                    data={visibleItems}\n                    itemContent={(vIndex, item) => renderItem(item, vIndex)}\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            </div>\n        );\n    };\n\n    const renderList = () => {\n        return (\n            <List data-testid=\"nested-dropdown-list\">\n                {renderSearchInput()}\n                {renderSelectAll()}\n                {renderNoResults()}\n                {renderLoading()}\n                {renderTryAgain()}\n                {renderVirtualisedList()}\n            </List>\n        );\n    };\n\n    return (\n        <Container\n            data-testid=\"dropdown-container\"\n            ref={mergeRefs(nodeRef, setFloatingRef)}\n            style={styles}\n            {...getFloatingProps()}\n            $width={matchElementWidth ? elementWidth : undefined}\n            $variant={variant}\n            $customWidth={width}\n        >\n            {renderList()}\n        </Container>\n    );\n};\n"],"names":["listItems","multiSelect","selectedKeyPaths","itemsLoadState","itemTruncationType","itemMaxLines","variant","listboxId","matchElementWidth","width","mode","selectableCategory","_selectableCategory","onSelectItem","onSelectAll","onRetry","enableSearch","hideNoResultsDisplay","noResultsDescription","_noResultsDescription","customLabels","searchPlaceholder","_searchPlaceholder","onSearch","noResultsLabel","selectAllButtonLabel","clearAllButtonLabel","elementWidth","setFloatingRef","getFloatingProps","styles","useDropdownRender","searchValue","setSearchValue","useState","searchTerm","toLowerCase","trim","searchActive","setSearchActive","nodeRef","useRef","listRef","listItemRefs","searchInputRef","mounted","useIsMounted","unfilteredListItems","setUnfilteredListItems","filteredListItems","setFilteredListItems","activeList","maxLevel","useMemo","currentMaxLevel","item","level","focusedIndex","setFocusedIndex","visibleItems","setVisibleItems","virtuosoIndex","setVirtuosoIndex","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","SelectAllContainer","children","SelectAllButton","onClick","type","$variant","renderNoResults","_jsxs","_Fragment","ResultStateContainer","LabelIcon","NoResultDescContainer","renderLoading","Spinner","$hasChildren","renderTryAgain","TryAgainButton","renderSelectionIcon","listItem","checked","CheckboxMixedIndicator","CheckboxSelectedIndicator","CheckboxUnselectedIndicator","SelectionIndicator","$hasNestedSiblings","hasNestedSiblings","SelectedIndicator","renderItem","expanded","indexInParent","parentSetSize","itemIndex","active","toggleable","ListItemContainer","$visible","Indent","UnexpandableIndicator","ListItem","undefined","e","stopPropagation","handleListItemClick","onMouseEnter","handleListItemHover","node","role","tabIndex","$active","$toggleable","ExpandButton","$expanded","CaretRightIcon","DropdownLabel","bold","selected","truncationType","maxLines","join","renderVirtualisedList","isTestEnv","process","env","NODE_ENV","id","Virtuoso","style","height","customScrollParent","data","itemContent","initialItemCount","Container","mergeRefs","$width","List"],"mappings":"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"}

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

@@ -1,55 +0,0 @@
-"use strict";var e=require("@lifesg/react-icons/minus-square-fill"),i=require("styled-components"),t=require("../../v3_theme/index.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(i);const a=r.default.li`
-    display: ${e=>e.$visible?"flex":"none"};
-`,o=r.default.div`
-    flex: 1;
-    display: flex;
-    align-items: flex-start;
-    gap: ${t.V3_Spacing["spacing-8"]};
-    padding: ${t.V3_Spacing["spacing-12"]} ${t.V3_Spacing["spacing-8"]};
-    cursor: ${e=>e.$toggleable?"default":"pointer"};
-    overflow: hidden; // required for label to truncate properly
-    border-radius: ${t.V3_Radius.none};
-    outline: none;
-
-    ${e=>e.$active&&i.css`
-            background: ${t.V3_Colour["bg-hover"]};
-        `}
-`,l=r.default.div`
-    height: 1px;
-    width: calc(
-        (1lh + ${t.V3_Spacing["spacing-8"]}) * ${e=>e.$level}
-    );
-`,s=r.default.div`
-    width: 1lh;
-    height: 1lh;
-    color: ${t.V3_Colour["icon-primary"]};
-    cursor: pointer;
-
-    svg {
-        width: 1lh;
-        height: 1lh;
-        transition: transform ${t.V3_Motion["duration-350"]}
-            ${t.V3_Motion["ease-standard"]};
-
-        ${e=>{if(e.$expanded)return i.css`
-                    transform: rotate(90deg);
-                `}}
-    }
-`,d=r.default.div`
-    width: 1lh;
-    height: 1lh;
-    margin-right: ${t.V3_Spacing["spacing-8"]};
-`,c=r.default.div`
-    flex-shrink: 0;
-    height: 1lh;
-    width: ${e=>e.$hasNestedSiblings?"1lh":t.V3_Spacing["spacing-16"]};
-
-    display: flex;
-    justify-content: center;
-`,h=r.default(e.MinusSquareFillIcon)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: lh;
-    r: ${t.V3_Colour["icon-selected"]};
-`;exports.CheckboxMixedIndicator=h,exports.ExpandButton=s,exports.Indent=l,exports.ListItem=o,exports.ListItemContainer=a,exports.SelectionIndicator=c,exports.UnexpandableIndicator=d;
-//# sourceMappingURL=nested-dropdown-list.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"nested-dropdown-list.styles.js","sources":["../../../../src/shared/dropdown-list-v2/nested-dropdown-list.styles.tsx"],"sourcesContent":["import { MinusSquareFillIcon } from \"@lifesg/react-icons/minus-square-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Motion, V3_Radius, V3_Spacing } from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ListItemStyleProps {\n    $active?: boolean;\n    $visible?: boolean;\n    $toggleable?: boolean;\n}\n\ninterface IndentStyleProps {\n    $level?: number;\n}\n\ninterface IndicatorStyleProps {\n    $hasNestedSiblings?: boolean;\n}\n\ninterface ExpandButtonStyleProps {\n    $expanded?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\n\nexport const ListItemContainer = styled.li<ListItemStyleProps>`\n    display: ${(props) => (props.$visible ? \"flex\" : \"none\")};\n`;\n\nexport const ListItem = styled.div<ListItemStyleProps>`\n    flex: 1;\n    display: flex;\n    align-items: flex-start;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n    padding: ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-8\"]};\n    cursor: ${(props) => (props.$toggleable ? \"default\" : \"pointer\")};\n    overflow: hidden; // required for label to truncate properly\n    border-radius: ${V3_Radius[\"none\"]};\n    outline: none;\n\n    ${(props) =>\n        props.$active &&\n        css`\n            background: ${V3_Colour[\"bg-hover\"]};\n        `}\n`;\n\nexport const Indent = styled.div<IndentStyleProps>`\n    height: 1px;\n    width: calc(\n        (1lh + ${V3_Spacing[\"spacing-8\"]}) * ${(props) => props.$level}\n    );\n`;\n\nexport const ExpandButton = styled.div<ExpandButtonStyleProps>`\n    width: 1lh;\n    height: 1lh;\n    color: ${V3_Colour[\"icon-primary\"]};\n    cursor: pointer;\n\n    svg {\n        width: 1lh;\n        height: 1lh;\n        transition: transform ${V3_Motion[\"duration-350\"]}\n            ${V3_Motion[\"ease-standard\"]};\n\n        ${(props) => {\n            if (props.$expanded) {\n                return css`\n                    transform: rotate(90deg);\n                `;\n            }\n        }}\n    }\n`;\n\nexport const UnexpandableIndicator = styled.div`\n    width: 1lh;\n    height: 1lh;\n    margin-right: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const SelectionIndicator = styled.div<IndicatorStyleProps>`\n    flex-shrink: 0;\n    height: 1lh;\n    width: ${(props) =>\n        props.$hasNestedSiblings ? \"1lh\" : V3_Spacing[\"spacing-16\"]};\n\n    display: flex;\n    justify-content: center;\n`;\n\nexport const CheckboxMixedIndicator = styled(MinusSquareFillIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: lh;\n    r: ${V3_Colour[\"icon-selected\"]};\n`;\n"],"names":["ListItemContainer","styled","li","props","$visible","ListItem","div","V3_Spacing","$toggleable","V3_Radius","$active","css","V3_Colour","Indent","$level","ExpandButton","V3_Motion","$expanded","UnexpandableIndicator","SelectionIndicator","$hasNestedSiblings","CheckboxMixedIndicator","MinusSquareFillIcon"],"mappings":"2NAkCO,MAAMA,EAAoBC,EAAAA,QAAOC,EAAsB;eAC9CC,GAAWA,EAAMC,SAAW,OAAS;EAGxCC,EAAWJ,EAAAA,QAAOK,GAAuB;;;;WAI3CC,EAAAA,WAAW;eACPA,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;cACvCJ,GAAWA,EAAMK,YAAc,UAAY;;qBAErCC,EAAAA,UAAgB;;;MAG9BN,GACCA,EAAMO,SACNC,KAAG;0BACeC,EAAAA,UAAU;;EAIvBC,EAASZ,EAAAA,QAAOK,GAAqB;;;iBAGjCC,EAAAA,WAAW,mBAAoBJ,GAAUA,EAAMW;;EAInDC,EAAed,EAAAA,QAAOK,GAA2B;;;aAGjDM,EAAAA,UAAU;;;;;;gCAMSI,EAAAA,UAAU;cAC5BA,EAAAA,UAAU;;UAEbb,IACC,GAAIA,EAAMc,UACN,OAAON,KAAG;;iBAGd;;EAKCO,EAAwBjB,EAAAA,QAAOK,GAAG;;;oBAG3BC,EAAAA,WAAW;EAGlBY,EAAqBlB,EAAAA,QAAOK,GAAwB;;;aAGnDH,GACNA,EAAMiB,mBAAqB,MAAQb,EAAAA,WAAW;;;;EAMzCc,EAAyBpB,EAAAA,QAAOqB,EAAAA,oBAAoB;;;;SAIxDV,EAAAA,UAAU;"}