@jirawatpyk/aura-react 5.5.0 → 5.7.0

package/dist/esm/DataTable.js

@@ -52,7 +52,27 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   );
   const sort = sortState[0], setSort = sortState[1];
   const selState = useMaybeControlled(props.selected, props.defaultSelected || [], props.onSelectionChange);
-  const selected = selState[0], setSelected = selState[1];
+  const canSelect = function(r) {
+    return !!r && (!props.isRowSelectable || !!props.isRowSelectable(r));
+  };
+  const rejected = {};
+  if (props.isRowSelectable)
+    rows.forEach(function(r) {
+      if (!canSelect(r)) rejected[String(r[rowKey])] = true;
+    });
+  const selected = selState[0].filter(function(k) {
+    return !rejected[String(k)];
+  }), setSelected = selState[1];
+  const droppedSig = selState[0].length === selected.length ? "" : "#" + selState[0].filter(function(k) {
+    return rejected[String(k)];
+  }).join("\0") + "#" + selected.join("\0");
+  React.useEffect(
+    function() {
+      if (droppedSig !== "") setSelected(selected);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [droppedSig]
+  );
   const pageState = useMaybeControlled(
     props.page,
     props.defaultPage || 1,
@@ -463,7 +483,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       el.focus();
     }
   }
-  const pageKeys = pageRows.map(function(r) {
+  const pageKeys = pageRows.filter(canSelect).map(function(r) {
     return r[rowKey];
   });
   const selSet = {};
@@ -727,10 +747,12 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       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 && 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"))
+      if (r === 0 && !col && selectable && nRows) {
+        if (pageKeys.length) toggleAll();
+      } else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
+      else if (r > 0 && k === " " && selectable) {
+        if (canSelect(row)) 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();
@@ -759,7 +781,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
             activeState[1]({ r: 0, c: 0 });
           }
         },
-        nRows ? /* @__PURE__ */ React.createElement(
+        pageKeys.length ? /* @__PURE__ */ React.createElement(
           Checkbox,
           {
             hideLabel: true,
@@ -770,7 +792,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
             onChange: toggleAll
           }
         ) : null,
-        nRows ? /* @__PURE__ */ React.createElement("span", { className: "aura-table__sel-text" }, nSel ? t.selectedCount(nSel) : t.selectAll) : /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, t.selectRows)
+        pageKeys.length ? /* @__PURE__ */ React.createElement("span", { className: "aura-table__sel-text" }, nSel ? t.selectedCount(nSel) : t.selectAll) : /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, t.selectRows)
       )
     );
   vis.forEach(function(c, i) {
@@ -908,12 +930,12 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
             className: cx("aura-table__sel", nPinned && "is-pinned"),
             tabIndex: tabFor(ri, 0),
             "data-rc": ri + ":0",
-            "aria-label": t.selectRow(k),
+            "aria-label": canSelect(r) ? t.selectRow(k) : props.rowSelectDisabledLabel ? props.rowSelectDisabledLabel(r) : void 0,
             onFocus: function(e) {
               if (e.target === e.currentTarget) activeState[1]({ r: ri, c: 0 });
             }
           },
-          /* @__PURE__ */ React.createElement(
+          canSelect(r) ? /* @__PURE__ */ React.createElement(
             Checkbox,
             {
               hideLabel: true,
@@ -924,7 +946,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
                 toggle(k, on);
               }
             }
-          )
+          ) : null
         )
       );
     vis.forEach(function(c, j) {
@@ -1027,7 +1049,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
               key: k,
               role: "row",
               "aria-rowindex": first + i + 2,
-              "aria-selected": selectable ? isSel : void 0,
+              "aria-selected": selectable && canSelect(r) ? isSel : void 0,
               className: cx(
                 "aura-table__row",
                 isSel && "is-selected",

package/dist/esm/Dialog.js

@@ -12,6 +12,7 @@ const Dialog = React.forwardRef(function Dialog2(props, ref) {
   function close() {
     if (props.dismissible !== false && props.onClose) props.onClose();
   }
+  const scrimCloses = props.dismissible !== false && (props.dismissOnScrim !== void 0 ? props.dismissOnScrim : props.role !== "alertdialog");
   const modal = useModal(props.open, own, {
     autoFocus: props.autoFocus,
     onEscape: close,
@@ -20,7 +21,17 @@ const Dialog = React.forwardRef(function Dialog2(props, ref) {
   });
   if (!modal.ready) return null;
   return createPortal(
-    /* @__PURE__ */ React.createElement("div", { className: "aura-dialog-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: "aura-dialog-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "aura-scrim",
+        onClick: scrimCloses ? close : void 0,
+        onMouseDown: scrimCloses ? void 0 : function(e) {
+          e.preventDefault();
+        },
+        "aria-hidden": true
+      }
+    ), /* @__PURE__ */ React.createElement(
       "div",
       {
         ref: merged,
@@ -54,8 +65,19 @@ const Drawer = React.forwardRef(function Drawer2(props, ref) {
   });
   if (!modal.ready) return null;
   const side = props.side === "left" ? "left" : "right";
+  const drawerScrimCloses = props.dismissible !== false && props.dismissOnScrim !== false;
   return createPortal(
-    /* @__PURE__ */ React.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "aura-scrim",
+        onClick: drawerScrimCloses ? close : void 0,
+        onMouseDown: !drawerScrimCloses ? function(e) {
+          e.preventDefault();
+        } : void 0,
+        "aria-hidden": true
+      }
+    ), /* @__PURE__ */ React.createElement(
       "div",
       {
         ref: merged,

package/dist/esm/DropdownMenu.js

@@ -36,6 +36,7 @@ const DropdownMenu = React.forwardRef(function DropdownMenu2(props, ref) {
       label: props.label,
       items: props.items,
       linkComponent: props.linkComponent,
+      header: props.header,
       onClose: function(restore) {
         setAnchor(null);
         if (restore && typeof anchor.focus === "function") anchor.focus();

package/dist/esm/Menu.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { createPortal } from "react-dom";
-import { cx, useIsoLayoutEffect, useMounted, useMergedRef } from "./internal.js";
+import { cx, uid, useIsoLayoutEffect, useMounted, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
 import { useLinkComponent } from "./locale.js";
 const Menu = React.forwardRef(function Menu2(props, ref) {
@@ -10,6 +10,8 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
   const pos = posState[0], setPos = posState[1];
   const items = props.items || [];
   const mounted = useMounted();
+  const headerId = uid();
+  const hasHeader = props.header != null && props.header !== false && props.header !== "";
   const Link = useLinkComponent(props.linkComponent);
   useIsoLayoutEffect(
     function() {
@@ -27,7 +29,20 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
       const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
       setPos({ top, left, maxHeight });
     },
-    [props.anchor, mounted]
+    [props.anchor, mounted, hasHeader]
+  );
+  const hadHeader = React.useRef(hasHeader);
+  React.useEffect(
+    function() {
+      if (hadHeader.current === hasHeader) return;
+      hadHeader.current = hasHeader;
+      const a = document.activeElement;
+      if (own.current && (!a || a === document.body)) {
+        const first = own.current.querySelector('[role^="menuitem"]:not([disabled])');
+        if (first) first.focus();
+      }
+    },
+    [hasHeader]
   );
   React.useEffect(
     function() {
@@ -53,22 +68,22 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
     [mounted]
   );
   function onKeyDown(e) {
-    const list = Array.prototype.slice.call(
+    const list2 = Array.prototype.slice.call(
       own.current.querySelectorAll('[role^="menuitem"]:not([disabled])')
     );
-    const i = list.indexOf(document.activeElement);
+    const i = list2.indexOf(document.activeElement);
     if (e.key === "ArrowDown") {
       e.preventDefault();
-      list[(i + 1) % list.length].focus();
+      list2[(i + 1) % list2.length].focus();
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      list[(i - 1 + list.length) % list.length].focus();
+      list2[(i - 1 + list2.length) % list2.length].focus();
     } else if (e.key === "Home") {
       e.preventDefault();
-      list[0].focus();
+      list2[0].focus();
     } else if (e.key === "End") {
       e.preventDefault();
-      list[list.length - 1].focus();
+      list2[list2.length - 1].focus();
     } else if (e.key === " " && document.activeElement && document.activeElement.tagName === "A") {
       e.preventDefault();
       document.activeElement.click();
@@ -80,9 +95,9 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
     }
     e.stopPropagation();
   }
-  function groupItems(list) {
+  function groupItems(list2) {
     const out = [];
-    list.forEach(function(it, i) {
+    list2.forEach(function(it, i) {
       const g = it.type === "radio" && it.group ? it.group : null;
       const last = out[out.length - 1];
       if (last && last.group === g && g !== null) last.items.push({ it, i });
@@ -137,27 +152,28 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
       body
     );
   }
-  const el = /* @__PURE__ */ React.createElement(
+  const style = {
+    top: pos ? pos.top : -9999,
+    left: pos ? pos.left : -9999,
+    maxHeight: pos && pos.maxHeight ? pos.maxHeight : void 0
+  };
+  const list = groupItems(items).map(function(block, bi) {
+    const rendered = block.items.map(function(x) {
+      return renderItem(x.it, x.i);
+    });
+    return block.group ? /* @__PURE__ */ React.createElement("div", { key: "g" + bi, role: "group", "aria-label": block.group, className: "aura-menu__group" }, rendered) : /* @__PURE__ */ React.createElement(React.Fragment, { key: "f" + bi }, rendered);
+  });
+  const el = hasHeader ? /* @__PURE__ */ React.createElement("div", { ref: merged, className: "aura-menu has-header", onKeyDown, style }, /* @__PURE__ */ React.createElement(
     "div",
     {
-      ref: merged,
-      role: "menu",
-      "aria-label": props.label,
-      className: "aura-menu",
-      onKeyDown,
-      style: {
-        top: pos ? pos.top : -9999,
-        left: pos ? pos.left : -9999,
-        maxHeight: pos && pos.maxHeight ? pos.maxHeight : void 0
+      className: "aura-menu__header",
+      id: headerId,
+      onMouseDown: function(e) {
+        e.preventDefault();
       }
     },
-    groupItems(items).map(function(block, bi) {
-      const rendered = block.items.map(function(x) {
-        return renderItem(x.it, x.i);
-      });
-      return block.group ? /* @__PURE__ */ React.createElement("div", { key: "g" + bi, role: "group", "aria-label": block.group, className: "aura-menu__group" }, rendered) : /* @__PURE__ */ React.createElement(React.Fragment, { key: "f" + bi }, rendered);
-    })
-  );
+    props.header
+  ), /* @__PURE__ */ React.createElement("div", { role: "menu", "aria-label": props.label, "aria-describedby": headerId, className: "aura-menu__list" }, list)) : /* @__PURE__ */ React.createElement("div", { ref: merged, role: "menu", "aria-label": props.label, className: "aura-menu", onKeyDown, style }, list);
   return mounted ? createPortal(el, document.body) : null;
 });
 export {

package/dist/esm/Toaster.js

@@ -3,8 +3,8 @@ import * as React from "react";
 import { ALERT_ICON } from "./Alert.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
-import { cx, useMounted } from "./internal.js";
-import { useStrings } from "./locale.js";
+import { cx, plainClick, useIsoLayoutEffect, useMounted } from "./internal.js";
+import { useLinkComponent, useStrings } from "./locale.js";
 import { createPortal } from "react-dom";
 const MAX_VISIBLE = 3;
 const toastState = {
@@ -73,10 +73,35 @@ toast.dismiss = function(id) {
   promote();
   emitToasts();
 };
+const hotkeyOrigin = /* @__PURE__ */ new WeakMap();
+function outsideToaster(el) {
+  return el && el !== document.body && !el.closest(".aura-toaster") ? el : null;
+}
 function ToastItem(props) {
   const str = useStrings();
+  const Link = useLinkComponent();
+  const node = React.useRef(null);
+  const origin = React.useRef(null);
+  useIsoLayoutEffect(function() {
+    origin.current = outsideToaster(document.activeElement);
+    const el = node.current;
+    return function() {
+      if (!el || !el.contains(document.activeElement)) return;
+      const back = [hotkeyOrigin.get(el), origin.current].filter(function(b) {
+        return !!b && b.isConnected;
+      })[0];
+      hotkeyOrigin.delete(el);
+      setTimeout(function() {
+        if (back && back.isConnected && (!document.activeElement || document.activeElement === document.body))
+          back.focus();
+      }, 0);
+    };
+  }, []);
   const t = props.toast, timer = React.useRef(null), left = React.useRef(t.duration || 5e3), since = React.useRef(0);
-  const hover = React.useRef(false);
+  const hover = React.useRef(false), focused = React.useRef(false);
+  function syncFocus() {
+    if (focused.current && !(node.current && node.current.contains(document.activeElement))) focused.current = false;
+  }
   function start() {
     if (left.current === Infinity || timer.current) return;
     since.current = Date.now();
@@ -85,11 +110,10 @@ function ToastItem(props) {
     }, left.current);
   }
   function resume() {
-    hover.current = false;
-    start();
+    syncFocus();
+    if (!hover.current && !focused.current) start();
   }
   function pause() {
-    hover.current = true;
     if (timer.current) {
       clearTimeout(timer.current);
       timer.current = null;
@@ -101,23 +125,56 @@ function ToastItem(props) {
       if (timer.current) clearTimeout(timer.current);
       timer.current = null;
       left.current = t.duration || 5e3;
-      if (!hover.current) start();
+      syncFocus();
+      if (!hover.current && !focused.current) start();
       return function() {
         if (timer.current) clearTimeout(timer.current);
       };
     },
     [t.rev]
   );
+  const rich = t.description != null && typeof t.description !== "boolean" && t.description !== "";
+  const actions = (t.actions && t.actions.length ? t.actions : t.action ? [t.action] : []).slice(0, 2);
+  function run(a) {
+    if (a.onClick) a.onClick();
+    if (a.dismiss !== false) toast.dismiss(t.id);
+  }
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: cx("aura-toast", "aura-toast--" + t.tone, t.loading && "is-loading"),
+      ref: node,
+      onKeyDown: function(e) {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          toast.dismiss(t.id);
+        }
+      },
+      className: cx(
+        "aura-toast",
+        "aura-toast--" + t.tone,
+        t.loading && "is-loading",
+        /* Two actions, or one beside a description, go on their own row under the text so it keeps its width. */
+        (actions.length > 1 || actions.length && rich) && "has-action-row"
+      ),
       role: t.tone === "danger" ? "alert" : "status",
       "aria-busy": t.loading || void 0,
-      onMouseEnter: pause,
-      onMouseLeave: resume,
-      onFocus: pause,
-      onBlur: resume
+      onMouseEnter: function() {
+        hover.current = true;
+        pause();
+      },
+      onMouseLeave: function() {
+        hover.current = false;
+        resume();
+      },
+      onFocus: function() {
+        focused.current = true;
+        pause();
+      },
+      onBlur: function(e) {
+        if (node.current && e.relatedTarget && node.current.contains(e.relatedTarget)) return;
+        focused.current = false;
+        resume();
+      }
     },
     /* @__PURE__ */ React.createElement(
       Icon,
@@ -126,19 +183,33 @@ function ToastItem(props) {
         className: cx("aura-toast__icon", t.loading && "aura-spin")
       }
     ),
-    /* @__PURE__ */ React.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React.createElement("p", { className: "aura-toast__title" }, t.title), t.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-toast__text" }, t.description) : null),
-    t.action ? /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        className: "aura-toast__action",
-        onClick: function() {
-          t.action.onClick && t.action.onClick();
-          toast.dismiss(t.id);
-        }
-      },
-      t.action.label
-    ) : null,
+    /* @__PURE__ */ React.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React.createElement("p", { className: "aura-toast__title" }, t.title), rich ? /* @__PURE__ */ React.createElement("div", { className: "aura-toast__text" }, t.description) : null),
+    actions.length ? /* @__PURE__ */ React.createElement("div", { className: "aura-toast__actions" }, actions.map(function(a, i) {
+      return a.href ? /* @__PURE__ */ React.createElement(
+        Link,
+        {
+          key: i,
+          href: a.href,
+          className: "aura-toast__action",
+          onClick: function(e) {
+            if (plainClick(e)) run(a);
+            else if (a.onClick) a.onClick();
+          }
+        },
+        a.label
+      ) : /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: i,
+          type: "button",
+          className: "aura-toast__action",
+          onClick: function() {
+            run(a);
+          }
+        },
+        a.label
+      );
+    })) : null,
     /* @__PURE__ */ React.createElement(
       IconButton,
       {
@@ -152,7 +223,22 @@ function ToastItem(props) {
     )
   );
 }
-function Toaster(props) {
+function hotkeyMatcher(spec) {
+  const parts = spec.split("+").map(function(p) {
+    return p.trim().toLowerCase();
+  });
+  const key = parts[parts.length - 1] || "";
+  const code = /^[a-z]$/.test(key) ? "Key" + key.toUpperCase() : /^[0-9]$/.test(key) ? "Digit" + key : null;
+  const want = function(m) {
+    return parts.indexOf(m) >= 0 && parts.indexOf(m) < parts.length - 1;
+  };
+  return function(e) {
+    if (e.altKey !== want("alt") || e.ctrlKey !== want("ctrl") || e.shiftKey !== want("shift") || e.metaKey !== (want("meta") || want("cmd")))
+      return false;
+    return code ? e.code === code : e.key.toLowerCase() === key;
+  };
+}
+function Toaster(props = {}) {
   const t = useStrings();
   const mounted = useMounted();
   const s = React.useState(toastState.list);
@@ -165,15 +251,49 @@ function Toaster(props) {
       });
     };
   }, []);
+  const region = React.useRef(null);
+  const hotkey = props.hotkey === void 0 ? "Alt+T" : props.hotkey;
+  React.useEffect(
+    function() {
+      if (!hotkey) return;
+      const match = hotkeyMatcher(hotkey);
+      function onKey(e) {
+        if (!e.key || e.repeat || e.isComposing || !match(e) || !region.current) return;
+        const el = e.target;
+        const editable = !!el && (el.isContentEditable || /^(INPUT|TEXTAREA)$/.test(el.tagName || ""));
+        const mac = /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent || "");
+        if (editable && mac && e.altKey && !e.ctrlKey && !e.metaKey && e.key.length === 1) return;
+        const items = region.current.querySelectorAll(".aura-toast");
+        const last = items[items.length - 1];
+        if (!last) return;
+        const target = last.querySelector(".aura-toast__action") || last.querySelector("button");
+        if (!target) return;
+        e.preventDefault();
+        const from = outsideToaster(document.activeElement);
+        if (from) hotkeyOrigin.set(last, from);
+        target.focus();
+      }
+      document.addEventListener("keydown", onKey);
+      return function() {
+        document.removeEventListener("keydown", onKey);
+      };
+    },
+    [hotkey]
+  );
   if (!mounted) return null;
+  const pos = props.position || "bottom";
+  const offset = props.offset;
   return createPortal(
     /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: cx("aura-toaster", props && props.position === "top" && "is-top"),
+        ref: region,
+        className: cx("aura-toaster", pos.indexOf("top") === 0 && "is-top", /center$/.test(pos) && "is-center"),
+        style: offset != null ? { "--aura-toaster-offset": typeof offset === "number" ? offset + "px" : offset } : void 0,
         role: "region",
         "aria-live": "polite",
-        "aria-label": t.notifications
+        "aria-label": hotkey ? t.notifications + " (" + hotkey + ")" : t.notifications,
+        "aria-keyshortcuts": hotkey || void 0
       },
       s[0].map(function(t2) {
         return /* @__PURE__ */ React.createElement(ToastItem, { key: t2.id, toast: t2 });

package/dist/index.d.cts

@@ -124,6 +124,11 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onSortChange?: ((sort: DataTableSort | null) => void) | undefined;
 	/** Adds a checkbox column. */
 	selectable?: boolean | undefined;
+	/** Which rows can be selected (5.6). A row it rejects shows no checkbox (the cell stays, so columns line up), is
+	 * skipped by select-all, Space and the count, and never appears in `onSelectionChange` — even if passed in. */
+	isRowSelectable?: RowCallback<boolean, Row> | undefined;
+	/** Accessible name for a rejected row's empty cell, e.g. `(r) => 'Not awaiting review'` (5.6). */
+	rowSelectDisabledLabel?: RowCallback<string, Row> | undefined;
 	/** Controlled selection (row keys); pair with onSelectionChange. */
 	selected?: Array<string | number> | undefined;
 	/** Initial selection when uncontrolled. */
@@ -305,6 +310,9 @@ export interface MenuProps {
 	autoFocus?: boolean | undefined;
 	/** Router link for items with `href`; defaults to AuraProvider's `linkComponent`, then `<a>`. (4.19) */
 	linkComponent?: React$1.ElementType | undefined;
+	/** Content above the items (5.7), e.g. who is signed in. Not an item: arrow keys skip it; it is the menu's
+	 * accessible description, read once when the menu opens. */
+	header?: React$1.ReactNode | undefined;
 }
 export interface FieldProps {
 	/** Visible label; also the accessible name. */
@@ -487,14 +495,23 @@ export interface AlertProps {
 	onDismiss?: (() => void) | undefined;
 	className?: string | undefined;
 }
+/** A button (or, with `href`, a link through AuraProvider's `linkComponent`) on a toast (5.6: `href`, `dismiss`). */
+export interface ToastAction {
+	label: string;
+	onClick?: (() => void) | undefined;
+	/** Makes the action a link (routes through `linkComponent`, so `next/link` navigates client-side). */
+	href?: string | undefined;
+	/** Default true: the toast closes when the action runs. `false` keeps it (a list of items to work through). */
+	dismiss?: boolean | undefined;
+}
 export interface ToastOptions {
 	title: string;
-	description?: string | undefined;
+	/** Text, or (5.6) rich content — lines with their own links, read once inside the toast's live region. */
+	description?: React$1.ReactNode | undefined;
 	tone?: FeedbackTone | undefined;
-	action?: {
-		label: string;
-		onClick?: (() => void) | undefined;
-	} | undefined;
+	action?: ToastAction | undefined;
+	/** Up to two actions in a row (5.6); used instead of `action` when given. */
+	actions?: ToastAction[] | undefined;
 	/** ms before it closes itself. Default 5000; Infinity keeps it until dismissed. */
 	duration?: number | undefined;
 	/** Reuse an id to replace a toast in place (same position, timer restarts) — never a second toast. */
@@ -533,6 +550,9 @@ export interface DialogProps {
 	size?: "sm" | "md" | "lg" | undefined;
 	/** Default true. False hides the close button and ignores Escape and scrim clicks. */
 	dismissible?: boolean | undefined;
+	/** Whether a click on the scrim closes it (5.7). Default true, false for `role="alertdialog"`: a stray click
+	 * outside shouldn't throw away a typed reason. Escape and the close button still close it. */
+	dismissOnScrim?: boolean | undefined;
 	/** Use `alertdialog` for destructive confirmations. */
 	role?: "dialog" | "alertdialog" | undefined;
 	/** Default true. Turn off only for static demos. */
@@ -624,6 +644,7 @@ export interface SideNavProps {
 }
 export interface BreadcrumbProps {
 	/** Root first; the last item is the current page. */
+	/** An item with neither `href` nor `onClick` is plain text (5.7), for a segment with no page of its own. */
 	items: Array<{
 		label: string;
 		href?: string | undefined;
@@ -651,6 +672,9 @@ export interface DropdownMenuProps {
 	label?: string | undefined;
 	/** Router link for items with `href`. (4.19) */
 	linkComponent?: React$1.ElementType | undefined;
+	/** Content above the items (5.7), e.g. name, email and role in an account menu. Not an item: arrow keys skip
+	 * it; it is the menu's accessible description (`aria-describedby`). */
+	header?: React$1.ReactNode | undefined;
 }
 export interface ComboboxOption {
 	value: string;
@@ -851,6 +875,8 @@ export interface DrawerProps {
 	footer?: React$1.ReactNode | undefined;
 	/** Scrim click and Escape close it. Default true. */
 	dismissible?: boolean | undefined;
+	/** Whether a click on the scrim closes it (5.7). Default true; Escape and the close button still close it. */
+	dismissOnScrim?: boolean | undefined;
 	/** Default true: focus moves to the element with `data-autofocus`, else the first control in the body. False only for static demos. */
 	autoFocus?: boolean | undefined;
 	/** Needed when there is no title. */
@@ -891,7 +917,8 @@ export interface AppShellProps {
 	children?: React$1.ReactNode | undefined;
 	navLabel?: string | undefined;
 	menuLabel?: string | undefined;
-	/** id of `<main>`, for a skip link. Default `main`. */
+	/** id of `<main>`, for a skip link. Default `main`. `<main>` has `tabIndex={-1}` (5.7), so a skip link or
+	 * `document.getElementById(mainId).focus()` moves focus there (no ring is drawn on it). */
 	mainId?: string | undefined;
 	/** A BottomNav for phones (4.19). Shown below its `hideFrom` breakpoint; the content keeps room for it, and a
 	 * viewport ActionBar sits on top of it. With a `bottomNav` and no `nav`, there is no menu button. */
@@ -965,6 +992,9 @@ export interface BottomNavItem {
 	badge?: boolean | undefined;
 	/** Read after the label when `badge` is set, e.g. "new". */
 	badgeLabel?: string | undefined;
+	/** The full name for screen readers when `label` is shortened to fit (5.7), e.g. label "Konto", ariaLabel
+	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3). The count or badge is still appended. */
+	ariaLabel?: string | undefined;
 }
 export interface BottomNavProps {
 	/** 2–5 items. */
@@ -1285,10 +1315,18 @@ export declare namespace toast {
 	var dismiss: (id: string) => void;
 }
 export interface ToasterProps {
-	/** Default `bottom`. */
-	position?: "bottom" | "top" | undefined;
-}
-export declare function Toaster(props: ToasterProps): React$1.ReactElement | null;
+	/** Default `bottom` (bottom right). `top` is top right; `top-center` / `bottom-center` centre the stack (5.6).
+	 * Below 640px toasts span the width either way. */
+	position?: "bottom" | "bottom-right" | "bottom-center" | "top" | "top-right" | "top-center" | undefined;
+	/** Distance from the top or bottom edge (5.6), e.g. `64` to clear a 56px top bar; px or any CSS length. Sets
+	 * `--aura-toaster-offset`; the safe-area inset is added on top. Default 24px (16px below 640px). */
+	offset?: number | string | undefined;
+	/** Keyboard shortcut to the newest toast (5.6): focuses its action, else its close button, and pauses its timer;
+	 * Escape closes it and returns focus. Default `"Alt+T"` (matched on the physical key, so macOS Option+T works);
+	 * `false` turns it off. */
+	hotkey?: string | false | undefined;
+}
+export declare function Toaster(props?: ToasterProps): React$1.ReactElement | null;
 export declare const PasswordField: React$1.ForwardRefExoticComponent<PasswordFieldProps & React$1.RefAttributes<HTMLInputElement>>;
 export declare const FormErrorSummary: React$1.ForwardRefExoticComponent<FormErrorSummaryProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const FilterBar: React$1.ForwardRefExoticComponent<FilterBarProps & React$1.RefAttributes<HTMLDivElement>>;