@tedi-design-system/react 19.1.0-rc.2 → 19.1.0-rc.20

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

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

package/src/tedi/components/form/search/index.d.ts

@@ -0,0 +1 @@
+export * from './search';

package/src/tedi/components/form/search/search.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),t=require("../../../../../external/classnames/index.cjs.js"),v=require("react"),w=require("../../buttons/button/button.cjs.js"),j=require("../textfield/textfield.cjs.js"),a=require("./search.module.scss.cjs.js"),L=require("../../../providers/label-provider/use-labels.cjs.js"),n=v.forwardRef(({placeholder:u,isClearable:o=!0,searchIcon:r="search",onSearch:s,onChange:f,button:e,ariaLabel:h,className:_,input:p,...l},m)=>{const{getLabel:i}=L.useLabels(),b=g=>{g.key==="Enter"&&(s==null||s(l.value))},x=()=>{s==null||s(l.value)},d=typeof r=="string"?{name:r}:r,y={color:"secondary",...d,className:t.default(d.className,l.disabled&&a.default["tedi-search__icon--disabled"])},q={...l,ref:m,inputClassName:t.default(a.default["tedi-search__input"],e&&a.default["tedi-search__input--has-button"],_),placeholder:u,isClearable:o,onKeyDown:b,onChange:f,input:{...p,role:"searchbox"},...e?{}:{icon:y}},N=h||i("search");return c.jsxs("div",{className:t.default(a.default["tedi-search__wrapper"],l.size==="small"&&a.default["tedi-search__wrapper--small"],l.size==="large"&&a.default["tedi-search__wrapper--large"]),role:"search","aria-label":N,children:[c.jsx(j.TextField,{...q}),e&&c.jsx(w.Button,{...e,onClick:x,className:t.default(a.default["tedi-search__button"],!e.children&&a.default["tedi-search__button--icon-only"],e.className),"aria-label":e.children?void 0:i("search"),children:e.children??i("search")})]})});n.displayName="Search";exports.Search=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),C=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),N=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),Q=require("../../base/typography/text/text.cjs.js"),Je=require("../../buttons/button/button.cjs.js"),We=require("../../loaders/spinner/spinner.cjs.js"),H=require("../../misc/option-content/option-content.cjs.js"),Xe=require("../textfield/textfield.cjs.js"),s=require("./search.module.scss.cjs.js"),Ye=require("../../../providers/label-provider/use-labels.cjs.js"),Ze=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),D=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),$e=4,G=8,fe=["a[href]","area[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","iframe",'[tabindex]:not([tabindex="-1"])'].join(","),et=(l,m)=>m?m(l):typeof l.label=="string"?l.label:String(l.value),tt=(l,m)=>{const x=m.trim();if(!x)return l;const h=l.toLowerCase().indexOf(x.toLowerCase());return h===-1?l:r.jsxs(r.Fragment,{children:[l.slice(0,h),r.jsx(Q.Text,{element:"span",modifiers:"bold",children:l.slice(h,h+x.length)}),l.slice(h+x.length)]})},he=o.forwardRef((l,m)=>{var ue;const{id:x,placeholder:h,isClearable:pe=!0,searchIcon:L="search",onSearch:u,onChange:q,onClear:be,onFocus:F,button:a,ariaLabel:me,className:xe,input:R,value:J,defaultValue:ye,suggestions:S,onSuggestionSelect:P,loading:v=!1,minQueryLength:W=0,hideOnScroll:_e=!1,renderSuggestionContent:E,getSuggestionText:ve,noResultsText:ge,loadingText:je,resultsCountText:Ce,footer:O,...I}=l,{getLabel:y}=Ye.useLabels(),Ne=o.useId(),k=x??Ne,d=S!==void 0,i=o.useMemo(()=>Array.isArray(S)?S:[],[S]),X=J!==void 0,[Re,Y]=o.useState(ye??""),f=J??Re,[K,g]=o.useState(!1),[c,B]=o.useState(null),Z=o.useRef([]),M=o.useRef(null),j=o.useRef(null),T=o.useRef(!1);o.useImperativeHandle(m,()=>j.current,[]);const $=f.trim().length>=W,z=!v&&i.length>0,Se=o.useMemo(()=>i.reduce((e,t,n)=>t.disabled?[...e,n]:e,[]),[i]),{refs:_,floatingStyles:Ie,context:ee}=C.useFloating({open:d&&K,onOpenChange:g,placement:"bottom-start",whileElementsMounted:Ze.autoUpdate,middleware:[D.offset($e),D.flip({padding:G}),D.shift({padding:G}),D.size({padding:G,apply({rects:e,elements:t,availableHeight:n}){t.floating.style.width=`${e.reference.width}px`,t.floating.style.setProperty("--tedi-search-panel-available-height",`${n}px`)}})]}),Te=C.useDismiss(ee,{ancestorScroll:_e}),we=C.useListNavigation(ee,{listRef:Z,activeIndex:c,onNavigate:B,virtual:!0,loop:!0,disabledIndices:Se}),{getReferenceProps:Ae,getFloatingProps:De,getItemProps:Le}=C.useInteractions([Te,we]);o.useEffect(()=>{var e;_.setPositionReference(((e=j.current)==null?void 0:e.inner)??null)},[_,d]);const te=`${k}-listbox`,ne=e=>`${k}-option-${e}`,p=d&&K&&$&&(v||z||f.trim().length>0),re=()=>M.current?Array.from(M.current.querySelectorAll(fe)):[],se=(e=!0)=>{var t,n;T.current=e,(n=(t=j.current)==null?void 0:t.input)==null||n.focus()},w=()=>{g(!1),B(null)},ae=e=>{e.disabled||(X||Y(et(e,ve)),P==null||P(e),w())},qe=e=>{X||Y(e),q==null||q(e),d&&(T.current=!1,B(null),g(e.trim().length>=W))},Fe=e=>{if(F==null||F(e),!!d){if(T.current){T.current=!1;return}$&&g(!0)}},Pe=e=>{e.key==="Enter"&&(u==null||u(f))},Ee=!v&&c!==null&&!((ue=i[c])!=null&&ue.disabled)?i[c]:void 0,Oe=()=>{var b,A;const e=(b=j.current)==null?void 0:b.input;if(!e)return;const t=_.floating.current,n=Array.from(document.body.querySelectorAll(fe)).filter(U=>!(t!=null&&t.contains(U)));(A=n[n.indexOf(e)+1])==null||A.focus()},ke=e=>{if(e.key==="Enter"){if(p&&c!==null&&i[c]&&!i[c].disabled){e.preventDefault(),ae(i[c]);return}u==null||u(f),g(!1);return}if(e.key==="Tab"&&!e.shiftKey&&p&&O){const t=re();t.length&&(e.preventDefault(),t[0].focus())}},Ke=e=>{if(!d||!K)return;const t=e.relatedTarget,n=_.floating.current;t&&(e.currentTarget.contains(t)||n!=null&&n.contains(t))||w()},Be=e=>{if(e.key==="Escape"){e.preventDefault(),w(),se();return}if(e.key!=="Tab")return;const t=re(),n=t.indexOf(e.target);e.shiftKey&&n===0?(e.preventDefault(),se()):!e.shiftKey&&n===t.length-1&&(e.preventDefault(),w(),Oe())},le=typeof L=="string"?{name:L}:L,Me={color:"secondary",...le,className:N.default(le.className,I.disabled&&s.default["tedi-search__icon--disabled"])},oe=d?Ae({role:"combobox","aria-autocomplete":"list","aria-expanded":p,"aria-controls":p&&z?te:void 0,"aria-activedescendant":p&&Ee&&c!==null?ne(c):void 0,onKeyDown:ke}):{role:"searchbox"},ie={...R,...oe};if(d){const e=R==null?void 0:R.onKeyDown,t=oe.onKeyDown;ie.onKeyDown=n=>{e==null||e(n),t==null||t(n)}}const ze={...I,ref:j,id:k,value:f,onChange:qe,onClear:be,onFocus:Fe,inputClassName:N.default(s.default["tedi-search__input"],a&&s.default["tedi-search__input--has-button"],xe),placeholder:h,isClearable:pe,input:ie,...a?{}:{icon:Me},...d?{}:{onKeyDown:Pe}},Ue=e=>{var t;(t=a==null?void 0:a.onClick)==null||t.call(a,e),u==null||u(f)},Ve=me||y("search"),ce=je??y("search.loading"),de=ge??y("search.no-results"),He=Ce??(e=>y("search.results-count",e)),Ge=p?v?ce:i.length>0?He(i.length):de:"",Qe=()=>v?r.jsxs("div",{className:s.default["tedi-search__panel-status"],children:[r.jsx(We.Spinner,{size:16}),r.jsx(Q.Text,{color:"tertiary",children:ce})]}):z?r.jsx("ul",{id:te,role:"listbox",className:s.default["tedi-search__panel-list"],children:i.map((e,t)=>{const n=c===t&&!e.disabled,b=typeof(e.label??e.value)=="string"?String(e.label??e.value):void 0,A=typeof e.description=="string"?e.description:void 0,U=!E&&b?[b,A].filter(Boolean).join(", "):void 0;return r.jsx("li",{id:ne(t),role:"option","aria-selected":n,"aria-disabled":e.disabled||void 0,"aria-label":U,ref:V=>{Z.current[t]=V},className:N.default(s.default["tedi-search__option"],{[s.default["tedi-search__option--active"]]:n,[s.default["tedi-search__option--disabled"]]:e.disabled}),...Le({onClick:()=>ae(e),onMouseDown:V=>V.preventDefault()}),children:E?E(e,{active:n,query:f}):r.jsxs(H.OptionContent,{disabled:e.disabled,layout:e.description!==void 0?"vertical":"horizontal",children:[r.jsx(H.OptionContent.Label,{children:b?tt(b,f):e.label??e.value}),e.description!==void 0&&r.jsx(H.OptionContent.Meta,{children:e.description})]})},e.value)})}):r.jsx("div",{className:s.default["tedi-search__panel-status"],children:r.jsx(Q.Text,{color:"tertiary",children:de})});return r.jsxs("div",{ref:_.setReference,className:N.default(s.default["tedi-search__wrapper"],I.size==="small"&&s.default["tedi-search__wrapper--small"],I.size==="large"&&s.default["tedi-search__wrapper--large"]),role:"search","aria-label":Ve,onBlur:Ke,children:[r.jsx(Xe.TextField,{...ze}),a&&r.jsx(Je.Button,{...a,onClick:Ue,className:N.default(s.default["tedi-search__button"],!a.children&&s.default["tedi-search__button--icon-only"],a.className),"aria-label":a["aria-label"]??(a.children?void 0:y("search")),children:a.children??y("search")}),d&&r.jsx("span",{"aria-live":"polite",role:"status",className:s.default["tedi-search__announcement"],children:Ge}),p&&r.jsx(C.FloatingPortal,{children:r.jsxs("div",{ref:_.setFloating,style:Ie,className:s.default["tedi-search__panel"],...De(),children:[Qe(),O&&r.jsx("div",{ref:M,className:s.default["tedi-search__footer"],onKeyDown:Be,children:O})]})})]})});he.displayName="Search";const nt=he;exports.Search=nt;