@dnb/eufemia/es/extensions/forms/Wizard/Step/Step.js

DNB Eufemia Design System UI Library

"use client";

import React, { useContext, useMemo } from 'react';
import clsx from 'clsx';
import WizardContext from "../Context/WizardContext.js";
import WizardStepContext from "./StepContext.js";
import Flex from "../../../../components/flex/Flex.js";
import { convertJsxToString } from "../../../../shared/component-helper.js";
import FieldProvider from "../../Field/Provider/index.js";
import withComponentMarkers from "../../../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx } from "react/jsx-runtime";
function Step(props) {
  const {
    id,
    className,
    title,
    index: indexProp,
    inactive,
    include = true,
    includeWhen,
    required,
    keepInDOM: keepInDOMProp,
    prerenderFieldProps,
    children,
    ...restProps
  } = props;
  const {
    check,
    enableMapOverChildren,
    activeIndex,
    totalStepsRef,
    stepElementRef,
    stepIndexRef,
    stepsRef,
    keepInDOM
  } = useContext(WizardContext) || {};
  const wizardStepContext = useContext(WizardStepContext) || {};
  const indexFromContext = wizardStepContext.index;
  const totalSteps = totalStepsRef?.current;
  const ariaLabel = useMemo(() => convertJsxToString(title), [title]);
  const index = useMemo(() => {
    if (indexProp !== undefined) {
      return indexProp;
    }
    if (indexFromContext !== undefined) {
      return indexFromContext;
    }
    if (stepsRef?.current) {
      const {
        index
      } = Array.from(stepsRef.current.values()).find(({
        id: currentId,
        title: originalTitleProp,
        stringifiedTitle
      }) => {
        if (id !== undefined) {
          return id === currentId;
        }
        const translationId = originalTitleProp?.['props']?.id;
        if (translationId) {
          return translationId === title?.['props']?.id;
        }
        if (stringifiedTitle) {
          return stringifiedTitle === ariaLabel;
        }
        return originalTitleProp === title;
      }) || {};
      if (index !== undefined) {
        return index;
      }
    }
    if (totalSteps && stepIndexRef) {
      stepIndexRef.current += 1;
    }
    return stepIndexRef?.current;
  }, [indexProp, stepsRef, totalSteps, stepIndexRef, indexFromContext, title, id, ariaLabel]);
  if (!prerenderFieldProps && index >= totalSteps) {
    enableMapOverChildren();
  }
  if (include === false) {
    return null;
  }
  if (includeWhen && !check({
    visibleWhen: includeWhen
  })) {
    return null;
  }
  const fieldProps = typeof required === 'boolean' ? {
    required
  } : undefined;
  const childrenWithFieldProvider = fieldProps ? _jsx(FieldProvider, {
    ...fieldProps,
    children: children
  }) : children;
  if (prerenderFieldProps) {
    return _jsx(WizardStepContext, {
      value: {
        index
      },
      children: childrenWithFieldProvider
    });
  }
  const stepRef = activeIndex === index ? stepElementRef : null;
  const childrenWithFlex = _jsx(WizardStepContext, {
    value: {
      index
    },
    children: _jsx(Flex.Stack, {
      className: clsx('dnb-forms-step', className),
      element: "section",
      "aria-label": ariaLabel,
      ref: stepRef,
      tabIndex: -1,
      ...restProps,
      children: childrenWithFieldProvider
    })
  });
  if (activeIndex !== index || includeWhen && !check({
    visibleWhen: includeWhen
  })) {
    if (keepInDOMProp !== null && keepInDOMProp !== void 0 ? keepInDOMProp : keepInDOM) {
      return _jsx("div", {
        title: "Wizard Step",
        hidden: true,
        children: childrenWithFlex
      });
    }
    return null;
  }
  return childrenWithFlex;
}
withComponentMarkers(Step, {
  _supportsSpacingProps: true
});
export default Step;
//# sourceMappingURL=Step.js.map