@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
84 lines (83 loc) • 2.72 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const useExpandable = require("../hooks/useExpandable.cjs");
const icons = require("../icons.cjs");
const Section_styles = require("./Section.styles.cjs");
const Button = require("../Button/Button.cjs");
const HvSection = React.forwardRef(
function HvSection2(props, ref) {
const {
id,
classes: classesProp,
className,
title,
expandable,
expanded,
defaultExpanded = true,
actions,
onToggle,
expandButtonProps,
raisedHeader,
contentRef,
children,
...others
} = uikitReactUtils.useDefaultProps("HvSection", props);
const { classes, cx } = Section_styles.useClasses(classesProp);
const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable.useExpandable({
id,
expanded,
defaultExpanded
});
const hasHeader = title || actions || expandable;
return /* @__PURE__ */ jsxRuntime.jsxs(
"div",
{
ref,
id,
className: cx(classes.root, className, {
[classes.raisedHeader]: raisedHeader && isOpen
}),
...others,
children: [
hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.header, children: [
expandable && /* @__PURE__ */ jsxRuntime.jsx(
Button.HvButton,
{
icon: true,
onClick: (event) => {
toggleOpen();
onToggle?.(event, !isOpen);
},
"aria-label": isOpen ? "Collapse" : "Expand",
...buttonProps,
...expandButtonProps,
children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: isOpen })
}
),
title,
/* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children: actions })
] }),
/* @__PURE__ */ jsxRuntime.jsx(
"div",
{
ref: contentRef,
hidden: !isOpen,
className: cx(classes.content, {
[classes.hidden]: expandable && !isOpen,
[classes.spaceTop]: !hasHeader,
[classes.hasHeader]: hasHeader
}),
...expandable && regionProps,
children
}
)
]
}
);
}
);
exports.sectionClasses = Section_styles.staticClasses;
exports.HvSection = HvSection;