@ceed/ads 1.23.5 → 1.24.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 +10 -10
- package/dist/index.browser.js.map +4 -4
- package/dist/index.cjs +266 -181
- package/dist/index.js +344 -315
- package/framer/index.js +1 -166
- 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,
|
|
@@ -749,11 +693,24 @@ Button.displayName = "Button";
|
|
|
749
693
|
var Button_default = Button;
|
|
750
694
|
|
|
751
695
|
// src/components/Calendar/Calendar.tsx
|
|
752
|
-
import
|
|
696
|
+
import React12, { Fragment, forwardRef as forwardRef4, useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState4 } from "react";
|
|
753
697
|
import { styled as styled5 } from "@mui/joy";
|
|
754
698
|
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
|
|
755
699
|
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
|
756
|
-
import { AnimatePresence, motion as
|
|
700
|
+
import { AnimatePresence, motion as motion13 } from "framer-motion";
|
|
701
|
+
|
|
702
|
+
// src/components/Tooltip/Tooltip.tsx
|
|
703
|
+
import React10 from "react";
|
|
704
|
+
import { Tooltip as JoyTooltip } from "@mui/joy";
|
|
705
|
+
import { motion as motion12 } from "framer-motion";
|
|
706
|
+
var MotionTooltip = motion12(JoyTooltip);
|
|
707
|
+
var Tooltip = (props) => {
|
|
708
|
+
return /* @__PURE__ */ React10.createElement(MotionTooltip, { ...props });
|
|
709
|
+
};
|
|
710
|
+
Tooltip.displayName = "Tooltip";
|
|
711
|
+
|
|
712
|
+
// src/components/Tooltip/index.ts
|
|
713
|
+
var Tooltip_default = Tooltip;
|
|
757
714
|
|
|
758
715
|
// src/components/Calendar/utils/index.ts
|
|
759
716
|
var getCalendarDates = (date) => {
|
|
@@ -1112,6 +1069,12 @@ var useCalendar = (ownerState) => {
|
|
|
1112
1069
|
};
|
|
1113
1070
|
|
|
1114
1071
|
// src/components/Calendar/Calendar.tsx
|
|
1072
|
+
var MONTH_VIEW_HINT_MESSAGE = "Click the month title to view all months.";
|
|
1073
|
+
var MONTH_NAV_CLICK_WINDOW_MS = 1200;
|
|
1074
|
+
var MONTH_NAV_CLICK_THRESHOLD = 3;
|
|
1075
|
+
var MONTH_VIEW_HINT_DURATION_MS = 5e3;
|
|
1076
|
+
var MONTH_VIEW_HINT_COOLDOWN_MS = 3e4;
|
|
1077
|
+
var lastMonthViewAssistHintShownAt = 0;
|
|
1115
1078
|
var CalendarRoot = styled5("div", {
|
|
1116
1079
|
name: "Calendar",
|
|
1117
1080
|
slot: "root"
|
|
@@ -1138,7 +1101,7 @@ var CalendarViewContainer = styled5("div", {
|
|
|
1138
1101
|
overflow: "hidden",
|
|
1139
1102
|
minHeight: calendarType === "datePicker" ? "250px" : "unset"
|
|
1140
1103
|
}));
|
|
1141
|
-
var CalendarViewTable = styled5(
|
|
1104
|
+
var CalendarViewTable = styled5(motion13.table, {
|
|
1142
1105
|
name: "Calendar",
|
|
1143
1106
|
slot: "viewTable"
|
|
1144
1107
|
})(({ theme }) => ({
|
|
@@ -1318,7 +1281,7 @@ var PickerDays = (props) => {
|
|
|
1318
1281
|
const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
|
|
1319
1282
|
const calendarDates = useMemo4(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
|
|
1320
1283
|
const weekdayNames = useMemo4(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
|
|
1321
|
-
return /* @__PURE__ */
|
|
1284
|
+
return /* @__PURE__ */ React12.createElement(CalendarViewContainer, { calendarType: "datePicker" }, /* @__PURE__ */ React12.createElement(AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ React12.createElement(
|
|
1322
1285
|
CalendarViewTable,
|
|
1323
1286
|
{
|
|
1324
1287
|
key: `${ownerState.viewMonth.toString()}_${ownerState.direction}`,
|
|
@@ -1347,10 +1310,10 @@ var PickerDays = (props) => {
|
|
|
1347
1310
|
}
|
|
1348
1311
|
}
|
|
1349
1312
|
},
|
|
1350
|
-
/* @__PURE__ */
|
|
1351
|
-
/* @__PURE__ */
|
|
1352
|
-
(date, i) => date ? /* @__PURE__ */
|
|
1353
|
-
)), rowIndex < calendarDates.length - 1 && /* @__PURE__ */
|
|
1313
|
+
/* @__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" }))))),
|
|
1314
|
+
/* @__PURE__ */ React12.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ React12.createElement("tr", null, weekDates.map(
|
|
1315
|
+
(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" }))
|
|
1316
|
+
)), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ React12.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React12.createElement("td", { colSpan: 13, style: { height: 4 } })))))
|
|
1354
1317
|
)));
|
|
1355
1318
|
};
|
|
1356
1319
|
var PickerMonths = (props) => {
|
|
@@ -1367,7 +1330,7 @@ var PickerMonths = (props) => {
|
|
|
1367
1330
|
[[]]
|
|
1368
1331
|
);
|
|
1369
1332
|
const isMonthPicker = !ownerState.views?.find((view) => view === "day");
|
|
1370
|
-
return /* @__PURE__ */
|
|
1333
|
+
return /* @__PURE__ */ React12.createElement(CalendarViewContainer, { calendarType: isMonthPicker ? "monthPicker" : "datePicker" }, /* @__PURE__ */ React12.createElement(AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ React12.createElement(
|
|
1371
1334
|
CalendarViewTable,
|
|
1372
1335
|
{
|
|
1373
1336
|
key: `${ownerState.viewMonth.getFullYear()}_${ownerState.direction}`,
|
|
@@ -1396,7 +1359,7 @@ var PickerMonths = (props) => {
|
|
|
1396
1359
|
}
|
|
1397
1360
|
}
|
|
1398
1361
|
},
|
|
1399
|
-
/* @__PURE__ */
|
|
1362
|
+
/* @__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 } })))))
|
|
1400
1363
|
)));
|
|
1401
1364
|
};
|
|
1402
1365
|
var Calendar = forwardRef4((inProps, ref) => {
|
|
@@ -1418,17 +1381,96 @@ var Calendar = forwardRef4((inProps, ref) => {
|
|
|
1418
1381
|
...others
|
|
1419
1382
|
} = props;
|
|
1420
1383
|
const { calendarTitle, onPrev, onNext } = useCalendar(ownerState);
|
|
1421
|
-
|
|
1422
|
-
|
|
1384
|
+
const [isMonthViewAssistHintOpen, setIsMonthViewAssistHintOpen] = useState4(false);
|
|
1385
|
+
const monthNavClickTimestampsRef = useRef3([]);
|
|
1386
|
+
const monthViewAssistHintShownInSessionRef = useRef3(false);
|
|
1387
|
+
const monthViewAssistHintTimeoutRef = useRef3(null);
|
|
1388
|
+
const hasEndDate = Boolean(value?.[1]);
|
|
1389
|
+
const isRangeHintEligible = Boolean(rangeSelection && !hasEndDate);
|
|
1390
|
+
const isHintEligible = Boolean(view === "day" && (!rangeSelection || isRangeHintEligible));
|
|
1391
|
+
const monthViewHintMessage = MONTH_VIEW_HINT_MESSAGE;
|
|
1392
|
+
useEffect3(() => {
|
|
1393
|
+
if (!isHintEligible) {
|
|
1394
|
+
monthNavClickTimestampsRef.current = [];
|
|
1395
|
+
setIsMonthViewAssistHintOpen(false);
|
|
1396
|
+
}
|
|
1397
|
+
}, [isHintEligible]);
|
|
1398
|
+
useEffect3(() => {
|
|
1399
|
+
return () => {
|
|
1400
|
+
if (monthViewAssistHintTimeoutRef.current) {
|
|
1401
|
+
clearTimeout(monthViewAssistHintTimeoutRef.current);
|
|
1402
|
+
}
|
|
1403
|
+
};
|
|
1404
|
+
}, []);
|
|
1405
|
+
const closeMonthViewAssistHint = useCallback5(() => {
|
|
1406
|
+
if (monthViewAssistHintTimeoutRef.current) {
|
|
1407
|
+
clearTimeout(monthViewAssistHintTimeoutRef.current);
|
|
1408
|
+
monthViewAssistHintTimeoutRef.current = null;
|
|
1409
|
+
}
|
|
1410
|
+
setIsMonthViewAssistHintOpen(false);
|
|
1411
|
+
}, []);
|
|
1412
|
+
const showMonthViewAssistHint = useCallback5(() => {
|
|
1413
|
+
const now = Date.now();
|
|
1414
|
+
if (monthViewAssistHintShownInSessionRef.current) return;
|
|
1415
|
+
if (now - lastMonthViewAssistHintShownAt < MONTH_VIEW_HINT_COOLDOWN_MS) return;
|
|
1416
|
+
monthViewAssistHintShownInSessionRef.current = true;
|
|
1417
|
+
lastMonthViewAssistHintShownAt = now;
|
|
1418
|
+
setIsMonthViewAssistHintOpen(true);
|
|
1419
|
+
if (monthViewAssistHintTimeoutRef.current) {
|
|
1420
|
+
clearTimeout(monthViewAssistHintTimeoutRef.current);
|
|
1421
|
+
}
|
|
1422
|
+
monthViewAssistHintTimeoutRef.current = setTimeout(() => {
|
|
1423
|
+
setIsMonthViewAssistHintOpen(false);
|
|
1424
|
+
monthViewAssistHintTimeoutRef.current = null;
|
|
1425
|
+
}, MONTH_VIEW_HINT_DURATION_MS);
|
|
1426
|
+
}, []);
|
|
1427
|
+
const trackFastMonthNavigation = useCallback5(() => {
|
|
1428
|
+
if (!isHintEligible) return;
|
|
1429
|
+
const now = Date.now();
|
|
1430
|
+
monthNavClickTimestampsRef.current = [
|
|
1431
|
+
...monthNavClickTimestampsRef.current.filter((timestamp) => now - timestamp <= MONTH_NAV_CLICK_WINDOW_MS),
|
|
1432
|
+
now
|
|
1433
|
+
];
|
|
1434
|
+
if (monthNavClickTimestampsRef.current.length >= MONTH_NAV_CLICK_THRESHOLD) {
|
|
1435
|
+
showMonthViewAssistHint();
|
|
1436
|
+
}
|
|
1437
|
+
}, [isHintEligible, showMonthViewAssistHint]);
|
|
1438
|
+
const handlePrevClick = useCallback5(() => {
|
|
1439
|
+
onPrev();
|
|
1440
|
+
trackFastMonthNavigation();
|
|
1441
|
+
}, [onPrev, trackFastMonthNavigation]);
|
|
1442
|
+
const handleNextClick = useCallback5(() => {
|
|
1443
|
+
onNext();
|
|
1444
|
+
trackFastMonthNavigation();
|
|
1445
|
+
}, [onNext, trackFastMonthNavigation]);
|
|
1446
|
+
const handleSwitchViewClick = useCallback5(() => {
|
|
1447
|
+
closeMonthViewAssistHint();
|
|
1448
|
+
onViewChange?.();
|
|
1449
|
+
}, [closeMonthViewAssistHint, onViewChange]);
|
|
1450
|
+
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(
|
|
1451
|
+
Tooltip_default,
|
|
1423
1452
|
{
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1453
|
+
title: monthViewHintMessage,
|
|
1454
|
+
arrow: true,
|
|
1455
|
+
open: isMonthViewAssistHintOpen,
|
|
1456
|
+
placement: "bottom",
|
|
1457
|
+
disableFocusListener: true,
|
|
1458
|
+
disableHoverListener: true,
|
|
1459
|
+
disableTouchListener: true,
|
|
1460
|
+
variant: "solid"
|
|
1429
1461
|
},
|
|
1430
|
-
|
|
1431
|
-
|
|
1462
|
+
/* @__PURE__ */ React12.createElement(
|
|
1463
|
+
CalendarSwitchViewButton,
|
|
1464
|
+
{
|
|
1465
|
+
ownerState,
|
|
1466
|
+
variant: "plain",
|
|
1467
|
+
color: "neutral",
|
|
1468
|
+
onClick: handleSwitchViewClick,
|
|
1469
|
+
"aria-label": "Switch Calendar View"
|
|
1470
|
+
},
|
|
1471
|
+
calendarTitle
|
|
1472
|
+
)
|
|
1473
|
+
), /* @__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 }));
|
|
1432
1474
|
});
|
|
1433
1475
|
Calendar.displayName = "Calendar";
|
|
1434
1476
|
|
|
@@ -1443,30 +1485,30 @@ import {
|
|
|
1443
1485
|
CardActions as JoyCardActions,
|
|
1444
1486
|
CardOverflow as JoyCardOverflow
|
|
1445
1487
|
} from "@mui/joy";
|
|
1446
|
-
import { motion as
|
|
1447
|
-
var MotionCard =
|
|
1488
|
+
import { motion as motion14 } from "framer-motion";
|
|
1489
|
+
var MotionCard = motion14(JoyCard);
|
|
1448
1490
|
var Card = MotionCard;
|
|
1449
1491
|
Card.displayName = "Card";
|
|
1450
|
-
var MotionCardContent =
|
|
1492
|
+
var MotionCardContent = motion14(JoyCardContent);
|
|
1451
1493
|
var CardContent = MotionCardContent;
|
|
1452
1494
|
CardContent.displayName = "CardContent";
|
|
1453
|
-
var MotionCardCover =
|
|
1495
|
+
var MotionCardCover = motion14(JoyCardCover);
|
|
1454
1496
|
var CardCover = MotionCardCover;
|
|
1455
1497
|
CardCover.displayName = "CardCover";
|
|
1456
|
-
var MotionCardActions =
|
|
1498
|
+
var MotionCardActions = motion14(JoyCardActions);
|
|
1457
1499
|
var CardActions = MotionCardActions;
|
|
1458
1500
|
CardActions.displayName = "CardActions";
|
|
1459
|
-
var MotionCardOverflow =
|
|
1501
|
+
var MotionCardOverflow = motion14(JoyCardOverflow);
|
|
1460
1502
|
var CardOverflow = MotionCardOverflow;
|
|
1461
1503
|
CardOverflow.displayName = "CardOverflow";
|
|
1462
1504
|
|
|
1463
1505
|
// src/components/Checkbox/Checkbox.tsx
|
|
1464
|
-
import
|
|
1506
|
+
import React13 from "react";
|
|
1465
1507
|
import { Checkbox as JoyCheckbox } from "@mui/joy";
|
|
1466
|
-
import { motion as
|
|
1467
|
-
var MotionCheckbox =
|
|
1508
|
+
import { motion as motion15 } from "framer-motion";
|
|
1509
|
+
var MotionCheckbox = motion15(JoyCheckbox);
|
|
1468
1510
|
var Checkbox = (props) => {
|
|
1469
|
-
return /* @__PURE__ */
|
|
1511
|
+
return /* @__PURE__ */ React13.createElement(MotionCheckbox, { ...props });
|
|
1470
1512
|
};
|
|
1471
1513
|
Checkbox.displayName = "Checkbox";
|
|
1472
1514
|
|
|
@@ -1475,7 +1517,7 @@ var Checkbox_default = Checkbox;
|
|
|
1475
1517
|
|
|
1476
1518
|
// src/components/Container/Container.tsx
|
|
1477
1519
|
import { styled as styled6 } from "@mui/joy";
|
|
1478
|
-
import
|
|
1520
|
+
import React14, { forwardRef as forwardRef5 } from "react";
|
|
1479
1521
|
var ContainerRoot = styled6("div", {
|
|
1480
1522
|
name: "Container",
|
|
1481
1523
|
slot: "root",
|
|
@@ -1502,24 +1544,24 @@ var ContainerRoot = styled6("div", {
|
|
|
1502
1544
|
} : null
|
|
1503
1545
|
]);
|
|
1504
1546
|
var Container = forwardRef5(function Container2(props, ref) {
|
|
1505
|
-
return /* @__PURE__ */
|
|
1547
|
+
return /* @__PURE__ */ React14.createElement(ContainerRoot, { ref, ...props });
|
|
1506
1548
|
});
|
|
1507
1549
|
Container.displayName = "Container";
|
|
1508
1550
|
|
|
1509
1551
|
// src/components/CurrencyInput/CurrencyInput.tsx
|
|
1510
|
-
import
|
|
1552
|
+
import React16, { useCallback as useCallback7, useMemo as useMemo5, useState as useState6 } from "react";
|
|
1511
1553
|
import { IntlMessageFormat as IntlMessageFormat2 } from "intl-messageformat";
|
|
1512
1554
|
import { NumericFormat } from "react-number-format";
|
|
1513
1555
|
|
|
1514
1556
|
// src/components/Input/Input.tsx
|
|
1515
|
-
import
|
|
1557
|
+
import React15, { useCallback as useCallback6, useState as useState5 } from "react";
|
|
1516
1558
|
import { Input as JoyInput } from "@mui/joy";
|
|
1517
|
-
import { motion as
|
|
1559
|
+
import { motion as motion16 } from "framer-motion";
|
|
1518
1560
|
import ClearIcon from "@mui/icons-material/Close";
|
|
1519
1561
|
import VisibilityIcon from "@mui/icons-material/Visibility";
|
|
1520
1562
|
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
|
|
1521
|
-
var MotionInput =
|
|
1522
|
-
var Input =
|
|
1563
|
+
var MotionInput = motion16(JoyInput);
|
|
1564
|
+
var Input = React15.forwardRef((props, ref) => {
|
|
1523
1565
|
const {
|
|
1524
1566
|
label,
|
|
1525
1567
|
helperText,
|
|
@@ -1542,11 +1584,11 @@ var Input = React14.forwardRef((props, ref) => {
|
|
|
1542
1584
|
if (type === "password" && innerProps.endDecorator) {
|
|
1543
1585
|
console.warn('Input: endDecorator is not supported when type="password"');
|
|
1544
1586
|
}
|
|
1545
|
-
const [passwordVisible, setPasswordVisible] =
|
|
1587
|
+
const [passwordVisible, setPasswordVisible] = useState5(false);
|
|
1546
1588
|
const [value, setValue] = useControlledState(
|
|
1547
1589
|
props.value,
|
|
1548
1590
|
props.defaultValue,
|
|
1549
|
-
|
|
1591
|
+
useCallback6(
|
|
1550
1592
|
(value2) => {
|
|
1551
1593
|
onChange?.({
|
|
1552
1594
|
/**
|
|
@@ -1572,7 +1614,7 @@ var Input = React14.forwardRef((props, ref) => {
|
|
|
1572
1614
|
const actualType = type === "password" && passwordVisible ? "text" : type;
|
|
1573
1615
|
const isPasswordType = type === "password";
|
|
1574
1616
|
const showPasswordToggle = isPasswordType && !disableTogglePasswordButton;
|
|
1575
|
-
const input = /* @__PURE__ */
|
|
1617
|
+
const input = /* @__PURE__ */ React15.createElement(
|
|
1576
1618
|
MotionInput,
|
|
1577
1619
|
{
|
|
1578
1620
|
value,
|
|
@@ -1587,7 +1629,7 @@ var Input = React14.forwardRef((props, ref) => {
|
|
|
1587
1629
|
...innerProps.slotProps
|
|
1588
1630
|
},
|
|
1589
1631
|
...innerProps,
|
|
1590
|
-
endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */
|
|
1632
|
+
endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */ React15.createElement(Stack_default, { gap: 1, direction: "row" }, /* @__PURE__ */ React15.createElement(
|
|
1591
1633
|
IconButton_default,
|
|
1592
1634
|
{
|
|
1593
1635
|
onMouseDown: (e) => e.preventDefault(),
|
|
@@ -1595,19 +1637,19 @@ var Input = React14.forwardRef((props, ref) => {
|
|
|
1595
1637
|
disabled,
|
|
1596
1638
|
"aria-label": passwordVisible ? "Hide password" : "Show password"
|
|
1597
1639
|
},
|
|
1598
|
-
passwordVisible ? /* @__PURE__ */
|
|
1599
|
-
)) : null : enableClearable ? /* @__PURE__ */
|
|
1640
|
+
passwordVisible ? /* @__PURE__ */ React15.createElement(VisibilityOffIcon, null) : /* @__PURE__ */ React15.createElement(VisibilityIcon, null)
|
|
1641
|
+
)) : null : enableClearable ? /* @__PURE__ */ React15.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ React15.createElement(
|
|
1600
1642
|
IconButton_default,
|
|
1601
1643
|
{
|
|
1602
1644
|
onMouseDown: (e) => e.preventDefault(),
|
|
1603
1645
|
onClick: handleClear,
|
|
1604
1646
|
"aria-label": "Clear"
|
|
1605
1647
|
},
|
|
1606
|
-
/* @__PURE__ */
|
|
1648
|
+
/* @__PURE__ */ React15.createElement(ClearIcon, null)
|
|
1607
1649
|
)) : innerProps.endDecorator
|
|
1608
1650
|
}
|
|
1609
1651
|
);
|
|
1610
|
-
return /* @__PURE__ */
|
|
1652
|
+
return /* @__PURE__ */ React15.createElement(
|
|
1611
1653
|
FormControl_default,
|
|
1612
1654
|
{
|
|
1613
1655
|
required,
|
|
@@ -1618,9 +1660,9 @@ var Input = React14.forwardRef((props, ref) => {
|
|
|
1618
1660
|
sx,
|
|
1619
1661
|
className
|
|
1620
1662
|
},
|
|
1621
|
-
label && /* @__PURE__ */
|
|
1663
|
+
label && /* @__PURE__ */ React15.createElement(FormLabel_default, null, label),
|
|
1622
1664
|
input,
|
|
1623
|
-
helperText && /* @__PURE__ */
|
|
1665
|
+
helperText && /* @__PURE__ */ React15.createElement(FormHelperText_default, null, helperText)
|
|
1624
1666
|
);
|
|
1625
1667
|
});
|
|
1626
1668
|
Input.displayName = "Input";
|
|
@@ -1792,9 +1834,9 @@ var useCurrencySetting = (props) => {
|
|
|
1792
1834
|
};
|
|
1793
1835
|
|
|
1794
1836
|
// src/components/CurrencyInput/CurrencyInput.tsx
|
|
1795
|
-
var TextMaskAdapter =
|
|
1837
|
+
var TextMaskAdapter = React16.forwardRef(function TextMaskAdapter2(props, ref) {
|
|
1796
1838
|
const { onChange, ...innerProps } = props;
|
|
1797
|
-
return /* @__PURE__ */
|
|
1839
|
+
return /* @__PURE__ */ React16.createElement(
|
|
1798
1840
|
NumericFormat,
|
|
1799
1841
|
{
|
|
1800
1842
|
...innerProps,
|
|
@@ -1814,7 +1856,7 @@ var CurrencyInputRoot = styled7(Input_default, {
|
|
|
1814
1856
|
slot: "root",
|
|
1815
1857
|
overridesResolver: (props, styles) => styles.root
|
|
1816
1858
|
})({});
|
|
1817
|
-
var CurrencyInput =
|
|
1859
|
+
var CurrencyInput = React16.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
1818
1860
|
const props = useThemeProps3({ props: inProps, name: "CurrencyInput" });
|
|
1819
1861
|
const {
|
|
1820
1862
|
currency = "USD",
|
|
@@ -1835,7 +1877,7 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1835
1877
|
const [_value, setValue] = useControlledState(
|
|
1836
1878
|
props.value,
|
|
1837
1879
|
props.defaultValue,
|
|
1838
|
-
|
|
1880
|
+
useCallback7((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
|
|
1839
1881
|
);
|
|
1840
1882
|
const value = useMemo5(() => {
|
|
1841
1883
|
if (_value && useMinorUnit) {
|
|
@@ -1849,8 +1891,8 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1849
1891
|
}
|
|
1850
1892
|
return props.max;
|
|
1851
1893
|
}, [props.max, useMinorUnit, decimalScale]);
|
|
1852
|
-
const [isOverLimit, setIsOverLimit] =
|
|
1853
|
-
const handleChange =
|
|
1894
|
+
const [isOverLimit, setIsOverLimit] = useState6(!!max && !!value && value > max);
|
|
1895
|
+
const handleChange = useCallback7(
|
|
1854
1896
|
(event) => {
|
|
1855
1897
|
if (event.target.value === "") {
|
|
1856
1898
|
setValue(void 0);
|
|
@@ -1866,7 +1908,7 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1866
1908
|
},
|
|
1867
1909
|
[decimalSeparator, max, useMinorUnit, setValue]
|
|
1868
1910
|
);
|
|
1869
|
-
return /* @__PURE__ */
|
|
1911
|
+
return /* @__PURE__ */ React16.createElement(
|
|
1870
1912
|
CurrencyInputRoot,
|
|
1871
1913
|
{
|
|
1872
1914
|
...innerProps,
|
|
@@ -1906,9 +1948,9 @@ var CurrencyInput_default = CurrencyInput;
|
|
|
1906
1948
|
|
|
1907
1949
|
// src/components/DataTable/DataTable.tsx
|
|
1908
1950
|
import React25, {
|
|
1909
|
-
useCallback as
|
|
1951
|
+
useCallback as useCallback12,
|
|
1910
1952
|
useMemo as useMemo10,
|
|
1911
|
-
useRef as
|
|
1953
|
+
useRef as useRef7,
|
|
1912
1954
|
useId,
|
|
1913
1955
|
forwardRef as forwardRef7,
|
|
1914
1956
|
useImperativeHandle as useImperativeHandle2,
|
|
@@ -2036,9 +2078,9 @@ function getTextAlign(props) {
|
|
|
2036
2078
|
var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
|
|
2037
2079
|
|
|
2038
2080
|
// src/components/DataTable/styled.tsx
|
|
2039
|
-
import
|
|
2081
|
+
import React17 from "react";
|
|
2040
2082
|
import { styled as styled8, LinearProgress, buttonClasses, iconButtonClasses } from "@mui/joy";
|
|
2041
|
-
import { motion as
|
|
2083
|
+
import { motion as motion17 } from "framer-motion";
|
|
2042
2084
|
import SortIcon from "@mui/icons-material/ArrowUpwardRounded";
|
|
2043
2085
|
var EllipsisDiv = styled8("div", {
|
|
2044
2086
|
name: "DataTable",
|
|
@@ -2112,7 +2154,7 @@ var Asterisk = styled8("span", {
|
|
|
2112
2154
|
color: "var(--ceed-palette-danger-500)",
|
|
2113
2155
|
marginLeft: theme.spacing(0.5)
|
|
2114
2156
|
}));
|
|
2115
|
-
var StyledTh = styled8(
|
|
2157
|
+
var StyledTh = styled8(motion17.th)(({ theme }) => ({
|
|
2116
2158
|
boxShadow: "1px 0 var(--TableCell-borderColor)"
|
|
2117
2159
|
}));
|
|
2118
2160
|
var StyledTd = styled8("td")(({ theme }) => ({
|
|
@@ -2131,9 +2173,9 @@ var StyledTd = styled8("td")(({ theme }) => ({
|
|
|
2131
2173
|
}
|
|
2132
2174
|
}
|
|
2133
2175
|
}));
|
|
2134
|
-
var MotionSortIcon =
|
|
2135
|
-
var DefaultLoadingOverlay = () => /* @__PURE__ */
|
|
2136
|
-
var Resizer = (ref, targetRef = ref) => /* @__PURE__ */
|
|
2176
|
+
var MotionSortIcon = motion17(SortIcon);
|
|
2177
|
+
var DefaultLoadingOverlay = () => /* @__PURE__ */ React17.createElement(LinearProgress, { value: 8, variant: "plain" });
|
|
2178
|
+
var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React17.createElement(
|
|
2137
2179
|
Box_default,
|
|
2138
2180
|
{
|
|
2139
2181
|
sx: {
|
|
@@ -2166,12 +2208,12 @@ var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React16.createElement(
|
|
|
2166
2208
|
|
|
2167
2209
|
// src/components/DataTable/components.tsx
|
|
2168
2210
|
import React22, {
|
|
2169
|
-
useRef as
|
|
2170
|
-
useState as
|
|
2211
|
+
useRef as useRef5,
|
|
2212
|
+
useState as useState8,
|
|
2171
2213
|
useLayoutEffect,
|
|
2172
2214
|
useMemo as useMemo8,
|
|
2173
|
-
useCallback as
|
|
2174
|
-
useEffect as
|
|
2215
|
+
useCallback as useCallback9,
|
|
2216
|
+
useEffect as useEffect5,
|
|
2175
2217
|
memo,
|
|
2176
2218
|
createElement
|
|
2177
2219
|
} from "react";
|
|
@@ -2179,7 +2221,7 @@ import { styled as styled12, useTheme } from "@mui/joy";
|
|
|
2179
2221
|
import { AnimatePresence as AnimatePresence2 } from "framer-motion";
|
|
2180
2222
|
|
|
2181
2223
|
// src/components/DatePicker/DatePicker.tsx
|
|
2182
|
-
import
|
|
2224
|
+
import React18, { forwardRef as forwardRef6, useCallback as useCallback8, useEffect as useEffect4, useImperativeHandle, useRef as useRef4, useState as useState7 } from "react";
|
|
2183
2225
|
import { IMaskInput, IMask } from "react-imask";
|
|
2184
2226
|
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
|
|
2185
2227
|
import { styled as styled10, useThemeProps as useThemeProps4 } from "@mui/joy";
|
|
@@ -2194,8 +2236,8 @@ var Sheet_default = Sheet;
|
|
|
2194
2236
|
|
|
2195
2237
|
// src/components/DialogActions/DialogActions.tsx
|
|
2196
2238
|
import { DialogActions as JoyDialogActions, styled as styled9 } from "@mui/joy";
|
|
2197
|
-
import { motion as
|
|
2198
|
-
var MotionDialogActions =
|
|
2239
|
+
import { motion as motion18 } from "framer-motion";
|
|
2240
|
+
var MotionDialogActions = motion18(JoyDialogActions);
|
|
2199
2241
|
var StyledDialogActions = styled9(MotionDialogActions)(({ theme }) => ({
|
|
2200
2242
|
padding: theme.spacing(2),
|
|
2201
2243
|
gap: theme.spacing(2),
|
|
@@ -2291,9 +2333,9 @@ function parseDate(dateString, format) {
|
|
|
2291
2333
|
var formatToPattern = (format) => {
|
|
2292
2334
|
return format.replace(/YYYY/g, "Y").replace(/MM/g, "M").replace(/DD/g, "D").replace(/[^YMD\s]/g, (match) => `${match}\``);
|
|
2293
2335
|
};
|
|
2294
|
-
var TextMaskAdapter3 =
|
|
2336
|
+
var TextMaskAdapter3 = React18.forwardRef(function TextMaskAdapter4(props, ref) {
|
|
2295
2337
|
const { onChange, format, ...other } = props;
|
|
2296
|
-
return /* @__PURE__ */
|
|
2338
|
+
return /* @__PURE__ */ React18.createElement(
|
|
2297
2339
|
IMaskInput,
|
|
2298
2340
|
{
|
|
2299
2341
|
...other,
|
|
@@ -2353,24 +2395,24 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2353
2395
|
shouldDisableDate,
|
|
2354
2396
|
...innerProps
|
|
2355
2397
|
} = props;
|
|
2356
|
-
const innerRef =
|
|
2357
|
-
const buttonRef =
|
|
2398
|
+
const innerRef = useRef4(null);
|
|
2399
|
+
const buttonRef = useRef4(null);
|
|
2358
2400
|
const [value, setValue] = useControlledState(
|
|
2359
2401
|
props.value,
|
|
2360
2402
|
props.defaultValue || "",
|
|
2361
|
-
|
|
2403
|
+
useCallback8((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
2362
2404
|
);
|
|
2363
|
-
const [displayValue, setDisplayValue] =
|
|
2405
|
+
const [displayValue, setDisplayValue] = useState7(
|
|
2364
2406
|
() => value ? formatValueString(parseDate(value, format), displayFormat) : ""
|
|
2365
2407
|
);
|
|
2366
|
-
const [anchorEl, setAnchorEl] =
|
|
2408
|
+
const [anchorEl, setAnchorEl] = useState7(null);
|
|
2367
2409
|
const open = Boolean(anchorEl);
|
|
2368
|
-
|
|
2410
|
+
useEffect4(() => {
|
|
2369
2411
|
if (!anchorEl) {
|
|
2370
2412
|
innerRef.current?.blur();
|
|
2371
2413
|
}
|
|
2372
2414
|
}, [anchorEl, innerRef]);
|
|
2373
|
-
|
|
2415
|
+
useEffect4(() => {
|
|
2374
2416
|
if (value === "") {
|
|
2375
2417
|
setDisplayValue("");
|
|
2376
2418
|
return;
|
|
@@ -2381,7 +2423,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2381
2423
|
}
|
|
2382
2424
|
}, [displayFormat, displayValue, format, value]);
|
|
2383
2425
|
useImperativeHandle(ref, () => innerRef.current, [innerRef]);
|
|
2384
|
-
const handleChange =
|
|
2426
|
+
const handleChange = useCallback8(
|
|
2385
2427
|
(event) => {
|
|
2386
2428
|
const value2 = event.target.value;
|
|
2387
2429
|
setDisplayValue(value2 ? formatValueString(parseDate(value2, format), displayFormat) : value2);
|
|
@@ -2389,7 +2431,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2389
2431
|
},
|
|
2390
2432
|
[displayFormat, format, setValue]
|
|
2391
2433
|
);
|
|
2392
|
-
const handleDisplayInputChange =
|
|
2434
|
+
const handleDisplayInputChange = useCallback8(
|
|
2393
2435
|
(event) => {
|
|
2394
2436
|
if (event.target.value === "") {
|
|
2395
2437
|
handleChange({
|
|
@@ -2414,7 +2456,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2414
2456
|
},
|
|
2415
2457
|
[displayFormat, format, handleChange, props.name]
|
|
2416
2458
|
);
|
|
2417
|
-
const handleCalendarToggle =
|
|
2459
|
+
const handleCalendarToggle = useCallback8(
|
|
2418
2460
|
(event) => {
|
|
2419
2461
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
2420
2462
|
setTimeout(() => {
|
|
@@ -2423,7 +2465,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2423
2465
|
},
|
|
2424
2466
|
[anchorEl, setAnchorEl, innerRef]
|
|
2425
2467
|
);
|
|
2426
|
-
const handleInputMouseDown =
|
|
2468
|
+
const handleInputMouseDown = useCallback8(
|
|
2427
2469
|
(event) => {
|
|
2428
2470
|
if (inputReadOnly) {
|
|
2429
2471
|
event.preventDefault();
|
|
@@ -2432,7 +2474,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2432
2474
|
},
|
|
2433
2475
|
[inputReadOnly, buttonRef]
|
|
2434
2476
|
);
|
|
2435
|
-
return /* @__PURE__ */
|
|
2477
|
+
return /* @__PURE__ */ React18.createElement(DatePickerRoot, null, /* @__PURE__ */ React18.createElement(FocusTrap, { open: true }, /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
|
|
2436
2478
|
Input_default,
|
|
2437
2479
|
{
|
|
2438
2480
|
...innerProps,
|
|
@@ -2460,7 +2502,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2460
2502
|
},
|
|
2461
2503
|
className,
|
|
2462
2504
|
sx,
|
|
2463
|
-
endDecorator: /* @__PURE__ */
|
|
2505
|
+
endDecorator: /* @__PURE__ */ React18.createElement(
|
|
2464
2506
|
CalendarButton,
|
|
2465
2507
|
{
|
|
2466
2508
|
ref: buttonRef,
|
|
@@ -2472,13 +2514,13 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2472
2514
|
"aria-expanded": open,
|
|
2473
2515
|
disabled
|
|
2474
2516
|
},
|
|
2475
|
-
/* @__PURE__ */
|
|
2517
|
+
/* @__PURE__ */ React18.createElement(CalendarTodayIcon, null)
|
|
2476
2518
|
),
|
|
2477
2519
|
label,
|
|
2478
2520
|
helperText,
|
|
2479
2521
|
readOnly: readOnly || inputReadOnly
|
|
2480
2522
|
}
|
|
2481
|
-
), open && /* @__PURE__ */
|
|
2523
|
+
), open && /* @__PURE__ */ React18.createElement(ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React18.createElement(
|
|
2482
2524
|
StyledPopper,
|
|
2483
2525
|
{
|
|
2484
2526
|
id: "date-picker-popper",
|
|
@@ -2497,7 +2539,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2497
2539
|
"aria-label": "Calendar Tooltip",
|
|
2498
2540
|
"aria-expanded": open
|
|
2499
2541
|
},
|
|
2500
|
-
/* @__PURE__ */
|
|
2542
|
+
/* @__PURE__ */ React18.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React18.createElement(
|
|
2501
2543
|
Calendar_default,
|
|
2502
2544
|
{
|
|
2503
2545
|
value: value && !Number.isNaN(parseDate(value, format).getTime()) ? [parseDate(value, format), void 0] : void 0,
|
|
@@ -2516,14 +2558,14 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2516
2558
|
disablePast,
|
|
2517
2559
|
shouldDisableDate: shouldDisableDate ? (date) => shouldDisableDate(formatValueString(date, format)) : void 0
|
|
2518
2560
|
}
|
|
2519
|
-
), !hideClearButton && /* @__PURE__ */
|
|
2561
|
+
), !hideClearButton && /* @__PURE__ */ React18.createElement(
|
|
2520
2562
|
DialogActions_default,
|
|
2521
2563
|
{
|
|
2522
2564
|
sx: {
|
|
2523
2565
|
p: 1
|
|
2524
2566
|
}
|
|
2525
2567
|
},
|
|
2526
|
-
/* @__PURE__ */
|
|
2568
|
+
/* @__PURE__ */ React18.createElement(
|
|
2527
2569
|
Button_default,
|
|
2528
2570
|
{
|
|
2529
2571
|
size,
|
|
@@ -2549,10 +2591,10 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2549
2591
|
var DatePicker_default = DatePicker;
|
|
2550
2592
|
|
|
2551
2593
|
// src/components/Textarea/Textarea.tsx
|
|
2552
|
-
import
|
|
2594
|
+
import React19 from "react";
|
|
2553
2595
|
import { Textarea as JoyTextarea } from "@mui/joy";
|
|
2554
|
-
import { motion as
|
|
2555
|
-
var MotionTextarea =
|
|
2596
|
+
import { motion as motion19 } from "framer-motion";
|
|
2597
|
+
var MotionTextarea = motion19(JoyTextarea);
|
|
2556
2598
|
var Textarea = (props) => {
|
|
2557
2599
|
const {
|
|
2558
2600
|
label,
|
|
@@ -2569,7 +2611,7 @@ var Textarea = (props) => {
|
|
|
2569
2611
|
className,
|
|
2570
2612
|
...innerProps
|
|
2571
2613
|
} = props;
|
|
2572
|
-
const textarea = /* @__PURE__ */
|
|
2614
|
+
const textarea = /* @__PURE__ */ React19.createElement(
|
|
2573
2615
|
MotionTextarea,
|
|
2574
2616
|
{
|
|
2575
2617
|
required,
|
|
@@ -2581,7 +2623,7 @@ var Textarea = (props) => {
|
|
|
2581
2623
|
...innerProps
|
|
2582
2624
|
}
|
|
2583
2625
|
);
|
|
2584
|
-
return /* @__PURE__ */
|
|
2626
|
+
return /* @__PURE__ */ React19.createElement(
|
|
2585
2627
|
FormControl_default,
|
|
2586
2628
|
{
|
|
2587
2629
|
required,
|
|
@@ -2592,9 +2634,9 @@ var Textarea = (props) => {
|
|
|
2592
2634
|
sx,
|
|
2593
2635
|
className
|
|
2594
2636
|
},
|
|
2595
|
-
label && /* @__PURE__ */
|
|
2637
|
+
label && /* @__PURE__ */ React19.createElement(FormLabel_default, null, label),
|
|
2596
2638
|
textarea,
|
|
2597
|
-
helperText && /* @__PURE__ */
|
|
2639
|
+
helperText && /* @__PURE__ */ React19.createElement(FormHelperText_default, null, helperText)
|
|
2598
2640
|
);
|
|
2599
2641
|
};
|
|
2600
2642
|
Textarea.displayName = "Textarea";
|
|
@@ -2603,10 +2645,10 @@ Textarea.displayName = "Textarea";
|
|
|
2603
2645
|
var Textarea_default = Textarea;
|
|
2604
2646
|
|
|
2605
2647
|
// src/components/Select/Select.tsx
|
|
2606
|
-
import
|
|
2648
|
+
import React20, { useMemo as useMemo7 } from "react";
|
|
2607
2649
|
import { Select as JoySelect, Option as JoyOption, ListItemContent as ListItemContent2, Typography as Typography3 } from "@mui/joy";
|
|
2608
|
-
import { motion as
|
|
2609
|
-
var MotionOption =
|
|
2650
|
+
import { motion as motion20 } from "framer-motion";
|
|
2651
|
+
var MotionOption = motion20(JoyOption);
|
|
2610
2652
|
var Option = MotionOption;
|
|
2611
2653
|
var secondaryTextLevelMap2 = {
|
|
2612
2654
|
sm: "body-xs",
|
|
@@ -2661,7 +2703,7 @@ function Select(props) {
|
|
|
2661
2703
|
});
|
|
2662
2704
|
return map;
|
|
2663
2705
|
}, [options]);
|
|
2664
|
-
const select = /* @__PURE__ */
|
|
2706
|
+
const select = /* @__PURE__ */ React20.createElement(
|
|
2665
2707
|
JoySelect,
|
|
2666
2708
|
{
|
|
2667
2709
|
...innerProps,
|
|
@@ -2678,9 +2720,9 @@ function Select(props) {
|
|
|
2678
2720
|
return optionMap.get(selected.value)?.label;
|
|
2679
2721
|
}
|
|
2680
2722
|
},
|
|
2681
|
-
options.map((option) => /* @__PURE__ */
|
|
2723
|
+
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))
|
|
2682
2724
|
);
|
|
2683
|
-
return /* @__PURE__ */
|
|
2725
|
+
return /* @__PURE__ */ React20.createElement(
|
|
2684
2726
|
FormControl_default,
|
|
2685
2727
|
{
|
|
2686
2728
|
required,
|
|
@@ -2691,9 +2733,9 @@ function Select(props) {
|
|
|
2691
2733
|
sx,
|
|
2692
2734
|
className
|
|
2693
2735
|
},
|
|
2694
|
-
label && /* @__PURE__ */
|
|
2736
|
+
label && /* @__PURE__ */ React20.createElement(FormLabel_default, null, label),
|
|
2695
2737
|
select,
|
|
2696
|
-
helperText && /* @__PURE__ */
|
|
2738
|
+
helperText && /* @__PURE__ */ React20.createElement(FormHelperText_default, null, helperText)
|
|
2697
2739
|
);
|
|
2698
2740
|
}
|
|
2699
2741
|
Select.displayName = "Select";
|
|
@@ -2704,19 +2746,6 @@ var Select_default = Select;
|
|
|
2704
2746
|
// src/components/DataTable/components.tsx
|
|
2705
2747
|
import { Link } from "@mui/joy";
|
|
2706
2748
|
|
|
2707
|
-
// src/components/Tooltip/Tooltip.tsx
|
|
2708
|
-
import React20 from "react";
|
|
2709
|
-
import { Tooltip as JoyTooltip } from "@mui/joy";
|
|
2710
|
-
import { motion as motion20 } from "framer-motion";
|
|
2711
|
-
var MotionTooltip = motion20(JoyTooltip);
|
|
2712
|
-
var Tooltip = (props) => {
|
|
2713
|
-
return /* @__PURE__ */ React20.createElement(MotionTooltip, { ...props });
|
|
2714
|
-
};
|
|
2715
|
-
Tooltip.displayName = "Tooltip";
|
|
2716
|
-
|
|
2717
|
-
// src/components/Tooltip/index.ts
|
|
2718
|
-
var Tooltip_default = Tooltip;
|
|
2719
|
-
|
|
2720
2749
|
// src/components/InfoSign/InfoSign.tsx
|
|
2721
2750
|
import React21 from "react";
|
|
2722
2751
|
import { styled as styled11, tooltipClasses } from "@mui/joy";
|
|
@@ -2752,8 +2781,8 @@ var InfoSign_default = InfoSign;
|
|
|
2752
2781
|
|
|
2753
2782
|
// src/components/DataTable/components.tsx
|
|
2754
2783
|
var TextEllipsis = ({ children }) => {
|
|
2755
|
-
const textRef =
|
|
2756
|
-
const [showTooltip, setShowTooltip] =
|
|
2784
|
+
const textRef = useRef5(null);
|
|
2785
|
+
const [showTooltip, setShowTooltip] = useState8(false);
|
|
2757
2786
|
useLayoutEffect(() => {
|
|
2758
2787
|
const element = textRef.current;
|
|
2759
2788
|
if (element) {
|
|
@@ -2768,8 +2797,8 @@ var TextEllipsis = ({ children }) => {
|
|
|
2768
2797
|
return content;
|
|
2769
2798
|
};
|
|
2770
2799
|
var CellTextEllipsis = ({ children }) => {
|
|
2771
|
-
const textRef =
|
|
2772
|
-
const [showTooltip, setShowTooltip] =
|
|
2800
|
+
const textRef = useRef5(null);
|
|
2801
|
+
const [showTooltip, setShowTooltip] = useState8(false);
|
|
2773
2802
|
useLayoutEffect(() => {
|
|
2774
2803
|
const element = textRef.current;
|
|
2775
2804
|
if (element) {
|
|
@@ -2821,7 +2850,7 @@ var HeadCell = (props) => {
|
|
|
2821
2850
|
const theme = useTheme();
|
|
2822
2851
|
const ref = headerRef;
|
|
2823
2852
|
const colRef = tableColRef;
|
|
2824
|
-
const [isHovered, setIsHovered] =
|
|
2853
|
+
const [isHovered, setIsHovered] = useState8(false);
|
|
2825
2854
|
const sortable = type === "actions" ? false : _sortable;
|
|
2826
2855
|
const headId = useMemo8(
|
|
2827
2856
|
() => `${tableId}_header_${headerName ?? field}`.trim(),
|
|
@@ -2900,7 +2929,7 @@ var HeadCell = (props) => {
|
|
|
2900
2929
|
ref,
|
|
2901
2930
|
key: field,
|
|
2902
2931
|
style,
|
|
2903
|
-
onClick:
|
|
2932
|
+
onClick: useCallback9(
|
|
2904
2933
|
(e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
|
|
2905
2934
|
[field, onSortChange, sort, sortable]
|
|
2906
2935
|
),
|
|
@@ -2935,8 +2964,8 @@ var BodyCell = (props) => {
|
|
|
2935
2964
|
onCellEditStop
|
|
2936
2965
|
} = props;
|
|
2937
2966
|
const theme = useTheme();
|
|
2938
|
-
const [value, setValue] =
|
|
2939
|
-
const cellRef =
|
|
2967
|
+
const [value, setValue] = useState8(row[field]);
|
|
2968
|
+
const cellRef = useRef5(null);
|
|
2940
2969
|
const params = useMemo8(
|
|
2941
2970
|
() => ({
|
|
2942
2971
|
row,
|
|
@@ -3081,7 +3110,7 @@ var BodyCell = (props) => {
|
|
|
3081
3110
|
() => (typeof cellClassName === "function" ? cellClassName(params) : cellClassName) || "",
|
|
3082
3111
|
[cellClassName, params]
|
|
3083
3112
|
);
|
|
3084
|
-
|
|
3113
|
+
useEffect5(() => {
|
|
3085
3114
|
setValue(row[field]);
|
|
3086
3115
|
}, [row, field]);
|
|
3087
3116
|
return /* @__PURE__ */ React22.createElement(
|
|
@@ -3151,10 +3180,10 @@ var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
|
|
|
3151
3180
|
});
|
|
3152
3181
|
|
|
3153
3182
|
// src/components/DataTable/hooks.ts
|
|
3154
|
-
import { useState as
|
|
3183
|
+
import { useState as useState9, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useMemo as useMemo9, useCallback as useCallback10, useEffect as useEffect6, createRef } from "react";
|
|
3155
3184
|
function useColumnWidths(columnsByField) {
|
|
3156
|
-
const [widths, setWidths] =
|
|
3157
|
-
const roRef =
|
|
3185
|
+
const [widths, setWidths] = useState9({});
|
|
3186
|
+
const roRef = useRef6();
|
|
3158
3187
|
useLayoutEffect2(() => {
|
|
3159
3188
|
if (roRef.current) roRef.current.disconnect();
|
|
3160
3189
|
roRef.current = new ResizeObserver((entries) => {
|
|
@@ -3209,14 +3238,14 @@ function useDataTableRenderer({
|
|
|
3209
3238
|
"You cannot use both `pinnedColumns` and `columnGroupingModel` at the same time. Please choose one of them."
|
|
3210
3239
|
);
|
|
3211
3240
|
}
|
|
3212
|
-
const onSelectionModelChangeRef =
|
|
3241
|
+
const onSelectionModelChangeRef = useRef6(onSelectionModelChange);
|
|
3213
3242
|
onSelectionModelChangeRef.current = onSelectionModelChange;
|
|
3214
|
-
const [focusedRowId, setFocusedRowId] =
|
|
3215
|
-
const [selectionAnchor, setSelectionAnchor] =
|
|
3243
|
+
const [focusedRowId, setFocusedRowId] = useState9(null);
|
|
3244
|
+
const [selectionAnchor, setSelectionAnchor] = useState9(null);
|
|
3216
3245
|
const [sortModel, setSortModel] = useControlledState(
|
|
3217
3246
|
controlledSortModel,
|
|
3218
3247
|
initialState?.sorting?.sortModel ?? [],
|
|
3219
|
-
|
|
3248
|
+
useCallback10((sortModel2) => onSortModelChange?.(sortModel2), [onSortModelChange])
|
|
3220
3249
|
);
|
|
3221
3250
|
const reorderedColumns = useMemo9(() => {
|
|
3222
3251
|
if (!columnGroupingModel) return columnsProp;
|
|
@@ -3236,7 +3265,7 @@ function useDataTableRenderer({
|
|
|
3236
3265
|
),
|
|
3237
3266
|
[reorderedColumns]
|
|
3238
3267
|
);
|
|
3239
|
-
const sortComparator =
|
|
3268
|
+
const sortComparator = useCallback10(
|
|
3240
3269
|
(rowA, rowB) => {
|
|
3241
3270
|
for (const sort of sortModel) {
|
|
3242
3271
|
const { field, sort: direction } = sort;
|
|
@@ -3272,9 +3301,9 @@ function useDataTableRenderer({
|
|
|
3272
3301
|
() => Array.from(new Set(_sortOrder || ["asc", "desc", null])),
|
|
3273
3302
|
[_sortOrder]
|
|
3274
3303
|
);
|
|
3275
|
-
const [page, setPage] =
|
|
3304
|
+
const [page, setPage] = useState9(paginationModel?.page || 1);
|
|
3276
3305
|
const pageSize = paginationModel?.pageSize || 20;
|
|
3277
|
-
const getId =
|
|
3306
|
+
const getId = useCallback10(
|
|
3278
3307
|
(row, index) => _getId?.(row) ?? row.id ?? `${(index || 0) + (page - 1) * pageSize}`,
|
|
3279
3308
|
[_getId, page, pageSize]
|
|
3280
3309
|
);
|
|
@@ -3290,7 +3319,7 @@ function useDataTableRenderer({
|
|
|
3290
3319
|
}),
|
|
3291
3320
|
[dataInPage, isRowSelectable, getId]
|
|
3292
3321
|
);
|
|
3293
|
-
const handleRangeSelection =
|
|
3322
|
+
const handleRangeSelection = useCallback10(
|
|
3294
3323
|
(anchor, targetIndex) => {
|
|
3295
3324
|
const startIndex = Math.min(anchor.rowIndex, targetIndex);
|
|
3296
3325
|
const endIndex = Math.max(anchor.rowIndex, targetIndex);
|
|
@@ -3327,7 +3356,7 @@ function useDataTableRenderer({
|
|
|
3327
3356
|
[_isTotalSelected, selectionModel, selectableRowCount]
|
|
3328
3357
|
);
|
|
3329
3358
|
const columnWidths = useColumnWidths(columnsByField);
|
|
3330
|
-
const getWidth =
|
|
3359
|
+
const getWidth = useCallback10(
|
|
3331
3360
|
(f) => columnWidths[f] ?? columnsByField[f].width ?? // Column prop 으로 지정된 width
|
|
3332
3361
|
columnsByField[f].minWidth ?? 0,
|
|
3333
3362
|
[columnWidths, columnsByField]
|
|
@@ -3369,14 +3398,14 @@ function useDataTableRenderer({
|
|
|
3369
3398
|
sortOrder,
|
|
3370
3399
|
getWidth
|
|
3371
3400
|
]);
|
|
3372
|
-
const handlePageChange =
|
|
3401
|
+
const handlePageChange = useCallback10(
|
|
3373
3402
|
(newPage) => {
|
|
3374
3403
|
setPage(newPage);
|
|
3375
3404
|
onPaginationModelChange?.({ page: newPage, pageSize });
|
|
3376
3405
|
},
|
|
3377
3406
|
[onPaginationModelChange, pageSize]
|
|
3378
3407
|
);
|
|
3379
|
-
const handleSortChange =
|
|
3408
|
+
const handleSortChange = useCallback10(
|
|
3380
3409
|
(props) => {
|
|
3381
3410
|
const { field, currentSort, multiple } = props;
|
|
3382
3411
|
const column = columnsByField[field];
|
|
@@ -3399,23 +3428,23 @@ function useDataTableRenderer({
|
|
|
3399
3428
|
},
|
|
3400
3429
|
[sortOrder, columnsByField, sortModel, setSortModel]
|
|
3401
3430
|
);
|
|
3402
|
-
|
|
3431
|
+
useEffect6(() => {
|
|
3403
3432
|
if (!paginationModel) {
|
|
3404
3433
|
handlePageChange(1);
|
|
3405
3434
|
}
|
|
3406
3435
|
}, [rowCount, handlePageChange, paginationModel]);
|
|
3407
|
-
|
|
3436
|
+
useEffect6(() => {
|
|
3408
3437
|
const lastPage = Math.max(1, Math.ceil(rowCount / pageSize));
|
|
3409
3438
|
if (page > lastPage) {
|
|
3410
3439
|
handlePageChange(lastPage);
|
|
3411
3440
|
}
|
|
3412
3441
|
}, [page, rowCount, pageSize, handlePageChange]);
|
|
3413
|
-
|
|
3442
|
+
useEffect6(() => {
|
|
3414
3443
|
onSelectionModelChangeRef.current?.([]);
|
|
3415
3444
|
setSelectionAnchor(null);
|
|
3416
3445
|
}, [page]);
|
|
3417
|
-
const prevRowsRef =
|
|
3418
|
-
|
|
3446
|
+
const prevRowsRef = useRef6(_rows);
|
|
3447
|
+
useEffect6(() => {
|
|
3419
3448
|
if (prevRowsRef.current !== _rows) {
|
|
3420
3449
|
setSelectionAnchor(null);
|
|
3421
3450
|
prevRowsRef.current = _rows;
|
|
@@ -3434,8 +3463,8 @@ function useDataTableRenderer({
|
|
|
3434
3463
|
handleSortChange,
|
|
3435
3464
|
isAllSelected,
|
|
3436
3465
|
isTotalSelected,
|
|
3437
|
-
isSelectedRow:
|
|
3438
|
-
isRowSelectable:
|
|
3466
|
+
isSelectedRow: useCallback10((model) => selectedModelSet.has(model), [selectedModelSet]),
|
|
3467
|
+
isRowSelectable: useCallback10(
|
|
3439
3468
|
(rowId, row) => {
|
|
3440
3469
|
if (!isRowSelectable) return true;
|
|
3441
3470
|
return isRowSelectable({ row, id: rowId });
|
|
@@ -3443,13 +3472,13 @@ function useDataTableRenderer({
|
|
|
3443
3472
|
[isRowSelectable]
|
|
3444
3473
|
),
|
|
3445
3474
|
focusedRowId,
|
|
3446
|
-
onRowFocus:
|
|
3475
|
+
onRowFocus: useCallback10((rowId) => {
|
|
3447
3476
|
setFocusedRowId(rowId);
|
|
3448
3477
|
}, []),
|
|
3449
|
-
onAllCheckboxChange:
|
|
3478
|
+
onAllCheckboxChange: useCallback10(() => {
|
|
3450
3479
|
onSelectionModelChange?.(isAllSelected ? [] : selectableDataInPage.map(getId));
|
|
3451
3480
|
}, [isAllSelected, selectableDataInPage, onSelectionModelChange, getId]),
|
|
3452
|
-
onCheckboxChange:
|
|
3481
|
+
onCheckboxChange: useCallback10(
|
|
3453
3482
|
(event, selectedModel) => {
|
|
3454
3483
|
const isShiftClick = "shiftKey" in event && event.shiftKey;
|
|
3455
3484
|
const rowIndex = dataInPage.findIndex((row, i) => getId(row, i) === selectedModel);
|
|
@@ -3482,7 +3511,7 @@ function useDataTableRenderer({
|
|
|
3482
3511
|
),
|
|
3483
3512
|
columns,
|
|
3484
3513
|
processedColumnGroups,
|
|
3485
|
-
onTotalSelect:
|
|
3514
|
+
onTotalSelect: useCallback10(() => {
|
|
3486
3515
|
const selectableRows = rows.filter((row, i) => {
|
|
3487
3516
|
if (!isRowSelectable) return true;
|
|
3488
3517
|
return isRowSelectable({ row, id: getId(row, i) });
|
|
@@ -3567,7 +3596,7 @@ function TableBody(props) {
|
|
|
3567
3596
|
TableBody.displayName = "TableBody";
|
|
3568
3597
|
|
|
3569
3598
|
// src/components/Pagination/Pagination.tsx
|
|
3570
|
-
import React24, { useCallback as
|
|
3599
|
+
import React24, { useCallback as useCallback11, useEffect as useEffect7 } from "react";
|
|
3571
3600
|
import PreviousIcon from "@mui/icons-material/ChevronLeftRounded";
|
|
3572
3601
|
import NextIcon from "@mui/icons-material/ChevronRightRounded";
|
|
3573
3602
|
import FirstPageIcon from "@mui/icons-material/FirstPageRounded";
|
|
@@ -3636,7 +3665,7 @@ function Pagination(props) {
|
|
|
3636
3665
|
const [paginationModel, setPaginationModel] = useControlledState(
|
|
3637
3666
|
_paginationModel,
|
|
3638
3667
|
defaultPaginationModel,
|
|
3639
|
-
|
|
3668
|
+
useCallback11(
|
|
3640
3669
|
(newPage) => {
|
|
3641
3670
|
onPageChange(newPage.page);
|
|
3642
3671
|
},
|
|
@@ -3652,7 +3681,7 @@ function Pagination(props) {
|
|
|
3652
3681
|
const afterPages = [paginationModel.page + 1, paginationModel.page + 2].filter((p) => p <= lastPage - 1);
|
|
3653
3682
|
const isMoreAfterPages = lastPage > 1 && paginationModel.page < lastPage - 3;
|
|
3654
3683
|
const isMoreBeforePages = lastPage > 1 && paginationModel.page > 4;
|
|
3655
|
-
|
|
3684
|
+
useEffect7(() => {
|
|
3656
3685
|
if (paginationModel.page > lastPage) {
|
|
3657
3686
|
setPaginationModel({ ...paginationModel, page: lastPage });
|
|
3658
3687
|
}
|
|
@@ -3835,8 +3864,8 @@ function Component(props, apiRef) {
|
|
|
3835
3864
|
...innerProps
|
|
3836
3865
|
} = props;
|
|
3837
3866
|
const tableId = useId();
|
|
3838
|
-
const parentRef =
|
|
3839
|
-
const tableBodyRef =
|
|
3867
|
+
const parentRef = useRef7(null);
|
|
3868
|
+
const tableBodyRef = useRef7(null);
|
|
3840
3869
|
const {
|
|
3841
3870
|
columns,
|
|
3842
3871
|
processedColumnGroups,
|
|
@@ -3873,20 +3902,20 @@ function Component(props, apiRef) {
|
|
|
3873
3902
|
const paginationModel = useMemo10(() => ({ page, pageSize }), [page, pageSize]);
|
|
3874
3903
|
const totalSize = virtualizer.getTotalSize();
|
|
3875
3904
|
const virtualizedItems = virtualizer.getVirtualItems();
|
|
3876
|
-
const getRowClickHandler =
|
|
3905
|
+
const getRowClickHandler = useCallback12(
|
|
3877
3906
|
(row, rowId) => (e) => {
|
|
3878
3907
|
onRowClick?.({ row, rowId }, e);
|
|
3879
3908
|
checkboxSelection && !disableSelectionOnClick && isRowSelectableCheck(rowId, row) && onCheckboxChange(e, rowId);
|
|
3880
3909
|
},
|
|
3881
3910
|
[onRowClick, checkboxSelection, disableSelectionOnClick, onCheckboxChange, isRowSelectableCheck]
|
|
3882
3911
|
);
|
|
3883
|
-
const getRowFocusHandler =
|
|
3912
|
+
const getRowFocusHandler = useCallback12(
|
|
3884
3913
|
(rowId) => () => {
|
|
3885
3914
|
onRowFocus(rowId);
|
|
3886
3915
|
},
|
|
3887
3916
|
[onRowFocus]
|
|
3888
3917
|
);
|
|
3889
|
-
const getCheckboxClickHandler =
|
|
3918
|
+
const getCheckboxClickHandler = useCallback12(
|
|
3890
3919
|
(rowId, row) => (e) => {
|
|
3891
3920
|
e.stopPropagation();
|
|
3892
3921
|
if (isRowSelectableCheck(rowId, row)) {
|
|
@@ -3896,7 +3925,7 @@ function Component(props, apiRef) {
|
|
|
3896
3925
|
},
|
|
3897
3926
|
[onCheckboxChange, isRowSelectableCheck, onRowFocus]
|
|
3898
3927
|
);
|
|
3899
|
-
const handleTableKeyDown =
|
|
3928
|
+
const handleTableKeyDown = useCallback12(
|
|
3900
3929
|
(e) => {
|
|
3901
3930
|
const supportedKeys = ["ArrowUp", "ArrowDown", " ", "Home", "End", "PageUp", "PageDown"];
|
|
3902
3931
|
if (!supportedKeys.includes(e.key)) return;
|
|
@@ -4238,7 +4267,7 @@ var DataTable = forwardRef7(Component);
|
|
|
4238
4267
|
DataTable.displayName = "DataTable";
|
|
4239
4268
|
|
|
4240
4269
|
// src/components/DateRangePicker/DateRangePicker.tsx
|
|
4241
|
-
import React26, { forwardRef as forwardRef8, useCallback as
|
|
4270
|
+
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";
|
|
4242
4271
|
import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
|
|
4243
4272
|
import CalendarTodayIcon2 from "@mui/icons-material/CalendarToday";
|
|
4244
4273
|
import { styled as styled14, useThemeProps as useThemeProps5 } from "@mui/joy";
|
|
@@ -4399,23 +4428,23 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4399
4428
|
readOnly,
|
|
4400
4429
|
...innerProps
|
|
4401
4430
|
} = props;
|
|
4402
|
-
const innerRef =
|
|
4403
|
-
const buttonRef =
|
|
4431
|
+
const innerRef = useRef8(null);
|
|
4432
|
+
const buttonRef = useRef8(null);
|
|
4404
4433
|
const [value, setValue] = useControlledState(
|
|
4405
4434
|
props.value,
|
|
4406
4435
|
props.defaultValue || "",
|
|
4407
|
-
|
|
4436
|
+
useCallback13((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
4408
4437
|
);
|
|
4409
|
-
const [displayValue, setDisplayValue] =
|
|
4438
|
+
const [displayValue, setDisplayValue] = useState10(
|
|
4410
4439
|
() => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
|
|
4411
4440
|
);
|
|
4412
|
-
const [anchorEl, setAnchorEl] =
|
|
4441
|
+
const [anchorEl, setAnchorEl] = useState10(null);
|
|
4413
4442
|
const open = Boolean(anchorEl);
|
|
4414
4443
|
const calendarValue = useMemo11(
|
|
4415
4444
|
() => value ? parseDates(value, format) : void 0,
|
|
4416
4445
|
[value, format]
|
|
4417
4446
|
);
|
|
4418
|
-
|
|
4447
|
+
useEffect8(() => {
|
|
4419
4448
|
if (value) {
|
|
4420
4449
|
try {
|
|
4421
4450
|
const dates = parseDates(value, format);
|
|
@@ -4427,13 +4456,13 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4427
4456
|
setDisplayValue("");
|
|
4428
4457
|
}
|
|
4429
4458
|
}, [displayFormat, value, format]);
|
|
4430
|
-
|
|
4459
|
+
useEffect8(() => {
|
|
4431
4460
|
if (!anchorEl) {
|
|
4432
4461
|
innerRef.current?.blur();
|
|
4433
4462
|
}
|
|
4434
4463
|
}, [anchorEl, innerRef]);
|
|
4435
4464
|
useImperativeHandle3(ref, () => innerRef.current, [innerRef]);
|
|
4436
|
-
const handleChange =
|
|
4465
|
+
const handleChange = useCallback13(
|
|
4437
4466
|
(event) => {
|
|
4438
4467
|
const value2 = event.target.value;
|
|
4439
4468
|
setDisplayValue(value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2);
|
|
@@ -4441,7 +4470,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4441
4470
|
},
|
|
4442
4471
|
[displayFormat, format, setValue]
|
|
4443
4472
|
);
|
|
4444
|
-
const handleDisplayInputChange =
|
|
4473
|
+
const handleDisplayInputChange = useCallback13(
|
|
4445
4474
|
(event) => {
|
|
4446
4475
|
if (event.target.value === "") {
|
|
4447
4476
|
handleChange({
|
|
@@ -4466,14 +4495,14 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4466
4495
|
},
|
|
4467
4496
|
[displayFormat, format, handleChange, props.name]
|
|
4468
4497
|
);
|
|
4469
|
-
const handleCalendarToggle =
|
|
4498
|
+
const handleCalendarToggle = useCallback13(
|
|
4470
4499
|
(event) => {
|
|
4471
4500
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
4472
4501
|
innerRef.current?.focus();
|
|
4473
4502
|
},
|
|
4474
4503
|
[anchorEl, setAnchorEl, innerRef]
|
|
4475
4504
|
);
|
|
4476
|
-
const handleCalendarChange =
|
|
4505
|
+
const handleCalendarChange = useCallback13(
|
|
4477
4506
|
([date1, date2]) => {
|
|
4478
4507
|
if (!date1 || !date2) return;
|
|
4479
4508
|
const formattedValue = formatValueString2([date1, date2], format);
|
|
@@ -4487,7 +4516,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4487
4516
|
},
|
|
4488
4517
|
[props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat]
|
|
4489
4518
|
);
|
|
4490
|
-
const handleInputMouseDown =
|
|
4519
|
+
const handleInputMouseDown = useCallback13(
|
|
4491
4520
|
(event) => {
|
|
4492
4521
|
if (inputReadOnly) {
|
|
4493
4522
|
event.preventDefault();
|
|
@@ -4696,13 +4725,13 @@ var InsetDrawer = styled19(JoyDrawer)(({ theme }) => ({
|
|
|
4696
4725
|
}));
|
|
4697
4726
|
|
|
4698
4727
|
// src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
|
|
4699
|
-
import React30, { useCallback as
|
|
4728
|
+
import React30, { useCallback as useCallback14, useEffect as useEffect9, useMemo as useMemo12, useRef as useRef9, useState as useState11 } from "react";
|
|
4700
4729
|
import SearchIcon from "@mui/icons-material/Search";
|
|
4701
4730
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
4702
4731
|
function LabelWithTooltip(props) {
|
|
4703
4732
|
const { label, size } = props;
|
|
4704
|
-
const labelContentRef =
|
|
4705
|
-
const [isOverflowing, setIsOverflowing] =
|
|
4733
|
+
const labelContentRef = useRef9(null);
|
|
4734
|
+
const [isOverflowing, setIsOverflowing] = useState11(false);
|
|
4706
4735
|
const labelContent = /* @__PURE__ */ React30.createElement(
|
|
4707
4736
|
"span",
|
|
4708
4737
|
{
|
|
@@ -4719,7 +4748,7 @@ function LabelWithTooltip(props) {
|
|
|
4719
4748
|
},
|
|
4720
4749
|
label
|
|
4721
4750
|
);
|
|
4722
|
-
|
|
4751
|
+
useEffect9(() => {
|
|
4723
4752
|
const element = labelContentRef.current;
|
|
4724
4753
|
if (element) {
|
|
4725
4754
|
setIsOverflowing(element.scrollWidth > element.clientWidth);
|
|
@@ -4743,16 +4772,16 @@ function FilterableCheckboxGroup(props) {
|
|
|
4743
4772
|
maxHeight = 300,
|
|
4744
4773
|
disabled
|
|
4745
4774
|
} = props;
|
|
4746
|
-
const [searchTerm, setSearchTerm] =
|
|
4747
|
-
const [sortedOptions, setSortedOptions] =
|
|
4775
|
+
const [searchTerm, setSearchTerm] = useState11("");
|
|
4776
|
+
const [sortedOptions, setSortedOptions] = useState11(options);
|
|
4748
4777
|
const [internalValue, setInternalValue] = useControlledState(
|
|
4749
4778
|
value,
|
|
4750
4779
|
value ?? [],
|
|
4751
|
-
|
|
4780
|
+
useCallback14((newValue) => onChange?.(newValue), [onChange])
|
|
4752
4781
|
);
|
|
4753
|
-
const parentRef =
|
|
4754
|
-
const isInitialSortRef =
|
|
4755
|
-
const prevOptionsRef =
|
|
4782
|
+
const parentRef = useRef9(null);
|
|
4783
|
+
const isInitialSortRef = useRef9(false);
|
|
4784
|
+
const prevOptionsRef = useRef9([...options]);
|
|
4756
4785
|
const filteredOptions = useMemo12(() => {
|
|
4757
4786
|
if (!searchTerm) return sortedOptions;
|
|
4758
4787
|
return sortedOptions.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
@@ -4775,7 +4804,7 @@ function FilterableCheckboxGroup(props) {
|
|
|
4775
4804
|
overscan: 5
|
|
4776
4805
|
});
|
|
4777
4806
|
const items = virtualizer.getVirtualItems();
|
|
4778
|
-
|
|
4807
|
+
useEffect9(() => {
|
|
4779
4808
|
const optionsChanged = prevOptionsRef.current.length !== options.length || prevOptionsRef.current.some(
|
|
4780
4809
|
(prevOption, index) => prevOption.value !== options[index]?.value || prevOption.label !== options[index]?.label || prevOption.disabled !== options[index]?.disabled
|
|
4781
4810
|
);
|
|
@@ -4801,13 +4830,13 @@ function FilterableCheckboxGroup(props) {
|
|
|
4801
4830
|
}
|
|
4802
4831
|
}
|
|
4803
4832
|
}, [options, value]);
|
|
4804
|
-
|
|
4833
|
+
useEffect9(() => {
|
|
4805
4834
|
virtualizer.measure();
|
|
4806
4835
|
}, [virtualizer, filteredOptions, size]);
|
|
4807
|
-
const handleSearchChange =
|
|
4836
|
+
const handleSearchChange = useCallback14((event) => {
|
|
4808
4837
|
setSearchTerm(event.target.value);
|
|
4809
4838
|
}, []);
|
|
4810
|
-
const handleCheckboxChange =
|
|
4839
|
+
const handleCheckboxChange = useCallback14(
|
|
4811
4840
|
(optionValue) => (event) => {
|
|
4812
4841
|
const checked = event.target.checked;
|
|
4813
4842
|
const newValue = checked ? [...internalValue, optionValue] : internalValue.filter((v) => v !== optionValue);
|
|
@@ -4815,7 +4844,7 @@ function FilterableCheckboxGroup(props) {
|
|
|
4815
4844
|
},
|
|
4816
4845
|
[internalValue, setInternalValue]
|
|
4817
4846
|
);
|
|
4818
|
-
const handleSelectAll =
|
|
4847
|
+
const handleSelectAll = useCallback14(
|
|
4819
4848
|
(event) => {
|
|
4820
4849
|
const checked = event.target.checked;
|
|
4821
4850
|
const enabledOptions = filteredOptions.filter((option) => !option.disabled);
|
|
@@ -4919,16 +4948,16 @@ function FilterableCheckboxGroup(props) {
|
|
|
4919
4948
|
FilterableCheckboxGroup.displayName = "FilterableCheckboxGroup";
|
|
4920
4949
|
|
|
4921
4950
|
// src/components/FilterMenu/FilterMenu.tsx
|
|
4922
|
-
import React41, { useCallback as
|
|
4951
|
+
import React41, { useCallback as useCallback24 } from "react";
|
|
4923
4952
|
import { Button as Button2, Stack as Stack11 } from "@mui/joy";
|
|
4924
4953
|
|
|
4925
4954
|
// src/components/FilterMenu/components/CheckboxGroup.tsx
|
|
4926
|
-
import React31, { useCallback as
|
|
4955
|
+
import React31, { useCallback as useCallback15 } from "react";
|
|
4927
4956
|
import { Stack as Stack2 } from "@mui/joy";
|
|
4928
4957
|
function CheckboxGroup(props) {
|
|
4929
4958
|
const { id, label, options, value, onChange, hidden } = props;
|
|
4930
4959
|
const [internalValue, setInternalValue] = useControlledState(value, [], onChange);
|
|
4931
|
-
const handleCheckboxChange =
|
|
4960
|
+
const handleCheckboxChange = useCallback15(
|
|
4932
4961
|
(optionValue) => (event) => {
|
|
4933
4962
|
const checked = event.target.checked;
|
|
4934
4963
|
let newValue;
|
|
@@ -4957,12 +4986,12 @@ function CheckboxGroup(props) {
|
|
|
4957
4986
|
CheckboxGroup.displayName = "CheckboxGroup";
|
|
4958
4987
|
|
|
4959
4988
|
// src/components/FilterMenu/components/FilterableCheckboxGroup.tsx
|
|
4960
|
-
import React32, { useCallback as
|
|
4989
|
+
import React32, { useCallback as useCallback16 } from "react";
|
|
4961
4990
|
import { Stack as Stack3 } from "@mui/joy";
|
|
4962
4991
|
function FilterableCheckboxGroup2(props) {
|
|
4963
4992
|
const { id, label, options, value, onChange, hidden, placeholder, maxHeight } = props;
|
|
4964
4993
|
const [internalValue, setInternalValue] = useControlledState(value, [], onChange);
|
|
4965
|
-
const handleChange =
|
|
4994
|
+
const handleChange = useCallback16(
|
|
4966
4995
|
(newValue) => {
|
|
4967
4996
|
setInternalValue(newValue);
|
|
4968
4997
|
},
|
|
@@ -4986,7 +5015,7 @@ function FilterableCheckboxGroup2(props) {
|
|
|
4986
5015
|
FilterableCheckboxGroup2.displayName = "FilterableCheckboxGroup";
|
|
4987
5016
|
|
|
4988
5017
|
// src/components/FilterMenu/components/RadioGroup.tsx
|
|
4989
|
-
import React33, { useCallback as
|
|
5018
|
+
import React33, { useCallback as useCallback17 } from "react";
|
|
4990
5019
|
|
|
4991
5020
|
// src/components/Radio/Radio.tsx
|
|
4992
5021
|
import { Radio as JoyRadio, RadioGroup as JoyRadioGroup } from "@mui/joy";
|
|
@@ -5003,7 +5032,7 @@ import { Stack as Stack4 } from "@mui/joy";
|
|
|
5003
5032
|
function RadioGroup2(props) {
|
|
5004
5033
|
const { id, label, options, value, onChange, hidden } = props;
|
|
5005
5034
|
const [internalValue, setInternalValue] = useControlledState(value, value ?? "", onChange);
|
|
5006
|
-
const handleRadioChange =
|
|
5035
|
+
const handleRadioChange = useCallback17(
|
|
5007
5036
|
(event) => {
|
|
5008
5037
|
const newValue = event.target.value;
|
|
5009
5038
|
const option = options.find((opt) => opt.value.toString() === newValue);
|
|
@@ -5020,7 +5049,7 @@ function RadioGroup2(props) {
|
|
|
5020
5049
|
RadioGroup2.displayName = "RadioGroup";
|
|
5021
5050
|
|
|
5022
5051
|
// src/components/FilterMenu/components/DateRange.tsx
|
|
5023
|
-
import React34, { useCallback as
|
|
5052
|
+
import React34, { useCallback as useCallback18, useMemo as useMemo13, useState as useState12, useEffect as useEffect10 } from "react";
|
|
5024
5053
|
import { Stack as Stack5 } from "@mui/joy";
|
|
5025
5054
|
function DateRange(props) {
|
|
5026
5055
|
const {
|
|
@@ -5038,7 +5067,7 @@ function DateRange(props) {
|
|
|
5038
5067
|
hideClearButton
|
|
5039
5068
|
} = props;
|
|
5040
5069
|
const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
|
|
5041
|
-
const [selectedOption, setSelectedOption] =
|
|
5070
|
+
const [selectedOption, setSelectedOption] = useState12("all-time");
|
|
5042
5071
|
const dateRangeOptions = useMemo13(
|
|
5043
5072
|
() => [
|
|
5044
5073
|
{ label: "All Time", value: "all-time" },
|
|
@@ -5049,7 +5078,7 @@ function DateRange(props) {
|
|
|
5049
5078
|
],
|
|
5050
5079
|
[]
|
|
5051
5080
|
);
|
|
5052
|
-
const getDateRangeForOption =
|
|
5081
|
+
const getDateRangeForOption = useCallback18(
|
|
5053
5082
|
(option) => {
|
|
5054
5083
|
const now = /* @__PURE__ */ new Date();
|
|
5055
5084
|
const currentYear = now.getFullYear();
|
|
@@ -5088,7 +5117,7 @@ function DateRange(props) {
|
|
|
5088
5117
|
},
|
|
5089
5118
|
[internalValue]
|
|
5090
5119
|
);
|
|
5091
|
-
const determineOptionFromValue =
|
|
5120
|
+
const determineOptionFromValue = useCallback18(
|
|
5092
5121
|
(value2) => {
|
|
5093
5122
|
if (!value2) {
|
|
5094
5123
|
return "all-time";
|
|
@@ -5110,11 +5139,11 @@ function DateRange(props) {
|
|
|
5110
5139
|
}
|
|
5111
5140
|
return "";
|
|
5112
5141
|
}, [selectedOption, internalValue]);
|
|
5113
|
-
|
|
5142
|
+
useEffect10(() => {
|
|
5114
5143
|
const newOption = determineOptionFromValue(internalValue);
|
|
5115
5144
|
setSelectedOption(newOption);
|
|
5116
5145
|
}, [internalValue, determineOptionFromValue]);
|
|
5117
|
-
const handleOptionChange =
|
|
5146
|
+
const handleOptionChange = useCallback18(
|
|
5118
5147
|
(event) => {
|
|
5119
5148
|
const newOption = event.target.value;
|
|
5120
5149
|
setSelectedOption(newOption);
|
|
@@ -5123,7 +5152,7 @@ function DateRange(props) {
|
|
|
5123
5152
|
},
|
|
5124
5153
|
[getDateRangeForOption, setInternalValue]
|
|
5125
5154
|
);
|
|
5126
|
-
const handleCustomDateChange =
|
|
5155
|
+
const handleCustomDateChange = useCallback18(
|
|
5127
5156
|
(event) => {
|
|
5128
5157
|
const dateRangeString = event.target.value;
|
|
5129
5158
|
if (dateRangeString && dateRangeString.includes(" - ")) {
|
|
@@ -5163,12 +5192,12 @@ function DateRange(props) {
|
|
|
5163
5192
|
DateRange.displayName = "DateRange";
|
|
5164
5193
|
|
|
5165
5194
|
// src/components/FilterMenu/components/CurrencyInput.tsx
|
|
5166
|
-
import React35, { useCallback as
|
|
5195
|
+
import React35, { useCallback as useCallback19 } from "react";
|
|
5167
5196
|
import { Stack as Stack6 } from "@mui/joy";
|
|
5168
5197
|
function CurrencyInput3(props) {
|
|
5169
5198
|
const { id, label, value, onChange, hidden, max, placeholder, useMinorUnit, currency = "USD" } = props;
|
|
5170
5199
|
const [internalValue, setInternalValue] = useControlledState(value, value, onChange);
|
|
5171
|
-
const handleCurrencyChange =
|
|
5200
|
+
const handleCurrencyChange = useCallback19(
|
|
5172
5201
|
(event) => {
|
|
5173
5202
|
const newValue = event.target.value;
|
|
5174
5203
|
setInternalValue(newValue);
|
|
@@ -5194,14 +5223,14 @@ function CurrencyInput3(props) {
|
|
|
5194
5223
|
CurrencyInput3.displayName = "CurrencyInput";
|
|
5195
5224
|
|
|
5196
5225
|
// src/components/FilterMenu/components/CurrencyRange.tsx
|
|
5197
|
-
import React36, { useCallback as
|
|
5226
|
+
import React36, { useCallback as useCallback20 } from "react";
|
|
5198
5227
|
import { Stack as Stack7 } from "@mui/joy";
|
|
5199
5228
|
function CurrencyRange(props) {
|
|
5200
5229
|
const { id, label, value, onChange, hidden, max, placeholder, useMinorUnit, currency = "USD" } = props;
|
|
5201
5230
|
const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
|
|
5202
5231
|
const minValue = internalValue?.[0];
|
|
5203
5232
|
const maxValue = internalValue?.[1];
|
|
5204
|
-
const handleMinChange =
|
|
5233
|
+
const handleMinChange = useCallback20(
|
|
5205
5234
|
(event) => {
|
|
5206
5235
|
const newMinValue = event.target.value;
|
|
5207
5236
|
const currentMaxValue = maxValue;
|
|
@@ -5215,7 +5244,7 @@ function CurrencyRange(props) {
|
|
|
5215
5244
|
},
|
|
5216
5245
|
[maxValue, setInternalValue]
|
|
5217
5246
|
);
|
|
5218
|
-
const handleMaxChange =
|
|
5247
|
+
const handleMaxChange = useCallback20(
|
|
5219
5248
|
(event) => {
|
|
5220
5249
|
const newMaxValue = event.target.value;
|
|
5221
5250
|
const currentMinValue = minValue;
|
|
@@ -5267,7 +5296,7 @@ import React38 from "react";
|
|
|
5267
5296
|
import { Stack as Stack8, Typography as Typography4 } from "@mui/joy";
|
|
5268
5297
|
|
|
5269
5298
|
// src/components/PercentageInput/PercentageInput.tsx
|
|
5270
|
-
import React37, { useCallback as
|
|
5299
|
+
import React37, { useCallback as useCallback21, useMemo as useMemo14, useState as useState13 } from "react";
|
|
5271
5300
|
import { NumericFormat as NumericFormat2 } from "react-number-format";
|
|
5272
5301
|
import { styled as styled20, useThemeProps as useThemeProps6 } from "@mui/joy";
|
|
5273
5302
|
var padDecimal = (value, decimalScale) => {
|
|
@@ -5324,9 +5353,9 @@ var PercentageInput = React37.forwardRef(
|
|
|
5324
5353
|
const [_value, setValue] = useControlledState(
|
|
5325
5354
|
props.value,
|
|
5326
5355
|
props.defaultValue,
|
|
5327
|
-
|
|
5356
|
+
useCallback21((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
|
|
5328
5357
|
);
|
|
5329
|
-
const [internalError, setInternalError] =
|
|
5358
|
+
const [internalError, setInternalError] = useState13(
|
|
5330
5359
|
max && _value && _value > max || min && _value && _value < min
|
|
5331
5360
|
);
|
|
5332
5361
|
const value = useMemo14(() => {
|
|
@@ -5335,7 +5364,7 @@ var PercentageInput = React37.forwardRef(
|
|
|
5335
5364
|
}
|
|
5336
5365
|
return _value;
|
|
5337
5366
|
}, [_value, useMinorUnit, maxDecimalScale]);
|
|
5338
|
-
const handleChange =
|
|
5367
|
+
const handleChange = useCallback21(
|
|
5339
5368
|
(event) => {
|
|
5340
5369
|
if (event.target.value === "") {
|
|
5341
5370
|
setValue(void 0);
|
|
@@ -5414,7 +5443,7 @@ var PercentageInput3 = ({
|
|
|
5414
5443
|
};
|
|
5415
5444
|
|
|
5416
5445
|
// src/components/FilterMenu/components/PercentageRange.tsx
|
|
5417
|
-
import React39, { useCallback as
|
|
5446
|
+
import React39, { useCallback as useCallback22 } from "react";
|
|
5418
5447
|
import { Stack as Stack9 } from "@mui/joy";
|
|
5419
5448
|
function PercentageRange(props) {
|
|
5420
5449
|
const { id, label, value, onChange, hidden, useMinorUnit, maxDecimalScale, min, max } = props;
|
|
@@ -5425,7 +5454,7 @@ function PercentageRange(props) {
|
|
|
5425
5454
|
);
|
|
5426
5455
|
const minValue = internalValue?.[0];
|
|
5427
5456
|
const maxValue = internalValue?.[1];
|
|
5428
|
-
const handleMinChange =
|
|
5457
|
+
const handleMinChange = useCallback22(
|
|
5429
5458
|
(event) => {
|
|
5430
5459
|
const newMinValue = event.target.value;
|
|
5431
5460
|
const currentMaxValue = maxValue;
|
|
@@ -5437,7 +5466,7 @@ function PercentageRange(props) {
|
|
|
5437
5466
|
},
|
|
5438
5467
|
[maxValue, setInternalValue]
|
|
5439
5468
|
);
|
|
5440
|
-
const handleMaxChange =
|
|
5469
|
+
const handleMaxChange = useCallback22(
|
|
5441
5470
|
(event) => {
|
|
5442
5471
|
const newMaxValue = event.target.value;
|
|
5443
5472
|
const currentMinValue = minValue;
|
|
@@ -5485,13 +5514,13 @@ function PercentageRange(props) {
|
|
|
5485
5514
|
PercentageRange.displayName = "PercentageRange";
|
|
5486
5515
|
|
|
5487
5516
|
// src/components/FilterMenu/components/Autocomplete.tsx
|
|
5488
|
-
import React40, { useCallback as
|
|
5517
|
+
import React40, { useCallback as useCallback23 } from "react";
|
|
5489
5518
|
import { Stack as Stack10 } from "@mui/joy";
|
|
5490
5519
|
function Autocomplete2(props) {
|
|
5491
5520
|
const { id, label, value, onChange, options, multiple, hidden, placeholder } = props;
|
|
5492
5521
|
const [internalValue, setInternalValue] = useControlledState(value, void 0, onChange);
|
|
5493
5522
|
const autocompleteValue = typeof internalValue === "string" || typeof internalValue === "number" ? String(internalValue) : void 0;
|
|
5494
|
-
const handleChange =
|
|
5523
|
+
const handleChange = useCallback23(
|
|
5495
5524
|
(event) => {
|
|
5496
5525
|
const val = event.target.value;
|
|
5497
5526
|
if (val) {
|
|
@@ -5540,7 +5569,7 @@ function FilterMenu(props) {
|
|
|
5540
5569
|
void 0
|
|
5541
5570
|
// onChange는 Apply 버튼에서만 호출
|
|
5542
5571
|
);
|
|
5543
|
-
const handleFilterChange =
|
|
5572
|
+
const handleFilterChange = useCallback24(
|
|
5544
5573
|
(filterId, value) => {
|
|
5545
5574
|
setInternalValues((prev) => ({
|
|
5546
5575
|
...prev,
|
|
@@ -5549,11 +5578,11 @@ function FilterMenu(props) {
|
|
|
5549
5578
|
},
|
|
5550
5579
|
[setInternalValues]
|
|
5551
5580
|
);
|
|
5552
|
-
const handleApply =
|
|
5581
|
+
const handleApply = useCallback24(() => {
|
|
5553
5582
|
onChange?.(internalValues);
|
|
5554
5583
|
onClose?.();
|
|
5555
5584
|
}, [onChange, onClose, internalValues]);
|
|
5556
|
-
const handleClear =
|
|
5585
|
+
const handleClear = useCallback24(() => {
|
|
5557
5586
|
const clearedValues = resetValues || {};
|
|
5558
5587
|
setInternalValues(clearedValues);
|
|
5559
5588
|
onChange?.(clearedValues);
|
|
@@ -5589,7 +5618,7 @@ function FilterMenu(props) {
|
|
|
5589
5618
|
FilterMenu.displayName = "FilterMenu";
|
|
5590
5619
|
|
|
5591
5620
|
// src/components/Uploader/Uploader.tsx
|
|
5592
|
-
import React42, { useCallback as
|
|
5621
|
+
import React42, { useCallback as useCallback25, useEffect as useEffect11, useMemo as useMemo15, useRef as useRef10, useState as useState14 } from "react";
|
|
5593
5622
|
import { styled as styled21, Input as Input2 } from "@mui/joy";
|
|
5594
5623
|
import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
|
|
5595
5624
|
import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
|
|
@@ -5738,12 +5767,12 @@ var Uploader = React42.memo(
|
|
|
5738
5767
|
error: errorProp,
|
|
5739
5768
|
helperText: helperTextProp
|
|
5740
5769
|
} = props;
|
|
5741
|
-
const dropZoneRef =
|
|
5742
|
-
const inputRef =
|
|
5743
|
-
const [errorText, setErrorText] =
|
|
5744
|
-
const [files, setFiles] =
|
|
5745
|
-
const [uploaded, setUploaded] =
|
|
5746
|
-
const [previewState, setPreviewState] =
|
|
5770
|
+
const dropZoneRef = useRef10(null);
|
|
5771
|
+
const inputRef = useRef10(null);
|
|
5772
|
+
const [errorText, setErrorText] = useState14();
|
|
5773
|
+
const [files, setFiles] = useState14([]);
|
|
5774
|
+
const [uploaded, setUploaded] = useState14(props.uploaded || []);
|
|
5775
|
+
const [previewState, setPreviewState] = useState14("idle");
|
|
5747
5776
|
const accepts = useMemo15(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
|
|
5748
5777
|
const parsedAccepts = useMemo15(
|
|
5749
5778
|
() => accepts.flatMap((type) => {
|
|
@@ -5789,7 +5818,7 @@ var Uploader = React42.memo(
|
|
|
5789
5818
|
() => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
|
|
5790
5819
|
[files, maxCount, uploaded]
|
|
5791
5820
|
);
|
|
5792
|
-
const addFiles =
|
|
5821
|
+
const addFiles = useCallback25(
|
|
5793
5822
|
(uploads) => {
|
|
5794
5823
|
try {
|
|
5795
5824
|
const types = parsedAccepts.map((type) => type.replace(".", "")) || [];
|
|
@@ -5834,7 +5863,7 @@ var Uploader = React42.memo(
|
|
|
5834
5863
|
},
|
|
5835
5864
|
[files, uploaded, maxCount, parsedAccepts, maxFileSize, maxFileTotalSize, name, onChange]
|
|
5836
5865
|
);
|
|
5837
|
-
|
|
5866
|
+
useEffect11(() => {
|
|
5838
5867
|
if (!dropZoneRef.current || disabled) {
|
|
5839
5868
|
return;
|
|
5840
5869
|
}
|
|
@@ -5872,7 +5901,7 @@ var Uploader = React42.memo(
|
|
|
5872
5901
|
);
|
|
5873
5902
|
return () => cleanup?.();
|
|
5874
5903
|
}, [disabled, addFiles]);
|
|
5875
|
-
|
|
5904
|
+
useEffect11(() => {
|
|
5876
5905
|
if (inputRef.current && minCount) {
|
|
5877
5906
|
if (files.length < minCount) {
|
|
5878
5907
|
inputRef.current.setCustomValidity(`At least ${minCount} files are required.`);
|
|
@@ -5881,14 +5910,14 @@ var Uploader = React42.memo(
|
|
|
5881
5910
|
}
|
|
5882
5911
|
}
|
|
5883
5912
|
}, [inputRef, files, minCount]);
|
|
5884
|
-
const handleFileChanged =
|
|
5913
|
+
const handleFileChanged = useCallback25(
|
|
5885
5914
|
(event) => {
|
|
5886
5915
|
const files2 = Array.from(event.target.files || []);
|
|
5887
5916
|
addFiles(files2);
|
|
5888
5917
|
},
|
|
5889
5918
|
[addFiles]
|
|
5890
5919
|
);
|
|
5891
|
-
const handleDeleteFile =
|
|
5920
|
+
const handleDeleteFile = useCallback25(
|
|
5892
5921
|
(deletedFile) => {
|
|
5893
5922
|
if (deletedFile instanceof File) {
|
|
5894
5923
|
setFiles((current) => {
|
|
@@ -5908,7 +5937,7 @@ var Uploader = React42.memo(
|
|
|
5908
5937
|
},
|
|
5909
5938
|
[name, onChange, onDelete]
|
|
5910
5939
|
);
|
|
5911
|
-
const handleUploaderButtonClick =
|
|
5940
|
+
const handleUploaderButtonClick = useCallback25(() => {
|
|
5912
5941
|
inputRef.current?.click();
|
|
5913
5942
|
}, []);
|
|
5914
5943
|
const uploader = /* @__PURE__ */ React42.createElement(
|
|
@@ -6003,16 +6032,16 @@ function IconMenuButton(props) {
|
|
|
6003
6032
|
IconMenuButton.displayName = "IconMenuButton";
|
|
6004
6033
|
|
|
6005
6034
|
// src/components/Markdown/Markdown.tsx
|
|
6006
|
-
import React44, { lazy, Suspense, useEffect as
|
|
6035
|
+
import React44, { lazy, Suspense, useEffect as useEffect12, useState as useState15 } from "react";
|
|
6007
6036
|
import { Skeleton } from "@mui/joy";
|
|
6008
6037
|
import { Link as Link2 } from "@mui/joy";
|
|
6009
6038
|
import remarkGfm from "remark-gfm";
|
|
6010
6039
|
var LazyReactMarkdown = lazy(() => import("react-markdown"));
|
|
6011
6040
|
var Markdown = (props) => {
|
|
6012
|
-
const [
|
|
6013
|
-
|
|
6041
|
+
const [rehypeAccent, setRehypeAccent] = useState15(null);
|
|
6042
|
+
useEffect12(() => {
|
|
6014
6043
|
const loadRehypeAccent = async () => {
|
|
6015
|
-
const module = await
|
|
6044
|
+
const module = await import("./chunks/rehype-accent-FZRUD7VI.js");
|
|
6016
6045
|
setRehypeAccent(() => module.rehypeAccent);
|
|
6017
6046
|
};
|
|
6018
6047
|
loadRehypeAccent();
|
|
@@ -6029,7 +6058,7 @@ var Markdown = (props) => {
|
|
|
6029
6058
|
fallback,
|
|
6030
6059
|
...innerProps
|
|
6031
6060
|
} = props;
|
|
6032
|
-
if (!
|
|
6061
|
+
if (!rehypeAccent) {
|
|
6033
6062
|
return null;
|
|
6034
6063
|
}
|
|
6035
6064
|
return /* @__PURE__ */ React44.createElement(Typography, { component: "div", color, textColor, level: defaultLevel, ...innerProps }, /* @__PURE__ */ React44.createElement(
|
|
@@ -6042,7 +6071,7 @@ var Markdown = (props) => {
|
|
|
6042
6071
|
{
|
|
6043
6072
|
...markdownOptions,
|
|
6044
6073
|
children: content,
|
|
6045
|
-
rehypePlugins: [[
|
|
6074
|
+
rehypePlugins: [[rehypeAccent, { accentColor }]],
|
|
6046
6075
|
remarkPlugins: [remarkGfm],
|
|
6047
6076
|
components: {
|
|
6048
6077
|
a: ({ children, href }) => /* @__PURE__ */ React44.createElement(Link2, { href, target: defaultLinkAction }, children),
|
|
@@ -6184,7 +6213,7 @@ function MenuButton(props) {
|
|
|
6184
6213
|
MenuButton.displayName = "MenuButton";
|
|
6185
6214
|
|
|
6186
6215
|
// src/components/MonthPicker/MonthPicker.tsx
|
|
6187
|
-
import React46, { forwardRef as forwardRef9, useCallback as
|
|
6216
|
+
import React46, { forwardRef as forwardRef9, useCallback as useCallback26, useEffect as useEffect13, useImperativeHandle as useImperativeHandle4, useRef as useRef11, useState as useState16 } from "react";
|
|
6188
6217
|
import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
|
|
6189
6218
|
import { styled as styled22, useThemeProps as useThemeProps7 } from "@mui/joy";
|
|
6190
6219
|
import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
|
|
@@ -6266,14 +6295,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
6266
6295
|
locale,
|
|
6267
6296
|
...innerProps
|
|
6268
6297
|
} = props;
|
|
6269
|
-
const innerRef =
|
|
6270
|
-
const buttonRef =
|
|
6298
|
+
const innerRef = useRef11(null);
|
|
6299
|
+
const buttonRef = useRef11(null);
|
|
6271
6300
|
const [value, setValue, isControlled] = useControlledState(
|
|
6272
6301
|
props.value,
|
|
6273
6302
|
props.defaultValue || "",
|
|
6274
|
-
|
|
6303
|
+
useCallback26((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
6275
6304
|
);
|
|
6276
|
-
const getFormattedDisplayValue =
|
|
6305
|
+
const getFormattedDisplayValue = useCallback26(
|
|
6277
6306
|
(inputValue) => {
|
|
6278
6307
|
if (!inputValue) return "";
|
|
6279
6308
|
try {
|
|
@@ -6284,19 +6313,19 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
6284
6313
|
},
|
|
6285
6314
|
[format, displayFormat, locale]
|
|
6286
6315
|
);
|
|
6287
|
-
const [displayValue, setDisplayValue] =
|
|
6288
|
-
const [anchorEl, setAnchorEl] =
|
|
6316
|
+
const [displayValue, setDisplayValue] = useState16(() => getFormattedDisplayValue(value));
|
|
6317
|
+
const [anchorEl, setAnchorEl] = useState16(null);
|
|
6289
6318
|
const open = Boolean(anchorEl);
|
|
6290
|
-
|
|
6319
|
+
useEffect13(() => {
|
|
6291
6320
|
if (!anchorEl) {
|
|
6292
6321
|
innerRef.current?.blur();
|
|
6293
6322
|
}
|
|
6294
6323
|
}, [anchorEl, innerRef]);
|
|
6295
6324
|
useImperativeHandle4(ref, () => innerRef.current, [innerRef]);
|
|
6296
|
-
|
|
6325
|
+
useEffect13(() => {
|
|
6297
6326
|
setDisplayValue(getFormattedDisplayValue(value));
|
|
6298
6327
|
}, [value, getFormattedDisplayValue]);
|
|
6299
|
-
const handleChange =
|
|
6328
|
+
const handleChange = useCallback26(
|
|
6300
6329
|
(event) => {
|
|
6301
6330
|
const newValue = event.target.value;
|
|
6302
6331
|
setValue(newValue);
|
|
@@ -6306,14 +6335,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
6306
6335
|
},
|
|
6307
6336
|
[setValue, getFormattedDisplayValue, isControlled]
|
|
6308
6337
|
);
|
|
6309
|
-
const handleCalendarToggle =
|
|
6338
|
+
const handleCalendarToggle = useCallback26(
|
|
6310
6339
|
(event) => {
|
|
6311
6340
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
6312
6341
|
innerRef.current?.focus();
|
|
6313
6342
|
},
|
|
6314
6343
|
[anchorEl, setAnchorEl, innerRef]
|
|
6315
6344
|
);
|
|
6316
|
-
const handleInputMouseDown =
|
|
6345
|
+
const handleInputMouseDown = useCallback26(
|
|
6317
6346
|
(event) => {
|
|
6318
6347
|
event.preventDefault();
|
|
6319
6348
|
buttonRef.current?.focus();
|
|
@@ -6437,7 +6466,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
6437
6466
|
});
|
|
6438
6467
|
|
|
6439
6468
|
// src/components/MonthRangePicker/MonthRangePicker.tsx
|
|
6440
|
-
import React47, { forwardRef as forwardRef10, useCallback as
|
|
6469
|
+
import React47, { forwardRef as forwardRef10, useCallback as useCallback27, useEffect as useEffect14, useImperativeHandle as useImperativeHandle5, useMemo as useMemo16, useRef as useRef12, useState as useState17 } from "react";
|
|
6441
6470
|
import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
|
|
6442
6471
|
import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
|
|
6443
6472
|
import { styled as styled23, useThemeProps as useThemeProps8 } from "@mui/joy";
|
|
@@ -6545,35 +6574,35 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
|
6545
6574
|
size,
|
|
6546
6575
|
...innerProps
|
|
6547
6576
|
} = props;
|
|
6548
|
-
const innerRef =
|
|
6577
|
+
const innerRef = useRef12(null);
|
|
6549
6578
|
const [value, setValue] = useControlledState(
|
|
6550
6579
|
props.value,
|
|
6551
6580
|
props.defaultValue || "",
|
|
6552
|
-
|
|
6581
|
+
useCallback27((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
6553
6582
|
);
|
|
6554
|
-
const [anchorEl, setAnchorEl] =
|
|
6583
|
+
const [anchorEl, setAnchorEl] = useState17(null);
|
|
6555
6584
|
const open = Boolean(anchorEl);
|
|
6556
6585
|
const calendarValue = useMemo16(() => value ? parseDates2(value) : void 0, [value]);
|
|
6557
|
-
|
|
6586
|
+
useEffect14(() => {
|
|
6558
6587
|
if (!anchorEl) {
|
|
6559
6588
|
innerRef.current?.blur();
|
|
6560
6589
|
}
|
|
6561
6590
|
}, [anchorEl, innerRef]);
|
|
6562
6591
|
useImperativeHandle5(ref, () => innerRef.current, [innerRef]);
|
|
6563
|
-
const handleChange =
|
|
6592
|
+
const handleChange = useCallback27(
|
|
6564
6593
|
(event) => {
|
|
6565
6594
|
setValue(event.target.value);
|
|
6566
6595
|
},
|
|
6567
6596
|
[setValue]
|
|
6568
6597
|
);
|
|
6569
|
-
const handleCalendarToggle =
|
|
6598
|
+
const handleCalendarToggle = useCallback27(
|
|
6570
6599
|
(event) => {
|
|
6571
6600
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
6572
6601
|
innerRef.current?.focus();
|
|
6573
6602
|
},
|
|
6574
6603
|
[anchorEl, setAnchorEl, innerRef]
|
|
6575
6604
|
);
|
|
6576
|
-
const handleCalendarChange =
|
|
6605
|
+
const handleCalendarChange = useCallback27(
|
|
6577
6606
|
([date1, date2]) => {
|
|
6578
6607
|
if (!date1 || !date2) return;
|
|
6579
6608
|
setValue(formatValueString4([date1, date2], format));
|
|
@@ -6800,7 +6829,7 @@ function Navigator(props) {
|
|
|
6800
6829
|
Navigator.displayName = "Navigator";
|
|
6801
6830
|
|
|
6802
6831
|
// src/components/ProfileMenu/ProfileMenu.tsx
|
|
6803
|
-
import React51, { useCallback as
|
|
6832
|
+
import React51, { useCallback as useCallback28, useMemo as useMemo17 } from "react";
|
|
6804
6833
|
import { Dropdown as Dropdown2, ListDivider, menuItemClasses, styled as styled26, MenuButton as MenuButton2 } from "@mui/joy";
|
|
6805
6834
|
import { ClickAwayListener as ClickAwayListener5 } from "@mui/base";
|
|
6806
6835
|
import DropdownIcon from "@mui/icons-material/ArrowDropDown";
|
|
@@ -6852,7 +6881,7 @@ function ProfileMenu(props) {
|
|
|
6852
6881
|
const [open, setOpen] = useControlledState(
|
|
6853
6882
|
_open,
|
|
6854
6883
|
defaultOpen ?? false,
|
|
6855
|
-
|
|
6884
|
+
useCallback28((value) => onOpenChange?.(value), [onOpenChange])
|
|
6856
6885
|
);
|
|
6857
6886
|
return /* @__PURE__ */ React51.createElement(ClickAwayListener5, { onClickAway: () => setOpen(false) }, /* @__PURE__ */ React51.createElement("div", null, /* @__PURE__ */ React51.createElement(Dropdown2, { open }, /* @__PURE__ */ React51.createElement(
|
|
6858
6887
|
ProfileMenuButton,
|