@soyfri/shared-library 2.0.0-beta.9 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Button-C17mExpd.cjs.map +1 -1
- package/Button-UkkP-bNw.js.map +1 -1
- package/README.md +182 -150
- package/components/ActionMenu/ActionMenu.cjs +52 -52
- package/components/ActionMenu/ActionMenu.cjs.map +1 -1
- package/components/ActionMenu/ActionMenu.d.ts +20 -36
- package/components/ActionMenu/ActionMenu.js +55 -55
- package/components/ActionMenu/ActionMenu.js.map +1 -1
- package/components/ActionMenu/index.d.ts +2 -2
- package/components/AppBar/AppBar.cjs +2 -219
- package/components/AppBar/AppBar.cjs.map +1 -1
- package/components/AppBar/AppBar.d.ts +6 -6
- package/components/AppBar/AppBar.js +5 -222
- package/components/AppBar/AppBar.js.map +1 -1
- package/components/AppBar/index.d.ts +0 -6
- package/components/Autocomplete/Autocomplete.cjs +93 -94
- package/components/Autocomplete/Autocomplete.cjs.map +1 -1
- package/components/Autocomplete/Autocomplete.d.ts +29 -26
- package/components/Autocomplete/Autocomplete.definitions.d.ts +2 -1
- package/components/Autocomplete/Autocomplete.helpers.d.ts +12 -8
- package/components/Autocomplete/Autocomplete.js +94 -95
- package/components/Autocomplete/Autocomplete.js.map +1 -1
- package/components/Autocomplete/_parts/AutocompleteChips.d.ts +7 -6
- package/components/Autocomplete/_parts/AutocompleteOption.d.ts +10 -13
- package/components/Autocomplete/index.d.ts +1 -1
- package/components/Avatar/Avatar.cjs +17 -18
- package/components/Avatar/Avatar.cjs.map +1 -1
- package/components/Avatar/Avatar.js +17 -18
- package/components/Avatar/Avatar.js.map +1 -1
- package/components/Avatar/index.d.ts +1 -0
- package/components/Button/Button.d.ts +5 -5
- package/components/Button/index.d.ts +1 -0
- package/components/Card/Card.cjs +3 -92
- package/components/Card/Card.cjs.map +1 -1
- package/components/Card/Card.d.ts +3 -50
- package/components/Card/Card.js +5 -94
- package/components/Card/Card.js.map +1 -1
- package/components/Card/Card.sx.d.ts +3 -6
- package/components/Card/index.d.ts +1 -1
- package/components/Checkbox/Checkbox.cjs +189 -0
- package/components/Checkbox/Checkbox.cjs.map +1 -0
- package/components/Checkbox/Checkbox.d.ts +55 -0
- package/components/Checkbox/Checkbox.js +189 -0
- package/components/Checkbox/Checkbox.js.map +1 -0
- package/components/Checkbox/Checkbox.sx.d.ts +13 -0
- package/components/Checkbox/index.d.ts +2 -0
- package/components/Checkbox.d.ts +6 -0
- package/components/Chip/Chip.cjs +2 -1
- package/components/Chip/Chip.cjs.map +1 -1
- package/components/Chip/Chip.js +2 -1
- package/components/Chip/Chip.js.map +1 -1
- package/components/Chip/index.d.ts +2 -1
- package/components/Chip.d.ts +4 -0
- package/components/DatePicker/DatePicker.cjs +40 -63
- package/components/DatePicker/DatePicker.cjs.map +1 -1
- package/components/DatePicker/DatePicker.d.ts +1 -13
- package/components/DatePicker/DatePicker.js +36 -59
- package/components/DatePicker/DatePicker.js.map +1 -1
- package/components/DatePicker/index.d.ts +1 -1
- package/components/DateTimePicker/DateTimePicker.cjs +58 -82
- package/components/DateTimePicker/DateTimePicker.cjs.map +1 -1
- package/components/DateTimePicker/DateTimePicker.d.ts +9 -17
- package/components/DateTimePicker/DateTimePicker.definitions.d.ts +2 -0
- package/components/DateTimePicker/DateTimePicker.helpers.d.ts +4 -2
- package/components/DateTimePicker/DateTimePicker.js +54 -78
- package/components/DateTimePicker/DateTimePicker.js.map +1 -1
- package/components/DateTimePicker/index.d.ts +1 -1
- package/components/Drawer/Drawer.cjs +12 -6
- package/components/Drawer/Drawer.cjs.map +1 -1
- package/components/Drawer/Drawer.d.ts +3 -1
- package/components/Drawer/Drawer.js +13 -7
- package/components/Drawer/Drawer.js.map +1 -1
- package/components/Drawer/DrawerItem.d.ts +6 -1
- package/components/Gallery/Gallery.cjs +154 -79
- package/components/Gallery/Gallery.cjs.map +1 -1
- package/components/Gallery/Gallery.d.ts +25 -9
- package/components/Gallery/Gallery.js +154 -79
- package/components/Gallery/Gallery.js.map +1 -1
- package/components/Gallery/GalleryLightbox.d.ts +6 -10
- package/components/Gallery/GalleryMain.d.ts +3 -7
- package/components/Gallery/GalleryThumbnails.d.ts +7 -11
- package/components/Gallery/index.d.ts +2 -1
- package/components/Gallery.d.ts +4 -0
- package/components/Icon/Icon.cjs +6 -8
- package/components/Icon/Icon.cjs.map +1 -1
- package/components/Icon/Icon.d.ts +11 -17
- package/components/Icon/Icon.js +6 -8
- package/components/Icon/Icon.js.map +1 -1
- package/components/Icon/index.d.ts +2 -1
- package/components/Icon.d.ts +4 -0
- package/components/Input/Input.cjs +26 -13
- package/components/Input/Input.cjs.map +1 -1
- package/components/Input/Input.d.ts +9 -2
- package/components/Input/Input.helpers.d.ts +3 -3
- package/components/Input/Input.js +23 -10
- package/components/Input/Input.js.map +1 -1
- package/components/Input/index.d.ts +1 -1
- package/components/InputGroup/InputGroup.cjs +23 -22
- package/components/InputGroup/InputGroup.cjs.map +1 -1
- package/components/InputGroup/InputGroup.d.ts +4 -4
- package/components/InputGroup/InputGroup.js +22 -21
- package/components/InputGroup/InputGroup.js.map +1 -1
- package/components/InputGroup/index.d.ts +2 -1
- package/components/InputGroup.d.ts +4 -0
- package/components/Modal/Modal.cjs +127 -98
- package/components/Modal/Modal.cjs.map +1 -1
- package/components/Modal/Modal.d.ts +20 -5
- package/components/Modal/Modal.js +130 -101
- package/components/Modal/Modal.js.map +1 -1
- package/components/Modal/ModalBody.d.ts +6 -1
- package/components/Modal/ModalFooter.d.ts +4 -4
- package/components/Modal/ModalHeader.d.ts +6 -1
- package/components/Modal/index.d.ts +4 -2
- package/components/Modal.d.ts +4 -0
- package/components/RadioGroup/RadioGroup.cjs +9 -7
- package/components/RadioGroup/RadioGroup.cjs.map +1 -1
- package/components/RadioGroup/RadioGroup.d.ts +9 -3
- package/components/RadioGroup/RadioGroup.js +9 -7
- package/components/RadioGroup/RadioGroup.js.map +1 -1
- package/components/RadioGroup/index.d.ts +1 -1
- package/components/Select/Select.cjs +129 -264
- package/components/Select/Select.cjs.map +1 -1
- package/components/Select/Select.d.ts +35 -20
- package/components/Select/Select.helpers.d.ts +6 -19
- package/components/Select/Select.js +134 -269
- package/components/Select/Select.js.map +1 -1
- package/components/Select/index.d.ts +1 -1
- package/components/Stat/Stat.cjs +2 -2
- package/components/Stat/Stat.cjs.map +1 -1
- package/components/Stat/Stat.js +2 -2
- package/components/Stat/Stat.js.map +1 -1
- package/components/Stat/index.d.ts +2 -1
- package/components/Stat.d.ts +4 -0
- package/components/StatusMessage/StatusMessage.cjs +84 -55
- package/components/StatusMessage/StatusMessage.cjs.map +1 -1
- package/components/StatusMessage/StatusMessage.d.ts +20 -36
- package/components/StatusMessage/StatusMessage.js +86 -57
- package/components/StatusMessage/StatusMessage.js.map +1 -1
- package/components/StatusMessage/StatusMessageContext.d.ts +16 -0
- package/components/StatusMessage/index.d.ts +4 -1
- package/components/StatusMessage.d.ts +4 -0
- package/components/Stepper/Stepper.cjs +289 -55
- package/components/Stepper/Stepper.cjs.map +1 -1
- package/components/Stepper/Stepper.d.ts +9 -20
- package/components/Stepper/Stepper.js +291 -57
- package/components/Stepper/Stepper.js.map +1 -1
- package/{hooks/Wizard/WizardContext.d.ts → components/Stepper/StepperContext.d.ts} +29 -23
- package/components/Stepper/_hooks/useHorizontalScroll.d.ts +19 -0
- package/components/Stepper/_parts/StepperScrollArrow.d.ts +19 -0
- package/components/Stepper/index.d.ts +6 -2
- package/components/Stepper.d.ts +4 -0
- package/components/Switch/Switch.cjs +5 -2
- package/components/Switch/Switch.cjs.map +1 -1
- package/components/Switch/Switch.d.ts +7 -2
- package/components/Switch/Switch.js +5 -2
- package/components/Switch/Switch.js.map +1 -1
- package/components/Tabs/Tabs.cjs +45 -29
- package/components/Tabs/Tabs.cjs.map +1 -1
- package/components/Tabs/Tabs.d.ts +21 -16
- package/components/Tabs/Tabs.js +46 -30
- package/components/Tabs/Tabs.js.map +1 -1
- package/components/Tabs/index.d.ts +4 -2
- package/components/Tabs.d.ts +4 -0
- package/components/Timeline/Timeline.cjs +3 -2
- package/components/Timeline/Timeline.cjs.map +1 -1
- package/components/Timeline/Timeline.d.ts +4 -8
- package/components/Timeline/Timeline.js +3 -2
- package/components/Timeline/Timeline.js.map +1 -1
- package/components/Timeline/index.d.ts +4 -2
- package/components/Timeline.d.ts +4 -0
- package/components/_shared/mergeSx.d.ts +7 -0
- package/{formField.sx-DfVbMe0V.js → formField.sx-8_QRnKxv.js} +2 -11
- package/formField.sx-8_QRnKxv.js.map +1 -0
- package/{formField.sx-CQ1mbk9M.cjs → formField.sx-BAX7KwMR.cjs} +10 -19
- package/formField.sx-BAX7KwMR.cjs.map +1 -0
- package/index.cjs +31 -2
- package/index.cjs.map +1 -1
- package/index.d.ts +1 -0
- package/index.js +16 -2
- package/index.js.map +1 -1
- package/mergeSx-BXoNZjB_.js +10 -0
- package/mergeSx-BXoNZjB_.js.map +1 -0
- package/mergeSx-Dbccoo_H.cjs +9 -0
- package/mergeSx-Dbccoo_H.cjs.map +1 -0
- package/mui.d.ts +3 -2
- package/package.json +6 -16
- package/theme/componentStyles.d.ts +1 -1
- package/tokens-BRrcP_p_.js +21 -0
- package/tokens-BRrcP_p_.js.map +1 -0
- package/tokens-jaWWNk39.cjs +20 -0
- package/tokens-jaWWNk39.cjs.map +1 -0
- package/utils/index.d.ts +2 -0
- package/{components/ScrollTopButton → utils}/scrollToTop.d.ts +6 -7
- package/components/AppBar/AppBarBrand.d.ts +0 -31
- package/components/AppBar/AppBarUserMenu.d.ts +0 -65
- package/components/Autocomplete/Autocomplete.types.d.ts +0 -1
- package/components/DatePicker/DatePicker.types.d.ts +0 -1
- package/components/DateTimePicker/DateTimePicker.types.d.ts +0 -1
- package/components/Input/Input.types.d.ts +0 -1
- package/components/PageLoader/PageLoader.cjs +0 -61
- package/components/PageLoader/PageLoader.cjs.map +0 -1
- package/components/PageLoader/PageLoader.d.ts +0 -38
- package/components/PageLoader/PageLoader.js +0 -61
- package/components/PageLoader/PageLoader.js.map +0 -1
- package/components/PageLoader/index.d.ts +0 -2
- package/components/PageLoader.d.ts +0 -6
- package/components/RadioGroup/RadioGroup.types.d.ts +0 -1
- package/components/ScrollTopButton/ScrollTopButton.cjs +0 -79
- package/components/ScrollTopButton/ScrollTopButton.cjs.map +0 -1
- package/components/ScrollTopButton/ScrollTopButton.d.ts +0 -48
- package/components/ScrollTopButton/ScrollTopButton.js +0 -79
- package/components/ScrollTopButton/ScrollTopButton.js.map +0 -1
- package/components/ScrollTopButton/index.d.ts +0 -4
- package/components/ScrollTopButton.d.ts +0 -6
- package/components/Select/Select.definitions.d.ts +0 -17
- package/components/Select/Select.types.d.ts +0 -1
- package/components/Select/_parts/SelectSearchHeader.d.ts +0 -15
- package/components/Select/_parts/SelectValue.d.ts +0 -22
- package/formField.sx-CQ1mbk9M.cjs.map +0 -1
- package/formField.sx-DfVbMe0V.js.map +0 -1
- package/hooks/Wizard/Wizard.cjs +0 -7
- package/hooks/Wizard/Wizard.cjs.map +0 -1
- package/hooks/Wizard/Wizard.js +0 -7
- package/hooks/Wizard/Wizard.js.map +0 -1
- package/hooks/Wizard/index.d.ts +0 -3
- package/hooks/Wizard/useWizard.d.ts +0 -9
- package/hooks/Wizard.d.ts +0 -2
- package/useWizard-CWdIxZzX.cjs +0 -94
- package/useWizard-CWdIxZzX.cjs.map +0 -1
- package/useWizard-CWq--C3o.js +0 -95
- package/useWizard-CWq--C3o.js.map +0 -1
- /package/{styles.css → index.css} +0 -0
|
@@ -18,19 +18,7 @@ var __spreadValues = (a, b) => {
|
|
|
18
18
|
return a;
|
|
19
19
|
};
|
|
20
20
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
-
|
|
22
|
-
var target = {};
|
|
23
|
-
for (var prop in source)
|
|
24
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
if (source != null && __getOwnPropSymbols)
|
|
27
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
32
|
-
};
|
|
33
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
21
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
34
22
|
const jsxRuntime = require("react/jsx-runtime");
|
|
35
23
|
const React = require("react");
|
|
36
24
|
const material = require("@mui/material");
|
|
@@ -38,8 +26,9 @@ const InfoOutlinedIcon = require("@mui/icons-material/InfoOutlined");
|
|
|
38
26
|
const WarningAmberIcon = require("@mui/icons-material/WarningAmber");
|
|
39
27
|
const ErrorOutlineIcon = require("@mui/icons-material/ErrorOutline");
|
|
40
28
|
const CheckCircleOutlineIcon = require("@mui/icons-material/CheckCircleOutline");
|
|
29
|
+
const Button = require("../../Button-C17mExpd.cjs");
|
|
30
|
+
const mergeSx = require("../../mergeSx-Dbccoo_H.cjs");
|
|
41
31
|
const ModalFooter = ({
|
|
42
|
-
// Renombrado
|
|
43
32
|
children,
|
|
44
33
|
showCloseButton = true,
|
|
45
34
|
closeButtonText = "Cerrar",
|
|
@@ -47,42 +36,74 @@ const ModalFooter = ({
|
|
|
47
36
|
onClose,
|
|
48
37
|
actions = []
|
|
49
38
|
}) => {
|
|
50
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
{
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
39
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
40
|
+
material.Box,
|
|
41
|
+
{
|
|
42
|
+
sx: {
|
|
43
|
+
padding: 2,
|
|
44
|
+
borderTop: (theme) => `1px solid ${theme.palette.divider}`,
|
|
45
|
+
display: "flex",
|
|
46
|
+
justifyContent: "flex-end",
|
|
47
|
+
gap: 1
|
|
48
|
+
},
|
|
49
|
+
children: [
|
|
50
|
+
children,
|
|
51
|
+
/* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, children: [
|
|
52
|
+
showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
|
|
53
|
+
Button.Button,
|
|
54
|
+
{
|
|
55
|
+
onClick: onClose,
|
|
56
|
+
disabled: closeButtonDisabled,
|
|
57
|
+
variant: "outlined",
|
|
58
|
+
color: "secondary",
|
|
59
|
+
children: closeButtonText
|
|
60
|
+
}
|
|
61
|
+
),
|
|
62
|
+
actions.map((action) => {
|
|
63
|
+
const { buttonProps, text, onClick, disabled, variant, color } = action;
|
|
64
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
65
|
+
Button.Button,
|
|
66
|
+
__spreadProps(__spreadValues({
|
|
67
|
+
onClick,
|
|
68
|
+
disabled,
|
|
69
|
+
variant: variant || "contained",
|
|
70
|
+
color: color || "primary"
|
|
71
|
+
}, buttonProps), {
|
|
72
|
+
children: text
|
|
73
|
+
}),
|
|
74
|
+
text
|
|
75
|
+
);
|
|
76
|
+
})
|
|
77
|
+
] })
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
};
|
|
82
|
+
ModalFooter.displayName = "ModalFooter";
|
|
83
|
+
const ModalHeader = ({ children, id }) => {
|
|
84
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
85
|
+
material.Box,
|
|
86
|
+
{
|
|
87
|
+
sx: {
|
|
88
|
+
padding: 2,
|
|
89
|
+
borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
|
|
90
|
+
display: "flex",
|
|
91
|
+
alignItems: "center",
|
|
92
|
+
justifyContent: "space-between"
|
|
93
|
+
},
|
|
94
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { id, variant: "h6", component: "h2", children })
|
|
95
|
+
}
|
|
96
|
+
);
|
|
80
97
|
};
|
|
81
|
-
|
|
82
|
-
|
|
98
|
+
ModalHeader.displayName = "ModalHeader";
|
|
99
|
+
const ModalBody = ({ children, id }) => {
|
|
100
|
+
return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { id, sx: { padding: 2, overflowY: "auto", flexGrow: 1 }, children });
|
|
83
101
|
};
|
|
84
|
-
|
|
85
|
-
|
|
102
|
+
ModalBody.displayName = "ModalBody";
|
|
103
|
+
const isModalSlot = (child, Component, displayName) => {
|
|
104
|
+
if (child.type === Component) return true;
|
|
105
|
+
const type = child.type;
|
|
106
|
+
return (type == null ? void 0 : type.displayName) === displayName;
|
|
86
107
|
};
|
|
87
108
|
const modalStyle = {
|
|
88
109
|
position: "absolute",
|
|
@@ -99,22 +120,22 @@ const severityConfig = {
|
|
|
99
120
|
info: {
|
|
100
121
|
color: "primary",
|
|
101
122
|
icon: /* @__PURE__ */ jsxRuntime.jsx(InfoOutlinedIcon, { sx: { fontSize: 48 } }),
|
|
102
|
-
|
|
123
|
+
paletteKey: "primary"
|
|
103
124
|
},
|
|
104
125
|
warning: {
|
|
105
126
|
color: "warning",
|
|
106
127
|
icon: /* @__PURE__ */ jsxRuntime.jsx(WarningAmberIcon, { sx: { fontSize: 48 } }),
|
|
107
|
-
|
|
128
|
+
paletteKey: "warning"
|
|
108
129
|
},
|
|
109
130
|
error: {
|
|
110
131
|
color: "error",
|
|
111
132
|
icon: /* @__PURE__ */ jsxRuntime.jsx(ErrorOutlineIcon, { sx: { fontSize: 48 } }),
|
|
112
|
-
|
|
133
|
+
paletteKey: "error"
|
|
113
134
|
},
|
|
114
135
|
success: {
|
|
115
136
|
color: "success",
|
|
116
137
|
icon: /* @__PURE__ */ jsxRuntime.jsx(CheckCircleOutlineIcon, { sx: { fontSize: 48 } }),
|
|
117
|
-
|
|
138
|
+
paletteKey: "success"
|
|
118
139
|
}
|
|
119
140
|
};
|
|
120
141
|
const Modal = React.forwardRef(
|
|
@@ -129,7 +150,12 @@ const Modal = React.forwardRef(
|
|
|
129
150
|
closeButtonDisabled = false,
|
|
130
151
|
actions = [],
|
|
131
152
|
maxWidth = "sm",
|
|
153
|
+
hiddenHeader = false,
|
|
154
|
+
hiddenBody = false,
|
|
132
155
|
hiddenFooter = false,
|
|
156
|
+
sx,
|
|
157
|
+
paperSx,
|
|
158
|
+
className,
|
|
133
159
|
// Props del modo confirm
|
|
134
160
|
onConfirm,
|
|
135
161
|
confirmText = "Confirmar",
|
|
@@ -139,6 +165,8 @@ const Modal = React.forwardRef(
|
|
|
139
165
|
}, ref) => {
|
|
140
166
|
const [internalOpen, setInternalOpen] = React.useState(false);
|
|
141
167
|
const [confirmLoading, setConfirmLoading] = React.useState(false);
|
|
168
|
+
const titleId = React.useId();
|
|
169
|
+
const descId = React.useId();
|
|
142
170
|
const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
|
|
143
171
|
React.useImperativeHandle(ref, () => ({
|
|
144
172
|
open: () => setInternalOpen(true),
|
|
@@ -156,15 +184,19 @@ const Modal = React.forwardRef(
|
|
|
156
184
|
handleCloseInternal();
|
|
157
185
|
return;
|
|
158
186
|
}
|
|
187
|
+
const result = onConfirm();
|
|
188
|
+
if (!(result instanceof Promise)) {
|
|
189
|
+
handleCloseInternal();
|
|
190
|
+
return;
|
|
191
|
+
}
|
|
192
|
+
setConfirmLoading(true);
|
|
159
193
|
try {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}
|
|
194
|
+
await result;
|
|
195
|
+
handleCloseInternal();
|
|
196
|
+
} catch (err) {
|
|
197
|
+
console.error("Modal onConfirm failed:", err);
|
|
165
198
|
} finally {
|
|
166
199
|
setConfirmLoading(false);
|
|
167
|
-
handleCloseInternal();
|
|
168
200
|
}
|
|
169
201
|
};
|
|
170
202
|
const theme = material.useTheme();
|
|
@@ -185,9 +217,11 @@ const Modal = React.forwardRef(
|
|
|
185
217
|
case false:
|
|
186
218
|
return "auto";
|
|
187
219
|
default:
|
|
188
|
-
return 500;
|
|
220
|
+
return typeof maxWidth === "string" ? maxWidth : 500;
|
|
189
221
|
}
|
|
190
222
|
};
|
|
223
|
+
const paperBaseSx = __spreadProps(__spreadValues({}, modalStyle), { width: getWidth() });
|
|
224
|
+
const mergedPaperSx = mergeSx.mergeSx(paperBaseSx, paperSx);
|
|
191
225
|
if (mode === "confirm") {
|
|
192
226
|
const config = severityConfig[severity];
|
|
193
227
|
const message = confirmMessage != null ? confirmMessage : children;
|
|
@@ -196,9 +230,11 @@ const Modal = React.forwardRef(
|
|
|
196
230
|
{
|
|
197
231
|
open: isOpen,
|
|
198
232
|
onClose: handleCloseInternal,
|
|
199
|
-
"aria-labelledby":
|
|
233
|
+
"aria-labelledby": title ? titleId : void 0,
|
|
234
|
+
"aria-describedby": message ? descId : void 0,
|
|
200
235
|
closeAfterTransition: true,
|
|
201
|
-
|
|
236
|
+
sx,
|
|
237
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(material.Paper, { className, sx: mergedPaperSx, children: [
|
|
202
238
|
/* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { spacing: 2.5, sx: { p: 3, alignItems: "center", textAlign: "center" }, children: [
|
|
203
239
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
204
240
|
material.Box,
|
|
@@ -207,8 +243,8 @@ const Modal = React.forwardRef(
|
|
|
207
243
|
width: 72,
|
|
208
244
|
height: 72,
|
|
209
245
|
borderRadius: "50%",
|
|
210
|
-
backgroundColor: (t) => t.palette[
|
|
211
|
-
color: (t) => t.palette[
|
|
246
|
+
backgroundColor: (t) => t.palette[config.paletteKey].light,
|
|
247
|
+
color: (t) => t.palette[config.paletteKey].dark,
|
|
212
248
|
display: "flex",
|
|
213
249
|
alignItems: "center",
|
|
214
250
|
justifyContent: "center",
|
|
@@ -217,8 +253,8 @@ const Modal = React.forwardRef(
|
|
|
217
253
|
children: config.icon
|
|
218
254
|
}
|
|
219
255
|
),
|
|
220
|
-
title && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", component: "h2", sx: { fontWeight: 700 }, children: title }),
|
|
221
|
-
message && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: message })
|
|
256
|
+
title && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { id: titleId, variant: "h6", component: "h2", sx: { fontWeight: 700 }, children: title }),
|
|
257
|
+
message && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { id: descId, variant: "body2", color: "text.secondary", children: message })
|
|
222
258
|
] }),
|
|
223
259
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
224
260
|
ModalFooter,
|
|
@@ -247,34 +283,24 @@ const Modal = React.forwardRef(
|
|
|
247
283
|
let body = null;
|
|
248
284
|
let footer = null;
|
|
249
285
|
React.Children.forEach(children, (child) => {
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
"actions"
|
|
269
|
-
]);
|
|
270
|
-
footer = React.cloneElement(footerChild, __spreadValues({
|
|
271
|
-
showCloseButton,
|
|
272
|
-
closeButtonText,
|
|
273
|
-
closeButtonDisabled,
|
|
274
|
-
onClose: handleCloseInternal,
|
|
275
|
-
actions
|
|
276
|
-
}, restOfFooterProps));
|
|
277
|
-
}
|
|
286
|
+
var _a, _b, _c, _d, _e;
|
|
287
|
+
if (!React.isValidElement(child)) return;
|
|
288
|
+
if (isModalSlot(child, ModalHeader, "ModalHeader")) {
|
|
289
|
+
const headerChild = child;
|
|
290
|
+
header = React.cloneElement(headerChild, __spreadValues({ id: titleId }, headerChild.props));
|
|
291
|
+
} else if (isModalSlot(child, ModalBody, "ModalBody")) {
|
|
292
|
+
const bodyChild = child;
|
|
293
|
+
body = React.cloneElement(bodyChild, __spreadValues({ id: descId }, bodyChild.props));
|
|
294
|
+
} else if (isModalSlot(child, ModalFooter, "ModalFooter")) {
|
|
295
|
+
const footerChild = child;
|
|
296
|
+
const childProps = footerChild.props;
|
|
297
|
+
footer = React.cloneElement(footerChild, {
|
|
298
|
+
showCloseButton: (_a = childProps.showCloseButton) != null ? _a : showCloseButton,
|
|
299
|
+
closeButtonText: (_b = childProps.closeButtonText) != null ? _b : closeButtonText,
|
|
300
|
+
closeButtonDisabled: (_c = childProps.closeButtonDisabled) != null ? _c : closeButtonDisabled,
|
|
301
|
+
onClose: (_d = childProps.onClose) != null ? _d : handleCloseInternal,
|
|
302
|
+
actions: (_e = childProps.actions) != null ? _e : actions
|
|
303
|
+
});
|
|
278
304
|
}
|
|
279
305
|
});
|
|
280
306
|
if (!footer && !hiddenFooter) {
|
|
@@ -290,8 +316,8 @@ const Modal = React.forwardRef(
|
|
|
290
316
|
);
|
|
291
317
|
}
|
|
292
318
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
293
|
-
header || title && /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { children: title }),
|
|
294
|
-
body,
|
|
319
|
+
!hiddenHeader && (header || title && /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { id: titleId, children: title })),
|
|
320
|
+
!hiddenBody && body,
|
|
295
321
|
footer
|
|
296
322
|
] });
|
|
297
323
|
};
|
|
@@ -300,14 +326,16 @@ const Modal = React.forwardRef(
|
|
|
300
326
|
{
|
|
301
327
|
open: isOpen,
|
|
302
328
|
onClose: handleCloseInternal,
|
|
303
|
-
"aria-labelledby":
|
|
304
|
-
"aria-describedby":
|
|
329
|
+
"aria-labelledby": titleId,
|
|
330
|
+
"aria-describedby": descId,
|
|
305
331
|
closeAfterTransition: true,
|
|
306
|
-
|
|
332
|
+
sx,
|
|
333
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(material.Paper, { className, sx: mergedPaperSx, children: renderChildren() })
|
|
307
334
|
}
|
|
308
335
|
);
|
|
309
336
|
}
|
|
310
337
|
);
|
|
338
|
+
Modal.displayName = "Modal";
|
|
311
339
|
const ModalWithStatics = Modal;
|
|
312
340
|
ModalWithStatics.Header = ModalHeader;
|
|
313
341
|
ModalWithStatics.Body = ModalBody;
|
|
@@ -316,4 +344,5 @@ exports.Modal = ModalWithStatics;
|
|
|
316
344
|
exports.ModalBody = ModalBody;
|
|
317
345
|
exports.ModalFooter = ModalFooter;
|
|
318
346
|
exports.ModalHeader = ModalHeader;
|
|
347
|
+
exports.default = ModalWithStatics;
|
|
319
348
|
//# sourceMappingURL=Modal.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/ModalFooter.tsx","../../../src/components/Modal/ModalHeader.tsx","../../../src/components/Modal/ModalBody.tsx","../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Button, Stack } from '@mui/material';\nimport { ButtonProps } from '@mui/material/Button';\n\n// Interfaz para acciones personalizadas (se mantiene aquí)\nexport interface ModalAction {\n text: string;\n onClick?: () => void;\n disabled?: boolean;\n variant?: ButtonProps['variant'];\n color?: ButtonProps['color'];\n /**\n * Props adicionales que se forwardean al `<Button>` interno. Útil para casos\n * avanzados como conectar el botón con un `<form id=\"...\">` externo usando\n * `buttonProps={{ type: 'submit', form: 'my-form-id' }}`.\n */\n buttonProps?: Partial<ButtonProps> & { form?: string };\n}\n\nexport interface ModalFooterProps { // Renombrado\n children?: React.ReactNode;\n showCloseButton?: boolean;\n closeButtonText?: string;\n closeButtonDisabled?: boolean;\n onClose: () => void;\n actions?: ModalAction[];\n}\n\nexport const ModalFooter: React.FC<ModalFooterProps> = ({ // Renombrado\n children,\n showCloseButton = true,\n closeButtonText = \"Cerrar\",\n closeButtonDisabled = false,\n onClose,\n actions = [],\n}) => {\n return (\n <Box sx={{ padding: 2, borderTop: '1px solid #e0e0e0', display: 'flex', justifyContent: 'flex-end', gap: 1 }}>\n {children}\n <Stack direction=\"row\" spacing={1}>\n {showCloseButton && (\n <Button\n onClick={onClose}\n disabled={closeButtonDisabled}\n variant=\"outlined\"\n color=\"secondary\"\n >\n {closeButtonText}\n </Button>\n )}\n {actions.map((action, index) => {\n const { buttonProps } = action;\n return (\n <Button\n key={index}\n onClick={action.onClick}\n disabled={action.disabled}\n variant={action.variant || 'contained'}\n color={action.color || 'primary'}\n {...(buttonProps as any)}\n >\n {action.text}\n </Button>\n );\n })}\n </Stack>\n </Box>\n );\n};\n\nexport default ModalFooter;","import React from 'react';\nimport { Box, Typography } from '@mui/material';\n\ninterface ModalHeaderProps { // Renombrado\n children: React.ReactNode;\n}\n\nexport const ModalHeader: React.FC<ModalHeaderProps> = ({ children }) => { // Renombrado\n return (\n <Box sx={{ padding: 2, borderBottom: '1px solid #e0e0e0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>\n <Typography variant=\"h6\" component=\"h2\">\n {children}\n </Typography>\n </Box>\n );\n};\n\nexport default ModalHeader;","import React from 'react';\nimport { Box } from '@mui/material';\n\ninterface ModalBodyProps { // Renombrado\n children: React.ReactNode;\n}\n\nexport const ModalBody: React.FC<ModalBodyProps> = ({ children }) => { // Renombrado\n return (\n <Box sx={{ padding: 2, overflowY: 'auto', flexGrow: 1 }}>\n {children}\n </Box>\n );\n};\n\nexport default ModalBody;","import React, {\n useState,\n useImperativeHandle,\n forwardRef,\n type ReactNode,\n} from 'react';\nimport {\n Modal as MuiModal,\n Paper,\n useTheme,\n useMediaQuery,\n Box,\n Stack,\n Typography,\n} from '@mui/material';\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';\nimport WarningAmberIcon from '@mui/icons-material/WarningAmber';\nimport ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';\nimport CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';\n\nimport type { DialogProps } from '@mui/material/Dialog';\nimport { ModalAction, ModalFooter, ModalFooterProps } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalBody } from './ModalBody';\n\n// Define la interfaz para los métodos que el padre puede llamar a través de la ref\nexport interface ModalRef {\n open: () => void;\n close: () => void;\n}\n\nexport type ModalMode = 'default' | 'confirm';\nexport type ModalSeverity = 'info' | 'warning' | 'error' | 'success';\n\ninterface ModalProps {\n /**\n * Modo del modal.\n * - `default` (default): modal genérico con slots `Header`/`Body`/`Footer` y\n * `actions` custom.\n * - `confirm`: reemplaza al `ConfirmModal` legacy. Renderiza un layout\n * focalizado con icono por severidad, mensaje y botones \"Cancelar\" /\n * \"Confirmar\".\n */\n mode?: ModalMode;\n\n // ── Props comunes ────────────────────────────────────────────────────\n /** Controlado externamente. Omitir si se usa vía ref. */\n open?: boolean;\n /** Callback al cerrar. También se dispara al confirmar/cancelar. */\n onClose?: () => void;\n title?: string;\n children?: ReactNode;\n showCloseButton?: boolean;\n closeButtonText?: string;\n closeButtonDisabled?: boolean;\n actions?: ModalAction[];\n maxWidth?: DialogProps['maxWidth'];\n hiddenFooter?: boolean;\n\n // ── Props del modo confirm ───────────────────────────────────────────\n /**\n * Callback de confirmación. Soporta promesa — si devuelve `Promise`, el\n * botón muestra estado `disabled` mientras resuelve.\n */\n onConfirm?: () => void | Promise<void>;\n /** Texto del botón primario en modo `confirm`. Default: \"Confirmar\". */\n confirmText?: string;\n /** Deshabilita el botón de confirmar. */\n confirmDisabled?: boolean;\n /**\n * Severidad visual en modo `confirm`. Controla el icono y el color del\n * botón de confirmación.\n * - `info` (default): primary\n * - `warning`: warning (amarillo)\n * - `error`: error (rojo) — típico para \"Eliminar\"\n * - `success`: success (verde) — típico para \"Aprobar\"\n */\n severity?: ModalSeverity;\n /**\n * Mensaje del confirm. Puede ser string o cualquier ReactNode. Si se omite,\n * se usa `children`.\n */\n confirmMessage?: ReactNode;\n}\n\nconst modalStyle = {\n position: 'absolute' as const,\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '90%',\n maxHeight: '90vh',\n display: 'flex',\n flexDirection: 'column' as const,\n outline: 'none',\n};\n\nconst severityConfig: Record<\n ModalSeverity,\n { color: ModalAction['color']; icon: ReactNode; bg: string }\n> = {\n info: {\n color: 'primary',\n icon: <InfoOutlinedIcon sx={{ fontSize: 48 }} />,\n bg: 'primary.light',\n },\n warning: {\n color: 'warning',\n icon: <WarningAmberIcon sx={{ fontSize: 48 }} />,\n bg: 'warning.light',\n },\n error: {\n color: 'error',\n icon: <ErrorOutlineIcon sx={{ fontSize: 48 }} />,\n bg: 'error.light',\n },\n success: {\n color: 'success',\n icon: <CheckCircleOutlineIcon sx={{ fontSize: 48 }} />,\n bg: 'success.light',\n },\n};\n\nexport const Modal = forwardRef<ModalRef, ModalProps>(\n (\n {\n mode = 'default',\n open: controlledOpen,\n onClose: controlledOnClose,\n title,\n children,\n showCloseButton = true,\n closeButtonText = 'Cerrar',\n closeButtonDisabled = false,\n actions = [],\n maxWidth = 'sm',\n hiddenFooter = false,\n\n // Props del modo confirm\n onConfirm,\n confirmText = 'Confirmar',\n confirmDisabled = false,\n severity = 'info',\n confirmMessage,\n },\n ref,\n ) => {\n const [internalOpen, setInternalOpen] = useState(false);\n const [confirmLoading, setConfirmLoading] = useState(false);\n\n const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n useImperativeHandle(ref, () => ({\n open: () => setInternalOpen(true),\n close: () => {\n setInternalOpen(false);\n controlledOnClose?.();\n },\n }));\n\n const handleCloseInternal = () => {\n setInternalOpen(false);\n controlledOnClose?.();\n };\n\n const handleConfirm = async () => {\n if (!onConfirm) {\n handleCloseInternal();\n return;\n }\n try {\n const result = onConfirm();\n if (result instanceof Promise) {\n setConfirmLoading(true);\n await result;\n }\n } finally {\n setConfirmLoading(false);\n handleCloseInternal();\n }\n };\n\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('sm'));\n\n const getWidth = () => {\n if (isMobile) return '95%';\n switch (maxWidth) {\n case 'xs':\n return 300;\n case 'sm':\n return 500;\n case 'md':\n return 700;\n case 'lg':\n return 900;\n case 'xl':\n return 1100;\n case false:\n return 'auto';\n default:\n return 500;\n }\n };\n\n // ── Render modo CONFIRM ─────────────────────────────────────────────\n if (mode === 'confirm') {\n const config = severityConfig[severity];\n const message = confirmMessage ?? children;\n\n return (\n <MuiModal\n open={isOpen}\n onClose={handleCloseInternal}\n aria-labelledby=\"modal-title\"\n closeAfterTransition\n >\n <Paper sx={{ ...modalStyle, width: getWidth() }}>\n <Stack spacing={2.5} sx={{ p: 3, alignItems: 'center', textAlign: 'center' }}>\n <Box\n sx={{\n width: 72,\n height: 72,\n borderRadius: '50%',\n backgroundColor: (t) =>\n t.palette[severity === 'info' ? 'primary' : severity].light,\n color: (t) =>\n t.palette[severity === 'info' ? 'primary' : severity].dark,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n opacity: 0.9,\n }}\n >\n {config.icon}\n </Box>\n {title && (\n <Typography variant=\"h6\" component=\"h2\" sx={{ fontWeight: 700 }}>\n {title}\n </Typography>\n )}\n {message && (\n <Typography variant=\"body2\" color=\"text.secondary\">\n {message}\n </Typography>\n )}\n </Stack>\n <ModalFooter\n showCloseButton={showCloseButton}\n closeButtonText={closeButtonText}\n closeButtonDisabled={closeButtonDisabled || confirmLoading}\n onClose={handleCloseInternal}\n actions={[\n {\n text: confirmText,\n onClick: handleConfirm,\n disabled: confirmDisabled || confirmLoading,\n variant: 'contained',\n color: config.color,\n },\n ]}\n />\n </Paper>\n </MuiModal>\n );\n }\n\n // ── Render modo DEFAULT (legacy) ────────────────────────────────────\n const renderChildren = () => {\n let header: ReactNode | null = null;\n let body: ReactNode | null = null;\n let footer: ReactNode | null = null;\n\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child)) {\n if (child.type === ModalHeader) {\n header = child;\n } else if (child.type === ModalBody) {\n body = child;\n } else if (child.type === ModalFooter) {\n const footerChild = child as React.ReactElement<ModalFooterProps>;\n const {\n showCloseButton: childShowCloseButton,\n closeButtonText: childCloseButtonText,\n closeButtonDisabled: childCloseButtonDisabled,\n onClose: childOnClose,\n actions: childActions,\n ...restOfFooterProps\n } = footerChild.props;\n\n footer = React.cloneElement(footerChild, {\n showCloseButton,\n closeButtonText,\n closeButtonDisabled,\n onClose: handleCloseInternal,\n actions,\n ...restOfFooterProps,\n });\n }\n }\n });\n\n if (!footer && !hiddenFooter) {\n footer = (\n <ModalFooter\n showCloseButton={showCloseButton}\n closeButtonText={closeButtonText}\n closeButtonDisabled={closeButtonDisabled}\n onClose={handleCloseInternal}\n actions={actions}\n />\n );\n }\n\n return (\n <>\n {header || (title && <ModalHeader>{title}</ModalHeader>)}\n {body}\n {footer}\n </>\n );\n };\n\n return (\n <MuiModal\n open={isOpen}\n onClose={handleCloseInternal}\n aria-labelledby=\"modal-title\"\n aria-describedby=\"modal-description\"\n closeAfterTransition\n >\n <Paper sx={{ ...modalStyle, width: getWidth() }}>\n {renderChildren()}\n </Paper>\n </MuiModal>\n );\n },\n);\n\n// Define los sub-componentes como propiedades estáticas con tipos explícitos\ntype ModalComponent = React.ForwardRefExoticComponent<\n ModalProps & React.RefAttributes<ModalRef>\n> & {\n Header: typeof ModalHeader;\n Body: typeof ModalBody;\n Footer: typeof ModalFooter;\n};\n\nconst ModalWithStatics = Modal as ModalComponent;\n\nModalWithStatics.Header = ModalHeader;\nModalWithStatics.Body = ModalBody;\nModalWithStatics.Footer = ModalFooter;\n\nexport default ModalWithStatics;\n"],"names":["jsxs","Box","Stack","jsx","Button","Typography","forwardRef","useState","useImperativeHandle","useTheme","useMediaQuery","MuiModal","Paper","Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/ModalFooter.tsx","../../../src/components/Modal/ModalHeader.tsx","../../../src/components/Modal/ModalBody.tsx","../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Stack } from '@mui/material';\nimport type { ButtonProps as MuiButtonProps } from '@mui/material/Button';\n\nimport { Button } from '../Button';\n\n// Interfaz para acciones personalizadas (se mantiene aquí)\nexport interface ModalAction {\n text: string;\n onClick?: () => void;\n disabled?: boolean;\n variant?: MuiButtonProps['variant'];\n color?: MuiButtonProps['color'];\n /**\n * Props adicionales que se forwardean al `<Button>` interno. Útil para casos\n * avanzados como conectar el botón con un `<form id=\"...\">` externo usando\n * `buttonProps={{ type: 'submit', form: 'my-form-id' }}`.\n */\n buttonProps?: Partial<MuiButtonProps> & { form?: string };\n}\n\nexport interface ModalFooterProps {\n children?: React.ReactNode;\n showCloseButton?: boolean;\n closeButtonText?: string;\n closeButtonDisabled?: boolean;\n onClose: () => void;\n actions?: ModalAction[];\n}\n\nexport const ModalFooter: React.FC<ModalFooterProps> = ({\n children,\n showCloseButton = true,\n closeButtonText = 'Cerrar',\n closeButtonDisabled = false,\n onClose,\n actions = [],\n}) => {\n return (\n <Box\n sx={{\n padding: 2,\n borderTop: (theme) => `1px solid ${theme.palette.divider}`,\n display: 'flex',\n justifyContent: 'flex-end',\n gap: 1,\n }}\n >\n {children}\n <Stack direction=\"row\" spacing={1}>\n {showCloseButton && (\n <Button\n onClick={onClose}\n disabled={closeButtonDisabled}\n variant=\"outlined\"\n color=\"secondary\"\n >\n {closeButtonText}\n </Button>\n )}\n {actions.map((action) => {\n const { buttonProps, text, onClick, disabled, variant, color } = action;\n return (\n <Button\n key={text}\n onClick={onClick}\n disabled={disabled}\n variant={variant || 'contained'}\n color={color || 'primary'}\n {...(buttonProps as any)}\n >\n {text}\n </Button>\n );\n })}\n </Stack>\n </Box>\n );\n};\n\nModalFooter.displayName = 'ModalFooter';\n\nexport default ModalFooter;\n","import React from 'react';\nimport { Box, Typography } from '@mui/material';\n\nexport interface ModalHeaderProps {\n children: React.ReactNode;\n /**\n * ID del elemento — usado para `aria-labelledby` del Modal. Se setea\n * automáticamente cuando el header se renderiza dentro de `<Modal>`.\n */\n id?: string;\n}\n\nexport const ModalHeader: React.FC<ModalHeaderProps> = ({ children, id }) => {\n return (\n <Box\n sx={{\n padding: 2,\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n }}\n >\n <Typography id={id} variant=\"h6\" component=\"h2\">\n {children}\n </Typography>\n </Box>\n );\n};\n\nModalHeader.displayName = 'ModalHeader';\n\nexport default ModalHeader;\n","import React from 'react';\nimport { Box } from '@mui/material';\n\nexport interface ModalBodyProps {\n children: React.ReactNode;\n /**\n * ID del elemento — usado para `aria-describedby` del Modal. Se setea\n * automáticamente cuando el body se renderiza dentro de `<Modal>`.\n */\n id?: string;\n}\n\nexport const ModalBody: React.FC<ModalBodyProps> = ({ children, id }) => {\n return (\n <Box id={id} sx={{ padding: 2, overflowY: 'auto', flexGrow: 1 }}>\n {children}\n </Box>\n );\n};\n\nModalBody.displayName = 'ModalBody';\n\nexport default ModalBody;\n","import {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n useId,\n useImperativeHandle,\n useState,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport {\n Modal as MuiModal,\n Paper,\n useMediaQuery,\n useTheme,\n Box,\n Stack,\n Typography,\n} from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';\nimport WarningAmberIcon from '@mui/icons-material/WarningAmber';\nimport ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';\nimport CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';\n\nimport type { DialogProps } from '@mui/material/Dialog';\nimport { ModalFooter, type ModalAction, type ModalFooterProps } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalBody } from './ModalBody';\nimport { mergeSx } from '../_shared/mergeSx';\n\n// Detección robusta de sub-componentes — funciona con wrappers / HMR que\n// rompen la igualdad de referencia (`child.type === ModalHeader`).\nconst isModalSlot = (\n child: ReactElement,\n Component: unknown,\n displayName: string,\n): boolean => {\n if (child.type === Component) return true;\n const type = child.type as { displayName?: string };\n return type?.displayName === displayName;\n};\n\n// Define la interfaz para los métodos que el padre puede llamar a través de la ref\nexport interface ModalRef {\n open: () => void;\n close: () => void;\n}\n\nexport type ModalMode = 'default' | 'confirm';\nexport type ModalSeverity = 'info' | 'warning' | 'error' | 'success';\n\nexport interface ModalProps {\n /**\n * Modo del modal.\n * - `default` (default): modal genérico con slots `Header`/`Body`/`Footer` y\n * `actions` custom.\n * - `confirm`: reemplaza al `ConfirmModal` legacy. Renderiza un layout\n * focalizado con icono por severidad, mensaje y botones \"Cancelar\" /\n * \"Confirmar\".\n */\n mode?: ModalMode;\n\n // ── Props comunes ────────────────────────────────────────────────────\n /** Controlado externamente. Omitir si se usa vía ref. */\n open?: boolean;\n /** Callback al cerrar. También se dispara al confirmar/cancelar. */\n onClose?: () => void;\n title?: string;\n children?: ReactNode;\n showCloseButton?: boolean;\n closeButtonText?: string;\n closeButtonDisabled?: boolean;\n actions?: ModalAction[];\n maxWidth?: DialogProps['maxWidth'];\n /** Oculta el header (incluso si hay `title` o se pasa un `<Modal.Header>`). */\n hiddenHeader?: boolean;\n /** Oculta el body (incluso si se pasa un `<Modal.Body>`). */\n hiddenBody?: boolean;\n /** Oculta el footer (incluso si se pasa un `<Modal.Footer>` o `actions`). */\n hiddenFooter?: boolean;\n /** sx del Modal root (MuiModal). */\n sx?: SxProps<Theme>;\n /** sx del Paper interno (contenedor visual). Se mergea sobre el default. */\n paperSx?: SxProps<Theme>;\n /** className del Paper interno. */\n className?: string;\n\n // ── Props del modo confirm ───────────────────────────────────────────\n /**\n * Callback de confirmación. Soporta promesa — si devuelve `Promise`, el\n * botón muestra estado `disabled` mientras resuelve.\n *\n * Si la promesa **rechaza**, el modal queda abierto para que el consumer\n * pueda mostrar el error en su UI. El modal se cierra solo en éxito.\n */\n onConfirm?: () => void | Promise<void>;\n /** Texto del botón primario en modo `confirm`. Default: \"Confirmar\". */\n confirmText?: string;\n /** Deshabilita el botón de confirmar. */\n confirmDisabled?: boolean;\n /**\n * Severidad visual en modo `confirm`. Controla el icono y el color del\n * botón de confirmación.\n * - `info` (default): primary\n * - `warning`: warning (amarillo)\n * - `error`: error (rojo) — típico para \"Eliminar\"\n * - `success`: success (verde) — típico para \"Aprobar\"\n */\n severity?: ModalSeverity;\n /**\n * Mensaje del confirm. Puede ser string o cualquier ReactNode. Si se omite,\n * se usa `children`.\n */\n confirmMessage?: ReactNode;\n}\n\nconst modalStyle = {\n position: 'absolute' as const,\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '90%',\n maxHeight: '90vh',\n display: 'flex',\n flexDirection: 'column' as const,\n outline: 'none',\n};\n\nconst severityConfig: Record<\n ModalSeverity,\n { color: ModalAction['color']; icon: ReactNode; paletteKey: 'primary' | 'warning' | 'error' | 'success' }\n> = {\n info: {\n color: 'primary',\n icon: <InfoOutlinedIcon sx={{ fontSize: 48 }} />,\n paletteKey: 'primary',\n },\n warning: {\n color: 'warning',\n icon: <WarningAmberIcon sx={{ fontSize: 48 }} />,\n paletteKey: 'warning',\n },\n error: {\n color: 'error',\n icon: <ErrorOutlineIcon sx={{ fontSize: 48 }} />,\n paletteKey: 'error',\n },\n success: {\n color: 'success',\n icon: <CheckCircleOutlineIcon sx={{ fontSize: 48 }} />,\n paletteKey: 'success',\n },\n};\n\nexport const Modal = forwardRef<ModalRef, ModalProps>(\n (\n {\n mode = 'default',\n open: controlledOpen,\n onClose: controlledOnClose,\n title,\n children,\n showCloseButton = true,\n closeButtonText = 'Cerrar',\n closeButtonDisabled = false,\n actions = [],\n maxWidth = 'sm',\n hiddenHeader = false,\n hiddenBody = false,\n hiddenFooter = false,\n sx,\n paperSx,\n className,\n\n // Props del modo confirm\n onConfirm,\n confirmText = 'Confirmar',\n confirmDisabled = false,\n severity = 'info',\n confirmMessage,\n },\n ref,\n ) => {\n const [internalOpen, setInternalOpen] = useState(false);\n const [confirmLoading, setConfirmLoading] = useState(false);\n\n // IDs estables para a11y: `aria-labelledby` y `aria-describedby`.\n const titleId = useId();\n const descId = useId();\n\n const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n useImperativeHandle(ref, () => ({\n open: () => setInternalOpen(true),\n close: () => {\n setInternalOpen(false);\n controlledOnClose?.();\n },\n }));\n\n const handleCloseInternal = () => {\n setInternalOpen(false);\n controlledOnClose?.();\n };\n\n const handleConfirm = async () => {\n if (!onConfirm) {\n handleCloseInternal();\n return;\n }\n const result = onConfirm();\n if (!(result instanceof Promise)) {\n handleCloseInternal();\n return;\n }\n setConfirmLoading(true);\n try {\n await result;\n handleCloseInternal();\n } catch (err) {\n // No cerrar el modal en caso de error — el consumer es responsable\n // de mostrar un estado de error en su UI. Logueamos para trazabilidad\n // en dev.\n // eslint-disable-next-line no-console\n console.error('Modal onConfirm failed:', err);\n } finally {\n setConfirmLoading(false);\n }\n };\n\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('sm'));\n\n const getWidth = () => {\n if (isMobile) return '95%';\n switch (maxWidth) {\n case 'xs':\n return 300;\n case 'sm':\n return 500;\n case 'md':\n return 700;\n case 'lg':\n return 900;\n case 'xl':\n return 1100;\n case false:\n return 'auto';\n default:\n // Soporta string custom: `maxWidth=\"600px\"` se pasa tal cual.\n return typeof maxWidth === 'string' ? maxWidth : 500;\n }\n };\n\n // Base sx del Paper + width responsive; el consumer puede pisarlos via `paperSx`.\n const paperBaseSx: SxProps<Theme> = { ...modalStyle, width: getWidth() };\n const mergedPaperSx = mergeSx(paperBaseSx, paperSx);\n\n // ── Render modo CONFIRM ─────────────────────────────────────────────\n if (mode === 'confirm') {\n const config = severityConfig[severity];\n const message = confirmMessage ?? children;\n\n return (\n <MuiModal\n open={isOpen}\n onClose={handleCloseInternal}\n aria-labelledby={title ? titleId : undefined}\n aria-describedby={message ? descId : undefined}\n closeAfterTransition\n sx={sx}\n >\n <Paper className={className} sx={mergedPaperSx}>\n <Stack spacing={2.5} sx={{ p: 3, alignItems: 'center', textAlign: 'center' }}>\n <Box\n sx={{\n width: 72,\n height: 72,\n borderRadius: '50%',\n backgroundColor: (t) => t.palette[config.paletteKey].light,\n color: (t) => t.palette[config.paletteKey].dark,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n opacity: 0.9,\n }}\n >\n {config.icon}\n </Box>\n {title && (\n <Typography id={titleId} variant=\"h6\" component=\"h2\" sx={{ fontWeight: 700 }}>\n {title}\n </Typography>\n )}\n {message && (\n <Typography id={descId} variant=\"body2\" color=\"text.secondary\">\n {message}\n </Typography>\n )}\n </Stack>\n <ModalFooter\n showCloseButton={showCloseButton}\n closeButtonText={closeButtonText}\n closeButtonDisabled={closeButtonDisabled || confirmLoading}\n onClose={handleCloseInternal}\n actions={[\n {\n text: confirmText,\n onClick: handleConfirm,\n disabled: confirmDisabled || confirmLoading,\n variant: 'contained',\n color: config.color,\n },\n ]}\n />\n </Paper>\n </MuiModal>\n );\n }\n\n // ── Render modo DEFAULT (compuesto) ─────────────────────────────────\n const renderChildren = () => {\n let header: ReactNode | null = null;\n let body: ReactNode | null = null;\n let footer: ReactNode | null = null;\n\n Children.forEach(children, (child) => {\n if (!isValidElement(child)) return;\n\n if (isModalSlot(child, ModalHeader, 'ModalHeader')) {\n const headerChild = child as ReactElement<{ id?: string }>;\n header = cloneElement(headerChild, { id: titleId, ...headerChild.props });\n } else if (isModalSlot(child, ModalBody, 'ModalBody')) {\n const bodyChild = child as ReactElement<{ id?: string }>;\n body = cloneElement(bodyChild, { id: descId, ...bodyChild.props });\n } else if (isModalSlot(child, ModalFooter, 'ModalFooter')) {\n const footerChild = child as ReactElement<ModalFooterProps>;\n // Props del child ganan sobre los del Modal padre: si el consumer\n // declara `<Modal.Footer showCloseButton={false}>`, ese valor se\n // respeta. Solo los que vengan `undefined` caen al default del padre.\n const childProps = footerChild.props;\n footer = cloneElement(footerChild, {\n showCloseButton: childProps.showCloseButton ?? showCloseButton,\n closeButtonText: childProps.closeButtonText ?? closeButtonText,\n closeButtonDisabled: childProps.closeButtonDisabled ?? closeButtonDisabled,\n onClose: childProps.onClose ?? handleCloseInternal,\n actions: childProps.actions ?? actions,\n });\n }\n });\n\n if (!footer && !hiddenFooter) {\n footer = (\n <ModalFooter\n showCloseButton={showCloseButton}\n closeButtonText={closeButtonText}\n closeButtonDisabled={closeButtonDisabled}\n onClose={handleCloseInternal}\n actions={actions}\n />\n );\n }\n\n return (\n <>\n {!hiddenHeader && (header || (title && <ModalHeader id={titleId}>{title}</ModalHeader>))}\n {!hiddenBody && body}\n {footer}\n </>\n );\n };\n\n return (\n <MuiModal\n open={isOpen}\n onClose={handleCloseInternal}\n aria-labelledby={titleId}\n aria-describedby={descId}\n closeAfterTransition\n sx={sx}\n >\n <Paper className={className} sx={mergedPaperSx}>\n {renderChildren()}\n </Paper>\n </MuiModal>\n );\n },\n);\n\nModal.displayName = 'Modal';\n\n// Define los sub-componentes como propiedades estáticas con tipos explícitos\ntype ModalComponent = ReturnType<typeof forwardRef<ModalRef, ModalProps>> & {\n Header: typeof ModalHeader;\n Body: typeof ModalBody;\n Footer: typeof ModalFooter;\n};\n\nconst ModalWithStatics = Modal as ModalComponent;\n\nModalWithStatics.Header = ModalHeader;\nModalWithStatics.Body = ModalBody;\nModalWithStatics.Footer = ModalFooter;\n\nexport default ModalWithStatics;\n"],"names":["jsxs","Box","Stack","jsx","Button","Typography","forwardRef","useState","useId","useImperativeHandle","useTheme","useMediaQuery","mergeSx","MuiModal","Paper","Children","isValidElement","cloneElement","Fragment"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { forwardRef, ReactNode } from 'react';
|
|
2
|
+
import { SxProps, Theme } from '@mui/material/styles';
|
|
2
3
|
import { DialogProps } from '@mui/material/Dialog';
|
|
3
|
-
import {
|
|
4
|
+
import { ModalFooter, ModalAction } from './ModalFooter';
|
|
4
5
|
import { ModalHeader } from './ModalHeader';
|
|
5
6
|
import { ModalBody } from './ModalBody';
|
|
6
7
|
export interface ModalRef {
|
|
@@ -9,7 +10,7 @@ export interface ModalRef {
|
|
|
9
10
|
}
|
|
10
11
|
export type ModalMode = 'default' | 'confirm';
|
|
11
12
|
export type ModalSeverity = 'info' | 'warning' | 'error' | 'success';
|
|
12
|
-
interface ModalProps {
|
|
13
|
+
export interface ModalProps {
|
|
13
14
|
/**
|
|
14
15
|
* Modo del modal.
|
|
15
16
|
* - `default` (default): modal genérico con slots `Header`/`Body`/`Footer` y
|
|
@@ -30,10 +31,24 @@ interface ModalProps {
|
|
|
30
31
|
closeButtonDisabled?: boolean;
|
|
31
32
|
actions?: ModalAction[];
|
|
32
33
|
maxWidth?: DialogProps['maxWidth'];
|
|
34
|
+
/** Oculta el header (incluso si hay `title` o se pasa un `<Modal.Header>`). */
|
|
35
|
+
hiddenHeader?: boolean;
|
|
36
|
+
/** Oculta el body (incluso si se pasa un `<Modal.Body>`). */
|
|
37
|
+
hiddenBody?: boolean;
|
|
38
|
+
/** Oculta el footer (incluso si se pasa un `<Modal.Footer>` o `actions`). */
|
|
33
39
|
hiddenFooter?: boolean;
|
|
40
|
+
/** sx del Modal root (MuiModal). */
|
|
41
|
+
sx?: SxProps<Theme>;
|
|
42
|
+
/** sx del Paper interno (contenedor visual). Se mergea sobre el default. */
|
|
43
|
+
paperSx?: SxProps<Theme>;
|
|
44
|
+
/** className del Paper interno. */
|
|
45
|
+
className?: string;
|
|
34
46
|
/**
|
|
35
47
|
* Callback de confirmación. Soporta promesa — si devuelve `Promise`, el
|
|
36
48
|
* botón muestra estado `disabled` mientras resuelve.
|
|
49
|
+
*
|
|
50
|
+
* Si la promesa **rechaza**, el modal queda abierto para que el consumer
|
|
51
|
+
* pueda mostrar el error en su UI. El modal se cierra solo en éxito.
|
|
37
52
|
*/
|
|
38
53
|
onConfirm?: () => void | Promise<void>;
|
|
39
54
|
/** Texto del botón primario en modo `confirm`. Default: "Confirmar". */
|
|
@@ -55,8 +70,8 @@ interface ModalProps {
|
|
|
55
70
|
*/
|
|
56
71
|
confirmMessage?: ReactNode;
|
|
57
72
|
}
|
|
58
|
-
export declare const Modal:
|
|
59
|
-
type ModalComponent =
|
|
73
|
+
export declare const Modal: import('react').ForwardRefExoticComponent<ModalProps & import('react').RefAttributes<ModalRef>>;
|
|
74
|
+
type ModalComponent = ReturnType<typeof forwardRef<ModalRef, ModalProps>> & {
|
|
60
75
|
Header: typeof ModalHeader;
|
|
61
76
|
Body: typeof ModalBody;
|
|
62
77
|
Footer: typeof ModalFooter;
|