@wix/form-elements 0.0.0-stage → 1.53.0

package/dist/component/events-repeater-rac-BwbNXM88.js

@@ -0,0 +1,247 @@
+import t, { useState as q, useMemo as B, useCallback as V, useRef as M } from "react";
+import v from "classnames";
+import { NumberField as z, Input as J, CheckboxField as Q, CheckboxButton as W, Button as w } from "react-aria-components";
+import { am as P, an as U, ac as H, ah as K, t as Y, ag as D, ad as X, ai as j, j as Z } from "./form-Dn-MrArr.js";
+import { f as F, a as R } from "./find-child-C60k4CxG.js";
+import { L as ee } from "./field-label-headless-Beq2Tn6V.js";
+import { u as te } from "./use-invoke-callback-UH73A_J3.js";
+import { C as x } from "./chevron-down-icon-CcpVm6B-.js";
+import { s as L } from "./field-rac.module-DXfwku6m.js";
+import { r as se, q as ne, m as oe, n as re, o as ae } from "./form-element-classes-Bi-nNM8q.js";
+const ce = [], le = ({ id: e, fields: n, layout: c, value: r, onChange: s, errors: m = ce, validation: l }) => {
+  const [i, E] = q((r == null ? void 0 : r.length) || 0), a = B(() => r ?? [], [
+    r
+  ]), g = P(), C = U(), d = H(), { validateFields: u } = K(), G = l.predefined.objectArrayOptions.maxItems, _ = B(() => Y({
+    form: {
+      fields: n,
+      steps: [
+        {
+          layout: c
+        }
+      ]
+    },
+    parentId: e,
+    recursive: !1
+  }), [
+    n,
+    c,
+    e
+  ]), f = B(() => m.reduce((p, I) => {
+    const [S, N] = I.errorPath.split("/"), A = parseInt(S, 10);
+    return p[A] || (p[A] = []), p[A].push({
+      ...I,
+      errorPath: N
+    }), p;
+  }, []), [
+    m
+  ]), b = V((p) => {
+    const I = Number.isNaN(p) ? 0 : Math.min(Math.max(p, 0), G);
+    E(I), s == null || s(Array.from({
+      length: I
+    }, (S, N) => a[N] ?? {}));
+  }, [
+    G,
+    a,
+    s
+  ]), T = V((p) => (I, S) => {
+    const N = Array.from({
+      length: i
+    }, (A, $) => a[$] ?? {});
+    N[p] = {
+      ...N[p],
+      [I]: S
+    }, s == null || s(N);
+  }, [
+    i,
+    a,
+    s
+  ]);
+  return {
+    guestLimit: G,
+    guestCount: i,
+    guests: a,
+    errorsByIndex: f,
+    formView: _,
+    formSchema: g,
+    formFields: C,
+    fieldActions: d,
+    validateFields: u,
+    changeGuestCount: b,
+    changeGuestField: T
+  };
+}, ue = [], me = {}, o = ({ children: e, className: n }) => {
+  const c = D(), { id: r, FieldLayout: s } = c, { guestLimit: m, guestCount: l, guests: i, errorsByIndex: E, formView: a, changeGuestCount: g, changeGuestField: C } = le(c), d = F(e, o.Label), u = F(e, o.GuestCount), G = F(e, o.GuestToggle), _ = F(e, o.Guests), f = m > 1;
+  return /* @__PURE__ */ t.createElement(s, {
+    fieldId: r,
+    renderLabel: () => f ? d : null,
+    renderInput: () => /* @__PURE__ */ t.createElement("div", {
+      className: n
+    }, f ? R(u, {
+      guestLimit: m,
+      guestCount: l,
+      onGuestCountChange: g
+    }) : R(G, {
+      guestCount: l,
+      onGuestCountChange: g
+    }), R(_, {
+      guestCount: l,
+      guests: i,
+      errorsByIndex: E,
+      formView: a,
+      onGuestFieldChange: C
+    })),
+    renderDescription: () => null
+  });
+}, ie = ({ className: e }) => /* @__PURE__ */ t.createElement(ee, {
+  className: e
+}, null), h = ({ children: e, className: n, groupClassName: c, ...r }) => {
+  const { guestLimit: s, guestCount: m, onGuestCountChange: l } = r, { id: i, label: E, disabled: a, readOnly: g, onBlur: C, onFocus: d } = D(), { inputId: u, ariaDescribedBy: G } = X(), _ = te(C), f = M(null);
+  j(() => {
+    var p;
+    (p = f.current) == null || p.focus();
+  }, i);
+  const b = F(e, h.Decrement), T = F(e, h.Increment);
+  return /* @__PURE__ */ t.createElement(z, {
+    className: c,
+    "aria-label": E,
+    value: m,
+    onChange: l,
+    minValue: 0,
+    maxValue: s,
+    step: 1,
+    isDisabled: a,
+    isReadOnly: g,
+    onBlur: _,
+    onFocus: d
+  }, /* @__PURE__ */ t.createElement(J, {
+    ref: f,
+    id: u,
+    "aria-describedby": G,
+    className: n,
+    inputMode: "numeric"
+  }), T, b);
+}, de = ({ children: e, className: n }) => /* @__PURE__ */ t.createElement(w, {
+  slot: "decrement",
+  className: n
+}, e), pe = ({ children: e, className: n }) => /* @__PURE__ */ t.createElement(w, {
+  slot: "increment",
+  className: n
+}, e), O = ({ children: e, className: n, ...c }) => {
+  const { guestCount: r, onGuestCountChange: s } = c, { id: m, label: l, disabled: i, readOnly: E, onBlur: a, onFocus: g } = D(), { inputId: C, ariaDescribedBy: d } = X(), u = M(null);
+  j(() => {
+    var b;
+    (b = u.current) == null || b.focus();
+  }, m);
+  const G = F(e, O.Input), _ = F(e, O.Label), f = V((b) => {
+    s(b ? 1 : 0);
+  }, [
+    s
+  ]);
+  return /* @__PURE__ */ t.createElement(Q, {
+    inputRef: u,
+    id: C,
+    "aria-describedby": d,
+    isSelected: r > 0,
+    onChange: f,
+    isDisabled: i,
+    isReadOnly: E,
+    onBlur: a,
+    onFocus: g
+  }, /* @__PURE__ */ t.createElement(W, {
+    className: n
+  }, G, R(_, {
+    label: l
+  })));
+}, Ee = ({ className: e }) => /* @__PURE__ */ t.createElement("div", {
+  "aria-hidden": "true",
+  className: e
+}), ge = ({ className: e, ...n }) => {
+  const { label: c } = n;
+  return /* @__PURE__ */ t.createElement("span", {
+    className: e
+  }, c);
+}, k = ({ children: e, className: n, ...c }) => {
+  const { guestCount: r, guests: s, errorsByIndex: m, formView: l, onGuestFieldChange: i } = c, { disabled: E, readOnly: a } = D(), g = B(() => ({
+    ...l,
+    fields: l.fields.map((d) => ({
+      ...d,
+      properties: {
+        ...d.properties,
+        disabled: !!(E || d.properties.disabled),
+        readOnly: !!(a || d.properties.readOnly)
+      }
+    }))
+  }), [
+    l,
+    E,
+    a
+  ]), C = F(e, k.Guest);
+  return r ? /* @__PURE__ */ t.createElement("div", {
+    className: n
+  }, Array.from({
+    length: r
+  }, (d, u) => R(C, {
+    key: u,
+    index: u,
+    formView: g,
+    values: s[u] ?? me,
+    errors: m[u] ?? ue,
+    onFieldChange: i(u)
+  }))) : null;
+}, Ce = ({ className: e, ...n }) => {
+  const { index: c, formView: r, values: s, errors: m, onFieldChange: l } = n, i = P(), E = U(), a = H(), { validateFields: g } = K();
+  return /* @__PURE__ */ t.createElement("div", {
+    className: e,
+    "data-hook": `guest-${c}`
+  }, /* @__PURE__ */ t.createElement(Z, {
+    form: r,
+    formSchema: i,
+    values: s,
+    errors: m,
+    validateFields: g,
+    onFieldChange: l,
+    fields: E,
+    fieldActions: a
+  }));
+};
+h.Decrement = de;
+h.Increment = pe;
+O.Input = Ee;
+O.Label = ge;
+k.Guest = Ce;
+o.Label = ie;
+o.GuestCount = h;
+o.GuestToggle = O;
+o.Guests = k;
+const Ge = "_container_11veo_1", fe = "_countGroup_11veo_8", Fe = "_increment_11veo_28", be = "_decrement_11veo_29", y = {
+  container: Ge,
+  countGroup: fe,
+  increment: Fe,
+  decrement: be
+}, _e = () => /* @__PURE__ */ t.createElement(o, {
+  className: y.container
+}, /* @__PURE__ */ t.createElement(o.Label, {
+  className: v(se, L.label)
+}), /* @__PURE__ */ t.createElement(o.GuestCount, {
+  className: L.innerInput,
+  groupClassName: v(ne, L.input, y.countGroup)
+}, /* @__PURE__ */ t.createElement(o.GuestCount.Increment, {
+  className: y.increment
+}, /* @__PURE__ */ t.createElement(x, {
+  style: {
+    transform: "rotate(180deg)"
+  }
+})), /* @__PURE__ */ t.createElement(o.GuestCount.Decrement, {
+  className: y.decrement
+}, /* @__PURE__ */ t.createElement(x, null))), /* @__PURE__ */ t.createElement(o.GuestToggle, {
+  className: v(oe, L.checkbox)
+}, /* @__PURE__ */ t.createElement(o.GuestToggle.Input, {
+  className: v(re, L.checkboxInput)
+}), /* @__PURE__ */ t.createElement(o.GuestToggle.Label, {
+  className: ae
+})), /* @__PURE__ */ t.createElement(o.Guests, {
+  className: y.container
+}, /* @__PURE__ */ t.createElement(o.Guests.Guest, null))), Be = () => /* @__PURE__ */ t.createElement(_e, null);
+export {
+  Be as EventsRepeaterRAC
+};

package/dist/component/events-rsvp-rac-BzVK7JNO.js

@@ -0,0 +1,38 @@
+import t from "react";
+import { RicosViewer as c } from "@wix/ricos/viewer";
+import r from "classnames";
+import { R as a, s as o } from "./radio-group-field-rac.module-xWCK2zEh.js";
+import { E as m } from "./error-icon-hZxQ6DEy.js";
+import { s } from "./field-rac.module-DXfwku6m.js";
+import { r as i, H as E, I as p, K as R, J as _, l as L, h as O } from "./form-element-classes-Bi-nNM8q.js";
+const e = ({ children: n }) => /* @__PURE__ */ t.createElement(a, null, n);
+e.Label = a.Label;
+e.Options = a.Options;
+e.Option = a.Option;
+e.Description = a.Description;
+e.Error = a.Error;
+const S = ({ content: n, locale: l }) => /* @__PURE__ */ t.createElement(c, {
+  content: n,
+  locale: l
+}), I = () => /* @__PURE__ */ t.createElement(e, null, /* @__PURE__ */ t.createElement(e.Label, {
+  className: r(i, s.label)
+}, /* @__PURE__ */ t.createElement(e.Label.Required, {
+  className: r(E, s.requiredMark)
+})), /* @__PURE__ */ t.createElement(e.Options, {
+  className: r(p, o.options)
+}, /* @__PURE__ */ t.createElement(e.Option, {
+  className: o.option
+}, /* @__PURE__ */ t.createElement(e.Option.Input, {
+  className: o.optionInput
+}), /* @__PURE__ */ t.createElement(e.Option.Control, {
+  className: r(R, o.optionControl)
+}), /* @__PURE__ */ t.createElement(e.Option.Label, {
+  className: r(_, o.optionLabel)
+}))), /* @__PURE__ */ t.createElement(e.Error, {
+  className: r(L, s.error)
+}, /* @__PURE__ */ t.createElement(m, null), /* @__PURE__ */ t.createElement(e.Error.Text, null)), /* @__PURE__ */ t.createElement(e.Description, {
+  className: r(O, s.description)
+}, S)), M = () => /* @__PURE__ */ t.createElement(I, null);
+export {
+  M as EventsRsvpRAC
+};

package/dist/component/field-error-headless-D40GACk4.js

@@ -0,0 +1,34 @@
+import t, { createContext as m, useContext as M } from "react";
+import { ag as c, ad as i, aa as f, Q as x, T as h } from "./form-Dn-MrArr.js";
+const N = ({ className: r, children: e }) => {
+  const { description: s, target: o } = c(), { descriptionId: a } = i(), { language: n } = f();
+  return s ? /* @__PURE__ */ t.createElement("div", {
+    className: r,
+    id: a,
+    "data-hook": x(o)
+  }, e({
+    content: s,
+    locale: n
+  })) : null;
+}, l = /* @__PURE__ */ m(void 0), v = l.Provider, D = ({ className: r }) => {
+  const e = M(l);
+  return /* @__PURE__ */ t.createElement("span", {
+    className: r
+  }, e ?? "");
+}, k = ({ className: r, children: e, ...s }) => {
+  const { hasError: o, errorMessage: a } = s, { target: n, hasError: d, errorMessage: E } = c(), { errorId: g } = i(), u = o ?? d, p = a ?? E;
+  return u ? /* @__PURE__ */ t.createElement(v, {
+    value: p
+  }, /* @__PURE__ */ t.createElement("div", {
+    id: g,
+    "data-hook": h(n),
+    className: r
+  }, e)) : null;
+};
+k.Text = D;
+export {
+  N as D,
+  k as E,
+  v as a,
+  D as b
+};

package/dist/component/field-label-headless-Beq2Tn6V.js

@@ -0,0 +1,52 @@
+import { ag as m, R as d, q as p, ad as D, aq as B } from "./form-Dn-MrArr.js";
+import l from "react";
+import { f as g } from "./find-child-C60k4CxG.js";
+import { sdk as L } from "@wix/image-kit";
+function N({ id: e, width: t, height: n }, a, r, o = "fill") {
+  return (o === "fit" ? L.getScaleToFitImageURL : L.getScaleToFillImageURL)(e, t, n, typeof a == "number" ? a : parseInt(a, 10), typeof r == "number" ? r : parseInt(r, 10));
+}
+var u = /* @__PURE__ */ (function(e) {
+  return e.TOP = "top", e.BOTTOM = "bottom", e;
+})({});
+const S = {
+  visibility: "hidden",
+  display: "block",
+  height: 0,
+  margin: 0,
+  padding: 0
+}, U = "​", i = ({ children: e, className: t, ...n }) => {
+  const { as: a = "label", requiredIndicatorHidden: r = !1, label: o } = n, { label: T, required: R = !1, hideLabel: q = !1, requiredIndicatorType: F = d.ASTERISK, requiredIndicatorPlacement: O = p.AFTER_FIELD_TITLE, media: y, mediaSettings: s } = m(), { labelId: A, inputId: P } = D(), _ = a, E = R && !r ? g(e, i.Required) : null, c = y ? g(e, i.Image) : null, f = (s == null ? void 0 : s.imagePosition) ?? u.TOP, h = F === d.ASTERISK && O === p.BEFORE_FIELD_TITLE, I = (o ?? T) || U, b = /* @__PURE__ */ l.createElement(_, {
+    id: A,
+    htmlFor: a === "label" ? P : void 0,
+    className: t,
+    style: q ? S : void 0
+  }, h ? /* @__PURE__ */ l.createElement(l.Fragment, null, E, I) : /* @__PURE__ */ l.createElement(l.Fragment, null, I, E));
+  return c ? /* @__PURE__ */ l.createElement("div", null, f === u.TOP ? c : null, b, f === u.BOTTOM ? c : null) : b;
+}, v = ({ className: e }) => {
+  const { t } = B(), { requiredIndicatorType: n } = m();
+  return n === d.TEXT ? /* @__PURE__ */ l.createElement("span", {
+    className: e,
+    "aria-hidden": "true"
+  }, t("settings.required-indicator-text")) : /* @__PURE__ */ l.createElement("span", {
+    className: e,
+    "aria-hidden": "true"
+  }, "*");
+}, x = ({ className: e }) => {
+  const { media: t, mediaSettings: n } = m();
+  if (!t)
+    return null;
+  const a = N(t, t.width, t.height);
+  return a ? /* @__PURE__ */ l.createElement("img", {
+    className: e,
+    src: a,
+    alt: t.altText || "",
+    "data-fit": n == null ? void 0 : n.imageFit,
+    "data-alignment": n == null ? void 0 : n.imageAlignment
+  }) : null;
+};
+i.Required = v;
+i.Image = x;
+export {
+  i as L,
+  N as g
+};

package/dist/component/field-rac.module-DXfwku6m.js

@@ -0,0 +1,21 @@
+const o = "_label_j7vfu_1", n = "_requiredMark_j7vfu_11", t = "_input_j7vfu_16", e = "_inputGroup_j7vfu_17", r = "_innerInput_j7vfu_123", _ = "_dropdownTrigger_j7vfu_166", c = "_dropdownIcon_j7vfu_176", u = "_dropdownPopover_j7vfu_195", p = "_selectPopover_j7vfu_199", s = "_selectOption_j7vfu_225", i = "_selectOptionWithoutFocusRing_j7vfu_249", d = "_description_j7vfu_255", v = "_error_j7vfu_271", l = "_checkbox_j7vfu_290", f = "_checkboxInput_j7vfu_313", j = "_uploadButton_j7vfu_406", a = {
+  label: o,
+  requiredMark: n,
+  input: t,
+  inputGroup: e,
+  innerInput: r,
+  dropdownTrigger: _,
+  dropdownIcon: c,
+  dropdownPopover: u,
+  selectPopover: p,
+  selectOption: s,
+  selectOptionWithoutFocusRing: i,
+  description: d,
+  error: v,
+  checkbox: l,
+  checkboxInput: f,
+  uploadButton: j
+};
+export {
+  a as s
+};

package/dist/component/fieldset-headless-CD3fds9J.js

@@ -0,0 +1,54 @@
+import b, { useRef as f, useCallback as u } from "react";
+function h({ onBlur: e, onFocus: a }) {
+  const r = f(null), c = f(!1), i = u((t) => {
+    if (!t.relatedTarget) {
+      c.current = !1, e == null || e(t);
+      return;
+    }
+    const s = r.current;
+    if (!s) {
+      c.current = !1, e == null || e(t);
+      return;
+    }
+    if (!s.contains(t.relatedTarget)) {
+      c.current = !1, e == null || e(t);
+      return;
+    }
+  }, [
+    e
+  ]);
+  return {
+    handleFocus: u((t) => {
+      c.current || (c.current = !0, a == null || a(t));
+    }, [
+      a
+    ]),
+    handleBlur: i,
+    containerRef: r
+  };
+}
+const o = {
+  border: "none",
+  margin: 0,
+  padding: 0,
+  minWidth: 0
+}, k = ({ id: e, ariaLabelledBy: a, ariaDescribedBy: r, required: c, className: i, onBlur: n, onFocus: t, children: d }) => {
+  const { handleFocus: s, handleBlur: l, containerRef: m } = h({
+    onBlur: n,
+    onFocus: t
+  });
+  return /* @__PURE__ */ b.createElement("fieldset", {
+    ref: m,
+    id: e,
+    "aria-labelledby": a,
+    "aria-describedby": r,
+    "aria-required": c,
+    className: i,
+    style: o,
+    onBlur: l,
+    onFocus: s
+  }, d);
+};
+export {
+  k as F
+};