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

DNB Eufemia Design System UI Library

"use client";

import clsx from 'clsx';
import React, { useContext } from 'react';
import Button from "../button/Button.js";
import Section from "../section/Section.js";
import HeightAnimation from "../height-animation/HeightAnimation.js";
import chevron_down from "../../icons/chevron_down.js";
import { validateDOMAttributes, combineDescribedBy } from "../../shared/component-helper.js";
import useId from "../../shared/helpers/useId.js";
import FormLabel from "../form-label/FormLabel.js";
import StepIndicatorContext from "./StepIndicatorContext.js";
import { skeletonDOMAttributes, createSkeletonClass } from "../skeleton/SkeletonHelper.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function StepIndicatorTriggerButton({
  className,
  isNested,
  ...rest
}) {
  const {
    data,
    ...contextWithoutData
  } = useContext(StepIndicatorContext);
  const {
    stepsLabel,
    activeStep,
    overviewTitle,
    open,
    closeHandler,
    openHandler,
    skeleton,
    filterAttributes,
    noAnimation,
    stepTitle,
    ...contextWithoutDataRest
  } = contextWithoutData;
  const item = data[activeStep || 0];
  const label = stepsLabel;
  const id = useId();
  const triggerParams = {
    ...contextWithoutDataRest,
    className: clsx('dnb-step-indicator__trigger', createSkeletonClass('font', skeleton)),
    'aria-live': 'polite'
  };
  const buttonParams = {
    ...rest,
    className: clsx(`dnb-step-indicator__trigger__button dnb-step-indicator__trigger__button--${open ? 'expanded' : 'collapsed'}`, className)
  };
  buttonParams['aria-describedby'] = combineDescribedBy(buttonParams, id + '-overview');
  const triggerParamKeys = Object.keys(triggerParams);
  triggerParamKeys.forEach(key => {
    if (filterAttributes.includes(key)) {
      delete triggerParams[key];
    }
  });
  skeletonDOMAttributes(triggerParams, skeleton);
  validateDOMAttributes(contextWithoutDataRest, triggerParams);
  return _jsx(Section, {
    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: _jsx(HeightAnimation, {
      animate: !noAnimation,
      children: _jsxs("div", {
        ...triggerParams,
        children: [_jsx(FormLabel, {
          "aria-describedby": id,
          "aria-hidden": true,
          className: "dnb-step-indicator__label",
          vertical: false,
          right: "x-small",
          children: label
        }), _jsx(Button, {
          ...buttonParams,
          onClick: () => {
            if (open) {
              closeHandler();
            } else {
              openHandler();
            }
          },
          "aria-expanded": open,
          "aria-label": label,
          wrap: true,
          variant: "tertiary",
          icon: chevron_down,
          iconPosition: "right",
          children: (typeof item === 'string' ? item : item && item.title) || ''
        })]
      })
    })
  });
}
export default StepIndicatorTriggerButton;
//# sourceMappingURL=StepIndicatorTriggerButton.js.map