@jirawatpyk/aura-react 5.20.0 → 5.21.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.21 — Chamber-OS addendum 21
+
+- **Table `rowHeight="density"`** (item 117): every body row is at least the density's row height (48px; 40px compact; 48px on touch screens, as DataTable — unlike the 5.20 cell padding, which stays compact on touch), and its cells' vertical padding shrinks to fit a small Button (7.5px at 48px, 3.5px compact, at most 8px), as in DataTable's `rowHeight="auto"` — so a row with a `sm` Button, an IconButton, a pill or one line of text are all the same height. Content is centred on the row unless you pass `align="top"` (footer cells centre too, as with `align="middle"`). Rows whose text wraps still grow, with the smaller padding. Header and footer row heights, stacked rows and cards (`stackBelow`), and tables without the prop are unchanged.
+- The CSS budget is 27 kB (was 26; 5.19–5.21 added read-only fields, the ActionBar start slot and even rows).
+
 ## 5.20 — Chamber-OS addendum 20, items 115–116
 
 - **Table follows the page's density** (item 115): without a `density` prop a Table takes the nearest AuraProvider's density, as its docs said — inside `AuraProvider density="compact"` the wrap carries `data-density="compact"` and cells get 8px vertical padding (were 12px). A `density` prop still wins. The padding comes from the nearest `data-density` (a provider, `<html>`, any element, or the table's own), so `comfortable` inside a compact page switches back as it does for fields. As before with an explicit `compact`, cells stay compact on touch screens. A visible change for Tables inside a compact provider or page.

package/dist/aura.bundle.js

@@ -7267,7 +7267,19 @@ window.Aura = (() => {
     return out;
   }
   var Table = React44.forwardRef(function Table2(props, ref) {
-    const { caption, captionHidden, density, stackBelow, align, bordered, stackStyle, className, children, ...rest } = props;
+    const {
+      caption,
+      captionHidden,
+      density,
+      stackBelow,
+      align,
+      bordered,
+      stackStyle,
+      rowHeight,
+      className,
+      children,
+      ...rest
+    } = props;
     const cards = !!stackBelow && stackStyle === "cards";
     const labels = stackBelow ? headerLabels(children) : null;
     if (labels && !labels.length)
@@ -7311,7 +7323,9 @@ window.Aura = (() => {
           className: cx(
             "aura-tbl",
             stackBelow && "aura-tbl--stack-" + stackBelow,
-            align === "middle" && "aura-tbl--middle",
+            /* 5.21: even rows centre their content, as DataTable's auto rows do, unless `align="top"` is asked for. */
+            (align === "middle" || rowHeight === "density" && align !== "top") && "aura-tbl--middle",
+            rowHeight === "density" && "aura-tbl--row-density",
             cards && "aura-tbl--cards",
             className
           ),

package/dist/cjs/index.cjs

@@ -7249,7 +7249,19 @@ function headerLabels(children) {
   return out;
 }
 var Table = React44.forwardRef(function Table2(props, ref) {
-  const { caption, captionHidden, density, stackBelow, align, bordered, stackStyle, className, children, ...rest } = props;
+  const {
+    caption,
+    captionHidden,
+    density,
+    stackBelow,
+    align,
+    bordered,
+    stackStyle,
+    rowHeight,
+    className,
+    children,
+    ...rest
+  } = props;
   const cards = !!stackBelow && stackStyle === "cards";
   const labels = stackBelow ? headerLabels(children) : null;
   if (labels && !labels.length)
@@ -7293,7 +7305,9 @@ var Table = React44.forwardRef(function Table2(props, ref) {
         className: cx(
           "aura-tbl",
           stackBelow && "aura-tbl--stack-" + stackBelow,
-          align === "middle" && "aura-tbl--middle",
+          /* 5.21: even rows centre their content, as DataTable's auto rows do, unless `align="top"` is asked for. */
+          (align === "middle" || rowHeight === "density" && align !== "top") && "aura-tbl--middle",
+          rowHeight === "density" && "aura-tbl--row-density",
           cards && "aura-tbl--cards",
           className
         ),

package/dist/esm/Table.js

@@ -48,7 +48,19 @@ function headerLabels(children) {
   return out;
 }
 const Table = React.forwardRef(function Table2(props, ref) {
-  const { caption, captionHidden, density, stackBelow, align, bordered, stackStyle, className, children, ...rest } = props;
+  const {
+    caption,
+    captionHidden,
+    density,
+    stackBelow,
+    align,
+    bordered,
+    stackStyle,
+    rowHeight,
+    className,
+    children,
+    ...rest
+  } = props;
   const cards = !!stackBelow && stackStyle === "cards";
   const labels = stackBelow ? headerLabels(children) : null;
   if (labels && !labels.length)
@@ -92,7 +104,9 @@ const Table = React.forwardRef(function Table2(props, ref) {
         className: cx(
           "aura-tbl",
           stackBelow && "aura-tbl--stack-" + stackBelow,
-          align === "middle" && "aura-tbl--middle",
+          /* 5.21: even rows centre their content, as DataTable's auto rows do, unless `align="top"` is asked for. */
+          (align === "middle" || rowHeight === "density" && align !== "top") && "aura-tbl--middle",
+          rowHeight === "density" && "aura-tbl--row-density",
           cards && "aura-tbl--cards",
           className
         ),

package/dist/index.d.cts

@@ -1147,6 +1147,12 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	 * each row its own framed card, spaced like DataTable's cards, with no frame around them. From the `stackBelow`
 	 * width up the table is unchanged. The table then sits in one more `div` (`.aura-tbl-cards`). */
 	stackStyle?: "list" | "cards" | undefined;
+	/** `'density'` (5.21, Chamber-OS 117): every body row is at least the density's row height (48px, 40px compact,
+	 * 48px on touch screens, as DataTable) and its cells' vertical padding shrinks to fit a small Button — so a row with
+	 * a `sm` Button, an IconButton, a pill or one line of text are all the same height, as in DataTable's
+	 * `rowHeight="auto"`. Content is centred on the row unless `align="top"`. Rows whose text wraps still grow (with the
+	 * smaller padding). Header and footer rows, and stacked rows (`stackBelow`), are unchanged. */
+	rowHeight?: "density" | undefined;
 	className?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 }

package/dist/index.d.ts

@@ -1147,6 +1147,12 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	 * each row its own framed card, spaced like DataTable's cards, with no frame around them. From the `stackBelow`
 	 * width up the table is unchanged. The table then sits in one more `div` (`.aura-tbl-cards`). */
 	stackStyle?: "list" | "cards" | undefined;
+	/** `'density'` (5.21, Chamber-OS 117): every body row is at least the density's row height (48px, 40px compact,
+	 * 48px on touch screens, as DataTable) and its cells' vertical padding shrinks to fit a small Button — so a row with
+	 * a `sm` Button, an IconButton, a pill or one line of text are all the same height, as in DataTable's
+	 * `rowHeight="auto"`. Content is centred on the row unless `align="top"`. Rows whose text wraps still grow (with the
+	 * smaller padding). Header and footer rows, and stacked rows (`stackBelow`), are unchanged. */
+	rowHeight?: "density" | undefined;
 	className?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 }

package/dist/styles.css

@@ -1697,6 +1697,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 /* 5.13 (Chamber-OS 81): align="middle" centres body and footer cells on their row; bordered={false} drops the frame and
  * the outer cells' side padding, so the table lines up with what's around it (a Card's heading). */
 .aura-tbl--middle > .aura-tbl__body > .aura-tbl__row > *, .aura-tbl--middle > .aura-tbl__foot > .aura-tbl__row > * { vertical-align: middle; }
+/* 5.21 (Chamber-OS 117) rowHeight="density": a body row is at least the density's row height (a table row's height is
+ * a minimum), and its cells' padding shrinks so a 32px small Button still fits it — 7.5px above and below at 48px,
+ * 3.5px compact, never more than 8px — as in DataTable's auto rows. Before the stacked rules, which undo it. */
+.aura-tbl--row-density > .aura-tbl__body > .aura-tbl__row { height: var(--aura-table-row-height); }
+.aura-tbl--row-density > .aura-tbl__body > .aura-tbl__row > * {
+  --aura-tbl-row-py: clamp(0px, calc((var(--aura-table-row-height) - 1px - var(--aura-button-height-sm)) / 2), var(--aura-space-2));
+  padding-top: var(--aura-tbl-row-py); padding-bottom: var(--aura-tbl-row-py);
+}
 .aura-tbl-wrap.is-flush { border: 0; border-radius: 0; background: transparent; }
 .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: 0; }
 .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: 0; }
@@ -1709,7 +1717,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-md, .aura-tbl--stack-md > .aura-tbl__body, .aura-tbl--stack-md > .aura-tbl__foot, .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { display: block; }
   .aura-tbl--stack-md > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
   .aura-tbl--stack-md > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
-  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { height: auto; padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
   .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
   .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-md > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
@@ -1731,7 +1739,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-sm, .aura-tbl--stack-sm > .aura-tbl__body, .aura-tbl--stack-sm > .aura-tbl__foot, .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { display: block; }
   .aura-tbl--stack-sm > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
   .aura-tbl--stack-sm > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
-  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { height: auto; padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
   .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
   .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-sm > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }

package/dist/styles.layer.css

@@ -1699,6 +1699,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 /* 5.13 (Chamber-OS 81): align="middle" centres body and footer cells on their row; bordered={false} drops the frame and
  * the outer cells' side padding, so the table lines up with what's around it (a Card's heading). */
 .aura-tbl--middle > .aura-tbl__body > .aura-tbl__row > *, .aura-tbl--middle > .aura-tbl__foot > .aura-tbl__row > * { vertical-align: middle; }
+/* 5.21 (Chamber-OS 117) rowHeight="density": a body row is at least the density's row height (a table row's height is
+ * a minimum), and its cells' padding shrinks so a 32px small Button still fits it — 7.5px above and below at 48px,
+ * 3.5px compact, never more than 8px — as in DataTable's auto rows. Before the stacked rules, which undo it. */
+.aura-tbl--row-density > .aura-tbl__body > .aura-tbl__row { height: var(--aura-table-row-height); }
+.aura-tbl--row-density > .aura-tbl__body > .aura-tbl__row > * {
+  --aura-tbl-row-py: clamp(0px, calc((var(--aura-table-row-height) - 1px - var(--aura-button-height-sm)) / 2), var(--aura-space-2));
+  padding-top: var(--aura-tbl-row-py); padding-bottom: var(--aura-tbl-row-py);
+}
 .aura-tbl-wrap.is-flush { border: 0; border-radius: 0; background: transparent; }
 .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: 0; }
 .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: 0; }
@@ -1711,7 +1719,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-md, .aura-tbl--stack-md > .aura-tbl__body, .aura-tbl--stack-md > .aura-tbl__foot, .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { display: block; }
   .aura-tbl--stack-md > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
   .aura-tbl--stack-md > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
-  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { height: auto; padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
   .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
   .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-md > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
@@ -1733,7 +1741,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-sm, .aura-tbl--stack-sm > .aura-tbl__body, .aura-tbl--stack-sm > .aura-tbl__foot, .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { display: block; }
   .aura-tbl--stack-sm > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
   .aura-tbl--stack-sm > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
-  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { height: auto; padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
   .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
   .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-sm > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }

package/package.json

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