@jirawatpyk/aura-react 5.27.0 → 5.28.0

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

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

@@ -437,6 +437,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) {
@@ -1503,6 +1504,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;

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) {
@@ -1505,6 +1506,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;

package/package.json

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