@wix/form-elements 1.63.0 → 1.65.0

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

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

package/dist/component/{dropdown-field-headless-Js5TxdU4.js → dropdown-field-headless-DBl8vGed.js}

@@ -1,21 +1,21 @@
 import e, { useState as E, useCallback as g, useRef as q } from "react";
 import { UNSAFE_PortalProvider as A } from "react-aria";
-import { Select as j, SelectValue as w, ListBox as M, ListBoxItem as U } from "react-aria-components";
-import { ah as p, ae as b, aj as _ } from "./form-DzjdnO7t.js";
+import { Select as w, SelectValue as M, ListBox as U, ListBoxItem as _ } from "react-aria-components";
+import { ai as p, af as b, ak as j } from "./form-CtWkUmxc.js";
 import { f as d, a as z } from "./find-child-C60k4CxG.js";
-import { D as G, E as H } from "./field-error-headless-DTKnr5Zx.js";
-import { L as J } from "./field-label-headless-DV4aNd5Y.js";
+import { D as G, E as H } from "./field-error-headless-D6iejMQP.js";
+import { L as J } from "./field-label-headless-BWLfU3YB.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: h } = p(), [C, D] = E(!1), [L, I] = E(null), B = r && a.some((c) => (c.value ?? c.label) === r) ? r : l || null, { labelId: N } = b(), P = g((c) => {
+  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) => D(c && !i && !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);
+  ]), T = d(t, n.Label), x = d(t, n.Trigger), V = d(t, n.Options), k = d(t, n.Description), R = d(t, n.Error);
   return /* @__PURE__ */ e.createElement(F, {
     fieldId: o,
     renderLabel: () => T,
@@ -25,25 +25,25 @@ const n = ({ children: t }) => {
         display: "contents"
       }
     }), /* @__PURE__ */ e.createElement(A, {
-      getContainer: () => L
-    }, /* @__PURE__ */ e.createElement(j, {
+      getContainer: () => h
+    }, /* @__PURE__ */ e.createElement(w, {
       "aria-labelledby": N,
       value: B,
-      isOpen: C && !i && !s,
+      isOpen: D && !i && !s,
       onOpenChange: S,
       onChange: P,
       isDisabled: i,
-      isInvalid: h,
+      isInvalid: C,
       isRequired: v,
       placeholder: m,
       onBlur: O,
       onFocus: y
     }, x, V))),
-    renderDescription: () => /* @__PURE__ */ e.createElement(e.Fragment, null, k, R)
+    renderDescription: () => /* @__PURE__ */ e.createElement(e.Fragment, null, R, k)
   });
 }, W = ({ children: t, className: o }) => {
   const { inputId: r, ariaDescribedBy: l } = b(), { id: a, hasError: s, isLoading: u } = p(), m = q(null);
-  return _(() => {
+  return j(() => {
     var i;
     (i = m.current) == null || i.focus();
   }, a), /* @__PURE__ */ e.createElement(K, {
@@ -53,21 +53,21 @@ const n = ({ children: t }) => {
     className: o,
     "data-invalid": s || void 0,
     "data-loading": u || void 0
-  }, /* @__PURE__ */ e.createElement(w, null), t);
+  }, /* @__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(M, null, r.map((a) => z(l, {
+  }, /* @__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(U, {
+  return /* @__PURE__ */ e.createElement(_, {
     className: t,
     id: r,
     textValue: l

package/dist/component/{dropdown-field-rac-BDxcvX00.js → dropdown-field-rac-O6G7_kSn.js}

@@ -1,13 +1,13 @@
-import { RicosViewer as l } from "@wix/ricos/viewer";
+import { RicosViewer as m } from "@wix/ricos/viewer";
 import t from "classnames";
 import e from "react";
-import { D as o } from "./dropdown-field-headless-Js5TxdU4.js";
-import { C as m } from "./chevron-down-icon-CcpVm6B-.js";
-import { E as n } from "./error-icon-hZxQ6DEy.js";
+import { D as o } from "./dropdown-field-headless-DBl8vGed.js";
+import { C as n } from "./chevron-down-icon-CcpVm6B-.js";
+import { E as l } from "./error-icon-hZxQ6DEy.js";
 import { H as c } from "./custom-focus-class-_483Pkwp.js";
-import { s as r } from "./field-rac.module-DtugsLiL.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, {
+import { s as r } from "./field-rac.module-DnUIb9Oh.js";
+import { z as E, P as i, y as p, C as _, q as S, j as R } from "./form-element-classes-BSMjWijd.js";
+const D = ({ content: a, locale: s }) => /* @__PURE__ */ e.createElement(m, {
   content: a,
   locale: s
 }), u = () => /* @__PURE__ */ e.createElement(o, null, /* @__PURE__ */ e.createElement(o.Label, {
@@ -16,7 +16,7 @@ const D = ({ content: a, locale: s }) => /* @__PURE__ */ e.createElement(l, {
   className: t(i, r.requiredMark)
 })), /* @__PURE__ */ e.createElement(o.Trigger, {
   className: t(p, r.input, r.dropdownTrigger)
-}, /* @__PURE__ */ e.createElement(m, {
+}, /* @__PURE__ */ e.createElement(n, {
   className: r.dropdownIcon
 })), /* @__PURE__ */ e.createElement(o.Options, {
   className: t(_, r.selectPopover, r.dropdownPopover)
@@ -24,7 +24,7 @@ const D = ({ content: a, locale: s }) => /* @__PURE__ */ e.createElement(l, {
   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, {
+}, /* @__PURE__ */ e.createElement(l, null), /* @__PURE__ */ e.createElement(o.Error.Text, null)), /* @__PURE__ */ e.createElement(o.Description, {
   className: t(R, r.description)
 }, D));
 export {

package/dist/component/{dropdown-rac-B5UHNzV-.js → dropdown-rac-BImZ5Jwe.js}

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

package/dist/component/{ecom-address-rac-0zm4bX37.js → ecom-address-rac-BU4XZ_Do.js}

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

package/dist/component/{ecom-subscription-checkbox-rac-DCXoI33l.js → ecom-subscription-checkbox-rac-DLzpoNYm.js}

@@ -1,7 +1,7 @@
 import o, { useMemo as a } from "react";
-import { ah as n, ar as c, h as i } from "./form-DzjdnO7t.js";
-import { C } from "./checkbox-field-rac-e-RAmupX.js";
-import { j as l, k as p, i as m } from "./form-element-classes-Bi-nNM8q.js";
+import { ai as n, as as c, h as i } from "./form-CtWkUmxc.js";
+import { C } from "./checkbox-field-rac-BamOJv3P.js";
+import { o as l, p, n as m } from "./form-element-classes-BSMjWijd.js";
 const _ = (e) => ({
   nodes: [
     {