@wix/form-elements 0.0.0-stage → 1.53.0

package/dist/component/date-time-input-field-rac-DY1u3LS6.js

@@ -0,0 +1,421 @@
+import { RicosViewer as ae } from "@wix/ricos/viewer";
+import E from "classnames";
+import t, { useMemo as T, useState as $, useCallback as H, useRef as U } from "react";
+import { ag as g, ad as j, aa as B, H as Q, a0 as J, r as m, aq as O, a4 as G, K as ne, w as re, a7 as le, x as K, ai as q } from "./form-Dn-MrArr.js";
+import { parseTime as oe } from "@internationalized/date";
+import { UNSAFE_PortalProvider as se } from "react-aria";
+import { ListBoxItem as ie, ListBox as ce, Select as me, TextField as W, TimeField as de, SelectValue as ue, Input as X, DateInput as pe, DateSegment as k } from "react-aria-components";
+import { f as d, a as R } from "./find-child-C60k4CxG.js";
+import { g as Ee } from "./helpers-HmkkXrh2.js";
+import { D as fe, E as he } from "./field-error-headless-D40GACk4.js";
+import { L as be } from "./field-label-headless-Beq2Tn6V.js";
+import { F as ge } from "./fieldset-headless-CD3fds9J.js";
+import { N as Ie, S as _e } from "./non-modal-popover-DtIMXHbe.js";
+import { C as De } from "./chevron-down-icon-CcpVm6B-.js";
+import { E as ye } from "./error-icon-hZxQ6DEy.js";
+import { H as Ne } from "./custom-focus-class-_483Pkwp.js";
+import { s as p } from "./field-rac.module-DXfwku6m.js";
+import { r as S, H as Le, q as Y, u as Te, l as Oe, h as Fe } from "./form-element-classes-Bi-nNM8q.js";
+const o = ({ children: e, className: a }) => {
+  const { id: n, required: r, onBlur: s, onFocus: l, FieldLayout: i } = g(), { inputId: u, labelId: c, ariaDescribedBy: h } = j(), { regionalFormat: b } = B(), D = T(() => Q(b).filter(J).map((M) => M.toUpperCase()), [
+    b
+  ]), C = d(e, o.Label), V = d(e, o.Description), L = d(e, o.Error), _ = {
+    [m.MONTH]: d(e, o.Month),
+    [m.DAY]: d(e, o.Day),
+    [m.YEAR]: d(e, o.Year)
+  }, y = d(e, o.Time);
+  return /* @__PURE__ */ t.createElement(i, {
+    fieldId: n,
+    renderLabel: () => R(C, {
+      as: "div"
+    }),
+    renderInput: () => /* @__PURE__ */ t.createElement(ge, {
+      id: u,
+      ariaLabelledBy: c,
+      ariaDescribedBy: h,
+      required: r,
+      onBlur: s,
+      onFocus: l,
+      className: a
+    }, _[D[0]], _[D[1]], _[D[2]], y),
+    renderDescription: () => /* @__PURE__ */ t.createElement(t.Fragment, null, L, V)
+  });
+}, F = ({ children: e, className: a }) => {
+  const { disabled: n, readOnly: r, showDateLabels: s, hidePlaceholder: l } = g(), { labelId: i } = N(m.MONTH), { partValue: u, partError: c, onPartChange: h } = P(m.MONTH), { t: b } = O(), [D, C] = $(!1), [V, L] = $(null), _ = l ? void 0 : b("field.date.placeholder.month"), y = H((x) => {
+    r || h(typeof x == "string" ? x : "");
+  }, [
+    h,
+    r
+  ]), M = H((x) => {
+    C(x && !r);
+  }, [
+    r
+  ]), Z = d(e, F.Label), ee = d(e, F.Trigger), te = d(e, F.Options);
+  return /* @__PURE__ */ t.createElement("div", {
+    className: a,
+    "data-date-field": !0
+  }, s ? Z : null, /* @__PURE__ */ t.createElement("div", {
+    ref: L,
+    style: {
+      display: "contents"
+    }
+  }), /* @__PURE__ */ t.createElement(se, {
+    getContainer: () => V
+  }, /* @__PURE__ */ t.createElement(me, {
+    "aria-labelledby": s ? i : void 0,
+    value: u || null,
+    onChange: y,
+    isDisabled: n,
+    isInvalid: c,
+    placeholder: _,
+    isOpen: D,
+    onOpenChange: M
+  }, ee, te)));
+}, Pe = ({ className: e }) => /* @__PURE__ */ t.createElement(z, {
+  datePart: m.MONTH,
+  className: e
+}), Ce = ({ children: e, className: a }) => {
+  const { id: n, readOnly: r } = g(), { inputId: s } = N(m.MONTH), { partError: l, isFirstPart: i } = P(m.MONTH), u = U(null);
+  return q(() => {
+    var c;
+    i && ((c = u.current) == null || c.focus());
+  }, n), /* @__PURE__ */ t.createElement(_e, {
+    ref: u,
+    id: s,
+    className: a,
+    "data-hook": m.MONTH,
+    "data-invalid": l || void 0,
+    "data-readonly": r || void 0
+  }, /* @__PURE__ */ t.createElement(ue, null), e);
+}, w = ({ children: e, className: a }) => {
+  const { language: n } = B(), r = T(() => Ee(n), [
+    n
+  ]), s = d(e, w.Option) ?? /* @__PURE__ */ t.createElement(w.Option, null);
+  return /* @__PURE__ */ t.createElement(Ie, {
+    className: a,
+    containerPadding: 0,
+    offset: 0
+  }, /* @__PURE__ */ t.createElement(ce, null, r.map((l, i) => R(s, {
+    key: String(i + 1),
+    value: String(i + 1),
+    label: l
+  }))));
+}, Me = ({ className: e, ...a }) => {
+  const { value: n, label: r } = a;
+  return /* @__PURE__ */ t.createElement(ie, {
+    className: e,
+    id: n,
+    textValue: r
+  }, r);
+};
+F.Label = Pe;
+F.Trigger = Ce;
+F.Options = w;
+w.Option = Me;
+const A = ({ children: e, className: a }) => {
+  const { disabled: n, readOnly: r, showDateLabels: s } = g(), { labelId: l } = N(m.DAY), { partValue: i, partError: u, onPartChange: c } = P(m.DAY), h = d(e, A.Label), b = d(e, A.Input);
+  return /* @__PURE__ */ t.createElement("div", {
+    className: a,
+    "data-date-field": !0
+  }, s && h, /* @__PURE__ */ t.createElement(W, {
+    "aria-labelledby": s ? l : void 0,
+    value: i,
+    onChange: c,
+    isDisabled: n,
+    isReadOnly: r,
+    isInvalid: u
+  }, b));
+}, Se = ({ className: e }) => /* @__PURE__ */ t.createElement(z, {
+  datePart: m.DAY,
+  className: e
+}), Re = ({ className: e }) => {
+  const { id: a, hidePlaceholder: n } = g(), { inputId: r } = N(m.DAY), { isFirstPart: s } = P(m.DAY), { t: l } = O(), i = U(null), u = n ? void 0 : l("field.date.placeholder.day");
+  return q(() => {
+    var c;
+    s && ((c = i.current) == null || c.focus());
+  }, a), /* @__PURE__ */ t.createElement(X, {
+    ref: i,
+    id: r,
+    className: e,
+    placeholder: u,
+    maxLength: 2,
+    inputMode: "numeric",
+    "data-hook": m.DAY
+  });
+};
+A.Label = Se;
+A.Input = Re;
+const v = ({ children: e, className: a }) => {
+  const { disabled: n, readOnly: r, showDateLabels: s } = g(), { labelId: l } = N(m.YEAR), { partValue: i, partError: u, onPartChange: c } = P(m.YEAR), h = d(e, v.Label), b = d(e, v.Input);
+  return /* @__PURE__ */ t.createElement("div", {
+    className: a,
+    "data-date-field": !0
+  }, s && h, /* @__PURE__ */ t.createElement(W, {
+    "aria-labelledby": s ? l : void 0,
+    value: i,
+    onChange: c,
+    isDisabled: n,
+    isReadOnly: r,
+    isInvalid: u
+  }, b));
+}, Ae = ({ className: e }) => /* @__PURE__ */ t.createElement(z, {
+  datePart: m.YEAR,
+  className: e
+}), ve = ({ className: e }) => {
+  const { id: a, hidePlaceholder: n } = g(), { inputId: r } = N(m.YEAR), { isFirstPart: s } = P(m.YEAR), { t: l } = O(), i = U(null), u = n ? void 0 : l("field.date.placeholder.year");
+  return q(() => {
+    var c;
+    s && ((c = i.current) == null || c.focus());
+  }, a), /* @__PURE__ */ t.createElement(X, {
+    ref: i,
+    id: r,
+    className: e,
+    placeholder: u,
+    maxLength: 4,
+    inputMode: "numeric",
+    "data-hook": m.YEAR
+  });
+};
+v.Label = Ae;
+v.Input = ve;
+const I = ({ children: e, className: a }) => {
+  const { disabled: n, readOnly: r, use24HourFormat: s, showDateLabels: l } = g(), { labelId: i } = N("time"), { partValue: u, partError: c, onPartChange: h } = P("time"), b = d(e, I.Label), D = d(e, I.Input);
+  return /* @__PURE__ */ t.createElement("div", {
+    className: a,
+    "data-date-field": !0
+  }, l && b, /* @__PURE__ */ t.createElement(de, {
+    "aria-labelledby": l ? i : void 0,
+    value: u,
+    onChange: h,
+    isDisabled: n,
+    isReadOnly: r,
+    isInvalid: c,
+    hourCycle: s ? 24 : 12
+  }, D));
+}, Ve = ({ className: e }) => {
+  const { inputId: a, labelId: n } = N("time"), { t: r } = O(), s = r("field.date.label.time");
+  return /* @__PURE__ */ t.createElement("label", {
+    id: n,
+    htmlFor: a,
+    className: e
+  }, s);
+}, xe = ({ children: e, className: a }) => {
+  const n = d(e, I.Hour), r = d(e, I.Minute), s = d(e, I.Period);
+  return /* @__PURE__ */ t.createElement(pe, {
+    className: a,
+    "data-hook": "time"
+  }, (l) => {
+    switch (l.type) {
+      case "hour":
+        return R(n, {
+          segment: l
+        }) || /* @__PURE__ */ t.createElement(t.Fragment, null);
+      case "minute":
+        return R(r, {
+          segment: l
+        }) || /* @__PURE__ */ t.createElement(t.Fragment, null);
+      case "dayPeriod":
+        return R(s, {
+          segment: l
+        }) || /* @__PURE__ */ t.createElement(t.Fragment, null);
+      case "literal":
+        return /* @__PURE__ */ t.createElement(k, {
+          segment: l
+        });
+      default:
+        return /* @__PURE__ */ t.createElement(t.Fragment, null);
+    }
+  });
+}, Ye = ({ className: e, ...a }) => {
+  const { hidePlaceholder: n } = g(), { segment: r } = a, { t: s } = O(), l = n ? void 0 : s("field.date.placeholder.hour");
+  return /* @__PURE__ */ t.createElement(k, {
+    segment: r,
+    className: e,
+    ...l && {
+      placeholder: l
+    }
+  });
+}, He = ({ className: e, ...a }) => {
+  const { hidePlaceholder: n } = g(), { segment: r } = a, { t: s } = O(), l = n ? void 0 : s("field.date.placeholder.minute");
+  return /* @__PURE__ */ t.createElement(k, {
+    segment: r,
+    className: e,
+    ...l && {
+      placeholder: l
+    }
+  });
+}, we = ({ className: e, ...a }) => {
+  const { hidePlaceholder: n } = g(), { segment: r } = a, { t: s } = O(), l = n ? void 0 : s("field.date.placeholder.period");
+  return /* @__PURE__ */ t.createElement(k, {
+    segment: r,
+    className: e,
+    ...l && {
+      placeholder: l
+    }
+  });
+};
+I.Label = Ve;
+I.Input = xe;
+I.Hour = Ye;
+I.Minute = He;
+I.Period = we;
+o.Label = be;
+o.Month = F;
+o.Day = A;
+o.Year = v;
+o.Time = I;
+o.Description = fe;
+o.Error = he;
+function N(e) {
+  const { inputId: a } = j();
+  return T(() => {
+    const n = e.toLowerCase();
+    return {
+      inputId: `${a}-${n}-input`,
+      labelId: `${a}-${n}-label`
+    };
+  }, [
+    a,
+    e
+  ]);
+}
+function P(e) {
+  const { value: a, onChange: n, hasError: r = !1 } = g(), { regionalFormat: s } = B(), [l, i] = T(() => G(a ?? ""), [
+    a
+  ]), u = T(() => ne(r, a ?? ""), [
+    a,
+    r
+  ]), c = T(() => re(l), [
+    l
+  ]), h = T(() => Be(i), [
+    i
+  ]), b = H((L) => {
+    const _ = ke(L), y = K(l, _);
+    n(y);
+  }, [
+    n,
+    l
+  ]), D = H((L) => {
+    const [, _] = G(a ?? ""), y = le(L, e, c), M = K(y, _);
+    n(M);
+  }, [
+    n,
+    a,
+    c,
+    e
+  ]), C = T(() => e === "time" ? !1 : Q(s).filter(J).map((y) => y.toUpperCase())[0] === e, [
+    s,
+    e
+  ]);
+  return e === "time" ? {
+    partValue: h,
+    partError: u.TIME,
+    onPartChange: b,
+    isFirstPart: !1
+  } : {
+    partValue: c[e] || "",
+    partError: u[e],
+    onPartChange: D,
+    isFirstPart: C
+  };
+}
+function z({ datePart: e, className: a }) {
+  const { inputId: n, labelId: r } = N(e), { t: s } = O(), l = `field.date.label.${e.toLowerCase()}`, i = s(l);
+  return /* @__PURE__ */ t.createElement("label", {
+    id: r,
+    htmlFor: n,
+    className: a
+  }, i);
+}
+function Be(e) {
+  if (!e)
+    return null;
+  try {
+    return oe(e);
+  } catch {
+    return null;
+  }
+}
+function ke(e) {
+  if (!e)
+    return null;
+  const a = String(e.hour).padStart(2, "0"), n = String(e.minute).padStart(2, "0"), r = String(e.second).padStart(2, "0");
+  return [
+    a,
+    n,
+    r
+  ].join(":");
+}
+const Ue = "_fields_1x5em_1", qe = "_month_1x5em_10", ze = "_day_1x5em_11", $e = "_year_1x5em_12", Ge = "_timeGroup_1x5em_13", Ke = "_mobile_1x5em_32", je = "_dayInput_1x5em_45", Qe = "_yearInput_1x5em_46", Je = "_monthTrigger_1x5em_50", We = "_monthOption_1x5em_70", Xe = "_time_1x5em_13", Ze = "_hour_1x5em_89", et = "_minute_1x5em_90", tt = "_period_1x5em_91", f = {
+  fields: Ue,
+  month: qe,
+  day: ze,
+  year: $e,
+  timeGroup: Ge,
+  mobile: Ke,
+  dayInput: je,
+  yearInput: Qe,
+  monthTrigger: Je,
+  monthOption: We,
+  time: Xe,
+  hour: Ze,
+  minute: et,
+  period: tt
+}, at = ({ content: e, locale: a }) => /* @__PURE__ */ t.createElement(ae, {
+  content: e,
+  locale: a
+}), Dt = () => {
+  const { isMobile: e } = B();
+  return /* @__PURE__ */ t.createElement(o, {
+    className: E(f.fields, {
+      [f.mobile]: e
+    })
+  }, /* @__PURE__ */ t.createElement(o.Label, {
+    className: E(S, p.label)
+  }, /* @__PURE__ */ t.createElement(o.Label.Required, {
+    className: E(Le, p.requiredMark)
+  })), /* @__PURE__ */ t.createElement(o.Month, {
+    className: f.month
+  }, /* @__PURE__ */ t.createElement(o.Month.Label, {
+    className: E(S, p.label)
+  }), /* @__PURE__ */ t.createElement(o.Month.Trigger, {
+    className: E(Y, p.input, f.monthTrigger)
+  }, /* @__PURE__ */ t.createElement(De, {
+    className: p.dropdownIcon
+  })), /* @__PURE__ */ t.createElement(o.Month.Options, {
+    className: E(Te, p.selectPopover, p.dropdownPopover)
+  }, /* @__PURE__ */ t.createElement(o.Month.Options.Option, {
+    className: E(p.selectOption, f.monthOption, Ne)
+  }))), /* @__PURE__ */ t.createElement(o.Day, {
+    className: f.day
+  }, /* @__PURE__ */ t.createElement(o.Day.Label, {
+    className: E(S, p.label)
+  }), /* @__PURE__ */ t.createElement(o.Day.Input, {
+    className: E(Y, p.input, f.dayInput)
+  })), /* @__PURE__ */ t.createElement(o.Year, {
+    className: f.year
+  }, /* @__PURE__ */ t.createElement(o.Year.Label, {
+    className: E(S, p.label)
+  }), /* @__PURE__ */ t.createElement(o.Year.Input, {
+    className: E(Y, p.input, f.yearInput)
+  })), /* @__PURE__ */ t.createElement(o.Time, {
+    className: f.timeGroup
+  }, /* @__PURE__ */ t.createElement(o.Time.Label, {
+    className: E(S, p.label)
+  }), /* @__PURE__ */ t.createElement(o.Time.Input, {
+    className: E(Y, p.input, f.time)
+  }, /* @__PURE__ */ t.createElement(o.Time.Hour, {
+    className: f.hour
+  }), /* @__PURE__ */ t.createElement(o.Time.Minute, {
+    className: f.minute
+  }), /* @__PURE__ */ t.createElement(o.Time.Period, {
+    className: f.period
+  }))), /* @__PURE__ */ t.createElement(o.Error, {
+    className: E(Oe, p.error)
+  }, /* @__PURE__ */ t.createElement(ye, null), /* @__PURE__ */ t.createElement(o.Error.Text, null)), /* @__PURE__ */ t.createElement(o.Description, {
+    className: E(Fe, p.description)
+  }, at));
+};
+export {
+  Dt as D
+};

package/dist/component/date-time-input-rac-BuGAMm_l.js

@@ -0,0 +1,6 @@
+import e from "react";
+import { D as t } from "./date-time-input-field-rac-DY1u3LS6.js";
+const n = () => /* @__PURE__ */ e.createElement(t, null);
+export {
+  n as DateTimeInputRAC
+};

package/dist/component/default-limits-D7qVv_Hv.js

@@ -0,0 +1,6 @@
+const _ = 50, T = 50, E = 100;
+export {
+  T as D,
+  E as a,
+  _ as b
+};

package/dist/component/dext-checkbox-group-rac-C3jCmtB7.js

@@ -0,0 +1,18 @@
+import o from "react";
+import { ag as e, h as t } from "./form-Dn-MrArr.js";
+import { C as p } from "./checkbox-group-field-rac-DwHc_GX9.js";
+import { D as s } from "./default-limits-D7qVv_Hv.js";
+const C = () => {
+  const r = {
+    ...e(),
+    otherInputCharacterLimit: s
+  };
+  return /* @__PURE__ */ o.createElement(t.Provider, {
+    value: {
+      v2: r
+    }
+  }, /* @__PURE__ */ o.createElement(p, null));
+};
+export {
+  C as DextCheckboxGroupRAC
+};

package/dist/component/dext-checkbox-rac-dOvFH4gX.js

@@ -0,0 +1,6 @@
+import e from "react";
+import { C as t } from "./checkbox-field-rac-B4NsTbRK.js";
+const c = () => /* @__PURE__ */ e.createElement(t, null);
+export {
+  c as DextCheckboxRAC
+};

package/dist/component/dext-date-picker-rac-Bq6xFRoL.js

@@ -0,0 +1,6 @@
+import e from "react";
+import { D as t } from "./date-picker-field-rac-ByhJ3Koo.js";
+const a = () => /* @__PURE__ */ e.createElement(t, null);
+export {
+  a as DextDatePickerRAC
+};

package/dist/component/dext-date-time-input-rac-9BE7wXiZ.js

@@ -0,0 +1,6 @@
+import e from "react";
+import { D as t } from "./date-time-input-field-rac-DY1u3LS6.js";
+const n = () => /* @__PURE__ */ e.createElement(t, null);
+export {
+  n as DextDateTimeInputRAC
+};

package/dist/component/dext-dropdown-rac-j2ACAxk6.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 DextDropdownRAC
+};

package/dist/component/dext-email-rac-CLoZGIl3.js

@@ -0,0 +1,6 @@
+import t from "react";
+import { E as e } from "./email-input-field-rac-Dq1HVu3Y.js";
+const l = () => /* @__PURE__ */ t.createElement(e, null);
+export {
+  l as DextEmailRAC
+};

package/dist/component/dext-number-input-rac-D8IxqGdJ.js

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

package/dist/component/dext-phone-rac-B2Y-Ou4W.js

@@ -0,0 +1,6 @@
+import e from "react";
+import { P as t } from "./phone-input-field-rac-D-WSiybW.js";
+const r = () => /* @__PURE__ */ e.createElement(t, null);
+export {
+  r as DextPhoneRAC
+};

package/dist/component/dext-radio-group-rac-C88xnXTc.js

@@ -0,0 +1,18 @@
+import r from "react";
+import { ag as e, h as t } from "./form-Dn-MrArr.js";
+import { R as p } from "./radio-group-field-rac-Ctu5L43b.js";
+import { a } from "./default-limits-D7qVv_Hv.js";
+const l = () => {
+  const o = {
+    ...e(),
+    otherInputCharacterLimit: a
+  };
+  return /* @__PURE__ */ r.createElement(t.Provider, {
+    value: {
+      v2: o
+    }
+  }, /* @__PURE__ */ r.createElement(p, null));
+};
+export {
+  l as DextRadioGroupRAC
+};

package/dist/component/dext-rating-input-rac-BArLS_bA.js

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

package/dist/component/dext-tags-rac-B9tKb852.js

@@ -0,0 +1,18 @@
+import r from "react";
+import { ag as e, h as o } from "./form-Dn-MrArr.js";
+import { T as s } from "./tags-field-rac-F3yYmtiN.js";
+import { b as a } from "./default-limits-D7qVv_Hv.js";
+const l = () => {
+  const t = {
+    ...e(),
+    otherInputCharacterLimit: a
+  };
+  return /* @__PURE__ */ r.createElement(o.Provider, {
+    value: {
+      v2: t
+    }
+  }, /* @__PURE__ */ r.createElement(s, null));
+};
+export {
+  l as DextTagsRAC
+};

package/dist/component/dext-text-area-rac-cBh24v0g.js

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

package/dist/component/dext-text-input-rac-B75yIKQa.js

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

package/dist/component/dext-url-input-rac-Da6T681p.js

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