@umituz/react-native-design-system 4.25.63 → 4.25.65

package/package.json

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

@@ -54,7 +54,7 @@ export interface AtomicAvatarProps {
 // COMPONENT IMPLEMENTATION
 // =============================================================================
 
-export const AtomicAvatar: React.FC<AtomicAvatarProps> = ({
+export const AtomicAvatar: React.FC<AtomicAvatarProps> = React.memo(({
   source,
   name,
   size = 'md',
@@ -152,5 +152,5 @@ export const AtomicAvatar: React.FC<AtomicAvatarProps> = ({
       )}
     </View>
   );
-};
+});
 

package/src/layouts/Grid/Grid.tsx

@@ -73,23 +73,21 @@ export const Grid: React.FC<GridProps> = ({
     [responsiveGap]
   );
 
+  const itemStyle = useMemo(() => ({
+    flex: columns ? 1 / columns - 0.01 : undefined,
+    minWidth: columns ? `${100 / columns - 1}%` as const : undefined,
+  }), [columns]);
+
   // Convert children to array for mapping
   const childArray = React.Children.toArray(children);
 
   return (
     <View style={[styles.container, style]} testID={testID}>
       {childArray.map((child, index) => {
-        // Use child's key if available, otherwise use index
         const key = (child as React.ReactElement).key || `grid-item-${index}`;
 
         return (
-          <View
-            key={key}
-            style={{
-              flex: columns ? 1 / columns - 0.01 : undefined,
-              minWidth: columns ? `${100 / columns - 1}%` : undefined,
-            }}
-          >
+          <View key={key} style={itemStyle}>
             {child}
           </View>
         );

package/src/layouts/ScreenHeader/ScreenHeader.tsx

@@ -97,7 +97,7 @@ const ScreenHeaderTitle: React.FC<{
   title: string;
   tokens: ReturnType<typeof useAppDesignTokens>;
   testID?: string;
-}> = ({ title, tokens, testID }) => (
+}> = React.memo(({ title, tokens, testID }) => (
   <View style={{ flex: 1, alignItems: 'center', paddingHorizontal: tokens.spacing.sm }}>
     <AtomicText
       type="headlineMedium"
@@ -114,15 +114,15 @@ const ScreenHeaderTitle: React.FC<{
       {title}
     </AtomicText>
   </View>
-);
+));
 
 const ScreenHeaderRightAction: React.FC<{
   rightAction?: React.ReactNode;
-}> = ({ rightAction }) => (
+}> = React.memo(({ rightAction }) => (
   <View style={{ width: 40, alignItems: 'flex-start' }}>
     {rightAction || <View style={{ width: 40 }} />}
   </View>
-);
+));
 
 export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
   title,

package/src/molecules/ConfirmationModalContent.tsx

@@ -4,7 +4,7 @@
  * Content component for confirmation modal
  */
 
-import React, { useCallback } from 'react';
+import React, { useMemo } from 'react';
 import { View, ViewStyle, StyleProp } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { ConfirmationModalVariant } from './confirmation-modal/types/';
@@ -27,7 +27,7 @@ const useConfirmButtonStyle = (
   variant: ConfirmationModalVariant,
   tokens: ReturnType<typeof useAppDesignTokens>
 ) => {
-  return useCallback(() => {
+  return useMemo(() => {
     const baseStyle = getButtonStyle();
     const variantStyles: ViewStyle[] = [];
 
@@ -54,7 +54,7 @@ export const ConfirmationModalContent: React.FC<{
 }> = ({ tokens, variant, title, message, confirmText, cancelText, icon, onConfirm, onCancel, style, testID }) => {
   const variantConfig = getVariantConfig(variant as 'default' | 'destructive' | 'warning' | 'success');
   const finalIcon = icon || variantConfig.icon;
-  const getConfirmButtonStyle = useConfirmButtonStyle(variant, tokens);
+  const confirmButtonStyle = useConfirmButtonStyle(variant, tokens);
 
   return (
     <View style={[getModalContainerStyle(tokens), style]}>
@@ -79,7 +79,7 @@ export const ConfirmationModalContent: React.FC<{
         cancelText={cancelText}
         onConfirm={onConfirm}
         onCancel={onCancel}
-        confirmButtonStyle={getConfirmButtonStyle()}
+        confirmButtonStyle={confirmButtonStyle}
         testID={testID}
       />
     </View>

package/src/molecules/ConfirmationModalMain.tsx

@@ -26,7 +26,7 @@ const ConfirmationModalBackdrop: React.FC<{
   showBackdrop: boolean;
   onBackdropPress: () => void;
   testID: string;
-}> = ({ showBackdrop, onBackdropPress, testID }) => {
+}> = React.memo(({ showBackdrop, onBackdropPress, testID }) => {
   if (!showBackdrop) return null;
 
   return (
@@ -37,7 +37,7 @@ const ConfirmationModalBackdrop: React.FC<{
       testID={`${testID}-backdrop`}
     />
   );
-};
+});
 
 export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   visible,

package/src/molecules/avatar/Avatar.tsx

@@ -38,7 +38,7 @@ interface AvatarContentProps {
   imageStyle?: StyleProp<ImageStyle>;
 }
 
-const AvatarContent: React.FC<AvatarContentProps> = ({
+const AvatarContent: React.FC<AvatarContentProps> = React.memo(({
   hasImage,
   hasName,
   uri,
@@ -91,7 +91,7 @@ const AvatarContent: React.FC<AvatarContentProps> = ({
       customColor={tokens.colors.textInverse}
     />
   );
-};
+});
 
 export const Avatar: React.FC<AvatarProps> = ({
   uri,

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

@@ -103,7 +103,12 @@ export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomShe
       <View style={styles.container}>
         <View style={styles.header}>
           <AtomicText type="headlineSmall">{title || 'Filter'}</AtomicText>
-          <TouchableOpacity onPress={() => internalRef.current?.dismiss()}>
+          <TouchableOpacity
+            onPress={() => internalRef.current?.dismiss()}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            accessibilityRole="button"
+            accessibilityLabel="Close filter"
+          >
             <AtomicIcon name={icons.close} size="md" color="textPrimary" />
           </TouchableOpacity>
         </View>

package/src/molecules/calendar/presentation/components/CalendarDayCell.tsx

@@ -22,7 +22,7 @@ interface CalendarDayCellProps {
   testID?: string;
 }
 
-export const CalendarDayCell: React.FC<CalendarDayCellProps> = ({
+export const CalendarDayCell: React.FC<CalendarDayCellProps> = React.memo(({
   day,
   index,
   isSelected,
@@ -98,4 +98,4 @@ export const CalendarDayCell: React.FC<CalendarDayCellProps> = ({
       </View>
     </TouchableOpacity>
   );
-};
+});