@jirawatpyk/aura-react 5.1.0 → 5.2.0

package/dist/esm/AppShell.js

@@ -17,16 +17,24 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
     [wide]
   );
   const navEl = props.nav && React.isValidElement(props.nav) ? props.nav : null;
+  const shared = !!navEl && navEl.props.value === void 0 && (navEl.props.defaultValue !== void 0 || navEl.props.sections !== void 0 || navEl.props.items !== void 0);
+  const navState = React.useState(navEl ? navEl.props.defaultValue : void 0);
+  function onNav(id) {
+    if (shared) navState[1](id);
+    if (navEl && navEl.props.onChange) navEl.props.onChange(id);
+  }
+  const deskNav = navEl && shared ? React.cloneElement(navEl, { value: navState[0], onChange: onNav }) : props.nav;
   const drawerNav = navEl ? React.cloneElement(navEl, {
+    value: shared ? navState[0] : navEl.props.value,
     onChange: function(id) {
-      if (navEl.props.onChange) navEl.props.onChange(id);
+      onNav(id);
       setOpen(false);
     },
     className: cx(navEl.props.className, "is-in-drawer"),
     collapsed: false,
     collapsible: false
   }) : props.nav;
-  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(
+  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" }, deskNav) : null, props.nav ? /* @__PURE__ */ React.createElement(
     Drawer,
     {
       open,

package/dist/esm/Avatar.js

@@ -7,7 +7,7 @@ function initials(name) {
   return ((parts[0] || "?")[0] + (parts.length > 1 ? parts[parts.length - 1][0] : parts[0][1] || "")).toUpperCase();
 }
 const Avatar = React.forwardRef(function Avatar2(props, ref) {
-  const size = props.size || "md", errState = React.useState(false);
+  const size = props.size || "md", errState = React.useState(null);
   let hash = 0;
   String(props.name || "").split("").forEach(function(ch) {
     hash = hash * 31 + ch.charCodeAt(0) >>> 0;
@@ -21,13 +21,14 @@ const Avatar = React.forwardRef(function Avatar2(props, ref) {
       role: "img",
       "aria-label": props.name + (props.status ? ", " + props.status : "")
     },
-    props.src && !errState[0] ? /* @__PURE__ */ React.createElement(
+    props.src && errState[0] !== props.src ? /* @__PURE__ */ React.createElement(
       "img",
       {
+        key: props.src,
         src: props.src,
         alt: "",
         onError: function() {
-          errState[1](true);
+          errState[1](props.src || null);
         }
       }
     ) : /* @__PURE__ */ React.createElement("span", { "aria-hidden": true }, initials(props.name)),

package/dist/esm/BottomNav.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx, useMaybeControlled } from "./internal.js";
+import { cx, plainClick, useMaybeControlled } from "./internal.js";
 import { useLinkComponent, useStrings } from "./locale.js";
 const BottomNav = React.forwardRef(function BottomNav2(props, ref) {
   const t = useStrings();
@@ -28,6 +28,7 @@ const BottomNav = React.forwardRef(function BottomNav2(props, ref) {
         "aria-current": on ? "page" : void 0,
         onClick: function(e) {
           if (!it.href) e.preventDefault();
+          else if (!plainClick(e)) return;
           st[1](it.id);
         }
       };

package/dist/esm/Checkbox.js

@@ -1,11 +1,12 @@
 'use client';
 import * as React from "react";
-import { cx, devWarnOnce, omit, useMergedRef, useMaybeControlled } from "./internal.js";
+import { cx, devWarnOnce, omit, uid, useMergedRef, useMaybeControlled } from "./internal.js";
 import { Icon } from "./Icon.js";
 const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
   const own = React.useRef(null), merged = useMergedRef(ref, own);
   const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
   const on = !!st[0];
+  const auto = uid();
   React.useEffect(function() {
     if (own.current) own.current.indeterminate = !!props.indeterminate;
   });
@@ -29,7 +30,7 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
       "checkbox-label",
       "Checkbox `label` is only the accessible name: it is not shown. In 6.0 it will be shown beside the box, like Switch and TextField. For visible text now pass it as children; for a bare box (a table row) add `hideLabel`."
     );
-  const descId = props.description && props.id ? props.id + "-desc" : void 0;
+  const descId = props.description ? (props.id || auto) + "-desc" : void 0;
   return /* @__PURE__ */ React.createElement(
     "label",
     {

package/dist/esm/Combobox.js

@@ -82,7 +82,7 @@ const Combobox = React.forwardRef(
       function() {
         if (open) place();
       },
-      [open, shown.length]
+      [open, shown.length, values.length]
     );
     React.useEffect(
       function() {
@@ -114,6 +114,7 @@ const Combobox = React.forwardRef(
       },
       [activeIdx, open]
     );
+    const live = props.loading ? [] : shown;
     function openList() {
       if (!open && !props.disabled && !props.readOnly) {
         setOpen(true);
@@ -149,7 +150,7 @@ const Combobox = React.forwardRef(
       if (k === "ArrowDown") {
         e.preventDefault();
         if (!open) openList();
-        else setActive(Math.min(activeIdx + 1, shown.length - 1));
+        else setActive(Math.max(0, Math.min(activeIdx + 1, live.length - 1)));
       } else if (k === "ArrowUp") {
         e.preventDefault();
         if (!open) openList();
@@ -159,21 +160,22 @@ const Combobox = React.forwardRef(
         setActive(0);
       } else if (k === "End" && open) {
         e.preventDefault();
-        setActive(shown.length - 1);
+        setActive(Math.max(0, live.length - 1));
       } else if (k === "Enter") {
-        if (open && shown[activeIdx]) {
+        if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+        if (open && live[activeIdx]) {
           e.preventDefault();
-          choose(shown[activeIdx]);
+          choose(live[activeIdx]);
         }
       } else if (k === "Escape") {
         if (open) {
           e.preventDefault();
           e.stopPropagation();
           close();
-        } else if (!multi && props.clearable !== false && value != null && query == null) {
+        } else if (!multi && !props.readOnly && props.clearable !== false && value != null && query == null) {
           setValue(null);
         }
-      } else if (k === "Backspace" && multi && !text && values.length) {
+      } else if (k === "Backspace" && multi && !props.readOnly && !text && values.length) {
         setValues(values.slice(0, -1));
       } else if (k === "Tab") {
         if (open) close();
@@ -185,7 +187,7 @@ const Combobox = React.forwardRef(
       return id + "-opt-" + i;
     };
     const list = open && mounted && posState[0] ? createPortal(
-      /* @__PURE__ */ React.createElement("div", { ref: listRef, className: "aura-combo__popover", style: posState[0] }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { ref: listRef, className: "aura-combo__popover", style: posState[0] }, live.length ? /* @__PURE__ */ React.createElement(
         "ul",
         {
           id: listId,
@@ -194,7 +196,7 @@ const Combobox = React.forwardRef(
           "aria-multiselectable": multi || void 0,
           className: "aura-combo__list"
         },
-        props.loading ? /* @__PURE__ */ React.createElement("li", { className: "aura-combo__note", role: "presentation" }, /* @__PURE__ */ React.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), props.loadingText || t.searching) : !shown.length ? /* @__PURE__ */ React.createElement("li", { className: "aura-combo__note", role: "presentation" }, props.emptyText || t.noMatches) : shown.map(function(o, i) {
+        live.map(function(o, i) {
           const isSel = multi ? isPicked(o.value) : !!selected && o.value === selected.value;
           const blocked = o.disabled || multi && full && !isSel;
           return /* @__PURE__ */ React.createElement(
@@ -226,9 +228,8 @@ const Combobox = React.forwardRef(
             /* @__PURE__ */ React.createElement("span", { className: "aura-combo__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-combo__label" }, o.label), o.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-combo__desc" }, o.description) : null),
             isSel ? /* @__PURE__ */ React.createElement(Icon, { name: "check", className: "aura-combo__check" }) : null
           );
-        }),
-        more && !props.loading ? /* @__PURE__ */ React.createElement("li", { className: "aura-combo__note", role: "presentation" }, t.keepTyping((props.options || []).length)) : null
-      )),
+        })
+      ) : null, props.loading || !live.length || more ? /* @__PURE__ */ React.createElement("div", { className: "aura-combo__list", role: "status" }, props.loading ? /* @__PURE__ */ React.createElement("div", { className: "aura-combo__note" }, /* @__PURE__ */ React.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), props.loadingText || t.searching) : !live.length ? /* @__PURE__ */ React.createElement("div", { className: "aura-combo__note" }, props.emptyText || t.noMatches) : /* @__PURE__ */ React.createElement("div", { className: "aura-combo__note" }, t.keepTyping((props.options || []).length))) : null),
       document.body
     ) : null;
     return /* @__PURE__ */ React.createElement(
@@ -267,9 +268,9 @@ const Combobox = React.forwardRef(
         ));
       })) : null, multi ? /* @__PURE__ */ React.createElement("span", { id: summaryId, className: "aura-sr-only" }, picked.length ? t.selectedCount(picked.length) + ": " + picked.map(function(o) {
         return o.label;
-      }).join(", ") : "") : null, multi && props.name ? values.map(function(v) {
+      }).join(", ") : "") : null, props.name ? multi ? values.map(function(v) {
         return /* @__PURE__ */ React.createElement("input", { key: v, type: "hidden", name: props.name, value: v });
-      }) : null, /* @__PURE__ */ React.createElement(
+      }) : /* @__PURE__ */ React.createElement("input", { type: "hidden", name: props.name, value: value == null ? "" : value }) : null, /* @__PURE__ */ React.createElement(
         "input",
         {
           ref: inputMerged,
@@ -278,17 +279,16 @@ const Combobox = React.forwardRef(
           role: "combobox",
           className: "aura-input__control",
           autoComplete: "off",
-          "aria-expanded": open,
-          "aria-controls": listId,
+          "aria-expanded": open && live.length > 0,
+          "aria-controls": open && live.length ? listId : void 0,
           "aria-autocomplete": "list",
-          "aria-activedescendant": open && shown[activeIdx] ? optId(activeIdx) : void 0,
+          "aria-activedescendant": open && live[activeIdx] ? optId(activeIdx) : void 0,
           "aria-invalid": props.error ? true : void 0,
           "aria-describedby": [props.error ? id + "-error" : props.hint ? id + "-hint" : "", multi && picked.length ? summaryId : ""].filter(Boolean).join(" ") || void 0,
           placeholder: multi && values.length ? void 0 : props.placeholder,
           disabled: props.disabled,
           readOnly: props.readOnly,
           required: props.required && (!multi || !values.length),
-          name: multi ? void 0 : props.name,
           value: text,
           onChange: function(e) {
             setQuery(e.target.value);
@@ -306,7 +306,7 @@ const Combobox = React.forwardRef(
             }, 0);
           }
         }
-      ), props.clearable !== false && values.length && !props.disabled ? /* @__PURE__ */ React.createElement(
+      ), props.clearable !== false && values.length && !props.disabled && !props.readOnly ? /* @__PURE__ */ React.createElement(
         "button",
         {
           type: "button",

package/dist/esm/Command.js

@@ -120,6 +120,7 @@ function Command(props) {
       e.preventDefault();
       move("last");
     } else if (e.key === "Enter") {
+      if (e.nativeEvent.isComposing || e.keyCode === 229) return;
       e.preventDefault();
       if (active >= 0) run(flat[active]);
     }

package/dist/esm/DataTable.js

@@ -35,7 +35,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     byKey[c.key] = c;
   });
   const rows = props.rows || [];
-  const rowKey = props.rowKey || columns[0].key;
+  const rowKey = props.rowKey || (columns[0] ? columns[0].key : "id");
   const manual = !!props.manual;
   const Link = useLinkComponent(props.linkComponent);
   const busy = !!props.loading;
@@ -243,11 +243,12 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     if (lv && boxWidth[0] == null) hideTerms += " + " + w + "px * var(--aura-h" + lv + "-on, 1)";
     else fixedSum += w;
   });
-  let pinOffsets = {}, acc = 0;
+  let pinOffsets = {}, acc = "0px";
   vis.forEach(function(c) {
     if (isPinned(c)) {
       pinOffsets[c.key] = acc;
-      acc += widthOf(c);
+      const lv = hideLevel(c);
+      acc += " + " + widthOf(c) + "px" + (lv && boxWidth[0] == null ? " * var(--aura-h" + lv + "-on, 1)" : "");
     }
   });
   const selW = selectable ? " + var(--aura-table-select-width)" : "";
@@ -262,9 +263,10 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       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)";
+    if (isPinned(c)) s["--aura-cell-left"] = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + ")";
     return s;
   }
+  const sortCol = sort && sort.key ? byKey[sort.key] : void 0;
   const view = React.useMemo(
     function() {
       if (manual || !sort || !sort.key || !byKey[sort.key]) return rows;
@@ -283,7 +285,16 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
         return p[0];
       });
     },
-    [rows, manual, sort && sort.key, sort && sort.dir]
+    [
+      rows,
+      manual,
+      sort && sort.key,
+      sort && sort.dir,
+      !!sortCol,
+      sortCol && sortCol.sortValue,
+      sortCol && sortCol.pill,
+      sortCol && sortCol.tones
+    ]
   );
   function nextSort(key) {
     if (!sort || sort.key !== key) return { key, dir: "asc" };
@@ -292,14 +303,37 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   }
   const pageSize = props.pageSize || 0;
   const total = manual ? props.totalRows != null ? props.totalRows : (Math.max(1, pageState[0] || 1) - 1) * pageSize + rows.length + (pageSize && rows.length >= pageSize ? 1 : 0) : view.length;
-  const pageCount = pageSize ? Math.max(1, Math.ceil(total / pageSize)) : 1;
+  const pageCount = pageSize ? Math.max(1, Math.ceil(total / pageSize), manual && props.totalRows == null ? pageState[0] || 1 : 1) : 1;
   const page = Math.min(Math.max(1, pageState[0] || 1), pageCount);
   const first = pageSize ? (page - 1) * pageSize : 0;
   const pageRows = pageSize && !manual ? view.slice(first, first + pageSize) : view;
   const canSortAny = !busy && (manual ? total > 1 : rows.length > 1);
   const shownTotal = manual && props.totalRows == null ? first + rows.length : total;
+  const prevCount = React.useRef(pageCount);
+  React.useEffect(
+    function() {
+      if (busy) return;
+      const before = prevCount.current;
+      prevCount.current = pageCount;
+      const asked = pageState[0] || 1;
+      if (asked === page || pageCount >= before || asked > before) return;
+      if (props.getPageHref && !props.onPageChange && !props.onStateChange) return;
+      pageState[1](page);
+      emit(sort, page);
+    },
+    [pageState[0], page, busy, pageCount]
+  );
   const linkPaging = !!props.getPageHref && !props.onPageChange && !oneCallback;
-  const prevLink = React.useRef(null), nextLink = React.useRef(null);
+  const prevLink = React.useRef(null), nextLink = React.useRef(null), jumpLink = React.useRef(null);
+  const jumpState = React.useState(null);
+  React.useEffect(
+    function() {
+      if (jumpState[0] == null) return;
+      if (jumpLink.current) jumpLink.current.click();
+      jumpState[1](null);
+    },
+    [jumpState[0]]
+  );
   function emit(s, p) {
     if (props.onStateChange) props.onStateChange({ sort: s, page: p });
   }
@@ -310,6 +344,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     if (linkPaging) {
       const a = next === page - 1 ? prevLink.current : next === page + 1 ? nextLink.current : null;
       if (a) a.click();
+      else jumpState[1](next);
       return false;
     }
     if (focus) pending.current = focus;
@@ -346,7 +381,8 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   }
   const height = props.height || 0;
   const virtual = !!height && !loading && pageRows.length > 0 && !stacked;
-  const bodyH = Math.max(ROW_H, height - ROW_H);
+  const stickyTotal = !!(props.footer && props.stickyFooter && rows.length && !loading);
+  const bodyH = Math.max(ROW_H, height - ROW_H - (stickyTotal ? ROW_H : 0));
   let start = 0, end = pageRows.length;
   if (virtual) {
     start = Math.max(0, Math.floor(scrollTop / ROW_H) - OVERSCAN);
@@ -355,9 +391,10 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   const visibleRows = Math.max(1, Math.floor(bodyH / ROW_H));
   const nCols = vis.length + (selectable ? 1 : 0);
   const nRows = loading ? 0 : pageRows.length;
+  const hasTotal = !!(props.footer && rows.length && !loading), T = nRows + 1, lastR = nRows + (hasTotal ? 1 : 0);
   const active = activeState[0];
-  const ar = Math.min(active.r, nRows), ac = Math.min(active.c, nCols - 1);
-  const activeRendered = ar === 0 || ar - 1 >= start && ar - 1 < end;
+  const ar = Math.min(active.r, lastR), ac = Math.min(active.c, nCols - 1);
+  const activeRendered = ar === 0 || hasTotal && ar === T || ar - 1 >= start && ar - 1 < end;
   function colAt(ci) {
     return selectable ? ci === 0 ? null : vis[ci - 1] : vis[ci];
   }
@@ -376,6 +413,11 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       });
       c = at >= 0 ? at + (selectable ? 1 : 0) : Math.min(p.c || 0, nCols - 1);
     }
+    const ae = document.activeElement;
+    if (ae && ae !== document.body && !gridRef.current.contains(ae)) {
+      pending.current = null;
+      return;
+    }
     const el = gridRef.current.querySelector('[data-rc="' + p.r + ":" + c + '"]');
     if (el) {
       pending.current = null;
@@ -383,12 +425,33 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     }
   });
   function focusCell(r, c) {
-    r = Math.max(0, Math.min(r, nRows));
+    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) {
+      const shown2 = function(cc) {
+        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;
+          }
+        }
+    }
     activeState[1]({ r, c });
     pending.current = { r, c };
-    if (virtual && r > 0) {
+    if (virtual && hasTotal && r === T && !props.stickyFooter) {
+      const sc = scrollRef.current;
+      sc.scrollTop = sc.scrollHeight;
+      setScrollTop(sc.scrollTop);
+    } else if (virtual && r > 0 && r <= nRows) {
       const sc = scrollRef.current, top = (r - 1) * ROW_H;
       if (top < sc.scrollTop) sc.scrollTop = top;
       else if (top + ROW_H > sc.scrollTop + bodyH) sc.scrollTop = top + ROW_H - bodyH;
@@ -405,26 +468,28 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   });
   const selSet = {};
   selected.forEach(function(k) {
-    selSet[k] = true;
+    selSet[String(k)] = true;
   });
   const nSel = pageKeys.filter(function(k) {
-    return selSet[k];
+    return selSet[String(k)];
   }).length;
   const all = nSel > 0 && nSel === pageKeys.length;
   function toggle(k, on) {
     setSelected(
       on ? selected.concat([k]) : selected.filter(function(x) {
-        return x !== k;
+        return String(x) !== String(k);
       })
     );
   }
   function toggleAll() {
     setSelected(
       all ? selected.filter(function(k) {
-        return pageKeys.indexOf(k) < 0;
+        return !pageKeys.some(function(p) {
+          return String(p) === String(k);
+        });
       }) : selected.concat(
         pageKeys.filter(function(k) {
-          return !selSet[k];
+          return !selSet[String(k)];
         })
       )
     );
@@ -629,7 +694,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       return;
     }
     const p = rc.split(":"), r = +p[0], c = +p[1], k = e.key, col = colAt(c);
-    const row = r > 0 ? pageRows[r - 1] : null;
+    const row = r > 0 && r <= nRows ? pageRows[r - 1] : null, isTotal = hasTotal && r === T;
     let handled = true;
     if (r === 0 && col && e.altKey && (k === "ArrowLeft" || k === "ArrowRight") && canResize(col))
       setW(col, widthOf(col) + (k === "ArrowLeft" ? -1 : 1) * (e.shiftKey ? 48 : 16), true);
@@ -640,21 +705,23 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     else if (k === "ArrowRight") focusCell(r, c + 1);
     else if (k === "ArrowLeft") focusCell(r, c - 1);
     else if (k === "ArrowDown") {
-      if (r < nRows) focusCell(r + 1, c);
+      if (r < lastR) focusCell(r + 1, c);
       else if (pageSize && page < pageCount && goPage(page + 1, { r: 1, c })) activeState[1]({ r: 1, c });
     } else if (k === "ArrowUp") {
       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 ? nRows : r, nCols - 1);
+    else if (k === "End") focusCell(e.ctrlKey ? lastR : r, nCols - 1);
     else if (k === "PageDown") {
       if (pageSize) {
         if (goPage(page + 1, { r: 1, c })) activeState[1]({ r: 1, c });
-      } else focusCell(Math.min(nRows, r + visibleRows), c);
+      } else focusCell(Math.min(lastR, r + visibleRows), c);
     } else if (k === "PageUp") {
       if (pageSize) {
         if (goPage(page - 1, { r: 1, c })) activeState[1]({ r: 1, c });
       } else focusCell(Math.max(1, r - visibleRows), c);
+    } else if (isTotal && (k === " " || k === "Enter" || k === "F2")) {
+      handled = false;
     } else if (k === "F2" && r > 0) {
       const inner = target.querySelector("button, a[href], input, select, textarea");
       if (inner) inner.focus();
@@ -1025,9 +1092,10 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       }
     );
   }
-  if (pageSize && (rows.length || busy)) {
+  const openTotal = manual && props.totalRows == null && !!pageSize && rows.length >= pageSize;
+  if (pageSize && (rows.length || busy || page > 1)) {
     const from = rows.length ? first + 1 : 0, to = manual ? first + rows.length : Math.min(first + pageSize, view.length);
-    foot = /* @__PURE__ */ React.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React.createElement("span", { "aria-live": "polite" }, busy ? t.loading : t.range(from, to, shownTotal)), /* @__PURE__ */ React.createElement("span", { className: "aura-table__pager" }, /* @__PURE__ */ React.createElement("span", null, t.page(page, pageCount)), pagerButton(-1), pagerButton(1)));
+    foot = /* @__PURE__ */ React.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React.createElement("span", { "aria-live": "polite" }, busy ? t.loading : openTotal ? t.rangeOpen(from, to) : t.range(from, to, shownTotal)), /* @__PURE__ */ React.createElement("span", { className: "aura-table__pager" }, /* @__PURE__ */ React.createElement("span", null, openTotal ? t.pageOpen(page) : t.page(page, pageCount)), pagerButton(-1), pagerButton(1)));
   } 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));
   }
@@ -1041,15 +1109,32 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       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,
+    selectable ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        role: "gridcell",
+        "aria-colindex": 1,
+        className: cx("aura-table__sel", nPinned && "is-pinned"),
+        tabIndex: tabFor(T, 0),
+        "data-rc": T + ":0",
+        onFocus: function() {
+          activeState[1]({ r: T, c: 0 });
+        }
+      }
+    ) : null,
     vis.map(function(c, j) {
-      const pin = isPinned(c);
+      const pin = isPinned(c), ci = j + (selectable ? 1 : 0);
       return /* @__PURE__ */ React.createElement(
         "span",
         {
           key: c.key,
           role: "gridcell",
           "aria-colindex": j + (selectable ? 2 : 1),
+          tabIndex: tabFor(T, ci),
+          "data-rc": T + ":" + ci,
+          onFocus: function() {
+            if (activeState[0].r !== T || activeState[0].c !== ci) activeState[1]({ r: T, c: ci });
+          },
           className: cx(
             "aura-table__td",
             c.mono && "aura-table__mono",
@@ -1075,8 +1160,9 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     )
   ) : null;
   const scrollStyle = {
-    scrollPaddingLeft: "calc(var(--aura-space-6)" + selW + " + " + acc + "px)",
-    scrollPaddingTop: ROW_H + "px"
+    scrollPaddingLeft: "calc(var(--aura-space-6)" + selW + " + " + acc + ")",
+    scrollPaddingTop: ROW_H + "px",
+    scrollPaddingBottom: stickyTotal ? ROW_H + "px" : void 0
   };
   if (height) scrollStyle["--aura-table-h"] = height + "px";
   const gridEl = /* @__PURE__ */ React.createElement(
@@ -1110,7 +1196,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
         role: "grid",
         "aria-label": props.label,
         "aria-busy": busy || void 0,
-        "aria-rowcount": loading ? -1 : shownTotal + 1 + (totalRow ? 1 : 0),
+        "aria-rowcount": loading || manual && props.totalRows == null && pageSize && rows.length >= pageSize ? -1 : shownTotal + 1 + (totalRow ? 1 : 0),
         "aria-colcount": nCols,
         "aria-multiselectable": selectable || void 0,
         onKeyDown: onGridKey,
@@ -1158,7 +1244,8 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
         items: menu.kind === "picker" ? pickerItems() : byKey[menu.key] ? columnMenuItems(byKey[menu.key]) : []
       }
     ) : null,
-    tipEl
+    tipEl,
+    jumpState[0] != null && props.getPageHref ? /* @__PURE__ */ React.createElement(Link, { ref: jumpLink, href: props.getPageHref(jumpState[0]), hidden: true, tabIndex: -1, "aria-hidden": true }) : null
   );
   if (!levels.length) return gridEl;
   let out = gridEl;