@soyfri/shared-library 2.0.0-beta.13 → 2.0.0-beta.16
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/{Autocomplete-C2x-lBvZ.cjs → Autocomplete-4i0dNDKr.cjs} +55 -33
- package/Autocomplete-4i0dNDKr.cjs.map +1 -0
- package/{Autocomplete-BA-cGASd.js → Autocomplete-i3-V38n1.js} +56 -34
- package/Autocomplete-i3-V38n1.js.map +1 -0
- package/{Avatar-BJTr-PBd.js → Avatar-CgT7955R.js} +18 -19
- package/Avatar-CgT7955R.js.map +1 -0
- package/{Avatar-9L7YMxya.cjs → Avatar-CuSrK8Wn.cjs} +18 -19
- package/Avatar-CuSrK8Wn.cjs.map +1 -0
- package/Button-C17mExpd.cjs.map +1 -1
- package/Button-UkkP-bNw.js.map +1 -1
- package/Card-B1wtavyl.js +98 -0
- package/Card-B1wtavyl.js.map +1 -0
- package/Card-DfdU610V.cjs +97 -0
- package/Card-DfdU610V.cjs.map +1 -0
- package/Checkbox-BCqMFWt4.cjs +187 -0
- package/Checkbox-BCqMFWt4.cjs.map +1 -0
- package/Checkbox-gB5YKkVo.js +188 -0
- package/Checkbox-gB5YKkVo.js.map +1 -0
- package/{DatePicker-DLSfkgGA.cjs → DatePicker-CtCFqXDw.cjs} +41 -64
- package/DatePicker-CtCFqXDw.cjs.map +1 -0
- package/{DatePicker-8f_9bwhS.js → DatePicker-D0Bz9Ryg.js} +37 -60
- package/DatePicker-D0Bz9Ryg.js.map +1 -0
- package/{DateTimePicker-D4L9GAod.js → DateTimePicker-77w-9TP5.js} +27 -17
- package/DateTimePicker-77w-9TP5.js.map +1 -0
- package/{DateTimePicker-CWNW09-O.cjs → DateTimePicker-CTnRQCZo.cjs} +31 -21
- package/DateTimePicker-CTnRQCZo.cjs.map +1 -0
- package/{Input-DI0jfq5X.cjs → Input-jYapjJYM.cjs} +27 -14
- package/Input-jYapjJYM.cjs.map +1 -0
- package/{Input-Cp911l23.js → Input-rVVhI_wk.js} +24 -11
- package/Input-rVVhI_wk.js.map +1 -0
- package/{Modal-Bm_HH9cv.cjs → Modal-BN5s-Tfk.cjs} +126 -98
- package/Modal-BN5s-Tfk.cjs.map +1 -0
- package/{Modal-Bnz6d9m9.js → Modal-BRZMPwDj.js} +134 -106
- package/Modal-BRZMPwDj.js.map +1 -0
- package/{RadioGroup-CxqDHap1.cjs → RadioGroup-Dd0rHXSX.cjs} +10 -8
- package/RadioGroup-Dd0rHXSX.cjs.map +1 -0
- package/{RadioGroup-DMi9FvMP.js → RadioGroup-bO-ahP9T.js} +10 -8
- package/RadioGroup-bO-ahP9T.js.map +1 -0
- package/Select-B6jE3WH_.cjs +253 -0
- package/Select-B6jE3WH_.cjs.map +1 -0
- package/Select-bSVQokFX.js +254 -0
- package/Select-bSVQokFX.js.map +1 -0
- package/StatusMessage-B3nXpuRl.cjs +88 -0
- package/StatusMessage-B3nXpuRl.cjs.map +1 -0
- package/StatusMessage-D0WgSBx7.js +89 -0
- package/StatusMessage-D0WgSBx7.js.map +1 -0
- package/Step-BArsou1V.js +301 -0
- package/Step-BArsou1V.js.map +1 -0
- package/Step-Nd7SJbRZ.cjs +300 -0
- package/Step-Nd7SJbRZ.cjs.map +1 -0
- package/{Switch-BIeobv6i.cjs → Switch-CQFOopYy.cjs} +6 -3
- package/Switch-CQFOopYy.cjs.map +1 -0
- package/{Switch-DQEOxM2R.js → Switch-D72dpkH2.js} +6 -3
- package/Switch-D72dpkH2.js.map +1 -0
- package/{Tab-Co31KY2k.cjs → Tab-BbP8jBcK.cjs} +43 -28
- package/Tab-BbP8jBcK.cjs.map +1 -0
- package/Tab-BxSxKJsP.js +111 -0
- package/Tab-BxSxKJsP.js.map +1 -0
- 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 +1 -1
- package/components/Autocomplete/Autocomplete.d.ts +8 -6
- package/components/Autocomplete/Autocomplete.helpers.d.ts +8 -4
- package/components/Autocomplete/Autocomplete.js +1 -1
- package/components/Autocomplete/_parts/AutocompleteOption.d.ts +5 -8
- package/components/Autocomplete/index.d.ts +1 -1
- package/components/Avatar/Avatar.cjs +1 -1
- package/components/Avatar/Avatar.js +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 +1 -4
- package/components/Card/Card.cjs.map +1 -1
- package/components/Card/Card.d.ts +3 -50
- package/components/Card/Card.js +1 -4
- package/components/Card/Card.sx.d.ts +3 -6
- package/components/Card/index.d.ts +1 -1
- package/components/Checkbox/Checkbox.cjs +6 -0
- package/components/Checkbox/Checkbox.cjs.map +1 -0
- package/components/Checkbox/Checkbox.d.ts +55 -0
- package/components/Checkbox/Checkbox.js +6 -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 +3 -2
- package/components/Chip/index.d.ts +2 -1
- package/components/Chip.d.ts +4 -0
- package/components/DatePicker/DatePicker.cjs +1 -1
- package/components/DatePicker/DatePicker.d.ts +1 -13
- package/components/DatePicker/DatePicker.js +1 -1
- package/components/DatePicker/index.d.ts +1 -1
- package/components/DateTimePicker/DateTimePicker.cjs +1 -1
- package/components/DateTimePicker/DateTimePicker.d.ts +10 -6
- package/components/DateTimePicker/DateTimePicker.definitions.d.ts +2 -0
- package/components/DateTimePicker/DateTimePicker.helpers.d.ts +4 -2
- package/components/DateTimePicker/DateTimePicker.js +1 -1
- package/components/DateTimePicker/index.d.ts +1 -1
- package/components/Drawer/Drawer.cjs +10 -6
- package/components/Drawer/Drawer.cjs.map +1 -1
- package/components/Drawer/Drawer.js +11 -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 +1 -1
- package/components/Input/Input.d.ts +9 -2
- package/components/Input/Input.helpers.d.ts +3 -3
- package/components/Input/Input.js +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 +1 -1
- package/components/Modal/Modal.d.ts +20 -5
- package/components/Modal/Modal.js +6 -6
- 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 +2 -0
- package/components/RadioGroup/RadioGroup.cjs +1 -1
- package/components/RadioGroup/RadioGroup.d.ts +9 -3
- package/components/RadioGroup/RadioGroup.js +1 -1
- package/components/RadioGroup/index.d.ts +1 -1
- package/components/Select/Select.cjs +1 -1
- package/components/Select/Select.d.ts +13 -18
- package/components/Select/Select.helpers.d.ts +5 -19
- package/components/Select/Select.js +1 -1
- package/components/Select/index.d.ts +1 -1
- package/components/Stat/Stat.cjs +2 -2
- package/components/Stat/Stat.js +3 -3
- 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 +1 -1
- package/components/StatusMessage/StatusMessage.d.ts +20 -36
- package/components/StatusMessage/StatusMessage.js +1 -1
- package/components/Stepper/Stepper.cjs +6 -2
- package/components/Stepper/Stepper.cjs.map +1 -1
- package/components/Stepper/Stepper.d.ts +9 -8
- package/components/Stepper/Stepper.js +6 -2
- package/{hooks/Wizard/WizardContext.d.ts → components/Stepper/StepperContext.d.ts} +28 -22
- 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 +1 -1
- package/components/Switch/Switch.d.ts +7 -2
- package/components/Switch/Switch.js +1 -1
- package/components/Tabs/Tabs.cjs +3 -2
- package/components/Tabs/Tabs.cjs.map +1 -1
- package/components/Tabs/Tabs.d.ts +21 -16
- package/components/Tabs/Tabs.js +3 -2
- package/components/Tabs/index.d.ts +4 -2
- package/components/Tabs.d.ts +4 -0
- package/components/Timeline/Timeline.cjs +3 -3
- package/components/Timeline/Timeline.cjs.map +1 -1
- package/components/Timeline/Timeline.d.ts +4 -8
- package/components/Timeline/Timeline.js +2 -2
- package/components/Timeline/Timeline.js.map +1 -1
- package/components/Timeline/index.d.ts +4 -3
- 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 +38 -15
- package/index.cjs.map +1 -1
- package/index.d.ts +3 -0
- package/index.js +33 -19
- 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 +2 -1
- package/package.json +28 -42
- 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/Autocomplete-BA-cGASd.js.map +0 -1
- package/Autocomplete-C2x-lBvZ.cjs.map +0 -1
- package/Avatar-9L7YMxya.cjs.map +0 -1
- package/Avatar-BJTr-PBd.js.map +0 -1
- package/Card-DG_crfkK.cjs +0 -185
- package/Card-DG_crfkK.cjs.map +0 -1
- package/Card-Ug-ttVSh.js +0 -186
- package/Card-Ug-ttVSh.js.map +0 -1
- package/DatePicker-8f_9bwhS.js.map +0 -1
- package/DatePicker-DLSfkgGA.cjs.map +0 -1
- package/DateTimePicker-CWNW09-O.cjs.map +0 -1
- package/DateTimePicker-D4L9GAod.js.map +0 -1
- package/Input-Cp911l23.js.map +0 -1
- package/Input-DI0jfq5X.cjs.map +0 -1
- package/Modal-Bm_HH9cv.cjs.map +0 -1
- package/Modal-Bnz6d9m9.js.map +0 -1
- package/RadioGroup-CxqDHap1.cjs.map +0 -1
- package/RadioGroup-DMi9FvMP.js.map +0 -1
- package/Select-3CBOfM2H.js +0 -447
- package/Select-3CBOfM2H.js.map +0 -1
- package/Select-Bku4f4f8.cjs +0 -446
- package/Select-Bku4f4f8.cjs.map +0 -1
- package/StatusMessage-C5B6oGZ_.cjs +0 -78
- package/StatusMessage-C5B6oGZ_.cjs.map +0 -1
- package/StatusMessage-D1GlfQdz.js +0 -79
- package/StatusMessage-D1GlfQdz.js.map +0 -1
- package/Step-Dq0N72YB.js +0 -49
- package/Step-Dq0N72YB.js.map +0 -1
- package/Step-a8U8O-91.cjs +0 -48
- package/Step-a8U8O-91.cjs.map +0 -1
- package/Switch-BIeobv6i.cjs.map +0 -1
- package/Switch-DQEOxM2R.js.map +0 -1
- package/Tab-Co31KY2k.cjs.map +0 -1
- package/Tab-DiK62gRz.js +0 -96
- package/Tab-DiK62gRz.js.map +0 -1
- 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/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
|
@@ -36,7 +36,8 @@ import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
|
|
36
36
|
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
|
37
37
|
import { DateTimePicker as DateTimePicker$1 } from "@mui/x-date-pickers/DateTimePicker";
|
|
38
38
|
import { Controller } from "react-hook-form";
|
|
39
|
-
import { b as buildFormFieldSx
|
|
39
|
+
import { b as buildFormFieldSx } from "./formField.sx-8_QRnKxv.js";
|
|
40
|
+
import { F as FIELD_INPUT_PADDING_Y } from "./tokens-BRrcP_p_.js";
|
|
40
41
|
import { r as resolvePreset } from "./resolvePreset-K6_BfWHD.js";
|
|
41
42
|
const buildDateTimePickerSx = (borderRadius, labelPosition) => buildFormFieldSx({
|
|
42
43
|
borderRadius,
|
|
@@ -57,12 +58,17 @@ const getDateTimeValidationMessage = (error) => {
|
|
|
57
58
|
switch (error) {
|
|
58
59
|
case "minDate":
|
|
59
60
|
case "maxDate":
|
|
61
|
+
case "minTime":
|
|
62
|
+
case "maxTime":
|
|
63
|
+
return "Fecha/hora fuera del rango permitido";
|
|
60
64
|
case "invalidDate":
|
|
61
65
|
return "Formato de fecha/hora inválido";
|
|
62
66
|
case "disableFuture":
|
|
63
67
|
return "No se permiten fechas/horas futuras";
|
|
64
68
|
case "disablePast":
|
|
65
69
|
return "No se permiten fechas/horas pasadas";
|
|
70
|
+
case "minutesStep":
|
|
71
|
+
return "Minutos no válidos para el paso configurado";
|
|
66
72
|
default:
|
|
67
73
|
return "";
|
|
68
74
|
}
|
|
@@ -96,10 +102,9 @@ const DateTimePicker = (props) => {
|
|
|
96
102
|
acceptButtonText,
|
|
97
103
|
minutesStep,
|
|
98
104
|
minTime,
|
|
99
|
-
|
|
105
|
+
ampm = false,
|
|
100
106
|
viewRenderers,
|
|
101
107
|
timeSteps,
|
|
102
|
-
ampm = false,
|
|
103
108
|
textFieldProps,
|
|
104
109
|
slotProps: slotPropsProp
|
|
105
110
|
} = _a, rest = __objRest(_a, [
|
|
@@ -123,10 +128,9 @@ const DateTimePicker = (props) => {
|
|
|
123
128
|
"acceptButtonText",
|
|
124
129
|
"minutesStep",
|
|
125
130
|
"minTime",
|
|
126
|
-
"
|
|
131
|
+
"ampm",
|
|
127
132
|
"viewRenderers",
|
|
128
133
|
"timeSteps",
|
|
129
|
-
"ampm",
|
|
130
134
|
"textFieldProps",
|
|
131
135
|
"slotProps"
|
|
132
136
|
]);
|
|
@@ -151,13 +155,13 @@ const DateTimePicker = (props) => {
|
|
|
151
155
|
const finalHelperText = rhfHelperText || validationErrorMessage || helperText;
|
|
152
156
|
return /* @__PURE__ */ jsx(
|
|
153
157
|
LocalizationProvider,
|
|
154
|
-
|
|
155
|
-
dateAdapter: AdapterDayjs
|
|
156
|
-
|
|
158
|
+
{
|
|
159
|
+
dateAdapter: AdapterDayjs,
|
|
160
|
+
adapterLocale,
|
|
157
161
|
children: /* @__PURE__ */ jsx(
|
|
158
162
|
DateTimePicker$1,
|
|
159
163
|
__spreadValues({
|
|
160
|
-
className
|
|
164
|
+
className,
|
|
161
165
|
label,
|
|
162
166
|
value,
|
|
163
167
|
onChange,
|
|
@@ -169,29 +173,32 @@ const DateTimePicker = (props) => {
|
|
|
169
173
|
readOnly,
|
|
170
174
|
minTime,
|
|
171
175
|
format: inputFormat != null ? inputFormat : "DD/MM/YYYY HH:mm",
|
|
176
|
+
ampm,
|
|
172
177
|
viewRenderers,
|
|
173
178
|
timeSteps,
|
|
174
|
-
ampm,
|
|
175
179
|
sx: mergedSx,
|
|
176
180
|
slotProps: __spreadProps(__spreadValues({}, slotPropsProp), {
|
|
177
|
-
textField: __spreadValues(__spreadValues({
|
|
181
|
+
textField: __spreadProps(__spreadValues(__spreadValues({
|
|
178
182
|
fullWidth: true,
|
|
179
183
|
size,
|
|
180
|
-
variant: "outlined"
|
|
184
|
+
variant: "outlined"
|
|
185
|
+
}, slotPropsProp == null ? void 0 : slotPropsProp.textField), textFieldProps), {
|
|
186
|
+
// Props críticas al final: ganan al consumer para no romper la
|
|
187
|
+
// integración con RHF ni desactivar el visual de error.
|
|
181
188
|
onBlur,
|
|
182
189
|
inputRef,
|
|
183
190
|
error: !!finalError,
|
|
184
191
|
helperText: finalHelperText
|
|
185
|
-
}
|
|
192
|
+
})
|
|
186
193
|
}),
|
|
187
194
|
localeText: customLocaleText
|
|
188
195
|
}, rest)
|
|
189
196
|
)
|
|
190
|
-
}
|
|
197
|
+
}
|
|
191
198
|
);
|
|
192
199
|
};
|
|
193
200
|
if ("control" in props && props.control) {
|
|
194
|
-
const { name, control, validation } = props;
|
|
201
|
+
const { name, control, validation, onValueChange } = props;
|
|
195
202
|
return /* @__PURE__ */ jsx(
|
|
196
203
|
Controller,
|
|
197
204
|
{
|
|
@@ -202,7 +209,10 @@ const DateTimePicker = (props) => {
|
|
|
202
209
|
var _a2;
|
|
203
210
|
return renderPicker(
|
|
204
211
|
(_a2 = field.value) != null ? _a2 : null,
|
|
205
|
-
|
|
212
|
+
(next) => {
|
|
213
|
+
field.onChange(next);
|
|
214
|
+
onValueChange == null ? void 0 : onValueChange(next);
|
|
215
|
+
},
|
|
206
216
|
field.onBlur,
|
|
207
217
|
field.ref,
|
|
208
218
|
!!fieldError,
|
|
@@ -218,4 +228,4 @@ const DateTimePicker = (props) => {
|
|
|
218
228
|
export {
|
|
219
229
|
DateTimePicker as D
|
|
220
230
|
};
|
|
221
|
-
//# sourceMappingURL=DateTimePicker-
|
|
231
|
+
//# sourceMappingURL=DateTimePicker-77w-9TP5.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateTimePicker-77w-9TP5.js","sources":["../src/components/DateTimePicker/DateTimePicker.sx.ts","../src/components/DateTimePicker/DateTimePicker.helpers.ts","../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material';\n\nimport { buildFormFieldSx } from '../_shared/formField.sx';\nimport { FIELD_INPUT_PADDING_Y } from '../../theme/tokens';\nimport type { LabelPosition } from './DateTimePicker';\n\n/**\n * Builder de sx para el DateTimePicker. Mismo patrón que DatePicker.\n * Usa `includePickersApi: true` para soportar la API nueva de MUI X v8.\n */\nexport const buildDateTimePickerSx = (\n borderRadius: number | string,\n labelPosition: LabelPosition,\n): SxProps<Theme> =>\n buildFormFieldSx({\n borderRadius,\n labelPosition,\n includePickersApi: true,\n extraOutsideSx: {\n '& .MuiInputBase-input': {\n paddingTop: FIELD_INPUT_PADDING_Y,\n paddingBottom: FIELD_INPUT_PADDING_Y,\n },\n\n '& .MuiPickersInputBase-sectionsContainer': {\n paddingTop: FIELD_INPUT_PADDING_Y,\n paddingBottom: FIELD_INPUT_PADDING_Y,\n },\n },\n });\n","import type { DateTimeValidationError } from '@mui/x-date-pickers/models';\n\n/**\n * Traduce el error del DateTimePicker a un mensaje en español. Se usa\n * internamente para poblar `helperText` cuando hay error de validación.\n * Cubre tanto errores de fecha (`minDate`, `maxDate`, etc.) como de hora\n * (`minTime`, `maxTime`, `minutesStep`, etc.).\n */\nexport const getDateTimeValidationMessage = (\n error: DateTimeValidationError | null,\n): string => {\n switch (error) {\n case 'minDate':\n case 'maxDate':\n case 'minTime':\n case 'maxTime':\n return 'Fecha/hora fuera del rango permitido';\n case 'invalidDate':\n return 'Formato de fecha/hora inválido';\n case 'disableFuture':\n return 'No se permiten fechas/horas futuras';\n case 'disablePast':\n return 'No se permiten fechas/horas pasadas';\n case 'minutesStep':\n return 'Minutos no válidos para el paso configurado';\n default:\n return '';\n }\n};\n\n/**\n * Construye el `localeText` que MUI acepta para overridear los labels de los\n * botones del popover (Cancel / OK / Clear).\n */\nexport const buildLocaleText = (\n clearButtonText?: string,\n cancelButtonText?: string,\n acceptButtonText?: string,\n): Record<string, string> => {\n const text: Record<string, string> = {};\n if (clearButtonText) text.clearButtonLabel = clearButtonText;\n if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;\n if (acceptButtonText) text.okButtonLabel = acceptButtonText;\n return text;\n};\n","import React, { useMemo } from 'react';\nimport type { SxProps, Theme } from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport {\n DateTimePicker as MuiDateTimePicker,\n type DateTimePickerProps as MuiDateTimePickerProps,\n} from '@mui/x-date-pickers/DateTimePicker';\nimport type { DateTimeValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildDateTimePickerSx } from './DateTimePicker.sx';\nimport {\n buildLocaleText,\n getDateTimeValidationMessage,\n} from './DateTimePicker.helpers';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport type LabelPosition = 'outside' | 'floating';\nexport type DateTimePickerSize = 'small' | 'medium';\n\n// ── Props base ───────────────────────────────────────────────────────────\nexport interface BaseDateTimePickerProps\n extends Omit<MuiDateTimePickerProps, 'value' | 'onChange' | 'slotProps' | 'format'> {\n label?: string;\n minDateTime?: Dayjs;\n maxDateTime?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n /** Formato de la fecha/hora. Default: 'DD/MM/YYYY HH:mm'. */\n inputFormat?: string;\n /** Border radius del input. Default: 10. */\n borderRadius?: number | string;\n /** \"outside\" (default) o \"floating\". */\n labelPosition?: LabelPosition;\n /** Tamaño del TextField. Default: 'small'. */\n size?: DateTimePickerSize;\n helperText?: string;\n error?: boolean;\n sx?: SxProps<Theme>;\n className?: string;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.DateTimePicker`.\n * - `\"default\"` (o ausente) = estilo built-in del paquete.\n * - Cualquier otro string = mergea el preset encima del estilo built-in.\n */\n preset?: string;\n /** Locale del adaptador dayjs. */\n adapterLocale?: string;\n /** Textos de los botones del popover. */\n clearButtonText?: string;\n cancelButtonText?: string;\n acceptButtonText?: string;\n minutesStep?: number;\n minTime?: Dayjs;\n /** Si es true usa formato 12h (AM/PM), false = 24h. Default: false. */\n ampm?: boolean;\n viewRenderers?: MuiDateTimePickerProps['viewRenderers'];\n timeSteps?: MuiDateTimePickerProps['timeSteps'];\n textFieldProps?: Record<string, any>;\n /** Passthrough completo a slotProps del MuiDateTimePicker. */\n slotProps?: MuiDateTimePickerProps['slotProps'];\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFDateTimePickerProps extends BaseDateTimePickerProps {\n name: string;\n // `any` plano (no `Control<any>`): RHF tipa `Control<T>` con generics en\n // posiciones tanto contravariantes como covariantes (ej. `_subjects.state`).\n // Cuando el componente o su uso involucra generics adicionales, TS se\n // confunde narroweando el discriminated union y `Control<any>` no logra\n // absorber `Control<MyForm>` en la comparación estructural profunda. El\n // `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos\n // fuertes — solo degradamos la superficie del prop del componente.\n control: any;\n validation?: RegisterOptions;\n /**\n * Side-effect que corre después de que RHF actualiza el form state.\n * Útil para cascadas entre campos. NO reemplaza al handler de RHF.\n */\n onValueChange?: (dateTime: Dayjs | null) => void;\n selectedDateTime?: never;\n onDateTimeChange?: never;\n}\n\nexport interface ControlledDateTimePickerProps extends BaseDateTimePickerProps {\n name?: string;\n control?: never;\n validation?: never;\n selectedDateTime: Dayjs | null;\n onDateTimeChange: (dateTime: Dayjs | null) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type DateTimePickerProps =\n | RHFDateTimePickerProps\n | ControlledDateTimePickerProps;\n\nexport const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {\n const {\n label,\n minDateTime,\n maxDateTime,\n disabled,\n readOnly,\n inputFormat,\n borderRadius = 10,\n labelPosition = 'outside',\n size = 'small',\n helperText,\n error: errorProp,\n sx,\n className,\n preset,\n adapterLocale,\n clearButtonText,\n cancelButtonText,\n acceptButtonText,\n minutesStep,\n minTime,\n ampm = false,\n viewRenderers,\n timeSteps,\n textFieldProps,\n slotProps: slotPropsProp,\n ...rest\n } = props as ControlledDateTimePickerProps & {\n control?: Control<any>;\n validation?: RegisterOptions;\n };\n\n const [validationError, setValidationError] = React.useState<DateTimeValidationError | null>(null);\n\n const validationErrorMessage = useMemo(\n () => getDateTimeValidationMessage(validationError),\n [validationError],\n );\n\n const customLocaleText = useMemo(\n () => buildLocaleText(clearButtonText, cancelButtonText, acceptButtonText),\n [clearButtonText, cancelButtonText, acceptButtonText],\n );\n\n const theme = useTheme();\n const presetSx = resolvePreset('DateTimePicker', preset, theme);\n\n const mergedSx = [\n buildDateTimePickerSx(borderRadius, labelPosition),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : [sx]),\n ];\n\n const renderPicker = (\n value: Dayjs | null,\n onChange: (date: Dayjs | null) => void,\n onBlur?: () => void,\n inputRef?: React.Ref<any>,\n rhfError?: boolean,\n rhfHelperText?: string,\n ) => {\n const finalError = rhfError || !!validationErrorMessage || !!errorProp;\n const finalHelperText = rhfHelperText || validationErrorMessage || helperText;\n\n return (\n <LocalizationProvider\n dateAdapter={AdapterDayjs}\n adapterLocale={adapterLocale}\n >\n <MuiDateTimePicker\n className={className}\n label={label}\n value={value}\n onChange={onChange}\n onError={setValidationError}\n minDateTime={minDateTime}\n maxDateTime={maxDateTime}\n minutesStep={minutesStep}\n disabled={disabled}\n readOnly={readOnly}\n minTime={minTime}\n format={inputFormat ?? 'DD/MM/YYYY HH:mm'}\n ampm={ampm}\n viewRenderers={viewRenderers}\n timeSteps={timeSteps}\n sx={mergedSx}\n slotProps={{\n ...slotPropsProp,\n textField: {\n fullWidth: true,\n size,\n variant: 'outlined',\n // Consumer overrides visuales / de comportamiento opcionales.\n ...(slotPropsProp?.textField as Record<string, any> | undefined),\n ...textFieldProps,\n // Props críticas al final: ganan al consumer para no romper la\n // integración con RHF ni desactivar el visual de error.\n onBlur,\n inputRef,\n error: !!finalError,\n helperText: finalHelperText,\n } as any,\n }}\n localeText={customLocaleText}\n {...rest}\n />\n </LocalizationProvider>\n );\n };\n\n if ('control' in props && props.control) {\n const { name, control, validation, onValueChange } = props as RHFDateTimePickerProps;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n render={({ field, fieldState: { error: fieldError } }) =>\n renderPicker(\n field.value ?? null,\n (next) => {\n field.onChange(next);\n onValueChange?.(next);\n },\n field.onBlur,\n field.ref,\n !!fieldError,\n fieldError?.message,\n )\n }\n />\n );\n }\n\n const { selectedDateTime, onDateTimeChange } = props as ControlledDateTimePickerProps;\n return renderPicker(selectedDateTime, onDateTimeChange);\n};\n\nexport default DateTimePicker;\n"],"names":["React","MuiDateTimePicker","_a"],"mappings":"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"}
|
|
@@ -37,7 +37,8 @@ const AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
|
|
|
37
37
|
const LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
|
|
38
38
|
const DateTimePicker$1 = require("@mui/x-date-pickers/DateTimePicker");
|
|
39
39
|
const reactHookForm = require("react-hook-form");
|
|
40
|
-
const formField_sx = require("./formField.sx-
|
|
40
|
+
const formField_sx = require("./formField.sx-BAX7KwMR.cjs");
|
|
41
|
+
const tokens = require("./tokens-jaWWNk39.cjs");
|
|
41
42
|
const resolvePreset = require("./resolvePreset-CxTI6_Ln.cjs");
|
|
42
43
|
const buildDateTimePickerSx = (borderRadius, labelPosition) => formField_sx.buildFormFieldSx({
|
|
43
44
|
borderRadius,
|
|
@@ -45,12 +46,12 @@ const buildDateTimePickerSx = (borderRadius, labelPosition) => formField_sx.buil
|
|
|
45
46
|
includePickersApi: true,
|
|
46
47
|
extraOutsideSx: {
|
|
47
48
|
"& .MuiInputBase-input": {
|
|
48
|
-
paddingTop:
|
|
49
|
-
paddingBottom:
|
|
49
|
+
paddingTop: tokens.FIELD_INPUT_PADDING_Y,
|
|
50
|
+
paddingBottom: tokens.FIELD_INPUT_PADDING_Y
|
|
50
51
|
},
|
|
51
52
|
"& .MuiPickersInputBase-sectionsContainer": {
|
|
52
|
-
paddingTop:
|
|
53
|
-
paddingBottom:
|
|
53
|
+
paddingTop: tokens.FIELD_INPUT_PADDING_Y,
|
|
54
|
+
paddingBottom: tokens.FIELD_INPUT_PADDING_Y
|
|
54
55
|
}
|
|
55
56
|
}
|
|
56
57
|
});
|
|
@@ -58,12 +59,17 @@ const getDateTimeValidationMessage = (error) => {
|
|
|
58
59
|
switch (error) {
|
|
59
60
|
case "minDate":
|
|
60
61
|
case "maxDate":
|
|
62
|
+
case "minTime":
|
|
63
|
+
case "maxTime":
|
|
64
|
+
return "Fecha/hora fuera del rango permitido";
|
|
61
65
|
case "invalidDate":
|
|
62
66
|
return "Formato de fecha/hora inválido";
|
|
63
67
|
case "disableFuture":
|
|
64
68
|
return "No se permiten fechas/horas futuras";
|
|
65
69
|
case "disablePast":
|
|
66
70
|
return "No se permiten fechas/horas pasadas";
|
|
71
|
+
case "minutesStep":
|
|
72
|
+
return "Minutos no válidos para el paso configurado";
|
|
67
73
|
default:
|
|
68
74
|
return "";
|
|
69
75
|
}
|
|
@@ -97,10 +103,9 @@ const DateTimePicker = (props) => {
|
|
|
97
103
|
acceptButtonText,
|
|
98
104
|
minutesStep,
|
|
99
105
|
minTime,
|
|
100
|
-
|
|
106
|
+
ampm = false,
|
|
101
107
|
viewRenderers,
|
|
102
108
|
timeSteps,
|
|
103
|
-
ampm = false,
|
|
104
109
|
textFieldProps,
|
|
105
110
|
slotProps: slotPropsProp
|
|
106
111
|
} = _a, rest = __objRest(_a, [
|
|
@@ -124,10 +129,9 @@ const DateTimePicker = (props) => {
|
|
|
124
129
|
"acceptButtonText",
|
|
125
130
|
"minutesStep",
|
|
126
131
|
"minTime",
|
|
127
|
-
"
|
|
132
|
+
"ampm",
|
|
128
133
|
"viewRenderers",
|
|
129
134
|
"timeSteps",
|
|
130
|
-
"ampm",
|
|
131
135
|
"textFieldProps",
|
|
132
136
|
"slotProps"
|
|
133
137
|
]);
|
|
@@ -152,13 +156,13 @@ const DateTimePicker = (props) => {
|
|
|
152
156
|
const finalHelperText = rhfHelperText || validationErrorMessage || helperText;
|
|
153
157
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
154
158
|
LocalizationProvider.LocalizationProvider,
|
|
155
|
-
|
|
156
|
-
dateAdapter: AdapterDayjs.AdapterDayjs
|
|
157
|
-
|
|
159
|
+
{
|
|
160
|
+
dateAdapter: AdapterDayjs.AdapterDayjs,
|
|
161
|
+
adapterLocale,
|
|
158
162
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
159
163
|
DateTimePicker$1.DateTimePicker,
|
|
160
164
|
__spreadValues({
|
|
161
|
-
className
|
|
165
|
+
className,
|
|
162
166
|
label,
|
|
163
167
|
value,
|
|
164
168
|
onChange,
|
|
@@ -170,29 +174,32 @@ const DateTimePicker = (props) => {
|
|
|
170
174
|
readOnly,
|
|
171
175
|
minTime,
|
|
172
176
|
format: inputFormat != null ? inputFormat : "DD/MM/YYYY HH:mm",
|
|
177
|
+
ampm,
|
|
173
178
|
viewRenderers,
|
|
174
179
|
timeSteps,
|
|
175
|
-
ampm,
|
|
176
180
|
sx: mergedSx,
|
|
177
181
|
slotProps: __spreadProps(__spreadValues({}, slotPropsProp), {
|
|
178
|
-
textField: __spreadValues(__spreadValues({
|
|
182
|
+
textField: __spreadProps(__spreadValues(__spreadValues({
|
|
179
183
|
fullWidth: true,
|
|
180
184
|
size,
|
|
181
|
-
variant: "outlined"
|
|
185
|
+
variant: "outlined"
|
|
186
|
+
}, slotPropsProp == null ? void 0 : slotPropsProp.textField), textFieldProps), {
|
|
187
|
+
// Props críticas al final: ganan al consumer para no romper la
|
|
188
|
+
// integración con RHF ni desactivar el visual de error.
|
|
182
189
|
onBlur,
|
|
183
190
|
inputRef,
|
|
184
191
|
error: !!finalError,
|
|
185
192
|
helperText: finalHelperText
|
|
186
|
-
}
|
|
193
|
+
})
|
|
187
194
|
}),
|
|
188
195
|
localeText: customLocaleText
|
|
189
196
|
}, rest)
|
|
190
197
|
)
|
|
191
|
-
}
|
|
198
|
+
}
|
|
192
199
|
);
|
|
193
200
|
};
|
|
194
201
|
if ("control" in props && props.control) {
|
|
195
|
-
const { name, control, validation } = props;
|
|
202
|
+
const { name, control, validation, onValueChange } = props;
|
|
196
203
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
197
204
|
reactHookForm.Controller,
|
|
198
205
|
{
|
|
@@ -203,7 +210,10 @@ const DateTimePicker = (props) => {
|
|
|
203
210
|
var _a2;
|
|
204
211
|
return renderPicker(
|
|
205
212
|
(_a2 = field.value) != null ? _a2 : null,
|
|
206
|
-
|
|
213
|
+
(next) => {
|
|
214
|
+
field.onChange(next);
|
|
215
|
+
onValueChange == null ? void 0 : onValueChange(next);
|
|
216
|
+
},
|
|
207
217
|
field.onBlur,
|
|
208
218
|
field.ref,
|
|
209
219
|
!!fieldError,
|
|
@@ -217,4 +227,4 @@ const DateTimePicker = (props) => {
|
|
|
217
227
|
return renderPicker(selectedDateTime, onDateTimeChange);
|
|
218
228
|
};
|
|
219
229
|
exports.DateTimePicker = DateTimePicker;
|
|
220
|
-
//# sourceMappingURL=DateTimePicker-
|
|
230
|
+
//# sourceMappingURL=DateTimePicker-CTnRQCZo.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateTimePicker-CTnRQCZo.cjs","sources":["../src/components/DateTimePicker/DateTimePicker.sx.ts","../src/components/DateTimePicker/DateTimePicker.helpers.ts","../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material';\n\nimport { buildFormFieldSx } from '../_shared/formField.sx';\nimport { FIELD_INPUT_PADDING_Y } from '../../theme/tokens';\nimport type { LabelPosition } from './DateTimePicker';\n\n/**\n * Builder de sx para el DateTimePicker. Mismo patrón que DatePicker.\n * Usa `includePickersApi: true` para soportar la API nueva de MUI X v8.\n */\nexport const buildDateTimePickerSx = (\n borderRadius: number | string,\n labelPosition: LabelPosition,\n): SxProps<Theme> =>\n buildFormFieldSx({\n borderRadius,\n labelPosition,\n includePickersApi: true,\n extraOutsideSx: {\n '& .MuiInputBase-input': {\n paddingTop: FIELD_INPUT_PADDING_Y,\n paddingBottom: FIELD_INPUT_PADDING_Y,\n },\n\n '& .MuiPickersInputBase-sectionsContainer': {\n paddingTop: FIELD_INPUT_PADDING_Y,\n paddingBottom: FIELD_INPUT_PADDING_Y,\n },\n },\n });\n","import type { DateTimeValidationError } from '@mui/x-date-pickers/models';\n\n/**\n * Traduce el error del DateTimePicker a un mensaje en español. Se usa\n * internamente para poblar `helperText` cuando hay error de validación.\n * Cubre tanto errores de fecha (`minDate`, `maxDate`, etc.) como de hora\n * (`minTime`, `maxTime`, `minutesStep`, etc.).\n */\nexport const getDateTimeValidationMessage = (\n error: DateTimeValidationError | null,\n): string => {\n switch (error) {\n case 'minDate':\n case 'maxDate':\n case 'minTime':\n case 'maxTime':\n return 'Fecha/hora fuera del rango permitido';\n case 'invalidDate':\n return 'Formato de fecha/hora inválido';\n case 'disableFuture':\n return 'No se permiten fechas/horas futuras';\n case 'disablePast':\n return 'No se permiten fechas/horas pasadas';\n case 'minutesStep':\n return 'Minutos no válidos para el paso configurado';\n default:\n return '';\n }\n};\n\n/**\n * Construye el `localeText` que MUI acepta para overridear los labels de los\n * botones del popover (Cancel / OK / Clear).\n */\nexport const buildLocaleText = (\n clearButtonText?: string,\n cancelButtonText?: string,\n acceptButtonText?: string,\n): Record<string, string> => {\n const text: Record<string, string> = {};\n if (clearButtonText) text.clearButtonLabel = clearButtonText;\n if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;\n if (acceptButtonText) text.okButtonLabel = acceptButtonText;\n return text;\n};\n","import React, { useMemo } from 'react';\nimport type { SxProps, Theme } from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport {\n DateTimePicker as MuiDateTimePicker,\n type DateTimePickerProps as MuiDateTimePickerProps,\n} from '@mui/x-date-pickers/DateTimePicker';\nimport type { DateTimeValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildDateTimePickerSx } from './DateTimePicker.sx';\nimport {\n buildLocaleText,\n getDateTimeValidationMessage,\n} from './DateTimePicker.helpers';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport type LabelPosition = 'outside' | 'floating';\nexport type DateTimePickerSize = 'small' | 'medium';\n\n// ── Props base ───────────────────────────────────────────────────────────\nexport interface BaseDateTimePickerProps\n extends Omit<MuiDateTimePickerProps, 'value' | 'onChange' | 'slotProps' | 'format'> {\n label?: string;\n minDateTime?: Dayjs;\n maxDateTime?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n /** Formato de la fecha/hora. Default: 'DD/MM/YYYY HH:mm'. */\n inputFormat?: string;\n /** Border radius del input. Default: 10. */\n borderRadius?: number | string;\n /** \"outside\" (default) o \"floating\". */\n labelPosition?: LabelPosition;\n /** Tamaño del TextField. Default: 'small'. */\n size?: DateTimePickerSize;\n helperText?: string;\n error?: boolean;\n sx?: SxProps<Theme>;\n className?: string;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.DateTimePicker`.\n * - `\"default\"` (o ausente) = estilo built-in del paquete.\n * - Cualquier otro string = mergea el preset encima del estilo built-in.\n */\n preset?: string;\n /** Locale del adaptador dayjs. */\n adapterLocale?: string;\n /** Textos de los botones del popover. */\n clearButtonText?: string;\n cancelButtonText?: string;\n acceptButtonText?: string;\n minutesStep?: number;\n minTime?: Dayjs;\n /** Si es true usa formato 12h (AM/PM), false = 24h. Default: false. */\n ampm?: boolean;\n viewRenderers?: MuiDateTimePickerProps['viewRenderers'];\n timeSteps?: MuiDateTimePickerProps['timeSteps'];\n textFieldProps?: Record<string, any>;\n /** Passthrough completo a slotProps del MuiDateTimePicker. */\n slotProps?: MuiDateTimePickerProps['slotProps'];\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFDateTimePickerProps extends BaseDateTimePickerProps {\n name: string;\n // `any` plano (no `Control<any>`): RHF tipa `Control<T>` con generics en\n // posiciones tanto contravariantes como covariantes (ej. `_subjects.state`).\n // Cuando el componente o su uso involucra generics adicionales, TS se\n // confunde narroweando el discriminated union y `Control<any>` no logra\n // absorber `Control<MyForm>` en la comparación estructural profunda. El\n // `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos\n // fuertes — solo degradamos la superficie del prop del componente.\n control: any;\n validation?: RegisterOptions;\n /**\n * Side-effect que corre después de que RHF actualiza el form state.\n * Útil para cascadas entre campos. NO reemplaza al handler de RHF.\n */\n onValueChange?: (dateTime: Dayjs | null) => void;\n selectedDateTime?: never;\n onDateTimeChange?: never;\n}\n\nexport interface ControlledDateTimePickerProps extends BaseDateTimePickerProps {\n name?: string;\n control?: never;\n validation?: never;\n selectedDateTime: Dayjs | null;\n onDateTimeChange: (dateTime: Dayjs | null) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type DateTimePickerProps =\n | RHFDateTimePickerProps\n | ControlledDateTimePickerProps;\n\nexport const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {\n const {\n label,\n minDateTime,\n maxDateTime,\n disabled,\n readOnly,\n inputFormat,\n borderRadius = 10,\n labelPosition = 'outside',\n size = 'small',\n helperText,\n error: errorProp,\n sx,\n className,\n preset,\n adapterLocale,\n clearButtonText,\n cancelButtonText,\n acceptButtonText,\n minutesStep,\n minTime,\n ampm = false,\n viewRenderers,\n timeSteps,\n textFieldProps,\n slotProps: slotPropsProp,\n ...rest\n } = props as ControlledDateTimePickerProps & {\n control?: Control<any>;\n validation?: RegisterOptions;\n };\n\n const [validationError, setValidationError] = React.useState<DateTimeValidationError | null>(null);\n\n const validationErrorMessage = useMemo(\n () => getDateTimeValidationMessage(validationError),\n [validationError],\n );\n\n const customLocaleText = useMemo(\n () => buildLocaleText(clearButtonText, cancelButtonText, acceptButtonText),\n [clearButtonText, cancelButtonText, acceptButtonText],\n );\n\n const theme = useTheme();\n const presetSx = resolvePreset('DateTimePicker', preset, theme);\n\n const mergedSx = [\n buildDateTimePickerSx(borderRadius, labelPosition),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : [sx]),\n ];\n\n const renderPicker = (\n value: Dayjs | null,\n onChange: (date: Dayjs | null) => void,\n onBlur?: () => void,\n inputRef?: React.Ref<any>,\n rhfError?: boolean,\n rhfHelperText?: string,\n ) => {\n const finalError = rhfError || !!validationErrorMessage || !!errorProp;\n const finalHelperText = rhfHelperText || validationErrorMessage || helperText;\n\n return (\n <LocalizationProvider\n dateAdapter={AdapterDayjs}\n adapterLocale={adapterLocale}\n >\n <MuiDateTimePicker\n className={className}\n label={label}\n value={value}\n onChange={onChange}\n onError={setValidationError}\n minDateTime={minDateTime}\n maxDateTime={maxDateTime}\n minutesStep={minutesStep}\n disabled={disabled}\n readOnly={readOnly}\n minTime={minTime}\n format={inputFormat ?? 'DD/MM/YYYY HH:mm'}\n ampm={ampm}\n viewRenderers={viewRenderers}\n timeSteps={timeSteps}\n sx={mergedSx}\n slotProps={{\n ...slotPropsProp,\n textField: {\n fullWidth: true,\n size,\n variant: 'outlined',\n // Consumer overrides visuales / de comportamiento opcionales.\n ...(slotPropsProp?.textField as Record<string, any> | undefined),\n ...textFieldProps,\n // Props críticas al final: ganan al consumer para no romper la\n // integración con RHF ni desactivar el visual de error.\n onBlur,\n inputRef,\n error: !!finalError,\n helperText: finalHelperText,\n } as any,\n }}\n localeText={customLocaleText}\n {...rest}\n />\n </LocalizationProvider>\n );\n };\n\n if ('control' in props && props.control) {\n const { name, control, validation, onValueChange } = props as RHFDateTimePickerProps;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n render={({ field, fieldState: { error: fieldError } }) =>\n renderPicker(\n field.value ?? null,\n (next) => {\n field.onChange(next);\n onValueChange?.(next);\n },\n field.onBlur,\n field.ref,\n !!fieldError,\n fieldError?.message,\n )\n }\n />\n );\n }\n\n const { selectedDateTime, onDateTimeChange } = props as ControlledDateTimePickerProps;\n return renderPicker(selectedDateTime, onDateTimeChange);\n};\n\nexport default DateTimePicker;\n"],"names":["buildFormFieldSx","FIELD_INPUT_PADDING_Y","useMemo","useTheme","resolvePreset","jsx","LocalizationProvider","AdapterDayjs","MuiDateTimePicker","Controller","_a"],"mappings":"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"}
|
|
@@ -34,7 +34,8 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
34
34
|
const material = require("@mui/material");
|
|
35
35
|
const styles = require("@mui/material/styles");
|
|
36
36
|
const reactHookForm = require("react-hook-form");
|
|
37
|
-
const formField_sx = require("./formField.sx-
|
|
37
|
+
const formField_sx = require("./formField.sx-BAX7KwMR.cjs");
|
|
38
|
+
const tokens = require("./tokens-jaWWNk39.cjs");
|
|
38
39
|
const resolvePreset = require("./resolvePreset-CxTI6_Ln.cjs");
|
|
39
40
|
const parseValue = (raw, type) => {
|
|
40
41
|
if (type !== "number") return raw;
|
|
@@ -42,10 +43,10 @@ const parseValue = (raw, type) => {
|
|
|
42
43
|
const n = parseFloat(raw);
|
|
43
44
|
return isNaN(n) ? raw : n;
|
|
44
45
|
};
|
|
45
|
-
const buildSlotProps = (type, min, max, customSlotProps, customInputProps,
|
|
46
|
+
const buildSlotProps = (type, min, max, maxLength, customSlotProps, customInputProps, readOnly) => {
|
|
46
47
|
const numberAttrs = type === "number" ? __spreadValues({ min: min != null ? min : Number.NEGATIVE_INFINITY }, max !== void 0 && { max }) : {};
|
|
47
48
|
return __spreadProps(__spreadValues({}, customSlotProps), {
|
|
48
|
-
htmlInput: __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, customInputProps), customSlotProps == null ? void 0 : customSlotProps.htmlInput), numberAttrs), readOnly && { readOnly: true }),
|
|
49
|
+
htmlInput: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, customInputProps), customSlotProps == null ? void 0 : customSlotProps.htmlInput), numberAttrs), maxLength !== void 0 && { maxLength }), readOnly && { readOnly: true }),
|
|
49
50
|
// Dejamos que MUI maneje el shrink nativamente (animación inside → up).
|
|
50
51
|
// El consumidor puede forzar shrink con slotProps.inputLabel.shrink=true si lo necesita.
|
|
51
52
|
inputLabel: __spreadValues({}, customSlotProps == null ? void 0 : customSlotProps.inputLabel)
|
|
@@ -58,8 +59,8 @@ const buildInputSx = (borderRadius, labelPosition) => {
|
|
|
58
59
|
labelPosition,
|
|
59
60
|
extraOutsideSx: {
|
|
60
61
|
"& .MuiInputBase-input": {
|
|
61
|
-
paddingTop:
|
|
62
|
-
paddingBottom:
|
|
62
|
+
paddingTop: tokens.FIELD_INPUT_PADDING_Y,
|
|
63
|
+
paddingBottom: tokens.FIELD_INPUT_PADDING_Y
|
|
63
64
|
},
|
|
64
65
|
// Filled: quitar el padding-top reservado para el label flotante dentro.
|
|
65
66
|
"& .MuiFilledInput-root": {
|
|
@@ -67,7 +68,7 @@ const buildInputSx = (borderRadius, labelPosition) => {
|
|
|
67
68
|
borderRadius: `${radius} ${radius} 0 0`
|
|
68
69
|
},
|
|
69
70
|
"& .MuiFilledInput-input": {
|
|
70
|
-
paddingTop:
|
|
71
|
+
paddingTop: tokens.FIELD_INPUT_PADDING_Y
|
|
71
72
|
},
|
|
72
73
|
// Standard: quitar el margin-top reservado para el label flotante.
|
|
73
74
|
"& .MuiInput-root": {
|
|
@@ -86,10 +87,12 @@ const Input = (props) => {
|
|
|
86
87
|
preset,
|
|
87
88
|
min,
|
|
88
89
|
max,
|
|
90
|
+
maxLength,
|
|
89
91
|
readOnly,
|
|
90
92
|
inputProps,
|
|
91
93
|
slotProps,
|
|
92
|
-
sx
|
|
94
|
+
sx,
|
|
95
|
+
onBlur
|
|
93
96
|
} = _a, rest = __objRest(_a, [
|
|
94
97
|
"type",
|
|
95
98
|
"variant",
|
|
@@ -99,10 +102,12 @@ const Input = (props) => {
|
|
|
99
102
|
"preset",
|
|
100
103
|
"min",
|
|
101
104
|
"max",
|
|
105
|
+
"maxLength",
|
|
102
106
|
"readOnly",
|
|
103
107
|
"inputProps",
|
|
104
108
|
"slotProps",
|
|
105
|
-
"sx"
|
|
109
|
+
"sx",
|
|
110
|
+
"onBlur"
|
|
106
111
|
]);
|
|
107
112
|
const theme = styles.useTheme();
|
|
108
113
|
const presetSx = resolvePreset.resolvePreset("Input", preset, theme);
|
|
@@ -110,18 +115,18 @@ const Input = (props) => {
|
|
|
110
115
|
type,
|
|
111
116
|
min,
|
|
112
117
|
max,
|
|
118
|
+
maxLength,
|
|
113
119
|
slotProps,
|
|
114
120
|
inputProps,
|
|
115
|
-
labelPosition,
|
|
116
121
|
readOnly
|
|
117
122
|
);
|
|
118
123
|
const mergedSx = [
|
|
119
124
|
buildInputSx(borderRadius, labelPosition),
|
|
120
125
|
...presetSx ? [presetSx] : [],
|
|
121
|
-
...Array.isArray(sx) ? sx : [sx]
|
|
126
|
+
...Array.isArray(sx) ? sx : sx ? [sx] : []
|
|
122
127
|
];
|
|
123
128
|
if ("control" in props && props.control) {
|
|
124
|
-
const { name, control, validation } = props;
|
|
129
|
+
const { name, control, validation, onValueChange } = props;
|
|
125
130
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
126
131
|
reactHookForm.Controller,
|
|
127
132
|
{
|
|
@@ -137,8 +142,15 @@ const Input = (props) => {
|
|
|
137
142
|
}, rest), {
|
|
138
143
|
name: field.name,
|
|
139
144
|
value: (_a2 = field.value) != null ? _a2 : "",
|
|
140
|
-
onChange: (e) =>
|
|
141
|
-
|
|
145
|
+
onChange: (e) => {
|
|
146
|
+
const parsed = parseValue(e.target.value, type);
|
|
147
|
+
field.onChange(parsed);
|
|
148
|
+
onValueChange == null ? void 0 : onValueChange(parsed);
|
|
149
|
+
},
|
|
150
|
+
onBlur: (e) => {
|
|
151
|
+
field.onBlur();
|
|
152
|
+
onBlur == null ? void 0 : onBlur(e);
|
|
153
|
+
},
|
|
142
154
|
inputRef: field.ref,
|
|
143
155
|
type,
|
|
144
156
|
variant,
|
|
@@ -161,6 +173,7 @@ const Input = (props) => {
|
|
|
161
173
|
}, rest), {
|
|
162
174
|
value: value != null ? value : "",
|
|
163
175
|
onChange: (e) => onChange(parseValue(e.target.value, type)),
|
|
176
|
+
onBlur,
|
|
164
177
|
type,
|
|
165
178
|
variant,
|
|
166
179
|
size,
|
|
@@ -170,4 +183,4 @@ const Input = (props) => {
|
|
|
170
183
|
);
|
|
171
184
|
};
|
|
172
185
|
exports.Input = Input;
|
|
173
|
-
//# sourceMappingURL=Input-
|
|
186
|
+
//# sourceMappingURL=Input-jYapjJYM.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input-jYapjJYM.cjs","sources":["../src/components/Input/Input.helpers.ts","../src/components/Input/Input.sx.ts","../src/components/Input/Input.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport type { TextFieldProps } from '@mui/material';\nimport type { InputType } from './Input';\n\n/**\n * Convierte el valor raw del evento al tipo apropiado.\n * Para type=\"number\" intenta parsear a número; si falla, devuelve el raw\n * (permite estados intermedios como \"\" o \"-\" mientras el usuario tipea).\n */\nexport const parseValue = (raw: string, type: InputType): string | number => {\n if (type !== 'number') return raw;\n if (raw === '' || raw === '-') return raw;\n const n = parseFloat(raw);\n return isNaN(n) ? raw : n;\n};\n\n/**\n * Construye los slotProps del TextField consolidando htmlInput + inputLabel.\n * Maneja los atributos min/max cuando type=\"number\", maxLength y readOnly.\n */\nexport const buildSlotProps = (\n type: InputType,\n min: number | undefined,\n max: number | undefined,\n maxLength: number | undefined,\n customSlotProps: TextFieldProps['slotProps'],\n customInputProps: InputHTMLAttributes<HTMLInputElement> | undefined,\n readOnly?: boolean,\n): TextFieldProps['slotProps'] => {\n const numberAttrs =\n type === 'number'\n ? { min: min ?? Number.NEGATIVE_INFINITY, ...(max !== undefined && { max }) }\n : {};\n\n return {\n ...customSlotProps,\n htmlInput: {\n ...customInputProps,\n ...(customSlotProps as any)?.htmlInput,\n ...numberAttrs,\n ...(maxLength !== undefined && { maxLength }),\n ...(readOnly && { readOnly: true }),\n },\n // Dejamos que MUI maneje el shrink nativamente (animación inside → up).\n // El consumidor puede forzar shrink con slotProps.inputLabel.shrink=true si lo necesita.\n inputLabel: {\n ...(customSlotProps as any)?.inputLabel,\n },\n };\n};\n","import type { TextFieldProps } from '@mui/material';\n\nimport { buildFormFieldSx } from '../_shared/formField.sx';\nimport { FIELD_INPUT_PADDING_Y } from '../../theme/tokens';\nimport type { LabelPosition } from './Input';\n\n/**\n * Builder de sx para el Input. Usa el builder compartido\n * `buildFormFieldSx` y añade overrides específicos de TextField\n * (padding del input base, filled, standard).\n */\nexport const buildInputSx = (\n borderRadius: number | string,\n labelPosition: LabelPosition,\n): TextFieldProps['sx'] => {\n const radius = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n\n return buildFormFieldSx({\n borderRadius,\n labelPosition,\n extraOutsideSx: {\n '& .MuiInputBase-input': {\n paddingTop: FIELD_INPUT_PADDING_Y,\n paddingBottom: FIELD_INPUT_PADDING_Y,\n },\n\n // Filled: quitar el padding-top reservado para el label flotante dentro.\n '& .MuiFilledInput-root': {\n paddingTop: 0,\n borderRadius: `${radius} ${radius} 0 0`,\n },\n '& .MuiFilledInput-input': {\n paddingTop: FIELD_INPUT_PADDING_Y,\n },\n\n // Standard: quitar el margin-top reservado para el label flotante.\n '& .MuiInput-root': {\n marginTop: 0,\n },\n },\n });\n};\n","import { TextField, type TextFieldProps } from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { parseValue, buildSlotProps } from './Input.helpers';\nimport { buildInputSx } from './Input.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport type InputType =\n | 'text' | 'number' | 'email' | 'password' | 'tel'\n | 'url' | 'search' | 'date' | 'datetime-local'\n | 'month' | 'week' | 'time' | 'color';\n\nexport type LabelPosition = 'outside' | 'floating';\n\n// ── Props base (todo lo común entre RHF y controlado) ────────────────────\nexport interface BaseInputProps\n extends Omit<TextFieldProps, 'value' | 'onChange' | 'type'> {\n type?: InputType;\n min?: number;\n max?: number;\n maxLength?: number;\n /** Border radius del input. Default: 10 */\n borderRadius?: number | string;\n /** \"outside\" = label arriba del campo (default). \"floating\" = label clásico MUI dentro del borde */\n labelPosition?: LabelPosition;\n readOnly?: boolean;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.Input`.\n * - `\"default\"` (o ausente) = estilo built-in del paquete.\n * - Cualquier otro string = mergea el preset encima del estilo built-in.\n */\n preset?: string;\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFInputProps extends BaseInputProps {\n name: string;\n // `any` plano (no `Control<any>`): RHF tipa `Control<T>` con generics en\n // posiciones tanto contravariantes como covariantes (ej. `_subjects.state`).\n // Cuando el componente o su uso involucra generics adicionales, TS se\n // confunde narroweando el discriminated union y `Control<any>` no logra\n // absorber `Control<MyForm>` en la comparación estructural profunda. El\n // `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos\n // fuertes — solo degradamos la superficie del prop del componente.\n control: any;\n validation?: RegisterOptions;\n /**\n * Side-effect que corre después de que RHF actualiza el form state.\n * Útil para cascadas entre campos (ej. reset de municipio al cambiar\n * departamento). NO reemplaza al handler de RHF.\n */\n onValueChange?: (value: string | number) => void;\n value?: never;\n onChange?: never;\n}\n\nexport interface ControlledInputProps extends BaseInputProps {\n name?: string;\n control?: never;\n validation?: never;\n value: string | number;\n onChange: (value: string | number) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type InputProps = RHFInputProps | ControlledInputProps;\n\nexport const Input: React.FC<InputProps> = (props) => {\n const {\n type = 'text',\n variant = 'outlined',\n size = 'small',\n borderRadius = 10,\n labelPosition = 'outside',\n preset,\n min,\n max,\n maxLength,\n readOnly,\n inputProps,\n slotProps,\n sx,\n onBlur,\n ...rest\n } = props as ControlledInputProps & {\n control?: Control<any>;\n validation?: RegisterOptions;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('Input', preset, theme);\n\n const finalSlotProps = buildSlotProps(\n type,\n min,\n max,\n maxLength,\n slotProps,\n inputProps,\n readOnly,\n );\n const mergedSx = [\n buildInputSx(borderRadius, labelPosition),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n ];\n\n if ('control' in props && props.control) {\n const { name, control, validation, onValueChange } = props as RHFInputProps;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n render={({ field, fieldState: { error } }) => (\n <TextField\n fullWidth\n {...rest}\n name={field.name}\n value={field.value ?? ''}\n onChange={(e) => {\n const parsed = parseValue(e.target.value, type);\n field.onChange(parsed);\n onValueChange?.(parsed);\n }}\n onBlur={(e) => {\n field.onBlur();\n onBlur?.(e);\n }}\n inputRef={field.ref}\n type={type}\n variant={variant}\n size={size}\n slotProps={finalSlotProps}\n sx={mergedSx}\n error={!!error || rest.error}\n helperText={error?.message ?? rest.helperText}\n />\n )}\n />\n );\n }\n\n const { value, onChange } = props as ControlledInputProps;\n return (\n <TextField\n fullWidth\n {...rest}\n value={value ?? ''}\n onChange={(e) => onChange(parseValue(e.target.value, type))}\n onBlur={onBlur}\n type={type}\n variant={variant}\n size={size}\n slotProps={finalSlotProps}\n sx={mergedSx}\n />\n );\n};\n\nexport default Input;\n"],"names":["buildFormFieldSx","FIELD_INPUT_PADDING_Y","useTheme","resolvePreset","jsx","Controller","TextField","_a"],"mappings":"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"}
|
|
@@ -33,7 +33,8 @@ import { jsx } from "react/jsx-runtime";
|
|
|
33
33
|
import { TextField } from "@mui/material";
|
|
34
34
|
import { useTheme } from "@mui/material/styles";
|
|
35
35
|
import { Controller } from "react-hook-form";
|
|
36
|
-
import { b as buildFormFieldSx
|
|
36
|
+
import { b as buildFormFieldSx } from "./formField.sx-8_QRnKxv.js";
|
|
37
|
+
import { F as FIELD_INPUT_PADDING_Y } from "./tokens-BRrcP_p_.js";
|
|
37
38
|
import { r as resolvePreset } from "./resolvePreset-K6_BfWHD.js";
|
|
38
39
|
const parseValue = (raw, type) => {
|
|
39
40
|
if (type !== "number") return raw;
|
|
@@ -41,10 +42,10 @@ const parseValue = (raw, type) => {
|
|
|
41
42
|
const n = parseFloat(raw);
|
|
42
43
|
return isNaN(n) ? raw : n;
|
|
43
44
|
};
|
|
44
|
-
const buildSlotProps = (type, min, max, customSlotProps, customInputProps,
|
|
45
|
+
const buildSlotProps = (type, min, max, maxLength, customSlotProps, customInputProps, readOnly) => {
|
|
45
46
|
const numberAttrs = type === "number" ? __spreadValues({ min: min != null ? min : Number.NEGATIVE_INFINITY }, max !== void 0 && { max }) : {};
|
|
46
47
|
return __spreadProps(__spreadValues({}, customSlotProps), {
|
|
47
|
-
htmlInput: __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, customInputProps), customSlotProps == null ? void 0 : customSlotProps.htmlInput), numberAttrs), readOnly && { readOnly: true }),
|
|
48
|
+
htmlInput: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, customInputProps), customSlotProps == null ? void 0 : customSlotProps.htmlInput), numberAttrs), maxLength !== void 0 && { maxLength }), readOnly && { readOnly: true }),
|
|
48
49
|
// Dejamos que MUI maneje el shrink nativamente (animación inside → up).
|
|
49
50
|
// El consumidor puede forzar shrink con slotProps.inputLabel.shrink=true si lo necesita.
|
|
50
51
|
inputLabel: __spreadValues({}, customSlotProps == null ? void 0 : customSlotProps.inputLabel)
|
|
@@ -85,10 +86,12 @@ const Input = (props) => {
|
|
|
85
86
|
preset,
|
|
86
87
|
min,
|
|
87
88
|
max,
|
|
89
|
+
maxLength,
|
|
88
90
|
readOnly,
|
|
89
91
|
inputProps,
|
|
90
92
|
slotProps,
|
|
91
|
-
sx
|
|
93
|
+
sx,
|
|
94
|
+
onBlur
|
|
92
95
|
} = _a, rest = __objRest(_a, [
|
|
93
96
|
"type",
|
|
94
97
|
"variant",
|
|
@@ -98,10 +101,12 @@ const Input = (props) => {
|
|
|
98
101
|
"preset",
|
|
99
102
|
"min",
|
|
100
103
|
"max",
|
|
104
|
+
"maxLength",
|
|
101
105
|
"readOnly",
|
|
102
106
|
"inputProps",
|
|
103
107
|
"slotProps",
|
|
104
|
-
"sx"
|
|
108
|
+
"sx",
|
|
109
|
+
"onBlur"
|
|
105
110
|
]);
|
|
106
111
|
const theme = useTheme();
|
|
107
112
|
const presetSx = resolvePreset("Input", preset, theme);
|
|
@@ -109,18 +114,18 @@ const Input = (props) => {
|
|
|
109
114
|
type,
|
|
110
115
|
min,
|
|
111
116
|
max,
|
|
117
|
+
maxLength,
|
|
112
118
|
slotProps,
|
|
113
119
|
inputProps,
|
|
114
|
-
labelPosition,
|
|
115
120
|
readOnly
|
|
116
121
|
);
|
|
117
122
|
const mergedSx = [
|
|
118
123
|
buildInputSx(borderRadius, labelPosition),
|
|
119
124
|
...presetSx ? [presetSx] : [],
|
|
120
|
-
...Array.isArray(sx) ? sx : [sx]
|
|
125
|
+
...Array.isArray(sx) ? sx : sx ? [sx] : []
|
|
121
126
|
];
|
|
122
127
|
if ("control" in props && props.control) {
|
|
123
|
-
const { name, control, validation } = props;
|
|
128
|
+
const { name, control, validation, onValueChange } = props;
|
|
124
129
|
return /* @__PURE__ */ jsx(
|
|
125
130
|
Controller,
|
|
126
131
|
{
|
|
@@ -136,8 +141,15 @@ const Input = (props) => {
|
|
|
136
141
|
}, rest), {
|
|
137
142
|
name: field.name,
|
|
138
143
|
value: (_a2 = field.value) != null ? _a2 : "",
|
|
139
|
-
onChange: (e) =>
|
|
140
|
-
|
|
144
|
+
onChange: (e) => {
|
|
145
|
+
const parsed = parseValue(e.target.value, type);
|
|
146
|
+
field.onChange(parsed);
|
|
147
|
+
onValueChange == null ? void 0 : onValueChange(parsed);
|
|
148
|
+
},
|
|
149
|
+
onBlur: (e) => {
|
|
150
|
+
field.onBlur();
|
|
151
|
+
onBlur == null ? void 0 : onBlur(e);
|
|
152
|
+
},
|
|
141
153
|
inputRef: field.ref,
|
|
142
154
|
type,
|
|
143
155
|
variant,
|
|
@@ -160,6 +172,7 @@ const Input = (props) => {
|
|
|
160
172
|
}, rest), {
|
|
161
173
|
value: value != null ? value : "",
|
|
162
174
|
onChange: (e) => onChange(parseValue(e.target.value, type)),
|
|
175
|
+
onBlur,
|
|
163
176
|
type,
|
|
164
177
|
variant,
|
|
165
178
|
size,
|
|
@@ -171,4 +184,4 @@ const Input = (props) => {
|
|
|
171
184
|
export {
|
|
172
185
|
Input as I
|
|
173
186
|
};
|
|
174
|
-
//# sourceMappingURL=Input-
|
|
187
|
+
//# sourceMappingURL=Input-rVVhI_wk.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input-rVVhI_wk.js","sources":["../src/components/Input/Input.helpers.ts","../src/components/Input/Input.sx.ts","../src/components/Input/Input.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport type { TextFieldProps } from '@mui/material';\nimport type { InputType } from './Input';\n\n/**\n * Convierte el valor raw del evento al tipo apropiado.\n * Para type=\"number\" intenta parsear a número; si falla, devuelve el raw\n * (permite estados intermedios como \"\" o \"-\" mientras el usuario tipea).\n */\nexport const parseValue = (raw: string, type: InputType): string | number => {\n if (type !== 'number') return raw;\n if (raw === '' || raw === '-') return raw;\n const n = parseFloat(raw);\n return isNaN(n) ? raw : n;\n};\n\n/**\n * Construye los slotProps del TextField consolidando htmlInput + inputLabel.\n * Maneja los atributos min/max cuando type=\"number\", maxLength y readOnly.\n */\nexport const buildSlotProps = (\n type: InputType,\n min: number | undefined,\n max: number | undefined,\n maxLength: number | undefined,\n customSlotProps: TextFieldProps['slotProps'],\n customInputProps: InputHTMLAttributes<HTMLInputElement> | undefined,\n readOnly?: boolean,\n): TextFieldProps['slotProps'] => {\n const numberAttrs =\n type === 'number'\n ? { min: min ?? Number.NEGATIVE_INFINITY, ...(max !== undefined && { max }) }\n : {};\n\n return {\n ...customSlotProps,\n htmlInput: {\n ...customInputProps,\n ...(customSlotProps as any)?.htmlInput,\n ...numberAttrs,\n ...(maxLength !== undefined && { maxLength }),\n ...(readOnly && { readOnly: true }),\n },\n // Dejamos que MUI maneje el shrink nativamente (animación inside → up).\n // El consumidor puede forzar shrink con slotProps.inputLabel.shrink=true si lo necesita.\n inputLabel: {\n ...(customSlotProps as any)?.inputLabel,\n },\n };\n};\n","import type { TextFieldProps } from '@mui/material';\n\nimport { buildFormFieldSx } from '../_shared/formField.sx';\nimport { FIELD_INPUT_PADDING_Y } from '../../theme/tokens';\nimport type { LabelPosition } from './Input';\n\n/**\n * Builder de sx para el Input. Usa el builder compartido\n * `buildFormFieldSx` y añade overrides específicos de TextField\n * (padding del input base, filled, standard).\n */\nexport const buildInputSx = (\n borderRadius: number | string,\n labelPosition: LabelPosition,\n): TextFieldProps['sx'] => {\n const radius = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n\n return buildFormFieldSx({\n borderRadius,\n labelPosition,\n extraOutsideSx: {\n '& .MuiInputBase-input': {\n paddingTop: FIELD_INPUT_PADDING_Y,\n paddingBottom: FIELD_INPUT_PADDING_Y,\n },\n\n // Filled: quitar el padding-top reservado para el label flotante dentro.\n '& .MuiFilledInput-root': {\n paddingTop: 0,\n borderRadius: `${radius} ${radius} 0 0`,\n },\n '& .MuiFilledInput-input': {\n paddingTop: FIELD_INPUT_PADDING_Y,\n },\n\n // Standard: quitar el margin-top reservado para el label flotante.\n '& .MuiInput-root': {\n marginTop: 0,\n },\n },\n });\n};\n","import { TextField, type TextFieldProps } from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { parseValue, buildSlotProps } from './Input.helpers';\nimport { buildInputSx } from './Input.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport type InputType =\n | 'text' | 'number' | 'email' | 'password' | 'tel'\n | 'url' | 'search' | 'date' | 'datetime-local'\n | 'month' | 'week' | 'time' | 'color';\n\nexport type LabelPosition = 'outside' | 'floating';\n\n// ── Props base (todo lo común entre RHF y controlado) ────────────────────\nexport interface BaseInputProps\n extends Omit<TextFieldProps, 'value' | 'onChange' | 'type'> {\n type?: InputType;\n min?: number;\n max?: number;\n maxLength?: number;\n /** Border radius del input. Default: 10 */\n borderRadius?: number | string;\n /** \"outside\" = label arriba del campo (default). \"floating\" = label clásico MUI dentro del borde */\n labelPosition?: LabelPosition;\n readOnly?: boolean;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.Input`.\n * - `\"default\"` (o ausente) = estilo built-in del paquete.\n * - Cualquier otro string = mergea el preset encima del estilo built-in.\n */\n preset?: string;\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFInputProps extends BaseInputProps {\n name: string;\n // `any` plano (no `Control<any>`): RHF tipa `Control<T>` con generics en\n // posiciones tanto contravariantes como covariantes (ej. `_subjects.state`).\n // Cuando el componente o su uso involucra generics adicionales, TS se\n // confunde narroweando el discriminated union y `Control<any>` no logra\n // absorber `Control<MyForm>` en la comparación estructural profunda. El\n // `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos\n // fuertes — solo degradamos la superficie del prop del componente.\n control: any;\n validation?: RegisterOptions;\n /**\n * Side-effect que corre después de que RHF actualiza el form state.\n * Útil para cascadas entre campos (ej. reset de municipio al cambiar\n * departamento). NO reemplaza al handler de RHF.\n */\n onValueChange?: (value: string | number) => void;\n value?: never;\n onChange?: never;\n}\n\nexport interface ControlledInputProps extends BaseInputProps {\n name?: string;\n control?: never;\n validation?: never;\n value: string | number;\n onChange: (value: string | number) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type InputProps = RHFInputProps | ControlledInputProps;\n\nexport const Input: React.FC<InputProps> = (props) => {\n const {\n type = 'text',\n variant = 'outlined',\n size = 'small',\n borderRadius = 10,\n labelPosition = 'outside',\n preset,\n min,\n max,\n maxLength,\n readOnly,\n inputProps,\n slotProps,\n sx,\n onBlur,\n ...rest\n } = props as ControlledInputProps & {\n control?: Control<any>;\n validation?: RegisterOptions;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('Input', preset, theme);\n\n const finalSlotProps = buildSlotProps(\n type,\n min,\n max,\n maxLength,\n slotProps,\n inputProps,\n readOnly,\n );\n const mergedSx = [\n buildInputSx(borderRadius, labelPosition),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n ];\n\n if ('control' in props && props.control) {\n const { name, control, validation, onValueChange } = props as RHFInputProps;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n render={({ field, fieldState: { error } }) => (\n <TextField\n fullWidth\n {...rest}\n name={field.name}\n value={field.value ?? ''}\n onChange={(e) => {\n const parsed = parseValue(e.target.value, type);\n field.onChange(parsed);\n onValueChange?.(parsed);\n }}\n onBlur={(e) => {\n field.onBlur();\n onBlur?.(e);\n }}\n inputRef={field.ref}\n type={type}\n variant={variant}\n size={size}\n slotProps={finalSlotProps}\n sx={mergedSx}\n error={!!error || rest.error}\n helperText={error?.message ?? rest.helperText}\n />\n )}\n />\n );\n }\n\n const { value, onChange } = props as ControlledInputProps;\n return (\n <TextField\n fullWidth\n {...rest}\n value={value ?? ''}\n onChange={(e) => onChange(parseValue(e.target.value, type))}\n onBlur={onBlur}\n type={type}\n variant={variant}\n size={size}\n slotProps={finalSlotProps}\n sx={mergedSx}\n />\n );\n};\n\nexport default Input;\n"],"names":["_a"],"mappings":"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"}
|