@itwin/itwinui-react 3.0.3 → 3.0.5

package/cjs/core/Slider/Thumb.js

@@ -1,121 +1,70 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Thumb = 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 React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const Tooltip_js_1 = require('../Tooltip/Tooltip.js');
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Tooltip_js_1 = require("../Tooltip/Tooltip.js");
+const index_js_1 = require("../utils/index.js");
 /**
  * Thumb is a local component used to show and modify the values maintained by the Slider.
  * Only one Thumb can be active at a time. A Thumb is made active when the user selects
  * it with pointer. Whenever a Thumb is active, focused, or hovered its tooltip is shown.
  */
 const Thumb = (props) => {
-  const {
-    value,
-    index,
-    minVal,
-    maxVal,
-    step,
-    sliderMin,
-    sliderMax,
-    isActive,
-    onThumbActivated,
-    onThumbValueChanged,
-    tooltipProps,
-    thumbProps,
-    disabled,
-  } = props;
-  const thumbRef = React.useRef(null);
-  const handleOnKeyboardEvent = React.useCallback(
-    (event, keyboardReleased) => {
-      if (disabled || event.altKey) {
-        return;
-      }
-      switch (event.key) {
-        case 'ArrowLeft':
-        case 'ArrowDown':
-          onThumbValueChanged(
-            index,
-            Math.max(value - step, minVal),
-            keyboardReleased,
-          );
-          break;
-        case 'ArrowRight':
-        case 'ArrowUp':
-          onThumbValueChanged(
-            index,
-            Math.min(value + step, maxVal),
-            keyboardReleased,
-          );
-          break;
-        case 'Home':
-          onThumbValueChanged(index, minVal, keyboardReleased);
-          break;
-        case 'End':
-          onThumbValueChanged(index, maxVal, keyboardReleased);
-          break;
-        default:
-          return;
-      }
-      event.preventDefault();
-    },
-    [disabled, onThumbValueChanged, index, value, step, minVal, maxVal],
-  );
-  const handlePointerDownOnThumb = React.useCallback(() => {
-    !disabled && onThumbActivated(index);
-  }, [disabled, index, onThumbActivated]);
-  const 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;
-    }
-    return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
-  }, [adjustedValue, sliderMax, sliderMin]);
-  const { style, className, ...rest } = thumbProps || {};
-  return React.createElement(
-    Tooltip_js_1.Tooltip,
-    {
-      placement: 'top',
-      autoUpdateOptions: { animationFrame: true },
-      ariaStrategy: 'none',
-      ...tooltipProps,
-    },
-    React.createElement(index_js_1.Box, {
-      ...rest,
-      ref: thumbRef,
-      style: {
-        ...style,
-        '--iui-slider-thumb-position': `${lowPercent}%`,
-      },
-      className: (0, classnames_1.default)(
-        'iui-slider-thumb',
-        { 'iui-active': isActive },
-        className,
-      ),
-      role: 'slider',
-      tabIndex: disabled ? undefined : 0,
-      'aria-valuemin': minVal,
-      'aria-valuenow': value,
-      'aria-valuemax': maxVal,
-      'aria-disabled': disabled,
-      onPointerDown: handlePointerDownOnThumb,
-      onKeyDown: (event) => handleOnKeyboardEvent(event, false),
-      onKeyUp: (event) => handleOnKeyboardEvent(event, true),
-    }),
-  );
+    const { value, index, minVal, maxVal, step, sliderMin, sliderMax, isActive, onThumbActivated, onThumbValueChanged, tooltipProps, thumbProps, disabled, } = props;
+    const thumbRef = React.useRef(null);
+    const handleOnKeyboardEvent = React.useCallback((event, keyboardReleased) => {
+        if (disabled || event.altKey) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                onThumbValueChanged(index, Math.max(value - step, minVal), keyboardReleased);
+                break;
+            case 'ArrowRight':
+            case 'ArrowUp':
+                onThumbValueChanged(index, Math.min(value + step, maxVal), keyboardReleased);
+                break;
+            case 'Home':
+                onThumbValueChanged(index, minVal, keyboardReleased);
+                break;
+            case 'End':
+                onThumbValueChanged(index, maxVal, keyboardReleased);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }, [disabled, onThumbValueChanged, index, value, step, minVal, maxVal]);
+    const handlePointerDownOnThumb = React.useCallback(() => {
+        !disabled && onThumbActivated(index);
+    }, [disabled, index, onThumbActivated]);
+    const 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;
+        }
+        return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
+    }, [adjustedValue, sliderMax, sliderMin]);
+    const { style, className, ...rest } = thumbProps || {};
+    return (React.createElement(Tooltip_js_1.Tooltip, { placement: 'top', autoUpdateOptions: { animationFrame: true }, ariaStrategy: 'none', ...tooltipProps },
+        React.createElement(index_js_1.Box, { ...rest, ref: thumbRef, style: {
+                ...style,
+                '--iui-slider-thumb-position': `${lowPercent}%`,
+            }, className: (0, classnames_1.default)('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: (event) => handleOnKeyboardEvent(event, false), onKeyUp: (event) => handleOnKeyboardEvent(event, true) })));
 };
 exports.Thumb = Thumb;

package/cjs/core/Slider/Track.js

@@ -1,99 +1,71 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Track = 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 React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = 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;
-  }
-  return false;
+    if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) {
+        return true;
+    }
+    else if ('even-segments' === mode && 0 === segmentIndex % 2) {
+        return true;
+    }
+    return false;
 }
 function generateSegments(values, min, max) {
-  const segments = [];
-  const 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({ left: lastValue, right: newValues[i] });
-    lastValue = newValues[i];
-  }
-  segments.push({ left: lastValue, right: max });
-  return segments;
+    const segments = [];
+    const 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({ left: lastValue, right: newValues[i] });
+        lastValue = newValues[i];
+    }
+    segments.push({ left: lastValue, right: max });
+    return segments;
 }
 /**
  * Track displays color segments above Rail. Which, if any, segments that are
  * colorized is based on `trackDisplayMode`.
  */
 const Track = (props) => {
-  const {
-    className,
-    trackDisplayMode,
-    sliderMin,
-    sliderMax,
-    values,
-    orientation,
-  } = props;
-  const [segments, setSegments] = React.useState(() =>
-    generateSegments(values, sliderMin, sliderMax),
-  );
-  React.useEffect(() => {
-    setSegments(generateSegments(values, sliderMin, sliderMax));
-  }, [values, sliderMin, sliderMax]);
-  return React.createElement(
-    React.Fragment,
-    null,
-    'none' !== trackDisplayMode &&
-      segments.map((segment, index) => {
-        const lowPercent =
-          segment.left >= sliderMin && sliderMax !== sliderMin
-            ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
-            : 0;
-        const highPercent =
-          segment.right >= sliderMin && sliderMax !== sliderMin
-            ? 100.0 -
-              (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
-            : 100;
-        return React.createElement(
-          React.Fragment,
-          { key: index },
-          shouldDisplaySegment(index, trackDisplayMode)
-            ? React.createElement(index_js_1.Box, {
-                className: (0, classnames_1.default)(
-                  'iui-slider-track',
-                  className,
-                ),
-                style: {
-                  ...(orientation === 'horizontal'
-                    ? {
-                        insetInlineStart: `${lowPercent}%`,
-                        insetInlineEnd: `${highPercent}%`,
-                      }
-                    : {
-                        insetBlockStart: `${highPercent}%`,
-                        insetBlockEnd: `${lowPercent}%`,
-                      }),
-                },
-              })
-            : null,
-        );
-      }),
-  );
+    const { className, trackDisplayMode, sliderMin, sliderMax, values, orientation, } = props;
+    const [segments, setSegments] = React.useState(() => generateSegments(values, sliderMin, sliderMax));
+    React.useEffect(() => {
+        setSegments(generateSegments(values, sliderMin, sliderMax));
+    }, [values, sliderMin, sliderMax]);
+    return (React.createElement(React.Fragment, null, 'none' !== trackDisplayMode &&
+        segments.map((segment, index) => {
+            const lowPercent = segment.left >= sliderMin && sliderMax !== sliderMin
+                ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
+                : 0;
+            const highPercent = segment.right >= sliderMin && sliderMax !== sliderMin
+                ? 100.0 -
+                    (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
+                : 100;
+            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-slider-track', className), style: {
+                    ...(orientation === 'horizontal'
+                        ? {
+                            insetInlineStart: `${lowPercent}%`,
+                            insetInlineEnd: `${highPercent}%`,
+                        }
+                        : {
+                            insetBlockStart: `${highPercent}%`,
+                            insetBlockEnd: `${lowPercent}%`,
+                        }),
+                } })) : null));
+        })));
 };
 exports.Track = Track;

package/cjs/core/StatusMessage/StatusMessage.js

@@ -1,15 +1,15 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusMessage = 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 React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const Icon_js_1 = require('../Icon/Icon.js');
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Icon_js_1 = require("../Icon/Icon.js");
 /**
  * Component to display icon and text below the form field.
  * @example
@@ -17,32 +17,10 @@ const Icon_js_1 = require('../Icon/Icon.js');
  * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
  */
 exports.StatusMessage = React.forwardRef((props, ref) => {
-  const {
-    children,
-    startIcon: userStartIcon,
-    status,
-    className,
-    iconProps,
-    contentProps,
-    ...rest
-  } = props;
-  const icon = userStartIcon ?? (status && index_js_1.StatusIconMap[status]());
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)('iui-status-message', className),
-      'data-iui-status': status,
-      ref: ref,
-      ...rest,
-    },
-    !!icon
-      ? React.createElement(
-          Icon_js_1.Icon,
-          { 'aria-hidden': true, ...iconProps },
-          icon,
-        )
-      : null,
-    React.createElement(index_js_1.Box, { ...contentProps }, children),
-  );
+    const { children, startIcon: userStartIcon, status, className, iconProps, contentProps, ...rest } = props;
+    const icon = userStartIcon ?? (status && index_js_1.StatusIconMap[status]());
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-status-message', className), "data-iui-status": status, ref: ref, ...rest },
+        !!icon ? (React.createElement(Icon_js_1.Icon, { "aria-hidden": true, ...iconProps }, icon)) : null,
+        React.createElement(index_js_1.Box, { ...contentProps }, children)));
 });
 exports.default = exports.StatusMessage;

package/cjs/core/Stepper/Stepper.js

@@ -1,90 +1,31 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stepper = 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 StepperStep_js_1 = require('./StepperStep.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 StepperStep_js_1 = require("./StepperStep.js");
 const defaultStepperLocalization = {
-  stepsCountLabel: (currentStep, totalSteps) =>
-    `Step ${currentStep} of ${totalSteps}:`,
+    stepsCountLabel: (currentStep, totalSteps) => `Step ${currentStep} of ${totalSteps}:`,
 };
 exports.Stepper = React.forwardRef((props, ref) => {
-  const {
-    currentStep,
-    steps,
-    type = 'default',
-    localization = defaultStepperLocalization,
-    onStepClick,
-    stepProps,
-    trackContentProps,
-    circleProps,
-    nameProps,
-    labelProps,
-    labelCountProps,
-    ...rest
-  } = props;
-  const boundedCurrentStep = Math.min(
-    Math.max(0, currentStep ?? 0),
-    steps.length - 1,
-  );
-  return React.createElement(
-    index_js_1.Box,
-    { className: 'iui-stepper', ref: ref, ...rest },
-    React.createElement(
-      'ol',
-      null,
-      steps.map((s, index) => {
-        const thisStepProps = stepProps?.(index);
-        const thisTrackContentProps = trackContentProps?.(index);
-        const thisCircleProps = circleProps?.(index);
-        const thisNameProps = nameProps?.(index);
-        return React.createElement(StepperStep_js_1.StepperStep, {
-          stepProps: thisStepProps,
-          trackContentProps: thisTrackContentProps,
-          circleProps: thisCircleProps,
-          nameProps: thisNameProps,
-          key: index,
-          index: index,
-          title: type === 'long' ? '' : s.name,
-          currentStepNumber: boundedCurrentStep,
-          totalSteps: steps.length,
-          type: type,
-          onClick: onStepClick,
-          description: s.description,
-        });
-      }),
-    ),
-    type === 'long' &&
-      React.createElement(
-        index_js_1.Box,
-        {
-          as: 'div',
-          ...labelProps,
-          className: (0, classnames_1.default)(
-            'iui-stepper-steps-label',
-            labelProps?.className,
-          ),
-        },
-        React.createElement(
-          index_js_1.Box,
-          {
-            as: 'span',
-            ...labelCountProps,
-            className: (0, classnames_1.default)(
-              'iui-stepper-steps-label-count',
-              labelCountProps?.className,
-            ),
-          },
-          localization.stepsCountLabel(boundedCurrentStep + 1, steps.length),
-        ),
-        steps[boundedCurrentStep].name,
-      ),
-  );
+    const { currentStep, steps, type = 'default', localization = defaultStepperLocalization, onStepClick, stepProps, trackContentProps, circleProps, nameProps, labelProps, labelCountProps, ...rest } = props;
+    const boundedCurrentStep = Math.min(Math.max(0, currentStep ?? 0), steps.length - 1);
+    return (React.createElement(index_js_1.Box, { className: 'iui-stepper', ref: ref, ...rest },
+        React.createElement("ol", null, steps.map((s, index) => {
+            const thisStepProps = stepProps?.(index);
+            const thisTrackContentProps = trackContentProps?.(index);
+            const thisCircleProps = circleProps?.(index);
+            const thisNameProps = nameProps?.(index);
+            return (React.createElement(StepperStep_js_1.StepperStep, { stepProps: thisStepProps, trackContentProps: thisTrackContentProps, circleProps: thisCircleProps, nameProps: thisNameProps, key: index, index: index, title: type === 'long' ? '' : s.name, currentStepNumber: boundedCurrentStep, totalSteps: steps.length, type: type, onClick: onStepClick, description: s.description }));
+        })),
+        type === 'long' && (React.createElement(index_js_1.Box, { as: 'div', ...labelProps, className: (0, classnames_1.default)('iui-stepper-steps-label', labelProps?.className) },
+            React.createElement(index_js_1.Box, { as: 'span', ...labelCountProps, className: (0, classnames_1.default)('iui-stepper-steps-label-count', labelCountProps?.className) }, localization.stepsCountLabel(boundedCurrentStep + 1, steps.length)),
+            steps[boundedCurrentStep].name))));
 });
 exports.default = exports.Stepper;