asma-ui-core 3.111.0 → 3.113.0

package/dist/components/inputs/phone-field/CountryCodeSelect.js

@@ -1,77 +1,89 @@
 import { cn as f } from "../../../helpers/cn.js";
-import { ChevronDownIcon as $ } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { useMobileMediaQuery as j } from "../../../hooks/useMediaQuery.hook.js";
-import { StyledDialog as z } from "../../feedback/dialog/StyledDialog.js";
+import { ChevronDownIcon as F } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { useFullScreenPickerMediaQuery as M } from "../../../hooks/useMediaQuery.hook.js";
 import { StyledPopover as Q } from "../../utils/popover/StyledPopover.js";
 import { notchedOutlineClass as U } from "../field-styles.js";
-import { StyledSearchField as W } from "../search-field/StyledSearchField.js";
-import { CountryCodeOptions as q } from "./CountryCodeOptions.js";
-import { useCountryPicker as G } from "./useCountryPicker.js";
-import { useEffect as K, useId as H, useRef as b, useState as m } from "react";
-import { Fragment as J, jsx as n, jsxs as i } from "react/jsx-runtime";
-var re = ({ dataTest: r, countries: g, value: s, onChange: A, disabled: c, selectCountryLabel: w, searchPlaceholder: E, renderFlag: h, labelledBy: F, className: O }) => {
-  const [t, d] = m(!1), [P, u] = m(!1), [x, a] = m(""), [B, M] = m(null), y = b(null), v = b(null), C = b(!1), p = j(), l = `${H()}-country-listbox`, I = g.find((o) => o.iso2 === s), k = I === void 0 ? "" : `+${I.dialCode}`, e = G({
-    countries: g,
+import { StyledSearchField as q } from "../search-field/StyledSearchField.js";
+import { FullScreenPicker as L } from "../full-screen-picker/FullScreenPicker.js";
+import { CountryCodeOptions as G } from "./CountryCodeOptions.js";
+import { useCountryPicker as H } from "./useCountryPicker.js";
+import { useEffect as P, useId as J, useRef as w, useState as m } from "react";
+import { Fragment as V, jsx as n, jsxs as h } from "react/jsx-runtime";
+var ae = ({ dataTest: r, countries: y, value: s, onChange: O, disabled: c, selectCountryLabel: g, searchPlaceholder: A, renderFlag: x, labelledBy: E, className: B }) => {
+  const [t, d] = m(!1), [R, u] = m(!1), [b, a] = m(""), [W, j] = m(null), v = w(null), I = w(null), C = w(!1), i = M(), l = `${J()}-country-listbox`, k = y.find((e) => e.iso2 === s), D = k === void 0 ? "" : `+${k.dialCode}`, o = H({
+    countries: y,
     selectedIso2: s,
-    query: x,
+    query: b,
     listId: l,
-    onSelect: (o, R = !0) => {
-      A(o), R && (d(!1), a(""));
+    onSelect: (e, p = !0) => {
+      O(e), p && (d(!1), a(""));
     },
     onDismiss: () => {
       d(!1), a("");
     }
   });
-  K(() => {
-    t && !p && y.current?.focus();
-  }, [t, p]), K(() => {
-    C.current && !t && v.current?.focus(), C.current = t;
+  P(() => {
+    t && !i && v.current?.focus();
+  }, [t, i]), P(() => {
+    C.current && !t && I.current?.focus(), C.current = t;
   }, [t]);
-  const N = /* @__PURE__ */ n(q, {
+  const K = (e) => {
+    e.key !== "Tab" && o.handleKeyDown(e);
+  }, z = (e) => {
+    if (e.key !== " ") {
+      K(e);
+      return;
+    }
+    e.preventDefault();
+    const p = o.activeIndex === null ? void 0 : o.visible[o.activeIndex];
+    p !== void 0 && o.select(p.iso2, !1);
+  }, N = (e) => /* @__PURE__ */ n(G, {
     dataTest: r,
-    visible: e.visible,
+    visible: o.visible,
     selectedIso2: s,
-    activeIndex: e.activeIndex,
-    optionId: e.optionId,
-    onSelect: e.select,
+    activeIndex: o.activeIndex,
+    optionId: o.optionId,
+    onSelect: o.select,
     listId: l,
-    label: w,
-    renderFlag: h
-  }), D = {
+    label: g,
+    renderFlag: x,
+    onKeyDown: e ? z : void 0,
+    onFocus: e && o.activeIndex === null ? () => o.openWithKeyboard(1) : void 0
+  }), S = {
     role: "combobox",
-    "aria-activedescendant": e.activeIndex === null ? void 0 : e.optionId(e.activeIndex),
+    "aria-activedescendant": o.activeIndex === null ? void 0 : o.optionId(o.activeIndex),
     "aria-autocomplete": "list",
     "aria-controls": l,
     "aria-expanded": !0
-  }, S = t && !p;
-  return /* @__PURE__ */ i(J, { children: [/* @__PURE__ */ i("div", {
-    ref: M,
+  }, $ = t && !i;
+  return /* @__PURE__ */ h(V, { children: [/* @__PURE__ */ h("div", {
+    ref: j,
     "data-testid": `${r}-shell`,
     style: { height: 40 },
     className: f("group relative flex w-32 shrink-0 items-center gap-1.5 rounded px-3 text-base", c ? "cursor-not-allowed text-delta-300" : "text-delta-800"),
     children: [/* @__PURE__ */ n("span", {
       "aria-hidden": "true",
       className: f(U({
-        focused: P || S,
+        focused: R || $,
         disabled: c,
         notched: !1
-      }), O)
-    }), S ? /* @__PURE__ */ i("span", {
+      }), B)
+    }), $ ? /* @__PURE__ */ h("span", {
       className: "relative z-[1] flex w-full items-center gap-1.5",
       children: [
-        h?.(s, "eager"),
+        x?.(s, "eager"),
         /* @__PURE__ */ n("input", {
-          ref: y,
+          ref: v,
           role: "combobox",
           "data-testid": `${r}-search`,
           className: "w-12 min-w-0 border-0 bg-transparent p-0 text-base outline-none",
-          value: x,
-          placeholder: k,
-          onChange: (o) => a(o.target.value),
-          onKeyDown: e.handleKeyDown,
+          value: b,
+          placeholder: D,
+          onChange: (e) => a(e.target.value),
+          onKeyDown: o.handleKeyDown,
           "aria-controls": l,
           "aria-expanded": !0,
-          "aria-activedescendant": D["aria-activedescendant"],
+          "aria-activedescendant": S["aria-activedescendant"],
           "aria-autocomplete": "list",
           "aria-haspopup": "listbox",
           onFocus: () => u(!0),
@@ -83,76 +95,71 @@ var re = ({ dataTest: r, countries: g, value: s, onChange: A, disabled: c, selec
           tabIndex: -1,
           "aria-hidden": "true",
           "aria-expanded": !0,
-          onClick: e.dismiss,
+          onClick: o.dismiss,
           className: "ml-auto flex shrink-0 cursor-pointer border-0 bg-transparent p-0 outline-none focus:shadow-none focus:outline-none focus:ring-0",
-          children: /* @__PURE__ */ n($, {
+          children: /* @__PURE__ */ n(F, {
             width: 20,
             height: 20,
             className: "flip-180"
           })
         })
       ]
-    }) : /* @__PURE__ */ i("button", {
-      ref: v,
+    }) : /* @__PURE__ */ h("button", {
+      ref: I,
       type: "button",
       "data-testid": r,
       disabled: c,
-      "aria-haspopup": "listbox",
+      "aria-haspopup": i ? "dialog" : "listbox",
       "aria-expanded": t,
       "aria-controls": t ? l : void 0,
-      "aria-labelledby": F,
+      "aria-labelledby": E,
       role: "combobox",
       onClick: () => d(!0),
-      onKeyDown: (o) => {
-        o.key !== "ArrowDown" && o.key !== "ArrowUp" || (o.preventDefault(), e.openWithKeyboard(o.key === "ArrowUp" ? -1 : 1), d(!0));
+      onKeyDown: (e) => {
+        e.key !== "ArrowDown" && e.key !== "ArrowUp" || (e.preventDefault(), o.openWithKeyboard(e.key === "ArrowUp" ? -1 : 1), d(!0));
       },
       onFocus: () => u(!0),
       onBlur: () => u(!1),
       className: f("relative z-[1] flex w-full items-center gap-1.5 border-0 bg-transparent p-0 text-base outline-none focus:shadow-none focus:outline-none focus:ring-0", c ? "cursor-not-allowed text-delta-300" : "cursor-pointer text-delta-800"),
       children: [
-        h?.(s, "eager"),
+        x?.(s, "eager"),
         /* @__PURE__ */ n("span", {
           className: "w-12 text-left",
-          children: k
+          children: D
         }),
-        /* @__PURE__ */ n($, {
+        /* @__PURE__ */ n(F, {
           width: 20,
           height: 20,
           className: f("ml-auto shrink-0 transition-transform", t && "flip-180")
         })
       ]
     })]
-  }), p ? /* @__PURE__ */ n(z, {
+  }), i ? /* @__PURE__ */ n(L, {
     open: t,
-    onClose: e.dismiss,
+    onClose: o.dismiss,
     dataTest: `${r}-dialog`,
-    dialogTitle: w,
-    showCloseIcon: !0,
-    fullWidth: !0,
-    children: /* @__PURE__ */ i("div", {
-      className: "flex min-h-0 flex-1 flex-col",
-      children: [/* @__PURE__ */ n("div", {
-        className: "shrink-0 p-4",
-        children: /* @__PURE__ */ n(W, {
-          dataTest: `${r}-search`,
-          label: E,
-          value: x,
-          onChange: (o) => a(o.target.value),
-          onClear: () => a(""),
-          onKeyDown: e.handleKeyDown,
-          slotProps: { htmlInput: D }
-        })
-      }), N]
-    })
+    title: g,
+    closeLabel: "Close",
+    search: /* @__PURE__ */ n(q, {
+      dataTest: `${r}-search`,
+      label: A,
+      value: b,
+      fullWidth: !0,
+      onChange: (e) => a(e.target.value),
+      onClear: () => a(""),
+      onKeyDown: K,
+      slotProps: { htmlInput: S }
+    }),
+    children: N(!0)
   }) : /* @__PURE__ */ n(Q, {
     open: t,
-    anchorEl: B,
-    onClose: e.dismiss,
+    anchorEl: W,
+    onClose: o.dismiss,
     tabIntoContent: !1,
     slotProps: { paper: { className: "flex max-h-80 w-80 flex-col overflow-hidden py-2" } },
-    children: N
+    children: N(!1)
   })] });
 };
 export {
-  re as CountryCodeSelect
+  ae as CountryCodeSelect
 };

package/dist/components/inputs/select-autocomplete/SelectAutocompletePicker.js

@@ -0,0 +1,217 @@
+import { cn as re } from "../../../helpers/cn.js";
+import { StyledCheckbox as Ne } from "../checkbox/base-ui/StyledCheckbox.js";
+import { StyledButton as K } from "../button/StyledButton.js";
+import { StyledSearchField as De } from "../search-field/StyledSearchField.js";
+import { useAnnouncer as $e } from "../full-screen-picker/PickerLiveRegion.js";
+import { nextActiveIndex as Se } from "./listboxCursor.js";
+import { FullScreenPicker as Ie } from "../full-screen-picker/FullScreenPicker.js";
+import { useEffect as ee, useMemo as _e, useRef as Me, useState as v } from "react";
+import { jsx as o, jsxs as b } from "react/jsx-runtime";
+var F = 50, Re = 500, le = "px-3 py-2 text-sm text-delta-600", te = "[&>div]:px-0";
+function Oe({ open: r, dataTest: t, listboxId: u, title: D, name: g, text: a, options: f, multiple: i, value: h, clearable: j, isEqual: x, isOptionDisabled: B, getLabel: E, getOptionKey: H, filterOptions: $, renderOptionRow: ne, optionRowClassName: W, loading: U, loadingText: oe, noOptionsText: ae, allowSelectAll: se, selectAllLabel: ce, onSelect: ie, onClear: de, onApply: ue, onCancel: fe }) {
+  const [s, S] = v(""), [n, p] = v(null), [c, z] = v([]), [me, he] = v(!1), [pe, we] = v(!1), [ke, I, ye] = $e();
+  r !== pe && (we(r), r && (S(""), p(null), z(Array.isArray(h) ? [...h] : []), he(!i && j && h !== null && !Array.isArray(h)), ye()));
+  const _ = Me([]), O = i ? null : h, Q = (e) => i ? c.some((l) => x(e, l)) : O !== null && x(e, O), m = _e(() => {
+    const e = [...f];
+    if ($) return $(e, { inputValue: s });
+    const l = s.trim().toLowerCase();
+    return l ? e.filter((y) => E(y).toLowerCase().includes(l)) : e;
+  }, [
+    f,
+    s,
+    $
+  ]), d = m.slice(0, F), M = !!(se && i), w = M ? [-1, ...d.map((e, l) => l)] : d.map((e, l) => l), k = d.findIndex(Q), { noMatches: Y, matchCount: G } = a;
+  ee(() => {
+    if (s === "") return;
+    const e = window.setTimeout(() => I(m.length === 0 ? Y : G(m.length)), Re);
+    return () => window.clearTimeout(e);
+  }, [
+    I,
+    m.length,
+    s,
+    Y,
+    G
+  ]), ee(() => {
+    r && k >= 0 && _.current[k]?.scrollIntoView({ block: "nearest" });
+  }, [r]);
+  const R = (e) => {
+    p(e), e !== null && e >= 0 && _.current[e]?.scrollIntoView({ block: "nearest" });
+  }, L = (e, l = a.selectedCount(e.length)) => {
+    z(e), I(l);
+  }, Ce = (e) => {
+    L(c.some((l) => x(e, l)) ? c.filter((l) => !x(e, l)) : [...c, e]);
+  }, A = f.length > 0 && c.length === f.length, J = () => L(A ? [] : [...f]), X = (e, l, y = !0) => {
+    B(l) || (i ? Ce(l) : ie(e, l, y));
+  }, P = (e, l) => {
+    n === -1 ? J() : n !== null && d[n] !== void 0 && X(e, d[n], l);
+  }, Z = (e) => {
+    e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), R(Se(w, n, k, e.key === "ArrowDown" ? 1 : -1))) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), R(w[e.key === "Home" ? 0 : w.length - 1] ?? null)) : e.key === "Enter" ? (e.preventDefault(), P(e, !0)) : e.key === " " && s === "" && n !== null && (e.preventDefault(), P(e, !1));
+  }, ve = (e) => {
+    if (e.key !== " ") {
+      Z(e);
+      return;
+    }
+    e.preventDefault(), P(e, !1);
+  }, be = () => {
+    n === null && R(k >= 0 ? k : w[0] ?? null);
+  }, q = (e) => `${t}-option-${e}`;
+  let N;
+  n === -1 && M ? N = `${t}-select-all` : n !== null && d[n] !== void 0 && (N = q(n));
+  const ge = (e, l) => {
+    const y = B(e), T = Q(e);
+    return ne({
+      key: H ? String(H(e)) : `${E(e)}-${l}`,
+      ref: (C) => {
+        _.current[l] = C;
+      },
+      role: "option",
+      id: q(l),
+      "aria-selected": T,
+      "aria-disabled": y || void 0,
+      "data-active": n === l ? "" : void 0,
+      className: W,
+      onMouseDown: (C) => C.preventDefault(),
+      onClick: (C) => X(C, e),
+      onMouseMove: () => p(null)
+    }, e, {
+      selected: T,
+      index: l,
+      inputValue: s,
+      inPicker: !0
+    });
+  }, xe = r ? U ? /* @__PURE__ */ o("li", {
+    role: "presentation",
+    className: le,
+    children: oe
+  }) : d.length === 0 ? /* @__PURE__ */ o("li", {
+    role: "presentation",
+    className: le,
+    "data-testid": `${t}-picker-empty`,
+    children: s === "" ? ae : a.noMatches
+  }) : d.map(ge) : null, Ae = /* @__PURE__ */ o(De, {
+    dataTest: `${t}-picker-search`,
+    label: a.search,
+    value: s,
+    fullWidth: !0,
+    onChange: (e) => {
+      S(e.target.value), p(null);
+    },
+    onClear: () => {
+      S(""), p(null);
+    },
+    onKeyDown: Z,
+    autoComplete: "off",
+    slotProps: { htmlInput: {
+      role: "combobox",
+      "aria-controls": u,
+      "aria-expanded": !0,
+      "aria-activedescendant": N,
+      "aria-autocomplete": "list"
+    } }
+  });
+  let V;
+  return i ? V = /* @__PURE__ */ o(Le, {
+    dataTest: t,
+    count: a.selectedCount(c.length),
+    clearAllLabel: j ? a.clearAll : void 0,
+    clearAllShown: c.length > 0,
+    doneLabel: a.done,
+    onClearAll: () => L([], a.clearedAll),
+    onDone: (e) => ue(e, c)
+  }) : me && (V = /* @__PURE__ */ o(Pe, {
+    dataTest: t,
+    label: a.clearOne,
+    onClear: de
+  })), /* @__PURE__ */ b(Ie, {
+    open: r,
+    onClose: fe,
+    dataTest: `${t}-picker`,
+    title: D,
+    fallbackName: g,
+    closeLabel: a.close,
+    search: Ae,
+    headerRow: V,
+    announcement: ke,
+    children: [/* @__PURE__ */ b("ul", {
+      id: u,
+      role: "listbox",
+      "aria-label": g,
+      "aria-multiselectable": i || void 0,
+      tabIndex: 0,
+      "aria-activedescendant": N,
+      onKeyDown: ve,
+      onFocus: be,
+      className: re("m-0 list-none p-0 [&>li:not(:last-child)]:shadow-[inset_0_-1px_0_var(--colors-delta-200)]", w.length > 0 && "outline-none", "[&>li[role=option]]:pr-4 [&>li[role=option]]:text-delta-700", i ? "[&>li[aria-selected=true]:not(:hover)]:bg-white" : "[&>li[aria-selected=true]:not([aria-disabled=true])]:bg-gama-25 [&>li[role=option]]:gap-x-1 [&>li[role=option]]:pl-2"),
+      children: [M && /* @__PURE__ */ b("li", {
+        id: `${t}-select-all`,
+        role: "option",
+        "aria-selected": A,
+        "data-active": n === -1 ? "" : void 0,
+        tabIndex: -1,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: J,
+        className: W,
+        children: [
+          n === -1 && /* @__PURE__ */ o("span", {
+            "aria-hidden": "true",
+            className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
+          }),
+          /* @__PURE__ */ o(Ne, {
+            dataTest: `${t}-picker-select-all`,
+            checked: A,
+            indeterminate: c.length > 0 && !A,
+            size: "medium",
+            checkboxClassName: "!h-4 !w-4",
+            hideWrapper: !0,
+            decorative: !0
+          }),
+          /* @__PURE__ */ o("span", {
+            className: "min-w-0 flex-1 break-words",
+            children: ce
+          })
+        ]
+      }), xe]
+    }), !U && m.length > F && /* @__PURE__ */ o("p", {
+      className: "m-0 px-3 py-2 text-sm text-delta-600",
+      "data-testid": `${t}-picker-truncated`,
+      children: a.truncated(F, m.length)
+    })]
+  });
+}
+var Le = ({ dataTest: r, count: t, clearAllLabel: u, clearAllShown: D, doneLabel: g, onClearAll: a, onDone: f }) => /* @__PURE__ */ b("div", {
+  className: "flex items-center justify-between gap-6 px-4 py-2",
+  "data-testid": `${r}-picker-selection-row`,
+  children: [/* @__PURE__ */ b("div", {
+    className: "flex min-w-0 flex-wrap items-center gap-x-1",
+    children: [/* @__PURE__ */ o("span", {
+      className: "text-base text-delta-600",
+      "data-testid": `${r}-picker-count`,
+      children: t
+    }), u !== void 0 && /* @__PURE__ */ o(K, {
+      dataTest: `${r}-picker-clear-all`,
+      variant: "text",
+      className: re(te, !D && "invisible"),
+      onClick: a,
+      children: u
+    })]
+  }), /* @__PURE__ */ o(K, {
+    dataTest: `${r}-picker-done`,
+    variant: "contained",
+    className: "shrink-0 whitespace-nowrap",
+    onClick: f,
+    children: g
+  })]
+}), Pe = ({ dataTest: r, label: t, onClear: u }) => /* @__PURE__ */ o("div", {
+  className: "flex px-4 py-2",
+  "data-testid": `${r}-picker-clear-row`,
+  children: /* @__PURE__ */ o(K, {
+    dataTest: `${r}-picker-clear`,
+    variant: "text",
+    className: te,
+    onClick: u,
+    children: t
+  })
+});
+export {
+  Oe as SelectAutocompletePicker
+};