@ceed/ads 1.16.0-next.1 → 1.16.0-next.10
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/FilterMenu/components/FilterableCheckboxGroup.d.ts +11 -0
- package/dist/components/FilterMenu/types.d.ts +10 -2
- package/dist/components/FilterableCheckboxGroup/FilterableCheckboxGroup.d.ts +2 -0
- package/dist/components/Pagination/Pagination.d.ts +1 -0
- package/dist/components/inputs/FilterMenu.md +20 -0
- package/dist/components/inputs/FilterableCheckboxGroup.md +26 -0
- package/dist/components/navigation/Pagination.md +11 -2
- package/dist/index.cjs +379 -209
- package/dist/index.js +339 -169
- package/framer/index.js +40 -40
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3456,8 +3456,10 @@ TableBody.displayName = "TableBody";
|
|
|
3456
3456
|
|
|
3457
3457
|
// src/components/Pagination/Pagination.tsx
|
|
3458
3458
|
import React24, { useCallback as useCallback10, useEffect as useEffect6 } from "react";
|
|
3459
|
-
import PreviousIcon from "@mui/icons-material/
|
|
3460
|
-
import NextIcon from "@mui/icons-material/
|
|
3459
|
+
import PreviousIcon from "@mui/icons-material/ChevronLeftRounded";
|
|
3460
|
+
import NextIcon from "@mui/icons-material/ChevronRightRounded";
|
|
3461
|
+
import FirstPageIcon from "@mui/icons-material/FirstPageRounded";
|
|
3462
|
+
import LastPageIcon from "@mui/icons-material/LastPageRounded";
|
|
3461
3463
|
import { styled as styled13 } from "@mui/joy";
|
|
3462
3464
|
var PaginationButton = styled13(Button_default, {
|
|
3463
3465
|
name: "Pagination",
|
|
@@ -3516,6 +3518,7 @@ function Pagination(props) {
|
|
|
3516
3518
|
onPageChange,
|
|
3517
3519
|
rowCount,
|
|
3518
3520
|
size = "md",
|
|
3521
|
+
variant = "standard",
|
|
3519
3522
|
...innerProps
|
|
3520
3523
|
} = props;
|
|
3521
3524
|
const [paginationModel, setPaginationModel] = useControlledState(
|
|
@@ -3542,6 +3545,87 @@ function Pagination(props) {
|
|
|
3542
3545
|
setPaginationModel({ ...paginationModel, page: lastPage });
|
|
3543
3546
|
}
|
|
3544
3547
|
}, [rowCount, paginationModel, lastPage, setPaginationModel]);
|
|
3548
|
+
const pageOptions = Array.from({ length: lastPage }, (_, i) => ({
|
|
3549
|
+
label: `${i + 1}`,
|
|
3550
|
+
value: `${i + 1}`
|
|
3551
|
+
}));
|
|
3552
|
+
if (variant === "compact") {
|
|
3553
|
+
return /* @__PURE__ */ React24.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ React24.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ React24.createElement(Stack_default, { direction: "row" }, /* @__PURE__ */ React24.createElement(
|
|
3554
|
+
PaginationIconButton,
|
|
3555
|
+
{
|
|
3556
|
+
size,
|
|
3557
|
+
variant: "plain",
|
|
3558
|
+
color: "neutral",
|
|
3559
|
+
onClick: () => handlePageChange(firstPage),
|
|
3560
|
+
disabled: paginationModel.page === firstPage,
|
|
3561
|
+
"aria-label": "First page"
|
|
3562
|
+
},
|
|
3563
|
+
/* @__PURE__ */ React24.createElement(FirstPageIcon, null)
|
|
3564
|
+
), /* @__PURE__ */ React24.createElement(
|
|
3565
|
+
PaginationIconButton,
|
|
3566
|
+
{
|
|
3567
|
+
size,
|
|
3568
|
+
variant: "plain",
|
|
3569
|
+
color: "neutral",
|
|
3570
|
+
onClick: () => handlePageChange(paginationModel.page - 1),
|
|
3571
|
+
disabled: paginationModel.page === firstPage,
|
|
3572
|
+
"aria-label": "Previous page"
|
|
3573
|
+
},
|
|
3574
|
+
/* @__PURE__ */ React24.createElement(PreviousIcon, null)
|
|
3575
|
+
)), /* @__PURE__ */ React24.createElement(
|
|
3576
|
+
Autocomplete_default,
|
|
3577
|
+
{
|
|
3578
|
+
size,
|
|
3579
|
+
value: `${paginationModel.page}`,
|
|
3580
|
+
onChange: (event) => {
|
|
3581
|
+
if (event.target.value) {
|
|
3582
|
+
handlePageChange(parseInt(event.target.value, 10));
|
|
3583
|
+
}
|
|
3584
|
+
},
|
|
3585
|
+
options: pageOptions,
|
|
3586
|
+
sx: {
|
|
3587
|
+
width: {
|
|
3588
|
+
sm: "80px",
|
|
3589
|
+
md: "100px",
|
|
3590
|
+
lg: "120px"
|
|
3591
|
+
}[size]
|
|
3592
|
+
}
|
|
3593
|
+
}
|
|
3594
|
+
), /* @__PURE__ */ React24.createElement(
|
|
3595
|
+
Typography_default,
|
|
3596
|
+
{
|
|
3597
|
+
level: `body-${size}`,
|
|
3598
|
+
sx: (theme) => ({
|
|
3599
|
+
color: theme.palette.text.secondary,
|
|
3600
|
+
fontWeight: 500
|
|
3601
|
+
})
|
|
3602
|
+
},
|
|
3603
|
+
"/ ",
|
|
3604
|
+
lastPage
|
|
3605
|
+
), /* @__PURE__ */ React24.createElement(Stack_default, { direction: "row" }, /* @__PURE__ */ React24.createElement(
|
|
3606
|
+
PaginationIconButton,
|
|
3607
|
+
{
|
|
3608
|
+
size,
|
|
3609
|
+
variant: "plain",
|
|
3610
|
+
color: "neutral",
|
|
3611
|
+
onClick: () => handlePageChange(paginationModel.page + 1),
|
|
3612
|
+
disabled: paginationModel.page === lastPage,
|
|
3613
|
+
"aria-label": "Next page"
|
|
3614
|
+
},
|
|
3615
|
+
/* @__PURE__ */ React24.createElement(NextIcon, null)
|
|
3616
|
+
), /* @__PURE__ */ React24.createElement(
|
|
3617
|
+
PaginationIconButton,
|
|
3618
|
+
{
|
|
3619
|
+
size,
|
|
3620
|
+
variant: "plain",
|
|
3621
|
+
color: "neutral",
|
|
3622
|
+
onClick: () => handlePageChange(lastPage),
|
|
3623
|
+
disabled: paginationModel.page === lastPage,
|
|
3624
|
+
"aria-label": "Last page"
|
|
3625
|
+
},
|
|
3626
|
+
/* @__PURE__ */ React24.createElement(LastPageIcon, null)
|
|
3627
|
+
))));
|
|
3628
|
+
}
|
|
3545
3629
|
return /* @__PURE__ */ React24.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ React24.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ React24.createElement(
|
|
3546
3630
|
PaginationIconButton,
|
|
3547
3631
|
{
|
|
@@ -4411,11 +4495,52 @@ var InsetDrawer = styled19(JoyDrawer)(({ theme }) => ({
|
|
|
4411
4495
|
|
|
4412
4496
|
// src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
|
|
4413
4497
|
import React30, { useCallback as useCallback13, useEffect as useEffect8, useMemo as useMemo12, useRef as useRef8, useState as useState10 } from "react";
|
|
4414
|
-
import { Input as Input2, Stack as Stack2 } from "@mui/joy";
|
|
4415
4498
|
import SearchIcon from "@mui/icons-material/Search";
|
|
4416
4499
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
4500
|
+
function LabelWithTooltip(props) {
|
|
4501
|
+
const { label, size } = props;
|
|
4502
|
+
const labelContentRef = useRef8(null);
|
|
4503
|
+
const [isOverflowing, setIsOverflowing] = useState10(false);
|
|
4504
|
+
const labelContent = /* @__PURE__ */ React30.createElement(
|
|
4505
|
+
"span",
|
|
4506
|
+
{
|
|
4507
|
+
ref: labelContentRef,
|
|
4508
|
+
style: {
|
|
4509
|
+
textOverflow: "ellipsis",
|
|
4510
|
+
overflow: "hidden",
|
|
4511
|
+
whiteSpace: "nowrap",
|
|
4512
|
+
display: "block",
|
|
4513
|
+
position: "relative",
|
|
4514
|
+
zIndex: 1,
|
|
4515
|
+
cursor: "pointer"
|
|
4516
|
+
}
|
|
4517
|
+
},
|
|
4518
|
+
label
|
|
4519
|
+
);
|
|
4520
|
+
useEffect8(() => {
|
|
4521
|
+
const element = labelContentRef.current;
|
|
4522
|
+
if (element) {
|
|
4523
|
+
setIsOverflowing(element.scrollWidth > element.clientWidth);
|
|
4524
|
+
}
|
|
4525
|
+
}, [label]);
|
|
4526
|
+
if (isOverflowing) {
|
|
4527
|
+
return /* @__PURE__ */ React30.createElement(Tooltip_default, { variant: "solid", size, title: label, placement: "bottom-start" }, labelContent);
|
|
4528
|
+
}
|
|
4529
|
+
return labelContent;
|
|
4530
|
+
}
|
|
4417
4531
|
function FilterableCheckboxGroup(props) {
|
|
4418
|
-
const {
|
|
4532
|
+
const {
|
|
4533
|
+
value,
|
|
4534
|
+
options,
|
|
4535
|
+
label,
|
|
4536
|
+
placeholder,
|
|
4537
|
+
helperText,
|
|
4538
|
+
size = "md",
|
|
4539
|
+
required,
|
|
4540
|
+
onChange,
|
|
4541
|
+
maxHeight = 300,
|
|
4542
|
+
disabled
|
|
4543
|
+
} = props;
|
|
4419
4544
|
const [searchTerm, setSearchTerm] = useState10("");
|
|
4420
4545
|
const [sortedOptions, setSortedOptions] = useState10(options);
|
|
4421
4546
|
const [internalValue, setInternalValue] = useControlledState(
|
|
@@ -4493,37 +4618,47 @@ function FilterableCheckboxGroup(props) {
|
|
|
4493
4618
|
const handleSelectAll = useCallback13(
|
|
4494
4619
|
(event) => {
|
|
4495
4620
|
const checked = event.target.checked;
|
|
4621
|
+
const enabledOptions = filteredOptions.filter((option) => !option.disabled);
|
|
4622
|
+
const disabledSelectedValues = internalValue.filter(
|
|
4623
|
+
(v) => filteredOptions.some((opt) => opt.value === v && opt.disabled)
|
|
4624
|
+
);
|
|
4496
4625
|
if (checked) {
|
|
4497
|
-
|
|
4626
|
+
const enabledValues = enabledOptions.map((option) => option.value);
|
|
4627
|
+
setInternalValue([...disabledSelectedValues, ...enabledValues]);
|
|
4498
4628
|
} else {
|
|
4499
|
-
setInternalValue(
|
|
4629
|
+
setInternalValue(disabledSelectedValues);
|
|
4500
4630
|
}
|
|
4501
4631
|
},
|
|
4502
|
-
[filteredOptions, setInternalValue]
|
|
4632
|
+
[filteredOptions, internalValue, setInternalValue]
|
|
4503
4633
|
);
|
|
4504
|
-
const
|
|
4505
|
-
const
|
|
4506
|
-
|
|
4507
|
-
|
|
4634
|
+
const enabledFilteredOptions = useMemo12(() => filteredOptions.filter((option) => !option.disabled), [filteredOptions]);
|
|
4635
|
+
const isAllSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((option) => internalValue.includes(option.value));
|
|
4636
|
+
const isIndeterminate = !isAllSelected && enabledFilteredOptions.some((option) => internalValue.includes(option.value));
|
|
4637
|
+
return /* @__PURE__ */ React30.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ React30.createElement(
|
|
4638
|
+
Input_default,
|
|
4508
4639
|
{
|
|
4640
|
+
label,
|
|
4641
|
+
helperText,
|
|
4642
|
+
required,
|
|
4509
4643
|
variant: "outlined",
|
|
4510
4644
|
color: "neutral",
|
|
4511
4645
|
placeholder,
|
|
4512
4646
|
value: searchTerm,
|
|
4513
4647
|
onChange: handleSearchChange,
|
|
4514
4648
|
size,
|
|
4649
|
+
disabled,
|
|
4515
4650
|
endDecorator: /* @__PURE__ */ React30.createElement(SearchIcon, null)
|
|
4516
4651
|
}
|
|
4517
|
-
),
|
|
4518
|
-
|
|
4652
|
+
), filteredOptions.length === 0 ? /* @__PURE__ */ React30.createElement(
|
|
4653
|
+
Stack_default,
|
|
4519
4654
|
{
|
|
4520
|
-
sx: {
|
|
4655
|
+
sx: (theme) => ({
|
|
4521
4656
|
padding: "20px 12px",
|
|
4522
4657
|
justifyContent: "center",
|
|
4523
4658
|
alignItems: "center",
|
|
4524
4659
|
fontSize: noOptionsFontSize,
|
|
4525
|
-
color:
|
|
4526
|
-
}
|
|
4660
|
+
color: theme.palette.neutral.softDisabledColor
|
|
4661
|
+
})
|
|
4527
4662
|
},
|
|
4528
4663
|
"No options found."
|
|
4529
4664
|
) : /* @__PURE__ */ React30.createElement(
|
|
@@ -4545,6 +4680,7 @@ function FilterableCheckboxGroup(props) {
|
|
|
4545
4680
|
indeterminate: isIndeterminate,
|
|
4546
4681
|
onChange: handleSelectAll,
|
|
4547
4682
|
size,
|
|
4683
|
+
disabled,
|
|
4548
4684
|
slotProps: {
|
|
4549
4685
|
action: {
|
|
4550
4686
|
sx: { top: 0, left: 0, bottom: 0, right: 0 }
|
|
@@ -4554,7 +4690,7 @@ function FilterableCheckboxGroup(props) {
|
|
|
4554
4690
|
}
|
|
4555
4691
|
),
|
|
4556
4692
|
/* @__PURE__ */ React30.createElement(
|
|
4557
|
-
|
|
4693
|
+
Stack_default,
|
|
4558
4694
|
{
|
|
4559
4695
|
sx: {
|
|
4560
4696
|
height: `${virtualizer.getTotalSize()}px`,
|
|
@@ -4567,13 +4703,15 @@ function FilterableCheckboxGroup(props) {
|
|
|
4567
4703
|
Checkbox_default,
|
|
4568
4704
|
{
|
|
4569
4705
|
key: virtualRow.key,
|
|
4570
|
-
label: option.label,
|
|
4706
|
+
label: /* @__PURE__ */ React30.createElement(LabelWithTooltip, { label: option.label, size }),
|
|
4571
4707
|
checked: internalValue.includes(option.value),
|
|
4572
4708
|
onChange: handleCheckboxChange(option.value),
|
|
4573
4709
|
size,
|
|
4710
|
+
disabled: disabled || option.disabled,
|
|
4574
4711
|
slotProps: {
|
|
4575
4712
|
action: {
|
|
4576
4713
|
sx: { top: 0, left: 0, bottom: 0, right: 0 }
|
|
4714
|
+
// NOTE: 불필요한 좌우 스크롤 방지
|
|
4577
4715
|
}
|
|
4578
4716
|
},
|
|
4579
4717
|
sx: {
|
|
@@ -4593,12 +4731,12 @@ function FilterableCheckboxGroup(props) {
|
|
|
4593
4731
|
FilterableCheckboxGroup.displayName = "FilterableCheckboxGroup";
|
|
4594
4732
|
|
|
4595
4733
|
// src/components/FilterMenu/FilterMenu.tsx
|
|
4596
|
-
import
|
|
4734
|
+
import React41, { useCallback as useCallback23 } from "react";
|
|
4597
4735
|
import { Button as Button2, Stack as Stack11 } from "@mui/joy";
|
|
4598
4736
|
|
|
4599
4737
|
// src/components/FilterMenu/components/CheckboxGroup.tsx
|
|
4600
4738
|
import React31, { useCallback as useCallback14 } from "react";
|
|
4601
|
-
import { Stack as
|
|
4739
|
+
import { Stack as Stack2 } from "@mui/joy";
|
|
4602
4740
|
function CheckboxGroup(props) {
|
|
4603
4741
|
const { id, label, options, value, onChange, hidden } = props;
|
|
4604
4742
|
const [internalValue, setInternalValue] = useControlledState(value, [], onChange);
|
|
@@ -4618,7 +4756,7 @@ function CheckboxGroup(props) {
|
|
|
4618
4756
|
if (hidden) {
|
|
4619
4757
|
return null;
|
|
4620
4758
|
}
|
|
4621
|
-
return /* @__PURE__ */ React31.createElement(
|
|
4759
|
+
return /* @__PURE__ */ React31.createElement(Stack2, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React31.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), options.map((option) => /* @__PURE__ */ React31.createElement(
|
|
4622
4760
|
Checkbox_default,
|
|
4623
4761
|
{
|
|
4624
4762
|
key: `${id}-${option.value}`,
|
|
@@ -4630,8 +4768,37 @@ function CheckboxGroup(props) {
|
|
|
4630
4768
|
}
|
|
4631
4769
|
CheckboxGroup.displayName = "CheckboxGroup";
|
|
4632
4770
|
|
|
4633
|
-
// src/components/FilterMenu/components/
|
|
4771
|
+
// src/components/FilterMenu/components/FilterableCheckboxGroup.tsx
|
|
4634
4772
|
import React32, { useCallback as useCallback15 } from "react";
|
|
4773
|
+
import { Stack as Stack3 } from "@mui/joy";
|
|
4774
|
+
function FilterableCheckboxGroup2(props) {
|
|
4775
|
+
const { id, label, options, value, onChange, hidden, placeholder, maxHeight } = props;
|
|
4776
|
+
const [internalValue, setInternalValue] = useControlledState(value, [], onChange);
|
|
4777
|
+
const handleChange = useCallback15(
|
|
4778
|
+
(newValue) => {
|
|
4779
|
+
setInternalValue(newValue);
|
|
4780
|
+
},
|
|
4781
|
+
[setInternalValue]
|
|
4782
|
+
);
|
|
4783
|
+
if (hidden) {
|
|
4784
|
+
return null;
|
|
4785
|
+
}
|
|
4786
|
+
return /* @__PURE__ */ React32.createElement(Stack3, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React32.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React32.createElement(
|
|
4787
|
+
FilterableCheckboxGroup,
|
|
4788
|
+
{
|
|
4789
|
+
value: internalValue ?? [],
|
|
4790
|
+
onChange: handleChange,
|
|
4791
|
+
options,
|
|
4792
|
+
placeholder,
|
|
4793
|
+
maxHeight,
|
|
4794
|
+
size: "sm"
|
|
4795
|
+
}
|
|
4796
|
+
));
|
|
4797
|
+
}
|
|
4798
|
+
FilterableCheckboxGroup2.displayName = "FilterableCheckboxGroup";
|
|
4799
|
+
|
|
4800
|
+
// src/components/FilterMenu/components/RadioGroup.tsx
|
|
4801
|
+
import React33, { useCallback as useCallback16 } from "react";
|
|
4635
4802
|
|
|
4636
4803
|
// src/components/Radio/Radio.tsx
|
|
4637
4804
|
import { Radio as JoyRadio, RadioGroup as JoyRadioGroup } from "@mui/joy";
|
|
@@ -4648,7 +4815,7 @@ import { Stack as Stack4 } from "@mui/joy";
|
|
|
4648
4815
|
function RadioGroup2(props) {
|
|
4649
4816
|
const { id, label, options, value, onChange, hidden } = props;
|
|
4650
4817
|
const [internalValue, setInternalValue] = useControlledState(value, value ?? "", onChange);
|
|
4651
|
-
const handleRadioChange =
|
|
4818
|
+
const handleRadioChange = useCallback16(
|
|
4652
4819
|
(event) => {
|
|
4653
4820
|
const newValue = event.target.value;
|
|
4654
4821
|
const option = options.find((opt) => opt.value.toString() === newValue);
|
|
@@ -4660,12 +4827,12 @@ function RadioGroup2(props) {
|
|
|
4660
4827
|
if (hidden) {
|
|
4661
4828
|
return null;
|
|
4662
4829
|
}
|
|
4663
|
-
return /* @__PURE__ */
|
|
4830
|
+
return /* @__PURE__ */ React33.createElement(Stack4, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React33.createElement(Stack4, { spacing: 1 }, /* @__PURE__ */ React33.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label)), /* @__PURE__ */ React33.createElement(RadioGroup, { name: id, value: internalValue?.toString(), onChange: handleRadioChange }, options.map((option) => /* @__PURE__ */ React33.createElement(Radio, { key: `${id}-${option.value}`, value: option.value.toString(), label: option.label }))));
|
|
4664
4831
|
}
|
|
4665
4832
|
RadioGroup2.displayName = "RadioGroup";
|
|
4666
4833
|
|
|
4667
4834
|
// src/components/FilterMenu/components/DateRange.tsx
|
|
4668
|
-
import
|
|
4835
|
+
import React34, { useCallback as useCallback17, useMemo as useMemo13, useState as useState11, useEffect as useEffect9 } from "react";
|
|
4669
4836
|
import { Stack as Stack5 } from "@mui/joy";
|
|
4670
4837
|
function DateRange(props) {
|
|
4671
4838
|
const {
|
|
@@ -4678,7 +4845,6 @@ function DateRange(props) {
|
|
|
4678
4845
|
maxDate,
|
|
4679
4846
|
disableFuture,
|
|
4680
4847
|
disablePast,
|
|
4681
|
-
format = "YYYY/MM/DD",
|
|
4682
4848
|
displayFormat,
|
|
4683
4849
|
inputReadOnly,
|
|
4684
4850
|
hideClearButton
|
|
@@ -4695,7 +4861,7 @@ function DateRange(props) {
|
|
|
4695
4861
|
],
|
|
4696
4862
|
[]
|
|
4697
4863
|
);
|
|
4698
|
-
const getDateRangeForOption =
|
|
4864
|
+
const getDateRangeForOption = useCallback17(
|
|
4699
4865
|
(option) => {
|
|
4700
4866
|
const now = /* @__PURE__ */ new Date();
|
|
4701
4867
|
const currentYear = now.getFullYear();
|
|
@@ -4734,7 +4900,7 @@ function DateRange(props) {
|
|
|
4734
4900
|
},
|
|
4735
4901
|
[internalValue]
|
|
4736
4902
|
);
|
|
4737
|
-
const determineOptionFromValue =
|
|
4903
|
+
const determineOptionFromValue = useCallback17(
|
|
4738
4904
|
(value2) => {
|
|
4739
4905
|
if (!value2) {
|
|
4740
4906
|
return "all-time";
|
|
@@ -4760,7 +4926,7 @@ function DateRange(props) {
|
|
|
4760
4926
|
const newOption = determineOptionFromValue(internalValue);
|
|
4761
4927
|
setSelectedOption(newOption);
|
|
4762
4928
|
}, [internalValue, determineOptionFromValue]);
|
|
4763
|
-
const handleOptionChange =
|
|
4929
|
+
const handleOptionChange = useCallback17(
|
|
4764
4930
|
(event) => {
|
|
4765
4931
|
const newOption = event.target.value;
|
|
4766
4932
|
setSelectedOption(newOption);
|
|
@@ -4769,25 +4935,28 @@ function DateRange(props) {
|
|
|
4769
4935
|
},
|
|
4770
4936
|
[getDateRangeForOption, setInternalValue]
|
|
4771
4937
|
);
|
|
4772
|
-
const handleCustomDateChange =
|
|
4938
|
+
const handleCustomDateChange = useCallback17(
|
|
4773
4939
|
(event) => {
|
|
4774
4940
|
const dateRangeString = event.target.value;
|
|
4775
4941
|
if (dateRangeString && dateRangeString.includes(" - ")) {
|
|
4776
4942
|
const [startDate, endDate] = dateRangeString.split(" - ");
|
|
4777
4943
|
if (startDate && endDate) {
|
|
4778
4944
|
const newValue = [startDate, endDate];
|
|
4779
|
-
|
|
4945
|
+
const hasChanged = !internalValue || internalValue[0] !== startDate || internalValue[1] !== endDate;
|
|
4946
|
+
if (hasChanged) {
|
|
4947
|
+
setInternalValue(newValue);
|
|
4948
|
+
}
|
|
4780
4949
|
}
|
|
4781
4950
|
} else if (!dateRangeString) {
|
|
4782
4951
|
setInternalValue(null);
|
|
4783
4952
|
}
|
|
4784
4953
|
},
|
|
4785
|
-
[setInternalValue]
|
|
4954
|
+
[setInternalValue, internalValue]
|
|
4786
4955
|
);
|
|
4787
4956
|
if (hidden) {
|
|
4788
4957
|
return null;
|
|
4789
4958
|
}
|
|
4790
|
-
return /* @__PURE__ */
|
|
4959
|
+
return /* @__PURE__ */ React34.createElement(Stack5, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React34.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React34.createElement(RadioGroup, { name: `${id}-options`, value: selectedOption, onChange: handleOptionChange }, dateRangeOptions.map((option) => /* @__PURE__ */ React34.createElement(Radio, { key: `${id}-${option.value}`, value: option.value, label: option.label }))), selectedOption === "custom" && /* @__PURE__ */ React34.createElement(
|
|
4791
4960
|
DateRangePicker,
|
|
4792
4961
|
{
|
|
4793
4962
|
value: customDateRangeValue,
|
|
@@ -4796,7 +4965,7 @@ function DateRange(props) {
|
|
|
4796
4965
|
maxDate,
|
|
4797
4966
|
disableFuture,
|
|
4798
4967
|
disablePast,
|
|
4799
|
-
format,
|
|
4968
|
+
format: "YYYY-MM-DD",
|
|
4800
4969
|
displayFormat,
|
|
4801
4970
|
inputReadOnly,
|
|
4802
4971
|
hideClearButton
|
|
@@ -4806,12 +4975,12 @@ function DateRange(props) {
|
|
|
4806
4975
|
DateRange.displayName = "DateRange";
|
|
4807
4976
|
|
|
4808
4977
|
// src/components/FilterMenu/components/CurrencyInput.tsx
|
|
4809
|
-
import
|
|
4978
|
+
import React35, { useCallback as useCallback18 } from "react";
|
|
4810
4979
|
import { Stack as Stack6 } from "@mui/joy";
|
|
4811
4980
|
function CurrencyInput3(props) {
|
|
4812
4981
|
const { id, label, value, onChange, hidden, max, placeholder, useMinorUnit, currency = "USD" } = props;
|
|
4813
4982
|
const [internalValue, setInternalValue] = useControlledState(value, value, onChange);
|
|
4814
|
-
const handleCurrencyChange =
|
|
4983
|
+
const handleCurrencyChange = useCallback18(
|
|
4815
4984
|
(event) => {
|
|
4816
4985
|
const newValue = event.target.value;
|
|
4817
4986
|
setInternalValue(newValue);
|
|
@@ -4821,7 +4990,7 @@ function CurrencyInput3(props) {
|
|
|
4821
4990
|
if (hidden) {
|
|
4822
4991
|
return null;
|
|
4823
4992
|
}
|
|
4824
|
-
return /* @__PURE__ */
|
|
4993
|
+
return /* @__PURE__ */ React35.createElement(Stack6, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React35.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React35.createElement(
|
|
4825
4994
|
CurrencyInput,
|
|
4826
4995
|
{
|
|
4827
4996
|
value: internalValue,
|
|
@@ -4837,14 +5006,14 @@ function CurrencyInput3(props) {
|
|
|
4837
5006
|
CurrencyInput3.displayName = "CurrencyInput";
|
|
4838
5007
|
|
|
4839
5008
|
// src/components/FilterMenu/components/CurrencyRange.tsx
|
|
4840
|
-
import
|
|
5009
|
+
import React36, { useCallback as useCallback19 } from "react";
|
|
4841
5010
|
import { Stack as Stack7 } from "@mui/joy";
|
|
4842
5011
|
function CurrencyRange(props) {
|
|
4843
5012
|
const { id, label, value, onChange, hidden, max, placeholder, useMinorUnit, currency = "USD" } = props;
|
|
4844
5013
|
const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
|
|
4845
5014
|
const minValue = internalValue?.[0];
|
|
4846
5015
|
const maxValue = internalValue?.[1];
|
|
4847
|
-
const handleMinChange =
|
|
5016
|
+
const handleMinChange = useCallback19(
|
|
4848
5017
|
(event) => {
|
|
4849
5018
|
const newMinValue = event.target.value;
|
|
4850
5019
|
const currentMaxValue = maxValue;
|
|
@@ -4858,7 +5027,7 @@ function CurrencyRange(props) {
|
|
|
4858
5027
|
},
|
|
4859
5028
|
[maxValue, setInternalValue]
|
|
4860
5029
|
);
|
|
4861
|
-
const handleMaxChange =
|
|
5030
|
+
const handleMaxChange = useCallback19(
|
|
4862
5031
|
(event) => {
|
|
4863
5032
|
const newMaxValue = event.target.value;
|
|
4864
5033
|
const currentMinValue = minValue;
|
|
@@ -4875,7 +5044,7 @@ function CurrencyRange(props) {
|
|
|
4875
5044
|
if (hidden) {
|
|
4876
5045
|
return null;
|
|
4877
5046
|
}
|
|
4878
|
-
return /* @__PURE__ */
|
|
5047
|
+
return /* @__PURE__ */ React36.createElement(Stack7, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React36.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React36.createElement(Stack7, { direction: "row", spacing: 2, alignItems: "flex-end" }, /* @__PURE__ */ React36.createElement(
|
|
4879
5048
|
CurrencyInput,
|
|
4880
5049
|
{
|
|
4881
5050
|
label: "Minimum",
|
|
@@ -4888,7 +5057,7 @@ function CurrencyRange(props) {
|
|
|
4888
5057
|
"aria-labelledby": label ? id : void 0,
|
|
4889
5058
|
"aria-label": "Minimum amount"
|
|
4890
5059
|
}
|
|
4891
|
-
), /* @__PURE__ */
|
|
5060
|
+
), /* @__PURE__ */ React36.createElement(
|
|
4892
5061
|
CurrencyInput,
|
|
4893
5062
|
{
|
|
4894
5063
|
label: "Maximum",
|
|
@@ -4906,20 +5075,20 @@ function CurrencyRange(props) {
|
|
|
4906
5075
|
CurrencyRange.displayName = "CurrencyRange";
|
|
4907
5076
|
|
|
4908
5077
|
// src/components/FilterMenu/components/PercentageInput.tsx
|
|
4909
|
-
import
|
|
5078
|
+
import React38 from "react";
|
|
4910
5079
|
import { Stack as Stack8, Typography as Typography2 } from "@mui/joy";
|
|
4911
5080
|
|
|
4912
5081
|
// src/components/PercentageInput/PercentageInput.tsx
|
|
4913
|
-
import
|
|
5082
|
+
import React37, { useCallback as useCallback20, useMemo as useMemo14, useState as useState12 } from "react";
|
|
4914
5083
|
import { NumericFormat as NumericFormat2 } from "react-number-format";
|
|
4915
5084
|
import { styled as styled20, useThemeProps as useThemeProps6 } from "@mui/joy";
|
|
4916
5085
|
var padDecimal = (value, decimalScale) => {
|
|
4917
5086
|
const [integer, decimal = ""] = `${value}`.split(".");
|
|
4918
5087
|
return Number(`${integer}${decimal.padEnd(decimalScale, "0")}`);
|
|
4919
5088
|
};
|
|
4920
|
-
var TextMaskAdapter7 =
|
|
5089
|
+
var TextMaskAdapter7 = React37.forwardRef(function TextMaskAdapter8(props, ref) {
|
|
4921
5090
|
const { onChange, min, max, ...innerProps } = props;
|
|
4922
|
-
return /* @__PURE__ */
|
|
5091
|
+
return /* @__PURE__ */ React37.createElement(
|
|
4923
5092
|
NumericFormat2,
|
|
4924
5093
|
{
|
|
4925
5094
|
...innerProps,
|
|
@@ -4944,7 +5113,7 @@ var PercentageInputRoot = styled20(Input_default, {
|
|
|
4944
5113
|
slot: "Root",
|
|
4945
5114
|
overridesResolver: (props, styles) => styles.root
|
|
4946
5115
|
})({});
|
|
4947
|
-
var PercentageInput =
|
|
5116
|
+
var PercentageInput = React37.forwardRef(
|
|
4948
5117
|
function PercentageInput2(inProps, ref) {
|
|
4949
5118
|
const props = useThemeProps6({ props: inProps, name: "PercentageInput" });
|
|
4950
5119
|
const {
|
|
@@ -4967,7 +5136,7 @@ var PercentageInput = React36.forwardRef(
|
|
|
4967
5136
|
const [_value, setValue] = useControlledState(
|
|
4968
5137
|
props.value,
|
|
4969
5138
|
props.defaultValue,
|
|
4970
|
-
|
|
5139
|
+
useCallback20((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
|
|
4971
5140
|
);
|
|
4972
5141
|
const [internalError, setInternalError] = useState12(
|
|
4973
5142
|
max && _value && _value > max || min && _value && _value < min
|
|
@@ -4978,7 +5147,7 @@ var PercentageInput = React36.forwardRef(
|
|
|
4978
5147
|
}
|
|
4979
5148
|
return _value;
|
|
4980
5149
|
}, [_value, useMinorUnit, maxDecimalScale]);
|
|
4981
|
-
const handleChange =
|
|
5150
|
+
const handleChange = useCallback20(
|
|
4982
5151
|
(event) => {
|
|
4983
5152
|
if (event.target.value === "") {
|
|
4984
5153
|
setValue(void 0);
|
|
@@ -4995,7 +5164,7 @@ var PercentageInput = React36.forwardRef(
|
|
|
4995
5164
|
},
|
|
4996
5165
|
[setValue, useMinorUnit, maxDecimalScale, min, max]
|
|
4997
5166
|
);
|
|
4998
|
-
return /* @__PURE__ */
|
|
5167
|
+
return /* @__PURE__ */ React37.createElement(
|
|
4999
5168
|
PercentageInputRoot,
|
|
5000
5169
|
{
|
|
5001
5170
|
...innerProps,
|
|
@@ -5042,7 +5211,7 @@ var PercentageInput3 = ({
|
|
|
5042
5211
|
if (hidden) {
|
|
5043
5212
|
return null;
|
|
5044
5213
|
}
|
|
5045
|
-
return /* @__PURE__ */
|
|
5214
|
+
return /* @__PURE__ */ React38.createElement(Stack8, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React38.createElement(Typography2, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React38.createElement(
|
|
5046
5215
|
PercentageInput,
|
|
5047
5216
|
{
|
|
5048
5217
|
value: _value,
|
|
@@ -5057,7 +5226,7 @@ var PercentageInput3 = ({
|
|
|
5057
5226
|
};
|
|
5058
5227
|
|
|
5059
5228
|
// src/components/FilterMenu/components/PercentageRange.tsx
|
|
5060
|
-
import
|
|
5229
|
+
import React39, { useCallback as useCallback21 } from "react";
|
|
5061
5230
|
import { Stack as Stack9 } from "@mui/joy";
|
|
5062
5231
|
function PercentageRange(props) {
|
|
5063
5232
|
const { id, label, value, onChange, hidden, useMinorUnit, maxDecimalScale, min, max } = props;
|
|
@@ -5068,7 +5237,7 @@ function PercentageRange(props) {
|
|
|
5068
5237
|
);
|
|
5069
5238
|
const minValue = internalValue?.[0];
|
|
5070
5239
|
const maxValue = internalValue?.[1];
|
|
5071
|
-
const handleMinChange =
|
|
5240
|
+
const handleMinChange = useCallback21(
|
|
5072
5241
|
(event) => {
|
|
5073
5242
|
const newMinValue = event.target.value;
|
|
5074
5243
|
const currentMaxValue = maxValue;
|
|
@@ -5080,7 +5249,7 @@ function PercentageRange(props) {
|
|
|
5080
5249
|
},
|
|
5081
5250
|
[maxValue, setInternalValue]
|
|
5082
5251
|
);
|
|
5083
|
-
const handleMaxChange =
|
|
5252
|
+
const handleMaxChange = useCallback21(
|
|
5084
5253
|
(event) => {
|
|
5085
5254
|
const newMaxValue = event.target.value;
|
|
5086
5255
|
const currentMinValue = minValue;
|
|
@@ -5095,7 +5264,7 @@ function PercentageRange(props) {
|
|
|
5095
5264
|
if (hidden) {
|
|
5096
5265
|
return null;
|
|
5097
5266
|
}
|
|
5098
|
-
return /* @__PURE__ */
|
|
5267
|
+
return /* @__PURE__ */ React39.createElement(Stack9, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React39.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React39.createElement(Stack9, { direction: "row", spacing: 2, alignItems: "flex-end" }, /* @__PURE__ */ React39.createElement(
|
|
5099
5268
|
PercentageInput,
|
|
5100
5269
|
{
|
|
5101
5270
|
label: "Minimum",
|
|
@@ -5109,7 +5278,7 @@ function PercentageRange(props) {
|
|
|
5109
5278
|
"aria-label": "Minimum percentage",
|
|
5110
5279
|
placeholder: "0%"
|
|
5111
5280
|
}
|
|
5112
|
-
), /* @__PURE__ */
|
|
5281
|
+
), /* @__PURE__ */ React39.createElement(
|
|
5113
5282
|
PercentageInput,
|
|
5114
5283
|
{
|
|
5115
5284
|
label: "Maximum",
|
|
@@ -5128,13 +5297,13 @@ function PercentageRange(props) {
|
|
|
5128
5297
|
PercentageRange.displayName = "PercentageRange";
|
|
5129
5298
|
|
|
5130
5299
|
// src/components/FilterMenu/components/Autocomplete.tsx
|
|
5131
|
-
import
|
|
5300
|
+
import React40, { useCallback as useCallback22 } from "react";
|
|
5132
5301
|
import { Stack as Stack10 } from "@mui/joy";
|
|
5133
5302
|
function Autocomplete2(props) {
|
|
5134
5303
|
const { id, label, value, onChange, options, multiple, hidden, placeholder } = props;
|
|
5135
5304
|
const [internalValue, setInternalValue] = useControlledState(value, void 0, onChange);
|
|
5136
5305
|
const autocompleteValue = typeof internalValue === "string" || typeof internalValue === "number" ? String(internalValue) : void 0;
|
|
5137
|
-
const handleChange =
|
|
5306
|
+
const handleChange = useCallback22(
|
|
5138
5307
|
(event) => {
|
|
5139
5308
|
const val = event.target.value;
|
|
5140
5309
|
if (val) {
|
|
@@ -5149,7 +5318,7 @@ function Autocomplete2(props) {
|
|
|
5149
5318
|
if (hidden) {
|
|
5150
5319
|
return null;
|
|
5151
5320
|
}
|
|
5152
|
-
return /* @__PURE__ */
|
|
5321
|
+
return /* @__PURE__ */ React40.createElement(Stack10, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React40.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React40.createElement(
|
|
5153
5322
|
Autocomplete,
|
|
5154
5323
|
{
|
|
5155
5324
|
value: autocompleteValue,
|
|
@@ -5166,6 +5335,7 @@ Autocomplete2.displayName = "Autocomplete";
|
|
|
5166
5335
|
// src/components/FilterMenu/FilterMenu.tsx
|
|
5167
5336
|
var componentMap = {
|
|
5168
5337
|
"checkbox-group": CheckboxGroup,
|
|
5338
|
+
"filterable-checkbox-group": FilterableCheckboxGroup2,
|
|
5169
5339
|
"radio-group": RadioGroup2,
|
|
5170
5340
|
"date-range": DateRange,
|
|
5171
5341
|
"currency-input": CurrencyInput3,
|
|
@@ -5182,7 +5352,7 @@ function FilterMenu(props) {
|
|
|
5182
5352
|
void 0
|
|
5183
5353
|
// onChange는 Apply 버튼에서만 호출
|
|
5184
5354
|
);
|
|
5185
|
-
const handleFilterChange =
|
|
5355
|
+
const handleFilterChange = useCallback23(
|
|
5186
5356
|
(filterId, value) => {
|
|
5187
5357
|
setInternalValues((prev) => ({
|
|
5188
5358
|
...prev,
|
|
@@ -5191,17 +5361,17 @@ function FilterMenu(props) {
|
|
|
5191
5361
|
},
|
|
5192
5362
|
[setInternalValues]
|
|
5193
5363
|
);
|
|
5194
|
-
const handleApply =
|
|
5364
|
+
const handleApply = useCallback23(() => {
|
|
5195
5365
|
onChange?.(internalValues);
|
|
5196
5366
|
onClose?.();
|
|
5197
5367
|
}, [onChange, onClose, internalValues]);
|
|
5198
|
-
const handleClear =
|
|
5368
|
+
const handleClear = useCallback23(() => {
|
|
5199
5369
|
const clearedValues = resetValues || {};
|
|
5200
5370
|
setInternalValues(clearedValues);
|
|
5201
5371
|
onChange?.(clearedValues);
|
|
5202
5372
|
onClose?.();
|
|
5203
5373
|
}, [resetValues, setInternalValues, onChange, onClose]);
|
|
5204
|
-
return /* @__PURE__ */
|
|
5374
|
+
return /* @__PURE__ */ React41.createElement(
|
|
5205
5375
|
ModalDialog,
|
|
5206
5376
|
{
|
|
5207
5377
|
sx: {
|
|
@@ -5211,9 +5381,9 @@ function FilterMenu(props) {
|
|
|
5211
5381
|
top: "initial"
|
|
5212
5382
|
}
|
|
5213
5383
|
},
|
|
5214
|
-
/* @__PURE__ */
|
|
5384
|
+
/* @__PURE__ */ React41.createElement(DialogContent, { sx: { paddingTop: 5 } }, /* @__PURE__ */ React41.createElement(Stack11, { spacing: 6 }, filters?.map((filter) => {
|
|
5215
5385
|
const FilterComponent = componentMap[filter.type];
|
|
5216
|
-
return FilterComponent ? /* @__PURE__ */
|
|
5386
|
+
return FilterComponent ? /* @__PURE__ */ React41.createElement(
|
|
5217
5387
|
FilterComponent,
|
|
5218
5388
|
{
|
|
5219
5389
|
key: filter.id,
|
|
@@ -5225,14 +5395,14 @@ function FilterMenu(props) {
|
|
|
5225
5395
|
}
|
|
5226
5396
|
) : null;
|
|
5227
5397
|
}))),
|
|
5228
|
-
/* @__PURE__ */
|
|
5398
|
+
/* @__PURE__ */ React41.createElement(DialogActions, { sx: { justifyContent: "space-between" } }, useClear && filters?.length === 1 && /* @__PURE__ */ React41.createElement(Button2, { variant: "plain", color: "neutral", size: "md", onClick: handleClear }, "Clear"), useReset && !useClear && /* @__PURE__ */ React41.createElement(Button2, { variant: "plain", color: "neutral", size: "md", onClick: handleClear }, "Reset"), /* @__PURE__ */ React41.createElement(Button2, { variant: "solid", color: "primary", size: "md", onClick: handleApply }, "Apply"))
|
|
5229
5399
|
);
|
|
5230
5400
|
}
|
|
5231
5401
|
FilterMenu.displayName = "FilterMenu";
|
|
5232
5402
|
|
|
5233
5403
|
// src/components/Uploader/Uploader.tsx
|
|
5234
|
-
import
|
|
5235
|
-
import { styled as styled21, Input as
|
|
5404
|
+
import React42, { useCallback as useCallback24, useEffect as useEffect10, useMemo as useMemo15, useRef as useRef9, useState as useState13 } from "react";
|
|
5405
|
+
import { styled as styled21, Input as Input2 } from "@mui/joy";
|
|
5236
5406
|
import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
|
|
5237
5407
|
import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
|
|
5238
5408
|
import MuiClearIcon from "@mui/icons-material/ClearRounded";
|
|
@@ -5254,7 +5424,7 @@ var esmFiles = {
|
|
|
5254
5424
|
"@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/prevent-unhandled.js"
|
|
5255
5425
|
)
|
|
5256
5426
|
};
|
|
5257
|
-
var VisuallyHiddenInput = styled21(
|
|
5427
|
+
var VisuallyHiddenInput = styled21(Input2)({
|
|
5258
5428
|
width: "1px",
|
|
5259
5429
|
height: "1px",
|
|
5260
5430
|
overflow: "hidden",
|
|
@@ -5308,7 +5478,7 @@ var getFileSize = (n) => {
|
|
|
5308
5478
|
};
|
|
5309
5479
|
var Preview = (props) => {
|
|
5310
5480
|
const { files, uploaded, onDelete } = props;
|
|
5311
|
-
return /* @__PURE__ */
|
|
5481
|
+
return /* @__PURE__ */ React42.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => /* @__PURE__ */ React42.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" }, /* @__PURE__ */ React42.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2 }, /* @__PURE__ */ React42.createElement(UploadFileIcon, null), /* @__PURE__ */ React42.createElement(Stack_default, { flex: "1", sx: { overflow: "hidden" } }, /* @__PURE__ */ React42.createElement(
|
|
5312
5482
|
Typography_default,
|
|
5313
5483
|
{
|
|
5314
5484
|
level: "body-sm",
|
|
@@ -5320,7 +5490,7 @@ var Preview = (props) => {
|
|
|
5320
5490
|
}
|
|
5321
5491
|
},
|
|
5322
5492
|
file.name
|
|
5323
|
-
), !!file.size && /* @__PURE__ */
|
|
5493
|
+
), !!file.size && /* @__PURE__ */ React42.createElement(Typography_default, { level: "body-xs", fontWeight: "300", lineHeight: "1.33", textColor: "text.tertiary" }, getFileSize(file.size))), /* @__PURE__ */ React42.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ React42.createElement(ClearIcon2, null))))));
|
|
5324
5494
|
};
|
|
5325
5495
|
var UploaderRoot = styled21(Stack_default, {
|
|
5326
5496
|
name: "Uploader",
|
|
@@ -5363,7 +5533,7 @@ var UploaderIcon = styled21(MuiFileUploadIcon, {
|
|
|
5363
5533
|
}
|
|
5364
5534
|
})
|
|
5365
5535
|
);
|
|
5366
|
-
var Uploader =
|
|
5536
|
+
var Uploader = React42.memo(
|
|
5367
5537
|
(props) => {
|
|
5368
5538
|
const {
|
|
5369
5539
|
accept,
|
|
@@ -5431,7 +5601,7 @@ var Uploader = React41.memo(
|
|
|
5431
5601
|
() => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
|
|
5432
5602
|
[files, maxCount, uploaded]
|
|
5433
5603
|
);
|
|
5434
|
-
const addFiles =
|
|
5604
|
+
const addFiles = useCallback24(
|
|
5435
5605
|
(uploads) => {
|
|
5436
5606
|
try {
|
|
5437
5607
|
const types = parsedAccepts.map((type) => type.replace(".", "")) || [];
|
|
@@ -5523,14 +5693,14 @@ var Uploader = React41.memo(
|
|
|
5523
5693
|
}
|
|
5524
5694
|
}
|
|
5525
5695
|
}, [inputRef, files, minCount]);
|
|
5526
|
-
const handleFileChanged =
|
|
5696
|
+
const handleFileChanged = useCallback24(
|
|
5527
5697
|
(event) => {
|
|
5528
5698
|
const files2 = Array.from(event.target.files || []);
|
|
5529
5699
|
addFiles(files2);
|
|
5530
5700
|
},
|
|
5531
5701
|
[addFiles]
|
|
5532
5702
|
);
|
|
5533
|
-
const handleDeleteFile =
|
|
5703
|
+
const handleDeleteFile = useCallback24(
|
|
5534
5704
|
(deletedFile) => {
|
|
5535
5705
|
if (deletedFile instanceof File) {
|
|
5536
5706
|
setFiles((current) => {
|
|
@@ -5550,10 +5720,10 @@ var Uploader = React41.memo(
|
|
|
5550
5720
|
},
|
|
5551
5721
|
[name, onChange, onDelete]
|
|
5552
5722
|
);
|
|
5553
|
-
const handleUploaderButtonClick =
|
|
5723
|
+
const handleUploaderButtonClick = useCallback24(() => {
|
|
5554
5724
|
inputRef.current?.click();
|
|
5555
5725
|
}, []);
|
|
5556
|
-
const uploader = /* @__PURE__ */
|
|
5726
|
+
const uploader = /* @__PURE__ */ React42.createElement(
|
|
5557
5727
|
FileDropZone,
|
|
5558
5728
|
{
|
|
5559
5729
|
state: previewState,
|
|
@@ -5562,8 +5732,8 @@ var Uploader = React41.memo(
|
|
|
5562
5732
|
ref: dropZoneRef,
|
|
5563
5733
|
onClick: handleUploaderButtonClick
|
|
5564
5734
|
},
|
|
5565
|
-
/* @__PURE__ */
|
|
5566
|
-
/* @__PURE__ */
|
|
5735
|
+
/* @__PURE__ */ React42.createElement(Stack_default, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React42.createElement(UploaderIcon, { state: previewState, error: !!(error || errorText), disabled })),
|
|
5736
|
+
/* @__PURE__ */ React42.createElement(
|
|
5567
5737
|
VisuallyHiddenInput,
|
|
5568
5738
|
{
|
|
5569
5739
|
disabled,
|
|
@@ -5586,7 +5756,7 @@ var Uploader = React41.memo(
|
|
|
5586
5756
|
}
|
|
5587
5757
|
)
|
|
5588
5758
|
);
|
|
5589
|
-
return /* @__PURE__ */
|
|
5759
|
+
return /* @__PURE__ */ React42.createElement(UploaderRoot, null, showDropZone && /* @__PURE__ */ React42.createElement(FormControl_default, { size, error: !!(error || errorText), disabled, required: !!minCount }, label && /* @__PURE__ */ React42.createElement(FormLabel_default, null, label), uploader, /* @__PURE__ */ React42.createElement(FormHelperText_default, null, /* @__PURE__ */ React42.createElement(Stack_default, null, errorText && /* @__PURE__ */ React42.createElement("div", null, errorText), /* @__PURE__ */ React42.createElement("div", null, helperText)))), [...uploaded, ...files].length > 0 && /* @__PURE__ */ React42.createElement(Preview, { files, uploaded, onDelete: handleDeleteFile }));
|
|
5590
5760
|
}
|
|
5591
5761
|
);
|
|
5592
5762
|
Uploader.displayName = "Uploader";
|
|
@@ -5595,7 +5765,7 @@ Uploader.displayName = "Uploader";
|
|
|
5595
5765
|
import { Grid } from "@mui/joy";
|
|
5596
5766
|
|
|
5597
5767
|
// src/components/IconMenuButton/IconMenuButton.tsx
|
|
5598
|
-
import
|
|
5768
|
+
import React43 from "react";
|
|
5599
5769
|
import { MenuButton as JoyMenuButton2, IconButton as JoyIconButton2 } from "@mui/joy";
|
|
5600
5770
|
function IconMenuButton(props) {
|
|
5601
5771
|
const {
|
|
@@ -5609,7 +5779,7 @@ function IconMenuButton(props) {
|
|
|
5609
5779
|
placement = "bottom"
|
|
5610
5780
|
} = props;
|
|
5611
5781
|
if (!items.length) {
|
|
5612
|
-
return /* @__PURE__ */
|
|
5782
|
+
return /* @__PURE__ */ React43.createElement(
|
|
5613
5783
|
JoyIconButton2,
|
|
5614
5784
|
{
|
|
5615
5785
|
component: props.buttonComponent ?? "button",
|
|
@@ -5623,7 +5793,7 @@ function IconMenuButton(props) {
|
|
|
5623
5793
|
icon
|
|
5624
5794
|
);
|
|
5625
5795
|
}
|
|
5626
|
-
return /* @__PURE__ */
|
|
5796
|
+
return /* @__PURE__ */ React43.createElement(Dropdown_default, null, /* @__PURE__ */ React43.createElement(
|
|
5627
5797
|
JoyMenuButton2,
|
|
5628
5798
|
{
|
|
5629
5799
|
slots: { root: JoyIconButton2 },
|
|
@@ -5640,12 +5810,12 @@ function IconMenuButton(props) {
|
|
|
5640
5810
|
}
|
|
5641
5811
|
},
|
|
5642
5812
|
icon
|
|
5643
|
-
), /* @__PURE__ */
|
|
5813
|
+
), /* @__PURE__ */ React43.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ React43.createElement(MenuItem, { key: i.text, component: i.component, ...i.componentProps ?? {} }, i.text))));
|
|
5644
5814
|
}
|
|
5645
5815
|
IconMenuButton.displayName = "IconMenuButton";
|
|
5646
5816
|
|
|
5647
5817
|
// src/components/Markdown/Markdown.tsx
|
|
5648
|
-
import
|
|
5818
|
+
import React44, { lazy, Suspense, useEffect as useEffect11, useState as useState14 } from "react";
|
|
5649
5819
|
import { Skeleton } from "@mui/joy";
|
|
5650
5820
|
import { Link as Link2 } from "@mui/joy";
|
|
5651
5821
|
import remarkGfm from "remark-gfm";
|
|
@@ -5674,12 +5844,12 @@ var Markdown = (props) => {
|
|
|
5674
5844
|
if (!rehypeAccent2) {
|
|
5675
5845
|
return null;
|
|
5676
5846
|
}
|
|
5677
|
-
return /* @__PURE__ */
|
|
5847
|
+
return /* @__PURE__ */ React44.createElement(Typography, { component: "div", color, textColor, level: defaultLevel, ...innerProps }, /* @__PURE__ */ React44.createElement(
|
|
5678
5848
|
Suspense,
|
|
5679
5849
|
{
|
|
5680
|
-
fallback: fallback || /* @__PURE__ */
|
|
5850
|
+
fallback: fallback || /* @__PURE__ */ React44.createElement(Typography, null, /* @__PURE__ */ React44.createElement(Skeleton, null, content || ""))
|
|
5681
5851
|
},
|
|
5682
|
-
/* @__PURE__ */
|
|
5852
|
+
/* @__PURE__ */ React44.createElement(
|
|
5683
5853
|
LazyReactMarkdown,
|
|
5684
5854
|
{
|
|
5685
5855
|
...markdownOptions,
|
|
@@ -5687,15 +5857,15 @@ var Markdown = (props) => {
|
|
|
5687
5857
|
rehypePlugins: [[rehypeAccent2, { accentColor }]],
|
|
5688
5858
|
remarkPlugins: [remarkGfm],
|
|
5689
5859
|
components: {
|
|
5690
|
-
h1: ({ children }) => /* @__PURE__ */
|
|
5691
|
-
h2: ({ children }) => /* @__PURE__ */
|
|
5692
|
-
h3: ({ children }) => /* @__PURE__ */
|
|
5693
|
-
h4: ({ children }) => /* @__PURE__ */
|
|
5694
|
-
p: ({ children, node }) => /* @__PURE__ */
|
|
5695
|
-
a: ({ children, href }) => /* @__PURE__ */
|
|
5696
|
-
hr: () => /* @__PURE__ */
|
|
5697
|
-
b: ({ children }) => /* @__PURE__ */
|
|
5698
|
-
strong: ({ children }) => /* @__PURE__ */
|
|
5860
|
+
h1: ({ children }) => /* @__PURE__ */ React44.createElement(Typography, { color, textColor, level: "h1" }, children),
|
|
5861
|
+
h2: ({ children }) => /* @__PURE__ */ React44.createElement(Typography, { color, textColor, level: "h2" }, children),
|
|
5862
|
+
h3: ({ children }) => /* @__PURE__ */ React44.createElement(Typography, { color, textColor, level: "h3" }, children),
|
|
5863
|
+
h4: ({ children }) => /* @__PURE__ */ React44.createElement(Typography, { color, textColor, level: "h4" }, children),
|
|
5864
|
+
p: ({ children, node }) => /* @__PURE__ */ React44.createElement(Typography, { color, textColor, level: defaultLevel, ...node?.properties }, children),
|
|
5865
|
+
a: ({ children, href }) => /* @__PURE__ */ React44.createElement(Link2, { href, target: defaultLinkAction }, children),
|
|
5866
|
+
hr: () => /* @__PURE__ */ React44.createElement(Divider, null),
|
|
5867
|
+
b: ({ children }) => /* @__PURE__ */ React44.createElement(Typography, { fontWeight: boldFontWeight }, children),
|
|
5868
|
+
strong: ({ children }) => /* @__PURE__ */ React44.createElement(Typography, { fontWeight: boldFontWeight }, children),
|
|
5699
5869
|
...markdownOptions?.components
|
|
5700
5870
|
}
|
|
5701
5871
|
}
|
|
@@ -5705,7 +5875,7 @@ var Markdown = (props) => {
|
|
|
5705
5875
|
Markdown.displayName = "Markdown";
|
|
5706
5876
|
|
|
5707
5877
|
// src/components/MenuButton/MenuButton.tsx
|
|
5708
|
-
import
|
|
5878
|
+
import React45 from "react";
|
|
5709
5879
|
import { MenuButton as JoyMenuButton3, Button as JoyButton2 } from "@mui/joy";
|
|
5710
5880
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
5711
5881
|
function MenuButton(props) {
|
|
@@ -5723,7 +5893,7 @@ function MenuButton(props) {
|
|
|
5723
5893
|
placement = "bottom"
|
|
5724
5894
|
} = props;
|
|
5725
5895
|
if (!items.length) {
|
|
5726
|
-
return /* @__PURE__ */
|
|
5896
|
+
return /* @__PURE__ */ React45.createElement(
|
|
5727
5897
|
JoyButton2,
|
|
5728
5898
|
{
|
|
5729
5899
|
component: props.buttonComponent ?? "button",
|
|
@@ -5734,12 +5904,12 @@ function MenuButton(props) {
|
|
|
5734
5904
|
loading,
|
|
5735
5905
|
startDecorator,
|
|
5736
5906
|
...props.buttonComponentProps ?? {},
|
|
5737
|
-
endDecorator: showIcon ? /* @__PURE__ */
|
|
5907
|
+
endDecorator: showIcon ? /* @__PURE__ */ React45.createElement(React45.Fragment, null, endDecorator, /* @__PURE__ */ React45.createElement(ExpandMoreIcon, null)) : /* @__PURE__ */ React45.createElement(React45.Fragment, null, endDecorator)
|
|
5738
5908
|
},
|
|
5739
5909
|
buttonText
|
|
5740
5910
|
);
|
|
5741
5911
|
}
|
|
5742
|
-
return /* @__PURE__ */
|
|
5912
|
+
return /* @__PURE__ */ React45.createElement(Dropdown_default, null, /* @__PURE__ */ React45.createElement(
|
|
5743
5913
|
JoyMenuButton3,
|
|
5744
5914
|
{
|
|
5745
5915
|
component: props.buttonComponent ?? "button",
|
|
@@ -5750,15 +5920,15 @@ function MenuButton(props) {
|
|
|
5750
5920
|
loading,
|
|
5751
5921
|
startDecorator,
|
|
5752
5922
|
...props.buttonComponentProps ?? {},
|
|
5753
|
-
endDecorator: showIcon ? /* @__PURE__ */
|
|
5923
|
+
endDecorator: showIcon ? /* @__PURE__ */ React45.createElement(React45.Fragment, null, endDecorator, /* @__PURE__ */ React45.createElement(ExpandMoreIcon, null)) : /* @__PURE__ */ React45.createElement(React45.Fragment, null, endDecorator)
|
|
5754
5924
|
},
|
|
5755
5925
|
buttonText
|
|
5756
|
-
), /* @__PURE__ */
|
|
5926
|
+
), /* @__PURE__ */ React45.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ React45.createElement(MenuItem, { key: i.text, component: i.component, ...i.componentProps ?? {} }, i.text))));
|
|
5757
5927
|
}
|
|
5758
5928
|
MenuButton.displayName = "MenuButton";
|
|
5759
5929
|
|
|
5760
5930
|
// src/components/MonthPicker/MonthPicker.tsx
|
|
5761
|
-
import
|
|
5931
|
+
import React46, { forwardRef as forwardRef9, useCallback as useCallback25, useEffect as useEffect12, useImperativeHandle as useImperativeHandle4, useRef as useRef10, useState as useState15 } from "react";
|
|
5762
5932
|
import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
|
|
5763
5933
|
import { styled as styled22, useThemeProps as useThemeProps7 } from "@mui/joy";
|
|
5764
5934
|
import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
|
|
@@ -5845,9 +6015,9 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5845
6015
|
const [value, setValue, isControlled] = useControlledState(
|
|
5846
6016
|
props.value,
|
|
5847
6017
|
props.defaultValue || "",
|
|
5848
|
-
|
|
6018
|
+
useCallback25((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
5849
6019
|
);
|
|
5850
|
-
const getFormattedDisplayValue =
|
|
6020
|
+
const getFormattedDisplayValue = useCallback25(
|
|
5851
6021
|
(inputValue) => {
|
|
5852
6022
|
if (!inputValue) return "";
|
|
5853
6023
|
try {
|
|
@@ -5870,7 +6040,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5870
6040
|
useEffect12(() => {
|
|
5871
6041
|
setDisplayValue(getFormattedDisplayValue(value));
|
|
5872
6042
|
}, [value, getFormattedDisplayValue]);
|
|
5873
|
-
const handleChange =
|
|
6043
|
+
const handleChange = useCallback25(
|
|
5874
6044
|
(event) => {
|
|
5875
6045
|
const newValue = event.target.value;
|
|
5876
6046
|
setValue(newValue);
|
|
@@ -5880,21 +6050,21 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5880
6050
|
},
|
|
5881
6051
|
[setValue, getFormattedDisplayValue, isControlled]
|
|
5882
6052
|
);
|
|
5883
|
-
const handleCalendarToggle =
|
|
6053
|
+
const handleCalendarToggle = useCallback25(
|
|
5884
6054
|
(event) => {
|
|
5885
6055
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
5886
6056
|
innerRef.current?.focus();
|
|
5887
6057
|
},
|
|
5888
6058
|
[anchorEl, setAnchorEl, innerRef]
|
|
5889
6059
|
);
|
|
5890
|
-
const handleInputMouseDown =
|
|
6060
|
+
const handleInputMouseDown = useCallback25(
|
|
5891
6061
|
(event) => {
|
|
5892
6062
|
event.preventDefault();
|
|
5893
6063
|
buttonRef.current?.focus();
|
|
5894
6064
|
},
|
|
5895
6065
|
[buttonRef]
|
|
5896
6066
|
);
|
|
5897
|
-
return /* @__PURE__ */
|
|
6067
|
+
return /* @__PURE__ */ React46.createElement(MonthPickerRoot, null, /* @__PURE__ */ React46.createElement(FocusTrap3, { open: true }, /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(
|
|
5898
6068
|
Input_default,
|
|
5899
6069
|
{
|
|
5900
6070
|
...innerProps,
|
|
@@ -5924,7 +6094,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5924
6094
|
// NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
|
|
5925
6095
|
fontFamily: "monospace"
|
|
5926
6096
|
},
|
|
5927
|
-
endDecorator: /* @__PURE__ */
|
|
6097
|
+
endDecorator: /* @__PURE__ */ React46.createElement(
|
|
5928
6098
|
IconButton_default,
|
|
5929
6099
|
{
|
|
5930
6100
|
ref: buttonRef,
|
|
@@ -5936,12 +6106,12 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5936
6106
|
"aria-expanded": open,
|
|
5937
6107
|
disabled
|
|
5938
6108
|
},
|
|
5939
|
-
/* @__PURE__ */
|
|
6109
|
+
/* @__PURE__ */ React46.createElement(CalendarTodayIcon3, null)
|
|
5940
6110
|
),
|
|
5941
6111
|
label,
|
|
5942
6112
|
helperText
|
|
5943
6113
|
}
|
|
5944
|
-
), open && /* @__PURE__ */
|
|
6114
|
+
), open && /* @__PURE__ */ React46.createElement(ClickAwayListener3, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React46.createElement(
|
|
5945
6115
|
StyledPopper3,
|
|
5946
6116
|
{
|
|
5947
6117
|
id: "month-picker-popper",
|
|
@@ -5960,7 +6130,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5960
6130
|
"aria-label": "Calendar Tooltip",
|
|
5961
6131
|
"aria-expanded": open
|
|
5962
6132
|
},
|
|
5963
|
-
/* @__PURE__ */
|
|
6133
|
+
/* @__PURE__ */ React46.createElement(CalendarSheet3, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React46.createElement(
|
|
5964
6134
|
Calendar_default,
|
|
5965
6135
|
{
|
|
5966
6136
|
view: "month",
|
|
@@ -5981,14 +6151,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
5981
6151
|
disablePast,
|
|
5982
6152
|
locale
|
|
5983
6153
|
}
|
|
5984
|
-
), /* @__PURE__ */
|
|
6154
|
+
), /* @__PURE__ */ React46.createElement(
|
|
5985
6155
|
DialogActions_default,
|
|
5986
6156
|
{
|
|
5987
6157
|
sx: {
|
|
5988
6158
|
p: 1
|
|
5989
6159
|
}
|
|
5990
6160
|
},
|
|
5991
|
-
/* @__PURE__ */
|
|
6161
|
+
/* @__PURE__ */ React46.createElement(
|
|
5992
6162
|
Button_default,
|
|
5993
6163
|
{
|
|
5994
6164
|
size,
|
|
@@ -6011,7 +6181,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
6011
6181
|
});
|
|
6012
6182
|
|
|
6013
6183
|
// src/components/MonthRangePicker/MonthRangePicker.tsx
|
|
6014
|
-
import
|
|
6184
|
+
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";
|
|
6015
6185
|
import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
|
|
6016
6186
|
import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
|
|
6017
6187
|
import { styled as styled23, useThemeProps as useThemeProps8 } from "@mui/joy";
|
|
@@ -6069,9 +6239,9 @@ var parseDates2 = (str) => {
|
|
|
6069
6239
|
var formatToPattern3 = (format) => {
|
|
6070
6240
|
return `${format} - ${format}`.replace(/YYYY/g, "Y").replace(/MM/g, "m").replace(/[^YMm\s]/g, (match) => `${match}\``);
|
|
6071
6241
|
};
|
|
6072
|
-
var TextMaskAdapter9 =
|
|
6242
|
+
var TextMaskAdapter9 = React47.forwardRef(function TextMaskAdapter10(props, ref) {
|
|
6073
6243
|
const { onChange, format, ...other } = props;
|
|
6074
|
-
return /* @__PURE__ */
|
|
6244
|
+
return /* @__PURE__ */ React47.createElement(
|
|
6075
6245
|
IMaskInput3,
|
|
6076
6246
|
{
|
|
6077
6247
|
...other,
|
|
@@ -6123,7 +6293,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
|
6123
6293
|
const [value, setValue] = useControlledState(
|
|
6124
6294
|
props.value,
|
|
6125
6295
|
props.defaultValue || "",
|
|
6126
|
-
|
|
6296
|
+
useCallback26((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
6127
6297
|
);
|
|
6128
6298
|
const [anchorEl, setAnchorEl] = useState16(null);
|
|
6129
6299
|
const open = Boolean(anchorEl);
|
|
@@ -6134,20 +6304,20 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
|
6134
6304
|
}
|
|
6135
6305
|
}, [anchorEl, innerRef]);
|
|
6136
6306
|
useImperativeHandle5(ref, () => innerRef.current, [innerRef]);
|
|
6137
|
-
const handleChange =
|
|
6307
|
+
const handleChange = useCallback26(
|
|
6138
6308
|
(event) => {
|
|
6139
6309
|
setValue(event.target.value);
|
|
6140
6310
|
},
|
|
6141
6311
|
[setValue]
|
|
6142
6312
|
);
|
|
6143
|
-
const handleCalendarToggle =
|
|
6313
|
+
const handleCalendarToggle = useCallback26(
|
|
6144
6314
|
(event) => {
|
|
6145
6315
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
6146
6316
|
innerRef.current?.focus();
|
|
6147
6317
|
},
|
|
6148
6318
|
[anchorEl, setAnchorEl, innerRef]
|
|
6149
6319
|
);
|
|
6150
|
-
const handleCalendarChange =
|
|
6320
|
+
const handleCalendarChange = useCallback26(
|
|
6151
6321
|
([date1, date2]) => {
|
|
6152
6322
|
if (!date1 || !date2) return;
|
|
6153
6323
|
setValue(formatValueString4([date1, date2], format));
|
|
@@ -6155,7 +6325,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
|
6155
6325
|
},
|
|
6156
6326
|
[setValue, setAnchorEl, format]
|
|
6157
6327
|
);
|
|
6158
|
-
return /* @__PURE__ */
|
|
6328
|
+
return /* @__PURE__ */ React47.createElement(MonthRangePickerRoot, null, /* @__PURE__ */ React47.createElement(FocusTrap4, { open: true }, /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
|
|
6159
6329
|
Input_default,
|
|
6160
6330
|
{
|
|
6161
6331
|
...innerProps,
|
|
@@ -6177,7 +6347,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
|
6177
6347
|
// NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
|
|
6178
6348
|
fontFamily: "monospace"
|
|
6179
6349
|
},
|
|
6180
|
-
endDecorator: /* @__PURE__ */
|
|
6350
|
+
endDecorator: /* @__PURE__ */ React47.createElement(
|
|
6181
6351
|
IconButton_default,
|
|
6182
6352
|
{
|
|
6183
6353
|
variant: "plain",
|
|
@@ -6187,12 +6357,12 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
|
6187
6357
|
"aria-haspopup": "dialog",
|
|
6188
6358
|
"aria-expanded": open
|
|
6189
6359
|
},
|
|
6190
|
-
/* @__PURE__ */
|
|
6360
|
+
/* @__PURE__ */ React47.createElement(CalendarTodayIcon4, null)
|
|
6191
6361
|
),
|
|
6192
6362
|
label,
|
|
6193
6363
|
helperText
|
|
6194
6364
|
}
|
|
6195
|
-
), open && /* @__PURE__ */
|
|
6365
|
+
), open && /* @__PURE__ */ React47.createElement(ClickAwayListener4, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React47.createElement(
|
|
6196
6366
|
StyledPopper4,
|
|
6197
6367
|
{
|
|
6198
6368
|
id: "month-range-picker-popper",
|
|
@@ -6211,7 +6381,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
|
6211
6381
|
"aria-label": "Calendar Tooltip",
|
|
6212
6382
|
"aria-expanded": open
|
|
6213
6383
|
},
|
|
6214
|
-
/* @__PURE__ */
|
|
6384
|
+
/* @__PURE__ */ React47.createElement(CalendarSheet4, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React47.createElement(
|
|
6215
6385
|
Calendar_default,
|
|
6216
6386
|
{
|
|
6217
6387
|
view: "month",
|
|
@@ -6224,14 +6394,14 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
|
6224
6394
|
disableFuture,
|
|
6225
6395
|
disablePast
|
|
6226
6396
|
}
|
|
6227
|
-
), /* @__PURE__ */
|
|
6397
|
+
), /* @__PURE__ */ React47.createElement(
|
|
6228
6398
|
DialogActions_default,
|
|
6229
6399
|
{
|
|
6230
6400
|
sx: {
|
|
6231
6401
|
p: 1
|
|
6232
6402
|
}
|
|
6233
6403
|
},
|
|
6234
|
-
/* @__PURE__ */
|
|
6404
|
+
/* @__PURE__ */ React47.createElement(
|
|
6235
6405
|
Button_default,
|
|
6236
6406
|
{
|
|
6237
6407
|
size,
|
|
@@ -6250,7 +6420,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
|
6250
6420
|
MonthRangePicker.displayName = "MonthRangePicker";
|
|
6251
6421
|
|
|
6252
6422
|
// src/components/NavigationGroup/NavigationGroup.tsx
|
|
6253
|
-
import
|
|
6423
|
+
import React48 from "react";
|
|
6254
6424
|
import {
|
|
6255
6425
|
Accordion as JoyAccordion2,
|
|
6256
6426
|
AccordionSummary as JoyAccordionSummary2,
|
|
@@ -6281,11 +6451,11 @@ var AccordionDetails2 = styled24(JoyAccordionDetails2, {
|
|
|
6281
6451
|
}));
|
|
6282
6452
|
function NavigationGroup(props) {
|
|
6283
6453
|
const { title, children, startDecorator, level, ...rest } = props;
|
|
6284
|
-
return /* @__PURE__ */
|
|
6454
|
+
return /* @__PURE__ */ React48.createElement(JoyAccordion2, { ...rest }, /* @__PURE__ */ React48.createElement(AccordionSummary2, { useIcon: !!startDecorator, level }, /* @__PURE__ */ React48.createElement(Stack12, { direction: "row", gap: 4 }, startDecorator, title)), /* @__PURE__ */ React48.createElement(AccordionDetails2, null, children));
|
|
6285
6455
|
}
|
|
6286
6456
|
|
|
6287
6457
|
// src/components/NavigationItem/NavigationItem.tsx
|
|
6288
|
-
import
|
|
6458
|
+
import React49 from "react";
|
|
6289
6459
|
import {
|
|
6290
6460
|
ListItem as JoyListItem,
|
|
6291
6461
|
ListItemButton as JoyListItemButton,
|
|
@@ -6320,7 +6490,7 @@ function NavigationItem(props) {
|
|
|
6320
6490
|
const handleClick = () => {
|
|
6321
6491
|
onClick?.(id);
|
|
6322
6492
|
};
|
|
6323
|
-
return /* @__PURE__ */
|
|
6493
|
+
return /* @__PURE__ */ React49.createElement(JoyListItem, { ...rest }, /* @__PURE__ */ React49.createElement(
|
|
6324
6494
|
ListItemButton,
|
|
6325
6495
|
{
|
|
6326
6496
|
level,
|
|
@@ -6329,21 +6499,21 @@ function NavigationItem(props) {
|
|
|
6329
6499
|
"aria-current": selected,
|
|
6330
6500
|
onClick: handleClick
|
|
6331
6501
|
},
|
|
6332
|
-
startDecorator && /* @__PURE__ */
|
|
6502
|
+
startDecorator && /* @__PURE__ */ React49.createElement(JoyListItemDecorator, null, startDecorator),
|
|
6333
6503
|
children
|
|
6334
6504
|
));
|
|
6335
6505
|
}
|
|
6336
6506
|
|
|
6337
6507
|
// src/components/Navigator/Navigator.tsx
|
|
6338
|
-
import
|
|
6508
|
+
import React50 from "react";
|
|
6339
6509
|
function Navigator(props) {
|
|
6340
6510
|
const { items, level = 0, onSelect } = props;
|
|
6341
6511
|
const handleItemClick = (id) => {
|
|
6342
6512
|
onSelect?.(id);
|
|
6343
6513
|
};
|
|
6344
|
-
return /* @__PURE__ */
|
|
6514
|
+
return /* @__PURE__ */ React50.createElement("div", null, items.map((item, index) => {
|
|
6345
6515
|
if (item.type === "item") {
|
|
6346
|
-
return /* @__PURE__ */
|
|
6516
|
+
return /* @__PURE__ */ React50.createElement(
|
|
6347
6517
|
NavigationItem,
|
|
6348
6518
|
{
|
|
6349
6519
|
key: item.id,
|
|
@@ -6356,7 +6526,7 @@ function Navigator(props) {
|
|
|
6356
6526
|
item.title
|
|
6357
6527
|
);
|
|
6358
6528
|
} else if (item.type === "group") {
|
|
6359
|
-
return /* @__PURE__ */
|
|
6529
|
+
return /* @__PURE__ */ React50.createElement(
|
|
6360
6530
|
NavigationGroup,
|
|
6361
6531
|
{
|
|
6362
6532
|
key: `${item.title}-${index}`,
|
|
@@ -6374,7 +6544,7 @@ function Navigator(props) {
|
|
|
6374
6544
|
Navigator.displayName = "Navigator";
|
|
6375
6545
|
|
|
6376
6546
|
// src/components/ProfileMenu/ProfileMenu.tsx
|
|
6377
|
-
import
|
|
6547
|
+
import React51, { useCallback as useCallback27, useMemo as useMemo17 } from "react";
|
|
6378
6548
|
import { Dropdown as Dropdown2, ListDivider, menuItemClasses, styled as styled26, MenuButton as MenuButton2 } from "@mui/joy";
|
|
6379
6549
|
import { ClickAwayListener as ClickAwayListener5 } from "@mui/base";
|
|
6380
6550
|
import DropdownIcon from "@mui/icons-material/ArrowDropDown";
|
|
@@ -6386,7 +6556,7 @@ function ProfileCard(props) {
|
|
|
6386
6556
|
const { children, chip, caption, size } = props;
|
|
6387
6557
|
const captionLevel = useMemo17(() => size === "sm" ? "body-xs" : "body-sm", [size]);
|
|
6388
6558
|
const nameLevel = useMemo17(() => size === "sm" ? "body-sm" : "body-md", [size]);
|
|
6389
|
-
return /* @__PURE__ */
|
|
6559
|
+
return /* @__PURE__ */ React51.createElement(StyledProfileCard, { px: 4, py: 2 }, /* @__PURE__ */ React51.createElement(Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React51.createElement(Typography, { level: nameLevel, fontWeight: "bold", textColor: "text.primary" }, children), chip && /* @__PURE__ */ React51.createElement(Chip, { size, color: "neutral", variant: "outlined" }, chip)), caption && /* @__PURE__ */ React51.createElement(Typography, { level: captionLevel, textColor: "text.tertiary" }, caption));
|
|
6390
6560
|
}
|
|
6391
6561
|
ProfileCard.displayName = "ProfileCard";
|
|
6392
6562
|
var StyledProfileMenuButton = styled26(MenuButton2, {
|
|
@@ -6398,16 +6568,16 @@ var StyledProfileMenuButton = styled26(MenuButton2, {
|
|
|
6398
6568
|
}));
|
|
6399
6569
|
function ProfileMenuButton(props) {
|
|
6400
6570
|
const { size = "md", src, alt, children, getInitial, ...innerProps } = props;
|
|
6401
|
-
return /* @__PURE__ */
|
|
6571
|
+
return /* @__PURE__ */ React51.createElement(
|
|
6402
6572
|
StyledProfileMenuButton,
|
|
6403
6573
|
{
|
|
6404
6574
|
variant: "plain",
|
|
6405
6575
|
color: "neutral",
|
|
6406
6576
|
size,
|
|
6407
|
-
endDecorator: /* @__PURE__ */
|
|
6577
|
+
endDecorator: /* @__PURE__ */ React51.createElement(DropdownIcon, null),
|
|
6408
6578
|
...innerProps
|
|
6409
6579
|
},
|
|
6410
|
-
/* @__PURE__ */
|
|
6580
|
+
/* @__PURE__ */ React51.createElement(Avatar, { variant: "soft", color: "primary", size, src, alt, getInitial }, children)
|
|
6411
6581
|
);
|
|
6412
6582
|
}
|
|
6413
6583
|
ProfileMenuButton.displayName = "ProfileMenuButton";
|
|
@@ -6426,9 +6596,9 @@ function ProfileMenu(props) {
|
|
|
6426
6596
|
const [open, setOpen] = useControlledState(
|
|
6427
6597
|
_open,
|
|
6428
6598
|
defaultOpen ?? false,
|
|
6429
|
-
|
|
6599
|
+
useCallback27((value) => onOpenChange?.(value), [onOpenChange])
|
|
6430
6600
|
);
|
|
6431
|
-
return /* @__PURE__ */
|
|
6601
|
+
return /* @__PURE__ */ React51.createElement(ClickAwayListener5, { onClickAway: () => setOpen(false) }, /* @__PURE__ */ React51.createElement("div", null, /* @__PURE__ */ React51.createElement(Dropdown2, { open }, /* @__PURE__ */ React51.createElement(
|
|
6432
6602
|
ProfileMenuButton,
|
|
6433
6603
|
{
|
|
6434
6604
|
size,
|
|
@@ -6438,7 +6608,7 @@ function ProfileMenu(props) {
|
|
|
6438
6608
|
getInitial
|
|
6439
6609
|
},
|
|
6440
6610
|
profile.name
|
|
6441
|
-
), /* @__PURE__ */
|
|
6611
|
+
), /* @__PURE__ */ React51.createElement(ProfileMenuRoot, { size, placement: "bottom-end", ...innerProps, onClose: () => setOpen(false) }, /* @__PURE__ */ React51.createElement(ProfileCard, { size, caption: profile.caption, chip: profile.chip }, profile.name), !!menuItems.length && /* @__PURE__ */ React51.createElement(ListDivider, null), menuItems.map(({ label, ...menuProps }) => /* @__PURE__ */ React51.createElement(
|
|
6442
6612
|
MenuItem,
|
|
6443
6613
|
{
|
|
6444
6614
|
key: label,
|
|
@@ -6454,7 +6624,7 @@ function ProfileMenu(props) {
|
|
|
6454
6624
|
ProfileMenu.displayName = "ProfileMenu";
|
|
6455
6625
|
|
|
6456
6626
|
// src/components/RadioTileGroup/RadioTileGroup.tsx
|
|
6457
|
-
import
|
|
6627
|
+
import React52 from "react";
|
|
6458
6628
|
import { styled as styled27, radioClasses, sheetClasses } from "@mui/joy";
|
|
6459
6629
|
var RadioTileGroupRoot = styled27(RadioGroup, {
|
|
6460
6630
|
name: "RadioTileGroup",
|
|
@@ -6542,7 +6712,7 @@ function RadioTileGroup(props) {
|
|
|
6542
6712
|
error,
|
|
6543
6713
|
required
|
|
6544
6714
|
} = props;
|
|
6545
|
-
const radioGroup = /* @__PURE__ */
|
|
6715
|
+
const radioGroup = /* @__PURE__ */ React52.createElement(
|
|
6546
6716
|
RadioTileGroupRoot,
|
|
6547
6717
|
{
|
|
6548
6718
|
overlay: true,
|
|
@@ -6553,7 +6723,7 @@ function RadioTileGroup(props) {
|
|
|
6553
6723
|
flex,
|
|
6554
6724
|
columns
|
|
6555
6725
|
},
|
|
6556
|
-
options.map((option) => /* @__PURE__ */
|
|
6726
|
+
options.map((option) => /* @__PURE__ */ React52.createElement(
|
|
6557
6727
|
RadioTileSheet,
|
|
6558
6728
|
{
|
|
6559
6729
|
key: option.value,
|
|
@@ -6563,7 +6733,7 @@ function RadioTileGroup(props) {
|
|
|
6563
6733
|
flex,
|
|
6564
6734
|
textAlign
|
|
6565
6735
|
},
|
|
6566
|
-
/* @__PURE__ */
|
|
6736
|
+
/* @__PURE__ */ React52.createElement(
|
|
6567
6737
|
Radio,
|
|
6568
6738
|
{
|
|
6569
6739
|
id: `${option.value}`,
|
|
@@ -6591,7 +6761,7 @@ function RadioTileGroup(props) {
|
|
|
6591
6761
|
}
|
|
6592
6762
|
}
|
|
6593
6763
|
),
|
|
6594
|
-
option.startDecorator && /* @__PURE__ */
|
|
6764
|
+
option.startDecorator && /* @__PURE__ */ React52.createElement(
|
|
6595
6765
|
Box_default,
|
|
6596
6766
|
{
|
|
6597
6767
|
sx: {
|
|
@@ -6612,20 +6782,20 @@ function RadioTileGroup(props) {
|
|
|
6612
6782
|
)
|
|
6613
6783
|
))
|
|
6614
6784
|
);
|
|
6615
|
-
return /* @__PURE__ */
|
|
6785
|
+
return /* @__PURE__ */ React52.createElement(FormControl_default, { required, disabled: allDisabled, error, size, sx, className }, label && /* @__PURE__ */ React52.createElement(FormLabel_default, null, label), radioGroup, helperText && /* @__PURE__ */ React52.createElement(FormHelperText_default, null, helperText));
|
|
6616
6786
|
}
|
|
6617
6787
|
RadioTileGroup.displayName = "RadioTileGroup";
|
|
6618
6788
|
|
|
6619
6789
|
// src/components/RadioList/RadioList.tsx
|
|
6620
|
-
import
|
|
6790
|
+
import React53 from "react";
|
|
6621
6791
|
function RadioList(props) {
|
|
6622
6792
|
const { items, ...innerProps } = props;
|
|
6623
|
-
return /* @__PURE__ */
|
|
6793
|
+
return /* @__PURE__ */ React53.createElement(RadioGroup, { ...innerProps }, items.map((item) => /* @__PURE__ */ React53.createElement(Radio, { key: `${item.value}`, value: item.value, label: item.label })));
|
|
6624
6794
|
}
|
|
6625
6795
|
RadioList.displayName = "RadioList";
|
|
6626
6796
|
|
|
6627
6797
|
// src/components/Stepper/Stepper.tsx
|
|
6628
|
-
import
|
|
6798
|
+
import React54 from "react";
|
|
6629
6799
|
import {
|
|
6630
6800
|
Stepper as JoyStepper,
|
|
6631
6801
|
Step as JoyStep,
|
|
@@ -6661,7 +6831,7 @@ function Stepper(props) {
|
|
|
6661
6831
|
stepOrientation = "horizontal"
|
|
6662
6832
|
} = props;
|
|
6663
6833
|
const effectiveStepOrientation = orientation === "vertical" ? "horizontal" : stepOrientation;
|
|
6664
|
-
return /* @__PURE__ */
|
|
6834
|
+
return /* @__PURE__ */ React54.createElement(
|
|
6665
6835
|
MotionStepper,
|
|
6666
6836
|
{
|
|
6667
6837
|
orientation,
|
|
@@ -6700,23 +6870,23 @@ function Stepper(props) {
|
|
|
6700
6870
|
const completed = activeStep > i + 1;
|
|
6701
6871
|
const disabled = activeStep < i + 1;
|
|
6702
6872
|
const hasContent = step.label || step.extraContent;
|
|
6703
|
-
return /* @__PURE__ */
|
|
6873
|
+
return /* @__PURE__ */ React54.createElement(
|
|
6704
6874
|
Step,
|
|
6705
6875
|
{
|
|
6706
6876
|
key: `step-${i}`,
|
|
6707
|
-
indicator: /* @__PURE__ */
|
|
6877
|
+
indicator: /* @__PURE__ */ React54.createElement(StepIndicator, { variant: disabled ? "outlined" : "solid", color: disabled ? "neutral" : "primary" }, completed ? /* @__PURE__ */ React54.createElement(CheckIcon, null) : step.indicatorContent),
|
|
6708
6878
|
active,
|
|
6709
6879
|
completed,
|
|
6710
6880
|
disabled,
|
|
6711
6881
|
orientation: effectiveStepOrientation
|
|
6712
6882
|
},
|
|
6713
|
-
hasContent && /* @__PURE__ */
|
|
6883
|
+
hasContent && /* @__PURE__ */ React54.createElement(
|
|
6714
6884
|
Stack_default,
|
|
6715
6885
|
{
|
|
6716
6886
|
sx: orientation === "horizontal" && effectiveStepOrientation === "vertical" ? { alignItems: "center" } : {}
|
|
6717
6887
|
},
|
|
6718
|
-
step.label && /* @__PURE__ */
|
|
6719
|
-
step.extraContent && /* @__PURE__ */
|
|
6888
|
+
step.label && /* @__PURE__ */ React54.createElement(Typography_default, { level: "title-sm" }, step.label),
|
|
6889
|
+
step.extraContent && /* @__PURE__ */ React54.createElement(Typography_default, { level: "body-xs" }, step.extraContent)
|
|
6720
6890
|
)
|
|
6721
6891
|
);
|
|
6722
6892
|
})
|
|
@@ -6725,7 +6895,7 @@ function Stepper(props) {
|
|
|
6725
6895
|
Stepper.displayName = "Stepper";
|
|
6726
6896
|
|
|
6727
6897
|
// src/components/Switch/Switch.tsx
|
|
6728
|
-
import
|
|
6898
|
+
import React55 from "react";
|
|
6729
6899
|
import { Switch as JoySwitch, styled as styled29, switchClasses } from "@mui/joy";
|
|
6730
6900
|
import { motion as motion27 } from "framer-motion";
|
|
6731
6901
|
var MotionSwitch = motion27(JoySwitch);
|
|
@@ -6747,14 +6917,14 @@ var StyledThumb = styled29(motion27.div)({
|
|
|
6747
6917
|
right: "var(--Switch-thumbOffset)"
|
|
6748
6918
|
}
|
|
6749
6919
|
});
|
|
6750
|
-
var Thumb = (props) => /* @__PURE__ */
|
|
6920
|
+
var Thumb = (props) => /* @__PURE__ */ React55.createElement(StyledThumb, { ...props, layout: true, transition: spring });
|
|
6751
6921
|
var spring = {
|
|
6752
6922
|
type: "spring",
|
|
6753
6923
|
stiffness: 700,
|
|
6754
6924
|
damping: 30
|
|
6755
6925
|
};
|
|
6756
6926
|
var Switch = (props) => {
|
|
6757
|
-
return /* @__PURE__ */
|
|
6927
|
+
return /* @__PURE__ */ React55.createElement(
|
|
6758
6928
|
MotionSwitch,
|
|
6759
6929
|
{
|
|
6760
6930
|
...props,
|
|
@@ -6768,7 +6938,7 @@ var Switch = (props) => {
|
|
|
6768
6938
|
Switch.displayName = "Switch";
|
|
6769
6939
|
|
|
6770
6940
|
// src/components/Tabs/Tabs.tsx
|
|
6771
|
-
import
|
|
6941
|
+
import React56, { forwardRef as forwardRef11 } from "react";
|
|
6772
6942
|
import {
|
|
6773
6943
|
Tabs as JoyTabs,
|
|
6774
6944
|
Tab as JoyTab,
|
|
@@ -6792,14 +6962,14 @@ var StyledTab = styled30(JoyTab)(({ theme }) => ({
|
|
|
6792
6962
|
}
|
|
6793
6963
|
}));
|
|
6794
6964
|
var Tab = forwardRef11(function Tab2({ startDecorator, endDecorator, children, ...props }, ref) {
|
|
6795
|
-
return /* @__PURE__ */
|
|
6965
|
+
return /* @__PURE__ */ React56.createElement(StyledTab, { ...props, ref }, startDecorator, children, endDecorator);
|
|
6796
6966
|
});
|
|
6797
6967
|
Tab.displayName = "Tab";
|
|
6798
6968
|
var TabList = JoyTabList;
|
|
6799
6969
|
var TabPanel = JoyTabPanel;
|
|
6800
6970
|
|
|
6801
6971
|
// src/components/ThemeProvider/ThemeProvider.tsx
|
|
6802
|
-
import
|
|
6972
|
+
import React57 from "react";
|
|
6803
6973
|
import { CssBaseline, CssVarsProvider, checkboxClasses, extendTheme, inputClasses } from "@mui/joy";
|
|
6804
6974
|
var colorScheme = {
|
|
6805
6975
|
palette: {
|
|
@@ -7078,7 +7248,7 @@ var defaultTheme = extendTheme({
|
|
|
7078
7248
|
});
|
|
7079
7249
|
function ThemeProvider(props) {
|
|
7080
7250
|
const theme = props.theme || defaultTheme;
|
|
7081
|
-
return /* @__PURE__ */
|
|
7251
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(CssVarsProvider, { theme }, /* @__PURE__ */ React57.createElement(CssBaseline, null), props.children));
|
|
7082
7252
|
}
|
|
7083
7253
|
ThemeProvider.displayName = "ThemeProvider";
|
|
7084
7254
|
export {
|