@tedi-design-system/react 19.0.0-rc.12 → 19.0.0-rc.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.0.0-rc.12",
+  "version": "19.0.0-rc.14",
   "description": "TEDI Design System React component library — accessible, reusable UI components. Docs & live examples: https://storybook.tedi.ee/react/rc/",
   "type": "module",
   "sideEffects": false,

package/src/tedi/components/content/list/list-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),c=require("../../../../../external/classnames/index.cjs.js"),u=require("./list.module.scss.cjs.js"),o=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),m=require("../../layout/vertical-spacing/vertical-spacing-item.cjs.js"),a=t=>{const{getCurrentBreakpointProps:n}=o.useBreakpointProps(t.defaultServerBreakpoint),{children:i,verticalSpacingItem:e,className:l}=n(t),r=c.default(u.default["tedi-list__item"],e==null?void 0:e.className,l);return t.verticalSpacingItem?s.jsx(m.VerticalSpacingItem,{...e,element:"li",className:r,children:i}):s.jsx("li",{className:r,children:i})};exports.ListItem=a;exports.default=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),o=require("../../../../../external/classnames/index.cjs.js"),m=require("./list.module.scss.cjs.js"),d=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),p=require("../../layout/vertical-spacing/vertical-spacing-item.cjs.js"),a=r=>{const{getCurrentBreakpointProps:u}=d.useBreakpointProps(r.defaultServerBreakpoint),{children:s,verticalSpacingItem:e,className:c,...t}=u(r),i=o.default(m.default["tedi-list__item"],e==null?void 0:e.className,c),n=typeof t.value=="number"?{counterIncrement:"none",counterSet:`item ${t.value}`}:void 0;return r.verticalSpacingItem?l.jsx(p.VerticalSpacingItem,{...e,...t,element:"li",className:i,style:n,children:s}):l.jsx("li",{className:i,...t,style:n,children:s})};exports.ListItem=a;exports.default=a;

package/src/tedi/components/content/list/list-item.d.ts

@@ -7,7 +7,7 @@ type ListItemBreakpointProps = {
      */
     verticalSpacingItem?: Omit<VerticalSpacingItemProps, 'element' | 'children'>;
 };
-export interface ListItemProps extends BreakpointSupport<ListItemBreakpointProps> {
+export interface ListItemProps extends BreakpointSupport<ListItemBreakpointProps>, Omit<React.LiHTMLAttributes<HTMLLIElement>, 'style' | 'children'> {
     /**
      * List children should be ListItem components
      */

package/src/tedi/components/content/list/list-item.es.js

@@ -1,11 +1,11 @@
-import { jsx as m } from "react/jsx-runtime";
-import o from "../../../../../external/classnames/index.es.js";
-import l from "./list.module.scss.es.js";
-import { useBreakpointProps as n } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { VerticalSpacingItem as c } from "../../layout/vertical-spacing/vertical-spacing-item.es.js";
-const B = (e) => {
-  const { getCurrentBreakpointProps: i } = n(e.defaultServerBreakpoint), { children: r, verticalSpacingItem: t, className: a } = i(e), s = o(l["tedi-list__item"], t == null ? void 0 : t.className, a);
-  return e.verticalSpacingItem ? /* @__PURE__ */ m(c, { ...t, element: "li", className: s, children: r }) : /* @__PURE__ */ m("li", { className: s, children: r });
+import { jsx as i } from "react/jsx-runtime";
+import l from "../../../../../external/classnames/index.es.js";
+import c from "./list.module.scss.es.js";
+import { useBreakpointProps as u } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { VerticalSpacingItem as f } from "../../layout/vertical-spacing/vertical-spacing-item.es.js";
+const B = (r) => {
+  const { getCurrentBreakpointProps: n } = u(r.defaultServerBreakpoint), { children: s, verticalSpacingItem: e, className: a, ...t } = n(r), m = l(c["tedi-list__item"], e == null ? void 0 : e.className, a), o = typeof t.value == "number" ? { counterIncrement: "none", counterSet: `item ${t.value}` } : void 0;
+  return r.verticalSpacingItem ? /* @__PURE__ */ i(f, { ...e, ...t, element: "li", className: m, style: o, children: s }) : /* @__PURE__ */ i("li", { className: m, ...t, style: o, children: s });
 };
 export {
   B as ListItem,

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),t=require("./list.module.scss.cjs.js"),p=require("./list-item.cjs.js"),q=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),g=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),o=s=>{const{getCurrentBreakpointProps:u}=q.useBreakpointProps(s.defaultServerBreakpoint),{children:i,element:r="ul",style:a="none",verticalSpacing:e,className:c,color:d="brand"}=u(s),l=f.default(t.default["tedi-list"],t.default[`tedi-list--${r==="ul"?"unordered":"ordered"}`],t.default[`tedi-list--style-${a}`],t.default[`tedi-list--bullet-color-${d}`],e==null?void 0:e.className,c),m=r;return e?n.jsx(g.VerticalSpacing,{...e,element:r,className:l,children:i}):n.jsx(m,{className:l,children:i})};o.Item=p.ListItem;exports.List=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),q=require("react"),s=require("./list.module.scss.cjs.js"),b=require("./list-item.cjs.js"),S=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),g=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),d=n=>{const{getCurrentBreakpointProps:a}=S.useBreakpointProps(n.defaultServerBreakpoint),{children:i,element:t="ul",style:m="none",verticalSpacing:r,className:f,color:p="brand",...e}=a(n),o=t==="ol"&&e.reversed===!0,l=v.default(s.default["tedi-list"],s.default[`tedi-list--${t==="ul"?"unordered":"ordered"}`],s.default[`tedi-list--style-${m}`],s.default[`tedi-list--bullet-color-${p}`],o&&s.default["tedi-list--reversed"],r==null?void 0:r.className,f),y=t,u=(()=>{if(t==="ol")return o?{counterReset:`item ${(typeof e.start=="number"?e.start:q.Children.count(i))+1}`}:typeof e.start=="number"?{counterReset:`item ${e.start-1}`}:void 0})();return r?c.jsx(g.VerticalSpacing,{...r,...e,element:t,className:l,style:u,children:i}):c.jsx(y,{className:l,...e,style:u,children:i})};d.Item=b.ListItem;exports.List=d;

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

@@ -16,7 +16,7 @@ type ListBreakpointProps = {
      */
     style?: 'styled' | 'none';
 };
-export interface ListProps extends BreakpointSupport<ListBreakpointProps> {
+export interface ListProps extends BreakpointSupport<ListBreakpointProps>, Omit<React.OlHTMLAttributes<HTMLOListElement>, 'style' | 'children'> {
     /**
      * List children should be ListItem components
      */

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

@@ -1,28 +1,34 @@
-import { jsx as i } from "react/jsx-runtime";
-import p from "../../../../../external/classnames/index.es.js";
-import e from "./list.module.scss.es.js";
-import { ListItem as u } from "./list-item.es.js";
-import { useBreakpointProps as f } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { VerticalSpacing as N } from "../../layout/vertical-spacing/vertical-spacing.es.js";
-const B = (s) => {
-  const { getCurrentBreakpointProps: m } = f(s.defaultServerBreakpoint), {
+import { jsx as d } from "react/jsx-runtime";
+import y from "../../../../../external/classnames/index.es.js";
+import { Children as v } from "react";
+import s from "./list.module.scss.es.js";
+import { ListItem as N } from "./list-item.es.js";
+import { useBreakpointProps as $ } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { VerticalSpacing as b } from "../../layout/vertical-spacing/vertical-spacing.es.js";
+const B = (i) => {
+  const { getCurrentBreakpointProps: a } = $(i.defaultServerBreakpoint), {
     children: o,
-    element: r = "ul",
-    style: n = "none",
-    verticalSpacing: t,
-    className: a,
-    color: c = "brand"
-  } = m(s), l = p(
-    e["tedi-list"],
-    e[`tedi-list--${r === "ul" ? "unordered" : "ordered"}`],
-    e[`tedi-list--style-${n}`],
-    e[`tedi-list--bullet-color-${c}`],
-    t == null ? void 0 : t.className,
-    a
-  ), d = r;
-  return t ? /* @__PURE__ */ i(N, { ...t, element: r, className: l, children: o }) : /* @__PURE__ */ i(d, { className: l, children: o });
+    element: t = "ul",
+    style: c = "none",
+    verticalSpacing: r,
+    className: u,
+    color: f = "brand",
+    ...e
+  } = a(i), l = t === "ol" && e.reversed === !0, n = y(
+    s["tedi-list"],
+    s[`tedi-list--${t === "ul" ? "unordered" : "ordered"}`],
+    s[`tedi-list--style-${c}`],
+    s[`tedi-list--bullet-color-${f}`],
+    l && s["tedi-list--reversed"],
+    r == null ? void 0 : r.className,
+    u
+  ), p = t, m = (() => {
+    if (t === "ol")
+      return l ? { counterReset: `item ${(typeof e.start == "number" ? e.start : v.count(o)) + 1}` } : typeof e.start == "number" ? { counterReset: `item ${e.start - 1}` } : void 0;
+  })();
+  return r ? /* @__PURE__ */ d(b, { ...r, ...e, element: t, className: n, style: m, children: o }) : /* @__PURE__ */ d(p, { className: n, ...e, style: m, children: o });
 };
-B.Item = u;
+B.Item = N;
 export {
   B as List
 };

package/src/tedi/components/content/list/list.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-list":"tedi-list-71701cf9","tedi-list__item":"tedi-list__item-2a714ed1","tedi-list--unordered":"tedi-list--unordered-60115136","tedi-list--bullet-color-primary":"tedi-list--bullet-color-primary-afabfe71","tedi-list--bullet-color-secondary":"tedi-list--bullet-color-secondary-25f0c3e3","tedi-list--bullet-color-tertiary":"tedi-list--bullet-color-tertiary-fbd2b53f","tedi-list--bullet-color-brand":"tedi-list--bullet-color-brand-de9348a6","tedi-list--bullet-color-brand-dark":"tedi-list--bullet-color-brand-dark-948cec45","tedi-list--bullet-color-success":"tedi-list--bullet-color-success-1c3189cf","tedi-list--bullet-color-warning":"tedi-list--bullet-color-warning-0ec8b981","tedi-list--bullet-color-warning-dark":"tedi-list--bullet-color-warning-dark-ecaf5ef7","tedi-list--bullet-color-danger":"tedi-list--bullet-color-danger-4457905e","tedi-list--bullet-color-white":"tedi-list--bullet-color-white-a25c101f","tedi-list--ordered":"tedi-list--ordered-cd38b627","tedi-list--style-none":"tedi-list--style-none-14fa69aa"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-list":"tedi-list-71701cf9","tedi-list__item":"tedi-list__item-2a714ed1","tedi-list--unordered":"tedi-list--unordered-60115136","tedi-list--bullet-color-primary":"tedi-list--bullet-color-primary-afabfe71","tedi-list--bullet-color-secondary":"tedi-list--bullet-color-secondary-25f0c3e3","tedi-list--bullet-color-tertiary":"tedi-list--bullet-color-tertiary-fbd2b53f","tedi-list--bullet-color-brand":"tedi-list--bullet-color-brand-de9348a6","tedi-list--bullet-color-brand-dark":"tedi-list--bullet-color-brand-dark-948cec45","tedi-list--bullet-color-success":"tedi-list--bullet-color-success-1c3189cf","tedi-list--bullet-color-warning":"tedi-list--bullet-color-warning-0ec8b981","tedi-list--bullet-color-warning-dark":"tedi-list--bullet-color-warning-dark-ecaf5ef7","tedi-list--bullet-color-danger":"tedi-list--bullet-color-danger-4457905e","tedi-list--bullet-color-white":"tedi-list--bullet-color-white-a25c101f","tedi-list--ordered":"tedi-list--ordered-cd38b627","tedi-list--reversed":"tedi-list--reversed-a403096a","tedi-list--style-none":"tedi-list--style-none-14fa69aa"};exports.default=e;

package/src/tedi/components/content/list/list.module.scss.es.js

@@ -1,4 +1,4 @@
-const l = {
+const t = {
   "tedi-list": "tedi-list-71701cf9",
   "tedi-list__item": "tedi-list__item-2a714ed1",
   "tedi-list--unordered": "tedi-list--unordered-60115136",
@@ -13,8 +13,9 @@ const l = {
   "tedi-list--bullet-color-danger": "tedi-list--bullet-color-danger-4457905e",
   "tedi-list--bullet-color-white": "tedi-list--bullet-color-white-a25c101f",
   "tedi-list--ordered": "tedi-list--ordered-cd38b627",
+  "tedi-list--reversed": "tedi-list--reversed-a403096a",
   "tedi-list--style-none": "tedi-list--style-none-14fa69aa"
 };
 export {
-  l as default
+  t as default
 };

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

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

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

@@ -38,6 +38,12 @@ type DateFieldBreakpointProps = {
      * count is kept: the months wrap to a vertical stack and the modal body scrolls.
      */
     numberOfMonths?: number;
+    /**
+     * Whether the field shows a clear button to reset the value. Disable it
+     * when the field is required or the value should not be cleared.
+     * @default true
+     */
+    clearable?: boolean;
 };
 export interface DateFieldProps extends BreakpointSupport<DateFieldBreakpointProps>, Omit<DayPickerProps, 'mode' | 'selected' | 'onSelect' | 'numberOfMonths'> {
     /**