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

@lifesg/react-design-system 4.0.0-alpha.3 → 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 (1304) hide show

package/input-nested-multi-select/input-nested-multi-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-nested-multi-select.js","sources":["../../src/input-nested-multi-select/input-nested-multi-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport isEqual from \"lodash/isEqual\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type {\n NestedDropdownListItemProps,\n NestedDropdownListLocalItem,\n} from \"../shared/dropdown-list\";\nimport {\n buildKeyPathToSet,\n ExpandableElement,\n NestedDropdownList,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { StringHelper, useId } from \"../util\";\nimport type { SelectedItem } from \"./helpers\";\nimport { getSelectedItems, getSelectedSubItems } from \"./helpers\";\nimport type { InputNestedMultiSelectProps } from \"./types\";\n\nexport const InputNestedMultiSelect = <V1, V2, V3>({\n placeholder = \"Select\",\n options: _options,\n disabled,\n error,\n className,\n \"data-testid\": testId,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n selectedKeyPaths: _selectedKeyPaths,\n mode,\n valueToStringFunction,\n enableSearch,\n searchPlaceholder,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n readOnly,\n onSearch,\n onSelectOptions,\n onShowOptions,\n onHideOptions,\n onRetry,\n onBlur,\n optionsLoadState = \"success\",\n optionTruncationType = \"end\",\n variant = \"default\",\n alignment,\n dropdownZIndex,\n dropdownWidth,\n dropdownRootNode,\n}: InputNestedMultiSelectProps<V1, V2, V3>): JSX.Element => {\n // =========================================================================\n // CONST, STATE\n // =========================================================================\n const { multiSelectedLabel } = customLabels \|\| {};\n const options = _options as NestedDropdownListItemProps<V1 \| V2 \| V3>[];\n const [selectedKeyPaths, setSelectedKeyPaths] = useState<Set<string>>(\n _selectedKeyPaths\n ? buildKeyPathToSet(_selectedKeyPaths)\n : new Set<string>()\n );\n const [selectedItems, setSelectedItems] = useState<\n SelectedItem<V1 \| V2 \| V3>[]\n >([]);\n\n const [showOptions, setShowOptions] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n const internalId = useId();\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n const labelContainerRef = useRef<HTMLDivElement>(null);\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n const newKeyPath = _selectedKeyPaths \|\| [];\n const selectedItems = getSelectedItems(options, newKeyPath);\n\n setSelectedKeyPaths(buildKeyPathToSet(newKeyPath));\n setSelectedItems(selectedItems);\n }, [_selectedKeyPaths, options]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleSelectAll = (\n keyPaths: string[][],\n items: NestedDropdownListLocalItem<V1 \| V2 \| V3>[]\n ) => {\n const selectedItems = items.map((item) => ({\n keyPath: item.keyPath,\n label: item.item.label,\n value: item.item.value,\n }));\n setSelectedKeyPaths(buildKeyPathToSet(keyPaths));\n setSelectedItems(selectedItems);\n performOnSelectOptions(keyPaths, selectedItems);\n };\n\n const handleListItemClick = (\n listItem: NestedDropdownListLocalItem<V1 \| V2 \| V3>\n ) => {\n const newSelectedItems: SelectedItem<V1 \| V2 \| V3>[] =\n getNewSelection(listItem);\n const newKeyPaths = newSelectedItems.map((item) => item.keyPath);\n setSelectedItems(newSelectedItems);\n setSelectedKeyPaths(buildKeyPathToSet(newKeyPaths));\n performOnSelectOptions(newKeyPaths, newSelectedItems);\n };\n\n const handleNodeFocus = () => {\n if (!focused && !showOptions) {\n setFocused(true);\n }\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n focused &&\n !showOptions &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleOpen = () => {\n setShowOptions(true);\n triggerOptionDisplayCallback(true);\n setFocused(true);\n };\n\n const handleClose = (reason: OpenChangeReason \| undefined) => {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n // click to toggle should not blur the input\n if (reason !== \"click\") {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleDismiss = () => {\n selectorRef.current?.focus();\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n };\n\n // =========================================================================\n // HELPER FUNCTION\n // =========================================================================\n const getDisplayValue = (): string => {\n if (selectedItems.length > 1) {\n return multiSelectedLabel \|\| `${selectedItems.length} selected`;\n }\n\n const { label, value } = selectedItems[0];\n if (valueToStringFunction) {\n return valueToStringFunction(value);\n } else {\n return label;\n }\n };\n\n const truncateValue = (value: string) => {\n if (optionTruncationType === \"middle\") {\n let widthOfElement = 0;\n if (labelContainerRef && labelContainerRef.current) {\n widthOfElement =\n labelContainerRef.current.getBoundingClientRect().width;\n }\n return StringHelper.truncateOneLine(value, widthOfElement, 120, 6);\n }\n\n return value;\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (!show && onHideOptions) {\n onHideOptions();\n }\n\n if (show && onShowOptions) {\n onShowOptions();\n }\n };\n\n const performOnSelectOptions = (\n keyPaths: string[][],\n items: SelectedItem<V1 \| V2 \| V3>[]\n ) => {\n if (onSelectOptions) {\n const returnValue = items.map((item) => item.value);\n onSelectOptions(keyPaths, returnValue);\n }\n };\n\n const getNewSelection = (\n item: NestedDropdownListLocalItem<V1 \| V2 \| V3>\n ): SelectedItem<V1 \| V2 \| V3>[] => {\n if (item.checked === true) {\n // remove item or subitems\n return selectedItems.filter((selectedItem) => {\n const ancestorKeyPath = selectedItem.keyPath.slice(\n 0,\n item.keyPath.length\n );\n return !isEqual(item.keyPath, ancestorKeyPath);\n });\n } else {\n // select item or all subitems\n const nextSelection = [...selectedItems];\n const newItemsToAdd = item.hasSubItems\n ? getSelectedSubItems(options, item.keyPath)\n : [\n {\n value: item.item.value,\n label: item.item.label,\n keyPath: item.keyPath,\n },\n ];\n newItemsToAdd.forEach((addedItem) => {\n if (\n !selectedItems.find((selectedItem) =>\n isEqual(selectedItem.keyPath, addedItem.keyPath)\n )\n ) {\n nextSelection.push(addedItem);\n }\n });\n return nextSelection;\n }\n };\n\n // =========================================================================\n // RENDER FUNCTION\n // =========================================================================\n const renderLabel = () => {\n if (isEmpty(selectedItems)) {\n return (\n <PlaceholderLabel truncateType={optionTruncationType}>\n {placeholder}\n </PlaceholderLabel>\n );\n } else {\n return (\n <ValueLabel truncateType={optionTruncationType}>\n {truncateValue(getDisplayValue())}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer ref={labelContainerRef} disabled={disabled}>\n {renderLabel()}\n </LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <InputBox\n className={className}\n data-testid={testId}\n id={id}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={internalId}\n popupRole=\"tree\"\n readOnly={readOnly}\n variant={variant}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n </InputBox>\n );\n };\n\n const renderDropdown = () => {\n return (\n <NestedDropdownList\n listboxId={internalId}\n listItems={options}\n multiSelect\n selectedKeyPaths={selectedKeyPaths}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n enableSearch={enableSearch}\n searchPlaceholder={searchPlaceholder}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n customLabels={customLabels}\n onSelectItem={handleListItemClick}\n onSelectAll={handleSelectAll}\n onRetry={onRetry}\n onSearch={onSearch}\n variant={variant}\n mode={mode}\n width={dropdownWidth}\n matchElementWidth\n />\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={showOptions}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["InputNestedMultiSelect","placeholder","options","_options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","selectedKeyPaths","_selectedKeyPaths","mode","valueToStringFunction","enableSearch","searchPlaceholder","hideNoResultsDisplay","noResultsDescription","customLabels","readOnly","onSearch","onSelectOptions","onShowOptions","onHideOptions","onRetry","onBlur","optionsLoadState","optionTruncationType","variant","alignment","dropdownZIndex","dropdownWidth","dropdownRootNode","multiSelectedLabel","setSelectedKeyPaths","useState","buildKeyPathToSet","Set","selectedItems","setSelectedItems","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","newKeyPath","getSelectedItems","handleSelectAll","keyPaths","items","map","item","keyPath","label","value","performOnSelectOptions","handleListItemClick","listItem","newSelectedItems","getNewSelection","newKeyPaths","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","getDisplayValue","length","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","triggerOptionDisplayCallback","show","returnValue","checked","filter","selectedItem","ancestorKeyPath","slice","isEqual","nextSelection","hasSubItems","getSelectedSubItems","forEach","addedItem","find","push","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","children","LabelContainer","isEmpty","PlaceholderLabel","truncateType","ValueLabel","renderDropdown","NestedDropdownList","listItems","multiSelect","itemsLoadState","itemTruncationType","onSelectItem","onSelectAll","matchElementWidth","onOpen","onClose","reason","onDismiss","_a","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"input-nested-multi-select.js","sources":["../../src/input-nested-multi-select/input-nested-multi-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport isEqual from \"lodash/isEqual\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type {\n NestedDropdownListItemProps,\n NestedDropdownListLocalItem,\n} from \"../shared/dropdown-list\";\nimport {\n buildKeyPathToSet,\n ExpandableElement,\n NestedDropdownList,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { StringHelper, useId } from \"../util\";\nimport type { SelectedItem } from \"./helpers\";\nimport { getSelectedItems, getSelectedSubItems } from \"./helpers\";\nimport type { InputNestedMultiSelectProps } from \"./types\";\n\nexport const InputNestedMultiSelect = <V1, V2, V3>({\n placeholder = \"Select\",\n options: _options,\n disabled,\n error,\n className,\n \"data-testid\": testId,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n selectedKeyPaths: _selectedKeyPaths,\n mode,\n valueToStringFunction,\n enableSearch,\n searchPlaceholder,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n readOnly,\n onSearch,\n onSelectOptions,\n onShowOptions,\n onHideOptions,\n onRetry,\n onBlur,\n optionsLoadState = \"success\",\n optionTruncationType = \"end\",\n variant = \"default\",\n alignment,\n dropdownZIndex,\n dropdownWidth,\n dropdownRootNode,\n}: InputNestedMultiSelectProps<V1, V2, V3>): JSX.Element => {\n // =========================================================================\n // CONST, STATE\n // =========================================================================\n const { multiSelectedLabel } = customLabels \|\| {};\n const options = _options as NestedDropdownListItemProps<V1 \| V2 \| V3>[];\n const [selectedKeyPaths, setSelectedKeyPaths] = useState<Set<string>>(\n _selectedKeyPaths\n ? buildKeyPathToSet(_selectedKeyPaths)\n : new Set<string>()\n );\n const [selectedItems, setSelectedItems] = useState<\n SelectedItem<V1 \| V2 \| V3>[]\n >([]);\n\n const [showOptions, setShowOptions] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n const internalId = useId();\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n const labelContainerRef = useRef<HTMLDivElement>(null);\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n const newKeyPath = _selectedKeyPaths \|\| [];\n const selectedItems = getSelectedItems(options, newKeyPath);\n\n setSelectedKeyPaths(buildKeyPathToSet(newKeyPath));\n setSelectedItems(selectedItems);\n }, [_selectedKeyPaths, options]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleSelectAll = (\n keyPaths: string[][],\n items: NestedDropdownListLocalItem<V1 \| V2 \| V3>[]\n ) => {\n const selectedItems = items.map((item) => ({\n keyPath: item.keyPath,\n label: item.item.label,\n value: item.item.value,\n }));\n setSelectedKeyPaths(buildKeyPathToSet(keyPaths));\n setSelectedItems(selectedItems);\n performOnSelectOptions(keyPaths, selectedItems);\n };\n\n const handleListItemClick = (\n listItem: NestedDropdownListLocalItem<V1 \| V2 \| V3>\n ) => {\n const newSelectedItems: SelectedItem<V1 \| V2 \| V3>[] =\n getNewSelection(listItem);\n const newKeyPaths = newSelectedItems.map((item) => item.keyPath);\n setSelectedItems(newSelectedItems);\n setSelectedKeyPaths(buildKeyPathToSet(newKeyPaths));\n performOnSelectOptions(newKeyPaths, newSelectedItems);\n };\n\n const handleNodeFocus = () => {\n if (!focused && !showOptions) {\n setFocused(true);\n }\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n focused &&\n !showOptions &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleOpen = () => {\n setShowOptions(true);\n triggerOptionDisplayCallback(true);\n setFocused(true);\n };\n\n const handleClose = (reason: OpenChangeReason \| undefined) => {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n // click to toggle should not blur the input\n if (reason !== \"click\") {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleDismiss = () => {\n selectorRef.current?.focus();\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n };\n\n // =========================================================================\n // HELPER FUNCTION\n // =========================================================================\n const getDisplayValue = (): string => {\n if (selectedItems.length > 1) {\n return multiSelectedLabel \|\| `${selectedItems.length} selected`;\n }\n\n const { label, value } = selectedItems[0];\n if (valueToStringFunction) {\n return valueToStringFunction(value);\n } else {\n return label;\n }\n };\n\n const truncateValue = (value: string) => {\n if (optionTruncationType === \"middle\") {\n let widthOfElement = 0;\n if (labelContainerRef && labelContainerRef.current) {\n widthOfElement =\n labelContainerRef.current.getBoundingClientRect().width;\n }\n return StringHelper.truncateOneLine(value, widthOfElement, 120, 6);\n }\n\n return value;\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (!show && onHideOptions) {\n onHideOptions();\n }\n\n if (show && onShowOptions) {\n onShowOptions();\n }\n };\n\n const performOnSelectOptions = (\n keyPaths: string[][],\n items: SelectedItem<V1 \| V2 \| V3>[]\n ) => {\n if (onSelectOptions) {\n const returnValue = items.map((item) => item.value);\n onSelectOptions(keyPaths, returnValue);\n }\n };\n\n const getNewSelection = (\n item: NestedDropdownListLocalItem<V1 \| V2 \| V3>\n ): SelectedItem<V1 \| V2 \| V3>[] => {\n if (item.checked === true) {\n // remove item or subitems\n return selectedItems.filter((selectedItem) => {\n const ancestorKeyPath = selectedItem.keyPath.slice(\n 0,\n item.keyPath.length\n );\n return !isEqual(item.keyPath, ancestorKeyPath);\n });\n } else {\n // select item or all subitems\n const nextSelection = [...selectedItems];\n const newItemsToAdd = item.hasSubItems\n ? getSelectedSubItems(options, item.keyPath)\n : [\n {\n value: item.item.value,\n label: item.item.label,\n keyPath: item.keyPath,\n },\n ];\n newItemsToAdd.forEach((addedItem) => {\n if (\n !selectedItems.find((selectedItem) =>\n isEqual(selectedItem.keyPath, addedItem.keyPath)\n )\n ) {\n nextSelection.push(addedItem);\n }\n });\n return nextSelection;\n }\n };\n\n // =========================================================================\n // RENDER FUNCTION\n // =========================================================================\n const renderLabel = () => {\n if (isEmpty(selectedItems)) {\n return (\n <PlaceholderLabel truncateType={optionTruncationType}>\n {placeholder}\n </PlaceholderLabel>\n );\n } else {\n return (\n <ValueLabel truncateType={optionTruncationType}>\n {truncateValue(getDisplayValue())}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer ref={labelContainerRef} disabled={disabled}>\n {renderLabel()}\n </LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <InputBox\n className={className}\n data-testid={testId}\n id={id}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={internalId}\n popupRole=\"tree\"\n readOnly={readOnly}\n variant={variant}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n </InputBox>\n );\n };\n\n const renderDropdown = () => {\n return (\n <NestedDropdownList\n listboxId={internalId}\n listItems={options}\n multiSelect\n selectedKeyPaths={selectedKeyPaths}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n enableSearch={enableSearch}\n searchPlaceholder={searchPlaceholder}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n customLabels={customLabels}\n onSelectItem={handleListItemClick}\n onSelectAll={handleSelectAll}\n onRetry={onRetry}\n onSearch={onSearch}\n variant={variant}\n mode={mode}\n width={dropdownWidth}\n matchElementWidth\n />\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={showOptions}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["InputNestedMultiSelect","placeholder","options","_options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","selectedKeyPaths","_selectedKeyPaths","mode","valueToStringFunction","enableSearch","searchPlaceholder","hideNoResultsDisplay","noResultsDescription","customLabels","readOnly","onSearch","onSelectOptions","onShowOptions","onHideOptions","onRetry","onBlur","optionsLoadState","optionTruncationType","variant","alignment","dropdownZIndex","dropdownWidth","dropdownRootNode","multiSelectedLabel","setSelectedKeyPaths","useState","buildKeyPathToSet","Set","selectedItems","setSelectedItems","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","newKeyPath","getSelectedItems","handleSelectAll","keyPaths","items","map","item","keyPath","label","value","performOnSelectOptions","handleListItemClick","listItem","newSelectedItems","getNewSelection","newKeyPaths","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","getDisplayValue","length","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","triggerOptionDisplayCallback","show","returnValue","checked","filter","selectedItem","ancestorKeyPath","slice","isEqual","nextSelection","hasSubItems","getSelectedSubItems","forEach","addedItem","find","push","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","children","LabelContainer","isEmpty","PlaceholderLabel","truncateType","ValueLabel","renderDropdown","NestedDropdownList","listItems","multiSelect","itemsLoadState","itemTruncationType","onSelectItem","onSelectAll","matchElementWidth","onOpen","onClose","reason","onDismiss","_a","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/input-nested-select/input-nested-select.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import r from"../external/lodash/isEmpty.js";import{useState as t,useRef as o,useEffect as n}from"react";import"clsx";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"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as i}from"../util/simple-id-generator.js";import{StringHelper as d}from"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import"../shared/dropdown-list/dropdown-list.js";import"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as l}from"../shared/dropdown-list/expandable-element.js";import{NestedDropdownList as s}from"../shared/dropdown-list/nested-dropdown-list.js";import{buildKeyPathToSet as a,findItemByKeyPath as p}from"../shared/dropdown-list/nested-dropdown-list-helpers.js";import{ElementWithDropdown as m}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{LabelContainer as c,PlaceholderLabel as u,ValueLabel as h}from"../shared/dropdown-wrapper/dropdown-wrapper.js";import{InputBox as w}from"../shared/input-wrapper/input-wrapper.js";const b=({placeholder:b="Select",options:y,disabled:f,error:j,className:v,"data-testid":x,id:g,"aria-labelledby":S,"aria-describedby":T,"aria-invalid":O,selectedKeyPath:R,mode:I,valueToStringFunction:k,enableSearch:D,searchPlaceholder:N,selectableCategory:P,hideNoResultsDisplay:C,noResultsDescription:L,customLabels:_,readOnly:A,onBlur:B,onSearch:E,onSelectOption:H,onShowOptions:q,onHideOptions:F,onRetry:K,optionsLoadState:W="success",optionTruncationType:Z="end",variant:G="default",alignment:M,dropdownZIndex:z,dropdownWidth:J,dropdownRootNode:Q})=>{const U=y,[V,X]=t(R?a([R]):new Set),[Y,$]=t(),[ee,re]=t(!1),[te,oe]=t(!1),ne=i(),ie=o(null),de=o(null),le=o(null);n((()=>{X(R?a([R]):new Set);const e=p(U,R||[]);$(null!=e?e:void 0)}),[R,U]);const se=e=>{var r;const{keyPath:t,item:{label:o,value:n}}=e;X(a([t])),$({label:o,value:n}),re(!1),ue(!1),null===(r=de.current)||void 0===r||r.focus(),null==H||H(t,n)},ae=()=>{te||ee||oe(!0)},pe=e=>{te&&!ee&&ie.current&&!ie.current.contains(e.relatedTarget)&&(oe(!1),null==B||B())},me=()=>{if(!Y)return"";const{label:e,value:r}=Y;return k?k(r):e},ce=e=>{if("middle"===Z){let r=0;return le&&le.current&&(r=le.current.getBoundingClientRect().width),d.truncateOneLine(e,r,120,6)}return e},ue=e=>{!e&&F&&F(),e&&q&&q()};return e(m,{enabled:!A&&!f,isOpen:ee,renderElement:()=>e(w,{className:v,"data-testid":x,id:g,ref:ie,tabIndex:-1,onFocus:ae,onBlur:pe,focused:te,disabled:f,readOnly:A,error:j,children:e(l,{ref:de,disabled:f,expanded:ee,listboxId:ne,popupRole:"tree",readOnly:A,variant:G,"aria-labelledby":S,"aria-describedby":T,"aria-invalid":O,children:e(c,{ref:le,disabled:f,children:r(Y)?e(u,{truncateType:Z,children:b}):e(h,{truncateType:Z,children:ce(me())})})})}),renderDropdown:()=>e(s,{listboxId:ne,listItems:U,selectedKeyPaths:V,selectableCategory:P,itemsLoadState:W,itemTruncationType:Z,enableSearch:D,searchPlaceholder:N,hideNoResultsDisplay:C,noResultsDescription:L,customLabels:_,onSelectItem:se,onRetry:K,onSearch:E,variant:G,mode:I,width:J,matchElementWidth:!0}),onOpen:()=>{re(!0),ue(!0),oe(!0)},onClose:e=>{re(!1),ue(!1),"click"!==e&&(oe(!1),null==B||B())},onDismiss:()=>{var e;null===(e=de.current)||void 0===e||e.focus(),re(!1),ue(!1)},clickToToggle:!0,offset:8,alignment:M,fitAvailableHeight:!0,customZIndex:z,rootNode:Q})};export{b as InputNestedSelect};
+import{jsx as e}from"react/jsx-runtime";import r from"../external/lodash/isEmpty.js";import{useState as t,useRef as o,useEffect as n}from"react";import"clsx";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"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as i}from"../util/simple-id-generator.js";import{StringHelper as l}from"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_mloii0.css";import"../shared/dropdown-list/dropdown-list.js";import"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as d}from"../shared/dropdown-list/expandable-element.js";import{NestedDropdownList as s}from"../shared/dropdown-list/nested-dropdown-list.js";import{buildKeyPathToSet as a,findItemByKeyPath as p}from"../shared/dropdown-list/nested-dropdown-list-helpers.js";import{ElementWithDropdown as m}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{LabelContainer as c,PlaceholderLabel as u,ValueLabel as h}from"../shared/dropdown-wrapper/dropdown-wrapper.js";import{InputBox as w}from"../shared/input-wrapper/input-wrapper.js";const b=({placeholder:b="Select",options:y,disabled:f,error:j,className:v,"data-testid":x,id:g,"aria-labelledby":S,"aria-describedby":T,"aria-invalid":O,selectedKeyPath:R,mode:I,valueToStringFunction:k,enableSearch:D,searchPlaceholder:N,selectableCategory:P,hideNoResultsDisplay:C,noResultsDescription:L,customLabels:_,readOnly:A,onBlur:B,onSearch:E,onSelectOption:H,onShowOptions:q,onHideOptions:F,onRetry:K,optionsLoadState:W="success",optionTruncationType:Z="end",variant:G="default",alignment:M,dropdownZIndex:z,dropdownWidth:J,dropdownRootNode:Q})=>{const U=y,[V,X]=t(R?a([R]):new Set),[Y,$]=t(),[ee,re]=t(!1),[te,oe]=t(!1),ne=i(),ie=o(null),le=o(null),de=o(null);n((()=>{X(R?a([R]):new Set);const e=p(U,R||[]);$(null!=e?e:void 0)}),[R,U]);const se=e=>{var r;const{keyPath:t,item:{label:o,value:n}}=e;X(a([t])),$({label:o,value:n}),re(!1),ue(!1),null===(r=le.current)||void 0===r||r.focus(),null==H||H(t,n)},ae=()=>{te||ee||oe(!0)},pe=e=>{te&&!ee&&ie.current&&!ie.current.contains(e.relatedTarget)&&(oe(!1),null==B||B())},me=()=>{if(!Y)return"";const{label:e,value:r}=Y;return k?k(r):e},ce=e=>{if("middle"===Z){let r=0;return de&&de.current&&(r=de.current.getBoundingClientRect().width),l.truncateOneLine(e,r,120,6)}return e},ue=e=>{!e&&F&&F(),e&&q&&q()};return e(m,{enabled:!A&&!f,isOpen:ee,renderElement:()=>e(w,{className:v,"data-testid":x,id:g,ref:ie,tabIndex:-1,onFocus:ae,onBlur:pe,focused:te,disabled:f,readOnly:A,error:j,children:e(d,{ref:le,disabled:f,expanded:ee,listboxId:ne,popupRole:"tree",readOnly:A,variant:G,"aria-labelledby":S,"aria-describedby":T,"aria-invalid":O,children:e(c,{ref:de,disabled:f,children:r(Y)?e(u,{truncateType:Z,children:b}):e(h,{truncateType:Z,children:ce(me())})})})}),renderDropdown:()=>e(s,{listboxId:ne,listItems:U,selectedKeyPaths:V,selectableCategory:P,itemsLoadState:W,itemTruncationType:Z,enableSearch:D,searchPlaceholder:N,hideNoResultsDisplay:C,noResultsDescription:L,customLabels:_,onSelectItem:se,onRetry:K,onSearch:E,variant:G,mode:I,width:J,matchElementWidth:!0}),onOpen:()=>{re(!0),ue(!0),oe(!0)},onClose:e=>{re(!1),ue(!1),"click"!==e&&(oe(!1),null==B||B())},onDismiss:()=>{var e;null===(e=le.current)||void 0===e||e.focus(),re(!1),ue(!1)},clickToToggle:!0,offset:8,alignment:M,fitAvailableHeight:!0,customZIndex:z,rootNode:Q})};export{b as InputNestedSelect};
 //# sourceMappingURL=input-nested-select.js.map

package/input-nested-select/input-nested-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-nested-select.js","sources":["../../src/input-nested-select/input-nested-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type {\n NestedDropdownListItemProps,\n NestedDropdownListLocalItem,\n} from \"../shared/dropdown-list\";\nimport {\n buildKeyPathToSet,\n ExpandableElement,\n findItemByKeyPath,\n NestedDropdownList,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { StringHelper, useId } from \"../util\";\nimport type {\n InputNestedSelectProps,\n L1OptionProps,\n L2OptionProps,\n L3OptionProps,\n} from \"./types\";\n\nexport type CombinedOptionProps<V1, V2, V3> =\n \| L1OptionProps<V1, V2, V3>\n \| L2OptionProps<V2, V3>\n \| L3OptionProps<V3>;\n\ninterface SelectedItemType<V1, V2, V3> {\n label: string;\n value: V1 \| V2 \| V3;\n}\n\nexport const InputNestedSelect = <V1, V2, V3>({\n placeholder = \"Select\",\n options: _options,\n disabled,\n error,\n className,\n \"data-testid\": testId,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n selectedKeyPath: _selectedKeyPath,\n mode,\n valueToStringFunction,\n enableSearch,\n searchPlaceholder,\n selectableCategory,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n readOnly,\n onBlur,\n onSearch,\n onSelectOption,\n onShowOptions,\n onHideOptions,\n onRetry,\n optionsLoadState = \"success\",\n optionTruncationType = \"end\",\n variant = \"default\",\n alignment,\n dropdownZIndex,\n dropdownWidth,\n dropdownRootNode,\n}: InputNestedSelectProps<V1, V2, V3>): JSX.Element => {\n // =========================================================================\n // CONST, STATE\n // =========================================================================\n const options = _options as NestedDropdownListItemProps<V1 \| V2 \| V3>[];\n const [selectedKeyPaths, setSelectedKeyPaths] = useState<Set<string>>(\n _selectedKeyPath\n ? buildKeyPathToSet([_selectedKeyPath])\n : new Set<string>()\n );\n const [selectedItem, setSelectedItem] =\n useState<SelectedItemType<V1, V2, V3>>();\n\n const [showOptions, setShowOptions] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n const internalId = useId();\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n const labelContainerRef = useRef<HTMLDivElement>(null);\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setSelectedKeyPaths(\n _selectedKeyPath\n ? buildKeyPathToSet([_selectedKeyPath])\n : new Set<string>()\n );\n const selectedItem = findItemByKeyPath(options, _selectedKeyPath \|\| []);\n setSelectedItem(selectedItem ?? undefined);\n }, [_selectedKeyPath, options]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleListItemClick = (\n listItem: NestedDropdownListLocalItem<V1 \| V2 \| V3>\n ) => {\n const {\n keyPath,\n item: { label, value },\n } = listItem;\n setSelectedKeyPaths(buildKeyPathToSet([keyPath]));\n setSelectedItem({ label, value });\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n selectorRef.current?.focus();\n onSelectOption?.(keyPath, value);\n };\n\n const handleNodeFocus = () => {\n if (!focused && !showOptions) {\n setFocused(true);\n }\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n focused &&\n !showOptions &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleOpen = () => {\n setShowOptions(true);\n triggerOptionDisplayCallback(true);\n setFocused(true);\n };\n\n const handleClose = (reason: OpenChangeReason \| undefined) => {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n // click to toggle should not blur the input\n if (reason !== \"click\") {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleDismiss = () => {\n selectorRef.current?.focus();\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n };\n\n // =========================================================================\n // HELPER FUNCTION\n // =========================================================================\n const getDisplayValue = (): string => {\n if (!selectedItem) return \"\";\n const { label, value } = selectedItem;\n\n if (valueToStringFunction) {\n return valueToStringFunction(value);\n } else {\n return label;\n }\n };\n\n const truncateValue = (value: string) => {\n if (optionTruncationType === \"middle\") {\n let widthOfElement = 0;\n if (labelContainerRef && labelContainerRef.current) {\n widthOfElement =\n labelContainerRef.current.getBoundingClientRect().width;\n }\n return StringHelper.truncateOneLine(value, widthOfElement, 120, 6);\n }\n\n return value;\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (!show && onHideOptions) {\n onHideOptions();\n }\n\n if (show && onShowOptions) {\n onShowOptions();\n }\n };\n\n // =========================================================================\n // RENDER FUNCTION\n // =========================================================================\n const renderLabel = () => {\n if (isEmpty(selectedItem)) {\n return (\n <PlaceholderLabel truncateType={optionTruncationType}>\n {placeholder}\n </PlaceholderLabel>\n );\n } else {\n return (\n <ValueLabel truncateType={optionTruncationType}>\n {truncateValue(getDisplayValue())}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer ref={labelContainerRef} disabled={disabled}>\n {renderLabel()}\n </LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <InputBox\n className={className}\n data-testid={testId}\n id={id}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={internalId}\n popupRole=\"tree\"\n readOnly={readOnly}\n variant={variant}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n </InputBox>\n );\n };\n\n const renderDropdown = () => {\n return (\n <NestedDropdownList\n listboxId={internalId}\n listItems={options}\n selectedKeyPaths={selectedKeyPaths}\n selectableCategory={selectableCategory}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n enableSearch={enableSearch}\n searchPlaceholder={searchPlaceholder}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n customLabels={customLabels}\n onSelectItem={handleListItemClick}\n onRetry={onRetry}\n onSearch={onSearch}\n variant={variant}\n mode={mode}\n width={dropdownWidth}\n matchElementWidth\n />\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={showOptions}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["InputNestedSelect","placeholder","options","_options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","selectedKeyPath","_selectedKeyPath","mode","valueToStringFunction","enableSearch","searchPlaceholder","selectableCategory","hideNoResultsDisplay","noResultsDescription","customLabels","readOnly","onBlur","onSearch","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","variant","alignment","dropdownZIndex","dropdownWidth","dropdownRootNode","selectedKeyPaths","setSelectedKeyPaths","useState","buildKeyPathToSet","Set","selectedItem","setSelectedItem","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","findItemByKeyPath","undefined","handleListItemClick","listItem","keyPath","item","label","value","triggerOptionDisplayCallback","_a","current","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","children","LabelContainer","isEmpty","PlaceholderLabel","truncateType","ValueLabel","renderDropdown","NestedDropdownList","listItems","itemsLoadState","itemTruncationType","onSelectItem","matchElementWidth","onOpen","onClose","reason","onDismiss","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"input-nested-select.js","sources":["../../src/input-nested-select/input-nested-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type {\n NestedDropdownListItemProps,\n NestedDropdownListLocalItem,\n} from \"../shared/dropdown-list\";\nimport {\n buildKeyPathToSet,\n ExpandableElement,\n findItemByKeyPath,\n NestedDropdownList,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { StringHelper, useId } from \"../util\";\nimport type {\n InputNestedSelectProps,\n L1OptionProps,\n L2OptionProps,\n L3OptionProps,\n} from \"./types\";\n\nexport type CombinedOptionProps<V1, V2, V3> =\n \| L1OptionProps<V1, V2, V3>\n \| L2OptionProps<V2, V3>\n \| L3OptionProps<V3>;\n\ninterface SelectedItemType<V1, V2, V3> {\n label: string;\n value: V1 \| V2 \| V3;\n}\n\nexport const InputNestedSelect = <V1, V2, V3>({\n placeholder = \"Select\",\n options: _options,\n disabled,\n error,\n className,\n \"data-testid\": testId,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n selectedKeyPath: _selectedKeyPath,\n mode,\n valueToStringFunction,\n enableSearch,\n searchPlaceholder,\n selectableCategory,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n readOnly,\n onBlur,\n onSearch,\n onSelectOption,\n onShowOptions,\n onHideOptions,\n onRetry,\n optionsLoadState = \"success\",\n optionTruncationType = \"end\",\n variant = \"default\",\n alignment,\n dropdownZIndex,\n dropdownWidth,\n dropdownRootNode,\n}: InputNestedSelectProps<V1, V2, V3>): JSX.Element => {\n // =========================================================================\n // CONST, STATE\n // =========================================================================\n const options = _options as NestedDropdownListItemProps<V1 \| V2 \| V3>[];\n const [selectedKeyPaths, setSelectedKeyPaths] = useState<Set<string>>(\n _selectedKeyPath\n ? buildKeyPathToSet([_selectedKeyPath])\n : new Set<string>()\n );\n const [selectedItem, setSelectedItem] =\n useState<SelectedItemType<V1, V2, V3>>();\n\n const [showOptions, setShowOptions] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n const internalId = useId();\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n const labelContainerRef = useRef<HTMLDivElement>(null);\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setSelectedKeyPaths(\n _selectedKeyPath\n ? buildKeyPathToSet([_selectedKeyPath])\n : new Set<string>()\n );\n const selectedItem = findItemByKeyPath(options, _selectedKeyPath \|\| []);\n setSelectedItem(selectedItem ?? undefined);\n }, [_selectedKeyPath, options]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleListItemClick = (\n listItem: NestedDropdownListLocalItem<V1 \| V2 \| V3>\n ) => {\n const {\n keyPath,\n item: { label, value },\n } = listItem;\n setSelectedKeyPaths(buildKeyPathToSet([keyPath]));\n setSelectedItem({ label, value });\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n selectorRef.current?.focus();\n onSelectOption?.(keyPath, value);\n };\n\n const handleNodeFocus = () => {\n if (!focused && !showOptions) {\n setFocused(true);\n }\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n focused &&\n !showOptions &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleOpen = () => {\n setShowOptions(true);\n triggerOptionDisplayCallback(true);\n setFocused(true);\n };\n\n const handleClose = (reason: OpenChangeReason \| undefined) => {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n // click to toggle should not blur the input\n if (reason !== \"click\") {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleDismiss = () => {\n selectorRef.current?.focus();\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n };\n\n // =========================================================================\n // HELPER FUNCTION\n // =========================================================================\n const getDisplayValue = (): string => {\n if (!selectedItem) return \"\";\n const { label, value } = selectedItem;\n\n if (valueToStringFunction) {\n return valueToStringFunction(value);\n } else {\n return label;\n }\n };\n\n const truncateValue = (value: string) => {\n if (optionTruncationType === \"middle\") {\n let widthOfElement = 0;\n if (labelContainerRef && labelContainerRef.current) {\n widthOfElement =\n labelContainerRef.current.getBoundingClientRect().width;\n }\n return StringHelper.truncateOneLine(value, widthOfElement, 120, 6);\n }\n\n return value;\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (!show && onHideOptions) {\n onHideOptions();\n }\n\n if (show && onShowOptions) {\n onShowOptions();\n }\n };\n\n // =========================================================================\n // RENDER FUNCTION\n // =========================================================================\n const renderLabel = () => {\n if (isEmpty(selectedItem)) {\n return (\n <PlaceholderLabel truncateType={optionTruncationType}>\n {placeholder}\n </PlaceholderLabel>\n );\n } else {\n return (\n <ValueLabel truncateType={optionTruncationType}>\n {truncateValue(getDisplayValue())}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer ref={labelContainerRef} disabled={disabled}>\n {renderLabel()}\n </LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <InputBox\n className={className}\n data-testid={testId}\n id={id}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={internalId}\n popupRole=\"tree\"\n readOnly={readOnly}\n variant={variant}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n </InputBox>\n );\n };\n\n const renderDropdown = () => {\n return (\n <NestedDropdownList\n listboxId={internalId}\n listItems={options}\n selectedKeyPaths={selectedKeyPaths}\n selectableCategory={selectableCategory}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n enableSearch={enableSearch}\n searchPlaceholder={searchPlaceholder}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n customLabels={customLabels}\n onSelectItem={handleListItemClick}\n onRetry={onRetry}\n onSearch={onSearch}\n variant={variant}\n mode={mode}\n width={dropdownWidth}\n matchElementWidth\n />\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={showOptions}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["InputNestedSelect","placeholder","options","_options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","selectedKeyPath","_selectedKeyPath","mode","valueToStringFunction","enableSearch","searchPlaceholder","selectableCategory","hideNoResultsDisplay","noResultsDescription","customLabels","readOnly","onBlur","onSearch","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","variant","alignment","dropdownZIndex","dropdownWidth","dropdownRootNode","selectedKeyPaths","setSelectedKeyPaths","useState","buildKeyPathToSet","Set","selectedItem","setSelectedItem","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","findItemByKeyPath","undefined","handleListItemClick","listItem","keyPath","item","label","value","triggerOptionDisplayCallback","_a","current","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","children","LabelContainer","isEmpty","PlaceholderLabel","truncateType","ValueLabel","renderDropdown","NestedDropdownList","listItems","itemsLoadState","itemTruncationType","onSelectItem","matchElementWidth","onOpen","onClose","reason","onDismiss","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/input-range-select/input-range-select.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as o}from"react/jsx-runtime";import t from"clsx";import{useState as n,useRef as i,useEffect as s,useMemo as l}from"react";import{VisuallyHidden as a,concatIds as d}from"../shared/accessibility/index.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"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as c}from"../util/simple-id-generator.js";import{StringHelper as p}from"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import{DropdownList as m}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as u}from"../shared/dropdown-list/dropdown-list-state.js";import"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as h}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as f,ClearButton as v}from"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";import{PlaceholderLabel as w,ValueLabel as b}from"../shared/dropdown-wrapper/dropdown-wrapper.js";import{clearButtonContainer as y}from"../shared/input-wrapper/input-wrapper.styles.js";import{RangeInputInnerContainer as g}from"../shared/range-input-inner-container/range-input-inner-container.js";import{styledInputWrapper as j,rangeSelectorButton as x}from"./input-range-select.styles.js";const S=S=>{var{selectedOptions:T,placeholders:_={from:"Select",to:"Select"},options:C,disabled:O,className:A,readOnly:I,error:k,"data-testid":E,id:P,enableSearch:D=!1,searchFunction:L,searchPlaceholder:N,valueExtractor:q,valueToStringFunction:H,listExtractor:F,displayValueExtractor:R,onSelectOption:$,onShowOptions:G,onHideOptions:M,onRetry:B,optionsLoadState:W={from:"success",to:"success"},optionTruncationType:Z="middle",renderCustomSelectedOption:V,renderListItem:z,renderCustomCallToAction:K,alignment:J,dropdownZIndex:Q,dropdownRootNode:U,dropdownWidth:X,"aria-labelledby":Y,"aria-describedby":ee}=S,re=e(S,["selectedOptions","placeholders","options","disabled","className","readOnly","error","data-testid","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-labelledby","aria-describedby"]);const[oe,te]=n(),[ne,ie]=n(),[se,le]=n("none"),ae="none"!==se,de={from:i(null),to:i(null)},ce=i(null),pe=c(),me=`${pe}-range-listbox`,ue=`${pe}-from-label`,he=`${pe}-to-label`;s((()=>{te(null==T?void 0:T.from),ie(null==T?void 0:T.to)}),[T]),s((()=>{var e;ae&&"to"===se&&(null===(e=ce.current)||void 0===e||e.refocus({index:0}))}),[ae,se]);const fe=e=>{e||null==M||M(),e&&(null==G||G())},ve=e=>{var r,o;const t="from"===e?oe:ne;if(!t)return"";if(R)return R(t);if(q){const e=q(t);return H?H(e):null!==(o=null===(r=null==e?void 0:e.toString)||void 0===r?void 0:r.call(e))&&void 0!==o?o:""}return t.toString()},we=(e,r)=>{var o;if("middle"===Z){let t=0;return(null===(o=de[e])||void 0===o?void 0:o.current)&&(t=de[e].current.getBoundingClientRect().width),p.truncateOneLine(r,t,120,8)}return r},be=()=>{switch(se){case"from":return"start";case"to":return"end";case"none":return se}},ye=l((()=>{var e;return"none"===se?[]:null!==(e=null==C?void 0:C[se])&&void 0!==e?e:[]}),[se,C]),ge=l((()=>{if("none"===se)return[];const e="from"===se?oe:ne;return e?[e]:[]}),[se,oe,ne]),je=e=>{if(O||I)return;le("to"!==e||oe?e:"from"),fe(!0)},xe=e=>{var r;null===(r=de[e].current)||void 0===r||r.focus()},Se=e=>d("from"===e?ue:he,Y),Te=e=>r=>{r.stopPropagation(),r.preventDefault(),je(e)},_e=e=>r=>{if(!O&&!I)switch(r.key){case"Enter":case" ":case"ArrowDown":r.preventDefault(),je(e)}},Ce=(e,r)=>{if("none"!==se){if("from"===se)return te(e),null==$||$({from:e},r),ie(void 0),le("to"),fe(!0),void xe("to");ie(e),null==$||$({to:e},r),le("none"),fe(!1),xe("to")}},Oe=()=>{const e=se;le("none"),fe(!1),xe("to"===e?"to":"from"),oe&&ne||(te(void 0),ie(void 0))},Ae=e=>{e.stopPropagation(),e.preventDefault(),te(void 0),ie(void 0),null==$||$({from:void 0,to:void 0},void 0),xe("from")},Ie=e=>{const o="from"===e?oe:ne;return o?V?V(o):r(b,{truncateType:Z,children:we(e,ve(e))}):r(w,{truncateType:Z,children:we(e,(null==_?void 0:_[e])||"")})},ke=e=>r("button",{type:"button",role:"combobox","aria-labelledby":Se(e),"aria-describedby":ee,"aria-expanded":ae&&se===e,"aria-controls":me,"aria-disabled":O,"aria-readonly":I,onClick:Te(e),onKeyDown:_e(e),ref:de[e],tabIndex:0,className:x,children:Ie(e)});return r("div",Object.assign({id:P},re,{children:r(u,{children:r(h,{enabled:!I&&!O,isOpen:ae,renderElement:()=>o(f,{className:t(j,A),"data-testid":E,disabled:O,readOnly:I,error:k,focused:ae,children:[r(a,{id:ue,children:(null==_?void 0:_.from)||"Select From"}),r(a,{id:he,children:(null==_?void 0:_.to)||"Select To"}),o(g,{currentActive:be(),error:k,children:[ke("from"),ke("to")]}),!ae&&oe&&ne&&!I&&!O&&r("div",{className:y,children:r(v,{onClick:Ae,type:"button","aria-label":"Clear"})})]}),renderDropdown:()=>r(m,{ref:ce,"data-testid":`${E}-dropdown`,listboxId:me,ariaLabel:"from"===se?`Selecting for: ${null==_?void 0:_.from}`:"to"===se?`Selecting for: ${null==_?void 0:_.to}`:void 0,listItems:ye,onSelectItem:Ce,onDismiss:Oe,valueExtractor:q,listExtractor:F,selectedItems:ge,itemsLoadState:W[se],itemTruncationType:Z,onRetry:B,width:X,matchElementWidth:!X,enableSearch:D,searchFunction:L,searchPlaceholder:N,renderListItem:z,renderCustomCallToAction:K}),onOpen:()=>{O||I||"none"===se&&(le("from"),fe(!0))},onClose:()=>{le("none"),fe(!1),oe&&ne||(te(void 0),ie(void 0))},onDismiss:Oe,clickToToggle:!1,offset:8,alignment:J,fitAvailableHeight:!0,customZIndex:Q,rootNode:U})})}))};export{S as InputRangeSelect};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as o,jsxs as r}from"react/jsx-runtime";import t from"clsx";import{useState as n,useRef as i,useEffect as s,useMemo as l}from"react";import{VisuallyHidden as a,concatIds as d}from"../shared/accessibility/index.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"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as c}from"../util/simple-id-generator.js";import{StringHelper as p}from"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_mloii0.css";import{DropdownList as m}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as u}from"../shared/dropdown-list/dropdown-list-state.js";import"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as h}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as f,ClearButton as v}from"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_konwm.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";import{PlaceholderLabel as w,ValueLabel as b}from"../shared/dropdown-wrapper/dropdown-wrapper.js";import{clearButtonContainer as y}from"../shared/input-wrapper/input-wrapper.styles.js";import{RangeInputInnerContainer as g}from"../shared/range-input-inner-container/range-input-inner-container.js";import{styledInputWrapper as j,rangeSelectorButton as x}from"./input-range-select.styles.js";const S=S=>{var{selectedOptions:T,placeholders:_={from:"Select",to:"Select"},options:C,disabled:O,className:A,readOnly:I,error:k,"data-testid":E,id:P,enableSearch:D=!1,searchFunction:L,searchPlaceholder:N,valueExtractor:q,valueToStringFunction:H,listExtractor:F,displayValueExtractor:R,onSelectOption:$,onShowOptions:G,onHideOptions:M,onRetry:B,optionsLoadState:W={from:"success",to:"success"},optionTruncationType:Z="middle",renderCustomSelectedOption:V,renderListItem:K,renderCustomCallToAction:z,alignment:J,dropdownZIndex:Q,dropdownRootNode:U,dropdownWidth:X,"aria-labelledby":Y,"aria-describedby":ee}=S,oe=e(S,["selectedOptions","placeholders","options","disabled","className","readOnly","error","data-testid","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-labelledby","aria-describedby"]);const[re,te]=n(),[ne,ie]=n(),[se,le]=n("none"),ae="none"!==se,de={from:i(null),to:i(null)},ce=i(null),pe=c(),me=`${pe}-range-listbox`,ue=`${pe}-from-label`,he=`${pe}-to-label`;s((()=>{te(null==T?void 0:T.from),ie(null==T?void 0:T.to)}),[T]),s((()=>{var e;ae&&"to"===se&&(null===(e=ce.current)||void 0===e||e.refocus({index:0}))}),[ae,se]);const fe=e=>{e||null==M||M(),e&&(null==G||G())},ve=e=>{var o,r;const t="from"===e?re:ne;if(!t)return"";if(R)return R(t);if(q){const e=q(t);return H?H(e):null!==(r=null===(o=null==e?void 0:e.toString)||void 0===o?void 0:o.call(e))&&void 0!==r?r:""}return t.toString()},we=(e,o)=>{var r;if("middle"===Z){let t=0;return(null===(r=de[e])||void 0===r?void 0:r.current)&&(t=de[e].current.getBoundingClientRect().width),p.truncateOneLine(o,t,120,8)}return o},be=()=>{switch(se){case"from":return"start";case"to":return"end";case"none":return se}},ye=l((()=>{var e;return"none"===se?[]:null!==(e=null==C?void 0:C[se])&&void 0!==e?e:[]}),[se,C]),ge=l((()=>{if("none"===se)return[];const e="from"===se?re:ne;return e?[e]:[]}),[se,re,ne]),je=e=>{if(O||I)return;le("to"!==e||re?e:"from"),fe(!0)},xe=e=>{var o;null===(o=de[e].current)||void 0===o||o.focus()},Se=e=>d("from"===e?ue:he,Y),Te=e=>o=>{o.stopPropagation(),o.preventDefault(),je(e)},_e=e=>o=>{if(!O&&!I)switch(o.key){case"Enter":case" ":case"ArrowDown":o.preventDefault(),je(e)}},Ce=(e,o)=>{if("none"!==se){if("from"===se)return te(e),null==$||$({from:e},o),ie(void 0),le("to"),fe(!0),void xe("to");ie(e),null==$||$({to:e},o),le("none"),fe(!1),xe("to")}},Oe=()=>{const e=se;le("none"),fe(!1),xe("to"===e?"to":"from"),re&&ne||(te(void 0),ie(void 0))},Ae=e=>{e.stopPropagation(),e.preventDefault(),te(void 0),ie(void 0),null==$||$({from:void 0,to:void 0},void 0),xe("from")},Ie=e=>{const r="from"===e?re:ne;return r?V?V(r):o(b,{truncateType:Z,children:we(e,ve(e))}):o(w,{truncateType:Z,children:we(e,(null==_?void 0:_[e])||"")})},ke=e=>o("button",{type:"button",role:"combobox","aria-labelledby":Se(e),"aria-describedby":ee,"aria-expanded":ae&&se===e,"aria-controls":me,"aria-disabled":O,"aria-readonly":I,onClick:Te(e),onKeyDown:_e(e),ref:de[e],tabIndex:0,className:x,children:Ie(e)});return o("div",Object.assign({id:P},oe,{children:o(u,{children:o(h,{enabled:!I&&!O,isOpen:ae,renderElement:()=>r(f,{className:t(j,A),"data-testid":E,disabled:O,readOnly:I,error:k,focused:ae,children:[o(a,{id:ue,children:(null==_?void 0:_.from)||"Select From"}),o(a,{id:he,children:(null==_?void 0:_.to)||"Select To"}),r(g,{currentActive:be(),error:k,children:[ke("from"),ke("to")]}),!ae&&re&&ne&&!I&&!O&&o("div",{className:y,children:o(v,{onClick:Ae,type:"button","aria-label":"Clear"})})]}),renderDropdown:()=>o(m,{ref:ce,"data-testid":`${E}-dropdown`,listboxId:me,ariaLabel:"from"===se?`Selecting for: ${null==_?void 0:_.from}`:"to"===se?`Selecting for: ${null==_?void 0:_.to}`:void 0,listItems:ye,onSelectItem:Ce,onDismiss:Oe,valueExtractor:q,listExtractor:F,selectedItems:ge,itemsLoadState:W[se],itemTruncationType:Z,onRetry:B,width:X,matchElementWidth:!X,enableSearch:D,searchFunction:L,searchPlaceholder:N,renderListItem:K,renderCustomCallToAction:z}),onOpen:()=>{O||I||"none"===se&&(le("from"),fe(!0))},onClose:()=>{le("none"),fe(!1),re&&ne||(te(void 0),ie(void 0))},onDismiss:Oe,clickToToggle:!1,offset:8,alignment:J,fitAvailableHeight:!0,customZIndex:Q,rootNode:U})})}))};export{S as InputRangeSelect};
 //# sourceMappingURL=input-range-select.js.map

package/input-range-select/input-range-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-range-select.js","sources":["../../src/input-range-select/input-range-select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport type { DropdownListApi } from \"../shared/dropdown-list\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { ClearButton, InputWrapper } from \"../shared/input-wrapper\";\nimport * as inputWrapperStyles from \"../shared/input-wrapper/input-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport * as styles from \"./input-range-select.styles\";\nimport type { InputRangeSelectProps } from \"./types\";\n\ntype RangeType = \"from\" \| \"to\";\n\nexport const InputRangeSelect = <T, V>({\n selectedOptions,\n placeholders = { from: \"Select\", to: \"Select\" },\n options,\n disabled,\n className,\n readOnly,\n error,\n \"data-testid\": testId,\n id,\n enableSearch = false,\n searchFunction,\n searchPlaceholder,\n valueExtractor,\n valueToStringFunction,\n listExtractor,\n displayValueExtractor,\n onSelectOption,\n onShowOptions,\n onHideOptions,\n onRetry,\n optionsLoadState = { from: \"success\", to: \"success\" },\n optionTruncationType = \"middle\",\n renderCustomSelectedOption,\n renderListItem,\n renderCustomCallToAction,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: InputRangeSelectProps<T, V>): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [selectedFromValue, setSelectedFromValue] = useState<T \| undefined>();\n const [selectedToValue, setSelectedToValue] = useState<T \| undefined>();\n const [focusedInput, setFocusedInput] = useState<RangeType \| \"none\">(\n \"none\"\n );\n const isOpen = focusedInput !== \"none\";\n\n const labelButtonRef = {\n from: useRef<HTMLButtonElement>(null),\n to: useRef<HTMLButtonElement>(null),\n };\n const dropdownRef = useRef<DropdownListApi>(null);\n\n const internalId = useId();\n const listboxId = `${internalId}-range-listbox`;\n const fromLabelId = `${internalId}-from-label`;\n const toLabelId = `${internalId}-to-label`;\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelectedFromValue(selectedOptions?.from);\n setSelectedToValue(selectedOptions?.to);\n }, [selectedOptions]);\n\n useEffect(() => {\n if (!isOpen) return;\n\n if (focusedInput === \"to\") {\n dropdownRef.current?.refocus({ index: 0 });\n }\n }, [isOpen, focusedInput]);\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (!show) onHideOptions?.();\n if (show) onShowOptions?.();\n };\n\n const getDisplayValue = (rangeType: RangeType): string => {\n const selected =\n rangeType === \"from\" ? selectedFromValue : selectedToValue;\n if (!selected) return \"\";\n\n if (displayValueExtractor) return displayValueExtractor(selected);\n\n if (valueExtractor) {\n const value = valueExtractor(selected);\n return valueToStringFunction\n ? valueToStringFunction(value)\n : value?.toString?.() ?? \"\";\n }\n\n return selected.toString();\n };\n\n const truncateValue = (type: RangeType, value: string) => {\n if (optionTruncationType === \"middle\") {\n let widthOfElement = 0;\n if (labelButtonRef[type]?.current) {\n widthOfElement =\n labelButtonRef[type].current.getBoundingClientRect().width;\n }\n return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n }\n return value;\n };\n\n const getCurrentFocused = (): \"none\" \| \"start\" \| \"end\" => {\n switch (focusedInput) {\n case \"from\":\n return \"start\";\n case \"to\":\n return \"end\";\n case \"none\":\n return focusedInput;\n }\n };\n\n const currentOptions = useMemo(() => {\n if (focusedInput === \"none\") return [];\n return options?.[focusedInput] ?? [];\n }, [focusedInput, options]);\n\n const currentSelectedItems = useMemo(() => {\n if (focusedInput === \"none\") return [];\n const selected =\n focusedInput === \"from\" ? selectedFromValue : selectedToValue;\n return selected ? [selected] : [];\n }, [focusedInput, selectedFromValue, selectedToValue]);\n\n const openDropdownFor = (rangeType: RangeType) => {\n if (disabled \|\| readOnly) return;\n\n const nextFocusedInput =\n rangeType === \"to\" && !selectedFromValue ? \"from\" : rangeType;\n\n setFocusedInput(nextFocusedInput);\n triggerOptionDisplayCallback(true);\n };\n\n const focusButton = (type: RangeType) => {\n labelButtonRef[type].current?.focus();\n };\n\n const getButtonLabelledBy = (rangeType: RangeType) => {\n const rangeLabelId = rangeType === \"from\" ? fromLabelId : toLabelId;\n return concatIds(rangeLabelId, ariaLabelledBy);\n };\n\n const getDropdownAriaLabel = () => {\n if (focusedInput === \"from\") {\n return `Selecting for: ${placeholders?.from}`;\n }\n\n if (focusedInput === \"to\") {\n return `Selecting for: ${placeholders?.to}`;\n }\n\n return undefined;\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSelectorClick =\n (rangeType: RangeType) => (event: React.MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n openDropdownFor(rangeType);\n };\n\n const handleSelectorKeyDown =\n (rangeType: RangeType) =>\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled \|\| readOnly) return;\n\n switch (event.key) {\n case \"Enter\":\n case \" \":\n case \"ArrowDown\":\n event.preventDefault();\n openDropdownFor(rangeType);\n break;\n default:\n break;\n }\n };\n\n const handleListItemClick = (item: T, extractedValue: V) => {\n if (focusedInput === \"none\") return;\n\n if (focusedInput === \"from\") {\n setSelectedFromValue(item);\n onSelectOption?.({ from: item }, extractedValue);\n\n setSelectedToValue(undefined);\n setFocusedInput(\"to\");\n triggerOptionDisplayCallback(true);\n focusButton(\"to\");\n return;\n }\n\n setSelectedToValue(item);\n onSelectOption?.({ to: item }, extractedValue);\n\n setFocusedInput(\"none\");\n triggerOptionDisplayCallback(false);\n focusButton(\"to\");\n };\n\n const handleDismiss = () => {\n const last = focusedInput;\n\n setFocusedInput(\"none\");\n triggerOptionDisplayCallback(false);\n\n if (last === \"to\") focusButton(\"to\");\n else focusButton(\"from\");\n\n if (!selectedFromValue \|\| !selectedToValue) {\n setSelectedFromValue(undefined);\n setSelectedToValue(undefined);\n }\n };\n\n const handleClose = () => {\n setFocusedInput(\"none\");\n triggerOptionDisplayCallback(false);\n\n if (!selectedFromValue \|\| !selectedToValue) {\n setSelectedFromValue(undefined);\n setSelectedToValue(undefined);\n }\n };\n\n const handleOpen = () => {\n if (disabled \|\| readOnly) return;\n\n if (focusedInput === \"none\") {\n setFocusedInput(\"from\");\n triggerOptionDisplayCallback(true);\n }\n };\n\n const handleClear = (event: React.MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n setSelectedFromValue(undefined);\n setSelectedToValue(undefined);\n onSelectOption?.({ from: undefined, to: undefined }, undefined);\n\n focusButton(\"from\");\n };\n\n // =============================================================================\n // RENDER\n // =============================================================================\n const renderLabel = (rangeType: RangeType) => {\n const selected =\n rangeType === \"from\" ? selectedFromValue : selectedToValue;\n\n if (!selected) {\n return (\n <PlaceholderLabel truncateType={optionTruncationType}>\n {truncateValue(rangeType, placeholders?.[rangeType] \|\| \"\")}\n </PlaceholderLabel>\n );\n }\n\n if (renderCustomSelectedOption) {\n return renderCustomSelectedOption(selected);\n }\n\n return (\n <ValueLabel truncateType={optionTruncationType}>\n {truncateValue(rangeType, getDisplayValue(rangeType))}\n </ValueLabel>\n );\n };\n\n const renderSelectorContent = (rangeType: RangeType) => (\n <button\n type=\"button\"\n role=\"combobox\"\n aria-labelledby={getButtonLabelledBy(rangeType)}\n aria-describedby={ariaDescribedBy}\n aria-expanded={isOpen && focusedInput === rangeType}\n aria-controls={listboxId}\n aria-disabled={disabled}\n aria-readonly={readOnly}\n onClick={handleSelectorClick(rangeType)}\n onKeyDown={handleSelectorKeyDown(rangeType)}\n ref={labelButtonRef[rangeType]}\n tabIndex={0}\n className={styles.rangeSelectorButton}\n >\n {renderLabel(rangeType)}\n </button>\n );\n\n const renderElement = () => {\n return (\n <InputWrapper\n className={clsx(styles.styledInputWrapper, className)}\n data-testid={testId}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n focused={isOpen}\n >\n <VisuallyHidden id={fromLabelId}>\n {placeholders?.from \|\| \"Select From\"}\n </VisuallyHidden>\n <VisuallyHidden id={toLabelId}>\n {placeholders?.to \|\| \"Select To\"}\n </VisuallyHidden>\n\n <RangeInputInnerContainer\n currentActive={getCurrentFocused()}\n error={error}\n >\n {renderSelectorContent(\"from\")}\n {renderSelectorContent(\"to\")}\n </RangeInputInnerContainer>\n\n {!isOpen &&\n selectedFromValue &&\n selectedToValue &&\n !readOnly &&\n !disabled && (\n <div\n className={inputWrapperStyles.clearButtonContainer}\n >\n <ClearButton\n onClick={handleClear}\n type=\"button\"\n aria-label=\"Clear\"\n />\n </div>\n )}\n </InputWrapper>\n );\n };\n\n const renderDropdown = () => {\n return (\n <DropdownList\n ref={dropdownRef}\n data-testid={`${testId}-dropdown`}\n listboxId={listboxId}\n ariaLabel={getDropdownAriaLabel()}\n listItems={currentOptions}\n onSelectItem={handleListItemClick}\n onDismiss={handleDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n selectedItems={currentSelectedItems}\n itemsLoadState={optionsLoadState[focusedInput as RangeType]}\n itemTruncationType={optionTruncationType}\n onRetry={onRetry}\n width={dropdownWidth}\n matchElementWidth={!dropdownWidth}\n enableSearch={enableSearch}\n searchFunction={searchFunction}\n searchPlaceholder={searchPlaceholder}\n renderListItem={renderListItem}\n renderCustomCallToAction={renderCustomCallToAction}\n />\n );\n };\n\n return (\n <div id={id} {...otherProps}>\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={isOpen}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle={false}\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n </div>\n );\n};\n"],"names":["InputRangeSelect","_a","selectedOptions","placeholders","from","to","options","disabled","className","readOnly","error","testId","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","selectedFromValue","setSelectedFromValue","useState","selectedToValue","setSelectedToValue","focusedInput","setFocusedInput","isOpen","labelButtonRef","useRef","dropdownRef","internalId","useId","listboxId","fromLabelId","toLabelId","useEffect","current","refocus","index","triggerOptionDisplayCallback","show","getDisplayValue","rangeType","selected","value","_b","toString","call","truncateValue","type","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","getCurrentFocused","currentOptions","useMemo","currentSelectedItems","openDropdownFor","focusButton","focus","getButtonLabelledBy","concatIds","handleSelectorClick","event","stopPropagation","preventDefault","handleSelectorKeyDown","key","handleListItemClick","item","extractedValue","undefined","handleDismiss","last","handleClear","renderLabel","_jsx","ValueLabel","truncateType","children","PlaceholderLabel","renderSelectorContent","role","onClick","onKeyDown","ref","tabIndex","styles.rangeSelectorButton","Object","assign","DropdownListState","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","clsx","styles.styledInputWrapper","focused","VisuallyHidden","RangeInputInnerContainer","currentActive","inputWrapperStyles.clearButtonContainer","ClearButton","renderDropdown","DropdownList","ariaLabel","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"input-range-select.js","sources":["../../src/input-range-select/input-range-select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport type { DropdownListApi } from \"../shared/dropdown-list\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { ClearButton, InputWrapper } from \"../shared/input-wrapper\";\nimport * as inputWrapperStyles from \"../shared/input-wrapper/input-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport * as styles from \"./input-range-select.styles\";\nimport type { InputRangeSelectProps } from \"./types\";\n\ntype RangeType = \"from\" \| \"to\";\n\nexport const InputRangeSelect = <T, V>({\n selectedOptions,\n placeholders = { from: \"Select\", to: \"Select\" },\n options,\n disabled,\n className,\n readOnly,\n error,\n \"data-testid\": testId,\n id,\n enableSearch = false,\n searchFunction,\n searchPlaceholder,\n valueExtractor,\n valueToStringFunction,\n listExtractor,\n displayValueExtractor,\n onSelectOption,\n onShowOptions,\n onHideOptions,\n onRetry,\n optionsLoadState = { from: \"success\", to: \"success\" },\n optionTruncationType = \"middle\",\n renderCustomSelectedOption,\n renderListItem,\n renderCustomCallToAction,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: InputRangeSelectProps<T, V>): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [selectedFromValue, setSelectedFromValue] = useState<T \| undefined>();\n const [selectedToValue, setSelectedToValue] = useState<T \| undefined>();\n const [focusedInput, setFocusedInput] = useState<RangeType \| \"none\">(\n \"none\"\n );\n const isOpen = focusedInput !== \"none\";\n\n const labelButtonRef = {\n from: useRef<HTMLButtonElement>(null),\n to: useRef<HTMLButtonElement>(null),\n };\n const dropdownRef = useRef<DropdownListApi>(null);\n\n const internalId = useId();\n const listboxId = `${internalId}-range-listbox`;\n const fromLabelId = `${internalId}-from-label`;\n const toLabelId = `${internalId}-to-label`;\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelectedFromValue(selectedOptions?.from);\n setSelectedToValue(selectedOptions?.to);\n }, [selectedOptions]);\n\n useEffect(() => {\n if (!isOpen) return;\n\n if (focusedInput === \"to\") {\n dropdownRef.current?.refocus({ index: 0 });\n }\n }, [isOpen, focusedInput]);\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (!show) onHideOptions?.();\n if (show) onShowOptions?.();\n };\n\n const getDisplayValue = (rangeType: RangeType): string => {\n const selected =\n rangeType === \"from\" ? selectedFromValue : selectedToValue;\n if (!selected) return \"\";\n\n if (displayValueExtractor) return displayValueExtractor(selected);\n\n if (valueExtractor) {\n const value = valueExtractor(selected);\n return valueToStringFunction\n ? valueToStringFunction(value)\n : value?.toString?.() ?? \"\";\n }\n\n return selected.toString();\n };\n\n const truncateValue = (type: RangeType, value: string) => {\n if (optionTruncationType === \"middle\") {\n let widthOfElement = 0;\n if (labelButtonRef[type]?.current) {\n widthOfElement =\n labelButtonRef[type].current.getBoundingClientRect().width;\n }\n return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n }\n return value;\n };\n\n const getCurrentFocused = (): \"none\" \| \"start\" \| \"end\" => {\n switch (focusedInput) {\n case \"from\":\n return \"start\";\n case \"to\":\n return \"end\";\n case \"none\":\n return focusedInput;\n }\n };\n\n const currentOptions = useMemo(() => {\n if (focusedInput === \"none\") return [];\n return options?.[focusedInput] ?? [];\n }, [focusedInput, options]);\n\n const currentSelectedItems = useMemo(() => {\n if (focusedInput === \"none\") return [];\n const selected =\n focusedInput === \"from\" ? selectedFromValue : selectedToValue;\n return selected ? [selected] : [];\n }, [focusedInput, selectedFromValue, selectedToValue]);\n\n const openDropdownFor = (rangeType: RangeType) => {\n if (disabled \|\| readOnly) return;\n\n const nextFocusedInput =\n rangeType === \"to\" && !selectedFromValue ? \"from\" : rangeType;\n\n setFocusedInput(nextFocusedInput);\n triggerOptionDisplayCallback(true);\n };\n\n const focusButton = (type: RangeType) => {\n labelButtonRef[type].current?.focus();\n };\n\n const getButtonLabelledBy = (rangeType: RangeType) => {\n const rangeLabelId = rangeType === \"from\" ? fromLabelId : toLabelId;\n return concatIds(rangeLabelId, ariaLabelledBy);\n };\n\n const getDropdownAriaLabel = () => {\n if (focusedInput === \"from\") {\n return `Selecting for: ${placeholders?.from}`;\n }\n\n if (focusedInput === \"to\") {\n return `Selecting for: ${placeholders?.to}`;\n }\n\n return undefined;\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSelectorClick =\n (rangeType: RangeType) => (event: React.MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n openDropdownFor(rangeType);\n };\n\n const handleSelectorKeyDown =\n (rangeType: RangeType) =>\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled \|\| readOnly) return;\n\n switch (event.key) {\n case \"Enter\":\n case \" \":\n case \"ArrowDown\":\n event.preventDefault();\n openDropdownFor(rangeType);\n break;\n default:\n break;\n }\n };\n\n const handleListItemClick = (item: T, extractedValue: V) => {\n if (focusedInput === \"none\") return;\n\n if (focusedInput === \"from\") {\n setSelectedFromValue(item);\n onSelectOption?.({ from: item }, extractedValue);\n\n setSelectedToValue(undefined);\n setFocusedInput(\"to\");\n triggerOptionDisplayCallback(true);\n focusButton(\"to\");\n return;\n }\n\n setSelectedToValue(item);\n onSelectOption?.({ to: item }, extractedValue);\n\n setFocusedInput(\"none\");\n triggerOptionDisplayCallback(false);\n focusButton(\"to\");\n };\n\n const handleDismiss = () => {\n const last = focusedInput;\n\n setFocusedInput(\"none\");\n triggerOptionDisplayCallback(false);\n\n if (last === \"to\") focusButton(\"to\");\n else focusButton(\"from\");\n\n if (!selectedFromValue \|\| !selectedToValue) {\n setSelectedFromValue(undefined);\n setSelectedToValue(undefined);\n }\n };\n\n const handleClose = () => {\n setFocusedInput(\"none\");\n triggerOptionDisplayCallback(false);\n\n if (!selectedFromValue \|\| !selectedToValue) {\n setSelectedFromValue(undefined);\n setSelectedToValue(undefined);\n }\n };\n\n const handleOpen = () => {\n if (disabled \|\| readOnly) return;\n\n if (focusedInput === \"none\") {\n setFocusedInput(\"from\");\n triggerOptionDisplayCallback(true);\n }\n };\n\n const handleClear = (event: React.MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n setSelectedFromValue(undefined);\n setSelectedToValue(undefined);\n onSelectOption?.({ from: undefined, to: undefined }, undefined);\n\n focusButton(\"from\");\n };\n\n // =============================================================================\n // RENDER\n // =============================================================================\n const renderLabel = (rangeType: RangeType) => {\n const selected =\n rangeType === \"from\" ? selectedFromValue : selectedToValue;\n\n if (!selected) {\n return (\n <PlaceholderLabel truncateType={optionTruncationType}>\n {truncateValue(rangeType, placeholders?.[rangeType] \|\| \"\")}\n </PlaceholderLabel>\n );\n }\n\n if (renderCustomSelectedOption) {\n return renderCustomSelectedOption(selected);\n }\n\n return (\n <ValueLabel truncateType={optionTruncationType}>\n {truncateValue(rangeType, getDisplayValue(rangeType))}\n </ValueLabel>\n );\n };\n\n const renderSelectorContent = (rangeType: RangeType) => (\n <button\n type=\"button\"\n role=\"combobox\"\n aria-labelledby={getButtonLabelledBy(rangeType)}\n aria-describedby={ariaDescribedBy}\n aria-expanded={isOpen && focusedInput === rangeType}\n aria-controls={listboxId}\n aria-disabled={disabled}\n aria-readonly={readOnly}\n onClick={handleSelectorClick(rangeType)}\n onKeyDown={handleSelectorKeyDown(rangeType)}\n ref={labelButtonRef[rangeType]}\n tabIndex={0}\n className={styles.rangeSelectorButton}\n >\n {renderLabel(rangeType)}\n </button>\n );\n\n const renderElement = () => {\n return (\n <InputWrapper\n className={clsx(styles.styledInputWrapper, className)}\n data-testid={testId}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n focused={isOpen}\n >\n <VisuallyHidden id={fromLabelId}>\n {placeholders?.from \|\| \"Select From\"}\n </VisuallyHidden>\n <VisuallyHidden id={toLabelId}>\n {placeholders?.to \|\| \"Select To\"}\n </VisuallyHidden>\n\n <RangeInputInnerContainer\n currentActive={getCurrentFocused()}\n error={error}\n >\n {renderSelectorContent(\"from\")}\n {renderSelectorContent(\"to\")}\n </RangeInputInnerContainer>\n\n {!isOpen &&\n selectedFromValue &&\n selectedToValue &&\n !readOnly &&\n !disabled && (\n <div\n className={inputWrapperStyles.clearButtonContainer}\n >\n <ClearButton\n onClick={handleClear}\n type=\"button\"\n aria-label=\"Clear\"\n />\n </div>\n )}\n </InputWrapper>\n );\n };\n\n const renderDropdown = () => {\n return (\n <DropdownList\n ref={dropdownRef}\n data-testid={`${testId}-dropdown`}\n listboxId={listboxId}\n ariaLabel={getDropdownAriaLabel()}\n listItems={currentOptions}\n onSelectItem={handleListItemClick}\n onDismiss={handleDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n selectedItems={currentSelectedItems}\n itemsLoadState={optionsLoadState[focusedInput as RangeType]}\n itemTruncationType={optionTruncationType}\n onRetry={onRetry}\n width={dropdownWidth}\n matchElementWidth={!dropdownWidth}\n enableSearch={enableSearch}\n searchFunction={searchFunction}\n searchPlaceholder={searchPlaceholder}\n renderListItem={renderListItem}\n renderCustomCallToAction={renderCustomCallToAction}\n />\n );\n };\n\n return (\n <div id={id} {...otherProps}>\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={isOpen}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle={false}\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n </div>\n );\n};\n"],"names":["InputRangeSelect","_a","selectedOptions","placeholders","from","to","options","disabled","className","readOnly","error","testId","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","selectedFromValue","setSelectedFromValue","useState","selectedToValue","setSelectedToValue","focusedInput","setFocusedInput","isOpen","labelButtonRef","useRef","dropdownRef","internalId","useId","listboxId","fromLabelId","toLabelId","useEffect","current","refocus","index","triggerOptionDisplayCallback","show","getDisplayValue","rangeType","selected","value","_b","toString","call","truncateValue","type","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","getCurrentFocused","currentOptions","useMemo","currentSelectedItems","openDropdownFor","focusButton","focus","getButtonLabelledBy","concatIds","handleSelectorClick","event","stopPropagation","preventDefault","handleSelectorKeyDown","key","handleListItemClick","item","extractedValue","undefined","handleDismiss","last","handleClear","renderLabel","_jsx","ValueLabel","truncateType","children","PlaceholderLabel","renderSelectorContent","role","onClick","onKeyDown","ref","tabIndex","styles.rangeSelectorButton","Object","assign","DropdownListState","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","clsx","styles.styledInputWrapper","focused","VisuallyHidden","RangeInputInnerContainer","currentActive","inputWrapperStyles.clearButtonContainer","ClearButton","renderDropdown","DropdownList","ariaLabel","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"+jFAsBO,MAAMA,EAA0BC,QAAAC,gBACnCA,EAAeC,aACfA,EAAe,CAAEC,KAAM,SAAUC,GAAI,UAAUC,QAC/CA,EAAOC,SACPA,EAAQC,UACRA,EAASC,SACTA,EAAQC,MACRA,EACA,cAAeC,EAAMC,GACrBA,EAAEC,aACFA,GAAe,EAAKC,eACpBA,EAAcC,kBACdA,EAAiBC,eACjBA,EAAcC,sBACdA,EAAqBC,cACrBA,EAAaC,sBACbA,EAAqBC,eACrBA,EAAcC,cACdA,EAAaC,cACbA,EAAaC,QACbA,EAAOC,iBACPA,EAAmB,CAAEpB,KAAM,UAAWC,GAAI,WAAWoB,qBACrDA,EAAuB,SAAQC,2BAC/BA,EAA0BC,eAC1BA,EAAcC,yBACdA,EAAwBC,UACxBA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,cAChBA,EACA,kBAAmBC,EACnB,mBAAoBC,MACjBC,GAAUC,EAAAnC,EAhCsB,CAAA,kBAAA,eAAA,UAAA,WAAA,YAAA,WAAA,QAAA,cAAA,KAAA,eAAA,iBAAA,oBAAA,iBAAA,wBAAA,gBAAA,wBAAA,iBAAA,gBAAA,gBAAA,UAAA,mBAAA,uBAAA,6BAAA,iBAAA,2BAAA,YAAA,iBAAA,mBAAA,gBAAA,kBAAA,qBAqCnC,MAAOoC,GAAmBC,IAAwBC,KAC3CC,GAAiBC,IAAsBF,KACvCG,GAAcC,IAAmBJ,EACpC,QAEEK,GAA0B,SAAjBF,GAETG,GAAiB,CACnBzC,KAAM0C,EAA0B,MAChCzC,GAAIyC,EAA0B,OAE5BC,GAAcD,EAAwB,MAEtCE,GAAaC,IACbC,GAAY,GAAGF,mBACfG,GAAc,GAAGH,gBACjBI,GAAY,GAAGJ,cAKrBK,GAAU,KACNf,GAAqBpC,eAAAA,EAAiBE,MACtCqC,GAAmBvC,eAAAA,EAAiBG,GAAG,GACxC,CAACH,IAEJmD,GAAU,WACDT,IAEgB,OAAjBF,KACmB,QAAnBzC,EAAA8C,GAAYO,eAAO,IAAArD,GAAAA,EAAEsD,QAAQ,CAAEC,MAAO,IAC1C,GACD,CAACZ,GAAQF,KAKZ,MAAMe,GAAgCC,IAC7BA,GAAMpC,SAAAA,IACPoC,IAAMrC,SAAAA,IAAiB,EAGzBsC,GAAmBC,YACrB,MAAMC,EACY,SAAdD,EAAuBvB,GAAoBG,GAC/C,IAAKqB,EAAU,MAAO,GAEtB,GAAI1C,EAAuB,OAAOA,EAAsB0C,GAExD,GAAI7C,EAAgB,CAChB,MAAM8C,EAAQ9C,EAAe6C,GAC7B,OAAO5C,EACDA,EAAsB6C,GACH,QAAnBC,EAAe,QAAf9D,EAAA6D,aAAK,EAALA,EAAOE,gBAAQ,IAAA/D,OAAA,EAAAA,EAAAgE,KAAAH,UAAI,IAAAC,EAAAA,EAAI,EACjC,CAEA,OAAOF,EAASG,UAAU,EAGxBE,GAAgB,CAACC,EAAiBL,WACpC,GAA6B,WAAzBrC,EAAmC,CACnC,IAAI2C,EAAiB,EAKrB,OAJwB,QAApBnE,EAAA4C,GAAesB,UAAK,IAAAlE,OAAA,EAAAA,EAAEqD,WACtBc,EACIvB,GAAesB,GAAMb,QAAQe,wBAAwBC,OAEtDC,EAAaC,gBAAgBV,EAAOM,EAAgB,IAAK,EACpE,CACA,OAAON,CAAK,EAGVW,GAAoB,KACtB,OAAQ/B,IACJ,IAAK,OACD,MAAO,QACX,IAAK,KACD,MAAO,MACX,IAAK,OACD,OAAOA,KAIbgC,GAAiBC,GAAQ,WAC3B,MAAqB,SAAjBjC,GAAgC,GACN,QAAvBzC,EAAAK,aAAO,EAAPA,EAAUoC,WAAa,IAAAzC,EAAAA,EAAI,EAAE,GACrC,CAACyC,GAAcpC,IAEZsE,GAAuBD,GAAQ,KACjC,GAAqB,SAAjBjC,GAAyB,MAAO,GACpC,MAAMmB,EACe,SAAjBnB,GAA0BL,GAAoBG,GAClD,OAAOqB,EAAW,CAACA,GAAY,EAAE,GAClC,CAACnB,GAAcL,GAAmBG,KAE/BqC,GAAmBjB,IACrB,GAAIrD,GAAYE,EAAU,OAK1BkC,GAFkB,OAAdiB,GAAuBvB,GAA6BuB,EAAT,QAG/CH,IAA6B,EAAK,EAGhCqB,GAAeX,UACW,QAA5BlE,EAAA4C,GAAesB,GAAMb,eAAO,IAAArD,GAAAA,EAAE8E,OAAO,EAGnCC,GAAuBpB,GAElBqB,EAD4B,SAAdrB,EAAuBT,GAAcC,GAC3BnB,GAkB7BiD,GACDtB,GAA0BuB,IACvBA,EAAMC,kBACND,EAAME,iBACNR,GAAgBjB,EAAU,EAG5B0B,GACD1B,GACAuB,IACG,IAAI5E,IAAYE,EAEhB,OAAQ0E,EAAMI,KACV,IAAK,QACL,IAAK,IACL,IAAK,YACDJ,EAAME,iBACNR,GAAgBjB,KAO1B4B,GAAsB,CAACC,EAASC,KAClC,GAAqB,SAAjBhD,GAAJ,CAEA,GAAqB,SAAjBA,GAQA,OAPAJ,GAAqBmD,GACrBrE,SAAAA,EAAiB,CAAEhB,KAAMqF,GAAQC,GAEjCjD,QAAmBkD,GACnBhD,GAAgB,MAChBc,IAA6B,QAC7BqB,GAAY,MAIhBrC,GAAmBgD,GACnBrE,SAAAA,EAAiB,CAAEf,GAAIoF,GAAQC,GAE/B/C,GAAgB,QAChBc,IAA6B,GAC7BqB,GAAY,KAlBiB,CAkBZ,EAGfc,GAAgB,KAClB,MAAMC,EAAOnD,GAEbC,GAAgB,QAChBc,IAA6B,GAEVqB,GAAN,OAATe,EAA2B,KACd,QAEZxD,IAAsBG,KACvBF,QAAqBqD,GACrBlD,QAAmBkD,GACvB,EAsBEG,GAAeX,IACjBA,EAAMC,kBACND,EAAME,iBACN/C,QAAqBqD,GACrBlD,QAAmBkD,GACnBvE,SAAAA,EAAiB,CAAEhB,UAAMuF,EAAWtF,QAAIsF,QAAaA,GAErDb,GAAY,OAAO,EAMjBiB,GAAenC,IACjB,MAAMC,EACY,SAAdD,EAAuBvB,GAAoBG,GAE/C,OAAKqB,EAQDnC,EACOA,EAA2BmC,GAIlCmC,EAACC,GAAWC,aAAczE,EAAoB0E,SACzCjC,GAAcN,EAAWD,GAAgBC,MAZ1CoC,EAACI,EAAgB,CAACF,aAAczE,EAAoB0E,SAC/CjC,GAAcN,GAAWzD,aAAY,EAAZA,EAAeyD,KAAc,KAYlD,EAIfyC,GAAyBzC,GAC3BoC,EAAA,SAAA,CACI7B,KAAK,SACLmC,KAAK,WAAU,kBACEtB,GAAoBpB,GAAU,mBAC7B1B,mBACHU,IAAUF,KAAiBkB,EAAS,gBACpCV,GAAS,gBACT3C,kBACAE,EACf8F,QAASrB,GAAoBtB,GAC7B4C,UAAWlB,GAAsB1B,GACjC6C,IAAK5D,GAAee,GACpB8C,SAAU,EACVlG,UAAWmG,EAA0BR,SAEpCJ,GAAYnC,KA2ErB,OACIoC,EAAA,MAAAY,OAAAC,OAAA,CAAKjG,GAAIA,GAAQuB,GAAU,CAAAgE,SACvBH,EAACc,EAAiB,CAAAX,SACdH,EAACe,GACGC,SAAUvG,IAAaF,EACvBqC,OAAQA,GACRqE,cA7EM,IAEdC,EAACC,EAAY,CACT3G,UAAW4G,EAAKC,EAA2B7G,GAAU,cACxCG,EACbJ,SAAUA,EACVE,SAAUA,EACVC,MAAOA,EACP4G,QAAS1E,GAAMuD,SAAA,CAEfH,EAACuB,EAAc,CAAC3G,GAAIuC,GAAWgD,UAC1BhG,aAAY,EAAZA,EAAcC,OAAQ,gBAE3B4F,EAACuB,EAAc,CAAC3G,GAAIwC,GAAS+C,UACxBhG,aAAY,EAAZA,EAAcE,KAAM,cAGzB6G,EAACM,EAAwB,CACrBC,cAAehD,KACf/D,MAAOA,EAAKyF,SAAA,CAEXE,GAAsB,QACtBA,GAAsB,UAGzBzD,IACEP,IACAG,KACC/B,IACAF,GACGyF,EAAA,MAAA,CACIxF,UAAWkH,EAAuCvB,SAElDH,EAAC2B,EAAW,CACRpB,QAAST,GACT3B,KAAK,SAAQ,aACF,eA0CvByD,eAlCO,IAEf5B,EAAC6B,GACGpB,IAAK1D,GAAW,cACH,GAAGpC,aAChBuC,UAAWA,GACX4E,UAxMa,SAAjBpF,GACO,kBAAkBvC,eAAAA,EAAcC,OAGtB,OAAjBsC,GACO,kBAAkBvC,eAAAA,EAAcE,UAD3C,EAqMQ0H,UAAWrD,GACXsD,aAAcxC,GACdyC,UAAWrC,GACX5E,eAAgBA,EAChBE,cAAeA,EACfgH,cAAetD,GACfuD,eAAgB3G,EAAiBkB,IACjC0F,mBAAoB3G,EACpBF,QAASA,EACT+C,MAAOtC,EACPqG,mBAAoBrG,EACpBnB,aAAcA,EACdC,eAAgBA,EAChBC,kBAAmBA,EACnBY,eAAgBA,EAChBC,yBAA0BA,IAatB0G,OAhJG,KACX/H,GAAYE,GAEK,SAAjBiC,KACAC,GAAgB,QAChBc,IAA6B,GACjC,EA2IY8E,QA3JI,KAChB5F,GAAgB,QAChBc,IAA6B,GAExBpB,IAAsBG,KACvBF,QAAqBqD,GACrBlD,QAAmBkD,GACvB,EAqJYsC,UAAWrC,GACX4C,eAAe,EACfC,OAAQ,EACR5G,UAAWA,EACX6G,oBAAkB,EAClBC,aAAc7G,EACd8G,SAAU7G,QAGhB"}

package/input-select/input-select.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{useState as r,useRef as t,useEffect as o}from"react";import"clsx";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"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as i}from"../util/simple-id-generator.js";import{StringHelper as s}from"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import{DropdownList as n}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as l}from"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as a}from"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../_virtual/_tslib.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as d}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputBox as p}from"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";import{LabelContainer as c,PlaceholderLabel as m,ValueLabel as u}from"../shared/dropdown-wrapper/dropdown-wrapper.js";const h=({selectedOption:h,placeholder:f="Select",options:w,disabled:j,error:x,className:b,"data-testid":g,id:y,"aria-labelledby":v,"aria-describedby":_,"aria-invalid":T,enableSearch:I=!1,searchFunction:S,searchPlaceholder:A,valueExtractor:k,valueToStringFunction:C,listExtractor:O,displayValueExtractor:R,onSelectOption:q,onShowOptions:D,onHideOptions:E,onRetry:L,optionsLoadState:H="success",optionTruncationType:N="end",renderCustomSelectedOption:P,renderListItem:B,hideNoResultsDisplay:G,noResultsDescription:F,customLabels:M,renderCustomCallToAction:W,onBlur:Z,variant:z="default",readOnly:V,alignment:J,dropdownZIndex:K,dropdownRootNode:Q,dropdownWidth:U})=>{const[X,Y]=r(h),[$,ee]=r(!1),[re,te]=r(!1),oe=i(),ie=t(null),se=t(null),ne=t(null);o((()=>{Y(h)}),[h]);const le=(e,r)=>{var t;null===(t=se.current)||void 0===t||t.focus(),Y(e),ee(!1),ue(!1),null==q||q(e,r)},ae=()=>{$&&(ee(!1),ue(!1))},de=()=>{re||$||te(!0)},pe=e=>{re&&!$&&ie.current&&!ie.current.contains(e.relatedTarget)&&(te(!1),null==Z||Z())},ce=()=>{var e;if(!X)return"";if(R)return R(X);if(k){const r=k(X);return C?C(r):null!==(e=null==r?void 0:r.toString())&&void 0!==e?e:""}return X.toString()},me=e=>{if("middle"===N){let r=0;return ne&&ne.current&&(r=ne.current.getBoundingClientRect().width),s.truncateOneLine(e,r,120,8)}return e},ue=e=>{e?null==D||D():null==E||E()};return e(l,{children:e(d,{enabled:!V&&!j,isOpen:$,renderElement:()=>e(p,{className:b,"data-testid":g,id:y,ref:ie,tabIndex:-1,onFocus:de,onBlur:pe,focused:re,disabled:j,readOnly:V,error:x,children:e(a,{ref:se,disabled:j,expanded:$,listboxId:oe,popupRole:"listbox",readOnly:V,variant:z,"aria-labelledby":v,"aria-describedby":_,"aria-invalid":T,children:e(c,{ref:ne,disabled:j,children:X?P?P(X):e(u,{variant:z,truncateType:N,children:me(ce())}):e(m,{variant:z,truncateType:N,children:f})})})}),renderDropdown:()=>e(n,{listboxId:oe,listItems:w,onSelectItem:le,onDismiss:ae,valueExtractor:k,listExtractor:O,enableSearch:I,searchPlaceholder:A,searchFunction:S,selectedItems:X?[X]:[],onRetry:L,itemsLoadState:H,itemTruncationType:N,renderListItem:B,hideNoResultsDisplay:G,noResultsDescription:F,customLabels:M,renderCustomCallToAction:W,variant:z,width:U,matchElementWidth:!0}),onOpen:()=>{ee(!0),ue(!0),te(!0)},onClose:e=>{ee(!1),ue(!1),"click"!==e&&(te(!1),null==Z||Z())},onDismiss:()=>{var e;null===(e=se.current)||void 0===e||e.focus(),ee(!1),ue(!1)},clickToToggle:!0,offset:8,alignment:J,fitAvailableHeight:!0,customZIndex:K,rootNode:Q})})};export{h as InputSelect};
+import{jsx as e}from"react/jsx-runtime";import{useState as r,useRef as t,useEffect as o}from"react";import"clsx";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"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as i}from"../util/simple-id-generator.js";import{StringHelper as s}from"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_mloii0.css";import{DropdownList as n}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as l}from"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as a}from"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../_virtual/_tslib.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as d}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputBox as p}from"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_konwm.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";import{LabelContainer as m,PlaceholderLabel as c,ValueLabel as u}from"../shared/dropdown-wrapper/dropdown-wrapper.js";const h=({selectedOption:h,placeholder:f="Select",options:w,disabled:j,error:x,className:b,"data-testid":g,id:y,"aria-labelledby":v,"aria-describedby":_,"aria-invalid":T,enableSearch:I=!1,searchFunction:S,searchPlaceholder:A,valueExtractor:k,valueToStringFunction:C,listExtractor:O,displayValueExtractor:R,onSelectOption:q,onShowOptions:D,onHideOptions:E,onRetry:L,optionsLoadState:H="success",optionTruncationType:N="end",renderCustomSelectedOption:P,renderListItem:B,hideNoResultsDisplay:G,noResultsDescription:F,customLabels:M,renderCustomCallToAction:W,onBlur:Z,variant:V="default",readOnly:z,alignment:J,dropdownZIndex:K,dropdownRootNode:Q,dropdownWidth:U})=>{const[X,Y]=r(h),[$,ee]=r(!1),[re,te]=r(!1),oe=i(),ie=t(null),se=t(null),ne=t(null);o((()=>{Y(h)}),[h]);const le=(e,r)=>{var t;null===(t=se.current)||void 0===t||t.focus(),Y(e),ee(!1),ue(!1),null==q||q(e,r)},ae=()=>{$&&(ee(!1),ue(!1))},de=()=>{re||$||te(!0)},pe=e=>{re&&!$&&ie.current&&!ie.current.contains(e.relatedTarget)&&(te(!1),null==Z||Z())},me=()=>{var e;if(!X)return"";if(R)return R(X);if(k){const r=k(X);return C?C(r):null!==(e=null==r?void 0:r.toString())&&void 0!==e?e:""}return X.toString()},ce=e=>{if("middle"===N){let r=0;return ne&&ne.current&&(r=ne.current.getBoundingClientRect().width),s.truncateOneLine(e,r,120,8)}return e},ue=e=>{e?null==D||D():null==E||E()};return e(l,{children:e(d,{enabled:!z&&!j,isOpen:$,renderElement:()=>e(p,{className:b,"data-testid":g,id:y,ref:ie,tabIndex:-1,onFocus:de,onBlur:pe,focused:re,disabled:j,readOnly:z,error:x,children:e(a,{ref:se,disabled:j,expanded:$,listboxId:oe,popupRole:"listbox",readOnly:z,variant:V,"aria-labelledby":v,"aria-describedby":_,"aria-invalid":T,children:e(m,{ref:ne,disabled:j,children:X?P?P(X):e(u,{variant:V,truncateType:N,children:ce(me())}):e(c,{variant:V,truncateType:N,children:f})})})}),renderDropdown:()=>e(n,{listboxId:oe,listItems:w,onSelectItem:le,onDismiss:ae,valueExtractor:k,listExtractor:O,enableSearch:I,searchPlaceholder:A,searchFunction:S,selectedItems:X?[X]:[],onRetry:L,itemsLoadState:H,itemTruncationType:N,renderListItem:B,hideNoResultsDisplay:G,noResultsDescription:F,customLabels:M,renderCustomCallToAction:W,variant:V,width:U,matchElementWidth:!0}),onOpen:()=>{ee(!0),ue(!0),te(!0)},onClose:e=>{ee(!1),ue(!1),"click"!==e&&(te(!1),null==Z||Z())},onDismiss:()=>{var e;null===(e=se.current)||void 0===e||e.focus(),ee(!1),ue(!1)},clickToToggle:!0,offset:8,alignment:J,fitAvailableHeight:!0,customZIndex:K,rootNode:Q})})};export{h as InputSelect};
 //# sourceMappingURL=input-select.js.map

package/input-select/input-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-select.js","sources":["../../src/input-select/input-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n DropdownList,\n DropdownListState,\n ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport type { InputSelectProps } from \"./types\";\n\nexport const InputSelect = <T, V>({\n selectedOption,\n placeholder = \"Select\",\n options,\n disabled,\n error,\n className,\n \"data-testid\": testId,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n enableSearch = false,\n searchFunction,\n searchPlaceholder,\n valueExtractor,\n valueToStringFunction,\n listExtractor,\n displayValueExtractor,\n onSelectOption,\n onShowOptions,\n onHideOptions,\n onRetry,\n optionsLoadState = \"success\",\n optionTruncationType = \"end\",\n renderCustomSelectedOption,\n renderListItem,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n renderCustomCallToAction,\n onBlur,\n variant = \"default\",\n readOnly,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n}: InputSelectProps<T, V>): JSX.Element => {\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const [selected, setSelected] = useState<T \| undefined>(selectedOption);\n const [showOptions, setShowOptions] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n const internalId = useId();\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n const labelContainerRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(selectedOption);\n }, [selectedOption]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (item: T, extractedValue: V) => {\n selectorRef.current?.focus();\n setSelected(item);\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n onSelectOption?.(item, extractedValue);\n };\n\n const handleListDismiss = () => {\n if (showOptions) {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n }\n };\n\n const handleNodeFocus = () => {\n if (!focused && !showOptions) {\n setFocused(true);\n }\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n focused &&\n !showOptions &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleOpen = () => {\n setShowOptions(true);\n triggerOptionDisplayCallback(true);\n setFocused(true);\n };\n\n const handleClose = (reason: OpenChangeReason \| undefined) => {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n // click to toggle should not blur the input\n if (reason !== \"click\") {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleDismiss = () => {\n selectorRef.current?.focus();\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n };\n\n // =============================================================================\n // HELPER FUNCTION\n // =============================================================================\n const getDisplayValue = (): string => {\n if (!selected) return \"\";\n\n if (displayValueExtractor) {\n return displayValueExtractor(selected);\n }\n\n if (valueExtractor) {\n const value = valueExtractor(selected);\n return valueToStringFunction\n ? valueToStringFunction(value)\n : value?.toString() ?? \"\";\n }\n\n return selected.toString();\n };\n\n const truncateValue = (value: string) => {\n if (optionTruncationType === \"middle\") {\n let widthOfElement = 0;\n if (labelContainerRef && labelContainerRef.current) {\n widthOfElement =\n labelContainerRef.current.getBoundingClientRect().width;\n }\n\n return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n }\n return value;\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (show) {\n onShowOptions?.();\n } else {\n onHideOptions?.();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderLabel = () => {\n if (!selected) {\n return (\n <PlaceholderLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {placeholder}\n </PlaceholderLabel>\n );\n } else if (renderCustomSelectedOption) {\n return renderCustomSelectedOption(selected);\n } else {\n return (\n <ValueLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {truncateValue(getDisplayValue())}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer ref={labelContainerRef} disabled={disabled}>\n {renderLabel()}\n </LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <InputBox\n className={className}\n data-testid={testId}\n id={id}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={internalId}\n popupRole=\"listbox\"\n readOnly={readOnly}\n variant={variant}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n </InputBox>\n );\n };\n\n const renderDropdown = () => {\n return (\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n enableSearch={enableSearch}\n searchPlaceholder={searchPlaceholder}\n searchFunction={searchFunction}\n selectedItems={selected ? [selected] : []}\n onRetry={onRetry}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n renderListItem={renderListItem}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n customLabels={customLabels}\n renderCustomCallToAction={renderCustomCallToAction}\n variant={variant}\n width={dropdownWidth}\n matchElementWidth\n />\n );\n };\n\n return (\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={showOptions}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["InputSelect","selectedOption","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","handleListItemClick","item","extractedValue","_a","current","focus","triggerOptionDisplayCallback","handleListDismiss","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","value","toString","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","truncateType","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"input-select.js","sources":["../../src/input-select/input-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n DropdownList,\n DropdownListState,\n ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport type { InputSelectProps } from \"./types\";\n\nexport const InputSelect = <T, V>({\n selectedOption,\n placeholder = \"Select\",\n options,\n disabled,\n error,\n className,\n \"data-testid\": testId,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n enableSearch = false,\n searchFunction,\n searchPlaceholder,\n valueExtractor,\n valueToStringFunction,\n listExtractor,\n displayValueExtractor,\n onSelectOption,\n onShowOptions,\n onHideOptions,\n onRetry,\n optionsLoadState = \"success\",\n optionTruncationType = \"end\",\n renderCustomSelectedOption,\n renderListItem,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n renderCustomCallToAction,\n onBlur,\n variant = \"default\",\n readOnly,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n}: InputSelectProps<T, V>): JSX.Element => {\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const [selected, setSelected] = useState<T \| undefined>(selectedOption);\n const [showOptions, setShowOptions] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n const internalId = useId();\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n const labelContainerRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(selectedOption);\n }, [selectedOption]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (item: T, extractedValue: V) => {\n selectorRef.current?.focus();\n setSelected(item);\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n onSelectOption?.(item, extractedValue);\n };\n\n const handleListDismiss = () => {\n if (showOptions) {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n }\n };\n\n const handleNodeFocus = () => {\n if (!focused && !showOptions) {\n setFocused(true);\n }\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n focused &&\n !showOptions &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleOpen = () => {\n setShowOptions(true);\n triggerOptionDisplayCallback(true);\n setFocused(true);\n };\n\n const handleClose = (reason: OpenChangeReason \| undefined) => {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n // click to toggle should not blur the input\n if (reason !== \"click\") {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleDismiss = () => {\n selectorRef.current?.focus();\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n };\n\n // =============================================================================\n // HELPER FUNCTION\n // =============================================================================\n const getDisplayValue = (): string => {\n if (!selected) return \"\";\n\n if (displayValueExtractor) {\n return displayValueExtractor(selected);\n }\n\n if (valueExtractor) {\n const value = valueExtractor(selected);\n return valueToStringFunction\n ? valueToStringFunction(value)\n : value?.toString() ?? \"\";\n }\n\n return selected.toString();\n };\n\n const truncateValue = (value: string) => {\n if (optionTruncationType === \"middle\") {\n let widthOfElement = 0;\n if (labelContainerRef && labelContainerRef.current) {\n widthOfElement =\n labelContainerRef.current.getBoundingClientRect().width;\n }\n\n return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n }\n return value;\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (show) {\n onShowOptions?.();\n } else {\n onHideOptions?.();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderLabel = () => {\n if (!selected) {\n return (\n <PlaceholderLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {placeholder}\n </PlaceholderLabel>\n );\n } else if (renderCustomSelectedOption) {\n return renderCustomSelectedOption(selected);\n } else {\n return (\n <ValueLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {truncateValue(getDisplayValue())}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer ref={labelContainerRef} disabled={disabled}>\n {renderLabel()}\n </LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <InputBox\n className={className}\n data-testid={testId}\n id={id}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={internalId}\n popupRole=\"listbox\"\n readOnly={readOnly}\n variant={variant}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n </InputBox>\n );\n };\n\n const renderDropdown = () => {\n return (\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n enableSearch={enableSearch}\n searchPlaceholder={searchPlaceholder}\n searchFunction={searchFunction}\n selectedItems={selected ? [selected] : []}\n onRetry={onRetry}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n renderListItem={renderListItem}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n customLabels={customLabels}\n renderCustomCallToAction={renderCustomCallToAction}\n variant={variant}\n width={dropdownWidth}\n matchElementWidth\n />\n );\n };\n\n return (\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={showOptions}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["InputSelect","selectedOption","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","handleListItemClick","item","extractedValue","_a","current","focus","triggerOptionDisplayCallback","handleListDismiss","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","value","toString","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","truncateType","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/input-textarea/textarea-counter.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./textarea-counter.styles_adg5h1.css";const t="c1d4l1yp";export{t as counterLabel};
+import"./textarea-counter.styles_1n3wsnv.css";const t="c1d4l1yp";export{t as counterLabel};
 //# sourceMappingURL=textarea-counter.styles.js.map

package/input-textarea/textarea-counter.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea-counter.styles.js","sources":["../../src/input-textarea/textarea-counter.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../theme\";\n\nexport const counterLabel = css`\n text-align: right;\n ${Font[\"body-sm-semibold\"]}\n color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["counterLabel"],"mappings":"~~2EAIO~~,MAAMA,EAAY"}
1	+ {"version":3,"file":"textarea-counter.styles.js","sources":["../../src/input-textarea/textarea-counter.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../theme\";\n\nexport const counterLabel = css`\n text-align: right;\n ${Font[\"body-sm-semibold\"]}\n color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["counterLabel"],"mappings":"4EAIO,MAAMA,EAAY"}

package/input-textarea/textarea-counter.styles_1n3wsnv.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ .c1d4l1yp{text-align:right;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-subtler);}

package/input-textarea/textarea.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./textarea.styles_g0zgyq.css";const t="w1xqauhq",e="e10c6rk9",a="e1kovz0t",r="e9uwuyt",s="etmlvbn";export{e as element,r as elementDisabled,s as elementError,a as elementReadOnly,t as wrapper};
+import"./textarea.styles_22z4n3.css";const t="w1xqauhq",e="e10c6rk9",a="e1kovz0t",r="e9uwuyt",s="etmlvbn";export{e as element,r as elementDisabled,s as elementError,a as elementReadOnly,t as wrapper};
 //# sourceMappingURL=textarea.styles.js.map

package/input-textarea/textarea.styles_22z4n3.css ADDED Viewed

@@ -0,0 +1,5 @@
+.w1xqauhq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.e10c6rk9{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);outline:none;overflow:auto;display:block;padding:var(--fds-spacing-12) var(--fds-spacing-16);width:100%;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}.e10c6rk9:focus,.e10c6rk9:active{outline-offset:-1px;outline:var(--fds-border-width-020) var(--fds-border-style-solid) var(--fds-colour-border-focus);}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-webkit-scrollbar{width:14px;}.e10c6rk9::-webkit-scrollbar-track{background:transparent;}.e10c6rk9::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-moz-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::placeholder{color:var(--fds-colour-text-subtler);}
+.e1kovz0t{border-color:transparent;background:transparent!important;padding:var(--fds-spacing-12) 0;}.e1kovz0t:focus,.e1kovz0t:active{outline-color:var(--fds-colour-border-focus);}
+.e9uwuyt{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.e9uwuyt:focus,.e9uwuyt:active{outline-color:var(--fds-colour-border-disabled);}
+.etmlvbn{border-color:var(--fds-colour-border-error);}.etmlvbn:focus,.etmlvbn:active{outline-color:var(--fds-colour-border-error-focus);}

package/language-switcher/dropdown-panel.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css";import"./dropdown-panel.styles_1z0n7qq.css";const d={width:"--fds-internal-languageSwitcher-dropdown-width"},s="dbl9jc4",t="dogrnw8",o="d4xkcjy",n="ddiq5up";export{o as dropdownItem,n as dropdownItemSelected,t as dropdownList,s as dropdownPanel,d as tokens};
+import"../shared/dropdown-list/dropdown-list.styles_konwm.css";import"./dropdown-panel.styles_1qsjf8d.css";const d={width:"--fds-internal-languageSwitcher-dropdown-width"},s="dbl9jc4",o="dogrnw8",t="d4xkcjy",n="ddiq5up";export{t as dropdownItem,n as dropdownItemSelected,o as dropdownList,s as dropdownPanel,d as tokens};
 //# sourceMappingURL=dropdown-panel.styles.js.map

package/language-switcher/dropdown-panel.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-panel.styles.js","sources":["../../src/language-switcher/dropdown-panel.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const tokens = {\n width: \"--fds-internal-languageSwitcher-dropdown-width\",\n} as const;\n\nexport const dropdownPanel = css`\n ${tokens.width}: initial;\n\n width: var(${tokens.width});\n border-radius: ${Radius[\"sm\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n background: ${Colour[\"bg\"]};\n overflow: hidden;\n`;\n\nexport const dropdownList = css`\n list-style: none;\n margin: 0;\n padding: ${Spacing[\"spacing-8\"]};\n`;\n\nexport {\n baseIndicatorStyle,\n selectedIndicator,\n} from \"../shared/dropdown-list/dropdown-list.styles\";\n\nexport const dropdownItem = css`\n align-items: center;\n ${Font[\"body-md-regular\"]}\n color: ${Colour[\"text\"]};\n\n &:hover {\n background: ${Colour[\"bg-hover-subtle\"]};\n }\n`;\n\nexport const dropdownItemSelected = css`\n background: transparent;\n color: ${Colour[\"text-selected\"]};\n\n &:hover {\n background: ${Colour[\"bg-hover\"]};\n }\n`;\n"],"names":["tokens","width","dropdownPanel","dropdownList","dropdownItem","dropdownItemSelected"],"mappings":"~~4JAIO~~,MAAMA,EAAS,CAClBC,MAAO,kDAGEC,EAAa,UAUbC,EAAY,UAWZC,EAAY,UAUZC,EAAoB"}
1	+ {"version":3,"file":"dropdown-panel.styles.js","sources":["../../src/language-switcher/dropdown-panel.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const tokens = {\n width: \"--fds-internal-languageSwitcher-dropdown-width\",\n} as const;\n\nexport const dropdownPanel = css`\n ${tokens.width}: initial;\n\n width: var(${tokens.width});\n border-radius: ${Radius[\"sm\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n background: ${Colour[\"bg\"]};\n overflow: hidden;\n`;\n\nexport const dropdownList = css`\n list-style: none;\n margin: 0;\n padding: ${Spacing[\"spacing-8\"]};\n`;\n\nexport {\n baseIndicatorStyle,\n selectedIndicator,\n} from \"../shared/dropdown-list/dropdown-list.styles\";\n\nexport const dropdownItem = css`\n align-items: center;\n ${Font[\"body-md-regular\"]}\n color: ${Colour[\"text\"]};\n\n &:hover {\n background: ${Colour[\"bg-hover-subtle\"]};\n }\n`;\n\nexport const dropdownItemSelected = css`\n background: transparent;\n color: ${Colour[\"text-selected\"]};\n\n &:hover {\n background: ${Colour[\"bg-hover\"]};\n }\n`;\n"],"names":["tokens","width","dropdownPanel","dropdownList","dropdownItem","dropdownItemSelected"],"mappings":"0JAIO,MAAMA,EAAS,CAClBC,MAAO,kDAGEC,EAAa,UAUbC,EAAY,UAWZC,EAAY,UAUZC,EAAoB"}

package/language-switcher/{dropdown-panel.styles_1z0n7qq.css → dropdown-panel.styles_1qsjf8d.css} RENAMED Viewed

@@ -1,4 +1,4 @@
 .dbl9jc4{--fds-internal-languageSwitcher-dropdown-width:initial;width:var(--fds-internal-languageSwitcher-dropdown-width);border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);overflow:hidden;}
 .dogrnw8{list-style:none;margin:0;padding:var(--fds-spacing-8);}
-.d4xkcjy{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}.d4xkcjy:hover{background:var(--fds-colour-bg-hover-subtle);}
+.d4xkcjy{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}.d4xkcjy:hover{background:var(--fds-colour-bg-hover-subtle);}
 .ddiq5up{background:transparent;color:var(--fds-colour-text-selected);}.ddiq5up:hover{background:var(--fds-colour-bg-hover);}

package/language-switcher/dropdown-variant.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{LanguageIcon as o}from"@lifesg/react-icons/language";import{useState as s,useRef as i,useEffect as a}from"react";import"clsx";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"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as n}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import"../shared/dropdown-list/dropdown-list.js";import"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as l}from"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as d}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";import{LANGUAGE_CODES as p,LANGUAGE_DISPLAY_MAP as m,ARIA_LABEL as c}from"./data.js";import{DropdownPanel as u}from"./dropdown-panel.js";import{expandableElement as h,languageIconWrapper as f}from"./dropdown-variant.styles.js";const g=g=>{var{selectedLanguage:j,onSelectLanguage:w,testId:v}=g,x=e(g,["selectedLanguage","onSelectLanguage","testId"]);const[_,b]=s(!1),[k,y]=s(-1),A=i(null),I=i([]),T=`listbox-${n()}`;a((()=>{if(_){const e=p.indexOf(j),r=e>=0?e:0;y(r),setTimeout((()=>{var e;null===(e=I.current[r])||void 0===e||e.focus()}),0)}else y(-1)}),[_,j]);const D=e=>{var r;w(e),b(!1),null===(r=A.current)||void 0===r||r.focus()},q=e=>{var r,t,o,s;switch(e.key){case"ArrowDown":{e.preventDefault();const t=Math.min(k+1,p.length-1);y(t),null===(r=I.current[t])||void 0===r||r.focus();break}case"ArrowUp":{e.preventDefault();const r=Math.max(k-1,0);y(r),null===(t=I.current[r])||void 0===t||t.focus();break}case"Home":e.preventDefault(),y(0),null===(o=I.current[0])||void 0===o||o.focus();break;case"End":{e.preventDefault();const r=p.length-1;y(r),null===(s=I.current[r])||void 0===s||s.focus();break}case"Enter":case" ":e.preventDefault(),k>=0&&D(p[k])}};return r("div",Object.assign({"data-testid":v},x,{children:r(d,{enabled:!0,isOpen:_,renderElement:()=>t(l,{ref:A,className:h,disabled:!1,expanded:_,listboxId:T,popupRole:"listbox",readOnly:!1,"aria-label":`${c}, ${m[j]}`,"data-testid":`${v}--trigger`,children:[r("span",{className:f,"aria-hidden":!0,children:r(o,{})}),m[j]]}),renderDropdown:()=>r(u,{focusedIndex:k,handleItemSelect:D,handleListKeyDown:q,itemRefs:I,listboxId:T,selectedLanguage:j,testId:v}),onOpen:()=>{b(!0)},onClose:()=>{b(!1)},onDismiss:()=>{var e;b(!1),null===(e=A.current)||void 0===e||e.focus()},clickToToggle:!0,offset:8})}))};export{g as DropdownVariant};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{LanguageIcon as o}from"@lifesg/react-icons/language";import{useState as s,useRef as i,useEffect as n}from"react";import"clsx";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"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as a}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_mloii0.css";import"../shared/dropdown-list/dropdown-list.js";import"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as l}from"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as d}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_konwm.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";import{LANGUAGE_CODES as p,LANGUAGE_DISPLAY_MAP as m,ARIA_LABEL as c}from"./data.js";import{DropdownPanel as u}from"./dropdown-panel.js";import{expandableElement as h,languageIconWrapper as f}from"./dropdown-variant.styles.js";const g=g=>{var{selectedLanguage:j,onSelectLanguage:w,testId:v}=g,x=e(g,["selectedLanguage","onSelectLanguage","testId"]);const[_,b]=s(!1),[k,y]=s(-1),A=i(null),I=i([]),T=`listbox-${a()}`;n((()=>{if(_){const e=p.indexOf(j),r=e>=0?e:0;y(r),setTimeout((()=>{var e;null===(e=I.current[r])||void 0===e||e.focus()}),0)}else y(-1)}),[_,j]);const D=e=>{var r;w(e),b(!1),null===(r=A.current)||void 0===r||r.focus()},q=e=>{var r,t,o,s;switch(e.key){case"ArrowDown":{e.preventDefault();const t=Math.min(k+1,p.length-1);y(t),null===(r=I.current[t])||void 0===r||r.focus();break}case"ArrowUp":{e.preventDefault();const r=Math.max(k-1,0);y(r),null===(t=I.current[r])||void 0===t||t.focus();break}case"Home":e.preventDefault(),y(0),null===(o=I.current[0])||void 0===o||o.focus();break;case"End":{e.preventDefault();const r=p.length-1;y(r),null===(s=I.current[r])||void 0===s||s.focus();break}case"Enter":case" ":e.preventDefault(),k>=0&&D(p[k])}};return r("div",Object.assign({"data-testid":v},x,{children:r(d,{enabled:!0,isOpen:_,renderElement:()=>t(l,{ref:A,className:h,disabled:!1,expanded:_,listboxId:T,popupRole:"listbox",readOnly:!1,"aria-label":`${c}, ${m[j]}`,"data-testid":`${v}--trigger`,children:[r("span",{className:f,"aria-hidden":!0,children:r(o,{})}),m[j]]}),renderDropdown:()=>r(u,{focusedIndex:k,handleItemSelect:D,handleListKeyDown:q,itemRefs:I,listboxId:T,selectedLanguage:j,testId:v}),onOpen:()=>{b(!0)},onClose:()=>{b(!1)},onDismiss:()=>{var e;b(!1),null===(e=A.current)||void 0===e||e.focus()},clickToToggle:!0,offset:8})}))};export{g as DropdownVariant};
 //# sourceMappingURL=dropdown-variant.js.map