asma-ui-core 3.114.0 → 3.116.0

package/dist/datetime/components/time-picker/StyledTimePicker.js

@@ -1,119 +1,120 @@
-import { cn as g } from "../../../helpers/cn.js";
-import { isOverlayBackEnabled as M, useBackCloses as A } from "../../../hooks/useBackCloses.hook.js";
-import { useIsMobileView as q } from "../../hooks/useWindowWidthSize.hook.js";
-import { StyledDrawer as F } from "../../../components/navigation/drawer/StyledDrawer.js";
-import { useBackNavigationClose as K } from "../../hooks/useBackNavigationClose.hook.js";
-import { usePopupState as W } from "../../../hooks/usePopupState.js";
-import { ClickAwayListener as z } from "../../../components/mui-compat/ClickAwayListener.js";
-import { isBeforeMinTime as w } from "./helpers/minTime.js";
-import { TimePickerPanel as G } from "./components/TimePickerPanel.js";
-import { TimePickerPopper as J } from "./TimePickerPopper.js";
-import { getTimeFromValue as B } from "./helpers/getTimeFromValue.js";
-import { timePickerWidthProps as O } from "./helpers/timePickerWidth.js";
-import { TimePickerInput as Q } from "./TimePickerInput.js";
-import { useEffect as R, useState as E } from "react";
-import { jsx as r, jsxs as D } from "react/jsx-runtime";
-import { format as V, isBefore as U, isValid as X } from "date-fns";
-var fe = (o) => {
-  const { value: l, onSelect: n, notBeforeTime: d, minTime: c } = o, t = W({
+import { cn as D } from "../../../helpers/cn.js";
+import { isOverlayBackEnabled as q, useBackCloses as F } from "../../../hooks/useBackCloses.hook.js";
+import { useIsMobileView as K } from "../../hooks/useWindowWidthSize.hook.js";
+import { StyledDrawer as W } from "../../../components/navigation/drawer/StyledDrawer.js";
+import { useBackNavigationClose as z } from "../../hooks/useBackNavigationClose.hook.js";
+import { usePopupState as G } from "../../../hooks/usePopupState.js";
+import { ClickAwayListener as J } from "../../../components/mui-compat/ClickAwayListener.js";
+import { isBeforeMinTime as E } from "./helpers/minTime.js";
+import { TimePickerPanel as Q } from "./components/TimePickerPanel.js";
+import { TimePickerPopper as R } from "./TimePickerPopper.js";
+import { getTimeFromValue as C } from "./helpers/getTimeFromValue.js";
+import { timePickerWidthProps as H } from "./helpers/timePickerWidth.js";
+import { TimePickerInput as U } from "./TimePickerInput.js";
+import { useEffect as X, useState as P } from "react";
+import { jsx as i, jsxs as L } from "react/jsx-runtime";
+import { format as V, isBefore as Y, isValid as Z } from "date-fns";
+var de = (r) => {
+  const { value: a, onSelect: n, notBeforeTime: v, minTime: c } = r, t = G({
     variant: "popper",
     popupId: "time-picker-popper"
-  }), m = q();
-  A({
+  }), m = K();
+  F({
     active: t.isOpen,
     requestClose: t.close
-  }), K({
-    open: m && t.isOpen && !M(),
+  }), z({
+    open: m && t.isOpen && !q(),
     onClose: t.close
   });
-  const { isOpen: P, anchorEl: x, close: h } = t;
-  R(() => {
-    if (!P || m) return;
-    const e = (i) => {
-      x?.contains(document.activeElement) && (i.key === "Escape" ? (i.preventDefault(), i.stopPropagation(), h()) : i.key === "Tab" && h());
+  const { isOpen: b, anchorEl: S, close: w } = t;
+  X(() => {
+    if (!b || m) return;
+    const e = (o) => {
+      S?.contains(document.activeElement) && (o.key === "Escape" ? (o.preventDefault(), o.stopPropagation(), w()) : o.key === "Tab" && w());
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
   }, [
-    P,
-    x,
-    h,
+    b,
+    S,
+    w,
     m
   ]);
-  const C = l ? V(l, "HH:mm") : "", [H, u] = E(C), [b, a] = E(!1), [L, s] = E(!0), v = b ? H : C, k = (e) => !e || !d || !X(d) || !U(e, d), f = v.length === 5 ? B(v, l) : null, N = f ? k(f) : !0, I = (e) => {
-    const i = e.target.value;
-    if (a(!0), u(i), i.length !== 5) {
-      s(!1);
+  const T = a ? V(a, "HH:mm") : "", [k, u] = P(T), [x, s] = P(!1), [B, f] = P(!1), p = x ? k : T, d = (e) => !e || !v || !Z(v) || !Y(e, v), l = p.length === 5 ? C(p, a) : null, j = !B || p === "" || l !== null, I = !B || !l || d(l), g = (e) => {
+    if (e === "") return !0;
+    const o = C(e, a);
+    return o !== null && d(o);
+  }, M = (e) => {
+    const o = e.target.value;
+    if (s(!0), u(o), g(o) && f(!1), o.length !== 5) return;
+    const h = C(o, a);
+    if (!h) {
+      n(void 0);
       return;
     }
-    const p = B(i, l);
-    if (!p) {
-      n(void 0), s(!1);
+    E(h, c) || (d(h) ? (n(h), s(!1), t.close()) : n(void 0));
+  }, O = (e) => {
+    if (e && E(e, c)) return;
+    const o = d(e);
+    if (f(!o), o) {
+      n(e), u(e ? V(e, "HH:mm") : ""), s(!1);
       return;
     }
-    s(!0), !w(p, c) && (k(p) ? (n(p), a(!1), t.close()) : n(void 0));
-  }, T = (e) => {
-    if (!(e && w(e, c))) {
-      if (s(!0), k(e)) {
-        n(e), u(e ? V(e, "HH:mm") : ""), a(!1);
-        return;
-      }
-      n(void 0), u(e ? V(e, "HH:mm") : ""), a(!0);
-    }
-  }, j = () => {
-    b && f && w(f, c) && a(!1);
-  }, S = () => {
-    n(void 0), u(""), a(!1), s(!0);
-  }, y = /* @__PURE__ */ r(Q, {
-    ...o,
+    n(void 0), u(e ? V(e, "HH:mm") : ""), s(!0);
+  }, A = () => {
+    x && (l && E(l, c) ? s(!1) : k === "" ? n(void 0) : g(k) || f(!0));
+  }, N = () => {
+    n(void 0), u(""), s(!1), f(!1);
+  }, y = /* @__PURE__ */ i(U, {
+    ...r,
     popupState: t,
-    localValue: v,
-    isValidTime: L,
-    isValidEndTime: N,
-    handleChange: I,
-    handleBlur: j
+    localValue: p,
+    isValidTime: j,
+    isValidEndTime: I,
+    handleChange: M,
+    handleBlur: A
   });
-  return o.disabled || o.readOnly ? y : m ? /* @__PURE__ */ D("div", {
-    className: g("relative h-auto", typeof o.width == "number" && "w-auto"),
-    ...O(o.width),
-    children: [/* @__PURE__ */ r("div", {
+  return r.disabled || r.readOnly ? y : m ? /* @__PURE__ */ L("div", {
+    className: D("relative h-auto", typeof r.width == "number" && "w-auto"),
+    ...H(r.width),
+    children: [/* @__PURE__ */ i("div", {
       className: "m-0 flex h-fit items-center justify-center p-0",
       children: y
-    }), /* @__PURE__ */ r(F, {
+    }), /* @__PURE__ */ i(W, {
       anchor: "bottom",
       open: t.isOpen,
       onClose: t.close,
       anchorEl: t.anchorEl,
       registerBackClose: !1,
-      children: /* @__PURE__ */ r("div", {
+      children: /* @__PURE__ */ i("div", {
         className: "mx-auto w-full max-w-[360px] px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-2",
-        children: /* @__PURE__ */ r(G, {
-          dataTest: o.dataTest,
-          value: l,
+        children: /* @__PURE__ */ i(Q, {
+          dataTest: r.dataTest,
+          value: a,
           minTime: c,
-          onSelect: T,
-          handleClear: S,
+          onSelect: O,
+          handleClear: N,
           onConfirm: t.close
         })
       })
     })]
-  }) : /* @__PURE__ */ r(z, {
+  }) : /* @__PURE__ */ i(J, {
     mouseEvent: "onMouseDown",
     onClickAway: t.close,
-    children: /* @__PURE__ */ D("div", {
-      className: g("relative h-auto", typeof o.width == "number" && "w-auto"),
-      ...O(o.width),
-      children: [/* @__PURE__ */ r("div", {
+    children: /* @__PURE__ */ L("div", {
+      className: D("relative h-auto", typeof r.width == "number" && "w-auto"),
+      ...H(r.width),
+      children: [/* @__PURE__ */ i("div", {
         className: "m-0 flex h-fit items-center justify-center p-0",
         children: y
-      }), t.isOpen && /* @__PURE__ */ r(J, {
-        ...o,
+      }), t.isOpen && /* @__PURE__ */ i(R, {
+        ...r,
         popupState: t,
-        handleClear: S,
-        onSelect: T
+        handleClear: N,
+        onSelect: O
       })]
     })
   });
 };
 export {
-  fe as StyledTimePicker
+  de as StyledTimePicker
 };

package/dist/hooks/useMediaQuery.hook.js

@@ -1,12 +1,12 @@
 import { useSyncExternalStore as o } from "react";
-function r(t) {
+function e(t) {
   function i() {
     return window.matchMedia(t).matches;
   }
-  function a(e) {
+  function a(r) {
     const n = window.matchMedia(t);
-    return n.addEventListener("change", e), () => {
-      n.removeEventListener("change", e);
+    return n.addEventListener("change", r), () => {
+      n.removeEventListener("change", r);
     };
   }
   function u() {
@@ -16,9 +16,10 @@ function r(t) {
     return o(a, i, u);
   };
 }
-var h = r("(max-width: 743px)"), c = r("(max-height: 480px)"), d = r("(max-width: 743px), (max-height: 480px)");
+var h = e("(max-width: 743px)"), s = e("(max-height: 480px)"), c = e("(max-height: 480px) and (min-width: 480px)"), m = e("(max-width: 743px), (max-height: 480px)");
 export {
-  d as useFullScreenPickerMediaQuery,
+  m as useFullScreenPickerMediaQuery,
   h as useMobileMediaQuery,
-  c as useShortViewportMediaQuery
+  c as usePickerOneRowHeaderMediaQuery,
+  s as useShortViewportMediaQuery
 };

package/dist/src/components/inputs/field-styles.d.ts

@@ -46,9 +46,12 @@ interface FieldState {
     /** `variant="standard"`: same geometry as the outlined field, but the border is painted on focus only. */
     borderless?: boolean;
 }
-/** The border overlay (an absolutely-positioned sibling so width changes never reflow the input). */
+/**
+ * The border overlay (an absolutely-positioned sibling so width changes never reflow the input).
+ * States: resting 1px delta-500 · focused 3px focus-ring · error 1px error-500 · error + focused 3px error-500.
+ */
 export declare const outlineClass: ({ focused, error, disabled, readOnly, borderless }: FieldState) => string;
-/** MUI-compatible fieldset outline used by text fields with floating labels. */
+/** MUI-compatible fieldset outline used by text fields with floating labels. Same states as `outlineClass`. */
 export declare const notchedOutlineClass: ({ focused, error, disabled, readOnly, notched, }: FieldState & {
     notched?: boolean;
 }) => string;

package/dist/src/components/inputs/field-styles.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/inputs/full-screen-picker/FullScreenPicker.d.ts

@@ -28,7 +28,8 @@ export interface FullScreenPickerProps {
  * search, optional selection/clear row; 1 px `border/separator` delta-200 under it) and one scrolling
  * **List**. Title = Mobile/Page title, SemiBold 20/28, `text-icon/title-label` delta-800, wraps.
  * Close = 40 × 40 Quaternary button with a 24 px ×. Search row = `pt-8 px-16`. On a short viewport
- * (`Variant2`, ≤ 480 px high) title, search (max 240 px) and close share the first row.
+ * (`Variant2`, ≤ 480 px high and ≥ 480 px wide — a phone in landscape, not an upright phone whose
+ * keyboard is up) title, search (max 240 px) and close share the first row.
  *
  * The shared shell for every full-screen picker in ui-core: `StyledSelectAutocomplete` and
  * `CountryCodeSelect` both render through it (ASMA-8468). Presentation only — the caller owns the

package/dist/src/components/inputs/full-screen-picker/pickerCopy.d.ts

@@ -23,7 +23,6 @@ export interface PickerText {
     cleared: string;
     /** Announced after `clearAll`. */
     clearedAll: string;
-    truncated: (shown: number, total: number) => string;
 }
 /** Default picker copy for `locale`, with any consumer overrides applied on top. */
 export declare const getPickerText: (locale: UiCoreLocale, overrides?: Partial<PickerText>) => PickerText;

package/dist/src/components/inputs/phone-field/CountryCodeOptions.d.ts

@@ -20,9 +20,11 @@ export interface CountryCodeOptionsProps {
     onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
     /** Tabbing into the list: put the active-row marker on a row. */
     onFocus?: () => void;
+    /** The list is showing: each opening starts at the chosen country (LIST-10, AC 17). */
+    open?: boolean;
 }
 /**
  * The country listbox. Presentation only — filtering, the active row and the keyboard live in
  * [[useCountryPicker]], so the desktop trigger and the mobile sheet render the same list.
  */
-export declare const CountryCodeOptions: ({ dataTest, visible, selectedIso2, activeIndex, optionId, onSelect, listId, label, renderFlag, className, onKeyDown, onFocus, }: CountryCodeOptionsProps) => JSX.Element;
+export declare const CountryCodeOptions: ({ dataTest, visible, selectedIso2, activeIndex, optionId, onSelect, listId, label, renderFlag, className, onKeyDown, onFocus, open, }: CountryCodeOptionsProps) => JSX.Element;

package/dist/src/components/inputs/select-autocomplete/StyledSelectAutocomplete.d.ts

@@ -29,6 +29,7 @@ export interface AutocompleteRenderInputParams {
             ref: React.Ref<HTMLDivElement>;
             startAdornment?: ReactNode;
             endAdornment?: ReactNode;
+            onClick?: (event: React.MouseEvent<HTMLElement>) => void;
         };
     };
 }
@@ -43,7 +44,8 @@ type AutocompleteValue<T, Multiple, DisableClearable, FreeSolo> = Multiple exten
 /**
  * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#20474-29075
  * Figma "Autocomplete". The trigger is the outlined **Input field** (shared `field-styles`: 40px,
- * border enabled delta-500/`#7a899e`, hover gama-300, focus gama-400 `#1ca1a1`, error error-500),
+ * border enabled delta-500/`#7a899e`, hover gama-300, focus 3px `color.focus.ring`, error error-500,
+ * error + focus 3px error-500),
  * so the field **State** (Enabled/Hovered/Focused/Error/Read-only) ← focus/open + `error`/`readOnly`/
  * `disabled`. **Filled** ← selected value(s): single fills the input text, multiple renders **Tag
  * chips** (`StyledChip`: h32, radius25, label 16/delta-700 — node 20475-29954). The dropdown is the

package/dist/src/components/inputs/textarea/StyledTextarea.d.ts

@@ -57,7 +57,8 @@ type StyledTextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & T
  * Figma has no standalone "Text area" component — a multiline text control inherits the **Input
  * field** outlined styling (shared with `StyledInputField`/`field-styles`): radius 4, field text
  * **Body Base 16/lh24 delta-800**; border **enabled delta-500 #7a899e**, **hover gama-300 #60bdbd
- * (2px)**, **focus gama-400 #1ca1a1 (3px)**, **error error-500 #e10700**, **disabled delta-300**.
+ * (2px)**, **focus 3px `color.focus.ring`**, **error error-500 #e10700**, **error + focus 3px
+ * error-500**, **disabled delta-300**.
  * Title = **Body Base SemiBold 16 delta-800**; description/helper = **Helper 14/lh20 delta-600**.
  * State (Enabled/Hover/Focus/Error/Disabled) ← native + `error`/`disabled`; the `not_editable`/
  * `view_only` variants are the read-only presentations. Colours live in the textarea-only

package/dist/src/datetime/components/time-picker/StyledTimePicker.d.ts

@@ -2,7 +2,8 @@ import { StyledTimePickerProps } from './types';
 /**
  * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#15561-37391
  * Figma has no distinct time-picker-popover component — the trigger is the outlined **Input field**
- * (`field-styles`: 40px, border delta-500 / hover gama-300 / focus gama-400 / error error-500) with
+ * (`field-styles`: 40px, border delta-500 / hover gama-300 / focus 3px `color.focus.ring` / error
+ * error-500 / error + focus 3px error-500) with
  * a trailing **clock icon** (delta-700 like the select/search field icons; delta-300 when disabled).
  * The dropdown follows the **Menus** surface (delta-300 border + Menus shadow `0 2 4 rgba(34,33,51,
  * .15)`): scrollable hour/minute columns of 36px cells — hover delta-50, "now" gama-50 (like the

package/dist/src/hooks/useMediaQuery.hook.d.ts

@@ -2,6 +2,14 @@ export declare function makeMediaQueryStore(mediaQuery: string): () => boolean;
 export declare const useMobileMediaQuery: () => boolean;
 /** A phone in landscape: too short for a sheet capped at 90vh to leave a usable body. */
 export declare const useShortViewportMediaQuery: () => boolean;
+/**
+ * The full-screen picker's one-row header (ASMA-8468 REQ-007): a viewport that is short **and** wide
+ * — a phone in landscape. Short alone is not enough: on an upright phone the on-screen keyboard also
+ * brings the viewport under 480 px, and moving the focused search into the first row dropped the
+ * keyboard, which moved the search back. Upright phones are at most about 440 px wide (iPhone Pro
+ * Max); phones held sideways start at 568 px (iPhone SE).
+ */
+export declare const usePickerOneRowHeaderMediaQuery: () => boolean;
 /**
  * ASMA-8468 REQ-001: a searchable select opens as a full-screen picker below 744 CSS px wide or at
  * most 480 CSS px high. The height half is the same boundary as {@link useShortViewportMediaQuery}

package/dist/tailwind.config.d.ts

@@ -1,6 +1,9 @@
 declare const _default: {
     mode: string;
     important: true;
+    future: {
+        hoverOnlyWhenSupported: true;
+    };
     blocklist: string[];
     content: string[];
     theme: {

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.114.0",
+    "version": "3.116.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",

package/src/styles/components-colors/inputVariables.css

@@ -63,8 +63,9 @@
     --input-error-disabled-cursor: default;
     --input-error-outline-width: 1px;
     --input-error-hover-outline-width: 1px;
-    --input-error-active-outline-width: 1px;
-    --input-error-focus-outline-width: 1px;
+    /* Error like the input field (ASMA-8561): 1px at rest and on hover, 3px on press and focus. */
+    --input-error-active-outline-width: 3px;
+    --input-error-focus-outline-width: 3px;
     --input-error-disabled-outline-width: 1px;
     /* input notEditable */
     --colors-input-notEditable-placeholder-color: var(--colors-delta-800);