@dnb/eufemia/es/components/accordion/AccordionTertiary.js

DNB Eufemia Design System UI Library

"use client";

import { useCallback, useEffect } from 'react';
import clsx from 'clsx';
import { useSpacing } from "../space/SpacingUtils.js";
import useId from "../../shared/helpers/useId.js";
import { useSharedState } from "../../shared/helpers/useSharedState.js";
import Button from "../button/Button.js";
import AccordionTertiaryContent from "./AccordionTertiaryContent.js";
import { chevron_down } from "../../icons/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function shouldFocusContentFromClick(event) {
  if (event.detail === 0) {
    return true;
  }
  const {
    documentElement
  } = document;
  return documentElement.getAttribute('data-whatinput') === 'keyboard' || documentElement.getAttribute('data-whatintent') === 'keyboard';
}
export default function AccordionTertiary(props) {
  var _data$expanded, _data$shouldFocusCont;
  const {
    title,
    expanded: expandedProp,
    noAnimation,
    className,
    children,
    onChange,
    icon = chevron_down,
    iconPosition,
    ...rest
  } = props;
  const id = useId(props.id);
  const contentId = `${id}-content`;
  const {
    data,
    set
  } = useSharedState(id, {
    expanded: expandedProp !== null && expandedProp !== void 0 ? expandedProp : false
  });
  useEffect(() => {
    if (expandedProp !== undefined) {
      set({
        expanded: expandedProp,
        shouldFocusContent: false
      });
    }
  }, [expandedProp, set]);
  const expanded = (_data$expanded = data?.expanded) !== null && _data$expanded !== void 0 ? _data$expanded : false;
  const shouldFocusContent = (_data$shouldFocusCont = data?.shouldFocusContent) !== null && _data$shouldFocusCont !== void 0 ? _data$shouldFocusCont : false;
  const handleClick = useCallback(event => {
    const next = !expanded;
    set({
      expanded: next,
      shouldFocusContent: shouldFocusContentFromClick(event)
    });
    onChange?.({
      expanded: next,
      event
    });
  }, [expanded, set, onChange]);
  const mainParams = useSpacing(props, {
    className: clsx("dnb-accordion dnb-accordion__variant--tertiary", className, expanded && 'dnb-accordion--expanded')
  });
  const WrapperElement = children ? 'div' : 'span';
  return _jsxs(WrapperElement, {
    ...mainParams,
    children: [_jsx(Button, {
      ...rest,
      variant: "tertiary",
      icon: icon,
      iconPosition: iconPosition !== null && iconPosition !== void 0 ? iconPosition : 'left',
      "aria-expanded": expanded,
      "aria-controls": contentId,
      onClick: handleClick,
      className: "dnb-accordion__tertiary-button",
      children: title
    }), children && _jsx(AccordionTertiaryContent, {
      contentId: contentId,
      expanded: expanded,
      noAnimation: noAnimation,
      shouldFocusContent: shouldFocusContent,
      onFocusHandled: () => set({
        ...data,
        shouldFocusContent: false
      }),
      children: children
    })]
  });
}
//# sourceMappingURL=AccordionTertiary.js.map