@adecore/ui 0.54.7 → 0.54.8

package/dist/theme.css

@@ -1103,10 +1103,14 @@
     [data-overlay-scrollbars][data-scrollbar-dragging], .ade-scrollbar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
     .ade-scroll-area { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
     /* Its own stacking layer, so a sticky header with a z-index inside never covers the bars. */
-    /* `contain` lets the box bounce at its own end; the page's `overscroll-behavior: none` would take the bounce of a scroll chained up to it. */
-    .ade-scroll-viewport { flex: 1 1 auto; min-height: 0; overflow: auto; isolation: isolate; overscroll-behavior: contain; }
-    .ade-scroll-viewport[data-axis="y"] { overflow-x: hidden; }
-    .ade-scroll-viewport[data-axis="x"] { overflow-y: hidden; }
+    /* It scrolls only along an axis whose bar has something to scroll (`useOverlayScrollbars`): Chromium composites every box
+       that can scroll, so a canvas of idle areas would cost a layer each on every frame. Hidden, it still scrolls from code. */
+    /* `contain` lets the box bounce at its own end; the page's `overscroll-behavior: none` would take the bounce of a scroll chained up to it.
+       Only on the axes it scrolls: Chromium stops a chain at `contain` even on an axis that cannot scroll, so a wheel down over a
+       table that scrolls sideways would never reach the thread around it. */
+    .ade-scroll-viewport { flex: 1 1 auto; min-height: 0; overflow: hidden; isolation: isolate; }
+    .ade-scroll-viewport[data-overflow-y] { overflow-y: auto; overscroll-behavior-y: contain; }
+    .ade-scroll-viewport[data-overflow-x] { overflow-x: auto; overscroll-behavior-x: contain; }
     .ade-scrollbar {
         --scrollbar-size: 12px;
         position: absolute;

package/dist/useOverlayScrollbars.js

@@ -6,6 +6,16 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 export const SCROLLBAR_LINGER_MS = 600;
 /* The theme hides the native bar of a scroller that carries this attribute. */
 const OVERLAY_ATTRIBUTE = 'data-overlay-scrollbars';
+/*
+ * Set on the scroller for each axis of a bar that has something to scroll. A `ScrollArea` scrolls
+ * only along those: Chromium composites every box that can scroll, so a canvas full of idle areas
+ * would cost a layer each on every frame.
+ */
+const OVERFLOW_X_ATTRIBUTE = 'data-overflow-x';
+const OVERFLOW_Y_ATTRIBUTE = 'data-overflow-y';
+function overflowAttributeOf(bar) {
+  return bar.vertical ? OVERFLOW_Y_ATTRIBUTE : OVERFLOW_X_ATTRIBUTE;
+}
 /*
  * Draws thin bars over `viewport`, a scroller that stays native, so wheel, keys, `scrollIntoView` and
  * a virtualizer keep working on it. Put the returned element in a positioned ancestor whose box is
@@ -65,6 +75,7 @@ export function useOverlayScrollbars(viewport, t0) {
         bars.forEach((bar_3, index) => {
           bar_3.element.toggleAttribute("data-overflow", overflowing[index]);
           bar_3.element.toggleAttribute("data-corner", corner);
+          viewport.toggleAttribute(overflowAttributeOf(bar_3), overflowing[index]);
         });
         bars.forEach((bar_4, index_0) => {
           if (!overflowing[index_0]) {
@@ -184,15 +195,23 @@ export function useOverlayScrollbars(viewport, t0) {
       });
       const sizes = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(layout);
       sizes?.observe(viewport);
-      const observeContent = () => {
-        for (const child of viewport.children) {
-          sizes?.observe(child);
-        }
-      };
       const content = typeof MutationObserver === "undefined" ? null : new MutationObserver(() => {
         observeContent();
         layout();
       });
+      const observeContent = () => {
+        for (const child of viewport.childNodes) {
+          if (child.nodeType === child.ELEMENT_NODE) {
+            sizes?.observe(child);
+          } else {
+            if (child.nodeType === child.TEXT_NODE) {
+              content?.observe(child, {
+                characterData: true
+              });
+            }
+          }
+        }
+      };
       content?.observe(viewport, {
         childList: true
       });
@@ -210,6 +229,8 @@ export function useOverlayScrollbars(viewport, t0) {
         content?.disconnect();
         window.clearTimeout(lingerTimer);
         viewport.removeAttribute(OVERLAY_ATTRIBUTE);
+        viewport.removeAttribute(OVERFLOW_X_ATTRIBUTE);
+        viewport.removeAttribute(OVERFLOW_Y_ATTRIBUTE);
         viewport.removeAttribute("data-scrollbar-dragging");
         viewport.removeEventListener("scroll", onScroll);
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.54.7",
+  "version": "0.54.8",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/theme.css

@@ -1103,10 +1103,14 @@
     [data-overlay-scrollbars][data-scrollbar-dragging], .ade-scrollbar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
     .ade-scroll-area { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
     /* Its own stacking layer, so a sticky header with a z-index inside never covers the bars. */
-    /* `contain` lets the box bounce at its own end; the page's `overscroll-behavior: none` would take the bounce of a scroll chained up to it. */
-    .ade-scroll-viewport { flex: 1 1 auto; min-height: 0; overflow: auto; isolation: isolate; overscroll-behavior: contain; }
-    .ade-scroll-viewport[data-axis="y"] { overflow-x: hidden; }
-    .ade-scroll-viewport[data-axis="x"] { overflow-y: hidden; }
+    /* It scrolls only along an axis whose bar has something to scroll (`useOverlayScrollbars`): Chromium composites every box
+       that can scroll, so a canvas of idle areas would cost a layer each on every frame. Hidden, it still scrolls from code. */
+    /* `contain` lets the box bounce at its own end; the page's `overscroll-behavior: none` would take the bounce of a scroll chained up to it.
+       Only on the axes it scrolls: Chromium stops a chain at `contain` even on an axis that cannot scroll, so a wheel down over a
+       table that scrolls sideways would never reach the thread around it. */
+    .ade-scroll-viewport { flex: 1 1 auto; min-height: 0; overflow: hidden; isolation: isolate; }
+    .ade-scroll-viewport[data-overflow-y] { overflow-y: auto; overscroll-behavior-y: contain; }
+    .ade-scroll-viewport[data-overflow-x] { overflow-x: auto; overscroll-behavior-x: contain; }
     .ade-scrollbar {
         --scrollbar-size: 12px;
         position: absolute;

package/src/useOverlayScrollbars.tsx

@@ -14,12 +14,24 @@ export const SCROLLBAR_LINGER_MS = 600;
 /* The theme hides the native bar of a scroller that carries this attribute. */
 const OVERLAY_ATTRIBUTE = 'data-overlay-scrollbars';
 
+/*
+ * Set on the scroller for each axis of a bar that has something to scroll. A `ScrollArea` scrolls
+ * only along those: Chromium composites every box that can scroll, so a canvas full of idle areas
+ * would cost a layer each on every frame.
+ */
+const OVERFLOW_X_ATTRIBUTE = 'data-overflow-x';
+const OVERFLOW_Y_ATTRIBUTE = 'data-overflow-y';
+
 interface Bar {
     readonly element: HTMLElement;
     readonly thumb: HTMLElement;
     readonly vertical: boolean;
 }
 
+function overflowAttributeOf(bar: Bar): string {
+    return bar.vertical ? OVERFLOW_Y_ATTRIBUTE : OVERFLOW_X_ATTRIBUTE;
+}
+
 /*
  * Draws thin bars over `viewport`, a scroller that stays native, so wheel, keys, `scrollIntoView` and
  * a virtualizer keep working on it. Put the returned element in a positioned ancestor whose box is
@@ -68,6 +80,7 @@ export function useOverlayScrollbars(viewport: HTMLElement | null, { axis = 'y'
             bars.forEach((bar, index) => {
                 bar.element.toggleAttribute('data-overflow', overflowing[index]);
                 bar.element.toggleAttribute('data-corner', corner);
+                viewport.toggleAttribute(overflowAttributeOf(bar), overflowing[index]);
             });
 
             bars.forEach((bar, index) => {
@@ -211,12 +224,6 @@ export function useOverlayScrollbars(viewport: HTMLElement | null, { axis = 'y'
         const sizes = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(layout);
         sizes?.observe(viewport);
 
-        const observeContent = (): void => {
-            for (const child of viewport.children) {
-                sizes?.observe(child);
-            }
-        };
-
         // A row added to the content changes what scrolls without resizing the rows already observed.
         const content =
             typeof MutationObserver === 'undefined'
@@ -226,6 +233,18 @@ export function useOverlayScrollbars(viewport: HTMLElement | null, { axis = 'y'
                       layout();
                   });
 
+        // Text right in the scroller, as in a `<pre>`, grows without resizing anything an observer sees.
+        // The node's own constants, not the `Element` or `Node` globals: a document from a test's own window has none.
+        const observeContent = (): void => {
+            for (const child of viewport.childNodes) {
+                if (child.nodeType === child.ELEMENT_NODE) {
+                    sizes?.observe(child as Element);
+                } else if (child.nodeType === child.TEXT_NODE) {
+                    content?.observe(child, { characterData: true });
+                }
+            }
+        };
+
         content?.observe(viewport, { childList: true });
         observeContent();
         viewport.setAttribute(OVERLAY_ATTRIBUTE, '');
@@ -241,6 +260,8 @@ export function useOverlayScrollbars(viewport: HTMLElement | null, { axis = 'y'
             content?.disconnect();
             window.clearTimeout(lingerTimer);
             viewport.removeAttribute(OVERLAY_ATTRIBUTE);
+            viewport.removeAttribute(OVERFLOW_X_ATTRIBUTE);
+            viewport.removeAttribute(OVERFLOW_Y_ATTRIBUTE);
             viewport.removeAttribute('data-scrollbar-dragging');
             viewport.removeEventListener('scroll', onScroll);
         };