@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
73 lines (72 loc) • 2.29 kB
JavaScript
import { HvTypography } from "../Typography/Typography.js";
import { HvButtonBase } from "../ButtonBase/ButtonBase.js";
import { HvIcon } from "../icons.js";
import { useExpandable } from "../hooks/useExpandable.js";
import { useClasses } from "./Accordion.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useEventCallback } from "@mui/material/utils";
//#region src/Accordion/Accordion.tsx
/**
* An accordion is a design element that expands in place to expose hidden information.
*/
var HvAccordion = forwardRef(function HvAccordion(props, ref) {
const { className, classes: classesProp, disabled = false, label, onChange, children, expanded, headingLevel, defaultExpanded = false, containerProps, labelVariant = "label", ...others } = useDefaultProps("HvAccordion", props);
const { classes, cx } = useClasses(classesProp);
const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({
expanded,
disabled,
defaultExpanded
});
const handleClick = useEventCallback((event) => {
if (disabled) return;
onChange?.(event, isOpen);
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.label,
classes.disabled,
handleClick,
label,
buttonProps,
disabled,
headingLevel,
isOpen,
labelVariant
]);
return /* @__PURE__ */ jsxs("div", {
ref,
className: cx(classes.root, className),
...others,
children: [accordionHeader, /* @__PURE__ */ jsx("div", {
className: cx(classes.container, { [classes.hidden]: !isOpen }),
hidden: !isOpen,
...regionProps,
...containerProps,
children
})]
});
});
//#endregion
export { HvAccordion };