@itwin/itwinui-react 3.0.0-dev.4 → 3.0.0-dev.6

package/cjs/core/Slider/Thumb.js

@@ -1,97 +1,124 @@
-"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;
-});
-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 });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Thumb = void 0;
+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 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../Tooltip/index.js");
-const index_js_2 = require("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../Tooltip/index.js');
+const index_js_2 = 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, orientation, } = 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(index_js_1.Tooltip, { placement: 'top', autoUpdateOptions: { animationFrame: true }, ...tooltipProps },
-        React.createElement(index_js_2.Box, { ...rest, "data-index": index, ref: thumbRef, style: {
-                ...style,
-                ...(orientation === 'horizontal'
-                    ? { left: `${lowPercent}%` }
-                    : { bottom: `${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,
+    orientation,
+  } = 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(
+    index_js_1.Tooltip,
+    {
+      placement: 'top',
+      autoUpdateOptions: { animationFrame: true },
+      ...tooltipProps,
+    },
+    React.createElement(index_js_2.Box, {
+      ...rest,
+      'data-index': index,
+      ref: thumbRef,
+      style: {
+        ...style,
+        ...(orientation === 'horizontal'
+          ? { left: `${lowPercent}%` }
+          : { bottom: `${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.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { SliderProps, TrackDisplayMode } from './Slider.js';
-export declare type TrackProps = {
+export type TrackProps = {
     trackDisplayMode: TrackDisplayMode;
     sliderMin: number;
     sliderMax: number;
@@ -11,4 +11,4 @@ export declare type TrackProps = {
  * Track displays color segments above Rail. Which, if any, segments that are
  * colorized is based on `trackDisplayMode`.
  */
-export declare const Track: (props: TrackProps) => JSX.Element;
+export declare const Track: (props: TrackProps) => React.JSX.Element;

package/cjs/core/Slider/Track.js

@@ -1,92 +1,88 @@
-"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;
-});
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Track = void 0;
+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 = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+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 { 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: 'iui-slider-track', style: {
-                    ...(orientation === 'horizontal'
-                        ? {
-                            left: `${lowPercent}%`,
-                            right: `${highPercent}%`,
-                        }
-                        : {
-                            top: `${highPercent}%`,
-                            bottom: `${lowPercent}%`,
-                        }),
-                } })) : null));
-        })));
+  const { 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: 'iui-slider-track',
+                style: {
+                  ...(orientation === 'horizontal'
+                    ? {
+                        left: `${lowPercent}%`,
+                        right: `${highPercent}%`,
+                      }
+                    : {
+                        top: `${highPercent}%`,
+                        bottom: `${lowPercent}%`,
+                      }),
+                },
+              })
+            : null,
+        );
+      }),
+  );
 };
 exports.Track = Track;

package/cjs/core/Slider/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+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.
  *--------------------------------------------------------------------------------------------*/
-var Slider_js_1 = require("./Slider.js");
-Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_js_1.Slider; } });
+var Slider_js_1 = require('./Slider.js');
+Object.defineProperty(exports, 'Slider', {
+  enumerable: true,
+  get: function () {
+    return Slider_js_1.Slider;
+  },
+});
 exports.default = './Slider';

package/cjs/core/StatusMessage/StatusMessage.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type StatusMessageProps = {
+type StatusMessageProps = {
     /**
      * Custom icon to be displayed at the beginning.
      * It will default to the `status` icon, if it's set.
@@ -20,5 +20,5 @@ declare type StatusMessageProps = {
  * <StatusMessage>This is the text</StatusMessage>
  * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
  */
-export declare const StatusMessage: ({ startIcon: userStartIcon, children, status, }: StatusMessageProps) => JSX.Element;
+export declare const StatusMessage: ({ startIcon: userStartIcon, children, status, }: StatusMessageProps) => React.JSX.Element;
 export default StatusMessage;

package/cjs/core/StatusMessage/StatusMessage.js

@@ -1,46 +1,33 @@
-"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;
-});
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.StatusMessage = void 0;
+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 = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
 /**
  * Component to display icon and text below the `Combobox` component.
  * @example
  * <StatusMessage>This is the text</StatusMessage>
  * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
  */
-const StatusMessage = ({ startIcon: userStartIcon, children, status, }) => {
-    const icon = userStartIcon ?? (status && index_js_1.StatusIconMap[status]());
-    return (React.createElement(React.Fragment, null,
-        !!icon ? (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-input-icon', "aria-hidden": true }, icon)) : null,
-        React.createElement(index_js_1.Box, { className: 'iui-message' }, children)));
+const StatusMessage = ({ startIcon: userStartIcon, children, status }) => {
+  const icon = userStartIcon ?? (status && index_js_1.StatusIconMap[status]());
+  return React.createElement(
+    React.Fragment,
+    null,
+    !!icon
+      ? React.createElement(
+          index_js_1.Box,
+          { as: 'span', className: 'iui-input-icon', 'aria-hidden': true },
+          icon,
+        )
+      : null,
+    React.createElement(index_js_1.Box, { className: 'iui-message' }, children),
+  );
 };
 exports.StatusMessage = StatusMessage;
 exports.default = exports.StatusMessage;

package/cjs/core/StatusMessage/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.StatusMessage = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var StatusMessage_js_1 = require("./StatusMessage.js");
-Object.defineProperty(exports, "StatusMessage", { enumerable: true, get: function () { return StatusMessage_js_1.StatusMessage; } });
+var StatusMessage_js_1 = require('./StatusMessage.js');
+Object.defineProperty(exports, 'StatusMessage', {
+  enumerable: true,
+  get: function () {
+    return StatusMessage_js_1.StatusMessage;
+  },
+});
 exports.default = './StatusMessage';

package/cjs/core/Stepper/Stepper.d.ts

@@ -1,8 +1,8 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-export declare type StepperLocalization = {
+export type StepperLocalization = {
     stepsCountLabel: (currentStep: number, totalSteps: number) => string;
 };
-export declare type StepProperties = {
+export type StepProperties = {
     /**
      * The title/label of the step.
      */
@@ -12,7 +12,7 @@ export declare type StepProperties = {
      */
     description?: string;
 };
-export declare type StepperProps = {
+export type StepperProps = {
     /**
      * Current step index, 0 - based.
      */

package/cjs/core/Stepper/Stepper.js

@@ -1,46 +1,61 @@
-"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;
-});
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Stepper = void 0;
+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 = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
-const StepperStep_js_1 = require("./StepperStep.js");
+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, ...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) => (React.createElement(StepperStep_js_1.StepperStep, { 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, { className: 'iui-stepper-steps-label' },
-            React.createElement(index_js_1.Box, { as: 'span', className: 'iui-stepper-steps-label-count' }, localization.stepsCountLabel(boundedCurrentStep + 1, steps.length)),
-            steps[boundedCurrentStep].name))));
+  const {
+    currentStep,
+    steps,
+    type = 'default',
+    localization = defaultStepperLocalization,
+    onStepClick,
+    ...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) =>
+        React.createElement(StepperStep_js_1.StepperStep, {
+          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,
+        { className: 'iui-stepper-steps-label' },
+        React.createElement(
+          index_js_1.Box,
+          { as: 'span', className: 'iui-stepper-steps-label-count' },
+          localization.stepsCountLabel(boundedCurrentStep + 1, steps.length),
+        ),
+        steps[boundedCurrentStep].name,
+      ),
+  );
 });
 exports.default = exports.Stepper;

package/cjs/core/Stepper/StepperStep.d.ts

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-export declare type StepperStepProps = {
+export type StepperStepProps = {
     /**
      * The title/label of the step.
      */