@itwin/itwinui-react/esm/core/Stepper/Stepper.js

A react component library for iTwinUI

import cx from 'classnames';
import * as React from 'react';
import { Box } from '../../utils/index.js';
import { StepperStep } from './StepperStep.js';
import { FloatingDelayGroup } from '@floating-ui/react';
import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
let defaultStepperLocalization = {
  stepsCountLabel: (currentStep, totalSteps) =>
    `Step ${currentStep} of ${totalSteps}:`,
};
export const Stepper = React.forwardRef((props, ref) => {
  let {
    currentStep,
    steps,
    type = 'default',
    localization = defaultStepperLocalization,
    onStepClick,
    stepProps,
    trackContentProps,
    circleProps,
    nameProps,
    labelProps,
    labelCountProps,
    ...rest
  } = props;
  let boundedCurrentStep = Math.min(
    Math.max(0, currentStep ?? 0),
    steps.length - 1,
  );
  return React.createElement(
    Box,
    {
      className: 'iui-stepper',
      ref: ref,
      ...rest,
    },
    React.createElement(
      FloatingDelayGroup,
      {
        delay: defaultTooltipDelay,
      },
      React.createElement(
        'ol',
        null,
        steps.map((s, index) => {
          let thisStepProps = stepProps?.(index);
          let thisTrackContentProps = trackContentProps?.(index);
          let thisCircleProps = circleProps?.(index);
          let thisNameProps = nameProps?.(index);
          return React.createElement(StepperStep, {
            stepProps: thisStepProps,
            trackContentProps: thisTrackContentProps,
            circleProps: thisCircleProps,
            nameProps: thisNameProps,
            key: index,
            index: index,
            title: 'long' === type ? '' : s.name,
            currentStepNumber: boundedCurrentStep,
            totalSteps: steps.length,
            type: type,
            onClick: onStepClick,
            description: s.description,
            stepContent: s.stepContent,
          });
        }),
      ),
    ),
    'long' === type &&
      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,
      ),
  );
});
if ('development' === process.env.NODE_ENV) Stepper.displayName = 'Stepper';