npm - @trackunit/react-components - Versions diffs - 1.14.29 → 1.14.30 - Mend

@trackunit/react-components 1.14.29 → 1.14.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/index.cjs.js CHANGED Viewed

@@ -7697,6 +7697,9 @@ const getWindowSize = () => {
 /**
  * Blocks scrolling on the document and compensates for scrollbar width to prevent layout shift.
+ * Uses scrollbar-gutter: stable to reserve space for the scrollbar when hiding overflow,
+ * but only if a scrollbar was actually visible before blocking.
+ * This only has an effect with classic scrollbars - overlay scrollbars (macOS default) are unaffected.
  * Returns the original styles so they can be restored later.
  *
  * @returns {OriginalStyles} The original styles before blocking
@@ -7704,6 +7707,18 @@ const getWindowSize = () => {
 const blockDocumentScroll = () => {
     const { body } = document;
     const html = document.documentElement;
+    // Check if there's a visible scrollbar before we hide it
+    // The scrollbar can be on either <html> or <body> depending on CSS setup
+    // (e.g., Storybook sets overflow:hidden on html and overflow:auto on body)
+    // Check html scrollbar: window.innerWidth includes scrollbar, clientWidth doesn't
+    const htmlScrollbarWidth = window.innerWidth - html.clientWidth;
+    // Check body scrollbar: offsetWidth includes border+scrollbar, clientWidth excludes both
+    const bodyStyle = window.getComputedStyle(body);
+    const bodyBorderLeft = parseInt(bodyStyle.borderLeftWidth) || 0;
+    const bodyBorderRight = parseInt(bodyStyle.borderRightWidth) || 0;
+    const bodyScrollbarWidth = body.offsetWidth - bodyBorderLeft - bodyBorderRight - body.clientWidth;
+    // Use whichever scrollbar is present
+    const hasVisibleScrollbar = htmlScrollbarWidth > 0 || bodyScrollbarWidth > 0;
     // Store original values before modifying
     const originalStyles = {
         html: {
@@ -7713,19 +7728,20 @@ const blockDocumentScroll = () => {
         body: {
             position: body.style.position,
             overflow: body.style.overflow,
-            paddingRight: body.style.paddingRight,
+            scrollbarGutter: body.style.scrollbarGutter,
         },
     };
-    // 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`;
+    // Apply scrollbar-gutter on body (where the scrollbar typically lives when content scrolls)
+    // This reserves space for the scrollbar even when overflow is hidden, preventing layout shift.
+    // Only has effect with classic scrollbars - overlay scrollbars (macOS default) are unaffected.
+    if (hasVisibleScrollbar) {
+        body.style.scrollbarGutter = "stable";
+    }
     return originalStyles;
 };
 /**
@@ -7744,23 +7760,40 @@ const restoreDocumentScroll = (originalStyles) => {
     if (originalStyles.body) {
         body.style.position = originalStyles.body.position;
         body.style.overflow = originalStyles.body.overflow;
-        body.style.paddingRight = originalStyles.body.paddingRight;
+        body.style.scrollbarGutter = originalStyles.body.scrollbarGutter;
     }
 };
 /**
  * Blocks scrolling on a custom container element.
+ * Uses scrollbar-gutter: stable to reserve space for the scrollbar when hiding overflow,
+ * but only if a scrollbar was actually visible before blocking.
+ * This only has an effect with classic scrollbars - overlay scrollbars (macOS default) are unaffected.
  * 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) => {
+    // Check if there's a visible scrollbar before we hide it
+    // offsetWidth includes border + scrollbar, clientWidth excludes both
+    // We need to subtract borders to isolate the scrollbar width
+    const style = window.getComputedStyle(container);
+    const borderLeft = parseInt(style.borderLeftWidth) || 0;
+    const borderRight = parseInt(style.borderRightWidth) || 0;
+    const scrollbarWidth = container.offsetWidth - borderLeft - borderRight - container.clientWidth;
+    const hasVisibleScrollbar = scrollbarWidth > 0;
     const originalStyles = {
         container: {
             overflow: container.style.overflow,
+            scrollbarGutter: container.style.scrollbarGutter,
         },
     };
     container.style.overflow = "hidden";
+    // Only add scrollbar-gutter if there was a visible scrollbar to preserve space for
+    // This prevents adding unnecessary space when content doesn't overflow
+    if (hasVisibleScrollbar) {
+        container.style.scrollbarGutter = "stable";
+    }
     return originalStyles;
 };
 /**
@@ -7772,6 +7805,7 @@ const blockContainerScroll = (container) => {
 const restoreContainerScroll = (container, originalStyles) => {
     if (originalStyles.container) {
         container.style.overflow = originalStyles.container.overflow;
+        container.style.scrollbarGutter = originalStyles.container.scrollbarGutter;
     }
 };
 /**

package/index.esm.js CHANGED Viewed

@@ -7695,6 +7695,9 @@ const getWindowSize = () => {
 /**
  * Blocks scrolling on the document and compensates for scrollbar width to prevent layout shift.
+ * Uses scrollbar-gutter: stable to reserve space for the scrollbar when hiding overflow,
+ * but only if a scrollbar was actually visible before blocking.
+ * This only has an effect with classic scrollbars - overlay scrollbars (macOS default) are unaffected.
  * Returns the original styles so they can be restored later.
  *
  * @returns {OriginalStyles} The original styles before blocking
@@ -7702,6 +7705,18 @@ const getWindowSize = () => {
 const blockDocumentScroll = () => {
     const { body } = document;
     const html = document.documentElement;
+    // Check if there's a visible scrollbar before we hide it
+    // The scrollbar can be on either <html> or <body> depending on CSS setup
+    // (e.g., Storybook sets overflow:hidden on html and overflow:auto on body)
+    // Check html scrollbar: window.innerWidth includes scrollbar, clientWidth doesn't
+    const htmlScrollbarWidth = window.innerWidth - html.clientWidth;
+    // Check body scrollbar: offsetWidth includes border+scrollbar, clientWidth excludes both
+    const bodyStyle = window.getComputedStyle(body);
+    const bodyBorderLeft = parseInt(bodyStyle.borderLeftWidth) || 0;
+    const bodyBorderRight = parseInt(bodyStyle.borderRightWidth) || 0;
+    const bodyScrollbarWidth = body.offsetWidth - bodyBorderLeft - bodyBorderRight - body.clientWidth;
+    // Use whichever scrollbar is present
+    const hasVisibleScrollbar = htmlScrollbarWidth > 0 || bodyScrollbarWidth > 0;
     // Store original values before modifying
     const originalStyles = {
         html: {
@@ -7711,19 +7726,20 @@ const blockDocumentScroll = () => {
         body: {
             position: body.style.position,
             overflow: body.style.overflow,
-            paddingRight: body.style.paddingRight,
+            scrollbarGutter: body.style.scrollbarGutter,
         },
     };
-    // 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`;
+    // Apply scrollbar-gutter on body (where the scrollbar typically lives when content scrolls)
+    // This reserves space for the scrollbar even when overflow is hidden, preventing layout shift.
+    // Only has effect with classic scrollbars - overlay scrollbars (macOS default) are unaffected.
+    if (hasVisibleScrollbar) {
+        body.style.scrollbarGutter = "stable";
+    }
     return originalStyles;
 };
 /**
@@ -7742,23 +7758,40 @@ const restoreDocumentScroll = (originalStyles) => {
     if (originalStyles.body) {
         body.style.position = originalStyles.body.position;
         body.style.overflow = originalStyles.body.overflow;
-        body.style.paddingRight = originalStyles.body.paddingRight;
+        body.style.scrollbarGutter = originalStyles.body.scrollbarGutter;
     }
 };
 /**
  * Blocks scrolling on a custom container element.
+ * Uses scrollbar-gutter: stable to reserve space for the scrollbar when hiding overflow,
+ * but only if a scrollbar was actually visible before blocking.
+ * This only has an effect with classic scrollbars - overlay scrollbars (macOS default) are unaffected.
  * 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) => {
+    // Check if there's a visible scrollbar before we hide it
+    // offsetWidth includes border + scrollbar, clientWidth excludes both
+    // We need to subtract borders to isolate the scrollbar width
+    const style = window.getComputedStyle(container);
+    const borderLeft = parseInt(style.borderLeftWidth) || 0;
+    const borderRight = parseInt(style.borderRightWidth) || 0;
+    const scrollbarWidth = container.offsetWidth - borderLeft - borderRight - container.clientWidth;
+    const hasVisibleScrollbar = scrollbarWidth > 0;
     const originalStyles = {
         container: {
             overflow: container.style.overflow,
+            scrollbarGutter: container.style.scrollbarGutter,
         },
     };
     container.style.overflow = "hidden";
+    // Only add scrollbar-gutter if there was a visible scrollbar to preserve space for
+    // This prevents adding unnecessary space when content doesn't overflow
+    if (hasVisibleScrollbar) {
+        container.style.scrollbarGutter = "stable";
+    }
     return originalStyles;
 };
 /**
@@ -7770,6 +7803,7 @@ const blockContainerScroll = (container) => {
 const restoreContainerScroll = (container, originalStyles) => {
     if (originalStyles.container) {
         container.style.overflow = originalStyles.container.overflow;
+        container.style.scrollbarGutter = originalStyles.container.scrollbarGutter;
     }
 };
 /**

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.14.29",
+  "version": "1.14.30",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {