@wix/form-elements 1.80.0 → 1.81.0

package/dist/component/{dext-rating-input-rac-D_jXx_VN.js → dext-rating-input-rac-BHJ1kitb.js}

@@ -1,5 +1,5 @@
 import t from "react";
-import { R as e } from "./rating-input-field-rac-Bozwq2E7.js";
+import { R as e } from "./rating-input-field-rac-elaferlI.js";
 const o = () => /* @__PURE__ */ t.createElement(e, null);
 export {
   o as DextRatingInputRAC

package/dist/component/{dext-tags-rac-DBaT-lQT.js → dext-tags-rac-CvNjwS5R.js}

@@ -1,6 +1,6 @@
 import r from "react";
-import { ai as e, h as o } from "./form-BmioUKtQ.js";
-import { T as s } from "./tags-field-rac-DTOthwA5.js";
+import { ai as e, h as o } from "./form-f0tqdMye.js";
+import { T as s } from "./tags-field-rac-ByC9DnyH.js";
 import { b as a } from "./default-limits-D7qVv_Hv.js";
 const l = () => {
   const t = {

package/dist/component/{dext-text-area-rac-DWcCktYi.js → dext-text-area-rac-X5L0Q3sC.js}

@@ -1,5 +1,5 @@
 import e from "react";
-import { T as t } from "./text-area-field-rac-BbHdTAJP.js";
+import { T as t } from "./text-area-field-rac-CtSa8XW_.js";
 const a = () => /* @__PURE__ */ e.createElement(t, null);
 export {
   a as DextTextAreaRAC

package/dist/component/{dext-text-input-rac-CBX2wgW-.js → dext-text-input-rac-swkyAJqC.js}

@@ -1,5 +1,5 @@
 import t from "react";
-import { T as e } from "./text-input-field-rac-B_csZjOh.js";
+import { T as e } from "./text-input-field-rac-C6fQYKhI.js";
 const o = () => /* @__PURE__ */ t.createElement(e, null);
 export {
   o as DextTextInputRAC

package/dist/component/{dext-url-input-rac-DaqWDzIt.js → dext-url-input-rac-BYlXOAkz.js}

@@ -1,5 +1,5 @@
 import t from "react";
-import { U as r } from "./url-input-field-rac-BxT0Lgly.js";
+import { U as r } from "./url-input-field-rac-4T8gcMHH.js";
 const n = () => /* @__PURE__ */ t.createElement(r, null);
 export {
   n as DextUrlInputRAC

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

@@ -0,0 +1,318 @@
+import n, { useMemo as x, useCallback as S, useRef as oe } from "react";
+import { RicosViewer as re } from "@wix/ricos/viewer";
+import g from "classnames";
+import { RadioGroup as se, RadioField as G, RadioButton as Y, TextField as ae, Group as le, Input as ie } from "react-aria-components";
+import { debounce as ce } from "ts-debounce";
+import { P as Q, ai as v, af as B, as as ue, ab as A, ak as me } from "./form-f0tqdMye.js";
+import { f, a as y } from "./find-child-C60k4CxG.js";
+import { a as W } from "./format-currency-BwShJ9vM.js";
+import { D as pe, E as de } from "./field-error-headless-BErhh9GG.js";
+import { L as Ie } from "./field-label-headless-BGyK-5xW.js";
+import { N as Ce } from "./options-layout-constants-DEfIEJWD.js";
+import { a as Ee, 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-ColNPUt0.js";
+import { y as be, O as ye, j as Ne, x as Fe, o as ge, i as De, k as Se } from "./form-element-classes-jC8D0LnK.js";
+import { o as Le } from "./options-rac.module-KM-VT_KY.js";
+import { u as Re } from "./use-element-state-class-name-BqmaTba3.js";
+function ve(e, t) {
+  return e.reduce((o, r) => (o[r[t]] = r, o), {});
+}
+function Ae(e) {
+  return ve(e, "id");
+}
+const je = 0.01;
+function Me(e) {
+  var t;
+  return ((t = e == null ? void 0 : e.fixedPriceOptions) == null ? void 0 : t.price) || "0";
+}
+function z(e, t) {
+  const o = Number(t || "0");
+  return {
+    productId: e.id,
+    price: e.priceType === Q.DYNAMIC_PRICE ? o : String(o),
+    quantity: 1
+  };
+}
+function Pe(e) {
+  return e.find((t) => t.priceType === Q.DYNAMIC_PRICE);
+}
+function Te(e, t) {
+  return (e == null ? void 0 : e.productId) === (t == null ? void 0 : t.id) ? String((e == null ? void 0 : e.price) ?? "") : "";
+}
+function xe(e, t, o) {
+  const r = (t == null ? void 0 : t.productId) === e ? void 0 : e, a = r ? o[r] : void 0;
+  return a ? [
+    z(a, Me(a))
+  ] : [];
+}
+const s = ({ children: e }) => {
+  const { id: t, value: o, onChange: r, disabled: a, required: m, onBlur: p, onFocus: h, validation: c, addOther: u, addOtherPlaceholder: i, FieldLayout: I, hasError: O } = v(), { labelId: _ } = B(), { t: C } = ue(), { currency: j, regionalFormat: N } = A(), d = o == null ? void 0 : o[0], F = x(() => {
+    var E, T;
+    return ((T = (E = c == null ? void 0 : c.predefined) == null ? void 0 : E.paymentOptions) == null ? void 0 : T.products) || [];
+  }, [
+    c
+  ]), M = x(() => Ae(F), [
+    F
+  ]), l = x(() => u ? Pe(F) : void 0, [
+    F,
+    u
+  ]), J = Te(d, l), [U, P] = he({
+    sourceValue: J,
+    format: (E) => fe(String(E ?? ""), N),
+    regionalFormat: N
+  }), k = S((E) => {
+    r(xe(E, d, M)), P("");
+  }, [
+    r,
+    M,
+    d,
+    P
+  ]), H = S((E) => {
+    l && r(typeof E == "number" ? [
+      z(l, String(E))
+    ] : []);
+  }, [
+    r,
+    l
+  ]), $ = x(() => ce(H, 500), [
+    H
+  ]), K = S((E) => {
+    (d == null ? void 0 : d.productId) !== (l == null ? void 0 : l.id) && r(void 0);
+    const { validInput: T, validNumber: ne } = Ee(E.target.value, je, U, N);
+    P(T), $(ne);
+  }, [
+    N,
+    r,
+    d,
+    l,
+    U,
+    $,
+    P
+  ]), q = (d == null ? void 0 : d.productId) || null, X = S(() => {
+    l != null && l.id && q !== l.id && k(l.id);
+  }, [
+    l == null ? void 0 : l.id,
+    q,
+    k
+  ]), Z = f(e, s.Label), V = f(e, s.Control), ee = f(e, s.Description), te = f(e, s.Error);
+  return /* @__PURE__ */ n.createElement(I, {
+    fieldId: t,
+    renderLabel: () => Z,
+    renderInput: () => /* @__PURE__ */ n.createElement(se, {
+      "aria-labelledby": _,
+      value: q,
+      onChange: k,
+      isDisabled: a,
+      isInvalid: O,
+      isRequired: m,
+      onBlur: p,
+      onFocus: h
+    }, V ? y(V, {
+      productsById: M,
+      addOther: u,
+      customAmount: U,
+      onCustomAmountInputChange: K,
+      currency: j,
+      t: C,
+      placeholder: i === void 0 ? C("donation.other-option.placeholder") : i,
+      customAmountProductId: l == null ? void 0 : l.id,
+      onFocusCustomInput: X
+    }) : null),
+    renderDescription: () => /* @__PURE__ */ n.createElement(n.Fragment, null, te, ee)
+  });
+}, Be = ({ children: e, className: t, ...o }) => {
+  const { productsById: r, addOther: a, customAmount: m, onCustomAmountInputChange: p, currency: h, t: c, placeholder: u, customAmountProductId: i, onFocusCustomInput: I } = o, { hasError: O } = v(), _ = f(e, s.Options), C = f(e, s.OtherInput);
+  return /* @__PURE__ */ n.createElement("div", {
+    className: t,
+    "data-invalid": O
+  }, _ ? y(_, {
+    productsById: r
+  }) : null, a && i && /* @__PURE__ */ n.createElement(G, {
+    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__ */ n.createElement(Y, {
+    "aria-label": c("donation.other-option.label", "Custom amount")
+  }, c("donation.other-option.label", "Custom amount"))), C && a ? y(C, {
+    customAmount: m,
+    onCustomAmountInputChange: p,
+    currency: h,
+    t: c,
+    placeholder: u,
+    customAmountProductId: i,
+    onFocusCustomInput: I
+  }) : null);
+}, w = ({ children: e, className: t, ...o }) => {
+  const { productsById: r } = o, { options: a, numberOfColumns: m } = v(), { isMobile: p } = A(), h = f(e, w.Option), c = p ? Ce.ONE : m;
+  return /* @__PURE__ */ n.createElement("div", {
+    className: t,
+    "data-columns": c
+  }, a.map((u) => {
+    var O;
+    const i = r[u.value], I = (O = i == null ? void 0 : i.fixedPriceOptions) == null ? void 0 : O.price;
+    return y(h, {
+      key: u.value,
+      value: u.value,
+      price: I || "0"
+    });
+  }));
+}, L = ({ children: e, className: t, ...o }) => {
+  const { value: r, price: a } = o, { id: m } = v(), { currency: p, regionalFormat: h } = A(), c = f(e, L.Value), u = f(e, L.Currency), { isCurrencyPrefixed: i } = W({
+    amount: a,
+    currency: p == null ? void 0 : p.code,
+    locale: h
+  }), I = oe(null);
+  me(() => {
+    var _, C;
+    (C = (_ = I.current) == null ? void 0 : _.querySelector("input")) == null || C.focus();
+  }, m);
+  const O = c ? y(c, {
+    price: a
+  }) : null;
+  return /* @__PURE__ */ n.createElement(G, {
+    value: r
+  }, /* @__PURE__ */ n.createElement(Y, {
+    className: t,
+    ref: I
+  }, /* @__PURE__ */ n.createElement(n.Fragment, null, i && u, O, !i && u)));
+}, Ue = ({ className: e, ...t }) => {
+  const { price: o } = t, { currency: r, regionalFormat: a } = A(), { value: m } = W({
+    amount: o,
+    currency: r == null ? void 0 : r.code,
+    locale: a
+  });
+  return /* @__PURE__ */ n.createElement("span", {
+    className: e
+  }, m);
+}, ke = ({ className: e }) => {
+  const { currency: t } = A();
+  return /* @__PURE__ */ n.createElement("span", {
+    className: e
+  }, (t == null ? void 0 : t.sign) || (t == null ? void 0 : t.code) || "");
+};
+L.Value = Ue;
+L.Currency = ke;
+const R = ({ children: e, className: t, ...o }) => {
+  const { customAmount: r, onCustomAmountInputChange: a, currency: m, t: p, placeholder: h, customAmountProductId: c, onFocusCustomInput: u } = o, { disabled: i, hasError: I } = v(), { labelId: O, prefixId: _ } = B(), C = f(e, R.Currency), j = f(e, R.Value), N = S((F) => {
+    a({
+      target: {
+        value: F
+      }
+    });
+  }, [
+    a
+  ]), d = S(() => {
+    u();
+  }, [
+    u
+  ]);
+  return /* @__PURE__ */ n.createElement(ae, {
+    "aria-labelledby": `${O} ${_}`,
+    value: r,
+    onChange: N,
+    onFocus: d,
+    isDisabled: i,
+    isInvalid: I
+  }, /* @__PURE__ */ n.createElement(le, {
+    className: t,
+    isDisabled: i,
+    isInvalid: I
+  }, r && m && C ? y(C, {
+    currency: m,
+    t: p
+  }) : null, j ? y(j, {
+    placeholder: h,
+    customAmountProductId: c
+  }) : null));
+}, qe = ({ className: e, ...t }) => {
+  const { currency: o, t: r } = t, { prefixId: a } = B();
+  return /* @__PURE__ */ n.createElement("span", {
+    id: a,
+    "aria-hidden": !1,
+    "aria-label": Oe(r, o),
+    className: e
+  }, (o == null ? void 0 : o.sign) || (o == null ? void 0 : o.code) || "");
+}, we = ({ className: e, ...t }) => {
+  const { placeholder: o, customAmountProductId: r } = t, { ariaDescribedBy: a, labelId: m, prefixId: p } = B();
+  return /* @__PURE__ */ n.createElement(ie, {
+    id: r,
+    "aria-labelledby": `${m} ${p}`,
+    "aria-describedby": a,
+    placeholder: o,
+    inputMode: "decimal",
+    autoComplete: "off",
+    className: e
+  });
+};
+R.Currency = qe;
+R.Value = we;
+w.Option = L;
+s.Label = Ie;
+s.Control = Be;
+s.Options = w;
+s.OtherInput = R;
+s.Description = pe;
+s.Error = de;
+const He = "_control_1jl2j_1", $e = "_options_1jl2j_7", Ve = "_option_1jl2j_7", Ge = "_optionHover_1jl2j_43", Ye = "_optionSelected_1jl2j_43", Qe = "_optionCurrency_1jl2j_93", We = "_otherInput_1jl2j_97", ze = "_otherInputCurrency_1jl2j_116", b = {
+  control: He,
+  options: $e,
+  option: Ve,
+  optionHover: Ge,
+  optionSelected: Ye,
+  optionCurrency: Qe,
+  otherInput: We,
+  otherInputCurrency: ze
+}, Je = ({ content: e, locale: t }) => /* @__PURE__ */ n.createElement(re, {
+  content: e,
+  locale: t
+}), Ke = {
+  base: b.option,
+  selected: b.optionSelected,
+  hover: b.optionHover
+}, Xe = () => {
+  const e = Re({
+    globalClasses: Se,
+    moduleClasses: Ke
+  });
+  return /* @__PURE__ */ n.createElement(s, null, /* @__PURE__ */ n.createElement(s.Label, {
+    className: g(be, D.label)
+  }, /* @__PURE__ */ n.createElement(s.Label.Required, {
+    className: g(ye, D.requiredMark)
+  })), /* @__PURE__ */ n.createElement(s.Control, {
+    className: b.control
+  }, /* @__PURE__ */ n.createElement(s.Options, {
+    className: g(Ne, Le.options, b.options)
+  }, /* @__PURE__ */ n.createElement(s.Options.Option, {
+    className: ({ isSelected: t, isHovered: o }) => e({
+      isSelected: t,
+      isHovered: o
+    })
+  }, /* @__PURE__ */ n.createElement(s.Options.Option.Value, null), /* @__PURE__ */ n.createElement(s.Options.Option.Currency, {
+    className: b.optionCurrency
+  }))), /* @__PURE__ */ n.createElement(s.OtherInput, {
+    className: g(Fe, D.input, b.otherInput)
+  }, /* @__PURE__ */ n.createElement(s.OtherInput.Currency, {
+    className: b.otherInputCurrency
+  }), /* @__PURE__ */ n.createElement(s.OtherInput.Value, {
+    className: D.innerInput
+  }))), /* @__PURE__ */ n.createElement(s.Error, {
+    className: g(ge, D.error)
+  }, /* @__PURE__ */ n.createElement(_e, null), /* @__PURE__ */ n.createElement(s.Error.Text, null)), /* @__PURE__ */ n.createElement(s.Description, {
+    className: g(De, D.description)
+  }, Je));
+}, Ot = () => /* @__PURE__ */ n.createElement(Xe, null);
+export {
+  Ot as DonationRAC
+};

package/dist/component/{dropdown-field-headless-D7mOjVEJ.js → dropdown-field-headless-JJzbZvps.js}

@@ -1,10 +1,10 @@
 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 { ai as p, af as b, ak as j } from "./form-BmioUKtQ.js";
+import { ai as p, af as b, ak as j } from "./form-f0tqdMye.js";
 import { f as d, a as z } from "./find-child-C60k4CxG.js";
-import { D as G, E as H } from "./field-error-headless-C7IUibkK.js";
-import { L as J } from "./field-label-headless-BQFy2iAr.js";
+import { D as G, E as H } from "./field-error-headless-BErhh9GG.js";
+import { L as J } from "./field-label-headless-BGyK-5xW.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) => {

package/dist/component/{dropdown-field-rac-DsRuMFo4.js → dropdown-field-rac-BodpIQ9Q.js}

@@ -1,13 +1,13 @@
 import { RicosViewer as m } from "@wix/ricos/viewer";
 import t from "classnames";
 import e from "react";
-import { D as o } from "./dropdown-field-headless-D7mOjVEJ.js";
+import { D as o } from "./dropdown-field-headless-JJzbZvps.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-ColNPUt0.js";
-import { z as i, P as E, y as p, B as _, p as S, i as R } from "./form-element-classes-BuM-vthE.js";
-const D = ({ content: a, locale: s }) => /* @__PURE__ */ e.createElement(m, {
+import { y as i, O as E, x as p, A as _, o as S, i as O } from "./form-element-classes-jC8D0LnK.js";
+const R = ({ content: a, locale: s }) => /* @__PURE__ */ e.createElement(m, {
   content: a,
   locale: s
 }), u = () => /* @__PURE__ */ e.createElement(o, null, /* @__PURE__ */ e.createElement(o.Label, {
@@ -25,8 +25,8 @@ const D = ({ content: a, locale: s }) => /* @__PURE__ */ e.createElement(m, {
 })), /* @__PURE__ */ e.createElement(o.Error, {
   className: t(S, r.error)
 }, /* @__PURE__ */ e.createElement(l, null), /* @__PURE__ */ e.createElement(o.Error.Text, null)), /* @__PURE__ */ e.createElement(o.Description, {
-  className: t(R, r.description)
-}, D));
+  className: t(O, r.description)
+}, R));
 export {
   u as D
 };

package/dist/component/{dropdown-rac-8Fe66UGi.js → dropdown-rac-Bfbxxx9k.js}

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

package/dist/component/{ecom-address-rac-DbR_WEgu.js → ecom-address-rac-BCnsL5tr.js}

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

package/dist/component/{ecom-subscription-checkbox-rac-ByQsK79_.js → ecom-subscription-checkbox-rac-CNSdI_ty.js}

@@ -1,7 +1,7 @@
 import o, { useMemo as a } from "react";
-import { ai as n, as as c, h as i } from "./form-BmioUKtQ.js";
-import { C } from "./checkbox-field-rac-thaR4lXB.js";
-import { n as l, o as m, m as p } from "./form-element-classes-BuM-vthE.js";
+import { ai as n, as as c, h as i } from "./form-f0tqdMye.js";
+import { C } from "./checkbox-field-rac-BnVNfYWL.js";
+import { m as l, n as m, l as p } from "./form-element-classes-jC8D0LnK.js";
 const _ = (e) => ({
   nodes: [
     {