@tedi-design-system/react 18.0.0-rc.26 → 18.0.0-rc.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.0.0-rc.26",
+  "version": "18.0.0-rc.28",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/content/calendar/calendar.d.ts

@@ -109,9 +109,10 @@ export interface CalendarProps extends Omit<DayPickerProps, 'mode' | 'selected'
     className?: string;
     /**
      * Whether to render the surrounding card (border, background, radius).
-     * Set to `false` when embedding inside a parent that already provides
-     * its own surface — e.g. alongside a calendar inside `DateTimeField`.
-     * The inner gradient masks and column separators are preserved either way.
+     * Set to `false` when embedding inside a parent that already provides its
+     * own surface — e.g. inside `DatePickerModal`, or alongside a calendar in
+     * `DateTimeField`. The inner gradient masks and column separators are
+     * preserved either way.
      * @default true
      */
     bordered?: boolean;

package/src/tedi/components/content/calendar/components/calendar-header/calendar-header.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("../../../../../../../external/classnames/index.cjs.js"),j=require("react"),m=require("../../../../base/icon/icon.cjs.js"),c=require("../../../../buttons/button/button.cjs.js"),r=require("./calendar-header.module.scss.cjs.js"),B=require("../../../../../providers/label-provider/use-labels.cjs.js"),T=require("../../../../../../../external/react-day-picker/dist/esm/types/deprecated.cjs.js"),L=require("../../../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.cjs.js"),l=require("../../../../overlays/dropdown/dropdown.cjs.js");function A({calendarMonth:S,monthYearSelectType:v="dropdown",onOpenMonthGrid:q,onOpenYearGrid:N,showNavigation:p=!0,localeCode:f,disabledMatchers:o}){const g=v==="grid",{getLabel:u}=B.useLabels(),{goToMonth:_,nextMonth:D,previousMonth:k}=T.useNavigation(),i=S.date,a=i.getFullYear(),h=i.getMonth(),C=Array.from({length:12},(n,t)=>new Date(a,t,1).toLocaleString(f,{month:"long"})),F=new Date().getFullYear(),s=Array.from({length:21},(n,t)=>F-10+t),w=j.useCallback((n,t)=>{if(!(o!=null&&o.length))return!1;const d=new Date(n);for(;d<=t;){if(!L.dateMatchModifiers(d,o))return!1;d.setDate(d.getDate()+1)}return!0},[o]),I=j.useMemo(()=>{if(!(o!=null&&o.length))return new Set;const n=new Set;for(let t=0;t<12;t++){const d=new Date(a,t,1),x=new Date(a,t+1,0);w(d,x)&&n.add(t)}return n},[o,a,w]),Y=j.useMemo(()=>{if(!(o!=null&&o.length))return new Set;const n=new Set;for(const t of s){const d=new Date(t,0,1),x=new Date(t,11,31);w(d,x)&&n.add(t)}return n},[o,s,w]);return e.jsxs("div",{className:y.default(r.default["tedi-calendar__header"],{[r.default["tedi-calendar__no-navigation"]]:!p}),children:[p&&e.jsx(c.Button,{type:"button",onClick:()=>k&&_(k),"aria-label":u("pickers.previousMonth"),icon:"arrow_back",visualType:"neutral",children:u("pickers.previousMonth")}),g?e.jsxs(e.Fragment,{children:[e.jsxs(c.Button,{noStyle:!0,className:r.default["tedi-calendar__month-year-selector"],onClick:q,"data-testid":"tedi-calendar-month-trigger",children:[i.toLocaleString(f,{month:"long"}),e.jsx(m.Icon,{name:"arrow_drop_down",color:"tertiary",className:r.default["tedi-calendar__month-year-caret"]})]}),e.jsxs(c.Button,{noStyle:!0,className:r.default["tedi-calendar__month-year-selector"],onClick:N,"data-testid":"tedi-calendar-year-trigger",children:[i.getFullYear(),e.jsx(m.Icon,{name:"arrow_drop_down",color:"tertiary",className:r.default["tedi-calendar__month-year-caret"]})]})]}):e.jsxs(e.Fragment,{children:[e.jsxs(l.Dropdown,{className:y.default(r.default["tedi-calendar__month-year-dropdown"],{[r.default["tedi-calendar__picker-grid-dropdown"]]:g}),width:"auto",defaultActiveIndex:h,children:[e.jsx(l.Dropdown.Trigger,{children:e.jsxs(c.Button,{noStyle:!0,className:r.default["tedi-calendar__month-year-selector"],children:[i.toLocaleString(f,{month:"long"}),e.jsx(m.Icon,{name:"arrow_drop_down",color:"tertiary",className:r.default["tedi-calendar__month-year-caret"],"data-testid":"tedi-icon-arrow_drop_down"})]})}),e.jsx(l.Dropdown.Content,{children:C.map((n,t)=>e.jsx(l.Dropdown.Item,{index:t,active:h===t,disabled:I.has(t),onClick:()=>_(new Date(a,t)),children:n},n))})]}),e.jsxs(l.Dropdown,{className:y.default(r.default["tedi-calendar__month-year-dropdown"],{[r.default["tedi-calendar__picker-grid-dropdown"]]:g}),width:"auto",defaultActiveIndex:s.indexOf(a)===-1?void 0:s.indexOf(a),children:[e.jsx(l.Dropdown.Trigger,{children:e.jsxs(c.Button,{noStyle:!0,className:r.default["tedi-calendar__month-year-selector"],children:[i.getFullYear(),e.jsx(m.Icon,{name:"arrow_drop_down",color:"tertiary",className:r.default["tedi-calendar__month-year-caret"],"data-testid":"tedi-icon-arrow_drop_down"})]})}),e.jsx(l.Dropdown.Content,{children:s.map((n,t)=>e.jsx(l.Dropdown.Item,{index:t,active:a===n,disabled:Y.has(n),onClick:()=>_(new Date(n,h)),children:n},n))})]})]}),p&&e.jsx(c.Button,{type:"button",onClick:()=>D&&_(D),visualType:"neutral","aria-label":u("pickers.nextMonth"),icon:"arrow_forward",children:u("pickers.nextMonth")})]})}exports.CalendarHeader=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("../../../../../../../external/classnames/index.cjs.js"),j=require("react"),p=require("../../../../base/icon/icon.cjs.js"),k=require("../../../../base/typography/text/text.cjs.js"),c=require("../../../../buttons/button/button.cjs.js"),r=require("./calendar-header.module.scss.cjs.js"),B=require("../../../../../providers/label-provider/use-labels.cjs.js"),L=require("../../../../../../../external/react-day-picker/dist/esm/types/deprecated.cjs.js"),A=require("../../../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.cjs.js"),l=require("../../../../overlays/dropdown/dropdown.cjs.js");function H({calendarMonth:v,monthYearSelectType:q="dropdown",onOpenMonthGrid:N,onOpenYearGrid:C,showNavigation:u=!0,localeCode:_,disabledMatchers:o}){const h=q==="grid",{getLabel:m}=B.useLabels(),{goToMonth:w,nextMonth:D,previousMonth:S}=L.useNavigation(),i=v.date,a=i.getFullYear(),x=i.getMonth(),T=Array.from({length:12},(n,t)=>new Date(a,t,1).toLocaleString(_,{month:"long"})),F=new Date().getFullYear(),s=Array.from({length:21},(n,t)=>F-10+t),f=j.useCallback((n,t)=>{if(!(o!=null&&o.length))return!1;const d=new Date(n);for(;d<=t;){if(!A.dateMatchModifiers(d,o))return!1;d.setDate(d.getDate()+1)}return!0},[o]),I=j.useMemo(()=>{if(!(o!=null&&o.length))return new Set;const n=new Set;for(let t=0;t<12;t++){const d=new Date(a,t,1),g=new Date(a,t+1,0);f(d,g)&&n.add(t)}return n},[o,a,f]),Y=j.useMemo(()=>{if(!(o!=null&&o.length))return new Set;const n=new Set;for(const t of s){const d=new Date(t,0,1),g=new Date(t,11,31);f(d,g)&&n.add(t)}return n},[o,s,f]);return e.jsxs("div",{className:y.default(r.default["tedi-calendar__header"],{[r.default["tedi-calendar__no-navigation"]]:!u}),children:[u&&e.jsx(c.Button,{type:"button",onClick:()=>S&&w(S),"aria-label":m("pickers.previousMonth"),icon:"arrow_back",visualType:"neutral",children:m("pickers.previousMonth")}),u?h?e.jsxs(e.Fragment,{children:[e.jsxs(c.Button,{noStyle:!0,className:r.default["tedi-calendar__month-year-selector"],onClick:N,"data-testid":"tedi-calendar-month-trigger",children:[i.toLocaleString(_,{month:"long"}),e.jsx(p.Icon,{name:"arrow_drop_down",color:"tertiary",className:r.default["tedi-calendar__month-year-caret"]})]}),e.jsxs(c.Button,{noStyle:!0,className:r.default["tedi-calendar__month-year-selector"],onClick:C,"data-testid":"tedi-calendar-year-trigger",children:[i.getFullYear(),e.jsx(p.Icon,{name:"arrow_drop_down",color:"tertiary",className:r.default["tedi-calendar__month-year-caret"]})]})]}):e.jsxs(e.Fragment,{children:[e.jsxs(l.Dropdown,{className:y.default(r.default["tedi-calendar__month-year-dropdown"],{[r.default["tedi-calendar__picker-grid-dropdown"]]:h}),width:"auto",defaultActiveIndex:x,children:[e.jsx(l.Dropdown.Trigger,{children:e.jsxs(c.Button,{noStyle:!0,className:r.default["tedi-calendar__month-year-selector"],children:[i.toLocaleString(_,{month:"long"}),e.jsx(p.Icon,{name:"arrow_drop_down",color:"tertiary",className:r.default["tedi-calendar__month-year-caret"],"data-testid":"tedi-icon-arrow_drop_down"})]})}),e.jsx(l.Dropdown.Content,{children:T.map((n,t)=>e.jsx(l.Dropdown.Item,{index:t,active:x===t,disabled:I.has(t),onClick:()=>w(new Date(a,t)),children:n},n))})]}),e.jsxs(l.Dropdown,{className:y.default(r.default["tedi-calendar__month-year-dropdown"],{[r.default["tedi-calendar__picker-grid-dropdown"]]:h}),width:"auto",defaultActiveIndex:s.indexOf(a)===-1?void 0:s.indexOf(a),children:[e.jsx(l.Dropdown.Trigger,{children:e.jsxs(c.Button,{noStyle:!0,className:r.default["tedi-calendar__month-year-selector"],children:[i.getFullYear(),e.jsx(p.Icon,{name:"arrow_drop_down",color:"tertiary",className:r.default["tedi-calendar__month-year-caret"],"data-testid":"tedi-icon-arrow_drop_down"})]})}),e.jsx(l.Dropdown.Content,{children:s.map((n,t)=>e.jsx(l.Dropdown.Item,{index:t,active:a===n,disabled:Y.has(n),onClick:()=>w(new Date(n,x)),children:n},n))})]})]}):e.jsxs("div",{className:r.default["tedi-calendar__month-year-label"],children:[e.jsx(k.Text,{children:i.toLocaleString(_,{month:"long"})}),e.jsx(k.Text,{children:a})]}),u&&e.jsx(c.Button,{type:"button",onClick:()=>D&&w(D),visualType:"neutral","aria-label":m("pickers.nextMonth"),icon:"arrow_forward",children:m("pickers.nextMonth")})]})}exports.CalendarHeader=H;

package/src/tedi/components/content/calendar/components/calendar-header/calendar-header.es.js

@@ -1,99 +1,100 @@
-import { jsxs as a, jsx as o, Fragment as x } from "react/jsx-runtime";
+import { jsxs as a, jsx as n, Fragment as v } from "react/jsx-runtime";
 import D from "../../../../../../../external/classnames/index.es.js";
-import { useCallback as O, useMemo as N } from "react";
-import { Icon as w } from "../../../../base/icon/icon.es.js";
-import { Button as s } from "../../../../buttons/button/button.es.js";
+import { useCallback as B, useMemo as N } from "react";
+import { Icon as g } from "../../../../base/icon/icon.es.js";
+import { Text as C } from "../../../../base/typography/text/text.es.js";
+import { Button as m } from "../../../../buttons/button/button.es.js";
 import r from "./calendar-header.module.scss.es.js";
-import { useLabels as B } from "../../../../../providers/label-provider/use-labels.es.js";
-import { useNavigation as G } from "../../../../../../../external/react-day-picker/dist/esm/types/deprecated.es.js";
-import { dateMatchModifiers as H } from "../../../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.es.js";
+import { useLabels as G } from "../../../../../providers/label-provider/use-labels.es.js";
+import { useNavigation as H } from "../../../../../../../external/react-day-picker/dist/esm/types/deprecated.es.js";
+import { dateMatchModifiers as R } from "../../../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.es.js";
 import { Dropdown as c } from "../../../../overlays/dropdown/dropdown.es.js";
-function W({
-  calendarMonth: C,
-  monthYearSelectType: Y = "dropdown",
-  onOpenMonthGrid: F,
-  onOpenYearGrid: T,
-  showNavigation: g = !0,
-  localeCode: h,
-  disabledMatchers: n
+function Z({
+  calendarMonth: Y,
+  monthYearSelectType: F = "dropdown",
+  onOpenMonthGrid: T,
+  onOpenYearGrid: L,
+  showNavigation: _ = !0,
+  localeCode: p,
+  disabledMatchers: o
 }) {
-  const f = Y === "grid", { getLabel: _ } = B(), { goToMonth: u, nextMonth: S, previousMonth: v } = G(), d = C.date, i = d.getFullYear(), y = d.getMonth(), A = Array.from(
+  const f = F === "grid", { getLabel: u } = G(), { goToMonth: h, nextMonth: S, previousMonth: x } = H(), d = Y.date, i = d.getFullYear(), y = d.getMonth(), A = Array.from(
     { length: 12 },
-    (t, e) => new Date(i, e, 1).toLocaleString(h, { month: "long" })
-  ), I = (/* @__PURE__ */ new Date()).getFullYear(), m = Array.from({ length: 21 }, (t, e) => I - 10 + e), p = O(
+    (t, e) => new Date(i, e, 1).toLocaleString(p, { month: "long" })
+  ), I = (/* @__PURE__ */ new Date()).getFullYear(), s = Array.from({ length: 21 }, (t, e) => I - 10 + e), w = B(
     (t, e) => {
-      if (!(n != null && n.length)) return !1;
+      if (!(o != null && o.length)) return !1;
       const l = new Date(t);
       for (; l <= e; ) {
-        if (!H(l, n)) return !1;
+        if (!R(l, o)) return !1;
         l.setDate(l.getDate() + 1);
       }
       return !0;
     },
-    [n]
-  ), L = N(() => {
-    if (!(n != null && n.length)) return /* @__PURE__ */ new Set();
+    [o]
+  ), j = N(() => {
+    if (!(o != null && o.length)) return /* @__PURE__ */ new Set();
     const t = /* @__PURE__ */ new Set();
     for (let e = 0; e < 12; e++) {
       const l = new Date(i, e, 1), k = new Date(i, e + 1, 0);
-      p(l, k) && t.add(e);
+      w(l, k) && t.add(e);
     }
     return t;
-  }, [n, i, p]), j = N(() => {
-    if (!(n != null && n.length)) return /* @__PURE__ */ new Set();
+  }, [o, i, w]), O = N(() => {
+    if (!(o != null && o.length)) return /* @__PURE__ */ new Set();
     const t = /* @__PURE__ */ new Set();
-    for (const e of m) {
+    for (const e of s) {
       const l = new Date(e, 0, 1), k = new Date(e, 11, 31);
-      p(l, k) && t.add(e);
+      w(l, k) && t.add(e);
     }
     return t;
-  }, [n, m, p]);
+  }, [o, s, w]);
   return /* @__PURE__ */ a(
     "div",
     {
       className: D(r["tedi-calendar__header"], {
-        [r["tedi-calendar__no-navigation"]]: !g
+        [r["tedi-calendar__no-navigation"]]: !_
       }),
       children: [
-        g && /* @__PURE__ */ o(
-          s,
+        _ && /* @__PURE__ */ n(
+          m,
           {
             type: "button",
-            onClick: () => v && u(v),
-            "aria-label": _("pickers.previousMonth"),
+            onClick: () => x && h(x),
+            "aria-label": u("pickers.previousMonth"),
             icon: "arrow_back",
             visualType: "neutral",
-            children: _("pickers.previousMonth")
+            children: u("pickers.previousMonth")
           }
         ),
-        f ? /* @__PURE__ */ a(x, { children: [
+        _ ? f ? /* @__PURE__ */ a(v, { children: [
           /* @__PURE__ */ a(
-            s,
+            m,
             {
               noStyle: !0,
               className: r["tedi-calendar__month-year-selector"],
-              onClick: F,
+              onClick: T,
               "data-testid": "tedi-calendar-month-trigger",
               children: [
-                d.toLocaleString(h, { month: "long" }),
-                /* @__PURE__ */ o(w, { name: "arrow_drop_down", color: "tertiary", className: r["tedi-calendar__month-year-caret"] })
+                d.toLocaleString(p, { month: "long" }),
+                /* @__PURE__ */ n(g, { name: "arrow_drop_down", color: "tertiary", className: r["tedi-calendar__month-year-caret"] })
               ]
             }
           ),
           /* @__PURE__ */ a(
-            s,
+            m,
             {
               noStyle: !0,
               className: r["tedi-calendar__month-year-selector"],
-              onClick: T,
+              onClick: L,
               "data-testid": "tedi-calendar-year-trigger",
               children: [
                 d.getFullYear(),
-                /* @__PURE__ */ o(w, { name: "arrow_drop_down", color: "tertiary", className: r["tedi-calendar__month-year-caret"] })
+                /* @__PURE__ */ n(g, { name: "arrow_drop_down", color: "tertiary", className: r["tedi-calendar__month-year-caret"] })
               ]
             }
           )
-        ] }) : /* @__PURE__ */ a(x, { children: [
+        ] }) : /* @__PURE__ */ a(v, { children: [
           /* @__PURE__ */ a(
             c,
             {
@@ -103,10 +104,10 @@ function W({
               width: "auto",
               defaultActiveIndex: y,
               children: [
-                /* @__PURE__ */ o(c.Trigger, { children: /* @__PURE__ */ a(s, { noStyle: !0, className: r["tedi-calendar__month-year-selector"], children: [
-                  d.toLocaleString(h, { month: "long" }),
-                  /* @__PURE__ */ o(
-                    w,
+                /* @__PURE__ */ n(c.Trigger, { children: /* @__PURE__ */ a(m, { noStyle: !0, className: r["tedi-calendar__month-year-selector"], children: [
+                  d.toLocaleString(p, { month: "long" }),
+                  /* @__PURE__ */ n(
+                    g,
                     {
                       name: "arrow_drop_down",
                       color: "tertiary",
@@ -115,13 +116,13 @@ function W({
                     }
                   )
                 ] }) }),
-                /* @__PURE__ */ o(c.Content, { children: A.map((t, e) => /* @__PURE__ */ o(
+                /* @__PURE__ */ n(c.Content, { children: A.map((t, e) => /* @__PURE__ */ n(
                   c.Item,
                   {
                     index: e,
                     active: y === e,
-                    disabled: L.has(e),
-                    onClick: () => u(new Date(i, e)),
+                    disabled: j.has(e),
+                    onClick: () => h(new Date(i, e)),
                     children: t
                   },
                   t
@@ -136,12 +137,12 @@ function W({
                 [r["tedi-calendar__picker-grid-dropdown"]]: f
               }),
               width: "auto",
-              defaultActiveIndex: m.indexOf(i) === -1 ? void 0 : m.indexOf(i),
+              defaultActiveIndex: s.indexOf(i) === -1 ? void 0 : s.indexOf(i),
               children: [
-                /* @__PURE__ */ o(c.Trigger, { children: /* @__PURE__ */ a(s, { noStyle: !0, className: r["tedi-calendar__month-year-selector"], children: [
+                /* @__PURE__ */ n(c.Trigger, { children: /* @__PURE__ */ a(m, { noStyle: !0, className: r["tedi-calendar__month-year-selector"], children: [
                   d.getFullYear(),
-                  /* @__PURE__ */ o(
-                    w,
+                  /* @__PURE__ */ n(
+                    g,
                     {
                       name: "arrow_drop_down",
                       color: "tertiary",
@@ -150,13 +151,13 @@ function W({
                     }
                   )
                 ] }) }),
-                /* @__PURE__ */ o(c.Content, { children: m.map((t, e) => /* @__PURE__ */ o(
+                /* @__PURE__ */ n(c.Content, { children: s.map((t, e) => /* @__PURE__ */ n(
                   c.Item,
                   {
                     index: e,
                     active: i === t,
-                    disabled: j.has(t),
-                    onClick: () => u(new Date(t, y)),
+                    disabled: O.has(t),
+                    onClick: () => h(new Date(t, y)),
                     children: t
                   },
                   t
@@ -164,16 +165,19 @@ function W({
               ]
             }
           )
+        ] }) : /* @__PURE__ */ a("div", { className: r["tedi-calendar__month-year-label"], children: [
+          /* @__PURE__ */ n(C, { children: d.toLocaleString(p, { month: "long" }) }),
+          /* @__PURE__ */ n(C, { children: i })
         ] }),
-        g && /* @__PURE__ */ o(
-          s,
+        _ && /* @__PURE__ */ n(
+          m,
           {
             type: "button",
-            onClick: () => S && u(S),
+            onClick: () => S && h(S),
             visualType: "neutral",
-            "aria-label": _("pickers.nextMonth"),
+            "aria-label": u("pickers.nextMonth"),
             icon: "arrow_forward",
-            children: _("pickers.nextMonth")
+            children: u("pickers.nextMonth")
           }
         )
       ]
@@ -181,5 +185,5 @@ function W({
   );
 }
 export {
-  W as CalendarHeader
+  Z as CalendarHeader
 };

package/src/tedi/components/content/calendar/components/calendar-header/calendar-header.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-calendar__header":"tedi-calendar__header-b917e6c6","tedi-calendar__no-navigation":"tedi-calendar__no-navigation-6ed593b5","tedi-calendar__month-year-dropdown":"tedi-calendar__month-year-dropdown-87f6e081","tedi-calendar__month-year-selector":"tedi-calendar__month-year-selector-8fbb2727","tedi-calendar__month-year-caret":"tedi-calendar__month-year-caret-a08a1e16"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-calendar__header":"tedi-calendar__header-b917e6c6","tedi-calendar__no-navigation":"tedi-calendar__no-navigation-6ed593b5","tedi-calendar__month-year-dropdown":"tedi-calendar__month-year-dropdown-87f6e081","tedi-calendar__month-year-selector":"tedi-calendar__month-year-selector-8fbb2727","tedi-calendar__month-year-caret":"tedi-calendar__month-year-caret-a08a1e16","tedi-calendar__month-year-label":"tedi-calendar__month-year-label-d3cf51de"};exports.default=e;

package/src/tedi/components/content/calendar/components/calendar-header/calendar-header.module.scss.es.js

@@ -3,7 +3,8 @@ const e = {
   "tedi-calendar__no-navigation": "tedi-calendar__no-navigation-6ed593b5",
   "tedi-calendar__month-year-dropdown": "tedi-calendar__month-year-dropdown-87f6e081",
   "tedi-calendar__month-year-selector": "tedi-calendar__month-year-selector-8fbb2727",
-  "tedi-calendar__month-year-caret": "tedi-calendar__month-year-caret-a08a1e16"
+  "tedi-calendar__month-year-caret": "tedi-calendar__month-year-caret-a08a1e16",
+  "tedi-calendar__month-year-label": "tedi-calendar__month-year-label-d3cf51de"
 };
 export {
   e as default

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=4,d=8,c=e=>{const a=[];return e.disabled&&(Array.isArray(e.disabled)?a.push(...e.disabled):a.push(e.disabled)),e.minDate&&a.push({before:e.minDate}),e.maxDate&&a.push({after:e.maxDate}),e.disablePast&&a.push({before:new Date}),e.disableFuture&&a.push({after:new Date}),e.shouldDisableMonth&&a.push(s=>{var r;return((r=e.shouldDisableMonth)==null?void 0:r.call(e,s))??!1}),e.shouldDisableYear&&a.push(s=>{var r;return((r=e.shouldDisableYear)==null?void 0:r.call(e,s))??!1}),a},D=e=>{const a=new Date(2099,11,31),s=e.formatToParts(a),r=[],o=[];for(const t of s)t.type==="day"||t.type==="month"||t.type==="year"?r.push(t.type):t.type==="literal"&&r.length>0&&o.length<2&&o.push(t.value);return{fieldOrder:r,separators:o}},f=({fieldOrder:e,separators:a})=>{const s=r=>r.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");return e.map((r,o)=>{const t=r==="year"?"\\d{4}":"\\d{2}";return`${o>0?s(a[o-1]??""):""}(${t})`}).join("")};exports.CALENDAR_POPOVER_OFFSET=l;exports.CALENDAR_POPOVER_PADDING=d;exports.buildDateRegexSource=f;exports.buildDisabledMatchers=c;exports.getLocaleDateParts=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=4,c=8,l=e=>!!e&&!Array.isArray(e)&&!(e instanceof Date)&&"from"in e,f=(e,a,t)=>t&&l(a)&&a.from&&a.to?{from:t,to:void 0}:l(e)?e:void 0,D=e=>{const a=[];return e.disabled&&(Array.isArray(e.disabled)?a.push(...e.disabled):a.push(e.disabled)),e.minDate&&a.push({before:e.minDate}),e.maxDate&&a.push({after:e.maxDate}),e.disablePast&&a.push({before:new Date}),e.disableFuture&&a.push({after:new Date}),e.shouldDisableMonth&&a.push(t=>{var r;return((r=e.shouldDisableMonth)==null?void 0:r.call(e,t))??!1}),e.shouldDisableYear&&a.push(t=>{var r;return((r=e.shouldDisableYear)==null?void 0:r.call(e,t))??!1}),a},h=e=>{const a=new Date(2099,11,31),t=e.formatToParts(a),r=[],s=[];for(const o of t)o.type==="day"||o.type==="month"||o.type==="year"?r.push(o.type):o.type==="literal"&&r.length>0&&s.length<2&&s.push(o.value);return{fieldOrder:r,separators:s}},n=({fieldOrder:e,separators:a})=>{const t=r=>r.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");return e.map((r,s)=>{const o=r==="year"?"\\d{4}":"\\d{2}";return`${s>0?t(a[s-1]??""):""}(${o})`}).join("")};exports.CALENDAR_POPOVER_OFFSET=d;exports.CALENDAR_POPOVER_PADDING=c;exports.buildDateRegexSource=n;exports.buildDisabledMatchers=D;exports.getLocaleDateParts=h;exports.resolveRangeSelection=f;

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

@@ -12,6 +12,22 @@ export declare const CALENDAR_POPOVER_OFFSET = 4;
  */
 export declare const CALENDAR_POPOVER_PADDING = 8;
 export type SelectedValueLike = Date | Date[] | DateRange | undefined;
+/**
+ * Range-selection click resolver. react-day-picker's default `addToRange`
+ * keeps a completed `{ from, to }` range and only moves one of its ends when
+ * the user clicks again — so after picking a start and an end, clicking a new
+ * start instead drags the existing end. That surprises users who expect a
+ * fresh click to begin a new range.
+ *
+ * This normalises that: once a range is complete, the next click starts over
+ * with `from` set to the clicked day and `to` cleared. While the range is
+ * still being built (or empty), DayPicker's own result is passed through.
+ *
+ * @param computed - the range react-day-picker derived from the click
+ * @param previous - the range that was selected before this click
+ * @param clickedDay - the day the user just clicked
+ */
+export declare const resolveRangeSelection: (computed: SelectedValueLike, previous: SelectedValueLike, clickedDay: Date | undefined) => DateRange | undefined;
 /**
  * Resolves the month the calendar should start on for any selection
  * shape. Used by both `DateField` (single / multiple / range Date(s)) and

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

@@ -1,4 +1,4 @@
-const d = 4, f = 8, h = (e) => {
+const d = 4, c = 8, l = (e) => !!e && !Array.isArray(e) && !(e instanceof Date) && "from" in e, h = (e, a, o) => o && l(a) && a.from && a.to ? { from: o, to: void 0 } : l(e) ? e : void 0, D = (e) => {
   const a = [];
   return e.disabled && (Array.isArray(e.disabled) ? a.push(...e.disabled) : a.push(e.disabled)), e.minDate && a.push({ before: e.minDate }), e.maxDate && a.push({ after: e.maxDate }), e.disablePast && a.push({ before: /* @__PURE__ */ new Date() }), e.disableFuture && a.push({ after: /* @__PURE__ */ new Date() }), e.shouldDisableMonth && a.push((o) => {
     var r;
@@ -7,22 +7,23 @@ const d = 4, f = 8, h = (e) => {
     var r;
     return ((r = e.shouldDisableYear) == null ? void 0 : r.call(e, o)) ?? !1;
   }), a;
-}, c = (e) => {
-  const a = new Date(2099, 11, 31), o = e.formatToParts(a), r = [], t = [];
-  for (const s of o)
-    s.type === "day" || s.type === "month" || s.type === "year" ? r.push(s.type) : s.type === "literal" && r.length > 0 && t.length < 2 && t.push(s.value);
-  return { fieldOrder: r, separators: t };
-}, D = ({ fieldOrder: e, separators: a }) => {
+}, n = (e) => {
+  const a = new Date(2099, 11, 31), o = e.formatToParts(a), r = [], s = [];
+  for (const t of o)
+    t.type === "day" || t.type === "month" || t.type === "year" ? r.push(t.type) : t.type === "literal" && r.length > 0 && s.length < 2 && s.push(t.value);
+  return { fieldOrder: r, separators: s };
+}, b = ({ fieldOrder: e, separators: a }) => {
   const o = (r) => r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  return e.map((r, t) => {
-    const s = r === "year" ? "\\d{4}" : "\\d{2}";
-    return `${t > 0 ? o(a[t - 1] ?? "") : ""}(${s})`;
+  return e.map((r, s) => {
+    const t = r === "year" ? "\\d{4}" : "\\d{2}";
+    return `${s > 0 ? o(a[s - 1] ?? "") : ""}(${t})`;
   }).join("");
 };
 export {
   d as CALENDAR_POPOVER_OFFSET,
-  f as CALENDAR_POPOVER_PADDING,
-  D as buildDateRegexSource,
-  h as buildDisabledMatchers,
-  c as getLocaleDateParts
+  c as CALENDAR_POPOVER_PADDING,
+  b as buildDateRegexSource,
+  D as buildDisabledMatchers,
+  n as getLocaleDateParts,
+  h as resolveRangeSelection
 };

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

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

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

@@ -1,8 +1,10 @@
 import { default as React } from 'react';
 import { DateRange, DayPickerProps, Locale, Matcher, OnSelectHandler } from 'react-day-picker';
-import { BreakpointSupport } from '../../../helpers';
+import { Breakpoint, BreakpointSupport } from '../../../helpers';
+import { ModalContentProps } from '../../overlays/modal/modal-content/modal-content';
 import { MultiValueFieldProps } from '../multi-value-field/multi-value-field';
 import { TextFieldForwardRef, TextFieldProps } from '../textfield/textfield';
+export type DateFieldModal = boolean | Exclude<Breakpoint, 'xs'>;
 export type DateFieldMode = 'single' | 'multiple' | 'range';
 export type CalendarView = 'days' | 'months' | 'years';
 export type DateFieldCalendarTrigger = 'input' | 'button';
@@ -30,9 +32,9 @@ type DateFieldBreakpointProps = {
      */
     useNativePicker?: boolean;
     /**
-     * Number of months shown side-by-side. On mobile (`< md`) values > 1 are
-     * automatically clamped to 1 — the popover would otherwise be unscrollable
-     * on a phone viewport.
+     * Number of months shown side-by-side. In the **popover** on mobile (`< md`) values > 1 are
+     * clamped to 1 — a multi-month popover gets unscrollable on a phone viewport. In a **modal** the
+     * count is kept: the months wrap to a vertical stack and the modal body scrolls.
      */
     numberOfMonths?: number;
 };
@@ -128,6 +130,13 @@ export interface DateFieldProps extends BreakpointSupport<DateFieldBreakpointPro
      * @default dropdown
      */
     monthYearSelectType?: 'dropdown' | 'grid';
+    /**
+     * Show or hide the calendar header's previous/next navigation. When hidden, the month/year header
+     * also becomes a static, non-interactive label (no dropdown / grid jumping) — so the calendar is
+     * locked to the visible month(s): a clean "pick from these" view for a fixed month or range.
+     * @default true
+     */
+    showNavigation?: boolean;
     /**
      * **Selection granularity** — controls the level at which a click finalises
      * the date selection rather than drilling further into days. Use a coarser
@@ -145,6 +154,16 @@ export interface DateFieldProps extends BreakpointSupport<DateFieldBreakpointPro
      * @default 'days'
      */
     selectionLevel?: CalendarView;
+    /**
+     * **Initial grid** the calendar opens on, independent of `selectionLevel`.
+     * Use it to start the user on the year / month grid for fast year-first
+     * navigation while still letting them drill down and commit at the
+     * `selectionLevel` (e.g. `initialView="years"` with the default
+     * `selectionLevel="days"` opens the year grid → month grid → day grid).
+     * Pair with `monthYearSelectType="grid"` so the navigation stays grid-based.
+     * @default selectionLevel
+     */
+    initialView?: CalendarView;
     /**
      * The locale object for the calendar, used by React DayPicker. Defaults to Estonian locale.
      */
@@ -211,6 +230,34 @@ export interface DateFieldProps extends BreakpointSupport<DateFieldBreakpointPro
      * Props to pass down to the underlying TextField (in 'single' mode) or MultiValueField (in 'multiple' mode). This allows for additional customization of the input field, such as adding custom styles, attributes, or event handlers.
      */
     inputProps?: DateTextFieldProps | DateMultiValueFieldProps;
+    /**
+     * Open the calendar inside a modal instead of a floating popover. Useful
+     * on narrow viewports where a popover overlaps the input itself. Mirrors
+     * `TimeField`'s `modal` prop.
+     *
+     * - `true` always opens in a modal
+     * - `false` (default) always uses the popover
+     * - A breakpoint name (e.g. `'md'`) opens in a modal *below* that breakpoint
+     *   and falls back to the popover from that breakpoint up
+     *
+     * Ignored when `useNativePicker` resolves to `true` (the native picker is
+     * already handled by the OS).
+     * @default false
+     */
+    modal?: DateFieldModal;
+    /**
+     * Extra props forwarded to the calendar modal's `Modal.Content` — e.g. `size`, `width`, `maxWidth`,
+     * `position`, `fullscreen`, and per-breakpoint overrides. Lets the consumer tune the modal beyond
+     * its responsive-width defaults. `className` is merged with the component's own (so the internal
+     * layout is preserved). Only applies when the calendar opens as a modal.
+     */
+    modalProps?: Omit<ModalContentProps, 'children'>;
+    /**
+     * Heading shown at the top of the calendar modal. Falls back to the `date-field.modal-title`
+     * label. Handy for month/year-only pickers (e.g. `"Vali kuu"` / `"Vali aasta"`). Only applies when
+     * the calendar opens as a modal.
+     */
+    modalTitle?: string;
     /**
      * Error message rendered below the input when the user types a date that
      * matches one of the disable matchers (`disablePast`, `disableFuture`,