@ant-design/pro-components 3.1.2-0 → 3.1.3-1

package/es/layout/components/SettingDrawer/index.js

@@ -3,7 +3,7 @@ import { omit, useControlledState } from '@rc-component/util';
 import { useUrlSearchParams } from '@umijs/use-params';
 import { Alert, Button, Divider, Drawer, List, Switch, message } from 'antd';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { isBrowser, merge } from "../../../utils";
+import { isBrowser, merge, useRefFunction } from "../../../utils";
 import { defaultSettings } from "../../defaultSettings";
 import { gLocaleObject, getLanguage } from "../../locales";
 import { genStringToTheme } from "../../utils/utils";
@@ -144,25 +144,53 @@ export const SettingDrawer = props => {
   } = props;
   const firstRender = useRef(true);
   const [open, setOpenInner] = useControlledState(false, props.collapse);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onCollapseChangeCallback = useRefFunction(o => {
+    props.onCollapseChange?.(o);
+  });
+
+  /**
+   * 使用 queueMicrotask 延迟回调调用，避免在渲染阶段调用外部回调导致的 React 警告
+   * "Cannot update a component while rendering a different component"
+   */
   const setOpen = useCallback(updater => {
     setOpenInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      props.onCollapseChange?.(next);
+      queueMicrotask(() => {
+        onCollapseChangeCallback(next);
+      });
       return next;
     });
-  }, [props.onCollapseChange]);
+  }, [onCollapseChangeCallback]);
   const [language, setLanguage] = useState(getLanguage());
   const [urlParams, setUrlParams] = useUrlSearchParams({}, {
     disabled: disableUrlParams
   });
   const [settingState, setSettingStateInner] = useControlledState(() => getParamsFromUrl(urlParams, propsSettings || propsDefaultSettings), propsSettings);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onSettingChangeCallback = useRefFunction(settings => {
+    onSettingChange?.(settings);
+  });
+
+  /**
+   * 使用 queueMicrotask 延迟回调调用，避免在渲染阶段调用外部回调导致的 React 警告
+   * "Cannot update a component while rendering a different component"
+   */
   const setSettingState = useCallback(updater => {
     setSettingStateInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      onSettingChange?.(next);
+      queueMicrotask(() => {
+        onSettingChangeCallback(next);
+      });
       return next;
     });
-  }, [onSettingChange]);
+  }, [onSettingChangeCallback]);
   const {
     navTheme,
     colorPrimary,

package/es/layout/components/TopNavHeader/style.js

@@ -2,6 +2,7 @@ import { useStyle as useAntdStyle } from "../../../provider";
 const genTopNavHeaderStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       position: 'relative',
       width: '100%',
       height: '100%',

package/es/list/ListView.js

@@ -169,6 +169,9 @@ function ListView(props) {
           onChange: /*#__PURE__*/React.isValidElement(checkboxDom) ? changeChecked => {
             return checkboxDom?.props?.onChange({
               nativeEvent: {},
+              target: {
+                checked: changeChecked
+              },
               changeChecked
             });
           } : undefined

package/es/provider/index.d.ts

@@ -50,10 +50,6 @@ export type BaseProFieldFC = {
      * @option edit 渲染编辑模式
      * */
     mode?: ProFieldFCMode;
-    /**
-     * 简约模式
-     */
-    plain?: boolean;
     /** 轻量模式 */
     light?: boolean;
     /** Label */

package/es/provider/useStyle/index.js

@@ -58,8 +58,7 @@ export function useStyle(componentName, styleFn) {
   // eslint-disable-next-line prefer-const
   let {
     token = {},
-    hashed,
-    prefixCls
+    hashed
   } = useContext(ProProvider);
   const {
     token: antdToken,

package/es/table/components/Alert/style.js

@@ -2,6 +2,7 @@ import { setAlpha, useStyle as useAntdStyle } from "../../../provider";
 const genProStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       marginBlockEnd: 16,
       backgroundColor: setAlpha(token.colorTextBase, 0.02),
       borderRadius: token.borderRadius,

package/es/table/components/ColumnSetting/style.js

@@ -2,6 +2,7 @@ import { useStyle as useAntdStyle } from "../../../provider";
 const genProStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       width: 'auto',
       '&-title': {
         display: 'flex',

package/es/table/components/DragSortTable/style.js

@@ -2,6 +2,7 @@ import { useStyle as useAntdStyle } from "../../../provider";
 const genProListStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       '&-icon': {
         marginInlineEnd: 8,
         color: token.colorTextSecondary,

package/es/table/components/ListToolBar/style.js

@@ -2,6 +2,7 @@ import { useStyle as useAntdStyle } from "../../../provider";
 const genProListStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       lineHeight: '1',
       '&-container': {
         display: 'flex',

package/es/table/useFetchData.js

@@ -61,13 +61,27 @@ const useFetchData = (getData, defaultData, options) => {
    */
   const tableLoadingValue = typeof options?.loading === 'object' ? options?.loading?.spinning : options?.loading;
   const [tableLoading, setTableLoadingInner] = useControlledState(false, tableLoadingValue);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onLoadingChange = useRefFunction(loading => {
+    options?.onLoadingChange?.(loading);
+  });
+
+  /**
+   * 包装 setTableLoading，使用 queueMicrotask 延迟回调调用
+   * 避免在渲染阶段调用外部回调导致的 React 警告
+   */
   const setTableLoading = useCallback(updater => {
     setTableLoadingInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      options?.onLoadingChange?.(next);
+      queueMicrotask(() => {
+        onLoadingChange(next);
+      });
       return next;
     });
-  }, [options?.onLoadingChange]);
+  }, [onLoadingChange]);
 
   /**
    * 表示页面信息的类型

package/es/utils/components/DropdownFooter/style.js

@@ -2,6 +2,7 @@ import { useStyle as useAntdStyle } from "../../../provider";
 const genProStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       display: 'flex',
       justifyContent: 'space-between',
       paddingBlock: 8,

package/es/utils/components/FieldLabel/index.js

@@ -28,7 +28,6 @@ const FieldLabelFunction = (props, ref) => {
   } = ConfigProvider?.useConfig?.() || {
     componentSize: 'middle'
   };
-  const size = componentSize;
   const {
     getPrefixCls
   } = useContext(ConfigProvider.ConfigContext);
@@ -113,10 +112,11 @@ const FieldLabelFunction = (props, ref) => {
     return aLabel || placeholder;
   };
   return wrapSSR( /*#__PURE__*/_jsxs("span", {
-    className: clsx(prefixCls, hashId, `${prefixCls}-${props.size ?? size ?? 'middle'}`, {
+    className: clsx(prefixCls, hashId, `${prefixCls}-${props.size ?? componentSize ?? 'middle'}`, {
+      [`${prefixCls}-${variant || 'borderless'}-active`]: (Array.isArray(value) ? value.length > 0 : !!value) || value === 0,
       [`${prefixCls}-active`]: (Array.isArray(value) ? value.length > 0 : !!value) || value === 0,
       [`${prefixCls}-disabled`]: disabled,
-      [`${prefixCls}-bordered`]: variant !== 'borderless',
+      [`${prefixCls}-${variant}`]: variant,
       [`${prefixCls}-allow-clear`]: allowClear
     }, className),
     style: style,

package/es/utils/components/FieldLabel/style.js

@@ -2,6 +2,7 @@ import { useStyle as useAntdStyle } from "../../../provider";
 const genProStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       display: 'inline-flex',
       gap: token.marginXXS,
       alignItems: 'center',
@@ -10,7 +11,8 @@ const genProStyle = token => {
       paddingInline: 8,
       fontSize: token.fontSize,
       lineHeight: '30px',
-      borderRadius: '2px',
+      borderRadius: token.borderRadius,
+      cornerShape: 'squircle',
       cursor: 'pointer',
       '&:hover': {
         backgroundColor: token.colorBgTextHover
@@ -18,7 +20,6 @@ const genProStyle = token => {
       '&-active': {
         paddingBlock: 0,
         paddingInline: 8,
-        backgroundColor: token.colorBgTextHover,
         [`&${token.componentCls}-allow-clear:hover:not(${token.componentCls}-disabled)`]: {
           [`${token.componentCls}-arrow`]: {
             display: 'none'
@@ -83,12 +84,39 @@ const genProStyle = token => {
           fontSize: '6px'
         }
       },
-      '&-bordered': {
+      '&-outlined': {
         height: '32px',
         paddingBlock: 0,
         paddingInline: 8,
         border: `${token.lineWidth}px solid ${token.colorBorder}`,
-        borderRadius: '@border-radius-base'
+        borderRadius: token.borderRadius,
+        '&-active': {
+          backgroundColor: 'none'
+        }
+      },
+      '&-borderless': {
+        height: '32px',
+        '&-active': {
+          backgroundColor: token.colorBgTextHover
+        }
+      },
+      '&-filled': {
+        height: '32px',
+        backgroundColor: token.colorBgTextHover,
+        border: `${token.lineWidth}px solid transparent`,
+        '&:hover': {
+          border: `${token.lineWidth}px solid ${token.colorPrimary}`,
+          backgroundColor: token.colorBgTextHover
+        }
+      },
+      '&-underlined': {
+        height: '32px',
+        borderRadius: 0,
+        borderBottom: `${token.lineWidth}px solid ${token.colorSplit}`,
+        '&:hover': {
+          borderBottom: `${token.lineWidth}px solid ${token.colorPrimary}`,
+          backgroundColor: token.colorBgTextHover
+        }
       },
       '&-bordered&-small': {
         height: '24px',

package/es/utils/components/FilterDropdown/index.js

@@ -61,7 +61,7 @@ const FilterDropdown = props => {
       })]
     }),
     children: /*#__PURE__*/_jsx("span", {
-      className: `${prefixCls}-label ${hashId}`.trim(),
+      className: clsx(`${prefixCls}-label`, hashId),
       children: label
     })
   }));

package/es/utils/components/FilterDropdown/style.js

@@ -4,6 +4,16 @@ const genProStyle = token => {
     [`${token.componentCls}-label`]: {
       cursor: 'pointer'
     },
+    [`${token.componentCls}-label-bordered`]: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      height: token.controlHeight,
+      paddingBlock: 0,
+      paddingInline: token.paddingSM,
+      border: `${token.lineWidth}px solid ${token.colorBorder}`,
+      borderRadius: token.borderRadius,
+      boxSizing: 'border-box'
+    },
     [`${token.componentCls}-overlay`]: {
       minWidth: '200px',
       marginBlockStart: '4px'

package/es/utils/components/InlineErrorFormItem/style.js

@@ -3,6 +3,7 @@ const genProStyle = token => {
   const progressBgCls = `${token.antCls}-progress-bg`;
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       '&-multiple': {
         paddingBlockStart: 6,
         paddingBlockEnd: 12,

package/es/utils/components/LabelIconTip/style.js

@@ -2,6 +2,7 @@ import { useStyle as useAntdStyle } from "../../../provider";
 const genProStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       display: 'inline-flex',
       alignItems: 'center',
       maxWidth: '100%',

package/es/utils/pickProProps/index.js

@@ -1,4 +1,4 @@
-const proFieldProps = `valueType request plain formItemRender render text formItemProps valueEnum`;
+const proFieldProps = `valueType request formItemRender render text formItemProps valueEnum`;
 const proFormProps = `fieldProps isDefaultDom groupProps contentRender submitterProps submitter`;
 export function pickProProps(props, customValueType = false) {
   const propList = `${proFieldProps} ${proFormProps}`.split(/[\s\n]+/);

package/es/utils/useSelection.js

@@ -1,4 +1,4 @@
-import { Checkbox } from 'antd';
+import { Checkbox, Radio } from 'antd';
 import React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 function useSelection(config, rowSelection) {
@@ -18,6 +18,20 @@ function useSelection(config, rowSelection) {
   const selectedKeySet = React.useMemo(() => new Set(innerKeys), [innerKeys]);
   const toggleKey = React.useCallback((key, record, checked) => {
     setInnerKeys(prevKeys => {
+      if (rowSelection?.type === 'radio') {
+        const nextKeys = [key];
+        const selectedRows = [record];
+        rowSelection?.onChange?.(nextKeys, selectedRows, {
+          type: 'single',
+          selectedRows,
+          selectedRowKeys: nextKeys
+        });
+        rowSelection?.onSelect?.(record, checked, selectedRows, {});
+        if (!controlledKeys) {
+          return nextKeys;
+        }
+        return prevKeys;
+      }
       const prevSet = new Set(prevKeys);
       const next = new Set(prevSet);
       if (checked) {
@@ -43,10 +57,21 @@ function useSelection(config, rowSelection) {
   }, [data, getRowKey, rowSelection, controlledKeys]);
   const selectItemRender = React.useCallback(columns => {
     void columns;
+    if (!rowSelection) {
+      return [];
+    }
     return [{
       render: (_text, record, index) => {
         const key = getRowKey(record, index);
         const checked = selectedKeySet.has(key);
+        if (rowSelection?.type === 'radio') {
+          return /*#__PURE__*/_jsx(Radio, {
+            checked: checked,
+            onChange: e => {
+              toggleKey(key, record, e.target.checked);
+            }
+          });
+        }
         return /*#__PURE__*/_jsx(Checkbox, {
           checked: checked,
           onChange: e => {
@@ -55,7 +80,7 @@ function useSelection(config, rowSelection) {
         });
       }
     }];
-  }, [getRowKey, selectedKeySet, toggleKey]);
+  }, [getRowKey, selectedKeySet, toggleKey, rowSelection?.type]);
   return [selectItemRender, selectedKeySet];
 }
 export default useSelection;

package/lib/card/components/Actions/style.js

@@ -12,6 +12,7 @@ const genActionsStyle = token => {
   } = token;
   return {
     [`${componentCls}-actions`]: {
+      boxSizing: 'border-box',
       marginBlock: 0,
       marginInline: 0,
       paddingBlock: 0,

package/lib/card/components/Card/index.js

@@ -68,13 +68,27 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     xxl: false
   };
   const [collapsed, setCollapsedInner] = (0, _util.useControlledState)(defaultCollapsed, controlCollapsed);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onCollapseCallback = (0, _utils.useRefFunction)(c => {
+    onCollapse?.(c);
+  });
+
+  /**
+   * 使用 queueMicrotask 延迟回调调用，避免在渲染阶段调用外部回调导致的 React 警告
+   * "Cannot update a component while rendering a different component"
+   */
   const setCollapsed = (0, _react.useCallback)(updater => {
     setCollapsedInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      onCollapse?.(next);
+      queueMicrotask(() => {
+        onCollapseCallback(next);
+      });
       return next;
     });
-  }, [onCollapse]);
+  }, [onCollapseCallback]);
 
   // 顺序决定如何进行响应式取值，按最大响应值依次取值，请勿修改。
   const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];

package/lib/card/components/CheckCard/style.js

@@ -41,6 +41,7 @@ const cardLoading = exports.cardLoading = new _cssinjs.Keyframes('card-loading',
 const genProStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       position: 'relative',
       display: 'inline-block',
       width: '320px',

package/lib/card/components/Divider/style.js

@@ -11,6 +11,7 @@ const genDividerStyle = token => {
   } = token;
   return {
     [componentCls]: {
+      boxSizing: 'border-box',
       '&-divider': {
         flex: 'none',
         width: token.lineWidth,

package/lib/card/components/Loading/style.js

@@ -21,6 +21,7 @@ const cardLoading = exports.cardLoading = new _cssinjs.Keyframes('card-loading',
 const genProStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       '&-loading': {
         overflow: 'hidden'
       },

package/lib/card/components/Operation/style.js

@@ -8,6 +8,7 @@ var _provider = require("../../../provider");
 const genProStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'flex-end',

package/lib/card/components/Statistic/style.js

@@ -8,6 +8,7 @@ var _provider = require("../../../provider");
 const genProStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       display: 'flex',
       fontSize: token.fontSize,
       '& + &': {

package/lib/card/components/StatisticCard/style.js

@@ -8,6 +8,7 @@ var _provider = require("../../../provider");
 const genProStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       '&-chart': {
         display: 'flex',
         flexDirection: 'column',

package/lib/descriptions/useFetchData.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _util = require("@rc-component/util");
 var _react = require("react");
+var _utils = require("../utils");
 const useFetchData = (getData, options) => {
   const {
     onRequestError,
@@ -24,13 +25,27 @@ const useFetchData = (getData, options) => {
     });
   }, [onDataSourceChange]);
   const [loading, setLoadingInner] = (0, _util.useControlledState)(options?.loading, options?.loading);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onLoadingChange = (0, _utils.useRefFunction)(l => {
+    options?.onLoadingChange?.(l);
+  });
+
+  /**
+   * 包装 setLoading，使用 queueMicrotask 延迟回调调用
+   * 避免在渲染阶段调用外部回调导致的 React 警告
+   */
   const setLoading = (0, _react.useCallback)(updater => {
     setLoadingInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      options?.onLoadingChange?.(next);
+      queueMicrotask(() => {
+        onLoadingChange(next);
+      });
       return next;
     });
-  }, [options?.onLoadingChange]);
+  }, [onLoadingChange]);
   const updateDataAndLoading = data => {
     setEntity(data);
     setLoading(false);

package/lib/field/components/Cascader/index.js

@@ -20,7 +20,6 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @param ref
  */
 const FieldCascader = ({
-  radioType,
   placeholder,
   formItemRender,
   mode,
@@ -85,7 +84,6 @@ const FieldCascader = ({
   if (mode === 'edit') {
     const fieldProps = rest.fieldProps || {};
     let dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Cascader, {
-      variant: !light ? variant : 'borderless',
       ref: cascaderRef,
       open: open,
       suffixIcon: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LoadingOutlined, {}) : undefined,

package/lib/field/components/Checkbox/index.js

@@ -107,6 +107,7 @@ const FieldCheckbox = ({
   if (mode === 'edit') {
     const {
       fieldNames,
+      variant,
       ...restFieldProps
     } = rest.fieldProps || {};
     const dom = wrapSSR(
@@ -114,6 +115,7 @@ const FieldCheckbox = ({
     //@ts-ignore
     (0, _jsxRuntime.jsx)(_antd.Checkbox.Group, {
       ...restFieldProps,
+      variant: variant,
       className: (0, _clsx.clsx)(rest.fieldProps?.className, hashId, `${layoutClassName}-${layout}`, {
         [`${layoutClassName}-error`]: status?.status === 'error',
         [`${layoutClassName}-warning`]: status?.status === 'warning'

package/lib/field/components/Code/index.js

@@ -34,7 +34,6 @@ const FieldCode = ({
   render,
   language = 'text',
   formItemRender,
-  plain,
   fieldProps
 }, ref) => {
   const code = languageFormat(text, language);
@@ -72,17 +71,11 @@ const FieldCode = ({
   }
   if (mode === 'edit' || mode === 'update') {
     fieldProps.value = code;
-    let dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input.TextArea, {
+    const dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input.TextArea, {
       rows: 5,
       ...fieldProps,
       ref: ref
     });
-    if (plain) {
-      dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input, {
-        ...fieldProps,
-        ref: ref
-      });
-    }
     if (formItemRender) {
       return formItemRender(code, {
         mode,

package/lib/field/components/DatePicker/index.js

@@ -36,12 +36,11 @@ const FieldDatePicker = ({
   light,
   render,
   formItemRender,
-  plain,
   showTime,
   fieldProps,
   picker,
-  variant,
-  lightLabel
+  lightLabel,
+  variant
 }, ref) => {
   const intl = (0, _provider.useIntl)();
   const [open, setOpen] = (0, _react.useState)(false);
@@ -89,7 +88,6 @@ const FieldDatePicker = ({
             setOpen(isOpen);
             fieldProps?.onOpenChange?.(isOpen);
           },
-          variant: "borderless",
           open: open
         }) : undefined,
         allowClear: false,
@@ -103,7 +101,7 @@ const FieldDatePicker = ({
         showTime: showTime,
         format: format,
         placeholder: placeholder,
-        variant: plain === undefined ? variant : plain ? 'borderless' : 'outlined',
+        variant: variant,
         ref: ref,
         ...fieldProps,
         value: dayValue

package/lib/field/components/FromNow/index.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
     text: string;
     format?: string | undefined;
+    variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
 } & React.RefAttributes<any>>;
 export default _default;

package/lib/field/components/FromNow/index.js

@@ -21,7 +21,7 @@ _dayjs.default.extend(_relativeTime.default);
 const FieldFromNow = ({
   text,
   mode,
-  plain,
+  variant,
   render,
   formItemRender,
   format,
@@ -52,7 +52,7 @@ const FieldFromNow = ({
       ref: ref,
       placeholder: placeholder,
       showTime: true,
-      variant: plain === undefined ? 'outlined' : plain ? 'borderless' : 'outlined',
+      variant: variant ?? fieldProps?.variant ?? 'outlined',
       ...fieldProps,
       value: momentValue
     });

package/lib/field/components/Money/index.js

@@ -172,7 +172,6 @@ const FieldMoney = ({
   formItemRender,
   fieldProps,
   proFieldKey,
-  plain,
   valueEnum,
   placeholder,
   locale,