@jirawatpyk/aura-react 5.77.0 → 5.79.0

package/dist/esm/FileUpload.js

@@ -26,6 +26,19 @@ function describeAccept(accept, t) {
     a = a.trim();
     if (a === "image/*") return t.images;
     if (a === "application/pdf") return "PDF";
+    const known = {
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
+      "application/vnd.openxmlformats-officedocument.presentationml.presentation": "PPTX",
+      "application/msword": "DOC",
+      "application/vnd.ms-excel": "XLS",
+      "application/vnd.ms-powerpoint": "PPT",
+      "text/plain": "TXT"
+    };
+    if (known[a]) return known[a];
+    const slash = a.indexOf("/");
+    if (slash > 0 && a.slice(slash + 1) !== "*")
+      a = a.slice(slash + 1).replace(/^(?:vnd\.|x-)/, "").replace(/\+xml$/, "");
     return a.replace(/^\./, "").toUpperCase();
   }).filter(function(x, i, arr) {
     return arr.indexOf(x) === i;

package/dist/esm/Menu.js

@@ -61,7 +61,8 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
         top = r.top - above - 4;
       } else maxHeight = below;
     }
-    const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
+    const endAligned = r.right - mw;
+    const left = Math.max(8, Math.min(endAligned >= 8 ? endAligned : r.left, window.innerWidth - mw - 8));
     setPos(function(p) {
       return p && p.top === top && p.left === left && p.maxHeight === maxHeight ? p : { top, left, maxHeight };
     });
@@ -160,12 +161,15 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
     });
     return out;
   }
+  const anyLead = items.some(function(it) {
+    return !it.separator && (!!it.icon || it.type === "radio" || it.checked !== void 0);
+  });
   function renderItem(it, i) {
     if (it.separator) return /* @__PURE__ */ React.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
     const isRadio = it.type === "radio";
     const isCheck = !isRadio && it.checked !== void 0;
     const checkAtEnd = isCheck && !!it.icon && it.checkPlacement !== "start";
-    const lead = isRadio ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck && !checkAtEnd ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React.createElement("span", { className: "aura-menu__blank" });
+    const lead = isRadio ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck && !checkAtEnd ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : anyLead ? /* @__PURE__ */ React.createElement("span", { className: "aura-menu__blank" }) : null;
     const body = [
       /* @__PURE__ */ React.createElement(React.Fragment, { key: "l" }, lead),
       /* @__PURE__ */ React.createElement("span", { key: "t", className: "aura-menu__label" }, it.label),

package/dist/esm/PageHeader.js

@@ -3,6 +3,15 @@ import * as React from "react";
 import { cx } from "./classes.js";
 const h = React.createElement;
 const LAZY = Symbol.for("react.lazy");
+const ID = /([A-Za-z0-9]+(?:-[A-Za-z0-9]+)+)/;
+function keepIds(title) {
+  if (typeof title !== "string" || title.indexOf("-") < 0) return title;
+  const parts = title.split(ID);
+  if (parts.length < 2) return title;
+  return parts.map(function(p, i) {
+    return i % 2 && /\d/.test(p) && p.length <= 24 ? h("span", { key: i, className: "aura-nowrap" }, p) : p;
+  });
+}
 function chipsOnly(node) {
   let el = 0;
   const walk = function(n) {
@@ -54,7 +63,7 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
       tabIndex: props.focusTitleOnMount ? -1 : void 0,
       "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
     },
-    props.title
+    keepIds(props.title)
   );
   const hasActions = props.actions != null && props.actions !== false;
   const hasBarActions = props.actionsBar != null && props.actionsBar !== false;

package/dist/esm/Table.js

@@ -133,6 +133,11 @@ const Table = React.forwardRef(function Table2(props, ref) {
     function check() {
       const sideways = el.scrollWidth > el.clientWidth + 1;
       wide[1](sideways);
+      if (sideways && !stackBelow && !outer && typeof window !== "undefined" && window.innerWidth < 640)
+        devWarnOnce(
+          "table-no-stack",
+          "Table" + (rest["aria-label"] ? ' "' + rest["aria-label"] + '"' : "") + " scrolls sideways at " + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} (cards or rows). It becomes the default in 6.0."
+        );
       sc[1](sideways || el.scrollHeight > el.clientHeight + 1);
     }
     check();

package/dist/esm/Tabs.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx, devWarnOnce, omit, touchClass, uid, useMaybeControlled } from "./internal.js";
+import { cx, devWarnOnce, omit, touchClass, uid, useMaybeControlled, useScrollEdges } from "./internal.js";
 import { useLinkComponent } from "./locale.js";
 const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const items = props.tabs || [], base = uid();
@@ -36,6 +36,8 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
   };
   const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented", touchClass(props.touchHeight));
   const [focusId, setFocusId] = React.useState(null);
+  const listRef = React.useRef(null);
+  useScrollEdges(listRef, asLinks);
   items.forEach(function(t) {
     const al = t.tabProps && t.tabProps["aria-label"];
     if (al && al.toLowerCase().indexOf(String(t.label).toLowerCase()) !== 0)
@@ -52,7 +54,7 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
         "aria-label": props.label,
         className: cx(rootCls, "aura-tabs--links", props.className)
       },
-      /* @__PURE__ */ React.createElement("div", { className: listCls }, items.map(function(t) {
+      /* @__PURE__ */ React.createElement("div", { ref: listRef, className: listCls }, items.map(function(t) {
         const on = t.id === cur;
         const inner = [
           t.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: t.icon }) : null,
@@ -105,7 +107,11 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
     const t = enabled[(i + enabled.length) % enabled.length];
     if (manual) setFocusId(t.id);
     else st[1](t.id);
-    if (refs.current[t.id]) refs.current[t.id].focus();
+    if (refs.current[t.id]) {
+      refs.current[t.id].focus();
+      const tab = refs.current[t.id];
+      if (typeof tab.scrollIntoView === "function") tab.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
   }
   const stop = manual && focusId && items.filter(function(t) {
     return t.id === focusId && !t.disabled;
@@ -113,6 +119,7 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
   return /* @__PURE__ */ React.createElement("div", { ref, className: cx(rootCls, props.className) }, /* @__PURE__ */ React.createElement(
     "div",
     {
+      ref: listRef,
       role: "tablist",
       "aria-label": props.label,
       className: listCls,

package/dist/esm/classes.js

@@ -16,21 +16,23 @@ function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
 }
 const warned = {};
-function devWarnOnce(key, message) {
-  if (warned[key]) return;
-  let dev = false;
+function isDev() {
   try {
-    dev = true;
+    return true;
   } catch (e) {
-    dev = false;
+    return false;
   }
-  if (!dev) return;
+}
+function devWarnOnce(key, message) {
+  if (warned[key]) return;
+  if (!isDev()) return;
   warned[key] = true;
   console.warn("[AURA] " + message);
 }
 export {
   cx,
   devWarnOnce,
+  isDev,
   omit,
   tone,
   touchClass

package/dist/esm/internal.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { cx, omit, tone, devWarnOnce, touchClass } from "./classes.js";
+import { cx, omit, tone, devWarnOnce, isDev, touchClass } from "./classes.js";
 function useMaybeControlled(value, initial, onChange) {
   const s = React.useState(initial);
   const wasSet = React.useState(value !== void 0);
@@ -217,6 +217,48 @@ function useInputModality() {
 function pointerModality() {
   setModality("pointer");
 }
+function useScrollEdges(r, key) {
+  React.useEffect(
+    function() {
+      const el = r.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      let raf = 0;
+      const mark = function() {
+        raf = 0;
+        const max = el.scrollWidth - el.clientWidth;
+        const x = Math.abs(el.scrollLeft);
+        const v = ((x > 1 ? "start " : "") + (x < max - 1 ? "end" : "")).trim();
+        if ((el.getAttribute("data-aura-more") || "") === v) return;
+        if (v) el.setAttribute("data-aura-more", v);
+        else el.removeAttribute("data-aura-more");
+      };
+      const on = function() {
+        if (!raf) raf = requestAnimationFrame(mark);
+      };
+      mark();
+      el.addEventListener("scroll", on, { passive: true });
+      const ro = new ResizeObserver(on);
+      ro.observe(el);
+      Array.prototype.forEach.call(el.children, function(c) {
+        ro.observe(c);
+      });
+      const mo = new MutationObserver(function() {
+        Array.prototype.forEach.call(el.children, function(c) {
+          ro.observe(c);
+        });
+        on();
+      });
+      mo.observe(el, { childList: true });
+      return function() {
+        cancelAnimationFrame(raf);
+        el.removeEventListener("scroll", on);
+        ro.disconnect();
+        mo.disconnect();
+      };
+    },
+    [key]
+  );
+}
 export {
   FOCUSABLE,
   FilterSheet,
@@ -229,6 +271,7 @@ export {
   fixedTrapped,
   focusFirst,
   inClosedDetails,
+  isDev,
   isTabStop,
   omit,
   plainClick,
@@ -241,5 +284,6 @@ export {
   useIsoLayoutEffect,
   useMaybeControlled,
   useMergedRef,
-  useMounted
+  useMounted,
+  useScrollEdges
 };

package/dist/esm/theme.js

@@ -131,6 +131,7 @@ function createTheme(opts) {
   L["accent-violet"] = L["fg-accent"];
   L["focus-ring"] = fit(b[700], lightGrounds.concat([b[50]]), 3, -1);
   L["bg-selected"] = b[50];
+  L["calendar-range-bg"] = b[100];
   L["status-progress-bg"] = b[100];
   L["status-progress-fg"] = fit(b[800], [b[100]], 4.5, -1);
   L["alert-info-bg"] = b[50];
@@ -170,6 +171,7 @@ function createTheme(opts) {
   D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
   D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   D["nav-active-edge"] = D["control-checked-bg"];
+  D["calendar-range-bg"] = D["bg-selected"];
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -227,6 +229,7 @@ function createTheme(opts) {
   check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
   check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
   check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
+  check("light", "fg-primary", "calendar-range-bg", 4.5, INK, L["calendar-range-bg"]);
   check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
   check("dark", "status-progress-fg", "status-progress-bg", 4.5, D["status-progress-fg"], D["status-progress-bg"]);
   check("light", "alert-info-fg", "alert-info-bg", 4.5, L["alert-info-fg"], L["alert-info-bg"]);

package/dist/esm/tiles.js

@@ -27,6 +27,21 @@ const STATUS_WORD = {
   ok: "statusOk",
   unknown: "statusUnknown"
 };
+function breakAtDots(title) {
+  if (typeof title !== "string" || !/[./][A-Za-z]/.test(title)) return title;
+  const out = [];
+  let run = "";
+  for (let i = 0; i < title.length; i++) {
+    const c = title.charAt(i);
+    run += c;
+    if ((c === "." || c === "/") && i + 1 < title.length && /[A-Za-z]/.test(title.charAt(i + 1))) {
+      out.push(run, h("wbr", { key: i }));
+      run = "";
+    }
+  }
+  if (run) out.push(run);
+  return out;
+}
 function statusWord(status, t) {
   return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
 }
@@ -65,7 +80,7 @@ function statusTileElement(props, ref, Link, t, titleRef) {
       "span",
       { className: "aura-status-tile__head" },
       h(Icon, { name: h(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
-      h("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+      h("span", { className: "aura-status-tile__title", ref: titleRef }, breakAtDots(props.title), comma),
       h("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
       hasValue ? h(
         "span",

package/dist/server/index.cjs

@@ -780,6 +780,7 @@ function createTheme(opts) {
   L["accent-violet"] = L["fg-accent"];
   L["focus-ring"] = fit(b[700], lightGrounds.concat([b[50]]), 3, -1);
   L["bg-selected"] = b[50];
+  L["calendar-range-bg"] = b[100];
   L["status-progress-bg"] = b[100];
   L["status-progress-fg"] = fit(b[800], [b[100]], 4.5, -1);
   L["alert-info-bg"] = b[50];
@@ -819,6 +820,7 @@ function createTheme(opts) {
   D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
   D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   D["nav-active-edge"] = D["control-checked-bg"];
+  D["calendar-range-bg"] = D["bg-selected"];
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -876,6 +878,7 @@ function createTheme(opts) {
   check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
   check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
   check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
+  check("light", "fg-primary", "calendar-range-bg", 4.5, INK, L["calendar-range-bg"]);
   check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
   check("dark", "status-progress-fg", "status-progress-bg", 4.5, D["status-progress-fg"], D["status-progress-bg"]);
   check("light", "alert-info-fg", "alert-info-bg", 4.5, L["alert-info-fg"], L["alert-info-bg"]);
@@ -997,15 +1000,16 @@ function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
 }
 var warned = {};
-function devWarnOnce(key, message) {
-  if (warned[key]) return;
-  let dev = false;
+function isDev() {
   try {
-    dev = process.env.NODE_ENV !== "production";
+    return process.env.NODE_ENV !== "production";
   } catch (e) {
-    dev = false;
+    return false;
   }
-  if (!dev) return;
+}
+function devWarnOnce(key, message) {
+  if (warned[key]) return;
+  if (!isDev()) return;
   warned[key] = true;
   console.warn("[AURA] " + message);
 }
@@ -1669,6 +1673,15 @@ function TableSkeleton(props) {
 var React6 = __toESM(require("react"), 1);
 var h5 = React6.createElement;
 var LAZY = Symbol.for("react.lazy");
+var ID = /([A-Za-z0-9]+(?:-[A-Za-z0-9]+)+)/;
+function keepIds(title) {
+  if (typeof title !== "string" || title.indexOf("-") < 0) return title;
+  const parts = title.split(ID);
+  if (parts.length < 2) return title;
+  return parts.map(function(p, i) {
+    return i % 2 && /\d/.test(p) && p.length <= 24 ? h5("span", { key: i, className: "aura-nowrap" }, p) : p;
+  });
+}
 function chipsOnly(node) {
   let el = 0;
   const walk = function(n3) {
@@ -1720,7 +1733,7 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
       tabIndex: props.focusTitleOnMount ? -1 : void 0,
       "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
     },
-    props.title
+    keepIds(props.title)
   );
   const hasActions = props.actions != null && props.actions !== false;
   const hasBarActions = props.actionsBar != null && props.actionsBar !== false;
@@ -1791,6 +1804,21 @@ var STATUS_WORD = {
   ok: "statusOk",
   unknown: "statusUnknown"
 };
+function breakAtDots(title) {
+  if (typeof title !== "string" || !/[./][A-Za-z]/.test(title)) return title;
+  const out = [];
+  let run = "";
+  for (let i = 0; i < title.length; i++) {
+    const c = title.charAt(i);
+    run += c;
+    if ((c === "." || c === "/") && i + 1 < title.length && /[A-Za-z]/.test(title.charAt(i + 1))) {
+      out.push(run, h6("wbr", { key: i }));
+      run = "";
+    }
+  }
+  if (run) out.push(run);
+  return out;
+}
 function statusWord(status, t) {
   return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
 }
@@ -1829,7 +1857,7 @@ function statusTileElement(props, ref, Link, t, titleRef) {
       "span",
       { className: "aura-status-tile__head" },
       h6(Icon, { name: h6(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
-      h6("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+      h6("span", { className: "aura-status-tile__title", ref: titleRef }, breakAtDots(props.title), comma),
       h6("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
       hasValue ? h6(
         "span",

package/dist/server/index.js

@@ -713,6 +713,7 @@ function createTheme(opts) {
   L["accent-violet"] = L["fg-accent"];
   L["focus-ring"] = fit(b[700], lightGrounds.concat([b[50]]), 3, -1);
   L["bg-selected"] = b[50];
+  L["calendar-range-bg"] = b[100];
   L["status-progress-bg"] = b[100];
   L["status-progress-fg"] = fit(b[800], [b[100]], 4.5, -1);
   L["alert-info-bg"] = b[50];
@@ -752,6 +753,7 @@ function createTheme(opts) {
   D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
   D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   D["nav-active-edge"] = D["control-checked-bg"];
+  D["calendar-range-bg"] = D["bg-selected"];
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -809,6 +811,7 @@ function createTheme(opts) {
   check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
   check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
   check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
+  check("light", "fg-primary", "calendar-range-bg", 4.5, INK, L["calendar-range-bg"]);
   check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
   check("dark", "status-progress-fg", "status-progress-bg", 4.5, D["status-progress-fg"], D["status-progress-bg"]);
   check("light", "alert-info-fg", "alert-info-bg", 4.5, L["alert-info-fg"], L["alert-info-bg"]);
@@ -930,15 +933,16 @@ function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
 }
 var warned = {};
-function devWarnOnce(key, message) {
-  if (warned[key]) return;
-  let dev = false;
+function isDev() {
   try {
-    dev = process.env.NODE_ENV !== "production";
+    return process.env.NODE_ENV !== "production";
   } catch (e) {
-    dev = false;
+    return false;
   }
-  if (!dev) return;
+}
+function devWarnOnce(key, message) {
+  if (warned[key]) return;
+  if (!isDev()) return;
   warned[key] = true;
   console.warn("[AURA] " + message);
 }
@@ -1602,6 +1606,15 @@ function TableSkeleton(props) {
 import * as React6 from "react";
 var h5 = React6.createElement;
 var LAZY = Symbol.for("react.lazy");
+var ID = /([A-Za-z0-9]+(?:-[A-Za-z0-9]+)+)/;
+function keepIds(title) {
+  if (typeof title !== "string" || title.indexOf("-") < 0) return title;
+  const parts = title.split(ID);
+  if (parts.length < 2) return title;
+  return parts.map(function(p, i) {
+    return i % 2 && /\d/.test(p) && p.length <= 24 ? h5("span", { key: i, className: "aura-nowrap" }, p) : p;
+  });
+}
 function chipsOnly(node) {
   let el = 0;
   const walk = function(n3) {
@@ -1653,7 +1666,7 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
       tabIndex: props.focusTitleOnMount ? -1 : void 0,
       "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
     },
-    props.title
+    keepIds(props.title)
   );
   const hasActions = props.actions != null && props.actions !== false;
   const hasBarActions = props.actionsBar != null && props.actionsBar !== false;
@@ -1724,6 +1737,21 @@ var STATUS_WORD = {
   ok: "statusOk",
   unknown: "statusUnknown"
 };
+function breakAtDots(title) {
+  if (typeof title !== "string" || !/[./][A-Za-z]/.test(title)) return title;
+  const out = [];
+  let run = "";
+  for (let i = 0; i < title.length; i++) {
+    const c = title.charAt(i);
+    run += c;
+    if ((c === "." || c === "/") && i + 1 < title.length && /[A-Za-z]/.test(title.charAt(i + 1))) {
+      out.push(run, h6("wbr", { key: i }));
+      run = "";
+    }
+  }
+  if (run) out.push(run);
+  return out;
+}
 function statusWord(status, t) {
   return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
 }
@@ -1762,7 +1790,7 @@ function statusTileElement(props, ref, Link, t, titleRef) {
       "span",
       { className: "aura-status-tile__head" },
       h6(Icon, { name: h6(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
-      h6("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+      h6("span", { className: "aura-status-tile__title", ref: titleRef }, breakAtDots(props.title), comma),
       h6("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
       hasValue ? h6(
         "span",