@jirawatpyk/aura-react 5.76.0 → 5.77.0

package/README.md

@@ -186,6 +186,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.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

@@ -5123,6 +5123,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 +5134,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;

package/dist/cjs/index.cjs

@@ -5105,6 +5105,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 +5116,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;

package/dist/esm/useModal.js

@@ -36,6 +36,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) {
@@ -46,8 +47,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;

package/package.json

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