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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.59",
+  "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/AtomicTouchable.tsx

@@ -32,7 +32,7 @@ export interface AtomicTouchableProps {
   accessible?: boolean;
 }
 
-export const AtomicTouchable: React.FC<AtomicTouchableProps> = ({
+const AtomicTouchableComponent: React.FC<AtomicTouchableProps> = ({
   children,
   onPress,
   onLongPress,
@@ -75,3 +75,6 @@ export const AtomicTouchable: React.FC<AtomicTouchableProps> = ({
     </TouchableOpacity>
   );
 };
+
+export const AtomicTouchable = React.memo(AtomicTouchableComponent);
+AtomicTouchableComponent.displayName = 'AtomicTouchable';

package/src/atoms/datepicker/components/DatePickerButton.tsx

@@ -5,7 +5,7 @@
  * Extracted from AtomicDatePicker for better separation of concerns.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   View,
   TouchableOpacity,
@@ -35,7 +35,7 @@ export const DatePickerButton: React.FC<DatePickerButtonProps> = ({
   const tokens = useAppDesignTokens();
   const calendarIcon = useIconName('calendar');
 
-  const buttonStyles = StyleSheet.create({
+  const buttonStyles = useMemo(() => StyleSheet.create({
     container: {
       flexDirection: 'row',
       alignItems: 'center',
@@ -75,7 +75,7 @@ export const DatePickerButton: React.FC<DatePickerButtonProps> = ({
       alignItems: 'center',
       gap: tokens.spacing.xs,
     },
-  });
+  }), [tokens]);
 
   const containerStyle = [
     buttonStyles.container,

package/src/atoms/input/components/InputIcon.tsx

@@ -23,7 +23,7 @@ export const InputIcon: React.FC<InputIconProps> = ({
 
   if (onPress) {
     return (
-      <Pressable onPress={onPress} style={style} testID={testID}>
+      <Pressable onPress={onPress} style={style} testID={testID} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
         <AtomicIcon name={name} customSize={size} customColor={color} />
       </Pressable>
     );

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/atoms/picker/components/PickerModal.tsx

@@ -2,7 +2,7 @@
  * PickerModal - Selection modal for AtomicPicker
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import { View, Modal, FlatList, TextInput, TouchableOpacity } from 'react-native';
 import { useSafeAreaInsets } from '../../../safe-area';
 import { useAppDesignTokens } from '../../../theme';
@@ -71,9 +71,9 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
     emptyText: getEmptyStateTextStyles(tokens),
   };
 
-  const isSelected = (value: string) => selectedValues?.includes(value) ?? false;
+  const isSelected = useCallback((value: string) => selectedValues?.includes(value) ?? false, [selectedValues]);
 
-  const renderOption = ({ item }: { item: PickerOption }) => {
+  const renderOption = useCallback(({ item }: { item: PickerOption }) => {
     const selected = isSelected(item.value);
     const disabled = item.disabled || false;
 
@@ -81,6 +81,9 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
       <TouchableOpacity
         onPress={() => !disabled && onSelect(item.value)}
         disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel={item.label}
+        accessibilityState={{ disabled, selected }}
         testID={item.testID || `${testID}-option-${item.value}`}
         style={getOptionContainerStyles(tokens, selected, disabled)}
       >
@@ -92,7 +95,7 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
         {selected && <AtomicIcon name={icons.checkCircle} size="md" color="primary" />}
       </TouchableOpacity>
     );
-  };
+  }, [isSelected, onSelect, tokens, testID]);
 
   return (
     <Modal visible={visible} animationType="none" transparent onRequestClose={onClose} testID={`${testID}-modal`} accessibilityViewIsModal={true}>
@@ -109,12 +112,12 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
             <View style={styles.search}>
               <AtomicIcon name={icons.search} size="sm" color="secondary" />
               <TextInput value={searchQuery} onChangeText={onSearchChange} placeholder={searchPlaceholder} placeholderTextColor={tokens.colors.textSecondary} style={styles.searchInput} testID={`${testID}-search`} />
-              {searchQuery.length > 0 && <TouchableOpacity onPress={() => onSearchChange('')}><AtomicIcon name={icons.close} size="sm" color="secondary" /></TouchableOpacity>}
+              {searchQuery.length > 0 && <TouchableOpacity onPress={() => onSearchChange('')} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} accessibilityRole="button" accessibilityLabel="Clear search"><AtomicIcon name={icons.close} size="sm" color="secondary" /></TouchableOpacity>}
             </View>
           )}
 
           {filteredOptions.length > 0 ? (
-            <FlatList data={filteredOptions} keyExtractor={(item: PickerOption) => item.value} renderItem={renderOption} showsVerticalScrollIndicator testID={`${testID}-list`} />
+            <FlatList data={filteredOptions} keyExtractor={(item: PickerOption) => item.value} renderItem={renderOption} showsVerticalScrollIndicator keyboardShouldPersistTaps="handled" testID={`${testID}-list`} />
           ) : (
             <View style={styles.empty}>
               <AtomicIcon name={icons.info} size="xl" color="secondary" />

package/src/infinite-scroll/presentation/components/infinite-scroll-list.tsx

@@ -103,6 +103,7 @@ function InfiniteScrollListComponent<T>({
       onEndReachedThreshold={calculateEndReachedThreshold(config.threshold)}
       onRefresh={refresh}
       refreshing={state.isRefreshing}
+      keyboardShouldPersistTaps="handled"
       ListHeaderComponent={ListHeaderComponent}
       ListFooterComponent={
         <>

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/List/List.tsx

@@ -79,6 +79,7 @@ export const List = <T,>({
           : undefined
       }
       showsVerticalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
       {...rest}
     />
   );

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) => {