@jirawatpyk/aura-react 5.36.0 → 5.37.0

package/README.md

@@ -186,6 +186,11 @@ 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.37 — DxT Monitor requests 17–18
+
+- **PageHeader `actionsFullWidthBelow`** (request 17): `'sm'`, `'md'` or `'lg'` — below 640px, 768px or 1024px the actions take the whole row under the text, 12px apart, and the buttons share each line in equal widths (unless a label needs more), so they reach the page's edge: three buttons on a phone fill two rows (two halves, then one across) when their labels don't fit on one, and a single button spans the row. A button inside a DropdownMenu, Tooltip or Popover fills its share too; an IconButton (bare, or as a menu's trigger) keeps its square size — so a line with only IconButtons on it doesn't reach the edge (one that wraps alone sits at the start); put them on the first line. Labels don't wrap: a label wider than the row overflows, as before — keep phone labels short, or give that one Button `fullWidth`. For a fixed arrangement, pass your own grid as the one child — it spans the row too. Wider than the breakpoint, the actions hug their content at the end, 8px apart, as before. A class on the root, so it works from `/server` too. Apps that stretched the actions with their own selector (e.g. `max-md:[&>:last-child]:w-full`) can drop it.
+- **SegmentedControl `touchHeight`** (request 18): 44px options — `size="sm"` too, icon-only options 44px square — with `true` below 640px or on a coarse pointer (the same rule as Button's and TextField's `touchHeight`), or `'always'` at every width. A phone-sized viewport with a mouse (or an emulated phone in end-to-end tests) now gets the touch size too. Without it nothing changes: options are as tall as a field beside them with a mouse, and 44px on a coarse pointer. DxT asked for "below md"; it follows AURA's other `touchHeight` props (below 640px) so a form's fields, buttons and choices change size together — at 390px it is the same.
+
 ## 5.36 — DxT Monitor requests 15–16
 
 - **Focus rings in table cells** (request 15): a DataTable cell clips its text (ellipsis) but no longer the focus ring of a link or button in it. The clip has a 4px margin (`overflow: clip` + `overflow-clip-margin`), so content wider than its cell (a pill, a button) now shows up to 4px past its edge. In the first data column a focused link or button sits just above the row's sticky start gutter or pinned checkbox column (which painted over the ring's start side) — not while the table is scrolled sideways, and never above the sticky header, totals or pinned columns — and a plain `<a>` or `<button>` of yours in a cell gets AURA's ring instead of the browser's (zero specificity, so your own focus style wins). Safari has no `overflow-clip-margin`: there rings in cells are drawn just inside the control, whole. Apps that set `overflow: clip` on `.aura-table__td` themselves can drop it.

package/dist/aura.bundle.js

@@ -7663,9 +7663,18 @@ window.Aura = (() => {
         attrs2[k] = props[k];
     });
     const level = props.headingLevel || 1;
+    const below2 = props.actionsFullWidthBelow;
     return h8(
       "div",
-      Object.assign(attrs2, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+      Object.assign(attrs2, {
+        ref,
+        className: cx(
+          "aura-page-header",
+          (below2 === "sm" || below2 === "md" || below2 === "lg") && "aura-page-header--actions-full-below-" + below2,
+          props.className
+        ),
+        style: props.style
+      }),
       h8(
         "div",
         { className: "aura-page-header__text" },
@@ -10239,6 +10248,7 @@ window.Aura = (() => {
             "aura-segmented",
             props.size === "sm" && "aura-segmented--sm",
             props.fullWidth && "is-full",
+            touchClass(props.touchHeight),
             props.disabled && "is-disabled",
             props.className
           )

package/dist/cjs/index.cjs

@@ -7645,9 +7645,18 @@ var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
       attrs2[k] = props[k];
   });
   const level = props.headingLevel || 1;
+  const below2 = props.actionsFullWidthBelow;
   return h8(
     "div",
-    Object.assign(attrs2, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    Object.assign(attrs2, {
+      ref,
+      className: cx(
+        "aura-page-header",
+        (below2 === "sm" || below2 === "md" || below2 === "lg") && "aura-page-header--actions-full-below-" + below2,
+        props.className
+      ),
+      style: props.style
+    }),
     h8(
       "div",
       { className: "aura-page-header__text" },
@@ -10221,6 +10230,7 @@ var SegmentedControl = React67.forwardRef(
           "aura-segmented",
           props.size === "sm" && "aura-segmented--sm",
           props.fullWidth && "is-full",
+          touchClass(props.touchHeight),
           props.disabled && "is-disabled",
           props.className
         )

package/dist/esm/PageHeader.js

@@ -9,9 +9,18 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
       attrs[k] = props[k];
   });
   const level = props.headingLevel || 1;
+  const below = props.actionsFullWidthBelow;
   return h(
     "div",
-    Object.assign(attrs, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    Object.assign(attrs, {
+      ref,
+      className: cx(
+        "aura-page-header",
+        (below === "sm" || below === "md" || below === "lg") && "aura-page-header--actions-full-below-" + below,
+        props.className
+      ),
+      style: props.style
+    }),
     h(
       "div",
       { className: "aura-page-header__text" },

package/dist/esm/SegmentedControl.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { Icon } from "./Icon.js";
 import { cx, uid, useMaybeControlled } from "./internal.js";
+import { touchClass } from "./classes.js";
 import { useAutoTip } from "./autoTip.js";
 function toOpt(o) {
   return typeof o === "object" ? o : { value: o, label: o };
@@ -65,6 +66,7 @@ const SegmentedControl = React.forwardRef(
           "aura-segmented",
           props.size === "sm" && "aura-segmented--sm",
           props.fullWidth && "is-full",
+          touchClass(props.touchHeight),
           props.disabled && "is-disabled",
           props.className
         )

package/dist/index.d.cts

@@ -1036,6 +1036,10 @@ export interface SegmentedControlProps {
 	size?: "sm" | "md" | undefined;
 	/** Stretch across the container, segments equal width. */
 	fullWidth?: boolean | undefined;
+	/** 5.37 (DxT Monitor #18): 44px options (`sm` too; icon-only options 44px square). `true`: below 640px or on a
+	 * coarse pointer, as Button's and TextField's `touchHeight`; `'always'`: at every width. Without it, options are
+	 * 44px on a coarse pointer only. */
+	touchHeight?: TouchHeight | undefined;
 	disabled?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
@@ -1893,6 +1897,11 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
+	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole
+	 * row under the text, 12px apart, and its buttons share each line in equal widths unless a label needs more (a trigger inside a DropdownMenu,
+	 * Tooltip or Popover too; IconButtons keep their size) — a single Button or your own grid spans the row. Wider
+	 * than that, the actions hug their content at the end as before. */
+	actionsFullWidthBelow?: "sm" | "md" | "lg" | undefined;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */

package/dist/index.d.ts

@@ -1036,6 +1036,10 @@ export interface SegmentedControlProps {
 	size?: "sm" | "md" | undefined;
 	/** Stretch across the container, segments equal width. */
 	fullWidth?: boolean | undefined;
+	/** 5.37 (DxT Monitor #18): 44px options (`sm` too; icon-only options 44px square). `true`: below 640px or on a
+	 * coarse pointer, as Button's and TextField's `touchHeight`; `'always'`: at every width. Without it, options are
+	 * 44px on a coarse pointer only. */
+	touchHeight?: TouchHeight | undefined;
 	disabled?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
@@ -1893,6 +1897,11 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
+	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole
+	 * row under the text, 12px apart, and its buttons share each line in equal widths unless a label needs more (a trigger inside a DropdownMenu,
+	 * Tooltip or Popover too; IconButtons keep their size) — a single Button or your own grid spans the row. Wider
+	 * than that, the actions hug their content at the end as before. */
+	actionsFullWidthBelow?: "sm" | "md" | "lg" | undefined;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */

package/dist/server/index.cjs

@@ -1425,9 +1425,18 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
       attrs2[k] = props[k];
   });
   const level = props.headingLevel || 1;
+  const below = props.actionsFullWidthBelow;
   return h4(
     "div",
-    Object.assign(attrs2, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    Object.assign(attrs2, {
+      ref,
+      className: cx(
+        "aura-page-header",
+        (below === "sm" || below === "md" || below === "lg") && "aura-page-header--actions-full-below-" + below,
+        props.className
+      ),
+      style: props.style
+    }),
     h4(
       "div",
       { className: "aura-page-header__text" },

package/dist/server/index.d.cts

@@ -496,6 +496,11 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
+	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole
+	 * row under the text, 12px apart, and its buttons share each line in equal widths unless a label needs more (a trigger inside a DropdownMenu,
+	 * Tooltip or Popover too; IconButtons keep their size) — a single Button or your own grid spans the row. Wider
+	 * than that, the actions hug their content at the end as before. */
+	actionsFullWidthBelow?: "sm" | "md" | "lg" | undefined;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */

package/dist/server/index.d.ts

@@ -496,6 +496,11 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
+	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole
+	 * row under the text, 12px apart, and its buttons share each line in equal widths unless a label needs more (a trigger inside a DropdownMenu,
+	 * Tooltip or Popover too; IconButtons keep their size) — a single Button or your own grid spans the row. Wider
+	 * than that, the actions hug their content at the end as before. */
+	actionsFullWidthBelow?: "sm" | "md" | "lg" | undefined;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */

package/dist/server/index.js

@@ -1361,9 +1361,18 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
       attrs2[k] = props[k];
   });
   const level = props.headingLevel || 1;
+  const below = props.actionsFullWidthBelow;
   return h4(
     "div",
-    Object.assign(attrs2, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    Object.assign(attrs2, {
+      ref,
+      className: cx(
+        "aura-page-header",
+        (below === "sm" || below === "md" || below === "lg") && "aura-page-header--actions-full-below-" + below,
+        props.className
+      ),
+      style: props.style
+    }),
     h4(
       "div",
       { className: "aura-page-header__text" },

package/dist/styles.css

@@ -1138,6 +1138,30 @@ a.aura-tab { text-decoration: none; }
 .aura-page-header__breadcrumb { min-width: 0; } /* 5.33 (DxT Monitor #7): Breadcrumb keeps its own type */
 .aura-page-header__meta { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
 .aura-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+/* 5.37 (DxT Monitor #17): actionsFullWidthBelow — the actions take the row under the text; their children share
+ * each line equally (wrapping when a label won't fit), a trigger inside a DropdownMenu, Tooltip or Popover wrapper
+ * fills it, and icon buttons keep their size. The :has rule is alone so older browsers drop only it. */
+@media (max-width: 639.98px) {
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > .aura-icon-btn { flex: none; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
+}
+@media (max-width: 767.98px) {
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > .aura-icon-btn { flex: none; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
+}
+@media (max-width: 1023.98px) {
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > .aura-icon-btn { flex: none; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
+}
 @media (min-width: 640px) { .aura-page-header__title { font-size: 36px; } }
 /* Thai marks need the room a 1.15 line takes away. */
 .aura-page-header__title:lang(th) { line-height: 1.4; letter-spacing: 0; }
@@ -1530,6 +1554,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-segmented--sm .aura-segmented__option { height: 24px; padding: 0 var(--aura-space-3); font-size: 12px; }
 .aura-segmented--sm .aura-segmented__option.is-icon { width: 28px; padding: 0; }
 .aura-segmented.is-disabled { opacity: var(--aura-disabled-opacity); }
+/* 5.37 (DxT Monitor #18): touchHeight — 44px options below 640px or on a coarse pointer (is-touch), or always. */
+.aura-segmented.is-touch-always .aura-segmented__option { height: var(--aura-touch-target); }
+.aura-segmented.is-touch-always .aura-segmented__option.is-icon { width: var(--aura-touch-target); }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-segmented.is-touch .aura-segmented__option { height: var(--aura-touch-target); }
+  .aura-segmented.is-touch .aura-segmented__option.is-icon { width: var(--aura-touch-target); }
+}
 /* 5.10 (Chamber-OS 72): Tabs variant="segmented" — the tablist wears SegmentedControl's track and pills. The focus
  * ring is drawn inside the pill, so neither the scrolling list (many tabs on a phone) nor the next pill can cover it;
  * full-width tabs share the track but never shrink below their label (the track scrolls instead). The phone rule's

package/dist/styles.layer.css

@@ -1140,6 +1140,30 @@ a.aura-tab { text-decoration: none; }
 .aura-page-header__breadcrumb { min-width: 0; } /* 5.33 (DxT Monitor #7): Breadcrumb keeps its own type */
 .aura-page-header__meta { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
 .aura-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+/* 5.37 (DxT Monitor #17): actionsFullWidthBelow — the actions take the row under the text; their children share
+ * each line equally (wrapping when a label won't fit), a trigger inside a DropdownMenu, Tooltip or Popover wrapper
+ * fills it, and icon buttons keep their size. The :has rule is alone so older browsers drop only it. */
+@media (max-width: 639.98px) {
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > .aura-icon-btn { flex: none; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
+}
+@media (max-width: 767.98px) {
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > .aura-icon-btn { flex: none; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
+}
+@media (max-width: 1023.98px) {
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > .aura-icon-btn { flex: none; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
+}
 @media (min-width: 640px) { .aura-page-header__title { font-size: 36px; } }
 /* Thai marks need the room a 1.15 line takes away. */
 .aura-page-header__title:lang(th) { line-height: 1.4; letter-spacing: 0; }
@@ -1532,6 +1556,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-segmented--sm .aura-segmented__option { height: 24px; padding: 0 var(--aura-space-3); font-size: 12px; }
 .aura-segmented--sm .aura-segmented__option.is-icon { width: 28px; padding: 0; }
 .aura-segmented.is-disabled { opacity: var(--aura-disabled-opacity); }
+/* 5.37 (DxT Monitor #18): touchHeight — 44px options below 640px or on a coarse pointer (is-touch), or always. */
+.aura-segmented.is-touch-always .aura-segmented__option { height: var(--aura-touch-target); }
+.aura-segmented.is-touch-always .aura-segmented__option.is-icon { width: var(--aura-touch-target); }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-segmented.is-touch .aura-segmented__option { height: var(--aura-touch-target); }
+  .aura-segmented.is-touch .aura-segmented__option.is-icon { width: var(--aura-touch-target); }
+}
 /* 5.10 (Chamber-OS 72): Tabs variant="segmented" — the tablist wears SegmentedControl's track and pills. The focus
  * ring is drawn inside the pill, so neither the scrolling list (many tabs on a phone) nor the next pill can cover it;
  * full-width tabs share the track but never shrink below their label (the track scrolls instead). The phone rule's

package/package.json

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