@ceed/cds 1.28.0 → 1.29.0-next.1
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/components/CurrencyInput/CurrencyInput.d.ts +1 -1
- package/dist/components/CurrencyInput/hooks/use-currency-setting.d.ts +2 -2
- package/dist/components/DataTable/hooks.d.ts +2 -1
- package/dist/components/DataTable/utils.d.ts +1 -0
- package/dist/components/SearchBar/SearchBar.d.ts +21 -0
- package/dist/components/SearchBar/index.d.ts +3 -0
- package/dist/components/data-display/DataTable.md +1 -1
- package/dist/components/data-display/InfoSign.md +91 -74
- package/dist/components/data-display/Typography.md +94 -411
- package/dist/components/feedback/Dialog.md +62 -76
- package/dist/components/feedback/Modal.md +138 -430
- package/dist/components/feedback/llms.txt +0 -2
- package/dist/components/index.d.ts +2 -1
- package/dist/components/inputs/Autocomplete.md +107 -356
- package/dist/components/inputs/ButtonGroup.md +104 -115
- package/dist/components/inputs/CurrencyInput.md +5 -183
- package/dist/components/inputs/DatePicker.md +431 -108
- package/dist/components/inputs/DateRangePicker.md +492 -131
- package/dist/components/inputs/FilterableCheckboxGroup.md +19 -145
- package/dist/components/inputs/IconButton.md +88 -137
- package/dist/components/inputs/Input.md +73 -204
- package/dist/components/inputs/MonthPicker.md +422 -95
- package/dist/components/inputs/MonthRangePicker.md +466 -89
- package/dist/components/inputs/PercentageInput.md +16 -185
- package/dist/components/inputs/RadioButton.md +35 -163
- package/dist/components/inputs/SearchBar.md +44 -0
- package/dist/components/inputs/Select.md +326 -222
- package/dist/components/inputs/Switch.md +376 -143
- package/dist/components/inputs/Textarea.md +10 -213
- package/dist/components/inputs/Uploader/Uploader.md +66 -145
- package/dist/components/inputs/llms.txt +1 -4
- package/dist/components/navigation/Breadcrumbs.md +308 -57
- package/dist/components/navigation/Drawer.md +0 -180
- package/dist/components/navigation/Dropdown.md +215 -98
- package/dist/components/navigation/IconMenuButton.md +502 -40
- package/dist/components/navigation/InsetDrawer.md +650 -281
- package/dist/components/navigation/Link.md +348 -31
- package/dist/components/navigation/Menu.md +285 -92
- package/dist/components/navigation/MenuButton.md +448 -55
- package/dist/components/navigation/Pagination.md +338 -47
- package/dist/components/navigation/Stepper.md +28 -160
- package/dist/components/navigation/Tabs.md +316 -57
- package/dist/components/surfaces/Accordions.md +804 -49
- package/dist/components/surfaces/Card.md +157 -97
- package/dist/components/surfaces/Divider.md +234 -83
- package/dist/components/surfaces/Sheet.md +328 -153
- package/dist/index.cjs +435 -577
- package/dist/index.d.ts +1 -1
- package/dist/index.js +424 -510
- package/dist/llms.txt +1 -9
- package/framer/index.js +1 -1
- package/package.json +17 -22
- package/dist/chunks/rehype-accent-FZRUD7VI.js +0 -39
- package/dist/components/RadioTileGroup/RadioTileGroup.d.ts +0 -56
- package/dist/components/RadioTileGroup/index.d.ts +0 -3
- package/dist/components/feedback/CircularProgress.md +0 -257
- package/dist/components/feedback/Skeleton.md +0 -280
- package/dist/components/inputs/FormControl.md +0 -361
- package/dist/components/inputs/RadioList.md +0 -241
- package/dist/components/inputs/RadioTileGroup.md +0 -507
- package/dist/components/inputs/Slider.md +0 -334
- package/dist/guides/ThemeProvider.md +0 -89
- package/dist/guides/llms.txt +0 -9
- package/dist/index.browser.js +0 -224
- package/dist/index.browser.js.map +0 -7
package/dist/index.js
CHANGED
|
@@ -1,3 +1,59 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
3
|
+
var __esm = (fn, res) => function __init() {
|
|
4
|
+
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
5
|
+
};
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
// src/libs/rehype-accent/index.ts
|
|
12
|
+
var rehype_accent_exports = {};
|
|
13
|
+
__export(rehype_accent_exports, {
|
|
14
|
+
rehypeAccent: () => rehypeAccent
|
|
15
|
+
});
|
|
16
|
+
import { visit } from "unist-util-visit";
|
|
17
|
+
function rehypeAccent(options) {
|
|
18
|
+
const { accentColor } = options;
|
|
19
|
+
return (tree) => {
|
|
20
|
+
visit(tree, "text", (node, index, parent) => {
|
|
21
|
+
const value = node.value;
|
|
22
|
+
const regex = /\|\|.*?\|\|/g;
|
|
23
|
+
let match;
|
|
24
|
+
let lastIndex = 0;
|
|
25
|
+
const newNodes = [];
|
|
26
|
+
while ((match = regex.exec(value)) !== null) {
|
|
27
|
+
if (match.index > lastIndex) {
|
|
28
|
+
newNodes.push({
|
|
29
|
+
type: "text",
|
|
30
|
+
value: value.slice(lastIndex, match.index)
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
const innerText = match[0].split("||")[1];
|
|
34
|
+
newNodes.push({
|
|
35
|
+
type: "element",
|
|
36
|
+
tagName: "span",
|
|
37
|
+
properties: { textColor: accentColor },
|
|
38
|
+
children: [{ type: "text", value: innerText }]
|
|
39
|
+
});
|
|
40
|
+
lastIndex = match.index + match[0].length;
|
|
41
|
+
}
|
|
42
|
+
if (lastIndex < value.length) {
|
|
43
|
+
newNodes.push({ type: "text", value: value.slice(lastIndex) });
|
|
44
|
+
}
|
|
45
|
+
if (newNodes.length) {
|
|
46
|
+
parent.children.splice(index, 1, ...newNodes);
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
var init_rehype_accent = __esm({
|
|
52
|
+
"src/libs/rehype-accent/index.ts"() {
|
|
53
|
+
"use strict";
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
|
|
1
57
|
// src/index.ts
|
|
2
58
|
import {
|
|
3
59
|
useTheme as useTheme2,
|
|
@@ -15,7 +71,7 @@ import {
|
|
|
15
71
|
menuButtonClasses,
|
|
16
72
|
menuItemClasses,
|
|
17
73
|
optionClasses,
|
|
18
|
-
radioClasses
|
|
74
|
+
radioClasses,
|
|
19
75
|
radioGroupClasses,
|
|
20
76
|
selectClasses,
|
|
21
77
|
switchClasses as switchClasses2,
|
|
@@ -27,7 +83,7 @@ import {
|
|
|
27
83
|
formHelperTextClasses,
|
|
28
84
|
gridClasses,
|
|
29
85
|
stackClasses,
|
|
30
|
-
sheetClasses
|
|
86
|
+
sheetClasses,
|
|
31
87
|
modalClasses,
|
|
32
88
|
modalCloseClasses,
|
|
33
89
|
modalDialogClasses,
|
|
@@ -96,7 +152,7 @@ import {
|
|
|
96
152
|
stepperClasses,
|
|
97
153
|
Skeleton as Skeleton2,
|
|
98
154
|
skeletonClasses,
|
|
99
|
-
styled as
|
|
155
|
+
styled as styled30
|
|
100
156
|
} from "@mui/joy";
|
|
101
157
|
|
|
102
158
|
// src/components/Accordions/Accordions.tsx
|
|
@@ -703,24 +759,11 @@ Button.displayName = "Button";
|
|
|
703
759
|
var Button_default = Button;
|
|
704
760
|
|
|
705
761
|
// src/components/Calendar/Calendar.tsx
|
|
706
|
-
import
|
|
762
|
+
import React11, { Fragment, forwardRef as forwardRef4, useMemo as useMemo4 } from "react";
|
|
707
763
|
import { styled as styled5 } from "@mui/joy";
|
|
708
764
|
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
|
|
709
765
|
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
|
710
|
-
import { AnimatePresence, motion as
|
|
711
|
-
|
|
712
|
-
// src/components/Tooltip/Tooltip.tsx
|
|
713
|
-
import React10 from "react";
|
|
714
|
-
import { Tooltip as JoyTooltip } from "@mui/joy";
|
|
715
|
-
import { motion as motion12 } from "framer-motion";
|
|
716
|
-
var MotionTooltip = motion12(JoyTooltip);
|
|
717
|
-
var Tooltip = (props) => {
|
|
718
|
-
return /* @__PURE__ */ React10.createElement(MotionTooltip, { ...props });
|
|
719
|
-
};
|
|
720
|
-
Tooltip.displayName = "Tooltip";
|
|
721
|
-
|
|
722
|
-
// src/components/Tooltip/index.ts
|
|
723
|
-
var Tooltip_default = Tooltip;
|
|
766
|
+
import { AnimatePresence, motion as motion12 } from "framer-motion";
|
|
724
767
|
|
|
725
768
|
// src/components/Calendar/utils/index.ts
|
|
726
769
|
var getCalendarDates = (date) => {
|
|
@@ -1079,12 +1122,6 @@ var useCalendar = (ownerState) => {
|
|
|
1079
1122
|
};
|
|
1080
1123
|
|
|
1081
1124
|
// src/components/Calendar/Calendar.tsx
|
|
1082
|
-
var MONTH_VIEW_HINT_MESSAGE = "Click the month title to view all months.";
|
|
1083
|
-
var MONTH_NAV_CLICK_WINDOW_MS = 1200;
|
|
1084
|
-
var MONTH_NAV_CLICK_THRESHOLD = 3;
|
|
1085
|
-
var MONTH_VIEW_HINT_DURATION_MS = 5e3;
|
|
1086
|
-
var MONTH_VIEW_HINT_COOLDOWN_MS = 3e4;
|
|
1087
|
-
var lastMonthViewAssistHintShownAt = 0;
|
|
1088
1125
|
var CalendarRoot = styled5("div", {
|
|
1089
1126
|
name: "Calendar",
|
|
1090
1127
|
slot: "root"
|
|
@@ -1111,7 +1148,7 @@ var CalendarViewContainer = styled5("div", {
|
|
|
1111
1148
|
overflow: "hidden",
|
|
1112
1149
|
minHeight: calendarType === "datePicker" ? "250px" : "unset"
|
|
1113
1150
|
}));
|
|
1114
|
-
var CalendarViewTable = styled5(
|
|
1151
|
+
var CalendarViewTable = styled5(motion12.table, {
|
|
1115
1152
|
name: "Calendar",
|
|
1116
1153
|
slot: "viewTable"
|
|
1117
1154
|
})(({ theme }) => ({
|
|
@@ -1291,7 +1328,7 @@ var PickerDays = (props) => {
|
|
|
1291
1328
|
const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
|
|
1292
1329
|
const calendarDates = useMemo4(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
|
|
1293
1330
|
const weekdayNames = useMemo4(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
|
|
1294
|
-
return /* @__PURE__ */
|
|
1331
|
+
return /* @__PURE__ */ React11.createElement(CalendarViewContainer, { calendarType: "datePicker" }, /* @__PURE__ */ React11.createElement(AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ React11.createElement(
|
|
1295
1332
|
CalendarViewTable,
|
|
1296
1333
|
{
|
|
1297
1334
|
key: `${ownerState.viewMonth.toString()}_${ownerState.direction}`,
|
|
@@ -1320,10 +1357,10 @@ var PickerDays = (props) => {
|
|
|
1320
1357
|
}
|
|
1321
1358
|
}
|
|
1322
1359
|
},
|
|
1323
|
-
/* @__PURE__ */
|
|
1324
|
-
/* @__PURE__ */
|
|
1325
|
-
(date, i) => date ? /* @__PURE__ */
|
|
1326
|
-
)), rowIndex < calendarDates.length - 1 && /* @__PURE__ */
|
|
1360
|
+
/* @__PURE__ */ React11.createElement(CalendarWeekHeaderContainer, null, /* @__PURE__ */ React11.createElement("tr", null, weekdayNames.map((name, i) => /* @__PURE__ */ React11.createElement(Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` }, /* @__PURE__ */ React11.createElement("th", null, /* @__PURE__ */ React11.createElement(Typography_default, { level: "body-xs", textAlign: "center" }, name)), i < 6 && /* @__PURE__ */ React11.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" }))))),
|
|
1361
|
+
/* @__PURE__ */ React11.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ React11.createElement(Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ React11.createElement("tr", null, weekDates.map(
|
|
1362
|
+
(date, i) => date ? /* @__PURE__ */ React11.createElement(Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ React11.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ React11.createElement(CalendarDay, { size: "sm", variant: "plain", color: "neutral", ...getPickerDayProps(date) }, date)), i < 6 && /* @__PURE__ */ React11.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ React11.createElement(Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ React11.createElement("td", null), i < 6 && /* @__PURE__ */ React11.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
|
|
1363
|
+
)), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ React11.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React11.createElement("td", { colSpan: 13, style: { height: 4 } })))))
|
|
1327
1364
|
)));
|
|
1328
1365
|
};
|
|
1329
1366
|
var PickerMonths = (props) => {
|
|
@@ -1340,7 +1377,7 @@ var PickerMonths = (props) => {
|
|
|
1340
1377
|
[[]]
|
|
1341
1378
|
);
|
|
1342
1379
|
const isMonthPicker = !ownerState.views?.find((view) => view === "day");
|
|
1343
|
-
return /* @__PURE__ */
|
|
1380
|
+
return /* @__PURE__ */ React11.createElement(CalendarViewContainer, { calendarType: isMonthPicker ? "monthPicker" : "datePicker" }, /* @__PURE__ */ React11.createElement(AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ React11.createElement(
|
|
1344
1381
|
CalendarViewTable,
|
|
1345
1382
|
{
|
|
1346
1383
|
key: `${ownerState.viewMonth.getFullYear()}_${ownerState.direction}`,
|
|
@@ -1369,7 +1406,7 @@ var PickerMonths = (props) => {
|
|
|
1369
1406
|
}
|
|
1370
1407
|
}
|
|
1371
1408
|
},
|
|
1372
|
-
/* @__PURE__ */
|
|
1409
|
+
/* @__PURE__ */ React11.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ React11.createElement(Fragment, { key: months.join("_") }, /* @__PURE__ */ React11.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ React11.createElement(Fragment, { key: monthIndex }, /* @__PURE__ */ React11.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ React11.createElement(CalendarMonth, { size: "sm", variant: "plain", color: "neutral", ...getPickerMonthProps(monthIndex) }, getMonthNameFromIndex(monthIndex, ownerState.locale))), j < 3 && /* @__PURE__ */ React11.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))), i < chunkedMonths.length - 1 && /* @__PURE__ */ React11.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React11.createElement("td", { colSpan: 7, style: { height: 4 } })))))
|
|
1373
1410
|
)));
|
|
1374
1411
|
};
|
|
1375
1412
|
var Calendar = forwardRef4((inProps, ref) => {
|
|
@@ -1391,96 +1428,17 @@ var Calendar = forwardRef4((inProps, ref) => {
|
|
|
1391
1428
|
...others
|
|
1392
1429
|
} = props;
|
|
1393
1430
|
const { calendarTitle, onPrev, onNext } = useCalendar(ownerState);
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
const monthViewAssistHintShownInSessionRef = useRef3(false);
|
|
1397
|
-
const monthViewAssistHintTimeoutRef = useRef3(null);
|
|
1398
|
-
const hasEndDate = Boolean(value?.[1]);
|
|
1399
|
-
const isRangeHintEligible = Boolean(rangeSelection && !hasEndDate);
|
|
1400
|
-
const isHintEligible = Boolean(view === "day" && (!rangeSelection || isRangeHintEligible));
|
|
1401
|
-
const monthViewHintMessage = MONTH_VIEW_HINT_MESSAGE;
|
|
1402
|
-
useEffect3(() => {
|
|
1403
|
-
if (!isHintEligible) {
|
|
1404
|
-
monthNavClickTimestampsRef.current = [];
|
|
1405
|
-
setIsMonthViewAssistHintOpen(false);
|
|
1406
|
-
}
|
|
1407
|
-
}, [isHintEligible]);
|
|
1408
|
-
useEffect3(() => {
|
|
1409
|
-
return () => {
|
|
1410
|
-
if (monthViewAssistHintTimeoutRef.current) {
|
|
1411
|
-
clearTimeout(monthViewAssistHintTimeoutRef.current);
|
|
1412
|
-
}
|
|
1413
|
-
};
|
|
1414
|
-
}, []);
|
|
1415
|
-
const closeMonthViewAssistHint = useCallback5(() => {
|
|
1416
|
-
if (monthViewAssistHintTimeoutRef.current) {
|
|
1417
|
-
clearTimeout(monthViewAssistHintTimeoutRef.current);
|
|
1418
|
-
monthViewAssistHintTimeoutRef.current = null;
|
|
1419
|
-
}
|
|
1420
|
-
setIsMonthViewAssistHintOpen(false);
|
|
1421
|
-
}, []);
|
|
1422
|
-
const showMonthViewAssistHint = useCallback5(() => {
|
|
1423
|
-
const now = Date.now();
|
|
1424
|
-
if (monthViewAssistHintShownInSessionRef.current) return;
|
|
1425
|
-
if (now - lastMonthViewAssistHintShownAt < MONTH_VIEW_HINT_COOLDOWN_MS) return;
|
|
1426
|
-
monthViewAssistHintShownInSessionRef.current = true;
|
|
1427
|
-
lastMonthViewAssistHintShownAt = now;
|
|
1428
|
-
setIsMonthViewAssistHintOpen(true);
|
|
1429
|
-
if (monthViewAssistHintTimeoutRef.current) {
|
|
1430
|
-
clearTimeout(monthViewAssistHintTimeoutRef.current);
|
|
1431
|
-
}
|
|
1432
|
-
monthViewAssistHintTimeoutRef.current = setTimeout(() => {
|
|
1433
|
-
setIsMonthViewAssistHintOpen(false);
|
|
1434
|
-
monthViewAssistHintTimeoutRef.current = null;
|
|
1435
|
-
}, MONTH_VIEW_HINT_DURATION_MS);
|
|
1436
|
-
}, []);
|
|
1437
|
-
const trackFastMonthNavigation = useCallback5(() => {
|
|
1438
|
-
if (!isHintEligible) return;
|
|
1439
|
-
const now = Date.now();
|
|
1440
|
-
monthNavClickTimestampsRef.current = [
|
|
1441
|
-
...monthNavClickTimestampsRef.current.filter((timestamp) => now - timestamp <= MONTH_NAV_CLICK_WINDOW_MS),
|
|
1442
|
-
now
|
|
1443
|
-
];
|
|
1444
|
-
if (monthNavClickTimestampsRef.current.length >= MONTH_NAV_CLICK_THRESHOLD) {
|
|
1445
|
-
showMonthViewAssistHint();
|
|
1446
|
-
}
|
|
1447
|
-
}, [isHintEligible, showMonthViewAssistHint]);
|
|
1448
|
-
const handlePrevClick = useCallback5(() => {
|
|
1449
|
-
onPrev();
|
|
1450
|
-
trackFastMonthNavigation();
|
|
1451
|
-
}, [onPrev, trackFastMonthNavigation]);
|
|
1452
|
-
const handleNextClick = useCallback5(() => {
|
|
1453
|
-
onNext();
|
|
1454
|
-
trackFastMonthNavigation();
|
|
1455
|
-
}, [onNext, trackFastMonthNavigation]);
|
|
1456
|
-
const handleSwitchViewClick = useCallback5(() => {
|
|
1457
|
-
closeMonthViewAssistHint();
|
|
1458
|
-
onViewChange?.();
|
|
1459
|
-
}, [closeMonthViewAssistHint, onViewChange]);
|
|
1460
|
-
return /* @__PURE__ */ React12.createElement(CalendarRoot, { ref, ...others }, /* @__PURE__ */ React12.createElement(CalendarHeader, null, /* @__PURE__ */ React12.createElement(IconButton_default, { size: "sm", onClick: handlePrevClick, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null)), /* @__PURE__ */ React12.createElement(
|
|
1461
|
-
Tooltip_default,
|
|
1431
|
+
return /* @__PURE__ */ React11.createElement(CalendarRoot, { ref, ...others }, /* @__PURE__ */ React11.createElement(CalendarHeader, null, /* @__PURE__ */ React11.createElement(IconButton_default, { size: "sm", onClick: onPrev, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ React11.createElement(ChevronLeftIcon, null)), /* @__PURE__ */ React11.createElement(
|
|
1432
|
+
CalendarSwitchViewButton,
|
|
1462
1433
|
{
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
disableHoverListener: true,
|
|
1469
|
-
disableTouchListener: true,
|
|
1470
|
-
variant: "solid"
|
|
1434
|
+
ownerState,
|
|
1435
|
+
variant: "plain",
|
|
1436
|
+
color: "neutral",
|
|
1437
|
+
onClick: onViewChange,
|
|
1438
|
+
"aria-label": "Switch Calendar View"
|
|
1471
1439
|
},
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
{
|
|
1475
|
-
ownerState,
|
|
1476
|
-
variant: "plain",
|
|
1477
|
-
color: "neutral",
|
|
1478
|
-
onClick: handleSwitchViewClick,
|
|
1479
|
-
"aria-label": "Switch Calendar View"
|
|
1480
|
-
},
|
|
1481
|
-
calendarTitle
|
|
1482
|
-
)
|
|
1483
|
-
), /* @__PURE__ */ React12.createElement(IconButton_default, { size: "sm", onClick: handleNextClick, "aria-label": `Next ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ React12.createElement(ChevronRightIcon, null))), view === "day" && /* @__PURE__ */ React12.createElement(PickerDays, { ownerState }), view === "month" && /* @__PURE__ */ React12.createElement(PickerMonths, { ownerState }));
|
|
1440
|
+
calendarTitle
|
|
1441
|
+
), /* @__PURE__ */ React11.createElement(IconButton_default, { size: "sm", onClick: onNext, "aria-label": `Next ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ React11.createElement(ChevronRightIcon, null))), view === "day" && /* @__PURE__ */ React11.createElement(PickerDays, { ownerState }), view === "month" && /* @__PURE__ */ React11.createElement(PickerMonths, { ownerState }));
|
|
1484
1442
|
});
|
|
1485
1443
|
Calendar.displayName = "Calendar";
|
|
1486
1444
|
|
|
@@ -1495,30 +1453,30 @@ import {
|
|
|
1495
1453
|
CardActions as JoyCardActions,
|
|
1496
1454
|
CardOverflow as JoyCardOverflow
|
|
1497
1455
|
} from "@mui/joy";
|
|
1498
|
-
import { motion as
|
|
1499
|
-
var MotionCard =
|
|
1456
|
+
import { motion as motion13 } from "framer-motion";
|
|
1457
|
+
var MotionCard = motion13(JoyCard);
|
|
1500
1458
|
var Card = MotionCard;
|
|
1501
1459
|
Card.displayName = "Card";
|
|
1502
|
-
var MotionCardContent =
|
|
1460
|
+
var MotionCardContent = motion13(JoyCardContent);
|
|
1503
1461
|
var CardContent = MotionCardContent;
|
|
1504
1462
|
CardContent.displayName = "CardContent";
|
|
1505
|
-
var MotionCardCover =
|
|
1463
|
+
var MotionCardCover = motion13(JoyCardCover);
|
|
1506
1464
|
var CardCover = MotionCardCover;
|
|
1507
1465
|
CardCover.displayName = "CardCover";
|
|
1508
|
-
var MotionCardActions =
|
|
1466
|
+
var MotionCardActions = motion13(JoyCardActions);
|
|
1509
1467
|
var CardActions = MotionCardActions;
|
|
1510
1468
|
CardActions.displayName = "CardActions";
|
|
1511
|
-
var MotionCardOverflow =
|
|
1469
|
+
var MotionCardOverflow = motion13(JoyCardOverflow);
|
|
1512
1470
|
var CardOverflow = MotionCardOverflow;
|
|
1513
1471
|
CardOverflow.displayName = "CardOverflow";
|
|
1514
1472
|
|
|
1515
1473
|
// src/components/Checkbox/Checkbox.tsx
|
|
1516
|
-
import
|
|
1474
|
+
import React12 from "react";
|
|
1517
1475
|
import { Checkbox as JoyCheckbox } from "@mui/joy";
|
|
1518
|
-
import { motion as
|
|
1519
|
-
var MotionCheckbox =
|
|
1476
|
+
import { motion as motion14 } from "framer-motion";
|
|
1477
|
+
var MotionCheckbox = motion14(JoyCheckbox);
|
|
1520
1478
|
var Checkbox = (props) => {
|
|
1521
|
-
return /* @__PURE__ */
|
|
1479
|
+
return /* @__PURE__ */ React12.createElement(MotionCheckbox, { ...props });
|
|
1522
1480
|
};
|
|
1523
1481
|
Checkbox.displayName = "Checkbox";
|
|
1524
1482
|
|
|
@@ -1527,7 +1485,7 @@ var Checkbox_default = Checkbox;
|
|
|
1527
1485
|
|
|
1528
1486
|
// src/components/Container/Container.tsx
|
|
1529
1487
|
import { styled as styled6 } from "@mui/joy";
|
|
1530
|
-
import
|
|
1488
|
+
import React13, { forwardRef as forwardRef5 } from "react";
|
|
1531
1489
|
var ContainerRoot = styled6("div", {
|
|
1532
1490
|
name: "Container",
|
|
1533
1491
|
slot: "root",
|
|
@@ -1554,23 +1512,24 @@ var ContainerRoot = styled6("div", {
|
|
|
1554
1512
|
} : null
|
|
1555
1513
|
]);
|
|
1556
1514
|
var Container = forwardRef5(function Container2(props, ref) {
|
|
1557
|
-
return /* @__PURE__ */
|
|
1515
|
+
return /* @__PURE__ */ React13.createElement(ContainerRoot, { ref, ...props });
|
|
1558
1516
|
});
|
|
1559
1517
|
Container.displayName = "Container";
|
|
1560
1518
|
|
|
1561
1519
|
// src/components/CurrencyInput/CurrencyInput.tsx
|
|
1562
|
-
import
|
|
1520
|
+
import React15, { useCallback as useCallback6, useMemo as useMemo5, useState as useState5 } from "react";
|
|
1521
|
+
import { IntlMessageFormat as IntlMessageFormat2 } from "intl-messageformat";
|
|
1563
1522
|
import { NumericFormat } from "react-number-format";
|
|
1564
1523
|
|
|
1565
1524
|
// src/components/Input/Input.tsx
|
|
1566
|
-
import
|
|
1525
|
+
import React14, { useCallback as useCallback5, useState as useState4 } from "react";
|
|
1567
1526
|
import { Input as JoyInput } from "@mui/joy";
|
|
1568
|
-
import { motion as
|
|
1527
|
+
import { motion as motion15 } from "framer-motion";
|
|
1569
1528
|
import ClearIcon from "@mui/icons-material/Close";
|
|
1570
1529
|
import VisibilityIcon from "@mui/icons-material/Visibility";
|
|
1571
1530
|
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
|
|
1572
|
-
var MotionInput =
|
|
1573
|
-
var Input =
|
|
1531
|
+
var MotionInput = motion15(JoyInput);
|
|
1532
|
+
var Input = React14.forwardRef((props, ref) => {
|
|
1574
1533
|
const {
|
|
1575
1534
|
label,
|
|
1576
1535
|
helperText,
|
|
@@ -1593,11 +1552,11 @@ var Input = React15.forwardRef((props, ref) => {
|
|
|
1593
1552
|
if (type === "password" && innerProps.endDecorator) {
|
|
1594
1553
|
console.warn('Input: endDecorator is not supported when type="password"');
|
|
1595
1554
|
}
|
|
1596
|
-
const [passwordVisible, setPasswordVisible] =
|
|
1555
|
+
const [passwordVisible, setPasswordVisible] = useState4(false);
|
|
1597
1556
|
const [value, setValue] = useControlledState(
|
|
1598
1557
|
props.value,
|
|
1599
1558
|
props.defaultValue,
|
|
1600
|
-
|
|
1559
|
+
useCallback5(
|
|
1601
1560
|
(value2) => {
|
|
1602
1561
|
onChange?.({
|
|
1603
1562
|
/**
|
|
@@ -1623,7 +1582,7 @@ var Input = React15.forwardRef((props, ref) => {
|
|
|
1623
1582
|
const actualType = type === "password" && passwordVisible ? "text" : type;
|
|
1624
1583
|
const isPasswordType = type === "password";
|
|
1625
1584
|
const showPasswordToggle = isPasswordType && !disableTogglePasswordButton;
|
|
1626
|
-
const input = /* @__PURE__ */
|
|
1585
|
+
const input = /* @__PURE__ */ React14.createElement(
|
|
1627
1586
|
MotionInput,
|
|
1628
1587
|
{
|
|
1629
1588
|
value,
|
|
@@ -1638,7 +1597,7 @@ var Input = React15.forwardRef((props, ref) => {
|
|
|
1638
1597
|
...innerProps.slotProps
|
|
1639
1598
|
},
|
|
1640
1599
|
...innerProps,
|
|
1641
|
-
endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */
|
|
1600
|
+
endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */ React14.createElement(Stack_default, { gap: 1, direction: "row" }, /* @__PURE__ */ React14.createElement(
|
|
1642
1601
|
IconButton_default,
|
|
1643
1602
|
{
|
|
1644
1603
|
onMouseDown: (e) => e.preventDefault(),
|
|
@@ -1646,19 +1605,19 @@ var Input = React15.forwardRef((props, ref) => {
|
|
|
1646
1605
|
disabled,
|
|
1647
1606
|
"aria-label": passwordVisible ? "Hide password" : "Show password"
|
|
1648
1607
|
},
|
|
1649
|
-
passwordVisible ? /* @__PURE__ */
|
|
1650
|
-
)) : null : enableClearable ? /* @__PURE__ */
|
|
1608
|
+
passwordVisible ? /* @__PURE__ */ React14.createElement(VisibilityOffIcon, null) : /* @__PURE__ */ React14.createElement(VisibilityIcon, null)
|
|
1609
|
+
)) : null : enableClearable ? /* @__PURE__ */ React14.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ React14.createElement(
|
|
1651
1610
|
IconButton_default,
|
|
1652
1611
|
{
|
|
1653
1612
|
onMouseDown: (e) => e.preventDefault(),
|
|
1654
1613
|
onClick: handleClear,
|
|
1655
1614
|
"aria-label": "Clear"
|
|
1656
1615
|
},
|
|
1657
|
-
/* @__PURE__ */
|
|
1616
|
+
/* @__PURE__ */ React14.createElement(ClearIcon, null)
|
|
1658
1617
|
)) : innerProps.endDecorator
|
|
1659
1618
|
}
|
|
1660
1619
|
);
|
|
1661
|
-
return /* @__PURE__ */
|
|
1620
|
+
return /* @__PURE__ */ React14.createElement(
|
|
1662
1621
|
FormControl_default,
|
|
1663
1622
|
{
|
|
1664
1623
|
required,
|
|
@@ -1669,9 +1628,9 @@ var Input = React15.forwardRef((props, ref) => {
|
|
|
1669
1628
|
sx,
|
|
1670
1629
|
className
|
|
1671
1630
|
},
|
|
1672
|
-
label && /* @__PURE__ */
|
|
1631
|
+
label && /* @__PURE__ */ React14.createElement(FormLabel_default, null, label),
|
|
1673
1632
|
input,
|
|
1674
|
-
helperText && /* @__PURE__ */
|
|
1633
|
+
helperText && /* @__PURE__ */ React14.createElement(FormHelperText_default, null, helperText)
|
|
1675
1634
|
);
|
|
1676
1635
|
});
|
|
1677
1636
|
Input.displayName = "Input";
|
|
@@ -1683,6 +1642,7 @@ var Input_default = Input;
|
|
|
1683
1642
|
import { styled as styled7, useThemeProps as useThemeProps3 } from "@mui/joy";
|
|
1684
1643
|
|
|
1685
1644
|
// src/components/CurrencyInput/hooks/use-currency-setting.ts
|
|
1645
|
+
import IntlMessageFormat from "intl-messageformat";
|
|
1686
1646
|
var CURRENCY_DECIMAL_MAP = {
|
|
1687
1647
|
AED: 2,
|
|
1688
1648
|
ALL: 2,
|
|
@@ -1827,10 +1787,9 @@ var CURRENCY_DECIMAL_MAP = {
|
|
|
1827
1787
|
};
|
|
1828
1788
|
var useCurrencySetting = (props) => {
|
|
1829
1789
|
const { currency = "USD", placeholder } = props;
|
|
1830
|
-
const
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
const decimalSeparator = parts.find((p) => p.type === "decimal")?.value;
|
|
1790
|
+
const [symbol, thousandSeparator, decimalSeparator, ...rest] = new IntlMessageFormat(
|
|
1791
|
+
`{amount, number, ::currency/${currency} unit-width-narrow}`
|
|
1792
|
+
).format({ amount: 1e3 }).toString().replace(/\d/g, "").split("");
|
|
1834
1793
|
const decimalScale = CURRENCY_DECIMAL_MAP[currency];
|
|
1835
1794
|
return {
|
|
1836
1795
|
symbol: `${symbol} `,
|
|
@@ -1843,9 +1802,9 @@ var useCurrencySetting = (props) => {
|
|
|
1843
1802
|
};
|
|
1844
1803
|
|
|
1845
1804
|
// src/components/CurrencyInput/CurrencyInput.tsx
|
|
1846
|
-
var TextMaskAdapter =
|
|
1805
|
+
var TextMaskAdapter = React15.forwardRef(function TextMaskAdapter2(props, ref) {
|
|
1847
1806
|
const { onChange, ...innerProps } = props;
|
|
1848
|
-
return /* @__PURE__ */
|
|
1807
|
+
return /* @__PURE__ */ React15.createElement(
|
|
1849
1808
|
NumericFormat,
|
|
1850
1809
|
{
|
|
1851
1810
|
...innerProps,
|
|
@@ -1865,7 +1824,7 @@ var CurrencyInputRoot = styled7(Input_default, {
|
|
|
1865
1824
|
slot: "root",
|
|
1866
1825
|
overridesResolver: (props, styles) => styles.root
|
|
1867
1826
|
})({});
|
|
1868
|
-
var CurrencyInput =
|
|
1827
|
+
var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
1869
1828
|
const props = useThemeProps3({ props: inProps, name: "CurrencyInput" });
|
|
1870
1829
|
const {
|
|
1871
1830
|
currency = "USD",
|
|
@@ -1886,7 +1845,7 @@ var CurrencyInput = React16.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1886
1845
|
const [_value, setValue] = useControlledState(
|
|
1887
1846
|
props.value,
|
|
1888
1847
|
props.defaultValue,
|
|
1889
|
-
|
|
1848
|
+
useCallback6((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
|
|
1890
1849
|
);
|
|
1891
1850
|
const value = useMemo5(() => {
|
|
1892
1851
|
if (_value && useMinorUnit) {
|
|
@@ -1900,14 +1859,14 @@ var CurrencyInput = React16.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1900
1859
|
}
|
|
1901
1860
|
return props.max;
|
|
1902
1861
|
}, [props.max, useMinorUnit, decimalScale]);
|
|
1903
|
-
const [isOverLimit, setIsOverLimit] =
|
|
1904
|
-
const handleChange =
|
|
1862
|
+
const [isOverLimit, setIsOverLimit] = useState5(!!max && !!value && value > max);
|
|
1863
|
+
const handleChange = useCallback6(
|
|
1905
1864
|
(event) => {
|
|
1906
1865
|
if (event.target.value === "") {
|
|
1907
1866
|
setValue(void 0);
|
|
1908
1867
|
return;
|
|
1909
1868
|
}
|
|
1910
|
-
const amount = useMinorUnit ? Number(
|
|
1869
|
+
const amount = useMinorUnit ? Number(event.target.value?.replace(decimalSeparator, "")) : Number(event.target.value);
|
|
1911
1870
|
if (!!max && Number(event.target.value) > max) {
|
|
1912
1871
|
setIsOverLimit(true);
|
|
1913
1872
|
} else {
|
|
@@ -1917,7 +1876,7 @@ var CurrencyInput = React16.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1917
1876
|
},
|
|
1918
1877
|
[decimalSeparator, max, useMinorUnit, setValue]
|
|
1919
1878
|
);
|
|
1920
|
-
return /* @__PURE__ */
|
|
1879
|
+
return /* @__PURE__ */ React15.createElement(
|
|
1921
1880
|
CurrencyInputRoot,
|
|
1922
1881
|
{
|
|
1923
1882
|
...innerProps,
|
|
@@ -1930,7 +1889,9 @@ var CurrencyInput = React16.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1930
1889
|
required,
|
|
1931
1890
|
color: error || isOverLimit ? "danger" : props.color,
|
|
1932
1891
|
label,
|
|
1933
|
-
helperText: isOverLimit ? `limit:
|
|
1892
|
+
helperText: isOverLimit ? new IntlMessageFormat2(`limit: {amount, number, ::currency/${currency} unit-width-narrow}`).format({
|
|
1893
|
+
amount: max
|
|
1894
|
+
}) : helperText,
|
|
1934
1895
|
slotProps: {
|
|
1935
1896
|
input: {
|
|
1936
1897
|
component: TextMaskAdapter,
|
|
@@ -1955,9 +1916,9 @@ var CurrencyInput_default = CurrencyInput;
|
|
|
1955
1916
|
|
|
1956
1917
|
// src/components/DataTable/DataTable.tsx
|
|
1957
1918
|
import React25, {
|
|
1958
|
-
useCallback as
|
|
1919
|
+
useCallback as useCallback11,
|
|
1959
1920
|
useMemo as useMemo10,
|
|
1960
|
-
useRef as
|
|
1921
|
+
useRef as useRef6,
|
|
1961
1922
|
useId,
|
|
1962
1923
|
forwardRef as forwardRef7,
|
|
1963
1924
|
useImperativeHandle as useImperativeHandle2,
|
|
@@ -2112,6 +2073,15 @@ function calculateColumnGroups(columnGroupingModel, columns, visibleFields) {
|
|
|
2112
2073
|
const correctedMaxLevel = filteredGroupsByLevel.length > 0 ? filteredGroupsByLevel.length - 1 : -1;
|
|
2113
2074
|
return { groups: filteredGroupsByLevel, maxLevel: correctedMaxLevel, fieldsInGroupingModel };
|
|
2114
2075
|
}
|
|
2076
|
+
function parsePxValue(value) {
|
|
2077
|
+
if (!value) return null;
|
|
2078
|
+
const trimmed = value.trim();
|
|
2079
|
+
if (trimmed.endsWith("px")) {
|
|
2080
|
+
const num = parseFloat(trimmed);
|
|
2081
|
+
return isNaN(num) ? null : num;
|
|
2082
|
+
}
|
|
2083
|
+
return null;
|
|
2084
|
+
}
|
|
2115
2085
|
function getTextAlign(props) {
|
|
2116
2086
|
return !props.editMode && ["number", "date", "currency"].includes(props.type || "") ? "end" : "start";
|
|
2117
2087
|
}
|
|
@@ -2183,9 +2153,9 @@ function computeAutoFitWidth(params) {
|
|
|
2183
2153
|
}
|
|
2184
2154
|
|
|
2185
2155
|
// src/components/DataTable/styled.tsx
|
|
2186
|
-
import
|
|
2156
|
+
import React16 from "react";
|
|
2187
2157
|
import { styled as styled8, LinearProgress, buttonClasses, iconButtonClasses, Typography as Typography3 } from "@mui/joy";
|
|
2188
|
-
import { motion as
|
|
2158
|
+
import { motion as motion16 } from "framer-motion";
|
|
2189
2159
|
import SortIcon from "@mui/icons-material/ArrowUpwardRounded";
|
|
2190
2160
|
var EllipsisDiv = styled8("div", {
|
|
2191
2161
|
name: "DataTable",
|
|
@@ -2269,7 +2239,7 @@ var Asterisk = styled8("span", {
|
|
|
2269
2239
|
color: "var(--ceed-palette-danger-500)",
|
|
2270
2240
|
marginLeft: theme.spacing(0.5)
|
|
2271
2241
|
}));
|
|
2272
|
-
var StyledTh = styled8(
|
|
2242
|
+
var StyledTh = styled8(motion16.th)(({ theme }) => ({
|
|
2273
2243
|
boxShadow: "1px 0 var(--TableCell-borderColor)"
|
|
2274
2244
|
}));
|
|
2275
2245
|
var StyledTd = styled8("td")(({ theme }) => ({
|
|
@@ -2288,10 +2258,10 @@ var StyledTd = styled8("td")(({ theme }) => ({
|
|
|
2288
2258
|
}
|
|
2289
2259
|
}
|
|
2290
2260
|
}));
|
|
2291
|
-
var MotionSortIcon =
|
|
2292
|
-
var DefaultLoadingOverlay = () => /* @__PURE__ */
|
|
2293
|
-
var DefaultNoRowsOverlay = () => /* @__PURE__ */
|
|
2294
|
-
var Resizer = (ref, targetRef = ref, onResizeStateChange, onAutoFit) => /* @__PURE__ */
|
|
2261
|
+
var MotionSortIcon = motion16(SortIcon);
|
|
2262
|
+
var DefaultLoadingOverlay = () => /* @__PURE__ */ React16.createElement(LinearProgress, { value: 8, variant: "plain" });
|
|
2263
|
+
var DefaultNoRowsOverlay = () => /* @__PURE__ */ React16.createElement(Typography3, { level: "body-sm", textColor: "text.tertiary" }, "No rows");
|
|
2264
|
+
var Resizer = (ref, targetRef = ref, onResizeStateChange, onAutoFit) => /* @__PURE__ */ React16.createElement(
|
|
2295
2265
|
Box_default,
|
|
2296
2266
|
{
|
|
2297
2267
|
sx: {
|
|
@@ -2369,12 +2339,12 @@ var Resizer = (ref, targetRef = ref, onResizeStateChange, onAutoFit) => /* @__PU
|
|
|
2369
2339
|
|
|
2370
2340
|
// src/components/DataTable/components.tsx
|
|
2371
2341
|
import React22, {
|
|
2372
|
-
useRef as
|
|
2373
|
-
useState as
|
|
2342
|
+
useRef as useRef4,
|
|
2343
|
+
useState as useState7,
|
|
2374
2344
|
useLayoutEffect,
|
|
2375
2345
|
useMemo as useMemo8,
|
|
2376
|
-
useCallback as
|
|
2377
|
-
useEffect as
|
|
2346
|
+
useCallback as useCallback8,
|
|
2347
|
+
useEffect as useEffect4,
|
|
2378
2348
|
memo,
|
|
2379
2349
|
createElement
|
|
2380
2350
|
} from "react";
|
|
@@ -2382,7 +2352,7 @@ import { styled as styled12, useTheme } from "@mui/joy";
|
|
|
2382
2352
|
import { AnimatePresence as AnimatePresence2 } from "framer-motion";
|
|
2383
2353
|
|
|
2384
2354
|
// src/components/DatePicker/DatePicker.tsx
|
|
2385
|
-
import
|
|
2355
|
+
import React17, { forwardRef as forwardRef6, useCallback as useCallback7, useEffect as useEffect3, useImperativeHandle, useRef as useRef3, useState as useState6 } from "react";
|
|
2386
2356
|
import { IMaskInput, IMask } from "react-imask";
|
|
2387
2357
|
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
|
|
2388
2358
|
import { styled as styled10, useThemeProps as useThemeProps4 } from "@mui/joy";
|
|
@@ -2397,8 +2367,8 @@ var Sheet_default = Sheet;
|
|
|
2397
2367
|
|
|
2398
2368
|
// src/components/DialogActions/DialogActions.tsx
|
|
2399
2369
|
import { DialogActions as JoyDialogActions, styled as styled9 } from "@mui/joy";
|
|
2400
|
-
import { motion as
|
|
2401
|
-
var MotionDialogActions =
|
|
2370
|
+
import { motion as motion17 } from "framer-motion";
|
|
2371
|
+
var MotionDialogActions = motion17(JoyDialogActions);
|
|
2402
2372
|
var StyledDialogActions = styled9(MotionDialogActions)(({ theme }) => ({
|
|
2403
2373
|
padding: theme.spacing(2),
|
|
2404
2374
|
gap: theme.spacing(2),
|
|
@@ -2494,9 +2464,9 @@ function parseDate(dateString, format) {
|
|
|
2494
2464
|
var formatToPattern = (format) => {
|
|
2495
2465
|
return format.replace(/YYYY/g, "Y").replace(/MM/g, "M").replace(/DD/g, "D").replace(/[^YMD\s]/g, (match) => `${match}\``);
|
|
2496
2466
|
};
|
|
2497
|
-
var TextMaskAdapter3 =
|
|
2467
|
+
var TextMaskAdapter3 = React17.forwardRef(function TextMaskAdapter4(props, ref) {
|
|
2498
2468
|
const { onChange, format, ...other } = props;
|
|
2499
|
-
return /* @__PURE__ */
|
|
2469
|
+
return /* @__PURE__ */ React17.createElement(
|
|
2500
2470
|
IMaskInput,
|
|
2501
2471
|
{
|
|
2502
2472
|
...other,
|
|
@@ -2556,24 +2526,24 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2556
2526
|
shouldDisableDate,
|
|
2557
2527
|
...innerProps
|
|
2558
2528
|
} = props;
|
|
2559
|
-
const innerRef =
|
|
2560
|
-
const buttonRef =
|
|
2529
|
+
const innerRef = useRef3(null);
|
|
2530
|
+
const buttonRef = useRef3(null);
|
|
2561
2531
|
const [value, setValue] = useControlledState(
|
|
2562
2532
|
props.value,
|
|
2563
2533
|
props.defaultValue || "",
|
|
2564
|
-
|
|
2534
|
+
useCallback7((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
2565
2535
|
);
|
|
2566
|
-
const [displayValue, setDisplayValue] =
|
|
2536
|
+
const [displayValue, setDisplayValue] = useState6(
|
|
2567
2537
|
() => value ? formatValueString(parseDate(value, format), displayFormat) : ""
|
|
2568
2538
|
);
|
|
2569
|
-
const [anchorEl, setAnchorEl] =
|
|
2539
|
+
const [anchorEl, setAnchorEl] = useState6(null);
|
|
2570
2540
|
const open = Boolean(anchorEl);
|
|
2571
|
-
|
|
2541
|
+
useEffect3(() => {
|
|
2572
2542
|
if (!anchorEl) {
|
|
2573
2543
|
innerRef.current?.blur();
|
|
2574
2544
|
}
|
|
2575
2545
|
}, [anchorEl, innerRef]);
|
|
2576
|
-
|
|
2546
|
+
useEffect3(() => {
|
|
2577
2547
|
if (value === "") {
|
|
2578
2548
|
setDisplayValue("");
|
|
2579
2549
|
return;
|
|
@@ -2584,7 +2554,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2584
2554
|
}
|
|
2585
2555
|
}, [displayFormat, displayValue, format, value]);
|
|
2586
2556
|
useImperativeHandle(ref, () => innerRef.current, [innerRef]);
|
|
2587
|
-
const handleChange =
|
|
2557
|
+
const handleChange = useCallback7(
|
|
2588
2558
|
(event) => {
|
|
2589
2559
|
const value2 = event.target.value;
|
|
2590
2560
|
setDisplayValue(value2 ? formatValueString(parseDate(value2, format), displayFormat) : value2);
|
|
@@ -2592,7 +2562,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2592
2562
|
},
|
|
2593
2563
|
[displayFormat, format, setValue]
|
|
2594
2564
|
);
|
|
2595
|
-
const handleDisplayInputChange =
|
|
2565
|
+
const handleDisplayInputChange = useCallback7(
|
|
2596
2566
|
(event) => {
|
|
2597
2567
|
if (event.target.value === "") {
|
|
2598
2568
|
handleChange({
|
|
@@ -2617,7 +2587,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2617
2587
|
},
|
|
2618
2588
|
[displayFormat, format, handleChange, props.name]
|
|
2619
2589
|
);
|
|
2620
|
-
const handleCalendarToggle =
|
|
2590
|
+
const handleCalendarToggle = useCallback7(
|
|
2621
2591
|
(event) => {
|
|
2622
2592
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
2623
2593
|
setTimeout(() => {
|
|
@@ -2626,7 +2596,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2626
2596
|
},
|
|
2627
2597
|
[anchorEl, setAnchorEl, innerRef]
|
|
2628
2598
|
);
|
|
2629
|
-
const handleInputMouseDown =
|
|
2599
|
+
const handleInputMouseDown = useCallback7(
|
|
2630
2600
|
(event) => {
|
|
2631
2601
|
if (inputReadOnly) {
|
|
2632
2602
|
event.preventDefault();
|
|
@@ -2635,7 +2605,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2635
2605
|
},
|
|
2636
2606
|
[inputReadOnly, buttonRef]
|
|
2637
2607
|
);
|
|
2638
|
-
return /* @__PURE__ */
|
|
2608
|
+
return /* @__PURE__ */ React17.createElement(DatePickerRoot, null, /* @__PURE__ */ React17.createElement(FocusTrap, { open: true }, /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
|
|
2639
2609
|
Input_default,
|
|
2640
2610
|
{
|
|
2641
2611
|
...innerProps,
|
|
@@ -2663,7 +2633,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2663
2633
|
},
|
|
2664
2634
|
className,
|
|
2665
2635
|
sx,
|
|
2666
|
-
endDecorator: /* @__PURE__ */
|
|
2636
|
+
endDecorator: /* @__PURE__ */ React17.createElement(
|
|
2667
2637
|
CalendarButton,
|
|
2668
2638
|
{
|
|
2669
2639
|
ref: buttonRef,
|
|
@@ -2675,13 +2645,13 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2675
2645
|
"aria-expanded": open,
|
|
2676
2646
|
disabled
|
|
2677
2647
|
},
|
|
2678
|
-
/* @__PURE__ */
|
|
2648
|
+
/* @__PURE__ */ React17.createElement(CalendarTodayIcon, null)
|
|
2679
2649
|
),
|
|
2680
2650
|
label,
|
|
2681
2651
|
helperText,
|
|
2682
2652
|
readOnly: readOnly || inputReadOnly
|
|
2683
2653
|
}
|
|
2684
|
-
), open && /* @__PURE__ */
|
|
2654
|
+
), open && /* @__PURE__ */ React17.createElement(ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React17.createElement(
|
|
2685
2655
|
StyledPopper,
|
|
2686
2656
|
{
|
|
2687
2657
|
id: "date-picker-popper",
|
|
@@ -2700,7 +2670,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2700
2670
|
"aria-label": "Calendar Tooltip",
|
|
2701
2671
|
"aria-expanded": open
|
|
2702
2672
|
},
|
|
2703
|
-
/* @__PURE__ */
|
|
2673
|
+
/* @__PURE__ */ React17.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React17.createElement(
|
|
2704
2674
|
Calendar_default,
|
|
2705
2675
|
{
|
|
2706
2676
|
value: value && !Number.isNaN(parseDate(value, format).getTime()) ? [parseDate(value, format), void 0] : void 0,
|
|
@@ -2719,14 +2689,14 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2719
2689
|
disablePast,
|
|
2720
2690
|
shouldDisableDate: shouldDisableDate ? (date) => shouldDisableDate(formatValueString(date, format)) : void 0
|
|
2721
2691
|
}
|
|
2722
|
-
), !hideClearButton && /* @__PURE__ */
|
|
2692
|
+
), !hideClearButton && /* @__PURE__ */ React17.createElement(
|
|
2723
2693
|
DialogActions_default,
|
|
2724
2694
|
{
|
|
2725
2695
|
sx: {
|
|
2726
2696
|
p: 1
|
|
2727
2697
|
}
|
|
2728
2698
|
},
|
|
2729
|
-
/* @__PURE__ */
|
|
2699
|
+
/* @__PURE__ */ React17.createElement(
|
|
2730
2700
|
Button_default,
|
|
2731
2701
|
{
|
|
2732
2702
|
size,
|
|
@@ -2752,10 +2722,10 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2752
2722
|
var DatePicker_default = DatePicker;
|
|
2753
2723
|
|
|
2754
2724
|
// src/components/Textarea/Textarea.tsx
|
|
2755
|
-
import
|
|
2725
|
+
import React18 from "react";
|
|
2756
2726
|
import { Textarea as JoyTextarea } from "@mui/joy";
|
|
2757
|
-
import { motion as
|
|
2758
|
-
var MotionTextarea =
|
|
2727
|
+
import { motion as motion18 } from "framer-motion";
|
|
2728
|
+
var MotionTextarea = motion18(JoyTextarea);
|
|
2759
2729
|
var Textarea = (props) => {
|
|
2760
2730
|
const {
|
|
2761
2731
|
label,
|
|
@@ -2772,7 +2742,7 @@ var Textarea = (props) => {
|
|
|
2772
2742
|
className,
|
|
2773
2743
|
...innerProps
|
|
2774
2744
|
} = props;
|
|
2775
|
-
const textarea = /* @__PURE__ */
|
|
2745
|
+
const textarea = /* @__PURE__ */ React18.createElement(
|
|
2776
2746
|
MotionTextarea,
|
|
2777
2747
|
{
|
|
2778
2748
|
required,
|
|
@@ -2784,7 +2754,7 @@ var Textarea = (props) => {
|
|
|
2784
2754
|
...innerProps
|
|
2785
2755
|
}
|
|
2786
2756
|
);
|
|
2787
|
-
return /* @__PURE__ */
|
|
2757
|
+
return /* @__PURE__ */ React18.createElement(
|
|
2788
2758
|
FormControl_default,
|
|
2789
2759
|
{
|
|
2790
2760
|
required,
|
|
@@ -2795,9 +2765,9 @@ var Textarea = (props) => {
|
|
|
2795
2765
|
sx,
|
|
2796
2766
|
className
|
|
2797
2767
|
},
|
|
2798
|
-
label && /* @__PURE__ */
|
|
2768
|
+
label && /* @__PURE__ */ React18.createElement(FormLabel_default, null, label),
|
|
2799
2769
|
textarea,
|
|
2800
|
-
helperText && /* @__PURE__ */
|
|
2770
|
+
helperText && /* @__PURE__ */ React18.createElement(FormHelperText_default, null, helperText)
|
|
2801
2771
|
);
|
|
2802
2772
|
};
|
|
2803
2773
|
Textarea.displayName = "Textarea";
|
|
@@ -2806,10 +2776,10 @@ Textarea.displayName = "Textarea";
|
|
|
2806
2776
|
var Textarea_default = Textarea;
|
|
2807
2777
|
|
|
2808
2778
|
// src/components/Select/Select.tsx
|
|
2809
|
-
import
|
|
2779
|
+
import React19, { useMemo as useMemo7 } from "react";
|
|
2810
2780
|
import { Select as JoySelect, Option as JoyOption, ListItemContent as ListItemContent2, Typography as Typography4 } from "@mui/joy";
|
|
2811
|
-
import { motion as
|
|
2812
|
-
var MotionOption =
|
|
2781
|
+
import { motion as motion19 } from "framer-motion";
|
|
2782
|
+
var MotionOption = motion19(JoyOption);
|
|
2813
2783
|
var Option = MotionOption;
|
|
2814
2784
|
var secondaryTextLevelMap2 = {
|
|
2815
2785
|
sm: "body-xs",
|
|
@@ -2864,7 +2834,7 @@ function Select(props) {
|
|
|
2864
2834
|
});
|
|
2865
2835
|
return map;
|
|
2866
2836
|
}, [options]);
|
|
2867
|
-
const select = /* @__PURE__ */
|
|
2837
|
+
const select = /* @__PURE__ */ React19.createElement(
|
|
2868
2838
|
JoySelect,
|
|
2869
2839
|
{
|
|
2870
2840
|
...innerProps,
|
|
@@ -2881,9 +2851,9 @@ function Select(props) {
|
|
|
2881
2851
|
return optionMap.get(selected.value)?.label;
|
|
2882
2852
|
}
|
|
2883
2853
|
},
|
|
2884
|
-
options.map((option) => /* @__PURE__ */
|
|
2854
|
+
options.map((option) => /* @__PURE__ */ React19.createElement(Option, { key: option.value, value: option.value, disabled: option.disabled }, option.secondaryText ? /* @__PURE__ */ React19.createElement(ListItemContent2, { sx: { gap: 0.5 } }, /* @__PURE__ */ React19.createElement(Typography4, { level: "inherit" }, option.label), /* @__PURE__ */ React19.createElement(Typography4, { level: secondaryTextLevelMap2[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : option.label))
|
|
2885
2855
|
);
|
|
2886
|
-
return /* @__PURE__ */
|
|
2856
|
+
return /* @__PURE__ */ React19.createElement(
|
|
2887
2857
|
FormControl_default,
|
|
2888
2858
|
{
|
|
2889
2859
|
required,
|
|
@@ -2894,9 +2864,9 @@ function Select(props) {
|
|
|
2894
2864
|
sx,
|
|
2895
2865
|
className
|
|
2896
2866
|
},
|
|
2897
|
-
label && /* @__PURE__ */
|
|
2867
|
+
label && /* @__PURE__ */ React19.createElement(FormLabel_default, null, label),
|
|
2898
2868
|
select,
|
|
2899
|
-
helperText && /* @__PURE__ */
|
|
2869
|
+
helperText && /* @__PURE__ */ React19.createElement(FormHelperText_default, null, helperText)
|
|
2900
2870
|
);
|
|
2901
2871
|
}
|
|
2902
2872
|
Select.displayName = "Select";
|
|
@@ -2907,6 +2877,19 @@ var Select_default = Select;
|
|
|
2907
2877
|
// src/components/DataTable/components.tsx
|
|
2908
2878
|
import { Link } from "@mui/joy";
|
|
2909
2879
|
|
|
2880
|
+
// src/components/Tooltip/Tooltip.tsx
|
|
2881
|
+
import React20 from "react";
|
|
2882
|
+
import { Tooltip as JoyTooltip } from "@mui/joy";
|
|
2883
|
+
import { motion as motion20 } from "framer-motion";
|
|
2884
|
+
var MotionTooltip = motion20(JoyTooltip);
|
|
2885
|
+
var Tooltip = (props) => {
|
|
2886
|
+
return /* @__PURE__ */ React20.createElement(MotionTooltip, { ...props });
|
|
2887
|
+
};
|
|
2888
|
+
Tooltip.displayName = "Tooltip";
|
|
2889
|
+
|
|
2890
|
+
// src/components/Tooltip/index.ts
|
|
2891
|
+
var Tooltip_default = Tooltip;
|
|
2892
|
+
|
|
2910
2893
|
// src/components/InfoSign/InfoSign.tsx
|
|
2911
2894
|
import React21 from "react";
|
|
2912
2895
|
import { styled as styled11, tooltipClasses } from "@mui/joy";
|
|
@@ -2946,8 +2929,8 @@ var TextEllipsis = ({
|
|
|
2946
2929
|
lineClamp,
|
|
2947
2930
|
...rest
|
|
2948
2931
|
}) => {
|
|
2949
|
-
const textRef =
|
|
2950
|
-
const [showTooltip, setShowTooltip] =
|
|
2932
|
+
const textRef = useRef4(null);
|
|
2933
|
+
const [showTooltip, setShowTooltip] = useState7(false);
|
|
2951
2934
|
useLayoutEffect(() => {
|
|
2952
2935
|
const element = textRef.current;
|
|
2953
2936
|
if (!element) return;
|
|
@@ -2963,8 +2946,8 @@ var TextEllipsis = ({
|
|
|
2963
2946
|
return /* @__PURE__ */ React22.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top" }, /* @__PURE__ */ React22.createElement(EllipsisDiv, { ref: textRef, lineClamp, ...rest }, children));
|
|
2964
2947
|
};
|
|
2965
2948
|
var CellTextEllipsis = ({ children }) => {
|
|
2966
|
-
const textRef =
|
|
2967
|
-
const [showTooltip, setShowTooltip] =
|
|
2949
|
+
const textRef = useRef4(null);
|
|
2950
|
+
const [showTooltip, setShowTooltip] = useState7(false);
|
|
2968
2951
|
useLayoutEffect(() => {
|
|
2969
2952
|
const element = textRef.current;
|
|
2970
2953
|
if (element) {
|
|
@@ -3018,17 +3001,17 @@ var HeadCell = (props) => {
|
|
|
3018
3001
|
const theme = useTheme();
|
|
3019
3002
|
const ref = headerRef;
|
|
3020
3003
|
const colRef = tableColRef;
|
|
3021
|
-
const localRef =
|
|
3004
|
+
const localRef = useRef4(null);
|
|
3022
3005
|
useLayoutEffect(() => {
|
|
3023
3006
|
ref.current = localRef.current;
|
|
3024
3007
|
}, [ref]);
|
|
3025
|
-
const [isHovered, setIsHovered] =
|
|
3008
|
+
const [isHovered, setIsHovered] = useState7(false);
|
|
3026
3009
|
const sortable = type === "actions" ? false : _sortable;
|
|
3027
3010
|
const headId = useMemo8(
|
|
3028
3011
|
() => `${tableId}_header_${headerName ?? field}`.trim(),
|
|
3029
3012
|
[tableId, headerName, field]
|
|
3030
3013
|
);
|
|
3031
|
-
const isResizingRef =
|
|
3014
|
+
const isResizingRef = useRef4(false);
|
|
3032
3015
|
const resizer = useMemo8(
|
|
3033
3016
|
() => resizable ?? true ? Resizer(
|
|
3034
3017
|
ref,
|
|
@@ -3112,7 +3095,7 @@ var HeadCell = (props) => {
|
|
|
3112
3095
|
ref: localRef,
|
|
3113
3096
|
key: field,
|
|
3114
3097
|
style,
|
|
3115
|
-
onClick:
|
|
3098
|
+
onClick: useCallback8(
|
|
3116
3099
|
(e) => {
|
|
3117
3100
|
if (isResizingRef.current) return;
|
|
3118
3101
|
if (!(e.target instanceof Element) || !e.currentTarget.contains(e.target)) return;
|
|
@@ -3151,8 +3134,8 @@ var BodyCell = (props) => {
|
|
|
3151
3134
|
onCellEditStop
|
|
3152
3135
|
} = props;
|
|
3153
3136
|
const theme = useTheme();
|
|
3154
|
-
const [value, setValue] =
|
|
3155
|
-
const cellRef =
|
|
3137
|
+
const [value, setValue] = useState7(row[field]);
|
|
3138
|
+
const cellRef = useRef4(null);
|
|
3156
3139
|
const params = useMemo8(
|
|
3157
3140
|
() => ({
|
|
3158
3141
|
row,
|
|
@@ -3297,7 +3280,7 @@ var BodyCell = (props) => {
|
|
|
3297
3280
|
() => (typeof cellClassName === "function" ? cellClassName(params) : cellClassName) || "",
|
|
3298
3281
|
[cellClassName, params]
|
|
3299
3282
|
);
|
|
3300
|
-
|
|
3283
|
+
useEffect4(() => {
|
|
3301
3284
|
setValue(row[field]);
|
|
3302
3285
|
}, [row, field]);
|
|
3303
3286
|
return /* @__PURE__ */ React22.createElement(
|
|
@@ -3367,10 +3350,10 @@ var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
|
|
|
3367
3350
|
});
|
|
3368
3351
|
|
|
3369
3352
|
// src/components/DataTable/hooks.ts
|
|
3370
|
-
import { useState as
|
|
3353
|
+
import { useState as useState8, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useMemo as useMemo9, useCallback as useCallback9, useEffect as useEffect5, createRef } from "react";
|
|
3371
3354
|
function useColumnWidths(columnsByField) {
|
|
3372
|
-
const [widths, setWidths] =
|
|
3373
|
-
const roRef =
|
|
3355
|
+
const [widths, setWidths] = useState8({});
|
|
3356
|
+
const roRef = useRef5();
|
|
3374
3357
|
useLayoutEffect2(() => {
|
|
3375
3358
|
if (roRef.current) roRef.current.disconnect();
|
|
3376
3359
|
roRef.current = new ResizeObserver((entries) => {
|
|
@@ -3420,26 +3403,27 @@ function useDataTableRenderer({
|
|
|
3420
3403
|
isRowSelectable,
|
|
3421
3404
|
columnGroupingModel,
|
|
3422
3405
|
columnVisibilityModel,
|
|
3423
|
-
onColumnVisibilityModelChange
|
|
3406
|
+
onColumnVisibilityModelChange,
|
|
3407
|
+
checkboxSelection
|
|
3424
3408
|
}) {
|
|
3425
3409
|
if (pinnedColumns && columnGroupingModel) {
|
|
3426
3410
|
throw new Error(
|
|
3427
3411
|
"You cannot use both `pinnedColumns` and `columnGroupingModel` at the same time. Please choose one of them."
|
|
3428
3412
|
);
|
|
3429
3413
|
}
|
|
3430
|
-
const onSelectionModelChangeRef =
|
|
3414
|
+
const onSelectionModelChangeRef = useRef5(onSelectionModelChange);
|
|
3431
3415
|
onSelectionModelChangeRef.current = onSelectionModelChange;
|
|
3432
|
-
const [focusedRowId, setFocusedRowId] =
|
|
3433
|
-
const [selectionAnchor, setSelectionAnchor] =
|
|
3416
|
+
const [focusedRowId, setFocusedRowId] = useState8(null);
|
|
3417
|
+
const [selectionAnchor, setSelectionAnchor] = useState8(null);
|
|
3434
3418
|
const [sortModel, setSortModel] = useControlledState(
|
|
3435
3419
|
controlledSortModel,
|
|
3436
3420
|
initialState?.sorting?.sortModel ?? [],
|
|
3437
|
-
|
|
3421
|
+
useCallback9((sortModel2) => onSortModelChange?.(sortModel2), [onSortModelChange])
|
|
3438
3422
|
);
|
|
3439
3423
|
const [visibilityModel] = useControlledState(
|
|
3440
3424
|
columnVisibilityModel,
|
|
3441
3425
|
initialState?.columns?.columnVisibilityModel ?? {},
|
|
3442
|
-
|
|
3426
|
+
useCallback9(
|
|
3443
3427
|
(model) => onColumnVisibilityModelChange?.(model),
|
|
3444
3428
|
[onColumnVisibilityModelChange]
|
|
3445
3429
|
)
|
|
@@ -3453,6 +3437,14 @@ function useDataTableRenderer({
|
|
|
3453
3437
|
[reorderedColumns, visibilityModel]
|
|
3454
3438
|
);
|
|
3455
3439
|
const visibleFieldSet = useMemo9(() => new Set(visibleColumns.map((c) => c.field)), [visibleColumns]);
|
|
3440
|
+
const tableMinWidth = useMemo9(() => {
|
|
3441
|
+
const DEFAULT_MIN = 50;
|
|
3442
|
+
let total = checkboxSelection ? 40 : 0;
|
|
3443
|
+
for (const col of visibleColumns) {
|
|
3444
|
+
total += parsePxValue(col.minWidth) ?? parsePxValue(col.width) ?? DEFAULT_MIN;
|
|
3445
|
+
}
|
|
3446
|
+
return total;
|
|
3447
|
+
}, [visibleColumns, checkboxSelection]);
|
|
3456
3448
|
const allColumnsByField = useMemo9(
|
|
3457
3449
|
() => reorderedColumns.reduce(
|
|
3458
3450
|
(acc, curr) => ({
|
|
@@ -3477,7 +3469,7 @@ function useDataTableRenderer({
|
|
|
3477
3469
|
),
|
|
3478
3470
|
[visibleColumns]
|
|
3479
3471
|
);
|
|
3480
|
-
const sortComparator =
|
|
3472
|
+
const sortComparator = useCallback9(
|
|
3481
3473
|
(rowA, rowB) => {
|
|
3482
3474
|
for (const sort of sortModel) {
|
|
3483
3475
|
const { field, sort: direction } = sort;
|
|
@@ -3514,9 +3506,9 @@ function useDataTableRenderer({
|
|
|
3514
3506
|
() => Array.from(new Set(_sortOrder || ["asc", "desc", null])),
|
|
3515
3507
|
[_sortOrder]
|
|
3516
3508
|
);
|
|
3517
|
-
const [page, setPage] =
|
|
3509
|
+
const [page, setPage] = useState8(paginationModel?.page || 1);
|
|
3518
3510
|
const pageSize = paginationModel?.pageSize || 20;
|
|
3519
|
-
const getId =
|
|
3511
|
+
const getId = useCallback9(
|
|
3520
3512
|
(row, index) => _getId?.(row) ?? row.id ?? `${(index || 0) + (page - 1) * pageSize}`,
|
|
3521
3513
|
[_getId, page, pageSize]
|
|
3522
3514
|
);
|
|
@@ -3532,7 +3524,7 @@ function useDataTableRenderer({
|
|
|
3532
3524
|
}),
|
|
3533
3525
|
[dataInPage, isRowSelectable, getId]
|
|
3534
3526
|
);
|
|
3535
|
-
const handleRangeSelection =
|
|
3527
|
+
const handleRangeSelection = useCallback9(
|
|
3536
3528
|
(anchor, targetIndex) => {
|
|
3537
3529
|
const startIndex = Math.min(anchor.rowIndex, targetIndex);
|
|
3538
3530
|
const endIndex = Math.max(anchor.rowIndex, targetIndex);
|
|
@@ -3569,7 +3561,7 @@ function useDataTableRenderer({
|
|
|
3569
3561
|
[_isTotalSelected, selectionModel, selectableRowCount]
|
|
3570
3562
|
);
|
|
3571
3563
|
const columnWidths = useColumnWidths(visibleColumnsByField);
|
|
3572
|
-
const getWidth =
|
|
3564
|
+
const getWidth = useCallback9(
|
|
3573
3565
|
(f) => columnWidths[f] ?? allColumnsByField[f]?.width ?? // Column prop 으로 지정된 width
|
|
3574
3566
|
allColumnsByField[f]?.minWidth ?? 0,
|
|
3575
3567
|
[columnWidths, allColumnsByField]
|
|
@@ -3621,14 +3613,14 @@ function useDataTableRenderer({
|
|
|
3621
3613
|
sortOrder,
|
|
3622
3614
|
getWidth
|
|
3623
3615
|
]);
|
|
3624
|
-
const handlePageChange =
|
|
3616
|
+
const handlePageChange = useCallback9(
|
|
3625
3617
|
(newPage) => {
|
|
3626
3618
|
setPage(newPage);
|
|
3627
3619
|
onPaginationModelChange?.({ page: newPage, pageSize });
|
|
3628
3620
|
},
|
|
3629
3621
|
[onPaginationModelChange, pageSize]
|
|
3630
3622
|
);
|
|
3631
|
-
const handleSortChange =
|
|
3623
|
+
const handleSortChange = useCallback9(
|
|
3632
3624
|
(props) => {
|
|
3633
3625
|
const { field, currentSort, multiple } = props;
|
|
3634
3626
|
const column = allColumnsByField[field];
|
|
@@ -3651,29 +3643,29 @@ function useDataTableRenderer({
|
|
|
3651
3643
|
},
|
|
3652
3644
|
[sortOrder, allColumnsByField, sortModel, setSortModel]
|
|
3653
3645
|
);
|
|
3654
|
-
|
|
3646
|
+
useEffect5(() => {
|
|
3655
3647
|
if (!paginationModel) {
|
|
3656
3648
|
handlePageChange(1);
|
|
3657
3649
|
}
|
|
3658
3650
|
}, [rowCount, handlePageChange, paginationModel]);
|
|
3659
|
-
|
|
3651
|
+
useEffect5(() => {
|
|
3660
3652
|
const lastPage = Math.max(1, Math.ceil(rowCount / pageSize));
|
|
3661
3653
|
if (page > lastPage) {
|
|
3662
3654
|
handlePageChange(lastPage);
|
|
3663
3655
|
}
|
|
3664
3656
|
}, [page, rowCount, pageSize, handlePageChange]);
|
|
3665
|
-
|
|
3657
|
+
useEffect5(() => {
|
|
3666
3658
|
onSelectionModelChangeRef.current?.([]);
|
|
3667
3659
|
setSelectionAnchor(null);
|
|
3668
3660
|
}, [page]);
|
|
3669
|
-
const prevRowsRef =
|
|
3670
|
-
|
|
3661
|
+
const prevRowsRef = useRef5(_rows);
|
|
3662
|
+
useEffect5(() => {
|
|
3671
3663
|
if (prevRowsRef.current !== _rows) {
|
|
3672
3664
|
setSelectionAnchor(null);
|
|
3673
3665
|
prevRowsRef.current = _rows;
|
|
3674
3666
|
}
|
|
3675
3667
|
}, [_rows]);
|
|
3676
|
-
const handleAutoFit =
|
|
3668
|
+
const handleAutoFit = useCallback9(
|
|
3677
3669
|
(field) => {
|
|
3678
3670
|
const colDef = visibleColumnsByField[field];
|
|
3679
3671
|
if (!colDef?.headerRef.current) return;
|
|
@@ -3706,8 +3698,8 @@ function useDataTableRenderer({
|
|
|
3706
3698
|
handleAutoFit,
|
|
3707
3699
|
isAllSelected,
|
|
3708
3700
|
isTotalSelected,
|
|
3709
|
-
isSelectedRow:
|
|
3710
|
-
isRowSelectable:
|
|
3701
|
+
isSelectedRow: useCallback9((model) => selectedModelSet.has(model), [selectedModelSet]),
|
|
3702
|
+
isRowSelectable: useCallback9(
|
|
3711
3703
|
(rowId, row) => {
|
|
3712
3704
|
if (!isRowSelectable) return true;
|
|
3713
3705
|
return isRowSelectable({ row, id: rowId });
|
|
@@ -3715,13 +3707,13 @@ function useDataTableRenderer({
|
|
|
3715
3707
|
[isRowSelectable]
|
|
3716
3708
|
),
|
|
3717
3709
|
focusedRowId,
|
|
3718
|
-
onRowFocus:
|
|
3710
|
+
onRowFocus: useCallback9((rowId) => {
|
|
3719
3711
|
setFocusedRowId(rowId);
|
|
3720
3712
|
}, []),
|
|
3721
|
-
onAllCheckboxChange:
|
|
3713
|
+
onAllCheckboxChange: useCallback9(() => {
|
|
3722
3714
|
onSelectionModelChange?.(isAllSelected ? [] : selectableDataInPage.map(getId));
|
|
3723
3715
|
}, [isAllSelected, selectableDataInPage, onSelectionModelChange, getId]),
|
|
3724
|
-
onCheckboxChange:
|
|
3716
|
+
onCheckboxChange: useCallback9(
|
|
3725
3717
|
(event, selectedModel) => {
|
|
3726
3718
|
const isShiftClick = "shiftKey" in event && event.shiftKey;
|
|
3727
3719
|
const rowIndex = dataInPage.findIndex((row, i) => getId(row, i) === selectedModel);
|
|
@@ -3753,8 +3745,9 @@ function useDataTableRenderer({
|
|
|
3753
3745
|
]
|
|
3754
3746
|
),
|
|
3755
3747
|
columns,
|
|
3748
|
+
tableMinWidth,
|
|
3756
3749
|
processedColumnGroups,
|
|
3757
|
-
onTotalSelect:
|
|
3750
|
+
onTotalSelect: useCallback9(() => {
|
|
3758
3751
|
const selectableRows = rows.filter((row, i) => {
|
|
3759
3752
|
if (!isRowSelectable) return true;
|
|
3760
3753
|
return isRowSelectable({ row, id: getId(row, i) });
|
|
@@ -3839,7 +3832,7 @@ function TableBody(props) {
|
|
|
3839
3832
|
TableBody.displayName = "TableBody";
|
|
3840
3833
|
|
|
3841
3834
|
// src/components/Pagination/Pagination.tsx
|
|
3842
|
-
import React24, { useCallback as
|
|
3835
|
+
import React24, { useCallback as useCallback10, useEffect as useEffect6 } from "react";
|
|
3843
3836
|
import PreviousIcon from "@mui/icons-material/ChevronLeftRounded";
|
|
3844
3837
|
import NextIcon from "@mui/icons-material/ChevronRightRounded";
|
|
3845
3838
|
import FirstPageIcon from "@mui/icons-material/FirstPageRounded";
|
|
@@ -3908,7 +3901,7 @@ function Pagination(props) {
|
|
|
3908
3901
|
const [paginationModel, setPaginationModel] = useControlledState(
|
|
3909
3902
|
_paginationModel,
|
|
3910
3903
|
defaultPaginationModel,
|
|
3911
|
-
|
|
3904
|
+
useCallback10(
|
|
3912
3905
|
(newPage) => {
|
|
3913
3906
|
onPageChange(newPage.page);
|
|
3914
3907
|
},
|
|
@@ -3924,7 +3917,7 @@ function Pagination(props) {
|
|
|
3924
3917
|
const afterPages = [paginationModel.page + 1, paginationModel.page + 2].filter((p) => p <= lastPage - 1);
|
|
3925
3918
|
const isMoreAfterPages = lastPage > 1 && paginationModel.page < lastPage - 3;
|
|
3926
3919
|
const isMoreBeforePages = lastPage > 1 && paginationModel.page > 4;
|
|
3927
|
-
|
|
3920
|
+
useEffect6(() => {
|
|
3928
3921
|
if (paginationModel.page > lastPage) {
|
|
3929
3922
|
setPaginationModel({ ...paginationModel, page: lastPage });
|
|
3930
3923
|
}
|
|
@@ -4117,8 +4110,8 @@ function Component(props, apiRef) {
|
|
|
4117
4110
|
...innerProps
|
|
4118
4111
|
} = props;
|
|
4119
4112
|
const tableId = useId();
|
|
4120
|
-
const parentRef =
|
|
4121
|
-
const tableBodyRef =
|
|
4113
|
+
const parentRef = useRef6(null);
|
|
4114
|
+
const tableBodyRef = useRef6(null);
|
|
4122
4115
|
const {
|
|
4123
4116
|
columns,
|
|
4124
4117
|
processedColumnGroups,
|
|
@@ -4142,6 +4135,7 @@ function Component(props, apiRef) {
|
|
|
4142
4135
|
onTotalSelect,
|
|
4143
4136
|
HeadCell: HeadCell2,
|
|
4144
4137
|
BodyRow: BodyRow2,
|
|
4138
|
+
tableMinWidth,
|
|
4145
4139
|
// For keyboard selection
|
|
4146
4140
|
selectionAnchor,
|
|
4147
4141
|
setSelectionAnchor
|
|
@@ -4158,20 +4152,20 @@ function Component(props, apiRef) {
|
|
|
4158
4152
|
const virtualizedItems = virtualizer.getVirtualItems();
|
|
4159
4153
|
const showNoRowsOverlay = !loading && rowCount === 0;
|
|
4160
4154
|
const totalColCount = Math.max(1, columns.length + (checkboxSelection ? 1 : 0));
|
|
4161
|
-
const getRowClickHandler =
|
|
4155
|
+
const getRowClickHandler = useCallback11(
|
|
4162
4156
|
(row, rowId) => (e) => {
|
|
4163
4157
|
onRowClick?.({ row, rowId }, e);
|
|
4164
4158
|
checkboxSelection && !disableSelectionOnClick && isRowSelectableCheck(rowId, row) && onCheckboxChange(e, rowId);
|
|
4165
4159
|
},
|
|
4166
4160
|
[onRowClick, checkboxSelection, disableSelectionOnClick, onCheckboxChange, isRowSelectableCheck]
|
|
4167
4161
|
);
|
|
4168
|
-
const getRowFocusHandler =
|
|
4162
|
+
const getRowFocusHandler = useCallback11(
|
|
4169
4163
|
(rowId) => () => {
|
|
4170
4164
|
onRowFocus(rowId);
|
|
4171
4165
|
},
|
|
4172
4166
|
[onRowFocus]
|
|
4173
4167
|
);
|
|
4174
|
-
const getCheckboxClickHandler =
|
|
4168
|
+
const getCheckboxClickHandler = useCallback11(
|
|
4175
4169
|
(rowId, row) => (e) => {
|
|
4176
4170
|
e.stopPropagation();
|
|
4177
4171
|
if (isRowSelectableCheck(rowId, row)) {
|
|
@@ -4181,7 +4175,7 @@ function Component(props, apiRef) {
|
|
|
4181
4175
|
},
|
|
4182
4176
|
[onCheckboxChange, isRowSelectableCheck, onRowFocus]
|
|
4183
4177
|
);
|
|
4184
|
-
const handleTableKeyDown =
|
|
4178
|
+
const handleTableKeyDown = useCallback11(
|
|
4185
4179
|
(e) => {
|
|
4186
4180
|
const supportedKeys = ["ArrowUp", "ArrowDown", " ", "Home", "End", "PageUp", "PageDown"];
|
|
4187
4181
|
if (!supportedKeys.includes(e.key)) return;
|
|
@@ -4331,7 +4325,7 @@ function Component(props, apiRef) {
|
|
|
4331
4325
|
ref: parentRef,
|
|
4332
4326
|
...backgroundProps
|
|
4333
4327
|
},
|
|
4334
|
-
/* @__PURE__ */ React25.createElement(Table, { ...innerProps }, /* @__PURE__ */ React25.createElement("colgroup", null, checkboxSelection && /* @__PURE__ */ React25.createElement(
|
|
4328
|
+
/* @__PURE__ */ React25.createElement(Table, { ...innerProps, sx: { ...innerProps.sx, minWidth: tableMinWidth } }, /* @__PURE__ */ React25.createElement("colgroup", null, checkboxSelection && /* @__PURE__ */ React25.createElement(
|
|
4335
4329
|
"col",
|
|
4336
4330
|
{
|
|
4337
4331
|
style: {
|
|
@@ -4344,7 +4338,8 @@ function Component(props, apiRef) {
|
|
|
4344
4338
|
ref: c.tableColRef,
|
|
4345
4339
|
key: `${c.field.toString()}_${c.width}`,
|
|
4346
4340
|
style: {
|
|
4347
|
-
width: c.width
|
|
4341
|
+
width: c.width,
|
|
4342
|
+
minWidth: c.minWidth ?? "50px"
|
|
4348
4343
|
}
|
|
4349
4344
|
}
|
|
4350
4345
|
))), /* @__PURE__ */ React25.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.length > 0 && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ React25.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ React25.createElement(
|
|
@@ -4536,7 +4531,7 @@ var DataTable = forwardRef7(Component);
|
|
|
4536
4531
|
DataTable.displayName = "DataTable";
|
|
4537
4532
|
|
|
4538
4533
|
// src/components/DateRangePicker/DateRangePicker.tsx
|
|
4539
|
-
import React26, { forwardRef as forwardRef8, useCallback as
|
|
4534
|
+
import React26, { forwardRef as forwardRef8, useCallback as useCallback12, useEffect as useEffect7, useImperativeHandle as useImperativeHandle3, useMemo as useMemo11, useRef as useRef7, useState as useState9 } from "react";
|
|
4540
4535
|
import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
|
|
4541
4536
|
import CalendarTodayIcon2 from "@mui/icons-material/CalendarToday";
|
|
4542
4537
|
import { styled as styled14, useThemeProps as useThemeProps5 } from "@mui/joy";
|
|
@@ -4697,23 +4692,23 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4697
4692
|
readOnly,
|
|
4698
4693
|
...innerProps
|
|
4699
4694
|
} = props;
|
|
4700
|
-
const innerRef =
|
|
4701
|
-
const buttonRef =
|
|
4695
|
+
const innerRef = useRef7(null);
|
|
4696
|
+
const buttonRef = useRef7(null);
|
|
4702
4697
|
const [value, setValue] = useControlledState(
|
|
4703
4698
|
props.value,
|
|
4704
4699
|
props.defaultValue || "",
|
|
4705
|
-
|
|
4700
|
+
useCallback12((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
4706
4701
|
);
|
|
4707
|
-
const [displayValue, setDisplayValue] =
|
|
4702
|
+
const [displayValue, setDisplayValue] = useState9(
|
|
4708
4703
|
() => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
|
|
4709
4704
|
);
|
|
4710
|
-
const [anchorEl, setAnchorEl] =
|
|
4705
|
+
const [anchorEl, setAnchorEl] = useState9(null);
|
|
4711
4706
|
const open = Boolean(anchorEl);
|
|
4712
4707
|
const calendarValue = useMemo11(
|
|
4713
4708
|
() => value ? parseDates(value, format) : void 0,
|
|
4714
4709
|
[value, format]
|
|
4715
4710
|
);
|
|
4716
|
-
|
|
4711
|
+
useEffect7(() => {
|
|
4717
4712
|
if (value) {
|
|
4718
4713
|
try {
|
|
4719
4714
|
const dates = parseDates(value, format);
|
|
@@ -4725,13 +4720,13 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4725
4720
|
setDisplayValue("");
|
|
4726
4721
|
}
|
|
4727
4722
|
}, [displayFormat, value, format]);
|
|
4728
|
-
|
|
4723
|
+
useEffect7(() => {
|
|
4729
4724
|
if (!anchorEl) {
|
|
4730
4725
|
innerRef.current?.blur();
|
|
4731
4726
|
}
|
|
4732
4727
|
}, [anchorEl, innerRef]);
|
|
4733
4728
|
useImperativeHandle3(ref, () => innerRef.current, [innerRef]);
|
|
4734
|
-
const handleChange =
|
|
4729
|
+
const handleChange = useCallback12(
|
|
4735
4730
|
(event) => {
|
|
4736
4731
|
const value2 = event.target.value;
|
|
4737
4732
|
setDisplayValue(value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2);
|
|
@@ -4739,7 +4734,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4739
4734
|
},
|
|
4740
4735
|
[displayFormat, format, setValue]
|
|
4741
4736
|
);
|
|
4742
|
-
const handleDisplayInputChange =
|
|
4737
|
+
const handleDisplayInputChange = useCallback12(
|
|
4743
4738
|
(event) => {
|
|
4744
4739
|
if (event.target.value === "") {
|
|
4745
4740
|
handleChange({
|
|
@@ -4764,14 +4759,14 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4764
4759
|
},
|
|
4765
4760
|
[displayFormat, format, handleChange, props.name]
|
|
4766
4761
|
);
|
|
4767
|
-
const handleCalendarToggle =
|
|
4762
|
+
const handleCalendarToggle = useCallback12(
|
|
4768
4763
|
(event) => {
|
|
4769
4764
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
4770
4765
|
innerRef.current?.focus();
|
|
4771
4766
|
},
|
|
4772
4767
|
[anchorEl, setAnchorEl, innerRef]
|
|
4773
4768
|
);
|
|
4774
|
-
const handleCalendarChange =
|
|
4769
|
+
const handleCalendarChange = useCallback12(
|
|
4775
4770
|
([date1, date2]) => {
|
|
4776
4771
|
if (!date1 || !date2) return;
|
|
4777
4772
|
const formattedValue = formatValueString2([date1, date2], format);
|
|
@@ -4785,7 +4780,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4785
4780
|
},
|
|
4786
4781
|
[props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat]
|
|
4787
4782
|
);
|
|
4788
|
-
const handleInputMouseDown =
|
|
4783
|
+
const handleInputMouseDown = useCallback12(
|
|
4789
4784
|
(event) => {
|
|
4790
4785
|
if (inputReadOnly) {
|
|
4791
4786
|
event.preventDefault();
|
|
@@ -5017,13 +5012,13 @@ var InsetDrawer = styled20(JoyDrawer2)(({ theme }) => ({
|
|
|
5017
5012
|
}));
|
|
5018
5013
|
|
|
5019
5014
|
// src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
|
|
5020
|
-
import React31, { useCallback as
|
|
5015
|
+
import React31, { useCallback as useCallback13, useEffect as useEffect8, useMemo as useMemo12, useRef as useRef8, useState as useState10 } from "react";
|
|
5021
5016
|
import SearchIcon from "@mui/icons-material/Search";
|
|
5022
5017
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
5023
5018
|
function LabelWithTooltip(props) {
|
|
5024
5019
|
const { label, size } = props;
|
|
5025
|
-
const labelContentRef =
|
|
5026
|
-
const [isOverflowing, setIsOverflowing] =
|
|
5020
|
+
const labelContentRef = useRef8(null);
|
|
5021
|
+
const [isOverflowing, setIsOverflowing] = useState10(false);
|
|
5027
5022
|
const labelContent = /* @__PURE__ */ React31.createElement(
|
|
5028
5023
|
"span",
|
|
5029
5024
|
{
|
|
@@ -5040,7 +5035,7 @@ function LabelWithTooltip(props) {
|
|
|
5040
5035
|
},
|
|
5041
5036
|
label
|
|
5042
5037
|
);
|
|
5043
|
-
|
|
5038
|
+
useEffect8(() => {
|
|
5044
5039
|
const element = labelContentRef.current;
|
|
5045
5040
|
if (element) {
|
|
5046
5041
|
setIsOverflowing(element.scrollWidth > element.clientWidth);
|
|
@@ -5064,16 +5059,16 @@ function FilterableCheckboxGroup(props) {
|
|
|
5064
5059
|
maxHeight = 300,
|
|
5065
5060
|
disabled
|
|
5066
5061
|
} = props;
|
|
5067
|
-
const [searchTerm, setSearchTerm] =
|
|
5068
|
-
const [sortedOptions, setSortedOptions] =
|
|
5062
|
+
const [searchTerm, setSearchTerm] = useState10("");
|
|
5063
|
+
const [sortedOptions, setSortedOptions] = useState10(options);
|
|
5069
5064
|
const [internalValue, setInternalValue] = useControlledState(
|
|
5070
5065
|
value,
|
|
5071
5066
|
value ?? [],
|
|
5072
|
-
|
|
5067
|
+
useCallback13((newValue) => onChange?.(newValue), [onChange])
|
|
5073
5068
|
);
|
|
5074
|
-
const parentRef =
|
|
5075
|
-
const isInitialSortRef =
|
|
5076
|
-
const prevOptionsRef =
|
|
5069
|
+
const parentRef = useRef8(null);
|
|
5070
|
+
const isInitialSortRef = useRef8(false);
|
|
5071
|
+
const prevOptionsRef = useRef8([...options]);
|
|
5077
5072
|
const filteredOptions = useMemo12(() => {
|
|
5078
5073
|
if (!searchTerm) return sortedOptions;
|
|
5079
5074
|
return sortedOptions.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
@@ -5096,7 +5091,7 @@ function FilterableCheckboxGroup(props) {
|
|
|
5096
5091
|
overscan: 5
|
|
5097
5092
|
});
|
|
5098
5093
|
const items = virtualizer.getVirtualItems();
|
|
5099
|
-
|
|
5094
|
+
useEffect8(() => {
|
|
5100
5095
|
const optionsChanged = prevOptionsRef.current.length !== options.length || prevOptionsRef.current.some(
|
|
5101
5096
|
(prevOption, index) => prevOption.value !== options[index]?.value || prevOption.label !== options[index]?.label || prevOption.disabled !== options[index]?.disabled
|
|
5102
5097
|
);
|
|
@@ -5122,13 +5117,13 @@ function FilterableCheckboxGroup(props) {
|
|
|
5122
5117
|
}
|
|
5123
5118
|
}
|
|
5124
5119
|
}, [options, value]);
|
|
5125
|
-
|
|
5120
|
+
useEffect8(() => {
|
|
5126
5121
|
virtualizer.measure();
|
|
5127
5122
|
}, [virtualizer, filteredOptions, size]);
|
|
5128
|
-
const handleSearchChange =
|
|
5123
|
+
const handleSearchChange = useCallback13((event) => {
|
|
5129
5124
|
setSearchTerm(event.target.value);
|
|
5130
5125
|
}, []);
|
|
5131
|
-
const handleCheckboxChange =
|
|
5126
|
+
const handleCheckboxChange = useCallback13(
|
|
5132
5127
|
(optionValue) => (event) => {
|
|
5133
5128
|
const checked = event.target.checked;
|
|
5134
5129
|
const newValue = checked ? [...internalValue, optionValue] : internalValue.filter((v) => v !== optionValue);
|
|
@@ -5136,7 +5131,7 @@ function FilterableCheckboxGroup(props) {
|
|
|
5136
5131
|
},
|
|
5137
5132
|
[internalValue, setInternalValue]
|
|
5138
5133
|
);
|
|
5139
|
-
const handleSelectAll =
|
|
5134
|
+
const handleSelectAll = useCallback13(
|
|
5140
5135
|
(event) => {
|
|
5141
5136
|
const checked = event.target.checked;
|
|
5142
5137
|
const enabledOptions = filteredOptions.filter((option) => !option.disabled);
|
|
@@ -5293,16 +5288,16 @@ function IconMenuButton(props) {
|
|
|
5293
5288
|
IconMenuButton.displayName = "IconMenuButton";
|
|
5294
5289
|
|
|
5295
5290
|
// src/components/Markdown/Markdown.tsx
|
|
5296
|
-
import React33, { lazy, Suspense, useEffect as
|
|
5291
|
+
import React33, { lazy, Suspense, useEffect as useEffect9, useState as useState11 } from "react";
|
|
5297
5292
|
import { Skeleton } from "@mui/joy";
|
|
5298
5293
|
import { Link as Link2 } from "@mui/joy";
|
|
5299
5294
|
import remarkGfm from "remark-gfm";
|
|
5300
5295
|
var LazyReactMarkdown = lazy(() => import("react-markdown"));
|
|
5301
5296
|
var Markdown = (props) => {
|
|
5302
|
-
const [
|
|
5303
|
-
|
|
5297
|
+
const [rehypeAccent2, setRehypeAccent] = useState11(null);
|
|
5298
|
+
useEffect9(() => {
|
|
5304
5299
|
const loadRehypeAccent = async () => {
|
|
5305
|
-
const module = await
|
|
5300
|
+
const module = await Promise.resolve().then(() => (init_rehype_accent(), rehype_accent_exports));
|
|
5306
5301
|
setRehypeAccent(() => module.rehypeAccent);
|
|
5307
5302
|
};
|
|
5308
5303
|
loadRehypeAccent();
|
|
@@ -5319,7 +5314,7 @@ var Markdown = (props) => {
|
|
|
5319
5314
|
fallback,
|
|
5320
5315
|
...innerProps
|
|
5321
5316
|
} = props;
|
|
5322
|
-
if (!
|
|
5317
|
+
if (!rehypeAccent2) {
|
|
5323
5318
|
return null;
|
|
5324
5319
|
}
|
|
5325
5320
|
return /* @__PURE__ */ React33.createElement(Typography, { component: "div", color, textColor, level: defaultLevel, ...innerProps }, /* @__PURE__ */ React33.createElement(
|
|
@@ -5332,7 +5327,7 @@ var Markdown = (props) => {
|
|
|
5332
5327
|
{
|
|
5333
5328
|
...markdownOptions,
|
|
5334
5329
|
children: content,
|
|
5335
|
-
rehypePlugins: [[
|
|
5330
|
+
rehypePlugins: [[rehypeAccent2, { accentColor }]],
|
|
5336
5331
|
remarkPlugins: [remarkGfm],
|
|
5337
5332
|
components: {
|
|
5338
5333
|
a: ({ children, href }) => /* @__PURE__ */ React33.createElement(Link2, { href, target: defaultLinkAction }, children),
|
|
@@ -5474,7 +5469,7 @@ function MenuButton(props) {
|
|
|
5474
5469
|
MenuButton.displayName = "MenuButton";
|
|
5475
5470
|
|
|
5476
5471
|
// src/components/MonthPicker/MonthPicker.tsx
|
|
5477
|
-
import React35, { forwardRef as forwardRef9, useCallback as
|
|
5472
|
+
import React35, { forwardRef as forwardRef9, useCallback as useCallback14, useEffect as useEffect10, useImperativeHandle as useImperativeHandle4, useRef as useRef9, useState as useState12 } from "react";
|
|
5478
5473
|
import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
|
|
5479
5474
|
import { styled as styled21, useThemeProps as useThemeProps6 } from "@mui/joy";
|
|
5480
5475
|
import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
|
|
@@ -5556,14 +5551,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5556
5551
|
locale,
|
|
5557
5552
|
...innerProps
|
|
5558
5553
|
} = props;
|
|
5559
|
-
const innerRef =
|
|
5560
|
-
const buttonRef =
|
|
5554
|
+
const innerRef = useRef9(null);
|
|
5555
|
+
const buttonRef = useRef9(null);
|
|
5561
5556
|
const [value, setValue, isControlled] = useControlledState(
|
|
5562
5557
|
props.value,
|
|
5563
5558
|
props.defaultValue || "",
|
|
5564
|
-
|
|
5559
|
+
useCallback14((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
5565
5560
|
);
|
|
5566
|
-
const getFormattedDisplayValue =
|
|
5561
|
+
const getFormattedDisplayValue = useCallback14(
|
|
5567
5562
|
(inputValue) => {
|
|
5568
5563
|
if (!inputValue) return "";
|
|
5569
5564
|
try {
|
|
@@ -5574,19 +5569,19 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5574
5569
|
},
|
|
5575
5570
|
[format, displayFormat, locale]
|
|
5576
5571
|
);
|
|
5577
|
-
const [displayValue, setDisplayValue] =
|
|
5578
|
-
const [anchorEl, setAnchorEl] =
|
|
5572
|
+
const [displayValue, setDisplayValue] = useState12(() => getFormattedDisplayValue(value));
|
|
5573
|
+
const [anchorEl, setAnchorEl] = useState12(null);
|
|
5579
5574
|
const open = Boolean(anchorEl);
|
|
5580
|
-
|
|
5575
|
+
useEffect10(() => {
|
|
5581
5576
|
if (!anchorEl) {
|
|
5582
5577
|
innerRef.current?.blur();
|
|
5583
5578
|
}
|
|
5584
5579
|
}, [anchorEl, innerRef]);
|
|
5585
5580
|
useImperativeHandle4(ref, () => innerRef.current, [innerRef]);
|
|
5586
|
-
|
|
5581
|
+
useEffect10(() => {
|
|
5587
5582
|
setDisplayValue(getFormattedDisplayValue(value));
|
|
5588
5583
|
}, [value, getFormattedDisplayValue]);
|
|
5589
|
-
const handleChange =
|
|
5584
|
+
const handleChange = useCallback14(
|
|
5590
5585
|
(event) => {
|
|
5591
5586
|
const newValue = event.target.value;
|
|
5592
5587
|
setValue(newValue);
|
|
@@ -5596,14 +5591,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5596
5591
|
},
|
|
5597
5592
|
[setValue, getFormattedDisplayValue, isControlled]
|
|
5598
5593
|
);
|
|
5599
|
-
const handleCalendarToggle =
|
|
5594
|
+
const handleCalendarToggle = useCallback14(
|
|
5600
5595
|
(event) => {
|
|
5601
5596
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
5602
5597
|
innerRef.current?.focus();
|
|
5603
5598
|
},
|
|
5604
5599
|
[anchorEl, setAnchorEl, innerRef]
|
|
5605
5600
|
);
|
|
5606
|
-
const handleInputMouseDown =
|
|
5601
|
+
const handleInputMouseDown = useCallback14(
|
|
5607
5602
|
(event) => {
|
|
5608
5603
|
event.preventDefault();
|
|
5609
5604
|
buttonRef.current?.focus();
|
|
@@ -5727,7 +5722,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5727
5722
|
});
|
|
5728
5723
|
|
|
5729
5724
|
// src/components/MonthRangePicker/MonthRangePicker.tsx
|
|
5730
|
-
import React36, { forwardRef as forwardRef10, useCallback as
|
|
5725
|
+
import React36, { forwardRef as forwardRef10, useCallback as useCallback15, useEffect as useEffect11, useImperativeHandle as useImperativeHandle5, useMemo as useMemo13, useRef as useRef10, useState as useState13 } from "react";
|
|
5731
5726
|
import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
|
|
5732
5727
|
import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
|
|
5733
5728
|
import { styled as styled22, useThemeProps as useThemeProps7 } from "@mui/joy";
|
|
@@ -5835,35 +5830,35 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
|
5835
5830
|
size,
|
|
5836
5831
|
...innerProps
|
|
5837
5832
|
} = props;
|
|
5838
|
-
const innerRef =
|
|
5833
|
+
const innerRef = useRef10(null);
|
|
5839
5834
|
const [value, setValue] = useControlledState(
|
|
5840
5835
|
props.value,
|
|
5841
5836
|
props.defaultValue || "",
|
|
5842
|
-
|
|
5837
|
+
useCallback15((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
5843
5838
|
);
|
|
5844
|
-
const [anchorEl, setAnchorEl] =
|
|
5839
|
+
const [anchorEl, setAnchorEl] = useState13(null);
|
|
5845
5840
|
const open = Boolean(anchorEl);
|
|
5846
5841
|
const calendarValue = useMemo13(() => value ? parseDates2(value) : void 0, [value]);
|
|
5847
|
-
|
|
5842
|
+
useEffect11(() => {
|
|
5848
5843
|
if (!anchorEl) {
|
|
5849
5844
|
innerRef.current?.blur();
|
|
5850
5845
|
}
|
|
5851
5846
|
}, [anchorEl, innerRef]);
|
|
5852
5847
|
useImperativeHandle5(ref, () => innerRef.current, [innerRef]);
|
|
5853
|
-
const handleChange =
|
|
5848
|
+
const handleChange = useCallback15(
|
|
5854
5849
|
(event) => {
|
|
5855
5850
|
setValue(event.target.value);
|
|
5856
5851
|
},
|
|
5857
5852
|
[setValue]
|
|
5858
5853
|
);
|
|
5859
|
-
const handleCalendarToggle =
|
|
5854
|
+
const handleCalendarToggle = useCallback15(
|
|
5860
5855
|
(event) => {
|
|
5861
5856
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
5862
5857
|
innerRef.current?.focus();
|
|
5863
5858
|
},
|
|
5864
5859
|
[anchorEl, setAnchorEl, innerRef]
|
|
5865
5860
|
);
|
|
5866
|
-
const handleCalendarChange =
|
|
5861
|
+
const handleCalendarChange = useCallback15(
|
|
5867
5862
|
([date1, date2]) => {
|
|
5868
5863
|
if (!date1 || !date2) return;
|
|
5869
5864
|
setValue(formatValueString4([date1, date2], format));
|
|
@@ -6090,7 +6085,7 @@ function Navigator(props) {
|
|
|
6090
6085
|
Navigator.displayName = "Navigator";
|
|
6091
6086
|
|
|
6092
6087
|
// src/components/PercentageInput/PercentageInput.tsx
|
|
6093
|
-
import React40, { useCallback as
|
|
6088
|
+
import React40, { useCallback as useCallback16, useMemo as useMemo14, useState as useState14 } from "react";
|
|
6094
6089
|
import { NumericFormat as NumericFormat2 } from "react-number-format";
|
|
6095
6090
|
import { styled as styled25, useThemeProps as useThemeProps8 } from "@mui/joy";
|
|
6096
6091
|
var padDecimal = (value, decimalScale) => {
|
|
@@ -6147,9 +6142,9 @@ var PercentageInput = React40.forwardRef(
|
|
|
6147
6142
|
const [_value, setValue] = useControlledState(
|
|
6148
6143
|
props.value,
|
|
6149
6144
|
props.defaultValue,
|
|
6150
|
-
|
|
6145
|
+
useCallback16((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
|
|
6151
6146
|
);
|
|
6152
|
-
const [internalError, setInternalError] =
|
|
6147
|
+
const [internalError, setInternalError] = useState14(
|
|
6153
6148
|
max && _value && _value > max || min && _value && _value < min
|
|
6154
6149
|
);
|
|
6155
6150
|
const value = useMemo14(() => {
|
|
@@ -6158,7 +6153,7 @@ var PercentageInput = React40.forwardRef(
|
|
|
6158
6153
|
}
|
|
6159
6154
|
return _value;
|
|
6160
6155
|
}, [_value, useMinorUnit, maxDecimalScale]);
|
|
6161
|
-
const handleChange =
|
|
6156
|
+
const handleChange = useCallback16(
|
|
6162
6157
|
(event) => {
|
|
6163
6158
|
if (event.target.value === "") {
|
|
6164
6159
|
setValue(void 0);
|
|
@@ -6215,176 +6210,95 @@ var MotionRadioGroup = motion26(JoyRadioGroup);
|
|
|
6215
6210
|
var RadioGroup = MotionRadioGroup;
|
|
6216
6211
|
RadioGroup.displayName = "RadioGroup";
|
|
6217
6212
|
|
|
6218
|
-
// src/components/
|
|
6213
|
+
// src/components/RadioList/RadioList.tsx
|
|
6219
6214
|
import React41 from "react";
|
|
6220
|
-
|
|
6221
|
-
|
|
6222
|
-
|
|
6223
|
-
|
|
6224
|
-
|
|
6225
|
-
|
|
6226
|
-
|
|
6227
|
-
|
|
6228
|
-
|
|
6229
|
-
|
|
6230
|
-
|
|
6231
|
-
|
|
6232
|
-
|
|
6233
|
-
[
|
|
6234
|
-
|
|
6235
|
-
|
|
6236
|
-
|
|
6237
|
-
|
|
6238
|
-
|
|
6239
|
-
|
|
6240
|
-
|
|
6241
|
-
|
|
6242
|
-
|
|
6243
|
-
|
|
6244
|
-
|
|
6245
|
-
},
|
|
6246
|
-
[`&.${radioClasses.disabled}`]: {
|
|
6247
|
-
[`& .${radioClasses.action}`]: {
|
|
6248
|
-
borderColor: theme.palette.neutral.outlinedBorder
|
|
6249
|
-
}
|
|
6250
|
-
}
|
|
6251
|
-
}
|
|
6252
|
-
}
|
|
6253
|
-
}));
|
|
6254
|
-
var RadioTileSheet = styled26(Sheet, {
|
|
6255
|
-
name: "RadioTileGroup",
|
|
6256
|
-
slot: "tile",
|
|
6257
|
-
shouldForwardProp: (prop) => prop !== "disabled" && prop !== "size" && prop !== "flex" && prop !== "textAlign"
|
|
6258
|
-
})(({
|
|
6259
|
-
theme,
|
|
6260
|
-
disabled,
|
|
6261
|
-
size = "sm",
|
|
6262
|
-
flex,
|
|
6263
|
-
textAlign
|
|
6264
|
-
}) => {
|
|
6265
|
-
const px = { sm: theme.spacing(3), md: theme.spacing(3), lg: theme.spacing(4) }[size];
|
|
6266
|
-
const py = { sm: theme.spacing(3), md: theme.spacing(4), lg: theme.spacing(4) }[size];
|
|
6267
|
-
return {
|
|
6268
|
-
borderRadius: theme.radius.md,
|
|
6269
|
-
display: "flex",
|
|
6270
|
-
gap: { sm: theme.spacing(2), md: theme.spacing(3), lg: theme.spacing(4) }[size],
|
|
6271
|
-
padding: `${py} ${px}`,
|
|
6272
|
-
// NOTE: Radio에도 Label과의 정렬을 맞추기 위해 중복 코드가 있지만 Icon과 RadioButton 의 정렬도 일치시켜야 해서 코드가 중복으로 존재할수밖에 없다.
|
|
6273
|
-
flexDirection: textAlign === "start" ? "row-reverse" : "column-reverse",
|
|
6274
|
-
justifyContent: textAlign === "start" ? "space-between" : "center",
|
|
6275
|
-
alignItems: "center",
|
|
6276
|
-
...flex ? { flex: 1 } : {},
|
|
6277
|
-
...disabled ? { borderColor: theme.palette.neutral.outlinedDisabledBorder } : {
|
|
6278
|
-
":hover": {
|
|
6279
|
-
backgroundColor: theme.palette.neutral.outlinedHoverBg
|
|
6280
|
-
},
|
|
6281
|
-
":active": {
|
|
6282
|
-
backgroundColor: theme.palette.neutral.outlinedActiveBg
|
|
6283
|
-
}
|
|
6215
|
+
function RadioList(props) {
|
|
6216
|
+
const { items, ...innerProps } = props;
|
|
6217
|
+
return /* @__PURE__ */ React41.createElement(RadioGroup, { ...innerProps }, items.map((item) => /* @__PURE__ */ React41.createElement(Radio, { key: `${item.value}`, value: item.value, label: item.label })));
|
|
6218
|
+
}
|
|
6219
|
+
RadioList.displayName = "RadioList";
|
|
6220
|
+
|
|
6221
|
+
// src/components/SearchBar/SearchBar.tsx
|
|
6222
|
+
import React42, { useState as useState15 } from "react";
|
|
6223
|
+
import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
|
|
6224
|
+
import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
|
|
6225
|
+
function SearchBar(props) {
|
|
6226
|
+
const { hideSelect = false, options, value, onChange, onSearch } = props;
|
|
6227
|
+
const [selectVal, setSelectVal] = useState15(options?.[0]?.value ?? "");
|
|
6228
|
+
const [isHovered, setIsHovered] = useState15(false);
|
|
6229
|
+
const selectedOption = options?.find((o) => o.value === selectVal);
|
|
6230
|
+
const placeholder = selectedOption?.placeholder ?? "";
|
|
6231
|
+
const handleSearch = () => {
|
|
6232
|
+
onSearch?.({ selectValue: hideSelect ? void 0 : selectVal, inputValue: value });
|
|
6233
|
+
};
|
|
6234
|
+
const handleClear = () => {
|
|
6235
|
+
onChange("");
|
|
6236
|
+
};
|
|
6237
|
+
const handleKeyDown = (e) => {
|
|
6238
|
+
if (e.key === "Enter") {
|
|
6239
|
+
handleSearch();
|
|
6284
6240
|
}
|
|
6285
6241
|
};
|
|
6286
|
-
|
|
6287
|
-
|
|
6288
|
-
const {
|
|
6289
|
-
options,
|
|
6290
|
-
value,
|
|
6291
|
-
defaultValue,
|
|
6292
|
-
onChange,
|
|
6293
|
-
name,
|
|
6294
|
-
disabled: allDisabled,
|
|
6295
|
-
sx,
|
|
6296
|
-
className,
|
|
6297
|
-
useIndicator,
|
|
6298
|
-
textAlign = "center",
|
|
6299
|
-
size = "sm",
|
|
6300
|
-
flex,
|
|
6301
|
-
columns,
|
|
6302
|
-
label,
|
|
6303
|
-
helperText,
|
|
6304
|
-
error,
|
|
6305
|
-
required
|
|
6306
|
-
} = props;
|
|
6307
|
-
const radioGroup = /* @__PURE__ */ React41.createElement(
|
|
6308
|
-
RadioTileGroupRoot,
|
|
6242
|
+
return /* @__PURE__ */ React42.createElement(
|
|
6243
|
+
Stack,
|
|
6309
6244
|
{
|
|
6310
|
-
|
|
6311
|
-
|
|
6312
|
-
|
|
6313
|
-
|
|
6314
|
-
|
|
6315
|
-
|
|
6316
|
-
|
|
6245
|
+
direction: "row",
|
|
6246
|
+
sx: {
|
|
6247
|
+
width: hideSelect ? "220px" : "300px",
|
|
6248
|
+
bgcolor: "background.surface",
|
|
6249
|
+
borderRadius: "sm",
|
|
6250
|
+
border: 1,
|
|
6251
|
+
borderColor: "neutral.outlinedBorder"
|
|
6252
|
+
}
|
|
6317
6253
|
},
|
|
6318
|
-
options.
|
|
6319
|
-
|
|
6254
|
+
!hideSelect && options && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(
|
|
6255
|
+
Select,
|
|
6320
6256
|
{
|
|
6321
|
-
|
|
6322
|
-
|
|
6323
|
-
|
|
6324
|
-
|
|
6325
|
-
|
|
6326
|
-
|
|
6327
|
-
|
|
6328
|
-
|
|
6329
|
-
|
|
6330
|
-
|
|
6331
|
-
id: `${option.value}`,
|
|
6332
|
-
value: option.value,
|
|
6333
|
-
label: option.label,
|
|
6334
|
-
disableIcon: !useIndicator,
|
|
6335
|
-
disabled: allDisabled ?? option.disabled,
|
|
6336
|
-
size,
|
|
6337
|
-
slotProps: {
|
|
6338
|
-
root: {
|
|
6339
|
-
sx: {
|
|
6340
|
-
width: "100%",
|
|
6341
|
-
flexDirection: textAlign === "start" ? "row-reverse" : "column-reverse",
|
|
6342
|
-
justifyContent: textAlign === "start" ? "space-between" : "center",
|
|
6343
|
-
alignItems: "center",
|
|
6344
|
-
gap: { sm: 2, md: 3, lg: 4 }[size]
|
|
6345
|
-
}
|
|
6346
|
-
},
|
|
6347
|
-
label: ({ disabled }) => ({
|
|
6348
|
-
sx: (theme) => ({
|
|
6349
|
-
...theme.typography[{ sm: "body-sm", md: "body-md", lg: "body-lg" }[size]],
|
|
6350
|
-
color: disabled ? theme.palette.neutral.outlinedDisabledColor : theme.palette.neutral.outlinedColor
|
|
6351
|
-
})
|
|
6352
|
-
})
|
|
6257
|
+
variant: "plain",
|
|
6258
|
+
size: "sm",
|
|
6259
|
+
color: "neutral",
|
|
6260
|
+
value: selectVal,
|
|
6261
|
+
options,
|
|
6262
|
+
onChange: (_, newValue) => setSelectVal(newValue),
|
|
6263
|
+
sx: { flex: 1, maxWidth: "110px" },
|
|
6264
|
+
slotProps: {
|
|
6265
|
+
button: {
|
|
6266
|
+
style: { display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
|
|
6353
6267
|
}
|
|
6354
6268
|
}
|
|
6355
|
-
|
|
6356
|
-
|
|
6357
|
-
|
|
6358
|
-
|
|
6359
|
-
|
|
6360
|
-
|
|
6361
|
-
|
|
6362
|
-
|
|
6363
|
-
|
|
6364
|
-
|
|
6365
|
-
|
|
6366
|
-
|
|
6367
|
-
|
|
6368
|
-
|
|
6369
|
-
|
|
6370
|
-
|
|
6371
|
-
|
|
6372
|
-
|
|
6373
|
-
|
|
6374
|
-
|
|
6375
|
-
|
|
6269
|
+
}
|
|
6270
|
+
), /* @__PURE__ */ React42.createElement(Divider, { orientation: "vertical", sx: { height: "16px", alignSelf: "center" } })),
|
|
6271
|
+
/* @__PURE__ */ React42.createElement(
|
|
6272
|
+
Input,
|
|
6273
|
+
{
|
|
6274
|
+
variant: "plain",
|
|
6275
|
+
size: "sm",
|
|
6276
|
+
color: "neutral",
|
|
6277
|
+
placeholder,
|
|
6278
|
+
value,
|
|
6279
|
+
onChange: (e) => onChange(e.target.value),
|
|
6280
|
+
onKeyDown: handleKeyDown,
|
|
6281
|
+
sx: { flex: 1, minWidth: 0 },
|
|
6282
|
+
onMouseEnter: () => setIsHovered(true),
|
|
6283
|
+
onMouseLeave: () => setIsHovered(false),
|
|
6284
|
+
endDecorator: isHovered && value ? /* @__PURE__ */ React42.createElement(
|
|
6285
|
+
IconButton,
|
|
6286
|
+
{
|
|
6287
|
+
variant: "plain",
|
|
6288
|
+
size: "sm",
|
|
6289
|
+
color: "neutral",
|
|
6290
|
+
onMouseDown: (e) => e.preventDefault(),
|
|
6291
|
+
onClick: handleClear,
|
|
6292
|
+
"aria-label": "Clear"
|
|
6293
|
+
},
|
|
6294
|
+
/* @__PURE__ */ React42.createElement(CloseRoundedIcon, null)
|
|
6295
|
+
) : void 0
|
|
6296
|
+
}
|
|
6297
|
+
),
|
|
6298
|
+
/* @__PURE__ */ React42.createElement(IconButton, { variant: "plain", size: "sm", color: "neutral", onClick: handleSearch, "aria-label": "Search" }, /* @__PURE__ */ React42.createElement(SearchRoundedIcon, null))
|
|
6376
6299
|
);
|
|
6377
|
-
return /* @__PURE__ */ React41.createElement(FormControl_default, { required, disabled: allDisabled, error, size, sx, className }, label && /* @__PURE__ */ React41.createElement(FormLabel_default, null, label), radioGroup, helperText && /* @__PURE__ */ React41.createElement(FormHelperText_default, null, helperText));
|
|
6378
6300
|
}
|
|
6379
|
-
|
|
6380
|
-
|
|
6381
|
-
// src/components/RadioList/RadioList.tsx
|
|
6382
|
-
import React42 from "react";
|
|
6383
|
-
function RadioList(props) {
|
|
6384
|
-
const { items, ...innerProps } = props;
|
|
6385
|
-
return /* @__PURE__ */ React42.createElement(RadioGroup, { ...innerProps }, items.map((item) => /* @__PURE__ */ React42.createElement(Radio, { key: `${item.value}`, value: item.value, label: item.label })));
|
|
6386
|
-
}
|
|
6387
|
-
RadioList.displayName = "RadioList";
|
|
6301
|
+
SearchBar.displayName = "SearchBar";
|
|
6388
6302
|
|
|
6389
6303
|
// src/components/Stepper/Stepper.tsx
|
|
6390
6304
|
import React43 from "react";
|
|
@@ -6394,15 +6308,15 @@ import {
|
|
|
6394
6308
|
StepIndicator as JoyStepIndicator,
|
|
6395
6309
|
stepClasses,
|
|
6396
6310
|
stepIndicatorClasses,
|
|
6397
|
-
styled as
|
|
6311
|
+
styled as styled26
|
|
6398
6312
|
} from "@mui/joy";
|
|
6399
6313
|
import CheckIcon from "@mui/icons-material/Check";
|
|
6400
6314
|
import { motion as motion27 } from "framer-motion";
|
|
6401
|
-
var Step =
|
|
6315
|
+
var Step = styled26(JoyStep)({});
|
|
6402
6316
|
Step.displayName = "Step";
|
|
6403
|
-
var StepIndicator =
|
|
6317
|
+
var StepIndicator = styled26(JoyStepIndicator)({});
|
|
6404
6318
|
StepIndicator.displayName = "StepIndicator";
|
|
6405
|
-
var StyledStepper =
|
|
6319
|
+
var StyledStepper = styled26(JoyStepper)(({ theme }) => ({
|
|
6406
6320
|
"--StepIndicator-size": "24px",
|
|
6407
6321
|
"--Step-gap": theme.spacing(2),
|
|
6408
6322
|
"--joy-palette-success-solidBg": "var(--joy-palette-success-400)",
|
|
@@ -6488,10 +6402,10 @@ Stepper.displayName = "Stepper";
|
|
|
6488
6402
|
|
|
6489
6403
|
// src/components/Switch/Switch.tsx
|
|
6490
6404
|
import React44 from "react";
|
|
6491
|
-
import { Switch as JoySwitch, styled as
|
|
6405
|
+
import { Switch as JoySwitch, styled as styled27, switchClasses } from "@mui/joy";
|
|
6492
6406
|
import { motion as motion28 } from "framer-motion";
|
|
6493
6407
|
var MotionSwitch = motion28(JoySwitch);
|
|
6494
|
-
var StyledThumb =
|
|
6408
|
+
var StyledThumb = styled27(motion28.div)({
|
|
6495
6409
|
"--Icon-fontSize": "calc(var(--Switch-thumbSize) * 0.75)",
|
|
6496
6410
|
display: "inline-flex",
|
|
6497
6411
|
justifyContent: "center",
|
|
@@ -6536,15 +6450,15 @@ import {
|
|
|
6536
6450
|
Tab as JoyTab,
|
|
6537
6451
|
TabList as JoyTabList,
|
|
6538
6452
|
TabPanel as JoyTabPanel,
|
|
6539
|
-
styled as
|
|
6453
|
+
styled as styled28,
|
|
6540
6454
|
tabClasses
|
|
6541
6455
|
} from "@mui/joy";
|
|
6542
|
-
var StyledTabs =
|
|
6456
|
+
var StyledTabs = styled28(JoyTabs)(({ theme }) => ({
|
|
6543
6457
|
backgroundColor: theme.palette.background.body
|
|
6544
6458
|
}));
|
|
6545
6459
|
var Tabs = StyledTabs;
|
|
6546
6460
|
Tabs.displayName = "Tabs";
|
|
6547
|
-
var StyledTab =
|
|
6461
|
+
var StyledTab = styled28(JoyTab)(({ theme }) => ({
|
|
6548
6462
|
gap: theme.spacing(2),
|
|
6549
6463
|
[`&:not(.${tabClasses.selected})`]: {
|
|
6550
6464
|
color: theme.palette.neutral[700]
|
|
@@ -6822,8 +6736,8 @@ function ThemeProvider(props) {
|
|
|
6822
6736
|
ThemeProvider.displayName = "ThemeProvider";
|
|
6823
6737
|
|
|
6824
6738
|
// src/components/Uploader/Uploader.tsx
|
|
6825
|
-
import React47, { useCallback as
|
|
6826
|
-
import { styled as
|
|
6739
|
+
import React47, { useCallback as useCallback17, useEffect as useEffect12, useMemo as useMemo15, useRef as useRef11, useState as useState16 } from "react";
|
|
6740
|
+
import { styled as styled29, Input as Input2 } from "@mui/joy";
|
|
6827
6741
|
import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
|
|
6828
6742
|
import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
|
|
6829
6743
|
import MuiClearIcon from "@mui/icons-material/ClearRounded";
|
|
@@ -6845,7 +6759,7 @@ var esmFiles = {
|
|
|
6845
6759
|
"@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/prevent-unhandled.js"
|
|
6846
6760
|
)
|
|
6847
6761
|
};
|
|
6848
|
-
var VisuallyHiddenInput =
|
|
6762
|
+
var VisuallyHiddenInput = styled29(Input2)({
|
|
6849
6763
|
width: "1px",
|
|
6850
6764
|
height: "1px",
|
|
6851
6765
|
overflow: "hidden",
|
|
@@ -6854,18 +6768,18 @@ var VisuallyHiddenInput = styled30(Input2)({
|
|
|
6854
6768
|
clipPath: "inset(50%)",
|
|
6855
6769
|
position: "absolute"
|
|
6856
6770
|
});
|
|
6857
|
-
var PreviewRoot =
|
|
6771
|
+
var PreviewRoot = styled29(Stack_default, {
|
|
6858
6772
|
name: "Uploader",
|
|
6859
6773
|
slot: "PreviewRoot"
|
|
6860
6774
|
})({});
|
|
6861
|
-
var UploadCard =
|
|
6775
|
+
var UploadCard = styled29(Card, {
|
|
6862
6776
|
name: "Uploader",
|
|
6863
6777
|
slot: "UploadCard"
|
|
6864
6778
|
})(({ theme }) => ({
|
|
6865
6779
|
padding: theme.spacing(2.5),
|
|
6866
6780
|
border: `1px solid ${theme.palette.neutral.outlinedBorder}`
|
|
6867
6781
|
}));
|
|
6868
|
-
var UploadFileIcon =
|
|
6782
|
+
var UploadFileIcon = styled29(MuiUploadFileIcon, {
|
|
6869
6783
|
name: "Uploader",
|
|
6870
6784
|
slot: "UploadFileIcon"
|
|
6871
6785
|
})(({ theme }) => ({
|
|
@@ -6873,7 +6787,7 @@ var UploadFileIcon = styled30(MuiUploadFileIcon, {
|
|
|
6873
6787
|
width: "32px",
|
|
6874
6788
|
height: "32px"
|
|
6875
6789
|
}));
|
|
6876
|
-
var ClearIcon2 =
|
|
6790
|
+
var ClearIcon2 = styled29(MuiClearIcon, {
|
|
6877
6791
|
name: "Uploader",
|
|
6878
6792
|
slot: "ClearIcon"
|
|
6879
6793
|
})(({ theme }) => ({
|
|
@@ -6913,13 +6827,13 @@ var Preview = (props) => {
|
|
|
6913
6827
|
file.name
|
|
6914
6828
|
), !!file.size && /* @__PURE__ */ React47.createElement(Typography_default, { level: "body-xs", fontWeight: "300", lineHeight: "1.33", textColor: "text.tertiary" }, getFileSize(file.size))), /* @__PURE__ */ React47.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ React47.createElement(ClearIcon2, null))))));
|
|
6915
6829
|
};
|
|
6916
|
-
var UploaderRoot =
|
|
6830
|
+
var UploaderRoot = styled29(Stack_default, {
|
|
6917
6831
|
name: "Uploader",
|
|
6918
6832
|
slot: "root"
|
|
6919
6833
|
})(({ theme }) => ({
|
|
6920
6834
|
gap: theme.spacing(2)
|
|
6921
6835
|
}));
|
|
6922
|
-
var FileDropZone =
|
|
6836
|
+
var FileDropZone = styled29(Sheet_default, {
|
|
6923
6837
|
name: "Uploader",
|
|
6924
6838
|
slot: "dropZone",
|
|
6925
6839
|
shouldForwardProp: (prop) => prop !== "error" && prop !== "disabled"
|
|
@@ -6940,7 +6854,7 @@ var FileDropZone = styled30(Sheet_default, {
|
|
|
6940
6854
|
}
|
|
6941
6855
|
})
|
|
6942
6856
|
);
|
|
6943
|
-
var UploaderIcon =
|
|
6857
|
+
var UploaderIcon = styled29(MuiFileUploadIcon, {
|
|
6944
6858
|
name: "Uploader",
|
|
6945
6859
|
slot: "iconContainer",
|
|
6946
6860
|
shouldForwardProp: (prop) => prop !== "error" && prop !== "disabled"
|
|
@@ -6971,8 +6885,8 @@ var Uploader = React47.memo(
|
|
|
6971
6885
|
error: errorProp,
|
|
6972
6886
|
helperText: helperTextProp
|
|
6973
6887
|
} = props;
|
|
6974
|
-
const dropZoneRef =
|
|
6975
|
-
const inputRef =
|
|
6888
|
+
const dropZoneRef = useRef11(null);
|
|
6889
|
+
const inputRef = useRef11(null);
|
|
6976
6890
|
const [errorText, setErrorText] = useState16();
|
|
6977
6891
|
const [files, setFiles] = useState16([]);
|
|
6978
6892
|
const [uploaded, setUploaded] = useState16(props.uploaded || []);
|
|
@@ -7022,7 +6936,7 @@ var Uploader = React47.memo(
|
|
|
7022
6936
|
() => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
|
|
7023
6937
|
[files, maxCount, uploaded]
|
|
7024
6938
|
);
|
|
7025
|
-
const addFiles =
|
|
6939
|
+
const addFiles = useCallback17(
|
|
7026
6940
|
(uploads) => {
|
|
7027
6941
|
try {
|
|
7028
6942
|
const types = parsedAccepts.map((type) => type.replace(".", "")) || [];
|
|
@@ -7067,7 +6981,7 @@ var Uploader = React47.memo(
|
|
|
7067
6981
|
},
|
|
7068
6982
|
[files, uploaded, maxCount, parsedAccepts, maxFileSize, maxFileTotalSize, name, onChange]
|
|
7069
6983
|
);
|
|
7070
|
-
|
|
6984
|
+
useEffect12(() => {
|
|
7071
6985
|
if (!dropZoneRef.current || disabled) {
|
|
7072
6986
|
return;
|
|
7073
6987
|
}
|
|
@@ -7105,7 +7019,7 @@ var Uploader = React47.memo(
|
|
|
7105
7019
|
);
|
|
7106
7020
|
return () => cleanup?.();
|
|
7107
7021
|
}, [disabled, addFiles]);
|
|
7108
|
-
|
|
7022
|
+
useEffect12(() => {
|
|
7109
7023
|
if (inputRef.current && minCount) {
|
|
7110
7024
|
if (files.length < minCount) {
|
|
7111
7025
|
inputRef.current.setCustomValidity(`At least ${minCount} files are required.`);
|
|
@@ -7114,14 +7028,14 @@ var Uploader = React47.memo(
|
|
|
7114
7028
|
}
|
|
7115
7029
|
}
|
|
7116
7030
|
}, [inputRef, files, minCount]);
|
|
7117
|
-
const handleFileChanged =
|
|
7031
|
+
const handleFileChanged = useCallback17(
|
|
7118
7032
|
(event) => {
|
|
7119
7033
|
const files2 = Array.from(event.target.files || []);
|
|
7120
7034
|
addFiles(files2);
|
|
7121
7035
|
},
|
|
7122
7036
|
[addFiles]
|
|
7123
7037
|
);
|
|
7124
|
-
const handleDeleteFile =
|
|
7038
|
+
const handleDeleteFile = useCallback17(
|
|
7125
7039
|
(deletedFile) => {
|
|
7126
7040
|
if (deletedFile instanceof File) {
|
|
7127
7041
|
setFiles((current) => {
|
|
@@ -7141,7 +7055,7 @@ var Uploader = React47.memo(
|
|
|
7141
7055
|
},
|
|
7142
7056
|
[name, onChange, onDelete]
|
|
7143
7057
|
);
|
|
7144
|
-
const handleUploaderButtonClick =
|
|
7058
|
+
const handleUploaderButtonClick = useCallback17(() => {
|
|
7145
7059
|
inputRef.current?.click();
|
|
7146
7060
|
}, []);
|
|
7147
7061
|
const uploader = /* @__PURE__ */ React47.createElement(
|
|
@@ -7258,7 +7172,7 @@ export {
|
|
|
7258
7172
|
Radio,
|
|
7259
7173
|
RadioGroup,
|
|
7260
7174
|
RadioList,
|
|
7261
|
-
|
|
7175
|
+
SearchBar,
|
|
7262
7176
|
Select,
|
|
7263
7177
|
Sheet,
|
|
7264
7178
|
Skeleton2 as Skeleton,
|
|
@@ -7333,17 +7247,17 @@ export {
|
|
|
7333
7247
|
modalDialogClasses,
|
|
7334
7248
|
modalOverflowClasses,
|
|
7335
7249
|
optionClasses,
|
|
7336
|
-
|
|
7250
|
+
radioClasses,
|
|
7337
7251
|
radioGroupClasses,
|
|
7338
7252
|
selectClasses,
|
|
7339
|
-
|
|
7253
|
+
sheetClasses,
|
|
7340
7254
|
skeletonClasses,
|
|
7341
7255
|
sliderClasses,
|
|
7342
7256
|
stackClasses,
|
|
7343
7257
|
stepButtonClasses,
|
|
7344
7258
|
stepClasses2 as stepClasses,
|
|
7345
7259
|
stepperClasses,
|
|
7346
|
-
|
|
7260
|
+
styled30 as styled,
|
|
7347
7261
|
switchClasses2 as switchClasses,
|
|
7348
7262
|
tabListClasses,
|
|
7349
7263
|
tabPanelClasses,
|