@tedi-design-system/react 19.0.0-rc.6 → 19.0.0-rc.8

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

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

package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),J=require("../../../../../../external/classnames/index.cjs.js"),d=require("react"),Q=require("../../../base/typography/heading/heading.cjs.js"),C=require("../../../buttons/button/button.cjs.js"),U=require("../../../buttons/closing-button/closing-button.cjs.js"),W=require("../../../content/calendar/calendar.cjs.js"),X=require("../date-field-helpers.cjs.js"),u=require("./date-picker-modal.module.scss.cjs.js"),Z=require("../../../../providers/label-provider/use-labels.cjs.js"),c=require("../../../overlays/modal/modal.cjs.js"),$=require("../../../overlays/modal/modal-context.cjs.js"),D=(e,r)=>e instanceof Date?e:Array.isArray(e)&&e.length>0?[...e].sort((o,l)=>o.getTime()-l.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:r??new Date,v=({title:e})=>{const{labelId:r,onOpenChange:o}=$.useModal();return t.jsxs("div",{className:u.default["tedi-date-picker-modal__header"],children:[t.jsx(Q.Heading,{element:"h2",modifiers:"h4",id:r,className:u.default["tedi-date-picker-modal__title"],children:e}),t.jsx(U.ClosingButton,{size:"small",onClick:()=>o(!1)})]})},q=e=>{const{open:r,onOpenChange:o,value:l,onConfirm:S,mode:n="single",numberOfMonths:T,locale:_,localeCode:w,showOutsideDays:N=!0,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,dayStatus:L,showNavigation:P,selectionLevel:f="days",initialView:y,initialMonth:g,modalProps:i,title:R,...V}=e,{getLabel:b}=Z.useLabels(),[a,m]=d.useState(l),[F,M]=d.useState(y??f),[I,j]=d.useState(()=>D(l,g));d.useEffect(()=>{r&&(m(l),M(y??f),j(D(l,g)))},[r,l,f,y,g]);const K=d.useCallback((s,h)=>{m(n==="range"?G=>X.resolveRangeSelection(s,G,h):s)},[n]),z=d.useCallback(s=>{m(h=>n==="range"?{from:s,to:void 0}:n==="multiple"?[...Array.isArray(h)?h:[],s]:s)},[n]),E=n==="multiple"?Array.isArray(a)&&a.length>0:n==="range"?!!a&&typeof a=="object"&&"from"in a&&a.from instanceof Date:a instanceof Date,k=p===!0&&!E,Y=()=>{k||(S(a),o(!1))},x=R??b(n==="range"?"date-field.modal-title-range":n==="multiple"?"date-field.modal-title-multiple":"date-field.modal-title");return t.jsx(c.Modal,{open:r,onToggle:o,children:t.jsxs(c.Modal.Content,{position:"center","aria-label":x,...i,md:{width:"max-content",...i==null?void 0:i.md},sm:{width:"full",...i==null?void 0:i.sm},className:J.default(u.default["tedi-date-picker-modal"],i==null?void 0:i.className),children:[t.jsx(c.Modal.Header,{children:t.jsx(v,{title:x})}),t.jsx(c.Modal.Body,{className:u.default["tedi-date-picker-modal__body"],children:t.jsx(W.Calendar,{...V,numberOfMonths:T,view:F,selectionLevel:f,currentMonth:I,setCurrentMonth:j,setView:M,mode:n,value:a,locale:_,localeCode:w,showOutsideDays:N,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,dayStatus:L,showNavigation:P,handleSelect:K,applyValue:z,className:u.default["tedi-date-picker-modal__calendar"],bordered:!1})}),t.jsxs(c.Modal.Footer,{children:[t.jsx(C.Button,{visualType:"secondary",onClick:()=>o(!1),children:b("date-field.cancel")}),t.jsx(C.Button,{onClick:Y,disabled:k,children:b("date-field.confirm")})]})]})})};q.displayName="DatePickerModal";exports.DatePickerModal=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),U=require("../../../../../../external/classnames/index.cjs.js"),d=require("react"),W=require("../../../base/typography/heading/heading.cjs.js"),C=require("../../../buttons/button/button.cjs.js"),X=require("../../../buttons/closing-button/closing-button.cjs.js"),Z=require("../../../content/calendar/calendar.cjs.js"),$=require("../date-field-helpers.cjs.js"),u=require("./date-picker-modal.module.scss.cjs.js"),v=require("../../../../providers/label-provider/use-labels.cjs.js"),c=require("../../../overlays/modal/modal.cjs.js"),ee=require("../../../overlays/modal/modal-context.cjs.js"),D=(e,r)=>e instanceof Date?e:Array.isArray(e)&&e.length>0?[...e].sort((o,l)=>o.getTime()-l.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:r??new Date,te=({title:e})=>{const{labelId:r,onOpenChange:o}=ee.useModal();return t.jsxs("div",{className:u.default["tedi-date-picker-modal__header"],children:[t.jsx(W.Heading,{element:"h2",modifiers:"h4",id:r,className:u.default["tedi-date-picker-modal__title"],children:e}),t.jsx(X.ClosingButton,{size:"small",onClick:()=>o(!1)})]})},q=e=>{const{open:r,onOpenChange:o,value:l,onConfirm:S,mode:n="single",numberOfMonths:T,locale:_,localeCode:w,showOutsideDays:N=!0,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,minYear:L,maxYear:P,dayStatus:R,showNavigation:V,selectionLevel:f="days",initialView:y,initialMonth:g,modalProps:i,title:Y,...F}=e,{getLabel:b}=v.useLabels(),[a,m]=d.useState(l),[I,M]=d.useState(y??f),[K,j]=d.useState(()=>D(l,g));d.useEffect(()=>{r&&(m(l),M(y??f),j(D(l,g)))},[r,l,f,y,g]);const z=d.useCallback((s,h)=>{m(n==="range"?Q=>$.resolveRangeSelection(s,Q,h):s)},[n]),E=d.useCallback(s=>{m(h=>n==="range"?{from:s,to:void 0}:n==="multiple"?[...Array.isArray(h)?h:[],s]:s)},[n]),G=n==="multiple"?Array.isArray(a)&&a.length>0:n==="range"?!!a&&typeof a=="object"&&"from"in a&&a.from instanceof Date:a instanceof Date,x=p===!0&&!G,J=()=>{x||(S(a),o(!1))},k=Y??b(n==="range"?"date-field.modal-title-range":n==="multiple"?"date-field.modal-title-multiple":"date-field.modal-title");return t.jsx(c.Modal,{open:r,onToggle:o,children:t.jsxs(c.Modal.Content,{position:"center","aria-label":k,...i,md:{width:"max-content",...i==null?void 0:i.md},sm:{width:"full",...i==null?void 0:i.sm},className:U.default(u.default["tedi-date-picker-modal"],i==null?void 0:i.className),children:[t.jsx(c.Modal.Header,{children:t.jsx(te,{title:k})}),t.jsx(c.Modal.Body,{className:u.default["tedi-date-picker-modal__body"],children:t.jsx(Z.Calendar,{...F,numberOfMonths:T,view:I,selectionLevel:f,currentMonth:K,setCurrentMonth:j,setView:M,mode:n,value:a,locale:_,localeCode:w,showOutsideDays:N,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,minYear:L,maxYear:P,dayStatus:R,showNavigation:V,handleSelect:z,applyValue:E,className:u.default["tedi-date-picker-modal__calendar"],bordered:!1})}),t.jsxs(c.Modal.Footer,{children:[t.jsx(C.Button,{visualType:"secondary",onClick:()=>o(!1),children:b("date-field.cancel")}),t.jsx(C.Button,{onClick:J,disabled:x,children:b("date-field.confirm")})]})]})})};q.displayName="DatePickerModal";exports.DatePickerModal=q;

package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.d.ts

@@ -28,6 +28,10 @@ export interface DatePickerModalProps extends Omit<DayPickerProps, 'mode' | 'sel
     availableDays?: Date[] | ((date: Date) => boolean);
     footer?: React.ReactNode;
     monthYearSelectType?: 'dropdown' | 'grid';
+    /** Earliest year offered in the calendar header's year dropdown. @default currentYear - 100 */
+    minYear?: number;
+    /** Latest year offered in the calendar header's year dropdown. @default currentYear + 20 */
+    maxYear?: number;
     /** Per-day status overlay forwarded to `Calendar`. */
     dayStatus?: DayStatusFn;
     showNavigation?: boolean;