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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _clsx = require("clsx");
var _WizardContext = _interopRequireDefault(require("../Context/WizardContext.js"));
var _StepContext = _interopRequireDefault(require("./StepContext.js"));
var _Flex = _interopRequireDefault(require("../../../../components/flex/Flex.js"));
var _componentHelper = require("../../../../shared/component-helper.js");
var _index = _interopRequireDefault(require("../../Field/Provider/index.js"));
var _withComponentMarkers = _interopRequireDefault(require("../../../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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
  } = (0, _react.useContext)(_WizardContext.default) || {};
  const wizardStepContext = (0, _react.useContext)(_StepContext.default) || {};
  const indexFromContext = wizardStepContext.index;
  const totalSteps = totalStepsRef?.current;
  const ariaLabel = (0, _react.useMemo)(() => (0, _componentHelper.convertJsxToString)(title), [title]);
  const index = (0, _react.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 ? (0, _jsxRuntime.jsx)(_index.default, {
    ...fieldProps,
    children: children
  }) : children;
  if (prerenderFieldProps) {
    return (0, _jsxRuntime.jsx)(_StepContext.default, {
      value: {
        index
      },
      children: childrenWithFieldProvider
    });
  }
  const stepRef = activeIndex === index ? stepElementRef : null;
  const childrenWithFlex = (0, _jsxRuntime.jsx)(_StepContext.default, {
    value: {
      index
    },
    children: (0, _jsxRuntime.jsx)(_Flex.default.Stack, {
      className: (0, _clsx.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 (0, _jsxRuntime.jsx)("div", {
        title: "Wizard Step",
        hidden: true,
        children: childrenWithFlex
      });
    }
    return null;
  }
  return childrenWithFlex;
}
(0, _withComponentMarkers.default)(Step, {
  _supportsSpacingProps: true
});
var _default = exports.default = Step;
//# sourceMappingURL=Step.js.map