@dmsi/wedgekit-react 0.0.29 → 0.0.31

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 (43) hide show
  1. package/dist/{chunk-57WRM337.js → chunk-5POWRPIO.js} +3 -2
  2. package/dist/{chunk-S5KPS4IQ.js → chunk-HXEPUO5W.js} +189 -95
  3. package/dist/chunk-KHQX42T7.js +127 -0
  4. package/dist/{chunk-OUSNH76S.js → chunk-PCCJ7L3N.js} +29 -6
  5. package/dist/{chunk-PDDZ5PMY.js → chunk-S46RZBT4.js} +3 -2
  6. package/dist/components/CalendarRange.cjs +28 -5
  7. package/dist/components/CalendarRange.js +1 -1
  8. package/dist/components/DataGrid.cjs +490 -217
  9. package/dist/components/DataGrid.js +303 -122
  10. package/dist/components/DataGridCell.cjs +192 -96
  11. package/dist/components/DataGridCell.js +4 -2
  12. package/dist/components/DateInput.cjs +231 -30
  13. package/dist/components/DateInput.js +101 -27
  14. package/dist/components/DateRangeInput.cjs +550 -37
  15. package/dist/components/DateRangeInput.js +413 -34
  16. package/dist/components/MenuOption.cjs +3 -2
  17. package/dist/components/MenuOption.js +1 -1
  18. package/dist/components/MobileDataGrid.cjs +3 -2
  19. package/dist/components/MobileDataGrid.js +1 -1
  20. package/dist/components/NestedMenu.cjs +3 -2
  21. package/dist/components/NestedMenu.js +1 -1
  22. package/dist/components/Notification.cjs +3 -2
  23. package/dist/components/Notification.js +1 -1
  24. package/dist/components/SideMenuGroup.cjs +3 -2
  25. package/dist/components/SideMenuGroup.js +1 -1
  26. package/dist/components/SideMenuItem.cjs +3 -2
  27. package/dist/components/SideMenuItem.js +1 -1
  28. package/dist/components/Stack.cjs +3 -2
  29. package/dist/components/Stack.js +1 -1
  30. package/dist/components/Swatch.cjs +3 -2
  31. package/dist/components/Swatch.js +1 -1
  32. package/dist/components/Time.cjs +3 -2
  33. package/dist/components/Time.js +1 -1
  34. package/dist/index.css +9 -0
  35. package/package.json +1 -1
  36. package/src/components/CalendarRange.tsx +37 -6
  37. package/src/components/DataGrid.tsx +284 -48
  38. package/src/components/DataGridCell.tsx +122 -35
  39. package/src/components/DateInput.tsx +118 -25
  40. package/src/components/DateRangeInput.tsx +544 -30
  41. package/src/components/MenuOption.tsx +18 -14
  42. package/src/components/Stack.tsx +4 -2
  43. package/src/utils/date.ts +206 -0
@@ -7,7 +7,7 @@ import {
7
7
  // src/components/Stack.tsx
8
8
  import clsx from "clsx";
9
9
  import { jsx } from "react/jsx-runtime";
10
- var useFlexClassNames = ({ items, justify, grow }) => clsx(
10
+ var getFlexClassNames = ({ items, justify, grow }) => clsx(
11
11
  "flex",
12
12
  items === "start" && "items-start",
13
13
  grow && "grow",
@@ -80,7 +80,7 @@ var Stack = (_a) => {
80
80
  "left",
81
81
  "id"
82
82
  ]);
83
- const flexClassNames = useFlexClassNames({ items, justify, grow });
83
+ const flexClassNames = getFlexClassNames({ items, justify, grow });
84
84
  return /* @__PURE__ */ jsx(
85
85
  "div",
86
86
  __spreadProps(__spreadValues({
@@ -102,6 +102,7 @@ var Stack = (_a) => {
102
102
  },
103
103
  className: clsx(
104
104
  "scrollbar-thin",
105
+ "max-w-screen",
105
106
  width !== "fit" && "w-full",
106
107
  width === "full" && "w-full",
107
108
  centered && "mx-auto",
@@ -6,7 +6,7 @@ import {
6
6
  } from "./chunk-Z4UCFUF7.js";
7
7
  import {
8
8
  MenuOption
9
- } from "./chunk-PDDZ5PMY.js";
9
+ } from "./chunk-S46RZBT4.js";
10
10
  import {
11
11
  Search
12
12
  } from "./chunk-SKHSGGO3.js";
@@ -122,7 +122,7 @@ var DataGridCell = memo(
122
122
  lockedHeaderBgStyles,
123
123
  iconComponentStyles,
124
124
  className,
125
- "flex flex-1 items-center gap-1 whitespace-nowrap min-w-full max-h-10 relative text-text-primary-normal",
125
+ "flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-primary-normal",
126
126
  "focus-within:!z-10",
127
127
  component === "input" && "border",
128
128
  component === "input" && !error && !warning && "border-border-primary-normal",
@@ -138,7 +138,7 @@ var DataGridCell = memo(
138
138
  Element,
139
139
  __spreadProps(__spreadValues({
140
140
  id,
141
- className: clsx("flex", !width && "flex-1"),
141
+ className: clsx("flex h-10", !width && "flex-1"),
142
142
  style: { width }
143
143
  }, props), {
144
144
  children: /* @__PURE__ */ jsx(
@@ -161,33 +161,41 @@ var DataGridCell = memo(
161
161
  }
162
162
  );
163
163
  DataGridCell.displayName = "DataGridCell";
164
- function DraggableCellHeader(_a) {
164
+ function DataCellHeader(_a) {
165
165
  var _b = _a, {
166
166
  header,
167
167
  children,
168
- locked = false,
168
+ setNodeRef,
169
+ node,
169
170
  id
170
171
  } = _b, props = __objRest(_b, [
171
172
  "header",
172
173
  "children",
173
- "locked",
174
+ "setNodeRef",
175
+ "node",
174
176
  "id"
175
177
  ]);
176
178
  var _a2;
177
- const { attributes, isDragging, listeners, setNodeRef, transform, node } = useSortable({
178
- id: header.column.id
179
- });
180
179
  const [showMenu, setShowMenu] = useState(false);
181
180
  const [filter, setFilter] = useState(
182
181
  (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
183
182
  );
183
+ const ref = useRef(null);
184
+ const predeterminedPinned = useRef(false);
184
185
  const {
185
186
  menuRootRef,
186
187
  isMenuActive,
187
188
  registerSubMenu,
188
189
  listeners: subMenuListeners,
189
190
  mobileHide
190
- } = useSubMenuSystem(node);
191
+ } = useSubMenuSystem(node ? node : ref);
192
+ useEffect(() => {
193
+ var _a3;
194
+ const columnPinning = (_a3 = header.getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
195
+ const left = (columnPinning == null ? void 0 : columnPinning.left) ? columnPinning.left : [];
196
+ const right = (columnPinning == null ? void 0 : columnPinning.right) ? columnPinning.right : [];
197
+ predeterminedPinned.current = [...left, ...right].includes(header.column.id);
198
+ }, []);
191
199
  useEffect(() => {
192
200
  const handler = setTimeout(() => {
193
201
  header.column.setFilterValue(filter);
@@ -196,107 +204,160 @@ function DraggableCellHeader(_a) {
196
204
  clearTimeout(handler);
197
205
  };
198
206
  }, [filter]);
199
- const style = {
200
- opacity: isDragging ? 0.8 : 1,
207
+ const style = __spreadValues({
201
208
  position: "relative",
202
- transform: CSS.Translate.toString(transform),
203
- transition: "width transform 0.2s ease-in-out",
204
209
  whiteSpace: "nowrap",
205
210
  width: header.column.getSize(),
206
- zIndex: isDragging ? 1 : 0,
207
211
  "--color-text-primary-normal": "var(--color-neutral-000)"
208
- };
212
+ }, props.style);
209
213
  return /* @__PURE__ */ jsxs(
210
214
  DataGridCell,
211
- __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
215
+ __spreadProps(__spreadValues({
212
216
  id,
213
- locked,
217
+ ref: setNodeRef ? setNodeRef : ref,
214
218
  type: "header",
215
219
  component: "header",
216
- ref: setNodeRef,
217
- colSpan: header.colSpan,
218
- style
219
- }, props), {
220
+ style,
220
221
  onClick: header.column.getToggleSortingHandler(),
221
222
  onRightClick: () => setShowMenu(!showMenu)
222
- }), locked ? {} : attributes), locked ? {} : listeners), {
223
+ }, props), {
223
224
  children: [
224
225
  children,
225
- header.column.getCanFilter() && /* @__PURE__ */ jsx(
226
+ header.column.getCanFilter() && /* @__PURE__ */ jsxs(
226
227
  Menu,
227
228
  {
228
229
  id: id ? `${id}-menu` : void 0,
229
230
  ref: menuRootRef,
230
- positionTo: node,
231
+ positionTo: node ? node : ref,
231
232
  show: showMenu,
232
233
  setShow: setShowMenu,
233
234
  mobileHide,
234
- children: /* @__PURE__ */ jsx(
235
- MenuOption,
236
- __spreadProps(__spreadValues({
237
- id: id ? `${id}-filter-option` : void 0
238
- }, subMenuListeners), {
239
- subMenu: (_b2) => {
240
- var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
241
- return /* @__PURE__ */ jsxs(
242
- Menu,
243
- __spreadProps(__spreadValues({
244
- id: id ? `${id}-filter-submenu` : void 0
245
- }, props2), {
246
- show: isMenuActive(menuId, subMenuLevel),
247
- ref: (el) => {
248
- registerSubMenu(menuId, el);
249
- },
250
- children: [
251
- /* @__PURE__ */ jsx("div", { className: clsx(paddingUsingComponentGap), children: /* @__PURE__ */ jsx(
252
- Search,
253
- {
254
- id: id ? `${id}-filter-search` : void 0,
255
- onChange: (event) => {
256
- setFilter(event.target.value);
257
- },
258
- onKeyDown: (event) => {
259
- if ([" ", "Space"].includes(event.key)) {
260
- event.stopPropagation();
261
- }
262
- },
263
- value: filter != null ? filter : ""
264
- }
265
- ) }),
266
- /* @__PURE__ */ jsx(
267
- MenuOption,
268
- {
269
- id: id ? `${id}-filter-contains` : void 0,
270
- onClick: handleFilterFnChange,
271
- before: menuOptionIcon("includesString"),
272
- children: "Contains"
273
- }
274
- ),
275
- /* @__PURE__ */ jsx(
276
- MenuOption,
277
- {
278
- id: id ? `${id}-filter-startswith` : void 0,
279
- onClick: handleFilterFnChange,
280
- before: menuOptionIcon("startsWith"),
281
- children: "Starts with"
282
- }
283
- ),
284
- /* @__PURE__ */ jsx(
285
- MenuOption,
286
- {
287
- id: id ? `${id}-filter-endswith` : void 0,
288
- onClick: handleFilterFnChange,
289
- before: menuOptionIcon("endsWith"),
290
- children: "Ends with"
291
- }
292
- )
293
- ]
294
- })
295
- );
296
- },
297
- children: "Filter"
298
- })
299
- )
235
+ children: [
236
+ /* @__PURE__ */ jsx(
237
+ MenuOption,
238
+ __spreadProps(__spreadValues({
239
+ id: id ? `${id}-filter-option` : void 0
240
+ }, subMenuListeners), {
241
+ subMenu: (_b2) => {
242
+ var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
243
+ return /* @__PURE__ */ jsxs(
244
+ Menu,
245
+ __spreadProps(__spreadValues({
246
+ id: id ? `${id}-filter-submenu` : void 0
247
+ }, props2), {
248
+ show: isMenuActive(menuId, subMenuLevel),
249
+ ref: (el) => {
250
+ registerSubMenu(menuId, el);
251
+ },
252
+ children: [
253
+ /* @__PURE__ */ jsx("div", { className: clsx(paddingUsingComponentGap), children: /* @__PURE__ */ jsx(
254
+ Search,
255
+ {
256
+ id: id ? `${id}-filter-search` : void 0,
257
+ onChange: (event) => {
258
+ setFilter(event.target.value);
259
+ },
260
+ onKeyDown: (event) => {
261
+ if ([" ", "Space"].includes(event.key)) {
262
+ event.stopPropagation();
263
+ }
264
+ },
265
+ value: filter != null ? filter : ""
266
+ }
267
+ ) }),
268
+ /* @__PURE__ */ jsx(
269
+ MenuOption,
270
+ {
271
+ id: id ? `${id}-filter-contains` : void 0,
272
+ onClick: handleFilterFnChange,
273
+ before: menuOptionIcon("includesString"),
274
+ children: "Contains"
275
+ }
276
+ ),
277
+ /* @__PURE__ */ jsx(
278
+ MenuOption,
279
+ {
280
+ id: id ? `${id}-filter-startswith` : void 0,
281
+ onClick: handleFilterFnChange,
282
+ before: menuOptionIcon("startsWith"),
283
+ children: "Starts with"
284
+ }
285
+ ),
286
+ /* @__PURE__ */ jsx(
287
+ MenuOption,
288
+ {
289
+ id: id ? `${id}-filter-endswith` : void 0,
290
+ onClick: handleFilterFnChange,
291
+ before: menuOptionIcon("endsWith"),
292
+ children: "Ends with"
293
+ }
294
+ )
295
+ ]
296
+ })
297
+ );
298
+ },
299
+ children: "Filter"
300
+ })
301
+ ),
302
+ !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ jsxs(
303
+ MenuOption,
304
+ __spreadProps(__spreadValues({
305
+ onClick: () => {
306
+ setShowMenu(!showMenu);
307
+ }
308
+ }, subMenuListeners), {
309
+ subMenu: (_d) => {
310
+ var _e = _d, { menuId, subMenuLevel } = _e, props2 = __objRest(_e, ["menuId", "subMenuLevel"]);
311
+ return /* @__PURE__ */ jsxs(
312
+ Menu,
313
+ __spreadProps(__spreadValues({}, props2), {
314
+ show: isMenuActive(menuId, subMenuLevel),
315
+ ref: (el) => {
316
+ registerSubMenu(menuId, el);
317
+ },
318
+ children: [
319
+ /* @__PURE__ */ jsx(
320
+ MenuOption,
321
+ {
322
+ selected: header.column.getIsPinned() === "left",
323
+ onClick: () => {
324
+ if (header.column.getIsPinned() === "left") {
325
+ header.column.pin(false);
326
+ } else {
327
+ header.column.pin("left");
328
+ }
329
+ },
330
+ after: header.column.getIsPinned() === "left" && /* @__PURE__ */ jsx(Icon, { name: "check" }),
331
+ children: "Left"
332
+ }
333
+ ),
334
+ /* @__PURE__ */ jsx(
335
+ MenuOption,
336
+ {
337
+ selected: header.column.getIsPinned() === "right",
338
+ onClick: () => {
339
+ if (header.column.getIsPinned() === "right") {
340
+ header.column.pin(false);
341
+ } else {
342
+ header.column.pin("right");
343
+ }
344
+ },
345
+ after: header.column.getIsPinned() === "right" && /* @__PURE__ */ jsx(Icon, { name: "check" }),
346
+ children: "Right"
347
+ }
348
+ )
349
+ ]
350
+ })
351
+ );
352
+ },
353
+ children: [
354
+ "Freeze [",
355
+ header.column.columnDef.header,
356
+ "]"
357
+ ]
358
+ })
359
+ )
360
+ ]
300
361
  }
301
362
  )
302
363
  ]
@@ -314,7 +375,6 @@ function DraggableCellHeader(_a) {
314
375
  );
315
376
  }
316
377
  function handleFilterFnChange(_id, value) {
317
- var _a3;
318
378
  let filterFn = "includesString";
319
379
  const currentFilterFn = header.column.columnDef.filterFn;
320
380
  if ((value == null ? void 0 : value.toLowerCase()) === "starts with") {
@@ -327,9 +387,43 @@ function DraggableCellHeader(_a) {
327
387
  filterFn = currentFilterFn === "includesString" ? "auto" : "includesString";
328
388
  }
329
389
  header.column.columnDef.filterFn = filterFn;
330
- header.column.setFilterValue((_a3 = header.column.getFilterValue()) != null ? _a3 : "");
390
+ header.column.setFilterValue(filter);
331
391
  }
332
392
  }
393
+ DataCellHeader.displayName = "DataCellHeader";
394
+ function DraggableCellHeader(_a) {
395
+ var _b = _a, {
396
+ header,
397
+ children
398
+ } = _b, props = __objRest(_b, [
399
+ "header",
400
+ "children"
401
+ ]);
402
+ const { attributes, isDragging, listeners, setNodeRef, transform, node } = useSortable({
403
+ id: header.column.id
404
+ });
405
+ const style = {
406
+ opacity: isDragging ? 0.8 : 1,
407
+ position: "relative",
408
+ transform: CSS.Translate.toString(transform),
409
+ transition: "width transform 0.2s ease-in-out",
410
+ whiteSpace: "nowrap",
411
+ zIndex: isDragging ? 1 : 0,
412
+ width: header.column.getSize(),
413
+ "--color-text-primary-normal": "var(--color-neutral-000)"
414
+ };
415
+ return /* @__PURE__ */ jsx(
416
+ DataCellHeader,
417
+ __spreadProps(__spreadValues(__spreadValues(__spreadValues({
418
+ header,
419
+ setNodeRef,
420
+ node,
421
+ style
422
+ }, props), attributes), listeners), {
423
+ children
424
+ })
425
+ );
426
+ }
333
427
  DraggableCellHeader.displayName = "DraggableCellHeader";
334
428
  function DragAlongCell(_a) {
335
429
  var _b = _a, {
@@ -347,9 +441,8 @@ function DragAlongCell(_a) {
347
441
  position: "relative",
348
442
  transform: CSS.Translate.toString(transform),
349
443
  transition: "width transform 0.2s ease-in-out",
350
- zIndex: isDragging ? 1 : 0,
351
444
  width: cell.column.getSize(),
352
- minWidth: "min-content"
445
+ zIndex: isDragging ? 1 : 0
353
446
  };
354
447
  return /* @__PURE__ */ jsx(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
355
448
  }
@@ -357,6 +450,7 @@ DragAlongCell.displayName = "DragAlongCell";
357
450
 
358
451
  export {
359
452
  DataGridCell,
453
+ DataCellHeader,
360
454
  DraggableCellHeader,
361
455
  DragAlongCell
362
456
  };
@@ -0,0 +1,127 @@
1
+ // src/utils/date.ts
2
+ function parseInputDate(input) {
3
+ const match = input.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
4
+ if (!match) {
5
+ return null;
6
+ }
7
+ const [, month, day, year] = match;
8
+ const paddedMonth = month.padStart(2, "0");
9
+ const paddedDay = day.padStart(2, "0");
10
+ return `${year}-${paddedMonth}-${paddedDay}`;
11
+ }
12
+ function isValidDate(dateString) {
13
+ const date = new Date(dateString);
14
+ return date instanceof Date && !isNaN(date.getTime()) && dateString === date.toISOString().split("T")[0];
15
+ }
16
+ function formatInputValue(value) {
17
+ const digits = value.replace(/\D/g, "");
18
+ if (digits.length < 2) {
19
+ return digits;
20
+ }
21
+ if (digits.length >= 4) {
22
+ return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4, 8)}`;
23
+ }
24
+ return `${digits.slice(0, 2)}/${digits.slice(2)}`;
25
+ }
26
+ function isDigit(character) {
27
+ return /\d/.test(character);
28
+ }
29
+ function isSlash(character) {
30
+ return character === "/";
31
+ }
32
+ function countDigitsUpToCursor(value, cursorPosition) {
33
+ let digitCount = 0;
34
+ for (let i = 0; i < cursorPosition && i < value.length; i++) {
35
+ if (!isDigit(value[i])) {
36
+ continue;
37
+ }
38
+ digitCount++;
39
+ }
40
+ return digitCount;
41
+ }
42
+ function findPositionAfterDigitCount(formattedValue, targetDigitCount) {
43
+ let currentDigitCount = 0;
44
+ for (let i = 0; i < formattedValue.length; i++) {
45
+ if (!isDigit(formattedValue[i])) {
46
+ continue;
47
+ }
48
+ currentDigitCount++;
49
+ if (currentDigitCount !== targetDigitCount) {
50
+ continue;
51
+ }
52
+ const positionAfterDigit = i + 1;
53
+ const nextCharacter = formattedValue[positionAfterDigit];
54
+ if (nextCharacter && isSlash(nextCharacter)) {
55
+ return positionAfterDigit + 1;
56
+ }
57
+ return positionAfterDigit;
58
+ }
59
+ return formattedValue.length;
60
+ }
61
+ function calculateCursorPosition(originalValue, formattedValue, originalPosition) {
62
+ const targetDigitCount = countDigitsUpToCursor(originalValue, originalPosition);
63
+ const newPosition = findPositionAfterDigitCount(formattedValue, targetDigitCount);
64
+ return Math.min(newPosition, formattedValue.length);
65
+ }
66
+ function parseDateParts(dateString) {
67
+ const [yearStr, monthStr, dayStr] = dateString.split("-");
68
+ if (!yearStr || !monthStr || !dayStr) {
69
+ return null;
70
+ }
71
+ const year = parseInt(yearStr, 10);
72
+ const month = parseInt(monthStr, 10);
73
+ const day = parseInt(dayStr, 10);
74
+ if (isNaN(year) || isNaN(month) || isNaN(day)) {
75
+ return null;
76
+ }
77
+ return { year, month, day };
78
+ }
79
+ function isValidDateRange(month, day) {
80
+ if (month < 1 || month > 12) {
81
+ return false;
82
+ }
83
+ if (day < 1 || day > 31) {
84
+ return false;
85
+ }
86
+ return true;
87
+ }
88
+ function formatDatePartsToDisplay(year, month, day) {
89
+ const paddedMonth = month.toString().padStart(2, "0");
90
+ const paddedDay = day.toString().padStart(2, "0");
91
+ return `${paddedMonth}/${paddedDay}/${year}`;
92
+ }
93
+ function formatDate(date) {
94
+ if (!date) {
95
+ return "";
96
+ }
97
+ try {
98
+ const dateParts = parseDateParts(date);
99
+ if (!dateParts) {
100
+ return "";
101
+ }
102
+ const { year, month, day } = dateParts;
103
+ if (!isValidDateRange(month, day)) {
104
+ return "";
105
+ }
106
+ return formatDatePartsToDisplay(year, month, day);
107
+ } catch (error) {
108
+ return "";
109
+ }
110
+ }
111
+ function isValidDateRangeOrder(fromDate, toDate) {
112
+ if (!fromDate || !toDate || !isValidDate(fromDate) || !isValidDate(toDate)) {
113
+ return false;
114
+ }
115
+ const from = new Date(fromDate);
116
+ const to = new Date(toDate);
117
+ return to >= from;
118
+ }
119
+
120
+ export {
121
+ parseInputDate,
122
+ isValidDate,
123
+ formatInputValue,
124
+ calculateCursorPosition,
125
+ formatDate,
126
+ isValidDateRangeOrder
127
+ };
@@ -15,7 +15,7 @@ import {
15
15
 
16
16
  // src/components/CalendarRange.tsx
17
17
  import clsx from "clsx";
18
- import React, { useState } from "react";
18
+ import React, { useEffect, useState } from "react";
19
19
  import { Temporal } from "@js-temporal/polyfill";
20
20
  import { jsx, jsxs } from "react/jsx-runtime";
21
21
  function isWeekend(date) {
@@ -107,11 +107,20 @@ function CalendarRange({
107
107
  }) {
108
108
  const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
109
109
  const parseDate = (d) => {
110
- if (!d) return void 0;
111
- if (typeof d === "number")
112
- return Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
113
- if (typeof d === "string") return Temporal.PlainDate.from(d);
114
- return void 0;
110
+ if (!d) {
111
+ return void 0;
112
+ }
113
+ try {
114
+ if (typeof d === "number") {
115
+ return Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
116
+ }
117
+ if (typeof d === "string") {
118
+ return Temporal.PlainDate.from(d);
119
+ }
120
+ return void 0;
121
+ } catch (error) {
122
+ return Temporal.Now.plainDateISO();
123
+ }
115
124
  };
116
125
  const fromDate = parseDate(from);
117
126
  const toDate = parseDate(to);
@@ -122,6 +131,20 @@ function CalendarRange({
122
131
  const [selecting, setSelecting] = useState("from");
123
132
  const [pendingFrom, setPendingFrom] = useState(void 0);
124
133
  const [hoveredDate, setHoveredDate] = useState(void 0);
134
+ useEffect(() => {
135
+ if (fromDate) {
136
+ setBaseMonth(fromDate.with({ day: 1 }));
137
+ } else if (toDate) {
138
+ setBaseMonth(toDate.with({ day: 1 }));
139
+ }
140
+ }, [from, to]);
141
+ useEffect(() => {
142
+ if (fromDate && toDate) {
143
+ setSelecting("from");
144
+ setPendingFrom(void 0);
145
+ setHoveredDate(void 0);
146
+ }
147
+ }, [from, to]);
125
148
  function getMonthData(monthOffset) {
126
149
  const monthDate = baseMonth.add({ months: monthOffset }).with({ day: 1 });
127
150
  const days = monthDate.daysInMonth;
@@ -92,7 +92,8 @@ var MenuOption = ({
92
92
  );
93
93
  const actionDisabledStyles = variant === "action" && disabled && clsx("text-text-action-disabled");
94
94
  const disabledStyles = disabled && clsx("bg-transparent cursor-default pointer-events-none");
95
- const renderChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
95
+ const processChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
96
+ const renderChildren = typeof children === "object" ? children : variant === "action" ? /* @__PURE__ */ jsx(Label, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ jsx(Paragraph, { padded: true, className: textLabelStyles, children: processChildren });
96
97
  return /* @__PURE__ */ jsxs(Fragment, { children: [
97
98
  /* @__PURE__ */ jsxs(
98
99
  "div",
@@ -126,7 +127,7 @@ var MenuOption = ({
126
127
  "aria-haspopup": subMenu ? "menu" : void 0,
127
128
  children: [
128
129
  before && /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center", children: before }),
129
- variant === "action" ? /* @__PURE__ */ jsx(Label, { padded: true, className: textLabelStyles, children: renderChildren }) : /* @__PURE__ */ jsx(Paragraph, { padded: true, className: textLabelStyles, children: renderChildren }),
130
+ renderChildren,
130
131
  renderAfterProp()
131
132
  ]
132
133
  })
@@ -317,11 +317,20 @@ function CalendarRange({
317
317
  }) {
318
318
  const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
319
319
  const parseDate = (d) => {
320
- if (!d) return void 0;
321
- if (typeof d === "number")
322
- return import_polyfill.Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
323
- if (typeof d === "string") return import_polyfill.Temporal.PlainDate.from(d);
324
- return void 0;
320
+ if (!d) {
321
+ return void 0;
322
+ }
323
+ try {
324
+ if (typeof d === "number") {
325
+ return import_polyfill.Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
326
+ }
327
+ if (typeof d === "string") {
328
+ return import_polyfill.Temporal.PlainDate.from(d);
329
+ }
330
+ return void 0;
331
+ } catch (error) {
332
+ return import_polyfill.Temporal.Now.plainDateISO();
333
+ }
325
334
  };
326
335
  const fromDate = parseDate(from);
327
336
  const toDate = parseDate(to);
@@ -332,6 +341,20 @@ function CalendarRange({
332
341
  const [selecting, setSelecting] = (0, import_react.useState)("from");
333
342
  const [pendingFrom, setPendingFrom] = (0, import_react.useState)(void 0);
334
343
  const [hoveredDate, setHoveredDate] = (0, import_react.useState)(void 0);
344
+ (0, import_react.useEffect)(() => {
345
+ if (fromDate) {
346
+ setBaseMonth(fromDate.with({ day: 1 }));
347
+ } else if (toDate) {
348
+ setBaseMonth(toDate.with({ day: 1 }));
349
+ }
350
+ }, [from, to]);
351
+ (0, import_react.useEffect)(() => {
352
+ if (fromDate && toDate) {
353
+ setSelecting("from");
354
+ setPendingFrom(void 0);
355
+ setHoveredDate(void 0);
356
+ }
357
+ }, [from, to]);
335
358
  function getMonthData(monthOffset) {
336
359
  const monthDate = baseMonth.add({ months: monthOffset }).with({ day: 1 });
337
360
  const days = monthDate.daysInMonth;
@@ -2,7 +2,7 @@ import {
2
2
  CalendarRange,
3
3
  CalendarRange_default,
4
4
  isWeekend
5
- } from "../chunk-OUSNH76S.js";
5
+ } from "../chunk-PCCJ7L3N.js";
6
6
  import "../chunk-IGQVA7SC.js";
7
7
  import "../chunk-RDLEIAQU.js";
8
8
  import "../chunk-ORMEWXMH.js";