@jirawatpyk/aura-react 4.4.2 → 4.5.1

package/dist/esm/DataTable.js

@@ -1,104 +1,120 @@
 'use client';
 import * as React from "react";
-import { useStrings, useAuraLocale } from "./locale.js";
-import { cx, omit, useMaybeControlled, compare, useIsoLayoutEffect, useMergedRef } from "./internal.js";
+import { useStrings } from "./locale.js";
+import { cx, useMaybeControlled, compare, useIsoLayoutEffect, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { Checkbox } from "./Checkbox.js";
 import { Menu } from "./Menu.js";
 import { StatusPill, toneFor, TONE_ORDER } from "./StatusPill.js";
-const h = React.createElement;
-var BP = { sm: 640, md: 768, lg: 1024, xl: 1280 };
-var DEFAULT_COLUMNS = [
+const BP = { sm: 640, md: 768, lg: 1024, xl: 1280 };
+const DEFAULT_COLUMNS = [
   { key: "id", label: "ID", width: 96, mono: true },
   { key: "name", label: "NAME", width: 160 },
   { key: "status", label: "STATUS", width: 112, pill: true },
   { key: "owner", label: "OWNER" }
 ];
-var SKELETON_WIDTHS = ["72%", "56%", "84%", "44%", "64%"];
-var ROW_H = 48, OVERSCAN = 8, FLEX_MIN = 160;
+const SKELETON_WIDTHS = ["72%", "56%", "84%", "44%", "64%"];
+const ROW_H = 48, OVERSCAN = 8, FLEX_MIN = 160;
 const DataTable = React.forwardRef(function DataTable2(props, ref) {
-  var t = useStrings();
-  var columns = props.columns || DEFAULT_COLUMNS;
-  var byKey = {};
+  const t = useStrings();
+  const columns = props.columns || DEFAULT_COLUMNS;
+  const byKey = {};
   columns.forEach(function(c) {
     byKey[c.key] = c;
   });
-  var rows = props.rows || [];
-  var rowKey = props.rowKey || columns[0].key;
-  var loading = !!props.loading;
-  var selectable = !!props.selectable;
-  var reorderable = props.reorderable !== false && !!props.columnControls;
-  var controls = !!props.columnControls;
-  var sortState = useMaybeControlled(props.sort, props.defaultSort || null, props.onSortChange);
-  var sort = sortState[0], setSort = sortState[1];
-  var selState = useMaybeControlled(props.selected, props.defaultSelected || [], props.onSelectionChange);
-  var selected = selState[0], setSelected = selState[1];
-  var pageState = useMaybeControlled(props.page, props.defaultPage || 1, props.onPageChange);
-  var orderState = useMaybeControlled(props.columnOrder, columns.map(function(c) {
-    return c.key;
-  }), props.onColumnOrderChange);
-  var hiddenState = useMaybeControlled(props.hiddenColumns, columns.filter(function(c) {
-    return c.hidden;
-  }).map(function(c) {
-    return c.key;
-  }), props.onHiddenColumnsChange);
-  var pinState = useMaybeControlled(props.pinnedColumns, columns.filter(function(c) {
-    return c.pinned;
-  }).map(function(c) {
-    return c.key;
-  }), props.onPinnedColumnsChange);
-  var widthState = React.useState({});
-  var widths = widthState[0], setWidths = widthState[1];
-  var activeState = React.useState({ r: 1, c: 0 });
-  var scrollState = React.useState(0);
-  var scrollTop = scrollState[0], setScrollTop = scrollState[1];
-  var scrolledX = React.useState(false);
-  var menuState = React.useState(null);
-  var menu = menuState[0], setMenu = menuState[1];
-  var dragState = React.useState(null);
-  var drag = dragState[0], setDrag = dragState[1];
-  var gridRef = React.useRef(null);
-  var wrapRef = React.useRef(null), wrapMerged = useMergedRef(ref, wrapRef);
-  var boxWidth = React.useState(null);
-  var measure = !!props.stackBelow || columns.some(function(c) {
+  const rows = props.rows || [];
+  const rowKey = props.rowKey || columns[0].key;
+  const loading = !!props.loading;
+  const selectable = !!props.selectable;
+  const reorderable = props.reorderable !== false && !!props.columnControls;
+  const controls = !!props.columnControls;
+  const sortState = useMaybeControlled(props.sort, props.defaultSort || null, props.onSortChange);
+  const sort = sortState[0], setSort = sortState[1];
+  const selState = useMaybeControlled(props.selected, props.defaultSelected || [], props.onSelectionChange);
+  const selected = selState[0], setSelected = selState[1];
+  const pageState = useMaybeControlled(props.page, props.defaultPage || 1, props.onPageChange);
+  const orderState = useMaybeControlled(
+    props.columnOrder,
+    columns.map(function(c) {
+      return c.key;
+    }),
+    props.onColumnOrderChange
+  );
+  const hiddenState = useMaybeControlled(
+    props.hiddenColumns,
+    columns.filter(function(c) {
+      return c.hidden;
+    }).map(function(c) {
+      return c.key;
+    }),
+    props.onHiddenColumnsChange
+  );
+  const pinState = useMaybeControlled(
+    props.pinnedColumns,
+    columns.filter(function(c) {
+      return c.pinned;
+    }).map(function(c) {
+      return c.key;
+    }),
+    props.onPinnedColumnsChange
+  );
+  const widthState = React.useState({});
+  const widths = widthState[0], setWidths = widthState[1];
+  const activeState = React.useState({ r: 1, c: 0 });
+  const scrollState = React.useState(0);
+  const scrollTop = scrollState[0], setScrollTop = scrollState[1];
+  const scrolledX = React.useState(false);
+  const menuState = React.useState(null);
+  const menu = menuState[0], setMenu = menuState[1];
+  const dragState = React.useState(null);
+  const drag = dragState[0], setDrag = dragState[1];
+  const gridRef = React.useRef(null);
+  const wrapRef = React.useRef(null), wrapMerged = useMergedRef(ref, wrapRef);
+  const boxWidth = React.useState(null);
+  const measure = !!props.stackBelow || columns.some(function(c) {
     return c.hideBelow != null;
   });
-  React.useEffect(function() {
-    if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
-    var ro = new ResizeObserver(function(en) {
-      boxWidth[1](en[0].contentRect.width);
-    });
-    ro.observe(wrapRef.current);
-    return function() {
-      ro.disconnect();
-    };
-  }, [measure]);
-  var stacked = !!props.stackBelow && boxWidth[0] != null && boxWidth[0] < props.stackBelow;
+  React.useEffect(
+    function() {
+      if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(function(en) {
+        boxWidth[1](en[0].contentRect.width);
+      });
+      ro.observe(wrapRef.current);
+      return function() {
+        ro.disconnect();
+      };
+    },
+    [measure]
+  );
+  const stacked = !!props.stackBelow && boxWidth[0] != null && boxWidth[0] < props.stackBelow;
   function tooNarrow(c) {
     if (c.hideBelow == null || boxWidth[0] == null || stacked) return false;
-    var px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
+    const px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
     return px != null && boxWidth[0] < px;
   }
-  var scrollRef = React.useRef(null);
-  var pending = React.useRef(null);
-  var resizing = React.useRef(false);
+  const scrollRef = React.useRef(null);
+  const pending = React.useRef(null);
+  const resizing = React.useRef(false);
   useIsoLayoutEffect(function() {
     if (stacked || !gridRef.current) return;
-    var 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"]');
-    for (var i2 = 0; i2 < els.length; i2++) if (els[i2].tabIndex !== -1) els[i2].tabIndex = -1;
+    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"]'
+    );
+    for (let i = 0; i < els.length; i++) if (els[i].tabIndex !== -1) els[i].tabIndex = -1;
   });
   function widthOf(c) {
     return widths[c.key] != null ? widths[c.key] : c.width;
   }
-  var order = orderState[0].filter(function(k) {
+  const order = orderState[0].filter(function(k) {
     return byKey[k];
   });
   columns.forEach(function(c) {
     if (order.indexOf(c.key) < 0) order.push(c.key);
   });
-  var hidden = hiddenState[0], pinnedKeys = pinState[0];
-  var shown = order.filter(function(k) {
+  const hidden = hiddenState[0], pinnedKeys = pinState[0];
+  const shown = order.filter(function(k) {
     return hidden.indexOf(k) < 0;
   }).map(function(k) {
     return byKey[k];
@@ -108,84 +124,89 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   function isPinned(c) {
     return pinnedKeys.indexOf(c.key) >= 0 && c.width != null;
   }
-  var vis = shown.filter(isPinned).concat(shown.filter(function(c) {
-    return !isPinned(c);
-  }));
-  var nPinned = vis.filter(isPinned).length;
-  var hasFlex = vis.some(function(c) {
+  const vis = shown.filter(isPinned).concat(
+    shown.filter(function(c) {
+      return !isPinned(c);
+    })
+  );
+  const nPinned = vis.filter(isPinned).length;
+  const hasFlex = vis.some(function(c) {
     return widthOf(c) == null;
   });
-  var fixedSum = 0;
+  let fixedSum = 0;
   vis.forEach(function(c) {
     fixedSum += widthOf(c) != null ? widthOf(c) : FLEX_MIN;
   });
-  var pinOffsets = {}, acc = 0;
+  let pinOffsets = {}, acc = 0;
   vis.forEach(function(c) {
     if (isPinned(c)) {
       pinOffsets[c.key] = acc;
       acc += widthOf(c);
     }
   });
-  var selW = selectable ? " + var(--aura-table-select-width)" : "";
-  var gutterR = controls ? "var(--aura-space-12)" : "var(--aura-space-6)";
-  var rowMinWidth = "calc(" + fixedSum + "px + var(--aura-space-6) + " + gutterR + selW + ")";
-  function cellStyle(c, i2) {
-    var w = widthOf(c), s;
+  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 + ")";
+  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 && i2 === vis.length - 1) s = { flex: "1 0 auto", width: w + "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)";
     return s;
   }
-  var view = React.useMemo(function() {
-    if (!sort || !sort.key || !byKey[sort.key]) return rows;
-    var col = byKey[sort.key];
-    var val = col.sortValue || (col.pill ? function(r) {
-      return TONE_ORDER[col.tones && col.tones[r[col.key]] || toneFor(r[col.key])];
-    } : function(r) {
-      return r[col.key];
-    });
-    var dir = sort.dir === "desc" ? -1 : 1;
-    return rows.map(function(r, i2) {
-      return [r, i2];
-    }).sort(function(a, b) {
-      return compare(val(a[0]), val(b[0])) * dir || a[1] - b[1];
-    }).map(function(p) {
-      return p[0];
-    });
-  }, [rows, sort && sort.key, sort && sort.dir]);
+  const view = React.useMemo(
+    function() {
+      if (!sort || !sort.key || !byKey[sort.key]) return rows;
+      const col = byKey[sort.key];
+      const val = col.sortValue || (col.pill ? function(r) {
+        return TONE_ORDER[col.tones && col.tones[r[col.key]] || toneFor(r[col.key])];
+      } : function(r) {
+        return r[col.key];
+      });
+      const dir = sort.dir === "desc" ? -1 : 1;
+      return rows.map(function(r, i) {
+        return [r, i];
+      }).sort(function(a, b) {
+        return compare(val(a[0]), val(b[0])) * dir || a[1] - b[1];
+      }).map(function(p) {
+        return p[0];
+      });
+    },
+    [rows, sort && sort.key, sort && sort.dir]
+  );
   function nextSort(key) {
     if (!sort || sort.key !== key) return { key, dir: "asc" };
     if (sort.dir === "asc") return { key, dir: "desc" };
     return null;
   }
-  var pageSize = props.pageSize || 0;
-  var pageCount = pageSize ? Math.max(1, Math.ceil(view.length / pageSize)) : 1;
-  var page = Math.min(Math.max(1, pageState[0] || 1), pageCount);
-  var first = pageSize ? (page - 1) * pageSize : 0;
-  var pageRows = pageSize ? view.slice(first, first + pageSize) : view;
+  const pageSize = props.pageSize || 0;
+  const pageCount = pageSize ? Math.max(1, Math.ceil(view.length / pageSize)) : 1;
+  const page = Math.min(Math.max(1, pageState[0] || 1), pageCount);
+  const first = pageSize ? (page - 1) * pageSize : 0;
+  const pageRows = pageSize ? view.slice(first, first + pageSize) : view;
   function goPage(p, focus) {
-    var next = Math.min(Math.max(1, p), pageCount);
+    const next = Math.min(Math.max(1, p), pageCount);
     if (next === page) return false;
     if (focus) pending.current = focus;
     pageState[1](next);
     if (scrollRef.current) scrollRef.current.scrollTop = 0;
     return true;
   }
-  var height = props.height || 0;
-  var virtual = !!height && !loading && pageRows.length > 0;
-  var bodyH = Math.max(ROW_H, height - ROW_H);
-  var start = 0, end = pageRows.length;
+  const height = props.height || 0;
+  const virtual = !!height && !loading && pageRows.length > 0;
+  const bodyH = Math.max(ROW_H, height - ROW_H);
+  let start = 0, end = pageRows.length;
   if (virtual) {
     start = Math.max(0, Math.floor(scrollTop / ROW_H) - OVERSCAN);
     end = Math.min(pageRows.length, Math.ceil((scrollTop + bodyH) / ROW_H) + OVERSCAN);
   }
-  var visibleRows = Math.max(1, Math.floor(bodyH / ROW_H));
-  var nCols = vis.length + (selectable ? 1 : 0);
-  var nRows = loading ? 0 : pageRows.length;
-  var active = activeState[0];
-  var ar = Math.min(active.r, nRows), ac = Math.min(active.c, nCols - 1);
-  var activeRendered = ar === 0 || ar - 1 >= start && ar - 1 < end;
+  const visibleRows = Math.max(1, Math.floor(bodyH / ROW_H));
+  const nCols = vis.length + (selectable ? 1 : 0);
+  const nRows = loading ? 0 : pageRows.length;
+  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;
   function colAt(ci) {
     return selectable ? ci === 0 ? null : vis[ci - 1] : vis[ci];
   }
@@ -194,17 +215,17 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     return r === ar && c === ac ? 0 : -1;
   }
   React.useEffect(function() {
-    var p = pending.current;
+    const p = pending.current;
     if (!p || !gridRef.current) return;
-    var c = p.c;
+    let c = p.c;
     if (p.key) {
-      var at = -1;
-      vis.forEach(function(x, i2) {
-        if (x.key === p.key) at = i2;
+      let at = -1;
+      vis.forEach(function(x, i) {
+        if (x.key === p.key) at = i;
       });
       c = at >= 0 ? at + (selectable ? 1 : 0) : Math.min(p.c || 0, nCols - 1);
     }
-    var el = gridRef.current.querySelector('[data-rc="' + p.r + ":" + c + '"]');
+    const el = gridRef.current.querySelector('[data-rc="' + p.r + ":" + c + '"]');
     if (el) {
       pending.current = null;
       el.focus();
@@ -216,50 +237,56 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     activeState[1]({ r, c });
     pending.current = { r, c };
     if (virtual && r > 0) {
-      var sc = scrollRef.current, top = (r - 1) * ROW_H;
+      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;
       setScrollTop(sc.scrollTop);
     }
-    var el = gridRef.current && gridRef.current.querySelector('[data-rc="' + r + ":" + c + '"]');
+    const el = gridRef.current && gridRef.current.querySelector('[data-rc="' + r + ":" + c + '"]');
     if (el) {
       pending.current = null;
       el.focus();
     }
   }
-  var pageKeys = pageRows.map(function(r) {
+  const pageKeys = pageRows.map(function(r) {
     return r[rowKey];
   });
-  var selSet = {};
+  const selSet = {};
   selected.forEach(function(k) {
     selSet[k] = true;
   });
-  var nSel = pageKeys.filter(function(k) {
+  const nSel = pageKeys.filter(function(k) {
     return selSet[k];
   }).length;
-  var all = nSel > 0 && nSel === pageKeys.length;
+  const all = nSel > 0 && nSel === pageKeys.length;
   function toggle(k, on) {
-    setSelected(on ? selected.concat([k]) : selected.filter(function(x) {
-      return x !== k;
-    }));
+    setSelected(
+      on ? selected.concat([k]) : selected.filter(function(x) {
+        return x !== k;
+      })
+    );
   }
   function toggleAll() {
-    setSelected(all ? selected.filter(function(k) {
-      return pageKeys.indexOf(k) < 0;
-    }) : selected.concat(pageKeys.filter(function(k) {
-      return !selSet[k];
-    })));
+    setSelected(
+      all ? selected.filter(function(k) {
+        return pageKeys.indexOf(k) < 0;
+      }) : selected.concat(
+        pageKeys.filter(function(k) {
+          return !selSet[k];
+        })
+      )
+    );
   }
   function canResize(c) {
-    return props.resizable && c.resizable !== false && c.width != null;
+    return !!props.resizable && c.resizable !== false && c.width != null;
   }
   function clampW(c, w) {
     return Math.round(Math.min(c.maxWidth || 480, Math.max(c.minWidth || 64, w)));
   }
   function setW(c, w, done) {
-    var nw = clampW(c, w);
+    const nw = clampW(c, w);
     setWidths(function(prev) {
-      var o = Object.assign({}, prev);
+      const o = Object.assign({}, prev);
       o[c.key] = nw;
       return o;
     });
@@ -269,8 +296,8 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     e.preventDefault();
     e.stopPropagation();
     resizing.current = true;
-    var x0 = e.clientX, w0 = widthOf(c), last = w0;
-    var el = e.currentTarget;
+    let x0 = e.clientX, w0 = widthOf(c), last = w0;
+    const el = e.currentTarget;
     el.classList.add("is-dragging");
     document.body.style.cursor = "col-resize";
     function move(ev) {
@@ -291,99 +318,148 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     window.addEventListener("pointerup", up);
   }
   function moveCol(key, delta) {
-    var c = byKey[key], group = vis.filter(function(x) {
+    const c = byKey[key], group = vis.filter(function(x) {
       return isPinned(x) === isPinned(c);
     });
-    var gi = group.indexOf(c), target = group[gi + delta];
+    const gi = group.indexOf(c), target = group[gi + delta];
     if (!target) return false;
-    var o = order.slice(), from2 = o.indexOf(key), to2 = o.indexOf(target.key);
-    o.splice(from2, 1);
-    o.splice(to2, 0, key);
+    const o = order.slice(), from = o.indexOf(key), to = o.indexOf(target.key);
+    o.splice(from, 1);
+    o.splice(to, 0, key);
     orderState[1](o);
     return true;
   }
   function dropCol(key, targetKey, after) {
     if (key === targetKey) return;
-    var a = byKey[key], b = byKey[targetKey];
+    const a = byKey[key], b = byKey[targetKey];
     if (isPinned(a) !== isPinned(b)) return;
-    var o = order.slice();
+    const o = order.slice();
     o.splice(o.indexOf(key), 1);
-    var to2 = o.indexOf(targetKey) + (after ? 1 : 0);
-    o.splice(to2, 0, key);
+    const to = o.indexOf(targetKey) + (after ? 1 : 0);
+    o.splice(to, 0, key);
     orderState[1](o);
   }
   function togglePin(key) {
-    pinState[1](pinnedKeys.indexOf(key) >= 0 ? pinnedKeys.filter(function(k) {
-      return k !== key;
-    }) : pinnedKeys.concat([key]));
+    pinState[1](
+      pinnedKeys.indexOf(key) >= 0 ? pinnedKeys.filter(function(k) {
+        return k !== key;
+      }) : pinnedKeys.concat([key])
+    );
   }
   function setHidden(key, hide) {
     if (hide && shown.length <= 1) return;
-    hiddenState[1](hide ? hidden.concat([key]) : hidden.filter(function(k) {
-      return k !== key;
-    }));
+    hiddenState[1](
+      hide ? hidden.concat([key]) : hidden.filter(function(k) {
+        return k !== key;
+      })
+    );
   }
   function resetColumns() {
-    orderState[1](columns.map(function(c) {
-      return c.key;
-    }));
-    hiddenState[1](columns.filter(function(c) {
-      return c.hidden;
-    }).map(function(c) {
-      return c.key;
-    }));
-    pinState[1](columns.filter(function(c) {
-      return c.pinned;
-    }).map(function(c) {
-      return c.key;
-    }));
+    orderState[1](
+      columns.map(function(c) {
+        return c.key;
+      })
+    );
+    hiddenState[1](
+      columns.filter(function(c) {
+        return c.hidden;
+      }).map(function(c) {
+        return c.key;
+      })
+    );
+    pinState[1](
+      columns.filter(function(c) {
+        return c.pinned;
+      }).map(function(c) {
+        return c.key;
+      })
+    );
     setWidths({});
   }
   function columnMenuItems(c) {
-    var group = vis.filter(function(x) {
+    const group = vis.filter(function(x) {
       return isPinned(x) === isPinned(c);
     }), gi = group.indexOf(c);
-    var items = [];
-    if (c.sortable) items.push(
-      { label: t.sortAsc, icon: "arrow-up", onSelect: function() {
-        setSort({ key: c.key, dir: "asc" });
-        goPage(1);
-      } },
-      { label: t.sortDesc, icon: "arrow-down", onSelect: function() {
-        setSort({ key: c.key, dir: "desc" });
-        goPage(1);
-      } },
-      { separator: true }
-    );
-    if (c.width != null) items.push({ label: isPinned(c) ? t.unpin : t.pin, icon: isPinned(c) ? "pin-off" : "pin", onSelect: function() {
-      togglePin(c.key);
-    } });
-    if (reorderable) items.push(
-      { label: t.moveLeft, icon: "arrow-left", disabled: gi <= 0, onSelect: function() {
-        moveCol(c.key, -1);
-      } },
-      { label: t.moveRight, icon: "arrow-right", disabled: gi >= group.length - 1, onSelect: function() {
-        moveCol(c.key, 1);
-      } }
+    const items = [];
+    if (c.sortable)
+      items.push(
+        {
+          label: t.sortAsc,
+          icon: "arrow-up",
+          onSelect: function() {
+            setSort({ key: c.key, dir: "asc" });
+            goPage(1);
+          }
+        },
+        {
+          label: t.sortDesc,
+          icon: "arrow-down",
+          onSelect: function() {
+            setSort({ key: c.key, dir: "desc" });
+            goPage(1);
+          }
+        },
+        { separator: true }
+      );
+    if (c.width != null)
+      items.push({
+        label: isPinned(c) ? t.unpin : t.pin,
+        icon: isPinned(c) ? "pin-off" : "pin",
+        onSelect: function() {
+          togglePin(c.key);
+        }
+      });
+    if (reorderable)
+      items.push(
+        {
+          label: t.moveLeft,
+          icon: "arrow-left",
+          disabled: gi <= 0,
+          onSelect: function() {
+            moveCol(c.key, -1);
+          }
+        },
+        {
+          label: t.moveRight,
+          icon: "arrow-right",
+          disabled: gi >= group.length - 1,
+          onSelect: function() {
+            moveCol(c.key, 1);
+          }
+        }
+      );
+    items.push(
+      { separator: true },
+      {
+        label: t.hideColumn,
+        icon: "eye-off",
+        disabled: shown.length <= 1,
+        onSelect: function() {
+          setHidden(c.key, true);
+        }
+      }
     );
-    items.push({ separator: true }, { label: t.hideColumn, icon: "eye-off", disabled: shown.length <= 1, onSelect: function() {
-      setHidden(c.key, true);
-    } });
     return items;
   }
   function pickerItems() {
     return order.map(function(k) {
-      var c = byKey[k], on = hidden.indexOf(k) < 0;
-      return { label: c.label || (c.actions ? t.actions : c.key), checked: on, keepOpen: true, disabled: on && shown.length <= 1, onSelect: function() {
-        setHidden(k, on);
-      } };
+      const c = byKey[k], on = hidden.indexOf(k) < 0;
+      return {
+        label: c.label || (c.actions ? t.actions : c.key),
+        checked: on,
+        keepOpen: true,
+        disabled: on && shown.length <= 1,
+        onSelect: function() {
+          setHidden(k, on);
+        }
+      };
     }).concat([{ separator: true }, { label: t.resetColumns, icon: "rotate-ccw", onSelect: resetColumns }]);
   }
   function openMenu(kind, key, anchor, rc) {
     setMenu({ kind, key, anchor, rc });
   }
   function closeMenu(restore) {
-    var m = menu;
+    const m = menu;
     setMenu(null);
     if (restore && m) {
       if (m.kind === "col") pending.current = { r: 0, key: m.key, c: m.rc ? m.rc.c : 0 };
@@ -391,23 +467,26 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     }
   }
   function onGridKey(e) {
-    if (!gridRef.current || !gridRef.current.contains(e.target)) return;
-    var rc = e.target.getAttribute && e.target.getAttribute("data-rc");
+    const target = e.target;
+    if (!gridRef.current || !gridRef.current.contains(target)) return;
+    const rc = target.getAttribute && target.getAttribute("data-rc");
     if (!rc) {
-      var cell = e.key === "Escape" && e.target.closest && e.target.closest("[data-rc]");
+      const cell = e.key === "Escape" && target.closest && target.closest("[data-rc]");
       if (cell) {
         e.preventDefault();
         cell.focus();
       }
       return;
     }
-    var p = rc.split(":"), r = +p[0], c = +p[1], k = e.key, col = colAt(c);
-    var row = r > 0 ? pageRows[r - 1] : null;
-    var 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);
+    const p = rc.split(":"), r = +p[0], c = +p[1], k = e.key, col = colAt(c);
+    const row = r > 0 ? pageRows[r - 1] : null;
+    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);
     else if (r === 0 && col && e.ctrlKey && e.shiftKey && (k === "ArrowLeft" || k === "ArrowRight") && reorderable) {
       if (moveCol(col.key, k === "ArrowLeft" ? -1 : 1)) pending.current = { r: 0, key: col.key, c };
-    } else if (r === 0 && col && (e.altKey && k === "ArrowDown" || k === "ContextMenu" || e.shiftKey && k === "F10") && controls) openMenu("col", col.key, e.target, { r: 0, c });
+    } 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 === "ArrowDown") {
@@ -426,13 +505,18 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       if (pageSize) {
         if (goPage(page - 1, { r: 1, c })) activeState[1]({ r: 1, c });
       } else focusCell(Math.max(1, r - visibleRows), c);
+    } else if (k === "F2" && r > 0) {
+      const inner = target.querySelector("button, a[href], input, select, textarea");
+      if (inner) inner.focus();
+      else handled = false;
     } else if (k === " " || k === "Enter") {
       if (r === 0 && !col && selectable && nRows) toggleAll();
       else if (r === 0 && col && col.sortable && nRows > 1) {
         setSort(nextSort(col.key));
         goPage(1);
       } else if (r > 0 && k === " " && selectable) toggle(row[rowKey], !selSet[row[rowKey]]);
-      else if (r > 0 && (k === "Enter" || k === "F2") && e.target.querySelector("button, a[href], input, select, textarea")) e.target.querySelector("button, a[href], input, select, textarea").focus();
+      else if (r > 0 && k === "Enter" && target.querySelector("button, a[href], input, select, textarea"))
+        target.querySelector("button, a[href], input, select, textarea").focus();
       else if (r > 0 && k === "Enter" && props.onRowActivate) props.onRowActivate(row);
       else handled = false;
     } else handled = false;
@@ -441,83 +525,91 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       e.stopPropagation();
     }
   }
-  var head = [h("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
-  if (selectable) head.push(h("span", {
-    key: "__sel",
-    role: "columnheader",
-    "aria-colindex": 1,
-    className: cx("aura-table__sel", nPinned && "is-pinned"),
-    tabIndex: tabFor(0, 0),
-    "data-rc": "0:0",
-    "aria-label": t.selectRows,
-    onFocus: function() {
-      activeState[1]({ r: 0, c: 0 });
-    }
-  }, nRows ? h(Checkbox, {
-    checked: all,
-    indeterminate: nSel > 0 && !all,
-    tabIndex: -1,
-    label: all ? t.deselectAllRows : t.selectAllRows,
-    onChange: toggleAll
-  }) : null));
-  vis.forEach(function(c, i2) {
-    var ci = i2 + (selectable ? 1 : 0);
-    var isSorted = sort && sort.key === c.key;
-    var canSort = c.sortable && rows.length > 1 && !loading;
-    var ariaSort = isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0;
-    var pin = isPinned(c), edge = pin && i2 === nPinned - 1;
-    head.push(h(
-      "span",
-      {
-        key: c.key,
-        role: "columnheader",
-        "aria-sort": ariaSort,
-        "aria-colindex": ci + 1,
-        style: cellStyle(c, i2),
-        tabIndex: tabFor(0, ci),
-        "data-rc": "0:" + ci,
-        className: cx(
-          "aura-table__th",
-          pin && "is-pinned",
-          edge && "is-pin-edge",
-          drag && drag.over === c.key && (drag.after ? "is-drop-after" : "is-drop-before"),
-          drag && drag.key === c.key && "is-dragging"
-        ),
-        draggable: reorderable && !loading ? true : void 0,
-        onFocus: function(e) {
-          if (e.target === e.currentTarget) activeState[1]({ r: 0, c: ci });
+  const head = [/* @__PURE__ */ React.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
+  if (selectable)
+    head.push(
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          key: "__sel",
+          role: "columnheader",
+          "aria-colindex": 1,
+          className: cx("aura-table__sel", nPinned && "is-pinned"),
+          tabIndex: tabFor(0, 0),
+          "data-rc": "0:0",
+          "aria-label": t.selectRows,
+          onFocus: function() {
+            activeState[1]({ r: 0, c: 0 });
+          }
         },
-        onDragStart: function(e) {
-          if (resizing.current) {
-            e.preventDefault();
-            return;
+        nRows ? /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            checked: all,
+            indeterminate: nSel > 0 && !all,
+            tabIndex: -1,
+            label: all ? t.deselectAllRows : t.selectAllRows,
+            onChange: toggleAll
           }
-          e.dataTransfer.effectAllowed = "move";
-          try {
-            e.dataTransfer.setData("text/plain", c.key);
-          } catch (x) {
+        ) : null
+      )
+    );
+  vis.forEach(function(c, i) {
+    const ci = i + (selectable ? 1 : 0);
+    const isSorted = sort && sort.key === c.key;
+    const canSort = c.sortable && rows.length > 1 && !loading;
+    const ariaSort = isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0;
+    const pin = isPinned(c), edge = pin && i === nPinned - 1;
+    head.push(
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          key: c.key,
+          role: "columnheader",
+          "aria-sort": ariaSort,
+          "aria-colindex": ci + 1,
+          style: cellStyle(c, i),
+          tabIndex: tabFor(0, ci),
+          "data-rc": "0:" + ci,
+          className: cx(
+            "aura-table__th",
+            pin && "is-pinned",
+            edge && "is-pin-edge",
+            drag && drag.over === c.key && (drag.after ? "is-drop-after" : "is-drop-before"),
+            drag && drag.key === c.key && "is-dragging"
+          ),
+          draggable: reorderable && !loading ? true : void 0,
+          onFocus: function(e) {
+            if (e.target === e.currentTarget) activeState[1]({ r: 0, c: ci });
+          },
+          onDragStart: function(e) {
+            if (resizing.current) {
+              e.preventDefault();
+              return;
+            }
+            e.dataTransfer.effectAllowed = "move";
+            try {
+              e.dataTransfer.setData("text/plain", c.key);
+            } catch (x) {
+            }
+            setDrag({ key: c.key });
+          },
+          onDragOver: function(e) {
+            if (!drag || drag.key === c.key || isPinned(byKey[drag.key]) !== pin) return;
+            e.preventDefault();
+            const b = e.currentTarget.getBoundingClientRect(), after = e.clientX > b.left + b.width / 2;
+            if (drag.over !== c.key || drag.after !== after) setDrag({ key: drag.key, over: c.key, after });
+          },
+          onDrop: function(e) {
+            e.preventDefault();
+            if (drag && drag.over) dropCol(drag.key, drag.over, drag.after);
+            setDrag(null);
+          },
+          onDragEnd: function() {
+            setDrag(null);
           }
-          setDrag({ key: c.key });
-        },
-        onDragOver: function(e) {
-          if (!drag || drag.key === c.key || isPinned(byKey[drag.key]) !== pin) return;
-          e.preventDefault();
-          var b = e.currentTarget.getBoundingClientRect(), after = e.clientX > b.left + b.width / 2;
-          if (drag.over !== c.key || drag.after !== after) setDrag({ key: drag.key, over: c.key, after });
-        },
-        onDrop: function(e) {
-          e.preventDefault();
-          if (drag && drag.over) dropCol(drag.key, drag.over, drag.after);
-          setDrag(null);
         },
-        onDragEnd: function() {
-          setDrag(null);
-        }
-      },
-      h(
-        "span",
-        { className: "aura-table__th-inner" },
-        canSort ? h(
+        /* @__PURE__ */ React.createElement("span", { className: "aura-table__th-inner" }, canSort ? /* @__PURE__ */ React.createElement(
           "button",
           {
             type: "button",
@@ -530,10 +622,8 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
             }
           },
           c.label,
-          h(Icon, { name: isSorted ? sort.dir === "desc" ? "arrow-down" : "arrow-up" : "arrow-up-down", size: 12 })
-        ) : h("span", { className: cx("aura-table__th-label", !c.label && "aura-sr-only") }, c.label || (c.actions ? t.actions : c.key)),
-        pin ? h(Icon, { name: "pin", size: 12, className: "aura-table__pin-icon", label: t.pinned }) : null,
-        controls ? h(
+          /* @__PURE__ */ React.createElement(Icon, { name: isSorted ? sort.dir === "desc" ? "arrow-down" : "arrow-up" : "arrow-up-down", size: 12 })
+        ) : /* @__PURE__ */ React.createElement("span", { className: cx("aura-table__th-label", !c.label && "aura-sr-only") }, c.label || (c.actions ? t.actions : c.key)), pin ? /* @__PURE__ */ React.createElement(Icon, { name: "pin", size: 12, className: "aura-table__pin-icon", label: t.pinned }) : null, controls ? /* @__PURE__ */ React.createElement(
           "button",
           {
             type: "button",
@@ -547,279 +637,330 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
               openMenu("col", c.key, e.currentTarget, { r: 0, c: ci });
             }
           },
-          h(Icon, { name: "ellipsis" })
+          /* @__PURE__ */ React.createElement(Icon, { name: "ellipsis" })
+        ) : null),
+        canResize(c) ? /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: "aura-table__resize",
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-hidden": true,
+            onPointerDown: function(e) {
+              startResize(c, e);
+            },
+            onClick: function(e) {
+              e.stopPropagation();
+            },
+            onDoubleClick: function() {
+              setW(c, c.width, true);
+            }
+          }
         ) : null
-      ),
-      canResize(c) ? h("span", {
-        className: "aura-table__resize",
-        role: "separator",
-        "aria-orientation": "vertical",
-        "aria-hidden": true,
-        onPointerDown: function(e) {
-          startResize(c, e);
-        },
-        onClick: function(e) {
-          e.stopPropagation();
-        },
-        onDoubleClick: function() {
-          setW(c, c.width, true);
-        }
-      }) : null
-    ));
+      )
+    );
   });
-  head.push(h("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker"), "aria-hidden": true }));
-  function rowCells(r, i2, k, isSel) {
-    var ri2 = i2 + 1;
-    var cells = [h("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
-    if (selectable) cells.push(h("span", {
-      key: "__sel",
-      role: "gridcell",
-      "aria-colindex": 1,
-      className: cx("aura-table__sel", nPinned && "is-pinned"),
-      tabIndex: tabFor(ri2, 0),
-      "data-rc": ri2 + ":0",
-      "aria-label": t.selectRow(k),
-      onFocus: function(e) {
-        if (e.target === e.currentTarget) activeState[1]({ r: ri2, c: 0 });
+  head.push(
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        key: "__gr",
+        className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker"),
+        "aria-hidden": true
       }
-    }, h(Checkbox, { checked: isSel, tabIndex: -1, label: t.selectRow(k), onChange: function(on) {
-      toggle(k, on);
-    } })));
+    )
+  );
+  function rowCells(r, i, k, isSel) {
+    const ri = i + 1;
+    const cells = [/* @__PURE__ */ React.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
+    if (selectable)
+      cells.push(
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            key: "__sel",
+            role: "gridcell",
+            "aria-colindex": 1,
+            className: cx("aura-table__sel", nPinned && "is-pinned"),
+            tabIndex: tabFor(ri, 0),
+            "data-rc": ri + ":0",
+            "aria-label": t.selectRow(k),
+            onFocus: function(e) {
+              if (e.target === e.currentTarget) activeState[1]({ r: ri, c: 0 });
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            Checkbox,
+            {
+              checked: isSel,
+              tabIndex: -1,
+              label: t.selectRow(k),
+              onChange: function(on) {
+                toggle(k, on);
+              }
+            }
+          )
+        )
+      );
     vis.forEach(function(c, j) {
-      var ci = j + (selectable ? 1 : 0), v = r[c.key], pin = isPinned(c);
-      cells.push(h("span", {
-        key: c.key,
-        role: "gridcell",
-        "aria-colindex": ci + 1,
-        tabIndex: tabFor(ri2, ci),
-        "data-rc": ri2 + ":" + ci,
-        className: cx("aura-table__td", c.mono && "aura-table__mono", pin && "is-pinned", pin && j === nPinned - 1 && "is-pin-edge"),
-        style: cellStyle(c, j),
-        onFocus: function() {
-          if (activeState[0].r !== ri2 || activeState[0].c !== ci) activeState[1]({ r: ri2, c: ci });
-        }
-      }, c.render ? c.render(r) : c.pill ? h(StatusPill, { tone: c.tones && c.tones[v] }, v) : v));
+      const ci = j + (selectable ? 1 : 0), v = r[c.key], pin = isPinned(c);
+      cells.push(
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            key: c.key,
+            role: "gridcell",
+            "aria-colindex": ci + 1,
+            tabIndex: tabFor(ri, ci),
+            "data-rc": ri + ":" + ci,
+            className: cx(
+              "aura-table__td",
+              c.mono && "aura-table__mono",
+              pin && "is-pinned",
+              pin && j === nPinned - 1 && "is-pin-edge"
+            ),
+            style: cellStyle(c, j),
+            onFocus: function() {
+              if (activeState[0].r !== ri || activeState[0].c !== ci) activeState[1]({ r: ri, c: ci });
+            }
+          },
+          c.render ? c.render(r) : c.pill ? /* @__PURE__ */ React.createElement(StatusPill, { ...{ tone: c.tones && c.tones[v] } }, v) : v
+        )
+      );
     });
-    cells.push(h("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker"), "aria-hidden": true }));
+    cells.push(
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          key: "__gr",
+          className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker"),
+          "aria-hidden": true
+        }
+      )
+    );
     return cells;
   }
-  var body;
-  var rowStyle = { minWidth: rowMinWidth };
+  let body;
+  const rowStyle = { minWidth: rowMinWidth };
   if (loading) {
-    var n = pageSize || props.skeletonRows || 5;
-    body = [];
-    for (var i = 0; i < n; i++) {
-      var sk = [h("span", { key: "__gl", className: "aura-table__gutter" })];
-      if (selectable) sk.push(h("span", { key: "__sel", className: cx("aura-table__sel", nPinned && "is-pinned") }, h("span", { className: "aura-skel aura-skel--box" })));
+    const n = pageSize || props.skeletonRows || 5;
+    const skRows = body = [];
+    for (let i = 0; i < n; i++) {
+      const sk = [/* @__PURE__ */ React.createElement("span", { key: "__gl", className: "aura-table__gutter" })];
+      if (selectable)
+        sk.push(
+          /* @__PURE__ */ React.createElement("span", { key: "__sel", className: cx("aura-table__sel", nPinned && "is-pinned") }, /* @__PURE__ */ React.createElement("span", { className: "aura-skel aura-skel--box" }))
+        );
       vis.forEach(function(c, j) {
-        sk.push(h(
-          "span",
-          { key: c.key, className: cx("aura-table__td", isPinned(c) && "is-pinned"), style: cellStyle(c, j) },
-          h("span", { className: cx("aura-skel", c.pill && "aura-skel--pill"), style: c.pill ? null : { width: SKELETON_WIDTHS[(i + j) % SKELETON_WIDTHS.length] } })
-        ));
+        sk.push(
+          /* @__PURE__ */ React.createElement("span", { key: c.key, className: cx("aura-table__td", isPinned(c) && "is-pinned"), style: cellStyle(c, j) }, /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              className: cx("aura-skel", c.pill && "aura-skel--pill"),
+              style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j) % SKELETON_WIDTHS.length] }
+            }
+          ))
+        );
       });
-      sk.push(h("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") }));
-      body.push(h("div", { key: "sk" + i, className: "aura-table__row aura-table__row--skeleton", "aria-hidden": true, style: rowStyle }, sk));
+      sk.push(
+        /* @__PURE__ */ React.createElement("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") })
+      );
+      skRows.push(
+        /* @__PURE__ */ React.createElement("div", { key: "sk" + i, className: "aura-table__row aura-table__row--skeleton", "aria-hidden": true, style: rowStyle }, sk)
+      );
     }
   } else if (!rows.length) {
-    var em = props.empty || {};
-    body = h(
-      "div",
-      { className: "aura-table__empty", role: "row" },
-      h(
-        "div",
-        { role: "gridcell" },
-        h("span", { className: "aura-table__empty-icon" }, h(Icon, { name: em.icon || "inbox", size: "lg" })),
-        h("p", { className: "aura-table__empty-title" }, em.title || t.empty),
-        em.description ? h("p", { className: "aura-table__empty-text" }, em.description) : null,
-        em.action ? h("div", { className: "aura-table__empty-action" }, em.action) : null
-      )
-    );
+    const em = props.empty || {};
+    body = /* @__PURE__ */ React.createElement("div", { className: "aura-table__empty", role: "row" }, /* @__PURE__ */ React.createElement("div", { role: "gridcell" }, /* @__PURE__ */ React.createElement("span", { className: "aura-table__empty-icon" }, /* @__PURE__ */ React.createElement(Icon, { name: em.icon || "inbox", size: "lg" })), /* @__PURE__ */ React.createElement("p", { className: "aura-table__empty-title" }, em.title || t.empty), em.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-table__empty-text" }, em.description) : null, em.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-table__empty-action" }, em.action) : null));
   } else {
-    body = [];
-    if (virtual && start > 0) body.push(h("div", { key: "__top", style: { height: start * ROW_H + "px" }, "aria-hidden": true }));
-    for (var ri = start; ri < end; ri++) {
-      (function(r, i2) {
-        var k = r[rowKey], isSel = !!selSet[k];
-        body.push(h("div", {
-          key: k,
-          role: "row",
-          "aria-rowindex": first + i2 + 2,
-          "aria-selected": selectable ? isSel : void 0,
-          className: cx("aura-table__row", isSel && "is-selected", props.onRowActivate && "is-actionable"),
-          style: rowStyle,
-          onClick: function(e) {
-            if (e.target.closest && e.target.closest(".aura-check, button, a, input")) return;
-            if (props.onRowActivate) props.onRowActivate(r);
-          }
-        }, rowCells(r, i2, k, isSel)));
+    const bodyRows = body = [];
+    if (virtual && start > 0)
+      bodyRows.push(/* @__PURE__ */ React.createElement("div", { key: "__top", style: { height: start * ROW_H + "px" }, "aria-hidden": true }));
+    for (let ri = start; ri < end; ri++) {
+      (function(r, i) {
+        const k = r[rowKey], isSel = !!selSet[k];
+        bodyRows.push(
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              key: k,
+              role: "row",
+              "aria-rowindex": first + i + 2,
+              "aria-selected": selectable ? isSel : void 0,
+              className: cx("aura-table__row", isSel && "is-selected", props.onRowActivate && "is-actionable"),
+              style: rowStyle,
+              onClick: function(e) {
+                const el = e.target;
+                if (el.closest && el.closest(".aura-check, button, a, input")) return;
+                if (props.onRowActivate) props.onRowActivate(r);
+              }
+            },
+            rowCells(r, i, k, isSel)
+          )
+        );
       })(pageRows[ri], ri);
     }
-    if (virtual && end < pageRows.length) body.push(h("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
+    if (virtual && end < pageRows.length)
+      bodyRows.push(/* @__PURE__ */ React.createElement("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
   }
-  var foot = null;
+  let foot = null;
   if (pageSize && (rows.length || loading)) {
-    var from = rows.length ? first + 1 : 0, to = Math.min(first + pageSize, view.length);
-    foot = h(
-      "div",
-      { className: "aura-table__foot" },
-      h("span", { "aria-live": "polite" }, loading ? t.loading : t.range(from, to, view.length)),
-      h(
-        "span",
-        { className: "aura-table__pager" },
-        h("span", null, t.page(page, pageCount)),
-        h(IconButton, { icon: "chevron-left", label: t.prevPage, disabled: loading || page <= 1, onClick: function() {
+    const from = rows.length ? first + 1 : 0, to = Math.min(first + pageSize, view.length);
+    foot = /* @__PURE__ */ React.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React.createElement("span", { "aria-live": "polite" }, loading ? t.loading : t.range(from, to, view.length)), /* @__PURE__ */ React.createElement("span", { className: "aura-table__pager" }, /* @__PURE__ */ React.createElement("span", null, t.page(page, pageCount)), /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        icon: "chevron-left",
+        label: t.prevPage,
+        disabled: loading || page <= 1,
+        onClick: function() {
           goPage(page - 1);
-        } }),
-        h(IconButton, { icon: "chevron-right", label: t.nextPage, disabled: loading || page >= pageCount, onClick: function() {
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        icon: "chevron-right",
+        label: t.nextPage,
+        disabled: loading || page >= pageCount,
+        onClick: function() {
           goPage(page + 1);
-        } })
-      )
-    );
+        }
+      }
+    )));
   } else if (height && rows.length && !loading) {
-    foot = h(
-      "div",
-      { className: "aura-table__foot" },
-      h("span", null, t.rowCount(view.length)),
-      selectable && selected.length ? h("span", null, t.selectedCount(selected.length)) : h("span", null)
-    );
+    foot = /* @__PURE__ */ React.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React.createElement("span", null, t.rowCount(view.length)), selectable && selected.length ? /* @__PURE__ */ React.createElement("span", null, t.selectedCount(selected.length)) : /* @__PURE__ */ React.createElement("span", null));
   }
   if (stacked) {
-    var titleCol = vis[0], pillCol = vis.filter(function(c) {
+    const titleCol = vis[0], pillCol = vis.filter(function(c) {
       return c.pill && c !== titleCol;
     })[0];
-    var actionCols = vis.filter(function(c) {
+    const actionCols = vis.filter(function(c) {
       return c.actions && c !== titleCol;
     });
-    var rest = vis.filter(function(c) {
+    const rest = vis.filter(function(c) {
       return c !== titleCol && c !== pillCol && !c.actions;
     });
-    var cardBody;
+    let cardBody;
     if (loading) {
-      cardBody = h("ul", { className: "aura-table__cards", "aria-busy": true }, [0, 1, 2].map(function(i2) {
-        return h(
-          "li",
-          { key: i2, className: "aura-table__card", "aria-hidden": true },
-          h("span", { className: "aura-skel", style: { width: "50%", height: "14px" } }),
-          h("span", { className: "aura-skel", style: { width: "80%" } }),
-          h("span", { className: "aura-skel", style: { width: "64%" } })
-        );
+      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) {
-      var em2 = props.empty || {};
-      cardBody = h("div", { className: "aura-table__empty" }, h(
-        "div",
-        null,
-        h("span", { className: "aura-table__empty-icon" }, h(Icon, { name: em2.icon || "inbox", size: "lg" })),
-        h("p", { className: "aura-table__empty-title" }, em2.title || t.empty),
-        em2.description ? h("p", { className: "aura-table__empty-text" }, em2.description) : null,
-        em2.action ? h("div", { className: "aura-table__empty-action" }, em2.action) : null
-      ));
+      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 {
-      var cellVal = function(c, r) {
-        var v = r[c.key];
-        return c.render ? c.render(r) : c.pill ? h(StatusPill, { tone: c.tones && c.tones[v] }, v) : v;
+      const cellVal = function(c, r) {
+        const v = r[c.key];
+        return c.render ? c.render(r) : c.pill ? /* @__PURE__ */ React.createElement(StatusPill, { ...{ tone: c.tones && c.tones[v] } }, v) : v;
       };
-      cardBody = h("ul", { className: "aura-table__cards", "aria-label": props.label }, pageRows.map(function(r) {
-        var k = r[rowKey], isSel = !!selSet[k];
-        return h(
+      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 && "is-actionable"),
             tabIndex: props.onRowActivate ? 0 : void 0,
             onClick: function(e) {
-              if (e.target.closest && e.target.closest(".aura-check, button, a, input")) return;
+              const el = e.target;
+              if (el.closest && el.closest(".aura-check, button, a, input")) return;
               if (props.onRowActivate) props.onRowActivate(r);
             },
             onKeyDown: function(e) {
               if (e.target === e.currentTarget && e.key === "Enter" && props.onRowActivate) props.onRowActivate(r);
             }
           },
-          h(
-            "div",
-            { className: "aura-table__card-head" },
-            selectable ? h(Checkbox, { checked: isSel, label: t.selectRow(k), onChange: function(on) {
-              toggle(k, on);
-            } }) : null,
-            h("span", { className: cx("aura-table__card-title", titleCol.mono && "aura-table__mono") }, cellVal(titleCol, r)),
-            pillCol ? cellVal(pillCol, r) : null,
-            actionCols.map(function(c) {
-              return h("span", { key: c.key, className: "aura-table__card-actions" }, cellVal(c, r));
-            })
-          ),
-          rest.length ? h("dl", { className: "aura-table__card-fields" }, rest.map(function(c) {
-            return h("div", { key: c.key }, h("dt", null, c.label), h("dd", { className: c.mono ? "aura-table__mono" : void 0 }, cellVal(c, 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") }, 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 h(
+    return /* @__PURE__ */ React.createElement(
       "div",
-      { ref: wrapMerged, className: cx("aura-table aura-table--stacked", props.className), role: "region", "aria-label": props.label, "aria-busy": loading || void 0 },
-      selectable && pageRows.length && !loading ? h(
-        "div",
-        { className: "aura-table__stack-bar" },
-        h(Checkbox, { checked: all, indeterminate: nSel > 0 && !all, label: all ? t.deselectAllRows : t.selectAllRows, onChange: toggleAll }),
-        h("span", null, nSel ? t.selectedCount(nSel) : t.selectAll)
-      ) : null,
+      {
+        ref: wrapMerged,
+        className: cx("aura-table aura-table--stacked", props.className),
+        role: "region",
+        "aria-label": props.label,
+        "aria-busy": loading || void 0
+      },
+      selectable && pageRows.length && !loading ? /* @__PURE__ */ React.createElement("div", { className: "aura-table__stack-bar" }, /* @__PURE__ */ React.createElement(
+        Checkbox,
+        {
+          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
     );
   }
-  var scrollStyle = { scrollPaddingLeft: "calc(var(--aura-space-6)" + selW + " + " + acc + "px)", scrollPaddingTop: ROW_H + "px" };
+  const scrollStyle = {
+    scrollPaddingLeft: "calc(var(--aura-space-6)" + selW + " + " + acc + "px)",
+    scrollPaddingTop: ROW_H + "px"
+  };
   if (height) scrollStyle.height = height + "px";
-  return h(
+  return /* @__PURE__ */ React.createElement("div", { ref: wrapMerged, className: cx("aura-table", scrolledX[0] && "is-scrolled-x", props.className) }, /* @__PURE__ */ React.createElement(
     "div",
-    { ref: wrapMerged, className: cx("aura-table", scrolledX[0] && "is-scrolled-x", props.className) },
-    h(
-      "div",
-      {
-        ref: function(el) {
-          scrollRef.current = el;
-          gridRef.current = el;
-        },
-        className: "aura-table__scroll",
-        style: scrollStyle,
-        role: "grid",
-        "aria-label": props.label,
-        "aria-busy": loading || void 0,
-        "aria-rowcount": loading ? -1 : view.length + 1,
-        "aria-colcount": nCols,
-        "aria-multiselectable": selectable || void 0,
-        onKeyDown: onGridKey,
-        onScroll: function(e) {
-          var t2 = e.currentTarget;
-          if (virtual && Math.abs(t2.scrollTop - scrollTop) >= ROW_H / 2) setScrollTop(t2.scrollTop);
-          else if (virtual && (t2.scrollTop === 0 || t2.scrollTop + t2.clientHeight >= t2.scrollHeight - 1)) setScrollTop(t2.scrollTop);
-          var sx = t2.scrollLeft > 0;
-          if (sx !== scrolledX[0]) scrolledX[1](sx);
-        }
+    {
+      ref: function(el) {
+        scrollRef.current = el;
+        gridRef.current = el;
       },
-      h("div", { className: "aura-table__head", role: "row", "aria-rowindex": 1, style: rowStyle }, head),
-      body
-    ),
-    loading ? h("span", { className: "aura-sr-only", role: "status" }, t.loadingRows) : null,
-    controls ? h(
-      "div",
-      { className: "aura-table__picker" },
-      h(IconButton, {
-        icon: "columns-3",
-        label: t.showHideColumns,
-        "aria-haspopup": "menu",
-        onClick: function(e) {
-          openMenu("picker", null, e.currentTarget);
-        }
-      })
-    ) : null,
-    foot,
-    menu ? h(Menu, {
+      className: "aura-table__scroll",
+      style: scrollStyle,
+      role: "grid",
+      "aria-label": props.label,
+      "aria-busy": loading || void 0,
+      "aria-rowcount": loading ? -1 : view.length + 1,
+      "aria-colcount": nCols,
+      "aria-multiselectable": selectable || void 0,
+      onKeyDown: onGridKey,
+      onScroll: function(e) {
+        const t2 = e.currentTarget;
+        if (virtual && Math.abs(t2.scrollTop - scrollTop) >= ROW_H / 2) setScrollTop(t2.scrollTop);
+        else if (virtual && (t2.scrollTop === 0 || t2.scrollTop + t2.clientHeight >= t2.scrollHeight - 1))
+          setScrollTop(t2.scrollTop);
+        const sx = t2.scrollLeft > 0;
+        if (sx !== scrolledX[0]) scrolledX[1](sx);
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "aura-table__head", role: "row", "aria-rowindex": 1, style: rowStyle }, head),
+    body
+  ), loading ? /* @__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(
+    IconButton,
+    {
+      icon: "columns-3",
+      label: t.showHideColumns,
+      "aria-haspopup": "menu",
+      onClick: function(e) {
+        openMenu("picker", null, e.currentTarget);
+      }
+    }
+  )) : null, foot, menu ? /* @__PURE__ */ React.createElement(
+    Menu,
+    {
       anchor: menu.anchor,
       onClose: closeMenu,
       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);
 });
 export {
   DataTable