chore: auto merge branches (ant-design#44164)

chore: feature merge master
ammar-knowledge · Aug 11, 2023 · 7f32c9e · 7f32c9e
2 parents 1a86204 + ba90af1
commit 7f32c9e
Show file tree

Hide file tree

Showing 216 changed files with 2,964 additions and 2,611 deletions.
diff --git a/.dumi/pages/index/components/ComponentsList.tsx b/.dumi/pages/index/components/ComponentsList.tsx
@@ -90,6 +90,48 @@ const useStyle = createStyles(({ token }) => {
   };
 });
 
+const ComponentItem: React.FC<ComponentItemProps> = ({ title, node, type, index }) => {
+  const tagColor = type === 'new' ? 'processing' : 'warning';
+  const [locale] = useLocale(locales);
+  const tagText = type === 'new' ? locale.new : locale.update;
+  const { styles } = useStyle();
+  const { isMobile } = useContext(SiteContext);
+  const token = useTheme();
+
+  return (
+    <div className={classNames(styles.card, isMobile && styles.mobileCard)}>
+      {/* Decorator */}
+      <div
+        className={styles.cardCircle}
+        style={{
+          right: (index % 2) * -20 - 20,
+          bottom: (index % 3) * -40 - 20,
+        }}
+      />
+
+      {/* Title */}
+      <Space>
+        <Typography.Title level={4} style={{ fontWeight: 'normal', margin: 0 }}>
+          {title}
+        </Typography.Title>
+        <Tag color={tagColor}>{tagText}</Tag>
+      </Space>
+
+      <div
+        style={{
+          marginTop: token.paddingLG,
+          flex: 'auto',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {node}
+      </div>
+    </div>
+  );
+};
+
 interface ComponentItemProps {
   title: React.ReactNode;
   node: React.ReactNode;
@@ -233,44 +275,6 @@ export default function ComponentsList() {
     [isMobile],
   );
 
-  const ComponentItem: React.FC<ComponentItemProps> = ({ title, node, type, index }) => {
-    const tagColor = type === 'new' ? 'processing' : 'warning';
-    const tagText = type === 'new' ? locale.new : locale.update;
-
-    return (
-      <div key={index} className={classNames(styles.card, isMobile && styles.mobileCard)}>
-        {/* Decorator */}
-        <div
-          className={styles.cardCircle}
-          style={{
-            right: (index % 2) * -20 - 20,
-            bottom: (index % 3) * -40 - 20,
-          }}
-        />
-
-        {/* Title */}
-        <Space>
-          <Typography.Title level={4} style={{ fontWeight: 'normal', margin: 0 }}>
-            {title}
-          </Typography.Title>
-          <Tag color={tagColor}>{tagText}</Tag>
-        </Space>
-
-        <div
-          style={{
-            marginTop: token.paddingLG,
-            flex: 'auto',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          {node}
-        </div>
-      </div>
-    );
-  };
-
   return isMobile ? (
     <div style={{ margin: '0 16px' }}>
       <Carousel className={styles.carousel}>

diff --git a/.dumi/theme/SiteThemeProvider.tsx b/.dumi/theme/SiteThemeProvider.tsx
@@ -15,6 +15,7 @@ interface NewToken {
   marginFarSM: number;
   marginFar: number;
   codeFamily: string;
+  contentMarginTop: number;
 }
 
 // 通过给 antd-style 扩展 CustomToken 对象类型定义，可以为 useTheme 中增加相应的 token 对象
@@ -52,6 +53,7 @@ const SiteThemeProvider: FC<ThemeProviderProps> = ({ children, theme, ...rest })
         /** 96 */
         marginFar: token.marginXXL * 2,
         codeFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`,
+        contentMarginTop: 40,
       }}
     >
       {children}

diff --git a/.dumi/theme/builtins/ComponentOverview/index.tsx b/.dumi/theme/builtins/ComponentOverview/index.tsx
@@ -139,7 +139,7 @@ const Overview: React.FC = () => {
   return (
     <section className="markdown" ref={sectionRef}>
       <Divider />
-      <Affix offsetTop={24} onChange={setSearchBarAffixed}>
+      <Affix offsetTop={24 + token.headerHeight} onChange={setSearchBarAffixed}>
         <div
           className={styles.componentsOverviewAffix}
           style={searchBarAffixed ? affixedStyle : {}}

diff --git a/.dumi/theme/builtins/IconSearch/IconSearch.tsx b/.dumi/theme/builtins/IconSearch/IconSearch.tsx
@@ -58,6 +58,7 @@ const IconSearch: React.FC = () => {
     searchKey: '',
     theme: ThemeType.Outlined,
   });
+  const token = useTheme();
 
   const newIconNames: string[] = [];
 
@@ -111,7 +112,6 @@ const IconSearch: React.FC = () => {
   }, [displayState.searchKey, displayState.theme]);
 
   const [searchBarAffixed, setSearchBarAffixed] = useState<boolean>(false);
-  const token = useTheme();
   const { borderRadius, colorBgContainer } = token;
 
   const affixedStyle: CSSProperties = {
@@ -124,7 +124,7 @@ const IconSearch: React.FC = () => {
 
   return (
     <div className="markdown">
-      <Affix offsetTop={24} onChange={setSearchBarAffixed}>
+      <Affix offsetTop={24 + token.headerHeight} onChange={setSearchBarAffixed}>
         <div className={styles.iconSearchAffix} style={searchBarAffixed ? affixedStyle : {}}>
           <Segmented
             size="large"

diff --git a/.dumi/theme/common/ThemeSwitch/index.tsx b/.dumi/theme/common/ThemeSwitch/index.tsx
@@ -24,7 +24,13 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
   const isHappyWork = value.includes('happy-work');
 
   return (
-    <FloatButton.Group trigger="click" icon={<ThemeIcon />} aria-label="Theme Switcher">
+    <FloatButton.Group
+      trigger="click"
+      icon={<ThemeIcon />}
+      aria-label="Theme Switcher"
+      badge={{ dot: true }}
+      style={{ zIndex: 1010 }}
+    >
       <Link
         to={getLocalizedPathname('/theme-editor', isZhCN(pathname), search)}
         style={{ display: 'block', marginBottom: token.margin }}
@@ -76,6 +82,7 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
         }
       /> */}
       <FloatButton
+        badge={{ dot: true }}
         icon={<SmileOutlined />}
         type={isHappyWork ? 'primary' : 'default'}
         onClick={() => {

diff --git a/.dumi/theme/layouts/SidebarLayout/index.tsx b/.dumi/theme/layouts/SidebarLayout/index.tsx
@@ -5,10 +5,10 @@ import CommonHelmet from '../../common/CommonHelmet';
 import Content from '../../slots/Content';
 import Sidebar from '../../slots/Sidebar';
 
-const useStyle = createStyles(({ css }) => ({
+const useStyle = createStyles(({ css, token }) => ({
   main: css`
     display: flex;
-    margin-top: 40px;
+    margin-top: ${token.contentMarginTop}px;
   `,
 }));
 

diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx
@@ -6,7 +6,7 @@ import DayJS from 'dayjs';
 import { FormattedMessage, useIntl, useRouteMeta, useTabMeta } from 'dumi';
 import type { ReactNode } from 'react';
 import React, { useContext, useLayoutEffect, useMemo, useState } from 'react';
-import { Affix, Anchor, Avatar, Col, Skeleton, Space, Tooltip, Typography } from 'antd';
+import { Anchor, Avatar, Col, Skeleton, Space, Tooltip, Typography } from 'antd';
 import useLayoutState from '../../../hooks/useLayoutState';
 import useLocation from '../../../hooks/useLocation';
 import EditButton from '../../common/EditButton';
@@ -55,16 +55,17 @@ const useStyle = createStyles(({ token, css }) => {
       }
     `,
     tocWrapper: css`
-      position: absolute;
-      top: 8px;
+      position: fixed;
+      top: ${token.headerHeight + token.contentMarginTop}px;
       inset-inline-end: 0;
       width: 160px;
-      margin: 12px 0;
+      margin: 0 0 12px 0;
       padding: 8px 0;
       padding-inline: 4px 8px;
       backdrop-filter: blur(8px);
       border-radius: ${token.borderRadius}px;
       box-sizing: border-box;
+      z-index: 1000;
 
       .toc-debug {
         color: ${token.purple6};
@@ -206,32 +207,30 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
     <DemoContext.Provider value={contextValue}>
       <Col xxl={20} xl={19} lg={18} md={18} sm={24} xs={24}>
         {!!meta.frontmatter.toc && (
-          <Affix>
-            <section className={styles.tocWrapper}>
-              <Anchor
-                className={styles.toc}
-                affix={false}
-                targetOffset={token.marginXXL}
-                showInkInFixed
-                items={anchorItems.map((item) => ({
-                  href: `#${item.id}`,
-                  title: item.title,
-                  key: item.id,
-                  children: item.children
-                    ?.filter((child) => showDebug || !debugDemos.includes(child.id))
-                    .map((child) => ({
-                      key: child.id,
-                      href: `#${child.id}`,
-                      title: (
-                        <span className={classNames(debugDemos.includes(child.id) && 'toc-debug')}>
-                          {child?.title}
-                        </span>
-                      ),
-                    })),
-                }))}
-              />
-            </section>
-          </Affix>
+          <section className={styles.tocWrapper}>
+            <Anchor
+              className={styles.toc}
+              affix={false}
+              targetOffset={token.marginXXL}
+              showInkInFixed
+              items={anchorItems.map((item) => ({
+                href: `#${item.id}`,
+                title: item.title,
+                key: item.id,
+                children: item.children
+                  ?.filter((child) => showDebug || !debugDemos.includes(child.id))
+                  .map((child) => ({
+                    key: child.id,
+                    href: `#${child.id}`,
+                    title: (
+                      <span className={classNames(debugDemos.includes(child.id) && 'toc-debug')}>
+                        {child?.title}
+                      </span>
+                    ),
+                  })),
+              }))}
+            />
+          </section>
         )}
         <article className={classNames(styles.articleWrapper, { rtl: isRTL })}>
           {meta.frontmatter?.title ? (

diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx
@@ -25,11 +25,13 @@ const useStyle = createStyles(({ token, css }) => {
 
   return {
     header: css`
-      position: relative;
-      z-index: 10;
+      position: sticky;
+      top: 0;
+      z-index: 1000;
       max-width: 100%;
       background: ${token.colorBgContainer};
       box-shadow: ${token.boxShadowTertiary};
+      backdrop-filter: blur(8px);
 
       @media only screen and (max-width: ${token.mobileMaxWidth}px) {
         text-align: center;

diff --git a/.dumi/theme/slots/Sidebar/index.tsx b/.dumi/theme/slots/Sidebar/index.tsx
@@ -105,10 +105,10 @@ const useStyle = createStyles(({ token, css }) => {
 
       .main-menu-inner {
         position: sticky;
-        top: 0;
+        top: ${token.headerHeight + token.contentMarginTop}px;
         width: 100%;
         height: 100%;
-        max-height: 100vh;
+        max-height: calc(100vh - ${token.headerHeight + token.contentMarginTop}px);
         overflow: hidden;
       }
 

diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml
@@ -64,3 +64,4 @@ jobs:
           skip_step: install
         env:
           NODE_OPTIONS: --max_old_space_size=4096
+          PRODUCTION_ONLY: 1
diff --git a/components/_util/PurePanel.tsx b/components/_util/PurePanel.tsx
@@ -2,6 +2,23 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import * as React from 'react';
 import ConfigProvider, { ConfigContext } from '../config-provider';
 
+export function withPureRenderTheme(Component: any) {
+  return function PureRenderThemeComponent(props: any) {
+    return (
+      <ConfigProvider
+        theme={{
+          token: {
+            motion: false,
+            zIndexPopupBase: 0,
+          },
+        }}
+      >
+        <Component {...props} />
+      </ConfigProvider>
+    );
+  };
+}
+
 export interface BaseProps {
   prefixCls?: string;
   style?: React.CSSProperties;
@@ -16,7 +33,7 @@ export default function genPurePanel<ComponentProps extends BaseProps>(
 ) {
   type WrapProps = Omit<ComponentProps, 'open' | 'visible'> & { open?: boolean };
 
-  return function PurePanel(props: WrapProps) {
+  function PurePanel(props: WrapProps) {
     const { prefixCls: customizePrefixCls, style } = props;
 
     const holderRef = React.useRef<HTMLDivElement>(null);
@@ -75,24 +92,18 @@ export default function genPurePanel<ComponentProps extends BaseProps>(
     }
 
     return (
-      <ConfigProvider
-        theme={{
-          token: {
-            motion: false,
-          },
+      <div
+        ref={holderRef}
+        style={{
+          paddingBottom: popupHeight,
+          position: 'relative',
+          minWidth: popupWidth,
         }}
       >
-        <div
-          ref={holderRef}
-          style={{
-            paddingBottom: popupHeight,
-            position: 'relative',
-            minWidth: popupWidth,
-          }}
-        >
-          <Component {...mergedProps} />
-        </div>
-      </ConfigProvider>
+        <Component {...mergedProps} />
+      </div>
     );
-  } as typeof Component;
+  }
+
+  return withPureRenderTheme(PurePanel);
 }
diff --git a/components/affix/index.en-US.md b/components/affix/index.en-US.md
@@ -28,6 +28,8 @@ Please note that Affix should not cover other content on the page, especially wh
 
 ## API
 
+Common props ref：[Common props](/docs/react/common-props)
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - |

diff --git a/components/affix/index.zh-CN.md b/components/affix/index.zh-CN.md
@@ -29,6 +29,8 @@ group:
 
 ## API
 
+通用属性参考：[通用属性](/docs/react/common-props)
+
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | - |

diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md
@@ -34,6 +34,8 @@ Alert component for feedback.
 
 ## API
 
+Common props ref：[Common props](/docs/react/common-props)
+
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | action | The action of Alert | ReactNode | - | 4.9.0 |