@jirawatpyk/aura-react 4.8.0 → 4.10.0

package/dist/esm/DataTable.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { useStrings } from "./locale.js";
+import { useStrings, useLinkComponent } from "./locale.js";
 import { cx, useMaybeControlled, compare, useIsoLayoutEffect, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
@@ -25,7 +25,11 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   });
   const rows = props.rows || [];
   const rowKey = props.rowKey || columns[0].key;
-  const loading = !!props.loading;
+  const manual = !!props.manual;
+  const Link = useLinkComponent(props.linkComponent);
+  const busy = !!props.loading;
+  const refreshing = busy && manual && rows.length > 0;
+  const loading = busy && !refreshing;
   const selectable = !!props.selectable;
   const reorderable = props.reorderable !== false && !!props.columnControls;
   const controls = !!props.columnControls;
@@ -157,7 +161,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   }
   const view = React.useMemo(
     function() {
-      if (!sort || !sort.key || !byKey[sort.key]) return rows;
+      if (manual || !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])];
@@ -173,7 +177,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
         return p[0];
       });
     },
-    [rows, sort && sort.key, sort && sort.dir]
+    [rows, manual, sort && sort.key, sort && sort.dir]
   );
   function nextSort(key) {
     if (!sort || sort.key !== key) return { key, dir: "asc" };
@@ -181,18 +185,51 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     return null;
   }
   const pageSize = props.pageSize || 0;
-  const pageCount = pageSize ? Math.max(1, Math.ceil(view.length / pageSize)) : 1;
+  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 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;
+  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 linkPaging = !!props.getPageHref && !props.onPageChange;
+  const prevLink = React.useRef(null), nextLink = React.useRef(null);
   function goPage(p, focus) {
     const next = Math.min(Math.max(1, p), pageCount);
     if (next === page) return false;
+    if (linkPaging) {
+      const a = next === page - 1 ? prevLink.current : next === page + 1 ? nextLink.current : null;
+      if (a) a.click();
+      return false;
+    }
     if (focus) pending.current = focus;
     pageState[1](next);
     if (scrollRef.current) scrollRef.current.scrollTop = 0;
     return true;
   }
+  function sortBy(key) {
+    setSort(nextSort(key));
+    if (!(manual && linkPaging)) goPage(1);
+  }
+  const rowHref = props.getRowHref;
+  function followRow(el, e) {
+    const a = el && el.querySelector(".aura-table__row-link");
+    if (!a) return;
+    a.dispatchEvent(
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+        ctrlKey: !!(e && e.ctrlKey),
+        metaKey: !!(e && e.metaKey),
+        shiftKey: !!(e && e.shiftKey),
+        altKey: !!(e && e.altKey)
+      })
+    );
+  }
+  function rowLinkWrap(r, content) {
+    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 bodyH = Math.max(ROW_H, height - ROW_H);
@@ -511,10 +548,10 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       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 && col && col.sortable && canSortAny) sortBy(col.key);
+      else if (r > 0 && k === " " && selectable) toggle(row[rowKey], !selSet[row[rowKey]]);
+      else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
+        followRow(target.closest('[role="row"]'), e);
       else if (r > 0 && k === "Enter" && target.querySelector("button, a[href], input, select, textarea"))
         target.querySelector("button, a[href], input, select, textarea").focus();
       else if (r > 0 && k === "Enter" && props.onRowActivate) props.onRowActivate(row);
@@ -557,7 +594,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   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 canSort = c.sortable && canSortAny;
     const ariaSort = isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0;
     const pin = isPinned(c), edge = pin && i === nPinned - 1;
     head.push(
@@ -573,12 +610,13 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
           "data-rc": "0:" + ci,
           className: cx(
             "aura-table__th",
+            c.align === "end" && "is-end",
             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,
+          draggable: reorderable && !busy ? true : void 0,
           onFocus: function(e) {
             if (e.target === e.currentTarget) activeState[1]({ r: 0, c: ci });
           },
@@ -616,8 +654,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
             tabIndex: -1,
             className: cx("aura-table__sort", isSorted && "is-active"),
             onClick: function() {
-              setSort(nextSort(c.key));
-              goPage(1);
+              sortBy(c.key);
               activeState[1]({ r: 0, c: ci });
             }
           },
@@ -670,6 +707,10 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       }
     )
   );
+  function cellContent(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;
+  }
   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 })];
@@ -716,6 +757,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
             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"
             ),
@@ -724,7 +766,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
               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
+          j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)
         )
       );
     });
@@ -753,13 +795,21 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
         );
       vis.forEach(function(c, j) {
         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(
+          /* @__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] }
-            }
-          ))
+              key: c.key,
+              className: cx("aura-table__td", c.align === "end" && "is-end", 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(
@@ -787,12 +837,17 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
               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"),
+              className: cx(
+                "aura-table__row",
+                isSel && "is-selected",
+                (props.onRowActivate || rowHref) && "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);
+                if (rowHref) followRow(e.currentTarget, e);
+                else if (props.onRowActivate) props.onRowActivate(r);
               }
             },
             rowCells(r, i, k, isSel)
@@ -804,31 +859,42 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       bodyRows.push(/* @__PURE__ */ React.createElement("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
   }
   let foot = null;
-  if (pageSize && (rows.length || loading)) {
-    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);
-        }
-      }
-    ), /* @__PURE__ */ React.createElement(
+  function pagerButton(dir) {
+    const p = page + dir, off = busy || (dir < 0 ? page <= 1 : page >= pageCount), label = dir < 0 ? t.prevPage : t.nextPage, icon = dir < 0 ? "chevron-left" : "chevron-right";
+    if (props.getPageHref && !off)
+      return /* @__PURE__ */ React.createElement(
+        Link,
+        {
+          ref: dir < 0 ? prevLink : nextLink,
+          href: props.getPageHref(p),
+          className: "aura-icon-btn",
+          "aria-label": label,
+          onClick: function(e) {
+            if (props.onPageChange) {
+              e.preventDefault();
+              pageState[1](p);
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(Icon, { name: icon })
+      );
+    return /* @__PURE__ */ React.createElement(
       IconButton,
       {
-        icon: "chevron-right",
-        label: t.nextPage,
-        disabled: loading || page >= pageCount,
+        icon,
+        label,
+        disabled: off,
         onClick: function() {
-          goPage(page + 1);
+          goPage(p);
         }
       }
-    )));
+    );
+  }
+  if (pageSize && (rows.length || busy)) {
+    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)));
   } else if (height && rows.length && !loading) {
-    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));
+    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));
   }
   if (stacked) {
     const titleCol = vis[0], pillCol = vis.filter(function(c) {
@@ -849,25 +915,28 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       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 = 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;
-      };
+      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 && "is-actionable"),
-            tabIndex: props.onRowActivate ? 0 : void 0,
+            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 (props.onRowActivate) props.onRowActivate(r);
+              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) props.onRowActivate(r);
+              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(
@@ -879,7 +948,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
                 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) {
+          ) : 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) {
@@ -892,12 +961,13 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       "div",
       {
         ref: wrapMerged,
-        className: cx("aura-table aura-table--stacked", props.className),
+        className: cx("aura-table aura-table--stacked", refreshing && "is-refreshing", props.className),
         role: "region",
         "aria-label": props.label,
-        "aria-busy": loading || void 0
+        "aria-busy": busy || void 0
       },
-      selectable && pageRows.length && !loading ? /* @__PURE__ */ React.createElement("div", { className: "aura-table__stack-bar" }, /* @__PURE__ */ React.createElement(
+      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,
         {
           checked: all,
@@ -915,52 +985,64 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     scrollPaddingTop: ROW_H + "px"
   };
   if (height) scrollStyle.height = height + "px";
-  return /* @__PURE__ */ React.createElement("div", { ref: wrapMerged, className: cx("aura-table", scrolledX[0] && "is-scrolled-x", props.className) }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
-      ref: function(el) {
-        scrollRef.current = el;
-        gridRef.current = el;
+      ref: wrapMerged,
+      className: cx("aura-table", scrolledX[0] && "is-scrolled-x", refreshing && "is-refreshing", props.className)
+    },
+    refreshing ? /* @__PURE__ */ React.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: function(el) {
+          scrollRef.current = el;
+          gridRef.current = el;
+        },
+        className: "aura-table__scroll",
+        style: scrollStyle,
+        role: "grid",
+        "aria-label": props.label,
+        "aria-busy": busy || void 0,
+        "aria-rowcount": loading ? -1 : shownTotal + 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);
+        }
       },
-      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
+    ),
+    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(
+      IconButton,
+      {
+        icon: "columns-3",
+        label: t.showHideColumns,
+        "aria-haspopup": "menu",
+        onClick: function(e) {
+          openMenu("picker", null, e.currentTarget);
+        }
       }
-    },
-    /* @__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, 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