npm - @chayns-components/core - Versions diffs - 5.5.30 → 5.5.34 - Mend

@chayns-components/core 5.5.30 → 5.5.34

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 (249) hide show

package/lib/esm/components/slider/Slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","useTheme","useElementSize","useKeyboardFocusHighlighting","calculateGradientOffset","calculatePopupPosition","fillSlider","getThumbMaxWidth","StyledHighlightedStep","StyledSlider","StyledSliderInput","StyledSliderThumb","StyledSliderThumbLabel","Slider","interval","isDisabled","maxEnabledValue","maxValue","minEnabledValue","minValue","onChange","onSelect","shouldHighlightSteps","shouldEnableKeyboardHighlighting","shouldShowThumbLabel","step","thumbLabelFormatter","value","fromValue","setFromValue","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","isFromThumbFocused","setIsFromThumbFocused","isToThumbFocused","setIsToThumbFocused","previousFromValueRef","previousToValueRef","fromSliderRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","theme","shouldShowKeyboardHighlighting","updateFromValue","nextValue","current","updateToValue","normalizeIntervalValue","newValue","Number","Math","round","applyIntervalThumbChange","thumb","rawValue","isFromThumb","previousValue","hasChanged","from","to","undefined","toSlider","fromSlider","String","maxNumber","handleMouseUp","handleControlFromSlider","event","target","handleControlToSlider","handleInputChange","effectiveMin","max","effectiveMax","min","isNaN","fromSliderThumbPosition","offsetWidth","width","sliderWidth","wrapperWidth","toSliderThumbPosition","toSliderThumbContentPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","highlightedStepElements","elements","i","isStepDisabled","offset","stepWidth","push","createElement","key","$isDisabled","$isFilled","$leftPosition","fromInputBackground","gradientPoints","getPercentage","x","join","ref","animate","height","initial","exit","$thumbWidth","$isInterval","type","onTouchStart","onTouchEnd","onMouseUp","$background","$shouldShowKeyboardHighlighting","onFocus","onBlur","$position","$isBigSlider","$shouldShowFocusRing","$width","displayName"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, {\n ChangeEvent,\n FC,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport {\n calculateGradientOffset,\n calculatePopupPosition,\n fillSlider,\n getThumbMaxWidth,\n} from '../../utils/slider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n StyledHighlightedStep,\n StyledSlider,\n StyledSliderInput,\n StyledSliderThumb,\n StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n maxValue: number;\n minValue: number;\n}\n\nexport type SliderProps = {\n /*\n The current interval of the slider.\n * @description\n * The `interval` prop is used to define a range for the slider, allowing users to select a minimum and maximum value.\n * This is particularly useful for scenarios where you want to allow users to select a range of values, such as price ranges or date ranges.\n * When provided, the slider will display two thumbs, one for the minimum value and one for the maximum value.\n * @example\n * <Slider interval={{ minValue: 10, maxValue: 50 }} />\n * @optional\n /\n interval?: SliderInterval;\n /\n Disables the slider, preventing user interaction.\n * @description\n * The `isDisabled` prop is used to disable the slider, making it unresponsive to user input.\n * When set to `true`, the slider cannot be moved, and its appearance may change to indicate that it is disabled.\n * This is useful for scenarios where the slider should not be interacted with, such as when the data it controls is not available or when the user does not have permission to change the value.\n * @default false\n * @example\n * <Slider isDisabled={true} />\n * @optional\n /\n isDisabled?: boolean;\n /\n The maximum enabled value of the slider.\n * @description\n * The `maxEnabledValue` prop is used to define the maximum value that can be selected on the slider.\n * It is particularly useful when you want to set an upper limit for the slider's range, ensuring that users cannot select values above this threshold.\n * This prop is optional and can be used in conjunction with the `maxValue` prop to create a more flexible slider.\n * @example\n * <Slider maxEnabledValue={75} />\n * @optional\n /\n maxEnabledValue?: number;\n /\n The maximum value of the slider.\n * @description\n * The `maxValue` prop defines the upper limit of the slider's range. It is used to set the maximum value that can be selected by the user.\n * This value should be greater than or equal to `minValue`.\n * @example\n * <Slider maxValue={200} />\n /\n maxValue: number;\n /\n The minimum enabled value of the slider.\n * @description\n * The `minEnabledValue` prop is used to define the minimum value that can be selected on the slider.\n * It is particularly useful when you want to set a lower limit for the slider's range, ensuring that users cannot select values below this threshold.\n * This prop is optional and can be used in conjunction with the `minValue` prop to create a more flexible slider.\n * @example\n * <Slider minEnabledValue={25} />\n * @optional\n /\n minEnabledValue?: number;\n /\n The minimum value of the slider.\n * @description\n * The `minValue` prop defines the lower limit of the slider's range. It is used to set the minimum value that can be selected by the user.\n * This value should be less than or equal to `maxValue`.\n * @example\n * <Slider minValue={0} />\n /\n minValue: number;\n /\n Callback function that is called when the slider value changes.\n * @description\n * The `onChange` prop is a callback function that is triggered whenever the slider value changes.\n * It receives the new value or interval of the slider as an argument, allowing you to update your application state or perform other actions based on the new value.\n * If the slider is configured as an interval, it will receive an object with `minValue` and `maxValue`.\n * @example\n * <Slider onChange={(value, interval) => console.log('Slider changed', { value, interval })} />\n /\n onChange?: (value?: number, interval?: SliderInterval) => void;\n /\n Callback function that is called when the slider selection is finalized.\n * @description\n * The `onSelect` prop is a callback function that is triggered when the user finishes interacting with the slider, such as releasing the mouse or touch after dragging the thumb.\n * It receives the selected value or interval as arguments, allowing you to perform actions based on the final selection.\n * If the slider is configured as an interval, it will receive an object with `minValue` and `maxValue`.\n * @example\n * <Slider onSelect={(value, interval) => console.log('Slider selected', { value, interval })} />\n /\n onSelect?: (value?: number, interval?: SliderInterval) => void;\n /\n Indicates whether the slider should highlight steps.\n * @description\n * The `shouldHighlightSteps` prop determines whether the slider should visually indicate the steps between values.\n * When set to `true`, the slider will show visual markers for each step, making it easier for users to see the increments.\n * @default false\n * @example\n * <Slider shouldHighlightSteps={true} />\n * @optional\n /\n shouldHighlightSteps?: boolean;\n /\n Enables keyboard-only focus highlighting.\n * @description\n * Focus styles are shown only during keyboard navigation and reset on mouse interaction.\n * @default false\n * @optional\n /\n shouldEnableKeyboardHighlighting?: boolean;\n /\n Indicates whether the slider should show a label on the thumb.\n * @description\n * The `shouldShowThumbLabel` prop determines whether the slider should display a label on the thumb that shows the current value.\n * When set to `true`, a label will be shown above the thumb, providing users with immediate feedback on the selected value.\n * @default false\n * @example\n * <Slider shouldShowThumbLabel={true} />\n * @optional\n /\n shouldShowThumbLabel?: boolean;\n /\n The step size for the slider.\n * @description\n * The `step` prop defines the increment by which the slider value changes when the user interacts with it.\n * It is used to control the granularity of the slider's movement. For example, if `step` is set to 1, the slider will move in increments of 1.\n * @default 1\n * @example\n * <Slider step={5} />\n * @optional\n /\n step?: number;\n /\n A function to format the thumb label.\n * @description\n * The `thumbLabelFormatter` prop is a function that formats the value displayed on the thumb label.\n * It receives the current value as an argument and should return a string that will be displayed on the thumb label.\n * This is useful for customizing the appearance of the label, such as adding currency symbols or units.\n * @example\n * <Slider thumbLabelFormatter={(value) => `${value} €`} />\n * @optional\n /\n thumbLabelFormatter?: (value: number, isMeasuring?: boolean) => string;\n /\n The current value of the slider.\n * @description\n * The `value` prop is used to set the current value of the slider when it is not configured as an interval.\n * It should be a number between `minValue` and `maxValue`. If the slider is configured as an interval, this prop will be ignored.\n * @example\n * <Slider value={50} />\n * @optional\n /\n value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n interval,\n isDisabled,\n maxEnabledValue,\n maxValue,\n minEnabledValue,\n minValue,\n onChange,\n onSelect,\n shouldHighlightSteps = false,\n shouldEnableKeyboardHighlighting,\n shouldShowThumbLabel = false,\n step = 1,\n thumbLabelFormatter,\n value,\n}) => {\n const [fromValue, setFromValue] = useState(minEnabledValue ?? minValue);\n const [toValue, setToValue] = useState(maxEnabledValue ?? maxValue);\n const [thumbWidth, setThumbWidth] = useState(20);\n const [isBigSlider, setIsBigSlider] = useState(false);\n const [isFromThumbFocused, setIsFromThumbFocused] = useState(false);\n const [isToThumbFocused, setIsToThumbFocused] = useState(false);\n\n const previousFromValueRef = useRef(fromValue);\n const previousToValueRef = useRef(toValue);\n const fromSliderRef = useRef<HTMLInputElement>(null);\n const toSliderRef = useRef<HTMLInputElement>(null);\n const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n const toSliderThumbRef = useRef<HTMLDivElement>(null);\n const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n const theme = useTheme() as Theme;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n const updateFromValue = useCallback((nextValue: number) => {\n previousFromValueRef.current = nextValue;\n setFromValue(nextValue);\n }, []);\n\n const updateToValue = useCallback((nextValue: number) => {\n previousToValueRef.current = nextValue;\n setToValue(nextValue);\n }, []);\n\n const normalizeIntervalValue = useCallback(\n (nextValue: number) => {\n let newValue = Number(nextValue);\n\n if (newValue > maxValue \|\| newValue > maxValue - (maxValue % step)) {\n newValue = maxValue;\n } else if (newValue < minValue) {\n newValue = minValue;\n } else {\n newValue = Math.round(newValue / step) step;\n }\n\n return newValue;\n },\n [maxValue, minValue, step],\n );\n\n const applyIntervalThumbChange = useCallback(\n (thumb: 'from' \| 'to', rawValue: number) => {\n if (!fromSliderRef.current \|\| !toSliderRef.current) {\n return;\n }\n\n const newValue = normalizeIntervalValue(rawValue);\n const isFromThumb = thumb === 'from';\n const previousValue = isFromThumb\n ? previousFromValueRef.current\n : previousToValueRef.current;\n const hasChanged = newValue !== previousValue;\n\n if (isFromThumb) {\n updateFromValue(newValue);\n } else {\n updateToValue(newValue);\n }\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (hasChanged && typeof onChange === 'function') {\n onChange(undefined, {\n minValue: isFromThumb ? newValue : from,\n maxValue: isFromThumb ? to : newValue,\n });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n ...(isFromThumb ? { fromValue: newValue } : { toValue: newValue }),\n theme,\n });\n\n if (isFromThumb) {\n fromSliderRef.current.value = String(newValue > to ? to : newValue);\n } else {\n toSliderRef.current.value = String(from <= newValue ? newValue : from);\n }\n },\n [normalizeIntervalValue, onChange, theme, updateFromValue, updateToValue],\n );\n\n useEffect(() => {\n if (shouldShowThumbLabel) {\n setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n }\n }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n /*\n This function sets the value\n /\n useEffect(() => {\n if (\n typeof value === 'number' &&\n value >= minValue &&\n value <= maxValue &&\n (typeof minEnabledValue !== 'number' \|\| value >= minEnabledValue) &&\n (typeof maxEnabledValue !== 'number' \|\| value <= maxEnabledValue)\n ) {\n updateFromValue(value);\n }\n }, [maxEnabledValue, maxValue, minEnabledValue, minValue, updateFromValue, value]);\n\n useEffect(() => {\n if (fromValue > toValue) {\n updateFromValue(toValue);\n }\n\n if (toValue < fromValue) {\n updateToValue(fromValue);\n }\n }, [fromValue, toValue, updateFromValue, updateToValue]);\n\n const handleMouseUp = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n }, [interval, isDisabled, onSelect]);\n\n const handleControlFromSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n applyIntervalThumbChange('from', Number(event.target.value));\n },\n [applyIntervalThumbChange],\n );\n\n const handleControlToSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled) {\n return;\n }\n\n applyIntervalThumbChange('to', Number(event.target.value));\n },\n [applyIntervalThumbChange, isDisabled],\n );\n\n useEffect(() => {\n if (!fromSliderRef.current \|\| !toSliderRef.current \|\| !interval) {\n return;\n }\n\n updateFromValue(interval.minValue);\n updateToValue(interval.maxValue);\n\n fromSliderRef.current.value = String(interval.minValue);\n toSliderRef.current.value = String(interval.maxValue);\n\n fillSlider({\n fromSlider: fromSliderRef.current,\n toSlider: toSliderRef.current,\n theme,\n });\n // Note: An interval can't be in the deps because of rerender\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [theme]);\n\n /\n This function updates the value\n /\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled) {\n return;\n }\n\n // If interval mode is active, delegate to the \"from\" handler and return early\n if (interval) {\n handleControlFromSlider(event);\n\n return;\n }\n\n // Respect optionally enabled bounds in addition to absolute min/max\n const effectiveMin =\n typeof minEnabledValue === 'number'\n ? Math.max(minValue, minEnabledValue)\n : minValue;\n\n const effectiveMax =\n typeof maxEnabledValue === 'number'\n ? Math.min(maxValue, maxEnabledValue)\n : maxValue;\n\n let newValue = Number(event.target.value);\n\n // Clamp to effective range first\n if (Number.isNaN(newValue)) {\n newValue = effectiveMin;\n }\n\n if (newValue < effectiveMin) newValue = effectiveMin;\n else if (newValue > effectiveMax - (effectiveMax % step)) newValue = effectiveMax;\n else newValue = Math.round(newValue / step) step;\n\n if (typeof onChange === 'function' && newValue !== previousFromValueRef.current) {\n onChange(newValue);\n }\n\n updateFromValue(newValue);\n },\n [\n handleControlFromSlider,\n interval,\n isDisabled,\n maxEnabledValue,\n maxValue,\n minEnabledValue,\n minValue,\n onChange,\n step,\n updateFromValue,\n ],\n );\n\n const fromSliderThumbPosition = useMemo(() => {\n if (\n typeof fromSliderRef.current?.offsetWidth === 'number' &&\n typeof sliderWrapperSize?.width === 'number'\n ) {\n return calculateGradientOffset({\n maxValue,\n minValue,\n sliderWidth: fromSliderRef.current.offsetWidth,\n thumbWidth: 20,\n value: fromValue,\n wrapperWidth: sliderWrapperSize.width,\n });\n }\n\n return 0;\n }, [fromValue, maxValue, minValue, sliderWrapperSize?.width]);\n\n const toSliderThumbPosition = useMemo(() => {\n if (\n typeof toSliderRef.current?.offsetWidth === 'number' &&\n typeof sliderWrapperSize?.width === 'number'\n ) {\n return calculateGradientOffset({\n maxValue,\n minValue,\n sliderWidth: toSliderRef.current.offsetWidth,\n thumbWidth: 20,\n value: toValue,\n wrapperWidth: sliderWrapperSize.width,\n });\n }\n\n return 0;\n }, [maxValue, minValue, sliderWrapperSize?.width, toValue]);\n\n const toSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: toValue,\n popupWidth: thumbWidth,\n }),\n [maxValue, minValue, thumbWidth, toValue],\n );\n\n const fromSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: fromValue,\n popupWidth: thumbWidth,\n }),\n [fromValue, maxValue, minValue, thumbWidth],\n );\n\n const handleTouchStart = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n void setRefreshScrollEnabled(false);\n\n if (shouldShowThumbLabel) {\n setIsBigSlider(true);\n }\n }, [isDisabled, shouldShowThumbLabel]);\n\n const handleTouchEnd = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n void setRefreshScrollEnabled(true);\n\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n\n if (shouldShowThumbLabel) {\n setIsBigSlider(false);\n }\n }, [interval, isDisabled, onSelect, shouldShowThumbLabel]);\n\n const highlightedStepElements = useMemo(() => {\n const sliderWidth = fromSliderRef.current?.offsetWidth ?? 0;\n const wrapperWidth = sliderWrapperSize?.width ?? 0;\n\n if (!shouldHighlightSteps \|\| interval \|\| sliderWidth === 0 \|\| wrapperWidth === 0) {\n return null;\n }\n\n const elements: ReactNode[] = [];\n\n for (let i = minValue; i <= maxValue; i += step) {\n const isStepDisabled =\n (typeof minEnabledValue === 'number' && i < minEnabledValue) \|\|\n (typeof maxEnabledValue === 'number' && i > maxEnabledValue);\n\n const offset = (wrapperWidth - sliderWidth) / 2;\n const stepWidth = (sliderWidth / (maxValue - minValue)) * step;\n\n elements.push(\n <StyledHighlightedStep\n key={`step--${i}`}\n $isDisabled={isStepDisabled}\n $isFilled={i < fromValue}\n $leftPosition={offset + stepWidth * i}\n />,\n );\n }\n\n return elements;\n }, [\n fromValue,\n interval,\n maxEnabledValue,\n maxValue,\n minEnabledValue,\n minValue,\n shouldHighlightSteps,\n sliderWrapperSize?.width,\n step,\n ]);\n\n const fromInputBackground = useMemo(() => {\n if (interval) return undefined;\n\n const gradientPoints: string[] = [];\n\n const getPercentage = (x: number) => ((x - minValue) / (maxValue - minValue)) * 100;\n\n if (typeof minEnabledValue === 'number') {\n gradientPoints.push('rgb(215, 215, 215) 0%');\n gradientPoints.push(`rgb(215, 215, 215) ${getPercentage(minEnabledValue)}%`);\n gradientPoints.push(`${theme['409'] ?? ''} ${getPercentage(minEnabledValue)}%`);\n } else {\n gradientPoints.push(`${theme['409'] ?? ''} 0%`);\n }\n\n gradientPoints.push(`${theme['409'] ?? ''} ${getPercentage(fromValue)}%`);\n gradientPoints.push(`${theme['403'] ?? ''} ${getPercentage(fromValue)}%`);\n\n if (typeof maxEnabledValue === 'number') {\n gradientPoints.push(`${theme['403'] ?? ''} ${getPercentage(maxEnabledValue)}%`);\n gradientPoints.push(`rgb(215, 215, 215) ${getPercentage(maxEnabledValue)}%`);\n gradientPoints.push('rgb(215, 215, 215) 100%');\n } else {\n gradientPoints.push(`${theme['403'] ?? ''} 100%`);\n }\n\n return `linear-gradient(to right, ${gradientPoints.join(', ')})`;\n }, [fromValue, interval, maxEnabledValue, maxValue, minEnabledValue, minValue, theme]);\n\n return useMemo(\n () => (\n <StyledSlider ref={sliderWrapperRef} $isDisabled={isDisabled}>\n {highlightedStepElements}\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n ref={fromSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={fromValue}\n step={step}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleInputChange}\n onMouseUp={handleMouseUp}\n $background={fromInputBackground}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n onFocus={() => {\n setIsFromThumbFocused(true);\n setIsToThumbFocused(false);\n }}\n onBlur={() => {\n setIsFromThumbFocused(false);\n }}\n />\n <StyledSliderThumb\n ref={fromSliderThumbRef}\n $position={fromSliderThumbPosition}\n $isBigSlider={isBigSlider}\n $shouldShowFocusRing={shouldShowKeyboardHighlighting && isFromThumbFocused}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={fromSliderThumbContentPosition}\n ref={fromSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(fromValue)\n : fromValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n {interval && (\n <StyledSliderThumb\n ref={toSliderThumbRef}\n $position={toSliderThumbPosition}\n $isBigSlider={isBigSlider}\n $shouldShowFocusRing={shouldShowKeyboardHighlighting && isToThumbFocused}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={toSliderThumbContentPosition}\n ref={toSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(toValue)\n : toValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n )}\n {interval && (\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n ref={toSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={toValue}\n step={step}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleControlToSlider}\n onMouseUp={handleMouseUp}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n onFocus={() => {\n setIsToThumbFocused(true);\n setIsFromThumbFocused(false);\n }}\n onBlur={() => {\n setIsToThumbFocused(false);\n }}\n />\n )}\n </StyledSlider>\n ),\n [\n fromInputBackground,\n fromSliderThumbContentPosition,\n fromSliderThumbPosition,\n fromValue,\n handleControlToSlider,\n handleInputChange,\n handleMouseUp,\n handleTouchEnd,\n handleTouchStart,\n highlightedStepElements,\n interval,\n isBigSlider,\n isDisabled,\n isFromThumbFocused,\n isToThumbFocused,\n maxValue,\n minValue,\n shouldShowThumbLabel,\n shouldShowKeyboardHighlighting,\n thumbLabelFormatter,\n thumbWidth,\n toSliderThumbContentPosition,\n toSliderThumbPosition,\n toValue,\n ],\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Slider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","useTheme","useElementSize","useFocusRingPortal","useKeyboardFocusHighlighting","calculateGradientOffset","calculatePopupPosition","fillSlider","getThumbMaxWidth","StyledHighlightedStep","StyledSlider","StyledSliderInput","StyledSliderThumb","StyledSliderThumbLabel","Slider","interval","isDisabled","maxEnabledValue","maxValue","minEnabledValue","minValue","onChange","onSelect","shouldHighlightSteps","shouldEnableKeyboardHighlighting","shouldShowThumbLabel","step","thumbLabelFormatter","value","fromValue","setFromValue","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","isFromThumbFocused","setIsFromThumbFocused","isToThumbFocused","setIsToThumbFocused","previousFromValueRef","previousToValueRef","fromSliderRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","theme","shouldShowKeyboardHighlighting","isEnabled","overlayRef","shape","updateFromValue","nextValue","current","updateToValue","normalizeIntervalValue","newValue","Number","Math","round","applyIntervalThumbChange","thumb","rawValue","isFromThumb","previousValue","hasChanged","from","to","undefined","toSlider","fromSlider","String","maxNumber","handleMouseUp","handleControlFromSlider","event","target","handleControlToSlider","handleInputChange","effectiveMin","max","effectiveMax","min","isNaN","fromSliderThumbPosition","offsetWidth","width","sliderWidth","wrapperWidth","toSliderThumbPosition","toSliderThumbContentPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","highlightedStepElements","elements","i","isStepDisabled","offset","stepWidth","push","createElement","key","$isDisabled","$isFilled","$leftPosition","fromInputBackground","gradientPoints","getPercentage","x","join","ref","animate","height","initial","exit","$thumbWidth","$isInterval","type","onTouchStart","onTouchEnd","onMouseUp","$background","onFocus","onBlur","$position","$isBigSlider","$width","displayName"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, {\n ChangeEvent,\n FC,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport {\n calculateGradientOffset,\n calculatePopupPosition,\n fillSlider,\n getThumbMaxWidth,\n} from '../../utils/slider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n StyledHighlightedStep,\n StyledSlider,\n StyledSliderInput,\n StyledSliderThumb,\n StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n maxValue: number;\n minValue: number;\n}\n\nexport type SliderProps = {\n /*\n The current interval of the slider.\n * @description\n * The `interval` prop is used to define a range for the slider, allowing users to select a minimum and maximum value.\n * This is particularly useful for scenarios where you want to allow users to select a range of values, such as price ranges or date ranges.\n * When provided, the slider will display two thumbs, one for the minimum value and one for the maximum value.\n * @example\n * <Slider interval={{ minValue: 10, maxValue: 50 }} />\n * @optional\n /\n interval?: SliderInterval;\n /\n Disables the slider, preventing user interaction.\n * @description\n * The `isDisabled` prop is used to disable the slider, making it unresponsive to user input.\n * When set to `true`, the slider cannot be moved, and its appearance may change to indicate that it is disabled.\n * This is useful for scenarios where the slider should not be interacted with, such as when the data it controls is not available or when the user does not have permission to change the value.\n * @default false\n * @example\n * <Slider isDisabled={true} />\n * @optional\n /\n isDisabled?: boolean;\n /\n The maximum enabled value of the slider.\n * @description\n * The `maxEnabledValue` prop is used to define the maximum value that can be selected on the slider.\n * It is particularly useful when you want to set an upper limit for the slider's range, ensuring that users cannot select values above this threshold.\n * This prop is optional and can be used in conjunction with the `maxValue` prop to create a more flexible slider.\n * @example\n * <Slider maxEnabledValue={75} />\n * @optional\n /\n maxEnabledValue?: number;\n /\n The maximum value of the slider.\n * @description\n * The `maxValue` prop defines the upper limit of the slider's range. It is used to set the maximum value that can be selected by the user.\n * This value should be greater than or equal to `minValue`.\n * @example\n * <Slider maxValue={200} />\n /\n maxValue: number;\n /\n The minimum enabled value of the slider.\n * @description\n * The `minEnabledValue` prop is used to define the minimum value that can be selected on the slider.\n * It is particularly useful when you want to set a lower limit for the slider's range, ensuring that users cannot select values below this threshold.\n * This prop is optional and can be used in conjunction with the `minValue` prop to create a more flexible slider.\n * @example\n * <Slider minEnabledValue={25} />\n * @optional\n /\n minEnabledValue?: number;\n /\n The minimum value of the slider.\n * @description\n * The `minValue` prop defines the lower limit of the slider's range. It is used to set the minimum value that can be selected by the user.\n * This value should be less than or equal to `maxValue`.\n * @example\n * <Slider minValue={0} />\n /\n minValue: number;\n /\n Callback function that is called when the slider value changes.\n * @description\n * The `onChange` prop is a callback function that is triggered whenever the slider value changes.\n * It receives the new value or interval of the slider as an argument, allowing you to update your application state or perform other actions based on the new value.\n * If the slider is configured as an interval, it will receive an object with `minValue` and `maxValue`.\n * @example\n * <Slider onChange={(value, interval) => console.log('Slider changed', { value, interval })} />\n /\n onChange?: (value?: number, interval?: SliderInterval) => void;\n /\n Callback function that is called when the slider selection is finalized.\n * @description\n * The `onSelect` prop is a callback function that is triggered when the user finishes interacting with the slider, such as releasing the mouse or touch after dragging the thumb.\n * It receives the selected value or interval as arguments, allowing you to perform actions based on the final selection.\n * If the slider is configured as an interval, it will receive an object with `minValue` and `maxValue`.\n * @example\n * <Slider onSelect={(value, interval) => console.log('Slider selected', { value, interval })} />\n /\n onSelect?: (value?: number, interval?: SliderInterval) => void;\n /\n Indicates whether the slider should highlight steps.\n * @description\n * The `shouldHighlightSteps` prop determines whether the slider should visually indicate the steps between values.\n * When set to `true`, the slider will show visual markers for each step, making it easier for users to see the increments.\n * @default false\n * @example\n * <Slider shouldHighlightSteps={true} />\n * @optional\n /\n shouldHighlightSteps?: boolean;\n /\n Enables keyboard-only focus highlighting.\n * @description\n * Focus styles are shown only during keyboard navigation and reset on mouse interaction.\n * @default false\n * @optional\n /\n shouldEnableKeyboardHighlighting?: boolean;\n /\n Indicates whether the slider should show a label on the thumb.\n * @description\n * The `shouldShowThumbLabel` prop determines whether the slider should display a label on the thumb that shows the current value.\n * When set to `true`, a label will be shown above the thumb, providing users with immediate feedback on the selected value.\n * @default false\n * @example\n * <Slider shouldShowThumbLabel={true} />\n * @optional\n /\n shouldShowThumbLabel?: boolean;\n /\n The step size for the slider.\n * @description\n * The `step` prop defines the increment by which the slider value changes when the user interacts with it.\n * It is used to control the granularity of the slider's movement. For example, if `step` is set to 1, the slider will move in increments of 1.\n * @default 1\n * @example\n * <Slider step={5} />\n * @optional\n /\n step?: number;\n /\n A function to format the thumb label.\n * @description\n * The `thumbLabelFormatter` prop is a function that formats the value displayed on the thumb label.\n * It receives the current value as an argument and should return a string that will be displayed on the thumb label.\n * This is useful for customizing the appearance of the label, such as adding currency symbols or units.\n * @example\n * <Slider thumbLabelFormatter={(value) => `${value} €`} />\n * @optional\n /\n thumbLabelFormatter?: (value: number, isMeasuring?: boolean) => string;\n /\n The current value of the slider.\n * @description\n * The `value` prop is used to set the current value of the slider when it is not configured as an interval.\n * It should be a number between `minValue` and `maxValue`. If the slider is configured as an interval, this prop will be ignored.\n * @example\n * <Slider value={50} />\n * @optional\n /\n value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n interval,\n isDisabled,\n maxEnabledValue,\n maxValue,\n minEnabledValue,\n minValue,\n onChange,\n onSelect,\n shouldHighlightSteps = false,\n shouldEnableKeyboardHighlighting,\n shouldShowThumbLabel = false,\n step = 1,\n thumbLabelFormatter,\n value,\n}) => {\n const [fromValue, setFromValue] = useState(minEnabledValue ?? minValue);\n const [toValue, setToValue] = useState(maxEnabledValue ?? maxValue);\n const [thumbWidth, setThumbWidth] = useState(20);\n const [isBigSlider, setIsBigSlider] = useState(false);\n const [isFromThumbFocused, setIsFromThumbFocused] = useState(false);\n const [isToThumbFocused, setIsToThumbFocused] = useState(false);\n\n const previousFromValueRef = useRef(fromValue);\n const previousToValueRef = useRef(toValue);\n const fromSliderRef = useRef<HTMLInputElement>(null);\n const toSliderRef = useRef<HTMLInputElement>(null);\n const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n const toSliderThumbRef = useRef<HTMLDivElement>(null);\n const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n const theme = useTheme() as Theme;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n useFocusRingPortal(fromSliderRef, {\n isEnabled: shouldShowKeyboardHighlighting && isFromThumbFocused,\n overlayRef: fromSliderThumbRef,\n shape: 'circle',\n });\n useFocusRingPortal(toSliderRef, {\n isEnabled: shouldShowKeyboardHighlighting && isToThumbFocused,\n overlayRef: toSliderThumbRef,\n shape: 'circle',\n });\n\n const updateFromValue = useCallback((nextValue: number) => {\n previousFromValueRef.current = nextValue;\n setFromValue(nextValue);\n }, []);\n\n const updateToValue = useCallback((nextValue: number) => {\n previousToValueRef.current = nextValue;\n setToValue(nextValue);\n }, []);\n\n const normalizeIntervalValue = useCallback(\n (nextValue: number) => {\n let newValue = Number(nextValue);\n\n if (newValue > maxValue \|\| newValue > maxValue - (maxValue % step)) {\n newValue = maxValue;\n } else if (newValue < minValue) {\n newValue = minValue;\n } else {\n newValue = Math.round(newValue / step) step;\n }\n\n return newValue;\n },\n [maxValue, minValue, step],\n );\n\n const applyIntervalThumbChange = useCallback(\n (thumb: 'from' \| 'to', rawValue: number) => {\n if (!fromSliderRef.current \|\| !toSliderRef.current) {\n return;\n }\n\n const newValue = normalizeIntervalValue(rawValue);\n const isFromThumb = thumb === 'from';\n const previousValue = isFromThumb\n ? previousFromValueRef.current\n : previousToValueRef.current;\n const hasChanged = newValue !== previousValue;\n\n if (isFromThumb) {\n updateFromValue(newValue);\n } else {\n updateToValue(newValue);\n }\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (hasChanged && typeof onChange === 'function') {\n onChange(undefined, {\n minValue: isFromThumb ? newValue : from,\n maxValue: isFromThumb ? to : newValue,\n });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n ...(isFromThumb ? { fromValue: newValue } : { toValue: newValue }),\n theme,\n });\n\n if (isFromThumb) {\n fromSliderRef.current.value = String(newValue > to ? to : newValue);\n } else {\n toSliderRef.current.value = String(from <= newValue ? newValue : from);\n }\n },\n [normalizeIntervalValue, onChange, theme, updateFromValue, updateToValue],\n );\n\n useEffect(() => {\n if (shouldShowThumbLabel) {\n setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n }\n }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n /*\n This function sets the value\n /\n useEffect(() => {\n if (\n typeof value === 'number' &&\n value >= minValue &&\n value <= maxValue &&\n (typeof minEnabledValue !== 'number' \|\| value >= minEnabledValue) &&\n (typeof maxEnabledValue !== 'number' \|\| value <= maxEnabledValue)\n ) {\n updateFromValue(value);\n }\n }, [maxEnabledValue, maxValue, minEnabledValue, minValue, updateFromValue, value]);\n\n useEffect(() => {\n if (fromValue > toValue) {\n updateFromValue(toValue);\n }\n\n if (toValue < fromValue) {\n updateToValue(fromValue);\n }\n }, [fromValue, toValue, updateFromValue, updateToValue]);\n\n const handleMouseUp = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n }, [interval, isDisabled, onSelect]);\n\n const handleControlFromSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n applyIntervalThumbChange('from', Number(event.target.value));\n },\n [applyIntervalThumbChange],\n );\n\n const handleControlToSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled) {\n return;\n }\n\n applyIntervalThumbChange('to', Number(event.target.value));\n },\n [applyIntervalThumbChange, isDisabled],\n );\n\n useEffect(() => {\n if (!fromSliderRef.current \|\| !toSliderRef.current \|\| !interval) {\n return;\n }\n\n updateFromValue(interval.minValue);\n updateToValue(interval.maxValue);\n\n fromSliderRef.current.value = String(interval.minValue);\n toSliderRef.current.value = String(interval.maxValue);\n\n fillSlider({\n fromSlider: fromSliderRef.current,\n toSlider: toSliderRef.current,\n theme,\n });\n // Note: An interval can't be in the deps because of rerender\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [theme]);\n\n /\n This function updates the value\n /\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled) {\n return;\n }\n\n // If interval mode is active, delegate to the \"from\" handler and return early\n if (interval) {\n handleControlFromSlider(event);\n\n return;\n }\n\n // Respect optionally enabled bounds in addition to absolute min/max\n const effectiveMin =\n typeof minEnabledValue === 'number'\n ? Math.max(minValue, minEnabledValue)\n : minValue;\n\n const effectiveMax =\n typeof maxEnabledValue === 'number'\n ? Math.min(maxValue, maxEnabledValue)\n : maxValue;\n\n let newValue = Number(event.target.value);\n\n // Clamp to effective range first\n if (Number.isNaN(newValue)) {\n newValue = effectiveMin;\n }\n\n if (newValue < effectiveMin) newValue = effectiveMin;\n else if (newValue > effectiveMax - (effectiveMax % step)) newValue = effectiveMax;\n else newValue = Math.round(newValue / step) step;\n\n if (typeof onChange === 'function' && newValue !== previousFromValueRef.current) {\n onChange(newValue);\n }\n\n updateFromValue(newValue);\n },\n [\n handleControlFromSlider,\n interval,\n isDisabled,\n maxEnabledValue,\n maxValue,\n minEnabledValue,\n minValue,\n onChange,\n step,\n updateFromValue,\n ],\n );\n\n const fromSliderThumbPosition = useMemo(() => {\n if (\n typeof fromSliderRef.current?.offsetWidth === 'number' &&\n typeof sliderWrapperSize?.width === 'number'\n ) {\n return calculateGradientOffset({\n maxValue,\n minValue,\n sliderWidth: fromSliderRef.current.offsetWidth,\n thumbWidth: 20,\n value: fromValue,\n wrapperWidth: sliderWrapperSize.width,\n });\n }\n\n return 0;\n }, [fromValue, maxValue, minValue, sliderWrapperSize?.width]);\n\n const toSliderThumbPosition = useMemo(() => {\n if (\n typeof toSliderRef.current?.offsetWidth === 'number' &&\n typeof sliderWrapperSize?.width === 'number'\n ) {\n return calculateGradientOffset({\n maxValue,\n minValue,\n sliderWidth: toSliderRef.current.offsetWidth,\n thumbWidth: 20,\n value: toValue,\n wrapperWidth: sliderWrapperSize.width,\n });\n }\n\n return 0;\n }, [maxValue, minValue, sliderWrapperSize?.width, toValue]);\n\n const toSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: toValue,\n popupWidth: thumbWidth,\n }),\n [maxValue, minValue, thumbWidth, toValue],\n );\n\n const fromSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: fromValue,\n popupWidth: thumbWidth,\n }),\n [fromValue, maxValue, minValue, thumbWidth],\n );\n\n const handleTouchStart = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n void setRefreshScrollEnabled(false);\n\n if (shouldShowThumbLabel) {\n setIsBigSlider(true);\n }\n }, [isDisabled, shouldShowThumbLabel]);\n\n const handleTouchEnd = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n void setRefreshScrollEnabled(true);\n\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n\n if (shouldShowThumbLabel) {\n setIsBigSlider(false);\n }\n }, [interval, isDisabled, onSelect, shouldShowThumbLabel]);\n\n const highlightedStepElements = useMemo(() => {\n const sliderWidth = fromSliderRef.current?.offsetWidth ?? 0;\n const wrapperWidth = sliderWrapperSize?.width ?? 0;\n\n if (!shouldHighlightSteps \|\| interval \|\| sliderWidth === 0 \|\| wrapperWidth === 0) {\n return null;\n }\n\n const elements: ReactNode[] = [];\n\n for (let i = minValue; i <= maxValue; i += step) {\n const isStepDisabled =\n (typeof minEnabledValue === 'number' && i < minEnabledValue) \|\|\n (typeof maxEnabledValue === 'number' && i > maxEnabledValue);\n\n const offset = (wrapperWidth - sliderWidth) / 2;\n const stepWidth = (sliderWidth / (maxValue - minValue)) * step;\n\n elements.push(\n <StyledHighlightedStep\n key={`step--${i}`}\n $isDisabled={isStepDisabled}\n $isFilled={i < fromValue}\n $leftPosition={offset + stepWidth * i}\n />,\n );\n }\n\n return elements;\n }, [\n fromValue,\n interval,\n maxEnabledValue,\n maxValue,\n minEnabledValue,\n minValue,\n shouldHighlightSteps,\n sliderWrapperSize?.width,\n step,\n ]);\n\n const fromInputBackground = useMemo(() => {\n if (interval) return undefined;\n\n const gradientPoints: string[] = [];\n\n const getPercentage = (x: number) => ((x - minValue) / (maxValue - minValue)) * 100;\n\n if (typeof minEnabledValue === 'number') {\n gradientPoints.push('rgb(215, 215, 215) 0%');\n gradientPoints.push(`rgb(215, 215, 215) ${getPercentage(minEnabledValue)}%`);\n gradientPoints.push(`${theme['409'] ?? ''} ${getPercentage(minEnabledValue)}%`);\n } else {\n gradientPoints.push(`${theme['409'] ?? ''} 0%`);\n }\n\n gradientPoints.push(`${theme['409'] ?? ''} ${getPercentage(fromValue)}%`);\n gradientPoints.push(`${theme['403'] ?? ''} ${getPercentage(fromValue)}%`);\n\n if (typeof maxEnabledValue === 'number') {\n gradientPoints.push(`${theme['403'] ?? ''} ${getPercentage(maxEnabledValue)}%`);\n gradientPoints.push(`rgb(215, 215, 215) ${getPercentage(maxEnabledValue)}%`);\n gradientPoints.push('rgb(215, 215, 215) 100%');\n } else {\n gradientPoints.push(`${theme['403'] ?? ''} 100%`);\n }\n\n return `linear-gradient(to right, ${gradientPoints.join(', ')})`;\n }, [fromValue, interval, maxEnabledValue, maxValue, minEnabledValue, minValue, theme]);\n\n return useMemo(\n () => (\n <StyledSlider ref={sliderWrapperRef} $isDisabled={isDisabled}>\n {highlightedStepElements}\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n ref={fromSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={fromValue}\n step={step}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleInputChange}\n onMouseUp={handleMouseUp}\n $background={fromInputBackground}\n onFocus={() => {\n setIsFromThumbFocused(true);\n setIsToThumbFocused(false);\n }}\n onBlur={() => {\n setIsFromThumbFocused(false);\n }}\n />\n <StyledSliderThumb\n ref={fromSliderThumbRef}\n $position={fromSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={fromSliderThumbContentPosition}\n ref={fromSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(fromValue)\n : fromValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n {interval && (\n <StyledSliderThumb\n ref={toSliderThumbRef}\n $position={toSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={toSliderThumbContentPosition}\n ref={toSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(toValue)\n : toValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n )}\n {interval && (\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n ref={toSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={toValue}\n step={step}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleControlToSlider}\n onMouseUp={handleMouseUp}\n onFocus={() => {\n setIsToThumbFocused(true);\n setIsFromThumbFocused(false);\n }}\n onBlur={() => {\n setIsToThumbFocused(false);\n }}\n />\n )}\n </StyledSlider>\n ),\n [\n fromInputBackground,\n fromSliderThumbContentPosition,\n fromSliderThumbPosition,\n fromValue,\n handleControlToSlider,\n handleInputChange,\n handleMouseUp,\n handleTouchEnd,\n handleTouchStart,\n highlightedStepElements,\n interval,\n isBigSlider,\n isDisabled,\n isFromThumbFocused,\n isToThumbFocused,\n maxValue,\n minValue,\n shouldShowThumbLabel,\n shouldShowKeyboardHighlighting,\n thumbLabelFormatter,\n thumbWidth,\n toSliderThumbContentPosition,\n toSliderThumbPosition,\n toValue,\n ],\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/slider/Slider.styles.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { motion } from 'motion/react';
-import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingCircleRingCss } from '../../utils/keyboardFocusHighlighting.styles';
+import styled from 'styled-components';
 export const StyledSlider = styled.div`
     width: 100%;
     height: 30px;
@@ -85,12 +84,6 @@ export const StyledSliderThumb = styled.div.attrs(({
     white-space: nowrap;
     top: 5px;
-    ${({
-  $shouldShowFocusRing
-}) => $shouldShowFocusRing && css`
-            ${keyboardFocusHighlightingCircleRingCss}
-        `}
     transition: top 0.2s ease 0s;
 `;
 export const StyledSliderThumbLabel = styled.span.attrs(({

package/lib/esm/components/slider/Slider.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.styles.js","names":["motion","styled","~~css","keyboardFocusHighlightingCircleRingCss","~~StyledSlider","div","$isDisabled","StyledSliderInput","input","attrs","$background","$isInterval","$thumbWidth","style","pointerEvents","width","background","StyledSliderThumb","$position","$isBigSlider","left","height","~~$shouldShowFocusRing","~~StyledSliderThumbLabel","span","$width","minWidth","top","StyledHighlightedStep","$isFilled","theme","$leftPosition"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\~~nimport { keyboardFocusHighlightingCircleRingCss } from '../../utils/keyboardFocusHighlighting.styles';\~~n\ntype StyledSliderProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSlider = styled.div<StyledSliderProps>`\n width: 100%;\n height: 30px;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')} !important;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: none;\n user-select: none;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $background?: string;\n $isInterval: boolean;\n $thumbWidth: number;\n ~~$shouldShowKeyboardHighlighting?: boolean;\n~~}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n ({ $background, $isInterval, $thumbWidth }) => ({\n style: {\n pointerEvents: $isInterval ? 'none' : 'all',\n width: `calc(100% - ${$thumbWidth}px)`,\n background: $background,\n },\n }),\n)`\n position: absolute;\n border-radius: 100px;\n -webkit-appearance: none;\n\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n\n &::-moz-range-thumb {\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n $position: number;\n $isBigSlider: boolean;\n ~~$shouldShowFocusRing?: boolean;\n~~}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n ({ $position, $isBigSlider }) => ({\n style: {\n left: `${$position}px`,\n height: `${$isBigSlider ? 0 : 20}px`,\n },\n }),\n)`\n width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 100px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 5;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n top: 5px;\n\n ~~${({ $shouldShowFocusRing }) =>\n $shouldShowFocusRing &&\n css`\n ${keyboardFocusHighlightingCircleRingCss}\n `}\n\n~~ transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n $position: number;\n $width: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n ({ $position, $isBigSlider, $width }) => ({\n style: {\n minWidth: `${$width}px`,\n top: `-${$isBigSlider ? 56 : 48}px`,\n left: `${$position}px`,\n },\n }),\n)`\n pointer-events: none;\n color: #222;\n\n height: 20px;\n cursor: pointer;\n border-radius: 3px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n white-space: nowrap;\n\n transition: top 0.2s ease 0s;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n left: ${({ $position }) => $position * -1}px;\n transform: rotate(225deg);\n bottom: -7px;\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n border-radius: 3px;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledHighlightedStepProps = WithTheme<{\n $isDisabled: boolean;\n $isFilled: boolean;\n $leftPosition: number;\n}>;\n\nexport const StyledHighlightedStep = styled.div<StyledHighlightedStepProps>`\n background-color: ${({ $isDisabled, $isFilled, theme }) => {\n if ($isDisabled) return 'rgb(215, 215, 215)';\n if ($isFilled) return theme['409'];\n return theme['403'];\n }};\n border-radius: 50%;\n height: 18px;\n left: ${({ $leftPosition }) => $leftPosition}px;\n pointer-events: none;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 18px;\n z-index: 3;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,~~IAAIC~~,~~GAAG,QAAQ,~~mBAAmB;~~AAE~~/C,~~SAASC,sCAAsC,QAAQ,8CAA8C;AAIrG,~~OAAO,MAAMC,YAAY,~~GAAGH~~,MAAM,~~CAACI~~,GAAsB;AACzD;AACA;AACA,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D,CAAC;~~AASD~~,OAAO,MAAMC,iBAAiB,~~GAAGN~~,MAAM,CAACD,MAAM,~~CAACQ~~,KAAK,CAAC,CAACC,KAAK,CACvD,CAAC;EAAEC,WAAW;EAAEC,WAAW;EAAEC;AAAY,CAAC,MAAM;EAC5CC,KAAK,EAAE;IACHC,aAAa,EAAEH,WAAW,GAAG,MAAM,GAAG,KAAK;IAC3CI,KAAK,EAAE,eAAeH,WAAW,KAAK;IACtCI,UAAU,EAAEN;EAChB;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;~~AAQD~~,OAAO,MAAMO,iBAAiB,~~GAAGhB~~,MAAM,~~CAACI~~,GAAG,CAACI,KAAK,CAC7C,CAAC;EAAES,SAAS;EAAEC;AAAa,CAAC,MAAM;EAC9BN,KAAK,EAAE;IACHO,IAAI,EAAE,GAAGF,SAAS,IAAI;IACtBG,MAAM,EAAE,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;EACpC;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA~~,MAAM,CAAC~~;~~EAAEG;AAAqB,CAAC,KACvBA,oBAAoB,IACpBpB,GAAG;AACX,cAAcC,sCAAsC;AACpD,SAAS;AACT;~~AACA~~;AACA~~,CAAC;AAQD,OAAO,~~MAAMoB~~,sBAAsB,~~GAAGtB~~,MAAM,~~CAACuB~~,IAAI,~~CAACf~~,KAAK,CACnD,CAAC;EAAES,SAAS;EAAEC,YAAY;~~EAAEM~~;AAAO,CAAC,MAAM;~~EACtCZ~~,KAAK,EAAE;~~IACHa~~,QAAQ,EAAE,GAAGD,MAAM,IAAI;IACvBE,GAAG,EAAE,~~IAAIR~~,YAAY,GAAG,EAAE,GAAG,EAAE,IAAI;IACnCC,IAAI,EAAE,GAAGF,SAAS;EACtB;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB,CAAC;EAAEA;AAAU,CAAC,KAAKA,SAAS,GAAG,CAAC,CAAC;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,~~MAAMU~~,qBAAqB,~~GAAG3B~~,MAAM,~~CAACI~~,GAA+B;AAC3E,wBAAwB,CAAC;EAAEC,WAAW;~~EAAEuB~~,SAAS;EAAEC;AAAM,CAAC,KAAK;EACvD,~~IAAIxB~~,WAAW,EAAE,OAAO,oBAAoB;EAC5C,~~IAAIuB~~,SAAS,EAAE,OAAOC,KAAK,CAAC,KAAK,CAAC;EAClC,OAAOA,KAAK,CAAC,KAAK,CAAC;AACvB,CAAC;AACL;AACA;AACA,YAAY,CAAC;EAAEC;AAAc,CAAC,KAAKA,aAAa;AAChD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Slider.styles.js","names":["motion","styled","StyledSlider","div","$isDisabled","StyledSliderInput","input","attrs","$background","$isInterval","$thumbWidth","style","pointerEvents","width","background","StyledSliderThumb","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","$width","minWidth","top","StyledHighlightedStep","$isFilled","theme","$leftPosition"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSlider = styled.div<StyledSliderProps>`\n width: 100%;\n height: 30px;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')} !important;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: none;\n user-select: none;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $background?: string;\n $isInterval: boolean;\n $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n ({ $background, $isInterval, $thumbWidth }) => ({\n style: {\n pointerEvents: $isInterval ? 'none' : 'all',\n width: `calc(100% - ${$thumbWidth}px)`,\n background: $background,\n },\n }),\n)`\n position: absolute;\n border-radius: 100px;\n -webkit-appearance: none;\n\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n\n &::-moz-range-thumb {\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n $position: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n ({ $position, $isBigSlider }) => ({\n style: {\n left: `${$position}px`,\n height: `${$isBigSlider ? 0 : 20}px`,\n },\n }),\n)`\n width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 100px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 5;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n top: 5px;\n\n transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n $position: number;\n $width: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n ({ $position, $isBigSlider, $width }) => ({\n style: {\n minWidth: `${$width}px`,\n top: `-${$isBigSlider ? 56 : 48}px`,\n left: `${$position}px`,\n },\n }),\n)`\n pointer-events: none;\n color: #222;\n\n height: 20px;\n cursor: pointer;\n border-radius: 3px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n white-space: nowrap;\n\n transition: top 0.2s ease 0s;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n left: ${({ $position }) => $position * -1}px;\n transform: rotate(225deg);\n bottom: -7px;\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n border-radius: 3px;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledHighlightedStepProps = WithTheme<{\n $isDisabled: boolean;\n $isFilled: boolean;\n $leftPosition: number;\n}>;\n\nexport const StyledHighlightedStep = styled.div<StyledHighlightedStepProps>`\n background-color: ${({ $isDisabled, $isFilled, theme }) => {\n if ($isDisabled) return 'rgb(215, 215, 215)';\n if ($isFilled) return theme['409'];\n return theme['403'];\n }};\n border-radius: 50%;\n height: 18px;\n left: ${({ $leftPosition }) => $leftPosition}px;\n pointer-events: none;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 18px;\n z-index: 3;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAe,mBAAmB;AAK/C,OAAO,MAAMC,YAAY,GAAGD,MAAM,CAACE,GAAsB;AACzD;AACA;AACA,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D,CAAC;AAQD,OAAO,MAAMC,iBAAiB,GAAGJ,MAAM,CAACD,MAAM,CAACM,KAAK,CAAC,CAACC,KAAK,CACvD,CAAC;EAAEC,WAAW;EAAEC,WAAW;EAAEC;AAAY,CAAC,MAAM;EAC5CC,KAAK,EAAE;IACHC,aAAa,EAAEH,WAAW,GAAG,MAAM,GAAG,KAAK;IAC3CI,KAAK,EAAE,eAAeH,WAAW,KAAK;IACtCI,UAAU,EAAEN;EAChB;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMO,iBAAiB,GAAGd,MAAM,CAACE,GAAG,CAACI,KAAK,CAC7C,CAAC;EAAES,SAAS;EAAEC;AAAa,CAAC,MAAM;EAC9BN,KAAK,EAAE;IACHO,IAAI,EAAE,GAAGF,SAAS,IAAI;IACtBG,MAAM,EAAE,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;EACpC;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMG,sBAAsB,GAAGnB,MAAM,CAACoB,IAAI,CAACd,KAAK,CACnD,CAAC;EAAES,SAAS;EAAEC,YAAY;EAAEK;AAAO,CAAC,MAAM;EACtCX,KAAK,EAAE;IACHY,QAAQ,EAAE,GAAGD,MAAM,IAAI;IACvBE,GAAG,EAAE,IAAIP,YAAY,GAAG,EAAE,GAAG,EAAE,IAAI;IACnCC,IAAI,EAAE,GAAGF,SAAS;EACtB;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB,CAAC;EAAEA;AAAU,CAAC,KAAKA,SAAS,GAAG,CAAC,CAAC;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMS,qBAAqB,GAAGxB,MAAM,CAACE,GAA+B;AAC3E,wBAAwB,CAAC;EAAEC,WAAW;EAAEsB,SAAS;EAAEC;AAAM,CAAC,KAAK;EACvD,IAAIvB,WAAW,EAAE,OAAO,oBAAoB;EAC5C,IAAIsB,SAAS,EAAE,OAAOC,KAAK,CAAC,KAAK,CAAC;EAClC,OAAOA,KAAK,CAAC,KAAK,CAAC;AACvB,CAAC;AACL;AACA;AACA,YAAY,CAAC;EAAEC;AAAc,CAAC,KAAKA,aAAa;AAChD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/slider-button/SliderButton.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { setRefreshScrollEnabled } from 'chayns-api';
 import { AnimatePresence, useAnimate } from 'motion/react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useElementSize } from '../../hooks/element';
+import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
 import { calculateBiggestWidth } from '../../utils/calculate';
@@ -42,6 +43,10 @@ const SliderButton = ({
   const colorScheme = useColorScheme();
   const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlightingEffective && !isDisabled);
+  useFocusRingPortal(scope, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    shape: isRounded ? 'circle' : 'rectangle'
+  });
   const initialItemWidth = useMemo(() => calculateBiggestWidth(items), [items]);
   const elementSize = useElementSize(sliderButtonRef);
   useEffect(() => {
@@ -381,8 +386,7 @@ const SliderButton = ({
     "data-slider-button-thumb": "true",
     tabIndex: shouldEnableKeyboardHighlightingEffective && !isDisabled ? 0 : undefined,
     role: shouldEnableKeyboardHighlightingEffective && !isDisabled ? 'button' : undefined,
-    onKeyDown: shouldEnableKeyboardHighlightingEffective && !isDisabled ? handleThumbKeyDown : undefined,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+    onKeyDown: shouldEnableKeyboardHighlightingEffective && !isDisabled ? handleThumbKeyDown : undefined
   }), /*#__PURE__*/React.createElement(StyledSliderButtonWrapper, {
     $isRounded: isRounded,
     $isDisabled: isDisabled,

package/lib/esm/components/slider-button/SliderButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderButton.js","names":["setRefreshScrollEnabled","AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","useKeyboardFocusHighlighting","useColorScheme","calculateBiggestWidth","getNearestPoint","getThumbPosition","Icon","Popup","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonButtonsWrapper","StyledSliderButtonItem","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","StyledSliderButtonWrapper","useTheme","useSliderButtonPopupKeyboard","useSliderButtonThumbKeyboard","SliderButton","isDisabled","isSecondary","items","onChange","selectedButtonId","isRounded","shouldEnableKeyboardHighlighting","dragRange","setDragRange","left","right","shownItemsCount","setShownItemsCount","length","sliderSize","setSliderSize","width","currentId","setCurrentId","currentPopupId","setCurrentPopupId","currentIndex","setCurrentIndex","isPopupOpen","setIsPopupOpen","sliderButtonRef","sliderButtonWrapperRef","popupRef","popupItemRefs","scope","animate","theme","colorScheme","shouldEnableKeyboardHighlightingEffective","shouldShowKeyboardHighlighting","initialItemWidth","elementSize","setPopupId","selectedId","ids","slice","map","id","newId","find","isSliderBigger","Math","floor","maxShownItemsCount","totalWidth","count","visibleItems","currentMaxWidth","itemWidth","sliderWidth","itemCount","animation","x","current","type","duration","setItemPosition","index","findIndex","handleClick","otherItem","_","indexOf","show","hide","backgroundColor","color","buttonBackgroundColor","buttonDesign","thumbBackgroundColor","popupItems","focusThumb","thumb","querySelector","focus","handlePopupKeyDown","onSelectPopupItem","handleThumbKeyDown","onSelectThumbItem","buttons","newItems","otherItems","elements","text","createElement","$isSecondary","$width","key","onClick","popupContent","popupIndex","onKeyDown","ref","element","tabIndex","role","$isSelected","push","onShow","onHide","content","icons","pseudoButtons","snapPoints","points","i","handleDragStart","handleDragEnd","position","middle","scrollLeft","nearestPoint","nearestIndex","hasMoreItems","$isDisabled","$isInvisible","$isRounded","drag","dragElastic","dragConstraints","onDragEnd","onDragStart","style","undefined","$shouldShowKeyboardHighlighting","displayName"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport { AnimatePresence, useAnimate } from 'motion/react';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useElementSize } from '../../hooks/element';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { PopupRef } from '../../types/popup';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport Icon from '../icon/Icon';\nimport Popup from '../popup/Popup';\nimport {\n StyledMotionSliderButtonThumb,\n StyledSliderButton,\n StyledSliderButtonButtonsWrapper,\n StyledSliderButtonItem,\n StyledSliderButtonPopupContent,\n StyledSliderButtonPopupContentItem,\n StyledSliderButtonWrapper,\n} from './SliderButton.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { SliderButtonProps } from './SliderButton.types';\nimport { useSliderButtonPopupKeyboard } from './useSliderButtonPopupKeyboard';\nimport { useSliderButtonThumbKeyboard } from './useSliderButtonThumbKeyboard';\n\nconst SliderButton: FC<SliderButtonProps> = ({\n isDisabled,\n isSecondary,\n items,\n onChange,\n selectedButtonId,\n isRounded = false,\n shouldEnableKeyboardHighlighting,\n}) => {\n const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n const [shownItemsCount, setShownItemsCount] = useState(items.length);\n const [sliderSize, setSliderSize] = useState({ width: 0 });\n const [currentId, setCurrentId] = useState('');\n const [currentPopupId, setCurrentPopupId] = useState('');\n const [currentIndex, setCurrentIndex] = useState(0);\n const [isPopupOpen, setIsPopupOpen] = useState(false);\n\n const sliderButtonRef = useRef<HTMLDivElement>(null);\n const sliderButtonWrapperRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<PopupRef>(null);\n const popupItemRefs = useRef<Array<HTMLDivElement \| null>>([]);\n\n const [scope, animate] = useAnimate();\n\n const theme = useTheme() as Theme;\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlightingEffective && !isDisabled,\n );\n\n const initialItemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n const elementSize = useElementSize(sliderButtonRef);\n\n useEffect(() => {\n if (elementSize) setSliderSize(elementSize);\n }, [elementSize]);\n\n const setPopupId = useCallback(\n (selectedId: string) => {\n const ids = items.slice(shownItemsCount - 1).map(({ id }) => id);\n\n const newId = ids.find((id) => id === selectedId);\n\n if (newId) {\n setCurrentId('more');\n setCurrentPopupId(newId);\n\n return;\n }\n\n setCurrentId(selectedId);\n },\n [items, shownItemsCount],\n );\n\n const isSliderBigger = useMemo(\n () => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1,\n [initialItemWidth, items.length, sliderSize],\n );\n\n const maxShownItemsCount = useMemo(() => {\n let totalWidth = 0;\n let count = 0;\n\n while (count < items.length) {\n const visibleItems = items.slice(0, count + 1);\n const currentMaxWidth = calculateBiggestWidth(visibleItems) + 8;\n\n if (totalWidth + currentMaxWidth > sliderSize.width) break;\n\n totalWidth += currentMaxWidth;\n count++;\n }\n\n return count;\n }, [items, sliderSize.width]);\n\n const itemWidth = useMemo(() => {\n const sliderWidth = sliderSize?.width \|\| 0;\n const itemCount = items.length \|\| 1;\n\n setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);\n\n return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);\n }, [isSliderBigger, items.length, maxShownItemsCount, sliderSize?.width]);\n\n useEffect(() => {\n if (sliderSize) {\n const sliderWidth = itemWidth * (items.length - 1);\n\n const count = Math.floor(sliderSize.width / itemWidth);\n\n setDragRange({ left: 0, right: isSliderBigger ? itemWidth * count : sliderWidth });\n }\n }, [isSliderBigger, itemWidth, items.length, sliderSize]);\n\n const animation = useCallback(\n async (x: number) => {\n await animate(\n scope.current,\n { x },\n {\n type: 'tween',\n duration: 0.2,\n },\n );\n },\n [animate, scope],\n );\n\n const setItemPosition = useCallback(\n (index: number) => {\n setCurrentIndex(index);\n\n void animation(itemWidth * index);\n },\n [animation, itemWidth],\n );\n\n useEffect(() => {\n if (typeof selectedButtonId === 'string') {\n let index = items.findIndex(({ id }) => id === selectedButtonId);\n\n setCurrentId(selectedButtonId);\n\n setPopupId(selectedButtonId);\n\n if (items.length > shownItemsCount && index > shownItemsCount - 1) {\n index = shownItemsCount - 1;\n }\n\n if (index >= 0) {\n setItemPosition(index);\n }\n }\n }, [\n animation,\n dragRange.right,\n isSliderBigger,\n itemWidth,\n items,\n selectedButtonId,\n setItemPosition,\n setPopupId,\n shownItemsCount,\n ]);\n\n const handleClick = useCallback(\n (id: string, index: number) => {\n if (isDisabled) {\n return;\n }\n\n if (currentIndex === index && items.length === 2) {\n const otherItem = items.find((_, findIndex) => index !== findIndex);\n if (!otherItem) return;\n\n setPopupId(otherItem.id);\n setItemPosition(items.indexOf(otherItem));\n onChange?.(otherItem.id);\n return;\n }\n\n setPopupId(id);\n\n if (typeof onChange === 'function' && id !== 'more') {\n onChange(id);\n }\n\n if (popupRef.current) {\n if (id === 'more') {\n popupRef.current.show();\n } else {\n popupRef.current.hide();\n }\n }\n\n setItemPosition(index);\n },\n [currentIndex, isDisabled, items, onChange, setItemPosition, setPopupId],\n );\n\n const backgroundColor = useMemo(() => {\n let color;\n\n if (isSecondary) {\n color = theme['202'];\n } else {\n color = theme.buttonBackgroundColor ?? theme['408'];\n }\n\n if (theme.buttonDesign === '2') {\n color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n }\n\n return color;\n }, [isSecondary, theme]);\n\n const thumbBackgroundColor = useMemo(() => {\n let color;\n\n if (isSecondary) {\n color = theme['207'];\n } else {\n color = `rgba(${theme['405-rgb'] ?? ''}, 0.75)`;\n }\n\n if (theme.buttonDesign === '2') {\n color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n }\n\n return color;\n }, [isSecondary, theme]);\n\n const popupItems = useMemo(() => items.slice(shownItemsCount - 1), [items, shownItemsCount]);\n\n const focusThumb = useCallback(() => {\n const thumb = sliderButtonRef.current?.querySelector(\n '[data-slider-button-thumb=\"true\"]',\n ) as HTMLDivElement \| null;\n\n thumb?.focus();\n }, []);\n\n const { handlePopupKeyDown } = useSliderButtonPopupKeyboard({\n isPopupOpen,\n popupItems,\n currentPopupId,\n shownItemsCount,\n popupItemRefs,\n popupRef,\n focusThumb,\n onSelectPopupItem: handleClick,\n });\n\n const { handleThumbKeyDown } = useSliderButtonThumbKeyboard({\n currentId,\n currentIndex,\n shownItemsCount,\n items,\n onSelectThumbItem: handleClick,\n });\n\n const buttons = useMemo(() => {\n if (items.length > shownItemsCount) {\n const newItems = items.slice(0, shownItemsCount - 1);\n const otherItems = items.slice(shownItemsCount - 1);\n\n const elements = newItems.map(({ id, text }, index) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n\n const popupContent = otherItems.map(({ id, text }, popupIndex) => (\n <StyledSliderButtonPopupContentItem\n key={`slider-button-${id}`}\n onClick={() => handleClick(id, newItems.length)}\n onKeyDown={handlePopupKeyDown}\n ref={(element: HTMLDivElement \| null) => {\n popupItemRefs.current[popupIndex] = element;\n }}\n tabIndex={-1}\n role=\"button\"\n $isSelected={id === currentPopupId}\n >\n {text}\n </StyledSliderButtonPopupContentItem>\n ));\n\n const id = 'more';\n\n elements.push(\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`slider-button-${id}`}\n >\n <Popup\n ref={popupRef}\n onShow={() => {\n setIsPopupOpen(true);\n }}\n onHide={() => {\n setIsPopupOpen(false);\n popupItemRefs.current = [];\n }}\n content={\n <StyledSliderButtonPopupContent onKeyDown={handlePopupKeyDown}>\n {popupContent}\n </StyledSliderButtonPopupContent>\n }\n >\n <Icon icons={['fa fa-ellipsis']} color=\"white\" />\n </Popup>\n </StyledSliderButtonItem>,\n );\n\n return elements;\n }\n return items.map(({ id, text }) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`slider-button-${id}`}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n }, [\n currentPopupId,\n handleClick,\n handlePopupKeyDown,\n isSecondary,\n itemWidth,\n items,\n shownItemsCount,\n ]);\n\n const pseudoButtons = useMemo(() => {\n if (items.length > shownItemsCount) {\n const newItems = items.slice(0, shownItemsCount - 1);\n\n const elements = newItems.map(({ id, text }, index) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`pseudo-slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n\n const id = 'more';\n\n elements.push(\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`pseudo-slider-button-${id}`}\n onClick={() => handleClick(id, newItems.length)}\n >\n <Icon icons={['fa fa-ellipsis']} />\n </StyledSliderButtonItem>,\n );\n\n return elements;\n }\n return items.map(({ id, text }, index) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`pseudo-slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n }, [handleClick, isSecondary, itemWidth, items, shownItemsCount]);\n\n /*\n Creates an array with the snap points relative to the width of the items\n /\n const snapPoints = useMemo(() => {\n const points = [0];\n\n for (let i = 1; i < items.length; i++) {\n points.push(itemWidth i);\n }\n\n return points;\n }, [itemWidth, items.length]);\n\n const handleDragStart = useCallback(() => {\n void setRefreshScrollEnabled(false);\n }, []);\n\n const handleDragEnd = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n const position = getThumbPosition({ scope, itemWidth });\n\n if (!position) {\n return;\n }\n\n const { middle, left } = position;\n\n let scrollLeft = 0;\n\n if (sliderButtonWrapperRef.current) {\n scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n\n sliderButtonWrapperRef.current.scrollLeft = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft: scrollLeft - left,\n }).nearestPoint;\n }\n\n const { nearestIndex } = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft,\n });\n\n const { nearestPoint } = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft: 0,\n });\n const hasMoreItems = items.length > shownItemsCount;\n\n if (nearestPoint >= 0 && nearestIndex >= 0) {\n void animation(nearestPoint);\n\n let id;\n\n if (hasMoreItems && nearestIndex === shownItemsCount - 1) {\n id = 'more';\n } else {\n id = items[nearestIndex]?.id;\n }\n\n if (popupRef.current) {\n if (id === 'more') {\n popupRef.current.show();\n } else {\n popupRef.current.hide();\n }\n }\n\n if (typeof onChange === 'function' && id) {\n setPopupId(id);\n setCurrentIndex(nearestIndex);\n if (id !== 'more') onChange(id);\n }\n }\n }, [animation, itemWidth, items, onChange, scope, setPopupId, shownItemsCount, snapPoints]);\n\n return useMemo(\n () => (\n <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n <StyledSliderButtonButtonsWrapper $isInvisible>\n {pseudoButtons}\n </StyledSliderButtonButtonsWrapper>\n <StyledMotionSliderButtonThumb\n $isRounded={isRounded}\n ref={scope}\n drag={isDisabled ? false : 'x'}\n dragElastic={0}\n dragConstraints={\n isSliderBigger\n ? { ...dragRange, right: dragRange.right - itemWidth }\n : { ...dragRange }\n }\n $width={itemWidth}\n onDragEnd={handleDragEnd}\n onDragStart={handleDragStart}\n onClick={() => handleClick(currentId, currentIndex)}\n style={{ backgroundColor: thumbBackgroundColor }}\n data-slider-button-thumb=\"true\"\n tabIndex={\n shouldEnableKeyboardHighlightingEffective && !isDisabled ? 0 : undefined\n }\n role={\n shouldEnableKeyboardHighlightingEffective && !isDisabled\n ? 'button'\n : undefined\n }\n onKeyDown={\n shouldEnableKeyboardHighlightingEffective && !isDisabled\n ? handleThumbKeyDown\n : undefined\n }\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n />\n <StyledSliderButtonWrapper\n $isRounded={isRounded}\n $isDisabled={isDisabled}\n $width={!isSliderBigger ? dragRange.right + itemWidth : dragRange.right}\n ref={sliderButtonWrapperRef}\n style={{ backgroundColor }}\n >\n <AnimatePresence>\n <StyledSliderButtonButtonsWrapper>\n {buttons}\n </StyledSliderButtonButtonsWrapper>\n </AnimatePresence>\n </StyledSliderButtonWrapper>\n </StyledSliderButton>\n ),\n [\n backgroundColor,\n buttons,\n currentId,\n currentIndex,\n dragRange,\n handleClick,\n handleDragEnd,\n handleDragStart,\n handleThumbKeyDown,\n isDisabled,\n isRounded,\n isSliderBigger,\n itemWidth,\n pseudoButtons,\n scope,\n shouldEnableKeyboardHighlightingEffective,\n shouldShowKeyboardHighlighting,\n thumbBackgroundColor,\n ],\n );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"SliderButton.js","names":["setRefreshScrollEnabled","AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","useFocusRingPortal","useKeyboardFocusHighlighting","useColorScheme","calculateBiggestWidth","getNearestPoint","getThumbPosition","Icon","Popup","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonButtonsWrapper","StyledSliderButtonItem","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","StyledSliderButtonWrapper","useTheme","useSliderButtonPopupKeyboard","useSliderButtonThumbKeyboard","SliderButton","isDisabled","isSecondary","items","onChange","selectedButtonId","isRounded","shouldEnableKeyboardHighlighting","dragRange","setDragRange","left","right","shownItemsCount","setShownItemsCount","length","sliderSize","setSliderSize","width","currentId","setCurrentId","currentPopupId","setCurrentPopupId","currentIndex","setCurrentIndex","isPopupOpen","setIsPopupOpen","sliderButtonRef","sliderButtonWrapperRef","popupRef","popupItemRefs","scope","animate","theme","colorScheme","shouldEnableKeyboardHighlightingEffective","shouldShowKeyboardHighlighting","isEnabled","shape","initialItemWidth","elementSize","setPopupId","selectedId","ids","slice","map","id","newId","find","isSliderBigger","Math","floor","maxShownItemsCount","totalWidth","count","visibleItems","currentMaxWidth","itemWidth","sliderWidth","itemCount","animation","x","current","type","duration","setItemPosition","index","findIndex","handleClick","otherItem","_","indexOf","show","hide","backgroundColor","color","buttonBackgroundColor","buttonDesign","thumbBackgroundColor","popupItems","focusThumb","thumb","querySelector","focus","handlePopupKeyDown","onSelectPopupItem","handleThumbKeyDown","onSelectThumbItem","buttons","newItems","otherItems","elements","text","createElement","$isSecondary","$width","key","onClick","popupContent","popupIndex","onKeyDown","ref","element","tabIndex","role","$isSelected","push","onShow","onHide","content","icons","pseudoButtons","snapPoints","points","i","handleDragStart","handleDragEnd","position","middle","scrollLeft","nearestPoint","nearestIndex","hasMoreItems","$isDisabled","$isInvisible","$isRounded","drag","dragElastic","dragConstraints","onDragEnd","onDragStart","style","undefined","displayName"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport { AnimatePresence, useAnimate } from 'motion/react';\nimport type { RefObject } from 'react';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useElementSize } from '../../hooks/element';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { PopupRef } from '../../types/popup';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport Icon from '../icon/Icon';\nimport Popup from '../popup/Popup';\nimport {\n StyledMotionSliderButtonThumb,\n StyledSliderButton,\n StyledSliderButtonButtonsWrapper,\n StyledSliderButtonItem,\n StyledSliderButtonPopupContent,\n StyledSliderButtonPopupContentItem,\n StyledSliderButtonWrapper,\n} from './SliderButton.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { SliderButtonProps } from './SliderButton.types';\nimport { useSliderButtonPopupKeyboard } from './useSliderButtonPopupKeyboard';\nimport { useSliderButtonThumbKeyboard } from './useSliderButtonThumbKeyboard';\n\nconst SliderButton: FC<SliderButtonProps> = ({\n isDisabled,\n isSecondary,\n items,\n onChange,\n selectedButtonId,\n isRounded = false,\n shouldEnableKeyboardHighlighting,\n}) => {\n const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n const [shownItemsCount, setShownItemsCount] = useState(items.length);\n const [sliderSize, setSliderSize] = useState({ width: 0 });\n const [currentId, setCurrentId] = useState('');\n const [currentPopupId, setCurrentPopupId] = useState('');\n const [currentIndex, setCurrentIndex] = useState(0);\n const [isPopupOpen, setIsPopupOpen] = useState(false);\n\n const sliderButtonRef = useRef<HTMLDivElement>(null);\n const sliderButtonWrapperRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<PopupRef>(null);\n const popupItemRefs = useRef<Array<HTMLDivElement \| null>>([]);\n\n const [scope, animate] = useAnimate();\n\n const theme = useTheme() as Theme;\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlightingEffective && !isDisabled,\n );\n useFocusRingPortal(scope as RefObject<HTMLElement>, {\n isEnabled: shouldShowKeyboardHighlighting,\n shape: isRounded ? 'circle' : 'rectangle',\n });\n\n const initialItemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n const elementSize = useElementSize(sliderButtonRef);\n\n useEffect(() => {\n if (elementSize) setSliderSize(elementSize);\n }, [elementSize]);\n\n const setPopupId = useCallback(\n (selectedId: string) => {\n const ids = items.slice(shownItemsCount - 1).map(({ id }) => id);\n\n const newId = ids.find((id) => id === selectedId);\n\n if (newId) {\n setCurrentId('more');\n setCurrentPopupId(newId);\n\n return;\n }\n\n setCurrentId(selectedId);\n },\n [items, shownItemsCount],\n );\n\n const isSliderBigger = useMemo(\n () => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1,\n [initialItemWidth, items.length, sliderSize],\n );\n\n const maxShownItemsCount = useMemo(() => {\n let totalWidth = 0;\n let count = 0;\n\n while (count < items.length) {\n const visibleItems = items.slice(0, count + 1);\n const currentMaxWidth = calculateBiggestWidth(visibleItems) + 8;\n\n if (totalWidth + currentMaxWidth > sliderSize.width) break;\n\n totalWidth += currentMaxWidth;\n count++;\n }\n\n return count;\n }, [items, sliderSize.width]);\n\n const itemWidth = useMemo(() => {\n const sliderWidth = sliderSize?.width \|\| 0;\n const itemCount = items.length \|\| 1;\n\n setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);\n\n return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);\n }, [isSliderBigger, items.length, maxShownItemsCount, sliderSize?.width]);\n\n useEffect(() => {\n if (sliderSize) {\n const sliderWidth = itemWidth * (items.length - 1);\n\n const count = Math.floor(sliderSize.width / itemWidth);\n\n setDragRange({ left: 0, right: isSliderBigger ? itemWidth * count : sliderWidth });\n }\n }, [isSliderBigger, itemWidth, items.length, sliderSize]);\n\n const animation = useCallback(\n async (x: number) => {\n await animate(\n scope.current,\n { x },\n {\n type: 'tween',\n duration: 0.2,\n },\n );\n },\n [animate, scope],\n );\n\n const setItemPosition = useCallback(\n (index: number) => {\n setCurrentIndex(index);\n\n void animation(itemWidth * index);\n },\n [animation, itemWidth],\n );\n\n useEffect(() => {\n if (typeof selectedButtonId === 'string') {\n let index = items.findIndex(({ id }) => id === selectedButtonId);\n\n setCurrentId(selectedButtonId);\n\n setPopupId(selectedButtonId);\n\n if (items.length > shownItemsCount && index > shownItemsCount - 1) {\n index = shownItemsCount - 1;\n }\n\n if (index >= 0) {\n setItemPosition(index);\n }\n }\n }, [\n animation,\n dragRange.right,\n isSliderBigger,\n itemWidth,\n items,\n selectedButtonId,\n setItemPosition,\n setPopupId,\n shownItemsCount,\n ]);\n\n const handleClick = useCallback(\n (id: string, index: number) => {\n if (isDisabled) {\n return;\n }\n\n if (currentIndex === index && items.length === 2) {\n const otherItem = items.find((_, findIndex) => index !== findIndex);\n if (!otherItem) return;\n\n setPopupId(otherItem.id);\n setItemPosition(items.indexOf(otherItem));\n onChange?.(otherItem.id);\n return;\n }\n\n setPopupId(id);\n\n if (typeof onChange === 'function' && id !== 'more') {\n onChange(id);\n }\n\n if (popupRef.current) {\n if (id === 'more') {\n popupRef.current.show();\n } else {\n popupRef.current.hide();\n }\n }\n\n setItemPosition(index);\n },\n [currentIndex, isDisabled, items, onChange, setItemPosition, setPopupId],\n );\n\n const backgroundColor = useMemo(() => {\n let color;\n\n if (isSecondary) {\n color = theme['202'];\n } else {\n color = theme.buttonBackgroundColor ?? theme['408'];\n }\n\n if (theme.buttonDesign === '2') {\n color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n }\n\n return color;\n }, [isSecondary, theme]);\n\n const thumbBackgroundColor = useMemo(() => {\n let color;\n\n if (isSecondary) {\n color = theme['207'];\n } else {\n color = `rgba(${theme['405-rgb'] ?? ''}, 0.75)`;\n }\n\n if (theme.buttonDesign === '2') {\n color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n }\n\n return color;\n }, [isSecondary, theme]);\n\n const popupItems = useMemo(() => items.slice(shownItemsCount - 1), [items, shownItemsCount]);\n\n const focusThumb = useCallback(() => {\n const thumb = sliderButtonRef.current?.querySelector(\n '[data-slider-button-thumb=\"true\"]',\n ) as HTMLDivElement \| null;\n\n thumb?.focus();\n }, []);\n\n const { handlePopupKeyDown } = useSliderButtonPopupKeyboard({\n isPopupOpen,\n popupItems,\n currentPopupId,\n shownItemsCount,\n popupItemRefs,\n popupRef,\n focusThumb,\n onSelectPopupItem: handleClick,\n });\n\n const { handleThumbKeyDown } = useSliderButtonThumbKeyboard({\n currentId,\n currentIndex,\n shownItemsCount,\n items,\n onSelectThumbItem: handleClick,\n });\n\n const buttons = useMemo(() => {\n if (items.length > shownItemsCount) {\n const newItems = items.slice(0, shownItemsCount - 1);\n const otherItems = items.slice(shownItemsCount - 1);\n\n const elements = newItems.map(({ id, text }, index) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n\n const popupContent = otherItems.map(({ id, text }, popupIndex) => (\n <StyledSliderButtonPopupContentItem\n key={`slider-button-${id}`}\n onClick={() => handleClick(id, newItems.length)}\n onKeyDown={handlePopupKeyDown}\n ref={(element: HTMLDivElement \| null) => {\n popupItemRefs.current[popupIndex] = element;\n }}\n tabIndex={-1}\n role=\"button\"\n $isSelected={id === currentPopupId}\n >\n {text}\n </StyledSliderButtonPopupContentItem>\n ));\n\n const id = 'more';\n\n elements.push(\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`slider-button-${id}`}\n >\n <Popup\n ref={popupRef}\n onShow={() => {\n setIsPopupOpen(true);\n }}\n onHide={() => {\n setIsPopupOpen(false);\n popupItemRefs.current = [];\n }}\n content={\n <StyledSliderButtonPopupContent onKeyDown={handlePopupKeyDown}>\n {popupContent}\n </StyledSliderButtonPopupContent>\n }\n >\n <Icon icons={['fa fa-ellipsis']} color=\"white\" />\n </Popup>\n </StyledSliderButtonItem>,\n );\n\n return elements;\n }\n return items.map(({ id, text }) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`slider-button-${id}`}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n }, [\n currentPopupId,\n handleClick,\n handlePopupKeyDown,\n isSecondary,\n itemWidth,\n items,\n shownItemsCount,\n ]);\n\n const pseudoButtons = useMemo(() => {\n if (items.length > shownItemsCount) {\n const newItems = items.slice(0, shownItemsCount - 1);\n\n const elements = newItems.map(({ id, text }, index) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`pseudo-slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n\n const id = 'more';\n\n elements.push(\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`pseudo-slider-button-${id}`}\n onClick={() => handleClick(id, newItems.length)}\n >\n <Icon icons={['fa fa-ellipsis']} />\n </StyledSliderButtonItem>,\n );\n\n return elements;\n }\n return items.map(({ id, text }, index) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`pseudo-slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n }, [handleClick, isSecondary, itemWidth, items, shownItemsCount]);\n\n /*\n Creates an array with the snap points relative to the width of the items\n /\n const snapPoints = useMemo(() => {\n const points = [0];\n\n for (let i = 1; i < items.length; i++) {\n points.push(itemWidth i);\n }\n\n return points;\n }, [itemWidth, items.length]);\n\n const handleDragStart = useCallback(() => {\n void setRefreshScrollEnabled(false);\n }, []);\n\n const handleDragEnd = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n const position = getThumbPosition({ scope, itemWidth });\n\n if (!position) {\n return;\n }\n\n const { middle, left } = position;\n\n let scrollLeft = 0;\n\n if (sliderButtonWrapperRef.current) {\n scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n\n sliderButtonWrapperRef.current.scrollLeft = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft: scrollLeft - left,\n }).nearestPoint;\n }\n\n const { nearestIndex } = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft,\n });\n\n const { nearestPoint } = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft: 0,\n });\n const hasMoreItems = items.length > shownItemsCount;\n\n if (nearestPoint >= 0 && nearestIndex >= 0) {\n void animation(nearestPoint);\n\n let id;\n\n if (hasMoreItems && nearestIndex === shownItemsCount - 1) {\n id = 'more';\n } else {\n id = items[nearestIndex]?.id;\n }\n\n if (popupRef.current) {\n if (id === 'more') {\n popupRef.current.show();\n } else {\n popupRef.current.hide();\n }\n }\n\n if (typeof onChange === 'function' && id) {\n setPopupId(id);\n setCurrentIndex(nearestIndex);\n if (id !== 'more') onChange(id);\n }\n }\n }, [animation, itemWidth, items, onChange, scope, setPopupId, shownItemsCount, snapPoints]);\n\n return useMemo(\n () => (\n <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n <StyledSliderButtonButtonsWrapper $isInvisible>\n {pseudoButtons}\n </StyledSliderButtonButtonsWrapper>\n <StyledMotionSliderButtonThumb\n $isRounded={isRounded}\n ref={scope}\n drag={isDisabled ? false : 'x'}\n dragElastic={0}\n dragConstraints={\n isSliderBigger\n ? { ...dragRange, right: dragRange.right - itemWidth }\n : { ...dragRange }\n }\n $width={itemWidth}\n onDragEnd={handleDragEnd}\n onDragStart={handleDragStart}\n onClick={() => handleClick(currentId, currentIndex)}\n style={{ backgroundColor: thumbBackgroundColor }}\n data-slider-button-thumb=\"true\"\n tabIndex={\n shouldEnableKeyboardHighlightingEffective && !isDisabled ? 0 : undefined\n }\n role={\n shouldEnableKeyboardHighlightingEffective && !isDisabled\n ? 'button'\n : undefined\n }\n onKeyDown={\n shouldEnableKeyboardHighlightingEffective && !isDisabled\n ? handleThumbKeyDown\n : undefined\n }\n />\n <StyledSliderButtonWrapper\n $isRounded={isRounded}\n $isDisabled={isDisabled}\n $width={!isSliderBigger ? dragRange.right + itemWidth : dragRange.right}\n ref={sliderButtonWrapperRef}\n style={{ backgroundColor }}\n >\n <AnimatePresence>\n <StyledSliderButtonButtonsWrapper>\n {buttons}\n </StyledSliderButtonButtonsWrapper>\n </AnimatePresence>\n </StyledSliderButtonWrapper>\n </StyledSliderButton>\n ),\n [\n backgroundColor,\n buttons,\n currentId,\n currentIndex,\n dragRange,\n handleClick,\n handleDragEnd,\n handleDragStart,\n handleThumbKeyDown,\n isDisabled,\n isRounded,\n isSliderBigger,\n itemWidth,\n pseudoButtons,\n scope,\n shouldEnableKeyboardHighlightingEffective,\n shouldShowKeyboardHighlighting,\n thumbBackgroundColor,\n ],\n );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/slider-button/SliderButton.styles.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { motion } from 'motion/react';
-import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
+import styled from 'styled-components';
 export const StyledSliderButton = styled.div`
     opacity: ${({
   $isDisabled
@@ -76,10 +75,6 @@ export const StyledSliderButtonPopupContentItem = styled.div`
   theme
 }) => $isSelected ? theme['secondary-102'] : undefined};
     padding: 4px 12px;
-    &:focus-visible {
-        ${keyboardFocusHighlightingRingCss};
-    }
 `;
 export const StyledSliderButtonButtonsWrapper = styled.div`
     position: absolute;
@@ -118,13 +113,5 @@ export const StyledMotionSliderButtonThumb = styled(motion.div)`
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `}
 `;
 //# sourceMappingURL=SliderButton.styles.js.map

package/lib/esm/components/slider-button/SliderButton.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderButton.styles.js","names":["motion","styled","~~css","keyboardFocusHighlightingRingCss","~~StyledSliderButton","div","$isDisabled","StyledSliderButtonWrapper","$isRounded","$width","StyledSliderButtonItem","$isSecondary","theme","text","buttonColor","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","$isSelected","undefined","StyledSliderButtonButtonsWrapper","$isInvisible","StyledMotionSliderButtonThumb"~~,"$shouldShowKeyboardHighlighting"~~],"sources":["../../../../src/components/slider-button/SliderButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\~~nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\~~n\ntype StyledSliderButtonProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSliderButton = styled.div<StyledSliderButtonProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n width: 100%;\n touch-action: none;\n position: relative;\n`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{\n $width: number;\n $isDisabled?: boolean;\n $isRounded: boolean;\n}>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n align-items: center;\n border-radius: ${({ $isRounded }) => ($isRounded ? 32 : 3)}px;\n border: none;\n color: white;\n cursor: pointer;\n display: inline-flex;\n line-height: 1.15;\n height: 32px;\n position: relative;\n user-select: none;\n transition: opacity 0.3s ease;\n\n width: ${({ $width }) => $width}px;\n\n max-width: 100%;\n overflow-x: ${({ $isDisabled }) => ($isDisabled ? 'hidden' : 'scroll')};\n overflow-y: hidden;\n\n // Chrome\n &::-webkit-scrollbar {\n display: none;\n }\n\n // IE and Edge\n -ms-overflow-style: none;\n\n // Firefox\n scrollbar-width: none;\n`;\n\ntype StyledSliderButtonItemProps = WithTheme<{\n $isSecondary?: boolean;\n $width: number;\n}>;\n\nexport const StyledSliderButtonItem = styled.div<StyledSliderButtonItemProps>`\n font-size: 110%;\n font-family: 'Roboto Medium', serif;\n padding: 7px 12px;\n min-width: ${({ $width }) => $width}px;\n max-width: ${({ $width }) => $width}px;\n display: flex;\n white-space: nowrap;\n justify-content: center;\n color: ${({ $isSecondary, theme }: StyledSliderButtonItemProps) =>\n $isSecondary ? theme.text : (theme.buttonColor ?? 'white')};\n`;\n\nexport const StyledSliderButtonPopupContent = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\ntype StyledSliderButtonPopupContentItemProps = WithTheme<{\n $isSelected?: boolean;\n}>;\n\nexport const StyledSliderButtonPopupContentItem = styled.div<StyledSliderButtonPopupContentItemProps>`\n font-size: 110%;\n font-family: 'Roboto Medium', serif;\n cursor: pointer;\n background-color: ${({ $isSelected, theme }: StyledSliderButtonPopupContentItemProps) =>\n $isSelected ? theme['secondary-102'] : undefined};\n padding: 4px 12px;\n~~\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss};\n }\n~~`;\n\ntype StyledSliderButtonButtonsWrapperProps = WithTheme<{ $isInvisible?: boolean }>;\n\nexport const StyledSliderButtonButtonsWrapper = styled.div<StyledSliderButtonButtonsWrapperProps>`\n position: absolute;\n z-index: ${({ $isInvisible }) => ($isInvisible ? '2' : '4')};\n opacity: ${({ $isInvisible }) => ($isInvisible ? 0 : 1)};\n display: flex;\n cursor: pointer;\n align-items: center;\n pointer-events: ${({ $isInvisible }) => ($isInvisible ? 'auto' : 'none')};\n`;\n\ntype StyledMotionSliderButtonThumbProps = WithTheme<{\n $width: number;\n $isRounded: boolean;\n ~~$shouldShowKeyboardHighlighting?: boolean;\n~~}>;\n\nexport const StyledMotionSliderButtonThumb = styled(motion.div)<StyledMotionSliderButtonThumbProps>`\n font-size: 110%;\n font-family: 'Roboto Medium', serif;\n opacity: 1;\n width: ${({ $width }) => $width - 8}px;\n position: absolute;\n border-radius: ${({ $isRounded }) => ($isRounded ? 24 : 3)}px;\n top: 4px;\n left: 4px;\n white-space: nowrap;\n z-index: 3;\n height: 24px;\n padding: 7px 12px;\n display: flex;\n color: white;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,~~IAAIC~~,~~GAAG,QAAQ,~~mBAAmB;~~AAE~~/C,~~SAASC,gCAAgC,QAAQ,8CAA8C;AAI/F,~~OAAO,MAAMC,kBAAkB,~~GAAGH~~,MAAM,~~CAACI~~,GAA4B;AACrE,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,yBAAyB,~~GAAGN~~,MAAM,~~CAACI~~,GAAmC;AACnF;AACA,qBAAqB,CAAC;EAAEG;AAAW,CAAC,KAAMA,UAAU,GAAG,EAAE,GAAG,CAAE;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA,kBAAkB,CAAC;EAAEH;AAAY,CAAC,KAAMA,WAAW,GAAG,QAAQ,GAAG,QAAS;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMI,sBAAsB,~~GAAGT~~,MAAM,~~CAACI~~,GAAgC;AAC7E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAM;AACvC,iBAAiB,CAAC;EAAEA;AAAO,CAAC,KAAKA,MAAM;AACvC;AACA;AACA;AACA,aAAa,CAAC;EAAEE,YAAY;EAAEC;AAAmC,CAAC,KAC1DD,YAAY,GAAGC,KAAK,CAACC,IAAI,GAAID,KAAK,CAACE,WAAW,IAAI,OAAQ;AAClE,CAAC;AAED,OAAO,MAAMC,8BAA8B,~~GAAGd~~,MAAM,~~CAACI~~,GAAG;AACxD;AACA;AACA,CAAC;AAMD,OAAO,MAAMW,kCAAkC,~~GAAGf~~,MAAM,~~CAACI~~,GAA4C;AACrG;AACA;AACA;AACA,wBAAwB,CAAC;EAAEY,WAAW;EAAEL;AAA+C,CAAC,KAChFK,WAAW,GAAGL,KAAK,CAAC,eAAe,CAAC,GAAGM,SAAS;AACxD;AACA~~;AACA;AACA~~,~~UAAUf,gCAAgC;AAC1C;AACA,~~CAAC;AAID,OAAO,~~MAAMgB~~,gCAAgC,~~GAAGlB~~,MAAM,~~CAACI~~,GAA0C;AACjG;AACA,eAAe,CAAC;EAAEe;AAAa,CAAC,KAAMA,YAAY,GAAG,GAAG,GAAG,GAAI;AAC/D,eAAe,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,CAAC,GAAG,CAAE;AAC3D;AACA;AACA;AACA,sBAAsB,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,MAAM,GAAG,MAAO;AAC5E,CAAC;~~AAQD~~,OAAO,MAAMC,6BAA6B,~~GAAGpB~~,MAAM,CAACD,MAAM,~~CAACK~~,GAAG,CAAqC;AACnG;AACA;AACA;AACA,aAAa,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAM,GAAG,CAAC;AACvC;AACA,qBAAqB,CAAC;EAAED;AAAW,CAAC,KAAMA,UAAU,GAAG,EAAE,GAAG,CAAE;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA~~;AACA~~,~~MAAM,~~CAAC~~;EAAEc;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BpB,GAAG;AACX;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC~~","ignoreList":[]}
1	+ {"version":3,"file":"SliderButton.styles.js","names":["motion","styled","StyledSliderButton","div","$isDisabled","StyledSliderButtonWrapper","$isRounded","$width","StyledSliderButtonItem","$isSecondary","theme","text","buttonColor","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","$isSelected","undefined","StyledSliderButtonButtonsWrapper","$isInvisible","StyledMotionSliderButtonThumb"],"sources":["../../../../src/components/slider-button/SliderButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderButtonProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSliderButton = styled.div<StyledSliderButtonProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n width: 100%;\n touch-action: none;\n position: relative;\n`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{\n $width: number;\n $isDisabled?: boolean;\n $isRounded: boolean;\n}>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n align-items: center;\n border-radius: ${({ $isRounded }) => ($isRounded ? 32 : 3)}px;\n border: none;\n color: white;\n cursor: pointer;\n display: inline-flex;\n line-height: 1.15;\n height: 32px;\n position: relative;\n user-select: none;\n transition: opacity 0.3s ease;\n\n width: ${({ $width }) => $width}px;\n\n max-width: 100%;\n overflow-x: ${({ $isDisabled }) => ($isDisabled ? 'hidden' : 'scroll')};\n overflow-y: hidden;\n\n // Chrome\n &::-webkit-scrollbar {\n display: none;\n }\n\n // IE and Edge\n -ms-overflow-style: none;\n\n // Firefox\n scrollbar-width: none;\n`;\n\ntype StyledSliderButtonItemProps = WithTheme<{\n $isSecondary?: boolean;\n $width: number;\n}>;\n\nexport const StyledSliderButtonItem = styled.div<StyledSliderButtonItemProps>`\n font-size: 110%;\n font-family: 'Roboto Medium', serif;\n padding: 7px 12px;\n min-width: ${({ $width }) => $width}px;\n max-width: ${({ $width }) => $width}px;\n display: flex;\n white-space: nowrap;\n justify-content: center;\n color: ${({ $isSecondary, theme }: StyledSliderButtonItemProps) =>\n $isSecondary ? theme.text : (theme.buttonColor ?? 'white')};\n`;\n\nexport const StyledSliderButtonPopupContent = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\ntype StyledSliderButtonPopupContentItemProps = WithTheme<{\n $isSelected?: boolean;\n}>;\n\nexport const StyledSliderButtonPopupContentItem = styled.div<StyledSliderButtonPopupContentItemProps>`\n font-size: 110%;\n font-family: 'Roboto Medium', serif;\n cursor: pointer;\n background-color: ${({ $isSelected, theme }: StyledSliderButtonPopupContentItemProps) =>\n $isSelected ? theme['secondary-102'] : undefined};\n padding: 4px 12px;\n`;\n\ntype StyledSliderButtonButtonsWrapperProps = WithTheme<{ $isInvisible?: boolean }>;\n\nexport const StyledSliderButtonButtonsWrapper = styled.div<StyledSliderButtonButtonsWrapperProps>`\n position: absolute;\n z-index: ${({ $isInvisible }) => ($isInvisible ? '2' : '4')};\n opacity: ${({ $isInvisible }) => ($isInvisible ? 0 : 1)};\n display: flex;\n cursor: pointer;\n align-items: center;\n pointer-events: ${({ $isInvisible }) => ($isInvisible ? 'auto' : 'none')};\n`;\n\ntype StyledMotionSliderButtonThumbProps = WithTheme<{\n $width: number;\n $isRounded: boolean;\n}>;\n\nexport const StyledMotionSliderButtonThumb = styled(motion.div)<StyledMotionSliderButtonThumbProps>`\n font-size: 110%;\n font-family: 'Roboto Medium', serif;\n opacity: 1;\n width: ${({ $width }) => $width - 8}px;\n position: absolute;\n border-radius: ${({ $isRounded }) => ($isRounded ? 24 : 3)}px;\n top: 4px;\n left: 4px;\n white-space: nowrap;\n z-index: 3;\n height: 24px;\n padding: 7px 12px;\n display: flex;\n color: white;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAe,mBAAmB;AAK/C,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAA4B;AACrE,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,yBAAyB,GAAGJ,MAAM,CAACE,GAAmC;AACnF;AACA,qBAAqB,CAAC;EAAEG;AAAW,CAAC,KAAMA,UAAU,GAAG,EAAE,GAAG,CAAE;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA,kBAAkB,CAAC;EAAEH;AAAY,CAAC,KAAMA,WAAW,GAAG,QAAQ,GAAG,QAAS;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMI,sBAAsB,GAAGP,MAAM,CAACE,GAAgC;AAC7E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAM;AACvC,iBAAiB,CAAC;EAAEA;AAAO,CAAC,KAAKA,MAAM;AACvC;AACA;AACA;AACA,aAAa,CAAC;EAAEE,YAAY;EAAEC;AAAmC,CAAC,KAC1DD,YAAY,GAAGC,KAAK,CAACC,IAAI,GAAID,KAAK,CAACE,WAAW,IAAI,OAAQ;AAClE,CAAC;AAED,OAAO,MAAMC,8BAA8B,GAAGZ,MAAM,CAACE,GAAG;AACxD;AACA;AACA,CAAC;AAMD,OAAO,MAAMW,kCAAkC,GAAGb,MAAM,CAACE,GAA4C;AACrG;AACA;AACA;AACA,wBAAwB,CAAC;EAAEY,WAAW;EAAEL;AAA+C,CAAC,KAChFK,WAAW,GAAGL,KAAK,CAAC,eAAe,CAAC,GAAGM,SAAS;AACxD;AACA,CAAC;AAID,OAAO,MAAMC,gCAAgC,GAAGhB,MAAM,CAACE,GAA0C;AACjG;AACA,eAAe,CAAC;EAAEe;AAAa,CAAC,KAAMA,YAAY,GAAG,GAAG,GAAG,GAAI;AAC/D,eAAe,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,CAAC,GAAG,CAAE;AAC3D;AACA;AACA;AACA,sBAAsB,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,MAAM,GAAG,MAAO;AAC5E,CAAC;AAOD,OAAO,MAAMC,6BAA6B,GAAGlB,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqC;AACnG;AACA;AACA;AACA,aAAa,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAM,GAAG,CAAC;AACvC;AACA,qBAAqB,CAAC;EAAED;AAAW,CAAC,KAAMA,UAAU,GAAG,EAAE,GAAG,CAAE;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/tag-input/TagInput.js CHANGED Viewed

@@ -8,6 +8,7 @@ import Icon from '../icon/Icon';
 import { StyledTagInput, StyledTagInputTagFocusWrapper, StyledTagInputIconWrapper, StyledTagInputTagInput, StyledTagInputTagWrapper, StyledTagInputTagWrapperText } from './TagInput.styles';
 import { AreaContext } from '../area-provider/AreaContextProvider';
 import { useCursorRepaint } from '../../hooks/resize';
+import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const TagInput = /*#__PURE__*/forwardRef(({
   leftElement,
@@ -27,6 +28,7 @@ const TagInput = /*#__PURE__*/forwardRef(({
   const [selectedId, setSelectedId] = useState();
   const areaProvider = useContext(AreaContext);
   const inputRef = useRef(null);
+  const tagInputRef = useRef(null);
   useCursorRepaint(inputRef);
   const theme = useTheme();
   const handleResetValue = () => {
@@ -34,7 +36,6 @@ const TagInput = /*#__PURE__*/forwardRef(({
   };
   const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
-  const shouldShowTagHighlighting = shouldShowKeyboardHighlighting && typeof selectedId === 'string';
   useImperativeHandle(ref, () => ({
     blur: () => inputRef.current?.blur(),
     getUnsavedTagText: currentValue !== '' ? currentValue : undefined,
@@ -180,7 +181,13 @@ const TagInput = /*#__PURE__*/forwardRef(({
     return items;
   }, [tags, shouldAllowMultiple, selectedId, shouldShowKeyboardHighlighting, theme, handleIconClick, size]);
   const shouldShowInput = useMemo(() => shouldAllowMultiple || (tags?.length ?? 0) < 1, [tags?.length, shouldAllowMultiple]);
+  useFocusRingPortal(inputRef, {
+    isEnabled: shouldShowKeyboardHighlighting && shouldShowInput,
+    overlayRef: tagInputRef
+  });
+  const shouldShowTagHighlighting = shouldShowKeyboardHighlighting && typeof selectedId === 'string';
   return useMemo(() => /*#__PURE__*/React.createElement(StyledTagInput, {
+    ref: tagInputRef,
     $shouldChangeColor: shouldChangeColor,
     $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     $shouldShowTagHighlighting: shouldShowTagHighlighting,