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

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

@@ -1 +1 @@
-{"version":3,"file":"input-range-select.js","sources":["../../src/input-range-select/input-range-select.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { ClearIcon } from \"../input/input.style\";\nimport type { DropdownListApi } from \"../shared/dropdown-list-v2\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n    Wrapper,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport {\n    ClearIconContainer,\n    StyledInputWrapper,\n} from \"./input-range-select.style\";\nimport type { InputRangeSelectProps } from \"./types\";\n\ntype RangeType = \"from\" | \"to\";\n\nexport const InputRangeSelect = <T, V>({\n    selectedOptions,\n    placeholders = { from: \"Select\", to: \"Select\" },\n    options,\n    disabled,\n    className,\n    readOnly,\n    error,\n    \"data-testid\": testId,\n    id,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    valueToStringFunction,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = { from: \"success\", to: \"success\" },\n    optionTruncationType = \"middle\",\n    renderCustomSelectedOption,\n    renderListItem,\n    renderCustomCallToAction,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    ...otherProps\n}: InputRangeSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedFromValue, setSelectedFromValue] = useState<T | undefined>();\n    const [selectedToValue, setSelectedToValue] = useState<T | undefined>();\n    const [focusedInput, setFocusedInput] = useState<RangeType | \"none\">(\n        \"none\"\n    );\n    const isOpen = focusedInput !== \"none\";\n    const [isFocused, setIsFocused] = useState(false);\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const labelContainerRef = {\n        from: useRef<HTMLDivElement>(null),\n        to: useRef<HTMLDivElement>(null),\n    };\n    const dropdownRef = useRef<DropdownListApi>(null);\n\n    const [internalId] = useState<string>(\n        () => id ?? SimpleIdGenerator.generate()\n    );\n    const listboxId = `${internalId}-range-listbox`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedFromValue(selectedOptions?.from);\n        setSelectedToValue(selectedOptions?.to);\n    }, [selectedOptions]);\n\n    useEffect(() => {\n        if (!isOpen) return;\n\n        if (focusedInput === \"to\") {\n            dropdownRef.current?.refocus({ index: 0 });\n        }\n    }, [isOpen, focusedInput]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show) onHideOptions?.();\n        if (show) onShowOptions?.();\n    };\n\n    const getDisplayValue = (rangeType: RangeType): string => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n        if (!selected) return \"\";\n\n        if (displayValueExtractor) return displayValueExtractor(selected);\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 = (type: RangeType, value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef[type]?.current) {\n                widthOfElement =\n                    labelContainerRef[type].current.getBoundingClientRect()\n                        .width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n        }\n        return value;\n    };\n\n    const getCurrentFocused = (): \"none\" | \"start\" | \"end\" => {\n        switch (focusedInput) {\n            case \"from\":\n                return \"start\";\n            case \"to\":\n                return \"end\";\n            case \"none\":\n                return focusedInput;\n        }\n    };\n\n    const currentOptions = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        return options?.[focusedInput] ?? [];\n    }, [focusedInput, options]);\n\n    const currentSelectedItems = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        const selected =\n            focusedInput === \"from\" ? selectedFromValue : selectedToValue;\n        return selected ? [selected] : [];\n    }, [focusedInput, selectedFromValue, selectedToValue]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelectorClick =\n        (rangeType?: RangeType) => (event: React.MouseEvent) => {\n            event.stopPropagation();\n            event.preventDefault();\n\n            if (disabled || readOnly) return;\n\n            if (rangeType === \"to\" && selectedFromValue) {\n                setFocusedInput(\"to\");\n            } else {\n                setFocusedInput(\"from\");\n            }\n\n            triggerOptionDisplayCallback(true);\n        };\n\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        if (focusedInput === \"none\") return;\n\n        if (focusedInput === \"from\") {\n            setSelectedFromValue(item);\n            onSelectOption?.({ from: item }, extractedValue);\n\n            setSelectedToValue(undefined);\n            setFocusedInput(\"to\");\n            triggerOptionDisplayCallback(true);\n            return;\n        }\n\n        setSelectedToValue(item);\n        onSelectOption?.({ to: item }, extractedValue);\n\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n        nodeRef.current?.focus();\n        setIsFocused(true);\n    };\n\n    const handleDismiss = () => {\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        nodeRef.current?.focus();\n        setIsFocused(true);\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n    };\n\n    const handleClose = () => {\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n\n        setIsFocused(false);\n    };\n\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n        if (focusedInput === \"none\") {\n            setFocusedInput(\"from\");\n            triggerOptionDisplayCallback(true);\n        }\n    };\n\n    const handleClear = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n        setSelectedFromValue(undefined);\n        setSelectedToValue(undefined);\n        onSelectOption?.({ from: undefined, to: undefined }, undefined);\n\n        nodeRef.current?.focus();\n        setIsFocused(true);\n    };\n\n    const handleNodeFocus = () => setIsFocused(true);\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            isFocused &&\n            !isOpen &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setIsFocused(false);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (disabled || readOnly) return;\n        if (isOpen) return;\n        if (event.currentTarget !== event.target) return;\n\n        switch (event.key) {\n            case \"Enter\":\n            case \" \":\n            case \"ArrowDown\":\n                event.preventDefault();\n                setFocusedInput(\"from\");\n                triggerOptionDisplayCallback(true);\n                break;\n            default:\n                break;\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderLabel = (rangeType: RangeType) => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n\n        if (!selected) {\n            return (\n                <PlaceholderLabel $truncateType={optionTruncationType}>\n                    {truncateValue(rangeType, placeholders?.[rangeType] || \"\")}\n                </PlaceholderLabel>\n            );\n        }\n\n        if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        }\n\n        return (\n            <ValueLabel $truncateType={optionTruncationType}>\n                {truncateValue(rangeType, getDisplayValue(rangeType))}\n            </ValueLabel>\n        );\n    };\n\n    const renderSelectorContent = (rangeType: RangeType) => (\n        <LabelContainer\n            onClick={handleSelectorClick(rangeType)}\n            ref={labelContainerRef[rangeType]}\n            $disabled={disabled}\n        >\n            {renderLabel(rangeType)}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <StyledInputWrapper\n                className={className}\n                data-testid={testId}\n                ref={nodeRef}\n                tabIndex={0}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={isFocused || isOpen}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n                onKeyDown={handleKeyDown}\n            >\n                <RangeInputInnerContainer\n                    currentActive={getCurrentFocused()}\n                    error={error}\n                >\n                    {renderSelectorContent(\"from\")}\n                    {renderSelectorContent(\"to\")}\n                </RangeInputInnerContainer>\n\n                {!isOpen &&\n                    selectedFromValue &&\n                    selectedToValue &&\n                    !readOnly &&\n                    !disabled && (\n                        <ClearIconContainer\n                            onClick={handleClear}\n                            type=\"button\"\n                            aria-label=\"Clear\"\n                        >\n                            <ClearIcon aria-hidden />\n                        </ClearIconContainer>\n                    )}\n            </StyledInputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                ref={dropdownRef}\n                data-testid={`${testId}-dropdown`}\n                listboxId={listboxId}\n                listItems={currentOptions}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                selectedItems={currentSelectedItems}\n                itemsLoadState={optionsLoadState[focusedInput as RangeType]}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                width={dropdownWidth}\n                matchElementWidth={!dropdownWidth}\n                enableSearch={enableSearch}\n                searchFunction={searchFunction}\n                searchPlaceholder={searchPlaceholder}\n                renderListItem={renderListItem}\n                renderCustomCallToAction={renderCustomCallToAction}\n            />\n        );\n    };\n\n    return (\n        <Wrapper id={id} {...otherProps}>\n            <DropdownListState>\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={isOpen}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle={false}\n                    offset={8}\n                    alignment={alignment}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                />\n            </DropdownListState>\n        </Wrapper>\n    );\n};\n"],"names":["InputRangeSelect","_a","selectedOptions","placeholders","from","to","options","disabled","className","readOnly","error","testId","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","otherProps","__rest","selectedFromValue","setSelectedFromValue","useState","selectedToValue","setSelectedToValue","focusedInput","setFocusedInput","isOpen","isFocused","setIsFocused","nodeRef","useRef","labelContainerRef","dropdownRef","internalId","SimpleIdGenerator","generate","listboxId","useEffect","current","refocus","index","triggerOptionDisplayCallback","show","getDisplayValue","rangeType","selected","value","_b","toString","call","truncateValue","type","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","getCurrentFocused","currentOptions","useMemo","currentSelectedItems","handleSelectorClick","event","stopPropagation","preventDefault","handleListItemClick","item","extractedValue","undefined","focus","handleDismiss","handleClear","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleKeyDown","currentTarget","target","key","renderLabel","_jsx","ValueLabel","$truncateType","PlaceholderLabel","renderSelectorContent","LabelContainer","onClick","ref","$disabled","children","Wrapper","Object","assign","DropdownListState","ElementWithDropdown","enabled","renderElement","_jsxs","StyledInputWrapper","tabIndex","onFocus","onBlur","$focused","$readOnly","$error","onKeyDown","RangeInputInnerContainer","currentActive","ClearIconContainer","ClearIcon","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"input-range-select.js","sources":["../../src/input-range-select/input-range-select.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport * as styles from \"../input/input.styles\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport type { DropdownListApi } from \"../shared/dropdown-list\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport {\n    ClearIconContainer,\n    RangeSelectorButton,\n    StyledInputWrapper,\n} from \"./input-range-select.style\";\nimport type { InputRangeSelectProps } from \"./types\";\n\ntype RangeType = \"from\" | \"to\";\n\nexport const InputRangeSelect = <T, V>({\n    selectedOptions,\n    placeholders = { from: \"Select\", to: \"Select\" },\n    options,\n    disabled,\n    className,\n    readOnly,\n    error,\n    \"data-testid\": testId,\n    id,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    valueToStringFunction,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = { from: \"success\", to: \"success\" },\n    optionTruncationType = \"middle\",\n    renderCustomSelectedOption,\n    renderListItem,\n    renderCustomCallToAction,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: InputRangeSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedFromValue, setSelectedFromValue] = useState<T | undefined>();\n    const [selectedToValue, setSelectedToValue] = useState<T | undefined>();\n    const [focusedInput, setFocusedInput] = useState<RangeType | \"none\">(\n        \"none\"\n    );\n    const isOpen = focusedInput !== \"none\";\n\n    const labelButtonRef = {\n        from: useRef<HTMLButtonElement>(null),\n        to: useRef<HTMLButtonElement>(null),\n    };\n    const dropdownRef = useRef<DropdownListApi>(null);\n\n    const internalId = useId();\n    const listboxId = `${internalId}-range-listbox`;\n    const fromLabelId = `${internalId}-from-label`;\n    const toLabelId = `${internalId}-to-label`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedFromValue(selectedOptions?.from);\n        setSelectedToValue(selectedOptions?.to);\n    }, [selectedOptions]);\n\n    useEffect(() => {\n        if (!isOpen) return;\n\n        if (focusedInput === \"to\") {\n            dropdownRef.current?.refocus({ index: 0 });\n        }\n    }, [isOpen, focusedInput]);\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show) onHideOptions?.();\n        if (show) onShowOptions?.();\n    };\n\n    const getDisplayValue = (rangeType: RangeType): string => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n        if (!selected) return \"\";\n\n        if (displayValueExtractor) return displayValueExtractor(selected);\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 = (type: RangeType, value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelButtonRef[type]?.current) {\n                widthOfElement =\n                    labelButtonRef[type].current.getBoundingClientRect().width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n        }\n        return value;\n    };\n\n    const getCurrentFocused = (): \"none\" | \"start\" | \"end\" => {\n        switch (focusedInput) {\n            case \"from\":\n                return \"start\";\n            case \"to\":\n                return \"end\";\n            case \"none\":\n                return focusedInput;\n        }\n    };\n\n    const currentOptions = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        return options?.[focusedInput] ?? [];\n    }, [focusedInput, options]);\n\n    const currentSelectedItems = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        const selected =\n            focusedInput === \"from\" ? selectedFromValue : selectedToValue;\n        return selected ? [selected] : [];\n    }, [focusedInput, selectedFromValue, selectedToValue]);\n\n    const openDropdownFor = (rangeType: RangeType) => {\n        if (disabled || readOnly) return;\n\n        const nextFocusedInput =\n            rangeType === \"to\" && !selectedFromValue ? \"from\" : rangeType;\n\n        setFocusedInput(nextFocusedInput);\n        triggerOptionDisplayCallback(true);\n    };\n\n    const focusButton = (type: RangeType) => {\n        labelButtonRef[type].current?.focus();\n    };\n\n    const getButtonLabelledBy = (rangeType: RangeType) => {\n        const rangeLabelId = rangeType === \"from\" ? fromLabelId : toLabelId;\n        return concatIds(rangeLabelId, ariaLabelledBy);\n    };\n\n    const getDropdownAriaLabel = () => {\n        if (focusedInput === \"from\") {\n            return `Selecting for: ${placeholders?.from}`;\n        }\n\n        if (focusedInput === \"to\") {\n            return `Selecting for: ${placeholders?.to}`;\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelectorClick =\n        (rangeType: RangeType) => (event: React.MouseEvent) => {\n            event.stopPropagation();\n            event.preventDefault();\n            openDropdownFor(rangeType);\n        };\n\n    const handleSelectorKeyDown =\n        (rangeType: RangeType) =>\n        (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (disabled || readOnly) return;\n\n            switch (event.key) {\n                case \"Enter\":\n                case \" \":\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    openDropdownFor(rangeType);\n                    break;\n                default:\n                    break;\n            }\n        };\n\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        if (focusedInput === \"none\") return;\n\n        if (focusedInput === \"from\") {\n            setSelectedFromValue(item);\n            onSelectOption?.({ from: item }, extractedValue);\n\n            setSelectedToValue(undefined);\n            setFocusedInput(\"to\");\n            triggerOptionDisplayCallback(true);\n            focusButton(\"to\");\n            return;\n        }\n\n        setSelectedToValue(item);\n        onSelectOption?.({ to: item }, extractedValue);\n\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n        focusButton(\"to\");\n    };\n\n    const handleDismiss = () => {\n        const last = focusedInput;\n\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        if (last === \"to\") focusButton(\"to\");\n        else focusButton(\"from\");\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n    };\n\n    const handleClose = () => {\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n    };\n\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n\n        if (focusedInput === \"none\") {\n            setFocusedInput(\"from\");\n            triggerOptionDisplayCallback(true);\n        }\n    };\n\n    const handleClear = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n        setSelectedFromValue(undefined);\n        setSelectedToValue(undefined);\n        onSelectOption?.({ from: undefined, to: undefined }, undefined);\n\n        focusButton(\"from\");\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderLabel = (rangeType: RangeType) => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n\n        if (!selected) {\n            return (\n                <PlaceholderLabel truncateType={optionTruncationType}>\n                    {truncateValue(rangeType, placeholders?.[rangeType] || \"\")}\n                </PlaceholderLabel>\n            );\n        }\n\n        if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        }\n\n        return (\n            <ValueLabel truncateType={optionTruncationType}>\n                {truncateValue(rangeType, getDisplayValue(rangeType))}\n            </ValueLabel>\n        );\n    };\n\n    const renderSelectorContent = (rangeType: RangeType) => (\n        <RangeSelectorButton\n            type=\"button\"\n            role=\"combobox\"\n            aria-labelledby={getButtonLabelledBy(rangeType)}\n            aria-describedby={ariaDescribedBy}\n            aria-expanded={isOpen && focusedInput === rangeType}\n            aria-controls={listboxId}\n            aria-disabled={disabled}\n            aria-readonly={readOnly}\n            onClick={handleSelectorClick(rangeType)}\n            onKeyDown={handleSelectorKeyDown(rangeType)}\n            ref={labelButtonRef[rangeType]}\n            tabIndex={0}\n        >\n            {renderLabel(rangeType)}\n        </RangeSelectorButton>\n    );\n\n    const renderElement = () => {\n        return (\n            <StyledInputWrapper\n                className={className}\n                data-testid={testId}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n                focused={isOpen}\n            >\n                <VisuallyHidden id={fromLabelId}>\n                    {placeholders?.from || \"Select From\"}\n                </VisuallyHidden>\n                <VisuallyHidden id={toLabelId}>\n                    {placeholders?.to || \"Select To\"}\n                </VisuallyHidden>\n\n                <RangeInputInnerContainer\n                    currentActive={getCurrentFocused()}\n                    error={error}\n                >\n                    {renderSelectorContent(\"from\")}\n                    {renderSelectorContent(\"to\")}\n                </RangeInputInnerContainer>\n\n                {!isOpen &&\n                    selectedFromValue &&\n                    selectedToValue &&\n                    !readOnly &&\n                    !disabled && (\n                        <BasicButton\n                            onClick={handleClear}\n                            type=\"button\"\n                            aria-label=\"Clear\"\n                            className={ClearIconContainer}\n                        >\n                            <CrossIcon\n                                className={styles.clearIcon}\n                                aria-hidden\n                            />\n                        </BasicButton>\n                    )}\n            </StyledInputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                ref={dropdownRef}\n                data-testid={`${testId}-dropdown`}\n                listboxId={listboxId}\n                ariaLabel={getDropdownAriaLabel()}\n                listItems={currentOptions}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                selectedItems={currentSelectedItems}\n                itemsLoadState={optionsLoadState[focusedInput as RangeType]}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                width={dropdownWidth}\n                matchElementWidth={!dropdownWidth}\n                enableSearch={enableSearch}\n                searchFunction={searchFunction}\n                searchPlaceholder={searchPlaceholder}\n                renderListItem={renderListItem}\n                renderCustomCallToAction={renderCustomCallToAction}\n            />\n        );\n    };\n\n    return (\n        <div id={id} {...otherProps}>\n            <DropdownListState>\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={isOpen}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle={false}\n                    offset={8}\n                    alignment={alignment}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                />\n            </DropdownListState>\n        </div>\n    );\n};\n"],"names":["InputRangeSelect","_a","selectedOptions","placeholders","from","to","options","disabled","className","readOnly","error","testId","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","selectedFromValue","setSelectedFromValue","useState","selectedToValue","setSelectedToValue","focusedInput","setFocusedInput","isOpen","labelButtonRef","useRef","dropdownRef","internalId","useId","listboxId","fromLabelId","toLabelId","useEffect","current","refocus","index","triggerOptionDisplayCallback","show","getDisplayValue","rangeType","selected","value","_b","toString","call","truncateValue","type","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","getCurrentFocused","currentOptions","useMemo","currentSelectedItems","openDropdownFor","focusButton","focus","getButtonLabelledBy","concatIds","handleSelectorClick","event","stopPropagation","preventDefault","handleSelectorKeyDown","key","handleListItemClick","item","extractedValue","undefined","handleDismiss","last","handleClear","renderLabel","_jsx","ValueLabel","truncateType","children","PlaceholderLabel","renderSelectorContent","RangeSelectorButton","role","onClick","onKeyDown","ref","tabIndex","Object","assign","DropdownListState","ElementWithDropdown","enabled","renderElement","_jsxs","StyledInputWrapper","focused","VisuallyHidden","RangeInputInnerContainer","currentActive","BasicButton","ClearIconContainer","CrossIcon","styles.clearIcon","renderDropdown","DropdownList","ariaLabel","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

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

@@ -1,6 +1,3 @@
-export declare const ClearIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("../input/input.style").InputStyleProps> & import("../input/input.style").InputStyleProps, never>> & string;
-export declare const StyledInputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, never>> & string;
+export declare const ClearIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
+export declare const StyledInputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/input-wrapper").InputWrapperProps & import("react").RefAttributes<HTMLDivElement>, never> & Partial<Pick<import("../shared/input-wrapper").InputWrapperProps & import("react").RefAttributes<HTMLDivElement>, never>>> & string & Omit<(props: import("../shared/input-wrapper").InputWrapperProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const RangeSelectorButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;

package/input-range-select/input-range-select.style.js

@@ -1,9 +1,36 @@
-import t from"styled-components";import{ClearButton as r}from"../input/input.style.js";import{InputWrapper as i}from"../shared/input-wrapper/input-wrapper.js";import{V3_Spacing as p}from"../v3_theme/index.js";const o=t(r)`
+import e from"styled-components";import{InputWrapper as t}from"../shared/input-wrapper/input-wrapper.js";import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as o}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Spacing as r}from"../theme/tokens/spacing.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{V3_Spacing as i,V3_Colour as n}from"../v3_theme/index.js";const s=e.button`
+    height: auto;
+    padding: ${r["spacing-12"]} ${r["spacing-16"]};
+    cursor: pointer;
+    color: ${o.icon};
+
+    /* Position styles */
     position: absolute;
     right: 0;
-    padding-left: ${p["spacing-8"]};
+    padding-left: ${i["spacing-8"]};
     margin-right: 0;
-`,e=t(i)`
+`,p=e(t)`
     height: 3rem;
-`;export{o as ClearIconContainer,e as StyledInputWrapper};
+`,m=e.button`
+    appearance: none;
+    border: 0;
+    background: transparent;
+    display: flex;
+    flex: 1;
+    color: ${n.text};
+
+    &:focus,
+    &:active {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: 2px solid ${n["border-focus"]};
+        border-radius: 4px;
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+`;export{s as ClearIconContainer,m as RangeSelectorButton,p as StyledInputWrapper};
 //# sourceMappingURL=input-range-select.style.js.map

package/input-range-select/input-range-select.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-range-select.style.js","sources":["../../src/input-range-select/input-range-select.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { ClearButton } from \"../input/input.style\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ClearIconContainer = styled(ClearButton)`\n    position: absolute;\n    right: 0;\n    padding-left: ${V3_Spacing[\"spacing-8\"]};\n    margin-right: 0;\n`;\n\nexport const StyledInputWrapper = styled(InputWrapper)`\n    height: 3rem;\n`;\n"],"names":["ClearIconContainer","styled","ClearButton","V3_Spacing","StyledInputWrapper","InputWrapper"],"mappings":"uNASaA,EAAqBC,EAAOC,EAAY;;;oBAGjCC,EAAW;;EAIlBC,EAAqBH,EAAOI,EAAa;;"}
+{"version":3,"file":"input-range-select.style.js","sources":["../../src/input-range-select/input-range-select.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { Colour, Spacing } from \"../theme\";\nimport { V3_Colour, V3_Spacing } from \"../v3_theme\";\n\nexport const ClearIconContainer = styled.button`\n    height: auto;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    cursor: pointer;\n    color: ${Colour.icon};\n\n    /* Position styles */\n    position: absolute;\n    right: 0;\n    padding-left: ${V3_Spacing[\"spacing-8\"]};\n    margin-right: 0;\n`;\n\nexport const StyledInputWrapper = styled(InputWrapper)`\n    height: 3rem;\n`;\n\nexport const RangeSelectorButton = styled.button`\n    appearance: none;\n    border: 0;\n    background: transparent;\n    display: flex;\n    flex: 1;\n    color: ${V3_Colour.text};\n\n    &:focus,\n    &:active {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${V3_Colour[\"border-focus\"]};\n        border-radius: 4px;\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n    }\n`;\n"],"names":["ClearIconContainer","styled","button","Spacing","Colour","icon","V3_Spacing","StyledInputWrapper","InputWrapper","RangeSelectorButton","V3_Colour","text"],"mappings":"kpBAMO,MAAMA,EAAqBC,EAAOC,MAAM;;eAEhCC,EAAQ,iBAAiBA,EAAQ;;aAEnCC,EAAOC;;;;;oBAKAC,EAAW;;EAIlBC,EAAqBN,EAAOO,EAAa;;EAIzCC,EAAsBR,EAAOC,MAAM;;;;;;aAMnCQ,EAAUC;;;;;;;;6BAQMD,EAAU;;;;;;;"}

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

@@ -1,6 +1,6 @@
 import type { RefObject } from "react";
 import type { InputSelectOptionsProps, InputSelectSharedProps } from "../input-select/types";
-import type { DropdownDisplayProps, DropdownSearchProps, ItemsLoadStateType } from "../shared/dropdown-list-v2/types";
+import type { DropdownDisplayProps, DropdownSearchProps, ItemsLoadStateType } from "../shared/dropdown-list/types";
 import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
 export interface InputRangeSelectOptionsProps<T> extends Omit<InputSelectOptionsProps<T>, "options" | "optionsLoadState"> {
     options: InputRangeProp<T[]>;

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

@@ -1,2 +1,2 @@
 import type { InputRangeSliderProps } from "./types";
-export declare const InputRangeSlider: ({ value, min, max, step, minRange, numOfThumbs, colors, disabled, readOnly, ariaLabels, showSliderLabels, sliderLabelPrefix, sliderLabelSuffix, showIndicatorLabel, indicatorLabelPrefix, indicatorLabelSuffix, renderSliderLabel, onChange, onChangeEnd, ...otherProps }: InputRangeSliderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputRangeSlider: ({ id, value, min, max, step, minRange, numOfThumbs, colors, disabled, readOnly, showSliderLabels, sliderLabelPrefix, sliderLabelSuffix, showIndicatorLabel, indicatorLabelPrefix, indicatorLabelSuffix, ariaLabels, ariaDescriptions, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, renderSliderLabel, onChange, onChangeEnd, className, ...otherProps }: InputRangeSliderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as n,jsx as r}from"react/jsx-runtime";import{useState as i,useEffect as l}from"react";import{V3_Colour as a}from"../v3_theme/index.js";import{Wrapper as t,IndicatorLabelContainer as d,Slider as s,SliderTrack as o,SliderThumb as c,Knob as b,LabelContainer as u,LabelText as f}from"./input-range-slider.styles.js";const h=h=>{var{value:m,min:x=0,max:g=100,step:p=1,minRange:L,numOfThumbs:v=2,colors:$,disabled:O,readOnly:S,ariaLabels:j,showSliderLabels:y,sliderLabelPrefix:C,sliderLabelSuffix:w,showIndicatorLabel:I,indicatorLabelPrefix:P,indicatorLabelSuffix:T,renderSliderLabel:_,onChange:k,onChangeEnd:A}=h,E=e(h,["value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","ariaLabels","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","renderSliderLabel","onChange","onChangeEnd"]);const[M,R]=i(q()),D=function(){const e=function(){const e=O||S?a["border-disabled"]:a["border-strong"],n=O||S?a["border-selected-disabled"]:a["border-selected"];if(1===v)return[n,e];const r=[];r.push(e);for(let e=0;e<v-1;e++)r.push(n);return r.push(e),r}();return new Array(v+1).fill(0).map(((n,r)=>(null==$?void 0:$[r])||e[r]))}();l((()=>{m!==M&&R(q())}),[m]);function q(){if(m&&m.length===v)return m;const e=[];for(let n=0;n<v;n++)e.push(x+p*n);return e}const z=e=>_?_(e):n(f,{children:[C,e,w]});return n(t,Object.assign({},E,{children:[I&&r(d,{children:(()=>{let e="";if(1===M.length)e=`${M[0]}`;else if(2===M.length)e=`${M[0]} - ${M[1]}`;else if(M.length>2){e=`${Math.min(...M)} - ${Math.max(...M)}`}return n(f,{children:[P,e,T]})})()}),r(s,{step:p,min:x,max:g,value:M,disabled:O||S,onChange:(e,n)=>{if("number"==typeof e){const n=[e];R(n),null==k||k(n)}else{if(n>-1&&M[n]===e[n])return;const r=[...e];R(r),null==k||k(r)}},onAfterChange:e=>{if("number"==typeof e){const n=[e];R(n),null==A||A(n)}else{const n=[...e];R(n),null==A||A(n)}},minDistance:L,ariaLabel:j,renderThumb:(e,n)=>r(c,Object.assign({"data-testid":`slider-thumb-${n.index}`},e,{tabIndex:O?void 0:e.tabIndex,children:r(b,{$disabled:O,$readOnly:S})})),renderTrack:(e,n)=>r(o,Object.assign({"data-testid":`slider-track-${n.index}`},e,{$color:D[n.index]}))}),y&&n(u,{children:[r("div",{children:z(x)}),r("div",{children:z(g)})]})]}))};export{h as InputRangeSlider};
+import{__rest as e}from"../_virtual/_tslib.js";import{useState as r,useEffect as i,createElement as n}from"react";import{jsxs as t,jsx as a}from"react/jsx-runtime";import{clearAnnouncer as l,announce as o}from"@react-aria/live-announcer";import s from"clsx";import d from"react-slider";import{VisuallyHidden as u,concatIds as c}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as m}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as h}from"../util/simple-id-generator.js";import"../util/string-helper.js";import{Typography as f}from"../typography/index.js";import{indicatorLabelContainer as b,slider as p,labelContainer as v,wrapper as g,labelText as y}from"./input-range-slider.styles.js";import{Track as x,Thumb as $}from"./slider-components.js";const j=j=>{var{id:L,value:w,min:k=0,max:C=100,step:N=1,minRange:O=0,numOfThumbs:S=2,colors:A,disabled:D,readOnly:T,showSliderLabels:M,sliderLabelPrefix:P,sliderLabelSuffix:B,showIndicatorLabel:I,indicatorLabelPrefix:E,indicatorLabelSuffix:R,ariaLabels:U,ariaDescriptions:_,"aria-invalid":q,"aria-labelledby":F,"aria-describedby":H,renderSliderLabel:K,onChange:z,onChangeEnd:G,className:J}=j,Q=e(j,["id","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","ariaLabels","ariaDescriptions","aria-invalid","aria-labelledby","aria-describedby","renderSliderLabel","onChange","onChangeEnd","className"]);const[V,W]=r(le()),[X,Y]=r(null),Z=h(),ee=function(){const e=function(){const e=D||T?m["border-disabled"]:m["border-strong"],r=D||T?m["border-selected-disabled"]:m["border-selected"];if(1===S)return[r,e];const i=[e];for(let e=0;e<S-1;e++)i.push(r);return i.push(e),i}();return new Array(S+1).fill(0).map(((r,i)=>(null==A?void 0:A[i])||e[i]))}(),re=`${Z}-indicator`,ie=`${Z}-instruction`,ne=Array.from({length:S},((e,r)=>(null==U?void 0:U[r])||function(e){return 1===S?"":0===e?"Minimum value slider":e===S-1?"Maximum value slider":"Indeterminate value slider"}(r)));i((()=>{w!==V&&W(le())}),[w]);const te=(e,r)=>{if(D||T)return;const i=function(e,r){if(S<2)return"";const i=V[r],n=r>0?V[r-1]:void 0,t=r<V.length-1?V[r+1]:void 0,a=ne[r],l=r>0?ne[r-1]:void 0,o=r<ne.length-1?ne[r+1]:void 0;if(function(e){return["ArrowRight","ArrowUp","PageUp","End"].includes(e)}(e)&&void 0!==t&&i>=t-O)return`The ${oe(a)} has reached its limit. Increase the ${se(o)} to set a higher ${se(a)}.`;if(function(e){return["ArrowLeft","ArrowDown","PageDown","Home"].includes(e)}(e)&&void 0!==n&&i<=n+O)return`The ${oe(a)} has reached its limit. Decrease the ${se(l)} to set a lower ${se(a)}.`;return""}(e.key,r);i&&(l("assertive"),o(i,"assertive"))},ae=(e,r)=>{if(D||T)return;const i=Number(e.currentTarget.value),n=[...V];n[r]=function(e,r,i){const n=de(r,i),t=ue(r,i);return Math.min(t,Math.max(n,e))}(i,r,V),W(n),null==z||z(n),null==G||G(n)};function le(){if(w&&w.length===S)return w;const e=[];for(let r=0;r<S;r++)e.push(k+N*r);return e}function oe(e){return e?e.toLowerCase():"slider"}function se(e){return e?e.replace(/ slider$/i,"").toLowerCase():"slider"}function de(e,r=V){return 0===e?k:r[e-1]+O}function ue(e,r=V){return e===r.length-1?C:r[e+1]-O}const ce=e=>K?K(e):t(f.BodyBL,{className:y,children:[P,e,B]});return t("div",Object.assign({},Q,{id:L,role:"group","aria-labelledby":F,"aria-disabled":D,className:s(g,J),children:[!D&&!T&&a(u,{id:ie,children:"Use left and right arrow keys to adjust the slider."}),I&&a("div",{id:re,className:b,children:(()=>{let e="";if(1===V.length)e=`${V[0]}`;else if(2===V.length)e=`${V[0]} - ${V[1]}`;else if(V.length>2){e=`${Math.min(...V)} - ${Math.max(...V)}`}return t(f.BodyBL,{className:y,children:[E,e,R]})})()}),V.map(((e,r)=>{const i=`${Z}-thumb-label-${r}`,n=function(e){return null==_?void 0:_[e]}(r),l=n?`${Z}-thumb-description-${r}`:void 0;return t(u,{children:[l&&a("span",{id:l,children:n}),a("span",{id:i,children:ne[r]}),a("input",{"data-testid":`slider-input-${r}`,type:"range",min:de(r),max:ue(r),step:N,value:e,"aria-disabled":D||void 0,readOnly:T,"aria-labelledby":c(F,i),"aria-describedby":(s=l,c(H,I?re:void 0,D||T?void 0:ie,s)),"aria-valuetext":(o=e,`${P||""}${o}${B||""}`),"aria-invalid":q,onFocus:()=>Y(r),onBlur:()=>Y(null),onChange:e=>ae(e,r),onKeyDown:e=>{te(e,r)}})]},`native-slider-${r}`);var o,s})),a(d,{step:N,min:k,max:C,value:V,disabled:D||T,onChange:(e,r)=>{if(T||D)return;if("number"==typeof e){const r=[e];return W(r),void(null==z||z(r))}if(r>-1&&V[r]===e[r])return;const i=[...e];W(i),null==z||z(i)},onAfterChange:e=>{if(T||D)return;if("number"==typeof e){const r=[e];return W(r),void(null==G||G(r))}const r=[...e];W(r),null==G||G(r)},minDistance:O,"aria-hidden":!0,className:p,renderThumb:(e,r)=>n($,Object.assign({"data-testid":`slider-thumb-${r.index}`},e,{key:e.key,tabIndex:-1,"aria-hidden":!0,focused:X===r.index,disabled:D,readOnly:T})),renderTrack:(e,r)=>n(x,Object.assign({"data-testid":`slider-track-${r.index}`},e,{key:e.key,color:ee[r.index]}))}),M&&t("div",{className:v,children:[a("div",{children:ce(k)}),a("div",{children:ce(C)})]})]}))};export{j as InputRangeSlider};
 //# sourceMappingURL=input-range-slider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-range-slider.js","sources":["../../src/input-range-slider/input-range-slider.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { V3_Colour } from \"../v3_theme\";\nimport {\n    IndicatorLabelContainer,\n    Knob,\n    LabelContainer,\n    LabelText,\n    Slider,\n    SliderThumb,\n    SliderTrack,\n    Wrapper,\n} from \"./input-range-slider.styles\";\nimport type { InputRangeSliderProps } from \"./types\";\n\nexport const InputRangeSlider = ({\n    value,\n    min = 0,\n    max = 100,\n    step = 1,\n    minRange,\n    numOfThumbs = 2,\n    colors,\n    disabled,\n    readOnly,\n    ariaLabels,\n    showSliderLabels,\n    sliderLabelPrefix,\n    sliderLabelSuffix,\n    showIndicatorLabel,\n    indicatorLabelPrefix,\n    indicatorLabelSuffix,\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 trackColors = getTrackColors();\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 (typeof value === \"number\") {\n            const val = [value];\n            setSelection(val);\n            onChange?.(val);\n        } else {\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            const newSelection = [...value];\n            setSelection(newSelection);\n            onChange?.(newSelection);\n        }\n    };\n\n    const handleChangeEnd = (value: number | readonly number[]) => {\n        if (typeof value === \"number\") {\n            const val = [value];\n            setSelection(val);\n            onChangeEnd?.(val);\n        } else {\n            const newSelection = [...value];\n            setSelection(newSelection);\n            onChangeEnd?.(newSelection);\n        }\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 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                ? V3_Colour[\"border-disabled\"]\n                : V3_Colour[\"border-strong\"];\n        const activeColor =\n            disabled || readOnly\n                ? V3_Colour[\"border-selected-disabled\"]\n                : V3_Colour[\"border-selected\"];\n\n        if (numOfThumbs === 1) {\n            return [activeColor, inactiveColor];\n        }\n\n        const defaultColors: typeof colors = [];\n        defaultColors.push(inactiveColor);\n        for (let i = 0; i < numOfThumbs - 1; i++) {\n            defaultColors.push(activeColor);\n        }\n        defaultColors.push(inactiveColor);\n        return defaultColors;\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 min = Math.min(...selection);\n            const max = Math.max(...selection);\n            formattedSelection = `${min} - ${max}`;\n        }\n\n        return (\n            <LabelText>\n                {indicatorLabelPrefix}\n                {formattedSelection}\n                {indicatorLabelSuffix}\n            </LabelText>\n        );\n    };\n\n    return (\n        <Wrapper {...otherProps}>\n            {showIndicatorLabel && (\n                <IndicatorLabelContainer>\n                    {formatIndicationLabel()}\n                </IndicatorLabelContainer>\n            )}\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                ariaLabel={ariaLabels}\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={\n                                disabled ? undefined : thumbProps.tabIndex\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            {showSliderLabels && (\n                <LabelContainer>\n                    <div>{formatLabel(min)}</div>\n                    <div>{formatLabel(max)}</div>\n                </LabelContainer>\n            )}\n        </Wrapper>\n    );\n};\n"],"names":["InputRangeSlider","_a","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","ariaLabels","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","renderSliderLabel","onChange","onChangeEnd","otherProps","__rest","selection","setSelection","useState","initialiseSelection","trackColors","defaultColors","inactiveColor","V3_Colour","activeColor","push","i","getDefaultColors","Array","fill","map","_","getTrackColors","useEffect","length","values","formatLabel","_jsxs","LabelText","children","Wrapper","Object","assign","_jsx","IndicatorLabelContainer","formattedSelection","Math","formatIndicationLabel","Slider","index","val","newSelection","onAfterChange","minDistance","ariaLabel","renderThumb","thumbProps","state","SliderThumb","tabIndex","undefined","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\";\nimport ReactSlider from \"react-slider\";\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 { Thumb, Track } from \"./slider-components\";\nimport type { 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    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    }, [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            <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 react-slider is presentation-only. */}\n            <ReactSlider\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                className={styles.slider}\n                renderThumb={(thumbProps, state) => {\n                    return (\n                        <Thumb\n                            data-testid={`slider-thumb-${state.index}`}\n                            {...thumbProps}\n                            key={thumbProps.key}\n                            tabIndex={-1}\n                            aria-hidden\n                            focused={focusedThumbIndex === state.index}\n                            disabled={disabled}\n                            readOnly={readOnly}\n                        />\n                    );\n                }}\n                renderTrack={(trackProps, state) => {\n                    return (\n                        <Track\n                            data-testid={`slider-track-${state.index}`}\n                            {...trackProps}\n                            key={trackProps.key}\n                            color={trackColors[state.index]}\n                        />\n                    );\n                }}\n            />\n\n            {showSliderLabels && (\n                <div className={styles.labelContainer}>\n                    <div>{formatLabel(min)}</div>\n                    <div>{formatLabel(max)}</div>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["InputRangeSlider","_a","id","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","ariaLabels","ariaDescriptions","ariaInvalid","ariaLabelledBy","ariaDescribedBy","renderSliderLabel","onChange","onChangeEnd","className","otherProps","__rest","selection","setSelection","useState","initialiseSelection","focusedThumbIndex","setFocusedThumbIndex","internalId","useId","trackColors","defaultColors","inactiveColor","Colour","activeColor","index","push","getDefaultColors","Array","fill","map","_","i","getTrackColors","indicatorTextId","instructionTextId","resolvedAriaLabels","from","length","getDefaultAriaLabel","useEffect","handleThumbKeyDown","event","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","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","onKeyDown","ReactSlider","onAfterChange","val","newSelection","minDistance","styles.slider","renderThumb","thumbProps","state","_createElement","Thumb","tabIndex","focused","renderTrack","trackProps","Track","color","styles.labelContainer"],"mappings":"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"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"input-range-slider.styles.js","sources":["../../src/input-range-slider/input-range-slider.styles.ts"],"sourcesContent":["import ReactSlider from \"react-slider\";\nimport styled, { css } from \"styled-components\";\n\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../v3_theme\";\nimport type { V3_ThemeStyleProps } from \"../v3_theme/types\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface TrackStyleProps {\n    $color: string | ((props: V3_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: ${V3_Spacing[\"spacing-8\"]};\n    display: flex;\n    justify-content: space-between;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const IndicatorLabelContainer = styled.div`\n    margin-bottom: ${V3_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: ${V3_Colour[\"bg\"]};\n        box-shadow: ${V3_Shadow[\"sm-subtle\"]};\n        border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n            ${(props) =>\n                props.$disabled\n                    ? V3_Colour[\"border-selected-disabled\"]\n                    : V3_Colour[\"border-strong\"]};\n        border-radius: ${V3_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 {\n        outline-offset: -1px;\n        outline: ${V3_Border[\"width-040\"]} ${V3_Border[\"solid\"]}\n            ${V3_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: ${V3_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 || V3_Colour[\"border-strong\"](props);\n        }\n    }};\n`;\n"],"names":["Wrapper","styled","div","LabelContainer","V3_Spacing","IndicatorLabelContainer","LabelText","Typography","BodyBL","Slider","ReactSlider","Knob","props","$disabled","css","$readOnly","V3_Colour","V3_Shadow","V3_Border","V3_Radius","SliderThumb","SliderTrack","$color"],"mappings":"yOA4BO,MAAMA,EAAUC,EAAOC,GAAG;;EAIpBC,EAAiBF,EAAOC,GAAG;kBACtBE,EAAW;;;WAGlBA,EAAW;EAGTC,EAA0BJ,EAAOC,GAAG;qBAC5BE,EAAW;EAGnBE,EAAYL,EAAOM,EAAWC,OAAO;;EAIrCC,EAASR,EAAOS,EAAY;;EAI5BC,EAAOV,EAAOC,GAAoB;;;;;;;;MAQxCU,GACKA,EAAMC,UACCC,CAAG;;cAITF,EAAMG,eAAX,EACWD,CAAG;;;;;;;;;;;;;;;;;4BAmBME,EAAc;sBACpBC,EAAU;kBACdC,EAAU,gBAAgBA,EAAiB;cAC9CN,GACCA,EAAMC,UACAG,EAAU,4BACVA,EAAU;yBACPG,EAAgB;;EAI5BC,EAAcnB,EAAOC,GAAG;;;;;;cAMvBS;;mBAEKO,EAAU,gBAAgBA,EAAiB;cAChDF,EAAU;;EAIXK,EAAcpB,EAAOC,GAAoB;;;;qBAIjCiB,EAAgB;;kBAElBP,GACPA,EAAMU,QAAkC,mBAAjBV,EAAMU,OACtBV,EAAMU,OAAOV,GAEbA,EAAMU,QAAUN,EAAU,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    },\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`;\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: 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 = css`\n    height: 0.25rem;\n    top: 50%;\n    transform: translateY(-50%);\n    border-radius: ${Radius[\"full\"]};\n\n    ${tokens.track.backgroundColor}: initial;\n    background: var(\n        ${tokens.track.backgroundColor},\n        ${Colour[\"border-strong\"]}\n    );\n`;\n"],"names":["tokens","track","backgroundColor","wrapper","labelContainer","indicatorLabelContainer","labelText","slider","knob","knobDisabled","knobInteractive","sliderThumb","sliderTrack"],"mappings":"iFAIO,MAAMA,EAAS,CAClBC,MAAO,CACHC,gBACI,0DAICC,EAAO,SAIPC,EAAc,WAOdC,EAAuB,WAIvBC,EAAS,UAITC,EAAM,WAKNC,EAAI,WA0BJC,EAAY,WAQZC,EAAe,WAQfC,EAAW,WAaXC,EAAW"}

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

@@ -0,0 +1,13 @@
+.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;}
+.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:relative;outline:none;}.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{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-backgroundColor:initial;background:var(
+        --fds-internal-inputRangeSlider-track-backgroundColor,
+        var(--fds-colour-border-strong)
+    );}

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

@@ -0,0 +1,12 @@
+import type React from "react";
+interface ThumbProps extends React.HTMLAttributes<HTMLDivElement> {
+    focused: boolean | undefined;
+    disabled: boolean | undefined;
+    readOnly: boolean | undefined;
+}
+export declare const Thumb: (props: ThumbProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+interface TrackProps extends React.HTMLAttributes<HTMLDivElement> {
+    color?: string;
+}
+export declare const Track: (props: TrackProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export {};

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

@@ -0,0 +1,2 @@
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import t from"clsx";import{forwardRef as s,useRef as o}from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as i}from"../theme/utils/use-apply-styles.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as m}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{knob as a,knobDisabled as l,knobInteractive as n,sliderThumb as c,tokens as p,sliderTrack as d}from"./input-range-slider.styles.js";const u=s(((s,p)=>{var{focused:d,disabled:u,readOnly:j,className:f,style:h}=s,y=e(s,["focused","disabled","readOnly","className","style"]);const v=o(null);return i(v,h),r("div",Object.assign({ref:m(v,p)},y,{className:t(c,f),"data-focused":d?"true":void 0,children:r("div",{className:t(a,u&&l,!u&&!j&&n)})}))})),j=s(((s,a)=>{var{color:l,className:n,style:c}=s,u=e(s,["color","className","style"]);const j=o(null);return i(j,{[p.track.backgroundColor]:l}),i(j,c),r("div",Object.assign({},u,{className:t(d,n),ref:m(j,a)}))}));export{u as Thumb,j as Track};
+//# sourceMappingURL=slider-components.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider-components.js","sources":["../../src/input-range-slider/slider-components.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./input-range-slider.styles\";\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"],"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"],"mappings":"8yBAcA,MAiCaA,EAAQC,GAjCF,CACfC,EAQAC,KARA,IAAAC,QACIA,EAAOC,SACPA,EAAQC,SACRA,EAAQC,UACRA,EAASC,MACTA,GAAKN,EACFO,EAAUC,EAAAR,EANjB,uDAUA,MAAMS,EAAWC,EAAuB,MAIxC,OAFAC,EAAcF,EAAUH,GAGpBM,EAAA,MAAAC,OAAAC,OAAA,CACIb,IAAKc,EAAUN,EAAUR,IACrBM,EAAU,CACdF,UAAWW,EAAKC,EAAoBZ,GAAU,eAChCH,EAAU,YAASgB,EAASC,SAE1CP,EAAA,MAAA,CACIP,UAAWW,EACPI,EACAjB,GAAYkB,GACXlB,IAAaC,GAAYkB,OAGhC,IA+BDC,EAAQxB,GArBF,CACfC,EACAC,SADAuB,MAAEA,EAAKnB,UAAEA,EAASC,MAAEA,KAAUC,EAAUC,EAAAR,EAAxC,CAAA,QAAA,YAAA,UAGA,MAAMyB,EAAWf,EAAuB,MAQxC,OANAC,EAAcc,EAAU,CACpB,CAACC,EAAcC,MAAMC,iBAAkBJ,IAG3Cb,EAAcc,EAAUnB,GAGpBM,EAAA,MAAAC,OAAAC,OAAA,CAAA,EACQP,EAAU,CACdF,UAAWW,EAAKa,EAAoBxB,GACpCJ,IAAKc,EAAUU,EAAUxB,KAC3B"}

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

@@ -1,5 +1,3 @@
-import type { V3_ThemeStyleProps } from "../v3_theme/types";
-type CustomColor = string | ((props: V3_ThemeStyleProps) => string);
 export interface BaseSliderProps {
     className?: string | undefined;
     id?: string | undefined;
@@ -11,7 +9,7 @@ export interface BaseSliderProps {
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
     /** Customise the color of each track segment. Expected length is (number of values + 1) */
-    colors?: (CustomColor | undefined)[] | undefined;
+    colors?: (string | undefined)[] | undefined;
     showSliderLabels?: boolean | undefined;
     sliderLabelPrefix?: string | undefined;
     sliderLabelSuffix?: string | undefined;
@@ -27,9 +25,12 @@ export interface InputRangeSliderProps extends BaseSliderProps {
     /** The minimum difference between values */
     minRange?: number | undefined;
     ariaLabels?: string[] | undefined;
+    ariaDescriptions?: string[] | undefined;
+    "aria-invalid"?: boolean | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-describedby"?: string | undefined;
     /** Called on every selection change */
     onChange?: ((value: number[]) => void) | undefined;
     /** Called when a thumb is released after selection is complete */
     onChangeEnd?: ((value: number[]) => void) | undefined;
 }
-export {};

package/input-select/input-select.js

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