react-native-system-ui 0.0.3 → 0.0.4

package/dist/es/components/collapse/Collapse.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Animated, Easing, Text, View } from 'react-native';
 import { Arrow } from 'react-native-system-icon';
 import { Cell } from '../cell';
@@ -72,7 +72,7 @@ export const Collapse = props => {
     }
     onChange?.(buildOutputValue(next, accordion));
   }, [accordion, activeKeys, controlled, disabled, onChange]);
-  const contextValue = useMemo(() => ({
+  const contextValue = {
     activeKeys,
     toggle,
     accordion,
@@ -81,8 +81,8 @@ export const Collapse = props => {
     border,
     disabled,
     tokens
-  }), [accordion, activeKeys, border, disabled, expandIcon, iconPosition, tokens, toggle]);
-  const renderedChildren = useMemo(() => {
+  };
+  const renderedChildren = (() => {
     const items = React.Children.toArray(children);
     return items.map((child, index) => {
       if (! /*#__PURE__*/React.isValidElement(child)) return child;
@@ -95,7 +95,7 @@ export const Collapse = props => {
         index
       });
     });
-  }, [children]);
+  })();
   return /*#__PURE__*/React.createElement(CollapseContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(View, _extends({
@@ -172,10 +172,10 @@ const CollapsePanel = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = tokens;
   const [contentHeight, setContentHeight] = useState(0);
   const animation = useRef(new Animated.Value(isActive ? 1 : 0)).current;
-  const rotate = useMemo(() => animation.interpolate({
+  const rotate = animation.interpolate({
     inputRange: [0, 1],
     outputRange: ['90deg', '-90deg']
-  }), [animation]);
+  });
   useEffect(() => {
     Animated.timing(animation, {
       toValue: isActive ? 1 : 0,
@@ -226,16 +226,13 @@ const CollapsePanel = /*#__PURE__*/React.forwardRef((props, ref) => {
       fill: mergedDisabled ? colors.disabled : colors.arrow
     }));
   }, [colors.arrow, colors.disabled, expandIcon, isActive, mergedDisabled, rotate]);
-  const contentNode = useMemo(() => {
-    if (!isText(children)) return children;
-    return /*#__PURE__*/React.createElement(Text, {
-      style: {
-        color: mergedDisabled ? colors.disabled : colors.description,
-        fontSize: typography.descriptionSize,
-        lineHeight: Math.round(typography.descriptionSize * 1.5)
-      }
-    }, children);
-  }, [children, colors.description, colors.disabled, mergedDisabled, typography.descriptionSize]);
+  const contentNode = !isText(children) ? children : /*#__PURE__*/React.createElement(Text, {
+    style: {
+      color: mergedDisabled ? colors.disabled : colors.description,
+      fontSize: typography.descriptionSize,
+      lineHeight: Math.round(typography.descriptionSize * 1.5)
+    }
+  }, children);
   const showItemBorder = Boolean(panelBorder);
   const showTopBorder = index > 0 && showItemBorder;
   const showHeaderBottomBorder = isActive && showItemBorder;

package/dist/es/components/config-provider/ConfigProvider.js

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
 import { ThemeProvider } from '../../design-system/ThemeProvider';
 import { PortalHost } from '../portal';
 import { LocaleContext } from './LocaleContext';
@@ -8,7 +8,7 @@ const ConfigProviderBase = ({
   children
 }) => {
   const parentLocale = useContext(LocaleContext);
-  const resolvedLocale = useMemo(() => locale ?? parentLocale, [locale, parentLocale]);
+  const resolvedLocale = locale ?? parentLocale;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     value: theme
   }, /*#__PURE__*/React.createElement(LocaleContext.Provider, {

package/dist/es/components/datetime-picker/DatetimePicker.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Picker from '../picker';
 import { Popup } from '../popup/Popup';
 import { useControllableValue } from '../../hooks';
@@ -111,7 +111,7 @@ const DatePicker = props => {
     originColumns,
     columns,
     pickerValue
-  } = useMemo(() => {
+  } = (() => {
     const getBoundary = (boundaryType, date) => {
       const boundaryDate = boundaryType === 'min' ? minDate : maxDate;
       const boundary = {
@@ -212,7 +212,7 @@ const DatePicker = props => {
       columns,
       pickerValue
     };
-  }, [columnsOrder, currentDate, filter, formatter, maxDate, minDate, type]);
+  })();
   const buildDateFromValues = useCallback(values => {
     const getValue = columnType => {
       const index = originColumns.findIndex(column => column.type === columnType);
@@ -292,7 +292,7 @@ const TimePicker = props => {
       setCurrentTime(next);
     }
   }, [formatTime, value]);
-  const [hourValues, minuteValues] = useMemo(() => {
+  const [hourValues, minuteValues] = (() => {
     let hours = times(maxHour - minHour + 1, index => padZero(minHour + index));
     let minutes = times(maxMinute - minMinute + 1, index => padZero(minMinute + index));
     if (filter) {
@@ -300,14 +300,14 @@ const TimePicker = props => {
       minutes = filter('minute', minutes);
     }
     return [hours, minutes];
-  }, [filter, maxHour, maxMinute, minHour, minMinute]);
-  const columns = useMemo(() => [hourValues.map(value => ({
+  })();
+  const columns = [hourValues.map(value => ({
     label: formatter('hour', value),
     value
   })), minuteValues.map(value => ({
     label: formatter('minute', value),
     value
-  }))], [formatter, hourValues, minuteValues]);
+  }))];
   const handleChange = useCallback(values => {
     const nextHour = values[0] ?? hourValues[0];
     const nextMinute = values[1] ?? minuteValues[0];
@@ -317,7 +317,7 @@ const TimePicker = props => {
     onChange?.(next);
   }, [hourValues, minuteValues, onChange]);
   const handleConfirm = useCallback(() => onConfirm?.(timeRef.current), [onConfirm]);
-  const pickerValue = useMemo(() => currentTime.split(':'), [currentTime]);
+  const pickerValue = currentTime.split(':');
   return /*#__PURE__*/React.createElement(Picker, _extends({}, pickerProps, {
     columns: columns,
     interactionMode: interactionMode,

package/dist/es/components/dialog/Dialog.js

@@ -110,8 +110,7 @@ export const Dialog = props => {
     if (!beforeClose) return true;
     try {
       return beforeClose(action);
-    } catch (error) {
-      if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+    } catch {
       return true;
     }
   };
@@ -125,8 +124,7 @@ export const Dialog = props => {
         if (resolved === false) return;
         if (actionSeqRef.current !== seq) return;
         handler?.();
-      }).catch(error => {
-        if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+      }).catch(() => {
         if (actionSeqRef.current !== seq) return;
         handler?.();
       });
@@ -287,7 +285,8 @@ export const Dialog = props => {
   }, rest), closeable ? /*#__PURE__*/React.createElement(Pressable, {
     style: [styles.closeIcon, {
       top: tokens.spacing.paddingTop / 2,
-      right: tokens.spacing.paddingHorizontal / 2
+      right: tokens.spacing.paddingHorizontal / 2,
+      padding: tokens.spacing.closeIconPadding
     }],
     hitSlop: {
       top: 8,
@@ -357,7 +356,6 @@ const styles = StyleSheet.create({
   },
   closeIcon: {
     position: 'absolute',
-    padding: 4,
     zIndex: 1
   }
 });

package/dist/es/components/dialog/tokens.js

@@ -34,7 +34,8 @@ export const createDialogTokens = foundations => {
       titleGap: spacing.sm,
       footerGap: spacing.md,
       roundFooterPadding: spacing.md,
-      roundFooterGap: spacing.sm
+      roundFooterGap: spacing.sm,
+      closeIconPadding: spacing.xs
     },
     sizes: {
       minWidth: 280,

package/dist/es/components/dropdown-menu/DropdownItem.js

@@ -53,7 +53,9 @@ const DropdownItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const panelContent = useMemo(() => {
     if (children) {
       return /*#__PURE__*/React.createElement(View, {
-        style: [styles.customPanel, panelStyle]
+        style: [styles.customPanel, {
+          padding: tokens.spacing.customPanelPadding
+        }, panelStyle]
       }, children);
     }
     if (!options?.length) {
@@ -73,17 +75,21 @@ const DropdownItem = /*#__PURE__*/React.forwardRef((props, ref) => {
         if (isText(activeIcon)) {
           return /*#__PURE__*/React.createElement(Text, {
             style: [styles.indicator, {
-              color
+              color,
+              marginLeft: tokens.spacing.indicatorMarginLeft
             }]
           }, activeIcon);
         }
         return /*#__PURE__*/React.createElement(View, {
-          style: styles.indicator
+          style: [styles.indicator, {
+            marginLeft: tokens.spacing.indicatorMarginLeft
+          }]
         }, activeIcon);
       }
       return /*#__PURE__*/React.createElement(Text, {
         style: [styles.indicator, {
-          color
+          color,
+          marginLeft: tokens.spacing.indicatorMarginLeft
         }]
       }, "\u2713");
     };
@@ -92,7 +98,9 @@ const DropdownItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       if (/*#__PURE__*/React.isValidElement(optionIcon)) return optionIcon;
       if (isText(optionIcon)) {
         return /*#__PURE__*/React.createElement(Text, {
-          style: styles.optionIconText
+          style: [styles.optionIconText, {
+            fontSize: tokens.sizing.optionFontSize
+          }]
         }, optionIcon);
       }
       return optionIcon;
@@ -110,30 +118,38 @@ const DropdownItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     };
     return /*#__PURE__*/React.createElement(View, {
-      style: [styles.optionPanel, panelStyle]
+      style: [styles.optionPanel, {
+        paddingHorizontal: tokens.spacing.panelPaddingHorizontal
+      }, panelStyle]
     }, options.map(option => {
       const active = value === option.value;
       const optionText = getOptionText(option);
       const optionColor = option.disabled ? tokens.colors.disabledText : active ? activeTextColor : tokens.colors.text;
       return /*#__PURE__*/React.createElement(Pressable, {
         key: String(option.value),
-        style: [styles.optionRow, createHairlineBorderBottom('rgba(0,0,0,0.06)')],
+        style: [styles.optionRow, {
+          paddingVertical: tokens.spacing.optionRowPaddingVertical,
+          paddingHorizontal: tokens.spacing.optionRowPaddingHorizontal
+        }, createHairlineBorderBottom('rgba(0,0,0,0.06)')],
         onPress: () => handleSelect(option),
         disabled: option.disabled,
         testID: `rv-dropdown-option-${option.value}`
       }, /*#__PURE__*/React.createElement(View, {
         style: styles.optionLeft
       }, option.icon ? /*#__PURE__*/React.createElement(View, {
-        style: styles.optionIcon
+        style: [styles.optionIcon, {
+          marginRight: tokens.spacing.optionIconMarginRight
+        }]
       }, renderOptionIcon(option.icon)) : null, isText(optionText) ? /*#__PURE__*/React.createElement(Text, {
         style: [styles.optionText, {
-          color: optionColor
+          color: optionColor,
+          fontSize: tokens.sizing.optionFontSize
         }]
       }, optionText) : /*#__PURE__*/React.createElement(View, {
         style: styles.optionTextNode
       }, optionText)), active ? renderActiveIcon() : null);
     }));
-  }, [children, options, panelStyle, tokens, value, activeIcon, activeTextColor, closeMenu, closeOnSelect, menuValue, name, onMenuChange, triggerChange]);
+  }, [activeIcon, activeTextColor, children, closeMenu, closeOnSelect, menuValue, name, onMenuChange, options, panelStyle, tokens, triggerChange, value]);
   useEffect(() => {
     registerPanel(index, panelContent);
   }, [index, panelContent, registerPanel]);
@@ -175,12 +191,26 @@ const DropdownItem = /*#__PURE__*/React.forwardRef((props, ref) => {
     color: displayColor
   }];
   const arrowStyle = [styles.arrow, {
-    borderTopColor: tokens.colors.arrow
+    borderTopColor: tokens.colors.arrow,
+    marginLeft: tokens.spacing.arrowMarginLeft,
+    width: tokens.sizing.arrowSize,
+    height: tokens.sizing.arrowSize,
+    borderLeftWidth: tokens.sizing.arrowBorderWidth,
+    borderRightWidth: tokens.sizing.arrowBorderWidth,
+    borderTopWidth: tokens.sizing.arrowBorderHeight,
+    borderLeftColor: tokens.colors.transparent,
+    borderRightColor: tokens.colors.transparent,
+    opacity: tokens.opacity.arrowInactive
   }, isActive && styles.arrowActive, isActive && {
-    borderBottomColor: activeColor ?? tokens.colors.activeText
+    borderBottomColor: activeColor ?? tokens.colors.activeText,
+    borderBottomWidth: tokens.sizing.arrowBorderHeight,
+    borderTopColor: tokens.colors.transparent,
+    opacity: tokens.opacity.arrowActive
   }];
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
-    style: [styles.item, barScrollable ? styles.itemScrollable : null, style],
+    style: [styles.item, barScrollable ? [styles.itemScrollable, {
+      paddingHorizontal: tokens.spacing.itemScrollablePaddingHorizontal
+    }] : null, style],
     onPress: handleToggle,
     accessibilityRole: "button",
     testID: `rv-dropdown-trigger-${index}`,
@@ -204,40 +234,21 @@ const styles = StyleSheet.create({
     minWidth: 0
   },
   itemScrollable: {
-    flex: 0,
-    paddingHorizontal: 12
+    flex: 0
   },
   titleNode: {
     flexShrink: 1,
     minWidth: 0
   },
-  arrow: {
-    marginLeft: 4,
-    width: 6,
-    height: 6,
-    borderLeftWidth: 3,
-    borderRightWidth: 3,
-    borderTopWidth: 4,
-    borderLeftColor: 'transparent',
-    borderRightColor: 'transparent',
-    opacity: 0.8
-  },
+  arrow: {},
   arrowActive: {
-    borderTopWidth: 0,
-    borderBottomWidth: 4,
-    borderBottomColor: 'currentColor',
-    borderTopColor: 'transparent',
-    opacity: 1
-  },
-  optionPanel: {
-    paddingHorizontal: 0
+    borderTopWidth: 0
   },
+  optionPanel: {},
   optionRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 10,
-    paddingHorizontal: 16
+    justifyContent: 'space-between'
   },
   optionLeft: {
     flex: 1,
@@ -245,24 +256,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     minWidth: 0
   },
-  optionIcon: {
-    marginRight: 8
-  },
-  optionIconText: {
-    fontSize: 16
-  },
-  optionText: {
-    fontSize: 16
-  },
+  optionIcon: {},
+  optionIconText: {},
+  optionText: {},
   optionTextNode: {
     flex: 1
   },
-  indicator: {
-    marginLeft: 12
-  },
-  customPanel: {
-    padding: 16
-  }
+  indicator: {},
+  customPanel: {}
 });
 DropdownItem.displayName = 'DropdownMenu.Item';
 export default DropdownItem;

package/dist/es/components/dropdown-menu/DropdownMenu.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Animated, Pressable, ScrollView, StyleSheet, View, useWindowDimensions } from 'react-native';
 import { useControllableValue } from '../../hooks';
 import { measureInWindow, nativeDriverEnabled } from '../../platform';
@@ -167,7 +167,7 @@ const DropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
     animationRef.current?.stop();
   }, []);
   const barScrollable = threshold !== undefined && React.Children.count(children) > threshold;
-  const contextValue = useMemo(() => ({
+  const contextValue = {
     activeIndex,
     registerPanel,
     toggleItem,
@@ -179,7 +179,7 @@ const DropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
     disabled,
     menuValue,
     onMenuChange
-  }), [activeColor, activeIcon, activeIndex, closeMenu, direction, disabled, registerPanel, showItem, toggleItem, menuValue, onMenuChange]);
+  };
   const shouldRenderMask = mounted && (overlay || closeOnClickOutside);
   const shouldCloseOnMask = closeOnClickOverlay || closeOnClickOutside;
   const resolvedBarTop = barFrame?.y ?? 0;
@@ -188,29 +188,25 @@ const DropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
   const resolvedBarWidth = barFrame?.width ?? (barWidth || windowWidth);
   const resolvedBarBottom = resolvedBarTop + resolvedBarHeight;
   const bottomInset = Math.max(0, windowHeight - resolvedBarTop);
-  const insetStyle = useMemo(() => direction === 'up' ? {
+  const insetStyle = direction === 'up' ? {
     bottom: bottomInset
   } : {
     top: resolvedBarBottom
-  }, [bottomInset, direction, resolvedBarBottom]);
-  const panelPositionStyle = useMemo(() => ({
+  };
+  const panelPositionStyle = {
     left: resolvedBarLeft,
     width: resolvedBarWidth
-  }), [resolvedBarLeft, resolvedBarWidth]);
+  };
   const panelRadiusStyle = direction === 'up' ? styles.panelUp : styles.panelDown;
-  const panelAnimatedStyle = useMemo(() => {
-    const offset = 8;
-    const translate = progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: direction === 'up' ? [offset, 0] : [-offset, 0]
-    });
-    return {
-      opacity: progress,
-      transform: [{
-        translateY: translate
-      }]
-    };
-  }, [direction, progress]);
+  const panelAnimatedStyle = {
+    opacity: progress,
+    transform: [{
+      translateY: progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: direction === 'up' ? [8, 0] : [-8, 0]
+      })
+    }]
+  };
   const {
     zIndex: stackZIndex
   } = useOverlayStack({
@@ -220,21 +216,21 @@ const DropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
     type: 'dropdown-menu'
   });
   const resolvedZIndex = stackZIndex ?? zIndex;
-  const barChildren = useMemo(() => React.Children.map(children, (child, index) => {
+  const barChildren = React.Children.map(children, (child, index) => {
     if (! /*#__PURE__*/React.isValidElement(child)) return child;
     const element = child;
     return /*#__PURE__*/React.cloneElement(element, {
       index,
       barScrollable
     });
-  }), [barScrollable, children]);
-  const barStyle = useMemo(() => [styles.barWrapper, {
+  });
+  const barStyle = [styles.barWrapper, {
     height: tokens.sizing.barHeight,
     backgroundColor: tokens.colors.barBackground,
     paddingHorizontal: tokens.spacing.horizontal,
     zIndex: mounted ? resolvedZIndex + 1 : undefined,
     ...tokens.shadow
-  }, createHairlineBorderBottom(tokens.colors.divider)], [mounted, resolvedZIndex, tokens.colors.barBackground, tokens.colors.divider, tokens.shadow, tokens.sizing.barHeight, tokens.spacing.horizontal]);
+  }, createHairlineBorderBottom(tokens.colors.divider)];
   const handleBarLayout = useCallback(event => {
     const {
       height,

package/dist/es/components/dropdown-menu/tokens.js

@@ -16,18 +16,35 @@ const createTokens = foundations => {
       panelBackground: '#ffffff',
       mask: 'rgba(0,0,0,0.45)',
       divider: palette.default[200],
-      barBackground: '#ffffff'
+      barBackground: '#ffffff',
+      transparent: 'transparent'
     },
     spacing: {
       horizontal: spacing.md,
       vertical: spacing.sm,
-      titlePadding: spacing.xs
+      titlePadding: spacing.xs,
+      customPanelPadding: spacing.lg,
+      optionRowPaddingHorizontal: spacing.lg,
+      optionRowPaddingVertical: 10,
+      itemScrollablePaddingHorizontal: spacing.md,
+      arrowMarginLeft: spacing.xs,
+      optionIconMarginRight: spacing.sm,
+      indicatorMarginLeft: spacing.md,
+      panelPaddingHorizontal: spacing.none
     },
     sizing: {
       barHeight: 48,
       titleFontSize: 15,
       titleLineHeight: fontSize.lg * typography.lineHeightMultiplier,
-      panelMaxHeight: 320
+      panelMaxHeight: 320,
+      optionFontSize: fontSize.md,
+      arrowSize: 6,
+      arrowBorderWidth: 3,
+      arrowBorderHeight: 4
+    },
+    opacity: {
+      arrowInactive: 0.8,
+      arrowActive: 1
     },
     shadow: {
       shadowColor: 'rgba(100, 101, 102, 0.12)',

package/dist/es/components/field/Field.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useId, useImperativeHandle, useRef, useState } from 'react';
 import { Platform, Pressable, Text, TextInput, View } from 'react-native';
 import { Clear, QuestionO } from 'react-native-system-icon';
 import Cell from '../cell';
@@ -80,7 +80,7 @@ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
   const clearTrigger = clearTriggerProp ?? tokens.defaults.clearTrigger;
   const rows = rowsProp ?? tokens.defaults.rows;
   const formatTrigger = formatTriggerProp ?? tokens.defaults.formatTrigger;
-  const mergedTitleStyle = useMemo(() => [{
+  const mergedTitleStyle = [{
     width: labelWidth,
     minWidth: labelWidth,
     maxWidth: labelWidth,
@@ -88,7 +88,7 @@ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
     marginRight: tokens.spacing.labelGap,
     flexShrink: 0,
     flexGrow: 0
-  }, titleStyle], [labelWidth, titleStyle, tokens.spacing.labelGap]);
+  }, titleStyle];
   const resolvedSuffix = suffixProp ?? button;
   const resolvedDescription = intro ?? description;
   const resolvedPlaceholderColor = placeholderTextColor ?? (disabled ? tokens.colors.disabled : tokens.colors.placeholder);
@@ -101,10 +101,10 @@ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
   const inputRef = useRef(null);
   const introId = useId();
   const errorId = useId();
-  const describedBy = useMemo(() => {
+  const describedBy = (() => {
     const ids = [isRenderable(errorMessage) ? errorId : null, isRenderable(resolvedDescription) ? introId : null].filter(Boolean);
     return ids.length ? ids : undefined;
-  }, [errorId, errorMessage, introId, resolvedDescription]);
+  })();
   const lineHeight = tokens.defaults.textareaLineHeight;
   const autoSizeConfig = autoSize && isObject(autoSize) ? autoSize : undefined;
   const minRows = !isTextarea ? 1 : autoSizeConfig && isDef(autoSizeConfig.minRows) ? Math.max(1, autoSizeConfig.minRows) : Math.max(1, rows);
@@ -378,10 +378,10 @@ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     }, resolvedDescription);
   };
-  const contentWrapperStyle = useMemo(() => [{
+  const contentWrapperStyle = [{
     width: '100%',
     justifyContent: alignMap[controlAlign]
-  }, contentStyle], [contentStyle, controlAlign]);
+  }, contentStyle];
   const renderAffix = node => {
     if (isText(node)) {
       return /*#__PURE__*/React.createElement(Text, {

package/dist/es/components/field/index.js

@@ -1,6 +1,6 @@
 import Field from './Field';
 import { CellGroup as FieldGroup } from '../cell';
-export { useFieldTokens } from './tokens';
 export { FieldGroup };
+export { useFieldTokens } from './tokens';
 export default Field;
 export { Field };

package/dist/es/components/form/Form.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { isPromiseLike } from '../../utils/promise';
 import { isNumber, isString, isText } from '../../utils/validate';
@@ -226,7 +226,7 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
       return next;
     });
   }, [notify, onValuesChange, runFieldValidation]);
-  const formApi = useMemo(() => ({
+  const formApi = {
     submit: async () => {
       try {
         const result = await validateFields();
@@ -278,12 +278,12 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     validateFields,
     getFieldError: name => errorsRef.current[serializeNamePath(name)] ?? []
-  }), [notify, onFinish, onValuesChange, validateFields, runFieldValidation]);
+  };
   useImperativeHandle(ref, () => formApi, [formApi]);
   const getFieldError = useCallback(name => errors[serializeNamePath(name)], [errors]);
   const getFieldValue = useCallback(name => getValueByName(values, name), [values]);
   const contextValidateField = useCallback((name, trigger) => runFieldValidation(name, trigger), [runFieldValidation]);
-  const contextValue = useMemo(() => ({
+  const contextValue = {
     values,
     getFieldValue,
     setFieldValue,
@@ -299,7 +299,7 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
     colon,
     labelWidth,
     showValidateMessage
-  }), [values, setFieldValue, registerField, getFieldError, contextValidateField, formApi, colon, labelWidth, showValidateMessage]);
+  };
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(View, _extends({
@@ -309,11 +309,7 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
 InternalForm.displayName = 'Form';
 export const useWatch = (name, formRef) => {
   const context = useContext(FormContext);
-  const names = useMemo(() => {
-    if (name === undefined) return undefined;
-    if (!Array.isArray(name)) return [name];
-    return name.length && isText(name[0]) ? [name] : name;
-  }, [name]);
+  const names = name === undefined ? undefined : !Array.isArray(name) ? [name] : name.length && isText(name[0]) ? [name] : name;
   const getSnapshot = useCallback(allValues => {
     const source = allValues ?? context?.getFieldsValue?.() ?? formRef?.current?.getFieldsValue?.() ?? {};
     if (!names) return source;

package/dist/es/components/grid/Grid.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useMemo } from 'react';
+import React from 'react';
 import { View } from 'react-native';
 import { createHairlineView } from '../../utils';
 import { GridContext } from './GridContext';
@@ -55,7 +55,7 @@ export const Grid = props => {
       bottom: 0
     })]
   });
-  const contextValue = useMemo(() => ({
+  const contextValue = {
     columnNum,
     gutter,
     border,
@@ -68,7 +68,7 @@ export const Grid = props => {
     iconColor,
     count: childArray.length,
     tokens
-  }), [border, center, childArray.length, clickable, columnNum, direction, gutter, iconColor, iconSize, reverse, square, tokens]);
+  };
   return /*#__PURE__*/React.createElement(GridContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(View, _extends({