@tedi-design-system/react 18.0.0-rc.3 → 18.0.0-rc.30

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

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

package/src/tedi/components/form/date-field/date-field.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-date-field__calendar":"tedi-date-field__calendar-56bdb86f","tedi-date-field__textfield":"tedi-date-field__textfield-c80668a6","tedi-date-field__textfield--disabled":"tedi-date-field__textfield--disabled-5f79b37d","tedi-date-field__icon--disabled":"tedi-date-field__icon--disabled-0e13b2f6","tedi-date-field__container":"tedi-date-field__container-78414b07"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-date-field__calendar":"tedi-date-field__calendar-56bdb86f","tedi-date-field__calendar-popover--fullwidth":"tedi-date-field__calendar-popover--fullwidth-851e2a12","tedi-date-field__calendar--fullwidth":"tedi-date-field__calendar--fullwidth-1d852ca1","tedi-date-field__textfield":"tedi-date-field__textfield-c80668a6","tedi-date-field__textfield--disabled":"tedi-date-field__textfield--disabled-5f79b37d","tedi-date-field__icon--disabled":"tedi-date-field__icon--disabled-0e13b2f6","tedi-date-field__container":"tedi-date-field__container-78414b07"};exports.default=e;

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

@@ -1,5 +1,7 @@
 const e = {
   "tedi-date-field__calendar": "tedi-date-field__calendar-56bdb86f",
+  "tedi-date-field__calendar-popover--fullwidth": "tedi-date-field__calendar-popover--fullwidth-851e2a12",
+  "tedi-date-field__calendar--fullwidth": "tedi-date-field__calendar--fullwidth-1d852ca1",
   "tedi-date-field__textfield": "tedi-date-field__textfield-c80668a6",
   "tedi-date-field__textfield--disabled": "tedi-date-field__textfield--disabled-5f79b37d",
   "tedi-date-field__icon--disabled": "tedi-date-field__icon--disabled-0e13b2f6",