{"version":3,"file":"stepper.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport styles from './stepper.module.pcss';\nimport {\n  StepperCollapse,\n  StepperLabelPlacement,\n  StepperOrientation,\n  StepperStyleType,\n  type StepperLabels,\n  type StepperProps,\n  type StepperStep,\n} from './stepper.types';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { ThemeColor } from '../themeProvider/color.types';\nimport { toneProps, useToneCheck } from '../styles/tone';\nimport { renderIcon } from '../utils/renderIcon';\n\nconst STYLE_CLASS: Record<StepperStyleType, string> = {\n  [StepperStyleType.Filled]: styles.stepperFilled,\n  [StepperStyleType.Outlined]: styles.stepperOutlined,\n  [StepperStyleType.Dots]: styles.stepperDots,\n};\n\nconst PLACEMENT_CLASS: Record<StepperLabelPlacement, string> = {\n  [StepperLabelPlacement.Top]: styles.stepperLabelTop,\n  [StepperLabelPlacement.Bottom]: styles.stepperLabelBottom,\n  [StepperLabelPlacement.Left]: styles.stepperLabelLeft,\n  [StepperLabelPlacement.Right]: styles.stepperLabelRight,\n};\n\nconst DEFAULT_LABELS: Required<StepperLabels> = {\n  optional: 'Optional',\n  completed: 'Completed',\n  notCompleted: 'Not completed',\n  error: 'Error',\n};\n\nconst ERROR_TONE = toneProps(ThemeColor.Error);\n\nfunction Checkmark() {\n  return (\n    <svg\n      className={styles.stepperCheckmark}\n      strokeLinejoin='round'\n      strokeLinecap='round'\n      xmlns='http://www.w3.org/2000/svg'\n      viewBox='-0.2 -1.2 3.4 2'\n    >\n      <path d='M 0 0 l 1 1 l 2 -2' strokeWidth='0.4' fill='none' />\n    </svg>\n  );\n}\n\nfunction StepBody({\n  open,\n  className,\n  style,\n  children,\n}: {\n  open: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  children: React.ReactNode;\n}) {\n  const innerRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState<number | null>(null);\n\n  useEffect(() => {\n    const el = innerRef.current;\n    if (!el) return;\n    const observer = new ResizeObserver(() => setHeight(el.offsetHeight));\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      className={cx(styles.stepperContent, className)}\n      style={{ ...style, height: open ? (height ?? 'auto') : 0 }}\n      inert={!open}\n    >\n      <div ref={innerRef} className={styles.stepperContentInner}>\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction resolvePlacement(placement: StepperLabelPlacement | undefined, isVertical: boolean): StepperLabelPlacement {\n  const verticalValues = [StepperLabelPlacement.Left, StepperLabelPlacement.Right];\n  if (isVertical) {\n    return placement && verticalValues.includes(placement) ? placement : StepperLabelPlacement.Right;\n  }\n  return placement && !verticalValues.includes(placement) ? placement : StepperLabelPlacement.Bottom;\n}\n\nexport default function Stepper(props: StepperProps) {\n  const {\n    steps = [],\n    currentStep = 0,\n    orientation = StepperOrientation.Horizontal,\n    onStepClicked = null,\n    nonLinear = false,\n    hideLabels = false,\n    styleType = StepperStyleType.Filled,\n    color = ThemeColor.Primary,\n    collapse = StepperCollapse.None,\n    labelPlacement,\n    labels,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Stepper', props);\n  const text = useLabels('Stepper', labels, DEFAULT_LABELS);\n  const tone = toneProps(color);\n  useToneCheck('Stepper', [color]);\n  const isVertical = orientation === StepperOrientation.Vertical;\n  const placement = resolvePlacement(labelPlacement, isVertical);\n\n  return (\n    <ol\n      {...rest}\n      // WebKit drops the list role from a list styled `list-style: none`.\n      role='list'\n      className={cx(\n        styles.stepper,\n        tone.className,\n        STYLE_CLASS[styleType],\n        PLACEMENT_CLASS[placement],\n        { [styles.stepperVertical]: isVertical },\n        classNames?.root,\n        className,\n      )}\n      style={{ ...tone.style, ...slotStyles?.root, ...style }}\n    >\n      {steps.map((step: StepperStep, index: number) => {\n        const isCurrent = index === currentStep;\n        const isDone = index < currentStep;\n        const isReached = index <= currentStep;\n        const hasError = !!step.error;\n        // nonLinear: every enabled step except the current one is clickable.\n        // linear: only completed steps are clickable.\n        const isClickable = !!onStepClicked && !step.disabled && (nonLinear ? !isCurrent : isDone);\n        // The current step stays a button, aria-disabled rather than `disabled`: the step just\n        // activated becomes current, and swapping or disabling its button drops focus to the body.\n        const isButton = isClickable || (!!onStepClicked && !step.disabled && isCurrent);\n        const status = hasError ? text.error : isDone ? text.completed : isCurrent ? null : text.notCompleted;\n\n        const markerContent = step.icon ? (\n          renderIcon(step.icon, { className: classNames?.icon, style: slotStyles?.icon })\n        ) : isDone && !hasError ? (\n          <Checkmark />\n        ) : (\n          index + 1\n        );\n\n        // Hidden from screen readers: the list already gives the position, and the status text\n        // says what the checkmark shows.\n        const marker = (\n          <span\n            aria-hidden\n            className={cx(styles.stepperEntryNumber, hasError && ERROR_TONE.className, classNames?.entryNumber)}\n            style={slotStyles?.entryNumber}\n          >\n            {markerContent}\n          </span>\n        );\n\n        const optionalNode = step.optional === true ? text.optional : step.optional !== false ? step.optional : null;\n\n        // The {' '}s keep the parts apart in a button's accessible name (\"Account Completed\", not\n        // \"AccountCompleted\"). A flex container does not render white space, so the layout is unchanged.\n        const labelBlock = (\n          <span className={cx(styles.stepperEntryLabels, { [styles.stepperVisuallyHidden]: hideLabels })}>\n            <span className={cx(styles.stepperEntryLabel, classNames?.entryLabel)} style={slotStyles?.entryLabel}>\n              {step.label}\n            </span>\n            {step.description != null && (\n              <>\n                {' '}\n                <span\n                  className={cx(styles.stepperDescription, classNames?.description)}\n                  style={slotStyles?.description}\n                >\n                  {step.description}\n                </span>\n              </>\n            )}\n            {optionalNode != null && (\n              <>\n                {' '}\n                <span className={cx(styles.stepperOptional, classNames?.optional)} style={slotStyles?.optional}>\n                  {optionalNode}\n                </span>\n              </>\n            )}\n            {status != null && (\n              <>\n                {' '}\n                <span className={styles.stepperVisuallyHidden}>{status}</span>\n              </>\n            )}\n          </span>\n        );\n\n        const railSegment = (variant: 'lead' | 'trail') => {\n          const hidden = variant === 'lead' ? index === 0 : index === steps.length - 1;\n          const filled = variant === 'lead' ? isReached : isDone;\n          return (\n            <span\n              className={cx(styles.stepperRailSegment, {\n                [styles.stepperRailFilled]: !hidden && filled,\n                [styles.stepperRailHidden]: hidden,\n              })}\n            />\n          );\n        };\n\n        const entryContent = (\n          <>\n            {isVertical ? (\n              <span className={styles.stepperMarkerCell}>\n                {railSegment('lead')}\n                {marker}\n                {railSegment('trail')}\n              </span>\n            ) : (\n              marker\n            )}\n            {labelBlock}\n          </>\n        );\n\n        const entryClassName = cx(\n          styles.stepperEntry,\n          { [styles.stepperEntryReached]: isReached },\n          { [styles.stepperEntryDone]: isDone && !hasError },\n          { [styles.stepperEntryError]: hasError },\n          { [styles.stepperEntryDisabled]: step.disabled },\n          { [styles.stepperClickable]: isClickable },\n          classNames?.entry,\n        );\n\n        return (\n          <li key={index} className={styles.stepperStep} aria-current={isCurrent && !isButton ? 'step' : undefined}>\n            {isButton ? (\n              <button\n                type='button'\n                className={entryClassName}\n                style={slotStyles?.entry}\n                aria-current={isCurrent ? 'step' : undefined}\n                aria-disabled={!isClickable || undefined}\n                onClick={isClickable ? () => onStepClicked?.(index) : undefined}\n              >\n                {entryContent}\n              </button>\n            ) : (\n              <div className={entryClassName} style={slotStyles?.entry}>\n                {entryContent}\n              </div>\n            )}\n            {index < steps.length - 1 && (\n              <div\n                className={cx(\n                  styles.stepperConnector,\n                  { [styles.stepperConnectorFilled]: isDone },\n                  classNames?.connector,\n                )}\n                style={slotStyles?.connector}\n              />\n            )}\n            {isVertical && step.content != null && (\n              <StepBody\n                open={\n                  collapse === StepperCollapse.None || (collapse === StepperCollapse.ActiveOnly ? isCurrent : !isDone)\n                }\n                className={classNames?.content}\n                style={slotStyles?.content}\n              >\n                {step.content}\n              </StepBody>\n            )}\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":"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"}