@jirawatpyk/aura-react 5.1.0 → 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, devWarnOnce, 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;
   });
@@ -29,7 +30,7 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
       "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 ? props.id + "-desc" : void 0;
+  const descId = props.description ? (props.id || auto) + "-desc" : void 0;
   return /* @__PURE__ */ React.createElement(
     "label",
     {

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)];
         })
       )
     );
@@ -1025,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) {
@@ -1076,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(
@@ -1110,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,
@@ -1158,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;

package/dist/esm/DatePicker.js

@@ -38,14 +38,37 @@ function useFormatDate() {
     [locale, calendar]
   );
 }
+function allowedDate(iso, o) {
+  const t = o.min === "today" || o.max === "today" ? o.today && fromISO(o.today) ? o.today : todayIn(o.timeZone) : "";
+  const lo = o.min === "today" ? t : o.min, hi = o.max === "today" ? t : o.max;
+  if (lo && fromISO(lo) && iso < lo) return false;
+  if (hi && fromISO(hi) && iso > hi) return false;
+  return !(o.isDateDisabled && o.isDateDisabled(iso));
+}
 const Calendar = React.forwardRef(function Calendar2(props, ref) {
   const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
   const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
-  const todayISO = (props.today && fromISO(props.today) ? props.today : null) || todayIn(props.timeZone || ctx.timeZone);
+  const given = props.today && fromISO(props.today) ? props.today : null, zone = props.timeZone || ctx.timeZone;
+  const todayISO = given || todayIn(zone);
   const today = fromISO(todayISO);
+  const mounted = useMounted(), gridKey = given || mounted ? "client" : "server";
   const min = fromISO(props.min === "today" ? todayISO : props.min), max = fromISO(props.max === "today" ? todayISO : props.max);
   const start = fromISO(props.start), end = fromISO(props.end);
-  const focusState = React.useState(fromISO(props.focus) || start || today);
+  function disabledAt(d) {
+    return !!(min && d < min || max && d > max || props.isDateDisabled && props.isDateDisabled(toISO(d)));
+  }
+  function select(iso) {
+    if (props.onSelect) props.onSelect(iso);
+  }
+  const focusState = React.useState(function() {
+    const d0 = fromISO(props.focus) || start || today;
+    if (!disabledAt(d0)) return d0;
+    for (let i = 1; i <= 366; i++) {
+      if (!disabledAt(addDays(d0, i))) return addDays(d0, i);
+      if (!disabledAt(addDays(d0, -i))) return addDays(d0, -i);
+    }
+    return d0;
+  });
   const focusDate = focusState[0], setFocus = focusState[1];
   const viewState = React.useState("days"), view = viewState[0], setView = viewState[1];
   const hoverState = React.useState(null);
@@ -53,7 +76,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
   const th = locale === "th";
   const dt = dateText(locale);
   function disabled(d) {
-    return !!(min && d < min || max && d > max || props.isDateDisabled && props.isDateDisabled(toISO(d)));
+    return disabledAt(d);
   }
   React.useEffect(function() {
     if (!moved.current) return;
@@ -61,11 +84,14 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
     const el = gridRef.current && gridRef.current.querySelector('[data-date="' + toISO(focusDate) + '"]');
     if (el) el.focus();
   });
-  React.useEffect(function() {
-    if (props.autoFocus === false) return;
-    const el = gridRef.current && gridRef.current.querySelector('[tabindex="0"]');
-    if (el) el.focus();
-  }, []);
+  React.useEffect(
+    function() {
+      if (props.autoFocus === false) return;
+      const el = gridRef.current && gridRef.current.querySelector('[tabindex="0"]');
+      if (el) el.focus();
+    },
+    [gridKey]
+  );
   function move(d) {
     moved.current = true;
     setFocus(d);
@@ -90,7 +116,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
     else if (k === "PageDown") n = addMonths(d, e.shiftKey ? 12 : 1);
     else if (k === "Enter" || k === " ") {
       e.preventDefault();
-      if (!disabled(d)) props.onSelect(toISO(d));
+      if (!disabled(d)) select(toISO(d));
       return;
     }
     if (n) {
@@ -113,7 +139,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
     const yr = focusDate.getFullYear(), base = yr - yr % 12;
     const years = [];
     for (let y = base; y < base + 12; y++) years.push(y);
-    return /* @__PURE__ */ React.createElement("div", { className: "aura-cal", ref: gridMerged }, /* @__PURE__ */ React.createElement("div", { className: "aura-cal__head" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: "aura-cal", ref: gridMerged, key: gridKey }, /* @__PURE__ */ React.createElement("div", { className: "aura-cal__head" }, /* @__PURE__ */ React.createElement(
       IconButton,
       {
         icon: "chevron-left",
@@ -160,7 +186,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
       );
     })));
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "aura-cal", ref: gridMerged }, /* @__PURE__ */ React.createElement("div", { className: "aura-cal__head" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "aura-cal", ref: gridMerged, key: gridKey }, /* @__PURE__ */ React.createElement("div", { className: "aura-cal__head" }, /* @__PURE__ */ React.createElement(
     IconButton,
     {
       icon: "chevron-left",
@@ -222,7 +248,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
               type: "button",
               "data-date": iso,
               tabIndex: same(d, focusDate) ? 0 : -1,
-              disabled: dis,
+              "aria-disabled": dis || void 0,
               "aria-label": fmt(tag, { weekday: "long", day: "numeric", month: "long", year: "numeric" }, d),
               suppressHydrationWarning: true,
               "aria-current": same(d, today) ? "date" : void 0,
@@ -235,7 +261,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
               ),
               onClick: function() {
                 setFocus(d);
-                props.onSelect(iso);
+                if (!dis) select(iso);
               },
               onKeyDown: function(e) {
                 onKey(e, d);
@@ -257,7 +283,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
       disabled: disabled(today),
       onClick: function() {
         move(today);
-        props.onSelect(toISO(today));
+        select(toISO(today));
       }
     },
     dt.today
@@ -391,13 +417,30 @@ const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
   );
   const boxRef = React.useRef(null), inputRef = React.useRef(null), inputMerged = useMergedRef(ref, inputRef);
   const pop = useCalendarPopover(boxRef);
+  const limits = {
+    min: props.min,
+    max: props.max,
+    today: props.today,
+    timeZone: props.timeZone || ctx.timeZone,
+    isDateDisabled: props.isDateDisabled
+  };
+  const bad = React.useState(null);
+  React.useEffect(
+    function() {
+      bad[1](null);
+    },
+    [st[0]]
+  );
   function commit(text) {
+    bad[1](null);
     if (!text.trim()) {
       st[1](null);
       return;
     }
     const iso = parseDate(text);
-    if (iso) st[1](iso);
+    if (!iso) return;
+    if (allowedDate(iso, limits)) st[1](iso);
+    else bad[1](dt.dateUnavailable);
   }
   function close() {
     pop.setOpen(false);
@@ -435,6 +478,7 @@ const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
           start: st[0],
           focus: st[0],
           onSelect: function(iso) {
+            bad[1](null);
             st[1](iso);
             close();
           }
@@ -450,7 +494,7 @@ const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
       dialogId,
       label: props.label,
       hint: props.hint,
-      error: props.error,
+      error: bad[0] || props.error,
       required: props.required,
       optional: props.optional,
       disabled: props.disabled,
@@ -464,6 +508,7 @@ const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
       hasValue: st[0] != null,
       clearable: props.clearable,
       onClear: function() {
+        bad[1](null);
         st[1](null);
         inputRef.current && inputRef.current.focus();
       },
@@ -490,20 +535,36 @@ const DateRangePicker = React.forwardRef(
     const draft = React.useState(null);
     const boxRef = React.useRef(null), inputRef = React.useRef(null), inputMerged = useMergedRef(ref, inputRef);
     const pop = useCalendarPopover(boxRef);
+    const limits = {
+      min: props.min,
+      max: props.max,
+      today: props.today,
+      timeZone: props.timeZone || ctx.timeZone,
+      isDateDisabled: props.isDateDisabled
+    };
     const o = { locale, calendar };
     function show(r) {
       if (!r.start) return "";
       if (!r.end) return formatDateBase(r.start, o) + " \u2013";
       return formatDateBase(r.start, o) + " \u2013 " + formatDateBase(r.end, o);
     }
+    const bad = React.useState(null);
+    React.useEffect(
+      function() {
+        bad[1](null);
+      },
+      [v.start, v.end]
+    );
     function commit(text) {
+      bad[1](null);
       const parts = String(text).split(/\s[–-]\s|\s*–\s*/);
       if (!text.trim()) {
         st[1]({ start: null, end: null });
         return;
       }
       const a = parseDate(parts[0]), b = parseDate(parts[1] || "");
-      if (a && b) st[1](a <= b ? { start: a, end: b } : { start: b, end: a });
+      if (a && b && !(allowedDate(a, limits) && allowedDate(b, limits))) bad[1](dt.dateUnavailable);
+      else if (a && b) st[1](a <= b ? { start: a, end: b } : { start: b, end: a });
     }
     function close() {
       pop.setOpen(false);
@@ -516,6 +577,7 @@ const DateRangePicker = React.forwardRef(
         return;
       }
       const a = draft[0], b = iso;
+      bad[1](null);
       st[1](a <= b ? { start: a, end: b } : { start: b, end: a });
       close();
     }
@@ -566,7 +628,7 @@ const DateRangePicker = React.forwardRef(
         dialogId,
         label: props.label,
         hint: props.hint,
-        error: props.error,
+        error: bad[0] || props.error,
         required: props.required,
         optional: props.optional,
         disabled: props.disabled,
@@ -580,6 +642,7 @@ const DateRangePicker = React.forwardRef(
         hasValue: v.start != null,
         clearable: props.clearable,
         onClear: function() {
+          bad[1](null);
           st[1]({ start: null, end: null });
           inputRef.current && inputRef.current.focus();
         },

package/dist/esm/DropdownMenu.js

@@ -6,6 +6,16 @@ const DropdownMenu = React.forwardRef(function DropdownMenu2(props, ref) {
   const st = React.useState(null), anchor = st[0], setAnchor = st[1];
   const wrap = React.useRef(null), wrapMerged = useMergedRef(ref, wrap);
   const child = React.Children.only(props.trigger);
+  const menuRef = React.useRef(null), toLast = React.useRef(false);
+  React.useEffect(
+    function() {
+      if (!anchor || !toLast.current || !menuRef.current) return;
+      toLast.current = false;
+      const list = menuRef.current.querySelectorAll('[role^="menuitem"]:not([disabled])');
+      if (list.length) list[list.length - 1].focus();
+    },
+    [anchor]
+  );
   function toggle(e) {
     if (child.props.onClick) child.props.onClick(e);
     const el = wrap.current && (wrap.current.querySelector('button, [role="button"], a') || wrap.current);
@@ -14,12 +24,14 @@ const DropdownMenu = React.forwardRef(function DropdownMenu2(props, ref) {
   function onKeyDown(e) {
     if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !anchor) {
       e.preventDefault();
+      toLast.current = e.key === "ArrowUp";
       setAnchor(wrap.current.querySelector('button, [role="button"], a') || wrap.current);
     }
   }
   return /* @__PURE__ */ React.createElement("span", { ref: wrapMerged, className: "aura-dropdown", onKeyDown }, React.cloneElement(child, { onClick: toggle, "aria-haspopup": "menu", "aria-expanded": anchor ? true : false }), anchor ? /* @__PURE__ */ React.createElement(
     Menu,
     {
+      ref: menuRef,
       anchor,
       label: props.label,
       items: props.items,