@tedi-design-system/react 18.0.0-rc.27 → 18.0.0-rc.28

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

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