@ceed/ads 1.23.4 → 1.24.0
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/inputs/Autocomplete.md +351 -107
- package/dist/components/inputs/FormControl.md +12 -19
- package/dist/index.browser.js +5 -5
- package/dist/index.browser.js.map +4 -4
- package/dist/index.cjs +266 -181
- package/dist/index.js +341 -256
- package/framer/index.js +43 -43
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -749,11 +749,24 @@ Button.displayName = "Button";
|
|
|
749
749
|
var Button_default = Button;
|
|
750
750
|
|
|
751
751
|
// src/components/Calendar/Calendar.tsx
|
|
752
|
-
import
|
|
752
|
+
import React12, { Fragment, forwardRef as forwardRef4, useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState4 } from "react";
|
|
753
753
|
import { styled as styled5 } from "@mui/joy";
|
|
754
754
|
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
|
|
755
755
|
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
|
756
|
-
import { AnimatePresence, motion as
|
|
756
|
+
import { AnimatePresence, motion as motion13 } from "framer-motion";
|
|
757
|
+
|
|
758
|
+
// src/components/Tooltip/Tooltip.tsx
|
|
759
|
+
import React10 from "react";
|
|
760
|
+
import { Tooltip as JoyTooltip } from "@mui/joy";
|
|
761
|
+
import { motion as motion12 } from "framer-motion";
|
|
762
|
+
var MotionTooltip = motion12(JoyTooltip);
|
|
763
|
+
var Tooltip = (props) => {
|
|
764
|
+
return /* @__PURE__ */ React10.createElement(MotionTooltip, { ...props });
|
|
765
|
+
};
|
|
766
|
+
Tooltip.displayName = "Tooltip";
|
|
767
|
+
|
|
768
|
+
// src/components/Tooltip/index.ts
|
|
769
|
+
var Tooltip_default = Tooltip;
|
|
757
770
|
|
|
758
771
|
// src/components/Calendar/utils/index.ts
|
|
759
772
|
var getCalendarDates = (date) => {
|
|
@@ -1112,6 +1125,12 @@ var useCalendar = (ownerState) => {
|
|
|
1112
1125
|
};
|
|
1113
1126
|
|
|
1114
1127
|
// src/components/Calendar/Calendar.tsx
|
|
1128
|
+
var MONTH_VIEW_HINT_MESSAGE = "Click the month title to view all months.";
|
|
1129
|
+
var MONTH_NAV_CLICK_WINDOW_MS = 1200;
|
|
1130
|
+
var MONTH_NAV_CLICK_THRESHOLD = 3;
|
|
1131
|
+
var MONTH_VIEW_HINT_DURATION_MS = 5e3;
|
|
1132
|
+
var MONTH_VIEW_HINT_COOLDOWN_MS = 3e4;
|
|
1133
|
+
var lastMonthViewAssistHintShownAt = 0;
|
|
1115
1134
|
var CalendarRoot = styled5("div", {
|
|
1116
1135
|
name: "Calendar",
|
|
1117
1136
|
slot: "root"
|
|
@@ -1138,7 +1157,7 @@ var CalendarViewContainer = styled5("div", {
|
|
|
1138
1157
|
overflow: "hidden",
|
|
1139
1158
|
minHeight: calendarType === "datePicker" ? "250px" : "unset"
|
|
1140
1159
|
}));
|
|
1141
|
-
var CalendarViewTable = styled5(
|
|
1160
|
+
var CalendarViewTable = styled5(motion13.table, {
|
|
1142
1161
|
name: "Calendar",
|
|
1143
1162
|
slot: "viewTable"
|
|
1144
1163
|
})(({ theme }) => ({
|
|
@@ -1318,7 +1337,7 @@ var PickerDays = (props) => {
|
|
|
1318
1337
|
const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
|
|
1319
1338
|
const calendarDates = useMemo4(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
|
|
1320
1339
|
const weekdayNames = useMemo4(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
|
|
1321
|
-
return /* @__PURE__ */
|
|
1340
|
+
return /* @__PURE__ */ React12.createElement(CalendarViewContainer, { calendarType: "datePicker" }, /* @__PURE__ */ React12.createElement(AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ React12.createElement(
|
|
1322
1341
|
CalendarViewTable,
|
|
1323
1342
|
{
|
|
1324
1343
|
key: `${ownerState.viewMonth.toString()}_${ownerState.direction}`,
|
|
@@ -1347,10 +1366,10 @@ var PickerDays = (props) => {
|
|
|
1347
1366
|
}
|
|
1348
1367
|
}
|
|
1349
1368
|
},
|
|
1350
|
-
/* @__PURE__ */
|
|
1351
|
-
/* @__PURE__ */
|
|
1352
|
-
(date, i) => date ? /* @__PURE__ */
|
|
1353
|
-
)), rowIndex < calendarDates.length - 1 && /* @__PURE__ */
|
|
1369
|
+
/* @__PURE__ */ React12.createElement(CalendarWeekHeaderContainer, null, /* @__PURE__ */ React12.createElement("tr", null, weekdayNames.map((name, i) => /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` }, /* @__PURE__ */ React12.createElement("th", null, /* @__PURE__ */ React12.createElement(Typography_default, { level: "body-xs", textAlign: "center" }, name)), i < 6 && /* @__PURE__ */ React12.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" }))))),
|
|
1370
|
+
/* @__PURE__ */ React12.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ React12.createElement("tr", null, weekDates.map(
|
|
1371
|
+
(date, i) => date ? /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ React12.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ React12.createElement(CalendarDay, { size: "sm", variant: "plain", color: "neutral", ...getPickerDayProps(date) }, date)), i < 6 && /* @__PURE__ */ React12.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ React12.createElement("td", null), i < 6 && /* @__PURE__ */ React12.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
|
|
1372
|
+
)), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ React12.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React12.createElement("td", { colSpan: 13, style: { height: 4 } })))))
|
|
1354
1373
|
)));
|
|
1355
1374
|
};
|
|
1356
1375
|
var PickerMonths = (props) => {
|
|
@@ -1367,7 +1386,7 @@ var PickerMonths = (props) => {
|
|
|
1367
1386
|
[[]]
|
|
1368
1387
|
);
|
|
1369
1388
|
const isMonthPicker = !ownerState.views?.find((view) => view === "day");
|
|
1370
|
-
return /* @__PURE__ */
|
|
1389
|
+
return /* @__PURE__ */ React12.createElement(CalendarViewContainer, { calendarType: isMonthPicker ? "monthPicker" : "datePicker" }, /* @__PURE__ */ React12.createElement(AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ React12.createElement(
|
|
1371
1390
|
CalendarViewTable,
|
|
1372
1391
|
{
|
|
1373
1392
|
key: `${ownerState.viewMonth.getFullYear()}_${ownerState.direction}`,
|
|
@@ -1396,7 +1415,7 @@ var PickerMonths = (props) => {
|
|
|
1396
1415
|
}
|
|
1397
1416
|
}
|
|
1398
1417
|
},
|
|
1399
|
-
/* @__PURE__ */
|
|
1418
|
+
/* @__PURE__ */ React12.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ React12.createElement(Fragment, { key: months.join("_") }, /* @__PURE__ */ React12.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ React12.createElement(Fragment, { key: monthIndex }, /* @__PURE__ */ React12.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ React12.createElement(CalendarMonth, { size: "sm", variant: "plain", color: "neutral", ...getPickerMonthProps(monthIndex) }, getMonthNameFromIndex(monthIndex, ownerState.locale))), j < 3 && /* @__PURE__ */ React12.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))), i < chunkedMonths.length - 1 && /* @__PURE__ */ React12.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React12.createElement("td", { colSpan: 7, style: { height: 4 } })))))
|
|
1400
1419
|
)));
|
|
1401
1420
|
};
|
|
1402
1421
|
var Calendar = forwardRef4((inProps, ref) => {
|
|
@@ -1418,17 +1437,96 @@ var Calendar = forwardRef4((inProps, ref) => {
|
|
|
1418
1437
|
...others
|
|
1419
1438
|
} = props;
|
|
1420
1439
|
const { calendarTitle, onPrev, onNext } = useCalendar(ownerState);
|
|
1421
|
-
|
|
1422
|
-
|
|
1440
|
+
const [isMonthViewAssistHintOpen, setIsMonthViewAssistHintOpen] = useState4(false);
|
|
1441
|
+
const monthNavClickTimestampsRef = useRef3([]);
|
|
1442
|
+
const monthViewAssistHintShownInSessionRef = useRef3(false);
|
|
1443
|
+
const monthViewAssistHintTimeoutRef = useRef3(null);
|
|
1444
|
+
const hasEndDate = Boolean(value?.[1]);
|
|
1445
|
+
const isRangeHintEligible = Boolean(rangeSelection && !hasEndDate);
|
|
1446
|
+
const isHintEligible = Boolean(view === "day" && (!rangeSelection || isRangeHintEligible));
|
|
1447
|
+
const monthViewHintMessage = MONTH_VIEW_HINT_MESSAGE;
|
|
1448
|
+
useEffect3(() => {
|
|
1449
|
+
if (!isHintEligible) {
|
|
1450
|
+
monthNavClickTimestampsRef.current = [];
|
|
1451
|
+
setIsMonthViewAssistHintOpen(false);
|
|
1452
|
+
}
|
|
1453
|
+
}, [isHintEligible]);
|
|
1454
|
+
useEffect3(() => {
|
|
1455
|
+
return () => {
|
|
1456
|
+
if (monthViewAssistHintTimeoutRef.current) {
|
|
1457
|
+
clearTimeout(monthViewAssistHintTimeoutRef.current);
|
|
1458
|
+
}
|
|
1459
|
+
};
|
|
1460
|
+
}, []);
|
|
1461
|
+
const closeMonthViewAssistHint = useCallback5(() => {
|
|
1462
|
+
if (monthViewAssistHintTimeoutRef.current) {
|
|
1463
|
+
clearTimeout(monthViewAssistHintTimeoutRef.current);
|
|
1464
|
+
monthViewAssistHintTimeoutRef.current = null;
|
|
1465
|
+
}
|
|
1466
|
+
setIsMonthViewAssistHintOpen(false);
|
|
1467
|
+
}, []);
|
|
1468
|
+
const showMonthViewAssistHint = useCallback5(() => {
|
|
1469
|
+
const now = Date.now();
|
|
1470
|
+
if (monthViewAssistHintShownInSessionRef.current) return;
|
|
1471
|
+
if (now - lastMonthViewAssistHintShownAt < MONTH_VIEW_HINT_COOLDOWN_MS) return;
|
|
1472
|
+
monthViewAssistHintShownInSessionRef.current = true;
|
|
1473
|
+
lastMonthViewAssistHintShownAt = now;
|
|
1474
|
+
setIsMonthViewAssistHintOpen(true);
|
|
1475
|
+
if (monthViewAssistHintTimeoutRef.current) {
|
|
1476
|
+
clearTimeout(monthViewAssistHintTimeoutRef.current);
|
|
1477
|
+
}
|
|
1478
|
+
monthViewAssistHintTimeoutRef.current = setTimeout(() => {
|
|
1479
|
+
setIsMonthViewAssistHintOpen(false);
|
|
1480
|
+
monthViewAssistHintTimeoutRef.current = null;
|
|
1481
|
+
}, MONTH_VIEW_HINT_DURATION_MS);
|
|
1482
|
+
}, []);
|
|
1483
|
+
const trackFastMonthNavigation = useCallback5(() => {
|
|
1484
|
+
if (!isHintEligible) return;
|
|
1485
|
+
const now = Date.now();
|
|
1486
|
+
monthNavClickTimestampsRef.current = [
|
|
1487
|
+
...monthNavClickTimestampsRef.current.filter((timestamp) => now - timestamp <= MONTH_NAV_CLICK_WINDOW_MS),
|
|
1488
|
+
now
|
|
1489
|
+
];
|
|
1490
|
+
if (monthNavClickTimestampsRef.current.length >= MONTH_NAV_CLICK_THRESHOLD) {
|
|
1491
|
+
showMonthViewAssistHint();
|
|
1492
|
+
}
|
|
1493
|
+
}, [isHintEligible, showMonthViewAssistHint]);
|
|
1494
|
+
const handlePrevClick = useCallback5(() => {
|
|
1495
|
+
onPrev();
|
|
1496
|
+
trackFastMonthNavigation();
|
|
1497
|
+
}, [onPrev, trackFastMonthNavigation]);
|
|
1498
|
+
const handleNextClick = useCallback5(() => {
|
|
1499
|
+
onNext();
|
|
1500
|
+
trackFastMonthNavigation();
|
|
1501
|
+
}, [onNext, trackFastMonthNavigation]);
|
|
1502
|
+
const handleSwitchViewClick = useCallback5(() => {
|
|
1503
|
+
closeMonthViewAssistHint();
|
|
1504
|
+
onViewChange?.();
|
|
1505
|
+
}, [closeMonthViewAssistHint, onViewChange]);
|
|
1506
|
+
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(
|
|
1507
|
+
Tooltip_default,
|
|
1423
1508
|
{
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1509
|
+
title: monthViewHintMessage,
|
|
1510
|
+
arrow: true,
|
|
1511
|
+
open: isMonthViewAssistHintOpen,
|
|
1512
|
+
placement: "bottom",
|
|
1513
|
+
disableFocusListener: true,
|
|
1514
|
+
disableHoverListener: true,
|
|
1515
|
+
disableTouchListener: true,
|
|
1516
|
+
variant: "solid"
|
|
1429
1517
|
},
|
|
1430
|
-
|
|
1431
|
-
|
|
1518
|
+
/* @__PURE__ */ React12.createElement(
|
|
1519
|
+
CalendarSwitchViewButton,
|
|
1520
|
+
{
|
|
1521
|
+
ownerState,
|
|
1522
|
+
variant: "plain",
|
|
1523
|
+
color: "neutral",
|
|
1524
|
+
onClick: handleSwitchViewClick,
|
|
1525
|
+
"aria-label": "Switch Calendar View"
|
|
1526
|
+
},
|
|
1527
|
+
calendarTitle
|
|
1528
|
+
)
|
|
1529
|
+
), /* @__PURE__ */ React12.createElement(IconButton_default, { size: "sm", onClick: handleNextClick, "aria-label": `Next ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ React12.createElement(ChevronRightIcon, null))), view === "day" && /* @__PURE__ */ React12.createElement(PickerDays, { ownerState }), view === "month" && /* @__PURE__ */ React12.createElement(PickerMonths, { ownerState }));
|
|
1432
1530
|
});
|
|
1433
1531
|
Calendar.displayName = "Calendar";
|
|
1434
1532
|
|
|
@@ -1443,30 +1541,30 @@ import {
|
|
|
1443
1541
|
CardActions as JoyCardActions,
|
|
1444
1542
|
CardOverflow as JoyCardOverflow
|
|
1445
1543
|
} from "@mui/joy";
|
|
1446
|
-
import { motion as
|
|
1447
|
-
var MotionCard =
|
|
1544
|
+
import { motion as motion14 } from "framer-motion";
|
|
1545
|
+
var MotionCard = motion14(JoyCard);
|
|
1448
1546
|
var Card = MotionCard;
|
|
1449
1547
|
Card.displayName = "Card";
|
|
1450
|
-
var MotionCardContent =
|
|
1548
|
+
var MotionCardContent = motion14(JoyCardContent);
|
|
1451
1549
|
var CardContent = MotionCardContent;
|
|
1452
1550
|
CardContent.displayName = "CardContent";
|
|
1453
|
-
var MotionCardCover =
|
|
1551
|
+
var MotionCardCover = motion14(JoyCardCover);
|
|
1454
1552
|
var CardCover = MotionCardCover;
|
|
1455
1553
|
CardCover.displayName = "CardCover";
|
|
1456
|
-
var MotionCardActions =
|
|
1554
|
+
var MotionCardActions = motion14(JoyCardActions);
|
|
1457
1555
|
var CardActions = MotionCardActions;
|
|
1458
1556
|
CardActions.displayName = "CardActions";
|
|
1459
|
-
var MotionCardOverflow =
|
|
1557
|
+
var MotionCardOverflow = motion14(JoyCardOverflow);
|
|
1460
1558
|
var CardOverflow = MotionCardOverflow;
|
|
1461
1559
|
CardOverflow.displayName = "CardOverflow";
|
|
1462
1560
|
|
|
1463
1561
|
// src/components/Checkbox/Checkbox.tsx
|
|
1464
|
-
import
|
|
1562
|
+
import React13 from "react";
|
|
1465
1563
|
import { Checkbox as JoyCheckbox } from "@mui/joy";
|
|
1466
|
-
import { motion as
|
|
1467
|
-
var MotionCheckbox =
|
|
1564
|
+
import { motion as motion15 } from "framer-motion";
|
|
1565
|
+
var MotionCheckbox = motion15(JoyCheckbox);
|
|
1468
1566
|
var Checkbox = (props) => {
|
|
1469
|
-
return /* @__PURE__ */
|
|
1567
|
+
return /* @__PURE__ */ React13.createElement(MotionCheckbox, { ...props });
|
|
1470
1568
|
};
|
|
1471
1569
|
Checkbox.displayName = "Checkbox";
|
|
1472
1570
|
|
|
@@ -1475,7 +1573,7 @@ var Checkbox_default = Checkbox;
|
|
|
1475
1573
|
|
|
1476
1574
|
// src/components/Container/Container.tsx
|
|
1477
1575
|
import { styled as styled6 } from "@mui/joy";
|
|
1478
|
-
import
|
|
1576
|
+
import React14, { forwardRef as forwardRef5 } from "react";
|
|
1479
1577
|
var ContainerRoot = styled6("div", {
|
|
1480
1578
|
name: "Container",
|
|
1481
1579
|
slot: "root",
|
|
@@ -1502,24 +1600,24 @@ var ContainerRoot = styled6("div", {
|
|
|
1502
1600
|
} : null
|
|
1503
1601
|
]);
|
|
1504
1602
|
var Container = forwardRef5(function Container2(props, ref) {
|
|
1505
|
-
return /* @__PURE__ */
|
|
1603
|
+
return /* @__PURE__ */ React14.createElement(ContainerRoot, { ref, ...props });
|
|
1506
1604
|
});
|
|
1507
1605
|
Container.displayName = "Container";
|
|
1508
1606
|
|
|
1509
1607
|
// src/components/CurrencyInput/CurrencyInput.tsx
|
|
1510
|
-
import
|
|
1608
|
+
import React16, { useCallback as useCallback7, useMemo as useMemo5, useState as useState6 } from "react";
|
|
1511
1609
|
import { IntlMessageFormat as IntlMessageFormat2 } from "intl-messageformat";
|
|
1512
1610
|
import { NumericFormat } from "react-number-format";
|
|
1513
1611
|
|
|
1514
1612
|
// src/components/Input/Input.tsx
|
|
1515
|
-
import
|
|
1613
|
+
import React15, { useCallback as useCallback6, useState as useState5 } from "react";
|
|
1516
1614
|
import { Input as JoyInput } from "@mui/joy";
|
|
1517
|
-
import { motion as
|
|
1615
|
+
import { motion as motion16 } from "framer-motion";
|
|
1518
1616
|
import ClearIcon from "@mui/icons-material/Close";
|
|
1519
1617
|
import VisibilityIcon from "@mui/icons-material/Visibility";
|
|
1520
1618
|
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
|
|
1521
|
-
var MotionInput =
|
|
1522
|
-
var Input =
|
|
1619
|
+
var MotionInput = motion16(JoyInput);
|
|
1620
|
+
var Input = React15.forwardRef((props, ref) => {
|
|
1523
1621
|
const {
|
|
1524
1622
|
label,
|
|
1525
1623
|
helperText,
|
|
@@ -1542,11 +1640,11 @@ var Input = React14.forwardRef((props, ref) => {
|
|
|
1542
1640
|
if (type === "password" && innerProps.endDecorator) {
|
|
1543
1641
|
console.warn('Input: endDecorator is not supported when type="password"');
|
|
1544
1642
|
}
|
|
1545
|
-
const [passwordVisible, setPasswordVisible] =
|
|
1643
|
+
const [passwordVisible, setPasswordVisible] = useState5(false);
|
|
1546
1644
|
const [value, setValue] = useControlledState(
|
|
1547
1645
|
props.value,
|
|
1548
1646
|
props.defaultValue,
|
|
1549
|
-
|
|
1647
|
+
useCallback6(
|
|
1550
1648
|
(value2) => {
|
|
1551
1649
|
onChange?.({
|
|
1552
1650
|
/**
|
|
@@ -1572,7 +1670,7 @@ var Input = React14.forwardRef((props, ref) => {
|
|
|
1572
1670
|
const actualType = type === "password" && passwordVisible ? "text" : type;
|
|
1573
1671
|
const isPasswordType = type === "password";
|
|
1574
1672
|
const showPasswordToggle = isPasswordType && !disableTogglePasswordButton;
|
|
1575
|
-
const input = /* @__PURE__ */
|
|
1673
|
+
const input = /* @__PURE__ */ React15.createElement(
|
|
1576
1674
|
MotionInput,
|
|
1577
1675
|
{
|
|
1578
1676
|
value,
|
|
@@ -1587,7 +1685,7 @@ var Input = React14.forwardRef((props, ref) => {
|
|
|
1587
1685
|
...innerProps.slotProps
|
|
1588
1686
|
},
|
|
1589
1687
|
...innerProps,
|
|
1590
|
-
endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */
|
|
1688
|
+
endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */ React15.createElement(Stack_default, { gap: 1, direction: "row" }, /* @__PURE__ */ React15.createElement(
|
|
1591
1689
|
IconButton_default,
|
|
1592
1690
|
{
|
|
1593
1691
|
onMouseDown: (e) => e.preventDefault(),
|
|
@@ -1595,19 +1693,19 @@ var Input = React14.forwardRef((props, ref) => {
|
|
|
1595
1693
|
disabled,
|
|
1596
1694
|
"aria-label": passwordVisible ? "Hide password" : "Show password"
|
|
1597
1695
|
},
|
|
1598
|
-
passwordVisible ? /* @__PURE__ */
|
|
1599
|
-
)) : null : enableClearable ? /* @__PURE__ */
|
|
1696
|
+
passwordVisible ? /* @__PURE__ */ React15.createElement(VisibilityOffIcon, null) : /* @__PURE__ */ React15.createElement(VisibilityIcon, null)
|
|
1697
|
+
)) : null : enableClearable ? /* @__PURE__ */ React15.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ React15.createElement(
|
|
1600
1698
|
IconButton_default,
|
|
1601
1699
|
{
|
|
1602
1700
|
onMouseDown: (e) => e.preventDefault(),
|
|
1603
1701
|
onClick: handleClear,
|
|
1604
1702
|
"aria-label": "Clear"
|
|
1605
1703
|
},
|
|
1606
|
-
/* @__PURE__ */
|
|
1704
|
+
/* @__PURE__ */ React15.createElement(ClearIcon, null)
|
|
1607
1705
|
)) : innerProps.endDecorator
|
|
1608
1706
|
}
|
|
1609
1707
|
);
|
|
1610
|
-
return /* @__PURE__ */
|
|
1708
|
+
return /* @__PURE__ */ React15.createElement(
|
|
1611
1709
|
FormControl_default,
|
|
1612
1710
|
{
|
|
1613
1711
|
required,
|
|
@@ -1618,9 +1716,9 @@ var Input = React14.forwardRef((props, ref) => {
|
|
|
1618
1716
|
sx,
|
|
1619
1717
|
className
|
|
1620
1718
|
},
|
|
1621
|
-
label && /* @__PURE__ */
|
|
1719
|
+
label && /* @__PURE__ */ React15.createElement(FormLabel_default, null, label),
|
|
1622
1720
|
input,
|
|
1623
|
-
helperText && /* @__PURE__ */
|
|
1721
|
+
helperText && /* @__PURE__ */ React15.createElement(FormHelperText_default, null, helperText)
|
|
1624
1722
|
);
|
|
1625
1723
|
});
|
|
1626
1724
|
Input.displayName = "Input";
|
|
@@ -1792,9 +1890,9 @@ var useCurrencySetting = (props) => {
|
|
|
1792
1890
|
};
|
|
1793
1891
|
|
|
1794
1892
|
// src/components/CurrencyInput/CurrencyInput.tsx
|
|
1795
|
-
var TextMaskAdapter =
|
|
1893
|
+
var TextMaskAdapter = React16.forwardRef(function TextMaskAdapter2(props, ref) {
|
|
1796
1894
|
const { onChange, ...innerProps } = props;
|
|
1797
|
-
return /* @__PURE__ */
|
|
1895
|
+
return /* @__PURE__ */ React16.createElement(
|
|
1798
1896
|
NumericFormat,
|
|
1799
1897
|
{
|
|
1800
1898
|
...innerProps,
|
|
@@ -1814,7 +1912,7 @@ var CurrencyInputRoot = styled7(Input_default, {
|
|
|
1814
1912
|
slot: "root",
|
|
1815
1913
|
overridesResolver: (props, styles) => styles.root
|
|
1816
1914
|
})({});
|
|
1817
|
-
var CurrencyInput =
|
|
1915
|
+
var CurrencyInput = React16.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
1818
1916
|
const props = useThemeProps3({ props: inProps, name: "CurrencyInput" });
|
|
1819
1917
|
const {
|
|
1820
1918
|
currency = "USD",
|
|
@@ -1835,7 +1933,7 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1835
1933
|
const [_value, setValue] = useControlledState(
|
|
1836
1934
|
props.value,
|
|
1837
1935
|
props.defaultValue,
|
|
1838
|
-
|
|
1936
|
+
useCallback7((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
|
|
1839
1937
|
);
|
|
1840
1938
|
const value = useMemo5(() => {
|
|
1841
1939
|
if (_value && useMinorUnit) {
|
|
@@ -1849,8 +1947,8 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1849
1947
|
}
|
|
1850
1948
|
return props.max;
|
|
1851
1949
|
}, [props.max, useMinorUnit, decimalScale]);
|
|
1852
|
-
const [isOverLimit, setIsOverLimit] =
|
|
1853
|
-
const handleChange =
|
|
1950
|
+
const [isOverLimit, setIsOverLimit] = useState6(!!max && !!value && value > max);
|
|
1951
|
+
const handleChange = useCallback7(
|
|
1854
1952
|
(event) => {
|
|
1855
1953
|
if (event.target.value === "") {
|
|
1856
1954
|
setValue(void 0);
|
|
@@ -1866,7 +1964,7 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
|
1866
1964
|
},
|
|
1867
1965
|
[decimalSeparator, max, useMinorUnit, setValue]
|
|
1868
1966
|
);
|
|
1869
|
-
return /* @__PURE__ */
|
|
1967
|
+
return /* @__PURE__ */ React16.createElement(
|
|
1870
1968
|
CurrencyInputRoot,
|
|
1871
1969
|
{
|
|
1872
1970
|
...innerProps,
|
|
@@ -1906,9 +2004,9 @@ var CurrencyInput_default = CurrencyInput;
|
|
|
1906
2004
|
|
|
1907
2005
|
// src/components/DataTable/DataTable.tsx
|
|
1908
2006
|
import React25, {
|
|
1909
|
-
useCallback as
|
|
2007
|
+
useCallback as useCallback12,
|
|
1910
2008
|
useMemo as useMemo10,
|
|
1911
|
-
useRef as
|
|
2009
|
+
useRef as useRef7,
|
|
1912
2010
|
useId,
|
|
1913
2011
|
forwardRef as forwardRef7,
|
|
1914
2012
|
useImperativeHandle as useImperativeHandle2,
|
|
@@ -2036,9 +2134,9 @@ function getTextAlign(props) {
|
|
|
2036
2134
|
var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
|
|
2037
2135
|
|
|
2038
2136
|
// src/components/DataTable/styled.tsx
|
|
2039
|
-
import
|
|
2137
|
+
import React17 from "react";
|
|
2040
2138
|
import { styled as styled8, LinearProgress, buttonClasses, iconButtonClasses } from "@mui/joy";
|
|
2041
|
-
import { motion as
|
|
2139
|
+
import { motion as motion17 } from "framer-motion";
|
|
2042
2140
|
import SortIcon from "@mui/icons-material/ArrowUpwardRounded";
|
|
2043
2141
|
var EllipsisDiv = styled8("div", {
|
|
2044
2142
|
name: "DataTable",
|
|
@@ -2112,7 +2210,7 @@ var Asterisk = styled8("span", {
|
|
|
2112
2210
|
color: "var(--ceed-palette-danger-500)",
|
|
2113
2211
|
marginLeft: theme.spacing(0.5)
|
|
2114
2212
|
}));
|
|
2115
|
-
var StyledTh = styled8(
|
|
2213
|
+
var StyledTh = styled8(motion17.th)(({ theme }) => ({
|
|
2116
2214
|
boxShadow: "1px 0 var(--TableCell-borderColor)"
|
|
2117
2215
|
}));
|
|
2118
2216
|
var StyledTd = styled8("td")(({ theme }) => ({
|
|
@@ -2131,9 +2229,9 @@ var StyledTd = styled8("td")(({ theme }) => ({
|
|
|
2131
2229
|
}
|
|
2132
2230
|
}
|
|
2133
2231
|
}));
|
|
2134
|
-
var MotionSortIcon =
|
|
2135
|
-
var DefaultLoadingOverlay = () => /* @__PURE__ */
|
|
2136
|
-
var Resizer = (ref, targetRef = ref) => /* @__PURE__ */
|
|
2232
|
+
var MotionSortIcon = motion17(SortIcon);
|
|
2233
|
+
var DefaultLoadingOverlay = () => /* @__PURE__ */ React17.createElement(LinearProgress, { value: 8, variant: "plain" });
|
|
2234
|
+
var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React17.createElement(
|
|
2137
2235
|
Box_default,
|
|
2138
2236
|
{
|
|
2139
2237
|
sx: {
|
|
@@ -2166,12 +2264,12 @@ var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React16.createElement(
|
|
|
2166
2264
|
|
|
2167
2265
|
// src/components/DataTable/components.tsx
|
|
2168
2266
|
import React22, {
|
|
2169
|
-
useRef as
|
|
2170
|
-
useState as
|
|
2267
|
+
useRef as useRef5,
|
|
2268
|
+
useState as useState8,
|
|
2171
2269
|
useLayoutEffect,
|
|
2172
2270
|
useMemo as useMemo8,
|
|
2173
|
-
useCallback as
|
|
2174
|
-
useEffect as
|
|
2271
|
+
useCallback as useCallback9,
|
|
2272
|
+
useEffect as useEffect5,
|
|
2175
2273
|
memo,
|
|
2176
2274
|
createElement
|
|
2177
2275
|
} from "react";
|
|
@@ -2179,7 +2277,7 @@ import { styled as styled12, useTheme } from "@mui/joy";
|
|
|
2179
2277
|
import { AnimatePresence as AnimatePresence2 } from "framer-motion";
|
|
2180
2278
|
|
|
2181
2279
|
// src/components/DatePicker/DatePicker.tsx
|
|
2182
|
-
import
|
|
2280
|
+
import React18, { forwardRef as forwardRef6, useCallback as useCallback8, useEffect as useEffect4, useImperativeHandle, useRef as useRef4, useState as useState7 } from "react";
|
|
2183
2281
|
import { IMaskInput, IMask } from "react-imask";
|
|
2184
2282
|
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
|
|
2185
2283
|
import { styled as styled10, useThemeProps as useThemeProps4 } from "@mui/joy";
|
|
@@ -2194,8 +2292,8 @@ var Sheet_default = Sheet;
|
|
|
2194
2292
|
|
|
2195
2293
|
// src/components/DialogActions/DialogActions.tsx
|
|
2196
2294
|
import { DialogActions as JoyDialogActions, styled as styled9 } from "@mui/joy";
|
|
2197
|
-
import { motion as
|
|
2198
|
-
var MotionDialogActions =
|
|
2295
|
+
import { motion as motion18 } from "framer-motion";
|
|
2296
|
+
var MotionDialogActions = motion18(JoyDialogActions);
|
|
2199
2297
|
var StyledDialogActions = styled9(MotionDialogActions)(({ theme }) => ({
|
|
2200
2298
|
padding: theme.spacing(2),
|
|
2201
2299
|
gap: theme.spacing(2),
|
|
@@ -2291,9 +2389,9 @@ function parseDate(dateString, format) {
|
|
|
2291
2389
|
var formatToPattern = (format) => {
|
|
2292
2390
|
return format.replace(/YYYY/g, "Y").replace(/MM/g, "M").replace(/DD/g, "D").replace(/[^YMD\s]/g, (match) => `${match}\``);
|
|
2293
2391
|
};
|
|
2294
|
-
var TextMaskAdapter3 =
|
|
2392
|
+
var TextMaskAdapter3 = React18.forwardRef(function TextMaskAdapter4(props, ref) {
|
|
2295
2393
|
const { onChange, format, ...other } = props;
|
|
2296
|
-
return /* @__PURE__ */
|
|
2394
|
+
return /* @__PURE__ */ React18.createElement(
|
|
2297
2395
|
IMaskInput,
|
|
2298
2396
|
{
|
|
2299
2397
|
...other,
|
|
@@ -2353,24 +2451,24 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2353
2451
|
shouldDisableDate,
|
|
2354
2452
|
...innerProps
|
|
2355
2453
|
} = props;
|
|
2356
|
-
const innerRef =
|
|
2357
|
-
const buttonRef =
|
|
2454
|
+
const innerRef = useRef4(null);
|
|
2455
|
+
const buttonRef = useRef4(null);
|
|
2358
2456
|
const [value, setValue] = useControlledState(
|
|
2359
2457
|
props.value,
|
|
2360
2458
|
props.defaultValue || "",
|
|
2361
|
-
|
|
2459
|
+
useCallback8((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
2362
2460
|
);
|
|
2363
|
-
const [displayValue, setDisplayValue] =
|
|
2461
|
+
const [displayValue, setDisplayValue] = useState7(
|
|
2364
2462
|
() => value ? formatValueString(parseDate(value, format), displayFormat) : ""
|
|
2365
2463
|
);
|
|
2366
|
-
const [anchorEl, setAnchorEl] =
|
|
2464
|
+
const [anchorEl, setAnchorEl] = useState7(null);
|
|
2367
2465
|
const open = Boolean(anchorEl);
|
|
2368
|
-
|
|
2466
|
+
useEffect4(() => {
|
|
2369
2467
|
if (!anchorEl) {
|
|
2370
2468
|
innerRef.current?.blur();
|
|
2371
2469
|
}
|
|
2372
2470
|
}, [anchorEl, innerRef]);
|
|
2373
|
-
|
|
2471
|
+
useEffect4(() => {
|
|
2374
2472
|
if (value === "") {
|
|
2375
2473
|
setDisplayValue("");
|
|
2376
2474
|
return;
|
|
@@ -2381,7 +2479,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2381
2479
|
}
|
|
2382
2480
|
}, [displayFormat, displayValue, format, value]);
|
|
2383
2481
|
useImperativeHandle(ref, () => innerRef.current, [innerRef]);
|
|
2384
|
-
const handleChange =
|
|
2482
|
+
const handleChange = useCallback8(
|
|
2385
2483
|
(event) => {
|
|
2386
2484
|
const value2 = event.target.value;
|
|
2387
2485
|
setDisplayValue(value2 ? formatValueString(parseDate(value2, format), displayFormat) : value2);
|
|
@@ -2389,7 +2487,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2389
2487
|
},
|
|
2390
2488
|
[displayFormat, format, setValue]
|
|
2391
2489
|
);
|
|
2392
|
-
const handleDisplayInputChange =
|
|
2490
|
+
const handleDisplayInputChange = useCallback8(
|
|
2393
2491
|
(event) => {
|
|
2394
2492
|
if (event.target.value === "") {
|
|
2395
2493
|
handleChange({
|
|
@@ -2414,7 +2512,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2414
2512
|
},
|
|
2415
2513
|
[displayFormat, format, handleChange, props.name]
|
|
2416
2514
|
);
|
|
2417
|
-
const handleCalendarToggle =
|
|
2515
|
+
const handleCalendarToggle = useCallback8(
|
|
2418
2516
|
(event) => {
|
|
2419
2517
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
2420
2518
|
setTimeout(() => {
|
|
@@ -2423,7 +2521,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2423
2521
|
},
|
|
2424
2522
|
[anchorEl, setAnchorEl, innerRef]
|
|
2425
2523
|
);
|
|
2426
|
-
const handleInputMouseDown =
|
|
2524
|
+
const handleInputMouseDown = useCallback8(
|
|
2427
2525
|
(event) => {
|
|
2428
2526
|
if (inputReadOnly) {
|
|
2429
2527
|
event.preventDefault();
|
|
@@ -2432,7 +2530,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2432
2530
|
},
|
|
2433
2531
|
[inputReadOnly, buttonRef]
|
|
2434
2532
|
);
|
|
2435
|
-
return /* @__PURE__ */
|
|
2533
|
+
return /* @__PURE__ */ React18.createElement(DatePickerRoot, null, /* @__PURE__ */ React18.createElement(FocusTrap, { open: true }, /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
|
|
2436
2534
|
Input_default,
|
|
2437
2535
|
{
|
|
2438
2536
|
...innerProps,
|
|
@@ -2460,7 +2558,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2460
2558
|
},
|
|
2461
2559
|
className,
|
|
2462
2560
|
sx,
|
|
2463
|
-
endDecorator: /* @__PURE__ */
|
|
2561
|
+
endDecorator: /* @__PURE__ */ React18.createElement(
|
|
2464
2562
|
CalendarButton,
|
|
2465
2563
|
{
|
|
2466
2564
|
ref: buttonRef,
|
|
@@ -2472,13 +2570,13 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2472
2570
|
"aria-expanded": open,
|
|
2473
2571
|
disabled
|
|
2474
2572
|
},
|
|
2475
|
-
/* @__PURE__ */
|
|
2573
|
+
/* @__PURE__ */ React18.createElement(CalendarTodayIcon, null)
|
|
2476
2574
|
),
|
|
2477
2575
|
label,
|
|
2478
2576
|
helperText,
|
|
2479
2577
|
readOnly: readOnly || inputReadOnly
|
|
2480
2578
|
}
|
|
2481
|
-
), open && /* @__PURE__ */
|
|
2579
|
+
), open && /* @__PURE__ */ React18.createElement(ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React18.createElement(
|
|
2482
2580
|
StyledPopper,
|
|
2483
2581
|
{
|
|
2484
2582
|
id: "date-picker-popper",
|
|
@@ -2497,7 +2595,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2497
2595
|
"aria-label": "Calendar Tooltip",
|
|
2498
2596
|
"aria-expanded": open
|
|
2499
2597
|
},
|
|
2500
|
-
/* @__PURE__ */
|
|
2598
|
+
/* @__PURE__ */ React18.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React18.createElement(
|
|
2501
2599
|
Calendar_default,
|
|
2502
2600
|
{
|
|
2503
2601
|
value: value && !Number.isNaN(parseDate(value, format).getTime()) ? [parseDate(value, format), void 0] : void 0,
|
|
@@ -2516,14 +2614,14 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2516
2614
|
disablePast,
|
|
2517
2615
|
shouldDisableDate: shouldDisableDate ? (date) => shouldDisableDate(formatValueString(date, format)) : void 0
|
|
2518
2616
|
}
|
|
2519
|
-
), !hideClearButton && /* @__PURE__ */
|
|
2617
|
+
), !hideClearButton && /* @__PURE__ */ React18.createElement(
|
|
2520
2618
|
DialogActions_default,
|
|
2521
2619
|
{
|
|
2522
2620
|
sx: {
|
|
2523
2621
|
p: 1
|
|
2524
2622
|
}
|
|
2525
2623
|
},
|
|
2526
|
-
/* @__PURE__ */
|
|
2624
|
+
/* @__PURE__ */ React18.createElement(
|
|
2527
2625
|
Button_default,
|
|
2528
2626
|
{
|
|
2529
2627
|
size,
|
|
@@ -2549,10 +2647,10 @@ var DatePicker = forwardRef6((inProps, ref) => {
|
|
|
2549
2647
|
var DatePicker_default = DatePicker;
|
|
2550
2648
|
|
|
2551
2649
|
// src/components/Textarea/Textarea.tsx
|
|
2552
|
-
import
|
|
2650
|
+
import React19 from "react";
|
|
2553
2651
|
import { Textarea as JoyTextarea } from "@mui/joy";
|
|
2554
|
-
import { motion as
|
|
2555
|
-
var MotionTextarea =
|
|
2652
|
+
import { motion as motion19 } from "framer-motion";
|
|
2653
|
+
var MotionTextarea = motion19(JoyTextarea);
|
|
2556
2654
|
var Textarea = (props) => {
|
|
2557
2655
|
const {
|
|
2558
2656
|
label,
|
|
@@ -2569,7 +2667,7 @@ var Textarea = (props) => {
|
|
|
2569
2667
|
className,
|
|
2570
2668
|
...innerProps
|
|
2571
2669
|
} = props;
|
|
2572
|
-
const textarea = /* @__PURE__ */
|
|
2670
|
+
const textarea = /* @__PURE__ */ React19.createElement(
|
|
2573
2671
|
MotionTextarea,
|
|
2574
2672
|
{
|
|
2575
2673
|
required,
|
|
@@ -2581,7 +2679,7 @@ var Textarea = (props) => {
|
|
|
2581
2679
|
...innerProps
|
|
2582
2680
|
}
|
|
2583
2681
|
);
|
|
2584
|
-
return /* @__PURE__ */
|
|
2682
|
+
return /* @__PURE__ */ React19.createElement(
|
|
2585
2683
|
FormControl_default,
|
|
2586
2684
|
{
|
|
2587
2685
|
required,
|
|
@@ -2592,9 +2690,9 @@ var Textarea = (props) => {
|
|
|
2592
2690
|
sx,
|
|
2593
2691
|
className
|
|
2594
2692
|
},
|
|
2595
|
-
label && /* @__PURE__ */
|
|
2693
|
+
label && /* @__PURE__ */ React19.createElement(FormLabel_default, null, label),
|
|
2596
2694
|
textarea,
|
|
2597
|
-
helperText && /* @__PURE__ */
|
|
2695
|
+
helperText && /* @__PURE__ */ React19.createElement(FormHelperText_default, null, helperText)
|
|
2598
2696
|
);
|
|
2599
2697
|
};
|
|
2600
2698
|
Textarea.displayName = "Textarea";
|
|
@@ -2603,10 +2701,10 @@ Textarea.displayName = "Textarea";
|
|
|
2603
2701
|
var Textarea_default = Textarea;
|
|
2604
2702
|
|
|
2605
2703
|
// src/components/Select/Select.tsx
|
|
2606
|
-
import
|
|
2704
|
+
import React20, { useMemo as useMemo7 } from "react";
|
|
2607
2705
|
import { Select as JoySelect, Option as JoyOption, ListItemContent as ListItemContent2, Typography as Typography3 } from "@mui/joy";
|
|
2608
|
-
import { motion as
|
|
2609
|
-
var MotionOption =
|
|
2706
|
+
import { motion as motion20 } from "framer-motion";
|
|
2707
|
+
var MotionOption = motion20(JoyOption);
|
|
2610
2708
|
var Option = MotionOption;
|
|
2611
2709
|
var secondaryTextLevelMap2 = {
|
|
2612
2710
|
sm: "body-xs",
|
|
@@ -2661,7 +2759,7 @@ function Select(props) {
|
|
|
2661
2759
|
});
|
|
2662
2760
|
return map;
|
|
2663
2761
|
}, [options]);
|
|
2664
|
-
const select = /* @__PURE__ */
|
|
2762
|
+
const select = /* @__PURE__ */ React20.createElement(
|
|
2665
2763
|
JoySelect,
|
|
2666
2764
|
{
|
|
2667
2765
|
...innerProps,
|
|
@@ -2678,9 +2776,9 @@ function Select(props) {
|
|
|
2678
2776
|
return optionMap.get(selected.value)?.label;
|
|
2679
2777
|
}
|
|
2680
2778
|
},
|
|
2681
|
-
options.map((option) => /* @__PURE__ */
|
|
2779
|
+
options.map((option) => /* @__PURE__ */ React20.createElement(Option, { key: option.value, value: option.value, disabled: option.disabled }, option.secondaryText ? /* @__PURE__ */ React20.createElement(ListItemContent2, { sx: { gap: 0.5 } }, /* @__PURE__ */ React20.createElement(Typography3, { level: "inherit" }, option.label), /* @__PURE__ */ React20.createElement(Typography3, { level: secondaryTextLevelMap2[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : option.label))
|
|
2682
2780
|
);
|
|
2683
|
-
return /* @__PURE__ */
|
|
2781
|
+
return /* @__PURE__ */ React20.createElement(
|
|
2684
2782
|
FormControl_default,
|
|
2685
2783
|
{
|
|
2686
2784
|
required,
|
|
@@ -2691,9 +2789,9 @@ function Select(props) {
|
|
|
2691
2789
|
sx,
|
|
2692
2790
|
className
|
|
2693
2791
|
},
|
|
2694
|
-
label && /* @__PURE__ */
|
|
2792
|
+
label && /* @__PURE__ */ React20.createElement(FormLabel_default, null, label),
|
|
2695
2793
|
select,
|
|
2696
|
-
helperText && /* @__PURE__ */
|
|
2794
|
+
helperText && /* @__PURE__ */ React20.createElement(FormHelperText_default, null, helperText)
|
|
2697
2795
|
);
|
|
2698
2796
|
}
|
|
2699
2797
|
Select.displayName = "Select";
|
|
@@ -2704,19 +2802,6 @@ var Select_default = Select;
|
|
|
2704
2802
|
// src/components/DataTable/components.tsx
|
|
2705
2803
|
import { Link } from "@mui/joy";
|
|
2706
2804
|
|
|
2707
|
-
// src/components/Tooltip/Tooltip.tsx
|
|
2708
|
-
import React20 from "react";
|
|
2709
|
-
import { Tooltip as JoyTooltip } from "@mui/joy";
|
|
2710
|
-
import { motion as motion20 } from "framer-motion";
|
|
2711
|
-
var MotionTooltip = motion20(JoyTooltip);
|
|
2712
|
-
var Tooltip = (props) => {
|
|
2713
|
-
return /* @__PURE__ */ React20.createElement(MotionTooltip, { ...props });
|
|
2714
|
-
};
|
|
2715
|
-
Tooltip.displayName = "Tooltip";
|
|
2716
|
-
|
|
2717
|
-
// src/components/Tooltip/index.ts
|
|
2718
|
-
var Tooltip_default = Tooltip;
|
|
2719
|
-
|
|
2720
2805
|
// src/components/InfoSign/InfoSign.tsx
|
|
2721
2806
|
import React21 from "react";
|
|
2722
2807
|
import { styled as styled11, tooltipClasses } from "@mui/joy";
|
|
@@ -2752,8 +2837,8 @@ var InfoSign_default = InfoSign;
|
|
|
2752
2837
|
|
|
2753
2838
|
// src/components/DataTable/components.tsx
|
|
2754
2839
|
var TextEllipsis = ({ children }) => {
|
|
2755
|
-
const textRef =
|
|
2756
|
-
const [showTooltip, setShowTooltip] =
|
|
2840
|
+
const textRef = useRef5(null);
|
|
2841
|
+
const [showTooltip, setShowTooltip] = useState8(false);
|
|
2757
2842
|
useLayoutEffect(() => {
|
|
2758
2843
|
const element = textRef.current;
|
|
2759
2844
|
if (element) {
|
|
@@ -2768,8 +2853,8 @@ var TextEllipsis = ({ children }) => {
|
|
|
2768
2853
|
return content;
|
|
2769
2854
|
};
|
|
2770
2855
|
var CellTextEllipsis = ({ children }) => {
|
|
2771
|
-
const textRef =
|
|
2772
|
-
const [showTooltip, setShowTooltip] =
|
|
2856
|
+
const textRef = useRef5(null);
|
|
2857
|
+
const [showTooltip, setShowTooltip] = useState8(false);
|
|
2773
2858
|
useLayoutEffect(() => {
|
|
2774
2859
|
const element = textRef.current;
|
|
2775
2860
|
if (element) {
|
|
@@ -2821,7 +2906,7 @@ var HeadCell = (props) => {
|
|
|
2821
2906
|
const theme = useTheme();
|
|
2822
2907
|
const ref = headerRef;
|
|
2823
2908
|
const colRef = tableColRef;
|
|
2824
|
-
const [isHovered, setIsHovered] =
|
|
2909
|
+
const [isHovered, setIsHovered] = useState8(false);
|
|
2825
2910
|
const sortable = type === "actions" ? false : _sortable;
|
|
2826
2911
|
const headId = useMemo8(
|
|
2827
2912
|
() => `${tableId}_header_${headerName ?? field}`.trim(),
|
|
@@ -2900,7 +2985,7 @@ var HeadCell = (props) => {
|
|
|
2900
2985
|
ref,
|
|
2901
2986
|
key: field,
|
|
2902
2987
|
style,
|
|
2903
|
-
onClick:
|
|
2988
|
+
onClick: useCallback9(
|
|
2904
2989
|
(e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
|
|
2905
2990
|
[field, onSortChange, sort, sortable]
|
|
2906
2991
|
),
|
|
@@ -2935,8 +3020,8 @@ var BodyCell = (props) => {
|
|
|
2935
3020
|
onCellEditStop
|
|
2936
3021
|
} = props;
|
|
2937
3022
|
const theme = useTheme();
|
|
2938
|
-
const [value, setValue] =
|
|
2939
|
-
const cellRef =
|
|
3023
|
+
const [value, setValue] = useState8(row[field]);
|
|
3024
|
+
const cellRef = useRef5(null);
|
|
2940
3025
|
const params = useMemo8(
|
|
2941
3026
|
() => ({
|
|
2942
3027
|
row,
|
|
@@ -3081,7 +3166,7 @@ var BodyCell = (props) => {
|
|
|
3081
3166
|
() => (typeof cellClassName === "function" ? cellClassName(params) : cellClassName) || "",
|
|
3082
3167
|
[cellClassName, params]
|
|
3083
3168
|
);
|
|
3084
|
-
|
|
3169
|
+
useEffect5(() => {
|
|
3085
3170
|
setValue(row[field]);
|
|
3086
3171
|
}, [row, field]);
|
|
3087
3172
|
return /* @__PURE__ */ React22.createElement(
|
|
@@ -3151,10 +3236,10 @@ var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
|
|
|
3151
3236
|
});
|
|
3152
3237
|
|
|
3153
3238
|
// src/components/DataTable/hooks.ts
|
|
3154
|
-
import { useState as
|
|
3239
|
+
import { useState as useState9, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useMemo as useMemo9, useCallback as useCallback10, useEffect as useEffect6, createRef } from "react";
|
|
3155
3240
|
function useColumnWidths(columnsByField) {
|
|
3156
|
-
const [widths, setWidths] =
|
|
3157
|
-
const roRef =
|
|
3241
|
+
const [widths, setWidths] = useState9({});
|
|
3242
|
+
const roRef = useRef6();
|
|
3158
3243
|
useLayoutEffect2(() => {
|
|
3159
3244
|
if (roRef.current) roRef.current.disconnect();
|
|
3160
3245
|
roRef.current = new ResizeObserver((entries) => {
|
|
@@ -3209,14 +3294,14 @@ function useDataTableRenderer({
|
|
|
3209
3294
|
"You cannot use both `pinnedColumns` and `columnGroupingModel` at the same time. Please choose one of them."
|
|
3210
3295
|
);
|
|
3211
3296
|
}
|
|
3212
|
-
const onSelectionModelChangeRef =
|
|
3297
|
+
const onSelectionModelChangeRef = useRef6(onSelectionModelChange);
|
|
3213
3298
|
onSelectionModelChangeRef.current = onSelectionModelChange;
|
|
3214
|
-
const [focusedRowId, setFocusedRowId] =
|
|
3215
|
-
const [selectionAnchor, setSelectionAnchor] =
|
|
3299
|
+
const [focusedRowId, setFocusedRowId] = useState9(null);
|
|
3300
|
+
const [selectionAnchor, setSelectionAnchor] = useState9(null);
|
|
3216
3301
|
const [sortModel, setSortModel] = useControlledState(
|
|
3217
3302
|
controlledSortModel,
|
|
3218
3303
|
initialState?.sorting?.sortModel ?? [],
|
|
3219
|
-
|
|
3304
|
+
useCallback10((sortModel2) => onSortModelChange?.(sortModel2), [onSortModelChange])
|
|
3220
3305
|
);
|
|
3221
3306
|
const reorderedColumns = useMemo9(() => {
|
|
3222
3307
|
if (!columnGroupingModel) return columnsProp;
|
|
@@ -3236,7 +3321,7 @@ function useDataTableRenderer({
|
|
|
3236
3321
|
),
|
|
3237
3322
|
[reorderedColumns]
|
|
3238
3323
|
);
|
|
3239
|
-
const sortComparator =
|
|
3324
|
+
const sortComparator = useCallback10(
|
|
3240
3325
|
(rowA, rowB) => {
|
|
3241
3326
|
for (const sort of sortModel) {
|
|
3242
3327
|
const { field, sort: direction } = sort;
|
|
@@ -3272,9 +3357,9 @@ function useDataTableRenderer({
|
|
|
3272
3357
|
() => Array.from(new Set(_sortOrder || ["asc", "desc", null])),
|
|
3273
3358
|
[_sortOrder]
|
|
3274
3359
|
);
|
|
3275
|
-
const [page, setPage] =
|
|
3360
|
+
const [page, setPage] = useState9(paginationModel?.page || 1);
|
|
3276
3361
|
const pageSize = paginationModel?.pageSize || 20;
|
|
3277
|
-
const getId =
|
|
3362
|
+
const getId = useCallback10(
|
|
3278
3363
|
(row, index) => _getId?.(row) ?? row.id ?? `${(index || 0) + (page - 1) * pageSize}`,
|
|
3279
3364
|
[_getId, page, pageSize]
|
|
3280
3365
|
);
|
|
@@ -3290,7 +3375,7 @@ function useDataTableRenderer({
|
|
|
3290
3375
|
}),
|
|
3291
3376
|
[dataInPage, isRowSelectable, getId]
|
|
3292
3377
|
);
|
|
3293
|
-
const handleRangeSelection =
|
|
3378
|
+
const handleRangeSelection = useCallback10(
|
|
3294
3379
|
(anchor, targetIndex) => {
|
|
3295
3380
|
const startIndex = Math.min(anchor.rowIndex, targetIndex);
|
|
3296
3381
|
const endIndex = Math.max(anchor.rowIndex, targetIndex);
|
|
@@ -3327,7 +3412,7 @@ function useDataTableRenderer({
|
|
|
3327
3412
|
[_isTotalSelected, selectionModel, selectableRowCount]
|
|
3328
3413
|
);
|
|
3329
3414
|
const columnWidths = useColumnWidths(columnsByField);
|
|
3330
|
-
const getWidth =
|
|
3415
|
+
const getWidth = useCallback10(
|
|
3331
3416
|
(f) => columnWidths[f] ?? columnsByField[f].width ?? // Column prop 으로 지정된 width
|
|
3332
3417
|
columnsByField[f].minWidth ?? 0,
|
|
3333
3418
|
[columnWidths, columnsByField]
|
|
@@ -3369,14 +3454,14 @@ function useDataTableRenderer({
|
|
|
3369
3454
|
sortOrder,
|
|
3370
3455
|
getWidth
|
|
3371
3456
|
]);
|
|
3372
|
-
const handlePageChange =
|
|
3457
|
+
const handlePageChange = useCallback10(
|
|
3373
3458
|
(newPage) => {
|
|
3374
3459
|
setPage(newPage);
|
|
3375
3460
|
onPaginationModelChange?.({ page: newPage, pageSize });
|
|
3376
3461
|
},
|
|
3377
3462
|
[onPaginationModelChange, pageSize]
|
|
3378
3463
|
);
|
|
3379
|
-
const handleSortChange =
|
|
3464
|
+
const handleSortChange = useCallback10(
|
|
3380
3465
|
(props) => {
|
|
3381
3466
|
const { field, currentSort, multiple } = props;
|
|
3382
3467
|
const column = columnsByField[field];
|
|
@@ -3399,23 +3484,23 @@ function useDataTableRenderer({
|
|
|
3399
3484
|
},
|
|
3400
3485
|
[sortOrder, columnsByField, sortModel, setSortModel]
|
|
3401
3486
|
);
|
|
3402
|
-
|
|
3487
|
+
useEffect6(() => {
|
|
3403
3488
|
if (!paginationModel) {
|
|
3404
3489
|
handlePageChange(1);
|
|
3405
3490
|
}
|
|
3406
3491
|
}, [rowCount, handlePageChange, paginationModel]);
|
|
3407
|
-
|
|
3492
|
+
useEffect6(() => {
|
|
3408
3493
|
const lastPage = Math.max(1, Math.ceil(rowCount / pageSize));
|
|
3409
3494
|
if (page > lastPage) {
|
|
3410
3495
|
handlePageChange(lastPage);
|
|
3411
3496
|
}
|
|
3412
3497
|
}, [page, rowCount, pageSize, handlePageChange]);
|
|
3413
|
-
|
|
3498
|
+
useEffect6(() => {
|
|
3414
3499
|
onSelectionModelChangeRef.current?.([]);
|
|
3415
3500
|
setSelectionAnchor(null);
|
|
3416
3501
|
}, [page]);
|
|
3417
|
-
const prevRowsRef =
|
|
3418
|
-
|
|
3502
|
+
const prevRowsRef = useRef6(_rows);
|
|
3503
|
+
useEffect6(() => {
|
|
3419
3504
|
if (prevRowsRef.current !== _rows) {
|
|
3420
3505
|
setSelectionAnchor(null);
|
|
3421
3506
|
prevRowsRef.current = _rows;
|
|
@@ -3434,8 +3519,8 @@ function useDataTableRenderer({
|
|
|
3434
3519
|
handleSortChange,
|
|
3435
3520
|
isAllSelected,
|
|
3436
3521
|
isTotalSelected,
|
|
3437
|
-
isSelectedRow:
|
|
3438
|
-
isRowSelectable:
|
|
3522
|
+
isSelectedRow: useCallback10((model) => selectedModelSet.has(model), [selectedModelSet]),
|
|
3523
|
+
isRowSelectable: useCallback10(
|
|
3439
3524
|
(rowId, row) => {
|
|
3440
3525
|
if (!isRowSelectable) return true;
|
|
3441
3526
|
return isRowSelectable({ row, id: rowId });
|
|
@@ -3443,13 +3528,13 @@ function useDataTableRenderer({
|
|
|
3443
3528
|
[isRowSelectable]
|
|
3444
3529
|
),
|
|
3445
3530
|
focusedRowId,
|
|
3446
|
-
onRowFocus:
|
|
3531
|
+
onRowFocus: useCallback10((rowId) => {
|
|
3447
3532
|
setFocusedRowId(rowId);
|
|
3448
3533
|
}, []),
|
|
3449
|
-
onAllCheckboxChange:
|
|
3534
|
+
onAllCheckboxChange: useCallback10(() => {
|
|
3450
3535
|
onSelectionModelChange?.(isAllSelected ? [] : selectableDataInPage.map(getId));
|
|
3451
3536
|
}, [isAllSelected, selectableDataInPage, onSelectionModelChange, getId]),
|
|
3452
|
-
onCheckboxChange:
|
|
3537
|
+
onCheckboxChange: useCallback10(
|
|
3453
3538
|
(event, selectedModel) => {
|
|
3454
3539
|
const isShiftClick = "shiftKey" in event && event.shiftKey;
|
|
3455
3540
|
const rowIndex = dataInPage.findIndex((row, i) => getId(row, i) === selectedModel);
|
|
@@ -3482,7 +3567,7 @@ function useDataTableRenderer({
|
|
|
3482
3567
|
),
|
|
3483
3568
|
columns,
|
|
3484
3569
|
processedColumnGroups,
|
|
3485
|
-
onTotalSelect:
|
|
3570
|
+
onTotalSelect: useCallback10(() => {
|
|
3486
3571
|
const selectableRows = rows.filter((row, i) => {
|
|
3487
3572
|
if (!isRowSelectable) return true;
|
|
3488
3573
|
return isRowSelectable({ row, id: getId(row, i) });
|
|
@@ -3567,7 +3652,7 @@ function TableBody(props) {
|
|
|
3567
3652
|
TableBody.displayName = "TableBody";
|
|
3568
3653
|
|
|
3569
3654
|
// src/components/Pagination/Pagination.tsx
|
|
3570
|
-
import React24, { useCallback as
|
|
3655
|
+
import React24, { useCallback as useCallback11, useEffect as useEffect7 } from "react";
|
|
3571
3656
|
import PreviousIcon from "@mui/icons-material/ChevronLeftRounded";
|
|
3572
3657
|
import NextIcon from "@mui/icons-material/ChevronRightRounded";
|
|
3573
3658
|
import FirstPageIcon from "@mui/icons-material/FirstPageRounded";
|
|
@@ -3636,7 +3721,7 @@ function Pagination(props) {
|
|
|
3636
3721
|
const [paginationModel, setPaginationModel] = useControlledState(
|
|
3637
3722
|
_paginationModel,
|
|
3638
3723
|
defaultPaginationModel,
|
|
3639
|
-
|
|
3724
|
+
useCallback11(
|
|
3640
3725
|
(newPage) => {
|
|
3641
3726
|
onPageChange(newPage.page);
|
|
3642
3727
|
},
|
|
@@ -3652,7 +3737,7 @@ function Pagination(props) {
|
|
|
3652
3737
|
const afterPages = [paginationModel.page + 1, paginationModel.page + 2].filter((p) => p <= lastPage - 1);
|
|
3653
3738
|
const isMoreAfterPages = lastPage > 1 && paginationModel.page < lastPage - 3;
|
|
3654
3739
|
const isMoreBeforePages = lastPage > 1 && paginationModel.page > 4;
|
|
3655
|
-
|
|
3740
|
+
useEffect7(() => {
|
|
3656
3741
|
if (paginationModel.page > lastPage) {
|
|
3657
3742
|
setPaginationModel({ ...paginationModel, page: lastPage });
|
|
3658
3743
|
}
|
|
@@ -3835,8 +3920,8 @@ function Component(props, apiRef) {
|
|
|
3835
3920
|
...innerProps
|
|
3836
3921
|
} = props;
|
|
3837
3922
|
const tableId = useId();
|
|
3838
|
-
const parentRef =
|
|
3839
|
-
const tableBodyRef =
|
|
3923
|
+
const parentRef = useRef7(null);
|
|
3924
|
+
const tableBodyRef = useRef7(null);
|
|
3840
3925
|
const {
|
|
3841
3926
|
columns,
|
|
3842
3927
|
processedColumnGroups,
|
|
@@ -3873,20 +3958,20 @@ function Component(props, apiRef) {
|
|
|
3873
3958
|
const paginationModel = useMemo10(() => ({ page, pageSize }), [page, pageSize]);
|
|
3874
3959
|
const totalSize = virtualizer.getTotalSize();
|
|
3875
3960
|
const virtualizedItems = virtualizer.getVirtualItems();
|
|
3876
|
-
const getRowClickHandler =
|
|
3961
|
+
const getRowClickHandler = useCallback12(
|
|
3877
3962
|
(row, rowId) => (e) => {
|
|
3878
3963
|
onRowClick?.({ row, rowId }, e);
|
|
3879
3964
|
checkboxSelection && !disableSelectionOnClick && isRowSelectableCheck(rowId, row) && onCheckboxChange(e, rowId);
|
|
3880
3965
|
},
|
|
3881
3966
|
[onRowClick, checkboxSelection, disableSelectionOnClick, onCheckboxChange, isRowSelectableCheck]
|
|
3882
3967
|
);
|
|
3883
|
-
const getRowFocusHandler =
|
|
3968
|
+
const getRowFocusHandler = useCallback12(
|
|
3884
3969
|
(rowId) => () => {
|
|
3885
3970
|
onRowFocus(rowId);
|
|
3886
3971
|
},
|
|
3887
3972
|
[onRowFocus]
|
|
3888
3973
|
);
|
|
3889
|
-
const getCheckboxClickHandler =
|
|
3974
|
+
const getCheckboxClickHandler = useCallback12(
|
|
3890
3975
|
(rowId, row) => (e) => {
|
|
3891
3976
|
e.stopPropagation();
|
|
3892
3977
|
if (isRowSelectableCheck(rowId, row)) {
|
|
@@ -3896,7 +3981,7 @@ function Component(props, apiRef) {
|
|
|
3896
3981
|
},
|
|
3897
3982
|
[onCheckboxChange, isRowSelectableCheck, onRowFocus]
|
|
3898
3983
|
);
|
|
3899
|
-
const handleTableKeyDown =
|
|
3984
|
+
const handleTableKeyDown = useCallback12(
|
|
3900
3985
|
(e) => {
|
|
3901
3986
|
const supportedKeys = ["ArrowUp", "ArrowDown", " ", "Home", "End", "PageUp", "PageDown"];
|
|
3902
3987
|
if (!supportedKeys.includes(e.key)) return;
|
|
@@ -4238,7 +4323,7 @@ var DataTable = forwardRef7(Component);
|
|
|
4238
4323
|
DataTable.displayName = "DataTable";
|
|
4239
4324
|
|
|
4240
4325
|
// src/components/DateRangePicker/DateRangePicker.tsx
|
|
4241
|
-
import React26, { forwardRef as forwardRef8, useCallback as
|
|
4326
|
+
import React26, { forwardRef as forwardRef8, useCallback as useCallback13, useEffect as useEffect8, useImperativeHandle as useImperativeHandle3, useMemo as useMemo11, useRef as useRef8, useState as useState10 } from "react";
|
|
4242
4327
|
import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
|
|
4243
4328
|
import CalendarTodayIcon2 from "@mui/icons-material/CalendarToday";
|
|
4244
4329
|
import { styled as styled14, useThemeProps as useThemeProps5 } from "@mui/joy";
|
|
@@ -4399,23 +4484,23 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4399
4484
|
readOnly,
|
|
4400
4485
|
...innerProps
|
|
4401
4486
|
} = props;
|
|
4402
|
-
const innerRef =
|
|
4403
|
-
const buttonRef =
|
|
4487
|
+
const innerRef = useRef8(null);
|
|
4488
|
+
const buttonRef = useRef8(null);
|
|
4404
4489
|
const [value, setValue] = useControlledState(
|
|
4405
4490
|
props.value,
|
|
4406
4491
|
props.defaultValue || "",
|
|
4407
|
-
|
|
4492
|
+
useCallback13((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
4408
4493
|
);
|
|
4409
|
-
const [displayValue, setDisplayValue] =
|
|
4494
|
+
const [displayValue, setDisplayValue] = useState10(
|
|
4410
4495
|
() => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
|
|
4411
4496
|
);
|
|
4412
|
-
const [anchorEl, setAnchorEl] =
|
|
4497
|
+
const [anchorEl, setAnchorEl] = useState10(null);
|
|
4413
4498
|
const open = Boolean(anchorEl);
|
|
4414
4499
|
const calendarValue = useMemo11(
|
|
4415
4500
|
() => value ? parseDates(value, format) : void 0,
|
|
4416
4501
|
[value, format]
|
|
4417
4502
|
);
|
|
4418
|
-
|
|
4503
|
+
useEffect8(() => {
|
|
4419
4504
|
if (value) {
|
|
4420
4505
|
try {
|
|
4421
4506
|
const dates = parseDates(value, format);
|
|
@@ -4427,13 +4512,13 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4427
4512
|
setDisplayValue("");
|
|
4428
4513
|
}
|
|
4429
4514
|
}, [displayFormat, value, format]);
|
|
4430
|
-
|
|
4515
|
+
useEffect8(() => {
|
|
4431
4516
|
if (!anchorEl) {
|
|
4432
4517
|
innerRef.current?.blur();
|
|
4433
4518
|
}
|
|
4434
4519
|
}, [anchorEl, innerRef]);
|
|
4435
4520
|
useImperativeHandle3(ref, () => innerRef.current, [innerRef]);
|
|
4436
|
-
const handleChange =
|
|
4521
|
+
const handleChange = useCallback13(
|
|
4437
4522
|
(event) => {
|
|
4438
4523
|
const value2 = event.target.value;
|
|
4439
4524
|
setDisplayValue(value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2);
|
|
@@ -4441,7 +4526,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4441
4526
|
},
|
|
4442
4527
|
[displayFormat, format, setValue]
|
|
4443
4528
|
);
|
|
4444
|
-
const handleDisplayInputChange =
|
|
4529
|
+
const handleDisplayInputChange = useCallback13(
|
|
4445
4530
|
(event) => {
|
|
4446
4531
|
if (event.target.value === "") {
|
|
4447
4532
|
handleChange({
|
|
@@ -4466,14 +4551,14 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4466
4551
|
},
|
|
4467
4552
|
[displayFormat, format, handleChange, props.name]
|
|
4468
4553
|
);
|
|
4469
|
-
const handleCalendarToggle =
|
|
4554
|
+
const handleCalendarToggle = useCallback13(
|
|
4470
4555
|
(event) => {
|
|
4471
4556
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
4472
4557
|
innerRef.current?.focus();
|
|
4473
4558
|
},
|
|
4474
4559
|
[anchorEl, setAnchorEl, innerRef]
|
|
4475
4560
|
);
|
|
4476
|
-
const handleCalendarChange =
|
|
4561
|
+
const handleCalendarChange = useCallback13(
|
|
4477
4562
|
([date1, date2]) => {
|
|
4478
4563
|
if (!date1 || !date2) return;
|
|
4479
4564
|
const formattedValue = formatValueString2([date1, date2], format);
|
|
@@ -4487,7 +4572,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
|
4487
4572
|
},
|
|
4488
4573
|
[props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat]
|
|
4489
4574
|
);
|
|
4490
|
-
const handleInputMouseDown =
|
|
4575
|
+
const handleInputMouseDown = useCallback13(
|
|
4491
4576
|
(event) => {
|
|
4492
4577
|
if (inputReadOnly) {
|
|
4493
4578
|
event.preventDefault();
|
|
@@ -4696,13 +4781,13 @@ var InsetDrawer = styled19(JoyDrawer)(({ theme }) => ({
|
|
|
4696
4781
|
}));
|
|
4697
4782
|
|
|
4698
4783
|
// src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
|
|
4699
|
-
import React30, { useCallback as
|
|
4784
|
+
import React30, { useCallback as useCallback14, useEffect as useEffect9, useMemo as useMemo12, useRef as useRef9, useState as useState11 } from "react";
|
|
4700
4785
|
import SearchIcon from "@mui/icons-material/Search";
|
|
4701
4786
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
4702
4787
|
function LabelWithTooltip(props) {
|
|
4703
4788
|
const { label, size } = props;
|
|
4704
|
-
const labelContentRef =
|
|
4705
|
-
const [isOverflowing, setIsOverflowing] =
|
|
4789
|
+
const labelContentRef = useRef9(null);
|
|
4790
|
+
const [isOverflowing, setIsOverflowing] = useState11(false);
|
|
4706
4791
|
const labelContent = /* @__PURE__ */ React30.createElement(
|
|
4707
4792
|
"span",
|
|
4708
4793
|
{
|
|
@@ -4719,7 +4804,7 @@ function LabelWithTooltip(props) {
|
|
|
4719
4804
|
},
|
|
4720
4805
|
label
|
|
4721
4806
|
);
|
|
4722
|
-
|
|
4807
|
+
useEffect9(() => {
|
|
4723
4808
|
const element = labelContentRef.current;
|
|
4724
4809
|
if (element) {
|
|
4725
4810
|
setIsOverflowing(element.scrollWidth > element.clientWidth);
|
|
@@ -4743,16 +4828,16 @@ function FilterableCheckboxGroup(props) {
|
|
|
4743
4828
|
maxHeight = 300,
|
|
4744
4829
|
disabled
|
|
4745
4830
|
} = props;
|
|
4746
|
-
const [searchTerm, setSearchTerm] =
|
|
4747
|
-
const [sortedOptions, setSortedOptions] =
|
|
4831
|
+
const [searchTerm, setSearchTerm] = useState11("");
|
|
4832
|
+
const [sortedOptions, setSortedOptions] = useState11(options);
|
|
4748
4833
|
const [internalValue, setInternalValue] = useControlledState(
|
|
4749
4834
|
value,
|
|
4750
4835
|
value ?? [],
|
|
4751
|
-
|
|
4836
|
+
useCallback14((newValue) => onChange?.(newValue), [onChange])
|
|
4752
4837
|
);
|
|
4753
|
-
const parentRef =
|
|
4754
|
-
const isInitialSortRef =
|
|
4755
|
-
const prevOptionsRef =
|
|
4838
|
+
const parentRef = useRef9(null);
|
|
4839
|
+
const isInitialSortRef = useRef9(false);
|
|
4840
|
+
const prevOptionsRef = useRef9([...options]);
|
|
4756
4841
|
const filteredOptions = useMemo12(() => {
|
|
4757
4842
|
if (!searchTerm) return sortedOptions;
|
|
4758
4843
|
return sortedOptions.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
@@ -4775,7 +4860,7 @@ function FilterableCheckboxGroup(props) {
|
|
|
4775
4860
|
overscan: 5
|
|
4776
4861
|
});
|
|
4777
4862
|
const items = virtualizer.getVirtualItems();
|
|
4778
|
-
|
|
4863
|
+
useEffect9(() => {
|
|
4779
4864
|
const optionsChanged = prevOptionsRef.current.length !== options.length || prevOptionsRef.current.some(
|
|
4780
4865
|
(prevOption, index) => prevOption.value !== options[index]?.value || prevOption.label !== options[index]?.label || prevOption.disabled !== options[index]?.disabled
|
|
4781
4866
|
);
|
|
@@ -4801,13 +4886,13 @@ function FilterableCheckboxGroup(props) {
|
|
|
4801
4886
|
}
|
|
4802
4887
|
}
|
|
4803
4888
|
}, [options, value]);
|
|
4804
|
-
|
|
4889
|
+
useEffect9(() => {
|
|
4805
4890
|
virtualizer.measure();
|
|
4806
4891
|
}, [virtualizer, filteredOptions, size]);
|
|
4807
|
-
const handleSearchChange =
|
|
4892
|
+
const handleSearchChange = useCallback14((event) => {
|
|
4808
4893
|
setSearchTerm(event.target.value);
|
|
4809
4894
|
}, []);
|
|
4810
|
-
const handleCheckboxChange =
|
|
4895
|
+
const handleCheckboxChange = useCallback14(
|
|
4811
4896
|
(optionValue) => (event) => {
|
|
4812
4897
|
const checked = event.target.checked;
|
|
4813
4898
|
const newValue = checked ? [...internalValue, optionValue] : internalValue.filter((v) => v !== optionValue);
|
|
@@ -4815,7 +4900,7 @@ function FilterableCheckboxGroup(props) {
|
|
|
4815
4900
|
},
|
|
4816
4901
|
[internalValue, setInternalValue]
|
|
4817
4902
|
);
|
|
4818
|
-
const handleSelectAll =
|
|
4903
|
+
const handleSelectAll = useCallback14(
|
|
4819
4904
|
(event) => {
|
|
4820
4905
|
const checked = event.target.checked;
|
|
4821
4906
|
const enabledOptions = filteredOptions.filter((option) => !option.disabled);
|
|
@@ -4919,16 +5004,16 @@ function FilterableCheckboxGroup(props) {
|
|
|
4919
5004
|
FilterableCheckboxGroup.displayName = "FilterableCheckboxGroup";
|
|
4920
5005
|
|
|
4921
5006
|
// src/components/FilterMenu/FilterMenu.tsx
|
|
4922
|
-
import React41, { useCallback as
|
|
5007
|
+
import React41, { useCallback as useCallback24 } from "react";
|
|
4923
5008
|
import { Button as Button2, Stack as Stack11 } from "@mui/joy";
|
|
4924
5009
|
|
|
4925
5010
|
// src/components/FilterMenu/components/CheckboxGroup.tsx
|
|
4926
|
-
import React31, { useCallback as
|
|
5011
|
+
import React31, { useCallback as useCallback15 } from "react";
|
|
4927
5012
|
import { Stack as Stack2 } from "@mui/joy";
|
|
4928
5013
|
function CheckboxGroup(props) {
|
|
4929
5014
|
const { id, label, options, value, onChange, hidden } = props;
|
|
4930
5015
|
const [internalValue, setInternalValue] = useControlledState(value, [], onChange);
|
|
4931
|
-
const handleCheckboxChange =
|
|
5016
|
+
const handleCheckboxChange = useCallback15(
|
|
4932
5017
|
(optionValue) => (event) => {
|
|
4933
5018
|
const checked = event.target.checked;
|
|
4934
5019
|
let newValue;
|
|
@@ -4957,12 +5042,12 @@ function CheckboxGroup(props) {
|
|
|
4957
5042
|
CheckboxGroup.displayName = "CheckboxGroup";
|
|
4958
5043
|
|
|
4959
5044
|
// src/components/FilterMenu/components/FilterableCheckboxGroup.tsx
|
|
4960
|
-
import React32, { useCallback as
|
|
5045
|
+
import React32, { useCallback as useCallback16 } from "react";
|
|
4961
5046
|
import { Stack as Stack3 } from "@mui/joy";
|
|
4962
5047
|
function FilterableCheckboxGroup2(props) {
|
|
4963
5048
|
const { id, label, options, value, onChange, hidden, placeholder, maxHeight } = props;
|
|
4964
5049
|
const [internalValue, setInternalValue] = useControlledState(value, [], onChange);
|
|
4965
|
-
const handleChange =
|
|
5050
|
+
const handleChange = useCallback16(
|
|
4966
5051
|
(newValue) => {
|
|
4967
5052
|
setInternalValue(newValue);
|
|
4968
5053
|
},
|
|
@@ -4986,7 +5071,7 @@ function FilterableCheckboxGroup2(props) {
|
|
|
4986
5071
|
FilterableCheckboxGroup2.displayName = "FilterableCheckboxGroup";
|
|
4987
5072
|
|
|
4988
5073
|
// src/components/FilterMenu/components/RadioGroup.tsx
|
|
4989
|
-
import React33, { useCallback as
|
|
5074
|
+
import React33, { useCallback as useCallback17 } from "react";
|
|
4990
5075
|
|
|
4991
5076
|
// src/components/Radio/Radio.tsx
|
|
4992
5077
|
import { Radio as JoyRadio, RadioGroup as JoyRadioGroup } from "@mui/joy";
|
|
@@ -5003,7 +5088,7 @@ import { Stack as Stack4 } from "@mui/joy";
|
|
|
5003
5088
|
function RadioGroup2(props) {
|
|
5004
5089
|
const { id, label, options, value, onChange, hidden } = props;
|
|
5005
5090
|
const [internalValue, setInternalValue] = useControlledState(value, value ?? "", onChange);
|
|
5006
|
-
const handleRadioChange =
|
|
5091
|
+
const handleRadioChange = useCallback17(
|
|
5007
5092
|
(event) => {
|
|
5008
5093
|
const newValue = event.target.value;
|
|
5009
5094
|
const option = options.find((opt) => opt.value.toString() === newValue);
|
|
@@ -5020,7 +5105,7 @@ function RadioGroup2(props) {
|
|
|
5020
5105
|
RadioGroup2.displayName = "RadioGroup";
|
|
5021
5106
|
|
|
5022
5107
|
// src/components/FilterMenu/components/DateRange.tsx
|
|
5023
|
-
import React34, { useCallback as
|
|
5108
|
+
import React34, { useCallback as useCallback18, useMemo as useMemo13, useState as useState12, useEffect as useEffect10 } from "react";
|
|
5024
5109
|
import { Stack as Stack5 } from "@mui/joy";
|
|
5025
5110
|
function DateRange(props) {
|
|
5026
5111
|
const {
|
|
@@ -5038,7 +5123,7 @@ function DateRange(props) {
|
|
|
5038
5123
|
hideClearButton
|
|
5039
5124
|
} = props;
|
|
5040
5125
|
const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
|
|
5041
|
-
const [selectedOption, setSelectedOption] =
|
|
5126
|
+
const [selectedOption, setSelectedOption] = useState12("all-time");
|
|
5042
5127
|
const dateRangeOptions = useMemo13(
|
|
5043
5128
|
() => [
|
|
5044
5129
|
{ label: "All Time", value: "all-time" },
|
|
@@ -5049,7 +5134,7 @@ function DateRange(props) {
|
|
|
5049
5134
|
],
|
|
5050
5135
|
[]
|
|
5051
5136
|
);
|
|
5052
|
-
const getDateRangeForOption =
|
|
5137
|
+
const getDateRangeForOption = useCallback18(
|
|
5053
5138
|
(option) => {
|
|
5054
5139
|
const now = /* @__PURE__ */ new Date();
|
|
5055
5140
|
const currentYear = now.getFullYear();
|
|
@@ -5088,7 +5173,7 @@ function DateRange(props) {
|
|
|
5088
5173
|
},
|
|
5089
5174
|
[internalValue]
|
|
5090
5175
|
);
|
|
5091
|
-
const determineOptionFromValue =
|
|
5176
|
+
const determineOptionFromValue = useCallback18(
|
|
5092
5177
|
(value2) => {
|
|
5093
5178
|
if (!value2) {
|
|
5094
5179
|
return "all-time";
|
|
@@ -5110,11 +5195,11 @@ function DateRange(props) {
|
|
|
5110
5195
|
}
|
|
5111
5196
|
return "";
|
|
5112
5197
|
}, [selectedOption, internalValue]);
|
|
5113
|
-
|
|
5198
|
+
useEffect10(() => {
|
|
5114
5199
|
const newOption = determineOptionFromValue(internalValue);
|
|
5115
5200
|
setSelectedOption(newOption);
|
|
5116
5201
|
}, [internalValue, determineOptionFromValue]);
|
|
5117
|
-
const handleOptionChange =
|
|
5202
|
+
const handleOptionChange = useCallback18(
|
|
5118
5203
|
(event) => {
|
|
5119
5204
|
const newOption = event.target.value;
|
|
5120
5205
|
setSelectedOption(newOption);
|
|
@@ -5123,7 +5208,7 @@ function DateRange(props) {
|
|
|
5123
5208
|
},
|
|
5124
5209
|
[getDateRangeForOption, setInternalValue]
|
|
5125
5210
|
);
|
|
5126
|
-
const handleCustomDateChange =
|
|
5211
|
+
const handleCustomDateChange = useCallback18(
|
|
5127
5212
|
(event) => {
|
|
5128
5213
|
const dateRangeString = event.target.value;
|
|
5129
5214
|
if (dateRangeString && dateRangeString.includes(" - ")) {
|
|
@@ -5163,12 +5248,12 @@ function DateRange(props) {
|
|
|
5163
5248
|
DateRange.displayName = "DateRange";
|
|
5164
5249
|
|
|
5165
5250
|
// src/components/FilterMenu/components/CurrencyInput.tsx
|
|
5166
|
-
import React35, { useCallback as
|
|
5251
|
+
import React35, { useCallback as useCallback19 } from "react";
|
|
5167
5252
|
import { Stack as Stack6 } from "@mui/joy";
|
|
5168
5253
|
function CurrencyInput3(props) {
|
|
5169
5254
|
const { id, label, value, onChange, hidden, max, placeholder, useMinorUnit, currency = "USD" } = props;
|
|
5170
5255
|
const [internalValue, setInternalValue] = useControlledState(value, value, onChange);
|
|
5171
|
-
const handleCurrencyChange =
|
|
5256
|
+
const handleCurrencyChange = useCallback19(
|
|
5172
5257
|
(event) => {
|
|
5173
5258
|
const newValue = event.target.value;
|
|
5174
5259
|
setInternalValue(newValue);
|
|
@@ -5194,14 +5279,14 @@ function CurrencyInput3(props) {
|
|
|
5194
5279
|
CurrencyInput3.displayName = "CurrencyInput";
|
|
5195
5280
|
|
|
5196
5281
|
// src/components/FilterMenu/components/CurrencyRange.tsx
|
|
5197
|
-
import React36, { useCallback as
|
|
5282
|
+
import React36, { useCallback as useCallback20 } from "react";
|
|
5198
5283
|
import { Stack as Stack7 } from "@mui/joy";
|
|
5199
5284
|
function CurrencyRange(props) {
|
|
5200
5285
|
const { id, label, value, onChange, hidden, max, placeholder, useMinorUnit, currency = "USD" } = props;
|
|
5201
5286
|
const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
|
|
5202
5287
|
const minValue = internalValue?.[0];
|
|
5203
5288
|
const maxValue = internalValue?.[1];
|
|
5204
|
-
const handleMinChange =
|
|
5289
|
+
const handleMinChange = useCallback20(
|
|
5205
5290
|
(event) => {
|
|
5206
5291
|
const newMinValue = event.target.value;
|
|
5207
5292
|
const currentMaxValue = maxValue;
|
|
@@ -5215,7 +5300,7 @@ function CurrencyRange(props) {
|
|
|
5215
5300
|
},
|
|
5216
5301
|
[maxValue, setInternalValue]
|
|
5217
5302
|
);
|
|
5218
|
-
const handleMaxChange =
|
|
5303
|
+
const handleMaxChange = useCallback20(
|
|
5219
5304
|
(event) => {
|
|
5220
5305
|
const newMaxValue = event.target.value;
|
|
5221
5306
|
const currentMinValue = minValue;
|
|
@@ -5267,7 +5352,7 @@ import React38 from "react";
|
|
|
5267
5352
|
import { Stack as Stack8, Typography as Typography4 } from "@mui/joy";
|
|
5268
5353
|
|
|
5269
5354
|
// src/components/PercentageInput/PercentageInput.tsx
|
|
5270
|
-
import React37, { useCallback as
|
|
5355
|
+
import React37, { useCallback as useCallback21, useMemo as useMemo14, useState as useState13 } from "react";
|
|
5271
5356
|
import { NumericFormat as NumericFormat2 } from "react-number-format";
|
|
5272
5357
|
import { styled as styled20, useThemeProps as useThemeProps6 } from "@mui/joy";
|
|
5273
5358
|
var padDecimal = (value, decimalScale) => {
|
|
@@ -5324,9 +5409,9 @@ var PercentageInput = React37.forwardRef(
|
|
|
5324
5409
|
const [_value, setValue] = useControlledState(
|
|
5325
5410
|
props.value,
|
|
5326
5411
|
props.defaultValue,
|
|
5327
|
-
|
|
5412
|
+
useCallback21((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
|
|
5328
5413
|
);
|
|
5329
|
-
const [internalError, setInternalError] =
|
|
5414
|
+
const [internalError, setInternalError] = useState13(
|
|
5330
5415
|
max && _value && _value > max || min && _value && _value < min
|
|
5331
5416
|
);
|
|
5332
5417
|
const value = useMemo14(() => {
|
|
@@ -5335,7 +5420,7 @@ var PercentageInput = React37.forwardRef(
|
|
|
5335
5420
|
}
|
|
5336
5421
|
return _value;
|
|
5337
5422
|
}, [_value, useMinorUnit, maxDecimalScale]);
|
|
5338
|
-
const handleChange =
|
|
5423
|
+
const handleChange = useCallback21(
|
|
5339
5424
|
(event) => {
|
|
5340
5425
|
if (event.target.value === "") {
|
|
5341
5426
|
setValue(void 0);
|
|
@@ -5414,7 +5499,7 @@ var PercentageInput3 = ({
|
|
|
5414
5499
|
};
|
|
5415
5500
|
|
|
5416
5501
|
// src/components/FilterMenu/components/PercentageRange.tsx
|
|
5417
|
-
import React39, { useCallback as
|
|
5502
|
+
import React39, { useCallback as useCallback22 } from "react";
|
|
5418
5503
|
import { Stack as Stack9 } from "@mui/joy";
|
|
5419
5504
|
function PercentageRange(props) {
|
|
5420
5505
|
const { id, label, value, onChange, hidden, useMinorUnit, maxDecimalScale, min, max } = props;
|
|
@@ -5425,7 +5510,7 @@ function PercentageRange(props) {
|
|
|
5425
5510
|
);
|
|
5426
5511
|
const minValue = internalValue?.[0];
|
|
5427
5512
|
const maxValue = internalValue?.[1];
|
|
5428
|
-
const handleMinChange =
|
|
5513
|
+
const handleMinChange = useCallback22(
|
|
5429
5514
|
(event) => {
|
|
5430
5515
|
const newMinValue = event.target.value;
|
|
5431
5516
|
const currentMaxValue = maxValue;
|
|
@@ -5437,7 +5522,7 @@ function PercentageRange(props) {
|
|
|
5437
5522
|
},
|
|
5438
5523
|
[maxValue, setInternalValue]
|
|
5439
5524
|
);
|
|
5440
|
-
const handleMaxChange =
|
|
5525
|
+
const handleMaxChange = useCallback22(
|
|
5441
5526
|
(event) => {
|
|
5442
5527
|
const newMaxValue = event.target.value;
|
|
5443
5528
|
const currentMinValue = minValue;
|
|
@@ -5485,13 +5570,13 @@ function PercentageRange(props) {
|
|
|
5485
5570
|
PercentageRange.displayName = "PercentageRange";
|
|
5486
5571
|
|
|
5487
5572
|
// src/components/FilterMenu/components/Autocomplete.tsx
|
|
5488
|
-
import React40, { useCallback as
|
|
5573
|
+
import React40, { useCallback as useCallback23 } from "react";
|
|
5489
5574
|
import { Stack as Stack10 } from "@mui/joy";
|
|
5490
5575
|
function Autocomplete2(props) {
|
|
5491
5576
|
const { id, label, value, onChange, options, multiple, hidden, placeholder } = props;
|
|
5492
5577
|
const [internalValue, setInternalValue] = useControlledState(value, void 0, onChange);
|
|
5493
5578
|
const autocompleteValue = typeof internalValue === "string" || typeof internalValue === "number" ? String(internalValue) : void 0;
|
|
5494
|
-
const handleChange =
|
|
5579
|
+
const handleChange = useCallback23(
|
|
5495
5580
|
(event) => {
|
|
5496
5581
|
const val = event.target.value;
|
|
5497
5582
|
if (val) {
|
|
@@ -5540,7 +5625,7 @@ function FilterMenu(props) {
|
|
|
5540
5625
|
void 0
|
|
5541
5626
|
// onChange는 Apply 버튼에서만 호출
|
|
5542
5627
|
);
|
|
5543
|
-
const handleFilterChange =
|
|
5628
|
+
const handleFilterChange = useCallback24(
|
|
5544
5629
|
(filterId, value) => {
|
|
5545
5630
|
setInternalValues((prev) => ({
|
|
5546
5631
|
...prev,
|
|
@@ -5549,11 +5634,11 @@ function FilterMenu(props) {
|
|
|
5549
5634
|
},
|
|
5550
5635
|
[setInternalValues]
|
|
5551
5636
|
);
|
|
5552
|
-
const handleApply =
|
|
5637
|
+
const handleApply = useCallback24(() => {
|
|
5553
5638
|
onChange?.(internalValues);
|
|
5554
5639
|
onClose?.();
|
|
5555
5640
|
}, [onChange, onClose, internalValues]);
|
|
5556
|
-
const handleClear =
|
|
5641
|
+
const handleClear = useCallback24(() => {
|
|
5557
5642
|
const clearedValues = resetValues || {};
|
|
5558
5643
|
setInternalValues(clearedValues);
|
|
5559
5644
|
onChange?.(clearedValues);
|
|
@@ -5589,7 +5674,7 @@ function FilterMenu(props) {
|
|
|
5589
5674
|
FilterMenu.displayName = "FilterMenu";
|
|
5590
5675
|
|
|
5591
5676
|
// src/components/Uploader/Uploader.tsx
|
|
5592
|
-
import React42, { useCallback as
|
|
5677
|
+
import React42, { useCallback as useCallback25, useEffect as useEffect11, useMemo as useMemo15, useRef as useRef10, useState as useState14 } from "react";
|
|
5593
5678
|
import { styled as styled21, Input as Input2 } from "@mui/joy";
|
|
5594
5679
|
import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
|
|
5595
5680
|
import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
|
|
@@ -5738,12 +5823,12 @@ var Uploader = React42.memo(
|
|
|
5738
5823
|
error: errorProp,
|
|
5739
5824
|
helperText: helperTextProp
|
|
5740
5825
|
} = props;
|
|
5741
|
-
const dropZoneRef =
|
|
5742
|
-
const inputRef =
|
|
5743
|
-
const [errorText, setErrorText] =
|
|
5744
|
-
const [files, setFiles] =
|
|
5745
|
-
const [uploaded, setUploaded] =
|
|
5746
|
-
const [previewState, setPreviewState] =
|
|
5826
|
+
const dropZoneRef = useRef10(null);
|
|
5827
|
+
const inputRef = useRef10(null);
|
|
5828
|
+
const [errorText, setErrorText] = useState14();
|
|
5829
|
+
const [files, setFiles] = useState14([]);
|
|
5830
|
+
const [uploaded, setUploaded] = useState14(props.uploaded || []);
|
|
5831
|
+
const [previewState, setPreviewState] = useState14("idle");
|
|
5747
5832
|
const accepts = useMemo15(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
|
|
5748
5833
|
const parsedAccepts = useMemo15(
|
|
5749
5834
|
() => accepts.flatMap((type) => {
|
|
@@ -5789,7 +5874,7 @@ var Uploader = React42.memo(
|
|
|
5789
5874
|
() => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
|
|
5790
5875
|
[files, maxCount, uploaded]
|
|
5791
5876
|
);
|
|
5792
|
-
const addFiles =
|
|
5877
|
+
const addFiles = useCallback25(
|
|
5793
5878
|
(uploads) => {
|
|
5794
5879
|
try {
|
|
5795
5880
|
const types = parsedAccepts.map((type) => type.replace(".", "")) || [];
|
|
@@ -5834,7 +5919,7 @@ var Uploader = React42.memo(
|
|
|
5834
5919
|
},
|
|
5835
5920
|
[files, uploaded, maxCount, parsedAccepts, maxFileSize, maxFileTotalSize, name, onChange]
|
|
5836
5921
|
);
|
|
5837
|
-
|
|
5922
|
+
useEffect11(() => {
|
|
5838
5923
|
if (!dropZoneRef.current || disabled) {
|
|
5839
5924
|
return;
|
|
5840
5925
|
}
|
|
@@ -5872,7 +5957,7 @@ var Uploader = React42.memo(
|
|
|
5872
5957
|
);
|
|
5873
5958
|
return () => cleanup?.();
|
|
5874
5959
|
}, [disabled, addFiles]);
|
|
5875
|
-
|
|
5960
|
+
useEffect11(() => {
|
|
5876
5961
|
if (inputRef.current && minCount) {
|
|
5877
5962
|
if (files.length < minCount) {
|
|
5878
5963
|
inputRef.current.setCustomValidity(`At least ${minCount} files are required.`);
|
|
@@ -5881,14 +5966,14 @@ var Uploader = React42.memo(
|
|
|
5881
5966
|
}
|
|
5882
5967
|
}
|
|
5883
5968
|
}, [inputRef, files, minCount]);
|
|
5884
|
-
const handleFileChanged =
|
|
5969
|
+
const handleFileChanged = useCallback25(
|
|
5885
5970
|
(event) => {
|
|
5886
5971
|
const files2 = Array.from(event.target.files || []);
|
|
5887
5972
|
addFiles(files2);
|
|
5888
5973
|
},
|
|
5889
5974
|
[addFiles]
|
|
5890
5975
|
);
|
|
5891
|
-
const handleDeleteFile =
|
|
5976
|
+
const handleDeleteFile = useCallback25(
|
|
5892
5977
|
(deletedFile) => {
|
|
5893
5978
|
if (deletedFile instanceof File) {
|
|
5894
5979
|
setFiles((current) => {
|
|
@@ -5908,7 +5993,7 @@ var Uploader = React42.memo(
|
|
|
5908
5993
|
},
|
|
5909
5994
|
[name, onChange, onDelete]
|
|
5910
5995
|
);
|
|
5911
|
-
const handleUploaderButtonClick =
|
|
5996
|
+
const handleUploaderButtonClick = useCallback25(() => {
|
|
5912
5997
|
inputRef.current?.click();
|
|
5913
5998
|
}, []);
|
|
5914
5999
|
const uploader = /* @__PURE__ */ React42.createElement(
|
|
@@ -6003,14 +6088,14 @@ function IconMenuButton(props) {
|
|
|
6003
6088
|
IconMenuButton.displayName = "IconMenuButton";
|
|
6004
6089
|
|
|
6005
6090
|
// src/components/Markdown/Markdown.tsx
|
|
6006
|
-
import React44, { lazy, Suspense, useEffect as
|
|
6091
|
+
import React44, { lazy, Suspense, useEffect as useEffect12, useState as useState15 } from "react";
|
|
6007
6092
|
import { Skeleton } from "@mui/joy";
|
|
6008
6093
|
import { Link as Link2 } from "@mui/joy";
|
|
6009
6094
|
import remarkGfm from "remark-gfm";
|
|
6010
6095
|
var LazyReactMarkdown = lazy(() => import("react-markdown"));
|
|
6011
6096
|
var Markdown = (props) => {
|
|
6012
|
-
const [rehypeAccent2, setRehypeAccent] =
|
|
6013
|
-
|
|
6097
|
+
const [rehypeAccent2, setRehypeAccent] = useState15(null);
|
|
6098
|
+
useEffect12(() => {
|
|
6014
6099
|
const loadRehypeAccent = async () => {
|
|
6015
6100
|
const module = await Promise.resolve().then(() => (init_rehype_accent(), rehype_accent_exports));
|
|
6016
6101
|
setRehypeAccent(() => module.rehypeAccent);
|
|
@@ -6184,7 +6269,7 @@ function MenuButton(props) {
|
|
|
6184
6269
|
MenuButton.displayName = "MenuButton";
|
|
6185
6270
|
|
|
6186
6271
|
// src/components/MonthPicker/MonthPicker.tsx
|
|
6187
|
-
import React46, { forwardRef as forwardRef9, useCallback as
|
|
6272
|
+
import React46, { forwardRef as forwardRef9, useCallback as useCallback26, useEffect as useEffect13, useImperativeHandle as useImperativeHandle4, useRef as useRef11, useState as useState16 } from "react";
|
|
6188
6273
|
import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
|
|
6189
6274
|
import { styled as styled22, useThemeProps as useThemeProps7 } from "@mui/joy";
|
|
6190
6275
|
import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
|
|
@@ -6266,14 +6351,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
6266
6351
|
locale,
|
|
6267
6352
|
...innerProps
|
|
6268
6353
|
} = props;
|
|
6269
|
-
const innerRef =
|
|
6270
|
-
const buttonRef =
|
|
6354
|
+
const innerRef = useRef11(null);
|
|
6355
|
+
const buttonRef = useRef11(null);
|
|
6271
6356
|
const [value, setValue, isControlled] = useControlledState(
|
|
6272
6357
|
props.value,
|
|
6273
6358
|
props.defaultValue || "",
|
|
6274
|
-
|
|
6359
|
+
useCallback26((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
6275
6360
|
);
|
|
6276
|
-
const getFormattedDisplayValue =
|
|
6361
|
+
const getFormattedDisplayValue = useCallback26(
|
|
6277
6362
|
(inputValue) => {
|
|
6278
6363
|
if (!inputValue) return "";
|
|
6279
6364
|
try {
|
|
@@ -6284,19 +6369,19 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
6284
6369
|
},
|
|
6285
6370
|
[format, displayFormat, locale]
|
|
6286
6371
|
);
|
|
6287
|
-
const [displayValue, setDisplayValue] =
|
|
6288
|
-
const [anchorEl, setAnchorEl] =
|
|
6372
|
+
const [displayValue, setDisplayValue] = useState16(() => getFormattedDisplayValue(value));
|
|
6373
|
+
const [anchorEl, setAnchorEl] = useState16(null);
|
|
6289
6374
|
const open = Boolean(anchorEl);
|
|
6290
|
-
|
|
6375
|
+
useEffect13(() => {
|
|
6291
6376
|
if (!anchorEl) {
|
|
6292
6377
|
innerRef.current?.blur();
|
|
6293
6378
|
}
|
|
6294
6379
|
}, [anchorEl, innerRef]);
|
|
6295
6380
|
useImperativeHandle4(ref, () => innerRef.current, [innerRef]);
|
|
6296
|
-
|
|
6381
|
+
useEffect13(() => {
|
|
6297
6382
|
setDisplayValue(getFormattedDisplayValue(value));
|
|
6298
6383
|
}, [value, getFormattedDisplayValue]);
|
|
6299
|
-
const handleChange =
|
|
6384
|
+
const handleChange = useCallback26(
|
|
6300
6385
|
(event) => {
|
|
6301
6386
|
const newValue = event.target.value;
|
|
6302
6387
|
setValue(newValue);
|
|
@@ -6306,14 +6391,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
6306
6391
|
},
|
|
6307
6392
|
[setValue, getFormattedDisplayValue, isControlled]
|
|
6308
6393
|
);
|
|
6309
|
-
const handleCalendarToggle =
|
|
6394
|
+
const handleCalendarToggle = useCallback26(
|
|
6310
6395
|
(event) => {
|
|
6311
6396
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
6312
6397
|
innerRef.current?.focus();
|
|
6313
6398
|
},
|
|
6314
6399
|
[anchorEl, setAnchorEl, innerRef]
|
|
6315
6400
|
);
|
|
6316
|
-
const handleInputMouseDown =
|
|
6401
|
+
const handleInputMouseDown = useCallback26(
|
|
6317
6402
|
(event) => {
|
|
6318
6403
|
event.preventDefault();
|
|
6319
6404
|
buttonRef.current?.focus();
|
|
@@ -6437,7 +6522,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
6437
6522
|
});
|
|
6438
6523
|
|
|
6439
6524
|
// src/components/MonthRangePicker/MonthRangePicker.tsx
|
|
6440
|
-
import React47, { forwardRef as forwardRef10, useCallback as
|
|
6525
|
+
import React47, { forwardRef as forwardRef10, useCallback as useCallback27, useEffect as useEffect14, useImperativeHandle as useImperativeHandle5, useMemo as useMemo16, useRef as useRef12, useState as useState17 } from "react";
|
|
6441
6526
|
import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
|
|
6442
6527
|
import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
|
|
6443
6528
|
import { styled as styled23, useThemeProps as useThemeProps8 } from "@mui/joy";
|
|
@@ -6545,35 +6630,35 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
|
6545
6630
|
size,
|
|
6546
6631
|
...innerProps
|
|
6547
6632
|
} = props;
|
|
6548
|
-
const innerRef =
|
|
6633
|
+
const innerRef = useRef12(null);
|
|
6549
6634
|
const [value, setValue] = useControlledState(
|
|
6550
6635
|
props.value,
|
|
6551
6636
|
props.defaultValue || "",
|
|
6552
|
-
|
|
6637
|
+
useCallback27((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
6553
6638
|
);
|
|
6554
|
-
const [anchorEl, setAnchorEl] =
|
|
6639
|
+
const [anchorEl, setAnchorEl] = useState17(null);
|
|
6555
6640
|
const open = Boolean(anchorEl);
|
|
6556
6641
|
const calendarValue = useMemo16(() => value ? parseDates2(value) : void 0, [value]);
|
|
6557
|
-
|
|
6642
|
+
useEffect14(() => {
|
|
6558
6643
|
if (!anchorEl) {
|
|
6559
6644
|
innerRef.current?.blur();
|
|
6560
6645
|
}
|
|
6561
6646
|
}, [anchorEl, innerRef]);
|
|
6562
6647
|
useImperativeHandle5(ref, () => innerRef.current, [innerRef]);
|
|
6563
|
-
const handleChange =
|
|
6648
|
+
const handleChange = useCallback27(
|
|
6564
6649
|
(event) => {
|
|
6565
6650
|
setValue(event.target.value);
|
|
6566
6651
|
},
|
|
6567
6652
|
[setValue]
|
|
6568
6653
|
);
|
|
6569
|
-
const handleCalendarToggle =
|
|
6654
|
+
const handleCalendarToggle = useCallback27(
|
|
6570
6655
|
(event) => {
|
|
6571
6656
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
6572
6657
|
innerRef.current?.focus();
|
|
6573
6658
|
},
|
|
6574
6659
|
[anchorEl, setAnchorEl, innerRef]
|
|
6575
6660
|
);
|
|
6576
|
-
const handleCalendarChange =
|
|
6661
|
+
const handleCalendarChange = useCallback27(
|
|
6577
6662
|
([date1, date2]) => {
|
|
6578
6663
|
if (!date1 || !date2) return;
|
|
6579
6664
|
setValue(formatValueString4([date1, date2], format));
|
|
@@ -6800,7 +6885,7 @@ function Navigator(props) {
|
|
|
6800
6885
|
Navigator.displayName = "Navigator";
|
|
6801
6886
|
|
|
6802
6887
|
// src/components/ProfileMenu/ProfileMenu.tsx
|
|
6803
|
-
import React51, { useCallback as
|
|
6888
|
+
import React51, { useCallback as useCallback28, useMemo as useMemo17 } from "react";
|
|
6804
6889
|
import { Dropdown as Dropdown2, ListDivider, menuItemClasses, styled as styled26, MenuButton as MenuButton2 } from "@mui/joy";
|
|
6805
6890
|
import { ClickAwayListener as ClickAwayListener5 } from "@mui/base";
|
|
6806
6891
|
import DropdownIcon from "@mui/icons-material/ArrowDropDown";
|
|
@@ -6852,7 +6937,7 @@ function ProfileMenu(props) {
|
|
|
6852
6937
|
const [open, setOpen] = useControlledState(
|
|
6853
6938
|
_open,
|
|
6854
6939
|
defaultOpen ?? false,
|
|
6855
|
-
|
|
6940
|
+
useCallback28((value) => onOpenChange?.(value), [onOpenChange])
|
|
6856
6941
|
);
|
|
6857
6942
|
return /* @__PURE__ */ React51.createElement(ClickAwayListener5, { onClickAway: () => setOpen(false) }, /* @__PURE__ */ React51.createElement("div", null, /* @__PURE__ */ React51.createElement(Dropdown2, { open }, /* @__PURE__ */ React51.createElement(
|
|
6858
6943
|
ProfileMenuButton,
|