@mantine/core/esm/components/Accordion/AccordionControl/AccordionControl.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { createScopedKeydownHandler } from "../../../core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.mjs";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { factory } from "../../../core/factory/factory.mjs";
import { Box } from "../../../core/Box/Box.mjs";
import { UnstyledButton } from "../../UnstyledButton/UnstyledButton.mjs";
import { useAccordionContext } from "../Accordion.context.mjs";
import { useAccordionItemContext } from "../AccordionItem.context.mjs";
import Accordion_module_default from "../Accordion.module.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Accordion/AccordionControl/AccordionControl.tsx
const AccordionControl = factory((props) => {
	const { classNames, className, style, styles, vars, chevron, icon, onClick, onKeyDown, children, disabled, mod, ...others } = useProps("AccordionControl", null, props);
	const { value } = useAccordionItemContext();
	const ctx = useAccordionContext();
	const isActive = ctx.isItemActive(value);
	const shouldWrapWithHeading = typeof ctx.order === "number";
	const Heading = `h${ctx.order}`;
	const content = /* @__PURE__ */ jsxs(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: createScopedKeydownHandler({
			siblingSelector: "[data-accordion-control]",
			parentSelector: "[data-accordion]",
			activateOnFocus: false,
			loop: ctx.loop,
			orientation: "vertical",
			onKeyDown
		}),
		...others,
		children: [
			/* @__PURE__ */ jsx(Box, {
				component: "span",
				mod: {
					rotate: !ctx.disableChevronRotation && isActive,
					position: ctx.chevronPosition
				},
				...ctx.getStyles("chevron", {
					classNames,
					styles
				}),
				children: chevron || ctx.chevron
			}),
			/* @__PURE__ */ jsx("span", {
				...ctx.getStyles("label", {
					classNames,
					styles
				}),
				children
			}),
			icon && /* @__PURE__ */ jsx(Box, {
				component: "span",
				mod: { "chevron-position": ctx.chevronPosition },
				...ctx.getStyles("icon", {
					classNames,
					styles
				}),
				children: icon
			})
		]
	});
	return shouldWrapWithHeading ? /* @__PURE__ */ jsx(Heading, {
		...ctx.getStyles("itemTitle", {
			classNames,
			styles
		}),
		children: content
	}) : content;
});
AccordionControl.displayName = "@mantine/core/AccordionControl";
AccordionControl.classes = Accordion_module_default;
//#endregion
export { AccordionControl };

//# sourceMappingURL=AccordionControl.mjs.map