@itwin/itwinui-react 3.11.2 → 3.12.0

package/esm/core/Slider/Thumb.js

@@ -1,65 +1,109 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Box, useMergedRefs } from '../../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.
- */
 export 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, { placement: 'top', autoUpdateOptions: { animationFrame: true }, ariaStrategy: 'none', ...tooltipProps },
-        React.createElement(Box, { ...rest, ref: useMergedRefs(thumbRef, thumbProps?.ref), style: {
-                ...style,
-                '--iui-slider-thumb-position': `${lowPercent}%`,
-            }, className: cx('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 _jsx(Tooltip, {
+    placement: 'top',
+    autoUpdateOptions: {
+      animationFrame: true,
+    },
+    ariaStrategy: 'none',
+    ...tooltipProps,
+    children: _jsx(Box, {
+      ...rest,
+      ref: useMergedRefs(thumbRef, thumbProps?.ref),
+      style: {
+        ...style,
+        '--iui-slider-thumb-position': `${lowPercent}%`,
+      },
+      className: cx(
+        '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),
+    }),
+  });
 };

package/esm/core/Slider/Track.d.ts

@@ -11,4 +11,4 @@ export 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) => React.JSX.Element;
+export declare const Track: (props: TrackProps) => import("react/jsx-runtime").JSX.Element;

package/esm/core/Slider/Track.js

@@ -1,66 +1,91 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, Fragment as _Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../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`.
- */
 export 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(Box, { className: cx('iui-slider-track', className), style: {
+  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 _jsx(_Fragment, {
+    children:
+      '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 _jsx(
+          React.Fragment,
+          {
+            children: shouldDisplaySegment(index, trackDisplayMode)
+              ? _jsx(Box, {
+                  className: cx('iui-slider-track', className),
+                  style: {
                     ...(orientation === 'horizontal'
-                        ? {
-                            insetInlineStart: `${lowPercent}%`,
-                            insetInlineEnd: `${highPercent}%`,
+                      ? {
+                          insetInlineStart: `${lowPercent}%`,
+                          insetInlineEnd: `${highPercent}%`,
                         }
-                        : {
-                            insetBlockStart: `${highPercent}%`,
-                            insetBlockEnd: `${lowPercent}%`,
+                      : {
+                          insetBlockStart: `${highPercent}%`,
+                          insetBlockEnd: `${lowPercent}%`,
                         }),
-                } })) : null));
-        })));
+                  },
+                })
+              : null,
+          },
+          index,
+        );
+      }),
+  });
 };

package/esm/core/StatusMessage/StatusMessage.js

@@ -1,23 +1,37 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Box, StatusIconMap } from '../../utils/index.js';
 import cx from 'classnames';
 import { Icon } from '../Icon/Icon.js';
-/**
- * Component to display icon and text below the form field.
- * @example
- * <StatusMessage>This is the text</StatusMessage>
- * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
- */
 export const StatusMessage = React.forwardRef((props, ref) => {
-    const { children, startIcon: userStartIcon, status, className, iconProps, contentProps, ...rest } = props;
-    const icon = userStartIcon ?? (status && StatusIconMap[status]());
-    // If user passes null, we don't want to show the icon
-    const shouldShowIcon = userStartIcon !== null && !!icon;
-    return (React.createElement(Box, { className: cx('iui-status-message', className), "data-iui-status": status, ref: ref, ...rest },
-        shouldShowIcon ? (React.createElement(Icon, { "aria-hidden": true, ...iconProps }, icon)) : null,
-        React.createElement(Box, { ...contentProps }, children)));
+  const {
+    children,
+    startIcon: userStartIcon,
+    status,
+    className,
+    iconProps,
+    contentProps,
+    ...rest
+  } = props;
+  const icon = userStartIcon ?? (status && StatusIconMap[status]());
+  const shouldShowIcon = userStartIcon !== null && !!icon;
+  return _jsxs(Box, {
+    className: cx('iui-status-message', className),
+    'data-iui-status': status,
+    ref: ref,
+    ...rest,
+    children: [
+      shouldShowIcon
+        ? _jsx(Icon, {
+            'aria-hidden': true,
+            ...iconProps,
+            children: icon,
+          })
+        : null,
+      _jsx(Box, {
+        ...contentProps,
+        children: children,
+      }),
+    ],
+  });
 });

package/esm/core/Stepper/Stepper.js

@@ -1,26 +1,82 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 import { StepperStep } from './StepperStep.js';
 const defaultStepperLocalization = {
-    stepsCountLabel: (currentStep, totalSteps) => `Step ${currentStep} of ${totalSteps}:`,
+  stepsCountLabel: (currentStep, totalSteps) =>
+    `Step ${currentStep} of ${totalSteps}:`,
 };
 export const 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(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, { 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(Box, { as: 'div', ...labelProps, className: cx('iui-stepper-steps-label', labelProps?.className) },
-            React.createElement(Box, { as: 'span', ...labelCountProps, className: cx('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 _jsxs(Box, {
+    className: 'iui-stepper',
+    ref: ref,
+    ...rest,
+    children: [
+      _jsx('ol', {
+        children: steps.map((s, index) => {
+          const thisStepProps = stepProps?.(index);
+          const thisTrackContentProps = trackContentProps?.(index);
+          const thisCircleProps = circleProps?.(index);
+          const thisNameProps = nameProps?.(index);
+          return _jsx(
+            StepperStep,
+            {
+              stepProps: thisStepProps,
+              trackContentProps: thisTrackContentProps,
+              circleProps: thisCircleProps,
+              nameProps: thisNameProps,
+              index: index,
+              title: type === 'long' ? '' : s.name,
+              currentStepNumber: boundedCurrentStep,
+              totalSteps: steps.length,
+              type: type,
+              onClick: onStepClick,
+              description: s.description,
+            },
+            index,
+          );
+        }),
+      }),
+      type === 'long' &&
+        _jsxs(Box, {
+          as: 'div',
+          ...labelProps,
+          className: cx('iui-stepper-steps-label', labelProps?.className),
+          children: [
+            _jsx(Box, {
+              as: 'span',
+              ...labelCountProps,
+              className: cx(
+                'iui-stepper-steps-label-count',
+                labelCountProps?.className,
+              ),
+              children: localization.stepsCountLabel(
+                boundedCurrentStep + 1,
+                steps.length,
+              ),
+            }),
+            steps[boundedCurrentStep].name,
+          ],
+        }),
+    ],
+  });
 });

package/esm/core/Stepper/StepperStep.js

@@ -1,39 +1,95 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Box } from '../../utils/index.js';
 export const StepperStep = React.forwardRef((props, forwardedRef) => {
-    const { title, index, currentStepNumber, totalSteps, type, onClick, description, className, style, stepProps, trackContentProps, circleProps, nameProps, ...rest } = props;
-    const isPast = currentStepNumber > index;
-    const isActive = currentStepNumber === index;
-    const isClickable = isPast && !!onClick;
-    const onCompletedClick = () => {
-        if (isClickable) {
-            onClick?.(index);
-        }
-    };
-    const onKeyDown = (e) => {
-        if (e.altKey) {
-            return;
-        }
-        if (!isClickable) {
-            return;
-        }
-        if (e.key === 'Enter' || e.key === 'Space' || e.key === ' ') {
-            onCompletedClick();
-        }
-    };
-    const stepShape = (React.createElement(Box, { as: 'li', ...stepProps, className: cx('iui-stepper-step', { 'iui-current': isActive, 'iui-clickable': isClickable }, className, stepProps?.className), style: {
-            inlineSize: type === 'default' ? `${100 / totalSteps}%` : undefined,
-            ...style,
-            ...stepProps?.style,
-        }, onClick: onCompletedClick, onKeyDown: onKeyDown, "aria-current": isActive ? 'step' : undefined, tabIndex: isClickable ? 0 : undefined, ref: forwardedRef, ...rest },
-        React.createElement(Box, { as: 'div', ...trackContentProps, className: cx('iui-stepper-track-content', trackContentProps?.className) },
-            React.createElement(Box, { as: 'span', ...circleProps, className: cx('iui-stepper-circle', circleProps?.className) }, index + 1)),
-        type === 'default' && (React.createElement(Box, { as: 'span', ...nameProps, className: cx('iui-stepper-step-name', nameProps?.className) }, title))));
-    return description ? (React.createElement(Tooltip, { content: description }, stepShape)) : (stepShape);
+  const {
+    title,
+    index,
+    currentStepNumber,
+    totalSteps,
+    type,
+    onClick,
+    description,
+    className,
+    style,
+    stepProps,
+    trackContentProps,
+    circleProps,
+    nameProps,
+    ...rest
+  } = props;
+  const isPast = currentStepNumber > index;
+  const isActive = currentStepNumber === index;
+  const isClickable = isPast && !!onClick;
+  const onCompletedClick = () => {
+    if (isClickable) {
+      onClick?.(index);
+    }
+  };
+  const onKeyDown = (e) => {
+    if (e.altKey) {
+      return;
+    }
+    if (!isClickable) {
+      return;
+    }
+    if (e.key === 'Enter' || e.key === 'Space' || e.key === ' ') {
+      onCompletedClick();
+    }
+  };
+  const stepShape = _jsxs(Box, {
+    as: 'li',
+    ...stepProps,
+    className: cx(
+      'iui-stepper-step',
+      {
+        'iui-current': isActive,
+        'iui-clickable': isClickable,
+      },
+      className,
+      stepProps?.className,
+    ),
+    style: {
+      inlineSize: type === 'default' ? `${100 / totalSteps}%` : undefined,
+      ...style,
+      ...stepProps?.style,
+    },
+    onClick: onCompletedClick,
+    onKeyDown: onKeyDown,
+    'aria-current': isActive ? 'step' : undefined,
+    tabIndex: isClickable ? 0 : undefined,
+    ref: forwardedRef,
+    ...rest,
+    children: [
+      _jsx(Box, {
+        as: 'div',
+        ...trackContentProps,
+        className: cx(
+          'iui-stepper-track-content',
+          trackContentProps?.className,
+        ),
+        children: _jsx(Box, {
+          as: 'span',
+          ...circleProps,
+          className: cx('iui-stepper-circle', circleProps?.className),
+          children: index + 1,
+        }),
+      }),
+      type === 'default' &&
+        _jsx(Box, {
+          as: 'span',
+          ...nameProps,
+          className: cx('iui-stepper-step-name', nameProps?.className),
+          children: title,
+        }),
+    ],
+  });
+  return description
+    ? _jsx(Tooltip, {
+        content: description,
+        children: stepShape,
+      })
+    : stepShape;
 });

package/esm/core/Stepper/WorkflowDiagram.js

@@ -1,18 +1,30 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
 import { WorkflowDiagramStep } from './WorkflowDiagramStep.js';
-export const WorkflowDiagram = React.forwardRef(
-// TODO: Remove this ref cast. ref and rest props should be applied on the same element
-(props, ref) => {
-    const { steps, className, contentProps, wrapperProps, ...rest } = props;
-    return (React.createElement(Box, { as: 'div', ...wrapperProps, ref: ref },
-        React.createElement(Box, { as: 'ol', className: cx('iui-workflow-diagram', className), ...rest }, steps.map((s, index) => {
-            const thisContentProps = contentProps?.(index);
-            return (React.createElement(WorkflowDiagramStep, { contentProps: thisContentProps, key: index, title: s.name, description: s.description }));
-        }))));
+export const WorkflowDiagram = React.forwardRef((props, ref) => {
+  const { steps, className, contentProps, wrapperProps, ...rest } = props;
+  return _jsx(Box, {
+    as: 'div',
+    ...wrapperProps,
+    ref: ref,
+    children: _jsx(Box, {
+      as: 'ol',
+      className: cx('iui-workflow-diagram', className),
+      ...rest,
+      children: steps.map((s, index) => {
+        const thisContentProps = contentProps?.(index);
+        return _jsx(
+          WorkflowDiagramStep,
+          {
+            contentProps: thisContentProps,
+            title: s.name,
+            description: s.description,
+          },
+          index,
+        );
+      }),
+    }),
+  });
 });

package/esm/core/Stepper/WorkflowDiagramStep.d.ts

@@ -7,4 +7,4 @@ export type WorkflowDiagramStepProps = {
      */
     contentProps?: React.ComponentProps<'span'>;
 } & Pick<StepperStepProps, 'title' | 'description'> & Omit<CommonProps, 'title'>;
-export declare const WorkflowDiagramStep: (props: WorkflowDiagramStepProps) => React.JSX.Element;
+export declare const WorkflowDiagramStep: (props: WorkflowDiagramStepProps) => import("react/jsx-runtime").JSX.Element;