@soyfri/shared-library 2.0.0-beta.26 → 2.0.0-beta.27
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/{Select-kqR48jZU.cjs → Select-CmxXLeJZ.cjs} +93 -14
- package/Select-CmxXLeJZ.cjs.map +1 -0
- package/{Select-Dycmh9vt.js → Select-DRLcIE7M.js} +95 -16
- package/Select-DRLcIE7M.js.map +1 -0
- package/components/Select/Select.cjs +1 -1
- package/components/Select/Select.d.ts +21 -1
- package/components/Select/Select.js +1 -1
- package/components/Select/index.d.ts +1 -1
- package/index.cjs +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/Select-Dycmh9vt.js.map +0 -1
- package/Select-kqR48jZU.cjs.map +0 -1
|
@@ -38,6 +38,7 @@ const reactHookForm = require("react-hook-form");
|
|
|
38
38
|
const formField_sx = require("./formField.sx-BAX7KwMR.cjs");
|
|
39
39
|
const resolvePreset = require("./resolvePreset-CxTI6_Ln.cjs");
|
|
40
40
|
const CheckIcon = require("@mui/icons-material/Check");
|
|
41
|
+
const ClearIcon = require("@mui/icons-material/Clear");
|
|
41
42
|
const buildSelectSx = (borderRadius, labelPosition) => formField_sx.buildFormFieldSx({ borderRadius, labelPosition });
|
|
42
43
|
const groupOptions = (options) => {
|
|
43
44
|
const groups = {};
|
|
@@ -67,6 +68,56 @@ const renderSelectMenuItem = ({
|
|
|
67
68
|
},
|
|
68
69
|
String(option.value)
|
|
69
70
|
);
|
|
71
|
+
function SelectValue(props) {
|
|
72
|
+
var _a;
|
|
73
|
+
const {
|
|
74
|
+
selected,
|
|
75
|
+
options,
|
|
76
|
+
multiple,
|
|
77
|
+
placeholder,
|
|
78
|
+
maxChipsToShow,
|
|
79
|
+
chipVariant,
|
|
80
|
+
renderChipLabel,
|
|
81
|
+
onDeleteChip,
|
|
82
|
+
currentValues
|
|
83
|
+
} = props;
|
|
84
|
+
const isEmpty = !selected || Array.isArray(selected) && selected.length === 0;
|
|
85
|
+
if (isEmpty) {
|
|
86
|
+
return /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "text.disabled" }, children: placeholder || "" });
|
|
87
|
+
}
|
|
88
|
+
if (!multiple) {
|
|
89
|
+
const item = options.find((opt) => opt.value === selected);
|
|
90
|
+
if (renderChipLabel && item) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderChipLabel(item) });
|
|
91
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_a = item == null ? void 0 : item.label) != null ? _a : String(selected) });
|
|
92
|
+
}
|
|
93
|
+
const selectedValuesArray = selected;
|
|
94
|
+
const displayedChips = selectedValuesArray.slice(0, maxChipsToShow);
|
|
95
|
+
const hiddenChipsCount = selectedValuesArray.length - maxChipsToShow;
|
|
96
|
+
const handleDelete = (chipValue) => {
|
|
97
|
+
if (!onDeleteChip || !currentValues) return;
|
|
98
|
+
onDeleteChip(currentValues.filter((v) => v !== chipValue));
|
|
99
|
+
};
|
|
100
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: [
|
|
101
|
+
displayedChips.map((val) => {
|
|
102
|
+
const item = options.find((o) => o.value === val);
|
|
103
|
+
if (!item) return null;
|
|
104
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
105
|
+
material.Chip,
|
|
106
|
+
{
|
|
107
|
+
variant: chipVariant,
|
|
108
|
+
color: "primary",
|
|
109
|
+
size: "small",
|
|
110
|
+
label: renderChipLabel ? renderChipLabel(item) : item.label,
|
|
111
|
+
avatar: item.img ? /* @__PURE__ */ jsxRuntime.jsx(material.Avatar, { src: item.img }) : void 0,
|
|
112
|
+
onDelete: () => handleDelete(val),
|
|
113
|
+
deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, { fontSize: "small" })
|
|
114
|
+
},
|
|
115
|
+
String(val)
|
|
116
|
+
);
|
|
117
|
+
}),
|
|
118
|
+
hiddenChipsCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { size: "small", variant: chipVariant, label: `+${hiddenChipsCount} más` })
|
|
119
|
+
] });
|
|
120
|
+
}
|
|
70
121
|
function Option(_props) {
|
|
71
122
|
return null;
|
|
72
123
|
}
|
|
@@ -90,6 +141,10 @@ function Select(props) {
|
|
|
90
141
|
variant = "outlined",
|
|
91
142
|
sx,
|
|
92
143
|
className,
|
|
144
|
+
multiple = false,
|
|
145
|
+
maxChipsToShow = 3,
|
|
146
|
+
chipVariant = "filled",
|
|
147
|
+
renderChipLabel,
|
|
93
148
|
name: _nameIgnored,
|
|
94
149
|
control: _controlIgnored,
|
|
95
150
|
validation: _validationIgnored,
|
|
@@ -113,6 +168,10 @@ function Select(props) {
|
|
|
113
168
|
"variant",
|
|
114
169
|
"sx",
|
|
115
170
|
"className",
|
|
171
|
+
"multiple",
|
|
172
|
+
"maxChipsToShow",
|
|
173
|
+
"chipVariant",
|
|
174
|
+
"renderChipLabel",
|
|
116
175
|
// Separamos estos aunque no se usen directamente acá — evita que lleguen
|
|
117
176
|
// al DOM del MuiSelect via `{...rest}` y generen warnings de React.
|
|
118
177
|
"name",
|
|
@@ -146,7 +205,7 @@ function Select(props) {
|
|
|
146
205
|
);
|
|
147
206
|
}
|
|
148
207
|
opts.forEach((opt) => {
|
|
149
|
-
const selected = currentValue === opt.value;
|
|
208
|
+
const selected = Array.isArray(currentValue) ? currentValue.includes(opt.value) : currentValue === opt.value;
|
|
150
209
|
items.push(
|
|
151
210
|
renderSelectMenuItem({
|
|
152
211
|
option: opt,
|
|
@@ -162,12 +221,12 @@ function Select(props) {
|
|
|
162
221
|
...presetSx ? [presetSx] : [buildSelectSx(borderRadius, labelPosition)],
|
|
163
222
|
...Array.isArray(sx) ? sx : sx ? [sx] : []
|
|
164
223
|
];
|
|
165
|
-
const renderSelect = (selectValue, selectOnChange, onBlur, inputRef, rhfError, rhfHelperText) => {
|
|
224
|
+
const renderSelect = (selectValue, selectOnChange, onBlur, inputRef, rhfError, rhfHelperText, onValuesChange) => {
|
|
166
225
|
const finalError = !!rhfError || !!error;
|
|
167
226
|
const finalHelperText = rhfHelperText != null ? rhfHelperText : helperText;
|
|
168
227
|
const inputElement = variant === "filled" ? /* @__PURE__ */ jsxRuntime.jsx(material.FilledInput, {}) : labelPosition === "floating" ? /* @__PURE__ */ jsxRuntime.jsx(material.OutlinedInput, { label }) : /* @__PURE__ */ jsxRuntime.jsx(material.OutlinedInput, {});
|
|
169
|
-
const normalizedValue = normalizeSelectValue(selectValue);
|
|
170
|
-
const isEmpty = isSelectValueEmpty(normalizedValue);
|
|
228
|
+
const normalizedValue = multiple ? selectValue != null ? selectValue : [] : normalizeSelectValue(selectValue);
|
|
229
|
+
const isEmpty = multiple ? normalizedValue.length === 0 : isSelectValueEmpty(normalizedValue);
|
|
171
230
|
const shouldShrink = !isEmpty || isFocused || isOpen;
|
|
172
231
|
const shouldDisplayPlaceholder = isEmpty && (isFocused || isOpen) && !!placeholder;
|
|
173
232
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -185,6 +244,7 @@ function Select(props) {
|
|
|
185
244
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
186
245
|
material.Select,
|
|
187
246
|
__spreadProps(__spreadValues({
|
|
247
|
+
multiple,
|
|
188
248
|
value: normalizedValue,
|
|
189
249
|
onChange: selectOnChange,
|
|
190
250
|
onBlur: (e) => {
|
|
@@ -194,14 +254,20 @@ function Select(props) {
|
|
|
194
254
|
onFocus: () => setIsFocused(true),
|
|
195
255
|
onOpen: () => setIsOpen(true),
|
|
196
256
|
onClose: () => setIsOpen(false),
|
|
197
|
-
renderValue: (selected) =>
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
257
|
+
renderValue: (selected) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
258
|
+
SelectValue,
|
|
259
|
+
{
|
|
260
|
+
selected,
|
|
261
|
+
options,
|
|
262
|
+
multiple,
|
|
263
|
+
placeholder,
|
|
264
|
+
maxChipsToShow,
|
|
265
|
+
chipVariant,
|
|
266
|
+
renderChipLabel,
|
|
267
|
+
currentValues: multiple ? selected : void 0,
|
|
268
|
+
onDeleteChip: onValuesChange
|
|
201
269
|
}
|
|
202
|
-
|
|
203
|
-
return (_a2 = item == null ? void 0 : item.label) != null ? _a2 : String(selected);
|
|
204
|
-
},
|
|
270
|
+
),
|
|
205
271
|
displayEmpty: shouldDisplayPlaceholder,
|
|
206
272
|
input: inputElement,
|
|
207
273
|
disabled,
|
|
@@ -241,15 +307,28 @@ function Select(props) {
|
|
|
241
307
|
field.onBlur,
|
|
242
308
|
field.ref,
|
|
243
309
|
!!fieldError,
|
|
244
|
-
fieldError == null ? void 0 : fieldError.message
|
|
310
|
+
fieldError == null ? void 0 : fieldError.message,
|
|
311
|
+
(nextVals) => {
|
|
312
|
+
field.onChange(nextVals);
|
|
313
|
+
onValueChange == null ? void 0 : onValueChange(nextVals);
|
|
314
|
+
}
|
|
245
315
|
);
|
|
246
316
|
}
|
|
247
317
|
}
|
|
248
318
|
);
|
|
249
319
|
}
|
|
250
320
|
const { value, onChange } = props;
|
|
251
|
-
|
|
321
|
+
const handleChange = onChange;
|
|
322
|
+
return renderSelect(
|
|
323
|
+
value,
|
|
324
|
+
(e) => handleChange(e.target.value),
|
|
325
|
+
void 0,
|
|
326
|
+
void 0,
|
|
327
|
+
void 0,
|
|
328
|
+
void 0,
|
|
329
|
+
(next) => onChange(next)
|
|
330
|
+
);
|
|
252
331
|
}
|
|
253
332
|
exports.Option = Option;
|
|
254
333
|
exports.Select = Select;
|
|
255
|
-
//# sourceMappingURL=Select-
|
|
334
|
+
//# sourceMappingURL=Select-CmxXLeJZ.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select-CmxXLeJZ.cjs","sources":["../src/components/Select/Select.sx.ts","../src/components/Select/Select.helpers.ts","../src/components/Select/_parts/SelectMenuItem.tsx","../src/components/Select/_parts/SelectValue.tsx","../src/components/Select/Select.tsx"],"sourcesContent":["import type { SelectProps as MuiSelectProps } from '@mui/material';\n\nimport { buildFormFieldSx } from '../_shared/formField.sx';\nimport type { LabelPosition } from './Select';\n\n/**\n * Builder de sx para el Select. Usa el builder compartido\n * `buildFormFieldSx`. El Select no necesita overrides específicos.\n */\nexport const buildSelectSx = (\n borderRadius: number | string,\n labelPosition: LabelPosition,\n): MuiSelectProps['sx'] =>\n buildFormFieldSx({ borderRadius, labelPosition }) as MuiSelectProps['sx'];\n","import type { SelectOption } from './Select';\n\n/**\n * Agrupa opciones por la propiedad `group`. Las opciones sin group caen\n * bajo la key especial `__default`. Devuelve un Record para iterar en orden\n * de inserción con Object.entries.\n */\nexport const groupOptions = (\n options: SelectOption[],\n): Record<string, SelectOption[]> => {\n const groups: Record<string, SelectOption[]> = {};\n options.forEach((opt) => {\n const group = opt.group || '__default';\n if (!groups[group]) groups[group] = [];\n groups[group].push(opt);\n });\n return groups;\n};\n\n/**\n * Normaliza el valor single al shape que espera MUI Select: string vacío si\n * el valor es `null`/`undefined`.\n */\nexport const normalizeSelectValue = <T>(value: T | null | undefined): T | '' =>\n (value ?? '') as T | '';\n\n/** `true` si el valor está vacío (para shrink del label + placeholder). */\nexport const isSelectValueEmpty = (normalizedValue: unknown): boolean =>\n normalizedValue === '' ||\n normalizedValue === null ||\n normalizedValue === undefined;\n","import React from 'react';\nimport { ListItemIcon, MenuItem } from '@mui/material';\nimport CheckIcon from '@mui/icons-material/Check';\n\nimport type { SelectOption, RenderOptionItem } from '../Select';\n\ninterface RenderSelectMenuItemArgs {\n option: SelectOption;\n selected: boolean;\n customRender?: RenderOptionItem | null;\n}\n\n/**\n * Render helper (no componente) que devuelve un <MenuItem> listo para\n * colocarse como hijo directo del <MuiSelect>. Se implementa como función\n * y no como componente porque MUI Select inspecciona `props.value` de sus\n * children para resolver la selección, y envolverlo en un componente extra\n * rompe esa detección.\n *\n * Incluye el icono de check a la izquierda cuando `selected` es true. Si el\n * consumer pasó un `<Option>{(opt) => ...}</Option>`, usa ese render para el\n * contenido principal; de lo contrario muestra `option.label`.\n */\nexport const renderSelectMenuItem = ({\n option,\n selected,\n customRender,\n}: RenderSelectMenuItemArgs): React.ReactElement => (\n <MenuItem\n key={String(option.value)}\n value={option.value}\n disabled={option.disabled}\n selected={selected}\n >\n <ListItemIcon sx={{ minWidth: 32 }}>\n {selected && <CheckIcon color=\"success\" fontSize=\"small\" />}\n </ListItemIcon>\n {customRender ? customRender(option) : option.label}\n </MenuItem>\n);\n","import { Avatar, Box, Chip, Typography } from '@mui/material';\nimport ClearIcon from '@mui/icons-material/Clear';\n\nimport type {\n SelectOption,\n RenderChipLabel,\n ChipVariant,\n} from '../Select';\n\ninterface SelectValueProps<TValue extends SelectOption['value']> {\n selected: TValue | TValue[] | null | undefined;\n options: SelectOption[];\n multiple: boolean;\n placeholder?: string;\n maxChipsToShow: number;\n chipVariant: ChipVariant;\n renderChipLabel?: RenderChipLabel;\n /** Solo relevante en modo multiple. Recibe el nuevo array de valores. */\n onDeleteChip?: (nextValues: TValue[]) => void;\n /** Array de valores actuales (para componer el nuevo array al borrar chips). */\n currentValues?: TValue[];\n}\n\n/**\n * Render del valor seleccionado del Select.\n * - single: texto (label) o lo que devuelva `renderChipLabel`.\n * - multiple: chips con delete. Trunca después de `maxChipsToShow` mostrando \"+N más\".\n * - empty: placeholder en color disabled.\n */\nexport function SelectValue<TValue extends SelectOption['value']>(\n props: SelectValueProps<TValue>,\n) {\n const {\n selected,\n options,\n multiple,\n placeholder,\n maxChipsToShow,\n chipVariant,\n renderChipLabel,\n onDeleteChip,\n currentValues,\n } = props;\n\n const isEmpty =\n !selected || (Array.isArray(selected) && selected.length === 0);\n\n if (isEmpty) {\n return (\n <Typography sx={{ color: 'text.disabled' }}>{placeholder || ''}</Typography>\n );\n }\n\n if (!multiple) {\n const item = options.find((opt) => opt.value === selected);\n if (renderChipLabel && item) return <>{renderChipLabel(item)}</>;\n return <>{item?.label ?? String(selected)}</>;\n }\n\n const selectedValuesArray = selected as TValue[];\n const displayedChips = selectedValuesArray.slice(0, maxChipsToShow);\n const hiddenChipsCount = selectedValuesArray.length - maxChipsToShow;\n\n const handleDelete = (chipValue: TValue) => {\n if (!onDeleteChip || !currentValues) return;\n onDeleteChip(currentValues.filter((v) => v !== chipValue));\n };\n\n return (\n <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>\n {displayedChips.map((val) => {\n const item = options.find((o) => o.value === val);\n if (!item) return null;\n\n return (\n <Chip\n variant={chipVariant}\n color=\"primary\"\n size=\"small\"\n key={String(val)}\n label={renderChipLabel ? renderChipLabel(item) : item.label}\n avatar={item.img ? <Avatar src={item.img} /> : undefined}\n onDelete={() => handleDelete(val)}\n deleteIcon={<ClearIcon fontSize=\"small\" />}\n />\n );\n })}\n {hiddenChipsCount > 0 && (\n <Chip size=\"small\" variant={chipVariant} label={`+${hiddenChipsCount} más`} />\n )}\n </Box>\n );\n}\n\nexport default SelectValue;\n","import {\n Children,\n isValidElement,\n useMemo,\n useState,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport {\n FilledInput,\n FormControl,\n FormHelperText,\n InputLabel,\n ListSubheader,\n OutlinedInput,\n Select as MuiSelect,\n type SelectChangeEvent,\n type SelectProps as MuiSelectProps,\n} from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildSelectSx } from './Select.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\nimport {\n groupOptions,\n isSelectValueEmpty,\n normalizeSelectValue,\n} from './Select.helpers';\nimport { renderSelectMenuItem } from './_parts/SelectMenuItem';\nimport { SelectValue } from './_parts/SelectValue';\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 SelectSize = 'small' | 'medium';\n\n// ── Render slots ─────────────────────────────────────────────────────────\nexport type RenderOptionItem = (item: SelectOption) => ReactNode;\n\n/** Variante visual de los chips en modo `multiple`. */\nexport type ChipVariant = 'filled' | 'outlined';\n/** Render custom del label de cada chip/valor seleccionado. */\nexport type RenderChipLabel = (item: SelectOption) => ReactNode;\n\n// ── Sub-componente declarativo <Option> ──────────────────────────────────\nexport interface OptionProps {\n children: RenderOptionItem;\n}\n\n// ── Props base ───────────────────────────────────────────────────────────\nexport interface BaseSelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> {\n label?: string;\n options?: SelectOption[];\n defaultValue?: TValue;\n size?: SelectSize;\n placeholder?: string;\n children?: ReactElement<{ children: RenderOptionItem }>;\n maxHeight?: number | string;\n maxWidth?: number | string;\n disabled?: boolean;\n error?: boolean;\n helperText?: string;\n /** Border radius del input (px o string CSS). Default: 10 */\n borderRadius?: number | string;\n /**\n * Posición del label.\n * - \"outside\" (default): label arriba del input, sin animación.\n * - \"floating\": label clásico de MUI (flota dentro del notched outline).\n */\n labelPosition?: LabelPosition;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.Select`.\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 /** MUI input variant. Default: 'outlined'. */\n variant?: 'outlined' | 'filled';\n sx?: MuiSelectProps['sx'];\n className?: string;\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFSelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> extends BaseSelectProps<TValue> {\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 tiene generics propios (como `TValue` acá), TS se\n // confunde narroweando el discriminated union y `Control<any>` no logra\n // absorber `Control<MyForm>` en la comparación estructural profunda.\n // El `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos\n // fuertes — solo degradamos la superficie del prop del Select.\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: TValue) => void;\n multiple?: false;\n value?: never;\n onChange?: never;\n}\n\nexport interface StandardSelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> extends BaseSelectProps<TValue> {\n name?: string;\n control?: never;\n validation?: never;\n multiple?: false;\n value: TValue;\n onChange: (val: TValue) => void;\n}\n\nexport interface MultipleSelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> extends BaseSelectProps<TValue> {\n name?: string;\n control?: never;\n validation?: never;\n multiple: true;\n value: TValue[];\n onChange: (val: TValue[]) => void;\n /** Máximo de chips visibles antes de truncar con \"+N más\". Default: 3. */\n maxChipsToShow?: number;\n /** Variante visual de los chips. Default: 'filled'. */\n chipVariant?: ChipVariant;\n /** Render custom del label de cada chip. */\n renderChipLabel?: RenderChipLabel;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type SelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> =\n | RHFSelectProps<TValue>\n | StandardSelectProps<TValue>\n | MultipleSelectProps<TValue>;\n\n// ── Sub-componente declarativo <Option> ──────────────────────────────────\nexport function Option(_props: OptionProps) {\n return null;\n}\nOption.displayName = 'Option';\n\n// ── Componente ───────────────────────────────────────────────────────────\nexport function Select<\n TValue extends SelectOption['value'] = SelectOption['value'],\n>(props: SelectProps<TValue>) {\n const {\n label,\n options = [],\n defaultValue,\n size = 'small',\n placeholder,\n children,\n maxHeight = 300,\n maxWidth,\n disabled = false,\n error = false,\n helperText,\n borderRadius = 10,\n labelPosition = 'outside',\n preset,\n variant = 'outlined',\n sx,\n className,\n multiple = false,\n maxChipsToShow = 3,\n chipVariant = 'filled',\n renderChipLabel,\n // Separamos estos aunque no se usen directamente acá — evita que lleguen\n // al DOM del MuiSelect via `{...rest}` y generen warnings de React.\n name: _nameIgnored,\n control: _controlIgnored,\n validation: _validationIgnored,\n value: _valueIgnored,\n onChange: _onChangeIgnored,\n ...rest\n } = props as StandardSelectProps<TValue> & {\n name?: string;\n control?: Control<any>;\n validation?: RegisterOptions;\n multiple?: boolean;\n maxChipsToShow?: number;\n chipVariant?: ChipVariant;\n renderChipLabel?: RenderChipLabel;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('Select', preset, theme);\n\n const isRHFMode = 'control' in props && (props as RHFSelectProps<TValue>).control !== undefined;\n\n // Custom render opcional vía <Option>{item => ...}</Option>\n const customRender: RenderOptionItem | null = useMemo(() => {\n if (Children.count(children) === 1) {\n const child = Children.only(children);\n if (isValidElement(child) && (child.type as any)?.displayName === 'Option') {\n return (child.props as OptionProps).children;\n }\n }\n return null;\n }, [children]);\n\n // Focus/open tracking para el comportamiento del label \"outside\".\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n const groupedOptions = useMemo(() => groupOptions(options), [options]);\n\n // Items del menú (grupos + opciones). Un solo memoizado — sin search/async.\n const buildMenuItems = (currentValue: TValue | TValue[] | '') => {\n const items: ReactNode[] = [];\n Object.entries(groupedOptions).forEach(([group, opts]) => {\n if (group !== '__default') {\n items.push(\n <ListSubheader key={group} disableSticky>\n {group}\n </ListSubheader>,\n );\n }\n opts.forEach((opt) => {\n const selected = Array.isArray(currentValue)\n ? currentValue.includes(opt.value as TValue)\n : currentValue === opt.value;\n items.push(\n renderSelectMenuItem({\n option: opt,\n selected,\n customRender,\n }),\n );\n });\n });\n return items;\n };\n\n const mergedSx = [\n ...(presetSx ? [presetSx] : [buildSelectSx(borderRadius, labelPosition)]),\n ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n ];\n\n // Render base (común a RHF y controlled)\n const renderSelect = (\n selectValue: TValue | TValue[] | null | undefined,\n selectOnChange: (event: SelectChangeEvent<TValue | TValue[]>) => void,\n onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void,\n inputRef?: React.Ref<HTMLInputElement>,\n rhfError?: boolean,\n rhfHelperText?: string,\n onValuesChange?: (next: TValue[]) => void,\n ) => {\n const finalError = !!rhfError || !!error;\n const finalHelperText = rhfHelperText ?? helperText;\n\n const inputElement =\n variant === 'filled'\n ? <FilledInput />\n : labelPosition === 'floating'\n ? <OutlinedInput label={label} />\n : <OutlinedInput />;\n\n const normalizedValue = multiple\n ? ((selectValue as TValue[] | null | undefined) ?? [])\n : normalizeSelectValue(selectValue as TValue | null | undefined);\n const isEmpty = multiple\n ? (normalizedValue as TValue[]).length === 0\n : isSelectValueEmpty(normalizedValue);\n\n // Shrink cuando hay valor, foco, o dropdown abierto.\n const shouldShrink = !isEmpty || isFocused || isOpen;\n // Placeholder solo cuando el label ya subió.\n const shouldDisplayPlaceholder =\n isEmpty && (isFocused || isOpen) && !!placeholder;\n\n return (\n <FormControl\n fullWidth\n size={size}\n variant={variant}\n error={finalError}\n disabled={disabled}\n className={className}\n sx={mergedSx}\n >\n {label && <InputLabel shrink={shouldShrink}>{label}</InputLabel>}\n <MuiSelect<TValue | TValue[]>\n multiple={multiple}\n value={normalizedValue as TValue | TValue[]}\n onChange={selectOnChange}\n onBlur={(e) => {\n setIsFocused(false);\n onBlur?.(e);\n }}\n onFocus={() => setIsFocused(true)}\n onOpen={() => setIsOpen(true)}\n onClose={() => setIsOpen(false)}\n renderValue={(selected) => (\n <SelectValue<TValue>\n selected={selected as TValue | TValue[]}\n options={options}\n multiple={multiple}\n placeholder={placeholder}\n maxChipsToShow={maxChipsToShow}\n chipVariant={chipVariant}\n renderChipLabel={renderChipLabel}\n currentValues={multiple ? (selected as TValue[]) : undefined}\n onDeleteChip={onValuesChange}\n />\n )}\n displayEmpty={shouldDisplayPlaceholder}\n input={inputElement}\n disabled={disabled}\n MenuProps={{\n PaperProps: {\n style: { maxHeight, maxWidth },\n },\n }}\n inputRef={inputRef}\n {...(rest as any)}\n >\n {buildMenuItems(normalizedValue as TValue | TValue[] | '')}\n </MuiSelect>\n {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}\n </FormControl>\n );\n };\n\n // ── RHF mode ──────────────────────────────────────────────────────────\n if (isRHFMode) {\n const { name, control, validation, onValueChange } = props as RHFSelectProps<TValue>;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n defaultValue={defaultValue}\n render={({ field, fieldState: { error: fieldError } }) =>\n renderSelect(\n field.value ?? null,\n (e) => {\n const next = e.target.value as TValue;\n field.onChange(next);\n onValueChange?.(next);\n },\n field.onBlur,\n field.ref,\n !!fieldError,\n fieldError?.message,\n (nextVals) => {\n field.onChange(nextVals);\n onValueChange?.(nextVals as unknown as TValue);\n },\n )\n }\n />\n );\n }\n\n // ── Controlled mode (single o multiple) ───────────────────────────────\n const { value, onChange } = props as\n | StandardSelectProps<TValue>\n | MultipleSelectProps<TValue>;\n const handleChange = onChange as (val: TValue | TValue[]) => void;\n return renderSelect(\n value as TValue | TValue[],\n (e) => handleChange(e.target.value as TValue | TValue[]),\n undefined,\n undefined,\n undefined,\n undefined,\n (next) => (onChange as (val: TValue[]) => void)(next),\n );\n}\n\nexport default Select;\n"],"names":["buildFormFieldSx","jsxs","MenuItem","jsx","ListItemIcon","Typography","Fragment","Box","Chip","Avatar","useTheme","resolvePreset","useMemo","Children","isValidElement","_a","useState","ListSubheader","FilledInput","OutlinedInput","FormControl","InputLabel","MuiSelect","FormHelperText","Controller"],"mappings":"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"}
|
|
@@ -29,14 +29,15 @@ var __objRest = (source, exclude) => {
|
|
|
29
29
|
}
|
|
30
30
|
return target;
|
|
31
31
|
};
|
|
32
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
32
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
33
33
|
import { useMemo, Children, isValidElement, useState } from "react";
|
|
34
|
-
import { MenuItem, ListItemIcon, FormControl, InputLabel, Select as Select$1,
|
|
34
|
+
import { MenuItem, ListItemIcon, Typography, Box, Chip, Avatar, FormControl, InputLabel, Select as Select$1, FormHelperText, ListSubheader, FilledInput, OutlinedInput } from "@mui/material";
|
|
35
35
|
import { useTheme } from "@mui/material/styles";
|
|
36
36
|
import { Controller } from "react-hook-form";
|
|
37
37
|
import { b as buildFormFieldSx } from "./formField.sx-8_QRnKxv.js";
|
|
38
38
|
import { r as resolvePreset } from "./resolvePreset-K6_BfWHD.js";
|
|
39
39
|
import CheckIcon from "@mui/icons-material/Check";
|
|
40
|
+
import ClearIcon from "@mui/icons-material/Clear";
|
|
40
41
|
const buildSelectSx = (borderRadius, labelPosition) => buildFormFieldSx({ borderRadius, labelPosition });
|
|
41
42
|
const groupOptions = (options) => {
|
|
42
43
|
const groups = {};
|
|
@@ -66,6 +67,56 @@ const renderSelectMenuItem = ({
|
|
|
66
67
|
},
|
|
67
68
|
String(option.value)
|
|
68
69
|
);
|
|
70
|
+
function SelectValue(props) {
|
|
71
|
+
var _a;
|
|
72
|
+
const {
|
|
73
|
+
selected,
|
|
74
|
+
options,
|
|
75
|
+
multiple,
|
|
76
|
+
placeholder,
|
|
77
|
+
maxChipsToShow,
|
|
78
|
+
chipVariant,
|
|
79
|
+
renderChipLabel,
|
|
80
|
+
onDeleteChip,
|
|
81
|
+
currentValues
|
|
82
|
+
} = props;
|
|
83
|
+
const isEmpty = !selected || Array.isArray(selected) && selected.length === 0;
|
|
84
|
+
if (isEmpty) {
|
|
85
|
+
return /* @__PURE__ */ jsx(Typography, { sx: { color: "text.disabled" }, children: placeholder || "" });
|
|
86
|
+
}
|
|
87
|
+
if (!multiple) {
|
|
88
|
+
const item = options.find((opt) => opt.value === selected);
|
|
89
|
+
if (renderChipLabel && item) return /* @__PURE__ */ jsx(Fragment, { children: renderChipLabel(item) });
|
|
90
|
+
return /* @__PURE__ */ jsx(Fragment, { children: (_a = item == null ? void 0 : item.label) != null ? _a : String(selected) });
|
|
91
|
+
}
|
|
92
|
+
const selectedValuesArray = selected;
|
|
93
|
+
const displayedChips = selectedValuesArray.slice(0, maxChipsToShow);
|
|
94
|
+
const hiddenChipsCount = selectedValuesArray.length - maxChipsToShow;
|
|
95
|
+
const handleDelete = (chipValue) => {
|
|
96
|
+
if (!onDeleteChip || !currentValues) return;
|
|
97
|
+
onDeleteChip(currentValues.filter((v) => v !== chipValue));
|
|
98
|
+
};
|
|
99
|
+
return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: [
|
|
100
|
+
displayedChips.map((val) => {
|
|
101
|
+
const item = options.find((o) => o.value === val);
|
|
102
|
+
if (!item) return null;
|
|
103
|
+
return /* @__PURE__ */ jsx(
|
|
104
|
+
Chip,
|
|
105
|
+
{
|
|
106
|
+
variant: chipVariant,
|
|
107
|
+
color: "primary",
|
|
108
|
+
size: "small",
|
|
109
|
+
label: renderChipLabel ? renderChipLabel(item) : item.label,
|
|
110
|
+
avatar: item.img ? /* @__PURE__ */ jsx(Avatar, { src: item.img }) : void 0,
|
|
111
|
+
onDelete: () => handleDelete(val),
|
|
112
|
+
deleteIcon: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" })
|
|
113
|
+
},
|
|
114
|
+
String(val)
|
|
115
|
+
);
|
|
116
|
+
}),
|
|
117
|
+
hiddenChipsCount > 0 && /* @__PURE__ */ jsx(Chip, { size: "small", variant: chipVariant, label: `+${hiddenChipsCount} más` })
|
|
118
|
+
] });
|
|
119
|
+
}
|
|
69
120
|
function Option(_props) {
|
|
70
121
|
return null;
|
|
71
122
|
}
|
|
@@ -89,6 +140,10 @@ function Select(props) {
|
|
|
89
140
|
variant = "outlined",
|
|
90
141
|
sx,
|
|
91
142
|
className,
|
|
143
|
+
multiple = false,
|
|
144
|
+
maxChipsToShow = 3,
|
|
145
|
+
chipVariant = "filled",
|
|
146
|
+
renderChipLabel,
|
|
92
147
|
name: _nameIgnored,
|
|
93
148
|
control: _controlIgnored,
|
|
94
149
|
validation: _validationIgnored,
|
|
@@ -112,6 +167,10 @@ function Select(props) {
|
|
|
112
167
|
"variant",
|
|
113
168
|
"sx",
|
|
114
169
|
"className",
|
|
170
|
+
"multiple",
|
|
171
|
+
"maxChipsToShow",
|
|
172
|
+
"chipVariant",
|
|
173
|
+
"renderChipLabel",
|
|
115
174
|
// Separamos estos aunque no se usen directamente acá — evita que lleguen
|
|
116
175
|
// al DOM del MuiSelect via `{...rest}` y generen warnings de React.
|
|
117
176
|
"name",
|
|
@@ -145,7 +204,7 @@ function Select(props) {
|
|
|
145
204
|
);
|
|
146
205
|
}
|
|
147
206
|
opts.forEach((opt) => {
|
|
148
|
-
const selected = currentValue === opt.value;
|
|
207
|
+
const selected = Array.isArray(currentValue) ? currentValue.includes(opt.value) : currentValue === opt.value;
|
|
149
208
|
items.push(
|
|
150
209
|
renderSelectMenuItem({
|
|
151
210
|
option: opt,
|
|
@@ -161,12 +220,12 @@ function Select(props) {
|
|
|
161
220
|
...presetSx ? [presetSx] : [buildSelectSx(borderRadius, labelPosition)],
|
|
162
221
|
...Array.isArray(sx) ? sx : sx ? [sx] : []
|
|
163
222
|
];
|
|
164
|
-
const renderSelect = (selectValue, selectOnChange, onBlur, inputRef, rhfError, rhfHelperText) => {
|
|
223
|
+
const renderSelect = (selectValue, selectOnChange, onBlur, inputRef, rhfError, rhfHelperText, onValuesChange) => {
|
|
165
224
|
const finalError = !!rhfError || !!error;
|
|
166
225
|
const finalHelperText = rhfHelperText != null ? rhfHelperText : helperText;
|
|
167
226
|
const inputElement = variant === "filled" ? /* @__PURE__ */ jsx(FilledInput, {}) : labelPosition === "floating" ? /* @__PURE__ */ jsx(OutlinedInput, { label }) : /* @__PURE__ */ jsx(OutlinedInput, {});
|
|
168
|
-
const normalizedValue = normalizeSelectValue(selectValue);
|
|
169
|
-
const isEmpty = isSelectValueEmpty(normalizedValue);
|
|
227
|
+
const normalizedValue = multiple ? selectValue != null ? selectValue : [] : normalizeSelectValue(selectValue);
|
|
228
|
+
const isEmpty = multiple ? normalizedValue.length === 0 : isSelectValueEmpty(normalizedValue);
|
|
170
229
|
const shouldShrink = !isEmpty || isFocused || isOpen;
|
|
171
230
|
const shouldDisplayPlaceholder = isEmpty && (isFocused || isOpen) && !!placeholder;
|
|
172
231
|
return /* @__PURE__ */ jsxs(
|
|
@@ -184,6 +243,7 @@ function Select(props) {
|
|
|
184
243
|
/* @__PURE__ */ jsx(
|
|
185
244
|
Select$1,
|
|
186
245
|
__spreadProps(__spreadValues({
|
|
246
|
+
multiple,
|
|
187
247
|
value: normalizedValue,
|
|
188
248
|
onChange: selectOnChange,
|
|
189
249
|
onBlur: (e) => {
|
|
@@ -193,14 +253,20 @@ function Select(props) {
|
|
|
193
253
|
onFocus: () => setIsFocused(true),
|
|
194
254
|
onOpen: () => setIsOpen(true),
|
|
195
255
|
onClose: () => setIsOpen(false),
|
|
196
|
-
renderValue: (selected) =>
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
256
|
+
renderValue: (selected) => /* @__PURE__ */ jsx(
|
|
257
|
+
SelectValue,
|
|
258
|
+
{
|
|
259
|
+
selected,
|
|
260
|
+
options,
|
|
261
|
+
multiple,
|
|
262
|
+
placeholder,
|
|
263
|
+
maxChipsToShow,
|
|
264
|
+
chipVariant,
|
|
265
|
+
renderChipLabel,
|
|
266
|
+
currentValues: multiple ? selected : void 0,
|
|
267
|
+
onDeleteChip: onValuesChange
|
|
200
268
|
}
|
|
201
|
-
|
|
202
|
-
return (_a2 = item == null ? void 0 : item.label) != null ? _a2 : String(selected);
|
|
203
|
-
},
|
|
269
|
+
),
|
|
204
270
|
displayEmpty: shouldDisplayPlaceholder,
|
|
205
271
|
input: inputElement,
|
|
206
272
|
disabled,
|
|
@@ -240,17 +306,30 @@ function Select(props) {
|
|
|
240
306
|
field.onBlur,
|
|
241
307
|
field.ref,
|
|
242
308
|
!!fieldError,
|
|
243
|
-
fieldError == null ? void 0 : fieldError.message
|
|
309
|
+
fieldError == null ? void 0 : fieldError.message,
|
|
310
|
+
(nextVals) => {
|
|
311
|
+
field.onChange(nextVals);
|
|
312
|
+
onValueChange == null ? void 0 : onValueChange(nextVals);
|
|
313
|
+
}
|
|
244
314
|
);
|
|
245
315
|
}
|
|
246
316
|
}
|
|
247
317
|
);
|
|
248
318
|
}
|
|
249
319
|
const { value, onChange } = props;
|
|
250
|
-
|
|
320
|
+
const handleChange = onChange;
|
|
321
|
+
return renderSelect(
|
|
322
|
+
value,
|
|
323
|
+
(e) => handleChange(e.target.value),
|
|
324
|
+
void 0,
|
|
325
|
+
void 0,
|
|
326
|
+
void 0,
|
|
327
|
+
void 0,
|
|
328
|
+
(next) => onChange(next)
|
|
329
|
+
);
|
|
251
330
|
}
|
|
252
331
|
export {
|
|
253
332
|
Option as O,
|
|
254
333
|
Select as S
|
|
255
334
|
};
|
|
256
|
-
//# sourceMappingURL=Select-
|
|
335
|
+
//# sourceMappingURL=Select-DRLcIE7M.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select-DRLcIE7M.js","sources":["../src/components/Select/Select.sx.ts","../src/components/Select/Select.helpers.ts","../src/components/Select/_parts/SelectMenuItem.tsx","../src/components/Select/_parts/SelectValue.tsx","../src/components/Select/Select.tsx"],"sourcesContent":["import type { SelectProps as MuiSelectProps } from '@mui/material';\n\nimport { buildFormFieldSx } from '../_shared/formField.sx';\nimport type { LabelPosition } from './Select';\n\n/**\n * Builder de sx para el Select. Usa el builder compartido\n * `buildFormFieldSx`. El Select no necesita overrides específicos.\n */\nexport const buildSelectSx = (\n borderRadius: number | string,\n labelPosition: LabelPosition,\n): MuiSelectProps['sx'] =>\n buildFormFieldSx({ borderRadius, labelPosition }) as MuiSelectProps['sx'];\n","import type { SelectOption } from './Select';\n\n/**\n * Agrupa opciones por la propiedad `group`. Las opciones sin group caen\n * bajo la key especial `__default`. Devuelve un Record para iterar en orden\n * de inserción con Object.entries.\n */\nexport const groupOptions = (\n options: SelectOption[],\n): Record<string, SelectOption[]> => {\n const groups: Record<string, SelectOption[]> = {};\n options.forEach((opt) => {\n const group = opt.group || '__default';\n if (!groups[group]) groups[group] = [];\n groups[group].push(opt);\n });\n return groups;\n};\n\n/**\n * Normaliza el valor single al shape que espera MUI Select: string vacío si\n * el valor es `null`/`undefined`.\n */\nexport const normalizeSelectValue = <T>(value: T | null | undefined): T | '' =>\n (value ?? '') as T | '';\n\n/** `true` si el valor está vacío (para shrink del label + placeholder). */\nexport const isSelectValueEmpty = (normalizedValue: unknown): boolean =>\n normalizedValue === '' ||\n normalizedValue === null ||\n normalizedValue === undefined;\n","import React from 'react';\nimport { ListItemIcon, MenuItem } from '@mui/material';\nimport CheckIcon from '@mui/icons-material/Check';\n\nimport type { SelectOption, RenderOptionItem } from '../Select';\n\ninterface RenderSelectMenuItemArgs {\n option: SelectOption;\n selected: boolean;\n customRender?: RenderOptionItem | null;\n}\n\n/**\n * Render helper (no componente) que devuelve un <MenuItem> listo para\n * colocarse como hijo directo del <MuiSelect>. Se implementa como función\n * y no como componente porque MUI Select inspecciona `props.value` de sus\n * children para resolver la selección, y envolverlo en un componente extra\n * rompe esa detección.\n *\n * Incluye el icono de check a la izquierda cuando `selected` es true. Si el\n * consumer pasó un `<Option>{(opt) => ...}</Option>`, usa ese render para el\n * contenido principal; de lo contrario muestra `option.label`.\n */\nexport const renderSelectMenuItem = ({\n option,\n selected,\n customRender,\n}: RenderSelectMenuItemArgs): React.ReactElement => (\n <MenuItem\n key={String(option.value)}\n value={option.value}\n disabled={option.disabled}\n selected={selected}\n >\n <ListItemIcon sx={{ minWidth: 32 }}>\n {selected && <CheckIcon color=\"success\" fontSize=\"small\" />}\n </ListItemIcon>\n {customRender ? customRender(option) : option.label}\n </MenuItem>\n);\n","import { Avatar, Box, Chip, Typography } from '@mui/material';\nimport ClearIcon from '@mui/icons-material/Clear';\n\nimport type {\n SelectOption,\n RenderChipLabel,\n ChipVariant,\n} from '../Select';\n\ninterface SelectValueProps<TValue extends SelectOption['value']> {\n selected: TValue | TValue[] | null | undefined;\n options: SelectOption[];\n multiple: boolean;\n placeholder?: string;\n maxChipsToShow: number;\n chipVariant: ChipVariant;\n renderChipLabel?: RenderChipLabel;\n /** Solo relevante en modo multiple. Recibe el nuevo array de valores. */\n onDeleteChip?: (nextValues: TValue[]) => void;\n /** Array de valores actuales (para componer el nuevo array al borrar chips). */\n currentValues?: TValue[];\n}\n\n/**\n * Render del valor seleccionado del Select.\n * - single: texto (label) o lo que devuelva `renderChipLabel`.\n * - multiple: chips con delete. Trunca después de `maxChipsToShow` mostrando \"+N más\".\n * - empty: placeholder en color disabled.\n */\nexport function SelectValue<TValue extends SelectOption['value']>(\n props: SelectValueProps<TValue>,\n) {\n const {\n selected,\n options,\n multiple,\n placeholder,\n maxChipsToShow,\n chipVariant,\n renderChipLabel,\n onDeleteChip,\n currentValues,\n } = props;\n\n const isEmpty =\n !selected || (Array.isArray(selected) && selected.length === 0);\n\n if (isEmpty) {\n return (\n <Typography sx={{ color: 'text.disabled' }}>{placeholder || ''}</Typography>\n );\n }\n\n if (!multiple) {\n const item = options.find((opt) => opt.value === selected);\n if (renderChipLabel && item) return <>{renderChipLabel(item)}</>;\n return <>{item?.label ?? String(selected)}</>;\n }\n\n const selectedValuesArray = selected as TValue[];\n const displayedChips = selectedValuesArray.slice(0, maxChipsToShow);\n const hiddenChipsCount = selectedValuesArray.length - maxChipsToShow;\n\n const handleDelete = (chipValue: TValue) => {\n if (!onDeleteChip || !currentValues) return;\n onDeleteChip(currentValues.filter((v) => v !== chipValue));\n };\n\n return (\n <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>\n {displayedChips.map((val) => {\n const item = options.find((o) => o.value === val);\n if (!item) return null;\n\n return (\n <Chip\n variant={chipVariant}\n color=\"primary\"\n size=\"small\"\n key={String(val)}\n label={renderChipLabel ? renderChipLabel(item) : item.label}\n avatar={item.img ? <Avatar src={item.img} /> : undefined}\n onDelete={() => handleDelete(val)}\n deleteIcon={<ClearIcon fontSize=\"small\" />}\n />\n );\n })}\n {hiddenChipsCount > 0 && (\n <Chip size=\"small\" variant={chipVariant} label={`+${hiddenChipsCount} más`} />\n )}\n </Box>\n );\n}\n\nexport default SelectValue;\n","import {\n Children,\n isValidElement,\n useMemo,\n useState,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport {\n FilledInput,\n FormControl,\n FormHelperText,\n InputLabel,\n ListSubheader,\n OutlinedInput,\n Select as MuiSelect,\n type SelectChangeEvent,\n type SelectProps as MuiSelectProps,\n} from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildSelectSx } from './Select.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\nimport {\n groupOptions,\n isSelectValueEmpty,\n normalizeSelectValue,\n} from './Select.helpers';\nimport { renderSelectMenuItem } from './_parts/SelectMenuItem';\nimport { SelectValue } from './_parts/SelectValue';\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 SelectSize = 'small' | 'medium';\n\n// ── Render slots ─────────────────────────────────────────────────────────\nexport type RenderOptionItem = (item: SelectOption) => ReactNode;\n\n/** Variante visual de los chips en modo `multiple`. */\nexport type ChipVariant = 'filled' | 'outlined';\n/** Render custom del label de cada chip/valor seleccionado. */\nexport type RenderChipLabel = (item: SelectOption) => ReactNode;\n\n// ── Sub-componente declarativo <Option> ──────────────────────────────────\nexport interface OptionProps {\n children: RenderOptionItem;\n}\n\n// ── Props base ───────────────────────────────────────────────────────────\nexport interface BaseSelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> {\n label?: string;\n options?: SelectOption[];\n defaultValue?: TValue;\n size?: SelectSize;\n placeholder?: string;\n children?: ReactElement<{ children: RenderOptionItem }>;\n maxHeight?: number | string;\n maxWidth?: number | string;\n disabled?: boolean;\n error?: boolean;\n helperText?: string;\n /** Border radius del input (px o string CSS). Default: 10 */\n borderRadius?: number | string;\n /**\n * Posición del label.\n * - \"outside\" (default): label arriba del input, sin animación.\n * - \"floating\": label clásico de MUI (flota dentro del notched outline).\n */\n labelPosition?: LabelPosition;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.Select`.\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 /** MUI input variant. Default: 'outlined'. */\n variant?: 'outlined' | 'filled';\n sx?: MuiSelectProps['sx'];\n className?: string;\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFSelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> extends BaseSelectProps<TValue> {\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 tiene generics propios (como `TValue` acá), TS se\n // confunde narroweando el discriminated union y `Control<any>` no logra\n // absorber `Control<MyForm>` en la comparación estructural profunda.\n // El `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos\n // fuertes — solo degradamos la superficie del prop del Select.\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: TValue) => void;\n multiple?: false;\n value?: never;\n onChange?: never;\n}\n\nexport interface StandardSelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> extends BaseSelectProps<TValue> {\n name?: string;\n control?: never;\n validation?: never;\n multiple?: false;\n value: TValue;\n onChange: (val: TValue) => void;\n}\n\nexport interface MultipleSelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> extends BaseSelectProps<TValue> {\n name?: string;\n control?: never;\n validation?: never;\n multiple: true;\n value: TValue[];\n onChange: (val: TValue[]) => void;\n /** Máximo de chips visibles antes de truncar con \"+N más\". Default: 3. */\n maxChipsToShow?: number;\n /** Variante visual de los chips. Default: 'filled'. */\n chipVariant?: ChipVariant;\n /** Render custom del label de cada chip. */\n renderChipLabel?: RenderChipLabel;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type SelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> =\n | RHFSelectProps<TValue>\n | StandardSelectProps<TValue>\n | MultipleSelectProps<TValue>;\n\n// ── Sub-componente declarativo <Option> ──────────────────────────────────\nexport function Option(_props: OptionProps) {\n return null;\n}\nOption.displayName = 'Option';\n\n// ── Componente ───────────────────────────────────────────────────────────\nexport function Select<\n TValue extends SelectOption['value'] = SelectOption['value'],\n>(props: SelectProps<TValue>) {\n const {\n label,\n options = [],\n defaultValue,\n size = 'small',\n placeholder,\n children,\n maxHeight = 300,\n maxWidth,\n disabled = false,\n error = false,\n helperText,\n borderRadius = 10,\n labelPosition = 'outside',\n preset,\n variant = 'outlined',\n sx,\n className,\n multiple = false,\n maxChipsToShow = 3,\n chipVariant = 'filled',\n renderChipLabel,\n // Separamos estos aunque no se usen directamente acá — evita que lleguen\n // al DOM del MuiSelect via `{...rest}` y generen warnings de React.\n name: _nameIgnored,\n control: _controlIgnored,\n validation: _validationIgnored,\n value: _valueIgnored,\n onChange: _onChangeIgnored,\n ...rest\n } = props as StandardSelectProps<TValue> & {\n name?: string;\n control?: Control<any>;\n validation?: RegisterOptions;\n multiple?: boolean;\n maxChipsToShow?: number;\n chipVariant?: ChipVariant;\n renderChipLabel?: RenderChipLabel;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('Select', preset, theme);\n\n const isRHFMode = 'control' in props && (props as RHFSelectProps<TValue>).control !== undefined;\n\n // Custom render opcional vía <Option>{item => ...}</Option>\n const customRender: RenderOptionItem | null = useMemo(() => {\n if (Children.count(children) === 1) {\n const child = Children.only(children);\n if (isValidElement(child) && (child.type as any)?.displayName === 'Option') {\n return (child.props as OptionProps).children;\n }\n }\n return null;\n }, [children]);\n\n // Focus/open tracking para el comportamiento del label \"outside\".\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n const groupedOptions = useMemo(() => groupOptions(options), [options]);\n\n // Items del menú (grupos + opciones). Un solo memoizado — sin search/async.\n const buildMenuItems = (currentValue: TValue | TValue[] | '') => {\n const items: ReactNode[] = [];\n Object.entries(groupedOptions).forEach(([group, opts]) => {\n if (group !== '__default') {\n items.push(\n <ListSubheader key={group} disableSticky>\n {group}\n </ListSubheader>,\n );\n }\n opts.forEach((opt) => {\n const selected = Array.isArray(currentValue)\n ? currentValue.includes(opt.value as TValue)\n : currentValue === opt.value;\n items.push(\n renderSelectMenuItem({\n option: opt,\n selected,\n customRender,\n }),\n );\n });\n });\n return items;\n };\n\n const mergedSx = [\n ...(presetSx ? [presetSx] : [buildSelectSx(borderRadius, labelPosition)]),\n ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n ];\n\n // Render base (común a RHF y controlled)\n const renderSelect = (\n selectValue: TValue | TValue[] | null | undefined,\n selectOnChange: (event: SelectChangeEvent<TValue | TValue[]>) => void,\n onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void,\n inputRef?: React.Ref<HTMLInputElement>,\n rhfError?: boolean,\n rhfHelperText?: string,\n onValuesChange?: (next: TValue[]) => void,\n ) => {\n const finalError = !!rhfError || !!error;\n const finalHelperText = rhfHelperText ?? helperText;\n\n const inputElement =\n variant === 'filled'\n ? <FilledInput />\n : labelPosition === 'floating'\n ? <OutlinedInput label={label} />\n : <OutlinedInput />;\n\n const normalizedValue = multiple\n ? ((selectValue as TValue[] | null | undefined) ?? [])\n : normalizeSelectValue(selectValue as TValue | null | undefined);\n const isEmpty = multiple\n ? (normalizedValue as TValue[]).length === 0\n : isSelectValueEmpty(normalizedValue);\n\n // Shrink cuando hay valor, foco, o dropdown abierto.\n const shouldShrink = !isEmpty || isFocused || isOpen;\n // Placeholder solo cuando el label ya subió.\n const shouldDisplayPlaceholder =\n isEmpty && (isFocused || isOpen) && !!placeholder;\n\n return (\n <FormControl\n fullWidth\n size={size}\n variant={variant}\n error={finalError}\n disabled={disabled}\n className={className}\n sx={mergedSx}\n >\n {label && <InputLabel shrink={shouldShrink}>{label}</InputLabel>}\n <MuiSelect<TValue | TValue[]>\n multiple={multiple}\n value={normalizedValue as TValue | TValue[]}\n onChange={selectOnChange}\n onBlur={(e) => {\n setIsFocused(false);\n onBlur?.(e);\n }}\n onFocus={() => setIsFocused(true)}\n onOpen={() => setIsOpen(true)}\n onClose={() => setIsOpen(false)}\n renderValue={(selected) => (\n <SelectValue<TValue>\n selected={selected as TValue | TValue[]}\n options={options}\n multiple={multiple}\n placeholder={placeholder}\n maxChipsToShow={maxChipsToShow}\n chipVariant={chipVariant}\n renderChipLabel={renderChipLabel}\n currentValues={multiple ? (selected as TValue[]) : undefined}\n onDeleteChip={onValuesChange}\n />\n )}\n displayEmpty={shouldDisplayPlaceholder}\n input={inputElement}\n disabled={disabled}\n MenuProps={{\n PaperProps: {\n style: { maxHeight, maxWidth },\n },\n }}\n inputRef={inputRef}\n {...(rest as any)}\n >\n {buildMenuItems(normalizedValue as TValue | TValue[] | '')}\n </MuiSelect>\n {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}\n </FormControl>\n );\n };\n\n // ── RHF mode ──────────────────────────────────────────────────────────\n if (isRHFMode) {\n const { name, control, validation, onValueChange } = props as RHFSelectProps<TValue>;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n defaultValue={defaultValue}\n render={({ field, fieldState: { error: fieldError } }) =>\n renderSelect(\n field.value ?? null,\n (e) => {\n const next = e.target.value as TValue;\n field.onChange(next);\n onValueChange?.(next);\n },\n field.onBlur,\n field.ref,\n !!fieldError,\n fieldError?.message,\n (nextVals) => {\n field.onChange(nextVals);\n onValueChange?.(nextVals as unknown as TValue);\n },\n )\n }\n />\n );\n }\n\n // ── Controlled mode (single o multiple) ───────────────────────────────\n const { value, onChange } = props as\n | StandardSelectProps<TValue>\n | MultipleSelectProps<TValue>;\n const handleChange = onChange as (val: TValue | TValue[]) => void;\n return renderSelect(\n value as TValue | TValue[],\n (e) => handleChange(e.target.value as TValue | TValue[]),\n undefined,\n undefined,\n undefined,\n undefined,\n (next) => (onChange as (val: TValue[]) => void)(next),\n );\n}\n\nexport default Select;\n"],"names":["_a","MuiSelect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,gBAAgB,CAC3B,cACA,kBAEA,iBAAiB,EAAE,cAAc,eAAe;ACN3C,MAAM,eAAe,CAC1B,YACmC;AACnC,QAAM,SAAyC,CAAA;AAC/C,UAAQ,QAAQ,CAAC,QAAQ;AACvB,UAAM,QAAQ,IAAI,SAAS;AAC3B,QAAI,CAAC,OAAO,KAAK,EAAG,QAAO,KAAK,IAAI,CAAA;AACpC,WAAO,KAAK,EAAE,KAAK,GAAG;AAAA,EACxB,CAAC;AACD,SAAO;AACT;AAMO,MAAM,uBAAuB,CAAI,UACrC,wBAAS;AAGL,MAAM,qBAAqB,CAAC,oBACjC,oBAAoB,MACpB,oBAAoB,QACpB,oBAAoB;ACPf,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IAEC,OAAO,OAAO;AAAA,IACd,UAAU,OAAO;AAAA,IACjB;AAAA,IAEA,UAAA;AAAA,MAAA,oBAAC,cAAA,EAAa,IAAI,EAAE,UAAU,GAAA,GAC3B,UAAA,YAAY,oBAAC,WAAA,EAAU,OAAM,WAAU,UAAS,SAAQ,GAC3D;AAAA,MACC,eAAe,aAAa,MAAM,IAAI,OAAO;AAAA,IAAA;AAAA,EAAA;AAAA,EARzC,OAAO,OAAO,KAAK;AAS1B;ACTK,SAAS,YACd,OACA;;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,UACJ,CAAC,YAAa,MAAM,QAAQ,QAAQ,KAAK,SAAS,WAAW;AAE/D,MAAI,SAAS;AACX,WACE,oBAAC,cAAW,IAAI,EAAE,OAAO,gBAAA,GAAoB,yBAAe,IAAG;AAAA,EAEnE;AAEA,MAAI,CAAC,UAAU;AACb,UAAM,OAAO,QAAQ,KAAK,CAAC,QAAQ,IAAI,UAAU,QAAQ;AACzD,QAAI,mBAAmB,KAAM,QAAO,oBAAA,UAAA,EAAG,UAAA,gBAAgB,IAAI,GAAE;AAC7D,WAAO,oBAAA,UAAA,EAAG,WAAA,kCAAM,UAAN,YAAe,OAAO,QAAQ,GAAE;AAAA,EAC5C;AAEA,QAAM,sBAAsB;AAC5B,QAAM,iBAAiB,oBAAoB,MAAM,GAAG,cAAc;AAClE,QAAM,mBAAmB,oBAAoB,SAAS;AAEtD,QAAM,eAAe,CAAC,cAAsB;AAC1C,QAAI,CAAC,gBAAgB,CAAC,cAAe;AACrC,iBAAa,cAAc,OAAO,CAAC,MAAM,MAAM,SAAS,CAAC;AAAA,EAC3D;AAEA,SACE,qBAAC,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,UAAU,QAAQ,KAAK,IAAA,GAChD,UAAA;AAAA,IAAA,eAAe,IAAI,CAAC,QAAQ;AAC3B,YAAM,OAAO,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,GAAG;AAChD,UAAI,CAAC,KAAM,QAAO;AAElB,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAM;AAAA,UACN,MAAK;AAAA,UAEL,OAAO,kBAAkB,gBAAgB,IAAI,IAAI,KAAK;AAAA,UACtD,QAAQ,KAAK,MAAM,oBAAC,UAAO,KAAK,KAAK,KAAK,IAAK;AAAA,UAC/C,UAAU,MAAM,aAAa,GAAG;AAAA,UAChC,YAAY,oBAAC,WAAA,EAAU,UAAS,QAAA,CAAQ;AAAA,QAAA;AAAA,QAJnC,OAAO,GAAG;AAAA,MAAA;AAAA,IAOrB,CAAC;AAAA,IACA,mBAAmB,KAClB,oBAAC,MAAA,EAAK,MAAK,SAAQ,SAAS,aAAa,OAAO,IAAI,gBAAgB,OAAA,CAAQ;AAAA,EAAA,GAEhF;AAEJ;AC+DO,SAAS,OAAO,QAAqB;AAC1C,SAAO;AACT;AACA,OAAO,cAAc;AAGd,SAAS,OAEd,OAA4B;AAC5B,QA8BI,YA7BF;AAAA;AAAA,IACA,UAAU,CAAA;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd;AAAA,IAGA,MAAM;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,UAAU;AAAA,MAER,IADC,iBACD,IADC;AAAA,IA5BH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAYF,QAAM,QAAQ,SAAA;AACd,QAAM,WAAW,cAAc,UAAU,QAAQ,KAAK;AAEtD,QAAM,YAAY,aAAa,SAAU,MAAiC,YAAY;AAGtF,QAAM,eAAwC,QAAQ,MAAM;;AAC1D,QAAI,SAAS,MAAM,QAAQ,MAAM,GAAG;AAClC,YAAM,QAAQ,SAAS,KAAK,QAAQ;AACpC,UAAI,eAAe,KAAK,OAAMA,MAAA,MAAM,SAAN,gBAAAA,IAAoB,iBAAgB,UAAU;AAC1E,eAAQ,MAAM,MAAsB;AAAA,MACtC;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,CAAC;AAGb,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,iBAAiB,QAAQ,MAAM,aAAa,OAAO,GAAG,CAAC,OAAO,CAAC;AAGrE,QAAM,iBAAiB,CAAC,iBAAyC;AAC/D,UAAM,QAAqB,CAAA;AAC3B,WAAO,QAAQ,cAAc,EAAE,QAAQ,CAAC,CAAC,OAAO,IAAI,MAAM;AACxD,UAAI,UAAU,aAAa;AACzB,cAAM;AAAA,UACJ,oBAAC,eAAA,EAA0B,eAAa,MACrC,mBADiB,KAEpB;AAAA,QAAA;AAAA,MAEJ;AACA,WAAK,QAAQ,CAAC,QAAQ;AACpB,cAAM,WAAW,MAAM,QAAQ,YAAY,IACvC,aAAa,SAAS,IAAI,KAAe,IACzC,iBAAiB,IAAI;AACzB,cAAM;AAAA,UACJ,qBAAqB;AAAA,YACnB,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,MAEL,CAAC;AAAA,IACH,CAAC;AACD,WAAO;AAAA,EACT;AAEA,QAAM,WAAW;AAAA,IACf,GAAI,WAAW,CAAC,QAAQ,IAAI,CAAC,cAAc,cAAc,aAAa,CAAC;AAAA,IACvE,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,IAAI,CAAA;AAAA,EAAC;AAI5C,QAAM,eAAe,CACnB,aACA,gBACA,QACA,UACA,UACA,eACA,mBACG;AACH,UAAM,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC;AACnC,UAAM,kBAAkB,wCAAiB;AAEzC,UAAM,eACJ,YAAY,WACR,oBAAC,aAAA,CAAA,CAAY,IACb,kBAAkB,aAChB,oBAAC,eAAA,EAAc,MAAA,CAAc,wBAC5B,eAAA,EAAc;AAEvB,UAAM,kBAAkB,WAClB,oCAA+C,CAAA,IACjD,qBAAqB,WAAwC;AACjE,UAAM,UAAU,WACX,gBAA6B,WAAW,IACzC,mBAAmB,eAAe;AAGtC,UAAM,eAAe,CAAC,WAAW,aAAa;AAE9C,UAAM,2BACJ,YAAY,aAAa,WAAW,CAAC,CAAC;AAExC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,IAAI;AAAA,QAEH,UAAA;AAAA,UAAA,SAAS,oBAAC,YAAA,EAAW,QAAQ,cAAe,UAAA,OAAM;AAAA,UACnD;AAAA,YAACC;AAAAA,YAAA;AAAA,cACC;AAAA,cACA,OAAO;AAAA,cACP,UAAU;AAAA,cACV,QAAQ,CAAC,MAAM;AACb,6BAAa,KAAK;AAClB,iDAAS;AAAA,cACX;AAAA,cACA,SAAS,MAAM,aAAa,IAAI;AAAA,cAChC,QAAQ,MAAM,UAAU,IAAI;AAAA,cAC5B,SAAS,MAAM,UAAU,KAAK;AAAA,cAC9B,aAAa,CAAC,aACZ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,eAAe,WAAY,WAAwB;AAAA,kBACnD,cAAc;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGlB,cAAc;AAAA,cACd,OAAO;AAAA,cACP;AAAA,cACA,WAAW;AAAA,gBACT,YAAY;AAAA,kBACV,OAAO,EAAE,WAAW,SAAA;AAAA,gBAAS;AAAA,cAC/B;AAAA,cAEF;AAAA,eACK,OAjCN;AAAA,cAmCE,yBAAe,eAAyC;AAAA,YAAA;AAAA,UAAA;AAAA,UAE1D,mBAAmB,oBAAC,gBAAA,EAAgB,UAAA,gBAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG3D;AAGA,MAAI,WAAW;AACb,UAAM,EAAE,MAAM,SAAS,YAAY,kBAAkB;AACrD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA,QAAQ,CAAC,EAAE,OAAO,YAAY,EAAE,OAAO,WAAA,EAAW;;AAChD;AAAA,aACED,MAAA,MAAM,UAAN,OAAAA,MAAe;AAAA,YACf,CAAC,MAAM;AACL,oBAAM,OAAO,EAAE,OAAO;AACtB,oBAAM,SAAS,IAAI;AACnB,6DAAgB;AAAA,YAClB;AAAA,YACA,MAAM;AAAA,YACN,MAAM;AAAA,YACN,CAAC,CAAC;AAAA,YACF,yCAAY;AAAA,YACZ,CAAC,aAAa;AACZ,oBAAM,SAAS,QAAQ;AACvB,6DAAgB;AAAA,YAClB;AAAA,UAAA;AAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAIR;AAGA,QAAM,EAAE,OAAO,SAAA,IAAa;AAG5B,QAAM,eAAe;AACrB,SAAO;AAAA,IACL;AAAA,IACA,CAAC,MAAM,aAAa,EAAE,OAAO,KAA0B;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,CAAC,SAAU,SAAqC,IAAI;AAAA,EAAA;AAExD;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const Select = require("../../Select-
|
|
3
|
+
const Select = require("../../Select-CmxXLeJZ.cjs");
|
|
4
4
|
exports.Option = Select.Option;
|
|
5
5
|
exports.Select = Select.Select;
|
|
6
6
|
exports.default = Select.Select;
|
|
@@ -12,6 +12,10 @@ export interface SelectOption {
|
|
|
12
12
|
export type LabelPosition = 'outside' | 'floating';
|
|
13
13
|
export type SelectSize = 'small' | 'medium';
|
|
14
14
|
export type RenderOptionItem = (item: SelectOption) => ReactNode;
|
|
15
|
+
/** Variante visual de los chips en modo `multiple`. */
|
|
16
|
+
export type ChipVariant = 'filled' | 'outlined';
|
|
17
|
+
/** Render custom del label de cada chip/valor seleccionado. */
|
|
18
|
+
export type RenderChipLabel = (item: SelectOption) => ReactNode;
|
|
15
19
|
export interface OptionProps {
|
|
16
20
|
children: RenderOptionItem;
|
|
17
21
|
}
|
|
@@ -58,6 +62,7 @@ export interface RHFSelectProps<TValue extends SelectOption['value'] = SelectOpt
|
|
|
58
62
|
* departamento). NO reemplaza al handler de RHF.
|
|
59
63
|
*/
|
|
60
64
|
onValueChange?: (value: TValue) => void;
|
|
65
|
+
multiple?: false;
|
|
61
66
|
value?: never;
|
|
62
67
|
onChange?: never;
|
|
63
68
|
}
|
|
@@ -65,10 +70,25 @@ export interface StandardSelectProps<TValue extends SelectOption['value'] = Sele
|
|
|
65
70
|
name?: string;
|
|
66
71
|
control?: never;
|
|
67
72
|
validation?: never;
|
|
73
|
+
multiple?: false;
|
|
68
74
|
value: TValue;
|
|
69
75
|
onChange: (val: TValue) => void;
|
|
70
76
|
}
|
|
71
|
-
export
|
|
77
|
+
export interface MultipleSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> extends BaseSelectProps<TValue> {
|
|
78
|
+
name?: string;
|
|
79
|
+
control?: never;
|
|
80
|
+
validation?: never;
|
|
81
|
+
multiple: true;
|
|
82
|
+
value: TValue[];
|
|
83
|
+
onChange: (val: TValue[]) => void;
|
|
84
|
+
/** Máximo de chips visibles antes de truncar con "+N más". Default: 3. */
|
|
85
|
+
maxChipsToShow?: number;
|
|
86
|
+
/** Variante visual de los chips. Default: 'filled'. */
|
|
87
|
+
chipVariant?: ChipVariant;
|
|
88
|
+
/** Render custom del label de cada chip. */
|
|
89
|
+
renderChipLabel?: RenderChipLabel;
|
|
90
|
+
}
|
|
91
|
+
export type SelectProps<TValue extends SelectOption['value'] = SelectOption['value']> = RHFSelectProps<TValue> | StandardSelectProps<TValue> | MultipleSelectProps<TValue>;
|
|
72
92
|
export declare function Option(_props: OptionProps): null;
|
|
73
93
|
export declare namespace Option {
|
|
74
94
|
var displayName: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { Select, Option, default } from './Select';
|
|
2
|
-
export type { SelectProps, SelectOption, OptionProps, BaseSelectProps, RHFSelectProps, StandardSelectProps, RenderOptionItem, LabelPosition, SelectSize, } from './Select';
|
|
2
|
+
export type { SelectProps, SelectOption, OptionProps, BaseSelectProps, RHFSelectProps, StandardSelectProps, MultipleSelectProps, RenderOptionItem, ChipVariant, RenderChipLabel, LabelPosition, SelectSize, } from './Select';
|
package/index.cjs
CHANGED
|
@@ -15,7 +15,7 @@ const Table = require("./Table-C4OM6rrC.cjs");
|
|
|
15
15
|
const StatusMessage = require("./StatusMessage-B3nXpuRl.cjs");
|
|
16
16
|
const Modal = require("./Modal-CkpuI8ns.cjs");
|
|
17
17
|
const Input = require("./Input-CScC87J5.cjs");
|
|
18
|
-
const Select = require("./Select-
|
|
18
|
+
const Select = require("./Select-CmxXLeJZ.cjs");
|
|
19
19
|
const Autocomplete = require("./Autocomplete-CejWztBY.cjs");
|
|
20
20
|
const Switch = require("./Switch-CQFOopYy.cjs");
|
|
21
21
|
const RadioGroup = require("./RadioGroup-Dd0rHXSX.cjs");
|
package/index.js
CHANGED
|
@@ -13,7 +13,7 @@ import { T as T2 } from "./Table-C2LbW0B1.js";
|
|
|
13
13
|
import { S as S3 } from "./StatusMessage-D0WgSBx7.js";
|
|
14
14
|
import { M, b, c, a as a3 } from "./Modal-BFpX5AFV.js";
|
|
15
15
|
import { I } from "./Input-DP_fKl38.js";
|
|
16
|
-
import { O, S as S4 } from "./Select-
|
|
16
|
+
import { O, S as S4 } from "./Select-DRLcIE7M.js";
|
|
17
17
|
import { A as A2, a as a4 } from "./Autocomplete-C_lW1VER.js";
|
|
18
18
|
import { S as S5 } from "./Switch-D72dpkH2.js";
|
|
19
19
|
import { R } from "./RadioGroup-bO-ahP9T.js";
|
package/package.json
CHANGED
package/Select-Dycmh9vt.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select-Dycmh9vt.js","sources":["../src/components/Select/Select.sx.ts","../src/components/Select/Select.helpers.ts","../src/components/Select/_parts/SelectMenuItem.tsx","../src/components/Select/Select.tsx"],"sourcesContent":["import type { SelectProps as MuiSelectProps } from '@mui/material';\n\nimport { buildFormFieldSx } from '../_shared/formField.sx';\nimport type { LabelPosition } from './Select';\n\n/**\n * Builder de sx para el Select. Usa el builder compartido\n * `buildFormFieldSx`. El Select no necesita overrides específicos.\n */\nexport const buildSelectSx = (\n borderRadius: number | string,\n labelPosition: LabelPosition,\n): MuiSelectProps['sx'] =>\n buildFormFieldSx({ borderRadius, labelPosition }) as MuiSelectProps['sx'];\n","import type { SelectOption } from './Select';\n\n/**\n * Agrupa opciones por la propiedad `group`. Las opciones sin group caen\n * bajo la key especial `__default`. Devuelve un Record para iterar en orden\n * de inserción con Object.entries.\n */\nexport const groupOptions = (\n options: SelectOption[],\n): Record<string, SelectOption[]> => {\n const groups: Record<string, SelectOption[]> = {};\n options.forEach((opt) => {\n const group = opt.group || '__default';\n if (!groups[group]) groups[group] = [];\n groups[group].push(opt);\n });\n return groups;\n};\n\n/**\n * Normaliza el valor single al shape que espera MUI Select: string vacío si\n * el valor es `null`/`undefined`.\n */\nexport const normalizeSelectValue = <T>(value: T | null | undefined): T | '' =>\n (value ?? '') as T | '';\n\n/** `true` si el valor está vacío (para shrink del label + placeholder). */\nexport const isSelectValueEmpty = (normalizedValue: unknown): boolean =>\n normalizedValue === '' ||\n normalizedValue === null ||\n normalizedValue === undefined;\n","import React from 'react';\nimport { ListItemIcon, MenuItem } from '@mui/material';\nimport CheckIcon from '@mui/icons-material/Check';\n\nimport type { SelectOption, RenderOptionItem } from '../Select';\n\ninterface RenderSelectMenuItemArgs {\n option: SelectOption;\n selected: boolean;\n customRender?: RenderOptionItem | null;\n}\n\n/**\n * Render helper (no componente) que devuelve un <MenuItem> listo para\n * colocarse como hijo directo del <MuiSelect>. Se implementa como función\n * y no como componente porque MUI Select inspecciona `props.value` de sus\n * children para resolver la selección, y envolverlo en un componente extra\n * rompe esa detección.\n *\n * Incluye el icono de check a la izquierda cuando `selected` es true. Si el\n * consumer pasó un `<Option>{(opt) => ...}</Option>`, usa ese render para el\n * contenido principal; de lo contrario muestra `option.label`.\n */\nexport const renderSelectMenuItem = ({\n option,\n selected,\n customRender,\n}: RenderSelectMenuItemArgs): React.ReactElement => (\n <MenuItem\n key={String(option.value)}\n value={option.value}\n disabled={option.disabled}\n selected={selected}\n >\n <ListItemIcon sx={{ minWidth: 32 }}>\n {selected && <CheckIcon color=\"success\" fontSize=\"small\" />}\n </ListItemIcon>\n {customRender ? customRender(option) : option.label}\n </MenuItem>\n);\n","import {\n Children,\n isValidElement,\n useMemo,\n useState,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport {\n FilledInput,\n FormControl,\n FormHelperText,\n InputLabel,\n ListSubheader,\n OutlinedInput,\n Select as MuiSelect,\n Typography,\n type SelectChangeEvent,\n type SelectProps as MuiSelectProps,\n} from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildSelectSx } from './Select.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\nimport {\n groupOptions,\n isSelectValueEmpty,\n normalizeSelectValue,\n} from './Select.helpers';\nimport { renderSelectMenuItem } from './_parts/SelectMenuItem';\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 SelectSize = 'small' | 'medium';\n\n// ── Render slots ─────────────────────────────────────────────────────────\nexport type RenderOptionItem = (item: SelectOption) => ReactNode;\n\n// ── Sub-componente declarativo <Option> ──────────────────────────────────\nexport interface OptionProps {\n children: RenderOptionItem;\n}\n\n// ── Props base ───────────────────────────────────────────────────────────\nexport interface BaseSelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> {\n label?: string;\n options?: SelectOption[];\n defaultValue?: TValue;\n size?: SelectSize;\n placeholder?: string;\n children?: ReactElement<{ children: RenderOptionItem }>;\n maxHeight?: number | string;\n maxWidth?: number | string;\n disabled?: boolean;\n error?: boolean;\n helperText?: string;\n /** Border radius del input (px o string CSS). Default: 10 */\n borderRadius?: number | string;\n /**\n * Posición del label.\n * - \"outside\" (default): label arriba del input, sin animación.\n * - \"floating\": label clásico de MUI (flota dentro del notched outline).\n */\n labelPosition?: LabelPosition;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.Select`.\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 /** MUI input variant. Default: 'outlined'. */\n variant?: 'outlined' | 'filled';\n sx?: MuiSelectProps['sx'];\n className?: string;\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFSelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> extends BaseSelectProps<TValue> {\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 tiene generics propios (como `TValue` acá), TS se\n // confunde narroweando el discriminated union y `Control<any>` no logra\n // absorber `Control<MyForm>` en la comparación estructural profunda.\n // El `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos\n // fuertes — solo degradamos la superficie del prop del Select.\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: TValue) => void;\n value?: never;\n onChange?: never;\n}\n\nexport interface StandardSelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> extends BaseSelectProps<TValue> {\n name?: string;\n control?: never;\n validation?: never;\n value: TValue;\n onChange: (val: TValue) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type SelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> = RHFSelectProps<TValue> | StandardSelectProps<TValue>;\n\n// ── Sub-componente declarativo <Option> ──────────────────────────────────\nexport function Option(_props: OptionProps) {\n return null;\n}\nOption.displayName = 'Option';\n\n// ── Componente ───────────────────────────────────────────────────────────\nexport function Select<\n TValue extends SelectOption['value'] = SelectOption['value'],\n>(props: SelectProps<TValue>) {\n const {\n label,\n options = [],\n defaultValue,\n size = 'small',\n placeholder,\n children,\n maxHeight = 300,\n maxWidth,\n disabled = false,\n error = false,\n helperText,\n borderRadius = 10,\n labelPosition = 'outside',\n preset,\n variant = 'outlined',\n sx,\n className,\n // Separamos estos aunque no se usen directamente acá — evita que lleguen\n // al DOM del MuiSelect via `{...rest}` y generen warnings de React.\n name: _nameIgnored,\n control: _controlIgnored,\n validation: _validationIgnored,\n value: _valueIgnored,\n onChange: _onChangeIgnored,\n ...rest\n } = props as StandardSelectProps<TValue> & {\n name?: string;\n control?: Control<any>;\n validation?: RegisterOptions;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('Select', preset, theme);\n\n const isRHFMode = 'control' in props && (props as RHFSelectProps<TValue>).control !== undefined;\n\n // Custom render opcional vía <Option>{item => ...}</Option>\n const customRender: RenderOptionItem | null = useMemo(() => {\n if (Children.count(children) === 1) {\n const child = Children.only(children);\n if (isValidElement(child) && (child.type as any)?.displayName === 'Option') {\n return (child.props as OptionProps).children;\n }\n }\n return null;\n }, [children]);\n\n // Focus/open tracking para el comportamiento del label \"outside\".\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n const groupedOptions = useMemo(() => groupOptions(options), [options]);\n\n // Items del menú (grupos + opciones). Un solo memoizado — sin search/async.\n const buildMenuItems = (currentValue: TValue | '') => {\n const items: ReactNode[] = [];\n Object.entries(groupedOptions).forEach(([group, opts]) => {\n if (group !== '__default') {\n items.push(\n <ListSubheader key={group} disableSticky>\n {group}\n </ListSubheader>,\n );\n }\n opts.forEach((opt) => {\n const selected = currentValue === opt.value;\n items.push(\n renderSelectMenuItem({\n option: opt,\n selected,\n customRender,\n }),\n );\n });\n });\n return items;\n };\n\n const mergedSx = [\n ...(presetSx ? [presetSx] : [buildSelectSx(borderRadius, labelPosition)]),\n ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n ];\n\n // Render base (común a RHF y controlled)\n const renderSelect = (\n selectValue: TValue | null | undefined,\n selectOnChange: (event: SelectChangeEvent<TValue>) => void,\n onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void,\n inputRef?: React.Ref<HTMLInputElement>,\n rhfError?: boolean,\n rhfHelperText?: string,\n ) => {\n const finalError = !!rhfError || !!error;\n const finalHelperText = rhfHelperText ?? helperText;\n\n const inputElement =\n variant === 'filled'\n ? <FilledInput />\n : labelPosition === 'floating'\n ? <OutlinedInput label={label} />\n : <OutlinedInput />;\n\n const normalizedValue = normalizeSelectValue(selectValue);\n const isEmpty = isSelectValueEmpty(normalizedValue);\n\n // Shrink cuando hay valor, foco, o dropdown abierto.\n const shouldShrink = !isEmpty || isFocused || isOpen;\n // Placeholder solo cuando el label ya subió.\n const shouldDisplayPlaceholder =\n isEmpty && (isFocused || isOpen) && !!placeholder;\n\n return (\n <FormControl\n fullWidth\n size={size}\n variant={variant}\n error={finalError}\n disabled={disabled}\n className={className}\n sx={mergedSx}\n >\n {label && <InputLabel shrink={shouldShrink}>{label}</InputLabel>}\n <MuiSelect<TValue>\n value={normalizedValue as TValue}\n onChange={selectOnChange}\n onBlur={(e) => {\n setIsFocused(false);\n onBlur?.(e);\n }}\n onFocus={() => setIsFocused(true)}\n onOpen={() => setIsOpen(true)}\n onClose={() => setIsOpen(false)}\n renderValue={(selected) => {\n if (isSelectValueEmpty(selected)) {\n return (\n <Typography sx={{ color: 'text.disabled' }}>\n {placeholder ?? ''}\n </Typography>\n );\n }\n const item = options.find((opt) => opt.value === selected);\n return item?.label ?? String(selected);\n }}\n displayEmpty={shouldDisplayPlaceholder}\n input={inputElement}\n disabled={disabled}\n MenuProps={{\n PaperProps: {\n style: { maxHeight, maxWidth },\n },\n }}\n inputRef={inputRef}\n {...(rest as any)}\n >\n {buildMenuItems(normalizedValue as TValue | '')}\n </MuiSelect>\n {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}\n </FormControl>\n );\n };\n\n // ── RHF mode ──────────────────────────────────────────────────────────\n if (isRHFMode) {\n const { name, control, validation, onValueChange } = props as RHFSelectProps<TValue>;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n defaultValue={defaultValue}\n render={({ field, fieldState: { error: fieldError } }) =>\n renderSelect(\n field.value ?? null,\n (e) => {\n const next = e.target.value as TValue;\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 // ── Controlled mode ───────────────────────────────────────────────────\n const { value, onChange } = props as StandardSelectProps<TValue>;\n return renderSelect(value, (e) => onChange(e.target.value as TValue));\n}\n\nexport default Select;\n"],"names":["_a","MuiSelect"],"mappings":"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"}
|
package/Select-kqR48jZU.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select-kqR48jZU.cjs","sources":["../src/components/Select/Select.sx.ts","../src/components/Select/Select.helpers.ts","../src/components/Select/_parts/SelectMenuItem.tsx","../src/components/Select/Select.tsx"],"sourcesContent":["import type { SelectProps as MuiSelectProps } from '@mui/material';\n\nimport { buildFormFieldSx } from '../_shared/formField.sx';\nimport type { LabelPosition } from './Select';\n\n/**\n * Builder de sx para el Select. Usa el builder compartido\n * `buildFormFieldSx`. El Select no necesita overrides específicos.\n */\nexport const buildSelectSx = (\n borderRadius: number | string,\n labelPosition: LabelPosition,\n): MuiSelectProps['sx'] =>\n buildFormFieldSx({ borderRadius, labelPosition }) as MuiSelectProps['sx'];\n","import type { SelectOption } from './Select';\n\n/**\n * Agrupa opciones por la propiedad `group`. Las opciones sin group caen\n * bajo la key especial `__default`. Devuelve un Record para iterar en orden\n * de inserción con Object.entries.\n */\nexport const groupOptions = (\n options: SelectOption[],\n): Record<string, SelectOption[]> => {\n const groups: Record<string, SelectOption[]> = {};\n options.forEach((opt) => {\n const group = opt.group || '__default';\n if (!groups[group]) groups[group] = [];\n groups[group].push(opt);\n });\n return groups;\n};\n\n/**\n * Normaliza el valor single al shape que espera MUI Select: string vacío si\n * el valor es `null`/`undefined`.\n */\nexport const normalizeSelectValue = <T>(value: T | null | undefined): T | '' =>\n (value ?? '') as T | '';\n\n/** `true` si el valor está vacío (para shrink del label + placeholder). */\nexport const isSelectValueEmpty = (normalizedValue: unknown): boolean =>\n normalizedValue === '' ||\n normalizedValue === null ||\n normalizedValue === undefined;\n","import React from 'react';\nimport { ListItemIcon, MenuItem } from '@mui/material';\nimport CheckIcon from '@mui/icons-material/Check';\n\nimport type { SelectOption, RenderOptionItem } from '../Select';\n\ninterface RenderSelectMenuItemArgs {\n option: SelectOption;\n selected: boolean;\n customRender?: RenderOptionItem | null;\n}\n\n/**\n * Render helper (no componente) que devuelve un <MenuItem> listo para\n * colocarse como hijo directo del <MuiSelect>. Se implementa como función\n * y no como componente porque MUI Select inspecciona `props.value` de sus\n * children para resolver la selección, y envolverlo en un componente extra\n * rompe esa detección.\n *\n * Incluye el icono de check a la izquierda cuando `selected` es true. Si el\n * consumer pasó un `<Option>{(opt) => ...}</Option>`, usa ese render para el\n * contenido principal; de lo contrario muestra `option.label`.\n */\nexport const renderSelectMenuItem = ({\n option,\n selected,\n customRender,\n}: RenderSelectMenuItemArgs): React.ReactElement => (\n <MenuItem\n key={String(option.value)}\n value={option.value}\n disabled={option.disabled}\n selected={selected}\n >\n <ListItemIcon sx={{ minWidth: 32 }}>\n {selected && <CheckIcon color=\"success\" fontSize=\"small\" />}\n </ListItemIcon>\n {customRender ? customRender(option) : option.label}\n </MenuItem>\n);\n","import {\n Children,\n isValidElement,\n useMemo,\n useState,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport {\n FilledInput,\n FormControl,\n FormHelperText,\n InputLabel,\n ListSubheader,\n OutlinedInput,\n Select as MuiSelect,\n Typography,\n type SelectChangeEvent,\n type SelectProps as MuiSelectProps,\n} from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildSelectSx } from './Select.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\nimport {\n groupOptions,\n isSelectValueEmpty,\n normalizeSelectValue,\n} from './Select.helpers';\nimport { renderSelectMenuItem } from './_parts/SelectMenuItem';\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 SelectSize = 'small' | 'medium';\n\n// ── Render slots ─────────────────────────────────────────────────────────\nexport type RenderOptionItem = (item: SelectOption) => ReactNode;\n\n// ── Sub-componente declarativo <Option> ──────────────────────────────────\nexport interface OptionProps {\n children: RenderOptionItem;\n}\n\n// ── Props base ───────────────────────────────────────────────────────────\nexport interface BaseSelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> {\n label?: string;\n options?: SelectOption[];\n defaultValue?: TValue;\n size?: SelectSize;\n placeholder?: string;\n children?: ReactElement<{ children: RenderOptionItem }>;\n maxHeight?: number | string;\n maxWidth?: number | string;\n disabled?: boolean;\n error?: boolean;\n helperText?: string;\n /** Border radius del input (px o string CSS). Default: 10 */\n borderRadius?: number | string;\n /**\n * Posición del label.\n * - \"outside\" (default): label arriba del input, sin animación.\n * - \"floating\": label clásico de MUI (flota dentro del notched outline).\n */\n labelPosition?: LabelPosition;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.Select`.\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 /** MUI input variant. Default: 'outlined'. */\n variant?: 'outlined' | 'filled';\n sx?: MuiSelectProps['sx'];\n className?: string;\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFSelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> extends BaseSelectProps<TValue> {\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 tiene generics propios (como `TValue` acá), TS se\n // confunde narroweando el discriminated union y `Control<any>` no logra\n // absorber `Control<MyForm>` en la comparación estructural profunda.\n // El `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos\n // fuertes — solo degradamos la superficie del prop del Select.\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: TValue) => void;\n value?: never;\n onChange?: never;\n}\n\nexport interface StandardSelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> extends BaseSelectProps<TValue> {\n name?: string;\n control?: never;\n validation?: never;\n value: TValue;\n onChange: (val: TValue) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type SelectProps<\n TValue extends SelectOption['value'] = SelectOption['value'],\n> = RHFSelectProps<TValue> | StandardSelectProps<TValue>;\n\n// ── Sub-componente declarativo <Option> ──────────────────────────────────\nexport function Option(_props: OptionProps) {\n return null;\n}\nOption.displayName = 'Option';\n\n// ── Componente ───────────────────────────────────────────────────────────\nexport function Select<\n TValue extends SelectOption['value'] = SelectOption['value'],\n>(props: SelectProps<TValue>) {\n const {\n label,\n options = [],\n defaultValue,\n size = 'small',\n placeholder,\n children,\n maxHeight = 300,\n maxWidth,\n disabled = false,\n error = false,\n helperText,\n borderRadius = 10,\n labelPosition = 'outside',\n preset,\n variant = 'outlined',\n sx,\n className,\n // Separamos estos aunque no se usen directamente acá — evita que lleguen\n // al DOM del MuiSelect via `{...rest}` y generen warnings de React.\n name: _nameIgnored,\n control: _controlIgnored,\n validation: _validationIgnored,\n value: _valueIgnored,\n onChange: _onChangeIgnored,\n ...rest\n } = props as StandardSelectProps<TValue> & {\n name?: string;\n control?: Control<any>;\n validation?: RegisterOptions;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('Select', preset, theme);\n\n const isRHFMode = 'control' in props && (props as RHFSelectProps<TValue>).control !== undefined;\n\n // Custom render opcional vía <Option>{item => ...}</Option>\n const customRender: RenderOptionItem | null = useMemo(() => {\n if (Children.count(children) === 1) {\n const child = Children.only(children);\n if (isValidElement(child) && (child.type as any)?.displayName === 'Option') {\n return (child.props as OptionProps).children;\n }\n }\n return null;\n }, [children]);\n\n // Focus/open tracking para el comportamiento del label \"outside\".\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n const groupedOptions = useMemo(() => groupOptions(options), [options]);\n\n // Items del menú (grupos + opciones). Un solo memoizado — sin search/async.\n const buildMenuItems = (currentValue: TValue | '') => {\n const items: ReactNode[] = [];\n Object.entries(groupedOptions).forEach(([group, opts]) => {\n if (group !== '__default') {\n items.push(\n <ListSubheader key={group} disableSticky>\n {group}\n </ListSubheader>,\n );\n }\n opts.forEach((opt) => {\n const selected = currentValue === opt.value;\n items.push(\n renderSelectMenuItem({\n option: opt,\n selected,\n customRender,\n }),\n );\n });\n });\n return items;\n };\n\n const mergedSx = [\n ...(presetSx ? [presetSx] : [buildSelectSx(borderRadius, labelPosition)]),\n ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n ];\n\n // Render base (común a RHF y controlled)\n const renderSelect = (\n selectValue: TValue | null | undefined,\n selectOnChange: (event: SelectChangeEvent<TValue>) => void,\n onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void,\n inputRef?: React.Ref<HTMLInputElement>,\n rhfError?: boolean,\n rhfHelperText?: string,\n ) => {\n const finalError = !!rhfError || !!error;\n const finalHelperText = rhfHelperText ?? helperText;\n\n const inputElement =\n variant === 'filled'\n ? <FilledInput />\n : labelPosition === 'floating'\n ? <OutlinedInput label={label} />\n : <OutlinedInput />;\n\n const normalizedValue = normalizeSelectValue(selectValue);\n const isEmpty = isSelectValueEmpty(normalizedValue);\n\n // Shrink cuando hay valor, foco, o dropdown abierto.\n const shouldShrink = !isEmpty || isFocused || isOpen;\n // Placeholder solo cuando el label ya subió.\n const shouldDisplayPlaceholder =\n isEmpty && (isFocused || isOpen) && !!placeholder;\n\n return (\n <FormControl\n fullWidth\n size={size}\n variant={variant}\n error={finalError}\n disabled={disabled}\n className={className}\n sx={mergedSx}\n >\n {label && <InputLabel shrink={shouldShrink}>{label}</InputLabel>}\n <MuiSelect<TValue>\n value={normalizedValue as TValue}\n onChange={selectOnChange}\n onBlur={(e) => {\n setIsFocused(false);\n onBlur?.(e);\n }}\n onFocus={() => setIsFocused(true)}\n onOpen={() => setIsOpen(true)}\n onClose={() => setIsOpen(false)}\n renderValue={(selected) => {\n if (isSelectValueEmpty(selected)) {\n return (\n <Typography sx={{ color: 'text.disabled' }}>\n {placeholder ?? ''}\n </Typography>\n );\n }\n const item = options.find((opt) => opt.value === selected);\n return item?.label ?? String(selected);\n }}\n displayEmpty={shouldDisplayPlaceholder}\n input={inputElement}\n disabled={disabled}\n MenuProps={{\n PaperProps: {\n style: { maxHeight, maxWidth },\n },\n }}\n inputRef={inputRef}\n {...(rest as any)}\n >\n {buildMenuItems(normalizedValue as TValue | '')}\n </MuiSelect>\n {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}\n </FormControl>\n );\n };\n\n // ── RHF mode ──────────────────────────────────────────────────────────\n if (isRHFMode) {\n const { name, control, validation, onValueChange } = props as RHFSelectProps<TValue>;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n defaultValue={defaultValue}\n render={({ field, fieldState: { error: fieldError } }) =>\n renderSelect(\n field.value ?? null,\n (e) => {\n const next = e.target.value as TValue;\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 // ── Controlled mode ───────────────────────────────────────────────────\n const { value, onChange } = props as StandardSelectProps<TValue>;\n return renderSelect(value, (e) => onChange(e.target.value as TValue));\n}\n\nexport default Select;\n"],"names":["buildFormFieldSx","jsxs","MenuItem","jsx","ListItemIcon","useTheme","resolvePreset","useMemo","Children","isValidElement","_a","useState","ListSubheader","FilledInput","OutlinedInput","FormControl","InputLabel","MuiSelect","Typography","FormHelperText","Controller"],"mappings":"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"}
|