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

package/es/list/style/index.js

@@ -1,71 +1,195 @@
 import { Keyframes } from '@ant-design/cssinjs';
-import { useStyle as useAntdStyle } from "../../provider";
-export const techUiListActive = new Keyframes('techUiListActive', {
+import { setAlpha, useStyle as useAntdStyle } from "../../provider";
+const genTechUiListActiveKeyframes = token => new Keyframes('techUiListActive', {
   '0%': {
     backgroundColor: 'unset'
   },
   '30%': {
-    background: '#fefbe6'
+    background: token.colorWarningBg ?? setAlpha(token.colorWarning, 0.15)
   },
   '100%': {
     backgroundColor: 'unset'
   }
 });
 const genProListStyle = token => {
+  const techUiListActive = genTechUiListActiveKeyframes(token);
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
+      '*, *::before, *::after': {
+        boxSizing: 'border-box'
+      },
       backgroundColor: 'transparent',
+      // 确保链接使用默认链接颜色，不被父元素的文本颜色覆盖
+      a: {
+        color: token.colorLink,
+        '&:hover': {
+          color: token.colorLinkHover
+        },
+        '&:active': {
+          color: token.colorLinkActive
+        }
+      },
       [`${token.proComponentsCls}-table-alert`]: {
-        marginBlockEnd: '16px'
+        marginBlockEnd: token.margin
+      },
+      [`${token.proComponentsCls}-list-item`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        cursor: 'pointer',
+        flex: 1,
+        minWidth: 0,
+        padding: token.paddingXS,
+        alignItems: 'flex-start',
+        borderRadius: token.borderRadius,
+        listStyle: 'none',
+        '& > *:first-child': {
+          flex: 1,
+          minWidth: 0
+        }
+      },
+      '&-filled': {
+        backgroundColor: token.colorFillQuaternary,
+        borderRadius: token.borderRadius,
+        [`${token.componentCls}-toolbar`]: {
+          borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
+        }
+      },
+      '&-outlined': {
+        border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+        borderRadius: token.borderRadius
+      },
+      '&-borderless': {
+        [`${token.componentCls}-toolbar`]: {
+          borderBlockEnd: 'none'
+        }
+      },
+      [`${token.proComponentsCls}-list-item-meta`]: {
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        minWidth: 0,
+        gap: token.marginXS
+      },
+      [`${token.proComponentsCls}-list-item-meta-title`]: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: token.marginXS,
+        borderBlockEnd: 'none',
+        margin: 0,
+        minWidth: 0
+      },
+      '&-split': {
+        [`${token.componentCls}-row`]: {
+          borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+          '&:last-child': {
+            borderBlockEnd: 'none'
+          }
+        },
+        [`${token.proComponentsCls}-list-item`]: {
+          borderRadius: 0,
+          borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+          '&:last-child': {
+            borderBlockEnd: 'none'
+          }
+        }
+      },
+      '&-no-split': {
+        [`${token.componentCls}-row`]: {
+          borderBlockEnd: 'none'
+        },
+        [`${token.proComponentsCls}-list ${token.proComponentsCls}-list-item`]: {
+          borderBlockEnd: 'none'
+        }
+      },
+      [`${token.proComponentsCls}-list-item-action,
+        ${token.proComponentsCls}-card-extra,
+        ${token.proComponentsCls}-card-actions`]: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: token.marginSM,
+        flexShrink: 0
       },
       '&-row': {
-        borderBlockEnd: `1px solid ${token.colorSplit}`,
-        [`${token.antCls}-list-item-meta-title`]: {
+        [`${token.proComponentsCls}-list-item-meta`]: {
+          display: 'flex',
+          flex: '1',
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          minWidth: 0
+        },
+        [`${token.proComponentsCls}-list-item-meta-content`]: {
+          flex: '1',
+          minWidth: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: token.marginXXS
+        },
+        [`${token.proComponentsCls}-list-item-meta-title`]: {
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          gap: token.marginXS,
           borderBlockEnd: 'none',
           margin: 0
         },
         '&:last-child': {
           borderBlockEnd: 'none',
-          [`${token.antCls}-list-item`]: {
+          [`${token.proComponentsCls}-list-item`]: {
             borderBlockEnd: 'none'
           }
         },
         '&:hover': {
-          backgroundColor: 'rgba(0, 0, 0, 0.02)',
+          backgroundColor: setAlpha(token.colorTextBase, 0.02),
           transition: 'background-color 0.3s',
-          [`${token.antCls}-list-item-action`]: {
-            display: 'block'
+          [`${token.proComponentsCls}-list-item-action`]: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: token.marginSM,
+            flexShrink: 0
+          },
+          [`${token.proComponentsCls}-list-item-action-item`]: {
+            display: 'inline-flex',
+            alignItems: 'center'
           },
-          [`${token.antCls}-list-item-extra`]: {
+          [`${token.proComponentsCls}-list-item-extra`]: {
             display: 'flex'
           },
           [`${token.componentCls}-row-extra`]: {
-            display: 'block'
+            display: 'flex'
           },
           [`${token.componentCls}-row-subheader-actions`]: {
-            display: 'block'
+            display: 'flex'
           }
         },
-        '&-card': {
-          marginBlock: 8,
+        [`&-card`]: {
+          marginBlock: 0,
           marginInline: 0,
           paddingBlock: 0,
-          paddingInline: 8,
+          paddingInline: 0
+        },
+        '&-card-container': {
+          marginBlock: 0,
+          marginInline: 0,
+          paddingBlock: 0,
+          paddingInline: 0,
           '&:hover': {
             backgroundColor: 'transparent'
           },
-          [`${token.antCls}-list-item-meta-title`]: {
+          [`${token.proComponentsCls}-list-item-meta-title`]: {
             flexShrink: 9,
             marginBlock: 0,
             marginInline: 0,
-            lineHeight: '22px'
+            lineHeight: 22
           }
         },
         [`&${token.componentCls}-row-editable`]: {
-          [`${token.componentCls}-list-item`]: {
+          [`${token.proComponentsCls}-list-item`]: {
             '&-meta': {
               '&-avatar,&-description,&-title': {
-                paddingBlock: 6,
+                paddingBlock: token.paddingSM,
                 paddingInline: 0,
                 '&-editable': {
                   paddingBlock: 0
@@ -73,7 +197,12 @@ const genProListStyle = token => {
               }
             },
             '&-action': {
-              display: 'block'
+              display: 'flex',
+              alignItems: 'center',
+              gap: token.marginSM,
+              listStyle: 'none',
+              padding: 0,
+              margin: 0
             }
           }
         },
@@ -95,18 +224,27 @@ const genProListStyle = token => {
         [`&${token.componentCls}-row-type-top`]: {
           backgroundImage: "url('https://gw.alipayobjects.com/zos/antfincdn/DehQfMbOJb/icon.svg')",
           backgroundRepeat: 'no-repeat',
-          backgroundPosition: 'left top',
-          backgroundSize: '12px 12px'
+          backgroundPosition: '0 0',
+          backgroundSize: `${token.fontSizeSM}px ${token.fontSizeSM}px`
         },
         '&-show-action-hover': {
-          [`${token.antCls}-list-item-action,
+          [`${token.proComponentsCls}-list-item-action,
             ${token.proComponentsCls}-card-extra,
             ${token.proComponentsCls}-card-actions`]: {
-            display: 'flex'
+            display: 'none'
+          },
+          '&:hover': {
+            [`${token.proComponentsCls}-list-item-action,
+              ${token.proComponentsCls}-card-extra,
+              ${token.proComponentsCls}-card-actions`]: {
+              display: 'flex',
+              alignItems: 'center',
+              gap: token.marginSM
+            }
           }
         },
         '&-show-extra-hover': {
-          [`${token.antCls}-list-item-extra`]: {
+          [`${token.proComponentsCls}-list-item-extra`]: {
             display: 'none'
           }
         },
@@ -117,29 +255,28 @@ const genProListStyle = token => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          height: '44px',
-          paddingInline: 24,
+          height: 44,
+          paddingInline: token.paddingLG,
           paddingBlock: 0,
           color: token.colorTextSecondary,
-          lineHeight: '44px',
-          background: 'rgba(0, 0, 0, 0.02)',
+          lineHeight: 44,
+          background: setAlpha(token.colorTextBase, 0.02),
           '&-actions': {
             display: 'none'
           },
           '&-actions *': {
-            marginInlineEnd: 8,
+            marginInlineEnd: token.marginXS,
             '&:last-child': {
               marginInlineEnd: 0
             }
           }
         },
         '&-expand-icon': {
-          marginInlineEnd: 8,
+          marginInlineEnd: token.marginXS,
           display: 'flex',
-          fontSize: 12,
+          fontSize: token.fontSizeSM,
           cursor: 'pointer',
-          height: '24px',
-          marginRight: 4,
+          height: 24,
           color: token.colorTextSecondary,
           '> .anticon > svg': {
             transition: '0.3s'
@@ -151,11 +288,12 @@ const genProListStyle = token => {
           }
         },
         '&-title': {
-          marginInlineEnd: '16px',
-          wordBreak: 'break-all',
+          flexShrink: 0,
+          marginInlineEnd: 0,
+          wordBreak: 'break-word',
           cursor: 'pointer',
           '&-editable': {
-            paddingBlock: 8
+            paddingBlock: token.paddingSM
           },
           '&:hover': {
             color: token.colorPrimary
@@ -166,59 +304,67 @@ const genProListStyle = token => {
           display: 'flex',
           flex: '1',
           flexDirection: 'column',
-          marginBlock: 0,
-          marginInline: 32
+          marginBlock: 0
         },
         '&-subTitle': {
-          color: 'rgba(0, 0, 0, 0.45)',
+          display: 'inline-flex',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          gap: token.marginXXS,
+          color: token.colorTextSecondary,
           '&-editable': {
-            paddingBlock: 8
+            paddingBlock: token.paddingSM
           }
         },
         '&-description': {
-          marginBlockStart: '4px',
-          wordBreak: 'break-all'
+          marginBlockStart: token.marginXXS,
+          wordBreak: 'break-all',
+          flexShrink: 0
         },
         '&-avatar': {
-          display: 'flex'
+          display: 'flex',
+          flexShrink: 0,
+          alignItems: 'flex-start'
         },
         '&-header': {
           display: 'flex',
           flex: '1',
+          alignItems: 'flex-start',
           justifyContent: 'flex-start',
+          width: '100%',
+          minWidth: 0,
+          [`${token.proComponentsCls}-list-item-action`]: {
+            alignSelf: 'center'
+          },
           h4: {
             margin: 0,
-            padding: 0
+            padding: 0,
+            display: 'flex',
+            flex: '1',
+            minWidth: 0
           }
         },
         '&-header-container': {
           display: 'flex',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
           alignItems: 'center',
-          justifyContent: 'flex-start'
+          gap: token.marginXS,
+          flex: '1',
+          minWidth: 0
         },
         '&-header-option': {
-          display: 'flex'
+          display: 'flex',
+          flexShrink: 0,
+          alignItems: 'center'
         },
         '&-checkbox': {
-          width: '16px',
-          marginInlineEnd: '12px'
-        },
-        '&-no-split': {
-          [`${token.componentCls}-row`]: {
-            borderBlockEnd: 'none'
-          },
-          [`${token.antCls}-list ${token.antCls}-list-item`]: {
-            borderBlockEnd: 'none'
-          }
+          width: 16,
+          marginInlineEnd: token.marginSM
         },
-        '&-bordered': {
-          [`${token.componentCls}-toolbar`]: {
-            borderBlockEnd: `1px solid ${token.colorSplit}`
-          }
-        },
-        [`${token.antCls}-list-vertical`]: {
+        [`${token.proComponentsCls}-list-vertical`]: {
           [`${token.componentCls}-row`]: {
-            borderBlockEnd: '12px 18px 12px 24px'
+            marginBlockEnd: token.marginSM
           },
           '&-header-title': {
             display: 'flex',
@@ -231,56 +377,52 @@ const genProListStyle = token => {
             marginInline: 0
           },
           '&-subTitle': {
-            marginBlockStart: 8
+            marginBlockStart: token.marginXS
           },
-          [`${token.antCls}-list-item-extra`]: {
+          [`${token.proComponentsCls}-list-item-extra`]: {
             display: 'flex',
             alignItems: 'center',
-            marginInlineStart: '32px',
             [`${token.componentCls}-row-description`]: {
-              marginBlockStart: 16
+              marginBlockStart: token.margin
             }
           },
-          [`${token.antCls}-list-bordered ${token.antCls}-list-item`]: {
+          [`${token.proComponentsCls}-list-bordered ${token.proComponentsCls}-list-item`]: {
             paddingInline: 0
           },
           [`${token.componentCls}-row-show-extra-hover`]: {
-            [`${token.antCls}-list-item-extra `]: {
+            [`${token.proComponentsCls}-list-item-extra `]: {
               display: 'none'
             }
           }
         },
-        [`${token.antCls}-list-pagination`]: {
+        [`${token.proComponentsCls}-list-pagination`]: {
           marginBlockStart: token.margin,
           marginBlockEnd: token.margin
         },
-        [`${token.antCls}-list-list`]: {
+        [`${token.proComponentsCls}-list-list`]: {
           '&-item': {
             cursor: 'pointer',
-            paddingBlock: 12,
-            paddingInline: 12
+            paddingBlock: token.paddingSM,
+            paddingInline: token.paddingSM
           }
         },
-        [`${token.antCls}-list-vertical ${token.proComponentsCls}-list-row`]: {
+        [`${token.proComponentsCls}-list-vertical ${token.proComponentsCls}-list-row`]: {
           '&-header': {
             paddingBlock: 0,
             paddingInline: 0,
             borderBlockEnd: 'none'
           },
-          [`${token.antCls}-list-item`]: {
+          [`${token.proComponentsCls}-list-item`]: {
             width: '100%',
-            paddingBlock: 12,
-            paddingInlineStart: 24,
-            paddingInlineEnd: 18,
-            [`${token.antCls}-list-item-meta-avatar`]: {
+            paddingBlock: token.paddingSM,
+            paddingInlineStart: token.paddingLG,
+            paddingInlineEnd: token.paddingMD,
+            [`${token.proComponentsCls}-list-item-meta-avatar`]: {
               display: 'flex',
               alignItems: 'center',
-              marginInlineEnd: 8
-            },
-            [`${token.antCls}-list-item-action-split`]: {
-              display: 'none'
+              marginInlineEnd: token.marginXS
             },
-            [`${token.antCls}-list-item-meta-title`]: {
+            [`${token.proComponentsCls}-list-item-meta-title`]: {
               marginBlock: 0,
               marginInline: 0
             }

package/es/provider/index.d.ts

@@ -75,7 +75,7 @@ export type ProRenderFieldPropsType = {
      * @params dom 默认的 dom
      * @return 返回一个用于读的 dom
      */
-    render?: ((text: any, props: Omit<ProFieldFCRenderProps, 'value' | 'onChange'>, dom: JSX.Element) => JSX.Element) | undefined;
+    render?: ((text: any, props: Omit<ProFieldFCRenderProps, 'value' | 'onChange'>, dom: React.JSX.Element) => React.JSX.Element) | undefined;
     /**
      * 一个自定义的编辑渲染器。
      * @params text 默认的值类型
@@ -83,7 +83,7 @@ export type ProRenderFieldPropsType = {
      * @params dom 默认的 dom
      * @return 返回一个用于编辑的dom
      */
-    formItemRender?: ((text: any, props: ProFieldFCRenderProps, dom: JSX.Element) => JSX.Element) | undefined;
+    formItemRender?: ((text: any, props: ProFieldFCRenderProps, dom: React.JSX.Element) => React.JSX.Element) | undefined;
 };
 export type ParamsType = Record<string, any>;
 /**

package/es/provider/index.js

@@ -99,7 +99,6 @@ const CacheClean = () => {
       // @ts-ignore
       cache.clear();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return null;
 };
@@ -224,8 +223,6 @@ const ConfigProviderContainer = props => {
         })
       })
     });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [restConfig, themeConfig, proConfigContextValue, autoClearCache, children]);
   if (!autoClearCache) return configProviderDom;
   return /*#__PURE__*/_jsx(SWRConfig, {

package/es/provider/useStyle/index.d.ts

@@ -19,27 +19,7 @@ export declare const setAlpha: (baseColor: string, alpha: number) => string;
  */
 export declare const lighten: (baseColor: string, brightness: number) => string;
 export type GenerateStyle<ComponentToken extends object = GlobalToken, ReturnType = CSSInterpolation> = (token: ComponentToken, ...rest: any[]) => ReturnType;
-export declare const proTheme: {
-    defaultSeed: import("antd/es/theme/internal").SeedToken;
-    useToken: () => {
-        theme: import("@ant-design/cssinjs").Theme<import("antd/es/theme/internal").SeedToken, import("antd/es/theme/internal").AliasToken>;
-        token: import("antd").GlobalToken;
-        hashId: string;
-        cssVar: import("antd").GlobalToken;
-    };
-    defaultAlgorithm: typeof import("antd/es/theme/themes/default").default;
-    darkAlgorithm: import("@ant-design/cssinjs").DerivativeFunc<import("antd/es/theme/internal").SeedToken, import("antd/es/theme/interface").MapToken>;
-    compactAlgorithm: import("@ant-design/cssinjs").DerivativeFunc<import("antd/es/theme/internal").SeedToken, import("antd/es/theme/interface").MapToken>;
-    getDesignToken: (config?: import("antd").ThemeConfig | undefined) => import("antd/es/theme/internal").AliasToken;
-    defaultConfig: {
-        token: import("antd/es/theme/internal").SeedToken;
-        override: {
-            override: import("antd/es/theme/internal").SeedToken;
-        };
-        hashed: boolean;
-    };
-    _internalContext: React.Context<import("antd/es/theme/context").DesignTokenProviderProps>;
-};
+export declare const proTheme: any;
 export type UseStyleResult = {
     wrapSSR: (node: React.ReactElement) => React.ReactElement;
     hashId: string;

package/es/provider/useStyle/index.js

@@ -23,6 +23,7 @@ export const lighten = (baseColor, brightness) => {
   const instance = new TinyColor(baseColor);
   return instance.lighten(brightness).toHexString();
 };
+// 为了兼容 antd 类型，这里使用 any
 export const proTheme = antdTheme;
 export const resetComponent = token => ({
   boxSizing: 'border-box',
@@ -31,7 +32,10 @@ export const resetComponent = token => ({
   color: token.colorText,
   fontSize: token.fontSize,
   lineHeight: token.lineHeight,
-  listStyle: 'none'
+  listStyle: 'none',
+  '*, *::before, *::after': {
+    boxSizing: 'border-box'
+  }
 });
 export const operationUnit = token => ({
   // FIXME: This use link but is a operation unit. Seems should be a colorPrimary.
@@ -55,7 +59,6 @@ export const operationUnit = token => ({
  * @returns UseStyleResult
  */
 export function useStyle(componentName, styleFn) {
-  // eslint-disable-next-line prefer-const
   let {
     token = {},
     hashed
@@ -81,7 +84,7 @@ export function useStyle(componentName, styleFn) {
 
   // Register styles (side effect only in v2)
   useStyleRegister({
-    theme,
+    theme: theme,
     token,
     path: [componentName],
     nonce: csp?.nonce,

package/es/skeleton/components/Descriptions/index.js

@@ -240,10 +240,7 @@ export const TableSkeleton = ({
   }), /*#__PURE__*/_jsx(TableItemSkeleton, {
     header: true,
     active: active
-  }), new Array(size).fill(null).map((_, index) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-array-index-key
-  _jsx(TableItemSkeleton, {
+  }), new Array(size).fill(null).map((_, index) => /*#__PURE__*/_jsx(TableItemSkeleton, {
     active: active
   }, index)), /*#__PURE__*/_jsx("div", {
     style: {

package/es/skeleton/components/List/index.js

@@ -155,10 +155,7 @@ export const ListSkeleton = ({
       padding: 0
     }
   },
-  children: [new Array(size).fill(null).map((_, index) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-array-index-key
-  _jsx(ListSkeletonItem, {
+  children: [new Array(size).fill(null).map((_, index) => /*#__PURE__*/_jsx(ListSkeletonItem, {
     active: !!active
   }, index)), actionButton !== false && /*#__PURE__*/_jsx(Card, {
     variant: "borderless",

package/es/table/Store/Provide.js

@@ -102,7 +102,6 @@ function useContainer(props = {}) {
         console.warn(error);
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.columnsState?.persistenceKey, props.columnsState?.persistenceType, defaultColumnKeyMap]);
 
   /** 清空一下当前的 key */
@@ -138,7 +137,6 @@ function useContainer(props = {}) {
       console.warn(error);
       clearPersistenceStorage();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.columnsState?.persistenceKey, columnsMap, props.columnsState?.persistenceType]);
   const renderValue = {
     action: actionRef.current,