@jirawatpyk/aura-react 5.27.0 → 5.29.0

package/dist/esm/DataTable.js

@@ -1125,23 +1125,45 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           /* @__PURE__ */ React.createElement("span", { key: "__sel", className: cx("aura-table__sel", nPinned && "is-pinned") }, /* @__PURE__ */ React.createElement("span", { className: "aura-skel aura-skel--box" }))
         );
       vis.forEach(function(c, j) {
+        const part = cardPart(c, j);
+        const action = part === "footer" || part === "actions";
+        const lines = c.pill ? 1 : Math.max(1, Math.min(10, Math.floor(Number(c.skeletonLines)) || 1));
+        const bar = function(n2) {
+          return /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              key: n2,
+              className: cx("aura-skel", c.pill && "aura-skel--pill", lines > 1 && "aura-skel--text"),
+              style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j + n2) % SKELETON_WIDTHS.length] }
+            }
+          );
+        };
+        const bars = [];
+        for (let b = 0; b < lines; b++) bars.push(bar(b));
         sk.push(
           /* @__PURE__ */ React.createElement(
             "span",
             {
               key: c.key,
-              className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
+              className: cx(
+                "aura-table__td",
+                autoRows && "aura-table__td--auto",
+                c.align === "end" && "is-end",
+                isPinned(c) && "is-pinned"
+              ),
               style: cellStyle(c, j),
-              ...cardAttrs(c, j),
-              "data-label": void 0
+              ...cardAttrs(c, j)
             },
-            /* @__PURE__ */ React.createElement(
+            action ? /* @__PURE__ */ React.createElement(
               "span",
               {
-                className: cx("aura-skel", c.pill && "aura-skel--pill"),
-                style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j) % SKELETON_WIDTHS.length] }
+                className: cx(
+                  "aura-skel aura-skel--action",
+                  part === "footer" && "is-footer",
+                  c.skeletonTouch && "is-touch"
+                )
               }
-            )
+            ) : lines > 1 ? /* @__PURE__ */ React.createElement("span", { className: "aura-skel-lines" }, bars) : bars[0]
           )
         );
       });
@@ -1150,7 +1172,16 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         /* @__PURE__ */ React.createElement("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") })
       );
       skRows.push(
-        /* @__PURE__ */ React.createElement("div", { key: "sk" + i, className: "aura-table__row aura-table__row--skeleton", "aria-hidden": true, style: rowStyle }, sk)
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            key: "sk" + i,
+            className: cx("aura-table__row aura-table__row--skeleton", autoRows && "aura-table__row--auto"),
+            "aria-hidden": true,
+            style: rowStyle
+          },
+          sk
+        )
       );
     }
   } else if (!rows.length) {

package/dist/esm/Tag.js

@@ -1,16 +1,20 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx, devWarnOnce, omit } from "./internal.js";
+import { cx, devWarnOnce, omit, useIsoLayoutEffect } from "./internal.js";
+import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./locale.js";
 import { IconCheck, IconX } from "./icons.js";
-function textOf(node) {
+function textOf(node, all) {
   if (node == null || typeof node === "boolean") return "";
   if (typeof node === "string" || typeof node === "number") return String(node);
-  if (Array.isArray(node)) return node.map(textOf).join("");
+  if (Array.isArray(node))
+    return node.map(function(n) {
+      return textOf(n, all);
+    }).join("");
   if (React.isValidElement(node)) {
     const p = node.props;
-    return p["aria-hidden"] === true || p["aria-hidden"] === "true" ? "" : textOf(p.children);
+    return !all && (p["aria-hidden"] === true || p["aria-hidden"] === "true") ? "" : textOf(p.children, all);
   }
   return "";
 }
@@ -27,9 +31,29 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
     "removeLabel",
     "touchHeight"
   ]);
+  const textRef = React.useRef(null);
+  const cutState = React.useState(false), isCut = cutState[0];
+  const check = React.useCallback(function() {
+    const el = textRef.current;
+    if (el) cutState[1](el.scrollWidth > el.clientWidth + 1);
+  }, []);
+  useIsoLayoutEffect(check);
+  useIsoLayoutEffect(
+    function() {
+      const el = textRef.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(check);
+      ro.observe(el);
+      return function() {
+        ro.disconnect();
+      };
+    },
+    [check]
+  );
+  const fullText = isCut ? textOf(props.children, true).replace(/\s+/g, " ").trim() : "";
   const inner = [
     props.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
-    /* @__PURE__ */ React.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
+    /* @__PURE__ */ React.createElement("span", { key: "t", ref: textRef, className: "aura-tag__text", title: fullText || void 0 }, props.children)
   ];
   if (selectable) {
     return /* @__PURE__ */ React.createElement(
@@ -57,16 +81,19 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
       "tag-remove-label",
       'Tag: the remove button has no name \u2014 its children have no text. Pass removeLabel (e.g. "Remove Acme AB").'
     );
-  return /* @__PURE__ */ React.createElement("span", { ...rest, ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }, inner, props.onRemove && !props.disabled ? /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      className: "aura-tag__remove",
-      "aria-label": props.removeLabel || t.remove(name),
-      onClick: props.onRemove
-    },
-    /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null), size: 12 })
-  ) : null);
+  return /* @__PURE__ */ React.createElement("span", { ...rest, ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }, inner, props.onRemove && !props.disabled ? function() {
+    const btn = /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "aura-tag__remove",
+        "aria-label": props.removeLabel || t.remove(name),
+        onClick: props.onRemove
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null), size: 12 })
+    );
+    return /* @__PURE__ */ React.createElement(Tooltip, { content: fullText, open: fullText ? void 0 : false }, btn);
+  }() : null);
 });
 export {
   Tag

package/dist/index.d.cts

@@ -114,6 +114,14 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	 * after the half-width fields (in column order; `cardOrder` doesn't move it), its label above and its text wrapping —
 	 * a reason with its evidence. Default: today's rule. The grid is unchanged by any of them. */
 	card?: "hide" | "field" | "title" | "pill" | "footer" | "wide" | undefined;
+	/** How many text lines its loading skeleton draws (5.29, Chamber-OS 134) — 2 for a cell that shows two lines (a
+	 * reason and its evidence), so the skeleton row is as tall as the real one with `rowHeight="auto"`. Default 1, at
+	 * most 10; ignored on a `pill` column. */
+	skeletonLines?: number | undefined;
+	/** For a `card: 'footer'` or `actions` column whose buttons use `touchHeight` (5.29, Chamber-OS 134): its loading
+	 * skeleton's bar is 44px below 640px and on a coarse pointer, as those buttons are. Without it the bar is the small
+	 * button's 32px. */
+	skeletonTouch?: boolean | undefined;
 	/** The order of fields in a stacked card (5.13), lowest first; the grid's column order is unchanged. Fields
 	 * without one sort by their column index (0-based). Screen readers and arrow keys follow the grid's order. */
 	cardOrder?: number | undefined;
@@ -437,6 +445,8 @@ export interface FormErrorSummaryProps {
 /** An applied filter, shown as a removable chip. */
 export interface ActiveFilter {
 	id: string;
+	/** The chip's text, "{filter}: {value}". It takes its own width in the chips row; only a chip wider than the row is
+	 * cut, and then its full text shows on hover and on the remove button's focus (5.28). */
 	label: React$1.ReactNode;
 	onRemove: () => void;
 }

package/dist/index.d.ts

@@ -114,6 +114,14 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	 * after the half-width fields (in column order; `cardOrder` doesn't move it), its label above and its text wrapping —
 	 * a reason with its evidence. Default: today's rule. The grid is unchanged by any of them. */
 	card?: "hide" | "field" | "title" | "pill" | "footer" | "wide" | undefined;
+	/** How many text lines its loading skeleton draws (5.29, Chamber-OS 134) — 2 for a cell that shows two lines (a
+	 * reason and its evidence), so the skeleton row is as tall as the real one with `rowHeight="auto"`. Default 1, at
+	 * most 10; ignored on a `pill` column. */
+	skeletonLines?: number | undefined;
+	/** For a `card: 'footer'` or `actions` column whose buttons use `touchHeight` (5.29, Chamber-OS 134): its loading
+	 * skeleton's bar is 44px below 640px and on a coarse pointer, as those buttons are. Without it the bar is the small
+	 * button's 32px. */
+	skeletonTouch?: boolean | undefined;
 	/** The order of fields in a stacked card (5.13), lowest first; the grid's column order is unchanged. Fields
 	 * without one sort by their column index (0-based). Screen readers and arrow keys follow the grid's order. */
 	cardOrder?: number | undefined;
@@ -437,6 +445,8 @@ export interface FormErrorSummaryProps {
 /** An applied filter, shown as a removable chip. */
 export interface ActiveFilter {
 	id: string;
+	/** The chip's text, "{filter}: {value}". It takes its own width in the chips row; only a chip wider than the row is
+	 * cut, and then its full text shows on hover and on the remove button's focus (5.28). */
 	label: React$1.ReactNode;
 	onRemove: () => void;
 }

package/dist/styles.css

@@ -321,6 +321,7 @@ a.aura-icon-btn { text-decoration: none; }
   .aura-btn.aura-btn--touch.aura-btn--full { height: auto; min-height: var(--aura-touch-target); }
   .aura-icon-btn.aura-icon-btn--touch { width: var(--aura-touch-target); height: var(--aura-touch-target); }
   .aura-tag.aura-tag--touch { min-height: var(--aura-touch-target); }
+  .aura-filterbar__clear { min-height: var(--aura-touch-target); } /* 5.28 (Chamber-OS 133) */
 }
 /* Touch: same 32px look, a 44px hit area around it (WCAG 2.5.5). */
 @media (pointer: coarse) {
@@ -337,6 +338,16 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-skel--pill { width: 72px; height: 20px; }
 .aura-skel--box { width: var(--aura-icon-sm); height: var(--aura-icon-sm); border-radius: var(--aura-radius-xs); }
 @media (prefers-reduced-motion: reduce) { .aura-skel { animation: none; } }
+/* 5.29 (Chamber-OS 134): a DataTable skeleton row stands in for the real one — text lines (skeletonLines) on the 20px
+ * line, and a button-height bar where row actions go: 32px, or 44px under the touchHeight rule with the column's
+ * skeletonTouch; full width in a card footer. */
+.aura-skel--action { flex: none; width: var(--aura-button-height-sm); height: var(--aura-button-height-sm); border-radius: var(--aura-radius-md); }
+.aura-skel--action.is-footer { width: 100%; }
+.aura-table__td.is-end > .aura-skel-lines { align-items: flex-end; }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-skel--action.is-touch { height: var(--aura-touch-target); }
+  .aura-skel--action.is-touch:not(.is-footer) { width: var(--aura-touch-target); }
+}
 .aura-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 
 /* Empty state */
@@ -1503,6 +1514,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterbar__count { font-size: 13px; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
 .aura-filterbar__actions { display: flex; align-items: center; gap: var(--aura-space-2); }
 .aura-filterbar__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+/* 5.28 (Chamber-OS 132): an applied-filter chip takes its text's width, cut only when it is wider than the row. */
+.aura-filterbar__chips > .aura-tag { max-width: 100%; min-width: 0; }
+/* A long chip mustn't widen the bar or anything around it: the row's width comes from the bar, never from its chips.
+ * (So a FilterBar with only chips needs a width from its parent — it is full width in a block.) */
+.aura-filterbar__chips { contain: inline-size; }
+.aura-filterbar__chips > .aura-tag .aura-tag__text { max-width: none; min-width: 0; }
 .aura-filterbar__clear {
   border: 0; background: transparent; padding: 4px var(--aura-space-2); border-radius: var(--aura-radius-sm);
   font: inherit; font-size: 13px; font-weight: 500; color: var(--aura-fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
@@ -1945,6 +1962,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   /* 5.22: a footer row ends the card with no margin under it, so the card keeps its full 16px. */
   .aura-table__row:has(> [data-card='footer']:not(.is-blank)) { padding-bottom: var(--aura-space-4); }
   .aura-table__row--skeleton .aura-table__td { display: flex; }
+  /* 5.29: a skeleton field shows its label above a bar on the field's value line (15px: 13px text, normal line
+   * height — 1lh, so it follows the font), as a real field does; the title keeps the 20px line. */
+  .aura-table__row--skeleton .aura-table__td[data-label] { flex-direction: column; align-items: stretch; }
+  .aura-table__row--skeleton .aura-table__td > .aura-skel:not(.aura-skel--pill):not(.aura-skel--action) { margin: 5px 0; }
+  .aura-table__row--skeleton .aura-table__td[data-label] .aura-skel:not(.aura-skel--pill):not(.aura-skel--action) { margin: 2.5px 0; margin: calc((1lh - 10px) / 2) 0; }
+  .aura-table__row--skeleton .aura-table__td > .aura-skel-lines { align-items: flex-start; }
   .aura-table__total { background: var(--aura-bg-canvas); }
   .aura-table__total > .is-blank { display: none; }
   .aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); background: var(--aura-bg-surface); }

package/dist/styles.layer.css

@@ -323,6 +323,7 @@ a.aura-icon-btn { text-decoration: none; }
   .aura-btn.aura-btn--touch.aura-btn--full { height: auto; min-height: var(--aura-touch-target); }
   .aura-icon-btn.aura-icon-btn--touch { width: var(--aura-touch-target); height: var(--aura-touch-target); }
   .aura-tag.aura-tag--touch { min-height: var(--aura-touch-target); }
+  .aura-filterbar__clear { min-height: var(--aura-touch-target); } /* 5.28 (Chamber-OS 133) */
 }
 /* Touch: same 32px look, a 44px hit area around it (WCAG 2.5.5). */
 @media (pointer: coarse) {
@@ -339,6 +340,16 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-skel--pill { width: 72px; height: 20px; }
 .aura-skel--box { width: var(--aura-icon-sm); height: var(--aura-icon-sm); border-radius: var(--aura-radius-xs); }
 @media (prefers-reduced-motion: reduce) { .aura-skel { animation: none; } }
+/* 5.29 (Chamber-OS 134): a DataTable skeleton row stands in for the real one — text lines (skeletonLines) on the 20px
+ * line, and a button-height bar where row actions go: 32px, or 44px under the touchHeight rule with the column's
+ * skeletonTouch; full width in a card footer. */
+.aura-skel--action { flex: none; width: var(--aura-button-height-sm); height: var(--aura-button-height-sm); border-radius: var(--aura-radius-md); }
+.aura-skel--action.is-footer { width: 100%; }
+.aura-table__td.is-end > .aura-skel-lines { align-items: flex-end; }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-skel--action.is-touch { height: var(--aura-touch-target); }
+  .aura-skel--action.is-touch:not(.is-footer) { width: var(--aura-touch-target); }
+}
 .aura-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 
 /* Empty state */
@@ -1505,6 +1516,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterbar__count { font-size: 13px; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
 .aura-filterbar__actions { display: flex; align-items: center; gap: var(--aura-space-2); }
 .aura-filterbar__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+/* 5.28 (Chamber-OS 132): an applied-filter chip takes its text's width, cut only when it is wider than the row. */
+.aura-filterbar__chips > .aura-tag { max-width: 100%; min-width: 0; }
+/* A long chip mustn't widen the bar or anything around it: the row's width comes from the bar, never from its chips.
+ * (So a FilterBar with only chips needs a width from its parent — it is full width in a block.) */
+.aura-filterbar__chips { contain: inline-size; }
+.aura-filterbar__chips > .aura-tag .aura-tag__text { max-width: none; min-width: 0; }
 .aura-filterbar__clear {
   border: 0; background: transparent; padding: 4px var(--aura-space-2); border-radius: var(--aura-radius-sm);
   font: inherit; font-size: 13px; font-weight: 500; color: var(--aura-fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
@@ -1947,6 +1964,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   /* 5.22: a footer row ends the card with no margin under it, so the card keeps its full 16px. */
   .aura-table__row:has(> [data-card='footer']:not(.is-blank)) { padding-bottom: var(--aura-space-4); }
   .aura-table__row--skeleton .aura-table__td { display: flex; }
+  /* 5.29: a skeleton field shows its label above a bar on the field's value line (15px: 13px text, normal line
+   * height — 1lh, so it follows the font), as a real field does; the title keeps the 20px line. */
+  .aura-table__row--skeleton .aura-table__td[data-label] { flex-direction: column; align-items: stretch; }
+  .aura-table__row--skeleton .aura-table__td > .aura-skel:not(.aura-skel--pill):not(.aura-skel--action) { margin: 5px 0; }
+  .aura-table__row--skeleton .aura-table__td[data-label] .aura-skel:not(.aura-skel--pill):not(.aura-skel--action) { margin: 2.5px 0; margin: calc((1lh - 10px) / 2) 0; }
+  .aura-table__row--skeleton .aura-table__td > .aura-skel-lines { align-items: flex-start; }
   .aura-table__total { background: var(--aura-bg-canvas); }
   .aura-table__total > .is-blank { display: none; }
   .aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); background: var(--aura-bg-surface); }

package/package.json

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