@tedi-design-system/react 18.0.0-rc.3 → 18.0.0-rc.30

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),G=require("../../../../../../external/classnames/index.cjs.js"),d=require("react"),J=require("../../../base/typography/heading/heading.cjs.js"),C=require("../../../buttons/button/button.cjs.js"),Q=require("../../../buttons/closing-button/closing-button.cjs.js"),U=require("../../../content/calendar/calendar.cjs.js"),W=require("../date-field-helpers.cjs.js"),u=require("./date-picker-modal.module.scss.cjs.js"),X=require("../../../../providers/label-provider/use-labels.cjs.js"),c=require("../../../overlays/modal/modal.cjs.js"),Z=require("../../../overlays/modal/modal-context.cjs.js"),D=(e,a)=>e instanceof Date?e:Array.isArray(e)&&e.length>0?[...e].sort((o,l)=>o.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:a??new Date,$=({title:e})=>{const{labelId:a,onOpenChange:o}=Z.useModal();return t.jsxs("div",{className:u.default["tedi-date-picker-modal__header"],children:[t.jsx(J.Heading,{element:"h2",modifiers:"h4",id:a,className:u.default["tedi-date-picker-modal__title"],children:e}),t.jsx(Q.ClosingButton,{size:"small",onClick:()=>o(!1)})]})},q=e=>{const{open:a,onOpenChange:o,value:l,onConfirm:S,mode:n="single",numberOfMonths:T,locale:_,localeCode:w,showOutsideDays:N=!0,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,showNavigation:L,selectionLevel:f="days",initialView:g,initialMonth:y,modalProps:i,title:P,...R}=e,{getLabel:b}=X.useLabels(),[r,m]=d.useState(l),[V,M]=d.useState(g??f),[F,j]=d.useState(()=>D(l,y));d.useEffect(()=>{a&&(m(l),M(g??f),j(D(l,y)))},[a,l,f,g,y]);const I=d.useCallback((s,h)=>{m(n==="range"?Y=>W.resolveRangeSelection(s,Y,h):s)},[n]),K=d.useCallback(s=>{m(h=>n==="range"?{from:s,to:void 0}:n==="multiple"?[...Array.isArray(h)?h:[],s]:s)},[n]),z=n==="multiple"?Array.isArray(r)&&r.length>0:n==="range"?!!r&&typeof r=="object"&&"from"in r&&r.from instanceof Date:r instanceof Date,k=p===!0&&!z,E=()=>{k||(S(r),o(!1))},x=P??b(n==="range"?"date-field.modal-title-range":n==="multiple"?"date-field.modal-title-multiple":"date-field.modal-title");return t.jsx(c.Modal,{open:a,onToggle:o,children:t.jsxs(c.Modal.Content,{position:"center","aria-label":x,...i,md:{width:"max-content",...i==null?void 0:i.md},sm:{width:"full",...i==null?void 0:i.sm},className:G.default(u.default["tedi-date-picker-modal"],i==null?void 0:i.className),children:[t.jsx(c.Modal.Header,{children:t.jsx($,{title:x})}),t.jsx(c.Modal.Body,{className:u.default["tedi-date-picker-modal__body"],children:t.jsx(U.Calendar,{...R,numberOfMonths:T,view:V,selectionLevel:f,currentMonth:F,setCurrentMonth:j,setView:M,mode:n,value:r,locale:_,localeCode:w,showOutsideDays:N,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,showNavigation:L,handleSelect:I,applyValue:K,className:u.default["tedi-date-picker-modal__calendar"],bordered:!1})}),t.jsxs(c.Modal.Footer,{children:[t.jsx(C.Button,{visualType:"secondary",onClick:()=>o(!1),children:b("date-field.cancel")}),t.jsx(C.Button,{onClick:E,disabled:k,children:b("date-field.confirm")})]})]})})};q.displayName="DatePickerModal";exports.DatePickerModal=q;

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

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { DateRange, DayPickerProps, Locale, Matcher } from 'react-day-picker';
+import { ModalContentProps } from '../../../overlays/modal';
+import { CalendarView } from '../date-field';
+type DateFieldMode = 'single' | 'multiple' | 'range';
+type DateValue = Date | Date[] | DateRange | undefined;
+export interface DatePickerModalProps extends Omit<DayPickerProps, 'mode' | 'selected' | 'onSelect' | 'numberOfMonths'> {
+    /** Whether the modal is open. Pair with `onOpenChange`. */
+    open: boolean;
+    /** Fires when the modal opens or closes (Escape / backdrop / Cancel / Confirm). */
+    onOpenChange: (open: boolean) => void;
+    /** Current committed value. Used to seed the draft when the modal opens. */
+    value: DateValue;
+    /**
+     * Fires with the chosen value when the user clicks "Confirm". Cancel /
+     * Escape / backdrop dismiss discards the draft.
+     */
+    onConfirm: (date: DateValue) => void;
+    /** Selection mode forwarded to `Calendar`. @default single */
+    mode?: DateFieldMode;
+    numberOfMonths?: number;
+    locale?: Locale;
+    localeCode?: string;
+    showOutsideDays?: boolean;
+    disabledMatchers?: Matcher[];
+    required?: boolean;
+    availableDays?: Date[] | ((date: Date) => boolean);
+    footer?: React.ReactNode;
+    monthYearSelectType?: 'dropdown' | 'grid';
+    showNavigation?: boolean;
+    selectionLevel?: CalendarView;
+    /** Grid the calendar opens on, independent of `selectionLevel`. Defaults to `selectionLevel`. */
+    initialView?: CalendarView;
+    /** Initial month to display when the modal opens. Defaults to the selected date or today. */
+    initialMonth?: Date;
+    /**
+     * Extra props spread onto `Modal.Content`, overriding the responsive width / `position="center"`
+     * defaults (including `fullscreen`). `className` is merged, not replaced, so the internal layout survives.
+     */
+    modalProps?: Omit<ModalContentProps, 'children'>;
+    /**
+     * Modal title text. Falls back to a mode-aware i18n key —
+     * `date-field.modal-title` / `-range` / `-multiple`.
+     */
+    title?: string;
+}
+export declare const DatePickerModal: {
+    (props: DatePickerModalProps): JSX.Element;
+    displayName: string;
+};
+export default DatePickerModal;

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

@@ -0,0 +1,108 @@
+import { jsx as o, jsxs as b } from "react/jsx-runtime";
+import P from "../../../../../../external/classnames/index.es.js";
+import { useState as g, useEffect as Q, useCallback as w } from "react";
+import { Heading as U } from "../../../base/typography/heading/heading.es.js";
+import { Button as T } from "../../../buttons/button/button.es.js";
+import { ClosingButton as W } from "../../../buttons/closing-button/closing-button.es.js";
+import { Calendar as X } from "../../../content/calendar/calendar.es.js";
+import { resolveRangeSelection as Z } from "../date-field-helpers.es.js";
+import c from "./date-picker-modal.module.scss.es.js";
+import { useLabels as $ } from "../../../../providers/label-provider/use-labels.es.js";
+import { Modal as d } from "../../../overlays/modal/modal.es.js";
+import { useModal as v } from "../../../overlays/modal/modal-context.es.js";
+const _ = (e, n) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [...e].sort((a, l) => a.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 : n ?? /* @__PURE__ */ new Date(), ee = ({ title: e }) => {
+  const { labelId: n, onOpenChange: a } = v();
+  return /* @__PURE__ */ b("div", { className: c["tedi-date-picker-modal__header"], children: [
+    /* @__PURE__ */ o(U, { element: "h2", modifiers: "h4", id: n, className: c["tedi-date-picker-modal__title"], children: e }),
+    /* @__PURE__ */ o(W, { size: "small", onClick: () => a(!1) })
+  ] });
+}, te = (e) => {
+  const {
+    open: n,
+    onOpenChange: a,
+    value: l,
+    onConfirm: A,
+    mode: t = "single",
+    numberOfMonths: j,
+    locale: S,
+    localeCode: x,
+    showOutsideDays: O = !0,
+    disabledMatchers: B,
+    required: k,
+    availableDays: H,
+    footer: L,
+    monthYearSelectType: V,
+    showNavigation: I,
+    selectionLevel: m = "days",
+    initialView: h,
+    initialMonth: p,
+    modalProps: i,
+    title: K,
+    ...q
+  } = e, { getLabel: y } = $(), [r, f] = g(l), [z, C] = g(h ?? m), [E, D] = g(() => _(l, p));
+  Q(() => {
+    n && (f(l), C(h ?? m), D(_(l, p)));
+  }, [n, l, m, h, p]);
+  const F = w(
+    (s, u) => {
+      f(t === "range" ? (J) => Z(s, J, u) : s);
+    },
+    [t]
+  ), R = w(
+    (s) => {
+      f((u) => t === "range" ? { from: s, to: void 0 } : t === "multiple" ? [...Array.isArray(u) ? u : [], s] : s);
+    },
+    [t]
+  ), Y = t === "multiple" ? Array.isArray(r) && r.length > 0 : t === "range" ? !!r && typeof r == "object" && "from" in r && r.from instanceof Date : r instanceof Date, M = k === !0 && !Y, G = () => {
+    M || (A(r), a(!1));
+  }, N = K ?? y(t === "range" ? "date-field.modal-title-range" : t === "multiple" ? "date-field.modal-title-multiple" : "date-field.modal-title");
+  return /* @__PURE__ */ o(d, { open: n, onToggle: a, children: /* @__PURE__ */ b(
+    d.Content,
+    {
+      position: "center",
+      "aria-label": N,
+      ...i,
+      md: { width: "max-content", ...i == null ? void 0 : i.md },
+      sm: { width: "full", ...i == null ? void 0 : i.sm },
+      className: P(c["tedi-date-picker-modal"], i == null ? void 0 : i.className),
+      children: [
+        /* @__PURE__ */ o(d.Header, { children: /* @__PURE__ */ o(ee, { title: N }) }),
+        /* @__PURE__ */ o(d.Body, { className: c["tedi-date-picker-modal__body"], children: /* @__PURE__ */ o(
+          X,
+          {
+            ...q,
+            numberOfMonths: j,
+            view: z,
+            selectionLevel: m,
+            currentMonth: E,
+            setCurrentMonth: D,
+            setView: C,
+            mode: t,
+            value: r,
+            locale: S,
+            localeCode: x,
+            showOutsideDays: O,
+            disabledMatchers: B,
+            required: k,
+            availableDays: H,
+            footer: L,
+            monthYearSelectType: V,
+            showNavigation: I,
+            handleSelect: F,
+            applyValue: R,
+            className: c["tedi-date-picker-modal__calendar"],
+            bordered: !1
+          }
+        ) }),
+        /* @__PURE__ */ b(d.Footer, { children: [
+          /* @__PURE__ */ o(T, { visualType: "secondary", onClick: () => a(!1), children: y("date-field.cancel") }),
+          /* @__PURE__ */ o(T, { onClick: G, disabled: M, children: y("date-field.confirm") })
+        ] })
+      ]
+    }
+  ) });
+};
+te.displayName = "DatePickerModal";
+export {
+  te as DatePickerModal
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-date-picker-modal":"tedi-date-picker-modal-fd7a9e09","tedi-date-picker-modal__header":"tedi-date-picker-modal__header-d61d5292","tedi-date-picker-modal__title":"tedi-date-picker-modal__title-93184118","tedi-date-picker-modal__body":"tedi-date-picker-modal__body-47a7c06d","tedi-date-picker-modal__calendar":"tedi-date-picker-modal__calendar-8f146b2c"};exports.default=e;

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

@@ -0,0 +1,10 @@
+const e = {
+  "tedi-date-picker-modal": "tedi-date-picker-modal-fd7a9e09",
+  "tedi-date-picker-modal__header": "tedi-date-picker-modal__header-d61d5292",
+  "tedi-date-picker-modal__title": "tedi-date-picker-modal__title-93184118",
+  "tedi-date-picker-modal__body": "tedi-date-picker-modal__body-47a7c06d",
+  "tedi-date-picker-modal__calendar": "tedi-date-picker-modal__calendar-8f146b2c"
+};
+export {
+  e as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,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"),ke=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"),Fe=require("../time-picker/time-picker.cjs.js"),a=require("./date-time-field.module.scss.cjs.js"),Nt=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Dt=require("../../../providers/label-provider/use-labels.cjs.js"),Te=require("../../../helpers/hooks/use-breakpoint.cjs.js"),yt=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),jt=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"),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,Me=n.forwardRef((s,c)=>{const{getCurrentBreakpointProps:U}=Nt.useBreakpointProps(s.defaultServerBreakpoint),{getLabel:b}=Dt.useLabels(),R=Te.default(s.defaultServerBreakpoint),P=Te.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:le,defaultValue:Ae,onChange:W,required:de,readOnly:Oe,disabled:V,minDate:oe,maxDate:ce,disablePast:ue,disableFuture:me,disabledMatchers:j,stepMinutes:fe=15,initialMonth:Y,locale:$e=yt.et,localeCode:k="et-EE",selectTimeLabel:Le=b("dateTimeField.selectTime"),backLabel:He=b("dateTimeField.back"),mode:Be="single",selectionLevel:Ie="days",inputProps:l,disabledDateErrorMessage:Ge=b("dateField.disabledDateError")}=s,d=Be==="range",f=Se&&!d,F=d?"side-by-side":E,he=we??(F==="multi-step"?"radio":"button"),pe=le!==void 0,[Ue,ze]=n.useState(Ae),x=pe?le:Ue,u=d?Mt(x):{},m=d?void 0:St(x),[N,J]=n.useState(!1),[We,K]=n.useState("date"),[Ye,ge]=n.useState("days"),Q=d?u.from:m,[Je,q]=n.useState(()=>Q??Y??new Date),_e=n.useRef(Q);_e.current=Q,n.useEffect(()=>{N||(K("date"),ge("days"),q(_e.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 De={};t.forEach((_t,bt)=>{De[_t]=Number(I[bt+1])});const ye=Number(I[t.length+1]),je=Number(I[t.length+2]),{day:ae,month:se,year:re}=De;if(ae===void 0||se===void 0||re===void 0||ye>23||je>59)return;const C=new Date(re,se-1,ae,ye,je,0,0);if(!(isNaN(C.getTime())||C.getFullYear()!==re||C.getMonth()!==se-1||C.getDate()!==ae))return C}},[A]),[Xe,X]=n.useState(()=>$(x)),[be,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:jt.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=>{pe||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)})},H=n.useMemo(()=>[...y.buildDisabledMatchers({minDate:oe,maxDate:ce,disablePast:ue,disableFuture:me}),...j?Array.isArray(j)?j:[j]:[]],[oe,ce,ue,me,j]),ve=n.useCallback(e=>kt.dateMatchModifiers(e,H),[H]),ot=e=>{if(X(e),e===""){p(!1),o(void 0);return}if(f){const r=Tt(e);if(!r){p(!1);return}if(ve(r)){p(!0);return}p(!1),o(r),q(r);return}if(d)return;const t=Qe(e);if(!t){p(!1);return}if(ve(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(ke.Button,{type:"button",visualType:"link",size:"small",iconLeft:"schedule",onClick:()=>K("time"),children:Le})}):void 0,te=i.jsx(vt.Calendar,{view:Ye,setView:ge,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:H.length?H:void 0,required:de,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,xe=i.jsx(Fe.TimePicker,{value:g(m),stepMinutes:fe,availableTimes:ie,gridVariant:he,onChange:lt,className:w.default(a.default["tedi-date-time-field__time-picker"],{[a.default["tedi-date-time-field__time-picker--wheel"]]:ft})}),Ne=e=>{const t=T(u[e]),r=!t||t.length===0;return i.jsx(Fe.TimePicker,{value:g(u[e]),stepMinutes:fe,availableTimes:t,gridVariant:he,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,B=be?{text:Ge,type:"error"}:null,ht=B?S?Array.isArray(S)?[...S,B]:[S,B]:B: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:de,disabled:V,invalid:be||(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:Ne("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:Ne("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:xe})]})]}):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(ke.Button,{type:"button",visualType:"link",size:"small",iconLeft:"arrow_back",onClick:()=>K("date"),children:He}),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:xe})]})})})})]})});Me.displayName="DateTimeField";exports.DateTimeField=Me;

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;