@jirawatpyk/aura-react 5.1.0 → 5.2.0

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
@@ -268,16 +294,16 @@ function useCalendarPopover(boxRef) {
   const pos = React.useState(null), popRef = React.useRef(null), mounted = useMounted();
   function place() {
     if (!boxRef.current) return;
-    const r = boxRef.current.getBoundingClientRect(), H = 380;
-    const up = window.innerHeight - r.bottom < H && r.top > H;
-    const left = Math.max(8, Math.min(r.left, window.innerWidth - 320 - 8));
+    const el = popRef.current, r = boxRef.current.getBoundingClientRect(), W = el ? el.offsetWidth : 320, H = el ? el.offsetHeight : 380;
+    const up = window.innerHeight - r.bottom < H + 12 && r.top > H + 12;
+    const left = Math.max(8, Math.min(r.left, window.innerWidth - W - 8));
     pos[1](up ? { left, bottom: window.innerHeight - r.top + 4 } : { left, top: r.bottom + 4 });
   }
   useIsoLayoutEffect(
     function() {
       if (open) place();
     },
-    [open]
+    [open, !!pos[0]]
   );
   React.useEffect(
     function() {
@@ -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,

package/dist/esm/FileUpload.js

@@ -46,7 +46,23 @@ const FileUpload = React.forwardRef(function FileUpload2(props, ref) {
       });
     };
   }, []);
+  React.useEffect(
+    function() {
+      const el = inputRef.current;
+      if (!el || !props.name || typeof DataTransfer === "undefined") return;
+      try {
+        const dt = new DataTransfer();
+        items.forEach(function(i) {
+          if (i.file && !i.error) dt.items.add(i.file);
+        });
+        el.files = dt.files;
+      } catch (e) {
+      }
+    },
+    [items, props.name]
+  );
   function thumb(it) {
+    if (!it.file && it.url && /^image\//.test(it.type || "")) return it.url;
     if (!it.file || !/^image\//.test(it.type || "") || typeof URL === "undefined" || !URL.createObjectURL) return null;
     if (!urls.current[it.id]) urls.current[it.id] = URL.createObjectURL(it.file);
     return urls.current[it.id];
@@ -152,7 +168,7 @@ const FileUpload = React.forwardRef(function FileUpload2(props, ref) {
     ),
     items.length ? /* @__PURE__ */ React.createElement("ul", { className: "aura-upload__list", "aria-live": "polite" }, items.map(function(it) {
       const src = thumb(it);
-      return /* @__PURE__ */ React.createElement("li", { key: it.id, className: cx("aura-upload__item", it.error && "is-error") }, src ? /* @__PURE__ */ React.createElement("img", { className: "aura-upload__thumb", src, alt: "" }) : /* @__PURE__ */ React.createElement("span", { className: "aura-upload__thumb is-icon", "aria-hidden": true }, /* @__PURE__ */ React.createElement(Icon, { name: /^image\//.test(it.type || "") ? "image" : "file", size: "md" })), /* @__PURE__ */ React.createElement("span", { className: "aura-upload__meta" }, /* @__PURE__ */ React.createElement("span", { className: "aura-upload__name" }, it.name), /* @__PURE__ */ React.createElement("span", { className: "aura-upload__sub" }, it.error ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Icon, { name: "circle-alert", size: 12 }), it.error) : it.status === "uploading" ? t.uploading + (it.progress != null ? " " + Math.round(it.progress) + "%" : "") : it.status === "done" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Icon, { name: "circle-check", size: 12 }), formatBytes(it.size)) : formatBytes(it.size)), it.status === "uploading" ? /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React.createElement("li", { key: it.id, className: cx("aura-upload__item", it.error && "is-error") }, src ? /* @__PURE__ */ React.createElement("img", { className: "aura-upload__thumb", src, alt: "" }) : /* @__PURE__ */ React.createElement("span", { className: "aura-upload__thumb is-icon", "aria-hidden": true }, /* @__PURE__ */ React.createElement(Icon, { name: /^image\//.test(it.type || "") ? "image" : "file", size: "md" })), /* @__PURE__ */ React.createElement("span", { className: "aura-upload__meta" }, it.url && !it.error ? /* @__PURE__ */ React.createElement("a", { className: "aura-upload__name", href: it.url, target: "_blank", rel: "noreferrer" }, it.name) : /* @__PURE__ */ React.createElement("span", { className: "aura-upload__name" }, it.name), /* @__PURE__ */ React.createElement("span", { className: "aura-upload__sub" }, it.error ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Icon, { name: "circle-alert", size: 12 }), it.error) : it.status === "uploading" ? t.uploading + (it.progress != null ? " " + Math.round(it.progress) + "%" : "") : it.status === "done" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Icon, { name: "circle-check", size: 12 }), formatBytes(it.size)) : formatBytes(it.size)), it.status === "uploading" ? /* @__PURE__ */ React.createElement(
         "span",
         {
           className: "aura-upload__bar",

package/dist/esm/FormErrorSummary.js

@@ -6,15 +6,30 @@ import { useStrings } from "./locale.js";
 function items(errors) {
   if (Array.isArray(errors)) return errors;
   const out = [];
-  for (const k in errors || {}) {
-    const e = errors[k];
-    if (e && e.message) out.push({ field: k, message: e.message });
+  function walk(e, path, depth) {
+    if (!e || typeof e !== "object" || depth > 8) return;
+    const o = e;
+    if (o.message) out.push({ field: path, message: o.message });
+    for (const k in o) {
+      if (k === "ref" || k === "type" || k === "types" || k === "message") continue;
+      walk(o[k], path ? path + "." + k : k, depth + 1);
+    }
   }
+  walk(errors, "", 0);
   return out;
 }
 function fieldElement(field) {
   if (typeof document === "undefined") return null;
-  return document.getElementById(field) || document.querySelector('[name="' + field.replace(/"/g, '\\"') + '"]');
+  const byId = document.getElementById(field);
+  if (byId) return byId;
+  const named = document.querySelector('[name="' + field.replace(/"/g, '\\"') + '"]');
+  if (named && named.getAttribute("type") === "hidden") {
+    const box = named.closest(".aura-field") || named.parentElement;
+    return box && box.querySelector(
+      'input:not([type="hidden"]), [role="combobox"], select, textarea, button:not([tabindex="-1"])'
+    ) || named;
+  }
+  return named;
 }
 const FormErrorSummary = React.forwardRef(
   function FormErrorSummary2(props, ref) {

package/dist/esm/Menu.js

@@ -15,11 +15,17 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
     function() {
       const a = props.anchor, m = own.current;
       if (!a || !m) return;
-      const r = a.getBoundingClientRect(), mh = m.offsetHeight, mw = m.offsetWidth;
-      let top = r.bottom + 4;
-      if (top + mh > window.innerHeight - 8 && r.top - mh - 4 > 8) top = r.top - mh - 4;
+      const r = a.getBoundingClientRect(), mh = m.scrollHeight, mw = m.offsetWidth, below = window.innerHeight - r.bottom - 12, above = r.top - 12;
+      let top = r.bottom + 4, maxHeight;
+      if (mh > below) {
+        if (mh <= above) top = r.top - mh - 4;
+        else if (above > below) {
+          maxHeight = above;
+          top = r.top - above - 4;
+        } else maxHeight = below;
+      }
       const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
-      setPos({ top, left });
+      setPos({ top, left, maxHeight });
     },
     [props.anchor, mounted]
   );
@@ -63,6 +69,9 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
     } else if (e.key === "End") {
       e.preventDefault();
       list[list.length - 1].focus();
+    } else if (e.key === " " && document.activeElement && document.activeElement.tagName === "A") {
+      e.preventDefault();
+      document.activeElement.click();
     } else if (e.key === "Escape") {
       e.preventDefault();
       props.onClose(true);
@@ -103,9 +112,9 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
           tabIndex: -1,
           role: "menuitem",
           className: cls,
-          onClick: function() {
+          onClick: function(e) {
             if (it.onSelect) it.onSelect();
-            props.onClose(false);
+            props.onClose(e.detail === 0);
           }
         },
         body
@@ -136,7 +145,11 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
       "aria-label": props.label,
       className: "aura-menu",
       onKeyDown,
-      style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
+      style: {
+        top: pos ? pos.top : -9999,
+        left: pos ? pos.left : -9999,
+        maxHeight: pos && pos.maxHeight ? pos.maxHeight : void 0
+      }
     },
     groupItems(items).map(function(block, bi) {
       const rendered = block.items.map(function(x) {

package/dist/esm/NumberField.js

@@ -10,7 +10,9 @@ function decimalsOf(n) {
   return i < 0 ? 0 : s.length - i - 1;
 }
 function parse(text) {
-  const s = text.replace(/[,\s ]/g, "");
+  let t = text.trim();
+  if (t.indexOf(".") < 0 && /^-?\d+,\d+$/.test(t.replace(/[\s ]/g, "")) && !/,\d{3}$/.test(t)) t = t.replace(",", ".");
+  const s = t.replace(/[,\s ]/g, "");
   if (!/^-?(\d+\.?\d*|\.\d+)$/.test(s)) return NaN;
   return Number(s);
 }

package/dist/esm/Pagination.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
-import { cx, useMaybeControlled } from "./internal.js";
+import { cx, plainClick, useMaybeControlled } from "./internal.js";
 import { useLinkComponent, useStrings } from "./locale.js";
 function pageList(page, count, sib) {
   let out = [], lo = Math.max(2, page - sib), hi = Math.min(count - 1, page + sib);
@@ -47,7 +47,7 @@ const Pagination = React.forwardRef(function Pagination2(props, ref) {
       {
         href: link(p),
         onClick: function(e) {
-          if (props.onChange) {
+          if (props.onChange && plainClick(e)) {
             e.preventDefault();
             go(p);
           }
@@ -89,7 +89,7 @@ const Pagination = React.forwardRef(function Pagination2(props, ref) {
         "aria-label": label,
         title: label,
         onClick: function(e) {
-          if (props.onChange) {
+          if (props.onChange && plainClick(e)) {
             e.preventDefault();
             go(p);
           }

package/dist/esm/Popover.js

@@ -14,13 +14,20 @@ import {
 import { useDensity, useStrings } from "./locale.js";
 import { createPortal } from "react-dom";
 function position(anchor, pop, placement) {
-  const r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.offsetHeight, vw = window.innerWidth, vh = window.innerHeight, gap = 6;
+  const r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.scrollHeight, vw = window.innerWidth, vh = window.innerHeight, gap = 6;
   let side = (placement || "bottom-start").split("-")[0], align = (placement || "bottom-start").split("-")[1] || "start";
   if (side === "bottom" && r.bottom + gap + ph > vh - 8 && r.top - gap - ph > 8) side = "top";
   else if (side === "top" && r.top - gap - ph < 8 && r.bottom + gap + ph < vh - 8) side = "bottom";
-  const top = side === "top" ? r.top - gap - ph : r.bottom + gap;
+  const below = vh - r.bottom - gap - 8, above = r.top - gap - 8;
+  let maxHeight;
+  if (ph > below && ph > above) {
+    side = above > below ? "top" : "bottom";
+    maxHeight = Math.max(120, side === "top" ? above : below);
+  }
+  const h = maxHeight ? Math.min(ph, maxHeight) : ph;
+  const top = side === "top" ? r.top - gap - h : r.bottom + gap;
   const left = align === "end" ? r.right - pw : align === "center" ? r.left + r.width / 2 - pw / 2 : r.left;
-  return { top: Math.max(8, top), left: Math.max(8, Math.min(left, vw - pw - 8)), side };
+  return { top: Math.max(8, top), left: Math.max(8, Math.min(left, vw - pw - 8)), side, maxHeight };
 }
 const Popover = React.forwardRef(function Popover2(props, ref) {
   const t = useStrings();
@@ -30,6 +37,7 @@ const Popover = React.forwardRef(function Popover2(props, ref) {
   const open = !!st[0];
   const wrap = React.useRef(null), pop = React.useRef(null), popMerged = useMergedRef(ref, pop);
   const pos = React.useState(null), mounted = useMounted();
+  const inTree = React.useRef(false);
   function trigger() {
     return wrap.current && (wrap.current.querySelector('button, [role="button"], a, input') || wrap.current.firstElementChild);
   }
@@ -63,13 +71,19 @@ const Popover = React.forwardRef(function Popover2(props, ref) {
         const f = pop.current.querySelector("[data-autofocus]") || pop.current.querySelector(FOCUSABLE);
         (f || pop.current).focus();
       }
+      let timer;
       function outside(e) {
         if (pop.current && pop.current.contains(e.target)) return;
         if (wrap.current && wrap.current.contains(e.target)) return;
-        close(false);
+        inTree.current = false;
+        clearTimeout(timer);
+        timer = setTimeout(function() {
+          if (!inTree.current) close(false);
+        }, 0);
       }
       document.addEventListener("pointerdown", outside, true);
       return function() {
+        clearTimeout(timer);
         document.removeEventListener("pointerdown", outside, true);
       };
     },
@@ -88,9 +102,16 @@ const Popover = React.forwardRef(function Popover2(props, ref) {
         "aria-label": props.title ? void 0 : props.label,
         "aria-labelledby": props.title ? id + "-title" : void 0,
         tabIndex: -1,
+        onPointerDownCapture: function() {
+          inTree.current = true;
+        },
         className: cx("aura-popover", pos[0] && "is-" + pos[0].side, props.className),
         style: Object.assign(
-          { top: pos[0] ? pos[0].top : -9999, left: pos[0] ? pos[0].left : -9999 },
+          {
+            top: pos[0] ? pos[0].top : -9999,
+            left: pos[0] ? pos[0].left : -9999,
+            maxHeight: pos[0] && pos[0].maxHeight ? pos[0].maxHeight : void 0
+          },
           props.width ? { width: props.width } : null
         ),
         onKeyDown: function(e) {

package/dist/esm/RadioGroup.js

@@ -11,10 +11,22 @@ const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
     props.onChange
   );
   const name = props.name || id;
+  const setRef = React.useCallback(
+    function(el) {
+      if (el)
+        el.focus = function(opts) {
+          const r = el.querySelector('input[type="radio"]:checked') || el.querySelector('input[type="radio"]:not(:disabled)');
+          if (r) r.focus(opts);
+        };
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref]
+  );
   return /* @__PURE__ */ React.createElement(
     "fieldset",
     {
-      ref,
+      ref: setRef,
       className: cx("aura-field aura-radio-group", props.error && "is-invalid", props.className),
       "aria-describedby": describedBy(id, props),
       "aria-invalid": props.error ? true : void 0,
@@ -31,6 +43,7 @@ const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
           name,
           value: v.value,
           disabled: v.disabled,
+          required: props.required || void 0,
           checked: st[0] === v.value,
           onChange: function() {
             st[1](v.value);

package/dist/esm/SideNav.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
-import { cx, uid, useMaybeControlled } from "./internal.js";
+import { cx, plainClick, uid, useMaybeControlled } from "./internal.js";
 import { useLinkComponent, useStrings } from "./locale.js";
 function contains(it, id) {
   return !!id && !!it.children && it.children.some(function(c) {
@@ -154,6 +154,7 @@ const SideNav = React.forwardRef(function SideNav2(props, ref) {
       style: depth ? { ["--aura-nav-depth"]: depth } : void 0,
       onClick: function(e) {
         if (!it.href) e.preventDefault();
+        else if (!plainClick(e)) return;
         st[1](it.id);
       }
     };

package/dist/esm/Switch.js

@@ -34,7 +34,7 @@ const Switch = React.forwardRef(function Switch2(props, ref) {
       },
       /* @__PURE__ */ React.createElement("span", { className: "aura-switch__thumb" })
     ),
-    props.label ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : null
+    props.label ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only", id: id + "-desc" }, props.description) : null
   );
 });
 export {

package/dist/esm/Table.js

@@ -26,8 +26,9 @@ const Table = React.forwardRef(function Table2(props, ref) {
       className: "aura-tbl-wrap",
       "data-density": density,
       tabIndex: scrolls ? 0 : void 0,
-      role: scrolls ? "region" : void 0,
-      "aria-labelledby": scrolls && caption != null ? capId : void 0
+      role: scrolls && (caption != null || rest["aria-label"]) ? "region" : void 0,
+      "aria-labelledby": scrolls && caption != null ? capId : void 0,
+      "aria-label": scrolls && caption == null ? rest["aria-label"] : void 0
     },
     /* @__PURE__ */ React.createElement("table", { ref, className: cx("aura-tbl", className), ...rest }, caption != null ? /* @__PURE__ */ React.createElement("caption", { id: capId, className: cx("aura-tbl__caption", captionHidden && "aura-sr-only") }, caption) : null, children)
   );

package/dist/esm/Tabs.js

@@ -5,19 +5,23 @@ import { cx, uid, useMaybeControlled } from "./internal.js";
 import { useLinkComponent } from "./locale.js";
 const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const items = props.tabs || [], base = uid();
+  const asLinks = items.length > 0 && items.every(function(t) {
+    return !!t.href;
+  });
+  const firstOn = items.filter(function(t) {
+    return !t.disabled;
+  })[0];
   const st = useMaybeControlled(
     props.value,
-    props.defaultValue || items[0] && items[0].id,
+    props.defaultValue || (asLinks ? void 0 : firstOn && firstOn.id),
     props.onChange
   );
+  const cur = asLinks && "value" in props ? props.value : st[0];
   const refs = React.useRef({});
   const current = items.filter(function(t) {
-    return t.id === st[0];
-  })[0] || items[0];
+    return t.id === cur;
+  })[0] || firstOn || items[0];
   const Link = useLinkComponent(props.linkComponent);
-  const asLinks = items.length > 0 && items.every(function(t) {
-    return !!t.href;
-  });
   if (asLinks)
     return /* @__PURE__ */ React.createElement(
       "nav",
@@ -27,7 +31,7 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
         className: cx("aura-tabs aura-tabs--links", props.className)
       },
       /* @__PURE__ */ React.createElement("div", { className: "aura-tabs__list" }, items.map(function(t) {
-        const on = t.id === st[0];
+        const on = t.id === cur;
         const inner = [
           t.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: t.icon }) : null,
           t.label,

package/dist/esm/TextField.js

@@ -28,8 +28,8 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
         className: "aura-input__control",
         placeholder: props.placeholder,
         required: props.required,
-        "aria-invalid": props.error ? true : void 0,
-        "aria-describedby": describedBy(id, props)
+        "aria-invalid": props.error ? true : rest["aria-invalid"],
+        "aria-describedby": [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0
       }
     ), props.suffix ? /* @__PURE__ */ React.createElement("span", { className: "aura-input__suffix" }, props.suffix) : null)
   );