@jirawatpyk/aura-react 5.14.0 → 5.16.0

package/dist/esm/AppShell.js

@@ -52,6 +52,11 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
       onNav(id);
       setOpen(false);
     },
+    /* 5.16: an action row (Sign out) closes the drawer too. */
+    onAction: function(id) {
+      setOpen(false);
+      if (navEl.props.onAction) navEl.props.onAction(id);
+    },
     className: cx(navEl.props.className, "is-in-drawer"),
     collapsed: false,
     collapsible: false

package/dist/esm/Breadcrumb.js

@@ -8,13 +8,83 @@ const Breadcrumb = React.forwardRef(function Breadcrumb2(props, ref) {
   const t = useStrings();
   const Link = useLinkComponent(props.linkComponent);
   const items = props.items || [];
-  return /* @__PURE__ */ React.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React.createElement("ol", null, items.map(function(it, i) {
+  const collapsible = !!props.collapseBelow && items.length > 2;
+  const trail = items.map(function(it) {
+    return it.label + "
" + (it.href || "");
+  }).join("");
+  const st = React.useState(null), expanded = st[0] === trail, setExpanded = function() {
+    st[1](trail);
+  };
+  const listRef = React.useRef(null);
+  const focusNext = React.useRef(false);
+  React.useEffect(
+    function() {
+      if (!expanded || !focusNext.current) return;
+      focusNext.current = false;
+      const ol = listRef.current;
+      if (!ol) return;
+      let target = ol.querySelector(".aura-crumbs__middle a, .aura-crumbs__middle button");
+      if (!target) {
+        target = ol.querySelector(".aura-crumbs__middle > *");
+        if (target) target.tabIndex = -1;
+      }
+      if (target) target.focus();
+    },
+    [expanded]
+  );
+  const sep = /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronRight, null), size: 12, className: "aura-crumbs__sep" });
+  const more = collapsible && !expanded ? /* @__PURE__ */ React.createElement("li", { key: "more", className: "aura-crumbs__more" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      "aria-label": t.breadcrumbMore,
+      onClick: function() {
+        focusNext.current = true;
+        setExpanded();
+      }
+    },
+    "\u2026"
+  ), sep) : null;
+  const out = [];
+  items.forEach(function(it, i) {
     const last = i === items.length - 1;
-    return /* @__PURE__ */ React.createElement("li", { key: i }, last ? /* @__PURE__ */ React.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React.createElement(Link, { href: it.href, onClick: it.onClick }, it.label) : it.onClick ? /* @__PURE__ */ React.createElement("button", { type: "button", onClick: it.onClick }, it.label) : (
-      /* 5.7: a segment with no page and no action is text, not a button that does nothing. */
-      /* @__PURE__ */ React.createElement("span", { className: "aura-crumbs__text" }, it.label)
-    ), last ? null : /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronRight, null), size: 12, className: "aura-crumbs__sep" }));
-  })));
+    const lp = it.linkProps || {};
+    const plain = lp;
+    const own = lp.onClick;
+    const click = own || it.onClick ? function(e) {
+      if (own) own(e);
+      if (it.onClick) it.onClick();
+    } : void 0;
+    out.push(
+      /* @__PURE__ */ React.createElement(
+        "li",
+        {
+          key: i,
+          ...it.itemProps,
+          className: cx(it.itemProps && it.itemProps.className, collapsible && !last && i > 0 && "aura-crumbs__middle") || void 0
+        },
+        last ? /* @__PURE__ */ React.createElement("span", { ...plain, "aria-current": "page", className: cx("aura-crumbs__current", lp.className) }, it.label) : it.href ? /* @__PURE__ */ React.createElement(Link, { ...lp, href: it.href, onClick: click }, it.label) : it.onClick ? /* @__PURE__ */ React.createElement("button", { ...lp, type: "button", onClick: click }, it.label) : (
+          /* 5.7: a segment with no page and no action is text, not a button that does nothing. */
+          /* @__PURE__ */ React.createElement("span", { ...plain, className: cx("aura-crumbs__text", lp.className) }, it.label)
+        ),
+        last ? null : sep
+      )
+    );
+    if (i === 0 && more) out.push(more);
+  });
+  return /* @__PURE__ */ React.createElement(
+    "nav",
+    {
+      ref,
+      "aria-label": props.label || t.breadcrumb,
+      className: cx(
+        "aura-crumbs",
+        collapsible && !expanded && "aura-crumbs--collapse-" + props.collapseBelow,
+        props.className
+      )
+    },
+    /* @__PURE__ */ React.createElement("ol", { ref: listRef }, out)
+  );
 });
 export {
   Breadcrumb

package/dist/esm/Button.js

@@ -18,7 +18,8 @@ function ButtonLink(props, ref, Link) {
     "linkComponent",
     "href",
     "fullWidth",
-    "size"
+    "size",
+    "touchHeight"
   ]);
   const Tag = disabled ? "a" : Link;
   return /* @__PURE__ */ React.createElement(
@@ -34,6 +35,7 @@ function ButtonLink(props, ref, Link) {
         variant,
         size: props.size,
         fullWidth: props.fullWidth,
+        touchHeight: props.touchHeight,
         className: props.className
       }),
       onClick: disabled ? void 0 : props.onClick
@@ -64,7 +66,8 @@ const Button = React.forwardRef(
       "loading",
       "onClick",
       "fullWidth",
-      "size"
+      "size",
+      "touchHeight"
     ]);
     return /* @__PURE__ */ React.createElement(
       "button",
@@ -76,6 +79,7 @@ const Button = React.forwardRef(
           variant,
           size: props.size,
           fullWidth: props.fullWidth,
+          touchHeight: props.touchHeight,
           loading,
           className: props.className
         }),

package/dist/esm/Checkbox.js

@@ -22,7 +22,8 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
     "description",
     "className",
     "tabIndex",
-    "disabled"
+    "disabled",
+    "hitArea"
   ]);
   const text = props.children;
   const labelled = text != null && text !== "";
@@ -32,10 +33,19 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
       "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;
+  const ha = props.hitArea;
+  const hit = !labelled && ha && ha !== "box" ? ha === "target" ? { x: 4, y: 4 } : ha : null;
   return /* @__PURE__ */ React.createElement(
     "label",
     {
-      className: cx("aura-check", labelled && "aura-check--labelled", props.disabled && "is-disabled", props.className),
+      className: cx(
+        "aura-check",
+        labelled && "aura-check--labelled",
+        hit && "has-hit",
+        props.disabled && "is-disabled",
+        props.className
+      ),
+      style: hit ? { "--aura-check-hit-x": hit.x + "px", "--aura-check-hit-y": hit.y + "px" } : void 0,
       onClick: function(e) {
         e.stopPropagation();
       }

package/dist/esm/Combobox.js

@@ -28,6 +28,13 @@ const Combobox = React.forwardRef(
     const density = useDensity();
     const auto = uid(), id = props.id || auto, listId = id + "-list";
     const options = (props.options || []).map(toOpt);
+    const groups = props.groups || [];
+    groups.forEach(function(g, gi) {
+      g.options.forEach(function(o) {
+        options.push(Object.assign({}, toOpt(o), { __g: gi }));
+      });
+    });
+    const custom = !multi && !!props.allowCustomValue;
     const st = useMaybeControlled(
       multi ? mp.value : props.value === void 0 ? void 0 : props.value == null ? [] : [props.value],
       multi ? mp.defaultValue || [] : props.defaultValue == null ? [] : [props.defaultValue],
@@ -67,7 +74,9 @@ const Combobox = React.forwardRef(
     });
     const more = shown.length > limit;
     shown = shown.slice(0, limit);
-    const activeIdx = Math.min(active, shown.length - 1);
+    const activeIdx = active < 0 ? query ? shown.findIndex(function(o) {
+      return !o.disabled && norm(o.label) === norm(query.trim());
+    }) : -1 : Math.min(active, shown.length - 1);
     function place() {
       if (!boxRef.current) return;
       const r = boxRef.current.getBoundingClientRect();
@@ -92,6 +101,7 @@ const Combobox = React.forwardRef(
         function outside(e) {
           if (boxRef.current && boxRef.current.contains(e.target)) return;
           if (listRef.current && listRef.current.contains(e.target)) return;
+          if (commitRef.current()) return;
           close(false);
         }
         function onScroll(e) {
@@ -128,6 +138,27 @@ const Combobox = React.forwardRef(
       setOpen(false);
       setQuery(null);
     }
+    const committed = React.useRef(false);
+    const commitRef = React.useRef(function() {
+      return false;
+    });
+    function commitTyped() {
+      if (!custom || query == null || committed.current) return false;
+      committed.current = true;
+      const q = query.trim();
+      if (!q) {
+        if (props.clearable !== false) setValue(null);
+      } else {
+        const hit = options.filter(function(o) {
+          return !o.disabled && norm(o.label) === norm(q);
+        })[0];
+        setValue(hit ? hit.value : q);
+      }
+      setQuery(null);
+      setOpen(false);
+      return true;
+    }
+    commitRef.current = commitTyped;
     function choose(o) {
       if (!o || o.disabled) return;
       if (multi) {
@@ -168,7 +199,7 @@ const Combobox = React.forwardRef(
         if (open && live[activeIdx]) {
           e.preventDefault();
           choose(live[activeIdx]);
-        }
+        } else if (commitTyped()) e.preventDefault();
       } else if (k === "Escape") {
         if (open) {
           e.preventDefault();
@@ -180,58 +211,95 @@ const Combobox = React.forwardRef(
       } else if (k === "Backspace" && multi && !props.readOnly && !text && values.length) {
         setValues(values.slice(0, -1));
       } else if (k === "Tab") {
+        if (custom && open && query != null && live[activeIdx]) {
+          choose(live[activeIdx]);
+          return;
+        }
+        if (commitTyped()) return;
         if (open) close();
       }
     }
-    const text = query != null ? query : selected ? selected.label : "";
+    const text = query != null ? query : selected ? selected.label : custom && value != null ? value : "";
     const summaryId = id + "-picked";
     const optId = function(i) {
       return id + "-opt-" + i;
     };
+    function renderOpt(o, i) {
+      const isSel = multi ? isPicked(o.value) : !!selected && o.value === selected.value;
+      const blocked = o.disabled || multi && full && !isSel;
+      return /* @__PURE__ */ React.createElement(
+        "li",
+        {
+          key: o.value,
+          id: optId(i),
+          role: "option",
+          "data-idx": i,
+          "aria-selected": isSel,
+          "aria-disabled": blocked || void 0,
+          className: cx(
+            "aura-combo__option",
+            i === activeIdx && "is-active",
+            isSel && "is-selected",
+            blocked && "is-disabled"
+          ),
+          onPointerDown: function(e) {
+            e.preventDefault();
+          },
+          onClick: function() {
+            if (!blocked || isSel) choose(o);
+          },
+          onPointerMove: function() {
+            if (activeIdx !== i) setActive(i);
+          }
+        },
+        o.icon ? /* @__PURE__ */ React.createElement(Icon, { name: o.icon }) : null,
+        /* @__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: /* @__PURE__ */ React.createElement(IconCheck, null), className: "aura-combo__check" }) : null
+      );
+    }
+    function grouped(list2) {
+      const out = [];
+      list2.forEach(function(o, i) {
+        const last = out[out.length - 1];
+        if (last && last.g === o.__g) last.items.push([o, i]);
+        else out.push({ g: o.__g, items: [[o, i]] });
+      });
+      return out;
+    }
     const list = open && mounted && posState[0] ? createPortal(
-      /* @__PURE__ */ React.createElement("div", { ref: listRef, "data-density": density, className: "aura-combo__popover", style: posState[0] }, live.length ? /* @__PURE__ */ React.createElement(
-        "ul",
+      /* @__PURE__ */ React.createElement(
+        "div",
         {
-          id: listId,
-          role: "listbox",
-          "aria-label": props.label,
-          "aria-multiselectable": multi || void 0,
-          className: "aura-combo__list"
+          ref: listRef,
+          "data-density": density,
+          className: "aura-combo__popover",
+          style: posState[0],
+          onPointerDown: function(e) {
+            e.preventDefault();
+          }
         },
-        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(
-            "li",
-            {
-              key: o.value,
-              id: optId(i),
-              role: "option",
-              "data-idx": i,
-              "aria-selected": isSel,
-              "aria-disabled": blocked || void 0,
-              className: cx(
-                "aura-combo__option",
-                i === activeIdx && "is-active",
-                isSel && "is-selected",
-                blocked && "is-disabled"
-              ),
-              onPointerDown: function(e) {
-                e.preventDefault();
-              },
-              onClick: function() {
-                if (!blocked || isSel) choose(o);
-              },
-              onPointerMove: function() {
-                if (activeIdx !== i) setActive(i);
-              }
-            },
-            o.icon ? /* @__PURE__ */ React.createElement(Icon, { name: o.icon }) : null,
-            /* @__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: /* @__PURE__ */ React.createElement(IconCheck, null), className: "aura-combo__check" }) : 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: /* @__PURE__ */ React.createElement(IconLoaderCircle, null), 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),
+        live.length ? /* @__PURE__ */ React.createElement(
+          "ul",
+          {
+            id: listId,
+            role: "listbox",
+            "aria-label": props.label,
+            "aria-multiselectable": multi || void 0,
+            className: "aura-combo__list"
+          },
+          grouped(live).map(function(seg) {
+            if (seg.g == null)
+              return /* @__PURE__ */ React.createElement(React.Fragment, { key: "u" + seg.items[0][1] }, seg.items.map(function(p) {
+                return renderOpt(p[0], p[1]);
+              }));
+            const gid = id + "-group-" + seg.g + "-" + seg.items[0][1];
+            return /* @__PURE__ */ React.createElement("li", { key: gid, role: "group", "aria-labelledby": gid, className: "aura-combo__group" }, /* @__PURE__ */ React.createElement("span", { id: gid, role: "presentation", className: "aura-combo__group-label" }, groups[seg.g].label), /* @__PURE__ */ React.createElement("ul", { role: "none", className: "aura-combo__grouplist" }, seg.items.map(function(p) {
+              return renderOpt(p[0], p[1]);
+            })));
+          })
+        ) : 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: /* @__PURE__ */ React.createElement(IconLoaderCircle, null), 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(options.length))) : null
+      ),
       document.body
     ) : null;
     return /* @__PURE__ */ React.createElement(
@@ -293,8 +361,9 @@ const Combobox = React.forwardRef(
           required: props.required && (!multi || !values.length),
           value: text,
           onChange: function(e) {
+            committed.current = false;
             setQuery(e.target.value);
-            setActive(0);
+            setActive(custom ? -1 : 0);
             if (!open) setOpen(true);
             if (props.onSearch) props.onSearch(e.target.value);
           },
@@ -303,6 +372,8 @@ const Combobox = React.forwardRef(
           onBlur: function() {
             setTimeout(function() {
               if (listRef.current && listRef.current.contains(document.activeElement)) return;
+              if (custom && document.activeElement === inputRef.current) return;
+              if (commitRef.current()) return;
               setOpen(false);
               setQuery(null);
             }, 0);

package/dist/esm/DataTable.js

@@ -67,7 +67,9 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     oneCallback ? null : props.onSortChange
   );
   const sort = sortState[0], setSort = sortState[1];
-  const selState = useMaybeControlled(props.selected, props.defaultSelected || [], props.onSelectionChange);
+  const selState = useMaybeControlled(props.selected, props.defaultSelected || [], null);
+  const onSel = React.useRef(props.onSelectionChange);
+  onSel.current = props.onSelectionChange;
   const canSelect = function(r) {
     return !!r && (!props.isRowSelectable || !!props.isRowSelectable(r));
   };
@@ -78,7 +80,11 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     });
   const selected = selState[0].filter(function(k) {
     return !rejected[String(k)];
-  }), setSelected = selState[1];
+  });
+  function setSelected(next, change) {
+    selState[1](next);
+    if (onSel.current) onSel.current(next, change || { key: null, shiftKey: false, source: "sync" });
+  }
   const droppedSig = selState[0].length === selected.length ? "" : "#" + selState[0].filter(function(k) {
     return rejected[String(k)];
   }).join("\0") + "#" + selected.join("\0");
@@ -566,11 +572,39 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     return selSet[String(k)];
   }).length;
   const all = nSel > 0 && nSel === pageKeys.length;
-  function toggle(k, on) {
+  const anchor = React.useRef(null);
+  const shiftClick = React.useRef(false);
+  function toggle(k, on, how) {
+    const same = function(x) {
+      return String(x) === String(k);
+    };
+    let range = null;
+    if (props.rangeSelect && how.shiftKey && anchor.current != null) {
+      const from = pageKeys.findIndex(function(x) {
+        return String(x) === String(anchor.current);
+      });
+      const to = pageKeys.findIndex(same);
+      if (from >= 0 && to >= 0) range = pageKeys.slice(Math.min(from, to), Math.max(from, to) + 1);
+    }
+    anchor.current = k;
+    const change = { key: k, shiftKey: how.shiftKey, source: how.source };
+    if (range) {
+      const inRange = {};
+      range.forEach(function(x) {
+        inRange[String(x)] = true;
+      });
+      const rest = selected.filter(function(x) {
+        return !inRange[String(x)];
+      });
+      change.range = range;
+      setSelected(on ? rest.concat(range) : rest, change);
+      return;
+    }
     setSelected(
       on ? selected.concat([k]) : selected.filter(function(x) {
-        return String(x) !== String(k);
-      })
+        return !same(x);
+      }),
+      change
     );
   }
   function toggleAll() {
@@ -583,7 +617,8 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         pageKeys.filter(function(k) {
           return !selSet[String(k)];
         })
-      )
+      ),
+      { key: null, shiftKey: false, source: "all" }
     );
   }
   function canResize(c) {
@@ -762,8 +797,8 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       };
     }).concat([{ separator: true }, { label: t.resetColumns, icon: /* @__PURE__ */ React.createElement(IconRotateCcw, null), onSelect: resetColumns }]);
   }
-  function openMenu(kind, key, anchor, rc) {
-    setMenu({ kind, key, anchor, rc });
+  function openMenu(kind, key, anchor2, rc) {
+    setMenu({ kind, key, anchor: anchor2, rc });
   }
   function closeMenu(restore) {
     const m = menu;
@@ -823,7 +858,8 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         if (pageKeys.length) toggleAll();
       } else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
       else if (r > 0 && k === " " && selectable) {
-        if (canSelect(row) && !(stacked && noCardSel)) toggle(row[rowKey], !selSet[row[rowKey]]);
+        if (canSelect(row) && !(stacked && noCardSel))
+          toggle(row[rowKey], !selSet[row[rowKey]], { shiftKey: e.shiftKey, source: "keyboard" });
       } 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"))
@@ -1013,6 +1049,9 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
             "aria-label": canSelect(r) ? selLabel : props.rowSelectDisabledLabel ? props.rowSelectDisabledLabel(r) : void 0,
             onFocus: function(e) {
               if (e.target === e.currentTarget) activeState[1]({ r: ri, c: 0 });
+            },
+            onClickCapture: function(e) {
+              shiftClick.current = e.shiftKey;
             }
           },
           canSelect(r) ? /* @__PURE__ */ React.createElement(
@@ -1023,7 +1062,9 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
               tabIndex: -1,
               label: selLabel,
               onChange: function(on) {
-                toggle(k, on);
+                const shift = shiftClick.current;
+                shiftClick.current = false;
+                toggle(k, on, { shiftKey: shift, source: "click" });
               }
             }
           ) : null

package/dist/esm/Dialog.js

@@ -2,26 +2,81 @@
 import * as React from "react";
 import { useStrings, useDensity } from "./locale.js";
 import { createPortal } from "react-dom";
-import { cx, omit, uid, useMergedRef } from "./internal.js";
+import { cx, devWarnOnce, omit, uid, useMaybeControlled, useMergedRef } from "./internal.js";
 import { IconButton } from "./IconButton.js";
 import { useModal } from "./useModal.js";
 import { IconX } from "./icons.js";
+const DialogClose = React.createContext(null);
+function useDialogClose() {
+  return React.useContext(DialogClose) || function() {
+  };
+}
 const Dialog = React.forwardRef(function Dialog2(props, ref) {
   const t = useStrings();
   const density = useDensity();
   const own = React.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
+  const openState = useMaybeControlled(props.open, false, null), open = openState[0];
+  if (props.open === void 0 && !props.trigger)
+    devWarnOnce("dialog-no-open", "Dialog has neither `open` nor `trigger`, so it can never open. Pass one of them.");
+  const trigId = uid();
+  function closeNow() {
+    if (props.open === void 0) openState[1](false);
+    if (props.onClose) props.onClose();
+  }
   function close() {
-    if (props.dismissible !== false && props.onClose) props.onClose();
+    if (props.dismissible === false) return;
+    closeNow();
   }
   const scrimCloses = props.dismissible !== false && (props.dismissOnScrim !== void 0 ? props.dismissOnScrim : props.role !== "alertdialog");
-  const modal = useModal(props.open, own, {
+  const modal = useModal(open, own, {
     autoFocus: props.autoFocus,
     onEscape: close,
     bodySelector: ".aura-dialog__body",
-    footSelector: ".aura-dialog__foot"
+    footSelector: ".aura-dialog__foot",
+    /* With a trigger, focus goes back to it even where a click doesn't focus buttons (Safari). */
+    finalFocus: props.trigger ? function() {
+      const ff = props.finalFocus;
+      const to = ff ? typeof ff === "function" ? ff() : ff.current : null;
+      return to || document.querySelector('[data-aura-trigger="' + trigId + '"]');
+    } : props.finalFocus,
+    onCloseComplete: props.onCloseComplete
   });
-  if (!modal.ready) return null;
-  return createPortal(
+  const trig = props.trigger;
+  const trigger = trig && React.isValidElement(trig) ? React.cloneElement(trig, {
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    "data-aura-trigger": trigId,
+    onClick: function(e) {
+      const own2 = trig.props.onClick;
+      if (own2) own2(e);
+      if (e.defaultPrevented) return;
+      if (props.open === void 0) openState[1](true);
+      if (props.onOpen) props.onOpen();
+    }
+  }) : null;
+  if (!modal.ready) return trigger;
+  const rest = omit(props, [
+    "open",
+    "onClose",
+    "title",
+    "description",
+    "children",
+    "footer",
+    "size",
+    "dismissible",
+    "dismissOnScrim",
+    "role",
+    "autoFocus",
+    "className",
+    "trigger",
+    "onOpen",
+    "finalFocus",
+    "onCloseComplete",
+    "aria-labelledby",
+    "aria-describedby",
+    "aria-modal"
+  ]);
+  const panel = createPortal(
     /* @__PURE__ */ React.createElement("div", { className: "aura-dialog-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -35,21 +90,22 @@ const Dialog = React.forwardRef(function Dialog2(props, ref) {
     ), /* @__PURE__ */ React.createElement(
       "div",
       {
+        ...rest,
         ref: merged,
         role: props.role || "dialog",
         "aria-modal": true,
         "aria-labelledby": titleId,
-        "aria-describedby": props.description ? descId : void 0,
+        "aria-describedby": cx(props.description ? descId : "", props["aria-describedby"]) || void 0,
         tabIndex: -1,
         className: cx("aura-dialog", "aura-dialog--" + (props.size || "md"), props.className)
       },
       /* @__PURE__ */ React.createElement("div", { className: "aura-dialog__head" }, /* @__PURE__ */ React.createElement("h2", { className: "aura-dialog__title", id: titleId }, props.title), props.dismissible !== false ? /* @__PURE__ */ React.createElement(IconButton, { icon: /* @__PURE__ */ React.createElement(IconX, null), label: t.close, className: "aura-dialog__close", onClick: close }) : null),
       props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-dialog__desc", id: descId }, props.description) : null,
-      props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-dialog__body" }, props.children) : null,
-      props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-dialog__foot" }, props.footer) : null
+      /* @__PURE__ */ React.createElement(DialogClose.Provider, { value: closeNow }, props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-dialog__body" }, props.children) : null, props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-dialog__foot" }, props.footer) : null)
     )),
     document.body
   );
+  return trigger ? /* @__PURE__ */ React.createElement(React.Fragment, null, trigger, panel) : panel;
 });
 const Drawer = React.forwardRef(function Drawer2(props, ref) {
   const t = useStrings();
@@ -62,7 +118,9 @@ const Drawer = React.forwardRef(function Drawer2(props, ref) {
     autoFocus: props.autoFocus,
     onEscape: close,
     bodySelector: ".aura-drawer__body",
-    footSelector: ".aura-drawer__foot"
+    footSelector: ".aura-drawer__foot",
+    finalFocus: props.finalFocus,
+    onCloseComplete: props.onCloseComplete
   });
   if (!modal.ready) return null;
   const side = props.side === "left" ? "left" : "right";
@@ -83,7 +141,9 @@ const Drawer = React.forwardRef(function Drawer2(props, ref) {
     "aria-labelledby",
     "className",
     "closeLabel",
-    "closeProps"
+    "closeProps",
+    "finalFocus",
+    "onCloseComplete"
   ]);
   const drawerScrimCloses = props.dismissible !== false && props.dismissOnScrim !== false;
   return createPortal(
@@ -132,5 +192,6 @@ const Drawer = React.forwardRef(function Drawer2(props, ref) {
 });
 export {
   Dialog,
-  Drawer
+  Drawer,
+  useDialogClose
 };