@jirawatpyk/aura-react 5.29.0 → 5.30.0

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",

package/dist/esm/classes.js

@@ -8,6 +8,9 @@ function omit(src, keys) {
       out[k] = src[k];
   return out;
 }
+function touchClass(t) {
+  return t === "always" ? "is-touch-always" : !!t && "is-touch";
+}
 const TONES = ["neutral", "accent", "success", "warning", "danger"];
 function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
@@ -29,5 +32,6 @@ export {
   cx,
   devWarnOnce,
   omit,
-  tone
+  tone,
+  touchClass
 };

package/dist/esm/internal.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { cx, omit, tone, devWarnOnce } from "./classes.js";
+import { cx, omit, tone, devWarnOnce, touchClass } from "./classes.js";
 function useMaybeControlled(value, initial, onChange) {
   const s = React.useState(initial);
   const wasSet = React.useState(value !== void 0);
@@ -89,6 +89,7 @@ export {
   omit,
   plainClick,
   tone,
+  touchClass,
   trapTab,
   uid,
   useIsoLayoutEffect,

package/dist/index.d.cts

@@ -335,6 +335,9 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 		x: number;
 		y: number;
 	} | undefined;
+	/** A labelled checkbox's row is 44px (5.30, Chamber-OS 135), the one-line label centred: `true` below 640px or on a
+	 * coarse pointer, `'always'` at every width. A bare box (no visible label) uses `hitArea` instead. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** 32px round button holding one icon. */
 export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -393,6 +396,8 @@ export interface MenuProps {
 	 * accessible description, read once when the menu opens. */
 	header?: React$1.ReactNode | undefined;
 }
+/** `true`: 44px below 640px or on a coarse pointer; `'always'`: 44px at every width (5.30). */
+export type TouchHeight = boolean | "always";
 export interface FieldProps {
 	/** Visible label; also the accessible name. */
 	label: string;
@@ -410,6 +415,10 @@ export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttrib
 	icon?: IconInput | undefined;
 	/** Trailing unit, e.g. "THB". */
 	suffix?: React$1.ReactNode | undefined;
+	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
+	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
+	 * Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** A password input with a show/hide button. All TextField props; `ref` reaches the input (react-hook-form `register`). */
 export interface PasswordFieldProps extends Omit<TextFieldProps, "type" | "suffix"> {
@@ -531,6 +540,9 @@ export interface CommandProps {
 	className?: string | undefined;
 }
 export interface TextareaProps extends FieldProps, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
+	/** Accepted like the other fields' (5.30, Chamber-OS 135), so a form can pass it to every field. A Textarea is
+	 * always at least 96px tall, well over the 44px target, so it changes nothing you can see. */
+	touchHeight?: TouchHeight | undefined;
 }
 export type SelectOption = string | {
 	value: string;
@@ -552,6 +564,10 @@ export interface SelectProps extends Omit<FieldProps, "label">, Omit<React$1.Sel
 	 * option on the read-only ground, with no chevron; no click or key opens the list. The value is still submitted
 	 * with the form (unlike `disabled`). Before JavaScript runs, the other options from `options` are disabled. */
 	readOnly?: boolean | undefined;
+	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
+	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
+	 * Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** A compact filter for FilterBar (5.12): "Status All ▾", as wide as its words. */
 export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value" | "defaultValue" | "multiple" | "size" | "placeholder" | "required" | "children"> {
@@ -586,6 +602,9 @@ export interface RadioGroupProps extends FieldProps {
 	disabled?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
+	/** 44px rows (5.30, Chamber-OS 135), the one-line label centred: `true` below 640px or on a coarse pointer (touch
+	 * screens already get it), `'always'` at every width, also with a mouse. Default: as tall as the control and label. */
+	touchHeight?: TouchHeight | undefined;
 }
 export interface SwitchProps {
 	label?: string | undefined;

package/dist/index.d.ts

@@ -335,6 +335,9 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 		x: number;
 		y: number;
 	} | undefined;
+	/** A labelled checkbox's row is 44px (5.30, Chamber-OS 135), the one-line label centred: `true` below 640px or on a
+	 * coarse pointer, `'always'` at every width. A bare box (no visible label) uses `hitArea` instead. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** 32px round button holding one icon. */
 export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -393,6 +396,8 @@ export interface MenuProps {
 	 * accessible description, read once when the menu opens. */
 	header?: React$1.ReactNode | undefined;
 }
+/** `true`: 44px below 640px or on a coarse pointer; `'always'`: 44px at every width (5.30). */
+export type TouchHeight = boolean | "always";
 export interface FieldProps {
 	/** Visible label; also the accessible name. */
 	label: string;
@@ -410,6 +415,10 @@ export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttrib
 	icon?: IconInput | undefined;
 	/** Trailing unit, e.g. "THB". */
 	suffix?: React$1.ReactNode | undefined;
+	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
+	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
+	 * Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** A password input with a show/hide button. All TextField props; `ref` reaches the input (react-hook-form `register`). */
 export interface PasswordFieldProps extends Omit<TextFieldProps, "type" | "suffix"> {
@@ -531,6 +540,9 @@ export interface CommandProps {
 	className?: string | undefined;
 }
 export interface TextareaProps extends FieldProps, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
+	/** Accepted like the other fields' (5.30, Chamber-OS 135), so a form can pass it to every field. A Textarea is
+	 * always at least 96px tall, well over the 44px target, so it changes nothing you can see. */
+	touchHeight?: TouchHeight | undefined;
 }
 export type SelectOption = string | {
 	value: string;
@@ -552,6 +564,10 @@ export interface SelectProps extends Omit<FieldProps, "label">, Omit<React$1.Sel
 	 * option on the read-only ground, with no chevron; no click or key opens the list. The value is still submitted
 	 * with the form (unlike `disabled`). Before JavaScript runs, the other options from `options` are disabled. */
 	readOnly?: boolean | undefined;
+	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
+	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
+	 * Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** A compact filter for FilterBar (5.12): "Status All ▾", as wide as its words. */
 export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value" | "defaultValue" | "multiple" | "size" | "placeholder" | "required" | "children"> {
@@ -586,6 +602,9 @@ export interface RadioGroupProps extends FieldProps {
 	disabled?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
+	/** 44px rows (5.30, Chamber-OS 135), the one-line label centred: `true` below 640px or on a coarse pointer (touch
+	 * screens already get it), `'always'` at every width, also with a mouse. Default: as tall as the control and label. */
+	touchHeight?: TouchHeight | undefined;
 }
 export interface SwitchProps {
 	label?: string | undefined;