@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
92 lines (91 loc) • 2.83 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 Accordion_styles = require("./Accordion.styles.cjs");
const Typography = require("../Typography/Typography.cjs");
const ButtonBase = require("../ButtonBase/ButtonBase.cjs");
const HvAccordion = React.forwardRef(function HvAccordion2(props, ref) {
const {
id,
className,
classes: classesProp,
disabled = false,
label,
onChange,
children,
expanded,
headingLevel,
defaultExpanded = false,
containerProps,
labelVariant = "label",
disableEventHandling,
...others
} = uikitReactUtils.useDefaultProps("HvAccordion", props);
const { classes, cx } = Accordion_styles.useClasses(classesProp);
const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable.useExpandable({
id,
expanded,
disabled,
defaultExpanded
});
const handleClick = React.useCallback(
(event) => {
if (!disabled) {
onChange?.(event, isOpen);
toggleOpen();
}
if (!disableEventHandling) {
event.preventDefault();
event.stopPropagation();
}
},
[disableEventHandling, disabled, isOpen, onChange, toggleOpen]
);
const accordionHeader = React.useMemo(() => {
const accordionButton = /* @__PURE__ */ jsxRuntime.jsxs(
Typography.HvTypography,
{
...buttonProps,
component: ButtonBase.HvButtonBase,
className: cx(classes.label, { [classes.disabled]: disabled }),
disabled,
onClick: handleClick,
variant: labelVariant,
children: [
/* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", rotate: isOpen, size: "xs" }),
label
]
}
);
return headingLevel === void 0 ? accordionButton : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: `h${headingLevel}`, variant: labelVariant, children: accordionButton });
}, [
cx,
classes,
handleClick,
label,
buttonProps,
disabled,
headingLevel,
isOpen,
labelVariant
]);
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
accordionHeader,
/* @__PURE__ */ jsxRuntime.jsx(
"div",
{
className: cx(classes.container, { [classes.hidden]: !isOpen }),
hidden: !isOpen,
...regionProps,
...containerProps,
children
}
)
] });
});
exports.accordionClasses = Accordion_styles.staticClasses;
exports.HvAccordion = HvAccordion;