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

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-filter":"tedi-filter-e3f2f618","tedi-filter__button":"tedi-filter__button-b7abc5ed","tedi-filter__text":"tedi-filter__text-2c4eaab6","tedi-filter__icon":"tedi-filter__icon-1b8e93f2","tedi-filter__prepend":"tedi-filter__prepend-68dc0007","tedi-filter__append":"tedi-filter__append-bdb27679","tedi-filter__prepend--hidden":"tedi-filter__prepend--hidden-5039af1e","tedi-filter__count":"tedi-filter__count-d72acead","tedi-filter--primary":"tedi-filter--primary-837108e8","tedi-filter--selected":"tedi-filter--selected-7273f310","tedi-filter--secondary":"tedi-filter--secondary-8aaf488e","tedi-filter--large":"tedi-filter--large-f7f46174","tedi-filter-group":"tedi-filter-group-9d16304d","tedi-filter-dropdown__custom-content":"tedi-filter-dropdown__custom-content-6e851b26","tedi-filter-dropdown__search":"tedi-filter-dropdown__search-dbb4e1a3","tedi-filter-dropdown__clear":"tedi-filter-dropdown__clear-fa4e6a11"};exports.default=e;

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

@@ -0,0 +1,21 @@
+const e = {
+  "tedi-filter": "tedi-filter-e3f2f618",
+  "tedi-filter__button": "tedi-filter__button-b7abc5ed",
+  "tedi-filter__text": "tedi-filter__text-2c4eaab6",
+  "tedi-filter__icon": "tedi-filter__icon-1b8e93f2",
+  "tedi-filter__prepend": "tedi-filter__prepend-68dc0007",
+  "tedi-filter__append": "tedi-filter__append-bdb27679",
+  "tedi-filter__prepend--hidden": "tedi-filter__prepend--hidden-5039af1e",
+  "tedi-filter__count": "tedi-filter__count-d72acead",
+  "tedi-filter--primary": "tedi-filter--primary-837108e8",
+  "tedi-filter--selected": "tedi-filter--selected-7273f310",
+  "tedi-filter--secondary": "tedi-filter--secondary-8aaf488e",
+  "tedi-filter--large": "tedi-filter--large-f7f46174",
+  "tedi-filter-group": "tedi-filter-group-9d16304d",
+  "tedi-filter-dropdown__custom-content": "tedi-filter-dropdown__custom-content-6e851b26",
+  "tedi-filter-dropdown__search": "tedi-filter-dropdown__search-dbb4e1a3",
+  "tedi-filter-dropdown__clear": "tedi-filter-dropdown__clear-fa4e6a11"
+};
+export {
+  e as default
+};

package/src/tedi/components/filter/filter/index.d.ts

@@ -0,0 +1,3 @@
+export * from './filter';
+export * from './filter-group';
+export * from './filter-group-context';

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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,82 @@
+import { DateRange, Matcher } from 'react-day-picker';
+/**
+ * Floating-ui offset (in px) between the trigger input and the popover.
+ * Shared by `DateField` and `DateTimeField` so the popovers sit at the
+ * same distance from their triggers.
+ */
+export declare const CALENDAR_POPOVER_OFFSET = 4;
+/**
+ * Floating-ui shift / size middleware padding (in px) — keeps the popover
+ * away from the viewport edges by this amount when the size middleware
+ * caps its `maxWidth`.
+ */
+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
+ * `DateTimeField` (single Date or `{from, to}` range). For arrays the
+ * earliest date wins; for ranges the `from` (or `to` if `from` is unset)
+ * wins. Falls back to the explicit `fallback` and finally `new Date()`.
+ */
+export declare const getInitialMonth: (val: SelectedValueLike, fallback?: Date) => Date;
+/**
+ * Configuration for the `buildDisabledMatchers` helper. All fields are
+ * forwarded as-is to react-day-picker. `shouldDisableMonth` /
+ * `shouldDisableYear` are predicates passed to `DayPicker.disabled` to
+ * disable a date when its month / year is "off limits".
+ */
+export interface DisabledMatcherInputs {
+    disabled?: Matcher | Matcher[];
+    minDate?: Date;
+    maxDate?: Date;
+    disablePast?: boolean;
+    disableFuture?: boolean;
+    shouldDisableMonth?: (date: Date) => boolean;
+    shouldDisableYear?: (date: Date) => boolean;
+}
+/**
+ * Composes a flat `Matcher[]` array from the date-field-style constraint
+ * props. Returns an empty array when nothing is set, which lets the
+ * caller pass `matchers.length ? matchers : undefined` straight through.
+ */
+export declare const buildDisabledMatchers: (inputs: DisabledMatcherInputs) => Matcher[];
+/**
+ * Field order + literal separators extracted from a locale's date format,
+ * derived via `Intl.DateTimeFormat.formatToParts`. Used by parsers in
+ * `DateField` (date-only) and `DateTimeField` (date + " HH:mm") to build
+ * a regex that round-trips the displayed value in any locale.
+ */
+export interface LocaleDateParts {
+    fieldOrder: ('day' | 'month' | 'year')[];
+    separators: string[];
+}
+/**
+ * Extract the date-portion field order and literal separators from a
+ * `dateFormatter`. The reference date `Dec 31, 2099` is used because all
+ * three components are unambiguously two-digit (day, month) / four-digit
+ * (year) values, so each `formatToParts` entry is unambiguous.
+ */
+export declare const getLocaleDateParts: (dateFormatter: Intl.DateTimeFormat) => LocaleDateParts;
+/**
+ * Build the date-portion of a parsing regex from the locale's field
+ * order and separators. Caller appends time / range separators as needed
+ * — DateField uses `^${datePart}$`, DateTimeField uses `^${datePart}\s+(\d{2}):(\d{2})$`.
+ */
+export declare const buildDateRegexSource: ({ fieldOrder, separators }: LocaleDateParts) => string;

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

@@ -0,0 +1,29 @@
+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;
+    return ((r = e.shouldDisableMonth) == null ? void 0 : r.call(e, o)) ?? !1;
+  }), e.shouldDisableYear && a.push((o) => {
+    var r;
+    return ((r = e.shouldDisableYear) == null ? void 0 : r.call(e, o)) ?? !1;
+  }), 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, s) => {
+    const t = r === "year" ? "\\d{4}" : "\\d{2}";
+    return `${s > 0 ? o(a[s - 1] ?? "") : ""}(${t})`;
+  }).join("");
+};
+export {
+  d as CALENDAR_POPOVER_OFFSET,
+  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 m=require("react/jsx-runtime"),D=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),X=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),He=require("../../content/calendar/calendar.cjs.js"),Je=require("../multi-value-field/multi-value-field.cjs.js"),Ke=require("../textfield/textfield.cjs.js"),x=require("./date-field.module.scss.cjs.js"),Qe=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),Xe=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),R=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),Ze=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),ue=require("../../../helpers/hooks/use-breakpoint.cjs.js"),et=require("../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.cjs.js"),tt=4,ce=8,de=a.forwardRef((P,F)=>{const{getCurrentBreakpointProps:fe}=Ze.useBreakpointProps(P.defaultServerBreakpoint),{useNativePicker:pe=!1,enableCalendar:c=!0,calendarTrigger:T="button",numberOfMonths:E}=fe(P),{id:Z,mode:d="single",label:ee,selected:C,onSelect:r,disabled:N,placeholder:me,className:he,formatDate:u,required:I,showOutsideDays:ge=!0,parseDate:ye,monthYearSelectType:be,selectionLevel:v="days",locale:De=Qe.et,localeCode:V="et-EE",initialMonth:$,closeOnSelect:xe,footer:_e,defaultValue:q,minDate:S,maxDate:U,disablePast:te,disableFuture:ie,shouldDisableMonth:W,shouldDisableYear:Y,readOnly:L,availableDays:Me,inputProps:h,useNativePicker:it,enableCalendar:at,calendarTrigger:rt,numberOfMonths:nt,defaultServerBreakpoint:st,sm:ot,md:lt,lg:ut,xl:ct,xxl:dt,...ke}=P,f=pe&&d==="single",Fe=ue.useBreakpoint(P.defaultServerBreakpoint),Ce=ue.isBreakpointBelow(Fe,"md")&&typeof E=="number"&&E>1?1:E,[Ne,y]=a.useState(C??q),[p,_]=a.useState(!1),[we,ae]=a.useState(v),[Ae,M]=a.useState(""),s=C!==void 0,o=s?C:Ne,re=a.useRef(null),Pe=a.useCallback(e=>{re.current=e,typeof F=="function"?F(e):F&&(F.current=e)},[F]),ve=e=>{if(!e)return"";const i=e.getFullYear(),t=String(e.getMonth()+1).padStart(2,"0"),n=String(e.getDate()).padStart(2,"0");return`${i}-${t}-${n}`},qe=f&&o instanceof Date?ve(o):"",z=a.useCallback((e,i)=>e instanceof Date?e:Array.isArray(e)&&e.length>0?[...e].sort((t,n)=>t.getTime()-n.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:i??new Date,[]),[je,G]=a.useState(()=>z(o,$));a.useEffect(()=>{p||G(z(o,$))},[o,$,p,z]),a.useEffect(()=>{p&&ae(v)},[p,v]),a.useEffect(()=>{s&&y(C)},[C,s]);const b=a.useMemo(()=>new Intl.DateTimeFormat(V,{day:"2-digit",month:"2-digit",year:"numeric"}),[V]),k=a.useCallback(e=>{if(!e)return"";if(e instanceof Date)return b.format(e);if(Array.isArray(e))return e.map(i=>b.format(i)).join(", ");if(e.from){const i=b.format(e.from);return e.to?`${i} – ${b.format(e.to)}`:i}return""},[b]),H=xe??d==="single",ne=d==="multiple"&&Array.isArray(o)?o.map((e,i)=>({id:i,label:u?u(e):k(e),date:e})):[],J=a.useMemo(()=>{const e=[];return N&&(Array.isArray(N)?e.push(...N):e.push(N)),S&&e.push({before:S}),U&&e.push({after:U}),te&&e.push({before:new Date}),ie&&e.push({after:new Date}),W&&e.push(i=>W(i)),Y&&e.push(i=>Y(i)),e},[N,S,U,te,ie,W,Y]),se=a.useCallback(e=>et.dateMatchModifiers(e,J),[J]),Be=(e,i,t,n)=>{if(s||y(e),r==null||r(e,i,t,n),e){const g=u?u(e):k(e);M(g)}else M("");H&&_(!1)},Oe=e=>{if(se(e))return;s||y(e),r==null||r(e,e,{},{});const i=u?u(e):k(e);M(i),H&&_(!1)},Re=a.useMemo(()=>{const e=new Date(2099,11,31),i=b.formatToParts(e),t=[],n=[];for(const l of i)l.type==="day"||l.type==="month"||l.type==="year"?t.push(l.type):l.type==="literal"&&t.length>0&&n.length<2&&n.push(l.value);const g=l=>l.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),Ye=t.map((l,w)=>{const B=l==="year"?"\\d{4}":"\\d{2}";return`${w>0?g(n[w-1]??""):""}(${B})`}).join(""),Le=new RegExp(`^${Ye}$`);return l=>{const w=l.match(Le);if(!w)return;const B={};t.forEach((ze,Ge)=>{B[ze]=Number(w[Ge+1])});const{day:O,month:K,year:Q}=B;if(O===void 0||K===void 0||Q===void 0)return;const A=new Date(Q,K-1,O);if(!(isNaN(A.getTime())||A.getFullYear()!==Q||A.getMonth()!==K-1||A.getDate()!==O))return A}},[b]),Te=e=>{M(e);const t=(ye??(d==="single"?Re:()=>{}))(e);(d==="single"&&t instanceof Date||d==="multiple"&&Array.isArray(t)||d==="range"&&t&&!Array.isArray(t)&&"from"in t)&&(t instanceof Date&&se(t)||(s||y(t),r==null||r(t,t,{},{}),t instanceof Date&&G(t),H&&_(!1)))};a.useEffect(()=>{if(s){const e=u?u(o):k(o);M(e)}},[o,s,u,k]),a.useEffect(()=>{if(!s&&q){const e=u?u(q):k(q);M(e)}},[]);const Ee=D.useFloating({open:p,onOpenChange:_,placement:T==="input"?"bottom-start":"bottom-end",middleware:[R.offset(tt),R.flip(),R.shift({padding:ce}),R.size({padding:ce,apply({availableWidth:e,elements:i}){const t=i.floating;t.style.width="max-content",t.style.maxWidth="",t.getBoundingClientRect().width>e?(t.style.width="min-content",t.style.maxWidth=`${e}px`):(t.style.width="",t.style.maxWidth="")}})],whileElementsMounted:Xe.autoUpdate}),{refs:oe,context:j,x:Ie,y:Ve,strategy:$e}=Ee,Se=D.useClick(j),le=D.useInteractions([...c&&!f&&T==="input"?[Se]:[],D.useDismiss(j),D.useRole(j,{role:"dialog"})]),Ue=()=>{var i;const e=(i=re.current)==null?void 0:i.input;if(e){if(typeof e.showPicker=="function")try{e.showPicker();return}catch{}e.focus()}},We=e=>{if(!e){s||y(void 0),r==null||r(void 0,void 0,{},{});return}const[i,t,n]=e.split("-").map(Number);if(!i||!t||!n)return;const g=new Date(i,t-1,n);Number.isNaN(g.getTime())||(s||y(g),r==null||r(g,g,{},{}))};return m.jsxs(m.Fragment,{children:[m.jsx("div",{className:X.default(x.default["tedi-date-field__container"],he),...le.getReferenceProps(),ref:oe.setReference,children:d==="multiple"?m.jsx(Je.MultiValueField,{...h,id:Z,label:ee,values:ne.map(e=>e.label),icon:"calendar_today",onIconClick:()=>c&&_(e=>!e),iconButtonProps:c?{"aria-expanded":p,"aria-haspopup":"dialog"}:void 0,isClearable:!0,required:I,onChange:e=>{if(!Array.isArray(o))return;const i=ne.filter(t=>e.includes(t.label)).map(t=>t.date);s||y(i),r==null||r(i,{},{},{})},className:X.default(x.default["tedi-date-field__textfield"],{[x.default["tedi-date-field__icon--disabled"]]:!c||L})}):m.jsx(Ke.TextField,{...h,ref:Pe,id:Z,label:ee,readOnly:L,value:f?qe:Ae,placeholder:me,icon:"calendar_today",isClearable:!0,onIconClick:()=>{c&&(f?Ue():_(e=>!e))},iconButtonProps:c&&!f?{"aria-expanded":p,"aria-haspopup":"dialog"}:void 0,onChange:e=>f?We(e):Te(e),required:I,className:X.default(x.default["tedi-date-field__textfield"],{[x.default["tedi-date-field__textfield--disabled"]]:h==null?void 0:h.disabled,[x.default["tedi-date-field__icon--disabled"]]:!c||L}),input:{...h==null?void 0:h.input,...f&&{type:"date"},...c&&!f&&T==="input"?{"aria-haspopup":"dialog","aria-expanded":p}:{}}})}),c&&!f&&m.jsx(D.FloatingPortal,{children:p&&m.jsx(D.FloatingFocusManager,{context:j,modal:!1,initialFocus:-1,children:m.jsx("div",{ref:oe.setFloating,...le.getFloatingProps({style:{position:$e,top:Ve??0,left:Ie??0}}),children:m.jsx(He.Calendar,{...ke,numberOfMonths:Ce,view:we,selectionLevel:v,currentMonth:je,setCurrentMonth:G,setView:ae,mode:d,value:o,locale:De,localeCode:V,showOutsideDays:ge,disabledMatchers:J,required:I,availableDays:Me,footer:_e,monthYearSelectType:be,handleSelect:Be,applyValue:Oe,className:x.default["tedi-date-field__calendar"]})})})})]})});de.displayName="DateField";exports.DateField=de;
+"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;
 };
@@ -70,8 +72,22 @@ export interface DateFieldProps extends BreakpointSupport<DateFieldBreakpointPro
     onSelect?: OnSelectHandler<Date | Date[] | DateRange | undefined>;
     /**
      * Disable specific dates. Accepts the same matchers as React DayPicker's `disabled` prop.
+     *
+     * @deprecated Use `disabledMatchers` instead — same shape, semantics, and merging
+     * behaviour. The current overload re-uses the form-control `disabled` name for a
+     * matcher prop, which is inconsistent with `DateTimeField`'s boolean `disabled`
+     * and confusing for consumers migrating between the two siblings. `disabledMatchers`
+     * stays additive for now; this overload will be replaced by `disabled?: boolean`
+     * in a future major.
      */
     disabled?: Matcher | Matcher[];
+    /**
+     * Disable specific dates via react-day-picker matchers. Mirrors the
+     * `disabledMatchers` prop on `DateTimeField` so the API is consistent across
+     * the date-field family. Merges with the (deprecated) `disabled` overload —
+     * if both are supplied, the union of both matcher sets is applied.
+     */
+    disabledMatchers?: Matcher | Matcher[];
     /**
      * Input placeholder text when no date is selected.
      */
@@ -114,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
@@ -131,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.
      */
@@ -197,6 +230,42 @@ 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`,
+     * `minDate`, `maxDate`, `disabledMatchers`, or the deprecated `disabled`
+     * overload). Falls back to the localised `dateField.disabledDateError`
+     * label.
+     */
+    disabledDateErrorMessage?: string;
 }
 export declare const DateField: React.ForwardRefExoticComponent<DateFieldProps & React.RefAttributes<TextFieldForwardRef>>;
 export {};