@tedi-design-system/react 18.1.0-rc.25 → 18.1.0-rc.27

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

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