import { a as IconSize, n as AnalyticsId } from "./constants2.js";
import { t as usePseudoClasses } from "./usePseudoClasses.js";
import { t as Icon_default } from "./Icon.js";
import { t as LazyIcon_default } from "./LazyIcon.js";
import { t as Button_default } from "./Button.js";
import { t as useSize } from "./useSize.js";
import { t as ChevronDown_default } from "./ChevronDown.js";
import { t as ChevronUp_default } from "./ChevronUp.js";
import { t as useExpand } from "./useExpand.js";
import classNames from "classnames";
import { useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import styles from "./components/Expander/styles.module.scss";
let ExpanderSize = /* @__PURE__ */ function(ExpanderSize$1) {
	ExpanderSize$1["small"] = "small";
	ExpanderSize$1["large"] = "large";
	return ExpanderSize$1;
}({});
var Expander = (props) => {
	const { buttonId, title, children, size = ExpanderSize.small, color, contentClassNames, svgIcon: icon, expanded = false, noNestedLine = false, sticky = false, testId, onExpand, renderChildrenWhenClosed = false, zIndex } = props;
	const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
	const expanderRef = useRef(null);
	const triggerRef = useRef(null);
	const { isHovered } = usePseudoClasses(triggerRef);
	const contentSize = useSize(expanderRef);
	const triggerSize = useSize(triggerRef);
	const isSticky = sticky && isExpanded;
	const renderChevron = (align) => /* @__PURE__ */ jsx("span", {
		className: classNames(styles["expander__icon"], styles[`expander__icon--${align}`]),
		children: /* @__PURE__ */ jsx(Icon_default, {
			svgIcon: isExpanded ? ChevronUp_default : ChevronDown_default,
			size: IconSize.XSmall,
			isHovered
		})
	});
	const triggerClassName = classNames(styles["expander__trigger"], size === ExpanderSize.large && styles[`expander__trigger--${size}`], size === ExpanderSize.large && styles[`expander__trigger--${color || "neutral"}`], size === ExpanderSize.large && icon && styles["expander__trigger--icon"], isExpanded && styles["expander__trigger--expanded"], isSticky && styles["expander__trigger--sticky"]);
	const renderTrigger = () => /* @__PURE__ */ jsxs("button", {
		id: buttonId,
		type: "button",
		className: triggerClassName,
		style: {
			zIndex: isHovered || isSticky ? zIndex : void 0,
			width: isSticky && contentSize?.width ? `${contentSize.width}px` : void 0
		},
		"aria-expanded": isExpanded,
		ref: triggerRef,
		onClick: () => setIsExpanded(!isExpanded),
		"data-testid": testId,
		"data-analyticsid": AnalyticsId.Expander,
		children: [
			size === ExpanderSize.small && renderChevron("left"),
			icon && /* @__PURE__ */ jsx("span", {
				className: classNames(styles["expander__icon"], styles["expander__icon--left"]),
				children: typeof icon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
					iconName: icon,
					size: IconSize.XSmall,
					isHovered
				}) : /* @__PURE__ */ jsx(Icon_default, {
					svgIcon: icon,
					size: IconSize.XSmall,
					isHovered
				})
			}),
			title,
			size === ExpanderSize.large && renderChevron("right")
		]
	});
	const buttonClassName = classNames(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
	const renderButton = () => /* @__PURE__ */ jsx("div", {
		style: {
			width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : void 0,
			height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : void 0
		},
		className: classNames({ [styles["expander__button-container--sticky"]]: isSticky }),
		children: /* @__PURE__ */ jsxs(Button_default, {
			id: buttonId,
			variant: "borderless",
			textClassName: styles["expander__button__text"],
			className: buttonClassName,
			"aria-expanded": isExpanded,
			ref: triggerRef,
			onClick: () => setIsExpanded(!isExpanded),
			testId,
			"data-analyticsid": AnalyticsId.Expander,
			children: [/* @__PURE__ */ jsx(Icon_default, {
				svgIcon: isExpanded ? ChevronUp_default : ChevronDown_default,
				size: IconSize.XSmall
			}), title]
		})
	});
	const renderContent = () => {
		if (!renderChildrenWhenClosed && !isExpanded) return null;
		const contentClassName = classNames(styles["expander__content"], styles[`expander__content--${size}`], size === ExpanderSize.large && styles[`expander__content--${color || "neutral"}`], size === ExpanderSize.large && icon && styles["expander__content--icon"], isExpanded && styles["expander__content--expanded"], size === ExpanderSize.small && !noNestedLine && styles["expander__content--nested-line--inner"], { [styles["expander__content--sticky"]]: isSticky }, contentClassNames);
		return /* @__PURE__ */ jsx("div", {
			className: classNames(size === ExpanderSize.small && !noNestedLine && styles["expander__content--nested-line--outer"]),
			children: /* @__PURE__ */ jsx("div", {
				className: contentClassName,
				children
			})
		});
	};
	return /* @__PURE__ */ jsxs("div", {
		className: styles["expander"],
		ref: expanderRef,
		children: [size === ExpanderSize.large ? renderTrigger() : renderButton(), renderContent()]
	});
};
var Expander_default$1 = Expander;
export { ExpanderSize as n, Expander_default$1 as t };

//# sourceMappingURL=Expander.js.map