@ultraviolet/ui 3.11.1 → 3.12.0

package/dist/components/Menu/MenuContent.js

@@ -1,202 +1,212 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { Stack } from "../Stack/index.js";
-import { Popup } from "../Popup/index.js";
-import { heightAvailableSpace, heightMenu, menu, menuContent, menuFooter, menuList, menuSearchInput } from "./styles.css.js";
-import { getListItem, searchChildren } from "./helpers.js";
-import { DisclosureContext, useMenu } from "./MenuProvider.js";
-import { SearchInput } from "../SearchInput/index.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../Stack/index.js";
+import { Popup, init_Popup } from "../Popup/index.js";
+import { heightAvailableSpace, heightMenu, init_styles_css, menuStyle } from "./styles.css.js";
+import { getListItem, init_helpers, searchChildren } from "./helpers.js";
+import { DisclosureContext, init_MenuProvider, useMenu } from "./MenuProvider.js";
+import { SearchInput, init_SearchInput } from "../SearchInput/index.js";
 import { cloneElement, forwardRef, isValidElement, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { cn } from "@ultraviolet/utils";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@ultraviolet/utils";
 
 //#region src/components/Menu/MenuContent.tsx
-const SPACE_DISCLOSURE_POPUP = 24;
-const Menu = forwardRef(({ id, ariaLabel = "Menu", children, disclosure, hasArrow = false, placement = "auto-bottom", className, "data-testid": dataTestId, maxHeight, portalTarget = document.body, triggerMethod = "click", dynamicDomRendering, align, searchable = false, footer, shrink, style }, ref) => {
-	const { isVisible, setIsVisible, isNested, disclosureRef, menuRef, setShouldBeVisible, shouldBeVisible } = useMenu();
-	const searchInputRef = useRef(null);
-	const [localChild, setLocalChild] = useState(null);
-	const [popupMaxHeight, setPopupMaxHeight] = useState(maxHeight !== null && maxHeight !== void 0 ? maxHeight : "30rem");
-	const contentRef = useRef(null);
-	const tempId = useId();
-	const finalId = `menu-${id !== null && id !== void 0 ? id : tempId}`;
-	const target = isValidElement(disclosure) ? disclosure : disclosure({ visible: isVisible });
-	const innerRef = useRef(target);
-	useImperativeHandle(ref, () => innerRef.current);
-	const finalDisclosure = cloneElement(target, {
-		"aria-expanded": isVisible,
-		"aria-haspopup": "dialog",
-		onClick: (event) => {
-			var _target$props$onClick;
-			var _target$props;
-			(_target$props$onClick = (_target$props = target.props).onClick) === null || _target$props$onClick === void 0 || _target$props$onClick.call(_target$props, event);
-			if (isNested) {
-				event.preventDefault();
-				event.stopPropagation();
-			}
-			setIsVisible(!isVisible);
-		},
-		ref: disclosureRef
-	});
-	const onSearch = useCallback((value) => {
-		if (typeof children === "object") setLocalChild(searchChildren(children, value));
-	}, [children]);
-	useEffect(() => {
-		let timeout;
-		if (isVisible && searchable) timeout = setTimeout(() => {
-			var _searchInputRef$curre;
-			(_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
-		}, 50);
-		return () => {
-			if (timeout) clearTimeout(timeout);
-		};
-	}, [isVisible, searchable]);
-	useEffect(() => {
-		if (disclosureRef.current && triggerMethod === "hover") {
-			const handler = (value) => {
-				setShouldBeVisible(value);
-			};
-			disclosureRef.current.addEventListener("focus", () => handler(true));
-			disclosureRef.current.addEventListener("mouseenter", () => handler(true));
-			disclosureRef.current.addEventListener("mouseleave", () => handler(false));
-			disclosureRef.current.addEventListener("keydown", (event) => {
-				if (event.key === "ArrowDown" || event.key === "ArrowUp") handler(false);
-			});
+var SPACE_DISCLOSURE_POPUP, Menu;
+var init_MenuContent = __esmMin(() => {
+	init_Popup();
+	init_SearchInput();
+	init_Stack();
+	init_helpers();
+	init_MenuProvider();
+	init_styles_css();
+	SPACE_DISCLOSURE_POPUP = 24;
+	Menu = forwardRef(({ id, ariaLabel = "Menu", children, disclosure, hasArrow = false, placement = "auto-bottom", className, "data-testid": dataTestId, maxHeight, portalTarget = document.body, triggerMethod = "click", dynamicDomRendering, align, searchable = false, footer, shrink, style }, ref) => {
+		const { isVisible, setIsVisible, isNested, disclosureRef, menuRef, setShouldBeVisible, shouldBeVisible } = useMenu();
+		const searchInputRef = useRef(null);
+		const [localChild, setLocalChild] = useState(null);
+		const [popupMaxHeight, setPopupMaxHeight] = useState(maxHeight !== null && maxHeight !== void 0 ? maxHeight : "30rem");
+		const contentRef = useRef(null);
+		const tempId = useId();
+		const finalId = `menu-${id !== null && id !== void 0 ? id : tempId}`;
+		const target = isValidElement(disclosure) ? disclosure : disclosure({ visible: isVisible });
+		const innerRef = useRef(target);
+		useImperativeHandle(ref, () => innerRef.current);
+		const finalDisclosure = cloneElement(target, {
+			"aria-expanded": isVisible,
+			"aria-haspopup": "dialog",
+			onClick: (event) => {
+				var _target$props$onClick;
+				var _target$props;
+				(_target$props$onClick = (_target$props = target.props).onClick) === null || _target$props$onClick === void 0 || _target$props$onClick.call(_target$props, event);
+				if (isNested) {
+					event.preventDefault();
+					event.stopPropagation();
+				}
+				setIsVisible(!isVisible);
+			},
+			ref: disclosureRef
+		});
+		const onSearch = useCallback((value) => {
+			if (typeof children === "object") setLocalChild(searchChildren(children, value));
+		}, [children]);
+		useEffect(() => {
+			let timeout;
+			if (isVisible && searchable) timeout = setTimeout(() => {
+				var _searchInputRef$curre;
+				(_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
+			}, 50);
 			return () => {
-				window.removeEventListener("focus", () => handler(void 0));
-				window.removeEventListener("mouseenter", () => handler(void 0));
-				window.removeEventListener("mouseleave", () => handler(void 0));
-				window.removeEventListener("keydown", () => handler(void 0));
+				if (timeout) clearTimeout(timeout);
 			};
-		}
-	}, [
-		setShouldBeVisible,
-		disclosureRef,
-		triggerMethod
-	]);
-	const finalChild = useMemo(() => {
-		if (typeof children === "function") return children({ toggle: () => setIsVisible(!isVisible) });
-		if (searchable && localChild) return localChild;
-		return children;
-	}, [
-		children,
-		isVisible,
-		localChild,
-		searchable,
-		setIsVisible
-	]);
-	const handleTabOpen = (event) => {
-		if (contentRef.current) {
-			const listItem = getListItem([...contentRef.current.children]);
-			if (listItem && isVisible && ["Tab", "ArrowDown"].includes(event.key)) {
-				var _listItem$;
-				event === null || event === void 0 || event.preventDefault();
-				(_listItem$ = listItem[0]) === null || _listItem$ === void 0 || _listItem$.focus();
+		}, [isVisible, searchable]);
+		useEffect(() => {
+			if (disclosureRef.current && triggerMethod === "hover") {
+				const handler = (value) => {
+					setShouldBeVisible(value);
+				};
+				disclosureRef.current.addEventListener("focus", () => handler(true));
+				disclosureRef.current.addEventListener("mouseenter", () => handler(true));
+				disclosureRef.current.addEventListener("mouseleave", () => handler(false));
+				disclosureRef.current.addEventListener("keydown", (event) => {
+					if (event.key === "ArrowDown" || event.key === "ArrowUp") handler(false);
+				});
+				return () => {
+					window.removeEventListener("focus", () => handler(void 0));
+					window.removeEventListener("mouseenter", () => handler(void 0));
+					window.removeEventListener("mouseleave", () => handler(void 0));
+					window.removeEventListener("keydown", () => handler(void 0));
+				};
+			}
+		}, [
+			setShouldBeVisible,
+			disclosureRef,
+			triggerMethod
+		]);
+		const finalChild = useMemo(() => {
+			if (typeof children === "function") return children({ toggle: () => setIsVisible(!isVisible) });
+			if (searchable && localChild) return localChild;
+			return children;
+		}, [
+			children,
+			isVisible,
+			localChild,
+			searchable,
+			setIsVisible
+		]);
+		const handleTabOpen = (event) => {
+			if (contentRef.current) {
+				const listItem = getListItem([...contentRef.current.children]);
+				if (listItem && isVisible && ["Tab", "ArrowDown"].includes(event.key)) {
+					var _listItem$;
+					event === null || event === void 0 || event.preventDefault();
+					(_listItem$ = listItem[0]) === null || _listItem$ === void 0 || _listItem$.focus();
+				}
 			}
-		}
-	};
-	const handleKeyDown = (event) => {
-		if (contentRef.current) {
-			const listItem = getListItem([...contentRef.current.children]);
-			if (listItem) {
-				const currentElement = listItem.find((item) => item === document.activeElement);
-				if (currentElement) {
-					if (event.key === "ArrowDown") {
-						event.preventDefault();
-						const indexOfCurrent = listItem.indexOf(currentElement);
-						if (indexOfCurrent < listItem.length - 1) listItem[indexOfCurrent + 1].focus();
-						else listItem[0].focus();
-					} else if (event.key === "ArrowUp") {
-						event.preventDefault();
-						const indexOfCurrent = listItem.indexOf(currentElement);
-						if (indexOfCurrent > 0) listItem[indexOfCurrent - 1].focus();
-						else {
-							var _listItem$at;
-							(_listItem$at = listItem.at(-1)) === null || _listItem$at === void 0 || _listItem$at.focus();
+		};
+		const handleKeyDown = (event) => {
+			if (contentRef.current) {
+				const listItem = getListItem([...contentRef.current.children]);
+				if (listItem) {
+					const currentElement = listItem.find((item) => item === document.activeElement);
+					if (currentElement) {
+						if (event.key === "ArrowDown") {
+							event.preventDefault();
+							const indexOfCurrent = listItem.indexOf(currentElement);
+							if (indexOfCurrent < listItem.length - 1) listItem[indexOfCurrent + 1].focus();
+							else listItem[0].focus();
+						} else if (event.key === "ArrowUp") {
+							event.preventDefault();
+							const indexOfCurrent = listItem.indexOf(currentElement);
+							if (indexOfCurrent > 0) listItem[indexOfCurrent - 1].focus();
+							else {
+								var _listItem$at;
+								(_listItem$at = listItem.at(-1)) === null || _listItem$at === void 0 || _listItem$at.focus();
+							}
+						} else if (event.key === "ArrowLeft" && triggerMethod === "hover") {
+							var _disclosureRef$curren;
+							(_disclosureRef$curren = disclosureRef.current) === null || _disclosureRef$curren === void 0 || _disclosureRef$curren.focus();
+							setShouldBeVisible(void 0);
 						}
-					} else if (event.key === "ArrowLeft" && triggerMethod === "hover") {
-						var _disclosureRef$curren;
-						(_disclosureRef$curren = disclosureRef.current) === null || _disclosureRef$curren === void 0 || _disclosureRef$curren.focus();
-						setShouldBeVisible(void 0);
 					}
 				}
 			}
-		}
-	};
-	useEffect(() => {
-		if (disclosureRef.current && placement === "bottom" && shrink) {
-			const disclosureBottom = disclosureRef.current.getBoundingClientRect().bottom;
-			setPopupMaxHeight(`${portalTarget.getBoundingClientRect().bottom - disclosureBottom - SPACE_DISCLOSURE_POPUP}px`);
-		}
-	}, [
-		isVisible,
-		portalTarget,
-		disclosureRef,
-		placement,
-		shrink
-	]);
-	return /* @__PURE__ */ jsx(Popup, {
-		align,
-		"aria-label": ariaLabel,
-		className: cn(className, menu({
-			arrow: hasArrow,
-			searchable
-		})),
-		debounceDelay: triggerMethod === "hover" ? 250 : 0,
-		dynamicDomRendering,
-		hasArrow,
-		hideOnClickOutside: true,
-		id: finalId,
-		maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : "fit-content",
-		onClose: () => {
-			setIsVisible(false);
-			setLocalChild(null);
-			if (triggerMethod === "click") {
-				var _disclosureRef$curren2;
-				(_disclosureRef$curren2 = disclosureRef.current) === null || _disclosureRef$curren2 === void 0 || _disclosureRef$curren2.focus();
+		};
+		useEffect(() => {
+			if (disclosureRef.current && placement === "bottom" && shrink) {
+				const disclosureBottom = disclosureRef.current.getBoundingClientRect().bottom;
+				setPopupMaxHeight(`${portalTarget.getBoundingClientRect().bottom - disclosureBottom - SPACE_DISCLOSURE_POPUP}px`);
 			}
-			setShouldBeVisible(void 0);
-		},
-		onKeyDown: handleTabOpen,
-		placement: isNested ? "nested-menu" : placement,
-		portalTarget,
-		ref: menuRef,
-		role: "dialog",
-		style,
-		tabIndex: -1,
-		text: /* @__PURE__ */ jsxs(Stack, {
-			className: cn(className, menuList),
-			"data-testid": dataTestId,
-			onKeyDown: handleKeyDown,
-			onMouseEnter: () => setShouldBeVisible(true),
-			onMouseLeave: () => setShouldBeVisible(false),
-			role: "menu",
-			style: assignInlineVars({
-				[heightMenu]: maxHeight !== null && maxHeight !== void 0 ? maxHeight : "30rem",
-				[heightAvailableSpace]: popupMaxHeight
+		}, [
+			isVisible,
+			portalTarget,
+			disclosureRef,
+			placement,
+			shrink
+		]);
+		return /* @__PURE__ */ jsx(Popup, {
+			align,
+			"aria-label": ariaLabel,
+			className: cn(className, menuStyle.menu({
+				arrow: hasArrow,
+				searchable
+			})),
+			debounceDelay: triggerMethod === "hover" ? 250 : 0,
+			dynamicDomRendering,
+			hasArrow,
+			hideOnClickOutside: true,
+			id: finalId,
+			maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : "fit-content",
+			onClose: () => {
+				setIsVisible(false);
+				setLocalChild(null);
+				if (triggerMethod === "click") {
+					var _disclosureRef$curren2;
+					(_disclosureRef$curren2 = disclosureRef.current) === null || _disclosureRef$curren2 === void 0 || _disclosureRef$curren2.focus();
+				}
+				setShouldBeVisible(void 0);
+			},
+			onKeyDown: handleTabOpen,
+			placement: isNested ? "nested-menu" : placement,
+			portalTarget,
+			ref: menuRef,
+			role: "dialog",
+			style,
+			tabIndex: -1,
+			text: /* @__PURE__ */ jsxs(Stack, {
+				className: cn(className, menuStyle.list),
+				"data-testid": dataTestId,
+				onKeyDown: handleKeyDown,
+				onMouseEnter: () => setShouldBeVisible(true),
+				onMouseLeave: () => setShouldBeVisible(false),
+				role: "menu",
+				style: assignInlineVars({
+					[heightMenu]: maxHeight !== null && maxHeight !== void 0 ? maxHeight : "30rem",
+					[heightAvailableSpace]: popupMaxHeight
+				}),
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					className: menuStyle.content,
+					ref: contentRef,
+					children: [searchable && typeof children !== "function" ? /* @__PURE__ */ jsx(SearchInput, {
+						className: menuStyle.searchInput,
+						onSearch,
+						ref: searchInputRef,
+						size: "small"
+					}) : null, finalChild]
+				}), footer ? /* @__PURE__ */ jsx(Stack, {
+					className: menuStyle.footer,
+					children: footer
+				}) : null]
 			}),
-			children: [/* @__PURE__ */ jsxs(Stack, {
-				className: menuContent,
-				ref: contentRef,
-				children: [searchable && typeof children !== "function" ? /* @__PURE__ */ jsx(SearchInput, {
-					className: menuSearchInput,
-					onSearch,
-					ref: searchInputRef,
-					size: "small"
-				}) : null, finalChild]
-			}), footer ? /* @__PURE__ */ jsx(Stack, {
-				className: menuFooter,
-				children: footer
-			}) : null]
-		}),
-		visible: triggerMethod === "click" ? isVisible : shouldBeVisible,
-		children: /* @__PURE__ */ jsx(DisclosureContext.Provider, {
-			value: true,
-			children: finalDisclosure
-		})
+			visible: triggerMethod === "click" ? isVisible : shouldBeVisible,
+			children: /* @__PURE__ */ jsx(DisclosureContext.Provider, {
+				value: true,
+				children: finalDisclosure
+			})
+		});
 	});
 });
 
 //#endregion
-export { Menu };
+init_MenuContent();
+export { Menu, init_MenuContent };

package/dist/components/Menu/MenuProvider.js

@@ -1,48 +1,52 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 import { createContext, useContext, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Menu/MenuProvider.tsx
-const MenuContext = createContext(void 0);
-const useMenu = () => {
-	const context = useContext(MenuContext);
-	if (!context) throw new Error("useMenu must be used in MenuProvider");
-	return context;
-};
-const MenuProvider = ({ hideOnClickItem = false, children, visible = false, parentDisclosureRef }) => {
-	const [isVisible, setIsVisible] = useState(visible);
-	const [shouldBeVisible, setShouldBeVisible] = useState(void 0);
-	const disclosureRef = useRef(null);
-	const menuRef = useRef(null);
-	const parentMenu = useContext(MenuContext);
-	const isNested = !!parentMenu;
-	const values = useMemo(() => ({
-		disclosureRef,
-		hideOnClickItem,
-		isNested,
-		isVisible,
-		menuRef,
-		parentDisclosureRef: parentDisclosureRef !== null && parentDisclosureRef !== void 0 ? parentDisclosureRef : parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.disclosureRef,
-		setIsVisible,
-		setShouldBeVisible,
-		shouldBeVisible
-	}), [
-		hideOnClickItem,
-		isVisible,
-		isNested,
-		parentDisclosureRef,
-		parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.disclosureRef,
-		shouldBeVisible,
-		setShouldBeVisible
-	]);
-	return /* @__PURE__ */ jsx(MenuContext.Provider, {
-		value: values,
-		children
-	});
-};
-const DisclosureContext = createContext(false);
-const useDisclosureContext = () => useContext(DisclosureContext);
+var MenuContext, useMenu, MenuProvider, DisclosureContext, useDisclosureContext;
+var init_MenuProvider = __esmMin(() => {
+	MenuContext = createContext(void 0);
+	useMenu = () => {
+		const context = useContext(MenuContext);
+		if (!context) throw new Error("useMenu must be used in MenuProvider");
+		return context;
+	};
+	MenuProvider = ({ hideOnClickItem = false, children, visible = false, parentDisclosureRef }) => {
+		const [isVisible, setIsVisible] = useState(visible);
+		const [shouldBeVisible, setShouldBeVisible] = useState(void 0);
+		const disclosureRef = useRef(null);
+		const menuRef = useRef(null);
+		const parentMenu = useContext(MenuContext);
+		const isNested = !!parentMenu;
+		const values = useMemo(() => ({
+			disclosureRef,
+			hideOnClickItem,
+			isNested,
+			isVisible,
+			menuRef,
+			parentDisclosureRef: parentDisclosureRef !== null && parentDisclosureRef !== void 0 ? parentDisclosureRef : parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.disclosureRef,
+			setIsVisible,
+			setShouldBeVisible,
+			shouldBeVisible
+		}), [
+			hideOnClickItem,
+			isVisible,
+			isNested,
+			parentDisclosureRef,
+			parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.disclosureRef,
+			shouldBeVisible,
+			setShouldBeVisible
+		]);
+		return /* @__PURE__ */ jsx(MenuContext.Provider, {
+			value: values,
+			children
+		});
+	};
+	DisclosureContext = createContext(false);
+	useDisclosureContext = () => useContext(DisclosureContext);
+});
 
 //#endregion
-export { DisclosureContext, MenuProvider, useDisclosureContext, useMenu };
+init_MenuProvider();
+export { DisclosureContext, MenuProvider, init_MenuProvider, useDisclosureContext, useMenu };

package/dist/components/Menu/components/Group.js

@@ -1,31 +1,38 @@
 'use client';
-import { __name } from "../../../_virtual/_rolldown/runtime.js";
-import { Stack } from "../../Stack/index.js";
-import { Text } from "../../Text/index.js";
-import { menuGroup } from "../styles.css.js";
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../Stack/index.js";
+import { Text, init_Text } from "../../Text/index.js";
+import { init_styles_css, menuStyle } from "../styles.css.js";
 import { Children } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Menu/components/Group.tsx
-const Group = ({ label, children, labelDescription, emptyState, style }) => {
-	const isChildrenEmpty = Children.count(children) === 0;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-		className: menuGroup,
-		style,
-		children: /* @__PURE__ */ jsxs(Stack, {
-			alignItems: "center",
-			direction: "row",
-			gap: 1,
-			children: [/* @__PURE__ */ jsx(Text, {
-				as: "span",
-				prominence: "weak",
-				sentiment: "neutral",
-				variant: "captionStrong",
-				children: label
-			}), labelDescription !== null && labelDescription !== void 0 ? labelDescription : null]
-		})
-	}), isChildrenEmpty && emptyState ? emptyState : children] });
-};
+var Group;
+var init_Group = __esmMin(() => {
+	init_Stack();
+	init_Text();
+	init_styles_css();
+	Group = ({ label, children, labelDescription, emptyState, style }) => {
+		const isChildrenEmpty = Children.count(children) === 0;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: menuStyle.group,
+			style,
+			children: /* @__PURE__ */ jsxs(Stack, {
+				alignItems: "center",
+				direction: "row",
+				gap: 1,
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					prominence: "weak",
+					sentiment: "neutral",
+					variant: "captionStrong",
+					children: label
+				}), labelDescription !== null && labelDescription !== void 0 ? labelDescription : null]
+			})
+		}), isChildrenEmpty && emptyState ? emptyState : children] });
+	};
+});
 
 //#endregion
-export { Group };
+init_Group();
+export { Group, init_Group };