@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

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

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

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

@@ -1,16 +1,5 @@
-import { 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> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ValueLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never>>> & string;
-export declare const PlaceholderLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>>> & string;
+export declare const histogramSliderDropdownContainer: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;
+export declare const separator: import("@linaria/core").LinariaClassName;
+export declare const placeholderLabel: import("@linaria/core").LinariaClassName;
+export declare const placeholderLabelTruncateEnd: import("@linaria/core").LinariaClassName;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"select-histogram.styles.js","sources":["../../src/select-histogram/select-histogram.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ValueLabelStyleProps } from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../theme\";\n\nexport const HistogramSliderDropdownContainer = styled.div`\n    overflow: hidden;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n    padding: ${Spacing[\"spacing-16\"]};\n    min-width: 23rem;\n\n    ${MediaQuery.MaxWidth.sm} {\n        min-width: unset;\n        width: calc(100vw - ${Breakpoint[\"sm-margin\"]}px * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        width: calc(100vw - ${Breakpoint[\"xs-margin\"]}px * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        width: calc(100vw - ${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: ${Colour[\"text\"]};\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n    ${(props) =>\n        props.$variant === \"small\"\n            ? Font[\"body-md-regular\"]\n            : 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: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["HistogramSliderDropdownContainer","styled","div","Border","Colour","Radius","Spacing","MediaQuery","MaxWidth","sm","Breakpoint","xs","xxs","Label","Separator","ValueLabel","props","$variant","Font","$truncateType","css","lineClampCss","PlaceholderLabel"],"mappings":"8NAaO,MAAMA,EAAmCC,EAAOC,GAAG;;cAE5CC,EAAO,gBAAgBA,EAAc,SAAKC,EAAe;qBAClDC,EAAW;kBACdD,EAAW;eACdE,EAAQ;;;MAGjBC,EAAWC,SAASC;;8BAEIC,EAAW;;;MAGnCH,EAAWC,SAASG;8BACID,EAAW;;;MAGnCH,EAAWC,SAASI;8BACIF,EAAW;;EAI5BG,EAAQZ,EAAOC,GAAG;;;EAKlBY,EAAYb,EAAOC,GAAG;;aAEtBE,EAAa;EAGbW,EAAad,EAAOC,GAAyB;MACnDc,GACoB,UAAnBA,EAAMC,SACAC,EAAK,mBACLA,EAAK;;MAEZF,IACC,GACS,WADDA,EAAMG,cAKN,OAAOC,CAAG;sBACJC,EAAa;;;EAOtBC,EAAmBrB,EAAOc,EAAW;aACrCX,EAAO;"}
+{"version":3,"file":"select-histogram.styles.js","sources":["../../src/select-histogram/select-histogram.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../theme\";\n\nexport const histogramSliderDropdownContainer = css`\n    overflow: hidden;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n    padding: ${Spacing[\"spacing-16\"]};\n    min-width: 23rem;\n\n    ${MediaQuery.MaxWidth.sm} {\n        min-width: unset;\n        width: calc(100vw - ${Breakpoint[\"sm-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        width: calc(100vw - ${Breakpoint[\"xs-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        width: calc(100vw - ${Breakpoint[\"xxs-margin\"]} * 2);\n    }\n`;\n\nexport const label = css`\n    display: flex;\n    align-items: baseline;\n`;\n\nexport const separator = css`\n    margin: 0 0.5rem;\n    color: ${Colour[\"text\"]};\n`;\n\nexport const placeholderLabel = css`\n    ${Font[\"body-baseline-regular\"]}\n    text-align: left;\n    overflow: hidden;\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const placeholderLabelTruncateEnd = css`\n    ${lineClampCss(1)}\n`;\n"],"names":["histogramSliderDropdownContainer","label","separator","placeholderLabel","placeholderLabelTruncateEnd"],"mappings":"6EAaO,MAAMA,EAAgC,WAsBhCC,EAAK,WAKLC,EAAS,WAKTC,EAAgB,WAOhBC,EAA2B"}

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

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

package/select-histogram/types.d.ts

@@ -1,33 +1,86 @@
-import { AriaAttributes, RefObject } from "react";
-import { HistogramSliderProps } from "../histogram-slider";
-import { TruncateType } from "../shared/dropdown-list/types";
-import { DropdownAlignmentType } from "../shared/dropdown-wrapper";
+import type { AriaAttributes, RefObject } from "react";
+import type { HistogramSliderProps } from "../histogram-slider";
+import type { TruncateType } from "../shared/dropdown-list/types";
+import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
+/**
+ * Subset of `HistogramSliderProps` passed to `SelectHistogram` to configure the
+ * embedded histogram slider rendered inside the dropdown.
+ */
 export type SelectHistogramSliderProps = Pick<HistogramSliderProps, "bins" | "interval" | "renderEmptyView" | "ariaLabels">;
+/**
+ * Props for the `SelectHistogram` component.
+ */
 export interface SelectHistogramProps extends Pick<AriaAttributes, "aria-labelledby" | "aria-describedby" | "aria-invalid"> {
+    /**
+     * Horizontal alignment of the dropdown relative to the trigger element.
+     *
+     * @default "left"
+     */
     alignment?: DropdownAlignmentType | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
     disabled?: boolean | undefined;
+    /** CSS `z-index` applied to the dropdown overlay. */
     dropdownZIndex?: number | undefined;
+    /** Renders the trigger in an error state when `true`. */
     error?: boolean | undefined;
     id?: string | undefined;
+    /** Configuration for the histogram slider rendered inside the dropdown. */
     histogramSlider: SelectHistogramSliderProps;
-    /** Specifies the truncation type. Truncated text will be replaced with ellipsis. Values: "middle" | "end" */
+    /**
+     * Controls how long option labels are truncated when they overflow.
+     *
+     * @default "end"
+     */
     optionTruncationType?: TruncateType | undefined;
+    /**
+     * Text shown in the trigger when no range is selected or no bins are provided.
+     *
+     * @default "Select"
+     */
     placeholder?: string | undefined;
+    /** Text prepended to each range label value. */
     rangeLabelPrefix?: string | undefined;
+    /** Text appended to each range label value. */
     rangeLabelSuffix?: string | undefined;
     readOnly?: boolean | undefined;
+    /**
+     * The currently selected range as `[min, max]`. When omitted, the selection
+     * initialises to `[minValue, minValue + interval]` derived from the first bin.
+     */
     value?: [number, number] | undefined;
     /**
-     * The root element that contains the dropdown element. Defaults to the document body.
+     * The root element that contains the dropdown element.
      *
-     * If the parent that contains the trigger element has a higher z-index than the dropdown,
-     * the dropdown may not be visible. Specify the parent element here instead
+     * @remarks Specify this if you need to change the parent of the
+     * dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
+     *
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
+     *
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
+    /** Called when focus leaves both the input and the dropdown. */
     onBlur?: (() => void) | undefined;
+    /**
+     * Called on every selection change.
+     *
+     * @param value The current `[min, max]` selection.
+     */
     onChange?: ((value: [number, number]) => void) | undefined;
+    /**
+     * Called when a thumb is released after selection is complete.
+     *
+     * @param value The settled `[min, max]` selection.
+     */
     onChangeEnd?: ((value: [number, number]) => void) | undefined;
+    /**
+     * Custom renderer for each bound value displayed in the trigger label.
+     * Overrides `rangeLabelPrefix`, `rangeLabelSuffix`, and the default `Typography.BodyBL` wrapper.
+     *
+     * @param value The numeric bound to render.
+     */
     renderRangeLabel?: ((value: number) => React.ReactNode) | undefined;
 }

package/shared/accessibility/index.d.ts

@@ -1,4 +1,5 @@
-export declare const VisuallyHidden: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+import React from "react";
+export declare const VisuallyHidden: (props: React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>) => React.ReactElement | null;
 /**
  * Handle compatibility of `inert` across React versions.
  * 19+ provides official support as a boolean, while it is handled as string in older versions

package/shared/accessibility/index.js

@@ -1,9 +1,2 @@
-import t from"styled-components";import"../../util/calendar-helper.js";import"../../util/date-helper.js";import"../../util/date-input-helper.js";import{isReact19 as i}from"../../util/version.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"react";import"@react-aria/live-announcer";const e=t.span`
-    clip-path: inset(50%);
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-`,r=t=>i()?t:t?"true":void 0,o=(...t)=>t.filter((t=>!!t)).join(" ");export{e as VisuallyHidden,o as concatIds,r 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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/shared/accessibility/index.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { isReact19 } from \"../../util\";\n\nexport const VisuallyHidden = styled.span`\n    clip-path: inset(50%);\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\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","styled","span","inertValue","value","isReact19","undefined","concatIds","selectors","filter","selector","join"],"mappings":"kUAGO,MAAMA,EAAiBC,EAAOC,IAAI;;;;;;;EAa5BC,EAAcC,GACnBC,IACOD,EAGJA,EAAQ,YAASE,EAGfC,EAAY,IAAIC,IAClBA,EAAUC,QAAQC,KAAeA,IAAUC,KAAK"}
+{"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/accessibility/index_13g9vp.css

@@ -0,0 +1 @@
+@layer fds{.v17efraz{-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap;}}

package/shared/clickable-icon/clickable-icon.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { ClickableIconProps } from "./types";
+import type { ClickableIconProps } from "./types";
 export declare const ClickableIcon: (props: ClickableIconProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

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

@@ -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

@@ -1 +1 @@
-{"version":3,"file":"clickable-icon.js","sources":["../../../src/shared/clickable-icon/clickable-icon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Main } from \"./clickable-icon.style\";\nimport { 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":"gKAIA,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"}
+{"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

@@ -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

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

package/shared/clickable-icon/clickable-icon.styles.js.map

@@ -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

@@ -0,0 +1,3 @@
+@layer fds{.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

@@ -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

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

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

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

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

@@ -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

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=component-loading-spinner.styles.js.map

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

@@ -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

@@ -0,0 +1,5 @@
+@layer fds{.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

@@ -1,4 +1,4 @@
-import { DropdownVariantType, LabelDisplayType } from "./types";
+import type { DropdownVariantType, LabelDisplayType } from "./types";
 interface DropdownLabelProps {
     bold?: boolean | undefined;
     displayType?: LabelDisplayType | undefined;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-label.js","sources":["../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import { useCallback, useContext, useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\nimport { Font } from \"../../theme\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport { DropdownVariantType, LabelDisplayType } from \"./types\";\nimport {\n    Label,\n    MatchedText,\n    PrimaryText,\n    SecondaryText,\n    TruncateFirstLine,\n    TruncateSecondLine,\n} from \"./dropdown-label.styles\";\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 theme = useContext(ThemeContext);\n\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]({ theme })\n            : Font.Spec[\"body-size-baseline\"]({ theme });\n    const fontFamily = Font.Spec[\"font-family\"]({ theme });\n    const { ref, width } = useResizeDetector();\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 * maxLines - 50;\n        },\n        [width, displayType, fontSize, fontFamily, maxLines]\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        shouldTruncateTitle || shouldTruncateLabel ? \"next-line\" : 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                <MatchedText $variant={variant}>\n                    {label.slice(startIndex, endIndex)}\n                </MatchedText>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <TruncateFirstLine $maxLines={maxLines} aria-hidden>\n                    {renderMatchInBold(displayText)}\n                </TruncateFirstLine>\n                <TruncateSecondLine $maxLines={maxLines} aria-hidden>\n                    {renderMatchInBold(displayText)}\n                </TruncateSecondLine>\n            </>\n        );\n    };\n\n    return (\n        <Label ref={ref} $labelDisplayType={itemDisplayType} $variant={variant}>\n            <PrimaryText\n                aria-label={label}\n                $bold={bold}\n                $maxLines={maxLines}\n                $selected={selected}\n                $disabled={disabled}\n                $truncateType={truncationType}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </PrimaryText>\n            {sublabel && (\n                <SecondaryText\n                    aria-label={sublabel}\n                    $maxLines={maxLines}\n                    $truncateType={truncationType}\n                    $labelDisplayType={displayType}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </SecondaryText>\n            )}\n        </Label>\n    );\n};\n"],"names":["DropdownLabel","bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","theme","useContext","ThemeContext","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","MatchedText","$variant","renderTruncatedText","TruncateFirstLine","$maxLines","TruncateSecondLine","Label","$labelDisplayType","PrimaryText","$bold","$selected","$disabled","$truncateType","SecondaryText"],"mappings":"4gBA4BO,MAAMA,EAAgB,EACzBC,OACAC,cAAc,SACdC,QACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EAAQC,EAAWC,GAEnBC,EACU,UAAZJ,EACMK,EAAKC,KAAK,gBAAgB,CAAEL,UAC5BI,EAAKC,KAAK,sBAAsB,CAAEL,UACtCM,EAAaF,EAAKC,KAAK,eAAe,CAAEL,WACxCO,IAAEA,EAAGC,MAAEA,GAAUC,IAKjBC,EAAuBC,GACxBC,IACG,GAAoB,WAAhBrB,IAA6BiB,EAC7B,OAAO,EAaX,OAPkBK,EAAaC,aAC3BF,EACA,GAAGT,MAAaG,MAKDE,EAAQd,EAAW,EAAE,GAE5C,CAACc,EAAOjB,EAAaY,EAAUG,EAAYZ,IAMzCqB,EAAsBC,GACxB,IAAMN,EAAqBlB,IAC3B,CAACkB,EAAsBlB,IAErByB,EAAsBD,GACxB,IAAMnB,GAAYa,EAAqBb,IACvC,CAACa,EAAsBb,IAWrBqB,EAAqBN,IACvB,IAAKnB,EACD,OAAOmB,EAGX,MAAMO,EAAQ1B,EAAW2B,cAAcC,OACjCC,EAAaV,EAAYQ,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAa7B,EAAWgC,OAEzC,OAAmB,IAAfH,EACOV,EAIPc,EAAAC,EAAA,CAAAC,SAAA,CACKpC,EAAMqC,MAAM,EAAGP,GAChBQ,EAACC,EAAW,CAAAC,SAAWjC,EAAO6B,SACzBpC,EAAMqC,MAAMP,EAAYE,KAE5BhC,EAAMqC,MAAML,KACd,EAILS,EAAuBrB,GAErBc,EAAAC,EAAA,CAAAC,SAAA,CACIE,EAACI,EAAiB,CAAAC,UAAYzC,EAAQ,eAAA,EAAAkC,SACjCV,EAAkBN,KAEvBkB,EAACM,EAAkB,CAAAD,UAAYzC,EAAQ,eAAA,EAAAkC,SAClCV,EAAkBN,QAMnC,OACIc,EAACW,EAAK,CAAC9B,IAAKA,EAAG+B,kBA3CfvB,GAAuBE,EAAsB,YAAc1B,EA2CRyC,SAAYjC,EAAO6B,SAAA,CAClEE,EAACS,EAAW,CAAA,aACI/C,EAAKgD,MACVlD,EAAI6C,UACAzC,EAAQ+C,UACR9C,EAAQ+C,UACR9C,EAAQ+C,cACJ7C,EAAc8B,SAET,WAAnB9B,GAA+BiB,EAC1BkB,EAAoBzC,GACpB0B,EAAkB1B,KAE3BK,GACGiC,EAACc,gBACe/C,EAAQsC,UACTzC,EAAQiD,cACJ7C,EAAcwC,kBACV/C,EAAWqC,SAEV,WAAnB9B,GAA+BmB,EAC1BgB,EAAoBpC,GACpBA,MAGV"}
+{"version":3,"file":"dropdown-label.js","sources":["../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Font } from \"../../theme\";\nimport { useApplyStyle } from \"../../theme/utils/use-apply-styles\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport * as styles from \"./dropdown-label.styles\";\nimport type { DropdownVariantType, LabelDisplayType } from \"./types\";\n\ninterface DropdownLabelProps {\n    bold?: boolean | undefined;\n    displayType?: LabelDisplayType | undefined;\n    label: string;\n    maxLines?: number | undefined;\n    searchTerm?: string | undefined;\n    selected?: boolean | undefined;\n    disabled?: boolean | undefined;\n    sublabel?: string | undefined;\n    truncationType?: \"middle\" | \"end\" | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const DropdownLabel = ({\n    bold,\n    displayType = \"inline\",\n    label,\n    searchTerm,\n    maxLines = 2,\n    selected,\n    disabled,\n    sublabel,\n    truncationType = \"middle\",\n    variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]\n            : Font.Spec[\"body-size-baseline\"];\n    const fontFamily = Font.Spec[\"font-family-body\"];\n    const { ref, width } = useResizeDetector();\n\n    const primaryTextRef = useRef<HTMLDivElement>(null);\n    const secondaryTextRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(primaryTextRef, {\n        [styles.tokens.primaryText.maxLines]: String(maxLines),\n    });\n\n    useApplyStyle(secondaryTextRef, {\n        [styles.tokens.secondaryText.maxLines]: String(maxLines),\n    });\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const hasExceededContainer = useCallback(\n        (displayText: string) => {\n            if (displayType !== \"inline\" || !width) {\n                return false;\n            }\n\n            // best-effort attempt to check if multi-line text will overflow,\n            // rendering an actual element in the DOM might be more accurate\n            // but might not be performant for large lists\n            const textWidth = StringHelper.getTextWidth(\n                displayText,\n                `${fontSize} '${fontFamily}'`\n            );\n\n            // there's less space than expected due to word breaks, so an\n            // arbitary offset is applied\n            return textWidth > width - 50;\n        },\n        [width, displayType, fontSize, fontFamily]\n    );\n\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const shouldTruncateTitle = useMemo(\n        () => hasExceededContainer(label),\n        [hasExceededContainer, label]\n    );\n    const shouldTruncateLabel = useMemo(\n        () => sublabel && hasExceededContainer(sublabel),\n        [hasExceededContainer, sublabel]\n    );\n\n    // css cannot truncate inline elements so force the display to render\n    // them separately\n    const itemDisplayType =\n        truncationType === \"middle\" &&\n        (shouldTruncateTitle || shouldTruncateLabel)\n            ? \"next-line\"\n            : displayType;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMatchInBold = (displayText: string) => {\n        if (!searchTerm) {\n            return displayText;\n        }\n\n        const match = searchTerm.toLowerCase().trim();\n        const startIndex = displayText.toLowerCase().indexOf(match);\n        const endIndex = startIndex + searchTerm.length;\n\n        if (startIndex === -1) {\n            return displayText;\n        }\n\n        return (\n            <>\n                {label.slice(0, startIndex)}\n                <span className={styles.matchedText}>\n                    {label.slice(startIndex, endIndex)}\n                </span>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateFirstLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateSecondLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                styles.label,\n                variant === \"small\" && styles.labelVariantSmall,\n                itemDisplayType === \"next-line\" && styles.labelNextLine\n            )}\n        >\n            <div\n                ref={primaryTextRef}\n                aria-label={label}\n                className={clsx(\n                    styles.primaryText,\n                    bold && styles.primaryTextBold,\n                    disabled && styles.primaryTextDisabled,\n                    !disabled && selected && styles.primaryTextSelected,\n                    itemDisplayType === \"inline\" &&\n                        styles.primaryTextLabelInline,\n                    truncationType === \"end\" && styles.primaryTextTruncateEnd\n                )}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </div>\n            {sublabel && (\n                <div\n                    ref={secondaryTextRef}\n                    aria-label={sublabel}\n                    className={clsx(\n                        styles.secondaryText,\n                        itemDisplayType === \"inline\" &&\n                            styles.secondaryTextLabelInline,\n                        truncationType === \"end\" &&\n                            styles.secondaryTextTruncateEnd,\n                        displayType === \"next-line\"\n                            ? styles.secondaryTextNextLine\n                            : styles.secondaryTextInline\n                    )}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["DropdownLabel","bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","primaryTextRef","useRef","secondaryTextRef","useApplyStyle","styles.tokens","primaryText","String","secondaryText","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","className","styles.matchedText","renderTruncatedText","clsx","styles.baseTruncateStyle","styles.truncateFirstLine","styles.truncateLineSingle","styles.truncateSecondLine","styles.label","styles.labelVariantSmall","styles.labelNextLine","styles.primaryText","styles.primaryTextBold","styles.primaryTextDisabled","styles.primaryTextSelected","styles.primaryTextLabelInline","styles.primaryTextTruncateEnd","styles.secondaryText","styles.secondaryTextLabelInline","styles.secondaryTextTruncateEnd","styles.secondaryTextNextLine","styles.secondaryTextInline"],"mappings":"soCAuBO,MAAMA,EAAgB,EACzBC,OACAC,cAAc,SAAQC,MACtBA,EACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EACU,UAAZD,EACME,EAAKC,KAAK,gBACVD,EAAKC,KAAK,sBACdC,EAAaF,EAAKC,KAAK,qBACvBE,IAAEA,EAAGC,MAAEA,GAAUC,IAEjBC,EAAiBC,EAAuB,MACxCC,EAAmBD,EAAuB,MAEhDE,EAAcH,EAAgB,CAC1B,CAACI,EAAcC,YAAYlB,UAAWmB,OAAOnB,KAGjDgB,EAAcD,EAAkB,CAC5B,CAACE,EAAcG,cAAcpB,UAAWmB,OAAOnB,KAMnD,MAAMqB,EAAuBC,GACxBC,IACG,GAAoB,WAAhB1B,IAA6Bc,EAC7B,OAAO,EAaX,OAPkBa,EAAaC,aAC3BF,EACA,GAAGjB,MAAaG,MAKDE,EAAQ,EAAE,GAEjC,CAACA,EAAOd,EAAaS,EAAUG,IAM7BiB,EAAsBC,GACxB,IAAMN,EAAqBvB,IAC3B,CAACuB,EAAsBvB,IAErB8B,EAAsBD,GACxB,IAAMxB,GAAYkB,EAAqBlB,IACvC,CAACkB,EAAsBlB,IAKrB0B,EACiB,WAAnBzB,IACCsB,GAAuBE,GAClB,YACA/B,EAKJiC,EAAqBP,IACvB,IAAKxB,EACD,OAAOwB,EAGX,MAAMQ,EAAQhC,EAAWiC,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAanC,EAAWsC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,EAAAC,EAAA,CAAAC,SAAA,CACK1C,EAAM2C,MAAM,EAAGP,GAChBQ,EAAA,OAAA,CAAMC,UAAWC,EAAkBJ,SAC9B1C,EAAM2C,MAAMP,EAAYE,KAE5BtC,EAAM2C,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAC,EAAA,CAAAC,SAAA,CACIE,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAC,EACa,IAAbhD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,KAEvBmB,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAG,EACa,IAAblD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,QAMnC,OACIe,EAAA,MAAA,CACI5B,IAAKA,EACLiC,UAAWG,EACPK,EACY,UAAZ9C,GAAuB+C,EACH,cAApBvB,GAAmCwB,GACtCb,SAAA,CAEDE,SACIhC,IAAKG,EAAc,aACPf,EACZ6C,UAAWG,EACPQ,EACA1D,GAAQ2D,EACRrD,GAAYsD,GACXtD,GAAYD,GAAYwD,EACL,WAApB5B,GACI6B,EACe,QAAnBtD,GAA4BuD,GAC/BnB,SAEmB,WAAnBpC,GAA+BsB,EAC1BmB,EAAoB/C,GACpBgC,EAAkBhC,KAE3BK,GACGuC,EAAA,MAAA,CACIhC,IAAKK,EAAgB,aACTZ,EACZwC,UAAWG,EACPc,EACoB,WAApB/B,GACIgC,EACe,QAAnBzD,GACI0D,EACY,cAAhBjE,EACMkE,EACAC,YAGU,WAAnB5D,GAA+BwB,EAC1BiB,EAAoB1C,GACpBA,MAGZ"}

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

@@ -1,23 +1,27 @@
-import { DropdownVariantType, LabelDisplayType, TruncateType } from "./types";
-interface LabelStyleProps {
-    $labelDisplayType: LabelDisplayType;
-    $variant: DropdownVariantType;
-}
-interface LabelTextStyleProps {
-    $labelDisplayType?: LabelDisplayType;
-    $maxLines?: number;
-    $selected?: boolean;
-    $disabled?: boolean;
-    $truncateType?: TruncateType;
-    $bold?: boolean;
-}
-interface MatchedTextStyleProps {
-    $variant: DropdownVariantType;
-}
-export declare const PrimaryText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof LabelTextStyleProps> & LabelTextStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof LabelTextStyleProps> & LabelTextStyleProps, never>>> & string;
-export declare const SecondaryText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof LabelTextStyleProps> & LabelTextStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof LabelTextStyleProps> & LabelTextStyleProps, never>>> & string;
-export declare const MatchedText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$variant"> & MatchedTextStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$variant"> & MatchedTextStyleProps, never>>> & string;
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof LabelStyleProps> & LabelStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof LabelStyleProps> & LabelStyleProps, never>>> & string;
-export declare const TruncateFirstLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof LabelTextStyleProps> & LabelTextStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof LabelTextStyleProps> & LabelTextStyleProps, never>>> & string;
-export declare const TruncateSecondLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof LabelTextStyleProps> & LabelTextStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof LabelTextStyleProps> & LabelTextStyleProps, never>>> & string;
-export {};
+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;