@jirawatpyk/aura-react 5.0.1 → 5.1.1

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, 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;
   });
@@ -15,14 +16,21 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
     "onChange",
     "indeterminate",
     "label",
+    "hideLabel",
     "children",
     "description",
     "className",
     "tabIndex",
     "disabled"
   ]);
-  const labelled = props.children != null;
-  const descId = props.description && props.id ? props.id + "-desc" : void 0;
+  const text = props.children;
+  const labelled = text != null && text !== "";
+  if (!labelled && props.label && !props.hideLabel)
+    devWarnOnce(
+      "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 || auto) + "-desc" : void 0;
   return /* @__PURE__ */ React.createElement(
     "label",
     {
@@ -49,7 +57,8 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
       }
     ),
     /* @__PURE__ */ React.createElement("span", { className: "aura-check__box", "aria-hidden": true }, props.indeterminate ? /* @__PURE__ */ React.createElement(Icon, { name: "minus", size: 12, strokeWidth: 3 }) : on ? /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null),
-    labelled ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-check__label" }, props.children), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__desc", id: descId }, props.description) : null) : null
+    !labelled && props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only", id: descId }, props.description) : null,
+    labelled ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-check__label" }, text), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__desc", id: descId }, props.description) : null) : null
   );
 });
 export {

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;
@@ -265,6 +265,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     if (isPinned(c)) s["--aura-cell-left"] = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + "px)";
     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 +284,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 +302,23 @@ 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 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 +329,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 +366,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);
@@ -376,6 +397,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;
@@ -405,26 +431,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)];
         })
       )
     );
@@ -695,6 +723,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
         nRows ? /* @__PURE__ */ React.createElement(
           Checkbox,
           {
+            hideLabel: true,
             checked: all,
             indeterminate: nSel > 0 && !all,
             tabIndex: -1,
@@ -848,6 +877,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
           /* @__PURE__ */ React.createElement(
             Checkbox,
             {
+              hideLabel: true,
               checked: isSel,
               tabIndex: -1,
               label: t.selectRow(k),
@@ -1023,7 +1053,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       }
     );
   }
-  if (pageSize && (rows.length || busy)) {
+  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)));
   } else if (height && rows.length && !loading) {
@@ -1074,7 +1104,8 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   ) : null;
   const scrollStyle = {
     scrollPaddingLeft: "calc(var(--aura-space-6)" + selW + " + " + acc + "px)",
-    scrollPaddingTop: ROW_H + "px"
+    scrollPaddingTop: ROW_H + "px",
+    scrollPaddingBottom: stickyTotal ? ROW_H + "px" : void 0
   };
   if (height) scrollStyle["--aura-table-h"] = height + "px";
   const gridEl = /* @__PURE__ */ React.createElement(
@@ -1108,7 +1139,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,
@@ -1156,7 +1187,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;