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

Core React components for the NEXT Design System.

import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useExpandable } from "../hooks/useExpandable.js";
import { HvIcon } from "../icons.js";
import { useClasses } from "./Section.styles.js";
import { staticClasses } from "./Section.styles.js";
import { HvButton } from "../Button/Button.js";
const HvSection = forwardRef(
  function HvSection2(props, ref) {
    const {
      id,
      classes: classesProp,
      className,
      title,
      expandable,
      expanded,
      defaultExpanded = true,
      actions,
      onToggle,
      expandButtonProps,
      raisedHeader,
      contentRef,
      children,
      ...others
    } = useDefaultProps("HvSection", props);
    const { classes, cx } = useClasses(classesProp);
    const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({
      id,
      expanded,
      defaultExpanded
    });
    const hasHeader = title || actions || expandable;
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        id,
        className: cx(classes.root, className, {
          [classes.raisedHeader]: raisedHeader && isOpen
        }),
        ...others,
        children: [
          hasHeader && /* @__PURE__ */ jsxs("div", { className: classes.header, children: [
            expandable && /* @__PURE__ */ jsx(
              HvButton,
              {
                icon: true,
                onClick: (event) => {
                  toggleOpen();
                  onToggle?.(event, !isOpen);
                },
                "aria-label": isOpen ? "Collapse" : "Expand",
                ...buttonProps,
                ...expandButtonProps,
                children: /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs", rotate: isOpen })
              }
            ),
            title,
            /* @__PURE__ */ jsx("div", { className: classes.actions, children: actions })
          ] }),
          /* @__PURE__ */ jsx(
            "div",
            {
              ref: contentRef,
              hidden: !isOpen,
              className: cx(classes.content, {
                [classes.hidden]: expandable && !isOpen,
                [classes.spaceTop]: !hasHeader,
                [classes.hasHeader]: hasHeader
              }),
              ...expandable && regionProps,
              children
            }
          )
        ]
      }
    );
  }
);
export {
  HvSection,
  staticClasses as sectionClasses
};