@hitachivantara/uikit-react-core/dist/esm/Accordion/Accordion.js

Core React components for the NEXT Design System.

import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef, useCallback, useMemo } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useExpandable } from "../hooks/useExpandable.js";
import { HvIcon } from "../icons.js";
import { useClasses } from "./Accordion.styles.js";
import { staticClasses } from "./Accordion.styles.js";
import { HvTypography } from "../Typography/Typography.js";
import { HvButtonBase } from "../ButtonBase/ButtonBase.js";
const HvAccordion = forwardRef(function HvAccordion2(props, ref) {
  const {
    id,
    className,
    classes: classesProp,
    disabled = false,
    label,
    onChange,
    children,
    expanded,
    headingLevel,
    defaultExpanded = false,
    containerProps,
    labelVariant = "label",
    disableEventHandling,
    ...others
  } = useDefaultProps("HvAccordion", props);
  const { classes, cx } = useClasses(classesProp);
  const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({
    id,
    expanded,
    disabled,
    defaultExpanded
  });
  const handleClick = useCallback(
    (event) => {
      if (!disabled) {
        onChange?.(event, isOpen);
        toggleOpen();
      }
      if (!disableEventHandling) {
        event.preventDefault();
        event.stopPropagation();
      }
    },
    [disableEventHandling, disabled, isOpen, onChange, toggleOpen]
  );
  const accordionHeader = useMemo(() => {
    const accordionButton = /* @__PURE__ */ jsxs(
      HvTypography,
      {
        ...buttonProps,
        component: HvButtonBase,
        className: cx(classes.label, { [classes.disabled]: disabled }),
        disabled,
        onClick: handleClick,
        variant: labelVariant,
        children: [
          /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", rotate: isOpen, size: "xs" }),
          label
        ]
      }
    );
    return headingLevel === void 0 ? accordionButton : /* @__PURE__ */ jsx(HvTypography, { component: `h${headingLevel}`, variant: labelVariant, children: accordionButton });
  }, [
    cx,
    classes,
    handleClick,
    label,
    buttonProps,
    disabled,
    headingLevel,
    isOpen,
    labelVariant
  ]);
  return /* @__PURE__ */ jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
    accordionHeader,
    /* @__PURE__ */ jsx(
      "div",
      {
        className: cx(classes.container, { [classes.hidden]: !isOpen }),
        hidden: !isOpen,
        ...regionProps,
        ...containerProps,
        children
      }
    )
  ] });
});
export {
  HvAccordion,
  staticClasses as accordionClasses
};