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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"element-with-dropdown.js","sources":["../../../../src/shared/dropdown-wrapper/element-with-dropdown.tsx"],"sourcesContent":["import type {\n    Middleware,\n    OpenChangeReason,\n    Placement,\n} from \"@floating-ui/react\";\nimport {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { CSSProperties, RefObject } from \"react\";\nimport { createContext, useContext, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport {\n    Breakpoint,\n    useDesignToken,\n    useSafeMaxWidthMediaQuery,\n} from \"../../theme\";\nimport { useInheritedThemeScope } from \"../../theme/theme-provider/hooks\";\nimport * as elementWithDropdownStyles from \"./element-with-dropdown.styles\";\nimport type { DropdownAlignmentType } from \"./types\";\n\nexport interface DropdownRenderProps {\n    elementWidth: number;\n    styles: CSSProperties;\n    setFloatingRef: (node: HTMLElement | null) => void;\n    getFloatingProps: (\n        userProps?: React.HTMLProps<HTMLElement>\n    ) => Record<string, unknown>;\n}\n\ninterface ElementWithDropdownProps {\n    enabled: boolean;\n    isOpen: boolean;\n    onOpen?: () => void | undefined;\n    onClose?: (reason: OpenChangeReason | undefined) => void | undefined;\n    onDismiss?: () => void | undefined;\n    renderElement: () => React.ReactNode;\n    renderDropdown: (props: DropdownRenderProps) => React.ReactNode;\n    customZIndex?: number | undefined;\n    clickToToggle?: boolean | undefined;\n    /* the distance between the reference element and the dropdown */\n    offset?: number | undefined;\n    /* the alignment of the dropdown to the left or right of the reference element */\n    alignment?: DropdownAlignmentType | undefined;\n    fitAvailableHeight?: boolean | undefined;\n    /**\n     * The root element that contains the popover element. Defaults to the document body.\n     *\n     * If the parent that contains the trigger element has a higher z-index than the popover,\n     * the popover may not be visible. Specify the parent element here instead\n     */\n    rootNode?: RefObject<HTMLElement> | undefined;\n    /** If set, the `elementWidth` refers to this instead of the reference element */\n    positionRef?: RefObject<HTMLElement> | undefined;\n}\n\nconst getFloatingPlacement = (alignment: DropdownAlignmentType): Placement => {\n    switch (alignment) {\n        case \"right\":\n            return \"bottom-end\";\n        case \"left\":\n        default:\n            return \"bottom-start\";\n    }\n};\n\nconst DEFAULT_Z_INDEX = 50;\n\nexport const DropdownRenderContext = createContext<DropdownRenderProps>({\n    elementWidth: 0,\n    styles: {},\n    setFloatingRef: () => {\n        // noop\n    },\n    getFloatingProps: () => ({}),\n});\n\nexport const useDropdownRender = () => {\n    return useContext(DropdownRenderContext);\n};\n\n/**\n * A wrapper to handle the common pattern of a field with a card-based dropdown\n * using Floating UI\n *\n * Usage:\n * - Specify `renderElement` for the main field\n * - Specify `renderDropdown` for the dropdown\n * - Use `isOpen` to control the visibility of the dropdown\n * - Handle changes in visibility with `onOpen`, `onClose` and `onDismiss`\n * - If your dropdown can resize, set the css like so: `max-height: var(--available-height);`\n * - If your dropdown has a preferred max-height, set the css like so:\n *   `max-height: min(100px, var(--available-height, infinity * 1px))`\n *\n * Pass the floating props to the dropdown:\n * ```\n * <DropdownContainer\n *   ref={setFloatingRef}\n *   style={styles}\n *   {...getFloatingProps()}\n * >\n * </DropdownContainer>\n * ```\n *\n * If you need event listeners, pass them to `getFloatingProps()`:\n * ```\n * getFloatingProps({\n *   onClick: handleOnClick\n * })\n * ```\n */\nexport const ElementWithDropdown = ({\n    enabled,\n    isOpen,\n    onOpen,\n    onClose,\n    onDismiss,\n    renderElement,\n    renderDropdown,\n    customZIndex,\n    clickToToggle = false,\n    offset: dropdownOffset = 0,\n    alignment = \"left\",\n    fitAvailableHeight,\n    rootNode,\n    positionRef,\n}: ElementWithDropdownProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const mobileBreakpoint = useDesignToken(Breakpoint[\"sm-max\"]);\n    const isMobile = useSafeMaxWidthMediaQuery(mobileBreakpoint);\n    const elementRef = useRef<HTMLDivElement | null>(null);\n    const { width: referenceWidth = 0 } = useResizeDetector({\n        targetRef: positionRef ?? elementRef,\n        handleHeight: false,\n    });\n    const center: Middleware = {\n        name: \"center\",\n        fn: ({ x, rects }) => {\n            const noGapInBetween =\n                x === 0 || x + rects.floating.width === window.innerWidth;\n            return {\n                x:\n                    noGapInBetween && isMobile\n                        ? (window.innerWidth - rects.floating.width) / 2\n                        : x,\n            };\n        },\n    };\n    const { refs, floatingStyles, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open, _event, reason) => {\n            if (reason === \"escape-key\") {\n                onDismiss?.();\n            } else if (open && !isOpen) {\n                onOpen?.();\n            } else if (!open && isOpen) {\n                onClose?.(reason);\n            }\n        },\n        whileElementsMounted: autoUpdate,\n        placement: getFloatingPlacement(alignment),\n        middleware: [\n            offset(dropdownOffset),\n            flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            size({\n                // shrink to fit available vertical space\n                apply({ availableHeight, elements }) {\n                    if (\n                        !fitAvailableHeight ||\n                        availableHeight >= elements.floating.scrollHeight\n                    ) {\n                        // reset this so that dropdown can expand as needed\n                        elements.floating.style.setProperty(\n                            elementWithDropdownStyles.tokens.availableHeight,\n                            \"\"\n                        );\n                        return;\n                    }\n\n                    elements.floating.style.setProperty(\n                        elementWithDropdownStyles.tokens.availableHeight,\n                        `${Math.max(0, availableHeight)}px`\n                    );\n                },\n            }),\n            center,\n        ],\n    });\n    const parentZIndex = useFloatingChild();\n\n    const { isMounted, styles } = useTransitionStyles(context, {\n        initial: { opacity: 0 },\n        open: { opacity: 1 },\n        duration: 300,\n    });\n    const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n    const click = useClick(context, {\n        enabled,\n        toggle: clickToToggle,\n        keyboardHandlers: clickToToggle,\n    });\n    const dismiss = useDismiss(context, { enabled });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n    ]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const dropdownRenderProps = {\n        elementWidth: referenceWidth,\n        styles: {\n            ...styles,\n            ...floatingStyles,\n            zIndex: customZIndex ?? parentZIndex ?? DEFAULT_Z_INDEX,\n        },\n        setFloatingRef: refs.setFloating,\n        getFloatingProps,\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    elementRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps()}\n            >\n                {renderElement()}\n            </div>\n            {isMounted && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                        returnFocus={false} // leads to focus trap. parent to handle the final focus state\n                    >\n                        <DropdownRenderContext.Provider\n                            value={dropdownRenderProps}\n                        >\n                            <div {...themeProps} style={themeStyle}>\n                                {renderDropdown(dropdownRenderProps)}\n                            </div>\n                        </DropdownRenderContext.Provider>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["getFloatingPlacement","alignment","DropdownRenderContext","createContext","elementWidth","styles","setFloatingRef","getFloatingProps","enabled","isOpen","onOpen","onClose","onDismiss","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","mobileBreakpoint","useDesignToken","Breakpoint","isMobile","useSafeMaxWidthMediaQuery","elementRef","useRef","width","referenceWidth","useResizeDetector","targetRef","handleHeight","center","name","fn","x","rects","floating","window","innerWidth","refs","floatingStyles","context","useFloating","open","onOpenChange","_event","reason","whileElementsMounted","autoUpdate","placement","middleware","flip","shift","limiter","limitShift","size","apply","availableHeight","elements","scrollHeight","style","setProperty","elementWithDropdownStyles.tokens","Math","max","parentZIndex","useFloatingChild","isMounted","useTransitionStyles","initial","opacity","duration","themeProps","themeStyle","useInheritedThemeScope","click","useClick","toggle","keyboardHandlers","dismiss","useDismiss","getReferenceProps","useInteractions","dropdownRenderProps","zIndex","_a","setFloating","_jsxs","_jsx","Object","assign","ref","node","current","setReference","children","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","Provider","value","useContext"],"mappings":"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"}
+{"version":3,"file":"element-with-dropdown.js","sources":["../../../../src/shared/dropdown-wrapper/element-with-dropdown.tsx"],"sourcesContent":["import type {\n    Middleware,\n    OpenChangeReason,\n    Placement,\n} from \"@floating-ui/react\";\nimport {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { CSSProperties, RefObject } from \"react\";\nimport { createContext, useContext, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport { useInheritedThemeScope, useMaxWidthMediaQuery } from \"../../theme\";\nimport * as elementWithDropdownStyles from \"./element-with-dropdown.styles\";\nimport type { DropdownAlignmentType } from \"./types\";\n\nexport interface DropdownRenderProps {\n    elementWidth: number;\n    styles: CSSProperties;\n    setFloatingRef: (node: HTMLElement | null) => void;\n    getFloatingProps: (\n        userProps?: React.HTMLProps<HTMLElement>\n    ) => Record<string, unknown>;\n}\n\ninterface ElementWithDropdownProps {\n    enabled: boolean;\n    isOpen: boolean;\n    onOpen?: () => void | undefined;\n    onClose?: (reason: OpenChangeReason | undefined) => void | undefined;\n    onDismiss?: () => void | undefined;\n    renderElement: () => React.ReactNode;\n    renderDropdown: (props: DropdownRenderProps) => React.ReactNode;\n    customZIndex?: number | undefined;\n    clickToToggle?: boolean | undefined;\n    /* the distance between the reference element and the dropdown */\n    offset?: number | undefined;\n    /* the alignment of the dropdown to the left or right of the reference element */\n    alignment?: DropdownAlignmentType | undefined;\n    fitAvailableHeight?: boolean | undefined;\n    /**\n     * The root element that contains the popover element. Defaults to the document body.\n     *\n     * If the parent that contains the trigger element has a higher z-index than the popover,\n     * the popover may not be visible. Specify the parent element here instead\n     */\n    rootNode?: RefObject<HTMLElement> | undefined;\n    /** If set, the `elementWidth` refers to this instead of the reference element */\n    positionRef?: RefObject<HTMLElement> | undefined;\n}\n\nconst getFloatingPlacement = (alignment: DropdownAlignmentType): Placement => {\n    switch (alignment) {\n        case \"right\":\n            return \"bottom-end\";\n        case \"left\":\n        default:\n            return \"bottom-start\";\n    }\n};\n\nconst DEFAULT_Z_INDEX = 50;\n\nexport const DropdownRenderContext = createContext<DropdownRenderProps>({\n    elementWidth: 0,\n    styles: {},\n    setFloatingRef: () => {\n        // noop\n    },\n    getFloatingProps: () => ({}),\n});\n\nexport const useDropdownRender = () => {\n    return useContext(DropdownRenderContext);\n};\n\n/**\n * A wrapper to handle the common pattern of a field with a card-based dropdown\n * using Floating UI\n *\n * Usage:\n * - Specify `renderElement` for the main field\n * - Specify `renderDropdown` for the dropdown\n * - Use `isOpen` to control the visibility of the dropdown\n * - Handle changes in visibility with `onOpen`, `onClose` and `onDismiss`\n * - If your dropdown can resize, set the css like so: `max-height: var(--available-height);`\n * - If your dropdown has a preferred max-height, set the css like so:\n *   `max-height: min(100px, var(--available-height, infinity * 1px))`\n *\n * Pass the floating props to the dropdown:\n * ```\n * <DropdownContainer\n *   ref={setFloatingRef}\n *   style={styles}\n *   {...getFloatingProps()}\n * >\n * </DropdownContainer>\n * ```\n *\n * If you need event listeners, pass them to `getFloatingProps()`:\n * ```\n * getFloatingProps({\n *   onClick: handleOnClick\n * })\n * ```\n */\nexport const ElementWithDropdown = ({\n    enabled,\n    isOpen,\n    onOpen,\n    onClose,\n    onDismiss,\n    renderElement,\n    renderDropdown,\n    customZIndex,\n    clickToToggle = false,\n    offset: dropdownOffset = 0,\n    alignment = \"left\",\n    fitAvailableHeight,\n    rootNode,\n    positionRef,\n}: ElementWithDropdownProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const elementRef = useRef<HTMLDivElement | null>(null);\n    const { width: referenceWidth = 0 } = useResizeDetector({\n        targetRef: positionRef ?? elementRef,\n        handleHeight: false,\n    });\n    const center: Middleware = {\n        name: \"center\",\n        fn: ({ x, rects }) => {\n            const noGapInBetween =\n                x === 0 || x + rects.floating.width === window.innerWidth;\n            return {\n                x:\n                    noGapInBetween && isMobile\n                        ? (window.innerWidth - rects.floating.width) / 2\n                        : x,\n            };\n        },\n    };\n    const { refs, floatingStyles, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open, _event, reason) => {\n            if (reason === \"escape-key\") {\n                onDismiss?.();\n            } else if (open && !isOpen) {\n                onOpen?.();\n            } else if (!open && isOpen) {\n                onClose?.(reason);\n            }\n        },\n        whileElementsMounted: autoUpdate,\n        placement: getFloatingPlacement(alignment),\n        middleware: [\n            offset(dropdownOffset),\n            flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            size({\n                // shrink to fit available vertical space\n                apply({ availableHeight, elements }) {\n                    if (\n                        !fitAvailableHeight ||\n                        availableHeight >= elements.floating.scrollHeight\n                    ) {\n                        // reset this so that dropdown can expand as needed\n                        elements.floating.style.setProperty(\n                            elementWithDropdownStyles.tokens.availableHeight,\n                            \"\"\n                        );\n                        return;\n                    }\n\n                    elements.floating.style.setProperty(\n                        elementWithDropdownStyles.tokens.availableHeight,\n                        `${Math.max(0, availableHeight)}px`\n                    );\n                },\n            }),\n            center,\n        ],\n    });\n    const parentZIndex = useFloatingChild();\n\n    const { isMounted, styles } = useTransitionStyles(context, {\n        initial: { opacity: 0 },\n        open: { opacity: 1 },\n        duration: 300,\n    });\n    const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n    const click = useClick(context, {\n        enabled,\n        toggle: clickToToggle,\n        keyboardHandlers: clickToToggle,\n    });\n    const dismiss = useDismiss(context, { enabled });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n    ]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const dropdownRenderProps = {\n        elementWidth: referenceWidth,\n        styles: {\n            ...styles,\n            ...floatingStyles,\n            zIndex: customZIndex ?? parentZIndex ?? DEFAULT_Z_INDEX,\n        },\n        setFloatingRef: refs.setFloating,\n        getFloatingProps,\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    elementRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps()}\n            >\n                {renderElement()}\n            </div>\n            {isMounted && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                        returnFocus={false} // leads to focus trap. parent to handle the final focus state\n                    >\n                        <DropdownRenderContext.Provider\n                            value={dropdownRenderProps}\n                        >\n                            <div {...themeProps} style={themeStyle}>\n                                {renderDropdown(dropdownRenderProps)}\n                            </div>\n                        </DropdownRenderContext.Provider>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["getFloatingPlacement","alignment","DropdownRenderContext","createContext","elementWidth","styles","setFloatingRef","getFloatingProps","enabled","isOpen","onOpen","onClose","onDismiss","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","isMobile","useMaxWidthMediaQuery","elementRef","useRef","width","referenceWidth","useResizeDetector","targetRef","handleHeight","center","name","fn","x","rects","floating","window","innerWidth","refs","floatingStyles","context","useFloating","open","onOpenChange","_event","reason","whileElementsMounted","autoUpdate","placement","middleware","flip","shift","limiter","limitShift","size","apply","availableHeight","elements","scrollHeight","style","setProperty","elementWithDropdownStyles.tokens","Math","max","parentZIndex","useFloatingChild","isMounted","useTransitionStyles","initial","opacity","duration","themeProps","themeStyle","useInheritedThemeScope","click","useClick","toggle","keyboardHandlers","dismiss","useDismiss","getReferenceProps","useInteractions","dropdownRenderProps","zIndex","_a","setFloating","_jsxs","_jsx","Object","assign","ref","node","current","setReference","children","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","Provider","value","useContext"],"mappings":"uxBAgEA,MAAMA,EAAwBC,GAEjB,UADDA,EAEO,aAGA,eAMNC,EAAwBC,EAAAA,cAAmC,CACpEC,aAAc,EACdC,OAAQ,CAAA,EACRC,eAAgB,OAGhBC,iBAAkB,KAAA,CAAS,iEAqCI,EAC/BC,UACAC,SACAC,SACAC,UACAC,YACAC,gBACAC,iBACAC,eACAC,iBAAgB,EAChBC,OAAQC,EAAiB,EACzBjB,YAAY,OACZkB,qBACAC,WACAC,wBAKA,MAAMC,EAAWC,EAAAA,sBAAsB,MACjCC,EAAaC,EAAAA,OAA8B,OACzCC,MAAOC,EAAiB,GAAMC,EAAAA,kBAAkB,CACpDC,UAAWR,QAAAA,EAAeG,EAC1BM,cAAc,IAEZC,EAAqB,CACvBC,KAAM,SACNC,GAAI,EAAGC,IAAGC,YAGC,CACHD,GAFM,IAANA,GAAWA,EAAIC,EAAMC,SAASV,QAAUW,OAAOC,aAGzBhB,GACXe,OAAOC,WAAaH,EAAMC,SAASV,OAAS,EAC7CQ,MAIhBK,KAAEA,EAAIC,eAAEA,EAAcC,QAAEA,GAAYC,EAAAA,YAAY,CAClDC,KAAMlC,EACNmC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACAlC,SAAAA,IACO+B,IAASlC,EAChBC,SAAAA,KACQiC,GAAQlC,IAChBE,SAAAA,EAAUmC,GACd,EAEJC,qBAAsBC,EAAAA,WACtBC,UAAWjD,EAAqBC,GAChCiD,WAAY,CACRjC,EAAAA,OAAOC,GACPiC,SACAC,QAAM,CACFC,QAASC,EAAAA,eAEbC,OAAK,CAED,KAAAC,EAAMC,gBAAEA,EAAeC,SAAEA,KAEhBvC,GACDsC,GAAmBC,EAAStB,SAASuB,aAGrCD,EAAStB,SAASwB,MAAMC,YACpBC,EAAAA,OAAiCL,gBACjC,IAKRC,EAAStB,SAASwB,MAAMC,YACpBC,EAAAA,OAAiCL,gBACjC,GAAGM,KAAKC,IAAI,EAAGP,OAEvB,IAEJ1B,KAGFkC,EAAeC,EAAAA,oBAEfC,UAAEA,EAAS9D,OAAEA,GAAW+D,EAAAA,oBAAoB3B,EAAS,CACvD4B,QAAS,CAAEC,QAAS,GACpB3B,KAAM,CAAE2B,QAAS,GACjBC,SAAU,OAERC,WAAEA,EAAUC,WAAEA,GAAeC,EAAAA,uBAAuBP,GAEpDQ,EAAQC,EAAAA,SAASnC,EAAS,CAC5BjC,UACAqE,OAAQ7D,EACR8D,iBAAkB9D,IAEhB+D,EAAUC,EAAAA,WAAWvC,EAAS,CAAEjC,aAEhCyE,kBAAEA,EAAiB1E,iBAAEA,GAAqB2E,kBAAgB,CAC5DP,EACAI,IAMEI,EAAsB,CACxB/E,aAAcuB,EACdtB,oDACOA,GACAmC,GAAc,CACjB4C,OAAoC,QAA5BC,EAAAtE,QAAAA,EAAgBkD,SAAY,IAAAoB,EAAAA,EA3JxB,KA6JhB/E,eAAgBiC,EAAK+C,YACrB/E,oBAGJ,OACIgF,6BACIC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFpE,EAAWqE,QAAUD,EACrBrD,EAAKuD,aAAaF,EAAK,GAEvBX,IAAmB,CAAAc,SAEtBlF,OAEJsD,GACGqB,EAAAA,IAACQ,EAAAA,eAAc,CAACC,KAAM7E,EAAQ2E,SAC1BP,EAAAA,IAACU,EAAAA,qBAAoB,CACjBzD,QAASA,EACT0D,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAAAA,IAACtF,EAAsBoG,SAAQ,CAC3BC,MAAOpB,WAEPK,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EAASlB,EAAU,CAAEZ,MAAOa,EAAUsB,SACjCjF,EAAeqE,cAMrC,4BAnLsB,IACtBqB,EAAAA,WAAWtG"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-left"),s=require("@lifesg/react-icons/chevron-right"),a=require("clsx"),i=require("../../external/lodash/throttle.js"),o=require("react"),l=require("../../external/react-resize-detector/build/index.esm.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var n=require("../../theme/utils/use-apply-styles.js"),c=require("../clickable-icon/clickable-icon.js"),d=require("./fade-wrapper.styles.js"),u=require("./helpers.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=f(a);const j=o.forwardRef(((a,f)=>{var{children:j,className:m,fadeColor:g,fadePosition:p="both",showIndicator:q=!1,onResize:v}=a,b=e.__rest(a,["children","className","fadeColor","fadePosition","showIndicator","onResize"]);const[x,k]=o.useState("left"===p||"both"===p),[R,C]=o.useState("right"===p||"both"===p),y=o.useRef(null),I=o.useRef(null),N=o.useRef(null),L=o.useRef(null),w=u.getFadeColorSet(g);n.useApplyStyle(N,{[d.tokens.backgroundColor]:u.getFadeBackgroundColorValue(w.left,q)}),n.useApplyStyle(L,{[d.tokens.backgroundColor]:u.getFadeBackgroundColorValue(w.right,q)}),l.useResizeDetector({onResize:S,targetRef:y,refreshMode:"debounce",refreshRate:50}),o.useImperativeHandle(f,(()=>({resize(){S()}})));const z=o.useCallback((()=>{const e=y.current,r=I.current;e&&r&&r.scrollWidth>e.offsetWidth?(C(Math.round(r.scrollLeft)<r.scrollWidth-r.offsetWidth),k(r.scrollLeft>=1)):(C(!1),k(!1))}),[]),F=o.useMemo((()=>i.default(z,50)),[z]);function S(){z(),v&&v({content:I.current,wrapper:y.current})}o.useEffect((()=>{const e=I.current;return z(),e&&e.addEventListener("scroll",F),()=>{e&&e.removeEventListener("scroll",F),F.cancel()}}),[z,F]);return r.jsxs("div",Object.assign({ref:y,className:h.default(d.wrapper,m)},b,{children:[r.jsx("div",{ref:I,className:d.content,children:j}),r.jsxs(r.Fragment,{children:[x&&r.jsx("div",{ref:N,className:h.default(d.fade,d.fadeLeft),"data-id":"left-fade",children:q&&r.jsx(c.ClickableIcon,{className:h.default(d.fadeIndicatorButton,d.indicatorLeft),"data-id":"left-fade-indicator-button",children:r.jsx(t.ChevronLeftIcon,{})})}),R&&r.jsx("div",{ref:L,className:h.default(d.fade,d.fadeRight),"data-id":"right-fade",children:q&&r.jsx(c.ClickableIcon,{className:h.default(d.fadeIndicatorButton,d.indicatorRight),"data-id":"right-fade-indicator-button",children:r.jsx(s.ChevronRightIcon,{})})})]})]}))}));exports.FadeWrapper=j;
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-left"),s=require("@lifesg/react-icons/chevron-right"),a=require("clsx"),i=require("../../external/lodash/throttle.js"),o=require("react"),l=require("../../external/react-resize-detector/build/index.esm.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var n=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js");var c=require("../clickable-icon/clickable-icon.js"),d=require("./fade-wrapper.styles.js"),u=require("./helpers.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=f(a);const j=o.forwardRef(((a,f)=>{var{children:j,className:m,fadeColor:q,fadePosition:g="both",showIndicator:p=!1,onResize:v}=a,b=e.__rest(a,["children","className","fadeColor","fadePosition","showIndicator","onResize"]);const[x,k]=o.useState("left"===g||"both"===g),[R,C]=o.useState("right"===g||"both"===g),y=o.useRef(null),I=o.useRef(null),N=o.useRef(null),L=o.useRef(null),w=u.getFadeColorSet(q);n.useApplyStyle(N,{[d.tokens.backgroundColor]:u.getFadeBackgroundColorValue(w.left,p)}),n.useApplyStyle(L,{[d.tokens.backgroundColor]:u.getFadeBackgroundColorValue(w.right,p)}),l.useResizeDetector({onResize:S,targetRef:y,refreshMode:"debounce",refreshRate:50}),o.useImperativeHandle(f,(()=>({resize(){S()}})));const z=o.useCallback((()=>{const e=y.current,r=I.current;e&&r&&r.scrollWidth>e.offsetWidth?(C(Math.round(r.scrollLeft)<r.scrollWidth-r.offsetWidth),k(r.scrollLeft>=1)):(C(!1),k(!1))}),[]),F=o.useMemo((()=>i.default(z,50)),[z]);function S(){z(),v&&v({content:I.current,wrapper:y.current})}o.useEffect((()=>{const e=I.current;return z(),e&&e.addEventListener("scroll",F),()=>{e&&e.removeEventListener("scroll",F),F.cancel()}}),[z,F]);return r.jsxs("div",Object.assign({ref:y,className:h.default(d.wrapper,m)},b,{children:[r.jsx("div",{ref:I,className:d.content,children:j}),r.jsxs(r.Fragment,{children:[x&&r.jsx("div",{ref:N,className:h.default(d.fade,d.fadeLeft),"data-id":"left-fade",children:p&&r.jsx(c.ClickableIcon,{className:h.default(d.fadeIndicatorButton,d.indicatorLeft),"data-id":"left-fade-indicator-button",children:r.jsx(t.ChevronLeftIcon,{})})}),R&&r.jsx("div",{ref:L,className:h.default(d.fade,d.fadeRight),"data-id":"right-fade",children:p&&r.jsx(c.ClickableIcon,{className:h.default(d.fadeIndicatorButton,d.indicatorRight),"data-id":"right-fade-indicator-button",children:r.jsx(s.ChevronRightIcon,{})})})]})]}))}));exports.FadeWrapper=j;
 //# sourceMappingURL=fade-wrapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fade-wrapper.js","sources":["../../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport * as styles from \"./fade-wrapper.styles\";\nimport { getFadeBackgroundColorValue, getFadeColorSet } from \"./helpers\";\nimport type { FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        className,\n        fadeColor,\n        fadePosition = \"both\",\n        showIndicator = false,\n        onResize,\n        ...otherProps\n    }: FadeWrapperProps,\n    ref: React.Ref<FadeWrapperRef>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n        fadePosition === \"left\" || fadePosition === \"both\"\n    );\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(\n        fadePosition === \"right\" || fadePosition === \"both\"\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    const fadeColorSet = getFadeColorSet(fadeColor);\n\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.left,\n            showIndicator\n        ),\n    });\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.right,\n            showIndicator\n        ),\n    });\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    useImperativeHandle(ref, () => {\n        return {\n            resize() {\n                handleResize();\n            },\n        };\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const handleScroll = useCallback(() => {\n        const wrapper = wrapperRef.current;\n        const content = contentRef.current;\n\n        if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n            /**\n             * NOTE: Used Math.round because we observe a 0.5 difference\n             * even when we scroll to the end. This causes the fade right\n             * to not be removed\n             */\n            setShowFadeRight(\n                Math.round(content.scrollLeft) <\n                    content.scrollWidth - content.offsetWidth\n            );\n            setShowFadeLeft(content.scrollLeft >= 1);\n        } else {\n            setShowFadeRight(false);\n            setShowFadeLeft(false);\n        }\n    }, []);\n\n    const throttledScrollHandler = useMemo(() => {\n        return throttle(handleScroll, 50);\n    }, [handleScroll]);\n\n    useEffect(() => {\n        const content = contentRef.current;\n\n        handleScroll();\n\n        if (content) {\n            content.addEventListener(\"scroll\", throttledScrollHandler);\n        }\n\n        return () => {\n            if (content) {\n                content.removeEventListener(\"scroll\", throttledScrollHandler);\n            }\n\n            throttledScrollHandler.cancel();\n        };\n    }, [handleScroll, throttledScrollHandler]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    function handleResize() {\n        handleScroll();\n\n        if (onResize) {\n            onResize({\n                content: contentRef.current!,\n                wrapper: wrapperRef.current!,\n            });\n        }\n\n        // TODO: Will move this out to Breadcrumb when it uses this component\n        // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n        //     content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        // }\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                        data-id=\"left-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorLeft\n                                )}\n                                data-id=\"left-fade-indicator-button\"\n                            >\n                                <ChevronLeftIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n                {showFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                        data-id=\"right-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorRight\n                                )}\n                                data-id=\"right-fade-indicator-button\"\n                            >\n                                <ChevronRightIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <div ref={contentRef} className={styles.content}>\n                {children}\n            </div>\n            {renderFade()}\n        </div>\n    );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","className","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","fadeColorSet","getFadeColorSet","useApplyStyle","styles.tokens","backgroundColor","getFadeBackgroundColorValue","left","right","useResizeDetector","handleResize","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","handleScroll","useCallback","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","throttledScrollHandler","useMemo","throttle","useEffect","addEventListener","removeEventListener","cancel","_jsxs","Object","assign","clsx","styles.wrapper","_jsx","styles.content","styles.fade","styles.fadeLeft","ClickableIcon","styles.fadeIndicatorButton","styles.indicatorLeft","ChevronLeftIcon","styles.fadeRight","styles.indicatorRight","ChevronRightIcon"],"mappings":"00BAsBA,MA0LaA,EAAcC,EAAAA,YA1LT,CACdC,EASAC,SATAC,SACIA,EAAQC,UACRA,EAASC,UACTA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQP,EACLQ,EAAUC,EAAAA,OAAAT,EAPjB,gFAcA,MAAOU,EAAcC,GAAmBC,EAAAA,SACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EAAAA,SACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAAA,OAAuB,MACpCC,EAAaD,EAAAA,OAAuB,MACpCE,EAAcF,EAAAA,OAAuB,MACrCG,EAAeH,EAAAA,OAAuB,MAEtCI,EAAeC,EAAAA,gBAAgBjB,GAErCkB,EAAAA,cAAcJ,EAAa,CACvB,CAACK,EAAAA,OAAcC,iBAAkBC,EAAAA,4BAC7BL,EAAaM,KACbpB,KAGRgB,EAAAA,cAAcH,EAAc,CACxB,CAACI,EAAAA,OAAcC,iBAAkBC,EAAAA,4BAC7BL,EAAaO,MACbrB,KAKRsB,oBAAkB,CACdrB,SAAUsB,EACVC,UAAWf,EACXgB,YAAa,WACbC,YAAa,KAGjBC,EAAAA,oBAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIL,GACJ,MAOR,MAAMM,EAAeC,EAAAA,aAAY,KAC7B,MAAMC,EAAUtB,EAAWuB,QACrBC,EAAUtB,EAAWqB,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpD3B,EACI4B,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtC9B,EAAgB4B,EAAQK,YAAc,KAEtC9B,GAAiB,GACjBH,GAAgB,GACpB,GACD,IAEGkC,EAAyBC,EAAAA,SAAQ,IAC5BC,EAAAA,QAASZ,EAAc,KAC/B,CAACA,IAwBJ,SAASN,IACLM,IAEI5B,GACAA,EAAS,CACLgC,QAAStB,EAAWqB,QACpBD,QAAStB,EAAWuB,SAQhC,CApCAU,EAAAA,WAAU,KACN,MAAMT,EAAUtB,EAAWqB,QAQ3B,OANAH,IAEII,GACAA,EAAQU,iBAAiB,SAAUJ,GAGhC,KACCN,GACAA,EAAQW,oBAAoB,SAAUL,GAG1CA,EAAuBM,QAAQ,CAClC,GACF,CAAChB,EAAcU,IAsElB,OACIO,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIrD,IAAKc,EACLZ,UAAWoD,EAAAA,QAAKC,EAAAA,QAAgBrD,IAC5BK,EAAU,CAAAN,SAAA,CAEduD,EAAAA,IAAA,MAAA,CAAKxD,IAAKgB,EAAYd,UAAWuD,UAAcxD,SAC1CA,IAlDLkD,EAAAA,2BACK1C,GACG+C,EAAAA,IAAA,MAAA,CACIxD,IAAKiB,EACLf,UAAWoD,EAAAA,QAAKI,EAAAA,KAAaC,EAAAA,UAAgB,UACrC,YAAW1D,SAElBI,GACGmD,EAAAA,IAACI,EAAAA,cAAa,CACV1D,UAAWoD,EAAAA,QACPO,sBACAC,EAAAA,eACH,UACO,6BAA4B7D,SAEpCuD,EAAAA,IAACO,EAAAA,gBAAe,CAAA,OAK/BnD,GACG4C,EAAAA,IAAA,MAAA,CACIxD,IAAKkB,EACLhB,UAAWoD,EAAAA,QAAKI,EAAAA,KAAaM,EAAAA,qBACrB,aAAY/D,SAEnBI,GACGmD,EAAAA,IAACI,EAAAA,cAAa,CACV1D,UAAWoD,EAAAA,QACPO,EAAAA,oBACAI,EAAAA,0BAEI,8BAA6BhE,SAErCuD,EAAAA,IAACU,EAAAA,iBAAgB,CAAA,aAmBnC"}
+{"version":3,"file":"fade-wrapper.js","sources":["../../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport * as styles from \"./fade-wrapper.styles\";\nimport { getFadeBackgroundColorValue, getFadeColorSet } from \"./helpers\";\nimport type { FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        className,\n        fadeColor,\n        fadePosition = \"both\",\n        showIndicator = false,\n        onResize,\n        ...otherProps\n    }: FadeWrapperProps,\n    ref: React.Ref<FadeWrapperRef>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n        fadePosition === \"left\" || fadePosition === \"both\"\n    );\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(\n        fadePosition === \"right\" || fadePosition === \"both\"\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    const fadeColorSet = getFadeColorSet(fadeColor);\n\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.left,\n            showIndicator\n        ),\n    });\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.right,\n            showIndicator\n        ),\n    });\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    useImperativeHandle(ref, () => {\n        return {\n            resize() {\n                handleResize();\n            },\n        };\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const handleScroll = useCallback(() => {\n        const wrapper = wrapperRef.current;\n        const content = contentRef.current;\n\n        if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n            /**\n             * NOTE: Used Math.round because we observe a 0.5 difference\n             * even when we scroll to the end. This causes the fade right\n             * to not be removed\n             */\n            setShowFadeRight(\n                Math.round(content.scrollLeft) <\n                    content.scrollWidth - content.offsetWidth\n            );\n            setShowFadeLeft(content.scrollLeft >= 1);\n        } else {\n            setShowFadeRight(false);\n            setShowFadeLeft(false);\n        }\n    }, []);\n\n    const throttledScrollHandler = useMemo(() => {\n        return throttle(handleScroll, 50);\n    }, [handleScroll]);\n\n    useEffect(() => {\n        const content = contentRef.current;\n\n        handleScroll();\n\n        if (content) {\n            content.addEventListener(\"scroll\", throttledScrollHandler);\n        }\n\n        return () => {\n            if (content) {\n                content.removeEventListener(\"scroll\", throttledScrollHandler);\n            }\n\n            throttledScrollHandler.cancel();\n        };\n    }, [handleScroll, throttledScrollHandler]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    function handleResize() {\n        handleScroll();\n\n        if (onResize) {\n            onResize({\n                content: contentRef.current!,\n                wrapper: wrapperRef.current!,\n            });\n        }\n\n        // TODO: Will move this out to Breadcrumb when it uses this component\n        // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n        //     content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        // }\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                        data-id=\"left-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorLeft\n                                )}\n                                data-id=\"left-fade-indicator-button\"\n                            >\n                                <ChevronLeftIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n                {showFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                        data-id=\"right-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorRight\n                                )}\n                                data-id=\"right-fade-indicator-button\"\n                            >\n                                <ChevronRightIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <div ref={contentRef} className={styles.content}>\n                {children}\n            </div>\n            {renderFade()}\n        </div>\n    );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","className","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","fadeColorSet","getFadeColorSet","useApplyStyle","styles.tokens","backgroundColor","getFadeBackgroundColorValue","left","right","useResizeDetector","handleResize","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","handleScroll","useCallback","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","throttledScrollHandler","useMemo","throttle","useEffect","addEventListener","removeEventListener","cancel","_jsxs","Object","assign","clsx","styles.wrapper","_jsx","styles.content","styles.fade","styles.fadeLeft","ClickableIcon","styles.fadeIndicatorButton","styles.indicatorLeft","ChevronLeftIcon","styles.fadeRight","styles.indicatorRight","ChevronRightIcon"],"mappings":"83BAsBA,MA0LaA,EAAcC,EAAAA,YA1LT,CACdC,EASAC,SATAC,SACIA,EAAQC,UACRA,EAASC,UACTA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQP,EACLQ,EAAUC,EAAAA,OAAAT,EAPjB,gFAcA,MAAOU,EAAcC,GAAmBC,EAAAA,SACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EAAAA,SACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAAA,OAAuB,MACpCC,EAAaD,EAAAA,OAAuB,MACpCE,EAAcF,EAAAA,OAAuB,MACrCG,EAAeH,EAAAA,OAAuB,MAEtCI,EAAeC,EAAAA,gBAAgBjB,GAErCkB,EAAAA,cAAcJ,EAAa,CACvB,CAACK,EAAAA,OAAcC,iBAAkBC,EAAAA,4BAC7BL,EAAaM,KACbpB,KAGRgB,EAAAA,cAAcH,EAAc,CACxB,CAACI,EAAAA,OAAcC,iBAAkBC,EAAAA,4BAC7BL,EAAaO,MACbrB,KAKRsB,oBAAkB,CACdrB,SAAUsB,EACVC,UAAWf,EACXgB,YAAa,WACbC,YAAa,KAGjBC,EAAAA,oBAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIL,GACJ,MAOR,MAAMM,EAAeC,EAAAA,aAAY,KAC7B,MAAMC,EAAUtB,EAAWuB,QACrBC,EAAUtB,EAAWqB,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpD3B,EACI4B,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtC9B,EAAgB4B,EAAQK,YAAc,KAEtC9B,GAAiB,GACjBH,GAAgB,GACpB,GACD,IAEGkC,EAAyBC,EAAAA,SAAQ,IAC5BC,EAAAA,QAASZ,EAAc,KAC/B,CAACA,IAwBJ,SAASN,IACLM,IAEI5B,GACAA,EAAS,CACLgC,QAAStB,EAAWqB,QACpBD,QAAStB,EAAWuB,SAQhC,CApCAU,EAAAA,WAAU,KACN,MAAMT,EAAUtB,EAAWqB,QAQ3B,OANAH,IAEII,GACAA,EAAQU,iBAAiB,SAAUJ,GAGhC,KACCN,GACAA,EAAQW,oBAAoB,SAAUL,GAG1CA,EAAuBM,QAAQ,CAClC,GACF,CAAChB,EAAcU,IAsElB,OACIO,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIrD,IAAKc,EACLZ,UAAWoD,EAAAA,QAAKC,EAAAA,QAAgBrD,IAC5BK,EAAU,CAAAN,SAAA,CAEduD,EAAAA,IAAA,MAAA,CAAKxD,IAAKgB,EAAYd,UAAWuD,UAAcxD,SAC1CA,IAlDLkD,EAAAA,2BACK1C,GACG+C,EAAAA,IAAA,MAAA,CACIxD,IAAKiB,EACLf,UAAWoD,EAAAA,QAAKI,EAAAA,KAAaC,EAAAA,UAAgB,UACrC,YAAW1D,SAElBI,GACGmD,EAAAA,IAACI,EAAAA,cAAa,CACV1D,UAAWoD,EAAAA,QACPO,sBACAC,EAAAA,eACH,UACO,6BAA4B7D,SAEpCuD,EAAAA,IAACO,EAAAA,gBAAe,CAAA,OAK/BnD,GACG4C,EAAAA,IAAA,MAAA,CACIxD,IAAKkB,EACLhB,UAAWoD,EAAAA,QAAKI,EAAAA,KAAaM,EAAAA,qBACrB,aAAY/D,SAEnBI,GACGmD,EAAAA,IAACI,EAAAA,cAAa,CACV1D,UAAWoD,EAAAA,QACPO,EAAAA,oBACAI,EAAAA,0BAEI,8BAA6BhE,SAErCuD,EAAAA,IAACU,EAAAA,iBAAgB,CAAA,aAmBnC"}

package/cjs/shared/fade-wrapper/helpers.js

@@ -1,2 +1,2 @@
-"use strict";require("../../theme/theme-provider/index.js"),require("react"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js");var e=require("../../theme/tokens/colour.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer"),exports.getFadeBackgroundColorValue=function(r,t){return r&&r.length>0?r.join(", "):t?`${e.Colour.bg}, ${e.Colour.bg}`:null},exports.getFadeColorSet=function(e){return Array.isArray(e)&&e.length>0?{left:e,right:e}:e||{left:void 0,right:void 0}};
+"use strict";require("../../theme/theme-provider/index.js"),require("react"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js");var e=require("../../theme/tokens/colour.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer"),require("../../theme/utils/use-media-query.js"),exports.getFadeBackgroundColorValue=function(r,t){return r&&r.length>0?r.join(", "):t?`${e.Colour.bg}, ${e.Colour.bg}`:null},exports.getFadeColorSet=function(e){return Array.isArray(e)&&e.length>0?{left:e,right:e}:e||{left:void 0,right:void 0}};
 //# sourceMappingURL=helpers.js.map

package/cjs/shared/fade-wrapper/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sources":["../../../../src/shared/fade-wrapper/helpers.tsx"],"sourcesContent":["import { Colour } from \"../../theme\";\nimport type { FadeColorSet, FadeWrapperProps } from \"./types\";\n\nexport function getFadeColorSet(\n    fadeColor: FadeWrapperProps[\"fadeColor\"] | undefined\n): FadeColorSet {\n    if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n        return {\n            left: fadeColor,\n            right: fadeColor,\n        };\n    }\n\n    if (fadeColor) {\n        return fadeColor as FadeColorSet;\n    }\n\n    return {\n        left: undefined,\n        right: undefined,\n    };\n}\n\nexport function getFadeBackgroundColorValue(\n    color: string[] | undefined,\n    showIndicator: boolean\n) {\n    if (color && color.length > 0) {\n        return color.join(\", \");\n    }\n\n    if (showIndicator) {\n        return `${Colour.bg}, ${Colour.bg}`;\n    }\n\n    return null;\n}\n"],"names":["color","showIndicator","length","join","Colour","bg","fadeColor","Array","isArray","left","right","undefined"],"mappings":"2hBAuBM,SACFA,EACAC,GAEA,OAAID,GAASA,EAAME,OAAS,EACjBF,EAAMG,KAAK,MAGlBF,EACO,GAAGG,EAAAA,OAAOC,OAAOD,EAAAA,OAAOC,KAG5B,IACX,0BAjCM,SACFC,GAEA,OAAIC,MAAMC,QAAQF,IAAcA,EAAUJ,OAAS,EACxC,CACHO,KAAMH,EACNI,MAAOJ,GAIXA,GAIG,CACHG,UAAME,EACND,WAAOC,EAEf"}
+{"version":3,"file":"helpers.js","sources":["../../../../src/shared/fade-wrapper/helpers.tsx"],"sourcesContent":["import { Colour } from \"../../theme\";\nimport type { FadeColorSet, FadeWrapperProps } from \"./types\";\n\nexport function getFadeColorSet(\n    fadeColor: FadeWrapperProps[\"fadeColor\"] | undefined\n): FadeColorSet {\n    if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n        return {\n            left: fadeColor,\n            right: fadeColor,\n        };\n    }\n\n    if (fadeColor) {\n        return fadeColor as FadeColorSet;\n    }\n\n    return {\n        left: undefined,\n        right: undefined,\n    };\n}\n\nexport function getFadeBackgroundColorValue(\n    color: string[] | undefined,\n    showIndicator: boolean\n) {\n    if (color && color.length > 0) {\n        return color.join(\", \");\n    }\n\n    if (showIndicator) {\n        return `${Colour.bg}, ${Colour.bg}`;\n    }\n\n    return null;\n}\n"],"names":["color","showIndicator","length","join","Colour","bg","fadeColor","Array","isArray","left","right","undefined"],"mappings":"2kBAuBM,SACFA,EACAC,GAEA,OAAID,GAASA,EAAME,OAAS,EACjBF,EAAMG,KAAK,MAGlBF,EACO,GAAGG,EAAAA,OAAOC,OAAOD,EAAAA,OAAOC,KAG5B,IACX,0BAjCM,SACFC,GAEA,OAAIC,MAAMC,QAAQF,IAAcA,EAAUJ,OAAS,EACxC,CACHO,KAAMH,EACNI,MAAOJ,GAIXA,GAIG,CACHG,UAAME,EACND,WAAOC,EAEf"}

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

@@ -1,2 +1,2 @@
-"use strict";var r=require("../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),s=require("clsx"),a=require("react"),t=require("./input-wrapper.styles.js");function n(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var o=n(s);const i=a.forwardRef((function(s,a){const{disabled:n,error:i,readOnly:u,focused:d,noBorder:c,className:l}=s,p=r.__rest(s,["disabled","error","readOnly","focused","noBorder","className"]);return e.jsx("div",Object.assign({ref:a,"data-focused":d,className:o.default(t.inputBox,n&&t.inputBoxDisabled,i&&t.inputBoxError,u&&t.inputBoxReadOnly,c&&t.inputBoxNoBorder,l)},p))})),u=a.forwardRef((function(s,a){const{disabled:n,error:i,readOnly:u,focused:d,noBorder:c,position:l,className:p}=s,f=r.__rest(s,["disabled","error","readOnly","focused","noBorder","position","className"]);return e.jsx("div",Object.assign({ref:a,"data-focused":d,className:o.default(t.inputBox,t.inputWrapper,n&&t.inputBoxDisabled,i&&t.inputBoxError,u&&t.inputBoxReadOnly,c&&t.inputBoxNoBorder,u&&t.inputWrapperReadOnly,"right"===l&&t.inputWrapperPositionRight,p)},f))})),d=a.forwardRef((function(s,a){const{variant:n,className:i}=s,u=r.__rest(s,["variant","className"]);return e.jsx("input",Object.assign({ref:a,className:o.default(t.basicInput,"small"===n&&t.basicInputSmall,i)},u))})),c=a.forwardRef((function(s,a){var{className:n}=s,i=r.__rest(s,["className"]);return e.jsx("button",Object.assign({ref:a,className:o.default(t.basicButton,n)},i))}));exports.BasicButton=c,exports.BasicInput=d,exports.InputBox=i,exports.InputWrapper=u;
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("@lifesg/react-icons/cross"),a=require("clsx"),t=require("react"),n=require("./input-wrapper.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(a);const u=t.forwardRef((function(s,a){const{disabled:t,error:o,readOnly:u,focused:c,noBorder:l,className:d}=s,p=e.__rest(s,["disabled","error","readOnly","focused","noBorder","className"]);return r.jsx("div",Object.assign({ref:a,"data-focused":c,className:i.default(n.inputBox,t&&n.inputBoxDisabled,o&&n.inputBoxError,u&&n.inputBoxReadOnly,l&&n.inputBoxNoBorder,d)},p))})),c=t.forwardRef((function(s,a){const{disabled:t,error:o,readOnly:u,focused:c,noBorder:l,position:d,className:p}=s,f=e.__rest(s,["disabled","error","readOnly","focused","noBorder","position","className"]);return r.jsx("div",Object.assign({ref:a,"data-focused":c,className:i.default(n.inputBox,n.inputWrapper,t&&n.inputBoxDisabled,o&&n.inputBoxError,u&&n.inputBoxReadOnly,l&&n.inputBoxNoBorder,u&&n.inputWrapperReadOnly,"right"===d&&n.inputWrapperPositionRight,p)},f))})),l=t.forwardRef((function(s,a){const{variant:t,className:o}=s,u=e.__rest(s,["variant","className"]);return r.jsx("input",Object.assign({ref:a,className:i.default(n.basicInput,"small"===t&&n.basicInputSmall,o)},u))})),d=t.forwardRef((function(s,a){var{className:t}=s,o=e.__rest(s,["className"]);return r.jsx("button",Object.assign({ref:a,className:i.default(n.basicButton,t)},o))})),p=t.forwardRef((function(a,t){var{className:o}=a,u=e.__rest(a,["className"]);return r.jsx("button",Object.assign({ref:t,className:i.default(n.clearButton,o)},u,{children:r.jsx(s.CrossIcon,{className:n.clearIcon,"aria-hidden":!0})}))}));exports.BasicButton=d,exports.BasicInput=l,exports.ClearButton=p,exports.InputBox=u,exports.InputWrapper=c;
 //# sourceMappingURL=input-wrapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-wrapper.js","sources":["../../../../src/shared/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport * as styles from \"./input-wrapper.styles\";\nimport type {\n    BasicButtonProps,\n    BasicInputProps,\n    InputBoxProps,\n    InputWrapperProps,\n} from \"./types\";\n\n/**\n * Basic wrapper for input fields that provides the border style but does not\n * prescribe any layout for content\n */\nexport const InputBox = forwardRef<HTMLDivElement, InputBoxProps>(\n    function InputBox(props, ref) {\n        const {\n            disabled,\n            error,\n            readOnly,\n            focused,\n            noBorder,\n            className,\n            ...otherProps\n        } = props;\n        return (\n            <div\n                ref={ref}\n                data-focused={focused}\n                className={clsx(\n                    styles.inputBox,\n                    disabled && styles.inputBoxDisabled,\n                    error && styles.inputBoxError,\n                    readOnly && styles.inputBoxReadOnly,\n                    noBorder && styles.inputBoxNoBorder,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Basic wrapper for input fields with spacing and flex layout for content\n */\nexport const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>(\n    function InputWrapper(props, ref) {\n        const {\n            disabled,\n            error,\n            readOnly,\n            focused,\n            noBorder,\n            position,\n            className,\n            ...otherProps\n        } = props;\n        return (\n            <div\n                ref={ref}\n                data-focused={focused}\n                className={clsx(\n                    styles.inputBox,\n                    styles.inputWrapper,\n                    disabled && styles.inputBoxDisabled,\n                    error && styles.inputBoxError,\n                    readOnly && styles.inputBoxReadOnly,\n                    noBorder && styles.inputBoxNoBorder,\n                    readOnly && styles.inputWrapperReadOnly,\n                    position === \"right\" && styles.inputWrapperPositionRight,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Standalone native input with stripped-down styles, intended to be used in\n * combination with `InputWrapper` or other wrappers to build composite widgets\n */\nexport const BasicInput = forwardRef<HTMLInputElement, BasicInputProps>(\n    function BasicInput(props, ref) {\n        const { variant, className, ...otherProps } = props;\n        return (\n            <input\n                ref={ref}\n                className={clsx(\n                    styles.basicInput,\n                    variant === \"small\" && styles.basicInputSmall,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Standalone native button with stripped-down styles\n */\nexport const BasicButton = forwardRef<HTMLButtonElement, BasicButtonProps>(\n    function BasicButton({ className, ...props }, ref) {\n        return (\n            <button\n                ref={ref}\n                className={clsx(styles.basicButton, className)}\n                {...props}\n            />\n        );\n    }\n);\n"],"names":["InputBox","forwardRef","props","ref","disabled","error","readOnly","focused","noBorder","className","otherProps","_jsx","clsx","styles.inputBox","styles.inputBoxDisabled","styles.inputBoxError","styles.inputBoxReadOnly","styles.inputBoxNoBorder","InputWrapper","position","Object","assign","styles.inputWrapper","styles.inputWrapperReadOnly","styles.inputWrapperPositionRight","BasicInput","variant","__rest","styles.basicInput","styles.basicInputSmall","BasicButton","_a","styles.basicButton"],"mappings":"qPAeO,MAAMA,EAAWC,EAAAA,YACpB,SAAkBC,EAAOC,GACrB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQC,UACRA,GAEAP,EADGQ,WACHR,EARE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,cASN,OACIS,2BACIR,IAAKA,EAAG,eACMI,EACdE,UAAWG,EAAAA,QACPC,EAAAA,SACAT,GAAYU,mBACZT,GAASU,EAAAA,cACTT,GAAYU,EAAAA,iBACZR,GAAYS,mBACZR,IAEAC,GAGhB,IAMSQ,EAAejB,EAAAA,YACxB,SAAsBC,EAAOC,GACzB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQW,SACRA,EAAQV,UACRA,GAEAP,EADGQ,WACHR,EATE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,WAAA,cAUN,OACIS,EAAAA,IAAA,MAAAS,OAAAC,OAAA,CACIlB,IAAKA,EAAG,eACMI,EACdE,UAAWG,EAAAA,QACPC,EAAAA,SACAS,EAAAA,aACAlB,GAAYU,EAAAA,iBACZT,GAASU,EAAAA,cACTT,GAAYU,EAAAA,iBACZR,GAAYS,EAAAA,iBACZX,GAAYiB,EAAAA,qBACC,UAAbJ,GAAwBK,EAAAA,0BACxBf,IAEAC,GAGhB,IAOSe,EAAaxB,EAAAA,YACtB,SAAoBC,EAAOC,GACvB,MAAMuB,QAAEA,EAAOjB,UAAEA,GAA6BP,EAAfQ,EAAUiB,EAAAA,OAAKzB,EAAxC,CAAA,UAAA,cACN,OACIS,EAAAA,IAAA,QAAAS,OAAAC,OAAA,CACIlB,IAAKA,EACLM,UAAWG,EAAAA,QACPgB,EAAAA,WACY,UAAZF,GAAuBG,EAAAA,gBACvBpB,IAEAC,GAGhB,IAMSoB,EAAc7B,EAAAA,YACvB,SAAqB8B,EAAyB5B,GAAzB,IAAAM,UAAEA,GAASsB,EAAK7B,EAAKyB,EAAAA,OAAAI,EAArB,eACjB,OACIpB,EAAAA,4BACIR,IAAKA,EACLM,UAAWG,EAAAA,QAAKoB,EAAAA,YAAoBvB,IAChCP,GAGhB"}
+{"version":3,"file":"input-wrapper.js","sources":["../../../../src/shared/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport * as styles from \"./input-wrapper.styles\";\nimport type {\n    BasicButtonProps,\n    BasicInputProps,\n    InputBoxProps,\n    InputWrapperProps,\n} from \"./types\";\n\n/**\n * Basic wrapper for input fields that provides the border style but does not\n * prescribe any layout for content\n */\nexport const InputBox = forwardRef<HTMLDivElement, InputBoxProps>(\n    function InputBox(props, ref) {\n        const {\n            disabled,\n            error,\n            readOnly,\n            focused,\n            noBorder,\n            className,\n            ...otherProps\n        } = props;\n        return (\n            <div\n                ref={ref}\n                data-focused={focused}\n                className={clsx(\n                    styles.inputBox,\n                    disabled && styles.inputBoxDisabled,\n                    error && styles.inputBoxError,\n                    readOnly && styles.inputBoxReadOnly,\n                    noBorder && styles.inputBoxNoBorder,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Basic wrapper for input fields with spacing and flex layout for content\n */\nexport const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>(\n    function InputWrapper(props, ref) {\n        const {\n            disabled,\n            error,\n            readOnly,\n            focused,\n            noBorder,\n            position,\n            className,\n            ...otherProps\n        } = props;\n        return (\n            <div\n                ref={ref}\n                data-focused={focused}\n                className={clsx(\n                    styles.inputBox,\n                    styles.inputWrapper,\n                    disabled && styles.inputBoxDisabled,\n                    error && styles.inputBoxError,\n                    readOnly && styles.inputBoxReadOnly,\n                    noBorder && styles.inputBoxNoBorder,\n                    readOnly && styles.inputWrapperReadOnly,\n                    position === \"right\" && styles.inputWrapperPositionRight,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Standalone native input with stripped-down styles, intended to be used in\n * combination with `InputWrapper` or other wrappers to build composite widgets\n */\nexport const BasicInput = forwardRef<HTMLInputElement, BasicInputProps>(\n    function BasicInput(props, ref) {\n        const { variant, className, ...otherProps } = props;\n        return (\n            <input\n                ref={ref}\n                className={clsx(\n                    styles.basicInput,\n                    variant === \"small\" && styles.basicInputSmall,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Standalone native button with stripped-down styles\n */\nexport const BasicButton = forwardRef<HTMLButtonElement, BasicButtonProps>(\n    function BasicButton({ className, ...props }, ref) {\n        return (\n            <button\n                ref={ref}\n                className={clsx(styles.basicButton, className)}\n                {...props}\n            />\n        );\n    }\n);\n\n/**\n * Clear button with touch-target padding, offsetting negative margin, and\n * a fixed 2px focus outline\n */\nexport const ClearButton = forwardRef<HTMLButtonElement, BasicButtonProps>(\n    function ClearButton({ className, ...props }, ref) {\n        return (\n            <button\n                ref={ref}\n                className={clsx(styles.clearButton, className)}\n                {...props}\n            >\n                <CrossIcon className={styles.clearIcon} aria-hidden />\n            </button>\n        );\n    }\n);\n"],"names":["InputBox","forwardRef","props","ref","disabled","error","readOnly","focused","noBorder","className","otherProps","_jsx","clsx","styles.inputBox","styles.inputBoxDisabled","styles.inputBoxError","styles.inputBoxReadOnly","styles.inputBoxNoBorder","InputWrapper","position","Object","assign","styles.inputWrapper","styles.inputWrapperReadOnly","styles.inputWrapperPositionRight","BasicInput","variant","__rest","styles.basicInput","styles.basicInputSmall","BasicButton","_a","styles.basicButton","ClearButton","styles.clearButton","children","CrossIcon","styles.clearIcon"],"mappings":"4RAgBO,MAAMA,EAAWC,EAAAA,YACpB,SAAkBC,EAAOC,GACrB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQC,UACRA,GAEAP,EADGQ,WACHR,EARE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,cASN,OACIS,2BACIR,IAAKA,EAAG,eACMI,EACdE,UAAWG,EAAAA,QACPC,EAAAA,SACAT,GAAYU,mBACZT,GAASU,EAAAA,cACTT,GAAYU,EAAAA,iBACZR,GAAYS,mBACZR,IAEAC,GAGhB,IAMSQ,EAAejB,EAAAA,YACxB,SAAsBC,EAAOC,GACzB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQW,SACRA,EAAQV,UACRA,GAEAP,EADGQ,WACHR,EATE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,WAAA,cAUN,OACIS,EAAAA,IAAA,MAAAS,OAAAC,OAAA,CACIlB,IAAKA,EAAG,eACMI,EACdE,UAAWG,EAAAA,QACPC,EAAAA,SACAS,EAAAA,aACAlB,GAAYU,EAAAA,iBACZT,GAASU,EAAAA,cACTT,GAAYU,EAAAA,iBACZR,GAAYS,EAAAA,iBACZX,GAAYiB,EAAAA,qBACC,UAAbJ,GAAwBK,EAAAA,0BACxBf,IAEAC,GAGhB,IAOSe,EAAaxB,EAAAA,YACtB,SAAoBC,EAAOC,GACvB,MAAMuB,QAAEA,EAAOjB,UAAEA,GAA6BP,EAAfQ,EAAUiB,EAAAA,OAAKzB,EAAxC,CAAA,UAAA,cACN,OACIS,EAAAA,IAAA,QAAAS,OAAAC,OAAA,CACIlB,IAAKA,EACLM,UAAWG,EAAAA,QACPgB,EAAAA,WACY,UAAZF,GAAuBG,EAAAA,gBACvBpB,IAEAC,GAGhB,IAMSoB,EAAc7B,EAAAA,YACvB,SAAqB8B,EAAyB5B,GAAzB,IAAAM,UAAEA,GAASsB,EAAK7B,EAAKyB,EAAAA,OAAAI,EAArB,eACjB,OACIpB,EAAAA,4BACIR,IAAKA,EACLM,UAAWG,EAAAA,QAAKoB,EAAAA,YAAoBvB,IAChCP,GAGhB,IAOS+B,EAAchC,EAAAA,YACvB,SAAqB8B,EAAyB5B,GAAzB,IAAAM,UAAEA,GAASsB,EAAK7B,EAAKyB,EAAAA,OAAAI,EAArB,eACjB,OACIpB,MAAA,SAAAS,OAAAC,OAAA,CACIlB,IAAKA,EACLM,UAAWG,UAAKsB,EAAAA,YAAoBzB,IAChCP,EAAK,CAAAiC,SAETxB,EAAAA,IAACyB,YAAS,CAAC3B,UAAW4B,EAAAA,UAAgB,eAAA,MAGlD"}

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

@@ -1,2 +1,2 @@
-"use strict";require("./input-wrapper.styles_1kc4xhb.css");exports.basicButton="b191fi5o",exports.basicInput="b168rpxy",exports.basicInputSmall="b1df0tus",exports.inputBox="i156rlh",exports.inputBoxDisabled="iwp8knk",exports.inputBoxError="i1ec8vtj",exports.inputBoxNoBorder="ijzjlan",exports.inputBoxReadOnly="irl4gvd",exports.inputWrapper="i2dsxxh",exports.inputWrapperPositionRight="iyqh66s",exports.inputWrapperReadOnly="i1mziqol";
+"use strict";require("./input-wrapper.styles_19fpzb.css");exports.basicButton="b191fi5o",exports.basicInput="b168rpxy",exports.basicInputSmall="b1df0tus",exports.clearButton="c179s2uy",exports.clearButtonContainer="ccmyj2w",exports.clearIcon="c1buolhy",exports.inputBox="i156rlh",exports.inputBoxDisabled="iwp8knk",exports.inputBoxError="i1ec8vtj",exports.inputBoxNoBorder="ijzjlan",exports.inputBoxReadOnly="irl4gvd",exports.inputWrapper="i2dsxxh",exports.inputWrapperPositionRight="iyqh66s",exports.inputWrapperReadOnly="i1mziqol";
 //# sourceMappingURL=input-wrapper.styles.js.map

package/cjs/shared/input-wrapper/input-wrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-wrapper.styles.js","sources":["../../../../src/shared/input-wrapper/input-wrapper.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../../theme\";\n\nexport const inputBox = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-offset: -1px;\n        outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const inputBoxReadOnly = css`\n    border-color: transparent;\n    padding: 0;\n    background: transparent !important;\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-color: ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const inputBoxDisabled = css`\n    background: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-color: ${Colour[\"border-disabled\"]};\n    }\n`;\n\nexport const inputBoxError = css`\n    border-color: ${Colour[\"border-error\"]};\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-color: ${Colour[\"border-error-focus\"]};\n    }\n`;\n\nexport const inputBoxNoBorder = css`\n    border-color: transparent;\n    background: transparent;\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline: none;\n    }\n`;\n\nexport const inputWrapper = css`\n    display: flex;\n    align-items: center;\n    position: relative;\n    height: max-content;\n    width: 100%;\n    padding: 0 ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-16\"]};\n`;\n\nexport const inputWrapperReadOnly = css`\n    padding-left: 0;\n`;\n\nexport const inputWrapperPositionRight = css`\n    flex-direction: row-reverse;\n`;\n\nexport const basicInput = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    display: block;\n    background: transparent;\n    border: none;\n    outline: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n\n    &:disabled {\n        color: ${Colour[\"text-subtler\"]};\n\n        &:hover {\n            cursor: not-allowed;\n        }\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    // Chrome, Safari, Edge, Opera\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    // Safari (remove top shadow)\n    --webkit-appearance: none;\n\n    // Firefox\n    --moz-appearance: textfield;\n`;\n\nexport const basicInputSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const basicButton = css`\n    background: transparent;\n    border: none;\n    outline: none;\n\n    &:focus,\n    &:active {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":[],"mappings":"mHAoHwB,8BA1CD,mCAsCK,4BA5GP,mCAwBQ,gCAUH,oCASG,mCA9BA,+BAwCJ,4CAaa,uCAJL"}
+{"version":3,"file":"input-wrapper.styles.js","sources":["../../../../src/shared/input-wrapper/input-wrapper.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../../theme\";\n\nexport const inputBox = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-offset: -1px;\n        outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const inputBoxReadOnly = css`\n    border-color: transparent;\n    padding: 0;\n    background: transparent !important;\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-color: ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const inputBoxDisabled = css`\n    background: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-color: ${Colour[\"border-disabled\"]};\n    }\n`;\n\nexport const inputBoxError = css`\n    border-color: ${Colour[\"border-error\"]};\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-color: ${Colour[\"border-error-focus\"]};\n    }\n`;\n\nexport const inputBoxNoBorder = css`\n    border-color: transparent;\n    background: transparent;\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline: none;\n    }\n`;\n\nexport const inputWrapper = css`\n    display: flex;\n    align-items: center;\n    position: relative;\n    height: max-content;\n    width: 100%;\n    padding: 0 ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-16\"]};\n`;\n\nexport const inputWrapperReadOnly = css`\n    padding-left: 0;\n`;\n\nexport const inputWrapperPositionRight = css`\n    flex-direction: row-reverse;\n`;\n\nexport const basicInput = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    display: block;\n    background: transparent;\n    border: none;\n    outline: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n\n    &:disabled {\n        color: ${Colour[\"text-subtler\"]};\n\n        &:hover {\n            cursor: not-allowed;\n        }\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    // Chrome, Safari, Edge, Opera\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    // Safari (remove top shadow)\n    --webkit-appearance: none;\n\n    // Firefox\n    --moz-appearance: textfield;\n`;\n\nexport const basicInputSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const basicButton = css`\n    background: transparent;\n    border: none;\n    outline: none;\n\n    &:focus,\n    &:active {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const clearButton = css`\n    background: transparent;\n    border: none;\n    outline: none;\n    height: auto;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    margin: calc(${Spacing[\"spacing-12\"]} * -1)\n        calc(${Spacing[\"spacing-16\"]} * -1);\n    cursor: pointer;\n    color: ${Colour.icon};\n\n    &:focus,\n    &:active {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"border-focus\"]};\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const clearIcon = css`\n    height: 1.25rem;\n    width: 1.25rem;\n    vertical-align: middle;\n`;\n\nexport const clearButtonContainer = css`\n    position: absolute;\n    display: flex;\n    align-items: center;\n    right: ${Spacing[\"spacing-16\"]};\n`;\n"],"names":[],"mappings":"kHAoHwB,8BA1CD,mCAsCK,+BAqBJ,wCA4BS,4BANX,4BAvJD,mCAwBQ,gCAUH,oCASG,mCA9BA,+BAwCJ,4CAaa,uCAJL"}

package/cjs/shared/input-wrapper/{input-wrapper.styles_1kc4xhb.css → input-wrapper.styles_19fpzb.css}

@@ -9,3 +9,6 @@
 .b168rpxy{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);display:block;background:transparent;border:none;outline:none;box-shadow:none;padding:0;margin:0;--webkit-appearance:none;--moz-appearance:textfield;}.b168rpxy:disabled{color:var(--fds-colour-text-subtler);}.b168rpxy:disabled:hover{cursor:not-allowed;}.b168rpxy::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy::-webkit-outer-spin-button,.b168rpxy::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}.b168rpxy::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy::-moz-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy::placeholder{color:var(--fds-colour-text-subtler);}
 .b1df0tus{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
 .b191fi5o{background:transparent;border:none;outline:none;}.b191fi5o:focus,.b191fi5o:active{outline:none;}.b191fi5o:focus-visible{outline:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-focus);border-radius:var(--fds-radius-sm);}
+.c179s2uy{background:transparent;border:none;outline:none;height:auto;padding:var(--fds-spacing-12) var(--fds-spacing-16);margin:calc(var(--fds-spacing-12) * -1) calc(var(--fds-spacing-16) * -1);cursor:pointer;color:var(--fds-colour-icon);}.c179s2uy:focus,.c179s2uy:active{outline:none;}.c179s2uy:focus-visible{outline:2px solid var(--fds-colour-border-focus);border-radius:var(--fds-radius-sm);}
+.c1buolhy{height:1.25rem;width:1.25rem;vertical-align:middle;}
+.ccmyj2w{position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;right:var(--fds-spacing-16);}

package/cjs/shared/internal-calendar/calendar-dropdown.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var t=require("../../theme/utils/use-apply-styles.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var s=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("../dropdown-wrapper/element-with-dropdown.js"),i=require("./calendar-dropdown.styles.js"),a=require("./internal-calendar.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=u(r).default.forwardRef(((u,l)=>{const{elementWidth:d,setFloatingRef:o,getFloatingProps:j,styles:p}=n.useDropdownRender(),c=r.useRef(null);return t.useApplyStyle(c,Object.assign({[i.tokens.width]:`${d}px`},p)),e.jsx("div",Object.assign({className:i.calendarWrapper,"data-testid":"calendar-dropdown",ref:s.mergeRefs(o,c)},j(),{children:e.jsx(a.InternalCalendar,Object.assign({ref:l},u))}))}));exports.CalendarDropdown=l;
+"use strict";var e=require("react/jsx-runtime"),r=require("react");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var t=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var s=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("../dropdown-wrapper/element-with-dropdown.js"),n=require("./calendar-dropdown.styles.js"),a=require("./internal-calendar.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=u(r).default.forwardRef(((u,l)=>{const{elementWidth:d,setFloatingRef:o,getFloatingProps:j,styles:p}=i.useDropdownRender(),c=r.useRef(null);return t.useApplyStyle(c,Object.assign({[n.tokens.width]:`${d}px`},p)),e.jsx("div",Object.assign({className:n.calendarWrapper,"data-testid":"calendar-dropdown",ref:s.mergeRefs(o,c)},j(),{children:e.jsx(a.InternalCalendar,Object.assign({ref:l},u))}))}));exports.CalendarDropdown=l;
 //# sourceMappingURL=calendar-dropdown.js.map

package/cjs/shared/internal-calendar/calendar-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-dropdown.js","sources":["../../../../src/shared/internal-calendar/calendar-dropdown.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { mergeRefs } from \"../../util\";\nimport { useDropdownRender } from \"../dropdown-wrapper\";\nimport * as styles from \"./calendar-dropdown.styles\";\nimport { InternalCalendar } from \"./internal-calendar\";\nimport type { CalendarDropdownProps, InternalCalendarRef } from \"./types\";\n\nconst Component = (\n    props: CalendarDropdownProps,\n    ref: React.ForwardedRef<InternalCalendarRef>\n) => {\n    const {\n        elementWidth,\n        setFloatingRef,\n        getFloatingProps,\n        styles: positioningStyles,\n    } = useDropdownRender();\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.width]: `${elementWidth}px`,\n        ...positioningStyles,\n    });\n\n    return (\n        <div\n            className={styles.calendarWrapper}\n            data-testid=\"calendar-dropdown\"\n            ref={mergeRefs(setFloatingRef, wrapperRef)}\n            {...getFloatingProps()}\n        >\n            <InternalCalendar ref={ref} {...props} />\n        </div>\n    );\n};\n\nexport const CalendarDropdown = React.forwardRef(Component);\n"],"names":["CalendarDropdown","React","forwardRef","props","ref","elementWidth","setFloatingRef","getFloatingProps","styles","positioningStyles","useDropdownRender","wrapperRef","useRef","useApplyStyle","Object","assign","styles.tokens","width","_jsx","className","styles.calendarWrapper","mergeRefs","children","InternalCalendar"],"mappings":"40BASA,MA8BaA,OAAmBC,QAAMC,YA9BpB,CACdC,EACAC,KAEA,MAAMC,aACFA,EAAYC,eACZA,EAAcC,iBACdA,EACAC,OAAQC,GACRC,sBAEEC,EAAaC,EAAAA,OAAuB,MAO1C,OALAC,EAAAA,cAAcF,EAAUG,OAAAC,OAAA,CACpB,CAACC,EAAAA,OAAcC,OAAQ,GAAGZ,OACvBI,IAIHS,EAAAA,IAAA,MAAAJ,OAAAC,OAAA,CACII,UAAWC,kBAAsB,cACrB,oBACZhB,IAAKiB,EAAAA,UAAUf,EAAgBK,IAC3BJ,IAAkB,CAAAe,SAEtBJ,EAAAA,IAACK,EAAAA,iBAAgBT,OAAAC,OAAA,CAACX,IAAKA,GAASD,MAC9B"}
+{"version":3,"file":"calendar-dropdown.js","sources":["../../../../src/shared/internal-calendar/calendar-dropdown.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { mergeRefs } from \"../../util\";\nimport { useDropdownRender } from \"../dropdown-wrapper\";\nimport * as styles from \"./calendar-dropdown.styles\";\nimport { InternalCalendar } from \"./internal-calendar\";\nimport type { CalendarDropdownProps, InternalCalendarRef } from \"./types\";\n\nconst Component = (\n    props: CalendarDropdownProps,\n    ref: React.ForwardedRef<InternalCalendarRef>\n) => {\n    const {\n        elementWidth,\n        setFloatingRef,\n        getFloatingProps,\n        styles: positioningStyles,\n    } = useDropdownRender();\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.width]: `${elementWidth}px`,\n        ...positioningStyles,\n    });\n\n    return (\n        <div\n            className={styles.calendarWrapper}\n            data-testid=\"calendar-dropdown\"\n            ref={mergeRefs(setFloatingRef, wrapperRef)}\n            {...getFloatingProps()}\n        >\n            <InternalCalendar ref={ref} {...props} />\n        </div>\n    );\n};\n\nexport const CalendarDropdown = React.forwardRef(Component);\n"],"names":["CalendarDropdown","React","forwardRef","props","ref","elementWidth","setFloatingRef","getFloatingProps","styles","positioningStyles","useDropdownRender","wrapperRef","useRef","useApplyStyle","Object","assign","styles.tokens","width","_jsx","className","styles.calendarWrapper","mergeRefs","children","InternalCalendar"],"mappings":"43BASA,MA8BaA,OAAmBC,QAAMC,YA9BpB,CACdC,EACAC,KAEA,MAAMC,aACFA,EAAYC,eACZA,EAAcC,iBACdA,EACAC,OAAQC,GACRC,sBAEEC,EAAaC,EAAAA,OAAuB,MAO1C,OALAC,EAAAA,cAAcF,EAAUG,OAAAC,OAAA,CACpB,CAACC,EAAAA,OAAcC,OAAQ,GAAGZ,OACvBI,IAIHS,EAAAA,IAAA,MAAAJ,OAAAC,OAAA,CACII,UAAWC,kBAAsB,cACrB,oBACZhB,IAAKiB,EAAAA,UAAUf,EAAgBK,IAC3BJ,IAAkB,CAAAe,SAEtBJ,EAAAA,IAACK,EAAAA,iBAAgBT,OAAAC,OAAA,CAACX,IAAKA,GAASD,MAC9B"}

package/cjs/shared/progress-bar/progress-bar.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),s=require("react");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js");var t=require("../../theme/tokens/colour.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var u=require("../../theme/utils/use-apply-styles.js"),o=require("./progress-bar.styles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(r);exports.ProgressBar=({className:r,progress:a,colour:l,"data-testid":n})=>{const d=null!=l?l:t.Colour["icon-primary-subtle"],m=s.useRef(null);return u.useApplyStyle(m,{[o.tokens.barColour]:d,[o.tokens.barWidth]:100*a+"%"}),e.jsx("div",{className:i.default(o.bar,r),"data-testid":n,ref:m,children:e.jsx("progress",{value:100*a,max:100})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),s=require("react");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js");var t=require("../../theme/tokens/colour.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var u=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js");var i=require("./progress-bar.styles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=a(r);exports.ProgressBar=({className:r,progress:a,colour:l,"data-testid":n})=>{const m=null!=l?l:t.Colour["icon-primary-subtle"],d=s.useRef(null);return u.useApplyStyle(d,{[i.tokens.barColour]:m,[i.tokens.barWidth]:100*a+"%"}),e.jsx("div",{className:o.default(i.bar,r),"data-testid":n,ref:d,children:e.jsx("progress",{value:100*a,max:100})})};
 //# sourceMappingURL=progress-bar.js.map

package/cjs/shared/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sources":["../../../../src/shared/progress-bar/progress-bar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport type { ColourCSSVariableString } from \"../../theme\";\nimport { Colour, useApplyStyle } from \"../../theme\";\nimport * as styles from \"./progress-bar.styles\";\n\ninterface Props {\n    className?: string | undefined;\n    /** Progress from 0 to 1 */\n    progress: number;\n    colour?: string | ColourCSSVariableString | undefined;\n    \"data-testid\"?: string | undefined;\n}\n\nexport const ProgressBar = ({\n    className,\n    progress,\n    colour,\n    \"data-testid\": testId,\n}: Props) => {\n    const colourToUse = colour ?? Colour[\"icon-primary-subtle\"];\n\n    const barRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(barRef, {\n        [styles.tokens.barColour]: colourToUse,\n        [styles.tokens.barWidth]: `${progress * 100}%`,\n    });\n\n    return (\n        <div\n            className={clsx(styles.bar, className)}\n            data-testid={testId}\n            ref={barRef}\n        >\n            <progress value={progress * 100} max={100} />\n        </div>\n    );\n};\n"],"names":["className","progress","colour","testId","colourToUse","Colour","barRef","useRef","useApplyStyle","styles.tokens","barColour","barWidth","_jsx","clsx","styles.bar","ref","children","value","max"],"mappings":"kiBAe2B,EACvBA,YACAC,WAAQC,OACRA,EACA,cAAeC,MAEf,MAAMC,EAAcF,QAAAA,EAAUG,EAAAA,OAAO,uBAE/BC,EAASC,EAAAA,OAAuB,MAOtC,OALAC,EAAAA,cAAcF,EAAQ,CAClB,CAACG,EAAAA,OAAcC,WAAYN,EAC3B,CAACK,EAAAA,OAAcE,UAAyB,IAAXV,EAAH,MAI1BW,EAAAA,IAAA,MAAA,CACIZ,UAAWa,EAAAA,QAAKC,EAAAA,IAAYd,GAAU,cACzBG,EACbY,IAAKT,EAAMU,SAEXJ,EAAAA,IAAA,WAAA,CAAUK,MAAkB,IAAXhB,EAAgBiB,IAAK,OACpC"}
+{"version":3,"file":"progress-bar.js","sources":["../../../../src/shared/progress-bar/progress-bar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport type { ColourCSSVariableString } from \"../../theme\";\nimport { Colour, useApplyStyle } from \"../../theme\";\nimport * as styles from \"./progress-bar.styles\";\n\ninterface Props {\n    className?: string | undefined;\n    /** Progress from 0 to 1 */\n    progress: number;\n    colour?: string | ColourCSSVariableString | undefined;\n    \"data-testid\"?: string | undefined;\n}\n\nexport const ProgressBar = ({\n    className,\n    progress,\n    colour,\n    \"data-testid\": testId,\n}: Props) => {\n    const colourToUse = colour ?? Colour[\"icon-primary-subtle\"];\n\n    const barRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(barRef, {\n        [styles.tokens.barColour]: colourToUse,\n        [styles.tokens.barWidth]: `${progress * 100}%`,\n    });\n\n    return (\n        <div\n            className={clsx(styles.bar, className)}\n            data-testid={testId}\n            ref={barRef}\n        >\n            <progress value={progress * 100} max={100} />\n        </div>\n    );\n};\n"],"names":["className","progress","colour","testId","colourToUse","Colour","barRef","useRef","useApplyStyle","styles.tokens","barColour","barWidth","_jsx","clsx","styles.bar","ref","children","value","max"],"mappings":"slBAe2B,EACvBA,YACAC,WAAQC,OACRA,EACA,cAAeC,MAEf,MAAMC,EAAcF,QAAAA,EAAUG,EAAAA,OAAO,uBAE/BC,EAASC,EAAAA,OAAuB,MAOtC,OALAC,EAAAA,cAAcF,EAAQ,CAClB,CAACG,EAAAA,OAAcC,WAAYN,EAC3B,CAACK,EAAAA,OAAcE,UAAyB,IAAXV,EAAH,MAI1BW,EAAAA,IAAA,MAAA,CACIZ,UAAWa,EAAAA,QAAKC,EAAAA,IAAYd,GAAU,cACzBG,EACbY,IAAKT,EAAMU,SAEXJ,EAAAA,IAAA,WAAA,CAAUK,MAAkB,IAAXhB,EAAgBiB,IAAK,OACpC"}

package/cjs/shared/standalone-date-input/standalone-date-input.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),a=require("../../external/dayjs/dayjs.min.js"),n=require("../../external/dayjs/plugin/customParseFormat.js"),r=require("react");require("../../util/calendar-helper.js");var u=require("../../util/date-input-helper.js");require("../../util/simple-id-generator.js");var l=require("../../util/string-helper.js");require("@react-aria/live-announcer");var s=require("../../util/use-state-ref.js"),i=require("./standalone-date-input.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=o(t),c=o(r);a.default.extend(n.default);const p=({disabled:t,readOnly:n,names:o,value:c,focused:p,hoverValue:f,placeholder:v,label:m,onChange:h,onFocus:g,onBlur:x,hideInputKeyboard:y,inputLabels:b=["Date","Month","Year"]},j)=>{const I=y?"none":"numeric",[S,Y,D]=s.useStateRef(""),[M,q,H]=s.useStateRef(""),[N,C,B]=s.useStateRef(""),[R,$]=r.useState("none"),[k,z]=r.useState(!1),w=r.useRef(null),F=r.useRef(null),V=r.useRef(null),E=r.useRef(null),[L,O,K]=Q(f);r.useEffect((()=>{var e;const[t="",a="",n=""]=Q(c);Y(t),q(a),C(n),t||a||n||!w.current||!w.current.contains(document.activeElement)||null===(e=F.current)||void 0===e||e.focus()}),[c]),r.useEffect((()=>{var e;p||$("none"),p&&(z(!0),w.current&&!w.current.contains(document.activeElement)&&(null===(e=F.current)||void 0===e||e.focus()))}),[p]),r.useImperativeHandle(j,(()=>({ref:w,resetPlaceholder(){z(!1)},resetInput(){const[e="",t="",a=""]=Q(c);Y(e),q(t),C(a)},focusYearRef(){var e;null===(e=E.current)||void 0===e||e.focus()}})),[Y,q,C,c]);const P=e=>{var t;e.preventDefault(),null===(t=F.current)||void 0===t||t.focus()},T=e=>{e.target.select();const t=e.target.name;$(t)},A=e=>{const[t,n,r]=o,u={[t]:D.current,[n]:H.current,[r]:B.current},s=e.target.name,i=u[s],d=s!==r?l.StringHelper.padValue(i,!0):i;switch(s){case t:u[t]=d,Y(d);break;case n:u[n]=d,q(d)}const c=`${u[r]}-${u[n]}-${u[t]}`,p=a.default(c,"YYYY-MM-DD",!0).isValid(),f=!u[t]&&!u[n]&&!u[r];p&&i!==d&&h(c),w.current&&!w.current.contains(e.relatedTarget)&&($("none"),null==x||x(f||p))},G=e=>{var t,n;if(f)return;const r=e.target.name,u=e.target.value.replace(/[^0-9]/g,""),l={day:S,month:M,year:N};switch(r){case o[0]:l.day=u,Y(u),2===u.length&&(null===(t=V.current)||void 0===t||t.focus());break;case o[1]:l.month=u,q(u),2===u.length&&(null===(n=E.current)||void 0===n||n.focus());break;case o[2]:l.year=u,C(u)}if(!l.day&&!l.month&&!l.year)return void h("");const s=`${l.year}-${l.month}-${l.day}`;a.default(s,"YYYY-MM-DD",!0).isValid()&&h(s)},J=e=>{var t,a;"Backspace"!==e.code&&"Backspace"!==e.key||(R===o[1]&&0===M.length&&(null===(t=F.current)||void 0===t||t.focus()),R===o[2]&&0===N.length&&(null===(a=V.current)||void 0===a||a.focus()))};function Q(e){if(e){const t=u.DateInputHelper.sanitizeInput(e);if(!t)return[void 0,void 0,void 0];const n=a.default(t,"YYYY-MM-DD",!0);return[l.StringHelper.padValue(n.date().toString()),l.StringHelper.padValue((n.month()+1).toString()),n.year().toString()]}return[void 0,void 0,void 0]}return e.jsxs("div",{role:"group","aria-label":m,className:i.inputSection,onClick:()=>{var e;t||n||(z(!0),w.current&&!w.current.contains(document.activeElement)&&(null===(e=F.current)||void 0===e||e.focus()))},onFocus:e=>{t||(z(!0),p||null==g||g(e))},children:[e.jsxs("div",{ref:w,className:i.inputContainer,children:[e.jsx("span",{className:d.default(i.inputSizerBase,i.dayInputSizer),children:e.jsx("input",{ref:F,name:o[0],maxLength:2,value:null!=L?L:S,onFocus:T,onBlur:A,onChange:G,type:"text",inputMode:I,pattern:"[0-9]{2}","data-testid":`${o[0]}-input`,"aria-label":b[0],disabled:t,readOnly:n,tabIndex:n?-1:0,autoComplete:"off",placeholder:R!==o[0]||n?"DD":"",className:d.default(i.baseInput,!!f&&i.baseInputHover)})}),e.jsx("span",{className:d.default(i.divider,0===S.length&&i.dividerInactive,!!f&&i.dividerHover),children:"/"}),e.jsx("span",{className:d.default(i.inputSizerBase,i.monthInputSizer),children:e.jsx("input",{ref:V,name:o[1],maxLength:2,value:null!=O?O:M,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:I,pattern:"[0-9]{2}","data-testid":`${o[1]}-input`,"aria-label":b[1],disabled:t,readOnly:n,tabIndex:n?-1:0,autoComplete:"off",placeholder:R!==o[1]||n?"MM":"",className:d.default(i.baseInput,!!f&&i.baseInputHover)})}),e.jsx("span",{className:d.default(i.divider,0===M.length&&i.dividerInactive,!!f&&i.dividerHover),children:"/"}),e.jsx("span",{className:d.default(i.inputSizerBase,i.yearInputSizer),children:e.jsx("input",{ref:E,name:o[2],maxLength:4,value:null!=K?K:N,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:I,pattern:"[0-9]{4}","data-testid":`${o[2]}-input`,"aria-label":b[2],disabled:t,readOnly:n,tabIndex:n?-1:0,autoComplete:"off",placeholder:R!==o[2]||n?"YYYY":"",className:d.default(i.baseInput,!!f&&i.baseInputHover)})})]}),(()=>{if(!c&&!n&&v)return e.jsx("div",{className:d.default(i.placeholder,t&&i.placeholderDisabled,k&&i.placeholderHide),onMouseDown:P,children:v})})()]})},f=c.default.forwardRef(p);exports.Component=p,exports.StandaloneDateInput=f;
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),a=require("../../external/dayjs/dayjs.min.js"),n=require("../../external/dayjs/plugin/customParseFormat.js"),r=require("react");require("../../util/calendar-helper.js");var u=require("../../util/date-input-helper.js");require("../../util/simple-id-generator.js");var l=require("../../util/string-helper.js");require("@react-aria/live-announcer");var s=require("../../util/use-state-ref.js"),o=require("./standalone-date-input.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=i(t),c=i(r);a.default.extend(n.default);const p=({disabled:t,readOnly:n,names:i,value:c,focused:p,hoverValue:f,placeholder:v,label:m,onChange:h,onFocus:g,onBlur:x,hideInputKeyboard:y,inputLabels:b=["Date","Month","Year"]},j)=>{const S=y?"none":"numeric",[I,Y,D]=s.useStateRef(""),[M,q,H]=s.useStateRef(""),[N,C,B]=s.useStateRef(""),[R,$]=r.useState("none"),[k,z]=r.useState(!1),w=r.useRef(null),F=r.useRef(null),V=r.useRef(null),E=r.useRef(null),[L,O,K]=Q(f);r.useEffect((()=>{var e;const[t="",a="",n=""]=Q(c);Y(t),q(a),C(n),t||a||n||!w.current||!w.current.contains(document.activeElement)||null===(e=F.current)||void 0===e||e.focus()}),[c]),r.useEffect((()=>{var e;p||$("none"),p&&(z(!0),w.current&&!w.current.contains(document.activeElement)&&(null===(e=F.current)||void 0===e||e.focus()))}),[p]),r.useImperativeHandle(j,(()=>({ref:w,resetPlaceholder(){z(!1)},resetInput(){const[e="",t="",a=""]=Q(c);Y(e),q(t),C(a)},focusYearRef(){var e;null===(e=E.current)||void 0===e||e.focus()}})),[Y,q,C,c]);const P=e=>{var t;e.preventDefault(),null===(t=F.current)||void 0===t||t.focus()},T=e=>{e.target.select();const t=e.target.name;$(t)},A=e=>{const[t,n,r]=i,u={[t]:D.current,[n]:H.current,[r]:B.current},s=e.target.name,o=u[s],d=s!==r?l.StringHelper.padValue(o,!0):o;switch(s){case t:u[t]=d,Y(d);break;case n:u[n]=d,q(d)}const c=`${u[r]}-${u[n]}-${u[t]}`,p=a.default(c,"YYYY-MM-DD",!0).isValid(),f=!u[t]&&!u[n]&&!u[r];p&&o!==d&&h(c),w.current&&!w.current.contains(e.relatedTarget)&&($("none"),null==x||x(f||p))},G=e=>{var t,n;if(f)return;const r=e.target.name,u=e.target.value.replace(/[^0-9]/g,""),l={day:I,month:M,year:N};switch(r){case i[0]:l.day=u,Y(u),2===u.length&&(null===(t=V.current)||void 0===t||t.focus());break;case i[1]:l.month=u,q(u),2===u.length&&(null===(n=E.current)||void 0===n||n.focus());break;case i[2]:l.year=u,C(u)}if(!l.day&&!l.month&&!l.year)return void h("");const s=`${l.year}-${l.month}-${l.day}`;a.default(s,"YYYY-MM-DD",!0).isValid()&&h(s)},J=e=>{var t,a;"Backspace"!==e.code&&"Backspace"!==e.key||(R===i[1]&&0===M.length&&(null===(t=F.current)||void 0===t||t.focus()),R===i[2]&&0===N.length&&(null===(a=V.current)||void 0===a||a.focus()))};function Q(e){if(e){const t=u.DateInputHelper.sanitizeInput(e);if(!t)return[void 0,void 0,void 0];const n=a.default(t,"YYYY-MM-DD",!0);return[l.StringHelper.padValue(n.date().toString()),l.StringHelper.padValue((n.month()+1).toString()),n.year().toString()]}return[void 0,void 0,void 0]}return e.jsxs("div",{role:"group","aria-label":m,className:o.inputSection,onClick:()=>{var e;t||n||(z(!0),w.current&&!w.current.contains(document.activeElement)&&(null===(e=F.current)||void 0===e||e.focus()))},onFocus:e=>{t||(z(!0),p||null==g||g(e))},children:[e.jsxs("div",{ref:w,className:o.inputContainer,children:[e.jsx("span",{className:d.default(o.inputSizerBase,o.dayInputSizer),children:e.jsx("input",{ref:F,name:i[0],maxLength:2,value:null!=L?L:I,onFocus:T,onBlur:A,onChange:G,type:"text",inputMode:S,pattern:"[0-9]{2}","data-testid":`${i[0]}-input`,"aria-label":b[0],disabled:t,readOnly:n,tabIndex:n?-1:0,autoComplete:"off",placeholder:R!==i[0]||n?"DD":"",className:d.default(o.baseInput,!!f&&o.baseInputHover)})}),e.jsx("span",{className:d.default(o.divider,!!f&&o.dividerHover),children:"/"}),e.jsx("span",{className:d.default(o.inputSizerBase,o.monthInputSizer),children:e.jsx("input",{ref:V,name:i[1],maxLength:2,value:null!=O?O:M,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:S,pattern:"[0-9]{2}","data-testid":`${i[1]}-input`,"aria-label":b[1],disabled:t,readOnly:n,tabIndex:n?-1:0,autoComplete:"off",placeholder:R!==i[1]||n?"MM":"",className:d.default(o.baseInput,!!f&&o.baseInputHover)})}),e.jsx("span",{className:d.default(o.divider,!!f&&o.dividerHover),children:"/"}),e.jsx("span",{className:d.default(o.inputSizerBase,o.yearInputSizer),children:e.jsx("input",{ref:E,name:i[2],maxLength:4,value:null!=K?K:N,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:S,pattern:"[0-9]{4}","data-testid":`${i[2]}-input`,"aria-label":b[2],disabled:t,readOnly:n,tabIndex:n?-1:0,autoComplete:"off",placeholder:R!==i[2]||n?"YYYY":"",className:d.default(o.baseInput,!!f&&o.baseInputHover)})})]}),(()=>{if(!c&&!n&&v)return e.jsx("div",{className:d.default(o.placeholder,t&&o.placeholderDisabled,k&&o.placeholderHide),onMouseDown:P,children:v})})()]})},f=c.default.forwardRef(p);exports.Component=p,exports.StandaloneDateInput=f;
 //# sourceMappingURL=standalone-date-input.js.map