@base-ui/react/slider/thumb/SliderThumb.mjs

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

'use client';

var _PrehydrationScript;
import * as React from 'react';
import { useStableCallback } from '@base-ui/utils/useStableCallback';
import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
import { ownerWindow } from '@base-ui/utils/owner';
import { script as prehydrationScript } from '#prehydration/slider/thumb';
import { clamp } from "../../internals/clamp.mjs";
import { formatNumber } from "../../utils/formatNumber.mjs";
import { mergeProps } from "../../merge-props/index.mjs";
import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
import { useIsHydrating } from "../../utils/useIsHydrating.mjs";
import { useRenderElement } from "../../internals/useRenderElement.mjs";
import { valueToPercent } from "../../utils/valueToPercent.mjs";
import { ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT, HOME, END, COMPOSITE_KEYS, PAGE_UP, PAGE_DOWN } from "../../internals/composite/composite.mjs";
import { useCompositeListItem } from "../../internals/composite/list/useCompositeListItem.mjs";
import { useDirection } from "../../internals/direction-context/DirectionContext.mjs";
import { PrehydrationScript } from "../../internals/PrehydrationScript.mjs";
import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.mjs";
import { contains } from "../../floating-ui-react/utils.mjs";
import { matchesFocusVisible } from "../../floating-ui-react/utils/element.mjs";
import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.mjs";
import { getMidpoint } from "../utils/getMidpoint.mjs";
import { getSliderValue } from "../utils/getSliderValue.mjs";
import { getDecimalPrecision, roundValueToStep } from "../utils/roundValueToStep.mjs";
import { useSliderRootContext } from "../root/SliderRootContext.mjs";
import { sliderStateAttributesMapping } from "../root/stateAttributesMapping.mjs";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const ALL_KEYS = new Set([...COMPOSITE_KEYS, PAGE_UP, PAGE_DOWN]);
function getDefaultAriaValueText(values, index, format, locale) {
  if (index < 0) {
    return undefined;
  }
  if (values.length === 2) {
    return `${formatNumber(values[index], locale, format)} ${index === 0 ? 'start' : 'end'} range`;
  }
  return format ? formatNumber(values[index], locale, format) : undefined;
}
function getNewValue(thumbValue, increment, direction, min, max) {
  const value = thumbValue + increment * direction;
  const roundedValue = Number(value.toFixed(Math.max(getDecimalPrecision(thumbValue), getDecimalPrecision(increment), getDecimalPrecision(min))));
  return clamp(roundedValue, min, max);
}

/**
 * The draggable part of the slider at the tip of the indicator.
 * Renders a `<div>` element and a nested `<input type="range">`.
 *
 * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
 */
export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(componentProps, forwardedRef) {
  const {
    render,
    children: childrenProp,
    className,
    'aria-describedby': ariaDescribedByProp,
    'aria-label': ariaLabelProp,
    'aria-labelledby': ariaLabelledByProp,
    'aria-valuetext': ariaValueTextProp,
    disabled: disabledProp = false,
    getAriaLabel: getAriaLabelProp,
    getAriaValueText: getAriaValueTextProp,
    id: idProp,
    index: indexProp,
    inputRef: inputRefProp,
    onBlur: onBlurProp,
    onFocus: onFocusProp,
    onKeyDown: onKeyDownProp,
    tabIndex: tabIndexProp,
    style,
    ...elementProps
  } = componentProps;
  const id = useBaseUiId(idProp);
  const {
    active: activeIndex,
    lastUsedThumbIndex,
    controlRef,
    disabled: contextDisabled,
    validation,
    format,
    handleInputChange,
    inset,
    labelId,
    largeStep,
    locale,
    max,
    min,
    minStepsBetweenValues,
    form,
    name,
    orientation,
    pressedThumbCenterOffsetRef,
    pressedThumbIndexRef,
    renderBeforeHydration,
    setActive,
    setIndicatorPosition,
    state,
    step,
    thumbRefs,
    values: sliderValues
  } = useSliderRootContext();
  const direction = useDirection();
  const disabled = disabledProp || contextDisabled;
  const range = sliderValues.length > 1;
  const vertical = orientation === 'vertical';
  const rtl = direction === 'rtl';
  const {
    setTouched,
    setFocused,
    validationMode
  } = useFieldRootContext();
  const thumbRef = React.useRef(null);
  const inputRef = React.useRef(null);
  const restoringFocusVisibleRef = React.useRef(false);

  // Attached to the `input` (not the thumb wrapper) so `event.currentTarget` is the
  // input, matching `onKeyDown`. The synthetic blur/focus dispatched while restoring
  // `:focus-visible` is internal and must not be forwarded to the user's handlers.
  const handleFocusProp = useStableCallback(event => {
    if (restoringFocusVisibleRef.current) {
      return;
    }
    onFocusProp?.(event);
  });
  const handleBlurProp = useStableCallback(event => {
    if (restoringFocusVisibleRef.current) {
      return;
    }
    onBlurProp?.(event);
  });
  const defaultInputId = useBaseUiId();
  const labelableId = useLabelableId();
  const inputId = range ? defaultInputId : labelableId;
  const thumbMetadata = React.useMemo(() => ({
    inputId
  }), [inputId]);
  const {
    ref: listItemRef,
    index: compositeIndex
  } = useCompositeListItem({
    metadata: thumbMetadata
  });
  const index = !range ? 0 : indexProp ?? compositeIndex;
  const last = index === sliderValues.length - 1;
  const thumbValue = sliderValues[index];
  const thumbValuePercent = valueToPercent(thumbValue, min, max);
  const [positionPercent, setPositionPercent] = React.useState();
  const isHydrating = useIsHydrating();
  const safeLastUsedThumbIndex = lastUsedThumbIndex >= 0 && lastUsedThumbIndex < sliderValues.length ? lastUsedThumbIndex : -1;
  const getInsetPosition = useStableCallback(() => {
    const control = controlRef.current;
    const thumb = thumbRef.current;
    if (!control || !thumb) {
      return;
    }
    const thumbRect = thumb.getBoundingClientRect();
    const controlRect = control.getBoundingClientRect();
    const side = vertical ? 'height' : 'width';
    // the total travel distance adjusted to account for the thumb size
    const controlSize = controlRect[side] - thumbRect[side];
    // px distance from the starting edge (inline-start or bottom) to the thumb center
    const thumbOffsetFromControlEdge = thumbRect[side] / 2 + controlSize * thumbValuePercent / 100;
    const nextPositionPercent = thumbOffsetFromControlEdge / controlRect[side] * 100;
    const nextInsetPosition = Number.isFinite(nextPositionPercent) ? nextPositionPercent : undefined;
    setPositionPercent(nextInsetPosition);
    if (index === 0) {
      setIndicatorPosition(prevPosition => [nextInsetPosition, prevPosition[1]]);
    } else if (last) {
      setIndicatorPosition(prevPosition => [prevPosition[0], nextInsetPosition]);
    }
  });
  useIsoLayoutEffect(() => {
    if (inset) {
      queueMicrotask(getInsetPosition);
    }
  }, [getInsetPosition, inset]);
  useIsoLayoutEffect(() => {
    if (inset) {
      getInsetPosition();
    }
  }, [getInsetPosition, inset, thumbValuePercent]);
  useIsoLayoutEffect(() => {
    if (!inset) {
      return undefined;
    }
    const control = controlRef.current;
    const thumb = thumbRef.current;
    if (!control || !thumb) {
      return undefined;
    }
    const ResizeObserverCtor = ownerWindow(control).ResizeObserver;
    if (typeof ResizeObserverCtor !== 'function') {
      return undefined;
    }
    const resizeObserver = new ResizeObserverCtor(getInsetPosition);
    resizeObserver.observe(control);
    resizeObserver.observe(thumb);
    return () => {
      resizeObserver.disconnect();
    };
  }, [controlRef, getInsetPosition, inset]);
  const startEdge = vertical ? 'bottom' : 'insetInlineStart';
  const crossOffsetProperty = vertical ? 'left' : 'top';
  let zIndex;
  if (range) {
    if (activeIndex === index) {
      zIndex = 2;
    } else if (safeLastUsedThumbIndex === index) {
      zIndex = 1;
    }
  } else if (activeIndex === index) {
    zIndex = 1;
  }
  let thumbStyle;
  if (!inset && !Number.isFinite(thumbValuePercent)) {
    thumbStyle = visuallyHidden;
  } else {
    thumbStyle = {
      position: 'absolute',
      [startEdge]: inset ? 'var(--position)' : `${thumbValuePercent}%`,
      [crossOffsetProperty]: '50%',
      translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
      zIndex,
      ...(inset && {
        ['--position']: `${positionPercent ?? 0}%`,
        visibility: renderBeforeHydration && isHydrating || positionPercent === undefined ? 'hidden' : undefined
      })
    };
  }
  let cssWritingMode;
  if (vertical) {
    cssWritingMode = rtl ? 'vertical-rl' : 'vertical-lr';
  }
  const ariaLabel = typeof getAriaLabelProp === 'function' ? getAriaLabelProp(index) : ariaLabelProp;
  const inputProps = mergeProps({
    'aria-label': ariaLabel,
    'aria-labelledby': ariaLabelledByProp ?? (ariaLabel == null ? labelId : undefined),
    'aria-describedby': ariaDescribedByProp,
    'aria-orientation': orientation,
    'aria-valuenow': thumbValue,
    'aria-valuetext': typeof getAriaValueTextProp === 'function' ? getAriaValueTextProp(formatNumber(thumbValue, locale, format), thumbValue, index) : ariaValueTextProp ?? getDefaultAriaValueText(sliderValues, index, format, locale),
    disabled,
    form,
    id: inputId,
    max,
    min,
    name,
    onChange(event) {
      handleInputChange(event.currentTarget.valueAsNumber, index, event);
    },
    onFocus(event) {
      const isRestoringFocusVisible = restoringFocusVisibleRef.current;
      restoringFocusVisibleRef.current = false;
      setActive(index);
      setFocused(true);
      if (isRestoringFocusVisible) {
        event.stopPropagation();
      }
    },
    onBlur(event) {
      if (restoringFocusVisibleRef.current) {
        event.stopPropagation();
        return;
      }
      setActive(-1);

      // Keep field-level blur logic from running while focus moves to another thumb
      // of the same slider, so validation doesn't commit mid-interaction.
      if (thumbRefs.current.some(thumb => contains(thumb, event.relatedTarget))) {
        return;
      }
      setTouched(true);
      setFocused(false);
      if (validationMode === 'onBlur') {
        validation.commit(getSliderValue(thumbValue, index, min, max, range, sliderValues));
      }
    },
    onKeyDown(event) {
      if (event.defaultPrevented) {
        return;
      }
      if (!ALL_KEYS.has(event.key)) {
        return;
      }
      if (COMPOSITE_KEYS.has(event.key)) {
        event.stopPropagation();
      }
      let newValue = null;
      let direction = 0;
      let increment = event.shiftKey ? largeStep : step;
      const roundedValue = roundValueToStep(thumbValue, step, min);
      switch (event.key) {
        case ARROW_UP:
          direction = 1;
          break;
        case ARROW_RIGHT:
          direction = rtl ? -1 : 1;
          break;
        case ARROW_DOWN:
          direction = -1;
          break;
        case ARROW_LEFT:
          direction = rtl ? 1 : -1;
          break;
        case PAGE_UP:
          increment = largeStep;
          direction = 1;
          break;
        case PAGE_DOWN:
          increment = largeStep;
          direction = -1;
          break;
        case END:
          newValue = range && Number.isFinite(sliderValues[index + 1]) ? sliderValues[index + 1] - step * minStepsBetweenValues : max;
          break;
        case HOME:
          newValue = range && Number.isFinite(sliderValues[index - 1]) ? sliderValues[index - 1] + step * minStepsBetweenValues : min;
          break;
        default:
          break;
      }
      if (direction !== 0) {
        newValue = getNewValue(roundedValue, increment, direction, min, max);
      }
      if (newValue !== null) {
        const input = event.currentTarget;
        if (!matchesFocusVisible(input)) {
          restoringFocusVisibleRef.current = true;
          input.blur();
          input.focus({
            preventScroll: true,
            // Show `:focus-visible` after keyboard interaction, even if the
            // thumb was previously focused by a pointer.
            focusVisible: true
          });
        }
        handleInputChange(newValue, index, event);
        event.preventDefault();
      }
    },
    step,
    style: {
      ...visuallyHidden,
      // So that VoiceOver's focus indicator matches the thumb's dimensions
      width: '100%',
      height: '100%',
      writingMode: cssWritingMode
    },
    tabIndex: tabIndexProp,
    type: 'range',
    value: thumbValue ?? ''
  }, props => validation.getValidationProps(disabled, props), {
    onFocus: handleFocusProp,
    onBlur: handleBlurProp,
    onKeyDown: onKeyDownProp
  });
  const mergedInputRef = useMergedRefs(inputRef, validation.inputRef, inputRefProp);
  const element = useRenderElement('div', componentProps, {
    state,
    ref: [forwardedRef, listItemRef, thumbRef],
    props: [{
      ['data-index']: index,
      children: /*#__PURE__*/_jsxs(React.Fragment, {
        children: [childrenProp, /*#__PURE__*/_jsx("input", {
          ref: mergedInputRef,
          ...inputProps,
          suppressHydrationWarning: true
        }), inset && last && renderBeforeHydration && (_PrehydrationScript || (_PrehydrationScript = /*#__PURE__*/_jsx(PrehydrationScript, {
          script: prehydrationScript
        })))]
      }),
      id,
      onPointerDown(event) {
        // Keep disabled thumbs from writing transient pointer state.
        if (disabled) {
          return;
        }
        pressedThumbIndexRef.current = index;
        const midpoint = getMidpoint(event.currentTarget, vertical);
        pressedThumbCenterOffsetRef.current = (vertical ? event.clientY : event.clientX) - midpoint;
      },
      style: thumbStyle,
      suppressHydrationWarning: renderBeforeHydration || undefined
    }, elementProps],
    stateAttributesMapping: sliderStateAttributesMapping
  });
  return element;
});
if (process.env.NODE_ENV !== "production") SliderThumb.displayName = "SliderThumb";