@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 _includes = _interopRequireDefault(require("core-js-pure/stable/instance/includes.js"));
var _clsx = require("clsx");
var _react = 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 _index = require("../../icons/index.js");
var _Icon = _interopRequireDefault(require("../icon/Icon.js"));
var _IconPrimary = _interopRequireDefault(require("../icon-primary/IconPrimary.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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const chevronIcon = _Icon.default.transition({
  collapsed: _index.chevron_down,
  expanded: _index.chevron_up
});
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.clsx)('dnb-step-indicator__trigger', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton)),
    'aria-live': 'polite'
  };
  const buttonParams = {
    ...rest,
    className: (0, _clsx.clsx)('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 ((0, _includes.default)(filterAttributes).call(filterAttributes, 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, {
          element: "span",
          "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: (0, _jsxRuntime.jsx)(_IconPrimary.default, {
            icon: chevronIcon,
            transitionState: open ? 'expanded' : 'collapsed'
          }),
          iconPosition: "right",
          children: (typeof item === 'string' ? item : item && item.title) || ''
        })]
      })
    })
  });
}
var _default = exports.default = StepIndicatorTriggerButton;
//# sourceMappingURL=StepIndicatorTriggerButton.js.map