asma-ui-core 3.80.3 → 3.81.1

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

@@ -0,0 +1,39 @@
+import { cn as i } from "../../../helpers/cn.js";
+import { StyledSelectItem as u } from "../select/StyledSelectItem.js";
+import { useEffect as x, useRef as N } from "react";
+import { jsx as l, jsxs as o } from "react/jsx-runtime";
+var j = ({ dataTest: m, visible: n, selectedIso2: d, activeIndex: s, optionId: r, onSelect: c, listId: f, label: p, renderFlag: b, className: h }) => {
+  const a = N(null);
+  return x(() => {
+    a.current?.querySelector(`#${CSS.escape(r(s))}`)?.scrollIntoView({ block: "nearest" });
+  }), /* @__PURE__ */ l("ul", {
+    ref: a,
+    id: f,
+    role: "listbox",
+    "aria-label": p,
+    "data-testid": `${m}-listbox`,
+    className: i("m-0 min-h-0 flex-1 list-none overflow-y-auto p-0", h),
+    children: n.map((e, t) => /* @__PURE__ */ l(u, {
+      id: r(t),
+      selected: e.iso2 === d,
+      onClick: () => c(e.iso2),
+      className: i("border-0 border-b border-solid border-delta-100", t === s && "bg-delta-50"),
+      children: /* @__PURE__ */ o("span", {
+        className: "flex w-full items-center justify-between gap-2",
+        children: [/* @__PURE__ */ o("span", {
+          className: "flex min-w-0 items-center gap-2",
+          children: [b?.(e.iso2, "eager"), /* @__PURE__ */ l("span", {
+            className: "truncate",
+            children: e.name
+          })]
+        }), /* @__PURE__ */ l("span", {
+          className: "shrink-0 font-medium text-delta-800",
+          children: `+${e.dialCode}`
+        })]
+      })
+    }, e.iso2))
+  });
+};
+export {
+  j as CountryCodeOptions
+};

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

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

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

@@ -0,0 +1,25 @@
+import { cn as t } from "../../../helpers/cn.js";
+import { useState as c } from "react";
+import { jsx as a } from "react/jsx-runtime";
+var h = ({ iso2: r, src: o, loading: n = "lazy", className: d }) => {
+  const [s, i] = c(!1), e = t("h-4 w-6 shrink-0 rounded-sm bg-delta-100", d);
+  return s ? /* @__PURE__ */ a("span", {
+    "aria-hidden": "true",
+    "data-country": r.toLowerCase(),
+    className: e
+  }) : /* @__PURE__ */ a("img", {
+    src: o,
+    "data-country": r.toLowerCase(),
+    alt: "",
+    "aria-hidden": "true",
+    loading: n,
+    decoding: "async",
+    width: 24,
+    height: 16,
+    onError: () => i(!0),
+    className: t(e, "object-cover")
+  });
+};
+export {
+  h as StyledCountryFlag
+};

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

@@ -0,0 +1,74 @@
+import { cn as L } from "../../../helpers/cn.js";
+import { StyledInputField as M } from "../input-field/StyledInputField.js";
+import { StyledLink as V } from "../../navigation/link/StyledLink.js";
+import { CountryCodeSelect as W } from "./CountryCodeSelect.js";
+import { useId as z } from "react";
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+var E = (e) => e.replace(/\D/g, ""), U = ({ dataTest: e, label: l, countries: h, country: n, onCountryChange: x, value: s, onChange: f, onBlur: N, error: v, helperText: y, reserveHelperText: g = !0, disabled: d, readOnly: $, readOnlyText: i, readOnlyHref: m, required: c, placeholder: b, formatNationalNumber: I, renderFlag: C, selectCountryLabel: S, searchPlaceholder: F, id: j, name: P, size: k = "medium", fieldClassName: p, helperTextClassName: w, className: A }) => {
+  const B = z(), a = j ?? `${B}-phone`, u = `${a}-label`, o = I?.(s, n) ?? s;
+  return /* @__PURE__ */ r("div", {
+    className: L("flex flex-col", A),
+    "data-testid": `${e}-root`,
+    children: [l != null && /* @__PURE__ */ r("label", {
+      id: u,
+      htmlFor: a,
+      className: "pb-1 text-base font-semibold text-delta-800",
+      children: [l, c === !0 && /* @__PURE__ */ t("span", {
+        "aria-hidden": "true",
+        children: " *"
+      })]
+    }), $ === !0 ? /* @__PURE__ */ t("span", {
+      className: "py-2 text-base text-delta-800",
+      children: m === void 0 ? /* @__PURE__ */ t("span", {
+        "data-testid": `${e}-readonly`,
+        children: i ?? o
+      }) : /* @__PURE__ */ t(V, {
+        dataTest: `${e}-readonly`,
+        href: m,
+        className: "-ml-1",
+        contentNode: i ?? o
+      })
+    }) : /* @__PURE__ */ r("div", {
+      className: "flex items-start gap-2.5",
+      children: [/* @__PURE__ */ t(W, {
+        dataTest: `${e}-country`,
+        countries: h,
+        value: n,
+        onChange: x,
+        disabled: d,
+        selectCountryLabel: S,
+        searchPlaceholder: F,
+        renderFlag: C,
+        labelledBy: l == null ? void 0 : u,
+        className: p
+      }), /* @__PURE__ */ t(M, {
+        dataTest: `${e}-number`,
+        className: "max-w-[200px]",
+        id: a,
+        name: P,
+        value: o,
+        onChange: (D) => f(E(D.target.value)),
+        onBlur: N,
+        placeholder: b,
+        error: v,
+        disabled: d,
+        required: c,
+        fullWidth: !0,
+        helperText: y,
+        reserveHelperText: g,
+        size: k,
+        slotProps: {
+          htmlInput: {
+            inputMode: "tel",
+            autoComplete: "tel"
+          },
+          input: { className: p },
+          formHelperText: { className: w }
+        }
+      })]
+    })]
+  });
+};
+export {
+  U as StyledPhoneField
+};

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

@@ -0,0 +1,55 @@
+import { useMemo as m, useState as v } from "react";
+function D(r, i) {
+  const n = i.trim();
+  if (n.length === 0) return !0;
+  const s = n.replace(/^\+/, "").replace(/\D/g, "");
+  return s.length === 0 && !new RegExp("\\p{L}", "u").test(n) || r.name.toLocaleLowerCase().includes(n.toLocaleLowerCase()) ? !0 : s.length > 0 && r.dialCode.startsWith(s);
+}
+function b({ countries: r, selectedIso2: i, query: n, listId: s, onSelect: f, onDismiss: d }) {
+  const [p, a] = v(i), o = m(() => r.filter((e) => D(e, n)), [r, n]), l = o.findIndex((e) => e.iso2 === p), c = l >= 0 ? l : 0, h = (e) => `${s}-option-${e}`, u = (e) => {
+    if (o.length === 0) return;
+    const t = o[(c + e + o.length) % o.length];
+    t !== void 0 && a(t.iso2);
+  };
+  return {
+    visible: o,
+    activeIndex: c,
+    optionId: h,
+    handleKeyDown: (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), u(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), u(-1);
+          break;
+        case "Home": {
+          e.preventDefault();
+          const t = o[0];
+          t !== void 0 && a(t.iso2);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          const t = o[o.length - 1];
+          t !== void 0 && a(t.iso2);
+          break;
+        }
+        case "Enter": {
+          e.preventDefault();
+          const t = o[c];
+          t !== void 0 && f(t.iso2);
+          break;
+        }
+        case "Escape":
+          e.preventDefault(), d();
+          break;
+        default:
+          break;
+      }
+    }
+  };
+}
+export {
+  b as useCountryPicker
+};

package/dist/components/inputs/search-field/StyledSearchField.js

@@ -1,49 +1,52 @@
 import { cn as p } from "../../../helpers/cn.js";
-import { SearchIcon as m } from "../../icons/search-icon/SearchIcon.js";
+import { SearchIcon as u } from "../../icons/search-icon/SearchIcon.js";
 import { CloseIcon as f } from "../../icons/close-icon/CloseIcon.js";
-import { StyledInputField as u } from "../input-field/StyledInputField.js";
-import { useState as v } from "react";
+import { StyledInputField as v } from "../input-field/StyledInputField.js";
+import { useState as y } from "react";
 import { jsx as t } from "react/jsx-runtime";
-var I = ({ value: o, onClear: s, label: i, onFocus: d, onBlur: c, ...r }) => {
-  const [h, l] = v(!1), a = h || o, n = typeof i == "string" ? i : void 0;
+var F = ({ value: r, onClear: d, label: a, onFocus: c, onBlur: h, slotProps: o, ...n }) => {
+  const [m, l] = y(!1), i = m || r, s = typeof a == "string" ? a : void 0;
   return /* @__PURE__ */ t("div", {
     className: "relative w-full",
-    children: /* @__PURE__ */ t(u, {
+    children: /* @__PURE__ */ t(v, {
       size: "small",
       variant: "outlined",
-      value: o,
+      value: r,
       reserveHelperText: !1,
-      label: a ? i : void 0,
-      placeholder: a ? void 0 : n,
+      label: i ? a : void 0,
+      placeholder: i ? void 0 : s,
       onFocus: (e) => {
-        l(!0), d?.(e);
+        l(!0), c?.(e);
       },
       onBlur: (e) => {
-        l(!1), c?.(e);
+        l(!1), h?.(e);
       },
       slotProps: {
+        ...o,
         htmlInput: {
+          "aria-label": i ? void 0 : s,
+          ...o?.htmlInput,
           style: {
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
-            ...o ? { paddingRight: 40 } : {}
-          },
-          "aria-label": a ? void 0 : n
+            ...r ? { paddingRight: 40 } : {},
+            ...o?.htmlInput?.style
+          }
         },
         input: {
-          endAdornment: o ? /* @__PURE__ */ t("button", {
+          endAdornment: r ? /* @__PURE__ */ t("button", {
             type: "button",
             "aria-label": "Clear",
             "data-testid": "styled-search-clear-icon",
-            className: p("cursor-pointer rounded-full border-0 bg-delta-50", "flex items-center justify-center", "transform-gpu transition-all duration-300 ease-in-out", o ? "scale-100 opacity-100" : "pointer-events-none scale-75 opacity-0", r.readOnly && "-translate-x-[6.5px]"),
+            className: p("cursor-pointer rounded-full border-0 bg-delta-50", "flex items-center justify-center", "transform-gpu transition-all duration-300 ease-in-out", r ? "scale-100 opacity-100" : "pointer-events-none scale-75 opacity-0", n.readOnly && "-translate-x-[6.5px]"),
             style: {
               width: 24,
               height: 24,
               flexShrink: 0
             },
             onClick: (e) => {
-              e.preventDefault(), e.stopPropagation(), s?.();
+              e.preventDefault(), e.stopPropagation(), d?.();
             },
             children: /* @__PURE__ */ t(f, {
               width: 20,
@@ -52,26 +55,27 @@ var I = ({ value: o, onClear: s, label: i, onFocus: d, onBlur: c, ...r }) => {
               className: "pointer-events-none"
             })
           }) : null,
-          startAdornment: a ? void 0 : /* @__PURE__ */ t("span", {
+          startAdornment: i ? void 0 : /* @__PURE__ */ t("span", {
             "data-testid": "styled-search-icon",
             className: "flex items-center",
-            children: /* @__PURE__ */ t(m, {
+            children: /* @__PURE__ */ t(u, {
               width: 24,
               height: 24,
               color: "var(--colors-delta-700)",
               className: "pointer-events-none"
             })
-          })
+          }),
+          ...o?.input
         }
       },
-      ...r,
+      ...n,
       sx: {
-        width: r.fullWidth ? "100%" : "var(--dynamic-toolbar-search-width, 160px)",
-        ...r.sx
+        width: n.fullWidth ? "100%" : "var(--dynamic-toolbar-search-width, 160px)",
+        ...n.sx
       }
     })
   });
 };
 export {
-  I as StyledSearchField
+  F as StyledSearchField
 };