@dmsi/wedgekit-react 0.0.28 → 0.0.30
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.
- package/dist/{chunk-57WRM337.js → chunk-5POWRPIO.js} +3 -2
- package/dist/{chunk-S5KPS4IQ.js → chunk-HXEPUO5W.js} +189 -95
- package/dist/chunk-KHQX42T7.js +127 -0
- package/dist/{chunk-OUSNH76S.js → chunk-PCCJ7L3N.js} +29 -6
- package/dist/{chunk-PDDZ5PMY.js → chunk-S46RZBT4.js} +3 -2
- package/dist/components/CalendarRange.cjs +28 -5
- package/dist/components/CalendarRange.js +1 -1
- package/dist/components/DataGrid.cjs +490 -217
- package/dist/components/DataGrid.js +303 -122
- package/dist/components/DataGridCell.cjs +192 -96
- package/dist/components/DataGridCell.js +4 -2
- package/dist/components/DateInput.cjs +231 -30
- package/dist/components/DateInput.js +101 -27
- package/dist/components/DateRangeInput.cjs +550 -37
- package/dist/components/DateRangeInput.js +413 -34
- package/dist/components/MenuOption.cjs +3 -2
- package/dist/components/MenuOption.js +1 -1
- package/dist/components/MobileDataGrid.cjs +3 -2
- package/dist/components/MobileDataGrid.js +1 -1
- package/dist/components/NestedMenu.cjs +3 -2
- package/dist/components/NestedMenu.js +1 -1
- package/dist/components/Notification.cjs +3 -2
- package/dist/components/Notification.js +1 -1
- package/dist/components/SideMenuGroup.cjs +3 -2
- package/dist/components/SideMenuGroup.js +1 -1
- package/dist/components/SideMenuItem.cjs +3 -2
- package/dist/components/SideMenuItem.js +1 -1
- package/dist/components/Stack.cjs +3 -2
- package/dist/components/Stack.js +1 -1
- package/dist/components/Swatch.cjs +3 -2
- package/dist/components/Swatch.js +1 -1
- package/dist/components/Time.cjs +3 -2
- package/dist/components/Time.js +1 -1
- package/dist/index.css +9 -0
- package/package.json +1 -1
- package/src/components/CalendarRange.tsx +37 -6
- package/src/components/DataGrid.tsx +284 -48
- package/src/components/DataGridCell.tsx +122 -35
- package/src/components/DateInput.tsx +118 -25
- package/src/components/DateRangeInput.tsx +544 -30
- package/src/components/MenuOption.tsx +18 -14
- package/src/components/Stack.tsx +4 -2
- 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
|
|
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 =
|
|
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-
|
|
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
|
|
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
|
|
164
|
+
function DataCellHeader(_a) {
|
|
165
165
|
var _b = _a, {
|
|
166
166
|
header,
|
|
167
167
|
children,
|
|
168
|
-
|
|
168
|
+
setNodeRef,
|
|
169
|
+
node,
|
|
169
170
|
id
|
|
170
171
|
} = _b, props = __objRest(_b, [
|
|
171
172
|
"header",
|
|
172
173
|
"children",
|
|
173
|
-
"
|
|
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(
|
|
215
|
+
__spreadProps(__spreadValues({
|
|
212
216
|
id,
|
|
213
|
-
|
|
217
|
+
ref: setNodeRef ? setNodeRef : ref,
|
|
214
218
|
type: "header",
|
|
215
219
|
component: "header",
|
|
216
|
-
|
|
217
|
-
colSpan: header.colSpan,
|
|
218
|
-
style
|
|
219
|
-
}, props), {
|
|
220
|
+
style,
|
|
220
221
|
onClick: header.column.getToggleSortingHandler(),
|
|
221
222
|
onRightClick: () => setShowMenu(!showMenu)
|
|
222
|
-
}
|
|
223
|
+
}, props), {
|
|
223
224
|
children: [
|
|
224
225
|
children,
|
|
225
|
-
header.column.getCanFilter() && /* @__PURE__ */
|
|
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:
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
event.
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
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(
|
|
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
|
-
|
|
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)
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
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
|
|
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
|
-
|
|
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)
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
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;
|