@dnb/eufemia/cjs/components/step-indicator/StepIndicatorTriggerButton.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _react = _interopRequireWildcard(require("react"));
var _Button = _interopRequireDefault(require("../button/Button.js"));
var _Section = _interopRequireDefault(require("../section/Section.js"));
var _HeightAnimation = _interopRequireDefault(require("../height-animation/HeightAnimation.js"));
var _chevron_down = _interopRequireDefault(require("../../icons/chevron_down.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _useId = _interopRequireDefault(require("../../shared/helpers/useId.js"));
var _FormLabel = _interopRequireDefault(require("../form-label/FormLabel.js"));
var _StepIndicatorContext = _interopRequireDefault(require("./StepIndicatorContext.js"));
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function StepIndicatorTriggerButton({
  className,
  isNested,
  ...rest
}) {
  const {
    data,
    ...contextWithoutData
  } = (0, _react.useContext)(_StepIndicatorContext.default);
  const {
    stepsLabel,
    activeStep,
    overviewTitle,
    open,
    closeHandler,
    openHandler,
    skeleton,
    filterAttributes,
    noAnimation,
    stepTitle,
    ...contextWithoutDataRest
  } = contextWithoutData;
  const item = data[activeStep || 0];
  const label = stepsLabel;
  const id = (0, _useId.default)();
  const triggerParams = {
    ...contextWithoutDataRest,
    className: (0, _clsx.default)('dnb-step-indicator__trigger', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton)),
    'aria-live': 'polite'
  };
  const buttonParams = {
    ...rest,
    className: (0, _clsx.default)(`dnb-step-indicator__trigger__button dnb-step-indicator__trigger__button--${open ? 'expanded' : 'collapsed'}`, className)
  };
  buttonParams['aria-describedby'] = (0, _componentHelper.combineDescribedBy)(buttonParams, id + '-overview');
  const triggerParamKeys = Object.keys(triggerParams);
  triggerParamKeys.forEach(key => {
    if (filterAttributes.includes(key)) {
      delete triggerParams[key];
    }
  });
  (0, _SkeletonHelper.skeletonDOMAttributes)(triggerParams, skeleton);
  (0, _componentHelper.validateDOMAttributes)(contextWithoutDataRest, triggerParams);
  return (0, _jsxRuntime.jsx)(_Section.default, {
    backgroundColor: "var(--step-indicator-trigger-background)",
    outline: "transparent",
    innerSpace: {
      top: 'small',
      bottom: 'small'
    },
    roundedCorner: {
      small: false,
      medium: [true, true, !open, !open],
      large: [true, true, !open, !open]
    },
    outset: isNested ? true : undefined,
    "aria-label": overviewTitle,
    children: (0, _jsxRuntime.jsx)(_HeightAnimation.default, {
      animate: !noAnimation,
      children: (0, _jsxRuntime.jsxs)("div", {
        ...triggerParams,
        children: [(0, _jsxRuntime.jsx)(_FormLabel.default, {
          "aria-describedby": id,
          "aria-hidden": true,
          className: "dnb-step-indicator__label",
          vertical: false,
          right: "x-small",
          children: label
        }), (0, _jsxRuntime.jsx)(_Button.default, {
          ...buttonParams,
          onClick: () => {
            if (open) {
              closeHandler();
            } else {
              openHandler();
            }
          },
          "aria-expanded": open,
          "aria-label": label,
          wrap: true,
          variant: "tertiary",
          icon: _chevron_down.default,
          iconPosition: "right",
          children: (typeof item === 'string' ? item : item && item.title) || ''
        })]
      })
    })
  });
}
var _default = exports.default = StepIndicatorTriggerButton;
//# sourceMappingURL=StepIndicatorTriggerButton.js.map