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

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

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

Files changed (2426) hide show

package/input-group/input-group-list-addon.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 i,{useState as a,useRef as s,useEffect as l}from"react";import{Input as d}from"../input/input.js";import{VisuallyHidden as n,concatIds as p}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"../util/string-helper.js";import"@react-aria/live-announcer";import"../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import{DropdownList as m}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as h}from"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as u}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 b}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputBox as f}from"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_1qveyb9.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{ValueLabel as x,LabelContainer as y,PlaceholderLabel as j}from"../shared/dropdown-wrapper/dropdown-wrapper.js";import{fieldSelector as w,divider as g,dividerReadOnly as v,fieldInputReadOnly as _,fieldInputNoBorder as T,fieldInputPosition as I,fieldWrapper as S,selectorReadOnly as N,expandableElementNoBorder as O}from"./input-group-list-addon.styles.js";const k=(i,k)=>{var{addon:A,error:R,onChange:C,readOnly:B,disabled:q,className:D,onBlur:E,noBorder:P,"data-testid":H,"aria-labelledby":G,"aria-describedby":M,"aria-invalid":$,"aria-label":F}=i,L=e(i,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:Z,listExtractor:V,enableSearch:W,hideNoResultsDisplay:z,noResultsDescription:J,searchPlaceholder:K,searchFunction:Q,onSearch:U,placeholder:X="Select",displayValueExtractor:Y,"data-selector-testid":ee,options:re,selectedOption:oe,onSelectOption:te,optionsLoadState:ie,optionTruncationType:ae,onRetry:se,onHideOptions:le,onShowOptions:de,dropdownZIndex:ne,dropdownRootNode:pe,"aria-label":ce}=A.attributes,{position:me="left"}=A,[he,ue]=a(oe),[be,fe]=a(!1),[xe,ye]=a(!1),je=c(),we=`${je}-listbox`,ge=`${je}-instruction`,ve=`${je}-combobox-label`,_e=`${je}-textbox-label`,Te=s(null),Ie=s(null);l((()=>{ue(oe)}),[oe]);const Se=()=>{if(he)return Y?Y(he):Z?Z(he):he.toString()},Ne=e=>{e?null==de||de():null==le||le()},Oe=(e,r)=>{var o;null===(o=Ie.current)||void 0===o||o.focus(),ue(e),fe(!1),Ne(!1),null==te||te(e,r)},ke=()=>{be&&(fe(!1),Ne(!1))},Ae=()=>{fe(!0),Ne(!0),ye(!0)},Re=e=>{fe(!1),Ne(!1),"click"!==e&&(ye(!1),null==E||E())},Ce=()=>{var e;null===(e=Ie.current)||void 0===e||e.focus(),fe(!1),Ne(!1)},Be=()=>o("div",{children:[r(u,{ref:Ie,disabled:q,expanded:be,listboxId:we,popupRole:"listbox",readOnly:B,"aria-labelledby":p(G,ve),"aria-describedby":p(M,ge),"aria-invalid":$,"data-position":me,className:t(P&&O),children:r(y,{disabled:q,children:he?r(x,{children:Se()}):r(j,{children:X})})}),r(n,{id:ge,children:"Press space to open options"})]}),qe=()=>r(m,{listboxId:we,listItems:re,onSelectItem:Oe,onDismiss:ke,valueExtractor:Z,listExtractor:V,enableSearch:W,hideNoResultsDisplay:z,noResultsDescription:J,searchPlaceholder:K,searchFunction:Q,onSearch:U,selectedItems:he?[he]:[],itemsLoadState:ie,itemTruncationType:ae,onRetry:se,matchElementWidth:!0});return r(h,{children:o(f,{focused:xe,disabled:q,readOnly:B,error:R,ref:Te,noBorder:P,"data-testid":H,tabIndex:-1,onFocus:()=>{xe||be||ye(!0)},onBlur:e=>{xe&&!be&&Te.current&&!Te.current.contains(e.relatedTarget)&&(ye(!1),null==E||E())},"data-position":me,className:t(S,D),children:[r(n,{"aria-hidden":!0,id:ve,children:ce}),r("div",{"data-testid":ee,className:w,children:B?he?r("div",{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":G,"aria-describedby":M,"aria-invalid":$,className:N,children:r(x,{children:Se()})}):null:r(b,{enabled:!B&&!q,isOpen:be,renderElement:Be,renderDropdown:qe,onOpen:Ae,onClose:Re,onDismiss:Ce,clickToToggle:!0,offset:8,alignment:"right"===me?"right":"left",fitAvailableHeight:!0,customZIndex:ne,rootNode:pe,positionRef:Te})}),r("div",{"data-position":me,className:t(g,B&&v)}),r(n,{"aria-hidden":!0,id:_e,children:F}),r(d,Object.assign({ref:k},L,{readOnly:B,disabled:q,error:R,onChange:e=>{C&&C(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":p(G,_e),"aria-describedby":M,"aria-invalid":$,"data-position":me,className:t(B&&_,!B&&P&&T,!B&&!P&&I)}))]})})},A=i.forwardRef(k);export{k as Component,A as InputGroupListAddon};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as o}from"react/jsx-runtime";import i from"clsx";import t,{useState as a,useRef as s,useEffect as l}from"react";import{Input as d}from"../input/input.js";import{VisuallyHidden as n,concatIds as p}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"../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 h}from"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as u}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 b}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputBox as f}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{ValueLabel as x,LabelContainer as y,PlaceholderLabel as j}from"../shared/dropdown-wrapper/dropdown-wrapper.js";import{fieldSelector as w,divider as g,dividerReadOnly as v,fieldInput as _,fieldInputNoBorder as T,fieldInputReadOnly as I,fieldWrapper as S,selectorReadOnly as k,expandableElementNoBorder as N}from"./input-group-list-addon.styles.js";const O=(t,O)=>{var{addon:A,error:R,onChange:C,readOnly:B,disabled:q,className:D,onBlur:E,noBorder:P,"data-testid":H,"aria-labelledby":G,"aria-describedby":M,"aria-invalid":$,"aria-label":F}=t,L=e(t,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:Z,listExtractor:V,enableSearch:W,hideNoResultsDisplay:z,noResultsDescription:J,searchPlaceholder:K,searchFunction:Q,onSearch:U,placeholder:X="Select",displayValueExtractor:Y,"data-selector-testid":ee,options:re,selectedOption:oe,onSelectOption:ie,optionsLoadState:te,optionTruncationType:ae,onRetry:se,onHideOptions:le,onShowOptions:de,dropdownZIndex:ne,dropdownRootNode:pe,"aria-label":ce}=A.attributes,{position:me="left"}=A,[he,ue]=a(oe),[be,fe]=a(!1),[xe,ye]=a(!1),je=c(),we=`${je}-listbox`,ge=`${je}-instruction`,ve=`${je}-combobox-label`,_e=`${je}-textbox-label`,Te=s(null),Ie=s(null);l((()=>{ue(oe)}),[oe]);const Se=()=>{if(he)return Y?Y(he):Z?Z(he):he.toString()},ke=e=>{e?null==de||de():null==le||le()},Ne=(e,r)=>{var o;null===(o=Ie.current)||void 0===o||o.focus(),ue(e),fe(!1),ke(!1),null==ie||ie(e,r)},Oe=()=>{be&&(fe(!1),ke(!1))},Ae=()=>{fe(!0),ke(!0),ye(!0)},Re=e=>{fe(!1),ke(!1),"click"!==e&&(ye(!1),null==E||E())},Ce=()=>{var e;null===(e=Ie.current)||void 0===e||e.focus(),fe(!1),ke(!1)},Be=()=>o("div",{children:[r(u,{ref:Ie,disabled:q,expanded:be,listboxId:we,popupRole:"listbox",readOnly:B,"aria-labelledby":p(G,ve),"aria-describedby":p(M,ge),"aria-invalid":$,"data-position":me,className:i(P&&N),children:r(y,{disabled:q,children:he?r(x,{children:Se()}):r(j,{children:X})})}),r(n,{id:ge,children:"Press space to open options"})]}),qe=()=>r(m,{listboxId:we,listItems:re,onSelectItem:Ne,onDismiss:Oe,valueExtractor:Z,listExtractor:V,enableSearch:W,hideNoResultsDisplay:z,noResultsDescription:J,searchPlaceholder:K,searchFunction:Q,onSearch:U,selectedItems:he?[he]:[],itemsLoadState:te,itemTruncationType:ae,onRetry:se,matchElementWidth:!0});return r(h,{children:o(f,{focused:xe,disabled:q,readOnly:B,error:R,ref:Te,noBorder:P,"data-testid":H,tabIndex:-1,onFocus:()=>{xe||be||ye(!0)},onBlur:e=>{xe&&!be&&Te.current&&!Te.current.contains(e.relatedTarget)&&(ye(!1),null==E||E())},"data-position":me,className:i(S,D),children:[r(n,{"aria-hidden":!0,id:ve,children:ce}),r("div",{"data-testid":ee,className:w,children:B?he?r("div",{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":G,"aria-describedby":M,"aria-invalid":$,className:k,children:r(x,{children:Se()})}):null:r(b,{enabled:!B&&!q,isOpen:be,renderElement:Be,renderDropdown:qe,onOpen:Ae,onClose:Re,onDismiss:Ce,clickToToggle:!0,offset:8,alignment:"right"===me?"right":"left",fitAvailableHeight:!0,customZIndex:ne,rootNode:pe,positionRef:Te})}),r("div",{"data-position":me,className:i(g,B&&v)}),r(n,{"aria-hidden":!0,id:_e,children:F}),r("div",{"data-position":me,className:i(_,P&&T,B&&I),children:r(d,Object.assign({ref:O},L,{readOnly:B,disabled:q,error:R,onChange:e=>{C&&C(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":p(G,_e),"aria-describedby":M,"aria-invalid":$}))})]})})},A=t.forwardRef(O);export{O as Component,A as InputGroupListAddon};
 //# sourceMappingURL=input-group-list-addon.js.map

package/input-group/input-group-list-addon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-group-list-addon.js","sources":["../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\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\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-group-list-addon.styles\";\nimport type { InputGroupProps, ListAddon } from \"./types\";\n\nexport const Component = <T, V>(\n {\n addon,\n error,\n onChange,\n readOnly,\n disabled,\n className,\n onBlur,\n noBorder,\n \"data-testid\": testId,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n \"aria-label\": textboxAriaLabel,\n ...otherProps\n }: InputGroupProps<T, V>,\n ref: React.Ref<HTMLInputElement>\n) => {\n const {\n /* display props /\n valueExtractor,\n listExtractor,\n / search props /\n enableSearch,\n hideNoResultsDisplay,\n noResultsDescription,\n searchPlaceholder,\n searchFunction,\n onSearch,\n / list addon props */\n placeholder = \"Select\",\n displayValueExtractor,\n \"data-selector-testid\": selectorTestId,\n options,\n selectedOption,\n onSelectOption,\n optionsLoadState,\n optionTruncationType,\n onRetry,\n onHideOptions,\n onShowOptions,\n dropdownZIndex,\n dropdownRootNode,\n \"aria-label\": comboboxAriaLabel,\n } = addon!.attributes as ListAddon<T, V>;\n\n const { position = \"left\" } = addon!;\n\n // =============================================================================\n // CONST, STATE, REF\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 const listboxId = `${internalId}-listbox`;\n const instructionId = `${internalId}-instruction`;\n const comboboxLabelId = `${internalId}-combobox-label`;\n const textboxLabelId = `${internalId}-textbox-label`;\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(selectedOption);\n }, [selectedOption]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getDisplayValue = () => {\n if (!selected) return;\n\n if (displayValueExtractor) {\n return displayValueExtractor(selected);\n }\n\n if (valueExtractor) {\n return valueExtractor(selected);\n }\n\n return selected.toString();\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (show) {\n onShowOptions?.();\n } else {\n onHideOptions?.();\n }\n };\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 handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) onChange(event);\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 // RENDER FUNCTIONS\n // =============================================================================\n const renderLabel = () => {\n if (selected) {\n return <ValueLabel>{getDisplayValue()}</ValueLabel>;\n }\n\n return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n };\n\n const renderSelectorContent = () => (\n <LabelContainer disabled={disabled}>{renderLabel()}</LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <div>\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={listboxId}\n popupRole=\"listbox\"\n readOnly={readOnly}\n aria-labelledby={concatIds(ariaLabelledBy, comboboxLabelId)}\n aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n aria-invalid={ariaInvalid}\n data-position={position}\n className={clsx(\n noBorder && styles.expandableElementNoBorder\n )}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n <VisuallyHidden id={instructionId}>\n Press space to open options\n </VisuallyHidden>\n </div>\n );\n };\n\n const renderDropdown = () => {\n return (\n <DropdownList\n listboxId={listboxId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n enableSearch={enableSearch}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n searchPlaceholder={searchPlaceholder}\n searchFunction={searchFunction}\n onSearch={onSearch}\n selectedItems={selected ? [selected] : []}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n onRetry={onRetry}\n matchElementWidth\n />\n );\n };\n\n const renderSelector = () => {\n if (readOnly) {\n return selected ? (\n <div\n data-testid=\"selector-label\"\n tabIndex={0}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-readonly\n aria-expanded={false}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n className={styles.selectorReadOnly}\n >\n <ValueLabel>{getDisplayValue()}</ValueLabel>\n </div>\n ) : null;\n } else {\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={position === \"right\" ? \"right\" : \"left\"}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n positionRef={nodeRef}\n />\n );\n }\n };\n\n return (\n <DropdownListState>\n <InputBox\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n ref={nodeRef}\n noBorder={noBorder}\n data-testid={testId}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n data-position={position}\n className={clsx(styles.fieldWrapper, className)}\n >\n <VisuallyHidden aria-hidden id={comboboxLabelId}>\n {comboboxAriaLabel}\n </VisuallyHidden>\n <div\n data-testid={selectorTestId}\n className={styles.fieldSelector}\n >\n {renderSelector()}\n </div>\n <div\n data-position={position}\n className={clsx(\n styles.divider,\n readOnly && styles.dividerReadOnly\n )}\n />\n <VisuallyHidden aria-hidden id={textboxLabelId}>\n {textboxAriaLabel}\n </VisuallyHidden>\n <Input\n ref={ref}\n {...otherProps}\n readOnly={readOnly}\n disabled={disabled}\n error={error}\n onChange={handleInputChange}\n data-testid=\"input\"\n styleType=\"no-border\"\n aria-labelledby={concatIds(ariaLabelledBy, textboxLabelId)}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n data-position={position}\n className={clsx(\n readOnly && styles.fieldInputReadOnly,\n !readOnly && noBorder && styles.fieldInputNoBorder,\n !readOnly && !noBorder && styles.fieldInputPosition\n )}\n />\n </InputBox>\n </DropdownListState>\n );\n};\n\nexport const InputGroupListAddon = React.forwardRef(Component);\n"],"names":["Component","_a","ref","addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","testId","ariaLabelledBy","ariaDescribedBy","ariaInvalid","textboxAriaLabel","otherProps","__rest","valueExtractor","listExtractor","enableSearch","hideNoResultsDisplay","noResultsDescription","searchPlaceholder","searchFunction","onSearch","placeholder","displayValueExtractor","selectorTestId","options","selectedOption","onSelectOption","optionsLoadState","optionTruncationType","onRetry","onHideOptions","onShowOptions","dropdownZIndex","dropdownRootNode","comboboxAriaLabel","attributes","position","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","listboxId","instructionId","comboboxLabelId","textboxLabelId","nodeRef","useRef","selectorRef","useEffect","getDisplayValue","toString","triggerOptionDisplayCallback","show","handleListItemClick","item","extractedValue","current","focus","handleListDismiss","handleOpen","handleClose","reason","handleDismiss","renderElement","_jsxs","children","_jsx","ExpandableElement","expanded","popupRole","concatIds","clsx","styles.expandableElementNoBorder","LabelContainer","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","InputBox","tabIndex","onFocus","e","contains","relatedTarget","styles.fieldWrapper","styles.fieldSelector","role","styles.selectorReadOnly","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","styles.divider","styles.dividerReadOnly","Input","Object","assign","event","styleType","styles.fieldInputReadOnly","styles.fieldInputNoBorder","styles.fieldInputPosition","InputGroupListAddon","React","forwardRef"],"mappings":"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"}
1	+ {"version":3,"file":"input-group-list-addon.js","sources":["../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\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\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-group-list-addon.styles\";\nimport type { InputGroupProps, ListAddon } from \"./types\";\n\nexport const Component = <T, V>(\n {\n addon,\n error,\n onChange,\n readOnly,\n disabled,\n className,\n onBlur,\n noBorder,\n \"data-testid\": testId,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n \"aria-label\": textboxAriaLabel,\n ...otherProps\n }: InputGroupProps<T, V>,\n ref: React.Ref<HTMLInputElement>\n) => {\n const {\n /* display props /\n valueExtractor,\n listExtractor,\n / search props /\n enableSearch,\n hideNoResultsDisplay,\n noResultsDescription,\n searchPlaceholder,\n searchFunction,\n onSearch,\n / list addon props */\n placeholder = \"Select\",\n displayValueExtractor,\n \"data-selector-testid\": selectorTestId,\n options,\n selectedOption,\n onSelectOption,\n optionsLoadState,\n optionTruncationType,\n onRetry,\n onHideOptions,\n onShowOptions,\n dropdownZIndex,\n dropdownRootNode,\n \"aria-label\": comboboxAriaLabel,\n } = addon!.attributes as ListAddon<T, V>;\n\n const { position = \"left\" } = addon!;\n\n // =============================================================================\n // CONST, STATE, REF\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 const listboxId = `${internalId}-listbox`;\n const instructionId = `${internalId}-instruction`;\n const comboboxLabelId = `${internalId}-combobox-label`;\n const textboxLabelId = `${internalId}-textbox-label`;\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(selectedOption);\n }, [selectedOption]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getDisplayValue = () => {\n if (!selected) return;\n\n if (displayValueExtractor) {\n return displayValueExtractor(selected);\n }\n\n if (valueExtractor) {\n return valueExtractor(selected);\n }\n\n return selected.toString();\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (show) {\n onShowOptions?.();\n } else {\n onHideOptions?.();\n }\n };\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 handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) onChange(event);\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 // RENDER FUNCTIONS\n // =============================================================================\n const renderLabel = () => {\n if (selected) {\n return <ValueLabel>{getDisplayValue()}</ValueLabel>;\n }\n\n return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n };\n\n const renderSelectorContent = () => (\n <LabelContainer disabled={disabled}>{renderLabel()}</LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <div>\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={listboxId}\n popupRole=\"listbox\"\n readOnly={readOnly}\n aria-labelledby={concatIds(ariaLabelledBy, comboboxLabelId)}\n aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n aria-invalid={ariaInvalid}\n data-position={position}\n className={clsx(\n noBorder && styles.expandableElementNoBorder\n )}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n <VisuallyHidden id={instructionId}>\n Press space to open options\n </VisuallyHidden>\n </div>\n );\n };\n\n const renderDropdown = () => {\n return (\n <DropdownList\n listboxId={listboxId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n enableSearch={enableSearch}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n searchPlaceholder={searchPlaceholder}\n searchFunction={searchFunction}\n onSearch={onSearch}\n selectedItems={selected ? [selected] : []}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n onRetry={onRetry}\n matchElementWidth\n />\n );\n };\n\n const renderSelector = () => {\n if (readOnly) {\n return selected ? (\n <div\n data-testid=\"selector-label\"\n tabIndex={0}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-readonly\n aria-expanded={false}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n className={styles.selectorReadOnly}\n >\n <ValueLabel>{getDisplayValue()}</ValueLabel>\n </div>\n ) : null;\n } else {\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={position === \"right\" ? \"right\" : \"left\"}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n positionRef={nodeRef}\n />\n );\n }\n };\n\n return (\n <DropdownListState>\n <InputBox\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n ref={nodeRef}\n noBorder={noBorder}\n data-testid={testId}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n data-position={position}\n className={clsx(styles.fieldWrapper, className)}\n >\n <VisuallyHidden aria-hidden id={comboboxLabelId}>\n {comboboxAriaLabel}\n </VisuallyHidden>\n <div\n data-testid={selectorTestId}\n className={styles.fieldSelector}\n >\n {renderSelector()}\n </div>\n <div\n data-position={position}\n className={clsx(\n styles.divider,\n readOnly && styles.dividerReadOnly\n )}\n />\n <VisuallyHidden aria-hidden id={textboxLabelId}>\n {textboxAriaLabel}\n </VisuallyHidden>\n <div\n data-position={position}\n className={clsx(\n styles.fieldInput,\n noBorder && styles.fieldInputNoBorder,\n readOnly && styles.fieldInputReadOnly\n )}\n >\n <Input\n ref={ref}\n {...otherProps}\n readOnly={readOnly}\n disabled={disabled}\n error={error}\n onChange={handleInputChange}\n data-testid=\"input\"\n styleType=\"no-border\"\n aria-labelledby={concatIds(\n ariaLabelledBy,\n textboxLabelId\n )}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n />\n </div>\n </InputBox>\n </DropdownListState>\n );\n};\n\nexport const InputGroupListAddon = React.forwardRef(Component);\n"],"names":["Component","_a","ref","addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","testId","ariaLabelledBy","ariaDescribedBy","ariaInvalid","textboxAriaLabel","otherProps","__rest","valueExtractor","listExtractor","enableSearch","hideNoResultsDisplay","noResultsDescription","searchPlaceholder","searchFunction","onSearch","placeholder","displayValueExtractor","selectorTestId","options","selectedOption","onSelectOption","optionsLoadState","optionTruncationType","onRetry","onHideOptions","onShowOptions","dropdownZIndex","dropdownRootNode","comboboxAriaLabel","attributes","position","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","listboxId","instructionId","comboboxLabelId","textboxLabelId","nodeRef","useRef","selectorRef","useEffect","getDisplayValue","toString","triggerOptionDisplayCallback","show","handleListItemClick","item","extractedValue","current","focus","handleListDismiss","handleOpen","handleClose","reason","handleDismiss","renderElement","_jsxs","children","_jsx","ExpandableElement","expanded","popupRole","concatIds","clsx","styles.expandableElementNoBorder","LabelContainer","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","InputBox","tabIndex","onFocus","e","contains","relatedTarget","styles.fieldWrapper","styles.fieldSelector","role","styles.selectorReadOnly","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","styles.divider","styles.dividerReadOnly","styles.fieldInput","styles.fieldInputNoBorder","styles.fieldInputReadOnly","Input","Object","assign","event","styleType","InputGroupListAddon","React","forwardRef"],"mappings":"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"}

package/input-group/input-group-list-addon.styles.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 export declare const fieldWrapper: import("@linaria/core").LinariaClassName;
 export declare const expandableElementNoBorder: import("@linaria/core").LinariaClassName;
 export declare const fieldSelector: import("@linaria/core").LinariaClassName;
-export declare const fieldInputReadOnly: import("@linaria/core").LinariaClassName;
+export declare const fieldInput: import("@linaria/core").LinariaClassName;
 export declare const fieldInputNoBorder: import("@linaria/core").LinariaClassName;
-export declare const fieldInputPosition: import("@linaria/core").LinariaClassName;
+export declare const fieldInputReadOnly: import("@linaria/core").LinariaClassName;
 export declare const selectorReadOnly: import("@linaria/core").LinariaClassName;
 export declare const divider: import("@linaria/core").LinariaClassName;
 export declare const dividerReadOnly: import("@linaria/core").LinariaClassName;

package/input-group/input-group-list-addon.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./input-group-list-addon.styles_1my6j2v.css";const s="fmhspm1",o="e135ws0j",p="faf95up",f="f96umbl",m="f3g4d0l",t="fioonlm",u="s1b40hsu",l="d7gwol5",d="d181f48m";export{l as divider,d as dividerReadOnly,o as expandableElementNoBorder,m as fieldInputNoBorder,t as fieldInputPosition,f as fieldInputReadOnly,p as fieldSelector,s as fieldWrapper,u as selectorReadOnly};
+import"./input-group-list-addon.styles_17iuqtw.css";const s="fmhspm1",o="e135ws0j",p="faf95up",t="f96umbl",u="f3g4d0l",f="fioonlm",i="s1b40hsu",l="d7gwol5",m="d181f48m";export{l as divider,m as dividerReadOnly,o as expandableElementNoBorder,t as fieldInput,u as fieldInputNoBorder,f as fieldInputReadOnly,p as fieldSelector,s as fieldWrapper,i as selectorReadOnly};
 //# sourceMappingURL=input-group-list-addon.styles.js.map

package/input-group/input-group-list-addon.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-group-list-addon.styles.js","sources":["../../src/input-group/input-group-list-addon.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const fieldWrapper = css`\n display: flex;\n align-items: center;\n\n &[data-position=\"right\"] {\n flex-direction: row-reverse;\n }\n`;\n\nexport const expandableElementNoBorder = css`\n &[data-position=\"right\"] {\n padding-right: 0;\n }\n\n &[data-position=\"left\"] {\n padding-left: 0;\n }\n`;\n\nexport const fieldSelector = css`\n flex: 0 0 auto;\n`;\n\nexport const ~~fieldInputReadOnly~~ = css`\n ~~padding~~: ~~0;\~~n~~`;\n~~\~~nexport const fieldInputNoBorder = css`\~~n &[data-position=\"right\"] {\n padding-left: 0;\n }\n\n &[data-position=\"left\"] {\n padding-right: 0;\n }\n`;\n\nexport const ~~fieldInputPosition~~ = css`\n &[data-position=\"right\"] {\n padding-left: ~~${Spacing[\"spacing-16\"]}~~;\n }\n\n &[data-position=\"left\"] {\n padding-right: ~~${Spacing[\"spacing-16\"]}~~;\n }\n`;\n\nexport const selectorReadOnly = css`\n display: flex;\n align-items: center;\n padding: 0;\n background: transparent;\n margin-right: ${Spacing[\"spacing-12\"]};\n color: ${Colour[\"text\"]};\n`;\n\nexport const divider = css`\n width: 1px;\n background: ${Colour[\"border\"]};\n flex-shrink: 0;\n height: 1.25rem;\n\n &[data-position=\"right\"] {\n margin-left: ${Spacing[\"spacing-12\"]};\n }\n\n &[data-position=\"left\"] {\n margin-right: ${Spacing[\"spacing-12\"]};\n }\n`;\n\nexport const dividerReadOnly = css`\n display: none;\n`;\n"],"names":["fieldWrapper","expandableElementNoBorder","fieldSelector","~~fieldInputReadOnly~~","fieldInputNoBorder","~~fieldInputPosition~~","selectorReadOnly","divider","dividerReadOnly"],"mappings":"+EAOO,MAAMA,EAAY,UASZC,EAAyB,WAUzBC,EAAa,UAIbC,~~EAAkB~~,~~UAIlBC~~,EAAkB,UAUlBC,EAAkB,~~UAUlBC~~,EAAgB,WAShBC,EAAO,UAePC,EAAe"}
1	+ {"version":3,"file":"input-group-list-addon.styles.js","sources":["../../src/input-group/input-group-list-addon.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const fieldWrapper = css`\n display: flex;\n align-items: center;\n\n &[data-position=\"right\"] {\n flex-direction: row-reverse;\n }\n`;\n\nexport const expandableElementNoBorder = css`\n &[data-position=\"right\"] {\n padding-right: 0;\n }\n\n &[data-position=\"left\"] {\n padding-left: 0;\n }\n`;\n\nexport const fieldSelector = css`\n flex: 0 0 auto;\n`;\n\nexport const fieldInput = css`\n width: 100%;\n\n &[data-position=\"right\"] {\n padding-left: ${Spacing[\"spacing-16\"]};\n }\n\n &[data-position=\"left\"] {\n padding-right: ${Spacing[\"spacing-16\"]};\n }\n`;\n\nexport const fieldInputNoBorder = css`\n &[data-position=\"right\"] {\n padding-left: 0;\n }\n\n &[data-position=\"left\"] {\n padding-right: 0;\n }\n`;\n\nexport const fieldInputReadOnly = css`\n padding: 0;\n`;\n\nexport const selectorReadOnly = css`\n display: flex;\n align-items: center;\n padding: 0;\n background: transparent;\n margin-right: ${Spacing[\"spacing-12\"]};\n color: ${Colour[\"text\"]};\n`;\n\nexport const divider = css`\n width: 1px;\n background: ${Colour[\"border\"]};\n flex-shrink: 0;\n height: 1.25rem;\n\n &[data-position=\"right\"] {\n margin-left: ${Spacing[\"spacing-12\"]};\n }\n\n &[data-position=\"left\"] {\n margin-right: ${Spacing[\"spacing-12\"]};\n }\n`;\n\nexport const dividerReadOnly = css`\n display: none;\n`;\n"],"names":["fieldWrapper","expandableElementNoBorder","fieldSelector","fieldInput","fieldInputNoBorder","fieldInputReadOnly","selectorReadOnly","divider","dividerReadOnly"],"mappings":"+EAOO,MAAMA,EAAY,UASZC,EAAyB,WAUzBC,EAAa,UAIbC,EAAU,UAYVC,EAAkB,UAUlBC,EAAkB,UAIlBC,EAAgB,WAShBC,EAAO,UAePC,EAAe"}

package/input-group/input-group-list-addon.styles_17iuqtw.css ADDED Viewed

@@ -0,0 +1,9 @@
+.fmhspm1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.fmhspm1[data-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.e135ws0j[data-position="right"]{padding-right:0;}.e135ws0j[data-position="left"]{padding-left:0;}
+.faf95up{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;}
+.f96umbl{width:100%;}.f96umbl[data-position="right"]{padding-left:var(--fds-spacing-16);}.f96umbl[data-position="left"]{padding-right:var(--fds-spacing-16);}
+.f3g4d0l[data-position="right"]{padding-left:0;}.f3g4d0l[data-position="left"]{padding-right:0;}
+.fioonlm{padding:0;}
+.s1b40hsu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0;background:transparent;margin-right:var(--fds-spacing-12);color:var(--fds-colour-text);}
+.d7gwol5{width:1px;background:var(--fds-colour-border);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1.25rem;}.d7gwol5[data-position="right"]{margin-left:var(--fds-spacing-12);}.d7gwol5[data-position="left"]{margin-right:var(--fds-spacing-12);}
+.d181f48m{display:none;}

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

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsx as a,jsxs as e}from"react/jsx-runtime";import t from"clsx";import d from"react";import{Input as i}from"../input/input.js";import{VisuallyHidden as o,concatIds as l}from"../shared/accessibility/index.js";import{InputBox as s}from"../shared/input-wrapper/input-wrapper.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{labelAddonContainer as p,addonWrapper as m,noAddonWrapper as c}from"./input-group.styles.js";import{InputGroupListAddon as b}from"./input-group-list-addon.js";const u=d.forwardRef(((d,u)=>{var{addon:y,error:f,className:j,noBorder:h,"aria-label":O,"aria-labelledby":g}=d,v=r(d,["addon","error","className","noBorder","aria-label","aria-labelledby"]);const w=n(),N=`${w}-addon`,x=`${w}-ariaLabelId`,B=()=>a(s,{disabled:v.disabled,error:f,readOnly:v.readOnly,noBorder:h,"data-testid":v["data-testid"],className:t(c,j),"data-read-only":v.readOnly,"data-no-border":h,children:a(i,Object.assign({ref:u},v,{"data-testid":"input",styleType:"no-border"}))}),C=(r,d,n)=>e(s,{disabled:v.disabled,error:f,readOnly:v.readOnly,noBorder:h,"data-testid":v["data-testid"],className:t(m,j),"data-read-only":v.readOnly,"data-no-border":h,"data-position":d,children:[a("div",{"data-testid":"addon",id:N,className:p,"data-disabled":v.disabled,"data-read-only":v.readOnly,"data-position":d,children:r}),a(o,{"aria-hidden":!0,id:x,children:O}),a(i,Object.assign({ref:u},v,{"aria-labelledby":l(x,g,N),allowClear:n&&"right"!==d,error:f,"data-testid":"input",styleType:"no-border"}))]});if(!y)return B();{const{type:r="label",position:e="left"}=y,{allowClear:t}=v;switch(r){case"list":{const r=y.attributes;return r.options&&r.options.length>0?a(b,Object.assign({ref:u,addon:y,error:f,className:j,noBorder:h,"aria-label":O,"aria-labelledby":g},v)):B()}case"custom":{const r=y.attributes;return r.children?C(r.children,e,t):B()}default:{const r=y.attributes;return r.value?C(r.value,e,t):B()}}}}));export{u as InputGroup};
+import{__rest as a}from"../_virtual/_tslib.js";import{jsx as r,jsxs as e}from"react/jsx-runtime";import t from"clsx";import d from"react";import{Input as i}from"../input/input.js";import{VisuallyHidden as l,concatIds as o}from"../shared/accessibility/index.js";import{InputBox as s}from"../shared/input-wrapper/input-wrapper.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{labelAddonContainer as p,addonWrapper as c,noAddonWrapper as m}from"./input-group.styles.js";import{InputGroupListAddon as b}from"./input-group-list-addon.js";const u=d.forwardRef(((d,u)=>{var{addon:y,error:f,className:h,noBorder:j,"aria-label":O,"aria-labelledby":g}=d,v=a(d,["addon","error","className","noBorder","aria-label","aria-labelledby"]);const w=n(),N=`${w}-addon`,x=`${w}-ariaLabelId`,B=()=>e(s,{disabled:v.disabled,error:f,readOnly:v.readOnly,noBorder:j,"data-testid":v["data-testid"],className:t(m,h),"data-read-only":v.readOnly,"data-no-border":j,children:[r(l,{"aria-hidden":!0,id:x,children:O}),r(i,Object.assign({ref:u},v,{"data-testid":"input",styleType:"no-border","aria-labelledby":o(x,g)}))]}),C=(a,d,n)=>e(s,{disabled:v.disabled,error:f,readOnly:v.readOnly,noBorder:j,"data-testid":v["data-testid"],className:t(c,h),"data-read-only":v.readOnly,"data-no-border":j,"data-position":d,children:[r("div",{"data-testid":"addon",id:N,className:p,"data-disabled":v.disabled,"data-read-only":v.readOnly,"data-position":d,children:a}),r(l,{"aria-hidden":!0,id:x,children:O}),r(i,Object.assign({ref:u},v,{"aria-labelledby":o(x,g,N),allowClear:n&&"right"!==d,error:f,"data-testid":"input",styleType:"no-border"}))]});if(!y)return B();{const{type:a="label",position:e="left"}=y,{allowClear:t}=v;switch(a){case"list":{const a=y.attributes;return a.options&&a.options.length>0?r(b,Object.assign({ref:u,addon:y,error:f,className:h,noBorder:j,"aria-label":O,"aria-labelledby":g},v)):B()}case"custom":{const a=y.attributes;return a.children?C(a.children,e,t):B()}default:{const a=y.attributes;return a.value?C(a.value,e,t):B()}}}}));export{u as InputGroup};
 //# sourceMappingURL=input-group.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"input-group.js","sources":["../../src/input-group/input-group.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-group.styles\";\nimport { InputGroupListAddon } from \"./input-group-list-addon\";\nimport type {\n CustomAddon,\n InputGroupProps,\n LabelAddon,\n ListAddon,\n} from \"./types\";\n\nconst Component = <T, V>(\n {\n addon,\n error,\n className,\n noBorder,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n ...otherProps\n }: InputGroupProps<T, V>,\n ref: React.Ref<HTMLInputElement>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const internalId = useId();\n const addonId = `${internalId}-addon`;\n const ariaLabelId = `${internalId}-ariaLabelId`;\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderNoAddons = () => (\n <InputBox\n disabled={otherProps.disabled}\n error={error}\n readOnly={otherProps.readOnly}\n noBorder={noBorder}\n data-testid={otherProps[\"data-testid\"]}\n className={clsx(styles.noAddonWrapper, className)}\n data-read-only={otherProps.readOnly}\n data-no-border={noBorder}\n >\n <Input\n ref={ref}\n {...otherProps}\n data-testid=\"input\"\n styleType=\"no-border\"\n />\n </InputBox>\n );\n\n const renderWithAddon = (\n addonContent: React.ReactNode,\n position: \"left\" \| \"right\",\n allowClear?: boolean\n ) => (\n <InputBox\n disabled={otherProps.disabled}\n error={error}\n readOnly={otherProps.readOnly}\n noBorder={noBorder}\n data-testid={otherProps[\"data-testid\"]}\n className={clsx(styles.addonWrapper, className)}\n data-read-only={otherProps.readOnly}\n data-no-border={noBorder}\n data-position={position}\n >\n <div\n data-testid=\"addon\"\n id={addonId}\n className={styles.labelAddonContainer}\n data-disabled={otherProps.disabled}\n data-read-only={otherProps.readOnly}\n data-position={position}\n >\n {addonContent}\n </div>\n <VisuallyHidden aria-hidden id={ariaLabelId}>\n {ariaLabel}\n </VisuallyHidden>\n <Input\n ref={ref}\n {...otherProps}\n aria-labelledby={concatIds(\n ariaLabelId,\n ariaLabelledBy,\n addonId\n )}\n allowClear={allowClear && position !== \"right\"}\n error={error}\n data-testid=\"input\"\n styleType=\"no-border\"\n />\n </InputBox>\n );\n\n if (addon) {\n const { type = \"label\", position = \"left\" } = addon;\n const { allowClear } = otherProps;\n\n switch (type) {\n case \"list\": {\n const listAddon = addon.attributes as ListAddon<T, V>;\n if (listAddon.options && listAddon.options.length > 0) {\n return (\n <InputGroupListAddon\n ref={ref}\n addon={addon}\n error={error}\n className={className}\n noBorder={noBorder}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n {...otherProps}\n />\n );\n } else {\n return renderNoAddons();\n }\n }\n\n case \"custom\": {\n const customAddon = addon.attributes as CustomAddon;\n if (customAddon.children) {\n return renderWithAddon(\n customAddon.children,\n position,\n allowClear\n );\n } else {\n return renderNoAddons();\n }\n }\n default: {\n const labelAddon = addon.attributes as LabelAddon;\n if (labelAddon.value) {\n return renderWithAddon(\n labelAddon.value,\n position,\n allowClear\n );\n } else {\n return renderNoAddons();\n }\n }\n }\n } else {\n return renderNoAddons();\n }\n};\n\nexport const InputGroup = React.forwardRef(Component);\n"],"names":["InputGroup","React","forwardRef","_a","ref","addon","error","className","noBorder","ariaLabel","ariaLabelledBy","otherProps","__rest","internalId","useId","addonId","ariaLabelId","renderNoAddons","~~_jsx~~","InputBox","disabled","readOnly","clsx","styles.noAddonWrapper","children","Input","Object","assign","styleType","renderWithAddon","addonContent","position","allowClear","~~_jsxs","~~styles.addonWrapper","~~id","~~styles.labelAddonContainer","~~VisuallyHidden","concatIds","~~type","listAddon","attributes","options","length","InputGroupListAddon","customAddon","labelAddon","value"],"mappings":"orBAgBA,~~MA8IaA~~,EAAaC,EAAMC,~~YA9Id~~,CACdC,EASAC,SATAC,MACIA,EAAKC,MACLA,EAAKC,UACLA,EAASC,SACTA,EACA,aAAcC,EACd,kBAAmBC,GAAcP,EAC9BQ,EAAUC,EAAAT,EAPjB,yEAcA,MAAMU,EAAaC,IACbC,EAAU,GAAGF,UACbG,EAAc,GAAGH,gBAKjBI,EAAiB,IACnBC,EAACC,EAAQ,CACLC,SAAUT,EAAWS,SACrBd,MAAOA,EACPe,SAAUV,EAAWU,SACrBb,SAAUA,~~EAAQ~~,~~cACLG,~~EAAW,eACxBJ,UAAWe,EAAKC,EAAuBhB,~~GAAU~~,~~iBACjCI,~~EAAWU,SAAQ,iBACnBb,~~EAAQgB~~,~~SAExBN~~,~~EAACO~~,EAAKC,OAAAC,OAAA,~~CACFvB~~,IAAKA,GACDO,~~EAAU~~,~~CAAA~~,~~cACF~~,~~QACZiB~~,~~UAAU~~,~~iBAKhBC~~,EAAkB,CACpBC,EACAC,EACAC,~~IAEAC~~,~~EAACd~~,EAAQ,CACLC,SAAUT,EAAWS,SACrBd,MAAOA,EACPe,SAAUV,EAAWU,SACrBb,SAAUA,EAAQ,cACLG,EAAW,eACxBJ,UAAWe,~~EAAKY~~,~~EAAqB3B~~,GAAU,iBAC/BI,EAAWU,SAAQ,iBACnBb,EAAQ,~~gBACTuB~~,~~EAAQP~~,SAAA,~~CAEvBN~~,EAAA,MAAA,CAAA,cACgB,~~QACZiB~~,~~GAAIpB~~,EACJR,~~UAAW6B~~,EAA0B,~~gBACtBzB~~,EAAWS,SAAQ,iBAClBT,EAAWU,SAAQ,~~gBACpBU~~,~~EAAQP~~,~~SAEtBM~~,~~IAELZ~~,~~EAACmB~~,EAAc,CAAA,eAAA,~~EAAaF~~,~~GAAInB~~,~~EAAWQ~~,~~SACtCf~~,~~IAELS~~,~~EAACO~~,~~iBACGrB~~,IAAKA,GACDO,EAAU,CAAA,~~kBACG2B~~,~~EACbtB~~,EACAN,EACAK,~~GAEJiB~~,WAAYA,GAA2B,UAAbD,~~EAC1BzB~~,MAAOA,EAAK,cACA,~~QACZsB~~,UAAU,kBAKtB,~~IAAIvB~~,EAmDA,OAAOY,IAnDA,CACP,MAAMsB,KAAEA,EAAO,~~QAAOR~~,SAAEA,EAAW,~~QAAW1B~~,~~GACxC2B~~,WAAEA,~~GAAerB~~,EAEvB,OAAQ4B,GACJ,IAAK,OAAQ,CACT,MAAMC,EAAYnC,EAAMoC,WACxB,OAAID,EAAUE,SAAWF,EAAUE,QAAQC,OAAS,~~EAE5CzB~~,~~EAAC0B~~,~~EAAmBlB~~,OAAAC,OAAA,~~CAChBvB~~,IAAKA,EACLC,MAAOA,EACPC,MAAOA,EACPC,UAAWA,EACXC,SAAUA,EAAQ,aACNC,EAAS,kBACJC,GACbC,IAILM,GAEf,CAEA,IAAK,SAAU,CACX,MAAM4B,EAAcxC,EAAMoC,WAC1B,OAAII,~~EAAYrB~~,~~SACLK~~,~~EACHgB~~,~~EAAYrB~~,~~SACZO~~,EACAC,~~GAGGf~~,GAEf,CACA,QAAS,CACL,MAAM6B,EAAazC,EAAMoC,WACzB,OAAIK,EAAWC,~~MACJlB~~,~~EACHiB~~,EAAWC,~~MACXhB~~,EACAC,~~GAGGf~~,GAEf,EAER,CAEA"}
1	+ {"version":3,"file":"input-group.js","sources":["../../src/input-group/input-group.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-group.styles\";\nimport { InputGroupListAddon } from \"./input-group-list-addon\";\nimport type {\n CustomAddon,\n InputGroupProps,\n LabelAddon,\n ListAddon,\n} from \"./types\";\n\nconst Component = <T, V>(\n {\n addon,\n error,\n className,\n noBorder,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n ...otherProps\n }: InputGroupProps<T, V>,\n ref: React.Ref<HTMLInputElement>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const internalId = useId();\n const addonId = `${internalId}-addon`;\n const ariaLabelId = `${internalId}-ariaLabelId`;\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderNoAddons = () => (\n <InputBox\n disabled={otherProps.disabled}\n error={error}\n readOnly={otherProps.readOnly}\n noBorder={noBorder}\n data-testid={otherProps[\"data-testid\"]}\n className={clsx(styles.noAddonWrapper, className)}\n data-read-only={otherProps.readOnly}\n data-no-border={noBorder}\n >\n <VisuallyHidden aria-hidden id={ariaLabelId}>\n {ariaLabel}\n </VisuallyHidden>\n <Input\n ref={ref}\n {...otherProps}\n data-testid=\"input\"\n styleType=\"no-border\"\n aria-labelledby={concatIds(ariaLabelId, ariaLabelledBy)}\n />\n </InputBox>\n );\n\n const renderWithAddon = (\n addonContent: React.ReactNode,\n position: \"left\" \| \"right\",\n allowClear?: boolean\n ) => (\n <InputBox\n disabled={otherProps.disabled}\n error={error}\n readOnly={otherProps.readOnly}\n noBorder={noBorder}\n data-testid={otherProps[\"data-testid\"]}\n className={clsx(styles.addonWrapper, className)}\n data-read-only={otherProps.readOnly}\n data-no-border={noBorder}\n data-position={position}\n >\n <div\n data-testid=\"addon\"\n id={addonId}\n className={styles.labelAddonContainer}\n data-disabled={otherProps.disabled}\n data-read-only={otherProps.readOnly}\n data-position={position}\n >\n {addonContent}\n </div>\n <VisuallyHidden aria-hidden id={ariaLabelId}>\n {ariaLabel}\n </VisuallyHidden>\n <Input\n ref={ref}\n {...otherProps}\n aria-labelledby={concatIds(\n ariaLabelId,\n ariaLabelledBy,\n addonId\n )}\n allowClear={allowClear && position !== \"right\"}\n error={error}\n data-testid=\"input\"\n styleType=\"no-border\"\n />\n </InputBox>\n );\n\n if (addon) {\n const { type = \"label\", position = \"left\" } = addon;\n const { allowClear } = otherProps;\n\n switch (type) {\n case \"list\": {\n const listAddon = addon.attributes as ListAddon<T, V>;\n if (listAddon.options && listAddon.options.length > 0) {\n return (\n <InputGroupListAddon\n ref={ref}\n addon={addon}\n error={error}\n className={className}\n noBorder={noBorder}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n {...otherProps}\n />\n );\n } else {\n return renderNoAddons();\n }\n }\n\n case \"custom\": {\n const customAddon = addon.attributes as CustomAddon;\n if (customAddon.children) {\n return renderWithAddon(\n customAddon.children,\n position,\n allowClear\n );\n } else {\n return renderNoAddons();\n }\n }\n default: {\n const labelAddon = addon.attributes as LabelAddon;\n if (labelAddon.value) {\n return renderWithAddon(\n labelAddon.value,\n position,\n allowClear\n );\n } else {\n return renderNoAddons();\n }\n }\n }\n } else {\n return renderNoAddons();\n }\n};\n\nexport const InputGroup = React.forwardRef(Component);\n"],"names":["InputGroup","React","forwardRef","_a","ref","addon","error","className","noBorder","ariaLabel","ariaLabelledBy","otherProps","__rest","internalId","useId","addonId","ariaLabelId","renderNoAddons","_jsxs","InputBox","disabled","readOnly","clsx","styles.noAddonWrapper","_jsx","VisuallyHidden","id","children","Input","Object","assign","styleType","concatIds","renderWithAddon","addonContent","position","allowClear","styles.addonWrapper","styles.labelAddonContainer","type","listAddon","attributes","options","length","InputGroupListAddon","customAddon","labelAddon","value"],"mappings":"orBAgBA,MAkJaA,EAAaC,EAAMC,YAlJd,CACdC,EASAC,SATAC,MACIA,EAAKC,MACLA,EAAKC,UACLA,EAASC,SACTA,EACA,aAAcC,EACd,kBAAmBC,GAAcP,EAC9BQ,EAAUC,EAAAT,EAPjB,yEAcA,MAAMU,EAAaC,IACbC,EAAU,GAAGF,UACbG,EAAc,GAAGH,gBAKjBI,EAAiB,IACnBC,EAACC,EAAQ,CACLC,SAAUT,EAAWS,SACrBd,MAAOA,EACPe,SAAUV,EAAWU,SACrBb,SAAUA,gBACGG,EAAW,eACxBJ,UAAWe,EAAKC,EAAuBhB,oBACvBI,EAAWU,SAAQ,iBACnBb,YAEhBgB,EAACC,EAAc,CAAA,eAAA,EAAaC,GAAIV,EAAWW,SACtClB,IAELe,EAACI,EAAKC,OAAAC,OAAA,CACF1B,IAAKA,GACDO,iBACQ,QACZoB,UAAU,8BACOC,EAAUhB,EAAaN,SAK9CuB,EAAkB,CACpBC,EACAC,EACAC,IAEAlB,EAACC,EAAQ,CACLC,SAAUT,EAAWS,SACrBd,MAAOA,EACPe,SAAUV,EAAWU,SACrBb,SAAUA,EAAQ,cACLG,EAAW,eACxBJ,UAAWe,EAAKe,EAAqB9B,GAAU,iBAC/BI,EAAWU,SAAQ,iBACnBb,EAAQ,gBACT2B,EAAQR,SAAA,CAEvBH,EAAA,MAAA,CAAA,cACgB,QACZE,GAAIX,EACJR,UAAW+B,EAA0B,gBACtB3B,EAAWS,SAAQ,iBAClBT,EAAWU,SAAQ,gBACpBc,EAAQR,SAEtBO,IAELV,EAACC,EAAc,CAAA,eAAA,EAAaC,GAAIV,EAAWW,SACtClB,IAELe,EAACI,iBACGxB,IAAKA,GACDO,EAAU,CAAA,kBACGqB,EACbhB,EACAN,EACAK,GAEJqB,WAAYA,GAA2B,UAAbD,EAC1B7B,MAAOA,EAAK,cACA,QACZyB,UAAU,kBAKtB,IAAI1B,EAmDA,OAAOY,IAnDA,CACP,MAAMsB,KAAEA,EAAO,QAAOJ,SAAEA,EAAW,QAAW9B,GACxC+B,WAAEA,GAAezB,EAEvB,OAAQ4B,GACJ,IAAK,OAAQ,CACT,MAAMC,EAAYnC,EAAMoC,WACxB,OAAID,EAAUE,SAAWF,EAAUE,QAAQC,OAAS,EAE5CnB,EAACoB,EAAmBf,OAAAC,OAAA,CAChB1B,IAAKA,EACLC,MAAOA,EACPC,MAAOA,EACPC,UAAWA,EACXC,SAAUA,EAAQ,aACNC,EAAS,kBACJC,GACbC,IAILM,GAEf,CAEA,IAAK,SAAU,CACX,MAAM4B,EAAcxC,EAAMoC,WAC1B,OAAII,EAAYlB,SACLM,EACHY,EAAYlB,SACZQ,EACAC,GAGGnB,GAEf,CACA,QAAS,CACL,MAAM6B,EAAazC,EAAMoC,WACzB,OAAIK,EAAWC,MACJd,EACHa,EAAWC,MACXZ,EACAC,GAGGnB,GAEf,EAER,CAEA"}

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

@@ -1,2 +1,2 @@
-import"./input-group.styles_fpy81r.css";const p="afvd13",s="nx53mj4",t="l1s6ick6";export{p as addonWrapper,t as labelAddonContainer,s as noAddonWrapper};
+import"./input-group.styles_bqye6f.css";const p="afvd13",s="nx53mj4",t="l1s6ick6";export{p as addonWrapper,t as labelAddonContainer,s as noAddonWrapper};
 //# sourceMappingURL=input-group.styles.js.map

package/input-group/input-group.styles_bqye6f.css ADDED Viewed

@@ -0,0 +1,3 @@
+.afvd13{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:0 var(--fds-spacing-16);}.afvd13[data-read-only="true"]{padding:0;}.afvd13[data-no-border="true"]{padding:0;}.afvd13[data-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.nx53mj4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:100%;padding:0 var(--fds-spacing-16);}.nx53mj4[data-read-only="true"]{padding:0;}.nx53mj4[data-no-border="true"]{padding:0;}
+.l1s6ick6{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--fds-spacing-12);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);}.l1s6ick6 svg{height:1em;width:1em;}.l1s6ick6[data-disabled="true"]{color:var(--fds-colour-text-subtler);}.l1s6ick6[data-read-only="true"]{margin-right:var(--fds-spacing-4);}.l1s6ick6[data-position="right"]{margin-right:0;margin-left:var(--fds-spacing-12);}.l1s6ick6[data-position="right"][data-read-only="true"]{margin-right:0;margin-left:var(--fds-spacing-4);}

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

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import t from"../external/lodash/findIndex.js";import{useState as r,useRef as o,useEffect as s}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"../util/string-helper.js";import"@react-aria/live-announcer";import"../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import{DropdownList as l}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as a}from"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as n}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_1qveyb9.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 h}from"../shared/dropdown-wrapper/dropdown-wrapper.js";const u=({selectedOptions:u,placeholder:b="Select",options:f,disabled:j,error:w,className:x,"data-testid":g,id:y,"aria-labelledby":_,"aria-describedby":v,"aria-invalid":T,enableSearch:S=!1,searchFunction:A,searchPlaceholder:I,valueExtractor:k,listExtractor:C,onSelectOptions:O,onShowOptions:L,onHideOptions:R,onRetry:q,optionsLoadState:D="success",optionTruncationType:E="end",renderListItem:H,hideNoResultsDisplay:N,noResultsDescription:P,customLabels:G,renderCustomCallToAction:B,onBlur:M,variant:F="default",readOnly:W,alignment:Z,dropdownZIndex:$,maxSelectable:z,dropdownRootNode:J,dropdownWidth:K})=>{const{allSelectedLabel:Q,multiSelectedLabel:U}=G||{},[V,X]=r(u||[]),[Y,ee]=r(!1),[te,re]=r(!1),oe=i(),se=o(null),ie=o(null);s((()=>{X(u||[])}),[u]);const le=()=>{V&&V.length>0||z?(X([]),me([])):(X(f),me(f))},ae=(e,r)=>{const o=[...V],s=t(V,(e=>(k?k(e):e)===r));s>-1?o.splice(s,1):o.push(e),X(o),me(o)},ne=()=>{Y&&(ee(!1),ce(!1))},de=()=>{te||Y||re(!0)},pe=e=>{te&&!Y&&se.current&&!se.current.contains(e.relatedTarget)&&(re(!1),null==M||M())},ce=e=>{!e&&R&&R(),e&&L&&L()},me=e=>{O&&O(e)};return e(a,{children:e(d,{enabled:!W&&!j,isOpen:Y,renderElement:()=>e(p,{className:x,"data-testid":g,id:y,ref:se,tabIndex:-1,onFocus:de,onBlur:pe,focused:te,disabled:j,readOnly:W,error:w,children:e(n,{ref:ie,disabled:j,expanded:Y,listboxId:oe,popupRole:"listbox",readOnly:W,variant:F,"aria-labelledby":_,"aria-describedby":v,"aria-invalid":T,children:e(c,{disabled:j,children:V&&0!==V.length?e(h,{variant:F,truncateType:E,children:f&&V.length===f.length?Q||"All selected":U||`${V.length} selected`}):e(m,{variant:F,truncateType:E,children:b})})})}),renderDropdown:()=>e(l,{listboxId:oe,listItems:f,onSelectItem:ae,onDismiss:ne,valueExtractor:k,listExtractor:C,enableSearch:S,searchFunction:A,searchPlaceholder:I,multiSelect:!0,maxSelectable:z,selectedItems:V,onSelectAll:le,onRetry:q,itemsLoadState:D,itemTruncationType:E,renderListItem:H,hideNoResultsDisplay:N,noResultsDescription:P,customLabels:G,renderCustomCallToAction:B,variant:F,width:K,matchElementWidth:!0}),onOpen:()=>{ee(!0),ce(!0),re(!0)},onClose:e=>{ee(!1),ce(!1),"click"!==e&&(re(!1),null==M||M())},onDismiss:()=>{var e;null===(e=ie.current)||void 0===e||e.focus(),ee(!1),ce(!1)},clickToToggle:!0,offset:8,alignment:Z,fitAvailableHeight:!0,customZIndex:$,rootNode:J})})};export{u as InputMultiSelect};
+import{jsx as e}from"react/jsx-runtime";import t from"../external/lodash/findIndex.js";import{useState as r,useRef as o,useEffect as s}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"../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 l}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as a}from"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as n}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 h}from"../shared/dropdown-wrapper/dropdown-wrapper.js";const u=({selectedOptions:u,placeholder:j="Select",options:w,disabled:x,error:b,className:f,"data-testid":g,id:y,"aria-labelledby":_,"aria-describedby":T,"aria-invalid":v,enableSearch:S=!1,searchFunction:A,searchPlaceholder:I,valueExtractor:k,listExtractor:C,onSelectOptions:O,onShowOptions:L,onHideOptions:R,onRetry:q,optionsLoadState:D="success",optionTruncationType:E="end",renderListItem:H,hideNoResultsDisplay:N,noResultsDescription:P,customLabels:G,renderCustomCallToAction:B,onBlur:M,variant:F="default",readOnly:W,alignment:Z,dropdownZIndex:$,maxSelectable:z,dropdownRootNode:J,dropdownWidth:K})=>{const{allSelectedLabel:Q,multiSelectedLabel:U}=G||{},[V,X]=r(u||[]),[Y,ee]=r(!1),[te,re]=r(!1),oe=i(),se=o(null),ie=o(null);s((()=>{X(u||[])}),[u]);const le=()=>{V&&V.length>0||z?(X([]),ce([])):(X(w),ce(w))},ae=(e,r)=>{const o=[...V],s=t(V,(e=>(k?k(e):e)===r));s>-1?o.splice(s,1):o.push(e),X(o),ce(o)},ne=()=>{Y&&(ee(!1),me(!1))},de=()=>{te||Y||re(!0)},pe=e=>{te&&!Y&&se.current&&!se.current.contains(e.relatedTarget)&&(re(!1),null==M||M())},me=e=>{!e&&R&&R(),e&&L&&L()},ce=e=>{O&&O(e)};return e(a,{children:e(d,{enabled:!W&&!x,isOpen:Y,renderElement:()=>e(p,{className:f,"data-testid":g,id:y,ref:se,tabIndex:-1,onFocus:de,onBlur:pe,focused:te,disabled:x,readOnly:W,error:b,children:e(n,{ref:ie,disabled:x,expanded:Y,listboxId:oe,popupRole:"listbox",readOnly:W,variant:F,"aria-labelledby":_,"aria-describedby":T,"aria-invalid":v,children:e(m,{disabled:x,children:V&&0!==V.length?e(h,{variant:F,truncateType:E,children:w&&V.length===w.length?Q||"All selected":U||`${V.length} selected`}):e(c,{variant:F,truncateType:E,children:j})})})}),renderDropdown:()=>e(l,{listboxId:oe,listItems:w,onSelectItem:ae,onDismiss:ne,valueExtractor:k,listExtractor:C,enableSearch:S,searchFunction:A,searchPlaceholder:I,multiSelect:!0,maxSelectable:z,selectedItems:V,onSelectAll:le,onRetry:q,itemsLoadState:D,itemTruncationType:E,renderListItem:H,hideNoResultsDisplay:N,noResultsDescription:P,customLabels:G,renderCustomCallToAction:B,variant:F,width:K,matchElementWidth:!0}),onOpen:()=>{ee(!0),me(!0),re(!0)},onClose:e=>{ee(!1),me(!1),"click"!==e&&(re(!1),null==M||M())},onDismiss:()=>{var e;null===(e=ie.current)||void 0===e||e.focus(),ee(!1),me(!1)},clickToToggle:!0,offset:8,alignment:Z,fitAvailableHeight:!0,customZIndex:$,rootNode:J})})};export{u as InputMultiSelect};
 //# sourceMappingURL=input-multi-select.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"input-multi-select.js","sources":["../../src/input-multi-select/input-multi-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport findIndex from \"lodash/findIndex\";\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 type { InputMultiSelectProps } from \"./types\";\n\nexport const InputMultiSelect = <T, V>({\n selectedOptions,\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 listExtractor,\n onSelectOptions,\n onShowOptions,\n onHideOptions,\n onRetry,\n optionsLoadState = \"success\",\n optionTruncationType = \"end\",\n renderListItem,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n renderCustomCallToAction,\n onBlur,\n variant = \"default\",\n readOnly,\n alignment,\n dropdownZIndex,\n maxSelectable,\n dropdownRootNode,\n dropdownWidth,\n}: InputMultiSelectProps<T, V>): JSX.Element => {\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const { allSelectedLabel, multiSelectedLabel } = customLabels \|\| {};\n const [selected, setSelected] = useState<T[]>(selectedOptions \|\| []);\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\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(selectedOptions \|\| []);\n }, [selectedOptions]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSelectAllClick = () => {\n if ((selected && selected.length > 0) \|\| maxSelectable) {\n setSelected([]);\n performOnSelectOptions([]);\n } else {\n setSelected(options);\n performOnSelectOptions(options);\n }\n };\n\n const handleListItemClick = (item: T, extractedValue: T \| V) => {\n const selectedCopy = [...selected];\n\n // Check if it is a selection or deselection\n const itemIndex = findIndex(selected, (item) => {\n const valueToCompare = valueExtractor ? valueExtractor(item) : item;\n return valueToCompare === extractedValue;\n });\n\n if (itemIndex > -1) {\n // Item exists in selected. This indicates a deselection\n selectedCopy.splice(itemIndex, 1);\n } else {\n // Item does not exist in selected. This indicates a selection\n selectedCopy.push(item);\n }\n\n setSelected(selectedCopy);\n performOnSelectOptions(selectedCopy);\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 = () => {\n if (options && selected.length === options.length) {\n return allSelectedLabel \|\| \"All selected\";\n }\n\n return multiSelectedLabel \|\| `${selected.length} selected`;\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 = (options: T[]) => {\n if (onSelectOptions) {\n onSelectOptions(options);\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderLabel = () => {\n if (!selected \|\| selected.length === 0) {\n return (\n <PlaceholderLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {placeholder}\n </PlaceholderLabel>\n );\n } else {\n return (\n <ValueLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {getDisplayValue()}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer disabled={disabled}>{renderLabel()}</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 searchFunction={searchFunction}\n searchPlaceholder={searchPlaceholder}\n multiSelect\n maxSelectable={maxSelectable}\n selectedItems={selected}\n onSelectAll={handleSelectAllClick}\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":["InputMultiSelect","selectedOptions","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","listExtractor","onSelectOptions","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","maxSelectable","dropdownRootNode","dropdownWidth","allSelectedLabel","multiSelectedLabel","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","useEffect","handleSelectAllClick","length","performOnSelectOptions","handleListItemClick","item","extractedValue","selectedCopy","itemIndex","findIndex","splice","push","handleListDismiss","triggerOptionDisplayCallback","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","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","multiSelect","selectedItems","onSelectAll","itemsLoadState","itemTruncationType","width","matchElementWidth","onOpen","onClose","reason","_a","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"input-multi-select.js","sources":["../../src/input-multi-select/input-multi-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport findIndex from \"lodash/findIndex\";\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 type { InputMultiSelectProps } from \"./types\";\n\nexport const InputMultiSelect = <T, V>({\n selectedOptions,\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 listExtractor,\n onSelectOptions,\n onShowOptions,\n onHideOptions,\n onRetry,\n optionsLoadState = \"success\",\n optionTruncationType = \"end\",\n renderListItem,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n renderCustomCallToAction,\n onBlur,\n variant = \"default\",\n readOnly,\n alignment,\n dropdownZIndex,\n maxSelectable,\n dropdownRootNode,\n dropdownWidth,\n}: InputMultiSelectProps<T, V>): JSX.Element => {\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const { allSelectedLabel, multiSelectedLabel } = customLabels \|\| {};\n const [selected, setSelected] = useState<T[]>(selectedOptions \|\| []);\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\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(selectedOptions \|\| []);\n }, [selectedOptions]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSelectAllClick = () => {\n if ((selected && selected.length > 0) \|\| maxSelectable) {\n setSelected([]);\n performOnSelectOptions([]);\n } else {\n setSelected(options);\n performOnSelectOptions(options);\n }\n };\n\n const handleListItemClick = (item: T, extractedValue: T \| V) => {\n const selectedCopy = [...selected];\n\n // Check if it is a selection or deselection\n const itemIndex = findIndex(selected, (item) => {\n const valueToCompare = valueExtractor ? valueExtractor(item) : item;\n return valueToCompare === extractedValue;\n });\n\n if (itemIndex > -1) {\n // Item exists in selected. This indicates a deselection\n selectedCopy.splice(itemIndex, 1);\n } else {\n // Item does not exist in selected. This indicates a selection\n selectedCopy.push(item);\n }\n\n setSelected(selectedCopy);\n performOnSelectOptions(selectedCopy);\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 = () => {\n if (options && selected.length === options.length) {\n return allSelectedLabel \|\| \"All selected\";\n }\n\n return multiSelectedLabel \|\| `${selected.length} selected`;\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 = (options: T[]) => {\n if (onSelectOptions) {\n onSelectOptions(options);\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderLabel = () => {\n if (!selected \|\| selected.length === 0) {\n return (\n <PlaceholderLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {placeholder}\n </PlaceholderLabel>\n );\n } else {\n return (\n <ValueLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {getDisplayValue()}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer disabled={disabled}>{renderLabel()}</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 searchFunction={searchFunction}\n searchPlaceholder={searchPlaceholder}\n multiSelect\n maxSelectable={maxSelectable}\n selectedItems={selected}\n onSelectAll={handleSelectAllClick}\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":["InputMultiSelect","selectedOptions","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","listExtractor","onSelectOptions","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","maxSelectable","dropdownRootNode","dropdownWidth","allSelectedLabel","multiSelectedLabel","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","useEffect","handleSelectAllClick","length","performOnSelectOptions","handleListItemClick","item","extractedValue","selectedCopy","itemIndex","findIndex","splice","push","handleListDismiss","triggerOptionDisplayCallback","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","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","multiSelect","selectedItems","onSelectAll","itemsLoadState","itemTruncationType","width","matchElementWidth","onOpen","onClose","reason","_a","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

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

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

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":"85CA2BO,MAAMA,EAAyB,EAClCC,cAAc,SACdC,QAASC,EACTC,WACAC,QACAC,YACA,cAAeC,EACfC,KACA,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,EAChBC,iBAAkBC,EAClBC,OACAC,wBACAC,eACAC,oBACAC,uBACAC,uBACAC,eACAC,WACAC,WACAC,kBACAC,gBACAC,gBACAC,UACAC,SACAC,mBAAmB,UACnBC,uBAAuB,MACvBC,UAAU,UACVC,YACAC,iBACAC,gBACAC,uBAKA,MAAMC,mBAAEA,GAAuBf,GAAgB,CAAA,EACzClB,EAAUC,GACTS,EAAkBwB,GAAuBC,EAC5CxB,EACMyB,EAAkBzB,GAClB,IAAI0B,MAEPC,GAAeC,IAAoBJ,EAExC,KAEKK,GAAaC,IAAkBN,GAAkB,IACjDO,GAASC,IAAcR,GAAkB,GAC1CS,GAAaC,IAEbC,GAAUC,EAAuB,MACjCC,GAAcD,EAA0B,MACxCE,GAAoBF,EAAuB,MAKjDG,GAAU,KACN,MAAMC,EAAaxC,GAAqB,GAClC2B,EAAgBc,EAAiBpD,EAASmD,GAEhDjB,EAAoBE,EAAkBe,IACtCZ,GAAiBD,EAAc,GAChC,CAAC3B,EAAmBX,IAKvB,MAAMqD,GAAkB,CACpBC,EACAC,KAEA,MAAMjB,EAAgBiB,EAAMC,KAAKC,IAAI,CACjCC,QAASD,EAAKC,QACdC,MAAOF,EAAKA,KAAKE,MACjBC,MAAOH,EAAKA,KAAKG,UAErB1B,EAAoBE,EAAkBkB,IACtCf,GAAiBD,GACjBuB,GAAuBP,EAAUhB,EAAc,EAG7CwB,GACFC,IAEA,MAAMC,EACFC,GAAgBF,GACdG,EAAcF,EAAiBR,KAAKC,GAASA,EAAKC,UACxDnB,GAAiByB,GACjB9B,EAAoBE,EAAkB8B,IACtCL,GAAuBK,EAAaF,EAAiB,EAGnDG,GAAkB,KACfzB,IAAYF,IACbG,IAAW,EACf,EAGEyB,GAAkBC,IAEhB3B,KACCF,IACDM,GAAQwB,UACPxB,GAAQwB,QAAQC,SAASF,EAAEG,iBAE5B7B,IAAW,GACXlB,SAAAA,IACJ,EA6BEgD,GAAkB,KACpB,GAAInC,GAAcoC,OAAS,EACvB,OAAOzC,GAAsB,GAAGK,GAAcoC,kBAGlD,MAAMf,MAAEA,EAAKC,MAAEA,GAAUtB,GAAc,GACvC,OAAIzB,EACOA,EAAsB+C,GAEtBD,CACX,EAGEgB,GAAiBf,IACnB,GAA6B,WAAzBjC,EAAmC,CACnC,IAAIiD,EAAiB,EAKrB,OAJI3B,IAAqBA,GAAkBqB,UACvCM,EACI3B,GAAkBqB,QAAQO,wBAAwBC,OAEnDC,EAAaC,gBAAgBpB,EAAOgB,EAAgB,IAAK,EACpE,CAEA,OAAOhB,CAAK,EAGVqB,GAAgCC,KAC7BA,GAAQ3D,GACTA,IAGA2D,GAAQ5D,GACRA,GACJ,EAGEuC,GAAyB,CAC3BP,EACAC,KAEA,GAAIlC,EAAiB,CACjB,MAAM8D,EAAc5B,EAAMC,KAAKC,GAASA,EAAKG,QAC7CvC,EAAgBiC,EAAU6B,EAC9B,GAGElB,GACFR,IAEA,IAAqB,IAAjBA,EAAK2B,QAEL,OAAO9C,GAAc+C,QAAQC,IACzB,MAAMC,EAAkBD,EAAa5B,QAAQ8B,MACzC,EACA/B,EAAKC,QAAQgB,QAEjB,OAAQe,EAAQhC,EAAKC,QAAS6B,EAAgB,IAE/C,CAEH,MAAMG,EAAgB,IAAIpD,IAmB1B,OAlBsBmB,EAAKkC,YACrBC,EAAoB5F,EAASyD,EAAKC,SAClC,CACI,CACIE,MAAOH,EAAKA,KAAKG,MACjBD,MAAOF,EAAKA,KAAKE,MACjBD,QAASD,EAAKC,WAGdmC,SAASC,IAEdxD,GAAcyD,MAAMT,GACjBG,EAAQH,EAAa5B,QAASoC,EAAUpC,YAG5CgC,EAAcM,KAAKF,EACvB,IAEGJ,CACX,GAuFJ,OACIO,EAACC,EAAmB,CAChBC,SAAUhF,IAAajB,EACvBkG,OAAQ5D,GACR6D,cA/Dc,IAEdJ,EAACK,GACGlG,UAAWA,EAAS,cACPC,EACbC,GAAIA,EACJiG,IAAKzD,GACL0D,UAAU,EACVC,QAAStC,GACT1C,OAAQ2C,GACR1B,QAASA,GACTxC,SAAUA,EACViB,SAAUA,EACVhB,MAAOA,WAEP8F,EAACS,GACGH,IAAKvD,GACL9C,SAAUA,EACVyG,SAAUnE,GACVoE,UAAWhE,GACXiE,UAAU,OACV1F,SAAUA,EACVS,QAASA,EAAO,kBACCrB,qBACCC,EAAe,eACnBC,EAAWqG,SA9BrCb,EAACc,EAAc,CAACR,IAAKtD,GAAmB/C,SAAUA,WAhB9C8G,EAAQ1E,IAEJ2D,EAACgB,EAAgB,CAACC,aAAcvF,EAAoBmF,SAC/C/G,IAKLkG,EAACkB,EAAU,CAACD,aAAcvF,EAAoBmF,SACzCnC,GAAcF,cA4EvB2C,eA/Be,IAEfnB,EAACoB,EAAkB,CACfT,UAAWhE,GACX0E,UAAWtH,EACXuH,aAAW,EACX7G,iBAAkBA,EAClB8G,eAAgB9F,EAChB+F,mBAAoB9F,EACpBb,aAAcA,EACdC,kBAAmBA,EACnBC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,aAAcA,EACdwG,aAAc5D,GACd6D,YAAatE,GACb7B,QAASA,EACTJ,SAAUA,EACVQ,QAASA,EACThB,KAAMA,EACNkE,MAAO/C,EACP6F,mBAAiB,IAWrBC,OAvMW,KACfpF,IAAe,GACfwC,IAA6B,GAC7BtC,IAAW,EAAK,EAqMZmF,QAlMaC,IACjBtF,IAAe,GACfwC,IAA6B,GAGd,UAAX8C,IACApF,IAAW,GACXlB,SAAAA,IACJ,EA2LIuG,UAxLc,WACC,QAAnBC,EAAAjF,GAAYsB,eAAO,IAAA2D,GAAAA,EAAEC,QACrBzF,IAAe,GACfwC,IAA6B,EAAM,EAsL/BkD,eAAa,EACbC,OAAQ,EACRvG,UAAWA,EACXwG,oBAAkB,EAClBC,aAAcxG,EACdyG,SAAUvG,GACZ"}
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 d}from"../util/simple-id-generator.js";import{StringHelper as i}from"../util/string-helper.js";import"@react-aria/live-announcer";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 c}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{LabelContainer as m,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:f,disabled:y,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:F,onHideOptions:K,onRetry:W,optionsLoadState:Z="success",optionTruncationType:q="end",variant:G="default",alignment:M,dropdownZIndex:z,dropdownWidth:J,dropdownRootNode:Q})=>{const U=f,[V,X]=t(R?a([R]):new Set),[Y,$]=t(),[ee,re]=t(!1),[te,oe]=t(!1),ne=d(),de=o(null),ie=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=ie.current)||void 0===r||r.focus(),null==H||H(t,n)},ae=()=>{te||ee||oe(!0)},pe=e=>{te&&!ee&&de.current&&!de.current.contains(e.relatedTarget)&&(oe(!1),null==B||B())},ce=()=>{if(!Y)return"";const{label:e,value:r}=Y;return k?k(r):e},me=e=>{if("middle"===q){let r=0;return le&&le.current&&(r=le.current.getBoundingClientRect().width),i.truncateOneLine(e,r,120,6)}return e},ue=e=>{!e&&K&&K(),e&&F&&F()};return e(c,{enabled:!A&&!y,isOpen:ee,renderElement:()=>e(w,{className:v,"data-testid":x,id:g,ref:de,tabIndex:-1,onFocus:ae,onBlur:pe,focused:te,disabled:y,readOnly:A,error:j,children:e(l,{ref:ie,disabled:y,expanded:ee,listboxId:ne,popupRole:"tree",readOnly:A,variant:G,"aria-labelledby":S,"aria-describedby":T,"aria-invalid":O,children:e(m,{ref:le,disabled:y,children:r(Y)?e(u,{truncateType:q,children:b}):e(h,{truncateType:q,children:me(ce())})})})}),renderDropdown:()=>e(s,{listboxId:ne,listItems:U,selectedKeyPaths:V,selectableCategory:P,itemsLoadState:Z,itemTruncationType:q,enableSearch:D,searchPlaceholder:N,hideNoResultsDisplay:C,noResultsDescription:L,customLabels:_,onSelectItem:se,onRetry:W,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=ie.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