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

package/select-histogram/select-histogram.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as o}from"react/jsx-runtime";import{useState as t,useRef as i,useEffect as a}from"react";import{HistogramSlider as n}from"../histogram-slider/histogram-slider.js";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 s}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as l}from"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as d}from"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as p}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputBox as m}from"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_1qveyb9.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";import{labelContainer as c}from"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{Typography as h}from"../typography/index.js";import{HistogramSliderDropdownContainer as u,PlaceholderLabel as g,Label as f,Separator as b}from"./select-histogram.styles.js";const j=j=>{var{alignment:w="left",className:y,disabled:x,dropdownZIndex:v,error:_,histogramSlider:T,id:C,"aria-labelledby":A,"aria-describedby":k,"aria-invalid":L,onBlur:I,onChange:O,onChangeEnd:q,optionTruncationType:B="end",placeholder:N="Select",rangeLabelPrefix:P,rangeLabelSuffix:R,readOnly:S,renderRangeLabel:E,value:G,dropdownRootNode:H}=j,M=e(j,["alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","aria-labelledby","aria-describedby","aria-invalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode"]);const{interval:F,bins:V=[],renderEmptyView:Z,ariaLabels:D}=T,$=V.map((e=>e.minValue)),W=Math.min(...$),[z,J]=t(le()),[K,Q]=t(!1),[U,X]=t(!1),Y=s(),ee=i(null),re=i(null),oe=i(null),te=M["data-testid"]||"select-histogram";a((()=>{G!==z&&J(le())}),[G]);const ie=e=>{J(e),null==O||O(e)},ae=e=>{J(e),null==q||q(e)},ne=()=>{U||K||X(!0)},se=e=>{U&&!K&&ee.current&&!ee.current.contains(e.relatedTarget)&&(X(!1),null==I||I())};function le(){return null!=G?G:[W,W+F]}const de=e=>E?E(e):o(h.BodyBL,{children:[P,e,R]});return r(l,{children:r(p,{enabled:!S&&!x,isOpen:K,renderElement:()=>r(m,{className:y,"data-testid":te,id:C,ref:ee,tabIndex:-1,onFocus:ne,onBlur:se,focused:U,disabled:x,readOnly:S,error:_,children:r(d,{ref:re,disabled:x,expanded:K,listboxId:Y,popupRole:"dialog",readOnly:S,variant:"default","aria-labelledby":A,"aria-describedby":k,"aria-invalid":L,children:r("div",{className:c,ref:oe,"data-disabled":x||void 0,children:$&&0!==$.length?o(f,{children:[de(z[0]),r(b,{children:"-"}),de(z[1])]}):r(g,{$truncateType:B,$variant:"default",children:N})})})}),renderDropdown:({elementWidth:e,styles:o,setFloatingRef:t,getFloatingProps:i})=>r(u,Object.assign({style:Object.assign(Object.assign({},o),{width:e}),ref:t},i(),{children:r(n,{interval:F,value:z,bins:V,onChange:ie,onChangeEnd:ae,showRangeLabels:!1,renderEmptyView:Z,ariaLabels:D})})),onOpen:()=>{Q(!0)},onClose:()=>{Q(!1)},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),Q(!1)},clickToToggle:!0,offset:8,alignment:w,fitAvailableHeight:!0,customZIndex:v,rootNode:H})})};export{j as SelectHistogram};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as o}from"react/jsx-runtime";import i from"clsx";import{useState as t,useRef as a,useEffect as s}from"react";import{HistogramSlider as n}from"../histogram-slider/histogram-slider.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as l}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_mloii0.css";import"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as d}from"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as p}from"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as m}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputBox as c}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 h}from"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{Typography as u}from"../typography/index.js";import{histogramSliderDropdownContainer as g,placeholderLabel as f,placeholderLabelTruncateEnd as b,label as j,separator as w}from"./select-histogram.styles.js";const y=y=>{var{alignment:x="left",className:v,disabled:_,dropdownZIndex:T,error:C,histogramSlider:k,id:A,"aria-labelledby":N,"aria-describedby":L,"aria-invalid":I,onBlur:O,onChange:q,onChangeEnd:B,optionTruncationType:P="end",placeholder:R="Select",rangeLabelPrefix:S,rangeLabelSuffix:E,readOnly:G,renderRangeLabel:H,value:M,dropdownRootNode:F}=y,V=e(y,["alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","aria-labelledby","aria-describedby","aria-invalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode"]);const{interval:Z,bins:D=[],renderEmptyView:W,ariaLabels:$}=k,z=D.map((e=>e.minValue)),J=Math.min(...z),[K,Q]=t(pe()),[U,X]=t(!1),[Y,ee]=t(!1),re=l(),oe=a(null),ie=a(null),te=a(null),ae=V["data-testid"]||"select-histogram";s((()=>{M!==K&&Q(pe())}),[M]);const se=e=>{Q(e),null==q||q(e)},ne=e=>{Q(e),null==B||B(e)},le=()=>{Y||U||ee(!0)},de=e=>{Y&&!U&&oe.current&&!oe.current.contains(e.relatedTarget)&&(ee(!1),null==O||O())};function pe(){return null!=M?M:[J,J+Z]}const me=e=>H?H(e):o(u.BodyBL,{children:[S,e,E]});return r(d,{children:r(m,{enabled:!G&&!_,isOpen:U,renderElement:()=>r(c,{className:v,"data-testid":ae,id:A,ref:oe,tabIndex:-1,onFocus:le,onBlur:de,focused:Y,disabled:_,readOnly:G,error:C,children:r(p,{ref:ie,disabled:_,expanded:U,listboxId:re,popupRole:"dialog",readOnly:G,variant:"default","aria-labelledby":N,"aria-describedby":L,"aria-invalid":I,children:r("div",{className:h,ref:te,"data-disabled":_||void 0,children:z&&0!==z.length?o("div",{className:j,children:[me(K[0]),r("div",{className:w,children:"-"}),me(K[1])]}):r("div",{className:i(f,"middle"!==P&&b),children:R})})})}),renderDropdown:({elementWidth:e,styles:o,setFloatingRef:i,getFloatingProps:t})=>r("div",Object.assign({className:g,style:Object.assign(Object.assign({},o),{width:e}),ref:i,"data-testid":`${ae}-dropdown`},t(),{children:r(n,{interval:Z,value:K,bins:D,onChange:se,onChangeEnd:ne,showRangeLabels:!1,renderEmptyView:W,ariaLabels:$})})),onOpen:()=>{X(!0)},onClose:()=>{X(!1)},onDismiss:()=>{var e;null===(e=ie.current)||void 0===e||e.focus(),X(!1)},clickToToggle:!0,offset:8,alignment:x,fitAvailableHeight:!0,customZIndex:T,rootNode:F})})};export{y as SelectHistogram};
 //# sourceMappingURL=select-histogram.js.map

package/select-histogram/select-histogram.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-histogram.js","sources":["../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport { DropdownListState, ExpandableElement } from \"../shared/dropdown-list\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport * as dropdownWrapperStyles from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport {\n    HistogramSliderDropdownContainer,\n    Label,\n    PlaceholderLabel,\n    Separator,\n} from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\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    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\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    // HELPER FUNCTIONS\n    // =============================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <PlaceholderLabel\n                $truncateType={optionTruncationType}\n                $variant=\"default\"\n            >\n                {placeholder}\n            </PlaceholderLabel>\n        ) : (\n            <Label>\n                {renderSelector(selection[0])}\n                <Separator>-</Separator>\n                {renderSelector(selection[1])}\n            </Label>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <div\n            className={dropdownWrapperStyles.labelContainer}\n            ref={labelContainerRef}\n            data-disabled={disabled || undefined}\n        >\n            {getDisplayValue()}\n        </div>\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=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\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        elementWidth,\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <HistogramSliderDropdownContainer\n            style={{ ...styles, width: elementWidth }}\n            ref={setFloatingRef}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </HistogramSliderDropdownContainer>\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":["SelectHistogram","_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","variant","dropdownWrapperStyles.labelContainer","undefined","length","Label","Separator","PlaceholderLabel","$truncateType","$variant","renderDropdown","elementWidth","styles","setFloatingRef","getFloatingProps","HistogramSliderDropdownContainer","Object","assign","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"select-histogram.js","sources":["../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport { DropdownListState, ExpandableElement } from \"../shared/dropdown-list\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport * as dropdownWrapperStyles from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\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    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\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    // HELPER FUNCTIONS\n    // =============================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <div\n                className={clsx(\n                    styles.placeholderLabel,\n                    optionTruncationType !== \"middle\" &&\n                        styles.placeholderLabelTruncateEnd\n                )}\n            >\n                {placeholder}\n            </div>\n        ) : (\n            <div className={styles.label}>\n                {renderSelector(selection[0])}\n                <div className={styles.separator}>-</div>\n                {renderSelector(selection[1])}\n            </div>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <div\n            className={dropdownWrapperStyles.labelContainer}\n            ref={labelContainerRef}\n            data-disabled={disabled || undefined}\n        >\n            {getDisplayValue()}\n        </div>\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=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\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        elementWidth,\n        styles: floatingStyles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            className={styles.histogramSliderDropdownContainer}\n            style={{ ...floatingStyles, width: elementWidth }}\n            ref={setFloatingRef}\n            data-testid={`${testId}-dropdown`}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </div>\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":["SelectHistogram","_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","variant","dropdownWrapperStyles.labelContainer","undefined","length","styles.label","styles.separator","clsx","styles.placeholderLabel","styles.placeholderLabelTruncateEnd","renderDropdown","elementWidth","styles","floatingStyles","setFloatingRef","getFloatingProps","Object","assign","styles.histogramSliderDropdownContainer","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/select-histogram/select-histogram.styles.d.ts

@@ -1,21 +1,5 @@
-import type { DropdownVariantType, TruncateType } from "../shared/dropdown-list/types";
-interface ValueLabelStyleProps {
-    $truncateType?: TruncateType;
-    $variant?: DropdownVariantType;
-}
-export declare const HistogramSliderDropdownContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ValueLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never>>> & string;
-export declare const PlaceholderLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>>> & string;
-export {};
+export declare const histogramSliderDropdownContainer: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;
+export declare const separator: import("@linaria/core").LinariaClassName;
+export declare const placeholderLabel: import("@linaria/core").LinariaClassName;
+export declare const placeholderLabelTruncateEnd: import("@linaria/core").LinariaClassName;

package/select-histogram/select-histogram.styles.js

@@ -1,38 +1,2 @@
-import i,{css as e}from"styled-components";import{lineClampCss as d}from"../shared/styles/index.js";import{V3_Border as r,V3_Colour as t,V3_Radius as a,V3_Spacing as o,V3_MediaQuery as s,V3_Breakpoint as n,V3_Font as l}from"../v3_theme/index.js";const m=i.div`
-    overflow: hidden;
-    border: ${r["width-010"]} ${r.solid}
-        ${t.border};
-    border-radius: ${a.sm};
-    background: ${t.bg};
-    padding: ${o["spacing-16"]};
-    min-width: 23rem;
-
-    ${s.MaxWidth.sm} {
-        min-width: unset;
-        width: calc(100vw - ${n["sm-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.xs} {
-        width: calc(100vw - ${n["xs-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.xxs} {
-        width: calc(100vw - ${n["xxs-margin"]}px * 2);
-    }
-`,x=i.div`
-    display: flex;
-    align-items: baseline;
-`,$=i.div`
-    margin: 0 0.5rem;
-    color: ${t.text};
-`,c=i.div`
-    ${i=>"small"===i.$variant?l["body-md-regular"]:l["body-baseline-regular"]}
-    text-align: left;
-    ${i=>{if("middle"!==i.$truncateType)return e`
-                    ${d(1)}
-                `}}
-    overflow: hidden;
-`,h=i(c)`
-    color: ${t["text-subtler"]};
-`;export{m as HistogramSliderDropdownContainer,x as Label,h as PlaceholderLabel,$ as Separator,c as ValueLabel};
+import"./select-histogram.styles_n260dy.css";const s="h1snxaxy",t="l1e4uw6e",e="s134rtp9",o="p11079xa",p="p1bydnw6";export{s as histogramSliderDropdownContainer,t as label,o as placeholderLabel,p as placeholderLabelTruncateEnd,e as separator};
 //# sourceMappingURL=select-histogram.styles.js.map

package/select-histogram/select-histogram.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-histogram.styles.js","sources":["../../src/select-histogram/select-histogram.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport type {\n    DropdownVariantType,\n    TruncateType,\n} from \"../shared/dropdown-list/types\";\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    V3_Border,\n    V3_Breakpoint,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\ninterface ValueLabelStyleProps {\n    $truncateType?: TruncateType;\n    $variant?: DropdownVariantType;\n}\n\nexport const HistogramSliderDropdownContainer = styled.div`\n    overflow: hidden;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    background: ${V3_Colour[\"bg\"]};\n    padding: ${V3_Spacing[\"spacing-16\"]};\n    min-width: 23rem;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        min-width: unset;\n        width: calc(100vw - ${V3_Breakpoint[\"sm-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.xs} {\n        width: calc(100vw - ${V3_Breakpoint[\"xs-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        width: calc(100vw - ${V3_Breakpoint[\"xxs-margin\"]}px * 2);\n    }\n`;\n\nexport const Label = styled.div`\n    display: flex;\n    align-items: baseline;\n`;\n\nexport const Separator = styled.div`\n    margin: 0 0.5rem;\n    color: ${V3_Colour[\"text\"]};\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n    ${(props) =>\n        props.$variant === \"small\"\n            ? V3_Font[\"body-md-regular\"]\n            : V3_Font[\"body-baseline-regular\"]}\n    text-align: left;\n    ${(props) => {\n        switch (props.$truncateType) {\n            case \"middle\":\n                break;\n            case \"end\":\n            default:\n                return css`\n                    ${lineClampCss(1)}\n                `;\n        }\n    }}\n    overflow: hidden;\n`;\n\nexport const PlaceholderLabel = styled(ValueLabel)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n"],"names":["HistogramSliderDropdownContainer","styled","div","V3_Border","V3_Colour","V3_Radius","V3_Spacing","V3_MediaQuery","MaxWidth","sm","V3_Breakpoint","xs","xxs","Label","Separator","ValueLabel","props","$variant","V3_Font","$truncateType","css","lineClampCss","PlaceholderLabel"],"mappings":"sPAsBO,MAAMA,EAAmCC,EAAOC,GAAG;;cAE5CC,EAAU,gBAAgBA,EAAiB;UAC/CC,EAAkB;qBACPC,EAAc;kBACjBD,EAAc;eACjBE,EAAW;;;MAGpBC,EAAcC,SAASC;;8BAECC,EAAc;;;MAGtCH,EAAcC,SAASG;8BACCD,EAAc;;;MAGtCH,EAAcC,SAASI;8BACCF,EAAc;;EAI/BG,EAAQZ,EAAOC,GAAG;;;EAKlBY,EAAYb,EAAOC,GAAG;;aAEtBE,EAAgB;EAGhBW,EAAad,EAAOC,GAAyB;MACnDc,GACoB,UAAnBA,EAAMC,SACAC,EAAQ,mBACRA,EAAQ;;MAEfF,IACC,GACS,WADDA,EAAMG,cAKN,OAAOC,CAAG;sBACJC,EAAa;;;EAOtBC,EAAmBrB,EAAOc,EAAW;aACrCX,EAAU;"}
+{"version":3,"file":"select-histogram.styles.js","sources":["../../src/select-histogram/select-histogram.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../theme\";\n\nexport const histogramSliderDropdownContainer = css`\n    overflow: hidden;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n    padding: ${Spacing[\"spacing-16\"]};\n    min-width: 23rem;\n\n    ${MediaQuery.MaxWidth.sm} {\n        min-width: unset;\n        width: calc(100vw - ${Breakpoint[\"sm-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        width: calc(100vw - ${Breakpoint[\"xs-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        width: calc(100vw - ${Breakpoint[\"xxs-margin\"]} * 2);\n    }\n`;\n\nexport const label = css`\n    display: flex;\n    align-items: baseline;\n`;\n\nexport const separator = css`\n    margin: 0 0.5rem;\n    color: ${Colour[\"text\"]};\n`;\n\nexport const placeholderLabel = css`\n    ${Font[\"body-baseline-regular\"]}\n    text-align: left;\n    overflow: hidden;\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const placeholderLabelTruncateEnd = css`\n    ${lineClampCss(1)}\n`;\n"],"names":["histogramSliderDropdownContainer","label","separator","placeholderLabel","placeholderLabelTruncateEnd"],"mappings":"6EAaO,MAAMA,EAAgC,WAsBhCC,EAAK,WAKLC,EAAS,WAKTC,EAAgB,WAOhBC,EAA2B"}

package/select-histogram/select-histogram.styles_n260dy.css

@@ -0,0 +1,5 @@
+.h1snxaxy{overflow:hidden;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);padding:var(--fds-spacing-16);min-width:23rem;}:where(body.fds-breakpoint-sm-max) .h1snxaxy{min-width:unset;width:calc(100vw - var(--fds-breakpoint-margin-sm) * 2);}:where(body.fds-breakpoint-xs-max) .h1snxaxy{width:calc(100vw - var(--fds-breakpoint-margin-xs) * 2);}:where(body.fds-breakpoint-xxs-max) .h1snxaxy{width:calc(100vw - var(--fds-breakpoint-margin-xxs) * 2);}
+.l1e4uw6e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;}
+.s134rtp9{margin:0 0.5rem;color:var(--fds-colour-text);}
+.p11079xa{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);text-align:left;overflow:hidden;color:var(--fds-colour-text-subtler);}
+.p1bydnw6{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}

package/shared/component-loading-spinner/component-loading-spinner.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as i,jsx as r}from"react/jsx-runtime";import s from"clsx";import{useRef as o}from"react";import{useApplyStyle as t}from"../../theme/utils/use-apply-styles.js";import"../../theme/theme-provider/context.js";import{outerRing as m,innerRing as n,innerRing2 as a,innerRing3 as l,innerRing4 as c,tokens as d}from"./component-loading-spinner.styles.js";const p=p=>{var{color:v,className:f,size:u}=p,N=e(p,["color","className","size"]);const j=o(null);return t(j,{[d.rootSize]:u?`${u}px`:void 0,[d.rootColour]:v}),i("div",Object.assign({ref:j,className:s(m,f)},N,{"data-testid":"component-loading-spinner",children:[r("div",{id:"inner1",className:n}),r("div",{id:"inner2",className:s(n,a)}),r("div",{id:"inner3",className:s(n,l)}),r("div",{id:"inner4",className:s(n,c)})]}))};export{p as ComponentLoadingSpinner};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as i,jsx as s}from"react/jsx-runtime";import r from"clsx";import{useRef as o}from"react";import{useApplyStyle as t}from"../../theme/utils/use-apply-styles.js";import"../../theme/theme-provider/context.js";import"../../theme/utils/use-media-query.js";import{outerRing as m,innerRing as n,innerRing2 as a,innerRing3 as l,innerRing4 as c,tokens as d}from"./component-loading-spinner.styles.js";const p=p=>{var{color:u,className:v,size:f}=p,j=e(p,["color","className","size"]);const N=o(null);return t(N,{[d.rootSize]:f?`${f}px`:void 0,[d.rootColour]:u}),i("div",Object.assign({ref:N,className:r(m,v)},j,{"data-testid":"component-loading-spinner",children:[s("div",{id:"inner1",className:n}),s("div",{id:"inner2",className:r(n,a)}),s("div",{id:"inner3",className:r(n,l)}),s("div",{id:"inner4",className:r(n,c)})]}))};export{p as ComponentLoadingSpinner};
 //# sourceMappingURL=component-loading-spinner.js.map

package/shared/component-loading-spinner/component-loading-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-loading-spinner.js","sources":["../../../src/shared/component-loading-spinner/component-loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { HTMLAttributes } from \"react\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme/utils\";\nimport * as styles from \"./component-loading-spinner.styles\";\n\ntype BaseProps = Omit<HTMLAttributes<HTMLDivElement>, \"color\">;\n\nexport interface ComponentLoadingSpinnerProps extends BaseProps {\n    /** Measurement in px */\n    size?: number | undefined;\n    /** rgb/hex value or Color token */\n    color?: string | undefined;\n}\n\n/**\n * This component is mainly used within components and is not to be confused\n * with the main loading spinner in animations/loading-spinner\n *\n * By default it inherits the font size and color of the parent container.\n *\n * The font size and color can be customised via the prop or through css.\n *\n * Example:\n * ```\n * const spinner = css`\n *   color: red;\n *   font-size: 1lh;\n * `\n *\n * <ComponentLoadingSpinner className={styles.spinner} />\n * ```\n */\nexport const ComponentLoadingSpinner = ({\n    color,\n    className,\n    size,\n    ...otherProps\n}: ComponentLoadingSpinnerProps): JSX.Element => {\n    const spinnerRef = useRef<HTMLDivElement>(null);\n    useApplyStyle(spinnerRef, {\n        [styles.tokens.rootSize]: size ? `${size}px` : undefined,\n        [styles.tokens.rootColour]: color,\n    });\n\n    return (\n        <div\n            ref={spinnerRef}\n            className={clsx(styles.outerRing, className)}\n            {...otherProps}\n            data-testid={\"component-loading-spinner\"}\n        >\n            <div id=\"inner1\" className={styles.innerRing} />\n            <div\n                id=\"inner2\"\n                className={clsx(styles.innerRing, styles.innerRing2)}\n            />\n            <div\n                id=\"inner3\"\n                className={clsx(styles.innerRing, styles.innerRing3)}\n            />\n            <div\n                id=\"inner4\"\n                className={clsx(styles.innerRing, styles.innerRing4)}\n            />\n        </div>\n    );\n};\n"],"names":["ComponentLoadingSpinner","_a","color","className","size","otherProps","__rest","spinnerRef","useRef","useApplyStyle","styles.tokens","rootSize","undefined","rootColour","_jsxs","Object","assign","ref","clsx","styles.outerRing","children","_jsx","id","styles.innerRing","styles.innerRing2","styles.innerRing3","styles.innerRing4"],"mappings":"wZAkCO,MAAMA,EAA2BC,QAAAC,MACpCA,EAAKC,UACLA,EAASC,KACTA,KACGC,EAAUC,EAAAL,EAJuB,CAAA,QAAA,YAAA,SAMpC,MAAMM,EAAaC,EAAuB,MAM1C,OALAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,UAAWP,EAAO,GAAGA,WAAWQ,EAC/C,CAACF,EAAcG,YAAaX,IAI5BY,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKV,EACLJ,UAAWe,EAAKC,EAAkBhB,IAC9BE,iBACS,4BAA2Be,SAAA,CAExCC,SAAKC,GAAG,SAASnB,UAAWoB,IAC5BF,SACIC,GAAG,SACHnB,UAAWe,EAAKK,EAAkBC,KAEtCH,EAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAKK,EAAkBE,KAEtCJ,EAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAKK,EAAkBG,QAEpC"}
+{"version":3,"file":"component-loading-spinner.js","sources":["../../../src/shared/component-loading-spinner/component-loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { HTMLAttributes } from \"react\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme/utils\";\nimport * as styles from \"./component-loading-spinner.styles\";\n\ntype BaseProps = Omit<HTMLAttributes<HTMLDivElement>, \"color\">;\n\nexport interface ComponentLoadingSpinnerProps extends BaseProps {\n    /** Measurement in px */\n    size?: number | undefined;\n    /** rgb/hex value or Color token */\n    color?: string | undefined;\n}\n\n/**\n * This component is mainly used within components and is not to be confused\n * with the main loading spinner in animations/loading-spinner\n *\n * By default it inherits the font size and color of the parent container.\n *\n * The font size and color can be customised via the prop or through css.\n *\n * Example:\n * ```\n * const spinner = css`\n *   color: red;\n *   font-size: 1lh;\n * `\n *\n * <ComponentLoadingSpinner className={styles.spinner} />\n * ```\n */\nexport const ComponentLoadingSpinner = ({\n    color,\n    className,\n    size,\n    ...otherProps\n}: ComponentLoadingSpinnerProps): JSX.Element => {\n    const spinnerRef = useRef<HTMLDivElement>(null);\n    useApplyStyle(spinnerRef, {\n        [styles.tokens.rootSize]: size ? `${size}px` : undefined,\n        [styles.tokens.rootColour]: color,\n    });\n\n    return (\n        <div\n            ref={spinnerRef}\n            className={clsx(styles.outerRing, className)}\n            {...otherProps}\n            data-testid={\"component-loading-spinner\"}\n        >\n            <div id=\"inner1\" className={styles.innerRing} />\n            <div\n                id=\"inner2\"\n                className={clsx(styles.innerRing, styles.innerRing2)}\n            />\n            <div\n                id=\"inner3\"\n                className={clsx(styles.innerRing, styles.innerRing3)}\n            />\n            <div\n                id=\"inner4\"\n                className={clsx(styles.innerRing, styles.innerRing4)}\n            />\n        </div>\n    );\n};\n"],"names":["ComponentLoadingSpinner","_a","color","className","size","otherProps","__rest","spinnerRef","useRef","useApplyStyle","styles.tokens","rootSize","undefined","rootColour","_jsxs","Object","assign","ref","clsx","styles.outerRing","children","_jsx","id","styles.innerRing","styles.innerRing2","styles.innerRing3","styles.innerRing4"],"mappings":"qcAkCO,MAAMA,EAA2BC,QAAAC,MACpCA,EAAKC,UACLA,EAASC,KACTA,KACGC,EAAUC,EAAAL,EAJuB,CAAA,QAAA,YAAA,SAMpC,MAAMM,EAAaC,EAAuB,MAM1C,OALAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,UAAWP,EAAO,GAAGA,WAAWQ,EAC/C,CAACF,EAAcG,YAAaX,IAI5BY,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKV,EACLJ,UAAWe,EAAKC,EAAkBhB,IAC9BE,iBACS,4BAA2Be,SAAA,CAExCC,SAAKC,GAAG,SAASnB,UAAWoB,IAC5BF,SACIC,GAAG,SACHnB,UAAWe,EAAKK,EAAkBC,KAEtCH,EAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAKK,EAAkBE,KAEtCJ,EAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAKK,EAAkBG,QAEpC"}

package/shared/dropdown-list/dropdown-label.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import t from"clsx";import{useRef as l,useCallback as n,useMemo as s}from"react";import{useResizeDetector as m}from"../../external/react-resize-detector/build/index.esm.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import{Font as a}from"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as d}from"../../theme/utils/use-apply-styles.js";import{StringHelper as o}from"../../util/string-helper.js";import{tokens as c,primaryText as p,primaryTextBold as h,primaryTextDisabled as f,primaryTextSelected as u,primaryTextLabelInline as x,primaryTextTruncateEnd as b,secondaryText as y,secondaryTextLabelInline as j,secondaryTextTruncateEnd as v,secondaryTextNextLine as N,secondaryTextInline as T,label as g,labelVariantSmall as L,labelNextLine as S,baseTruncateStyle as k,truncateFirstLine as w,truncateLineSingle as z,truncateSecondLine as C,matchedText as $}from"./dropdown-label.styles.js";const q=({bold:q,displayType:O="inline",label:W,searchTerm:A,maxLines:B=2,selected:D,disabled:E,sublabel:F,truncationType:G="middle",variant:H="default"})=>{const I="small"===H?a.Spec["body-size-md"]:a.Spec["body-size-baseline"],J=a.Spec["font-family"],{ref:K,width:M}=m(),P=l(null),Q=l(null);d(P,{[c.primaryText.maxLines]:String(B)}),d(Q,{[c.secondaryText.maxLines]:String(B)});const R=n((e=>{if("inline"!==O||!M)return!1;return o.getTextWidth(e,`${I} '${J}'`)>M-50}),[M,O,I,J]),U=s((()=>R(W)),[R,W]),V=s((()=>F&&R(F)),[R,F]),X="middle"===G&&(U||V)?"next-line":O,Y=t=>{if(!A)return t;const l=A.toLowerCase().trim(),n=t.toLowerCase().indexOf(l),s=n+A.length;return-1===n?t:e(r,{children:[W.slice(0,n),i("span",{className:$,children:W.slice(n,s)}),W.slice(s)]})},Z=l=>e(r,{children:[i("div",{className:t(k,w,1===B&&z),"aria-hidden":!0,children:Y(l)}),i("div",{className:t(k,C,1===B&&z),"aria-hidden":!0,children:Y(l)})]});return e("div",{ref:K,className:t(g,"small"===H&&L,"next-line"===X&&S),children:[i("div",{ref:P,"aria-label":W,className:t(p,q&&h,E&&f,!E&&D&&u,"inline"===X&&x,"end"===G&&b),children:"middle"===G&&U?Z(W):Y(W)}),F&&i("div",{ref:Q,"aria-label":F,className:t(y,"inline"===X&&j,"end"===G&&v,"next-line"===O?N:T),children:"middle"===G&&V?Z(F):F})]})};export{q as DropdownLabel};
+import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import t from"clsx";import{useRef as l,useCallback as s,useMemo as n}from"react";import{useResizeDetector as m}from"../../external/react-resize-detector/build/index.esm.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import{Font as d}from"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as o}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{StringHelper as a}from"../../util/string-helper.js";import{tokens as c,primaryText as p,primaryTextBold as h,primaryTextDisabled as u,primaryTextSelected as f,primaryTextLabelInline as x,primaryTextTruncateEnd as b,secondaryText as y,secondaryTextLabelInline as j,secondaryTextTruncateEnd as v,secondaryTextNextLine as N,secondaryTextInline as T,label as g,labelVariantSmall as L,labelNextLine as S,baseTruncateStyle as k,truncateFirstLine as w,truncateLineSingle as z,truncateSecondLine as q,matchedText as C}from"./dropdown-label.styles.js";const $=({bold:$,displayType:O="inline",label:W,searchTerm:A,maxLines:B=2,selected:D,disabled:E,sublabel:F,truncationType:G="middle",variant:H="default"})=>{const I="small"===H?d.Spec["body-size-md"]:d.Spec["body-size-baseline"],J=d.Spec["font-family-body"],{ref:K,width:M}=m(),P=l(null),Q=l(null);o(P,{[c.primaryText.maxLines]:String(B)}),o(Q,{[c.secondaryText.maxLines]:String(B)});const R=s((e=>{if("inline"!==O||!M)return!1;return a.getTextWidth(e,`${I} '${J}'`)>M-50}),[M,O,I,J]),U=n((()=>R(W)),[R,W]),V=n((()=>F&&R(F)),[R,F]),X="middle"===G&&(U||V)?"next-line":O,Y=t=>{if(!A)return t;const l=A.toLowerCase().trim(),s=t.toLowerCase().indexOf(l),n=s+A.length;return-1===s?t:e(r,{children:[W.slice(0,s),i("span",{className:C,children:W.slice(s,n)}),W.slice(n)]})},Z=l=>e(r,{children:[i("div",{className:t(k,w,1===B&&z),"aria-hidden":!0,children:Y(l)}),i("div",{className:t(k,q,1===B&&z),"aria-hidden":!0,children:Y(l)})]});return e("div",{ref:K,className:t(g,"small"===H&&L,"next-line"===X&&S),children:[i("div",{ref:P,"aria-label":W,className:t(p,$&&h,E&&u,!E&&D&&f,"inline"===X&&x,"end"===G&&b),children:"middle"===G&&U?Z(W):Y(W)}),F&&i("div",{ref:Q,"aria-label":F,className:t(y,"inline"===X&&j,"end"===G&&v,"next-line"===O?N:T),children:"middle"===G&&V?Z(F):F})]})};export{$ as DropdownLabel};
 //# sourceMappingURL=dropdown-label.js.map

package/shared/dropdown-list/dropdown-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-label.js","sources":["../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Font } from \"../../theme\";\nimport { useApplyStyle } from \"../../theme/utils/use-apply-styles\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport * as styles from \"./dropdown-label.styles\";\nimport type { DropdownVariantType, LabelDisplayType } from \"./types\";\n\ninterface DropdownLabelProps {\n    bold?: boolean | undefined;\n    displayType?: LabelDisplayType | undefined;\n    label: string;\n    maxLines?: number | undefined;\n    searchTerm?: string | undefined;\n    selected?: boolean | undefined;\n    disabled?: boolean | undefined;\n    sublabel?: string | undefined;\n    truncationType?: \"middle\" | \"end\" | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const DropdownLabel = ({\n    bold,\n    displayType = \"inline\",\n    label,\n    searchTerm,\n    maxLines = 2,\n    selected,\n    disabled,\n    sublabel,\n    truncationType = \"middle\",\n    variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]\n            : Font.Spec[\"body-size-baseline\"];\n    const fontFamily = Font.Spec[\"font-family\"];\n    const { ref, width } = useResizeDetector();\n\n    const primaryTextRef = useRef<HTMLDivElement>(null);\n    const secondaryTextRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(primaryTextRef, {\n        [styles.tokens.primaryText.maxLines]: String(maxLines),\n    });\n\n    useApplyStyle(secondaryTextRef, {\n        [styles.tokens.secondaryText.maxLines]: String(maxLines),\n    });\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const hasExceededContainer = useCallback(\n        (displayText: string) => {\n            if (displayType !== \"inline\" || !width) {\n                return false;\n            }\n\n            // best-effort attempt to check if multi-line text will overflow,\n            // rendering an actual element in the DOM might be more accurate\n            // but might not be performant for large lists\n            const textWidth = StringHelper.getTextWidth(\n                displayText,\n                `${fontSize} '${fontFamily}'`\n            );\n\n            // there's less space than expected due to word breaks, so an\n            // arbitary offset is applied\n            return textWidth > width - 50;\n        },\n        [width, displayType, fontSize, fontFamily]\n    );\n\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const shouldTruncateTitle = useMemo(\n        () => hasExceededContainer(label),\n        [hasExceededContainer, label]\n    );\n    const shouldTruncateLabel = useMemo(\n        () => sublabel && hasExceededContainer(sublabel),\n        [hasExceededContainer, sublabel]\n    );\n\n    // css cannot truncate inline elements so force the display to render\n    // them separately\n    const itemDisplayType =\n        truncationType === \"middle\" &&\n        (shouldTruncateTitle || shouldTruncateLabel)\n            ? \"next-line\"\n            : displayType;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMatchInBold = (displayText: string) => {\n        if (!searchTerm) {\n            return displayText;\n        }\n\n        const match = searchTerm.toLowerCase().trim();\n        const startIndex = displayText.toLowerCase().indexOf(match);\n        const endIndex = startIndex + searchTerm.length;\n\n        if (startIndex === -1) {\n            return displayText;\n        }\n\n        return (\n            <>\n                {label.slice(0, startIndex)}\n                <span className={styles.matchedText}>\n                    {label.slice(startIndex, endIndex)}\n                </span>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateFirstLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateSecondLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                styles.label,\n                variant === \"small\" && styles.labelVariantSmall,\n                itemDisplayType === \"next-line\" && styles.labelNextLine\n            )}\n        >\n            <div\n                ref={primaryTextRef}\n                aria-label={label}\n                className={clsx(\n                    styles.primaryText,\n                    bold && styles.primaryTextBold,\n                    disabled && styles.primaryTextDisabled,\n                    !disabled && selected && styles.primaryTextSelected,\n                    itemDisplayType === \"inline\" &&\n                        styles.primaryTextLabelInline,\n                    truncationType === \"end\" && styles.primaryTextTruncateEnd\n                )}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </div>\n            {sublabel && (\n                <div\n                    ref={secondaryTextRef}\n                    aria-label={sublabel}\n                    className={clsx(\n                        styles.secondaryText,\n                        itemDisplayType === \"inline\" &&\n                            styles.secondaryTextLabelInline,\n                        truncationType === \"end\" &&\n                            styles.secondaryTextTruncateEnd,\n                        displayType === \"next-line\"\n                            ? styles.secondaryTextNextLine\n                            : styles.secondaryTextInline\n                    )}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["DropdownLabel","bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","primaryTextRef","useRef","secondaryTextRef","useApplyStyle","styles.tokens","primaryText","String","secondaryText","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","className","styles.matchedText","renderTruncatedText","clsx","styles.baseTruncateStyle","styles.truncateFirstLine","styles.truncateLineSingle","styles.truncateSecondLine","styles.label","styles.labelVariantSmall","styles.labelNextLine","styles.primaryText","styles.primaryTextBold","styles.primaryTextDisabled","styles.primaryTextSelected","styles.primaryTextLabelInline","styles.primaryTextTruncateEnd","styles.secondaryText","styles.secondaryTextLabelInline","styles.secondaryTextTruncateEnd","styles.secondaryTextNextLine","styles.secondaryTextInline"],"mappings":"ylCAuBO,MAAMA,EAAgB,EACzBC,OACAC,cAAc,SAAQC,MACtBA,EACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EACU,UAAZD,EACME,EAAKC,KAAK,gBACVD,EAAKC,KAAK,sBACdC,EAAaF,EAAKC,KAAK,gBACvBE,IAAEA,EAAGC,MAAEA,GAAUC,IAEjBC,EAAiBC,EAAuB,MACxCC,EAAmBD,EAAuB,MAEhDE,EAAcH,EAAgB,CAC1B,CAACI,EAAcC,YAAYlB,UAAWmB,OAAOnB,KAGjDgB,EAAcD,EAAkB,CAC5B,CAACE,EAAcG,cAAcpB,UAAWmB,OAAOnB,KAMnD,MAAMqB,EAAuBC,GACxBC,IACG,GAAoB,WAAhB1B,IAA6Bc,EAC7B,OAAO,EAaX,OAPkBa,EAAaC,aAC3BF,EACA,GAAGjB,MAAaG,MAKDE,EAAQ,EAAE,GAEjC,CAACA,EAAOd,EAAaS,EAAUG,IAM7BiB,EAAsBC,GACxB,IAAMN,EAAqBvB,IAC3B,CAACuB,EAAsBvB,IAErB8B,EAAsBD,GACxB,IAAMxB,GAAYkB,EAAqBlB,IACvC,CAACkB,EAAsBlB,IAKrB0B,EACiB,WAAnBzB,IACCsB,GAAuBE,GAClB,YACA/B,EAKJiC,EAAqBP,IACvB,IAAKxB,EACD,OAAOwB,EAGX,MAAMQ,EAAQhC,EAAWiC,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAanC,EAAWsC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,EAAAC,EAAA,CAAAC,SAAA,CACK1C,EAAM2C,MAAM,EAAGP,GAChBQ,EAAA,OAAA,CAAMC,UAAWC,EAAkBJ,SAC9B1C,EAAM2C,MAAMP,EAAYE,KAE5BtC,EAAM2C,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAC,EAAA,CAAAC,SAAA,CACIE,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAC,EACa,IAAbhD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,KAEvBmB,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAG,EACa,IAAblD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,QAMnC,OACIe,EAAA,MAAA,CACI5B,IAAKA,EACLiC,UAAWG,EACPK,EACY,UAAZ9C,GAAuB+C,EACH,cAApBvB,GAAmCwB,GACtCb,SAAA,CAEDE,SACIhC,IAAKG,EAAc,aACPf,EACZ6C,UAAWG,EACPQ,EACA1D,GAAQ2D,EACRrD,GAAYsD,GACXtD,GAAYD,GAAYwD,EACL,WAApB5B,GACI6B,EACe,QAAnBtD,GAA4BuD,GAC/BnB,SAEmB,WAAnBpC,GAA+BsB,EAC1BmB,EAAoB/C,GACpBgC,EAAkBhC,KAE3BK,GACGuC,EAAA,MAAA,CACIhC,IAAKK,EAAgB,aACTZ,EACZwC,UAAWG,EACPc,EACoB,WAApB/B,GACIgC,EACe,QAAnBzD,GACI0D,EACY,cAAhBjE,EACMkE,EACAC,YAGU,WAAnB5D,GAA+BwB,EAC1BiB,EAAoB1C,GACpBA,MAGZ"}
+{"version":3,"file":"dropdown-label.js","sources":["../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Font } from \"../../theme\";\nimport { useApplyStyle } from \"../../theme/utils/use-apply-styles\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport * as styles from \"./dropdown-label.styles\";\nimport type { DropdownVariantType, LabelDisplayType } from \"./types\";\n\ninterface DropdownLabelProps {\n    bold?: boolean | undefined;\n    displayType?: LabelDisplayType | undefined;\n    label: string;\n    maxLines?: number | undefined;\n    searchTerm?: string | undefined;\n    selected?: boolean | undefined;\n    disabled?: boolean | undefined;\n    sublabel?: string | undefined;\n    truncationType?: \"middle\" | \"end\" | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const DropdownLabel = ({\n    bold,\n    displayType = \"inline\",\n    label,\n    searchTerm,\n    maxLines = 2,\n    selected,\n    disabled,\n    sublabel,\n    truncationType = \"middle\",\n    variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]\n            : Font.Spec[\"body-size-baseline\"];\n    const fontFamily = Font.Spec[\"font-family-body\"];\n    const { ref, width } = useResizeDetector();\n\n    const primaryTextRef = useRef<HTMLDivElement>(null);\n    const secondaryTextRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(primaryTextRef, {\n        [styles.tokens.primaryText.maxLines]: String(maxLines),\n    });\n\n    useApplyStyle(secondaryTextRef, {\n        [styles.tokens.secondaryText.maxLines]: String(maxLines),\n    });\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const hasExceededContainer = useCallback(\n        (displayText: string) => {\n            if (displayType !== \"inline\" || !width) {\n                return false;\n            }\n\n            // best-effort attempt to check if multi-line text will overflow,\n            // rendering an actual element in the DOM might be more accurate\n            // but might not be performant for large lists\n            const textWidth = StringHelper.getTextWidth(\n                displayText,\n                `${fontSize} '${fontFamily}'`\n            );\n\n            // there's less space than expected due to word breaks, so an\n            // arbitary offset is applied\n            return textWidth > width - 50;\n        },\n        [width, displayType, fontSize, fontFamily]\n    );\n\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const shouldTruncateTitle = useMemo(\n        () => hasExceededContainer(label),\n        [hasExceededContainer, label]\n    );\n    const shouldTruncateLabel = useMemo(\n        () => sublabel && hasExceededContainer(sublabel),\n        [hasExceededContainer, sublabel]\n    );\n\n    // css cannot truncate inline elements so force the display to render\n    // them separately\n    const itemDisplayType =\n        truncationType === \"middle\" &&\n        (shouldTruncateTitle || shouldTruncateLabel)\n            ? \"next-line\"\n            : displayType;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMatchInBold = (displayText: string) => {\n        if (!searchTerm) {\n            return displayText;\n        }\n\n        const match = searchTerm.toLowerCase().trim();\n        const startIndex = displayText.toLowerCase().indexOf(match);\n        const endIndex = startIndex + searchTerm.length;\n\n        if (startIndex === -1) {\n            return displayText;\n        }\n\n        return (\n            <>\n                {label.slice(0, startIndex)}\n                <span className={styles.matchedText}>\n                    {label.slice(startIndex, endIndex)}\n                </span>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateFirstLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateSecondLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                styles.label,\n                variant === \"small\" && styles.labelVariantSmall,\n                itemDisplayType === \"next-line\" && styles.labelNextLine\n            )}\n        >\n            <div\n                ref={primaryTextRef}\n                aria-label={label}\n                className={clsx(\n                    styles.primaryText,\n                    bold && styles.primaryTextBold,\n                    disabled && styles.primaryTextDisabled,\n                    !disabled && selected && styles.primaryTextSelected,\n                    itemDisplayType === \"inline\" &&\n                        styles.primaryTextLabelInline,\n                    truncationType === \"end\" && styles.primaryTextTruncateEnd\n                )}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </div>\n            {sublabel && (\n                <div\n                    ref={secondaryTextRef}\n                    aria-label={sublabel}\n                    className={clsx(\n                        styles.secondaryText,\n                        itemDisplayType === \"inline\" &&\n                            styles.secondaryTextLabelInline,\n                        truncationType === \"end\" &&\n                            styles.secondaryTextTruncateEnd,\n                        displayType === \"next-line\"\n                            ? styles.secondaryTextNextLine\n                            : styles.secondaryTextInline\n                    )}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["DropdownLabel","bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","primaryTextRef","useRef","secondaryTextRef","useApplyStyle","styles.tokens","primaryText","String","secondaryText","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","className","styles.matchedText","renderTruncatedText","clsx","styles.baseTruncateStyle","styles.truncateFirstLine","styles.truncateLineSingle","styles.truncateSecondLine","styles.label","styles.labelVariantSmall","styles.labelNextLine","styles.primaryText","styles.primaryTextBold","styles.primaryTextDisabled","styles.primaryTextSelected","styles.primaryTextLabelInline","styles.primaryTextTruncateEnd","styles.secondaryText","styles.secondaryTextLabelInline","styles.secondaryTextTruncateEnd","styles.secondaryTextNextLine","styles.secondaryTextInline"],"mappings":"soCAuBO,MAAMA,EAAgB,EACzBC,OACAC,cAAc,SAAQC,MACtBA,EACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EACU,UAAZD,EACME,EAAKC,KAAK,gBACVD,EAAKC,KAAK,sBACdC,EAAaF,EAAKC,KAAK,qBACvBE,IAAEA,EAAGC,MAAEA,GAAUC,IAEjBC,EAAiBC,EAAuB,MACxCC,EAAmBD,EAAuB,MAEhDE,EAAcH,EAAgB,CAC1B,CAACI,EAAcC,YAAYlB,UAAWmB,OAAOnB,KAGjDgB,EAAcD,EAAkB,CAC5B,CAACE,EAAcG,cAAcpB,UAAWmB,OAAOnB,KAMnD,MAAMqB,EAAuBC,GACxBC,IACG,GAAoB,WAAhB1B,IAA6Bc,EAC7B,OAAO,EAaX,OAPkBa,EAAaC,aAC3BF,EACA,GAAGjB,MAAaG,MAKDE,EAAQ,EAAE,GAEjC,CAACA,EAAOd,EAAaS,EAAUG,IAM7BiB,EAAsBC,GACxB,IAAMN,EAAqBvB,IAC3B,CAACuB,EAAsBvB,IAErB8B,EAAsBD,GACxB,IAAMxB,GAAYkB,EAAqBlB,IACvC,CAACkB,EAAsBlB,IAKrB0B,EACiB,WAAnBzB,IACCsB,GAAuBE,GAClB,YACA/B,EAKJiC,EAAqBP,IACvB,IAAKxB,EACD,OAAOwB,EAGX,MAAMQ,EAAQhC,EAAWiC,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAanC,EAAWsC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,EAAAC,EAAA,CAAAC,SAAA,CACK1C,EAAM2C,MAAM,EAAGP,GAChBQ,EAAA,OAAA,CAAMC,UAAWC,EAAkBJ,SAC9B1C,EAAM2C,MAAMP,EAAYE,KAE5BtC,EAAM2C,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAC,EAAA,CAAAC,SAAA,CACIE,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAC,EACa,IAAbhD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,KAEvBmB,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAG,EACa,IAAblD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,QAMnC,OACIe,EAAA,MAAA,CACI5B,IAAKA,EACLiC,UAAWG,EACPK,EACY,UAAZ9C,GAAuB+C,EACH,cAApBvB,GAAmCwB,GACtCb,SAAA,CAEDE,SACIhC,IAAKG,EAAc,aACPf,EACZ6C,UAAWG,EACPQ,EACA1D,GAAQ2D,EACRrD,GAAYsD,GACXtD,GAAYD,GAAYwD,EACL,WAApB5B,GACI6B,EACe,QAAnBtD,GAA4BuD,GAC/BnB,SAEmB,WAAnBpC,GAA+BsB,EAC1BmB,EAAoB/C,GACpBgC,EAAkBhC,KAE3BK,GACGuC,EAAA,MAAA,CACIhC,IAAKK,EAAgB,aACTZ,EACZwC,UAAWG,EACPc,EACoB,WAApB/B,GACIgC,EACe,QAAnBzD,GACI0D,EACY,cAAhBjE,EACMkE,EACAC,YAGU,WAAnB5D,GAA+BwB,EAC1BiB,EAAoB1C,GACpBA,MAGZ"}

package/shared/dropdown-list/dropdown-label.styles.js

@@ -1,2 +1,2 @@
-import"./dropdown-label.styles_1dwmd8f.css";const s={primaryText:{maxLines:"--fds-internal-dropdownLabel-primaryText-maxLines"},secondaryText:{maxLines:"--fds-internal-dropdownLabel-secondaryText-maxLines"}},t="pi58ntt",e="p1wtg030",i="p4cirxp",n="pp0vhoy",o="p1nofioz",p="przdrhy",r="s3fwc7p",d="s132gi2y",a="swx1e24",x="s1kq4iiq",l="s1jjyg61",m="m7dzxku",y="lkpcujm",w="l4129ag",c="l5tt4mi",f="b1tiox0q",L="t1y8fzo0",g="t18n9ljk",T="tgn5sfi";export{f as baseTruncateStyle,y as label,c as labelNextLine,w as labelVariantSmall,m as matchedText,t as primaryText,e as primaryTextBold,n as primaryTextDisabled,o as primaryTextLabelInline,i as primaryTextSelected,p as primaryTextTruncateEnd,r as secondaryText,a as secondaryTextInline,x as secondaryTextLabelInline,d as secondaryTextNextLine,l as secondaryTextTruncateEnd,s as tokens,L as truncateFirstLine,T as truncateLineSingle,g as truncateSecondLine};
+import"./dropdown-label.styles_mloii0.css";const i={primaryText:{maxLines:"--fds-internal-dropdownLabel-primaryText-maxLines"},secondaryText:{maxLines:"--fds-internal-dropdownLabel-secondaryText-maxLines"}},s="pi58ntt",t="p1wtg030",e="p4cirxp",n="pp0vhoy",o="p1nofioz",p="przdrhy",r="s3fwc7p",a="s132gi2y",d="swx1e24",l="s1kq4iiq",x="s1jjyg61",m="m7dzxku",y="lkpcujm",c="l4129ag",w="l5tt4mi",f="b1tiox0q",L="t1y8fzo0",g="t18n9ljk",T="tgn5sfi";export{f as baseTruncateStyle,y as label,w as labelNextLine,c as labelVariantSmall,m as matchedText,s as primaryText,t as primaryTextBold,n as primaryTextDisabled,o as primaryTextLabelInline,e as primaryTextSelected,p as primaryTextTruncateEnd,r as secondaryText,d as secondaryTextInline,l as secondaryTextLabelInline,a as secondaryTextNextLine,x as secondaryTextTruncateEnd,i as tokens,L as truncateFirstLine,T as truncateLineSingle,g as truncateSecondLine};
 //# sourceMappingURL=dropdown-label.styles.js.map

package/shared/dropdown-list/dropdown-label.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-label.styles.js","sources":["../../../src/shared/dropdown-list/dropdown-label.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../../theme\";\nimport { lineClampDynamicCss } from \"../styles\";\n\nexport const tokens = {\n    primaryText: {\n        maxLines: \"--fds-internal-dropdownLabel-primaryText-maxLines\",\n    },\n    secondaryText: {\n        maxLines: \"--fds-internal-dropdownLabel-secondaryText-maxLines\",\n    },\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// PRIMARY TEXT\n// -----------------------------------------------------------------------------\nexport const primaryText = css`\n    font-weight: ${Font.Spec[\"weight-regular\"]};\n    color: ${Colour[\"text\"]};\n    width: 100%;\n    overflow-wrap: break-word;\n`;\n\nexport const primaryTextBold = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const primaryTextSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const primaryTextDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const primaryTextLabelInline = css`\n    display: inline;\n`;\n\nexport const primaryTextTruncateEnd = css`\n    ${tokens.primaryText.maxLines}: 2;\n    ${lineClampDynamicCss(tokens.primaryText.maxLines)}\n`;\n\n// -----------------------------------------------------------------------------\n// SECONDARY TEXT\n// -----------------------------------------------------------------------------\nexport const secondaryText = css`\n    color: ${Colour[\"text-subtlest\"]};\n    width: 100%;\n    overflow-wrap: break-word;\n`;\n\nexport const secondaryTextNextLine = css`\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const secondaryTextInline = css`\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const secondaryTextLabelInline = css`\n    display: inline;\n    margin-left: 0.5rem;\n`;\n\nexport const secondaryTextTruncateEnd = css`\n    ${tokens.secondaryText.maxLines}: 2;\n    ${lineClampDynamicCss(tokens.secondaryText.maxLines)}\n`;\n\n// -----------------------------------------------------------------------------\n// MATCHED TEXT\n// -----------------------------------------------------------------------------\nexport const matchedText = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LABEL\n// -----------------------------------------------------------------------------\nexport const label = css`\n    text-align: left;\n    width: 100%;\n    overflow: hidden;\n    overflow-wrap: break-word;\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const labelVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const labelNextLine = css`\n    display: flex;\n    flex-direction: column;\n`;\n\n// -----------------------------------------------------------------------------\n// TRUNCATION\n// -----------------------------------------------------------------------------\nexport const baseTruncateStyle = css`\n    display: inline-block;\n    width: 100%;\n    height: 1lh;\n    overflow: hidden;\n`;\n\nexport const truncateFirstLine = css`\n    word-break: break-all;\n`;\n\nexport const truncateSecondLine = css`\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    direction: rtl;\n    text-align: right;\n`;\n\nexport const truncateLineSingle = css`\n    width: 50%;\n`;\n"],"names":["tokens","primaryText","maxLines","secondaryText","primaryTextBold","primaryTextSelected","primaryTextDisabled","primaryTextLabelInline","primaryTextTruncateEnd","secondaryTextNextLine","secondaryTextInline","secondaryTextLabelInline","secondaryTextTruncateEnd","matchedText","label","labelVariantSmall","labelNextLine","baseTruncateStyle","truncateFirstLine","truncateSecondLine","truncateLineSingle"],"mappings":"gFAKO,MAAMA,EAAS,CAClBC,YAAa,CACTC,SAAU,qDAEdC,cAAe,CACXD,SAAU,wDAWLD,EAAW,UAOXG,EAAe,WAIfC,EAAmB,UAInBC,EAAmB,UAInBC,EAAsB,WAItBC,EAAsB,UAQtBL,EAAa,UAMbM,EAAqB,WAIrBC,EAAmB,UAInBC,EAAwB,WAKxBC,EAAwB,WAQxBC,EAAW,UAOXC,EAAK,UAQLC,EAAiB,UAIjBC,EAAa,UAQbC,EAAiB,WAOjBC,EAAiB,WAIjBC,EAAkB,WAOlBC,EAAkB"}
+{"version":3,"file":"dropdown-label.styles.js","sources":["../../../src/shared/dropdown-list/dropdown-label.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../../theme\";\nimport { lineClampDynamicCss } from \"../styles\";\n\nexport const tokens = {\n    primaryText: {\n        maxLines: \"--fds-internal-dropdownLabel-primaryText-maxLines\",\n    },\n    secondaryText: {\n        maxLines: \"--fds-internal-dropdownLabel-secondaryText-maxLines\",\n    },\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// PRIMARY TEXT\n// -----------------------------------------------------------------------------\nexport const primaryText = css`\n    font-weight: ${Font.Spec[\"weight-regular\"]};\n    color: ${Colour[\"text\"]};\n    width: 100%;\n    overflow-wrap: break-word;\n`;\n\nexport const primaryTextBold = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const primaryTextSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const primaryTextDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const primaryTextLabelInline = css`\n    display: inline;\n`;\n\nexport const primaryTextTruncateEnd = css`\n    ${tokens.primaryText.maxLines}: 2;\n    ${lineClampDynamicCss(tokens.primaryText.maxLines)}\n`;\n\n// -----------------------------------------------------------------------------\n// SECONDARY TEXT\n// -----------------------------------------------------------------------------\nexport const secondaryText = css`\n    color: ${Colour[\"text-subtlest\"]};\n    width: 100%;\n    overflow-wrap: break-word;\n`;\n\nexport const secondaryTextNextLine = css`\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const secondaryTextInline = css`\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const secondaryTextLabelInline = css`\n    display: inline;\n    margin-left: 0.5rem;\n`;\n\nexport const secondaryTextTruncateEnd = css`\n    ${tokens.secondaryText.maxLines}: 2;\n    ${lineClampDynamicCss(tokens.secondaryText.maxLines)}\n`;\n\n// -----------------------------------------------------------------------------\n// MATCHED TEXT\n// -----------------------------------------------------------------------------\nexport const matchedText = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LABEL\n// -----------------------------------------------------------------------------\nexport const label = css`\n    text-align: left;\n    width: 100%;\n    overflow: hidden;\n    overflow-wrap: break-word;\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const labelVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const labelNextLine = css`\n    display: flex;\n    flex-direction: column;\n`;\n\n// -----------------------------------------------------------------------------\n// TRUNCATION\n// -----------------------------------------------------------------------------\nexport const baseTruncateStyle = css`\n    display: inline-block;\n    width: 100%;\n    height: 1lh;\n    overflow: hidden;\n`;\n\nexport const truncateFirstLine = css`\n    word-break: break-all;\n`;\n\nexport const truncateSecondLine = css`\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    direction: rtl;\n    text-align: right;\n`;\n\nexport const truncateLineSingle = css`\n    width: 50%;\n`;\n"],"names":["tokens","primaryText","maxLines","secondaryText","primaryTextBold","primaryTextSelected","primaryTextDisabled","primaryTextLabelInline","primaryTextTruncateEnd","secondaryTextNextLine","secondaryTextInline","secondaryTextLabelInline","secondaryTextTruncateEnd","matchedText","label","labelVariantSmall","labelNextLine","baseTruncateStyle","truncateFirstLine","truncateSecondLine","truncateLineSingle"],"mappings":"+EAKO,MAAMA,EAAS,CAClBC,YAAa,CACTC,SAAU,qDAEdC,cAAe,CACXD,SAAU,wDAWLD,EAAW,UAOXG,EAAe,WAIfC,EAAmB,UAInBC,EAAmB,UAInBC,EAAsB,WAItBC,EAAsB,UAQtBL,EAAa,UAMbM,EAAqB,WAIrBC,EAAmB,UAInBC,EAAwB,WAKxBC,EAAwB,WAQxBC,EAAW,UAOXC,EAAK,UAQLC,EAAiB,UAIjBC,EAAa,UAQbC,EAAiB,WAOjBC,EAAiB,WAIjBC,EAAkB,WAOlBC,EAAkB"}

package/shared/dropdown-list/dropdown-label.styles_mloii0.css

@@ -0,0 +1,19 @@
+.pi58ntt{font-weight:var(--fds-font-weight-regular);color:var(--fds-colour-text);width:100%;overflow-wrap:break-word;}
+.p1wtg030{font-weight:var(--fds-font-weight-semibold);}
+.p4cirxp{color:var(--fds-colour-text-selected);}
+.pp0vhoy{color:var(--fds-colour-text-disabled);}
+.p1nofioz{display:inline;}
+.przdrhy{--fds-internal-dropdownLabel-primaryText-maxLines:2;--fds-internal-dropdownLabel-primaryText-maxLines:initial;display:-webkit-box;-webkit-line-clamp:var(--fds-internal-dropdownLabel-primaryText-maxLines);-webkit-box-orient:vertical;overflow:hidden;}
+.s3fwc7p{color:var(--fds-colour-text-subtlest);width:100%;overflow-wrap:break-word;}
+.s132gi2y{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.swx1e24{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.s1kq4iiq{display:inline;margin-left:0.5rem;}
+.s1jjyg61{--fds-internal-dropdownLabel-secondaryText-maxLines:2;--fds-internal-dropdownLabel-secondaryText-maxLines:initial;display:-webkit-box;-webkit-line-clamp:var(--fds-internal-dropdownLabel-secondaryText-maxLines);-webkit-box-orient:vertical;overflow:hidden;}
+.m7dzxku{font-weight:var(--fds-font-weight-semibold);}
+.lkpcujm{text-align:left;width:100%;overflow:hidden;overflow-wrap:break-word;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.l4129ag{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.l5tt4mi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.b1tiox0q{display:inline-block;width:100%;height:1lh;overflow:hidden;}
+.t1y8fzo0{word-break:break-all;}
+.t18n9ljk{text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:right;}
+.tgn5sfi{width:50%;}

package/shared/dropdown-list/dropdown-list.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circle-fill";import{SquareIcon as n}from"@lifesg/react-icons/square";import{SquareFillIcon as o}from"@lifesg/react-icons/square-fill";import{SquareTickFillIcon as l}from"@lifesg/react-icons/square-tick-fill";import{TickIcon as s}from"@lifesg/react-icons/tick";import a from"clsx";import c from"../../external/lodash/find.js";import d from"../../external/lodash/isEqual.js";import{forwardRef as u,useContext as m,useState as p,useRef as f,useCallback as v,useImperativeHandle as h,useEffect as x}from"react";import{Virtuoso as g}from"react-virtuoso";import{Markup as b}from"../../markup/markup.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as j}from"../../theme/utils/use-apply-styles.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as y}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as T}from"../../util/use-event.js";import{useEventListener as N}from"../../util/use-event-listener.js";import{useIsMounted as w}from"../../util/use-mount.js";import{useCompare as I}from"../../util/use-previous.js";import{VisuallyHidden as L}from"../accessibility/index.js";import{ComponentLoadingSpinner as k}from"../component-loading-spinner/component-loading-spinner.js";import{useDropdownRender as S}from"../dropdown-wrapper/element-with-dropdown.js";import{BasicButton as C}from"../input-wrapper/input-wrapper.js";import{DropdownLabel as D}from"./dropdown-label.js";import{container as E,containerVariantSmall as A,list as F,selectAllContainer as M,baseButton as P,selectAllButton as R,resultStateContainer as W,labelIcon as q,noResultDescContainer as O,spinner as $,tryAgainButton as _,listItem as B,listItemDisabled as z,listItemActiveSelected as U,listItemActive as V,baseCheckboxIndicatorStyle as G,checkboxDisabledIndicator as H,checkboxSelectedIndicator as J,checkboxUnselectedIndicator as K,baseIndicatorStyle as Q,selectedIndicator as X,tokens as Y}from"./dropdown-list.styles.js";import{DropdownListStateContext as Z}from"./dropdown-list-state.js";import{DropdownSearch as ee}from"./dropdown-search.js";import{VirtuosoItem as te,VirtuosoList as re}from"./virtuoso-components.js";const ie=u((({listItems:u,multiSelect:ie,maxSelectable:ne,selectedItems:oe,disableItemFocus:le,itemsLoadState:se="success",itemTruncationType:ae="end",itemMaxLines:ce=2,labelDisplayType:de="inline",variant:ue="default",listboxId:me,ariaLabel:pe,matchElementWidth:fe=!1,width:ve,topScrollItem:he,onSelectItem:xe,onSelectAll:ge,onDismiss:be,onRetry:je,valueExtractor:ye,listExtractor:Te,renderListItem:Ne,renderCustomCallToAction:we,enableSearch:Ie,hideNoResultsDisplay:Le,noResultsDescription:ke,customLabels:Se,searchPlaceholder:Ce,searchFunction:De,onSearch:Ee},Ae)=>{const{noResultsLabel:Fe="No results found.",selectAllButtonLabel:Me="Select all",clearAllButtonLabel:Pe="Clear all"}=Se||{},Re=(null==Se?void 0:Se.searchPlaceholder)||Ce||"Search",We=(null==Se?void 0:Se.noResultsDescription)||ke,{focusedIndex:qe,setFocusedIndex:Oe}=m(Z),{elementWidth:$e,setFloatingRef:_e,getFloatingProps:Be,styles:ze}=S(),[Ue,Ve]=p(""),[Ge,He]=p(null!=u?u:[]),Je=I(se),Ke=w(),Qe=f(null),Xe=f([]),Ye=f(null),Ze=f(null),et=!!ne&&!!oe&&(null==oe?void 0:oe.length)===ne;let tt={};ve?tt={[Y.containerWidth]:`${ve}px`,[Y.containerMinWidth]:"0px"}:fe&&$e&&(tt={[Y.containerWidth]:`${$e}px`,[Y.containerMinWidth]:`${$e}px`});const rt=e=>{const t=Te?Te(e):null==e?void 0:e.toString();return"object"==typeof t?{title:t.title,secondaryLabel:t.secondaryLabel}:{title:null!=t?t:""}},it=v((e=>!!c(oe,(t=>d(t,e)))),[oe]),nt=T((()=>null==De?void 0:De(Ue))),ot=T((()=>null==u?void 0:u.filter((e=>{const{title:t,secondaryLabel:r}=rt(e),i=Ue.trim().toLowerCase();return t.toLowerCase().includes(i)||r&&r.toLowerCase().includes(i)})))),lt=v((e=>{var t,r;if(le)return;if(Ye.current)return Oe(-1),void setTimeout((()=>{var e;return null===(e=Ye.current)||void 0===e?void 0:e.focus()}),0);const i=null!=Ge?Ge:[];if(0===i.length)return;if(void 0!==(null==e?void 0:e.index)){const r=Math.max(0,Math.min(e.index,i.length-1));return null===(t=Ze.current)||void 0===t||t.scrollToIndex({index:r,align:"center"}),Oe(r),void setTimeout((()=>{var e;return null===(e=Xe.current[r])||void 0===e?void 0:e.focus()}),0)}const n=(null==e?void 0:e.preferSelected)?i.findIndex((e=>it(e))):-1,o=-1!==n?n:qe>=0&&qe<i.length?qe:0;null===(r=Ze.current)||void 0===r||r.scrollToIndex({index:o,align:"center"}),Oe(o),setTimeout((()=>{var e;return null===(e=Xe.current[o])||void 0===e?void 0:e.focus()}),0)}),[it,le,Ge,qe,Oe]),st=(e,t)=>{et&&!it(e)||(Oe(t),null==xe||xe(e,(e=>ye?ye(e):e)(e)))},at=e=>{const t=e.target.value;Ve(t),null==Ee||Ee()},ct=()=>{var e;Ve(""),null===(e=Ye.current)||void 0===e||e.focus(),null==Ee||Ee()},dt=()=>null==je?void 0:je();N("keydown",(e=>{var t,r;switch(e.code){case"ArrowDown":if(e.preventDefault(),qe<Ge.length-1){const e=qe+1;null===(t=Xe.current[e])||void 0===t||t.focus(),Oe(e)}break;case"ArrowUp":if(e.preventDefault(),qe>0){const e=qe-1;null===(r=Xe.current[e])||void 0===r||r.focus(),Oe(e)}else 0===qe&&Ye.current&&(Ye.current.focus(),Oe(-1));break;case"Space":case"Enter":document.activeElement===Xe.current[qe]&&(e.preventDefault(),Ge[qe]&&st(Ge[qe],qe))}})),h(Ae,(()=>({refocus:lt})),[lt]),x((()=>{var e;if(!he)return void(null===(e=Ze.current)||void 0===e||e.scrollTo({top:0}));const t=setTimeout((()=>{if(!u)return;const e=u.indexOf(he);Ze.current&&-1!==e&&(Ze.current.scrollToIndex({index:e}),Oe(e))}),0);return()=>clearTimeout(t)}),[Xe,u,Oe,he]),x((()=>{le||Ke&&Je&&"success"===se&&Ye.current&&(Oe(-1),Ye.current.focus())}),[Ke,Je,se,Oe,le]),x((()=>{var e;He(null!==(e=""===Ue?u:De?nt():ot())&&void 0!==e?e:[])}),[nt,ot,u,De,Ue]),x((()=>{var e,t,r;if(Ke)return;if(le||!u)return;const i=u.findIndex((e=>it(e)));Ye.current?(Oe(-1),setTimeout((()=>{var e;return null===(e=Ye.current)||void 0===e?void 0:e.focus()}),200)):qe>0?(null===(e=Ze.current)||void 0===e||e.scrollToIndex({index:qe,align:"center"}),setTimeout((()=>{var e;return null===(e=Xe.current[qe])||void 0===e?void 0:e.focus()}),200)):-1!==i?(null===(t=Ze.current)||void 0===t||t.scrollToIndex({index:i,align:"center"}),Oe(i),setTimeout((()=>{var e;return null===(e=Xe.current[i])||void 0===e?void 0:e.focus()}),200)):(null===(r=Ze.current)||void 0===r||r.scrollToIndex({index:0}),Oe(0),setTimeout((()=>{var e;return null===(e=Xe.current[0])||void 0===e?void 0:e.focus()}),200))}),[it,le,qe,u,Ke,Oe]),j(Qe,Object.assign({},tt));const ut=e=>ie?et&&!e?t(o,{"aria-hidden":!0,className:a(G,H)}):e?t(l,{"aria-hidden":!0,className:a(G,J)}):t(n,{"aria-hidden":!0,className:a(G,K)}):e?t(s,{"aria-hidden":!0,className:a(Q,X)}):t("div",{className:Q}),mt=(e,r)=>{const{title:i,secondaryLabel:n}=rt(e);return t(D,{displayType:de,label:i,maxLines:ce,selected:r,disabled:!r&&et,sublabel:n,truncationType:ae,variant:ue})},pt=(i,n)=>{if(!je||"success"===se){const o=it(i),l=n===qe,s=!o&&et;return t("li",{"aria-selected":o,"aria-multiselectable":ie,"aria-disabled":s,"aria-posinset":n+1,"aria-setsize":null==Ge?void 0:Ge.length,"data-testid":"list-item",onClick:()=>st(i,n),onMouseEnter:()=>(e=>Oe(e))(n),ref:e=>{Xe.current[n]=e},role:"option",tabIndex:l?0:-1,className:a(B,s&&z||l&&o&&U||l&&V),children:Ne?Ne(i,{selected:o}):e(r,{children:[ut(o),mt(i,o)]})},((e,t)=>`item_${t}__${ye?ye(e):e}`)(i,n))}},ft=()=>{if((Ie||De)&&"success"===se)return t(ee,{ref:Ye,onChange:at,value:Ue,placeholder:Re,"data-testid":"search-input","aria-label":"Enter text to search",onClear:ct,variant:ue})},vt=()=>{if(oe&&ie&&Ge.length>0&&!Ue&&"success"===se)return t("div",{className:M,children:t(C,{onClick:ge,type:"button",className:a(P,R),children:ne||0!==oe.length?Pe:Me})})},ht=()=>{if(!Le&&(Ue||!Ie)&&0===Ge.length&&"success"===se)return e(r,{children:[e("div",{"data-testid":"list-no-results",className:W,children:[t(i,{"data-testid":"no-result-icon",className:q}),Fe]}),We&&t(b,{"data-testid":"no-result-desc",className:O,children:We})]})},xt=()=>{if(je&&"loading"===se)return e("div",{"data-testid":"list-loading",className:W,children:[t(k,{className:$}),"Loading..."]})},gt=()=>{if(je&&"fail"===se)return e("div",{"data-testid":"list-fail",className:W,children:[t(i,{"data-testid":"load-error-icon",className:q}),"Failed to load. ",t(C,{onClick:dt,type:"button",className:a(P,_),children:"Try again."})]})},bt=()=>{var e;const r="test"===process.env.NODE_ENV;return t(g,Object.assign({ref:Ze,style:{height:"100%"},data:Ge,customScrollParent:null!==(e=Qe.current)&&void 0!==e?e:void 0,itemContent:(e,t)=>pt(t,e),components:{List:re,Item:te},context:{listProps:{id:me,role:"listbox","aria-multiselectable":ie},listItemProps:{role:"none"}}},r?{initialItemCount:Ge.length}:{}),r?Ge.length:void 0)};return e("div",Object.assign({"data-testid":"dropdown-container",ref:y(Qe,_e)},Be(),{className:a(E,"small"===ue&&A),style:ze,children:[t(L,{role:"status",children:pe}),e("div",{"data-testid":"dropdown-list",role:"group","aria-label":pe,className:F,children:[ft(),vt(),ht(),xt(),gt(),bt()]}),(()=>{if(we)return t("div",{"data-testid":"custom-cta",children:we(be,Ge)})})()]}))}));export{ie as DropdownList};
+import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circle-fill";import{SquareIcon as l}from"@lifesg/react-icons/square";import{SquareFillIcon as o}from"@lifesg/react-icons/square-fill";import{SquareTickFillIcon as n}from"@lifesg/react-icons/square-tick-fill";import{TickIcon as s}from"@lifesg/react-icons/tick";import a from"clsx";import c from"../../external/lodash/find.js";import u from"../../external/lodash/isEqual.js";import{forwardRef as d,useContext as m,useState as p,useRef as f,useCallback as v,useImperativeHandle as h,useEffect as x}from"react";import{Virtuoso as g}from"react-virtuoso";import{Markup as b}from"../../markup/markup.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as j}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as y}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as T}from"../../util/use-event.js";import{useEventListener as w}from"../../util/use-event-listener.js";import{useIsMounted as N}from"../../util/use-mount.js";import{useCompare as I}from"../../util/use-previous.js";import{VisuallyHidden as L}from"../accessibility/index.js";import{ComponentLoadingSpinner as k}from"../component-loading-spinner/component-loading-spinner.js";import{useDropdownRender as S}from"../dropdown-wrapper/element-with-dropdown.js";import{BasicButton as C}from"../input-wrapper/input-wrapper.js";import{DropdownLabel as D}from"./dropdown-label.js";import{tokens as E,container as q,containerVariantSmall as A,list as F,selectAllContainer as P,baseButton as R,selectAllButton as M,resultStateContainer as O,labelIcon as _,noResultDescContainer as W,spinner as $,tryAgainButton as B,listItem as z,listItemDisabled as U,listItemActiveSelected as V,listItemActive as G,baseCheckboxIndicatorStyle as H,checkboxDisabledIndicator as J,checkboxSelectedIndicator as K,checkboxUnselectedIndicator as Q,baseIndicatorStyle as X,selectedIndicator as Y}from"./dropdown-list.styles.js";import{DropdownListStateContext as Z}from"./dropdown-list-state.js";import{DropdownSearch as ee}from"./dropdown-search.js";import{VirtuosoItem as te,VirtuosoList as re}from"./virtuoso-components.js";const ie=d((({listItems:d,multiSelect:ie,maxSelectable:le,selectedItems:oe,disableItemFocus:ne,itemsLoadState:se="success",itemTruncationType:ae="end",itemMaxLines:ce=2,labelDisplayType:ue="inline",variant:de="default",listboxId:me,ariaLabel:pe,matchElementWidth:fe=!1,width:ve,topScrollItem:he,onSelectItem:xe,onSelectAll:ge,onDismiss:be,onRetry:je,valueExtractor:ye,listExtractor:Te,renderListItem:we,renderCustomCallToAction:Ne,enableSearch:Ie,hideNoResultsDisplay:Le,noResultsDescription:ke,customLabels:Se,searchPlaceholder:Ce,searchFunction:De,onSearch:Ee},qe)=>{const{noResultsLabel:Ae="No results found.",selectAllButtonLabel:Fe="Select all",clearAllButtonLabel:Pe="Clear all"}=Se||{},Re=(null==Se?void 0:Se.searchPlaceholder)||Ce||"Search",Me=(null==Se?void 0:Se.noResultsDescription)||ke,{focusedIndex:Oe,setFocusedIndex:_e}=m(Z),{elementWidth:We,setFloatingRef:$e,getFloatingProps:Be,styles:ze}=S(),[Ue,Ve]=p(""),[Ge,He]=p(null!=d?d:[]),Je=I(se),Ke=N(),Qe=f(null),Xe=f([]),Ye=f(null),Ze=f(null),et=!!le&&!!oe&&(null==oe?void 0:oe.length)===le;let tt,rt="default";ve?(tt=ve,rt="custom"):fe&&We&&(tt=`${We}px`,rt="match"),j(Qe,{[E.containerWidth]:tt});const it=e=>{const t=Te?Te(e):null==e?void 0:e.toString();return"object"==typeof t?{title:t.title,secondaryLabel:t.secondaryLabel}:{title:null!=t?t:""}},lt=v((e=>!!c(oe,(t=>u(t,e)))),[oe]),ot=T((()=>null==De?void 0:De(Ue))),nt=T((()=>null==d?void 0:d.filter((e=>{const{title:t,secondaryLabel:r}=it(e),i=Ue.trim().toLowerCase();return t.toLowerCase().includes(i)||r&&r.toLowerCase().includes(i)})))),st=v((e=>{var t,r;if(ne)return;if(Ye.current)return _e(-1),void setTimeout((()=>{var e;return null===(e=Ye.current)||void 0===e?void 0:e.focus()}),0);const i=null!=Ge?Ge:[];if(0===i.length)return;if(void 0!==(null==e?void 0:e.index)){const r=Math.max(0,Math.min(e.index,i.length-1));return null===(t=Ze.current)||void 0===t||t.scrollToIndex({index:r,align:"center"}),_e(r),void setTimeout((()=>{var e;return null===(e=Xe.current[r])||void 0===e?void 0:e.focus()}),0)}const l=(null==e?void 0:e.preferSelected)?i.findIndex((e=>lt(e))):-1,o=-1!==l?l:Oe>=0&&Oe<i.length?Oe:0;null===(r=Ze.current)||void 0===r||r.scrollToIndex({index:o,align:"center"}),_e(o),setTimeout((()=>{var e;return null===(e=Xe.current[o])||void 0===e?void 0:e.focus()}),0)}),[lt,ne,Ge,Oe,_e]),at=(e,t)=>{et&&!lt(e)||(_e(t),null==xe||xe(e,(e=>ye?ye(e):e)(e)))},ct=e=>{const t=e.target.value;Ve(t),null==Ee||Ee()},ut=()=>{var e;Ve(""),null===(e=Ye.current)||void 0===e||e.focus(),null==Ee||Ee()},dt=()=>null==je?void 0:je();w("keydown",(e=>{var t,r;switch(e.code){case"ArrowDown":if(e.preventDefault(),Oe<Ge.length-1){const e=Oe+1;null===(t=Xe.current[e])||void 0===t||t.focus(),_e(e)}break;case"ArrowUp":if(e.preventDefault(),Oe>0){const e=Oe-1;null===(r=Xe.current[e])||void 0===r||r.focus(),_e(e)}else 0===Oe&&Ye.current&&(Ye.current.focus(),_e(-1));break;case"Space":case"Enter":document.activeElement===Xe.current[Oe]&&(e.preventDefault(),Ge[Oe]&&at(Ge[Oe],Oe))}})),h(qe,(()=>({refocus:st})),[st]),x((()=>{var e;if(!he)return void(null===(e=Ze.current)||void 0===e||e.scrollTo({top:0}));const t=setTimeout((()=>{if(!d)return;const e=d.indexOf(he);Ze.current&&-1!==e&&(Ze.current.scrollToIndex({index:e}),_e(e))}),0);return()=>clearTimeout(t)}),[Xe,d,_e,he]),x((()=>{ne||Ke&&Je&&"success"===se&&Ye.current&&(_e(-1),Ye.current.focus())}),[Ke,Je,se,_e,ne]),x((()=>{var e;He(null!==(e=""===Ue?d:De?ot():nt())&&void 0!==e?e:[])}),[ot,nt,d,De,Ue]),x((()=>{var e,t,r;if(Ke)return;if(ne||!d)return;const i=d.findIndex((e=>lt(e)));Ye.current?(_e(-1),setTimeout((()=>{var e;return null===(e=Ye.current)||void 0===e?void 0:e.focus()}),200)):Oe>0?(null===(e=Ze.current)||void 0===e||e.scrollToIndex({index:Oe,align:"center"}),setTimeout((()=>{var e;return null===(e=Xe.current[Oe])||void 0===e?void 0:e.focus()}),200)):-1!==i?(null===(t=Ze.current)||void 0===t||t.scrollToIndex({index:i,align:"center"}),_e(i),setTimeout((()=>{var e;return null===(e=Xe.current[i])||void 0===e?void 0:e.focus()}),200)):(null===(r=Ze.current)||void 0===r||r.scrollToIndex({index:0}),_e(0),setTimeout((()=>{var e;return null===(e=Xe.current[0])||void 0===e?void 0:e.focus()}),200))}),[lt,ne,Oe,d,Ke,_e]);const mt=e=>ie?et&&!e?t(o,{"aria-hidden":!0,className:a(H,J)}):e?t(n,{"aria-hidden":!0,className:a(H,K)}):t(l,{"aria-hidden":!0,className:a(H,Q)}):e?t(s,{"aria-hidden":!0,className:a(X,Y)}):t("div",{className:X}),pt=(e,r)=>{const{title:i,secondaryLabel:l}=it(e);return t(D,{displayType:ue,label:i,maxLines:ce,selected:r,disabled:!r&&et,sublabel:l,truncationType:ae,variant:de})},ft=(i,l)=>{if(!je||"success"===se){const o=lt(i),n=l===Oe,s=!o&&et;return t("li",{"aria-selected":o,"aria-multiselectable":ie,"aria-disabled":s,"aria-posinset":l+1,"aria-setsize":null==Ge?void 0:Ge.length,"data-testid":"list-item",onClick:()=>at(i,l),onMouseEnter:()=>(e=>_e(e))(l),ref:e=>{Xe.current[l]=e},role:"option",tabIndex:n?0:-1,className:a(z,s&&U||n&&o&&V||n&&G),children:we?we(i,{selected:o}):e(r,{children:[mt(o),pt(i,o)]})},((e,t)=>`item_${t}__${ye?ye(e):e}`)(i,l))}},vt=()=>{if((Ie||De)&&"success"===se)return t(ee,{ref:Ye,onChange:ct,value:Ue,placeholder:Re,"data-testid":"search-input","aria-label":"Enter text to search",onClear:ut,variant:de})},ht=()=>{if(oe&&ie&&Ge.length>0&&!Ue&&"success"===se)return t("div",{className:P,children:t(C,{onClick:ge,type:"button",className:a(R,M),children:le||0!==oe.length?Pe:Fe})})},xt=()=>{if(!Le&&(Ue||!Ie)&&0===Ge.length&&"success"===se)return e(r,{children:[e("div",{"data-testid":"list-no-results",className:O,children:[t(i,{"data-testid":"no-result-icon",className:_}),Ae]}),Me&&t(b,{"data-testid":"no-result-desc",className:W,children:Me})]})},gt=()=>{if(je&&"loading"===se)return e("div",{"data-testid":"list-loading",className:O,children:[t(k,{className:$}),"Loading..."]})},bt=()=>{if(je&&"fail"===se)return e("div",{"data-testid":"list-fail",className:O,children:[t(i,{"data-testid":"load-error-icon",className:_}),"Failed to load. ",t(C,{onClick:dt,type:"button",className:a(R,B),children:"Try again."})]})},jt=()=>{var e;const r="test"===process.env.NODE_ENV;return t(g,Object.assign({ref:Ze,style:{height:"100%"},data:Ge,customScrollParent:null!==(e=Qe.current)&&void 0!==e?e:void 0,itemContent:(e,t)=>ft(t,e),components:{List:re,Item:te},context:{listProps:{id:me,role:"listbox","aria-multiselectable":ie},listItemProps:{role:"none"}}},r?{initialItemCount:Ge.length}:{}),r?Ge.length:void 0)};return e("div",Object.assign({"data-testid":"dropdown-container",ref:y(Qe,$e)},Be(),{"data-width-type":rt,className:a(q,"small"===de&&A),style:ze,children:[t(L,{role:"status",children:pe}),e("div",{"data-testid":"dropdown-list",role:"group","aria-label":pe,className:F,children:[vt(),ht(),xt(),gt(),bt(),jt()]}),(()=>{if(Ne)return t("div",{"data-testid":"custom-cta",children:Ne(be,Ge)})})()]}))}));export{ie as DropdownList};
 //# sourceMappingURL=dropdown-list.js.map