@jirawatpyk/aura-react 5.28.0 → 5.30.0

package/dist/cjs/index.cjs

@@ -140,6 +140,9 @@ function omit(src, keys) {
       out[k] = src[k];
   return out;
 }
+function touchClass(t) {
+  return t === "always" ? "is-touch-always" : !!t && "is-touch";
+}
 var TONES = ["neutral", "accent", "success", "warning", "danger"];
 function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
@@ -1346,6 +1349,39 @@ var IconButton = React7.forwardRef(function IconButton2(props, ref) {
 var React8 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 var ITEMS = '[role^="menuitem"]';
+function makesBlock(s) {
+  return s.transform !== "none" || s.translate !== "none" || s.rotate !== "none" || s.scale !== "none" || s.filter !== "none" || s.backdropFilter !== "none" || s.perspective !== "none" || s.contentVisibility === "auto" || /paint|layout|strict|content/.test(s.contain) || /transform|translate|rotate|scale|filter|perspective/.test(s.willChange);
+}
+function inView(el) {
+  if (!el.isConnected) return false;
+  const r = el.getBoundingClientRect();
+  if (r.width === 0 && r.height === 0) return false;
+  let top = r.top, bottom = r.bottom, left = r.left, right = r.right;
+  let pos = getComputedStyle(el).position;
+  for (let p = el.parentElement; p && p !== document.body && p !== document.documentElement; p = p.parentElement) {
+    const s = getComputedStyle(p);
+    const block = makesBlock(s);
+    if (pos === "fixed" && !block) continue;
+    if (pos === "absolute" && s.position === "static" && !block) continue;
+    if (s.display !== "contents") {
+      const b = p.getBoundingClientRect();
+      if (s.overflowX !== "visible") {
+        left = Math.max(left, b.left);
+        right = Math.min(right, b.right);
+      }
+      if (s.overflowY !== "visible") {
+        top = Math.max(top, b.top);
+        bottom = Math.min(bottom, b.bottom);
+      }
+    }
+    pos = s.position === "fixed" || s.position === "absolute" ? s.position : "static";
+  }
+  top = Math.max(top, 0);
+  left = Math.max(left, 0);
+  bottom = Math.min(bottom, window.innerHeight);
+  right = Math.min(right, window.innerWidth);
+  return bottom > top && right > left;
+}
 var Menu = React8.forwardRef(function Menu2(props, ref) {
   const own = React8.useRef(null), merged = useMergedRef(ref, own);
   const posState = React8.useState(null);
@@ -1355,21 +1391,30 @@ var Menu = React8.forwardRef(function Menu2(props, ref) {
   const headerId = uid(), itemId = uid();
   const hasHeader = props.header != null && props.header !== false && props.header !== "";
   const Link = useLinkComponent(props.linkComponent);
+  function place() {
+    const a = props.anchor, m = own.current;
+    if (!a || !m) return;
+    const r = a.getBoundingClientRect(), mh = m.scrollHeight, mw = m.offsetWidth, below2 = window.innerHeight - r.bottom - 12, above = r.top - 12;
+    let top = r.bottom + 4, maxHeight;
+    if (mh > below2) {
+      if (mh <= above) top = r.top - mh - 4;
+      else if (above > below2) {
+        maxHeight = above;
+        top = r.top - above - 4;
+      } else maxHeight = below2;
+    }
+    const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
+    setPos(function(p) {
+      return p && p.top === top && p.left === left && p.maxHeight === maxHeight ? p : { top, left, maxHeight };
+    });
+  }
+  const placeRef = React8.useRef(place);
+  placeRef.current = place;
+  const live = React8.useRef({ anchor: props.anchor, onClose: props.onClose });
+  live.current = { anchor: props.anchor, onClose: props.onClose };
   useIsoLayoutEffect(
     function() {
-      const a = props.anchor, m = own.current;
-      if (!a || !m) return;
-      const r = a.getBoundingClientRect(), mh = m.scrollHeight, mw = m.offsetWidth, below2 = window.innerHeight - r.bottom - 12, above = r.top - 12;
-      let top = r.bottom + 4, maxHeight;
-      if (mh > below2) {
-        if (mh <= above) top = r.top - mh - 4;
-        else if (above > below2) {
-          maxHeight = above;
-          top = r.top - above - 4;
-        } else maxHeight = below2;
-      }
-      const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
-      setPos({ top, left, maxHeight });
+      place();
     },
     [props.anchor, mounted, hasHeader]
   );
@@ -1399,7 +1444,12 @@ var Menu = React8.forwardRef(function Menu2(props, ref) {
           props.onClose(false);
       }
       function onScroll(e) {
-        if (own.current && !own.current.contains(e.target)) props.onClose(false);
+        if (own.current && e.target instanceof Node && own.current.contains(e.target)) return;
+        const a = live.current.anchor;
+        if (a && !inView(a)) {
+          live.current.onClose(false);
+          if (a instanceof HTMLElement && a.closest('[aria-modal="true"]')) a.focus({ preventScroll: true });
+        } else placeRef.current();
       }
       document.addEventListener("pointerdown", outside, true);
       window.addEventListener("scroll", onScroll, true);
@@ -1609,7 +1659,8 @@ var Checkbox = React10.forwardRef(function Checkbox2(props, ref) {
     "className",
     "tabIndex",
     "disabled",
-    "hitArea"
+    "hitArea",
+    "touchHeight"
   ]);
   const text2 = props.children;
   const labelled = text2 != null && text2 !== "";
@@ -1628,6 +1679,7 @@ var Checkbox = React10.forwardRef(function Checkbox2(props, ref) {
       className: cx(
         "aura-check",
         labelled && "aura-check--labelled",
+        labelled && touchClass(props.touchHeight),
         hit && "has-hit",
         props.disabled && "is-disabled",
         props.className
@@ -1703,7 +1755,8 @@ var FIELD_KEYS = [
   "id",
   "suffix",
   "options",
-  "placeholder"
+  "placeholder",
+  "touchHeight"
 ];
 
 // src/TextField.tsx
@@ -1721,7 +1774,7 @@ var TextField = React13.forwardRef(function TextField2(props, ref) {
       required: props.required,
       optional: props.optional,
       disabled: props.disabled,
-      className: props.className
+      className: cx(touchClass(props.touchHeight), props.className)
     },
     /* @__PURE__ */ React13.createElement("div", { className: cx("aura-input", props.icon && "has-icon", props.suffix && "has-suffix") }, props.icon ? /* @__PURE__ */ React13.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, /* @__PURE__ */ React13.createElement(
       "input",
@@ -1755,7 +1808,7 @@ var Textarea = React14.forwardRef(function Textarea2(props, ref) {
       required: props.required,
       optional: props.optional,
       disabled: props.disabled,
-      className: props.className
+      className: cx(touchClass(props.touchHeight), props.className)
     },
     /* @__PURE__ */ React14.createElement(
       "textarea",
@@ -2189,7 +2242,7 @@ var Select = React15.forwardRef(function Select2(props, ref) {
       required: props.required,
       optional: props.optional,
       disabled: props.disabled,
-      className: props.className
+      className: cx(touchClass(props.touchHeight), props.className)
     },
     child
   );
@@ -3421,7 +3474,12 @@ var RadioGroup = React19.forwardRef(function RadioGroup2(props, ref) {
     "fieldset",
     {
       ref: setRef,
-      className: cx("aura-field aura-radio-group", props.error && "is-invalid", props.className),
+      className: cx(
+        "aura-field aura-radio-group",
+        props.error && "is-invalid",
+        touchClass(props.touchHeight),
+        props.className
+      ),
       "aria-describedby": describedBy(id, props),
       "aria-invalid": props.error ? true : void 0,
       disabled: props.disabled
@@ -4589,7 +4647,7 @@ var Tag = React27.forwardRef(function Tag2(props, ref) {
         "aria-label": props.removeLabel || t.remove(name),
         onClick: props.onRemove
       },
-      /* @__PURE__ */ React27.createElement(Icon, { name: /* @__PURE__ */ React27.createElement(IconX, null), size: 12 })
+      /* @__PURE__ */ React27.createElement(Icon, { name: /* @__PURE__ */ React27.createElement(IconX, null), size: 14 })
     );
     return /* @__PURE__ */ React27.createElement(Tooltip, { content: fullText, open: fullText ? void 0 : false }, btn);
   }() : null);
@@ -5390,6 +5448,28 @@ var DataTableImpl = React32.forwardRef(function DataTable(props, ref) {
     return px != null && below(boxWidth[0], px);
   }
   const scrollRef = React32.useRef(null);
+  const edgeState = React32.useState("");
+  const checkMoreX = function() {
+    const el = scrollRef.current;
+    if (!el) return;
+    const more = Math.abs(el.scrollLeft) + el.clientWidth < el.scrollWidth - 1;
+    const next = more ? [el.offsetTop, el.clientHeight, el.offsetWidth - el.clientWidth].join(" ") : "";
+    if (next !== edgeState[0]) edgeState[1](next);
+  };
+  const checkRef = React32.useRef(checkMoreX);
+  checkRef.current = checkMoreX;
+  React32.useEffect(function() {
+    const el = scrollRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(function() {
+      checkRef.current();
+    });
+    ro.observe(el);
+    if (el.firstElementChild) ro.observe(el.firstElementChild);
+    return function() {
+      ro.disconnect();
+    };
+  }, []);
   const tipState = React32.useState(null), tip = tipState[0], setTip = tipState[1];
   function showFull(e) {
     const el = e.target.closest ? e.target.closest(".aura-table__td") : null;
@@ -6321,23 +6401,45 @@ var DataTableImpl = React32.forwardRef(function DataTable(props, ref) {
           /* @__PURE__ */ React32.createElement("span", { key: "__sel", className: cx("aura-table__sel", nPinned && "is-pinned") }, /* @__PURE__ */ React32.createElement("span", { className: "aura-skel aura-skel--box" }))
         );
       vis.forEach(function(c, j) {
+        const part = cardPart(c, j);
+        const action = part === "footer" || part === "actions";
+        const lines = c.pill ? 1 : Math.max(1, Math.min(10, Math.floor(Number(c.skeletonLines)) || 1));
+        const bar = function(n4) {
+          return /* @__PURE__ */ React32.createElement(
+            "span",
+            {
+              key: n4,
+              className: cx("aura-skel", c.pill && "aura-skel--pill", lines > 1 && "aura-skel--text"),
+              style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j + n4) % SKELETON_WIDTHS.length] }
+            }
+          );
+        };
+        const bars = [];
+        for (let b = 0; b < lines; b++) bars.push(bar(b));
         sk.push(
           /* @__PURE__ */ React32.createElement(
             "span",
             {
               key: c.key,
-              className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
+              className: cx(
+                "aura-table__td",
+                autoRows && "aura-table__td--auto",
+                c.align === "end" && "is-end",
+                isPinned(c) && "is-pinned"
+              ),
               style: cellStyle(c, j),
-              ...cardAttrs(c, j),
-              "data-label": void 0
+              ...cardAttrs(c, j)
             },
-            /* @__PURE__ */ React32.createElement(
+            action ? /* @__PURE__ */ React32.createElement(
               "span",
               {
-                className: cx("aura-skel", c.pill && "aura-skel--pill"),
-                style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j) % SKELETON_WIDTHS.length] }
+                className: cx(
+                  "aura-skel aura-skel--action",
+                  part === "footer" && "is-footer",
+                  c.skeletonTouch && "is-touch"
+                )
               }
-            )
+            ) : lines > 1 ? /* @__PURE__ */ React32.createElement("span", { className: "aura-skel-lines" }, bars) : bars[0]
           )
         );
       });
@@ -6346,7 +6448,16 @@ var DataTableImpl = React32.forwardRef(function DataTable(props, ref) {
         /* @__PURE__ */ React32.createElement("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") })
       );
       skRows.push(
-        /* @__PURE__ */ React32.createElement("div", { key: "sk" + i, className: "aura-table__row aura-table__row--skeleton", "aria-hidden": true, style: rowStyle }, sk)
+        /* @__PURE__ */ React32.createElement(
+          "div",
+          {
+            key: "sk" + i,
+            className: cx("aura-table__row aura-table__row--skeleton", autoRows && "aura-table__row--auto"),
+            "aria-hidden": true,
+            style: rowStyle
+          },
+          sk
+        )
       );
     }
   } else if (!rows.length) {
@@ -6522,12 +6633,25 @@ var DataTableImpl = React32.forwardRef(function DataTable(props, ref) {
         stacked && "aura-table--stacked",
         noCardSel && "aura-table--cards-nosel",
         scrolledX[0] && "is-scrolled-x",
+        edgeState[0] && !stacked && "has-more-x",
         refreshing && "is-refreshing",
         !levels.length && props.className
       ),
       style: levels.length ? { ["--aura-q-back"]: String(levels[levels.length - 1].px / Q) } : void 0
     },
     refreshing ? /* @__PURE__ */ React32.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
+    edgeState[0] && !stacked ? /* @__PURE__ */ React32.createElement(
+      "span",
+      {
+        className: "aura-table__edge",
+        "aria-hidden": true,
+        style: {
+          "--aura-edge-top": edgeState[0].split(" ")[0] + "px",
+          "--aura-edge-h": edgeState[0].split(" ")[1] + "px",
+          "--aura-edge-sb": edgeState[0].split(" ")[2] + "px"
+        }
+      }
+    ) : null,
     /* @__PURE__ */ React32.createElement(
       "div",
       {
@@ -6563,6 +6687,7 @@ var DataTableImpl = React32.forwardRef(function DataTable(props, ref) {
             setScrollTop(t2.scrollTop);
           const sx = t2.scrollLeft > 0;
           if (sx !== scrolledX[0]) scrolledX[1](sx);
+          checkMoreX();
         }
       },
       /* @__PURE__ */ React32.createElement(

package/dist/esm/Checkbox.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { cx, devWarnOnce, omit, uid, useMergedRef, useMaybeControlled } from "./internal.js";
+import { cx, devWarnOnce, omit, touchClass, uid, useMergedRef, useMaybeControlled } from "./internal.js";
 import { Icon } from "./Icon.js";
 import { IconCheck, IconMinus } from "./icons.js";
 const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
@@ -23,7 +23,8 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
     "className",
     "tabIndex",
     "disabled",
-    "hitArea"
+    "hitArea",
+    "touchHeight"
   ]);
   const text = props.children;
   const labelled = text != null && text !== "";
@@ -42,6 +43,7 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
       className: cx(
         "aura-check",
         labelled && "aura-check--labelled",
+        labelled && touchClass(props.touchHeight),
         hit && "has-hit",
         props.disabled && "is-disabled",
         props.className

package/dist/esm/DataTable.js

@@ -194,6 +194,28 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     return px != null && below(boxWidth[0], px);
   }
   const scrollRef = React.useRef(null);
+  const edgeState = React.useState("");
+  const checkMoreX = function() {
+    const el = scrollRef.current;
+    if (!el) return;
+    const more = Math.abs(el.scrollLeft) + el.clientWidth < el.scrollWidth - 1;
+    const next = more ? [el.offsetTop, el.clientHeight, el.offsetWidth - el.clientWidth].join(" ") : "";
+    if (next !== edgeState[0]) edgeState[1](next);
+  };
+  const checkRef = React.useRef(checkMoreX);
+  checkRef.current = checkMoreX;
+  React.useEffect(function() {
+    const el = scrollRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(function() {
+      checkRef.current();
+    });
+    ro.observe(el);
+    if (el.firstElementChild) ro.observe(el.firstElementChild);
+    return function() {
+      ro.disconnect();
+    };
+  }, []);
   const tipState = React.useState(null), tip = tipState[0], setTip = tipState[1];
   function showFull(e) {
     const el = e.target.closest ? e.target.closest(".aura-table__td") : null;
@@ -1125,23 +1147,45 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           /* @__PURE__ */ React.createElement("span", { key: "__sel", className: cx("aura-table__sel", nPinned && "is-pinned") }, /* @__PURE__ */ React.createElement("span", { className: "aura-skel aura-skel--box" }))
         );
       vis.forEach(function(c, j) {
+        const part = cardPart(c, j);
+        const action = part === "footer" || part === "actions";
+        const lines = c.pill ? 1 : Math.max(1, Math.min(10, Math.floor(Number(c.skeletonLines)) || 1));
+        const bar = function(n2) {
+          return /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              key: n2,
+              className: cx("aura-skel", c.pill && "aura-skel--pill", lines > 1 && "aura-skel--text"),
+              style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j + n2) % SKELETON_WIDTHS.length] }
+            }
+          );
+        };
+        const bars = [];
+        for (let b = 0; b < lines; b++) bars.push(bar(b));
         sk.push(
           /* @__PURE__ */ React.createElement(
             "span",
             {
               key: c.key,
-              className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
+              className: cx(
+                "aura-table__td",
+                autoRows && "aura-table__td--auto",
+                c.align === "end" && "is-end",
+                isPinned(c) && "is-pinned"
+              ),
               style: cellStyle(c, j),
-              ...cardAttrs(c, j),
-              "data-label": void 0
+              ...cardAttrs(c, j)
             },
-            /* @__PURE__ */ React.createElement(
+            action ? /* @__PURE__ */ React.createElement(
               "span",
               {
-                className: cx("aura-skel", c.pill && "aura-skel--pill"),
-                style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j) % SKELETON_WIDTHS.length] }
+                className: cx(
+                  "aura-skel aura-skel--action",
+                  part === "footer" && "is-footer",
+                  c.skeletonTouch && "is-touch"
+                )
               }
-            )
+            ) : lines > 1 ? /* @__PURE__ */ React.createElement("span", { className: "aura-skel-lines" }, bars) : bars[0]
           )
         );
       });
@@ -1150,7 +1194,16 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         /* @__PURE__ */ React.createElement("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") })
       );
       skRows.push(
-        /* @__PURE__ */ React.createElement("div", { key: "sk" + i, className: "aura-table__row aura-table__row--skeleton", "aria-hidden": true, style: rowStyle }, sk)
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            key: "sk" + i,
+            className: cx("aura-table__row aura-table__row--skeleton", autoRows && "aura-table__row--auto"),
+            "aria-hidden": true,
+            style: rowStyle
+          },
+          sk
+        )
       );
     }
   } else if (!rows.length) {
@@ -1326,12 +1379,25 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         stacked && "aura-table--stacked",
         noCardSel && "aura-table--cards-nosel",
         scrolledX[0] && "is-scrolled-x",
+        edgeState[0] && !stacked && "has-more-x",
         refreshing && "is-refreshing",
         !levels.length && props.className
       ),
       style: levels.length ? { ["--aura-q-back"]: String(levels[levels.length - 1].px / Q) } : void 0
     },
     refreshing ? /* @__PURE__ */ React.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
+    edgeState[0] && !stacked ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: "aura-table__edge",
+        "aria-hidden": true,
+        style: {
+          "--aura-edge-top": edgeState[0].split(" ")[0] + "px",
+          "--aura-edge-h": edgeState[0].split(" ")[1] + "px",
+          "--aura-edge-sb": edgeState[0].split(" ")[2] + "px"
+        }
+      }
+    ) : null,
     /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -1367,6 +1433,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
             setScrollTop(t2.scrollTop);
           const sx = t2.scrollLeft > 0;
           if (sx !== scrolledX[0]) scrolledX[1](sx);
+          checkMoreX();
         }
       },
       /* @__PURE__ */ React.createElement(

package/dist/esm/Field.js

@@ -38,7 +38,8 @@ const FIELD_KEYS = [
   "id",
   "suffix",
   "options",
-  "placeholder"
+  "placeholder",
+  "touchHeight"
 ];
 export {
   FIELD_KEYS,

package/dist/esm/Menu.js

@@ -6,6 +6,39 @@ import { Icon } from "./Icon.js";
 import { useLinkComponent } from "./locale.js";
 import { IconCheck } from "./icons.js";
 const ITEMS = '[role^="menuitem"]';
+function makesBlock(s) {
+  return s.transform !== "none" || s.translate !== "none" || s.rotate !== "none" || s.scale !== "none" || s.filter !== "none" || s.backdropFilter !== "none" || s.perspective !== "none" || s.contentVisibility === "auto" || /paint|layout|strict|content/.test(s.contain) || /transform|translate|rotate|scale|filter|perspective/.test(s.willChange);
+}
+function inView(el) {
+  if (!el.isConnected) return false;
+  const r = el.getBoundingClientRect();
+  if (r.width === 0 && r.height === 0) return false;
+  let top = r.top, bottom = r.bottom, left = r.left, right = r.right;
+  let pos = getComputedStyle(el).position;
+  for (let p = el.parentElement; p && p !== document.body && p !== document.documentElement; p = p.parentElement) {
+    const s = getComputedStyle(p);
+    const block = makesBlock(s);
+    if (pos === "fixed" && !block) continue;
+    if (pos === "absolute" && s.position === "static" && !block) continue;
+    if (s.display !== "contents") {
+      const b = p.getBoundingClientRect();
+      if (s.overflowX !== "visible") {
+        left = Math.max(left, b.left);
+        right = Math.min(right, b.right);
+      }
+      if (s.overflowY !== "visible") {
+        top = Math.max(top, b.top);
+        bottom = Math.min(bottom, b.bottom);
+      }
+    }
+    pos = s.position === "fixed" || s.position === "absolute" ? s.position : "static";
+  }
+  top = Math.max(top, 0);
+  left = Math.max(left, 0);
+  bottom = Math.min(bottom, window.innerHeight);
+  right = Math.min(right, window.innerWidth);
+  return bottom > top && right > left;
+}
 const Menu = React.forwardRef(function Menu2(props, ref) {
   const own = React.useRef(null), merged = useMergedRef(ref, own);
   const posState = React.useState(null);
@@ -15,21 +48,30 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
   const headerId = uid(), itemId = uid();
   const hasHeader = props.header != null && props.header !== false && props.header !== "";
   const Link = useLinkComponent(props.linkComponent);
+  function place() {
+    const a = props.anchor, m = own.current;
+    if (!a || !m) return;
+    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(function(p) {
+      return p && p.top === top && p.left === left && p.maxHeight === maxHeight ? p : { top, left, maxHeight };
+    });
+  }
+  const placeRef = React.useRef(place);
+  placeRef.current = place;
+  const live = React.useRef({ anchor: props.anchor, onClose: props.onClose });
+  live.current = { anchor: props.anchor, onClose: props.onClose };
   useIsoLayoutEffect(
     function() {
-      const a = props.anchor, m = own.current;
-      if (!a || !m) return;
-      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, maxHeight });
+      place();
     },
     [props.anchor, mounted, hasHeader]
   );
@@ -59,7 +101,12 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
           props.onClose(false);
       }
       function onScroll(e) {
-        if (own.current && !own.current.contains(e.target)) props.onClose(false);
+        if (own.current && e.target instanceof Node && own.current.contains(e.target)) return;
+        const a = live.current.anchor;
+        if (a && !inView(a)) {
+          live.current.onClose(false);
+          if (a instanceof HTMLElement && a.closest('[aria-modal="true"]')) a.focus({ preventScroll: true });
+        } else placeRef.current();
       }
       document.addEventListener("pointerdown", outside, true);
       window.addEventListener("scroll", onScroll, true);

package/dist/esm/RadioGroup.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { describedBy } from "./Field.js";
 import { Icon } from "./Icon.js";
-import { cx, uid, useMaybeControlled } from "./internal.js";
+import { cx, touchClass, uid, useMaybeControlled } from "./internal.js";
 import { IconCircleAlert } from "./icons.js";
 const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
   const auto = uid(), id = props.id || auto;
@@ -28,7 +28,12 @@ const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
     "fieldset",
     {
       ref: setRef,
-      className: cx("aura-field aura-radio-group", props.error && "is-invalid", props.className),
+      className: cx(
+        "aura-field aura-radio-group",
+        props.error && "is-invalid",
+        touchClass(props.touchHeight),
+        props.className
+      ),
       "aria-describedby": describedBy(id, props),
       "aria-invalid": props.error ? true : void 0,
       disabled: props.disabled

package/dist/esm/Select.js

@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
 import { FIELD_KEYS, Field, describedBy } from "./Field.js";
 import { Icon } from "./Icon.js";
 import { useDensity } from "./locale.js";
-import { cx, devWarnOnce, omit, uid, useIsoLayoutEffect, useMergedRef, useMounted } from "./internal.js";
+import { cx, devWarnOnce, omit, touchClass, uid, useIsoLayoutEffect, useMergedRef, useMounted } from "./internal.js";
 import { IconCheck, IconChevronDown } from "./icons.js";
 const h = React.createElement;
 const FILTER_KEY = "__auraFilter";
@@ -418,7 +418,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
       required: props.required,
       optional: props.optional,
       disabled: props.disabled,
-      className: props.className
+      className: cx(touchClass(props.touchHeight), props.className)
     },
     child
   );

package/dist/esm/Tag.js

@@ -90,7 +90,7 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
         "aria-label": props.removeLabel || t.remove(name),
         onClick: props.onRemove
       },
-      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null), size: 12 })
+      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null), size: 14 })
     );
     return /* @__PURE__ */ React.createElement(Tooltip, { content: fullText, open: fullText ? void 0 : false }, btn);
   }() : null);

package/dist/esm/TextField.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { FIELD_KEYS, Field, describedBy } from "./Field.js";
 import { Icon } from "./Icon.js";
-import { cx, omit, uid } from "./internal.js";
+import { cx, omit, touchClass, uid } from "./internal.js";
 const TextField = React.forwardRef(function TextField2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const rest = omit(props, FIELD_KEYS);
@@ -16,7 +16,7 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
       required: props.required,
       optional: props.optional,
       disabled: props.disabled,
-      className: props.className
+      className: cx(touchClass(props.touchHeight), props.className)
     },
     /* @__PURE__ */ React.createElement("div", { className: cx("aura-input", props.icon && "has-icon", props.suffix && "has-suffix") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, /* @__PURE__ */ React.createElement(
       "input",

package/dist/esm/Textarea.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { FIELD_KEYS, Field, describedBy } from "./Field.js";
-import { omit, uid } from "./internal.js";
+import { cx, omit, touchClass, uid } from "./internal.js";
 const Textarea = React.forwardRef(function Textarea2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const rest = omit(props, FIELD_KEYS);
@@ -15,7 +15,7 @@ const Textarea = React.forwardRef(function Textarea2(props, ref) {
       required: props.required,
       optional: props.optional,
       disabled: props.disabled,
-      className: props.className
+      className: cx(touchClass(props.touchHeight), props.className)
     },
     /* @__PURE__ */ React.createElement(
       "textarea",