@ceed/cds 1.24.1-next.1 → 1.24.1-next.3
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/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 +0 -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/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 +0 -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 +371 -617
- package/dist/index.d.ts +1 -1
- package/dist/index.js +342 -532
- package/dist/llms.txt +0 -9
- package/framer/index.js +163 -1
- package/package.json +24 -34
- package/README.md +0 -51
- 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,
|
|
@@ -2085,9 +2046,9 @@ function getTextAlign(props) {
|
|
|
2085
2046
|
var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
|
|
2086
2047
|
|
|
2087
2048
|
// src/components/DataTable/styled.tsx
|
|
2088
|
-
import
|
|
2049
|
+
import React16 from "react";
|
|
2089
2050
|
import { styled as styled8, LinearProgress, buttonClasses, iconButtonClasses } from "@mui/joy";
|
|
2090
|
-
import { motion as
|
|
2051
|
+
import { motion as motion16 } from "framer-motion";
|
|
2091
2052
|
import SortIcon from "@mui/icons-material/ArrowUpwardRounded";
|
|
2092
2053
|
var EllipsisDiv = styled8("div", {
|
|
2093
2054
|
name: "DataTable",
|
|
@@ -2161,7 +2122,7 @@ var Asterisk = styled8("span", {
|
|
|
2161
2122
|
color: "var(--ceed-palette-danger-500)",
|
|
2162
2123
|
marginLeft: theme.spacing(0.5)
|
|
2163
2124
|
}));
|
|
2164
|
-
var StyledTh = styled8(
|
|
2125
|
+
var StyledTh = styled8(motion16.th)(({ theme }) => ({
|
|
2165
2126
|
boxShadow: "1px 0 var(--TableCell-borderColor)"
|
|
2166
2127
|
}));
|
|
2167
2128
|
var StyledTd = styled8("td")(({ theme }) => ({
|
|
@@ -2180,9 +2141,9 @@ var StyledTd = styled8("td")(({ theme }) => ({
|
|
|
2180
2141
|
}
|
|
2181
2142
|
}
|
|
2182
2143
|
}));
|
|
2183
|
-
var MotionSortIcon =
|
|
2184
|
-
var DefaultLoadingOverlay = () => /* @__PURE__ */
|
|
2185
|
-
var Resizer = (ref, targetRef = ref) => /* @__PURE__ */
|
|
2144
|
+
var MotionSortIcon = motion16(SortIcon);
|
|
2145
|
+
var DefaultLoadingOverlay = () => /* @__PURE__ */ React16.createElement(LinearProgress, { value: 8, variant: "plain" });
|
|
2146
|
+
var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React16.createElement(
|
|
2186
2147
|
Box_default,
|
|
2187
2148
|
{
|
|
2188
2149
|
sx: {
|
|
@@ -2215,12 +2176,12 @@ var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React17.createElement(
|
|
|
2215
2176
|
|
|
2216
2177
|
// src/components/DataTable/components.tsx
|
|
2217
2178
|
import React22, {
|
|
2218
|
-
useRef as
|
|
2219
|
-
useState as
|
|
2179
|
+
useRef as useRef4,
|
|
2180
|
+
useState as useState7,
|
|
2220
2181
|
useLayoutEffect,
|
|
2221
2182
|
useMemo as useMemo8,
|
|
2222
|
-
useCallback as
|
|
2223
|
-
useEffect as
|
|
2183
|
+
useCallback as useCallback8,
|
|
2184
|
+
useEffect as useEffect4,
|
|
2224
2185
|
memo,
|
|
2225
2186
|
createElement
|
|
2226
2187
|
} from "react";
|
|
@@ -2228,7 +2189,7 @@ import { styled as styled12, useTheme } from "@mui/joy";
|
|
|
2228
2189
|
import { AnimatePresence as AnimatePresence2 } from "framer-motion";
|
|
2229
2190
|
|
|
2230
2191
|
// src/components/DatePicker/DatePicker.tsx
|
|
2231
|
-
import
|
|
2192
|
+
import React17, { forwardRef as forwardRef6, useCallback as useCallback7, useEffect as useEffect3, useImperativeHandle, useRef as useRef3, useState as useState6 } from "react";
|
|
2232
2193
|
import { IMaskInput, IMask } from "react-imask";
|
|
2233
2194
|
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
|
|
2234
2195
|
import { styled as styled10, useThemeProps as useThemeProps4 } from "@mui/joy";
|
|
@@ -2243,8 +2204,8 @@ var Sheet_default = Sheet;
|
|
|
2243
2204
|
|
|
2244
2205
|
// src/components/DialogActions/DialogActions.tsx
|
|
2245
2206
|
import { DialogActions as JoyDialogActions, styled as styled9 } from "@mui/joy";
|
|
2246
|
-
import { motion as
|
|
2247
|
-
var MotionDialogActions =
|
|
2207
|
+
import { motion as motion17 } from "framer-motion";
|
|
2208
|
+
var MotionDialogActions = motion17(JoyDialogActions);
|
|
2248
2209
|
var StyledDialogActions = styled9(MotionDialogActions)(({ theme }) => ({
|
|
2249
2210
|
padding: theme.spacing(2),
|
|
2250
2211
|
gap: theme.spacing(2),
|
|
@@ -2340,9 +2301,9 @@ function parseDate(dateString, format) {
|
|
|
2340
2301
|
var formatToPattern = (format) => {
|
|
2341
2302
|
return format.replace(/YYYY/g, "Y").replace(/MM/g, "M").replace(/DD/g, "D").replace(/[^YMD\s]/g, (match) => `${match}\``);
|
|
2342
2303
|
};
|
|
2343
|
-
var TextMaskAdapter3 =
|
|
2304
|
+
var TextMaskAdapter3 = React17.forwardRef(function TextMaskAdapter4(props, ref) {
|
|
2344
2305
|
const { onChange, format, ...other } = props;
|
|
2345
|
-
return /* @__PURE__ */
|
|
2306
|
+
return /* @__PURE__ */ React17.createElement(
|
|
2346
2307
|
IMaskInput,
|
|
2347
2308
|
{
|
|
2348
2309
|
...other,
|
|
@@ -2402,24 +2363,24 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2402
2363
|
shouldDisableDate,
|
|
2403
2364
|
...innerProps
|
|
2404
2365
|
} = props;
|
|
2405
|
-
const innerRef =
|
|
2406
|
-
const buttonRef =
|
|
2366
|
+
const innerRef = useRef3(null);
|
|
2367
|
+
const buttonRef = useRef3(null);
|
|
2407
2368
|
const [value, setValue] = useControlledState(
|
|
2408
2369
|
props.value,
|
|
2409
2370
|
props.defaultValue || "",
|
|
2410
|
-
|
|
2371
|
+
useCallback7((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
2411
2372
|
);
|
|
2412
|
-
const [displayValue, setDisplayValue] =
|
|
2373
|
+
const [displayValue, setDisplayValue] = useState6(
|
|
2413
2374
|
() => value ? formatValueString(parseDate(value, format), displayFormat) : ""
|
|
2414
2375
|
);
|
|
2415
|
-
const [anchorEl, setAnchorEl] =
|
|
2376
|
+
const [anchorEl, setAnchorEl] = useState6(null);
|
|
2416
2377
|
const open = Boolean(anchorEl);
|
|
2417
|
-
|
|
2378
|
+
useEffect3(() => {
|
|
2418
2379
|
if (!anchorEl) {
|
|
2419
2380
|
innerRef.current?.blur();
|
|
2420
2381
|
}
|
|
2421
2382
|
}, [anchorEl, innerRef]);
|
|
2422
|
-
|
|
2383
|
+
useEffect3(() => {
|
|
2423
2384
|
if (value === "") {
|
|
2424
2385
|
setDisplayValue("");
|
|
2425
2386
|
return;
|
|
@@ -2430,7 +2391,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2430
2391
|
}
|
|
2431
2392
|
}, [displayFormat, displayValue, format, value]);
|
|
2432
2393
|
useImperativeHandle(ref, () => innerRef.current, [innerRef]);
|
|
2433
|
-
const handleChange =
|
|
2394
|
+
const handleChange = useCallback7(
|
|
2434
2395
|
(event) => {
|
|
2435
2396
|
const value2 = event.target.value;
|
|
2436
2397
|
setDisplayValue(value2 ? formatValueString(parseDate(value2, format), displayFormat) : value2);
|
|
@@ -2438,7 +2399,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2438
2399
|
},
|
|
2439
2400
|
[displayFormat, format, setValue]
|
|
2440
2401
|
);
|
|
2441
|
-
const handleDisplayInputChange =
|
|
2402
|
+
const handleDisplayInputChange = useCallback7(
|
|
2442
2403
|
(event) => {
|
|
2443
2404
|
if (event.target.value === "") {
|
|
2444
2405
|
handleChange({
|
|
@@ -2463,7 +2424,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2463
2424
|
},
|
|
2464
2425
|
[displayFormat, format, handleChange, props.name]
|
|
2465
2426
|
);
|
|
2466
|
-
const handleCalendarToggle =
|
|
2427
|
+
const handleCalendarToggle = useCallback7(
|
|
2467
2428
|
(event) => {
|
|
2468
2429
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
2469
2430
|
setTimeout(() => {
|
|
@@ -2472,7 +2433,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2472
2433
|
},
|
|
2473
2434
|
[anchorEl, setAnchorEl, innerRef]
|
|
2474
2435
|
);
|
|
2475
|
-
const handleInputMouseDown =
|
|
2436
|
+
const handleInputMouseDown = useCallback7(
|
|
2476
2437
|
(event) => {
|
|
2477
2438
|
if (inputReadOnly) {
|
|
2478
2439
|
event.preventDefault();
|
|
@@ -2481,7 +2442,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2481
2442
|
},
|
|
2482
2443
|
[inputReadOnly, buttonRef]
|
|
2483
2444
|
);
|
|
2484
|
-
return /* @__PURE__ */
|
|
2445
|
+
return /* @__PURE__ */ React17.createElement(DatePickerRoot, null, /* @__PURE__ */ React17.createElement(FocusTrap, { open: true }, /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
|
|
2485
2446
|
Input_default,
|
|
2486
2447
|
{
|
|
2487
2448
|
...innerProps,
|
|
@@ -2509,7 +2470,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2509
2470
|
},
|
|
2510
2471
|
className,
|
|
2511
2472
|
sx,
|
|
2512
|
-
endDecorator: /* @__PURE__ */
|
|
2473
|
+
endDecorator: /* @__PURE__ */ React17.createElement(
|
|
2513
2474
|
CalendarButton,
|
|
2514
2475
|
{
|
|
2515
2476
|
ref: buttonRef,
|
|
@@ -2521,13 +2482,13 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2521
2482
|
"aria-expanded": open,
|
|
2522
2483
|
disabled
|
|
2523
2484
|
},
|
|
2524
|
-
/* @__PURE__ */
|
|
2485
|
+
/* @__PURE__ */ React17.createElement(CalendarTodayIcon, null)
|
|
2525
2486
|
),
|
|
2526
2487
|
label,
|
|
2527
2488
|
helperText,
|
|
2528
2489
|
readOnly: readOnly || inputReadOnly
|
|
2529
2490
|
}
|
|
2530
|
-
), open && /* @__PURE__ */
|
|
2491
|
+
), open && /* @__PURE__ */ React17.createElement(ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React17.createElement(
|
|
2531
2492
|
StyledPopper,
|
|
2532
2493
|
{
|
|
2533
2494
|
id: "date-picker-popper",
|
|
@@ -2546,7 +2507,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2546
2507
|
"aria-label": "Calendar Tooltip",
|
|
2547
2508
|
"aria-expanded": open
|
|
2548
2509
|
},
|
|
2549
|
-
/* @__PURE__ */
|
|
2510
|
+
/* @__PURE__ */ React17.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React17.createElement(
|
|
2550
2511
|
Calendar_default,
|
|
2551
2512
|
{
|
|
2552
2513
|
value: value && !Number.isNaN(parseDate(value, format).getTime()) ? [parseDate(value, format), void 0] : void 0,
|
|
@@ -2565,14 +2526,14 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2565
2526
|
disablePast,
|
|
2566
2527
|
shouldDisableDate: shouldDisableDate ? (date) => shouldDisableDate(formatValueString(date, format)) : void 0
|
|
2567
2528
|
}
|
|
2568
|
-
), !hideClearButton && /* @__PURE__ */
|
|
2529
|
+
), !hideClearButton && /* @__PURE__ */ React17.createElement(
|
|
2569
2530
|
DialogActions_default,
|
|
2570
2531
|
{
|
|
2571
2532
|
sx: {
|
|
2572
2533
|
p: 1
|
|
2573
2534
|
}
|
|
2574
2535
|
},
|
|
2575
|
-
/* @__PURE__ */
|
|
2536
|
+
/* @__PURE__ */ React17.createElement(
|
|
2576
2537
|
Button_default,
|
|
2577
2538
|
{
|
|
2578
2539
|
size,
|
|
@@ -2598,10 +2559,10 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2598
2559
|
var DatePicker_default = DatePicker;
|
|
2599
2560
|
|
|
2600
2561
|
// src/components/Textarea/Textarea.tsx
|
|
2601
|
-
import
|
|
2562
|
+
import React18 from "react";
|
|
2602
2563
|
import { Textarea as JoyTextarea } from "@mui/joy";
|
|
2603
|
-
import { motion as
|
|
2604
|
-
var MotionTextarea =
|
|
2564
|
+
import { motion as motion18 } from "framer-motion";
|
|
2565
|
+
var MotionTextarea = motion18(JoyTextarea);
|
|
2605
2566
|
var Textarea = (props) => {
|
|
2606
2567
|
const {
|
|
2607
2568
|
label,
|
|
@@ -2618,7 +2579,7 @@ var Textarea = (props) => {
|
|
|
2618
2579
|
className,
|
|
2619
2580
|
...innerProps
|
|
2620
2581
|
} = props;
|
|
2621
|
-
const textarea = /* @__PURE__ */
|
|
2582
|
+
const textarea = /* @__PURE__ */ React18.createElement(
|
|
2622
2583
|
MotionTextarea,
|
|
2623
2584
|
{
|
|
2624
2585
|
required,
|
|
@@ -2630,7 +2591,7 @@ var Textarea = (props) => {
|
|
|
2630
2591
|
...innerProps
|
|
2631
2592
|
}
|
|
2632
2593
|
);
|
|
2633
|
-
return /* @__PURE__ */
|
|
2594
|
+
return /* @__PURE__ */ React18.createElement(
|
|
2634
2595
|
FormControl_default,
|
|
2635
2596
|
{
|
|
2636
2597
|
required,
|
|
@@ -2641,9 +2602,9 @@ var Textarea = (props) => {
|
|
|
2641
2602
|
sx,
|
|
2642
2603
|
className
|
|
2643
2604
|
},
|
|
2644
|
-
label && /* @__PURE__ */
|
|
2605
|
+
label && /* @__PURE__ */ React18.createElement(FormLabel_default, null, label),
|
|
2645
2606
|
textarea,
|
|
2646
|
-
helperText && /* @__PURE__ */
|
|
2607
|
+
helperText && /* @__PURE__ */ React18.createElement(FormHelperText_default, null, helperText)
|
|
2647
2608
|
);
|
|
2648
2609
|
};
|
|
2649
2610
|
Textarea.displayName = "Textarea";
|
|
@@ -2652,10 +2613,10 @@ Textarea.displayName = "Textarea";
|
|
|
2652
2613
|
var Textarea_default = Textarea;
|
|
2653
2614
|
|
|
2654
2615
|
// src/components/Select/Select.tsx
|
|
2655
|
-
import
|
|
2616
|
+
import React19, { useMemo as useMemo7 } from "react";
|
|
2656
2617
|
import { Select as JoySelect, Option as JoyOption, ListItemContent as ListItemContent2, Typography as Typography3 } from "@mui/joy";
|
|
2657
|
-
import { motion as
|
|
2658
|
-
var MotionOption =
|
|
2618
|
+
import { motion as motion19 } from "framer-motion";
|
|
2619
|
+
var MotionOption = motion19(JoyOption);
|
|
2659
2620
|
var Option = MotionOption;
|
|
2660
2621
|
var secondaryTextLevelMap2 = {
|
|
2661
2622
|
sm: "body-xs",
|
|
@@ -2710,7 +2671,7 @@ function Select(props) {
|
|
|
2710
2671
|
});
|
|
2711
2672
|
return map;
|
|
2712
2673
|
}, [options]);
|
|
2713
|
-
const select = /* @__PURE__ */
|
|
2674
|
+
const select = /* @__PURE__ */ React19.createElement(
|
|
2714
2675
|
JoySelect,
|
|
2715
2676
|
{
|
|
2716
2677
|
...innerProps,
|
|
@@ -2727,9 +2688,9 @@ function Select(props) {
|
|
|
2727
2688
|
return optionMap.get(selected.value)?.label;
|
|
2728
2689
|
}
|
|
2729
2690
|
},
|
|
2730
|
-
options.map((option) => /* @__PURE__ */
|
|
2691
|
+
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(Typography3, { level: "inherit" }, option.label), /* @__PURE__ */ React19.createElement(Typography3, { level: secondaryTextLevelMap2[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : option.label))
|
|
2731
2692
|
);
|
|
2732
|
-
return /* @__PURE__ */
|
|
2693
|
+
return /* @__PURE__ */ React19.createElement(
|
|
2733
2694
|
FormControl_default,
|
|
2734
2695
|
{
|
|
2735
2696
|
required,
|
|
@@ -2740,9 +2701,9 @@ function Select(props) {
|
|
|
2740
2701
|
sx,
|
|
2741
2702
|
className
|
|
2742
2703
|
},
|
|
2743
|
-
label && /* @__PURE__ */
|
|
2704
|
+
label && /* @__PURE__ */ React19.createElement(FormLabel_default, null, label),
|
|
2744
2705
|
select,
|
|
2745
|
-
helperText && /* @__PURE__ */
|
|
2706
|
+
helperText && /* @__PURE__ */ React19.createElement(FormHelperText_default, null, helperText)
|
|
2746
2707
|
);
|
|
2747
2708
|
}
|
|
2748
2709
|
Select.displayName = "Select";
|
|
@@ -2753,6 +2714,19 @@ var Select_default = Select;
|
|
|
2753
2714
|
// src/components/DataTable/components.tsx
|
|
2754
2715
|
import { Link } from "@mui/joy";
|
|
2755
2716
|
|
|
2717
|
+
// src/components/Tooltip/Tooltip.tsx
|
|
2718
|
+
import React20 from "react";
|
|
2719
|
+
import { Tooltip as JoyTooltip } from "@mui/joy";
|
|
2720
|
+
import { motion as motion20 } from "framer-motion";
|
|
2721
|
+
var MotionTooltip = motion20(JoyTooltip);
|
|
2722
|
+
var Tooltip = (props) => {
|
|
2723
|
+
return /* @__PURE__ */ React20.createElement(MotionTooltip, { ...props });
|
|
2724
|
+
};
|
|
2725
|
+
Tooltip.displayName = "Tooltip";
|
|
2726
|
+
|
|
2727
|
+
// src/components/Tooltip/index.ts
|
|
2728
|
+
var Tooltip_default = Tooltip;
|
|
2729
|
+
|
|
2756
2730
|
// src/components/InfoSign/InfoSign.tsx
|
|
2757
2731
|
import React21 from "react";
|
|
2758
2732
|
import { styled as styled11, tooltipClasses } from "@mui/joy";
|
|
@@ -2788,8 +2762,8 @@ var InfoSign_default = InfoSign;
|
|
|
2788
2762
|
|
|
2789
2763
|
// src/components/DataTable/components.tsx
|
|
2790
2764
|
var TextEllipsis = ({ children }) => {
|
|
2791
|
-
const textRef =
|
|
2792
|
-
const [showTooltip, setShowTooltip] =
|
|
2765
|
+
const textRef = useRef4(null);
|
|
2766
|
+
const [showTooltip, setShowTooltip] = useState7(false);
|
|
2793
2767
|
useLayoutEffect(() => {
|
|
2794
2768
|
const element = textRef.current;
|
|
2795
2769
|
if (element) {
|
|
@@ -2804,8 +2778,8 @@ var TextEllipsis = ({ children }) => {
|
|
|
2804
2778
|
return content;
|
|
2805
2779
|
};
|
|
2806
2780
|
var CellTextEllipsis = ({ children }) => {
|
|
2807
|
-
const textRef =
|
|
2808
|
-
const [showTooltip, setShowTooltip] =
|
|
2781
|
+
const textRef = useRef4(null);
|
|
2782
|
+
const [showTooltip, setShowTooltip] = useState7(false);
|
|
2809
2783
|
useLayoutEffect(() => {
|
|
2810
2784
|
const element = textRef.current;
|
|
2811
2785
|
if (element) {
|
|
@@ -2857,7 +2831,7 @@ var HeadCell = (props) => {
|
|
|
2857
2831
|
const theme = useTheme();
|
|
2858
2832
|
const ref = headerRef;
|
|
2859
2833
|
const colRef = tableColRef;
|
|
2860
|
-
const [isHovered, setIsHovered] =
|
|
2834
|
+
const [isHovered, setIsHovered] = useState7(false);
|
|
2861
2835
|
const sortable = type === "actions" ? false : _sortable;
|
|
2862
2836
|
const headId = useMemo8(
|
|
2863
2837
|
() => `${tableId}_header_${headerName ?? field}`.trim(),
|
|
@@ -2936,7 +2910,7 @@ var HeadCell = (props) => {
|
|
|
2936
2910
|
ref,
|
|
2937
2911
|
key: field,
|
|
2938
2912
|
style,
|
|
2939
|
-
onClick:
|
|
2913
|
+
onClick: useCallback8(
|
|
2940
2914
|
(e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
|
|
2941
2915
|
[field, onSortChange, sort, sortable]
|
|
2942
2916
|
),
|
|
@@ -2971,8 +2945,8 @@ var BodyCell = (props) => {
|
|
|
2971
2945
|
onCellEditStop
|
|
2972
2946
|
} = props;
|
|
2973
2947
|
const theme = useTheme();
|
|
2974
|
-
const [value, setValue] =
|
|
2975
|
-
const cellRef =
|
|
2948
|
+
const [value, setValue] = useState7(row[field]);
|
|
2949
|
+
const cellRef = useRef4(null);
|
|
2976
2950
|
const params = useMemo8(
|
|
2977
2951
|
() => ({
|
|
2978
2952
|
row,
|
|
@@ -3117,7 +3091,7 @@ var BodyCell = (props) => {
|
|
|
3117
3091
|
() => (typeof cellClassName === "function" ? cellClassName(params) : cellClassName) || "",
|
|
3118
3092
|
[cellClassName, params]
|
|
3119
3093
|
);
|
|
3120
|
-
|
|
3094
|
+
useEffect4(() => {
|
|
3121
3095
|
setValue(row[field]);
|
|
3122
3096
|
}, [row, field]);
|
|
3123
3097
|
return /* @__PURE__ */ React22.createElement(
|
|
@@ -3187,10 +3161,10 @@ var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
|
|
|
3187
3161
|
});
|
|
3188
3162
|
|
|
3189
3163
|
// src/components/DataTable/hooks.ts
|
|
3190
|
-
import { useState as
|
|
3164
|
+
import { useState as useState8, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useMemo as useMemo9, useCallback as useCallback9, useEffect as useEffect5, createRef } from "react";
|
|
3191
3165
|
function useColumnWidths(columnsByField) {
|
|
3192
|
-
const [widths, setWidths] =
|
|
3193
|
-
const roRef =
|
|
3166
|
+
const [widths, setWidths] = useState8({});
|
|
3167
|
+
const roRef = useRef5();
|
|
3194
3168
|
useLayoutEffect2(() => {
|
|
3195
3169
|
if (roRef.current) roRef.current.disconnect();
|
|
3196
3170
|
roRef.current = new ResizeObserver((entries) => {
|
|
@@ -3245,14 +3219,14 @@ function useDataTableRenderer({
|
|
|
3245
3219
|
"You cannot use both `pinnedColumns` and `columnGroupingModel` at the same time. Please choose one of them."
|
|
3246
3220
|
);
|
|
3247
3221
|
}
|
|
3248
|
-
const onSelectionModelChangeRef =
|
|
3222
|
+
const onSelectionModelChangeRef = useRef5(onSelectionModelChange);
|
|
3249
3223
|
onSelectionModelChangeRef.current = onSelectionModelChange;
|
|
3250
|
-
const [focusedRowId, setFocusedRowId] =
|
|
3251
|
-
const [selectionAnchor, setSelectionAnchor] =
|
|
3224
|
+
const [focusedRowId, setFocusedRowId] = useState8(null);
|
|
3225
|
+
const [selectionAnchor, setSelectionAnchor] = useState8(null);
|
|
3252
3226
|
const [sortModel, setSortModel] = useControlledState(
|
|
3253
3227
|
controlledSortModel,
|
|
3254
3228
|
initialState?.sorting?.sortModel ?? [],
|
|
3255
|
-
|
|
3229
|
+
useCallback9((sortModel2) => onSortModelChange?.(sortModel2), [onSortModelChange])
|
|
3256
3230
|
);
|
|
3257
3231
|
const reorderedColumns = useMemo9(() => {
|
|
3258
3232
|
if (!columnGroupingModel) return columnsProp;
|
|
@@ -3272,7 +3246,7 @@ function useDataTableRenderer({
|
|
|
3272
3246
|
),
|
|
3273
3247
|
[reorderedColumns]
|
|
3274
3248
|
);
|
|
3275
|
-
const sortComparator =
|
|
3249
|
+
const sortComparator = useCallback9(
|
|
3276
3250
|
(rowA, rowB) => {
|
|
3277
3251
|
for (const sort of sortModel) {
|
|
3278
3252
|
const { field, sort: direction } = sort;
|
|
@@ -3308,9 +3282,9 @@ function useDataTableRenderer({
|
|
|
3308
3282
|
() => Array.from(new Set(_sortOrder || ["asc", "desc", null])),
|
|
3309
3283
|
[_sortOrder]
|
|
3310
3284
|
);
|
|
3311
|
-
const [page, setPage] =
|
|
3285
|
+
const [page, setPage] = useState8(paginationModel?.page || 1);
|
|
3312
3286
|
const pageSize = paginationModel?.pageSize || 20;
|
|
3313
|
-
const getId =
|
|
3287
|
+
const getId = useCallback9(
|
|
3314
3288
|
(row, index) => _getId?.(row) ?? row.id ?? `${(index || 0) + (page - 1) * pageSize}`,
|
|
3315
3289
|
[_getId, page, pageSize]
|
|
3316
3290
|
);
|
|
@@ -3326,7 +3300,7 @@ function useDataTableRenderer({
|
|
|
3326
3300
|
}),
|
|
3327
3301
|
[dataInPage, isRowSelectable, getId]
|
|
3328
3302
|
);
|
|
3329
|
-
const handleRangeSelection =
|
|
3303
|
+
const handleRangeSelection = useCallback9(
|
|
3330
3304
|
(anchor, targetIndex) => {
|
|
3331
3305
|
const startIndex = Math.min(anchor.rowIndex, targetIndex);
|
|
3332
3306
|
const endIndex = Math.max(anchor.rowIndex, targetIndex);
|
|
@@ -3363,7 +3337,7 @@ function useDataTableRenderer({
|
|
|
3363
3337
|
[_isTotalSelected, selectionModel, selectableRowCount]
|
|
3364
3338
|
);
|
|
3365
3339
|
const columnWidths = useColumnWidths(columnsByField);
|
|
3366
|
-
const getWidth =
|
|
3340
|
+
const getWidth = useCallback9(
|
|
3367
3341
|
(f) => columnWidths[f] ?? columnsByField[f].width ?? // Column prop 으로 지정된 width
|
|
3368
3342
|
columnsByField[f].minWidth ?? 0,
|
|
3369
3343
|
[columnWidths, columnsByField]
|
|
@@ -3405,14 +3379,14 @@ function useDataTableRenderer({
|
|
|
3405
3379
|
sortOrder,
|
|
3406
3380
|
getWidth
|
|
3407
3381
|
]);
|
|
3408
|
-
const handlePageChange =
|
|
3382
|
+
const handlePageChange = useCallback9(
|
|
3409
3383
|
(newPage) => {
|
|
3410
3384
|
setPage(newPage);
|
|
3411
3385
|
onPaginationModelChange?.({ page: newPage, pageSize });
|
|
3412
3386
|
},
|
|
3413
3387
|
[onPaginationModelChange, pageSize]
|
|
3414
3388
|
);
|
|
3415
|
-
const handleSortChange =
|
|
3389
|
+
const handleSortChange = useCallback9(
|
|
3416
3390
|
(props) => {
|
|
3417
3391
|
const { field, currentSort, multiple } = props;
|
|
3418
3392
|
const column = columnsByField[field];
|
|
@@ -3435,23 +3409,23 @@ function useDataTableRenderer({
|
|
|
3435
3409
|
},
|
|
3436
3410
|
[sortOrder, columnsByField, sortModel, setSortModel]
|
|
3437
3411
|
);
|
|
3438
|
-
|
|
3412
|
+
useEffect5(() => {
|
|
3439
3413
|
if (!paginationModel) {
|
|
3440
3414
|
handlePageChange(1);
|
|
3441
3415
|
}
|
|
3442
3416
|
}, [rowCount, handlePageChange, paginationModel]);
|
|
3443
|
-
|
|
3417
|
+
useEffect5(() => {
|
|
3444
3418
|
const lastPage = Math.max(1, Math.ceil(rowCount / pageSize));
|
|
3445
3419
|
if (page > lastPage) {
|
|
3446
3420
|
handlePageChange(lastPage);
|
|
3447
3421
|
}
|
|
3448
3422
|
}, [page, rowCount, pageSize, handlePageChange]);
|
|
3449
|
-
|
|
3423
|
+
useEffect5(() => {
|
|
3450
3424
|
onSelectionModelChangeRef.current?.([]);
|
|
3451
3425
|
setSelectionAnchor(null);
|
|
3452
3426
|
}, [page]);
|
|
3453
|
-
const prevRowsRef =
|
|
3454
|
-
|
|
3427
|
+
const prevRowsRef = useRef5(_rows);
|
|
3428
|
+
useEffect5(() => {
|
|
3455
3429
|
if (prevRowsRef.current !== _rows) {
|
|
3456
3430
|
setSelectionAnchor(null);
|
|
3457
3431
|
prevRowsRef.current = _rows;
|
|
@@ -3470,8 +3444,8 @@ function useDataTableRenderer({
|
|
|
3470
3444
|
handleSortChange,
|
|
3471
3445
|
isAllSelected,
|
|
3472
3446
|
isTotalSelected,
|
|
3473
|
-
isSelectedRow:
|
|
3474
|
-
isRowSelectable:
|
|
3447
|
+
isSelectedRow: useCallback9((model) => selectedModelSet.has(model), [selectedModelSet]),
|
|
3448
|
+
isRowSelectable: useCallback9(
|
|
3475
3449
|
(rowId, row) => {
|
|
3476
3450
|
if (!isRowSelectable) return true;
|
|
3477
3451
|
return isRowSelectable({ row, id: rowId });
|
|
@@ -3479,13 +3453,13 @@ function useDataTableRenderer({
|
|
|
3479
3453
|
[isRowSelectable]
|
|
3480
3454
|
),
|
|
3481
3455
|
focusedRowId,
|
|
3482
|
-
onRowFocus:
|
|
3456
|
+
onRowFocus: useCallback9((rowId) => {
|
|
3483
3457
|
setFocusedRowId(rowId);
|
|
3484
3458
|
}, []),
|
|
3485
|
-
onAllCheckboxChange:
|
|
3459
|
+
onAllCheckboxChange: useCallback9(() => {
|
|
3486
3460
|
onSelectionModelChange?.(isAllSelected ? [] : selectableDataInPage.map(getId));
|
|
3487
3461
|
}, [isAllSelected, selectableDataInPage, onSelectionModelChange, getId]),
|
|
3488
|
-
onCheckboxChange:
|
|
3462
|
+
onCheckboxChange: useCallback9(
|
|
3489
3463
|
(event, selectedModel) => {
|
|
3490
3464
|
const isShiftClick = "shiftKey" in event && event.shiftKey;
|
|
3491
3465
|
const rowIndex = dataInPage.findIndex((row, i) => getId(row, i) === selectedModel);
|
|
@@ -3518,7 +3492,7 @@ function useDataTableRenderer({
|
|
|
3518
3492
|
),
|
|
3519
3493
|
columns,
|
|
3520
3494
|
processedColumnGroups,
|
|
3521
|
-
onTotalSelect:
|
|
3495
|
+
onTotalSelect: useCallback9(() => {
|
|
3522
3496
|
const selectableRows = rows.filter((row, i) => {
|
|
3523
3497
|
if (!isRowSelectable) return true;
|
|
3524
3498
|
return isRowSelectable({ row, id: getId(row, i) });
|
|
@@ -3603,7 +3577,7 @@ function TableBody(props) {
|
|
|
3603
3577
|
TableBody.displayName = "TableBody";
|
|
3604
3578
|
|
|
3605
3579
|
// src/components/Pagination/Pagination.tsx
|
|
3606
|
-
import React24, { useCallback as
|
|
3580
|
+
import React24, { useCallback as useCallback10, useEffect as useEffect6 } from "react";
|
|
3607
3581
|
import PreviousIcon from "@mui/icons-material/ChevronLeftRounded";
|
|
3608
3582
|
import NextIcon from "@mui/icons-material/ChevronRightRounded";
|
|
3609
3583
|
import FirstPageIcon from "@mui/icons-material/FirstPageRounded";
|
|
@@ -3672,7 +3646,7 @@ function Pagination(props) {
|
|
|
3672
3646
|
const [paginationModel, setPaginationModel] = useControlledState(
|
|
3673
3647
|
_paginationModel,
|
|
3674
3648
|
defaultPaginationModel,
|
|
3675
|
-
|
|
3649
|
+
useCallback10(
|
|
3676
3650
|
(newPage) => {
|
|
3677
3651
|
onPageChange(newPage.page);
|
|
3678
3652
|
},
|
|
@@ -3688,7 +3662,7 @@ function Pagination(props) {
|
|
|
3688
3662
|
const afterPages = [paginationModel.page + 1, paginationModel.page + 2].filter((p) => p <= lastPage - 1);
|
|
3689
3663
|
const isMoreAfterPages = lastPage > 1 && paginationModel.page < lastPage - 3;
|
|
3690
3664
|
const isMoreBeforePages = lastPage > 1 && paginationModel.page > 4;
|
|
3691
|
-
|
|
3665
|
+
useEffect6(() => {
|
|
3692
3666
|
if (paginationModel.page > lastPage) {
|
|
3693
3667
|
setPaginationModel({ ...paginationModel, page: lastPage });
|
|
3694
3668
|
}
|
|
@@ -3871,8 +3845,8 @@ function Component(props, apiRef) {
|
|
|
3871
3845
|
...innerProps
|
|
3872
3846
|
} = props;
|
|
3873
3847
|
const tableId = useId();
|
|
3874
|
-
const parentRef =
|
|
3875
|
-
const tableBodyRef =
|
|
3848
|
+
const parentRef = useRef6(null);
|
|
3849
|
+
const tableBodyRef = useRef6(null);
|
|
3876
3850
|
const {
|
|
3877
3851
|
columns,
|
|
3878
3852
|
processedColumnGroups,
|
|
@@ -3909,20 +3883,20 @@ function Component(props, apiRef) {
|
|
|
3909
3883
|
const paginationModel = useMemo10(() => ({ page, pageSize }), [page, pageSize]);
|
|
3910
3884
|
const totalSize = virtualizer.getTotalSize();
|
|
3911
3885
|
const virtualizedItems = virtualizer.getVirtualItems();
|
|
3912
|
-
const getRowClickHandler =
|
|
3886
|
+
const getRowClickHandler = useCallback11(
|
|
3913
3887
|
(row, rowId) => (e) => {
|
|
3914
3888
|
onRowClick?.({ row, rowId }, e);
|
|
3915
3889
|
checkboxSelection && !disableSelectionOnClick && isRowSelectableCheck(rowId, row) && onCheckboxChange(e, rowId);
|
|
3916
3890
|
},
|
|
3917
3891
|
[onRowClick, checkboxSelection, disableSelectionOnClick, onCheckboxChange, isRowSelectableCheck]
|
|
3918
3892
|
);
|
|
3919
|
-
const getRowFocusHandler =
|
|
3893
|
+
const getRowFocusHandler = useCallback11(
|
|
3920
3894
|
(rowId) => () => {
|
|
3921
3895
|
onRowFocus(rowId);
|
|
3922
3896
|
},
|
|
3923
3897
|
[onRowFocus]
|
|
3924
3898
|
);
|
|
3925
|
-
const getCheckboxClickHandler =
|
|
3899
|
+
const getCheckboxClickHandler = useCallback11(
|
|
3926
3900
|
(rowId, row) => (e) => {
|
|
3927
3901
|
e.stopPropagation();
|
|
3928
3902
|
if (isRowSelectableCheck(rowId, row)) {
|
|
@@ -3932,7 +3906,7 @@ function Component(props, apiRef) {
|
|
|
3932
3906
|
},
|
|
3933
3907
|
[onCheckboxChange, isRowSelectableCheck, onRowFocus]
|
|
3934
3908
|
);
|
|
3935
|
-
const handleTableKeyDown =
|
|
3909
|
+
const handleTableKeyDown = useCallback11(
|
|
3936
3910
|
(e) => {
|
|
3937
3911
|
const supportedKeys = ["ArrowUp", "ArrowDown", " ", "Home", "End", "PageUp", "PageDown"];
|
|
3938
3912
|
if (!supportedKeys.includes(e.key)) return;
|
|
@@ -4274,7 +4248,7 @@ var DataTable = forwardRef7(Component);
|
|
|
4274
4248
|
DataTable.displayName = "DataTable";
|
|
4275
4249
|
|
|
4276
4250
|
// src/components/DateRangePicker/DateRangePicker.tsx
|
|
4277
|
-
import React26, { forwardRef as forwardRef8, useCallback as
|
|
4251
|
+
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";
|
|
4278
4252
|
import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
|
|
4279
4253
|
import CalendarTodayIcon2 from "@mui/icons-material/CalendarToday";
|
|
4280
4254
|
import { styled as styled14, useThemeProps as useThemeProps5 } from "@mui/joy";
|
|
@@ -4435,23 +4409,23 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4435
4409
|
readOnly,
|
|
4436
4410
|
...innerProps
|
|
4437
4411
|
} = props;
|
|
4438
|
-
const innerRef =
|
|
4439
|
-
const buttonRef =
|
|
4412
|
+
const innerRef = useRef7(null);
|
|
4413
|
+
const buttonRef = useRef7(null);
|
|
4440
4414
|
const [value, setValue] = useControlledState(
|
|
4441
4415
|
props.value,
|
|
4442
4416
|
props.defaultValue || "",
|
|
4443
|
-
|
|
4417
|
+
useCallback12((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
4444
4418
|
);
|
|
4445
|
-
const [displayValue, setDisplayValue] =
|
|
4419
|
+
const [displayValue, setDisplayValue] = useState9(
|
|
4446
4420
|
() => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
|
|
4447
4421
|
);
|
|
4448
|
-
const [anchorEl, setAnchorEl] =
|
|
4422
|
+
const [anchorEl, setAnchorEl] = useState9(null);
|
|
4449
4423
|
const open = Boolean(anchorEl);
|
|
4450
4424
|
const calendarValue = useMemo11(
|
|
4451
4425
|
() => value ? parseDates(value, format) : void 0,
|
|
4452
4426
|
[value, format]
|
|
4453
4427
|
);
|
|
4454
|
-
|
|
4428
|
+
useEffect7(() => {
|
|
4455
4429
|
if (value) {
|
|
4456
4430
|
try {
|
|
4457
4431
|
const dates = parseDates(value, format);
|
|
@@ -4463,13 +4437,13 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4463
4437
|
setDisplayValue("");
|
|
4464
4438
|
}
|
|
4465
4439
|
}, [displayFormat, value, format]);
|
|
4466
|
-
|
|
4440
|
+
useEffect7(() => {
|
|
4467
4441
|
if (!anchorEl) {
|
|
4468
4442
|
innerRef.current?.blur();
|
|
4469
4443
|
}
|
|
4470
4444
|
}, [anchorEl, innerRef]);
|
|
4471
4445
|
useImperativeHandle3(ref, () => innerRef.current, [innerRef]);
|
|
4472
|
-
const handleChange =
|
|
4446
|
+
const handleChange = useCallback12(
|
|
4473
4447
|
(event) => {
|
|
4474
4448
|
const value2 = event.target.value;
|
|
4475
4449
|
setDisplayValue(value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2);
|
|
@@ -4477,7 +4451,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4477
4451
|
},
|
|
4478
4452
|
[displayFormat, format, setValue]
|
|
4479
4453
|
);
|
|
4480
|
-
const handleDisplayInputChange =
|
|
4454
|
+
const handleDisplayInputChange = useCallback12(
|
|
4481
4455
|
(event) => {
|
|
4482
4456
|
if (event.target.value === "") {
|
|
4483
4457
|
handleChange({
|
|
@@ -4502,14 +4476,14 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4502
4476
|
},
|
|
4503
4477
|
[displayFormat, format, handleChange, props.name]
|
|
4504
4478
|
);
|
|
4505
|
-
const handleCalendarToggle =
|
|
4479
|
+
const handleCalendarToggle = useCallback12(
|
|
4506
4480
|
(event) => {
|
|
4507
4481
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
4508
4482
|
innerRef.current?.focus();
|
|
4509
4483
|
},
|
|
4510
4484
|
[anchorEl, setAnchorEl, innerRef]
|
|
4511
4485
|
);
|
|
4512
|
-
const handleCalendarChange =
|
|
4486
|
+
const handleCalendarChange = useCallback12(
|
|
4513
4487
|
([date1, date2]) => {
|
|
4514
4488
|
if (!date1 || !date2) return;
|
|
4515
4489
|
const formattedValue = formatValueString2([date1, date2], format);
|
|
@@ -4523,7 +4497,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4523
4497
|
},
|
|
4524
4498
|
[props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat]
|
|
4525
4499
|
);
|
|
4526
|
-
const handleInputMouseDown =
|
|
4500
|
+
const handleInputMouseDown = useCallback12(
|
|
4527
4501
|
(event) => {
|
|
4528
4502
|
if (inputReadOnly) {
|
|
4529
4503
|
event.preventDefault();
|
|
@@ -4755,13 +4729,13 @@ var InsetDrawer = styled20(JoyDrawer2)(({ theme }) => ({
|
|
|
4755
4729
|
}));
|
|
4756
4730
|
|
|
4757
4731
|
// src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
|
|
4758
|
-
import React31, { useCallback as
|
|
4732
|
+
import React31, { useCallback as useCallback13, useEffect as useEffect8, useMemo as useMemo12, useRef as useRef8, useState as useState10 } from "react";
|
|
4759
4733
|
import SearchIcon from "@mui/icons-material/Search";
|
|
4760
4734
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
4761
4735
|
function LabelWithTooltip(props) {
|
|
4762
4736
|
const { label, size } = props;
|
|
4763
|
-
const labelContentRef =
|
|
4764
|
-
const [isOverflowing, setIsOverflowing] =
|
|
4737
|
+
const labelContentRef = useRef8(null);
|
|
4738
|
+
const [isOverflowing, setIsOverflowing] = useState10(false);
|
|
4765
4739
|
const labelContent = /* @__PURE__ */ React31.createElement(
|
|
4766
4740
|
"span",
|
|
4767
4741
|
{
|
|
@@ -4778,7 +4752,7 @@ function LabelWithTooltip(props) {
|
|
|
4778
4752
|
},
|
|
4779
4753
|
label
|
|
4780
4754
|
);
|
|
4781
|
-
|
|
4755
|
+
useEffect8(() => {
|
|
4782
4756
|
const element = labelContentRef.current;
|
|
4783
4757
|
if (element) {
|
|
4784
4758
|
setIsOverflowing(element.scrollWidth > element.clientWidth);
|
|
@@ -4802,16 +4776,16 @@ function FilterableCheckboxGroup(props) {
|
|
|
4802
4776
|
maxHeight = 300,
|
|
4803
4777
|
disabled
|
|
4804
4778
|
} = props;
|
|
4805
|
-
const [searchTerm, setSearchTerm] =
|
|
4806
|
-
const [sortedOptions, setSortedOptions] =
|
|
4779
|
+
const [searchTerm, setSearchTerm] = useState10("");
|
|
4780
|
+
const [sortedOptions, setSortedOptions] = useState10(options);
|
|
4807
4781
|
const [internalValue, setInternalValue] = useControlledState(
|
|
4808
4782
|
value,
|
|
4809
4783
|
value ?? [],
|
|
4810
|
-
|
|
4784
|
+
useCallback13((newValue) => onChange?.(newValue), [onChange])
|
|
4811
4785
|
);
|
|
4812
|
-
const parentRef =
|
|
4813
|
-
const isInitialSortRef =
|
|
4814
|
-
const prevOptionsRef =
|
|
4786
|
+
const parentRef = useRef8(null);
|
|
4787
|
+
const isInitialSortRef = useRef8(false);
|
|
4788
|
+
const prevOptionsRef = useRef8([...options]);
|
|
4815
4789
|
const filteredOptions = useMemo12(() => {
|
|
4816
4790
|
if (!searchTerm) return sortedOptions;
|
|
4817
4791
|
return sortedOptions.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
@@ -4834,7 +4808,7 @@ function FilterableCheckboxGroup(props) {
|
|
|
4834
4808
|
overscan: 5
|
|
4835
4809
|
});
|
|
4836
4810
|
const items = virtualizer.getVirtualItems();
|
|
4837
|
-
|
|
4811
|
+
useEffect8(() => {
|
|
4838
4812
|
const optionsChanged = prevOptionsRef.current.length !== options.length || prevOptionsRef.current.some(
|
|
4839
4813
|
(prevOption, index) => prevOption.value !== options[index]?.value || prevOption.label !== options[index]?.label || prevOption.disabled !== options[index]?.disabled
|
|
4840
4814
|
);
|
|
@@ -4860,13 +4834,13 @@ function FilterableCheckboxGroup(props) {
|
|
|
4860
4834
|
}
|
|
4861
4835
|
}
|
|
4862
4836
|
}, [options, value]);
|
|
4863
|
-
|
|
4837
|
+
useEffect8(() => {
|
|
4864
4838
|
virtualizer.measure();
|
|
4865
4839
|
}, [virtualizer, filteredOptions, size]);
|
|
4866
|
-
const handleSearchChange =
|
|
4840
|
+
const handleSearchChange = useCallback13((event) => {
|
|
4867
4841
|
setSearchTerm(event.target.value);
|
|
4868
4842
|
}, []);
|
|
4869
|
-
const handleCheckboxChange =
|
|
4843
|
+
const handleCheckboxChange = useCallback13(
|
|
4870
4844
|
(optionValue) => (event) => {
|
|
4871
4845
|
const checked = event.target.checked;
|
|
4872
4846
|
const newValue = checked ? [...internalValue, optionValue] : internalValue.filter((v) => v !== optionValue);
|
|
@@ -4874,7 +4848,7 @@ function FilterableCheckboxGroup(props) {
|
|
|
4874
4848
|
},
|
|
4875
4849
|
[internalValue, setInternalValue]
|
|
4876
4850
|
);
|
|
4877
|
-
const handleSelectAll =
|
|
4851
|
+
const handleSelectAll = useCallback13(
|
|
4878
4852
|
(event) => {
|
|
4879
4853
|
const checked = event.target.checked;
|
|
4880
4854
|
const enabledOptions = filteredOptions.filter((option) => !option.disabled);
|
|
@@ -5031,16 +5005,16 @@ function IconMenuButton(props) {
|
|
|
5031
5005
|
IconMenuButton.displayName = "IconMenuButton";
|
|
5032
5006
|
|
|
5033
5007
|
// src/components/Markdown/Markdown.tsx
|
|
5034
|
-
import React33, { lazy, Suspense, useEffect as
|
|
5008
|
+
import React33, { lazy, Suspense, useEffect as useEffect9, useState as useState11 } from "react";
|
|
5035
5009
|
import { Skeleton } from "@mui/joy";
|
|
5036
5010
|
import { Link as Link2 } from "@mui/joy";
|
|
5037
5011
|
import remarkGfm from "remark-gfm";
|
|
5038
5012
|
var LazyReactMarkdown = lazy(() => import("react-markdown"));
|
|
5039
5013
|
var Markdown = (props) => {
|
|
5040
|
-
const [
|
|
5041
|
-
|
|
5014
|
+
const [rehypeAccent2, setRehypeAccent] = useState11(null);
|
|
5015
|
+
useEffect9(() => {
|
|
5042
5016
|
const loadRehypeAccent = async () => {
|
|
5043
|
-
const module = await
|
|
5017
|
+
const module = await Promise.resolve().then(() => (init_rehype_accent(), rehype_accent_exports));
|
|
5044
5018
|
setRehypeAccent(() => module.rehypeAccent);
|
|
5045
5019
|
};
|
|
5046
5020
|
loadRehypeAccent();
|
|
@@ -5057,7 +5031,7 @@ var Markdown = (props) => {
|
|
|
5057
5031
|
fallback,
|
|
5058
5032
|
...innerProps
|
|
5059
5033
|
} = props;
|
|
5060
|
-
if (!
|
|
5034
|
+
if (!rehypeAccent2) {
|
|
5061
5035
|
return null;
|
|
5062
5036
|
}
|
|
5063
5037
|
return /* @__PURE__ */ React33.createElement(Typography, { component: "div", color, textColor, level: defaultLevel, ...innerProps }, /* @__PURE__ */ React33.createElement(
|
|
@@ -5070,7 +5044,7 @@ var Markdown = (props) => {
|
|
|
5070
5044
|
{
|
|
5071
5045
|
...markdownOptions,
|
|
5072
5046
|
children: content,
|
|
5073
|
-
rehypePlugins: [[
|
|
5047
|
+
rehypePlugins: [[rehypeAccent2, { accentColor }]],
|
|
5074
5048
|
remarkPlugins: [remarkGfm],
|
|
5075
5049
|
components: {
|
|
5076
5050
|
a: ({ children, href }) => /* @__PURE__ */ React33.createElement(Link2, { href, target: defaultLinkAction }, children),
|
|
@@ -5212,7 +5186,7 @@ function MenuButton(props) {
|
|
|
5212
5186
|
MenuButton.displayName = "MenuButton";
|
|
5213
5187
|
|
|
5214
5188
|
// src/components/MonthPicker/MonthPicker.tsx
|
|
5215
|
-
import React35, { forwardRef as forwardRef9, useCallback as
|
|
5189
|
+
import React35, { forwardRef as forwardRef9, useCallback as useCallback14, useEffect as useEffect10, useImperativeHandle as useImperativeHandle4, useRef as useRef9, useState as useState12 } from "react";
|
|
5216
5190
|
import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
|
|
5217
5191
|
import { styled as styled21, useThemeProps as useThemeProps6 } from "@mui/joy";
|
|
5218
5192
|
import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
|
|
@@ -5294,14 +5268,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5294
5268
|
locale,
|
|
5295
5269
|
...innerProps
|
|
5296
5270
|
} = props;
|
|
5297
|
-
const innerRef =
|
|
5298
|
-
const buttonRef =
|
|
5271
|
+
const innerRef = useRef9(null);
|
|
5272
|
+
const buttonRef = useRef9(null);
|
|
5299
5273
|
const [value, setValue, isControlled] = useControlledState(
|
|
5300
5274
|
props.value,
|
|
5301
5275
|
props.defaultValue || "",
|
|
5302
|
-
|
|
5276
|
+
useCallback14((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
5303
5277
|
);
|
|
5304
|
-
const getFormattedDisplayValue =
|
|
5278
|
+
const getFormattedDisplayValue = useCallback14(
|
|
5305
5279
|
(inputValue) => {
|
|
5306
5280
|
if (!inputValue) return "";
|
|
5307
5281
|
try {
|
|
@@ -5312,19 +5286,19 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5312
5286
|
},
|
|
5313
5287
|
[format, displayFormat, locale]
|
|
5314
5288
|
);
|
|
5315
|
-
const [displayValue, setDisplayValue] =
|
|
5316
|
-
const [anchorEl, setAnchorEl] =
|
|
5289
|
+
const [displayValue, setDisplayValue] = useState12(() => getFormattedDisplayValue(value));
|
|
5290
|
+
const [anchorEl, setAnchorEl] = useState12(null);
|
|
5317
5291
|
const open = Boolean(anchorEl);
|
|
5318
|
-
|
|
5292
|
+
useEffect10(() => {
|
|
5319
5293
|
if (!anchorEl) {
|
|
5320
5294
|
innerRef.current?.blur();
|
|
5321
5295
|
}
|
|
5322
5296
|
}, [anchorEl, innerRef]);
|
|
5323
5297
|
useImperativeHandle4(ref, () => innerRef.current, [innerRef]);
|
|
5324
|
-
|
|
5298
|
+
useEffect10(() => {
|
|
5325
5299
|
setDisplayValue(getFormattedDisplayValue(value));
|
|
5326
5300
|
}, [value, getFormattedDisplayValue]);
|
|
5327
|
-
const handleChange =
|
|
5301
|
+
const handleChange = useCallback14(
|
|
5328
5302
|
(event) => {
|
|
5329
5303
|
const newValue = event.target.value;
|
|
5330
5304
|
setValue(newValue);
|
|
@@ -5334,14 +5308,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5334
5308
|
},
|
|
5335
5309
|
[setValue, getFormattedDisplayValue, isControlled]
|
|
5336
5310
|
);
|
|
5337
|
-
const handleCalendarToggle =
|
|
5311
|
+
const handleCalendarToggle = useCallback14(
|
|
5338
5312
|
(event) => {
|
|
5339
5313
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
5340
5314
|
innerRef.current?.focus();
|
|
5341
5315
|
},
|
|
5342
5316
|
[anchorEl, setAnchorEl, innerRef]
|
|
5343
5317
|
);
|
|
5344
|
-
const handleInputMouseDown =
|
|
5318
|
+
const handleInputMouseDown = useCallback14(
|
|
5345
5319
|
(event) => {
|
|
5346
5320
|
event.preventDefault();
|
|
5347
5321
|
buttonRef.current?.focus();
|
|
@@ -5465,7 +5439,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5465
5439
|
});
|
|
5466
5440
|
|
|
5467
5441
|
// src/components/MonthRangePicker/MonthRangePicker.tsx
|
|
5468
|
-
import React36, { forwardRef as forwardRef10, useCallback as
|
|
5442
|
+
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";
|
|
5469
5443
|
import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
|
|
5470
5444
|
import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
|
|
5471
5445
|
import { styled as styled22, useThemeProps as useThemeProps7 } from "@mui/joy";
|
|
@@ -5573,35 +5547,35 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
|
5573
5547
|
size,
|
|
5574
5548
|
...innerProps
|
|
5575
5549
|
} = props;
|
|
5576
|
-
const innerRef =
|
|
5550
|
+
const innerRef = useRef10(null);
|
|
5577
5551
|
const [value, setValue] = useControlledState(
|
|
5578
5552
|
props.value,
|
|
5579
5553
|
props.defaultValue || "",
|
|
5580
|
-
|
|
5554
|
+
useCallback15((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
5581
5555
|
);
|
|
5582
|
-
const [anchorEl, setAnchorEl] =
|
|
5556
|
+
const [anchorEl, setAnchorEl] = useState13(null);
|
|
5583
5557
|
const open = Boolean(anchorEl);
|
|
5584
5558
|
const calendarValue = useMemo13(() => value ? parseDates2(value) : void 0, [value]);
|
|
5585
|
-
|
|
5559
|
+
useEffect11(() => {
|
|
5586
5560
|
if (!anchorEl) {
|
|
5587
5561
|
innerRef.current?.blur();
|
|
5588
5562
|
}
|
|
5589
5563
|
}, [anchorEl, innerRef]);
|
|
5590
5564
|
useImperativeHandle5(ref, () => innerRef.current, [innerRef]);
|
|
5591
|
-
const handleChange =
|
|
5565
|
+
const handleChange = useCallback15(
|
|
5592
5566
|
(event) => {
|
|
5593
5567
|
setValue(event.target.value);
|
|
5594
5568
|
},
|
|
5595
5569
|
[setValue]
|
|
5596
5570
|
);
|
|
5597
|
-
const handleCalendarToggle =
|
|
5571
|
+
const handleCalendarToggle = useCallback15(
|
|
5598
5572
|
(event) => {
|
|
5599
5573
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
5600
5574
|
innerRef.current?.focus();
|
|
5601
5575
|
},
|
|
5602
5576
|
[anchorEl, setAnchorEl, innerRef]
|
|
5603
5577
|
);
|
|
5604
|
-
const handleCalendarChange =
|
|
5578
|
+
const handleCalendarChange = useCallback15(
|
|
5605
5579
|
([date1, date2]) => {
|
|
5606
5580
|
if (!date1 || !date2) return;
|
|
5607
5581
|
setValue(formatValueString4([date1, date2], format));
|
|
@@ -5828,7 +5802,7 @@ function Navigator(props) {
|
|
|
5828
5802
|
Navigator.displayName = "Navigator";
|
|
5829
5803
|
|
|
5830
5804
|
// src/components/PercentageInput/PercentageInput.tsx
|
|
5831
|
-
import React40, { useCallback as
|
|
5805
|
+
import React40, { useCallback as useCallback16, useMemo as useMemo14, useState as useState14 } from "react";
|
|
5832
5806
|
import { NumericFormat as NumericFormat2 } from "react-number-format";
|
|
5833
5807
|
import { styled as styled25, useThemeProps as useThemeProps8 } from "@mui/joy";
|
|
5834
5808
|
var padDecimal = (value, decimalScale) => {
|
|
@@ -5885,9 +5859,9 @@ var PercentageInput = React40.forwardRef(
|
|
|
5885
5859
|
const [_value, setValue] = useControlledState(
|
|
5886
5860
|
props.value,
|
|
5887
5861
|
props.defaultValue,
|
|
5888
|
-
|
|
5862
|
+
useCallback16((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
|
|
5889
5863
|
);
|
|
5890
|
-
const [internalError, setInternalError] =
|
|
5864
|
+
const [internalError, setInternalError] = useState14(
|
|
5891
5865
|
max && _value && _value > max || min && _value && _value < min
|
|
5892
5866
|
);
|
|
5893
5867
|
const value = useMemo14(() => {
|
|
@@ -5896,7 +5870,7 @@ var PercentageInput = React40.forwardRef(
|
|
|
5896
5870
|
}
|
|
5897
5871
|
return _value;
|
|
5898
5872
|
}, [_value, useMinorUnit, maxDecimalScale]);
|
|
5899
|
-
const handleChange =
|
|
5873
|
+
const handleChange = useCallback16(
|
|
5900
5874
|
(event) => {
|
|
5901
5875
|
if (event.target.value === "") {
|
|
5902
5876
|
setValue(void 0);
|
|
@@ -5953,194 +5927,31 @@ var MotionRadioGroup = motion26(JoyRadioGroup);
|
|
|
5953
5927
|
var RadioGroup = MotionRadioGroup;
|
|
5954
5928
|
RadioGroup.displayName = "RadioGroup";
|
|
5955
5929
|
|
|
5956
|
-
// src/components/RadioTileGroup/RadioTileGroup.tsx
|
|
5957
|
-
import React41 from "react";
|
|
5958
|
-
import { styled as styled26, radioClasses, sheetClasses } from "@mui/joy";
|
|
5959
|
-
var RadioTileGroupRoot = styled26(RadioGroup, {
|
|
5960
|
-
name: "RadioTileGroup",
|
|
5961
|
-
slot: "root",
|
|
5962
|
-
shouldForwardProp: (prop) => prop !== "flex" && prop !== "columns"
|
|
5963
|
-
})(({ theme, flex, columns }) => ({
|
|
5964
|
-
flexDirection: "row",
|
|
5965
|
-
gap: theme.spacing(2),
|
|
5966
|
-
...flex && { flex: 1 },
|
|
5967
|
-
...columns && {
|
|
5968
|
-
display: "grid",
|
|
5969
|
-
gridTemplateColumns: `repeat(${columns}, 1fr)`
|
|
5970
|
-
},
|
|
5971
|
-
[`& .${sheetClasses.root}.${radioClasses.disabled}`]: {
|
|
5972
|
-
borderColor: theme.palette.neutral.outlinedDisabledBorder
|
|
5973
|
-
},
|
|
5974
|
-
[`& .${radioClasses.root}`]: {
|
|
5975
|
-
[`& .${radioClasses.action}`]: {
|
|
5976
|
-
borderRadius: theme.radius.md
|
|
5977
|
-
},
|
|
5978
|
-
[`&.${radioClasses.checked}`]: {
|
|
5979
|
-
[`& .${radioClasses.action}`]: {
|
|
5980
|
-
inset: -1,
|
|
5981
|
-
border: "2px solid",
|
|
5982
|
-
borderColor: theme.palette.primary.outlinedColor
|
|
5983
|
-
},
|
|
5984
|
-
[`&.${radioClasses.disabled}`]: {
|
|
5985
|
-
[`& .${radioClasses.action}`]: {
|
|
5986
|
-
borderColor: theme.palette.neutral.outlinedBorder
|
|
5987
|
-
}
|
|
5988
|
-
}
|
|
5989
|
-
}
|
|
5990
|
-
}
|
|
5991
|
-
}));
|
|
5992
|
-
var RadioTileSheet = styled26(Sheet, {
|
|
5993
|
-
name: "RadioTileGroup",
|
|
5994
|
-
slot: "tile",
|
|
5995
|
-
shouldForwardProp: (prop) => prop !== "disabled" && prop !== "size" && prop !== "flex" && prop !== "textAlign"
|
|
5996
|
-
})(({
|
|
5997
|
-
theme,
|
|
5998
|
-
disabled,
|
|
5999
|
-
size = "sm",
|
|
6000
|
-
flex,
|
|
6001
|
-
textAlign
|
|
6002
|
-
}) => {
|
|
6003
|
-
const px = { sm: theme.spacing(3), md: theme.spacing(3), lg: theme.spacing(4) }[size];
|
|
6004
|
-
const py = { sm: theme.spacing(3), md: theme.spacing(4), lg: theme.spacing(4) }[size];
|
|
6005
|
-
return {
|
|
6006
|
-
borderRadius: theme.radius.md,
|
|
6007
|
-
display: "flex",
|
|
6008
|
-
gap: { sm: theme.spacing(2), md: theme.spacing(3), lg: theme.spacing(4) }[size],
|
|
6009
|
-
padding: `${py} ${px}`,
|
|
6010
|
-
// NOTE: Radio에도 Label과의 정렬을 맞추기 위해 중복 코드가 있지만 Icon과 RadioButton 의 정렬도 일치시켜야 해서 코드가 중복으로 존재할수밖에 없다.
|
|
6011
|
-
flexDirection: textAlign === "start" ? "row-reverse" : "column-reverse",
|
|
6012
|
-
justifyContent: textAlign === "start" ? "space-between" : "center",
|
|
6013
|
-
alignItems: "center",
|
|
6014
|
-
...flex ? { flex: 1 } : {},
|
|
6015
|
-
...disabled ? { borderColor: theme.palette.neutral.outlinedDisabledBorder } : {
|
|
6016
|
-
":hover": {
|
|
6017
|
-
backgroundColor: theme.palette.neutral.outlinedHoverBg
|
|
6018
|
-
},
|
|
6019
|
-
":active": {
|
|
6020
|
-
backgroundColor: theme.palette.neutral.outlinedActiveBg
|
|
6021
|
-
}
|
|
6022
|
-
}
|
|
6023
|
-
};
|
|
6024
|
-
});
|
|
6025
|
-
function RadioTileGroup(props) {
|
|
6026
|
-
const {
|
|
6027
|
-
options,
|
|
6028
|
-
value,
|
|
6029
|
-
defaultValue,
|
|
6030
|
-
onChange,
|
|
6031
|
-
name,
|
|
6032
|
-
disabled: allDisabled,
|
|
6033
|
-
sx,
|
|
6034
|
-
className,
|
|
6035
|
-
useIndicator,
|
|
6036
|
-
textAlign = "center",
|
|
6037
|
-
size = "sm",
|
|
6038
|
-
flex,
|
|
6039
|
-
columns,
|
|
6040
|
-
label,
|
|
6041
|
-
helperText,
|
|
6042
|
-
error,
|
|
6043
|
-
required
|
|
6044
|
-
} = props;
|
|
6045
|
-
const radioGroup = /* @__PURE__ */ React41.createElement(
|
|
6046
|
-
RadioTileGroupRoot,
|
|
6047
|
-
{
|
|
6048
|
-
overlay: true,
|
|
6049
|
-
name,
|
|
6050
|
-
value,
|
|
6051
|
-
defaultValue,
|
|
6052
|
-
onChange,
|
|
6053
|
-
flex,
|
|
6054
|
-
columns
|
|
6055
|
-
},
|
|
6056
|
-
options.map((option) => /* @__PURE__ */ React41.createElement(
|
|
6057
|
-
RadioTileSheet,
|
|
6058
|
-
{
|
|
6059
|
-
key: option.value,
|
|
6060
|
-
variant: "outlined",
|
|
6061
|
-
disabled: allDisabled ?? option.disabled,
|
|
6062
|
-
size,
|
|
6063
|
-
flex,
|
|
6064
|
-
textAlign
|
|
6065
|
-
},
|
|
6066
|
-
/* @__PURE__ */ React41.createElement(
|
|
6067
|
-
Radio,
|
|
6068
|
-
{
|
|
6069
|
-
id: `${option.value}`,
|
|
6070
|
-
value: option.value,
|
|
6071
|
-
label: option.label,
|
|
6072
|
-
disableIcon: !useIndicator,
|
|
6073
|
-
disabled: allDisabled ?? option.disabled,
|
|
6074
|
-
size,
|
|
6075
|
-
slotProps: {
|
|
6076
|
-
root: {
|
|
6077
|
-
sx: {
|
|
6078
|
-
width: "100%",
|
|
6079
|
-
flexDirection: textAlign === "start" ? "row-reverse" : "column-reverse",
|
|
6080
|
-
justifyContent: textAlign === "start" ? "space-between" : "center",
|
|
6081
|
-
alignItems: "center",
|
|
6082
|
-
gap: { sm: 2, md: 3, lg: 4 }[size]
|
|
6083
|
-
}
|
|
6084
|
-
},
|
|
6085
|
-
label: ({ disabled }) => ({
|
|
6086
|
-
sx: (theme) => ({
|
|
6087
|
-
...theme.typography[{ sm: "body-sm", md: "body-md", lg: "body-lg" }[size]],
|
|
6088
|
-
color: disabled ? theme.palette.neutral.outlinedDisabledColor : theme.palette.neutral.outlinedColor
|
|
6089
|
-
})
|
|
6090
|
-
})
|
|
6091
|
-
}
|
|
6092
|
-
}
|
|
6093
|
-
),
|
|
6094
|
-
option.startDecorator && /* @__PURE__ */ React41.createElement(
|
|
6095
|
-
Box_default,
|
|
6096
|
-
{
|
|
6097
|
-
sx: {
|
|
6098
|
-
zIndex: 2,
|
|
6099
|
-
// HACK: Radio의 overlay가 decorator를 덮어버리기 때문에 문제 예방을 위해 적용해야 한다.
|
|
6100
|
-
width: { sm: "20px", md: "24px", lg: "24px" }[size],
|
|
6101
|
-
height: { sm: "20px", md: "24px", lg: "24px" }[size],
|
|
6102
|
-
color: "inherit",
|
|
6103
|
-
"& > .MuiSvgIcon-root": {
|
|
6104
|
-
width: "inherit",
|
|
6105
|
-
height: "inherit",
|
|
6106
|
-
fill: "currentColor",
|
|
6107
|
-
color: "inherit"
|
|
6108
|
-
}
|
|
6109
|
-
}
|
|
6110
|
-
},
|
|
6111
|
-
option.startDecorator
|
|
6112
|
-
)
|
|
6113
|
-
))
|
|
6114
|
-
);
|
|
6115
|
-
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));
|
|
6116
|
-
}
|
|
6117
|
-
RadioTileGroup.displayName = "RadioTileGroup";
|
|
6118
|
-
|
|
6119
5930
|
// src/components/RadioList/RadioList.tsx
|
|
6120
|
-
import
|
|
5931
|
+
import React41 from "react";
|
|
6121
5932
|
function RadioList(props) {
|
|
6122
5933
|
const { items, ...innerProps } = props;
|
|
6123
|
-
return /* @__PURE__ */
|
|
5934
|
+
return /* @__PURE__ */ React41.createElement(RadioGroup, { ...innerProps }, items.map((item) => /* @__PURE__ */ React41.createElement(Radio, { key: `${item.value}`, value: item.value, label: item.label })));
|
|
6124
5935
|
}
|
|
6125
5936
|
RadioList.displayName = "RadioList";
|
|
6126
5937
|
|
|
6127
5938
|
// src/components/Stepper/Stepper.tsx
|
|
6128
|
-
import
|
|
5939
|
+
import React42 from "react";
|
|
6129
5940
|
import {
|
|
6130
5941
|
Stepper as JoyStepper,
|
|
6131
5942
|
Step as JoyStep,
|
|
6132
5943
|
StepIndicator as JoyStepIndicator,
|
|
6133
5944
|
stepClasses,
|
|
6134
5945
|
stepIndicatorClasses,
|
|
6135
|
-
styled as
|
|
5946
|
+
styled as styled26
|
|
6136
5947
|
} from "@mui/joy";
|
|
6137
5948
|
import CheckIcon from "@mui/icons-material/Check";
|
|
6138
5949
|
import { motion as motion27 } from "framer-motion";
|
|
6139
|
-
var Step =
|
|
5950
|
+
var Step = styled26(JoyStep)({});
|
|
6140
5951
|
Step.displayName = "Step";
|
|
6141
|
-
var StepIndicator =
|
|
5952
|
+
var StepIndicator = styled26(JoyStepIndicator)({});
|
|
6142
5953
|
StepIndicator.displayName = "StepIndicator";
|
|
6143
|
-
var StyledStepper =
|
|
5954
|
+
var StyledStepper = styled26(JoyStepper)(({ theme }) => ({
|
|
6144
5955
|
"--StepIndicator-size": "24px",
|
|
6145
5956
|
"--Step-gap": theme.spacing(2),
|
|
6146
5957
|
"--joy-palette-success-solidBg": "var(--joy-palette-success-400)",
|
|
@@ -6161,7 +5972,7 @@ function Stepper(props) {
|
|
|
6161
5972
|
stepOrientation = "horizontal"
|
|
6162
5973
|
} = props;
|
|
6163
5974
|
const effectiveStepOrientation = orientation === "vertical" ? "horizontal" : stepOrientation;
|
|
6164
|
-
return /* @__PURE__ */
|
|
5975
|
+
return /* @__PURE__ */ React42.createElement(
|
|
6165
5976
|
MotionStepper,
|
|
6166
5977
|
{
|
|
6167
5978
|
orientation,
|
|
@@ -6200,23 +6011,23 @@ function Stepper(props) {
|
|
|
6200
6011
|
const completed = activeStep > i + 1;
|
|
6201
6012
|
const disabled = activeStep < i + 1;
|
|
6202
6013
|
const hasContent = step.label || step.extraContent;
|
|
6203
|
-
return /* @__PURE__ */
|
|
6014
|
+
return /* @__PURE__ */ React42.createElement(
|
|
6204
6015
|
Step,
|
|
6205
6016
|
{
|
|
6206
6017
|
key: `step-${i}`,
|
|
6207
|
-
indicator: /* @__PURE__ */
|
|
6018
|
+
indicator: /* @__PURE__ */ React42.createElement(StepIndicator, { variant: disabled ? "outlined" : "solid", color: disabled ? "neutral" : "primary" }, completed ? /* @__PURE__ */ React42.createElement(CheckIcon, null) : step.indicatorContent),
|
|
6208
6019
|
active,
|
|
6209
6020
|
completed,
|
|
6210
6021
|
disabled,
|
|
6211
6022
|
orientation: effectiveStepOrientation
|
|
6212
6023
|
},
|
|
6213
|
-
hasContent && /* @__PURE__ */
|
|
6024
|
+
hasContent && /* @__PURE__ */ React42.createElement(
|
|
6214
6025
|
Stack_default,
|
|
6215
6026
|
{
|
|
6216
6027
|
sx: orientation === "horizontal" && effectiveStepOrientation === "vertical" ? { alignItems: "center" } : {}
|
|
6217
6028
|
},
|
|
6218
|
-
step.label && /* @__PURE__ */
|
|
6219
|
-
step.extraContent && /* @__PURE__ */
|
|
6029
|
+
step.label && /* @__PURE__ */ React42.createElement(Typography_default, { level: "title-sm" }, step.label),
|
|
6030
|
+
step.extraContent && /* @__PURE__ */ React42.createElement(Typography_default, { level: "body-xs" }, step.extraContent)
|
|
6220
6031
|
)
|
|
6221
6032
|
);
|
|
6222
6033
|
})
|
|
@@ -6225,11 +6036,11 @@ function Stepper(props) {
|
|
|
6225
6036
|
Stepper.displayName = "Stepper";
|
|
6226
6037
|
|
|
6227
6038
|
// src/components/Switch/Switch.tsx
|
|
6228
|
-
import
|
|
6229
|
-
import { Switch as JoySwitch, styled as
|
|
6039
|
+
import React43 from "react";
|
|
6040
|
+
import { Switch as JoySwitch, styled as styled27, switchClasses } from "@mui/joy";
|
|
6230
6041
|
import { motion as motion28 } from "framer-motion";
|
|
6231
6042
|
var MotionSwitch = motion28(JoySwitch);
|
|
6232
|
-
var StyledThumb =
|
|
6043
|
+
var StyledThumb = styled27(motion28.div)({
|
|
6233
6044
|
"--Icon-fontSize": "calc(var(--Switch-thumbSize) * 0.75)",
|
|
6234
6045
|
display: "inline-flex",
|
|
6235
6046
|
justifyContent: "center",
|
|
@@ -6247,14 +6058,14 @@ var StyledThumb = styled28(motion28.div)({
|
|
|
6247
6058
|
right: "var(--Switch-thumbOffset)"
|
|
6248
6059
|
}
|
|
6249
6060
|
});
|
|
6250
|
-
var Thumb = (props) => /* @__PURE__ */
|
|
6061
|
+
var Thumb = (props) => /* @__PURE__ */ React43.createElement(StyledThumb, { ...props, layout: true, transition: spring });
|
|
6251
6062
|
var spring = {
|
|
6252
6063
|
type: "spring",
|
|
6253
6064
|
stiffness: 700,
|
|
6254
6065
|
damping: 30
|
|
6255
6066
|
};
|
|
6256
6067
|
var Switch = (props) => {
|
|
6257
|
-
return /* @__PURE__ */
|
|
6068
|
+
return /* @__PURE__ */ React43.createElement(
|
|
6258
6069
|
MotionSwitch,
|
|
6259
6070
|
{
|
|
6260
6071
|
...props,
|
|
@@ -6268,21 +6079,21 @@ var Switch = (props) => {
|
|
|
6268
6079
|
Switch.displayName = "Switch";
|
|
6269
6080
|
|
|
6270
6081
|
// src/components/Tabs/Tabs.tsx
|
|
6271
|
-
import
|
|
6082
|
+
import React44, { forwardRef as forwardRef11 } from "react";
|
|
6272
6083
|
import {
|
|
6273
6084
|
Tabs as JoyTabs,
|
|
6274
6085
|
Tab as JoyTab,
|
|
6275
6086
|
TabList as JoyTabList,
|
|
6276
6087
|
TabPanel as JoyTabPanel,
|
|
6277
|
-
styled as
|
|
6088
|
+
styled as styled28,
|
|
6278
6089
|
tabClasses
|
|
6279
6090
|
} from "@mui/joy";
|
|
6280
|
-
var StyledTabs =
|
|
6091
|
+
var StyledTabs = styled28(JoyTabs)(({ theme }) => ({
|
|
6281
6092
|
backgroundColor: theme.palette.background.body
|
|
6282
6093
|
}));
|
|
6283
6094
|
var Tabs = StyledTabs;
|
|
6284
6095
|
Tabs.displayName = "Tabs";
|
|
6285
|
-
var StyledTab =
|
|
6096
|
+
var StyledTab = styled28(JoyTab)(({ theme }) => ({
|
|
6286
6097
|
gap: theme.spacing(2),
|
|
6287
6098
|
[`&:not(.${tabClasses.selected})`]: {
|
|
6288
6099
|
color: theme.palette.neutral[700]
|
|
@@ -6292,14 +6103,14 @@ var StyledTab = styled29(JoyTab)(({ theme }) => ({
|
|
|
6292
6103
|
}
|
|
6293
6104
|
}));
|
|
6294
6105
|
var Tab = forwardRef11(function Tab2({ startDecorator, endDecorator, children, ...props }, ref) {
|
|
6295
|
-
return /* @__PURE__ */
|
|
6106
|
+
return /* @__PURE__ */ React44.createElement(StyledTab, { ...props, ref }, startDecorator, children, endDecorator);
|
|
6296
6107
|
});
|
|
6297
6108
|
Tab.displayName = "Tab";
|
|
6298
6109
|
var TabList = JoyTabList;
|
|
6299
6110
|
var TabPanel = JoyTabPanel;
|
|
6300
6111
|
|
|
6301
6112
|
// src/components/ThemeProvider/ThemeProvider.tsx
|
|
6302
|
-
import
|
|
6113
|
+
import React45 from "react";
|
|
6303
6114
|
import {
|
|
6304
6115
|
CssBaseline,
|
|
6305
6116
|
CssVarsProvider,
|
|
@@ -6555,13 +6366,13 @@ var defaultTheme = extendTheme({
|
|
|
6555
6366
|
});
|
|
6556
6367
|
function ThemeProvider(props) {
|
|
6557
6368
|
const theme = props.theme || defaultTheme;
|
|
6558
|
-
return /* @__PURE__ */
|
|
6369
|
+
return /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(CssVarsProvider, { theme }, /* @__PURE__ */ React45.createElement(CssBaseline, null), props.children));
|
|
6559
6370
|
}
|
|
6560
6371
|
ThemeProvider.displayName = "ThemeProvider";
|
|
6561
6372
|
|
|
6562
6373
|
// src/components/Uploader/Uploader.tsx
|
|
6563
|
-
import
|
|
6564
|
-
import { styled as
|
|
6374
|
+
import React46, { useCallback as useCallback17, useEffect as useEffect12, useMemo as useMemo15, useRef as useRef11, useState as useState15 } from "react";
|
|
6375
|
+
import { styled as styled29, Input as Input2 } from "@mui/joy";
|
|
6565
6376
|
import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
|
|
6566
6377
|
import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
|
|
6567
6378
|
import MuiClearIcon from "@mui/icons-material/ClearRounded";
|
|
@@ -6583,7 +6394,7 @@ var esmFiles = {
|
|
|
6583
6394
|
"@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/prevent-unhandled.js"
|
|
6584
6395
|
)
|
|
6585
6396
|
};
|
|
6586
|
-
var VisuallyHiddenInput =
|
|
6397
|
+
var VisuallyHiddenInput = styled29(Input2)({
|
|
6587
6398
|
width: "1px",
|
|
6588
6399
|
height: "1px",
|
|
6589
6400
|
overflow: "hidden",
|
|
@@ -6592,18 +6403,18 @@ var VisuallyHiddenInput = styled30(Input2)({
|
|
|
6592
6403
|
clipPath: "inset(50%)",
|
|
6593
6404
|
position: "absolute"
|
|
6594
6405
|
});
|
|
6595
|
-
var PreviewRoot =
|
|
6406
|
+
var PreviewRoot = styled29(Stack_default, {
|
|
6596
6407
|
name: "Uploader",
|
|
6597
6408
|
slot: "PreviewRoot"
|
|
6598
6409
|
})({});
|
|
6599
|
-
var UploadCard =
|
|
6410
|
+
var UploadCard = styled29(Card, {
|
|
6600
6411
|
name: "Uploader",
|
|
6601
6412
|
slot: "UploadCard"
|
|
6602
6413
|
})(({ theme }) => ({
|
|
6603
6414
|
padding: theme.spacing(2.5),
|
|
6604
6415
|
border: `1px solid ${theme.palette.neutral.outlinedBorder}`
|
|
6605
6416
|
}));
|
|
6606
|
-
var UploadFileIcon =
|
|
6417
|
+
var UploadFileIcon = styled29(MuiUploadFileIcon, {
|
|
6607
6418
|
name: "Uploader",
|
|
6608
6419
|
slot: "UploadFileIcon"
|
|
6609
6420
|
})(({ theme }) => ({
|
|
@@ -6611,7 +6422,7 @@ var UploadFileIcon = styled30(MuiUploadFileIcon, {
|
|
|
6611
6422
|
width: "32px",
|
|
6612
6423
|
height: "32px"
|
|
6613
6424
|
}));
|
|
6614
|
-
var ClearIcon2 =
|
|
6425
|
+
var ClearIcon2 = styled29(MuiClearIcon, {
|
|
6615
6426
|
name: "Uploader",
|
|
6616
6427
|
slot: "ClearIcon"
|
|
6617
6428
|
})(({ theme }) => ({
|
|
@@ -6637,7 +6448,7 @@ var getFileSize = (n) => {
|
|
|
6637
6448
|
};
|
|
6638
6449
|
var Preview = (props) => {
|
|
6639
6450
|
const { files, uploaded, onDelete } = props;
|
|
6640
|
-
return /* @__PURE__ */
|
|
6451
|
+
return /* @__PURE__ */ React46.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => /* @__PURE__ */ React46.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" }, /* @__PURE__ */ React46.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2 }, /* @__PURE__ */ React46.createElement(UploadFileIcon, null), /* @__PURE__ */ React46.createElement(Stack_default, { flex: "1", sx: { overflow: "hidden" } }, /* @__PURE__ */ React46.createElement(
|
|
6641
6452
|
Typography_default,
|
|
6642
6453
|
{
|
|
6643
6454
|
level: "body-sm",
|
|
@@ -6649,15 +6460,15 @@ var Preview = (props) => {
|
|
|
6649
6460
|
}
|
|
6650
6461
|
},
|
|
6651
6462
|
file.name
|
|
6652
|
-
), !!file.size && /* @__PURE__ */
|
|
6463
|
+
), !!file.size && /* @__PURE__ */ React46.createElement(Typography_default, { level: "body-xs", fontWeight: "300", lineHeight: "1.33", textColor: "text.tertiary" }, getFileSize(file.size))), /* @__PURE__ */ React46.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ React46.createElement(ClearIcon2, null))))));
|
|
6653
6464
|
};
|
|
6654
|
-
var UploaderRoot =
|
|
6465
|
+
var UploaderRoot = styled29(Stack_default, {
|
|
6655
6466
|
name: "Uploader",
|
|
6656
6467
|
slot: "root"
|
|
6657
6468
|
})(({ theme }) => ({
|
|
6658
6469
|
gap: theme.spacing(2)
|
|
6659
6470
|
}));
|
|
6660
|
-
var FileDropZone =
|
|
6471
|
+
var FileDropZone = styled29(Sheet_default, {
|
|
6661
6472
|
name: "Uploader",
|
|
6662
6473
|
slot: "dropZone",
|
|
6663
6474
|
shouldForwardProp: (prop) => prop !== "error" && prop !== "disabled"
|
|
@@ -6678,7 +6489,7 @@ var FileDropZone = styled30(Sheet_default, {
|
|
|
6678
6489
|
}
|
|
6679
6490
|
})
|
|
6680
6491
|
);
|
|
6681
|
-
var UploaderIcon =
|
|
6492
|
+
var UploaderIcon = styled29(MuiFileUploadIcon, {
|
|
6682
6493
|
name: "Uploader",
|
|
6683
6494
|
slot: "iconContainer",
|
|
6684
6495
|
shouldForwardProp: (prop) => prop !== "error" && prop !== "disabled"
|
|
@@ -6692,7 +6503,7 @@ var UploaderIcon = styled30(MuiFileUploadIcon, {
|
|
|
6692
6503
|
}
|
|
6693
6504
|
})
|
|
6694
6505
|
);
|
|
6695
|
-
var Uploader =
|
|
6506
|
+
var Uploader = React46.memo(
|
|
6696
6507
|
(props) => {
|
|
6697
6508
|
const {
|
|
6698
6509
|
accept,
|
|
@@ -6709,12 +6520,12 @@ var Uploader = React47.memo(
|
|
|
6709
6520
|
error: errorProp,
|
|
6710
6521
|
helperText: helperTextProp
|
|
6711
6522
|
} = props;
|
|
6712
|
-
const dropZoneRef =
|
|
6713
|
-
const inputRef =
|
|
6714
|
-
const [errorText, setErrorText] =
|
|
6715
|
-
const [files, setFiles] =
|
|
6716
|
-
const [uploaded, setUploaded] =
|
|
6717
|
-
const [previewState, setPreviewState] =
|
|
6523
|
+
const dropZoneRef = useRef11(null);
|
|
6524
|
+
const inputRef = useRef11(null);
|
|
6525
|
+
const [errorText, setErrorText] = useState15();
|
|
6526
|
+
const [files, setFiles] = useState15([]);
|
|
6527
|
+
const [uploaded, setUploaded] = useState15(props.uploaded || []);
|
|
6528
|
+
const [previewState, setPreviewState] = useState15("idle");
|
|
6718
6529
|
const accepts = useMemo15(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
|
|
6719
6530
|
const parsedAccepts = useMemo15(
|
|
6720
6531
|
() => accepts.flatMap((type) => {
|
|
@@ -6760,7 +6571,7 @@ var Uploader = React47.memo(
|
|
|
6760
6571
|
() => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
|
|
6761
6572
|
[files, maxCount, uploaded]
|
|
6762
6573
|
);
|
|
6763
|
-
const addFiles =
|
|
6574
|
+
const addFiles = useCallback17(
|
|
6764
6575
|
(uploads) => {
|
|
6765
6576
|
try {
|
|
6766
6577
|
const types = parsedAccepts.map((type) => type.replace(".", "")) || [];
|
|
@@ -6805,7 +6616,7 @@ var Uploader = React47.memo(
|
|
|
6805
6616
|
},
|
|
6806
6617
|
[files, uploaded, maxCount, parsedAccepts, maxFileSize, maxFileTotalSize, name, onChange]
|
|
6807
6618
|
);
|
|
6808
|
-
|
|
6619
|
+
useEffect12(() => {
|
|
6809
6620
|
if (!dropZoneRef.current || disabled) {
|
|
6810
6621
|
return;
|
|
6811
6622
|
}
|
|
@@ -6843,7 +6654,7 @@ var Uploader = React47.memo(
|
|
|
6843
6654
|
);
|
|
6844
6655
|
return () => cleanup?.();
|
|
6845
6656
|
}, [disabled, addFiles]);
|
|
6846
|
-
|
|
6657
|
+
useEffect12(() => {
|
|
6847
6658
|
if (inputRef.current && minCount) {
|
|
6848
6659
|
if (files.length < minCount) {
|
|
6849
6660
|
inputRef.current.setCustomValidity(`At least ${minCount} files are required.`);
|
|
@@ -6852,14 +6663,14 @@ var Uploader = React47.memo(
|
|
|
6852
6663
|
}
|
|
6853
6664
|
}
|
|
6854
6665
|
}, [inputRef, files, minCount]);
|
|
6855
|
-
const handleFileChanged =
|
|
6666
|
+
const handleFileChanged = useCallback17(
|
|
6856
6667
|
(event) => {
|
|
6857
6668
|
const files2 = Array.from(event.target.files || []);
|
|
6858
6669
|
addFiles(files2);
|
|
6859
6670
|
},
|
|
6860
6671
|
[addFiles]
|
|
6861
6672
|
);
|
|
6862
|
-
const handleDeleteFile =
|
|
6673
|
+
const handleDeleteFile = useCallback17(
|
|
6863
6674
|
(deletedFile) => {
|
|
6864
6675
|
if (deletedFile instanceof File) {
|
|
6865
6676
|
setFiles((current) => {
|
|
@@ -6879,10 +6690,10 @@ var Uploader = React47.memo(
|
|
|
6879
6690
|
},
|
|
6880
6691
|
[name, onChange, onDelete]
|
|
6881
6692
|
);
|
|
6882
|
-
const handleUploaderButtonClick =
|
|
6693
|
+
const handleUploaderButtonClick = useCallback17(() => {
|
|
6883
6694
|
inputRef.current?.click();
|
|
6884
6695
|
}, []);
|
|
6885
|
-
const uploader = /* @__PURE__ */
|
|
6696
|
+
const uploader = /* @__PURE__ */ React46.createElement(
|
|
6886
6697
|
FileDropZone,
|
|
6887
6698
|
{
|
|
6888
6699
|
state: previewState,
|
|
@@ -6891,8 +6702,8 @@ var Uploader = React47.memo(
|
|
|
6891
6702
|
ref: dropZoneRef,
|
|
6892
6703
|
onClick: handleUploaderButtonClick
|
|
6893
6704
|
},
|
|
6894
|
-
/* @__PURE__ */
|
|
6895
|
-
/* @__PURE__ */
|
|
6705
|
+
/* @__PURE__ */ React46.createElement(Stack_default, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React46.createElement(UploaderIcon, { state: previewState, error: !!(error || errorText), disabled })),
|
|
6706
|
+
/* @__PURE__ */ React46.createElement(
|
|
6896
6707
|
VisuallyHiddenInput,
|
|
6897
6708
|
{
|
|
6898
6709
|
disabled,
|
|
@@ -6915,7 +6726,7 @@ var Uploader = React47.memo(
|
|
|
6915
6726
|
}
|
|
6916
6727
|
)
|
|
6917
6728
|
);
|
|
6918
|
-
return /* @__PURE__ */
|
|
6729
|
+
return /* @__PURE__ */ React46.createElement(UploaderRoot, null, showDropZone && /* @__PURE__ */ React46.createElement(FormControl_default, { size, error: !!(error || errorText), disabled, required: !!minCount }, label && /* @__PURE__ */ React46.createElement(FormLabel_default, null, label), uploader, /* @__PURE__ */ React46.createElement(FormHelperText_default, null, /* @__PURE__ */ React46.createElement(Stack_default, null, errorText && /* @__PURE__ */ React46.createElement("div", null, errorText), /* @__PURE__ */ React46.createElement("div", null, helperText)))), [...uploaded, ...files].length > 0 && /* @__PURE__ */ React46.createElement(Preview, { files, uploaded, onDelete: handleDeleteFile }));
|
|
6919
6730
|
}
|
|
6920
6731
|
);
|
|
6921
6732
|
Uploader.displayName = "Uploader";
|
|
@@ -6996,7 +6807,6 @@ export {
|
|
|
6996
6807
|
Radio,
|
|
6997
6808
|
RadioGroup,
|
|
6998
6809
|
RadioList,
|
|
6999
|
-
RadioTileGroup,
|
|
7000
6810
|
Select,
|
|
7001
6811
|
Sheet,
|
|
7002
6812
|
Skeleton2 as Skeleton,
|
|
@@ -7071,17 +6881,17 @@ export {
|
|
|
7071
6881
|
modalDialogClasses,
|
|
7072
6882
|
modalOverflowClasses,
|
|
7073
6883
|
optionClasses,
|
|
7074
|
-
|
|
6884
|
+
radioClasses,
|
|
7075
6885
|
radioGroupClasses,
|
|
7076
6886
|
selectClasses,
|
|
7077
|
-
|
|
6887
|
+
sheetClasses,
|
|
7078
6888
|
skeletonClasses,
|
|
7079
6889
|
sliderClasses,
|
|
7080
6890
|
stackClasses,
|
|
7081
6891
|
stepButtonClasses,
|
|
7082
6892
|
stepClasses2 as stepClasses,
|
|
7083
6893
|
stepperClasses,
|
|
7084
|
-
|
|
6894
|
+
styled30 as styled,
|
|
7085
6895
|
switchClasses2 as switchClasses,
|
|
7086
6896
|
tabListClasses,
|
|
7087
6897
|
tabPanelClasses,
|