@itwin/itwinui-react 3.12.2 → 3.13.1

package/cjs/core/Slider/Slider.js

@@ -16,54 +16,43 @@ 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.getBoundedValue)(
-      pointerX,
-      rect.left,
-      rect.right,
-    );
+  if ('horizontal' === orientation) {
+    let 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);
+  let 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);
+  if (1 === values.length) return 0;
+  let distances = values.map((value) => Math.abs(value - pointerValue));
+  let smallest = Math.min(...distances);
   return distances.indexOf(smallest);
 };
 const getDefaultTrackDisplay = (trackDisplayMode, values) => {
-  if ('auto' !== trackDisplayMode) {
-    return trackDisplayMode;
-  }
+  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;
-};
+const roundValueToClosestStep = (value, step, min) =>
+  Math.round((value - min) / step) * step + min;
 const formatNumberValue = (value, step, numDecimals) => {
-  if (Number.isInteger(step)) {
-    return value.toFixed(0);
-  }
+  if (Number.isInteger(step)) return value.toFixed(0);
   return value.toFixed(numDecimals);
 };
 const focusThumb = (sliderContainer, activeIndex) => {
-  const doc = sliderContainer.ownerDocument;
+  let doc = sliderContainer.ownerDocument;
   if (
     !sliderContainer.contains(doc.activeElement) ||
     Number(doc.activeElement?.getAttribute('data-index')) !== activeIndex
   ) {
-    const thumbToFocus = sliderContainer.querySelector(
+    let thumbToFocus = sliderContainer.querySelector(
       `[data-index="${activeIndex}"]`,
     );
     thumbToFocus && thumbToFocus.focus();
   }
 };
 const Slider = _react.forwardRef((props, ref) => {
-  const {
+  let {
     min = 0,
     max = 100,
     values,
@@ -88,39 +77,39 @@ const Slider = _react.forwardRef((props, ref) => {
     orientation = 'horizontal',
     ...rest
   } = props;
-  const [currentValues, setCurrentValues] = _react.useState(values);
+  let [currentValues, setCurrentValues] = _react.useState(values);
   _react.useEffect(() => {
     setCurrentValues(values);
   }, [values]);
-  const [minValueLabel, setMinValueLabel] = _react.useState(
+  let [minValueLabel, setMinValueLabel] = _react.useState(
     () => minLabel ?? min.toString(),
   );
   _react.useEffect(() => {
     setMinValueLabel(minLabel ?? min.toString());
   }, [minLabel, min]);
-  const [maxValueLabel, setMaxValueLabel] = _react.useState(
+  let [maxValueLabel, setMaxValueLabel] = _react.useState(
     () => maxLabel ?? max.toString(),
   );
   _react.useEffect(() => {
     setMaxValueLabel(maxLabel ?? max.toString());
   }, [maxLabel, max]);
-  const [trackDisplay, setTrackDisplay] = _react.useState(() =>
+  let [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('.');
+  let containerRef = _react.useRef(null);
+  let getNumDecimalPlaces = _react.useMemo(() => {
+    let stepString = step.toString();
+    let decimalIndex = stepString.indexOf('.');
     return stepString.length - (decimalIndex + 1);
   }, [step]);
-  const getAllowableThumbRange = _react.useCallback(
+  let getAllowableThumbRange = _react.useCallback(
     (index) => {
-      if (thumbMode === 'inhibit-crossing') {
-        const minVal = index === 0 ? min : currentValues[index - 1] + step;
-        const maxVal =
+      if ('inhibit-crossing' === thumbMode) {
+        let minVal = 0 === index ? min : currentValues[index - 1] + step;
+        let maxVal =
           index < currentValues.length - 1
             ? currentValues[index + 1] - step
             : max;
@@ -130,11 +119,11 @@ const Slider = _react.forwardRef((props, ref) => {
     },
     [max, min, step, thumbMode, currentValues],
   );
-  const [activeThumbIndex, setActiveThumbIndex] = _react.useState(undefined);
-  const updateThumbValue = _react.useCallback(
+  let [activeThumbIndex, setActiveThumbIndex] = _react.useState(void 0);
+  let updateThumbValue = _react.useCallback(
     (event, callbackType) => {
-      if (containerRef.current && undefined !== activeThumbIndex) {
-        const percent = getPercentageOfRectangle(
+      if (containerRef.current && void 0 !== activeThumbIndex) {
+        let percent = getPercentageOfRectangle(
           containerRef.current.getBoundingClientRect(),
           event.clientX,
           event.clientY,
@@ -142,22 +131,20 @@ const Slider = _react.forwardRef((props, ref) => {
         );
         let pointerValue = min + (max - min) * percent;
         pointerValue = roundValueToClosestStep(pointerValue, step, min);
-        const [minVal, maxVal] = getAllowableThumbRange(activeThumbIndex);
+        let [minVal, maxVal] = getAllowableThumbRange(activeThumbIndex);
         pointerValue = (0, _index.getBoundedValue)(
           pointerValue,
           minVal,
           maxVal,
         );
         if (pointerValue !== currentValues[activeThumbIndex]) {
-          const newValues = [...currentValues];
+          let newValues = [...currentValues];
           newValues[activeThumbIndex] = pointerValue;
           setCurrentValues(newValues);
           'onChange' === callbackType
             ? onChange?.(newValues)
             : onUpdate?.(newValues);
-        } else if ('onChange' === callbackType) {
-          onChange?.(currentValues);
-        }
+        } else if ('onChange' === callbackType) onChange?.(currentValues);
       }
     },
     [
@@ -172,26 +159,21 @@ const Slider = _react.forwardRef((props, ref) => {
       orientation,
     ],
   );
-  const handlePointerMove = _react.useCallback(
+  let handlePointerMove = _react.useCallback(
     (event) => {
-      if (activeThumbIndex === undefined) {
-        return;
-      }
+      if (void 0 === activeThumbIndex) return;
       event.preventDefault();
       event.stopPropagation();
       updateThumbValue(event, 'onUpdate');
     },
     [activeThumbIndex, updateThumbValue],
   );
-  const onThumbValueChanged = _react.useCallback(
+  let onThumbValueChanged = _react.useCallback(
     (index, value, keyboardReleased) => {
-      if (currentValues[index] === value && !keyboardReleased) {
-        return;
-      }
-      if (keyboardReleased) {
-        onChange?.(currentValues);
-      } else {
-        const newValues = [...currentValues];
+      if (currentValues[index] === value && !keyboardReleased) return;
+      if (keyboardReleased) onChange?.(currentValues);
+      else {
+        let newValues = [...currentValues];
         newValues[index] = value;
         onUpdate?.(newValues);
         setCurrentValues(newValues);
@@ -199,25 +181,23 @@ const Slider = _react.forwardRef((props, ref) => {
     },
     [currentValues, onUpdate, onChange],
   );
-  const onThumbActivated = _react.useCallback((index) => {
+  let onThumbActivated = _react.useCallback((index) => {
     setActiveThumbIndex(index);
   }, []);
-  const handlePointerUp = _react.useCallback(
+  let handlePointerUp = _react.useCallback(
     (event) => {
-      if (activeThumbIndex === undefined) {
-        return;
-      }
+      if (void 0 === activeThumbIndex) return;
       updateThumbValue(event, 'onChange');
-      setActiveThumbIndex(undefined);
+      setActiveThumbIndex(void 0);
       event.preventDefault();
       event.stopPropagation();
     },
     [activeThumbIndex, updateThumbValue],
   );
-  const handlePointerDownOnSlider = _react.useCallback(
+  let handlePointerDownOnSlider = _react.useCallback(
     (event) => {
       if (containerRef.current) {
-        const percent = getPercentageOfRectangle(
+        let percent = getPercentageOfRectangle(
           containerRef.current.getBoundingClientRect(),
           event.clientX,
           event.clientY,
@@ -225,20 +205,18 @@ const Slider = _react.forwardRef((props, ref) => {
         );
         let pointerValue = min + (max - min) * percent;
         pointerValue = roundValueToClosestStep(pointerValue, step, min);
-        const closestValueIndex = getClosestValueIndex(
+        let closestValueIndex = getClosestValueIndex(
           currentValues,
           pointerValue,
         );
-        const [minVal, maxVal] = getAllowableThumbRange(closestValueIndex);
+        let [minVal, maxVal] = getAllowableThumbRange(closestValueIndex);
         pointerValue = (0, _index.getBoundedValue)(
           pointerValue,
           minVal,
           maxVal,
         );
-        if (pointerValue === currentValues[closestValueIndex]) {
-          return;
-        }
-        const newValues = [...currentValues];
+        if (pointerValue === currentValues[closestValueIndex]) return;
+        let newValues = [...currentValues];
         newValues[closestValueIndex] = pointerValue;
         setCurrentValues(newValues);
         onChange?.(newValues);
@@ -269,11 +247,9 @@ const Slider = _react.forwardRef((props, ref) => {
     handlePointerUp,
     containerRef.current?.ownerDocument,
   );
-  const tickMarkArea = _react.useMemo(() => {
-    if (!tickLabels) {
-      return null;
-    }
-    if (Array.isArray(tickLabels)) {
+  let tickMarkArea = _react.useMemo(() => {
+    if (!tickLabels) return null;
+    if (Array.isArray(tickLabels))
       return _react.createElement(
         _index.Box,
         {
@@ -300,12 +276,11 @@ const Slider = _react.forwardRef((props, ref) => {
           ),
         ),
       );
-    }
     return tickLabels;
   }, [tickLabels, tickProps, ticksProps]);
-  const generateTooltipProps = _react.useCallback(
+  let generateTooltipProps = _react.useCallback(
     (index, val) => {
-      const outProps = tooltipProps ? tooltipProps(index, val, step) : {};
+      let outProps = tooltipProps ? tooltipProps(index, val, step) : {};
       return {
         ...outProps,
         content: outProps.content
@@ -321,7 +296,7 @@ const Slider = _react.forwardRef((props, ref) => {
       ref: ref,
       className: (0, _classnames.default)('iui-slider-container', className),
       'data-iui-orientation': orientation,
-      'data-iui-disabled': disabled ? 'true' : undefined,
+      'data-iui-disabled': disabled ? 'true' : void 0,
       ...rest,
     },
     minValueLabel &&
@@ -345,15 +320,15 @@ const Slider = _react.forwardRef((props, ref) => {
         className: (0, _classnames.default)(
           'iui-slider',
           {
-            'iui-grabbing': undefined !== activeThumbIndex,
+            'iui-grabbing': void 0 !== activeThumbIndex,
           },
           trackContainerProps?.className,
         ),
         onPointerDown: handlePointerDownOnSlider,
       },
       currentValues.map((thumbValue, index) => {
-        const [minVal, maxVal] = getAllowableThumbRange(index);
-        const thisThumbProps = thumbProps?.(index);
+        let [minVal, maxVal] = getAllowableThumbRange(index);
+        let thisThumbProps = thumbProps?.(index);
         return _react.createElement(_Thumb.Thumb, {
           key: thisThumbProps?.id ?? index,
           index: index,

package/cjs/core/Slider/Thumb.js

@@ -15,7 +15,7 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _Tooltip = require('../Tooltip/Tooltip.js');
 const _index = require('../../utils/index.js');
 const Thumb = (props) => {
-  const {
+  let {
     value,
     index,
     minVal,
@@ -30,12 +30,10 @@ const Thumb = (props) => {
     thumbProps,
     disabled,
   } = props;
-  const thumbRef = _react.useRef(null);
-  const handleOnKeyboardEvent = _react.useCallback(
+  let thumbRef = _react.useRef(null);
+  let handleOnKeyboardEvent = _react.useCallback(
     (event, keyboardReleased) => {
-      if (disabled || event.altKey) {
-        return;
-      }
+      if (disabled || event.altKey) return;
       switch (event.key) {
         case 'ArrowLeft':
         case 'ArrowDown':
@@ -66,25 +64,19 @@ const Thumb = (props) => {
     },
     [disabled, onThumbValueChanged, index, value, step, minVal, maxVal],
   );
-  const handlePointerDownOnThumb = _react.useCallback(() => {
-    !disabled && onThumbActivated(index);
+  let handlePointerDownOnThumb = _react.useCallback(() => {
+    disabled || onThumbActivated(index);
   }, [disabled, index, onThumbActivated]);
-  const adjustedValue = _react.useMemo(() => {
-    if (value < sliderMin) {
-      return sliderMin;
-    }
-    if (value > sliderMax) {
-      return sliderMax;
-    }
+  let adjustedValue = _react.useMemo(() => {
+    if (value < sliderMin) return sliderMin;
+    if (value > sliderMax) return sliderMax;
     return value;
   }, [sliderMax, sliderMin, value]);
-  const lowPercent = _react.useMemo(() => {
-    if (sliderMax === sliderMin) {
-      return 0;
-    }
+  let lowPercent = _react.useMemo(() => {
+    if (sliderMax === sliderMin) return 0;
     return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
   }, [adjustedValue, sliderMax, sliderMin]);
-  const { style, className, ...rest } = thumbProps || {};
+  let { style, className, ...rest } = thumbProps || {};
   return _react.createElement(
     _Tooltip.Tooltip,
     {
@@ -110,7 +102,7 @@ const Thumb = (props) => {
         className,
       ),
       role: 'slider',
-      tabIndex: disabled ? undefined : 0,
+      tabIndex: disabled ? void 0 : 0,
       'aria-valuemin': minVal,
       'aria-valuenow': value,
       'aria-valuemax': maxVal,

package/cjs/core/Slider/Track.js

@@ -14,25 +14,21 @@ const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 function shouldDisplaySegment(segmentIndex, mode) {
-  if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) {
-    return true;
-  } else if ('even-segments' === mode && 0 === segmentIndex % 2) {
-    return true;
-  }
+  if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) return true;
+  if ('even-segments' === mode && 0 === segmentIndex % 2) return true;
   return false;
 }
 function generateSegments(values, min, max) {
-  const segments = [];
-  const newValues = [...values];
+  let segments = [];
+  let newValues = [...values];
   newValues.sort((a, b) => a - b);
   if (
     0 === newValues.length ||
     newValues[0] < min ||
     newValues[newValues.length - 1] > max ||
     min === max
-  ) {
+  )
     return [];
-  }
   let lastValue = min;
   for (let i = 0; i < newValues.length; i++) {
     segments.push({
@@ -48,7 +44,7 @@ function generateSegments(values, min, max) {
   return segments;
 }
 const Track = (props) => {
-  const {
+  let {
     className,
     trackDisplayMode,
     sliderMin,
@@ -56,7 +52,7 @@ const Track = (props) => {
     values,
     orientation,
   } = props;
-  const [segments, setSegments] = _react.useState(() =>
+  let [segments, setSegments] = _react.useState(() =>
     generateSegments(values, sliderMin, sliderMax),
   );
   _react.useEffect(() => {
@@ -67,11 +63,11 @@ const Track = (props) => {
     null,
     'none' !== trackDisplayMode &&
       segments.map((segment, index) => {
-        const lowPercent =
+        let lowPercent =
           segment.left >= sliderMin && sliderMax !== sliderMin
             ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
             : 0;
-        const highPercent =
+        let highPercent =
           segment.right >= sliderMin && sliderMax !== sliderMin
             ? 100.0 -
               (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
@@ -88,7 +84,7 @@ const Track = (props) => {
                   className,
                 ),
                 style: {
-                  ...(orientation === 'horizontal'
+                  ...('horizontal' === orientation
                     ? {
                         insetInlineStart: `${lowPercent}%`,
                         insetInlineEnd: `${highPercent}%`,

package/cjs/core/StatusMessage/StatusMessage.js

@@ -15,7 +15,7 @@ const _index = require('../../utils/index.js');
 const _classnames = _interop_require_default._(require('classnames'));
 const _Icon = require('../Icon/Icon.js');
 const StatusMessage = _react.forwardRef((props, ref) => {
-  const {
+  let {
     children,
     startIcon: userStartIcon,
     status,
@@ -24,8 +24,8 @@ const StatusMessage = _react.forwardRef((props, ref) => {
     contentProps,
     ...rest
   } = props;
-  const icon = userStartIcon ?? (status && _index.StatusIconMap[status]());
-  const shouldShowIcon = userStartIcon !== null && !!icon;
+  let icon = userStartIcon ?? (status && _index.StatusIconMap[status]());
+  let shouldShowIcon = null !== userStartIcon && !!icon;
   return _react.createElement(
     _index.Box,
     {

package/cjs/core/Stepper/Stepper.js

@@ -19,7 +19,7 @@ const defaultStepperLocalization = {
     `Step ${currentStep} of ${totalSteps}:`,
 };
 const Stepper = _react.forwardRef((props, ref) => {
-  const {
+  let {
     currentStep,
     steps,
     type = 'default',
@@ -33,7 +33,7 @@ const Stepper = _react.forwardRef((props, ref) => {
     labelCountProps,
     ...rest
   } = props;
-  const boundedCurrentStep = Math.min(
+  let boundedCurrentStep = Math.min(
     Math.max(0, currentStep ?? 0),
     steps.length - 1,
   );
@@ -48,10 +48,10 @@ const Stepper = _react.forwardRef((props, ref) => {
       'ol',
       null,
       steps.map((s, index) => {
-        const thisStepProps = stepProps?.(index);
-        const thisTrackContentProps = trackContentProps?.(index);
-        const thisCircleProps = circleProps?.(index);
-        const thisNameProps = nameProps?.(index);
+        let thisStepProps = stepProps?.(index);
+        let thisTrackContentProps = trackContentProps?.(index);
+        let thisCircleProps = circleProps?.(index);
+        let thisNameProps = nameProps?.(index);
         return _react.createElement(_StepperStep.StepperStep, {
           stepProps: thisStepProps,
           trackContentProps: thisTrackContentProps,
@@ -59,7 +59,7 @@ const Stepper = _react.forwardRef((props, ref) => {
           nameProps: thisNameProps,
           key: index,
           index: index,
-          title: type === 'long' ? '' : s.name,
+          title: 'long' === type ? '' : s.name,
           currentStepNumber: boundedCurrentStep,
           totalSteps: steps.length,
           type: type,
@@ -68,7 +68,7 @@ const Stepper = _react.forwardRef((props, ref) => {
         });
       }),
     ),
-    type === 'long' &&
+    'long' === type &&
       _react.createElement(
         _index.Box,
         {

package/cjs/core/Stepper/StepperStep.js

@@ -15,7 +15,7 @@ const _react = _interop_require_wildcard._(require('react'));
 const _Tooltip = require('../Tooltip/Tooltip.js');
 const _index = require('../../utils/index.js');
 const StepperStep = _react.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     title,
     index,
     currentStepNumber,
@@ -31,26 +31,19 @@ const StepperStep = _react.forwardRef((props, forwardedRef) => {
     nameProps,
     ...rest
   } = props;
-  const isPast = currentStepNumber > index;
-  const isActive = currentStepNumber === index;
-  const isClickable = isPast && !!onClick;
-  const onCompletedClick = () => {
-    if (isClickable) {
-      onClick?.(index);
-    }
+  let isPast = currentStepNumber > index;
+  let isActive = currentStepNumber === index;
+  let isClickable = isPast && !!onClick;
+  let onCompletedClick = () => {
+    if (isClickable) onClick?.(index);
   };
-  const onKeyDown = (e) => {
-    if (e.altKey) {
-      return;
-    }
-    if (!isClickable) {
-      return;
-    }
-    if (e.key === 'Enter' || e.key === 'Space' || e.key === ' ') {
+  let onKeyDown = (e) => {
+    if (e.altKey) return;
+    if (!isClickable) return;
+    if ('Enter' === e.key || 'Space' === e.key || ' ' === e.key)
       onCompletedClick();
-    }
   };
-  const stepShape = _react.createElement(
+  let stepShape = _react.createElement(
     _index.Box,
     {
       as: 'li',
@@ -65,14 +58,14 @@ const StepperStep = _react.forwardRef((props, forwardedRef) => {
         stepProps?.className,
       ),
       style: {
-        inlineSize: type === 'default' ? `${100 / totalSteps}%` : undefined,
+        inlineSize: 'default' === type ? `${100 / totalSteps}%` : void 0,
         ...style,
         ...stepProps?.style,
       },
       onClick: onCompletedClick,
       onKeyDown: onKeyDown,
-      'aria-current': isActive ? 'step' : undefined,
-      tabIndex: isClickable ? 0 : undefined,
+      'aria-current': isActive ? 'step' : void 0,
+      tabIndex: isClickable ? 0 : void 0,
       ref: forwardedRef,
       ...rest,
     },
@@ -99,7 +92,7 @@ const StepperStep = _react.forwardRef((props, forwardedRef) => {
         index + 1,
       ),
     ),
-    type === 'default' &&
+    'default' === type &&
       _react.createElement(
         _index.Box,
         {

package/cjs/core/Stepper/WorkflowDiagram.js

@@ -15,7 +15,7 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _WorkflowDiagramStep = require('./WorkflowDiagramStep.js');
 const WorkflowDiagram = _react.forwardRef((props, ref) => {
-  const { steps, className, contentProps, wrapperProps, ...rest } = props;
+  let { steps, className, contentProps, wrapperProps, ...rest } = props;
   return _react.createElement(
     _index.Box,
     {
@@ -31,7 +31,7 @@ const WorkflowDiagram = _react.forwardRef((props, ref) => {
         ...rest,
       },
       steps.map((s, index) => {
-        const thisContentProps = contentProps?.(index);
+        let thisContentProps = contentProps?.(index);
         return _react.createElement(_WorkflowDiagramStep.WorkflowDiagramStep, {
           contentProps: thisContentProps,
           key: index,

package/cjs/core/Stepper/WorkflowDiagramStep.js

@@ -15,8 +15,8 @@ const _react = _interop_require_wildcard._(require('react'));
 const _Tooltip = require('../Tooltip/Tooltip.js');
 const _index = require('../../utils/index.js');
 const WorkflowDiagramStep = (props) => {
-  const { title, description, className, style, contentProps, ...rest } = props;
-  const stepShape = _react.createElement(
+  let { title, description, className, style, contentProps, ...rest } = props;
+  let stepShape = _react.createElement(
     _index.Box,
     {
       as: 'li',

package/cjs/core/Surface/Surface.d.ts

@@ -3,6 +3,7 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type SurfaceBodyOwnProps = {
     /**
      * Gives padding to the surface body
+     * @default false
      */
     isPadded?: boolean;
 };