@soyfri/shared-library 1.5.0 → 2.0.0-beta.1

package/src/components/Select/Select.tsx

@@ -1,25 +1,43 @@
-import React, { ReactElement, useMemo, useState, Children, isValidElement, useEffect, useRef } from 'react';
+import React, {
+    isValidElement,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+    type ReactElement,
+    type ReactNode,
+} from 'react';
 import {
+    Box,
+    CircularProgress,
     FormControl,
+    FormHelperText,
     InputLabel,
+    ListSubheader,
     MenuItem,
-    Select as MuiSelect,
-    Chip,
-    Avatar,
-    Box,
-    Typography,
     OutlinedInput,
-    TextField,
-    ListSubheader,
-    CircularProgress,
-    ListItemIcon,
+    Select as MuiSelect,
     SelectChangeEvent,
+    Typography,
+    type SelectProps as MuiSelectProps,
 } from '@mui/material';
-import { styled } from '@mui/system';
-import ClearIcon from '@mui/icons-material/Clear';
-import CheckIcon from '@mui/icons-material/Check';
-import { Controller, Control, RegisterOptions } from 'react-hook-form';
+import { useTheme } from '@mui/material/styles';
+import { Controller, type Control, type RegisterOptions } from 'react-hook-form';
 
+import { buildSelectSx } from './Select.sx';
+import { resolvePreset } from '../_shared/resolvePreset';
+import {
+    filterOptionsByLabel,
+    groupOptions,
+    isGroupedOptionsEmpty,
+    isSelectValueEmpty,
+    normalizeSelectValue,
+} from './Select.helpers';
+import { SelectSearchHeader } from './_parts/SelectSearchHeader';
+import { SelectValue } from './_parts/SelectValue';
+import { renderSelectMenuItem } from './_parts/SelectMenuItem';
+
+// ── Tipos de dominio ─────────────────────────────────────────────────────
 export interface SelectOption {
     value: string | number;
     label: string;
@@ -29,17 +47,27 @@ export interface SelectOption {
     [key: string]: any;
 }
 
-type RenderOptionItem = (item: SelectOption) => React.ReactNode;
-type RenderChipLabel = (item: SelectOption) => React.ReactNode;
+export type LabelPosition = 'outside' | 'floating';
+export type ChipVariant = 'outlined' | 'filled';
+export type SelectSize = 'small' | 'medium';
+
+// ── Render slots ─────────────────────────────────────────────────────────
+export type RenderOptionItem = (item: SelectOption) => ReactNode;
+export type RenderChipLabel = (item: SelectOption) => ReactNode;
 
-// --- Definición de Props con Union Type ---
+// ── Sub-componente declarativo <Option> ──────────────────────────────────
+export interface OptionProps {
+    children: RenderOptionItem;
+}
 
-// Props comunes para ambos modos
-interface BaseSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> {
+// ── Props base ───────────────────────────────────────────────────────────
+export interface BaseSelectProps<
+    TValue extends SelectOption['value'] = SelectOption['value'],
+> {
     label?: string;
     options?: SelectOption[];
     defaultValue?: TValue | TValue[];
-    size?: 'small' | 'medium';
+    size?: SelectSize;
     multiple?: boolean;
     filterable?: boolean;
     placeholder?: string;
@@ -48,18 +76,36 @@ interface BaseSelectProps<TValue extends SelectOption['value'] = SelectOption['v
     maxWidth?: number | string;
     maxChipsToShow?: number;
     renderChipLabel?: RenderChipLabel;
-    chipVariant?: 'outlined' | 'filled';
+    chipVariant?: ChipVariant;
     loadOptions?: (inputValue: string) => Promise<SelectOption[]>;
-    loadingMessage?: React.ReactNode;
-    noOptionsMessage?: React.ReactNode;
+    loadingMessage?: ReactNode;
+    noOptionsMessage?: ReactNode;
     debounceTimeout?: number;
     disabled?: boolean;
     error?: boolean;
     helperText?: string;
+    /** Border radius del input (px o string CSS). Default: 10 */
+    borderRadius?: number | string;
+    /**
+     * Posición del label.
+     * - "outside" (default): label arriba del input, sin animación.
+     * - "floating": label clásico de MUI (flota dentro del notched outline).
+     */
+    labelPosition?: LabelPosition;
+    /**
+     * Nombre del preset de estilo registrado en `theme.styles.Select`.
+     * - `"default"` (o ausente) = estilo built-in del paquete.
+     * - Cualquier otro string = mergea el preset encima del estilo built-in.
+     */
+    preset?: string;
+    sx?: MuiSelectProps['sx'];
+    className?: string;
 }
 
-// Props para el modo React Hook Form
-interface RHFSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> extends BaseSelectProps<TValue> {
+// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────
+export interface RHFSelectProps<
+    TValue extends SelectOption['value'] = SelectOption['value'],
+> extends BaseSelectProps<TValue> {
     name: string;
     control: Control<any>;
     validation?: RegisterOptions;
@@ -67,8 +113,9 @@ interface RHFSelectProps<TValue extends SelectOption['value'] = SelectOption['va
     onChange?: (val: TValue | TValue[]) => void;
 }
 
-// Props para el modo controlado estándar
-interface StandardSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> extends BaseSelectProps<TValue> {
+export interface StandardSelectProps<
+    TValue extends SelectOption['value'] = SelectOption['value'],
+> extends BaseSelectProps<TValue> {
     name?: string;
     control?: never;
     validation?: never;
@@ -76,98 +123,28 @@ interface StandardSelectProps<TValue extends SelectOption['value'] = SelectOptio
     onChange: (val: TValue | TValue[]) => void;
 }
 
-export type SelectProps<TValue extends SelectOption['value'] = SelectOption['value']> = RHFSelectProps<TValue> | StandardSelectProps<TValue>;
-
-export interface OptionProps {
-    children: RenderOptionItem;
-}
+// ── API pública final ────────────────────────────────────────────────────
+export type SelectProps<
+    TValue extends SelectOption['value'] = SelectOption['value'],
+> = RHFSelectProps<TValue> | StandardSelectProps<TValue>;
 
+// ── Sub-componente declarativo <Option> ──────────────────────────────────
 export function Option(_props: OptionProps) {
     return null;
 }
 Option.displayName = 'Option';
 
-const StyledSelect = styled(MuiSelect)(({ theme }) => ({
-  '& .MuiInputBase-root': {
-    maxHeight: '4px',
-    padding: '8px 10px',
-    borderRadius: '10px',
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: '14px',
-  },
-  '& .MuiSelect-select': {
-    padding: '0 !important',
-    height: '28px !important',
-    display: 'flex',
-    alignItems: 'center',
-    marginLeft: '8px'
-  },
-  '& .MuiOutlinedInput-notchedOutline': {
-    marginBottom: '-4px !important',
-    borderRadius: '10px',
-  },
-  '& .MuiSelect-icon': {
-    top: '50%',
-    transform: 'translateY(-50%)',
-  },
-  '& .MuiOutlinedInput-notchedOutline > legend':{
-    display: 'none',
-  },
-}));
-
-const StyledLabel = styled(InputLabel)(({theme}) =>({
-    '&.MuiInputLabel-root': {
-        top: '50%',
-        transform: 'translate(14px, -50%)',
-    },
-    '&.MuiInputLabel-shrink': {
-        transform: 'translate(1px, -200%) scale(0.75)',
-        fontSize: '16px',
-        '> legend': {
-            display: 'none',
-        }
-    },
-    '&.MuiInputLabel-animated': {
-      '&.MuiInputLabel-shrink': {
-          display: 'block'
-      }
-    }
-}));
-
-const StyledOutlinedInput = styled(OutlinedInput)(({ theme }) => ({
-    '& .MuiInputBase-root': {
-        maxHeight: '34px',
-        padding: '8px 10px',
-        borderRadius: '10px',
-        display: 'flex',
-        alignItems: 'center',
-        fontSize: '14px',
-        ' & > .MuiAvatar-img': {
-            width: '14px',
-            height: '14px',
-        }
-    },
-    '& .MuiInputBase-input': {
-        padding: '0 !important',
-        height: '18px',
-        display: 'flex',
-        alignItems: 'center',
-    },
-    '& .MuiOutlinedInput-notchedOutline': {
-        border: '0.7px solid',
-        borderColor: '#e0e0e0',
-    },
-}));
-
-export function Select<TValue extends SelectOption['value'] = SelectOption['value']>(props: SelectProps<TValue>) {
+// ── Componente ───────────────────────────────────────────────────────────
+export function Select<TValue extends SelectOption['value'] = SelectOption['value']>(
+    props: SelectProps<TValue>,
+) {
     const {
         label,
         options = [],
         value,
         onChange,
         defaultValue,
-        size = 'medium',
+        size = 'small',
         multiple = false,
         filterable = false,
         placeholder,
@@ -184,11 +161,20 @@ export function Select<TValue extends SelectOption['value'] = SelectOption['valu
         disabled = false,
         error = false,
         helperText,
+        borderRadius = 10,
+        labelPosition = 'outside',
+        preset,
+        sx,
+        className,
         ...rest
     } = props;
 
-    const isRHFMode = 'control' in rest && rest.control !== undefined;
+    const theme = useTheme();
+    const presetSx = resolvePreset('Select', preset, theme);
+
+    const isRHFMode = 'control' in rest && (rest as any).control !== undefined;
 
+    // Custom render opcional vía <Option>{item => ...}</Option>
     const customRender: RenderOptionItem | null = useMemo(() => {
         if (React.Children.count(children) === 1) {
             const child = React.Children.only(children);
@@ -199,153 +185,67 @@ export function Select<TValue extends SelectOption['value'] = SelectOption['valu
         return null;
     }, [children]);
 
+    // Búsqueda / async
     const [search, setSearch] = useState('');
     const [asyncOptions, setAsyncOptions] = useState<SelectOption[]>([]);
     const [loading, setLoading] = useState(false);
     const debounceTimerRef = useRef<number | null>(null);
-
     const searchInputRef = useRef<HTMLInputElement>(null);
 
+    // Focus/open tracking para el comportamiento del label "outside".
+    const [isOpen, setIsOpen] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+
     const isAsync = typeof loadOptions === 'function';
     const currentOptions = isAsync ? asyncOptions : options;
 
     useEffect(() => {
-        if (isAsync) {
-            if (debounceTimerRef.current) {
-                clearTimeout(debounceTimerRef.current);
-            }
-
-            if (search) {
-                setLoading(true);
-                debounceTimerRef.current = window.setTimeout(() => {
-                    loadOptions(search)
-                        .then(loadedOpts => {
-                            setAsyncOptions(loadedOpts);
-                        })
-                        .finally(() => {
-                            setLoading(false);
-                            if (searchInputRef.current) {
-                                searchInputRef.current.focus();
-                            }
-                        });
-                }, debounceTimeout);
-            } else {
-                setAsyncOptions([]);
-                setLoading(false);
-                if (searchInputRef.current) {
-                    searchInputRef.current.focus();
-                }
-            }
+        if (!isAsync) return;
+
+        if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+
+        if (search) {
+            setLoading(true);
+            debounceTimerRef.current = window.setTimeout(() => {
+                loadOptions!(search)
+                    .then(setAsyncOptions)
+                    .finally(() => {
+                        setLoading(false);
+                        searchInputRef.current?.focus();
+                    });
+            }, debounceTimeout);
+        } else {
+            setAsyncOptions([]);
+            setLoading(false);
+            searchInputRef.current?.focus();
         }
     }, [search, isAsync, loadOptions, debounceTimeout]);
 
     const filteredOptions = useMemo(() => {
-        if (isAsync) {
-            return currentOptions;
-        }
-        if (!filterable || !search) return currentOptions;
-        return currentOptions.filter(opt =>
-            opt.label.toLowerCase().includes(search.toLowerCase())
-        );
+        if (isAsync) return currentOptions;
+        if (!filterable) return currentOptions;
+        return filterOptionsByLabel(currentOptions, search);
     }, [search, filterable, currentOptions, isAsync]);
 
-    const groupedOptions = useMemo(() => {
-        const groups: Record<string, SelectOption[]> = {};
-        filteredOptions.forEach(opt => {
-            const group = opt.group || '__default';
-            if (!groups[group]) groups[group] = [];
-            groups[group].push(opt);
-        });
-        return groups;
-    }, [filteredOptions]);
-
-    const renderValue = (selected: any) => {
-        if (!selected || (Array.isArray(selected) && selected.length === 0)) {
-            return <Typography sx={{ color: 'text.disabled' }}>{placeholder || ''}</Typography>;
-        }
-
-        if (!multiple) {
-            const item = currentOptions.find((opt) => opt.value === selected);
-            return renderChipLabel && item ? renderChipLabel(item) : (item?.label ?? String(selected));
-        }
-
-        const selectedValuesArray = selected as TValue[];
-        const displayedChips = selectedValuesArray.slice(0, maxChipsToShow);
-        const hiddenChipsCount = selectedValuesArray.length - maxChipsToShow;
-
-        return (
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
-                {displayedChips.map((val) => {
-                    const item = currentOptions.find((o) => o.value === val);
-                    if (!item) return null;
-
-                    const handleDelete = (chipValue: TValue) => {
-                        const newSelected = (value as TValue[]).filter(v => v !== chipValue);
-                        (onChange as (val: TValue | TValue[]) => void)?.(newSelected);
-                    };
-
-                    return (
-                        <Chip
-                            variant={chipVariant}
-                            color="primary"
-                            key={val}
-                            label={renderChipLabel ? renderChipLabel(item) : item.label}
-                            avatar={item.img ?
-                                <Avatar
-                                    sx={
-                                        {
-                                            '& > .MuiAvatar-root, .MuiChip-avatar': {
-                                                backgroundColor: 'red',
-                                            }
-                                        }
-                                    }
-                                    src={item.img}
-                                /> : undefined}
-                            onDelete={() => handleDelete(val)}
-                            deleteIcon={<ClearIcon sx={{ fontSize: '12px !important' }} />}
-                            sx={
-                                {
-                                    height: '27px',
-                                    marginTop: '1px',
-                                }
-                            }
-                        />
-                    );
-                })}
-                {hiddenChipsCount > 0 && (
-                    <Chip
-                        sx={{
-                            height: '27px',
-                            marginTop: '0px',
-                        }}
-                        label={`+${hiddenChipsCount} más`} variant={chipVariant} />
-                )}
-            </Box>
-        );
-    };
+    const groupedOptions = useMemo(() => groupOptions(filteredOptions), [filteredOptions]);
 
+    // Items del menu (search header + loading/empty + grupos + opciones)
     const menuItems = useMemo(() => {
         const items: React.ReactNode[] = [];
 
         if (filterable || isAsync) {
             items.push(
-                <ListSubheader key="search-header" sx={{ px: 2, pt: 1, pb: 1, backgroundColor: 'background.paper', zIndex: 1, position: 'sticky', top: 0 }}>
-                    <TextField
-                        inputRef={searchInputRef}
-                        placeholder="Buscar..."
-                        variant="standard"
-                        size="small"
-                        fullWidth
-                        value={search}
-                        onChange={(e) => setSearch(e.target.value)}
-                        inputProps={{ autoFocus: true }}
-                        onClick={(e) => e.stopPropagation()}
-                        onKeyDown={(e) => e.stopPropagation()}
-                    />
-                </ListSubheader>
+                <SelectSearchHeader
+                    key="search-header"
+                    value={search}
+                    onChange={setSearch}
+                    inputRef={searchInputRef}
+                />,
             );
         }
 
+        const noOptions = isGroupedOptionsEmpty(groupedOptions);
+
         if (loading) {
             items.push(
                 <MenuItem key="loading-message" disabled>
@@ -353,46 +253,57 @@ export function Select<TValue extends SelectOption['value'] = SelectOption['valu
                         <CircularProgress size={20} />
                         <Typography>{loadingMessage}</Typography>
                     </Box>
-                </MenuItem>
+                </MenuItem>,
             );
-        } else if (Object.keys(groupedOptions).length === 0 || (Object.keys(groupedOptions).length === 1 && groupedOptions['__default'] && groupedOptions['__default'].length === 0)) {
+        } else if (noOptions) {
             items.push(
                 <MenuItem key="no-options-message" disabled>
                     <Typography>{noOptionsMessage}</Typography>
-                </MenuItem>
+                </MenuItem>,
             );
         } else {
             Object.entries(groupedOptions).forEach(([group, opts]) => {
                 if (group !== '__default') {
                     items.push(
-                        <ListSubheader key={group} disableSticky>{group}</ListSubheader>
+                        <ListSubheader key={group} disableSticky>
+                            {group}
+                        </ListSubheader>,
                     );
                 }
                 opts.forEach((opt) => {
                     const isSelected = multiple
-                        ? (value as TValue[] | undefined)?.includes(opt.value as TValue)
+                        ? (value as TValue[] | undefined)?.includes(opt.value as TValue) ?? false
                         : value === opt.value;
 
                     items.push(
-                        <MenuItem key={opt.value} value={opt.value} disabled={opt.disabled} selected={isSelected}>
-                            <ListItemIcon sx={{ minWidth: 32 }}>
-                                {isSelected && (
-                                    <CheckIcon sx={{ color: 'green' }} />
-                                )}
-                            </ListItemIcon>
-                            {customRender ? customRender(opt) : opt.label}
-                        </MenuItem>
+                        renderSelectMenuItem({
+                            option: opt,
+                            selected: isSelected,
+                            customRender,
+                        }),
                     );
                 });
             });
         }
         return items;
-    }, [groupedOptions, customRender, filterable, isAsync, search, loading, loadingMessage, noOptionsMessage, multiple, value]);
-
-    const showLabel = label && !placeholder;
+    }, [
+        groupedOptions,
+        customRender,
+        filterable,
+        isAsync,
+        search,
+        loading,
+        loadingMessage,
+        noOptionsMessage,
+        multiple,
+        value,
+    ]);
 
-    // Lógica para manejar el cambio de valor
-    const handleChangeInternal = (event: SelectChangeEvent<any>, rhfOnChange?: (...event: any[]) => void) => {
+    // Handler de cambio
+    const handleChangeInternal = (
+        event: SelectChangeEvent<any>,
+        rhfOnChange?: (...event: any[]) => void,
+    ) => {
         const newValue = event.target.value;
         if (isRHFMode) {
             rhfOnChange?.(newValue);
@@ -401,68 +312,118 @@ export function Select<TValue extends SelectOption['value'] = SelectOption['valu
         }
     };
 
-    // Renderizado condicional basado en el modo
-    const isRHFModeRender = 'control' in rest && rest.control !== undefined;
-
-    const renderSelect = (selectValue: any, selectOnChange: any, onBlur?: any, inputRef?: any) => (
-        <FormControl fullWidth size={size} error={error} disabled={disabled}>
-            {showLabel && <StyledLabel>{label}</StyledLabel>}
-            <Box
-                sx={{
-                    width: '100%',
-                    display: 'grid',
-                    marginBottom: '10px',
-                    marginTop: '10px'
-                }}>
-                <StyledSelect
-                    label={label}
-                    value={selectValue ?? (multiple ? [] : '')}
+    // Sx mergeado (defaults + consumer)
+    const mergedSx = [
+        buildSelectSx(borderRadius, labelPosition),
+        ...(presetSx ? [presetSx] : []),
+        ...(Array.isArray(sx) ? sx : [sx]),
+    ];
+
+    // Render base
+    const renderSelect = (
+        selectValue: any,
+        selectOnChange: any,
+        onBlur?: any,
+        inputRef?: any,
+        rhfError?: boolean,
+        rhfHelperText?: string,
+    ) => {
+        const finalError = rhfError ?? error;
+        const finalHelperText = rhfHelperText ?? helperText;
+
+        const inputElement =
+            labelPosition === 'floating' ? (
+                <OutlinedInput label={label} />
+            ) : (
+                <OutlinedInput />
+            );
+
+        const normalizedValue = normalizeSelectValue(selectValue, multiple);
+        const isEmpty = isSelectValueEmpty(normalizedValue, multiple);
+
+        // Shrink cuando hay valor, foco, o dropdown abierto.
+        const shouldShrink = !isEmpty || isFocused || isOpen;
+        // Placeholder solo cuando el label ya subió.
+        const shouldDisplayPlaceholder = isEmpty && (isFocused || isOpen) && !!placeholder;
+
+        return (
+            <FormControl
+                fullWidth
+                size={size}
+                error={finalError}
+                disabled={disabled}
+                className={className}
+                sx={mergedSx}
+            >
+                {label && <InputLabel shrink={shouldShrink}>{label}</InputLabel>}
+                <MuiSelect
+                    value={normalizedValue}
                     defaultValue={defaultValue}
                     multiple={multiple}
                     onChange={selectOnChange}
-                    onBlur={onBlur}
-                    renderValue={renderValue}
-                    displayEmpty
-                    input={<StyledOutlinedInput label={label} />}
+                    onBlur={(e) => {
+                        setIsFocused(false);
+                        onBlur?.(e);
+                    }}
+                    onFocus={() => setIsFocused(true)}
+                    onOpen={() => setIsOpen(true)}
+                    onClose={() => setIsOpen(false)}
+                    renderValue={(selected) => (
+                        <SelectValue<TValue>
+                            selected={selected as TValue | TValue[]}
+                            options={currentOptions}
+                            multiple={multiple}
+                            placeholder={placeholder}
+                            maxChipsToShow={maxChipsToShow}
+                            chipVariant={chipVariant}
+                            renderChipLabel={renderChipLabel}
+                            currentValues={(value as TValue[]) ?? []}
+                            onDeleteChip={(next) =>
+                                (onChange as (v: TValue | TValue[]) => void)?.(next)
+                            }
+                        />
+                    )}
+                    displayEmpty={shouldDisplayPlaceholder}
+                    input={inputElement}
                     disabled={disabled}
                     MenuProps={{
                         PaperProps: {
-                            style: {
-                                maxHeight: maxHeight,
-                                maxWidth: maxWidth,
-                            },
+                            style: { maxHeight, maxWidth },
                         },
                     }}
                     inputRef={inputRef}
-                    {...rest}
+                    {...(rest as any)}
                 >
                     {menuItems}
-                </StyledSelect>
-                {helperText && <Typography variant="caption" color="error" sx={{ mt: 1 }}>{helperText}</Typography>}
-            </Box>
-        </FormControl>
-    );
+                </MuiSelect>
+                {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}
+            </FormControl>
+        );
+    };
 
-    if (isRHFModeRender) {
+    // Branch: RHF vs controlado
+    if (isRHFMode) {
         const rhfProps = rest as RHFSelectProps<TValue>;
         return (
             <Controller
                 name={rhfProps.name}
                 control={rhfProps.control}
                 rules={rhfProps.validation}
-                render={({ field, fieldState: { error } }) => (
+                render={({ field, fieldState: { error: fieldError } }) =>
                     renderSelect(
                         field.value,
                         (e: SelectChangeEvent<any>) => handleChangeInternal(e, field.onChange),
                         field.onBlur,
-                        field.ref
+                        field.ref,
+                        !!fieldError,
+                        fieldError?.message,
                     )
-                )}
+                }
             />
         );
-    } else {
-        return renderSelect(value, (e: SelectChangeEvent<any>) => handleChangeInternal(e));
     }
+
+    return renderSelect(value, (e: SelectChangeEvent<any>) => handleChangeInternal(e));
 }
 
-export default Select;
+export default Select;