@radix-ui/react-slider 1.3.6 → 1.3.7-rc.1762291353631
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.
- package/dist/index.js.map +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +16 -15
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts", "../src/slider.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\nexport {\n createSliderScope,\n //\n Slider,\n SliderTrack,\n SliderRange,\n SliderThumb,\n //\n Root,\n Track,\n Range,\n Thumb,\n} from './slider';\nexport type { SliderProps, SliderTrackProps, SliderRangeProps, SliderThumbProps } from './slider';\n", "import * as React from 'react';\nimport { clamp } from '@radix-ui/number';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { usePrevious } from '@radix-ui/react-use-previous';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { createCollection } from '@radix-ui/react-collection';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Direction = 'ltr' | 'rtl';\n\nconst PAGE_KEYS = ['PageUp', 'PageDown'];\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\ntype SlideDirection = 'from-left' | 'from-right' | 'from-bottom' | 'from-top';\nconst BACK_KEYS: Record<SlideDirection, string[]> = {\n 'from-left': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n 'from-right': ['Home', 'PageDown', 'ArrowDown', 'ArrowRight'],\n 'from-bottom': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n 'from-top': ['Home', 'PageDown', 'ArrowUp', 'ArrowLeft'],\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\nconst SLIDER_NAME = 'Slider';\n\nconst [Collection, useCollection, createCollectionScope] =\n createCollection<SliderThumbElement>(SLIDER_NAME);\n\ntype ScopedProps<P> = P & { __scopeSlider?: Scope };\nconst [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME, [\n createCollectionScope,\n]);\n\ntype SliderContextValue = {\n name: string | undefined;\n disabled: boolean | undefined;\n min: number;\n max: number;\n values: number[];\n valueIndexToChangeRef: React.MutableRefObject<number>;\n thumbs: Set<SliderThumbElement>;\n orientation: SliderProps['orientation'];\n form: string | undefined;\n};\n\nconst [SliderProvider, useSliderContext] = createSliderContext<SliderContextValue>(SLIDER_NAME);\n\ntype SliderElement = SliderHorizontalElement | SliderVerticalElement;\ninterface SliderProps\n extends Omit<\n SliderHorizontalProps | SliderVerticalProps,\n keyof SliderOrientationPrivateProps | 'defaultValue'\n > {\n name?: string;\n disabled?: boolean;\n orientation?: React.AriaAttributes['aria-orientation'];\n dir?: Direction;\n min?: number;\n max?: number;\n step?: number;\n minStepsBetweenThumbs?: number;\n value?: number[];\n defaultValue?: number[];\n onValueChange?(value: number[]): void;\n onValueCommit?(value: number[]): void;\n inverted?: boolean;\n form?: string;\n}\n\nconst Slider = React.forwardRef<SliderElement, SliderProps>(\n (props: ScopedProps<SliderProps>, forwardedRef) => {\n const {\n name,\n min = 0,\n max = 100,\n step = 1,\n orientation = 'horizontal',\n disabled = false,\n minStepsBetweenThumbs = 0,\n defaultValue = [min],\n value,\n onValueChange = () => {},\n onValueCommit = () => {},\n inverted = false,\n form,\n ...sliderProps\n } = props;\n const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set());\n const valueIndexToChangeRef = React.useRef<number>(0);\n const isHorizontal = orientation === 'horizontal';\n const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;\n\n const [values = [], setValues] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange: (value) => {\n const thumbs = [...thumbRefs.current];\n thumbs[valueIndexToChangeRef.current]?.focus();\n onValueChange(value);\n },\n });\n const valuesBeforeSlideStartRef = React.useRef(values);\n\n function handleSlideStart(value: number) {\n const closestIndex = getClosestValueIndex(values, value);\n updateValues(value, closestIndex);\n }\n\n function handleSlideMove(value: number) {\n updateValues(value, valueIndexToChangeRef.current);\n }\n\n function handleSlideEnd() {\n const prevValue = valuesBeforeSlideStartRef.current[valueIndexToChangeRef.current];\n const nextValue = values[valueIndexToChangeRef.current];\n const hasChanged = nextValue !== prevValue;\n if (hasChanged) onValueCommit(values);\n }\n\n function updateValues(value: number, atIndex: number, { commit } = { commit: false }) {\n const decimalCount = getDecimalCount(step);\n const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount);\n const nextValue = clamp(snapToStep, [min, max]);\n\n setValues((prevValues = []) => {\n const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);\n if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {\n valueIndexToChangeRef.current = nextValues.indexOf(nextValue);\n const hasChanged = String(nextValues) !== String(prevValues);\n if (hasChanged && commit) onValueCommit(nextValues);\n return hasChanged ? nextValues : prevValues;\n } else {\n return prevValues;\n }\n });\n }\n\n return (\n <SliderProvider\n scope={props.__scopeSlider}\n name={name}\n disabled={disabled}\n min={min}\n max={max}\n valueIndexToChangeRef={valueIndexToChangeRef}\n thumbs={thumbRefs.current}\n values={values}\n orientation={orientation}\n form={form}\n >\n <Collection.Provider scope={props.__scopeSlider}>\n <Collection.Slot scope={props.__scopeSlider}>\n <SliderOrientation\n aria-disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...sliderProps}\n ref={forwardedRef}\n onPointerDown={composeEventHandlers(sliderProps.onPointerDown, () => {\n if (!disabled) valuesBeforeSlideStartRef.current = values;\n })}\n min={min}\n max={max}\n inverted={inverted}\n onSlideStart={disabled ? undefined : handleSlideStart}\n onSlideMove={disabled ? undefined : handleSlideMove}\n onSlideEnd={disabled ? undefined : handleSlideEnd}\n onHomeKeyDown={() => !disabled && updateValues(min, 0, { commit: true })}\n onEndKeyDown={() =>\n !disabled && updateValues(max, values.length - 1, { commit: true })\n }\n onStepKeyDown={({ event, direction: stepDirection }) => {\n if (!disabled) {\n const isPageKey = PAGE_KEYS.includes(event.key);\n const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key));\n const multiplier = isSkipKey ? 10 : 1;\n const atIndex = valueIndexToChangeRef.current;\n const value = values[atIndex]!;\n const stepInDirection = step * multiplier * stepDirection;\n updateValues(value + stepInDirection, atIndex, { commit: true });\n }\n }}\n />\n </Collection.Slot>\n </Collection.Provider>\n </SliderProvider>\n );\n }\n);\n\nSlider.displayName = SLIDER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\ntype Side = 'top' | 'right' | 'bottom' | 'left';\n\nconst [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext<{\n startEdge: Side;\n endEdge: Side;\n size: keyof NonNullable<ReturnType<typeof useSize>>;\n direction: number;\n}>(SLIDER_NAME, {\n startEdge: 'left',\n endEdge: 'right',\n size: 'width',\n direction: 1,\n});\n\ntype SliderOrientationPrivateProps = {\n min: number;\n max: number;\n inverted: boolean;\n onSlideStart?(value: number): void;\n onSlideMove?(value: number): void;\n onSlideEnd?(): void;\n onHomeKeyDown(event: React.KeyboardEvent): void;\n onEndKeyDown(event: React.KeyboardEvent): void;\n onStepKeyDown(step: { event: React.KeyboardEvent; direction: number }): void;\n};\ninterface SliderOrientationProps\n extends Omit<SliderImplProps, keyof SliderImplPrivateProps>,\n SliderOrientationPrivateProps {}\n\ntype SliderHorizontalElement = SliderImplElement;\ninterface SliderHorizontalProps extends SliderOrientationProps {\n dir?: Direction;\n}\n\nconst SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizontalProps>(\n (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n const {\n min,\n max,\n dir,\n inverted,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onStepKeyDown,\n ...sliderProps\n } = props;\n const [slider, setSlider] = React.useState<SliderImplElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setSlider(node));\n const rectRef = React.useRef<DOMRect>(undefined);\n const direction = useDirection(dir);\n const isDirectionLTR = direction === 'ltr';\n const isSlidingFromLeft = (isDirectionLTR && !inverted) || (!isDirectionLTR && inverted);\n\n function getValueFromPointer(pointerPosition: number) {\n const rect = rectRef.current || slider!.getBoundingClientRect();\n const input: [number, number] = [0, rect.width];\n const output: [number, number] = isSlidingFromLeft ? [min, max] : [max, min];\n const value = linearScale(input, output);\n\n rectRef.current = rect;\n return value(pointerPosition - rect.left);\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isSlidingFromLeft ? 'left' : 'right'}\n endEdge={isSlidingFromLeft ? 'right' : 'left'}\n direction={isSlidingFromLeft ? 1 : -1}\n size=\"width\"\n >\n <SliderImpl\n dir={direction}\n data-orientation=\"horizontal\"\n {...sliderProps}\n ref={composedRefs}\n style={{\n ...sliderProps.style,\n ['--radix-slider-thumb-transform' as any]: 'translateX(-50%)',\n }}\n onSlideStart={(event) => {\n const value = getValueFromPointer(event.clientX);\n onSlideStart?.(value);\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.clientX);\n onSlideMove?.(value);\n }}\n onSlideEnd={() => {\n rectRef.current = undefined;\n onSlideEnd?.();\n }}\n onStepKeyDown={(event) => {\n const slideDirection = isSlidingFromLeft ? 'from-left' : 'from-right';\n const isBackKey = BACK_KEYS[slideDirection].includes(event.key);\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });\n }}\n />\n </SliderOrientationProvider>\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * SliderVertical\n * -----------------------------------------------------------------------------------------------*/\n\ntype SliderVerticalElement = SliderImplElement;\ninterface SliderVerticalProps extends SliderOrientationProps {}\n\nconst SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalProps>(\n (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n const {\n min,\n max,\n inverted,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onStepKeyDown,\n ...sliderProps\n } = props;\n const sliderRef = React.useRef<SliderImplElement>(null);\n const ref = useComposedRefs(forwardedRef, sliderRef);\n const rectRef = React.useRef<DOMRect>(undefined);\n const isSlidingFromBottom = !inverted;\n\n function getValueFromPointer(pointerPosition: number) {\n const rect = rectRef.current || sliderRef.current!.getBoundingClientRect();\n const input: [number, number] = [0, rect.height];\n const output: [number, number] = isSlidingFromBottom ? [max, min] : [min, max];\n const value = linearScale(input, output);\n\n rectRef.current = rect;\n return value(pointerPosition - rect.top);\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isSlidingFromBottom ? 'bottom' : 'top'}\n endEdge={isSlidingFromBottom ? 'top' : 'bottom'}\n size=\"height\"\n direction={isSlidingFromBottom ? 1 : -1}\n >\n <SliderImpl\n data-orientation=\"vertical\"\n {...sliderProps}\n ref={ref}\n style={{\n ...sliderProps.style,\n ['--radix-slider-thumb-transform' as any]: 'translateY(50%)',\n }}\n onSlideStart={(event) => {\n const value = getValueFromPointer(event.clientY);\n onSlideStart?.(value);\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.clientY);\n onSlideMove?.(value);\n }}\n onSlideEnd={() => {\n rectRef.current = undefined;\n onSlideEnd?.();\n }}\n onStepKeyDown={(event) => {\n const slideDirection = isSlidingFromBottom ? 'from-bottom' : 'from-top';\n const isBackKey = BACK_KEYS[slideDirection].includes(event.key);\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });\n }}\n />\n </SliderOrientationProvider>\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\ntype SliderImplElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ntype SliderImplPrivateProps = {\n onSlideStart(event: React.PointerEvent): void;\n onSlideMove(event: React.PointerEvent): void;\n onSlideEnd(event: React.PointerEvent): void;\n onHomeKeyDown(event: React.KeyboardEvent): void;\n onEndKeyDown(event: React.KeyboardEvent): void;\n onStepKeyDown(event: React.KeyboardEvent): void;\n};\ninterface SliderImplProps extends PrimitiveDivProps, SliderImplPrivateProps {}\n\nconst SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(\n (props: ScopedProps<SliderImplProps>, forwardedRef) => {\n const {\n __scopeSlider,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onHomeKeyDown,\n onEndKeyDown,\n onStepKeyDown,\n ...sliderProps\n } = props;\n const context = useSliderContext(SLIDER_NAME, __scopeSlider);\n\n return (\n <Primitive.span\n {...sliderProps}\n ref={forwardedRef}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if (event.key === 'Home') {\n onHomeKeyDown(event);\n // Prevent scrolling to page start\n event.preventDefault();\n } else if (event.key === 'End') {\n onEndKeyDown(event);\n // Prevent scrolling to page end\n event.preventDefault();\n } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {\n onStepKeyDown(event);\n // Prevent scrolling for directional key presses\n event.preventDefault();\n }\n })}\n onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n const target = event.target as HTMLElement;\n target.setPointerCapture(event.pointerId);\n // Prevent browser focus behaviour because we focus a thumb manually when values change.\n event.preventDefault();\n // Touch devices have a delay before focusing so won't focus if touch immediately moves\n // away from target (sliding). We want thumb to focus regardless.\n if (context.thumbs.has(target)) {\n target.focus();\n } else {\n onSlideStart(event);\n }\n })}\n onPointerMove={composeEventHandlers(props.onPointerMove, (event) => {\n const target = event.target as HTMLElement;\n if (target.hasPointerCapture(event.pointerId)) onSlideMove(event);\n })}\n onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n const target = event.target as HTMLElement;\n if (target.hasPointerCapture(event.pointerId)) {\n target.releasePointerCapture(event.pointerId);\n onSlideEnd(event);\n }\n })}\n />\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrack\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRACK_NAME = 'SliderTrack';\n\ntype SliderTrackElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface SliderTrackProps extends PrimitiveSpanProps {}\n\nconst SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(\n (props: ScopedProps<SliderTrackProps>, forwardedRef) => {\n const { __scopeSlider, ...trackProps } = props;\n const context = useSliderContext(TRACK_NAME, __scopeSlider);\n return (\n <Primitive.span\n data-disabled={context.disabled ? '' : undefined}\n data-orientation={context.orientation}\n {...trackProps}\n ref={forwardedRef}\n />\n );\n }\n);\n\nSliderTrack.displayName = TRACK_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderRange\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderRange';\n\ntype SliderRangeElement = React.ComponentRef<typeof Primitive.span>;\ninterface SliderRangeProps extends PrimitiveSpanProps {}\n\nconst SliderRange = React.forwardRef<SliderRangeElement, SliderRangeProps>(\n (props: ScopedProps<SliderRangeProps>, forwardedRef) => {\n const { __scopeSlider, ...rangeProps } = props;\n const context = useSliderContext(RANGE_NAME, __scopeSlider);\n const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);\n const ref = React.useRef<HTMLSpanElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const valuesCount = context.values.length;\n const percentages = context.values.map((value) =>\n convertValueToPercentage(value, context.min, context.max)\n );\n const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;\n const offsetEnd = 100 - Math.max(...percentages);\n\n return (\n <Primitive.span\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n {...rangeProps}\n ref={composedRefs}\n style={{\n ...props.style,\n [orientation.startEdge]: offsetStart + '%',\n [orientation.endEdge]: offsetEnd + '%',\n }}\n />\n );\n }\n);\n\nSliderRange.displayName = RANGE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb';\n\ntype SliderThumbElement = SliderThumbImplElement;\ninterface SliderThumbProps extends Omit<SliderThumbImplProps, 'index'> {}\n\nconst SliderThumb = React.forwardRef<SliderThumbElement, SliderThumbProps>(\n (props: ScopedProps<SliderThumbProps>, forwardedRef) => {\n const getItems = useCollection(props.__scopeSlider);\n const [thumb, setThumb] = React.useState<SliderThumbImplElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));\n const index = React.useMemo(\n () => (thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1),\n [getItems, thumb]\n );\n return <SliderThumbImpl {...props} ref={composedRefs} index={index} />;\n }\n);\n\ntype SliderThumbImplElement = React.ComponentRef<typeof Primitive.span>;\ninterface SliderThumbImplProps extends PrimitiveSpanProps {\n index: number;\n name?: string;\n}\n\nconst SliderThumbImpl = React.forwardRef<SliderThumbImplElement, SliderThumbImplProps>(\n (props: ScopedProps<SliderThumbImplProps>, forwardedRef) => {\n const { __scopeSlider, index, name, ...thumbProps } = props;\n const context = useSliderContext(THUMB_NAME, __scopeSlider);\n const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);\n const [thumb, setThumb] = React.useState<HTMLSpanElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = thumb ? context.form || !!thumb.closest('form') : true;\n const size = useSize(thumb);\n // We cast because index could be `-1` which would return undefined\n const value = context.values[index] as number | undefined;\n const percent =\n value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max);\n const label = getLabel(index, context.values.length);\n const orientationSize = size?.[orientation.size];\n const thumbInBoundsOffset = orientationSize\n ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction)\n : 0;\n\n React.useEffect(() => {\n if (thumb) {\n context.thumbs.add(thumb);\n return () => {\n context.thumbs.delete(thumb);\n };\n }\n }, [thumb, context.thumbs]);\n\n return (\n <span\n style={{\n transform: 'var(--radix-slider-thumb-transform)',\n position: 'absolute',\n [orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`,\n }}\n >\n <Collection.ItemSlot scope={props.__scopeSlider}>\n <Primitive.span\n role=\"slider\"\n aria-label={props['aria-label'] || label}\n aria-valuemin={context.min}\n aria-valuenow={value}\n aria-valuemax={context.max}\n aria-orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n tabIndex={context.disabled ? undefined : 0}\n {...thumbProps}\n ref={composedRefs}\n /**\n * There will be no value on initial render while we work out the index so we hide thumbs\n * without a value, otherwise SSR will render them in the wrong position before they\n * snap into the correct position during hydration which would be visually jarring for\n * slower connections.\n */\n style={value === undefined ? { display: 'none' } : props.style}\n onFocus={composeEventHandlers(props.onFocus, () => {\n context.valueIndexToChangeRef.current = index;\n })}\n />\n </Collection.ItemSlot>\n\n {isFormControl && (\n <SliderBubbleInput\n key={index}\n name={\n name ??\n (context.name ? context.name + (context.values.length > 1 ? '[]' : '') : undefined)\n }\n form={context.form}\n value={value}\n />\n )}\n </span>\n );\n }\n);\n\nSliderThumb.displayName = THUMB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'RadioBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface SliderBubbleInputProps extends InputProps {}\n\nconst SliderBubbleInput = React.forwardRef<HTMLInputElement, SliderBubbleInputProps>(\n ({ __scopeSlider, value, ...props }: ScopedProps<SliderBubbleInputProps>, forwardedRef) => {\n const ref = React.useRef<HTMLInputElement>(null);\n const composedRefs = useComposedRefs(ref, forwardedRef);\n const prevValue = usePrevious(value);\n\n // Bubble value change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current;\n if (!input) return;\n\n const inputProto = window.HTMLInputElement.prototype;\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor;\n const setValue = descriptor.set;\n if (prevValue !== value && setValue) {\n const event = new Event('input', { bubbles: true });\n setValue.call(input, value);\n input.dispatchEvent(event);\n }\n }, [prevValue, value]);\n\n /**\n * We purposefully do not use `type=\"hidden\"` here otherwise forms that\n * wrap it will not be able to access its value via the FormData API.\n *\n * We purposefully do not add the `value` attribute here to allow the value\n * to be set programmatically and bubble to any parent form `onChange` event.\n * Adding the `value` will cause React to consider the programmatic\n * dispatch a duplicate and it will get swallowed.\n */\n return (\n <Primitive.input\n style={{ display: 'none' }}\n {...props}\n ref={composedRefs}\n defaultValue={value}\n />\n );\n }\n);\n\nSliderBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\n const nextValues = [...prevValues];\n nextValues[atIndex] = nextValue;\n return nextValues.sort((a, b) => a - b);\n}\n\nfunction convertValueToPercentage(value: number, min: number, max: number) {\n const maxSteps = max - min;\n const percentPerStep = 100 / maxSteps;\n const percentage = percentPerStep * (value - min);\n return clamp(percentage, [0, 100]);\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nfunction getLabel(index: number, totalValues: number) {\n if (totalValues > 2) {\n return `Value ${index + 1} of ${totalValues}`;\n } else if (totalValues === 2) {\n return ['Minimum', 'Maximum'][index];\n } else {\n return undefined;\n }\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nfunction getClosestValueIndex(values: number[], nextValue: number) {\n if (values.length === 1) return 0;\n const distances = values.map((value) => Math.abs(value - nextValue));\n const closestDistance = Math.min(...distances);\n return distances.indexOf(closestDistance);\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nfunction getThumbInBoundsOffset(width: number, left: number, direction: number) {\n const halfWidth = width / 2;\n const halfPercent = 50;\n const offset = linearScale([0, halfPercent], [0, halfWidth]);\n return (halfWidth - offset(left) * direction) * direction;\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nfunction getStepsBetweenValues(values: number[]) {\n return values.slice(0, -1).map((value, index) => values[index + 1]! - value);\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nfunction hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {\n if (minStepsBetweenValues > 0) {\n const stepsBetweenValues = getStepsBetweenValues(values);\n const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);\n return actualMinStepsBetweenValues >= minStepsBetweenValues;\n }\n return true;\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nfunction linearScale(input: readonly [number, number], output: readonly [number, number]) {\n return (value: number) => {\n if (input[0] === input[1] || output[0] === output[1]) return output[0];\n const ratio = (output[1] - output[0]) / (input[1] - input[0]);\n return output[0] + ratio * (value - input[0]);\n };\n}\n\nfunction getDecimalCount(value: number) {\n return (String(value).split('.')[1] || '').length;\n}\n\nfunction roundValue(value: number, decimalCount: number) {\n const rounder = Math.pow(10, decimalCount);\n return Math.round(value * rounder) / rounder;\n}\n\nconst Root = Slider;\nconst Track = SliderTrack;\nconst Range = SliderRange;\nconst Thumb = SliderThumb;\n\nexport {\n createSliderScope,\n //\n Slider,\n SliderTrack,\n SliderRange,\n SliderThumb,\n //\n Root,\n Track,\n Range,\n Thumb,\n};\nexport type { SliderProps, SliderTrackProps, SliderRangeProps, SliderThumbProps };\n"],
|
|
4
|
+
"sourcesContent": ["'use client';\nexport {\n createSliderScope,\n //\n Slider,\n SliderTrack,\n SliderRange,\n SliderThumb,\n //\n Root,\n Track,\n Range,\n Thumb,\n} from './slider';\nexport type { SliderProps, SliderTrackProps, SliderRangeProps, SliderThumbProps } from './slider';\n", "import * as React from 'react';\nimport { clamp } from '@radix-ui/number';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { usePrevious } from '@radix-ui/react-use-previous';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { createCollection } from '@radix-ui/react-collection';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Direction = 'ltr' | 'rtl';\n\nconst PAGE_KEYS = ['PageUp', 'PageDown'];\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\ntype SlideDirection = 'from-left' | 'from-right' | 'from-bottom' | 'from-top';\nconst BACK_KEYS: Record<SlideDirection, string[]> = {\n 'from-left': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n 'from-right': ['Home', 'PageDown', 'ArrowDown', 'ArrowRight'],\n 'from-bottom': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n 'from-top': ['Home', 'PageDown', 'ArrowUp', 'ArrowLeft'],\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\nconst SLIDER_NAME = 'Slider';\n\nconst [Collection, useCollection, createCollectionScope] =\n createCollection<SliderThumbElement>(SLIDER_NAME);\n\ntype ScopedProps<P> = P & { __scopeSlider?: Scope };\nconst [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME, [\n createCollectionScope,\n]);\n\ntype SliderContextValue = {\n name: string | undefined;\n disabled: boolean | undefined;\n min: number;\n max: number;\n values: number[];\n valueIndexToChangeRef: React.MutableRefObject<number>;\n thumbs: Set<SliderThumbElement>;\n orientation: SliderProps['orientation'];\n form: string | undefined;\n};\n\nconst [SliderProvider, useSliderContext] = createSliderContext<SliderContextValue>(SLIDER_NAME);\n\ntype SliderElement = SliderHorizontalElement | SliderVerticalElement;\ninterface SliderProps\n extends Omit<\n SliderHorizontalProps | SliderVerticalProps,\n keyof SliderOrientationPrivateProps | 'defaultValue'\n > {\n name?: string;\n disabled?: boolean;\n orientation?: React.AriaAttributes['aria-orientation'];\n dir?: Direction;\n min?: number;\n max?: number;\n step?: number;\n minStepsBetweenThumbs?: number;\n value?: number[];\n defaultValue?: number[];\n onValueChange?(value: number[]): void;\n onValueCommit?(value: number[]): void;\n inverted?: boolean;\n form?: string;\n}\n\nconst Slider = React.forwardRef<SliderElement, SliderProps>(\n (props: ScopedProps<SliderProps>, forwardedRef) => {\n const {\n name,\n min = 0,\n max = 100,\n step = 1,\n orientation = 'horizontal',\n disabled = false,\n minStepsBetweenThumbs = 0,\n defaultValue = [min],\n value,\n onValueChange = () => {},\n onValueCommit = () => {},\n inverted = false,\n form,\n ...sliderProps\n } = props;\n const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set());\n const valueIndexToChangeRef = React.useRef<number>(0);\n const isHorizontal = orientation === 'horizontal';\n const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;\n\n const [values = [], setValues] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange: (value) => {\n const thumbs = [...thumbRefs.current];\n thumbs[valueIndexToChangeRef.current]?.focus();\n onValueChange(value);\n },\n });\n const valuesBeforeSlideStartRef = React.useRef(values);\n\n function handleSlideStart(value: number) {\n const closestIndex = getClosestValueIndex(values, value);\n updateValues(value, closestIndex);\n }\n\n function handleSlideMove(value: number) {\n updateValues(value, valueIndexToChangeRef.current);\n }\n\n function handleSlideEnd() {\n const prevValue = valuesBeforeSlideStartRef.current[valueIndexToChangeRef.current];\n const nextValue = values[valueIndexToChangeRef.current];\n const hasChanged = nextValue !== prevValue;\n if (hasChanged) onValueCommit(values);\n }\n\n function updateValues(value: number, atIndex: number, { commit } = { commit: false }) {\n const decimalCount = getDecimalCount(step);\n const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount);\n const nextValue = clamp(snapToStep, [min, max]);\n\n setValues((prevValues = []) => {\n const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);\n if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {\n valueIndexToChangeRef.current = nextValues.indexOf(nextValue);\n const hasChanged = String(nextValues) !== String(prevValues);\n if (hasChanged && commit) onValueCommit(nextValues);\n return hasChanged ? nextValues : prevValues;\n } else {\n return prevValues;\n }\n });\n }\n\n return (\n <SliderProvider\n scope={props.__scopeSlider}\n name={name}\n disabled={disabled}\n min={min}\n max={max}\n valueIndexToChangeRef={valueIndexToChangeRef}\n thumbs={thumbRefs.current}\n values={values}\n orientation={orientation}\n form={form}\n >\n <Collection.Provider scope={props.__scopeSlider}>\n <Collection.Slot scope={props.__scopeSlider}>\n <SliderOrientation\n aria-disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...sliderProps}\n ref={forwardedRef}\n onPointerDown={composeEventHandlers(sliderProps.onPointerDown, () => {\n if (!disabled) valuesBeforeSlideStartRef.current = values;\n })}\n min={min}\n max={max}\n inverted={inverted}\n onSlideStart={disabled ? undefined : handleSlideStart}\n onSlideMove={disabled ? undefined : handleSlideMove}\n onSlideEnd={disabled ? undefined : handleSlideEnd}\n onHomeKeyDown={() => !disabled && updateValues(min, 0, { commit: true })}\n onEndKeyDown={() =>\n !disabled && updateValues(max, values.length - 1, { commit: true })\n }\n onStepKeyDown={({ event, direction: stepDirection }) => {\n if (!disabled) {\n const isPageKey = PAGE_KEYS.includes(event.key);\n const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key));\n const multiplier = isSkipKey ? 10 : 1;\n const atIndex = valueIndexToChangeRef.current;\n const value = values[atIndex]!;\n const stepInDirection = step * multiplier * stepDirection;\n updateValues(value + stepInDirection, atIndex, { commit: true });\n }\n }}\n />\n </Collection.Slot>\n </Collection.Provider>\n </SliderProvider>\n );\n },\n);\n\nSlider.displayName = SLIDER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\ntype Side = 'top' | 'right' | 'bottom' | 'left';\n\nconst [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext<{\n startEdge: Side;\n endEdge: Side;\n size: keyof NonNullable<ReturnType<typeof useSize>>;\n direction: number;\n}>(SLIDER_NAME, {\n startEdge: 'left',\n endEdge: 'right',\n size: 'width',\n direction: 1,\n});\n\ntype SliderOrientationPrivateProps = {\n min: number;\n max: number;\n inverted: boolean;\n onSlideStart?(value: number): void;\n onSlideMove?(value: number): void;\n onSlideEnd?(): void;\n onHomeKeyDown(event: React.KeyboardEvent): void;\n onEndKeyDown(event: React.KeyboardEvent): void;\n onStepKeyDown(step: { event: React.KeyboardEvent; direction: number }): void;\n};\ninterface SliderOrientationProps\n extends Omit<SliderImplProps, keyof SliderImplPrivateProps>,\n SliderOrientationPrivateProps {}\n\ntype SliderHorizontalElement = SliderImplElement;\ninterface SliderHorizontalProps extends SliderOrientationProps {\n dir?: Direction;\n}\n\nconst SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizontalProps>(\n (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n const {\n min,\n max,\n dir,\n inverted,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onStepKeyDown,\n ...sliderProps\n } = props;\n const [slider, setSlider] = React.useState<SliderImplElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setSlider(node));\n const rectRef = React.useRef<DOMRect>(undefined);\n const direction = useDirection(dir);\n const isDirectionLTR = direction === 'ltr';\n const isSlidingFromLeft = (isDirectionLTR && !inverted) || (!isDirectionLTR && inverted);\n\n function getValueFromPointer(pointerPosition: number) {\n const rect = rectRef.current || slider!.getBoundingClientRect();\n const input: [number, number] = [0, rect.width];\n const output: [number, number] = isSlidingFromLeft ? [min, max] : [max, min];\n const value = linearScale(input, output);\n\n rectRef.current = rect;\n return value(pointerPosition - rect.left);\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isSlidingFromLeft ? 'left' : 'right'}\n endEdge={isSlidingFromLeft ? 'right' : 'left'}\n direction={isSlidingFromLeft ? 1 : -1}\n size=\"width\"\n >\n <SliderImpl\n dir={direction}\n data-orientation=\"horizontal\"\n {...sliderProps}\n ref={composedRefs}\n style={{\n ...sliderProps.style,\n ['--radix-slider-thumb-transform' as any]: 'translateX(-50%)',\n }}\n onSlideStart={(event) => {\n const value = getValueFromPointer(event.clientX);\n onSlideStart?.(value);\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.clientX);\n onSlideMove?.(value);\n }}\n onSlideEnd={() => {\n rectRef.current = undefined;\n onSlideEnd?.();\n }}\n onStepKeyDown={(event) => {\n const slideDirection = isSlidingFromLeft ? 'from-left' : 'from-right';\n const isBackKey = BACK_KEYS[slideDirection].includes(event.key);\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });\n }}\n />\n </SliderOrientationProvider>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * SliderVertical\n * -----------------------------------------------------------------------------------------------*/\n\ntype SliderVerticalElement = SliderImplElement;\ninterface SliderVerticalProps extends SliderOrientationProps {}\n\nconst SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalProps>(\n (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n const {\n min,\n max,\n inverted,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onStepKeyDown,\n ...sliderProps\n } = props;\n const sliderRef = React.useRef<SliderImplElement>(null);\n const ref = useComposedRefs(forwardedRef, sliderRef);\n const rectRef = React.useRef<DOMRect>(undefined);\n const isSlidingFromBottom = !inverted;\n\n function getValueFromPointer(pointerPosition: number) {\n const rect = rectRef.current || sliderRef.current!.getBoundingClientRect();\n const input: [number, number] = [0, rect.height];\n const output: [number, number] = isSlidingFromBottom ? [max, min] : [min, max];\n const value = linearScale(input, output);\n\n rectRef.current = rect;\n return value(pointerPosition - rect.top);\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isSlidingFromBottom ? 'bottom' : 'top'}\n endEdge={isSlidingFromBottom ? 'top' : 'bottom'}\n size=\"height\"\n direction={isSlidingFromBottom ? 1 : -1}\n >\n <SliderImpl\n data-orientation=\"vertical\"\n {...sliderProps}\n ref={ref}\n style={{\n ...sliderProps.style,\n ['--radix-slider-thumb-transform' as any]: 'translateY(50%)',\n }}\n onSlideStart={(event) => {\n const value = getValueFromPointer(event.clientY);\n onSlideStart?.(value);\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.clientY);\n onSlideMove?.(value);\n }}\n onSlideEnd={() => {\n rectRef.current = undefined;\n onSlideEnd?.();\n }}\n onStepKeyDown={(event) => {\n const slideDirection = isSlidingFromBottom ? 'from-bottom' : 'from-top';\n const isBackKey = BACK_KEYS[slideDirection].includes(event.key);\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });\n }}\n />\n </SliderOrientationProvider>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\ntype SliderImplElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ntype SliderImplPrivateProps = {\n onSlideStart(event: React.PointerEvent): void;\n onSlideMove(event: React.PointerEvent): void;\n onSlideEnd(event: React.PointerEvent): void;\n onHomeKeyDown(event: React.KeyboardEvent): void;\n onEndKeyDown(event: React.KeyboardEvent): void;\n onStepKeyDown(event: React.KeyboardEvent): void;\n};\ninterface SliderImplProps extends PrimitiveDivProps, SliderImplPrivateProps {}\n\nconst SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(\n (props: ScopedProps<SliderImplProps>, forwardedRef) => {\n const {\n __scopeSlider,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onHomeKeyDown,\n onEndKeyDown,\n onStepKeyDown,\n ...sliderProps\n } = props;\n const context = useSliderContext(SLIDER_NAME, __scopeSlider);\n\n return (\n <Primitive.span\n {...sliderProps}\n ref={forwardedRef}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if (event.key === 'Home') {\n onHomeKeyDown(event);\n // Prevent scrolling to page start\n event.preventDefault();\n } else if (event.key === 'End') {\n onEndKeyDown(event);\n // Prevent scrolling to page end\n event.preventDefault();\n } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {\n onStepKeyDown(event);\n // Prevent scrolling for directional key presses\n event.preventDefault();\n }\n })}\n onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n const target = event.target as HTMLElement;\n target.setPointerCapture(event.pointerId);\n // Prevent browser focus behaviour because we focus a thumb manually when values change.\n event.preventDefault();\n // Touch devices have a delay before focusing so won't focus if touch immediately moves\n // away from target (sliding). We want thumb to focus regardless.\n if (context.thumbs.has(target)) {\n target.focus();\n } else {\n onSlideStart(event);\n }\n })}\n onPointerMove={composeEventHandlers(props.onPointerMove, (event) => {\n const target = event.target as HTMLElement;\n if (target.hasPointerCapture(event.pointerId)) onSlideMove(event);\n })}\n onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n const target = event.target as HTMLElement;\n if (target.hasPointerCapture(event.pointerId)) {\n target.releasePointerCapture(event.pointerId);\n onSlideEnd(event);\n }\n })}\n />\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrack\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRACK_NAME = 'SliderTrack';\n\ntype SliderTrackElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface SliderTrackProps extends PrimitiveSpanProps {}\n\nconst SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(\n (props: ScopedProps<SliderTrackProps>, forwardedRef) => {\n const { __scopeSlider, ...trackProps } = props;\n const context = useSliderContext(TRACK_NAME, __scopeSlider);\n return (\n <Primitive.span\n data-disabled={context.disabled ? '' : undefined}\n data-orientation={context.orientation}\n {...trackProps}\n ref={forwardedRef}\n />\n );\n },\n);\n\nSliderTrack.displayName = TRACK_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderRange\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderRange';\n\ntype SliderRangeElement = React.ComponentRef<typeof Primitive.span>;\ninterface SliderRangeProps extends PrimitiveSpanProps {}\n\nconst SliderRange = React.forwardRef<SliderRangeElement, SliderRangeProps>(\n (props: ScopedProps<SliderRangeProps>, forwardedRef) => {\n const { __scopeSlider, ...rangeProps } = props;\n const context = useSliderContext(RANGE_NAME, __scopeSlider);\n const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);\n const ref = React.useRef<HTMLSpanElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const valuesCount = context.values.length;\n const percentages = context.values.map((value) =>\n convertValueToPercentage(value, context.min, context.max),\n );\n const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;\n const offsetEnd = 100 - Math.max(...percentages);\n\n return (\n <Primitive.span\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n {...rangeProps}\n ref={composedRefs}\n style={{\n ...props.style,\n [orientation.startEdge]: offsetStart + '%',\n [orientation.endEdge]: offsetEnd + '%',\n }}\n />\n );\n },\n);\n\nSliderRange.displayName = RANGE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb';\n\ntype SliderThumbElement = SliderThumbImplElement;\ninterface SliderThumbProps extends Omit<SliderThumbImplProps, 'index'> {}\n\nconst SliderThumb = React.forwardRef<SliderThumbElement, SliderThumbProps>(\n (props: ScopedProps<SliderThumbProps>, forwardedRef) => {\n const getItems = useCollection(props.__scopeSlider);\n const [thumb, setThumb] = React.useState<SliderThumbImplElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));\n const index = React.useMemo(\n () => (thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1),\n [getItems, thumb],\n );\n return <SliderThumbImpl {...props} ref={composedRefs} index={index} />;\n },\n);\n\ntype SliderThumbImplElement = React.ComponentRef<typeof Primitive.span>;\ninterface SliderThumbImplProps extends PrimitiveSpanProps {\n index: number;\n name?: string;\n}\n\nconst SliderThumbImpl = React.forwardRef<SliderThumbImplElement, SliderThumbImplProps>(\n (props: ScopedProps<SliderThumbImplProps>, forwardedRef) => {\n const { __scopeSlider, index, name, ...thumbProps } = props;\n const context = useSliderContext(THUMB_NAME, __scopeSlider);\n const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);\n const [thumb, setThumb] = React.useState<HTMLSpanElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = thumb ? context.form || !!thumb.closest('form') : true;\n const size = useSize(thumb);\n // We cast because index could be `-1` which would return undefined\n const value = context.values[index] as number | undefined;\n const percent =\n value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max);\n const label = getLabel(index, context.values.length);\n const orientationSize = size?.[orientation.size];\n const thumbInBoundsOffset = orientationSize\n ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction)\n : 0;\n\n React.useEffect(() => {\n if (thumb) {\n context.thumbs.add(thumb);\n return () => {\n context.thumbs.delete(thumb);\n };\n }\n }, [thumb, context.thumbs]);\n\n return (\n <span\n style={{\n transform: 'var(--radix-slider-thumb-transform)',\n position: 'absolute',\n [orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`,\n }}\n >\n <Collection.ItemSlot scope={props.__scopeSlider}>\n <Primitive.span\n role=\"slider\"\n aria-label={props['aria-label'] || label}\n aria-valuemin={context.min}\n aria-valuenow={value}\n aria-valuemax={context.max}\n aria-orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n tabIndex={context.disabled ? undefined : 0}\n {...thumbProps}\n ref={composedRefs}\n /**\n * There will be no value on initial render while we work out the index so we hide thumbs\n * without a value, otherwise SSR will render them in the wrong position before they\n * snap into the correct position during hydration which would be visually jarring for\n * slower connections.\n */\n style={value === undefined ? { display: 'none' } : props.style}\n onFocus={composeEventHandlers(props.onFocus, () => {\n context.valueIndexToChangeRef.current = index;\n })}\n />\n </Collection.ItemSlot>\n\n {isFormControl && (\n <SliderBubbleInput\n key={index}\n name={\n name ??\n (context.name ? context.name + (context.values.length > 1 ? '[]' : '') : undefined)\n }\n form={context.form}\n value={value}\n />\n )}\n </span>\n );\n },\n);\n\nSliderThumb.displayName = THUMB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'RadioBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface SliderBubbleInputProps extends InputProps {}\n\nconst SliderBubbleInput = React.forwardRef<HTMLInputElement, SliderBubbleInputProps>(\n ({ __scopeSlider, value, ...props }: ScopedProps<SliderBubbleInputProps>, forwardedRef) => {\n const ref = React.useRef<HTMLInputElement>(null);\n const composedRefs = useComposedRefs(ref, forwardedRef);\n const prevValue = usePrevious(value);\n\n // Bubble value change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current;\n if (!input) return;\n\n const inputProto = window.HTMLInputElement.prototype;\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor;\n const setValue = descriptor.set;\n if (prevValue !== value && setValue) {\n const event = new Event('input', { bubbles: true });\n setValue.call(input, value);\n input.dispatchEvent(event);\n }\n }, [prevValue, value]);\n\n /**\n * We purposefully do not use `type=\"hidden\"` here otherwise forms that\n * wrap it will not be able to access its value via the FormData API.\n *\n * We purposefully do not add the `value` attribute here to allow the value\n * to be set programmatically and bubble to any parent form `onChange` event.\n * Adding the `value` will cause React to consider the programmatic\n * dispatch a duplicate and it will get swallowed.\n */\n return (\n <Primitive.input\n style={{ display: 'none' }}\n {...props}\n ref={composedRefs}\n defaultValue={value}\n />\n );\n },\n);\n\nSliderBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\n const nextValues = [...prevValues];\n nextValues[atIndex] = nextValue;\n return nextValues.sort((a, b) => a - b);\n}\n\nfunction convertValueToPercentage(value: number, min: number, max: number) {\n const maxSteps = max - min;\n const percentPerStep = 100 / maxSteps;\n const percentage = percentPerStep * (value - min);\n return clamp(percentage, [0, 100]);\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nfunction getLabel(index: number, totalValues: number) {\n if (totalValues > 2) {\n return `Value ${index + 1} of ${totalValues}`;\n } else if (totalValues === 2) {\n return ['Minimum', 'Maximum'][index];\n } else {\n return undefined;\n }\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nfunction getClosestValueIndex(values: number[], nextValue: number) {\n if (values.length === 1) return 0;\n const distances = values.map((value) => Math.abs(value - nextValue));\n const closestDistance = Math.min(...distances);\n return distances.indexOf(closestDistance);\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nfunction getThumbInBoundsOffset(width: number, left: number, direction: number) {\n const halfWidth = width / 2;\n const halfPercent = 50;\n const offset = linearScale([0, halfPercent], [0, halfWidth]);\n return (halfWidth - offset(left) * direction) * direction;\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nfunction getStepsBetweenValues(values: number[]) {\n return values.slice(0, -1).map((value, index) => values[index + 1]! - value);\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nfunction hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {\n if (minStepsBetweenValues > 0) {\n const stepsBetweenValues = getStepsBetweenValues(values);\n const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);\n return actualMinStepsBetweenValues >= minStepsBetweenValues;\n }\n return true;\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nfunction linearScale(input: readonly [number, number], output: readonly [number, number]) {\n return (value: number) => {\n if (input[0] === input[1] || output[0] === output[1]) return output[0];\n const ratio = (output[1] - output[0]) / (input[1] - input[0]);\n return output[0] + ratio * (value - input[0]);\n };\n}\n\nfunction getDecimalCount(value: number) {\n return (String(value).split('.')[1] || '').length;\n}\n\nfunction roundValue(value: number, decimalCount: number) {\n const rounder = Math.pow(10, decimalCount);\n return Math.round(value * rounder) / rounder;\n}\n\nconst Root = Slider;\nconst Track = SliderTrack;\nconst Range = SliderRange;\nconst Thumb = SliderThumb;\n\nexport {\n createSliderScope,\n //\n Slider,\n SliderTrack,\n SliderRange,\n SliderThumb,\n //\n Root,\n Track,\n Range,\n Thumb,\n};\nexport type { SliderProps, SliderTrackProps, SliderRangeProps, SliderThumbProps };\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["value"]
|
|
7
7
|
}
|
package/dist/index.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/slider.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport { clamp } from '@radix-ui/number';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { usePrevious } from '@radix-ui/react-use-previous';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { createCollection } from '@radix-ui/react-collection';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Direction = 'ltr' | 'rtl';\n\nconst PAGE_KEYS = ['PageUp', 'PageDown'];\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\ntype SlideDirection = 'from-left' | 'from-right' | 'from-bottom' | 'from-top';\nconst BACK_KEYS: Record<SlideDirection, string[]> = {\n 'from-left': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n 'from-right': ['Home', 'PageDown', 'ArrowDown', 'ArrowRight'],\n 'from-bottom': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n 'from-top': ['Home', 'PageDown', 'ArrowUp', 'ArrowLeft'],\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\nconst SLIDER_NAME = 'Slider';\n\nconst [Collection, useCollection, createCollectionScope] =\n createCollection<SliderThumbElement>(SLIDER_NAME);\n\ntype ScopedProps<P> = P & { __scopeSlider?: Scope };\nconst [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME, [\n createCollectionScope,\n]);\n\ntype SliderContextValue = {\n name: string | undefined;\n disabled: boolean | undefined;\n min: number;\n max: number;\n values: number[];\n valueIndexToChangeRef: React.MutableRefObject<number>;\n thumbs: Set<SliderThumbElement>;\n orientation: SliderProps['orientation'];\n form: string | undefined;\n};\n\nconst [SliderProvider, useSliderContext] = createSliderContext<SliderContextValue>(SLIDER_NAME);\n\ntype SliderElement = SliderHorizontalElement | SliderVerticalElement;\ninterface SliderProps\n extends Omit<\n SliderHorizontalProps | SliderVerticalProps,\n keyof SliderOrientationPrivateProps | 'defaultValue'\n > {\n name?: string;\n disabled?: boolean;\n orientation?: React.AriaAttributes['aria-orientation'];\n dir?: Direction;\n min?: number;\n max?: number;\n step?: number;\n minStepsBetweenThumbs?: number;\n value?: number[];\n defaultValue?: number[];\n onValueChange?(value: number[]): void;\n onValueCommit?(value: number[]): void;\n inverted?: boolean;\n form?: string;\n}\n\nconst Slider = React.forwardRef<SliderElement, SliderProps>(\n (props: ScopedProps<SliderProps>, forwardedRef) => {\n const {\n name,\n min = 0,\n max = 100,\n step = 1,\n orientation = 'horizontal',\n disabled = false,\n minStepsBetweenThumbs = 0,\n defaultValue = [min],\n value,\n onValueChange = () => {},\n onValueCommit = () => {},\n inverted = false,\n form,\n ...sliderProps\n } = props;\n const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set());\n const valueIndexToChangeRef = React.useRef<number>(0);\n const isHorizontal = orientation === 'horizontal';\n const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;\n\n const [values = [], setValues] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange: (value) => {\n const thumbs = [...thumbRefs.current];\n thumbs[valueIndexToChangeRef.current]?.focus();\n onValueChange(value);\n },\n });\n const valuesBeforeSlideStartRef = React.useRef(values);\n\n function handleSlideStart(value: number) {\n const closestIndex = getClosestValueIndex(values, value);\n updateValues(value, closestIndex);\n }\n\n function handleSlideMove(value: number) {\n updateValues(value, valueIndexToChangeRef.current);\n }\n\n function handleSlideEnd() {\n const prevValue = valuesBeforeSlideStartRef.current[valueIndexToChangeRef.current];\n const nextValue = values[valueIndexToChangeRef.current];\n const hasChanged = nextValue !== prevValue;\n if (hasChanged) onValueCommit(values);\n }\n\n function updateValues(value: number, atIndex: number, { commit } = { commit: false }) {\n const decimalCount = getDecimalCount(step);\n const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount);\n const nextValue = clamp(snapToStep, [min, max]);\n\n setValues((prevValues = []) => {\n const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);\n if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {\n valueIndexToChangeRef.current = nextValues.indexOf(nextValue);\n const hasChanged = String(nextValues) !== String(prevValues);\n if (hasChanged && commit) onValueCommit(nextValues);\n return hasChanged ? nextValues : prevValues;\n } else {\n return prevValues;\n }\n });\n }\n\n return (\n <SliderProvider\n scope={props.__scopeSlider}\n name={name}\n disabled={disabled}\n min={min}\n max={max}\n valueIndexToChangeRef={valueIndexToChangeRef}\n thumbs={thumbRefs.current}\n values={values}\n orientation={orientation}\n form={form}\n >\n <Collection.Provider scope={props.__scopeSlider}>\n <Collection.Slot scope={props.__scopeSlider}>\n <SliderOrientation\n aria-disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...sliderProps}\n ref={forwardedRef}\n onPointerDown={composeEventHandlers(sliderProps.onPointerDown, () => {\n if (!disabled) valuesBeforeSlideStartRef.current = values;\n })}\n min={min}\n max={max}\n inverted={inverted}\n onSlideStart={disabled ? undefined : handleSlideStart}\n onSlideMove={disabled ? undefined : handleSlideMove}\n onSlideEnd={disabled ? undefined : handleSlideEnd}\n onHomeKeyDown={() => !disabled && updateValues(min, 0, { commit: true })}\n onEndKeyDown={() =>\n !disabled && updateValues(max, values.length - 1, { commit: true })\n }\n onStepKeyDown={({ event, direction: stepDirection }) => {\n if (!disabled) {\n const isPageKey = PAGE_KEYS.includes(event.key);\n const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key));\n const multiplier = isSkipKey ? 10 : 1;\n const atIndex = valueIndexToChangeRef.current;\n const value = values[atIndex]!;\n const stepInDirection = step * multiplier * stepDirection;\n updateValues(value + stepInDirection, atIndex, { commit: true });\n }\n }}\n />\n </Collection.Slot>\n </Collection.Provider>\n </SliderProvider>\n );\n }\n);\n\nSlider.displayName = SLIDER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\ntype Side = 'top' | 'right' | 'bottom' | 'left';\n\nconst [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext<{\n startEdge: Side;\n endEdge: Side;\n size: keyof NonNullable<ReturnType<typeof useSize>>;\n direction: number;\n}>(SLIDER_NAME, {\n startEdge: 'left',\n endEdge: 'right',\n size: 'width',\n direction: 1,\n});\n\ntype SliderOrientationPrivateProps = {\n min: number;\n max: number;\n inverted: boolean;\n onSlideStart?(value: number): void;\n onSlideMove?(value: number): void;\n onSlideEnd?(): void;\n onHomeKeyDown(event: React.KeyboardEvent): void;\n onEndKeyDown(event: React.KeyboardEvent): void;\n onStepKeyDown(step: { event: React.KeyboardEvent; direction: number }): void;\n};\ninterface SliderOrientationProps\n extends Omit<SliderImplProps, keyof SliderImplPrivateProps>,\n SliderOrientationPrivateProps {}\n\ntype SliderHorizontalElement = SliderImplElement;\ninterface SliderHorizontalProps extends SliderOrientationProps {\n dir?: Direction;\n}\n\nconst SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizontalProps>(\n (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n const {\n min,\n max,\n dir,\n inverted,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onStepKeyDown,\n ...sliderProps\n } = props;\n const [slider, setSlider] = React.useState<SliderImplElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setSlider(node));\n const rectRef = React.useRef<DOMRect>(undefined);\n const direction = useDirection(dir);\n const isDirectionLTR = direction === 'ltr';\n const isSlidingFromLeft = (isDirectionLTR && !inverted) || (!isDirectionLTR && inverted);\n\n function getValueFromPointer(pointerPosition: number) {\n const rect = rectRef.current || slider!.getBoundingClientRect();\n const input: [number, number] = [0, rect.width];\n const output: [number, number] = isSlidingFromLeft ? [min, max] : [max, min];\n const value = linearScale(input, output);\n\n rectRef.current = rect;\n return value(pointerPosition - rect.left);\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isSlidingFromLeft ? 'left' : 'right'}\n endEdge={isSlidingFromLeft ? 'right' : 'left'}\n direction={isSlidingFromLeft ? 1 : -1}\n size=\"width\"\n >\n <SliderImpl\n dir={direction}\n data-orientation=\"horizontal\"\n {...sliderProps}\n ref={composedRefs}\n style={{\n ...sliderProps.style,\n ['--radix-slider-thumb-transform' as any]: 'translateX(-50%)',\n }}\n onSlideStart={(event) => {\n const value = getValueFromPointer(event.clientX);\n onSlideStart?.(value);\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.clientX);\n onSlideMove?.(value);\n }}\n onSlideEnd={() => {\n rectRef.current = undefined;\n onSlideEnd?.();\n }}\n onStepKeyDown={(event) => {\n const slideDirection = isSlidingFromLeft ? 'from-left' : 'from-right';\n const isBackKey = BACK_KEYS[slideDirection].includes(event.key);\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });\n }}\n />\n </SliderOrientationProvider>\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * SliderVertical\n * -----------------------------------------------------------------------------------------------*/\n\ntype SliderVerticalElement = SliderImplElement;\ninterface SliderVerticalProps extends SliderOrientationProps {}\n\nconst SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalProps>(\n (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n const {\n min,\n max,\n inverted,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onStepKeyDown,\n ...sliderProps\n } = props;\n const sliderRef = React.useRef<SliderImplElement>(null);\n const ref = useComposedRefs(forwardedRef, sliderRef);\n const rectRef = React.useRef<DOMRect>(undefined);\n const isSlidingFromBottom = !inverted;\n\n function getValueFromPointer(pointerPosition: number) {\n const rect = rectRef.current || sliderRef.current!.getBoundingClientRect();\n const input: [number, number] = [0, rect.height];\n const output: [number, number] = isSlidingFromBottom ? [max, min] : [min, max];\n const value = linearScale(input, output);\n\n rectRef.current = rect;\n return value(pointerPosition - rect.top);\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isSlidingFromBottom ? 'bottom' : 'top'}\n endEdge={isSlidingFromBottom ? 'top' : 'bottom'}\n size=\"height\"\n direction={isSlidingFromBottom ? 1 : -1}\n >\n <SliderImpl\n data-orientation=\"vertical\"\n {...sliderProps}\n ref={ref}\n style={{\n ...sliderProps.style,\n ['--radix-slider-thumb-transform' as any]: 'translateY(50%)',\n }}\n onSlideStart={(event) => {\n const value = getValueFromPointer(event.clientY);\n onSlideStart?.(value);\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.clientY);\n onSlideMove?.(value);\n }}\n onSlideEnd={() => {\n rectRef.current = undefined;\n onSlideEnd?.();\n }}\n onStepKeyDown={(event) => {\n const slideDirection = isSlidingFromBottom ? 'from-bottom' : 'from-top';\n const isBackKey = BACK_KEYS[slideDirection].includes(event.key);\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });\n }}\n />\n </SliderOrientationProvider>\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\ntype SliderImplElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ntype SliderImplPrivateProps = {\n onSlideStart(event: React.PointerEvent): void;\n onSlideMove(event: React.PointerEvent): void;\n onSlideEnd(event: React.PointerEvent): void;\n onHomeKeyDown(event: React.KeyboardEvent): void;\n onEndKeyDown(event: React.KeyboardEvent): void;\n onStepKeyDown(event: React.KeyboardEvent): void;\n};\ninterface SliderImplProps extends PrimitiveDivProps, SliderImplPrivateProps {}\n\nconst SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(\n (props: ScopedProps<SliderImplProps>, forwardedRef) => {\n const {\n __scopeSlider,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onHomeKeyDown,\n onEndKeyDown,\n onStepKeyDown,\n ...sliderProps\n } = props;\n const context = useSliderContext(SLIDER_NAME, __scopeSlider);\n\n return (\n <Primitive.span\n {...sliderProps}\n ref={forwardedRef}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if (event.key === 'Home') {\n onHomeKeyDown(event);\n // Prevent scrolling to page start\n event.preventDefault();\n } else if (event.key === 'End') {\n onEndKeyDown(event);\n // Prevent scrolling to page end\n event.preventDefault();\n } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {\n onStepKeyDown(event);\n // Prevent scrolling for directional key presses\n event.preventDefault();\n }\n })}\n onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n const target = event.target as HTMLElement;\n target.setPointerCapture(event.pointerId);\n // Prevent browser focus behaviour because we focus a thumb manually when values change.\n event.preventDefault();\n // Touch devices have a delay before focusing so won't focus if touch immediately moves\n // away from target (sliding). We want thumb to focus regardless.\n if (context.thumbs.has(target)) {\n target.focus();\n } else {\n onSlideStart(event);\n }\n })}\n onPointerMove={composeEventHandlers(props.onPointerMove, (event) => {\n const target = event.target as HTMLElement;\n if (target.hasPointerCapture(event.pointerId)) onSlideMove(event);\n })}\n onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n const target = event.target as HTMLElement;\n if (target.hasPointerCapture(event.pointerId)) {\n target.releasePointerCapture(event.pointerId);\n onSlideEnd(event);\n }\n })}\n />\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrack\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRACK_NAME = 'SliderTrack';\n\ntype SliderTrackElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface SliderTrackProps extends PrimitiveSpanProps {}\n\nconst SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(\n (props: ScopedProps<SliderTrackProps>, forwardedRef) => {\n const { __scopeSlider, ...trackProps } = props;\n const context = useSliderContext(TRACK_NAME, __scopeSlider);\n return (\n <Primitive.span\n data-disabled={context.disabled ? '' : undefined}\n data-orientation={context.orientation}\n {...trackProps}\n ref={forwardedRef}\n />\n );\n }\n);\n\nSliderTrack.displayName = TRACK_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderRange\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderRange';\n\ntype SliderRangeElement = React.ComponentRef<typeof Primitive.span>;\ninterface SliderRangeProps extends PrimitiveSpanProps {}\n\nconst SliderRange = React.forwardRef<SliderRangeElement, SliderRangeProps>(\n (props: ScopedProps<SliderRangeProps>, forwardedRef) => {\n const { __scopeSlider, ...rangeProps } = props;\n const context = useSliderContext(RANGE_NAME, __scopeSlider);\n const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);\n const ref = React.useRef<HTMLSpanElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const valuesCount = context.values.length;\n const percentages = context.values.map((value) =>\n convertValueToPercentage(value, context.min, context.max)\n );\n const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;\n const offsetEnd = 100 - Math.max(...percentages);\n\n return (\n <Primitive.span\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n {...rangeProps}\n ref={composedRefs}\n style={{\n ...props.style,\n [orientation.startEdge]: offsetStart + '%',\n [orientation.endEdge]: offsetEnd + '%',\n }}\n />\n );\n }\n);\n\nSliderRange.displayName = RANGE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb';\n\ntype SliderThumbElement = SliderThumbImplElement;\ninterface SliderThumbProps extends Omit<SliderThumbImplProps, 'index'> {}\n\nconst SliderThumb = React.forwardRef<SliderThumbElement, SliderThumbProps>(\n (props: ScopedProps<SliderThumbProps>, forwardedRef) => {\n const getItems = useCollection(props.__scopeSlider);\n const [thumb, setThumb] = React.useState<SliderThumbImplElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));\n const index = React.useMemo(\n () => (thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1),\n [getItems, thumb]\n );\n return <SliderThumbImpl {...props} ref={composedRefs} index={index} />;\n }\n);\n\ntype SliderThumbImplElement = React.ComponentRef<typeof Primitive.span>;\ninterface SliderThumbImplProps extends PrimitiveSpanProps {\n index: number;\n name?: string;\n}\n\nconst SliderThumbImpl = React.forwardRef<SliderThumbImplElement, SliderThumbImplProps>(\n (props: ScopedProps<SliderThumbImplProps>, forwardedRef) => {\n const { __scopeSlider, index, name, ...thumbProps } = props;\n const context = useSliderContext(THUMB_NAME, __scopeSlider);\n const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);\n const [thumb, setThumb] = React.useState<HTMLSpanElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = thumb ? context.form || !!thumb.closest('form') : true;\n const size = useSize(thumb);\n // We cast because index could be `-1` which would return undefined\n const value = context.values[index] as number | undefined;\n const percent =\n value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max);\n const label = getLabel(index, context.values.length);\n const orientationSize = size?.[orientation.size];\n const thumbInBoundsOffset = orientationSize\n ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction)\n : 0;\n\n React.useEffect(() => {\n if (thumb) {\n context.thumbs.add(thumb);\n return () => {\n context.thumbs.delete(thumb);\n };\n }\n }, [thumb, context.thumbs]);\n\n return (\n <span\n style={{\n transform: 'var(--radix-slider-thumb-transform)',\n position: 'absolute',\n [orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`,\n }}\n >\n <Collection.ItemSlot scope={props.__scopeSlider}>\n <Primitive.span\n role=\"slider\"\n aria-label={props['aria-label'] || label}\n aria-valuemin={context.min}\n aria-valuenow={value}\n aria-valuemax={context.max}\n aria-orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n tabIndex={context.disabled ? undefined : 0}\n {...thumbProps}\n ref={composedRefs}\n /**\n * There will be no value on initial render while we work out the index so we hide thumbs\n * without a value, otherwise SSR will render them in the wrong position before they\n * snap into the correct position during hydration which would be visually jarring for\n * slower connections.\n */\n style={value === undefined ? { display: 'none' } : props.style}\n onFocus={composeEventHandlers(props.onFocus, () => {\n context.valueIndexToChangeRef.current = index;\n })}\n />\n </Collection.ItemSlot>\n\n {isFormControl && (\n <SliderBubbleInput\n key={index}\n name={\n name ??\n (context.name ? context.name + (context.values.length > 1 ? '[]' : '') : undefined)\n }\n form={context.form}\n value={value}\n />\n )}\n </span>\n );\n }\n);\n\nSliderThumb.displayName = THUMB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'RadioBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface SliderBubbleInputProps extends InputProps {}\n\nconst SliderBubbleInput = React.forwardRef<HTMLInputElement, SliderBubbleInputProps>(\n ({ __scopeSlider, value, ...props }: ScopedProps<SliderBubbleInputProps>, forwardedRef) => {\n const ref = React.useRef<HTMLInputElement>(null);\n const composedRefs = useComposedRefs(ref, forwardedRef);\n const prevValue = usePrevious(value);\n\n // Bubble value change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current;\n if (!input) return;\n\n const inputProto = window.HTMLInputElement.prototype;\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor;\n const setValue = descriptor.set;\n if (prevValue !== value && setValue) {\n const event = new Event('input', { bubbles: true });\n setValue.call(input, value);\n input.dispatchEvent(event);\n }\n }, [prevValue, value]);\n\n /**\n * We purposefully do not use `type=\"hidden\"` here otherwise forms that\n * wrap it will not be able to access its value via the FormData API.\n *\n * We purposefully do not add the `value` attribute here to allow the value\n * to be set programmatically and bubble to any parent form `onChange` event.\n * Adding the `value` will cause React to consider the programmatic\n * dispatch a duplicate and it will get swallowed.\n */\n return (\n <Primitive.input\n style={{ display: 'none' }}\n {...props}\n ref={composedRefs}\n defaultValue={value}\n />\n );\n }\n);\n\nSliderBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\n const nextValues = [...prevValues];\n nextValues[atIndex] = nextValue;\n return nextValues.sort((a, b) => a - b);\n}\n\nfunction convertValueToPercentage(value: number, min: number, max: number) {\n const maxSteps = max - min;\n const percentPerStep = 100 / maxSteps;\n const percentage = percentPerStep * (value - min);\n return clamp(percentage, [0, 100]);\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nfunction getLabel(index: number, totalValues: number) {\n if (totalValues > 2) {\n return `Value ${index + 1} of ${totalValues}`;\n } else if (totalValues === 2) {\n return ['Minimum', 'Maximum'][index];\n } else {\n return undefined;\n }\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nfunction getClosestValueIndex(values: number[], nextValue: number) {\n if (values.length === 1) return 0;\n const distances = values.map((value) => Math.abs(value - nextValue));\n const closestDistance = Math.min(...distances);\n return distances.indexOf(closestDistance);\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nfunction getThumbInBoundsOffset(width: number, left: number, direction: number) {\n const halfWidth = width / 2;\n const halfPercent = 50;\n const offset = linearScale([0, halfPercent], [0, halfWidth]);\n return (halfWidth - offset(left) * direction) * direction;\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nfunction getStepsBetweenValues(values: number[]) {\n return values.slice(0, -1).map((value, index) => values[index + 1]! - value);\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nfunction hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {\n if (minStepsBetweenValues > 0) {\n const stepsBetweenValues = getStepsBetweenValues(values);\n const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);\n return actualMinStepsBetweenValues >= minStepsBetweenValues;\n }\n return true;\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nfunction linearScale(input: readonly [number, number], output: readonly [number, number]) {\n return (value: number) => {\n if (input[0] === input[1] || output[0] === output[1]) return output[0];\n const ratio = (output[1] - output[0]) / (input[1] - input[0]);\n return output[0] + ratio * (value - input[0]);\n };\n}\n\nfunction getDecimalCount(value: number) {\n return (String(value).split('.')[1] || '').length;\n}\n\nfunction roundValue(value: number, decimalCount: number) {\n const rounder = Math.pow(10, decimalCount);\n return Math.round(value * rounder) / rounder;\n}\n\nconst Root = Slider;\nconst Track = SliderTrack;\nconst Range = SliderRange;\nconst Thumb = SliderThumb;\n\nexport {\n createSliderScope,\n //\n Slider,\n SliderTrack,\n SliderRange,\n SliderThumb,\n //\n Root,\n Track,\n Range,\n Thumb,\n};\nexport type { SliderProps, SliderTrackProps, SliderRangeProps, SliderThumbProps };\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport { clamp } from '@radix-ui/number';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { usePrevious } from '@radix-ui/react-use-previous';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { createCollection } from '@radix-ui/react-collection';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Direction = 'ltr' | 'rtl';\n\nconst PAGE_KEYS = ['PageUp', 'PageDown'];\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\ntype SlideDirection = 'from-left' | 'from-right' | 'from-bottom' | 'from-top';\nconst BACK_KEYS: Record<SlideDirection, string[]> = {\n 'from-left': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n 'from-right': ['Home', 'PageDown', 'ArrowDown', 'ArrowRight'],\n 'from-bottom': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n 'from-top': ['Home', 'PageDown', 'ArrowUp', 'ArrowLeft'],\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\nconst SLIDER_NAME = 'Slider';\n\nconst [Collection, useCollection, createCollectionScope] =\n createCollection<SliderThumbElement>(SLIDER_NAME);\n\ntype ScopedProps<P> = P & { __scopeSlider?: Scope };\nconst [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME, [\n createCollectionScope,\n]);\n\ntype SliderContextValue = {\n name: string | undefined;\n disabled: boolean | undefined;\n min: number;\n max: number;\n values: number[];\n valueIndexToChangeRef: React.MutableRefObject<number>;\n thumbs: Set<SliderThumbElement>;\n orientation: SliderProps['orientation'];\n form: string | undefined;\n};\n\nconst [SliderProvider, useSliderContext] = createSliderContext<SliderContextValue>(SLIDER_NAME);\n\ntype SliderElement = SliderHorizontalElement | SliderVerticalElement;\ninterface SliderProps\n extends Omit<\n SliderHorizontalProps | SliderVerticalProps,\n keyof SliderOrientationPrivateProps | 'defaultValue'\n > {\n name?: string;\n disabled?: boolean;\n orientation?: React.AriaAttributes['aria-orientation'];\n dir?: Direction;\n min?: number;\n max?: number;\n step?: number;\n minStepsBetweenThumbs?: number;\n value?: number[];\n defaultValue?: number[];\n onValueChange?(value: number[]): void;\n onValueCommit?(value: number[]): void;\n inverted?: boolean;\n form?: string;\n}\n\nconst Slider = React.forwardRef<SliderElement, SliderProps>(\n (props: ScopedProps<SliderProps>, forwardedRef) => {\n const {\n name,\n min = 0,\n max = 100,\n step = 1,\n orientation = 'horizontal',\n disabled = false,\n minStepsBetweenThumbs = 0,\n defaultValue = [min],\n value,\n onValueChange = () => {},\n onValueCommit = () => {},\n inverted = false,\n form,\n ...sliderProps\n } = props;\n const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set());\n const valueIndexToChangeRef = React.useRef<number>(0);\n const isHorizontal = orientation === 'horizontal';\n const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;\n\n const [values = [], setValues] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange: (value) => {\n const thumbs = [...thumbRefs.current];\n thumbs[valueIndexToChangeRef.current]?.focus();\n onValueChange(value);\n },\n });\n const valuesBeforeSlideStartRef = React.useRef(values);\n\n function handleSlideStart(value: number) {\n const closestIndex = getClosestValueIndex(values, value);\n updateValues(value, closestIndex);\n }\n\n function handleSlideMove(value: number) {\n updateValues(value, valueIndexToChangeRef.current);\n }\n\n function handleSlideEnd() {\n const prevValue = valuesBeforeSlideStartRef.current[valueIndexToChangeRef.current];\n const nextValue = values[valueIndexToChangeRef.current];\n const hasChanged = nextValue !== prevValue;\n if (hasChanged) onValueCommit(values);\n }\n\n function updateValues(value: number, atIndex: number, { commit } = { commit: false }) {\n const decimalCount = getDecimalCount(step);\n const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount);\n const nextValue = clamp(snapToStep, [min, max]);\n\n setValues((prevValues = []) => {\n const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);\n if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {\n valueIndexToChangeRef.current = nextValues.indexOf(nextValue);\n const hasChanged = String(nextValues) !== String(prevValues);\n if (hasChanged && commit) onValueCommit(nextValues);\n return hasChanged ? nextValues : prevValues;\n } else {\n return prevValues;\n }\n });\n }\n\n return (\n <SliderProvider\n scope={props.__scopeSlider}\n name={name}\n disabled={disabled}\n min={min}\n max={max}\n valueIndexToChangeRef={valueIndexToChangeRef}\n thumbs={thumbRefs.current}\n values={values}\n orientation={orientation}\n form={form}\n >\n <Collection.Provider scope={props.__scopeSlider}>\n <Collection.Slot scope={props.__scopeSlider}>\n <SliderOrientation\n aria-disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...sliderProps}\n ref={forwardedRef}\n onPointerDown={composeEventHandlers(sliderProps.onPointerDown, () => {\n if (!disabled) valuesBeforeSlideStartRef.current = values;\n })}\n min={min}\n max={max}\n inverted={inverted}\n onSlideStart={disabled ? undefined : handleSlideStart}\n onSlideMove={disabled ? undefined : handleSlideMove}\n onSlideEnd={disabled ? undefined : handleSlideEnd}\n onHomeKeyDown={() => !disabled && updateValues(min, 0, { commit: true })}\n onEndKeyDown={() =>\n !disabled && updateValues(max, values.length - 1, { commit: true })\n }\n onStepKeyDown={({ event, direction: stepDirection }) => {\n if (!disabled) {\n const isPageKey = PAGE_KEYS.includes(event.key);\n const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key));\n const multiplier = isSkipKey ? 10 : 1;\n const atIndex = valueIndexToChangeRef.current;\n const value = values[atIndex]!;\n const stepInDirection = step * multiplier * stepDirection;\n updateValues(value + stepInDirection, atIndex, { commit: true });\n }\n }}\n />\n </Collection.Slot>\n </Collection.Provider>\n </SliderProvider>\n );\n },\n);\n\nSlider.displayName = SLIDER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\ntype Side = 'top' | 'right' | 'bottom' | 'left';\n\nconst [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext<{\n startEdge: Side;\n endEdge: Side;\n size: keyof NonNullable<ReturnType<typeof useSize>>;\n direction: number;\n}>(SLIDER_NAME, {\n startEdge: 'left',\n endEdge: 'right',\n size: 'width',\n direction: 1,\n});\n\ntype SliderOrientationPrivateProps = {\n min: number;\n max: number;\n inverted: boolean;\n onSlideStart?(value: number): void;\n onSlideMove?(value: number): void;\n onSlideEnd?(): void;\n onHomeKeyDown(event: React.KeyboardEvent): void;\n onEndKeyDown(event: React.KeyboardEvent): void;\n onStepKeyDown(step: { event: React.KeyboardEvent; direction: number }): void;\n};\ninterface SliderOrientationProps\n extends Omit<SliderImplProps, keyof SliderImplPrivateProps>,\n SliderOrientationPrivateProps {}\n\ntype SliderHorizontalElement = SliderImplElement;\ninterface SliderHorizontalProps extends SliderOrientationProps {\n dir?: Direction;\n}\n\nconst SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizontalProps>(\n (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n const {\n min,\n max,\n dir,\n inverted,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onStepKeyDown,\n ...sliderProps\n } = props;\n const [slider, setSlider] = React.useState<SliderImplElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setSlider(node));\n const rectRef = React.useRef<DOMRect>(undefined);\n const direction = useDirection(dir);\n const isDirectionLTR = direction === 'ltr';\n const isSlidingFromLeft = (isDirectionLTR && !inverted) || (!isDirectionLTR && inverted);\n\n function getValueFromPointer(pointerPosition: number) {\n const rect = rectRef.current || slider!.getBoundingClientRect();\n const input: [number, number] = [0, rect.width];\n const output: [number, number] = isSlidingFromLeft ? [min, max] : [max, min];\n const value = linearScale(input, output);\n\n rectRef.current = rect;\n return value(pointerPosition - rect.left);\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isSlidingFromLeft ? 'left' : 'right'}\n endEdge={isSlidingFromLeft ? 'right' : 'left'}\n direction={isSlidingFromLeft ? 1 : -1}\n size=\"width\"\n >\n <SliderImpl\n dir={direction}\n data-orientation=\"horizontal\"\n {...sliderProps}\n ref={composedRefs}\n style={{\n ...sliderProps.style,\n ['--radix-slider-thumb-transform' as any]: 'translateX(-50%)',\n }}\n onSlideStart={(event) => {\n const value = getValueFromPointer(event.clientX);\n onSlideStart?.(value);\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.clientX);\n onSlideMove?.(value);\n }}\n onSlideEnd={() => {\n rectRef.current = undefined;\n onSlideEnd?.();\n }}\n onStepKeyDown={(event) => {\n const slideDirection = isSlidingFromLeft ? 'from-left' : 'from-right';\n const isBackKey = BACK_KEYS[slideDirection].includes(event.key);\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });\n }}\n />\n </SliderOrientationProvider>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * SliderVertical\n * -----------------------------------------------------------------------------------------------*/\n\ntype SliderVerticalElement = SliderImplElement;\ninterface SliderVerticalProps extends SliderOrientationProps {}\n\nconst SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalProps>(\n (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n const {\n min,\n max,\n inverted,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onStepKeyDown,\n ...sliderProps\n } = props;\n const sliderRef = React.useRef<SliderImplElement>(null);\n const ref = useComposedRefs(forwardedRef, sliderRef);\n const rectRef = React.useRef<DOMRect>(undefined);\n const isSlidingFromBottom = !inverted;\n\n function getValueFromPointer(pointerPosition: number) {\n const rect = rectRef.current || sliderRef.current!.getBoundingClientRect();\n const input: [number, number] = [0, rect.height];\n const output: [number, number] = isSlidingFromBottom ? [max, min] : [min, max];\n const value = linearScale(input, output);\n\n rectRef.current = rect;\n return value(pointerPosition - rect.top);\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isSlidingFromBottom ? 'bottom' : 'top'}\n endEdge={isSlidingFromBottom ? 'top' : 'bottom'}\n size=\"height\"\n direction={isSlidingFromBottom ? 1 : -1}\n >\n <SliderImpl\n data-orientation=\"vertical\"\n {...sliderProps}\n ref={ref}\n style={{\n ...sliderProps.style,\n ['--radix-slider-thumb-transform' as any]: 'translateY(50%)',\n }}\n onSlideStart={(event) => {\n const value = getValueFromPointer(event.clientY);\n onSlideStart?.(value);\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.clientY);\n onSlideMove?.(value);\n }}\n onSlideEnd={() => {\n rectRef.current = undefined;\n onSlideEnd?.();\n }}\n onStepKeyDown={(event) => {\n const slideDirection = isSlidingFromBottom ? 'from-bottom' : 'from-top';\n const isBackKey = BACK_KEYS[slideDirection].includes(event.key);\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });\n }}\n />\n </SliderOrientationProvider>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\ntype SliderImplElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ntype SliderImplPrivateProps = {\n onSlideStart(event: React.PointerEvent): void;\n onSlideMove(event: React.PointerEvent): void;\n onSlideEnd(event: React.PointerEvent): void;\n onHomeKeyDown(event: React.KeyboardEvent): void;\n onEndKeyDown(event: React.KeyboardEvent): void;\n onStepKeyDown(event: React.KeyboardEvent): void;\n};\ninterface SliderImplProps extends PrimitiveDivProps, SliderImplPrivateProps {}\n\nconst SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(\n (props: ScopedProps<SliderImplProps>, forwardedRef) => {\n const {\n __scopeSlider,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onHomeKeyDown,\n onEndKeyDown,\n onStepKeyDown,\n ...sliderProps\n } = props;\n const context = useSliderContext(SLIDER_NAME, __scopeSlider);\n\n return (\n <Primitive.span\n {...sliderProps}\n ref={forwardedRef}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if (event.key === 'Home') {\n onHomeKeyDown(event);\n // Prevent scrolling to page start\n event.preventDefault();\n } else if (event.key === 'End') {\n onEndKeyDown(event);\n // Prevent scrolling to page end\n event.preventDefault();\n } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {\n onStepKeyDown(event);\n // Prevent scrolling for directional key presses\n event.preventDefault();\n }\n })}\n onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n const target = event.target as HTMLElement;\n target.setPointerCapture(event.pointerId);\n // Prevent browser focus behaviour because we focus a thumb manually when values change.\n event.preventDefault();\n // Touch devices have a delay before focusing so won't focus if touch immediately moves\n // away from target (sliding). We want thumb to focus regardless.\n if (context.thumbs.has(target)) {\n target.focus();\n } else {\n onSlideStart(event);\n }\n })}\n onPointerMove={composeEventHandlers(props.onPointerMove, (event) => {\n const target = event.target as HTMLElement;\n if (target.hasPointerCapture(event.pointerId)) onSlideMove(event);\n })}\n onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n const target = event.target as HTMLElement;\n if (target.hasPointerCapture(event.pointerId)) {\n target.releasePointerCapture(event.pointerId);\n onSlideEnd(event);\n }\n })}\n />\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrack\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRACK_NAME = 'SliderTrack';\n\ntype SliderTrackElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface SliderTrackProps extends PrimitiveSpanProps {}\n\nconst SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(\n (props: ScopedProps<SliderTrackProps>, forwardedRef) => {\n const { __scopeSlider, ...trackProps } = props;\n const context = useSliderContext(TRACK_NAME, __scopeSlider);\n return (\n <Primitive.span\n data-disabled={context.disabled ? '' : undefined}\n data-orientation={context.orientation}\n {...trackProps}\n ref={forwardedRef}\n />\n );\n },\n);\n\nSliderTrack.displayName = TRACK_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderRange\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderRange';\n\ntype SliderRangeElement = React.ComponentRef<typeof Primitive.span>;\ninterface SliderRangeProps extends PrimitiveSpanProps {}\n\nconst SliderRange = React.forwardRef<SliderRangeElement, SliderRangeProps>(\n (props: ScopedProps<SliderRangeProps>, forwardedRef) => {\n const { __scopeSlider, ...rangeProps } = props;\n const context = useSliderContext(RANGE_NAME, __scopeSlider);\n const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);\n const ref = React.useRef<HTMLSpanElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const valuesCount = context.values.length;\n const percentages = context.values.map((value) =>\n convertValueToPercentage(value, context.min, context.max),\n );\n const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;\n const offsetEnd = 100 - Math.max(...percentages);\n\n return (\n <Primitive.span\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n {...rangeProps}\n ref={composedRefs}\n style={{\n ...props.style,\n [orientation.startEdge]: offsetStart + '%',\n [orientation.endEdge]: offsetEnd + '%',\n }}\n />\n );\n },\n);\n\nSliderRange.displayName = RANGE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb';\n\ntype SliderThumbElement = SliderThumbImplElement;\ninterface SliderThumbProps extends Omit<SliderThumbImplProps, 'index'> {}\n\nconst SliderThumb = React.forwardRef<SliderThumbElement, SliderThumbProps>(\n (props: ScopedProps<SliderThumbProps>, forwardedRef) => {\n const getItems = useCollection(props.__scopeSlider);\n const [thumb, setThumb] = React.useState<SliderThumbImplElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));\n const index = React.useMemo(\n () => (thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1),\n [getItems, thumb],\n );\n return <SliderThumbImpl {...props} ref={composedRefs} index={index} />;\n },\n);\n\ntype SliderThumbImplElement = React.ComponentRef<typeof Primitive.span>;\ninterface SliderThumbImplProps extends PrimitiveSpanProps {\n index: number;\n name?: string;\n}\n\nconst SliderThumbImpl = React.forwardRef<SliderThumbImplElement, SliderThumbImplProps>(\n (props: ScopedProps<SliderThumbImplProps>, forwardedRef) => {\n const { __scopeSlider, index, name, ...thumbProps } = props;\n const context = useSliderContext(THUMB_NAME, __scopeSlider);\n const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);\n const [thumb, setThumb] = React.useState<HTMLSpanElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = thumb ? context.form || !!thumb.closest('form') : true;\n const size = useSize(thumb);\n // We cast because index could be `-1` which would return undefined\n const value = context.values[index] as number | undefined;\n const percent =\n value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max);\n const label = getLabel(index, context.values.length);\n const orientationSize = size?.[orientation.size];\n const thumbInBoundsOffset = orientationSize\n ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction)\n : 0;\n\n React.useEffect(() => {\n if (thumb) {\n context.thumbs.add(thumb);\n return () => {\n context.thumbs.delete(thumb);\n };\n }\n }, [thumb, context.thumbs]);\n\n return (\n <span\n style={{\n transform: 'var(--radix-slider-thumb-transform)',\n position: 'absolute',\n [orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`,\n }}\n >\n <Collection.ItemSlot scope={props.__scopeSlider}>\n <Primitive.span\n role=\"slider\"\n aria-label={props['aria-label'] || label}\n aria-valuemin={context.min}\n aria-valuenow={value}\n aria-valuemax={context.max}\n aria-orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n tabIndex={context.disabled ? undefined : 0}\n {...thumbProps}\n ref={composedRefs}\n /**\n * There will be no value on initial render while we work out the index so we hide thumbs\n * without a value, otherwise SSR will render them in the wrong position before they\n * snap into the correct position during hydration which would be visually jarring for\n * slower connections.\n */\n style={value === undefined ? { display: 'none' } : props.style}\n onFocus={composeEventHandlers(props.onFocus, () => {\n context.valueIndexToChangeRef.current = index;\n })}\n />\n </Collection.ItemSlot>\n\n {isFormControl && (\n <SliderBubbleInput\n key={index}\n name={\n name ??\n (context.name ? context.name + (context.values.length > 1 ? '[]' : '') : undefined)\n }\n form={context.form}\n value={value}\n />\n )}\n </span>\n );\n },\n);\n\nSliderThumb.displayName = THUMB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'RadioBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface SliderBubbleInputProps extends InputProps {}\n\nconst SliderBubbleInput = React.forwardRef<HTMLInputElement, SliderBubbleInputProps>(\n ({ __scopeSlider, value, ...props }: ScopedProps<SliderBubbleInputProps>, forwardedRef) => {\n const ref = React.useRef<HTMLInputElement>(null);\n const composedRefs = useComposedRefs(ref, forwardedRef);\n const prevValue = usePrevious(value);\n\n // Bubble value change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current;\n if (!input) return;\n\n const inputProto = window.HTMLInputElement.prototype;\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor;\n const setValue = descriptor.set;\n if (prevValue !== value && setValue) {\n const event = new Event('input', { bubbles: true });\n setValue.call(input, value);\n input.dispatchEvent(event);\n }\n }, [prevValue, value]);\n\n /**\n * We purposefully do not use `type=\"hidden\"` here otherwise forms that\n * wrap it will not be able to access its value via the FormData API.\n *\n * We purposefully do not add the `value` attribute here to allow the value\n * to be set programmatically and bubble to any parent form `onChange` event.\n * Adding the `value` will cause React to consider the programmatic\n * dispatch a duplicate and it will get swallowed.\n */\n return (\n <Primitive.input\n style={{ display: 'none' }}\n {...props}\n ref={composedRefs}\n defaultValue={value}\n />\n );\n },\n);\n\nSliderBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\n const nextValues = [...prevValues];\n nextValues[atIndex] = nextValue;\n return nextValues.sort((a, b) => a - b);\n}\n\nfunction convertValueToPercentage(value: number, min: number, max: number) {\n const maxSteps = max - min;\n const percentPerStep = 100 / maxSteps;\n const percentage = percentPerStep * (value - min);\n return clamp(percentage, [0, 100]);\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nfunction getLabel(index: number, totalValues: number) {\n if (totalValues > 2) {\n return `Value ${index + 1} of ${totalValues}`;\n } else if (totalValues === 2) {\n return ['Minimum', 'Maximum'][index];\n } else {\n return undefined;\n }\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nfunction getClosestValueIndex(values: number[], nextValue: number) {\n if (values.length === 1) return 0;\n const distances = values.map((value) => Math.abs(value - nextValue));\n const closestDistance = Math.min(...distances);\n return distances.indexOf(closestDistance);\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nfunction getThumbInBoundsOffset(width: number, left: number, direction: number) {\n const halfWidth = width / 2;\n const halfPercent = 50;\n const offset = linearScale([0, halfPercent], [0, halfWidth]);\n return (halfWidth - offset(left) * direction) * direction;\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nfunction getStepsBetweenValues(values: number[]) {\n return values.slice(0, -1).map((value, index) => values[index + 1]! - value);\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nfunction hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {\n if (minStepsBetweenValues > 0) {\n const stepsBetweenValues = getStepsBetweenValues(values);\n const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);\n return actualMinStepsBetweenValues >= minStepsBetweenValues;\n }\n return true;\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nfunction linearScale(input: readonly [number, number], output: readonly [number, number]) {\n return (value: number) => {\n if (input[0] === input[1] || output[0] === output[1]) return output[0];\n const ratio = (output[1] - output[0]) / (input[1] - input[0]);\n return output[0] + ratio * (value - input[0]);\n };\n}\n\nfunction getDecimalCount(value: number) {\n return (String(value).split('.')[1] || '').length;\n}\n\nfunction roundValue(value: number, decimalCount: number) {\n const rounder = Math.pow(10, decimalCount);\n return Math.round(value * rounder) / rounder;\n}\n\nconst Root = Slider;\nconst Track = SliderTrack;\nconst Range = SliderRange;\nconst Thumb = SliderThumb;\n\nexport {\n createSliderScope,\n //\n Slider,\n SliderTrack,\n SliderRange,\n SliderThumb,\n //\n Root,\n Track,\n Range,\n Thumb,\n};\nexport type { SliderProps, SliderTrackProps, SliderRangeProps, SliderThumbProps };\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["value"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@radix-ui/react-slider",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.7-rc.1762291353631",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"source": "./src/index.ts",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -11,28 +11,28 @@
|
|
|
11
11
|
],
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@radix-ui/number": "1.1.1",
|
|
15
14
|
"@radix-ui/primitive": "1.1.3",
|
|
16
|
-
"@radix-ui/
|
|
15
|
+
"@radix-ui/number": "1.1.1",
|
|
16
|
+
"@radix-ui/react-collection": "1.1.9-rc.1762291353631",
|
|
17
17
|
"@radix-ui/react-compose-refs": "1.1.2",
|
|
18
|
-
"@radix-ui/react-context": "1.1.
|
|
19
|
-
"@radix-ui/react-
|
|
20
|
-
"@radix-ui/react-use-layout-effect": "1.1.1",
|
|
18
|
+
"@radix-ui/react-context": "1.1.3",
|
|
19
|
+
"@radix-ui/react-primitive": "2.1.4",
|
|
21
20
|
"@radix-ui/react-use-controllable-state": "1.2.2",
|
|
22
|
-
"@radix-ui/react-
|
|
21
|
+
"@radix-ui/react-direction": "1.1.2-rc.1762291353631",
|
|
22
|
+
"@radix-ui/react-use-layout-effect": "1.1.1",
|
|
23
23
|
"@radix-ui/react-use-previous": "1.1.1",
|
|
24
24
|
"@radix-ui/react-use-size": "1.1.1"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@types/react": "^19.
|
|
28
|
-
"@types/react-dom": "^19.
|
|
29
|
-
"eslint": "^9.
|
|
30
|
-
"react": "^19.
|
|
31
|
-
"react-dom": "^19.
|
|
32
|
-
"typescript": "^5.
|
|
27
|
+
"@types/react": "^19.2.2",
|
|
28
|
+
"@types/react-dom": "^19.2.2",
|
|
29
|
+
"eslint": "^9.38.0",
|
|
30
|
+
"react": "^19.2.0",
|
|
31
|
+
"react-dom": "^19.2.0",
|
|
32
|
+
"typescript": "^5.9.3",
|
|
33
33
|
"@repo/builder": "0.0.0",
|
|
34
|
-
"@repo/
|
|
35
|
-
"@repo/
|
|
34
|
+
"@repo/eslint-config": "0.0.0",
|
|
35
|
+
"@repo/typescript-config": "0.0.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"@types/react": "*",
|
|
@@ -59,6 +59,7 @@
|
|
|
59
59
|
"scripts": {
|
|
60
60
|
"lint": "eslint --max-warnings 0 src",
|
|
61
61
|
"clean": "rm -rf dist",
|
|
62
|
+
"reset": "rm -rf dist node_modules",
|
|
62
63
|
"typecheck": "tsc --noEmit",
|
|
63
64
|
"build": "radix-build"
|
|
64
65
|
},
|