@jirawatpyk/aura-react 5.11.0 → 5.13.0

package/dist/esm/DataTable.js

@@ -156,6 +156,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     [measure, levelShape]
   );
   const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
+  const noCardSel = !!props.hideSelectionInCards && selectable;
   useIsoLayoutEffect(
     function() {
       if (measure && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
@@ -256,9 +257,38 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   const pillKey = (vis.filter(function(c, i) {
     return i > 0 && c.pill;
   })[0] || { key: "" }).key;
+  const ownTitle = vis.some(function(c) {
+    return c.card === "title";
+  }), ownPill = vis.some(function(c) {
+    return c.card === "pill";
+  });
+  let autoTitle = -1;
+  if (!ownTitle) {
+    for (let i = 0; i < vis.length; i++)
+      if (!vis[i].card && (i === 0 || !vis[i].actions)) {
+        autoTitle = i;
+        break;
+      }
+  }
   function cardPart(c, i) {
-    return i === 0 ? "title" : c.key === pillKey ? "pill" : c.actions ? "actions" : "field";
+    if (c.card) return c.card;
+    if (i === autoTitle) return "title";
+    if (c.key === pillKey && !ownPill) return "pill";
+    return c.actions ? "actions" : "field";
   }
+  const cardRank = {};
+  if (vis.some(function(c) {
+    return c.cardOrder != null;
+  }))
+    vis.map(function(c, i) {
+      return { c, i, o: c.cardOrder != null ? c.cardOrder : i };
+    }).filter(function(x) {
+      return cardPart(x.c, x.i) === "field";
+    }).sort(function(a, b) {
+      return a.o - b.o || a.i - b.i;
+    }).forEach(function(x, n) {
+      cardRank[x.c.key] = n;
+    });
   function cardAttrs(c, i) {
     const part = cardPart(c, i), lv = hideLevel(c);
     return {
@@ -300,6 +330,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       s["--aura-cell-w"] = w + "px";
     }
     if (isPinned(c)) s["--aura-cell-left"] = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + ")";
+    if (cardRank[c.key] != null) s["--aura-card-order"] = String(5 + cardRank[c.key]);
     return s;
   }
   const sortCol = sort && sort.key ? byKey[sort.key] : void 0;
@@ -440,9 +471,37 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   function colAt(ci) {
     return selectable ? ci === 0 ? null : vis[ci - 1] : vis[ci];
   }
+  const cardHidden = [];
+  for (let ci = 0; ci < nCols; ci++) {
+    const col = colAt(ci);
+    cardHidden.push(stacked && (col ? cardPart(col, vis.indexOf(col)) === "hide" : noCardSel));
+  }
+  function nearestShown(c, dir, ok) {
+    if (ok(c)) return c;
+    for (let d = 1; d < nCols; d++) {
+      const a = c + d * dir, b = c - d * dir;
+      if (a >= 0 && a < nCols && ok(a)) return a;
+      if (b >= 0 && b < nCols && ok(b)) return b;
+    }
+    return c;
+  }
+  const acShown = nearestShown(ac, 1, function(cc) {
+    return !cardHidden[cc];
+  });
+  const lastFocus = React.useRef(null);
+  React.useEffect(
+    function() {
+      const was = lastFocus.current, g = gridRef.current;
+      if (!stacked || !was || !g || !g.contains(was) || was.getClientRects().length > 0) return;
+      if (document.activeElement && document.activeElement !== document.body && document.activeElement !== was) return;
+      const el = g.querySelector('[data-rc="' + Math.max(1, ar) + ":" + acShown + '"]');
+      if (el && el.getClientRects().length > 0) el.focus();
+    },
+    [stacked]
+  );
   function tabFor(r, c) {
     if (!activeRendered) return r === 0 && c === ac ? 0 : -1;
-    return r === ar && c === ac ? 0 : -1;
+    return r === ar && c === acShown ? 0 : -1;
   }
   React.useEffect(function() {
     const p = pending.current;
@@ -466,26 +525,17 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       el.focus();
     }
   });
-  function focusCell(r, c) {
+  function focusCell(r, c, dir) {
     r = Math.max(0, Math.min(r, lastR));
     c = Math.max(0, Math.min(c, nCols - 1));
-    if (stacked && r === 0 && nRows > 0 && !(selectable && c === 0)) r = 1;
-    if (gridRef.current && r === T && hasTotal) {
+    if (stacked && r === 0 && nRows > 0 && (!(selectable && c === 0) || noCardSel)) r = 1;
+    if (gridRef.current && (r === T && hasTotal || stacked)) {
       const shown2 = function(cc) {
+        if (cardHidden[cc]) return false;
         const e = gridRef.current.querySelector('[data-rc="' + r + ":" + cc + '"]');
         return !!e && e.getClientRects().length > 0;
       };
-      if (!shown2(c))
-        for (let d = 1; d < nCols; d++) {
-          if (c + d < nCols && shown2(c + d)) {
-            c = c + d;
-            break;
-          }
-          if (c - d >= 0 && shown2(c - d)) {
-            c = c - d;
-            break;
-          }
-        }
+      c = nearestShown(c, dir || 1, shown2);
     }
     activeState[1]({ r, c });
     pending.current = { r, c };
@@ -745,7 +795,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     } else if (r === 0 && col && (e.altKey && k === "ArrowDown" || k === "ContextMenu" || e.shiftKey && k === "F10") && controls)
       openMenu("col", col.key, target, { r: 0, c });
     else if (k === "ArrowRight") focusCell(r, c + 1);
-    else if (k === "ArrowLeft") focusCell(r, c - 1);
+    else if (k === "ArrowLeft") focusCell(r, c - 1, -1);
     else if (k === "ArrowDown") {
       if (r < lastR) focusCell(r + 1, c);
       else if (pageSize && page < pageCount && goPage(page + 1, { r: 1, c })) activeState[1]({ r: 1, c });
@@ -753,7 +803,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       if (r > 1 || r === 1 && !(pageSize && page > 1)) focusCell(r - 1, c);
       else if (r === 1 && goPage(page - 1, { r: pageSize, c })) activeState[1]({ r: pageSize, c });
     } else if (k === "Home") focusCell(e.ctrlKey ? 1 : r, 0);
-    else if (k === "End") focusCell(e.ctrlKey ? lastR : r, nCols - 1);
+    else if (k === "End") focusCell(e.ctrlKey ? lastR : r, nCols - 1, -1);
     else if (k === "PageDown") {
       if (pageSize) {
         if (goPage(page + 1, { r: 1, c })) activeState[1]({ r: 1, c });
@@ -773,7 +823,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         if (pageKeys.length) toggleAll();
       } else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
       else if (r > 0 && k === " " && selectable) {
-        if (canSelect(row)) toggle(row[rowKey], !selSet[row[rowKey]]);
+        if (canSelect(row) && !(stacked && noCardSel)) toggle(row[rowKey], !selSet[row[rowKey]]);
       } else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
         followRow(target.closest('[role="row"]'), e);
       else if (r > 0 && k === "Enter" && target.querySelector("button, a[href], input, select, textarea"))
@@ -833,6 +883,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           "aria-colindex": ci + 1,
           style: cellStyle(c, i),
           "data-hide": hideLevel(c) ? String(hideLevel(c)) : void 0,
+          "data-card": cardPart(c, i) === "hide" ? "hide" : void 0,
           tabIndex: tabFor(0, ci),
           "data-rc": "0:" + ci,
           className: cx(
@@ -1198,7 +1249,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           ),
           style: cellStyle(c, j),
           ...cardAttrs(c, j),
-          "data-label": j === 0 ? void 0 : c.label || t.totals
+          "data-label": cardPart(c, j) === "title" ? void 0 : c.label || t.totals
         },
         props.footer[c.key]
       );
@@ -1226,6 +1277,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       className: cx(
         "aura-table",
         stacked && "aura-table--stacked",
+        noCardSel && "aura-table--cards-nosel",
         scrolledX[0] && "is-scrolled-x",
         refreshing && "is-refreshing",
         !levels.length && props.className
@@ -1243,8 +1295,16 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         className: "aura-table__scroll",
         onMouseOver: showFull,
         onMouseLeave: hideFull,
-        onFocus: showFull,
-        onBlur: hideFull,
+        onFocus: function(e) {
+          lastFocus.current = e.target;
+          showFull(e);
+        },
+        onBlur: function(e) {
+          const to = e.relatedTarget;
+          if ((!to || !e.currentTarget.contains(to)) && e.target.getClientRects().length > 0)
+            lastFocus.current = null;
+          hideFull();
+        },
         style: scrollStyle,
         role: "grid",
         "aria-label": props.label,

package/dist/esm/FilterBar.js

@@ -55,7 +55,7 @@ const FilterBar = React.forwardRef(function FilterBar2(props, ref) {
       ref,
       role: "region",
       "aria-label": props.label || t.filters,
-      className: cx("aura-filterbar", props.className)
+      className: cx("aura-filterbar", props.searchGrow && "aura-filterbar--grow", props.className)
     },
     /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__row" }, hasSearch ? /* @__PURE__ */ React.createElement("div", { className: "aura-input has-icon aura-filterbar__search" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconSearch, null), className: "aura-input__icon" }), /* @__PURE__ */ React.createElement(
       "input",

package/dist/esm/FilterSelect.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from "react";
+import { Select, FILTER_KEY } from "./Select.js";
+import { omit } from "./internal.js";
+const FilterSelect = React.forwardRef(function FilterSelect2(props, ref) {
+  const onChange = props.onChange;
+  const pass = Object.assign(omit(props, ["label", "allLabel", "onChange"]), {
+    [FILTER_KEY]: { name: props.label, allLabel: props.allLabel },
+    onChange: onChange ? function(e) {
+      onChange(e.target.value);
+    } : void 0
+  });
+  return /* @__PURE__ */ React.createElement(Select, { ...pass, ref });
+});
+export {
+  FilterSelect
+};

package/dist/esm/Select.js

@@ -7,6 +7,7 @@ import { useDensity } from "./locale.js";
 import { cx, devWarnOnce, omit, uid, useIsoLayoutEffect, useMergedRef, useMounted } from "./internal.js";
 import { IconCheck, IconChevronDown } from "./icons.js";
 const h = React.createElement;
+const FILTER_KEY = "__auraFilter";
 const FORM_KEYS = ["name", "form", "value", "defaultValue", "disabled", "autoComplete", "onInput", "onInvalid"];
 const HANDLED_KEYS = FORM_KEYS.concat([
   "onChange",
@@ -40,20 +41,49 @@ function readItems(el) {
     };
   });
 }
-function initialLabel(props) {
+function textOf(n) {
+  if (n == null || typeof n === "boolean") return "";
+  if (typeof n === "string" || typeof n === "number") return String(n);
+  if (Array.isArray(n)) return n.map(textOf).join("");
+  return React.isValidElement(n) ? textOf(n.props.children) : "";
+}
+function childOptions(children, off) {
+  const out = [];
+  React.Children.forEach(children, function(c) {
+    if (!React.isValidElement(c)) return;
+    const p = c.props;
+    if (c.type === "optgroup" || c.type === React.Fragment)
+      out.push.apply(out, childOptions(p.children, off || c.type === "optgroup" && !!p.disabled));
+    else if (c.type === "option") {
+      const label = textOf(p.children);
+      out.push({ value: p.value != null ? String(p.value) : label, label, disabled: off || !!p.disabled });
+    }
+  });
+  return out;
+}
+function initialLabel(props, filter) {
   const opts = (props.options || []).map(function(o) {
     return typeof o === "object" ? o : { value: o, label: o };
-  });
-  const v = props.value !== void 0 && props.value !== null ? String(props.value) : props.defaultValue !== void 0 && props.defaultValue !== null ? String(props.defaultValue) : props.placeholder ? "" : opts[0] ? opts[0].value : "";
+  }).concat(childOptions(props.children));
+  const first = opts.filter(function(o) {
+    return !o.disabled;
+  })[0];
+  const v = props.value !== void 0 && props.value !== null ? String(props.value) : props.defaultValue !== void 0 && props.defaultValue !== null ? String(props.defaultValue) : props.placeholder ? "" : first ? first.value : "";
   const hit = opts.filter(function(o) {
     return o.value === v;
   })[0];
-  if (hit) return { label: hit.label, empty: false };
-  return { label: props.placeholder || "", empty: true };
+  if (hit)
+    return {
+      label: filter && filter.allLabel && opts[0] && hit.value === opts[0].value ? filter.allLabel : hit.label,
+      full: hit.label,
+      empty: false
+    };
+  return { label: props.placeholder || "", full: props.placeholder || "", empty: true };
 }
 const Select = React.forwardRef(function Select2(props, ref) {
   const auto = uid(), id = props.id || auto;
-  const rest = omit(props, FIELD_KEYS.concat(["children"]));
+  const filter = props[FILTER_KEY];
+  const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY]));
   const opts = (props.options || []).map(function(o) {
     const v = typeof o === "object" ? o : { value: o, label: o };
     return /* @__PURE__ */ React.createElement("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
@@ -68,7 +98,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
   const live = !native && mounted;
   const density = useDensity();
   React.useEffect(function() {
-    if (props.label || props["aria-label"] || props["aria-labelledby"] || props.title) return;
+    if (filter || props.label || props["aria-label"] || props["aria-labelledby"] || props.title) return;
     if (document.querySelector('label[for="' + id.replace(/["\\]/g, "\\$&") + '"]')) return;
     devWarnOnce(
       "select-name",
@@ -77,20 +107,24 @@ const Select = React.forwardRef(function Select2(props, ref) {
   }, []);
   const selRef = React.useRef(null), trigRef = React.useRef(null), listRef = React.useRef(null);
   const shown = React.useState(function() {
-    return initialLabel(props);
+    return initialLabel(props, filter);
   });
   const openState = React.useState(false), open = openState[0];
   const activeState = React.useState(-1), active = activeState[0];
   const items = React.useState([]);
   const pos = React.useState(null);
   const typed = React.useRef({ text: "", at: 0 });
+  const allLabel = React.useRef(void 0);
+  allLabel.current = filter ? filter.allLabel : void 0;
   const sync = React.useCallback(function() {
     const el = selRef.current;
     if (!el) return;
     const o = el.selectedIndex >= 0 ? el.options[el.selectedIndex] : null;
-    const next = o ? { label: o.textContent || "", empty: o.value === "" } : { label: "", empty: true };
+    const text = o ? o.textContent || "" : "";
+    const short = allLabel.current && el.selectedIndex === 0 ? allLabel.current : text;
+    const next = o ? { label: short, full: text, empty: o.value === "" } : { label: "", full: "", empty: true };
     shown[1](function(cur) {
-      return cur.label === next.label && cur.empty === next.empty ? cur : next;
+      return cur.label === next.label && cur.full === next.full && cur.empty === next.empty ? cur : next;
     });
   }, []);
   const hook = React.useCallback(
@@ -281,12 +315,16 @@ const Select = React.forwardRef(function Select2(props, ref) {
         const t = trigRef.current && trigRef.current.parentElement;
         if (!t) return;
         const r = t.getBoundingClientRect(), below = window.innerHeight - r.bottom - 8, above = r.top - 8, want = listRef.current ? listRef.current.scrollHeight : 320, up = below < Math.min(want, 200) && above > below;
+        const lw = listRef.current ? Math.max(r.width, listRef.current.offsetWidth) : r.width;
+        const rtl = getComputedStyle(t).direction === "rtl";
+        const left = lw <= r.width ? r.left : Math.max(8, Math.min(rtl ? r.right - lw : r.left, window.innerWidth - lw - 8));
         pos[1]({
-          left: r.left,
+          left,
           width: r.width,
           top: up ? void 0 : r.bottom + 4,
           bottom: up ? window.innerHeight - r.top + 4 : void 0,
-          maxHeight: Math.min(320, (up ? above : below) - 4)
+          maxHeight: Math.min(320, (up ? above : below) - 4),
+          rtl
         });
       }
       place();
@@ -319,7 +357,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
     [open, active, pos[0] != null]
   );
   const described = [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
-  const field = (child) => /* @__PURE__ */ React.createElement(
+  const field = (child) => filter ? child : /* @__PURE__ */ React.createElement(
     Field,
     {
       id,
@@ -334,6 +372,21 @@ const Select = React.forwardRef(function Select2(props, ref) {
     },
     child
   );
+  const nameId = id + "-name";
+  const face = filter ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { id: nameId, className: "aura-filterselect__name", "aria-hidden": true }, filter.name), /* @__PURE__ */ React.createElement("span", { className: "aura-filterselect__value", "aria-hidden": shown[0].label !== shown[0].full || void 0 }, shown[0].label || " "), shown[0].label !== shown[0].full ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, shown[0].full) : null, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-filterselect__chevron" })) : null;
+  if (!live && filter)
+    return /* @__PURE__ */ React.createElement("div", { className: cx("aura-filterselect", props.disabled && "is-disabled", props.className) }, /* @__PURE__ */ React.createElement("span", { className: "aura-filterselect__face", "aria-hidden": true, style: props.style }, face), h(
+      "select",
+      Object.assign(extra, omit(rest, ["style"]), {
+        ref: selMerged,
+        id,
+        className: "aura-filterselect__native",
+        "aria-label": rest["aria-label"] || (rest["aria-labelledby"] ? void 0 : filter.name),
+        "aria-describedby": described
+      }),
+      opts,
+      props.children
+    ));
   if (!live)
     return field(
       /* @__PURE__ */ React.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h(
@@ -354,7 +407,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
   const optId = function(i) {
     return id + "-opt-" + i;
   };
-  const labelledBy = rest["aria-labelledby"] || (props.label ? labelId : void 0);
+  const labelledBy = rest["aria-labelledby"] || (filter && !rest["aria-label"] ? nameId : props.label ? labelId : void 0);
   const selIndex = selRef.current ? selRef.current.selectedIndex : -1;
   const option = function(it) {
     const sel = selIndex === it.index;
@@ -400,6 +453,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
       {
         ref: listRef,
         "data-density": density,
+        dir: pos[0] ? pos[0].rtl ? "rtl" : "ltr" : void 0,
         className: "aura-combo__popover aura-select__popover",
         style: pos[0] ? {
           left: pos[0].left,
@@ -432,10 +486,17 @@ const Select = React.forwardRef(function Select2(props, ref) {
     /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: cx("aura-input aura-select aura-select--custom", props.icon && "has-icon", open && "is-open"),
+        className: cx(
+          filter ? "aura-filterselect" : "aura-input",
+          "aura-select aura-select--custom",
+          props.icon && "has-icon",
+          open && "is-open",
+          filter && props.disabled && "is-disabled",
+          filter && props.className
+        ),
         "data-invalid": props.error ? "" : void 0
       },
-      props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null,
+      props.icon && !filter ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null,
       h(
         "select",
         Object.assign(extra, pick(rest, FORM_KEYS), {
@@ -469,7 +530,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
           type: "button",
           role: "combobox",
           form: id + "-no-form",
-          className: "aura-input__control aura-select__trigger",
+          className: filter ? "aura-select__trigger aura-filterselect__face" : "aura-input__control aura-select__trigger",
           disabled: props.disabled,
           tabIndex: rest.tabIndex,
           "aria-haspopup": "listbox",
@@ -478,7 +539,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
           "aria-activedescendant": open && active >= 0 ? optId(active) : void 0,
           id,
           "aria-label": rest["aria-label"],
-          "aria-labelledby": rest["aria-labelledby"],
+          "aria-labelledby": rest["aria-labelledby"] || (filter && !rest["aria-label"] ? nameId : void 0),
           "aria-required": props.required || void 0,
           "aria-invalid": props.error ? true : void 0,
           "aria-describedby": described,
@@ -501,13 +562,14 @@ const Select = React.forwardRef(function Select2(props, ref) {
             if (selRef.current) selRef.current.dispatchEvent(new FocusEvent("focusout", { bubbles: true }));
           }
         },
-        /* @__PURE__ */ React.createElement("span", { id: id + "-value", className: cx("aura-select__value", shown[0].empty && "is-placeholder") }, shown[0].label || " ")
+        face || /* @__PURE__ */ React.createElement("span", { id: id + "-value", className: cx("aura-select__value", shown[0].empty && "is-placeholder") }, shown[0].label || " ")
       ),
-      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
+      filter ? null : /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
       popup
     )
   );
 });
 export {
+  FILTER_KEY,
   Select
 };

package/dist/esm/Table.js

@@ -47,7 +47,7 @@ function headerLabels(children) {
   return out;
 }
 const Table = React.forwardRef(function Table2(props, ref) {
-  const { caption, captionHidden, density, stackBelow, className, children, ...rest } = props;
+  const { caption, captionHidden, density, stackBelow, align, bordered, className, children, ...rest } = props;
   const labels = stackBelow ? headerLabels(children) : null;
   if (labels && !labels.length)
     devWarnOnce(
@@ -75,7 +75,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
     "div",
     {
       ref: wrap,
-      className: cx("aura-tbl-wrap", stackBelow && "is-stackable"),
+      className: cx("aura-tbl-wrap", stackBelow && "is-stackable", bordered === false && "is-flush"),
       "data-density": density,
       tabIndex: scrolls ? 0 : void 0,
       role: scrolls && (caption != null || rest["aria-label"]) ? "region" : void 0,
@@ -86,7 +86,12 @@ const Table = React.forwardRef(function Table2(props, ref) {
       "table",
       {
         ref,
-        className: cx("aura-tbl", stackBelow && "aura-tbl--stack-" + stackBelow, className),
+        className: cx(
+          "aura-tbl",
+          stackBelow && "aura-tbl--stack-" + stackBelow,
+          align === "middle" && "aura-tbl--middle",
+          className
+        ),
         role: stackBelow ? "table" : void 0,
         ...rest
       },
@@ -134,7 +139,7 @@ function cellClass(base, p) {
   );
 }
 const Th = React.forwardRef(function Th2(props, ref) {
-  const { align, numeric, mono, className, scope, label, ...rest } = props;
+  const { align, numeric, mono, className, scope, label, card, ...rest } = props;
   const stacked = React.useContext(StackLabels) != null;
   return /* @__PURE__ */ React.createElement(
     "th",
@@ -143,14 +148,16 @@ const Th = React.forwardRef(function Th2(props, ref) {
       scope: scope || "col",
       className: cellClass("aura-tbl__th", props),
       role: stacked ? scope === "row" ? "rowheader" : "columnheader" : void 0,
+      "data-card": stacked && (card === "title" || card === "action") ? card : void 0,
       ...rest
     }
   );
 });
 const Td = React.forwardRef(function Td2(props, ref) {
-  const { align, numeric, mono, className, scope, label, ...rest } = props;
+  const { align, numeric, mono, className, scope, label, card, ...rest } = props;
   const labels = React.useContext(StackLabels), col = React.useContext(ColumnIndex);
-  const shown = labels ? label != null ? label : col >= 0 ? labels[col] : void 0 : void 0;
+  const slot = labels && (card === "title" || card === "action") ? card : void 0;
+  const shown = labels && !slot ? label != null ? label : col >= 0 ? labels[col] : void 0 : void 0;
   return /* @__PURE__ */ React.createElement(
     "td",
     {
@@ -158,6 +165,7 @@ const Td = React.forwardRef(function Td2(props, ref) {
       className: cellClass("aura-tbl__td", props),
       role: labels ? "cell" : void 0,
       "data-label": shown || void 0,
+      "data-card": slot,
       ...rest
     }
   );

package/dist/esm/display.js

@@ -102,11 +102,30 @@ function badgeElement(props, ref) {
 }
 function emptyStateElement(props, ref) {
   const HT = "h" + (props.headingLevel || 3);
+  const rest = omit(props, [
+    "title",
+    "description",
+    "icon",
+    "action",
+    "size",
+    "bordered",
+    "headingLevel",
+    "tone",
+    "className",
+    "children"
+  ]);
   return /* @__PURE__ */ React.createElement(
     "div",
     {
+      ...rest,
       ref,
-      className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
+      className: cx(
+        "aura-empty",
+        props.size === "sm" && "is-sm",
+        props.bordered && "is-bordered",
+        props.tone === "danger" && "is-danger",
+        props.className
+      )
     },
     /* @__PURE__ */ React.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon || /* @__PURE__ */ React.createElement(IconInbox, null), size: props.size === "sm" ? "md" : "lg" })),
     /* @__PURE__ */ React.createElement(HT, { className: "aura-empty__title" }, props.title),

package/dist/esm/index.js

@@ -10,6 +10,7 @@ import { Field } from "./Field.js";
 import { TextField } from "./TextField.js";
 import { Textarea } from "./Textarea.js";
 import { Select } from "./Select.js";
+import { FilterSelect } from "./FilterSelect.js";
 import { RadioGroup } from "./RadioGroup.js";
 import { Switch } from "./Switch.js";
 import { Combobox, defaultFilter } from "./Combobox.js";
@@ -87,6 +88,7 @@ export {
   Field,
   FileUpload,
   FilterBar,
+  FilterSelect,
   FormErrorSummary,
   Grid,
   ICONS,