npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.2 → 4.0.0-alpha.4 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2426) hide show

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

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

package/shared/dropdown-wrapper/dropdown-wrapper.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./dropdown-wrapper.styles_v10jbi.css";const p="l9c71lq",r="vlxe5wy",o="p3mumjy";export{p as labelContainer,o as placeholderLabel,r as valueLabel};
+import"./dropdown-wrapper.styles_15hwwoj.css";const p="l9c71lq",r="vlxe5wy",o="p3mumjy";export{p as labelContainer,o as placeholderLabel,r as valueLabel};
 //# sourceMappingURL=dropdown-wrapper.styles.js.map

package/shared/dropdown-wrapper/dropdown-wrapper.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-wrapper.styles.js","sources":["../../../src/shared/dropdown-wrapper/dropdown-wrapper.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../../theme\";\nimport { lineClampCss } from \"../styles\";\n\nexport const labelContainer = css`\n display: flex;\n flex: 1;\n word-break: break-all;\n\n &[data-disabled=\"true\"] {\n color: ${Colour[\"text-disabled\"]};\n }\n`;\n\nexport const valueLabel = css`\n ${Font[\"body-baseline-regular\"]}\n text-align: left;\n overflow: hidden;\n\n &[data-variant=\"small\"] {\n ${Font[\"body-md-regular\"]}\n }\n\n &:not([data-truncate=\"middle\"]) {\n ${lineClampCss(1)}\n }\n`;\n\nexport const placeholderLabel = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["labelContainer","valueLabel","placeholderLabel"],"mappings":"~~oFAKO~~,MAAMA,EAAc,UAUdC,EAAU,~~UAcVC~~,EAAgB"}
1	+ {"version":3,"file":"dropdown-wrapper.styles.js","sources":["../../../src/shared/dropdown-wrapper/dropdown-wrapper.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../../theme\";\nimport { lineClampCss } from \"../styles\";\n\nexport const labelContainer = css`\n display: flex;\n flex: 1;\n word-break: break-all;\n\n &[data-disabled=\"true\"] {\n color: ${Colour[\"text-disabled\"]};\n }\n`;\n\nexport const valueLabel = css`\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n text-align: left;\n overflow: hidden;\n\n &[data-variant=\"small\"] {\n ${Font[\"body-md-regular\"]}\n }\n\n &:not([data-truncate=\"middle\"]) {\n ${lineClampCss(1)}\n }\n`;\n\nexport const placeholderLabel = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["labelContainer","valueLabel","placeholderLabel"],"mappings":"qFAKO,MAAMA,EAAc,UAUdC,EAAU,UAeVC,EAAgB"}

package/shared/dropdown-wrapper/dropdown-wrapper.styles_15hwwoj.css ADDED Viewed

@@ -0,0 +1,3 @@
+.l9c71lq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;word-break:break-all;}.l9c71lq[data-disabled="true"]{color:var(--fds-colour-text-disabled);}
+.vlxe5wy{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);text-align:left;overflow:hidden;}.vlxe5wy[data-variant="small"]{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}.vlxe5wy:not([data-truncate="middle"]){display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
+.p3mumjy{color:var(--fds-colour-text-subtler);}

package/shared/dropdown-wrapper/element-with-dropdown.js CHANGED Viewed

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

package/shared/dropdown-wrapper/element-with-dropdown.js.map CHANGED Viewed

	@@ -1 +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","useDropdownRender","useContext","ElementWithDropdown","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"],"mappings":"2vCAqEA,MAAMA,EAAwBC,GAEjB,UADDA,EAEO,aAGA,eAMNC,EAAwBC,EAAmC,CACpEC,aAAc,EACdC,OAAQ,CAAA,EACRC,eAAgB,OAGhBC,iBAAkB,KAAA,CAAS,KAGlBC,EAAoB,IACtBC,EAAWP,GAiCTQ,EAAsB,EAC/BC,UACAC,SACAC,SACAC,UACAC,YACAC,gBACAC,iBACAC,eACAC,iBAAgB,EAChBC,OAAQC,EAAiB,EACzBpB,YAAY,OACZqB,qBACAC,WACAC,wBAKA,MAAMC,EAAmBC,EAAeC,EAAW,WAC7CC,EAAWC,EAA0BJ,GACrCK,EAAaC,EAA8B,OACzCC,MAAOC,EAAiB,GAAMC,EAAkB,CACpDC,UAAWX,QAAAA,EAAeM,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,EAAY,CAClDC,KAAMrC,EACNsC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACArC,SAAAA,IACOkC,IAASrC,EAChBC,SAAAA,KACQoC,GAAQrC,IAChBE,SAAAA,EAAUsC,GACd,EAEJC,qBAAsBC,EACtBC,UAAWvD,EAAqBC,GAChCuD,WAAY,CACRpC,EAAOC,GACPoC,IACAC,EAAM,CACFC,QAASC,MAEbC,EAAK,CAED,KAAAC,EAAMC,gBAAEA,EAAeC,SAAEA,KAEhB1C,GACDyC,GAAmBC,EAAStB,SAASuB,aAGrCD,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,IAKRC,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,GAAGM,KAAKC,IAAI,EAAGP,OAEvB,IAEJ1B,KAGFkC,EAAeC,KAEfC,UAAEA,EAASpE,OAAEA,GAAWqE,EAAoB3B,EAAS,CACvD4B,QAAS,CAAEC,QAAS,GACpB3B,KAAM,CAAE2B,QAAS,GACjBC,SAAU,OAERC,WAAEA,EAAUC,WAAEA,GAAeC,EAAuBP,GAEpDQ,GAAQC,EAASnC,EAAS,CAC5BpC,UACAwE,OAAQhE,EACRiE,iBAAkBjE,IAEhBkE,GAAUC,EAAWvC,EAAS,CAAEpC,aAEhC4E,kBAAEA,GAAiBhF,iBAAEA,IAAqBiF,EAAgB,CAC5DP,GACAI,KAMEI,GAAsB,CACxBrF,aAAc6B,EACd5B,oDACOA,GACAyC,GAAc,CACjB4C,OAAoC,QAA5BC,EAAAzE,QAAAA,EAAgBqD,SAAY,IAAAoB,EAAAA,EA5JxB,KA8JhBrF,eAAgBuC,EAAK+C,YACrBrF,qBAGJ,OACIsF,eACIC,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFpE,EAAWqE,QAAUD,EACrBrD,EAAKuD,aAAaF,EAAK,GAEvBX,KAAmB,CAAAc,SAEtBrF,OAEJyD,GACGqB,EAACQ,EAAc,CAACC,KAAMhF,EAAQ8E,SAC1BP,EAACU,EAAoB,CACjBzD,QAASA,EACT0D,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAAC5F,EAAsB0G,SAAQ,CAC3BC,MAAOpB,YAEPK,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASlB,EAAU,CAAEZ,MAAOa,EAAUsB,SACjCpF,EAAewE,eAMrC"}
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 { 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","useDropdownRender","useContext","ElementWithDropdown","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"],"mappings":"snCAgEA,MAAMA,EAAwBC,GAEjB,UADDA,EAEO,aAGA,eAMNC,EAAwBC,EAAmC,CACpEC,aAAc,EACdC,OAAQ,CAAA,EACRC,eAAgB,OAGhBC,iBAAkB,KAAA,CAAS,KAGlBC,EAAoB,IACtBC,EAAWP,GAiCTQ,EAAsB,EAC/BC,UACAC,SACAC,SACAC,UACAC,YACAC,gBACAC,iBACAC,eACAC,iBAAgB,EAChBC,OAAQC,EAAiB,EACzBpB,YAAY,OACZqB,qBACAC,WACAC,wBAKA,MAAMC,EAAWC,EAAsB,MACjCC,EAAaC,EAA8B,OACzCC,MAAOC,EAAiB,GAAMC,EAAkB,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,EAAY,CAClDC,KAAMlC,EACNmC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACAlC,SAAAA,IACO+B,IAASlC,EAChBC,SAAAA,KACQiC,GAAQlC,IAChBE,SAAAA,EAAUmC,GACd,EAEJC,qBAAsBC,EACtBC,UAAWpD,EAAqBC,GAChCoD,WAAY,CACRjC,EAAOC,GACPiC,IACAC,EAAM,CACFC,QAASC,MAEbC,EAAK,CAED,KAAAC,EAAMC,gBAAEA,EAAeC,SAAEA,KAEhBvC,GACDsC,GAAmBC,EAAStB,SAASuB,aAGrCD,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,IAKRC,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,GAAGM,KAAKC,IAAI,EAAGP,OAEvB,IAEJ1B,KAGFkC,EAAeC,KAEfC,UAAEA,EAASjE,OAAEA,GAAWkE,EAAoB3B,EAAS,CACvD4B,QAAS,CAAEC,QAAS,GACpB3B,KAAM,CAAE2B,QAAS,GACjBC,SAAU,OAERC,WAAEA,EAAUC,WAAEA,GAAeC,EAAuBP,GAEpDQ,EAAQC,EAASnC,EAAS,CAC5BjC,UACAqE,OAAQ7D,EACR8D,iBAAkB9D,IAEhB+D,EAAUC,EAAWvC,EAAS,CAAEjC,aAEhCyE,kBAAEA,EAAiB7E,iBAAEA,IAAqB8E,EAAgB,CAC5DP,EACAI,IAMEI,GAAsB,CACxBlF,aAAc0B,EACdzB,oDACOA,GACAsC,GAAc,CACjB4C,OAAoC,QAA5BC,EAAAtE,QAAAA,EAAgBkD,SAAY,IAAAoB,EAAAA,EA3JxB,KA6JhBlF,eAAgBoC,EAAK+C,YACrBlF,qBAGJ,OACImF,eACIC,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFpE,EAAWqE,QAAUD,EACrBrD,EAAKuD,aAAaF,EAAK,GAEvBX,IAAmB,CAAAc,SAEtBlF,OAEJsD,GACGqB,EAACQ,EAAc,CAACC,KAAM7E,EAAQ2E,SAC1BP,EAACU,EAAoB,CACjBzD,QAASA,EACT0D,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAACzF,EAAsBuG,SAAQ,CAC3BC,MAAOpB,YAEPK,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASlB,EAAU,CAAEZ,MAAOa,EAAUsB,SACjCjF,EAAeqE,eAMrC"}

package/shared/fade-wrapper/fade-wrapper.js CHANGED Viewed

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

package/shared/fade-wrapper/fade-wrapper.js.map CHANGED Viewed

	@@ -1 +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":"~~4pCAsBA~~,MA0LaA,EAAcC,GA1LT,CACdC,EASAC,SATAC,SACIA,EAAQC,UACRA,EAASC,UACTA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQP,EACLQ,EAAUC,EAAAT,EAPjB,gFAcA,MAAOU,EAAcC,GAAmBC,EACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAuB,MACpCC,EAAaD,EAAuB,MACpCE,EAAcF,EAAuB,MACrCG,EAAeH,EAAuB,MAEtCI,EAAeC,EAAgBjB,GAErCkB,EAAcJ,EAAa,CACvB,CAACK,EAAcC,iBAAkBC,EAC7BL,EAAaM,KACbpB,KAGRgB,EAAcH,EAAc,CACxB,CAACI,EAAcC,iBAAkBC,EAC7BL,EAAaO,MACbrB,KAKRsB,EAAkB,CACdrB,SAAUsB,EACVC,UAAWf,EACXgB,YAAa,WACbC,YAAa,KAGjBC,EAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIL,GACJ,MAOR,MAAMM,EAAeC,GAAY,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,GAAQ,IAC5BC,EAASZ,EAAc,KAC/B,CAACA,IAwBJ,SAASN,IACLM,IAEI5B,GACAA,EAAS,CACLgC,QAAStB,EAAWqB,QACpBD,QAAStB,EAAWuB,SAQhC,CApCAU,GAAU,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,EAAA,MAAAC,OAAAC,OAAA,CACIrD,IAAKc,EACLZ,UAAWoD,EAAKC,EAAgBrD,IAC5BK,EAAU,CAAAN,SAAA,CAEduD,EAAA,MAAA,CAAKxD,IAAKgB,EAAYd,UAAWuD,EAAcxD,SAC1CA,IAlDLkD,eACK1C,GACG+C,EAAA,MAAA,CACIxD,IAAKiB,EACLf,UAAWoD,EAAKI,EAAaC,GAAgB,UACrC,YAAW1D,SAElBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAC,GACH,UACO,6BAA4B7D,SAEpCuD,EAACO,EAAe,CAAA,OAK/BnD,GACG4C,EAAA,MAAA,CACIxD,IAAKkB,EACLhB,UAAWoD,EAAKI,EAAaM,aACrB,aAAY/D,SAEnBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAI,aAEI,8BAA6BhE,SAErCuD,EAACU,EAAgB,CAAA,aAmBnC"}
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":"ysCAsBA,MA0LaA,EAAcC,GA1LT,CACdC,EASAC,SATAC,SACIA,EAAQC,UACRA,EAASC,UACTA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQP,EACLQ,EAAUC,EAAAT,EAPjB,gFAcA,MAAOU,EAAcC,GAAmBC,EACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAuB,MACpCC,EAAaD,EAAuB,MACpCE,EAAcF,EAAuB,MACrCG,EAAeH,EAAuB,MAEtCI,EAAeC,EAAgBjB,GAErCkB,EAAcJ,EAAa,CACvB,CAACK,EAAcC,iBAAkBC,EAC7BL,EAAaM,KACbpB,KAGRgB,EAAcH,EAAc,CACxB,CAACI,EAAcC,iBAAkBC,EAC7BL,EAAaO,MACbrB,KAKRsB,EAAkB,CACdrB,SAAUsB,EACVC,UAAWf,EACXgB,YAAa,WACbC,YAAa,KAGjBC,EAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIL,GACJ,MAOR,MAAMM,EAAeC,GAAY,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,GAAQ,IAC5BC,EAASZ,EAAc,KAC/B,CAACA,IAwBJ,SAASN,IACLM,IAEI5B,GACAA,EAAS,CACLgC,QAAStB,EAAWqB,QACpBD,QAAStB,EAAWuB,SAQhC,CApCAU,GAAU,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,EAAA,MAAAC,OAAAC,OAAA,CACIrD,IAAKc,EACLZ,UAAWoD,EAAKC,EAAgBrD,IAC5BK,EAAU,CAAAN,SAAA,CAEduD,EAAA,MAAA,CAAKxD,IAAKgB,EAAYd,UAAWuD,EAAcxD,SAC1CA,IAlDLkD,eACK1C,GACG+C,EAAA,MAAA,CACIxD,IAAKiB,EACLf,UAAWoD,EAAKI,EAAaC,GAAgB,UACrC,YAAW1D,SAElBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAC,GACH,UACO,6BAA4B7D,SAEpCuD,EAACO,EAAe,CAAA,OAK/BnD,GACG4C,EAAA,MAAA,CACIxD,IAAKkB,EACLhB,UAAWoD,EAAKI,EAAaM,aACrB,aAAY/D,SAEnBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAI,aAEI,8BAA6BhE,SAErCuD,EAACU,EAAgB,CAAA,aAmBnC"}

package/shared/fade-wrapper/helpers.js CHANGED Viewed

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

package/shared/fade-wrapper/helpers.js.map CHANGED Viewed

	@@ -1 +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":["getFadeColorSet","fadeColor","Array","isArray","length","left","right","undefined","getFadeBackgroundColorValue","color","showIndicator","join","Colour","bg"],"mappings":"~~idAGM~~,SAAUA,EACZC,GAEA,OAAIC,MAAMC,QAAQF,IAAcA,EAAUG,OAAS,EACxC,CACHC,KAAMJ,EACNK,MAAOL,GAIXA,GAIG,CACHI,UAAME,EACND,WAAOC,EAEf,CAEM,SAAUC,EACZC,EACAC,GAEA,OAAID,GAASA,EAAML,OAAS,EACjBK,EAAME,KAAK,MAGlBD,EACO,GAAGE,EAAOC,OAAOD,EAAOC,KAG5B,IACX"}
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":["getFadeColorSet","fadeColor","Array","isArray","length","left","right","undefined","getFadeBackgroundColorValue","color","showIndicator","join","Colour","bg"],"mappings":"8fAGM,SAAUA,EACZC,GAEA,OAAIC,MAAMC,QAAQF,IAAcA,EAAUG,OAAS,EACxC,CACHC,KAAMJ,EACNK,MAAOL,GAIXA,GAIG,CACHI,UAAME,EACND,WAAOC,EAEf,CAEM,SAAUC,EACZC,EACAC,GAEA,OAAID,GAASA,EAAML,OAAS,EACjBK,EAAME,KAAK,MAGlBD,EACO,GAAGE,EAAOC,OAAOD,EAAOC,KAG5B,IACX"}

package/shared/hooks/useViewport.d.ts CHANGED Viewed

@@ -1,4 +1,9 @@
-export declare const useViewport: () => {
+interface UseViewportProps {
+    enabled?: boolean;
+    onBeforeStart?: () => void;
+}
+export declare const useViewport: ({ enabled, onBeforeStart, }?: UseViewportProps) => {
     verticalHeight: number | undefined;
-    offsetTop: number | undefined;
+    ready: boolean;
 };
+export {};

package/shared/hooks/useViewport.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from"../../external/lodash/throttle.js";import{useState as i,useCallback as o,useEffect as t}from"react";const r=()=>{const[r,n]=i(),[w,s]=i(),v=o((()=>{const e=.01*window.innerHeight;n(e)}),[]),d=o((()=>{if(window.visualViewport){const e=.01*window.visualViewport.height;n(e),s(window.visualViewport.offsetTop)}}),[]);return t((()=>{if(window.visualViewport){const i=e(d,300);return d(),window.visualViewport.addEventListener("resize",d),window.visualViewport.addEventListener("scroll",i),()=>{var e,o;null===(e=window.visualViewport)||void 0===e||e.removeEventListener("resize",d),null===(o=window.visualViewport)||void 0===o||o.removeEventListener("scroll",i)}}return v(),window.addEventListener("resize",v),()=>{window.removeEventListener("resize",v)}}),[]),{verticalHeight:r,offsetTop:w}};export{r as useViewport};
+import{useState as e,useRef as r,useEffect as n,useCallback as i}from"react";const t=({enabled:t=!1,onBeforeStart:o}={})=>{const[u,w]=e(),[l,a]=e(!1),s=r([]),c=r(null),d=r(!1),v=r(o);n((()=>{v.current=o}),[o]);const h=i((()=>{const e=.01*window.innerHeight;w(e)}),[]),p=i((()=>{if(window.visualViewport){const e=.01*window.visualViewport.height;w(e)}}),[]);return n((()=>window.visualViewport?(p(),window.visualViewport.addEventListener("resize",p),()=>{var e;null===(e=window.visualViewport)||void 0===e||e.removeEventListener("resize",p)}):(h(),window.addEventListener("resize",h),()=>{window.removeEventListener("resize",h)})),[p,h]),n((()=>{var e;const r=e=>{s.current.push(requestAnimationFrame(e))},n=()=>{s.current.forEach((e=>cancelAnimationFrame(e))),s.current=[],null!==c.current&&(clearTimeout(c.current),c.current=null),d.current=!1},i=()=>{d.current||(d.current=!0,a(!0))};return n(),a(!1),t?(null===(e=v.current)||void 0===e||e.call(v),window.visualViewport?((()=>{var e,n;let t=null!==(n=null===(e=window.visualViewport)||void 0===e?void 0:e.height)&&void 0!==n?n:window.innerHeight,o=0;const u=()=>{var e,n;const w=null!==(n=null===(e=window.visualViewport)||void 0===e?void 0:e.height)&&void 0!==n?n:window.innerHeight;Math.abs(w-t)<.5?o+=1:(o=0,t=w),o>=2?i():r(u)};r(u)})(),c.current=setTimeout(i,180),n):(r(i),n)):n}),[t]),{verticalHeight:u,ready:l}};export{t as useViewport};
 //# sourceMappingURL=useViewport.js.map

package/shared/hooks/useViewport.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useViewport.js","sources":["../../../src/shared/hooks/useViewport.tsx"],"sourcesContent":["import ~~throttle from \"lodash/throttle\";\nimport~~ { useCallback, useEffect, useState } from \"react\";\n\nexport const useViewport = () => {\n const [verticalHeight, setVerticalHeight] = useState<number>();\n const [~~offsetTop~~, ~~setOffsetTop~~] = useState<number>();\n\n // ~~=============================================================================\~~n // ~~EVENT~~ ~~HANDLERS~~\n // ~~=============================================================================\~~n const handleWindowResize = useCallback(() => {\n const newVerticalHeight = window.innerHeight * 0.01;\n setVerticalHeight(newVerticalHeight);\n }, []);\n\n const handleViewportResize = useCallback(() => {\n if (window.visualViewport) {\n const newVerticalHeight = window.visualViewport.height * 0.01;\n setVerticalHeight(newVerticalHeight);\n ~~setOffsetTop(window.visualViewport.offsetTop);\n~~ }\n }, []);\n\n useEffect(() => {\n // set initial vh\n\n // use VisualViewport API if available, it gives more accurate dimensions when iOS software keyboard is active\n if (window.visualViewport) {\n ~~const handleViewportScroll = throttle(~~handleViewportResize~~, 300);\n handleViewportResize~~();\n window.visualViewport.addEventListener(\n \"resize\",\n handleViewportResize\n );\n window.visualViewport~~.addEventListener~~(\n \"~~scroll~~\",\n ~~handleViewportScroll~~\n );\n\n return () => {\n window.~~visualViewport?.~~removeEventListener(\~~n \~~"resize\",\n handleViewportResize\n );\n ~~window~~.~~visualViewport?.removeEventListener~~(\n \~~"scroll~~\~~",\~~n ~~handleViewportScroll~~\n );\n };\n } ~~else~~ {\n // ~~fallback~~ to ~~Window~~ ~~API\~~n ~~handleWindowResize~~();\n window.~~addEventListener(\"resize\",~~ ~~handleWindowResize)~~;\n ~~return~~ () => {\n window.~~removeEventListener~~(\~~"resize~~\", ~~handleWindowResize~~);\n };\n }\n }, []);\n\n return {\n verticalHeight,\n ~~offsetTop~~,\n };\n};\n"],"names":["useViewport","verticalHeight","setVerticalHeight","useState","~~offsetTop~~","~~setOffsetTop~~","handleWindowResize","useCallback","newVerticalHeight","window","innerHeight","handleViewportResize","visualViewport","height","~~useEffect~~","~~handleViewportScroll~~","~~throttle~~","~~addEventListener~~","_a","~~removeEventListener~~","_b"],"mappings":"~~kHAGO~~,~~MAAMA~~,EAAc,~~KACvB~~,MAAOC,EAAgBC,GAAqBC,KACrCC,~~EAAWC~~,~~GAAgBF~~,~~IAK5BG~~,EAAqBC,GAAY,KACnC,MAAMC,EAAyC,IAArBC,OAAOC,~~YACjCR~~,~~EAAkBM~~,EAAkB,GACrC,IAEGG,EAAuBJ,GAAY,KACrC,GAAIE,OAAOG,eAAgB,CACvB,MAAMJ,EAAmD,IAA/BC,OAAOG,eAAeC,~~OAChDX~~,~~EAAkBM~~,~~GAClBH~~,~~EAAaI~~,OAAOG,~~eAAeR~~,~~UACvC~~,~~IACD~~,~~IAsCH~~,~~OApCAU~~,~~GAAU~~,~~KAIN~~,~~GAAIL~~,OAAOG,~~eAAgB~~,~~CACvB~~,~~MAAMG~~,~~EAAuBC~~,~~EAASL~~,~~EAAsB~~,~~KAW5D~~,~~OAVAA~~,~~IACAF~~,~~OAAOG~~,~~eAAeK~~,~~iBAClB~~,~~SACAN~~,~~GAEJF~~,OAAOG,~~eAAeK~~,~~iBAClB~~,~~SACAF~~,~~GAGG~~,~~aACkB~~,~~QAArBG~~,~~EAAAT~~,OAAOG,sBAAc,~~IAAAM~~,~~GAAAA~~,~~EAAEC~~,~~oBACnB~~,~~SACAR~~,~~GAEiB~~,~~QAArBS~~,~~EAAAX~~,OAAOG,sBAAc,~~IAAAQ~~,~~GAAAA~~,~~EAAED~~,~~oBACnB~~,~~SACAJ~~,~~EACH~~,~~CAET~~,~~CAII~~,~~OAFAT~~,~~IACAG~~,~~OAAOQ~~,~~iBAAiB~~,~~SAAUX~~,~~GAC3B~~,~~KACHG~~,~~OAAOU~~,~~oBAAoB~~,~~SAAUb~~,~~EAAmB~~,~~CAEhE~~,~~GACD~~,~~IAEI~~,~~CACHL~~,iBACAG,~~YACH~~"}
1	+ {"version":3,"file":"useViewport.js","sources":["../../../src/shared/hooks/useViewport.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nconst STABLE_FRAMES = 2;\nconst HEIGHT_OFFSET = 0.5;\n// This 180 ms duration is chosen to align with the mobile Chrome/keyboard animation (150–300 ms range) and the modal’s entrance `transition-delay` (200 ms) before we force it into the `ready` state.\nconst FALLBACK_TIME = 180;\n\ninterface UseViewportProps {\n enabled?: boolean;\n onBeforeStart?: () => void;\n}\n\nexport const useViewport = ({\n enabled = false,\n onBeforeStart,\n}: UseViewportProps = {}) => {\n const [verticalHeight, setVerticalHeight] = useState<number>();\n const [ready, setReady] = useState(false);\n const pendingFramesRef = useRef<number[]>([]);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const hasResolvedRef = useRef(false);\n const onBeforeStartRef = useRef(onBeforeStart);\n\n useEffect(() => {\n onBeforeStartRef.current = onBeforeStart;\n }, [onBeforeStart]);\n\n const handleWindowResize = useCallback(() => {\n const newVerticalHeight = window.innerHeight * 0.01;\n setVerticalHeight(newVerticalHeight);\n }, []);\n\n const handleViewportResize = useCallback(() => {\n if (window.visualViewport) {\n const newVerticalHeight = window.visualViewport.height * 0.01;\n setVerticalHeight(newVerticalHeight);\n }\n }, []);\n\n useEffect(() => {\n // set initial vh\n\n // use VisualViewport API if available, it gives more accurate dimensions when iOS software keyboard is active\n if (window.visualViewport) {\n handleViewportResize();\n window.visualViewport.addEventListener(\n \"resize\",\n handleViewportResize\n );\n return () => {\n window.visualViewport?.removeEventListener(\n \"resize\",\n handleViewportResize\n );\n };\n }\n\n handleWindowResize();\n window.addEventListener(\"resize\", handleWindowResize);\n return () => {\n window.removeEventListener(\"resize\", handleWindowResize);\n };\n }, [handleViewportResize, handleWindowResize]);\n\n useEffect(() => {\n const scheduleFrame = (fn: FrameRequestCallback) => {\n pendingFramesRef.current.push(requestAnimationFrame(fn));\n };\n\n const clearPending = () => {\n pendingFramesRef.current.forEach((id) => cancelAnimationFrame(id));\n pendingFramesRef.current = [];\n\n if (timeoutRef.current !== null) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n\n hasResolvedRef.current = false;\n };\n\n const resolve = () => {\n if (hasResolvedRef.current) {\n return;\n }\n hasResolvedRef.current = true;\n setReady(true);\n };\n // Compare the viewport height across consecutive frames;\n // once it remains stable for at least 2 frames, trigger the modal animation\n const waitForStableViewport = () => {\n let lastHeight =\n window.visualViewport?.height ?? window.innerHeight;\n let stableFrames = 0;\n\n const checkViewportStability = () => {\n const currentHeight =\n window.visualViewport?.height ?? window.innerHeight;\n // Use a small offset to account for fluctuations in reported height\n // even when the viewport hasn’t actually changed\n if (Math.abs(currentHeight - lastHeight) < HEIGHT_OFFSET) {\n stableFrames += 1;\n } else {\n stableFrames = 0;\n lastHeight = currentHeight;\n }\n\n if (stableFrames >= STABLE_FRAMES) {\n resolve();\n return;\n }\n\n scheduleFrame(checkViewportStability);\n };\n\n scheduleFrame(checkViewportStability);\n };\n\n clearPending();\n setReady(false);\n\n if (!enabled) {\n return clearPending;\n }\n\n onBeforeStartRef.current?.();\n\n if (!window.visualViewport) {\n scheduleFrame(resolve);\n return clearPending;\n }\n\n waitForStableViewport();\n timeoutRef.current = setTimeout(resolve, FALLBACK_TIME);\n\n return clearPending;\n }, [enabled]);\n\n return {\n verticalHeight,\n ready,\n };\n};\n"],"names":["useViewport","enabled","onBeforeStart","verticalHeight","setVerticalHeight","useState","ready","setReady","pendingFramesRef","useRef","timeoutRef","hasResolvedRef","onBeforeStartRef","useEffect","current","handleWindowResize","useCallback","newVerticalHeight","window","innerHeight","handleViewportResize","visualViewport","height","addEventListener","_a","removeEventListener","scheduleFrame","fn","push","requestAnimationFrame","clearPending","forEach","id","cancelAnimationFrame","clearTimeout","resolve","call","lastHeight","_b","stableFrames","checkViewportStability","currentHeight","Math","abs","waitForStableViewport","setTimeout"],"mappings":"6EAEA,MAUaA,EAAc,EACvBC,WAAU,EACVC,iBACkB,CAAA,KAClB,MAAOC,EAAgBC,GAAqBC,KACrCC,EAAOC,GAAYF,GAAS,GAC7BG,EAAmBC,EAAiB,IACpCC,EAAaD,EAA6C,MAC1DE,EAAiBF,GAAO,GACxBG,EAAmBH,EAAOP,GAEhCW,GAAU,KACND,EAAiBE,QAAUZ,CAAa,GACzC,CAACA,IAEJ,MAAMa,EAAqBC,GAAY,KACnC,MAAMC,EAAyC,IAArBC,OAAOC,YACjCf,EAAkBa,EAAkB,GACrC,IAEGG,EAAuBJ,GAAY,KACrC,GAAIE,OAAOG,eAAgB,CACvB,MAAMJ,EAAmD,IAA/BC,OAAOG,eAAeC,OAChDlB,EAAkBa,EACtB,IACD,IAqGH,OAnGAJ,GAAU,IAIFK,OAAOG,gBACPD,IACAF,OAAOG,eAAeE,iBAClB,SACAH,GAEG,WACkB,QAArBI,EAAAN,OAAOG,sBAAc,IAAAG,GAAAA,EAAEC,oBACnB,SACAL,EACH,IAITL,IACAG,OAAOK,iBAAiB,SAAUR,GAC3B,KACHG,OAAOO,oBAAoB,SAAUV,EAAmB,IAE7D,CAACK,EAAsBL,IAE1BF,GAAU,WACN,MAAMa,EAAiBC,IACnBnB,EAAiBM,QAAQc,KAAKC,sBAAsBF,GAAI,EAGtDG,EAAe,KACjBtB,EAAiBM,QAAQiB,SAASC,GAAOC,qBAAqBD,KAC9DxB,EAAiBM,QAAU,GAEA,OAAvBJ,EAAWI,UACXoB,aAAaxB,EAAWI,SACxBJ,EAAWI,QAAU,MAGzBH,EAAeG,SAAU,CAAK,EAG5BqB,EAAU,KACRxB,EAAeG,UAGnBH,EAAeG,SAAU,EACzBP,GAAS,GAAK,EAmClB,OAHAuB,IACAvB,GAAS,GAEJN,GAImB,QAAxBuB,EAAAZ,EAAiBE,eAAO,IAAAU,GAAAA,EAAAY,KAAAxB,GAEnBM,OAAOG,gBArCkB,cAC1B,IAAIgB,EAC6B,QAA7BC,EAAqB,QAArBd,EAAAN,OAAOG,sBAAc,IAAAG,OAAA,EAAAA,EAAEF,cAAM,IAAAgB,EAAAA,EAAIpB,OAAOC,YACxCoB,EAAe,EAEnB,MAAMC,EAAyB,aAC3B,MAAMC,EAC2B,QAA7BH,EAAqB,QAArBd,EAAAN,OAAOG,sBAAc,IAAAG,OAAA,EAAAA,EAAEF,cAAM,IAAAgB,EAAAA,EAAIpB,OAAOC,YAGxCuB,KAAKC,IAAIF,EAAgBJ,GAjGvB,GAkGFE,GAAgB,GAEhBA,EAAe,EACfF,EAAaI,GAGbF,GAzGE,EA0GFJ,IAIJT,EAAcc,EAAuB,EAGzCd,EAAcc,EAAuB,EAiBzCI,GACAlC,EAAWI,QAAU+B,WAAWV,EAhIlB,KAkIPL,IAPHJ,EAAcS,GACPL,IAPAA,CAaQ,GACpB,CAAC7B,IAEG,CACHE,iBACAG,QACH"}

package/shared/input-wrapper/input-wrapper.d.ts CHANGED Viewed

@@ -17,3 +17,8 @@ export declare const BasicInput: (props: BasicInputProps & import("react").RefAt
  * Standalone native button with stripped-down styles
  */
 export declare const BasicButton: (props: BasicButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+/**
+ * Clear button with touch-target padding, offsetting negative margin, and
+ * a fixed 2px focus outline
+ */
+export declare const ClearButton: (props: BasicButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/shared/input-wrapper/input-wrapper.js CHANGED Viewed

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

package/shared/input-wrapper/input-wrapper.js.map CHANGED Viewed

	@@ -1 +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":"~~4ZAeO~~,MAAMA,EAAWC,GACpB,SAAkBC,EAAOC,GACrB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQC,UACRA,GAEAP,EADGQ,IACHR,EARE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,cASN,OACIS,uBACIR,IAAKA,EAAG,eACMI,EACdE,UAAWG,EACPC,EACAT,GAAYU,EACZT,GAASU,EACTT,GAAYU,EACZR,GAAYS,EACZR,IAEAC,GAGhB,IAMSQ,EAAejB,GACxB,SAAsBC,EAAOC,GACzB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQW,SACRA,EAAQV,UACRA,GAEAP,EADGQ,IACHR,EATE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,WAAA,cAUN,OACIS,EAAA,MAAAS,OAAAC,OAAA,CACIlB,IAAKA,EAAG,eACMI,EACdE,UAAWG,EACPC,EACAS,EACAlB,GAAYU,EACZT,GAASU,EACTT,GAAYU,EACZR,GAAYS,EACZX,GAAYiB,EACC,UAAbJ,GAAwBK,EACxBf,IAEAC,GAGhB,IAOSe,EAAaxB,GACtB,SAAoBC,EAAOC,GACvB,MAAMuB,QAAEA,EAAOjB,UAAEA,GAA6BP,EAAfQ,EAAUiB,EAAKzB,EAAxC,CAAA,UAAA,cACN,OACIS,EAAA,QAAAS,OAAAC,OAAA,CACIlB,IAAKA,EACLM,UAAWG,EACPgB,EACY,UAAZF,GAAuBG,EACvBpB,IAEAC,GAGhB,IAMSoB,EAAc7B,GACvB,SAAqB8B,EAAyB5B,GAAzB,IAAAM,UAAEA,GAASsB,EAAK7B,EAAKyB,EAAAI,EAArB,eACjB,OACIpB,0BACIR,IAAKA,EACLM,UAAWG,EAAKoB,EAAoBvB,IAChCP,GAGhB"}
1	+ {"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":"kfAgBO,MAAMA,EAAWC,GACpB,SAAkBC,EAAOC,GACrB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQC,UACRA,GAEAP,EADGQ,IACHR,EARE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,cASN,OACIS,uBACIR,IAAKA,EAAG,eACMI,EACdE,UAAWG,EACPC,EACAT,GAAYU,EACZT,GAASU,EACTT,GAAYU,EACZR,GAAYS,EACZR,IAEAC,GAGhB,IAMSQ,EAAejB,GACxB,SAAsBC,EAAOC,GACzB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQW,SACRA,EAAQV,UACRA,GAEAP,EADGQ,IACHR,EATE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,WAAA,cAUN,OACIS,EAAA,MAAAS,OAAAC,OAAA,CACIlB,IAAKA,EAAG,eACMI,EACdE,UAAWG,EACPC,EACAS,EACAlB,GAAYU,EACZT,GAASU,EACTT,GAAYU,EACZR,GAAYS,EACZX,GAAYiB,EACC,UAAbJ,GAAwBK,EACxBf,IAEAC,GAGhB,IAOSe,EAAaxB,GACtB,SAAoBC,EAAOC,GACvB,MAAMuB,QAAEA,EAAOjB,UAAEA,GAA6BP,EAAfQ,EAAUiB,EAAKzB,EAAxC,CAAA,UAAA,cACN,OACIS,EAAA,QAAAS,OAAAC,OAAA,CACIlB,IAAKA,EACLM,UAAWG,EACPgB,EACY,UAAZF,GAAuBG,EACvBpB,IAEAC,GAGhB,IAMSoB,EAAc7B,GACvB,SAAqB8B,EAAyB5B,GAAzB,IAAAM,UAAEA,GAASsB,EAAK7B,EAAKyB,EAAAI,EAArB,eACjB,OACIpB,0BACIR,IAAKA,EACLM,UAAWG,EAAKoB,EAAoBvB,IAChCP,GAGhB,IAOS+B,EAAchC,GACvB,SAAqB8B,EAAyB5B,GAAzB,IAAAM,UAAEA,GAASsB,EAAK7B,EAAKyB,EAAAI,EAArB,eACjB,OACIpB,EAAA,SAAAS,OAAAC,OAAA,CACIlB,IAAKA,EACLM,UAAWG,EAAKsB,EAAoBzB,IAChCP,EAAK,CAAAiC,SAETxB,EAACyB,EAAS,CAAC3B,UAAW4B,EAAgB,eAAA,MAGlD"}

package/shared/input-wrapper/input-wrapper.styles.d.ts CHANGED Viewed

@@ -9,3 +9,6 @@ export declare const inputWrapperPositionRight: import("@linaria/core").LinariaC
 export declare const basicInput: import("@linaria/core").LinariaClassName;
 export declare const basicInputSmall: import("@linaria/core").LinariaClassName;
 export declare const basicButton: import("@linaria/core").LinariaClassName;
+export declare const clearButton: import("@linaria/core").LinariaClassName;
+export declare const clearIcon: import("@linaria/core").LinariaClassName;
+export declare const clearButtonContainer: import("@linaria/core").LinariaClassName;

package/shared/input-wrapper/input-wrapper.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./input-wrapper.styles_1kc4xhb.css";const i="i156rlh",p="irl4gvd",r="iwp8knk",s="i1ec8vtj",t="ijzjlan",e="i2dsxxh",h="i1mziqol",l="iyqh66s",n="b168rpxy",o="b1df0tus",x="b191fi5o";export{x as basicButton,n as basicInput,o as basicInputSmall,i as inputBox,r as inputBoxDisabled,s as inputBoxError,t as inputBoxNoBorder,p as inputBoxReadOnly,e as inputWrapper,l as inputWrapperPositionRight,h as inputWrapperReadOnly};
+import"./input-wrapper.styles_je6maw.css";const i="i156rlh",p="irl4gvd",r="iwp8knk",s="i1ec8vtj",t="ijzjlan",c="i2dsxxh",e="i1mziqol",l="iyqh66s",o="b168rpxy",y="b1df0tus",a="b191fi5o",h="c179s2uy",j="c1buolhy",n="ccmyj2w";export{a as basicButton,o as basicInput,y as basicInputSmall,h as clearButton,n as clearButtonContainer,j as clearIcon,i as inputBox,r as inputBoxDisabled,s as inputBoxError,t as inputBoxNoBorder,p as inputBoxReadOnly,c as inputWrapper,l as inputWrapperPositionRight,e as inputWrapperReadOnly};
 //# sourceMappingURL=input-wrapper.styles.js.map

package/shared/input-wrapper/input-wrapper.styles.js.map CHANGED Viewed

	@@ -1 +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":["inputBox","inputBoxReadOnly","inputBoxDisabled","inputBoxError","inputBoxNoBorder","inputWrapper","inputWrapperReadOnly","inputWrapperPositionRight","basicInput","basicInputSmall","basicButton"],"mappings":"~~+EAIO~~,MAAMA,EAAQ,UAaRC,EAAgB,UAWhBC,EAAgB,UAUhBC,EAAa,WASbC,EAAgB,UAUhBC,EAAY,UASZC,EAAoB,WAIpBC,EAAyB,UAIzBC,EAAU,WAsCVC,EAAe,WAIfC,EAAW"}
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\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":["inputBox","inputBoxReadOnly","inputBoxDisabled","inputBoxError","inputBoxNoBorder","inputWrapper","inputWrapperReadOnly","inputWrapperPositionRight","basicInput","basicInputSmall","basicButton","clearButton","clearIcon","clearButtonContainer"],"mappings":"8EAIO,MAAMA,EAAQ,UAaRC,EAAgB,UAWhBC,EAAgB,UAUhBC,EAAa,WASbC,EAAgB,UAUhBC,EAAY,UASZC,EAAoB,WAIpBC,EAAyB,UAIzBC,EAAU,WAsCVC,EAAe,WAIfC,EAAW,WAiBXC,EAAW,WAsBXC,EAAS,WAMTC,EAAoB"}