@cube-dev/ui-kit 0.182.0 → 0.183.0

package/dist/components/content/Layout/hooks/useTinyScrollbar.js

@@ -1,141 +1,228 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
-import { useCallback, useEffect, useRef, useState } from "react";
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+import { c } from "react-compiler-runtime";
+import { useEffect, useRef, useState } from "react";
 
 //#region src/components/content/Layout/hooks/useTinyScrollbar.ts
 const MIN_HANDLE_SIZE = 20;
 const SCROLL_VISIBILITY_DURATION = 1e3;
 const OVERFLOW_THRESHOLD = 2;
 function useTinyScrollbar(ref, enabled) {
-	const [scrollState, setScrollState] = useState({
-		hasOverflowY: false,
-		hasOverflowX: false,
-		scrollTop: 0,
-		scrollLeft: 0,
-		scrollHeight: 0,
-		scrollWidth: 0,
-		clientHeight: 0,
-		clientWidth: 0
-	});
+	const $ = c(34);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			hasOverflowY: false,
+			hasOverflowX: false,
+			scrollTop: 0,
+			scrollLeft: 0,
+			scrollHeight: 0,
+			scrollWidth: 0,
+			clientHeight: 0,
+			clientWidth: 0
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const [scrollState, setScrollState] = useState(t0);
 	const [isScrolling, setIsScrolling] = useState(false);
 	const scrollTimeoutRef = useRef(null);
 	const resizeFrameRef = useRef(null);
-	const updateScrollState = useCallback(() => {
-		const element = ref.current;
-		if (!element) return;
-		const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = element;
-		const hasOverflowY = scrollHeight > clientHeight + OVERFLOW_THRESHOLD;
-		const hasOverflowX = scrollWidth > clientWidth + OVERFLOW_THRESHOLD;
-		setScrollState((prev) => {
-			if (prev.hasOverflowY === hasOverflowY && prev.hasOverflowX === hasOverflowX && prev.scrollTop === scrollTop && prev.scrollLeft === scrollLeft && prev.scrollHeight === scrollHeight && prev.scrollWidth === scrollWidth && prev.clientHeight === clientHeight && prev.clientWidth === clientWidth) return prev;
-			return {
-				hasOverflowY,
-				hasOverflowX,
-				scrollTop,
-				scrollLeft,
-				scrollHeight,
-				scrollWidth,
-				clientHeight,
-				clientWidth
-			};
-		});
-	}, [ref]);
-	useEffect(() => {
-		if (!enabled) return;
-		const element = ref.current;
-		if (!element) return;
-		updateScrollState();
-		const showScrollbarBriefly = () => {
-			setIsScrolling(true);
-			if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
-			scrollTimeoutRef.current = setTimeout(() => {
-				setIsScrolling(false);
-			}, SCROLL_VISIBILITY_DURATION);
+	let t1;
+	if ($[1] !== ref) {
+		t1 = () => {
+			const element = ref.current;
+			if (!element) return;
+			const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = element;
+			const hasOverflowY = scrollHeight > clientHeight + OVERFLOW_THRESHOLD;
+			const hasOverflowX = scrollWidth > clientWidth + OVERFLOW_THRESHOLD;
+			setScrollState((prev) => {
+				if (prev.hasOverflowY === hasOverflowY && prev.hasOverflowX === hasOverflowX && prev.scrollTop === scrollTop && prev.scrollLeft === scrollLeft && prev.scrollHeight === scrollHeight && prev.scrollWidth === scrollWidth && prev.clientHeight === clientHeight && prev.clientWidth === clientWidth) return prev;
+				return {
+					hasOverflowY,
+					hasOverflowX,
+					scrollTop,
+					scrollLeft,
+					scrollHeight,
+					scrollWidth,
+					clientHeight,
+					clientWidth
+				};
+			});
 		};
-		const handleScroll = () => {
+		$[1] = ref;
+		$[2] = t1;
+	} else t1 = $[2];
+	const updateScrollState = t1;
+	let t2;
+	let t3;
+	if ($[3] !== enabled || $[4] !== ref || $[5] !== updateScrollState) {
+		t2 = () => {
+			if (!enabled) return;
+			const element_0 = ref.current;
+			if (!element_0) return;
 			updateScrollState();
-			showScrollbarBriefly();
-		};
-		const handleMouseEnter = () => {
-			showScrollbarBriefly();
-		};
-		element.addEventListener("scroll", handleScroll, { passive: true });
-		element.addEventListener("mouseenter", handleMouseEnter);
-		const resizeObserver = new ResizeObserver(() => {
-			if (resizeFrameRef.current) cancelAnimationFrame(resizeFrameRef.current);
-			resizeFrameRef.current = requestAnimationFrame(() => {
+			const showScrollbarBriefly = () => {
+				setIsScrolling(true);
+				if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+				scrollTimeoutRef.current = setTimeout(() => {
+					setIsScrolling(false);
+				}, SCROLL_VISIBILITY_DURATION);
+			};
+			const handleScroll = () => {
 				updateScrollState();
 				showScrollbarBriefly();
+			};
+			const handleMouseEnter = () => {
+				showScrollbarBriefly();
+			};
+			element_0.addEventListener("scroll", handleScroll, { passive: true });
+			element_0.addEventListener("mouseenter", handleMouseEnter);
+			const resizeObserver = new ResizeObserver(() => {
+				if (resizeFrameRef.current) cancelAnimationFrame(resizeFrameRef.current);
+				resizeFrameRef.current = requestAnimationFrame(() => {
+					updateScrollState();
+					showScrollbarBriefly();
+				});
 			});
-		});
-		resizeObserver.observe(element);
-		return () => {
-			element.removeEventListener("scroll", handleScroll);
-			element.removeEventListener("mouseenter", handleMouseEnter);
-			resizeObserver.disconnect();
-			if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
-			if (resizeFrameRef.current) cancelAnimationFrame(resizeFrameRef.current);
+			resizeObserver.observe(element_0);
+			return () => {
+				element_0.removeEventListener("scroll", handleScroll);
+				element_0.removeEventListener("mouseenter", handleMouseEnter);
+				resizeObserver.disconnect();
+				if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+				if (resizeFrameRef.current) cancelAnimationFrame(resizeFrameRef.current);
+			};
 		};
-	}, [
-		enabled,
-		ref,
-		updateScrollState
-	]);
-	const calculateVHandle = useCallback(() => {
-		const { scrollHeight, clientHeight, scrollTop, hasOverflowY } = scrollState;
-		if (!hasOverflowY || !enabled) return {
-			top: 0,
-			height: 0
+		t3 = [
+			enabled,
+			ref,
+			updateScrollState
+		];
+		$[3] = enabled;
+		$[4] = ref;
+		$[5] = updateScrollState;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t2 = $[6];
+		t3 = $[7];
+	}
+	useEffect(t2, t3);
+	let t4;
+	if ($[8] !== enabled || $[9] !== scrollState) {
+		t4 = () => {
+			const { scrollHeight: scrollHeight_0, clientHeight: clientHeight_0, scrollTop: scrollTop_0, hasOverflowY: hasOverflowY_0 } = scrollState;
+			if (!hasOverflowY_0 || !enabled) return {
+				top: 0,
+				height: 0
+			};
+			const trackHeight = clientHeight_0 - 2;
+			const ratio = clientHeight_0 / scrollHeight_0;
+			const handleHeight = Math.max(MIN_HANDLE_SIZE, Math.round(trackHeight * ratio));
+			const availableTrack = trackHeight - handleHeight;
+			const scrollRatio = scrollHeight_0 - clientHeight_0 > 0 ? scrollTop_0 / (scrollHeight_0 - clientHeight_0) : 0;
+			return {
+				top: 1 + Math.round(availableTrack * scrollRatio),
+				height: handleHeight
+			};
+		};
+		$[8] = enabled;
+		$[9] = scrollState;
+		$[10] = t4;
+	} else t4 = $[10];
+	const calculateVHandle = t4;
+	let t5;
+	if ($[11] !== enabled || $[12] !== scrollState) {
+		t5 = () => {
+			const { scrollWidth: scrollWidth_0, clientWidth: clientWidth_0, scrollLeft: scrollLeft_0, hasOverflowX: hasOverflowX_0 } = scrollState;
+			if (!hasOverflowX_0 || !enabled) return {
+				left: 0,
+				width: 0
+			};
+			const trackWidth = clientWidth_0 - 2;
+			const ratio_0 = clientWidth_0 / scrollWidth_0;
+			const handleWidth = Math.max(MIN_HANDLE_SIZE, Math.round(trackWidth * ratio_0));
+			const availableTrack_0 = trackWidth - handleWidth;
+			const scrollRatio_0 = scrollWidth_0 - clientWidth_0 > 0 ? scrollLeft_0 / (scrollWidth_0 - clientWidth_0) : 0;
+			return {
+				left: 1 + Math.round(availableTrack_0 * scrollRatio_0),
+				width: handleWidth
+			};
 		};
-		const trackHeight = clientHeight - 2;
-		const ratio = clientHeight / scrollHeight;
-		let handleHeight = Math.max(MIN_HANDLE_SIZE, Math.round(trackHeight * ratio));
-		const availableTrack = trackHeight - handleHeight;
-		const scrollRatio = scrollHeight - clientHeight > 0 ? scrollTop / (scrollHeight - clientHeight) : 0;
-		return {
-			top: 1 + Math.round(availableTrack * scrollRatio),
-			height: handleHeight
+		$[11] = enabled;
+		$[12] = scrollState;
+		$[13] = t5;
+	} else t5 = $[13];
+	const calculateHHandle = t5;
+	let t6;
+	if ($[14] !== calculateVHandle) {
+		t6 = calculateVHandle();
+		$[14] = calculateVHandle;
+		$[15] = t6;
+	} else t6 = $[15];
+	const vHandle = t6;
+	let t7;
+	if ($[16] !== calculateHHandle) {
+		t7 = calculateHHandle();
+		$[16] = calculateHHandle;
+		$[17] = t7;
+	} else t7 = $[17];
+	const hHandle = t7;
+	const { scrollTop: scrollTop_1, scrollLeft: scrollLeft_1, scrollHeight: scrollHeight_1, scrollWidth: scrollWidth_1, clientHeight: clientHeight_1, clientWidth: clientWidth_1, hasOverflowY: hasOverflowY_1, hasOverflowX: hasOverflowX_1 } = scrollState;
+	const isAtStartY = !hasOverflowY_1 || scrollTop_1 <= 0;
+	const isAtEndY = !hasOverflowY_1 || scrollTop_1 >= scrollHeight_1 - clientHeight_1 - 1;
+	const isAtStartX = !hasOverflowX_1 || scrollLeft_1 <= 0;
+	const isAtEndX = !hasOverflowX_1 || scrollLeft_1 >= scrollWidth_1 - clientWidth_1 - 1;
+	const t8 = `${vHandle.top}px`;
+	const t9 = `${vHandle.height}px`;
+	let t10;
+	if ($[18] !== t8 || $[19] !== t9) {
+		t10 = {
+			"--scrollbar-v-top": t8,
+			"--scrollbar-v-height": t9
 		};
-	}, [scrollState, enabled]);
-	const calculateHHandle = useCallback(() => {
-		const { scrollWidth, clientWidth, scrollLeft, hasOverflowX } = scrollState;
-		if (!hasOverflowX || !enabled) return {
-			left: 0,
-			width: 0
+		$[18] = t8;
+		$[19] = t9;
+		$[20] = t10;
+	} else t10 = $[20];
+	const t11 = t10;
+	const t12 = `${hHandle.left}px`;
+	const t13 = `${hHandle.width}px`;
+	let t14;
+	if ($[21] !== t12 || $[22] !== t13) {
+		t14 = {
+			"--scrollbar-h-left": t12,
+			"--scrollbar-h-width": t13
 		};
-		const trackWidth = clientWidth - 2;
-		const ratio = clientWidth / scrollWidth;
-		let handleWidth = Math.max(MIN_HANDLE_SIZE, Math.round(trackWidth * ratio));
-		const availableTrack = trackWidth - handleWidth;
-		const scrollRatio = scrollWidth - clientWidth > 0 ? scrollLeft / (scrollWidth - clientWidth) : 0;
-		return {
-			left: 1 + Math.round(availableTrack * scrollRatio),
-			width: handleWidth
+		$[21] = t12;
+		$[22] = t13;
+		$[23] = t14;
+	} else t14 = $[23];
+	const t15 = t14;
+	let t16;
+	if ($[24] !== isAtEndX || $[25] !== isAtEndY || $[26] !== isAtStartX || $[27] !== isAtStartY || $[28] !== isScrolling || $[29] !== scrollState.hasOverflowX || $[30] !== scrollState.hasOverflowY || $[31] !== t11 || $[32] !== t15) {
+		t16 = {
+			handleVStyle: t11,
+			handleHStyle: t15,
+			hasOverflowY: scrollState.hasOverflowY,
+			hasOverflowX: scrollState.hasOverflowX,
+			isScrolling,
+			isAtStartX,
+			isAtStartY,
+			isAtEndX,
+			isAtEndY
 		};
-	}, [scrollState, enabled]);
-	const vHandle = calculateVHandle();
-	const hHandle = calculateHHandle();
-	const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth, hasOverflowY, hasOverflowX } = scrollState;
-	const isAtStartY = !hasOverflowY || scrollTop <= 0;
-	const isAtEndY = !hasOverflowY || scrollTop >= scrollHeight - clientHeight - 1;
-	const isAtStartX = !hasOverflowX || scrollLeft <= 0;
-	const isAtEndX = !hasOverflowX || scrollLeft >= scrollWidth - clientWidth - 1;
-	return {
-		handleVStyle: {
-			"--scrollbar-v-top": `${vHandle.top}px`,
-			"--scrollbar-v-height": `${vHandle.height}px`
-		},
-		handleHStyle: {
-			"--scrollbar-h-left": `${hHandle.left}px`,
-			"--scrollbar-h-width": `${hHandle.width}px`
-		},
-		hasOverflowY: scrollState.hasOverflowY,
-		hasOverflowX: scrollState.hasOverflowX,
-		isScrolling,
-		isAtStartX,
-		isAtStartY,
-		isAtEndX,
-		isAtEndY
-	};
+		$[24] = isAtEndX;
+		$[25] = isAtEndY;
+		$[26] = isAtStartX;
+		$[27] = isAtStartY;
+		$[28] = isScrolling;
+		$[29] = scrollState.hasOverflowX;
+		$[30] = scrollState.hasOverflowY;
+		$[31] = t11;
+		$[32] = t15;
+		$[33] = t16;
+	} else t16 = $[33];
+	return t16;
 }
 
 //#endregion

package/dist/components/content/Layout/hooks/useTinyScrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTinyScrollbar.js","names":[],"sources":["../../../../../src/components/content/Layout/hooks/useTinyScrollbar.ts"],"sourcesContent":["import {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nexport interface TinyScrollbarState {\n  hasOverflowY: boolean;\n  hasOverflowX: boolean;\n  scrollTop: number;\n  scrollLeft: number;\n  scrollHeight: number;\n  scrollWidth: number;\n  clientHeight: number;\n  clientWidth: number;\n}\n\nexport interface TinyScrollbarResult {\n  handleVStyle: CSSProperties;\n  handleHStyle: CSSProperties;\n  hasOverflowY: boolean;\n  hasOverflowX: boolean;\n  isScrolling: boolean;\n  /** Whether scroll is at the start edge (top for Y, left for X) */\n  isAtStartX: boolean;\n  isAtStartY: boolean;\n  /** Whether scroll is at the end edge (bottom for Y, right for X) */\n  isAtEndX: boolean;\n  isAtEndY: boolean;\n}\n\nconst MIN_HANDLE_SIZE = 20;\nconst SCROLL_VISIBILITY_DURATION = 1000;\n// Threshold to prevent overflow oscillation at boundary\nconst OVERFLOW_THRESHOLD = 2;\n\nexport function useTinyScrollbar(\n  ref: RefObject<HTMLElement | null>,\n  enabled: boolean,\n): TinyScrollbarResult {\n  const [scrollState, setScrollState] = useState<TinyScrollbarState>({\n    hasOverflowY: false,\n    hasOverflowX: false,\n    scrollTop: 0,\n    scrollLeft: 0,\n    scrollHeight: 0,\n    scrollWidth: 0,\n    clientHeight: 0,\n    clientWidth: 0,\n  });\n  const [isScrolling, setIsScrolling] = useState(false);\n  const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const resizeFrameRef = useRef<number | null>(null);\n\n  const updateScrollState = useCallback(() => {\n    const element = ref.current;\n\n    if (!element) return;\n\n    const {\n      scrollTop,\n      scrollLeft,\n      scrollHeight,\n      scrollWidth,\n      clientHeight,\n      clientWidth,\n    } = element;\n\n    // Use threshold to prevent oscillation at overflow boundary\n    const hasOverflowY = scrollHeight > clientHeight + OVERFLOW_THRESHOLD;\n    const hasOverflowX = scrollWidth > clientWidth + OVERFLOW_THRESHOLD;\n\n    setScrollState((prev) => {\n      // Only update if values actually changed to prevent unnecessary re-renders\n      if (\n        prev.hasOverflowY === hasOverflowY &&\n        prev.hasOverflowX === hasOverflowX &&\n        prev.scrollTop === scrollTop &&\n        prev.scrollLeft === scrollLeft &&\n        prev.scrollHeight === scrollHeight &&\n        prev.scrollWidth === scrollWidth &&\n        prev.clientHeight === clientHeight &&\n        prev.clientWidth === clientWidth\n      ) {\n        return prev; // Return same reference to skip re-render\n      }\n\n      return {\n        hasOverflowY,\n        hasOverflowX,\n        scrollTop,\n        scrollLeft,\n        scrollHeight,\n        scrollWidth,\n        clientHeight,\n        clientWidth,\n      };\n    });\n  }, [ref]);\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const element = ref.current;\n\n    if (!element) return;\n\n    // Initial update\n    updateScrollState();\n\n    // Show scrollbar briefly and hide after delay\n    const showScrollbarBriefly = () => {\n      setIsScrolling(true);\n\n      // Clear existing timeout\n      if (scrollTimeoutRef.current) {\n        clearTimeout(scrollTimeoutRef.current);\n      }\n\n      // Hide scrollbar after delay\n      scrollTimeoutRef.current = setTimeout(() => {\n        setIsScrolling(false);\n      }, SCROLL_VISIBILITY_DURATION);\n    };\n\n    // Listen for scroll events\n    const handleScroll = () => {\n      updateScrollState();\n      showScrollbarBriefly();\n    };\n\n    // Show scrollbar briefly when mouse enters the container\n    const handleMouseEnter = () => {\n      showScrollbarBriefly();\n    };\n\n    element.addEventListener('scroll', handleScroll, { passive: true });\n    element.addEventListener('mouseenter', handleMouseEnter);\n\n    // ResizeObserver for content size changes\n    // Uses requestAnimationFrame to coalesce updates and prevent cascading events\n    const resizeObserver = new ResizeObserver(() => {\n      if (resizeFrameRef.current) {\n        cancelAnimationFrame(resizeFrameRef.current);\n      }\n\n      resizeFrameRef.current = requestAnimationFrame(() => {\n        updateScrollState();\n        showScrollbarBriefly();\n      });\n    });\n\n    resizeObserver.observe(element);\n\n    // Note: We intentionally don't observe children to prevent\n    // cascading resize events in nested layouts\n\n    return () => {\n      element.removeEventListener('scroll', handleScroll);\n      element.removeEventListener('mouseenter', handleMouseEnter);\n      resizeObserver.disconnect();\n\n      if (scrollTimeoutRef.current) {\n        clearTimeout(scrollTimeoutRef.current);\n      }\n\n      if (resizeFrameRef.current) {\n        cancelAnimationFrame(resizeFrameRef.current);\n      }\n    };\n  }, [enabled, ref, updateScrollState]);\n\n  // Calculate vertical handle position and size\n  const calculateVHandle = useCallback(() => {\n    const { scrollHeight, clientHeight, scrollTop, hasOverflowY } = scrollState;\n\n    if (!hasOverflowY || !enabled) {\n      return { top: 0, height: 0 };\n    }\n\n    const trackHeight = clientHeight - 2; // 1px padding on each end\n    const ratio = clientHeight / scrollHeight;\n    let handleHeight = Math.max(\n      MIN_HANDLE_SIZE,\n      Math.round(trackHeight * ratio),\n    );\n    const availableTrack = trackHeight - handleHeight;\n    const scrollRatio =\n      scrollHeight - clientHeight > 0\n        ? scrollTop / (scrollHeight - clientHeight)\n        : 0;\n    const handleTop = 1 + Math.round(availableTrack * scrollRatio);\n\n    return { top: handleTop, height: handleHeight };\n  }, [scrollState, enabled]);\n\n  // Calculate horizontal handle position and size\n  const calculateHHandle = useCallback(() => {\n    const { scrollWidth, clientWidth, scrollLeft, hasOverflowX } = scrollState;\n\n    if (!hasOverflowX || !enabled) {\n      return { left: 0, width: 0 };\n    }\n\n    const trackWidth = clientWidth - 2; // 1px padding on each end\n    const ratio = clientWidth / scrollWidth;\n    let handleWidth = Math.max(MIN_HANDLE_SIZE, Math.round(trackWidth * ratio));\n    const availableTrack = trackWidth - handleWidth;\n    const scrollRatio =\n      scrollWidth - clientWidth > 0\n        ? scrollLeft / (scrollWidth - clientWidth)\n        : 0;\n    const handleLeft = 1 + Math.round(availableTrack * scrollRatio);\n\n    return { left: handleLeft, width: handleWidth };\n  }, [scrollState, enabled]);\n\n  const vHandle = calculateVHandle();\n  const hHandle = calculateHHandle();\n\n  // Calculate edge detection\n  const {\n    scrollTop,\n    scrollLeft,\n    scrollHeight,\n    scrollWidth,\n    clientHeight,\n    clientWidth,\n    hasOverflowY,\n    hasOverflowX,\n  } = scrollState;\n\n  // For Y axis: at start if scrollTop is 0, at end if scrolled to bottom\n  const isAtStartY = !hasOverflowY || scrollTop <= 0;\n  const isAtEndY =\n    !hasOverflowY || scrollTop >= scrollHeight - clientHeight - 1;\n\n  // For X axis: at start if scrollLeft is 0, at end if scrolled to right\n  const isAtStartX = !hasOverflowX || scrollLeft <= 0;\n  const isAtEndX = !hasOverflowX || scrollLeft >= scrollWidth - clientWidth - 1;\n\n  return {\n    handleVStyle: {\n      '--scrollbar-v-top': `${vHandle.top}px`,\n      '--scrollbar-v-height': `${vHandle.height}px`,\n    } as CSSProperties,\n    handleHStyle: {\n      '--scrollbar-h-left': `${hHandle.left}px`,\n      '--scrollbar-h-width': `${hHandle.width}px`,\n    } as CSSProperties,\n    hasOverflowY: scrollState.hasOverflowY,\n    hasOverflowX: scrollState.hasOverflowX,\n    isScrolling,\n    isAtStartX,\n    isAtStartY,\n    isAtEndX,\n    isAtEndY,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useTinyScrollbar.js","names":["CSSProperties","RefObject","useCallback","useEffect","useRef","useState","TinyScrollbarState","hasOverflowY","hasOverflowX","scrollTop","scrollLeft","scrollHeight","scrollWidth","clientHeight","clientWidth","TinyScrollbarResult","handleVStyle","handleHStyle","isScrolling","isAtStartX","isAtStartY","isAtEndX","isAtEndY","MIN_HANDLE_SIZE","SCROLL_VISIBILITY_DURATION","OVERFLOW_THRESHOLD","useTinyScrollbar","ref","enabled","$","_c","t0","Symbol","for","scrollState","setScrollState","setIsScrolling","scrollTimeoutRef","resizeFrameRef","t1","element","current","prev","updateScrollState","t2","t3","element_0","showScrollbarBriefly","clearTimeout","setTimeout","handleScroll","handleMouseEnter","addEventListener","passive","resizeObserver","ResizeObserver","cancelAnimationFrame","requestAnimationFrame","observe","removeEventListener","disconnect","t4","scrollHeight_0","clientHeight_0","scrollTop_0","hasOverflowY_0","top","height","trackHeight","ratio","handleHeight","Math","max","round","availableTrack","scrollRatio","handleTop","calculateVHandle","t5","scrollWidth_0","clientWidth_0","scrollLeft_0","hasOverflowX_0","left","width","trackWidth","ratio_0","handleWidth","availableTrack_0","scrollRatio_0","handleLeft","calculateHHandle","t6","vHandle","t7","hHandle","scrollTop_1","scrollLeft_1","scrollHeight_1","scrollWidth_1","clientHeight_1","clientWidth_1","hasOverflowY_1","hasOverflowX_1","t8","t9","t10","t11","t12","t13","t14","t15","t16"],"sources":["../../../../../src/components/content/Layout/hooks/useTinyScrollbar.ts"],"sourcesContent":["import {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nexport interface TinyScrollbarState {\n  hasOverflowY: boolean;\n  hasOverflowX: boolean;\n  scrollTop: number;\n  scrollLeft: number;\n  scrollHeight: number;\n  scrollWidth: number;\n  clientHeight: number;\n  clientWidth: number;\n}\n\nexport interface TinyScrollbarResult {\n  handleVStyle: CSSProperties;\n  handleHStyle: CSSProperties;\n  hasOverflowY: boolean;\n  hasOverflowX: boolean;\n  isScrolling: boolean;\n  /** Whether scroll is at the start edge (top for Y, left for X) */\n  isAtStartX: boolean;\n  isAtStartY: boolean;\n  /** Whether scroll is at the end edge (bottom for Y, right for X) */\n  isAtEndX: boolean;\n  isAtEndY: boolean;\n}\n\nconst MIN_HANDLE_SIZE = 20;\nconst SCROLL_VISIBILITY_DURATION = 1000;\n// Threshold to prevent overflow oscillation at boundary\nconst OVERFLOW_THRESHOLD = 2;\n\nexport function useTinyScrollbar(\n  ref: RefObject<HTMLElement | null>,\n  enabled: boolean,\n): TinyScrollbarResult {\n  const [scrollState, setScrollState] = useState<TinyScrollbarState>({\n    hasOverflowY: false,\n    hasOverflowX: false,\n    scrollTop: 0,\n    scrollLeft: 0,\n    scrollHeight: 0,\n    scrollWidth: 0,\n    clientHeight: 0,\n    clientWidth: 0,\n  });\n  const [isScrolling, setIsScrolling] = useState(false);\n  const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const resizeFrameRef = useRef<number | null>(null);\n\n  const updateScrollState = useCallback(() => {\n    const element = ref.current;\n\n    if (!element) return;\n\n    const {\n      scrollTop,\n      scrollLeft,\n      scrollHeight,\n      scrollWidth,\n      clientHeight,\n      clientWidth,\n    } = element;\n\n    // Use threshold to prevent oscillation at overflow boundary\n    const hasOverflowY = scrollHeight > clientHeight + OVERFLOW_THRESHOLD;\n    const hasOverflowX = scrollWidth > clientWidth + OVERFLOW_THRESHOLD;\n\n    setScrollState((prev) => {\n      // Only update if values actually changed to prevent unnecessary re-renders\n      if (\n        prev.hasOverflowY === hasOverflowY &&\n        prev.hasOverflowX === hasOverflowX &&\n        prev.scrollTop === scrollTop &&\n        prev.scrollLeft === scrollLeft &&\n        prev.scrollHeight === scrollHeight &&\n        prev.scrollWidth === scrollWidth &&\n        prev.clientHeight === clientHeight &&\n        prev.clientWidth === clientWidth\n      ) {\n        return prev; // Return same reference to skip re-render\n      }\n\n      return {\n        hasOverflowY,\n        hasOverflowX,\n        scrollTop,\n        scrollLeft,\n        scrollHeight,\n        scrollWidth,\n        clientHeight,\n        clientWidth,\n      };\n    });\n  }, [ref]);\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const element = ref.current;\n\n    if (!element) return;\n\n    // Initial update\n    updateScrollState();\n\n    // Show scrollbar briefly and hide after delay\n    const showScrollbarBriefly = () => {\n      setIsScrolling(true);\n\n      // Clear existing timeout\n      if (scrollTimeoutRef.current) {\n        clearTimeout(scrollTimeoutRef.current);\n      }\n\n      // Hide scrollbar after delay\n      scrollTimeoutRef.current = setTimeout(() => {\n        setIsScrolling(false);\n      }, SCROLL_VISIBILITY_DURATION);\n    };\n\n    // Listen for scroll events\n    const handleScroll = () => {\n      updateScrollState();\n      showScrollbarBriefly();\n    };\n\n    // Show scrollbar briefly when mouse enters the container\n    const handleMouseEnter = () => {\n      showScrollbarBriefly();\n    };\n\n    element.addEventListener('scroll', handleScroll, { passive: true });\n    element.addEventListener('mouseenter', handleMouseEnter);\n\n    // ResizeObserver for content size changes\n    // Uses requestAnimationFrame to coalesce updates and prevent cascading events\n    const resizeObserver = new ResizeObserver(() => {\n      if (resizeFrameRef.current) {\n        cancelAnimationFrame(resizeFrameRef.current);\n      }\n\n      resizeFrameRef.current = requestAnimationFrame(() => {\n        updateScrollState();\n        showScrollbarBriefly();\n      });\n    });\n\n    resizeObserver.observe(element);\n\n    // Note: We intentionally don't observe children to prevent\n    // cascading resize events in nested layouts\n\n    return () => {\n      element.removeEventListener('scroll', handleScroll);\n      element.removeEventListener('mouseenter', handleMouseEnter);\n      resizeObserver.disconnect();\n\n      if (scrollTimeoutRef.current) {\n        clearTimeout(scrollTimeoutRef.current);\n      }\n\n      if (resizeFrameRef.current) {\n        cancelAnimationFrame(resizeFrameRef.current);\n      }\n    };\n  }, [enabled, ref, updateScrollState]);\n\n  // Calculate vertical handle position and size\n  const calculateVHandle = useCallback(() => {\n    const { scrollHeight, clientHeight, scrollTop, hasOverflowY } = scrollState;\n\n    if (!hasOverflowY || !enabled) {\n      return { top: 0, height: 0 };\n    }\n\n    const trackHeight = clientHeight - 2; // 1px padding on each end\n    const ratio = clientHeight / scrollHeight;\n    let handleHeight = Math.max(\n      MIN_HANDLE_SIZE,\n      Math.round(trackHeight * ratio),\n    );\n    const availableTrack = trackHeight - handleHeight;\n    const scrollRatio =\n      scrollHeight - clientHeight > 0\n        ? scrollTop / (scrollHeight - clientHeight)\n        : 0;\n    const handleTop = 1 + Math.round(availableTrack * scrollRatio);\n\n    return { top: handleTop, height: handleHeight };\n  }, [scrollState, enabled]);\n\n  // Calculate horizontal handle position and size\n  const calculateHHandle = useCallback(() => {\n    const { scrollWidth, clientWidth, scrollLeft, hasOverflowX } = scrollState;\n\n    if (!hasOverflowX || !enabled) {\n      return { left: 0, width: 0 };\n    }\n\n    const trackWidth = clientWidth - 2; // 1px padding on each end\n    const ratio = clientWidth / scrollWidth;\n    let handleWidth = Math.max(MIN_HANDLE_SIZE, Math.round(trackWidth * ratio));\n    const availableTrack = trackWidth - handleWidth;\n    const scrollRatio =\n      scrollWidth - clientWidth > 0\n        ? scrollLeft / (scrollWidth - clientWidth)\n        : 0;\n    const handleLeft = 1 + Math.round(availableTrack * scrollRatio);\n\n    return { left: handleLeft, width: handleWidth };\n  }, [scrollState, enabled]);\n\n  const vHandle = calculateVHandle();\n  const hHandle = calculateHHandle();\n\n  // Calculate edge detection\n  const {\n    scrollTop,\n    scrollLeft,\n    scrollHeight,\n    scrollWidth,\n    clientHeight,\n    clientWidth,\n    hasOverflowY,\n    hasOverflowX,\n  } = scrollState;\n\n  // For Y axis: at start if scrollTop is 0, at end if scrolled to bottom\n  const isAtStartY = !hasOverflowY || scrollTop <= 0;\n  const isAtEndY =\n    !hasOverflowY || scrollTop >= scrollHeight - clientHeight - 1;\n\n  // For X axis: at start if scrollLeft is 0, at end if scrolled to right\n  const isAtStartX = !hasOverflowX || scrollLeft <= 0;\n  const isAtEndX = !hasOverflowX || scrollLeft >= scrollWidth - clientWidth - 1;\n\n  return {\n    handleVStyle: {\n      '--scrollbar-v-top': `${vHandle.top}px`,\n      '--scrollbar-v-height': `${vHandle.height}px`,\n    } as CSSProperties,\n    handleHStyle: {\n      '--scrollbar-h-left': `${hHandle.left}px`,\n      '--scrollbar-h-width': `${hHandle.width}px`,\n    } as CSSProperties,\n    hasOverflowY: scrollState.hasOverflowY,\n    hasOverflowX: scrollState.hasOverflowX,\n    isScrolling,\n    isAtStartX,\n    isAtStartY,\n    isAtEndX,\n    isAtEndY,\n  };\n}\n"],"mappings":"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"}

package/dist/components/content/Layout/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { LayoutActionsContext, LayoutContextReset, LayoutPanelContext, LayoutRefsContext, LayoutStateContext, useLayoutActionsContext, useLayoutPanelContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
 import { _Layout } from "./Layout.js";
 import { _LayoutContent } from "./LayoutContent.js";

package/dist/components/content/Layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["LayoutBase","LayoutToolbar","LayoutHeader","LayoutFooter","LayoutContent","LayoutContainer","LayoutCenter","LayoutBlock","LayoutFlex","LayoutGrid","LayoutPane","LayoutPanel","LayoutPanelHeader"],"sources":["../../../../src/components/content/Layout/index.tsx"],"sourcesContent":["import { ForwardRefExoticComponent, RefAttributes } from 'react';\n\nimport { CubeLayoutProps, Layout as LayoutBase } from './Layout';\nimport { LayoutBlock } from './LayoutBlock';\nimport { LayoutCenter } from './LayoutCenter';\nimport { LayoutContainer } from './LayoutContainer';\nimport { LayoutContent } from './LayoutContent';\nimport { LayoutFlex } from './LayoutFlex';\nimport { LayoutFooter } from './LayoutFooter';\nimport { LayoutGrid } from './LayoutGrid';\nimport { LayoutHeader } from './LayoutHeader';\nimport { LayoutPane } from './LayoutPane';\nimport { LayoutPanel } from './LayoutPanel';\nimport { LayoutPanelHeader } from './LayoutPanelHeader';\nimport { LayoutToolbar } from './LayoutToolbar';\n\nexport { GridLayout } from './GridLayout';\nexport type { CubeGridLayoutProps } from './GridLayout';\nexport type { CubeLayoutProps } from './Layout';\nexport type { CubeLayoutBlockProps } from './LayoutBlock';\nexport type { CubeLayoutCenterProps } from './LayoutCenter';\nexport type { CubeLayoutContainerProps } from './LayoutContainer';\nexport type { CubeLayoutContentProps, ScrollbarType } from './LayoutContent';\nexport type { CubeLayoutFlexProps } from './LayoutFlex';\nexport type { CubeLayoutGridProps } from './LayoutGrid';\nexport type { CubeLayoutFooterProps } from './LayoutFooter';\nexport type { CubeLayoutHeaderProps } from './LayoutHeader';\nexport type { CubeLayoutPaneProps, ResizeEdge } from './LayoutPane';\nexport type { CubeLayoutPanelProps, LayoutPanelMode } from './LayoutPanel';\nexport type { CubeLayoutPanelHeaderProps } from './LayoutPanelHeader';\nexport type { CubeLayoutToolbarProps } from './LayoutToolbar';\nexport {\n  LayoutActionsContext,\n  LayoutStateContext,\n  LayoutRefsContext,\n  LayoutPanelContext,\n  LayoutContextReset,\n  useLayoutActionsContext,\n  useLayoutStateContext,\n  useLayoutRefsContext,\n  useLayoutPanelContext,\n  useLayoutContext,\n} from './LayoutContext';\nexport type {\n  LayoutActionsContextValue,\n  LayoutStateContextValue,\n  LayoutRefsContextValue,\n  LayoutPanelContextValue,\n  LayoutContextValue,\n  Side,\n} from './LayoutContext';\n\n// Create Layout compound component\ninterface LayoutComponent\n  extends ForwardRefExoticComponent<\n    CubeLayoutProps & RefAttributes<HTMLDivElement>\n  > {\n  Toolbar: typeof LayoutToolbar;\n  Header: typeof LayoutHeader;\n  Footer: typeof LayoutFooter;\n  Content: typeof LayoutContent;\n  Container: typeof LayoutContainer;\n  Center: typeof LayoutCenter;\n  Block: typeof LayoutBlock;\n  Flex: typeof LayoutFlex;\n  Grid: typeof LayoutGrid;\n  Pane: typeof LayoutPane;\n  Panel: typeof LayoutPanel;\n  PanelHeader: typeof LayoutPanelHeader;\n}\n\nconst Layout = Object.assign(LayoutBase, {\n  Toolbar: LayoutToolbar,\n  Header: LayoutHeader,\n  Footer: LayoutFooter,\n  Content: LayoutContent,\n  Container: LayoutContainer,\n  Center: LayoutCenter,\n  Block: LayoutBlock,\n  Flex: LayoutFlex,\n  Grid: LayoutGrid,\n  Pane: LayoutPane,\n  Panel: LayoutPanel,\n  PanelHeader: LayoutPanelHeader,\n}) as LayoutComponent;\n\nexport { Layout };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuEA,MAAM,SAAS,OAAO,OAAOA,SAAY;CACvC,SAASC;CACT,QAAQC;CACR,QAAQC;CACR,SAASC;CACT,WAAWC;CACX,QAAQC;CACR,OAAOC;CACP,MAAMC;CACN,MAAMC;CACN,MAAMC;CACN,OAAOC;CACP,aAAaC;CACd,CAAC"}
+{"version":3,"file":"index.js","names":["ForwardRefExoticComponent","RefAttributes","CubeLayoutProps","Layout","LayoutBase","LayoutBlock","LayoutCenter","LayoutContainer","LayoutContent","LayoutFlex","LayoutFooter","LayoutGrid","LayoutHeader","LayoutPane","LayoutPanel","LayoutPanelHeader","LayoutToolbar","GridLayout","CubeGridLayoutProps","CubeLayoutBlockProps","CubeLayoutCenterProps","CubeLayoutContainerProps","CubeLayoutContentProps","ScrollbarType","CubeLayoutFlexProps","CubeLayoutGridProps","CubeLayoutFooterProps","CubeLayoutHeaderProps","CubeLayoutPaneProps","ResizeEdge","CubeLayoutPanelProps","LayoutPanelMode","CubeLayoutPanelHeaderProps","CubeLayoutToolbarProps","LayoutActionsContext","LayoutStateContext","LayoutRefsContext","LayoutPanelContext","LayoutContextReset","useLayoutActionsContext","useLayoutStateContext","useLayoutRefsContext","useLayoutPanelContext","useLayoutContext","LayoutActionsContextValue","LayoutStateContextValue","LayoutRefsContextValue","LayoutPanelContextValue","LayoutContextValue","Side","LayoutComponent","HTMLDivElement","Toolbar","Header","Footer","Content","Container","Center","Block","Flex","Grid","Pane","Panel","PanelHeader","Object","assign"],"sources":["../../../../src/components/content/Layout/index.tsx"],"sourcesContent":["import { ForwardRefExoticComponent, RefAttributes } from 'react';\n\nimport { CubeLayoutProps, Layout as LayoutBase } from './Layout';\nimport { LayoutBlock } from './LayoutBlock';\nimport { LayoutCenter } from './LayoutCenter';\nimport { LayoutContainer } from './LayoutContainer';\nimport { LayoutContent } from './LayoutContent';\nimport { LayoutFlex } from './LayoutFlex';\nimport { LayoutFooter } from './LayoutFooter';\nimport { LayoutGrid } from './LayoutGrid';\nimport { LayoutHeader } from './LayoutHeader';\nimport { LayoutPane } from './LayoutPane';\nimport { LayoutPanel } from './LayoutPanel';\nimport { LayoutPanelHeader } from './LayoutPanelHeader';\nimport { LayoutToolbar } from './LayoutToolbar';\n\nexport { GridLayout } from './GridLayout';\nexport type { CubeGridLayoutProps } from './GridLayout';\nexport type { CubeLayoutProps } from './Layout';\nexport type { CubeLayoutBlockProps } from './LayoutBlock';\nexport type { CubeLayoutCenterProps } from './LayoutCenter';\nexport type { CubeLayoutContainerProps } from './LayoutContainer';\nexport type { CubeLayoutContentProps, ScrollbarType } from './LayoutContent';\nexport type { CubeLayoutFlexProps } from './LayoutFlex';\nexport type { CubeLayoutGridProps } from './LayoutGrid';\nexport type { CubeLayoutFooterProps } from './LayoutFooter';\nexport type { CubeLayoutHeaderProps } from './LayoutHeader';\nexport type { CubeLayoutPaneProps, ResizeEdge } from './LayoutPane';\nexport type { CubeLayoutPanelProps, LayoutPanelMode } from './LayoutPanel';\nexport type { CubeLayoutPanelHeaderProps } from './LayoutPanelHeader';\nexport type { CubeLayoutToolbarProps } from './LayoutToolbar';\nexport {\n  LayoutActionsContext,\n  LayoutStateContext,\n  LayoutRefsContext,\n  LayoutPanelContext,\n  LayoutContextReset,\n  useLayoutActionsContext,\n  useLayoutStateContext,\n  useLayoutRefsContext,\n  useLayoutPanelContext,\n  useLayoutContext,\n} from './LayoutContext';\nexport type {\n  LayoutActionsContextValue,\n  LayoutStateContextValue,\n  LayoutRefsContextValue,\n  LayoutPanelContextValue,\n  LayoutContextValue,\n  Side,\n} from './LayoutContext';\n\n// Create Layout compound component\ninterface LayoutComponent\n  extends ForwardRefExoticComponent<\n    CubeLayoutProps & RefAttributes<HTMLDivElement>\n  > {\n  Toolbar: typeof LayoutToolbar;\n  Header: typeof LayoutHeader;\n  Footer: typeof LayoutFooter;\n  Content: typeof LayoutContent;\n  Container: typeof LayoutContainer;\n  Center: typeof LayoutCenter;\n  Block: typeof LayoutBlock;\n  Flex: typeof LayoutFlex;\n  Grid: typeof LayoutGrid;\n  Pane: typeof LayoutPane;\n  Panel: typeof LayoutPanel;\n  PanelHeader: typeof LayoutPanelHeader;\n}\n\nconst Layout = Object.assign(LayoutBase, {\n  Toolbar: LayoutToolbar,\n  Header: LayoutHeader,\n  Footer: LayoutFooter,\n  Content: LayoutContent,\n  Container: LayoutContainer,\n  Center: LayoutCenter,\n  Block: LayoutBlock,\n  Flex: LayoutFlex,\n  Grid: LayoutGrid,\n  Pane: LayoutPane,\n  Panel: LayoutPanel,\n  PanelHeader: LayoutPanelHeader,\n}) as LayoutComponent;\n\nexport { Layout };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuEA,MAAMG,SAAS6D,OAAOC,OAAO7D,SAAY;CACvCgD,SAASpC;CACTqC,QAAQzC;CACR0C,QAAQ5C;CACR6C,SAAS/C;CACTgD,WAAWjD;CACXkD,QAAQnD;CACRoD,OAAOrD;CACPsD,MAAMlD;CACNmD,MAAMjD;CACNkD,MAAMhD;CACNiD,OAAOhD;CACPiD,aAAahD;CACd,CAAC"}

package/dist/components/content/Layout/utils.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 //#region src/components/content/Layout/utils.ts
 /**
 * Clamps a size value within min/max constraints.

package/dist/components/content/Layout/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/components/content/Layout/utils.ts"],"sourcesContent":["import type { Side } from './LayoutContext';\n\n/**\n * Clamps a size value within min/max constraints.\n * Handles both number and string constraint values (only numbers are applied).\n */\nexport function clampSize(\n  value: number,\n  minSize?: number | string,\n  maxSize?: number | string,\n  naturalMax?: number,\n): number {\n  let result = value;\n\n  let effectiveMax: number | undefined;\n\n  if (typeof maxSize === 'number') {\n    effectiveMax = maxSize;\n  }\n\n  if (naturalMax != null && naturalMax >= 0) {\n    effectiveMax =\n      effectiveMax != null ? Math.min(effectiveMax, naturalMax) : naturalMax;\n  }\n\n  if (effectiveMax != null) {\n    result = Math.min(effectiveMax, result);\n  }\n\n  if (typeof minSize === 'number') {\n    result = Math.max(minSize, result);\n  }\n\n  return Math.max(result, 0);\n}\n\nconst OPPOSITE_SIDES: Record<Side, Side> = {\n  left: 'right',\n  right: 'left',\n  top: 'bottom',\n  bottom: 'top',\n};\n\nexport function getOppositeSide(side: Side): Side {\n  return OPPOSITE_SIDES[side];\n}\n\n/**\n * Resolves a CSS size value (string or number) to pixels.\n * Supports `px` values and percentages (resolved against containerSize).\n * Returns undefined for values that can't be resolved in JS (e.g. `50vw`, `min(...)`, etc.).\n */\nexport function resolveCssSize(\n  value: string | number | undefined,\n  containerSize: number,\n): number | undefined {\n  if (value == null) return undefined;\n\n  if (typeof value === 'number') return value;\n\n  const trimmed = value.trim();\n\n  if (trimmed.endsWith('px')) {\n    const num = parseFloat(trimmed);\n    return Number.isFinite(num) ? num : undefined;\n  }\n\n  if (trimmed.endsWith('%')) {\n    const percent = parseFloat(trimmed);\n    return Number.isFinite(percent)\n      ? (percent / 100) * containerSize\n      : undefined;\n  }\n\n  const num = parseFloat(trimmed);\n  if (String(num) === trimmed && Number.isFinite(num)) return num;\n\n  return undefined;\n}\n"],"mappings":";;;;;;AAMA,SAAgB,UACd,OACA,SACA,SACA,YACQ;CACR,IAAI,SAAS;CAEb,IAAI;AAEJ,KAAI,OAAO,YAAY,SACrB,gBAAe;AAGjB,KAAI,cAAc,QAAQ,cAAc,EACtC,gBACE,gBAAgB,OAAO,KAAK,IAAI,cAAc,WAAW,GAAG;AAGhE,KAAI,gBAAgB,KAClB,UAAS,KAAK,IAAI,cAAc,OAAO;AAGzC,KAAI,OAAO,YAAY,SACrB,UAAS,KAAK,IAAI,SAAS,OAAO;AAGpC,QAAO,KAAK,IAAI,QAAQ,EAAE;;AAG5B,MAAM,iBAAqC;CACzC,MAAM;CACN,OAAO;CACP,KAAK;CACL,QAAQ;CACT;AAED,SAAgB,gBAAgB,MAAkB;AAChD,QAAO,eAAe;;;;;;;AAQxB,SAAgB,eACd,OACA,eACoB;AACpB,KAAI,SAAS,KAAM,QAAO;AAE1B,KAAI,OAAO,UAAU,SAAU,QAAO;CAEtC,MAAM,UAAU,MAAM,MAAM;AAE5B,KAAI,QAAQ,SAAS,KAAK,EAAE;EAC1B,MAAM,MAAM,WAAW,QAAQ;AAC/B,SAAO,OAAO,SAAS,IAAI,GAAG,MAAM;;AAGtC,KAAI,QAAQ,SAAS,IAAI,EAAE;EACzB,MAAM,UAAU,WAAW,QAAQ;AACnC,SAAO,OAAO,SAAS,QAAQ,GAC1B,UAAU,MAAO,gBAClB;;CAGN,MAAM,MAAM,WAAW,QAAQ;AAC/B,KAAI,OAAO,IAAI,KAAK,WAAW,OAAO,SAAS,IAAI,CAAE,QAAO"}
+{"version":3,"file":"utils.js","names":["Side","clampSize","value","minSize","maxSize","naturalMax","result","effectiveMax","Math","min","max","OPPOSITE_SIDES","Record","left","right","top","bottom","getOppositeSide","side","resolveCssSize","containerSize","undefined","trimmed","trim","endsWith","num","parseFloat","Number","isFinite","percent","String"],"sources":["../../../../src/components/content/Layout/utils.ts"],"sourcesContent":["import type { Side } from './LayoutContext';\n\n/**\n * Clamps a size value within min/max constraints.\n * Handles both number and string constraint values (only numbers are applied).\n */\nexport function clampSize(\n  value: number,\n  minSize?: number | string,\n  maxSize?: number | string,\n  naturalMax?: number,\n): number {\n  let result = value;\n\n  let effectiveMax: number | undefined;\n\n  if (typeof maxSize === 'number') {\n    effectiveMax = maxSize;\n  }\n\n  if (naturalMax != null && naturalMax >= 0) {\n    effectiveMax =\n      effectiveMax != null ? Math.min(effectiveMax, naturalMax) : naturalMax;\n  }\n\n  if (effectiveMax != null) {\n    result = Math.min(effectiveMax, result);\n  }\n\n  if (typeof minSize === 'number') {\n    result = Math.max(minSize, result);\n  }\n\n  return Math.max(result, 0);\n}\n\nconst OPPOSITE_SIDES: Record<Side, Side> = {\n  left: 'right',\n  right: 'left',\n  top: 'bottom',\n  bottom: 'top',\n};\n\nexport function getOppositeSide(side: Side): Side {\n  return OPPOSITE_SIDES[side];\n}\n\n/**\n * Resolves a CSS size value (string or number) to pixels.\n * Supports `px` values and percentages (resolved against containerSize).\n * Returns undefined for values that can't be resolved in JS (e.g. `50vw`, `min(...)`, etc.).\n */\nexport function resolveCssSize(\n  value: string | number | undefined,\n  containerSize: number,\n): number | undefined {\n  if (value == null) return undefined;\n\n  if (typeof value === 'number') return value;\n\n  const trimmed = value.trim();\n\n  if (trimmed.endsWith('px')) {\n    const num = parseFloat(trimmed);\n    return Number.isFinite(num) ? num : undefined;\n  }\n\n  if (trimmed.endsWith('%')) {\n    const percent = parseFloat(trimmed);\n    return Number.isFinite(percent)\n      ? (percent / 100) * containerSize\n      : undefined;\n  }\n\n  const num = parseFloat(trimmed);\n  if (String(num) === trimmed && Number.isFinite(num)) return num;\n\n  return undefined;\n}\n"],"mappings":";;;;;;AAMA,SAAgBC,UACdC,OACAC,SACAC,SACAC,YACQ;CACR,IAAIC,SAASJ;CAEb,IAAIK;AAEJ,KAAI,OAAOH,YAAY,SACrBG,gBAAeH;AAGjB,KAAIC,cAAc,QAAQA,cAAc,EACtCE,gBACEA,gBAAgB,OAAOC,KAAKC,IAAIF,cAAcF,WAAW,GAAGA;AAGhE,KAAIE,gBAAgB,KAClBD,UAASE,KAAKC,IAAIF,cAAcD,OAAO;AAGzC,KAAI,OAAOH,YAAY,SACrBG,UAASE,KAAKE,IAAIP,SAASG,OAAO;AAGpC,QAAOE,KAAKE,IAAIJ,QAAQ,EAAE;;AAG5B,MAAMK,iBAAqC;CACzCE,MAAM;CACNC,OAAO;CACPC,KAAK;CACLC,QAAQ;CACT;AAED,SAAgBC,gBAAgBC,MAAkB;AAChD,QAAOP,eAAeO;;;;;;;AAQxB,SAAgBC,eACdjB,OACAkB,eACoB;AACpB,KAAIlB,SAAS,KAAM,QAAOmB;AAE1B,KAAI,OAAOnB,UAAU,SAAU,QAAOA;CAEtC,MAAMoB,UAAUpB,MAAMqB,MAAM;AAE5B,KAAID,QAAQE,SAAS,KAAK,EAAE;EAC1B,MAAMC,MAAMC,WAAWJ,QAAQ;AAC/B,SAAOK,OAAOC,SAASH,IAAI,GAAGA,MAAMJ;;AAGtC,KAAIC,QAAQE,SAAS,IAAI,EAAE;EACzB,MAAMK,UAAUH,WAAWJ,QAAQ;AACnC,SAAOK,OAAOC,SAASC,QAAQ,GAC1BA,UAAU,MAAOT,gBAClBC;;CAGN,MAAMI,MAAMC,WAAWJ,QAAQ;AAC/B,KAAIQ,OAAOL,IAAI,KAAKH,WAAWK,OAAOC,SAASH,IAAI,CAAE,QAAOA"}

package/dist/components/content/Paragraph.js

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { _Text } from "./Text.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, TEXT_STYLES } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -13,14 +14,29 @@ const DEFAULT_STYLES = {
 };
 const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
 const Paragraph = forwardRef(function Paragraph(props, ref) {
-	const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
-	return /* @__PURE__ */ jsx(_Text, {
-		as: "p",
-		qa: "Paragraph",
-		...props,
-		ref,
-		styles
-	});
+	const $ = c(6);
+	let t0;
+	if ($[0] !== props) {
+		t0 = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	const styles = t0;
+	let t1;
+	if ($[2] !== props || $[3] !== ref || $[4] !== styles) {
+		t1 = /* @__PURE__ */ jsx(_Text, {
+			as: "p",
+			qa: "Paragraph",
+			...props,
+			ref,
+			styles
+		});
+		$[2] = props;
+		$[3] = ref;
+		$[4] = styles;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
 });
 
 //#endregion

package/dist/components/content/Paragraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.js","names":["Text"],"sources":["../../../src/components/content/Paragraph.tsx"],"sourcesContent":["import {\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  TEXT_STYLES,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nimport { CubeTextProps, Text } from './Text';\n\nconst DEFAULT_STYLES: Styles = {\n  preset: 'p3',\n  color: '#dark-02',\n  display: 'block',\n};\n\nconst STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];\n\nexport interface CubeParagraphProps\n  extends CubeTextProps,\n    ContainerStyleProps {}\n\nexport const Paragraph = forwardRef<HTMLElement, CubeParagraphProps>(\n  function Paragraph(props, ref) {\n    const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);\n\n    return <Text as=\"p\" qa=\"Paragraph\" {...props} ref={ref} styles={styles} />;\n  },\n);\n"],"mappings":";;;;;;;;AAYA,MAAM,iBAAyB;CAC7B,QAAQ;CACR,OAAO;CACP,SAAS;CACV;AAED,MAAM,cAAc,CAAC,GAAG,kBAAkB,GAAG,YAAY;AAMzD,MAAa,YAAY,WACvB,SAAS,UAAU,OAAO,KAAK;CAC7B,MAAM,SAAS,cAAc,OAAO,aAAa,eAAe;AAEhE,QAAO,oBAACA;EAAK,IAAG;EAAI,IAAG;EAAY,GAAI;EAAY;EAAa;GAAU;EAE7E"}
+{"version":3,"file":"Paragraph.js","names":["CONTAINER_STYLES","ContainerStyleProps","Styles","TEXT_STYLES","forwardRef","extractStyles","CubeTextProps","Text","DEFAULT_STYLES","preset","color","display","STYLE_PROPS","CubeParagraphProps","Paragraph","HTMLElement","props","ref","$","_c","t0","styles","t1"],"sources":["../../../src/components/content/Paragraph.tsx"],"sourcesContent":["import {\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  TEXT_STYLES,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nimport { CubeTextProps, Text } from './Text';\n\nconst DEFAULT_STYLES: Styles = {\n  preset: 'p3',\n  color: '#dark-02',\n  display: 'block',\n};\n\nconst STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];\n\nexport interface CubeParagraphProps\n  extends CubeTextProps,\n    ContainerStyleProps {}\n\nexport const Paragraph = forwardRef<HTMLElement, CubeParagraphProps>(\n  function Paragraph(props, ref) {\n    const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);\n\n    return <Text as=\"p\" qa=\"Paragraph\" {...props} ref={ref} styles={styles} />;\n  },\n);\n"],"mappings":";;;;;;;;;AAYA,MAAMQ,iBAAyB;CAC7BC,QAAQ;CACRC,OAAO;CACPC,SAAS;CACV;AAED,MAAMC,cAAc,CAAC,GAAGZ,kBAAkB,GAAGG,YAAY;AAMzD,MAAaW,YAAYV,WACvB,SAAAU,UAAAE,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAF,OAAA;AACiBI,OAAAf,cAAcW,OAAOJ,aAAaJ,eAAe;AAAAU,IAAA,KAAAF;AAAAE,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAAhE,MAAAG,SAAeD;CAAkD,IAAAE;AAAA,KAAAJ,EAAA,OAAAF,SAAAE,EAAA,OAAAD,OAAAC,EAAA,OAAAG,QAAA;AAE1DC,OAAA,oBAAC;GAAQ,IAAA;GAAO,IAAA;GAAW,GAAKN;GAAYC;GAAaI;IAAU;AAAAH,IAAA,KAAAF;AAAAE,IAAA,KAAAD;AAAAC,IAAA,KAAAG;AAAAH,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;AAAA,QAAnEI;EAEV"}

package/dist/components/content/Placeholder/Placeholder.js

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useI18n } from "../../../i18n/useI18n.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, keyframes, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -50,23 +51,60 @@ const StyledPlaceholder = tasty({
 	}
 });
 const Placeholder = forwardRef(function Placeholder(allProps, ref) {
-	let { size = "2x", isStatic, circle, ...props } = allProps;
+	const $ = c(15);
+	const { size: t0, isStatic, circle, ...props } = allProps;
+	const size = t0 === void 0 ? "2x" : t0;
 	const { t } = useI18n();
-	let styles = extractStyles(props, CONTAINER_STYLES);
-	return /* @__PURE__ */ jsx(StyledPlaceholder, {
-		role: "region",
-		"aria-label": t("placeholder.contentIsLoading", "Content is loading"),
-		...filterBaseProps(props, { eventProps: true }),
-		ref,
-		mods: {
-			animated: !isStatic,
+	const styles = extractStyles(props, CONTAINER_STYLES);
+	const T0 = StyledPlaceholder;
+	const t1 = "region";
+	let t2;
+	if ($[0] !== t) {
+		t2 = t("placeholder.contentIsLoading", "Content is loading");
+		$[0] = t;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = filterBaseProps(props, { eventProps: true });
+	const t4 = !isStatic;
+	let t5;
+	if ($[2] !== circle || $[3] !== t4) {
+		t5 = {
+			animated: t4,
 			circle
-		},
-		styles: {
+		};
+		$[2] = circle;
+		$[3] = t4;
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== size || $[6] !== styles) {
+		t6 = {
 			height: size,
 			...styles
-		}
-	});
+		};
+		$[5] = size;
+		$[6] = styles;
+		$[7] = t6;
+	} else t6 = $[7];
+	let t7;
+	if ($[8] !== T0 || $[9] !== ref || $[10] !== t2 || $[11] !== t3 || $[12] !== t5 || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			role: t1,
+			"aria-label": t2,
+			...t3,
+			ref,
+			mods: t5,
+			styles: t6
+		});
+		$[8] = T0;
+		$[9] = ref;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	return t7;
 });
 
 //#endregion