@wix/form-elements 0.0.0-stage → 1.53.0

package/dist/component/multiline-address-rac-BuIrCxJO.js

@@ -0,0 +1,6 @@
+import e from "react";
+import { M as t } from "./multiline-address-field-rac-C0PUrp9n.js";
+const i = () => /* @__PURE__ */ e.createElement(t, null);
+export {
+  i as MultilineAddressRAC
+};

package/dist/component/non-modal-popover-DtIMXHbe.js

@@ -0,0 +1,63 @@
+import u, { forwardRef as f, useContext as i, useRef as p, useEffect as R, createContext as B } from "react";
+import { useObjectRef as D, useInteractOutside as I } from "react-aria";
+import { OverlayTriggerStateContext as P, useSlottedContext as S, PopoverContext as b, Popover as N, Button as T } from "react-aria-components";
+const x = /* @__PURE__ */ B(null), k = (e) => e != null && e.matches("[aria-haspopup]") ? e : e == null ? void 0 : e.querySelector("[aria-haspopup]"), m = /* @__PURE__ */ f((e, r) => {
+  var l;
+  const t = D(r), n = i(P), o = (l = S(b)) == null ? void 0 : l.triggerRef, s = i(x), c = p(0), O = p(!1), a = n == null ? void 0 : n.isOpen;
+  R(() => {
+    if (!(!a || !t.current || !s))
+      return s.current += 1, () => {
+        s.current -= 1;
+      };
+  }, [
+    a,
+    t,
+    s
+  ]);
+  const h = (d) => {
+    var C;
+    return !((C = k(o == null ? void 0 : o.current)) != null && C.contains(d));
+  };
+  return I({
+    ref: t,
+    isDisabled: !a,
+    onInteractOutsideStart: () => {
+      O.current = c.current > 0;
+    },
+    onInteractOutside: (d) => {
+      !O.current && h(d.target) && (n == null || n.close());
+    }
+  }), /* @__PURE__ */ u.createElement(x.Provider, {
+    value: c
+  }, /* @__PURE__ */ u.createElement(N, {
+    ...e,
+    ref: t,
+    isNonModal: !0,
+    shouldCloseOnInteractOutside: h
+  }));
+}), q = /* @__PURE__ */ f((e, r) => {
+  const t = i(P), n = (o) => {
+    var c;
+    (c = e.onPressStart) == null || c.call(e, o), o.pointerType !== "touch" && o.pointerType !== "keyboard" && (t != null && t.isOpen) && t.close();
+  };
+  return /* @__PURE__ */ u.createElement(T, {
+    ...e,
+    ref: r,
+    onPressStart: n
+  });
+}), v = /* @__PURE__ */ f((e, r) => {
+  const t = i(P), n = (o) => {
+    var s;
+    (s = e.onPress) == null || s.call(e, o), t != null && t.isOpen && t.close();
+  };
+  return /* @__PURE__ */ u.createElement(T, {
+    ...e,
+    ref: r,
+    onPress: n
+  });
+});
+export {
+  v as D,
+  m as N,
+  q as S
+};

package/dist/component/number-input-field-rac-DY3hBv5k.js

@@ -0,0 +1,89 @@
+import { RicosViewer as v } from "@wix/ricos/viewer";
+import m from "classnames";
+import r, { useState as U, useCallback as H, useEffect as Q, useRef as $ } from "react";
+import { NumberField as j, Input as z } from "react-aria-components";
+import { ag as C, ad as S, aq as G, ai as J } from "./form-Dn-MrArr.js";
+import { f as d } from "./find-child-C60k4CxG.js";
+import { D as K, E as W } from "./field-error-headless-D40GACk4.js";
+import { L as X } from "./field-label-headless-Beq2Tn6V.js";
+import { g as Y, c as Z } from "./numeric-input-utils-CuBMi4-a.js";
+import { u as w } from "./use-invoke-callback-UH73A_J3.js";
+import { E as ee } from "./error-icon-hZxQ6DEy.js";
+import { s as i } from "./field-rac.module-DXfwku6m.js";
+import { r as re, H as te, q as ne, l as ae, h as se } from "./form-element-classes-Bi-nNM8q.js";
+const e = ({ children: n }) => {
+  var D, L, R;
+  const { id: a, value: s, onChange: l, disabled: p, required: E, readOnly: o, onBlur: b, onFocus: f, FieldLayout: u, hasError: c, validation: t } = C(), { labelId: A } = S(), F = ((D = t == null ? void 0 : t.number) == null ? void 0 : D.multipleOf) || 1, q = (L = t == null ? void 0 : t.number) == null ? void 0 : L.maximum, y = (R = t == null ? void 0 : t.number) == null ? void 0 : R.minimum, g = _(s), [h, I] = U(g), M = w(b), T = d(n, e.Label), V = d(n, e.Input), x = d(n, e.Description), k = d(n, e.Error), B = H((N) => {
+    if (N === void 0 || Number.isNaN(N)) {
+      l(""), I(NaN);
+      return;
+    }
+    const P = Y(F), O = Number(N.toFixed(P));
+    l(O), I(O);
+  }, [
+    F,
+    l
+  ]);
+  return Q(() => {
+    I(_(s));
+  }, [
+    s
+  ]), /* @__PURE__ */ r.createElement(u, {
+    fieldId: a,
+    renderLabel: () => T,
+    renderInput: () => /* @__PURE__ */ r.createElement(j, {
+      "aria-labelledby": A,
+      value: h,
+      onChange: B,
+      isDisabled: p,
+      isRequired: E,
+      isReadOnly: o,
+      isInvalid: c,
+      onBlur: M,
+      onFocus: f,
+      minValue: y ?? void 0,
+      maxValue: q ?? void 0
+    }, V),
+    renderDescription: () => /* @__PURE__ */ r.createElement(r.Fragment, null, k, x)
+  });
+}, le = ({ className: n }) => {
+  var c;
+  const { t: a } = G(), { inputId: s, ariaDescribedBy: l } = S(), { id: p, placeholder: E, validation: o, label: b, required: f } = C();
+  (c = o == null ? void 0 : o.number) != null && c.multipleOf;
+  const u = $(null);
+  return J(() => {
+    var t;
+    (t = u.current) == null || t.focus();
+  }, p), /* @__PURE__ */ r.createElement(z, {
+    ref: u,
+    id: s,
+    "aria-describedby": l,
+    "aria-label": b,
+    "aria-roledescription": a("field.number.aria-role-description"),
+    className: n,
+    inputMode: "decimal",
+    placeholder: E,
+    required: f
+  });
+};
+e.Label = X;
+e.Input = le;
+e.Description = K;
+e.Error = W;
+const _ = (n) => Z(n) ?? NaN, oe = ({ content: n, locale: a }) => /* @__PURE__ */ r.createElement(v, {
+  content: n,
+  locale: a
+}), Le = () => /* @__PURE__ */ r.createElement(e, null, /* @__PURE__ */ r.createElement(e.Label, {
+  className: m(re, i.label)
+}, /* @__PURE__ */ r.createElement(e.Label.Required, {
+  className: m(te, i.requiredMark)
+})), /* @__PURE__ */ r.createElement(e.Input, {
+  className: m(ne, i.input)
+}), /* @__PURE__ */ r.createElement(e.Error, {
+  className: m(ae, i.error)
+}, /* @__PURE__ */ r.createElement(ee, null), /* @__PURE__ */ r.createElement(e.Error.Text, null)), /* @__PURE__ */ r.createElement(e.Description, {
+  className: m(se, i.description)
+}, oe));
+export {
+  Le as N
+};

package/dist/component/number-input-rac-LU2RRhXv.js

@@ -0,0 +1,6 @@
+import e from "react";
+import { N as r } from "./number-input-field-rac-DY3hBv5k.js";
+const n = () => /* @__PURE__ */ e.createElement(r, null);
+export {
+  n as NumberInputRAC
+};

package/dist/component/numeric-input-utils-CuBMi4-a.js

@@ -0,0 +1,45 @@
+const c = (e) => `^-?\\d*(\\.\\d{0,${o(e)}})?$`, o = (e) => {
+  var n, t;
+  return ((t = (n = String(e).split(".")) == null ? void 0 : n[1]) == null ? void 0 : t.length) || 0;
+}, l = (e, n, t, a) => {
+  if (e.trim() === "")
+    return {
+      validInput: "",
+      validNumber: void 0
+    };
+  const r = i(e);
+  return u(r, n) && r !== void 0 && r < Number.MAX_SAFE_INTEGER ? {
+    validInput: s(e, a),
+    validNumber: r
+  } : t ? {
+    validInput: t,
+    validNumber: i(t)
+  } : {
+    validInput: "",
+    validNumber: void 0
+  };
+}, d = (e) => {
+  var n;
+  return e ? (n = Intl.NumberFormat(e).formatToParts(1.1).find((t) => t.type === "decimal")) == null ? void 0 : n.value : void 0;
+}, s = (e, n) => {
+  const t = d(n);
+  return t ? e.replace(/[.,]/, t) : e;
+}, u = (e, n) => {
+  const t = c(n);
+  return new RegExp(t).test(`${e}`);
+}, m = (e = "", n) => {
+  const t = d(n);
+  return t && t !== "." && t !== "," && (e = e.replace(t, ".")), e.replace(",", ".");
+}, i = (e) => {
+  if (e == null || e === "")
+    return;
+  const n = Number(m(String(e)));
+  return Number.isFinite(n) ? n : void 0;
+};
+export {
+  l as a,
+  s as b,
+  i as c,
+  o as g,
+  m as t
+};

package/dist/component/options-layout-constants-DEfIEJWD.js

@@ -0,0 +1,6 @@
+var T = /* @__PURE__ */ (function(r) {
+  return r[r.FREE_FLOW = 0] = "FREE_FLOW", r[r.ONE = 1] = "ONE", r[r.TWO = 2] = "TWO", r[r.THREE = 3] = "THREE", r;
+})({});
+export {
+  T as N
+};

package/dist/component/options-rac.module-KM-VT_KY.js

@@ -0,0 +1,7 @@
+const o = "_options_fhx2z_1", t = "_optionLabel_fhx2z_20", n = {
+  options: o,
+  optionLabel: t
+};
+export {
+  n as o
+};

package/dist/component/password-rac-CKUa-xXB.js

@@ -0,0 +1,142 @@
+import e, { useState as w, useRef as N } from "react";
+import { RicosViewer as O } from "@wix/ricos/viewer";
+import d from "classnames";
+import { TextField as x, Group as A, Input as B, Button as P } from "react-aria-components";
+import { ag as p, ad as I, ai as V, aq as v } from "./form-Dn-MrArr.js";
+import { f as E, a as g } from "./find-child-C60k4CxG.js";
+import { D as M, E as q } from "./field-error-headless-D40GACk4.js";
+import { L as k } from "./field-label-headless-Beq2Tn6V.js";
+import { E as U } from "./error-icon-hZxQ6DEy.js";
+import { H } from "./custom-focus-class-_483Pkwp.js";
+import { s as u } from "./field-rac.module-DXfwku6m.js";
+import { r as j, H as W, q as Z, l as G, h as Q } from "./form-element-classes-Bi-nNM8q.js";
+const t = ({ children: r, className: o }) => {
+  const { id: i, value: s, onChange: c, disabled: l, readOnly: m, required: n, hasError: a, onBlur: f, onFocus: _, FieldLayout: y } = p(), { labelId: C } = I(), [F, L] = w(!1), R = E(r, t.Label), D = E(r, t.Control), T = E(r, t.Description), S = E(r, t.Error);
+  return /* @__PURE__ */ e.createElement(y, {
+    fieldId: i,
+    renderLabel: () => R,
+    renderInput: () => /* @__PURE__ */ e.createElement(x, {
+      "aria-labelledby": C,
+      value: s ?? "",
+      onChange: c,
+      isDisabled: l,
+      isReadOnly: m,
+      isRequired: n,
+      isInvalid: a,
+      onBlur: f,
+      onFocus: _,
+      className: o
+    }, g(D, {
+      isVisible: F,
+      onToggleVisibility: () => L((h) => !h)
+    })),
+    renderDescription: () => /* @__PURE__ */ e.createElement(e.Fragment, null, T, S)
+  });
+}, $ = ({ children: r, className: o, ...i }) => {
+  const { isVisible: s, onToggleVisibility: c } = i, { disabled: l, hasError: m } = p(), n = E(r, t.Input), a = E(r, t.Toggle);
+  return /* @__PURE__ */ e.createElement(A, {
+    className: o,
+    isDisabled: l,
+    isInvalid: m
+  }, g(n, {
+    isVisible: s
+  }), g(a, {
+    isVisible: s,
+    onToggleVisibility: c
+  }));
+}, z = ({ className: r, ...o }) => {
+  const { isVisible: i } = o, { id: s, placeholder: c } = p(), { inputId: l, ariaDescribedBy: m } = I(), n = N(null);
+  return V(() => {
+    var a;
+    (a = n.current) == null || a.focus();
+  }, s), /* @__PURE__ */ e.createElement(B, {
+    ref: n,
+    id: l,
+    type: i ? "text" : "password",
+    "aria-describedby": m,
+    className: r,
+    placeholder: c
+  });
+}, J = ({ className: r, showPasswordTooltipText: o, hidePasswordTooltipText: i, children: s, ...c }) => {
+  const { isVisible: l, onToggleVisibility: m } = c, { disabled: n } = p(), a = l ? i : o;
+  return /* @__PURE__ */ e.createElement(P, {
+    type: "button",
+    isDisabled: n,
+    onPress: m,
+    "aria-label": a,
+    "aria-pressed": l,
+    className: r
+  }, s == null ? void 0 : s({
+    isVisible: l
+  }));
+};
+t.Label = k;
+t.Control = $;
+t.Input = z;
+t.Toggle = J;
+t.Description = M;
+t.Error = q;
+const K = (r) => /* @__PURE__ */ e.createElement("svg", {
+  viewBox: "0 0 24 24",
+  width: "20",
+  height: "20",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  "aria-hidden": "true",
+  ...r
+}, /* @__PURE__ */ e.createElement("path", {
+  d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"
+}), /* @__PURE__ */ e.createElement("circle", {
+  cx: "12",
+  cy: "12",
+  r: "3"
+})), X = (r) => /* @__PURE__ */ e.createElement("svg", {
+  viewBox: "0 0 24 24",
+  width: "20",
+  height: "20",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  "aria-hidden": "true",
+  ...r
+}, /* @__PURE__ */ e.createElement("path", {
+  d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"
+}), /* @__PURE__ */ e.createElement("circle", {
+  cx: "12",
+  cy: "12",
+  r: "3"
+}), /* @__PURE__ */ e.createElement("line", {
+  x1: "3",
+  y1: "21",
+  x2: "21",
+  y2: "3"
+})), Y = "_control_1malj_1", ee = "_toggleButton_1malj_15", b = {
+  control: Y,
+  toggleButton: ee
+}, te = ({ content: r, locale: o }) => /* @__PURE__ */ e.createElement(O, {
+  content: r,
+  locale: o
+}), re = () => {
+  const { t: r } = v();
+  return /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement(t.Label, {
+    className: d(j, u.label)
+  }, /* @__PURE__ */ e.createElement(t.Label.Required, {
+    className: d(W, u.requiredMark)
+  })), /* @__PURE__ */ e.createElement(t.Control, {
+    className: d(Z, u.input, b.control)
+  }, /* @__PURE__ */ e.createElement(t.Input, {
+    className: d(u.innerInput, H)
+  }), /* @__PURE__ */ e.createElement(t.Toggle, {
+    className: b.toggleButton,
+    showPasswordTooltipText: r("forms.widget.modals.show-password-tooltip"),
+    hidePasswordTooltipText: r("forms.widget.modals.hide-password-tooltip")
+  }, ({ isVisible: o }) => o ? /* @__PURE__ */ e.createElement(X, null) : /* @__PURE__ */ e.createElement(K, null))), /* @__PURE__ */ e.createElement(t.Error, {
+    className: d(G, u.error)
+  }, /* @__PURE__ */ e.createElement(U, null), /* @__PURE__ */ e.createElement(t.Error.Text, null)), /* @__PURE__ */ e.createElement(t.Description, {
+    className: d(Q, u.description)
+  }, te));
+}, ge = () => /* @__PURE__ */ e.createElement(re, null);
+export {
+  ge as PasswordRAC
+};

package/dist/component/payment-field-utils-DobiK5Xh.js

@@ -0,0 +1,12 @@
+import { b as d } from "./numeric-input-utils-CuBMi4-a.js";
+const p = (o, a) => {
+  const l = o.replace(",", ".").match(/[\d.]+/);
+  if (!l)
+    return null;
+  const t = l[0], e = t.indexOf("."), i = e !== -1 && t.length > e + 2 ? t.substring(0, e + 3) : t, s = d(i, a), m = Number(s.replace(/,/g, "."));
+  return isNaN(m) ? null : s;
+}, b = (o, a) => a != null && a.code ? o(`locale-dataset.currencies.${a == null ? void 0 : a.code}`) : (a == null ? void 0 : a.sign) || "";
+export {
+  p as f,
+  b as g
+};

package/dist/component/payment-input-rac-4-nB0Dtf.js

@@ -0,0 +1,137 @@
+import r, { useCallback as V, useRef as j } from "react";
+import { RicosViewer as w } from "@wix/ricos/viewer";
+import i from "classnames";
+import { TextField as z, Group as J, Input as K } from "react-aria-components";
+import { ag as D, ad as S, aa as q, aq as W, ai as X } from "./form-Dn-MrArr.js";
+import { f as m } from "./find-child-C60k4CxG.js";
+import { D as Y, E as Z } from "./field-error-headless-D40GACk4.js";
+import { L as ee } from "./field-label-headless-Beq2Tn6V.js";
+import { f as R, g as re } from "./payment-field-utils-DobiK5Xh.js";
+import { u as te } from "./use-synced-display-value-DcAxdn3M.js";
+import { E as ne } from "./error-icon-hZxQ6DEy.js";
+import { H as ae } from "./custom-focus-class-_483Pkwp.js";
+import { s as u } from "./field-rac.module-DXfwku6m.js";
+import { r as se, H as oe, q as le, l as ce, h as ie } from "./form-element-classes-Bi-nNM8q.js";
+function ue(e, t) {
+  return {
+    productId: e.id,
+    price: t,
+    quantity: 1
+  };
+}
+function h(e) {
+  if (e == null || e === "")
+    return;
+  const t = Number(String(e).replace(/,/g, "."));
+  return Number.isNaN(t) ? void 0 : t;
+}
+const n = ({ children: e }) => {
+  var O, g, A, P;
+  const { id: t, value: a, onChange: s, disabled: p, readOnly: d, required: y, hasError: b, onBlur: o, onFocus: f, FieldLayout: x, validation: _ } = D(), { labelId: M, prefixId: G } = S(), { regionalFormat: c } = q(), N = (A = (g = (O = _ == null ? void 0 : _.predefined) == null ? void 0 : O.paymentOptions) == null ? void 0 : g.products) == null ? void 0 : A[0], C = (P = a == null ? void 0 : a.at(0)) == null ? void 0 : P.price, [F, I] = te({
+    sourceValue: C,
+    format: (l) => R(String(l ?? ""), c),
+    regionalFormat: c
+  }), $ = V(() => {
+    const l = R(F, c);
+    I(l || ""), o == null || o();
+  }, [
+    F,
+    c,
+    o,
+    I
+  ]), U = V((l) => {
+    I(l);
+    const L = h(R(l, c)), Q = h(C);
+    if (L !== Q) {
+      if (L === void 0) {
+        s(null);
+        return;
+      }
+      s([
+        ue(N, L)
+      ]);
+    }
+  }, [
+    s,
+    N,
+    c,
+    C,
+    I
+  ]), B = m(e, n.Label), H = m(e, n.Input), k = m(e, n.Description), v = m(e, n.Error);
+  return /* @__PURE__ */ r.createElement(x, {
+    fieldId: t,
+    renderLabel: () => B,
+    renderInput: () => /* @__PURE__ */ r.createElement(z, {
+      "aria-labelledby": `${M} ${G}`,
+      value: a ? F : "",
+      onChange: U,
+      isDisabled: p,
+      isReadOnly: d,
+      isRequired: y,
+      isInvalid: b,
+      onBlur: $,
+      onFocus: f
+    }, H),
+    renderDescription: () => /* @__PURE__ */ r.createElement(r.Fragment, null, v, k)
+  });
+}, E = ({ children: e, className: t }) => {
+  const { disabled: a, hasError: s } = D(), p = m(e, E.Currency), d = m(e, E.Value);
+  return /* @__PURE__ */ r.createElement(J, {
+    className: t,
+    isDisabled: a,
+    isInvalid: s
+  }, p, d);
+}, me = ({ className: e }) => {
+  const { currency: t } = q(), { t: a } = W(), { prefixId: s } = S();
+  return t ? /* @__PURE__ */ r.createElement("span", {
+    id: s,
+    "aria-hidden": !1,
+    "aria-label": re(a, t),
+    className: e
+  }, t.sign || t.code) : null;
+}, pe = ({ className: e }) => {
+  const { id: t, placeholder: a, label: s } = D(), { inputId: p, labelId: d, prefixId: y, ariaDescribedBy: b } = S(), o = j(null);
+  return X(() => {
+    var f;
+    (f = o.current) == null || f.focus();
+  }, t), /* @__PURE__ */ r.createElement(K, {
+    ref: o,
+    id: p,
+    className: e,
+    placeholder: a,
+    "aria-label": s,
+    "aria-labelledby": `${d} ${y}`,
+    "aria-describedby": b,
+    autoComplete: "off"
+  });
+};
+E.Currency = me;
+E.Value = pe;
+n.Label = ee;
+n.Input = E;
+n.Description = Y;
+n.Error = Z;
+const de = "_inputGroup_vuy4u_1", Ee = "_currency_vuy4u_14", T = {
+  inputGroup: de,
+  currency: Ee
+}, fe = ({ content: e, locale: t }) => /* @__PURE__ */ r.createElement(w, {
+  content: e,
+  locale: t
+}), Ie = () => /* @__PURE__ */ r.createElement(n, null, /* @__PURE__ */ r.createElement(n.Label, {
+  className: i(se, u.label)
+}, /* @__PURE__ */ r.createElement(n.Label.Required, {
+  className: i(oe, u.requiredMark)
+})), /* @__PURE__ */ r.createElement(n.Input, {
+  className: i(le, u.input, T.inputGroup)
+}, /* @__PURE__ */ r.createElement(n.Input.Currency, {
+  className: T.currency
+}), /* @__PURE__ */ r.createElement(n.Input.Value, {
+  className: i(u.innerInput, ae)
+})), /* @__PURE__ */ r.createElement(n.Error, {
+  className: i(ce, u.error)
+}, /* @__PURE__ */ r.createElement(ne, null), /* @__PURE__ */ r.createElement(n.Error.Text, null)), /* @__PURE__ */ r.createElement(n.Description, {
+  className: i(ie, u.description)
+}, fe)), Ve = () => /* @__PURE__ */ r.createElement(Ie, null);
+export {
+  Ve as PaymentInputRAC
+};