@jirawatpyk/aura-react 5.72.0 → 5.73.0

package/README.md

@@ -186,6 +186,12 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.73 — Chamber-OS addendum 93 follow-up (#192)
+
+- **Hidden bars, every way a tab panel hides them:** the edge ActionBar and PageHeader's `actionsBarBelow` bar now share one rule. The newest bar that is pinned and on screen sets the page's clearance (`--aura-actionbar-height`, `--aura-page-actions-height`). A bar with no box (`display: none`), `visibility: hidden`, or inside `content-visibility: hidden` (`hidden="until-found"`) is skipped. A visibility switch resizes nothing, so the bars are re-read after any click, key press, focus move, transition, find-in-page reveal (`beforematch`) or history change; a switch made by a timer or a resolved request is caught at the next of those.
+- **When no bar is on screen:** a pinned bar hidden only by `visibility` (a gate that may lift with no event) keeps its room — too much space is cosmetic, too little hides content; with every pinned bar boxless (`display: none` tab panels) the variable is `0px`, so the page keeps no space for a strip that isn't there (5.72 removed it, and the CSS then reserved its 60px / 7rem fallback). With no bar pinned (a wide or short screen) it is removed, as before.
+- **PageHeader in tab panels:** one PageHeader with `actionsBarBelow` per tab panel now works like the ActionBars: the shown one's bar counts, where before the newest one — shown or not — set the height. The development warning now fires only when two bars are on screen at once.
+
 ## 5.72 — Chamber-OS addendum 93 (#192)
 
 - **An edge ActionBar in a hidden tab no longer zeroes the page's clearance:** a bar with `look="edge"` / `edgeBelow` inside a `display: none` parent (an inactive tab panel) still computes `position: fixed` but has no box; it is now skipped, so `--aura-actionbar-height` (and with it the page's end padding and `scroll-padding-bottom`) is the visible bar's height. Switching tabs moves it to the bar now shown; with none shown it is removed. Mounting one bar for the active tab is still the simplest shape.

package/dist/aura.bundle.js

@@ -418,6 +418,75 @@ window.Aura = (() => {
     }
     return false;
   }
+  function onScreen(el) {
+    if (el.offsetHeight <= 0 || el.getClientRects().length === 0) return false;
+    const check = el.checkVisibility;
+    if (typeof check === "function") return check.call(el, { visibilityProperty: true });
+    const v = getComputedStyle(el).visibility;
+    return v !== "hidden" && v !== "collapse";
+  }
+  function barStack(name, onMany) {
+    const els = [];
+    let frame = 0;
+    const docEvents = ["click", "keydown", "focusin", "transitionend", "beforematch"];
+    const winEvents = ["hashchange", "popstate"];
+    function write() {
+      if (frame) cancelAnimationFrame(frame);
+      frame = 0;
+      const root = document.documentElement;
+      let shown = null, boxed = null, pinned2 = false, many = 0;
+      for (let i = els.length - 1; i >= 0; i--) {
+        const el = els[i];
+        if (getComputedStyle(el).position !== "fixed") continue;
+        pinned2 = true;
+        if (onScreen(el)) {
+          many++;
+          if (!shown) shown = el;
+        } else if (!boxed && el.offsetHeight > 0) boxed = el;
+      }
+      if (many > 1 && onMany) onMany();
+      const use = shown || boxed;
+      if (use) root.style.setProperty(name, use.offsetHeight + "px");
+      else if (pinned2) root.style.setProperty(name, "0px");
+      else root.style.removeProperty(name);
+    }
+    function later() {
+      if (!frame) frame = requestAnimationFrame(write);
+    }
+    function now() {
+      write();
+      later();
+    }
+    function listen(on) {
+      docEvents.forEach(function(t) {
+        const f = t === "focusin" ? now : later;
+        if (on) document.addEventListener(t, f, true);
+        else document.removeEventListener(t, f, true);
+      });
+      winEvents.forEach(function(t) {
+        if (on) window.addEventListener(t, later);
+        else window.removeEventListener(t, later);
+      });
+    }
+    return {
+      add: function(el) {
+        els.push(el);
+        if (els.length === 1) listen(true);
+        write();
+      },
+      remove: function(el) {
+        const i = els.indexOf(el);
+        if (i >= 0) els.splice(i, 1);
+        if (!els.length) {
+          listen(false);
+          if (frame) cancelAnimationFrame(frame);
+          frame = 0;
+        }
+        write();
+      },
+      write
+    };
+  }
 
   // src/display.tsx
   var React4 = __toESM(require_react(), 1);
@@ -8158,8 +8227,12 @@ window.Aura = (() => {
   });
 
   // src/PageHeaderClient.tsx
-  var NAME = "--aura-page-actions-height";
-  var bars = [];
+  var bars = barStack("--aura-page-actions-height", function() {
+    devWarnOnce(
+      "pageheader-bar-twice",
+      "PageHeader actionsBarBelow: two bars are on screen at once and overlap at the bottom of the screen. Give it to one PageHeader per page (one per tab panel is fine: only the shown one counts)."
+    );
+  });
   var PageHeader3 = React45.forwardRef(function PageHeader4(props, ref) {
     const own = React45.useRef(null);
     const merged = useMergedRef(ref, own);
@@ -8173,35 +8246,24 @@ window.Aura = (() => {
           split ? ":scope > .aura-page-header__actions > .aura-page-header__bar" : ":scope > .aura-page-header__actions"
         );
         if (!el) return;
-        const root = document.documentElement;
         let checked = false;
         function sync() {
-          if (bars[bars.length - 1] !== sync) return;
-          if (getComputedStyle(el).position === "fixed") {
-            root.style.setProperty(NAME, el.offsetHeight + "px");
-            if (!checked && (checked = true, fixedTrapped(el)))
-              devWarnOnce(
-                "pageheader-bar-trapped",
-                "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
-              );
-          } else root.style.removeProperty(NAME);
+          bars.write();
+          if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
+            devWarnOnce(
+              "pageheader-bar-trapped",
+              "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
+            );
         }
-        if (bars.length)
-          devWarnOnce(
-            "pageheader-bar-twice",
-            "PageHeader actionsBarBelow: two bars on one page overlap at the bottom of the screen. Give it to one PageHeader per page."
-          );
-        bars.push(sync);
+        bars.add(el);
         const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
-        if (ro) ro.observe(el);
+        if (ro) ro.observe(el, { box: "border-box" });
         window.addEventListener("resize", sync);
         sync();
         return function() {
           if (ro) ro.disconnect();
           window.removeEventListener("resize", sync);
-          bars.splice(bars.indexOf(sync), 1);
-          if (bars.length) bars[bars.length - 1]();
-          else root.style.removeProperty(NAME);
+          bars.remove(el);
         };
       },
       [bar, hasActions, split]
@@ -8722,17 +8784,7 @@ window.Aura = (() => {
 
   // src/ActionBar.tsx
   var React50 = __toESM(require_react(), 1);
-  var HEIGHT = "--aura-actionbar-height";
-  var edges = [];
-  function writeHeight() {
-    const root = document.documentElement;
-    for (let i = edges.length - 1; i >= 0; i--)
-      if (edges[i].getClientRects().length > 0 && edges[i].offsetHeight > 0 && getComputedStyle(edges[i]).position === "fixed") {
-        root.style.setProperty(HEIGHT, edges[i].offsetHeight + "px");
-        return;
-      }
-    root.style.removeProperty(HEIGHT);
-  }
+  var edges = barStack("--aura-actionbar-height");
   var ActionBar = React50.forwardRef(function ActionBar2(props, ref) {
     const t = useStrings();
     const bulk = props.selected != null;
@@ -8756,14 +8808,14 @@ window.Aura = (() => {
         if (!edge || !el) return;
         let checked = false;
         function sync() {
-          writeHeight();
+          edges.write();
           if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
             devWarnOnce(
               "actionbar-edge-trapped",
               `ActionBar look="edge": an ancestor has a transform, filter, will-change or paint containment, so the fixed strip is placed against it instead of the screen. Remove it from the bar's ancestors.`
             );
         }
-        edges.push(el);
+        edges.add(el);
         const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
         if (ro) ro.observe(el, { box: "border-box" });
         window.addEventListener("resize", sync);
@@ -8771,8 +8823,7 @@ window.Aura = (() => {
         return function() {
           if (ro) ro.disconnect();
           window.removeEventListener("resize", sync);
-          edges.splice(edges.indexOf(el), 1);
-          writeHeight();
+          edges.remove(el);
         };
       },
       [edge, idle]

package/dist/cjs/index.cjs

@@ -400,6 +400,75 @@ function fixedTrapped(el) {
   }
   return false;
 }
+function onScreen(el) {
+  if (el.offsetHeight <= 0 || el.getClientRects().length === 0) return false;
+  const check = el.checkVisibility;
+  if (typeof check === "function") return check.call(el, { visibilityProperty: true });
+  const v = getComputedStyle(el).visibility;
+  return v !== "hidden" && v !== "collapse";
+}
+function barStack(name, onMany) {
+  const els = [];
+  let frame = 0;
+  const docEvents = ["click", "keydown", "focusin", "transitionend", "beforematch"];
+  const winEvents = ["hashchange", "popstate"];
+  function write() {
+    if (frame) cancelAnimationFrame(frame);
+    frame = 0;
+    const root = document.documentElement;
+    let shown = null, boxed = null, pinned2 = false, many = 0;
+    for (let i = els.length - 1; i >= 0; i--) {
+      const el = els[i];
+      if (getComputedStyle(el).position !== "fixed") continue;
+      pinned2 = true;
+      if (onScreen(el)) {
+        many++;
+        if (!shown) shown = el;
+      } else if (!boxed && el.offsetHeight > 0) boxed = el;
+    }
+    if (many > 1 && onMany) onMany();
+    const use = shown || boxed;
+    if (use) root.style.setProperty(name, use.offsetHeight + "px");
+    else if (pinned2) root.style.setProperty(name, "0px");
+    else root.style.removeProperty(name);
+  }
+  function later() {
+    if (!frame) frame = requestAnimationFrame(write);
+  }
+  function now() {
+    write();
+    later();
+  }
+  function listen(on) {
+    docEvents.forEach(function(t) {
+      const f = t === "focusin" ? now : later;
+      if (on) document.addEventListener(t, f, true);
+      else document.removeEventListener(t, f, true);
+    });
+    winEvents.forEach(function(t) {
+      if (on) window.addEventListener(t, later);
+      else window.removeEventListener(t, later);
+    });
+  }
+  return {
+    add: function(el) {
+      els.push(el);
+      if (els.length === 1) listen(true);
+      write();
+    },
+    remove: function(el) {
+      const i = els.indexOf(el);
+      if (i >= 0) els.splice(i, 1);
+      if (!els.length) {
+        listen(false);
+        if (frame) cancelAnimationFrame(frame);
+        frame = 0;
+      }
+      write();
+    },
+    write
+  };
+}
 
 // src/display.tsx
 var React4 = __toESM(require("react"), 1);
@@ -8140,8 +8209,12 @@ var PageHeader = React44.forwardRef(function PageHeader2(props, ref) {
 });
 
 // src/PageHeaderClient.tsx
-var NAME = "--aura-page-actions-height";
-var bars = [];
+var bars = barStack("--aura-page-actions-height", function() {
+  devWarnOnce(
+    "pageheader-bar-twice",
+    "PageHeader actionsBarBelow: two bars are on screen at once and overlap at the bottom of the screen. Give it to one PageHeader per page (one per tab panel is fine: only the shown one counts)."
+  );
+});
 var PageHeader3 = React45.forwardRef(function PageHeader4(props, ref) {
   const own = React45.useRef(null);
   const merged = useMergedRef(ref, own);
@@ -8155,35 +8228,24 @@ var PageHeader3 = React45.forwardRef(function PageHeader4(props, ref) {
         split ? ":scope > .aura-page-header__actions > .aura-page-header__bar" : ":scope > .aura-page-header__actions"
       );
       if (!el) return;
-      const root = document.documentElement;
       let checked = false;
       function sync() {
-        if (bars[bars.length - 1] !== sync) return;
-        if (getComputedStyle(el).position === "fixed") {
-          root.style.setProperty(NAME, el.offsetHeight + "px");
-          if (!checked && (checked = true, fixedTrapped(el)))
-            devWarnOnce(
-              "pageheader-bar-trapped",
-              "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
-            );
-        } else root.style.removeProperty(NAME);
+        bars.write();
+        if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
+          devWarnOnce(
+            "pageheader-bar-trapped",
+            "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
+          );
       }
-      if (bars.length)
-        devWarnOnce(
-          "pageheader-bar-twice",
-          "PageHeader actionsBarBelow: two bars on one page overlap at the bottom of the screen. Give it to one PageHeader per page."
-        );
-      bars.push(sync);
+      bars.add(el);
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
-      if (ro) ro.observe(el);
+      if (ro) ro.observe(el, { box: "border-box" });
       window.addEventListener("resize", sync);
       sync();
       return function() {
         if (ro) ro.disconnect();
         window.removeEventListener("resize", sync);
-        bars.splice(bars.indexOf(sync), 1);
-        if (bars.length) bars[bars.length - 1]();
-        else root.style.removeProperty(NAME);
+        bars.remove(el);
       };
     },
     [bar, hasActions, split]
@@ -8704,17 +8766,7 @@ var AppShell = React49.forwardRef(function AppShell2(props, ref) {
 
 // src/ActionBar.tsx
 var React50 = __toESM(require("react"), 1);
-var HEIGHT = "--aura-actionbar-height";
-var edges = [];
-function writeHeight() {
-  const root = document.documentElement;
-  for (let i = edges.length - 1; i >= 0; i--)
-    if (edges[i].getClientRects().length > 0 && edges[i].offsetHeight > 0 && getComputedStyle(edges[i]).position === "fixed") {
-      root.style.setProperty(HEIGHT, edges[i].offsetHeight + "px");
-      return;
-    }
-  root.style.removeProperty(HEIGHT);
-}
+var edges = barStack("--aura-actionbar-height");
 var ActionBar = React50.forwardRef(function ActionBar2(props, ref) {
   const t = useStrings();
   const bulk = props.selected != null;
@@ -8738,14 +8790,14 @@ var ActionBar = React50.forwardRef(function ActionBar2(props, ref) {
       if (!edge || !el) return;
       let checked = false;
       function sync() {
-        writeHeight();
+        edges.write();
         if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
           devWarnOnce(
             "actionbar-edge-trapped",
             `ActionBar look="edge": an ancestor has a transform, filter, will-change or paint containment, so the fixed strip is placed against it instead of the screen. Remove it from the bar's ancestors.`
           );
       }
-      edges.push(el);
+      edges.add(el);
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
       if (ro) ro.observe(el, { box: "border-box" });
       window.addEventListener("resize", sync);
@@ -8753,8 +8805,7 @@ var ActionBar = React50.forwardRef(function ActionBar2(props, ref) {
       return function() {
         if (ro) ro.disconnect();
         window.removeEventListener("resize", sync);
-        edges.splice(edges.indexOf(el), 1);
-        writeHeight();
+        edges.remove(el);
       };
     },
     [edge, idle]

package/dist/esm/ActionBar.js

@@ -1,19 +1,9 @@
 'use client';
 import * as React from "react";
 import { Button } from "./Button.js";
-import { cx, devWarnOnce, fixedTrapped } from "./internal.js";
+import { barStack, cx, devWarnOnce, fixedTrapped } from "./internal.js";
 import { useStrings } from "./locale.js";
-const HEIGHT = "--aura-actionbar-height";
-const edges = [];
-function writeHeight() {
-  const root = document.documentElement;
-  for (let i = edges.length - 1; i >= 0; i--)
-    if (edges[i].getClientRects().length > 0 && edges[i].offsetHeight > 0 && getComputedStyle(edges[i]).position === "fixed") {
-      root.style.setProperty(HEIGHT, edges[i].offsetHeight + "px");
-      return;
-    }
-  root.style.removeProperty(HEIGHT);
-}
+const edges = barStack("--aura-actionbar-height");
 const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
   const t = useStrings();
   const bulk = props.selected != null;
@@ -37,14 +27,14 @@ const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
       if (!edge || !el) return;
       let checked = false;
       function sync() {
-        writeHeight();
+        edges.write();
         if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
           devWarnOnce(
             "actionbar-edge-trapped",
             `ActionBar look="edge": an ancestor has a transform, filter, will-change or paint containment, so the fixed strip is placed against it instead of the screen. Remove it from the bar's ancestors.`
           );
       }
-      edges.push(el);
+      edges.add(el);
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
       if (ro) ro.observe(el, { box: "border-box" });
       window.addEventListener("resize", sync);
@@ -52,8 +42,7 @@ const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
       return function() {
         if (ro) ro.disconnect();
         window.removeEventListener("resize", sync);
-        edges.splice(edges.indexOf(el), 1);
-        writeHeight();
+        edges.remove(el);
       };
     },
     [edge, idle]

package/dist/esm/PageHeaderClient.js

@@ -1,9 +1,13 @@
 'use client';
 import * as React from "react";
 import { PageHeader as StaticPageHeader } from "./PageHeader.js";
-import { devWarnOnce, fixedTrapped as trapped, useMergedRef } from "./internal.js";
-const NAME = "--aura-page-actions-height";
-const bars = [];
+import { barStack, devWarnOnce, fixedTrapped as trapped, useMergedRef } from "./internal.js";
+const bars = barStack("--aura-page-actions-height", function() {
+  devWarnOnce(
+    "pageheader-bar-twice",
+    "PageHeader actionsBarBelow: two bars are on screen at once and overlap at the bottom of the screen. Give it to one PageHeader per page (one per tab panel is fine: only the shown one counts)."
+  );
+});
 const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
   const own = React.useRef(null);
   const merged = useMergedRef(ref, own);
@@ -17,35 +21,24 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
         split ? ":scope > .aura-page-header__actions > .aura-page-header__bar" : ":scope > .aura-page-header__actions"
       );
       if (!el) return;
-      const root = document.documentElement;
       let checked = false;
       function sync() {
-        if (bars[bars.length - 1] !== sync) return;
-        if (getComputedStyle(el).position === "fixed") {
-          root.style.setProperty(NAME, el.offsetHeight + "px");
-          if (!checked && (checked = true, trapped(el)))
-            devWarnOnce(
-              "pageheader-bar-trapped",
-              "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
-            );
-        } else root.style.removeProperty(NAME);
+        bars.write();
+        if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, trapped(el)))
+          devWarnOnce(
+            "pageheader-bar-trapped",
+            "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
+          );
       }
-      if (bars.length)
-        devWarnOnce(
-          "pageheader-bar-twice",
-          "PageHeader actionsBarBelow: two bars on one page overlap at the bottom of the screen. Give it to one PageHeader per page."
-        );
-      bars.push(sync);
+      bars.add(el);
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
-      if (ro) ro.observe(el);
+      if (ro) ro.observe(el, { box: "border-box" });
       window.addEventListener("resize", sync);
       sync();
       return function() {
         if (ro) ro.disconnect();
         window.removeEventListener("resize", sync);
-        bars.splice(bars.indexOf(sync), 1);
-        if (bars.length) bars[bars.length - 1]();
-        else root.style.removeProperty(NAME);
+        bars.remove(el);
       };
     },
     [bar, hasActions, split]

package/dist/esm/internal.js

@@ -117,10 +117,80 @@ function fixedTrapped(el) {
   }
   return false;
 }
+function onScreen(el) {
+  if (el.offsetHeight <= 0 || el.getClientRects().length === 0) return false;
+  const check = el.checkVisibility;
+  if (typeof check === "function") return check.call(el, { visibilityProperty: true });
+  const v = getComputedStyle(el).visibility;
+  return v !== "hidden" && v !== "collapse";
+}
+function barStack(name, onMany) {
+  const els = [];
+  let frame = 0;
+  const docEvents = ["click", "keydown", "focusin", "transitionend", "beforematch"];
+  const winEvents = ["hashchange", "popstate"];
+  function write() {
+    if (frame) cancelAnimationFrame(frame);
+    frame = 0;
+    const root = document.documentElement;
+    let shown = null, boxed = null, pinned = false, many = 0;
+    for (let i = els.length - 1; i >= 0; i--) {
+      const el = els[i];
+      if (getComputedStyle(el).position !== "fixed") continue;
+      pinned = true;
+      if (onScreen(el)) {
+        many++;
+        if (!shown) shown = el;
+      } else if (!boxed && el.offsetHeight > 0) boxed = el;
+    }
+    if (many > 1 && onMany) onMany();
+    const use = shown || boxed;
+    if (use) root.style.setProperty(name, use.offsetHeight + "px");
+    else if (pinned) root.style.setProperty(name, "0px");
+    else root.style.removeProperty(name);
+  }
+  function later() {
+    if (!frame) frame = requestAnimationFrame(write);
+  }
+  function now() {
+    write();
+    later();
+  }
+  function listen(on) {
+    docEvents.forEach(function(t) {
+      const f = t === "focusin" ? now : later;
+      if (on) document.addEventListener(t, f, true);
+      else document.removeEventListener(t, f, true);
+    });
+    winEvents.forEach(function(t) {
+      if (on) window.addEventListener(t, later);
+      else window.removeEventListener(t, later);
+    });
+  }
+  return {
+    add: function(el) {
+      els.push(el);
+      if (els.length === 1) listen(true);
+      write();
+    },
+    remove: function(el) {
+      const i = els.indexOf(el);
+      if (i >= 0) els.splice(i, 1);
+      if (!els.length) {
+        listen(false);
+        if (frame) cancelAnimationFrame(frame);
+        frame = 0;
+      }
+      write();
+    },
+    write
+  };
+}
 export {
   FOCUSABLE,
   FilterSheet,
   TAB_STOPS,
+  barStack,
   collator,
   compare,
   cx,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.72.0",
+  "version": "5.73.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",