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

package/input-multi-select/input-multi-select.d.ts

@@ -1,2 +1,9 @@
 import type { InputMultiSelectProps } from "./types";
+/**
+ * A dropdown field that lets users select multiple options from a list.
+ *
+ * Use `InputMultiSelect` when users need to pick one or more items from a
+ * predefined list.
+ * @keywords combobox, dropdown, field, form, input, multi-value, multiple, select
+ */
 export declare const InputMultiSelect: <T, V>({ selectedOptions, placeholder, options, disabled, error, className, "data-testid": testId, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": 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, }: InputMultiSelectProps<T, V>) => JSX.Element;

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

@@ -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"styled-components";import"../util/string-helper.js";import"../v3_theme/index.js";import"../shared/dropdown-list-v2/dropdown-label.styles.js";import{DropdownList as l}from"../shared/dropdown-list-v2/dropdown-list.js";import{DropdownListState as a}from"../shared/dropdown-list-v2/dropdown-list-state.js";import{ExpandableElement as i}from"../shared/dropdown-list-v2/expandable-element.js";import"@lifesg/react-icons/caret-right";import"react-virtuoso";import"../button/button.style.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as n}from"../util/simple-id-generator.js";import{LabelContainer as d,PlaceholderLabel as p,ValueLabel as c}from"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as m}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../shared/dropdown-list-v2/dropdown-list.styles.js";import"../shared/dropdown-list-v2/dropdown-search.js";import"../shared/dropdown-list-v2/nested-dropdown-list.styles.js";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{InputBox as h}from"../shared/input-wrapper/input-wrapper.js";const u=({selectedOptions:u,placeholder:b="Select",options:w,disabled:j,error:x,className:y,"data-testid":f,id:g,"aria-labelledby":v,"aria-describedby":S,"aria-invalid":T,enableSearch:I=!1,searchFunction:O,searchPlaceholder:$,valueExtractor:L,listExtractor:R,onSelectOptions:A,onShowOptions:D,onHideOptions:C,onRetry:E,optionsLoadState:N="success",optionTruncationType:_="end",renderListItem:B,hideNoResultsDisplay:k,noResultsDescription:F,customLabels:H,renderCustomCallToAction:P,onBlur:W,variant:Z="default",readOnly:q,alignment:G,dropdownZIndex:z,maxSelectable:J,dropdownRootNode:K,dropdownWidth:M})=>{const{allSelectedLabel:Q,multiSelectedLabel:U}=H||{},[V,X]=r(u||[]),[Y,ee]=r(!1),[te,re]=r(!1),[oe]=r((()=>n.generate())),se=o(null),le=o(null);s((()=>{X(u||[])}),[u]);const ae=()=>{V&&V.length>0||J?(X([]),me([])):(X(w),me(w))},ie=(e,r)=>{const o=[...V],s=t(V,(e=>(L?L(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==W||W())},ce=e=>{!e&&C&&C(),e&&D&&D()},me=e=>{A&&A(e)};return e(a,{children:e(m,{enabled:!q&&!j,isOpen:Y,renderElement:()=>e(h,{className:y,"data-testid":f,id:g,ref:se,tabIndex:-1,onFocus:de,onBlur:pe,$focused:te,$disabled:j,$readOnly:q,$error:x,children:e(i,{ref:le,disabled:j,expanded:Y,listboxId:oe,popupRole:"listbox",readOnly:q,variant:Z,"aria-labelledby":v,"aria-describedby":S,"aria-invalid":T,children:e(d,{$disabled:j,children:V&&0!==V.length?e(c,{$variant:Z,children:w&&V.length===w.length?Q||"All selected":U||`${V.length} selected`}):e(p,{$truncateType:_,$variant:Z,children:b})})})}),renderDropdown:()=>e(l,{listboxId:oe,listItems:w,onSelectItem:ie,onDismiss:ne,valueExtractor:L,listExtractor:R,enableSearch:I,searchFunction:O,searchPlaceholder:$,multiSelect:!0,maxSelectable:J,selectedItems:V,onSelectAll:ae,onRetry:E,itemsLoadState:N,itemTruncationType:_,renderListItem:B,hideNoResultsDisplay:k,noResultsDescription:F,customLabels:H,renderCustomCallToAction:P,variant:Z,width:M,matchElementWidth:!0}),onOpen:()=>{ee(!0),ce(!0),re(!0)},onClose:e=>{ee(!1),ce(!1),"click"!==e&&(re(!1),null==W||W())},onDismiss:()=>{var e;null===(e=le.current)||void 0===e||e.focus(),ee(!1),ce(!1)},clickToToggle:!0,offset:8,alignment:G,fitAvailableHeight:!0,customZIndex:z,rootNode:K})})};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

@@ -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-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator } 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] = useState<string>(() => SimpleIdGenerator.generate());\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                    $truncateType={optionTruncationType}\n                    $variant={variant}\n                >\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else {\n            return (\n                <ValueLabel $variant={variant}>{getDisplayValue()}</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","SimpleIdGenerator","generate","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","$focused","$disabled","$error","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","$variant","PlaceholderLabel","$truncateType","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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"}
+{"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\n// @catalog\n/**\n * A dropdown field that lets users select multiple options from a list.\n *\n * Use `InputMultiSelect` when users need to pick one or more items from a\n * predefined list.\n * @keywords combobox, dropdown, field, form, input, multi-value, multiple, select\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":"otEA4BaA,EAAmB,EAC5BC,kBACAC,cAAc,SACdC,UACAC,WACAC,QACAC,YACA,cAAeC,EACfC,KACA,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,EAChBC,gBAAe,EACfC,iBACAC,oBACAC,iBACAC,gBACAC,kBACAC,gBACAC,gBACAC,UACAC,mBAAmB,UACnBC,uBAAuB,MACvBC,iBACAC,uBACAC,uBACAC,eACAC,2BACAC,SACAC,UAAU,UACVC,WACAC,YACAC,iBACAC,gBACAC,mBACAC,oBAKA,MAAMC,iBAAEA,EAAgBC,mBAAEA,GAAuBX,GAAgB,CAAA,GAC1DY,EAAUC,GAAeC,EAAcvC,GAAmB,KAC1DwC,EAAaC,IAAkBF,GAAkB,IACjDG,GAASC,IAAcJ,GAAkB,GAC1CK,GAAaC,IAEbC,GAAUC,EAAuB,MACjCC,GAAcD,EAA0B,MAK9CE,GAAU,KACNX,EAAYtC,GAAmB,GAAG,GACnC,CAACA,IAKJ,MAAMkD,GAAuB,KACpBb,GAAYA,EAASc,OAAS,GAAMnB,GACrCM,EAAY,IACZc,GAAuB,MAEvBd,EAAYpC,GACZkD,GAAuBlD,GAC3B,EAGEmD,GAAsB,CAACC,EAASC,KAClC,MAAMC,EAAe,IAAInB,GAGnBoB,EAAYC,EAAUrB,GAAWiB,IACZxC,EAAiBA,EAAewC,GAAQA,KACrCC,IAG1BE,GAAY,EAEZD,EAAaG,OAAOF,EAAW,GAG/BD,EAAaI,KAAKN,GAGtBhB,EAAYkB,GACZJ,GAAuBI,EAAa,EAGlCK,GAAoB,KAClBrB,IACAC,IAAe,GACfqB,IAA6B,GACjC,EAGEC,GAAkB,KACfrB,IAAYF,GACbG,IAAW,EACf,EAGEqB,GAAkBC,IAEhBvB,KACCF,GACDM,GAAQoB,UACPpB,GAAQoB,QAAQC,SAASF,EAAEG,iBAE5BzB,IAAW,GACXhB,SAAAA,IACJ,EAqCEmC,GAAgCO,KAC7BA,GAAQnD,GACTA,IAGAmD,GAAQpD,GACRA,GACJ,EAGEmC,GAA0BlD,IACxBc,GACAA,EAAgBd,EACpB,EAgGJ,OACIoE,EAACC,EAAiB,CAAAC,SACdF,EAACG,EAAmB,CAChBC,SAAU7C,IAAa1B,EACvBwE,OAAQnC,EACRoC,cArEU,IAEdN,EAACO,GACGxE,UAAWA,EAAS,cACPC,EACbC,GAAIA,EACJuE,IAAKhC,GACLiC,UAAU,EACVC,QAASjB,GACTpC,OAAQqC,GACRtB,QAASA,GACTvC,SAAUA,EACV0B,SAAUA,EACVzB,MAAOA,WAEPkE,EAACW,GACGH,IAAK9B,GACL7C,SAAUA,EACV+E,SAAU1C,EACV2C,UAAWvC,GACXwC,UAAU,UACVvD,SAAUA,EACVD,QAASA,EAAO,kBACCpB,qBACCC,EAAe,eACnBC,EAAW8D,SA5BrCF,EAACe,EAAc,CAAClF,SAAUA,EAAQqE,SAtB7BnC,GAAgC,IAApBA,EAASc,OAWlBmB,EAACgB,EAAU,CACP1D,QAASA,EACT2D,aAAclE,EAAoBmD,SAxC1CtE,GAAWmC,EAASc,SAAWjD,EAAQiD,OAChChB,GAAoB,eAGxBC,GAAsB,GAAGC,EAASc,oBAyBjCmB,EAACkB,EAAgB,CACb5D,QAASA,EACT2D,aAAclE,EAAoBmD,SAEjCvE,UAyFLwF,eArCW,IAEfnB,EAACoB,EAAY,CACTP,UAAWvC,GACX+C,UAAWzF,EACX0F,aAAcvC,GACdwC,UAAWhC,GACX/C,eAAgBA,EAChBC,cAAeA,EACfJ,aAAcA,EACdC,eAAgBA,EAChBC,kBAAmBA,EACnBiF,eACA9D,cAAeA,EACf+D,cAAe1D,EACf2D,YAAa9C,GACb/B,QAASA,EACT8E,eAAgB7E,EAChB8E,mBAAoB7E,EACpBC,eAAgBA,EAChBC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,aAAcA,EACdC,yBAA0BA,EAC1BE,QAASA,EACTuE,MAAOjE,EACPkE,mBAAiB,IAYjBC,OAtJO,KACf5D,IAAe,GACfqB,IAA6B,GAC7BnB,IAAW,EAAK,EAoJR2D,QAjJSC,IACjB9D,IAAe,GACfqB,IAA6B,GAGd,UAAXyC,IACA5D,IAAW,GACXhB,SAAAA,IACJ,EA0IQkE,UAvIU,WACC,QAAnBW,EAAAxD,GAAYkB,eAAO,IAAAsC,GAAAA,EAAEC,QACrBhE,IAAe,GACfqB,IAA6B,EAAM,EAqI3B4C,eAAa,EACbC,OAAQ,EACR7E,UAAWA,EACX8E,oBAAkB,EAClBC,aAAc9E,EACd+E,SAAU7E,KAEE"}

package/input-multi-select/types.d.ts

@@ -1,26 +1,67 @@
 import type { RefObject } from "react";
 import type { InputSelectOptionsProps, InputSelectSharedProps } from "../input-select/types";
-import type { DropdownCustomLabelProps, DropdownDisplayProps, DropdownSearchProps, DropdownVariantType } from "../shared/dropdown-list-v2/types";
+import type { DropdownCustomLabelProps, DropdownDisplayProps, DropdownSearchProps, DropdownVariantType } from "../shared/dropdown-list/types";
 import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
-export interface InputMultiSelectProps<T, V> extends React.HTMLAttributes<HTMLElement>, InputSelectOptionsProps<T>, InputSelectSharedProps<T>, DropdownDisplayProps<T, V>, DropdownSearchProps<T> {
+/**
+ * Props for the `InputMultiSelect` component.
+ *
+ * `T` is the option item type. `V` is the extracted value type used for
+ * equality comparisons when a `valueExtractor` is provided.
+ */
+export interface InputMultiSelectProps<T, V> extends React.HTMLAttributes<HTMLElement>, InputSelectOptionsProps<T>, InputSelectSharedProps<T>, Omit<DropdownDisplayProps<T, V>, "isOptionDisabled">, DropdownSearchProps<T> {
     readOnly?: boolean | undefined;
+    /**
+     * The currently selected options.
+     */
     selectedOptions?: T[] | undefined;
+    /**
+     * Called when the selection changes. Receives the updated array of selected
+     * options after each user interaction.
+     */
     onSelectOptions?: ((options: T[]) => void) | undefined;
+    /**
+     * Called when focus leaves both the trigger and dropdown.
+     */
     onBlur?: (() => void) | undefined;
+    /**
+     * Controls the height of the trigger and dropdown items.
+     *
+     * @default "default"
+     */
     variant?: DropdownVariantType | undefined;
+    /** Aligns the dropdown relative to the trigger element. */
     alignment?: DropdownAlignmentType | undefined;
+    /** CSS `z-index` applied to the dropdown overlay. */
     dropdownZIndex?: number | undefined;
+    /**
+     * Caps the number of options that can be simultaneously selected.
+     */
     maxSelectable?: number | undefined;
+    /**
+     * Overrides the default labels shown inside the dropdown and on the trigger.
+     */
     customLabels?: DropdownCustomLabelProps | undefined;
-    /** Custom width for the dropdown. */
+    /**
+     * Custom width for the dropdown. When specified, the dropdown uses this
+     * width instead of matching the trigger element width.
+     */
     dropdownWidth?: string | undefined;
     /**
-     * The root element that contains the dropdown element. Defaults to the document body.
+     * The root element that contains the dropdown element.
+     *
+     * @remarks Specify this if you need to change the parent of the
+     * dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
+     *
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
      *
-     * If the parent that contains the trigger element has a higher z-index than the dropdown,
-     * the dropdown may not be visible. Specify the parent element here instead
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
 }
-/** To be exposed for Form component inheritance */
+/**
+ * A subset of `InputMultiSelectProps` used by form components that manage
+ * the `error` state themselves.
+ */
 export type InputMultiSelectPartialProps<T, V> = Omit<InputMultiSelectProps<T, V>, "error">;

package/input-nested-multi-select/helpers.d.ts

@@ -1,4 +1,4 @@
-import type { NestedDropdownListItemProps } from "../shared/dropdown-list-v2";
+import type { NestedDropdownListItemProps } from "../shared/dropdown-list";
 export declare const getSelectedItems: <V1, V2, V3>(options: NestedDropdownListItemProps<V1 | V2 | V3>[], keyPaths: string[][]) => SelectedItem<V1 | V2 | V3>[];
 export interface SelectedItem<T> {
     label: string;

package/input-nested-multi-select/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sources":["../../src/input-nested-multi-select/helpers.ts"],"sourcesContent":["import isEmpty from \"lodash/isEmpty\";\n\nimport type { NestedDropdownListItemProps } from \"../shared/dropdown-list-v2\";\n\nconst findSelectedItem = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[] | undefined,\n    keyPath: string[]\n): NestedDropdownListItemProps<V1 | V2 | V3> | undefined => {\n    const [currentKey, ...nextKeyPath] = keyPath;\n\n    if (isEmpty(options) || !currentKey) {\n        return undefined;\n    }\n\n    const item = options!.find((item) => item.key === currentKey);\n\n    if (!item) {\n        return undefined;\n    }\n\n    if (!nextKeyPath.length) {\n        return item;\n    }\n\n    return findSelectedItem(item.subItems, nextKeyPath);\n};\n\nexport const getSelectedItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    keyPaths: string[][]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const selectedItems: SelectedItem<V1 | V2 | V3>[] = [];\n\n    for (let i = 0; i < keyPaths.length; i++) {\n        const keyPath = keyPaths[i];\n        const item = findSelectedItem(options, keyPath);\n\n        if (item) {\n            selectedItems.push({\n                value: item.value,\n                label: item.label,\n                keyPath: keyPath,\n            });\n        }\n    }\n\n    return selectedItems;\n};\n\nexport interface SelectedItem<T> {\n    label: string;\n    keyPath: string[];\n    value: T;\n}\n\nconst findSubItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    parentKeyPath: string[]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const selectedItems: SelectedItem<V1 | V2 | V3>[] = [];\n\n    for (const option of options) {\n        if (option.subItems) {\n            selectedItems.push(\n                ...findSubItems(option.subItems, [...parentKeyPath, option.key])\n            );\n        } else {\n            selectedItems.push({\n                value: option.value,\n                label: option.label,\n                keyPath: [...parentKeyPath, option.key],\n            });\n        }\n    }\n\n    return selectedItems;\n};\n\nexport const getSelectedSubItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    keyPath: string[]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const item = findSelectedItem(options, keyPath);\n\n    if (item && item.subItems) {\n        return findSubItems(item.subItems, keyPath);\n    }\n\n    return [];\n};\n"],"names":["findSelectedItem","options","keyPath","currentKey","nextKeyPath","isEmpty","item","find","key","length","subItems","getSelectedItems","keyPaths","selectedItems","i","push","value","label","findSubItems","parentKeyPath","option","getSelectedSubItems"],"mappings":"6CAIA,MAAMA,EAAmB,CACrBC,EACAC,KAEA,MAAOC,KAAeC,GAAeF,EAErC,GAAIG,EAAQJ,KAAaE,EACrB,OAGJ,MAAMG,EAAOL,EAASM,MAAMD,GAASA,EAAKE,MAAQL,IAElD,OAAKG,EAIAF,EAAYK,OAIVT,EAAiBM,EAAKI,SAAUN,GAH5BE,OALX,CAQmD,EAG1CK,EAAmB,CAC5BV,EACAW,KAEA,MAAMC,EAA8C,GAEpD,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAASH,OAAQK,IAAK,CACtC,MAAMZ,EAAUU,EAASE,GACnBR,EAAON,EAAiBC,EAASC,GAEnCI,GACAO,EAAcE,KAAK,CACfC,MAAOV,EAAKU,MACZC,MAAOX,EAAKW,MACZf,QAASA,GAGrB,CAEA,OAAOW,CAAa,EASlBK,EAAe,CACjBjB,EACAkB,KAEA,MAAMN,EAA8C,GAEpD,IAAK,MAAMO,KAAUnB,EACbmB,EAAOV,SACPG,EAAcE,QACPG,EAAaE,EAAOV,SAAU,IAAIS,EAAeC,EAAOZ,OAG/DK,EAAcE,KAAK,CACfC,MAAOI,EAAOJ,MACdC,MAAOG,EAAOH,MACdf,QAAS,IAAIiB,EAAeC,EAAOZ,OAK/C,OAAOK,CAAa,EAGXQ,EAAsB,CAC/BpB,EACAC,KAEA,MAAMI,EAAON,EAAiBC,EAASC,GAEvC,OAAII,GAAQA,EAAKI,SACNQ,EAAaZ,EAAKI,SAAUR,GAGhC,EAAE"}
+{"version":3,"file":"helpers.js","sources":["../../src/input-nested-multi-select/helpers.ts"],"sourcesContent":["import isEmpty from \"lodash/isEmpty\";\n\nimport type { NestedDropdownListItemProps } from \"../shared/dropdown-list\";\n\nconst findSelectedItem = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[] | undefined,\n    keyPath: string[]\n): NestedDropdownListItemProps<V1 | V2 | V3> | undefined => {\n    const [currentKey, ...nextKeyPath] = keyPath;\n\n    if (isEmpty(options) || !currentKey) {\n        return undefined;\n    }\n\n    const item = options!.find((item) => item.key === currentKey);\n\n    if (!item) {\n        return undefined;\n    }\n\n    if (!nextKeyPath.length) {\n        return item;\n    }\n\n    return findSelectedItem(item.subItems, nextKeyPath);\n};\n\nexport const getSelectedItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    keyPaths: string[][]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const selectedItems: SelectedItem<V1 | V2 | V3>[] = [];\n\n    for (let i = 0; i < keyPaths.length; i++) {\n        const keyPath = keyPaths[i];\n        const item = findSelectedItem(options, keyPath);\n\n        if (item) {\n            selectedItems.push({\n                value: item.value,\n                label: item.label,\n                keyPath: keyPath,\n            });\n        }\n    }\n\n    return selectedItems;\n};\n\nexport interface SelectedItem<T> {\n    label: string;\n    keyPath: string[];\n    value: T;\n}\n\nconst findSubItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    parentKeyPath: string[]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const selectedItems: SelectedItem<V1 | V2 | V3>[] = [];\n\n    for (const option of options) {\n        if (option.subItems) {\n            selectedItems.push(\n                ...findSubItems(option.subItems, [...parentKeyPath, option.key])\n            );\n        } else {\n            selectedItems.push({\n                value: option.value,\n                label: option.label,\n                keyPath: [...parentKeyPath, option.key],\n            });\n        }\n    }\n\n    return selectedItems;\n};\n\nexport const getSelectedSubItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    keyPath: string[]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const item = findSelectedItem(options, keyPath);\n\n    if (item && item.subItems) {\n        return findSubItems(item.subItems, keyPath);\n    }\n\n    return [];\n};\n"],"names":["findSelectedItem","options","keyPath","currentKey","nextKeyPath","isEmpty","item","find","key","length","subItems","getSelectedItems","keyPaths","selectedItems","i","push","value","label","findSubItems","parentKeyPath","option","getSelectedSubItems"],"mappings":"6CAIA,MAAMA,EAAmB,CACrBC,EACAC,KAEA,MAAOC,KAAeC,GAAeF,EAErC,GAAIG,EAAQJ,KAAaE,EACrB,OAGJ,MAAMG,EAAOL,EAASM,MAAMD,GAASA,EAAKE,MAAQL,IAElD,OAAKG,EAIAF,EAAYK,OAIVT,EAAiBM,EAAKI,SAAUN,GAH5BE,OALX,CAQmD,EAG1CK,EAAmB,CAC5BV,EACAW,KAEA,MAAMC,EAA8C,GAEpD,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAASH,OAAQK,IAAK,CACtC,MAAMZ,EAAUU,EAASE,GACnBR,EAAON,EAAiBC,EAASC,GAEnCI,GACAO,EAAcE,KAAK,CACfC,MAAOV,EAAKU,MACZC,MAAOX,EAAKW,MACZf,QAASA,GAGrB,CAEA,OAAOW,CAAa,EASlBK,EAAe,CACjBjB,EACAkB,KAEA,MAAMN,EAA8C,GAEpD,IAAK,MAAMO,KAAUnB,EACbmB,EAAOV,SACPG,EAAcE,QACPG,EAAaE,EAAOV,SAAU,IAAIS,EAAeC,EAAOZ,OAG/DK,EAAcE,KAAK,CACfC,MAAOI,EAAOJ,MACdC,MAAOG,EAAOH,MACdf,QAAS,IAAIiB,EAAeC,EAAOZ,OAK/C,OAAOK,CAAa,EAGXQ,EAAsB,CAC/BpB,EACAC,KAEA,MAAMI,EAAON,EAAiBC,EAASC,GAEvC,OAAII,GAAQA,EAAKI,SACNQ,EAAaZ,EAAKI,SAAUR,GAGhC,EAAE"}

package/input-nested-multi-select/input-nested-multi-select.d.ts

@@ -1,2 +1,11 @@
 import type { InputNestedMultiSelectProps } from "./types";
+/**
+ * A multi-select input that presents options in a nested hierarchy, up to three levels deep.
+ *
+ * Use `InputNestedMultiSelect` when users need to choose multiple values from a
+ * hierarchical option tree. Selecting a parent item automatically selects all its
+ * leaf descendants; deselecting a parent removes all its descendants from the
+ * selection.
+ * @keywords combobox, dropdown, field, form, hierarchical, input, multi-value, multiple, tree
+ */
 export declare const InputNestedMultiSelect: <V1, V2, V3>({ placeholder, options: _options, disabled, error, className, "data-testid": testId, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, selectedKeyPaths: _selectedKeyPaths, mode, valueToStringFunction, enableSearch, searchPlaceholder, hideNoResultsDisplay, noResultsDescription, customLabels, readOnly, onSearch, onSelectOptions, onShowOptions, onHideOptions, onRetry, onBlur, optionsLoadState, optionTruncationType, variant, alignment, dropdownZIndex, dropdownWidth, dropdownRootNode, }: InputNestedMultiSelectProps<V1, V2, V3>) => JSX.Element;

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

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

@@ -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-v2\";\nimport {\n    buildKeyPathToSet,\n    ExpandableElement,\n    NestedDropdownList,\n} from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator, StringHelper } 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] = useState<string>(() => SimpleIdGenerator.generate());\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","SimpleIdGenerator","generate","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","$focused","$disabled","$error","children","ExpandableElement","expanded","listboxId","popupRole","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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"}
+{"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 {\n    InputNestedMultiSelectProps,\n    InputNestedMultiSelectValue,\n    InputNestedMultiSelectValues,\n} from \"./types\";\n\n// @catalog\n/**\n * A multi-select input that presents options in a nested hierarchy, up to three levels deep.\n *\n * Use `InputNestedMultiSelect` when users need to choose multiple values from a\n * hierarchical option tree. Selecting a parent item automatically selects all its\n * leaf descendants; deselecting a parent removes all its descendants from the\n * selection.\n * @keywords combobox, dropdown, field, form, hierarchical, input, multi-value, multiple, tree\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    type NestedValue = InputNestedMultiSelectValue<V1, V2, V3>;\n\n    const { multiSelectedLabel } = customLabels || {};\n    const options = _options as NestedDropdownListItemProps<NestedValue>[];\n    const [selectedKeyPaths, setSelectedKeyPaths] = useState<Set<string>>(\n        _selectedKeyPaths\n            ? buildKeyPathToSet(_selectedKeyPaths)\n            : new Set<string>()\n    );\n    const [selectedItems, setSelectedItems] = useState<\n        SelectedItem<NestedValue>[]\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<NestedValue>[]\n    ) => {\n        const selectedItems: SelectedItem<NestedValue>[] = items.map(\n            (item) => ({\n                keyPath: item.keyPath,\n                label: item.item.label,\n                value: item.item.value,\n            })\n        );\n        setSelectedKeyPaths(buildKeyPathToSet(keyPaths));\n        setSelectedItems(selectedItems);\n        performOnSelectOptions(keyPaths, selectedItems);\n    };\n\n    const handleListItemClick = (\n        listItem: NestedDropdownListLocalItem<NestedValue>\n    ) => {\n        const newSelectedItems: SelectedItem<NestedValue>[] =\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<NestedValue>[]\n    ) => {\n        if (onSelectOptions) {\n            const returnValue: InputNestedMultiSelectValues<V1, V2, V3> =\n                items.map((item) => item.value);\n            onSelectOptions(keyPaths, returnValue);\n        }\n    };\n\n    const getNewSelection = (\n        item: NestedDropdownListLocalItem<NestedValue>\n    ): SelectedItem<NestedValue>[] => {\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-multi-select/types.d.ts

@@ -1,14 +1,44 @@
 import type { InputNestedSelectOptionsProps, InputNestedSelectSharedProps, L1OptionProps } from "../input-nested-select";
-import type { DropdownCustomLabelProps, DropdownSearchProps } from "../shared/dropdown-list-v2/types";
+import type { DropdownCustomLabelProps, DropdownSearchProps } from "../shared/dropdown-list/types";
+/** Value type returned for a selected item at any nesting level. */
+export type InputNestedMultiSelectValue<V1, V2, V3> = V1 | V2 | V3;
+/** Ordered list of selected item values returned by `onSelectOptions`. */
+export type InputNestedMultiSelectValues<V1, V2, V3> = Array<InputNestedMultiSelectValue<V1, V2, V3>>;
+/**
+ * Props for the `InputNestedMultiSelect` component.
+ *
+ * The three type parameters describe the value types at each nesting level.
+ */
 export interface InputNestedMultiSelectProps<V1, V2, V3> extends React.HTMLAttributes<HTMLElement>, InputNestedSelectOptionsProps<V1, V2, V3>, InputNestedSelectSharedProps<V1, V2, V3>, DropdownSearchProps<L1OptionProps<V1, V2, V3>> {
-    /** Specifies key paths to select particular option label */
+    /**
+     * The currently selected options expressed as an array of key paths.
+     * Each key path is an ordered array of `key` strings from the root option
+     * down to the selected item.
+     */
     selectedKeyPaths?: string[][] | undefined;
-    /** Called when a selection is made. Returns the key paths and values of selected items in the next selection state */
-    onSelectOptions?: ((keyPaths: string[][], values: Array<V1 | V2 | V3>) => void) | undefined;
-    /** Custom width for the dropdown. */
+    /**
+     * Called after the selection changes.
+     *
+     * @param keyPaths The key paths of all selected items in the new selection state.
+     * @param values The values of all selected items in the same order as `keyPaths`.
+     */
+    onSelectOptions?: ((keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3>) => void) | undefined;
+    /**
+     * Custom width for the dropdown. When specified, the dropdown uses this
+     * width instead of matching the trigger element width.
+     */
     dropdownWidth?: string | undefined;
+    /**
+     * Called when focus leaves both the trigger and dropdown.
+     */
     onBlur?: (() => void) | undefined;
+    /**
+     * Overrides the default labels shown inside the dropdown and on the trigger.
+     */
     customLabels?: DropdownCustomLabelProps | undefined;
 }
-/** To be exposed for Form component inheritance */
+/**
+ * A subset of `InputNestedMultiSelectProps` used by form components that manage
+ * the `error` state themselves.
+ */
 export type InputNestedMultiSelectPartialProps<V1, V2, V3> = Omit<InputNestedMultiSelectProps<V1, V2, V3>, "error">;

package/input-nested-select/input-nested-select.d.ts

@@ -1,3 +1,11 @@
-import type { InputNestedSelectProps, L1OptionProps, L2OptionProps, L3OptionProps } from "./types";
-export type CombinedOptionProps<V1, V2, V3> = L1OptionProps<V1, V2, V3> | L2OptionProps<V2, V3> | L3OptionProps<V3>;
+import type { InputNestedSelectProps } from "./types";
+/**
+ * A single-select input that presents options in a hierarchy, up to three levels deep.
+ *
+ * Use `InputNestedSelect` when users need to choose a value from a
+ * hierarchical option tree. The dropdown renders as an expandable tree.
+ * Parent nodes collapse or expand their children, and only one leaf or category
+ * value can be selected at a time.
+ * @keywords combobox, dropdown, field, form, hierarchical, input, tree
+ */
 export declare const InputNestedSelect: <V1, V2, V3>({ placeholder, options: _options, disabled, error, className, "data-testid": testId, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, selectedKeyPath: _selectedKeyPath, mode, valueToStringFunction, enableSearch, searchPlaceholder, selectableCategory, hideNoResultsDisplay, noResultsDescription, customLabels, readOnly, onBlur, onSearch, onSelectOption, onShowOptions, onHideOptions, onRetry, optionsLoadState, optionTruncationType, variant, alignment, dropdownZIndex, dropdownWidth, dropdownRootNode, }: InputNestedSelectProps<V1, V2, V3>) => JSX.Element;

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

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

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

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