npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.1 → 4.0.0-alpha.11 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4022) hide show

package/cjs/input-range-select/input-range-select.js.map CHANGED Viewed

	@@ -1 +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":["_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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"}
1	+ {"version":3,"file":"input-range-select.js","sources":["../../../src/input-range-select/input-range-select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\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 { ClearButton, InputWrapper } from \"../shared/input-wrapper\";\nimport * as inputWrapperStyles from \"../shared/input-wrapper/input-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport * as styles from \"./input-range-select.styles\";\nimport type { InputRangeSelectProps } from \"./types\";\n\ntype RangeType = \"from\" \| \"to\";\n\n// @catalog\n/*\n A paired combobox input for selecting a start and end value from dropdown lists.\n \n Use `InputRangeSelect` when a consumer must choose a range by picking two\n * values — one for \"from\" and one for \"to\" — each from their own option list.\n * @keywords combobox, dropdown, field, form, input, pair, range\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 isOptionDisabled,\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 <button\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 className={styles.rangeSelectorButton}\n >\n {renderLabel(rangeType)}\n </button>\n );\n\n const renderElement = () => {\n return (\n <InputWrapper\n className={clsx(styles.styledInputWrapper, 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 <div\n className={inputWrapperStyles.clearButtonContainer}\n >\n <ClearButton\n onClick={handleClear}\n type=\"button\"\n aria-label=\"Clear\"\n />\n </div>\n )}\n </InputWrapper>\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 isOptionDisabled={isOptionDisabled}\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":["_a","selectedOptions","placeholders","from","to","options","disabled","className","readOnly","error","testId","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","isOptionDisabled","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","rangeLabelId","concatIds","handleSelectorClick","event","stopPropagation","preventDefault","handleSelectorKeyDown","key","handleListItemClick","item","extractedValue","undefined","handleDismiss","last","handleClear","renderLabel","_jsx","ValueLabel","truncateType","children","PlaceholderLabel","renderSelectorContent","role","onClick","onKeyDown","ref","tabIndex","styles.rangeSelectorButton","Object","assign","DropdownListState","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","clsx","styles.styledInputWrapper","focused","VisuallyHidden","RangeInputInnerContainer","currentActive","inputWrapperStyles.clearButtonContainer","ClearButton","renderDropdown","DropdownList","ariaLabel","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/cjs/input-range-select/input-range-select.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./input-range-select.styles_adbrbm.css");exports.rangeSelectorButton="ryu6qy6",exports.styledInputWrapper="s7h6auw";
2	+ //# sourceMappingURL=input-range-select.styles.js.map

package/cjs/input-range-select/input-range-select.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"input-range-select.styles.js","sources":["../../../src/input-range-select/input-range-select.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Radius } from \"../theme\";\n\nexport const styledInputWrapper = css`\n height: 3rem;\n`;\n\nexport const rangeSelectorButton = css`\n appearance: none;\n border: 0;\n background: transparent;\n display: flex;\n flex: 1;\n color: ${Colour.text};\n\n &:focus,\n &:active {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"border-focus\"]};\n border-radius: ${Radius.sm};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n"],"names":[],"mappings":"6HAQgC,qCAJD"}

package/cjs/input-range-select/input-range-select.styles_adbrbm.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ @layer fds{.s7h6auw{height:3rem;}
2	+ .ryu6qy6{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border:0;background:transparent;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;color:var(--fds-colour-text);}.ryu6qy6:focus,.ryu6qy6:active{outline:none;}.ryu6qy6:focus-visible{outline:2px solid var(--fds-colour-border-focus);border-radius:var(--fds-radius-sm);}.ryu6qy6:disabled{cursor:not-allowed;}}

package/cjs/input-range-slider/input-range-slider.js CHANGED Viewed

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

package/cjs/input-range-slider/input-range-slider.js.map CHANGED Viewed

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

package/cjs/input-range-slider/input-range-slider.styles.js CHANGED Viewed

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

package/cjs/input-range-slider/input-range-slider.styles.js.map CHANGED Viewed

	@@ -1 +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":"~~0OA4BO~~,~~MAAMA~~,~~EAAUC~~,~~EAAAA~~,~~QAAOC~~,~~GAAG;;EAIpBC~~,~~EAAiBF~~,~~EAAAA~~,~~QAAOC~~,~~GAAG;kBACtBE~~,~~EAAAA~~,~~WAAW;;;WAGlBA~~,~~EAAAA~~,~~WAAW;EAGTC~~,~~EAA0BJ~~,~~EAAAA~~,~~QAAOC~~,~~GAAG;qBAC5BE~~,EAAAA,WAAW;EAGnBE,EAAYL,EAAAA,QAAOM,aAAWC,OAAO;;EAIrCC,EAASR,EAAAA,QAAOS,EAAAA,QAAY;;EAI5BC,EAAOV,EAAAA,QAAOC,GAAoB;;;;;;;;MAQxCU,GACKA,EAAMC,UACCC,KAAG;;cAITF,EAAMG,eAAX,EACWD,KAAG;;;;;;;;;;;;;;;;;4BAmBME,EAAAA,UAAc;sBACpBC,EAAAA,UAAU;kBACdC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;cAC9CN,GACCA,EAAMC,UACAG,EAAAA,UAAU,4BACVA,EAAAA,UAAU;yBACPG,EAAAA,UAAgB;;EAI5BC,EAAcnB,EAAAA,QAAOC,GAAG;;;;;;cAMvBS;;mBAEKO,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;cAChDF,EAAAA,UAAU;;EAIXK,EAAcpB,EAAAA,QAAOC,GAAoB;;;;qBAIjCiB,EAAAA,UAAgB;;kBAElBP,GACPA,EAAMU,QAAkC,mBAAjBV,EAAMU,OACtBV,EAAMU,OAAOV,GAEbA,EAAMU,QAAUN,EAAAA,UAAU,iBAAiBJ;"}
1	+ {"version":3,"file":"input-range-slider.styles.js","sources":["../../../src/input-range-slider/input-range-slider.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Shadow, Spacing } from \"../theme\";\n\nexport const tokens = {\n track: {\n backgroundColor:\n \"--fds-internal-inputRangeSlider-track-backgroundColor\",\n left: \"--fds-internal-inputRangeSlider-track-left\",\n right: \"--fds-internal-inputRangeSlider-track-right\",\n },\n thumb: {\n left: \"--fds-internal-inputRangeSlider-thumb-left\",\n },\n};\n\nexport const wrapper = css`\n isolation: isolate;\n`;\n\nexport const labelContainer = css`\n margin-top: ${Spacing[\"spacing-8\"]};\n display: flex;\n justify-content: space-between;\n gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const indicatorLabelContainer = css`\n margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const labelText = css`\n overflow-wrap: anywhere;\n`;\n\nexport const slider = css`\n height: 0.875rem;\n position: relative;\n touch-action: none;\n`;\n\nexport const knob = css`\n height: 2.5rem;\n width: 2.5rem;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n &::after {\n content: \"\";\n display: block;\n height: 0.875rem;\n width: 0.875rem;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n background-color: ${Colour[\"bg\"]};\n box-shadow: ${Shadow[\"sm-subtle\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n ${Colour[\"border-strong\"]};\n border-radius: ${Radius[\"full\"]};\n }\n`;\n\nexport const knobDisabled = css`\n cursor: not-allowed;\n\n &::after {\n border-color: ${Colour[\"border-selected-disabled\"]};\n }\n`;\n\nexport const knobInteractive = css`\n cursor: grab;\n\n &:active {\n cursor: grabbing;\n }\n`;\n\nexport const sliderThumb = css`\n height: 0.875rem;\n width: 0.875rem;\n position: absolute;\n z-index: 1;\n outline: none;\n\n ${tokens.thumb.left}: initial;\n left: var(${tokens.thumb.left}, 0px);\n\n &:focus .${knob}::after, &[data-focused=\"true\"] .${knob}::after {\n outline-offset: -1px;\n outline: ${Border[\"width-040\"]} ${Border[\"solid\"]}\n ${Colour[\"border-selected\"]};\n }\n`;\n\nexport const sliderTrack = css`\n position: absolute;\n height: 0.25rem;\n top: 50%;\n transform: translateY(-50%);\n border-radius: ${Radius[\"full\"]};\n\n ${tokens.track.left}: initial;\n ${tokens.track.right}: initial;\n left: var(${tokens.track.left}, 0px);\n right: var(${tokens.track.right}, 0px);\n\n ${tokens.track.backgroundColor}: initial;\n background: var(\n ${tokens.track.backgroundColor},\n ${Colour[\"border-strong\"]}\n );\n`;\n"],"names":["track","backgroundColor","left","right","thumb"],"mappings":"kIA2BoC,wBAcnB,gCA0BQ,mCAQG,kCAvDD,6BAWL,yBAIH,+BAgDK,+BAiBA,yBAhGF,CAClBA,MAAO,CACHC,gBACI,wDACJC,KAAM,6CACNC,MAAO,+CAEXC,MAAO,CACHF,KAAM,+DAIM"}

package/cjs/input-range-slider/input-range-slider.styles_1pbel2v.css ADDED Viewed

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

package/cjs/input-range-slider/slider-components.js ADDED Viewed

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

package/cjs/input-range-slider/slider-components.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"slider-components.js","sources":["../../../src/input-range-slider/slider-components.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./input-range-slider.styles\";\nimport {\n clampValue,\n findNearestThumbIndex,\n getPercent,\n getValueFromClientX,\n PAGE_STEP_MULTIPLIER,\n toOffset,\n} from \"./slider-utils\";\n\ninterface ThumbProps extends React.HTMLAttributes<HTMLDivElement> {\n focused: boolean | undefined;\n disabled: boolean | undefined;\n readOnly: boolean | undefined;\n}\n\nconst InnerThumb = (\n {\n focused,\n disabled,\n readOnly,\n className,\n style,\n ...otherProps\n }: ThumbProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const thumbRef = useRef<HTMLDivElement>(null);\n\n useApplyStyle(thumbRef, style);\n\n return (\n <div\n ref={mergeRefs(thumbRef, ref)}\n {...otherProps}\n className={clsx(styles.sliderThumb, className)}\n data-focused={focused ? \"true\" : undefined}\n >\n <div\n className={clsx(\n styles.knob,\n disabled && styles.knobDisabled,\n !disabled && !readOnly && styles.knobInteractive\n )}\n />\n </div>\n );\n};\n\nexport const Thumb = forwardRef(InnerThumb);\n\ninterface TrackProps extends React.HTMLAttributes<HTMLDivElement> {\n color?: string;\n}\n\nconst InnerTrack = (\n { color, className, style, ...otherProps }: TrackProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const trackRef = useRef<HTMLDivElement>(null);\n\n useApplyStyle(trackRef, {\n [styles.tokens.track.backgroundColor]: color,\n });\n\n useApplyStyle(trackRef, style);\n\n return (\n <div\n {...otherProps}\n className={clsx(styles.sliderTrack, className)}\n ref={mergeRefs(trackRef, ref)}\n />\n );\n};\n\nexport const Track = forwardRef(InnerTrack);\n\n// =============================================================================\n// SLIDER\n// =============================================================================\n\ninterface SliderProps {\n selection: number[];\n min: number;\n max: number;\n step: number;\n minRange: number;\n disabled?: boolean | undefined;\n readOnly?: boolean | undefined;\n trackColors: (string | undefined)[];\n focusedThumbIndex: number | null;\n onChange?: ((value: number[]) => void) | undefined;\n onChangeEnd?: ((value: number[]) => void) | undefined;\n}\n\nexport const Slider = ({\n selection,\n min,\n max,\n step,\n minRange,\n disabled,\n readOnly,\n trackColors,\n focusedThumbIndex,\n onChange,\n onChangeEnd,\n}: SliderProps) => {\n const sliderRef = useRef<HTMLDivElement>(null);\n const thumbRef = useRef<HTMLDivElement>(null);\n const isInteractive = !disabled && !readOnly;\n\n const [innerSliderWidth, setInnerSliderWidth] = useState(0);\n\n const measure = () => {\n setInnerSliderWidth(\n (sliderRef.current?.clientWidth ?? 0) -\n (thumbRef.current?.getBoundingClientRect().width ?? 0)\n );\n };\n\n // Measure synchronously on mount so the first paint has correct thumb positions\n useIsomorphicLayoutEffect(measure, []);\n useResizeDetector({ targetRef: sliderRef, onResize: measure });\n\n // the nearest thumb to the pointer will get moved to that position\n function handleTrackPointerDown(event: React.PointerEvent<HTMLDivElement>) {\n if (!isInteractive) return;\n if (event.button !== 0) return;\n\n event.preventDefault();\n const clickedValue = getValueFromClientX({\n clientX: event.clientX,\n sliderEl: sliderRef.current,\n min,\n max,\n step,\n });\n const index = findNearestThumbIndex(clickedValue, selection);\n const clamped = clampValue(\n clickedValue,\n index,\n selection,\n min,\n max,\n minRange\n );\n\n const nextValues = [...selection];\n nextValues[index] = clamped;\n\n onChange?.(nextValues);\n onChangeEnd?.(nextValues);\n }\n\n function handleThumbPointerDown(\n event: React.PointerEvent<HTMLDivElement>,\n thumbIndex: number\n ) {\n if (!isInteractive) return;\n if (event.button !== 0) return;\n\n event.preventDefault();\n event.stopPropagation();\n (event.currentTarget as HTMLElement).focus();\n\n const dragValues = [...selection];\n\n const onMove = (e: PointerEvent) => {\n const rawValue = getValueFromClientX({\n clientX: e.clientX,\n sliderEl: sliderRef.current,\n min,\n max,\n step,\n });\n const clamped = clampValue(\n rawValue,\n thumbIndex,\n dragValues,\n min,\n max,\n minRange\n );\n\n if (clamped === dragValues[thumbIndex]) return;\n\n dragValues[thumbIndex] = clamped;\n const nextValues = [...dragValues];\n\n onChange?.(nextValues);\n };\n\n const onEnd = () => {\n document.removeEventListener(\"pointermove\", onMove);\n document.removeEventListener(\"pointerup\", onEnd);\n document.removeEventListener(\"pointercancel\", onEnd);\n\n const finalValues = [...dragValues];\n onChangeEnd?.(finalValues);\n };\n\n document.addEventListener(\"pointermove\", onMove);\n document.addEventListener(\"pointerup\", onEnd);\n document.addEventListener(\"pointercancel\", onEnd);\n }\n\n function handleThumbKeyDown(\n event: React.KeyboardEvent<HTMLDivElement>,\n thumbIndex: number\n ) {\n if (!isInteractive) return;\n\n const currentValue = selection[thumbIndex];\n let newValue: number;\n\n switch (event.key) {\n case \"ArrowLeft\":\n case \"ArrowDown\":\n newValue = currentValue - step;\n break;\n case \"ArrowRight\":\n case \"ArrowUp\":\n newValue = currentValue + step;\n break;\n case \"Home\":\n newValue = min;\n break;\n case \"End\":\n newValue = max;\n break;\n case \"PageDown\":\n newValue = currentValue - step * PAGE_STEP_MULTIPLIER;\n break;\n case \"PageUp\":\n newValue = currentValue + step * PAGE_STEP_MULTIPLIER;\n break;\n default:\n return;\n }\n\n event.preventDefault();\n const clamped = clampValue(\n newValue,\n thumbIndex,\n selection,\n min,\n max,\n minRange\n );\n if (clamped === currentValue) return;\n\n const nextValues = [...selection];\n nextValues[thumbIndex] = clamped;\n\n onChange?.(nextValues);\n onChangeEnd?.(nextValues);\n }\n\n return (\n <div\n ref={sliderRef}\n className={styles.slider}\n aria-hidden=\"true\"\n onPointerDown={handleTrackPointerDown}\n >\n {Array.from({ length: selection.length + 1 }, (_, i) => {\n const leftPercent =\n i === 0 ? 0 : getPercent(selection[i - 1], min, max);\n const rightPercent =\n i === selection.length\n ? 0\n : 100 - getPercent(selection[i], min, max);\n return (\n <Track\n key={`track-${i}`}\n data-testid={`slider-track-${i}`}\n color={trackColors[i]}\n style={{\n [styles.tokens.track.left]: toOffset(\n leftPercent,\n innerSliderWidth\n ),\n [styles.tokens.track.right]: toOffset(\n rightPercent,\n innerSliderWidth\n ),\n }}\n />\n );\n })}\n {selection.map((thumbValue, index) => (\n <Thumb\n key={`thumb-${index}`}\n ref={index === 0 ? thumbRef : undefined}\n data-testid={`slider-thumb-${index}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n focused={focusedThumbIndex === index}\n disabled={disabled}\n readOnly={readOnly}\n style={{\n [styles.tokens.thumb.left]: toOffset(\n getPercent(thumbValue, min, max),\n innerSliderWidth\n ),\n }}\n onPointerDown={(e) => handleThumbPointerDown(e, index)}\n onKeyDown={(e) => handleThumbKeyDown(e, index)}\n />\n ))}\n </div>\n );\n};\n"],"names":["Thumb","forwardRef","_a","ref","focused","disabled","readOnly","className","style","otherProps","__rest","thumbRef","useRef","useApplyStyle","_jsx","Object","assign","mergeRefs","clsx","styles.sliderThumb","undefined","children","styles.knob","styles.knobDisabled","styles.knobInteractive","Track","color","trackRef","styles.tokens","track","backgroundColor","styles.sliderTrack","selection","min","max","step","minRange","trackColors","focusedThumbIndex","onChange","onChangeEnd","sliderRef","isInteractive","innerSliderWidth","setInnerSliderWidth","useState","measure","_b","current","clientWidth","_d","_c","getBoundingClientRect","width","useIsomorphicLayoutEffect","useResizeDetector","targetRef","onResize","_jsxs","styles.slider","onPointerDown","event","button","preventDefault","clickedValue","getValueFromClientX","clientX","sliderEl","index","findNearestThumbIndex","clamped","clampValue","nextValues","Array","from","length","_","i","leftPercent","getPercent","rightPercent","left","toOffset","right","map","thumbValue","tabIndex","thumb","e","thumbIndex","stopPropagation","currentTarget","focus","dragValues","onMove","rawValue","onEnd","document","removeEventListener","finalValues","addEventListener","handleThumbPointerDown","onKeyDown","currentValue","newValue","key","PAGE_STEP_MULTIPLIER","handleThumbKeyDown"],"mappings":"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"}

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

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

package/cjs/input-range-slider/slider-utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"slider-utils.js","sources":["../../../src/input-range-slider/slider-utils.ts"],"sourcesContent":["export const PAGE_STEP_MULTIPLIER = 10;\n\nexport function getPercent(val: number, min: number, max: number) {\n if (max === min) return 0;\n return ((val - min) / (max - min)) * 100;\n}\n\nexport function toOffset(percent: number, maxThumbOffset: number) {\n if (percent === 0) return \"0px\";\n return `${(percent / 100) * maxThumbOffset}px`;\n}\n\ntype GetValueFromClientXParams = {\n clientX: number;\n sliderEl: HTMLDivElement | null;\n min: number;\n max: number;\n step: number;\n};\n\nexport function getValueFromClientX({\n clientX,\n sliderEl,\n min,\n max,\n step,\n}: GetValueFromClientXParams) {\n if (!sliderEl) return min;\n\n const rect = sliderEl.getBoundingClientRect();\n if (rect.width === 0) return min;\n if (step <= 0) return Math.max(min, Math.min(max, min));\n\n const fraction = Math.max(\n 0,\n Math.min(1, (clientX - rect.left) / rect.width)\n );\n const rawValue = min + fraction * (max - min);\n const snapped = Math.round((rawValue - min) / step) * step + min;\n return Math.max(min, Math.min(max, snapped));\n}\n\nexport function clampValue(\n nextValue: number,\n index: number,\n values: number[],\n min: number,\n max: number,\n minRange: number\n) {\n let low = min;\n let high = max;\n if (index > 0) low = values[index - 1] + minRange;\n if (index < values.length - 1) high = values[index + 1] - minRange;\n if (low > high) high = low;\n return Math.max(low, Math.min(high, nextValue));\n}\n\nexport function findNearestThumbIndex(val: number, selection: number[]) {\n if (selection.length === 0) return 0;\n\n let nearestIndex = 0;\n let nearestDist = Math.abs(selection[0] - val);\n for (let i = 1; i < selection.length; i++) {\n const dist = Math.abs(selection[i] - val);\n if (dist < nearestDist) {\n nearestDist = dist;\n nearestIndex = i;\n }\n }\n return nearestIndex;\n}\n"],"names":["nextValue","index","values","min","max","minRange","low","high","length","Math","val","selection","nearestIndex","nearestDist","abs","i","dist","clientX","sliderEl","step","rect","getBoundingClientRect","width","rawValue","left","snapped","round","percent","maxThumbOffset"],"mappings":"0CAAoC,sBA0C9B,SACFA,EACAC,EACAC,EACAC,EACAC,EACAC,GAEA,IAAIC,EAAMH,EACNI,EAAOH,EAIX,OAHIH,EAAQ,IAAGK,EAAMJ,EAAOD,EAAQ,GAAKI,GACrCJ,EAAQC,EAAOM,OAAS,IAAGD,EAAOL,EAAOD,EAAQ,GAAKI,GACtDC,EAAMC,IAAMA,EAAOD,GAChBG,KAAKL,IAAIE,EAAKG,KAAKN,IAAII,EAAMP,GACxC,gCAEM,SAAgCU,EAAaC,GAC/C,GAAyB,IAArBA,EAAUH,OAAc,OAAO,EAEnC,IAAII,EAAe,EACfC,EAAcJ,KAAKK,IAAIH,EAAU,GAAKD,GAC1C,IAAK,IAAIK,EAAI,EAAGA,EAAIJ,EAAUH,OAAQO,IAAK,CACvC,MAAMC,EAAOP,KAAKK,IAAIH,EAAUI,GAAKL,GACjCM,EAAOH,IACPA,EAAcG,EACdJ,EAAeG,EAEvB,CACA,OAAOH,CACX,8BArE2BF,EAAaP,EAAaC,GACjD,OAAIA,IAAQD,EAAY,GACfO,EAAMP,IAAQC,EAAMD,GAAQ,GACzC,8BAeM,UAA8Bc,QAChCA,EAAOC,SACPA,EAAQf,IACRA,EAAGC,IACHA,EAAGe,KACHA,IAEA,IAAKD,EAAU,OAAOf,EAEtB,MAAMiB,EAAOF,EAASG,wBACtB,GAAmB,IAAfD,EAAKE,MAAa,OAAOnB,EAC7B,GAAIgB,GAAQ,EAAG,OAAOV,KAAKL,IAAID,EAAKM,KAAKN,IAAIC,EAAKD,IAElD,MAIMoB,EAAWpB,EAJAM,KAAKL,IAClB,EACAK,KAAKN,IAAI,GAAIc,EAAUG,EAAKI,MAAQJ,EAAKE,SAEVlB,EAAMD,GACnCsB,EAAUhB,KAAKiB,OAAOH,EAAWpB,GAAOgB,GAAQA,EAAOhB,EAC7D,OAAOM,KAAKL,IAAID,EAAKM,KAAKN,IAAIC,EAAKqB,GACvC,mBAjCM,SAAmBE,EAAiBC,GACtC,OAAgB,IAAZD,EAAsB,MACfA,EAAU,IAAOC,EAArB,IACX"}

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

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

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

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

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

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

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

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