@ceed/ads 1.29.1 → 1.30.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/CurrencyInput/CurrencyInput.d.ts +1 -1
- package/dist/components/CurrencyInput/hooks/use-currency-setting.d.ts +2 -2
- package/dist/components/ProfileMenu/ProfileMenu.d.ts +1 -1
- package/dist/components/SearchBar/SearchBar.d.ts +21 -0
- package/dist/components/SearchBar/index.d.ts +3 -0
- package/dist/components/data-display/Badge.md +39 -71
- package/dist/components/data-display/DataTable.md +1 -1
- package/dist/components/data-display/InfoSign.md +98 -74
- package/dist/components/data-display/Typography.md +97 -363
- package/dist/components/feedback/Dialog.md +62 -76
- package/dist/components/feedback/Modal.md +44 -259
- package/dist/components/feedback/llms.txt +0 -2
- package/dist/components/index.d.ts +2 -0
- package/dist/components/inputs/Autocomplete.md +107 -356
- package/dist/components/inputs/ButtonGroup.md +106 -115
- package/dist/components/inputs/Calendar.md +459 -98
- package/dist/components/inputs/CurrencyInput.md +5 -183
- package/dist/components/inputs/DatePicker.md +431 -108
- package/dist/components/inputs/DateRangePicker.md +492 -131
- package/dist/components/inputs/FilterMenu.md +19 -169
- package/dist/components/inputs/FilterableCheckboxGroup.md +23 -123
- package/dist/components/inputs/IconButton.md +88 -137
- package/dist/components/inputs/Input.md +0 -5
- package/dist/components/inputs/MonthPicker.md +422 -95
- package/dist/components/inputs/MonthRangePicker.md +466 -89
- package/dist/components/inputs/PercentageInput.md +16 -185
- package/dist/components/inputs/RadioButton.md +35 -163
- package/dist/components/inputs/RadioTileGroup.md +61 -150
- package/dist/components/inputs/SearchBar.md +44 -0
- package/dist/components/inputs/Select.md +326 -222
- package/dist/components/inputs/Switch.md +376 -136
- package/dist/components/inputs/Textarea.md +10 -213
- package/dist/components/inputs/Uploader/Uploader.md +66 -145
- package/dist/components/inputs/llms.txt +1 -3
- package/dist/components/navigation/Breadcrumbs.md +322 -80
- package/dist/components/navigation/Dropdown.md +221 -92
- package/dist/components/navigation/IconMenuButton.md +502 -40
- package/dist/components/navigation/InsetDrawer.md +738 -68
- package/dist/components/navigation/Link.md +298 -39
- package/dist/components/navigation/Menu.md +285 -92
- package/dist/components/navigation/MenuButton.md +448 -55
- package/dist/components/navigation/Pagination.md +338 -47
- package/dist/components/navigation/ProfileMenu.md +268 -45
- package/dist/components/navigation/Stepper.md +28 -160
- package/dist/components/navigation/Tabs.md +316 -57
- package/dist/components/surfaces/Sheet.md +334 -151
- package/dist/index.browser.js +15 -13
- package/dist/index.browser.js.map +4 -4
- package/dist/index.cjs +289 -288
- package/dist/index.d.ts +1 -1
- package/dist/index.js +426 -369
- package/dist/llms.txt +1 -8
- package/framer/index.js +1 -1
- package/package.json +16 -15
- package/dist/chunks/rehype-accent-FZRUD7VI.js +0 -39
- package/dist/components/feedback/CircularProgress.md +0 -257
- package/dist/components/feedback/Skeleton.md +0 -280
- package/dist/components/inputs/FormControl.md +0 -361
- package/dist/components/inputs/RadioList.md +0 -241
- package/dist/components/inputs/Slider.md +0 -334
- package/dist/guides/ThemeProvider.md +0 -116
- package/dist/guides/llms.txt +0 -9
package/dist/index.js
CHANGED
|
@@ -1,3 +1,59 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
3
|
+
var __esm = (fn, res) => function __init() {
|
|
4
|
+
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
5
|
+
};
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
// src/libs/rehype-accent/index.ts
|
|
12
|
+
var rehype_accent_exports = {};
|
|
13
|
+
__export(rehype_accent_exports, {
|
|
14
|
+
rehypeAccent: () => rehypeAccent
|
|
15
|
+
});
|
|
16
|
+
import { visit } from "unist-util-visit";
|
|
17
|
+
function rehypeAccent(options) {
|
|
18
|
+
const { accentColor } = options;
|
|
19
|
+
return (tree) => {
|
|
20
|
+
visit(tree, "text", (node, index, parent) => {
|
|
21
|
+
const value = node.value;
|
|
22
|
+
const regex = /\|\|.*?\|\|/g;
|
|
23
|
+
let match;
|
|
24
|
+
let lastIndex = 0;
|
|
25
|
+
const newNodes = [];
|
|
26
|
+
while ((match = regex.exec(value)) !== null) {
|
|
27
|
+
if (match.index > lastIndex) {
|
|
28
|
+
newNodes.push({
|
|
29
|
+
type: "text",
|
|
30
|
+
value: value.slice(lastIndex, match.index)
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
const innerText = match[0].split("||")[1];
|
|
34
|
+
newNodes.push({
|
|
35
|
+
type: "element",
|
|
36
|
+
tagName: "span",
|
|
37
|
+
properties: { textColor: accentColor },
|
|
38
|
+
children: [{ type: "text", value: innerText }]
|
|
39
|
+
});
|
|
40
|
+
lastIndex = match.index + match[0].length;
|
|
41
|
+
}
|
|
42
|
+
if (lastIndex < value.length) {
|
|
43
|
+
newNodes.push({ type: "text", value: value.slice(lastIndex) });
|
|
44
|
+
}
|
|
45
|
+
if (newNodes.length) {
|
|
46
|
+
parent.children.splice(index, 1, ...newNodes);
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
var init_rehype_accent = __esm({
|
|
52
|
+
"src/libs/rehype-accent/index.ts"() {
|
|
53
|
+
"use strict";
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
|
|
1
57
|
// src/index.ts
|
|
2
58
|
import {
|
|
3
59
|
useTheme as useTheme2,
|
|
@@ -693,24 +749,11 @@ Button.displayName = "Button";
|
|
|
693
749
|
var Button_default = Button;
|
|
694
750
|
|
|
695
751
|
// src/components/Calendar/Calendar.tsx
|
|
696
|
-
import
|
|
752
|
+
import React11, { Fragment, forwardRef as forwardRef4, useMemo as useMemo4 } from "react";
|
|
697
753
|
import { styled as styled5 } from "@mui/joy";
|
|
698
754
|
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
|
|
699
755
|
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
|
700
|
-
import { AnimatePresence, motion as
|
|
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;
|
|
756
|
+
import { AnimatePresence, motion as motion12 } from "framer-motion";
|
|
714
757
|
|
|
715
758
|
// src/components/Calendar/utils/index.ts
|
|
716
759
|
var getCalendarDates = (date) => {
|
|
@@ -1069,12 +1112,6 @@ var useCalendar = (ownerState) => {
|
|
|
1069
1112
|
};
|
|
1070
1113
|
|
|
1071
1114
|
// 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;
|
|
1078
1115
|
var CalendarRoot = styled5("div", {
|
|
1079
1116
|
name: "Calendar",
|
|
1080
1117
|
slot: "root"
|
|
@@ -1101,7 +1138,7 @@ var CalendarViewContainer = styled5("div", {
|
|
|
1101
1138
|
overflow: "hidden",
|
|
1102
1139
|
minHeight: calendarType === "datePicker" ? "250px" : "unset"
|
|
1103
1140
|
}));
|
|
1104
|
-
var CalendarViewTable = styled5(
|
|
1141
|
+
var CalendarViewTable = styled5(motion12.table, {
|
|
1105
1142
|
name: "Calendar",
|
|
1106
1143
|
slot: "viewTable"
|
|
1107
1144
|
})(({ theme }) => ({
|
|
@@ -1281,7 +1318,7 @@ var PickerDays = (props) => {
|
|
|
1281
1318
|
const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
|
|
1282
1319
|
const calendarDates = useMemo4(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
|
|
1283
1320
|
const weekdayNames = useMemo4(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
|
|
1284
|
-
return /* @__PURE__ */
|
|
1321
|
+
return /* @__PURE__ */ React11.createElement(CalendarViewContainer, { calendarType: "datePicker" }, /* @__PURE__ */ React11.createElement(AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ React11.createElement(
|
|
1285
1322
|
CalendarViewTable,
|
|
1286
1323
|
{
|
|
1287
1324
|
key: `${ownerState.viewMonth.toString()}_${ownerState.direction}`,
|
|
@@ -1310,10 +1347,10 @@ var PickerDays = (props) => {
|
|
|
1310
1347
|
}
|
|
1311
1348
|
}
|
|
1312
1349
|
},
|
|
1313
|
-
/* @__PURE__ */
|
|
1314
|
-
/* @__PURE__ */
|
|
1315
|
-
(date, i) => date ? /* @__PURE__ */
|
|
1316
|
-
)), rowIndex < calendarDates.length - 1 && /* @__PURE__ */
|
|
1350
|
+
/* @__PURE__ */ React11.createElement(CalendarWeekHeaderContainer, null, /* @__PURE__ */ React11.createElement("tr", null, weekdayNames.map((name, i) => /* @__PURE__ */ React11.createElement(Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` }, /* @__PURE__ */ React11.createElement("th", null, /* @__PURE__ */ React11.createElement(Typography_default, { level: "body-xs", textAlign: "center" }, name)), i < 6 && /* @__PURE__ */ React11.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" }))))),
|
|
1351
|
+
/* @__PURE__ */ React11.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ React11.createElement(Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ React11.createElement("tr", null, weekDates.map(
|
|
1352
|
+
(date, i) => date ? /* @__PURE__ */ React11.createElement(Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ React11.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ React11.createElement(CalendarDay, { size: "sm", variant: "plain", color: "neutral", ...getPickerDayProps(date) }, date)), i < 6 && /* @__PURE__ */ React11.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ React11.createElement(Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ React11.createElement("td", null), i < 6 && /* @__PURE__ */ React11.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
|
|
1353
|
+
)), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ React11.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React11.createElement("td", { colSpan: 13, style: { height: 4 } })))))
|
|
1317
1354
|
)));
|
|
1318
1355
|
};
|
|
1319
1356
|
var PickerMonths = (props) => {
|
|
@@ -1330,7 +1367,7 @@ var PickerMonths = (props) => {
|
|
|
1330
1367
|
[[]]
|
|
1331
1368
|
);
|
|
1332
1369
|
const isMonthPicker = !ownerState.views?.find((view) => view === "day");
|
|
1333
|
-
return /* @__PURE__ */
|
|
1370
|
+
return /* @__PURE__ */ React11.createElement(CalendarViewContainer, { calendarType: isMonthPicker ? "monthPicker" : "datePicker" }, /* @__PURE__ */ React11.createElement(AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ React11.createElement(
|
|
1334
1371
|
CalendarViewTable,
|
|
1335
1372
|
{
|
|
1336
1373
|
key: `${ownerState.viewMonth.getFullYear()}_${ownerState.direction}`,
|
|
@@ -1359,7 +1396,7 @@ var PickerMonths = (props) => {
|
|
|
1359
1396
|
}
|
|
1360
1397
|
}
|
|
1361
1398
|
},
|
|
1362
|
-
/* @__PURE__ */
|
|
1399
|
+
/* @__PURE__ */ React11.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ React11.createElement(Fragment, { key: months.join("_") }, /* @__PURE__ */ React11.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ React11.createElement(Fragment, { key: monthIndex }, /* @__PURE__ */ React11.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ React11.createElement(CalendarMonth, { size: "sm", variant: "plain", color: "neutral", ...getPickerMonthProps(monthIndex) }, getMonthNameFromIndex(monthIndex, ownerState.locale))), j < 3 && /* @__PURE__ */ React11.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))), i < chunkedMonths.length - 1 && /* @__PURE__ */ React11.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React11.createElement("td", { colSpan: 7, style: { height: 4 } })))))
|
|
1363
1400
|
)));
|
|
1364
1401
|
};
|
|
1365
1402
|
var Calendar = forwardRef4((inProps, ref) => {
|
|
@@ -1381,96 +1418,17 @@ var Calendar = forwardRef4((inProps, ref) => {
|
|
|
1381
1418
|
...others
|
|
1382
1419
|
} = props;
|
|
1383
1420
|
const { calendarTitle, onPrev, onNext } = useCalendar(ownerState);
|
|
1384
|
-
|
|
1385
|
-
|
|
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,
|
|
1421
|
+
return /* @__PURE__ */ React11.createElement(CalendarRoot, { ref, ...others }, /* @__PURE__ */ React11.createElement(CalendarHeader, null, /* @__PURE__ */ React11.createElement(IconButton_default, { size: "sm", onClick: onPrev, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ React11.createElement(ChevronLeftIcon, null)), /* @__PURE__ */ React11.createElement(
|
|
1422
|
+
CalendarSwitchViewButton,
|
|
1452
1423
|
{
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
disableHoverListener: true,
|
|
1459
|
-
disableTouchListener: true,
|
|
1460
|
-
variant: "solid"
|
|
1424
|
+
ownerState,
|
|
1425
|
+
variant: "plain",
|
|
1426
|
+
color: "neutral",
|
|
1427
|
+
onClick: onViewChange,
|
|
1428
|
+
"aria-label": "Switch Calendar View"
|
|
1461
1429
|
},
|
|
1462
|
-
|
|
1463
|
-
|
|
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 }));
|
|
1430
|
+
calendarTitle
|
|
1431
|
+
), /* @__PURE__ */ React11.createElement(IconButton_default, { size: "sm", onClick: onNext, "aria-label": `Next ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ React11.createElement(ChevronRightIcon, null))), view === "day" && /* @__PURE__ */ React11.createElement(PickerDays, { ownerState }), view === "month" && /* @__PURE__ */ React11.createElement(PickerMonths, { ownerState }));
|
|
1474
1432
|
});
|
|
1475
1433
|
Calendar.displayName = "Calendar";
|
|
1476
1434
|
|
|
@@ -1485,30 +1443,30 @@ import {
|
|
|
1485
1443
|
CardActions as JoyCardActions,
|
|
1486
1444
|
CardOverflow as JoyCardOverflow
|
|
1487
1445
|
} from "@mui/joy";
|
|
1488
|
-
import { motion as
|
|
1489
|
-
var MotionCard =
|
|
1446
|
+
import { motion as motion13 } from "framer-motion";
|
|
1447
|
+
var MotionCard = motion13(JoyCard);
|
|
1490
1448
|
var Card = MotionCard;
|
|
1491
1449
|
Card.displayName = "Card";
|
|
1492
|
-
var MotionCardContent =
|
|
1450
|
+
var MotionCardContent = motion13(JoyCardContent);
|
|
1493
1451
|
var CardContent = MotionCardContent;
|
|
1494
1452
|
CardContent.displayName = "CardContent";
|
|
1495
|
-
var MotionCardCover =
|
|
1453
|
+
var MotionCardCover = motion13(JoyCardCover);
|
|
1496
1454
|
var CardCover = MotionCardCover;
|
|
1497
1455
|
CardCover.displayName = "CardCover";
|
|
1498
|
-
var MotionCardActions =
|
|
1456
|
+
var MotionCardActions = motion13(JoyCardActions);
|
|
1499
1457
|
var CardActions = MotionCardActions;
|
|
1500
1458
|
CardActions.displayName = "CardActions";
|
|
1501
|
-
var MotionCardOverflow =
|
|
1459
|
+
var MotionCardOverflow = motion13(JoyCardOverflow);
|
|
1502
1460
|
var CardOverflow = MotionCardOverflow;
|
|
1503
1461
|
CardOverflow.displayName = "CardOverflow";
|
|
1504
1462
|
|
|
1505
1463
|
// src/components/Checkbox/Checkbox.tsx
|
|
1506
|
-
import
|
|
1464
|
+
import React12 from "react";
|
|
1507
1465
|
import { Checkbox as JoyCheckbox } from "@mui/joy";
|
|
1508
|
-
import { motion as
|
|
1509
|
-
var MotionCheckbox =
|
|
1466
|
+
import { motion as motion14 } from "framer-motion";
|
|
1467
|
+
var MotionCheckbox = motion14(JoyCheckbox);
|
|
1510
1468
|
var Checkbox = (props) => {
|
|
1511
|
-
return /* @__PURE__ */
|
|
1469
|
+
return /* @__PURE__ */ React12.createElement(MotionCheckbox, { ...props });
|
|
1512
1470
|
};
|
|
1513
1471
|
Checkbox.displayName = "Checkbox";
|
|
1514
1472
|
|
|
@@ -1517,7 +1475,7 @@ var Checkbox_default = Checkbox;
|
|
|
1517
1475
|
|
|
1518
1476
|
// src/components/Container/Container.tsx
|
|
1519
1477
|
import { styled as styled6 } from "@mui/joy";
|
|
1520
|
-
import
|
|
1478
|
+
import React13, { forwardRef as forwardRef5 } from "react";
|
|
1521
1479
|
var ContainerRoot = styled6("div", {
|
|
1522
1480
|
name: "Container",
|
|
1523
1481
|
slot: "root",
|
|
@@ -1544,23 +1502,24 @@ var ContainerRoot = styled6("div", {
|
|
|
1544
1502
|
} : null
|
|
1545
1503
|
]);
|
|
1546
1504
|
var Container = forwardRef5(function Container2(props, ref) {
|
|
1547
|
-
return /* @__PURE__ */
|
|
1505
|
+
return /* @__PURE__ */ React13.createElement(ContainerRoot, { ref, ...props });
|
|
1548
1506
|
});
|
|
1549
1507
|
Container.displayName = "Container";
|
|
1550
1508
|
|
|
1551
1509
|
// src/components/CurrencyInput/CurrencyInput.tsx
|
|
1552
|
-
import
|
|
1510
|
+
import React15, { useCallback as useCallback6, useMemo as useMemo5, useState as useState5 } from "react";
|
|
1511
|
+
import { IntlMessageFormat as IntlMessageFormat2 } from "intl-messageformat";
|
|
1553
1512
|
import { NumericFormat } from "react-number-format";
|
|
1554
1513
|
|
|
1555
1514
|
// src/components/Input/Input.tsx
|
|
1556
|
-
import
|
|
1515
|
+
import React14, { useCallback as useCallback5, useState as useState4 } from "react";
|
|
1557
1516
|
import { Input as JoyInput } from "@mui/joy";
|
|
1558
|
-
import { motion as
|
|
1517
|
+
import { motion as motion15 } from "framer-motion";
|
|
1559
1518
|
import ClearIcon from "@mui/icons-material/Close";
|
|
1560
1519
|
import VisibilityIcon from "@mui/icons-material/Visibility";
|
|
1561
1520
|
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
|
|
1562
|
-
var MotionInput =
|
|
1563
|
-
var Input =
|
|
1521
|
+
var MotionInput = motion15(JoyInput);
|
|
1522
|
+
var Input = React14.forwardRef((props, ref) => {
|
|
1564
1523
|
const {
|
|
1565
1524
|
label,
|
|
1566
1525
|
helperText,
|
|
@@ -1583,11 +1542,11 @@ var Input = React15.forwardRef((props, ref) => {
|
|
|
1583
1542
|
if (type === "password" && innerProps.endDecorator) {
|
|
1584
1543
|
console.warn('Input: endDecorator is not supported when type="password"');
|
|
1585
1544
|
}
|
|
1586
|
-
const [passwordVisible, setPasswordVisible] =
|
|
1545
|
+
const [passwordVisible, setPasswordVisible] = useState4(false);
|
|
1587
1546
|
const [value, setValue] = useControlledState(
|
|
1588
1547
|
props.value,
|
|
1589
1548
|
props.defaultValue,
|
|
1590
|
-
|
|
1549
|
+
useCallback5(
|
|
1591
1550
|
(value2) => {
|
|
1592
1551
|
onChange?.({
|
|
1593
1552
|
/**
|
|
@@ -1613,7 +1572,7 @@ var Input = React15.forwardRef((props, ref) => {
|
|
|
1613
1572
|
const actualType = type === "password" && passwordVisible ? "text" : type;
|
|
1614
1573
|
const isPasswordType = type === "password";
|
|
1615
1574
|
const showPasswordToggle = isPasswordType && !disableTogglePasswordButton;
|
|
1616
|
-
const input = /* @__PURE__ */
|
|
1575
|
+
const input = /* @__PURE__ */ React14.createElement(
|
|
1617
1576
|
MotionInput,
|
|
1618
1577
|
{
|
|
1619
1578
|
value,
|
|
@@ -1628,7 +1587,7 @@ var Input = React15.forwardRef((props, ref) => {
|
|
|
1628
1587
|
...innerProps.slotProps
|
|
1629
1588
|
},
|
|
1630
1589
|
...innerProps,
|
|
1631
|
-
endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */
|
|
1590
|
+
endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */ React14.createElement(Stack_default, { gap: 1, direction: "row" }, /* @__PURE__ */ React14.createElement(
|
|
1632
1591
|
IconButton_default,
|
|
1633
1592
|
{
|
|
1634
1593
|
onMouseDown: (e) => e.preventDefault(),
|
|
@@ -1636,19 +1595,19 @@ var Input = React15.forwardRef((props, ref) => {
|
|
|
1636
1595
|
disabled,
|
|
1637
1596
|
"aria-label": passwordVisible ? "Hide password" : "Show password"
|
|
1638
1597
|
},
|
|
1639
|
-
passwordVisible ? /* @__PURE__ */
|
|
1640
|
-
)) : null : enableClearable ? /* @__PURE__ */
|
|
1598
|
+
passwordVisible ? /* @__PURE__ */ React14.createElement(VisibilityOffIcon, null) : /* @__PURE__ */ React14.createElement(VisibilityIcon, null)
|
|
1599
|
+
)) : null : enableClearable ? /* @__PURE__ */ React14.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ React14.createElement(
|
|
1641
1600
|
IconButton_default,
|
|
1642
1601
|
{
|
|
1643
1602
|
onMouseDown: (e) => e.preventDefault(),
|
|
1644
1603
|
onClick: handleClear,
|
|
1645
1604
|
"aria-label": "Clear"
|
|
1646
1605
|
},
|
|
1647
|
-
/* @__PURE__ */
|
|
1606
|
+
/* @__PURE__ */ React14.createElement(ClearIcon, null)
|
|
1648
1607
|
)) : innerProps.endDecorator
|
|
1649
1608
|
}
|
|
1650
1609
|
);
|
|
1651
|
-
return /* @__PURE__ */
|
|
1610
|
+
return /* @__PURE__ */ React14.createElement(
|
|
1652
1611
|
FormControl_default,
|
|
1653
1612
|
{
|
|
1654
1613
|
required,
|
|
@@ -1659,9 +1618,9 @@ var Input = React15.forwardRef((props, ref) => {
|
|
|
1659
1618
|
sx,
|
|
1660
1619
|
className
|
|
1661
1620
|
},
|
|
1662
|
-
label && /* @__PURE__ */
|
|
1621
|
+
label && /* @__PURE__ */ React14.createElement(FormLabel_default, null, label),
|
|
1663
1622
|
input,
|
|
1664
|
-
helperText && /* @__PURE__ */
|
|
1623
|
+
helperText && /* @__PURE__ */ React14.createElement(FormHelperText_default, null, helperText)
|
|
1665
1624
|
);
|
|
1666
1625
|
});
|
|
1667
1626
|
Input.displayName = "Input";
|
|
@@ -1673,6 +1632,7 @@ var Input_default = Input;
|
|
|
1673
1632
|
import { styled as styled7, useThemeProps as useThemeProps3 } from "@mui/joy";
|
|
1674
1633
|
|
|
1675
1634
|
// src/components/CurrencyInput/hooks/use-currency-setting.ts
|
|
1635
|
+
import IntlMessageFormat from "intl-messageformat";
|
|
1676
1636
|
var CURRENCY_DECIMAL_MAP = {
|
|
1677
1637
|
AED: 2,
|
|
1678
1638
|
ALL: 2,
|
|
@@ -1817,10 +1777,9 @@ var CURRENCY_DECIMAL_MAP = {
|
|
|
1817
1777
|
};
|
|
1818
1778
|
var useCurrencySetting = (props) => {
|
|
1819
1779
|
const { currency = "USD", placeholder } = props;
|
|
1820
|
-
const
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
const decimalSeparator = parts.find((p) => p.type === "decimal")?.value;
|
|
1780
|
+
const [symbol, thousandSeparator, decimalSeparator, ...rest] = new IntlMessageFormat(
|
|
1781
|
+
`{amount, number, ::currency/${currency} unit-width-narrow}`
|
|
1782
|
+
).format({ amount: 1e3 }).toString().replace(/\d/g, "").split("");
|
|
1824
1783
|
const decimalScale = CURRENCY_DECIMAL_MAP[currency];
|
|
1825
1784
|
return {
|
|
1826
1785
|
symbol: `${symbol} `,
|
|
@@ -1833,9 +1792,9 @@ var useCurrencySetting = (props) => {
|
|
|
1833
1792
|
};
|
|
1834
1793
|
|
|
1835
1794
|
// src/components/CurrencyInput/CurrencyInput.tsx
|
|
1836
|
-
var TextMaskAdapter =
|
|
1795
|
+
var TextMaskAdapter = React15.forwardRef(function TextMaskAdapter2(props, ref) {
|
|
1837
1796
|
const { onChange, ...innerProps } = props;
|
|
1838
|
-
return /* @__PURE__ */
|
|
1797
|
+
return /* @__PURE__ */ React15.createElement(
|
|
1839
1798
|
NumericFormat,
|
|
1840
1799
|
{
|
|
1841
1800
|
...innerProps,
|
|
@@ -1855,7 +1814,7 @@ var CurrencyInputRoot = styled7(Input_default, {
|
|
|
1855
1814
|
slot: "root",
|
|
1856
1815
|
overridesResolver: (props, styles) => styles.root
|
|
1857
1816
|
})({});
|
|
1858
|
-
var CurrencyInput =
|
|
1817
|
+
var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
1859
1818
|
const props = useThemeProps3({ props: inProps, name: "CurrencyInput" });
|
|
1860
1819
|
const {
|
|
1861
1820
|
currency = "USD",
|
|
@@ -1876,7 +1835,7 @@ var CurrencyInput = React16.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1876
1835
|
const [_value, setValue] = useControlledState(
|
|
1877
1836
|
props.value,
|
|
1878
1837
|
props.defaultValue,
|
|
1879
|
-
|
|
1838
|
+
useCallback6((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
|
|
1880
1839
|
);
|
|
1881
1840
|
const value = useMemo5(() => {
|
|
1882
1841
|
if (_value && useMinorUnit) {
|
|
@@ -1890,14 +1849,14 @@ var CurrencyInput = React16.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1890
1849
|
}
|
|
1891
1850
|
return props.max;
|
|
1892
1851
|
}, [props.max, useMinorUnit, decimalScale]);
|
|
1893
|
-
const [isOverLimit, setIsOverLimit] =
|
|
1894
|
-
const handleChange =
|
|
1852
|
+
const [isOverLimit, setIsOverLimit] = useState5(!!max && !!value && value > max);
|
|
1853
|
+
const handleChange = useCallback6(
|
|
1895
1854
|
(event) => {
|
|
1896
1855
|
if (event.target.value === "") {
|
|
1897
1856
|
setValue(void 0);
|
|
1898
1857
|
return;
|
|
1899
1858
|
}
|
|
1900
|
-
const amount = useMinorUnit ? Number(
|
|
1859
|
+
const amount = useMinorUnit ? Number(event.target.value?.replace(decimalSeparator, "")) : Number(event.target.value);
|
|
1901
1860
|
if (!!max && Number(event.target.value) > max) {
|
|
1902
1861
|
setIsOverLimit(true);
|
|
1903
1862
|
} else {
|
|
@@ -1907,7 +1866,7 @@ var CurrencyInput = React16.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1907
1866
|
},
|
|
1908
1867
|
[decimalSeparator, max, useMinorUnit, setValue]
|
|
1909
1868
|
);
|
|
1910
|
-
return /* @__PURE__ */
|
|
1869
|
+
return /* @__PURE__ */ React15.createElement(
|
|
1911
1870
|
CurrencyInputRoot,
|
|
1912
1871
|
{
|
|
1913
1872
|
...innerProps,
|
|
@@ -1920,7 +1879,9 @@ var CurrencyInput = React16.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1920
1879
|
required,
|
|
1921
1880
|
color: error || isOverLimit ? "danger" : props.color,
|
|
1922
1881
|
label,
|
|
1923
|
-
helperText: isOverLimit ? `limit:
|
|
1882
|
+
helperText: isOverLimit ? new IntlMessageFormat2(`limit: {amount, number, ::currency/${currency} unit-width-narrow}`).format({
|
|
1883
|
+
amount: max
|
|
1884
|
+
}) : helperText,
|
|
1924
1885
|
slotProps: {
|
|
1925
1886
|
input: {
|
|
1926
1887
|
component: TextMaskAdapter,
|
|
@@ -1945,9 +1906,9 @@ var CurrencyInput_default = CurrencyInput;
|
|
|
1945
1906
|
|
|
1946
1907
|
// src/components/DataTable/DataTable.tsx
|
|
1947
1908
|
import React25, {
|
|
1948
|
-
useCallback as
|
|
1909
|
+
useCallback as useCallback11,
|
|
1949
1910
|
useMemo as useMemo10,
|
|
1950
|
-
useRef as
|
|
1911
|
+
useRef as useRef6,
|
|
1951
1912
|
useId,
|
|
1952
1913
|
forwardRef as forwardRef7,
|
|
1953
1914
|
useImperativeHandle as useImperativeHandle2,
|
|
@@ -2182,9 +2143,9 @@ function computeAutoFitWidth(params) {
|
|
|
2182
2143
|
}
|
|
2183
2144
|
|
|
2184
2145
|
// src/components/DataTable/styled.tsx
|
|
2185
|
-
import
|
|
2146
|
+
import React16 from "react";
|
|
2186
2147
|
import { styled as styled8, LinearProgress, buttonClasses, iconButtonClasses, Typography as Typography3 } from "@mui/joy";
|
|
2187
|
-
import { motion as
|
|
2148
|
+
import { motion as motion16 } from "framer-motion";
|
|
2188
2149
|
import SortIcon from "@mui/icons-material/ArrowUpwardRounded";
|
|
2189
2150
|
var EllipsisDiv = styled8("div", {
|
|
2190
2151
|
name: "DataTable",
|
|
@@ -2268,7 +2229,7 @@ var Asterisk = styled8("span", {
|
|
|
2268
2229
|
color: "var(--ceed-palette-danger-500)",
|
|
2269
2230
|
marginLeft: theme.spacing(0.5)
|
|
2270
2231
|
}));
|
|
2271
|
-
var StyledTh = styled8(
|
|
2232
|
+
var StyledTh = styled8(motion16.th)(({ theme }) => ({
|
|
2272
2233
|
boxShadow: "1px 0 var(--TableCell-borderColor)"
|
|
2273
2234
|
}));
|
|
2274
2235
|
var StyledTd = styled8("td")(({ theme }) => ({
|
|
@@ -2287,10 +2248,10 @@ var StyledTd = styled8("td")(({ theme }) => ({
|
|
|
2287
2248
|
}
|
|
2288
2249
|
}
|
|
2289
2250
|
}));
|
|
2290
|
-
var MotionSortIcon =
|
|
2291
|
-
var DefaultLoadingOverlay = () => /* @__PURE__ */
|
|
2292
|
-
var DefaultNoRowsOverlay = () => /* @__PURE__ */
|
|
2293
|
-
var Resizer = (ref, targetRef = ref, onResizeStateChange, onAutoFit) => /* @__PURE__ */
|
|
2251
|
+
var MotionSortIcon = motion16(SortIcon);
|
|
2252
|
+
var DefaultLoadingOverlay = () => /* @__PURE__ */ React16.createElement(LinearProgress, { value: 8, variant: "plain" });
|
|
2253
|
+
var DefaultNoRowsOverlay = () => /* @__PURE__ */ React16.createElement(Typography3, { level: "body-sm", textColor: "text.tertiary" }, "No rows");
|
|
2254
|
+
var Resizer = (ref, targetRef = ref, onResizeStateChange, onAutoFit) => /* @__PURE__ */ React16.createElement(
|
|
2294
2255
|
Box_default,
|
|
2295
2256
|
{
|
|
2296
2257
|
sx: {
|
|
@@ -2368,12 +2329,12 @@ var Resizer = (ref, targetRef = ref, onResizeStateChange, onAutoFit) => /* @__PU
|
|
|
2368
2329
|
|
|
2369
2330
|
// src/components/DataTable/components.tsx
|
|
2370
2331
|
import React22, {
|
|
2371
|
-
useRef as
|
|
2372
|
-
useState as
|
|
2332
|
+
useRef as useRef4,
|
|
2333
|
+
useState as useState7,
|
|
2373
2334
|
useLayoutEffect,
|
|
2374
2335
|
useMemo as useMemo8,
|
|
2375
|
-
useCallback as
|
|
2376
|
-
useEffect as
|
|
2336
|
+
useCallback as useCallback8,
|
|
2337
|
+
useEffect as useEffect4,
|
|
2377
2338
|
memo,
|
|
2378
2339
|
createElement
|
|
2379
2340
|
} from "react";
|
|
@@ -2381,7 +2342,7 @@ import { styled as styled12, useTheme } from "@mui/joy";
|
|
|
2381
2342
|
import { AnimatePresence as AnimatePresence2 } from "framer-motion";
|
|
2382
2343
|
|
|
2383
2344
|
// src/components/DatePicker/DatePicker.tsx
|
|
2384
|
-
import
|
|
2345
|
+
import React17, { forwardRef as forwardRef6, useCallback as useCallback7, useEffect as useEffect3, useImperativeHandle, useRef as useRef3, useState as useState6 } from "react";
|
|
2385
2346
|
import { IMaskInput, IMask } from "react-imask";
|
|
2386
2347
|
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
|
|
2387
2348
|
import { styled as styled10, useThemeProps as useThemeProps4 } from "@mui/joy";
|
|
@@ -2396,8 +2357,8 @@ var Sheet_default = Sheet;
|
|
|
2396
2357
|
|
|
2397
2358
|
// src/components/DialogActions/DialogActions.tsx
|
|
2398
2359
|
import { DialogActions as JoyDialogActions, styled as styled9 } from "@mui/joy";
|
|
2399
|
-
import { motion as
|
|
2400
|
-
var MotionDialogActions =
|
|
2360
|
+
import { motion as motion17 } from "framer-motion";
|
|
2361
|
+
var MotionDialogActions = motion17(JoyDialogActions);
|
|
2401
2362
|
var StyledDialogActions = styled9(MotionDialogActions)(({ theme }) => ({
|
|
2402
2363
|
padding: theme.spacing(2),
|
|
2403
2364
|
gap: theme.spacing(2),
|
|
@@ -2493,9 +2454,9 @@ function parseDate(dateString, format) {
|
|
|
2493
2454
|
var formatToPattern = (format) => {
|
|
2494
2455
|
return format.replace(/YYYY/g, "Y").replace(/MM/g, "M").replace(/DD/g, "D").replace(/[^YMD\s]/g, (match) => `${match}\``);
|
|
2495
2456
|
};
|
|
2496
|
-
var TextMaskAdapter3 =
|
|
2457
|
+
var TextMaskAdapter3 = React17.forwardRef(function TextMaskAdapter4(props, ref) {
|
|
2497
2458
|
const { onChange, format, ...other } = props;
|
|
2498
|
-
return /* @__PURE__ */
|
|
2459
|
+
return /* @__PURE__ */ React17.createElement(
|
|
2499
2460
|
IMaskInput,
|
|
2500
2461
|
{
|
|
2501
2462
|
...other,
|
|
@@ -2555,24 +2516,24 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2555
2516
|
shouldDisableDate,
|
|
2556
2517
|
...innerProps
|
|
2557
2518
|
} = props;
|
|
2558
|
-
const innerRef =
|
|
2559
|
-
const buttonRef =
|
|
2519
|
+
const innerRef = useRef3(null);
|
|
2520
|
+
const buttonRef = useRef3(null);
|
|
2560
2521
|
const [value, setValue] = useControlledState(
|
|
2561
2522
|
props.value,
|
|
2562
2523
|
props.defaultValue || "",
|
|
2563
|
-
|
|
2524
|
+
useCallback7((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
2564
2525
|
);
|
|
2565
|
-
const [displayValue, setDisplayValue] =
|
|
2526
|
+
const [displayValue, setDisplayValue] = useState6(
|
|
2566
2527
|
() => value ? formatValueString(parseDate(value, format), displayFormat) : ""
|
|
2567
2528
|
);
|
|
2568
|
-
const [anchorEl, setAnchorEl] =
|
|
2529
|
+
const [anchorEl, setAnchorEl] = useState6(null);
|
|
2569
2530
|
const open = Boolean(anchorEl);
|
|
2570
|
-
|
|
2531
|
+
useEffect3(() => {
|
|
2571
2532
|
if (!anchorEl) {
|
|
2572
2533
|
innerRef.current?.blur();
|
|
2573
2534
|
}
|
|
2574
2535
|
}, [anchorEl, innerRef]);
|
|
2575
|
-
|
|
2536
|
+
useEffect3(() => {
|
|
2576
2537
|
if (value === "") {
|
|
2577
2538
|
setDisplayValue("");
|
|
2578
2539
|
return;
|
|
@@ -2583,7 +2544,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2583
2544
|
}
|
|
2584
2545
|
}, [displayFormat, displayValue, format, value]);
|
|
2585
2546
|
useImperativeHandle(ref, () => innerRef.current, [innerRef]);
|
|
2586
|
-
const handleChange =
|
|
2547
|
+
const handleChange = useCallback7(
|
|
2587
2548
|
(event) => {
|
|
2588
2549
|
const value2 = event.target.value;
|
|
2589
2550
|
setDisplayValue(value2 ? formatValueString(parseDate(value2, format), displayFormat) : value2);
|
|
@@ -2591,7 +2552,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2591
2552
|
},
|
|
2592
2553
|
[displayFormat, format, setValue]
|
|
2593
2554
|
);
|
|
2594
|
-
const handleDisplayInputChange =
|
|
2555
|
+
const handleDisplayInputChange = useCallback7(
|
|
2595
2556
|
(event) => {
|
|
2596
2557
|
if (event.target.value === "") {
|
|
2597
2558
|
handleChange({
|
|
@@ -2616,7 +2577,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2616
2577
|
},
|
|
2617
2578
|
[displayFormat, format, handleChange, props.name]
|
|
2618
2579
|
);
|
|
2619
|
-
const handleCalendarToggle =
|
|
2580
|
+
const handleCalendarToggle = useCallback7(
|
|
2620
2581
|
(event) => {
|
|
2621
2582
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
2622
2583
|
setTimeout(() => {
|
|
@@ -2625,7 +2586,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2625
2586
|
},
|
|
2626
2587
|
[anchorEl, setAnchorEl, innerRef]
|
|
2627
2588
|
);
|
|
2628
|
-
const handleInputMouseDown =
|
|
2589
|
+
const handleInputMouseDown = useCallback7(
|
|
2629
2590
|
(event) => {
|
|
2630
2591
|
if (inputReadOnly) {
|
|
2631
2592
|
event.preventDefault();
|
|
@@ -2634,7 +2595,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2634
2595
|
},
|
|
2635
2596
|
[inputReadOnly, buttonRef]
|
|
2636
2597
|
);
|
|
2637
|
-
return /* @__PURE__ */
|
|
2598
|
+
return /* @__PURE__ */ React17.createElement(DatePickerRoot, null, /* @__PURE__ */ React17.createElement(FocusTrap, { open: true }, /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
|
|
2638
2599
|
Input_default,
|
|
2639
2600
|
{
|
|
2640
2601
|
...innerProps,
|
|
@@ -2662,7 +2623,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2662
2623
|
},
|
|
2663
2624
|
className,
|
|
2664
2625
|
sx,
|
|
2665
|
-
endDecorator: /* @__PURE__ */
|
|
2626
|
+
endDecorator: /* @__PURE__ */ React17.createElement(
|
|
2666
2627
|
CalendarButton,
|
|
2667
2628
|
{
|
|
2668
2629
|
ref: buttonRef,
|
|
@@ -2674,13 +2635,13 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2674
2635
|
"aria-expanded": open,
|
|
2675
2636
|
disabled
|
|
2676
2637
|
},
|
|
2677
|
-
/* @__PURE__ */
|
|
2638
|
+
/* @__PURE__ */ React17.createElement(CalendarTodayIcon, null)
|
|
2678
2639
|
),
|
|
2679
2640
|
label,
|
|
2680
2641
|
helperText,
|
|
2681
2642
|
readOnly: readOnly || inputReadOnly
|
|
2682
2643
|
}
|
|
2683
|
-
), open && /* @__PURE__ */
|
|
2644
|
+
), open && /* @__PURE__ */ React17.createElement(ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React17.createElement(
|
|
2684
2645
|
StyledPopper,
|
|
2685
2646
|
{
|
|
2686
2647
|
id: "date-picker-popper",
|
|
@@ -2699,7 +2660,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2699
2660
|
"aria-label": "Calendar Tooltip",
|
|
2700
2661
|
"aria-expanded": open
|
|
2701
2662
|
},
|
|
2702
|
-
/* @__PURE__ */
|
|
2663
|
+
/* @__PURE__ */ React17.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React17.createElement(
|
|
2703
2664
|
Calendar_default,
|
|
2704
2665
|
{
|
|
2705
2666
|
value: value && !Number.isNaN(parseDate(value, format).getTime()) ? [parseDate(value, format), void 0] : void 0,
|
|
@@ -2718,14 +2679,14 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2718
2679
|
disablePast,
|
|
2719
2680
|
shouldDisableDate: shouldDisableDate ? (date) => shouldDisableDate(formatValueString(date, format)) : void 0
|
|
2720
2681
|
}
|
|
2721
|
-
), !hideClearButton && /* @__PURE__ */
|
|
2682
|
+
), !hideClearButton && /* @__PURE__ */ React17.createElement(
|
|
2722
2683
|
DialogActions_default,
|
|
2723
2684
|
{
|
|
2724
2685
|
sx: {
|
|
2725
2686
|
p: 1
|
|
2726
2687
|
}
|
|
2727
2688
|
},
|
|
2728
|
-
/* @__PURE__ */
|
|
2689
|
+
/* @__PURE__ */ React17.createElement(
|
|
2729
2690
|
Button_default,
|
|
2730
2691
|
{
|
|
2731
2692
|
size,
|
|
@@ -2751,10 +2712,10 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2751
2712
|
var DatePicker_default = DatePicker;
|
|
2752
2713
|
|
|
2753
2714
|
// src/components/Textarea/Textarea.tsx
|
|
2754
|
-
import
|
|
2715
|
+
import React18 from "react";
|
|
2755
2716
|
import { Textarea as JoyTextarea } from "@mui/joy";
|
|
2756
|
-
import { motion as
|
|
2757
|
-
var MotionTextarea =
|
|
2717
|
+
import { motion as motion18 } from "framer-motion";
|
|
2718
|
+
var MotionTextarea = motion18(JoyTextarea);
|
|
2758
2719
|
var Textarea = (props) => {
|
|
2759
2720
|
const {
|
|
2760
2721
|
label,
|
|
@@ -2771,7 +2732,7 @@ var Textarea = (props) => {
|
|
|
2771
2732
|
className,
|
|
2772
2733
|
...innerProps
|
|
2773
2734
|
} = props;
|
|
2774
|
-
const textarea = /* @__PURE__ */
|
|
2735
|
+
const textarea = /* @__PURE__ */ React18.createElement(
|
|
2775
2736
|
MotionTextarea,
|
|
2776
2737
|
{
|
|
2777
2738
|
required,
|
|
@@ -2783,7 +2744,7 @@ var Textarea = (props) => {
|
|
|
2783
2744
|
...innerProps
|
|
2784
2745
|
}
|
|
2785
2746
|
);
|
|
2786
|
-
return /* @__PURE__ */
|
|
2747
|
+
return /* @__PURE__ */ React18.createElement(
|
|
2787
2748
|
FormControl_default,
|
|
2788
2749
|
{
|
|
2789
2750
|
required,
|
|
@@ -2794,9 +2755,9 @@ var Textarea = (props) => {
|
|
|
2794
2755
|
sx,
|
|
2795
2756
|
className
|
|
2796
2757
|
},
|
|
2797
|
-
label && /* @__PURE__ */
|
|
2758
|
+
label && /* @__PURE__ */ React18.createElement(FormLabel_default, null, label),
|
|
2798
2759
|
textarea,
|
|
2799
|
-
helperText && /* @__PURE__ */
|
|
2760
|
+
helperText && /* @__PURE__ */ React18.createElement(FormHelperText_default, null, helperText)
|
|
2800
2761
|
);
|
|
2801
2762
|
};
|
|
2802
2763
|
Textarea.displayName = "Textarea";
|
|
@@ -2805,10 +2766,10 @@ Textarea.displayName = "Textarea";
|
|
|
2805
2766
|
var Textarea_default = Textarea;
|
|
2806
2767
|
|
|
2807
2768
|
// src/components/Select/Select.tsx
|
|
2808
|
-
import
|
|
2769
|
+
import React19, { useMemo as useMemo7 } from "react";
|
|
2809
2770
|
import { Select as JoySelect, Option as JoyOption, ListItemContent as ListItemContent2, Typography as Typography4 } from "@mui/joy";
|
|
2810
|
-
import { motion as
|
|
2811
|
-
var MotionOption =
|
|
2771
|
+
import { motion as motion19 } from "framer-motion";
|
|
2772
|
+
var MotionOption = motion19(JoyOption);
|
|
2812
2773
|
var Option = MotionOption;
|
|
2813
2774
|
var secondaryTextLevelMap2 = {
|
|
2814
2775
|
sm: "body-xs",
|
|
@@ -2863,7 +2824,7 @@ function Select(props) {
|
|
|
2863
2824
|
});
|
|
2864
2825
|
return map;
|
|
2865
2826
|
}, [options]);
|
|
2866
|
-
const select = /* @__PURE__ */
|
|
2827
|
+
const select = /* @__PURE__ */ React19.createElement(
|
|
2867
2828
|
JoySelect,
|
|
2868
2829
|
{
|
|
2869
2830
|
...innerProps,
|
|
@@ -2880,9 +2841,9 @@ function Select(props) {
|
|
|
2880
2841
|
return optionMap.get(selected.value)?.label;
|
|
2881
2842
|
}
|
|
2882
2843
|
},
|
|
2883
|
-
options.map((option) => /* @__PURE__ */
|
|
2844
|
+
options.map((option) => /* @__PURE__ */ React19.createElement(Option, { key: option.value, value: option.value, disabled: option.disabled }, option.secondaryText ? /* @__PURE__ */ React19.createElement(ListItemContent2, { sx: { gap: 0.5 } }, /* @__PURE__ */ React19.createElement(Typography4, { level: "inherit" }, option.label), /* @__PURE__ */ React19.createElement(Typography4, { level: secondaryTextLevelMap2[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : option.label))
|
|
2884
2845
|
);
|
|
2885
|
-
return /* @__PURE__ */
|
|
2846
|
+
return /* @__PURE__ */ React19.createElement(
|
|
2886
2847
|
FormControl_default,
|
|
2887
2848
|
{
|
|
2888
2849
|
required,
|
|
@@ -2893,9 +2854,9 @@ function Select(props) {
|
|
|
2893
2854
|
sx,
|
|
2894
2855
|
className
|
|
2895
2856
|
},
|
|
2896
|
-
label && /* @__PURE__ */
|
|
2857
|
+
label && /* @__PURE__ */ React19.createElement(FormLabel_default, null, label),
|
|
2897
2858
|
select,
|
|
2898
|
-
helperText && /* @__PURE__ */
|
|
2859
|
+
helperText && /* @__PURE__ */ React19.createElement(FormHelperText_default, null, helperText)
|
|
2899
2860
|
);
|
|
2900
2861
|
}
|
|
2901
2862
|
Select.displayName = "Select";
|
|
@@ -2906,6 +2867,19 @@ var Select_default = Select;
|
|
|
2906
2867
|
// src/components/DataTable/components.tsx
|
|
2907
2868
|
import { Link } from "@mui/joy";
|
|
2908
2869
|
|
|
2870
|
+
// src/components/Tooltip/Tooltip.tsx
|
|
2871
|
+
import React20 from "react";
|
|
2872
|
+
import { Tooltip as JoyTooltip } from "@mui/joy";
|
|
2873
|
+
import { motion as motion20 } from "framer-motion";
|
|
2874
|
+
var MotionTooltip = motion20(JoyTooltip);
|
|
2875
|
+
var Tooltip = (props) => {
|
|
2876
|
+
return /* @__PURE__ */ React20.createElement(MotionTooltip, { ...props });
|
|
2877
|
+
};
|
|
2878
|
+
Tooltip.displayName = "Tooltip";
|
|
2879
|
+
|
|
2880
|
+
// src/components/Tooltip/index.ts
|
|
2881
|
+
var Tooltip_default = Tooltip;
|
|
2882
|
+
|
|
2909
2883
|
// src/components/InfoSign/InfoSign.tsx
|
|
2910
2884
|
import React21 from "react";
|
|
2911
2885
|
import { styled as styled11, tooltipClasses } from "@mui/joy";
|
|
@@ -2945,8 +2919,8 @@ var TextEllipsis = ({
|
|
|
2945
2919
|
lineClamp,
|
|
2946
2920
|
...rest
|
|
2947
2921
|
}) => {
|
|
2948
|
-
const textRef =
|
|
2949
|
-
const [showTooltip, setShowTooltip] =
|
|
2922
|
+
const textRef = useRef4(null);
|
|
2923
|
+
const [showTooltip, setShowTooltip] = useState7(false);
|
|
2950
2924
|
useLayoutEffect(() => {
|
|
2951
2925
|
const element = textRef.current;
|
|
2952
2926
|
if (!element) return;
|
|
@@ -2962,8 +2936,8 @@ var TextEllipsis = ({
|
|
|
2962
2936
|
return /* @__PURE__ */ React22.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top" }, /* @__PURE__ */ React22.createElement(EllipsisDiv, { ref: textRef, lineClamp, ...rest }, children));
|
|
2963
2937
|
};
|
|
2964
2938
|
var CellTextEllipsis = ({ children }) => {
|
|
2965
|
-
const textRef =
|
|
2966
|
-
const [showTooltip, setShowTooltip] =
|
|
2939
|
+
const textRef = useRef4(null);
|
|
2940
|
+
const [showTooltip, setShowTooltip] = useState7(false);
|
|
2967
2941
|
useLayoutEffect(() => {
|
|
2968
2942
|
const element = textRef.current;
|
|
2969
2943
|
if (element) {
|
|
@@ -3017,17 +2991,17 @@ var HeadCell = (props) => {
|
|
|
3017
2991
|
const theme = useTheme();
|
|
3018
2992
|
const ref = headerRef;
|
|
3019
2993
|
const colRef = tableColRef;
|
|
3020
|
-
const localRef =
|
|
2994
|
+
const localRef = useRef4(null);
|
|
3021
2995
|
useLayoutEffect(() => {
|
|
3022
2996
|
ref.current = localRef.current;
|
|
3023
2997
|
}, [ref]);
|
|
3024
|
-
const [isHovered, setIsHovered] =
|
|
2998
|
+
const [isHovered, setIsHovered] = useState7(false);
|
|
3025
2999
|
const sortable = type === "actions" ? false : _sortable;
|
|
3026
3000
|
const headId = useMemo8(
|
|
3027
3001
|
() => `${tableId}_header_${headerName ?? field}`.trim(),
|
|
3028
3002
|
[tableId, headerName, field]
|
|
3029
3003
|
);
|
|
3030
|
-
const isResizingRef =
|
|
3004
|
+
const isResizingRef = useRef4(false);
|
|
3031
3005
|
const resizer = useMemo8(
|
|
3032
3006
|
() => resizable ?? true ? Resizer(
|
|
3033
3007
|
ref,
|
|
@@ -3111,7 +3085,7 @@ var HeadCell = (props) => {
|
|
|
3111
3085
|
ref: localRef,
|
|
3112
3086
|
key: field,
|
|
3113
3087
|
style,
|
|
3114
|
-
onClick:
|
|
3088
|
+
onClick: useCallback8(
|
|
3115
3089
|
(e) => {
|
|
3116
3090
|
if (isResizingRef.current) return;
|
|
3117
3091
|
if (!(e.target instanceof Element) || !e.currentTarget.contains(e.target)) return;
|
|
@@ -3150,8 +3124,8 @@ var BodyCell = (props) => {
|
|
|
3150
3124
|
onCellEditStop
|
|
3151
3125
|
} = props;
|
|
3152
3126
|
const theme = useTheme();
|
|
3153
|
-
const [value, setValue] =
|
|
3154
|
-
const cellRef =
|
|
3127
|
+
const [value, setValue] = useState7(row[field]);
|
|
3128
|
+
const cellRef = useRef4(null);
|
|
3155
3129
|
const params = useMemo8(
|
|
3156
3130
|
() => ({
|
|
3157
3131
|
row,
|
|
@@ -3296,7 +3270,7 @@ var BodyCell = (props) => {
|
|
|
3296
3270
|
() => (typeof cellClassName === "function" ? cellClassName(params) : cellClassName) || "",
|
|
3297
3271
|
[cellClassName, params]
|
|
3298
3272
|
);
|
|
3299
|
-
|
|
3273
|
+
useEffect4(() => {
|
|
3300
3274
|
setValue(row[field]);
|
|
3301
3275
|
}, [row, field]);
|
|
3302
3276
|
return /* @__PURE__ */ React22.createElement(
|
|
@@ -3366,10 +3340,10 @@ var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
|
|
|
3366
3340
|
});
|
|
3367
3341
|
|
|
3368
3342
|
// src/components/DataTable/hooks.ts
|
|
3369
|
-
import { useState as
|
|
3343
|
+
import { useState as useState8, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useMemo as useMemo9, useCallback as useCallback9, useEffect as useEffect5, createRef } from "react";
|
|
3370
3344
|
function useColumnWidths(columnsByField) {
|
|
3371
|
-
const [widths, setWidths] =
|
|
3372
|
-
const roRef =
|
|
3345
|
+
const [widths, setWidths] = useState8({});
|
|
3346
|
+
const roRef = useRef5();
|
|
3373
3347
|
useLayoutEffect2(() => {
|
|
3374
3348
|
if (roRef.current) roRef.current.disconnect();
|
|
3375
3349
|
roRef.current = new ResizeObserver((entries) => {
|
|
@@ -3427,19 +3401,19 @@ function useDataTableRenderer({
|
|
|
3427
3401
|
"You cannot use both `pinnedColumns` and `columnGroupingModel` at the same time. Please choose one of them."
|
|
3428
3402
|
);
|
|
3429
3403
|
}
|
|
3430
|
-
const onSelectionModelChangeRef =
|
|
3404
|
+
const onSelectionModelChangeRef = useRef5(onSelectionModelChange);
|
|
3431
3405
|
onSelectionModelChangeRef.current = onSelectionModelChange;
|
|
3432
|
-
const [focusedRowId, setFocusedRowId] =
|
|
3433
|
-
const [selectionAnchor, setSelectionAnchor] =
|
|
3406
|
+
const [focusedRowId, setFocusedRowId] = useState8(null);
|
|
3407
|
+
const [selectionAnchor, setSelectionAnchor] = useState8(null);
|
|
3434
3408
|
const [sortModel, setSortModel] = useControlledState(
|
|
3435
3409
|
controlledSortModel,
|
|
3436
3410
|
initialState?.sorting?.sortModel ?? [],
|
|
3437
|
-
|
|
3411
|
+
useCallback9((sortModel2) => onSortModelChange?.(sortModel2), [onSortModelChange])
|
|
3438
3412
|
);
|
|
3439
3413
|
const [visibilityModel] = useControlledState(
|
|
3440
3414
|
columnVisibilityModel,
|
|
3441
3415
|
initialState?.columns?.columnVisibilityModel ?? {},
|
|
3442
|
-
|
|
3416
|
+
useCallback9(
|
|
3443
3417
|
(model) => onColumnVisibilityModelChange?.(model),
|
|
3444
3418
|
[onColumnVisibilityModelChange]
|
|
3445
3419
|
)
|
|
@@ -3485,7 +3459,7 @@ function useDataTableRenderer({
|
|
|
3485
3459
|
),
|
|
3486
3460
|
[visibleColumns]
|
|
3487
3461
|
);
|
|
3488
|
-
const sortComparator =
|
|
3462
|
+
const sortComparator = useCallback9(
|
|
3489
3463
|
(rowA, rowB) => {
|
|
3490
3464
|
for (const sort of sortModel) {
|
|
3491
3465
|
const { field, sort: direction } = sort;
|
|
@@ -3522,9 +3496,9 @@ function useDataTableRenderer({
|
|
|
3522
3496
|
() => Array.from(new Set(_sortOrder || ["asc", "desc", null])),
|
|
3523
3497
|
[_sortOrder]
|
|
3524
3498
|
);
|
|
3525
|
-
const [page, setPage] =
|
|
3499
|
+
const [page, setPage] = useState8(paginationModel?.page || 1);
|
|
3526
3500
|
const pageSize = paginationModel?.pageSize || 20;
|
|
3527
|
-
const getId =
|
|
3501
|
+
const getId = useCallback9(
|
|
3528
3502
|
(row, index) => _getId?.(row) ?? row.id ?? `${(index || 0) + (page - 1) * pageSize}`,
|
|
3529
3503
|
[_getId, page, pageSize]
|
|
3530
3504
|
);
|
|
@@ -3540,7 +3514,7 @@ function useDataTableRenderer({
|
|
|
3540
3514
|
}),
|
|
3541
3515
|
[dataInPage, isRowSelectable, getId]
|
|
3542
3516
|
);
|
|
3543
|
-
const handleRangeSelection =
|
|
3517
|
+
const handleRangeSelection = useCallback9(
|
|
3544
3518
|
(anchor, targetIndex) => {
|
|
3545
3519
|
const startIndex = Math.min(anchor.rowIndex, targetIndex);
|
|
3546
3520
|
const endIndex = Math.max(anchor.rowIndex, targetIndex);
|
|
@@ -3577,7 +3551,7 @@ function useDataTableRenderer({
|
|
|
3577
3551
|
[_isTotalSelected, selectionModel, selectableRowCount]
|
|
3578
3552
|
);
|
|
3579
3553
|
const columnWidths = useColumnWidths(visibleColumnsByField);
|
|
3580
|
-
const getWidth =
|
|
3554
|
+
const getWidth = useCallback9(
|
|
3581
3555
|
(f) => columnWidths[f] ?? allColumnsByField[f]?.width ?? // Column prop 으로 지정된 width
|
|
3582
3556
|
allColumnsByField[f]?.minWidth ?? 0,
|
|
3583
3557
|
[columnWidths, allColumnsByField]
|
|
@@ -3629,14 +3603,14 @@ function useDataTableRenderer({
|
|
|
3629
3603
|
sortOrder,
|
|
3630
3604
|
getWidth
|
|
3631
3605
|
]);
|
|
3632
|
-
const handlePageChange =
|
|
3606
|
+
const handlePageChange = useCallback9(
|
|
3633
3607
|
(newPage) => {
|
|
3634
3608
|
setPage(newPage);
|
|
3635
3609
|
onPaginationModelChange?.({ page: newPage, pageSize });
|
|
3636
3610
|
},
|
|
3637
3611
|
[onPaginationModelChange, pageSize]
|
|
3638
3612
|
);
|
|
3639
|
-
const handleSortChange =
|
|
3613
|
+
const handleSortChange = useCallback9(
|
|
3640
3614
|
(props) => {
|
|
3641
3615
|
const { field, currentSort, multiple } = props;
|
|
3642
3616
|
const column = allColumnsByField[field];
|
|
@@ -3659,29 +3633,29 @@ function useDataTableRenderer({
|
|
|
3659
3633
|
},
|
|
3660
3634
|
[sortOrder, allColumnsByField, sortModel, setSortModel]
|
|
3661
3635
|
);
|
|
3662
|
-
|
|
3636
|
+
useEffect5(() => {
|
|
3663
3637
|
if (!paginationModel) {
|
|
3664
3638
|
handlePageChange(1);
|
|
3665
3639
|
}
|
|
3666
3640
|
}, [rowCount, handlePageChange, paginationModel]);
|
|
3667
|
-
|
|
3641
|
+
useEffect5(() => {
|
|
3668
3642
|
const lastPage = Math.max(1, Math.ceil(rowCount / pageSize));
|
|
3669
3643
|
if (page > lastPage) {
|
|
3670
3644
|
handlePageChange(lastPage);
|
|
3671
3645
|
}
|
|
3672
3646
|
}, [page, rowCount, pageSize, handlePageChange]);
|
|
3673
|
-
|
|
3647
|
+
useEffect5(() => {
|
|
3674
3648
|
onSelectionModelChangeRef.current?.([]);
|
|
3675
3649
|
setSelectionAnchor(null);
|
|
3676
3650
|
}, [page]);
|
|
3677
|
-
const prevRowsRef =
|
|
3678
|
-
|
|
3651
|
+
const prevRowsRef = useRef5(_rows);
|
|
3652
|
+
useEffect5(() => {
|
|
3679
3653
|
if (prevRowsRef.current !== _rows) {
|
|
3680
3654
|
setSelectionAnchor(null);
|
|
3681
3655
|
prevRowsRef.current = _rows;
|
|
3682
3656
|
}
|
|
3683
3657
|
}, [_rows]);
|
|
3684
|
-
const handleAutoFit =
|
|
3658
|
+
const handleAutoFit = useCallback9(
|
|
3685
3659
|
(field) => {
|
|
3686
3660
|
const colDef = visibleColumnsByField[field];
|
|
3687
3661
|
if (!colDef?.headerRef.current) return;
|
|
@@ -3714,8 +3688,8 @@ function useDataTableRenderer({
|
|
|
3714
3688
|
handleAutoFit,
|
|
3715
3689
|
isAllSelected,
|
|
3716
3690
|
isTotalSelected,
|
|
3717
|
-
isSelectedRow:
|
|
3718
|
-
isRowSelectable:
|
|
3691
|
+
isSelectedRow: useCallback9((model) => selectedModelSet.has(model), [selectedModelSet]),
|
|
3692
|
+
isRowSelectable: useCallback9(
|
|
3719
3693
|
(rowId, row) => {
|
|
3720
3694
|
if (!isRowSelectable) return true;
|
|
3721
3695
|
return isRowSelectable({ row, id: rowId });
|
|
@@ -3723,13 +3697,13 @@ function useDataTableRenderer({
|
|
|
3723
3697
|
[isRowSelectable]
|
|
3724
3698
|
),
|
|
3725
3699
|
focusedRowId,
|
|
3726
|
-
onRowFocus:
|
|
3700
|
+
onRowFocus: useCallback9((rowId) => {
|
|
3727
3701
|
setFocusedRowId(rowId);
|
|
3728
3702
|
}, []),
|
|
3729
|
-
onAllCheckboxChange:
|
|
3703
|
+
onAllCheckboxChange: useCallback9(() => {
|
|
3730
3704
|
onSelectionModelChange?.(isAllSelected ? [] : selectableDataInPage.map(getId));
|
|
3731
3705
|
}, [isAllSelected, selectableDataInPage, onSelectionModelChange, getId]),
|
|
3732
|
-
onCheckboxChange:
|
|
3706
|
+
onCheckboxChange: useCallback9(
|
|
3733
3707
|
(event, selectedModel) => {
|
|
3734
3708
|
const isShiftClick = "shiftKey" in event && event.shiftKey;
|
|
3735
3709
|
const rowIndex = dataInPage.findIndex((row, i) => getId(row, i) === selectedModel);
|
|
@@ -3763,7 +3737,7 @@ function useDataTableRenderer({
|
|
|
3763
3737
|
columns,
|
|
3764
3738
|
tableMinWidth,
|
|
3765
3739
|
processedColumnGroups,
|
|
3766
|
-
onTotalSelect:
|
|
3740
|
+
onTotalSelect: useCallback9(() => {
|
|
3767
3741
|
const selectableRows = rows.filter((row, i) => {
|
|
3768
3742
|
if (!isRowSelectable) return true;
|
|
3769
3743
|
return isRowSelectable({ row, id: getId(row, i) });
|
|
@@ -3848,7 +3822,7 @@ function TableBody(props) {
|
|
|
3848
3822
|
TableBody.displayName = "TableBody";
|
|
3849
3823
|
|
|
3850
3824
|
// src/components/Pagination/Pagination.tsx
|
|
3851
|
-
import React24, { useCallback as
|
|
3825
|
+
import React24, { useCallback as useCallback10, useEffect as useEffect6 } from "react";
|
|
3852
3826
|
import PreviousIcon from "@mui/icons-material/ChevronLeftRounded";
|
|
3853
3827
|
import NextIcon from "@mui/icons-material/ChevronRightRounded";
|
|
3854
3828
|
import FirstPageIcon from "@mui/icons-material/FirstPageRounded";
|
|
@@ -3917,7 +3891,7 @@ function Pagination(props) {
|
|
|
3917
3891
|
const [paginationModel, setPaginationModel] = useControlledState(
|
|
3918
3892
|
_paginationModel,
|
|
3919
3893
|
defaultPaginationModel,
|
|
3920
|
-
|
|
3894
|
+
useCallback10(
|
|
3921
3895
|
(newPage) => {
|
|
3922
3896
|
onPageChange(newPage.page);
|
|
3923
3897
|
},
|
|
@@ -3933,7 +3907,7 @@ function Pagination(props) {
|
|
|
3933
3907
|
const afterPages = [paginationModel.page + 1, paginationModel.page + 2].filter((p) => p <= lastPage - 1);
|
|
3934
3908
|
const isMoreAfterPages = lastPage > 1 && paginationModel.page < lastPage - 3;
|
|
3935
3909
|
const isMoreBeforePages = lastPage > 1 && paginationModel.page > 4;
|
|
3936
|
-
|
|
3910
|
+
useEffect6(() => {
|
|
3937
3911
|
if (paginationModel.page > lastPage) {
|
|
3938
3912
|
setPaginationModel({ ...paginationModel, page: lastPage });
|
|
3939
3913
|
}
|
|
@@ -4126,8 +4100,8 @@ function Component(props, apiRef) {
|
|
|
4126
4100
|
...innerProps
|
|
4127
4101
|
} = props;
|
|
4128
4102
|
const tableId = useId();
|
|
4129
|
-
const parentRef =
|
|
4130
|
-
const tableBodyRef =
|
|
4103
|
+
const parentRef = useRef6(null);
|
|
4104
|
+
const tableBodyRef = useRef6(null);
|
|
4131
4105
|
const {
|
|
4132
4106
|
columns,
|
|
4133
4107
|
processedColumnGroups,
|
|
@@ -4168,20 +4142,20 @@ function Component(props, apiRef) {
|
|
|
4168
4142
|
const virtualizedItems = virtualizer.getVirtualItems();
|
|
4169
4143
|
const showNoRowsOverlay = !loading && rowCount === 0;
|
|
4170
4144
|
const totalColCount = Math.max(1, columns.length + (checkboxSelection ? 1 : 0));
|
|
4171
|
-
const getRowClickHandler =
|
|
4145
|
+
const getRowClickHandler = useCallback11(
|
|
4172
4146
|
(row, rowId) => (e) => {
|
|
4173
4147
|
onRowClick?.({ row, rowId }, e);
|
|
4174
4148
|
checkboxSelection && !disableSelectionOnClick && isRowSelectableCheck(rowId, row) && onCheckboxChange(e, rowId);
|
|
4175
4149
|
},
|
|
4176
4150
|
[onRowClick, checkboxSelection, disableSelectionOnClick, onCheckboxChange, isRowSelectableCheck]
|
|
4177
4151
|
);
|
|
4178
|
-
const getRowFocusHandler =
|
|
4152
|
+
const getRowFocusHandler = useCallback11(
|
|
4179
4153
|
(rowId) => () => {
|
|
4180
4154
|
onRowFocus(rowId);
|
|
4181
4155
|
},
|
|
4182
4156
|
[onRowFocus]
|
|
4183
4157
|
);
|
|
4184
|
-
const getCheckboxClickHandler =
|
|
4158
|
+
const getCheckboxClickHandler = useCallback11(
|
|
4185
4159
|
(rowId, row) => (e) => {
|
|
4186
4160
|
e.stopPropagation();
|
|
4187
4161
|
if (isRowSelectableCheck(rowId, row)) {
|
|
@@ -4191,7 +4165,7 @@ function Component(props, apiRef) {
|
|
|
4191
4165
|
},
|
|
4192
4166
|
[onCheckboxChange, isRowSelectableCheck, onRowFocus]
|
|
4193
4167
|
);
|
|
4194
|
-
const handleTableKeyDown =
|
|
4168
|
+
const handleTableKeyDown = useCallback11(
|
|
4195
4169
|
(e) => {
|
|
4196
4170
|
const supportedKeys = ["ArrowUp", "ArrowDown", " ", "Home", "End", "PageUp", "PageDown"];
|
|
4197
4171
|
if (!supportedKeys.includes(e.key)) return;
|
|
@@ -4547,7 +4521,7 @@ var DataTable = forwardRef7(Component);
|
|
|
4547
4521
|
DataTable.displayName = "DataTable";
|
|
4548
4522
|
|
|
4549
4523
|
// src/components/DateRangePicker/DateRangePicker.tsx
|
|
4550
|
-
import React26, { forwardRef as forwardRef8, useCallback as
|
|
4524
|
+
import React26, { forwardRef as forwardRef8, useCallback as useCallback12, useEffect as useEffect7, useImperativeHandle as useImperativeHandle3, useMemo as useMemo11, useRef as useRef7, useState as useState9 } from "react";
|
|
4551
4525
|
import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
|
|
4552
4526
|
import CalendarTodayIcon2 from "@mui/icons-material/CalendarToday";
|
|
4553
4527
|
import { styled as styled14, useThemeProps as useThemeProps5 } from "@mui/joy";
|
|
@@ -4708,23 +4682,23 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4708
4682
|
readOnly,
|
|
4709
4683
|
...innerProps
|
|
4710
4684
|
} = props;
|
|
4711
|
-
const innerRef =
|
|
4712
|
-
const buttonRef =
|
|
4685
|
+
const innerRef = useRef7(null);
|
|
4686
|
+
const buttonRef = useRef7(null);
|
|
4713
4687
|
const [value, setValue] = useControlledState(
|
|
4714
4688
|
props.value,
|
|
4715
4689
|
props.defaultValue || "",
|
|
4716
|
-
|
|
4690
|
+
useCallback12((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
4717
4691
|
);
|
|
4718
|
-
const [displayValue, setDisplayValue] =
|
|
4692
|
+
const [displayValue, setDisplayValue] = useState9(
|
|
4719
4693
|
() => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
|
|
4720
4694
|
);
|
|
4721
|
-
const [anchorEl, setAnchorEl] =
|
|
4695
|
+
const [anchorEl, setAnchorEl] = useState9(null);
|
|
4722
4696
|
const open = Boolean(anchorEl);
|
|
4723
4697
|
const calendarValue = useMemo11(
|
|
4724
4698
|
() => value ? parseDates(value, format) : void 0,
|
|
4725
4699
|
[value, format]
|
|
4726
4700
|
);
|
|
4727
|
-
|
|
4701
|
+
useEffect7(() => {
|
|
4728
4702
|
if (value) {
|
|
4729
4703
|
try {
|
|
4730
4704
|
const dates = parseDates(value, format);
|
|
@@ -4736,13 +4710,13 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4736
4710
|
setDisplayValue("");
|
|
4737
4711
|
}
|
|
4738
4712
|
}, [displayFormat, value, format]);
|
|
4739
|
-
|
|
4713
|
+
useEffect7(() => {
|
|
4740
4714
|
if (!anchorEl) {
|
|
4741
4715
|
innerRef.current?.blur();
|
|
4742
4716
|
}
|
|
4743
4717
|
}, [anchorEl, innerRef]);
|
|
4744
4718
|
useImperativeHandle3(ref, () => innerRef.current, [innerRef]);
|
|
4745
|
-
const handleChange =
|
|
4719
|
+
const handleChange = useCallback12(
|
|
4746
4720
|
(event) => {
|
|
4747
4721
|
const value2 = event.target.value;
|
|
4748
4722
|
setDisplayValue(value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2);
|
|
@@ -4750,7 +4724,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4750
4724
|
},
|
|
4751
4725
|
[displayFormat, format, setValue]
|
|
4752
4726
|
);
|
|
4753
|
-
const handleDisplayInputChange =
|
|
4727
|
+
const handleDisplayInputChange = useCallback12(
|
|
4754
4728
|
(event) => {
|
|
4755
4729
|
if (event.target.value === "") {
|
|
4756
4730
|
handleChange({
|
|
@@ -4775,14 +4749,14 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4775
4749
|
},
|
|
4776
4750
|
[displayFormat, format, handleChange, props.name]
|
|
4777
4751
|
);
|
|
4778
|
-
const handleCalendarToggle =
|
|
4752
|
+
const handleCalendarToggle = useCallback12(
|
|
4779
4753
|
(event) => {
|
|
4780
4754
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
4781
4755
|
innerRef.current?.focus();
|
|
4782
4756
|
},
|
|
4783
4757
|
[anchorEl, setAnchorEl, innerRef]
|
|
4784
4758
|
);
|
|
4785
|
-
const handleCalendarChange =
|
|
4759
|
+
const handleCalendarChange = useCallback12(
|
|
4786
4760
|
([date1, date2]) => {
|
|
4787
4761
|
if (!date1 || !date2) return;
|
|
4788
4762
|
const formattedValue = formatValueString2([date1, date2], format);
|
|
@@ -4796,7 +4770,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4796
4770
|
},
|
|
4797
4771
|
[props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat]
|
|
4798
4772
|
);
|
|
4799
|
-
const handleInputMouseDown =
|
|
4773
|
+
const handleInputMouseDown = useCallback12(
|
|
4800
4774
|
(event) => {
|
|
4801
4775
|
if (inputReadOnly) {
|
|
4802
4776
|
event.preventDefault();
|
|
@@ -5005,13 +4979,13 @@ var InsetDrawer = styled19(JoyDrawer)(({ theme }) => ({
|
|
|
5005
4979
|
}));
|
|
5006
4980
|
|
|
5007
4981
|
// src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
|
|
5008
|
-
import React30, { useCallback as
|
|
4982
|
+
import React30, { useCallback as useCallback13, useEffect as useEffect8, useMemo as useMemo12, useRef as useRef8, useState as useState10 } from "react";
|
|
5009
4983
|
import SearchIcon from "@mui/icons-material/Search";
|
|
5010
4984
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
5011
4985
|
function LabelWithTooltip(props) {
|
|
5012
4986
|
const { label, size } = props;
|
|
5013
|
-
const labelContentRef =
|
|
5014
|
-
const [isOverflowing, setIsOverflowing] =
|
|
4987
|
+
const labelContentRef = useRef8(null);
|
|
4988
|
+
const [isOverflowing, setIsOverflowing] = useState10(false);
|
|
5015
4989
|
const labelContent = /* @__PURE__ */ React30.createElement(
|
|
5016
4990
|
"span",
|
|
5017
4991
|
{
|
|
@@ -5028,7 +5002,7 @@ function LabelWithTooltip(props) {
|
|
|
5028
5002
|
},
|
|
5029
5003
|
label
|
|
5030
5004
|
);
|
|
5031
|
-
|
|
5005
|
+
useEffect8(() => {
|
|
5032
5006
|
const element = labelContentRef.current;
|
|
5033
5007
|
if (element) {
|
|
5034
5008
|
setIsOverflowing(element.scrollWidth > element.clientWidth);
|
|
@@ -5052,16 +5026,16 @@ function FilterableCheckboxGroup(props) {
|
|
|
5052
5026
|
maxHeight = 300,
|
|
5053
5027
|
disabled
|
|
5054
5028
|
} = props;
|
|
5055
|
-
const [searchTerm, setSearchTerm] =
|
|
5056
|
-
const [sortedOptions, setSortedOptions] =
|
|
5029
|
+
const [searchTerm, setSearchTerm] = useState10("");
|
|
5030
|
+
const [sortedOptions, setSortedOptions] = useState10(options);
|
|
5057
5031
|
const [internalValue, setInternalValue] = useControlledState(
|
|
5058
5032
|
value,
|
|
5059
5033
|
value ?? [],
|
|
5060
|
-
|
|
5034
|
+
useCallback13((newValue) => onChange?.(newValue), [onChange])
|
|
5061
5035
|
);
|
|
5062
|
-
const parentRef =
|
|
5063
|
-
const isInitialSortRef =
|
|
5064
|
-
const prevOptionsRef =
|
|
5036
|
+
const parentRef = useRef8(null);
|
|
5037
|
+
const isInitialSortRef = useRef8(false);
|
|
5038
|
+
const prevOptionsRef = useRef8([...options]);
|
|
5065
5039
|
const filteredOptions = useMemo12(() => {
|
|
5066
5040
|
if (!searchTerm) return sortedOptions;
|
|
5067
5041
|
return sortedOptions.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
@@ -5084,7 +5058,7 @@ function FilterableCheckboxGroup(props) {
|
|
|
5084
5058
|
overscan: 5
|
|
5085
5059
|
});
|
|
5086
5060
|
const items = virtualizer.getVirtualItems();
|
|
5087
|
-
|
|
5061
|
+
useEffect8(() => {
|
|
5088
5062
|
const optionsChanged = prevOptionsRef.current.length !== options.length || prevOptionsRef.current.some(
|
|
5089
5063
|
(prevOption, index) => prevOption.value !== options[index]?.value || prevOption.label !== options[index]?.label || prevOption.disabled !== options[index]?.disabled
|
|
5090
5064
|
);
|
|
@@ -5110,13 +5084,13 @@ function FilterableCheckboxGroup(props) {
|
|
|
5110
5084
|
}
|
|
5111
5085
|
}
|
|
5112
5086
|
}, [options, value]);
|
|
5113
|
-
|
|
5087
|
+
useEffect8(() => {
|
|
5114
5088
|
virtualizer.measure();
|
|
5115
5089
|
}, [virtualizer, filteredOptions, size]);
|
|
5116
|
-
const handleSearchChange =
|
|
5090
|
+
const handleSearchChange = useCallback13((event) => {
|
|
5117
5091
|
setSearchTerm(event.target.value);
|
|
5118
5092
|
}, []);
|
|
5119
|
-
const handleCheckboxChange =
|
|
5093
|
+
const handleCheckboxChange = useCallback13(
|
|
5120
5094
|
(optionValue) => (event) => {
|
|
5121
5095
|
const checked = event.target.checked;
|
|
5122
5096
|
const newValue = checked ? [...internalValue, optionValue] : internalValue.filter((v) => v !== optionValue);
|
|
@@ -5124,7 +5098,7 @@ function FilterableCheckboxGroup(props) {
|
|
|
5124
5098
|
},
|
|
5125
5099
|
[internalValue, setInternalValue]
|
|
5126
5100
|
);
|
|
5127
|
-
const handleSelectAll =
|
|
5101
|
+
const handleSelectAll = useCallback13(
|
|
5128
5102
|
(event) => {
|
|
5129
5103
|
const checked = event.target.checked;
|
|
5130
5104
|
const enabledOptions = filteredOptions.filter((option) => !option.disabled);
|
|
@@ -5228,16 +5202,16 @@ function FilterableCheckboxGroup(props) {
|
|
|
5228
5202
|
FilterableCheckboxGroup.displayName = "FilterableCheckboxGroup";
|
|
5229
5203
|
|
|
5230
5204
|
// src/components/FilterMenu/FilterMenu.tsx
|
|
5231
|
-
import React41, { useCallback as
|
|
5205
|
+
import React41, { useCallback as useCallback23 } from "react";
|
|
5232
5206
|
import { Button as Button2, Stack as Stack11 } from "@mui/joy";
|
|
5233
5207
|
|
|
5234
5208
|
// src/components/FilterMenu/components/CheckboxGroup.tsx
|
|
5235
|
-
import React31, { useCallback as
|
|
5209
|
+
import React31, { useCallback as useCallback14 } from "react";
|
|
5236
5210
|
import { Stack as Stack2 } from "@mui/joy";
|
|
5237
5211
|
function CheckboxGroup(props) {
|
|
5238
5212
|
const { id, label, options, value, onChange, hidden } = props;
|
|
5239
5213
|
const [internalValue, setInternalValue] = useControlledState(value, [], onChange);
|
|
5240
|
-
const handleCheckboxChange =
|
|
5214
|
+
const handleCheckboxChange = useCallback14(
|
|
5241
5215
|
(optionValue) => (event) => {
|
|
5242
5216
|
const checked = event.target.checked;
|
|
5243
5217
|
let newValue;
|
|
@@ -5266,12 +5240,12 @@ function CheckboxGroup(props) {
|
|
|
5266
5240
|
CheckboxGroup.displayName = "CheckboxGroup";
|
|
5267
5241
|
|
|
5268
5242
|
// src/components/FilterMenu/components/FilterableCheckboxGroup.tsx
|
|
5269
|
-
import React32, { useCallback as
|
|
5243
|
+
import React32, { useCallback as useCallback15 } from "react";
|
|
5270
5244
|
import { Stack as Stack3 } from "@mui/joy";
|
|
5271
5245
|
function FilterableCheckboxGroup2(props) {
|
|
5272
5246
|
const { id, label, options, value, onChange, hidden, placeholder, maxHeight } = props;
|
|
5273
5247
|
const [internalValue, setInternalValue] = useControlledState(value, [], onChange);
|
|
5274
|
-
const handleChange =
|
|
5248
|
+
const handleChange = useCallback15(
|
|
5275
5249
|
(newValue) => {
|
|
5276
5250
|
setInternalValue(newValue);
|
|
5277
5251
|
},
|
|
@@ -5295,7 +5269,7 @@ function FilterableCheckboxGroup2(props) {
|
|
|
5295
5269
|
FilterableCheckboxGroup2.displayName = "FilterableCheckboxGroup";
|
|
5296
5270
|
|
|
5297
5271
|
// src/components/FilterMenu/components/RadioGroup.tsx
|
|
5298
|
-
import React33, { useCallback as
|
|
5272
|
+
import React33, { useCallback as useCallback16 } from "react";
|
|
5299
5273
|
|
|
5300
5274
|
// src/components/Radio/Radio.tsx
|
|
5301
5275
|
import { Radio as JoyRadio, RadioGroup as JoyRadioGroup } from "@mui/joy";
|
|
@@ -5312,7 +5286,7 @@ import { Stack as Stack4 } from "@mui/joy";
|
|
|
5312
5286
|
function RadioGroup2(props) {
|
|
5313
5287
|
const { id, label, options, value, onChange, hidden } = props;
|
|
5314
5288
|
const [internalValue, setInternalValue] = useControlledState(value, value ?? "", onChange);
|
|
5315
|
-
const handleRadioChange =
|
|
5289
|
+
const handleRadioChange = useCallback16(
|
|
5316
5290
|
(event) => {
|
|
5317
5291
|
const newValue = event.target.value;
|
|
5318
5292
|
const option = options.find((opt) => opt.value.toString() === newValue);
|
|
@@ -5329,7 +5303,7 @@ function RadioGroup2(props) {
|
|
|
5329
5303
|
RadioGroup2.displayName = "RadioGroup";
|
|
5330
5304
|
|
|
5331
5305
|
// src/components/FilterMenu/components/DateRange.tsx
|
|
5332
|
-
import React34, { useCallback as
|
|
5306
|
+
import React34, { useCallback as useCallback17, useMemo as useMemo13, useState as useState11, useEffect as useEffect9 } from "react";
|
|
5333
5307
|
import { Stack as Stack5 } from "@mui/joy";
|
|
5334
5308
|
function DateRange(props) {
|
|
5335
5309
|
const {
|
|
@@ -5347,7 +5321,7 @@ function DateRange(props) {
|
|
|
5347
5321
|
hideClearButton
|
|
5348
5322
|
} = props;
|
|
5349
5323
|
const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
|
|
5350
|
-
const [selectedOption, setSelectedOption] =
|
|
5324
|
+
const [selectedOption, setSelectedOption] = useState11("all-time");
|
|
5351
5325
|
const dateRangeOptions = useMemo13(
|
|
5352
5326
|
() => [
|
|
5353
5327
|
{ label: "All Time", value: "all-time" },
|
|
@@ -5358,7 +5332,7 @@ function DateRange(props) {
|
|
|
5358
5332
|
],
|
|
5359
5333
|
[]
|
|
5360
5334
|
);
|
|
5361
|
-
const getDateRangeForOption =
|
|
5335
|
+
const getDateRangeForOption = useCallback17(
|
|
5362
5336
|
(option) => {
|
|
5363
5337
|
const now = /* @__PURE__ */ new Date();
|
|
5364
5338
|
const currentYear = now.getFullYear();
|
|
@@ -5397,7 +5371,7 @@ function DateRange(props) {
|
|
|
5397
5371
|
},
|
|
5398
5372
|
[internalValue]
|
|
5399
5373
|
);
|
|
5400
|
-
const determineOptionFromValue =
|
|
5374
|
+
const determineOptionFromValue = useCallback17(
|
|
5401
5375
|
(value2) => {
|
|
5402
5376
|
if (!value2) {
|
|
5403
5377
|
return "all-time";
|
|
@@ -5419,11 +5393,11 @@ function DateRange(props) {
|
|
|
5419
5393
|
}
|
|
5420
5394
|
return "";
|
|
5421
5395
|
}, [selectedOption, internalValue]);
|
|
5422
|
-
|
|
5396
|
+
useEffect9(() => {
|
|
5423
5397
|
const newOption = determineOptionFromValue(internalValue);
|
|
5424
5398
|
setSelectedOption(newOption);
|
|
5425
5399
|
}, [internalValue, determineOptionFromValue]);
|
|
5426
|
-
const handleOptionChange =
|
|
5400
|
+
const handleOptionChange = useCallback17(
|
|
5427
5401
|
(event) => {
|
|
5428
5402
|
const newOption = event.target.value;
|
|
5429
5403
|
setSelectedOption(newOption);
|
|
@@ -5432,7 +5406,7 @@ function DateRange(props) {
|
|
|
5432
5406
|
},
|
|
5433
5407
|
[getDateRangeForOption, setInternalValue]
|
|
5434
5408
|
);
|
|
5435
|
-
const handleCustomDateChange =
|
|
5409
|
+
const handleCustomDateChange = useCallback17(
|
|
5436
5410
|
(event) => {
|
|
5437
5411
|
const dateRangeString = event.target.value;
|
|
5438
5412
|
if (dateRangeString && dateRangeString.includes(" - ")) {
|
|
@@ -5472,12 +5446,12 @@ function DateRange(props) {
|
|
|
5472
5446
|
DateRange.displayName = "DateRange";
|
|
5473
5447
|
|
|
5474
5448
|
// src/components/FilterMenu/components/CurrencyInput.tsx
|
|
5475
|
-
import React35, { useCallback as
|
|
5449
|
+
import React35, { useCallback as useCallback18 } from "react";
|
|
5476
5450
|
import { Stack as Stack6 } from "@mui/joy";
|
|
5477
5451
|
function CurrencyInput3(props) {
|
|
5478
5452
|
const { id, label, value, onChange, hidden, max, placeholder, useMinorUnit, currency = "USD" } = props;
|
|
5479
5453
|
const [internalValue, setInternalValue] = useControlledState(value, value, onChange);
|
|
5480
|
-
const handleCurrencyChange =
|
|
5454
|
+
const handleCurrencyChange = useCallback18(
|
|
5481
5455
|
(event) => {
|
|
5482
5456
|
const newValue = event.target.value;
|
|
5483
5457
|
setInternalValue(newValue);
|
|
@@ -5503,14 +5477,14 @@ function CurrencyInput3(props) {
|
|
|
5503
5477
|
CurrencyInput3.displayName = "CurrencyInput";
|
|
5504
5478
|
|
|
5505
5479
|
// src/components/FilterMenu/components/CurrencyRange.tsx
|
|
5506
|
-
import React36, { useCallback as
|
|
5480
|
+
import React36, { useCallback as useCallback19 } from "react";
|
|
5507
5481
|
import { Stack as Stack7 } from "@mui/joy";
|
|
5508
5482
|
function CurrencyRange(props) {
|
|
5509
5483
|
const { id, label, value, onChange, hidden, max, placeholder, useMinorUnit, currency = "USD" } = props;
|
|
5510
5484
|
const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
|
|
5511
5485
|
const minValue = internalValue?.[0];
|
|
5512
5486
|
const maxValue = internalValue?.[1];
|
|
5513
|
-
const handleMinChange =
|
|
5487
|
+
const handleMinChange = useCallback19(
|
|
5514
5488
|
(event) => {
|
|
5515
5489
|
const newMinValue = event.target.value;
|
|
5516
5490
|
const currentMaxValue = maxValue;
|
|
@@ -5524,7 +5498,7 @@ function CurrencyRange(props) {
|
|
|
5524
5498
|
},
|
|
5525
5499
|
[maxValue, setInternalValue]
|
|
5526
5500
|
);
|
|
5527
|
-
const handleMaxChange =
|
|
5501
|
+
const handleMaxChange = useCallback19(
|
|
5528
5502
|
(event) => {
|
|
5529
5503
|
const newMaxValue = event.target.value;
|
|
5530
5504
|
const currentMinValue = minValue;
|
|
@@ -5576,7 +5550,7 @@ import React38 from "react";
|
|
|
5576
5550
|
import { Stack as Stack8, Typography as Typography5 } from "@mui/joy";
|
|
5577
5551
|
|
|
5578
5552
|
// src/components/PercentageInput/PercentageInput.tsx
|
|
5579
|
-
import React37, { useCallback as
|
|
5553
|
+
import React37, { useCallback as useCallback20, useMemo as useMemo14, useState as useState12 } from "react";
|
|
5580
5554
|
import { NumericFormat as NumericFormat2 } from "react-number-format";
|
|
5581
5555
|
import { styled as styled20, useThemeProps as useThemeProps6 } from "@mui/joy";
|
|
5582
5556
|
var padDecimal = (value, decimalScale) => {
|
|
@@ -5633,9 +5607,9 @@ var PercentageInput = React37.forwardRef(
|
|
|
5633
5607
|
const [_value, setValue] = useControlledState(
|
|
5634
5608
|
props.value,
|
|
5635
5609
|
props.defaultValue,
|
|
5636
|
-
|
|
5610
|
+
useCallback20((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
|
|
5637
5611
|
);
|
|
5638
|
-
const [internalError, setInternalError] =
|
|
5612
|
+
const [internalError, setInternalError] = useState12(
|
|
5639
5613
|
max && _value && _value > max || min && _value && _value < min
|
|
5640
5614
|
);
|
|
5641
5615
|
const value = useMemo14(() => {
|
|
@@ -5644,7 +5618,7 @@ var PercentageInput = React37.forwardRef(
|
|
|
5644
5618
|
}
|
|
5645
5619
|
return _value;
|
|
5646
5620
|
}, [_value, useMinorUnit, maxDecimalScale]);
|
|
5647
|
-
const handleChange =
|
|
5621
|
+
const handleChange = useCallback20(
|
|
5648
5622
|
(event) => {
|
|
5649
5623
|
if (event.target.value === "") {
|
|
5650
5624
|
setValue(void 0);
|
|
@@ -5723,7 +5697,7 @@ var PercentageInput3 = ({
|
|
|
5723
5697
|
};
|
|
5724
5698
|
|
|
5725
5699
|
// src/components/FilterMenu/components/PercentageRange.tsx
|
|
5726
|
-
import React39, { useCallback as
|
|
5700
|
+
import React39, { useCallback as useCallback21 } from "react";
|
|
5727
5701
|
import { Stack as Stack9 } from "@mui/joy";
|
|
5728
5702
|
function PercentageRange(props) {
|
|
5729
5703
|
const { id, label, value, onChange, hidden, useMinorUnit, maxDecimalScale, min, max } = props;
|
|
@@ -5734,7 +5708,7 @@ function PercentageRange(props) {
|
|
|
5734
5708
|
);
|
|
5735
5709
|
const minValue = internalValue?.[0];
|
|
5736
5710
|
const maxValue = internalValue?.[1];
|
|
5737
|
-
const handleMinChange =
|
|
5711
|
+
const handleMinChange = useCallback21(
|
|
5738
5712
|
(event) => {
|
|
5739
5713
|
const newMinValue = event.target.value;
|
|
5740
5714
|
const currentMaxValue = maxValue;
|
|
@@ -5746,7 +5720,7 @@ function PercentageRange(props) {
|
|
|
5746
5720
|
},
|
|
5747
5721
|
[maxValue, setInternalValue]
|
|
5748
5722
|
);
|
|
5749
|
-
const handleMaxChange =
|
|
5723
|
+
const handleMaxChange = useCallback21(
|
|
5750
5724
|
(event) => {
|
|
5751
5725
|
const newMaxValue = event.target.value;
|
|
5752
5726
|
const currentMinValue = minValue;
|
|
@@ -5794,13 +5768,13 @@ function PercentageRange(props) {
|
|
|
5794
5768
|
PercentageRange.displayName = "PercentageRange";
|
|
5795
5769
|
|
|
5796
5770
|
// src/components/FilterMenu/components/Autocomplete.tsx
|
|
5797
|
-
import React40, { useCallback as
|
|
5771
|
+
import React40, { useCallback as useCallback22 } from "react";
|
|
5798
5772
|
import { Stack as Stack10 } from "@mui/joy";
|
|
5799
5773
|
function Autocomplete2(props) {
|
|
5800
5774
|
const { id, label, value, onChange, options, multiple, hidden, placeholder } = props;
|
|
5801
5775
|
const [internalValue, setInternalValue] = useControlledState(value, void 0, onChange);
|
|
5802
5776
|
const autocompleteValue = typeof internalValue === "string" || typeof internalValue === "number" ? String(internalValue) : void 0;
|
|
5803
|
-
const handleChange =
|
|
5777
|
+
const handleChange = useCallback22(
|
|
5804
5778
|
(event) => {
|
|
5805
5779
|
const val = event.target.value;
|
|
5806
5780
|
if (val) {
|
|
@@ -5849,7 +5823,7 @@ function FilterMenu(props) {
|
|
|
5849
5823
|
void 0
|
|
5850
5824
|
// onChange는 Apply 버튼에서만 호출
|
|
5851
5825
|
);
|
|
5852
|
-
const handleFilterChange =
|
|
5826
|
+
const handleFilterChange = useCallback23(
|
|
5853
5827
|
(filterId, value) => {
|
|
5854
5828
|
setInternalValues((prev) => ({
|
|
5855
5829
|
...prev,
|
|
@@ -5858,11 +5832,11 @@ function FilterMenu(props) {
|
|
|
5858
5832
|
},
|
|
5859
5833
|
[setInternalValues]
|
|
5860
5834
|
);
|
|
5861
|
-
const handleApply =
|
|
5835
|
+
const handleApply = useCallback23(() => {
|
|
5862
5836
|
onChange?.(internalValues);
|
|
5863
5837
|
onClose?.();
|
|
5864
5838
|
}, [onChange, onClose, internalValues]);
|
|
5865
|
-
const handleClear =
|
|
5839
|
+
const handleClear = useCallback23(() => {
|
|
5866
5840
|
const clearedValues = resetValues || {};
|
|
5867
5841
|
setInternalValues(clearedValues);
|
|
5868
5842
|
onChange?.(clearedValues);
|
|
@@ -5898,7 +5872,7 @@ function FilterMenu(props) {
|
|
|
5898
5872
|
FilterMenu.displayName = "FilterMenu";
|
|
5899
5873
|
|
|
5900
5874
|
// src/components/Uploader/Uploader.tsx
|
|
5901
|
-
import React42, { useCallback as
|
|
5875
|
+
import React42, { useCallback as useCallback24, useEffect as useEffect10, useMemo as useMemo15, useRef as useRef9, useState as useState13 } from "react";
|
|
5902
5876
|
import { styled as styled21, Input as Input2 } from "@mui/joy";
|
|
5903
5877
|
import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
|
|
5904
5878
|
import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
|
|
@@ -6047,12 +6021,12 @@ var Uploader = React42.memo(
|
|
|
6047
6021
|
error: errorProp,
|
|
6048
6022
|
helperText: helperTextProp
|
|
6049
6023
|
} = props;
|
|
6050
|
-
const dropZoneRef =
|
|
6051
|
-
const inputRef =
|
|
6052
|
-
const [errorText, setErrorText] =
|
|
6053
|
-
const [files, setFiles] =
|
|
6054
|
-
const [uploaded, setUploaded] =
|
|
6055
|
-
const [previewState, setPreviewState] =
|
|
6024
|
+
const dropZoneRef = useRef9(null);
|
|
6025
|
+
const inputRef = useRef9(null);
|
|
6026
|
+
const [errorText, setErrorText] = useState13();
|
|
6027
|
+
const [files, setFiles] = useState13([]);
|
|
6028
|
+
const [uploaded, setUploaded] = useState13(props.uploaded || []);
|
|
6029
|
+
const [previewState, setPreviewState] = useState13("idle");
|
|
6056
6030
|
const accepts = useMemo15(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
|
|
6057
6031
|
const parsedAccepts = useMemo15(
|
|
6058
6032
|
() => accepts.flatMap((type) => {
|
|
@@ -6098,7 +6072,7 @@ var Uploader = React42.memo(
|
|
|
6098
6072
|
() => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
|
|
6099
6073
|
[files, maxCount, uploaded]
|
|
6100
6074
|
);
|
|
6101
|
-
const addFiles =
|
|
6075
|
+
const addFiles = useCallback24(
|
|
6102
6076
|
(uploads) => {
|
|
6103
6077
|
try {
|
|
6104
6078
|
const types = parsedAccepts.map((type) => type.replace(".", "")) || [];
|
|
@@ -6143,7 +6117,7 @@ var Uploader = React42.memo(
|
|
|
6143
6117
|
},
|
|
6144
6118
|
[files, uploaded, maxCount, parsedAccepts, maxFileSize, maxFileTotalSize, name, onChange]
|
|
6145
6119
|
);
|
|
6146
|
-
|
|
6120
|
+
useEffect10(() => {
|
|
6147
6121
|
if (!dropZoneRef.current || disabled) {
|
|
6148
6122
|
return;
|
|
6149
6123
|
}
|
|
@@ -6181,7 +6155,7 @@ var Uploader = React42.memo(
|
|
|
6181
6155
|
);
|
|
6182
6156
|
return () => cleanup?.();
|
|
6183
6157
|
}, [disabled, addFiles]);
|
|
6184
|
-
|
|
6158
|
+
useEffect10(() => {
|
|
6185
6159
|
if (inputRef.current && minCount) {
|
|
6186
6160
|
if (files.length < minCount) {
|
|
6187
6161
|
inputRef.current.setCustomValidity(`At least ${minCount} files are required.`);
|
|
@@ -6190,14 +6164,14 @@ var Uploader = React42.memo(
|
|
|
6190
6164
|
}
|
|
6191
6165
|
}
|
|
6192
6166
|
}, [inputRef, files, minCount]);
|
|
6193
|
-
const handleFileChanged =
|
|
6167
|
+
const handleFileChanged = useCallback24(
|
|
6194
6168
|
(event) => {
|
|
6195
6169
|
const files2 = Array.from(event.target.files || []);
|
|
6196
6170
|
addFiles(files2);
|
|
6197
6171
|
},
|
|
6198
6172
|
[addFiles]
|
|
6199
6173
|
);
|
|
6200
|
-
const handleDeleteFile =
|
|
6174
|
+
const handleDeleteFile = useCallback24(
|
|
6201
6175
|
(deletedFile) => {
|
|
6202
6176
|
if (deletedFile instanceof File) {
|
|
6203
6177
|
setFiles((current) => {
|
|
@@ -6217,7 +6191,7 @@ var Uploader = React42.memo(
|
|
|
6217
6191
|
},
|
|
6218
6192
|
[name, onChange, onDelete]
|
|
6219
6193
|
);
|
|
6220
|
-
const handleUploaderButtonClick =
|
|
6194
|
+
const handleUploaderButtonClick = useCallback24(() => {
|
|
6221
6195
|
inputRef.current?.click();
|
|
6222
6196
|
}, []);
|
|
6223
6197
|
const uploader = /* @__PURE__ */ React42.createElement(
|
|
@@ -6312,16 +6286,16 @@ function IconMenuButton(props) {
|
|
|
6312
6286
|
IconMenuButton.displayName = "IconMenuButton";
|
|
6313
6287
|
|
|
6314
6288
|
// src/components/Markdown/Markdown.tsx
|
|
6315
|
-
import React44, { lazy, Suspense, useEffect as
|
|
6289
|
+
import React44, { lazy, Suspense, useEffect as useEffect11, useState as useState14 } from "react";
|
|
6316
6290
|
import { Skeleton } from "@mui/joy";
|
|
6317
6291
|
import { Link as Link2 } from "@mui/joy";
|
|
6318
6292
|
import remarkGfm from "remark-gfm";
|
|
6319
6293
|
var LazyReactMarkdown = lazy(() => import("react-markdown"));
|
|
6320
6294
|
var Markdown = (props) => {
|
|
6321
|
-
const [
|
|
6322
|
-
|
|
6295
|
+
const [rehypeAccent2, setRehypeAccent] = useState14(null);
|
|
6296
|
+
useEffect11(() => {
|
|
6323
6297
|
const loadRehypeAccent = async () => {
|
|
6324
|
-
const module = await
|
|
6298
|
+
const module = await Promise.resolve().then(() => (init_rehype_accent(), rehype_accent_exports));
|
|
6325
6299
|
setRehypeAccent(() => module.rehypeAccent);
|
|
6326
6300
|
};
|
|
6327
6301
|
loadRehypeAccent();
|
|
@@ -6338,7 +6312,7 @@ var Markdown = (props) => {
|
|
|
6338
6312
|
fallback,
|
|
6339
6313
|
...innerProps
|
|
6340
6314
|
} = props;
|
|
6341
|
-
if (!
|
|
6315
|
+
if (!rehypeAccent2) {
|
|
6342
6316
|
return null;
|
|
6343
6317
|
}
|
|
6344
6318
|
return /* @__PURE__ */ React44.createElement(Typography, { component: "div", color, textColor, level: defaultLevel, ...innerProps }, /* @__PURE__ */ React44.createElement(
|
|
@@ -6351,7 +6325,7 @@ var Markdown = (props) => {
|
|
|
6351
6325
|
{
|
|
6352
6326
|
...markdownOptions,
|
|
6353
6327
|
children: content,
|
|
6354
|
-
rehypePlugins: [[
|
|
6328
|
+
rehypePlugins: [[rehypeAccent2, { accentColor }]],
|
|
6355
6329
|
remarkPlugins: [remarkGfm],
|
|
6356
6330
|
components: {
|
|
6357
6331
|
a: ({ children, href }) => /* @__PURE__ */ React44.createElement(Link2, { href, target: defaultLinkAction }, children),
|
|
@@ -6493,7 +6467,7 @@ function MenuButton(props) {
|
|
|
6493
6467
|
MenuButton.displayName = "MenuButton";
|
|
6494
6468
|
|
|
6495
6469
|
// src/components/MonthPicker/MonthPicker.tsx
|
|
6496
|
-
import React46, { forwardRef as forwardRef9, useCallback as
|
|
6470
|
+
import React46, { forwardRef as forwardRef9, useCallback as useCallback25, useEffect as useEffect12, useImperativeHandle as useImperativeHandle4, useRef as useRef10, useState as useState15 } from "react";
|
|
6497
6471
|
import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
|
|
6498
6472
|
import { styled as styled22, useThemeProps as useThemeProps7 } from "@mui/joy";
|
|
6499
6473
|
import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
|
|
@@ -6575,14 +6549,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
6575
6549
|
locale,
|
|
6576
6550
|
...innerProps
|
|
6577
6551
|
} = props;
|
|
6578
|
-
const innerRef =
|
|
6579
|
-
const buttonRef =
|
|
6552
|
+
const innerRef = useRef10(null);
|
|
6553
|
+
const buttonRef = useRef10(null);
|
|
6580
6554
|
const [value, setValue, isControlled] = useControlledState(
|
|
6581
6555
|
props.value,
|
|
6582
6556
|
props.defaultValue || "",
|
|
6583
|
-
|
|
6557
|
+
useCallback25((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
6584
6558
|
);
|
|
6585
|
-
const getFormattedDisplayValue =
|
|
6559
|
+
const getFormattedDisplayValue = useCallback25(
|
|
6586
6560
|
(inputValue) => {
|
|
6587
6561
|
if (!inputValue) return "";
|
|
6588
6562
|
try {
|
|
@@ -6593,19 +6567,19 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
6593
6567
|
},
|
|
6594
6568
|
[format, displayFormat, locale]
|
|
6595
6569
|
);
|
|
6596
|
-
const [displayValue, setDisplayValue] =
|
|
6597
|
-
const [anchorEl, setAnchorEl] =
|
|
6570
|
+
const [displayValue, setDisplayValue] = useState15(() => getFormattedDisplayValue(value));
|
|
6571
|
+
const [anchorEl, setAnchorEl] = useState15(null);
|
|
6598
6572
|
const open = Boolean(anchorEl);
|
|
6599
|
-
|
|
6573
|
+
useEffect12(() => {
|
|
6600
6574
|
if (!anchorEl) {
|
|
6601
6575
|
innerRef.current?.blur();
|
|
6602
6576
|
}
|
|
6603
6577
|
}, [anchorEl, innerRef]);
|
|
6604
6578
|
useImperativeHandle4(ref, () => innerRef.current, [innerRef]);
|
|
6605
|
-
|
|
6579
|
+
useEffect12(() => {
|
|
6606
6580
|
setDisplayValue(getFormattedDisplayValue(value));
|
|
6607
6581
|
}, [value, getFormattedDisplayValue]);
|
|
6608
|
-
const handleChange =
|
|
6582
|
+
const handleChange = useCallback25(
|
|
6609
6583
|
(event) => {
|
|
6610
6584
|
const newValue = event.target.value;
|
|
6611
6585
|
setValue(newValue);
|
|
@@ -6615,14 +6589,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
6615
6589
|
},
|
|
6616
6590
|
[setValue, getFormattedDisplayValue, isControlled]
|
|
6617
6591
|
);
|
|
6618
|
-
const handleCalendarToggle =
|
|
6592
|
+
const handleCalendarToggle = useCallback25(
|
|
6619
6593
|
(event) => {
|
|
6620
6594
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
6621
6595
|
innerRef.current?.focus();
|
|
6622
6596
|
},
|
|
6623
6597
|
[anchorEl, setAnchorEl, innerRef]
|
|
6624
6598
|
);
|
|
6625
|
-
const handleInputMouseDown =
|
|
6599
|
+
const handleInputMouseDown = useCallback25(
|
|
6626
6600
|
(event) => {
|
|
6627
6601
|
event.preventDefault();
|
|
6628
6602
|
buttonRef.current?.focus();
|
|
@@ -6746,7 +6720,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
6746
6720
|
});
|
|
6747
6721
|
|
|
6748
6722
|
// src/components/MonthRangePicker/MonthRangePicker.tsx
|
|
6749
|
-
import React47, { forwardRef as forwardRef10, useCallback as
|
|
6723
|
+
import React47, { forwardRef as forwardRef10, useCallback as useCallback26, useEffect as useEffect13, useImperativeHandle as useImperativeHandle5, useMemo as useMemo16, useRef as useRef11, useState as useState16 } from "react";
|
|
6750
6724
|
import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
|
|
6751
6725
|
import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
|
|
6752
6726
|
import { styled as styled23, useThemeProps as useThemeProps8 } from "@mui/joy";
|
|
@@ -6854,35 +6828,35 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
|
6854
6828
|
size,
|
|
6855
6829
|
...innerProps
|
|
6856
6830
|
} = props;
|
|
6857
|
-
const innerRef =
|
|
6831
|
+
const innerRef = useRef11(null);
|
|
6858
6832
|
const [value, setValue] = useControlledState(
|
|
6859
6833
|
props.value,
|
|
6860
6834
|
props.defaultValue || "",
|
|
6861
|
-
|
|
6835
|
+
useCallback26((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
6862
6836
|
);
|
|
6863
|
-
const [anchorEl, setAnchorEl] =
|
|
6837
|
+
const [anchorEl, setAnchorEl] = useState16(null);
|
|
6864
6838
|
const open = Boolean(anchorEl);
|
|
6865
6839
|
const calendarValue = useMemo16(() => value ? parseDates2(value) : void 0, [value]);
|
|
6866
|
-
|
|
6840
|
+
useEffect13(() => {
|
|
6867
6841
|
if (!anchorEl) {
|
|
6868
6842
|
innerRef.current?.blur();
|
|
6869
6843
|
}
|
|
6870
6844
|
}, [anchorEl, innerRef]);
|
|
6871
6845
|
useImperativeHandle5(ref, () => innerRef.current, [innerRef]);
|
|
6872
|
-
const handleChange =
|
|
6846
|
+
const handleChange = useCallback26(
|
|
6873
6847
|
(event) => {
|
|
6874
6848
|
setValue(event.target.value);
|
|
6875
6849
|
},
|
|
6876
6850
|
[setValue]
|
|
6877
6851
|
);
|
|
6878
|
-
const handleCalendarToggle =
|
|
6852
|
+
const handleCalendarToggle = useCallback26(
|
|
6879
6853
|
(event) => {
|
|
6880
6854
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
6881
6855
|
innerRef.current?.focus();
|
|
6882
6856
|
},
|
|
6883
6857
|
[anchorEl, setAnchorEl, innerRef]
|
|
6884
6858
|
);
|
|
6885
|
-
const handleCalendarChange =
|
|
6859
|
+
const handleCalendarChange = useCallback26(
|
|
6886
6860
|
([date1, date2]) => {
|
|
6887
6861
|
if (!date1 || !date2) return;
|
|
6888
6862
|
setValue(formatValueString4([date1, date2], format));
|
|
@@ -7109,7 +7083,7 @@ function Navigator(props) {
|
|
|
7109
7083
|
Navigator.displayName = "Navigator";
|
|
7110
7084
|
|
|
7111
7085
|
// src/components/ProfileMenu/ProfileMenu.tsx
|
|
7112
|
-
import React51, { useCallback as
|
|
7086
|
+
import React51, { useCallback as useCallback27, useMemo as useMemo17 } from "react";
|
|
7113
7087
|
import { Dropdown as Dropdown2, ListDivider, menuItemClasses, styled as styled26, MenuButton as MenuButton2 } from "@mui/joy";
|
|
7114
7088
|
import { ClickAwayListener as ClickAwayListener5 } from "@mui/base";
|
|
7115
7089
|
import DropdownIcon from "@mui/icons-material/ArrowDropDown";
|
|
@@ -7161,7 +7135,7 @@ function ProfileMenu(props) {
|
|
|
7161
7135
|
const [open, setOpen] = useControlledState(
|
|
7162
7136
|
_open,
|
|
7163
7137
|
defaultOpen ?? false,
|
|
7164
|
-
|
|
7138
|
+
useCallback27((value) => onOpenChange?.(value), [onOpenChange])
|
|
7165
7139
|
);
|
|
7166
7140
|
return /* @__PURE__ */ React51.createElement(ClickAwayListener5, { onClickAway: () => setOpen(false) }, /* @__PURE__ */ React51.createElement("div", null, /* @__PURE__ */ React51.createElement(Dropdown2, { open }, /* @__PURE__ */ React51.createElement(
|
|
7167
7141
|
ProfileMenuButton,
|
|
@@ -7359,8 +7333,90 @@ function RadioList(props) {
|
|
|
7359
7333
|
}
|
|
7360
7334
|
RadioList.displayName = "RadioList";
|
|
7361
7335
|
|
|
7336
|
+
// src/components/SearchBar/SearchBar.tsx
|
|
7337
|
+
import React54, { useState as useState17 } from "react";
|
|
7338
|
+
import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
|
|
7339
|
+
import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
|
|
7340
|
+
function SearchBar(props) {
|
|
7341
|
+
const { hideSelect = false, options, value, onChange, onSearch } = props;
|
|
7342
|
+
const [selectVal, setSelectVal] = useState17(options?.[0]?.value ?? "");
|
|
7343
|
+
const [isHovered, setIsHovered] = useState17(false);
|
|
7344
|
+
const selectedOption = options?.find((o) => o.value === selectVal);
|
|
7345
|
+
const placeholder = selectedOption?.placeholder ?? "";
|
|
7346
|
+
const handleSearch = () => {
|
|
7347
|
+
onSearch?.({ selectValue: hideSelect ? void 0 : selectVal, inputValue: value });
|
|
7348
|
+
};
|
|
7349
|
+
const handleClear = () => {
|
|
7350
|
+
onChange("");
|
|
7351
|
+
};
|
|
7352
|
+
const handleKeyDown = (e) => {
|
|
7353
|
+
if (e.key === "Enter") {
|
|
7354
|
+
handleSearch();
|
|
7355
|
+
}
|
|
7356
|
+
};
|
|
7357
|
+
return /* @__PURE__ */ React54.createElement(
|
|
7358
|
+
Stack,
|
|
7359
|
+
{
|
|
7360
|
+
direction: "row",
|
|
7361
|
+
sx: {
|
|
7362
|
+
width: hideSelect ? "220px" : "300px",
|
|
7363
|
+
bgcolor: "background.surface",
|
|
7364
|
+
borderRadius: "sm",
|
|
7365
|
+
border: 1,
|
|
7366
|
+
borderColor: "neutral.outlinedBorder"
|
|
7367
|
+
}
|
|
7368
|
+
},
|
|
7369
|
+
!hideSelect && options && /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(
|
|
7370
|
+
Select,
|
|
7371
|
+
{
|
|
7372
|
+
variant: "plain",
|
|
7373
|
+
size: "sm",
|
|
7374
|
+
color: "neutral",
|
|
7375
|
+
value: selectVal,
|
|
7376
|
+
options,
|
|
7377
|
+
onChange: (_, newValue) => setSelectVal(newValue),
|
|
7378
|
+
sx: { flex: 1, maxWidth: "110px" },
|
|
7379
|
+
slotProps: {
|
|
7380
|
+
button: {
|
|
7381
|
+
style: { display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
|
|
7382
|
+
}
|
|
7383
|
+
}
|
|
7384
|
+
}
|
|
7385
|
+
), /* @__PURE__ */ React54.createElement(Divider, { orientation: "vertical", sx: { height: "16px", alignSelf: "center" } })),
|
|
7386
|
+
/* @__PURE__ */ React54.createElement(
|
|
7387
|
+
Input,
|
|
7388
|
+
{
|
|
7389
|
+
variant: "plain",
|
|
7390
|
+
size: "sm",
|
|
7391
|
+
color: "neutral",
|
|
7392
|
+
placeholder,
|
|
7393
|
+
value,
|
|
7394
|
+
onChange: (e) => onChange(e.target.value),
|
|
7395
|
+
onKeyDown: handleKeyDown,
|
|
7396
|
+
sx: { flex: 1, minWidth: 0 },
|
|
7397
|
+
onMouseEnter: () => setIsHovered(true),
|
|
7398
|
+
onMouseLeave: () => setIsHovered(false),
|
|
7399
|
+
endDecorator: isHovered && value ? /* @__PURE__ */ React54.createElement(
|
|
7400
|
+
IconButton,
|
|
7401
|
+
{
|
|
7402
|
+
variant: "plain",
|
|
7403
|
+
size: "sm",
|
|
7404
|
+
color: "neutral",
|
|
7405
|
+
onMouseDown: (e) => e.preventDefault(),
|
|
7406
|
+
onClick: handleClear,
|
|
7407
|
+
"aria-label": "Clear"
|
|
7408
|
+
},
|
|
7409
|
+
/* @__PURE__ */ React54.createElement(CloseRoundedIcon, null)
|
|
7410
|
+
) : void 0
|
|
7411
|
+
}
|
|
7412
|
+
),
|
|
7413
|
+
/* @__PURE__ */ React54.createElement(IconButton, { variant: "plain", size: "sm", color: "neutral", onClick: handleSearch, "aria-label": "Search" }, /* @__PURE__ */ React54.createElement(SearchRoundedIcon, null))
|
|
7414
|
+
);
|
|
7415
|
+
}
|
|
7416
|
+
SearchBar.displayName = "SearchBar";
|
|
7417
|
+
|
|
7362
7418
|
// src/components/Stepper/Stepper.tsx
|
|
7363
|
-
import
|
|
7419
|
+
import React55 from "react";
|
|
7364
7420
|
import {
|
|
7365
7421
|
Stepper as JoyStepper,
|
|
7366
7422
|
Step as JoyStep,
|
|
@@ -7396,7 +7452,7 @@ function Stepper(props) {
|
|
|
7396
7452
|
stepOrientation = "horizontal"
|
|
7397
7453
|
} = props;
|
|
7398
7454
|
const effectiveStepOrientation = orientation === "vertical" ? "horizontal" : stepOrientation;
|
|
7399
|
-
return /* @__PURE__ */
|
|
7455
|
+
return /* @__PURE__ */ React55.createElement(
|
|
7400
7456
|
MotionStepper,
|
|
7401
7457
|
{
|
|
7402
7458
|
orientation,
|
|
@@ -7435,23 +7491,23 @@ function Stepper(props) {
|
|
|
7435
7491
|
const completed = activeStep > i + 1;
|
|
7436
7492
|
const disabled = activeStep < i + 1;
|
|
7437
7493
|
const hasContent = step.label || step.extraContent;
|
|
7438
|
-
return /* @__PURE__ */
|
|
7494
|
+
return /* @__PURE__ */ React55.createElement(
|
|
7439
7495
|
Step,
|
|
7440
7496
|
{
|
|
7441
7497
|
key: `step-${i}`,
|
|
7442
|
-
indicator: /* @__PURE__ */
|
|
7498
|
+
indicator: /* @__PURE__ */ React55.createElement(StepIndicator, { variant: disabled ? "outlined" : "solid", color: disabled ? "neutral" : "primary" }, completed ? /* @__PURE__ */ React55.createElement(CheckIcon, null) : step.indicatorContent),
|
|
7443
7499
|
active,
|
|
7444
7500
|
completed,
|
|
7445
7501
|
disabled,
|
|
7446
7502
|
orientation: effectiveStepOrientation
|
|
7447
7503
|
},
|
|
7448
|
-
hasContent && /* @__PURE__ */
|
|
7504
|
+
hasContent && /* @__PURE__ */ React55.createElement(
|
|
7449
7505
|
Stack_default,
|
|
7450
7506
|
{
|
|
7451
7507
|
sx: orientation === "horizontal" && effectiveStepOrientation === "vertical" ? { alignItems: "center" } : {}
|
|
7452
7508
|
},
|
|
7453
|
-
step.label && /* @__PURE__ */
|
|
7454
|
-
step.extraContent && /* @__PURE__ */
|
|
7509
|
+
step.label && /* @__PURE__ */ React55.createElement(Typography_default, { level: "title-sm" }, step.label),
|
|
7510
|
+
step.extraContent && /* @__PURE__ */ React55.createElement(Typography_default, { level: "body-xs" }, step.extraContent)
|
|
7455
7511
|
)
|
|
7456
7512
|
);
|
|
7457
7513
|
})
|
|
@@ -7460,7 +7516,7 @@ function Stepper(props) {
|
|
|
7460
7516
|
Stepper.displayName = "Stepper";
|
|
7461
7517
|
|
|
7462
7518
|
// src/components/Switch/Switch.tsx
|
|
7463
|
-
import
|
|
7519
|
+
import React56 from "react";
|
|
7464
7520
|
import { Switch as JoySwitch, styled as styled29, switchClasses } from "@mui/joy";
|
|
7465
7521
|
import { motion as motion27 } from "framer-motion";
|
|
7466
7522
|
var MotionSwitch = motion27(JoySwitch);
|
|
@@ -7482,14 +7538,14 @@ var StyledThumb = styled29(motion27.div)({
|
|
|
7482
7538
|
right: "var(--Switch-thumbOffset)"
|
|
7483
7539
|
}
|
|
7484
7540
|
});
|
|
7485
|
-
var Thumb = (props) => /* @__PURE__ */
|
|
7541
|
+
var Thumb = (props) => /* @__PURE__ */ React56.createElement(StyledThumb, { ...props, layout: true, transition: spring });
|
|
7486
7542
|
var spring = {
|
|
7487
7543
|
type: "spring",
|
|
7488
7544
|
stiffness: 700,
|
|
7489
7545
|
damping: 30
|
|
7490
7546
|
};
|
|
7491
7547
|
var Switch = (props) => {
|
|
7492
|
-
return /* @__PURE__ */
|
|
7548
|
+
return /* @__PURE__ */ React56.createElement(
|
|
7493
7549
|
MotionSwitch,
|
|
7494
7550
|
{
|
|
7495
7551
|
...props,
|
|
@@ -7503,7 +7559,7 @@ var Switch = (props) => {
|
|
|
7503
7559
|
Switch.displayName = "Switch";
|
|
7504
7560
|
|
|
7505
7561
|
// src/components/Tabs/Tabs.tsx
|
|
7506
|
-
import
|
|
7562
|
+
import React57, { forwardRef as forwardRef11 } from "react";
|
|
7507
7563
|
import {
|
|
7508
7564
|
Tabs as JoyTabs,
|
|
7509
7565
|
Tab as JoyTab,
|
|
@@ -7527,14 +7583,14 @@ var StyledTab = styled30(JoyTab)(({ theme }) => ({
|
|
|
7527
7583
|
}
|
|
7528
7584
|
}));
|
|
7529
7585
|
var Tab = forwardRef11(function Tab2({ startDecorator, endDecorator, children, ...props }, ref) {
|
|
7530
|
-
return /* @__PURE__ */
|
|
7586
|
+
return /* @__PURE__ */ React57.createElement(StyledTab, { ...props, ref }, startDecorator, children, endDecorator);
|
|
7531
7587
|
});
|
|
7532
7588
|
Tab.displayName = "Tab";
|
|
7533
7589
|
var TabList = JoyTabList;
|
|
7534
7590
|
var TabPanel = JoyTabPanel;
|
|
7535
7591
|
|
|
7536
7592
|
// src/components/ThemeProvider/ThemeProvider.tsx
|
|
7537
|
-
import
|
|
7593
|
+
import React58 from "react";
|
|
7538
7594
|
import { CssBaseline, CssVarsProvider, checkboxClasses, extendTheme, inputClasses } from "@mui/joy";
|
|
7539
7595
|
var colorScheme = {
|
|
7540
7596
|
palette: {
|
|
@@ -7813,7 +7869,7 @@ var defaultTheme = extendTheme({
|
|
|
7813
7869
|
});
|
|
7814
7870
|
function ThemeProvider(props) {
|
|
7815
7871
|
const theme = props.theme || defaultTheme;
|
|
7816
|
-
return /* @__PURE__ */
|
|
7872
|
+
return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(CssVarsProvider, { theme }, /* @__PURE__ */ React58.createElement(CssBaseline, null), props.children));
|
|
7817
7873
|
}
|
|
7818
7874
|
ThemeProvider.displayName = "ThemeProvider";
|
|
7819
7875
|
export {
|
|
@@ -7897,6 +7953,7 @@ export {
|
|
|
7897
7953
|
RadioGroup,
|
|
7898
7954
|
RadioList,
|
|
7899
7955
|
RadioTileGroup,
|
|
7956
|
+
SearchBar,
|
|
7900
7957
|
Select,
|
|
7901
7958
|
Sheet,
|
|
7902
7959
|
Skeleton2 as Skeleton,
|