@trackunit/react-components 1.10.33 → 1.10.40

package/index.cjs.js

@@ -1726,6 +1726,150 @@ const getWindowSize = () => {
     }
 };
 
+/**
+ * Blocks scrolling on the document and compensates for scrollbar width to prevent layout shift.
+ * Returns the original styles so they can be restored later.
+ *
+ * @returns {OriginalStyles} The original styles before blocking
+ */
+const blockDocumentScroll = () => {
+    const { body } = document;
+    const html = document.documentElement;
+    // Store original values before modifying
+    const originalStyles = {
+        html: {
+            position: html.style.position,
+            overflow: html.style.overflow,
+        },
+        body: {
+            position: body.style.position,
+            overflow: body.style.overflow,
+            paddingRight: body.style.paddingRight,
+        },
+    };
+    // Calculate scrollbar width to prevent layout shift when hiding scrollbar
+    const scrollBarWidth = window.innerWidth - (html.clientWidth || 0);
+    const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
+    // Block scroll on both html and body for cross-browser compatibility
+    html.style.position = "relative";
+    html.style.overflow = "hidden";
+    body.style.position = "relative";
+    body.style.overflow = "hidden";
+    // Preserve existing padding and add scrollbar width to prevent layout shift
+    body.style.paddingRight = `${bodyPaddingRight + scrollBarWidth}px`;
+    return originalStyles;
+};
+/**
+ * Restores document scrolling by restoring the provided original styles.
+ *
+ * @param originalStyles - The original styles to restore
+ */
+const restoreDocumentScroll = (originalStyles) => {
+    const { body } = document;
+    const html = document.documentElement;
+    // Restore original values instead of just clearing
+    if (originalStyles.html) {
+        html.style.position = originalStyles.html.position;
+        html.style.overflow = originalStyles.html.overflow;
+    }
+    if (originalStyles.body) {
+        body.style.position = originalStyles.body.position;
+        body.style.overflow = originalStyles.body.overflow;
+        body.style.paddingRight = originalStyles.body.paddingRight;
+    }
+};
+/**
+ * Blocks scrolling on a custom container element.
+ * Returns the original styles so they can be restored later.
+ *
+ * @param container - The container element to block scroll on
+ * @returns {OriginalStyles} The original styles before blocking
+ */
+const blockContainerScroll = (container) => {
+    const originalStyles = {
+        container: {
+            overflow: container.style.overflow,
+        },
+    };
+    container.style.overflow = "hidden";
+    return originalStyles;
+};
+/**
+ * Restores container scrolling by restoring the provided original styles.
+ *
+ * @param container - The container element to restore scroll on
+ * @param originalStyles - The original styles to restore
+ */
+const restoreContainerScroll = (container, originalStyles) => {
+    if (originalStyles.container) {
+        container.style.overflow = originalStyles.container.overflow;
+    }
+};
+/**
+ * Hook that provides scroll blocking functionality.
+ * This properly accounts for existing body padding to prevent layout shifts.
+ *
+ * Each instance gets its own stored original styles via refs, preventing
+ * conflicts when multiple components are used on the same page. The hook also ensures
+ * cleanup on unmount if scroll is still blocked.
+ *
+ * @param scrollContainer - The DOM element whose scroll should be blocked. Defaults to document.body.
+ * @returns {{blockScroll: () => void, restoreScroll: () => void}} Object containing blockScroll and restoreScroll functions
+ */
+const useScrollBlock = (scrollContainer = typeof document !== "undefined" ? document.body : null // default to document.body if no scroll container is provided
+) => {
+    const originalStylesRef = react.useRef(null);
+    const isBlockedRef = react.useRef(false);
+    /**
+     * Blocks scrolling and stores original styles for restoration.
+     * Blocks the document (body/html) if scroll container is the document body,
+     * or blocks the custom container if a custom container is provided.
+     */
+    const blockScroll = react.useCallback(() => {
+        if (isBlockedRef.current || !scrollContainer) {
+            return; // Already blocked or no scroll container
+        }
+        if (scrollContainer === document.body) {
+            originalStylesRef.current = blockDocumentScroll();
+        }
+        else {
+            originalStylesRef.current = blockContainerScroll(scrollContainer);
+        }
+        isBlockedRef.current = true;
+    }, [scrollContainer]);
+    /**
+     * Restores scrolling using the previously stored original styles.
+     */
+    const restoreScroll = react.useCallback(() => {
+        if (!isBlockedRef.current || !scrollContainer || !originalStylesRef.current) {
+            return;
+        }
+        if (scrollContainer === document.body) {
+            restoreDocumentScroll(originalStylesRef.current);
+        }
+        else {
+            restoreContainerScroll(scrollContainer, originalStylesRef.current);
+        }
+        originalStylesRef.current = null;
+        isBlockedRef.current = false;
+    }, [scrollContainer]);
+    // Cleanup: restore scroll if component unmounts while scroll is blocked
+    react.useEffect(() => {
+        return () => {
+            if (isBlockedRef.current && scrollContainer && originalStylesRef.current) {
+                if (scrollContainer === document.body) {
+                    restoreDocumentScroll(originalStylesRef.current);
+                }
+                else {
+                    restoreContainerScroll(scrollContainer, originalStylesRef.current);
+                }
+                isBlockedRef.current = false;
+            }
+        };
+    }, [scrollContainer]);
+    return react.useMemo(() => ({ blockScroll, restoreScroll }), [blockScroll, restoreScroll]);
+};
+
 const SCROLL_DEBOUNCE_TIME = 50;
 /**
  * Hook for detecting scroll values in horizontal or vertical direction.
@@ -5476,6 +5620,7 @@ exports.usePopoverContext = usePopoverContext;
 exports.usePrompt = usePrompt;
 exports.useRelayPagination = useRelayPagination;
 exports.useResize = useResize;
+exports.useScrollBlock = useScrollBlock;
 exports.useScrollDetection = useScrollDetection;
 exports.useSelfUpdatingRef = useSelfUpdatingRef;
 exports.useTimeout = useTimeout;

package/index.esm.js

@@ -1724,6 +1724,150 @@ const getWindowSize = () => {
     }
 };
 
+/**
+ * Blocks scrolling on the document and compensates for scrollbar width to prevent layout shift.
+ * Returns the original styles so they can be restored later.
+ *
+ * @returns {OriginalStyles} The original styles before blocking
+ */
+const blockDocumentScroll = () => {
+    const { body } = document;
+    const html = document.documentElement;
+    // Store original values before modifying
+    const originalStyles = {
+        html: {
+            position: html.style.position,
+            overflow: html.style.overflow,
+        },
+        body: {
+            position: body.style.position,
+            overflow: body.style.overflow,
+            paddingRight: body.style.paddingRight,
+        },
+    };
+    // Calculate scrollbar width to prevent layout shift when hiding scrollbar
+    const scrollBarWidth = window.innerWidth - (html.clientWidth || 0);
+    const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
+    // Block scroll on both html and body for cross-browser compatibility
+    html.style.position = "relative";
+    html.style.overflow = "hidden";
+    body.style.position = "relative";
+    body.style.overflow = "hidden";
+    // Preserve existing padding and add scrollbar width to prevent layout shift
+    body.style.paddingRight = `${bodyPaddingRight + scrollBarWidth}px`;
+    return originalStyles;
+};
+/**
+ * Restores document scrolling by restoring the provided original styles.
+ *
+ * @param originalStyles - The original styles to restore
+ */
+const restoreDocumentScroll = (originalStyles) => {
+    const { body } = document;
+    const html = document.documentElement;
+    // Restore original values instead of just clearing
+    if (originalStyles.html) {
+        html.style.position = originalStyles.html.position;
+        html.style.overflow = originalStyles.html.overflow;
+    }
+    if (originalStyles.body) {
+        body.style.position = originalStyles.body.position;
+        body.style.overflow = originalStyles.body.overflow;
+        body.style.paddingRight = originalStyles.body.paddingRight;
+    }
+};
+/**
+ * Blocks scrolling on a custom container element.
+ * Returns the original styles so they can be restored later.
+ *
+ * @param container - The container element to block scroll on
+ * @returns {OriginalStyles} The original styles before blocking
+ */
+const blockContainerScroll = (container) => {
+    const originalStyles = {
+        container: {
+            overflow: container.style.overflow,
+        },
+    };
+    container.style.overflow = "hidden";
+    return originalStyles;
+};
+/**
+ * Restores container scrolling by restoring the provided original styles.
+ *
+ * @param container - The container element to restore scroll on
+ * @param originalStyles - The original styles to restore
+ */
+const restoreContainerScroll = (container, originalStyles) => {
+    if (originalStyles.container) {
+        container.style.overflow = originalStyles.container.overflow;
+    }
+};
+/**
+ * Hook that provides scroll blocking functionality.
+ * This properly accounts for existing body padding to prevent layout shifts.
+ *
+ * Each instance gets its own stored original styles via refs, preventing
+ * conflicts when multiple components are used on the same page. The hook also ensures
+ * cleanup on unmount if scroll is still blocked.
+ *
+ * @param scrollContainer - The DOM element whose scroll should be blocked. Defaults to document.body.
+ * @returns {{blockScroll: () => void, restoreScroll: () => void}} Object containing blockScroll and restoreScroll functions
+ */
+const useScrollBlock = (scrollContainer = typeof document !== "undefined" ? document.body : null // default to document.body if no scroll container is provided
+) => {
+    const originalStylesRef = useRef(null);
+    const isBlockedRef = useRef(false);
+    /**
+     * Blocks scrolling and stores original styles for restoration.
+     * Blocks the document (body/html) if scroll container is the document body,
+     * or blocks the custom container if a custom container is provided.
+     */
+    const blockScroll = useCallback(() => {
+        if (isBlockedRef.current || !scrollContainer) {
+            return; // Already blocked or no scroll container
+        }
+        if (scrollContainer === document.body) {
+            originalStylesRef.current = blockDocumentScroll();
+        }
+        else {
+            originalStylesRef.current = blockContainerScroll(scrollContainer);
+        }
+        isBlockedRef.current = true;
+    }, [scrollContainer]);
+    /**
+     * Restores scrolling using the previously stored original styles.
+     */
+    const restoreScroll = useCallback(() => {
+        if (!isBlockedRef.current || !scrollContainer || !originalStylesRef.current) {
+            return;
+        }
+        if (scrollContainer === document.body) {
+            restoreDocumentScroll(originalStylesRef.current);
+        }
+        else {
+            restoreContainerScroll(scrollContainer, originalStylesRef.current);
+        }
+        originalStylesRef.current = null;
+        isBlockedRef.current = false;
+    }, [scrollContainer]);
+    // Cleanup: restore scroll if component unmounts while scroll is blocked
+    useEffect(() => {
+        return () => {
+            if (isBlockedRef.current && scrollContainer && originalStylesRef.current) {
+                if (scrollContainer === document.body) {
+                    restoreDocumentScroll(originalStylesRef.current);
+                }
+                else {
+                    restoreContainerScroll(scrollContainer, originalStylesRef.current);
+                }
+                isBlockedRef.current = false;
+            }
+        };
+    }, [scrollContainer]);
+    return useMemo(() => ({ blockScroll, restoreScroll }), [blockScroll, restoreScroll]);
+};
+
 const SCROLL_DEBOUNCE_TIME = 50;
 /**
  * Hook for detecting scroll values in horizontal or vertical direction.
@@ -5343,4 +5487,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useList, useListItemHeight, useMeasure, useMeasureElement, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useRelayPagination, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useList, useListItemHeight, useMeasure, useMeasureElement, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.10.33",
+  "version": "1.10.40",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,11 +16,11 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.64",
-    "@trackunit/css-class-variance-utilities": "1.7.64",
-    "@trackunit/shared-utils": "1.9.64",
-    "@trackunit/ui-icons": "1.7.65",
-    "@trackunit/react-test-setup": "1.4.64",
+    "@trackunit/ui-design-tokens": "1.7.70",
+    "@trackunit/css-class-variance-utilities": "1.7.70",
+    "@trackunit/shared-utils": "1.9.70",
+    "@trackunit/ui-icons": "1.7.71",
+    "@trackunit/react-test-setup": "1.4.70",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12"

package/src/hooks/index.d.ts

@@ -17,6 +17,7 @@ export type { Geometry } from "./useMeasure/useMeasureShared";
 export * from "./useModifierKey";
 export * from "./useRelayPagination";
 export * from "./useResize";
+export * from "./useScrollBlock";
 export * from "./useScrollDetection";
 export * from "./useSelfUpdatingRef";
 export * from "./useTimeout";

package/src/hooks/useScrollBlock.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Hook that provides scroll blocking functionality.
+ * This properly accounts for existing body padding to prevent layout shifts.
+ *
+ * Each instance gets its own stored original styles via refs, preventing
+ * conflicts when multiple components are used on the same page. The hook also ensures
+ * cleanup on unmount if scroll is still blocked.
+ *
+ * @param scrollContainer - The DOM element whose scroll should be blocked. Defaults to document.body.
+ * @returns {{blockScroll: () => void, restoreScroll: () => void}} Object containing blockScroll and restoreScroll functions
+ */
+export declare const useScrollBlock: (scrollContainer?: HTMLElement | null) => {
+    blockScroll: () => void;
+    restoreScroll: () => void;
+};