@itwin/itwinui-react 3.0.3 → 3.0.5

package/cjs/core/Slider/Slider.js

@@ -1,69 +1,57 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Slider = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const Track_js_1 = require('./Track.js');
-const Thumb_js_1 = require('./Thumb.js');
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const Track_js_1 = require("./Track.js");
+const Thumb_js_1 = require("./Thumb.js");
 const getPercentageOfRectangle = (rect, pointerX, pointerY, orientation) => {
-  if (orientation === 'horizontal') {
-    const position = (0, index_js_1.getBoundedValue)(
-      pointerX,
-      rect.left,
-      rect.right,
-    );
-    return (position - rect.left) / rect.width;
-  }
-  const position = (0, index_js_1.getBoundedValue)(
-    pointerY,
-    rect.top,
-    rect.bottom,
-  );
-  return (rect.bottom - position) / rect.height;
+    if (orientation === 'horizontal') {
+        const position = (0, index_js_1.getBoundedValue)(pointerX, rect.left, rect.right);
+        return (position - rect.left) / rect.width;
+    }
+    const position = (0, index_js_1.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.
@@ -74,338 +62,169 @@ const focusThumb = (sliderContainer, activeIndex) => {
  *   thumbMode='allow-crossing' />
  */
 exports.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];
-      }
-      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 = (0, index_js_1.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);
+    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];
         }
-      }
-    },
-    [
-      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],
-  );
-  // 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 = (0, index_js_1.getBoundedValue)(
-          pointerValue,
-          minVal,
-          maxVal,
-        );
-        if (pointerValue === currentValues[closestValueIndex]) {
-          return;
+        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 = (0, index_js_1.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;
         }
-        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,
-    ],
-  );
-  (0, index_js_1.useEventListener)(
-    'pointermove',
-    handlePointerMove,
-    containerRef.current?.ownerDocument,
-  );
-  (0, index_js_1.useEventListener)(
-    'pointerup',
-    handlePointerUp,
-    containerRef.current?.ownerDocument,
-  );
-  const tickMarkArea = React.useMemo(() => {
-    if (!tickLabels) {
-      return null;
-    }
-    if (Array.isArray(tickLabels)) {
-      return React.createElement(
-        index_js_1.Box,
-        {
-          as: 'div',
-          ...ticksProps,
-          className: (0, classnames_1.default)(
-            'iui-slider-ticks',
-            ticksProps?.className,
-          ),
-        },
-        tickLabels.map((label, index) =>
-          React.createElement(
-            index_js_1.Box,
-            {
-              as: 'span',
-              ...tickProps,
-              key: index,
-              className: (0, classnames_1.default)(
-                '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(
-    index_js_1.Box,
-    {
-      ref: ref,
-      className: (0, classnames_1.default)('iui-slider-container', className),
-      'data-iui-orientation': orientation,
-      'data-iui-disabled': disabled ? 'true' : undefined,
-      ...rest,
-    },
-    minValueLabel &&
-      React.createElement(
-        index_js_1.Box,
-        {
-          as: 'span',
-          ...minProps,
-          className: (0, classnames_1.default)(
-            'iui-slider-min',
-            minProps?.className,
-          ),
-        },
-        minValueLabel,
-      ),
-    React.createElement(
-      index_js_1.Box,
-      {
-        ref: containerRef,
-        ...trackContainerProps,
-        className: (0, classnames_1.default)(
-          '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_js_1.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_js_1.Track, {
-        trackDisplayMode: trackDisplay,
-        sliderMin: min,
-        sliderMax: max,
-        values: currentValues,
-        orientation: orientation,
-        ...trackProps,
-      }),
-    ),
-    tickMarkArea,
-    maxValueLabel &&
-      React.createElement(
-        index_js_1.Box,
-        {
-          as: 'span',
-          ...maxProps,
-          className: (0, classnames_1.default)(
-            'iui-slider-max',
-            maxProps?.className,
-          ),
-        },
-        maxValueLabel,
-      ),
-  );
+        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 = (0, index_js_1.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,
+    ]);
+    (0, index_js_1.useEventListener)('pointermove', handlePointerMove, containerRef.current?.ownerDocument);
+    (0, index_js_1.useEventListener)('pointerup', handlePointerUp, containerRef.current?.ownerDocument);
+    const tickMarkArea = React.useMemo(() => {
+        if (!tickLabels) {
+            return null;
+        }
+        if (Array.isArray(tickLabels)) {
+            return (React.createElement(index_js_1.Box, { as: 'div', ...ticksProps, className: (0, classnames_1.default)('iui-slider-ticks', ticksProps?.className) }, tickLabels.map((label, index) => (React.createElement(index_js_1.Box, { as: 'span', ...tickProps, key: index, className: (0, classnames_1.default)('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(index_js_1.Box, { ref: ref, className: (0, classnames_1.default)('iui-slider-container', className), "data-iui-orientation": orientation, "data-iui-disabled": disabled ? 'true' : undefined, ...rest },
+        minValueLabel && (React.createElement(index_js_1.Box, { as: 'span', ...minProps, className: (0, classnames_1.default)('iui-slider-min', minProps?.className) }, minValueLabel)),
+        React.createElement(index_js_1.Box, { ref: containerRef, ...trackContainerProps, className: (0, classnames_1.default)('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_js_1.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_js_1.Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues, orientation: orientation, ...trackProps })),
+        tickMarkArea,
+        maxValueLabel && (React.createElement(index_js_1.Box, { as: 'span', ...maxProps, className: (0, classnames_1.default)('iui-slider-max', maxProps?.className) }, maxValueLabel))));
 });
 exports.default = exports.Slider;