@itwin/itwinui-react 3.11.3 → 3.12.1

package/cjs/core/Slider/Slider.js

@@ -1,254 +1,398 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Slider = void 0;
-/*---------------------------------------------------------------------------------------------
- * 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 = __importDefault(require("classnames"));
-const React = __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");
+Object.defineProperty(exports, 'Slider', {
+  enumerable: true,
+  get: function () {
+    return Slider;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _classnames = _interop_require_default._(require('classnames'));
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const _Track = require('./Track.js');
+const _Thumb = 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.getBoundedValue)(
+      pointerX,
+      rect.left,
+      rect.right,
+    );
+    return (position - rect.left) / rect.width;
+  }
+  const position = (0, _index.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' />
- */
-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];
+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];
+      }
+      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.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 = (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;
+      }
+    },
+    [
+      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 = (0, _index.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 = (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))));
+      }
+    },
+    [
+      min,
+      max,
+      step,
+      currentValues,
+      getAllowableThumbRange,
+      onChange,
+      onUpdate,
+      orientation,
+    ],
+  );
+  (0, _index.useEventListener)(
+    'pointermove',
+    handlePointerMove,
+    containerRef.current?.ownerDocument,
+  );
+  (0, _index.useEventListener)(
+    'pointerup',
+    handlePointerUp,
+    containerRef.current?.ownerDocument,
+  );
+  const tickMarkArea = _react.useMemo(() => {
+    if (!tickLabels) {
+      return null;
+    }
+    if (Array.isArray(tickLabels)) {
+      return _react.createElement(
+        _index.Box,
+        {
+          as: 'div',
+          ...ticksProps,
+          className: (0, _classnames.default)(
+            'iui-slider-ticks',
+            ticksProps?.className,
+          ),
+        },
+        tickLabels.map((label, index) =>
+          _react.createElement(
+            _index.Box,
+            {
+              as: 'span',
+              ...tickProps,
+              key: index,
+              className: (0, _classnames.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.Box,
+    {
+      ref: ref,
+      className: (0, _classnames.default)('iui-slider-container', className),
+      'data-iui-orientation': orientation,
+      'data-iui-disabled': disabled ? 'true' : undefined,
+      ...rest,
+    },
+    minValueLabel &&
+      _react.createElement(
+        _index.Box,
+        {
+          as: 'span',
+          ...minProps,
+          className: (0, _classnames.default)(
+            'iui-slider-min',
+            minProps?.className,
+          ),
+        },
+        minValueLabel,
+      ),
+    _react.createElement(
+      _index.Box,
+      {
+        ref: containerRef,
+        ...trackContainerProps,
+        className: (0, _classnames.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.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.Track, {
+        trackDisplayMode: trackDisplay,
+        sliderMin: min,
+        sliderMax: max,
+        values: currentValues,
+        orientation: orientation,
+        ...trackProps,
+      }),
+    ),
+    tickMarkArea,
+    maxValueLabel &&
+      _react.createElement(
+        _index.Box,
+        {
+          as: 'span',
+          ...maxProps,
+          className: (0, _classnames.default)(
+            'iui-slider-max',
+            maxProps?.className,
+          ),
+        },
+        maxValueLabel,
+      ),
+  );
 });