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

package/package.json

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

@@ -71,7 +71,7 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
         style={styles.scrollView}
         contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
         showsVerticalScrollIndicator={!hideScrollIndicator}
-        keyboardShouldPersistTaps={keyboardAvoiding ? 'handled' : 'never'}
+        keyboardShouldPersistTaps="handled"
         refreshControl={refreshControl}
         nestedScrollEnabled
       >

package/src/molecules/List/List.tsx

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

package/src/molecules/bottom-sheet/components/filter/FilterBottomSheet.tsx

@@ -108,7 +108,7 @@ export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomShe
           </TouchableOpacity>
         </View>
 
-        <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+        <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="handled">
           {categories.map(renderCategory)}
         </ScrollView>
 

package/src/molecules/bottom-sheet/components/filter/FilterSheet.tsx

@@ -57,7 +57,7 @@ export const FilterSheet: React.FC<FilterSheetProps> = ({
             tokens={tokens}
           />
 
-          <ScrollView style={styles.optionsList} showsVerticalScrollIndicator={false}>
+          <ScrollView style={styles.optionsList} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="handled">
             {options.map((option) => (
               <FilterSheetOption
                 key={option.id}

package/src/molecules/filter-group/FilterGroup.tsx

@@ -34,6 +34,7 @@ export function FilterGroup<T = string>({
     <ScrollView
       horizontal
       showsHorizontalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
       style={[styles.container, style]}
       contentContainerStyle={[styles.content, contentContainerStyle]}
     >