@tedi-design-system/react 18.2.0-rc.3 → 18.2.0-rc.4

package/src/tedi/components/form/date-field/date-field.es.js

@@ -1,37 +1,37 @@
 import { jsxs as Mt, Fragment as At, jsx as D } from "react/jsx-runtime";
-import { useFloating as xt, useClick as Ft, useInteractions as vt, useDismiss as wt, useRole as Nt, FloatingPortal as kt, FloatingFocusManager as Pt } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import V from "../../../../../external/classnames/index.es.js";
-import B, { useState as _, useCallback as ue, useEffect as T, useMemo as me } from "react";
+import { useFloating as vt, useClick as xt, useInteractions as Ft, useDismiss as wt, useRole as Nt, FloatingPortal as kt, FloatingFocusManager as Pt } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import B from "../../../../../external/classnames/index.es.js";
+import F, { useState as _, useCallback as ue, useEffect as T, useMemo as me } from "react";
 import { Calendar as Et } from "../../content/calendar/calendar.es.js";
 import { MultiValueField as Ot } from "../multi-value-field/multi-value-field.es.js";
 import { TextField as Rt } from "../textfield/textfield.es.js";
-import g from "./date-field.module.scss.es.js";
+import y from "./date-field.module.scss.es.js";
 import { getLocaleDateParts as It, buildDateRegexSource as Vt, resolveRangeSelection as Bt, CALENDAR_POPOVER_OFFSET as Tt, CALENDAR_POPOVER_PADDING as Le } from "./date-field-helpers.es.js";
 import { DatePickerModal as $t } from "./date-picker-modal/date-picker-modal.es.js";
 import { useBreakpointProps as Lt } from "../../../helpers/hooks/use-breakpoint-props.es.js";
 import { useLabels as jt } from "../../../providers/label-provider/use-labels.es.js";
 import { et as Ht } from "../../../../../external/react-day-picker/dist/esm/locale/et.es.js";
-import St, { isBreakpointBelow as je } from "../../../helpers/hooks/use-breakpoint.es.js";
-import { autoUpdate as Wt } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as Yt, flip as Ut, shift as qt, size as zt } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+import Wt, { isBreakpointBelow as je } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { autoUpdate as Yt } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as St, flip as Ut, shift as qt, size as zt } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
 import { dateMatchModifiers as Gt } from "../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.es.js";
-const Xt = B.forwardRef(($, v) => {
-  const { getCurrentBreakpointProps: He } = Lt($.defaultServerBreakpoint), { getLabel: z } = jt(), {
-    useNativePicker: Se = !1,
+const Xt = F.forwardRef((w, N) => {
+  const { getCurrentBreakpointProps: He } = Lt(w.defaultServerBreakpoint), { getLabel: z } = jt(), {
+    useNativePicker: We = !1,
     enableCalendar: m = !0,
-    calendarTrigger: L = "button",
+    calendarTrigger: $ = "button",
     numberOfMonths: G
-  } = He($), {
+  } = He(w), {
     id: pe,
     mode: s = "single",
     label: he,
-    selected: w,
+    selected: L,
     onSelect: a,
-    disabled: N,
-    disabledMatchers: k,
-    placeholder: We,
-    className: Ye,
-    formatDate: f,
+    disabled: k,
+    disabledMatchers: P,
+    placeholder: Ye,
+    className: Se,
+    formatDate: d,
     required: j,
     showOutsideDays: ge = !0,
     parseDate: Ue,
@@ -39,22 +39,22 @@ const Xt = B.forwardRef(($, v) => {
     dayStatus: be,
     tagsDirection: qe,
     showNavigation: De = !0,
-    selectionLevel: P = "days",
+    selectionLevel: E = "days",
     initialView: H,
     locale: _e = Ht,
-    localeCode: S = "et-EE",
-    initialMonth: W,
+    localeCode: W = "et-EE",
+    initialMonth: Y,
     closeOnSelect: ze,
     footer: Ce,
-    defaultValue: Y,
+    defaultValue: S,
     minDate: X,
     maxDate: J,
     disablePast: Me,
     disableFuture: Ae,
     shouldDisableMonth: K,
     shouldDisableYear: Q,
-    readOnly: E,
-    availableDays: xe,
+    readOnly: O,
+    availableDays: ve,
     inputProps: i,
     modal: Z = !1,
     modalProps: Ge,
@@ -71,31 +71,31 @@ const Xt = B.forwardRef(($, v) => {
     lg: ar,
     xl: ir,
     xxl: or,
-    ...Fe
-  } = $, c = Se && s === "single", ve = St($.defaultServerBreakpoint), x = je(ve, "md"), [Qe, y] = _(w ?? Y), [p, O] = _(!1), [ee, we] = _(!1), [Ze, Ne] = _(H ?? P), [te, b] = _(""), [ke, u] = _(!1), [Pe, re] = _(!1), h = m && !c && !E && (Z === !0 || typeof Z == "string" && je(ve, Z)), Ee = x && !h && typeof G == "number" && G > 1 ? 1 : G, d = w !== void 0, n = d ? w : Qe, ae = B.useRef(null), Oe = B.useRef(null), et = B.useCallback(
+    ...xe
+  } = w, c = We && s === "single", Fe = Wt(w.defaultServerBreakpoint), v = je(Fe, "md"), [Qe, p] = _(L ?? S), [h, R] = _(!1), [ee, we] = _(!1), [Ze, Ne] = _(H ?? E), [te, b] = _(""), [ke, u] = _(!1), [Pe, re] = _(!1), g = m && !c && !O && (Z === !0 || typeof Z == "string" && je(Fe, Z)), Ee = v && !g && typeof G == "number" && G > 1 ? 1 : G, { current: f } = F.useRef("selected" in w), o = f ? L : Qe, ae = F.useRef(null), Oe = F.useRef(null), et = F.useCallback(
     (e) => {
-      ae.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
+      ae.current = e, typeof N == "function" ? N(e) : N && (N.current = e);
     },
-    [v]
+    [N]
   ), tt = (e) => {
     if (!e) return "";
-    const t = e.getFullYear(), r = String(e.getMonth() + 1).padStart(2, "0"), o = String(e.getDate()).padStart(2, "0");
-    return `${t}-${r}-${o}`;
-  }, rt = c && n instanceof Date ? tt(n) : "", ie = ue((e, t) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [...e].sort((r, o) => r.getTime() - o.getTime())[0] : e && typeof e == "object" && "from" in e && e.from instanceof Date ? e.from : e && typeof e == "object" && "to" in e && e.to instanceof Date ? e.to : t ?? /* @__PURE__ */ new Date(), []), [at, oe] = _(() => ie(n, W));
+    const t = e.getFullYear(), r = String(e.getMonth() + 1).padStart(2, "0"), n = String(e.getDate()).padStart(2, "0");
+    return `${t}-${r}-${n}`;
+  }, rt = c && o instanceof Date ? tt(o) : "", ie = ue((e, t) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [...e].sort((r, n) => r.getTime() - n.getTime())[0] : e && typeof e == "object" && "from" in e && e.from instanceof Date ? e.from : e && typeof e == "object" && "to" in e && e.to instanceof Date ? e.to : t ?? /* @__PURE__ */ new Date(), []), [at, oe] = _(() => ie(o, Y));
   T(() => {
-    p || oe(ie(n, W));
-  }, [n, W, p, ie]), T(() => {
-    p && Ne(H ?? P);
-  }, [p, P, H]), T(() => {
-    d && y(w);
-  }, [w, d]);
+    h || oe(ie(o, Y));
+  }, [o, Y, h, ie]), T(() => {
+    h && Ne(H ?? E);
+  }, [h, E, H]), T(() => {
+    f && p(L);
+  }, [L, f]);
   const C = me(
-    () => new Intl.DateTimeFormat(S, {
+    () => new Intl.DateTimeFormat(W, {
       day: "2-digit",
       month: "2-digit",
       year: "numeric"
     }),
-    [S]
+    [W]
   ), M = ue(
     (e) => {
       if (!e) return "";
@@ -108,43 +108,43 @@ const Xt = B.forwardRef(($, v) => {
       return "";
     },
     [C]
-  ), ne = ze ?? s === "single", Re = s === "multiple" && Array.isArray(n) ? n.map((e, t) => ({
+  ), ne = ze ?? s === "single", Re = s === "multiple" && Array.isArray(o) ? o.map((e, t) => ({
     id: t,
-    label: f ? f(e) : M(e),
+    label: d ? d(e) : M(e),
     date: e
   })) : [], U = me(() => {
     const e = [];
-    return N && (Array.isArray(N) ? e.push(...N) : e.push(N)), k && (Array.isArray(k) ? e.push(...k) : e.push(k)), X && e.push({ before: X }), J && e.push({ after: J }), Me && e.push({ before: /* @__PURE__ */ new Date() }), Ae && e.push({ after: /* @__PURE__ */ new Date() }), K && e.push((t) => K(t)), Q && e.push((t) => Q(t)), e;
+    return k && (Array.isArray(k) ? e.push(...k) : e.push(k)), P && (Array.isArray(P) ? e.push(...P) : e.push(P)), X && e.push({ before: X }), J && e.push({ after: J }), Me && e.push({ before: /* @__PURE__ */ new Date() }), Ae && e.push({ after: /* @__PURE__ */ new Date() }), K && e.push((t) => K(t)), Q && e.push((t) => Q(t)), e;
   }, [
-    N,
     k,
+    P,
     X,
     J,
     Me,
     Ae,
     K,
     Q
-  ]), F = ue(
+  ]), x = ue(
     (e) => Gt(e, U),
     [U]
-  ), it = (e, t, r, o) => {
-    const l = s === "range" ? Bt(e, n, t) : e;
-    if (u(!1), d || y(l), a == null || a(l, t, r, o), l) {
-      const A = f ? f(l) : M(l);
+  ), it = (e, t, r, n) => {
+    const l = s === "range" ? Bt(e, o, t) : e;
+    if (u(!1), f || p(l), a == null || a(l, t, r, n), l) {
+      const A = d ? d(l) : M(l);
       b(A);
     } else
       b("");
-    ne && O(!1);
+    ne && R(!1);
   }, ot = (e) => {
-    if (F(e)) return;
-    const t = s === "range" ? { from: e, to: void 0 } : s === "multiple" ? [...Array.isArray(n) ? n : [], e] : e;
-    u(!1), d || y(t), a == null || a(t, e, {}, {});
-    const r = f ? f(t) : M(t);
-    b(r), ne && O(!1);
+    if (x(e)) return;
+    const t = s === "range" ? { from: e, to: void 0 } : s === "multiple" ? [...Array.isArray(o) ? o : [], e] : e;
+    u(!1), f || p(t), a == null || a(t, e, {}, {});
+    const r = d ? d(t) : M(t);
+    b(r), ne && R(!1);
   }, nt = me(() => {
     const e = It(C), t = new RegExp(`^${Vt(e)}$`), { fieldOrder: r } = e;
-    return (o) => {
-      const l = o.match(t);
+    return (n) => {
+      const l = n.match(t);
       if (!l) return;
       const A = {};
       r.forEach((_t, Ct) => {
@@ -152,14 +152,14 @@ const Xt = B.forwardRef(($, v) => {
       });
       const { day: fe, month: de, year: ce } = A;
       if (fe === void 0 || de === void 0 || ce === void 0) return;
-      const I = new Date(ce, de - 1, fe);
-      if (!(isNaN(I.getTime()) || I.getFullYear() !== ce || I.getMonth() !== de - 1 || I.getDate() !== fe))
-        return I;
+      const V = new Date(ce, de - 1, fe);
+      if (!(isNaN(V.getTime()) || V.getFullYear() !== ce || V.getMonth() !== de - 1 || V.getDate() !== fe))
+        return V;
     };
   }, [C]), Ie = (e) => (Ue ?? (s === "single" ? nt : () => {
   }))(e), Ve = (e) => s === "single" && e instanceof Date || s === "multiple" && Array.isArray(e) || s === "range" && !!e && !Array.isArray(e) && "from" in e, st = (e) => {
     if (b(e), re(!1), e.trim() === "") {
-      u(!1);
+      u(!1), o !== void 0 && (f || p(void 0), a == null || a(void 0, void 0, {}, {}));
       return;
     }
     const t = Ie(e);
@@ -167,12 +167,12 @@ const Xt = B.forwardRef(($, v) => {
       u(!1);
       return;
     }
-    const o = t && !Array.isArray(t) && "from" in t ? t : null;
-    if (t instanceof Date && F(t) || Array.isArray(t) && t.some((A) => A instanceof Date && F(A)) || !!o && (o.from && F(o.from) || o.to && F(o.to))) {
+    const n = t && !Array.isArray(t) && "from" in t ? t : null;
+    if (t instanceof Date && x(t) || Array.isArray(t) && t.some((A) => A instanceof Date && x(A)) || !!n && (n.from && x(n.from) || n.to && x(n.to))) {
       u(!0);
       return;
     }
-    u(!1), d || y(t), a == null || a(t, t, {}, {}), t instanceof Date && oe(t), ne && O(!1);
+    u(!1), f || p(t), a == null || a(t, t, {}, {}), t instanceof Date && oe(t), ne && R(!1);
   }, lt = () => {
     if (te.trim() === "") {
       re(!1);
@@ -181,36 +181,36 @@ const Xt = B.forwardRef(($, v) => {
     re(!Ve(Ie(te)));
   };
   T(() => {
-    if (d) {
-      const e = f ? f(n) : M(n);
+    if (f) {
+      const e = d ? d(o) : M(o);
       b(e);
     }
-  }, [n, d, f, M]), T(() => {
-    if (!d && Y) {
-      const e = f ? f(Y) : M(Y);
+  }, [o, f, d, M]), T(() => {
+    if (!f && S) {
+      const e = d ? d(S) : M(S);
       b(e);
     }
   }, []);
-  const ft = xt({
-    open: p,
-    onOpenChange: O,
-    placement: L === "input" ? "bottom-start" : "bottom-end",
+  const ft = vt({
+    open: h,
+    onOpenChange: R,
+    placement: $ === "input" ? "bottom-start" : "bottom-end",
     middleware: [
-      Yt(Tt),
+      St(Tt),
       Ut(),
       qt({ padding: Le }),
       zt({
         padding: Le,
         apply({ availableWidth: e, elements: t }) {
           const r = t.floating;
-          if (r.style.width = "", r.style.maxWidth = "", r.style.overflowX = "", x) return;
+          if (r.style.width = "", r.style.maxWidth = "", r.style.overflowX = "", v) return;
           r.style.width = "max-content", r.getBoundingClientRect().width > e && (r.style.width = "min-content", r.style.maxWidth = `${e}px`);
         }
       })
     ],
-    whileElementsMounted: Wt
-  }), { refs: R, context: q, x: dt, y: ct, strategy: ut } = ft, mt = Ft(q), Be = vt([
-    ...m && !c && L === "input" && !h ? [mt] : [],
+    whileElementsMounted: Yt
+  }), { refs: I, context: q, x: dt, y: ct, strategy: ut } = ft, mt = xt(q), Be = Ft([
+    ...m && !c && $ === "input" && !g ? [mt] : [],
     wt(q, {
       outsidePress: (e) => {
         const t = e.target;
@@ -219,11 +219,11 @@ const Xt = B.forwardRef(($, v) => {
     }),
     Nt(q, { role: "dialog" })
   ]);
-  B.useEffect(() => {
+  F.useEffect(() => {
     var t, r;
     const e = s === "multiple" ? ((t = Oe.current) == null ? void 0 : t.wrapper) ?? null : ((r = ae.current) == null ? void 0 : r.input) ?? null;
-    R.setPositionReference(e ?? R.reference.current);
-  }, [s, p, R]);
+    I.setPositionReference(e ?? I.reference.current);
+  }, [s, h, I]);
   const pt = () => {
     var t;
     const e = (t = ae.current) == null ? void 0 : t.input;
@@ -237,39 +237,39 @@ const Xt = B.forwardRef(($, v) => {
       e.focus();
     }
   }, se = () => {
-    !m || E || (c ? pt() : h ? we(!0) : O((e) => !e));
+    !m || O || (c ? pt() : g ? we(!0) : R((e) => !e));
   }, ht = (e) => {
-    if (u(!1), d || y(e), a == null || a(e, e, {}, {}), e) {
-      const t = f ? f(e) : M(e);
+    if (u(!1), f || p(e), a == null || a(e, e, {}, {}), e) {
+      const t = d ? d(e) : M(e);
       b(t);
     } else
       b("");
   }, gt = (e) => {
     if (!e) {
-      u(!1), d || y(void 0), a == null || a(void 0, void 0, {}, {});
+      u(!1), f || p(void 0), a == null || a(void 0, void 0, {}, {});
       return;
     }
-    const [t, r, o] = e.split("-").map(Number);
-    if (!t || !r || !o) return;
-    const l = new Date(t, r - 1, o);
+    const [t, r, n] = e.split("-").map(Number);
+    if (!t || !r || !n) return;
+    const l = new Date(t, r - 1, n);
     if (!Number.isNaN(l.getTime())) {
-      if (F(l)) {
+      if (x(l)) {
         u(!0);
         return;
       }
-      u(!1), d || y(l), a == null || a(l, l, {}, {});
+      u(!1), f || p(l), a == null || a(l, l, {}, {});
     }
   }, yt = Be.getReferenceProps(
-    h && L === "input" ? { onClick: () => se() } : void 0
+    g && $ === "input" ? { onClick: () => se() } : void 0
   ), {
     role: nr,
     "aria-expanded": sr,
     "aria-haspopup": lr,
     "aria-controls": bt,
     ...Dt
-  } = yt, Te = h ? void 0 : bt, le = z("dateField.openCalendar"), $e = {
+  } = yt, Te = g ? void 0 : bt, le = z("dateField.openCalendar"), $e = {
     "aria-label": le,
-    "aria-expanded": h ? ee : p,
+    "aria-expanded": g ? ee : h,
     "aria-haspopup": "dialog",
     "aria-controls": Te
   };
@@ -277,9 +277,9 @@ const Xt = B.forwardRef(($, v) => {
     /* @__PURE__ */ D(
       "div",
       {
-        className: V(g["tedi-date-field__container"], Ye),
+        className: B(y["tedi-date-field__container"], Se),
         ...Dt,
-        ref: R.setReference,
+        ref: I.setReference,
         children: s === "multiple" ? /* @__PURE__ */ D(
           Ot,
           {
@@ -295,12 +295,12 @@ const Xt = B.forwardRef(($, v) => {
             isClearable: !0,
             required: j,
             onChange: (e) => {
-              if (!Array.isArray(n)) return;
+              if (!Array.isArray(o)) return;
               const t = Re.filter((r) => e.includes(r.label)).map((r) => r.date);
-              d || y(t), a == null || a(t, {}, {}, {});
+              f || p(t), a == null || a(t, {}, {}, {});
             },
-            className: V(g["tedi-date-field__textfield"], {
-              [g["tedi-date-field__icon--disabled"]]: !m || E
+            className: B(y["tedi-date-field__textfield"], {
+              [y["tedi-date-field__icon--disabled"]]: !m || O
             })
           }
         ) : /* @__PURE__ */ D(
@@ -310,9 +310,9 @@ const Xt = B.forwardRef(($, v) => {
             ref: et,
             id: pe,
             label: he,
-            readOnly: E,
+            readOnly: O,
             value: c ? rt : te,
-            placeholder: We,
+            placeholder: Ye,
             icon: "calendar_today",
             isClearable: !0,
             onIconClick: se,
@@ -328,17 +328,17 @@ const Xt = B.forwardRef(($, v) => {
               const e = i == null ? void 0 : i.helper, t = ke ? Je : Pe ? Ke : null, r = t ? { text: t, type: "error" } : null;
               return r ? e ? Array.isArray(e) ? [...e, r] : [e, r] : r : e;
             })(),
-            className: V(g["tedi-date-field__textfield"], {
-              [g["tedi-date-field__textfield--disabled"]]: i == null ? void 0 : i.disabled,
-              [g["tedi-date-field__icon--disabled"]]: !m || E
+            className: B(y["tedi-date-field__textfield"], {
+              [y["tedi-date-field__textfield--disabled"]]: i == null ? void 0 : i.disabled,
+              [y["tedi-date-field__icon--disabled"]]: !m || O
             }),
             input: {
               ...i == null ? void 0 : i.input,
               ...c && { type: "date" },
-              ...m && !c && L === "input" ? {
+              ...m && !c && $ === "input" ? {
                 role: "combobox",
                 "aria-haspopup": "dialog",
-                "aria-expanded": h ? ee : p,
+                "aria-expanded": g ? ee : h,
                 "aria-controls": Te
               } : {}
             }
@@ -346,74 +346,74 @@ const Xt = B.forwardRef(($, v) => {
         )
       }
     ),
-    h && /* @__PURE__ */ D(
+    g && /* @__PURE__ */ D(
       $t,
       {
         open: ee,
         onOpenChange: we,
-        value: n,
+        value: o,
         onConfirm: ht,
         mode: s,
         numberOfMonths: Ee,
         locale: _e,
-        localeCode: S,
+        localeCode: W,
         showOutsideDays: ge,
         disabledMatchers: U,
         required: j,
-        availableDays: xe,
+        availableDays: ve,
         footer: Ce,
         monthYearSelectType: ye,
         dayStatus: be,
         showNavigation: De,
-        selectionLevel: P,
+        selectionLevel: E,
         initialView: H,
-        initialMonth: W,
+        initialMonth: Y,
         modalProps: Ge,
-        ...Fe,
+        ...xe,
         title: Xe
       }
     ),
-    m && !c && !h && /* @__PURE__ */ D(kt, { children: p && /* @__PURE__ */ D(Pt, { context: q, modal: !1, initialFocus: -1, children: /* @__PURE__ */ D(
+    m && !c && !g && /* @__PURE__ */ D(kt, { children: h && /* @__PURE__ */ D(Pt, { context: q, modal: !1, initialFocus: -1, children: /* @__PURE__ */ D(
       "div",
       {
-        ref: R.setFloating,
-        className: V({
-          [g["tedi-date-field__calendar-popover--fullwidth"]]: x
+        ref: I.setFloating,
+        className: B({
+          [y["tedi-date-field__calendar-popover--fullwidth"]]: v
         }),
         ...Be.getFloatingProps({
           style: {
             position: ut,
             top: ct ?? 0,
-            left: x ? 0 : dt ?? 0,
-            right: x ? 0 : void 0
+            left: v ? 0 : dt ?? 0,
+            right: v ? 0 : void 0
           }
         }),
         children: /* @__PURE__ */ D(
           Et,
           {
-            ...Fe,
+            ...xe,
             numberOfMonths: Ee,
             view: Ze,
-            selectionLevel: P,
+            selectionLevel: E,
             currentMonth: at,
             setCurrentMonth: oe,
             setView: Ne,
             mode: s,
-            value: n,
+            value: o,
             locale: _e,
-            localeCode: S,
+            localeCode: W,
             showOutsideDays: ge,
             disabledMatchers: U,
             required: j,
-            availableDays: xe,
+            availableDays: ve,
             footer: Ce,
             monthYearSelectType: ye,
             dayStatus: be,
             showNavigation: De,
             handleSelect: it,
             applyValue: ot,
-            className: V(g["tedi-date-field__calendar"], {
-              [g["tedi-date-field__calendar--fullwidth"]]: x
+            className: B(y["tedi-date-field__calendar"], {
+              [y["tedi-date-field__calendar--fullwidth"]]: v
             })
           }
         )