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

package/cjs/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":["_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":["_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/cjs/input-range-slider/input-range-slider.styles.js

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

package/cjs/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":"4OAqBO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;EAIpBC,EAAiBF,EAAAA,QAAOC,GAAG;kBACtBE,EAAAA,QAAQ;;;WAGfA,EAAAA,QAAQ;EAGNC,EAA0BJ,EAAAA,QAAOC,GAAG;qBAC5BE,EAAAA,QAAQ;EAGhBE,EAAYL,EAAAA,QAAOM,aAAWC,OAAO;;EAIrCC,EAASR,EAAAA,QAAOS,EAAAA,QAAY;;EAI5BC,EAAOV,EAAAA,QAAOC,GAAoB;;;;;;;;MAQxCU,GACKA,EAAMC,UACCC,KAAG;;cAITF,EAAMG,eAAX,EACWD,KAAG;;;;;;;;;;;;;;;;;4BAmBME,EAAAA,OAAW;sBACjBC,EAAAA,OAAO;kBACXC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;cACxCN,GACCA,EAAMC,UACAG,EAAAA,OAAO,4BACPA,EAAAA,OAAO;yBACJG,EAAAA,OAAa;;EAIzBC,EAAcnB,EAAAA,QAAOC,GAAG;;;;;;cAMvBS,mCAAsCA;;mBAEjCO,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;cAC1CF,EAAAA,OAAO;;EAIRK,EAAcpB,EAAAA,QAAOC,GAAoB;;;;qBAIjCiB,EAAAA,OAAa;;kBAEfP,GACPA,EAAMU,QAAkC,mBAAjBV,EAAMU,OACtBV,EAAMU,OAAOV,GAEbA,EAAMU,QAAUN,EAAAA,OAAO,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":["track","backgroundColor","left","right","thumb"],"mappings":"kIA2BoC,wBAcnB,gCA0BQ,mCAQG,kCAvDD,6BAWL,yBAIH,+BAgDK,+BAiBA,yBAhGF,CAClBA,MAAO,CACHC,gBACI,wDACJC,KAAM,6CACNC,MAAO,+CAEXC,MAAO,CACHF,KAAM,+DAIM"}

package/cjs/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/cjs/input-range-slider/slider-components.js

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

package/cjs/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","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":"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"}

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

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

package/cjs/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":["nextValue","index","values","min","max","minRange","low","high","length","Math","val","selection","nearestIndex","nearestDist","abs","i","dist","clientX","sliderEl","step","rect","getBoundingClientRect","width","rawValue","left","snapped","round","percent","maxThumbOffset"],"mappings":"0CAAoC,sBA0C9B,SACFA,EACAC,EACAC,EACAC,EACAC,EACAC,GAEA,IAAIC,EAAMH,EACNI,EAAOH,EAIX,OAHIH,EAAQ,IAAGK,EAAMJ,EAAOD,EAAQ,GAAKI,GACrCJ,EAAQC,EAAOM,OAAS,IAAGD,EAAOL,EAAOD,EAAQ,GAAKI,GACtDC,EAAMC,IAAMA,EAAOD,GAChBG,KAAKL,IAAIE,EAAKG,KAAKN,IAAII,EAAMP,GACxC,gCAEM,SAAgCU,EAAaC,GAC/C,GAAyB,IAArBA,EAAUH,OAAc,OAAO,EAEnC,IAAII,EAAe,EACfC,EAAcJ,KAAKK,IAAIH,EAAU,GAAKD,GAC1C,IAAK,IAAIK,EAAI,EAAGA,EAAIJ,EAAUH,OAAQO,IAAK,CACvC,MAAMC,EAAOP,KAAKK,IAAIH,EAAUI,GAAKL,GACjCM,EAAOH,IACPA,EAAcG,EACdJ,EAAeG,EAEvB,CACA,OAAOH,CACX,8BArE2BF,EAAaP,EAAaC,GACjD,OAAIA,IAAQD,EAAY,GACfO,EAAMP,IAAQC,EAAMD,GAAQ,GACzC,8BAeM,UAA8Bc,QAChCA,EAAOC,SACPA,EAAQf,IACRA,EAAGC,IACHA,EAAGe,KACHA,IAEA,IAAKD,EAAU,OAAOf,EAEtB,MAAMiB,EAAOF,EAASG,wBACtB,GAAmB,IAAfD,EAAKE,MAAa,OAAOnB,EAC7B,GAAIgB,GAAQ,EAAG,OAAOV,KAAKL,IAAID,EAAKM,KAAKN,IAAIC,EAAKD,IAElD,MAIMoB,EAAWpB,EAJAM,KAAKL,IAClB,EACAK,KAAKN,IAAI,GAAIc,EAAUG,EAAKI,MAAQJ,EAAKE,SAEVlB,EAAMD,GACnCsB,EAAUhB,KAAKiB,OAAOH,EAAWpB,GAAOgB,GAAQA,EAAOhB,EAC7D,OAAOM,KAAKL,IAAID,EAAKM,KAAKN,IAAIC,EAAKqB,GACvC,mBAjCM,SAAmBE,EAAiBC,GACtC,OAAgB,IAAZD,EAAsB,MACfA,EAAU,IAAOC,EAArB,IACX"}

package/cjs/input-select/input-select.js

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

package/cjs/input-select/input-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-select.js","sources":["../../../src/input-select/input-select.tsx"],"sourcesContent":["import { OpenChangeReason } from \"@floating-ui/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport {\n    DropdownList,\n    DropdownListState,\n    ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport { InputSelectProps } from \"./types\";\n\nexport const InputSelect = <T, V>({\n    selectedOption,\n    placeholder = \"Select\",\n    options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    valueToStringFunction,\n    listExtractor,\n    isOptionDisabled,\n    displayValueExtractor,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    renderCustomSelectedOption,\n    renderListItem,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    renderCustomCallToAction,\n    onBlur,\n    variant = \"default\",\n    readOnly,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n}: InputSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTION\n    // =============================================================================\n    const getDisplayValue = (): string => {\n        if (!selected) return \"\";\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            const value = valueExtractor(selected);\n            return valueToStringFunction\n                ? valueToStringFunction(value)\n                : value?.toString() ?? \"\";\n        }\n\n        return selected.toString();\n    };\n\n    const truncateValue = (value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef && labelContainerRef.current) {\n                widthOfElement =\n                    labelContainerRef.current.getBoundingClientRect().width;\n            }\n\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n        }\n        return value;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected) {\n            return (\n                <PlaceholderLabel\n                    $truncateType={optionTruncationType}\n                    $variant={variant}\n                >\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        } else {\n            return (\n                <ValueLabel\n                    $truncateType={optionTruncationType}\n                    $variant={variant}\n                >\n                    {truncateValue(getDisplayValue())}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} $disabled={disabled}>\n            {renderLabel()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={internalId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                isOptionDisabled={isOptionDisabled}\n                enableSearch={enableSearch}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                selectedItems={selected ? [selected] : []}\n                onRetry={onRetry}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                renderListItem={renderListItem}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                renderCustomCallToAction={renderCustomCallToAction}\n                variant={variant}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["selectedOption","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","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","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","handleListItemClick","item","extractedValue","_a","current","focus","triggerOptionDisplayCallback","handleListDismiss","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","value","toString","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","$focused","$disabled","$error","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","$truncateType","$variant","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"input-select.js","sources":["../../../src/input-select/input-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n    DropdownList,\n    DropdownListState,\n    ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport type { InputSelectProps } from \"./types\";\n\n// @catalog\n/**\n * A single-selection dropdown input.\n *\n * Use `InputSelect` when the user must pick exactly one item from a list.\n * @keywords combobox, dropdown, field, form, input, picker\n */\nexport const InputSelect = <T, V>({\n    selectedOption,\n    placeholder = \"Select\",\n    options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    valueToStringFunction,\n    listExtractor,\n    isOptionDisabled,\n    displayValueExtractor,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    renderCustomSelectedOption,\n    renderListItem,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    renderCustomCallToAction,\n    onBlur,\n    variant = \"default\",\n    readOnly,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n}: InputSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTION\n    // =============================================================================\n    const getDisplayValue = (): string => {\n        if (!selected) return \"\";\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            const value = valueExtractor(selected);\n            return valueToStringFunction\n                ? valueToStringFunction(value)\n                : value?.toString() ?? \"\";\n        }\n\n        return selected.toString();\n    };\n\n    const truncateValue = (value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef && labelContainerRef.current) {\n                widthOfElement =\n                    labelContainerRef.current.getBoundingClientRect().width;\n            }\n\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n        }\n        return value;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected) {\n            return (\n                <PlaceholderLabel\n                    variant={variant}\n                    truncateType={optionTruncationType}\n                >\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        } else {\n            return (\n                <ValueLabel\n                    variant={variant}\n                    truncateType={optionTruncationType}\n                >\n                    {truncateValue(getDisplayValue())}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} disabled={disabled}>\n            {renderLabel()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={internalId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                isOptionDisabled={isOptionDisabled}\n                enableSearch={enableSearch}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                selectedItems={selected ? [selected] : []}\n                onRetry={onRetry}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                renderListItem={renderListItem}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                renderCustomCallToAction={renderCustomCallToAction}\n                variant={variant}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["selectedOption","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","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","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","handleListItemClick","item","extractedValue","_a","current","focus","triggerOptionDisplayCallback","handleListDismiss","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","value","toString","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","truncateType","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"input-slider.js","sources":["../../../src/input-slider/input-slider.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport { InputSliderProps } from \"./types\";\n\nexport const InputSlider = ({\n    value,\n    ariaLabel,\n    onChange,\n    onChangeEnd,\n    ...otherProps\n}: InputSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [selection, setSelection] = useState<number[]>(initialiseSelection());\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection[0]) {\n            setSelection(initialiseSelection());\n        }\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (value: number[]) => {\n        const [newVal] = value;\n        setSelection([newVal]);\n        onChange?.(newVal);\n    };\n\n    const handleChangeEnd = (value: number[]) => {\n        const [newVal] = value;\n        setSelection([newVal]);\n        onChangeEnd?.(newVal);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initialiseSelection() {\n        return value != undefined ? [value] : [0];\n    }\n\n    return (\n        <InputRangeSlider\n            {...otherProps}\n            value={selection}\n            numOfThumbs={1}\n            onChange={handleChange}\n            onChangeEnd={handleChangeEnd}\n            ariaLabels={ariaLabel ? [ariaLabel] : undefined}\n        />\n    );\n};\n"],"names":["_a","value","ariaLabel","onChange","onChangeEnd","otherProps","__rest","selection","setSelection","useState","initialiseSelection","useEffect","undefined","_jsx","InputRangeSlider","Object","assign","numOfThumbs","newVal","ariaLabels"],"mappings":"mLAI4BA,IAAA,IAAAC,MACxBA,EAAKC,UACLA,EAASC,SACTA,EAAQC,YACRA,GAAWJ,EACRK,EAAUC,EAAAA,OAAAN,EALW,CAAA,QAAA,YAAA,WAAA,gBAUxB,MAAOO,EAAWC,GAAgBC,EAAAA,SAAmBC,KAKrDC,EAAAA,WAAU,KACFV,IAAUM,EAAU,IACpBC,EAAaE,IACjB,GACD,CAACT,IAoBJ,SAASS,IACL,OAAgBE,MAATX,EAAqB,CAACA,GAAS,CAAC,EAC3C,CAEA,OACIY,EAAAA,IAACC,mBAAgBC,OAAAC,OAAA,CAAA,EACTX,GACJJ,MAAOM,EACPU,YAAa,EACbd,SAxBcF,IAClB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdf,SAAAA,EAAWe,EAAO,EAsBdd,YAnBiBH,IACrB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdd,SAAAA,EAAcc,EAAO,EAiBjBC,WAAYjB,EAAY,CAACA,QAAaU,IACxC"}
+{"version":3,"file":"input-slider.js","sources":["../../../src/input-slider/input-slider.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport type { InputSliderProps } from \"./types\";\n\n// @catalog\n/**\n * A single-thumb slider for selecting one numeric value within a range.\n *\n * Use `InputSlider` when a user needs to pick a single point on a continuous\n * scale without a precise value. For selecting a range between two values, use `InputRangeSlider` instead.\n * @keywords field, form, input, range, slider\n */\nexport const InputSlider = ({\n    value,\n    ariaLabel,\n    onChange,\n    onChangeEnd,\n    ...otherProps\n}: InputSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [selection, setSelection] = useState<number[]>(initialiseSelection());\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection[0]) {\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        const [newVal] = value;\n        setSelection([newVal]);\n        onChange?.(newVal);\n    };\n\n    const handleChangeEnd = (value: number[]) => {\n        const [newVal] = value;\n        setSelection([newVal]);\n        onChangeEnd?.(newVal);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initialiseSelection() {\n        return value != undefined ? [value] : [0];\n    }\n\n    return (\n        <InputRangeSlider\n            {...otherProps}\n            value={selection}\n            numOfThumbs={1}\n            onChange={handleChange}\n            onChangeEnd={handleChangeEnd}\n            ariaLabels={ariaLabel ? [ariaLabel] : undefined}\n        />\n    );\n};\n"],"names":["_a","value","ariaLabel","onChange","onChangeEnd","otherProps","__rest","selection","setSelection","useState","initialiseSelection","useEffect","undefined","_jsx","InputRangeSlider","Object","assign","numOfThumbs","newVal","ariaLabels"],"mappings":"mLAa4BA,IAAA,IAAAC,MACxBA,EAAKC,UACLA,EAASC,SACTA,EAAQC,YACRA,GAAWJ,EACRK,EAAUC,EAAAA,OAAAN,EALW,CAAA,QAAA,YAAA,WAAA,gBAUxB,MAAOO,EAAWC,GAAgBC,EAAAA,SAAmBC,KAKrDC,EAAAA,WAAU,KACFV,IAAUM,EAAU,IACpBC,EAAaE,IACjB,GAED,CAACT,IAoBJ,SAASS,IACL,OAAgBE,MAATX,EAAqB,CAACA,GAAS,CAAC,EAC3C,CAEA,OACIY,EAAAA,IAACC,mBAAgBC,OAAAC,OAAA,CAAA,EACTX,GACJJ,MAAOM,EACPU,YAAa,EACbd,SAxBcF,IAClB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdf,SAAAA,EAAWe,EAAO,EAsBdd,YAnBiBH,IACrB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdd,SAAAA,EAAcc,EAAO,EAiBjBC,WAAYjB,EAAY,CAACA,QAAaU,IACxC"}

package/cjs/input-textarea/textarea-counter.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./textara-counter.style.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(t);exports.TextareaCounter=({value:n,maxLength:u,renderCustomCounter:c})=>{const[l,o]=t.useState("");t.useEffect((()=>{o(s(`${n||""}`))}),[n,u]);const s=e=>{if(c)return c(u,e.toString().length);{const t=u-e.toString().length;return 1===t?`${t} character left`:`${t.toLocaleString()} characters left`}};return e.jsx(e.Fragment,{children:a.default.isValidElement(l)?l:e.jsx(r.CounterLabel,{"data-testid":"counter-label",children:l})})};
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./textarea-counter.styles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(t);exports.TextareaCounter=({value:a,maxLength:u,renderCustomCounter:c})=>{const[s,l]=t.useState("");t.useEffect((()=>{l(o(`${a||""}`))}),[a,u]);const o=e=>{if(c)return c(u,e.toString().length);{const t=u-e.toString().length;return 1===t?`${t} character left`:`${t.toLocaleString()} characters left`}};return e.jsx(e.Fragment,{children:n.default.isValidElement(s)?s:e.jsx("p",{className:r.counterLabel,"data-testid":"counter-label",children:s})})};
 //# sourceMappingURL=textarea-counter.js.map

package/cjs/input-textarea/textarea-counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea-counter.js","sources":["../../../src/input-textarea/textarea-counter.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { CounterLabel } from \"./textara-counter.style\";\n\ninterface Props {\n    value: string | number | readonly string[] | undefined;\n    maxLength: number;\n    renderCustomCounter?: (\n        maxLength: number,\n        currentValueLength: number\n    ) => JSX.Element;\n}\n\nexport const TextareaCounter = ({\n    value,\n    maxLength,\n    renderCustomCounter,\n}: Props): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [counterLabel, setCounterLabel] = useState<\n        string | number | readonly string[] | JSX.Element\n    >(\"\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setCounterLabel(getCounterLabel(`${value || \"\"}`));\n    }, [value, maxLength]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getCounterLabel = (value: string | number | readonly string[]) => {\n        if (renderCustomCounter) {\n            return renderCustomCounter(maxLength, value.toString().length);\n        } else {\n            const remainingLength = maxLength - value.toString().length;\n            if (remainingLength === 1) {\n                return `${remainingLength} character left`;\n            } else {\n                return `${remainingLength.toLocaleString()} characters left`;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <>\n            {React.isValidElement(counterLabel) ? (\n                counterLabel\n            ) : (\n                <CounterLabel data-testid=\"counter-label\">\n                    {counterLabel}\n                </CounterLabel>\n            )}\n        </>\n    );\n};\n"],"names":["value","maxLength","renderCustomCounter","counterLabel","setCounterLabel","useState","useEffect","getCounterLabel","toString","length","remainingLength","toLocaleString","_jsx","_Fragment","children","React","isValidElement","CounterLabel"],"mappings":"sNAY+B,EAC3BA,QACAC,YACAC,0BAKA,MAAOC,EAAcC,GAAmBC,EAAAA,SAEtC,IAKFC,EAAAA,WAAU,KACNF,EAAgBG,EAAgB,GAAGP,GAAS,MAAM,GACnD,CAACA,EAAOC,IAKX,MAAMM,EAAmBP,IACrB,GAAIE,EACA,OAAOA,EAAoBD,EAAWD,EAAMQ,WAAWC,QACpD,CACH,MAAMC,EAAkBT,EAAYD,EAAMQ,WAAWC,OACrD,OAAwB,IAApBC,EACO,GAAGA,mBAEH,GAAGA,EAAgBC,kCAElC,GAMJ,OACIC,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SACKC,EAAAA,QAAMC,eAAeb,GAAa,EAG/BS,EAAAA,IAACK,EAAAA,aAAY,CAAA,cAAa,gBAAeH,SACpCX,KAGV"}
+{"version":3,"file":"textarea-counter.js","sources":["../../../src/input-textarea/textarea-counter.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport * as styles from \"./textarea-counter.styles\";\n\ninterface Props {\n    value: string | number | readonly string[] | undefined;\n    maxLength: number;\n    renderCustomCounter?: (\n        maxLength: number,\n        currentValueLength: number\n    ) => JSX.Element;\n}\n\nexport const TextareaCounter = ({\n    value,\n    maxLength,\n    renderCustomCounter,\n}: Props): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [counterLabel, setCounterLabel] = useState<\n        string | number | readonly string[] | JSX.Element\n    >(\"\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setCounterLabel(getCounterLabel(`${value || \"\"}`));\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value, maxLength]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getCounterLabel = (value: string | number | readonly string[]) => {\n        if (renderCustomCounter) {\n            return renderCustomCounter(maxLength, value.toString().length);\n        } else {\n            const remainingLength = maxLength - value.toString().length;\n            if (remainingLength === 1) {\n                return `${remainingLength} character left`;\n            } else {\n                return `${remainingLength.toLocaleString()} characters left`;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <>\n            {React.isValidElement(counterLabel) ? (\n                counterLabel\n            ) : (\n                <p className={styles.counterLabel} data-testid=\"counter-label\">\n                    {counterLabel}\n                </p>\n            )}\n        </>\n    );\n};\n"],"names":["value","maxLength","renderCustomCounter","counterLabel","setCounterLabel","useState","useEffect","getCounterLabel","toString","length","remainingLength","toLocaleString","_jsx","_Fragment","children","React","isValidElement","className","styles.counterLabel"],"mappings":"wNAa+B,EAC3BA,QACAC,YACAC,0BAKA,MAAOC,EAAcC,GAAmBC,EAAAA,SAEtC,IAKFC,EAAAA,WAAU,KACNF,EAAgBG,EAAgB,GAAGP,GAAS,MAAM,GAEnD,CAACA,EAAOC,IAKX,MAAMM,EAAmBP,IACrB,GAAIE,EACA,OAAOA,EAAoBD,EAAWD,EAAMQ,WAAWC,QACpD,CACH,MAAMC,EAAkBT,EAAYD,EAAMQ,WAAWC,OACrD,OAAwB,IAApBC,EACO,GAAGA,mBAEH,GAAGA,EAAgBC,kCAElC,GAMJ,OACIC,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SACKC,EAAAA,QAAMC,eAAeb,GAAa,EAG/BS,EAAAA,IAAA,IAAA,CAAGK,UAAWC,EAAAA,aAAmB,cAAc,gBAAeJ,SACzDX,KAGV"}

package/cjs/input-textarea/textarea-counter.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./textarea-counter.styles_1n3wsnv.css");exports.counterLabel="c1d4l1yp";
+//# sourceMappingURL=textarea-counter.styles.js.map

package/cjs/input-textarea/textarea-counter.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-counter.styles.js","sources":["../../../src/input-textarea/textarea-counter.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../theme\";\n\nexport const counterLabel = css`\n    text-align: right;\n    ${Font[\"body-sm-semibold\"]}\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":[],"mappings":"iHAIyB"}

package/cjs/input-textarea/textarea-counter.styles_1n3wsnv.css

@@ -0,0 +1 @@
+@layer fds{.c1d4l1yp{text-align:right;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-subtler);}}

package/cjs/input-textarea/textarea.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),a=require("./textarea-counter.js"),n=require("./textarea.style.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=s(r);const l=u.default.forwardRef(((a,s)=>{var{value:u,disabled:l,error:o,rows:i=5,prefix:g,transformValue:f,onChange:c,maxLength:h}=a,x=e.__rest(a,["value","disabled","error","rows","prefix","transformValue","onChange","maxLength"]);const[d,v]=r.useState(u);r.useEffect((()=>{v(u)}),[u]);return t.jsx(n.Element,Object.assign({ref:s,disabled:l,value:g?g+(null!=d?d:""):d,onChange:e=>{let t=e.target.value;if(g){t.startsWith(g)||(t=g+t.trimStart()),t.length<g.length&&(t=g);if((e.target.selectionStart||0)<g.length)return void e.preventDefault();const r=t.slice(g.length),a=f?f(r):r;if(v(a),e.target.value=g+a,c){const t=Object.assign(Object.assign({},e),{target:Object.assign(Object.assign({},e.target),{value:a})});c(t)}}else{const r=f?f(null!=t?t:""):t;v(r),e.target.value=r,c&&c(e)}},onKeyDown:e=>{if(!g)return;const{selectionStart:t}=e.currentTarget;"Backspace"===e.key&&t<=g.length&&e.preventDefault(),"ArrowLeft"===e.key&&t<=g.length&&e.preventDefault(),"Home"===e.key&&(e.preventDefault(),requestAnimationFrame((()=>{e.currentTarget.setSelectionRange(g.length,g.length)})))},$error:o,rows:i,maxLength:g&&h?g.length+h:h},x))})),o=u.default.forwardRef(((s,u)=>{var{value:o,disabled:i,rows:g=5,onChange:f,transformValue:c,prefix:h,maxLength:x,renderCustomCounter:d}=s,v=e.__rest(s,["value","disabled","rows","onChange","transformValue","prefix","maxLength","renderCustomCounter"]);const[m,j]=r.useState(o);r.useEffect((()=>{j(o)}),[o]);return t.jsxs(n.Wrapper,{children:[t.jsx(l,Object.assign({ref:u,disabled:i,value:m,rows:g||5,onChange:e=>{const t=e.target.value;j(t),f&&f(e)},prefix:h,transformValue:c,maxLength:x},v)),x&&t.jsx(a.TextareaCounter,{value:m,maxLength:x,renderCustomCounter:d})]})}));exports.Textarea=o,exports.TextareaBase=l;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("clsx"),t=require("react"),s=require("../form/form-label/form-label.js"),n=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("./textarea.styles.js"),o=require("./textarea-counter.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(a),c=u(t);const g=c.default.forwardRef(((a,s)=>{var{className:n,disabled:l,error:o,maxLength:u,onChange:c,prefix:g,readOnly:f,rows:m=5,transformValue:v,value:x}=a,h=e.__rest(a,["className","disabled","error","maxLength","onChange","prefix","readOnly","rows","transformValue","value"]);const[j,b]=t.useState(x);t.useEffect((()=>{b(x)}),[x]);return r.jsx("textarea",Object.assign({ref:s,disabled:l,value:g?g+(null!=j?j:""):j,onChange:e=>{let r=e.target.value;if(g){r.startsWith(g)||(r=g+r.trimStart()),r.length<g.length&&(r=g);if((e.target.selectionStart||0)<g.length)return void e.preventDefault();const a=r.slice(g.length),t=v?v(a):a;if(b(t),e.target.value=g+t,c){const r=Object.assign(Object.assign({},e),{target:Object.assign(Object.assign({},e.target),{value:t})});c(r)}}else{const a=v?v(null!=r?r:""):r;b(a),e.target.value=a,c&&c(e)}},onKeyDown:e=>{if(!g)return;const{selectionStart:r}=e.currentTarget;"Backspace"===e.key&&r<=g.length&&e.preventDefault(),"ArrowLeft"===e.key&&r<=g.length&&e.preventDefault(),"Home"===e.key&&(e.preventDefault(),requestAnimationFrame((()=>{e.currentTarget.setSelectionRange(g.length,g.length)})))},readOnly:f,className:d.default(i.element,f&&i.elementReadOnly||l&&i.elementDisabled||o&&i.elementError,n),rows:m,maxLength:g&&u?g.length+u:u},h))})),f=c.default.forwardRef(((a,u)=>{var d,{value:c,id:f,disabled:m,rows:v=5,onChange:x,transformValue:h,prefix:j,maxLength:b,renderCustomCounter:p,errorMessage:y,"data-error-testid":q,error:C}=a,w=e.__rest(a,["value","id","disabled","rows","onChange","transformValue","prefix","maxLength","renderCustomCounter","errorMessage","data-error-testid","error"]);const[O,L]=t.useState(c),D=l.useId();t.useEffect((()=>{L(c)}),[c]);const N=f?`${f}-error-message`:D,S=null!==(d=w["aria-invalid"])&&void 0!==d?d:!!y||!!C,_=n.concatIds(w["aria-describedby"],y?N:void 0);return r.jsxs("div",{className:i.wrapper,children:[r.jsx(g,Object.assign({ref:u,disabled:m,value:O,rows:v||5,onChange:e=>{const r=e.target.value;L(r),x&&x(e)},prefix:j,transformValue:h,maxLength:b,error:!!y||C},w,{id:f,"aria-invalid":S,"aria-describedby":_})),y||b?r.jsxs("div",{className:i.labelContainer,children:[y&&r.jsx(s.FormErrorMessage,{className:i.errorMessage,"data-testid":q,id:N,children:y}),b&&r.jsx(o.TextareaCounter,{value:O,maxLength:b,renderCustomCounter:p})]}):null]})}));exports.Textarea=f,exports.TextareaBase=g;
 //# sourceMappingURL=textarea.js.map

package/cjs/input-textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sources":["../../../src/input-textarea/textarea.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { TextareaCounter } from \"./textarea-counter\";\nimport { Element, Wrapper } from \"./textarea.style\";\nimport { TextareaProps, TextareaRef } from \"./types\";\n\n// =============================================================================\n// BASE COMPONENT\n// =============================================================================\nconst TextareaBaseComponent = (\n    {\n        value,\n        disabled,\n        error,\n        rows = 5,\n        prefix,\n        transformValue,\n        onChange,\n        maxLength,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    const [stateValue, setStateValue] = useState(value);\n\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        let newValue = event.target.value;\n        if (prefix) {\n            // Ensure prefix is always present\n            if (!newValue.startsWith(prefix)) {\n                newValue = prefix + newValue.trimStart();\n            }\n\n            // Prevent deleting the prefix\n            if (newValue.length < prefix.length) {\n                newValue = prefix;\n            }\n\n            const cursorPosition = event.target.selectionStart || 0;\n\n            // Ensure backspace does not delete the prefix\n            if (cursorPosition < prefix.length) {\n                event.preventDefault();\n                return;\n            }\n\n            // Extract user input\n            const userInput = newValue.slice(prefix.length);\n\n            // Transform the input if needed\n            const transformedValue = transformValue\n                ? transformValue(userInput)\n                : userInput;\n\n            // Update state and input field\n            setStateValue(transformedValue);\n            event.target.value = prefix + transformedValue;\n\n            // Pass only the user input (without prefix) to `onChange`\n            if (onChange) {\n                const syntheticEvent = {\n                    ...event,\n                    target: { ...event.target, value: transformedValue },\n                };\n                onChange(\n                    syntheticEvent as React.ChangeEvent<HTMLTextAreaElement>\n                );\n            }\n        } else {\n            const transformedValue = transformValue\n                ? transformValue(newValue ?? \"\")\n                : newValue;\n\n            setStateValue(transformedValue);\n            event.target.value = transformedValue;\n            if (onChange) onChange(event);\n        }\n    };\n\n    const getDisplayValue = () => {\n        return prefix ? prefix + (stateValue ?? \"\") : stateValue;\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (!prefix) return;\n\n        const { selectionStart } = event.currentTarget;\n\n        // Prevent backspace in prefix\n        if (event.key === \"Backspace\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent left arrow from moving into prefix\n        if (event.key === \"ArrowLeft\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent \"Home\" key from moving cursor to beginning\n        if (event.key === \"Home\") {\n            event.preventDefault();\n            requestAnimationFrame(() => {\n                event.currentTarget.setSelectionRange(\n                    prefix.length,\n                    prefix.length\n                );\n            });\n        }\n    };\n\n    return (\n        <Element\n            ref={ref}\n            disabled={disabled}\n            value={getDisplayValue()}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            $error={error}\n            rows={rows}\n            maxLength={\n                prefix && maxLength ? prefix.length + maxLength : maxLength\n            }\n            {...otherProps}\n        />\n    );\n};\n\nexport const TextareaBase = React.forwardRef(TextareaBaseComponent);\n\n// =============================================================================\n// MODULE COMPONENT (comes with the counter)\n// =============================================================================\n\nconst TextareaComponent = (\n    {\n        value,\n        disabled,\n        rows = 5,\n        onChange,\n        transformValue,\n        prefix,\n        maxLength,\n        renderCustomCounter,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    // -------------------------------------------------------------------------\n    // CONST, STATE, REF\n    // -------------------------------------------------------------------------\n    const [stateValue, setStateValue] = useState<\n        string | number | readonly string[] | undefined\n    >(value);\n\n    // -------------------------------------------------------------------------\n    // EFFECTS\n    // -------------------------------------------------------------------------\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    // -------------------------------------------------------------------------\n    // EVENT HANDLER\n    // -------------------------------------------------------------------------\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const newValue = event.target.value;\n        setStateValue(newValue);\n        if (onChange) onChange(event);\n    };\n\n    // -------------------------------------------------------------------------\n    // RENDER FUNCTIONS\n    // -------------------------------------------------------------------------\n    return (\n        <Wrapper>\n            <TextareaBase\n                ref={ref}\n                disabled={disabled}\n                value={stateValue}\n                rows={rows || 5}\n                onChange={handleChange}\n                prefix={prefix}\n                transformValue={transformValue}\n                maxLength={maxLength}\n                {...otherProps}\n            />\n            {maxLength && (\n                <TextareaCounter\n                    value={stateValue}\n                    maxLength={maxLength}\n                    renderCustomCounter={renderCustomCounter}\n                />\n            )}\n        </Wrapper>\n    );\n};\n\nexport const Textarea = React.forwardRef(TextareaComponent);\n"],"names":["TextareaBase","React","forwardRef","_a","ref","value","disabled","error","rows","prefix","transformValue","onChange","maxLength","otherProps","__rest","stateValue","setStateValue","useState","useEffect","_jsx","Element","Object","assign","event","newValue","target","startsWith","trimStart","length","selectionStart","preventDefault","userInput","slice","transformedValue","syntheticEvent","onKeyDown","currentTarget","key","requestAnimationFrame","setSelectionRange","$error","Textarea","renderCustomCounter","_jsxs","Wrapper","children","TextareaCounter"],"mappings":"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"}
+{"version":3,"file":"textarea.js","sources":["../../../src/input-textarea/textarea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useState } from \"react\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport * as styles from \"./textarea.styles\";\nimport { TextareaCounter } from \"./textarea-counter\";\nimport type { TextareaProps, TextareaRef } from \"./types\";\n\n// =============================================================================\n// BASE COMPONENT\n// =============================================================================\nconst TextareaBaseComponent = (\n    {\n        className,\n        disabled,\n        error,\n        maxLength,\n        onChange,\n        prefix,\n        readOnly,\n        rows = 5,\n        transformValue,\n        value,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    const [stateValue, setStateValue] = useState(value);\n\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        let newValue = event.target.value;\n        if (prefix) {\n            // Ensure prefix is always present\n            if (!newValue.startsWith(prefix)) {\n                newValue = prefix + newValue.trimStart();\n            }\n\n            // Prevent deleting the prefix\n            if (newValue.length < prefix.length) {\n                newValue = prefix;\n            }\n\n            const cursorPosition = event.target.selectionStart || 0;\n\n            // Ensure backspace does not delete the prefix\n            if (cursorPosition < prefix.length) {\n                event.preventDefault();\n                return;\n            }\n\n            // Extract user input\n            const userInput = newValue.slice(prefix.length);\n\n            // Transform the input if needed\n            const transformedValue = transformValue\n                ? transformValue(userInput)\n                : userInput;\n\n            // Update state and input field\n            setStateValue(transformedValue);\n            event.target.value = prefix + transformedValue;\n\n            // Pass only the user input (without prefix) to `onChange`\n            if (onChange) {\n                const syntheticEvent = {\n                    ...event,\n                    target: { ...event.target, value: transformedValue },\n                };\n                onChange(\n                    syntheticEvent as React.ChangeEvent<HTMLTextAreaElement>\n                );\n            }\n        } else {\n            const transformedValue = transformValue\n                ? transformValue(newValue ?? \"\")\n                : newValue;\n\n            setStateValue(transformedValue);\n            event.target.value = transformedValue;\n            if (onChange) onChange(event);\n        }\n    };\n\n    const getDisplayValue = () => {\n        return prefix ? prefix + (stateValue ?? \"\") : stateValue;\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (!prefix) return;\n\n        const { selectionStart } = event.currentTarget;\n\n        // Prevent backspace in prefix\n        if (event.key === \"Backspace\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent left arrow from moving into prefix\n        if (event.key === \"ArrowLeft\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent \"Home\" key from moving cursor to beginning\n        if (event.key === \"Home\") {\n            event.preventDefault();\n            requestAnimationFrame(() => {\n                event.currentTarget.setSelectionRange(\n                    prefix.length,\n                    prefix.length\n                );\n            });\n        }\n    };\n\n    return (\n        <textarea\n            ref={ref}\n            disabled={disabled}\n            value={getDisplayValue()}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            readOnly={readOnly}\n            className={clsx(\n                styles.element,\n                (readOnly && styles.elementReadOnly) ||\n                    (disabled && styles.elementDisabled) ||\n                    (error && styles.elementError),\n                className\n            )}\n            rows={rows}\n            maxLength={\n                prefix && maxLength ? prefix.length + maxLength : maxLength\n            }\n            {...otherProps}\n        />\n    );\n};\n\nexport const TextareaBase = React.forwardRef(TextareaBaseComponent);\n\n// =============================================================================\n// MODULE COMPONENT (comes with the counter)\n// =============================================================================\n\nconst TextareaComponent = (\n    {\n        value,\n        id,\n        disabled,\n        rows = 5,\n        onChange,\n        transformValue,\n        prefix,\n        maxLength,\n        renderCustomCounter,\n        errorMessage,\n        \"data-error-testid\": errorTestId,\n        error,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    // -------------------------------------------------------------------------\n    // CONST, STATE, REF\n    // -------------------------------------------------------------------------\n    const [stateValue, setStateValue] = useState<\n        string | number | readonly string[] | undefined\n    >(value);\n    const defaultErrorMessageID = useId();\n\n    // -------------------------------------------------------------------------\n    // EFFECTS\n    // -------------------------------------------------------------------------\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    // -------------------------------------------------------------------------\n    // EVENT HANDLER\n    // -------------------------------------------------------------------------\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const newValue = event.target.value;\n        setStateValue(newValue);\n        if (onChange) onChange(event);\n    };\n\n    const errorMessageId = id ? `${id}-error-message` : defaultErrorMessageID;\n    const ariaInvalid =\n        otherProps[\"aria-invalid\"] ?? (!!errorMessage || !!error);\n    const ariaDescribedBy = concatIds(\n        otherProps[\"aria-describedby\"],\n        errorMessage ? errorMessageId : undefined\n    );\n\n    // -------------------------------------------------------------------------\n    // RENDER FUNCTIONS\n    // -------------------------------------------------------------------------\n    const renderBottomLabels = () => {\n        if (!errorMessage && !maxLength) return null;\n        return (\n            <div className={styles.labelContainer}>\n                {errorMessage && (\n                    <FormErrorMessage\n                        className={styles.errorMessage}\n                        data-testid={errorTestId}\n                        id={errorMessageId}\n                    >\n                        {errorMessage}\n                    </FormErrorMessage>\n                )}\n                {maxLength && (\n                    <TextareaCounter\n                        value={stateValue}\n                        maxLength={maxLength}\n                        renderCustomCounter={renderCustomCounter}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <div className={styles.wrapper}>\n            <TextareaBase\n                ref={ref}\n                disabled={disabled}\n                value={stateValue}\n                rows={rows || 5}\n                onChange={handleChange}\n                prefix={prefix}\n                transformValue={transformValue}\n                maxLength={maxLength}\n                error={!!errorMessage || error}\n                {...otherProps}\n                id={id}\n                aria-invalid={ariaInvalid}\n                aria-describedby={ariaDescribedBy}\n            />\n            {renderBottomLabels()}\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A multi-line text input with an optional character counter and prefix.\n * @keywords field, form, input, multiline, text field\n */\nexport const Textarea = React.forwardRef(TextareaComponent);\n"],"names":["TextareaBase","React","forwardRef","_a","ref","className","disabled","error","maxLength","onChange","prefix","readOnly","rows","transformValue","value","otherProps","__rest","stateValue","setStateValue","useState","useEffect","_jsx","Object","assign","event","newValue","target","startsWith","trimStart","length","selectionStart","preventDefault","userInput","slice","transformedValue","syntheticEvent","onKeyDown","currentTarget","key","requestAnimationFrame","setSelectionRange","clsx","styles.element","styles.elementReadOnly","styles.elementDisabled","styles.elementError","Textarea","id","renderCustomCounter","errorMessage","errorTestId","defaultErrorMessageID","useId","errorMessageId","ariaInvalid","_b","ariaDescribedBy","concatIds","undefined","_jsxs","styles.wrapper","children","styles.labelContainer","FormErrorMessage","styles.errorMessage","TextareaCounter"],"mappings":"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"}

package/cjs/input-textarea/textarea.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./textarea.styles_6we7bs.css");exports.element="e10c6rk9",exports.elementDisabled="e9uwuyt",exports.elementError="etmlvbn",exports.elementReadOnly="e1kovz0t",exports.errorMessage="e1mvywhi",exports.labelContainer="l1npkv4w",exports.wrapper="w1xqauhq";
+//# sourceMappingURL=textarea.styles.js.map

package/cjs/input-textarea/textarea.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.styles.js","sources":["../../../src/input-textarea/textarea.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const element = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour.bg};\n    outline: none;\n    overflow: auto;\n\n    display: block;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    width: 100%;\n\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    &:focus,\n    &:active {\n        outline-offset: -1px;\n        outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n\nexport const elementReadOnly = css`\n    border-color: transparent;\n    background: transparent !important;\n    padding: ${Spacing[\"spacing-12\"]} 0;\n\n    &:focus,\n    &:active {\n        outline-color: ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const elementDisabled = css`\n    background: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n\n    &:focus,\n    &:active {\n        outline-color: ${Colour[\"border-disabled\"]};\n    }\n`;\n\nexport const elementError = css`\n    border-color: ${Colour[\"border-error\"]};\n\n    &:focus,\n    &:active {\n        outline-color: ${Colour[\"border-error-focus\"]};\n    }\n`;\n\nexport const labelContainer = css`\n    display: flex;\n    justify-content: flex-end;\n    gap: ${Spacing[\"spacing-12\"]};\n`;\n\nexport const errorMessage = css`\n    flex: 1;\n    margin-top: 0;\n    align-items: flex-start;\n`;\n"],"names":[],"mappings":"mGAUoB,mCAqDQ,+BAUH,kCArBG,gCAoCH,kCANE,2BA9EP"}