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

package/input-range-slider/input-range-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-range-slider.js","sources":["../../src/input-range-slider/input-range-slider.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport React, { useEffect, useState } from \"react\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport { Colour } from \"../theme\";\nimport { useId } from \"../util\";\nimport {\n    IndicatorLabelContainer,\n    Knob,\n    LabelContainer,\n    LabelText,\n    Slider,\n    SliderThumb,\n    SliderTrack,\n    Wrapper,\n} from \"./input-range-slider.styles\";\nimport { InputRangeSliderProps } from \"./types\";\n\nexport const InputRangeSlider = ({\n    id,\n    value,\n    min = 0,\n    max = 100,\n    step = 1,\n    minRange = 0,\n    numOfThumbs = 2,\n    colors,\n    disabled,\n    readOnly,\n    showSliderLabels,\n    sliderLabelPrefix,\n    sliderLabelSuffix,\n    showIndicatorLabel,\n    indicatorLabelPrefix,\n    indicatorLabelSuffix,\n    ariaLabels,\n    ariaDescriptions,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    renderSliderLabel,\n    onChange,\n    onChangeEnd,\n    ...otherProps\n}: InputRangeSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [selection, setSelection] = useState<number[]>(initialiseSelection());\n    const [focusedThumbIndex, setFocusedThumbIndex] = useState<number | null>(\n        null\n    );\n    const internalId = useId();\n    const trackColors = getTrackColors();\n    const indicatorTextId = `${internalId}-indicator`;\n    const instructionTextId = `${internalId}-instruction`;\n    const resolvedAriaLabels = getResolvedAriaLabels();\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initialiseSelection());\n        }\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (value: number | readonly number[], index: number) => {\n        if (readOnly || disabled) {\n            return;\n        }\n\n        if (typeof value === \"number\") {\n            const nextValue = [value];\n            setSelection(nextValue);\n            onChange?.(nextValue);\n            return;\n        }\n\n        if (index > -1 && selection[index] === value[index]) {\n            // skip unnecessary update when dragging the start thumb across the end thumb\n            return;\n        }\n\n        const nextValue = [...value];\n        setSelection(nextValue);\n        onChange?.(nextValue);\n    };\n\n    const handleChangeEnd = (value: number | readonly number[]) => {\n        if (readOnly || disabled) {\n            return;\n        }\n\n        if (typeof value === \"number\") {\n            const val = [value];\n            setSelection(val);\n            onChangeEnd?.(val);\n            return;\n        }\n\n        const newSelection = [...value];\n        setSelection(newSelection);\n        onChangeEnd?.(newSelection);\n    };\n\n    const handleThumbKeyDown = (\n        event: React.KeyboardEvent<HTMLDivElement>,\n        index: number\n    ) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        const message = getBlockedMovementMessage(event.key, index);\n\n        if (!message) {\n            return;\n        }\n\n        clearAnnouncer(\"assertive\");\n        announce(message, \"assertive\");\n    };\n\n    const handleNativeRangeChange = (\n        event: React.ChangeEvent<HTMLInputElement>,\n        index: number\n    ) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        const nextRawValue = Number(event.currentTarget.value);\n\n        const nextSelection = [...selection];\n        nextSelection[index] = clampValueForThumb(\n            nextRawValue,\n            index,\n            selection\n        );\n\n        setSelection(nextSelection);\n        onChange?.(nextSelection);\n        onChangeEnd?.(nextSelection);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initialiseSelection() {\n        if (value && value.length === numOfThumbs) {\n            return value;\n        }\n\n        const values: number[] = [];\n        for (let i = 0; i < numOfThumbs; i++) {\n            values.push(min + step * i);\n        }\n        return values;\n    }\n\n    function getResolvedAriaLabels() {\n        return Array.from({ length: numOfThumbs }, (_, index) => {\n            return ariaLabels?.[index] || getDefaultAriaLabel(index);\n        });\n    }\n\n    function getDefaultAriaLabel(index: number) {\n        if (numOfThumbs === 1) {\n            return \"\";\n        }\n\n        if (index === 0) {\n            return \"Minimum value slider\";\n        }\n\n        if (index === numOfThumbs - 1) {\n            return \"Maximum value slider\";\n        }\n\n        return \"Indeterminate value slider\";\n    }\n\n    function getThumbDescriptionText(index: number) {\n        return ariaDescriptions?.[index];\n    }\n\n    function getTrackColors() {\n        const defaultColors = getDefaultColors();\n        return new Array(numOfThumbs + 1).fill(0).map((_, i) => {\n            return colors?.[i] || defaultColors[i];\n        });\n    }\n\n    function getDefaultColors() {\n        const inactiveColor =\n            disabled || readOnly\n                ? Colour[\"border-disabled\"]\n                : Colour[\"border-strong\"];\n        const activeColor =\n            disabled || readOnly\n                ? Colour[\"border-selected-disabled\"]\n                : Colour[\"border-selected\"];\n\n        if (numOfThumbs === 1) {\n            return [activeColor, inactiveColor];\n        }\n\n        const defaultColors: typeof colors = [inactiveColor];\n\n        for (let index = 0; index < numOfThumbs - 1; index++) {\n            defaultColors.push(activeColor);\n        }\n\n        defaultColors.push(inactiveColor);\n        return defaultColors;\n    }\n\n    function getValueText(currentValue: number) {\n        return `${sliderLabelPrefix || \"\"}${currentValue}${\n            sliderLabelSuffix || \"\"\n        }`;\n    }\n\n    function getThumbDescriptionIds(thumbDescriptionId?: string) {\n        return concatIds(\n            ariaDescribedBy,\n            showIndicatorLabel ? indicatorTextId : undefined,\n            disabled || readOnly ? undefined : instructionTextId,\n            thumbDescriptionId\n        );\n    }\n\n    function isIncreaseKey(key: string) {\n        return [\"ArrowRight\", \"ArrowUp\", \"PageUp\", \"End\"].includes(key);\n    }\n\n    function isDecreaseKey(key: string) {\n        return [\"ArrowLeft\", \"ArrowDown\", \"PageDown\", \"Home\"].includes(key);\n    }\n\n    function getSliderTypeText(label?: string) {\n        if (!label) {\n            return \"slider\";\n        }\n\n        return label.toLowerCase();\n    }\n\n    function getSliderTargetText(label?: string) {\n        if (!label) {\n            return \"slider\";\n        }\n\n        return label.replace(/ slider$/i, \"\").toLowerCase();\n    }\n\n    function getBlockedMovementMessage(key: string, index: number) {\n        if (numOfThumbs < 2) {\n            return \"\";\n        }\n\n        const currentValue = selection[index];\n        const previousValue = index > 0 ? selection[index - 1] : undefined;\n        const nextValue =\n            index < selection.length - 1 ? selection[index + 1] : undefined;\n\n        const currentLabel = resolvedAriaLabels[index];\n        const previousLabel =\n            index > 0 ? resolvedAriaLabels[index - 1] : undefined;\n        const nextLabel =\n            index < resolvedAriaLabels.length - 1\n                ? resolvedAriaLabels[index + 1]\n                : undefined;\n\n        if (isIncreaseKey(key)) {\n            if (\n                nextValue !== undefined &&\n                currentValue >= nextValue - minRange\n            ) {\n                return `The ${getSliderTypeText(\n                    currentLabel\n                )} has reached its limit. Increase the ${getSliderTargetText(\n                    nextLabel\n                )} to set a higher ${getSliderTargetText(currentLabel)}.`;\n            }\n        }\n\n        if (isDecreaseKey(key)) {\n            if (\n                previousValue !== undefined &&\n                currentValue <= previousValue + minRange\n            ) {\n                return `The ${getSliderTypeText(\n                    currentLabel\n                )} has reached its limit. Decrease the ${getSliderTargetText(\n                    previousLabel\n                )} to set a lower ${getSliderTargetText(currentLabel)}.`;\n            }\n        }\n\n        return \"\";\n    }\n\n    function getThumbMin(index: number, values = selection) {\n        if (index === 0) {\n            return min;\n        }\n\n        return values[index - 1] + minRange;\n    }\n\n    function getThumbMax(index: number, values = selection) {\n        if (index === values.length - 1) {\n            return max;\n        }\n\n        return values[index + 1] - minRange;\n    }\n\n    function clampValueForThumb(\n        nextValue: number,\n        index: number,\n        values: number[]\n    ) {\n        const minAllowed = getThumbMin(index, values);\n        const maxAllowed = getThumbMax(index, values);\n\n        return Math.min(maxAllowed, Math.max(minAllowed, nextValue));\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const formatLabel = (value: number) => {\n        if (renderSliderLabel) {\n            return renderSliderLabel(value);\n        }\n\n        return (\n            <LabelText>\n                {sliderLabelPrefix}\n                {value}\n                {sliderLabelSuffix}\n            </LabelText>\n        );\n    };\n\n    const formatIndicationLabel = () => {\n        let formattedSelection = \"\";\n\n        if (selection.length === 1) {\n            formattedSelection = `${selection[0]}`;\n        } else if (selection.length === 2) {\n            formattedSelection = `${selection[0]} - ${selection[1]}`;\n        } else if (selection.length > 2) {\n            const minValue = Math.min(...selection);\n            const maxValue = Math.max(...selection);\n            formattedSelection = `${minValue} - ${maxValue}`;\n        }\n\n        return (\n            <LabelText>\n                {indicatorLabelPrefix}\n                {formattedSelection}\n                {indicatorLabelSuffix}\n            </LabelText>\n        );\n    };\n\n    return (\n        <Wrapper\n            {...otherProps}\n            id={id}\n            role=\"group\"\n            aria-labelledby={ariaLabelledBy}\n            aria-disabled={disabled}\n        >\n            {!disabled && !readOnly && (\n                <VisuallyHidden id={instructionTextId}>\n                    Use left and right arrow keys to adjust the slider.\n                </VisuallyHidden>\n            )}\n\n            {showIndicatorLabel && (\n                <IndicatorLabelContainer id={indicatorTextId}>\n                    {formatIndicationLabel()}\n                </IndicatorLabelContainer>\n            )}\n\n            {selection.map((thumbValue, index) => {\n                const thumbLabelTextId = `${internalId}-thumb-label-${index}`;\n                const thumbDescriptionText = getThumbDescriptionText(index);\n                const thumbDescriptionTextId = thumbDescriptionText\n                    ? `${internalId}-thumb-description-${index}`\n                    : undefined;\n\n                return (\n                    <VisuallyHidden key={`native-slider-${index}`}>\n                        {thumbDescriptionTextId && (\n                            <span id={thumbDescriptionTextId}>\n                                {thumbDescriptionText}\n                            </span>\n                        )}\n                        <span id={thumbLabelTextId}>\n                            {resolvedAriaLabels[index]}\n                        </span>\n\n                        <input\n                            type=\"range\"\n                            min={getThumbMin(index)}\n                            max={getThumbMax(index)}\n                            step={step}\n                            value={thumbValue}\n                            aria-disabled={disabled || undefined}\n                            readOnly={readOnly}\n                            aria-labelledby={concatIds(\n                                ariaLabelledBy,\n                                thumbLabelTextId\n                            )}\n                            aria-describedby={getThumbDescriptionIds(\n                                thumbDescriptionTextId\n                            )}\n                            aria-valuetext={getValueText(thumbValue)}\n                            aria-invalid={ariaInvalid}\n                            onFocus={() => setFocusedThumbIndex(index)}\n                            onBlur={() => setFocusedThumbIndex(null)}\n                            onChange={(event) =>\n                                handleNativeRangeChange(event, index)\n                            }\n                            onKeyDown={(event) => {\n                                handleThumbKeyDown(event, index);\n                            }}\n                        />\n                    </VisuallyHidden>\n                );\n            })}\n\n            {/* Native range inputs provide the accessible interaction model.\n                The visible react-slider is presentation-only. */}\n            <Slider\n                step={step}\n                min={min}\n                max={max}\n                value={selection}\n                disabled={disabled || readOnly}\n                onChange={handleChange}\n                onAfterChange={handleChangeEnd}\n                minDistance={minRange}\n                aria-hidden\n                renderThumb={(\n                    thumbProps: React.HTMLAttributes<HTMLDivElement>,\n                    state\n                ) => {\n                    return (\n                        <SliderThumb\n                            data-testid={`slider-thumb-${state.index}`}\n                            {...thumbProps}\n                            tabIndex={-1}\n                            aria-hidden\n                            data-focused={\n                                focusedThumbIndex === state.index\n                                    ? \"true\"\n                                    : undefined\n                            }\n                        >\n                            <Knob $disabled={disabled} $readOnly={readOnly} />\n                        </SliderThumb>\n                    );\n                }}\n                renderTrack={(\n                    trackProps: React.HTMLAttributes<HTMLDivElement>,\n                    state\n                ) => {\n                    return (\n                        <SliderTrack\n                            data-testid={`slider-track-${state.index}`}\n                            {...trackProps}\n                            $color={trackColors[state.index]}\n                        />\n                    );\n                }}\n            />\n\n            {showSliderLabels && (\n                <LabelContainer>\n                    <div>{formatLabel(min)}</div>\n                    <div>{formatLabel(max)}</div>\n                </LabelContainer>\n            )}\n        </Wrapper>\n    );\n};\n"],"names":["InputRangeSlider","_a","id","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","ariaLabels","ariaDescriptions","ariaInvalid","ariaLabelledBy","ariaDescribedBy","renderSliderLabel","onChange","onChangeEnd","otherProps","__rest","selection","setSelection","useState","initialiseSelection","focusedThumbIndex","setFocusedThumbIndex","internalId","useId","trackColors","defaultColors","inactiveColor","Colour","activeColor","index","push","getDefaultColors","Array","fill","map","_","i","getTrackColors","indicatorTextId","instructionTextId","resolvedAriaLabels","from","length","getDefaultAriaLabel","useEffect","handleThumbKeyDown","event","message","key","currentValue","previousValue","undefined","nextValue","currentLabel","previousLabel","nextLabel","includes","isIncreaseKey","getSliderTypeText","getSliderTargetText","isDecreaseKey","getBlockedMovementMessage","clearAnnouncer","announce","handleNativeRangeChange","nextRawValue","Number","currentTarget","nextSelection","values","minAllowed","getThumbMin","maxAllowed","getThumbMax","Math","clampValueForThumb","label","toLowerCase","replace","formatLabel","_jsxs","LabelText","children","Wrapper","Object","assign","role","_jsx","VisuallyHidden","IndicatorLabelContainer","formattedSelection","formatIndicationLabel","thumbValue","thumbLabelTextId","thumbDescriptionText","getThumbDescriptionText","thumbDescriptionTextId","type","concatIds","thumbDescriptionId","onFocus","onBlur","onKeyDown","Slider","onAfterChange","val","newSelection","minDistance","renderThumb","thumbProps","state","SliderThumb","tabIndex","Knob","$disabled","$readOnly","renderTrack","trackProps","SliderTrack","$color","LabelContainer"],"mappings":"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"}
+{"version":3,"file":"input-range-slider.js","sources":["../../src/input-range-slider/input-range-slider.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { Colour } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-range-slider.styles\";\nimport { Slider } from \"./slider-components\";\nimport { PAGE_STEP_MULTIPLIER } from \"./slider-utils\";\nimport type { InputRangeSliderProps } from \"./types\";\n\n// @catalog\n/**\n * A draggable track slider for selecting one or more numeric values within a\n * bounded range.\n *\n * Use `InputRangeSlider` when the selection does not need to be precise;\n * the user picks a value or a range by dragging thumb controls along a track.\n * @keywords field, form, input, range, slider\n */\nexport const InputRangeSlider = ({\n    id,\n    value,\n    min = 0,\n    max = 100,\n    step = 1,\n    minRange = 0,\n    numOfThumbs = 2,\n    colors,\n    disabled,\n    readOnly,\n    showSliderLabels,\n    sliderLabelPrefix,\n    sliderLabelSuffix,\n    showIndicatorLabel,\n    indicatorLabelPrefix,\n    indicatorLabelSuffix,\n    ariaLabels,\n    ariaDescriptions,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    renderSliderLabel,\n    onChange,\n    onChangeEnd,\n    className,\n    ...otherProps\n}: InputRangeSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [selection, setSelection] = useState<number[]>(initialiseSelection());\n    const [focusedThumbIndex, setFocusedThumbIndex] = useState<number | null>(\n        null\n    );\n    const internalId = useId();\n    const trackColors = getTrackColors();\n    const indicatorTextId = `${internalId}-indicator`;\n    const instructionTextId = `${internalId}-instruction`;\n    const resolvedAriaLabels = getResolvedAriaLabels();\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initialiseSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (value: number[]) => {\n        if (readOnly || disabled) {\n            return;\n        }\n\n        setSelection(value);\n        onChange?.(value);\n    };\n\n    const handleChangeEnd = (value: number[]) => {\n        if (readOnly || disabled) {\n            return;\n        }\n\n        setSelection(value);\n        onChangeEnd?.(value);\n    };\n\n    const handleThumbKeyDown = (\n        event: React.KeyboardEvent<HTMLDivElement>,\n        index: number\n    ) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        // Browser native range input only steps by 1 for PageUp/Down; apply large step manually\n        if (event.key === \"PageUp\" || event.key === \"PageDown\") {\n            event.preventDefault();\n            const delta =\n                (event.key === \"PageUp\" ? 1 : -1) * step * PAGE_STEP_MULTIPLIER;\n            const nextSelection = [...selection];\n            nextSelection[index] = clampValueForThumb(\n                selection[index] + delta,\n                index,\n                selection\n            );\n            if (nextSelection[index] !== selection[index]) {\n                setSelection(nextSelection);\n                onChange?.(nextSelection);\n                onChangeEnd?.(nextSelection);\n            }\n        }\n\n        const message = getBlockedMovementMessage(event.key, index);\n\n        if (!message) {\n            return;\n        }\n\n        clearAnnouncer(\"assertive\");\n        announce(message, \"assertive\");\n    };\n\n    const handleNativeRangeChange = (\n        event: React.ChangeEvent<HTMLInputElement>,\n        index: number\n    ) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        const nextRawValue = Number(event.currentTarget.value);\n\n        const nextSelection = [...selection];\n        nextSelection[index] = clampValueForThumb(\n            nextRawValue,\n            index,\n            selection\n        );\n\n        setSelection(nextSelection);\n        onChange?.(nextSelection);\n        onChangeEnd?.(nextSelection);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initialiseSelection() {\n        if (value && value.length === numOfThumbs) {\n            return value;\n        }\n\n        const values: number[] = [];\n        for (let i = 0; i < numOfThumbs; i++) {\n            values.push(min + step * i);\n        }\n        return values;\n    }\n\n    function getResolvedAriaLabels() {\n        return Array.from({ length: numOfThumbs }, (_, index) => {\n            return ariaLabels?.[index] || getDefaultAriaLabel(index);\n        });\n    }\n\n    function getDefaultAriaLabel(index: number) {\n        if (numOfThumbs === 1) {\n            return \"\";\n        }\n\n        if (index === 0) {\n            return \"Minimum value slider\";\n        }\n\n        if (index === numOfThumbs - 1) {\n            return \"Maximum value slider\";\n        }\n\n        return \"Indeterminate value slider\";\n    }\n\n    function getThumbDescriptionText(index: number) {\n        return ariaDescriptions?.[index];\n    }\n\n    function getTrackColors() {\n        const defaultColors = getDefaultColors();\n        return new Array(numOfThumbs + 1).fill(0).map((_, i) => {\n            return colors?.[i] || defaultColors[i];\n        });\n    }\n\n    function getDefaultColors() {\n        const inactiveColor =\n            disabled || readOnly\n                ? Colour[\"border-disabled\"]\n                : Colour[\"border-strong\"];\n        const activeColor =\n            disabled || readOnly\n                ? Colour[\"border-selected-disabled\"]\n                : Colour[\"border-selected\"];\n\n        if (numOfThumbs === 1) {\n            return [activeColor, inactiveColor];\n        }\n\n        const defaultColors: typeof colors = [inactiveColor];\n\n        for (let index = 0; index < numOfThumbs - 1; index++) {\n            defaultColors.push(activeColor);\n        }\n\n        defaultColors.push(inactiveColor);\n        return defaultColors;\n    }\n\n    function getValueText(currentValue: number) {\n        return `${sliderLabelPrefix || \"\"}${currentValue}${\n            sliderLabelSuffix || \"\"\n        }`;\n    }\n\n    function getThumbDescriptionIds(thumbDescriptionId?: string) {\n        return concatIds(\n            ariaDescribedBy,\n            showIndicatorLabel ? indicatorTextId : undefined,\n            disabled || readOnly ? undefined : instructionTextId,\n            thumbDescriptionId\n        );\n    }\n\n    function isIncreaseKey(key: string) {\n        return [\"ArrowRight\", \"ArrowUp\", \"PageUp\", \"End\"].includes(key);\n    }\n\n    function isDecreaseKey(key: string) {\n        return [\"ArrowLeft\", \"ArrowDown\", \"PageDown\", \"Home\"].includes(key);\n    }\n\n    function getSliderTypeText(label?: string) {\n        if (!label) {\n            return \"slider\";\n        }\n\n        return label.toLowerCase();\n    }\n\n    function getSliderTargetText(label?: string) {\n        if (!label) {\n            return \"slider\";\n        }\n\n        return label.replace(/ slider$/i, \"\").toLowerCase();\n    }\n\n    function getBlockedMovementMessage(key: string, index: number) {\n        if (numOfThumbs < 2) {\n            return \"\";\n        }\n\n        const currentValue = selection[index];\n        const previousValue = index > 0 ? selection[index - 1] : undefined;\n        const nextValue =\n            index < selection.length - 1 ? selection[index + 1] : undefined;\n\n        const currentLabel = resolvedAriaLabels[index];\n        const previousLabel =\n            index > 0 ? resolvedAriaLabels[index - 1] : undefined;\n        const nextLabel =\n            index < resolvedAriaLabels.length - 1\n                ? resolvedAriaLabels[index + 1]\n                : undefined;\n\n        if (isIncreaseKey(key)) {\n            if (\n                nextValue !== undefined &&\n                currentValue >= nextValue - minRange\n            ) {\n                return `The ${getSliderTypeText(\n                    currentLabel\n                )} has reached its limit. Increase the ${getSliderTargetText(\n                    nextLabel\n                )} to set a higher ${getSliderTargetText(currentLabel)}.`;\n            }\n        }\n\n        if (isDecreaseKey(key)) {\n            if (\n                previousValue !== undefined &&\n                currentValue <= previousValue + minRange\n            ) {\n                return `The ${getSliderTypeText(\n                    currentLabel\n                )} has reached its limit. Decrease the ${getSliderTargetText(\n                    previousLabel\n                )} to set a lower ${getSliderTargetText(currentLabel)}.`;\n            }\n        }\n\n        return \"\";\n    }\n\n    function getThumbMin(index: number, values = selection) {\n        if (index === 0) {\n            return min;\n        }\n\n        return values[index - 1] + minRange;\n    }\n\n    function getThumbMax(index: number, values = selection) {\n        if (index === values.length - 1) {\n            return max;\n        }\n\n        return values[index + 1] - minRange;\n    }\n\n    function clampValueForThumb(\n        nextValue: number,\n        index: number,\n        values: number[]\n    ) {\n        const minAllowed = getThumbMin(index, values);\n        const maxAllowed = getThumbMax(index, values);\n\n        return Math.min(maxAllowed, Math.max(minAllowed, nextValue));\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const formatLabel = (value: number) => {\n        if (renderSliderLabel) {\n            return renderSliderLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL className={styles.labelText}>\n                {sliderLabelPrefix}\n                {value}\n                {sliderLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const formatIndicationLabel = () => {\n        let formattedSelection = \"\";\n\n        if (selection.length === 1) {\n            formattedSelection = `${selection[0]}`;\n        } else if (selection.length === 2) {\n            formattedSelection = `${selection[0]} - ${selection[1]}`;\n        } else if (selection.length > 2) {\n            const minValue = Math.min(...selection);\n            const maxValue = Math.max(...selection);\n            formattedSelection = `${minValue} - ${maxValue}`;\n        }\n\n        return (\n            <Typography.BodyBL className={styles.labelText}>\n                {indicatorLabelPrefix}\n                {formattedSelection}\n                {indicatorLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    return (\n        <div\n            {...otherProps}\n            id={id}\n            role=\"group\"\n            aria-labelledby={ariaLabelledBy}\n            aria-disabled={disabled}\n            className={clsx(styles.wrapper, className)}\n        >\n            {!disabled && !readOnly && (\n                <VisuallyHidden id={instructionTextId}>\n                    Use left and right arrow keys to adjust the slider.\n                </VisuallyHidden>\n            )}\n\n            {showIndicatorLabel && (\n                <div\n                    id={indicatorTextId}\n                    className={styles.indicatorLabelContainer}\n                >\n                    {formatIndicationLabel()}\n                </div>\n            )}\n\n            {selection.map((thumbValue, index) => {\n                const thumbLabelTextId = `${internalId}-thumb-label-${index}`;\n                const thumbDescriptionText = getThumbDescriptionText(index);\n                const thumbDescriptionTextId = thumbDescriptionText\n                    ? `${internalId}-thumb-description-${index}`\n                    : undefined;\n\n                return (\n                    <VisuallyHidden key={`native-slider-${index}`}>\n                        {thumbDescriptionTextId && (\n                            <span id={thumbDescriptionTextId}>\n                                {thumbDescriptionText}\n                            </span>\n                        )}\n                        <span id={thumbLabelTextId}>\n                            {resolvedAriaLabels[index]}\n                        </span>\n\n                        <input\n                            data-testid={`slider-input-${index}`}\n                            type=\"range\"\n                            min={getThumbMin(index)}\n                            max={getThumbMax(index)}\n                            step={step}\n                            value={thumbValue}\n                            aria-disabled={disabled || undefined}\n                            readOnly={readOnly}\n                            aria-labelledby={concatIds(\n                                ariaLabelledBy,\n                                thumbLabelTextId\n                            )}\n                            aria-describedby={getThumbDescriptionIds(\n                                thumbDescriptionTextId\n                            )}\n                            aria-valuetext={getValueText(thumbValue)}\n                            aria-invalid={ariaInvalid}\n                            onFocus={() => setFocusedThumbIndex(index)}\n                            onBlur={() => setFocusedThumbIndex(null)}\n                            onChange={(event) =>\n                                handleNativeRangeChange(event, index)\n                            }\n                            onKeyDown={(event) => {\n                                handleThumbKeyDown(event, index);\n                            }}\n                        />\n                    </VisuallyHidden>\n                );\n            })}\n\n            {/* Native range inputs provide the accessible interaction model.\n                The visible slider is presentation-only. */}\n            <Slider\n                selection={selection}\n                min={min}\n                max={max}\n                step={step}\n                minRange={minRange}\n                disabled={disabled}\n                readOnly={readOnly}\n                trackColors={trackColors}\n                focusedThumbIndex={focusedThumbIndex}\n                onChange={handleChange}\n                onChangeEnd={handleChangeEnd}\n            />\n\n            {showSliderLabels && (\n                <div className={styles.labelContainer}>\n                    <div>{formatLabel(min)}</div>\n                    <div>{formatLabel(max)}</div>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["InputRangeSlider","_a","id","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","ariaLabels","ariaDescriptions","ariaInvalid","ariaLabelledBy","ariaDescribedBy","renderSliderLabel","onChange","onChangeEnd","className","otherProps","__rest","selection","setSelection","useState","initialiseSelection","focusedThumbIndex","setFocusedThumbIndex","internalId","useId","trackColors","defaultColors","inactiveColor","Colour","activeColor","index","push","getDefaultColors","Array","fill","map","_","i","getTrackColors","indicatorTextId","instructionTextId","resolvedAriaLabels","from","length","getDefaultAriaLabel","useEffect","handleThumbKeyDown","event","key","preventDefault","delta","PAGE_STEP_MULTIPLIER","nextSelection","clampValueForThumb","message","currentValue","previousValue","undefined","nextValue","currentLabel","previousLabel","nextLabel","includes","isIncreaseKey","getSliderTypeText","getSliderTargetText","isDecreaseKey","getBlockedMovementMessage","clearAnnouncer","announce","values","label","toLowerCase","replace","getThumbMin","getThumbMax","minAllowed","maxAllowed","Math","formatLabel","_jsxs","Typography","BodyBL","styles.labelText","children","Object","assign","role","clsx","styles.wrapper","_jsx","VisuallyHidden","styles.indicatorLabelContainer","formattedSelection","formatIndicationLabel","thumbValue","thumbLabelTextId","thumbDescriptionText","getThumbDescriptionText","thumbDescriptionTextId","type","concatIds","thumbDescriptionId","onFocus","onBlur","nextRawValue","Number","currentTarget","handleNativeRangeChange","onKeyDown","Slider","styles.labelContainer"],"mappings":"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"}

package/input-range-slider/input-range-slider.styles.d.ts

@@ -1,28 +1,20 @@
-import ReactSlider from "react-slider";
-import { ThemeStyleProps } from "../theme/types";
-interface TrackStyleProps {
-    $color: string | ((props: ThemeStyleProps) => string) | undefined;
-}
-interface ThumbStyleProps {
-    $disabled: boolean | undefined;
-    $readOnly: boolean | undefined;
-}
-export declare const Wrapper: 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 LabelContainer: 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 IndicatorLabelContainer: 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 LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never> & Partial<Pick<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never>>> & string;
-export declare const Slider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-slider").ReactSliderProps<number | readonly number[]> & import("react").RefAttributes<ReactSlider<number | readonly number[]>>, never> & Partial<Pick<import("react-slider").ReactSliderProps<number | readonly number[]> & import("react").RefAttributes<ReactSlider<number | readonly number[]>>, never>>> & string & Omit<typeof ReactSlider, keyof import("react").Component<any, {}, any>>;
-export declare const Knob: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ThumbStyleProps> & ThumbStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ThumbStyleProps> & ThumbStyleProps, never>>> & string;
-export declare const SliderThumb: 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 SliderTrack: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color"> & TrackStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color"> & TrackStyleProps, never>>> & string;
-export {};
+export declare const tokens: {
+    track: {
+        backgroundColor: string;
+        left: string;
+        right: string;
+    };
+    thumb: {
+        left: string;
+    };
+};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const labelContainer: import("@linaria/core").LinariaClassName;
+export declare const indicatorLabelContainer: import("@linaria/core").LinariaClassName;
+export declare const labelText: import("@linaria/core").LinariaClassName;
+export declare const slider: import("@linaria/core").LinariaClassName;
+export declare const knob: import("@linaria/core").LinariaClassName;
+export declare const knobDisabled: import("@linaria/core").LinariaClassName;
+export declare const knobInteractive: import("@linaria/core").LinariaClassName;
+export declare const sliderThumb: import("@linaria/core").LinariaClassName;
+export declare const sliderTrack: import("@linaria/core").LinariaClassName;

package/input-range-slider/input-range-slider.styles.js

@@ -1,66 +1,2 @@
-import o from"react-slider";import r,{css as e}from"styled-components";import{Spacing as t,Colour as i,Shadow as a,Border as s,Radius as d}from"../theme/index.js";import{Typography as l}from"../typography/typography.js";const n=r.div`
-    isolation: isolate;
-`,p=r.div`
-    margin-top: ${t["spacing-8"]};
-    display: flex;
-    justify-content: space-between;
-    gap: ${t["spacing-8"]};
-`,c=r.div`
-    margin-bottom: ${t["spacing-8"]};
-`,m=r(l.BodyBL)`
-    overflow-wrap: anywhere;
-`,$=r(o)`
-    height: 0.875rem;
-`,b=r.div`
-    height: 2.5rem;
-    width: 2.5rem;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    ${o=>o.$disabled?e`
-                cursor: not-allowed;
-            `:o.$readOnly?void 0:e`
-                cursor: grab;
-                &:active {
-                    cursor: grabbing;
-                }
-            `}
-
-    &:after {
-        content: "";
-        display: block;
-        height: 0.875rem;
-        width: 0.875rem;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        background-color: ${i.bg};
-        box-shadow: ${a["sm-subtle"]};
-        border: ${s["width-010"]} ${s.solid}
-            ${o=>o.$disabled?i["border-selected-disabled"]:i["border-strong"]};
-        border-radius: ${d.full};
-    }
-`,f=r.div`
-    height: 0.875rem;
-    width: 0.875rem;
-    position: relative;
-    outline: none;
-
-    &:focus ${b}:after, &[data-focused="true"] ${b}:after {
-        outline-offset: -1px;
-        outline: ${s["width-040"]} ${s.solid}
-            ${i["border-selected"]};
-    }
-`,g=r.div`
-    height: 0.25rem;
-    top: 50%;
-    transform: translateY(-50%);
-    border-radius: ${d.full};
-
-    background: ${o=>o.$color&&"function"==typeof o.$color?o.$color(o):o.$color||i["border-strong"](o)};
-`;export{c as IndicatorLabelContainer,b as Knob,p as LabelContainer,m as LabelText,$ as Slider,f as SliderThumb,g as SliderTrack,n as Wrapper};
+import"./input-range-slider.styles_1pbel2v.css";const t={track:{backgroundColor:"--fds-internal-inputRangeSlider-track-backgroundColor",left:"--fds-internal-inputRangeSlider-track-left",right:"--fds-internal-inputRangeSlider-track-right"},thumb:{left:"--fds-internal-inputRangeSlider-thumb-left"}},r="ww40rx",e="l12n1bv5",n="i1ewqtcj",i="ldf0qhx",l="s1g5kjqn",a="k19umubw",d="k1wprqev",s="k17p94od",p="s1wkp8d5",u="s3aojwv";export{n as indicatorLabelContainer,a as knob,d as knobDisabled,s as knobInteractive,e as labelContainer,i as labelText,l as slider,p as sliderThumb,u as sliderTrack,t as tokens,r as wrapper};
 //# sourceMappingURL=input-range-slider.styles.js.map

package/input-range-slider/input-range-slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-range-slider.styles.js","sources":["../../src/input-range-slider/input-range-slider.styles.ts"],"sourcesContent":["import ReactSlider from \"react-slider\";\nimport styled, { css } from \"styled-components\";\nimport { Border, Colour, Radius, Shadow, Spacing } from \"../theme\";\nimport { ThemeStyleProps } from \"../theme/types\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface TrackStyleProps {\n    $color: string | ((props: ThemeStyleProps) => string) | undefined;\n}\n\ninterface ThumbStyleProps {\n    $disabled: boolean | undefined;\n    $readOnly: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n    isolation: isolate;\n`;\n\nexport const LabelContainer = styled.div`\n    margin-top: ${Spacing[\"spacing-8\"]};\n    display: flex;\n    justify-content: space-between;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const IndicatorLabelContainer = styled.div`\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const LabelText = styled(Typography.BodyBL)`\n    overflow-wrap: anywhere;\n`;\n\nexport const Slider = styled(ReactSlider)`\n    height: 0.875rem;\n`;\n\nexport const Knob = styled.div<ThumbStyleProps>`\n    height: 2.5rem;\n    width: 2.5rem;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                cursor: not-allowed;\n            `;\n        }\n        if (!props.$readOnly) {\n            return css`\n                cursor: grab;\n                &:active {\n                    cursor: grabbing;\n                }\n            `;\n        }\n    }}\n\n    &:after {\n        content: \"\";\n        display: block;\n        height: 0.875rem;\n        width: 0.875rem;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n\n        background-color: ${Colour[\"bg\"]};\n        box-shadow: ${Shadow[\"sm-subtle\"]};\n        border: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n            ${(props) =>\n                props.$disabled\n                    ? Colour[\"border-selected-disabled\"]\n                    : Colour[\"border-strong\"]};\n        border-radius: ${Radius[\"full\"]};\n    }\n`;\n\nexport const SliderThumb = styled.div`\n    height: 0.875rem;\n    width: 0.875rem;\n    position: relative;\n    outline: none;\n\n    &:focus ${Knob}:after, &[data-focused=\"true\"] ${Knob}:after {\n        outline-offset: -1px;\n        outline: ${Border[\"width-040\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-selected\"]};\n    }\n`;\n\nexport const SliderTrack = styled.div<TrackStyleProps>`\n    height: 0.25rem;\n    top: 50%;\n    transform: translateY(-50%);\n    border-radius: ${Radius[\"full\"]};\n\n    background: ${(props) => {\n        if (props.$color && typeof props.$color === \"function\") {\n            return props.$color(props);\n        } else {\n            return props.$color || Colour[\"border-strong\"](props);\n        }\n    }};\n`;\n"],"names":["Wrapper","styled","div","LabelContainer","Spacing","IndicatorLabelContainer","LabelText","Typography","BodyBL","Slider","ReactSlider","Knob","props","$disabled","css","$readOnly","Colour","Shadow","Border","Radius","SliderThumb","SliderTrack","$color"],"mappings":"4NAqBO,MAAMA,EAAUC,EAAOC,GAAG;;EAIpBC,EAAiBF,EAAOC,GAAG;kBACtBE,EAAQ;;;WAGfA,EAAQ;EAGNC,EAA0BJ,EAAOC,GAAG;qBAC5BE,EAAQ;EAGhBE,EAAYL,EAAOM,EAAWC,OAAO;;EAIrCC,EAASR,EAAOS,EAAY;;EAI5BC,EAAOV,EAAOC,GAAoB;;;;;;;;MAQxCU,GACKA,EAAMC,UACCC,CAAG;;cAITF,EAAMG,eAAX,EACWD,CAAG;;;;;;;;;;;;;;;;;4BAmBME,EAAW;sBACjBC,EAAO;kBACXC,EAAO,gBAAgBA,EAAc;cACxCN,GACCA,EAAMC,UACAG,EAAO,4BACPA,EAAO;yBACJG,EAAa;;EAIzBC,EAAcnB,EAAOC,GAAG;;;;;;cAMvBS,mCAAsCA;;mBAEjCO,EAAO,gBAAgBA,EAAc;cAC1CF,EAAO;;EAIRK,EAAcpB,EAAOC,GAAoB;;;;qBAIjCiB,EAAa;;kBAEfP,GACPA,EAAMU,QAAkC,mBAAjBV,EAAMU,OACtBV,EAAMU,OAAOV,GAEbA,EAAMU,QAAUN,EAAO,iBAAiBJ;"}
+{"version":3,"file":"input-range-slider.styles.js","sources":["../../src/input-range-slider/input-range-slider.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Shadow, Spacing } from \"../theme\";\n\nexport const tokens = {\n    track: {\n        backgroundColor:\n            \"--fds-internal-inputRangeSlider-track-backgroundColor\",\n        left: \"--fds-internal-inputRangeSlider-track-left\",\n        right: \"--fds-internal-inputRangeSlider-track-right\",\n    },\n    thumb: {\n        left: \"--fds-internal-inputRangeSlider-thumb-left\",\n    },\n};\n\nexport const wrapper = css`\n    isolation: isolate;\n`;\n\nexport const labelContainer = css`\n    margin-top: ${Spacing[\"spacing-8\"]};\n    display: flex;\n    justify-content: space-between;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const indicatorLabelContainer = css`\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const labelText = css`\n    overflow-wrap: anywhere;\n`;\n\nexport const slider = css`\n    height: 0.875rem;\n    position: relative;\n    touch-action: none;\n`;\n\nexport const knob = css`\n    height: 2.5rem;\n    width: 2.5rem;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n\n    &::after {\n        content: \"\";\n        display: block;\n        height: 0.875rem;\n        width: 0.875rem;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n\n        background-color: ${Colour[\"bg\"]};\n        box-shadow: ${Shadow[\"sm-subtle\"]};\n        border: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-strong\"]};\n        border-radius: ${Radius[\"full\"]};\n    }\n`;\n\nexport const knobDisabled = css`\n    cursor: not-allowed;\n\n    &::after {\n        border-color: ${Colour[\"border-selected-disabled\"]};\n    }\n`;\n\nexport const knobInteractive = css`\n    cursor: grab;\n\n    &:active {\n        cursor: grabbing;\n    }\n`;\n\nexport const sliderThumb = css`\n    height: 0.875rem;\n    width: 0.875rem;\n    position: absolute;\n    z-index: 1;\n    outline: none;\n\n    ${tokens.thumb.left}: initial;\n    left: var(${tokens.thumb.left}, 0px);\n\n    &:focus .${knob}::after, &[data-focused=\"true\"] .${knob}::after {\n        outline-offset: -1px;\n        outline: ${Border[\"width-040\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-selected\"]};\n    }\n`;\n\nexport const sliderTrack = css`\n    position: absolute;\n    height: 0.25rem;\n    top: 50%;\n    transform: translateY(-50%);\n    border-radius: ${Radius[\"full\"]};\n\n    ${tokens.track.left}: initial;\n    ${tokens.track.right}: initial;\n    left: var(${tokens.track.left}, 0px);\n    right: var(${tokens.track.right}, 0px);\n\n    ${tokens.track.backgroundColor}: initial;\n    background: var(\n        ${tokens.track.backgroundColor},\n        ${Colour[\"border-strong\"]}\n    );\n`;\n"],"names":["tokens","track","backgroundColor","left","right","thumb","wrapper","labelContainer","indicatorLabelContainer","labelText","slider","knob","knobDisabled","knobInteractive","sliderThumb","sliderTrack"],"mappings":"kFAIO,MAAMA,EAAS,CAClBC,MAAO,CACHC,gBACI,wDACJC,KAAM,6CACNC,MAAO,+CAEXC,MAAO,CACHF,KAAM,+CAIDG,EAAO,SAIPC,EAAc,WAOdC,EAAuB,WAIvBC,EAAS,UAITC,EAAM,WAMNC,EAAI,WA0BJC,EAAY,WAQZC,EAAe,WAQfC,EAAW,WAiBXC,EAAW"}

package/input-range-slider/input-range-slider.styles_1pbel2v.css

@@ -0,0 +1,13 @@
+@layer fds{.ww40rx{isolation:isolate;}
+.l12n1bv5{margin-top:var(--fds-spacing-8);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:var(--fds-spacing-8);}
+.i1ewqtcj{margin-bottom:var(--fds-spacing-8);}
+.ldf0qhx{overflow-wrap:anywhere;}
+.s1g5kjqn{height:0.875rem;position:relative;touch-action:none;}
+.k19umubw{height:2.5rem;width:2.5rem;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}.k19umubw::after{content:"";display:block;height:0.875rem;width:0.875rem;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background-color:var(--fds-colour-bg);box-shadow:var(--fds-shadow-sm-subtle);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-strong);border-radius:var(--fds-radius-full);}
+.k1wprqev{cursor:not-allowed;}.k1wprqev::after{border-color:var(--fds-colour-border-selected-disabled);}
+.k17p94od{cursor:-webkit-grab;cursor:grab;}.k17p94od:active{cursor:-webkit-grabbing;cursor:grabbing;}
+.s1wkp8d5{height:0.875rem;width:0.875rem;position:absolute;z-index:1;outline:none;--fds-internal-inputRangeSlider-thumb-left:initial;left:var(--fds-internal-inputRangeSlider-thumb-left, 0px);}.s1wkp8d5:focus .k19umubw::after,.s1wkp8d5[data-focused="true"] .k19umubw::after{outline-offset:-1px;outline:var(--fds-border-width-040) var(--fds-border-style-solid) var(--fds-colour-border-selected);}
+.s3aojwv{position:absolute;height:0.25rem;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);border-radius:var(--fds-radius-full);--fds-internal-inputRangeSlider-track-left:initial;--fds-internal-inputRangeSlider-track-right:initial;left:var(--fds-internal-inputRangeSlider-track-left, 0px);right:var(--fds-internal-inputRangeSlider-track-right, 0px);--fds-internal-inputRangeSlider-track-backgroundColor:initial;background:var(
+        --fds-internal-inputRangeSlider-track-backgroundColor,
+        var(--fds-colour-border-strong)
+    );}}

package/input-range-slider/slider-components.d.ts

@@ -0,0 +1,26 @@
+import type React from "react";
+interface ThumbProps extends React.HTMLAttributes<HTMLDivElement> {
+    focused: boolean | undefined;
+    disabled: boolean | undefined;
+    readOnly: boolean | undefined;
+}
+export declare const Thumb: (props: ThumbProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+interface TrackProps extends React.HTMLAttributes<HTMLDivElement> {
+    color?: string;
+}
+export declare const Track: (props: TrackProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+interface SliderProps {
+    selection: number[];
+    min: number;
+    max: number;
+    step: number;
+    minRange: number;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    trackColors: (string | undefined)[];
+    focusedThumbIndex: number | null;
+    onChange?: ((value: number[]) => void) | undefined;
+    onChangeEnd?: ((value: number[]) => void) | undefined;
+}
+export declare const Slider: ({ selection, min, max, step, minRange, disabled, readOnly, trackColors, focusedThumbIndex, onChange, onChangeEnd, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/input-range-slider/slider-components.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as r}from"react/jsx-runtime";import n from"clsx";import{forwardRef as o,useRef as i,useState as s}from"react";import{useResizeDetector as l}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"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as a}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as c}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useIsomorphicLayoutEffect as m}from"../util/use-isomorphic-layout-effect.js";import{knob as u,knobDisabled as d,knobInteractive as p,sliderThumb as f,tokens as v,sliderTrack as h,slider as b}from"./input-range-slider.styles.js";import{getPercent as j,toOffset as g,getValueFromClientX as y,findNearestThumbIndex as k,clampValue as x,PAGE_STEP_MULTIPLIER as w}from"./slider-utils.js";const E=o(((r,o)=>{var{focused:s,disabled:l,readOnly:m,className:v,style:h}=r,b=e(r,["focused","disabled","readOnly","className","style"]);const j=i(null);return a(j,h),t("div",Object.assign({ref:c(j,o)},b,{className:n(f,v),"data-focused":s?"true":void 0,children:t("div",{className:n(u,l&&d,!l&&!m&&p)})}))})),D=o(((r,o)=>{var{color:s,className:l,style:m}=r,u=e(r,["color","className","style"]);const d=i(null);return a(d,{[v.track.backgroundColor]:s}),a(d,m),t("div",Object.assign({},u,{className:n(h,l),ref:c(d,o)}))})),N=({selection:e,min:n,max:o,step:a,minRange:c,disabled:u,readOnly:d,trackColors:p,focusedThumbIndex:f,onChange:h,onChangeEnd:N})=>{const L=i(null),O=i(null),A=!u&&!d,[C,P]=s(0),R=()=>{var e,t,r,n;P((null!==(t=null===(e=L.current)||void 0===e?void 0:e.clientWidth)&&void 0!==t?t:0)-(null!==(n=null===(r=O.current)||void 0===r?void 0:r.getBoundingClientRect().width)&&void 0!==n?n:0))};return m(R,[]),l({targetRef:L,onResize:R}),r("div",{ref:L,className:b,"aria-hidden":"true",onPointerDown:function(t){if(!A)return;if(0!==t.button)return;t.preventDefault();const r=y({clientX:t.clientX,sliderEl:L.current,min:n,max:o,step:a}),i=k(r,e),s=x(r,i,e,n,o,c),l=[...e];l[i]=s,null==h||h(l),null==N||N(l)},children:[Array.from({length:e.length+1},((r,i)=>{const s=0===i?0:j(e[i-1],n,o),l=i===e.length?0:100-j(e[i],n,o);return t(D,{"data-testid":`slider-track-${i}`,color:p[i],style:{[v.track.left]:g(s,C),[v.track.right]:g(l,C)}},`track-${i}`)})),e.map(((r,i)=>t(E,{ref:0===i?O:void 0,"data-testid":`slider-thumb-${i}`,tabIndex:-1,"aria-hidden":"true",focused:f===i,disabled:u,readOnly:d,style:{[v.thumb.left]:g(j(r,n,o),C)},onPointerDown:t=>function(t,r){if(!A)return;if(0!==t.button)return;t.preventDefault(),t.stopPropagation(),t.currentTarget.focus();const i=[...e],s=e=>{const t=y({clientX:e.clientX,sliderEl:L.current,min:n,max:o,step:a}),s=x(t,r,i,n,o,c);if(s===i[r])return;i[r]=s;const l=[...i];null==h||h(l)},l=()=>{document.removeEventListener("pointermove",s),document.removeEventListener("pointerup",l),document.removeEventListener("pointercancel",l);const e=[...i];null==N||N(e)};document.addEventListener("pointermove",s),document.addEventListener("pointerup",l),document.addEventListener("pointercancel",l)}(t,i),onKeyDown:t=>function(t,r){if(!A)return;const i=e[r];let s;switch(t.key){case"ArrowLeft":case"ArrowDown":s=i-a;break;case"ArrowRight":case"ArrowUp":s=i+a;break;case"Home":s=n;break;case"End":s=o;break;case"PageDown":s=i-a*w;break;case"PageUp":s=i+a*w;break;default:return}t.preventDefault();const l=x(s,r,e,n,o,c);if(l===i)return;const m=[...e];m[r]=l,null==h||h(m),null==N||N(m)}(t,i)},`thumb-${i}`)))]})};export{N as Slider,E as Thumb,D as Track};
+//# sourceMappingURL=slider-components.js.map

package/input-range-slider/slider-components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-components.js","sources":["../../src/input-range-slider/slider-components.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./input-range-slider.styles\";\nimport {\n    clampValue,\n    findNearestThumbIndex,\n    getPercent,\n    getValueFromClientX,\n    PAGE_STEP_MULTIPLIER,\n    toOffset,\n} from \"./slider-utils\";\n\ninterface ThumbProps extends React.HTMLAttributes<HTMLDivElement> {\n    focused: boolean | undefined;\n    disabled: boolean | undefined;\n    readOnly: boolean | undefined;\n}\n\nconst InnerThumb = (\n    {\n        focused,\n        disabled,\n        readOnly,\n        className,\n        style,\n        ...otherProps\n    }: ThumbProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const thumbRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(thumbRef, style);\n\n    return (\n        <div\n            ref={mergeRefs(thumbRef, ref)}\n            {...otherProps}\n            className={clsx(styles.sliderThumb, className)}\n            data-focused={focused ? \"true\" : undefined}\n        >\n            <div\n                className={clsx(\n                    styles.knob,\n                    disabled && styles.knobDisabled,\n                    !disabled && !readOnly && styles.knobInteractive\n                )}\n            />\n        </div>\n    );\n};\n\nexport const Thumb = forwardRef(InnerThumb);\n\ninterface TrackProps extends React.HTMLAttributes<HTMLDivElement> {\n    color?: string;\n}\n\nconst InnerTrack = (\n    { color, className, style, ...otherProps }: TrackProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const trackRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(trackRef, {\n        [styles.tokens.track.backgroundColor]: color,\n    });\n\n    useApplyStyle(trackRef, style);\n\n    return (\n        <div\n            {...otherProps}\n            className={clsx(styles.sliderTrack, className)}\n            ref={mergeRefs(trackRef, ref)}\n        />\n    );\n};\n\nexport const Track = forwardRef(InnerTrack);\n\n// =============================================================================\n// SLIDER\n// =============================================================================\n\ninterface SliderProps {\n    selection: number[];\n    min: number;\n    max: number;\n    step: number;\n    minRange: number;\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    trackColors: (string | undefined)[];\n    focusedThumbIndex: number | null;\n    onChange?: ((value: number[]) => void) | undefined;\n    onChangeEnd?: ((value: number[]) => void) | undefined;\n}\n\nexport const Slider = ({\n    selection,\n    min,\n    max,\n    step,\n    minRange,\n    disabled,\n    readOnly,\n    trackColors,\n    focusedThumbIndex,\n    onChange,\n    onChangeEnd,\n}: SliderProps) => {\n    const sliderRef = useRef<HTMLDivElement>(null);\n    const thumbRef = useRef<HTMLDivElement>(null);\n    const isInteractive = !disabled && !readOnly;\n\n    const [innerSliderWidth, setInnerSliderWidth] = useState(0);\n\n    const measure = () => {\n        setInnerSliderWidth(\n            (sliderRef.current?.clientWidth ?? 0) -\n                (thumbRef.current?.getBoundingClientRect().width ?? 0)\n        );\n    };\n\n    // Measure synchronously on mount so the first paint has correct thumb positions\n    useIsomorphicLayoutEffect(measure, []);\n    useResizeDetector({ targetRef: sliderRef, onResize: measure });\n\n    // the nearest thumb to the pointer will get moved to that position\n    function handleTrackPointerDown(event: React.PointerEvent<HTMLDivElement>) {\n        if (!isInteractive) return;\n        if (event.button !== 0) return;\n\n        event.preventDefault();\n        const clickedValue = getValueFromClientX({\n            clientX: event.clientX,\n            sliderEl: sliderRef.current,\n            min,\n            max,\n            step,\n        });\n        const index = findNearestThumbIndex(clickedValue, selection);\n        const clamped = clampValue(\n            clickedValue,\n            index,\n            selection,\n            min,\n            max,\n            minRange\n        );\n\n        const nextValues = [...selection];\n        nextValues[index] = clamped;\n\n        onChange?.(nextValues);\n        onChangeEnd?.(nextValues);\n    }\n\n    function handleThumbPointerDown(\n        event: React.PointerEvent<HTMLDivElement>,\n        thumbIndex: number\n    ) {\n        if (!isInteractive) return;\n        if (event.button !== 0) return;\n\n        event.preventDefault();\n        event.stopPropagation();\n        (event.currentTarget as HTMLElement).focus();\n\n        const dragValues = [...selection];\n\n        const onMove = (e: PointerEvent) => {\n            const rawValue = getValueFromClientX({\n                clientX: e.clientX,\n                sliderEl: sliderRef.current,\n                min,\n                max,\n                step,\n            });\n            const clamped = clampValue(\n                rawValue,\n                thumbIndex,\n                dragValues,\n                min,\n                max,\n                minRange\n            );\n\n            if (clamped === dragValues[thumbIndex]) return;\n\n            dragValues[thumbIndex] = clamped;\n            const nextValues = [...dragValues];\n\n            onChange?.(nextValues);\n        };\n\n        const onEnd = () => {\n            document.removeEventListener(\"pointermove\", onMove);\n            document.removeEventListener(\"pointerup\", onEnd);\n            document.removeEventListener(\"pointercancel\", onEnd);\n\n            const finalValues = [...dragValues];\n            onChangeEnd?.(finalValues);\n        };\n\n        document.addEventListener(\"pointermove\", onMove);\n        document.addEventListener(\"pointerup\", onEnd);\n        document.addEventListener(\"pointercancel\", onEnd);\n    }\n\n    function handleThumbKeyDown(\n        event: React.KeyboardEvent<HTMLDivElement>,\n        thumbIndex: number\n    ) {\n        if (!isInteractive) return;\n\n        const currentValue = selection[thumbIndex];\n        let newValue: number;\n\n        switch (event.key) {\n            case \"ArrowLeft\":\n            case \"ArrowDown\":\n                newValue = currentValue - step;\n                break;\n            case \"ArrowRight\":\n            case \"ArrowUp\":\n                newValue = currentValue + step;\n                break;\n            case \"Home\":\n                newValue = min;\n                break;\n            case \"End\":\n                newValue = max;\n                break;\n            case \"PageDown\":\n                newValue = currentValue - step * PAGE_STEP_MULTIPLIER;\n                break;\n            case \"PageUp\":\n                newValue = currentValue + step * PAGE_STEP_MULTIPLIER;\n                break;\n            default:\n                return;\n        }\n\n        event.preventDefault();\n        const clamped = clampValue(\n            newValue,\n            thumbIndex,\n            selection,\n            min,\n            max,\n            minRange\n        );\n        if (clamped === currentValue) return;\n\n        const nextValues = [...selection];\n        nextValues[thumbIndex] = clamped;\n\n        onChange?.(nextValues);\n        onChangeEnd?.(nextValues);\n    }\n\n    return (\n        <div\n            ref={sliderRef}\n            className={styles.slider}\n            aria-hidden=\"true\"\n            onPointerDown={handleTrackPointerDown}\n        >\n            {Array.from({ length: selection.length + 1 }, (_, i) => {\n                const leftPercent =\n                    i === 0 ? 0 : getPercent(selection[i - 1], min, max);\n                const rightPercent =\n                    i === selection.length\n                        ? 0\n                        : 100 - getPercent(selection[i], min, max);\n                return (\n                    <Track\n                        key={`track-${i}`}\n                        data-testid={`slider-track-${i}`}\n                        color={trackColors[i]}\n                        style={{\n                            [styles.tokens.track.left]: toOffset(\n                                leftPercent,\n                                innerSliderWidth\n                            ),\n                            [styles.tokens.track.right]: toOffset(\n                                rightPercent,\n                                innerSliderWidth\n                            ),\n                        }}\n                    />\n                );\n            })}\n            {selection.map((thumbValue, index) => (\n                <Thumb\n                    key={`thumb-${index}`}\n                    ref={index === 0 ? thumbRef : undefined}\n                    data-testid={`slider-thumb-${index}`}\n                    tabIndex={-1}\n                    aria-hidden=\"true\"\n                    focused={focusedThumbIndex === index}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    style={{\n                        [styles.tokens.thumb.left]: toOffset(\n                            getPercent(thumbValue, min, max),\n                            innerSliderWidth\n                        ),\n                    }}\n                    onPointerDown={(e) => handleThumbPointerDown(e, index)}\n                    onKeyDown={(e) => handleThumbKeyDown(e, index)}\n                />\n            ))}\n        </div>\n    );\n};\n"],"names":["Thumb","forwardRef","_a","ref","focused","disabled","readOnly","className","style","otherProps","__rest","thumbRef","useRef","useApplyStyle","_jsx","Object","assign","mergeRefs","clsx","styles.sliderThumb","undefined","children","styles.knob","styles.knobDisabled","styles.knobInteractive","Track","color","trackRef","styles.tokens","track","backgroundColor","styles.sliderTrack","Slider","selection","min","max","step","minRange","trackColors","focusedThumbIndex","onChange","onChangeEnd","sliderRef","isInteractive","innerSliderWidth","setInnerSliderWidth","useState","measure","_b","current","clientWidth","_d","_c","getBoundingClientRect","width","useIsomorphicLayoutEffect","useResizeDetector","targetRef","onResize","_jsxs","styles.slider","onPointerDown","event","button","preventDefault","clickedValue","getValueFromClientX","clientX","sliderEl","index","findNearestThumbIndex","clamped","clampValue","nextValues","Array","from","length","_","i","leftPercent","getPercent","rightPercent","left","toOffset","right","map","thumbValue","tabIndex","thumb","e","thumbIndex","stopPropagation","currentTarget","focus","dragValues","onMove","rawValue","onEnd","document","removeEventListener","finalValues","addEventListener","handleThumbPointerDown","onKeyDown","currentValue","newValue","key","PAGE_STEP_MULTIPLIER","handleThumbKeyDown"],"mappings":"osCAuBA,MAiCaA,EAAQC,GAjCF,CACfC,EAQAC,KARA,IAAAC,QACIA,EAAOC,SACPA,EAAQC,SACRA,EAAQC,UACRA,EAASC,MACTA,GAAKN,EACFO,EAAUC,EAAAR,EANjB,uDAUA,MAAMS,EAAWC,EAAuB,MAIxC,OAFAC,EAAcF,EAAUH,GAGpBM,EAAA,MAAAC,OAAAC,OAAA,CACIb,IAAKc,EAAUN,EAAUR,IACrBM,EAAU,CACdF,UAAWW,EAAKC,EAAoBZ,GAAU,eAChCH,EAAU,YAASgB,EAASC,SAE1CP,EAAA,MAAA,CACIP,UAAWW,EACPI,EACAjB,GAAYkB,GACXlB,IAAaC,GAAYkB,OAGhC,IA+BDC,EAAQxB,GArBF,CACfC,EACAC,SADAuB,MAAEA,EAAKnB,UAAEA,EAASC,MAAEA,KAAUC,EAAUC,EAAAR,EAAxC,CAAA,QAAA,YAAA,UAGA,MAAMyB,EAAWf,EAAuB,MAQxC,OANAC,EAAcc,EAAU,CACpB,CAACC,EAAcC,MAAMC,iBAAkBJ,IAG3Cb,EAAcc,EAAUnB,GAGpBM,EAAA,MAAAC,OAAAC,OAAA,CAAA,EACQP,EAAU,CACdF,UAAWW,EAAKa,EAAoBxB,GACpCJ,IAAKc,EAAUU,EAAUxB,KAC3B,IAwBG6B,EAAS,EAClBC,YACAC,MACAC,MACAC,OACAC,WACAhC,WACAC,WACAgC,cACAC,oBACAC,WACAC,kBAEA,MAAMC,EAAY9B,EAAuB,MACnCD,EAAWC,EAAuB,MAClC+B,GAAiBtC,IAAaC,GAE7BsC,EAAkBC,GAAuBC,EAAS,GAEnDC,EAAU,iBACZF,GACmC,QAA9BG,EAAiB,QAAjB9C,EAAAwC,EAAUO,eAAO,IAAA/C,OAAA,EAAAA,EAAEgD,mBAAW,IAAAF,EAAAA,EAAI,IACiB,QAA/CG,EAAgB,QAAhBC,EAAAzC,EAASsC,eAAO,IAAAG,OAAA,EAAAA,EAAEC,wBAAwBC,aAAK,IAAAH,EAAAA,EAAI,GAC3D,EA6IL,OAzIAI,EAA0BR,EAAS,IACnCS,EAAkB,CAAEC,UAAWf,EAAWgB,SAAUX,IAyIhDY,EAAA,MAAA,CACIxD,IAAKuC,EACLnC,UAAWqD,EAAa,cACZ,OACZC,cA1IR,SAAgCC,GAC5B,IAAKnB,EAAe,OACpB,GAAqB,IAAjBmB,EAAMC,OAAc,OAExBD,EAAME,iBACN,MAAMC,EAAeC,EAAoB,CACrCC,QAASL,EAAMK,QACfC,SAAU1B,EAAUO,QACpBf,MACAC,MACAC,SAEEiC,EAAQC,EAAsBL,EAAchC,GAC5CsC,EAAUC,EACZP,EACAI,EACApC,EACAC,EACAC,EACAE,GAGEoC,EAAa,IAAIxC,GACvBwC,EAAWJ,GAASE,EAEpB/B,SAAAA,EAAWiC,GACXhC,SAAAA,EAAcgC,EAClB,EA+G6CpD,SAAA,CAEpCqD,MAAMC,KAAK,CAAEC,OAAQ3C,EAAU2C,OAAS,IAAK,CAACC,EAAGC,KAC9C,MAAMC,EACI,IAAND,EAAU,EAAIE,EAAW/C,EAAU6C,EAAI,GAAI5C,EAAKC,GAC9C8C,EACFH,IAAM7C,EAAU2C,OACV,EACA,IAAMI,EAAW/C,EAAU6C,GAAI5C,EAAKC,GAC9C,OACIrB,EAACW,EAAK,CAAA,cAEW,gBAAgBqD,IAC7BpD,MAAOY,EAAYwC,GACnBtE,MAAO,CACH,CAACoB,EAAcC,MAAMqD,MAAOC,EACxBJ,EACAnC,GAEJ,CAAChB,EAAcC,MAAMuD,OAAQD,EACzBF,EACArC,KAVH,SAASkC,IAahB,IAGT7C,EAAUoD,KAAI,CAACC,EAAYjB,IACxBvD,EAACd,EAAK,CAEFG,IAAe,IAAVkE,EAAc1D,OAAWS,EAAS,cAC1B,gBAAgBiD,IAC7BkB,UAAU,EAAE,cACA,OACZnF,QAASmC,IAAsB8B,EAC/BhE,SAAUA,EACVC,SAAUA,EACVE,MAAO,CACH,CAACoB,EAAc4D,MAAMN,MAAOC,EACxBH,EAAWM,EAAYpD,EAAKC,GAC5BS,IAGRiB,cAAgB4B,GAxJhC,SACI3B,EACA4B,GAEA,IAAK/C,EAAe,OACpB,GAAqB,IAAjBmB,EAAMC,OAAc,OAExBD,EAAME,iBACNF,EAAM6B,kBACL7B,EAAM8B,cAA8BC,QAErC,MAAMC,EAAa,IAAI7D,GAEjB8D,EAAUN,IACZ,MAAMO,EAAW9B,EAAoB,CACjCC,QAASsB,EAAEtB,QACXC,SAAU1B,EAAUO,QACpBf,MACAC,MACAC,SAEEmC,EAAUC,EACZwB,EACAN,EACAI,EACA5D,EACAC,EACAE,GAGJ,GAAIkC,IAAYuB,EAAWJ,GAAa,OAExCI,EAAWJ,GAAcnB,EACzB,MAAME,EAAa,IAAIqB,GAEvBtD,SAAAA,EAAWiC,EAAW,EAGpBwB,EAAQ,KACVC,SAASC,oBAAoB,cAAeJ,GAC5CG,SAASC,oBAAoB,YAAaF,GAC1CC,SAASC,oBAAoB,gBAAiBF,GAE9C,MAAMG,EAAc,IAAIN,GACxBrD,SAAAA,EAAc2D,EAAY,EAG9BF,SAASG,iBAAiB,cAAeN,GACzCG,SAASG,iBAAiB,YAAaJ,GACvCC,SAASG,iBAAiB,gBAAiBJ,EAC/C,CAsGsCK,CAAuBb,EAAGpB,GAChDkC,UAAYd,GArG5B,SACI3B,EACA4B,GAEA,IAAK/C,EAAe,OAEpB,MAAM6D,EAAevE,EAAUyD,GAC/B,IAAIe,EAEJ,OAAQ3C,EAAM4C,KACV,IAAK,YACL,IAAK,YACDD,EAAWD,EAAepE,EAC1B,MACJ,IAAK,aACL,IAAK,UACDqE,EAAWD,EAAepE,EAC1B,MACJ,IAAK,OACDqE,EAAWvE,EACX,MACJ,IAAK,MACDuE,EAAWtE,EACX,MACJ,IAAK,WACDsE,EAAWD,EAAepE,EAAOuE,EACjC,MACJ,IAAK,SACDF,EAAWD,EAAepE,EAAOuE,EACjC,MACJ,QACI,OAGR7C,EAAME,iBACN,MAAMO,EAAUC,EACZiC,EACAf,EACAzD,EACAC,EACAC,EACAE,GAEJ,GAAIkC,IAAYiC,EAAc,OAE9B,MAAM/B,EAAa,IAAIxC,GACvBwC,EAAWiB,GAAcnB,EAEzB/B,SAAAA,EAAWiC,GACXhC,SAAAA,EAAcgC,EAClB,CAmDkCmC,CAAmBnB,EAAGpB,IAfnC,SAASA,SAkBpB"}

package/input-range-slider/slider-utils.d.ts

@@ -0,0 +1,14 @@
+export declare const PAGE_STEP_MULTIPLIER = 10;
+export declare function getPercent(val: number, min: number, max: number): number;
+export declare function toOffset(percent: number, maxThumbOffset: number): string;
+type GetValueFromClientXParams = {
+    clientX: number;
+    sliderEl: HTMLDivElement | null;
+    min: number;
+    max: number;
+    step: number;
+};
+export declare function getValueFromClientX({ clientX, sliderEl, min, max, step, }: GetValueFromClientXParams): number;
+export declare function clampValue(nextValue: number, index: number, values: number[], min: number, max: number, minRange: number): number;
+export declare function findNearestThumbIndex(val: number, selection: number[]): number;
+export {};

package/input-range-slider/slider-utils.js

@@ -0,0 +1,2 @@
+const t=10;function n(t,n,e){return e===n?0:(t-n)/(e-n)*100}function e(t,n){return 0===t?"0px":t/100*n+"px"}function r({clientX:t,sliderEl:n,min:e,max:r,step:i}){if(!n)return e;const a=n.getBoundingClientRect();if(0===a.width)return e;if(i<=0)return Math.max(e,Math.min(r,e));const h=e+Math.max(0,Math.min(1,(t-a.left)/a.width))*(r-e),u=Math.round((h-e)/i)*i+e;return Math.max(e,Math.min(r,u))}function i(t,n,e,r,i,a){let h=r,u=i;return n>0&&(h=e[n-1]+a),n<e.length-1&&(u=e[n+1]-a),h>u&&(u=h),Math.max(h,Math.min(u,t))}function a(t,n){if(0===n.length)return 0;let e=0,r=Math.abs(n[0]-t);for(let i=1;i<n.length;i++){const a=Math.abs(n[i]-t);a<r&&(r=a,e=i)}return e}export{t as PAGE_STEP_MULTIPLIER,i as clampValue,a as findNearestThumbIndex,n as getPercent,r as getValueFromClientX,e as toOffset};
+//# sourceMappingURL=slider-utils.js.map

package/input-range-slider/slider-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-utils.js","sources":["../../src/input-range-slider/slider-utils.ts"],"sourcesContent":["export const PAGE_STEP_MULTIPLIER = 10;\n\nexport function getPercent(val: number, min: number, max: number) {\n    if (max === min) return 0;\n    return ((val - min) / (max - min)) * 100;\n}\n\nexport function toOffset(percent: number, maxThumbOffset: number) {\n    if (percent === 0) return \"0px\";\n    return `${(percent / 100) * maxThumbOffset}px`;\n}\n\ntype GetValueFromClientXParams = {\n    clientX: number;\n    sliderEl: HTMLDivElement | null;\n    min: number;\n    max: number;\n    step: number;\n};\n\nexport function getValueFromClientX({\n    clientX,\n    sliderEl,\n    min,\n    max,\n    step,\n}: GetValueFromClientXParams) {\n    if (!sliderEl) return min;\n\n    const rect = sliderEl.getBoundingClientRect();\n    if (rect.width === 0) return min;\n    if (step <= 0) return Math.max(min, Math.min(max, min));\n\n    const fraction = Math.max(\n        0,\n        Math.min(1, (clientX - rect.left) / rect.width)\n    );\n    const rawValue = min + fraction * (max - min);\n    const snapped = Math.round((rawValue - min) / step) * step + min;\n    return Math.max(min, Math.min(max, snapped));\n}\n\nexport function clampValue(\n    nextValue: number,\n    index: number,\n    values: number[],\n    min: number,\n    max: number,\n    minRange: number\n) {\n    let low = min;\n    let high = max;\n    if (index > 0) low = values[index - 1] + minRange;\n    if (index < values.length - 1) high = values[index + 1] - minRange;\n    if (low > high) high = low;\n    return Math.max(low, Math.min(high, nextValue));\n}\n\nexport function findNearestThumbIndex(val: number, selection: number[]) {\n    if (selection.length === 0) return 0;\n\n    let nearestIndex = 0;\n    let nearestDist = Math.abs(selection[0] - val);\n    for (let i = 1; i < selection.length; i++) {\n        const dist = Math.abs(selection[i] - val);\n        if (dist < nearestDist) {\n            nearestDist = dist;\n            nearestIndex = i;\n        }\n    }\n    return nearestIndex;\n}\n"],"names":["PAGE_STEP_MULTIPLIER","getPercent","val","min","max","toOffset","percent","maxThumbOffset","getValueFromClientX","clientX","sliderEl","step","rect","getBoundingClientRect","width","Math","rawValue","left","snapped","round","clampValue","nextValue","index","values","minRange","low","high","length","findNearestThumbIndex","selection","nearestIndex","nearestDist","abs","i","dist"],"mappings":"AAAO,MAAMA,EAAuB,YAEpBC,EAAWC,EAAaC,EAAaC,GACjD,OAAIA,IAAQD,EAAY,GACfD,EAAMC,IAAQC,EAAMD,GAAQ,GACzC,CAEM,SAAUE,EAASC,EAAiBC,GACtC,OAAgB,IAAZD,EAAsB,MACfA,EAAU,IAAOC,EAArB,IACX,CAUM,SAAUC,GAAoBC,QAChCA,EAAOC,SACPA,EAAQP,IACRA,EAAGC,IACHA,EAAGO,KACHA,IAEA,IAAKD,EAAU,OAAOP,EAEtB,MAAMS,EAAOF,EAASG,wBACtB,GAAmB,IAAfD,EAAKE,MAAa,OAAOX,EAC7B,GAAIQ,GAAQ,EAAG,OAAOI,KAAKX,IAAID,EAAKY,KAAKZ,IAAIC,EAAKD,IAElD,MAIMa,EAAWb,EAJAY,KAAKX,IAClB,EACAW,KAAKZ,IAAI,GAAIM,EAAUG,EAAKK,MAAQL,EAAKE,SAEVV,EAAMD,GACnCe,EAAUH,KAAKI,OAAOH,EAAWb,GAAOQ,GAAQA,EAAOR,EAC7D,OAAOY,KAAKX,IAAID,EAAKY,KAAKZ,IAAIC,EAAKc,GACvC,CAEM,SAAUE,EACZC,EACAC,EACAC,EACApB,EACAC,EACAoB,GAEA,IAAIC,EAAMtB,EACNuB,EAAOtB,EAIX,OAHIkB,EAAQ,IAAGG,EAAMF,EAAOD,EAAQ,GAAKE,GACrCF,EAAQC,EAAOI,OAAS,IAAGD,EAAOH,EAAOD,EAAQ,GAAKE,GACtDC,EAAMC,IAAMA,EAAOD,GAChBV,KAAKX,IAAIqB,EAAKV,KAAKZ,IAAIuB,EAAML,GACxC,CAEM,SAAUO,EAAsB1B,EAAa2B,GAC/C,GAAyB,IAArBA,EAAUF,OAAc,OAAO,EAEnC,IAAIG,EAAe,EACfC,EAAchB,KAAKiB,IAAIH,EAAU,GAAK3B,GAC1C,IAAK,IAAI+B,EAAI,EAAGA,EAAIJ,EAAUF,OAAQM,IAAK,CACvC,MAAMC,EAAOnB,KAAKiB,IAAIH,EAAUI,GAAK/B,GACjCgC,EAAOH,IACPA,EAAcG,EACdJ,EAAeG,EAEvB,CACA,OAAOH,CACX"}

package/input-range-slider/types.d.ts

@@ -1,39 +1,121 @@
-import { ThemeStyleProps } from "../theme/types";
-type CustomColor = string | ((props: ThemeStyleProps) => string);
+/**
+ * Shared configuration for `InputRangeSlider` covering track bounds,
+ * step interval, track colors, and label display.
+ */
 export interface BaseSliderProps {
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * The lower bound of the slider range.
+     *
+     * @default 0
+     */
     min?: number | undefined;
+    /**
+     * The upper bound of the slider range.
+     *
+     * @default 100
+     */
     max?: number | undefined;
-    /** The interval between the prev and next value */
+    /**
+     * The interval between selectable values.
+     *
+     * @default 1
+     */
     step?: number | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
-    /** Customise the color of each track segment. Expected length is (number of values + 1) */
-    colors?: (CustomColor | undefined)[] | undefined;
+    /**
+     * Colours applied to each track segment in order. The array length should
+     * equal to `numOfThumbs + 1`.
+     */
+    colors?: (string | undefined)[] | undefined;
+    /**
+     * Renders label text at the minimum and maximum ends of the track.
+     */
     showSliderLabels?: boolean | undefined;
+    /**
+     * Text prepended to each slider label value. Ignored when
+     * `renderSliderLabel` is provided.
+     */
     sliderLabelPrefix?: string | undefined;
+    /**
+     * Text appended to each slider label value. Ignored when
+     * `renderSliderLabel` is provided.
+     */
     sliderLabelSuffix?: string | undefined;
+    /**
+     * Renders a label above the slider showing the current selection.
+     */
     showIndicatorLabel?: boolean | undefined;
+    /**
+     * Text prepended to the indicator label value.
+     */
     indicatorLabelPrefix?: string | undefined;
+    /**
+     * Text appended to the indicator label value.
+     */
     indicatorLabelSuffix?: string | undefined;
+    /**
+     * Custom renderer for the slider labels shown at the min and max track
+     * ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.
+     */
     renderSliderLabel?: ((value: number) => React.ReactNode) | undefined;
 }
+/**
+ * Props for the `InputRangeSlider` component.
+ */
 export interface InputRangeSliderProps extends BaseSliderProps {
+    /**
+     * Controlled values for each thumb, indexed by position. Must have the
+     * same length as `numOfThumbs`; when the lengths differ or `value` is
+     * omitted, each thumb defaults to `min + step * index`.
+     */
     value?: number[] | undefined;
-    /** The number of thumb controls */
+    /**
+     * The number of thumb controls rendered on the track.
+     *
+     * @default 2
+     */
     numOfThumbs?: number | undefined;
-    /** The minimum difference between values */
+    /**
+     * The minimum allowed difference between adjacent thumb values.
+     *
+     * @default 0
+     */
     minRange?: number | undefined;
+    /**
+     * Accessible labels for each thumb.
+     */
     ariaLabels?: string[] | undefined;
+    /**
+     * Accessible description text for each thumb.
+     */
     ariaDescriptions?: string[] | undefined;
+    /**
+     * Marks each thumb's native range input as invalid for assistive
+     * technologies.
+     */
     "aria-invalid"?: boolean | undefined;
+    /**
+     * ID(s) of an element(s) that labels the slider group.
+     */
     "aria-labelledby"?: string | undefined;
+    /**
+     * ID(s) of an element(s) that provides additional information of the slider group.
+     */
     "aria-describedby"?: string | undefined;
-    /** Called on every selection change */
+    /**
+     * Called on every selection change.
+     *
+     * @param value The updated array of thumb values, in thumb order.
+     */
     onChange?: ((value: number[]) => void) | undefined;
-    /** Called when a thumb is released after selection is complete */
+    /**
+     * Called when a thumb is released after selection is complete.
+     *
+     * @param value The final array of thumb values, in thumb order.
+     */
     onChangeEnd?: ((value: number[]) => void) | undefined;
 }
-export {};

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

@@ -1,2 +1,8 @@
-import { InputSelectProps } from "./types";
+import type { InputSelectProps } from "./types";
+/**
+ * A single-selection dropdown input.
+ *
+ * Use `InputSelect` when the user must pick exactly one item from a list.
+ * @keywords combobox, dropdown, field, form, input, picker
+ */
 export declare const InputSelect: <T, V>({ selectedOption, placeholder, options, disabled, error, className, "data-testid": testId, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, enableSearch, searchFunction, searchPlaceholder, valueExtractor, valueToStringFunction, listExtractor, isOptionDisabled, displayValueExtractor, onSelectOption, onShowOptions, onHideOptions, onRetry, optionsLoadState, optionTruncationType, renderCustomSelectedOption, renderListItem, hideNoResultsDisplay, noResultsDescription, customLabels, renderCustomCallToAction, onBlur, variant, readOnly, alignment, dropdownZIndex, dropdownRootNode, dropdownWidth, }: InputSelectProps<T, V>) => JSX.Element;

package/input-select/input-select.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{useState as r,useRef as t,useEffect as o}from"react";import"styled-components";import"../theme/index.js";import{StringHelper as i}from"../util/string-helper.js";import"../shared/dropdown-list/dropdown-label.styles.js";import{DropdownList as n}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as s}from"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as l}from"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"react-virtuoso";import"../button/button.style.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as a}from"../util/simple-id-generator.js";import"@react-aria/live-announcer";import{ElementWithDropdown as d}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../shared/dropdown-list/dropdown-list.styles.js";import"../shared/dropdown-list/dropdown-search.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"../shared/dropdown-list/nested-dropdown-list.styles.js";import"../shared/dropdown-list/virtuoso-components.js";import{LabelContainer as p,PlaceholderLabel as c,ValueLabel as m}from"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{InputBox as u}from"../shared/input-wrapper/input-wrapper.js";const h=({selectedOption:h,placeholder:w="Select",options:b,disabled:f,error:j,className:y,"data-testid":x,id:v,"aria-labelledby":g,"aria-describedby":T,"aria-invalid":S,enableSearch:O=!1,searchFunction:I,searchPlaceholder:D,valueExtractor:R,valueToStringFunction:$,listExtractor:C,isOptionDisabled:E,displayValueExtractor:L,onSelectOption:N,onShowOptions:A,onHideOptions:B,onRetry:_,optionsLoadState:F="success",optionTruncationType:k="end",renderCustomSelectedOption:H,renderListItem:P,hideNoResultsDisplay:W,noResultsDescription:Z,customLabels:q,renderCustomCallToAction:G,onBlur:V,variant:z="default",readOnly:J,alignment:K,dropdownZIndex:M,dropdownRootNode:Q,dropdownWidth:U})=>{const[X,Y]=r(h),[ee,re]=r(!1),[te,oe]=r(!1),ie=a(),ne=t(null),se=t(null),le=t(null);o((()=>{Y(h)}),[h]);const ae=(e,r)=>{var t;null===(t=se.current)||void 0===t||t.focus(),Y(e),re(!1),he(!1),null==N||N(e,r)},de=()=>{ee&&(re(!1),he(!1))},pe=()=>{te||ee||oe(!0)},ce=e=>{te&&!ee&&ne.current&&!ne.current.contains(e.relatedTarget)&&(oe(!1),null==V||V())},me=()=>{var e;if(!X)return"";if(L)return L(X);if(R){const r=R(X);return $?$(r):null!==(e=null==r?void 0:r.toString())&&void 0!==e?e:""}return X.toString()},ue=e=>{if("middle"===k){let r=0;return le&&le.current&&(r=le.current.getBoundingClientRect().width),i.truncateOneLine(e,r,120,8)}return e},he=e=>{e?null==A||A():null==B||B()};return e(s,{children:e(d,{enabled:!J&&!f,isOpen:ee,renderElement:()=>e(u,{className:y,"data-testid":x,id:v,ref:ne,tabIndex:-1,onFocus:pe,onBlur:ce,$focused:te,$disabled:f,$readOnly:J,$error:j,children:e(l,{ref:se,disabled:f,expanded:ee,listboxId:ie,popupRole:"listbox",readOnly:J,variant:z,"aria-labelledby":g,"aria-describedby":T,"aria-invalid":S,children:e(p,{ref:le,$disabled:f,children:X?H?H(X):e(m,{$truncateType:k,$variant:z,children:ue(me())}):e(c,{$truncateType:k,$variant:z,children:w})})})}),renderDropdown:()=>e(n,{listboxId:ie,listItems:b,onSelectItem:ae,onDismiss:de,valueExtractor:R,listExtractor:C,isOptionDisabled:E,enableSearch:O,searchPlaceholder:D,searchFunction:I,selectedItems:X?[X]:[],onRetry:_,itemsLoadState:F,itemTruncationType:k,renderListItem:P,hideNoResultsDisplay:W,noResultsDescription:Z,customLabels:q,renderCustomCallToAction:G,variant:z,width:U,matchElementWidth:!0}),onOpen:()=>{re(!0),he(!0),oe(!0)},onClose:e=>{re(!1),he(!1),"click"!==e&&(oe(!1),null==V||V())},onDismiss:()=>{var e;null===(e=se.current)||void 0===e||e.focus(),re(!1),he(!1)},clickToToggle:!0,offset:8,alignment:K,fitAvailableHeight:!0,customZIndex:M,rootNode:Q})})};export{h as InputSelect};
+import{jsx as e}from"react/jsx-runtime";import{useState as r,useRef as t,useEffect as o}from"react";import"clsx";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as i}from"../util/simple-id-generator.js";import{StringHelper as s}from"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_mloii0.css";import{DropdownList as n}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as l}from"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as a}from"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../_virtual/_tslib.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as d}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputBox as p}from"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_konwm.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";import{LabelContainer as m,PlaceholderLabel as c,ValueLabel as u}from"../shared/dropdown-wrapper/dropdown-wrapper.js";const h=({selectedOption:h,placeholder:f="Select",options:w,disabled:j,error:b,className:x,"data-testid":g,id:y,"aria-labelledby":v,"aria-describedby":_,"aria-invalid":T,enableSearch:I=!1,searchFunction:S,searchPlaceholder:A,valueExtractor:O,valueToStringFunction:k,listExtractor:C,isOptionDisabled:D,displayValueExtractor:R,onSelectOption:q,onShowOptions:E,onHideOptions:L,onRetry:H,optionsLoadState:N="success",optionTruncationType:P="end",renderCustomSelectedOption:B,renderListItem:G,hideNoResultsDisplay:F,noResultsDescription:M,customLabels:W,renderCustomCallToAction:Z,onBlur:V,variant:z="default",readOnly:J,alignment:K,dropdownZIndex:Q,dropdownRootNode:U,dropdownWidth:X})=>{const[Y,$]=r(h),[ee,re]=r(!1),[te,oe]=r(!1),ie=i(),se=t(null),ne=t(null),le=t(null);o((()=>{$(h)}),[h]);const ae=(e,r)=>{var t;null===(t=ne.current)||void 0===t||t.focus(),$(e),re(!1),he(!1),null==q||q(e,r)},de=()=>{ee&&(re(!1),he(!1))},pe=()=>{te||ee||oe(!0)},me=e=>{te&&!ee&&se.current&&!se.current.contains(e.relatedTarget)&&(oe(!1),null==V||V())},ce=()=>{var e;if(!Y)return"";if(R)return R(Y);if(O){const r=O(Y);return k?k(r):null!==(e=null==r?void 0:r.toString())&&void 0!==e?e:""}return Y.toString()},ue=e=>{if("middle"===P){let r=0;return le&&le.current&&(r=le.current.getBoundingClientRect().width),s.truncateOneLine(e,r,120,8)}return e},he=e=>{e?null==E||E():null==L||L()};return e(l,{children:e(d,{enabled:!J&&!j,isOpen:ee,renderElement:()=>e(p,{className:x,"data-testid":g,id:y,ref:se,tabIndex:-1,onFocus:pe,onBlur:me,focused:te,disabled:j,readOnly:J,error:b,children:e(a,{ref:ne,disabled:j,expanded:ee,listboxId:ie,popupRole:"listbox",readOnly:J,variant:z,"aria-labelledby":v,"aria-describedby":_,"aria-invalid":T,children:e(m,{ref:le,disabled:j,children:Y?B?B(Y):e(u,{variant:z,truncateType:P,children:ue(ce())}):e(c,{variant:z,truncateType:P,children:f})})})}),renderDropdown:()=>e(n,{listboxId:ie,listItems:w,onSelectItem:ae,onDismiss:de,valueExtractor:O,listExtractor:C,isOptionDisabled:D,enableSearch:I,searchPlaceholder:A,searchFunction:S,selectedItems:Y?[Y]:[],onRetry:H,itemsLoadState:N,itemTruncationType:P,renderListItem:G,hideNoResultsDisplay:F,noResultsDescription:M,customLabels:W,renderCustomCallToAction:Z,variant:z,width:X,matchElementWidth:!0}),onOpen:()=>{re(!0),he(!0),oe(!0)},onClose:e=>{re(!1),he(!1),"click"!==e&&(oe(!1),null==V||V())},onDismiss:()=>{var e;null===(e=ne.current)||void 0===e||e.focus(),re(!1),he(!1)},clickToToggle:!0,offset:8,alignment:K,fitAvailableHeight:!0,customZIndex:Q,rootNode:U})})};export{h as InputSelect};
 //# sourceMappingURL=input-select.js.map