@wix/form-elements 0.0.0-stage → 1.53.0

package/dist/component/donation-rac-A0HtRtbH.js

@@ -0,0 +1,305 @@
+import n, { useMemo as w, useCallback as L, useRef as ae } from "react";
+import { RicosViewer as se } from "@wix/ricos/viewer";
+import _ from "classnames";
+import { RadioGroup as le, RadioField as Q, RadioButton as W, TextField as ce, Input as ie } from "react-aria-components";
+import { debounce as ue } from "ts-debounce";
+import { P as j, ag as P, ad as V, aq as me, aa as M, ai as pe } from "./form-Dn-MrArr.js";
+import { f as h, a as g } from "./find-child-C60k4CxG.js";
+import { a as J } from "./format-currency-BwShJ9vM.js";
+import { D as de, E as Ie } from "./field-error-headless-D40GACk4.js";
+import { L as Ce } from "./field-label-headless-Beq2Tn6V.js";
+import { N as Ee } from "./options-layout-constants-DEfIEJWD.js";
+import { a as fe, b as he } from "./numeric-input-utils-CuBMi4-a.js";
+import { g as Oe } from "./payment-field-utils-DobiK5Xh.js";
+import { u as ye } from "./use-synced-display-value-DcAxdn3M.js";
+import { E as _e } from "./error-icon-hZxQ6DEy.js";
+import { s as v } from "./field-rac.module-DXfwku6m.js";
+import { r as be, H as ge, f as Y, t as B, l as Fe, h as Ne } from "./form-element-classes-Bi-nNM8q.js";
+import { o as De } from "./options-rac.module-KM-VT_KY.js";
+function Le(e, t) {
+  return e.reduce((r, o) => (r[o[t]] = o, r), {});
+}
+function Re(e) {
+  return Le(e, "id");
+}
+const ve = 0.01;
+function Se(e) {
+  var t;
+  return ((t = e == null ? void 0 : e.fixedPriceOptions) == null ? void 0 : t.price) || "0";
+}
+function K(e, t) {
+  const r = Number(t || "0");
+  return {
+    productId: e.id,
+    price: e.priceType === j.DYNAMIC_PRICE ? r : String(r),
+    quantity: 1
+  };
+}
+function Ae(e) {
+  return e.find((t) => t.priceType === j.DYNAMIC_PRICE);
+}
+function Pe(e, t) {
+  return (e == null ? void 0 : e.productId) === (t == null ? void 0 : t.id) ? String((e == null ? void 0 : e.price) ?? "") : "";
+}
+function Me(e, t, r) {
+  const o = (t == null ? void 0 : t.productId) === e ? void 0 : e, s = o ? r[o] : void 0;
+  return s ? [
+    K(s, Se(s))
+  ] : [];
+}
+const a = ({ children: e }) => {
+  const { id: t, value: r, onChange: o, disabled: s, required: c, onBlur: i, onFocus: y, validation: u, addOther: m, addOtherPlaceholder: I, FieldLayout: O, hasError: E } = P(), { labelId: p } = V(), { t: d } = me(), { currency: b, regionalFormat: F } = M(), C = r == null ? void 0 : r[0], N = w(() => {
+    var f, T;
+    return ((T = (f = u == null ? void 0 : u.predefined) == null ? void 0 : f.paymentOptions) == null ? void 0 : T.products) || [];
+  }, [
+    u
+  ]), R = w(() => Re(N), [
+    N
+  ]), l = w(() => m ? Ae(N) : void 0, [
+    N,
+    m
+  ]), X = Pe(C, l), [q, x] = ye({
+    sourceValue: X,
+    format: (f) => he(String(f ?? ""), F),
+    regionalFormat: F
+  }), z = L((f) => {
+    o(Me(f, C, R)), x("");
+  }, [
+    o,
+    R,
+    C,
+    x
+  ]), $ = L((f) => {
+    l && o(typeof f == "number" ? [
+      K(l, String(f))
+    ] : []);
+  }, [
+    o,
+    l
+  ]), H = w(() => ue($, 500), [
+    $
+  ]), Z = L((f) => {
+    (C == null ? void 0 : C.productId) !== (l == null ? void 0 : l.id) && o(void 0);
+    const { validInput: T, validNumber: re } = fe(f.target.value, ve, q, F);
+    x(T), H(re);
+  }, [
+    F,
+    o,
+    C,
+    l,
+    q,
+    H,
+    x
+  ]), U = (C == null ? void 0 : C.productId) || null, ee = L(() => {
+    l != null && l.id && U !== l.id && z(l.id);
+  }, [
+    l == null ? void 0 : l.id,
+    U,
+    z
+  ]), te = h(e, a.Label), G = h(e, a.Control), ne = h(e, a.Description), oe = h(e, a.Error);
+  return /* @__PURE__ */ n.createElement(O, {
+    fieldId: t,
+    renderLabel: () => te,
+    renderInput: () => /* @__PURE__ */ n.createElement(le, {
+      "aria-labelledby": p,
+      value: U,
+      onChange: z,
+      isDisabled: s,
+      isInvalid: E,
+      isRequired: c,
+      onBlur: i,
+      onFocus: y
+    }, G ? g(G, {
+      productsById: R,
+      addOther: m,
+      customAmount: q,
+      onCustomAmountInputChange: Z,
+      currency: b,
+      t: d,
+      placeholder: I === void 0 ? d("donation.other-option.placeholder") : I,
+      customAmountProductId: l == null ? void 0 : l.id,
+      onFocusCustomInput: ee
+    }) : null),
+    renderDescription: () => /* @__PURE__ */ n.createElement(n.Fragment, null, oe, ne)
+  });
+}, xe = ({ children: e, className: t, ...r }) => {
+  const { productsById: o, addOther: s, customAmount: c, onCustomAmountInputChange: i, currency: y, t: u, placeholder: m, customAmountProductId: I, onFocusCustomInput: O } = r, { hasError: E } = P(), p = h(e, a.Options), d = h(e, a.OtherInput);
+  return /* @__PURE__ */ n.createElement("div", {
+    className: t,
+    "data-invalid": E
+  }, p ? g(p, {
+    productsById: o,
+    addOther: s,
+    customAmountProductId: I,
+    t: u
+  }) : null, d && s ? g(d, {
+    customAmount: c,
+    onCustomAmountInputChange: i,
+    currency: y,
+    t: u,
+    placeholder: m,
+    customAmountProductId: I,
+    onFocusCustomInput: O
+  }) : null);
+}, k = ({ children: e, className: t, ...r }) => {
+  const { productsById: o, addOther: s, customAmountProductId: c, t: i } = r, { options: y, numberOfColumns: u } = P(), { isMobile: m } = M(), I = h(e, k.Option), O = m ? Ee.ONE : u;
+  return /* @__PURE__ */ n.createElement("div", {
+    className: t,
+    "data-columns": O
+  }, y.map((E) => {
+    var b;
+    const p = o[E.value], d = (b = p == null ? void 0 : p.fixedPriceOptions) == null ? void 0 : b.price;
+    return g(I, {
+      key: E.value,
+      value: E.value,
+      price: d || "0"
+    });
+  }), s && c && /* @__PURE__ */ n.createElement(Q, {
+    value: c,
+    style: {
+      position: "absolute",
+      width: "1px",
+      height: "1px",
+      padding: "0",
+      margin: "-1px",
+      overflow: "hidden",
+      clip: "rect(0, 0, 0, 0)",
+      whiteSpace: "nowrap",
+      border: "0"
+    }
+  }, /* @__PURE__ */ n.createElement(W, {
+    "aria-label": i("donation.other-option.label", "Custom amount")
+  }, i("donation.other-option.label", "Custom amount"))));
+}, S = ({ children: e, className: t, ...r }) => {
+  const { value: o, price: s } = r, { id: c } = P(), { currency: i, regionalFormat: y } = M(), u = h(e, S.Value), m = h(e, S.Currency), { isCurrencyPrefixed: I } = J({
+    amount: s,
+    currency: i == null ? void 0 : i.code,
+    locale: y
+  }), O = ae(null);
+  pe(() => {
+    var p, d;
+    (d = (p = O.current) == null ? void 0 : p.querySelector("input")) == null || d.focus();
+  }, c);
+  const E = u ? g(u, {
+    price: s
+  }) : null;
+  return /* @__PURE__ */ n.createElement(Q, {
+    value: o
+  }, /* @__PURE__ */ n.createElement(W, {
+    className: t,
+    ref: O
+  }, /* @__PURE__ */ n.createElement(n.Fragment, null, I && m, E, !I && m)));
+}, Te = ({ className: e, ...t }) => {
+  const { price: r } = t, { currency: o, regionalFormat: s } = M(), { value: c } = J({
+    amount: r,
+    currency: o == null ? void 0 : o.code,
+    locale: s
+  });
+  return /* @__PURE__ */ n.createElement("span", {
+    className: e
+  }, c);
+}, we = ({ className: e }) => {
+  const { currency: t } = M();
+  return /* @__PURE__ */ n.createElement("span", {
+    className: e
+  }, (t == null ? void 0 : t.sign) || (t == null ? void 0 : t.code) || "");
+};
+S.Value = Te;
+S.Currency = we;
+const A = ({ children: e, className: t, ...r }) => {
+  const { customAmount: o, onCustomAmountInputChange: s, currency: c, t: i, placeholder: y, customAmountProductId: u, onFocusCustomInput: m } = r, { disabled: I, hasError: O } = P(), { labelId: E, prefixId: p } = V(), d = h(e, A.Currency), b = h(e, A.Value), F = L((R) => {
+    s({
+      target: {
+        value: R
+      }
+    });
+  }, [
+    s
+  ]), C = L(() => {
+    m();
+  }, [
+    m
+  ]), N = o && o.trim() !== "";
+  return /* @__PURE__ */ n.createElement(ce, {
+    "aria-labelledby": `${E} ${p}`,
+    value: o,
+    onChange: F,
+    onFocus: C,
+    isDisabled: I,
+    isInvalid: O,
+    className: t,
+    "data-selected": N ? "true" : void 0
+  }, o && c && d ? g(d, {
+    currency: c,
+    t: i
+  }) : null, b ? g(b, {
+    placeholder: y,
+    customAmountProductId: u
+  }) : null);
+}, Be = ({ className: e, ...t }) => {
+  const { currency: r, t: o } = t, { prefixId: s } = V();
+  return /* @__PURE__ */ n.createElement("span", {
+    id: s,
+    "aria-hidden": !1,
+    "aria-label": Oe(o, r),
+    className: e
+  }, (r == null ? void 0 : r.sign) || (r == null ? void 0 : r.code) || "");
+}, Ve = ({ className: e, ...t }) => {
+  const { placeholder: r, customAmountProductId: o } = t, { ariaDescribedBy: s, labelId: c, prefixId: i } = V();
+  return /* @__PURE__ */ n.createElement(ie, {
+    id: o,
+    "aria-labelledby": `${c} ${i}`,
+    "aria-describedby": s,
+    placeholder: r,
+    inputMode: "decimal",
+    autoComplete: "off",
+    className: e
+  });
+};
+A.Currency = Be;
+A.Value = Ve;
+k.Option = S;
+a.Label = Ce;
+a.Control = xe;
+a.Options = k;
+a.OtherInput = A;
+a.Description = de;
+a.Error = Ie;
+const qe = "_control_7gwzv_1", ze = "_option_7gwzv_7", Ue = "_optionCurrency_7gwzv_91", ke = "_otherInput_7gwzv_95", $e = "_otherInputValue_7gwzv_112", He = "_otherInputCurrency_7gwzv_165", D = {
+  control: qe,
+  option: ze,
+  optionCurrency: Ue,
+  otherInput: ke,
+  otherInputValue: $e,
+  otherInputCurrency: He
+}, Ge = ({ content: e, locale: t }) => /* @__PURE__ */ n.createElement(se, {
+  content: e,
+  locale: t
+}), Ye = () => /* @__PURE__ */ n.createElement(a, null, /* @__PURE__ */ n.createElement(a.Label, {
+  className: _(be, v.label)
+}, /* @__PURE__ */ n.createElement(a.Label.Required, {
+  className: _(ge, v.requiredMark)
+})), /* @__PURE__ */ n.createElement(a.Control, {
+  className: D.control
+}, /* @__PURE__ */ n.createElement(a.Options, {
+  className: De.options
+}, /* @__PURE__ */ n.createElement(a.Options.Option, {
+  className: _(Y, D.option)
+}, /* @__PURE__ */ n.createElement(a.Options.Option.Value, {
+  className: B
+}), /* @__PURE__ */ n.createElement(a.Options.Option.Currency, {
+  className: _(B, D.optionCurrency)
+}))), /* @__PURE__ */ n.createElement(a.OtherInput, {
+  className: _(Y, v.input, D.otherInput)
+}, /* @__PURE__ */ n.createElement(a.OtherInput.Currency, {
+  className: _(B, D.otherInputCurrency)
+}), /* @__PURE__ */ n.createElement(a.OtherInput.Value, {
+  className: _(B, D.otherInputValue)
+}))), /* @__PURE__ */ n.createElement(a.Error, {
+  className: _(Fe, v.error)
+}, /* @__PURE__ */ n.createElement(_e, null), /* @__PURE__ */ n.createElement(a.Error.Text, null)), /* @__PURE__ */ n.createElement(a.Description, {
+  className: _(Ne, v.description)
+}, Ge)), mt = () => /* @__PURE__ */ n.createElement(Ye, null);
+export {
+  mt as DonationRAC
+};

package/dist/component/dropdown-field-headless-CYpFgZ3H.js

@@ -0,0 +1,84 @@
+import e, { useState as E, useCallback as g, useRef as q } from "react";
+import { UNSAFE_PortalProvider as A } from "react-aria";
+import { Select as w, SelectValue as M, ListBox as U, ListBoxItem as _ } from "react-aria-components";
+import { ag as p, ad as b, ai as j } from "./form-Dn-MrArr.js";
+import { f as d, a as z } from "./find-child-C60k4CxG.js";
+import { D as G, E as H } from "./field-error-headless-D40GACk4.js";
+import { L as J } from "./field-label-headless-Beq2Tn6V.js";
+import { S as K, N as Q } from "./non-modal-popover-DtIMXHbe.js";
+const n = ({ children: t }) => {
+  const { id: o, value: r, defaultValue: l, options: a = [], readOnly: s, onChange: u, placeholder: m, disabled: i, required: v, onBlur: O, onFocus: y, FieldLayout: F, hasError: C } = p(), [D, L] = E(!1), [h, I] = E(null), B = r && a.some((c) => (c.value ?? c.label) === r) ? r : l || null, { labelId: N } = b(), P = g((c) => {
+    s || u(typeof c == "string" ? c : null);
+  }, [
+    u,
+    s
+  ]), S = g((c) => L(c && !i && !s), [
+    i,
+    s
+  ]), T = d(t, n.Label), x = d(t, n.Trigger), V = d(t, n.Options), R = d(t, n.Description), k = d(t, n.Error);
+  return /* @__PURE__ */ e.createElement(F, {
+    fieldId: o,
+    renderLabel: () => T,
+    renderInput: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
+      ref: I,
+      style: {
+        display: "contents"
+      }
+    }), /* @__PURE__ */ e.createElement(A, {
+      getContainer: () => h
+    }, /* @__PURE__ */ e.createElement(w, {
+      "aria-labelledby": N,
+      value: B,
+      isOpen: D && !i && !s,
+      onOpenChange: S,
+      onChange: P,
+      isDisabled: i,
+      isInvalid: C,
+      isRequired: v,
+      placeholder: m,
+      onBlur: O,
+      onFocus: y
+    }, x, V))),
+    renderDescription: () => /* @__PURE__ */ e.createElement(e.Fragment, null, k, R)
+  });
+}, W = ({ children: t, className: o }) => {
+  const { inputId: r, ariaDescribedBy: l } = b(), { id: a, hasError: s, isLoading: u } = p(), m = q(null);
+  return j(() => {
+    var i;
+    (i = m.current) == null || i.focus();
+  }, a), /* @__PURE__ */ e.createElement(K, {
+    ref: m,
+    id: r,
+    "aria-describedby": l,
+    className: o,
+    "data-invalid": s || void 0,
+    "data-loading": u || void 0
+  }, /* @__PURE__ */ e.createElement(M, null), t);
+}, f = ({ children: t, className: o }) => {
+  const { options: r = [] } = p(), l = d(t, f.Option);
+  return /* @__PURE__ */ e.createElement(Q, {
+    className: o,
+    containerPadding: 0,
+    offset: 0
+  }, /* @__PURE__ */ e.createElement(U, null, r.map((a) => z(l, {
+    key: a.value ?? a.label,
+    value: a.value ?? a.label,
+    label: a.label
+  }))));
+}, X = ({ className: t, ...o }) => {
+  const { value: r, label: l } = o;
+  return /* @__PURE__ */ e.createElement(_, {
+    className: t,
+    id: r,
+    textValue: l
+  }, l);
+};
+f.Option = X;
+n.Label = J;
+n.Trigger = W;
+n.Options = f;
+n.Description = G;
+n.Error = H;
+export {
+  n as D
+};

package/dist/component/dropdown-field-rac-B5emHw3_.js

@@ -0,0 +1,32 @@
+import { RicosViewer as l } from "@wix/ricos/viewer";
+import t from "classnames";
+import e from "react";
+import { D as o } from "./dropdown-field-headless-CYpFgZ3H.js";
+import { C as m } from "./chevron-down-icon-CcpVm6B-.js";
+import { E as n } from "./error-icon-hZxQ6DEy.js";
+import { H as c } from "./custom-focus-class-_483Pkwp.js";
+import { s as r } from "./field-rac.module-DXfwku6m.js";
+import { r as E, H as i, q as p, u as _, l as S, h as R } from "./form-element-classes-Bi-nNM8q.js";
+const D = ({ content: a, locale: s }) => /* @__PURE__ */ e.createElement(l, {
+  content: a,
+  locale: s
+}), u = () => /* @__PURE__ */ e.createElement(o, null, /* @__PURE__ */ e.createElement(o.Label, {
+  className: t(E, r.label)
+}, /* @__PURE__ */ e.createElement(o.Label.Required, {
+  className: t(i, r.requiredMark)
+})), /* @__PURE__ */ e.createElement(o.Trigger, {
+  className: t(p, r.input, r.dropdownTrigger)
+}, /* @__PURE__ */ e.createElement(m, {
+  className: r.dropdownIcon
+})), /* @__PURE__ */ e.createElement(o.Options, {
+  className: t(_, r.selectPopover, r.dropdownPopover)
+}, /* @__PURE__ */ e.createElement(o.Options.Option, {
+  className: t(r.selectOption, c)
+})), /* @__PURE__ */ e.createElement(o.Error, {
+  className: t(S, r.error)
+}, /* @__PURE__ */ e.createElement(n, null), /* @__PURE__ */ e.createElement(o.Error.Text, null)), /* @__PURE__ */ e.createElement(o.Description, {
+  className: t(R, r.description)
+}, D));
+export {
+  u as D
+};

package/dist/component/dropdown-rac-CRj3gKMe.js

@@ -0,0 +1,6 @@
+import o from "react";
+import { D as r } from "./dropdown-field-rac-B5emHw3_.js";
+const n = () => /* @__PURE__ */ o.createElement(r, null);
+export {
+  n as DropdownRAC
+};

package/dist/component/ecom-address-rac-ClBWgRGU.js

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

package/dist/component/ecom-subscription-checkbox-rac-DLvoidqP.js

@@ -0,0 +1,49 @@
+import o, { useMemo as a } from "react";
+import { ag as n, aq as c, h as i } from "./form-Dn-MrArr.js";
+import { C } from "./checkbox-field-rac-B4NsTbRK.js";
+import { j as l, k as p, i as m } from "./form-element-classes-Bi-nNM8q.js";
+const _ = (e) => ({
+  nodes: [
+    {
+      paragraphData: {
+        textStyle: {
+          textAlignment: "AUTO"
+        }
+      },
+      type: "PARAGRAPH",
+      nodes: [
+        {
+          type: "TEXT",
+          nodes: [],
+          textData: {
+            text: e("ecom.form.field-type.ecom-subscriptions.label"),
+            decorations: []
+          },
+          id: ""
+        }
+      ],
+      id: "8k8yy2"
+    }
+  ]
+}), R = () => {
+  const e = n(), { t } = c(), s = a(() => _(t), [
+    t
+  ]), r = {
+    ...e,
+    label: s
+  };
+  return /* @__PURE__ */ o.createElement(i.Provider, {
+    value: {
+      v2: r
+    }
+  }, /* @__PURE__ */ o.createElement(C, {
+    classes: {
+      container: m,
+      label: p,
+      control: l
+    }
+  }));
+};
+export {
+  R as EcomSubscriptionCheckboxRAC
+};