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

package/es/layout/ProLayout.js

@@ -5,7 +5,7 @@ import { clsx } from 'clsx';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import useSWR, { useSWRConfig } from 'swr';
 import { ProConfigProvider, ProProvider, isNeedOpenHash } from "../provider";
-import { isBrowser, useBreakpoint, useDocumentTitle } from "../utils";
+import { isBrowser, useBreakpoint, useDocumentTitle, useRefFunction } from "../utils";
 import { Logo } from "./assert/Logo";
 import { DefaultFooter as Footer } from "./components/Footer";
 import { DefaultHeader as Header } from "./components/Header";
@@ -165,13 +165,27 @@ const BaseProLayout = props => {
   const context = useContext(ConfigProvider.ConfigContext);
   const prefixCls = props.prefixCls ?? context.getPrefixCls('pro');
   const [menuLoading, setMenuLoadingInner] = useControlledState(false, menu?.loading);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const menuOnLoadingChange = useRefFunction(loading => {
+    menu?.onLoadingChange?.(loading);
+  });
+
+  /**
+   * 包装 setMenuLoading，使用 queueMicrotask 延迟回调调用
+   * 避免在渲染阶段调用外部回调导致的 React 警告
+   */
   const setMenuLoading = useCallback(updater => {
     setMenuLoadingInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      menu?.onLoadingChange?.(next);
+      queueMicrotask(() => {
+        menuOnLoadingChange(next);
+      });
       return next;
     });
-  }, [menu?.onLoadingChange]);
+  }, [menuOnLoadingChange]);
 
   // give a default key for swr
   const [defaultId] = useState(() => {
@@ -272,13 +286,27 @@ const BaseProLayout = props => {
     if (colSize === 'md') return true;
     return false;
   }, props.collapsed);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onCollapseCallback = useRefFunction(c => {
+    propsOnCollapse?.(c);
+  });
+
+  /**
+   * 使用 queueMicrotask 延迟回调调用，避免在渲染阶段调用外部回调导致的 React 警告
+   * "Cannot update a component while rendering a different component"
+   */
   const onCollapse = useCallback(updater => {
     onCollapseInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      propsOnCollapse?.(next);
+      queueMicrotask(() => {
+        onCollapseCallback(next);
+      });
       return next;
     });
-  }, [propsOnCollapse]);
+  }, [onCollapseCallback]);
 
   // Splicing parameters, adding menuData and formatMessage in props
   const defaultProps = omit({

package/es/layout/components/AppsLogoComponents/style/index.js

@@ -22,6 +22,7 @@ const genAppsLogoComponentsStyle = token => {
           backgroundColor: token.layout?.colorBgAppListIconHover
         },
         '&-active': {
+          borderRadius: token.borderRadius,
           color: token.layout?.colorTextAppListIconHover,
           backgroundColor: token.layout?.colorBgAppListIconHover
         }

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/SiderMenu/BaseMenu.js

@@ -8,8 +8,6 @@ import { isImg, isUrl } from "../../../utils";
 import { defaultSettings } from "../../defaultSettings";
 import { getOpenKeysFromMenuData } from "../../utils/utils";
 import { useStyle } from "./style/menu";
-
-// todo
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";

package/es/list/ListView.js

@@ -1,11 +1,11 @@
 import { get } from '@rc-component/util';
 import { ConfigProvider, List } from 'antd';
-import useLazyKVMap from 'antd/lib/table/hooks/useLazyKVMap';
-import usePagination from 'antd/lib/table/hooks/usePagination';
-import useSelection from 'antd/lib/table/hooks/useSelection';
 import { clsx } from 'clsx';
 import React, { useContext } from 'react';
 import { ProProvider } from "../provider";
+import useLazyKVMap from "../utils/useLazyKVMap";
+import usePagination from "../utils/usePagination";
+import useSelection from "../utils/useSelection";
 import { PRO_LIST_KEYS_MAP } from "./constants";
 import ProListItem from "./Item";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -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/index.js

@@ -1,6 +1,6 @@
 import { useCacheToken } from '@ant-design/cssinjs';
 import { ConfigProvider as AntdConfigProvider, theme as antdTheme } from 'antd';
-import zh_CN from 'antd/lib/locale/zh_CN';
+import zh_CN from 'antd/es/locale/zh_CN';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import React, { useContext, useEffect, useMemo } from 'react';

package/es/table/Store/Provide.d.ts

@@ -13,7 +13,6 @@ export type ColumnsState = {
 };
 export type ProTableColumn<T> = ColumnsState & TableColumnType<T>;
 export type UseContainerProps<T = any> = {
-    onColumnsStateChange?: (map: Record<string, ColumnsState>) => void;
     size?: DensitySize;
     defaultSize?: DensitySize;
     onSizeChange?: (size: DensitySize) => void;

package/es/table/Store/Provide.js

@@ -69,7 +69,7 @@ function useContainer(props = {}) {
     }
     return props.columnsState?.value || props.columnsState?.defaultValue || defaultColumnKeyMap;
   }, props.columnsState?.value);
-  const onColumnsMapChange = props.columnsState?.onChange || props.onColumnsStateChange;
+  const onColumnsMapChange = props.columnsState?.onChange;
   const setColumnsMap = useCallback(updater => {
     setColumnsMapInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;

package/es/table/Table.js

@@ -786,7 +786,6 @@ const ProviderTableContainer = props => {
       ...props,
       columnsState: props.columnsState,
       columns: props.columns,
-      onColumnsStateChange: props.onColumnsStateChange,
       onSizeChange: props.onSizeChange,
       size: props.size,
       defaultSize: props.defaultSize

package/es/table/typing.d.ts

@@ -162,10 +162,6 @@ export type ProTableProps<DataSource, U, ValueType = 'text'> = {
     params?: U;
     /** @name 列状态的配置，可以用来操作列功能 */
     columnsState?: ColumnStateType;
-    /**
-     * @deprecated 请使用 columnsState.onChange。保留兼容，后续版本将移除。
-     */
-    onColumnsStateChange?: (map: Record<string, ColumnsState>) => void;
     onSizeChange?: (size: DensitySize) => void;
     /**
      * @name table 外面卡片的设置

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/table/utils/cellRenderToFromItem.d.ts

@@ -1,4 +1,4 @@
-import { AnyObject } from 'antd/lib/_util/type';
+import type { AnyObject } from 'antd/lib/_util/type';
 import React from 'react';
 import type { ProFieldEmptyText } from '../../field';
 import type { ProFormFieldProps } from '../../form';

package/es/table/utils/columnRender.d.ts

@@ -1,4 +1,4 @@
-import { AnyObject } from 'antd/lib/_util/type';
+import type { AnyObject } from 'antd/lib/_util/type';
 import React from 'react';
 import type { ProFieldEmptyText } from '../../field';
 import type { ProSchemaComponentTypes, UseEditableUtilType } from '../../utils';

package/es/table/utils/columnRender.js

@@ -17,10 +17,7 @@ export const renderColumnsTitle = item => {
   } = item;
   const ellipsis = typeof item?.ellipsis === 'boolean' ? item?.ellipsis : item?.ellipsis?.showTitle;
   if (title && typeof title === 'function') {
-    return title(item, 'table', /*#__PURE__*/_jsx(LabelIconTip, {
-      label: null,
-      tooltip: item.tooltip
-    }));
+    return title(item, 'table', null);
   }
   return /*#__PURE__*/_jsx(LabelIconTip, {
     label: title,

package/es/table/utils/genProColumnToColumn.d.ts

@@ -1,6 +1,6 @@
 import type { TableColumnType, TableProps } from 'antd';
-import { AnyObject } from 'antd/lib/_util/type';
-import { SortOrder } from 'antd/lib/table/interface';
+import type { AnyObject } from 'antd/lib/_util/type';
+import type { SortOrder } from 'antd/lib/table/interface';
 import type { ProFieldEmptyText } from '../../field';
 import type { ProSchemaComponentTypes, UseEditableUtilType } from '../../utils';
 import type { ContainerType } from '../Store/Provide';

package/es/table/utils/index.d.ts

@@ -75,22 +75,12 @@ export declare const flattenColumns: (data: any[]) => any[];
  * @returns 是否为本地筛选
  */
 export declare const isLocalFilter: <T>(filters: ProColumnType<T>['filters'], onFilter: ProColumnType<T>['onFilter']) => boolean;
-/**
- * @deprecated typo kept for backward compatibility
- * use `isLocalFilter` instead
- */
-export declare const isLocaleFilter: <T>(filters: ProColumnType<T>['filters'], onFilter: ProColumnType<T>['onFilter']) => boolean;
 /**
  * 判断是否为本地排序
  * @param sorter 排序配置
  * @returns 是否为本地排序
  */
 export declare const isLocalSorter: <T>(sorter: ProSorter<T>) => boolean;
-/**
- * @deprecated typo kept for backward compatibility
- * use `isLocalSorter` instead
- */
-export declare const isLocaleSorter: <T>(sorter: ProSorter<T>) => boolean;
 /**
  * 获取服务端筛选数据
  * @param filters 筛选数据

package/es/table/utils/index.js

@@ -170,12 +170,6 @@ export const isLocalFilter = (filters, onFilter) => {
   return !!filters && !!onFilter;
 };
 
-/**
- * @deprecated typo kept for backward compatibility
- * use `isLocalFilter` instead
- */
-export const isLocaleFilter = isLocalFilter;
-
 /**
  * 判断是否为本地排序
  * @param sorter 排序配置
@@ -185,12 +179,6 @@ export const isLocalSorter = sorter => {
   return typeof sorter === 'function' || typeof sorter === 'object' && typeof sorter.compare === 'function';
 };
 
-/**
- * @deprecated typo kept for backward compatibility
- * use `isLocalSorter` instead
- */
-export const isLocaleSorter = isLocalSorter;
-
 /**
  * 获取服务端筛选数据
  * @param filters 筛选数据

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}-outlined`]: variant === 'outlined',
       [`${prefixCls}-allow-clear`]: allowClear
     }, className),
     style: style,

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

@@ -10,7 +10,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 +19,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 +83,31 @@ 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',
+        paddingBlock: 0,
+        paddingInline: 8,
+        border: 'none',
+        borderRadius: token.borderRadius,
+        '&-active': {
+          backgroundColor: token.colorBgContainer
+        }
       },
       '&-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/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/useEditableArray/index.d.ts

@@ -1,5 +1,5 @@
 import type { FormInstance, FormProps } from 'antd';
-import { AnyObject } from 'antd/lib/_util/type';
+import type { AnyObject } from 'antd/lib/_util/type';
 import type { NamePath } from 'antd/lib/form/interface';
 import type { GetRowKey } from 'antd/lib/table/interface';
 import React from 'react';

package/es/utils/useEditableArray/index.js

@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */import { LoadingOutlined } from '@ant-design/icons';
 import { get, warning as rcWarning, set, useControlledState } from '@rc-component/util';
 import { Form, Popconfirm, message } from 'antd';
-import useLazyKVMap from 'antd/lib/table/hooks/useLazyKVMap';
 import React, { createRef, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useDebounceFn, useRefFunction } from '..';
 import { useIntl } from "../../provider";
@@ -9,6 +8,7 @@ import { ProFormContext } from "../components/ProFormContext";
 import { useDeepCompareEffectDebounce } from "../hooks/useDeepCompareEffect";
 import { usePrevious } from "../hooks/usePrevious";
 import { merge } from "../merge";
+import useLazyKVMap from "../useLazyKVMap";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const {

package/es/utils/useLazyKVMap.d.ts

@@ -0,0 +1,5 @@
+import type { AnyObject } from 'antd/lib/_util/type';
+import type { GetRowKey } from 'antd/lib/table/interface';
+import React from 'react';
+declare const useLazyKVMap: <RecordType extends AnyObject = AnyObject>(data: readonly RecordType[], childrenColumnName: string, getRowKey: GetRowKey<RecordType>) => readonly [(key: React.Key) => RecordType | undefined];
+export default useLazyKVMap;

package/es/utils/useLazyKVMap.js

@@ -0,0 +1,28 @@
+import { useRef } from 'react';
+const useLazyKVMap = (data, childrenColumnName, getRowKey) => {
+  const mapCacheRef = useRef({});
+  function getRecordByKey(key) {
+    function dig(records, kv) {
+      records.forEach((record, index) => {
+        const rowKey = getRowKey(record, index);
+        kv.set(rowKey, record);
+        if (record && typeof record === 'object' && childrenColumnName in record) {
+          dig(record[childrenColumnName] || [], kv);
+        }
+      });
+    }
+    if (!mapCacheRef.current || mapCacheRef.current.data !== data || mapCacheRef.current.childrenColumnName !== childrenColumnName || mapCacheRef.current.getRowKey !== getRowKey) {
+      const kvMap = new Map();
+      dig(data, kvMap);
+      mapCacheRef.current = {
+        data,
+        childrenColumnName,
+        kvMap,
+        getRowKey
+      };
+    }
+    return mapCacheRef.current.kvMap?.get(key);
+  }
+  return [getRecordByKey];
+};
+export default useLazyKVMap;

package/es/utils/useMediaQuery/index.d.ts

@@ -35,6 +35,6 @@ export type MediaQueryKey = keyof typeof MediaQueryEnum;
  * `Rendered more hooks than during the previous render.`
  * So should use Array.forEach
  */
-export declare const getScreenClassName: () => "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined;
-declare const useBreakpoint: () => "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined;
+export declare const getScreenClassName: () => "xxl" | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
+declare const useBreakpoint: () => "xxl" | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
 export { useBreakpoint };

package/es/utils/usePagination.d.ts

@@ -0,0 +1,8 @@
+import type { TablePaginationConfig } from 'antd/es/table/interface';
+export declare const DEFAULT_PAGE_SIZE = 10;
+export declare function getPaginationParam(mergedPagination: TablePaginationConfig, pagination?: TablePaginationConfig | boolean): any;
+declare function usePagination(total: number, onChange: (current: number, pageSize: number) => void, pagination?: TablePaginationConfig | false): readonly [
+    TablePaginationConfig,
+    (current?: number, pageSize?: number) => void
+];
+export default usePagination;

package/es/utils/usePagination.js

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+export const DEFAULT_PAGE_SIZE = 10;
+function extendsObject(base, override, extra = {}) {
+  return {
+    ...base,
+    ...override,
+    ...extra
+  };
+}
+export function getPaginationParam(mergedPagination, pagination) {
+  const param = {
+    current: mergedPagination.current,
+    pageSize: mergedPagination.pageSize
+  };
+  const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
+  Object.keys(paginationObj).forEach(pageProp => {
+    const value = mergedPagination[pageProp];
+    if (typeof value !== 'function') {
+      param[pageProp] = value;
+    }
+  });
+  return param;
+}
+function usePagination(total, onChange, pagination) {
+  const {
+    total: paginationTotal = 0,
+    ...paginationObj
+  } = pagination && typeof pagination === 'object' ? pagination : {};
+  const [innerPagination, setInnerPagination] = useState(() => ({
+    current: 'defaultCurrent' in paginationObj ? paginationObj.defaultCurrent : 1,
+    pageSize: 'defaultPageSize' in paginationObj ? paginationObj.defaultPageSize : DEFAULT_PAGE_SIZE
+  }));
+
+  // ============ Basic Pagination Config ============
+  const mergedPagination = extendsObject(innerPagination, paginationObj, {
+    total: paginationTotal > 0 ? paginationTotal : total
+  });
+
+  // Reset `current` if data length or pageSize changed
+  const pageSize = mergedPagination.pageSize || DEFAULT_PAGE_SIZE;
+  const maxPage = Math.ceil((paginationTotal || total) / pageSize);
+  if ((mergedPagination.current || 1) > maxPage) {
+    // Prevent a maximum page count of 0
+    mergedPagination.current = maxPage || 1;
+  }
+  const refreshPagination = (current, pageSizeArg) => {
+    setInnerPagination({
+      current: current ?? 1,
+      pageSize: pageSizeArg || mergedPagination.pageSize
+    });
+  };
+  const onInternalChange = (current, pageSizeArg) => {
+    if (pagination && typeof pagination === 'object') {
+      pagination.onChange?.(current, pageSizeArg);
+    }
+    refreshPagination(current, pageSizeArg);
+    onChange(current, pageSizeArg || mergedPagination.pageSize);
+  };
+  if (pagination === false) {
+    return [{}, () => {}];
+  }
+  return [{
+    ...mergedPagination,
+    onChange: onInternalChange
+  }, refreshPagination];
+}
+export default usePagination;

package/es/utils/useSelection.d.ts

@@ -0,0 +1,19 @@
+import type { GetRowKey, TableRowSelection } from 'antd/lib/table/interface';
+import React from 'react';
+type UseSelectionConfig<RecordType> = {
+    getRowKey: GetRowKey<RecordType>;
+    getRecordByKey: (key: React.Key) => RecordType | undefined;
+    prefixCls?: string;
+    data: RecordType[];
+    pageData: RecordType[];
+    expandType?: 'row' | 'nest';
+    childrenColumnName?: string;
+    locale?: any;
+};
+declare function useSelection<RecordType>(config: UseSelectionConfig<RecordType>, rowSelection?: TableRowSelection<RecordType>): readonly [
+    (columns?: any[]) => Array<{
+        render: (text: any, record: RecordType, index: number) => React.ReactElement;
+    }>,
+    Set<React.Key>
+];
+export default useSelection;