@trii/components 2.0.64 → 2.0.65

package/dist/cjs/index.js

@@ -9912,6 +9912,30 @@ class AdapterDayjs {
   }
 }
 
+// ============================================
+// COMPONENTES EXTERNOS (evitan re-creación en cada render)
+// ============================================
+// Componente: Input Container con label
+const InputContainer = ({ title, children }) => (jsxRuntimeExports.jsxs(material.Box, { children: [jsxRuntimeExports.jsx(material.Box, { sx: { mb: 1, color: 'text.secondary', fontSize: '0.875rem', userSelect: 'none' }, children: title }), children] }));
+// Componente: Contact Search Input (declarado fuera para evitar pérdida de focus)
+const ContactSearchInput = React.memo(({ onChange, placeholder, isSearching, value }) => {
+    return (jsxRuntimeExports.jsxs(material.Box, { sx: { position: 'relative' }, children: [jsxRuntimeExports.jsx(material.TextField, { fullWidth: true, size: "small", placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), InputProps: {
+                    startAdornment: jsxRuntimeExports.jsx(iconsMaterial.Search, { fontSize: "small", sx: { mr: 1, color: 'text.secondary' } }),
+                }, autoComplete: "off" }), isSearching && (jsxRuntimeExports.jsx(material.Box, { sx: {
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    height: 2,
+                    bgcolor: 'primary.main',
+                    animation: 'progress 1s infinite',
+                    '@keyframes progress': {
+                        '0%': { transform: 'translateX(-100%)' },
+                        '100%': { transform: 'translateX(100%)' },
+                    },
+                } }))] }));
+});
+ContactSearchInput.displayName = 'ContactSearchInput';
 /**
  * ModalEvents - Componente reutilizable para crear/editar/visualizar eventos y tareas
  *
@@ -9922,22 +9946,33 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
     const [currentType, setCurrentType] = React.useState(initialType);
     const [localEventData, setLocalEventData] = React.useState(eventData || {});
     const [localTaskData, setLocalTaskData] = React.useState(taskData || {});
-    const [contactSearch, setContactSearch] = React.useState('');
     const [searchResults, setSearchResults] = React.useState([]);
-    React.useState(false);
+    const [isSearching, setIsSearching] = React.useState(false);
+    const [contactSearchValue, setContactSearchValue] = React.useState('');
+    const contactSearchRef = React.useRef('');
     const debounceTimerRef = React.useRef(null);
+    const wasOpenRef = React.useRef(false);
     const theme = material.useTheme();
-    // Sincronizar con props cuando cambian
-    React.useEffect(() => setCurrentType(initialType), [initialType]);
-    React.useEffect(() => { if (eventData)
-        setLocalEventData(eventData); }, [eventData]);
-    React.useEffect(() => { if (taskData)
-        setLocalTaskData(taskData); }, [taskData]);
+    // Sincronizar con props SOLO cuando el modal se abre (no en cada cambio de props)
+    React.useEffect(() => {
+        if (open && !wasOpenRef.current) {
+            // Modal acaba de abrirse - sincronizar datos
+            setCurrentType(initialType);
+            setLocalEventData(eventData || {});
+            setLocalTaskData(taskData || {});
+            setContactSearchValue('');
+            contactSearchRef.current = '';
+            setSearchResults([]);
+        }
+        wasOpenRef.current = open;
+    }, [open, initialType, eventData, taskData]);
     // Restablecer datos locales al cerrar
     React.useEffect(() => {
         if (!open) {
-            setContactSearch('');
+            setContactSearchValue('');
+            contactSearchRef.current = '';
             setSearchResults([]);
+            setIsSearching(false);
             if (debounceTimerRef.current)
                 clearTimeout(debounceTimerRef.current);
         }
@@ -9996,6 +10031,15 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
         edit: 'Editar',
         duplicate: 'Duplicar',
         close: 'Cerrar',
+        // Labels de recurrencia
+        noRepeat: 'No repetir',
+        everyDay: 'Todos los días',
+        everyWeek: 'Cada semana',
+        everyMonth: 'Cada mes',
+        everyYear: 'Cada año',
+        everyTwoDays: 'Cada 2 días',
+        everyTwoWeeks: 'Cada 2 semanas',
+        everyWeekday: 'Días laborables (Lun-Vie)',
     };
     const l = React.useMemo(() => ({
         ...defaultLabels,
@@ -10006,6 +10050,24 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
     const isViewMode = mode === 'view';
     const isCreateMode = mode === 'create';
     const canDelete = (mode === 'edit' || mode === 'view') && Boolean(currentData?.id);
+    // Opciones de recurrencia
+    const recurrenceOptions = React.useMemo(() => [
+        { value: '', label: l.noRepeat },
+        { value: 'FREQ=DAILY', label: l.everyDay },
+        { value: 'FREQ=WEEKLY', label: l.everyWeek },
+        { value: 'FREQ=MONTHLY', label: l.everyMonth },
+        { value: 'FREQ=YEARLY', label: l.everyYear },
+        { value: 'FREQ=DAILY;INTERVAL=2', label: l.everyTwoDays },
+        { value: 'FREQ=WEEKLY;INTERVAL=2', label: l.everyTwoWeeks },
+        { value: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR', label: l.everyWeekday },
+    ], [l]);
+    // Helper para obtener label de recurrencia
+    const getRecurrenceLabel = (value) => {
+        if (!value)
+            return l.noRepeat;
+        const option = recurrenceOptions.find(opt => opt.value === value);
+        return option ? option.label : value;
+    };
     // Obtener título del modal
     const dialogTitle = React.useMemo(() => {
         if (isEvent) {
@@ -10070,13 +10132,20 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
         const updated = currentContacts.filter(c => c.id !== contactId);
         handleFieldChange('linkedContacts', updated);
     };
-    // Handler para búsqueda de contactos con debounce
-    const handleContactSearchChange = React.useCallback((query) => {
-        setContactSearch(query);
+    // Handler para buscar contactos con debounce
+    const handleContactSearchDebounced = React.useCallback((query) => {
+        setContactSearchValue(query);
+        contactSearchRef.current = query;
         if (debounceTimerRef.current) {
             clearTimeout(debounceTimerRef.current);
         }
-        if (onSearchContacts && query.length >= 2) {
+        if (query.length < 2) {
+            setSearchResults([]);
+            setIsSearching(false);
+            return;
+        }
+        if (onSearchContacts) {
+            setIsSearching(true);
             debounceTimerRef.current = setTimeout(async () => {
                 try {
                     const results = await onSearchContacts(query);
@@ -10086,23 +10155,23 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
                     console.error('Error searching contacts:', error);
                     setSearchResults([]);
                 }
+                finally {
+                    setIsSearching(false);
+                }
             }, searchDebounceMs);
         }
-        else if (query.length < 2) {
-            setSearchResults([]);
-        }
     }, [onSearchContacts, searchDebounceMs]);
     // Contactos filtrados
     const filteredContacts = React.useMemo(() => {
         if (onSearchContacts) {
             return searchResults;
         }
-        if (!contactSearch)
+        const search = contactSearchValue.toLowerCase();
+        if (!search)
             return [];
-        const search = contactSearch.toLowerCase();
         return contacts.filter(contact => contact.name.toLowerCase().includes(search) ||
             contact.email?.toLowerCase().includes(search));
-    }, [onSearchContacts, searchResults, contacts, contactSearch]);
+    }, [onSearchContacts, searchResults, contacts, contactSearchValue]);
     // Calcular duración para eventos
     const duration = React.useMemo(() => {
         if (!isEvent || !localEventData.startDate || !localEventData.endDate)
@@ -10116,12 +10185,19 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
         const minutes = diff % 60;
         return minutes > 0 ? `${hours}h ${minutes}min` : `${hours}h`;
     }, [isEvent, localEventData.startDate, localEventData.endDate]);
+    // Helper para renderizar valores en modo view
+    const renderViewValue = (value) => {
+        if (value === null || value === undefined || value === '') {
+            return jsxRuntimeExports.jsx(material.Typography, { color: "text.secondary", children: "-" });
+        }
+        return jsxRuntimeExports.jsx(material.Typography, { children: value });
+    };
     // ============================================
     // COMPONENTES INTERNOS
     // ============================================
     // Componente: Type Tabs
     const TypeTabs = () => {
-        if (!showTypeTabs || currentData?.title)
+        if (!showTypeTabs)
             return null;
         return (jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [jsxRuntimeExports.jsx(material.Button, { variant: isEvent ? 'contained' : 'text', color: "secondary", size: "small", disableElevation: true, onClick: () => handleTypeChange('event'), sx: {
                         textTransform: 'none',
@@ -10139,8 +10215,6 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
                         fontWeight: 500,
                     }, children: l.taskTab })] }));
     };
-    // Componente: Input Container con label
-    const InputContainer = ({ title, children }) => (jsxRuntimeExports.jsxs(material.Box, { children: [jsxRuntimeExports.jsx(material.Box, { sx: { mb: 1, color: 'text.secondary', fontSize: '0.875rem', userSelect: 'none' }, children: title }), children] }));
     // Componente: Date Time Picker Section
     const DateTimeSection = () => {
         if (!config.showDateTime)
@@ -10149,6 +10223,19 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
         const startDateDayjs = localEventData.startDate ? defaultDayjs(moment(localEventData.startDate).toISOString()) : null;
         const endDateDayjs = localEventData.endDate ? defaultDayjs(moment(localEventData.endDate).toISOString()) : null;
         const dueDateDayjs = localTaskData.dueDate ? defaultDayjs(moment(localTaskData.dueDate).toISOString()) : null;
+        // Si estamos en modo view, mostrar solo info formateada
+        if (isViewMode) {
+            return (jsxRuntimeExports.jsx(material.Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 1.5,
+                    p: 2,
+                    borderRadius: 1,
+                    bgcolor: theme.palette.mode === 'dark'
+                        ? 'rgba(255, 255, 255, 0.05)'
+                        : 'rgba(0, 0, 0, 0.02)',
+                }, children: jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', gap: 1.5, alignItems: 'flex-start' }, children: [jsxRuntimeExports.jsx(iconsMaterial.AccessTime, { sx: { mt: 0.5, color: 'text.secondary', fontSize: '1.25rem' } }), jsxRuntimeExports.jsxs(material.Box, { sx: { flex: 1 }, children: [isEvent ? (jsxRuntimeExports.jsx(material.Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: localEventData.startDate ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(material.Typography, { children: moment(localEventData.startDate).format('DD/MM/YYYY') }), !localEventData.allDay && (jsxRuntimeExports.jsxs(material.Typography, { children: [moment(localEventData.startDate).format('HH:mm'), " \u2013 ", moment(localEventData.endDate).format('HH:mm'), duration && jsxRuntimeExports.jsxs(material.Typography, { component: "span", variant: "caption", color: "text.secondary", children: [" (", duration, ")"] })] })), localEventData.allDay && (jsxRuntimeExports.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: l.allDay }))] })) : (jsxRuntimeExports.jsx(material.Typography, { color: "text.secondary", children: "-" })) })) : (jsxRuntimeExports.jsx(material.Box, { children: localTaskData.dueDate ? (jsxRuntimeExports.jsx(material.Typography, { children: moment(localTaskData.dueDate).format('DD/MM/YYYY HH:mm') })) : (jsxRuntimeExports.jsx(material.Typography, { color: "text.secondary", children: "-" })) })), isEvent && localEventData.recurrence && config.showRecurrence && (jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mt: 1 }, children: [jsxRuntimeExports.jsx(iconsMaterial.Repeat, { fontSize: "small", color: "action" }), jsxRuntimeExports.jsx(material.Typography, { variant: "body2", children: getRecurrenceLabel(localEventData.recurrence) })] }))] })] }) }));
+        }
         return (jsxRuntimeExports.jsxs(material.Box, { sx: {
                 display: 'flex',
                 flexDirection: 'column',
@@ -10167,7 +10254,7 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
                                                         handleFieldChange('endDate', moment(newStart).add(1, 'hour'));
                                                     }
                                                 }
-                                            }, disabled: isViewMode, slotProps: {
+                                            }, slotProps: {
                                                 textField: {
                                                     size: 'small',
                                                     fullWidth: true,
@@ -10180,14 +10267,14 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
                                                         },
                                                     },
                                                 },
-                                            } }), jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', gap: 1, alignItems: 'center' }, children: [jsxRuntimeExports.jsx(xDatePickersPro.TimePicker, { label: l.startTime, value: startDateDayjs, onChange: (newTime) => {
+                                            } }), jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', gap: 1, alignItems: 'baseline', marginTop: '15px' }, children: [jsxRuntimeExports.jsx(xDatePickersPro.TimePicker, { label: l.startTime, value: startDateDayjs, onChange: (newTime) => {
                                                         if (newTime) {
                                                             const newStart = moment(localEventData.startDate)
                                                                 .hours(newTime.hour())
                                                                 .minutes(newTime.minute());
                                                             handleFieldChange('startDate', newStart);
                                                         }
-                                                    }, disabled: isViewMode || localEventData.allDay, ampm: false, slotProps: {
+                                                    }, disabled: localEventData.allDay, ampm: false, slotProps: {
                                                         textField: {
                                                             size: 'small',
                                                         },
@@ -10206,7 +10293,7 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
                                                                         .minutes(newTime.minute());
                                                                     handleFieldChange('endDate', newEnd);
                                                                 }
-                                                            }, disabled: isViewMode || localEventData.allDay, ampm: false, slotProps: {
+                                                            }, disabled: localEventData.allDay, ampm: false, slotProps: {
                                                                 textField: {
                                                                     size: 'small',
                                                                     fullWidth: true,
@@ -10227,7 +10314,7 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
                                                         .date(newDate.date());
                                                     handleFieldChange('dueDate', merged);
                                                 }
-                                            }, disabled: isViewMode, slotProps: {
+                                            }, slotProps: {
                                                 textField: {
                                                     size: 'small',
                                                 },
@@ -10246,7 +10333,7 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
                                                         .minutes(newTime.minute());
                                                     handleFieldChange('dueDate', merged);
                                                 }
-                                            }, disabled: isViewMode, ampm: false, slotProps: {
+                                            }, ampm: false, slotProps: {
                                                 textField: {
                                                     size: 'small',
                                                 },
@@ -10258,14 +10345,14 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
                                                         },
                                                     },
                                                 },
-                                            }, sx: { flex: 1 } })] })) }) })] }), isEvent && (config.showAllDay || config.showRecurrence) && (jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', pl: 5 }, children: [config.showAllDay && (jsxRuntimeExports.jsx(material.FormControlLabel, { control: jsxRuntimeExports.jsx(material.Checkbox, { checked: localEventData.allDay || false, onChange: (e) => handleFieldChange('allDay', e.target.checked), disabled: isViewMode, color: "secondary" }), label: l.allDay })), config.showRecurrence && (jsxRuntimeExports.jsxs(material.Box, { sx: { flex: 1, display: 'flex', alignItems: 'center', gap: 1 }, children: [jsxRuntimeExports.jsx(iconsMaterial.Repeat, { fontSize: "small" }), jsxRuntimeExports.jsx(material.FormControl, { fullWidth: true, size: "small", children: jsxRuntimeExports.jsxs(material.Select, { value: localEventData.recurrence || '', onChange: (e) => handleFieldChange('recurrence', e.target.value), disabled: isViewMode, displayEmpty: true, MenuProps: {
+                                            }, sx: { flex: 1 } })] })) }) })] }), isEvent && (config.showAllDay || config.showRecurrence) && (jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', pl: 5 }, children: [config.showAllDay && (jsxRuntimeExports.jsx(material.FormControlLabel, { control: jsxRuntimeExports.jsx(material.Checkbox, { checked: localEventData.allDay || false, onChange: (e) => handleFieldChange('allDay', e.target.checked), color: "secondary" }), label: l.allDay })), config.showRecurrence && (jsxRuntimeExports.jsxs(material.Box, { sx: { flex: 1, display: 'flex', alignItems: 'center', gap: 1 }, children: [jsxRuntimeExports.jsx(iconsMaterial.Repeat, { fontSize: "small" }), jsxRuntimeExports.jsx(material.FormControl, { fullWidth: true, size: "small", children: jsxRuntimeExports.jsx(material.Select, { value: localEventData.recurrence || '', onChange: (e) => handleFieldChange('recurrence', e.target.value), displayEmpty: true, MenuProps: {
                                             PaperProps: {
                                                 sx: {
                                                     //@ts-ignore
                                                     backgroundColor: theme.palette.background.panel,
                                                 },
                                             },
-                                        }, children: [jsxRuntimeExports.jsx(material.MenuItem, { value: "", children: "No repetir" }), jsxRuntimeExports.jsx(material.MenuItem, { value: "DAILY", children: "Diario" }), jsxRuntimeExports.jsx(material.MenuItem, { value: "WEEKLY", children: "Semanal" }), jsxRuntimeExports.jsx(material.MenuItem, { value: "MONTHLY", children: "Mensual" }), jsxRuntimeExports.jsx(material.MenuItem, { value: "YEARLY", children: "Anual" })] }) })] }))] }))] }));
+                                        }, children: recurrenceOptions.map((option) => (jsxRuntimeExports.jsx(material.MenuItem, { value: option.value, children: option.label }, option.value))) }) })] }))] }))] }));
     };
     return (jsxRuntimeExports.jsxs(material.Dialog, { sx: {
             '& .MuiDialog-paper': {
@@ -10287,7 +10374,8 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
                                     '& .MuiInput-underline:before': { borderBottomColor: 'divider' },
                                     '& .MuiInput-underline:hover:before': { borderBottomColor: 'text.secondary' },
                                     '& .MuiInput-underline:after': { borderBottomWidth: 2 },
-                                } })), jsxRuntimeExports.jsx(TypeTabs, {})] })), !isCreateMode && config.showTitle && (jsxRuntimeExports.jsx(InputContainer, { title: l.title, children: jsxRuntimeExports.jsx(material.TextField, { fullWidth: true, size: "small", value: currentData?.title || '', onChange: (e) => handleFieldChange('title', e.target.value), disabled: isViewMode, error: !!validationErrors.title, helperText: validationErrors.title }) })), config.showDescription && (jsxRuntimeExports.jsx(InputContainer, { title: l.description, children: jsxRuntimeExports.jsx(material.TextField, { fullWidth: true, multiline: true, rows: 3, size: "small", value: currentData?.description || '', onChange: (e) => handleFieldChange('description', e.target.value), disabled: isViewMode }) })), config.showCalendar && (jsxRuntimeExports.jsx(InputContainer, { title: l.calendar, children: jsxRuntimeExports.jsx(material.Autocomplete, { fullWidth: true, size: "small", options: calendars, getOptionLabel: (option) => option.title || option.name || '', value: calendars.find(cal => cal.id === currentData?.calendarId) || null, onChange: (_, newValue) => {
+                                } })), jsxRuntimeExports.jsx(TypeTabs, {})] })), !isCreateMode && config.showTitle && (jsxRuntimeExports.jsx(InputContainer, { title: l.title, children: isViewMode ? (renderViewValue(currentData?.title)) : (jsxRuntimeExports.jsx(material.TextField, { fullWidth: true, size: "small", value: currentData?.title || '', onChange: (e) => handleFieldChange('title', e.target.value), error: !!validationErrors.title, helperText: validationErrors.title })) })), config.showDescription && (jsxRuntimeExports.jsx(InputContainer, { title: l.description, children: isViewMode ? (renderViewValue(currentData?.description)) : (jsxRuntimeExports.jsx(material.TextField, { fullWidth: true, multiline: true, rows: 3, size: "small", value: currentData?.description || '', onChange: (e) => handleFieldChange('description', e.target.value) })) })), config.showCalendar && (jsxRuntimeExports.jsx(InputContainer, { title: l.calendar, children: isViewMode ? (renderViewValue(calendars.find(cal => cal.id === currentData?.calendarId)?.title ||
+                            calendars.find(cal => cal.id === currentData?.calendarId)?.name)) : (jsxRuntimeExports.jsx(material.Autocomplete, { fullWidth: true, size: "small", options: calendars, getOptionLabel: (option) => option.title || option.name || '', value: calendars.find(cal => cal.id === currentData?.calendarId) || null, onChange: (_, newValue) => {
                                 const previousCalendar = calendars.find(cal => cal.id === currentData?.calendarId);
                                 const currentColor = localEventData.color;
                                 handleFieldChange('calendarId', newValue?.id);
@@ -10300,20 +10388,26 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
                                         handleFieldChange('color', newValue.color);
                                     }
                                 }
-                            }, disabled: isViewMode, slotProps: {
+                            }, slotProps: {
                                 paper: {
                                     sx: {
                                         //@ts-ignore
                                         backgroundColor: theme.palette.background.panel,
                                     },
                                 },
-                            }, renderInput: (params) => (jsxRuntimeExports.jsx(material.TextField, { ...params, placeholder: l.calendarPlaceholder })) }) })), jsxRuntimeExports.jsx(DateTimeSection, {}), isEvent && config.showColor && (jsxRuntimeExports.jsx(InputContainer, { title: l.color, children: jsxRuntimeExports.jsx("input", { type: "color", value: localEventData.color || '#1976d2', onChange: (e) => handleFieldChange('color', e.target.value), disabled: isViewMode, style: {
+                            }, renderInput: (params) => (jsxRuntimeExports.jsx(material.TextField, { ...params, placeholder: l.calendarPlaceholder })) })) })), jsxRuntimeExports.jsx(DateTimeSection, {}), isEvent && config.showColor && (jsxRuntimeExports.jsx(InputContainer, { title: l.color, children: isViewMode ? (jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [jsxRuntimeExports.jsx(material.Box, { sx: {
+                                        width: '24px',
+                                        height: '24px',
+                                        borderRadius: '4px',
+                                        backgroundColor: localEventData.color || '#1976d2',
+                                        border: '1px solid rgba(0, 0, 0, 0.23)',
+                                    } }), jsxRuntimeExports.jsx(material.Typography, { children: localEventData.color || '#1976d2' })] })) : (jsxRuntimeExports.jsx("input", { type: "color", value: localEventData.color || '#1976d2', onChange: (e) => handleFieldChange('color', e.target.value), style: {
                                 width: '60px',
                                 height: '40px',
                                 border: '1px solid rgba(0, 0, 0, 0.23)',
                                 borderRadius: '4px',
-                                cursor: isViewMode ? 'not-allowed' : 'pointer',
-                            } }) })), config.showNotifications && (jsxRuntimeExports.jsxs(material.Box, { children: [jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }, children: [jsxRuntimeExports.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: l.notifications }), !isViewMode && (jsxRuntimeExports.jsx(material.Button, { size: "small", variant: "outlined", color: "secondary", startIcon: jsxRuntimeExports.jsx(iconsMaterial.Add, {}), onClick: handleAddNotification, children: l.addNotification }))] }), jsxRuntimeExports.jsx(material.Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1.5 }, children: (currentData?.notifications || []).map((notification, index) => (jsxRuntimeExports.jsxs(material.Box, { sx: {
+                                cursor: 'pointer',
+                            } })) })), config.showNotifications && (jsxRuntimeExports.jsxs(material.Box, { children: [jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }, children: [jsxRuntimeExports.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: l.notifications }), !isViewMode && (jsxRuntimeExports.jsx(material.Button, { size: "small", variant: "outlined", color: "secondary", startIcon: jsxRuntimeExports.jsx(iconsMaterial.Add, {}), onClick: handleAddNotification, children: l.addNotification }))] }), (currentData?.notifications || []).length === 0 && isViewMode ? (jsxRuntimeExports.jsx(material.Typography, { color: "text.secondary", children: "-" })) : (jsxRuntimeExports.jsx(material.Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1.5 }, children: (currentData?.notifications || []).map((notification, index) => (jsxRuntimeExports.jsx(material.Box, { sx: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         gap: 1,
@@ -10322,33 +10416,19 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
                                         bgcolor: theme.palette.mode === 'dark'
                                             ? 'rgba(255, 255, 255, 0.05)'
                                             : 'rgba(0, 0, 0, 0.02)',
-                                    }, children: [jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }, children: [jsxRuntimeExports.jsx(material.Typography, { variant: "body2", children: "Enviar recordatorio" }), jsxRuntimeExports.jsx(material.TextField, { type: "number", size: "small", value: notification.value, onChange: (e) => {
-                                                        const updated = [...(currentData?.notifications || [])];
-                                                        updated[index] = { ...notification, value: parseInt(e.target.value) || 0 };
-                                                        handleFieldChange('notifications', updated);
-                                                    }, disabled: isViewMode, sx: { width: '70px' }, inputProps: { min: 0 } }), jsxRuntimeExports.jsx(material.FormControl, { size: "small", sx: { minWidth: '100px' }, children: jsxRuntimeExports.jsxs(material.Select, { value: notification.type, onChange: (e) => {
-                                                            const updated = [...(currentData?.notifications || [])];
-                                                            updated[index] = { ...notification, type: e.target.value };
-                                                            handleFieldChange('notifications', updated);
-                                                        }, disabled: isViewMode, children: [jsxRuntimeExports.jsx(material.MenuItem, { value: "minutes", children: "minuto/s" }), jsxRuntimeExports.jsx(material.MenuItem, { value: "hours", children: "hora/s" }), jsxRuntimeExports.jsx(material.MenuItem, { value: "days", children: "d\u00EDa/s" })] }) }), jsxRuntimeExports.jsx(material.Typography, { variant: "body2", children: "antes." })] }), jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [jsxRuntimeExports.jsx(material.FormControlLabel, { control: jsxRuntimeExports.jsx(material.Checkbox, { checked: notification.sendToContact || false, onChange: (e) => {
+                                    }, children: isViewMode ? (jsxRuntimeExports.jsxs(material.Typography, { variant: "body2", children: ["Enviar recordatorio ", notification.value, " ", notification.type === 'minutes' ? 'minuto/s' : notification.type === 'hours' ? 'hora/s' : 'd\u00eda/s', " antes", notification.sendToContact && ' a contacto externo'] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }, children: [jsxRuntimeExports.jsx(material.Typography, { variant: "body2", children: "Enviar recordatorio" }), jsxRuntimeExports.jsx(material.TextField, { type: "number", size: "small", value: notification.value, onChange: (e) => {
                                                             const updated = [...(currentData?.notifications || [])];
-                                                            updated[index] = { ...notification, sendToContact: e.target.checked };
+                                                            updated[index] = { ...notification, value: parseInt(e.target.value) || 0 };
                                                             handleFieldChange('notifications', updated);
-                                                        }, disabled: isViewMode, color: "secondary" }), label: "Enviar recordatorio a contacto externo" }), !isViewMode && (jsxRuntimeExports.jsx(material.IconButton, { size: "small", onClick: () => handleRemoveNotification(index), sx: { color: 'text.disabled' }, children: jsxRuntimeExports.jsx(iconsMaterial.Delete, {}) }))] })] }, index))) })] })), config.showLinkedContacts && (jsxRuntimeExports.jsxs(InputContainer, { title: l.linkedContacts, children: [!isViewMode && (jsxRuntimeExports.jsxs(material.Box, { sx: { position: 'relative' }, children: [jsxRuntimeExports.jsx(material.TextField, { fullWidth: true, size: "small", placeholder: l.searchContacts, value: contactSearch, onChange: (e) => handleContactSearchChange(e.target.value), InputProps: {
-                                            startAdornment: jsxRuntimeExports.jsx(iconsMaterial.Search, { fontSize: "small", sx: { mr: 1, color: 'text.secondary' } }),
-                                        } }), isSearchingContacts && (jsxRuntimeExports.jsx(material.Box, { sx: {
-                                            position: 'absolute',
-                                            bottom: 0,
-                                            left: 0,
-                                            right: 0,
-                                            height: 2,
-                                            bgcolor: 'primary.main',
-                                            animation: 'progress 1s infinite',
-                                            '@keyframes progress': {
-                                                '0%': { transform: 'translateX(-100%)' },
-                                                '100%': { transform: 'translateX(100%)' },
-                                            },
-                                        } }))] })), jsxRuntimeExports.jsx(material.Box, { sx: { mt: 1, display: 'flex', flexWrap: 'wrap', gap: 1 }, children: (currentData?.linkedContacts || []).map((contact) => (jsxRuntimeExports.jsxs(material.Box, { sx: {
+                                                        }, sx: { width: '70px' }, inputProps: { min: 0 } }), jsxRuntimeExports.jsx(material.FormControl, { size: "small", sx: { minWidth: '100px' }, children: jsxRuntimeExports.jsxs(material.Select, { value: notification.type, onChange: (e) => {
+                                                                const updated = [...(currentData?.notifications || [])];
+                                                                updated[index] = { ...notification, type: e.target.value };
+                                                                handleFieldChange('notifications', updated);
+                                                            }, children: [jsxRuntimeExports.jsx(material.MenuItem, { value: "minutes", children: "minuto/s" }), jsxRuntimeExports.jsx(material.MenuItem, { value: "hours", children: "hora/s" }), jsxRuntimeExports.jsx(material.MenuItem, { value: "days", children: "d\\u00eda/s" })] }) }), jsxRuntimeExports.jsx(material.Typography, { variant: "body2", children: "antes." })] }), jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [jsxRuntimeExports.jsx(material.FormControlLabel, { control: jsxRuntimeExports.jsx(material.Checkbox, { checked: notification.sendToContact || false, onChange: (e) => {
+                                                                const updated = [...(currentData?.notifications || [])];
+                                                                updated[index] = { ...notification, sendToContact: e.target.checked };
+                                                                handleFieldChange('notifications', updated);
+                                                            }, color: "secondary" }), label: "Enviar recordatorio a contacto externo" }), jsxRuntimeExports.jsx(material.IconButton, { size: "small", onClick: () => handleRemoveNotification(index), sx: { color: 'text.disabled' }, children: jsxRuntimeExports.jsx(iconsMaterial.Delete, {}) })] })] })) }, index))) }))] })), config.showLinkedContacts && (jsxRuntimeExports.jsxs(InputContainer, { title: l.linkedContacts, children: [!isViewMode && (jsxRuntimeExports.jsx(ContactSearchInput, { onChange: handleContactSearchDebounced, placeholder: l.searchContacts, isSearching: isSearching || isSearchingContacts, value: contactSearchValue })), (currentData?.linkedContacts || []).length === 0 && isViewMode ? (jsxRuntimeExports.jsx(material.Typography, { color: "text.secondary", children: "-" })) : (jsxRuntimeExports.jsx(material.Box, { sx: { mt: 1, display: 'flex', flexWrap: 'wrap', gap: 1 }, children: (currentData?.linkedContacts || []).map((contact) => (jsxRuntimeExports.jsxs(material.Box, { sx: {
                                         display: 'inline-flex',
                                         alignItems: 'center',
                                         gap: 0.5,
@@ -10356,24 +10436,32 @@ const ModalEvents = ({ open, onClose, mode, type: initialType, showTypeTabs = fa
                                         py: 0.5,
                                         bgcolor: 'action.hover',
                                         borderRadius: 1,
-                                    }, children: [jsxRuntimeExports.jsx(material.Typography, { variant: "body2", children: contact.name }), !isViewMode && (jsxRuntimeExports.jsx(material.IconButton, { size: "small", onClick: () => handleRemoveContact(contact.id), sx: { ml: 0.5 }, children: jsxRuntimeExports.jsx(iconsMaterial.Close, { fontSize: "small" }) }))] }, contact.id))) }), !isViewMode && contactSearch.length >= 2 && (jsxRuntimeExports.jsx(material.Box, { sx: { mt: 1, maxHeight: '200px', overflowY: 'auto', border: '1px solid', borderColor: 'divider', borderRadius: 1 }, children: isSearchingContacts ? (jsxRuntimeExports.jsx(material.Box, { sx: { p: 2, textAlign: 'center' }, children: jsxRuntimeExports.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "Buscando..." }) })) : filteredContacts.length > 0 ? (filteredContacts.map((contact) => (jsxRuntimeExports.jsxs(material.Box, { sx: {
-                                        p: 1,
-                                        cursor: 'pointer',
-                                        '&:hover': { bgcolor: 'action.hover' },
-                                    }, onClick: () => {
+                                    }, children: [jsxRuntimeExports.jsx(material.Typography, { variant: "body2", children: contact.name }), !isViewMode && (jsxRuntimeExports.jsx(material.IconButton, { size: "small", onClick: () => handleRemoveContact(contact.id), sx: { ml: 0.5 }, children: jsxRuntimeExports.jsx(iconsMaterial.Close, { fontSize: "small" }) }))] }, contact.id))) })), !isViewMode && contactSearchValue.length >= 2 && (jsxRuntimeExports.jsx(material.List, { sx: {
+                                    mt: 1,
+                                    maxHeight: '200px',
+                                    overflow: 'auto',
+                                    border: '1px solid',
+                                    borderColor: 'divider',
+                                    borderRadius: 1,
+                                    //@ts-ignore
+                                    backgroundColor: theme.palette.background.panel,
+                                    backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12))',
+                                    p: 0,
+                                }, children: (isSearching || isSearchingContacts) ? (jsxRuntimeExports.jsx(material.Box, { sx: { p: 2, textAlign: 'center' }, children: jsxRuntimeExports.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "Buscando..." }) })) : filteredContacts.length > 0 ? (filteredContacts.map((contact) => (jsxRuntimeExports.jsxs(material.ListItemButton, { onClick: () => {
                                         handleAddContact(contact);
-                                        setContactSearch('');
+                                        setContactSearchValue('');
+                                        contactSearchRef.current = '';
                                         setSearchResults([]);
-                                    }, children: [jsxRuntimeExports.jsx(material.Typography, { variant: "body2", children: contact.name }), contact.email && (jsxRuntimeExports.jsx(material.Typography, { variant: "caption", color: "text.secondary", children: contact.email }))] }, contact.id)))) : (jsxRuntimeExports.jsx(material.Box, { sx: { p: 2, textAlign: 'center' }, children: jsxRuntimeExports.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "No se encontraron contactos" }) })) }))] })), isEvent && config.showLocation && (slots.location ? slots.location({
+                                    }, children: [jsxRuntimeExports.jsx(material.ListItemIcon, { children: jsxRuntimeExports.jsx(iconsMaterial.Person, { sx: { color: 'text.disabled' } }) }), jsxRuntimeExports.jsx(material.ListItemText, { primary: contact.name, secondary: contact.email })] }, contact.id)))) : (jsxRuntimeExports.jsx(material.Box, { sx: { p: 2, textAlign: 'center' }, children: jsxRuntimeExports.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "No se encontraron contactos" }) })) }))] })), isEvent && config.showLocation && (slots.location ? slots.location({
                         disabled: isViewMode,
                         mode,
                         type: currentType,
                         value: localEventData.location || '',
                         onChange: (location) => handleFieldChange('location', location),
                         placeholder: l.locationPlaceholder,
-                    }) : (jsxRuntimeExports.jsx(InputContainer, { title: l.location, children: jsxRuntimeExports.jsx(material.TextField, { fullWidth: true, size: "small", placeholder: l.locationPlaceholder, value: localEventData.location || '', onChange: (e) => handleFieldChange('location', e.target.value), disabled: isViewMode, InputProps: {
+                    }) : (jsxRuntimeExports.jsx(InputContainer, { title: l.location, children: isViewMode ? (jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [jsxRuntimeExports.jsx(iconsMaterial.Place, { fontSize: "small", sx: { color: 'text.secondary' } }), renderViewValue(localEventData.location)] })) : (jsxRuntimeExports.jsx(material.TextField, { fullWidth: true, size: "small", placeholder: l.locationPlaceholder, value: localEventData.location || '', onChange: (e) => handleFieldChange('location', e.target.value), InputProps: {
                                 startAdornment: jsxRuntimeExports.jsx(iconsMaterial.Place, { fontSize: "small", sx: { mr: 1, color: 'text.secondary' } }),
-                            } }) })))] }), jsxRuntimeExports.jsxs(material.DialogActions, { sx: { px: 3, pb: 2 }, children: [jsxRuntimeExports.jsx(material.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onClose, disabled: isSaving || isDeleting, children: l.cancel }), !isViewMode && (jsxRuntimeExports.jsx(material.Button, { variant: "contained", color: "primary", size: "small", onClick: handleSave, disabled: isSaving || isDeleting, children: isSaving ? 'Guardando...' : l.save }))] })] }));
+                            } })) })))] }), jsxRuntimeExports.jsxs(material.DialogActions, { sx: { px: 3, pb: 2 }, children: [jsxRuntimeExports.jsx(material.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onClose, disabled: isSaving || isDeleting, children: l.cancel }), !isViewMode && (jsxRuntimeExports.jsx(material.Button, { variant: "contained", color: "primary", size: "small", onClick: handleSave, disabled: isSaving || isDeleting, children: isSaving ? 'Guardando...' : l.save }))] })] }));
 };
 
 exports.ContactInfoPopup = ContactInfoPopup;