@ceed/cds 1.22.5 → 1.23.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/rehype-accent-FZRUD7VI.js +39 -0
- package/dist/components/data-display/DataTable.md +1 -1
- package/dist/components/inputs/Autocomplete.md +351 -107
- package/dist/components/surfaces/Sheet.md +1 -1
- package/dist/index.browser.js +11 -11
- package/dist/index.browser.js.map +4 -4
- package/dist/index.cjs +266 -181
- package/dist/index.js +315 -286
- package/framer/index.js +1 -163
- package/package.json +13 -13
package/dist/index.js
CHANGED
|
@@ -1,59 +1,3 @@
|
|
|
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
|
-
|
|
57
1
|
// src/index.ts
|
|
58
2
|
import {
|
|
59
3
|
useTheme as useTheme2,
|
|
@@ -759,11 +703,24 @@ Button.displayName = "Button";
|
|
|
759
703
|
var Button_default = Button;
|
|
760
704
|
|
|
761
705
|
// src/components/Calendar/Calendar.tsx
|
|
762
|
-
import
|
|
706
|
+
import React12, { Fragment, forwardRef as forwardRef4, useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState4 } from "react";
|
|
763
707
|
import { styled as styled5 } from "@mui/joy";
|
|
764
708
|
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
|
|
765
709
|
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
|
766
|
-
import { AnimatePresence, motion as
|
|
710
|
+
import { AnimatePresence, motion as motion13 } from "framer-motion";
|
|
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;
|
|
767
724
|
|
|
768
725
|
// src/components/Calendar/utils/index.ts
|
|
769
726
|
var getCalendarDates = (date) => {
|
|
@@ -1122,6 +1079,12 @@ var useCalendar = (ownerState) => {
|
|
|
1122
1079
|
};
|
|
1123
1080
|
|
|
1124
1081
|
// 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;
|
|
1125
1088
|
var CalendarRoot = styled5("div", {
|
|
1126
1089
|
name: "Calendar",
|
|
1127
1090
|
slot: "root"
|
|
@@ -1148,7 +1111,7 @@ var CalendarViewContainer = styled5("div", {
|
|
|
1148
1111
|
overflow: "hidden",
|
|
1149
1112
|
minHeight: calendarType === "datePicker" ? "250px" : "unset"
|
|
1150
1113
|
}));
|
|
1151
|
-
var CalendarViewTable = styled5(
|
|
1114
|
+
var CalendarViewTable = styled5(motion13.table, {
|
|
1152
1115
|
name: "Calendar",
|
|
1153
1116
|
slot: "viewTable"
|
|
1154
1117
|
})(({ theme }) => ({
|
|
@@ -1328,7 +1291,7 @@ var PickerDays = (props) => {
|
|
|
1328
1291
|
const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
|
|
1329
1292
|
const calendarDates = useMemo4(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
|
|
1330
1293
|
const weekdayNames = useMemo4(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
|
|
1331
|
-
return /* @__PURE__ */
|
|
1294
|
+
return /* @__PURE__ */ React12.createElement(CalendarViewContainer, { calendarType: "datePicker" }, /* @__PURE__ */ React12.createElement(AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ React12.createElement(
|
|
1332
1295
|
CalendarViewTable,
|
|
1333
1296
|
{
|
|
1334
1297
|
key: `${ownerState.viewMonth.toString()}_${ownerState.direction}`,
|
|
@@ -1357,10 +1320,10 @@ var PickerDays = (props) => {
|
|
|
1357
1320
|
}
|
|
1358
1321
|
}
|
|
1359
1322
|
},
|
|
1360
|
-
/* @__PURE__ */
|
|
1361
|
-
/* @__PURE__ */
|
|
1362
|
-
(date, i) => date ? /* @__PURE__ */
|
|
1363
|
-
)), rowIndex < calendarDates.length - 1 && /* @__PURE__ */
|
|
1323
|
+
/* @__PURE__ */ React12.createElement(CalendarWeekHeaderContainer, null, /* @__PURE__ */ React12.createElement("tr", null, weekdayNames.map((name, i) => /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` }, /* @__PURE__ */ React12.createElement("th", null, /* @__PURE__ */ React12.createElement(Typography_default, { level: "body-xs", textAlign: "center" }, name)), i < 6 && /* @__PURE__ */ React12.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" }))))),
|
|
1324
|
+
/* @__PURE__ */ React12.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ React12.createElement("tr", null, weekDates.map(
|
|
1325
|
+
(date, i) => date ? /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ React12.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ React12.createElement(CalendarDay, { size: "sm", variant: "plain", color: "neutral", ...getPickerDayProps(date) }, date)), i < 6 && /* @__PURE__ */ React12.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ React12.createElement("td", null), i < 6 && /* @__PURE__ */ React12.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
|
|
1326
|
+
)), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ React12.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React12.createElement("td", { colSpan: 13, style: { height: 4 } })))))
|
|
1364
1327
|
)));
|
|
1365
1328
|
};
|
|
1366
1329
|
var PickerMonths = (props) => {
|
|
@@ -1377,7 +1340,7 @@ var PickerMonths = (props) => {
|
|
|
1377
1340
|
[[]]
|
|
1378
1341
|
);
|
|
1379
1342
|
const isMonthPicker = !ownerState.views?.find((view) => view === "day");
|
|
1380
|
-
return /* @__PURE__ */
|
|
1343
|
+
return /* @__PURE__ */ React12.createElement(CalendarViewContainer, { calendarType: isMonthPicker ? "monthPicker" : "datePicker" }, /* @__PURE__ */ React12.createElement(AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ React12.createElement(
|
|
1381
1344
|
CalendarViewTable,
|
|
1382
1345
|
{
|
|
1383
1346
|
key: `${ownerState.viewMonth.getFullYear()}_${ownerState.direction}`,
|
|
@@ -1406,7 +1369,7 @@ var PickerMonths = (props) => {
|
|
|
1406
1369
|
}
|
|
1407
1370
|
}
|
|
1408
1371
|
},
|
|
1409
|
-
/* @__PURE__ */
|
|
1372
|
+
/* @__PURE__ */ React12.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ React12.createElement(Fragment, { key: months.join("_") }, /* @__PURE__ */ React12.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ React12.createElement(Fragment, { key: monthIndex }, /* @__PURE__ */ React12.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ React12.createElement(CalendarMonth, { size: "sm", variant: "plain", color: "neutral", ...getPickerMonthProps(monthIndex) }, getMonthNameFromIndex(monthIndex, ownerState.locale))), j < 3 && /* @__PURE__ */ React12.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))), i < chunkedMonths.length - 1 && /* @__PURE__ */ React12.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React12.createElement("td", { colSpan: 7, style: { height: 4 } })))))
|
|
1410
1373
|
)));
|
|
1411
1374
|
};
|
|
1412
1375
|
var Calendar = forwardRef4((inProps, ref) => {
|
|
@@ -1428,17 +1391,96 @@ var Calendar = forwardRef4((inProps, ref) => {
|
|
|
1428
1391
|
...others
|
|
1429
1392
|
} = props;
|
|
1430
1393
|
const { calendarTitle, onPrev, onNext } = useCalendar(ownerState);
|
|
1431
|
-
|
|
1432
|
-
|
|
1394
|
+
const [isMonthViewAssistHintOpen, setIsMonthViewAssistHintOpen] = useState4(false);
|
|
1395
|
+
const monthNavClickTimestampsRef = useRef3([]);
|
|
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,
|
|
1433
1462
|
{
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1463
|
+
title: monthViewHintMessage,
|
|
1464
|
+
arrow: true,
|
|
1465
|
+
open: isMonthViewAssistHintOpen,
|
|
1466
|
+
placement: "bottom",
|
|
1467
|
+
disableFocusListener: true,
|
|
1468
|
+
disableHoverListener: true,
|
|
1469
|
+
disableTouchListener: true,
|
|
1470
|
+
variant: "solid"
|
|
1439
1471
|
},
|
|
1440
|
-
|
|
1441
|
-
|
|
1472
|
+
/* @__PURE__ */ React12.createElement(
|
|
1473
|
+
CalendarSwitchViewButton,
|
|
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 }));
|
|
1442
1484
|
});
|
|
1443
1485
|
Calendar.displayName = "Calendar";
|
|
1444
1486
|
|
|
@@ -1453,30 +1495,30 @@ import {
|
|
|
1453
1495
|
CardActions as JoyCardActions,
|
|
1454
1496
|
CardOverflow as JoyCardOverflow
|
|
1455
1497
|
} from "@mui/joy";
|
|
1456
|
-
import { motion as
|
|
1457
|
-
var MotionCard =
|
|
1498
|
+
import { motion as motion14 } from "framer-motion";
|
|
1499
|
+
var MotionCard = motion14(JoyCard);
|
|
1458
1500
|
var Card = MotionCard;
|
|
1459
1501
|
Card.displayName = "Card";
|
|
1460
|
-
var MotionCardContent =
|
|
1502
|
+
var MotionCardContent = motion14(JoyCardContent);
|
|
1461
1503
|
var CardContent = MotionCardContent;
|
|
1462
1504
|
CardContent.displayName = "CardContent";
|
|
1463
|
-
var MotionCardCover =
|
|
1505
|
+
var MotionCardCover = motion14(JoyCardCover);
|
|
1464
1506
|
var CardCover = MotionCardCover;
|
|
1465
1507
|
CardCover.displayName = "CardCover";
|
|
1466
|
-
var MotionCardActions =
|
|
1508
|
+
var MotionCardActions = motion14(JoyCardActions);
|
|
1467
1509
|
var CardActions = MotionCardActions;
|
|
1468
1510
|
CardActions.displayName = "CardActions";
|
|
1469
|
-
var MotionCardOverflow =
|
|
1511
|
+
var MotionCardOverflow = motion14(JoyCardOverflow);
|
|
1470
1512
|
var CardOverflow = MotionCardOverflow;
|
|
1471
1513
|
CardOverflow.displayName = "CardOverflow";
|
|
1472
1514
|
|
|
1473
1515
|
// src/components/Checkbox/Checkbox.tsx
|
|
1474
|
-
import
|
|
1516
|
+
import React13 from "react";
|
|
1475
1517
|
import { Checkbox as JoyCheckbox } from "@mui/joy";
|
|
1476
|
-
import { motion as
|
|
1477
|
-
var MotionCheckbox =
|
|
1518
|
+
import { motion as motion15 } from "framer-motion";
|
|
1519
|
+
var MotionCheckbox = motion15(JoyCheckbox);
|
|
1478
1520
|
var Checkbox = (props) => {
|
|
1479
|
-
return /* @__PURE__ */
|
|
1521
|
+
return /* @__PURE__ */ React13.createElement(MotionCheckbox, { ...props });
|
|
1480
1522
|
};
|
|
1481
1523
|
Checkbox.displayName = "Checkbox";
|
|
1482
1524
|
|
|
@@ -1485,7 +1527,7 @@ var Checkbox_default = Checkbox;
|
|
|
1485
1527
|
|
|
1486
1528
|
// src/components/Container/Container.tsx
|
|
1487
1529
|
import { styled as styled6 } from "@mui/joy";
|
|
1488
|
-
import
|
|
1530
|
+
import React14, { forwardRef as forwardRef5 } from "react";
|
|
1489
1531
|
var ContainerRoot = styled6("div", {
|
|
1490
1532
|
name: "Container",
|
|
1491
1533
|
slot: "root",
|
|
@@ -1512,24 +1554,24 @@ var ContainerRoot = styled6("div", {
|
|
|
1512
1554
|
} : null
|
|
1513
1555
|
]);
|
|
1514
1556
|
var Container = forwardRef5(function Container2(props, ref) {
|
|
1515
|
-
return /* @__PURE__ */
|
|
1557
|
+
return /* @__PURE__ */ React14.createElement(ContainerRoot, { ref, ...props });
|
|
1516
1558
|
});
|
|
1517
1559
|
Container.displayName = "Container";
|
|
1518
1560
|
|
|
1519
1561
|
// src/components/CurrencyInput/CurrencyInput.tsx
|
|
1520
|
-
import
|
|
1562
|
+
import React16, { useCallback as useCallback7, useMemo as useMemo5, useState as useState6 } from "react";
|
|
1521
1563
|
import { IntlMessageFormat as IntlMessageFormat2 } from "intl-messageformat";
|
|
1522
1564
|
import { NumericFormat } from "react-number-format";
|
|
1523
1565
|
|
|
1524
1566
|
// src/components/Input/Input.tsx
|
|
1525
|
-
import
|
|
1567
|
+
import React15, { useCallback as useCallback6, useState as useState5 } from "react";
|
|
1526
1568
|
import { Input as JoyInput } from "@mui/joy";
|
|
1527
|
-
import { motion as
|
|
1569
|
+
import { motion as motion16 } from "framer-motion";
|
|
1528
1570
|
import ClearIcon from "@mui/icons-material/Close";
|
|
1529
1571
|
import VisibilityIcon from "@mui/icons-material/Visibility";
|
|
1530
1572
|
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
|
|
1531
|
-
var MotionInput =
|
|
1532
|
-
var Input =
|
|
1573
|
+
var MotionInput = motion16(JoyInput);
|
|
1574
|
+
var Input = React15.forwardRef((props, ref) => {
|
|
1533
1575
|
const {
|
|
1534
1576
|
label,
|
|
1535
1577
|
helperText,
|
|
@@ -1552,11 +1594,11 @@ var Input = React14.forwardRef((props, ref) => {
|
|
|
1552
1594
|
if (type === "password" && innerProps.endDecorator) {
|
|
1553
1595
|
console.warn('Input: endDecorator is not supported when type="password"');
|
|
1554
1596
|
}
|
|
1555
|
-
const [passwordVisible, setPasswordVisible] =
|
|
1597
|
+
const [passwordVisible, setPasswordVisible] = useState5(false);
|
|
1556
1598
|
const [value, setValue] = useControlledState(
|
|
1557
1599
|
props.value,
|
|
1558
1600
|
props.defaultValue,
|
|
1559
|
-
|
|
1601
|
+
useCallback6(
|
|
1560
1602
|
(value2) => {
|
|
1561
1603
|
onChange?.({
|
|
1562
1604
|
/**
|
|
@@ -1582,7 +1624,7 @@ var Input = React14.forwardRef((props, ref) => {
|
|
|
1582
1624
|
const actualType = type === "password" && passwordVisible ? "text" : type;
|
|
1583
1625
|
const isPasswordType = type === "password";
|
|
1584
1626
|
const showPasswordToggle = isPasswordType && !disableTogglePasswordButton;
|
|
1585
|
-
const input = /* @__PURE__ */
|
|
1627
|
+
const input = /* @__PURE__ */ React15.createElement(
|
|
1586
1628
|
MotionInput,
|
|
1587
1629
|
{
|
|
1588
1630
|
value,
|
|
@@ -1597,7 +1639,7 @@ var Input = React14.forwardRef((props, ref) => {
|
|
|
1597
1639
|
...innerProps.slotProps
|
|
1598
1640
|
},
|
|
1599
1641
|
...innerProps,
|
|
1600
|
-
endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */
|
|
1642
|
+
endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */ React15.createElement(Stack_default, { gap: 1, direction: "row" }, /* @__PURE__ */ React15.createElement(
|
|
1601
1643
|
IconButton_default,
|
|
1602
1644
|
{
|
|
1603
1645
|
onMouseDown: (e) => e.preventDefault(),
|
|
@@ -1605,19 +1647,19 @@ var Input = React14.forwardRef((props, ref) => {
|
|
|
1605
1647
|
disabled,
|
|
1606
1648
|
"aria-label": passwordVisible ? "Hide password" : "Show password"
|
|
1607
1649
|
},
|
|
1608
|
-
passwordVisible ? /* @__PURE__ */
|
|
1609
|
-
)) : null : enableClearable ? /* @__PURE__ */
|
|
1650
|
+
passwordVisible ? /* @__PURE__ */ React15.createElement(VisibilityOffIcon, null) : /* @__PURE__ */ React15.createElement(VisibilityIcon, null)
|
|
1651
|
+
)) : null : enableClearable ? /* @__PURE__ */ React15.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ React15.createElement(
|
|
1610
1652
|
IconButton_default,
|
|
1611
1653
|
{
|
|
1612
1654
|
onMouseDown: (e) => e.preventDefault(),
|
|
1613
1655
|
onClick: handleClear,
|
|
1614
1656
|
"aria-label": "Clear"
|
|
1615
1657
|
},
|
|
1616
|
-
/* @__PURE__ */
|
|
1658
|
+
/* @__PURE__ */ React15.createElement(ClearIcon, null)
|
|
1617
1659
|
)) : innerProps.endDecorator
|
|
1618
1660
|
}
|
|
1619
1661
|
);
|
|
1620
|
-
return /* @__PURE__ */
|
|
1662
|
+
return /* @__PURE__ */ React15.createElement(
|
|
1621
1663
|
FormControl_default,
|
|
1622
1664
|
{
|
|
1623
1665
|
required,
|
|
@@ -1628,9 +1670,9 @@ var Input = React14.forwardRef((props, ref) => {
|
|
|
1628
1670
|
sx,
|
|
1629
1671
|
className
|
|
1630
1672
|
},
|
|
1631
|
-
label && /* @__PURE__ */
|
|
1673
|
+
label && /* @__PURE__ */ React15.createElement(FormLabel_default, null, label),
|
|
1632
1674
|
input,
|
|
1633
|
-
helperText && /* @__PURE__ */
|
|
1675
|
+
helperText && /* @__PURE__ */ React15.createElement(FormHelperText_default, null, helperText)
|
|
1634
1676
|
);
|
|
1635
1677
|
});
|
|
1636
1678
|
Input.displayName = "Input";
|
|
@@ -1802,9 +1844,9 @@ var useCurrencySetting = (props) => {
|
|
|
1802
1844
|
};
|
|
1803
1845
|
|
|
1804
1846
|
// src/components/CurrencyInput/CurrencyInput.tsx
|
|
1805
|
-
var TextMaskAdapter =
|
|
1847
|
+
var TextMaskAdapter = React16.forwardRef(function TextMaskAdapter2(props, ref) {
|
|
1806
1848
|
const { onChange, ...innerProps } = props;
|
|
1807
|
-
return /* @__PURE__ */
|
|
1849
|
+
return /* @__PURE__ */ React16.createElement(
|
|
1808
1850
|
NumericFormat,
|
|
1809
1851
|
{
|
|
1810
1852
|
...innerProps,
|
|
@@ -1824,7 +1866,7 @@ var CurrencyInputRoot = styled7(Input_default, {
|
|
|
1824
1866
|
slot: "root",
|
|
1825
1867
|
overridesResolver: (props, styles) => styles.root
|
|
1826
1868
|
})({});
|
|
1827
|
-
var CurrencyInput =
|
|
1869
|
+
var CurrencyInput = React16.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
1828
1870
|
const props = useThemeProps3({ props: inProps, name: "CurrencyInput" });
|
|
1829
1871
|
const {
|
|
1830
1872
|
currency = "USD",
|
|
@@ -1845,7 +1887,7 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1845
1887
|
const [_value, setValue] = useControlledState(
|
|
1846
1888
|
props.value,
|
|
1847
1889
|
props.defaultValue,
|
|
1848
|
-
|
|
1890
|
+
useCallback7((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
|
|
1849
1891
|
);
|
|
1850
1892
|
const value = useMemo5(() => {
|
|
1851
1893
|
if (_value && useMinorUnit) {
|
|
@@ -1859,8 +1901,8 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1859
1901
|
}
|
|
1860
1902
|
return props.max;
|
|
1861
1903
|
}, [props.max, useMinorUnit, decimalScale]);
|
|
1862
|
-
const [isOverLimit, setIsOverLimit] =
|
|
1863
|
-
const handleChange =
|
|
1904
|
+
const [isOverLimit, setIsOverLimit] = useState6(!!max && !!value && value > max);
|
|
1905
|
+
const handleChange = useCallback7(
|
|
1864
1906
|
(event) => {
|
|
1865
1907
|
if (event.target.value === "") {
|
|
1866
1908
|
setValue(void 0);
|
|
@@ -1876,7 +1918,7 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1876
1918
|
},
|
|
1877
1919
|
[decimalSeparator, max, useMinorUnit, setValue]
|
|
1878
1920
|
);
|
|
1879
|
-
return /* @__PURE__ */
|
|
1921
|
+
return /* @__PURE__ */ React16.createElement(
|
|
1880
1922
|
CurrencyInputRoot,
|
|
1881
1923
|
{
|
|
1882
1924
|
...innerProps,
|
|
@@ -1916,9 +1958,9 @@ var CurrencyInput_default = CurrencyInput;
|
|
|
1916
1958
|
|
|
1917
1959
|
// src/components/DataTable/DataTable.tsx
|
|
1918
1960
|
import React25, {
|
|
1919
|
-
useCallback as
|
|
1961
|
+
useCallback as useCallback12,
|
|
1920
1962
|
useMemo as useMemo10,
|
|
1921
|
-
useRef as
|
|
1963
|
+
useRef as useRef7,
|
|
1922
1964
|
useId,
|
|
1923
1965
|
forwardRef as forwardRef7,
|
|
1924
1966
|
useImperativeHandle as useImperativeHandle2,
|
|
@@ -2046,9 +2088,9 @@ function getTextAlign(props) {
|
|
|
2046
2088
|
var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
|
|
2047
2089
|
|
|
2048
2090
|
// src/components/DataTable/styled.tsx
|
|
2049
|
-
import
|
|
2091
|
+
import React17 from "react";
|
|
2050
2092
|
import { styled as styled8, LinearProgress, buttonClasses, iconButtonClasses } from "@mui/joy";
|
|
2051
|
-
import { motion as
|
|
2093
|
+
import { motion as motion17 } from "framer-motion";
|
|
2052
2094
|
import SortIcon from "@mui/icons-material/ArrowUpwardRounded";
|
|
2053
2095
|
var EllipsisDiv = styled8("div", {
|
|
2054
2096
|
name: "DataTable",
|
|
@@ -2122,7 +2164,7 @@ var Asterisk = styled8("span", {
|
|
|
2122
2164
|
color: "var(--ceed-palette-danger-500)",
|
|
2123
2165
|
marginLeft: theme.spacing(0.5)
|
|
2124
2166
|
}));
|
|
2125
|
-
var StyledTh = styled8(
|
|
2167
|
+
var StyledTh = styled8(motion17.th)(({ theme }) => ({
|
|
2126
2168
|
boxShadow: "1px 0 var(--TableCell-borderColor)"
|
|
2127
2169
|
}));
|
|
2128
2170
|
var StyledTd = styled8("td")(({ theme }) => ({
|
|
@@ -2141,9 +2183,9 @@ var StyledTd = styled8("td")(({ theme }) => ({
|
|
|
2141
2183
|
}
|
|
2142
2184
|
}
|
|
2143
2185
|
}));
|
|
2144
|
-
var MotionSortIcon =
|
|
2145
|
-
var DefaultLoadingOverlay = () => /* @__PURE__ */
|
|
2146
|
-
var Resizer = (ref, targetRef = ref) => /* @__PURE__ */
|
|
2186
|
+
var MotionSortIcon = motion17(SortIcon);
|
|
2187
|
+
var DefaultLoadingOverlay = () => /* @__PURE__ */ React17.createElement(LinearProgress, { value: 8, variant: "plain" });
|
|
2188
|
+
var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React17.createElement(
|
|
2147
2189
|
Box_default,
|
|
2148
2190
|
{
|
|
2149
2191
|
sx: {
|
|
@@ -2176,12 +2218,12 @@ var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React16.createElement(
|
|
|
2176
2218
|
|
|
2177
2219
|
// src/components/DataTable/components.tsx
|
|
2178
2220
|
import React22, {
|
|
2179
|
-
useRef as
|
|
2180
|
-
useState as
|
|
2221
|
+
useRef as useRef5,
|
|
2222
|
+
useState as useState8,
|
|
2181
2223
|
useLayoutEffect,
|
|
2182
2224
|
useMemo as useMemo8,
|
|
2183
|
-
useCallback as
|
|
2184
|
-
useEffect as
|
|
2225
|
+
useCallback as useCallback9,
|
|
2226
|
+
useEffect as useEffect5,
|
|
2185
2227
|
memo,
|
|
2186
2228
|
createElement
|
|
2187
2229
|
} from "react";
|
|
@@ -2189,7 +2231,7 @@ import { styled as styled12, useTheme } from "@mui/joy";
|
|
|
2189
2231
|
import { AnimatePresence as AnimatePresence2 } from "framer-motion";
|
|
2190
2232
|
|
|
2191
2233
|
// src/components/DatePicker/DatePicker.tsx
|
|
2192
|
-
import
|
|
2234
|
+
import React18, { forwardRef as forwardRef6, useCallback as useCallback8, useEffect as useEffect4, useImperativeHandle, useRef as useRef4, useState as useState7 } from "react";
|
|
2193
2235
|
import { IMaskInput, IMask } from "react-imask";
|
|
2194
2236
|
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
|
|
2195
2237
|
import { styled as styled10, useThemeProps as useThemeProps4 } from "@mui/joy";
|
|
@@ -2204,8 +2246,8 @@ var Sheet_default = Sheet;
|
|
|
2204
2246
|
|
|
2205
2247
|
// src/components/DialogActions/DialogActions.tsx
|
|
2206
2248
|
import { DialogActions as JoyDialogActions, styled as styled9 } from "@mui/joy";
|
|
2207
|
-
import { motion as
|
|
2208
|
-
var MotionDialogActions =
|
|
2249
|
+
import { motion as motion18 } from "framer-motion";
|
|
2250
|
+
var MotionDialogActions = motion18(JoyDialogActions);
|
|
2209
2251
|
var StyledDialogActions = styled9(MotionDialogActions)(({ theme }) => ({
|
|
2210
2252
|
padding: theme.spacing(2),
|
|
2211
2253
|
gap: theme.spacing(2),
|
|
@@ -2301,9 +2343,9 @@ function parseDate(dateString, format) {
|
|
|
2301
2343
|
var formatToPattern = (format) => {
|
|
2302
2344
|
return format.replace(/YYYY/g, "Y").replace(/MM/g, "M").replace(/DD/g, "D").replace(/[^YMD\s]/g, (match) => `${match}\``);
|
|
2303
2345
|
};
|
|
2304
|
-
var TextMaskAdapter3 =
|
|
2346
|
+
var TextMaskAdapter3 = React18.forwardRef(function TextMaskAdapter4(props, ref) {
|
|
2305
2347
|
const { onChange, format, ...other } = props;
|
|
2306
|
-
return /* @__PURE__ */
|
|
2348
|
+
return /* @__PURE__ */ React18.createElement(
|
|
2307
2349
|
IMaskInput,
|
|
2308
2350
|
{
|
|
2309
2351
|
...other,
|
|
@@ -2363,24 +2405,24 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2363
2405
|
shouldDisableDate,
|
|
2364
2406
|
...innerProps
|
|
2365
2407
|
} = props;
|
|
2366
|
-
const innerRef =
|
|
2367
|
-
const buttonRef =
|
|
2408
|
+
const innerRef = useRef4(null);
|
|
2409
|
+
const buttonRef = useRef4(null);
|
|
2368
2410
|
const [value, setValue] = useControlledState(
|
|
2369
2411
|
props.value,
|
|
2370
2412
|
props.defaultValue || "",
|
|
2371
|
-
|
|
2413
|
+
useCallback8((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
2372
2414
|
);
|
|
2373
|
-
const [displayValue, setDisplayValue] =
|
|
2415
|
+
const [displayValue, setDisplayValue] = useState7(
|
|
2374
2416
|
() => value ? formatValueString(parseDate(value, format), displayFormat) : ""
|
|
2375
2417
|
);
|
|
2376
|
-
const [anchorEl, setAnchorEl] =
|
|
2418
|
+
const [anchorEl, setAnchorEl] = useState7(null);
|
|
2377
2419
|
const open = Boolean(anchorEl);
|
|
2378
|
-
|
|
2420
|
+
useEffect4(() => {
|
|
2379
2421
|
if (!anchorEl) {
|
|
2380
2422
|
innerRef.current?.blur();
|
|
2381
2423
|
}
|
|
2382
2424
|
}, [anchorEl, innerRef]);
|
|
2383
|
-
|
|
2425
|
+
useEffect4(() => {
|
|
2384
2426
|
if (value === "") {
|
|
2385
2427
|
setDisplayValue("");
|
|
2386
2428
|
return;
|
|
@@ -2391,7 +2433,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2391
2433
|
}
|
|
2392
2434
|
}, [displayFormat, displayValue, format, value]);
|
|
2393
2435
|
useImperativeHandle(ref, () => innerRef.current, [innerRef]);
|
|
2394
|
-
const handleChange =
|
|
2436
|
+
const handleChange = useCallback8(
|
|
2395
2437
|
(event) => {
|
|
2396
2438
|
const value2 = event.target.value;
|
|
2397
2439
|
setDisplayValue(value2 ? formatValueString(parseDate(value2, format), displayFormat) : value2);
|
|
@@ -2399,7 +2441,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2399
2441
|
},
|
|
2400
2442
|
[displayFormat, format, setValue]
|
|
2401
2443
|
);
|
|
2402
|
-
const handleDisplayInputChange =
|
|
2444
|
+
const handleDisplayInputChange = useCallback8(
|
|
2403
2445
|
(event) => {
|
|
2404
2446
|
if (event.target.value === "") {
|
|
2405
2447
|
handleChange({
|
|
@@ -2424,7 +2466,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2424
2466
|
},
|
|
2425
2467
|
[displayFormat, format, handleChange, props.name]
|
|
2426
2468
|
);
|
|
2427
|
-
const handleCalendarToggle =
|
|
2469
|
+
const handleCalendarToggle = useCallback8(
|
|
2428
2470
|
(event) => {
|
|
2429
2471
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
2430
2472
|
setTimeout(() => {
|
|
@@ -2433,7 +2475,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2433
2475
|
},
|
|
2434
2476
|
[anchorEl, setAnchorEl, innerRef]
|
|
2435
2477
|
);
|
|
2436
|
-
const handleInputMouseDown =
|
|
2478
|
+
const handleInputMouseDown = useCallback8(
|
|
2437
2479
|
(event) => {
|
|
2438
2480
|
if (inputReadOnly) {
|
|
2439
2481
|
event.preventDefault();
|
|
@@ -2442,7 +2484,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2442
2484
|
},
|
|
2443
2485
|
[inputReadOnly, buttonRef]
|
|
2444
2486
|
);
|
|
2445
|
-
return /* @__PURE__ */
|
|
2487
|
+
return /* @__PURE__ */ React18.createElement(DatePickerRoot, null, /* @__PURE__ */ React18.createElement(FocusTrap, { open: true }, /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
|
|
2446
2488
|
Input_default,
|
|
2447
2489
|
{
|
|
2448
2490
|
...innerProps,
|
|
@@ -2470,7 +2512,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2470
2512
|
},
|
|
2471
2513
|
className,
|
|
2472
2514
|
sx,
|
|
2473
|
-
endDecorator: /* @__PURE__ */
|
|
2515
|
+
endDecorator: /* @__PURE__ */ React18.createElement(
|
|
2474
2516
|
CalendarButton,
|
|
2475
2517
|
{
|
|
2476
2518
|
ref: buttonRef,
|
|
@@ -2482,13 +2524,13 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2482
2524
|
"aria-expanded": open,
|
|
2483
2525
|
disabled
|
|
2484
2526
|
},
|
|
2485
|
-
/* @__PURE__ */
|
|
2527
|
+
/* @__PURE__ */ React18.createElement(CalendarTodayIcon, null)
|
|
2486
2528
|
),
|
|
2487
2529
|
label,
|
|
2488
2530
|
helperText,
|
|
2489
2531
|
readOnly: readOnly || inputReadOnly
|
|
2490
2532
|
}
|
|
2491
|
-
), open && /* @__PURE__ */
|
|
2533
|
+
), open && /* @__PURE__ */ React18.createElement(ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React18.createElement(
|
|
2492
2534
|
StyledPopper,
|
|
2493
2535
|
{
|
|
2494
2536
|
id: "date-picker-popper",
|
|
@@ -2507,7 +2549,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2507
2549
|
"aria-label": "Calendar Tooltip",
|
|
2508
2550
|
"aria-expanded": open
|
|
2509
2551
|
},
|
|
2510
|
-
/* @__PURE__ */
|
|
2552
|
+
/* @__PURE__ */ React18.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React18.createElement(
|
|
2511
2553
|
Calendar_default,
|
|
2512
2554
|
{
|
|
2513
2555
|
value: value && !Number.isNaN(parseDate(value, format).getTime()) ? [parseDate(value, format), void 0] : void 0,
|
|
@@ -2526,14 +2568,14 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2526
2568
|
disablePast,
|
|
2527
2569
|
shouldDisableDate: shouldDisableDate ? (date) => shouldDisableDate(formatValueString(date, format)) : void 0
|
|
2528
2570
|
}
|
|
2529
|
-
), !hideClearButton && /* @__PURE__ */
|
|
2571
|
+
), !hideClearButton && /* @__PURE__ */ React18.createElement(
|
|
2530
2572
|
DialogActions_default,
|
|
2531
2573
|
{
|
|
2532
2574
|
sx: {
|
|
2533
2575
|
p: 1
|
|
2534
2576
|
}
|
|
2535
2577
|
},
|
|
2536
|
-
/* @__PURE__ */
|
|
2578
|
+
/* @__PURE__ */ React18.createElement(
|
|
2537
2579
|
Button_default,
|
|
2538
2580
|
{
|
|
2539
2581
|
size,
|
|
@@ -2559,10 +2601,10 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2559
2601
|
var DatePicker_default = DatePicker;
|
|
2560
2602
|
|
|
2561
2603
|
// src/components/Textarea/Textarea.tsx
|
|
2562
|
-
import
|
|
2604
|
+
import React19 from "react";
|
|
2563
2605
|
import { Textarea as JoyTextarea } from "@mui/joy";
|
|
2564
|
-
import { motion as
|
|
2565
|
-
var MotionTextarea =
|
|
2606
|
+
import { motion as motion19 } from "framer-motion";
|
|
2607
|
+
var MotionTextarea = motion19(JoyTextarea);
|
|
2566
2608
|
var Textarea = (props) => {
|
|
2567
2609
|
const {
|
|
2568
2610
|
label,
|
|
@@ -2579,7 +2621,7 @@ var Textarea = (props) => {
|
|
|
2579
2621
|
className,
|
|
2580
2622
|
...innerProps
|
|
2581
2623
|
} = props;
|
|
2582
|
-
const textarea = /* @__PURE__ */
|
|
2624
|
+
const textarea = /* @__PURE__ */ React19.createElement(
|
|
2583
2625
|
MotionTextarea,
|
|
2584
2626
|
{
|
|
2585
2627
|
required,
|
|
@@ -2591,7 +2633,7 @@ var Textarea = (props) => {
|
|
|
2591
2633
|
...innerProps
|
|
2592
2634
|
}
|
|
2593
2635
|
);
|
|
2594
|
-
return /* @__PURE__ */
|
|
2636
|
+
return /* @__PURE__ */ React19.createElement(
|
|
2595
2637
|
FormControl_default,
|
|
2596
2638
|
{
|
|
2597
2639
|
required,
|
|
@@ -2602,9 +2644,9 @@ var Textarea = (props) => {
|
|
|
2602
2644
|
sx,
|
|
2603
2645
|
className
|
|
2604
2646
|
},
|
|
2605
|
-
label && /* @__PURE__ */
|
|
2647
|
+
label && /* @__PURE__ */ React19.createElement(FormLabel_default, null, label),
|
|
2606
2648
|
textarea,
|
|
2607
|
-
helperText && /* @__PURE__ */
|
|
2649
|
+
helperText && /* @__PURE__ */ React19.createElement(FormHelperText_default, null, helperText)
|
|
2608
2650
|
);
|
|
2609
2651
|
};
|
|
2610
2652
|
Textarea.displayName = "Textarea";
|
|
@@ -2613,10 +2655,10 @@ Textarea.displayName = "Textarea";
|
|
|
2613
2655
|
var Textarea_default = Textarea;
|
|
2614
2656
|
|
|
2615
2657
|
// src/components/Select/Select.tsx
|
|
2616
|
-
import
|
|
2658
|
+
import React20, { useMemo as useMemo7 } from "react";
|
|
2617
2659
|
import { Select as JoySelect, Option as JoyOption, ListItemContent as ListItemContent2, Typography as Typography3 } from "@mui/joy";
|
|
2618
|
-
import { motion as
|
|
2619
|
-
var MotionOption =
|
|
2660
|
+
import { motion as motion20 } from "framer-motion";
|
|
2661
|
+
var MotionOption = motion20(JoyOption);
|
|
2620
2662
|
var Option = MotionOption;
|
|
2621
2663
|
var secondaryTextLevelMap2 = {
|
|
2622
2664
|
sm: "body-xs",
|
|
@@ -2671,7 +2713,7 @@ function Select(props) {
|
|
|
2671
2713
|
});
|
|
2672
2714
|
return map;
|
|
2673
2715
|
}, [options]);
|
|
2674
|
-
const select = /* @__PURE__ */
|
|
2716
|
+
const select = /* @__PURE__ */ React20.createElement(
|
|
2675
2717
|
JoySelect,
|
|
2676
2718
|
{
|
|
2677
2719
|
...innerProps,
|
|
@@ -2688,9 +2730,9 @@ function Select(props) {
|
|
|
2688
2730
|
return optionMap.get(selected.value)?.label;
|
|
2689
2731
|
}
|
|
2690
2732
|
},
|
|
2691
|
-
options.map((option) => /* @__PURE__ */
|
|
2733
|
+
options.map((option) => /* @__PURE__ */ React20.createElement(Option, { key: option.value, value: option.value, disabled: option.disabled }, option.secondaryText ? /* @__PURE__ */ React20.createElement(ListItemContent2, { sx: { gap: 0.5 } }, /* @__PURE__ */ React20.createElement(Typography3, { level: "inherit" }, option.label), /* @__PURE__ */ React20.createElement(Typography3, { level: secondaryTextLevelMap2[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : option.label))
|
|
2692
2734
|
);
|
|
2693
|
-
return /* @__PURE__ */
|
|
2735
|
+
return /* @__PURE__ */ React20.createElement(
|
|
2694
2736
|
FormControl_default,
|
|
2695
2737
|
{
|
|
2696
2738
|
required,
|
|
@@ -2701,9 +2743,9 @@ function Select(props) {
|
|
|
2701
2743
|
sx,
|
|
2702
2744
|
className
|
|
2703
2745
|
},
|
|
2704
|
-
label && /* @__PURE__ */
|
|
2746
|
+
label && /* @__PURE__ */ React20.createElement(FormLabel_default, null, label),
|
|
2705
2747
|
select,
|
|
2706
|
-
helperText && /* @__PURE__ */
|
|
2748
|
+
helperText && /* @__PURE__ */ React20.createElement(FormHelperText_default, null, helperText)
|
|
2707
2749
|
);
|
|
2708
2750
|
}
|
|
2709
2751
|
Select.displayName = "Select";
|
|
@@ -2714,19 +2756,6 @@ var Select_default = Select;
|
|
|
2714
2756
|
// src/components/DataTable/components.tsx
|
|
2715
2757
|
import { Link } from "@mui/joy";
|
|
2716
2758
|
|
|
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
|
-
|
|
2730
2759
|
// src/components/InfoSign/InfoSign.tsx
|
|
2731
2760
|
import React21 from "react";
|
|
2732
2761
|
import { styled as styled11, tooltipClasses } from "@mui/joy";
|
|
@@ -2762,8 +2791,8 @@ var InfoSign_default = InfoSign;
|
|
|
2762
2791
|
|
|
2763
2792
|
// src/components/DataTable/components.tsx
|
|
2764
2793
|
var TextEllipsis = ({ children }) => {
|
|
2765
|
-
const textRef =
|
|
2766
|
-
const [showTooltip, setShowTooltip] =
|
|
2794
|
+
const textRef = useRef5(null);
|
|
2795
|
+
const [showTooltip, setShowTooltip] = useState8(false);
|
|
2767
2796
|
useLayoutEffect(() => {
|
|
2768
2797
|
const element = textRef.current;
|
|
2769
2798
|
if (element) {
|
|
@@ -2778,8 +2807,8 @@ var TextEllipsis = ({ children }) => {
|
|
|
2778
2807
|
return content;
|
|
2779
2808
|
};
|
|
2780
2809
|
var CellTextEllipsis = ({ children }) => {
|
|
2781
|
-
const textRef =
|
|
2782
|
-
const [showTooltip, setShowTooltip] =
|
|
2810
|
+
const textRef = useRef5(null);
|
|
2811
|
+
const [showTooltip, setShowTooltip] = useState8(false);
|
|
2783
2812
|
useLayoutEffect(() => {
|
|
2784
2813
|
const element = textRef.current;
|
|
2785
2814
|
if (element) {
|
|
@@ -2831,7 +2860,7 @@ var HeadCell = (props) => {
|
|
|
2831
2860
|
const theme = useTheme();
|
|
2832
2861
|
const ref = headerRef;
|
|
2833
2862
|
const colRef = tableColRef;
|
|
2834
|
-
const [isHovered, setIsHovered] =
|
|
2863
|
+
const [isHovered, setIsHovered] = useState8(false);
|
|
2835
2864
|
const sortable = type === "actions" ? false : _sortable;
|
|
2836
2865
|
const headId = useMemo8(
|
|
2837
2866
|
() => `${tableId}_header_${headerName ?? field}`.trim(),
|
|
@@ -2910,7 +2939,7 @@ var HeadCell = (props) => {
|
|
|
2910
2939
|
ref,
|
|
2911
2940
|
key: field,
|
|
2912
2941
|
style,
|
|
2913
|
-
onClick:
|
|
2942
|
+
onClick: useCallback9(
|
|
2914
2943
|
(e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
|
|
2915
2944
|
[field, onSortChange, sort, sortable]
|
|
2916
2945
|
),
|
|
@@ -2945,8 +2974,8 @@ var BodyCell = (props) => {
|
|
|
2945
2974
|
onCellEditStop
|
|
2946
2975
|
} = props;
|
|
2947
2976
|
const theme = useTheme();
|
|
2948
|
-
const [value, setValue] =
|
|
2949
|
-
const cellRef =
|
|
2977
|
+
const [value, setValue] = useState8(row[field]);
|
|
2978
|
+
const cellRef = useRef5(null);
|
|
2950
2979
|
const params = useMemo8(
|
|
2951
2980
|
() => ({
|
|
2952
2981
|
row,
|
|
@@ -3091,7 +3120,7 @@ var BodyCell = (props) => {
|
|
|
3091
3120
|
() => (typeof cellClassName === "function" ? cellClassName(params) : cellClassName) || "",
|
|
3092
3121
|
[cellClassName, params]
|
|
3093
3122
|
);
|
|
3094
|
-
|
|
3123
|
+
useEffect5(() => {
|
|
3095
3124
|
setValue(row[field]);
|
|
3096
3125
|
}, [row, field]);
|
|
3097
3126
|
return /* @__PURE__ */ React22.createElement(
|
|
@@ -3161,10 +3190,10 @@ var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
|
|
|
3161
3190
|
});
|
|
3162
3191
|
|
|
3163
3192
|
// src/components/DataTable/hooks.ts
|
|
3164
|
-
import { useState as
|
|
3193
|
+
import { useState as useState9, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useMemo as useMemo9, useCallback as useCallback10, useEffect as useEffect6, createRef } from "react";
|
|
3165
3194
|
function useColumnWidths(columnsByField) {
|
|
3166
|
-
const [widths, setWidths] =
|
|
3167
|
-
const roRef =
|
|
3195
|
+
const [widths, setWidths] = useState9({});
|
|
3196
|
+
const roRef = useRef6();
|
|
3168
3197
|
useLayoutEffect2(() => {
|
|
3169
3198
|
if (roRef.current) roRef.current.disconnect();
|
|
3170
3199
|
roRef.current = new ResizeObserver((entries) => {
|
|
@@ -3219,14 +3248,14 @@ function useDataTableRenderer({
|
|
|
3219
3248
|
"You cannot use both `pinnedColumns` and `columnGroupingModel` at the same time. Please choose one of them."
|
|
3220
3249
|
);
|
|
3221
3250
|
}
|
|
3222
|
-
const onSelectionModelChangeRef =
|
|
3251
|
+
const onSelectionModelChangeRef = useRef6(onSelectionModelChange);
|
|
3223
3252
|
onSelectionModelChangeRef.current = onSelectionModelChange;
|
|
3224
|
-
const [focusedRowId, setFocusedRowId] =
|
|
3225
|
-
const [selectionAnchor, setSelectionAnchor] =
|
|
3253
|
+
const [focusedRowId, setFocusedRowId] = useState9(null);
|
|
3254
|
+
const [selectionAnchor, setSelectionAnchor] = useState9(null);
|
|
3226
3255
|
const [sortModel, setSortModel] = useControlledState(
|
|
3227
3256
|
controlledSortModel,
|
|
3228
3257
|
initialState?.sorting?.sortModel ?? [],
|
|
3229
|
-
|
|
3258
|
+
useCallback10((sortModel2) => onSortModelChange?.(sortModel2), [onSortModelChange])
|
|
3230
3259
|
);
|
|
3231
3260
|
const reorderedColumns = useMemo9(() => {
|
|
3232
3261
|
if (!columnGroupingModel) return columnsProp;
|
|
@@ -3246,7 +3275,7 @@ function useDataTableRenderer({
|
|
|
3246
3275
|
),
|
|
3247
3276
|
[reorderedColumns]
|
|
3248
3277
|
);
|
|
3249
|
-
const sortComparator =
|
|
3278
|
+
const sortComparator = useCallback10(
|
|
3250
3279
|
(rowA, rowB) => {
|
|
3251
3280
|
for (const sort of sortModel) {
|
|
3252
3281
|
const { field, sort: direction } = sort;
|
|
@@ -3282,9 +3311,9 @@ function useDataTableRenderer({
|
|
|
3282
3311
|
() => Array.from(new Set(_sortOrder || ["asc", "desc", null])),
|
|
3283
3312
|
[_sortOrder]
|
|
3284
3313
|
);
|
|
3285
|
-
const [page, setPage] =
|
|
3314
|
+
const [page, setPage] = useState9(paginationModel?.page || 1);
|
|
3286
3315
|
const pageSize = paginationModel?.pageSize || 20;
|
|
3287
|
-
const getId =
|
|
3316
|
+
const getId = useCallback10(
|
|
3288
3317
|
(row, index) => _getId?.(row) ?? row.id ?? `${(index || 0) + (page - 1) * pageSize}`,
|
|
3289
3318
|
[_getId, page, pageSize]
|
|
3290
3319
|
);
|
|
@@ -3300,7 +3329,7 @@ function useDataTableRenderer({
|
|
|
3300
3329
|
}),
|
|
3301
3330
|
[dataInPage, isRowSelectable, getId]
|
|
3302
3331
|
);
|
|
3303
|
-
const handleRangeSelection =
|
|
3332
|
+
const handleRangeSelection = useCallback10(
|
|
3304
3333
|
(anchor, targetIndex) => {
|
|
3305
3334
|
const startIndex = Math.min(anchor.rowIndex, targetIndex);
|
|
3306
3335
|
const endIndex = Math.max(anchor.rowIndex, targetIndex);
|
|
@@ -3337,7 +3366,7 @@ function useDataTableRenderer({
|
|
|
3337
3366
|
[_isTotalSelected, selectionModel, selectableRowCount]
|
|
3338
3367
|
);
|
|
3339
3368
|
const columnWidths = useColumnWidths(columnsByField);
|
|
3340
|
-
const getWidth =
|
|
3369
|
+
const getWidth = useCallback10(
|
|
3341
3370
|
(f) => columnWidths[f] ?? columnsByField[f].width ?? // Column prop 으로 지정된 width
|
|
3342
3371
|
columnsByField[f].minWidth ?? 0,
|
|
3343
3372
|
[columnWidths, columnsByField]
|
|
@@ -3379,14 +3408,14 @@ function useDataTableRenderer({
|
|
|
3379
3408
|
sortOrder,
|
|
3380
3409
|
getWidth
|
|
3381
3410
|
]);
|
|
3382
|
-
const handlePageChange =
|
|
3411
|
+
const handlePageChange = useCallback10(
|
|
3383
3412
|
(newPage) => {
|
|
3384
3413
|
setPage(newPage);
|
|
3385
3414
|
onPaginationModelChange?.({ page: newPage, pageSize });
|
|
3386
3415
|
},
|
|
3387
3416
|
[onPaginationModelChange, pageSize]
|
|
3388
3417
|
);
|
|
3389
|
-
const handleSortChange =
|
|
3418
|
+
const handleSortChange = useCallback10(
|
|
3390
3419
|
(props) => {
|
|
3391
3420
|
const { field, currentSort, multiple } = props;
|
|
3392
3421
|
const column = columnsByField[field];
|
|
@@ -3409,23 +3438,23 @@ function useDataTableRenderer({
|
|
|
3409
3438
|
},
|
|
3410
3439
|
[sortOrder, columnsByField, sortModel, setSortModel]
|
|
3411
3440
|
);
|
|
3412
|
-
|
|
3441
|
+
useEffect6(() => {
|
|
3413
3442
|
if (!paginationModel) {
|
|
3414
3443
|
handlePageChange(1);
|
|
3415
3444
|
}
|
|
3416
3445
|
}, [rowCount, handlePageChange, paginationModel]);
|
|
3417
|
-
|
|
3446
|
+
useEffect6(() => {
|
|
3418
3447
|
const lastPage = Math.max(1, Math.ceil(rowCount / pageSize));
|
|
3419
3448
|
if (page > lastPage) {
|
|
3420
3449
|
handlePageChange(lastPage);
|
|
3421
3450
|
}
|
|
3422
3451
|
}, [page, rowCount, pageSize, handlePageChange]);
|
|
3423
|
-
|
|
3452
|
+
useEffect6(() => {
|
|
3424
3453
|
onSelectionModelChangeRef.current?.([]);
|
|
3425
3454
|
setSelectionAnchor(null);
|
|
3426
3455
|
}, [page]);
|
|
3427
|
-
const prevRowsRef =
|
|
3428
|
-
|
|
3456
|
+
const prevRowsRef = useRef6(_rows);
|
|
3457
|
+
useEffect6(() => {
|
|
3429
3458
|
if (prevRowsRef.current !== _rows) {
|
|
3430
3459
|
setSelectionAnchor(null);
|
|
3431
3460
|
prevRowsRef.current = _rows;
|
|
@@ -3444,8 +3473,8 @@ function useDataTableRenderer({
|
|
|
3444
3473
|
handleSortChange,
|
|
3445
3474
|
isAllSelected,
|
|
3446
3475
|
isTotalSelected,
|
|
3447
|
-
isSelectedRow:
|
|
3448
|
-
isRowSelectable:
|
|
3476
|
+
isSelectedRow: useCallback10((model) => selectedModelSet.has(model), [selectedModelSet]),
|
|
3477
|
+
isRowSelectable: useCallback10(
|
|
3449
3478
|
(rowId, row) => {
|
|
3450
3479
|
if (!isRowSelectable) return true;
|
|
3451
3480
|
return isRowSelectable({ row, id: rowId });
|
|
@@ -3453,13 +3482,13 @@ function useDataTableRenderer({
|
|
|
3453
3482
|
[isRowSelectable]
|
|
3454
3483
|
),
|
|
3455
3484
|
focusedRowId,
|
|
3456
|
-
onRowFocus:
|
|
3485
|
+
onRowFocus: useCallback10((rowId) => {
|
|
3457
3486
|
setFocusedRowId(rowId);
|
|
3458
3487
|
}, []),
|
|
3459
|
-
onAllCheckboxChange:
|
|
3488
|
+
onAllCheckboxChange: useCallback10(() => {
|
|
3460
3489
|
onSelectionModelChange?.(isAllSelected ? [] : selectableDataInPage.map(getId));
|
|
3461
3490
|
}, [isAllSelected, selectableDataInPage, onSelectionModelChange, getId]),
|
|
3462
|
-
onCheckboxChange:
|
|
3491
|
+
onCheckboxChange: useCallback10(
|
|
3463
3492
|
(event, selectedModel) => {
|
|
3464
3493
|
const isShiftClick = "shiftKey" in event && event.shiftKey;
|
|
3465
3494
|
const rowIndex = dataInPage.findIndex((row, i) => getId(row, i) === selectedModel);
|
|
@@ -3492,7 +3521,7 @@ function useDataTableRenderer({
|
|
|
3492
3521
|
),
|
|
3493
3522
|
columns,
|
|
3494
3523
|
processedColumnGroups,
|
|
3495
|
-
onTotalSelect:
|
|
3524
|
+
onTotalSelect: useCallback10(() => {
|
|
3496
3525
|
const selectableRows = rows.filter((row, i) => {
|
|
3497
3526
|
if (!isRowSelectable) return true;
|
|
3498
3527
|
return isRowSelectable({ row, id: getId(row, i) });
|
|
@@ -3577,7 +3606,7 @@ function TableBody(props) {
|
|
|
3577
3606
|
TableBody.displayName = "TableBody";
|
|
3578
3607
|
|
|
3579
3608
|
// src/components/Pagination/Pagination.tsx
|
|
3580
|
-
import React24, { useCallback as
|
|
3609
|
+
import React24, { useCallback as useCallback11, useEffect as useEffect7 } from "react";
|
|
3581
3610
|
import PreviousIcon from "@mui/icons-material/ChevronLeftRounded";
|
|
3582
3611
|
import NextIcon from "@mui/icons-material/ChevronRightRounded";
|
|
3583
3612
|
import FirstPageIcon from "@mui/icons-material/FirstPageRounded";
|
|
@@ -3646,7 +3675,7 @@ function Pagination(props) {
|
|
|
3646
3675
|
const [paginationModel, setPaginationModel] = useControlledState(
|
|
3647
3676
|
_paginationModel,
|
|
3648
3677
|
defaultPaginationModel,
|
|
3649
|
-
|
|
3678
|
+
useCallback11(
|
|
3650
3679
|
(newPage) => {
|
|
3651
3680
|
onPageChange(newPage.page);
|
|
3652
3681
|
},
|
|
@@ -3662,7 +3691,7 @@ function Pagination(props) {
|
|
|
3662
3691
|
const afterPages = [paginationModel.page + 1, paginationModel.page + 2].filter((p) => p <= lastPage - 1);
|
|
3663
3692
|
const isMoreAfterPages = lastPage > 1 && paginationModel.page < lastPage - 3;
|
|
3664
3693
|
const isMoreBeforePages = lastPage > 1 && paginationModel.page > 4;
|
|
3665
|
-
|
|
3694
|
+
useEffect7(() => {
|
|
3666
3695
|
if (paginationModel.page > lastPage) {
|
|
3667
3696
|
setPaginationModel({ ...paginationModel, page: lastPage });
|
|
3668
3697
|
}
|
|
@@ -3845,8 +3874,8 @@ function Component(props, apiRef) {
|
|
|
3845
3874
|
...innerProps
|
|
3846
3875
|
} = props;
|
|
3847
3876
|
const tableId = useId();
|
|
3848
|
-
const parentRef =
|
|
3849
|
-
const tableBodyRef =
|
|
3877
|
+
const parentRef = useRef7(null);
|
|
3878
|
+
const tableBodyRef = useRef7(null);
|
|
3850
3879
|
const {
|
|
3851
3880
|
columns,
|
|
3852
3881
|
processedColumnGroups,
|
|
@@ -3883,20 +3912,20 @@ function Component(props, apiRef) {
|
|
|
3883
3912
|
const paginationModel = useMemo10(() => ({ page, pageSize }), [page, pageSize]);
|
|
3884
3913
|
const totalSize = virtualizer.getTotalSize();
|
|
3885
3914
|
const virtualizedItems = virtualizer.getVirtualItems();
|
|
3886
|
-
const getRowClickHandler =
|
|
3915
|
+
const getRowClickHandler = useCallback12(
|
|
3887
3916
|
(row, rowId) => (e) => {
|
|
3888
3917
|
onRowClick?.({ row, rowId }, e);
|
|
3889
3918
|
checkboxSelection && !disableSelectionOnClick && isRowSelectableCheck(rowId, row) && onCheckboxChange(e, rowId);
|
|
3890
3919
|
},
|
|
3891
3920
|
[onRowClick, checkboxSelection, disableSelectionOnClick, onCheckboxChange, isRowSelectableCheck]
|
|
3892
3921
|
);
|
|
3893
|
-
const getRowFocusHandler =
|
|
3922
|
+
const getRowFocusHandler = useCallback12(
|
|
3894
3923
|
(rowId) => () => {
|
|
3895
3924
|
onRowFocus(rowId);
|
|
3896
3925
|
},
|
|
3897
3926
|
[onRowFocus]
|
|
3898
3927
|
);
|
|
3899
|
-
const getCheckboxClickHandler =
|
|
3928
|
+
const getCheckboxClickHandler = useCallback12(
|
|
3900
3929
|
(rowId, row) => (e) => {
|
|
3901
3930
|
e.stopPropagation();
|
|
3902
3931
|
if (isRowSelectableCheck(rowId, row)) {
|
|
@@ -3906,7 +3935,7 @@ function Component(props, apiRef) {
|
|
|
3906
3935
|
},
|
|
3907
3936
|
[onCheckboxChange, isRowSelectableCheck, onRowFocus]
|
|
3908
3937
|
);
|
|
3909
|
-
const handleTableKeyDown =
|
|
3938
|
+
const handleTableKeyDown = useCallback12(
|
|
3910
3939
|
(e) => {
|
|
3911
3940
|
const supportedKeys = ["ArrowUp", "ArrowDown", " ", "Home", "End", "PageUp", "PageDown"];
|
|
3912
3941
|
if (!supportedKeys.includes(e.key)) return;
|
|
@@ -4248,7 +4277,7 @@ var DataTable = forwardRef7(Component);
|
|
|
4248
4277
|
DataTable.displayName = "DataTable";
|
|
4249
4278
|
|
|
4250
4279
|
// src/components/DateRangePicker/DateRangePicker.tsx
|
|
4251
|
-
import React26, { forwardRef as forwardRef8, useCallback as
|
|
4280
|
+
import React26, { forwardRef as forwardRef8, useCallback as useCallback13, useEffect as useEffect8, useImperativeHandle as useImperativeHandle3, useMemo as useMemo11, useRef as useRef8, useState as useState10 } from "react";
|
|
4252
4281
|
import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
|
|
4253
4282
|
import CalendarTodayIcon2 from "@mui/icons-material/CalendarToday";
|
|
4254
4283
|
import { styled as styled14, useThemeProps as useThemeProps5 } from "@mui/joy";
|
|
@@ -4409,23 +4438,23 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4409
4438
|
readOnly,
|
|
4410
4439
|
...innerProps
|
|
4411
4440
|
} = props;
|
|
4412
|
-
const innerRef =
|
|
4413
|
-
const buttonRef =
|
|
4441
|
+
const innerRef = useRef8(null);
|
|
4442
|
+
const buttonRef = useRef8(null);
|
|
4414
4443
|
const [value, setValue] = useControlledState(
|
|
4415
4444
|
props.value,
|
|
4416
4445
|
props.defaultValue || "",
|
|
4417
|
-
|
|
4446
|
+
useCallback13((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
4418
4447
|
);
|
|
4419
|
-
const [displayValue, setDisplayValue] =
|
|
4448
|
+
const [displayValue, setDisplayValue] = useState10(
|
|
4420
4449
|
() => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
|
|
4421
4450
|
);
|
|
4422
|
-
const [anchorEl, setAnchorEl] =
|
|
4451
|
+
const [anchorEl, setAnchorEl] = useState10(null);
|
|
4423
4452
|
const open = Boolean(anchorEl);
|
|
4424
4453
|
const calendarValue = useMemo11(
|
|
4425
4454
|
() => value ? parseDates(value, format) : void 0,
|
|
4426
4455
|
[value, format]
|
|
4427
4456
|
);
|
|
4428
|
-
|
|
4457
|
+
useEffect8(() => {
|
|
4429
4458
|
if (value) {
|
|
4430
4459
|
try {
|
|
4431
4460
|
const dates = parseDates(value, format);
|
|
@@ -4437,13 +4466,13 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4437
4466
|
setDisplayValue("");
|
|
4438
4467
|
}
|
|
4439
4468
|
}, [displayFormat, value, format]);
|
|
4440
|
-
|
|
4469
|
+
useEffect8(() => {
|
|
4441
4470
|
if (!anchorEl) {
|
|
4442
4471
|
innerRef.current?.blur();
|
|
4443
4472
|
}
|
|
4444
4473
|
}, [anchorEl, innerRef]);
|
|
4445
4474
|
useImperativeHandle3(ref, () => innerRef.current, [innerRef]);
|
|
4446
|
-
const handleChange =
|
|
4475
|
+
const handleChange = useCallback13(
|
|
4447
4476
|
(event) => {
|
|
4448
4477
|
const value2 = event.target.value;
|
|
4449
4478
|
setDisplayValue(value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2);
|
|
@@ -4451,7 +4480,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4451
4480
|
},
|
|
4452
4481
|
[displayFormat, format, setValue]
|
|
4453
4482
|
);
|
|
4454
|
-
const handleDisplayInputChange =
|
|
4483
|
+
const handleDisplayInputChange = useCallback13(
|
|
4455
4484
|
(event) => {
|
|
4456
4485
|
if (event.target.value === "") {
|
|
4457
4486
|
handleChange({
|
|
@@ -4476,14 +4505,14 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4476
4505
|
},
|
|
4477
4506
|
[displayFormat, format, handleChange, props.name]
|
|
4478
4507
|
);
|
|
4479
|
-
const handleCalendarToggle =
|
|
4508
|
+
const handleCalendarToggle = useCallback13(
|
|
4480
4509
|
(event) => {
|
|
4481
4510
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
4482
4511
|
innerRef.current?.focus();
|
|
4483
4512
|
},
|
|
4484
4513
|
[anchorEl, setAnchorEl, innerRef]
|
|
4485
4514
|
);
|
|
4486
|
-
const handleCalendarChange =
|
|
4515
|
+
const handleCalendarChange = useCallback13(
|
|
4487
4516
|
([date1, date2]) => {
|
|
4488
4517
|
if (!date1 || !date2) return;
|
|
4489
4518
|
const formattedValue = formatValueString2([date1, date2], format);
|
|
@@ -4497,7 +4526,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4497
4526
|
},
|
|
4498
4527
|
[props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat]
|
|
4499
4528
|
);
|
|
4500
|
-
const handleInputMouseDown =
|
|
4529
|
+
const handleInputMouseDown = useCallback13(
|
|
4501
4530
|
(event) => {
|
|
4502
4531
|
if (inputReadOnly) {
|
|
4503
4532
|
event.preventDefault();
|
|
@@ -4729,13 +4758,13 @@ var InsetDrawer = styled20(JoyDrawer2)(({ theme }) => ({
|
|
|
4729
4758
|
}));
|
|
4730
4759
|
|
|
4731
4760
|
// src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
|
|
4732
|
-
import React31, { useCallback as
|
|
4761
|
+
import React31, { useCallback as useCallback14, useEffect as useEffect9, useMemo as useMemo12, useRef as useRef9, useState as useState11 } from "react";
|
|
4733
4762
|
import SearchIcon from "@mui/icons-material/Search";
|
|
4734
4763
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
4735
4764
|
function LabelWithTooltip(props) {
|
|
4736
4765
|
const { label, size } = props;
|
|
4737
|
-
const labelContentRef =
|
|
4738
|
-
const [isOverflowing, setIsOverflowing] =
|
|
4766
|
+
const labelContentRef = useRef9(null);
|
|
4767
|
+
const [isOverflowing, setIsOverflowing] = useState11(false);
|
|
4739
4768
|
const labelContent = /* @__PURE__ */ React31.createElement(
|
|
4740
4769
|
"span",
|
|
4741
4770
|
{
|
|
@@ -4752,7 +4781,7 @@ function LabelWithTooltip(props) {
|
|
|
4752
4781
|
},
|
|
4753
4782
|
label
|
|
4754
4783
|
);
|
|
4755
|
-
|
|
4784
|
+
useEffect9(() => {
|
|
4756
4785
|
const element = labelContentRef.current;
|
|
4757
4786
|
if (element) {
|
|
4758
4787
|
setIsOverflowing(element.scrollWidth > element.clientWidth);
|
|
@@ -4776,16 +4805,16 @@ function FilterableCheckboxGroup(props) {
|
|
|
4776
4805
|
maxHeight = 300,
|
|
4777
4806
|
disabled
|
|
4778
4807
|
} = props;
|
|
4779
|
-
const [searchTerm, setSearchTerm] =
|
|
4780
|
-
const [sortedOptions, setSortedOptions] =
|
|
4808
|
+
const [searchTerm, setSearchTerm] = useState11("");
|
|
4809
|
+
const [sortedOptions, setSortedOptions] = useState11(options);
|
|
4781
4810
|
const [internalValue, setInternalValue] = useControlledState(
|
|
4782
4811
|
value,
|
|
4783
4812
|
value ?? [],
|
|
4784
|
-
|
|
4813
|
+
useCallback14((newValue) => onChange?.(newValue), [onChange])
|
|
4785
4814
|
);
|
|
4786
|
-
const parentRef =
|
|
4787
|
-
const isInitialSortRef =
|
|
4788
|
-
const prevOptionsRef =
|
|
4815
|
+
const parentRef = useRef9(null);
|
|
4816
|
+
const isInitialSortRef = useRef9(false);
|
|
4817
|
+
const prevOptionsRef = useRef9([...options]);
|
|
4789
4818
|
const filteredOptions = useMemo12(() => {
|
|
4790
4819
|
if (!searchTerm) return sortedOptions;
|
|
4791
4820
|
return sortedOptions.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
@@ -4808,7 +4837,7 @@ function FilterableCheckboxGroup(props) {
|
|
|
4808
4837
|
overscan: 5
|
|
4809
4838
|
});
|
|
4810
4839
|
const items = virtualizer.getVirtualItems();
|
|
4811
|
-
|
|
4840
|
+
useEffect9(() => {
|
|
4812
4841
|
const optionsChanged = prevOptionsRef.current.length !== options.length || prevOptionsRef.current.some(
|
|
4813
4842
|
(prevOption, index) => prevOption.value !== options[index]?.value || prevOption.label !== options[index]?.label || prevOption.disabled !== options[index]?.disabled
|
|
4814
4843
|
);
|
|
@@ -4834,13 +4863,13 @@ function FilterableCheckboxGroup(props) {
|
|
|
4834
4863
|
}
|
|
4835
4864
|
}
|
|
4836
4865
|
}, [options, value]);
|
|
4837
|
-
|
|
4866
|
+
useEffect9(() => {
|
|
4838
4867
|
virtualizer.measure();
|
|
4839
4868
|
}, [virtualizer, filteredOptions, size]);
|
|
4840
|
-
const handleSearchChange =
|
|
4869
|
+
const handleSearchChange = useCallback14((event) => {
|
|
4841
4870
|
setSearchTerm(event.target.value);
|
|
4842
4871
|
}, []);
|
|
4843
|
-
const handleCheckboxChange =
|
|
4872
|
+
const handleCheckboxChange = useCallback14(
|
|
4844
4873
|
(optionValue) => (event) => {
|
|
4845
4874
|
const checked = event.target.checked;
|
|
4846
4875
|
const newValue = checked ? [...internalValue, optionValue] : internalValue.filter((v) => v !== optionValue);
|
|
@@ -4848,7 +4877,7 @@ function FilterableCheckboxGroup(props) {
|
|
|
4848
4877
|
},
|
|
4849
4878
|
[internalValue, setInternalValue]
|
|
4850
4879
|
);
|
|
4851
|
-
const handleSelectAll =
|
|
4880
|
+
const handleSelectAll = useCallback14(
|
|
4852
4881
|
(event) => {
|
|
4853
4882
|
const checked = event.target.checked;
|
|
4854
4883
|
const enabledOptions = filteredOptions.filter((option) => !option.disabled);
|
|
@@ -5005,16 +5034,16 @@ function IconMenuButton(props) {
|
|
|
5005
5034
|
IconMenuButton.displayName = "IconMenuButton";
|
|
5006
5035
|
|
|
5007
5036
|
// src/components/Markdown/Markdown.tsx
|
|
5008
|
-
import React33, { lazy, Suspense, useEffect as
|
|
5037
|
+
import React33, { lazy, Suspense, useEffect as useEffect10, useState as useState12 } from "react";
|
|
5009
5038
|
import { Skeleton } from "@mui/joy";
|
|
5010
5039
|
import { Link as Link2 } from "@mui/joy";
|
|
5011
5040
|
import remarkGfm from "remark-gfm";
|
|
5012
5041
|
var LazyReactMarkdown = lazy(() => import("react-markdown"));
|
|
5013
5042
|
var Markdown = (props) => {
|
|
5014
|
-
const [
|
|
5015
|
-
|
|
5043
|
+
const [rehypeAccent, setRehypeAccent] = useState12(null);
|
|
5044
|
+
useEffect10(() => {
|
|
5016
5045
|
const loadRehypeAccent = async () => {
|
|
5017
|
-
const module = await
|
|
5046
|
+
const module = await import("./chunks/rehype-accent-FZRUD7VI.js");
|
|
5018
5047
|
setRehypeAccent(() => module.rehypeAccent);
|
|
5019
5048
|
};
|
|
5020
5049
|
loadRehypeAccent();
|
|
@@ -5031,7 +5060,7 @@ var Markdown = (props) => {
|
|
|
5031
5060
|
fallback,
|
|
5032
5061
|
...innerProps
|
|
5033
5062
|
} = props;
|
|
5034
|
-
if (!
|
|
5063
|
+
if (!rehypeAccent) {
|
|
5035
5064
|
return null;
|
|
5036
5065
|
}
|
|
5037
5066
|
return /* @__PURE__ */ React33.createElement(Typography, { component: "div", color, textColor, level: defaultLevel, ...innerProps }, /* @__PURE__ */ React33.createElement(
|
|
@@ -5044,7 +5073,7 @@ var Markdown = (props) => {
|
|
|
5044
5073
|
{
|
|
5045
5074
|
...markdownOptions,
|
|
5046
5075
|
children: content,
|
|
5047
|
-
rehypePlugins: [[
|
|
5076
|
+
rehypePlugins: [[rehypeAccent, { accentColor }]],
|
|
5048
5077
|
remarkPlugins: [remarkGfm],
|
|
5049
5078
|
components: {
|
|
5050
5079
|
a: ({ children, href }) => /* @__PURE__ */ React33.createElement(Link2, { href, target: defaultLinkAction }, children),
|
|
@@ -5186,7 +5215,7 @@ function MenuButton(props) {
|
|
|
5186
5215
|
MenuButton.displayName = "MenuButton";
|
|
5187
5216
|
|
|
5188
5217
|
// src/components/MonthPicker/MonthPicker.tsx
|
|
5189
|
-
import React35, { forwardRef as forwardRef9, useCallback as
|
|
5218
|
+
import React35, { forwardRef as forwardRef9, useCallback as useCallback15, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useRef as useRef10, useState as useState13 } from "react";
|
|
5190
5219
|
import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
|
|
5191
5220
|
import { styled as styled21, useThemeProps as useThemeProps6 } from "@mui/joy";
|
|
5192
5221
|
import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
|
|
@@ -5268,14 +5297,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5268
5297
|
locale,
|
|
5269
5298
|
...innerProps
|
|
5270
5299
|
} = props;
|
|
5271
|
-
const innerRef =
|
|
5272
|
-
const buttonRef =
|
|
5300
|
+
const innerRef = useRef10(null);
|
|
5301
|
+
const buttonRef = useRef10(null);
|
|
5273
5302
|
const [value, setValue, isControlled] = useControlledState(
|
|
5274
5303
|
props.value,
|
|
5275
5304
|
props.defaultValue || "",
|
|
5276
|
-
|
|
5305
|
+
useCallback15((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
5277
5306
|
);
|
|
5278
|
-
const getFormattedDisplayValue =
|
|
5307
|
+
const getFormattedDisplayValue = useCallback15(
|
|
5279
5308
|
(inputValue) => {
|
|
5280
5309
|
if (!inputValue) return "";
|
|
5281
5310
|
try {
|
|
@@ -5286,19 +5315,19 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5286
5315
|
},
|
|
5287
5316
|
[format, displayFormat, locale]
|
|
5288
5317
|
);
|
|
5289
|
-
const [displayValue, setDisplayValue] =
|
|
5290
|
-
const [anchorEl, setAnchorEl] =
|
|
5318
|
+
const [displayValue, setDisplayValue] = useState13(() => getFormattedDisplayValue(value));
|
|
5319
|
+
const [anchorEl, setAnchorEl] = useState13(null);
|
|
5291
5320
|
const open = Boolean(anchorEl);
|
|
5292
|
-
|
|
5321
|
+
useEffect11(() => {
|
|
5293
5322
|
if (!anchorEl) {
|
|
5294
5323
|
innerRef.current?.blur();
|
|
5295
5324
|
}
|
|
5296
5325
|
}, [anchorEl, innerRef]);
|
|
5297
5326
|
useImperativeHandle4(ref, () => innerRef.current, [innerRef]);
|
|
5298
|
-
|
|
5327
|
+
useEffect11(() => {
|
|
5299
5328
|
setDisplayValue(getFormattedDisplayValue(value));
|
|
5300
5329
|
}, [value, getFormattedDisplayValue]);
|
|
5301
|
-
const handleChange =
|
|
5330
|
+
const handleChange = useCallback15(
|
|
5302
5331
|
(event) => {
|
|
5303
5332
|
const newValue = event.target.value;
|
|
5304
5333
|
setValue(newValue);
|
|
@@ -5308,14 +5337,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5308
5337
|
},
|
|
5309
5338
|
[setValue, getFormattedDisplayValue, isControlled]
|
|
5310
5339
|
);
|
|
5311
|
-
const handleCalendarToggle =
|
|
5340
|
+
const handleCalendarToggle = useCallback15(
|
|
5312
5341
|
(event) => {
|
|
5313
5342
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
5314
5343
|
innerRef.current?.focus();
|
|
5315
5344
|
},
|
|
5316
5345
|
[anchorEl, setAnchorEl, innerRef]
|
|
5317
5346
|
);
|
|
5318
|
-
const handleInputMouseDown =
|
|
5347
|
+
const handleInputMouseDown = useCallback15(
|
|
5319
5348
|
(event) => {
|
|
5320
5349
|
event.preventDefault();
|
|
5321
5350
|
buttonRef.current?.focus();
|
|
@@ -5439,7 +5468,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5439
5468
|
});
|
|
5440
5469
|
|
|
5441
5470
|
// src/components/MonthRangePicker/MonthRangePicker.tsx
|
|
5442
|
-
import React36, { forwardRef as forwardRef10, useCallback as
|
|
5471
|
+
import React36, { forwardRef as forwardRef10, useCallback as useCallback16, useEffect as useEffect12, useImperativeHandle as useImperativeHandle5, useMemo as useMemo13, useRef as useRef11, useState as useState14 } from "react";
|
|
5443
5472
|
import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
|
|
5444
5473
|
import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
|
|
5445
5474
|
import { styled as styled22, useThemeProps as useThemeProps7 } from "@mui/joy";
|
|
@@ -5547,35 +5576,35 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
|
5547
5576
|
size,
|
|
5548
5577
|
...innerProps
|
|
5549
5578
|
} = props;
|
|
5550
|
-
const innerRef =
|
|
5579
|
+
const innerRef = useRef11(null);
|
|
5551
5580
|
const [value, setValue] = useControlledState(
|
|
5552
5581
|
props.value,
|
|
5553
5582
|
props.defaultValue || "",
|
|
5554
|
-
|
|
5583
|
+
useCallback16((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
5555
5584
|
);
|
|
5556
|
-
const [anchorEl, setAnchorEl] =
|
|
5585
|
+
const [anchorEl, setAnchorEl] = useState14(null);
|
|
5557
5586
|
const open = Boolean(anchorEl);
|
|
5558
5587
|
const calendarValue = useMemo13(() => value ? parseDates2(value) : void 0, [value]);
|
|
5559
|
-
|
|
5588
|
+
useEffect12(() => {
|
|
5560
5589
|
if (!anchorEl) {
|
|
5561
5590
|
innerRef.current?.blur();
|
|
5562
5591
|
}
|
|
5563
5592
|
}, [anchorEl, innerRef]);
|
|
5564
5593
|
useImperativeHandle5(ref, () => innerRef.current, [innerRef]);
|
|
5565
|
-
const handleChange =
|
|
5594
|
+
const handleChange = useCallback16(
|
|
5566
5595
|
(event) => {
|
|
5567
5596
|
setValue(event.target.value);
|
|
5568
5597
|
},
|
|
5569
5598
|
[setValue]
|
|
5570
5599
|
);
|
|
5571
|
-
const handleCalendarToggle =
|
|
5600
|
+
const handleCalendarToggle = useCallback16(
|
|
5572
5601
|
(event) => {
|
|
5573
5602
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
5574
5603
|
innerRef.current?.focus();
|
|
5575
5604
|
},
|
|
5576
5605
|
[anchorEl, setAnchorEl, innerRef]
|
|
5577
5606
|
);
|
|
5578
|
-
const handleCalendarChange =
|
|
5607
|
+
const handleCalendarChange = useCallback16(
|
|
5579
5608
|
([date1, date2]) => {
|
|
5580
5609
|
if (!date1 || !date2) return;
|
|
5581
5610
|
setValue(formatValueString4([date1, date2], format));
|
|
@@ -5802,7 +5831,7 @@ function Navigator(props) {
|
|
|
5802
5831
|
Navigator.displayName = "Navigator";
|
|
5803
5832
|
|
|
5804
5833
|
// src/components/PercentageInput/PercentageInput.tsx
|
|
5805
|
-
import React40, { useCallback as
|
|
5834
|
+
import React40, { useCallback as useCallback17, useMemo as useMemo14, useState as useState15 } from "react";
|
|
5806
5835
|
import { NumericFormat as NumericFormat2 } from "react-number-format";
|
|
5807
5836
|
import { styled as styled25, useThemeProps as useThemeProps8 } from "@mui/joy";
|
|
5808
5837
|
var padDecimal = (value, decimalScale) => {
|
|
@@ -5859,9 +5888,9 @@ var PercentageInput = React40.forwardRef(
|
|
|
5859
5888
|
const [_value, setValue] = useControlledState(
|
|
5860
5889
|
props.value,
|
|
5861
5890
|
props.defaultValue,
|
|
5862
|
-
|
|
5891
|
+
useCallback17((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
|
|
5863
5892
|
);
|
|
5864
|
-
const [internalError, setInternalError] =
|
|
5893
|
+
const [internalError, setInternalError] = useState15(
|
|
5865
5894
|
max && _value && _value > max || min && _value && _value < min
|
|
5866
5895
|
);
|
|
5867
5896
|
const value = useMemo14(() => {
|
|
@@ -5870,7 +5899,7 @@ var PercentageInput = React40.forwardRef(
|
|
|
5870
5899
|
}
|
|
5871
5900
|
return _value;
|
|
5872
5901
|
}, [_value, useMinorUnit, maxDecimalScale]);
|
|
5873
|
-
const handleChange =
|
|
5902
|
+
const handleChange = useCallback17(
|
|
5874
5903
|
(event) => {
|
|
5875
5904
|
if (event.target.value === "") {
|
|
5876
5905
|
setValue(void 0);
|
|
@@ -6534,7 +6563,7 @@ function ThemeProvider(props) {
|
|
|
6534
6563
|
ThemeProvider.displayName = "ThemeProvider";
|
|
6535
6564
|
|
|
6536
6565
|
// src/components/Uploader/Uploader.tsx
|
|
6537
|
-
import React47, { useCallback as
|
|
6566
|
+
import React47, { useCallback as useCallback18, useEffect as useEffect13, useMemo as useMemo15, useRef as useRef12, useState as useState16 } from "react";
|
|
6538
6567
|
import { styled as styled30, Input as Input2 } from "@mui/joy";
|
|
6539
6568
|
import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
|
|
6540
6569
|
import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
|
|
@@ -6683,12 +6712,12 @@ var Uploader = React47.memo(
|
|
|
6683
6712
|
error: errorProp,
|
|
6684
6713
|
helperText: helperTextProp
|
|
6685
6714
|
} = props;
|
|
6686
|
-
const dropZoneRef =
|
|
6687
|
-
const inputRef =
|
|
6688
|
-
const [errorText, setErrorText] =
|
|
6689
|
-
const [files, setFiles] =
|
|
6690
|
-
const [uploaded, setUploaded] =
|
|
6691
|
-
const [previewState, setPreviewState] =
|
|
6715
|
+
const dropZoneRef = useRef12(null);
|
|
6716
|
+
const inputRef = useRef12(null);
|
|
6717
|
+
const [errorText, setErrorText] = useState16();
|
|
6718
|
+
const [files, setFiles] = useState16([]);
|
|
6719
|
+
const [uploaded, setUploaded] = useState16(props.uploaded || []);
|
|
6720
|
+
const [previewState, setPreviewState] = useState16("idle");
|
|
6692
6721
|
const accepts = useMemo15(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
|
|
6693
6722
|
const parsedAccepts = useMemo15(
|
|
6694
6723
|
() => accepts.flatMap((type) => {
|
|
@@ -6734,7 +6763,7 @@ var Uploader = React47.memo(
|
|
|
6734
6763
|
() => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
|
|
6735
6764
|
[files, maxCount, uploaded]
|
|
6736
6765
|
);
|
|
6737
|
-
const addFiles =
|
|
6766
|
+
const addFiles = useCallback18(
|
|
6738
6767
|
(uploads) => {
|
|
6739
6768
|
try {
|
|
6740
6769
|
const types = parsedAccepts.map((type) => type.replace(".", "")) || [];
|
|
@@ -6779,7 +6808,7 @@ var Uploader = React47.memo(
|
|
|
6779
6808
|
},
|
|
6780
6809
|
[files, uploaded, maxCount, parsedAccepts, maxFileSize, maxFileTotalSize, name, onChange]
|
|
6781
6810
|
);
|
|
6782
|
-
|
|
6811
|
+
useEffect13(() => {
|
|
6783
6812
|
if (!dropZoneRef.current || disabled) {
|
|
6784
6813
|
return;
|
|
6785
6814
|
}
|
|
@@ -6817,7 +6846,7 @@ var Uploader = React47.memo(
|
|
|
6817
6846
|
);
|
|
6818
6847
|
return () => cleanup?.();
|
|
6819
6848
|
}, [disabled, addFiles]);
|
|
6820
|
-
|
|
6849
|
+
useEffect13(() => {
|
|
6821
6850
|
if (inputRef.current && minCount) {
|
|
6822
6851
|
if (files.length < minCount) {
|
|
6823
6852
|
inputRef.current.setCustomValidity(`At least ${minCount} files are required.`);
|
|
@@ -6826,14 +6855,14 @@ var Uploader = React47.memo(
|
|
|
6826
6855
|
}
|
|
6827
6856
|
}
|
|
6828
6857
|
}, [inputRef, files, minCount]);
|
|
6829
|
-
const handleFileChanged =
|
|
6858
|
+
const handleFileChanged = useCallback18(
|
|
6830
6859
|
(event) => {
|
|
6831
6860
|
const files2 = Array.from(event.target.files || []);
|
|
6832
6861
|
addFiles(files2);
|
|
6833
6862
|
},
|
|
6834
6863
|
[addFiles]
|
|
6835
6864
|
);
|
|
6836
|
-
const handleDeleteFile =
|
|
6865
|
+
const handleDeleteFile = useCallback18(
|
|
6837
6866
|
(deletedFile) => {
|
|
6838
6867
|
if (deletedFile instanceof File) {
|
|
6839
6868
|
setFiles((current) => {
|
|
@@ -6853,7 +6882,7 @@ var Uploader = React47.memo(
|
|
|
6853
6882
|
},
|
|
6854
6883
|
[name, onChange, onDelete]
|
|
6855
6884
|
);
|
|
6856
|
-
const handleUploaderButtonClick =
|
|
6885
|
+
const handleUploaderButtonClick = useCallback18(() => {
|
|
6857
6886
|
inputRef.current?.click();
|
|
6858
6887
|
}, []);
|
|
6859
6888
|
const uploader = /* @__PURE__ */ React47.createElement(
|