@ultraviolet/ui 3.21.1 → 3.22.0

package/dist/components/Menu/MenuContent.js

@@ -13,202 +13,204 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Menu/MenuContent.tsx
 var SPACE_DISCLOSURE_POPUP, moveFocusDown, moveFocusUp, Menu;
-var init_MenuContent = __esmMin(() => {
-	init_Popup();
-	init_SearchInput();
-	init_Stack();
-	init_helpers();
-	init_MenuProvider();
-	init_styles_css();
-	SPACE_DISCLOSURE_POPUP = 24;
-	moveFocusDown = (indexOfCurrent, listItem) => {
-		if (indexOfCurrent < listItem.length - 1) listItem[indexOfCurrent + 1].focus();
-		else listItem[0].focus();
-	};
-	moveFocusUp = (indexOfCurrent, listItem) => {
-		if (indexOfCurrent > 0) listItem[indexOfCurrent - 1].focus();
-		else {
-			var _listItem$at;
-			(_listItem$at = listItem.at(-1)) === null || _listItem$at === void 0 || _listItem$at.focus();
-		}
-	};
-	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 isTriggerMethodHover = triggerMethod === "hover";
-		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);
-				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 && isTriggerMethodHover) {
-				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,
-			isTriggerMethodHover
-		]);
-		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();
-				}
-			}
+function init_MenuContent() {
+	return (init_MenuContent = __esmMin(() => {
+		init_Popup();
+		init_SearchInput();
+		init_Stack();
+		init_helpers();
+		init_MenuProvider();
+		init_styles_css();
+		SPACE_DISCLOSURE_POPUP = 24;
+		moveFocusDown = (indexOfCurrent, listItem) => {
+			if (indexOfCurrent < listItem.length - 1) listItem[indexOfCurrent + 1].focus();
+			else listItem[0].focus();
 		};
-		const handleFocusKey = (key, indexOfCurrent, listItem) => {
-			if (key === "ArrowDown") moveFocusDown(indexOfCurrent, listItem);
-			else if (key === "ArrowUp") moveFocusUp(indexOfCurrent, listItem);
-			else if (key === "ArrowLeft" && isTriggerMethodHover) {
-				var _disclosureRef$curren;
-				(_disclosureRef$curren = disclosureRef.current) === null || _disclosureRef$curren === void 0 || _disclosureRef$curren.focus();
-				setShouldBeVisible(void 0);
+		moveFocusUp = (indexOfCurrent, listItem) => {
+			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) {
-						const indexOfCurrent = listItem.indexOf(currentElement);
-						event.preventDefault();
-						handleFocusKey(event.key, indexOfCurrent, listItem);
+		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 isTriggerMethodHover = triggerMethod === "hover";
+			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);
+					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 && isTriggerMethodHover) {
+					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,
+				isTriggerMethodHover
+			]);
+			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();
 					}
 				}
-			}
-		};
-		useEffect(() => {
-			if (disclosureRef.current && placement === "bottom" && shrink) {
-				const disclosureBottom = disclosureRef.current.getBoundingClientRect().bottom;
-				const availableSpace = portalTarget.getBoundingClientRect().bottom - disclosureBottom - SPACE_DISCLOSURE_POPUP;
-				setPopupMaxHeight(`${availableSpace}px`);
-			}
-		}, [
-			isVisible,
-			portalTarget,
-			disclosureRef,
-			placement,
-			shrink
-		]);
-		return /* @__PURE__ */ jsx(Popup, {
-			align,
-			"aria-label": ariaLabel,
-			className: cn(className, menuStyle.menu({
-				arrow: hasArrow,
-				searchable
-			})),
-			debounceDelay: isTriggerMethodHover ? 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();
+			};
+			const handleFocusKey = (key, indexOfCurrent, listItem) => {
+				if (key === "ArrowDown") moveFocusDown(indexOfCurrent, listItem);
+				else if (key === "ArrowUp") moveFocusUp(indexOfCurrent, listItem);
+				else if (key === "ArrowLeft" && isTriggerMethodHover) {
+					var _disclosureRef$curren;
+					(_disclosureRef$curren = disclosureRef.current) === null || _disclosureRef$curren === void 0 || _disclosureRef$curren.focus();
+					setShouldBeVisible(void 0);
+				}
+			};
+			const handleKeyDown = (event) => {
+				if (contentRef.current) {
+					const listItem = getListItem([...contentRef.current.children]);
+					if (listItem) {
+						const currentElement = listItem.find((item) => item === document.activeElement);
+						if (currentElement) {
+							const indexOfCurrent = listItem.indexOf(currentElement);
+							event.preventDefault();
+							handleFocusKey(event.key, indexOfCurrent, listItem);
+						}
+					}
 				}
-				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
+			};
+			useEffect(() => {
+				if (disclosureRef.current && placement === "bottom" && shrink) {
+					const disclosureBottom = disclosureRef.current.getBoundingClientRect().bottom;
+					const availableSpace = portalTarget.getBoundingClientRect().bottom - disclosureBottom - SPACE_DISCLOSURE_POPUP;
+					setPopupMaxHeight(`${availableSpace}px`);
+				}
+			}, [
+				isVisible,
+				portalTarget,
+				disclosureRef,
+				placement,
+				shrink
+			]);
+			return /* @__PURE__ */ jsx(Popup, {
+				align,
+				"aria-label": ariaLabel,
+				className: cn(className, menuStyle.menu({
+					arrow: hasArrow,
+					searchable
+				})),
+				debounceDelay: isTriggerMethodHover ? 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: 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]
-			}),
-			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
 init_MenuContent();

package/dist/components/Menu/MenuProvider.js

@@ -5,47 +5,49 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Menu/MenuProvider.tsx
 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);
-});
+function init_MenuProvider() {
+	return (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
 init_MenuProvider();

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

@@ -8,31 +8,33 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Menu/components/Group.tsx
 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] });
-	};
-	Group.displayName = "Menu.Group";
-});
+function init_Group() {
+	return (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] });
+		};
+		Group.displayName = "Menu.Group";
+	}))();
+}
 
 //#endregion
 init_Group();