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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React, { useContext, useMemo } from 'react';
import classnames from 'classnames';
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";
export function handleDeprecatedProps({
  active,
  activeWhen,
  include,
  includeWhen,
  ...rest
}) {
  return {
    include: include !== null && include !== void 0 ? include : active,
    includeWhen: includeWhen !== null && includeWhen !== void 0 ? includeWhen : activeWhen,
    ...rest
  };
}
function Step(props) {
  const {
    id,
    className,
    title,
    index: indexProp,
    inactive,
    include = true,
    includeWhen,
    required,
    keepInDOM: keepInDOMProp,
    prerenderFieldProps,
    children,
    ...restProps
  } = handleDeprecatedProps(props);
  const {
    check,
    enableMapOverChildren,
    activeIndex,
    totalStepsRef,
    stepElementRef,
    stepIndexRef,
    stepsRef,
    keepInDOM
  } = useContext(WizardContext) || {};
  const wizardStepContext = useContext(WizardStepContext) || {};
  const indexFromContext = wizardStepContext.index;
  const totalSteps = totalStepsRef === null || totalStepsRef === void 0 ? void 0 : totalStepsRef.current;
  const ariaLabel = useMemo(() => convertJsxToString(title), [title]);
  const index = useMemo(() => {
    if (indexProp !== undefined) {
      return indexProp;
    }
    if (indexFromContext !== undefined) {
      return indexFromContext;
    }
    if (stepsRef !== null && stepsRef !== void 0 && stepsRef.current) {
      const {
        index
      } = Array.from(stepsRef.current.values()).find(({
        id: currentId,
        title: originalTitleProp,
        stringifiedTitle
      }) => {
        var _originalTitleProp$pr;
        if (id !== undefined) {
          return id === currentId;
        }
        const translationId = originalTitleProp === null || originalTitleProp === void 0 || (_originalTitleProp$pr = originalTitleProp['props']) === null || _originalTitleProp$pr === void 0 ? void 0 : _originalTitleProp$pr.id;
        if (translationId) {
          var _title$props;
          return translationId === (title === null || title === void 0 || (_title$props = title['props']) === null || _title$props === void 0 ? void 0 : _title$props.id);
        }
        if (stringifiedTitle) {
          return stringifiedTitle === ariaLabel;
        }
        return originalTitleProp === title;
      }) || {};
      if (index !== undefined) {
        return index;
      }
    }
    if (totalSteps && stepIndexRef) {
      stepIndexRef.current += 1;
    }
    return stepIndexRef === null || stepIndexRef === void 0 ? void 0 : 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 ? React.createElement(FieldProvider, fieldProps, children) : children;
  if (prerenderFieldProps) {
    return React.createElement(WizardStepContext.Provider, {
      value: {
        index
      }
    }, childrenWithFieldProvider);
  }
  const innerRef = activeIndex === index ? stepElementRef : null;
  const childrenWithFlex = React.createElement(WizardStepContext.Provider, {
    value: {
      index
    }
  }, React.createElement(Flex.Stack, _extends({
    className: classnames('dnb-forms-step', className),
    element: "section",
    "aria-label": ariaLabel,
    innerRef: innerRef,
    tabIndex: -1
  }, restProps), childrenWithFieldProvider));
  if (activeIndex !== index || includeWhen && !check({
    visibleWhen: includeWhen
  })) {
    if (keepInDOMProp !== null && keepInDOMProp !== void 0 ? keepInDOMProp : keepInDOM) {
      return React.createElement("div", {
        title: "Wizard Step",
        hidden: true
      }, childrenWithFlex);
    }
    return null;
  }
  return childrenWithFlex;
}
Step._supportsSpacingProps = true;
export default Step;
//# sourceMappingURL=Step.js.map