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/select-histogram/select-histogram.js CHANGED Viewed

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

package/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":["SelectHistogram","_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","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":["SelectHistogram","_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","variant","dropdownWrapperStyles.labelContainer","undefined","length","Label","Separator","PlaceholderLabel","$truncateType","$variant","renderDropdown","elementWidth","styles","setFloatingRef","getFloatingProps","HistogramSliderDropdownContainer","Object","assign","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

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

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

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

package/select-histogram/types.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import type { AriaAttributes, RefObject } from "react";
 import type { HistogramSliderProps } from "../histogram-slider";
-import type { TruncateType } from "../shared/dropdown-list-v2/types";
+import type { TruncateType } from "../shared/dropdown-list/types";
 import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
 export type SelectHistogramSliderProps = Pick<HistogramSliderProps, "bins" | "interval" | "renderEmptyView" | "ariaLabels">;
 export interface SelectHistogramProps extends Pick<AriaAttributes, "aria-labelledby" | "aria-describedby" | "aria-invalid"> {

package/shared/accessibility/index.js CHANGED Viewed

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

package/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","inertValue","value","isReact19","undefined","concatIds","selectors","filter","selector","join"],"mappings":"~~2SAMA~~,MASaA,EAAiBC,EAAMC,YAGlC,SAAwBC,EAA8BC,GAA9B,IAAAC,UAAEA,GAASF,EAAKG,EAAUC,EAAAJ,EAA1B,eACtB,OAAOF,EAAMO,cAAc,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GAC1BJ,GAAU,CACbF,MACAC,UAAWM,EAhBC,WAgBoBN,KAExC,IAMaO,EAAcC,GACnBC,IACOD,EAGJA,EAAQ,YAASE,EAGfC,EAAYA,IAAIC,IAClBA,EAAUC,QAAQC,KAAeA,IAAUC,KAAK"}
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","inertValue","value","isReact19","undefined","concatIds","selectors","filter","selector","join"],"mappings":"6YAMA,MASaA,EAAiBC,EAAMC,YAGlC,SAAwBC,EAA8BC,GAA9B,IAAAC,UAAEA,GAASF,EAAKG,EAAUC,EAAAJ,EAA1B,eACtB,OAAOF,EAAMO,cAAc,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GAC1BJ,GAAU,CACbF,MACAC,UAAWM,EAhBC,WAgBoBN,KAExC,IAMaO,EAAcC,GACnBC,IACOD,EAGJA,EAAQ,YAASE,EAGfC,EAAYA,IAAIC,IAClBA,EAAUC,QAAQC,KAAeA,IAAUC,KAAK"}

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

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

package/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":"~~gKAKA~~,~~MAuBaA~~,EAAgBC,EAAMC,~~YAvBjB~~,CACdC,~~EAOAC~~,~~KAPA~~,~~IAAAC,~~SACIA,EAAQC,~~eACRA~~,GAAiB,EAAIC,aACrBA,EAAe,OAAMC,KACrBA,EAAO,~~UAAQL~~,~~EACZM~~,EAAUC,~~EAAAP~~,~~EALjB~~,~~qDASA~~,~~OACIQ~~,~~EAACC~~,~~EAAIC~~,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":"qNAMA,MA4BaA,EAAgBC,EAAMC,YA5BjB,CACdC,EAQAC,SARAC,SACIA,EAAQC,UACRA,EAASC,eACTA,GAAiB,EAAIC,aACrBA,EAAe,OAAMC,KACrBA,EAAO,UAAQN,EACZO,EAAUC,EAAAR,EANjB,iEAUA,OACIS,EAAA,SAAAC,OAAAC,OAAA,CACIV,IAAKA,EACLE,UAAWS,EACPC,EACiB,SAAjBR,GAA2BS,EAC3BV,GAAkBW,EAClBZ,GAEJG,KAAMA,GACFC,YAEHL,IACI"}

package/shared/clickable-icon/clickable-icon.styles.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare const main: import("@linaria/core").LinariaClassName;
+export declare const outlineNone: import("@linaria/core").LinariaClassName;
+export declare const highlight: import("@linaria/core").LinariaClassName;

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

	@@ -0,0 +1,2 @@
1	+ import"./clickable-icon.styles_1v2imml.css";const c="m18ljjag",l="o1plr5dj",i="hv69up9";export{i as highlight,c as main,l as outlineNone};
2	+ //# sourceMappingURL=clickable-icon.styles.js.map

package/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":["main","outlineNone","highlight"],"mappings":"iFAIO,MAAMA,EAAI,WAoBJC,EAAW,WAOXC,EAAS"}

package/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/shared/component-loading-spinner/component-loading-spinner.d.ts CHANGED Viewed

@@ -1,23 +1,28 @@
+import type { HTMLAttributes } from "react";
+type BaseProps = Omit<HTMLAttributes<HTMLDivElement>, "color">;
+export interface ComponentLoadingSpinnerProps extends BaseProps {
+    /** Measurement in px */
+    size?: number | undefined;
+    /** rgb/hex value or Color token */
+    color?: string | undefined;
+}
 /**
  * This component is mainly used within components and is not to be confused
  * with the main loading spinner in animations/loading-spinner
  *
  * By default it inherits the font size and color of the parent container.
  *
- * The color can be customised via the prop or through styled-components.
+ * The font size and color can be customised via the prop or through css.
  *
  * Example:
  * ```
- * styled(ComponentLoadingSpinner)`
+ * const spinner = css`
  *   color: red;
+ *   font-size: 1lh;
  * `
+ *
+ * <ComponentLoadingSpinner className={styles.spinner} />
  * ```
  */
-export interface ComponentLoadingSpinnerProps {
-    className?: string | undefined;
-    /** Measurement in px */
-    size?: number | undefined;
-    /** rgb/hex value or Color token */
-    color?: string | ((props: any) => string) | undefined;
-}
-export declare const ComponentLoadingSpinner: ({ color, className, size, }: ComponentLoadingSpinnerProps) => JSX.Element;
+export declare const ComponentLoadingSpinner: ({ color, className, size, ...otherProps }: ComponentLoadingSpinnerProps) => JSX.Element;
+export {};

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

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

package/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":["ComponentLoadingSpinner","color","className","size","_jsxs","~~OuterRing~~","~~$color~~","~~_jsx~~","~~InnerRing1~~","id","~~InnerRing2~~","~~InnerRing3~~","~~InnerRing4~~"],"mappings":"~~mLA+BO~~,MAAMA,~~EAA0B~~,~~EACnCC~~,~~QACAC~~,~~YACAC~~,~~UAGIC~~,~~EAACC~~,~~EAAS~~,~~CACNH~~,~~UAAWA~~,~~QACJC~~,~~EAAIG~~,~~OACHL~~,~~EAAK~~,~~cACA~~,~~sCAEbM~~,~~EAACC~~,~~GAAWC~~,GAAG,~~WACfF~~,~~EAACG~~,~~EAAU~~,~~CAACD~~,GAAG,~~WACfF~~,~~EAACI~~,~~EAAU~~,~~CAACF~~,GAAG,~~WACfF~~,~~EAACK~~,~~EAAU~~,~~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":["ComponentLoadingSpinner","_a","color","className","size","otherProps","__rest","spinnerRef","useRef","useApplyStyle","styles.tokens","rootSize","undefined","rootColour","_jsxs","Object","assign","ref","clsx","styles.outerRing","children","_jsx","id","styles.innerRing","styles.innerRing2","styles.innerRing3","styles.innerRing4"],"mappings":"wZAkCO,MAAMA,EAA2BC,QAAAC,MACpCA,EAAKC,UACLA,EAASC,KACTA,KACGC,EAAUC,EAAAL,EAJuB,CAAA,QAAA,YAAA,SAMpC,MAAMM,EAAaC,EAAuB,MAM1C,OALAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,UAAWP,EAAO,GAAGA,WAAWQ,EAC/C,CAACF,EAAcG,YAAaX,IAI5BY,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKV,EACLJ,UAAWe,EAAKC,EAAkBhB,IAC9BE,iBACS,4BAA2Be,SAAA,CAExCC,SAAKC,GAAG,SAASnB,UAAWoB,IAC5BF,SACIC,GAAG,SACHnB,UAAWe,EAAKK,EAAkBC,KAEtCH,EAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAKK,EAAkBE,KAEtCJ,EAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAKK,EAAkBG,QAEpC"}

package/shared/component-loading-spinner/component-loading-spinner.styles.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+export declare const tokens: {
+    readonly rootSize: "--fds-internal-componentLoadingSpinner-root-size";
+    readonly rootColour: "--fds-internal-componentLoadingSpinner-root-colour";
+};
+export declare const outerRing: import("@linaria/core").LinariaClassName;
+export declare const innerRing: import("@linaria/core").LinariaClassName;
+export declare const innerRing2: import("@linaria/core").LinariaClassName;
+export declare const innerRing3: import("@linaria/core").LinariaClassName;
+export declare const innerRing4: import("@linaria/core").LinariaClassName;

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

	@@ -0,0 +1,2 @@
1	+ import"./component-loading-spinner.styles_15eq02i.css";const o={rootSize:"--fds-internal-componentLoadingSpinner-root-size",rootColour:"--fds-internal-componentLoadingSpinner-root-colour"},n="oqwr3hs",i="i5p5ltp",r="i1trawld",e="iav978u",t="i1fnvvih";export{i as innerRing,r as innerRing2,e as innerRing3,t as innerRing4,n as outerRing,o as tokens};
2	+ //# sourceMappingURL=component-loading-spinner.styles.js.map

package/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":["tokens","rootSize","rootColour","outerRing","innerRing","innerRing2","innerRing3","innerRing4"],"mappings":"uGAEO,MAAMA,EAAS,CAClBC,SAAU,mDACVC,WAAY,sDAGHC,EAAS,UAQTC,EAAS,UAyBTC,EAAU,WAIVC,EAAU,UAIVC,EAAU"}

package/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/shared/dropdown-list/dropdown-label.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import type { DropdownVariantType, LabelDisplayType } from "./types";
+interface DropdownLabelProps {
+    bold?: boolean | undefined;
+    displayType?: LabelDisplayType | undefined;
+    label: string;
+    maxLines?: number | undefined;
+    searchTerm?: string | undefined;
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    sublabel?: string | undefined;
+    truncationType?: "middle" | "end" | undefined;
+    variant?: DropdownVariantType | undefined;
+}
+export declare const DropdownLabel: ({ bold, displayType, label, searchTerm, maxLines, selected, disabled, sublabel, truncationType, variant, }: DropdownLabelProps) => JSX.Element;
+export {};

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

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

package/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":["DropdownLabel","bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","primaryTextRef","useRef","secondaryTextRef","useApplyStyle","styles.tokens","primaryText","String","secondaryText","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","className","styles.matchedText","renderTruncatedText","clsx","styles.baseTruncateStyle","styles.truncateFirstLine","styles.truncateLineSingle","styles.truncateSecondLine","styles.label","styles.labelVariantSmall","styles.labelNextLine","styles.primaryText","styles.primaryTextBold","styles.primaryTextDisabled","styles.primaryTextSelected","styles.primaryTextLabelInline","styles.primaryTextTruncateEnd","styles.secondaryText","styles.secondaryTextLabelInline","styles.secondaryTextTruncateEnd","styles.secondaryTextNextLine","styles.secondaryTextInline"],"mappings":"ylCAuBO,MAAMA,EAAgB,EACzBC,OACAC,cAAc,SAAQC,MACtBA,EACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EACU,UAAZD,EACME,EAAKC,KAAK,gBACVD,EAAKC,KAAK,sBACdC,EAAaF,EAAKC,KAAK,gBACvBE,IAAEA,EAAGC,MAAEA,GAAUC,IAEjBC,EAAiBC,EAAuB,MACxCC,EAAmBD,EAAuB,MAEhDE,EAAcH,EAAgB,CAC1B,CAACI,EAAcC,YAAYlB,UAAWmB,OAAOnB,KAGjDgB,EAAcD,EAAkB,CAC5B,CAACE,EAAcG,cAAcpB,UAAWmB,OAAOnB,KAMnD,MAAMqB,EAAuBC,GACxBC,IACG,GAAoB,WAAhB1B,IAA6Bc,EAC7B,OAAO,EAaX,OAPkBa,EAAaC,aAC3BF,EACA,GAAGjB,MAAaG,MAKDE,EAAQ,EAAE,GAEjC,CAACA,EAAOd,EAAaS,EAAUG,IAM7BiB,EAAsBC,GACxB,IAAMN,EAAqBvB,IAC3B,CAACuB,EAAsBvB,IAErB8B,EAAsBD,GACxB,IAAMxB,GAAYkB,EAAqBlB,IACvC,CAACkB,EAAsBlB,IAKrB0B,EACiB,WAAnBzB,IACCsB,GAAuBE,GAClB,YACA/B,EAKJiC,EAAqBP,IACvB,IAAKxB,EACD,OAAOwB,EAGX,MAAMQ,EAAQhC,EAAWiC,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAanC,EAAWsC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,EAAAC,EAAA,CAAAC,SAAA,CACK1C,EAAM2C,MAAM,EAAGP,GAChBQ,EAAA,OAAA,CAAMC,UAAWC,EAAkBJ,SAC9B1C,EAAM2C,MAAMP,EAAYE,KAE5BtC,EAAM2C,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAC,EAAA,CAAAC,SAAA,CACIE,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAC,EACa,IAAbhD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,KAEvBmB,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAG,EACa,IAAblD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,QAMnC,OACIe,EAAA,MAAA,CACI5B,IAAKA,EACLiC,UAAWG,EACPK,EACY,UAAZ9C,GAAuB+C,EACH,cAApBvB,GAAmCwB,GACtCb,SAAA,CAEDE,SACIhC,IAAKG,EAAc,aACPf,EACZ6C,UAAWG,EACPQ,EACA1D,GAAQ2D,EACRrD,GAAYsD,GACXtD,GAAYD,GAAYwD,EACL,WAApB5B,GACI6B,EACe,QAAnBtD,GAA4BuD,GAC/BnB,SAEmB,WAAnBpC,GAA+BsB,EAC1BmB,EAAoB/C,GACpBgC,EAAkBhC,KAE3BK,GACGuC,EAAA,MAAA,CACIhC,IAAKK,EAAgB,aACTZ,EACZwC,UAAWG,EACPc,EACoB,WAApB/B,GACIgC,EACe,QAAnBzD,GACI0D,EACY,cAAhBjE,EACMkE,EACAC,YAGU,WAAnB5D,GAA+BwB,EAC1BiB,EAAoB1C,GACpBA,MAGZ"}

package/shared/dropdown-list/dropdown-label.styles.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+export declare const tokens: {
+    primaryText: {
+        maxLines: string;
+    };
+    secondaryText: {
+        maxLines: string;
+    };
+};
+export declare const primaryText: import("@linaria/core").LinariaClassName;
+export declare const primaryTextBold: import("@linaria/core").LinariaClassName;
+export declare const primaryTextSelected: import("@linaria/core").LinariaClassName;
+export declare const primaryTextDisabled: import("@linaria/core").LinariaClassName;
+export declare const primaryTextLabelInline: import("@linaria/core").LinariaClassName;
+export declare const primaryTextTruncateEnd: import("@linaria/core").LinariaClassName;
+export declare const secondaryText: import("@linaria/core").LinariaClassName;
+export declare const secondaryTextNextLine: import("@linaria/core").LinariaClassName;
+export declare const secondaryTextInline: import("@linaria/core").LinariaClassName;
+export declare const secondaryTextLabelInline: import("@linaria/core").LinariaClassName;
+export declare const secondaryTextTruncateEnd: import("@linaria/core").LinariaClassName;
+export declare const matchedText: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;
+export declare const labelVariantSmall: import("@linaria/core").LinariaClassName;
+export declare const labelNextLine: import("@linaria/core").LinariaClassName;
+export declare const baseTruncateStyle: import("@linaria/core").LinariaClassName;
+export declare const truncateFirstLine: import("@linaria/core").LinariaClassName;
+export declare const truncateSecondLine: import("@linaria/core").LinariaClassName;
+export declare const truncateLineSingle: import("@linaria/core").LinariaClassName;

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

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

package/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":["tokens","primaryText","maxLines","secondaryText","primaryTextBold","primaryTextSelected","primaryTextDisabled","primaryTextLabelInline","primaryTextTruncateEnd","secondaryTextNextLine","secondaryTextInline","secondaryTextLabelInline","secondaryTextTruncateEnd","matchedText","label","labelVariantSmall","labelNextLine","baseTruncateStyle","truncateFirstLine","truncateSecondLine","truncateLineSingle"],"mappings":"gFAKO,MAAMA,EAAS,CAClBC,YAAa,CACTC,SAAU,qDAEdC,cAAe,CACXD,SAAU,wDAWLD,EAAW,UAOXG,EAAe,WAIfC,EAAmB,UAInBC,EAAmB,UAInBC,EAAsB,WAItBC,EAAsB,UAQtBL,EAAa,UAMbM,EAAqB,WAIrBC,EAAmB,UAInBC,EAAwB,WAKxBC,EAAwB,WAQxBC,EAAW,UAOXC,EAAK,UAQLC,EAAiB,UAIjBC,EAAa,UAQbC,EAAiB,WAOjBC,EAAiB,WAIjBC,EAAkB,WAOlBC,EAAkB"}

package/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/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","DropdownListState","children","useState","_jsx","Provider","value"],"mappings":"4EAWO,MAAMA,EACTC,EAAMC,cAA6C,CAC/CC,cAAc,EACdC,gBAAiB,SAKZC,EAAoB,EAAGC,eAChC,MAAOH,EAAcC,GAAmBG,GAAiB,GAEzD,OACIC,EAACR,EAAyBS,SAAQ,CAC9BC,MAAO,CACHP,eACAC,mBACHE,SAEAA,GAC+B"}

package/shared/dropdown-list/dropdown-list.d.ts CHANGED Viewed

@@ -1,6 +1,3 @@
-import type { DropdownListProps } from "./types";
-/**
- * NOTE: This component is not directly exportables
- * but forms part of a component
- */
-export declare const DropdownList: <T, V>({ listItems, listExtractor, valueExtractor, onSelectItem, listStyleWidth, visible, enableSearch, searchPlaceholder, onSearch, searchFunction, onDismiss, disableItemFocus, multiSelect, selectedItems, onSelectAll, onRetry, itemsLoadState, itemTruncationType, itemMaxLines, labelDisplayType, renderListItem, onBlur, hideNoResultsDisplay, renderCustomCallToAction, variant, ...otherProps }: DropdownListProps<T, V>) => JSX.Element;
+import type React from "react";
+import type { DropdownListApi, DropdownListProps } from "./types";
+export declare const DropdownList: <T, V>(props: DropdownListProps<T, V> & React.RefAttributes<DropdownListApi>) => React.ReactElement | null;

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

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