@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
72 lines (71 loc) • 2.37 kB
JavaScript
import { HvIcon } from "../icons.js";
import { HvButton } from "../Button/Button.js";
import { useExpandable } from "../hooks/useExpandable.js";
import { useClasses } from "./Section.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/Section/Section.tsx
/**
* Sections allow grouping information on a page under the same topic.
*/
var HvSection = forwardRef(function HvSection(props, ref) {
const { classes: classesProp, className, title, expandable, expanded, expandableHeader, defaultExpanded = true, actions, onToggle, expandButtonProps, raisedHeader, contentRef, children, ...others } = useDefaultProps("HvSection", props);
const { classes, cx } = useClasses(classesProp);
const expandButtonRef = useRef(null);
const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({
expanded,
defaultExpanded
});
const hasHeader = title || actions || expandable;
return /* @__PURE__ */ jsxs("div", {
ref,
className: cx(classes.root, className, { [classes.raisedHeader]: hasHeader && raisedHeader && isOpen }),
...others,
children: [hasHeader && /* @__PURE__ */ jsxs("div", {
className: cx(classes.header, { [classes.headerExpandable]: expandable && expandableHeader }),
onClick: () => {
if (!expandableHeader) return;
expandButtonRef.current?.click();
},
children: [
expandable && /* @__PURE__ */ jsx(HvButton, {
ref: expandButtonRef,
icon: true,
onClick: (event) => {
event.stopPropagation();
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,
onClick: (evt) => {
evt.stopPropagation();
},
children: actions
})
]
}), /* @__PURE__ */ jsx("div", {
ref: contentRef,
hidden: expandable && !isOpen,
className: cx(classes.content, {
[classes.hidden]: expandable && !isOpen,
[classes.hasHeader]: hasHeader
}),
...expandable && regionProps,
children
})]
});
});
//#endregion
export { HvSection };