@jirawatpyk/aura-react 5.80.0 → 5.81.0

package/README.md

@@ -248,6 +248,10 @@ 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.81 — DxT Monitor 24 (the tab bar hides after a tap)
+
+- **BottomNav `hideOnScroll` and AppShell `headerHideOnScroll` after a tap**: with client-side navigation the bar stays mounted, and on Chrome / Android a tap leaves focus on the tapped tab — the bar then never hid on the next page. Focus in the bar now holds it only when it came from the keyboard: focus that enters right after a pointer press doesn't count, and focus moved with the keyboard does (Tab into or within the bar brings it back and keeps it; keys that only scroll the page, such as Space or PageDown, don't). A text field in the bar holds it however it was focused. No new prop; drop any wrapper that blurs the tab on click.
+
 ## 5.79 — visual audit, set 3 (component by component)
 
 - **One disabled look for every Button variant:** a faint fill (`--aura-button-disabled-bg`: zinc-100 light, none in dark), a faint edge (`--aura-button-disabled-border` — the variant's own border, or 1px inside for primary and danger) and the tertiary label, at full opacity — primary, secondary, danger, creative and `aria-disabled` alike; a ghost button has neither fill nor edge. (5.30 gave filled buttons a grey fill that read as a To Do pill and faded outline ones.)
@@ -560,7 +564,7 @@ What Chamber-OS's own page header did that PageHeader didn't, so it can be rebui
 
 - **Breadcrumb touch targets** (request 11): on a touch screen (`pointer: coarse`) every crumb link or button (and "…") gets a hit area 44px tall and as wide as its text plus 24px; the text doesn't move. It reaches 12px into the gutter on each side, so short neighbours never share a spot, and only 4px below the text, so it stops short of a PageHeader title right underneath — the rest of the height is above, so keep about 20px clear above a breadcrumb (AppShell's content padding already is). When the crumbs wrap, the rows sit 24px apart on touch screens so one row never covers the next. The current page (not a link) gets none; a link component must render its `<a>` directly in the crumb's `li`. Apps that added their own `.aura-crumbs a::after` rule should drop it.
 - **StatusTile `status="unknown"`** (request 12): for a thing with no data yet (a site before its first check) — a dashed circle (circle-dot-dashed) in `aura-fg-tertiary` on the plain surface and border, status word "No data" (th: ยังไม่มีข้อมูล, sv: Ingen data), value in the text colour. An unrecognised `status` now shows as unknown rather than OK, with a dev warning.
-- **AppShell `headerHideOnScroll`** (request 13): below 1024px the top bar slides up out of view while the page scrolls down (after it has moved past the bar's height and kept going 8px) and comes back after 8px up, near the top, and whenever focus enters it. `--aura-shell-bar-height` is 0 while it is away, so a sticky table header pinned under the bar moves up with it. No slide with reduced motion. The page must scroll the window (AppShell's does).
+- **AppShell `headerHideOnScroll`** (request 13): below 1024px the top bar slides up out of view while the page scrolls down (after it has moved past the bar's height and kept going 8px) and comes back after 8px up, near the top, and whenever focus enters it (5.81: a tap's focus doesn't keep it there; keyboard focus does). `--aura-shell-bar-height` is 0 while it is away, so a sticky table header pinned under the bar moves up with it. No slide with reduced motion. The page must scroll the window (AppShell's does).
 - **BottomNav `hideOnScroll`** (request 14): the same for the tab bar, sliding down. Its spacer stays (nothing shifts) and `--aura-bottomnav-offset` drops while it is away, so viewport ActionBars and toasts follow it down. **ActionBar `hidesBottomNav`**: while that bar is on the page the BottomNav and its spacer are gone and the bar sits on the bottom edge — for a page whose own actions (Acknowledge, Visit site) replace the tabs. Any element can do the same with `data-aura-hide-bottomnav`.
 
 ## 5.34 — StatusTile, TileGrid, Sparkline (DxT Monitor Overview S06)

package/dist/aura.bundle.js

@@ -8751,8 +8751,10 @@ window.Aura = (() => {
   // src/scrollHide.ts
   var React48 = __toESM(require_react(), 1);
   var STEP = 8;
+  var TEXT_ENTRY = 'textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"], input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"]';
   function useHideOnScroll(enabled, el, media, from) {
     const st = React48.useState(false), hidden = st[0], setHidden = st[1];
+    const tap = React48.useRef({ pressedAt: -1e9, focus: false });
     React48.useEffect(
       function() {
         if (!enabled || typeof window === "undefined") {
@@ -8762,6 +8764,11 @@ window.Aura = (() => {
         const mq = window.matchMedia ? window.matchMedia(media) : null;
         let last = window.scrollY, lastH = window.innerHeight, resizedAt = -1e9, run = 0;
         let restore = null;
+        function holdsBar(node2) {
+          const a = document.activeElement;
+          if (!node2 || !a || !node2.contains(a)) return false;
+          return !tap.current.focus || a.matches(TEXT_ENTRY);
+        }
         function update() {
           if (restore) {
             const r2 = restore;
@@ -8776,7 +8783,7 @@ window.Aura = (() => {
           const y = window.scrollY, dy = y - last;
           last = y;
           const node2 = el.current;
-          if (mq && !mq.matches || y <= from || node2 && document.activeElement && node2.contains(document.activeElement)) {
+          if (mq && !mq.matches || y <= from || holdsBar(node2)) {
             run = 0;
             setHidden(false);
             return;
@@ -8796,7 +8803,12 @@ window.Aura = (() => {
         function disarm() {
           restore = null;
         }
+        function onPress(e) {
+          restore = null;
+          tap.current.pressedAt = e.timeStamp;
+        }
         function onKey(e) {
+          tap.current.pressedAt = -1e9;
           if (e.key !== "Tab" && e.code !== "Tab") {
             if (e.key !== "Shift") restore = null;
             return;
@@ -8806,7 +8818,8 @@ window.Aura = (() => {
             tabbing = false;
           });
         }
-        function reveal() {
+        function reveal(e) {
+          tap.current.focus = e.timeStamp - tap.current.pressedAt < 1e3;
           const n3 = el.current;
           if (n3 && n3.classList.contains("is-away")) {
             n3.classList.remove("is-away");
@@ -8822,7 +8835,7 @@ window.Aura = (() => {
         document.addEventListener("keydown", onKey, true);
         window.addEventListener("wheel", disarm, { passive: true, capture: true });
         window.addEventListener("touchstart", disarm, { passive: true, capture: true });
-        window.addEventListener("pointerdown", disarm, true);
+        window.addEventListener("pointerdown", onPress, true);
         const node = el.current;
         if (node) node.addEventListener("focusin", reveal);
         if (mq && mq.addEventListener) mq.addEventListener("change", update);
@@ -8832,7 +8845,7 @@ window.Aura = (() => {
           document.removeEventListener("keydown", onKey, true);
           window.removeEventListener("wheel", disarm, true);
           window.removeEventListener("touchstart", disarm, true);
-          window.removeEventListener("pointerdown", disarm, true);
+          window.removeEventListener("pointerdown", onPress, true);
           if (node) node.removeEventListener("focusin", reveal);
           if (mq && mq.removeEventListener) mq.removeEventListener("change", update);
         };

package/dist/cjs/index.cjs

@@ -8733,8 +8733,10 @@ var React49 = __toESM(require("react"), 1);
 // src/scrollHide.ts
 var React48 = __toESM(require("react"), 1);
 var STEP = 8;
+var TEXT_ENTRY = 'textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"], input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"]';
 function useHideOnScroll(enabled, el, media, from) {
   const st = React48.useState(false), hidden = st[0], setHidden = st[1];
+  const tap = React48.useRef({ pressedAt: -1e9, focus: false });
   React48.useEffect(
     function() {
       if (!enabled || typeof window === "undefined") {
@@ -8744,6 +8746,11 @@ function useHideOnScroll(enabled, el, media, from) {
       const mq = window.matchMedia ? window.matchMedia(media) : null;
       let last = window.scrollY, lastH = window.innerHeight, resizedAt = -1e9, run = 0;
       let restore = null;
+      function holdsBar(node2) {
+        const a = document.activeElement;
+        if (!node2 || !a || !node2.contains(a)) return false;
+        return !tap.current.focus || a.matches(TEXT_ENTRY);
+      }
       function update() {
         if (restore) {
           const r2 = restore;
@@ -8758,7 +8765,7 @@ function useHideOnScroll(enabled, el, media, from) {
         const y = window.scrollY, dy = y - last;
         last = y;
         const node2 = el.current;
-        if (mq && !mq.matches || y <= from || node2 && document.activeElement && node2.contains(document.activeElement)) {
+        if (mq && !mq.matches || y <= from || holdsBar(node2)) {
           run = 0;
           setHidden(false);
           return;
@@ -8778,7 +8785,12 @@ function useHideOnScroll(enabled, el, media, from) {
       function disarm() {
         restore = null;
       }
+      function onPress(e) {
+        restore = null;
+        tap.current.pressedAt = e.timeStamp;
+      }
       function onKey(e) {
+        tap.current.pressedAt = -1e9;
         if (e.key !== "Tab" && e.code !== "Tab") {
           if (e.key !== "Shift") restore = null;
           return;
@@ -8788,7 +8800,8 @@ function useHideOnScroll(enabled, el, media, from) {
           tabbing = false;
         });
       }
-      function reveal() {
+      function reveal(e) {
+        tap.current.focus = e.timeStamp - tap.current.pressedAt < 1e3;
         const n3 = el.current;
         if (n3 && n3.classList.contains("is-away")) {
           n3.classList.remove("is-away");
@@ -8804,7 +8817,7 @@ function useHideOnScroll(enabled, el, media, from) {
       document.addEventListener("keydown", onKey, true);
       window.addEventListener("wheel", disarm, { passive: true, capture: true });
       window.addEventListener("touchstart", disarm, { passive: true, capture: true });
-      window.addEventListener("pointerdown", disarm, true);
+      window.addEventListener("pointerdown", onPress, true);
       const node = el.current;
       if (node) node.addEventListener("focusin", reveal);
       if (mq && mq.addEventListener) mq.addEventListener("change", update);
@@ -8814,7 +8827,7 @@ function useHideOnScroll(enabled, el, media, from) {
         document.removeEventListener("keydown", onKey, true);
         window.removeEventListener("wheel", disarm, true);
         window.removeEventListener("touchstart", disarm, true);
-        window.removeEventListener("pointerdown", disarm, true);
+        window.removeEventListener("pointerdown", onPress, true);
         if (node) node.removeEventListener("focusin", reveal);
         if (mq && mq.removeEventListener) mq.removeEventListener("change", update);
       };

package/dist/esm/scrollHide.js

@@ -1,8 +1,10 @@
 'use client';
 import * as React from "react";
 const STEP = 8;
+const TEXT_ENTRY = 'textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"], input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"]';
 function useHideOnScroll(enabled, el, media, from) {
   const st = React.useState(false), hidden = st[0], setHidden = st[1];
+  const tap = React.useRef({ pressedAt: -1e9, focus: false });
   React.useEffect(
     function() {
       if (!enabled || typeof window === "undefined") {
@@ -12,6 +14,11 @@ function useHideOnScroll(enabled, el, media, from) {
       const mq = window.matchMedia ? window.matchMedia(media) : null;
       let last = window.scrollY, lastH = window.innerHeight, resizedAt = -1e9, run = 0;
       let restore = null;
+      function holdsBar(node2) {
+        const a = document.activeElement;
+        if (!node2 || !a || !node2.contains(a)) return false;
+        return !tap.current.focus || a.matches(TEXT_ENTRY);
+      }
       function update() {
         if (restore) {
           const r = restore;
@@ -26,7 +33,7 @@ function useHideOnScroll(enabled, el, media, from) {
         const y = window.scrollY, dy = y - last;
         last = y;
         const node2 = el.current;
-        if (mq && !mq.matches || y <= from || node2 && document.activeElement && node2.contains(document.activeElement)) {
+        if (mq && !mq.matches || y <= from || holdsBar(node2)) {
           run = 0;
           setHidden(false);
           return;
@@ -46,7 +53,12 @@ function useHideOnScroll(enabled, el, media, from) {
       function disarm() {
         restore = null;
       }
+      function onPress(e) {
+        restore = null;
+        tap.current.pressedAt = e.timeStamp;
+      }
       function onKey(e) {
+        tap.current.pressedAt = -1e9;
         if (e.key !== "Tab" && e.code !== "Tab") {
           if (e.key !== "Shift") restore = null;
           return;
@@ -56,7 +68,8 @@ function useHideOnScroll(enabled, el, media, from) {
           tabbing = false;
         });
       }
-      function reveal() {
+      function reveal(e) {
+        tap.current.focus = e.timeStamp - tap.current.pressedAt < 1e3;
         const n = el.current;
         if (n && n.classList.contains("is-away")) {
           n.classList.remove("is-away");
@@ -72,7 +85,7 @@ function useHideOnScroll(enabled, el, media, from) {
       document.addEventListener("keydown", onKey, true);
       window.addEventListener("wheel", disarm, { passive: true, capture: true });
       window.addEventListener("touchstart", disarm, { passive: true, capture: true });
-      window.addEventListener("pointerdown", disarm, true);
+      window.addEventListener("pointerdown", onPress, true);
       const node = el.current;
       if (node) node.addEventListener("focusin", reveal);
       if (mq && mq.addEventListener) mq.addEventListener("change", update);
@@ -82,7 +95,7 @@ function useHideOnScroll(enabled, el, media, from) {
         document.removeEventListener("keydown", onKey, true);
         window.removeEventListener("wheel", disarm, true);
         window.removeEventListener("touchstart", disarm, true);
-        window.removeEventListener("pointerdown", disarm, true);
+        window.removeEventListener("pointerdown", onPress, true);
         if (node) node.removeEventListener("focusin", reveal);
         if (mq && mq.removeEventListener) mq.removeEventListener("change", update);
       };

package/package.json

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