@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
100 lines (99 loc) • 3.4 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_create_scoped_keydown_handler = require("../../../core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.cjs");
const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
const require_factory = require("../../../core/factory/factory.cjs");
const require_Box = require("../../../core/Box/Box.cjs");
const require_UnstyledButton = require("../../UnstyledButton/UnstyledButton.cjs");
const require_Accordion_context = require("../Accordion.context.cjs");
const require_AccordionItem_context = require("../AccordionItem.context.cjs");
const require_Accordion_module = require("../Accordion.module.cjs");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Accordion/AccordionControl/AccordionControl.tsx
const AccordionControl = require_factory.factory((props) => {
const { classNames, className, style, styles, vars, chevron, icon, onClick, onKeyDown, children, disabled, mod, ...others } = require_use_props.useProps("AccordionControl", null, props);
const { value } = require_AccordionItem_context.useAccordionItemContext();
const ctx = require_Accordion_context.useAccordionContext();
const isActive = ctx.isItemActive(value);
const shouldWrapWithHeading = typeof ctx.order === "number";
const Heading = `h${ctx.order}`;
const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_UnstyledButton.UnstyledButton, {
...ctx.getStyles("control", {
className,
classNames,
style,
styles,
variant: ctx.variant
}),
unstyled: ctx.unstyled,
mod: [
"accordion-control",
{
active: isActive,
"chevron-position": ctx.chevronPosition,
disabled
},
mod
],
onClick: (event) => {
onClick?.(event);
ctx.onChange(value);
},
type: "button",
disabled,
"aria-expanded": isActive,
"aria-controls": ctx.getRegionId(value),
id: ctx.getControlId(value),
onKeyDown: require_create_scoped_keydown_handler.createScopedKeydownHandler({
siblingSelector: "[data-accordion-control]",
parentSelector: "[data-accordion]",
activateOnFocus: false,
loop: ctx.loop,
orientation: "vertical",
onKeyDown
}),
...others,
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
component: "span",
mod: {
rotate: !ctx.disableChevronRotation && isActive,
position: ctx.chevronPosition
},
...ctx.getStyles("chevron", {
classNames,
styles
}),
children: chevron || ctx.chevron
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
...ctx.getStyles("label", {
classNames,
styles
}),
children
}),
icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
component: "span",
mod: { "chevron-position": ctx.chevronPosition },
...ctx.getStyles("icon", {
classNames,
styles
}),
children: icon
})
]
});
return shouldWrapWithHeading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
...ctx.getStyles("itemTitle", {
classNames,
styles
}),
children: content
}) : content;
});
AccordionControl.displayName = "@mantine/core/AccordionControl";
AccordionControl.classes = require_Accordion_module.default;
//#endregion
exports.AccordionControl = AccordionControl;
//# sourceMappingURL=AccordionControl.cjs.map