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

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

@@ -0,0 +1,207 @@
+import { default as React } from 'react';
+import { Locale, Matcher } from 'react-day-picker';
+import { BreakpointSupport } from '../../../helpers';
+import { CalendarView } from '../date-field/date-field';
+import { TextFieldForwardRef, TextFieldProps } from '../textfield/textfield';
+export type DateTimeFieldStep = 'date' | 'time';
+export type DateTimeFieldLayout = 'side-by-side' | 'multi-step';
+export type DateTimeFieldMode = 'single' | 'range';
+export interface DateTimeRange {
+    from?: Date;
+    to?: Date;
+}
+export type DateTimeFieldValue = Date | DateTimeRange;
+type DateTimeFieldBreakpointProps = {
+    /**
+     * When `true`, renders an `<input type="datetime-local">` and skips the
+     * custom popover entirely — the browser's built-in date/time picker is
+     * shown when the calendar icon is clicked. Has no effect when
+     * `mode='range'` (native datetime-local has no range counterpart).
+     * @default false
+     */
+    useNativePicker?: boolean;
+    /**
+     * Layout of the date-and-time popover. `mode='range'` always uses
+     * `'side-by-side'` regardless of this value — the range UI needs the
+     * calendar and both `from` / `to` time pickers visible at once.
+     * @default side-by-side
+     */
+    layout?: DateTimeFieldLayout;
+    /**
+     * Predefined time slots, each in `"HH:mm"` format. When provided, the
+     * time step renders a grid of slots instead of the scroll-wheel picker.
+     *
+     * Accepts either:
+     * - a static array — the same slot list for every date,
+     * - or a function `(date: Date) => string[]` evaluated per render with the
+     *   currently-selected date. Use the function form when slots depend on
+     *   the picked date (e.g. clinic appointments where Tuesdays differ from
+     *   Wednesdays). In `mode='range'` the function is called twice: once
+     *   with `rangeValue.from` for the `from` time picker, once with
+     *   `rangeValue.to` for the `to` time picker. When no date is picked yet
+     *   the function is called with today's date as a fallback.
+     *
+     * Returning an empty array currently falls back to the wheel picker —
+     * if you need a dedicated "no times available" UX, render it from the
+     * consumer side via `onChange` / `value` state for now.
+     */
+    availableTimes?: string[] | ((date: Date) => string[]);
+    /**
+     * Layout variant for the time grid when `availableTimes` is set.
+     * Defaults differ per layout: `'button'` for `side-by-side`, `'radio'`
+     * for `multi-step`.
+     */
+    timeGridVariant?: 'button' | 'radio';
+    /**
+     * How the month/year selector in the calendar header is rendered.
+     * @default dropdown
+     */
+    monthYearSelectType?: 'dropdown' | 'grid';
+    /**
+     * Show days from adjacent months in the calendar grid.
+     * @default true
+     */
+    showOutsideDays?: boolean;
+    /**
+     * Heading rendered above the time picker in the side-by-side layout.
+     * Falls back to the localised `dateTimeField.timeHeading` label.
+     */
+    timeHeading?: React.ReactNode;
+};
+export interface DateTimeFieldProps extends BreakpointSupport<DateTimeFieldBreakpointProps> {
+    /**
+     * Unique identifier for the input field.
+     */
+    id: string;
+    /**
+     * Field label. Required for accessibility.
+     */
+    label: string;
+    /**
+     * Placeholder shown in the input when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * Additional class on the container.
+     */
+    className?: string;
+    /**
+     * Selection mode.
+     * - `'single'` (default) — one combined `Date` value.
+     * - `'range'` — pair of `from` / `to` `Date` values, each carrying their
+     *   own time. Renders a 2-month calendar and two time pickers (one for
+     *   `from`, one for `to`) stacked underneath.
+     * @default single
+     */
+    mode?: DateTimeFieldMode;
+    /**
+     * Controlled value. Type depends on `mode`:
+     * - `mode='single'` → `Date | undefined`
+     * - `mode='range'` → `DateTimeRange | undefined` (`{ from, to }`)
+     */
+    value?: DateTimeFieldValue;
+    /**
+     * Initial value for uncontrolled usage. Ignored when `value` is provided.
+     */
+    defaultValue?: DateTimeFieldValue;
+    /**
+     * Fires whenever the user picks a date or a time. The argument shape
+     * matches `mode`: `Date | undefined` for `'single'`,
+     * `DateTimeRange | undefined` for `'range'`.
+     */
+    onChange?: (value: DateTimeFieldValue | undefined) => void;
+    /**
+     * Marks the field as required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * When `true`, the input is read-only — typing is disabled, but the
+     * picker can still be opened.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Disables the input and the picker.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Minimum selectable date. Dates before this are disabled in the calendar.
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date. Dates after this are disabled in the calendar.
+     */
+    maxDate?: Date;
+    /**
+     * Disables every date strictly before today.
+     */
+    disablePast?: boolean;
+    /**
+     * Disables every date strictly after today.
+     */
+    disableFuture?: boolean;
+    /**
+     * Disable specific dates via react-day-picker matchers. Layered on top of
+     * the `minDate` / `maxDate` / `disablePast` / `disableFuture` shortcuts —
+     * use this for free-form matchers like "every Sunday" or "specific
+     * blacklisted dates". Mirrors the `disabledMatchers` prop on `DateField`.
+     */
+    disabledMatchers?: Matcher | Matcher[];
+    /**
+     * Step interval (minutes) for the time-wheel picker. Ignored when
+     * `availableTimes` is set.
+     * @default 15
+     */
+    stepMinutes?: number;
+    /**
+     * Initial month displayed when the calendar opens. Defaults to the
+     * month of the current value, or the current month if no value.
+     */
+    initialMonth?: Date;
+    /**
+     * Locale object used by react-day-picker for the calendar grid.
+     * @default et
+     */
+    locale?: Locale;
+    /**
+     * Locale code used for the displayed date format.
+     * @default et-EE
+     */
+    localeCode?: string;
+    /**
+     * Label of the "Select time" footer button under the calendar in the
+     * multi-step layout. Falls back to the localised
+     * `dateTimeField.selectTime` label.
+     */
+    selectTimeLabel?: string;
+    /**
+     * Label of the "Back" link shown above the time picker in the
+     * multi-step layout. Falls back to the localised `dateTimeField.back`
+     * label.
+     */
+    backLabel?: string;
+    /**
+     * Lowest calendar drill-down level the user can pick from before the value
+     * commits. `'days'` (default) requires drilling all the way down to a day;
+     * `'months'` commits as soon as a month is picked; `'years'` commits on
+     * year selection. Only meaningful when `monthYearSelectType='grid'`.
+     * @default days
+     */
+    selectionLevel?: CalendarView;
+    /**
+     * Forwarded to the underlying `TextField`. `id`, `label`, `value`, and
+     * `onChange` are owned by `DateTimeField`.
+     */
+    inputProps?: Omit<TextFieldProps, 'id' | 'label' | 'value' | 'onChange'>;
+    /**
+     * Error message rendered below the input when the user types a date that
+     * fails the disable matchers (`disablePast`, `disableFuture`, `minDate`,
+     * `maxDate`, `disabledMatchers`). Falls back to the localised
+     * `dateField.disabledDateError` label.
+     */
+    disabledDateErrorMessage?: string;
+}
+export declare const DateTimeField: React.ForwardRefExoticComponent<DateTimeFieldProps & React.RefAttributes<TextFieldForwardRef>>;
+export default DateTimeField;

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-date-time-field__container":"tedi-date-time-field__container-27fb2d35","tedi-date-time-field__textfield":"tedi-date-time-field__textfield-74c7a842","tedi-date-time-field__icon--disabled":"tedi-date-time-field__icon--disabled-82069c63","tedi-date-time-field__popup":"tedi-date-time-field__popup-9c353957","tedi-date-time-field__calendar":"tedi-date-time-field__calendar-44cf1ff8","tedi-date-time-field__split":"tedi-date-time-field__split-7c921802","tedi-date-time-field__calendar--split":"tedi-date-time-field__calendar--split-758ff612","tedi-date-time-field__time-picker":"tedi-date-time-field__time-picker-4d9e2eb6","tedi-date-time-field__time-picker--wheel":"tedi-date-time-field__time-picker--wheel-4bd09564","tedi-date-time-field__split-separator":"tedi-date-time-field__split-separator-b37f315f","tedi-date-time-field__split-separator-line":"tedi-date-time-field__split-separator-line-d4cb6bfe","tedi-date-time-field__split-time":"tedi-date-time-field__split-time-d898edf8","tedi-date-time-field__split-time-header":"tedi-date-time-field__split-time-header-7a646313","tedi-date-time-field__split-heading":"tedi-date-time-field__split-heading-8a3194a5","tedi-date-time-field__split-time-body":"tedi-date-time-field__split-time-body-ce0c1335","tedi-date-time-field__range":"tedi-date-time-field__range-17507b68","tedi-date-time-field__range-separator":"tedi-date-time-field__range-separator-8159580a","tedi-date-time-field__range-separator-line":"tedi-date-time-field__range-separator-line-993e312a","tedi-date-time-field__range-times":"tedi-date-time-field__range-times-a55a5598","tedi-date-time-field__range-time":"tedi-date-time-field__range-time-f46bcb80","tedi-date-time-field__select-time-wrapper":"tedi-date-time-field__select-time-wrapper-5c969c55","tedi-date-time-field__time-step":"tedi-date-time-field__time-step-c25362e0","tedi-date-time-field__time-header":"tedi-date-time-field__time-header-e72d431f","tedi-date-time-field__time-date":"tedi-date-time-field__time-date-e5eb5da7","tedi-date-time-field__time-body":"tedi-date-time-field__time-body-b8c484e0"};exports.default=e;

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

@@ -0,0 +1,30 @@
+const e = {
+  "tedi-date-time-field__container": "tedi-date-time-field__container-27fb2d35",
+  "tedi-date-time-field__textfield": "tedi-date-time-field__textfield-74c7a842",
+  "tedi-date-time-field__icon--disabled": "tedi-date-time-field__icon--disabled-82069c63",
+  "tedi-date-time-field__popup": "tedi-date-time-field__popup-9c353957",
+  "tedi-date-time-field__calendar": "tedi-date-time-field__calendar-44cf1ff8",
+  "tedi-date-time-field__split": "tedi-date-time-field__split-7c921802",
+  "tedi-date-time-field__calendar--split": "tedi-date-time-field__calendar--split-758ff612",
+  "tedi-date-time-field__time-picker": "tedi-date-time-field__time-picker-4d9e2eb6",
+  "tedi-date-time-field__time-picker--wheel": "tedi-date-time-field__time-picker--wheel-4bd09564",
+  "tedi-date-time-field__split-separator": "tedi-date-time-field__split-separator-b37f315f",
+  "tedi-date-time-field__split-separator-line": "tedi-date-time-field__split-separator-line-d4cb6bfe",
+  "tedi-date-time-field__split-time": "tedi-date-time-field__split-time-d898edf8",
+  "tedi-date-time-field__split-time-header": "tedi-date-time-field__split-time-header-7a646313",
+  "tedi-date-time-field__split-heading": "tedi-date-time-field__split-heading-8a3194a5",
+  "tedi-date-time-field__split-time-body": "tedi-date-time-field__split-time-body-ce0c1335",
+  "tedi-date-time-field__range": "tedi-date-time-field__range-17507b68",
+  "tedi-date-time-field__range-separator": "tedi-date-time-field__range-separator-8159580a",
+  "tedi-date-time-field__range-separator-line": "tedi-date-time-field__range-separator-line-993e312a",
+  "tedi-date-time-field__range-times": "tedi-date-time-field__range-times-a55a5598",
+  "tedi-date-time-field__range-time": "tedi-date-time-field__range-time-f46bcb80",
+  "tedi-date-time-field__select-time-wrapper": "tedi-date-time-field__select-time-wrapper-5c969c55",
+  "tedi-date-time-field__time-step": "tedi-date-time-field__time-step-c25362e0",
+  "tedi-date-time-field__time-header": "tedi-date-time-field__time-header-e72d431f",
+  "tedi-date-time-field__time-date": "tedi-date-time-field__time-date-e5eb5da7",
+  "tedi-date-time-field__time-body": "tedi-date-time-field__time-body-b8c484e0"
+};
+export {
+  e as default
+};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),T=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),B=require("../textfield/textfield.cjs.js"),ne=require("../time-picker/time-picker.cjs.js"),s=require("./time-field.module.scss.cjs.js"),O=require("./time-field-helpers.cjs.js"),re=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),C=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),oe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),k=require("../../overlays/dropdown/dropdown.cjs.js"),E=v=>{const{getCurrentBreakpointProps:S}=oe.useBreakpointProps(v.defaultServerBreakpoint),{id:V,label:M,value:c,defaultValue:z,onChange:F,readOnly:u=!1,required:A,placeholder:H,inputProps:i,stepMinutes:K=1,className:I,availableTimes:l}=v,{useNativePicker:G=!1,timePickerTrigger:P="button",showPicker:a=!0,availableTimesVariant:q="grid-buttons"}=S(v),y=c!==void 0,[J,N]=m.useState(c??z??""),g=y?c:J,[_,b]=m.useState(!1),w=P==="input",r=G,L=d.useFloating({open:_,onOpenChange:b,placement:w?"bottom-start":"bottom-end",middleware:[C.offset(O.TIMEPICKER_OFFSET),C.flip(),C.shift()],whileElementsMounted:re.autoUpdate}),{refs:j,context:p,x:Q,y:W,strategy:X}=L,Y=d.useClick(p),Z=d.useDismiss(p),$=d.useRole(p,{role:"listbox"}),D=a&&w&&!u&&!r,R=d.useInteractions([...D?[Y]:[],Z,$]),x=e=>{const n=e.trim();y||N(n),F==null||F(n)},ee=e=>{var h;const n=e.target.value??"";(h=i==null?void 0:i.onBlur)==null||h.call(i,e);const o=O.normalizeTime(n);o!==null&&o!==n&&x(o)};m.useEffect(()=>{c!==void 0&&N(c)},[c]);const f=m.useRef(null);m.useEffect(()=>{var e;(e=f.current)!=null&&e.inner&&j.setReference(f.current.inner)},[j]);const te=()=>{var n;const e=(n=f.current)==null?void 0:n.input;if(e){if(typeof e.showPicker=="function"){e.showPicker();return}e.focus()}},ie=()=>b(e=>!e),U={...i,id:V,label:M,value:g,placeholder:H,readOnly:u||!r&&w,icon:"schedule",isClearable:!0,required:A,onIconClick:()=>{u||!a||(r?te():P==="button"&&ie())},onChange:x,onBlur:ee,className:T.default(s.default["tedi-time-field__textfield"],{[s.default["tedi-time-field__icon--disabled"]]:!a||u},{[s.default["tedi-time-field__textfield--disabled"]]:i==null?void 0:i.disabled},{[s.default["tedi-time-field--native"]]:r}),input:{...i==null?void 0:i.input,...r&&{type:"time"}}};if(!r&&a&&!u&&q==="dropdown"&&!!(l!=null&&l.length)){const e=l.indexOf(g),n=e>=0?e:0;return t.jsxs(k.Dropdown,{width:"trigger",defaultActiveIndex:n,children:[t.jsx(k.Dropdown.Trigger,{children:t.jsx("div",{className:T.default(s.default["tedi-time-field__container"],I,{[s.default["tedi-time-field__container--native"]]:r}),children:t.jsx(B.TextField,{ref:f,...U})})}),t.jsx(k.Dropdown.Content,{children:l.map((o,h)=>t.jsx(k.Dropdown.Item,{index:h,active:o===g,onClick:()=>x(o),children:o},o))})]})}return t.jsxs(t.Fragment,{children:[t.jsx("div",{className:T.default(s.default["tedi-time-field__container"],I),...D?R.getReferenceProps():{},"aria-haspopup":a?"listbox":void 0,tabIndex:-1,children:t.jsx(B.TextField,{ref:f,"aria-expanded":a?_:void 0,...U})}),!r&&a&&t.jsx(d.FloatingPortal,{children:_&&!u&&t.jsx(d.FloatingFocusManager,{context:p,modal:!1,initialFocus:-1,children:t.jsx("div",{ref:j.setFloating,...R.getFloatingProps({style:{position:X,top:W??0,left:Q??0}}),children:t.jsx(ne.TimePicker,{value:g,stepMinutes:K,availableTimes:l,onChange:e=>{x(e),l&&b(!1)},gridVariant:q==="grid-radio"?"radio":"button",className:s.default["tedi-time-field__picker-wrapper"]})})})})]})};E.displayName="TimeField";exports.TimeField=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),c=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),T=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),O=require("../textfield/textfield.cjs.js"),se=require("../time-picker/time-picker.cjs.js"),o=require("./time-field.module.scss.cjs.js"),E=require("./time-field-helpers.cjs.js"),oe=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),q=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),le=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),k=require("../../overlays/dropdown/dropdown.cjs.js"),S=b=>{const{getCurrentBreakpointProps:V}=le.useBreakpointProps(b.defaultServerBreakpoint),{id:M,label:z,value:u,defaultValue:A,onChange:v,readOnly:C=!1,disabled:l=!1,required:H,placeholder:K,inputProps:t,stepMinutes:G=1,className:I,availableTimes:d}=b,{useNativePicker:J=!1,timePickerTrigger:P="button",showPicker:a=!0,availableTimesVariant:y="grid-buttons"}=V(b),N=u!==void 0,[L,D]=m.useState(u??A??""),g=N?u:L,[F,_]=m.useState(!1),w=P==="input",r=J,Q=c.useFloating({open:F,onOpenChange:_,placement:w?"bottom-start":"bottom-end",middleware:[q.offset(E.TIMEPICKER_OFFSET),q.flip(),q.shift()],whileElementsMounted:oe.autoUpdate}),{refs:j,context:x,x:W,y:X,strategy:Y}=Q,Z=c.useClick(x),$=c.useDismiss(x),ee=c.useRole(x,{role:"listbox"}),R=a&&w&&!C&&!l&&!r,U=c.useInteractions([...R?[Z]:[],$,ee]),p=e=>{const n=e.trim();N||D(n),v==null||v(n)},te=e=>{var h;const n=e.target.value??"";(h=t==null?void 0:t.onBlur)==null||h.call(t,e);const s=E.normalizeTime(n);s!==null&&s!==n&&p(s)};m.useEffect(()=>{u!==void 0&&D(u)},[u]);const f=m.useRef(null);m.useEffect(()=>{var e;(e=f.current)!=null&&e.inner&&j.setReference(f.current.inner)},[j]);const ie=()=>{var n;const e=(n=f.current)==null?void 0:n.input;if(e){if(typeof e.showPicker=="function"){e.showPicker();return}e.focus()}},ne=()=>_(e=>!e),re=()=>{!a||l||(r?ie():P==="button"&&ne())},B={...t,id:M,label:z,value:g,placeholder:K,readOnly:C||!r&&w,disabled:l||(t==null?void 0:t.disabled),icon:"schedule",isClearable:!0,required:H,onIconClick:re,onChange:p,onBlur:te,className:T.default(o.default["tedi-time-field__textfield"],{[o.default["tedi-time-field__icon--disabled"]]:!a||l},{[o.default["tedi-time-field__textfield--disabled"]]:l||(t==null?void 0:t.disabled)},{[o.default["tedi-time-field--native"]]:r}),input:{...t==null?void 0:t.input,...r&&{type:"time"}}};if(!r&&a&&!l&&y==="dropdown"&&!!(d!=null&&d.length)){const e=d.indexOf(g),n=e>=0?e:0;return i.jsxs(k.Dropdown,{width:"trigger",defaultActiveIndex:n,children:[i.jsx(k.Dropdown.Trigger,{children:i.jsx("div",{className:T.default(o.default["tedi-time-field__container"],I,{[o.default["tedi-time-field__container--native"]]:r}),children:i.jsx(O.TextField,{ref:f,...B})})}),i.jsx(k.Dropdown.Content,{children:d.map((s,h)=>i.jsx(k.Dropdown.Item,{index:h,active:s===g,onClick:()=>p(s),children:s},s))})]})}return i.jsxs(i.Fragment,{children:[i.jsx("div",{className:T.default(o.default["tedi-time-field__container"],I),...R?U.getReferenceProps():{},"aria-haspopup":a?"listbox":void 0,tabIndex:-1,children:i.jsx(O.TextField,{ref:f,"aria-expanded":a?F:void 0,...B})}),!r&&a&&!l&&i.jsx(c.FloatingPortal,{children:F&&i.jsx(c.FloatingFocusManager,{context:x,modal:!1,initialFocus:-1,children:i.jsx("div",{ref:j.setFloating,...U.getFloatingProps({style:{position:Y,top:X??0,left:W??0}}),children:i.jsx(se.TimePicker,{value:g,stepMinutes:G,availableTimes:d,onChange:e=>{p(e),d&&_(!1)},gridVariant:y==="grid-radio"?"radio":"button",className:o.default["tedi-time-field__picker-wrapper"]})})})})]})};S.displayName="TimeField";exports.TimeField=S;

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

@@ -56,6 +56,15 @@ export interface TimeFieldProps extends BreakpointSupport<TimeFieldBreakpointPro
      * @default false
      */
     readOnly?: boolean;
+    /**
+     * Disables the input and the picker. Equivalent of `<DateTimeField disabled>`
+     * — added so all three field siblings (`DateField`, `TimeField`,
+     * `DateTimeField`) share the same form-control idiom for "this field is
+     * fully unavailable". Forwards to the underlying `TextField`'s `disabled`
+     * attribute and short-circuits the picker open path.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Marks the input as required.
      */