react-native-system-ui 0.0.2 → 0.0.4

package/README.md

@@ -20,16 +20,32 @@ pnpm add react-native-system-icon
 # 同时保证项目已安装 react 和 react-native（>=18.2 / >=0.79）
 ```
 
+**优先使用 ConfigProvider** 包裹根节点，这样 Button、Toast、Popup、Dialog 等都能直接使用，无需再配弹层挂载点。
+
 ```tsx
-import { ThemeProvider, Button } from 'react-native-system-ui'
+import { ConfigProvider, Button, Toast } from 'react-native-system-ui'
 
-export const Demo = () => (
-  <ThemeProvider>
-    <Button text="提交" type="primary" shadow />
-  </ThemeProvider>
+export const App = () => (
+  <ConfigProvider>
+    <Button text="提交" onPress={() => Toast.show('你好')} type="primary" shadow />
+  </ConfigProvider>
 )
 ```
 
+ConfigProvider 内置 **ThemeProvider**（主题）与 **PortalHost**（弹层挂载点）。若只包 ThemeProvider 而没挂 PortalHost，Toast/Popup/Dialog 会无法显示。
+
+### 也可以单独使用 ThemeProvider
+
+仅做主题、且确定不用弹层时，可只用 ThemeProvider；之后若要接 Toast/Popup/Dialog，需再包一层 `<Portal.Host>` 或改用 ConfigProvider。
+
+| 能力 | ConfigProvider | ThemeProvider |
+| --- | --- | --- |
+| 主题（tokens） | ✅ 内置 | ✅ |
+| 弹层挂载点（PortalHost） | ✅ 内置 | ❌ 需再包 `<Portal.Host>` |
+| 语言包（locale） | ✅ | ❌ |
+
+详见 [ConfigProvider](./docs/components/config-provider.md) / [Portal](./docs/components/portal.md)。
+
 ### 自定义 Tokens
 
 ```tsx
@@ -93,7 +109,7 @@ export const AuroraBranding = () => (
 
 ## 已交付能力
 
-- **设计系统**：ThemeProvider、createTokens、themePresets（light/dark/aurora），组件自管 tokens。
+- **设计系统**：ConfigProvider、ThemeProvider、createTokens、themePresets（light/dark/aurora），组件自管 tokens。使用 Toast/Popup/Dialog 等弹层时推荐用 ConfigProvider 包裹根节点（内置 PortalHost）。
 - **基础与展示**：Button、Badge、Cell、Collapse、Divider、Empty、Flex、Grid、Space、Tag、Typography、Loading、NoticeBar、Popup、Portal、Progress、Slider、Toast、Dialog 等，均提供文档与 demo。
 - **表单与输入**：Form、Field、Input、Checkbox、Radio、Switch、Stepper、Rate、Picker、Calendar、Search 等。
 - **导航与反馈**：Tabs、NavBar、Tabbar、ActionSheet、Notify、Overlay 等。

package/dist/cjs/{area → components/area}/Area.js

@@ -48,19 +48,13 @@ const Area = props => {
     city_list,
     county_list
   } = areaList;
-  const columns = (0, _react().useMemo)(() => (0, _utils.buildAreaColumns)({
+  const columns = (0, _utils.buildAreaColumns)({
     province_list,
     city_list,
     county_list
-  }, resolvedColumnsNum), [province_list, city_list, county_list, resolvedColumnsNum]);
-  const normalizedValue = (0, _react().useMemo)(() => {
-    if (value === undefined) return undefined;
-    return normalizeCascadeValue(columns, value, resolvedColumnsNum);
-  }, [columns, resolvedColumnsNum, value]);
-  const normalizedDefaultValue = (0, _react().useMemo)(() => {
-    if (defaultValue === undefined) return undefined;
-    return normalizeCascadeValue(columns, defaultValue, resolvedColumnsNum);
-  }, [columns, defaultValue, resolvedColumnsNum]);
+  }, resolvedColumnsNum);
+  const normalizedValue = value === undefined ? undefined : normalizeCascadeValue(columns, value, resolvedColumnsNum);
+  const normalizedDefaultValue = defaultValue === undefined ? undefined : normalizeCascadeValue(columns, defaultValue, resolvedColumnsNum);
   const handleChange = (0, _react().useCallback)((values, options) => {
     onChange?.(values.map(String), options);
   }, [onChange]);

package/dist/cjs/{avatar → components/avatar}/Avatar.js

@@ -23,9 +23,6 @@ var _utils = require("../../utils");
 var _tokens = require("./tokens");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
-const transparentContainerStyle = {
-  backgroundColor: 'transparent'
-};
 const Avatar = exports.Avatar = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const {
     src,
@@ -52,6 +49,9 @@ const Avatar = exports.Avatar = /*#__PURE__*/_react().default.forwardRef((props,
   const avatarWidth = width ?? baseSize;
   const avatarHeight = height ?? baseSize;
   const borderRadius = resolvedShape === 'circle' ? Math.min(avatarWidth, avatarHeight) / 2 : Math.max(tokens.radii.squareMin, Math.min(avatarWidth, avatarHeight) / tokens.radii.squareDivisor);
+  const transparentContainerStyle = {
+    backgroundColor: tokens.colors.transparent
+  };
   const fallbackText = text ? text.trim().slice(0, 2).toUpperCase() : undefined;
   const fallbackContent = icon ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.iconWrapper, {

package/dist/cjs/{avatar → components/avatar}/tokens.js

@@ -31,7 +31,8 @@ const createAvatarTokens = foundations => ({
   },
   colors: {
     background: foundations.palette.default[100],
-    text: foundations.palette.default[800]
+    text: foundations.palette.default[800],
+    transparent: "transparent"
   },
   typography: {
     fontWeight: "600",

package/dist/cjs/{badge → components/badge}/Badge.js

@@ -46,7 +46,7 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
   const {
     visible,
     formattedContent
-  } = (0, _react().useMemo)(() => {
+  } = (() => {
     const numericContent = (0, _utils.isNumericLike)(content) ? Number(content) : null;
     const shouldHide = numericContent === 0 && !resolvedShowZero;
     const isVisible = dot || (0, _utils.isRenderable)(content) && !shouldHide;
@@ -60,7 +60,7 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
       visible: true,
       formattedContent: finalContent
     };
-  }, [content, dot, max, resolvedShowZero]);
+  })();
   const [size, setSize] = (0, _react().useState)({
     width: 0,
     height: 0
@@ -77,7 +77,7 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
       });
     }
   }, [size.width, size.height]);
-  const transformStyle = (0, _react().useMemo)(() => {
+  const transformStyle = (() => {
     if (!hasChildren) return undefined;
     if (dot) {
       const half = tokens.sizing.dotSize / 2;
@@ -99,35 +99,30 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
         translateY: -size.height / 2
       }]
     };
-  }, [hasChildren, dot, tokens.sizing.dotSize, size.width, size.height]);
-  const baseBadgeStyle = (0, _react().useMemo)(() => {
-    if (dot) {
-      return {
-        width: tokens.sizing.dotSize,
-        height: tokens.sizing.dotSize,
-        borderRadius: tokens.radii.dot,
-        backgroundColor: color ?? tokens.colors.dot
-      };
-    }
-    return {
-      minWidth: tokens.sizing.minWidth,
-      minHeight: tokens.sizing.height,
-      paddingHorizontal: tokens.sizing.paddingHorizontal,
-      paddingVertical: tokens.sizing.paddingVertical,
-      borderRadius: tokens.radii.badge,
-      borderWidth: tokens.borders.width,
-      borderColor: tokens.colors.border,
-      backgroundColor: color ?? tokens.colors.background
-    };
-  }, [dot, color, tokens]);
-  const mergedTextStyle = (0, _react().useMemo)(() => [tokens.layout.text, {
+  })();
+  const baseBadgeStyle = dot ? {
+    width: tokens.sizing.dotSize,
+    height: tokens.sizing.dotSize,
+    borderRadius: tokens.radii.dot,
+    backgroundColor: color ?? tokens.colors.dot
+  } : {
+    minWidth: tokens.sizing.minWidth,
+    minHeight: tokens.sizing.height,
+    paddingHorizontal: tokens.sizing.paddingHorizontal,
+    paddingVertical: tokens.sizing.paddingVertical,
+    borderRadius: tokens.radii.badge,
+    borderWidth: tokens.borders.width,
+    borderColor: tokens.colors.border,
+    backgroundColor: color ?? tokens.colors.background
+  };
+  const mergedTextStyle = [tokens.layout.text, {
     color: textColor ?? tokens.colors.text,
     fontSize: tokens.typography.fontSize,
     lineHeight: tokens.typography.lineHeight,
     fontFamily: tokens.typography.fontFamily,
     fontWeight: tokens.typography.fontWeight
-  }, userTextStyle], [textColor, tokens, userTextStyle]);
-  const offsetStyle = (0, _react().useMemo)(() => {
+  }, userTextStyle];
+  const offsetStyle = (() => {
     if (!offset) return undefined;
     const [x, y] = offset;
     return hasChildren ? {
@@ -137,17 +132,14 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
       marginLeft: x,
       marginTop: y
     };
-  }, [offset, hasChildren]);
-  const badgeElement = (0, _react().useMemo)(() => {
-    if (!visible) return null;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      pointerEvents: hasChildren ? 'none' : 'auto',
-      onLayout: hasChildren && !dot ? handleLayout : undefined,
-      style: [hasChildren ? tokens.layout.badgeAbsolute : tokens.layout.badgeStandalone, baseBadgeStyle, transformStyle, offsetStyle, badgeStyle, !hasChildren ? style : undefined]
-    }, !dot && (/*#__PURE__*/_react().default.isValidElement(formattedContent) ? formattedContent : /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: mergedTextStyle
-    }, formattedContent)));
-  }, [visible, hasChildren, dot, handleLayout, baseBadgeStyle, transformStyle, offsetStyle, badgeStyle, style, formattedContent, mergedTextStyle]);
+  })();
+  const badgeElement = !visible ? null : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    pointerEvents: hasChildren ? 'none' : 'auto',
+    onLayout: hasChildren && !dot ? handleLayout : undefined,
+    style: [hasChildren ? tokens.layout.badgeAbsolute : tokens.layout.badgeStandalone, baseBadgeStyle, transformStyle, offsetStyle, badgeStyle, !hasChildren ? style : undefined]
+  }, !dot && (/*#__PURE__*/_react().default.isValidElement(formattedContent) ? formattedContent : /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: mergedTextStyle
+  }, formattedContent)));
   if (hasChildren) {
     return onPress ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
       ref: ref,

package/dist/cjs/{button → components/button}/Button.js

@@ -168,14 +168,14 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
   const gradientWebStyle = gradientFillEnabled && supportsGradientFill && gradientString ? {
     backgroundImage: gradientString
   } : undefined;
-  const iconWrapperStyle = (0, _react().useMemo)(() => iconPosition === 'left' ? {
+  const iconWrapperStyle = iconPosition === 'left' ? {
     marginRight: buttonTokens.spacing.iconGap
   } : {
     marginLeft: buttonTokens.spacing.iconGap
-  }, [buttonTokens.spacing.iconGap, iconPosition]);
-  const loadingIconWrapperStyle = (0, _react().useMemo)(() => ({
+  };
+  const loadingIconWrapperStyle = {
     marginRight: buttonTokens.spacing.iconGap
-  }), [buttonTokens.spacing.iconGap]);
+  };
   const renderIcon = () => {
     if (!icon) return null;
     try {
@@ -205,14 +205,14 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
     }, loadingIndicator ?? defaultIndicator);
   };
   const label = loading && loadingText !== undefined ? loadingText : text !== undefined ? text : children;
-  const sharedLabelTextStyle = (0, _react().useMemo)(() => ({
+  const sharedLabelTextStyle = {
     fontFamily: buttonTokens.typography.fontFamily,
     fontWeight: buttonTokens.typography.fontWeight,
     fontSize: sizeTokens.fontSize,
     lineHeight: sizeTokens.fontSize * buttonTokens.typography.lineHeightMultiplier,
     color: resolvedTextColor,
     textTransform: uppercase ? 'uppercase' : undefined
-  }), [buttonTokens.typography.fontFamily, buttonTokens.typography.fontWeight, buttonTokens.typography.lineHeightMultiplier, resolvedTextColor, sizeTokens.fontSize, uppercase]);
+  };
   const renderText = () => {
     if (label === undefined || label === null) {
       return null;
@@ -254,7 +254,7 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
     onPressEnd: onPressOut || undefined
   });
   const resolvedOpacity = disabled ? buttonTokens.states.disabledOpacity : loading ? buttonTokens.states.loadingOpacity : states.pressed ? buttonTokens.states.pressedOpacity : 1;
-  const containerStyle = (0, _react().useMemo)(() => ({
+  const containerStyle = {
     minHeight: sizeTokens.height,
     paddingHorizontal: sizeTokens.paddingHorizontal,
     borderRadius,
@@ -262,21 +262,21 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
     borderColor,
     borderWidth: resolvedBorderWidth,
     opacity: resolvedOpacity
-  }), [backgroundColor, borderColor, borderRadius, resolvedBorderWidth, resolvedOpacity, sizeTokens.height, sizeTokens.paddingHorizontal]);
-  const rippleClipStyle = (0, _react().useMemo)(() => _reactNative().Platform.OS === 'android' && borderRadius > 0 && !shouldShowShadow ? {
+  };
+  const rippleClipStyle = _reactNative().Platform.OS === 'android' && borderRadius > 0 && !shouldShowShadow ? {
     overflow: 'hidden'
-  } : null, [borderRadius, shouldShowShadow]);
-  const baseContainerStyle = (0, _react().useMemo)(() => [buttonTokens.layout.base, containerStyle, rippleClipStyle, block ? buttonTokens.layout.block : null, shadowStyle, gradientWebStyle, style], [block, buttonTokens.layout.base, buttonTokens.layout.block, containerStyle, gradientWebStyle, rippleClipStyle, shadowStyle, style]);
+  } : null;
+  const baseContainerStyle = [buttonTokens.layout.base, containerStyle, rippleClipStyle, block ? buttonTokens.layout.block : null, shadowStyle, gradientWebStyle, style];
   const mergedAccessibilityState = {
     ...accessibilityState,
     disabled: isDisabled,
     busy: loading
   };
   const defaultRippleColor = rippleColorProp ?? (derivedMode === 'text' || derivedMode === 'outlined' || legacyPlain ? resolvedTextColor : type === 'default' && !normalizedColor ? (0, _color.withAlpha)(resolvedTextColor, 0.15) : buttonTokens.colors.ripple);
-  const resolvedAndroidRipple = (0, _react().useMemo)(() => _reactNative().Platform.OS === 'android' ? androidRippleProp ?? {
+  const resolvedAndroidRipple = _reactNative().Platform.OS === 'android' ? androidRippleProp ?? {
     color: defaultRippleColor,
     borderless: false
-  } : androidRippleProp, [androidRippleProp, defaultRippleColor]);
+  } : androidRippleProp;
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     ref: forwardedRef,
     disabled: isDisabled,

package/dist/cjs/{button → components/button}/ButtonGroup.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ButtonGroup = void 0;
 function _react() {
-  const data = _interopRequireWildcard(require("react"));
+  const data = _interopRequireDefault(require("react"));
   _react = function () {
     return data;
   };
@@ -20,7 +20,7 @@ function _reactNative() {
 }
 var _ButtonContext = require("./ButtonContext");
 var _tokens = require("./tokens");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react().default.memo(({
   children,
   direction = 'horizontal',
@@ -42,7 +42,7 @@ const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react().default.memo(({
   const gap = spacing ?? tokens.spacing.groupGap;
   const isHorizontal = direction === 'horizontal';
   const supportsGap = _reactNative().Platform.OS === 'web';
-  const groupValue = (0, _react().useMemo)(() => ({
+  const groupValue = {
     type,
     size,
     plain,
@@ -54,8 +54,8 @@ const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react().default.memo(({
     iconPosition,
     hairline,
     mode
-  }), [type, size, plain, block, round, square, shadow, disabled, iconPosition, hairline, mode]);
-  const containerStyle = (0, _react().useMemo)(() => {
+  };
+  const containerStyle = (() => {
     const base = {
       flexDirection: isHorizontal ? 'row' : 'column',
       alignItems: 'center'
@@ -71,8 +71,8 @@ const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react().default.memo(({
       }
     }
     return [base, style];
-  }, [isHorizontal, block, supportsGap, gap, style]);
-  const content = (0, _react().useMemo)(() => {
+  })();
+  const content = (() => {
     if (supportsGap) {
       return children;
     }
@@ -91,7 +91,7 @@ const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react().default.memo(({
         key: element.key ?? index
       });
     });
-  }, [children, supportsGap, isHorizontal, gap]);
+  })();
   return /*#__PURE__*/_react().default.createElement(_ButtonContext.ButtonGroupContext.Provider, {
     value: groupValue
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {

package/dist/cjs/{calendar → components/calendar}/Calendar.js

@@ -135,7 +135,7 @@ const Calendar = props => {
     defaultValuePropName: 'defaultValue',
     trigger: 'onSelect'
   });
-  const value = (0, _react().useMemo)(() => normalizeValue(toArrayValue(selectedValue), type), [selectedValue, type]);
+  const value = normalizeValue(toArrayValue(selectedValue), type);
   const [currentMonth, setCurrentMonth] = (0, _react().useState)(() => {
     const initial = value.length ? value[0] : new Date();
     return clampMonth(initial, minDate, maxDate);
@@ -150,13 +150,13 @@ const Calendar = props => {
     const first = clampMonth(value[0], minDate, maxDate);
     setCurrentMonth(prev => isSameMonth(first, prev) ? prev : first);
   }, [firstValueTime, minDateTime, maxDateTime]);
-  const monthDays = (0, _react().useMemo)(() => buildMonth(currentMonth, weekStartsOn), [currentMonth, weekStartsOn]);
-  const minDay = (0, _react().useMemo)(() => startOfDay(minDate).getTime(), [minDate]);
-  const maxDay = (0, _react().useMemo)(() => startOfDay(maxDate).getTime(), [maxDate]);
-  const weekLabels = (0, _react().useMemo)(() => reorderWeekdays(weekdays ?? tokens.defaults.weekdays, weekStartsOn, tokens.defaults.weekdays), [tokens.defaults.weekdays, weekdays, weekStartsOn]);
-  const monthLabel = (0, _react().useMemo)(() => formatMonthTitle ? formatMonthTitle(currentMonth) : formatMonth(currentMonth), [formatMonthTitle, currentMonth]);
-  const minMonthStart = (0, _react().useMemo)(() => startOfMonth(minDate), [minDate]);
-  const maxMonthStart = (0, _react().useMemo)(() => startOfMonth(maxDate), [maxDate]);
+  const monthDays = buildMonth(currentMonth, weekStartsOn);
+  const minDay = startOfDay(minDate).getTime();
+  const maxDay = startOfDay(maxDate).getTime();
+  const weekLabels = reorderWeekdays(weekdays ?? tokens.defaults.weekdays, weekStartsOn, tokens.defaults.weekdays);
+  const monthLabel = formatMonthTitle ? formatMonthTitle(currentMonth) : formatMonth(currentMonth);
+  const minMonthStart = startOfMonth(minDate);
+  const maxMonthStart = startOfMonth(maxDate);
   const canGoPrev = currentMonth.getTime() > minMonthStart.getTime();
   const canGoNext = currentMonth.getTime() < maxMonthStart.getTime();
   const goToMonth = (0, _react().useCallback)(delta => {
@@ -245,8 +245,8 @@ const Calendar = props => {
       maybeAutoConfirm(normalizedNext);
     }
   }, [value, type, minDay, maxDay, allowSameDay, isSelectionAllowed, setSelectedValue, showConfirm, maybeAutoConfirm]);
-  const valueTimes = (0, _react().useMemo)(() => value.map(item => startOfDay(item).getTime()), [value]);
-  const selectedSet = (0, _react().useMemo)(() => new Set(valueTimes), [valueTimes]);
+  const valueTimes = value.map(item => startOfDay(item).getTime());
+  const selectedSet = new Set(valueTimes);
   const rangeBounds = type === 'range' && valueTimes.length === 2 ? [valueTimes[0], valueTimes[1]] : null;
   const renderDay = (0, _react().useCallback)((day, index) => {
     if (!day) {

package/dist/cjs/{cascader → components/cascader}/Cascader.js

@@ -97,7 +97,7 @@ const Cascader = props => {
     defaultValue: [],
     trigger: "onChange"
   });
-  const keys = (0, _react().useMemo)(() => getFieldKeys(fieldNames), [fieldNames]);
+  const keys = getFieldKeys(fieldNames);
   const cascaderValue = Array.isArray(value) ? value : [];
   const [panelValue, setPanelValue] = (0, _react().useState)(cascaderValue);
   const resolvedCloseable = closeable ?? tokens.defaults.closeable;
@@ -122,7 +122,7 @@ const Cascader = props => {
     if (!width) return;
     setMeasuredWidth(prev => prev === width ? prev : width);
   }, []);
-  const confirmedRows = (0, _react().useMemo)(() => (0, _utils.resolveSelectedRows)(options, keys, cascaderValue), [cascaderValue, keys, options]);
+  const confirmedRows = (0, _utils.resolveSelectedRows)(options, keys, cascaderValue);
   const [activeTab, setActiveTab] = (0, _react().useState)(0);
   (0, _react().useEffect)(() => {
     const currentLength = Array.isArray(currentValue) ? currentValue.length : 0;
@@ -336,11 +336,11 @@ const Cascader = props => {
   } = popupPropsOverrides ?? {};
   const resolvedOverlay = popupOverlay ?? true;
   const resolvedCloseOnOverlayPress = overrideCloseOnOverlayPress ?? closeOnClickOverlay;
-  const cascaderActions = (0, _react().useMemo)(() => ({
+  const cascaderActions = {
     open: openPopup,
     close: () => closePopup(true),
     toggle: togglePopup
-  }), [closePopup, openPopup, togglePopup]);
+  };
   const enhanceTriggerNode = (0, _react().useCallback)(node => {
     if (! /*#__PURE__*/_react().default.isValidElement(node)) return node;
     const props = node.props;

package/dist/cjs/{cascader → components/cascader}/useCascaderExtend.js

@@ -4,15 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCascaderExtend = void 0;
-function _react() {
-  const data = require("react");
-  _react = function () {
-    return data;
-  };
-  return data;
-}
 const useCascaderExtend = (options = [], keys, value) => {
-  const depth = (0, _react().useMemo)(() => {
+  const depth = (() => {
     let maxDepth = 1;
     const traverse = (opts, level) => {
       if (!opts || !opts.length) return;
@@ -27,8 +20,8 @@ const useCascaderExtend = (options = [], keys, value) => {
     };
     traverse(options, 1);
     return maxDepth;
-  }, [keys.childrenKey, options]);
-  const tabs = (0, _react().useMemo)(() => {
+  })();
+  const tabs = (() => {
     if (!value || !value.length) return [options];
     return value.reduce((acc, val, index) => {
       if (val == null) return acc;
@@ -39,11 +32,8 @@ const useCascaderExtend = (options = [], keys, value) => {
       if (children) acc.push(children);
       return acc;
     }, [options]);
-  }, [keys.childrenKey, keys.valueKey, options, value]);
-  const items = (0, _react().useMemo)(() => {
-    if (!value || !value.length) return [];
-    return value.map((val, index) => tabs[index]?.find(option => option[keys.valueKey] === val));
-  }, [keys.valueKey, tabs, value]);
+  })();
+  const items = !value || !value.length ? [] : value.map((val, index) => tabs[index]?.find(option => option[keys.valueKey] === val));
   return {
     tabs,
     items,

package/dist/cjs/{checkbox → components/checkbox}/CheckboxGroup.js

@@ -136,7 +136,7 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/_react().default.forw
   (0, _react().useImperativeHandle)(ref, () => ({
     toggleAll
   }), [toggleAll]);
-  const contextValue = (0, _react().useMemo)(() => ({
+  const contextValue = {
     state,
     direction,
     shape,
@@ -147,7 +147,7 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/_react().default.forw
     max,
     registerValue,
     unregisterValue
-  }), [state, direction, shape, iconSize, iconRender, checkedColor, labelDisabled, max]);
+  };
   return /*#__PURE__*/_react().default.createElement(_CheckboxContext.CheckboxGroupContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, resolvedGroupProps, viewProps, {

package/dist/cjs/{circle → components/circle}/Circle.js

@@ -90,7 +90,7 @@ const Circle = props => {
     width: resolvedSize,
     height: resolvedSize
   }];
-  const content = (0, _react().useMemo)(() => {
+  const content = (() => {
     if (children == null || children === false) return null;
     const childArray = _react().default.Children.toArray(children);
     if (childArray.every(_utils.isText)) {
@@ -103,7 +103,7 @@ const Circle = props => {
       }, childArray.map(String).join(''));
     }
     return children;
-  }, [children, textStyle, tokens.colors.text, tokens.layout.text, tokens.typography.fontSize, tokens.typography.lineHeight]);
+  })();
   if (_reactNative().Platform.OS === 'web') {
     const safeStroke = Math.min(resolvedStrokeWidth, resolvedSize / 2);
     const innerSize = Math.max(0, resolvedSize - safeStroke * 2);

package/dist/cjs/{collapse → components/collapse}/Collapse.js

@@ -97,7 +97,7 @@ const Collapse = props => {
     }
     onChange?.(buildOutputValue(next, accordion));
   }, [accordion, activeKeys, controlled, disabled, onChange]);
-  const contextValue = (0, _react().useMemo)(() => ({
+  const contextValue = {
     activeKeys,
     toggle,
     accordion,
@@ -106,8 +106,8 @@ const Collapse = props => {
     border,
     disabled,
     tokens
-  }), [accordion, activeKeys, border, disabled, expandIcon, iconPosition, tokens, toggle]);
-  const renderedChildren = (0, _react().useMemo)(() => {
+  };
+  const renderedChildren = (() => {
     const items = _react().default.Children.toArray(children);
     return items.map((child, index) => {
       if (! /*#__PURE__*/_react().default.isValidElement(child)) return child;
@@ -120,7 +120,7 @@ const Collapse = props => {
         index
       });
     });
-  }, [children]);
+  })();
   return /*#__PURE__*/_react().default.createElement(CollapseContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
@@ -198,10 +198,10 @@ const CollapsePanel = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   } = tokens;
   const [contentHeight, setContentHeight] = (0, _react().useState)(0);
   const animation = (0, _react().useRef)(new (_reactNative().Animated.Value)(isActive ? 1 : 0)).current;
-  const rotate = (0, _react().useMemo)(() => animation.interpolate({
+  const rotate = animation.interpolate({
     inputRange: [0, 1],
     outputRange: ['90deg', '-90deg']
-  }), [animation]);
+  });
   (0, _react().useEffect)(() => {
     _reactNative().Animated.timing(animation, {
       toValue: isActive ? 1 : 0,
@@ -252,16 +252,13 @@ const CollapsePanel = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       fill: mergedDisabled ? colors.disabled : colors.arrow
     }));
   }, [colors.arrow, colors.disabled, expandIcon, isActive, mergedDisabled, rotate]);
-  const contentNode = (0, _react().useMemo)(() => {
-    if (!(0, _utils.isText)(children)) return children;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().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 = !(0, _utils.isText)(children) ? children : /*#__PURE__*/_react().default.createElement(_reactNative().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/cjs/{config-provider → components/config-provider}/ConfigProvider.js

@@ -21,7 +21,7 @@ const ConfigProviderBase = ({
   children
 }) => {
   const parentLocale = (0, _react().useContext)(_LocaleContext.LocaleContext);
-  const resolvedLocale = (0, _react().useMemo)(() => locale ?? parentLocale, [locale, parentLocale]);
+  const resolvedLocale = locale ?? parentLocale;
   return /*#__PURE__*/_react().default.createElement(_ThemeProvider.ThemeProvider, {
     value: theme
   }, /*#__PURE__*/_react().default.createElement(_LocaleContext.LocaleContext.Provider, {

package/dist/cjs/{datetime-picker → components/datetime-picker}/DatetimePicker.js

@@ -125,7 +125,7 @@ const DatePicker = props => {
     originColumns,
     columns,
     pickerValue
-  } = (0, _react().useMemo)(() => {
+  } = (() => {
     const getBoundary = (boundaryType, date) => {
       const boundaryDate = boundaryType === 'min' ? minDate : maxDate;
       const boundary = {
@@ -226,7 +226,7 @@ const DatePicker = props => {
       columns,
       pickerValue
     };
-  }, [columnsOrder, currentDate, filter, formatter, maxDate, minDate, type]);
+  })();
   const buildDateFromValues = (0, _react().useCallback)(values => {
     const getValue = columnType => {
       const index = originColumns.findIndex(column => column.type === columnType);
@@ -306,7 +306,7 @@ const TimePicker = props => {
       setCurrentTime(next);
     }
   }, [formatTime, value]);
-  const [hourValues, minuteValues] = (0, _react().useMemo)(() => {
+  const [hourValues, minuteValues] = (() => {
     let hours = (0, _utils.times)(maxHour - minHour + 1, index => (0, _utils.padZero)(minHour + index));
     let minutes = (0, _utils.times)(maxMinute - minMinute + 1, index => (0, _utils.padZero)(minMinute + index));
     if (filter) {
@@ -314,14 +314,14 @@ const TimePicker = props => {
       minutes = filter('minute', minutes);
     }
     return [hours, minutes];
-  }, [filter, maxHour, maxMinute, minHour, minMinute]);
-  const columns = (0, _react().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 = (0, _react().useCallback)(values => {
     const nextHour = values[0] ?? hourValues[0];
     const nextMinute = values[1] ?? minuteValues[0];
@@ -331,7 +331,7 @@ const TimePicker = props => {
     onChange?.(next);
   }, [hourValues, minuteValues, onChange]);
   const handleConfirm = (0, _react().useCallback)(() => onConfirm?.(timeRef.current), [onConfirm]);
-  const pickerValue = (0, _react().useMemo)(() => currentTime.split(':'), [currentTime]);
+  const pickerValue = currentTime.split(':');
   return /*#__PURE__*/_react().default.createElement(_picker.default, _extends({}, pickerProps, {
     columns: columns,
     interactionMode: interactionMode,