Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_breakpoints = require("../styles/breakpoints.cjs");
const require_styles_themes = require("../styles/themes.cjs");
const require_router = require("../router.cjs");
const require_styles_common = require("../styles/common.cjs");
const require_components_Icon_Icon = require("./Icon/Icon.cjs");
const require_utils_toReactNodes_toReactNodes = require("../utils/toReactNodes/toReactNodes.cjs");
const require_styles_z_index = require("../styles/z-index.cjs");
const require_components_UnstyledButton = require("./UnstyledButton.cjs");
const require_components_Button = require("./Button.cjs");
const require_components_Toggle = require("./Toggle.cjs");
const require_hooks_useLiveRef = require("../hooks/useLiveRef.cjs");
const require_styles_constants = require("../styles/constants.cjs");
const require_components_Flex = require("./Flex.cjs");
const require_components_MultiToggle = require("./MultiToggle.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
let _emotion_react = require("@emotion/react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
let react_dom = require("react-dom");
react_dom = require_chunk.__toESM(react_dom);
//#region src/components/Dropdown.tsx
function Dropdown({ button, dropdownItems, horizontalScrollRef, onClickDropdownItems, getCSS, getDropdownItemsCSS, isOpen: isOpenProp, onOpen, onClose, closeOnScroll = false, openOnHover = false, minDropdownItemsWidth = 200, maxDropdownItemsWidth = 300, align = "center", dropdownItemOffsetTop: dropdownItemOffsetTopProp = 0, verticalPlacement = "bottom", footer = null, getFooterCSS, dropdownContent = null, borderRadius = 8 }) {
	const theme = (0, _emotion_react.useTheme)();
	const [isOpen, setIsOpen] = (0, react.useState)(isOpenProp || false);
	const [dropdownButtonHeight, setDropdownButtonHeight] = (0, react.useState)(0);
	const [dropdownButtonWidth, setDropdownButtonWidth] = (0, react.useState)(0);
	const [dropdownCoords, setDropdownCoords] = (0, react.useState)({
		top: 0,
		left: 0,
		right: 0
	});
	const dropdownRef = (0, react.useRef)(null);
	const [dropdownButtonRef, dropdownButtonRefCb] = require_hooks_useLiveRef.useLiveRef();
	const dropdownItemsRef = (0, react.useRef)(null);
	const [dropdownItemsWidth, setDropdownItemsWidth] = (0, react.useState)(0);
	const [dropdownItemsHeight, setDropdownItemsHeight] = (0, react.useState)(0);
	const nodeRef = (0, react.useRef)(null);
	const [nodeReady, setNodeReady] = (0, react.useState)(false);
	(0, react.useEffect)(() => {
		if (isOpenProp !== void 0) setIsOpen(isOpenProp);
	}, [isOpenProp]);
	(0, react.useEffect)(() => {
		if (!nodeRef.current) {
			nodeRef.current = document.createElement("div");
			document.body.appendChild(nodeRef.current);
		}
		setNodeReady(true);
		return () => {
			if (nodeRef.current) {
				document.body.removeChild(nodeRef.current);
				nodeRef.current = null;
			}
		};
	}, []);
	const setOpen = (0, react.useCallback)((newValue) => {
		setIsOpen(newValue);
		if (newValue && onOpen) onOpen();
		else if (!newValue && onClose) onClose();
	}, [onOpen, onClose]);
	function handleKeyDown(event) {
		if (event.key === "Escape") {
			event.preventDefault();
			setOpen(false);
		} else if (["Enter", "Return"].includes(event.key)) {
			event.preventDefault();
			setOpen(!isOpen);
		}
	}
	function handleBlur(event) {
		if (dropdownItemsRef.current && !dropdownItemsRef.current.contains(event.relatedTarget) && event.relatedTarget !== null) setOpen(false);
	}
	(0, react.useEffect)(() => {
		function handleClickOutside(event) {
			const targetOutsideDropdownItems = dropdownItemsRef.current && !dropdownItemsRef.current.contains(event.target);
			const targetOutsideDropdownButton = dropdownButtonRef.current && !dropdownButtonRef.current.contains(event.target);
			if (isOpen && event.target && targetOutsideDropdownItems && targetOutsideDropdownButton) setOpen(false);
		}
		window.document.addEventListener("mousedown", handleClickOutside);
		return () => {
			window.document.removeEventListener("mousedown", handleClickOutside);
		};
	}, [
		isOpen,
		setOpen,
		dropdownButtonRef
	]);
	const reposition = (0, react.useCallback)(() => {
		if (dropdownButtonRef.current && dropdownItemsRef.current) {
			const dropdownButtonRect = dropdownButtonRef.current.getBoundingClientRect();
			setDropdownCoords({
				top: dropdownButtonRect.top,
				left: dropdownButtonRect.left,
				right: dropdownButtonRect.right
			});
			setDropdownButtonHeight(dropdownButtonRect.height);
			setDropdownButtonWidth(dropdownButtonRect.width);
			const dropdownItemsRect = dropdownItemsRef.current.getBoundingClientRect();
			setDropdownItemsWidth(dropdownItemsRect.width);
			setDropdownItemsHeight(dropdownItemsRect.height);
		}
	}, [dropdownButtonRef]);
	(0, react.useLayoutEffect)(() => {
		function onWindowResize() {
			setOpen(false);
			reposition();
		}
		function handleScroll() {
			if (closeOnScroll) setOpen(false);
			reposition();
		}
		reposition();
		let dropdownButtonResizeObserver = null;
		if (dropdownButtonRef.current) {
			dropdownButtonResizeObserver = new ResizeObserver(reposition);
			dropdownButtonResizeObserver.observe(dropdownButtonRef.current);
		}
		let dropdownResizeObserver = null;
		if (dropdownButtonRef.current) {
			dropdownResizeObserver = new ResizeObserver(reposition);
			dropdownResizeObserver.observe(dropdownButtonRef.current);
		}
		window.addEventListener("resize", onWindowResize);
		let navItemsResizeObserver = null;
		window.addEventListener("scroll", handleScroll);
		if (horizontalScrollRef?.current) {
			horizontalScrollRef.current.addEventListener("scroll", handleScroll);
			navItemsResizeObserver = new ResizeObserver(reposition);
			navItemsResizeObserver.observe(horizontalScrollRef.current);
		}
		return () => {
			window.removeEventListener("resize", onWindowResize);
			window.removeEventListener("scroll", handleScroll);
			dropdownButtonResizeObserver?.disconnect();
			navItemsResizeObserver?.disconnect();
			dropdownResizeObserver?.disconnect();
		};
	}, [
		setOpen,
		horizontalScrollRef,
		closeOnScroll,
		reposition,
		dropdownButtonRef
	]);
	const handleClickDropdownItems = (0, react.useCallback)(() => {
		setOpen(false);
		onClickDropdownItems && onClickDropdownItems();
	}, [onClickDropdownItems, setOpen]);
	const dropdownTopMargin = 8;
	let dropdownItemOffsetTop = dropdownCoords.top + dropdownButtonHeight + dropdownTopMargin + dropdownItemOffsetTopProp;
	let dropdownItemOffsetLeft = dropdownCoords.left;
	if (align === "center") dropdownItemOffsetLeft = dropdownCoords.left - (dropdownItemsWidth - dropdownButtonWidth) / 2;
	else if (align === "right") dropdownItemOffsetLeft = dropdownCoords.right - dropdownItemsWidth;
	if (verticalPlacement === "top") dropdownItemOffsetTop = dropdownCoords.top - dropdownItemsHeight - dropdownTopMargin;
	const commonButtonProps = {
		id: button.id,
		type: "button",
		onMouseEnter: () => {
			if (openOnHover) {
				reposition();
				setOpen(true);
			}
		},
		onMouseLeave: () => {
			if (openOnHover) setOpen(false);
		},
		onMouseDown: () => {
			reposition();
			setOpen(!isOpen);
		},
		onKeyDown: handleKeyDown,
		onFocus: () => {
			reposition();
			setOpen(true);
		},
		onBlur: handleBlur,
		ref: dropdownButtonRefCb
	};
	const commonUnstyledButtonProps = {
		...commonButtonProps,
		css: "getCSS" in button && button.getCSS ? button.getCSS({
			isOpen,
			theme
		}) : void 0
	};
	let buttonNode = null;
	if ("label" in button) buttonNode = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(UnstyledDropdownButton, {
		...commonUnstyledButtonProps,
		children: button.label
	});
	else if ("getContent" in button) buttonNode = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(UnstyledDropdownButton, {
		...commonUnstyledButtonProps,
		children: button.getContent({
			isOpen,
			theme
		})
	});
	else buttonNode = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Button.Button, {
		...button,
		...commonButtonProps
	});
	const containerCSS = getCSS && getCSS({
		isOpen,
		theme
	});
	const dropdownItemsCSS = getDropdownItemsCSS && getDropdownItemsCSS({
		isOpen,
		theme
	});
	const footerCSS = getFooterCSS && getFooterCSS({
		isOpen,
		theme
	});
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
		css: {
			position: "relative",
			display: "inline-flex",
			...containerCSS
		},
		ref: dropdownRef,
		children: [buttonNode, nodeReady && nodeRef.current ? react_dom.default.createPortal(/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(DropdownItems, {
			isOpen,
			left: dropdownItemOffsetLeft,
			top: dropdownItemOffsetTop,
			ref: dropdownItemsRef,
			minWidth: minDropdownItemsWidth,
			maxWidth: maxDropdownItemsWidth,
			hasItems: dropdownItems ? dropdownItems.length > 0 : false,
			borderRadius,
			css: dropdownItemsCSS,
			children: [
				dropdownItems?.map((dropdownItem, i) => {
					return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("li", {
						onBlur: handleBlur,
						children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DropdownItem, {
							dropdownItem,
							dropdownButtonHeight,
							onClick: handleClickDropdownItems,
							getDropdownCss: getCSS
						})
					}, `${dropdownItem.to ?? ""}${dropdownItem.hash ? `#${dropdownItem.hash}` : ""}-${i}`);
				}),
				dropdownContent,
				footer && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DropdownFooter, {
					...footerCSS && { css: footerCSS },
					children: footer
				})
			]
		}), nodeRef.current) : null]
	});
}
const DropdownFooter = _emotion_styled.default.div`
  ${({ css, theme }) => css ? css : `
    padding: 24px 16px 0;
    border-top: 1px solid ${theme.c2Neutral};
    margin-top: 16px;
  `}
`;
const DropdownItems = _emotion_styled.default.ul`
  ${require_styles_common.overlaySurface}
  color: ${({ theme }) => require_styles_themes.themeOr(theme.c6Neutral, theme.c8Neutral)};
  ${({ borderRadius }) => require_styles_common.standardBorderRadius(borderRadius)}
  ${({ hasItems }) => hasItems ? "padding: 12px 0;" : "padding: 0;"}
  visibility: ${({ isOpen }) => isOpen ? "visible" : "hidden"};
  position: fixed;
  ${({ minWidth }) => minWidth ? `min-width: ${minWidth}px;` : ""}
  ${({ maxWidth }) => maxWidth ? `max-width: ${maxWidth}px;` : ""}
  left: ${({ left }) => left}px;
  top: ${({ top }) => top}px;
  z-index: ${require_styles_z_index.z.dropdown};
  list-style: none;
  margin: 0;
`;
function DropdownItem({ dropdownItem, dropdownButtonHeight, onClick, getDropdownCss }) {
	const theme = (0, _emotion_react.useTheme)();
	const [showSubDropdown, setShowSubDropdown] = (0, react.useState)(false);
	const iconSide = dropdownItem.iconSide || "left";
	const dropdownItemIcon = dropdownItem.getIcon && dropdownItem.getIcon({
		dropdownItem,
		theme
	});
	const dropdownItemIconNode = dropdownItemIcon ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
		name: dropdownItemIcon.name,
		width: dropdownItemIcon.width || 12,
		mr: iconSide === "left" ? 10 : 0
	}) : null;
	const cssProp = dropdownItem.getCSS && dropdownItem.getCSS({
		theme,
		dropdownItem
	});
	const onClickDropdownItem = (0, react.useCallback)(() => {
		dropdownItem.onClick && dropdownItem.onClick(dropdownItem);
		onClick && onClick();
	}, [dropdownItem, onClick]);
	const onMouseEnter = (0, react.useCallback)(() => {
		dropdownItem.subDropdown && setShowSubDropdown(true);
	}, [dropdownItem]);
	const onMouseLeave = (0, react.useCallback)(() => {
		dropdownItem.subDropdown && setShowSubDropdown(false);
	}, [dropdownItem]);
	const iconAndLabel = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [iconSide === "left" && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [dropdownItemIconNode, require_utils_toReactNodes_toReactNodes.toReactNodes(dropdownItem.label)] }), iconSide === "right" && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_components_Flex.Flex, {
		justify: "space-between",
		align: "center",
		width: "100%",
		children: [require_utils_toReactNodes_toReactNodes.toReactNodes(dropdownItem.label), dropdownItemIconNode]
	})] });
	if (dropdownItem.to !== void 0 || dropdownItem.externalLink) return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DropdownItemLink, {
		selected: Boolean(dropdownItem.selected),
		to: dropdownItem.to,
		externalLink: dropdownItem.externalLink,
		params: dropdownItem.params,
		onClick: onClickDropdownItem,
		css: cssProp,
		hash: dropdownItem.hash,
		children: iconAndLabel
	});
	if (dropdownItem.toggle) return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(DropdownItemDiv, {
		selected: false,
		css: cssProp,
		withHoverColor: false,
		children: [iconAndLabel, /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
			css: { marginLeft: "auto" },
			children: "options" in dropdownItem.toggle ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_MultiToggle.MultiToggle, { ...dropdownItem.toggle }) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Toggle.Toggle, { ...dropdownItem.toggle })
		})]
	});
	if (dropdownItem.subDropdown) return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(DropdownItemDiv, {
		selected: false,
		css: cssProp,
		onMouseEnter,
		onMouseLeave,
		children: [iconAndLabel, /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(dropdownItem.subDropdown.customDropdown || Dropdown, {
			button: {
				label: "",
				getCSS: getDropdownCss
			},
			dropdownItems: dropdownItem.subDropdown.subItems,
			align: "left",
			dropdownItemOffsetTop: -dropdownButtonHeight,
			isOpen: showSubDropdown,
			onOpen: () => setShowSubDropdown(true),
			onClose: () => setShowSubDropdown(false)
		})]
	});
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DropdownItemDiv, {
		selected: false,
		css: cssProp,
		onClick: onClickDropdownItem,
		children: iconAndLabel
	});
}
const UnstyledDropdownButton = (0, _emotion_styled.default)(require_components_UnstyledButton.UnstyledButton)`
  ${require_styles_common.standardFocusOutline}
`;
const dropdownItemStyle = ({ theme, selected, withHoverColor = true }) => `
  background-color: ${selected ? theme.primary : "transparent"};
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  outline-color: ${selected ? theme.onPrimaryText : theme.hcNeutral} !important;
  white-space: nowrap;

  padding: 8px 16px;
  ${require_styles_breakpoints.bp.sm(`padding-left: ${require_styles_constants.smHeaderLogoMarginLeft};`)}

  ${withHoverColor ? `
      &:hover {
        color: ${theme.hcNeutral} !important;
      }
      ` : ""}
`;
const cssProp = ({ theme, selected }) => _emotion_react.css`
  ${dropdownItemStyle({
	theme,
	selected: Boolean(selected)
})}
  ${require_styles_common.standardFocusOutline({ theme })}
`;
function DropdownItemLink(props) {
	const theme = (0, _emotion_react.useTheme)();
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_router.Link, {
		...props,
		css: cssProp({
			theme,
			selected: Boolean(props.selected)
		})
	});
}
const DropdownItemDiv = _emotion_styled.default.div`
  ${dropdownItemStyle}
  ${require_styles_common.standardFocusOutline}
`;
//#endregion
exports.Dropdown = Dropdown;
