@jirawatpyk/aura-react 5.76.0 → 5.78.0

package/README.md

@@ -186,6 +186,22 @@ 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.78 — visual audit, set 2 (phones)
+
+- **Bottom strips on a phone follow one rule:** ActionBar's edge strip (`look="edge"`, `edgeBelow`) now lays out as PageHeader's bar (5.48) — the status on its own row at the top, the actions sharing the row under it (an IconButton keeps its square; labels too long to share take a row each, as PageHeader's) — and both strips are 16px from either side, the page's phone gutter (they were 16 and 12). `edgeBelow="md"` follows it up to 768px. A single label wider than the screen still overflows, as in PageHeader's strip — keep bar labels short.
+- **PageHeader `actionsFullWidthBelow`:** on a phone its buttons are `--aura-radius-md` boxes, so a label that wraps to two lines is a rounded box, not a lozenge (the ⋯ IconButton stays round) — also the header's own actions beside an `actionsBar` strip. The bottom strip keeps its pill buttons.
+- **A document number in a PageHeader title stays whole:** in a plain-text title, a short token with a digit and a hyphen ("Invoice SC-2026-900001") never breaks at its hyphens; the line breaks before it. The text is unchanged (a `.aura-nowrap` span, a utility you can use too).
+- **DataTable cards with `columnControls`:** the column picker's slot no longer squeezes the card's title (it took 48px of the first line).
+- **StatusTile:** a host or a path in a plain-text title ("api.example.co.th") breaks after a dot or a slash, not in the middle of a label.
+- **Tabs:** a tab list wider than its box fades the end that has more tabs (both ends once scrolled; mirrored in RTL), so a cut tab reads as "scroll for more". `data-aura-more="start" | "end" | "start end"` on the list.
+- **Combobox and TimePicker:** room is kept for the clear button only while there is one — an empty TimePicker in a narrow column showed "hh:m".
+- **Development warning:** a `DataTable` or `Table` that scrolls sideways on a screen under 640px without `stackBelow` warns once — its last columns are off screen. `stackBelow` stays opt-in in 5.x (it changes the layout) and becomes the default in 6.0.
+- **Stories:** the examples that scrolled the page sideways at 390px (fixed grids, rows that didn't wrap, fixed-width demo boxes) and the demo tables now fit a phone.
+
+## 5.77 — Chamber-OS addendum 95 follow-up (#194)
+
+- **A confirmation opens at its top on a short screen:** when a Dialog scrolls as one box (5.76) and its first focus lands in the footer — `data-autofocus` on Cancel, or a dialog with nothing to fill in — it no longer scrolls to its end on open: the title, the description and the summary of what is being confirmed are what show first, with Cancel focused below. Tab or a scroll reaches the buttons as before. A field in the body that takes the first focus is still scrolled into view (it is what you type in next). By design the focused Cancel then starts below the fold: focus is in the dialog, on the safe action, and a screen reader reads the title and description first. Above 30rem nothing changes — where the panel can't scroll, the browser keeps the focused button in view as before; a Drawer is unaffected. With `autoFocus={false}`, a footer button you focus yourself scrolls as the browser does.
+
 ## 5.76 — Chamber-OS addendum 95 (#194)
 
 - **A Dialog on a short screen scrolls as one box:** on a screen 30rem tall or less (480px at the default 16px — 400% zoom on a laptop, a phone on its side with the keyboard up), the head, the description, the body and the footer scroll together inside the dialog, with the footer at the end of the content, instead of a fixed head and footer around a body squeezed to nothing. Focus moves (`data-autofocus`, the first field, the focus trap) work as before, and a focused field scrolls into view with 16px to spare (`scroll-padding`). Above 30rem nothing changes: the footer stays fixed under a scrolling body. The same threshold as ActionBar's and AppShell's bars (5.48). Wide content in the body (a long URL, a `<pre>`) still scrolls sideways there. Scrolled to the footer, the × has scrolled away with the head — Escape and Cancel still close. A `position: sticky` element in the body doesn't stick on a short screen (it scrolls with the content). Dialog only: a Drawer keeps its fixed head and footer. A `.aura-dialog` / `.aura-dialog__body` stand-in in your CSS can go.

package/dist/aura.bundle.js

@@ -174,15 +174,16 @@ window.Aura = (() => {
     return TONES.indexOf(t) >= 0 ? t : "neutral";
   }
   var warned = {};
-  function devWarnOnce(key, message) {
-    if (warned[key]) return;
-    let dev = false;
+  function isDev() {
     try {
-      dev = true;
+      return true;
     } catch (e) {
-      dev = false;
+      return false;
     }
-    if (!dev) return;
+  }
+  function devWarnOnce(key, message) {
+    if (warned[key]) return;
+    if (!isDev()) return;
     warned[key] = true;
     console.warn("[AURA] " + message);
   }
@@ -518,6 +519,48 @@ window.Aura = (() => {
   function pointerModality() {
     setModality("pointer");
   }
+  function useScrollEdges(r2, key) {
+    React3.useEffect(
+      function() {
+        const el = r2.current;
+        if (!el || typeof ResizeObserver === "undefined") return;
+        let raf = 0;
+        const mark = function() {
+          raf = 0;
+          const max = el.scrollWidth - el.clientWidth;
+          const x = Math.abs(el.scrollLeft);
+          const v = ((x > 1 ? "start " : "") + (x < max - 1 ? "end" : "")).trim();
+          if ((el.getAttribute("data-aura-more") || "") === v) return;
+          if (v) el.setAttribute("data-aura-more", v);
+          else el.removeAttribute("data-aura-more");
+        };
+        const on = function() {
+          if (!raf) raf = requestAnimationFrame(mark);
+        };
+        mark();
+        el.addEventListener("scroll", on, { passive: true });
+        const ro = new ResizeObserver(on);
+        ro.observe(el);
+        Array.prototype.forEach.call(el.children, function(c) {
+          ro.observe(c);
+        });
+        const mo = new MutationObserver(function() {
+          Array.prototype.forEach.call(el.children, function(c) {
+            ro.observe(c);
+          });
+          on();
+        });
+        mo.observe(el, { childList: true });
+        return function() {
+          cancelAnimationFrame(raf);
+          el.removeEventListener("scroll", on);
+          ro.disconnect();
+          mo.disconnect();
+        };
+      },
+      [key]
+    );
+  }
 
   // src/display.tsx
   var React4 = __toESM(require_react(), 1);
@@ -5123,6 +5166,7 @@ window.Aura = (() => {
         prev.current = document.activeElement;
         const unlock = lockScroll();
         const el = ref.current;
+        let raf = 0;
         const inPart = function(scope) {
           if (!scope || !el) return [];
           const sel = TAB_STOPS.split(",").map(function(s) {
@@ -5133,8 +5177,20 @@ window.Aura = (() => {
         if (el && o.autoFocus !== false) {
           const auto = el.querySelector("[data-autofocus]");
           if (!focusFirst(el, auto, [inPart(o.bodySelector), inPart(o.footSelector)])) el.focus();
+          const foot = o.footSelector ? el.querySelector(o.footSelector) : null, head = el.firstElementChild, first = document.activeElement, panel = el;
+          const toTop = function() {
+            if (foot && foot.contains(first) && document.activeElement === first && panel.scrollTop > 0 && /auto|scroll/.test(getComputedStyle(panel).overflowY) && head && head.getBoundingClientRect().top < panel.getBoundingClientRect().top)
+              panel.scrollTop = 0;
+          };
+          toTop();
+          if (foot && foot.contains(first))
+            raf = requestAnimationFrame(function() {
+              toTop();
+              raf = requestAnimationFrame(toTop);
+            });
         }
         return function() {
+          cancelAnimationFrame(raf);
           unlock();
           const l = latest.current;
           const ff = l.finalFocus;
@@ -6186,6 +6242,24 @@ window.Aura = (() => {
       [measure, levelShape]
     );
     const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
+    React34.useEffect(
+      function() {
+        if (!isDev() || props.stackBelow || typeof window === "undefined" || window.innerWidth >= 640 || !wrapRef.current)
+          return;
+        const sc = wrapRef.current.querySelector(".aura-table__scroll");
+        const raf = requestAnimationFrame(function() {
+          if (sc && sc.scrollWidth > sc.clientWidth + 1)
+            devWarnOnce(
+              "datatable-no-stack",
+              'DataTable "' + props.label + '" scrolls sideways at ' + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} to show each row as a card. It becomes the default in 6.0."
+            );
+        });
+        return function() {
+          cancelAnimationFrame(raf);
+        };
+      },
+      [props.stackBelow]
+    );
     const noCardSel = !!props.hideSelectionInCards && selectable;
     useIsoLayoutEffect(
       function() {
@@ -7580,6 +7654,8 @@ window.Aura = (() => {
     };
     const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented", touchClass(props.touchHeight));
     const [focusId, setFocusId] = React36.useState(null);
+    const listRef = React36.useRef(null);
+    useScrollEdges(listRef, asLinks);
     items2.forEach(function(t) {
       const al = t.tabProps && t.tabProps["aria-label"];
       if (al && al.toLowerCase().indexOf(String(t.label).toLowerCase()) !== 0)
@@ -7596,7 +7672,7 @@ window.Aura = (() => {
           "aria-label": props.label,
           className: cx(rootCls, "aura-tabs--links", props.className)
         },
-        /* @__PURE__ */ React36.createElement("div", { className: listCls }, items2.map(function(t) {
+        /* @__PURE__ */ React36.createElement("div", { ref: listRef, className: listCls }, items2.map(function(t) {
           const on = t.id === cur2;
           const inner = [
             t.icon ? /* @__PURE__ */ React36.createElement(Icon, { key: "i", name: t.icon }) : null,
@@ -7649,7 +7725,11 @@ window.Aura = (() => {
       const t = enabled[(i + enabled.length) % enabled.length];
       if (manual) setFocusId(t.id);
       else st[1](t.id);
-      if (refs.current[t.id]) refs.current[t.id].focus();
+      if (refs.current[t.id]) {
+        refs.current[t.id].focus();
+        const tab = refs.current[t.id];
+        if (typeof tab.scrollIntoView === "function") tab.scrollIntoView({ block: "nearest", inline: "nearest" });
+      }
     }
     const stop2 = manual && focusId && items2.filter(function(t) {
       return t.id === focusId && !t.disabled;
@@ -7657,6 +7737,7 @@ window.Aura = (() => {
     return /* @__PURE__ */ React36.createElement("div", { ref, className: cx(rootCls, props.className) }, /* @__PURE__ */ React36.createElement(
       "div",
       {
+        ref: listRef,
         role: "tablist",
         "aria-label": props.label,
         className: listCls,
@@ -8169,6 +8250,15 @@ window.Aura = (() => {
   var React44 = __toESM(require_react(), 1);
   var h8 = React44.createElement;
   var LAZY = Symbol.for("react.lazy");
+  var ID = /([A-Za-z0-9]+(?:-[A-Za-z0-9]+)+)/;
+  function keepIds(title) {
+    if (typeof title !== "string" || title.indexOf("-") < 0) return title;
+    const parts = title.split(ID);
+    if (parts.length < 2) return title;
+    return parts.map(function(p, i) {
+      return i % 2 && /\d/.test(p) && p.length <= 24 ? h8("span", { key: i, className: "aura-nowrap" }, p) : p;
+    });
+  }
   function chipsOnly(node) {
     let el = 0;
     const walk = function(n3) {
@@ -8220,7 +8310,7 @@ window.Aura = (() => {
         tabIndex: props.focusTitleOnMount ? -1 : void 0,
         "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
       },
-      props.title
+      keepIds(props.title)
     );
     const hasActions = props.actions != null && props.actions !== false;
     const hasBarActions = props.actionsBar != null && props.actionsBar !== false;
@@ -8402,6 +8492,21 @@ window.Aura = (() => {
     ok: "statusOk",
     unknown: "statusUnknown"
   };
+  function breakAtDots(title) {
+    if (typeof title !== "string" || !/[./][A-Za-z]/.test(title)) return title;
+    const out = [];
+    let run = "";
+    for (let i = 0; i < title.length; i++) {
+      const c = title.charAt(i);
+      run += c;
+      if ((c === "." || c === "/") && i + 1 < title.length && /[A-Za-z]/.test(title.charAt(i + 1))) {
+        out.push(run, h9("wbr", { key: i }));
+        run = "";
+      }
+    }
+    if (run) out.push(run);
+    return out;
+  }
   function statusWord(status, t) {
     return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
   }
@@ -8440,7 +8545,7 @@ window.Aura = (() => {
         "span",
         { className: "aura-status-tile__head" },
         h9(Icon, { name: h9(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
-        h9("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+        h9("span", { className: "aura-status-tile__title", ref: titleRef }, breakAtDots(props.title), comma),
         h9("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
         hasValue ? h9(
           "span",
@@ -9271,6 +9376,11 @@ window.Aura = (() => {
       function check() {
         const sideways = el.scrollWidth > el.clientWidth + 1;
         wide[1](sideways);
+        if (sideways && !stackBelow && !outer && typeof window !== "undefined" && window.innerWidth < 640)
+          devWarnOnce(
+            "table-no-stack",
+            "Table" + (rest["aria-label"] ? ' "' + rest["aria-label"] + '"' : "") + " scrolls sideways at " + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} (cards or rows). It becomes the default in 6.0."
+          );
         sc[1](sideways || el.scrollHeight > el.clientHeight + 1);
       }
       check();

package/dist/cjs/index.cjs

@@ -156,15 +156,16 @@ function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
 }
 var warned = {};
-function devWarnOnce(key, message) {
-  if (warned[key]) return;
-  let dev = false;
+function isDev() {
   try {
-    dev = process.env.NODE_ENV !== "production";
+    return process.env.NODE_ENV !== "production";
   } catch (e) {
-    dev = false;
+    return false;
   }
-  if (!dev) return;
+}
+function devWarnOnce(key, message) {
+  if (warned[key]) return;
+  if (!isDev()) return;
   warned[key] = true;
   console.warn("[AURA] " + message);
 }
@@ -500,6 +501,48 @@ function useInputModality() {
 function pointerModality() {
   setModality("pointer");
 }
+function useScrollEdges(r2, key) {
+  React3.useEffect(
+    function() {
+      const el = r2.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      let raf = 0;
+      const mark = function() {
+        raf = 0;
+        const max = el.scrollWidth - el.clientWidth;
+        const x = Math.abs(el.scrollLeft);
+        const v = ((x > 1 ? "start " : "") + (x < max - 1 ? "end" : "")).trim();
+        if ((el.getAttribute("data-aura-more") || "") === v) return;
+        if (v) el.setAttribute("data-aura-more", v);
+        else el.removeAttribute("data-aura-more");
+      };
+      const on = function() {
+        if (!raf) raf = requestAnimationFrame(mark);
+      };
+      mark();
+      el.addEventListener("scroll", on, { passive: true });
+      const ro = new ResizeObserver(on);
+      ro.observe(el);
+      Array.prototype.forEach.call(el.children, function(c) {
+        ro.observe(c);
+      });
+      const mo = new MutationObserver(function() {
+        Array.prototype.forEach.call(el.children, function(c) {
+          ro.observe(c);
+        });
+        on();
+      });
+      mo.observe(el, { childList: true });
+      return function() {
+        cancelAnimationFrame(raf);
+        el.removeEventListener("scroll", on);
+        ro.disconnect();
+        mo.disconnect();
+      };
+    },
+    [key]
+  );
+}
 
 // src/display.tsx
 var React4 = __toESM(require("react"), 1);
@@ -5105,6 +5148,7 @@ function useModal(open, ref, opts) {
       prev.current = document.activeElement;
       const unlock = lockScroll();
       const el = ref.current;
+      let raf = 0;
       const inPart = function(scope) {
         if (!scope || !el) return [];
         const sel = TAB_STOPS.split(",").map(function(s) {
@@ -5115,8 +5159,20 @@ function useModal(open, ref, opts) {
       if (el && o.autoFocus !== false) {
         const auto = el.querySelector("[data-autofocus]");
         if (!focusFirst(el, auto, [inPart(o.bodySelector), inPart(o.footSelector)])) el.focus();
+        const foot = o.footSelector ? el.querySelector(o.footSelector) : null, head = el.firstElementChild, first = document.activeElement, panel = el;
+        const toTop = function() {
+          if (foot && foot.contains(first) && document.activeElement === first && panel.scrollTop > 0 && /auto|scroll/.test(getComputedStyle(panel).overflowY) && head && head.getBoundingClientRect().top < panel.getBoundingClientRect().top)
+            panel.scrollTop = 0;
+        };
+        toTop();
+        if (foot && foot.contains(first))
+          raf = requestAnimationFrame(function() {
+            toTop();
+            raf = requestAnimationFrame(toTop);
+          });
       }
       return function() {
+        cancelAnimationFrame(raf);
         unlock();
         const l = latest.current;
         const ff = l.finalFocus;
@@ -6168,6 +6224,24 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
     [measure, levelShape]
   );
   const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
+  React34.useEffect(
+    function() {
+      if (!isDev() || props.stackBelow || typeof window === "undefined" || window.innerWidth >= 640 || !wrapRef.current)
+        return;
+      const sc = wrapRef.current.querySelector(".aura-table__scroll");
+      const raf = requestAnimationFrame(function() {
+        if (sc && sc.scrollWidth > sc.clientWidth + 1)
+          devWarnOnce(
+            "datatable-no-stack",
+            'DataTable "' + props.label + '" scrolls sideways at ' + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} to show each row as a card. It becomes the default in 6.0."
+          );
+      });
+      return function() {
+        cancelAnimationFrame(raf);
+      };
+    },
+    [props.stackBelow]
+  );
   const noCardSel = !!props.hideSelectionInCards && selectable;
   useIsoLayoutEffect(
     function() {
@@ -7562,6 +7636,8 @@ var Tabs = React36.forwardRef(function Tabs2(props, ref) {
   };
   const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented", touchClass(props.touchHeight));
   const [focusId, setFocusId] = React36.useState(null);
+  const listRef = React36.useRef(null);
+  useScrollEdges(listRef, asLinks);
   items2.forEach(function(t) {
     const al = t.tabProps && t.tabProps["aria-label"];
     if (al && al.toLowerCase().indexOf(String(t.label).toLowerCase()) !== 0)
@@ -7578,7 +7654,7 @@ var Tabs = React36.forwardRef(function Tabs2(props, ref) {
         "aria-label": props.label,
         className: cx(rootCls, "aura-tabs--links", props.className)
       },
-      /* @__PURE__ */ React36.createElement("div", { className: listCls }, items2.map(function(t) {
+      /* @__PURE__ */ React36.createElement("div", { ref: listRef, className: listCls }, items2.map(function(t) {
         const on = t.id === cur2;
         const inner = [
           t.icon ? /* @__PURE__ */ React36.createElement(Icon, { key: "i", name: t.icon }) : null,
@@ -7631,7 +7707,11 @@ var Tabs = React36.forwardRef(function Tabs2(props, ref) {
     const t = enabled[(i + enabled.length) % enabled.length];
     if (manual) setFocusId(t.id);
     else st[1](t.id);
-    if (refs.current[t.id]) refs.current[t.id].focus();
+    if (refs.current[t.id]) {
+      refs.current[t.id].focus();
+      const tab = refs.current[t.id];
+      if (typeof tab.scrollIntoView === "function") tab.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
   }
   const stop2 = manual && focusId && items2.filter(function(t) {
     return t.id === focusId && !t.disabled;
@@ -7639,6 +7719,7 @@ var Tabs = React36.forwardRef(function Tabs2(props, ref) {
   return /* @__PURE__ */ React36.createElement("div", { ref, className: cx(rootCls, props.className) }, /* @__PURE__ */ React36.createElement(
     "div",
     {
+      ref: listRef,
       role: "tablist",
       "aria-label": props.label,
       className: listCls,
@@ -8151,6 +8232,15 @@ var React45 = __toESM(require("react"), 1);
 var React44 = __toESM(require("react"), 1);
 var h8 = React44.createElement;
 var LAZY = Symbol.for("react.lazy");
+var ID = /([A-Za-z0-9]+(?:-[A-Za-z0-9]+)+)/;
+function keepIds(title) {
+  if (typeof title !== "string" || title.indexOf("-") < 0) return title;
+  const parts = title.split(ID);
+  if (parts.length < 2) return title;
+  return parts.map(function(p, i) {
+    return i % 2 && /\d/.test(p) && p.length <= 24 ? h8("span", { key: i, className: "aura-nowrap" }, p) : p;
+  });
+}
 function chipsOnly(node) {
   let el = 0;
   const walk = function(n3) {
@@ -8202,7 +8292,7 @@ var PageHeader = React44.forwardRef(function PageHeader2(props, ref) {
       tabIndex: props.focusTitleOnMount ? -1 : void 0,
       "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
     },
-    props.title
+    keepIds(props.title)
   );
   const hasActions = props.actions != null && props.actions !== false;
   const hasBarActions = props.actionsBar != null && props.actionsBar !== false;
@@ -8384,6 +8474,21 @@ var STATUS_WORD = {
   ok: "statusOk",
   unknown: "statusUnknown"
 };
+function breakAtDots(title) {
+  if (typeof title !== "string" || !/[./][A-Za-z]/.test(title)) return title;
+  const out = [];
+  let run = "";
+  for (let i = 0; i < title.length; i++) {
+    const c = title.charAt(i);
+    run += c;
+    if ((c === "." || c === "/") && i + 1 < title.length && /[A-Za-z]/.test(title.charAt(i + 1))) {
+      out.push(run, h9("wbr", { key: i }));
+      run = "";
+    }
+  }
+  if (run) out.push(run);
+  return out;
+}
 function statusWord(status, t) {
   return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
 }
@@ -8422,7 +8527,7 @@ function statusTileElement(props, ref, Link, t, titleRef) {
       "span",
       { className: "aura-status-tile__head" },
       h9(Icon, { name: h9(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
-      h9("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+      h9("span", { className: "aura-status-tile__title", ref: titleRef }, breakAtDots(props.title), comma),
       h9("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
       hasValue ? h9(
         "span",
@@ -9253,6 +9358,11 @@ var Table = React53.forwardRef(function Table2(props, ref) {
     function check() {
       const sideways = el.scrollWidth > el.clientWidth + 1;
       wide[1](sideways);
+      if (sideways && !stackBelow && !outer && typeof window !== "undefined" && window.innerWidth < 640)
+        devWarnOnce(
+          "table-no-stack",
+          "Table" + (rest["aria-label"] ? ' "' + rest["aria-label"] + '"' : "") + " scrolls sideways at " + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} (cards or rows). It becomes the default in 6.0."
+        );
       sc[1](sideways || el.scrollHeight > el.clientHeight + 1);
     }
     check();

package/dist/esm/DataTable.js

@@ -2,7 +2,15 @@
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { useStrings, useLinkComponent } from "./locale.js";
-import { cx, devWarnOnce, useMaybeControlled, compare, useIsoLayoutEffect, useMergedRef } from "./internal.js";
+import {
+  cx,
+  devWarnOnce,
+  isDev,
+  useMaybeControlled,
+  compare,
+  useIsoLayoutEffect,
+  useMergedRef
+} from "./internal.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { Checkbox } from "./Checkbox.js";
@@ -177,6 +185,24 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     [measure, levelShape]
   );
   const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
+  React.useEffect(
+    function() {
+      if (!isDev() || props.stackBelow || typeof window === "undefined" || window.innerWidth >= 640 || !wrapRef.current)
+        return;
+      const sc = wrapRef.current.querySelector(".aura-table__scroll");
+      const raf = requestAnimationFrame(function() {
+        if (sc && sc.scrollWidth > sc.clientWidth + 1)
+          devWarnOnce(
+            "datatable-no-stack",
+            'DataTable "' + props.label + '" scrolls sideways at ' + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} to show each row as a card. It becomes the default in 6.0."
+          );
+      });
+      return function() {
+        cancelAnimationFrame(raf);
+      };
+    },
+    [props.stackBelow]
+  );
   const noCardSel = !!props.hideSelectionInCards && selectable;
   useIsoLayoutEffect(
     function() {

package/dist/esm/PageHeader.js

@@ -3,6 +3,15 @@ import * as React from "react";
 import { cx } from "./classes.js";
 const h = React.createElement;
 const LAZY = Symbol.for("react.lazy");
+const ID = /([A-Za-z0-9]+(?:-[A-Za-z0-9]+)+)/;
+function keepIds(title) {
+  if (typeof title !== "string" || title.indexOf("-") < 0) return title;
+  const parts = title.split(ID);
+  if (parts.length < 2) return title;
+  return parts.map(function(p, i) {
+    return i % 2 && /\d/.test(p) && p.length <= 24 ? h("span", { key: i, className: "aura-nowrap" }, p) : p;
+  });
+}
 function chipsOnly(node) {
   let el = 0;
   const walk = function(n) {
@@ -54,7 +63,7 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
       tabIndex: props.focusTitleOnMount ? -1 : void 0,
       "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
     },
-    props.title
+    keepIds(props.title)
   );
   const hasActions = props.actions != null && props.actions !== false;
   const hasBarActions = props.actionsBar != null && props.actionsBar !== false;

package/dist/esm/Table.js

@@ -133,6 +133,11 @@ const Table = React.forwardRef(function Table2(props, ref) {
     function check() {
       const sideways = el.scrollWidth > el.clientWidth + 1;
       wide[1](sideways);
+      if (sideways && !stackBelow && !outer && typeof window !== "undefined" && window.innerWidth < 640)
+        devWarnOnce(
+          "table-no-stack",
+          "Table" + (rest["aria-label"] ? ' "' + rest["aria-label"] + '"' : "") + " scrolls sideways at " + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} (cards or rows). It becomes the default in 6.0."
+        );
       sc[1](sideways || el.scrollHeight > el.clientHeight + 1);
     }
     check();

package/dist/esm/Tabs.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx, devWarnOnce, omit, touchClass, uid, useMaybeControlled } from "./internal.js";
+import { cx, devWarnOnce, omit, touchClass, uid, useMaybeControlled, useScrollEdges } from "./internal.js";
 import { useLinkComponent } from "./locale.js";
 const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const items = props.tabs || [], base = uid();
@@ -36,6 +36,8 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
   };
   const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented", touchClass(props.touchHeight));
   const [focusId, setFocusId] = React.useState(null);
+  const listRef = React.useRef(null);
+  useScrollEdges(listRef, asLinks);
   items.forEach(function(t) {
     const al = t.tabProps && t.tabProps["aria-label"];
     if (al && al.toLowerCase().indexOf(String(t.label).toLowerCase()) !== 0)
@@ -52,7 +54,7 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
         "aria-label": props.label,
         className: cx(rootCls, "aura-tabs--links", props.className)
       },
-      /* @__PURE__ */ React.createElement("div", { className: listCls }, items.map(function(t) {
+      /* @__PURE__ */ React.createElement("div", { ref: listRef, className: listCls }, items.map(function(t) {
         const on = t.id === cur;
         const inner = [
           t.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: t.icon }) : null,
@@ -105,7 +107,11 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
     const t = enabled[(i + enabled.length) % enabled.length];
     if (manual) setFocusId(t.id);
     else st[1](t.id);
-    if (refs.current[t.id]) refs.current[t.id].focus();
+    if (refs.current[t.id]) {
+      refs.current[t.id].focus();
+      const tab = refs.current[t.id];
+      if (typeof tab.scrollIntoView === "function") tab.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
   }
   const stop = manual && focusId && items.filter(function(t) {
     return t.id === focusId && !t.disabled;
@@ -113,6 +119,7 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
   return /* @__PURE__ */ React.createElement("div", { ref, className: cx(rootCls, props.className) }, /* @__PURE__ */ React.createElement(
     "div",
     {
+      ref: listRef,
       role: "tablist",
       "aria-label": props.label,
       className: listCls,

package/dist/esm/classes.js

@@ -16,21 +16,23 @@ function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
 }
 const warned = {};
-function devWarnOnce(key, message) {
-  if (warned[key]) return;
-  let dev = false;
+function isDev() {
   try {
-    dev = true;
+    return true;
   } catch (e) {
-    dev = false;
+    return false;
   }
-  if (!dev) return;
+}
+function devWarnOnce(key, message) {
+  if (warned[key]) return;
+  if (!isDev()) return;
   warned[key] = true;
   console.warn("[AURA] " + message);
 }
 export {
   cx,
   devWarnOnce,
+  isDev,
   omit,
   tone,
   touchClass