@tedi-design-system/react 19.0.0-rc.7 → 19.0.0-rc.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +27 -1
  2. package/bundle-stats.html +1 -1
  3. package/index.css +1 -1
  4. package/package.json +5 -3
  5. package/src/tedi/components/content/calendar/calendar.cjs.js +1 -1
  6. package/src/tedi/components/content/calendar/calendar.d.ts +12 -0
  7. package/src/tedi/components/content/calendar/calendar.es.js +39 -35
  8. package/src/tedi/components/content/calendar/components/calendar-header/calendar-header.cjs.js +1 -1
  9. package/src/tedi/components/content/calendar/components/calendar-header/calendar-header.d.ts +13 -1
  10. package/src/tedi/components/content/calendar/components/calendar-header/calendar-header.es.js +40 -35
  11. package/src/tedi/components/form/date-field/date-field.cjs.js +1 -1
  12. package/src/tedi/components/form/date-field/date-field.d.ts +10 -0
  13. package/src/tedi/components/form/date-field/date-field.es.js +176 -170
  14. package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.cjs.js +1 -1
  15. package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.d.ts +4 -0
  16. package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.es.js +47 -43
  17. package/src/tedi/components/form/date-time-field/date-time-field.cjs.js +1 -1
  18. package/src/tedi/components/form/date-time-field/date-time-field.d.ts +10 -0
  19. package/src/tedi/components/form/date-time-field/date-time-field.es.js +92 -88
  20. package/src/tedi/components/form/file-upload/file-upload.cjs.js +1 -1
  21. package/src/tedi/components/form/file-upload/file-upload.es.js +11 -11
@@ -1,27 +1,27 @@
1
- import { jsxs as Mt, Fragment as At, jsx as D } from "react/jsx-runtime";
2
- import { useFloating as vt, useClick as xt, useInteractions as Ft, useDismiss as wt, useRole as Nt, FloatingPortal as kt, FloatingFocusManager as Pt } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
1
+ import { jsxs as At, Fragment as vt, jsx as D } from "react/jsx-runtime";
2
+ import { useFloating as Ft, useClick as wt, useInteractions as Nt, useDismiss as kt, useRole as Pt, FloatingPortal as Et, FloatingFocusManager as Ot } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
3
3
  import B from "../../../../../external/classnames/index.es.js";
4
4
  import F, { useState as _, useCallback as ue, useEffect as T, useMemo as me } from "react";
5
- import { Calendar as Et } from "../../content/calendar/calendar.es.js";
6
- import { MultiValueField as Ot } from "../multi-value-field/multi-value-field.es.js";
7
- import { TextField as Rt } from "../textfield/textfield.es.js";
5
+ import { Calendar as Rt } from "../../content/calendar/calendar.es.js";
6
+ import { MultiValueField as It } from "../multi-value-field/multi-value-field.es.js";
7
+ import { TextField as Vt } from "../textfield/textfield.es.js";
8
8
  import y from "./date-field.module.scss.es.js";
9
- import { getLocaleDateParts as It, buildDateRegexSource as Vt, resolveRangeSelection as Bt, CALENDAR_POPOVER_OFFSET as Tt, CALENDAR_POPOVER_PADDING as Le } from "./date-field-helpers.es.js";
10
- import { DatePickerModal as $t } from "./date-picker-modal/date-picker-modal.es.js";
11
- import { useBreakpointProps as Lt } from "../../../helpers/hooks/use-breakpoint-props.es.js";
12
- import { useLabels as jt } from "../../../providers/label-provider/use-labels.es.js";
13
- import { et as Ht } from "../../../../../external/react-day-picker/dist/esm/locale/et.es.js";
14
- import Wt, { isBreakpointBelow as je } from "../../../helpers/hooks/use-breakpoint.es.js";
15
- import { autoUpdate as Yt } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
16
- import { offset as St, flip as Ut, shift as qt, size as zt } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
17
- import { dateMatchModifiers as Gt } from "../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.es.js";
18
- const Xt = F.forwardRef((w, N) => {
19
- const { getCurrentBreakpointProps: He } = Lt(w.defaultServerBreakpoint), { getLabel: z } = jt(), {
20
- useNativePicker: We = !1,
9
+ import { getLocaleDateParts as Bt, buildDateRegexSource as Tt, resolveRangeSelection as $t, CALENDAR_POPOVER_OFFSET as Lt, CALENDAR_POPOVER_PADDING as je } from "./date-field-helpers.es.js";
10
+ import { DatePickerModal as Yt } from "./date-picker-modal/date-picker-modal.es.js";
11
+ import { useBreakpointProps as jt } from "../../../helpers/hooks/use-breakpoint-props.es.js";
12
+ import { useLabels as Ht } from "../../../providers/label-provider/use-labels.es.js";
13
+ import { et as Wt } from "../../../../../external/react-day-picker/dist/esm/locale/et.es.js";
14
+ import St, { isBreakpointBelow as He } from "../../../helpers/hooks/use-breakpoint.es.js";
15
+ import { autoUpdate as Ut } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
16
+ import { offset as qt, flip as zt, shift as Gt, size as Xt } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
17
+ import { dateMatchModifiers as Jt } from "../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.es.js";
18
+ const Kt = F.forwardRef((w, N) => {
19
+ const { getCurrentBreakpointProps: We } = jt(w.defaultServerBreakpoint), { getLabel: z } = Ht(), {
20
+ useNativePicker: Se = !1,
21
21
  enableCalendar: m = !0,
22
22
  calendarTrigger: $ = "button",
23
23
  numberOfMonths: G
24
- } = He(w), {
24
+ } = We(w), {
25
25
  id: pe,
26
26
  mode: s = "single",
27
27
  label: he,
@@ -29,73 +29,75 @@ const Xt = F.forwardRef((w, N) => {
29
29
  onSelect: a,
30
30
  disabled: k,
31
31
  disabledMatchers: P,
32
- placeholder: Ye,
33
- className: Se,
32
+ placeholder: Ue,
33
+ className: qe,
34
34
  formatDate: d,
35
- required: j,
35
+ required: Y,
36
36
  showOutsideDays: ge = !0,
37
- parseDate: Ue,
37
+ parseDate: ze,
38
38
  monthYearSelectType: ye,
39
- dayStatus: be,
40
- tagsDirection: qe,
41
- showNavigation: De = !0,
39
+ minYear: be,
40
+ maxYear: De,
41
+ dayStatus: _e,
42
+ tagsDirection: Ge,
43
+ showNavigation: Ce = !0,
42
44
  selectionLevel: E = "days",
43
- initialView: H,
44
- locale: _e = Ht,
45
- localeCode: W = "et-EE",
46
- initialMonth: Y,
47
- closeOnSelect: ze,
48
- footer: Ce,
45
+ initialView: j,
46
+ locale: Me = Wt,
47
+ localeCode: H = "et-EE",
48
+ initialMonth: W,
49
+ closeOnSelect: Xe,
50
+ footer: xe,
49
51
  defaultValue: S,
50
52
  minDate: X,
51
53
  maxDate: J,
52
- disablePast: Me,
53
- disableFuture: Ae,
54
+ disablePast: Ae,
55
+ disableFuture: ve,
54
56
  shouldDisableMonth: K,
55
57
  shouldDisableYear: Q,
56
58
  readOnly: O,
57
- availableDays: ve,
59
+ availableDays: Fe,
58
60
  inputProps: i,
59
61
  modal: Z = !1,
60
- modalProps: Ge,
61
- modalTitle: Xe,
62
- disabledDateErrorMessage: Je = z("dateField.disabledDateError"),
63
- invalidDateErrorMessage: Ke = z("dateField.invalidDateError"),
64
- useNativePicker: Jt,
65
- enableCalendar: Kt,
66
- calendarTrigger: Qt,
67
- numberOfMonths: Zt,
68
- defaultServerBreakpoint: er,
69
- sm: tr,
70
- md: rr,
71
- lg: ar,
72
- xl: ir,
73
- xxl: or,
74
- ...xe
75
- } = w, c = We && s === "single", Fe = Wt(w.defaultServerBreakpoint), v = je(Fe, "md"), [Qe, p] = _(L ?? S), [h, R] = _(!1), [ee, we] = _(!1), [Ze, Ne] = _(H ?? E), [te, b] = _(""), [ke, u] = _(!1), [Pe, re] = _(!1), g = m && !c && !O && (Z === !0 || typeof Z == "string" && je(Fe, Z)), Ee = v && !g && typeof G == "number" && G > 1 ? 1 : G, { current: f } = F.useRef("selected" in w), o = f ? L : Qe, ae = F.useRef(null), Oe = F.useRef(null), et = F.useCallback(
62
+ modalProps: Je,
63
+ modalTitle: Ke,
64
+ disabledDateErrorMessage: Qe = z("dateField.disabledDateError"),
65
+ invalidDateErrorMessage: Ze = z("dateField.invalidDateError"),
66
+ useNativePicker: Qt,
67
+ enableCalendar: Zt,
68
+ calendarTrigger: er,
69
+ numberOfMonths: tr,
70
+ defaultServerBreakpoint: rr,
71
+ sm: ar,
72
+ md: ir,
73
+ lg: or,
74
+ xl: nr,
75
+ xxl: sr,
76
+ ...we
77
+ } = w, c = Se && s === "single", Ne = St(w.defaultServerBreakpoint), A = He(Ne, "md"), [et, p] = _(L ?? S), [h, R] = _(!1), [ee, ke] = _(!1), [tt, Pe] = _(j ?? E), [te, b] = _(""), [Ee, u] = _(!1), [Oe, re] = _(!1), g = m && !c && !O && (Z === !0 || typeof Z == "string" && He(Ne, Z)), Re = A && !g && typeof G == "number" && G > 1 ? 1 : G, { current: f } = F.useRef("selected" in w), o = f ? L : et, ae = F.useRef(null), Ie = F.useRef(null), rt = F.useCallback(
76
78
  (e) => {
77
79
  ae.current = e, typeof N == "function" ? N(e) : N && (N.current = e);
78
80
  },
79
81
  [N]
80
- ), tt = (e) => {
82
+ ), at = (e) => {
81
83
  if (!e) return "";
82
84
  const t = e.getFullYear(), r = String(e.getMonth() + 1).padStart(2, "0"), n = String(e.getDate()).padStart(2, "0");
83
85
  return `${t}-${r}-${n}`;
84
- }, rt = c && o instanceof Date ? tt(o) : "", ie = ue((e, t) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [...e].sort((r, n) => r.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 : t ?? /* @__PURE__ */ new Date(), []), [at, oe] = _(() => ie(o, Y));
86
+ }, it = c && o instanceof Date ? at(o) : "", ie = ue((e, t) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [...e].sort((r, n) => r.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 : t ?? /* @__PURE__ */ new Date(), []), [ot, oe] = _(() => ie(o, W));
85
87
  T(() => {
86
- h || oe(ie(o, Y));
87
- }, [o, Y, h, ie]), T(() => {
88
- h && Ne(H ?? E);
89
- }, [h, E, H]), T(() => {
88
+ h || oe(ie(o, W));
89
+ }, [o, W, h, ie]), T(() => {
90
+ h && Pe(j ?? E);
91
+ }, [h, E, j]), T(() => {
90
92
  f && p(L);
91
93
  }, [L, f]);
92
94
  const C = me(
93
- () => new Intl.DateTimeFormat(W, {
95
+ () => new Intl.DateTimeFormat(H, {
94
96
  day: "2-digit",
95
97
  month: "2-digit",
96
98
  year: "numeric"
97
99
  }),
98
- [W]
100
+ [H]
99
101
  ), M = ue(
100
102
  (e) => {
101
103
  if (!e) return "";
@@ -108,77 +110,77 @@ const Xt = F.forwardRef((w, N) => {
108
110
  return "";
109
111
  },
110
112
  [C]
111
- ), ne = ze ?? s === "single", Re = s === "multiple" && Array.isArray(o) ? o.map((e, t) => ({
113
+ ), ne = Xe ?? s === "single", Ve = s === "multiple" && Array.isArray(o) ? o.map((e, t) => ({
112
114
  id: t,
113
115
  label: d ? d(e) : M(e),
114
116
  date: e
115
117
  })) : [], U = me(() => {
116
118
  const e = [];
117
- return k && (Array.isArray(k) ? e.push(...k) : e.push(k)), P && (Array.isArray(P) ? e.push(...P) : e.push(P)), X && e.push({ before: X }), J && e.push({ after: J }), Me && e.push({ before: /* @__PURE__ */ new Date() }), Ae && e.push({ after: /* @__PURE__ */ new Date() }), K && e.push((t) => K(t)), Q && e.push((t) => Q(t)), e;
119
+ return k && (Array.isArray(k) ? e.push(...k) : e.push(k)), P && (Array.isArray(P) ? e.push(...P) : e.push(P)), X && e.push({ before: X }), J && e.push({ after: J }), Ae && e.push({ before: /* @__PURE__ */ new Date() }), ve && e.push({ after: /* @__PURE__ */ new Date() }), K && e.push((t) => K(t)), Q && e.push((t) => Q(t)), e;
118
120
  }, [
119
121
  k,
120
122
  P,
121
123
  X,
122
124
  J,
123
- Me,
124
125
  Ae,
126
+ ve,
125
127
  K,
126
128
  Q
127
- ]), x = ue(
128
- (e) => Gt(e, U),
129
+ ]), v = ue(
130
+ (e) => Jt(e, U),
129
131
  [U]
130
- ), it = (e, t, r, n) => {
131
- const l = s === "range" ? Bt(e, o, t) : e;
132
+ ), nt = (e, t, r, n) => {
133
+ const l = s === "range" ? $t(e, o, t) : e;
132
134
  if (u(!1), f || p(l), a == null || a(l, t, r, n), l) {
133
- const A = d ? d(l) : M(l);
134
- b(A);
135
+ const x = d ? d(l) : M(l);
136
+ b(x);
135
137
  } else
136
138
  b("");
137
139
  ne && R(!1);
138
- }, ot = (e) => {
139
- if (x(e)) return;
140
+ }, st = (e) => {
141
+ if (v(e)) return;
140
142
  const t = s === "range" ? { from: e, to: void 0 } : s === "multiple" ? [...Array.isArray(o) ? o : [], e] : e;
141
143
  u(!1), f || p(t), a == null || a(t, e, {}, {});
142
144
  const r = d ? d(t) : M(t);
143
145
  b(r), ne && R(!1);
144
- }, nt = me(() => {
145
- const e = It(C), t = new RegExp(`^${Vt(e)}$`), { fieldOrder: r } = e;
146
+ }, lt = me(() => {
147
+ const e = Bt(C), t = new RegExp(`^${Tt(e)}$`), { fieldOrder: r } = e;
146
148
  return (n) => {
147
149
  const l = n.match(t);
148
150
  if (!l) return;
149
- const A = {};
150
- r.forEach((_t, Ct) => {
151
- A[_t] = Number(l[Ct + 1]);
151
+ const x = {};
152
+ r.forEach((Mt, xt) => {
153
+ x[Mt] = Number(l[xt + 1]);
152
154
  });
153
- const { day: fe, month: de, year: ce } = A;
155
+ const { day: fe, month: de, year: ce } = x;
154
156
  if (fe === void 0 || de === void 0 || ce === void 0) return;
155
157
  const V = new Date(ce, de - 1, fe);
156
158
  if (!(isNaN(V.getTime()) || V.getFullYear() !== ce || V.getMonth() !== de - 1 || V.getDate() !== fe))
157
159
  return V;
158
160
  };
159
- }, [C]), Ie = (e) => (Ue ?? (s === "single" ? nt : () => {
160
- }))(e), Ve = (e) => s === "single" && e instanceof Date || s === "multiple" && Array.isArray(e) || s === "range" && !!e && !Array.isArray(e) && "from" in e, st = (e) => {
161
+ }, [C]), Be = (e) => (ze ?? (s === "single" ? lt : () => {
162
+ }))(e), Te = (e) => s === "single" && e instanceof Date || s === "multiple" && Array.isArray(e) || s === "range" && !!e && !Array.isArray(e) && "from" in e, ft = (e) => {
161
163
  if (b(e), re(!1), e.trim() === "") {
162
164
  u(!1), o !== void 0 && (f || p(void 0), a == null || a(void 0, void 0, {}, {}));
163
165
  return;
164
166
  }
165
- const t = Ie(e);
166
- if (!Ve(t)) {
167
+ const t = Be(e);
168
+ if (!Te(t)) {
167
169
  u(!1);
168
170
  return;
169
171
  }
170
172
  const n = t && !Array.isArray(t) && "from" in t ? t : null;
171
- if (t instanceof Date && x(t) || Array.isArray(t) && t.some((A) => A instanceof Date && x(A)) || !!n && (n.from && x(n.from) || n.to && x(n.to))) {
173
+ if (t instanceof Date && v(t) || Array.isArray(t) && t.some((x) => x instanceof Date && v(x)) || !!n && (n.from && v(n.from) || n.to && v(n.to))) {
172
174
  u(!0);
173
175
  return;
174
176
  }
175
177
  u(!1), f || p(t), a == null || a(t, t, {}, {}), t instanceof Date && oe(t), ne && R(!1);
176
- }, lt = () => {
178
+ }, dt = () => {
177
179
  if (te.trim() === "") {
178
180
  re(!1);
179
181
  return;
180
182
  }
181
- re(!Ve(Ie(te)));
183
+ re(!Te(Be(te)));
182
184
  };
183
185
  T(() => {
184
186
  if (f) {
@@ -191,40 +193,40 @@ const Xt = F.forwardRef((w, N) => {
191
193
  b(e);
192
194
  }
193
195
  }, []);
194
- const ft = vt({
196
+ const ct = Ft({
195
197
  open: h,
196
198
  onOpenChange: R,
197
199
  placement: $ === "input" ? "bottom-start" : "bottom-end",
198
200
  middleware: [
199
- St(Tt),
200
- Ut(),
201
- qt({ padding: Le }),
202
- zt({
203
- padding: Le,
201
+ qt(Lt),
202
+ zt(),
203
+ Gt({ padding: je }),
204
+ Xt({
205
+ padding: je,
204
206
  apply({ availableWidth: e, elements: t }) {
205
207
  const r = t.floating;
206
- if (r.style.width = "", r.style.maxWidth = "", r.style.overflowX = "", v) return;
208
+ if (r.style.width = "", r.style.maxWidth = "", r.style.overflowX = "", A) return;
207
209
  r.style.width = "max-content", r.getBoundingClientRect().width > e && (r.style.width = "min-content", r.style.maxWidth = `${e}px`);
208
210
  }
209
211
  })
210
212
  ],
211
- whileElementsMounted: Yt
212
- }), { refs: I, context: q, x: dt, y: ct, strategy: ut } = ft, mt = xt(q), Be = Ft([
213
- ...m && !c && $ === "input" && !g ? [mt] : [],
214
- wt(q, {
213
+ whileElementsMounted: Ut
214
+ }), { refs: I, context: q, x: ut, y: mt, strategy: pt } = ct, ht = wt(q), $e = Nt([
215
+ ...m && !c && $ === "input" && !g ? [ht] : [],
216
+ kt(q, {
215
217
  outsidePress: (e) => {
216
218
  const t = e.target;
217
219
  return !(t != null && t.closest('[role="menu"], [role="listbox"]'));
218
220
  }
219
221
  }),
220
- Nt(q, { role: "dialog" })
222
+ Pt(q, { role: "dialog" })
221
223
  ]);
222
224
  F.useEffect(() => {
223
225
  var t, r;
224
- const e = s === "multiple" ? ((t = Oe.current) == null ? void 0 : t.wrapper) ?? null : ((r = ae.current) == null ? void 0 : r.input) ?? null;
226
+ const e = s === "multiple" ? ((t = Ie.current) == null ? void 0 : t.wrapper) ?? null : ((r = ae.current) == null ? void 0 : r.input) ?? null;
225
227
  I.setPositionReference(e ?? I.reference.current);
226
228
  }, [s, h, I]);
227
- const pt = () => {
229
+ const gt = () => {
228
230
  var t;
229
231
  const e = (t = ae.current) == null ? void 0 : t.input;
230
232
  if (e) {
@@ -237,14 +239,14 @@ const Xt = F.forwardRef((w, N) => {
237
239
  e.focus();
238
240
  }
239
241
  }, se = () => {
240
- !m || O || (c ? pt() : g ? we(!0) : R((e) => !e));
241
- }, ht = (e) => {
242
+ !m || O || (c ? gt() : g ? ke(!0) : R((e) => !e));
243
+ }, yt = (e) => {
242
244
  if (u(!1), f || p(e), a == null || a(e, e, {}, {}), e) {
243
245
  const t = d ? d(e) : M(e);
244
246
  b(t);
245
247
  } else
246
248
  b("");
247
- }, gt = (e) => {
249
+ }, bt = (e) => {
248
250
  if (!e) {
249
251
  u(!1), f || p(void 0), a == null || a(void 0, void 0, {}, {});
250
252
  return;
@@ -253,50 +255,50 @@ const Xt = F.forwardRef((w, N) => {
253
255
  if (!t || !r || !n) return;
254
256
  const l = new Date(t, r - 1, n);
255
257
  if (!Number.isNaN(l.getTime())) {
256
- if (x(l)) {
258
+ if (v(l)) {
257
259
  u(!0);
258
260
  return;
259
261
  }
260
262
  u(!1), f || p(l), a == null || a(l, l, {}, {});
261
263
  }
262
- }, yt = Be.getReferenceProps(
264
+ }, Dt = $e.getReferenceProps(
263
265
  g && $ === "input" ? { onClick: () => se() } : void 0
264
266
  ), {
265
- role: nr,
266
- "aria-expanded": sr,
267
- "aria-haspopup": lr,
268
- "aria-controls": bt,
269
- ...Dt
270
- } = yt, Te = g ? void 0 : bt, le = z("dateField.openCalendar"), $e = {
267
+ role: lr,
268
+ "aria-expanded": fr,
269
+ "aria-haspopup": dr,
270
+ "aria-controls": _t,
271
+ ...Ct
272
+ } = Dt, Le = g ? void 0 : _t, le = z("dateField.openCalendar"), Ye = {
271
273
  "aria-label": le,
272
274
  "aria-expanded": g ? ee : h,
273
275
  "aria-haspopup": "dialog",
274
- "aria-controls": Te
276
+ "aria-controls": Le
275
277
  };
276
- return /* @__PURE__ */ Mt(At, { children: [
278
+ return /* @__PURE__ */ At(vt, { children: [
277
279
  /* @__PURE__ */ D(
278
280
  "div",
279
281
  {
280
- className: B(y["tedi-date-field__container"], Se),
281
- ...Dt,
282
+ className: B(y["tedi-date-field__container"], qe),
283
+ ...Ct,
282
284
  ref: I.setReference,
283
285
  children: s === "multiple" ? /* @__PURE__ */ D(
284
- Ot,
286
+ It,
285
287
  {
286
288
  ...i,
287
- ref: Oe,
289
+ ref: Ie,
288
290
  id: pe,
289
291
  label: he,
290
- tagsDirection: qe,
291
- values: Re.map((e) => e.label),
292
+ tagsDirection: Ge,
293
+ values: Ve.map((e) => e.label),
292
294
  icon: "calendar_today",
293
295
  onIconClick: se,
294
- iconButtonProps: m ? $e : { "aria-label": le },
296
+ iconButtonProps: m ? Ye : { "aria-label": le },
295
297
  isClearable: !0,
296
- required: j,
298
+ required: Y,
297
299
  onChange: (e) => {
298
300
  if (!Array.isArray(o)) return;
299
- const t = Re.filter((r) => e.includes(r.label)).map((r) => r.date);
301
+ const t = Ve.filter((r) => e.includes(r.label)).map((r) => r.date);
300
302
  f || p(t), a == null || a(t, {}, {}, {});
301
303
  },
302
304
  className: B(y["tedi-date-field__textfield"], {
@@ -304,28 +306,28 @@ const Xt = F.forwardRef((w, N) => {
304
306
  })
305
307
  }
306
308
  ) : /* @__PURE__ */ D(
307
- Rt,
309
+ Vt,
308
310
  {
309
311
  ...i,
310
- ref: et,
312
+ ref: rt,
311
313
  id: pe,
312
314
  label: he,
313
315
  readOnly: O,
314
- value: c ? rt : te,
315
- placeholder: Ye,
316
+ value: c ? it : te,
317
+ placeholder: Ue,
316
318
  icon: "calendar_today",
317
319
  isClearable: !0,
318
320
  onIconClick: se,
319
- iconButtonProps: m && !c ? $e : { "aria-label": le },
320
- onChange: (e) => c ? gt(e) : st(e),
321
+ iconButtonProps: m && !c ? Ye : { "aria-label": le },
322
+ onChange: (e) => c ? bt(e) : ft(e),
321
323
  onBlur: (e) => {
322
324
  var t;
323
- c || lt(), (t = i == null ? void 0 : i.onBlur) == null || t.call(i, e);
325
+ c || dt(), (t = i == null ? void 0 : i.onBlur) == null || t.call(i, e);
324
326
  },
325
- required: j,
326
- invalid: ke || Pe || (i == null ? void 0 : i.invalid),
327
+ required: Y,
328
+ invalid: Ee || Oe || (i == null ? void 0 : i.invalid),
327
329
  helper: (() => {
328
- const e = i == null ? void 0 : i.helper, t = ke ? Je : Pe ? Ke : null, r = t ? { text: t, type: "error" } : null;
330
+ const e = i == null ? void 0 : i.helper, t = Ee ? Qe : Oe ? Ze : null, r = t ? { text: t, type: "error" } : null;
329
331
  return r ? e ? Array.isArray(e) ? [...e, r] : [e, r] : r : e;
330
332
  })(),
331
333
  className: B(y["tedi-date-field__textfield"], {
@@ -339,7 +341,7 @@ const Xt = F.forwardRef((w, N) => {
339
341
  role: "combobox",
340
342
  "aria-haspopup": "dialog",
341
343
  "aria-expanded": g ? ee : h,
342
- "aria-controls": Te
344
+ "aria-controls": Le
343
345
  } : {}
344
346
  }
345
347
  }
@@ -347,73 +349,77 @@ const Xt = F.forwardRef((w, N) => {
347
349
  }
348
350
  ),
349
351
  g && /* @__PURE__ */ D(
350
- $t,
352
+ Yt,
351
353
  {
352
354
  open: ee,
353
- onOpenChange: we,
355
+ onOpenChange: ke,
354
356
  value: o,
355
- onConfirm: ht,
357
+ onConfirm: yt,
356
358
  mode: s,
357
- numberOfMonths: Ee,
358
- locale: _e,
359
- localeCode: W,
359
+ numberOfMonths: Re,
360
+ locale: Me,
361
+ localeCode: H,
360
362
  showOutsideDays: ge,
361
363
  disabledMatchers: U,
362
- required: j,
363
- availableDays: ve,
364
- footer: Ce,
364
+ required: Y,
365
+ availableDays: Fe,
366
+ footer: xe,
365
367
  monthYearSelectType: ye,
366
- dayStatus: be,
367
- showNavigation: De,
368
+ minYear: be,
369
+ maxYear: De,
370
+ dayStatus: _e,
371
+ showNavigation: Ce,
368
372
  selectionLevel: E,
369
- initialView: H,
370
- initialMonth: Y,
371
- modalProps: Ge,
372
- ...xe,
373
- title: Xe
373
+ initialView: j,
374
+ initialMonth: W,
375
+ modalProps: Je,
376
+ ...we,
377
+ title: Ke
374
378
  }
375
379
  ),
376
- m && !c && !g && /* @__PURE__ */ D(kt, { children: h && /* @__PURE__ */ D(Pt, { context: q, modal: !1, initialFocus: -1, children: /* @__PURE__ */ D(
380
+ m && !c && !g && /* @__PURE__ */ D(Et, { children: h && /* @__PURE__ */ D(Ot, { context: q, modal: !1, initialFocus: -1, children: /* @__PURE__ */ D(
377
381
  "div",
378
382
  {
379
383
  ref: I.setFloating,
380
384
  className: B({
381
- [y["tedi-date-field__calendar-popover--fullwidth"]]: v
385
+ [y["tedi-date-field__calendar-popover--fullwidth"]]: A
382
386
  }),
383
- ...Be.getFloatingProps({
387
+ ...$e.getFloatingProps({
384
388
  style: {
385
- position: ut,
386
- top: ct ?? 0,
387
- left: v ? 0 : dt ?? 0,
388
- right: v ? 0 : void 0
389
+ position: pt,
390
+ top: mt ?? 0,
391
+ left: A ? 0 : ut ?? 0,
392
+ right: A ? 0 : void 0
389
393
  }
390
394
  }),
391
395
  children: /* @__PURE__ */ D(
392
- Et,
396
+ Rt,
393
397
  {
394
- ...xe,
395
- numberOfMonths: Ee,
396
- view: Ze,
398
+ ...we,
399
+ numberOfMonths: Re,
400
+ view: tt,
397
401
  selectionLevel: E,
398
- currentMonth: at,
402
+ currentMonth: ot,
399
403
  setCurrentMonth: oe,
400
- setView: Ne,
404
+ setView: Pe,
401
405
  mode: s,
402
406
  value: o,
403
- locale: _e,
404
- localeCode: W,
407
+ locale: Me,
408
+ localeCode: H,
405
409
  showOutsideDays: ge,
406
410
  disabledMatchers: U,
407
- required: j,
408
- availableDays: ve,
409
- footer: Ce,
411
+ required: Y,
412
+ availableDays: Fe,
413
+ footer: xe,
410
414
  monthYearSelectType: ye,
411
- dayStatus: be,
412
- showNavigation: De,
413
- handleSelect: it,
414
- applyValue: ot,
415
+ minYear: be,
416
+ maxYear: De,
417
+ dayStatus: _e,
418
+ showNavigation: Ce,
419
+ handleSelect: nt,
420
+ applyValue: st,
415
421
  className: B(y["tedi-date-field__calendar"], {
416
- [y["tedi-date-field__calendar--fullwidth"]]: v
422
+ [y["tedi-date-field__calendar--fullwidth"]]: A
417
423
  })
418
424
  }
419
425
  )
@@ -421,7 +427,7 @@ const Xt = F.forwardRef((w, N) => {
421
427
  ) }) })
422
428
  ] });
423
429
  });
424
- Xt.displayName = "DateField";
430
+ Kt.displayName = "DateField";
425
431
  export {
426
- Xt as DateField
432
+ Kt as DateField
427
433
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),J=require("../../../../../../external/classnames/index.cjs.js"),d=require("react"),Q=require("../../../base/typography/heading/heading.cjs.js"),C=require("../../../buttons/button/button.cjs.js"),U=require("../../../buttons/closing-button/closing-button.cjs.js"),W=require("../../../content/calendar/calendar.cjs.js"),X=require("../date-field-helpers.cjs.js"),u=require("./date-picker-modal.module.scss.cjs.js"),Z=require("../../../../providers/label-provider/use-labels.cjs.js"),c=require("../../../overlays/modal/modal.cjs.js"),$=require("../../../overlays/modal/modal-context.cjs.js"),D=(e,r)=>e instanceof Date?e:Array.isArray(e)&&e.length>0?[...e].sort((o,l)=>o.getTime()-l.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:r??new Date,v=({title:e})=>{const{labelId:r,onOpenChange:o}=$.useModal();return t.jsxs("div",{className:u.default["tedi-date-picker-modal__header"],children:[t.jsx(Q.Heading,{element:"h2",modifiers:"h4",id:r,className:u.default["tedi-date-picker-modal__title"],children:e}),t.jsx(U.ClosingButton,{size:"small",onClick:()=>o(!1)})]})},q=e=>{const{open:r,onOpenChange:o,value:l,onConfirm:S,mode:n="single",numberOfMonths:T,locale:_,localeCode:w,showOutsideDays:N=!0,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,dayStatus:L,showNavigation:P,selectionLevel:f="days",initialView:y,initialMonth:g,modalProps:i,title:R,...V}=e,{getLabel:b}=Z.useLabels(),[a,m]=d.useState(l),[F,M]=d.useState(y??f),[I,j]=d.useState(()=>D(l,g));d.useEffect(()=>{r&&(m(l),M(y??f),j(D(l,g)))},[r,l,f,y,g]);const K=d.useCallback((s,h)=>{m(n==="range"?G=>X.resolveRangeSelection(s,G,h):s)},[n]),z=d.useCallback(s=>{m(h=>n==="range"?{from:s,to:void 0}:n==="multiple"?[...Array.isArray(h)?h:[],s]:s)},[n]),E=n==="multiple"?Array.isArray(a)&&a.length>0:n==="range"?!!a&&typeof a=="object"&&"from"in a&&a.from instanceof Date:a instanceof Date,k=p===!0&&!E,Y=()=>{k||(S(a),o(!1))},x=R??b(n==="range"?"date-field.modal-title-range":n==="multiple"?"date-field.modal-title-multiple":"date-field.modal-title");return t.jsx(c.Modal,{open:r,onToggle:o,children:t.jsxs(c.Modal.Content,{position:"center","aria-label":x,...i,md:{width:"max-content",...i==null?void 0:i.md},sm:{width:"full",...i==null?void 0:i.sm},className:J.default(u.default["tedi-date-picker-modal"],i==null?void 0:i.className),children:[t.jsx(c.Modal.Header,{children:t.jsx(v,{title:x})}),t.jsx(c.Modal.Body,{className:u.default["tedi-date-picker-modal__body"],children:t.jsx(W.Calendar,{...V,numberOfMonths:T,view:F,selectionLevel:f,currentMonth:I,setCurrentMonth:j,setView:M,mode:n,value:a,locale:_,localeCode:w,showOutsideDays:N,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,dayStatus:L,showNavigation:P,handleSelect:K,applyValue:z,className:u.default["tedi-date-picker-modal__calendar"],bordered:!1})}),t.jsxs(c.Modal.Footer,{children:[t.jsx(C.Button,{visualType:"secondary",onClick:()=>o(!1),children:b("date-field.cancel")}),t.jsx(C.Button,{onClick:Y,disabled:k,children:b("date-field.confirm")})]})]})})};q.displayName="DatePickerModal";exports.DatePickerModal=q;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),U=require("../../../../../../external/classnames/index.cjs.js"),d=require("react"),W=require("../../../base/typography/heading/heading.cjs.js"),C=require("../../../buttons/button/button.cjs.js"),X=require("../../../buttons/closing-button/closing-button.cjs.js"),Z=require("../../../content/calendar/calendar.cjs.js"),$=require("../date-field-helpers.cjs.js"),u=require("./date-picker-modal.module.scss.cjs.js"),v=require("../../../../providers/label-provider/use-labels.cjs.js"),c=require("../../../overlays/modal/modal.cjs.js"),ee=require("../../../overlays/modal/modal-context.cjs.js"),D=(e,r)=>e instanceof Date?e:Array.isArray(e)&&e.length>0?[...e].sort((o,l)=>o.getTime()-l.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:r??new Date,te=({title:e})=>{const{labelId:r,onOpenChange:o}=ee.useModal();return t.jsxs("div",{className:u.default["tedi-date-picker-modal__header"],children:[t.jsx(W.Heading,{element:"h2",modifiers:"h4",id:r,className:u.default["tedi-date-picker-modal__title"],children:e}),t.jsx(X.ClosingButton,{size:"small",onClick:()=>o(!1)})]})},q=e=>{const{open:r,onOpenChange:o,value:l,onConfirm:S,mode:n="single",numberOfMonths:T,locale:_,localeCode:w,showOutsideDays:N=!0,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,minYear:L,maxYear:P,dayStatus:R,showNavigation:V,selectionLevel:f="days",initialView:y,initialMonth:g,modalProps:i,title:Y,...F}=e,{getLabel:b}=v.useLabels(),[a,m]=d.useState(l),[I,M]=d.useState(y??f),[K,j]=d.useState(()=>D(l,g));d.useEffect(()=>{r&&(m(l),M(y??f),j(D(l,g)))},[r,l,f,y,g]);const z=d.useCallback((s,h)=>{m(n==="range"?Q=>$.resolveRangeSelection(s,Q,h):s)},[n]),E=d.useCallback(s=>{m(h=>n==="range"?{from:s,to:void 0}:n==="multiple"?[...Array.isArray(h)?h:[],s]:s)},[n]),G=n==="multiple"?Array.isArray(a)&&a.length>0:n==="range"?!!a&&typeof a=="object"&&"from"in a&&a.from instanceof Date:a instanceof Date,x=p===!0&&!G,J=()=>{x||(S(a),o(!1))},k=Y??b(n==="range"?"date-field.modal-title-range":n==="multiple"?"date-field.modal-title-multiple":"date-field.modal-title");return t.jsx(c.Modal,{open:r,onToggle:o,children:t.jsxs(c.Modal.Content,{position:"center","aria-label":k,...i,md:{width:"max-content",...i==null?void 0:i.md},sm:{width:"full",...i==null?void 0:i.sm},className:U.default(u.default["tedi-date-picker-modal"],i==null?void 0:i.className),children:[t.jsx(c.Modal.Header,{children:t.jsx(te,{title:k})}),t.jsx(c.Modal.Body,{className:u.default["tedi-date-picker-modal__body"],children:t.jsx(Z.Calendar,{...F,numberOfMonths:T,view:I,selectionLevel:f,currentMonth:K,setCurrentMonth:j,setView:M,mode:n,value:a,locale:_,localeCode:w,showOutsideDays:N,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,minYear:L,maxYear:P,dayStatus:R,showNavigation:V,handleSelect:z,applyValue:E,className:u.default["tedi-date-picker-modal__calendar"],bordered:!1})}),t.jsxs(c.Modal.Footer,{children:[t.jsx(C.Button,{visualType:"secondary",onClick:()=>o(!1),children:b("date-field.cancel")}),t.jsx(C.Button,{onClick:J,disabled:x,children:b("date-field.confirm")})]})]})})};q.displayName="DatePickerModal";exports.DatePickerModal=q;
@@ -28,6 +28,10 @@ export interface DatePickerModalProps extends Omit<DayPickerProps, 'mode' | 'sel
28
28
  availableDays?: Date[] | ((date: Date) => boolean);
29
29
  footer?: React.ReactNode;
30
30
  monthYearSelectType?: 'dropdown' | 'grid';
31
+ /** Earliest year offered in the calendar header's year dropdown. @default currentYear - 100 */
32
+ minYear?: number;
33
+ /** Latest year offered in the calendar header's year dropdown. @default currentYear + 20 */
34
+ maxYear?: number;
31
35
  /** Per-day status overlay forwarded to `Calendar`. */
32
36
  dayStatus?: DayStatusFn;
33
37
  showNavigation?: boolean;