@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
|
@@ -35,8 +35,7 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
35
35
|
const React = require("react");
|
|
36
36
|
const material = require("@mui/material");
|
|
37
37
|
const styles = require("@mui/material/styles");
|
|
38
|
-
const
|
|
39
|
-
const formField_sx = require("../../formField.sx-CQ1mbk9M.cjs");
|
|
38
|
+
const formField_sx = require("../../formField.sx-BAX7KwMR.cjs");
|
|
40
39
|
const resolvePreset = require("../../resolvePreset-CT3kU-K2.cjs");
|
|
41
40
|
const ClearIcon = require("@mui/icons-material/Clear");
|
|
42
41
|
const buildAutocompleteSx = (borderRadius, labelPosition) => formField_sx.buildFormFieldSx({
|
|
@@ -55,24 +54,40 @@ const buildAutocompleteSx = (borderRadius, labelPosition) => formField_sx.buildF
|
|
|
55
54
|
}
|
|
56
55
|
}
|
|
57
56
|
});
|
|
58
|
-
const resolveSingleValue = (options, value) => {
|
|
57
|
+
const resolveSingleValue = (options, value, getKey) => {
|
|
59
58
|
var _a;
|
|
60
|
-
|
|
59
|
+
if (value === null || value === void 0) return null;
|
|
60
|
+
const key = getKey(value);
|
|
61
|
+
return (_a = options.find((o) => getKey(o.value) === key)) != null ? _a : null;
|
|
61
62
|
};
|
|
62
|
-
const resolveMultipleValue = (options, value) => {
|
|
63
|
+
const resolveMultipleValue = (options, value, getKey) => {
|
|
63
64
|
if (!Array.isArray(value)) return [];
|
|
64
|
-
|
|
65
|
+
const keys = new Set(value.map(getKey));
|
|
66
|
+
return options.filter((o) => keys.has(getKey(o.value)));
|
|
65
67
|
};
|
|
66
|
-
const
|
|
68
|
+
const areOptionsShallowEqual = (a, b, getKey) => {
|
|
69
|
+
const keysA = Object.keys(a);
|
|
70
|
+
const keysB = Object.keys(b);
|
|
71
|
+
if (keysA.length !== keysB.length) return false;
|
|
72
|
+
return keysA.every((k) => {
|
|
73
|
+
if (k === "value") return getKey(a.value) === getKey(b.value);
|
|
74
|
+
return a[k] === b[k];
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
const areResolvedValuesEqual = (prev, next, multiple, getKey) => {
|
|
67
78
|
if (multiple) {
|
|
68
79
|
if (!Array.isArray(prev) || !Array.isArray(next)) return false;
|
|
69
80
|
if (prev.length !== next.length) return false;
|
|
70
81
|
return prev.every((o, i) => {
|
|
71
|
-
|
|
72
|
-
return
|
|
82
|
+
const n2 = next[i];
|
|
83
|
+
return !!n2 && areOptionsShallowEqual(o, n2, getKey);
|
|
73
84
|
});
|
|
74
85
|
}
|
|
75
|
-
|
|
86
|
+
const p = prev;
|
|
87
|
+
const n = next;
|
|
88
|
+
if (p === n) return true;
|
|
89
|
+
if (!p || !n) return false;
|
|
90
|
+
return areOptionsShallowEqual(p, n, getKey);
|
|
76
91
|
};
|
|
77
92
|
const isResolvedValueEmpty = (resolvedValue, multiple) => {
|
|
78
93
|
if (multiple) {
|
|
@@ -85,30 +100,30 @@ const AutocompleteOption = ({
|
|
|
85
100
|
option,
|
|
86
101
|
customRender
|
|
87
102
|
}) => {
|
|
88
|
-
|
|
89
|
-
return /* @__PURE__ */ jsxRuntime.jsx("li", __spreadProps(__spreadValues({}, liRest), { children: customRender ? customRender(option) : option.label }), option.value);
|
|
103
|
+
return /* @__PURE__ */ jsxRuntime.jsx("li", __spreadProps(__spreadValues({}, liProps), { children: customRender ? customRender(option) : option.label }));
|
|
90
104
|
};
|
|
91
105
|
const AutocompleteChips = ({
|
|
92
106
|
value,
|
|
93
107
|
getTagProps,
|
|
94
108
|
size,
|
|
95
109
|
maxChipsToShow,
|
|
96
|
-
renderChipLabel
|
|
110
|
+
renderChipLabel,
|
|
111
|
+
getKey
|
|
97
112
|
}) => {
|
|
98
113
|
const displayed = value.slice(0, maxChipsToShow);
|
|
99
114
|
const hidden = value.length - maxChipsToShow;
|
|
100
115
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
101
116
|
displayed.map((option, index) => {
|
|
102
|
-
const
|
|
103
|
-
return /* @__PURE__ */
|
|
117
|
+
const _a = getTagProps({ index }), { key: _ignored } = _a, tagProps = __objRest(_a, ["key"]);
|
|
118
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
104
119
|
material.Chip,
|
|
105
120
|
__spreadProps(__spreadValues({}, tagProps), {
|
|
106
|
-
key: option.value,
|
|
107
121
|
size,
|
|
108
122
|
label: renderChipLabel ? renderChipLabel(option) : option.label,
|
|
109
123
|
avatar: option.img ? /* @__PURE__ */ jsxRuntime.jsx(material.Avatar, { src: option.img }) : void 0,
|
|
110
124
|
deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, {})
|
|
111
|
-
})
|
|
125
|
+
}),
|
|
126
|
+
getKey(option.value)
|
|
112
127
|
);
|
|
113
128
|
}),
|
|
114
129
|
hidden > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { size, label: `+${hidden} más` })
|
|
@@ -134,13 +149,13 @@ function Autocomplete(props) {
|
|
|
134
149
|
maxChipsToShow = 3,
|
|
135
150
|
renderOptionItem,
|
|
136
151
|
renderChipLabel,
|
|
152
|
+
renderSingleValue,
|
|
137
153
|
borderRadius = 10,
|
|
138
154
|
labelPosition = "outside",
|
|
139
155
|
size = "small",
|
|
140
156
|
noOptionsText = "No hay opciones",
|
|
141
157
|
loadingText,
|
|
142
158
|
sx,
|
|
143
|
-
className,
|
|
144
159
|
preset,
|
|
145
160
|
textFieldProps,
|
|
146
161
|
onInputChange,
|
|
@@ -149,25 +164,23 @@ function Autocomplete(props) {
|
|
|
149
164
|
freeSolo,
|
|
150
165
|
open,
|
|
151
166
|
onOpen,
|
|
152
|
-
onClose
|
|
167
|
+
onClose,
|
|
168
|
+
getOptionKey
|
|
153
169
|
} = props;
|
|
170
|
+
const getKey = getOptionKey != null ? getOptionKey : ((v) => v);
|
|
154
171
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
155
|
-
const seenOptionsRef = React.useRef(
|
|
156
|
-
/* @__PURE__ */ new Map()
|
|
157
|
-
);
|
|
172
|
+
const seenOptionsRef = React.useRef(/* @__PURE__ */ new Map());
|
|
158
173
|
for (const opt of options) {
|
|
159
|
-
seenOptionsRef.current.set(opt.value, opt);
|
|
174
|
+
seenOptionsRef.current.set(getKey(opt.value), opt);
|
|
160
175
|
}
|
|
161
176
|
const resolvePool = React.useMemo(() => {
|
|
162
177
|
const merged = new Map(seenOptionsRef.current);
|
|
163
|
-
for (const opt of options) merged.set(opt.value, opt);
|
|
178
|
+
for (const opt of options) merged.set(getKey(opt.value), opt);
|
|
164
179
|
return Array.from(merged.values());
|
|
165
180
|
}, [options]);
|
|
166
|
-
const prevResolvedRef = React.useRef(
|
|
167
|
-
multiple ? [] : null
|
|
168
|
-
);
|
|
181
|
+
const prevResolvedRef = React.useRef(multiple ? [] : null);
|
|
169
182
|
const stabilizeResolved = (newVal) => {
|
|
170
|
-
if (areResolvedValuesEqual(prevResolvedRef.current, newVal, multiple)) {
|
|
183
|
+
if (areResolvedValuesEqual(prevResolvedRef.current, newVal, multiple, getKey)) {
|
|
171
184
|
return prevResolvedRef.current;
|
|
172
185
|
}
|
|
173
186
|
prevResolvedRef.current = newVal;
|
|
@@ -180,11 +193,10 @@ function Autocomplete(props) {
|
|
|
180
193
|
...presetSx ? [presetSx] : [],
|
|
181
194
|
...Array.isArray(sx) ? sx : sx ? [sx] : []
|
|
182
195
|
];
|
|
183
|
-
const renderAutocomplete = (resolvedValue2, handleChange
|
|
184
|
-
const finalError = !!rhfError || !!errorProp;
|
|
185
|
-
const finalHelperText = rhfHelperText || helperText;
|
|
196
|
+
const renderAutocomplete = (resolvedValue2, handleChange) => {
|
|
186
197
|
const isEmpty = isResolvedValueEmpty(resolvedValue2, multiple);
|
|
187
198
|
const showPlaceholder = isEmpty && isFocused && !!placeholder;
|
|
199
|
+
const singleAdornment = !multiple && resolvedValue2 && renderSingleValue ? renderSingleValue(resolvedValue2) : null;
|
|
188
200
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
189
201
|
material.Autocomplete,
|
|
190
202
|
{
|
|
@@ -194,7 +206,6 @@ function Autocomplete(props) {
|
|
|
194
206
|
disabled,
|
|
195
207
|
readOnly,
|
|
196
208
|
loading,
|
|
197
|
-
className,
|
|
198
209
|
sx: mergedSx,
|
|
199
210
|
freeSolo,
|
|
200
211
|
open,
|
|
@@ -207,36 +218,53 @@ function Autocomplete(props) {
|
|
|
207
218
|
var _a;
|
|
208
219
|
return typeof opt === "string" ? opt : (_a = opt == null ? void 0 : opt.label) != null ? _a : "";
|
|
209
220
|
},
|
|
210
|
-
isOptionEqualToValue: (a, b) =>
|
|
211
|
-
|
|
221
|
+
isOptionEqualToValue: (a, b) => {
|
|
222
|
+
if (typeof a === "string" || typeof b === "string") return a === b;
|
|
223
|
+
if (!a || !b) return a === b;
|
|
224
|
+
return getKey(a.value) === getKey(b.value);
|
|
225
|
+
},
|
|
226
|
+
getOptionDisabled: (opt) => typeof opt === "string" ? false : !!(opt == null ? void 0 : opt.disabled),
|
|
212
227
|
onChange: handleChange,
|
|
213
228
|
onFocus: () => setIsFocused(true),
|
|
214
|
-
onBlur: () =>
|
|
215
|
-
|
|
216
|
-
|
|
229
|
+
onBlur: () => setIsFocused(false),
|
|
230
|
+
renderOption: (liProps, option) => {
|
|
231
|
+
const _a = liProps, { key: _muiKey } = _a, liRest = __objRest(_a, ["key"]);
|
|
232
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
233
|
+
AutocompleteOption,
|
|
234
|
+
{
|
|
235
|
+
liProps: liRest,
|
|
236
|
+
option,
|
|
237
|
+
customRender: renderOptionItem
|
|
238
|
+
},
|
|
239
|
+
getKey(option.value)
|
|
240
|
+
);
|
|
217
241
|
},
|
|
218
|
-
|
|
219
|
-
AutocompleteOption,
|
|
220
|
-
{
|
|
221
|
-
liProps,
|
|
222
|
-
option,
|
|
223
|
-
customRender: renderOptionItem
|
|
224
|
-
}
|
|
225
|
-
),
|
|
226
|
-
renderTags: multiple ? (value, getTagProps) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
242
|
+
renderValue: multiple ? (value, getItemProps) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
227
243
|
AutocompleteChips,
|
|
228
244
|
{
|
|
229
245
|
value,
|
|
230
|
-
getTagProps,
|
|
246
|
+
getTagProps: getItemProps,
|
|
231
247
|
size,
|
|
232
248
|
maxChipsToShow,
|
|
233
|
-
renderChipLabel
|
|
249
|
+
renderChipLabel,
|
|
250
|
+
getKey
|
|
234
251
|
}
|
|
235
252
|
) : void 0,
|
|
236
253
|
noOptionsText,
|
|
237
254
|
loadingText: loadingText != null ? loadingText : /* @__PURE__ */ jsxRuntime.jsx(AutocompleteLoader, {}),
|
|
238
255
|
renderInput: (params) => {
|
|
239
|
-
var _a;
|
|
256
|
+
var _a, _b, _c, _d;
|
|
257
|
+
const paramsInputLabel = params.InputLabelProps;
|
|
258
|
+
const consumerInputLabel = (_b = (_a = textFieldProps == null ? void 0 : textFieldProps.slotProps) == null ? void 0 : _a.inputLabel) != null ? _b : textFieldProps == null ? void 0 : textFieldProps.InputLabelProps;
|
|
259
|
+
const muiInputProps = params.InputProps;
|
|
260
|
+
const consumerInputProps = (_d = (_c = textFieldProps == null ? void 0 : textFieldProps.slotProps) == null ? void 0 : _c.input) != null ? _d : textFieldProps == null ? void 0 : textFieldProps.InputProps;
|
|
261
|
+
const inputSlot = singleAdornment ? __spreadProps(__spreadValues(__spreadValues({}, muiInputProps), consumerInputProps), {
|
|
262
|
+
startAdornment: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
263
|
+
singleAdornment,
|
|
264
|
+
consumerInputProps == null ? void 0 : consumerInputProps.startAdornment,
|
|
265
|
+
muiInputProps == null ? void 0 : muiInputProps.startAdornment
|
|
266
|
+
] })
|
|
267
|
+
}) : void 0;
|
|
240
268
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
241
269
|
material.TextField,
|
|
242
270
|
__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, params), {
|
|
@@ -244,12 +272,13 @@ function Autocomplete(props) {
|
|
|
244
272
|
size,
|
|
245
273
|
variant: "outlined",
|
|
246
274
|
placeholder: showPlaceholder ? placeholder : void 0,
|
|
247
|
-
error:
|
|
248
|
-
helperText
|
|
249
|
-
inputRef
|
|
275
|
+
error: !!errorProp,
|
|
276
|
+
helperText
|
|
250
277
|
}), textFieldProps), {
|
|
251
|
-
|
|
252
|
-
|
|
278
|
+
slotProps: __spreadProps(__spreadValues(__spreadValues({}, textFieldProps == null ? void 0 : textFieldProps.slotProps), inputSlot ? { input: inputSlot } : {}), {
|
|
279
|
+
inputLabel: __spreadProps(__spreadValues(__spreadValues({}, paramsInputLabel), consumerInputLabel), {
|
|
280
|
+
shrink: labelPosition === "outside" ? !isEmpty || isFocused : paramsInputLabel == null ? void 0 : paramsInputLabel.shrink
|
|
281
|
+
})
|
|
253
282
|
})
|
|
254
283
|
})
|
|
255
284
|
);
|
|
@@ -257,53 +286,23 @@ function Autocomplete(props) {
|
|
|
257
286
|
}
|
|
258
287
|
);
|
|
259
288
|
};
|
|
260
|
-
const
|
|
289
|
+
const extractValue = (opt) => {
|
|
261
290
|
var _a;
|
|
262
|
-
|
|
291
|
+
if (opt === null || opt === void 0) return null;
|
|
292
|
+
if (typeof opt === "string") return opt;
|
|
293
|
+
return (_a = opt == null ? void 0 : opt.value) != null ? _a : null;
|
|
294
|
+
};
|
|
295
|
+
const handleControlledChange = (_event, newValue) => {
|
|
296
|
+
const { onChange } = props;
|
|
263
297
|
if (multiple) {
|
|
264
|
-
const values = (newValue != null ? newValue : []).map((opt) => opt.
|
|
298
|
+
const values = (newValue != null ? newValue : []).map((opt) => extractValue(opt)).filter((v) => v !== null);
|
|
265
299
|
onChange(values);
|
|
266
300
|
} else {
|
|
267
|
-
onChange((
|
|
301
|
+
onChange(extractValue(newValue));
|
|
268
302
|
}
|
|
269
303
|
};
|
|
270
|
-
if ("control" in props && props.control) {
|
|
271
|
-
const { name, control, validation } = props;
|
|
272
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
273
|
-
reactHookForm.Controller,
|
|
274
|
-
{
|
|
275
|
-
name,
|
|
276
|
-
control,
|
|
277
|
-
rules: validation,
|
|
278
|
-
render: ({ field, fieldState: { error: fieldError } }) => {
|
|
279
|
-
const resolvedValue2 = stabilizeResolved(
|
|
280
|
-
multiple ? resolveMultipleValue(resolvePool, field.value) : resolveSingleValue(resolvePool, field.value)
|
|
281
|
-
);
|
|
282
|
-
const handleChange = (_event, newValue) => {
|
|
283
|
-
var _a;
|
|
284
|
-
if (multiple) {
|
|
285
|
-
field.onChange(
|
|
286
|
-
(newValue != null ? newValue : []).map((opt) => opt.value)
|
|
287
|
-
);
|
|
288
|
-
} else {
|
|
289
|
-
field.onChange((_a = newValue == null ? void 0 : newValue.value) != null ? _a : null);
|
|
290
|
-
}
|
|
291
|
-
};
|
|
292
|
-
return renderAutocomplete(
|
|
293
|
-
resolvedValue2,
|
|
294
|
-
handleChange,
|
|
295
|
-
field.onBlur,
|
|
296
|
-
field.ref,
|
|
297
|
-
!!fieldError,
|
|
298
|
-
fieldError == null ? void 0 : fieldError.message
|
|
299
|
-
);
|
|
300
|
-
}
|
|
301
|
-
}
|
|
302
|
-
);
|
|
303
|
-
}
|
|
304
|
-
const controlledValue = props.value;
|
|
305
304
|
const resolvedValue = stabilizeResolved(
|
|
306
|
-
multiple ? resolveMultipleValue(resolvePool,
|
|
305
|
+
multiple ? resolveMultipleValue(resolvePool, props.value, getKey) : resolveSingleValue(resolvePool, props.value, getKey)
|
|
307
306
|
);
|
|
308
307
|
return renderAutocomplete(resolvedValue, handleControlledChange);
|
|
309
308
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.cjs","sources":["../../../src/components/Autocomplete/Autocomplete.sx.ts","../../../src/components/Autocomplete/Autocomplete.helpers.ts","../../../src/components/Autocomplete/_parts/AutocompleteOption.tsx","../../../src/components/Autocomplete/_parts/AutocompleteChips.tsx","../../../src/components/Autocomplete/_parts/AutocompleteLoader.tsx","../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nimport { buildFormFieldSx } from '../_shared/formField.sx';\nimport type { LabelPosition } from './Autocomplete';\n\n/**\n * Builder del sx del Autocomplete. Reutiliza `buildFormFieldSx` y añade\n * los paddings propios del Autocomplete (chips + input interno).\n */\nexport const buildAutocompleteSx = (\n borderRadius: number | string,\n labelPosition: LabelPosition,\n): SxProps<Theme> =>\n buildFormFieldSx({\n borderRadius,\n labelPosition,\n extraOutsideSx: {\n // El input interno del Autocomplete.\n '& .MuiAutocomplete-input': {\n paddingTop: '4px',\n paddingBottom: '4px',\n },\n\n // Contenedor del input (donde viven los chips en modo multiple).\n '& .MuiAutocomplete-inputRoot': {\n paddingTop: '4px',\n paddingBottom: '4px',\n },\n },\n });\n","import type { SxProps, Theme } from '@mui/material/styles';\nimport type { SelectOption } from './Autocomplete';\n\n/** Resuelve un value único a su SelectOption dentro del pool. */\nexport const resolveSingleValue = (\n options: SelectOption[],\n value: SelectOption['value'] | null | undefined,\n): SelectOption | null => options.find((o) => o.value === value) ?? null;\n\n/** Resuelve un array de values a sus SelectOption dentro del pool. */\nexport const resolveMultipleValue = (\n options: SelectOption[],\n value: SelectOption['value'][] | null | undefined,\n): SelectOption[] => {\n if (!Array.isArray(value)) return [];\n return options.filter((o) => value.includes(o.value));\n};\n\n/** Merge de sx base + extra del consumer, respetando el contrato de MUI. */\nexport const mergeSx = (\n base: SxProps<Theme>,\n extra?: SxProps<Theme>,\n): SxProps<Theme> => {\n if (!extra) return base;\n return [base, ...(Array.isArray(extra) ? extra : [extra])] as SxProps<Theme>;\n};\n\n/**\n * Compara dos valores resueltos (single o multiple) por value para decidir\n * si son estructuralmente iguales. Se usa para estabilizar la referencia que\n * se pasa a MUI Autocomplete (MUI compara value por referencia con `!==`,\n * y una nueva referencia — aunque el contenido sea igual — dispara\n * `resetInputValue` y borra el texto mientras el usuario tipea).\n */\nexport const areResolvedValuesEqual = (\n prev: SelectOption | SelectOption[] | null,\n next: SelectOption | SelectOption[] | null,\n multiple: boolean,\n): boolean => {\n if (multiple) {\n if (!Array.isArray(prev) || !Array.isArray(next)) return false;\n if (prev.length !== next.length) return false;\n return prev.every((o, i) => o.value === next[i]?.value);\n }\n return (\n (prev as SelectOption | null)?.value ===\n (next as SelectOption | null)?.value\n );\n};\n\n/** Determina si un valor resuelto está vacío (para placeholder/shrink). */\nexport const isResolvedValueEmpty = (\n resolvedValue: unknown,\n multiple: boolean,\n): boolean => {\n if (multiple) {\n return !Array.isArray(resolvedValue) || resolvedValue.length === 0;\n }\n return !resolvedValue;\n};\n","import React from 'react';\nimport type { SelectOption, RenderOptionItem } from '../Autocomplete';\n\ninterface AutocompleteOptionProps {\n liProps: React.HTMLAttributes<HTMLLIElement> & { key?: React.Key };\n option: SelectOption;\n customRender?: RenderOptionItem;\n}\n\n/**\n * Render por defecto de un <li> del dropdown del Autocomplete.\n * Se expone como componente para testear y extender fácilmente, pero MUI\n * lo llama desde `renderOption={(props, option) => ...}` en el padre.\n *\n * El `key` lo manejamos nosotros (no spreadeamos junto al resto) porque MUI\n * lo inyecta como parte de `propsLi` y React exige que sea prop directo.\n */\nexport const AutocompleteOption: React.FC<AutocompleteOptionProps> = ({\n liProps,\n option,\n customRender,\n}) => {\n const { key: _ignored, ...liRest } = liProps;\n return (\n <li key={option.value} {...liRest}>\n {customRender ? customRender(option) : option.label}\n </li>\n );\n};\n\nexport default AutocompleteOption;\n","import React from 'react';\nimport { Avatar, Chip } from '@mui/material';\nimport ClearIcon from '@mui/icons-material/Clear';\n\nimport type {\n SelectOption,\n RenderChipLabel,\n AutocompleteSize,\n} from '../Autocomplete';\n\ninterface AutocompleteChipsProps {\n value: SelectOption[];\n getTagProps: (args: { index: number }) => Record<string, any>;\n size: AutocompleteSize;\n maxChipsToShow: number;\n renderChipLabel?: RenderChipLabel;\n}\n\n/**\n * Render de los chips del Autocomplete en modo multiple.\n * Trunca después de `maxChipsToShow` con un chip \"+N más\".\n * El `getTagProps({ index })` viene de MUI y contiene el handler de delete,\n * la key, etc. — se spreadea tal cual al Chip.\n */\nexport const AutocompleteChips: React.FC<AutocompleteChipsProps> = ({\n value,\n getTagProps,\n size,\n maxChipsToShow,\n renderChipLabel,\n}) => {\n const displayed = value.slice(0, maxChipsToShow);\n const hidden = value.length - maxChipsToShow;\n\n return (\n <>\n {displayed.map((option, index) => {\n const tagProps = getTagProps({ index });\n return (\n <Chip\n {...tagProps}\n key={option.value}\n size={size}\n label={renderChipLabel ? renderChipLabel(option) : option.label}\n avatar={option.img ? <Avatar src={option.img} /> : undefined}\n deleteIcon={<ClearIcon />}\n />\n );\n })}\n {hidden > 0 && <Chip size={size} label={`+${hidden} más`} />}\n </>\n );\n};\n\nexport default AutocompleteChips;\n","import React from 'react';\nimport { Box, CircularProgress, Typography } from '@mui/material';\n\n/**\n * Loader por defecto para el `loadingText` del Autocomplete.\n * El consumer puede sobrescribirlo pasando `loadingText` al componente padre.\n */\nexport const AutocompleteLoader: React.FC<{ text?: string }> = ({\n text = 'Cargando...',\n}) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n <CircularProgress size={16} />\n <Typography variant=\"body2\">{text}</Typography>\n </Box>\n);\n\nexport default AutocompleteLoader;\n","import React, {\n useMemo,\n useRef,\n useState,\n type ReactNode,\n type SyntheticEvent,\n} from 'react';\nimport {\n Autocomplete as MuiAutocomplete,\n TextField,\n type TextFieldProps,\n} from '@mui/material';\nimport { useTheme, type SxProps, type Theme } from '@mui/material/styles';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildAutocompleteSx } from './Autocomplete.sx';\nimport {\n areResolvedValuesEqual,\n isResolvedValueEmpty,\n resolveMultipleValue,\n resolveSingleValue,\n} from './Autocomplete.helpers';\nimport { resolvePreset } from '../_shared/resolvePreset';\nimport { AutocompleteOption } from './_parts/AutocompleteOption';\nimport { AutocompleteChips } from './_parts/AutocompleteChips';\nimport { AutocompleteLoader } from './_parts/AutocompleteLoader';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport interface SelectOption {\n value: string | number;\n label: string;\n img?: string;\n disabled?: boolean;\n group?: string;\n [key: string]: any;\n}\n\nexport type LabelPosition = 'outside' | 'floating';\nexport type AutocompleteSize = 'small' | 'medium';\n\n// ── Render slots ─────────────────────────────────────────────────────────\nexport type RenderOptionItem = (item: SelectOption) => ReactNode;\nexport type RenderChipLabel = (item: SelectOption) => ReactNode;\n\n// ── Props base ───────────────────────────────────────────────────────────\nexport type BaseAutocompleteProps<\n _TValue extends SelectOption['value'] = SelectOption['value'],\n> = {\n label?: string;\n options: SelectOption[];\n placeholder?: string;\n multiple?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n loading?: boolean;\n error?: boolean;\n helperText?: string;\n maxChipsToShow?: number;\n renderOptionItem?: RenderOptionItem;\n renderChipLabel?: RenderChipLabel;\n /** Border radius del input. Default: 10. */\n borderRadius?: number | string;\n /** \"outside\" (default) = label arriba del input; \"floating\" = comportamiento nativo MUI. */\n labelPosition?: LabelPosition;\n /** Tamaño del TextField. Default: 'small'. */\n size?: AutocompleteSize;\n /** Texto cuando no hay coincidencias. */\n noOptionsText?: ReactNode;\n /** Texto cuando está cargando. */\n loadingText?: ReactNode;\n sx?: SxProps<Theme>;\n className?: string;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.Autocomplete`.\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 /** Props para el TextField subyacente. */\n textFieldProps?: Partial<TextFieldProps>;\n\n // ── Búsqueda asíncrona / remota ──────────────────────────────────────\n /** Se dispara cada vez que el usuario escribe. Útil para llamadas a servicios\n * (debounce recomendado en el consumer). */\n onInputChange?: (\n event: SyntheticEvent,\n value: string,\n reason: 'input' | 'reset' | 'clear' | 'blur' | 'selectOption' | 'removeOption',\n ) => void;\n /** Valor controlado del texto de búsqueda. */\n inputValue?: string;\n /** Filtro custom. Para búsqueda remota pasar `(x) => x` y confiar sólo en el servicio. */\n filterOptions?: (options: SelectOption[], state: any) => SelectOption[];\n /** Permite valores arbitrarios (no solo de la lista). */\n freeSolo?: boolean;\n open?: boolean;\n onOpen?: (event: SyntheticEvent) => void;\n onClose?: (event: SyntheticEvent, reason: string) => void;\n};\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface ControlledAutocompleteProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> extends BaseAutocompleteProps<TValue> {\n value: TValue | TValue[] | null;\n onChange: (val: TValue | TValue[] | null) => void;\n name?: string;\n control?: never;\n validation?: never;\n}\n\nexport interface RHFAutocompleteProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> extends BaseAutocompleteProps<TValue> {\n name: string;\n control: Control<any>;\n validation?: RegisterOptions;\n value?: never;\n onChange?: never;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type AutocompleteProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> = ControlledAutocompleteProps<TValue> | RHFAutocompleteProps<TValue>;\n\nexport function Autocomplete<\n TValue extends SelectOption['value'] = SelectOption['value'],\n>(props: AutocompleteProps<TValue>) {\n const {\n label,\n options,\n placeholder,\n multiple = false,\n disabled = false,\n readOnly = false,\n loading = false,\n error: errorProp = false,\n helperText,\n maxChipsToShow = 3,\n renderOptionItem,\n renderChipLabel,\n borderRadius = 10,\n labelPosition = 'outside',\n size = 'small',\n noOptionsText = 'No hay opciones',\n loadingText,\n sx,\n className,\n preset,\n textFieldProps,\n onInputChange,\n inputValue,\n filterOptions,\n freeSolo,\n open,\n onOpen,\n onClose,\n } = props as BaseAutocompleteProps<TValue>;\n\n // Focus tracking para mostrar placeholder solo cuando el label sube.\n const [isFocused, setIsFocused] = useState(false);\n\n // Cache interno de opciones vistas (indexado por value). Crítico para async\n // multiple: cuando `options` cambian por un nuevo search, los items ya\n // seleccionados no desaparecen de los chips porque los recordamos acá.\n const seenOptionsRef = useRef<Map<SelectOption['value'], SelectOption>>(\n new Map(),\n );\n for (const opt of options) {\n seenOptionsRef.current.set(opt.value, opt);\n }\n\n // Pool de opciones para resolver values (merge de options + vistas).\n const resolvePool = useMemo<SelectOption[]>(() => {\n const merged = new Map(seenOptionsRef.current);\n for (const opt of options) merged.set(opt.value, opt);\n return Array.from(merged.values());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [options]);\n\n // Estabiliza la referencia del resolvedValue que pasamos a MUI Autocomplete.\n // MUI compara value con `!==`: una referencia nueva con mismo contenido\n // dispara resetInputValue() y borra el texto que el usuario está escribiendo.\n const prevResolvedRef = useRef<SelectOption[] | SelectOption | null>(\n multiple ? [] : null,\n );\n\n const stabilizeResolved = (\n newVal: SelectOption[] | SelectOption | null,\n ): any => {\n if (areResolvedValuesEqual(prevResolvedRef.current, newVal, multiple)) {\n return prevResolvedRef.current;\n }\n prevResolvedRef.current = newVal;\n return newVal;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('Autocomplete', preset, theme);\n\n const mergedSx = [\n buildAutocompleteSx(borderRadius, labelPosition),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n ];\n\n const renderAutocomplete = (\n resolvedValue: any,\n handleChange: (event: any, newValue: any) => void,\n onBlur?: () => void,\n inputRef?: React.Ref<any>,\n rhfError?: boolean,\n rhfHelperText?: string,\n ) => {\n const finalError = !!rhfError || !!errorProp;\n const finalHelperText = rhfHelperText || helperText;\n\n const isEmpty = isResolvedValueEmpty(resolvedValue, multiple);\n const showPlaceholder = isEmpty && isFocused && !!placeholder;\n\n return (\n <MuiAutocomplete\n multiple={multiple}\n options={options}\n value={resolvedValue}\n disabled={disabled}\n readOnly={readOnly}\n loading={loading}\n className={className}\n sx={mergedSx}\n freeSolo={freeSolo as any}\n open={open}\n onOpen={onOpen}\n onClose={onClose}\n inputValue={inputValue}\n onInputChange={onInputChange}\n filterOptions={filterOptions as any}\n getOptionLabel={(opt) =>\n typeof opt === 'string' ? opt : (opt?.label ?? '')\n }\n isOptionEqualToValue={(a, b) => a?.value === b?.value}\n getOptionDisabled={(opt) => !!opt?.disabled}\n onChange={handleChange}\n onFocus={() => setIsFocused(true)}\n onBlur={() => {\n setIsFocused(false);\n onBlur?.();\n }}\n renderOption={(liProps, option) => (\n <AutocompleteOption\n liProps={liProps as any}\n option={option}\n customRender={renderOptionItem}\n />\n )}\n renderTags={\n multiple\n ? (value, getTagProps) => (\n <AutocompleteChips\n value={value}\n getTagProps={getTagProps}\n size={size}\n maxChipsToShow={maxChipsToShow}\n renderChipLabel={renderChipLabel}\n />\n )\n : undefined\n }\n noOptionsText={noOptionsText}\n loadingText={loadingText ?? <AutocompleteLoader />}\n renderInput={(params) => (\n <TextField\n {...params}\n label={label}\n size={size}\n variant=\"outlined\"\n placeholder={showPlaceholder ? placeholder : undefined}\n error={finalError}\n helperText={finalHelperText}\n inputRef={inputRef}\n {...textFieldProps}\n InputLabelProps={{\n ...(params.InputLabelProps as Record<string, any>),\n ...(textFieldProps?.InputLabelProps as Record<string, any> | undefined),\n shrink:\n labelPosition === 'outside'\n ? !isEmpty || isFocused\n : (params.InputLabelProps as any)?.shrink,\n }}\n />\n )}\n />\n );\n };\n\n const handleControlledChange = (_event: any, newValue: any) => {\n const onChange = (props as ControlledAutocompleteProps<TValue>).onChange;\n if (multiple) {\n const values = (newValue ?? []).map((opt: SelectOption) => opt.value as TValue);\n onChange(values);\n } else {\n onChange((newValue?.value ?? null) as TValue | null);\n }\n };\n\n // --- RHF mode ---\n if ('control' in props && props.control) {\n const { name, control, validation } = props as RHFAutocompleteProps<TValue>;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n render={({ field, fieldState: { error: fieldError } }) => {\n const resolvedValue = stabilizeResolved(\n multiple\n ? resolveMultipleValue(resolvePool, field.value)\n : resolveSingleValue(resolvePool, field.value),\n );\n\n const handleChange = (_event: any, newValue: any) => {\n if (multiple) {\n field.onChange(\n (newValue ?? []).map((opt: SelectOption) => opt.value),\n );\n } else {\n field.onChange(newValue?.value ?? null);\n }\n };\n\n return renderAutocomplete(\n resolvedValue,\n handleChange,\n field.onBlur,\n field.ref,\n !!fieldError,\n fieldError?.message,\n );\n }}\n />\n );\n }\n\n // --- Controlled mode ---\n const controlledValue = (props as ControlledAutocompleteProps<TValue>).value;\n const resolvedValue = stabilizeResolved(\n multiple\n ? resolveMultipleValue(resolvePool, controlledValue as SelectOption['value'][])\n : resolveSingleValue(resolvePool, controlledValue as SelectOption['value']),\n );\n\n return renderAutocomplete(resolvedValue, handleControlledChange);\n}\n\n/**\n * @deprecated Usar `Autocomplete` en su lugar. Alias mantenido para retro-compatibilidad.\n */\nexport const AutocompleteSelect = Autocomplete;\n\nexport default Autocomplete;\n"],"names":["buildFormFieldSx","jsx","jsxs","Fragment","createElement","Chip","Avatar","Box","CircularProgress","Typography","useState","useRef","useMemo","useTheme","resolvePreset","resolvedValue","MuiAutocomplete","TextField","Controller"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Autocomplete.cjs","sources":["../../../src/components/Autocomplete/Autocomplete.sx.ts","../../../src/components/Autocomplete/Autocomplete.helpers.ts","../../../src/components/Autocomplete/_parts/AutocompleteOption.tsx","../../../src/components/Autocomplete/_parts/AutocompleteChips.tsx","../../../src/components/Autocomplete/_parts/AutocompleteLoader.tsx","../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nimport { buildFormFieldSx } from '../_shared/formField.sx';\nimport type { LabelPosition } from './Autocomplete';\n\n/**\n * Builder del sx del Autocomplete. Reutiliza `buildFormFieldSx` y añade\n * los paddings propios del Autocomplete (chips + input interno).\n */\nexport const buildAutocompleteSx = (\n borderRadius: number | string,\n labelPosition: LabelPosition,\n): SxProps<Theme> =>\n buildFormFieldSx({\n borderRadius,\n labelPosition,\n extraOutsideSx: {\n // El input interno del Autocomplete.\n '& .MuiAutocomplete-input': {\n paddingTop: '4px',\n paddingBottom: '4px',\n },\n\n // Contenedor del input (donde viven los chips en modo multiple).\n '& .MuiAutocomplete-inputRoot': {\n paddingTop: '4px',\n paddingBottom: '4px',\n },\n },\n });\n","import type { SxProps, Theme } from '@mui/material/styles';\nimport type { AutocompleteValueKey, SelectOption } from './Autocomplete';\n\n/** Resuelve un value único a su SelectOption dentro del pool. */\nexport const resolveSingleValue = <TValue,>(\n options: SelectOption<TValue>[],\n value: TValue | null | undefined,\n getKey: (v: TValue) => AutocompleteValueKey,\n): SelectOption<TValue> | null => {\n if (value === null || value === undefined) return null;\n const key = getKey(value);\n return options.find((o) => getKey(o.value) === key) ?? null;\n};\n\n/** Resuelve un array de values a sus SelectOption dentro del pool. */\nexport const resolveMultipleValue = <TValue,>(\n options: SelectOption<TValue>[],\n value: TValue[] | null | undefined,\n getKey: (v: TValue) => AutocompleteValueKey,\n): SelectOption<TValue>[] => {\n if (!Array.isArray(value)) return [];\n const keys = new Set(value.map(getKey));\n return options.filter((o) => keys.has(getKey(o.value)));\n};\n\n/** Merge de sx base + extra del consumer, respetando el contrato de MUI. */\nexport const mergeSx = (\n base: SxProps<Theme>,\n extra?: SxProps<Theme>,\n): SxProps<Theme> => {\n if (!extra) return base;\n return [base, ...(Array.isArray(extra) ? extra : [extra])] as SxProps<Theme>;\n};\n\n/**\n * Compara dos SelectOption por todas sus props (shallow). Se usa para detectar\n * cambios de metadata (p.ej. `label`, `img`) cuando `value` no cambió, para\n * que la estabilización no tape datos frescos del server. Para `value` se\n * compara vía `getKey` (no por `===`), de modo que values objeto con misma\n * identidad lógica pero referencia distinta no rompan la estabilización.\n */\nconst areOptionsShallowEqual = <TValue,>(\n a: SelectOption<TValue>,\n b: SelectOption<TValue>,\n getKey: (v: TValue) => AutocompleteValueKey,\n): boolean => {\n const keysA = Object.keys(a);\n const keysB = Object.keys(b);\n if (keysA.length !== keysB.length) return false;\n return keysA.every((k) => {\n if (k === 'value') return getKey(a.value) === getKey(b.value);\n return a[k] === b[k];\n });\n};\n\n/**\n * Compara dos valores resueltos (single o multiple) estructuralmente para\n * decidir si se puede reusar la referencia previa. Se usa para estabilizar la\n * referencia que se pasa a MUI Autocomplete (MUI compara value por referencia\n * con `!==`, y una nueva referencia — aunque el contenido sea igual — dispara\n * `resetInputValue` y borra el texto mientras el usuario tipea).\n *\n * Comparamos todas las props del SelectOption, no solo `value`, para que un\n * refresh de metadata (label/img/etc.) invalide la referencia estabilizada\n * y la UI muestre los datos actualizados.\n */\nexport const areResolvedValuesEqual = <TValue,>(\n prev: SelectOption<TValue> | SelectOption<TValue>[] | null,\n next: SelectOption<TValue> | SelectOption<TValue>[] | null,\n multiple: boolean,\n getKey: (v: TValue) => AutocompleteValueKey,\n): boolean => {\n if (multiple) {\n if (!Array.isArray(prev) || !Array.isArray(next)) return false;\n if (prev.length !== next.length) return false;\n return prev.every((o, i) => {\n const n = next[i];\n return !!n && areOptionsShallowEqual(o, n, getKey);\n });\n }\n const p = prev as SelectOption<TValue> | null;\n const n = next as SelectOption<TValue> | null;\n if (p === n) return true;\n if (!p || !n) return false;\n return areOptionsShallowEqual(p, n, getKey);\n};\n\n/** Determina si un valor resuelto está vacío (para placeholder/shrink). */\nexport const isResolvedValueEmpty = (\n resolvedValue: unknown,\n multiple: boolean,\n): boolean => {\n if (multiple) {\n return !Array.isArray(resolvedValue) || resolvedValue.length === 0;\n }\n return !resolvedValue;\n};\n","import React from 'react';\nimport type {\n AutocompleteValueKey,\n RenderOptionItem,\n SelectOption,\n} from '../Autocomplete';\n\ninterface AutocompleteOptionProps<TValue = AutocompleteValueKey> {\n liProps: React.HTMLAttributes<HTMLLIElement>;\n option: SelectOption<TValue>;\n customRender?: RenderOptionItem<TValue>;\n}\n\n/**\n * Render por defecto de un `<li>` del dropdown del Autocomplete.\n * MUI lo invoca desde `renderOption={(props, option) => ...}` en el padre.\n *\n * La `key` la maneja el padre (`renderOption` en Autocomplete.tsx). Este\n * componente solo recibe los props restantes del `<li>` para spread.\n */\nexport const AutocompleteOption = <TValue,>({\n liProps,\n option,\n customRender,\n}: AutocompleteOptionProps<TValue>) => {\n return (\n <li {...liProps}>\n {customRender ? customRender(option) : option.label}\n </li>\n );\n};\n\nexport default AutocompleteOption;\n","import { Avatar, Chip } from '@mui/material';\nimport ClearIcon from '@mui/icons-material/Clear';\n\nimport type {\n AutocompleteSize,\n AutocompleteValueKey,\n RenderChipLabel,\n SelectOption,\n} from '../Autocomplete';\n\ninterface AutocompleteChipsProps<TValue = AutocompleteValueKey> {\n value: SelectOption<TValue>[];\n getTagProps: (args: { index: number }) => Record<string, any>;\n size: AutocompleteSize;\n maxChipsToShow: number;\n renderChipLabel?: RenderChipLabel<TValue>;\n /** Extrae la React key estable a partir del value (necesario para values objeto). */\n getKey: (value: TValue) => AutocompleteValueKey;\n}\n\n/**\n * Render de los chips del Autocomplete en modo multiple.\n * Trunca después de `maxChipsToShow` con un chip \"+N más\".\n * El `getTagProps({ index })` viene de MUI y contiene el handler de delete,\n * la key, etc. — se spreadea tal cual al Chip.\n */\nexport const AutocompleteChips = <TValue,>({\n value,\n getTagProps,\n size,\n maxChipsToShow,\n renderChipLabel,\n getKey,\n}: AutocompleteChipsProps<TValue>) => {\n const displayed = value.slice(0, maxChipsToShow);\n const hidden = value.length - maxChipsToShow;\n\n return (\n <>\n {displayed.map((option, index) => {\n const { key: _ignored, ...tagProps } = getTagProps({ index });\n return (\n <Chip\n key={getKey(option.value)}\n {...tagProps}\n size={size}\n label={renderChipLabel ? renderChipLabel(option) : option.label}\n avatar={option.img ? <Avatar src={option.img} /> : undefined}\n deleteIcon={<ClearIcon />}\n />\n );\n })}\n {hidden > 0 && <Chip size={size} label={`+${hidden} más`} />}\n </>\n );\n};\n\nexport default AutocompleteChips;\n","import React from 'react';\nimport { Box, CircularProgress, Typography } from '@mui/material';\n\n/**\n * Loader por defecto para el `loadingText` del Autocomplete.\n * El consumer puede sobrescribirlo pasando `loadingText` al componente padre.\n */\nexport const AutocompleteLoader: React.FC<{ text?: string }> = ({\n text = 'Cargando...',\n}) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n <CircularProgress size={16} />\n <Typography variant=\"body2\">{text}</Typography>\n </Box>\n);\n\nexport default AutocompleteLoader;\n","import React, {\n useMemo,\n useRef,\n useState,\n type ReactNode,\n type SyntheticEvent,\n} from 'react';\nimport {\n Autocomplete as MuiAutocomplete,\n TextField,\n type TextFieldProps,\n} from '@mui/material';\nimport { useTheme, type SxProps, type Theme } from '@mui/material/styles';\n\nimport { buildAutocompleteSx } from './Autocomplete.sx';\nimport {\n areResolvedValuesEqual,\n isResolvedValueEmpty,\n resolveMultipleValue,\n resolveSingleValue,\n} from './Autocomplete.helpers';\nimport { resolvePreset } from '../_shared/resolvePreset';\nimport { AutocompleteOption } from './_parts/AutocompleteOption';\nimport { AutocompleteChips } from './_parts/AutocompleteChips';\nimport { AutocompleteLoader } from './_parts/AutocompleteLoader';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\n/** Key estable usada para comparar values, indexar caches y como React key. */\nexport type AutocompleteValueKey = string | number;\n\nexport interface SelectOption<TValue = AutocompleteValueKey> {\n value: TValue;\n label: string;\n img?: string;\n disabled?: boolean;\n group?: string;\n [key: string]: any; //campos extras que puede tener la opcion\n}\n\nexport type LabelPosition = 'outside' | 'floating';\nexport type AutocompleteSize = 'small' | 'medium';\n\n// ── Render slots ─────────────────────────────────────────────────────────\nexport type RenderOptionItem<TValue = AutocompleteValueKey> = (\n item: SelectOption<TValue>,\n) => ReactNode;\nexport type RenderChipLabel<TValue = AutocompleteValueKey> = (\n item: SelectOption<TValue>,\n) => ReactNode;\nexport type RenderSingleValue<TValue = AutocompleteValueKey> = (\n item: SelectOption<TValue>,\n) => ReactNode;\n\n// ── Props base ───────────────────────────────────────────────────────────\nexport type BaseAutocompleteProps<TValue = AutocompleteValueKey> = {\n label?: string;\n options: SelectOption<TValue>[];\n placeholder?: string;\n multiple?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n loading?: boolean;\n error?: boolean;\n helperText?: string;\n maxChipsToShow?: number;\n renderOptionItem?: RenderOptionItem<TValue>;\n renderChipLabel?: RenderChipLabel<TValue>;\n /**\n * Renderiza JSX custom como `startAdornment` del input en single mode.\n * Recibe la `SelectOption` seleccionada. Útil para mostrar avatars, iconos,\n * etc. junto al texto del label. En `multiple` no aplica (se usa `renderChipLabel`).\n */\n renderSingleValue?: RenderSingleValue<TValue>;\n /**\n * Extrae una key estable (string | number) desde el `value`. Obligatorio\n * cuando `TValue` es un objeto: se usa para comparar values (`isOptionEqualToValue`,\n * resolución desde el value del form), indexar el cache interno de opciones\n * vistas y como React key en chips/options del dropdown. Para primitivos se\n * puede omitir (default: identidad, o sea `===`).\n */\n getOptionKey?: (value: TValue) => AutocompleteValueKey;\n /** Border radius del input. Default: 10. */\n borderRadius?: number | string;\n /** \"outside\" (default) = label arriba del input; \"floating\" = comportamiento nativo MUI. */\n labelPosition?: LabelPosition;\n /** Tamaño del TextField. Default: 'small'. */\n size?: AutocompleteSize;\n /** Texto cuando no hay coincidencias. */\n noOptionsText?: ReactNode;\n /** Texto cuando está cargando. */\n loadingText?: ReactNode;\n sx?: SxProps<Theme>;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.Autocomplete`.\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 /** Props para el TextField subyacente. */\n textFieldProps?: Partial<TextFieldProps>;\n\n // ── Búsqueda asíncrona / remota ──────────────────────────────────────\n /** Se dispara cada vez que el usuario escribe. Útil para llamadas a servicios\n * (debounce recomendado en el consumer). */\n onInputChange?: (\n event: SyntheticEvent,\n value: string,\n reason: 'input' | 'reset' | 'clear' | 'blur' | 'selectOption' | 'removeOption',\n ) => void;\n /** Valor controlado del texto de búsqueda. */\n inputValue?: string;\n /** Filtro custom. Para búsqueda remota pasar `(x) => x` y confiar sólo en el servicio. */\n filterOptions?: (\n options: SelectOption<TValue>[],\n state: any,\n ) => SelectOption<TValue>[];\n /** Permite valores arbitrarios (no solo de la lista). */\n freeSolo?: boolean;\n open?: boolean;\n onOpen?: (event: SyntheticEvent) => void;\n onClose?: (event: SyntheticEvent, reason: string) => void;\n};\n\n// ── API pública final ────────────────────────────────────────────────────\nexport interface AutocompleteProps<TValue = AutocompleteValueKey>\n extends BaseAutocompleteProps<TValue> {\n value: TValue | TValue[] | null;\n onChange: (val: TValue | TValue[] | null) => void;\n name?: string;\n}\n\nexport function Autocomplete<TValue = AutocompleteValueKey>(\n props: AutocompleteProps<TValue>,\n) {\n const {\n label,\n options,\n placeholder,\n multiple = false,\n disabled = false,\n readOnly = false,\n loading = false,\n error: errorProp = false,\n helperText,\n maxChipsToShow = 3,\n renderOptionItem,\n renderChipLabel,\n renderSingleValue,\n borderRadius = 10,\n labelPosition = 'outside',\n size = 'small',\n noOptionsText = 'No hay opciones',\n loadingText,\n sx,\n preset,\n textFieldProps,\n onInputChange,\n inputValue,\n filterOptions,\n freeSolo,\n open,\n onOpen,\n onClose,\n getOptionKey,\n } = props as BaseAutocompleteProps<TValue>;\n\n // Default identidad: para primitivos (string|number) funciona como `===`.\n // Para values objeto, el consumer DEBE pasar `getOptionKey` o la igualdad\n // caerá a referencia (Map/Set agruparían por identidad).\n const getKey = (getOptionKey ??\n ((v: TValue) => v as unknown as AutocompleteValueKey)) as (\n v: TValue,\n ) => AutocompleteValueKey;\n\n // Focus tracking para mostrar placeholder solo cuando el label sube.\n const [isFocused, setIsFocused] = useState(false);\n\n // Cache interno de opciones vistas (indexado por key estable). Crítico para\n // async multiple: cuando `options` cambian por un nuevo search, los items\n // ya seleccionados no desaparecen de los chips porque los recordamos acá.\n const seenOptionsRef = useRef<\n Map<AutocompleteValueKey, SelectOption<TValue>>\n >(new Map());\n for (const opt of options) {\n seenOptionsRef.current.set(getKey(opt.value), opt);\n }\n\n // Pool de opciones para resolver values (merge de options + vistas).\n const resolvePool = useMemo<SelectOption<TValue>[]>(() => {\n const merged = new Map(seenOptionsRef.current);\n for (const opt of options) merged.set(getKey(opt.value), opt);\n return Array.from(merged.values());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [options]);\n\n // Estabiliza la referencia del resolvedValue que pasamos a MUI Autocomplete.\n // MUI compara value con `!==`: una referencia nueva con mismo contenido\n // dispara resetInputValue() y borra el texto que el usuario está escribiendo.\n const prevResolvedRef = useRef<\n SelectOption<TValue>[] | SelectOption<TValue> | null\n >(multiple ? [] : null);\n\n const stabilizeResolved = (\n newVal: SelectOption<TValue>[] | SelectOption<TValue> | null,\n ): SelectOption<TValue>[] | SelectOption<TValue> | null => {\n if (\n areResolvedValuesEqual(prevResolvedRef.current, newVal, multiple, getKey)\n ) {\n return prevResolvedRef.current;\n }\n prevResolvedRef.current = newVal;\n return newVal;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('Autocomplete', preset, theme);\n\n const mergedSx = [\n buildAutocompleteSx(borderRadius, labelPosition),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n ];\n\n const renderAutocomplete = (\n resolvedValue: any,\n handleChange: (event: any, newValue: any) => void,\n ) => {\n const isEmpty = isResolvedValueEmpty(resolvedValue, multiple);\n const showPlaceholder = isEmpty && isFocused && !!placeholder;\n const singleAdornment =\n !multiple && resolvedValue && renderSingleValue\n ? renderSingleValue(resolvedValue as SelectOption<TValue>)\n : null;\n\n return (\n <MuiAutocomplete\n multiple={multiple}\n options={options}\n value={resolvedValue}\n disabled={disabled}\n readOnly={readOnly}\n loading={loading}\n sx={mergedSx}\n freeSolo={freeSolo as any}\n open={open}\n onOpen={onOpen}\n onClose={onClose}\n inputValue={inputValue}\n onInputChange={onInputChange}\n filterOptions={filterOptions as any}\n getOptionLabel={(opt) =>\n typeof opt === 'string' ? opt : (opt?.label ?? '')\n }\n isOptionEqualToValue={(a, b) => {\n if (typeof a === 'string' || typeof b === 'string') return a === b;\n if (!a || !b) return a === b;\n return getKey(a.value) === getKey(b.value);\n }}\n getOptionDisabled={(opt) =>\n typeof opt === 'string' ? false : !!opt?.disabled\n }\n onChange={handleChange}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n renderOption={(liProps, option) => {\n // MUI inyecta la `key` dentro de `liProps`. React necesita la key\n // en el elemento más externo que devuelve `renderOption` (acá el\n // wrapper), no en el `<li>` interno. El resto de `liProps` viaja\n // al `<li>`. La key auto-generada por MUI cae a `getOptionLabel`,\n // que colisiona si hay opciones con label duplicado. Usamos\n // `option.value` (único por contrato de SelectOption) para\n // garantizar uniqueness aunque haya labels repetidos.\n const { key: _muiKey, ...liRest } = liProps as React.HTMLAttributes<HTMLLIElement> & {\n key?: React.Key;\n };\n return (\n <AutocompleteOption<TValue>\n key={getKey(option.value)}\n liProps={liRest}\n option={option}\n customRender={renderOptionItem}\n />\n );\n }}\n renderValue={\n multiple\n ? (value, getItemProps) => (\n <AutocompleteChips<TValue>\n value={value as SelectOption<TValue>[]}\n getTagProps={getItemProps}\n size={size}\n maxChipsToShow={maxChipsToShow}\n renderChipLabel={renderChipLabel}\n getKey={getKey}\n />\n )\n : undefined\n }\n noOptionsText={noOptionsText}\n loadingText={loadingText ?? <AutocompleteLoader />}\n renderInput={(params) => {\n const paramsInputLabel =\n (params as any).InputLabelProps as Record<string, any> | undefined;\n const consumerInputLabel =\n (textFieldProps?.slotProps as any)?.inputLabel ??\n (textFieldProps as any)?.InputLabelProps;\n // Para inyectar `singleAdornment` necesitamos pasar `slotProps.input`\n // a TextField, pero `slotProps.input` gana sobre `params.InputProps`\n // (que trae endAdornment con chevron + clear). Por eso, cuando hay\n // adornment custom, mergeamos params.InputProps + lo que el consumer\n // haya pasado por textFieldProps + nuestro startAdornment. Si no hay\n // adornment, no tocamos `slotProps.input` y se preserva el flujo legacy.\n const muiInputProps = (params as any).InputProps as\n | Record<string, any>\n | undefined;\n const consumerInputProps =\n (textFieldProps?.slotProps as any)?.input ??\n (textFieldProps as any)?.InputProps;\n const inputSlot = singleAdornment\n ? {\n ...muiInputProps,\n ...consumerInputProps,\n startAdornment: (\n <>\n {singleAdornment}\n {consumerInputProps?.startAdornment}\n {muiInputProps?.startAdornment}\n </>\n ),\n }\n : undefined;\n\n return (\n <TextField\n {...params}\n label={label}\n size={size}\n variant=\"outlined\"\n placeholder={showPlaceholder ? placeholder : undefined}\n error={!!errorProp}\n helperText={helperText}\n {...textFieldProps}\n slotProps={{\n ...textFieldProps?.slotProps,\n ...(inputSlot ? { input: inputSlot } : {}),\n inputLabel: {\n ...paramsInputLabel,\n ...consumerInputLabel,\n shrink:\n labelPosition === 'outside'\n ? !isEmpty || isFocused\n : paramsInputLabel?.shrink,\n },\n }}\n />\n );\n }}\n />\n );\n };\n\n //obtiene el primitivo (o objeto) value desde la opción seleccionada\n const extractValue = (opt: any): TValue | null => {\n if (opt === null || opt === undefined) return null;\n if (typeof opt === 'string') return opt as unknown as TValue;\n return (opt?.value ?? null) as TValue | null;\n };\n\n const handleControlledChange = (_event: any, newValue: any) => {\n const { onChange } = props;\n if (multiple) {\n const values = (newValue ?? [])\n .map((opt: SelectOption<TValue> | string) => extractValue(opt))\n .filter((v: TValue | null): v is TValue => v !== null);\n onChange(values);\n } else {\n onChange(extractValue(newValue));\n }\n };\n\n const resolvedValue = stabilizeResolved(\n multiple\n ? resolveMultipleValue(resolvePool, props.value as TValue[], getKey)\n : resolveSingleValue(resolvePool, props.value as TValue, getKey),\n );\n\n return renderAutocomplete(resolvedValue, handleControlledChange);\n}\n\n/** Alias de `Autocomplete`. Ambos nombres son equivalentes. */\nexport const AutocompleteSelect = Autocomplete;\n\nexport default Autocomplete;"],"names":["buildFormFieldSx","n","jsx","jsxs","Fragment","Chip","Avatar","Box","CircularProgress","Typography","useState","useRef","useMemo","useTheme","resolvePreset","resolvedValue","MuiAutocomplete","TextField"],"mappings":"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"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { ReactNode, SyntheticEvent } from 'react';
|
|
2
2
|
import { TextFieldProps } from '@mui/material';
|
|
3
3
|
import { SxProps, Theme } from '@mui/material/styles';
|
|
4
|
-
|
|
5
|
-
export
|
|
6
|
-
|
|
4
|
+
/** Key estable usada para comparar values, indexar caches y como React key. */
|
|
5
|
+
export type AutocompleteValueKey = string | number;
|
|
6
|
+
export interface SelectOption<TValue = AutocompleteValueKey> {
|
|
7
|
+
value: TValue;
|
|
7
8
|
label: string;
|
|
8
9
|
img?: string;
|
|
9
10
|
disabled?: boolean;
|
|
@@ -12,11 +13,12 @@ export interface SelectOption {
|
|
|
12
13
|
}
|
|
13
14
|
export type LabelPosition = 'outside' | 'floating';
|
|
14
15
|
export type AutocompleteSize = 'small' | 'medium';
|
|
15
|
-
export type RenderOptionItem = (item: SelectOption) => ReactNode;
|
|
16
|
-
export type RenderChipLabel = (item: SelectOption) => ReactNode;
|
|
17
|
-
export type
|
|
16
|
+
export type RenderOptionItem<TValue = AutocompleteValueKey> = (item: SelectOption<TValue>) => ReactNode;
|
|
17
|
+
export type RenderChipLabel<TValue = AutocompleteValueKey> = (item: SelectOption<TValue>) => ReactNode;
|
|
18
|
+
export type RenderSingleValue<TValue = AutocompleteValueKey> = (item: SelectOption<TValue>) => ReactNode;
|
|
19
|
+
export type BaseAutocompleteProps<TValue = AutocompleteValueKey> = {
|
|
18
20
|
label?: string;
|
|
19
|
-
options: SelectOption[];
|
|
21
|
+
options: SelectOption<TValue>[];
|
|
20
22
|
placeholder?: string;
|
|
21
23
|
multiple?: boolean;
|
|
22
24
|
disabled?: boolean;
|
|
@@ -25,8 +27,22 @@ export type BaseAutocompleteProps<_TValue extends SelectOption['value'] = Select
|
|
|
25
27
|
error?: boolean;
|
|
26
28
|
helperText?: string;
|
|
27
29
|
maxChipsToShow?: number;
|
|
28
|
-
renderOptionItem?: RenderOptionItem
|
|
29
|
-
renderChipLabel?: RenderChipLabel
|
|
30
|
+
renderOptionItem?: RenderOptionItem<TValue>;
|
|
31
|
+
renderChipLabel?: RenderChipLabel<TValue>;
|
|
32
|
+
/**
|
|
33
|
+
* Renderiza JSX custom como `startAdornment` del input en single mode.
|
|
34
|
+
* Recibe la `SelectOption` seleccionada. Útil para mostrar avatars, iconos,
|
|
35
|
+
* etc. junto al texto del label. En `multiple` no aplica (se usa `renderChipLabel`).
|
|
36
|
+
*/
|
|
37
|
+
renderSingleValue?: RenderSingleValue<TValue>;
|
|
38
|
+
/**
|
|
39
|
+
* Extrae una key estable (string | number) desde el `value`. Obligatorio
|
|
40
|
+
* cuando `TValue` es un objeto: se usa para comparar values (`isOptionEqualToValue`,
|
|
41
|
+
* resolución desde el value del form), indexar el cache interno de opciones
|
|
42
|
+
* vistas y como React key en chips/options del dropdown. Para primitivos se
|
|
43
|
+
* puede omitir (default: identidad, o sea `===`).
|
|
44
|
+
*/
|
|
45
|
+
getOptionKey?: (value: TValue) => AutocompleteValueKey;
|
|
30
46
|
/** Border radius del input. Default: 10. */
|
|
31
47
|
borderRadius?: number | string;
|
|
32
48
|
/** "outside" (default) = label arriba del input; "floating" = comportamiento nativo MUI. */
|
|
@@ -38,7 +54,6 @@ export type BaseAutocompleteProps<_TValue extends SelectOption['value'] = Select
|
|
|
38
54
|
/** Texto cuando está cargando. */
|
|
39
55
|
loadingText?: ReactNode;
|
|
40
56
|
sx?: SxProps<Theme>;
|
|
41
|
-
className?: string;
|
|
42
57
|
/**
|
|
43
58
|
* Nombre del preset de estilo registrado en `theme.styles.Autocomplete`.
|
|
44
59
|
* - `"default"` (o ausente) = estilo built-in del paquete.
|
|
@@ -53,31 +68,19 @@ export type BaseAutocompleteProps<_TValue extends SelectOption['value'] = Select
|
|
|
53
68
|
/** Valor controlado del texto de búsqueda. */
|
|
54
69
|
inputValue?: string;
|
|
55
70
|
/** Filtro custom. Para búsqueda remota pasar `(x) => x` y confiar sólo en el servicio. */
|
|
56
|
-
filterOptions?: (options: SelectOption[], state: any) => SelectOption[];
|
|
71
|
+
filterOptions?: (options: SelectOption<TValue>[], state: any) => SelectOption<TValue>[];
|
|
57
72
|
/** Permite valores arbitrarios (no solo de la lista). */
|
|
58
73
|
freeSolo?: boolean;
|
|
59
74
|
open?: boolean;
|
|
60
75
|
onOpen?: (event: SyntheticEvent) => void;
|
|
61
76
|
onClose?: (event: SyntheticEvent, reason: string) => void;
|
|
62
77
|
};
|
|
63
|
-
export interface
|
|
78
|
+
export interface AutocompleteProps<TValue = AutocompleteValueKey> extends BaseAutocompleteProps<TValue> {
|
|
64
79
|
value: TValue | TValue[] | null;
|
|
65
80
|
onChange: (val: TValue | TValue[] | null) => void;
|
|
66
81
|
name?: string;
|
|
67
|
-
control?: never;
|
|
68
|
-
validation?: never;
|
|
69
|
-
}
|
|
70
|
-
export interface RHFAutocompleteProps<TValue extends SelectOption['value'] = SelectOption['value']> extends BaseAutocompleteProps<TValue> {
|
|
71
|
-
name: string;
|
|
72
|
-
control: Control<any>;
|
|
73
|
-
validation?: RegisterOptions;
|
|
74
|
-
value?: never;
|
|
75
|
-
onChange?: never;
|
|
76
82
|
}
|
|
77
|
-
export
|
|
78
|
-
|
|
79
|
-
/**
|
|
80
|
-
* @deprecated Usar `Autocomplete` en su lugar. Alias mantenido para retro-compatibilidad.
|
|
81
|
-
*/
|
|
83
|
+
export declare function Autocomplete<TValue = AutocompleteValueKey>(props: AutocompleteProps<TValue>): import("react/jsx-runtime").JSX.Element;
|
|
84
|
+
/** Alias de `Autocomplete`. Ambos nombres son equivalentes. */
|
|
82
85
|
export declare const AutocompleteSelect: typeof Autocomplete;
|
|
83
86
|
export default Autocomplete;
|
|
@@ -11,5 +11,6 @@ export declare const WithErrorAutocompleteDefinition = "\nimport React, { useSta
|
|
|
11
11
|
export declare const LabelPositionAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box, Stack } from '@mui/material';\n\nconst options = [\n { value: 'a', label: 'Opci\u00F3n A' },\n { value: 'b', label: 'Opci\u00F3n B' },\n];\n\nexport const LabelPositionExample = () => {\n const [a, setA] = useState<string | null>(null);\n const [b, setB] = useState<string | null>(null);\n return (\n <Stack spacing={3} sx={{ width: 320 }}>\n <Autocomplete\n label=\"Outside (default)\"\n labelPosition=\"outside\"\n options={options}\n value={a}\n onChange={(val) => setA(val as string | null)}\n />\n <Autocomplete\n label=\"Floating\"\n labelPosition=\"floating\"\n options={options}\n value={b}\n onChange={(val) => setB(val as string | null)}\n />\n </Stack>\n );\n};\n";
|
|
12
12
|
export declare const CustomBorderRadiusAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box, Stack } from '@mui/material';\n\nconst options = [\n { value: '10', label: '10' },\n { value: '25', label: '25' },\n];\n\nexport const CustomBorderRadiusExample = () => {\n const [a, setA] = useState<string | null>(null);\n const [b, setB] = useState<string | null>(null);\n const [c, setC] = useState<string | null>(null);\n return (\n <Stack spacing={2} sx={{ width: 300 }}>\n <Autocomplete label=\"0\" borderRadius={0} options={options} value={a} onChange={(v) => setA(v as string | null)} />\n <Autocomplete label=\"10 (default)\" borderRadius={10} options={options} value={b} onChange={(v) => setB(v as string | null)} />\n <Autocomplete label=\"24 (pill)\" borderRadius={24} options={options} value={c} onChange={(v) => setC(v as string | null)} />\n </Stack>\n );\n};\n";
|
|
13
13
|
export declare const EmptyWithPlaceholderAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box } from '@mui/material';\n\nconst options = [\n { value: 'mx', label: 'M\u00E9xico' },\n { value: 'co', label: 'Colombia' },\n { value: 'ar', label: 'Argentina' },\n];\n\nexport const EmptyWithPlaceholderExample = () => {\n const [value, setValue] = useState<string | null>(null);\n return (\n <Box sx={{ width: 300 }}>\n <Autocomplete\n label=\"Pa\u00EDs\"\n placeholder=\"Buscar pa\u00EDs...\"\n options={options}\n value={value}\n onChange={(val) => setValue(val as string | null)}\n />\n </Box>\n );\n};\n";
|
|
14
|
-
export declare const RHFAutocompleteDefinition = "\nimport React from 'react';\nimport { useForm } from 'react-hook-form';\nimport Autocomplete from './Autocomplete';\nimport { Box, Button, Stack } from '@mui/material';\n\nconst options = [\n { value: 'mx', label: 'M\u00E9xico' },\n { value: 'co', label: 'Colombia' },\n { value: 'ar', label: 'Argentina' },\n];\n\ntype FormValues = { country: string | null };\n\nexport const RHFExample = () => {\n const { control, handleSubmit
|
|
14
|
+
export declare const RHFAutocompleteDefinition = "\nimport React from 'react';\nimport { Controller, useForm } from 'react-hook-form';\nimport Autocomplete from './Autocomplete';\nimport { Box, Button, Stack } from '@mui/material';\n\nconst options = [\n { value: 'mx', label: 'M\u00E9xico' },\n { value: 'co', label: 'Colombia' },\n { value: 'ar', label: 'Argentina' },\n];\n\ntype FormValues = { country: string | null };\n\nexport const RHFExample = () => {\n const { control, handleSubmit } = useForm<FormValues>({\n defaultValues: { country: null },\n });\n\n return (\n <Box component=\"form\" onSubmit={handleSubmit((data) => console.log(data))}>\n <Stack spacing={2} sx={{ width: 320 }}>\n <Controller\n name=\"country\"\n control={control}\n rules={{ required: 'Campo requerido' }}\n render={({ field, fieldState }) => (\n <Autocomplete\n label=\"Pa\u00EDs\"\n placeholder=\"Seleccione...\"\n options={options}\n value={field.value}\n onChange={(v) => field.onChange(v as string | null)}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n />\n )}\n />\n <Button type=\"submit\" variant=\"contained\">Guardar</Button>\n </Stack>\n </Box>\n );\n};\n";
|
|
15
|
+
export declare const ObjectValueAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete, { SelectOption } from './Autocomplete';\nimport { Box, Typography } from '@mui/material';\n\ntype Country = { id: string; iso: string; name: string };\n\nconst options: SelectOption<Country>[] = [\n { value: { id: '1', iso: 'MX', name: 'M\u00E9xico' }, label: 'M\u00E9xico' },\n { value: { id: '2', iso: 'CO', name: 'Colombia' }, label: 'Colombia' },\n { value: { id: '3', iso: 'AR', name: 'Argentina' }, label: 'Argentina' },\n];\n\n// Obligatorio cuando TValue es objeto: extrae una key estable (string|number).\nconst getCountryKey = (c: Country) => c.id;\n\nexport const ObjectValueExample = () => {\n const [value, setValue] = useState<Country | null>(null);\n\n return (\n <Box sx={{ width: 320 }}>\n <Autocomplete<Country>\n label=\"Pa\u00EDs\"\n options={options}\n value={value}\n onChange={(v) => setValue(v as Country | null)}\n getOptionKey={getCountryKey}\n />\n <Typography>{value ? value.iso : 'Ninguno'}</Typography>\n </Box>\n );\n};\n";
|
|
15
16
|
export declare const AsyncServiceAutocompleteDefinition: string;
|
|
@@ -1,18 +1,22 @@
|
|
|
1
1
|
import { SxProps, Theme } from '@mui/material/styles';
|
|
2
|
-
import { SelectOption } from './Autocomplete';
|
|
2
|
+
import { AutocompleteValueKey, SelectOption } from './Autocomplete';
|
|
3
3
|
/** Resuelve un value único a su SelectOption dentro del pool. */
|
|
4
|
-
export declare const resolveSingleValue: (options: SelectOption[], value:
|
|
4
|
+
export declare const resolveSingleValue: <TValue>(options: SelectOption<TValue>[], value: TValue | null | undefined, getKey: (v: TValue) => AutocompleteValueKey) => SelectOption<TValue> | null;
|
|
5
5
|
/** Resuelve un array de values a sus SelectOption dentro del pool. */
|
|
6
|
-
export declare const resolveMultipleValue: (options: SelectOption[], value:
|
|
6
|
+
export declare const resolveMultipleValue: <TValue>(options: SelectOption<TValue>[], value: TValue[] | null | undefined, getKey: (v: TValue) => AutocompleteValueKey) => SelectOption<TValue>[];
|
|
7
7
|
/** Merge de sx base + extra del consumer, respetando el contrato de MUI. */
|
|
8
8
|
export declare const mergeSx: (base: SxProps<Theme>, extra?: SxProps<Theme>) => SxProps<Theme>;
|
|
9
9
|
/**
|
|
10
|
-
* Compara dos valores resueltos (single o multiple)
|
|
11
|
-
* si
|
|
12
|
-
* se pasa a MUI Autocomplete (MUI compara value por referencia
|
|
13
|
-
* y una nueva referencia — aunque el contenido sea igual — dispara
|
|
10
|
+
* Compara dos valores resueltos (single o multiple) estructuralmente para
|
|
11
|
+
* decidir si se puede reusar la referencia previa. Se usa para estabilizar la
|
|
12
|
+
* referencia que se pasa a MUI Autocomplete (MUI compara value por referencia
|
|
13
|
+
* con `!==`, y una nueva referencia — aunque el contenido sea igual — dispara
|
|
14
14
|
* `resetInputValue` y borra el texto mientras el usuario tipea).
|
|
15
|
+
*
|
|
16
|
+
* Comparamos todas las props del SelectOption, no solo `value`, para que un
|
|
17
|
+
* refresh de metadata (label/img/etc.) invalide la referencia estabilizada
|
|
18
|
+
* y la UI muestre los datos actualizados.
|
|
15
19
|
*/
|
|
16
|
-
export declare const areResolvedValuesEqual: (prev: SelectOption | SelectOption[] | null, next: SelectOption | SelectOption[] | null, multiple: boolean) => boolean;
|
|
20
|
+
export declare const areResolvedValuesEqual: <TValue>(prev: SelectOption<TValue> | SelectOption<TValue>[] | null, next: SelectOption<TValue> | SelectOption<TValue>[] | null, multiple: boolean, getKey: (v: TValue) => AutocompleteValueKey) => boolean;
|
|
17
21
|
/** Determina si un valor resuelto está vacío (para placeholder/shrink). */
|
|
18
22
|
export declare const isResolvedValueEmpty: (resolvedValue: unknown, multiple: boolean) => boolean;
|