@tedi-design-system/react 18.0.0-rc.1 → 18.0.0-rc.11

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

@@ -0,0 +1,236 @@
+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,
+  it as default
+};

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/date-field/date-field-helpers.cjs.js

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

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

@@ -0,0 +1,66 @@
+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;
+/**
+ * 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,28 @@
+const d = 4, f = 8, h = (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;
+}, 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 }) => {
+  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})`;
+  }).join("");
+};
+export {
+  d as CALENDAR_POPOVER_OFFSET,
+  f as CALENDAR_POPOVER_PADDING,
+  D as buildDateRegexSource,
+  h as buildDisabledMatchers,
+  c as getLocaleDateParts
+};

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 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;

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

@@ -70,8 +70,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.
      */
@@ -197,6 +211,14 @@ 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;
+    /**
+     * 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 {};