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

package/src/tedi/components/content/text-group/text-group.d.ts

@@ -51,7 +51,7 @@ export declare const TextGroup: {
     displayName: string;
 } & {
     List: {
-        (props: import('./text-group-list/text-group-list').TextGroupListProps): JSX.Element;
+        (props: import('.').TextGroupListProps): JSX.Element;
         displayName: string;
     };
 };

package/src/tedi/components/content/truncate/truncate.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),l=require("react"),b=require("../../base/typography/text/text.cjs.js"),h=require("../../buttons/button/button.cjs.js"),q=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),v=require("../../../providers/label-provider/use-labels.cjs.js"),d=n=>{const{getCurrentBreakpointProps:p}=q.useBreakpointProps(n.defaultServerBreakpoint),{children:t,className:x,maxLength:r=200,ellipsis:c="...",expandable:T=!0,button:e}=p(n),{getLabel:u}=v.useLabels(),[s,k]=l.useState(!0),m=l.useMemo(()=>t.slice(0,r).trimEnd()+c+" ",[t,r,c]);return i.jsxs(b.Text,{element:"span",color:"secondary",className:x,children:[t.length>=r&&s?m:t,t.length>=r&&T&&i.jsx(h.Button,{style:{display:s?void 0:"block"},visualType:"link","aria-expanded":!s,...e,onClick:a=>{var o;(o=e==null?void 0:e.onClick)==null||o.call(e,a,s),k(g=>!g)},children:u(s?"truncate.see-more":"truncate.see-less")})]})};exports.Truncate=d;exports.default=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),l=require("react"),g=require("../../base/typography/text/text.cjs.js"),b=require("../../buttons/button/button.cjs.js"),h=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),q=require("../../../providers/label-provider/use-labels.cjs.js"),y=n=>{const{getCurrentBreakpointProps:d}=h.useBreakpointProps(n.defaultServerBreakpoint),{children:t,className:p,maxLength:r=200,ellipsis:c="...",expandable:x=!0,button:e}=d(n),{getLabel:o}=q.useLabels(),[s,T]=l.useState(!0),k=l.useMemo(()=>t.slice(0,r).trimEnd()+c+" ",[t,r,c]);return u.jsxs(g.Text,{element:"span",color:"secondary",className:p,children:[t.length>=r&&s?k:t,t.length>=r&&x&&u.jsx(b.Button,{style:{display:s?void 0:"block"},visualType:"link","aria-expanded":!s,...e,onClick:a=>{var i;(i=e==null?void 0:e.onClick)==null||i.call(e,a,s),T(m=>!m)},children:o(s?"truncate.see-more":"truncate.see-less")})]})};exports.Truncate=y;

package/src/tedi/components/content/truncate/truncate.es.js

@@ -1,37 +1,36 @@
-import { jsxs as f, jsx as T } from "react/jsx-runtime";
+import { jsxs as T, jsx as f } from "react/jsx-runtime";
 import { useState as k, useMemo as h } from "react";
 import { Text as g } from "../../base/typography/text/text.es.js";
 import { Button as y } from "../../buttons/button/button.es.js";
 import { useBreakpointProps as B } from "../../../helpers/hooks/use-breakpoint-props.es.js";
 import { useLabels as v } from "../../../providers/label-provider/use-labels.es.js";
 const E = (n) => {
-  const { getCurrentBreakpointProps: c } = B(n.defaultServerBreakpoint), {
+  const { getCurrentBreakpointProps: l } = B(n.defaultServerBreakpoint), {
     children: t,
     className: m,
     maxLength: s = 200,
     ellipsis: o = "...",
     expandable: d = !0,
     button: e
-  } = c(n), { getLabel: a } = v(), [r, p] = k(!0), u = h(() => t.slice(0, s).trimEnd() + o + " ", [t, s, o]);
-  return /* @__PURE__ */ f(g, { element: "span", color: "secondary", className: m, children: [
+  } = l(n), { getLabel: i } = v(), [r, p] = k(!0), u = h(() => t.slice(0, s).trimEnd() + o + " ", [t, s, o]);
+  return /* @__PURE__ */ T(g, { element: "span", color: "secondary", className: m, children: [
     t.length >= s && r ? u : t,
-    t.length >= s && d && /* @__PURE__ */ T(
+    t.length >= s && d && /* @__PURE__ */ f(
       y,
       {
         style: { display: r ? void 0 : "block" },
         visualType: "link",
         "aria-expanded": !r,
         ...e,
-        onClick: (i) => {
-          var l;
-          (l = e == null ? void 0 : e.onClick) == null || l.call(e, i, r), p((x) => !x);
+        onClick: (a) => {
+          var c;
+          (c = e == null ? void 0 : e.onClick) == null || c.call(e, a, r), p((x) => !x);
         },
-        children: a(r ? "truncate.see-more" : "truncate.see-less")
+        children: i(r ? "truncate.see-more" : "truncate.see-less")
       }
     )
   ] });
 };
 export {
-  E as Truncate,
-  E as default
+  E as Truncate
 };

package/src/tedi/components/filter/filter/filter.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),oe=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),ce=require("../../base/icon/icon.cjs.js"),E=require("../../buttons/button/button.cjs.js"),de=require("../../form/checkbox/checkbox.cjs.js"),We=require("../../form/search/search.cjs.js"),d=require("../../overlays/dropdown/dropdown.cjs.js"),Ze=require("../../tags/status-badge/status-badge.cjs.js"),n=require("./filter.module.scss.cjs.js"),He=require("./filter-group-context.cjs.js"),Je=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Ke=require("../../../providers/label-provider/use-labels.cjs.js"),ue=v=>v==="large"?24:18,Qe=v=>{const b=l.useId();return v??`tedi-filter-${b.replace(/[^a-zA-Z0-9-]/g,"")}`},W=l.forwardRef((v,b)=>{const{getCurrentBreakpointProps:fe}=Je.useBreakpointProps(v.defaultServerBreakpoint),{text:g,value:_,disabled:he=!1,className:pe,id:Z,selected:k,defaultSelected:H=!1,onSelectedChange:C,selectedValue:j,defaultSelectedValue:me,onSelectedValueChange:u,multiselect:J=!1,selectedValues:f,defaultSelectedValues:be,onSelectedValuesChange:a,options:S=[],searchable:xe=!1,showSelectAll:ve=!1,selectAllLabel:ge,showClear:K=!1,clearLabel:je,preserveLabel:Q=!1,children:U,onClear:B,prepend:y,hidePrependWhenSelected:Se=!0,append:I,placement:we="bottom-start",variant:_e="primary",size:D="default",searchLabel:V}=fe(v),{getLabel:X}=Ke.useLabels(),ke=ge??X("filter.select-all"),Y=je??X("filter.clear-selection"),i=l.useContext(He.FilterGroupContext),L=Qe(Z),Ce=l.useRef(null),P=S.length>0,F=!!U,x=P||F,h=P&&!J,p=P&&J,N=!!(i!=null&&i.isManaged)&&_!==void 0&&!x,O=N&&!(i!=null&&i.multiselect),ee=he||((i==null?void 0:i.disabled)??!1),[Le,Fe]=l.useState(H),[Ne,te]=l.useState(me??""),[Be,T]=l.useState(be??[]);F&&(H||C)&&k===void 0&&console.warn("[Filter] `defaultSelected` and `onSelectedChange` are not honoured in custom-content mode (when `children` is provided). Drive the selected state yourself via the controlled `selected` prop, e.g. `selected={Boolean(value)}`.");const M=k!==void 0?k:Le,m=j!==void 0?j:Ne,r=f!==void 0?f:Be,w=l.useMemo(()=>N?i.isSelected(_):p?r.length>0:h?m!=="":M,[N,_,i,p,r,h,m,M]),q=l.useMemo(()=>{var e;return!h||!m?null:((e=S.find(s=>s.value===m))==null?void 0:e.label)??null},[h,m,S]),Me=l.useMemo(()=>h?q&&Q?`${g}: ${q}`:q??g:g,[h,q,Q,g]),[$,le]=l.useState(!1),[z,se]=l.useState("");l.useEffect(()=>{$||se("")},[$]);const R=l.useMemo(()=>{const e=z.trim().toLowerCase();return e?S.filter(s=>s.label.toLowerCase().includes(e)):S},[z,S]),o=l.useMemo(()=>R.filter(e=>!e.disabled),[R]),A=l.useMemo(()=>o.length===0?!1:o.every(e=>r.includes(e.value)),[o,r]),qe=l.useMemo(()=>{if(o.length===0)return!1;const e=o.filter(s=>r.includes(s.value)).length;return e>0&&e<o.length},[o,r]),ye=l.useCallback(e=>{Ce.current=e,typeof b=="function"?b(e):b&&(b.current=e)},[b]),Ie=l.useCallback(()=>{if(N){i.selectFilter(_);return}const e=!M;k===void 0&&Fe(e),C==null||C(e)},[N,i,_,M,k,C]),De=l.useCallback(e=>{const s=m===e?"":e;j===void 0&&te(s),u==null||u(s)},[m,j,u]),Pe=l.useCallback(e=>{const s=r.includes(e)?r.filter(c=>c!==e):[...r,e];f===void 0&&T(s),a==null||a(s)},[r,f,a]),Oe=l.useCallback(()=>{let e;if(A){const s=new Set(o.map(c=>c.value));e=r.filter(c=>!s.has(c))}else{const s=new Set(r);o.forEach(c=>s.add(c.value)),e=[...s]}f===void 0&&T(e),a==null||a(e)},[A,o,r,f,a]),re=l.useCallback(()=>{F?B==null||B():p?(f===void 0&&T([]),a==null||a([])):h&&(j===void 0&&te(""),u==null||u("")),le(!1)},[F,B,p,f,a,h,j,u]),Te=w&&Se,$e=O?"radio":void 0,ze=O?w:void 0,Re=!x&&!O?w:void 0,Ae=t.jsxs(t.Fragment,{children:[!x&&w&&t.jsx(ce.Icon,{className:n.default["tedi-filter__icon"],name:"check",size:ue(D),color:"inherit"}),y!=null&&t.jsx("span",{className:oe.default(n.default["tedi-filter__prepend"],{[n.default["tedi-filter__prepend--hidden"]]:Te}),children:y}),t.jsx("span",{className:n.default["tedi-filter__text"],children:Me}),I!=null&&t.jsx("span",{className:n.default["tedi-filter__append"],children:I}),p&&w&&r.length>0&&t.jsx(Ze.StatusBadge,{className:n.default["tedi-filter__count"],color:ee?"neutral":"brand",children:String(r.length)}),x&&t.jsx(ce.Icon,{className:n.default["tedi-filter__icon"],name:"arrow_drop_down",filled:!0,size:ue(D),color:"inherit"})]}),ne=oe.default(n.default["tedi-filter"],n.default[`tedi-filter--${_e}`],D==="large"&&n.default["tedi-filter--large"],w&&n.default["tedi-filter--selected"],pe),ie=t.jsx(E.Button,{ref:ye,id:Z,type:"button",disabled:ee,className:n.default["tedi-filter__button"],onClick:x?void 0:Ie,role:x?void 0:$e,"aria-checked":ze,"aria-pressed":Re,noStyle:!0,children:Ae});if(!x)return t.jsx("div",{className:ne,children:ie});const G=p&&ve?0:null,Ge=G!==null?1:0,Ee=()=>R.map((e,s)=>{const c=p?r.includes(e.value):m===e.value,ae=s+Ge;return p?t.jsx(d.Dropdown.Item,{index:ae,asChild:!0,disabled:e.disabled,closeOnSelect:!1,children:t.jsx(de.Checkbox,{id:`${L}-option-${s}`,label:e.label,value:e.value,checked:c,disabled:e.disabled,onChange:()=>Pe(e.value),name:`${L}-options`})},e.value):t.jsx(d.Dropdown.Item,{index:ae,disabled:e.disabled,active:c,onClick:()=>De(e.value),children:e.label},e.value)});return t.jsx("div",{className:ne,children:t.jsxs(d.Dropdown,{open:$,onOpenChange:le,placement:we,width:"auto",children:[t.jsx(d.Dropdown.Trigger,{children:ie}),t.jsx(d.Dropdown.Content,{children:F?t.jsxs(t.Fragment,{children:[t.jsx("div",{className:n.default["tedi-filter-dropdown__custom-content"],children:U}),K&&t.jsxs(t.Fragment,{children:[t.jsx(d.Dropdown.Separator,{}),t.jsx("div",{className:n.default["tedi-filter-dropdown__clear"],children:t.jsx(E.Button,{visualType:"neutral",size:"small",type:"button",iconLeft:"refresh",onClick:re,children:Y})})]})]}):t.jsxs(t.Fragment,{children:[xe&&t.jsxs(t.Fragment,{children:[t.jsx("div",{className:n.default["tedi-filter-dropdown__search"],children:t.jsx(We.Search,{id:`${L}-search`,label:V??g,hideLabel:!0,ariaLabel:V??g,value:z,onChange:se})}),t.jsx(d.Dropdown.Separator,{})]}),G!==null&&t.jsxs(t.Fragment,{children:[t.jsx(d.Dropdown.Item,{index:G,asChild:!0,closeOnSelect:!1,children:t.jsx(de.Checkbox,{id:`${L}-select-all`,label:ke,value:"select-all",checked:A,indeterminate:qe,onChange:Oe,name:`${L}-select-all`})}),t.jsx(d.Dropdown.Separator,{})]}),Ee(),K&&t.jsxs(t.Fragment,{children:[t.jsx(d.Dropdown.Separator,{}),t.jsx("div",{className:n.default["tedi-filter-dropdown__clear"],children:t.jsx(E.Button,{visualType:"neutral",size:"small",type:"button",iconLeft:"refresh",onClick:re,children:Y})})]})]})})]})})});W.displayName="Filter";exports.Filter=W;exports.default=W;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),ae=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),oe=require("../../base/icon/icon.cjs.js"),E=require("../../buttons/button/button.cjs.js"),ce=require("../../form/checkbox/checkbox.cjs.js"),We=require("../../form/search/search.cjs.js"),d=require("../../overlays/dropdown/dropdown.cjs.js"),Ze=require("../../tags/status-badge/status-badge.cjs.js"),n=require("./filter.module.scss.cjs.js"),He=require("./filter-group-context.cjs.js"),Je=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Ke=require("../../../providers/label-provider/use-labels.cjs.js"),de=v=>v==="large"?24:18,Qe=v=>{const b=l.useId();return v??`tedi-filter-${b.replace(/[^a-zA-Z0-9-]/g,"")}`},ue=l.forwardRef((v,b)=>{const{getCurrentBreakpointProps:fe}=Je.useBreakpointProps(v.defaultServerBreakpoint),{text:g,value:_,disabled:he=!1,className:pe,id:W,selected:k,defaultSelected:Z=!1,onSelectedChange:C,selectedValue:j,defaultSelectedValue:me,onSelectedValueChange:u,multiselect:H=!1,selectedValues:f,defaultSelectedValues:be,onSelectedValuesChange:a,options:S=[],searchable:xe=!1,showSelectAll:ve=!1,selectAllLabel:ge,showClear:J=!1,clearLabel:je,preserveLabel:K=!1,children:Q,onClear:y,prepend:I,hidePrependWhenSelected:Se=!0,append:M,placement:we="bottom-start",variant:_e="primary",size:D="default",searchLabel:U}=fe(v),{getLabel:V}=Ke.useLabels(),ke=ge??V("filter.select-all"),X=je??V("filter.clear-selection"),i=l.useContext(He.FilterGroupContext),L=Qe(W),Ce=l.useRef(null),P=S.length>0,F=!!Q,x=P||F,h=P&&!H,p=P&&H,N=!!(i!=null&&i.isManaged)&&_!==void 0&&!x,O=N&&!(i!=null&&i.multiselect),Y=he||((i==null?void 0:i.disabled)??!1),[Le,Fe]=l.useState(Z),[Ne,ee]=l.useState(me??""),[ye,T]=l.useState(be??[]);F&&(Z||C)&&k===void 0&&console.warn("[Filter] `defaultSelected` and `onSelectedChange` are not honoured in custom-content mode (when `children` is provided). Drive the selected state yourself via the controlled `selected` prop, e.g. `selected={Boolean(value)}`.");const B=k!==void 0?k:Le,m=j!==void 0?j:Ne,r=f!==void 0?f:ye,w=l.useMemo(()=>N?i.isSelected(_):p?r.length>0:h?m!=="":B,[N,_,i,p,r,h,m,B]),q=l.useMemo(()=>{var e;return!h||!m?null:((e=S.find(s=>s.value===m))==null?void 0:e.label)??null},[h,m,S]),Be=l.useMemo(()=>h?q&&K?`${g}: ${q}`:q??g:g,[h,q,K,g]),[$,te]=l.useState(!1),[z,le]=l.useState("");l.useEffect(()=>{$||le("")},[$]);const R=l.useMemo(()=>{const e=z.trim().toLowerCase();return e?S.filter(s=>s.label.toLowerCase().includes(e)):S},[z,S]),o=l.useMemo(()=>R.filter(e=>!e.disabled),[R]),A=l.useMemo(()=>o.length===0?!1:o.every(e=>r.includes(e.value)),[o,r]),qe=l.useMemo(()=>{if(o.length===0)return!1;const e=o.filter(s=>r.includes(s.value)).length;return e>0&&e<o.length},[o,r]),Ie=l.useCallback(e=>{Ce.current=e,typeof b=="function"?b(e):b&&(b.current=e)},[b]),Me=l.useCallback(()=>{if(N){i.selectFilter(_);return}const e=!B;k===void 0&&Fe(e),C==null||C(e)},[N,i,_,B,k,C]),De=l.useCallback(e=>{const s=m===e?"":e;j===void 0&&ee(s),u==null||u(s)},[m,j,u]),Pe=l.useCallback(e=>{const s=r.includes(e)?r.filter(c=>c!==e):[...r,e];f===void 0&&T(s),a==null||a(s)},[r,f,a]),Oe=l.useCallback(()=>{let e;if(A){const s=new Set(o.map(c=>c.value));e=r.filter(c=>!s.has(c))}else{const s=new Set(r);o.forEach(c=>s.add(c.value)),e=[...s]}f===void 0&&T(e),a==null||a(e)},[A,o,r,f,a]),se=l.useCallback(()=>{F?y==null||y():p?(f===void 0&&T([]),a==null||a([])):h&&(j===void 0&&ee(""),u==null||u("")),te(!1)},[F,y,p,f,a,h,j,u]),Te=w&&Se,$e=O?"radio":void 0,ze=O?w:void 0,Re=!x&&!O?w:void 0,Ae=t.jsxs(t.Fragment,{children:[!x&&w&&t.jsx(oe.Icon,{className:n.default["tedi-filter__icon"],name:"check",size:de(D),color:"inherit"}),I!=null&&t.jsx("span",{className:ae.default(n.default["tedi-filter__prepend"],{[n.default["tedi-filter__prepend--hidden"]]:Te}),children:I}),t.jsx("span",{className:n.default["tedi-filter__text"],children:Be}),M!=null&&t.jsx("span",{className:n.default["tedi-filter__append"],children:M}),p&&w&&r.length>0&&t.jsx(Ze.StatusBadge,{className:n.default["tedi-filter__count"],color:Y?"neutral":"brand",children:String(r.length)}),x&&t.jsx(oe.Icon,{className:n.default["tedi-filter__icon"],name:"arrow_drop_down",filled:!0,size:de(D),color:"inherit"})]}),re=ae.default(n.default["tedi-filter"],n.default[`tedi-filter--${_e}`],D==="large"&&n.default["tedi-filter--large"],w&&n.default["tedi-filter--selected"],pe),ne=t.jsx(E.Button,{ref:Ie,id:W,type:"button",disabled:Y,className:n.default["tedi-filter__button"],onClick:x?void 0:Me,role:x?void 0:$e,"aria-checked":ze,"aria-pressed":Re,noStyle:!0,children:Ae});if(!x)return t.jsx("div",{className:re,children:ne});const G=p&&ve?0:null,Ge=G!==null?1:0,Ee=()=>R.map((e,s)=>{const c=p?r.includes(e.value):m===e.value,ie=s+Ge;return p?t.jsx(d.Dropdown.Item,{index:ie,asChild:!0,disabled:e.disabled,closeOnSelect:!1,children:t.jsx(ce.Checkbox,{id:`${L}-option-${s}`,label:e.label,value:e.value,checked:c,disabled:e.disabled,onChange:()=>Pe(e.value),name:`${L}-options`})},e.value):t.jsx(d.Dropdown.Item,{index:ie,disabled:e.disabled,active:c,onClick:()=>De(e.value),children:e.label},e.value)});return t.jsx("div",{className:re,children:t.jsxs(d.Dropdown,{open:$,onOpenChange:te,placement:we,width:"auto",children:[t.jsx(d.Dropdown.Trigger,{children:ne}),t.jsx(d.Dropdown.Content,{children:F?t.jsxs(t.Fragment,{children:[t.jsx("div",{className:n.default["tedi-filter-dropdown__custom-content"],children:Q}),J&&t.jsxs(t.Fragment,{children:[t.jsx(d.Dropdown.Separator,{}),t.jsx("div",{className:n.default["tedi-filter-dropdown__clear"],children:t.jsx(E.Button,{visualType:"neutral",size:"small",type:"button",iconLeft:"refresh",onClick:se,children:X})})]})]}):t.jsxs(t.Fragment,{children:[xe&&t.jsxs(t.Fragment,{children:[t.jsx("div",{className:n.default["tedi-filter-dropdown__search"],children:t.jsx(We.Search,{id:`${L}-search`,label:U??g,hideLabel:!0,ariaLabel:U??g,value:z,onChange:le})}),t.jsx(d.Dropdown.Separator,{})]}),G!==null&&t.jsxs(t.Fragment,{children:[t.jsx(d.Dropdown.Item,{index:G,asChild:!0,closeOnSelect:!1,children:t.jsx(ce.Checkbox,{id:`${L}-select-all`,label:ke,value:"select-all",checked:A,indeterminate:qe,onChange:Oe,name:`${L}-select-all`})}),t.jsx(d.Dropdown.Separator,{})]}),Ee(),J&&t.jsxs(t.Fragment,{children:[t.jsx(d.Dropdown.Separator,{}),t.jsx("div",{className:n.default["tedi-filter-dropdown__clear"],children:t.jsx(E.Button,{visualType:"neutral",size:"small",type:"button",iconLeft:"refresh",onClick:se,children:X})})]})]})})]})})});ue.displayName="Filter";exports.Filter=ue;

package/src/tedi/components/filter/filter/filter.es.js

@@ -231,6 +231,5 @@ const he = (_) => _ === "large" ? 24 : 18, rt = (_) => {
 });
 it.displayName = "Filter";
 export {
-  it as Filter,
-  it as default
+  it as Filter
 };

package/src/tedi/components/form/choice-group/choice-group.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),_=require("../../../../../external/classnames/index.cjs.js"),h=require("react"),Z=require("../feedback-text/feedback-text.cjs.js"),ee=require("../form-label/form-label.cjs.js"),te=require("../checkbox/checkbox.cjs.js"),j=require("./choice-group.module.scss.cjs.js"),re=require("./choice-group-context.cjs.js"),N=require("./components/choice-group-item/choice-group-item.cjs.js"),ne=require("../../../providers/label-provider/use-labels.cjs.js"),B=require("../../../helpers/hooks/use-breakpoint.cjs.js"),oe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),F=require("../../layout/grid/row.cjs.js"),ie=require("../../layout/grid/col.cjs.js"),v=f=>{const{getLabel:m}=ne.useLabels(),I=B.useBreakpoint(f.defaultServerBreakpoint),{getCurrentBreakpointProps:R}=oe.useBreakpointProps(f.defaultServerBreakpoint),{id:d,className:T,label:p,required:H,helper:u,items:n,variant:k="default",direction:C=k==="default"||B.isBreakpointBelow(I,"md")?"column":"row",rowProps:b,name:S,inputType:i="radio",value:G,defaultValue:w,onChange:a,hideLabel:P,indeterminateCheck:s,indeterminateCheckProps:x={},color:E,layout:y="separated",showIndicator:$,...O}=R(f),{...W}=x,X=(x==null?void 0:x.indented)??!0,L=(u==null?void 0:u.id)??`${d}-helper`,M=s&&i==="checkbox",[Y,A]=h.useState(()=>{if(w)return w;if(i==="radio"){const e=n.find(l=>l.defaultChecked);return e?e.value:null}return i==="checkbox"?n.filter(e=>e.defaultChecked).map(e=>e.value):null}),q=(e=f.value)=>!!a&&typeof e<"u",r=q(G)?G:Y,g=h.useMemo(()=>(r==null?void 0:r.length)===0,[r==null?void 0:r.length]),c=h.useMemo(()=>{var e;return(r==null?void 0:r.length)===((e=n==null?void 0:n.filter(l=>!l.disabled))==null?void 0:e.length)},[r==null?void 0:r.length,n]),z=h.useMemo(()=>!g&&!c,[c,g]),D=h.useMemo(()=>{const e=c?"all":g?"none":"some";return typeof s=="string"?s:typeof s=="function"?s(e):s?m(e==="all"?"table.filter.remove-all":"table.filter.select-all"):""},[m,s,c,g]),J={name:S,inputType:i,onChange:(e,l)=>{let t=r;i==="checkbox"&&t?t=l?Array.isArray(t)?[...t,e]:[e]:Array.isArray(t)?t.filter(V=>V!==e):t:t=e,q()||A(Array.isArray(t)?[...t]:t),a==null||a(t)},currentValue:r},K=_.default(j.default["tedi-choice-group"],T),Q=_.default(j.default["tedi-choice-group__inner"],b==null?void 0:b.className,{[j.default["tedi-choice-group__inner--indented"]]:M&&X}),U=()=>{var l;const e=c?[]:(l=n==null?void 0:n.filter(t=>!t.disabled))==null?void 0:l.map(t=>t.value);q()||A([...e]),a==null||a(e)};return o.jsx(re.ChoiceGroupContext.Provider,{value:J,children:o.jsxs("fieldset",{...O,className:K,id:d,name:S,"aria-describedby":L,children:[p&&typeof p=="string"?o.jsx(ee.FormLabel,{id:d,label:p,required:H,hideLabel:P,renderWithoutLabel:!0}):o.jsx("label",{htmlFor:d,children:p}),o.jsx(F.Row,{children:o.jsx(ie.Col,{children:n!=null&&n.length?o.jsxs(o.Fragment,{children:[M&&o.jsx(te.Checkbox,{id:`${d}-indeterminate`,value:"indeterminate",name:"indeterminate",...W,label:D,indeterminate:z,checked:c,onChange:U}),o.jsx(F.Row,{direction:C,gutterX:y==="segmented"?0:2,gutterY:y==="segmented"?0:1,gap:k==="default"&&(B.isBreakpointBelow(I,"md")||C==="row")?1:0,...b,className:Q,role:i==="radio"?"radiogroup":void 0,"aria-labelledby":i==="radio"?d:void 0,children:n.map(e=>o.jsx(N.ChoiceGroupItem,{...e,color:E,variant:k,type:i,layout:y,showIndicator:$,direction:C},e.id))})]}):o.jsx("p",{children:m("table.filter.no-options")})})}),u&&o.jsx(Z.FeedbackText,{...u,id:L})]})})};v.Item=N.ChoiceGroupItem;exports.ChoiceGroup=v;exports.default=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),_=require("../../../../../external/classnames/index.cjs.js"),h=require("react"),Z=require("../feedback-text/feedback-text.cjs.js"),ee=require("../form-label/form-label.cjs.js"),te=require("../checkbox/checkbox.cjs.js"),j=require("./choice-group.module.scss.cjs.js"),re=require("./choice-group-context.cjs.js"),N=require("./components/choice-group-item/choice-group-item.cjs.js"),ne=require("../../../providers/label-provider/use-labels.cjs.js"),v=require("../../../helpers/hooks/use-breakpoint.cjs.js"),oe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),F=require("../../layout/grid/row.cjs.js"),ie=require("../../layout/grid/col.cjs.js"),B=f=>{const{getLabel:m}=ne.useLabels(),I=v.default(f.defaultServerBreakpoint),{getCurrentBreakpointProps:R}=oe.useBreakpointProps(f.defaultServerBreakpoint),{id:d,className:T,label:p,required:H,helper:u,items:n,variant:k="default",direction:C=k==="default"||v.isBreakpointBelow(I,"md")?"column":"row",rowProps:b,name:S,inputType:i="radio",value:G,defaultValue:w,onChange:a,hideLabel:P,indeterminateCheck:s,indeterminateCheckProps:x={},color:E,layout:y="separated",showIndicator:$,...O}=R(f),{...W}=x,X=(x==null?void 0:x.indented)??!0,L=(u==null?void 0:u.id)??`${d}-helper`,M=s&&i==="checkbox",[Y,A]=h.useState(()=>{if(w)return w;if(i==="radio"){const e=n.find(l=>l.defaultChecked);return e?e.value:null}return i==="checkbox"?n.filter(e=>e.defaultChecked).map(e=>e.value):null}),q=(e=f.value)=>!!a&&typeof e<"u",r=q(G)?G:Y,g=h.useMemo(()=>(r==null?void 0:r.length)===0,[r==null?void 0:r.length]),c=h.useMemo(()=>{var e;return(r==null?void 0:r.length)===((e=n==null?void 0:n.filter(l=>!l.disabled))==null?void 0:e.length)},[r==null?void 0:r.length,n]),z=h.useMemo(()=>!g&&!c,[c,g]),D=h.useMemo(()=>{const e=c?"all":g?"none":"some";return typeof s=="string"?s:typeof s=="function"?s(e):s?m(e==="all"?"table.filter.remove-all":"table.filter.select-all"):""},[m,s,c,g]),J={name:S,inputType:i,onChange:(e,l)=>{let t=r;i==="checkbox"&&t?t=l?Array.isArray(t)?[...t,e]:[e]:Array.isArray(t)?t.filter(V=>V!==e):t:t=e,q()||A(Array.isArray(t)?[...t]:t),a==null||a(t)},currentValue:r},K=_.default(j.default["tedi-choice-group"],T),Q=_.default(j.default["tedi-choice-group__inner"],b==null?void 0:b.className,{[j.default["tedi-choice-group__inner--indented"]]:M&&X}),U=()=>{var l;const e=c?[]:(l=n==null?void 0:n.filter(t=>!t.disabled))==null?void 0:l.map(t=>t.value);q()||A([...e]),a==null||a(e)};return o.jsx(re.ChoiceGroupContext.Provider,{value:J,children:o.jsxs("fieldset",{...O,className:K,id:d,name:S,"aria-describedby":L,children:[p&&typeof p=="string"?o.jsx(ee.FormLabel,{id:d,label:p,required:H,hideLabel:P,renderWithoutLabel:!0}):o.jsx("label",{htmlFor:d,children:p}),o.jsx(F.Row,{children:o.jsx(ie.Col,{children:n!=null&&n.length?o.jsxs(o.Fragment,{children:[M&&o.jsx(te.Checkbox,{id:`${d}-indeterminate`,value:"indeterminate",name:"indeterminate",...W,label:D,indeterminate:z,checked:c,onChange:U}),o.jsx(F.Row,{direction:C,gutterX:y==="segmented"?0:2,gutterY:y==="segmented"?0:1,gap:k==="default"&&(v.isBreakpointBelow(I,"md")||C==="row")?1:0,...b,className:Q,role:i==="radio"?"radiogroup":void 0,"aria-labelledby":i==="radio"?d:void 0,children:n.map(e=>o.jsx(N.ChoiceGroupItem,{...e,color:E,variant:k,type:i,layout:y,showIndicator:$,direction:C},e.id))})]}):o.jsx("p",{children:m("table.filter.no-options")})})}),u&&o.jsx(Z.FeedbackText,{...u,id:L})]})})};B.Item=N.ChoiceGroupItem;exports.ChoiceGroup=B;exports.default=B;

package/src/tedi/components/form/choice-group/choice-group.es.js

@@ -8,7 +8,7 @@ import I from "./choice-group.module.scss.es.js";
 import { ChoiceGroupContext as ne } from "./choice-group-context.es.js";
 import { ChoiceGroupItem as j } from "./components/choice-group-item/choice-group-item.es.js";
 import { useLabels as ie } from "../../../providers/label-provider/use-labels.es.js";
-import { useBreakpoint as ae, isBreakpointBelow as G } from "../../../helpers/hooks/use-breakpoint.es.js";
+import ae, { isBreakpointBelow as G } from "../../../helpers/hooks/use-breakpoint.es.js";
 import { useBreakpointProps as le } from "../../../helpers/hooks/use-breakpoint-props.es.js";
 import { Row as H } from "../../layout/grid/row.es.js";
 import { Col as de } from "../../layout/grid/col.es.js";

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("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),Ze=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),B=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),et=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),tt=require("../../../providers/label-provider/use-labels.cjs.js"),ce=require("../../../helpers/hooks/use-breakpoint.cjs.js"),rt=require("../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.cjs.js"),fe=a.forwardRef((v,C)=>{const{getCurrentBreakpointProps:me}=et.useBreakpointProps(v.defaultServerBreakpoint),{getLabel:pe}=tt.useLabels(),{useNativePicker:he=!1,enableCalendar:c=!0,calendarTrigger:j="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=Xe.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:ke=pe("dateField.disabledDateError"),useNativePicker:at,enableCalendar:it,calendarTrigger:st,numberOfMonths:nt,defaultServerBreakpoint:ot,sm:lt,md:ut,lg:dt,xl:ct,xxl:ft,...Ce}=v,f=he&&p==="single",Ne=ce.useBreakpoint(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 C=="function"?C(e):C&&(C.current=e)},[C]),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]),Be=(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)},je=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:k,month:X,year:Z}=Q;if(k===void 0||X===void 0||Z===void 0)return;const E=new Date(Z,X-1,k);if(!(isNaN(E.getTime())||E.getFullYear()!==Z||E.getMonth()!==X-1||E.getDate()!==k))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(k=>k instanceof Date&&F(k))||!!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:j==="input"?"bottom-start":"bottom-end",middleware:[B.offset(O.CALENDAR_POPOVER_OFFSET),B.flip(),B.shift({padding:O.CALENDAR_POPOVER_PADDING}),B.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:Ze.autoUpdate}),{refs:ue,context:V,x:Le,y:$e,strategy:Ue}=Se,We=D.useClick(V),de=D.useInteractions([...c&&!f&&j==="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:ke,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&&j==="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,{...Ce,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:Be,applyValue:je,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`,