@ultraviolet/ui 3.21.1 → 3.21.2

package/dist/compositions/Navigation/Footer.js

@@ -11,62 +11,64 @@ import { ArrowRightDoubleIcon } from "@ultraviolet/icons/ArrowRightDoubleIcon";
 
 //#region src/compositions/Navigation/Footer.tsx
 var Footer;
-var init_Footer = __esmMin(() => {
-	init_Button();
-	init_Tooltip();
-	init_NavigationProvider();
-	init_styles_css();
-	Footer = ({ onToggleExpand, contentRef }) => {
-		const { expanded, toggleExpand, locales, animation } = useNavigation();
-		const isScrollAtBottom = useCallback(() => {
-			if (contentRef.current) {
-				if (contentRef.current.scrollTop + contentRef.current.offsetHeight >= contentRef.current.scrollHeight) return false;
+function init_Footer() {
+	return (init_Footer = __esmMin(() => {
+		init_Button();
+		init_Tooltip();
+		init_NavigationProvider();
+		init_styles_css();
+		Footer = ({ onToggleExpand, contentRef }) => {
+			const { expanded, toggleExpand, locales, animation } = useNavigation();
+			const isScrollAtBottom = useCallback(() => {
+				if (contentRef.current) {
+					if (contentRef.current.scrollTop + contentRef.current.offsetHeight >= contentRef.current.scrollHeight) return false;
+					return true;
+				}
 				return true;
-			}
-			return true;
-		}, [contentRef]);
-		const [footerHasOverflowStyle, setFooterHasOverflowStyle] = useState(isScrollAtBottom());
-		useLayoutEffect(() => {
-			const currentContentRef = contentRef.current;
-			const scroll = () => {
-				const hasOverflow = isScrollAtBottom();
-				if (footerHasOverflowStyle !== hasOverflow) setFooterHasOverflowStyle(hasOverflow);
-			};
-			if (currentContentRef) currentContentRef.addEventListener("scroll", scroll);
-			return () => {
-				currentContentRef === null || currentContentRef === void 0 || currentContentRef.removeEventListener("scroll", scroll);
-			};
-		}, [
-			footerHasOverflowStyle,
-			isScrollAtBottom,
-			contentRef
-		]);
-		useLayoutEffect(() => {
-			setFooterHasOverflowStyle(isScrollAtBottom());
-		}, [isScrollAtBottom]);
-		const Icon = useMemo(() => expanded ? ArrowLeftDoubleIcon : ArrowRightDoubleIcon, [expanded]);
-		const label = useMemo(() => expanded ? locales["navigation.collapse.button"] : locales["navigation.expand.button"], [expanded, locales]);
-		return /* @__PURE__ */ jsx("div", {
-			className: navigationStyle.stickyFooter({ overflow: footerHasOverflowStyle }),
-			children: /* @__PURE__ */ jsx(Tooltip, {
-				disableAnimation: animation === false,
-				placement: "right",
-				text: label,
-				children: /* @__PURE__ */ jsx(Button, {
-					"aria-label": label,
-					onClick: () => {
-						toggleExpand();
-						onToggleExpand === null || onToggleExpand === void 0 || onToggleExpand(!expanded);
-					},
-					sentiment: "neutral",
-					size: "small",
-					variant: "ghost",
-					children: /* @__PURE__ */ jsx(Icon, {})
+			}, [contentRef]);
+			const [footerHasOverflowStyle, setFooterHasOverflowStyle] = useState(isScrollAtBottom());
+			useLayoutEffect(() => {
+				const currentContentRef = contentRef.current;
+				const scroll = () => {
+					const hasOverflow = isScrollAtBottom();
+					if (footerHasOverflowStyle !== hasOverflow) setFooterHasOverflowStyle(hasOverflow);
+				};
+				if (currentContentRef) currentContentRef.addEventListener("scroll", scroll);
+				return () => {
+					currentContentRef === null || currentContentRef === void 0 || currentContentRef.removeEventListener("scroll", scroll);
+				};
+			}, [
+				footerHasOverflowStyle,
+				isScrollAtBottom,
+				contentRef
+			]);
+			useLayoutEffect(() => {
+				setFooterHasOverflowStyle(isScrollAtBottom());
+			}, [isScrollAtBottom]);
+			const Icon = useMemo(() => expanded ? ArrowLeftDoubleIcon : ArrowRightDoubleIcon, [expanded]);
+			const label = useMemo(() => expanded ? locales["navigation.collapse.button"] : locales["navigation.expand.button"], [expanded, locales]);
+			return /* @__PURE__ */ jsx("div", {
+				className: navigationStyle.stickyFooter({ overflow: footerHasOverflowStyle }),
+				children: /* @__PURE__ */ jsx(Tooltip, {
+					disableAnimation: animation === false,
+					placement: "right",
+					text: label,
+					children: /* @__PURE__ */ jsx(Button, {
+						"aria-label": label,
+						onClick: () => {
+							toggleExpand();
+							onToggleExpand === null || onToggleExpand === void 0 || onToggleExpand(!expanded);
+						},
+						sentiment: "neutral",
+						size: "small",
+						variant: "ghost",
+						children: /* @__PURE__ */ jsx(Icon, {})
+					})
 				})
-			})
-		});
-	};
-});
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_Footer();

package/dist/compositions/Navigation/Header.js

@@ -8,23 +8,25 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/compositions/Navigation/Header.tsx
 var Header;
-var init_Header = __esmMin(() => {
-	init_Stack();
-	init_NavigationProvider();
-	init_styles_css();
-	Header = memo(({ logo }) => {
-		const { animation, expanded } = useNavigation();
-		return /* @__PURE__ */ jsx("div", {
-			className: navigationStyle.header,
-			children: /* @__PURE__ */ jsx(Stack, {
-				alignItems: "flex-start",
-				className: navigationStyle.logoContainer,
-				justifyContent: expanded ? void 0 : "center",
-				children: typeof logo === "function" ? logo(animation ? false : expanded) : logo
-			})
+function init_Header() {
+	return (init_Header = __esmMin(() => {
+		init_Stack();
+		init_NavigationProvider();
+		init_styles_css();
+		Header = memo(({ logo }) => {
+			const { animation, expanded } = useNavigation();
+			return /* @__PURE__ */ jsx("div", {
+				className: navigationStyle.header,
+				children: /* @__PURE__ */ jsx(Stack, {
+					alignItems: "flex-start",
+					className: navigationStyle.logoContainer,
+					justifyContent: expanded ? void 0 : "center",
+					children: typeof logo === "function" ? logo(animation ? false : expanded) : logo
+				})
+			});
 		});
-	});
-});
+	}))();
+}
 
 //#endregion
 init_Header();

package/dist/compositions/Navigation/NavigationContent.js

@@ -17,110 +17,113 @@ function clamp(min, value, max) {
 	return Math.min(max, Math.max(min, value));
 }
 var NavigationContent;
-var init_NavigationContent = __esmMin(() => {
-	init_Stack();
-	init_constants();
-	init_Footer();
-	init_Header();
-	init_NavigationProvider();
-	init_styles_css();
-	init_variables_css();
-	NavigationContent = ({ children, logo, onWidthResize, className, "data-testid": dataTestId, id, onToggleExpand }) => {
-		const context = useNavigation();
-		if (!context) throw new Error("Navigation should be inside NavigationProvider to use it properly.");
-		const { setWidth, width, expanded, toggleExpand, navigationRef, allowNavigationResize, shouldAnimate } = context;
-		const clampedWidth = clamp(220, width, 320);
-		const sliderRef = useRef(null);
-		const contentRef = useRef(null);
-		useEffect(() => {
-			let prevX;
-			let navRect;
-			let shouldCollapseOnMouseUp = false;
-			let shouldExpandOnMouseUp = false;
-			const mouseMove = (event) => {
-				if (prevX !== void 0) {
-					var _navRect$width;
-					const newWidth = clamp(220, ((_navRect$width = navRect === null || navRect === void 0 ? void 0 : navRect.width) !== null && _navRect$width !== void 0 ? _navRect$width : 0) + (event.clientX - prevX), 320);
-					if (navigationRef.current && expanded) {
-						navigationRef.current.style.width = `${newWidth}px`;
-						setElementVars(navigationRef.current, { [widthNavigationContainerExpanded]: `${newWidth}px` });
-					}
-					shouldCollapseOnMouseUp = newWidth <= 220;
-					shouldExpandOnMouseUp = !expanded && newWidth >= 64;
-				}
-			};
-			const mousedown = (event) => {
-				var _navigationRef$curren;
-				prevX = event.clientX;
-				navRect = (_navigationRef$curren = navigationRef.current) === null || _navigationRef$curren === void 0 ? void 0 : _navigationRef$curren.getBoundingClientRect();
-				if (navigationRef.current) setElementVars(navigationRef.current, { [widthNavigationContainerDuration]: "0" });
-				const mouseup = () => {
-					if (shouldCollapseOnMouseUp || shouldExpandOnMouseUp) {
-						toggleExpand();
-						onToggleExpand === null || onToggleExpand === void 0 || onToggleExpand(!expanded);
-						if (navigationRef.current) setElementVars(navigationRef.current, { [widthNavigationContainerExpanded]: `${clampedWidth}px` });
-					}
-					if (navigationRef.current) {
-						if (!(shouldCollapseOnMouseUp || shouldExpandOnMouseUp)) {
-							onWidthResize === null || onWidthResize === void 0 || onWidthResize(navigationRef.current.offsetWidth);
-							setWidth === null || setWidth === void 0 || setWidth(navigationRef.current.offsetWidth);
+function init_NavigationContent() {
+	return (init_NavigationContent = __esmMin(() => {
+		init_Stack();
+		init_constants();
+		init_Footer();
+		init_Header();
+		init_NavigationProvider();
+		init_styles_css();
+		init_variables_css();
+		NavigationContent = ({ children, logo, onWidthResize, className, "data-testid": dataTestId, id, onToggleExpand }) => {
+			const context = useNavigation();
+			if (!context) throw new Error("Navigation should be inside NavigationProvider to use it properly.");
+			const { setWidth, width, expanded, toggleExpand, navigationRef, allowNavigationResize, shouldAnimate } = context;
+			const clampedWidth = clamp(220, width, 320);
+			const sliderRef = useRef(null);
+			const contentRef = useRef(null);
+			useEffect(() => {
+				let prevX;
+				let navRect;
+				let shouldCollapseOnMouseUp = false;
+				let shouldExpandOnMouseUp = false;
+				const mouseMove = (event) => {
+					if (prevX !== void 0) {
+						var _navRect$width;
+						const navWidth = (_navRect$width = navRect === null || navRect === void 0 ? void 0 : navRect.width) !== null && _navRect$width !== void 0 ? _navRect$width : 0;
+						const newWidth = clamp(220, navWidth + (event.clientX - prevX), 320);
+						if (navigationRef.current && expanded) {
+							navigationRef.current.style.width = `${newWidth}px`;
+							setElementVars(navigationRef.current, { [widthNavigationContainerExpanded]: `${newWidth}px` });
 						}
-						if (!expanded) navigationRef.current.style.width = "";
-						setElementVars(navigationRef.current, { [widthNavigationContainerDuration]: `${shouldAnimate ? 250 : 0}ms` });
+						shouldCollapseOnMouseUp = newWidth <= 220;
+						shouldExpandOnMouseUp = !expanded && newWidth >= 64;
 					}
-					document.removeEventListener("mousemove", mouseMove);
-					window.removeEventListener("mouseup", mouseup);
 				};
-				document.addEventListener("mousemove", mouseMove);
-				window.addEventListener("mouseup", mouseup);
-			};
-			const sliderRefCurrent = sliderRef.current;
-			sliderRefCurrent === null || sliderRefCurrent === void 0 || sliderRefCurrent.addEventListener("mousedown", mousedown);
-			return () => {
-				sliderRefCurrent === null || sliderRefCurrent === void 0 || sliderRefCurrent.removeEventListener("mousedown", mousedown);
-			};
-		}, [
-			expanded,
-			navigationRef,
-			onToggleExpand,
-			onWidthResize,
-			setWidth,
-			toggleExpand,
-			shouldAnimate,
-			clampedWidth
-		]);
-		return /* @__PURE__ */ jsxs("nav", {
-			className: cn(className, navigationStyle.navigation),
-			"data-testid": dataTestId,
-			id,
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: navigationStyle.container(),
-				ref: navigationRef,
-				style: assignInlineVars({
-					[widthNavigationContainer]: `${expanded ? clampedWidth : 64}px`,
-					[widthNavigationContainerExpanded]: `${clampedWidth}px`,
-					[widthNavigationContainerDuration]: `${shouldAnimate ? 250 : 0}ms`
-				}),
-				children: [logo ? /* @__PURE__ */ jsx(Header, { logo }) : null, /* @__PURE__ */ jsxs("div", {
-					className: cn(navigationStyle.contentContainer),
-					children: [/* @__PURE__ */ jsx(Stack, {
-						className: navigationStyle.content({ collapsed: !expanded }),
-						gap: .25,
-						ref: contentRef,
-						children
-					}), allowNavigationResize ? /* @__PURE__ */ jsx(Footer, {
-						contentRef,
-						onToggleExpand
-					}) : null]
-				})]
-			}), allowNavigationResize ? /* @__PURE__ */ jsx("div", {
-				className: navigationStyle.slider,
-				"data-testid": "slider",
-				ref: sliderRef
-			}) : null]
-		});
-	};
-});
+				const mousedown = (event) => {
+					var _navigationRef$curren;
+					prevX = event.clientX;
+					navRect = (_navigationRef$curren = navigationRef.current) === null || _navigationRef$curren === void 0 ? void 0 : _navigationRef$curren.getBoundingClientRect();
+					if (navigationRef.current) setElementVars(navigationRef.current, { [widthNavigationContainerDuration]: "0" });
+					const mouseup = () => {
+						if (shouldCollapseOnMouseUp || shouldExpandOnMouseUp) {
+							toggleExpand();
+							onToggleExpand === null || onToggleExpand === void 0 || onToggleExpand(!expanded);
+							if (navigationRef.current) setElementVars(navigationRef.current, { [widthNavigationContainerExpanded]: `${clampedWidth}px` });
+						}
+						if (navigationRef.current) {
+							if (!(shouldCollapseOnMouseUp || shouldExpandOnMouseUp)) {
+								onWidthResize === null || onWidthResize === void 0 || onWidthResize(navigationRef.current.offsetWidth);
+								setWidth === null || setWidth === void 0 || setWidth(navigationRef.current.offsetWidth);
+							}
+							if (!expanded) navigationRef.current.style.width = "";
+							setElementVars(navigationRef.current, { [widthNavigationContainerDuration]: `${shouldAnimate ? 250 : 0}ms` });
+						}
+						document.removeEventListener("mousemove", mouseMove);
+						window.removeEventListener("mouseup", mouseup);
+					};
+					document.addEventListener("mousemove", mouseMove);
+					window.addEventListener("mouseup", mouseup);
+				};
+				const sliderRefCurrent = sliderRef.current;
+				sliderRefCurrent === null || sliderRefCurrent === void 0 || sliderRefCurrent.addEventListener("mousedown", mousedown);
+				return () => {
+					sliderRefCurrent === null || sliderRefCurrent === void 0 || sliderRefCurrent.removeEventListener("mousedown", mousedown);
+				};
+			}, [
+				expanded,
+				navigationRef,
+				onToggleExpand,
+				onWidthResize,
+				setWidth,
+				toggleExpand,
+				shouldAnimate,
+				clampedWidth
+			]);
+			return /* @__PURE__ */ jsxs("nav", {
+				className: cn(className, navigationStyle.navigation),
+				"data-testid": dataTestId,
+				id,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: navigationStyle.container(),
+					ref: navigationRef,
+					style: assignInlineVars({
+						[widthNavigationContainer]: `${expanded ? clampedWidth : 64}px`,
+						[widthNavigationContainerExpanded]: `${clampedWidth}px`,
+						[widthNavigationContainerDuration]: `${shouldAnimate ? 250 : 0}ms`
+					}),
+					children: [logo ? /* @__PURE__ */ jsx(Header, { logo }) : null, /* @__PURE__ */ jsxs("div", {
+						className: cn(navigationStyle.contentContainer),
+						children: [/* @__PURE__ */ jsx(Stack, {
+							className: navigationStyle.content({ collapsed: !expanded }),
+							gap: .25,
+							ref: contentRef,
+							children
+						}), allowNavigationResize ? /* @__PURE__ */ jsx(Footer, {
+							contentRef,
+							onToggleExpand
+						}) : null]
+					})]
+				}), allowNavigationResize ? /* @__PURE__ */ jsx("div", {
+					className: navigationStyle.slider,
+					"data-testid": "slider",
+					ref: sliderRef
+				}) : null]
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_NavigationContent();