@jirawatpyk/aura-react 4.18.0 → 4.20.0

package/dist/esm/ActionBar.js

@@ -0,0 +1,47 @@
+'use client';
+import * as React from "react";
+import { Button } from "./Button.js";
+import { cx } from "./internal.js";
+import { useStrings } from "./locale.js";
+const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
+  const t = useStrings();
+  const bulk = props.selected != null;
+  const idle = bulk && !props.selected;
+  const count = bulk && props.selected ? t.selectedCount(props.selected) : null;
+  const cameFrom = React.useRef(null);
+  const own = React.useRef(null);
+  function clear() {
+    props.onClearSelection();
+    setTimeout(function() {
+      const back = cameFrom.current;
+      const a = document.activeElement;
+      if ((!a || a === document.body || !a.isConnected) && back && back.isConnected) back.focus();
+    }, 0);
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: function(el) {
+        own.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      onFocus: function(e) {
+        const from = e.relatedTarget;
+        if (from && own.current && !own.current.contains(from)) cameFrom.current = from;
+      },
+      role: "region",
+      "aria-label": props.label || t.actions,
+      className: cx(
+        "aura-actionbar",
+        "aura-actionbar--" + (props.position || "viewport"),
+        idle && "is-idle",
+        props.className
+      )
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__inner" }, /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__status", role: "status" }, count, count && props.status ? " \xB7 " : null, props.status), !idle ? /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__actions" }, count && props.onClearSelection ? /* @__PURE__ */ React.createElement(Button, { variant: "ghost", size: "sm", onClick: clear }, t.clear()) : null, props.children) : null)
+  );
+});
+export {
+  ActionBar
+};

package/dist/esm/AppShell.js

@@ -26,7 +26,7 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
     collapsed: false,
     collapsible: false
   }) : props.nav;
-  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-shell", props.className) }, props.nav ? /* @__PURE__ */ React.createElement("div", { className: "aura-shell__nav" }, props.nav) : null, props.nav ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-shell", props.bottomNav && "aura-shell--bottomnav", props.className) }, props.nav ? /* @__PURE__ */ React.createElement("div", { className: "aura-shell__nav" }, props.nav) : null, props.nav ? /* @__PURE__ */ React.createElement(
     Drawer,
     {
       open,
@@ -51,7 +51,7 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
       },
       "aria-expanded": open
     }
-  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React.createElement("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children)));
+  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React.createElement("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children), props.bottomNav || null));
 });
 export {
   AppShell

package/dist/esm/BottomNav.js

@@ -0,0 +1,45 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, useMaybeControlled } from "./internal.js";
+import { useLinkComponent, useStrings } from "./locale.js";
+const BottomNav = React.forwardRef(function BottomNav2(props, ref) {
+  const t = useStrings();
+  const Link = useLinkComponent(props.linkComponent);
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue,
+    props.onChange
+  );
+  const active = st[0];
+  const hide = props.hideFrom === false ? "always" : "below-" + (props.hideFrom || "lg");
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: cx("aura-bottomnav-spacer", "aura-bottomnav--" + hide), "aria-hidden": "true" }), /* @__PURE__ */ React.createElement(
+    "nav",
+    {
+      ref,
+      className: cx("aura-bottomnav", "aura-bottomnav--" + hide, props.className),
+      "aria-label": props.label || t.mainNav
+    },
+    /* @__PURE__ */ React.createElement("ul", { className: "aura-bottomnav__list" }, props.items.map(function(it) {
+      const on = active === it.id;
+      const count = it.count != null && it.count > 0 ? it.count > 99 ? "99+" : String(it.count) : null;
+      const common = {
+        className: cx("aura-bottomnav__item", on && "is-active"),
+        "aria-current": on ? "page" : void 0,
+        onClick: function(e) {
+          if (!it.href) e.preventDefault();
+          st[1](it.id);
+        }
+      };
+      const inner = [
+        /* @__PURE__ */ React.createElement("span", { key: "i", className: "aura-bottomnav__icon" }, /* @__PURE__ */ React.createElement(Icon, { name: it.icon, size: "md" }), count ? /* @__PURE__ */ React.createElement("span", { className: "aura-bottomnav__count", "aria-hidden": "true" }, count) : it.badge ? /* @__PURE__ */ React.createElement("span", { className: "aura-bottomnav__dot", "aria-hidden": "true" }) : null),
+        /* @__PURE__ */ React.createElement("span", { key: "l", className: "aura-bottomnav__label" }, it.label),
+        count || it.badge && it.badgeLabel ? /* @__PURE__ */ React.createElement("span", { key: "s", className: "aura-sr-only" }, " (" + (count || it.badgeLabel) + ")") : null
+      ];
+      return /* @__PURE__ */ React.createElement("li", { key: it.id, className: "aura-bottomnav__cell" }, it.href ? /* @__PURE__ */ React.createElement(Link, { href: it.href, ...common }, inner) : /* @__PURE__ */ React.createElement("button", { type: "button", ...common }, inner));
+    }))
+  ));
+});
+export {
+  BottomNav
+};

package/dist/esm/DataTable.js

@@ -1,5 +1,6 @@
 'use client';
 import * as React from "react";
+import { createPortal } from "react-dom";
 import { useStrings, useLinkComponent } from "./locale.js";
 import { cx, useMaybeControlled, compare, useIsoLayoutEffect, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
@@ -15,7 +16,16 @@ const DEFAULT_COLUMNS = [
   { key: "owner", label: "OWNER" }
 ];
 const SKELETON_WIDTHS = ["72%", "56%", "84%", "44%", "64%"];
-const STACK_WIDTHS = [360, 400, 480, 520, 560, 600, 640, 720, 768, 800, 900, 960, 1024];
+const Q = 1e4;
+const MAX_HIDE_LEVELS = 3;
+function below(w, threshold) {
+  return w < threshold * (1 - 0.5 / Q);
+}
+function hidePx(c) {
+  if (c.hideBelow == null) return void 0;
+  const px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
+  return px != null && px > 0 ? px : void 0;
+}
 const ROW_H_DEFAULT = 48, OVERSCAN = 8, FLEX_MIN = 160;
 const DataTable = React.forwardRef(function DataTable2(props, ref) {
   const t = useStrings();
@@ -89,33 +99,75 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   const measure = !!props.stackBelow || columns.some(function(c) {
     return c.hideBelow != null;
   });
-  const dual = !!props.stackBelow && boxWidth[0] == null && STACK_WIDTHS.indexOf(props.stackBelow) >= 0;
   React.useEffect(
     function() {
       if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
       const ro = new ResizeObserver(function(en) {
-        boxWidth[1](en[0].contentRect.width);
+        const bb = en[0].borderBoxSize && en[0].borderBoxSize[0];
+        boxWidth[1](bb ? bb.inlineSize : en[0].target.getBoundingClientRect().width);
       });
       ro.observe(wrapRef.current);
       return function() {
         ro.disconnect();
       };
     },
-    [measure, dual]
+    [measure]
   );
-  const stacked = !!props.stackBelow && boxWidth[0] != null && boxWidth[0] < props.stackBelow;
+  const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
   useIsoLayoutEffect(
     function() {
       if (measure && boxWidth[0] == null && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
     },
     [measure]
   );
+  const hideLevels = [];
+  columns.forEach(function(c) {
+    const px = hidePx(c);
+    if (px != null && hideLevels.indexOf(px) < 0) hideLevels.push(px);
+  });
+  hideLevels.sort(function(a, b) {
+    return b - a;
+  });
+  hideLevels.length = Math.min(hideLevels.length, MAX_HIDE_LEVELS);
+  const levels = [];
+  if (props.stackBelow && props.stackBelow > 0) levels.push({ name: "stack", px: props.stackBelow });
+  hideLevels.forEach(function(px, i) {
+    levels.push({ name: "h" + (i + 1), px });
+  });
+  function hideLevel(c) {
+    const px = hidePx(c);
+    const i = px == null ? -1 : hideLevels.indexOf(px);
+    return i < 0 ? void 0 : i + 1;
+  }
   function tooNarrow(c) {
     if (c.hideBelow == null || boxWidth[0] == null || stacked) return false;
-    const px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
-    return px != null && boxWidth[0] < px;
+    const px = hidePx(c);
+    return px != null && below(boxWidth[0], px);
   }
   const scrollRef = React.useRef(null);
+  const tipState = React.useState(null), tip = tipState[0], setTip = tipState[1];
+  function showFull(e) {
+    const el = e.target.closest ? e.target.closest(".aura-table__td") : null;
+    if (!el || el.scrollWidth <= el.clientWidth + 1 || el.querySelector("button, input, .aura-pill"))
+      return setTip(null);
+    const r = el.getBoundingClientRect();
+    setTip({ text: (el.textContent || "").trim(), left: r.left, top: r.top });
+  }
+  function hideFull() {
+    setTip(null);
+  }
+  const tipEl = tip && typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "aura-tooltip aura-tooltip--above",
+        "aria-hidden": "true",
+        style: { left: tip.left, top: tip.top - 6 }
+      },
+      tip.text
+    ),
+    document.body
+  ) : null;
   const rowH = React.useState(ROW_H_DEFAULT);
   const ROW_H = rowH[0];
   useIsoLayoutEffect(function() {
@@ -127,7 +179,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   const pending = React.useRef(null);
   const resizing = React.useRef(false);
   useIsoLayoutEffect(function() {
-    if (stacked || !gridRef.current) return;
+    if (!gridRef.current) return;
     const els = gridRef.current.querySelectorAll(
       '.aura-table__td button, .aura-table__td a[href], .aura-table__td input, .aura-table__td select, .aura-table__td textarea, .aura-table__td [tabindex="0"]'
     );
@@ -159,12 +211,31 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     })
   );
   const nPinned = vis.filter(isPinned).length;
+  const pillKey = (vis.filter(function(c, i) {
+    return i > 0 && c.pill;
+  })[0] || { key: "" }).key;
+  function cardPart(c, i) {
+    return i === 0 ? "title" : c.key === pillKey ? "pill" : c.actions ? "actions" : "field";
+  }
+  function cardAttrs(c, i) {
+    const part = cardPart(c, i), lv = hideLevel(c);
+    return {
+      "data-card": part,
+      "data-label": part === "field" ? c.label || void 0 : void 0,
+      "data-hide": lv ? String(lv) : void 0
+    };
+  }
+  const hasFields = vis.some(function(c, i) {
+    return cardPart(c, i) === "field";
+  });
   const hasFlex = vis.some(function(c) {
     return widthOf(c) == null;
   });
-  let fixedSum = 0;
+  let fixedSum = 0, hideTerms = "";
   vis.forEach(function(c) {
-    fixedSum += widthOf(c) != null ? widthOf(c) : FLEX_MIN;
+    const w = widthOf(c) != null ? widthOf(c) : FLEX_MIN, lv = hideLevel(c);
+    if (lv && boxWidth[0] == null) hideTerms += " + " + w + "px * var(--aura-h" + lv + "-on, 1)";
+    else fixedSum += w;
   });
   let pinOffsets = {}, acc = 0;
   vis.forEach(function(c) {
@@ -175,13 +246,17 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   });
   const selW = selectable ? " + var(--aura-table-select-width)" : "";
   const gutterR = controls ? "var(--aura-space-12)" : "var(--aura-space-6)";
-  const rowMinWidth = "calc(" + fixedSum + "px + var(--aura-space-6) + " + gutterR + selW + ")";
+  const rowMinWidth = "calc(" + fixedSum + "px" + hideTerms + " + var(--aura-space-6) + " + gutterR + selW + ")";
   function cellStyle(c, i) {
-    let w = widthOf(c), s;
-    if (w == null) s = { flex: "1 1 0", minWidth: (c.minWidth || FLEX_MIN) + "px" };
-    else if (!hasFlex && i === vis.length - 1) s = { flex: "1 0 auto", width: w + "px" };
-    else s = { width: w + "px", flex: "none" };
-    if (isPinned(c)) s.left = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + "px)";
+    const w = widthOf(c), s = {};
+    if (w == null) {
+      s["--aura-cell-flex"] = "1 1 0";
+      s["--aura-cell-min"] = (c.minWidth || FLEX_MIN) + "px";
+    } else {
+      s["--aura-cell-flex"] = !hasFlex && i === vis.length - 1 ? "1 0 auto" : "none";
+      s["--aura-cell-w"] = w + "px";
+    }
+    if (isPinned(c)) s["--aura-cell-left"] = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + "px)";
     return s;
   }
   const view = React.useMemo(
@@ -264,7 +339,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     return rowHref ? /* @__PURE__ */ React.createElement(Link, { href: rowHref(r), className: "aura-table__row-link" }, content) : content;
   }
   const height = props.height || 0;
-  const virtual = !!height && !loading && pageRows.length > 0;
+  const virtual = !!height && !loading && pageRows.length > 0 && !stacked;
   const bodyH = Math.max(ROW_H, height - ROW_H);
   let start = 0, end = pageRows.length;
   if (virtual) {
@@ -619,7 +694,8 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
             label: all ? t.deselectAllRows : t.selectAllRows,
             onChange: toggleAll
           }
-        ) : null
+        ) : null,
+        nRows ? /* @__PURE__ */ React.createElement("span", { className: "aura-table__sel-text" }, nSel ? t.selectedCount(nSel) : t.selectAll) : /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, t.selectRows)
       )
     );
   vis.forEach(function(c, i) {
@@ -637,6 +713,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
           "aria-sort": ariaSort,
           "aria-colindex": ci + 1,
           style: cellStyle(c, i),
+          "data-hide": hideLevel(c) ? String(hideLevel(c)) : void 0,
           tabIndex: tabFor(0, ci),
           "data-rc": "0:" + ci,
           className: cx(
@@ -793,6 +870,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
               pin && j === nPinned - 1 && "is-pin-edge"
             ),
             style: cellStyle(c, j),
+            ...cardAttrs(c, j),
             onFocus: function() {
               if (activeState[0].r !== ri || activeState[0].c !== ci) activeState[1]({ r: ri, c: ci });
             }
@@ -801,6 +879,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
         )
       );
     });
+    if (hasFields) cells.push(/* @__PURE__ */ React.createElement("span", { key: "__br", className: "aura-table__break", "aria-hidden": true }));
     cells.push(
       /* @__PURE__ */ React.createElement(
         "span",
@@ -814,7 +893,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     return cells;
   }
   let body;
-  const rowStyle = { minWidth: rowMinWidth };
+  const rowStyle = { ["--aura-row-min"]: rowMinWidth };
   if (loading) {
     const n = pageSize || props.skeletonRows || 5;
     const skRows = body = [];
@@ -831,7 +910,9 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
             {
               key: c.key,
               className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
-              style: cellStyle(c, j)
+              style: cellStyle(c, j),
+              ...cardAttrs(c, j),
+              "data-label": void 0
             },
             /* @__PURE__ */ React.createElement(
               "span",
@@ -843,6 +924,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
           )
         );
       });
+      if (hasFields) sk.push(/* @__PURE__ */ React.createElement("span", { key: "__br", className: "aura-table__break" }));
       sk.push(
         /* @__PURE__ */ React.createElement("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") })
       );
@@ -928,103 +1010,67 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   } else if (height && rows.length && !loading) {
     foot = /* @__PURE__ */ React.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React.createElement("span", null, t.rowCount(shownTotal)), selectable && selected.length ? /* @__PURE__ */ React.createElement("span", null, t.selectedCount(selected.length)) : /* @__PURE__ */ React.createElement("span", null));
   }
-  function renderStacked(wrapRefArg) {
-    const titleCol = vis[0], pillCol = vis.filter(function(c) {
-      return c.pill && c !== titleCol;
-    })[0];
-    const actionCols = vis.filter(function(c) {
-      return c.actions && c !== titleCol;
-    });
-    const rest = vis.filter(function(c) {
-      return c !== titleCol && c !== pillCol && !c.actions;
-    });
-    let cardBody;
-    if (loading) {
-      cardBody = /* @__PURE__ */ React.createElement("ul", { className: "aura-table__cards", "aria-busy": true }, [0, 1, 2].map(function(i) {
-        return /* @__PURE__ */ React.createElement("li", { key: i, className: "aura-table__card", "aria-hidden": true }, /* @__PURE__ */ React.createElement("span", { className: "aura-skel", style: { width: "50%", height: "14px" } }), /* @__PURE__ */ React.createElement("span", { className: "aura-skel", style: { width: "80%" } }), /* @__PURE__ */ React.createElement("span", { className: "aura-skel", style: { width: "64%" } }));
-      }));
-    } else if (!rows.length) {
-      const em2 = props.empty || {};
-      cardBody = /* @__PURE__ */ React.createElement("div", { className: "aura-table__empty" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { className: "aura-table__empty-icon" }, /* @__PURE__ */ React.createElement(Icon, { name: em2.icon || "inbox", size: "lg" })), /* @__PURE__ */ React.createElement("p", { className: "aura-table__empty-title" }, em2.title || t.empty), em2.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-table__empty-text" }, em2.description) : null, em2.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-table__empty-action" }, em2.action) : null));
-    } else {
-      const cellVal = cellContent;
-      cardBody = /* @__PURE__ */ React.createElement("ul", { className: "aura-table__cards", "aria-label": props.label }, pageRows.map(function(r) {
-        const k = r[rowKey], isSel = !!selSet[k];
-        return /* @__PURE__ */ React.createElement(
-          "li",
-          {
-            key: k,
-            className: cx(
-              "aura-table__card",
-              isSel && "is-selected",
-              (props.onRowActivate || rowHref) && "is-actionable"
-            ),
-            tabIndex: props.onRowActivate && !rowHref ? 0 : void 0,
-            onClick: function(e) {
-              const el = e.target;
-              if (el.closest && el.closest(".aura-check, button, a, input")) return;
-              if (rowHref) followRow(e.currentTarget, e);
-              else if (props.onRowActivate) props.onRowActivate(r);
-            },
-            onKeyDown: function(e) {
-              if (e.target === e.currentTarget && e.key === "Enter" && props.onRowActivate && !rowHref)
-                props.onRowActivate(r);
-            }
-          },
-          /* @__PURE__ */ React.createElement("div", { className: "aura-table__card-head" }, selectable ? /* @__PURE__ */ React.createElement(
-            Checkbox,
-            {
-              checked: isSel,
-              label: t.selectRow(k),
-              onChange: function(on) {
-                toggle(k, on);
-              }
-            }
-          ) : null, /* @__PURE__ */ React.createElement("span", { className: cx("aura-table__card-title", titleCol.mono && "aura-table__mono") }, rowLinkWrap(r, cellVal(titleCol, r))), pillCol ? cellVal(pillCol, r) : null, actionCols.map(function(c) {
-            return /* @__PURE__ */ React.createElement("span", { key: c.key, className: "aura-table__card-actions" }, cellVal(c, r));
-          })),
-          rest.length ? /* @__PURE__ */ React.createElement("dl", { className: "aura-table__card-fields" }, rest.map(function(c) {
-            return /* @__PURE__ */ React.createElement("div", { key: c.key }, /* @__PURE__ */ React.createElement("dt", null, c.label), /* @__PURE__ */ React.createElement("dd", { className: c.mono ? "aura-table__mono" : void 0 }, cellVal(c, r)));
-          })) : null
-        );
-      }));
-    }
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ref: wrapRefArg,
-        "data-density": props.density,
-        className: cx("aura-table aura-table--stacked", refreshing && "is-refreshing", props.className),
-        role: "region",
-        "aria-label": props.label,
-        "aria-busy": busy || void 0
-      },
-      refreshing ? /* @__PURE__ */ React.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
-      selectable && pageRows.length && !busy ? /* @__PURE__ */ React.createElement("div", { className: "aura-table__stack-bar" }, /* @__PURE__ */ React.createElement(
-        Checkbox,
+  const totalRow = props.footer && rows.length && !loading ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "row",
+      "aria-rowindex": shownTotal + 2,
+      "aria-label": t.totals,
+      className: cx("aura-table__row aura-table__total", props.stickyFooter && "is-sticky"),
+      style: rowStyle
+    },
+    /* @__PURE__ */ React.createElement("span", { className: "aura-table__gutter", "aria-hidden": true }),
+    selectable ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-table__sel", nPinned && "is-pinned"), "aria-hidden": true }) : null,
+    vis.map(function(c, j) {
+      const pin = isPinned(c);
+      return /* @__PURE__ */ React.createElement(
+        "span",
         {
-          checked: all,
-          indeterminate: nSel > 0 && !all,
-          label: all ? t.deselectAllRows : t.selectAllRows,
-          onChange: toggleAll
-        }
-      ), /* @__PURE__ */ React.createElement("span", null, nSel ? t.selectedCount(nSel) : t.selectAll)) : null,
-      cardBody,
-      foot
-    );
-  }
-  if (stacked) return renderStacked(wrapMerged);
+          key: c.key,
+          role: "gridcell",
+          "aria-colindex": j + (selectable ? 2 : 1),
+          className: cx(
+            "aura-table__td",
+            c.mono && "aura-table__mono",
+            c.align === "end" && "is-end",
+            pin && "is-pinned",
+            pin && j === nPinned - 1 && "is-pin-edge",
+            props.footer[c.key] == null && "is-blank"
+          ),
+          style: cellStyle(c, j),
+          ...cardAttrs(c, j),
+          "data-label": j === 0 ? void 0 : c.label || t.totals
+        },
+        props.footer[c.key]
+      );
+    }),
+    hasFields ? /* @__PURE__ */ React.createElement("span", { className: "aura-table__break", "aria-hidden": true }) : null,
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker"),
+        "aria-hidden": true
+      }
+    )
+  ) : null;
   const scrollStyle = {
     scrollPaddingLeft: "calc(var(--aura-space-6)" + selW + " + " + acc + "px)",
     scrollPaddingTop: ROW_H + "px"
   };
-  if (height) scrollStyle.height = height + "px";
+  if (height) scrollStyle["--aura-table-h"] = height + "px";
   const gridEl = /* @__PURE__ */ React.createElement(
     "div",
     {
-      ref: dual ? void 0 : wrapMerged,
+      ref: levels.length ? wrapRef : wrapMerged,
       "data-density": props.density,
-      className: cx("aura-table", scrolledX[0] && "is-scrolled-x", refreshing && "is-refreshing", props.className)
+      className: cx(
+        "aura-table",
+        stacked && "aura-table--stacked",
+        scrolledX[0] && "is-scrolled-x",
+        refreshing && "is-refreshing",
+        !levels.length && props.className
+      ),
+      style: levels.length ? { ["--aura-q-back"]: String(levels[levels.length - 1].px / Q) } : void 0
     },
     refreshing ? /* @__PURE__ */ React.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
     /* @__PURE__ */ React.createElement(
@@ -1035,11 +1081,15 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
           gridRef.current = el;
         },
         className: "aura-table__scroll",
+        onMouseOver: showFull,
+        onMouseLeave: hideFull,
+        onFocus: showFull,
+        onBlur: hideFull,
         style: scrollStyle,
         role: "grid",
         "aria-label": props.label,
         "aria-busy": busy || void 0,
-        "aria-rowcount": loading ? -1 : shownTotal + 1,
+        "aria-rowcount": loading ? -1 : shownTotal + 1 + (totalRow ? 1 : 0),
         "aria-colcount": nCols,
         "aria-multiselectable": selectable || void 0,
         onKeyDown: onGridKey,
@@ -1052,8 +1102,18 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
           if (sx !== scrolledX[0]) scrolledX[1](sx);
         }
       },
-      /* @__PURE__ */ React.createElement("div", { className: "aura-table__head", role: "row", "aria-rowindex": 1, style: rowStyle }, head),
-      body
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: cx("aura-table__head", selectable && nRows > 0 && !busy && "has-select-all"),
+          role: "row",
+          "aria-rowindex": 1,
+          style: rowStyle
+        },
+        head
+      ),
+      body,
+      totalRow
     ),
     busy ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only", role: "status" }, t.loadingRows) : null,
     controls ? /* @__PURE__ */ React.createElement("div", { className: "aura-table__picker" }, /* @__PURE__ */ React.createElement(
@@ -1076,10 +1136,23 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
         label: menu.kind === "picker" ? t.columns : t.column(byKey[menu.key] && byKey[menu.key].label),
         items: menu.kind === "picker" ? pickerItems() : byKey[menu.key] ? columnMenuItems(byKey[menu.key]) : []
       }
-    ) : null
+    ) : null,
+    tipEl
   );
-  if (!dual) return gridEl;
-  return /* @__PURE__ */ React.createElement("div", { ref: wrapMerged, className: "aura-table-dual", "data-stack-below": props.stackBelow }, renderStacked(void 0), gridEl);
+  if (!levels.length) return gridEl;
+  let out = gridEl;
+  for (let i = levels.length - 1; i >= 0; i--) {
+    const prev = i === 0 ? Q : levels[i - 1].px;
+    out = /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cx("aura-table-q", "aura-table-q--" + levels[i].name),
+        style: { ["--aura-q-scale"]: String(prev / levels[i].px) }
+      },
+      out
+    );
+  }
+  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-table-box", props.className) }, out);
 });
 export {
   DataTable