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

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

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

Files changed (2348) hide show

package/cjs/select-histogram/select-histogram.js CHANGED Viewed

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

package/cjs/select-histogram/select-histogram.js.map CHANGED Viewed

	@@ -1 +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 {\n DropdownListState,\n ExpandableElement,\n} from \"../shared/dropdown-list-v2\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { LabelContainer } from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { SimpleIdGenerator } 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] = useState<string>(() => SimpleIdGenerator.generate());\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n const labelContainerRef = useRef<HTMLDivElement>(null);\n\n 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 <LabelContainer ref={labelContainerRef} $disabled={disabled}>\n {getDisplayValue()}\n </LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <InputBox\n className={className}\n data-testid={testId}\n id={id}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n $focused={focused}\n $disabled={disabled}\n $readOnly={readOnly}\n $error={error}\n >\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={internalId}\n popupRole=\"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":["_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","SimpleIdGenerator","generate","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","$focused","$disabled","$error","ExpandableElement","expanded","listboxId","popupRole","variant","LabelContainer","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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"}
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":["_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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"}

package/cjs/select-histogram/select-histogram.styles.js.map CHANGED Viewed

	@@ -1 +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 { ~~ValueLabelStyleProps~~ } from \"../shared/dropdown-~~wrapper~~/~~dropdown-wrapper.styles~~\";\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\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":"~~4MAcO~~,MAAMA,EAAmCC,EAAAA,QAAOC,GAAG;;cAE5CC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CC,EAAAA,UAAkB;qBACPC,EAAAA,UAAc;kBACjBD,EAAAA,UAAc;eACjBE,EAAAA,WAAW;;;MAGpBC,EAAAA,cAAcC,SAASC;;8BAECC,EAAAA,cAAc;;;MAGtCH,EAAAA,cAAcC,SAASG;8BACCD,EAAAA,cAAc;;;MAGtCH,EAAAA,cAAcC,SAASI;8BACCF,EAAAA,cAAc;;EAI/BG,EAAQZ,EAAAA,QAAOC,GAAG;;;EAKlBY,EAAYb,EAAAA,QAAOC,GAAG;;aAEtBE,EAAAA,UAAgB;EAGhBW,EAAad,EAAAA,QAAOC,GAAyB;MACnDc,GACoB,UAAnBA,EAAMC,SACAC,EAAAA,QAAQ,mBACRA,EAAAA,QAAQ;;MAEfF,IACC,GACS,WADDA,EAAMG,cAKN,OAAOC,KAAG;sBACJC,EAAAA,aAAa;;;EAOtBC,EAAmBrB,EAAAA,QAAOc,EAAW;aACrCX,EAAAA,UAAU;"}
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":"4MAsBO,MAAMA,EAAmCC,EAAAA,QAAOC,GAAG;;cAE5CC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CC,EAAAA,UAAkB;qBACPC,EAAAA,UAAc;kBACjBD,EAAAA,UAAc;eACjBE,EAAAA,WAAW;;;MAGpBC,EAAAA,cAAcC,SAASC;;8BAECC,EAAAA,cAAc;;;MAGtCH,EAAAA,cAAcC,SAASG;8BACCD,EAAAA,cAAc;;;MAGtCH,EAAAA,cAAcC,SAASI;8BACCF,EAAAA,cAAc;;EAI/BG,EAAQZ,EAAAA,QAAOC,GAAG;;;EAKlBY,EAAYb,EAAAA,QAAOC,GAAG;;aAEtBE,EAAAA,UAAgB;EAGhBW,EAAad,EAAAA,QAAOC,GAAyB;MACnDc,GACoB,UAAnBA,EAAMC,SACAC,EAAAA,QAAQ,mBACRA,EAAAA,QAAQ;;MAEfF,IACC,GACS,WADDA,EAAMG,cAKN,OAAOC,KAAG;sBACJC,EAAAA,aAAa;;;EAOtBC,EAAmBrB,EAAAA,QAAOc,EAAW;aACrCX,EAAAA,UAAU;"}

package/cjs/shared/accessibility/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),r=require("clsx"),t=require("react");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var s=require("../../util/version.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../util/string-helper.js"),require("./index_13g9vp.css");var i=a(r),u=a(t);const l=u.default.forwardRef((function(r,t){var{className:s}=r,a=e.__rest(r,["className"]);return u.default.createElement("span",Object.assign(Object.assign({},a),{ref:t,className:i.default("v17efraz",s)}))}));exports.VisuallyHidden=l,exports.concatIds=(...e)=>e.filter((e=>!!e)).join(" "),exports.inertValue=e=>s.isReact19()?e:e?"true":void 0;
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("clsx"),i=require("react");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var a=require("../../util/version.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer"),require("./index_13g9vp.css");var t=s(r),u=s(i);const l=u.default.forwardRef((function(r,i){var{className:a}=r,s=e.__rest(r,["className"]);return u.default.createElement("span",Object.assign(Object.assign({},s),{ref:i,className:t.default("v17efraz",a)}))}));exports.VisuallyHidden=l,exports.concatIds=(...e)=>e.filter((e=>!!e)).join(" "),exports.inertValue=e=>a.isReact19()?e:e?"true":void 0;
 //# sourceMappingURL=index.js.map

package/cjs/shared/accessibility/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/shared/accessibility/index.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { isReact19 } from \"../../util\";\n\nconst visuallyHidden = css`\n clip-path: inset(50%);\n height: 1px;\n width: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n`;\n\nexport const VisuallyHidden = React.forwardRef<\n HTMLSpanElement,\n React.HTMLAttributes<HTMLSpanElement>\n>(function VisuallyHidden({ className, ...otherProps }, ref) {\n return React.createElement(\"span\", {\n ...otherProps,\n ref,\n className: clsx(visuallyHidden, className),\n });\n});\n\n/*\n Handle compatibility of `inert` across React versions.\n * 19+ provides official support as a boolean, while it is handled as string in older versions\n */\nexport const inertValue = (value: boolean \| undefined) => {\n if (isReact19()) {\n return value;\n }\n\n return value ? \"true\" : undefined;\n};\n\nexport const concatIds = (...selectors: (string \| undefined)[]) => {\n return selectors.filter((selector) => !!selector).join(\" \");\n};\n"],"names":["VisuallyHidden","React","forwardRef","_a","ref","className","otherProps","__rest","createElement","Object","assign","clsx","concatIds","selectors","filter","selector","join","value","isReact19","undefined"],"mappings":"~~uYAMA~~,MASaA,EAAiBC,EAAAA,QAAMC,YAGlC,SAAwBC,EAA8BC,GAA9B,IAAAC,UAAEA,GAASF,EAAKG,EAAUC,EAAAA,OAAAJ,EAA1B,eACtB,OAAOF,EAAAA,QAAMO,cAAc,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GAC1BJ,GAAU,CACbF,MACAC,UAAWM,EAAAA,QAhBC,WAgBoBN,KAExC,+CAcyBO,IAAIC,IAClBA,EAAUC,QAAQC,KAAeA,IAAUC,KAAK,wBAThCC,GACnBC,EAAAA,YACOD,EAGJA,EAAQ,YAASE"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/shared/accessibility/index.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { isReact19 } from \"../../util\";\n\nconst visuallyHidden = css`\n clip-path: inset(50%);\n height: 1px;\n width: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n`;\n\nexport const VisuallyHidden = React.forwardRef<\n HTMLSpanElement,\n React.HTMLAttributes<HTMLSpanElement>\n>(function VisuallyHidden({ className, ...otherProps }, ref) {\n return React.createElement(\"span\", {\n ...otherProps,\n ref,\n className: clsx(visuallyHidden, className),\n });\n});\n\n/*\n Handle compatibility of `inert` across React versions.\n * 19+ provides official support as a boolean, while it is handled as string in older versions\n */\nexport const inertValue = (value: boolean \| undefined) => {\n if (isReact19()) {\n return value;\n }\n\n return value ? \"true\" : undefined;\n};\n\nexport const concatIds = (...selectors: (string \| undefined)[]) => {\n return selectors.filter((selector) => !!selector).join(\" \");\n};\n"],"names":["VisuallyHidden","React","forwardRef","_a","ref","className","otherProps","__rest","createElement","Object","assign","clsx","concatIds","selectors","filter","selector","join","value","isReact19","undefined"],"mappings":"+eAMA,MASaA,EAAiBC,EAAAA,QAAMC,YAGlC,SAAwBC,EAA8BC,GAA9B,IAAAC,UAAEA,GAASF,EAAKG,EAAUC,EAAAA,OAAAJ,EAA1B,eACtB,OAAOF,EAAAA,QAAMO,cAAc,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GAC1BJ,GAAU,CACbF,MACAC,UAAWM,EAAAA,QAhBC,WAgBoBN,KAExC,+CAcyBO,IAAIC,IAClBA,EAAUC,QAAQC,KAAeA,IAAUC,KAAK,wBAThCC,GACnBC,EAAAA,YACOD,EAGJA,EAAQ,YAASE"}

package/cjs/shared/clickable-icon/clickable-icon.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),r=require("./clickable-icon.style.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=u(i).default.forwardRef(((i,u)=>{var{children:n,focusHighlight:c=!0,focusOutline:l="none",type:s="button"}=i,o=e.__rest(i,["children","focusHighlight","focusOutline","type"]);return t.jsx(r.Main,Object.assign({ref:u,$outline:l,$highlight:c,type:s},o,{children:n}))}));exports.ClickableIcon=n;
+"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),i=require("react"),s=require("./clickable-icon.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(r);const u=l(i).default.forwardRef(((r,i)=>{var{children:l,className:u,focusHighlight:c=!0,focusOutline:a="none",type:o="button"}=r,f=e.__rest(r,["children","className","focusHighlight","focusOutline","type"]);return t.jsx("button",Object.assign({ref:i,className:n.default(s.main,"none"===a&&s.outlineNone,c&&s.highlight,u),type:o},f,{children:l}))}));exports.ClickableIcon=u;
 //# sourceMappingURL=clickable-icon.js.map

package/cjs/shared/clickable-icon/clickable-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"clickable-icon.js","sources":["../../../../src/shared/clickable-icon/clickable-icon.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ~~Main~~ } from \"./clickable-icon.~~style~~\";\nimport type { ClickableIconProps } from \"./types\";\n\nconst Component = (\n {\n children,\n focusHighlight = true,\n focusOutline = \"none\",\n type = \"button\",\n ...otherProps\n }: ClickableIconProps,\n ref: React.Ref<HTMLButtonElement>\n) => {\n return (\n <~~Main~~\n ref={ref}\n ~~$outline~~={focusOutline}\n ~~$highlight={focusHighlight~~}\n type={type}\n {...otherProps}\n >\n {children}\n </~~Main~~>\n );\n};\n\nexport const ClickableIcon = React.forwardRef(Component);\n"],"names":["ClickableIcon","React","forwardRef","_a","ref","children","focusHighlight","focusOutline","type","otherProps","__rest","_jsx","~~Main~~","~~Object~~","~~assign~~","$highlight"],"mappings":"~~wNAKA~~,~~MAuBaA~~,OAAgBC,QAAMC,~~YAvBjB~~,CACdC,~~EAOAC~~,~~KAPA~~,~~IAAAC,~~SACIA,EAAQC,~~eACRA~~,GAAiB,EAAIC,aACrBA,EAAe,OAAMC,KACrBA,EAAO,~~UAAQL~~,~~EACZM~~,EAAUC,EAAAA,~~OAAAP~~,~~EALjB~~,~~qDASA~~,~~OACIQ~~,~~EAAAA~~,~~IAACC~~,~~EAAAA,KAAIC,~~OAAAC,OAAA,~~CACDV~~,IAAKA,~~WACKG~~,~~EAAYQ~~,~~WACVT~~,~~EACZE~~,KAAMA,GACFC,~~EAAU~~,~~CAAAJ,SAEbA,IACE~~"}
1	+ {"version":3,"file":"clickable-icon.js","sources":["../../../../src/shared/clickable-icon/clickable-icon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./clickable-icon.styles\";\nimport type { ClickableIconProps } from \"./types\";\n\nconst Component = (\n {\n children,\n className,\n focusHighlight = true,\n focusOutline = \"none\",\n type = \"button\",\n ...otherProps\n }: ClickableIconProps,\n ref: React.Ref<HTMLButtonElement>\n) => {\n return (\n <button\n ref={ref}\n className={clsx(\n styles.main,\n focusOutline === \"none\" && styles.outlineNone,\n focusHighlight && styles.highlight,\n className\n )}\n type={type}\n {...otherProps}\n >\n {children}\n </button>\n );\n};\n\nexport const ClickableIcon = React.forwardRef(Component);\n"],"names":["ClickableIcon","React","forwardRef","_a","ref","children","className","focusHighlight","focusOutline","type","otherProps","__rest","_jsx","Object","assign","clsx","styles.main","styles.outlineNone","styles.highlight"],"mappings":"sPAMA,MA4BaA,OAAgBC,QAAMC,YA5BjB,CACdC,EAQAC,SARAC,SACIA,EAAQC,UACRA,EAASC,eACTA,GAAiB,EAAIC,aACrBA,EAAe,OAAMC,KACrBA,EAAO,UAAQN,EACZO,EAAUC,EAAAA,OAAAR,EANjB,iEAUA,OACIS,MAAA,SAAAC,OAAAC,OAAA,CACIV,IAAKA,EACLE,UAAWS,UACPC,EAAAA,KACiB,SAAjBR,GAA2BS,EAAAA,YAC3BV,GAAkBW,EAAAA,UAClBZ,GAEJG,KAAMA,GACFC,YAEHL,IACI"}

package/cjs/shared/clickable-icon/clickable-icon.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./clickable-icon.styles_1v2imml.css");exports.highlight="hv69up9",exports.main="m18ljjag",exports.outlineNone="o1plr5dj";
2	+ //# sourceMappingURL=clickable-icon.styles.js.map

package/cjs/shared/clickable-icon/clickable-icon.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"clickable-icon.styles.js","sources":["../../../../src/shared/clickable-icon/clickable-icon.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../../theme\";\n\nexport const main = css`\n display: flex;\n justify-content: center;\n align-items: center;\n padding: ${Spacing[\"spacing-24\"]};\n background-color: transparent;\n border: none;\n cursor: pointer;\n\n img {\n height: 1rem;\n width: 1rem;\n }\n\n svg {\n height: 1.125rem;\n width: 1.125rem;\n }\n`;\n\nexport const outlineNone = css`\n &:active,\n &:focus {\n outline: none;\n }\n`;\n\nexport const highlight = css`\n &:active,\n &:focus {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n`;\n"],"names":[],"mappings":"mHA+BsB,uBA3BL,+BAoBO"}

package/cjs/shared/clickable-icon/clickable-icon.styles_1v2imml.css ADDED Viewed

@@ -0,0 +1,3 @@
+.m18ljjag{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--fds-spacing-24);background-color:transparent;border:none;cursor:pointer;}.m18ljjag img{height:1rem;width:1rem;}.m18ljjag svg{height:1.125rem;width:1.125rem;}
+.o1plr5dj:active,.o1plr5dj:focus{outline:none;}
+.hv69up9:active,.hv69up9:focus{background-color:var(--fds-colour-bg-hover-neutral);}

package/cjs/shared/component-loading-spinner/component-loading-spinner.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var n=require("react/jsx-runtime"),e=require("./component-loading-spinner.style.js");exports.ComponentLoadingSpinner=({color:i,className:r,size:s})=>n.jsxs(e.OuterRing,{className:r,$size:s,$color:i,"data-testid":"component-loading-spinner",children:[n.jsx(e.InnerRing1,{id:"inner1"}),n.jsx(e.InnerRing2,{id:"inner2"}),n.jsx(e.InnerRing3,{id:"inner3"}),n.jsx(e.InnerRing4,{id:"inner4"})]});
+"use strict";var e=require("../../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("clsx"),r=require("react"),s=require("../../theme/utils/use-apply-styles.js");require("../../theme/theme-provider/context.js");var t=require("./component-loading-spinner.styles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(i);exports.ComponentLoadingSpinner=i=>{var{color:a,className:o,size:u}=i,d=e.__rest(i,["color","className","size"]);const c=r.useRef(null);return s.useApplyStyle(c,{[t.tokens.rootSize]:u?`${u}px`:void 0,[t.tokens.rootColour]:a}),n.jsxs("div",Object.assign({ref:c,className:l.default(t.outerRing,o)},d,{"data-testid":"component-loading-spinner",children:[n.jsx("div",{id:"inner1",className:t.innerRing}),n.jsx("div",{id:"inner2",className:l.default(t.innerRing,t.innerRing2)}),n.jsx("div",{id:"inner3",className:l.default(t.innerRing,t.innerRing3)}),n.jsx("div",{id:"inner4",className:l.default(t.innerRing,t.innerRing4)})]}))};
 //# sourceMappingURL=component-loading-spinner.js.map

package/cjs/shared/component-loading-spinner/component-loading-spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"component-loading-spinner.js","sources":["../../../../src/shared/component-loading-spinner/component-loading-spinner.tsx"],"sourcesContent":["import {\n ~~InnerRing1,\n InnerRing2,\n InnerRing3,\n InnerRing4,\n OuterRing,\n~~} from \"./component-loading-spinner.~~style~~\";\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 color can be customised via the prop or through ~~styled-components~~.\n \n Example:\n * ```\n * ~~styled(ComponentLoadingSpinner)~~`\n * color: red;\n * `\n * ~~```\~~n /\nexport ~~interface~~ ~~ComponentLoadingSpinnerProps~~ {~~\n className?:~~ ~~string \| undefined;\~~n /* ~~Measurement~~ ~~in px /\~~n ~~size?:~~ ~~number \| undefined;\n /* rgb/hex value or Color token~~ */\~~n color?: string \| ((props: any) => string) \| undefined;\n}\n\~~nexport const ComponentLoadingSpinner = ({\n color,\n className,\n size,\n}: ComponentLoadingSpinnerProps): JSX.Element => {\n return (\n <~~OuterRing~~\n ~~className~~={~~className~~}\n ~~$size~~={~~size~~}\n ~~$color=~~{~~color~~}\n data-testid={\"component-loading-spinner\"}\n >\n <~~InnerRing1~~ id=\"inner1\" />\n <~~InnerRing2~~ id=\"inner2\" />\n <~~InnerRing3~~ id=\"inner3\" />\n <~~InnerRing4~~ id=\"inner4\" />\n </~~OuterRing~~>\n );\n};\n"],"names":["color","className","size","_jsxs","~~OuterRing~~","~~$color~~","~~_jsx~~","~~InnerRing1~~","id","~~InnerRing2~~","~~InnerRing3~~","~~InnerRing4~~"],"mappings":"~~kIA+BuC~~,~~EACnCA~~,~~QACAC~~,~~YACAC~~,~~UAGIC~~,EAAAA,~~KAACC~~,EAAAA,~~UAAS~~,~~CACNH~~,~~UAAWA~~,~~QACJC~~,~~EAAIG~~,~~OACHL~~,~~EAAK~~,~~cACA~~,~~sCAEbM~~,EAAAA,~~IAACC~~,~~cAAWC~~,GAAG,~~WACfF~~,EAAAA,~~IAACG~~,EAAAA,~~WAAU~~,~~CAACD~~,GAAG,~~WACfF~~,EAAAA,~~IAACI~~,EAAAA,~~WAAU~~,~~CAACF~~,GAAG,~~WACfF~~,EAAAA,~~IAACK~~,EAAAA,~~WAAU~~,~~CAACH~~,~~GAAG~~"}
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":["_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":"yYAkCwCA,QAAAC,MACpCA,EAAKC,UACLA,EAASC,KACTA,KACGC,EAAUC,EAAAA,OAAAL,EAJuB,CAAA,QAAA,YAAA,SAMpC,MAAMM,EAAaC,EAAAA,OAAuB,MAM1C,OALAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,EAAAA,OAAcC,UAAWP,EAAO,GAAGA,WAAWQ,EAC/C,CAACF,EAAAA,OAAcG,YAAaX,IAI5BY,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKV,EACLJ,UAAWe,EAAAA,QAAKC,EAAAA,UAAkBhB,IAC9BE,iBACS,4BAA2Be,SAAA,CAExCC,EAAAA,WAAKC,GAAG,SAASnB,UAAWoB,EAAAA,YAC5BF,EAAAA,WACIC,GAAG,SACHnB,UAAWe,EAAAA,QAAKK,YAAkBC,EAAAA,cAEtCH,MAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAAA,QAAKK,EAAAA,UAAkBE,gBAEtCJ,EAAAA,IAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAAA,QAAKK,EAAAA,UAAkBG,EAAAA,iBAEpC"}

package/cjs/shared/component-loading-spinner/component-loading-spinner.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./component-loading-spinner.styles_15eq02i.css");exports.innerRing="i5p5ltp",exports.innerRing2="i1trawld",exports.innerRing3="iav978u",exports.innerRing4="i1fnvvih",exports.outerRing="oqwr3hs",exports.tokens={rootSize:"--fds-internal-componentLoadingSpinner-root-size",rootColour:"--fds-internal-componentLoadingSpinner-root-colour"};
2	+ //# sourceMappingURL=component-loading-spinner.styles.js.map

package/cjs/shared/component-loading-spinner/component-loading-spinner.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"component-loading-spinner.styles.js","sources":["../../../../src/shared/component-loading-spinner/component-loading-spinner.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const tokens = {\n rootSize: \"--fds-internal-componentLoadingSpinner-root-size\",\n rootColour: \"--fds-internal-componentLoadingSpinner-root-colour\",\n} as const;\n\nexport const outerRing = css`\n display: inline-block;\n position: relative;\n width: var(${tokens.rootSize}, 1em);\n height: var(${tokens.rootSize}, 1em);\n color: var(${tokens.rootColour}, currentColor);\n`;\n\nexport const innerRing = css`\n box-sizing: border-box;\n display: block;\n position: absolute;\n top: 1px;\n width: calc(100% - 2px);\n height: calc(100% - 2px);\n border-width: 2px;\n border-style: solid;\n border-radius: 100%;\n border-color: currentColor transparent transparent transparent;\n animation: component-loading-spinner-rotate 1.2s\n cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n @keyframes component-loading-spinner-rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n`;\n\nexport const innerRing2 = css`\n animation-delay: -0.45s;\n`;\n\nexport const innerRing3 = css`\n animation-delay: -0.3s;\n`;\n\nexport const innerRing4 = css`\n animation-delay: -0.15s;\n`;\n"],"names":["rootSize","rootColour"],"mappings":"yIAesB,6BAyBC,8BAIA,6BAIA,6BAzCD,yBALA,CAClBA,SAAU,mDACVC,WAAY"}

package/cjs/shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css ADDED Viewed

@@ -0,0 +1,5 @@
+.oqwr3hs{display:inline-block;position:relative;width:var(--fds-internal-componentLoadingSpinner-root-size, 1em);height:var(--fds-internal-componentLoadingSpinner-root-size, 1em);color:var(--fds-internal-componentLoadingSpinner-root-colour, currentColor);}
+.i5p5ltp{box-sizing:border-box;display:block;position:absolute;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);border-width:2px;border-style:solid;border-radius:100%;border-color:currentColor transparent transparent transparent;-webkit-animation:component-loading-spinner-rotate-i5p5ltp 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;animation:component-loading-spinner-rotate-i5p5ltp 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;}@-webkit-keyframes component-loading-spinner-rotate-i5p5ltp{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes component-loading-spinner-rotate-i5p5ltp{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+.i1trawld{-webkit-animation-delay:-0.45s;animation-delay:-0.45s;}
+.iav978u{-webkit-animation-delay:-0.3s;animation-delay:-0.3s;}
+.i1fnvvih{-webkit-animation-delay:-0.15s;animation-delay:-0.15s;}

package/cjs/shared/dropdown-list/dropdown-label.js ADDED Viewed

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

package/cjs/shared/dropdown-list/dropdown-label.js.map ADDED Viewed

@@ -0,0 +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":["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":"opBAuB6B,EACzBA,OACAC,cAAc,SACdC,QACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EACU,UAAZD,EACME,EAAAA,KAAKC,KAAK,gBACVD,EAAAA,KAAKC,KAAK,sBACdC,EAAaF,EAAAA,KAAKC,KAAK,gBACvBE,IAAEA,EAAGC,MAAEA,GAAUC,sBAEjBC,EAAiBC,EAAAA,OAAuB,MACxCC,EAAmBD,EAAAA,OAAuB,MAEhDE,EAAAA,cAAcH,EAAgB,CAC1B,CAACI,EAAAA,OAAcC,YAAYlB,UAAWmB,OAAOnB,KAGjDgB,EAAAA,cAAcD,EAAkB,CAC5B,CAACE,EAAAA,OAAcG,cAAcpB,UAAWmB,OAAOnB,KAMnD,MAAMqB,EAAuBC,eACxBC,IACG,GAAoB,WAAhB1B,IAA6Bc,EAC7B,OAAO,EAaX,OAPkBa,eAAaC,aAC3BF,EACA,GAAGjB,MAAaG,MAKDE,EAAQ,EAAE,GAEjC,CAACA,EAAOd,EAAaS,EAAUG,IAM7BiB,EAAsBC,EAAAA,SACxB,IAAMN,EAAqBvB,IAC3B,CAACuB,EAAsBvB,IAErB8B,EAAsBD,WACxB,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,OAAAC,EAAAA,SAAA,CAAAC,SAAA,CACK1C,EAAM2C,MAAM,EAAGP,GAChBQ,EAAAA,IAAA,OAAA,CAAMC,UAAWC,EAAAA,YAAkBJ,SAC9B1C,EAAM2C,MAAMP,EAAYE,KAE5BtC,EAAM2C,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIE,EAAAA,IAAA,MAAA,CACIC,UAAWG,EAAAA,QACPC,EAAAA,kBACAC,oBACa,IAAbhD,GAAkBiD,EAAAA,oBACrB,eAAA,EAAAT,SAGAV,EAAkBP,KAEvBmB,EAAAA,IAAA,MAAA,CACIC,UAAWG,EAAAA,QACPC,EAAAA,kBACAG,EAAAA,mBACa,IAAblD,GAAkBiD,EAAAA,oBACrB,eAAA,EAAAT,SAGAV,EAAkBP,QAMnC,OACIe,EAAAA,KAAA,MAAA,CACI5B,IAAKA,EACLiC,UAAWG,EAAAA,QACPK,EAAAA,MACY,UAAZ9C,GAAuB+C,EAAAA,kBACH,cAApBvB,GAAmCwB,EAAAA,eACtCb,SAAA,CAEDE,EAAAA,WACIhC,IAAKG,EAAc,aACPf,EACZ6C,UAAWG,EAAAA,QACPQ,cACA1D,GAAQ2D,EAAAA,gBACRrD,GAAYsD,EAAAA,qBACXtD,GAAYD,GAAYwD,EAAAA,oBACL,WAApB5B,GACI6B,EAAAA,uBACe,QAAnBtD,GAA4BuD,EAAAA,wBAC/BnB,SAEmB,WAAnBpC,GAA+BsB,EAC1BmB,EAAoB/C,GACpBgC,EAAkBhC,KAE3BK,GACGuC,EAAAA,IAAA,MAAA,CACIhC,IAAKK,EAAgB,aACTZ,EACZwC,UAAWG,EAAAA,QACPc,EAAAA,cACoB,WAApB/B,GACIgC,EAAAA,yBACe,QAAnBzD,GACI0D,EAAAA,yBACY,cAAhBjE,EACMkE,EAAAA,sBACAC,EAAAA,8BAGU,WAAnB5D,GAA+BwB,EAC1BiB,EAAoB1C,GACpBA,MAGZ"}

package/cjs/shared/dropdown-list/dropdown-label.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./dropdown-label.styles_1dwmd8f.css");exports.baseTruncateStyle="b1tiox0q",exports.label="lkpcujm",exports.labelNextLine="l5tt4mi",exports.labelVariantSmall="l4129ag",exports.matchedText="m7dzxku",exports.primaryText="pi58ntt",exports.primaryTextBold="p1wtg030",exports.primaryTextDisabled="pp0vhoy",exports.primaryTextLabelInline="p1nofioz",exports.primaryTextSelected="p4cirxp",exports.primaryTextTruncateEnd="przdrhy",exports.secondaryText="s3fwc7p",exports.secondaryTextInline="swx1e24",exports.secondaryTextLabelInline="s1kq4iiq",exports.secondaryTextNextLine="s132gi2y",exports.secondaryTextTruncateEnd="s1jjyg61",exports.tokens={primaryText:{maxLines:"--fds-internal-dropdownLabel-primaryText-maxLines"},secondaryText:{maxLines:"--fds-internal-dropdownLabel-secondaryText-maxLines"}},exports.truncateFirstLine="t1y8fzo0",exports.truncateLineSingle="tgn5sfi",exports.truncateSecondLine="t18n9ljk";
2	+ //# sourceMappingURL=dropdown-label.styles.js.map

package/cjs/shared/dropdown-list/dropdown-label.styles.js.map ADDED Viewed

@@ -0,0 +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":["primaryText","maxLines","secondaryText"],"mappings":"0HA0G8B,yBApBZ,gCAYQ,oCAJI,8BAfN,8BA1DA,kCAOI,uCAQI,yCAIG,uCARH,yCAYG,gCAQT,sCAUM,2CAIK,yCARH,4CAaG,0BAlEf,CAClBA,YAAa,CACTC,SAAU,qDAEdC,cAAe,CACXD,SAAU,kFAuGY,sCAWC,qCAPA"}

package/cjs/shared/dropdown-list/dropdown-label.styles_1dwmd8f.css ADDED Viewed

@@ -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);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);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);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);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/cjs/shared/dropdown-list/dropdown-list-state.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dropdown-list-state.js","sources":["../../../../src/shared/dropdown-list/dropdown-list-state.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\ninterface DropdownListStateProps {\n children: React.ReactNode;\n}\n\ninterface DropdownListStateContextProps {\n focusedIndex: number;\n setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;\n}\n\nexport const DropdownListStateContext =\n React.createContext<DropdownListStateContextProps>({\n focusedIndex: -1,\n setFocusedIndex: () => {\n // do nothing\n },\n });\n\nexport const DropdownListState = ({ children }: DropdownListStateProps) => {\n const [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\n return (\n <DropdownListStateContext.Provider\n value={{\n focusedIndex,\n setFocusedIndex,\n }}\n >\n {children}\n </DropdownListStateContext.Provider>\n );\n};\n"],"names":["DropdownListStateContext","React","createContext","focusedIndex","setFocusedIndex","children","useState","_jsx","Provider","value"],"mappings":"2IAWO,MAAMA,OACTC,QAAMC,cAA6C,CAC/CC,cAAc,EACdC,gBAAiB,mCAKQ,EAAGC,eAChC,MAAOF,EAAcC,GAAmBE,EAAAA,UAAiB,GAEzD,OACIC,MAACP,EAAyBQ,SAAQ,CAC9BC,MAAO,CACHN,eACAC,mBACHC,SAEAA,GAC+B"}

package/cjs/shared/dropdown-list/dropdown-list.js ADDED Viewed

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

package/cjs/shared/dropdown-list/dropdown-list.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dropdown-list.js","sources":["../../../../src/shared/dropdown-list/dropdown-list.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareFillIcon } from \"@lifesg/react-icons/square-fill\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport find from \"lodash/find\";\nimport isEqual from \"lodash/isEqual\";\nimport type React from \"react\";\nimport {\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport type { VirtuosoHandle } from \"react-virtuoso\";\nimport { Virtuoso } from \"react-virtuoso\";\n\nimport { Markup } from \"../../markup\";\nimport { useApplyStyle } from \"../../theme\";\nimport {\n mergeRefs,\n useCompare,\n useEvent,\n useEventListener,\n useIsMounted,\n} from \"../../util\";\nimport { VisuallyHidden } from \"../accessibility\";\nimport { ComponentLoadingSpinner } from \"../component-loading-spinner\";\nimport { useDropdownRender } from \"../dropdown-wrapper\";\nimport { BasicButton } from \"../input-wrapper\";\nimport { DropdownLabel } from \"./dropdown-label\";\nimport * as styles from \"./dropdown-list.styles\";\nimport { DropdownListStateContext } from \"./dropdown-list-state\";\nimport { DropdownSearch } from \"./dropdown-search\";\nimport type {\n DropdownListApi,\n DropdownListProps,\n ListItemDisplayProps,\n} from \"./types\";\nimport { VirtuosoItem, VirtuosoList } from \"./virtuoso-components\";\n\n/**\n * NOTE: This component is not directly exportable but forms part of a component\n */\nconst DropdownListInner = <T, V>(\n {\n listItems,\n multiSelect,\n maxSelectable,\n selectedItems,\n disableItemFocus,\n itemsLoadState = \"success\",\n itemTruncationType = \"end\",\n itemMaxLines = 2,\n labelDisplayType = \"inline\",\n variant = \"default\",\n listboxId,\n ariaLabel,\n matchElementWidth = false,\n width,\n topScrollItem,\n onSelectItem,\n onSelectAll,\n onDismiss,\n onRetry,\n /* DropdownDisplayProps */\n valueExtractor,\n listExtractor,\n renderListItem,\n renderCustomCallToAction,\n /* DropdownSearchProps */\n enableSearch,\n hideNoResultsDisplay,\n noResultsDescription: _noResultsDescription,\n customLabels,\n searchPlaceholder: _searchPlaceholder,\n searchFunction,\n onSearch,\n }: DropdownListProps<T, V>,\n ref: React.ForwardedRef<DropdownListApi>\n): JSX.Element => {\n // =========================================================================\n // CONST, REF, STATE\n // =========================================================================\n const {\n noResultsLabel = \"No results found.\",\n selectAllButtonLabel = \"Select all\",\n clearAllButtonLabel = \"Clear all\",\n } = customLabels || {};\n const searchPlaceholder =\n customLabels?.searchPlaceholder || _searchPlaceholder || \"Search\";\n const noResultsDescription =\n customLabels?.noResultsDescription || _noResultsDescription;\n const { focusedIndex, setFocusedIndex } = useContext(\n DropdownListStateContext\n );\n const {\n elementWidth,\n setFloatingRef,\n getFloatingProps,\n styles: floatingStyles,\n } = useDropdownRender();\n const [searchValue, setSearchValue] = useState<string>(\"\");\n const [displayListItems, setDisplayListItems] = useState(listItems ?? []);\n const itemsLoadStateChanged = useCompare(itemsLoadState);\n const mounted = useIsMounted();\n\n const nodeRef = useRef<HTMLDivElement | null>(null);\n const listItemRefs = useRef<(HTMLElement | null)[]>([]);\n const searchInputRef = useRef<HTMLInputElement>(null);\n const virtuosoRef = useRef<VirtuosoHandle>(null);\n\n const hasSelectedMax =\n !!maxSelectable &&\n !!selectedItems &&\n selectedItems?.length === maxSelectable;\n\n let containerWidthStyle = {};\n if (width) {\n containerWidthStyle = {\n [styles.tokens.containerWidth]: `${width}px`,\n [styles.tokens.containerMinWidth]: `0px`,\n };\n } else if (matchElementWidth && elementWidth) {\n containerWidthStyle = {\n [styles.tokens.containerWidth]: `${elementWidth}px`,\n [styles.tokens.containerMinWidth]: `${elementWidth}px`,\n };\n }\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const getValue = (item: T): V => {\n return valueExtractor ? valueExtractor(item) : (item as unknown as V);\n };\n\n const getItemKey = (item: T, index: number) => {\n const formattedValue = valueExtractor ? valueExtractor(item) : item;\n return `item_${index}__${formattedValue}`;\n };\n\n const getOptionLabel = (item: T): ListItemDisplayProps => {\n const value = listExtractor ? listExtractor(item) : item?.toString();\n\n if (typeof value === \"object\") {\n return { title: value.title, secondaryLabel: value.secondaryLabel };\n }\n\n return { title: value ?? \"\" };\n };\n\n const checkListItemSelected = useCallback(\n (item: T): boolean => {\n return !!find(selectedItems, (arrItem) => {\n return isEqual(arrItem, item);\n });\n },\n [selectedItems]\n );\n\n const filterItemsByCustomSearch = useEvent(() => {\n return searchFunction?.(searchValue);\n });\n\n const filterItemsByLabel = useEvent(() => {\n return listItems?.filter((item) => {\n const { title, secondaryLabel } = getOptionLabel(item);\n const updatedSearchValue = searchValue.trim().toLowerCase();\n return (\n title.toLowerCase().includes(updatedSearchValue) ||\n (secondaryLabel &&\n secondaryLabel.toLowerCase().includes(updatedSearchValue))\n );\n });\n });\n\n const refocus = useCallback(\n (opts?: { index?: number; preferSelected?: boolean }) => {\n if (disableItemFocus) return;\n\n if (searchInputRef.current) {\n setFocusedIndex(-1);\n setTimeout(() => searchInputRef.current?.focus(), 0);\n return;\n }\n\n const items = displayListItems ?? [];\n if (items.length === 0) return;\n\n if (opts?.index !== undefined) {\n const forced = Math.max(\n 0,\n Math.min(opts.index, items.length - 1)\n );\n virtuosoRef.current?.scrollToIndex({\n index: forced,\n align: \"center\",\n });\n setFocusedIndex(forced);\n setTimeout(() => listItemRefs.current[forced]?.focus(), 0);\n\n return;\n }\n\n const selectedIndex = opts?.preferSelected\n ? items.findIndex((item) => checkListItemSelected(item))\n : -1;\n\n const nextIndex =\n selectedIndex !== -1\n ? selectedIndex\n : focusedIndex >= 0 && focusedIndex < items.length\n ? focusedIndex\n : 0;\n\n virtuosoRef.current?.scrollToIndex({\n index: nextIndex,\n align: \"center\",\n });\n setFocusedIndex(nextIndex);\n setTimeout(() => listItemRefs.current[nextIndex]?.focus(), 0);\n },\n [\n checkListItemSelected,\n disableItemFocus,\n displayListItems,\n focusedIndex,\n setFocusedIndex,\n ]\n );\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleKeyboardPress = (event: KeyboardEvent) => {\n switch (event.code) {\n case \"ArrowDown\":\n event.preventDefault();\n if (focusedIndex < displayListItems.length - 1) {\n const upcomingIndex = focusedIndex + 1;\n listItemRefs.current[upcomingIndex]?.focus();\n setFocusedIndex(upcomingIndex);\n }\n break;\n case \"ArrowUp\":\n event.preventDefault();\n if (focusedIndex > 0) {\n const upcomingIndex = focusedIndex - 1;\n listItemRefs.current[upcomingIndex]?.focus();\n setFocusedIndex(upcomingIndex);\n } else if (focusedIndex === 0 && searchInputRef.current) {\n searchInputRef.current.focus();\n setFocusedIndex(-1);\n }\n break;\n case \"Space\":\n case \"Enter\":\n if (\n document.activeElement ===\n listItemRefs.current[focusedIndex]\n ) {\n event.preventDefault();\n if (displayListItems[focusedIndex]) {\n handleListItemClick(\n displayListItems[focusedIndex],\n focusedIndex\n );\n }\n }\n break;\n default:\n break;\n }\n };\n\n const handleListItemClick = (item: T, upcomingIndex: number) => {\n if (hasSelectedMax && !checkListItemSelected(item)) return;\n setFocusedIndex(upcomingIndex);\n onSelectItem?.(item, getValue(item));\n };\n\n const handleListItemHover = (index: number) => setFocusedIndex(index);\n\n const handleSearchInputChange = (\n event: React.ChangeEvent<HTMLInputElement>\n ) => {\n const value = event.target.value;\n setSearchValue(value);\n onSearch?.();\n };\n\n const handleOnClear = () => {\n setSearchValue(\"\");\n searchInputRef.current?.focus();\n onSearch?.();\n };\n\n const handleTryAgain = () => onRetry?.();\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEventListener(\"keydown\", handleKeyboardPress);\n useImperativeHandle(ref, () => ({ refocus }), [refocus]);\n\n useEffect(() => {\n if (!topScrollItem) {\n virtuosoRef.current?.scrollTo({ top: 0 });\n return;\n }\n const timer = setTimeout(() => {\n if (!listItems) return;\n\n const index = listItems.indexOf(topScrollItem);\n if (virtuosoRef.current && index !== -1) {\n virtuosoRef.current.scrollToIndex({ index });\n setFocusedIndex(index);\n }\n }, 0);\n\n return () => clearTimeout(timer);\n }, [listItemRefs, listItems, setFocusedIndex, topScrollItem]);\n\n useEffect(() => {\n if (disableItemFocus) return;\n if (!mounted || !itemsLoadStateChanged) return;\n\n if (itemsLoadState === \"success\") {\n if (searchInputRef.current) {\n setFocusedIndex(-1);\n searchInputRef.current.focus();\n }\n }\n }, [\n mounted,\n itemsLoadStateChanged,\n itemsLoadState,\n setFocusedIndex,\n disableItemFocus,\n ]);\n\n useEffect(() => {\n const filterItems = () => {\n if (searchValue === \"\") {\n return listItems;\n } else if (searchFunction) {\n return filterItemsByCustomSearch();\n } else {\n return filterItemsByLabel();\n }\n };\n\n setDisplayListItems(filterItems() ?? []);\n }, [\n filterItemsByCustomSearch,\n filterItemsByLabel,\n listItems,\n searchFunction,\n searchValue,\n ]);\n\n useEffect(() => {\n if (mounted) {\n return;\n }\n\n if (disableItemFocus || !listItems) return;\n\n const index = listItems.findIndex((item) =>\n checkListItemSelected(item)\n );\n\n if (searchInputRef.current) {\n setFocusedIndex(-1);\n setTimeout(() => searchInputRef.current?.focus(), 200);\n } else if (focusedIndex > 0) {\n virtuosoRef.current?.scrollToIndex({\n index: focusedIndex,\n align: \"center\",\n });\n setTimeout(() => listItemRefs.current[focusedIndex]?.focus(), 200);\n } else if (index !== -1) {\n virtuosoRef.current?.scrollToIndex({ index, align: \"center\" });\n setFocusedIndex(index);\n setTimeout(() => listItemRefs.current[index]?.focus(), 200);\n } else {\n virtuosoRef.current?.scrollToIndex({ index: 0 });\n setFocusedIndex(0);\n setTimeout(() => listItemRefs.current[0]?.focus(), 200);\n }\n }, [\n checkListItemSelected,\n disableItemFocus,\n focusedIndex,\n listItems,\n mounted,\n setFocusedIndex,\n ]);\n\n // =========================================================================\n // APPLY STYLES\n // =========================================================================\n\n useApplyStyle(nodeRef, {\n ...containerWidthStyle,\n });\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderListItemIcon = (selected: boolean) => {\n if (multiSelect) {\n if (hasSelectedMax && !selected) {\n return (\n <SquareFillIcon\n aria-hidden\n className={clsx(\n styles.baseCheckboxIndicatorStyle,\n styles.checkboxDisabledIndicator\n )}\n />\n );\n }\n\n return selected ? (\n <SquareTickFillIcon\n aria-hidden\n className={clsx(\n styles.baseCheckboxIndicatorStyle,\n styles.checkboxSelectedIndicator\n )}\n />\n ) : (\n <SquareIcon\n aria-hidden\n className={clsx(\n styles.baseCheckboxIndicatorStyle,\n styles.checkboxUnselectedIndicator\n )}\n />\n );\n }\n\n return selected ? (\n <TickIcon\n aria-hidden\n className={clsx(\n styles.baseIndicatorStyle,\n styles.selectedIndicator\n )}\n />\n ) : (\n <div className={styles.baseIndicatorStyle} />\n );\n };\n\n const renderDropdownLabel = (item: T, selected: boolean) => {\n const { title, secondaryLabel } = getOptionLabel(item);\n\n return (\n <DropdownLabel\n displayType={labelDisplayType}\n label={title}\n maxLines={itemMaxLines}\n selected={selected}\n disabled={!selected && hasSelectedMax}\n sublabel={secondaryLabel}\n truncationType={itemTruncationType}\n variant={variant}\n />\n );\n };\n\n const renderItem = (item: T, index: number) => {\n if (!onRetry || itemsLoadState === \"success\") {\n const selected = checkListItemSelected(item);\n const active = index === focusedIndex;\n const disabled = !selected && hasSelectedMax;\n return (\n <li\n aria-selected={selected}\n aria-multiselectable={multiSelect}\n aria-disabled={disabled}\n aria-posinset={index + 1}\n aria-setsize={displayListItems?.length}\n data-testid=\"list-item\"\n key={getItemKey(item, index)}\n onClick={() => handleListItemClick(item, index)}\n onMouseEnter={() => handleListItemHover(index)}\n ref={(element) => {\n listItemRefs.current[index] = element;\n }}\n role=\"option\"\n tabIndex={active ? 0 : -1}\n className={clsx(\n styles.listItem,\n (disabled && styles.listItemDisabled) ||\n (active &&\n selected &&\n styles.listItemActiveSelected) ||\n (active && styles.listItemActive)\n )}\n >\n {renderListItem ? (\n renderListItem(item, { selected })\n ) : (\n <>\n {renderListItemIcon(selected)}\n {renderDropdownLabel(item, selected)}\n </>\n )}\n </li>\n );\n }\n };\n\n const renderSearchInput = () => {\n if ((enableSearch || searchFunction) && itemsLoadState === \"success\") {\n return (\n <DropdownSearch\n ref={searchInputRef}\n onChange={handleSearchInputChange}\n value={searchValue}\n placeholder={searchPlaceholder}\n data-testid=\"search-input\"\n aria-label=\"Enter text to search\"\n onClear={handleOnClear}\n variant={variant}\n />\n );\n }\n };\n\n const renderSelectAll = () => {\n if (\n selectedItems &&\n multiSelect &&\n displayListItems.length > 0 &&\n !searchValue &&\n itemsLoadState === \"success\"\n ) {\n return (\n <div className={styles.selectAllContainer}>\n <BasicButton\n onClick={onSelectAll}\n type=\"button\"\n className={clsx(\n styles.baseButton,\n styles.selectAllButton\n )}\n >\n {maxSelectable || selectedItems.length !== 0\n ? clearAllButtonLabel\n : selectAllButtonLabel}\n </BasicButton>\n </div>\n );\n }\n };\n\n const renderNoResults = () => {\n if (\n !hideNoResultsDisplay &&\n (searchValue || !enableSearch) &&\n displayListItems.length === 0 &&\n itemsLoadState === \"success\"\n ) {\n return (\n <>\n <div\n data-testid=\"list-no-results\"\n className={styles.resultStateContainer}\n >\n <ExclamationCircleFillIcon\n data-testid=\"no-result-icon\"\n className={styles.labelIcon}\n />\n {noResultsLabel}\n </div>\n {noResultsDescription && (\n <Markup\n data-testid=\"no-result-desc\"\n className={styles.noResultDescContainer}\n >\n {noResultsDescription}\n </Markup>\n )}\n </>\n );\n }\n };\n\n const renderLoading = () => {\n if (onRetry && itemsLoadState === \"loading\") {\n return (\n <div\n data-testid=\"list-loading\"\n className={styles.resultStateContainer}\n >\n <ComponentLoadingSpinner className={styles.spinner} />\n Loading...\n </div>\n );\n }\n };\n\n const renderTryAgain = () => {\n if (onRetry && itemsLoadState === \"fail\") {\n return (\n <div\n data-testid=\"list-fail\"\n className={styles.resultStateContainer}\n >\n <ExclamationCircleFillIcon\n data-testid=\"load-error-icon\"\n className={styles.labelIcon}\n />\n Failed to load. \n <BasicButton\n onClick={handleTryAgain}\n type=\"button\"\n className={clsx(\n styles.baseButton,\n styles.tryAgainButton\n )}\n >\n Try again.\n </BasicButton>\n </div>\n );\n }\n };\n\n const renderVirtualisedList = () => {\n const isTestEnv = process.env.NODE_ENV === \"test\";\n\n return (\n <Virtuoso\n ref={virtuosoRef}\n style={{ height: \"100%\" }}\n data={displayListItems}\n customScrollParent={nodeRef.current ?? undefined}\n itemContent={(index, item) => renderItem(item, index)}\n components={{\n List: VirtuosoList,\n Item: VirtuosoItem,\n }}\n context={{\n listProps: {\n id: listboxId,\n role: \"listbox\",\n \"aria-multiselectable\": multiSelect,\n },\n listItemProps: {\n role: \"none\",\n },\n }}\n // disable virtualisation in tests\n // https://github.com/petyosi/react-virtuoso/issues/26#issuecomment-1040316576\n // explicitly set the `key` prop to avoid React warning\n key={isTestEnv ? displayListItems.length : undefined}\n // omit the `initialItemCount` prop to resolve NaN error\n {...(isTestEnv\n ? {\n initialItemCount: displayListItems.length,\n }\n : {})}\n />\n );\n };\n\n const renderList = () => {\n return (\n <div\n data-testid=\"dropdown-list\"\n role=\"group\"\n aria-label={ariaLabel}\n className={styles.list}\n >\n {renderSearchInput()}\n {renderSelectAll()}\n {renderNoResults()}\n {renderLoading()}\n {renderTryAgain()}\n {renderVirtualisedList()}\n </div>\n );\n };\n\n const renderBottomCta = () => {\n if (!renderCustomCallToAction) {\n return;\n }\n\n return (\n <div data-testid=\"custom-cta\">\n {renderCustomCallToAction(onDismiss as any, displayListItems)}\n </div>\n );\n };\n\n return (\n <div\n data-testid=\"dropdown-container\"\n ref={mergeRefs(nodeRef, setFloatingRef)}\n {...getFloatingProps()}\n className={clsx(\n styles.container,\n variant === \"small\" && styles.containerVariantSmall\n )}\n style={floatingStyles}\n >\n <VisuallyHidden role=\"status\">{ariaLabel}</VisuallyHidden>\n {renderList()}\n {renderBottomCta()}\n </div>\n );\n};\n\nexport const DropdownList = forwardRef(DropdownListInner);\n"],"names":["DropdownList","forwardRef","listItems","multiSelect","maxSelectable","selectedItems","disableItemFocus","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","variant","listboxId","ariaLabel","matchElementWidth","width","topScrollItem","onSelectItem","onSelectAll","onDismiss","onRetry","valueExtractor","listExtractor","renderListItem","renderCustomCallToAction","enableSearch","hideNoResultsDisplay","noResultsDescription","_noResultsDescription","customLabels","searchPlaceholder","_searchPlaceholder","searchFunction","onSearch","ref","noResultsLabel","selectAllButtonLabel","clearAllButtonLabel","focusedIndex","setFocusedIndex","useContext","DropdownListStateContext","elementWidth","setFloatingRef","getFloatingProps","styles","floatingStyles","useDropdownRender","searchValue","setSearchValue","useState","displayListItems","setDisplayListItems","itemsLoadStateChanged","useCompare","mounted","useIsMounted","nodeRef","useRef","listItemRefs","searchInputRef","virtuosoRef","hasSelectedMax","length","containerWidthStyle","styles.tokens","containerWidth","containerMinWidth","getOptionLabel","item","value","toString","title","secondaryLabel","checkListItemSelected","useCallback","find","arrItem","isEqual","filterItemsByCustomSearch","useEvent","filterItemsByLabel","filter","updatedSearchValue","trim","toLowerCase","includes","refocus","opts","current","setTimeout","_a","focus","items","undefined","index","forced","Math","max","min","scrollToIndex","align","selectedIndex","preferSelected","findIndex","nextIndex","_b","handleListItemClick","upcomingIndex","getValue","handleSearchInputChange","event","target","handleOnClear","handleTryAgain","useEventListener","code","preventDefault","document","activeElement","useImperativeHandle","useEffect","scrollTo","top","timer","indexOf","clearTimeout","_c","useApplyStyle","Object","assign","renderListItemIcon","selected","_jsx","SquareFillIcon","className","clsx","styles.baseCheckboxIndicatorStyle","styles.checkboxDisabledIndicator","SquareTickFillIcon","styles.checkboxSelectedIndicator","SquareIcon","styles.checkboxUnselectedIndicator","TickIcon","styles.baseIndicatorStyle","styles.selectedIndicator","renderDropdownLabel","DropdownLabel","displayType","label","maxLines","disabled","sublabel","truncationType","renderItem","active","onClick","onMouseEnter","handleListItemHover","element","role","tabIndex","styles.listItem","styles.listItemDisabled","styles.listItemActiveSelected","styles.listItemActive","children","_jsxs","_Fragment","getItemKey","renderSearchInput","DropdownSearch","onChange","placeholder","onClear","renderSelectAll","styles.selectAllContainer","BasicButton","type","styles.baseButton","styles.selectAllButton","renderNoResults","styles.resultStateContainer","ExclamationCircleFillIcon","styles.labelIcon","Markup","styles.noResultDescContainer","renderLoading","ComponentLoadingSpinner","styles.spinner","renderTryAgain","styles.tryAgainButton","renderVirtualisedList","isTestEnv","process","env","NODE_ENV","Virtuoso","style","height","data","customScrollParent","itemContent","components","List","VirtuosoList","Item","VirtuosoItem","context","listProps","id","listItemProps","initialItemCount","mergeRefs","styles.container","styles.containerVariantSmall","VisuallyHidden","styles.list","renderBottomCta"],"mappings":"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"}

package/cjs/shared/dropdown-list/dropdown-list.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./dropdown-list.styles_1qveyb9.css");exports.baseButton="b51546q",exports.baseCheckboxIndicatorStyle="bswyxh7",exports.baseIndicatorStyle="b3myji2",exports.checkboxDisabledIndicator="cxvb3yc",exports.checkboxSelectedIndicator="c1kods4c",exports.checkboxUnselectedIndicator="c2iuhda",exports.container="c1wprmqt",exports.containerVariantSmall="cv4jfw8",exports.labelIcon="l9eregy",exports.list="llrkh2h",exports.listItem="lsgm7b1",exports.listItemActive="l1sloxru",exports.listItemActiveSelected="lp7vqom",exports.listItemDisabled="l1li8r4s",exports.noResultDescContainer="n1mo99ai",exports.resultStateContainer="rlpycri",exports.selectAllButton="s5v4wu0",exports.selectAllContainer="s1gfnl3t",exports.selectedIndicator="s1bv8amb",exports.spinner="smon6ho",exports.tokens={containerWidth:"--fds-internal-dropdownList-containerWidth",containerMinWidth:"--fds-internal-dropdownList-containerMinWidth"},exports.tryAgainButton="t14h29ix";
2	+ //# sourceMappingURL=dropdown-list.styles.js.map

package/cjs/shared/dropdown-list/dropdown-list.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dropdown-list.styles.js","sources":["../../../../src/shared/dropdown-list/dropdown-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Breakpoint,\n Colour,\n Font,\n MediaQuery,\n Radius,\n Spacing,\n} from \"../../theme\";\nimport * as elementWithDropdownStyles from \"../dropdown-wrapper/element-with-dropdown.styles\";\n\nexport const tokens = {\n availableWidth: \"--fds-internal-dropdownList-container-availableWidth\",\n\n containerWidth: \"--fds-internal-dropdownList-containerWidth\",\n containerMinWidth: \"--fds-internal-dropdownList-containerMinWidth\",\n\n xSpacing: \"--fds-internal-dropdownList-container-xSpacing\",\n} as const;\n\n// -----------------------------------------------------------------------------\n// MAIN STYLES\n// -----------------------------------------------------------------------------\nexport const container = css`\n ${Font[\"body-baseline-regular\"]}\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n background: ${Colour[\"bg\"]};\n\n ${tokens.xSpacing}: 0px;\n ${elementWithDropdownStyles.tokens.availableHeight}: initial;\n ${tokens.availableWidth}: calc(\n 100vw - var(${tokens.xSpacing}) * 2\n );\n\n ${MediaQuery.MaxWidth.sm} {\n ${tokens.xSpacing}: ${Breakpoint[\"sm-margin\"]};\n max-height: 15rem;\n }\n\n ${MediaQuery.MaxWidth.xs} {\n ${tokens.xSpacing}: ${Breakpoint[\"xs-margin\"]};\n }\n\n ${MediaQuery.MaxWidth.xxs} {\n ${tokens.xSpacing}: ${Breakpoint[\"xxs-margin\"]};\n }\n\n max-width: var(${tokens.availableWidth});\n min-width: var(\n ${tokens.containerMinWidth},\n min(23rem, var(${tokens.availableWidth}))\n );\n width: var(${tokens.containerWidth});\n max-height: min(\n 27rem,\n var(${elementWithDropdownStyles.tokens.availableHeight}, 9999px)\n );\n overflow: hidden;\n overflow-y: auto;\n\n &::-webkit-scrollbar {\n width: 14px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${Colour[\"bg-inverse-subtlest\"]};\n border: 5px solid transparent;\n border-radius: ${Radius[\"full\"]};\n background-clip: padding-box;\n }\n`;\n\nexport const containerVariantSmall = css`\n ${Font[\"body-md-regular\"]}\n`;\n\nexport const list = css`\n background: transparent;\n padding: ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\nexport const listItem = css`\n display: flex;\n align-items: flex-start;\n gap: ${Spacing[\"spacing-8\"]};\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n cursor: pointer;\n border: none;\n border-radius: ${Radius[\"none\"]};\n outline: none;\n`;\n\nexport const listItemActive = css`\n background: ${Colour[\"bg-hover-subtle\"]};\n`;\n\nexport const listItemActiveSelected = css`\n background: ${Colour[\"bg-hover\"]};\n`;\n\nexport const listItemDisabled = css`\n cursor: not-allowed;\n`;\n\nexport const baseIndicatorStyle = css`\n flex-shrink: 0;\n height: 1lh;\n width: 1rem;\n`;\n\nexport const selectedIndicator = css`\n color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const baseCheckboxIndicatorStyle = css`\n flex-shrink: 0;\n height: 1lh;\n width: 1lh;\n`;\n\nexport const checkboxSelectedIndicator = css`\n color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const checkboxUnselectedIndicator = css`\n color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const checkboxDisabledIndicator = css`\n color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ELEMENT STYLES\n// -----------------------------------------------------------------------------\nexport const selectAllContainer = css`\n width: 100%;\n display: flex;\n justify-content: flex-end;\n`;\n\nexport const baseButton = css`\n cursor: pointer;\n overflow: hidden;\n color: ${Colour[\"text-primary\"]};\n font-size: inherit;\n`;\n\nexport const selectAllButton = css`\n ${Font[\"body-md-semibold\"]}\n padding: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const tryAgainButton = css`\n ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const resultStateContainer = css`\n width: 100%;\n display: flex;\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n align-items: center;\n color: ${Colour[\"text\"]};\n`;\n\nexport const labelIcon = css`\n margin-right: ${Spacing[\"spacing-4\"]};\n color: ${Colour[\"icon-error\"]};\n height: 1em;\n width: 1em;\n`;\n\nexport const spinner = css`\n margin-right: ${Spacing[\"spacing-8\"]};\n color: ${Colour[\"icon\"]};\n`;\n\nexport const noResultDescContainer = css`\n color: ${Colour[\"text-subtle\"]};\n padding: 0 ${Spacing[\"spacing-16\"]};\n padding-bottom: ${Spacing[\"spacing-12\"]};\n`;\n"],"names":["containerWidth","containerMinWidth"],"mappings":"kHAuJuB,6CA3BgB,qCAVR,4CAwBO,4CARA,+CAIE,4BA7GlB,yCAsDY,4BAgGZ,uBA5FL,2BAQI,iCAWM,0CAIQ,mCAIN,yCA6EK,wCApBD,kCATL,qCAbG,qCAzBD,2BA8DV,yBAzKE,CAGlBA,eAAgB,6CAChBC,kBAAmB,wEAkJI"}

package/cjs/shared/dropdown-list/dropdown-list.styles_1qveyb9.css ADDED Viewed

@@ -0,0 +1,29 @@
+.c1wprmqt{font-family:var(--fds-font-family);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);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);--fds-internal-dropdownList-container-xSpacing:0px;--fds-internal-dropdownWrapper-availableHeight:initial;--fds-internal-dropdownList-container-availableWidth:calc(
+        100vw - var(--fds-internal-dropdownList-container-xSpacing) * 2
+    );max-width:var(--fds-internal-dropdownList-container-availableWidth);min-width:var(
+        --fds-internal-dropdownList-containerMinWidth,
+        min(23rem, var(--fds-internal-dropdownList-container-availableWidth))
+    );width:var(--fds-internal-dropdownList-containerWidth);max-height:min(
+        27rem,
+        var(--fds-internal-dropdownWrapper-availableHeight, 9999px)
+    );overflow:hidden;overflow-y:auto;}:where(body.fds-breakpoint-sm-max) .c1wprmqt{--fds-internal-dropdownList-container-xSpacing:var(--fds-breakpoint-margin-sm);max-height:15rem;}:where(body.fds-breakpoint-xs-max) .c1wprmqt{--fds-internal-dropdownList-container-xSpacing:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .c1wprmqt{--fds-internal-dropdownList-container-xSpacing:var(--fds-breakpoint-margin-xxs);}.c1wprmqt::-webkit-scrollbar{width:14px;}.c1wprmqt::-webkit-scrollbar-track{background:transparent;}.c1wprmqt::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}
+.cv4jfw8{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.llrkh2h{background:transparent;padding:var(--fds-spacing-8);}
+.lsgm7b1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:var(--fds-spacing-8);padding:var(--fds-spacing-12) var(--fds-spacing-8);cursor:pointer;border:none;border-radius:var(--fds-radius-none);outline:none;}
+.l1sloxru{background:var(--fds-colour-bg-hover-subtle);}
+.lp7vqom{background:var(--fds-colour-bg-hover);}
+.l1li8r4s{cursor:not-allowed;}
+.b3myji2{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1lh;width:1rem;}
+.s1bv8amb{color:var(--fds-colour-icon-selected);}
+.bswyxh7{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1lh;width:1lh;}
+.c1kods4c{color:var(--fds-colour-icon-selected);}
+.c2iuhda{color:var(--fds-colour-icon-primary-subtlest);}
+.cxvb3yc{color:var(--fds-colour-icon-disabled-subtle);}
+.s1gfnl3t{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}
+.b51546q{cursor:pointer;overflow:hidden;color:var(--fds-colour-text-primary);font-size:inherit;}
+.s5v4wu0{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);padding:var(--fds-spacing-8);}
+.t14h29ix{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.rlpycri{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:var(--fds-spacing-12) var(--fds-spacing-16);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--fds-colour-text);}
+.l9eregy{margin-right:var(--fds-spacing-4);color:var(--fds-colour-icon-error);height:1em;width:1em;}
+.smon6ho{margin-right:var(--fds-spacing-8);color:var(--fds-colour-icon);}
+.n1mo99ai{color:var(--fds-colour-text-subtle);padding:0 var(--fds-spacing-16);padding-bottom:var(--fds-spacing-12);}

package/cjs/shared/dropdown-list/dropdown-search.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons/cross"),s=require("@lifesg/react-icons/magnifier"),i=require("clsx"),c=require("react"),l=require("../clickable-icon/clickable-icon.js"),n=require("../input-wrapper/input-wrapper.js"),t=require("./dropdown-search.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=o(i);const d=c.forwardRef(((i,c)=>{var{value:o,variant:d,onClear:f}=i,j=e.__rest(i,["value","variant","onClear"]);return r.jsxs("div",{className:u.default(t.container,"small"===d&&t.containerVariantSmall),children:[r.jsxs("label",{className:u.default(t.searchBox,"small"===d&&t.searchBoxVariantSmall),children:[r.jsx(s.MagnifierIcon,{"aria-hidden":!0,className:t.searchIcon}),r.jsx(n.BasicInput,Object.assign({ref:c,value:o,variant:d,className:t.searchInput},j))]}),o&&r.jsx(l.ClickableIcon,{"aria-label":"Clear search",focusOutline:"browser",onClick:f,className:t.clearButton,children:r.jsx(a.CrossIcon,{"aria-hidden":!0})})]})}));exports.DropdownSearch=d;
2	+ //# sourceMappingURL=dropdown-search.js.map

package/cjs/shared/dropdown-list/dropdown-search.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dropdown-search.js","sources":["../../../../src/shared/dropdown-list/dropdown-search.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { MagnifierIcon } from \"@lifesg/react-icons/magnifier\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ClickableIcon } from \"../clickable-icon\";\nimport { BasicInput } from \"../input-wrapper\";\nimport * as styles from \"./dropdown-search.styles\";\nimport type { DropdownVariantType } from \"./types\";\n\ninterface Props extends React.HTMLAttributes<HTMLInputElement> {\n value: string /** override to cast type */;\n variant?: DropdownVariantType | undefined;\n onClear?: (() => void) | undefined;\n}\n\nconst Component = (\n { value, variant, onClear, ...otherProps }: Props,\n ref: React.Ref<HTMLInputElement>\n): JSX.Element => {\n return (\n <div\n className={clsx(\n styles.container,\n variant === \"small\" && styles.containerVariantSmall\n )}\n >\n <label\n className={clsx(\n styles.searchBox,\n variant === \"small\" && styles.searchBoxVariantSmall\n )}\n >\n <MagnifierIcon aria-hidden className={styles.searchIcon} />\n <BasicInput\n ref={ref}\n value={value}\n variant={variant}\n className={styles.searchInput}\n {...otherProps}\n />\n </label>\n {value && (\n <ClickableIcon\n aria-label=\"Clear search\"\n focusOutline=\"browser\"\n onClick={onClear}\n className={styles.clearButton}\n >\n <CrossIcon aria-hidden />\n </ClickableIcon>\n )}\n </div>\n );\n};\n\nexport const DropdownSearch = forwardRef(Component);\n"],"names":["DropdownSearch","forwardRef","_a","ref","value","variant","onClear","otherProps","__rest","_jsxs","className","clsx","styles.container","styles.containerVariantSmall","children","styles.searchBox","styles.searchBoxVariantSmall","_jsx","MagnifierIcon","styles.searchIcon","BasicInput","Object","assign","styles.searchInput","ClickableIcon","focusOutline","onClick","styles.clearButton","CrossIcon"],"mappings":"yaAiBA,MAwCaA,EAAiBC,EAAAA,YAxCZ,CACdC,EACAC,SADAC,MAAEA,EAAKC,QAAEA,EAAOC,QAAEA,KAAYC,EAAUC,EAAAA,OAAAN,EAAxC,CAAA,QAAA,UAAA,YAGA,OACIO,EAAAA,YACIC,UAAWC,EAAAA,QACPC,EAAAA,UACY,UAAZP,GAAuBQ,EAAAA,uBAC1BC,SAAA,CAEDL,EAAAA,KAAA,QAAA,CACIC,UAAWC,EAAAA,QACPI,EAAAA,UACY,UAAZV,GAAuBW,EAAAA,uBAC1BF,SAAA,CAEDG,EAAAA,IAACC,gBAAa,CAAA,eAAA,EAAaR,UAAWS,EAAAA,aACtCF,EAAAA,IAACG,EAAAA,WAAUC,OAAAC,OAAA,CACPnB,IAAKA,EACLC,MAAOA,EACPC,QAASA,EACTK,UAAWa,EAAAA,aACPhB,OAGXH,GACGa,EAAAA,IAACO,EAAAA,cAAa,CAAA,aACC,eACXC,aAAa,UACbC,QAASpB,EACTI,UAAWiB,EAAAA,YAAkBb,SAE7BG,EAAAA,IAACW,EAAAA,kCAGP"}

package/cjs/shared/dropdown-list/dropdown-search.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./dropdown-search.styles_4r9oma.css");exports.clearButton="c1ml832z",exports.container="cimxtn",exports.containerVariantSmall="c5t5jsb",exports.searchBox="s9xptf8",exports.searchBoxVariantSmall="s15dwc6n",exports.searchIcon="s18shux7",exports.searchInput="slme00w";
2	+ //# sourceMappingURL=dropdown-search.styles.js.map

package/cjs/shared/dropdown-list/dropdown-search.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dropdown-search.styles.js","sources":["../../../../src/shared/dropdown-list/dropdown-search.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const container = css`\n background: ${Colour[\"bg-strong\"]};\n border-radius: ${Radius[\"sm\"]};\n display: flex;\n align-items: center;\n ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const containerVariantSmall = css`\n ${Font[\"body-md-regular\"]}\n`;\n\nexport const searchBox = css`\n flex: 1;\n display: flex;\n align-items: center;\n gap: ${Spacing[\"spacing-8\"]};\n padding: 10px ${Spacing[\"spacing-8\"]};\n`;\n\nexport const searchBoxVariantSmall = css`\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n`;\n\nexport const searchInput = css`\n flex: 1;\n`;\n\nexport const searchIcon = css`\n color: ${Colour[\"icon\"]};\n flex-shrink: 0;\n height: 1em;\n width: 1em;\n`;\n\nexport const clearButton = css`\n flex-shrink: 0;\n align-self: stretch;\n box-sizing: content-box;\n padding: ${Spacing[\"spacing-8\"]};\n margin-left: calc(${Spacing[\"spacing-8\"]} * -1);\n color: ${Colour[\"icon\"]};\n cursor: pointer;\n font-size: inherit;\n\n svg {\n flex-shrink: 0;\n height: 1em;\n width: 1em;\n }\n`;\n"],"names":[],"mappings":"oHA2CwB,6BAnCF,uCAQY,4BAIZ,wCAQY,8BAQX,+BAJC"}

package/cjs/shared/dropdown-list/dropdown-search.styles_4r9oma.css ADDED Viewed

@@ -0,0 +1,7 @@
+.cimxtn{background:var(--fds-colour-bg-strong);border-radius:var(--fds-radius-sm);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--fds-font-family);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);}
+.c5t5jsb{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.s9xptf8{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-8);padding:10px var(--fds-spacing-8);}
+.s15dwc6n{padding:var(--fds-spacing-8) var(--fds-spacing-16);}
+.slme00w{-webkit-flex:1;-ms-flex:1;flex:1;}
+.s18shux7{color:var(--fds-colour-icon);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1em;width:1em;}
+.c1ml832z{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;box-sizing:content-box;padding:var(--fds-spacing-8);margin-left:calc(var(--fds-spacing-8) * -1);color:var(--fds-colour-icon);cursor:pointer;font-size:inherit;}.c1ml832z svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1em;width:1em;}

package/cjs/shared/dropdown-list/expandable-element.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("@lifesg/react-icons/chevron-down"),t=require("clsx"),n=require("react"),i=require("../input-wrapper/input-wrapper.js"),s=require("./expandable-element.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(t);const d=(t,n)=>{var{children:l,className:d,disabled:c,expanded:p,listboxId:u,popupRole:x,readOnly:b,variant:m}=t,f=e.__rest(t,["children","className","disabled","expanded","listboxId","popupRole","readOnly","variant"]);return a.jsxs(i.BasicButton,Object.assign({ref:n,type:"button",role:"combobox","aria-expanded":p,"aria-haspopup":x,"aria-controls":p?u:void 0,"data-testid":"selector","aria-disabled":c,"aria-readonly":b,className:o.default(s.selector,"small"===m&&s.selectorVariantSmall,b?s.selectorReadOnly:s.selectorEditable,d)},f,{children:[l,!b&&a.jsx("div",{className:o.default(s.iconContainer,p&&s.iconContainerExpanded),children:a.jsx(r.ChevronDownIcon,{"aria-hidden":!0})})]}))},c=n.forwardRef(d);exports.Component=d,exports.ExpandableElement=c;
2	+ //# sourceMappingURL=expandable-element.js.map

package/cjs/shared/dropdown-list/expandable-element.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"expandable-element.js","sources":["../../../../src/shared/dropdown-list/expandable-element.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport clsx from \"clsx\";\nimport type { AriaAttributes, Ref } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { BasicButton } from \"../input-wrapper\";\nimport * as styles from \"./expandable-element.styles\";\nimport type { DropdownVariantType } from \"./types\";\n\nexport interface ExpandableElementProps\n extends Pick<\n AriaAttributes,\n \"aria-labelledby\" | \"aria-describedby\" | \"aria-invalid\"\n > {\n children: React.ReactNode;\n className?: string | undefined;\n disabled: boolean | undefined;\n expanded: boolean | undefined;\n listboxId: string;\n popupRole: AriaAttributes[\"aria-haspopup\"];\n readOnly: boolean | undefined;\n variant?: DropdownVariantType | undefined;\n}\n\nexport const Component = (\n {\n children,\n className,\n disabled,\n expanded,\n listboxId,\n popupRole,\n readOnly,\n variant,\n ...otherProps\n }: ExpandableElementProps,\n ref: Ref<HTMLButtonElement>\n) => {\n return (\n <BasicButton\n ref={ref}\n type=\"button\"\n role=\"combobox\"\n aria-expanded={expanded}\n aria-haspopup={popupRole}\n aria-controls={expanded ? listboxId : undefined}\n data-testid=\"selector\"\n aria-disabled={disabled}\n aria-readonly={readOnly}\n className={clsx(\n styles.selector,\n variant === \"small\" && styles.selectorVariantSmall,\n readOnly ? styles.selectorReadOnly : styles.selectorEditable,\n className\n )}\n {...otherProps}\n >\n {children}\n {!readOnly && (\n <div\n className={clsx(\n styles.iconContainer,\n expanded && styles.iconContainerExpanded\n )}\n >\n <ChevronDownIcon aria-hidden />\n </div>\n )}\n </BasicButton>\n );\n};\n\nexport const ExpandableElement = forwardRef(Component);\n"],"names":["Component","_a","ref","children","className","disabled","expanded","listboxId","popupRole","readOnly","variant","otherProps","__rest","_jsxs","BasicButton","Object","assign","type","role","undefined","clsx","styles.selector","styles.selectorVariantSmall","styles.selectorReadOnly","styles.selectorEditable","_jsx","styles.iconContainer","styles.iconContainerExpanded","ChevronDownIcon","ExpandableElement","forwardRef"],"mappings":"6VAwBaA,EAAY,CACrBC,EAWAC,SAXAC,SACIA,EAAQC,UACRA,EAASC,SACTA,EAAQC,SACRA,EAAQC,UACRA,EAASC,UACTA,EAASC,SACTA,EAAQC,QACRA,GAAOT,EACJU,EAAUC,EAAAA,OAAAX,EATjB,6FAaA,OACIY,EAAAA,KAACC,EAAAA,YAAWC,OAAAC,OAAA,CACRd,IAAKA,EACLe,KAAK,SACLC,KAAK,WAAU,gBACAZ,kBACAE,EAAS,gBACTF,EAAWC,OAAYY,EAAS,cACnC,WAAU,gBACPd,EAAQ,gBACRI,EACfL,UAAWgB,EAAAA,QACPC,EAAAA,SACY,UAAZX,GAAuBY,EAAAA,qBACvBb,EAAWc,EAAAA,iBAA0BC,EAAAA,iBACrCpB,IAEAO,EAAU,CAAAR,SAAA,CAEbA,GACCM,GACEgB,EAAAA,IAAA,MAAA,CACIrB,UAAWgB,EAAAA,QACPM,EAAAA,cACApB,GAAYqB,EAAAA,gCAGhBF,EAAAA,IAACG,EAAAA,yCAGC,EAITC,EAAoBC,EAAAA,WAAW9B"}