@carbon/react
Version:
React components for the Carbon Design System
116 lines (114 loc) • 4.54 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_AccordionProvider = require("./AccordionProvider.js");
const require_Text = require("../Text/Text.js");
const require_keys = require("../../internal/keyboard/keys.js");
const require_match = require("../../internal/keyboard/match.js");
const require_useId = require("../../internal/useId.js");
const require_deprecate = require("../../prop-types/deprecate.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
let _carbon_icons_react = require("@carbon/icons-react");
//#region src/components/Accordion/AccordionItem.tsx
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const defaultRenderToggle = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
type: "button",
...props
});
function AccordionItem({ children, className: customClassName = "", open = false, onHeadingClick, renderExpando = defaultRenderToggle, renderToggle, title = "title", disabled: controlledDisabled, handleAnimationEnd, "aria-label": ariaLabel, ...rest }) {
const [isOpen, setIsOpen] = (0, react.useState)(open);
const prevOpenRef = (0, react.useRef)(open);
const accordionState = (0, react.useContext)(require_AccordionProvider.AccordionContext);
const disabled = typeof controlledDisabled === "boolean" ? controlledDisabled : accordionState.disabled;
const id = require_useId.useId("accordion-item");
const prefix = require_usePrefix.usePrefix();
const className = (0, classnames.default)({
[`${prefix}--accordion__item`]: true,
[`${prefix}--accordion__item--active`]: isOpen && !disabled,
[`${prefix}--accordion__item--disabled`]: disabled,
[customClassName]: !!customClassName
});
const Toggle = renderToggle || renderExpando;
const content = react.default.useCallback((node) => {
if (!node) return;
if (isOpen) node.style.maxBlockSize = "";
}, [isOpen]);
(0, react.useEffect)(() => {
if (open !== prevOpenRef.current) {
setIsOpen(open);
prevOpenRef.current = open;
}
}, [open]);
function onClick(event) {
const nextValue = !isOpen;
setIsOpen(nextValue);
if (onHeadingClick) onHeadingClick({
isOpen: nextValue,
event
});
}
function onKeyDown(event) {
if (isOpen && require_match.match(event, require_keys.Escape)) setIsOpen(false);
}
function onAnimationEnd(event) {
if (handleAnimationEnd) handleAnimationEnd(event);
}
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
className,
...rest,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Toggle, {
disabled,
"aria-controls": id,
"aria-expanded": isOpen,
"aria-label": ariaLabel,
className: `${prefix}--accordion__heading`,
onClick,
onKeyDown,
type: "button",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.ChevronRight, { className: `${prefix}--accordion__arrow` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
as: "div",
className: `${prefix}--accordion__title`,
children: title
})]
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
ref: content,
className: `${prefix}--accordion__wrapper`,
onTransitionEnd: onAnimationEnd,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
id,
className: `${prefix}--accordion__content`,
children
})
})]
});
}
AccordionItem.propTypes = {
children: prop_types.default.node,
className: prop_types.default.string,
disabled: prop_types.default.bool,
"aria-label": prop_types.default.string,
onClick: prop_types.default.func,
onHeadingClick: prop_types.default.func,
open: prop_types.default.bool,
renderExpando: require_deprecate.deprecate(prop_types.default.func, "The `renderExpando` prop has been deprecated and will be removed in the next major release of Carbon. Use the `renderToggle` prop instead."),
renderToggle: prop_types.default.func,
title: prop_types.default.node
};
//#endregion
exports.default = AccordionItem;