@ceed/cds 1.24.1-next.2 → 1.24.1-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/CurrencyInput/CurrencyInput.d.ts +1 -1
- package/dist/components/CurrencyInput/hooks/use-currency-setting.d.ts +2 -2
- package/dist/components/data-display/DataTable.md +1 -1
- package/dist/components/data-display/InfoSign.md +91 -74
- package/dist/components/data-display/Typography.md +94 -411
- package/dist/components/feedback/Dialog.md +62 -76
- package/dist/components/feedback/Modal.md +138 -430
- package/dist/components/feedback/llms.txt +0 -2
- package/dist/components/index.d.ts +0 -1
- package/dist/components/inputs/Autocomplete.md +107 -356
- package/dist/components/inputs/ButtonGroup.md +104 -115
- package/dist/components/inputs/CurrencyInput.md +5 -183
- package/dist/components/inputs/DatePicker.md +431 -108
- package/dist/components/inputs/DateRangePicker.md +492 -131
- package/dist/components/inputs/FilterableCheckboxGroup.md +19 -145
- package/dist/components/inputs/IconButton.md +88 -137
- package/dist/components/inputs/Input.md +73 -204
- package/dist/components/inputs/MonthPicker.md +422 -95
- package/dist/components/inputs/MonthRangePicker.md +466 -89
- package/dist/components/inputs/PercentageInput.md +16 -185
- package/dist/components/inputs/RadioButton.md +35 -163
- package/dist/components/inputs/Select.md +326 -222
- package/dist/components/inputs/Switch.md +376 -143
- package/dist/components/inputs/Textarea.md +10 -213
- package/dist/components/inputs/Uploader/Uploader.md +66 -145
- package/dist/components/inputs/llms.txt +0 -4
- package/dist/components/navigation/Breadcrumbs.md +308 -57
- package/dist/components/navigation/Drawer.md +0 -180
- package/dist/components/navigation/Dropdown.md +215 -98
- package/dist/components/navigation/IconMenuButton.md +502 -40
- package/dist/components/navigation/InsetDrawer.md +650 -281
- package/dist/components/navigation/Link.md +348 -31
- package/dist/components/navigation/Menu.md +285 -92
- package/dist/components/navigation/MenuButton.md +448 -55
- package/dist/components/navigation/Pagination.md +338 -47
- package/dist/components/navigation/Stepper.md +28 -160
- package/dist/components/navigation/Tabs.md +316 -57
- package/dist/components/surfaces/Accordions.md +804 -49
- package/dist/components/surfaces/Card.md +157 -97
- package/dist/components/surfaces/Divider.md +234 -83
- package/dist/components/surfaces/Sheet.md +328 -153
- package/dist/index.cjs +371 -617
- package/dist/index.d.ts +1 -1
- package/dist/index.js +342 -532
- package/dist/llms.txt +0 -9
- package/framer/index.js +163 -1
- package/package.json +24 -33
- package/README.md +0 -51
- package/dist/chunks/rehype-accent-FZRUD7VI.js +0 -39
- package/dist/components/RadioTileGroup/RadioTileGroup.d.ts +0 -56
- package/dist/components/RadioTileGroup/index.d.ts +0 -3
- package/dist/components/feedback/CircularProgress.md +0 -257
- package/dist/components/feedback/Skeleton.md +0 -280
- package/dist/components/inputs/FormControl.md +0 -361
- package/dist/components/inputs/RadioList.md +0 -241
- package/dist/components/inputs/RadioTileGroup.md +0 -507
- package/dist/components/inputs/Slider.md +0 -334
- package/dist/guides/ThemeProvider.md +0 -89
- package/dist/guides/llms.txt +0 -9
- package/dist/index.browser.js +0 -224
- package/dist/index.browser.js.map +0 -7
package/dist/index.cjs
CHANGED
|
@@ -85,26 +85,26 @@ __export(index_exports, {
|
|
|
85
85
|
AccordionSummary: () => AccordionSummary,
|
|
86
86
|
Accordions: () => Accordions,
|
|
87
87
|
Alert: () => Alert,
|
|
88
|
-
AspectRatio: () =>
|
|
88
|
+
AspectRatio: () => import_joy60.AspectRatio,
|
|
89
89
|
Autocomplete: () => Autocomplete,
|
|
90
|
-
AutocompleteListbox: () =>
|
|
91
|
-
AutocompleteOption: () =>
|
|
90
|
+
AutocompleteListbox: () => import_joy60.AutocompleteListbox,
|
|
91
|
+
AutocompleteOption: () => import_joy60.AutocompleteOption,
|
|
92
92
|
Avatar: () => Avatar,
|
|
93
93
|
AvatarGroup: () => import_joy11.AvatarGroup,
|
|
94
|
-
Badge: () =>
|
|
94
|
+
Badge: () => import_joy60.Badge,
|
|
95
95
|
Box: () => Box,
|
|
96
96
|
Breadcrumbs: () => Breadcrumbs,
|
|
97
97
|
Button: () => Button,
|
|
98
|
-
ButtonGroup: () =>
|
|
98
|
+
ButtonGroup: () => import_joy60.ButtonGroup,
|
|
99
99
|
Calendar: () => Calendar,
|
|
100
|
-
Card: () =>
|
|
101
|
-
CardActions: () =>
|
|
102
|
-
CardContent: () =>
|
|
103
|
-
CardCover: () =>
|
|
104
|
-
CardOverflow: () =>
|
|
100
|
+
Card: () => import_joy60.Card,
|
|
101
|
+
CardActions: () => import_joy60.CardActions,
|
|
102
|
+
CardContent: () => import_joy60.CardContent,
|
|
103
|
+
CardCover: () => import_joy60.CardCover,
|
|
104
|
+
CardOverflow: () => import_joy60.CardOverflow,
|
|
105
105
|
Checkbox: () => Checkbox,
|
|
106
|
-
Chip: () =>
|
|
107
|
-
CircularProgress: () =>
|
|
106
|
+
Chip: () => import_joy60.Chip,
|
|
107
|
+
CircularProgress: () => import_joy60.CircularProgress,
|
|
108
108
|
Container: () => Container,
|
|
109
109
|
CurrencyInput: () => CurrencyInput,
|
|
110
110
|
DataTable: () => DataTable,
|
|
@@ -127,15 +127,15 @@ __export(index_exports, {
|
|
|
127
127
|
InfoSign: () => InfoSign,
|
|
128
128
|
Input: () => Input,
|
|
129
129
|
InsetDrawer: () => InsetDrawer,
|
|
130
|
-
LinearProgress: () =>
|
|
131
|
-
Link: () =>
|
|
132
|
-
List: () =>
|
|
133
|
-
ListDivider: () =>
|
|
134
|
-
ListItem: () =>
|
|
135
|
-
ListItemButton: () =>
|
|
136
|
-
ListItemContent: () =>
|
|
137
|
-
ListItemDecorator: () =>
|
|
138
|
-
ListSubheader: () =>
|
|
130
|
+
LinearProgress: () => import_joy60.LinearProgress,
|
|
131
|
+
Link: () => import_joy60.Link,
|
|
132
|
+
List: () => import_joy60.List,
|
|
133
|
+
ListDivider: () => import_joy60.ListDivider,
|
|
134
|
+
ListItem: () => import_joy60.ListItem,
|
|
135
|
+
ListItemButton: () => import_joy60.ListItemButton,
|
|
136
|
+
ListItemContent: () => import_joy60.ListItemContent,
|
|
137
|
+
ListItemDecorator: () => import_joy60.ListItemDecorator,
|
|
138
|
+
ListSubheader: () => import_joy60.ListSubheader,
|
|
139
139
|
Markdown: () => Markdown,
|
|
140
140
|
Menu: () => Menu,
|
|
141
141
|
MenuButton: () => MenuButton,
|
|
@@ -156,14 +156,13 @@ __export(index_exports, {
|
|
|
156
156
|
Radio: () => Radio,
|
|
157
157
|
RadioGroup: () => RadioGroup,
|
|
158
158
|
RadioList: () => RadioList,
|
|
159
|
-
RadioTileGroup: () => RadioTileGroup,
|
|
160
159
|
Select: () => Select,
|
|
161
160
|
Sheet: () => Sheet,
|
|
162
|
-
Skeleton: () =>
|
|
163
|
-
Slider: () =>
|
|
161
|
+
Skeleton: () => import_joy60.Skeleton,
|
|
162
|
+
Slider: () => import_joy60.Slider,
|
|
164
163
|
Stack: () => import_joy3.Stack,
|
|
165
164
|
Step: () => Step,
|
|
166
|
-
StepButton: () =>
|
|
165
|
+
StepButton: () => import_joy60.StepButton,
|
|
167
166
|
StepIndicator: () => StepIndicator,
|
|
168
167
|
Stepper: () => Stepper,
|
|
169
168
|
Switch: () => Switch,
|
|
@@ -179,84 +178,84 @@ __export(index_exports, {
|
|
|
179
178
|
Tooltip: () => Tooltip,
|
|
180
179
|
Typography: () => Typography,
|
|
181
180
|
Uploader: () => Uploader,
|
|
182
|
-
accordionClasses: () =>
|
|
183
|
-
accordionDetailsClasses: () =>
|
|
184
|
-
accordionSummaryClasses: () =>
|
|
185
|
-
accordionsClasses: () =>
|
|
186
|
-
alertClasses: () =>
|
|
187
|
-
aspectRatioClasses: () =>
|
|
188
|
-
autocompleteClasses: () =>
|
|
189
|
-
autocompleteListboxClasses: () =>
|
|
190
|
-
autocompleteOptionClasses: () =>
|
|
191
|
-
avatarClasses: () =>
|
|
192
|
-
avatarGroupClasses: () =>
|
|
193
|
-
badgeClasses: () =>
|
|
194
|
-
boxClasses: () =>
|
|
195
|
-
breadcrumbsClasses: () =>
|
|
196
|
-
buttonClasses: () =>
|
|
197
|
-
cardActionsClasses: () =>
|
|
198
|
-
cardClasses: () =>
|
|
199
|
-
cardContentClasses: () =>
|
|
200
|
-
cardCoverClasses: () =>
|
|
201
|
-
cardOverflowClasses: () =>
|
|
202
|
-
checkboxClasses: () =>
|
|
203
|
-
chipClasses: () =>
|
|
204
|
-
circularProgressClasses: () =>
|
|
205
|
-
dialogActionsClasses: () =>
|
|
206
|
-
dialogContentClasses: () =>
|
|
207
|
-
dialogTitleClasses: () =>
|
|
208
|
-
dividerClasses: () =>
|
|
209
|
-
drawerClasses: () =>
|
|
210
|
-
extendTheme: () =>
|
|
211
|
-
formControlClasses: () =>
|
|
212
|
-
formHelperTextClasses: () =>
|
|
213
|
-
formLabelClasses: () =>
|
|
214
|
-
gridClasses: () =>
|
|
215
|
-
iconButtonClasses: () =>
|
|
216
|
-
inputClasses: () =>
|
|
217
|
-
linearProgressClasses: () =>
|
|
218
|
-
linkClasses: () =>
|
|
219
|
-
listClasses: () =>
|
|
220
|
-
listDividerClasses: () =>
|
|
221
|
-
listItemButtonClasses: () =>
|
|
222
|
-
listItemClasses: () =>
|
|
223
|
-
listItemContentClasses: () =>
|
|
224
|
-
listItemDecoratorClasses: () =>
|
|
225
|
-
listSubheaderClasses: () =>
|
|
226
|
-
menuButtonClasses: () =>
|
|
227
|
-
menuClasses: () =>
|
|
228
|
-
menuItemClasses: () =>
|
|
229
|
-
modalClasses: () =>
|
|
230
|
-
modalCloseClasses: () =>
|
|
231
|
-
modalDialogClasses: () =>
|
|
232
|
-
modalOverflowClasses: () =>
|
|
233
|
-
optionClasses: () =>
|
|
234
|
-
radioClasses: () =>
|
|
235
|
-
radioGroupClasses: () =>
|
|
236
|
-
selectClasses: () =>
|
|
237
|
-
sheetClasses: () =>
|
|
238
|
-
skeletonClasses: () =>
|
|
239
|
-
sliderClasses: () =>
|
|
240
|
-
stackClasses: () =>
|
|
241
|
-
stepButtonClasses: () =>
|
|
242
|
-
stepClasses: () =>
|
|
243
|
-
stepperClasses: () =>
|
|
244
|
-
styled: () =>
|
|
245
|
-
switchClasses: () =>
|
|
246
|
-
tabListClasses: () =>
|
|
247
|
-
tabPanelClasses: () =>
|
|
248
|
-
tableClasses: () =>
|
|
249
|
-
tabsClasses: () =>
|
|
250
|
-
textareaClasses: () =>
|
|
181
|
+
accordionClasses: () => import_joy60.accordionClasses,
|
|
182
|
+
accordionDetailsClasses: () => import_joy60.accordionDetailsClasses,
|
|
183
|
+
accordionSummaryClasses: () => import_joy60.accordionSummaryClasses,
|
|
184
|
+
accordionsClasses: () => import_joy60.accordionGroupClasses,
|
|
185
|
+
alertClasses: () => import_joy60.alertClasses,
|
|
186
|
+
aspectRatioClasses: () => import_joy60.aspectRatioClasses,
|
|
187
|
+
autocompleteClasses: () => import_joy60.autocompleteClasses,
|
|
188
|
+
autocompleteListboxClasses: () => import_joy60.autocompleteListboxClasses,
|
|
189
|
+
autocompleteOptionClasses: () => import_joy60.autocompleteOptionClasses,
|
|
190
|
+
avatarClasses: () => import_joy60.avatarClasses,
|
|
191
|
+
avatarGroupClasses: () => import_joy60.avatarGroupClasses,
|
|
192
|
+
badgeClasses: () => import_joy60.badgeClasses,
|
|
193
|
+
boxClasses: () => import_joy60.boxClasses,
|
|
194
|
+
breadcrumbsClasses: () => import_joy60.breadcrumbsClasses,
|
|
195
|
+
buttonClasses: () => import_joy60.buttonClasses,
|
|
196
|
+
cardActionsClasses: () => import_joy60.cardActionsClasses,
|
|
197
|
+
cardClasses: () => import_joy60.cardClasses,
|
|
198
|
+
cardContentClasses: () => import_joy60.cardContentClasses,
|
|
199
|
+
cardCoverClasses: () => import_joy60.cardCoverClasses,
|
|
200
|
+
cardOverflowClasses: () => import_joy60.cardOverflowClasses,
|
|
201
|
+
checkboxClasses: () => import_joy60.checkboxClasses,
|
|
202
|
+
chipClasses: () => import_joy60.chipClasses,
|
|
203
|
+
circularProgressClasses: () => import_joy60.circularProgressClasses,
|
|
204
|
+
dialogActionsClasses: () => import_joy60.dialogActionsClasses,
|
|
205
|
+
dialogContentClasses: () => import_joy60.dialogContentClasses,
|
|
206
|
+
dialogTitleClasses: () => import_joy60.dialogTitleClasses,
|
|
207
|
+
dividerClasses: () => import_joy60.dividerClasses,
|
|
208
|
+
drawerClasses: () => import_joy60.drawerClasses,
|
|
209
|
+
extendTheme: () => import_joy58.extendTheme,
|
|
210
|
+
formControlClasses: () => import_joy60.formControlClasses,
|
|
211
|
+
formHelperTextClasses: () => import_joy60.formHelperTextClasses,
|
|
212
|
+
formLabelClasses: () => import_joy60.formLabelClasses,
|
|
213
|
+
gridClasses: () => import_joy60.gridClasses,
|
|
214
|
+
iconButtonClasses: () => import_joy60.iconButtonClasses,
|
|
215
|
+
inputClasses: () => import_joy60.inputClasses,
|
|
216
|
+
linearProgressClasses: () => import_joy60.linearProgressClasses,
|
|
217
|
+
linkClasses: () => import_joy60.linkClasses,
|
|
218
|
+
listClasses: () => import_joy60.listClasses,
|
|
219
|
+
listDividerClasses: () => import_joy60.listDividerClasses,
|
|
220
|
+
listItemButtonClasses: () => import_joy60.listItemButtonClasses,
|
|
221
|
+
listItemClasses: () => import_joy60.listItemClasses,
|
|
222
|
+
listItemContentClasses: () => import_joy60.listItemContentClasses,
|
|
223
|
+
listItemDecoratorClasses: () => import_joy60.listItemDecoratorClasses,
|
|
224
|
+
listSubheaderClasses: () => import_joy60.listSubheaderClasses,
|
|
225
|
+
menuButtonClasses: () => import_joy60.menuButtonClasses,
|
|
226
|
+
menuClasses: () => import_joy60.menuClasses,
|
|
227
|
+
menuItemClasses: () => import_joy60.menuItemClasses,
|
|
228
|
+
modalClasses: () => import_joy60.modalClasses,
|
|
229
|
+
modalCloseClasses: () => import_joy60.modalCloseClasses,
|
|
230
|
+
modalDialogClasses: () => import_joy60.modalDialogClasses,
|
|
231
|
+
modalOverflowClasses: () => import_joy60.modalOverflowClasses,
|
|
232
|
+
optionClasses: () => import_joy60.optionClasses,
|
|
233
|
+
radioClasses: () => import_joy60.radioClasses,
|
|
234
|
+
radioGroupClasses: () => import_joy60.radioGroupClasses,
|
|
235
|
+
selectClasses: () => import_joy60.selectClasses,
|
|
236
|
+
sheetClasses: () => import_joy60.sheetClasses,
|
|
237
|
+
skeletonClasses: () => import_joy60.skeletonClasses,
|
|
238
|
+
sliderClasses: () => import_joy60.sliderClasses,
|
|
239
|
+
stackClasses: () => import_joy60.stackClasses,
|
|
240
|
+
stepButtonClasses: () => import_joy60.stepButtonClasses,
|
|
241
|
+
stepClasses: () => import_joy60.stepClasses,
|
|
242
|
+
stepperClasses: () => import_joy60.stepperClasses,
|
|
243
|
+
styled: () => import_joy60.styled,
|
|
244
|
+
switchClasses: () => import_joy60.switchClasses,
|
|
245
|
+
tabListClasses: () => import_joy60.tabListClasses,
|
|
246
|
+
tabPanelClasses: () => import_joy60.tabPanelClasses,
|
|
247
|
+
tableClasses: () => import_joy60.tableClasses,
|
|
248
|
+
tabsClasses: () => import_joy60.tabsClasses,
|
|
249
|
+
textareaClasses: () => import_joy60.textareaClasses,
|
|
251
250
|
theme: () => defaultTheme,
|
|
252
|
-
tooltipClasses: () =>
|
|
253
|
-
typographyClasses: () =>
|
|
254
|
-
useColorScheme: () =>
|
|
255
|
-
useTheme: () =>
|
|
256
|
-
useThemeProps: () =>
|
|
251
|
+
tooltipClasses: () => import_joy60.tooltipClasses,
|
|
252
|
+
typographyClasses: () => import_joy60.typographyClasses,
|
|
253
|
+
useColorScheme: () => import_joy60.useColorScheme,
|
|
254
|
+
useTheme: () => import_joy60.useTheme,
|
|
255
|
+
useThemeProps: () => import_joy60.useThemeProps
|
|
257
256
|
});
|
|
258
257
|
module.exports = __toCommonJS(index_exports);
|
|
259
|
-
var
|
|
258
|
+
var import_joy60 = require("@mui/joy");
|
|
260
259
|
|
|
261
260
|
// src/components/Accordions/Accordions.tsx
|
|
262
261
|
var import_react = __toESM(require("react"));
|
|
@@ -843,24 +842,11 @@ Button.displayName = "Button";
|
|
|
843
842
|
var Button_default = Button;
|
|
844
843
|
|
|
845
844
|
// src/components/Calendar/Calendar.tsx
|
|
846
|
-
var
|
|
847
|
-
var
|
|
845
|
+
var import_react13 = __toESM(require("react"));
|
|
846
|
+
var import_joy18 = require("@mui/joy");
|
|
848
847
|
var import_ChevronLeft = __toESM(require("@mui/icons-material/ChevronLeft"));
|
|
849
848
|
var import_ChevronRight = __toESM(require("@mui/icons-material/ChevronRight"));
|
|
850
|
-
var import_framer_motion13 = require("framer-motion");
|
|
851
|
-
|
|
852
|
-
// src/components/Tooltip/Tooltip.tsx
|
|
853
|
-
var import_react11 = __toESM(require("react"));
|
|
854
|
-
var import_joy17 = require("@mui/joy");
|
|
855
849
|
var import_framer_motion12 = require("framer-motion");
|
|
856
|
-
var MotionTooltip = (0, import_framer_motion12.motion)(import_joy17.Tooltip);
|
|
857
|
-
var Tooltip = (props) => {
|
|
858
|
-
return /* @__PURE__ */ import_react11.default.createElement(MotionTooltip, { ...props });
|
|
859
|
-
};
|
|
860
|
-
Tooltip.displayName = "Tooltip";
|
|
861
|
-
|
|
862
|
-
// src/components/Tooltip/index.ts
|
|
863
|
-
var Tooltip_default = Tooltip;
|
|
864
850
|
|
|
865
851
|
// src/components/Calendar/utils/index.ts
|
|
866
852
|
var getCalendarDates = (date) => {
|
|
@@ -934,43 +920,43 @@ var isSameMonth = (date1, date2) => {
|
|
|
934
920
|
};
|
|
935
921
|
|
|
936
922
|
// src/components/Calendar/hooks/use-calendar-props.ts
|
|
937
|
-
var
|
|
938
|
-
var
|
|
923
|
+
var import_react11 = require("react");
|
|
924
|
+
var import_joy17 = require("@mui/joy");
|
|
939
925
|
var resolveView = (view, views) => {
|
|
940
926
|
return views.includes(view) ? view : views[0];
|
|
941
927
|
};
|
|
942
928
|
var useCalendarProps = (inProps) => {
|
|
943
|
-
const [uncontrolledView, setUncontrolledView] = (0,
|
|
929
|
+
const [uncontrolledView, setUncontrolledView] = (0, import_react11.useState)(
|
|
944
930
|
() => resolveView(inProps.view || "day", inProps.views || ["day", "month"])
|
|
945
931
|
);
|
|
946
|
-
const [uncontrolledValue, setUncontrolledValue] = (0,
|
|
932
|
+
const [uncontrolledValue, setUncontrolledValue] = (0, import_react11.useState)(
|
|
947
933
|
inProps.defaultValue
|
|
948
934
|
);
|
|
949
|
-
const [viewMonth, setViewMonth] = (0,
|
|
935
|
+
const [viewMonth, setViewMonth] = (0, import_react11.useState)(() => {
|
|
950
936
|
const today = /* @__PURE__ */ new Date();
|
|
951
937
|
today.setDate(1);
|
|
952
938
|
today.setHours(0, 0, 0, 0);
|
|
953
939
|
return inProps.value?.[0] || inProps.defaultValue?.[0] || today;
|
|
954
940
|
});
|
|
955
|
-
const [[page, direction], setPage] = (0,
|
|
941
|
+
const [[page, direction], setPage] = (0, import_react11.useState)([0, 0]);
|
|
956
942
|
const resolvedView = inProps.view ?? uncontrolledView;
|
|
957
|
-
const resolvedMinDate = (0,
|
|
943
|
+
const resolvedMinDate = (0, import_react11.useMemo)(() => {
|
|
958
944
|
const minDate = inProps.minDate || /* @__PURE__ */ new Date(0);
|
|
959
945
|
minDate.setHours(0, 0, 0, 0);
|
|
960
946
|
return minDate;
|
|
961
947
|
}, [inProps.minDate]);
|
|
962
|
-
const resolvedMaxDate = (0,
|
|
948
|
+
const resolvedMaxDate = (0, import_react11.useMemo)(() => {
|
|
963
949
|
const maxDate = inProps.maxDate || /* @__PURE__ */ new Date(864e13);
|
|
964
950
|
maxDate.setHours(0, 0, 0, 0);
|
|
965
951
|
return maxDate;
|
|
966
952
|
}, [inProps.maxDate]);
|
|
967
|
-
const paginate = (0,
|
|
953
|
+
const paginate = (0, import_react11.useCallback)(
|
|
968
954
|
(newDirection) => {
|
|
969
955
|
setPage([page + newDirection, newDirection]);
|
|
970
956
|
},
|
|
971
957
|
[page]
|
|
972
958
|
);
|
|
973
|
-
const handleViewMonthChange = (0,
|
|
959
|
+
const handleViewMonthChange = (0, import_react11.useCallback)(
|
|
974
960
|
(newMonth) => {
|
|
975
961
|
setViewMonth(newMonth);
|
|
976
962
|
if (resolvedView === "month") {
|
|
@@ -984,7 +970,7 @@ var useCalendarProps = (inProps) => {
|
|
|
984
970
|
},
|
|
985
971
|
[resolvedView, inProps, viewMonth, paginate]
|
|
986
972
|
);
|
|
987
|
-
const props = (0,
|
|
973
|
+
const props = (0, import_joy17.useThemeProps)({
|
|
988
974
|
props: {
|
|
989
975
|
locale: "default",
|
|
990
976
|
views: ["day", "month"],
|
|
@@ -1018,18 +1004,18 @@ var useCalendarProps = (inProps) => {
|
|
|
1018
1004
|
},
|
|
1019
1005
|
name: "Calendar"
|
|
1020
1006
|
});
|
|
1021
|
-
const ownerState = (0,
|
|
1007
|
+
const ownerState = (0, import_react11.useMemo)(() => ({ ...props, viewMonth, direction }), [props, viewMonth, direction]);
|
|
1022
1008
|
return [props, ownerState];
|
|
1023
1009
|
};
|
|
1024
1010
|
|
|
1025
1011
|
// src/components/Calendar/hooks/use-calendar.ts
|
|
1026
|
-
var
|
|
1012
|
+
var import_react12 = require("react");
|
|
1027
1013
|
var useCalendar = (ownerState) => {
|
|
1028
|
-
const [hoverDay, setHoverDay] = (0,
|
|
1029
|
-
const [hoverMonth, setHoverMonth] = (0,
|
|
1014
|
+
const [hoverDay, setHoverDay] = (0, import_react12.useState)(null);
|
|
1015
|
+
const [hoverMonth, setHoverMonth] = (0, import_react12.useState)(null);
|
|
1030
1016
|
return {
|
|
1031
1017
|
calendarTitle: ownerState.view === "month" ? getYearName(ownerState.viewMonth, ownerState.locale || "default") : getMonthName(ownerState.viewMonth, ownerState.locale || "default"),
|
|
1032
|
-
onPrev: (0,
|
|
1018
|
+
onPrev: (0, import_react12.useCallback)(() => {
|
|
1033
1019
|
if (ownerState.view === "day") {
|
|
1034
1020
|
const currentDate = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
|
|
1035
1021
|
const currentYear = currentDate.getFullYear();
|
|
@@ -1046,7 +1032,7 @@ var useCalendar = (ownerState) => {
|
|
|
1046
1032
|
ownerState.onMonthChange?.(prevYear);
|
|
1047
1033
|
}
|
|
1048
1034
|
}, [ownerState.onMonthChange, ownerState.viewMonth, ownerState.view]),
|
|
1049
|
-
onNext: (0,
|
|
1035
|
+
onNext: (0, import_react12.useCallback)(() => {
|
|
1050
1036
|
if (ownerState.view === "day") {
|
|
1051
1037
|
const currentDate = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
|
|
1052
1038
|
const currentYear = currentDate.getFullYear();
|
|
@@ -1063,7 +1049,7 @@ var useCalendar = (ownerState) => {
|
|
|
1063
1049
|
ownerState.onMonthChange?.(nextYear);
|
|
1064
1050
|
}
|
|
1065
1051
|
}, [ownerState.onMonthChange, ownerState.viewMonth, ownerState.view]),
|
|
1066
|
-
getDayCellProps: (0,
|
|
1052
|
+
getDayCellProps: (0, import_react12.useCallback)(
|
|
1067
1053
|
(day) => {
|
|
1068
1054
|
const thisDay = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
|
|
1069
1055
|
thisDay.setHours(0, 0, 0, 0);
|
|
@@ -1078,7 +1064,7 @@ var useCalendar = (ownerState) => {
|
|
|
1078
1064
|
},
|
|
1079
1065
|
[ownerState.rangeSelection, ownerState.value, ownerState.viewMonth, hoverDay]
|
|
1080
1066
|
),
|
|
1081
|
-
getMonthCellProps: (0,
|
|
1067
|
+
getMonthCellProps: (0, import_react12.useCallback)(
|
|
1082
1068
|
(monthIndex) => {
|
|
1083
1069
|
const thisMonth = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
|
|
1084
1070
|
thisMonth.setDate(1);
|
|
@@ -1095,7 +1081,7 @@ var useCalendar = (ownerState) => {
|
|
|
1095
1081
|
},
|
|
1096
1082
|
[ownerState.rangeSelection, ownerState.value, ownerState.viewMonth, hoverMonth]
|
|
1097
1083
|
),
|
|
1098
|
-
getPickerDayProps: (0,
|
|
1084
|
+
getPickerDayProps: (0, import_react12.useCallback)(
|
|
1099
1085
|
(day) => {
|
|
1100
1086
|
const thisDay = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
|
|
1101
1087
|
thisDay.setHours(0, 0, 0, 0);
|
|
@@ -1149,7 +1135,7 @@ var useCalendar = (ownerState) => {
|
|
|
1149
1135
|
hoverDay
|
|
1150
1136
|
]
|
|
1151
1137
|
),
|
|
1152
|
-
getPickerMonthProps: (0,
|
|
1138
|
+
getPickerMonthProps: (0, import_react12.useCallback)(
|
|
1153
1139
|
(monthIndex) => {
|
|
1154
1140
|
const thisMonth = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
|
|
1155
1141
|
thisMonth.setDate(1);
|
|
@@ -1219,19 +1205,13 @@ var useCalendar = (ownerState) => {
|
|
|
1219
1205
|
};
|
|
1220
1206
|
|
|
1221
1207
|
// src/components/Calendar/Calendar.tsx
|
|
1222
|
-
var
|
|
1223
|
-
var MONTH_NAV_CLICK_WINDOW_MS = 1200;
|
|
1224
|
-
var MONTH_NAV_CLICK_THRESHOLD = 3;
|
|
1225
|
-
var MONTH_VIEW_HINT_DURATION_MS = 5e3;
|
|
1226
|
-
var MONTH_VIEW_HINT_COOLDOWN_MS = 3e4;
|
|
1227
|
-
var lastMonthViewAssistHintShownAt = 0;
|
|
1228
|
-
var CalendarRoot = (0, import_joy19.styled)("div", {
|
|
1208
|
+
var CalendarRoot = (0, import_joy18.styled)("div", {
|
|
1229
1209
|
name: "Calendar",
|
|
1230
1210
|
slot: "root"
|
|
1231
1211
|
})({
|
|
1232
1212
|
maxWidth: "264px"
|
|
1233
1213
|
});
|
|
1234
|
-
var CalendarHeader = (0,
|
|
1214
|
+
var CalendarHeader = (0, import_joy18.styled)("div", {
|
|
1235
1215
|
name: "Calendar",
|
|
1236
1216
|
slot: "calendarHeader"
|
|
1237
1217
|
})(({ theme }) => ({
|
|
@@ -1240,7 +1220,7 @@ var CalendarHeader = (0, import_joy19.styled)("div", {
|
|
|
1240
1220
|
alignItems: "center",
|
|
1241
1221
|
padding: theme.spacing(2)
|
|
1242
1222
|
}));
|
|
1243
|
-
var CalendarViewContainer = (0,
|
|
1223
|
+
var CalendarViewContainer = (0, import_joy18.styled)("div", {
|
|
1244
1224
|
name: "Calendar",
|
|
1245
1225
|
slot: "viewContainer",
|
|
1246
1226
|
shouldForwardProp: (prop) => prop !== "calendarType"
|
|
@@ -1251,7 +1231,7 @@ var CalendarViewContainer = (0, import_joy19.styled)("div", {
|
|
|
1251
1231
|
overflow: "hidden",
|
|
1252
1232
|
minHeight: calendarType === "datePicker" ? "250px" : "unset"
|
|
1253
1233
|
}));
|
|
1254
|
-
var CalendarViewTable = (0,
|
|
1234
|
+
var CalendarViewTable = (0, import_joy18.styled)(import_framer_motion12.motion.table, {
|
|
1255
1235
|
name: "Calendar",
|
|
1256
1236
|
slot: "viewTable"
|
|
1257
1237
|
})(({ theme }) => ({
|
|
@@ -1264,15 +1244,15 @@ var CalendarViewTable = (0, import_joy19.styled)(import_framer_motion13.motion.t
|
|
|
1264
1244
|
paddingBottom: theme.spacing(2)
|
|
1265
1245
|
}
|
|
1266
1246
|
}));
|
|
1267
|
-
var CalendarWeekHeaderContainer = (0,
|
|
1247
|
+
var CalendarWeekHeaderContainer = (0, import_joy18.styled)("thead", {
|
|
1268
1248
|
name: "Calendar",
|
|
1269
1249
|
slot: "weekHeaderContainer"
|
|
1270
1250
|
})({});
|
|
1271
|
-
var CalendarDayPickerContainer = (0,
|
|
1251
|
+
var CalendarDayPickerContainer = (0, import_joy18.styled)("tbody", {
|
|
1272
1252
|
name: "Calendar",
|
|
1273
1253
|
slot: "dayPickerContainer"
|
|
1274
1254
|
})({});
|
|
1275
|
-
var CalendarSwitchViewButton = (0,
|
|
1255
|
+
var CalendarSwitchViewButton = (0, import_joy18.styled)(Button_default, {
|
|
1276
1256
|
name: "Calendar",
|
|
1277
1257
|
slot: "switchViewButton"
|
|
1278
1258
|
})(({ ownerState }) => [
|
|
@@ -1280,7 +1260,7 @@ var CalendarSwitchViewButton = (0, import_joy19.styled)(Button_default, {
|
|
|
1280
1260
|
pointerEvents: "none"
|
|
1281
1261
|
}
|
|
1282
1262
|
]);
|
|
1283
|
-
var CalendarDayCell = (0,
|
|
1263
|
+
var CalendarDayCell = (0, import_joy18.styled)("td", {
|
|
1284
1264
|
name: "Calendar",
|
|
1285
1265
|
slot: "dayCell"
|
|
1286
1266
|
})(({ theme }) => ({
|
|
@@ -1302,7 +1282,7 @@ var CalendarDayCell = (0, import_joy19.styled)("td", {
|
|
|
1302
1282
|
}
|
|
1303
1283
|
}
|
|
1304
1284
|
}));
|
|
1305
|
-
var CalendarMonthCell = (0,
|
|
1285
|
+
var CalendarMonthCell = (0, import_joy18.styled)("td", {
|
|
1306
1286
|
name: "Calendar",
|
|
1307
1287
|
slot: "monthCell"
|
|
1308
1288
|
})(({ theme }) => ({
|
|
@@ -1324,7 +1304,7 @@ var CalendarMonthCell = (0, import_joy19.styled)("td", {
|
|
|
1324
1304
|
}
|
|
1325
1305
|
}
|
|
1326
1306
|
}));
|
|
1327
|
-
var CalendarMonth = (0,
|
|
1307
|
+
var CalendarMonth = (0, import_joy18.styled)(Button_default, {
|
|
1328
1308
|
name: "Calendar",
|
|
1329
1309
|
slot: "month",
|
|
1330
1310
|
shouldForwardProp: (prop) => prop !== "isSelected"
|
|
@@ -1359,7 +1339,7 @@ var CalendarMonth = (0, import_joy19.styled)(Button_default, {
|
|
|
1359
1339
|
backgroundColor: theme.palette.neutral.solidDisabledBg
|
|
1360
1340
|
}
|
|
1361
1341
|
]);
|
|
1362
|
-
var CalendarDay = (0,
|
|
1342
|
+
var CalendarDay = (0, import_joy18.styled)(Button_default, {
|
|
1363
1343
|
name: "Calendar",
|
|
1364
1344
|
slot: "day",
|
|
1365
1345
|
shouldForwardProp: (prop) => !["isToday", "isSelected"].includes(prop)
|
|
@@ -1429,9 +1409,9 @@ var swipePower = (offset, velocity) => {
|
|
|
1429
1409
|
var PickerDays = (props) => {
|
|
1430
1410
|
const { ownerState } = props;
|
|
1431
1411
|
const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
|
|
1432
|
-
const calendarDates = (0,
|
|
1433
|
-
const weekdayNames = (0,
|
|
1434
|
-
return /* @__PURE__ */
|
|
1412
|
+
const calendarDates = (0, import_react13.useMemo)(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
|
|
1413
|
+
const weekdayNames = (0, import_react13.useMemo)(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
|
|
1414
|
+
return /* @__PURE__ */ import_react13.default.createElement(CalendarViewContainer, { calendarType: "datePicker" }, /* @__PURE__ */ import_react13.default.createElement(import_framer_motion12.AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ import_react13.default.createElement(
|
|
1435
1415
|
CalendarViewTable,
|
|
1436
1416
|
{
|
|
1437
1417
|
key: `${ownerState.viewMonth.toString()}_${ownerState.direction}`,
|
|
@@ -1460,10 +1440,10 @@ var PickerDays = (props) => {
|
|
|
1460
1440
|
}
|
|
1461
1441
|
}
|
|
1462
1442
|
},
|
|
1463
|
-
/* @__PURE__ */
|
|
1464
|
-
/* @__PURE__ */
|
|
1465
|
-
(date, i) => date ? /* @__PURE__ */
|
|
1466
|
-
)), rowIndex < calendarDates.length - 1 && /* @__PURE__ */
|
|
1443
|
+
/* @__PURE__ */ import_react13.default.createElement(CalendarWeekHeaderContainer, null, /* @__PURE__ */ import_react13.default.createElement("tr", null, weekdayNames.map((name, i) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` }, /* @__PURE__ */ import_react13.default.createElement("th", null, /* @__PURE__ */ import_react13.default.createElement(Typography_default, { level: "body-xs", textAlign: "center" }, name)), i < 6 && /* @__PURE__ */ import_react13.default.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" }))))),
|
|
1444
|
+
/* @__PURE__ */ import_react13.default.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ import_react13.default.createElement("tr", null, weekDates.map(
|
|
1445
|
+
(date, i) => date ? /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ import_react13.default.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ import_react13.default.createElement(CalendarDay, { size: "sm", variant: "plain", color: "neutral", ...getPickerDayProps(date) }, date)), i < 6 && /* @__PURE__ */ import_react13.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ import_react13.default.createElement("td", null), i < 6 && /* @__PURE__ */ import_react13.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
|
|
1446
|
+
)), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ import_react13.default.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ import_react13.default.createElement("td", { colSpan: 13, style: { height: 4 } })))))
|
|
1467
1447
|
)));
|
|
1468
1448
|
};
|
|
1469
1449
|
var PickerMonths = (props) => {
|
|
@@ -1480,7 +1460,7 @@ var PickerMonths = (props) => {
|
|
|
1480
1460
|
[[]]
|
|
1481
1461
|
);
|
|
1482
1462
|
const isMonthPicker = !ownerState.views?.find((view) => view === "day");
|
|
1483
|
-
return /* @__PURE__ */
|
|
1463
|
+
return /* @__PURE__ */ import_react13.default.createElement(CalendarViewContainer, { calendarType: isMonthPicker ? "monthPicker" : "datePicker" }, /* @__PURE__ */ import_react13.default.createElement(import_framer_motion12.AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ import_react13.default.createElement(
|
|
1484
1464
|
CalendarViewTable,
|
|
1485
1465
|
{
|
|
1486
1466
|
key: `${ownerState.viewMonth.getFullYear()}_${ownerState.direction}`,
|
|
@@ -1509,10 +1489,10 @@ var PickerMonths = (props) => {
|
|
|
1509
1489
|
}
|
|
1510
1490
|
}
|
|
1511
1491
|
},
|
|
1512
|
-
/* @__PURE__ */
|
|
1492
|
+
/* @__PURE__ */ import_react13.default.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: months.join("_") }, /* @__PURE__ */ import_react13.default.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: monthIndex }, /* @__PURE__ */ import_react13.default.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ import_react13.default.createElement(CalendarMonth, { size: "sm", variant: "plain", color: "neutral", ...getPickerMonthProps(monthIndex) }, getMonthNameFromIndex(monthIndex, ownerState.locale))), j < 3 && /* @__PURE__ */ import_react13.default.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))), i < chunkedMonths.length - 1 && /* @__PURE__ */ import_react13.default.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ import_react13.default.createElement("td", { colSpan: 7, style: { height: 4 } })))))
|
|
1513
1493
|
)));
|
|
1514
1494
|
};
|
|
1515
|
-
var Calendar = (0,
|
|
1495
|
+
var Calendar = (0, import_react13.forwardRef)((inProps, ref) => {
|
|
1516
1496
|
const [props, ownerState] = useCalendarProps(inProps);
|
|
1517
1497
|
const {
|
|
1518
1498
|
value,
|
|
@@ -1531,96 +1511,17 @@ var Calendar = (0, import_react14.forwardRef)((inProps, ref) => {
|
|
|
1531
1511
|
...others
|
|
1532
1512
|
} = props;
|
|
1533
1513
|
const { calendarTitle, onPrev, onNext } = useCalendar(ownerState);
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
const monthViewAssistHintShownInSessionRef = (0, import_react14.useRef)(false);
|
|
1537
|
-
const monthViewAssistHintTimeoutRef = (0, import_react14.useRef)(null);
|
|
1538
|
-
const hasEndDate = Boolean(value?.[1]);
|
|
1539
|
-
const isRangeHintEligible = Boolean(rangeSelection && !hasEndDate);
|
|
1540
|
-
const isHintEligible = Boolean(view === "day" && (!rangeSelection || isRangeHintEligible));
|
|
1541
|
-
const monthViewHintMessage = MONTH_VIEW_HINT_MESSAGE;
|
|
1542
|
-
(0, import_react14.useEffect)(() => {
|
|
1543
|
-
if (!isHintEligible) {
|
|
1544
|
-
monthNavClickTimestampsRef.current = [];
|
|
1545
|
-
setIsMonthViewAssistHintOpen(false);
|
|
1546
|
-
}
|
|
1547
|
-
}, [isHintEligible]);
|
|
1548
|
-
(0, import_react14.useEffect)(() => {
|
|
1549
|
-
return () => {
|
|
1550
|
-
if (monthViewAssistHintTimeoutRef.current) {
|
|
1551
|
-
clearTimeout(monthViewAssistHintTimeoutRef.current);
|
|
1552
|
-
}
|
|
1553
|
-
};
|
|
1554
|
-
}, []);
|
|
1555
|
-
const closeMonthViewAssistHint = (0, import_react14.useCallback)(() => {
|
|
1556
|
-
if (monthViewAssistHintTimeoutRef.current) {
|
|
1557
|
-
clearTimeout(monthViewAssistHintTimeoutRef.current);
|
|
1558
|
-
monthViewAssistHintTimeoutRef.current = null;
|
|
1559
|
-
}
|
|
1560
|
-
setIsMonthViewAssistHintOpen(false);
|
|
1561
|
-
}, []);
|
|
1562
|
-
const showMonthViewAssistHint = (0, import_react14.useCallback)(() => {
|
|
1563
|
-
const now = Date.now();
|
|
1564
|
-
if (monthViewAssistHintShownInSessionRef.current) return;
|
|
1565
|
-
if (now - lastMonthViewAssistHintShownAt < MONTH_VIEW_HINT_COOLDOWN_MS) return;
|
|
1566
|
-
monthViewAssistHintShownInSessionRef.current = true;
|
|
1567
|
-
lastMonthViewAssistHintShownAt = now;
|
|
1568
|
-
setIsMonthViewAssistHintOpen(true);
|
|
1569
|
-
if (monthViewAssistHintTimeoutRef.current) {
|
|
1570
|
-
clearTimeout(monthViewAssistHintTimeoutRef.current);
|
|
1571
|
-
}
|
|
1572
|
-
monthViewAssistHintTimeoutRef.current = setTimeout(() => {
|
|
1573
|
-
setIsMonthViewAssistHintOpen(false);
|
|
1574
|
-
monthViewAssistHintTimeoutRef.current = null;
|
|
1575
|
-
}, MONTH_VIEW_HINT_DURATION_MS);
|
|
1576
|
-
}, []);
|
|
1577
|
-
const trackFastMonthNavigation = (0, import_react14.useCallback)(() => {
|
|
1578
|
-
if (!isHintEligible) return;
|
|
1579
|
-
const now = Date.now();
|
|
1580
|
-
monthNavClickTimestampsRef.current = [
|
|
1581
|
-
...monthNavClickTimestampsRef.current.filter((timestamp) => now - timestamp <= MONTH_NAV_CLICK_WINDOW_MS),
|
|
1582
|
-
now
|
|
1583
|
-
];
|
|
1584
|
-
if (monthNavClickTimestampsRef.current.length >= MONTH_NAV_CLICK_THRESHOLD) {
|
|
1585
|
-
showMonthViewAssistHint();
|
|
1586
|
-
}
|
|
1587
|
-
}, [isHintEligible, showMonthViewAssistHint]);
|
|
1588
|
-
const handlePrevClick = (0, import_react14.useCallback)(() => {
|
|
1589
|
-
onPrev();
|
|
1590
|
-
trackFastMonthNavigation();
|
|
1591
|
-
}, [onPrev, trackFastMonthNavigation]);
|
|
1592
|
-
const handleNextClick = (0, import_react14.useCallback)(() => {
|
|
1593
|
-
onNext();
|
|
1594
|
-
trackFastMonthNavigation();
|
|
1595
|
-
}, [onNext, trackFastMonthNavigation]);
|
|
1596
|
-
const handleSwitchViewClick = (0, import_react14.useCallback)(() => {
|
|
1597
|
-
closeMonthViewAssistHint();
|
|
1598
|
-
onViewChange?.();
|
|
1599
|
-
}, [closeMonthViewAssistHint, onViewChange]);
|
|
1600
|
-
return /* @__PURE__ */ import_react14.default.createElement(CalendarRoot, { ref, ...others }, /* @__PURE__ */ import_react14.default.createElement(CalendarHeader, null, /* @__PURE__ */ import_react14.default.createElement(IconButton_default, { size: "sm", onClick: handlePrevClick, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ import_react14.default.createElement(import_ChevronLeft.default, null)), /* @__PURE__ */ import_react14.default.createElement(
|
|
1601
|
-
Tooltip_default,
|
|
1514
|
+
return /* @__PURE__ */ import_react13.default.createElement(CalendarRoot, { ref, ...others }, /* @__PURE__ */ import_react13.default.createElement(CalendarHeader, null, /* @__PURE__ */ import_react13.default.createElement(IconButton_default, { size: "sm", onClick: onPrev, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ import_react13.default.createElement(import_ChevronLeft.default, null)), /* @__PURE__ */ import_react13.default.createElement(
|
|
1515
|
+
CalendarSwitchViewButton,
|
|
1602
1516
|
{
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
disableHoverListener: true,
|
|
1609
|
-
disableTouchListener: true,
|
|
1610
|
-
variant: "solid"
|
|
1517
|
+
ownerState,
|
|
1518
|
+
variant: "plain",
|
|
1519
|
+
color: "neutral",
|
|
1520
|
+
onClick: onViewChange,
|
|
1521
|
+
"aria-label": "Switch Calendar View"
|
|
1611
1522
|
},
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
{
|
|
1615
|
-
ownerState,
|
|
1616
|
-
variant: "plain",
|
|
1617
|
-
color: "neutral",
|
|
1618
|
-
onClick: handleSwitchViewClick,
|
|
1619
|
-
"aria-label": "Switch Calendar View"
|
|
1620
|
-
},
|
|
1621
|
-
calendarTitle
|
|
1622
|
-
)
|
|
1623
|
-
), /* @__PURE__ */ import_react14.default.createElement(IconButton_default, { size: "sm", onClick: handleNextClick, "aria-label": `Next ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ import_react14.default.createElement(import_ChevronRight.default, null))), view === "day" && /* @__PURE__ */ import_react14.default.createElement(PickerDays, { ownerState }), view === "month" && /* @__PURE__ */ import_react14.default.createElement(PickerMonths, { ownerState }));
|
|
1523
|
+
calendarTitle
|
|
1524
|
+
), /* @__PURE__ */ import_react13.default.createElement(IconButton_default, { size: "sm", onClick: onNext, "aria-label": `Next ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ import_react13.default.createElement(import_ChevronRight.default, null))), view === "day" && /* @__PURE__ */ import_react13.default.createElement(PickerDays, { ownerState }), view === "month" && /* @__PURE__ */ import_react13.default.createElement(PickerMonths, { ownerState }));
|
|
1624
1525
|
});
|
|
1625
1526
|
Calendar.displayName = "Calendar";
|
|
1626
1527
|
|
|
@@ -1628,31 +1529,31 @@ Calendar.displayName = "Calendar";
|
|
|
1628
1529
|
var Calendar_default = Calendar;
|
|
1629
1530
|
|
|
1630
1531
|
// src/components/Card/Card.tsx
|
|
1631
|
-
var
|
|
1632
|
-
var
|
|
1633
|
-
var MotionCard = (0,
|
|
1532
|
+
var import_joy19 = require("@mui/joy");
|
|
1533
|
+
var import_framer_motion13 = require("framer-motion");
|
|
1534
|
+
var MotionCard = (0, import_framer_motion13.motion)(import_joy19.Card);
|
|
1634
1535
|
var Card = MotionCard;
|
|
1635
1536
|
Card.displayName = "Card";
|
|
1636
|
-
var MotionCardContent = (0,
|
|
1537
|
+
var MotionCardContent = (0, import_framer_motion13.motion)(import_joy19.CardContent);
|
|
1637
1538
|
var CardContent = MotionCardContent;
|
|
1638
1539
|
CardContent.displayName = "CardContent";
|
|
1639
|
-
var MotionCardCover = (0,
|
|
1540
|
+
var MotionCardCover = (0, import_framer_motion13.motion)(import_joy19.CardCover);
|
|
1640
1541
|
var CardCover = MotionCardCover;
|
|
1641
1542
|
CardCover.displayName = "CardCover";
|
|
1642
|
-
var MotionCardActions = (0,
|
|
1543
|
+
var MotionCardActions = (0, import_framer_motion13.motion)(import_joy19.CardActions);
|
|
1643
1544
|
var CardActions = MotionCardActions;
|
|
1644
1545
|
CardActions.displayName = "CardActions";
|
|
1645
|
-
var MotionCardOverflow = (0,
|
|
1546
|
+
var MotionCardOverflow = (0, import_framer_motion13.motion)(import_joy19.CardOverflow);
|
|
1646
1547
|
var CardOverflow = MotionCardOverflow;
|
|
1647
1548
|
CardOverflow.displayName = "CardOverflow";
|
|
1648
1549
|
|
|
1649
1550
|
// src/components/Checkbox/Checkbox.tsx
|
|
1650
|
-
var
|
|
1651
|
-
var
|
|
1652
|
-
var
|
|
1653
|
-
var MotionCheckbox = (0,
|
|
1551
|
+
var import_react14 = __toESM(require("react"));
|
|
1552
|
+
var import_joy20 = require("@mui/joy");
|
|
1553
|
+
var import_framer_motion14 = require("framer-motion");
|
|
1554
|
+
var MotionCheckbox = (0, import_framer_motion14.motion)(import_joy20.Checkbox);
|
|
1654
1555
|
var Checkbox = (props) => {
|
|
1655
|
-
return /* @__PURE__ */
|
|
1556
|
+
return /* @__PURE__ */ import_react14.default.createElement(MotionCheckbox, { ...props });
|
|
1656
1557
|
};
|
|
1657
1558
|
Checkbox.displayName = "Checkbox";
|
|
1658
1559
|
|
|
@@ -1660,9 +1561,9 @@ Checkbox.displayName = "Checkbox";
|
|
|
1660
1561
|
var Checkbox_default = Checkbox;
|
|
1661
1562
|
|
|
1662
1563
|
// src/components/Container/Container.tsx
|
|
1663
|
-
var
|
|
1664
|
-
var
|
|
1665
|
-
var ContainerRoot = (0,
|
|
1564
|
+
var import_joy21 = require("@mui/joy");
|
|
1565
|
+
var import_react15 = __toESM(require("react"));
|
|
1566
|
+
var ContainerRoot = (0, import_joy21.styled)("div", {
|
|
1666
1567
|
name: "Container",
|
|
1667
1568
|
slot: "root",
|
|
1668
1569
|
shouldForwardProp: (prop) => prop !== "maxWidth" && prop !== "overrideBreakpoint"
|
|
@@ -1687,24 +1588,25 @@ var ContainerRoot = (0, import_joy22.styled)("div", {
|
|
|
1687
1588
|
paddingRight: theme.breakpoints.values[overrideBreakpoint] >= theme.breakpoints.values.lg ? theme.spacing(8) : theme.spacing(4)
|
|
1688
1589
|
} : null
|
|
1689
1590
|
]);
|
|
1690
|
-
var Container = (0,
|
|
1691
|
-
return /* @__PURE__ */
|
|
1591
|
+
var Container = (0, import_react15.forwardRef)(function Container2(props, ref) {
|
|
1592
|
+
return /* @__PURE__ */ import_react15.default.createElement(ContainerRoot, { ref, ...props });
|
|
1692
1593
|
});
|
|
1693
1594
|
Container.displayName = "Container";
|
|
1694
1595
|
|
|
1695
1596
|
// src/components/CurrencyInput/CurrencyInput.tsx
|
|
1696
|
-
var
|
|
1597
|
+
var import_react17 = __toESM(require("react"));
|
|
1598
|
+
var import_intl_messageformat2 = require("intl-messageformat");
|
|
1697
1599
|
var import_react_number_format = require("react-number-format");
|
|
1698
1600
|
|
|
1699
1601
|
// src/components/Input/Input.tsx
|
|
1700
|
-
var
|
|
1701
|
-
var
|
|
1702
|
-
var
|
|
1602
|
+
var import_react16 = __toESM(require("react"));
|
|
1603
|
+
var import_joy22 = require("@mui/joy");
|
|
1604
|
+
var import_framer_motion15 = require("framer-motion");
|
|
1703
1605
|
var import_Close2 = __toESM(require("@mui/icons-material/Close"));
|
|
1704
1606
|
var import_Visibility = __toESM(require("@mui/icons-material/Visibility"));
|
|
1705
1607
|
var import_VisibilityOff = __toESM(require("@mui/icons-material/VisibilityOff"));
|
|
1706
|
-
var MotionInput = (0,
|
|
1707
|
-
var Input =
|
|
1608
|
+
var MotionInput = (0, import_framer_motion15.motion)(import_joy22.Input);
|
|
1609
|
+
var Input = import_react16.default.forwardRef((props, ref) => {
|
|
1708
1610
|
const {
|
|
1709
1611
|
label,
|
|
1710
1612
|
helperText,
|
|
@@ -1727,11 +1629,11 @@ var Input = import_react17.default.forwardRef((props, ref) => {
|
|
|
1727
1629
|
if (type === "password" && innerProps.endDecorator) {
|
|
1728
1630
|
console.warn('Input: endDecorator is not supported when type="password"');
|
|
1729
1631
|
}
|
|
1730
|
-
const [passwordVisible, setPasswordVisible] = (0,
|
|
1632
|
+
const [passwordVisible, setPasswordVisible] = (0, import_react16.useState)(false);
|
|
1731
1633
|
const [value, setValue] = useControlledState(
|
|
1732
1634
|
props.value,
|
|
1733
1635
|
props.defaultValue,
|
|
1734
|
-
(0,
|
|
1636
|
+
(0, import_react16.useCallback)(
|
|
1735
1637
|
(value2) => {
|
|
1736
1638
|
onChange?.({
|
|
1737
1639
|
/**
|
|
@@ -1757,7 +1659,7 @@ var Input = import_react17.default.forwardRef((props, ref) => {
|
|
|
1757
1659
|
const actualType = type === "password" && passwordVisible ? "text" : type;
|
|
1758
1660
|
const isPasswordType = type === "password";
|
|
1759
1661
|
const showPasswordToggle = isPasswordType && !disableTogglePasswordButton;
|
|
1760
|
-
const input = /* @__PURE__ */
|
|
1662
|
+
const input = /* @__PURE__ */ import_react16.default.createElement(
|
|
1761
1663
|
MotionInput,
|
|
1762
1664
|
{
|
|
1763
1665
|
value,
|
|
@@ -1772,7 +1674,7 @@ var Input = import_react17.default.forwardRef((props, ref) => {
|
|
|
1772
1674
|
...innerProps.slotProps
|
|
1773
1675
|
},
|
|
1774
1676
|
...innerProps,
|
|
1775
|
-
endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */
|
|
1677
|
+
endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */ import_react16.default.createElement(Stack_default, { gap: 1, direction: "row" }, /* @__PURE__ */ import_react16.default.createElement(
|
|
1776
1678
|
IconButton_default,
|
|
1777
1679
|
{
|
|
1778
1680
|
onMouseDown: (e) => e.preventDefault(),
|
|
@@ -1780,19 +1682,19 @@ var Input = import_react17.default.forwardRef((props, ref) => {
|
|
|
1780
1682
|
disabled,
|
|
1781
1683
|
"aria-label": passwordVisible ? "Hide password" : "Show password"
|
|
1782
1684
|
},
|
|
1783
|
-
passwordVisible ? /* @__PURE__ */
|
|
1784
|
-
)) : null : enableClearable ? /* @__PURE__ */
|
|
1685
|
+
passwordVisible ? /* @__PURE__ */ import_react16.default.createElement(import_VisibilityOff.default, null) : /* @__PURE__ */ import_react16.default.createElement(import_Visibility.default, null)
|
|
1686
|
+
)) : null : enableClearable ? /* @__PURE__ */ import_react16.default.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ import_react16.default.createElement(
|
|
1785
1687
|
IconButton_default,
|
|
1786
1688
|
{
|
|
1787
1689
|
onMouseDown: (e) => e.preventDefault(),
|
|
1788
1690
|
onClick: handleClear,
|
|
1789
1691
|
"aria-label": "Clear"
|
|
1790
1692
|
},
|
|
1791
|
-
/* @__PURE__ */
|
|
1693
|
+
/* @__PURE__ */ import_react16.default.createElement(import_Close2.default, null)
|
|
1792
1694
|
)) : innerProps.endDecorator
|
|
1793
1695
|
}
|
|
1794
1696
|
);
|
|
1795
|
-
return /* @__PURE__ */
|
|
1697
|
+
return /* @__PURE__ */ import_react16.default.createElement(
|
|
1796
1698
|
FormControl_default,
|
|
1797
1699
|
{
|
|
1798
1700
|
required,
|
|
@@ -1803,9 +1705,9 @@ var Input = import_react17.default.forwardRef((props, ref) => {
|
|
|
1803
1705
|
sx,
|
|
1804
1706
|
className
|
|
1805
1707
|
},
|
|
1806
|
-
label && /* @__PURE__ */
|
|
1708
|
+
label && /* @__PURE__ */ import_react16.default.createElement(FormLabel_default, null, label),
|
|
1807
1709
|
input,
|
|
1808
|
-
helperText && /* @__PURE__ */
|
|
1710
|
+
helperText && /* @__PURE__ */ import_react16.default.createElement(FormHelperText_default, null, helperText)
|
|
1809
1711
|
);
|
|
1810
1712
|
});
|
|
1811
1713
|
Input.displayName = "Input";
|
|
@@ -1814,9 +1716,10 @@ Input.displayName = "Input";
|
|
|
1814
1716
|
var Input_default = Input;
|
|
1815
1717
|
|
|
1816
1718
|
// src/components/CurrencyInput/CurrencyInput.tsx
|
|
1817
|
-
var
|
|
1719
|
+
var import_joy23 = require("@mui/joy");
|
|
1818
1720
|
|
|
1819
1721
|
// src/components/CurrencyInput/hooks/use-currency-setting.ts
|
|
1722
|
+
var import_intl_messageformat = __toESM(require("intl-messageformat"));
|
|
1820
1723
|
var CURRENCY_DECIMAL_MAP = {
|
|
1821
1724
|
AED: 2,
|
|
1822
1725
|
ALL: 2,
|
|
@@ -1961,10 +1864,9 @@ var CURRENCY_DECIMAL_MAP = {
|
|
|
1961
1864
|
};
|
|
1962
1865
|
var useCurrencySetting = (props) => {
|
|
1963
1866
|
const { currency = "USD", placeholder } = props;
|
|
1964
|
-
const
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
const decimalSeparator = parts.find((p) => p.type === "decimal")?.value;
|
|
1867
|
+
const [symbol, thousandSeparator, decimalSeparator, ...rest] = new import_intl_messageformat.default(
|
|
1868
|
+
`{amount, number, ::currency/${currency} unit-width-narrow}`
|
|
1869
|
+
).format({ amount: 1e3 }).toString().replace(/\d/g, "").split("");
|
|
1968
1870
|
const decimalScale = CURRENCY_DECIMAL_MAP[currency];
|
|
1969
1871
|
return {
|
|
1970
1872
|
symbol: `${symbol} `,
|
|
@@ -1977,9 +1879,9 @@ var useCurrencySetting = (props) => {
|
|
|
1977
1879
|
};
|
|
1978
1880
|
|
|
1979
1881
|
// src/components/CurrencyInput/CurrencyInput.tsx
|
|
1980
|
-
var TextMaskAdapter =
|
|
1882
|
+
var TextMaskAdapter = import_react17.default.forwardRef(function TextMaskAdapter2(props, ref) {
|
|
1981
1883
|
const { onChange, ...innerProps } = props;
|
|
1982
|
-
return /* @__PURE__ */
|
|
1884
|
+
return /* @__PURE__ */ import_react17.default.createElement(
|
|
1983
1885
|
import_react_number_format.NumericFormat,
|
|
1984
1886
|
{
|
|
1985
1887
|
...innerProps,
|
|
@@ -1994,13 +1896,13 @@ var TextMaskAdapter = import_react18.default.forwardRef(function TextMaskAdapter
|
|
|
1994
1896
|
}
|
|
1995
1897
|
);
|
|
1996
1898
|
});
|
|
1997
|
-
var CurrencyInputRoot = (0,
|
|
1899
|
+
var CurrencyInputRoot = (0, import_joy23.styled)(Input_default, {
|
|
1998
1900
|
name: "CurrencyInput",
|
|
1999
1901
|
slot: "root",
|
|
2000
1902
|
overridesResolver: (props, styles) => styles.root
|
|
2001
1903
|
})({});
|
|
2002
|
-
var CurrencyInput =
|
|
2003
|
-
const props = (0,
|
|
1904
|
+
var CurrencyInput = import_react17.default.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
1905
|
+
const props = (0, import_joy23.useThemeProps)({ props: inProps, name: "CurrencyInput" });
|
|
2004
1906
|
const {
|
|
2005
1907
|
currency = "USD",
|
|
2006
1908
|
name,
|
|
@@ -2020,28 +1922,28 @@ var CurrencyInput = import_react18.default.forwardRef(function CurrencyInput2(in
|
|
|
2020
1922
|
const [_value, setValue] = useControlledState(
|
|
2021
1923
|
props.value,
|
|
2022
1924
|
props.defaultValue,
|
|
2023
|
-
(0,
|
|
1925
|
+
(0, import_react17.useCallback)((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
|
|
2024
1926
|
);
|
|
2025
|
-
const value = (0,
|
|
1927
|
+
const value = (0, import_react17.useMemo)(() => {
|
|
2026
1928
|
if (_value && useMinorUnit) {
|
|
2027
1929
|
return _value / Math.pow(10, decimalScale);
|
|
2028
1930
|
}
|
|
2029
1931
|
return _value;
|
|
2030
1932
|
}, [_value, useMinorUnit, decimalScale]);
|
|
2031
|
-
const max = (0,
|
|
1933
|
+
const max = (0, import_react17.useMemo)(() => {
|
|
2032
1934
|
if (props.max && useMinorUnit) {
|
|
2033
1935
|
return props.max / Math.pow(10, decimalScale);
|
|
2034
1936
|
}
|
|
2035
1937
|
return props.max;
|
|
2036
1938
|
}, [props.max, useMinorUnit, decimalScale]);
|
|
2037
|
-
const [isOverLimit, setIsOverLimit] = (0,
|
|
2038
|
-
const handleChange = (0,
|
|
1939
|
+
const [isOverLimit, setIsOverLimit] = (0, import_react17.useState)(!!max && !!value && value > max);
|
|
1940
|
+
const handleChange = (0, import_react17.useCallback)(
|
|
2039
1941
|
(event) => {
|
|
2040
1942
|
if (event.target.value === "") {
|
|
2041
1943
|
setValue(void 0);
|
|
2042
1944
|
return;
|
|
2043
1945
|
}
|
|
2044
|
-
const amount = useMinorUnit ? Number(
|
|
1946
|
+
const amount = useMinorUnit ? Number(event.target.value?.replace(decimalSeparator, "")) : Number(event.target.value);
|
|
2045
1947
|
if (!!max && Number(event.target.value) > max) {
|
|
2046
1948
|
setIsOverLimit(true);
|
|
2047
1949
|
} else {
|
|
@@ -2051,7 +1953,7 @@ var CurrencyInput = import_react18.default.forwardRef(function CurrencyInput2(in
|
|
|
2051
1953
|
},
|
|
2052
1954
|
[decimalSeparator, max, useMinorUnit, setValue]
|
|
2053
1955
|
);
|
|
2054
|
-
return /* @__PURE__ */
|
|
1956
|
+
return /* @__PURE__ */ import_react17.default.createElement(
|
|
2055
1957
|
CurrencyInputRoot,
|
|
2056
1958
|
{
|
|
2057
1959
|
...innerProps,
|
|
@@ -2064,7 +1966,9 @@ var CurrencyInput = import_react18.default.forwardRef(function CurrencyInput2(in
|
|
|
2064
1966
|
required,
|
|
2065
1967
|
color: error || isOverLimit ? "danger" : props.color,
|
|
2066
1968
|
label,
|
|
2067
|
-
helperText: isOverLimit ? `limit:
|
|
1969
|
+
helperText: isOverLimit ? new import_intl_messageformat2.IntlMessageFormat(`limit: {amount, number, ::currency/${currency} unit-width-narrow}`).format({
|
|
1970
|
+
amount: max
|
|
1971
|
+
}) : helperText,
|
|
2068
1972
|
slotProps: {
|
|
2069
1973
|
input: {
|
|
2070
1974
|
component: TextMaskAdapter,
|
|
@@ -2211,11 +2115,11 @@ function getTextAlign(props) {
|
|
|
2211
2115
|
var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
|
|
2212
2116
|
|
|
2213
2117
|
// src/components/DataTable/styled.tsx
|
|
2214
|
-
var
|
|
2215
|
-
var
|
|
2216
|
-
var
|
|
2118
|
+
var import_react18 = __toESM(require("react"));
|
|
2119
|
+
var import_joy24 = require("@mui/joy");
|
|
2120
|
+
var import_framer_motion16 = require("framer-motion");
|
|
2217
2121
|
var import_ArrowUpwardRounded = __toESM(require("@mui/icons-material/ArrowUpwardRounded"));
|
|
2218
|
-
var EllipsisDiv = (0,
|
|
2122
|
+
var EllipsisDiv = (0, import_joy24.styled)("div", {
|
|
2219
2123
|
name: "DataTable",
|
|
2220
2124
|
slot: "textEllipsis"
|
|
2221
2125
|
})({
|
|
@@ -2223,7 +2127,7 @@ var EllipsisDiv = (0, import_joy25.styled)("div", {
|
|
|
2223
2127
|
textOverflow: "ellipsis",
|
|
2224
2128
|
whiteSpace: "nowrap"
|
|
2225
2129
|
});
|
|
2226
|
-
var OverlayWrapper = (0,
|
|
2130
|
+
var OverlayWrapper = (0, import_joy24.styled)("tr", {
|
|
2227
2131
|
name: "DataTable",
|
|
2228
2132
|
slot: "overlayWrapper"
|
|
2229
2133
|
})({
|
|
@@ -2238,7 +2142,7 @@ var OverlayWrapper = (0, import_joy25.styled)("tr", {
|
|
|
2238
2142
|
border: "none !important"
|
|
2239
2143
|
}
|
|
2240
2144
|
});
|
|
2241
|
-
var VirtualizedTableBody = (0,
|
|
2145
|
+
var VirtualizedTableBody = (0, import_joy24.styled)("tbody", {
|
|
2242
2146
|
name: "DataTable",
|
|
2243
2147
|
slot: "tableBody"
|
|
2244
2148
|
})({
|
|
@@ -2247,21 +2151,21 @@ var VirtualizedTableBody = (0, import_joy25.styled)("tbody", {
|
|
|
2247
2151
|
display: "block",
|
|
2248
2152
|
height: "0.01em"
|
|
2249
2153
|
},
|
|
2250
|
-
[`& .${
|
|
2154
|
+
[`& .${import_joy24.buttonClasses.root}`]: {
|
|
2251
2155
|
"--Button-minHeight": "26px",
|
|
2252
2156
|
"--Button-paddingBlock": "0.25rem",
|
|
2253
2157
|
lineHeight: 1,
|
|
2254
2158
|
marginTop: "-2px",
|
|
2255
2159
|
marginBottom: "-2px"
|
|
2256
2160
|
},
|
|
2257
|
-
[`& .${
|
|
2161
|
+
[`& .${import_joy24.iconButtonClasses.root}`]: {
|
|
2258
2162
|
"--IconButton-size": "26px",
|
|
2259
2163
|
verticalAlign: "middle",
|
|
2260
2164
|
marginTop: "-2px",
|
|
2261
2165
|
marginBottom: "-2px"
|
|
2262
2166
|
}
|
|
2263
2167
|
});
|
|
2264
|
-
var StyledTableRow = (0,
|
|
2168
|
+
var StyledTableRow = (0, import_joy24.styled)("tr", {
|
|
2265
2169
|
name: "DataTable",
|
|
2266
2170
|
slot: "tableRow",
|
|
2267
2171
|
shouldForwardProp: (prop) => prop !== "striped"
|
|
@@ -2280,17 +2184,17 @@ var StyledTableRow = (0, import_joy25.styled)("tr", {
|
|
|
2280
2184
|
}
|
|
2281
2185
|
}
|
|
2282
2186
|
}));
|
|
2283
|
-
var Asterisk = (0,
|
|
2187
|
+
var Asterisk = (0, import_joy24.styled)("span", {
|
|
2284
2188
|
name: "DataTable",
|
|
2285
2189
|
slot: "headCellAsterisk"
|
|
2286
2190
|
})(({ theme }) => ({
|
|
2287
2191
|
color: "var(--ceed-palette-danger-500)",
|
|
2288
2192
|
marginLeft: theme.spacing(0.5)
|
|
2289
2193
|
}));
|
|
2290
|
-
var StyledTh = (0,
|
|
2194
|
+
var StyledTh = (0, import_joy24.styled)(import_framer_motion16.motion.th)(({ theme }) => ({
|
|
2291
2195
|
boxShadow: "1px 0 var(--TableCell-borderColor)"
|
|
2292
2196
|
}));
|
|
2293
|
-
var StyledTd = (0,
|
|
2197
|
+
var StyledTd = (0, import_joy24.styled)("td")(({ theme }) => ({
|
|
2294
2198
|
transition: `box-shadow 0.3s`,
|
|
2295
2199
|
"&:not(.is-last-left):not(.is-last-right)": {
|
|
2296
2200
|
boxShadow: "1px 0 var(--TableCell-borderColor)"
|
|
@@ -2306,9 +2210,9 @@ var StyledTd = (0, import_joy25.styled)("td")(({ theme }) => ({
|
|
|
2306
2210
|
}
|
|
2307
2211
|
}
|
|
2308
2212
|
}));
|
|
2309
|
-
var MotionSortIcon = (0,
|
|
2310
|
-
var DefaultLoadingOverlay = () => /* @__PURE__ */
|
|
2311
|
-
var Resizer = (ref, targetRef = ref) => /* @__PURE__ */
|
|
2213
|
+
var MotionSortIcon = (0, import_framer_motion16.motion)(import_ArrowUpwardRounded.default);
|
|
2214
|
+
var DefaultLoadingOverlay = () => /* @__PURE__ */ import_react18.default.createElement(import_joy24.LinearProgress, { value: 8, variant: "plain" });
|
|
2215
|
+
var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ import_react18.default.createElement(
|
|
2312
2216
|
Box_default,
|
|
2313
2217
|
{
|
|
2314
2218
|
sx: {
|
|
@@ -2345,24 +2249,24 @@ var import_joy32 = require("@mui/joy");
|
|
|
2345
2249
|
var import_framer_motion21 = require("framer-motion");
|
|
2346
2250
|
|
|
2347
2251
|
// src/components/DatePicker/DatePicker.tsx
|
|
2348
|
-
var
|
|
2252
|
+
var import_react19 = __toESM(require("react"));
|
|
2349
2253
|
var import_react_imask = require("react-imask");
|
|
2350
2254
|
var import_CalendarToday = __toESM(require("@mui/icons-material/CalendarToday"));
|
|
2351
|
-
var
|
|
2255
|
+
var import_joy27 = require("@mui/joy");
|
|
2352
2256
|
var import_base3 = require("@mui/base");
|
|
2353
2257
|
|
|
2354
2258
|
// src/components/Sheet/Sheet.tsx
|
|
2355
|
-
var
|
|
2356
|
-
var Sheet =
|
|
2259
|
+
var import_joy25 = require("@mui/joy");
|
|
2260
|
+
var Sheet = import_joy25.Sheet;
|
|
2357
2261
|
|
|
2358
2262
|
// src/components/Sheet/index.ts
|
|
2359
2263
|
var Sheet_default = Sheet;
|
|
2360
2264
|
|
|
2361
2265
|
// src/components/DialogActions/DialogActions.tsx
|
|
2362
|
-
var
|
|
2363
|
-
var
|
|
2364
|
-
var MotionDialogActions = (0,
|
|
2365
|
-
var StyledDialogActions = (0,
|
|
2266
|
+
var import_joy26 = require("@mui/joy");
|
|
2267
|
+
var import_framer_motion17 = require("framer-motion");
|
|
2268
|
+
var MotionDialogActions = (0, import_framer_motion17.motion)(import_joy26.DialogActions);
|
|
2269
|
+
var StyledDialogActions = (0, import_joy26.styled)(MotionDialogActions)(({ theme }) => ({
|
|
2366
2270
|
padding: theme.spacing(2),
|
|
2367
2271
|
gap: theme.spacing(2),
|
|
2368
2272
|
flexDirection: "row",
|
|
@@ -2375,7 +2279,7 @@ DialogActions.displayName = "DialogActions";
|
|
|
2375
2279
|
var DialogActions_default = DialogActions;
|
|
2376
2280
|
|
|
2377
2281
|
// src/components/DatePicker/DatePicker.tsx
|
|
2378
|
-
var CalendarButton = (0,
|
|
2282
|
+
var CalendarButton = (0, import_joy27.styled)(IconButton_default, {
|
|
2379
2283
|
name: "DatePicker",
|
|
2380
2284
|
slot: "calendarButton"
|
|
2381
2285
|
})(({ theme }) => ({
|
|
@@ -2385,13 +2289,13 @@ var CalendarButton = (0, import_joy28.styled)(IconButton_default, {
|
|
|
2385
2289
|
outline: `${theme.getCssVar("focus-thickness")} solid ${theme.getCssVar("palette-focusVisible")}`
|
|
2386
2290
|
}
|
|
2387
2291
|
}));
|
|
2388
|
-
var StyledPopper = (0,
|
|
2292
|
+
var StyledPopper = (0, import_joy27.styled)(import_base3.Popper, {
|
|
2389
2293
|
name: "DatePicker",
|
|
2390
2294
|
slot: "popper"
|
|
2391
2295
|
})(({ theme }) => ({
|
|
2392
2296
|
zIndex: theme.zIndex.tooltip
|
|
2393
2297
|
}));
|
|
2394
|
-
var CalendarSheet = (0,
|
|
2298
|
+
var CalendarSheet = (0, import_joy27.styled)(Sheet_default, {
|
|
2395
2299
|
name: "DatePicker",
|
|
2396
2300
|
slot: "sheet",
|
|
2397
2301
|
overridesResolver: (props, styles) => styles.root
|
|
@@ -2400,7 +2304,7 @@ var CalendarSheet = (0, import_joy28.styled)(Sheet_default, {
|
|
|
2400
2304
|
boxShadow: theme.shadow.md,
|
|
2401
2305
|
borderRadius: theme.radius.md
|
|
2402
2306
|
}));
|
|
2403
|
-
var DatePickerRoot = (0,
|
|
2307
|
+
var DatePickerRoot = (0, import_joy27.styled)("div", {
|
|
2404
2308
|
name: "DatePicker",
|
|
2405
2309
|
slot: "root",
|
|
2406
2310
|
overridesResolver: (props, styles) => styles.root
|
|
@@ -2457,9 +2361,9 @@ function parseDate(dateString, format) {
|
|
|
2457
2361
|
var formatToPattern = (format) => {
|
|
2458
2362
|
return format.replace(/YYYY/g, "Y").replace(/MM/g, "M").replace(/DD/g, "D").replace(/[^YMD\s]/g, (match) => `${match}\``);
|
|
2459
2363
|
};
|
|
2460
|
-
var TextMaskAdapter3 =
|
|
2364
|
+
var TextMaskAdapter3 = import_react19.default.forwardRef(function TextMaskAdapter4(props, ref) {
|
|
2461
2365
|
const { onChange, format, ...other } = props;
|
|
2462
|
-
return /* @__PURE__ */
|
|
2366
|
+
return /* @__PURE__ */ import_react19.default.createElement(
|
|
2463
2367
|
import_react_imask.IMaskInput,
|
|
2464
2368
|
{
|
|
2465
2369
|
...other,
|
|
@@ -2494,8 +2398,8 @@ var TextMaskAdapter3 = import_react20.default.forwardRef(function TextMaskAdapte
|
|
|
2494
2398
|
}
|
|
2495
2399
|
);
|
|
2496
2400
|
});
|
|
2497
|
-
var DatePicker = (0,
|
|
2498
|
-
const props = (0,
|
|
2401
|
+
var DatePicker = (0, import_react19.forwardRef)((inProps, ref) => {
|
|
2402
|
+
const props = (0, import_joy27.useThemeProps)({ props: inProps, name: "DatePicker" });
|
|
2499
2403
|
const {
|
|
2500
2404
|
onChange,
|
|
2501
2405
|
disabled,
|
|
@@ -2519,24 +2423,24 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
|
|
|
2519
2423
|
shouldDisableDate,
|
|
2520
2424
|
...innerProps
|
|
2521
2425
|
} = props;
|
|
2522
|
-
const innerRef = (0,
|
|
2523
|
-
const buttonRef = (0,
|
|
2426
|
+
const innerRef = (0, import_react19.useRef)(null);
|
|
2427
|
+
const buttonRef = (0, import_react19.useRef)(null);
|
|
2524
2428
|
const [value, setValue] = useControlledState(
|
|
2525
2429
|
props.value,
|
|
2526
2430
|
props.defaultValue || "",
|
|
2527
|
-
(0,
|
|
2431
|
+
(0, import_react19.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
|
|
2528
2432
|
);
|
|
2529
|
-
const [displayValue, setDisplayValue] = (0,
|
|
2433
|
+
const [displayValue, setDisplayValue] = (0, import_react19.useState)(
|
|
2530
2434
|
() => value ? formatValueString(parseDate(value, format), displayFormat) : ""
|
|
2531
2435
|
);
|
|
2532
|
-
const [anchorEl, setAnchorEl] = (0,
|
|
2436
|
+
const [anchorEl, setAnchorEl] = (0, import_react19.useState)(null);
|
|
2533
2437
|
const open = Boolean(anchorEl);
|
|
2534
|
-
(0,
|
|
2438
|
+
(0, import_react19.useEffect)(() => {
|
|
2535
2439
|
if (!anchorEl) {
|
|
2536
2440
|
innerRef.current?.blur();
|
|
2537
2441
|
}
|
|
2538
2442
|
}, [anchorEl, innerRef]);
|
|
2539
|
-
(0,
|
|
2443
|
+
(0, import_react19.useEffect)(() => {
|
|
2540
2444
|
if (value === "") {
|
|
2541
2445
|
setDisplayValue("");
|
|
2542
2446
|
return;
|
|
@@ -2546,8 +2450,8 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
|
|
|
2546
2450
|
setDisplayValue(formattedValue);
|
|
2547
2451
|
}
|
|
2548
2452
|
}, [displayFormat, displayValue, format, value]);
|
|
2549
|
-
(0,
|
|
2550
|
-
const handleChange = (0,
|
|
2453
|
+
(0, import_react19.useImperativeHandle)(ref, () => innerRef.current, [innerRef]);
|
|
2454
|
+
const handleChange = (0, import_react19.useCallback)(
|
|
2551
2455
|
(event) => {
|
|
2552
2456
|
const value2 = event.target.value;
|
|
2553
2457
|
setDisplayValue(value2 ? formatValueString(parseDate(value2, format), displayFormat) : value2);
|
|
@@ -2555,7 +2459,7 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
|
|
|
2555
2459
|
},
|
|
2556
2460
|
[displayFormat, format, setValue]
|
|
2557
2461
|
);
|
|
2558
|
-
const handleDisplayInputChange = (0,
|
|
2462
|
+
const handleDisplayInputChange = (0, import_react19.useCallback)(
|
|
2559
2463
|
(event) => {
|
|
2560
2464
|
if (event.target.value === "") {
|
|
2561
2465
|
handleChange({
|
|
@@ -2580,7 +2484,7 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
|
|
|
2580
2484
|
},
|
|
2581
2485
|
[displayFormat, format, handleChange, props.name]
|
|
2582
2486
|
);
|
|
2583
|
-
const handleCalendarToggle = (0,
|
|
2487
|
+
const handleCalendarToggle = (0, import_react19.useCallback)(
|
|
2584
2488
|
(event) => {
|
|
2585
2489
|
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
2586
2490
|
setTimeout(() => {
|
|
@@ -2589,7 +2493,7 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
|
|
|
2589
2493
|
},
|
|
2590
2494
|
[anchorEl, setAnchorEl, innerRef]
|
|
2591
2495
|
);
|
|
2592
|
-
const handleInputMouseDown = (0,
|
|
2496
|
+
const handleInputMouseDown = (0, import_react19.useCallback)(
|
|
2593
2497
|
(event) => {
|
|
2594
2498
|
if (inputReadOnly) {
|
|
2595
2499
|
event.preventDefault();
|
|
@@ -2598,7 +2502,7 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
|
|
|
2598
2502
|
},
|
|
2599
2503
|
[inputReadOnly, buttonRef]
|
|
2600
2504
|
);
|
|
2601
|
-
return /* @__PURE__ */
|
|
2505
|
+
return /* @__PURE__ */ import_react19.default.createElement(DatePickerRoot, null, /* @__PURE__ */ import_react19.default.createElement(import_base3.FocusTrap, { open: true }, /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
|
|
2602
2506
|
Input_default,
|
|
2603
2507
|
{
|
|
2604
2508
|
...innerProps,
|
|
@@ -2626,7 +2530,7 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
|
|
|
2626
2530
|
},
|
|
2627
2531
|
className,
|
|
2628
2532
|
sx,
|
|
2629
|
-
endDecorator: /* @__PURE__ */
|
|
2533
|
+
endDecorator: /* @__PURE__ */ import_react19.default.createElement(
|
|
2630
2534
|
CalendarButton,
|
|
2631
2535
|
{
|
|
2632
2536
|
ref: buttonRef,
|
|
@@ -2638,13 +2542,13 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
|
|
|
2638
2542
|
"aria-expanded": open,
|
|
2639
2543
|
disabled
|
|
2640
2544
|
},
|
|
2641
|
-
/* @__PURE__ */
|
|
2545
|
+
/* @__PURE__ */ import_react19.default.createElement(import_CalendarToday.default, null)
|
|
2642
2546
|
),
|
|
2643
2547
|
label,
|
|
2644
2548
|
helperText,
|
|
2645
2549
|
readOnly: readOnly || inputReadOnly
|
|
2646
2550
|
}
|
|
2647
|
-
), open && /* @__PURE__ */
|
|
2551
|
+
), open && /* @__PURE__ */ import_react19.default.createElement(import_base3.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react19.default.createElement(
|
|
2648
2552
|
StyledPopper,
|
|
2649
2553
|
{
|
|
2650
2554
|
id: "date-picker-popper",
|
|
@@ -2663,7 +2567,7 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
|
|
|
2663
2567
|
"aria-label": "Calendar Tooltip",
|
|
2664
2568
|
"aria-expanded": open
|
|
2665
2569
|
},
|
|
2666
|
-
/* @__PURE__ */
|
|
2570
|
+
/* @__PURE__ */ import_react19.default.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react19.default.createElement(
|
|
2667
2571
|
Calendar_default,
|
|
2668
2572
|
{
|
|
2669
2573
|
value: value && !Number.isNaN(parseDate(value, format).getTime()) ? [parseDate(value, format), void 0] : void 0,
|
|
@@ -2682,14 +2586,14 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
|
|
|
2682
2586
|
disablePast,
|
|
2683
2587
|
shouldDisableDate: shouldDisableDate ? (date) => shouldDisableDate(formatValueString(date, format)) : void 0
|
|
2684
2588
|
}
|
|
2685
|
-
), !hideClearButton && /* @__PURE__ */
|
|
2589
|
+
), !hideClearButton && /* @__PURE__ */ import_react19.default.createElement(
|
|
2686
2590
|
DialogActions_default,
|
|
2687
2591
|
{
|
|
2688
2592
|
sx: {
|
|
2689
2593
|
p: 1
|
|
2690
2594
|
}
|
|
2691
2595
|
},
|
|
2692
|
-
/* @__PURE__ */
|
|
2596
|
+
/* @__PURE__ */ import_react19.default.createElement(
|
|
2693
2597
|
Button_default,
|
|
2694
2598
|
{
|
|
2695
2599
|
size,
|
|
@@ -2715,10 +2619,10 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
|
|
|
2715
2619
|
var DatePicker_default = DatePicker;
|
|
2716
2620
|
|
|
2717
2621
|
// src/components/Textarea/Textarea.tsx
|
|
2718
|
-
var
|
|
2719
|
-
var
|
|
2720
|
-
var
|
|
2721
|
-
var MotionTextarea = (0,
|
|
2622
|
+
var import_react20 = __toESM(require("react"));
|
|
2623
|
+
var import_joy28 = require("@mui/joy");
|
|
2624
|
+
var import_framer_motion18 = require("framer-motion");
|
|
2625
|
+
var MotionTextarea = (0, import_framer_motion18.motion)(import_joy28.Textarea);
|
|
2722
2626
|
var Textarea = (props) => {
|
|
2723
2627
|
const {
|
|
2724
2628
|
label,
|
|
@@ -2735,7 +2639,7 @@ var Textarea = (props) => {
|
|
|
2735
2639
|
className,
|
|
2736
2640
|
...innerProps
|
|
2737
2641
|
} = props;
|
|
2738
|
-
const textarea = /* @__PURE__ */
|
|
2642
|
+
const textarea = /* @__PURE__ */ import_react20.default.createElement(
|
|
2739
2643
|
MotionTextarea,
|
|
2740
2644
|
{
|
|
2741
2645
|
required,
|
|
@@ -2747,7 +2651,7 @@ var Textarea = (props) => {
|
|
|
2747
2651
|
...innerProps
|
|
2748
2652
|
}
|
|
2749
2653
|
);
|
|
2750
|
-
return /* @__PURE__ */
|
|
2654
|
+
return /* @__PURE__ */ import_react20.default.createElement(
|
|
2751
2655
|
FormControl_default,
|
|
2752
2656
|
{
|
|
2753
2657
|
required,
|
|
@@ -2758,9 +2662,9 @@ var Textarea = (props) => {
|
|
|
2758
2662
|
sx,
|
|
2759
2663
|
className
|
|
2760
2664
|
},
|
|
2761
|
-
label && /* @__PURE__ */
|
|
2665
|
+
label && /* @__PURE__ */ import_react20.default.createElement(FormLabel_default, null, label),
|
|
2762
2666
|
textarea,
|
|
2763
|
-
helperText && /* @__PURE__ */
|
|
2667
|
+
helperText && /* @__PURE__ */ import_react20.default.createElement(FormHelperText_default, null, helperText)
|
|
2764
2668
|
);
|
|
2765
2669
|
};
|
|
2766
2670
|
Textarea.displayName = "Textarea";
|
|
@@ -2769,10 +2673,10 @@ Textarea.displayName = "Textarea";
|
|
|
2769
2673
|
var Textarea_default = Textarea;
|
|
2770
2674
|
|
|
2771
2675
|
// src/components/Select/Select.tsx
|
|
2772
|
-
var
|
|
2773
|
-
var
|
|
2774
|
-
var
|
|
2775
|
-
var MotionOption = (0,
|
|
2676
|
+
var import_react21 = __toESM(require("react"));
|
|
2677
|
+
var import_joy29 = require("@mui/joy");
|
|
2678
|
+
var import_framer_motion19 = require("framer-motion");
|
|
2679
|
+
var MotionOption = (0, import_framer_motion19.motion)(import_joy29.Option);
|
|
2776
2680
|
var Option = MotionOption;
|
|
2777
2681
|
var secondaryTextLevelMap2 = {
|
|
2778
2682
|
sm: "body-xs",
|
|
@@ -2795,7 +2699,7 @@ function Select(props) {
|
|
|
2795
2699
|
className,
|
|
2796
2700
|
...innerProps
|
|
2797
2701
|
} = props;
|
|
2798
|
-
const options = (0,
|
|
2702
|
+
const options = (0, import_react21.useMemo)(
|
|
2799
2703
|
() => props.options.map((option) => {
|
|
2800
2704
|
if (option.hasOwnProperty("value") && option.hasOwnProperty("label")) {
|
|
2801
2705
|
return option;
|
|
@@ -2820,15 +2724,15 @@ function Select(props) {
|
|
|
2820
2724
|
};
|
|
2821
2725
|
onChange?.(newEvent, newValue);
|
|
2822
2726
|
};
|
|
2823
|
-
const optionMap = (0,
|
|
2727
|
+
const optionMap = (0, import_react21.useMemo)(() => {
|
|
2824
2728
|
const map = /* @__PURE__ */ new Map();
|
|
2825
2729
|
options.forEach((option) => {
|
|
2826
2730
|
map.set(option.value, option);
|
|
2827
2731
|
});
|
|
2828
2732
|
return map;
|
|
2829
2733
|
}, [options]);
|
|
2830
|
-
const select = /* @__PURE__ */
|
|
2831
|
-
|
|
2734
|
+
const select = /* @__PURE__ */ import_react21.default.createElement(
|
|
2735
|
+
import_joy29.Select,
|
|
2832
2736
|
{
|
|
2833
2737
|
...innerProps,
|
|
2834
2738
|
required,
|
|
@@ -2844,9 +2748,9 @@ function Select(props) {
|
|
|
2844
2748
|
return optionMap.get(selected.value)?.label;
|
|
2845
2749
|
}
|
|
2846
2750
|
},
|
|
2847
|
-
options.map((option) => /* @__PURE__ */
|
|
2751
|
+
options.map((option) => /* @__PURE__ */ import_react21.default.createElement(Option, { key: option.value, value: option.value, disabled: option.disabled }, option.secondaryText ? /* @__PURE__ */ import_react21.default.createElement(import_joy29.ListItemContent, { sx: { gap: 0.5 } }, /* @__PURE__ */ import_react21.default.createElement(import_joy29.Typography, { level: "inherit" }, option.label), /* @__PURE__ */ import_react21.default.createElement(import_joy29.Typography, { level: secondaryTextLevelMap2[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : option.label))
|
|
2848
2752
|
);
|
|
2849
|
-
return /* @__PURE__ */
|
|
2753
|
+
return /* @__PURE__ */ import_react21.default.createElement(
|
|
2850
2754
|
FormControl_default,
|
|
2851
2755
|
{
|
|
2852
2756
|
required,
|
|
@@ -2857,9 +2761,9 @@ function Select(props) {
|
|
|
2857
2761
|
sx,
|
|
2858
2762
|
className
|
|
2859
2763
|
},
|
|
2860
|
-
label && /* @__PURE__ */
|
|
2764
|
+
label && /* @__PURE__ */ import_react21.default.createElement(FormLabel_default, null, label),
|
|
2861
2765
|
select,
|
|
2862
|
-
helperText && /* @__PURE__ */
|
|
2766
|
+
helperText && /* @__PURE__ */ import_react21.default.createElement(FormHelperText_default, null, helperText)
|
|
2863
2767
|
);
|
|
2864
2768
|
}
|
|
2865
2769
|
Select.displayName = "Select";
|
|
@@ -2870,6 +2774,19 @@ var Select_default = Select;
|
|
|
2870
2774
|
// src/components/DataTable/components.tsx
|
|
2871
2775
|
var import_joy33 = require("@mui/joy");
|
|
2872
2776
|
|
|
2777
|
+
// src/components/Tooltip/Tooltip.tsx
|
|
2778
|
+
var import_react22 = __toESM(require("react"));
|
|
2779
|
+
var import_joy30 = require("@mui/joy");
|
|
2780
|
+
var import_framer_motion20 = require("framer-motion");
|
|
2781
|
+
var MotionTooltip = (0, import_framer_motion20.motion)(import_joy30.Tooltip);
|
|
2782
|
+
var Tooltip = (props) => {
|
|
2783
|
+
return /* @__PURE__ */ import_react22.default.createElement(MotionTooltip, { ...props });
|
|
2784
|
+
};
|
|
2785
|
+
Tooltip.displayName = "Tooltip";
|
|
2786
|
+
|
|
2787
|
+
// src/components/Tooltip/index.ts
|
|
2788
|
+
var Tooltip_default = Tooltip;
|
|
2789
|
+
|
|
2873
2790
|
// src/components/InfoSign/InfoSign.tsx
|
|
2874
2791
|
var import_react23 = __toESM(require("react"));
|
|
2875
2792
|
var import_joy31 = require("@mui/joy");
|
|
@@ -6051,191 +5968,28 @@ var MotionRadioGroup = (0, import_framer_motion27.motion)(import_joy54.RadioGrou
|
|
|
6051
5968
|
var RadioGroup = MotionRadioGroup;
|
|
6052
5969
|
RadioGroup.displayName = "RadioGroup";
|
|
6053
5970
|
|
|
6054
|
-
// src/components/RadioTileGroup/RadioTileGroup.tsx
|
|
6055
|
-
var import_react44 = __toESM(require("react"));
|
|
6056
|
-
var import_joy55 = require("@mui/joy");
|
|
6057
|
-
var RadioTileGroupRoot = (0, import_joy55.styled)(RadioGroup, {
|
|
6058
|
-
name: "RadioTileGroup",
|
|
6059
|
-
slot: "root",
|
|
6060
|
-
shouldForwardProp: (prop) => prop !== "flex" && prop !== "columns"
|
|
6061
|
-
})(({ theme, flex, columns }) => ({
|
|
6062
|
-
flexDirection: "row",
|
|
6063
|
-
gap: theme.spacing(2),
|
|
6064
|
-
...flex && { flex: 1 },
|
|
6065
|
-
...columns && {
|
|
6066
|
-
display: "grid",
|
|
6067
|
-
gridTemplateColumns: `repeat(${columns}, 1fr)`
|
|
6068
|
-
},
|
|
6069
|
-
[`& .${import_joy55.sheetClasses.root}.${import_joy55.radioClasses.disabled}`]: {
|
|
6070
|
-
borderColor: theme.palette.neutral.outlinedDisabledBorder
|
|
6071
|
-
},
|
|
6072
|
-
[`& .${import_joy55.radioClasses.root}`]: {
|
|
6073
|
-
[`& .${import_joy55.radioClasses.action}`]: {
|
|
6074
|
-
borderRadius: theme.radius.md
|
|
6075
|
-
},
|
|
6076
|
-
[`&.${import_joy55.radioClasses.checked}`]: {
|
|
6077
|
-
[`& .${import_joy55.radioClasses.action}`]: {
|
|
6078
|
-
inset: -1,
|
|
6079
|
-
border: "2px solid",
|
|
6080
|
-
borderColor: theme.palette.primary.outlinedColor
|
|
6081
|
-
},
|
|
6082
|
-
[`&.${import_joy55.radioClasses.disabled}`]: {
|
|
6083
|
-
[`& .${import_joy55.radioClasses.action}`]: {
|
|
6084
|
-
borderColor: theme.palette.neutral.outlinedBorder
|
|
6085
|
-
}
|
|
6086
|
-
}
|
|
6087
|
-
}
|
|
6088
|
-
}
|
|
6089
|
-
}));
|
|
6090
|
-
var RadioTileSheet = (0, import_joy55.styled)(Sheet, {
|
|
6091
|
-
name: "RadioTileGroup",
|
|
6092
|
-
slot: "tile",
|
|
6093
|
-
shouldForwardProp: (prop) => prop !== "disabled" && prop !== "size" && prop !== "flex" && prop !== "textAlign"
|
|
6094
|
-
})(({
|
|
6095
|
-
theme,
|
|
6096
|
-
disabled,
|
|
6097
|
-
size = "sm",
|
|
6098
|
-
flex,
|
|
6099
|
-
textAlign
|
|
6100
|
-
}) => {
|
|
6101
|
-
const px = { sm: theme.spacing(3), md: theme.spacing(3), lg: theme.spacing(4) }[size];
|
|
6102
|
-
const py = { sm: theme.spacing(3), md: theme.spacing(4), lg: theme.spacing(4) }[size];
|
|
6103
|
-
return {
|
|
6104
|
-
borderRadius: theme.radius.md,
|
|
6105
|
-
display: "flex",
|
|
6106
|
-
gap: { sm: theme.spacing(2), md: theme.spacing(3), lg: theme.spacing(4) }[size],
|
|
6107
|
-
padding: `${py} ${px}`,
|
|
6108
|
-
// NOTE: Radio에도 Label과의 정렬을 맞추기 위해 중복 코드가 있지만 Icon과 RadioButton 의 정렬도 일치시켜야 해서 코드가 중복으로 존재할수밖에 없다.
|
|
6109
|
-
flexDirection: textAlign === "start" ? "row-reverse" : "column-reverse",
|
|
6110
|
-
justifyContent: textAlign === "start" ? "space-between" : "center",
|
|
6111
|
-
alignItems: "center",
|
|
6112
|
-
...flex ? { flex: 1 } : {},
|
|
6113
|
-
...disabled ? { borderColor: theme.palette.neutral.outlinedDisabledBorder } : {
|
|
6114
|
-
":hover": {
|
|
6115
|
-
backgroundColor: theme.palette.neutral.outlinedHoverBg
|
|
6116
|
-
},
|
|
6117
|
-
":active": {
|
|
6118
|
-
backgroundColor: theme.palette.neutral.outlinedActiveBg
|
|
6119
|
-
}
|
|
6120
|
-
}
|
|
6121
|
-
};
|
|
6122
|
-
});
|
|
6123
|
-
function RadioTileGroup(props) {
|
|
6124
|
-
const {
|
|
6125
|
-
options,
|
|
6126
|
-
value,
|
|
6127
|
-
defaultValue,
|
|
6128
|
-
onChange,
|
|
6129
|
-
name,
|
|
6130
|
-
disabled: allDisabled,
|
|
6131
|
-
sx,
|
|
6132
|
-
className,
|
|
6133
|
-
useIndicator,
|
|
6134
|
-
textAlign = "center",
|
|
6135
|
-
size = "sm",
|
|
6136
|
-
flex,
|
|
6137
|
-
columns,
|
|
6138
|
-
label,
|
|
6139
|
-
helperText,
|
|
6140
|
-
error,
|
|
6141
|
-
required
|
|
6142
|
-
} = props;
|
|
6143
|
-
const radioGroup = /* @__PURE__ */ import_react44.default.createElement(
|
|
6144
|
-
RadioTileGroupRoot,
|
|
6145
|
-
{
|
|
6146
|
-
overlay: true,
|
|
6147
|
-
name,
|
|
6148
|
-
value,
|
|
6149
|
-
defaultValue,
|
|
6150
|
-
onChange,
|
|
6151
|
-
flex,
|
|
6152
|
-
columns
|
|
6153
|
-
},
|
|
6154
|
-
options.map((option) => /* @__PURE__ */ import_react44.default.createElement(
|
|
6155
|
-
RadioTileSheet,
|
|
6156
|
-
{
|
|
6157
|
-
key: option.value,
|
|
6158
|
-
variant: "outlined",
|
|
6159
|
-
disabled: allDisabled ?? option.disabled,
|
|
6160
|
-
size,
|
|
6161
|
-
flex,
|
|
6162
|
-
textAlign
|
|
6163
|
-
},
|
|
6164
|
-
/* @__PURE__ */ import_react44.default.createElement(
|
|
6165
|
-
Radio,
|
|
6166
|
-
{
|
|
6167
|
-
id: `${option.value}`,
|
|
6168
|
-
value: option.value,
|
|
6169
|
-
label: option.label,
|
|
6170
|
-
disableIcon: !useIndicator,
|
|
6171
|
-
disabled: allDisabled ?? option.disabled,
|
|
6172
|
-
size,
|
|
6173
|
-
slotProps: {
|
|
6174
|
-
root: {
|
|
6175
|
-
sx: {
|
|
6176
|
-
width: "100%",
|
|
6177
|
-
flexDirection: textAlign === "start" ? "row-reverse" : "column-reverse",
|
|
6178
|
-
justifyContent: textAlign === "start" ? "space-between" : "center",
|
|
6179
|
-
alignItems: "center",
|
|
6180
|
-
gap: { sm: 2, md: 3, lg: 4 }[size]
|
|
6181
|
-
}
|
|
6182
|
-
},
|
|
6183
|
-
label: ({ disabled }) => ({
|
|
6184
|
-
sx: (theme) => ({
|
|
6185
|
-
...theme.typography[{ sm: "body-sm", md: "body-md", lg: "body-lg" }[size]],
|
|
6186
|
-
color: disabled ? theme.palette.neutral.outlinedDisabledColor : theme.palette.neutral.outlinedColor
|
|
6187
|
-
})
|
|
6188
|
-
})
|
|
6189
|
-
}
|
|
6190
|
-
}
|
|
6191
|
-
),
|
|
6192
|
-
option.startDecorator && /* @__PURE__ */ import_react44.default.createElement(
|
|
6193
|
-
Box_default,
|
|
6194
|
-
{
|
|
6195
|
-
sx: {
|
|
6196
|
-
zIndex: 2,
|
|
6197
|
-
// HACK: Radio의 overlay가 decorator를 덮어버리기 때문에 문제 예방을 위해 적용해야 한다.
|
|
6198
|
-
width: { sm: "20px", md: "24px", lg: "24px" }[size],
|
|
6199
|
-
height: { sm: "20px", md: "24px", lg: "24px" }[size],
|
|
6200
|
-
color: "inherit",
|
|
6201
|
-
"& > .MuiSvgIcon-root": {
|
|
6202
|
-
width: "inherit",
|
|
6203
|
-
height: "inherit",
|
|
6204
|
-
fill: "currentColor",
|
|
6205
|
-
color: "inherit"
|
|
6206
|
-
}
|
|
6207
|
-
}
|
|
6208
|
-
},
|
|
6209
|
-
option.startDecorator
|
|
6210
|
-
)
|
|
6211
|
-
))
|
|
6212
|
-
);
|
|
6213
|
-
return /* @__PURE__ */ import_react44.default.createElement(FormControl_default, { required, disabled: allDisabled, error, size, sx, className }, label && /* @__PURE__ */ import_react44.default.createElement(FormLabel_default, null, label), radioGroup, helperText && /* @__PURE__ */ import_react44.default.createElement(FormHelperText_default, null, helperText));
|
|
6214
|
-
}
|
|
6215
|
-
RadioTileGroup.displayName = "RadioTileGroup";
|
|
6216
|
-
|
|
6217
5971
|
// src/components/RadioList/RadioList.tsx
|
|
6218
|
-
var
|
|
5972
|
+
var import_react44 = __toESM(require("react"));
|
|
6219
5973
|
function RadioList(props) {
|
|
6220
5974
|
const { items, ...innerProps } = props;
|
|
6221
|
-
return /* @__PURE__ */
|
|
5975
|
+
return /* @__PURE__ */ import_react44.default.createElement(RadioGroup, { ...innerProps }, items.map((item) => /* @__PURE__ */ import_react44.default.createElement(Radio, { key: `${item.value}`, value: item.value, label: item.label })));
|
|
6222
5976
|
}
|
|
6223
5977
|
RadioList.displayName = "RadioList";
|
|
6224
5978
|
|
|
6225
5979
|
// src/components/Stepper/Stepper.tsx
|
|
6226
|
-
var
|
|
6227
|
-
var
|
|
5980
|
+
var import_react45 = __toESM(require("react"));
|
|
5981
|
+
var import_joy55 = require("@mui/joy");
|
|
6228
5982
|
var import_Check = __toESM(require("@mui/icons-material/Check"));
|
|
6229
5983
|
var import_framer_motion28 = require("framer-motion");
|
|
6230
|
-
var Step = (0,
|
|
5984
|
+
var Step = (0, import_joy55.styled)(import_joy55.Step)({});
|
|
6231
5985
|
Step.displayName = "Step";
|
|
6232
|
-
var StepIndicator = (0,
|
|
5986
|
+
var StepIndicator = (0, import_joy55.styled)(import_joy55.StepIndicator)({});
|
|
6233
5987
|
StepIndicator.displayName = "StepIndicator";
|
|
6234
|
-
var StyledStepper = (0,
|
|
5988
|
+
var StyledStepper = (0, import_joy55.styled)(import_joy55.Stepper)(({ theme }) => ({
|
|
6235
5989
|
"--StepIndicator-size": "24px",
|
|
6236
5990
|
"--Step-gap": theme.spacing(2),
|
|
6237
5991
|
"--joy-palette-success-solidBg": "var(--joy-palette-success-400)",
|
|
6238
|
-
[`& .${
|
|
5992
|
+
[`& .${import_joy55.stepIndicatorClasses.root}`]: {
|
|
6239
5993
|
fontSize: "var(--ceed-fontSize-xs)"
|
|
6240
5994
|
}
|
|
6241
5995
|
}));
|
|
@@ -6252,31 +6006,31 @@ function Stepper(props) {
|
|
|
6252
6006
|
stepOrientation = "horizontal"
|
|
6253
6007
|
} = props;
|
|
6254
6008
|
const effectiveStepOrientation = orientation === "vertical" ? "horizontal" : stepOrientation;
|
|
6255
|
-
return /* @__PURE__ */
|
|
6009
|
+
return /* @__PURE__ */ import_react45.default.createElement(
|
|
6256
6010
|
MotionStepper,
|
|
6257
6011
|
{
|
|
6258
6012
|
orientation,
|
|
6259
6013
|
sx: (theme) => ({
|
|
6260
6014
|
"--StepIndicator-size": "24px",
|
|
6261
6015
|
"--Step-gap": theme.spacing(2),
|
|
6262
|
-
[`& .${
|
|
6016
|
+
[`& .${import_joy55.stepIndicatorClasses.root}`]: {
|
|
6263
6017
|
fontSize: "var(--ceed-fontSize-xs)"
|
|
6264
6018
|
},
|
|
6265
|
-
[`& .${
|
|
6019
|
+
[`& .${import_joy55.stepClasses.completed}`]: {
|
|
6266
6020
|
"&::after": { bgcolor: activeLineColor },
|
|
6267
|
-
[`& .${
|
|
6021
|
+
[`& .${import_joy55.stepIndicatorClasses.root}`]: {
|
|
6268
6022
|
bgcolor: activeColor
|
|
6269
6023
|
}
|
|
6270
6024
|
},
|
|
6271
|
-
[`& .${
|
|
6025
|
+
[`& .${import_joy55.stepClasses.active}`]: {
|
|
6272
6026
|
"&::after": { bgcolor: inactiveLineColor },
|
|
6273
|
-
[`& .${
|
|
6027
|
+
[`& .${import_joy55.stepIndicatorClasses.root}`]: {
|
|
6274
6028
|
bgcolor: activeColor
|
|
6275
6029
|
}
|
|
6276
6030
|
},
|
|
6277
|
-
[`& .${
|
|
6031
|
+
[`& .${import_joy55.stepClasses.disabled}`]: {
|
|
6278
6032
|
"&::after": { bgcolor: inactiveLineColor },
|
|
6279
|
-
[`& .${
|
|
6033
|
+
[`& .${import_joy55.stepIndicatorClasses.root}`]: {
|
|
6280
6034
|
bgcolor: theme.vars.palette.background.surface,
|
|
6281
6035
|
borderColor: theme.vars.palette.neutral.outlinedBorder,
|
|
6282
6036
|
borderWidth: "1px",
|
|
@@ -6291,23 +6045,23 @@ function Stepper(props) {
|
|
|
6291
6045
|
const completed = activeStep > i + 1;
|
|
6292
6046
|
const disabled = activeStep < i + 1;
|
|
6293
6047
|
const hasContent = step.label || step.extraContent;
|
|
6294
|
-
return /* @__PURE__ */
|
|
6048
|
+
return /* @__PURE__ */ import_react45.default.createElement(
|
|
6295
6049
|
Step,
|
|
6296
6050
|
{
|
|
6297
6051
|
key: `step-${i}`,
|
|
6298
|
-
indicator: /* @__PURE__ */
|
|
6052
|
+
indicator: /* @__PURE__ */ import_react45.default.createElement(StepIndicator, { variant: disabled ? "outlined" : "solid", color: disabled ? "neutral" : "primary" }, completed ? /* @__PURE__ */ import_react45.default.createElement(import_Check.default, null) : step.indicatorContent),
|
|
6299
6053
|
active,
|
|
6300
6054
|
completed,
|
|
6301
6055
|
disabled,
|
|
6302
6056
|
orientation: effectiveStepOrientation
|
|
6303
6057
|
},
|
|
6304
|
-
hasContent && /* @__PURE__ */
|
|
6058
|
+
hasContent && /* @__PURE__ */ import_react45.default.createElement(
|
|
6305
6059
|
Stack_default,
|
|
6306
6060
|
{
|
|
6307
6061
|
sx: orientation === "horizontal" && effectiveStepOrientation === "vertical" ? { alignItems: "center" } : {}
|
|
6308
6062
|
},
|
|
6309
|
-
step.label && /* @__PURE__ */
|
|
6310
|
-
step.extraContent && /* @__PURE__ */
|
|
6063
|
+
step.label && /* @__PURE__ */ import_react45.default.createElement(Typography_default, { level: "title-sm" }, step.label),
|
|
6064
|
+
step.extraContent && /* @__PURE__ */ import_react45.default.createElement(Typography_default, { level: "body-xs" }, step.extraContent)
|
|
6311
6065
|
)
|
|
6312
6066
|
);
|
|
6313
6067
|
})
|
|
@@ -6316,11 +6070,11 @@ function Stepper(props) {
|
|
|
6316
6070
|
Stepper.displayName = "Stepper";
|
|
6317
6071
|
|
|
6318
6072
|
// src/components/Switch/Switch.tsx
|
|
6319
|
-
var
|
|
6320
|
-
var
|
|
6073
|
+
var import_react46 = __toESM(require("react"));
|
|
6074
|
+
var import_joy56 = require("@mui/joy");
|
|
6321
6075
|
var import_framer_motion29 = require("framer-motion");
|
|
6322
|
-
var MotionSwitch = (0, import_framer_motion29.motion)(
|
|
6323
|
-
var StyledThumb = (0,
|
|
6076
|
+
var MotionSwitch = (0, import_framer_motion29.motion)(import_joy56.Switch);
|
|
6077
|
+
var StyledThumb = (0, import_joy56.styled)(import_framer_motion29.motion.div)({
|
|
6324
6078
|
"--Icon-fontSize": "calc(var(--Switch-thumbSize) * 0.75)",
|
|
6325
6079
|
display: "inline-flex",
|
|
6326
6080
|
justifyContent: "center",
|
|
@@ -6333,19 +6087,19 @@ var StyledThumb = (0, import_joy57.styled)(import_framer_motion29.motion.div)({
|
|
|
6333
6087
|
boxShadow: "var(--Switch-thumbShadow)",
|
|
6334
6088
|
color: "var(--Switch-thumbColor)",
|
|
6335
6089
|
backgroundColor: "var(--Switch-thumbBackground)",
|
|
6336
|
-
[`&.${
|
|
6090
|
+
[`&.${import_joy56.switchClasses.checked}`]: {
|
|
6337
6091
|
left: "unset",
|
|
6338
6092
|
right: "var(--Switch-thumbOffset)"
|
|
6339
6093
|
}
|
|
6340
6094
|
});
|
|
6341
|
-
var Thumb = (props) => /* @__PURE__ */
|
|
6095
|
+
var Thumb = (props) => /* @__PURE__ */ import_react46.default.createElement(StyledThumb, { ...props, layout: true, transition: spring });
|
|
6342
6096
|
var spring = {
|
|
6343
6097
|
type: "spring",
|
|
6344
6098
|
stiffness: 700,
|
|
6345
6099
|
damping: 30
|
|
6346
6100
|
};
|
|
6347
6101
|
var Switch = (props) => {
|
|
6348
|
-
return /* @__PURE__ */
|
|
6102
|
+
return /* @__PURE__ */ import_react46.default.createElement(
|
|
6349
6103
|
MotionSwitch,
|
|
6350
6104
|
{
|
|
6351
6105
|
...props,
|
|
@@ -6359,32 +6113,32 @@ var Switch = (props) => {
|
|
|
6359
6113
|
Switch.displayName = "Switch";
|
|
6360
6114
|
|
|
6361
6115
|
// src/components/Tabs/Tabs.tsx
|
|
6362
|
-
var
|
|
6363
|
-
var
|
|
6364
|
-
var StyledTabs = (0,
|
|
6116
|
+
var import_react47 = __toESM(require("react"));
|
|
6117
|
+
var import_joy57 = require("@mui/joy");
|
|
6118
|
+
var StyledTabs = (0, import_joy57.styled)(import_joy57.Tabs)(({ theme }) => ({
|
|
6365
6119
|
backgroundColor: theme.palette.background.body
|
|
6366
6120
|
}));
|
|
6367
6121
|
var Tabs = StyledTabs;
|
|
6368
6122
|
Tabs.displayName = "Tabs";
|
|
6369
|
-
var StyledTab = (0,
|
|
6123
|
+
var StyledTab = (0, import_joy57.styled)(import_joy57.Tab)(({ theme }) => ({
|
|
6370
6124
|
gap: theme.spacing(2),
|
|
6371
|
-
[`&:not(.${
|
|
6125
|
+
[`&:not(.${import_joy57.tabClasses.selected})`]: {
|
|
6372
6126
|
color: theme.palette.neutral[700]
|
|
6373
6127
|
},
|
|
6374
|
-
[`&.${
|
|
6128
|
+
[`&.${import_joy57.tabClasses.variantPlain}`]: {
|
|
6375
6129
|
backgroundColor: theme.palette.background.body
|
|
6376
6130
|
}
|
|
6377
6131
|
}));
|
|
6378
|
-
var Tab = (0,
|
|
6379
|
-
return /* @__PURE__ */
|
|
6132
|
+
var Tab = (0, import_react47.forwardRef)(function Tab2({ startDecorator, endDecorator, children, ...props }, ref) {
|
|
6133
|
+
return /* @__PURE__ */ import_react47.default.createElement(StyledTab, { ...props, ref }, startDecorator, children, endDecorator);
|
|
6380
6134
|
});
|
|
6381
6135
|
Tab.displayName = "Tab";
|
|
6382
|
-
var TabList =
|
|
6383
|
-
var TabPanel =
|
|
6136
|
+
var TabList = import_joy57.TabList;
|
|
6137
|
+
var TabPanel = import_joy57.TabPanel;
|
|
6384
6138
|
|
|
6385
6139
|
// src/components/ThemeProvider/ThemeProvider.tsx
|
|
6386
|
-
var
|
|
6387
|
-
var
|
|
6140
|
+
var import_react48 = __toESM(require("react"));
|
|
6141
|
+
var import_joy58 = require("@mui/joy");
|
|
6388
6142
|
var colorScheme = {
|
|
6389
6143
|
palette: {
|
|
6390
6144
|
danger: {
|
|
@@ -6437,7 +6191,7 @@ var colorScheme = {
|
|
|
6437
6191
|
}
|
|
6438
6192
|
}
|
|
6439
6193
|
};
|
|
6440
|
-
var defaultTheme = (0,
|
|
6194
|
+
var defaultTheme = (0, import_joy58.extendTheme)({
|
|
6441
6195
|
cssVarPrefix: "ceed",
|
|
6442
6196
|
spacing: 4,
|
|
6443
6197
|
breakpoints: {
|
|
@@ -6489,7 +6243,7 @@ var defaultTheme = (0, import_joy59.extendTheme)({
|
|
|
6489
6243
|
},
|
|
6490
6244
|
styleOverrides: {
|
|
6491
6245
|
root: {
|
|
6492
|
-
[`.${
|
|
6246
|
+
[`.${import_joy58.inputClasses.root}`]: {
|
|
6493
6247
|
// NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
|
|
6494
6248
|
"font-family": "monospace"
|
|
6495
6249
|
}
|
|
@@ -6502,7 +6256,7 @@ var defaultTheme = (0, import_joy59.extendTheme)({
|
|
|
6502
6256
|
},
|
|
6503
6257
|
styleOverrides: {
|
|
6504
6258
|
root: {
|
|
6505
|
-
[`.${
|
|
6259
|
+
[`.${import_joy58.inputClasses.root}`]: {
|
|
6506
6260
|
// NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
|
|
6507
6261
|
"font-family": "monospace"
|
|
6508
6262
|
}
|
|
@@ -6515,7 +6269,7 @@ var defaultTheme = (0, import_joy59.extendTheme)({
|
|
|
6515
6269
|
},
|
|
6516
6270
|
styleOverrides: {
|
|
6517
6271
|
root: {
|
|
6518
|
-
[`.${
|
|
6272
|
+
[`.${import_joy58.inputClasses.root}`]: {
|
|
6519
6273
|
// NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
|
|
6520
6274
|
"font-family": "monospace"
|
|
6521
6275
|
}
|
|
@@ -6528,7 +6282,7 @@ var defaultTheme = (0, import_joy59.extendTheme)({
|
|
|
6528
6282
|
},
|
|
6529
6283
|
styleOverrides: {
|
|
6530
6284
|
root: {
|
|
6531
|
-
[`.${
|
|
6285
|
+
[`.${import_joy58.inputClasses.root}`]: {
|
|
6532
6286
|
// NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
|
|
6533
6287
|
"font-family": "monospace"
|
|
6534
6288
|
}
|
|
@@ -6541,7 +6295,7 @@ var defaultTheme = (0, import_joy59.extendTheme)({
|
|
|
6541
6295
|
},
|
|
6542
6296
|
styleOverrides: {
|
|
6543
6297
|
root: {
|
|
6544
|
-
[`.${
|
|
6298
|
+
[`.${import_joy58.inputClasses.root}`]: {
|
|
6545
6299
|
// NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
|
|
6546
6300
|
"font-family": "monospace"
|
|
6547
6301
|
}
|
|
@@ -6583,7 +6337,7 @@ var defaultTheme = (0, import_joy59.extendTheme)({
|
|
|
6583
6337
|
outline: `${theme.palette.primary[500]} solid 2px`,
|
|
6584
6338
|
outlineOffset: "-2px"
|
|
6585
6339
|
},
|
|
6586
|
-
[`& .${
|
|
6340
|
+
[`& .${import_joy58.checkboxClasses.root}`]: {
|
|
6587
6341
|
verticalAlign: "middle"
|
|
6588
6342
|
}
|
|
6589
6343
|
})
|
|
@@ -6633,13 +6387,13 @@ var defaultTheme = (0, import_joy59.extendTheme)({
|
|
|
6633
6387
|
});
|
|
6634
6388
|
function ThemeProvider(props) {
|
|
6635
6389
|
const theme = props.theme || defaultTheme;
|
|
6636
|
-
return /* @__PURE__ */
|
|
6390
|
+
return /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null, /* @__PURE__ */ import_react48.default.createElement(import_joy58.CssVarsProvider, { theme }, /* @__PURE__ */ import_react48.default.createElement(import_joy58.CssBaseline, null), props.children));
|
|
6637
6391
|
}
|
|
6638
6392
|
ThemeProvider.displayName = "ThemeProvider";
|
|
6639
6393
|
|
|
6640
6394
|
// src/components/Uploader/Uploader.tsx
|
|
6641
|
-
var
|
|
6642
|
-
var
|
|
6395
|
+
var import_react49 = __toESM(require("react"));
|
|
6396
|
+
var import_joy59 = require("@mui/joy");
|
|
6643
6397
|
var import_CloudUploadRounded = __toESM(require("@mui/icons-material/CloudUploadRounded"));
|
|
6644
6398
|
var import_UploadFileRounded = __toESM(require("@mui/icons-material/UploadFileRounded"));
|
|
6645
6399
|
var import_ClearRounded = __toESM(require("@mui/icons-material/ClearRounded"));
|
|
@@ -6661,7 +6415,7 @@ var esmFiles = {
|
|
|
6661
6415
|
"@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/prevent-unhandled.js"
|
|
6662
6416
|
)
|
|
6663
6417
|
};
|
|
6664
|
-
var VisuallyHiddenInput = (0,
|
|
6418
|
+
var VisuallyHiddenInput = (0, import_joy59.styled)(import_joy59.Input)({
|
|
6665
6419
|
width: "1px",
|
|
6666
6420
|
height: "1px",
|
|
6667
6421
|
overflow: "hidden",
|
|
@@ -6670,18 +6424,18 @@ var VisuallyHiddenInput = (0, import_joy60.styled)(import_joy60.Input)({
|
|
|
6670
6424
|
clipPath: "inset(50%)",
|
|
6671
6425
|
position: "absolute"
|
|
6672
6426
|
});
|
|
6673
|
-
var PreviewRoot = (0,
|
|
6427
|
+
var PreviewRoot = (0, import_joy59.styled)(Stack_default, {
|
|
6674
6428
|
name: "Uploader",
|
|
6675
6429
|
slot: "PreviewRoot"
|
|
6676
6430
|
})({});
|
|
6677
|
-
var UploadCard = (0,
|
|
6431
|
+
var UploadCard = (0, import_joy59.styled)(Card, {
|
|
6678
6432
|
name: "Uploader",
|
|
6679
6433
|
slot: "UploadCard"
|
|
6680
6434
|
})(({ theme }) => ({
|
|
6681
6435
|
padding: theme.spacing(2.5),
|
|
6682
6436
|
border: `1px solid ${theme.palette.neutral.outlinedBorder}`
|
|
6683
6437
|
}));
|
|
6684
|
-
var UploadFileIcon = (0,
|
|
6438
|
+
var UploadFileIcon = (0, import_joy59.styled)(import_UploadFileRounded.default, {
|
|
6685
6439
|
name: "Uploader",
|
|
6686
6440
|
slot: "UploadFileIcon"
|
|
6687
6441
|
})(({ theme }) => ({
|
|
@@ -6689,7 +6443,7 @@ var UploadFileIcon = (0, import_joy60.styled)(import_UploadFileRounded.default,
|
|
|
6689
6443
|
width: "32px",
|
|
6690
6444
|
height: "32px"
|
|
6691
6445
|
}));
|
|
6692
|
-
var ClearIcon2 = (0,
|
|
6446
|
+
var ClearIcon2 = (0, import_joy59.styled)(import_ClearRounded.default, {
|
|
6693
6447
|
name: "Uploader",
|
|
6694
6448
|
slot: "ClearIcon"
|
|
6695
6449
|
})(({ theme }) => ({
|
|
@@ -6715,7 +6469,7 @@ var getFileSize = (n) => {
|
|
|
6715
6469
|
};
|
|
6716
6470
|
var Preview = (props) => {
|
|
6717
6471
|
const { files, uploaded, onDelete } = props;
|
|
6718
|
-
return /* @__PURE__ */
|
|
6472
|
+
return /* @__PURE__ */ import_react49.default.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => /* @__PURE__ */ import_react49.default.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" }, /* @__PURE__ */ import_react49.default.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2 }, /* @__PURE__ */ import_react49.default.createElement(UploadFileIcon, null), /* @__PURE__ */ import_react49.default.createElement(Stack_default, { flex: "1", sx: { overflow: "hidden" } }, /* @__PURE__ */ import_react49.default.createElement(
|
|
6719
6473
|
Typography_default,
|
|
6720
6474
|
{
|
|
6721
6475
|
level: "body-sm",
|
|
@@ -6727,15 +6481,15 @@ var Preview = (props) => {
|
|
|
6727
6481
|
}
|
|
6728
6482
|
},
|
|
6729
6483
|
file.name
|
|
6730
|
-
), !!file.size && /* @__PURE__ */
|
|
6484
|
+
), !!file.size && /* @__PURE__ */ import_react49.default.createElement(Typography_default, { level: "body-xs", fontWeight: "300", lineHeight: "1.33", textColor: "text.tertiary" }, getFileSize(file.size))), /* @__PURE__ */ import_react49.default.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ import_react49.default.createElement(ClearIcon2, null))))));
|
|
6731
6485
|
};
|
|
6732
|
-
var UploaderRoot = (0,
|
|
6486
|
+
var UploaderRoot = (0, import_joy59.styled)(Stack_default, {
|
|
6733
6487
|
name: "Uploader",
|
|
6734
6488
|
slot: "root"
|
|
6735
6489
|
})(({ theme }) => ({
|
|
6736
6490
|
gap: theme.spacing(2)
|
|
6737
6491
|
}));
|
|
6738
|
-
var FileDropZone = (0,
|
|
6492
|
+
var FileDropZone = (0, import_joy59.styled)(Sheet_default, {
|
|
6739
6493
|
name: "Uploader",
|
|
6740
6494
|
slot: "dropZone",
|
|
6741
6495
|
shouldForwardProp: (prop) => prop !== "error" && prop !== "disabled"
|
|
@@ -6756,7 +6510,7 @@ var FileDropZone = (0, import_joy60.styled)(Sheet_default, {
|
|
|
6756
6510
|
}
|
|
6757
6511
|
})
|
|
6758
6512
|
);
|
|
6759
|
-
var UploaderIcon = (0,
|
|
6513
|
+
var UploaderIcon = (0, import_joy59.styled)(import_CloudUploadRounded.default, {
|
|
6760
6514
|
name: "Uploader",
|
|
6761
6515
|
slot: "iconContainer",
|
|
6762
6516
|
shouldForwardProp: (prop) => prop !== "error" && prop !== "disabled"
|
|
@@ -6770,7 +6524,7 @@ var UploaderIcon = (0, import_joy60.styled)(import_CloudUploadRounded.default, {
|
|
|
6770
6524
|
}
|
|
6771
6525
|
})
|
|
6772
6526
|
);
|
|
6773
|
-
var Uploader =
|
|
6527
|
+
var Uploader = import_react49.default.memo(
|
|
6774
6528
|
(props) => {
|
|
6775
6529
|
const {
|
|
6776
6530
|
accept,
|
|
@@ -6787,14 +6541,14 @@ var Uploader = import_react50.default.memo(
|
|
|
6787
6541
|
error: errorProp,
|
|
6788
6542
|
helperText: helperTextProp
|
|
6789
6543
|
} = props;
|
|
6790
|
-
const dropZoneRef = (0,
|
|
6791
|
-
const inputRef = (0,
|
|
6792
|
-
const [errorText, setErrorText] = (0,
|
|
6793
|
-
const [files, setFiles] = (0,
|
|
6794
|
-
const [uploaded, setUploaded] = (0,
|
|
6795
|
-
const [previewState, setPreviewState] = (0,
|
|
6796
|
-
const accepts = (0,
|
|
6797
|
-
const parsedAccepts = (0,
|
|
6544
|
+
const dropZoneRef = (0, import_react49.useRef)(null);
|
|
6545
|
+
const inputRef = (0, import_react49.useRef)(null);
|
|
6546
|
+
const [errorText, setErrorText] = (0, import_react49.useState)();
|
|
6547
|
+
const [files, setFiles] = (0, import_react49.useState)([]);
|
|
6548
|
+
const [uploaded, setUploaded] = (0, import_react49.useState)(props.uploaded || []);
|
|
6549
|
+
const [previewState, setPreviewState] = (0, import_react49.useState)("idle");
|
|
6550
|
+
const accepts = (0, import_react49.useMemo)(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
|
|
6551
|
+
const parsedAccepts = (0, import_react49.useMemo)(
|
|
6798
6552
|
() => accepts.flatMap((type) => {
|
|
6799
6553
|
if (["image/*", "video/*", "audio/*"].includes(type)) {
|
|
6800
6554
|
return ALL_EXTENSIONS_BY_TYPE[type];
|
|
@@ -6803,7 +6557,7 @@ var Uploader = import_react50.default.memo(
|
|
|
6803
6557
|
}),
|
|
6804
6558
|
[accepts]
|
|
6805
6559
|
);
|
|
6806
|
-
const helperText = (0,
|
|
6560
|
+
const helperText = (0, import_react49.useMemo)(() => {
|
|
6807
6561
|
if (helperTextProp) {
|
|
6808
6562
|
return helperTextProp;
|
|
6809
6563
|
}
|
|
@@ -6833,12 +6587,12 @@ var Uploader = import_react50.default.memo(
|
|
|
6833
6587
|
}
|
|
6834
6588
|
return helperTexts.join(", ");
|
|
6835
6589
|
}, [accepts, maxFileTotalSize, maxCount, helperTextProp]);
|
|
6836
|
-
const error = (0,
|
|
6837
|
-
const showDropZone = (0,
|
|
6590
|
+
const error = (0, import_react49.useMemo)(() => !!errorText || errorProp, [errorProp, errorText]);
|
|
6591
|
+
const showDropZone = (0, import_react49.useMemo)(
|
|
6838
6592
|
() => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
|
|
6839
6593
|
[files, maxCount, uploaded]
|
|
6840
6594
|
);
|
|
6841
|
-
const addFiles = (0,
|
|
6595
|
+
const addFiles = (0, import_react49.useCallback)(
|
|
6842
6596
|
(uploads) => {
|
|
6843
6597
|
try {
|
|
6844
6598
|
const types = parsedAccepts.map((type) => type.replace(".", "")) || [];
|
|
@@ -6883,7 +6637,7 @@ var Uploader = import_react50.default.memo(
|
|
|
6883
6637
|
},
|
|
6884
6638
|
[files, uploaded, maxCount, parsedAccepts, maxFileSize, maxFileTotalSize, name, onChange]
|
|
6885
6639
|
);
|
|
6886
|
-
(0,
|
|
6640
|
+
(0, import_react49.useEffect)(() => {
|
|
6887
6641
|
if (!dropZoneRef.current || disabled) {
|
|
6888
6642
|
return;
|
|
6889
6643
|
}
|
|
@@ -6921,7 +6675,7 @@ var Uploader = import_react50.default.memo(
|
|
|
6921
6675
|
);
|
|
6922
6676
|
return () => cleanup?.();
|
|
6923
6677
|
}, [disabled, addFiles]);
|
|
6924
|
-
(0,
|
|
6678
|
+
(0, import_react49.useEffect)(() => {
|
|
6925
6679
|
if (inputRef.current && minCount) {
|
|
6926
6680
|
if (files.length < minCount) {
|
|
6927
6681
|
inputRef.current.setCustomValidity(`At least ${minCount} files are required.`);
|
|
@@ -6930,14 +6684,14 @@ var Uploader = import_react50.default.memo(
|
|
|
6930
6684
|
}
|
|
6931
6685
|
}
|
|
6932
6686
|
}, [inputRef, files, minCount]);
|
|
6933
|
-
const handleFileChanged = (0,
|
|
6687
|
+
const handleFileChanged = (0, import_react49.useCallback)(
|
|
6934
6688
|
(event) => {
|
|
6935
6689
|
const files2 = Array.from(event.target.files || []);
|
|
6936
6690
|
addFiles(files2);
|
|
6937
6691
|
},
|
|
6938
6692
|
[addFiles]
|
|
6939
6693
|
);
|
|
6940
|
-
const handleDeleteFile = (0,
|
|
6694
|
+
const handleDeleteFile = (0, import_react49.useCallback)(
|
|
6941
6695
|
(deletedFile) => {
|
|
6942
6696
|
if (deletedFile instanceof File) {
|
|
6943
6697
|
setFiles((current) => {
|
|
@@ -6957,10 +6711,10 @@ var Uploader = import_react50.default.memo(
|
|
|
6957
6711
|
},
|
|
6958
6712
|
[name, onChange, onDelete]
|
|
6959
6713
|
);
|
|
6960
|
-
const handleUploaderButtonClick = (0,
|
|
6714
|
+
const handleUploaderButtonClick = (0, import_react49.useCallback)(() => {
|
|
6961
6715
|
inputRef.current?.click();
|
|
6962
6716
|
}, []);
|
|
6963
|
-
const uploader = /* @__PURE__ */
|
|
6717
|
+
const uploader = /* @__PURE__ */ import_react49.default.createElement(
|
|
6964
6718
|
FileDropZone,
|
|
6965
6719
|
{
|
|
6966
6720
|
state: previewState,
|
|
@@ -6969,8 +6723,8 @@ var Uploader = import_react50.default.memo(
|
|
|
6969
6723
|
ref: dropZoneRef,
|
|
6970
6724
|
onClick: handleUploaderButtonClick
|
|
6971
6725
|
},
|
|
6972
|
-
/* @__PURE__ */
|
|
6973
|
-
/* @__PURE__ */
|
|
6726
|
+
/* @__PURE__ */ import_react49.default.createElement(Stack_default, { alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react49.default.createElement(UploaderIcon, { state: previewState, error: !!(error || errorText), disabled })),
|
|
6727
|
+
/* @__PURE__ */ import_react49.default.createElement(
|
|
6974
6728
|
VisuallyHiddenInput,
|
|
6975
6729
|
{
|
|
6976
6730
|
disabled,
|
|
@@ -6993,7 +6747,7 @@ var Uploader = import_react50.default.memo(
|
|
|
6993
6747
|
}
|
|
6994
6748
|
)
|
|
6995
6749
|
);
|
|
6996
|
-
return /* @__PURE__ */
|
|
6750
|
+
return /* @__PURE__ */ import_react49.default.createElement(UploaderRoot, null, showDropZone && /* @__PURE__ */ import_react49.default.createElement(FormControl_default, { size, error: !!(error || errorText), disabled, required: !!minCount }, label && /* @__PURE__ */ import_react49.default.createElement(FormLabel_default, null, label), uploader, /* @__PURE__ */ import_react49.default.createElement(FormHelperText_default, null, /* @__PURE__ */ import_react49.default.createElement(Stack_default, null, errorText && /* @__PURE__ */ import_react49.default.createElement("div", null, errorText), /* @__PURE__ */ import_react49.default.createElement("div", null, helperText)))), [...uploaded, ...files].length > 0 && /* @__PURE__ */ import_react49.default.createElement(Preview, { files, uploaded, onDelete: handleDeleteFile }));
|
|
6997
6751
|
}
|
|
6998
6752
|
);
|
|
6999
6753
|
Uploader.displayName = "Uploader";
|