@umituz/react-native-design-system 4.25.60 → 4.25.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.60",
+  "version": "4.25.61",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/input/hooks/useInputState.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 
 interface UseInputStateProps {
   value?: string;
@@ -45,7 +45,7 @@ export const useInputState = ({
   const characterCount = localValue.length;
   const isAtMaxLength = maxLength ? characterCount >= maxLength : false;
 
-  return useMemo(() => ({
+  return {
     localValue,
     isFocused,
     isPasswordVisible,
@@ -54,5 +54,5 @@ export const useInputState = ({
     setIsFocused,
     handleTextChange,
     togglePasswordVisibility,
-  }), [localValue, isFocused, isPasswordVisible, characterCount, isAtMaxLength, setIsFocused, handleTextChange, togglePasswordVisibility]);
+  };
 };

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -67,16 +67,22 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
       }
     ]}>
       {header}
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
-        showsVerticalScrollIndicator={!hideScrollIndicator}
-        keyboardShouldPersistTaps="handled"
-        refreshControl={refreshControl}
-        nestedScrollEnabled
-      >
-        {children}
-      </ScrollView>
+      {scrollable ? (
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
+          showsVerticalScrollIndicator={!hideScrollIndicator}
+          keyboardShouldPersistTaps="handled"
+          refreshControl={refreshControl}
+          nestedScrollEnabled
+        >
+          {children}
+        </ScrollView>
+      ) : (
+        <View style={[styles.scrollView, styles.scrollContent, contentContainerStyle]}>
+          {children}
+        </View>
+      )}
       {footer && (
         <View style={{ paddingBottom }}>
           {footer}

package/src/molecules/alerts/AlertContainer.tsx

@@ -2,7 +2,7 @@
  * AlertContainer Component
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from '../../safe-area';
 import { useAppDesignTokens } from '../../theme';
@@ -12,14 +12,14 @@ import { AlertBanner } from './AlertBanner';
 import { AlertModal } from './AlertModal';
 import { Alert, AlertMode } from './AlertTypes';
 
-export const AlertContainer: React.FC = () => {
+const AlertContainerComponent: React.FC = () => {
     const alerts = useAlertStore((state: { alerts: Alert[] }) => state.alerts);
     const insets = useSafeAreaInsets();
     const tokens = useAppDesignTokens();
 
-    const toasts = alerts.filter((a: Alert) => a.mode === AlertMode.TOAST);
-    const banners = alerts.filter((a: Alert) => a.mode === AlertMode.BANNER);
-    const modals = alerts.filter((a: Alert) => a.mode === AlertMode.MODAL);
+    const toasts = useMemo(() => alerts.filter((a: Alert) => a.mode === AlertMode.TOAST), [alerts]);
+    const banners = useMemo(() => alerts.filter((a: Alert) => a.mode === AlertMode.BANNER), [alerts]);
+    const modals = useMemo(() => alerts.filter((a: Alert) => a.mode === AlertMode.MODAL), [alerts]);
 
     return (
         <View style={styles.container} pointerEvents="box-none">
@@ -53,6 +53,9 @@ export const AlertContainer: React.FC = () => {
     );
 };
 
+export const AlertContainer = React.memo(AlertContainerComponent);
+AlertContainerComponent.displayName = 'AlertContainer';
+
 const styles = StyleSheet.create({
     container: {
         ...StyleSheet.absoluteFillObject,

package/src/molecules/alerts/AlertToast.tsx

@@ -86,11 +86,17 @@ export function AlertToast({ alert }: AlertToastProps) {
               <Pressable
                 key={action.id}
                 onPress={async () => {
-                  await action.onPress();
+                  try {
+                    await action.onPress();
+                  } catch (e) {
+                    if (__DEV__) console.error('[AlertToast] action.onPress failed', e);
+                  }
                   if (action.closeOnPress ?? true) {
                     handleDismiss();
                   }
                 }}
+                accessibilityRole="button"
+                accessibilityLabel={action.label}
                 style={[
                   styles.actionButton,
                   {

package/src/molecules/alerts/hooks/useAlertAutoDismiss.ts

@@ -21,5 +21,5 @@ export function useAlertAutoDismiss(
 
     const timer = setTimeout(onDismiss, duration);
     return () => clearTimeout(timer);
-  }, [alert.duration, alert.dismissible, onDismiss]);
+  }, [alert.id, alert.duration, alert.dismissible, onDismiss]);
 }

package/src/molecules/alerts/hooks/useAlertDismissHandler.ts

@@ -15,7 +15,7 @@ export function useAlertDismissHandler(alert: Alert) {
   const handleDismiss = useCallback(() => {
     dismissAlert(alert.id);
     alert.onDismiss?.();
-  }, [alert, dismissAlert]);
+  }, [alert.id, alert.onDismiss, dismissAlert]);
 
   return handleDismiss;
 }

package/src/molecules/bottom-sheet/components/BottomSheet.tsx

@@ -90,7 +90,7 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props,
     content: {
       flex: 1,
     }
-  }), [sheetHeight, backgroundColor, tokens.colors, borderRadius, insets.bottom]);
+  }), [sheetHeight, backgroundColor, tokens.colors.modalOverlay, tokens.colors.surface, tokens.colors.border, borderRadius, insets.bottom]);
 
   return (
     <Modal
@@ -101,9 +101,9 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props,
       statusBarTranslucent
       accessibilityViewIsModal={true}
     >
-      <Pressable style={styles.overlay} onPress={dismiss}>
+      <Pressable style={styles.overlay} onPress={dismiss} accessibilityLabel="Close" accessibilityRole="button">
         <View style={styles.container}>
-          <Pressable onPress={(e) => e.stopPropagation()} style={styles.content}>
+          <Pressable onPress={(e) => e.stopPropagation()} style={styles.content} accessibilityRole="none">
             <View style={styles.handle} />
             {children}
           </Pressable>

package/src/molecules/calendar/infrastructure/stores/useCalendarEvents.ts

@@ -70,8 +70,8 @@ export const useCalendarEvents = create<CalendarEventsStore>()((set, get) => ({
       if (validEvents.length > 0) {
         const hydratedEvents = validEvents.map((event) => ({
           ...event,
-          createdAt: new Date(event.createdAt),
-          updatedAt: new Date(event.updatedAt),
+          createdAt: event.createdAt ? new Date(event.createdAt) : new Date(),
+          updatedAt: event.updatedAt ? new Date(event.updatedAt) : new Date(),
         }));
         set({ events: hydratedEvents, isLoading: false });
       } else {

package/src/offline/infrastructure/events/NetworkEvents.ts

@@ -32,15 +32,21 @@ class NetworkEventEmitter implements NetworkEvents {
   }
 
   emit(event: 'online' | 'offline' | 'change', state: NetworkState): void {
-    this.listeners.get(event)?.forEach((listener) => {
+    const listeners = this.listeners.get(event);
+    if (!listeners) return;
+
+    const failedListeners: NetworkEventListener[] = [];
+    listeners.forEach((listener) => {
       try {
         listener(state);
       } catch (_error) {
+        failedListeners.push(listener);
         if (__DEV__) {
-          console.error('[DesignSystem] PersistentDeviceIdService: Initialization failed', _error);
+          console.error('[DesignSystem] NetworkEventEmitter: listener threw an error', _error);
         }
       }
     });
+    failedListeners.forEach((listener) => listeners.delete(listener));
   }
 
   removeAllListeners(): void {

package/src/storage/presentation/hooks/useStorageState.ts

@@ -5,7 +5,7 @@
  * Combines React state with automatic storage persistence
  */
 
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 import { storageRepository } from '../../infrastructure/repositories/AsyncStorageRepository';
 import { unwrap } from '../../domain/entities/StorageResult';
 import type { StorageKey } from '../../domain/value-objects/StorageKey';
@@ -42,13 +42,6 @@ export const useStorageState = <T>(
     }
   );
 
-  // Sync state with loaded data
-  useEffect(() => {
-    if (data !== undefined && data !== null) {
-      setState(data);
-    }
-  }, [data]);
-
   // Update state and persist to storage
   const updateState = useCallback(
     async (value: T) => {