@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Slider/Slider.js

@@ -1,225 +1,362 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
 import { getBoundedValue, useEventListener, Box } from '../../utils/index.js';
 import { Track } from './Track.js';
 import { Thumb } from './Thumb.js';
 const getPercentageOfRectangle = (rect, pointerX, pointerY, orientation) => {
-    if (orientation === 'horizontal') {
-        const position = getBoundedValue(pointerX, rect.left, rect.right);
-        return (position - rect.left) / rect.width;
-    }
-    const position = getBoundedValue(pointerY, rect.top, rect.bottom);
-    return (rect.bottom - position) / rect.height;
+  if (orientation === 'horizontal') {
+    const position = getBoundedValue(pointerX, rect.left, rect.right);
+    return (position - rect.left) / rect.width;
+  }
+  const position = getBoundedValue(pointerY, rect.top, rect.bottom);
+  return (rect.bottom - position) / rect.height;
 };
 const getClosestValueIndex = (values, pointerValue) => {
-    if (1 === values.length) {
-        return 0;
-    }
-    const distances = values.map((value) => Math.abs(value - pointerValue));
-    const smallest = Math.min(...distances);
-    return distances.indexOf(smallest);
+  if (1 === values.length) {
+    return 0;
+  }
+  const distances = values.map((value) => Math.abs(value - pointerValue));
+  const smallest = Math.min(...distances);
+  return distances.indexOf(smallest);
 };
 const getDefaultTrackDisplay = (trackDisplayMode, values) => {
-    if ('auto' !== trackDisplayMode) {
-        return trackDisplayMode;
-    }
-    return values.length % 2 ? 'even-segments' : 'odd-segments';
+  if ('auto' !== trackDisplayMode) {
+    return trackDisplayMode;
+  }
+  return values.length % 2 ? 'even-segments' : 'odd-segments';
 };
 const roundValueToClosestStep = (value, step, min) => {
-    return Math.round((value - min) / step) * step + min;
+  return Math.round((value - min) / step) * step + min;
 };
 const formatNumberValue = (value, step, numDecimals) => {
-    if (Number.isInteger(step)) {
-        return value.toFixed(0);
-    }
-    return value.toFixed(numDecimals);
+  if (Number.isInteger(step)) {
+    return value.toFixed(0);
+  }
+  return value.toFixed(numDecimals);
 };
-/**
- * Focus specified thumb on Slider control
- */
 const focusThumb = (sliderContainer, activeIndex) => {
-    const doc = sliderContainer.ownerDocument;
-    if (!sliderContainer.contains(doc.activeElement) ||
-        Number(doc.activeElement?.getAttribute('data-index')) !== activeIndex) {
-        const thumbToFocus = sliderContainer.querySelector(`[data-index="${activeIndex}"]`);
-        thumbToFocus && thumbToFocus.focus();
-    }
+  const doc = sliderContainer.ownerDocument;
+  if (
+    !sliderContainer.contains(doc.activeElement) ||
+    Number(doc.activeElement?.getAttribute('data-index')) !== activeIndex
+  ) {
+    const thumbToFocus = sliderContainer.querySelector(
+      `[data-index="${activeIndex}"]`,
+    );
+    thumbToFocus && thumbToFocus.focus();
+  }
 };
-/**
- * Slider component that display Thumbs for each value specified along a Rail.
- * @example
- * <Slider values={[10]} min={0} max={60} disabled />
- * <Slider values={[10, 20]} min={0} max={50} step={2} />
- * <Slider values={[10, 20, 30, 40]} min={0} max={60}
- *   thumbMode='allow-crossing' />
- */
 export const Slider = React.forwardRef((props, ref) => {
-    const { min = 0, max = 100, values, step = 1, tooltipProps, disabled = false, tickLabels, minLabel, maxLabel, trackDisplayMode = 'auto', thumbMode = 'inhibit-crossing', onChange, onUpdate, thumbProps, className, trackContainerProps, minProps, maxProps, trackProps, tickProps, ticksProps, orientation = 'horizontal', ...rest } = props;
-    const [currentValues, setCurrentValues] = React.useState(values);
-    React.useEffect(() => {
-        setCurrentValues(values);
-    }, [values]);
-    const [minValueLabel, setMinValueLabel] = React.useState(() => minLabel ?? min.toString());
-    React.useEffect(() => {
-        setMinValueLabel(minLabel ?? min.toString());
-    }, [minLabel, min]);
-    const [maxValueLabel, setMaxValueLabel] = React.useState(() => maxLabel ?? max.toString());
-    React.useEffect(() => {
-        setMaxValueLabel(maxLabel ?? max.toString());
-    }, [maxLabel, max]);
-    const [trackDisplay, setTrackDisplay] = React.useState(() => getDefaultTrackDisplay(trackDisplayMode, currentValues));
-    React.useEffect(() => {
-        setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
-    }, [trackDisplayMode, currentValues]);
-    const containerRef = React.useRef(null);
-    const getNumDecimalPlaces = React.useMemo(() => {
-        const stepString = step.toString();
-        const decimalIndex = stepString.indexOf('.');
-        return stepString.length - (decimalIndex + 1);
-    }, [step]);
-    const getAllowableThumbRange = React.useCallback((index) => {
-        if (thumbMode === 'inhibit-crossing') {
-            const minVal = index === 0 ? min : currentValues[index - 1] + step;
-            const maxVal = index < currentValues.length - 1
-                ? currentValues[index + 1] - step
-                : max;
-            return [minVal, maxVal];
+  const {
+    min = 0,
+    max = 100,
+    values,
+    step = 1,
+    tooltipProps,
+    disabled = false,
+    tickLabels,
+    minLabel,
+    maxLabel,
+    trackDisplayMode = 'auto',
+    thumbMode = 'inhibit-crossing',
+    onChange,
+    onUpdate,
+    thumbProps,
+    className,
+    trackContainerProps,
+    minProps,
+    maxProps,
+    trackProps,
+    tickProps,
+    ticksProps,
+    orientation = 'horizontal',
+    ...rest
+  } = props;
+  const [currentValues, setCurrentValues] = React.useState(values);
+  React.useEffect(() => {
+    setCurrentValues(values);
+  }, [values]);
+  const [minValueLabel, setMinValueLabel] = React.useState(
+    () => minLabel ?? min.toString(),
+  );
+  React.useEffect(() => {
+    setMinValueLabel(minLabel ?? min.toString());
+  }, [minLabel, min]);
+  const [maxValueLabel, setMaxValueLabel] = React.useState(
+    () => maxLabel ?? max.toString(),
+  );
+  React.useEffect(() => {
+    setMaxValueLabel(maxLabel ?? max.toString());
+  }, [maxLabel, max]);
+  const [trackDisplay, setTrackDisplay] = React.useState(() =>
+    getDefaultTrackDisplay(trackDisplayMode, currentValues),
+  );
+  React.useEffect(() => {
+    setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
+  }, [trackDisplayMode, currentValues]);
+  const containerRef = React.useRef(null);
+  const getNumDecimalPlaces = React.useMemo(() => {
+    const stepString = step.toString();
+    const decimalIndex = stepString.indexOf('.');
+    return stepString.length - (decimalIndex + 1);
+  }, [step]);
+  const getAllowableThumbRange = React.useCallback(
+    (index) => {
+      if (thumbMode === 'inhibit-crossing') {
+        const minVal = index === 0 ? min : currentValues[index - 1] + step;
+        const maxVal =
+          index < currentValues.length - 1
+            ? currentValues[index + 1] - step
+            : max;
+        return [minVal, maxVal];
+      }
+      return [min, max];
+    },
+    [max, min, step, thumbMode, currentValues],
+  );
+  const [activeThumbIndex, setActiveThumbIndex] = React.useState(undefined);
+  const updateThumbValue = React.useCallback(
+    (event, callbackType) => {
+      if (containerRef.current && undefined !== activeThumbIndex) {
+        const percent = getPercentageOfRectangle(
+          containerRef.current.getBoundingClientRect(),
+          event.clientX,
+          event.clientY,
+          orientation,
+        );
+        let pointerValue = min + (max - min) * percent;
+        pointerValue = roundValueToClosestStep(pointerValue, step, min);
+        const [minVal, maxVal] = getAllowableThumbRange(activeThumbIndex);
+        pointerValue = getBoundedValue(pointerValue, minVal, maxVal);
+        if (pointerValue !== currentValues[activeThumbIndex]) {
+          const newValues = [...currentValues];
+          newValues[activeThumbIndex] = pointerValue;
+          setCurrentValues(newValues);
+          'onChange' === callbackType
+            ? onChange?.(newValues)
+            : onUpdate?.(newValues);
+        } else if ('onChange' === callbackType) {
+          onChange?.(currentValues);
         }
-        return [min, max];
-    }, [max, min, step, thumbMode, currentValues]);
-    const [activeThumbIndex, setActiveThumbIndex] = React.useState(undefined);
-    const updateThumbValue = React.useCallback((event, callbackType) => {
-        if (containerRef.current && undefined !== activeThumbIndex) {
-            const percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
-            let pointerValue = min + (max - min) * percent;
-            pointerValue = roundValueToClosestStep(pointerValue, step, min);
-            const [minVal, maxVal] = getAllowableThumbRange(activeThumbIndex);
-            pointerValue = getBoundedValue(pointerValue, minVal, maxVal);
-            if (pointerValue !== currentValues[activeThumbIndex]) {
-                const newValues = [...currentValues];
-                newValues[activeThumbIndex] = pointerValue;
-                setCurrentValues(newValues);
-                'onChange' === callbackType
-                    ? onChange?.(newValues)
-                    : onUpdate?.(newValues);
-            }
-            else if ('onChange' === callbackType) {
-                onChange?.(currentValues);
-            }
-        }
-    }, [
-        activeThumbIndex,
-        min,
-        max,
-        step,
-        getAllowableThumbRange,
-        currentValues,
-        onUpdate,
-        onChange,
-        orientation,
-    ]);
-    const handlePointerMove = React.useCallback((event) => {
-        if (activeThumbIndex === undefined) {
-            return;
+      }
+    },
+    [
+      activeThumbIndex,
+      min,
+      max,
+      step,
+      getAllowableThumbRange,
+      currentValues,
+      onUpdate,
+      onChange,
+      orientation,
+    ],
+  );
+  const handlePointerMove = React.useCallback(
+    (event) => {
+      if (activeThumbIndex === undefined) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      updateThumbValue(event, 'onUpdate');
+    },
+    [activeThumbIndex, updateThumbValue],
+  );
+  const onThumbValueChanged = React.useCallback(
+    (index, value, keyboardReleased) => {
+      if (currentValues[index] === value && !keyboardReleased) {
+        return;
+      }
+      if (keyboardReleased) {
+        onChange?.(currentValues);
+      } else {
+        const newValues = [...currentValues];
+        newValues[index] = value;
+        onUpdate?.(newValues);
+        setCurrentValues(newValues);
+      }
+    },
+    [currentValues, onUpdate, onChange],
+  );
+  const onThumbActivated = React.useCallback((index) => {
+    setActiveThumbIndex(index);
+  }, []);
+  const handlePointerUp = React.useCallback(
+    (event) => {
+      if (activeThumbIndex === undefined) {
+        return;
+      }
+      updateThumbValue(event, 'onChange');
+      setActiveThumbIndex(undefined);
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [activeThumbIndex, updateThumbValue],
+  );
+  const handlePointerDownOnSlider = React.useCallback(
+    (event) => {
+      if (containerRef.current) {
+        const percent = getPercentageOfRectangle(
+          containerRef.current.getBoundingClientRect(),
+          event.clientX,
+          event.clientY,
+          orientation,
+        );
+        let pointerValue = min + (max - min) * percent;
+        pointerValue = roundValueToClosestStep(pointerValue, step, min);
+        const closestValueIndex = getClosestValueIndex(
+          currentValues,
+          pointerValue,
+        );
+        const [minVal, maxVal] = getAllowableThumbRange(closestValueIndex);
+        pointerValue = getBoundedValue(pointerValue, minVal, maxVal);
+        if (pointerValue === currentValues[closestValueIndex]) {
+          return;
         }
+        const newValues = [...currentValues];
+        newValues[closestValueIndex] = pointerValue;
+        setCurrentValues(newValues);
+        onChange?.(newValues);
+        onUpdate?.(newValues);
+        focusThumb(containerRef.current, closestValueIndex);
         event.preventDefault();
         event.stopPropagation();
-        updateThumbValue(event, 'onUpdate');
-    }, [activeThumbIndex, updateThumbValue]);
-    // function called by Thumb keyboard processing
-    const onThumbValueChanged = React.useCallback((index, value, keyboardReleased) => {
-        if (currentValues[index] === value && !keyboardReleased) {
-            return;
-        }
-        if (keyboardReleased) {
-            onChange?.(currentValues); // currentValues since key up should not change value but only stop continuous value selection
-        }
-        else {
-            const newValues = [...currentValues]; // newValues since key down should change value
-            newValues[index] = value;
-            onUpdate?.(newValues);
-            setCurrentValues(newValues);
-        }
-    }, [currentValues, onUpdate, onChange]);
-    const onThumbActivated = React.useCallback((index) => {
-        setActiveThumbIndex(index);
-    }, []);
-    const handlePointerUp = React.useCallback((event) => {
-        if (activeThumbIndex === undefined) {
-            return;
-        }
-        updateThumbValue(event, 'onChange');
-        setActiveThumbIndex(undefined);
-        event.preventDefault();
-        event.stopPropagation();
-    }, [activeThumbIndex, updateThumbValue]);
-    const handlePointerDownOnSlider = React.useCallback((event) => {
-        if (containerRef.current) {
-            const percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
-            let pointerValue = min + (max - min) * percent;
-            pointerValue = roundValueToClosestStep(pointerValue, step, min);
-            const closestValueIndex = getClosestValueIndex(currentValues, pointerValue);
-            const [minVal, maxVal] = getAllowableThumbRange(closestValueIndex);
-            pointerValue = getBoundedValue(pointerValue, minVal, maxVal);
-            if (pointerValue === currentValues[closestValueIndex]) {
-                return;
-            }
-            const newValues = [...currentValues];
-            newValues[closestValueIndex] = pointerValue;
-            setCurrentValues(newValues);
-            onChange?.(newValues);
-            onUpdate?.(newValues);
-            focusThumb(containerRef.current, closestValueIndex);
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }, [
-        min,
-        max,
-        step,
-        currentValues,
-        getAllowableThumbRange,
-        onChange,
-        onUpdate,
-        orientation,
-    ]);
-    useEventListener('pointermove', handlePointerMove, containerRef.current?.ownerDocument);
-    useEventListener('pointerup', handlePointerUp, containerRef.current?.ownerDocument);
-    const tickMarkArea = React.useMemo(() => {
-        if (!tickLabels) {
-            return null;
-        }
-        if (Array.isArray(tickLabels)) {
-            return (React.createElement(Box, { as: 'div', ...ticksProps, className: cx('iui-slider-ticks', ticksProps?.className) }, tickLabels.map((label, index) => (React.createElement(Box, { as: 'span', ...tickProps, key: index, className: cx('iui-slider-tick', tickProps?.className) }, label)))));
-        }
-        return tickLabels;
-    }, [tickLabels, tickProps, ticksProps]);
-    const generateTooltipProps = React.useCallback((index, val) => {
-        const outProps = tooltipProps
-            ? tooltipProps(index, val, step)
-            : {};
-        return {
-            ...outProps,
-            content: outProps.content
-                ? outProps.content
-                : formatNumberValue(val, step, getNumDecimalPlaces),
-        };
-    }, [getNumDecimalPlaces, step, tooltipProps]);
-    return (React.createElement(Box, { ref: ref, className: cx('iui-slider-container', className), "data-iui-orientation": orientation, "data-iui-disabled": disabled ? 'true' : undefined, ...rest },
-        minValueLabel && (React.createElement(Box, { as: 'span', ...minProps, className: cx('iui-slider-min', minProps?.className) }, minValueLabel)),
-        React.createElement(Box, { ref: containerRef, ...trackContainerProps, className: cx('iui-slider', {
-                'iui-grabbing': undefined !== activeThumbIndex,
-            }, trackContainerProps?.className), onPointerDown: handlePointerDownOnSlider },
-            currentValues.map((thumbValue, index) => {
-                const [minVal, maxVal] = getAllowableThumbRange(index);
-                const thisThumbProps = thumbProps?.(index);
-                return (React.createElement(Thumb, { key: thisThumbProps?.id ?? index, index: index, disabled: disabled, isActive: activeThumbIndex === index, onThumbActivated: onThumbActivated, onThumbValueChanged: onThumbValueChanged, minVal: minVal, maxVal: maxVal, value: thumbValue, tooltipProps: generateTooltipProps(index, thumbValue), thumbProps: thisThumbProps, step: step, sliderMin: min, sliderMax: max }));
-            }),
-            React.createElement(Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues, orientation: orientation, ...trackProps })),
-        tickMarkArea,
-        maxValueLabel && (React.createElement(Box, { as: 'span', ...maxProps, className: cx('iui-slider-max', maxProps?.className) }, maxValueLabel))));
+      }
+    },
+    [
+      min,
+      max,
+      step,
+      currentValues,
+      getAllowableThumbRange,
+      onChange,
+      onUpdate,
+      orientation,
+    ],
+  );
+  useEventListener(
+    'pointermove',
+    handlePointerMove,
+    containerRef.current?.ownerDocument,
+  );
+  useEventListener(
+    'pointerup',
+    handlePointerUp,
+    containerRef.current?.ownerDocument,
+  );
+  const tickMarkArea = React.useMemo(() => {
+    if (!tickLabels) {
+      return null;
+    }
+    if (Array.isArray(tickLabels)) {
+      return React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...ticksProps,
+          className: cx('iui-slider-ticks', ticksProps?.className),
+        },
+        tickLabels.map((label, index) =>
+          React.createElement(
+            Box,
+            {
+              as: 'span',
+              ...tickProps,
+              key: index,
+              className: cx('iui-slider-tick', tickProps?.className),
+            },
+            label,
+          ),
+        ),
+      );
+    }
+    return tickLabels;
+  }, [tickLabels, tickProps, ticksProps]);
+  const generateTooltipProps = React.useCallback(
+    (index, val) => {
+      const outProps = tooltipProps ? tooltipProps(index, val, step) : {};
+      return {
+        ...outProps,
+        content: outProps.content
+          ? outProps.content
+          : formatNumberValue(val, step, getNumDecimalPlaces),
+      };
+    },
+    [getNumDecimalPlaces, step, tooltipProps],
+  );
+  return React.createElement(
+    Box,
+    {
+      ref: ref,
+      className: cx('iui-slider-container', className),
+      'data-iui-orientation': orientation,
+      'data-iui-disabled': disabled ? 'true' : undefined,
+      ...rest,
+    },
+    minValueLabel &&
+      React.createElement(
+        Box,
+        {
+          as: 'span',
+          ...minProps,
+          className: cx('iui-slider-min', minProps?.className),
+        },
+        minValueLabel,
+      ),
+    React.createElement(
+      Box,
+      {
+        ref: containerRef,
+        ...trackContainerProps,
+        className: cx(
+          'iui-slider',
+          {
+            'iui-grabbing': undefined !== activeThumbIndex,
+          },
+          trackContainerProps?.className,
+        ),
+        onPointerDown: handlePointerDownOnSlider,
+      },
+      currentValues.map((thumbValue, index) => {
+        const [minVal, maxVal] = getAllowableThumbRange(index);
+        const thisThumbProps = thumbProps?.(index);
+        return React.createElement(Thumb, {
+          key: thisThumbProps?.id ?? index,
+          index: index,
+          disabled: disabled,
+          isActive: activeThumbIndex === index,
+          onThumbActivated: onThumbActivated,
+          onThumbValueChanged: onThumbValueChanged,
+          minVal: minVal,
+          maxVal: maxVal,
+          value: thumbValue,
+          tooltipProps: generateTooltipProps(index, thumbValue),
+          thumbProps: thisThumbProps,
+          step: step,
+          sliderMin: min,
+          sliderMax: max,
+        });
+      }),
+      React.createElement(Track, {
+        trackDisplayMode: trackDisplay,
+        sliderMin: min,
+        sliderMax: max,
+        values: currentValues,
+        orientation: orientation,
+        ...trackProps,
+      }),
+    ),
+    tickMarkArea,
+    maxValueLabel &&
+      React.createElement(
+        Box,
+        {
+          as: 'span',
+          ...maxProps,
+          className: cx('iui-slider-max', maxProps?.className),
+        },
+        maxValueLabel,
+      ),
+  );
 });