@tedi-design-system/react 18.0.0-rc.8 → 18.0.0-rc.9

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

@@ -70,8 +70,22 @@ export interface DateFieldProps extends BreakpointSupport<DateFieldBreakpointPro
     onSelect?: OnSelectHandler<Date | Date[] | DateRange | undefined>;
     /**
      * Disable specific dates. Accepts the same matchers as React DayPicker's `disabled` prop.
+     *
+     * @deprecated Use `disabledMatchers` instead — same shape, semantics, and merging
+     * behaviour. The current overload re-uses the form-control `disabled` name for a
+     * matcher prop, which is inconsistent with `DateTimeField`'s boolean `disabled`
+     * and confusing for consumers migrating between the two siblings. `disabledMatchers`
+     * stays additive for now; this overload will be replaced by `disabled?: boolean`
+     * in a future major.
      */
     disabled?: Matcher | Matcher[];
+    /**
+     * Disable specific dates via react-day-picker matchers. Mirrors the
+     * `disabledMatchers` prop on `DateTimeField` so the API is consistent across
+     * the date-field family. Merges with the (deprecated) `disabled` overload —
+     * if both are supplied, the union of both matcher sets is applied.
+     */
+    disabledMatchers?: Matcher | Matcher[];
     /**
      * Input placeholder text when no date is selected.
      */
@@ -197,6 +211,14 @@ export interface DateFieldProps extends BreakpointSupport<DateFieldBreakpointPro
      * Props to pass down to the underlying TextField (in 'single' mode) or MultiValueField (in 'multiple' mode). This allows for additional customization of the input field, such as adding custom styles, attributes, or event handlers.
      */
     inputProps?: DateTextFieldProps | DateMultiValueFieldProps;
+    /**
+     * Error message rendered below the input when the user types a date that
+     * matches one of the disable matchers (`disablePast`, `disableFuture`,
+     * `minDate`, `maxDate`, `disabledMatchers`, or the deprecated `disabled`
+     * overload). Falls back to the localised `dateField.disabledDateError`
+     * label.
+     */
+    disabledDateErrorMessage?: string;
 }
 export declare const DateField: React.ForwardRefExoticComponent<DateFieldProps & React.RefAttributes<TextFieldForwardRef>>;
 export {};

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

@@ -1,184 +1,208 @@
-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 { 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 { 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,
+import { getLocaleDateParts as st, buildDateRegexSource as lt, CALENDAR_POPOVER_OFFSET as ft, CALENDAR_POPOVER_PADDING as ue } from "./date-field-helpers.es.js";
+import { et as dt } from "../../../../../external/react-day-picker/dist/esm/locale/et.es.js";
+import { autoUpdate as ct } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as ut, flip as mt, shift as pt, size as ht } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+import { useBreakpointProps as gt } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as yt } from "../../../providers/label-provider/use-labels.es.js";
+import { useBreakpoint as bt, isBreakpointBelow as Dt } from "../../../helpers/hooks/use-breakpoint.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 } = gt(O.defaultServerBreakpoint), { getLabel: pe } = yt(), {
+    useNativePicker: he = !1,
+    enableCalendar: d = !0,
+    calendarTrigger: B = "button",
+    numberOfMonths: I
+  } = me(O), {
+    id: re,
+    mode: m = "single",
+    label: ie,
+    selected: N,
     onSelect: i,
-    disabled: N,
-    placeholder: pe,
-    className: he,
-    formatDate: l,
-    required: V,
-    showOutsideDays: ge = !0,
-    parseDate: ye,
-    monthYearSelectType: be,
-    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(
+    disabled: k,
+    disabledMatchers: w,
+    placeholder: ge,
+    className: ye,
+    formatDate: f,
+    required: T,
+    showOutsideDays: be = !0,
+    parseDate: De,
+    monthYearSelectType: xe,
+    selectionLevel: E = "days",
+    locale: _e = dt,
+    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,
+    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 = bt(O.defaultServerBreakpoint), we = Dt(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(
     (e) => {
-      oe.current = e, typeof C == "function" ? C(e) : C && (C.current = e);
+      le.current = e, typeof C == "function" ? C(e) : C && (C.current = e);
     },
     [C]
-  ), Pe = (e) => {
+  ), Re = (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"), 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($, {
       day: "2-digit",
       month: "2-digit",
       year: "numeric"
     }),
-    [E]
-  ), _ = Z(
+    [$]
+  ), _ = ee(
     (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 (Array.isArray(e)) return e.map((t) => g.format(t)).join(", ");
       if (e.from) {
-        const r = g.format(e.from);
-        return e.to ? `${r} – ${g.format(e.to)}` : r;
+        const t = g.format(e.from);
+        return e.to ? `${t} – ${g.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),
+  ), z = Ae ?? m === "single", fe = m === "multiple" && Array.isArray(s) ? s.map((e, t) => ({
+    id: t,
+    label: f ? f(e) : _(e),
     date: e
-  })) : [], H = ee(() => {
+  })) : [], G = te(() => {
     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 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;
+  }, [
+    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);
     } 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]);
+    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]);
       });
-      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: 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;
     };
-  }, [g]), $e = (e) => {
-    x(e);
-    const t = (ye ?? (c === "single" ? Ie : () => {
+  }, [g]), Le = (e) => {
+    if (x(e), e.trim() === "") {
+      h(!1);
+      return;
+    }
+    const r = (De ?? (m === "single" ? $e : () => {
     }))(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 (!(m === "single" && r instanceof Date || m === "multiple" && Array.isArray(r) || m === "range" && !!r && !Array.isArray(r) && "from" in r)) {
+      h(!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);
+      return;
+    }
+    h(!1), o || p(r), i == null || i(r, r, {}, {}), r instanceof Date && q(r), z && D(!1);
   };
-  A(() => {
-    if (n) {
-      const e = l ? l(o) : _(o);
+  v(() => {
+    if (o) {
+      const e = f ? f(s) : _(s);
       x(e);
     }
-  }, [o, n, l, _]), A(() => {
-    if (!n && O) {
-      const e = l ? l(O) : _(O);
+  }, [s, o, f, _]), v(() => {
+    if (!o && R) {
+      const e = f ? f(R) : _(R);
       x(e);
     }
   }, []);
-  const Ve = Ke({
+  const je = Qe({
     open: u,
     onOpenChange: D,
-    placement: I === "input" ? "bottom-start" : "bottom-end",
+    placement: B === "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 = "");
+      ut(ft),
+      mt(),
+      pt({ padding: ue }),
+      ht({
+        padding: ue,
+        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 = "");
         }
       })
     ],
-    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: ct
+  }), { refs: de, context: V, x: We, y: Se, strategy: Ye } = je, He = Xe(V), ce = Ze([
+    ...d && !c && B === "input" ? [He] : [],
+    et(V, {
+      outsidePress: (e) => {
+        const t = e.target;
+        return !(t != null && t.closest('[role="menu"], [role="listbox"]'));
+      }
+    }),
+    tt(V, { role: "dialog" })
+  ]), Ue = () => {
+    var t;
+    const e = (t = le.current) == null ? void 0 : t.input;
     if (e) {
       if (typeof e.showPicker == "function")
         try {
@@ -188,108 +212,120 @@ const gt = 4, de = 8, yt = X.forwardRef((v, C) => {
         }
       e.focus();
     }
-  }, Le = (e) => {
+  }, qe = (e) => {
     if (!e) {
-      n || h(void 0), i == null || i(void 0, void 0, {}, {});
+      h(!1), o || p(void 0), i == null || i(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, 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);
+        return;
+      }
+      h(!1), o || p(a), i == null || i(a, a, {}, {});
+    }
   };
-  return /* @__PURE__ */ He(Je, { children: [
+  return /* @__PURE__ */ Je(Ke, { children: [
     /* @__PURE__ */ y(
       "div",
       {
-        className: Q(b["tedi-date-field__container"], he),
+        className: X(b["tedi-date-field__container"], ye),
         ...ce.getReferenceProps(),
-        ref: fe.setReference,
-        children: c === "multiple" ? /* @__PURE__ */ y(
-          at,
+        ref: de.setReference,
+        children: m === "multiple" ? /* @__PURE__ */ y(
+          nt,
           {
-            ...m,
-            id: te,
-            label: re,
-            values: se.map((e) => e.label),
+            ...n,
+            id: re,
+            label: ie,
+            values: fe.map((e) => e.label),
             icon: "calendar_today",
-            onIconClick: () => f && D((e) => !e),
-            iconButtonProps: f ? { "aria-expanded": u, "aria-haspopup": "dialog" } : void 0,
+            onIconClick: () => d && D((e) => !e),
+            iconButtonProps: d ? { "aria-expanded": u, "aria-haspopup": "dialog" } : void 0,
             isClearable: !0,
-            required: V,
+            required: T,
             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, {}, {}, {});
+              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, {}, {}, {});
             },
-            className: Q(b["tedi-date-field__textfield"], {
-              [b["tedi-date-field__icon--disabled"]]: !f || U
+            className: X(b["tedi-date-field__textfield"], {
+              [b["tedi-date-field__icon--disabled"]]: !d || H
             })
           }
         ) : /* @__PURE__ */ y(
-          nt,
+          ot,
           {
-            ...m,
-            ref: ve,
-            id: te,
-            label: re,
-            readOnly: U,
-            value: d ? Oe : Ae,
-            placeholder: pe,
+            ...n,
+            ref: Ee,
+            id: re,
+            label: ie,
+            readOnly: H,
+            value: c ? Ve : Oe,
+            placeholder: ge,
             icon: "calendar_today",
+            "aria-expanded": d && !c ? u : void 0,
             isClearable: !0,
             onIconClick: () => {
-              f && (d ? Ye() : D((e) => !e));
+              d && (c ? Ue() : 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
+            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),
+            helper: (() => {
+              const e = n == null ? void 0 : n.helper, t = se ? { text: Ce, 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
             }),
             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" },
+              ...d && !c && B === "input" ? { "aria-haspopup": "dialog", "aria-expanded": u } : {}
             }
           }
         )
       }
     ),
-    f && !d && /* @__PURE__ */ y(tt, { children: u && /* @__PURE__ */ y(rt, { context: R, modal: !1, initialFocus: -1, children: /* @__PURE__ */ y(
+    d && !c && /* @__PURE__ */ y(rt, { children: u && /* @__PURE__ */ y(it, { context: V, modal: !1, initialFocus: -1, children: /* @__PURE__ */ y(
       "div",
       {
-        ref: fe.setFloating,
+        ref: de.setFloating,
         ...ce.getFloatingProps({
           style: {
-            position: We,
-            top: je ?? 0,
-            left: Ee ?? 0
+            position: Ye,
+            top: Se ?? 0,
+            left: We ?? 0
           }
         }),
         children: /* @__PURE__ */ y(
-          it,
+          at,
           {
-            ...Fe,
-            numberOfMonths: ke,
-            view: we,
-            selectionLevel: P,
-            currentMonth: Re,
-            setCurrentMonth: z,
-            setView: ne,
-            mode: c,
-            value: o,
-            locale: De,
-            localeCode: E,
-            showOutsideDays: ge,
-            disabledMatchers: H,
-            required: V,
-            availableDays: Ce,
-            footer: _e,
-            monthYearSelectType: be,
-            handleSelect: Te,
-            applyValue: Be,
+            ...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"]
           }
         )
@@ -297,7 +333,7 @@ const gt = 4, de = 8, yt = X.forwardRef((v, C) => {
     ) }) })
   ] });
 });
-yt.displayName = "DateField";
+_t.displayName = "DateField";
 export {
-  yt as DateField
+  _t as DateField
 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),D=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),w=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),Fe=require("../../buttons/button/button.cjs.js"),vt=require("../../content/calendar/calendar.cjs.js"),y=require("../date-field/date-field-helpers.cjs.js"),xt=require("../textfield/textfield.cjs.js"),Te=require("../time-picker/time-picker.cjs.js"),a=require("./date-time-field.module.scss.cjs.js"),Nt=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),Dt=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),G=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),yt=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),jt=require("../../../providers/label-provider/use-labels.cjs.js"),Me=require("../../../helpers/hooks/use-breakpoint.cjs.js"),kt=require("../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.cjs.js"),h=s=>String(s).padStart(2,"0"),g=s=>s?`${h(s.getHours())}:${h(s.getMinutes())}`:"00:00",_=(s,c)=>{const[U,b]=c.split(":"),R=Number(U),P=Number(b),E=new Date(s);return E.setHours(Number.isFinite(R)?R:0,Number.isFinite(P)?P:0,0,0),E},ne=s=>s instanceof Date,Ft=s=>s?`${s.getFullYear()}-${h(s.getMonth()+1)}-${h(s.getDate())}T${h(s.getHours())}:${h(s.getMinutes())}`:"",Tt=s=>{if(!s)return;const c=new Date(s);return isNaN(c.getTime())?void 0:c},Mt=s=>!s||ne(s)?{}:s,St=s=>ne(s)?s:void 0,le=n.forwardRef((s,c)=>{const{getCurrentBreakpointProps:U}=yt.useBreakpointProps(s.defaultServerBreakpoint),{getLabel:b}=jt.useLabels(),R=Me.useBreakpoint(s.defaultServerBreakpoint),P=Me.isBreakpointBelow(R,"md"),{layout:E="side-by-side",useNativePicker:Se=!1,monthYearSelectType:Ce="dropdown",timeGridVariant:we,showOutsideDays:Re=!0,availableTimes:v,timeHeading:z=b("dateTimeField.timeHeading")}=U(s),{id:Pe,label:Ee,placeholder:Ve,className:qe,value:de,defaultValue:Ae,onChange:W,required:oe,readOnly:Oe,disabled:V,minDate:ce,maxDate:ue,disablePast:me,disableFuture:fe,disabledMatchers:j,stepMinutes:he=15,initialMonth:Y,locale:$e=Nt.et,localeCode:k="et-EE",selectTimeLabel:Le=b("dateTimeField.selectTime"),backLabel:Be=b("dateTimeField.back"),mode:He="single",selectionLevel:Ie="days",inputProps:l,disabledDateErrorMessage:Ge=b("dateField.disabledDateError")}=s,d=He==="range",f=Se&&!d,F=d?"side-by-side":E,pe=we??(F==="multi-step"?"radio":"button"),ge=de!==void 0,[Ue,ze]=n.useState(Ae),x=ge?de:Ue,u=d?Mt(x):{},m=d?void 0:St(x),[N,J]=n.useState(!1),[We,K]=n.useState("date"),[Ye,_e]=n.useState("days"),Q=d?u.from:m,[Je,q]=n.useState(()=>Q??Y??new Date),be=n.useRef(Q);be.current=Q,n.useEffect(()=>{N||(K("date"),_e("days"),q(be.current??Y??new Date))},[N,Y]);const A=n.useMemo(()=>new Intl.DateTimeFormat(k,{day:"2-digit",month:"2-digit",year:"numeric"}),[k]),Ke=n.useMemo(()=>new Intl.DateTimeFormat(k,{day:"2-digit",month:"2-digit",year:"2-digit"}),[k]),O=n.useCallback(e=>e?`${A.format(e)} ${h(e.getHours())}:${h(e.getMinutes())}`:"",[A]),$=n.useCallback(e=>{if(!e)return"";if(ne(e))return O(e);const t=O(e.from),r=O(e.to);return!t&&!r?"":r?t?`${t} – ${r}`:r:t},[O]),Qe=n.useMemo(()=>{const e=y.getLocaleDateParts(A),{fieldOrder:t}=e,r=new RegExp(`^${y.buildDateRegexSource(e)}\\s+(\\d{2}):(\\d{2})$`);return gt=>{const I=gt.trim().match(r);if(!I)return;const ye={};t.forEach((_t,bt)=>{ye[_t]=Number(I[bt+1])});const je=Number(I[t.length+1]),ke=Number(I[t.length+2]),{day:ae,month:se,year:re}=ye;if(ae===void 0||se===void 0||re===void 0||je>23||ke>59)return;const C=new Date(re,se-1,ae,je,ke,0,0);if(!(isNaN(C.getTime())||C.getFullYear()!==re||C.getMonth()!==se-1||C.getDate()!==ae))return C}},[A]),[Xe,X]=n.useState(()=>$(x)),[ve,p]=n.useState(!1);n.useEffect(()=>{X($(x))},[x,$]);const Ze=D.useFloating({open:N,onOpenChange:J,placement:"bottom-end",middleware:[G.offset(y.CALENDAR_POPOVER_OFFSET),G.flip(),G.shift({padding:y.CALENDAR_POPOVER_PADDING}),G.size({padding:y.CALENDAR_POPOVER_PADDING,apply({availableWidth:e,elements:t}){t.floating.style.maxWidth=`${e}px`}})],whileElementsMounted:Dt.autoUpdate}),{refs:Z,context:ee,x:et,y:tt,strategy:it}=Ze,at=D.useInteractions([D.useDismiss(ee,{outsidePress:e=>{const t=e.target;return!(t!=null&&t.closest('[role="menu"], [role="listbox"]'))}}),D.useRole(ee,{role:"dialog"})]),L=n.useRef(null),st=n.useCallback(e=>{L.current=e,typeof c=="function"?c(e):c&&(c.current=e)},[c]);n.useEffect(()=>{var e;(e=L.current)!=null&&e.inner&&Z.setReference(L.current.inner)},[Z]);const o=e=>{ge||ze(e),W==null||W(e),X($(e))},T=n.useCallback(e=>{if(v)return typeof v=="function"?v(e??new Date):v},[v]),M=n.useCallback((e,t)=>{const r=T(e);return!r||r.length===0||r.includes(t)?t:r[0]},[T]),rt=e=>{if(d){const t=e;if(!t||!t.from&&!t.to){o(void 0);return}const r={};t.from&&(r.from=_(t.from,M(t.from,g(u.from)))),t.to&&(r.to=_(t.to,M(t.to,g(u.to)))),o(r);return}e instanceof Date?o(_(e,M(e,g(m)))):e===void 0&&o(void 0)},nt=e=>{if(d){o({from:_(e,M(e,g(u.from)))});return}o(_(e,M(e,g(m))))},lt=e=>{const t=m??new Date;o(_(t,e)),F==="multi-step"&&T(t)&&J(!1)},dt=e=>t=>{const r=u[e]??u.from??new Date;o({...u,[e]:_(r,t)})},B=n.useMemo(()=>[...y.buildDisabledMatchers({minDate:ce,maxDate:ue,disablePast:me,disableFuture:fe}),...j?Array.isArray(j)?j:[j]:[]],[ce,ue,me,fe,j]),xe=n.useCallback(e=>kt.dateMatchModifiers(e,B),[B]),ot=e=>{if(X(e),e===""){p(!1),o(void 0);return}if(f){const r=Tt(e);if(!r){p(!1);return}if(xe(r)){p(!0);return}p(!1),o(r),q(r);return}if(d)return;const t=Qe(e);if(!t){p(!1);return}if(xe(t)){p(!0);return}p(!1),o(t),q(t)},ct=()=>{var t;const e=(t=L.current)==null?void 0:t.input;if(e){if(typeof e.showPicker=="function"){e.showPicker();return}e.focus()}},ut=()=>{if(!V){if(f){ct();return}J(e=>!e)}},mt=F==="multi-step"?i.jsx("div",{className:a.default["tedi-date-time-field__select-time-wrapper"],children:i.jsx(Fe.Button,{type:"button",visualType:"link",size:"small",iconLeft:"schedule",onClick:()=>K("time"),children:Le})}):void 0,te=i.jsx(vt.Calendar,{view:Ye,setView:_e,selectionLevel:Ie,currentMonth:Je,setCurrentMonth:q,mode:d?"range":"single",value:d?u:m,numberOfMonths:d&&!P?2:1,locale:$e,localeCode:k,showOutsideDays:Re,monthYearSelectType:Ce,disabledMatchers:B.length?B:void 0,required:oe,handleSelect:rt,applyValue:nt,footer:mt,className:w.default(a.default["tedi-date-time-field__calendar"],F==="side-by-side"&&a.default["tedi-date-time-field__calendar--split"])}),ie=T(m),ft=!ie||ie.length===0,Ne=i.jsx(Te.TimePicker,{value:g(m),stepMinutes:he,availableTimes:ie,gridVariant:pe,onChange:lt,className:w.default(a.default["tedi-date-time-field__time-picker"],{[a.default["tedi-date-time-field__time-picker--wheel"]]:ft})}),De=e=>{const t=T(u[e]),r=!t||t.length===0;return i.jsx(Te.TimePicker,{value:g(u[e]),stepMinutes:he,availableTimes:t,gridVariant:pe,onChange:dt(e),className:w.default(a.default["tedi-date-time-field__time-picker"],{[a.default["tedi-date-time-field__time-picker--wheel"]]:r})})},S=l==null?void 0:l.helper,H=ve?{text:Ge,type:"error"}:null,ht=H?S?Array.isArray(S)?[...S,H]:[S,H]:H:S,pt={...l,id:Pe,label:Ee,value:f?Ft(m):Xe,placeholder:Ve,readOnly:Oe||!f&&!!v&&!!x,icon:"calendar_today",isClearable:!0,required:oe,disabled:V,invalid:ve||(l==null?void 0:l.invalid),helper:ht,onIconClick:ut,onChange:ot,className:w.default(a.default["tedi-date-time-field__textfield"],l==null?void 0:l.className,{[a.default["tedi-date-time-field__icon--disabled"]]:V}),input:{...l==null?void 0:l.input,type:f?"datetime-local":"text","aria-expanded":f?void 0:N}};return i.jsxs(i.Fragment,{children:[i.jsx("div",{className:w.default(a.default["tedi-date-time-field__container"],qe),"aria-haspopup":"dialog",children:i.jsx(xt.TextField,{ref:st,"aria-expanded":f?void 0:N,...pt})}),!f&&i.jsx(D.FloatingPortal,{children:N&&!V&&i.jsx(D.FloatingFocusManager,{context:ee,modal:!1,initialFocus:-1,children:i.jsx("div",{ref:Z.setFloating,className:a.default["tedi-date-time-field__popup"],...at.getFloatingProps({style:{position:it,top:tt??0,left:et??0}}),children:d?i.jsxs("div",{className:a.default["tedi-date-time-field__range"],children:[te,i.jsx("div",{className:a.default["tedi-date-time-field__range-separator"],"aria-hidden":"true",children:i.jsx("div",{className:a.default["tedi-date-time-field__range-separator-line"]})}),i.jsxs("div",{className:a.default["tedi-date-time-field__range-times"],children:[i.jsxs("div",{className:a.default["tedi-date-time-field__range-time"],children:[i.jsx("div",{className:a.default["tedi-date-time-field__split-time-header"],children:i.jsx("span",{className:a.default["tedi-date-time-field__split-heading"],children:z})}),i.jsx("div",{className:a.default["tedi-date-time-field__split-time-body"],children:De("from")})]}),i.jsxs("div",{className:a.default["tedi-date-time-field__range-time"],children:[i.jsx("div",{className:a.default["tedi-date-time-field__split-time-header"],children:i.jsx("span",{className:a.default["tedi-date-time-field__split-heading"],children:z})}),i.jsx("div",{className:a.default["tedi-date-time-field__split-time-body"],children:De("to")})]})]})]}):F==="side-by-side"?i.jsxs("div",{className:a.default["tedi-date-time-field__split"],children:[te,i.jsx("div",{className:a.default["tedi-date-time-field__split-separator"],"aria-hidden":"true",children:i.jsx("div",{className:a.default["tedi-date-time-field__split-separator-line"]})}),i.jsxs("div",{className:a.default["tedi-date-time-field__split-time"],children:[i.jsx("div",{className:a.default["tedi-date-time-field__split-time-header"],children:i.jsx("span",{className:a.default["tedi-date-time-field__split-heading"],children:z})}),i.jsx("div",{className:a.default["tedi-date-time-field__split-time-body"],children:Ne})]})]}):We==="date"?te:i.jsxs("div",{className:a.default["tedi-date-time-field__time-step"],children:[i.jsxs("header",{className:a.default["tedi-date-time-field__time-header"],children:[i.jsx(Fe.Button,{type:"button",visualType:"link",size:"small",iconLeft:"arrow_back",onClick:()=>K("date"),children:Be}),i.jsx("span",{className:a.default["tedi-date-time-field__time-date"],children:Ke.format(m??new Date)})]}),i.jsx("div",{className:a.default["tedi-date-time-field__time-body"],children:Ne})]})})})})]})});le.displayName="DateTimeField";exports.DateTimeField=le;exports.default=le;