chore: auto merge branches (#44762)

chore: feature merge master

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -483,7 +483,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
               <ThunderboltOutlined className="code-box-stackblitz" />
             </span>
           </Tooltip>
-          <CopyToClipboard text={entryCode} onCopy={() => handleCodeCopied(asset.id)}>
+          <CopyToClipboard text={parsedSourceCode} onCopy={() => handleCodeCopied(asset.id)}>
             <Tooltip
               open={copyTooltipOpen as boolean}
               onOpenChange={onCopyTooltipOpenChange}

.dumi/theme/layouts/GlobalLayout.tsx

@@ -39,15 +39,17 @@ const RESPONSIVE_MOBILE = 768;
 // }
 
 const getAlgorithm = (themes: ThemeName[] = []) =>
-  themes.map((theme) => {
+  themes
-    if (theme === 'dark') {
+    .map((theme) => {
-      return antdTheme.darkAlgorithm;
+      if (theme === 'dark') {
-    }
+        return antdTheme.darkAlgorithm;
-    if (theme === 'compact') {
+      }
-      return antdTheme.compactAlgorithm;
+      if (theme === 'compact') {
-    }
+        return antdTheme.compactAlgorithm;
-    return antdTheme.defaultAlgorithm;
+      }
-  });
+      return null;
+    })
+    .filter((item) => item);
 
 const GlobalLayout: React.FC = () => {
   const outlet = useOutlet();

components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -245,7 +245,7 @@ exports[`renders components/auto-complete/demo/borderless.tsx extend context cor
 
 exports[`renders components/auto-complete/demo/certain-category.tsx extend context correctly 1`] = `
 <div
-  class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+  class="ant-select ant-select-lg ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
   style="width: 250px;"
 >
   <div
@@ -609,7 +609,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte
 
 exports[`renders components/auto-complete/demo/certain-category.tsx extend context correctly 2`] = `
 [
-  "Warning: [antd: Select] \`dropdownMatchSelectWidth\` is deprecated. Please use \`popupMatchSelectWidth\` instead.",
+  "Warning: [antd: AutoComplete] You need to control style self instead of setting \`size\` when using customize input.",
 ]
 `;
 
@@ -2352,7 +2352,7 @@ exports[`renders components/auto-complete/demo/status.tsx extend context correct
 
 exports[`renders components/auto-complete/demo/uncertain-category.tsx extend context correctly 1`] = `
 <div
-  class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+  class="ant-select ant-select-lg ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
   style="width: 300px;"
 >
   <div
@@ -2438,6 +2438,6 @@ exports[`renders components/auto-complete/demo/uncertain-category.tsx extend con
 
 exports[`renders components/auto-complete/demo/uncertain-category.tsx extend context correctly 2`] = `
 [
-  "Warning: [antd: Select] \`dropdownMatchSelectWidth\` is deprecated. Please use \`popupMatchSelectWidth\` instead.",
+  "Warning: [antd: AutoComplete] You need to control style self instead of setting \`size\` when using customize input.",
 ]
 `;

components/auto-complete/__tests__/__snapshots__/demo.test.tsx.snap

@@ -174,7 +174,7 @@ exports[`renders components/auto-complete/demo/borderless.tsx correctly 1`] = `
 
 exports[`renders components/auto-complete/demo/certain-category.tsx correctly 1`] = `
 <div
-  class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+  class="ant-select ant-select-lg ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
   style="width:250px"
 >
   <div
@@ -1344,7 +1344,7 @@ exports[`renders components/auto-complete/demo/status.tsx correctly 1`] = `
 
 exports[`renders components/auto-complete/demo/uncertain-category.tsx correctly 1`] = `
 <div
-  class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+  class="ant-select ant-select-lg ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
   style="width:300px"
 >
   <div

components/auto-complete/demo/certain-category.tsx

@@ -51,9 +51,10 @@ const options = [
 const App: React.FC = () => (
   <AutoComplete
     popupClassName="certain-category-search-dropdown"
-    dropdownMatchSelectWidth={500}
+    popupMatchSelectWidth={500}
     style={{ width: 250 }}
     options={options}
+    size="large"
   >
     <Input.Search size="large" placeholder="input here" />
   </AutoComplete>

components/auto-complete/demo/uncertain-category.tsx

@@ -48,11 +48,12 @@ const App: React.FC = () => {
 
   return (
     <AutoComplete
-      dropdownMatchSelectWidth={252}
+      popupMatchSelectWidth={252}
       style={{ width: 300 }}
       options={options}
       onSelect={onSelect}
       onSearch={handleSearch}
+      size="large"
     >
       <Input.Search size="large" placeholder="input here" enterButton />
     </AutoComplete>

components/select/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -6068,6 +6068,23 @@ exports[`renders components/select/demo/option-label-center.tsx extend context c
                       unselectable="on"
                     />
                   </div>
+                  <div
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option"
+                    title="normal"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      normal
+                    </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select: none;"
+                      unselectable="on"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
@@ -6129,6 +6146,707 @@ exports[`renders components/select/demo/option-label-center.tsx extend context c
       </span>
     </div>
   </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
+      style="width: 120px; height: 60px;"
+    >
+      <div
+        class="ant-select-selector"
+      >
+        <span
+          class="ant-select-selection-search"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-controls="rc_select_TEST_OR_SSR_list"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="Search"
+            aria-owns="rc_select_TEST_OR_SSR_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            id="rc_select_TEST_OR_SSR"
+            readonly=""
+            role="combobox"
+            style="opacity: 0;"
+            type="search"
+            unselectable="on"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-placeholder"
+        >
+          Select a option
+        </span>
+      </div>
+      <div
+        class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div>
+          <div
+            id="rc_select_TEST_OR_SSR_list"
+            role="listbox"
+            style="height: 0px; width: 0px; overflow: hidden;"
+          >
+            <div
+              aria-selected="false"
+              id="rc_select_TEST_OR_SSR_list_0"
+              role="option"
+            >
+              long
+            </div>
+            <div
+              aria-selected="false"
+              id="rc_select_TEST_OR_SSR_list_1"
+              role="option"
+            >
+              short
+            </div>
+          </div>
+          <div
+            class="rc-virtual-list"
+            style="position: relative;"
+          >
+            <div
+              class="rc-virtual-list-holder"
+              style="max-height: 256px; overflow-y: auto;"
+            >
+              <div>
+                <div
+                  class="rc-virtual-list-holder-inner"
+                  style="display: flex; flex-direction: column;"
+                >
+                  <div
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      <article
+                        class="ant-typography"
+                      >
+                        long, long, long piece of text
+                      </article>
+                    </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select: none;"
+                      unselectable="on"
+                    />
+                  </div>
+                  <div
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      <article
+                        class="ant-typography"
+                      >
+                        short
+                      </article>
+                    </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select: none;"
+                      unselectable="on"
+                    />
+                  </div>
+                  <div
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option"
+                    title="normal"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      normal
+                    </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select: none;"
+                      unselectable="on"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select: none;"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
+      style="width: 120px; height: 60px;"
+    >
+      <div
+        class="ant-select-selector"
+      >
+        <div
+          class="ant-select-selection-overflow"
+        >
+          <div
+            class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
+            style="opacity: 1;"
+          >
+            <div
+              class="ant-select-selection-search"
+              style="width: 0px;"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="Search"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+              <span
+                aria-hidden="true"
+                class="ant-select-selection-search-mirror"
+              >
+              </span>
+            </div>
+          </div>
+        </div>
+        <span
+          class="ant-select-selection-placeholder"
+        >
+          Select a option
+        </span>
+      </div>
+      <div
+        class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div>
+          <div
+            id="rc_select_TEST_OR_SSR_list"
+            role="listbox"
+            style="height: 0px; width: 0px; overflow: hidden;"
+          >
+            <div
+              aria-selected="false"
+              id="rc_select_TEST_OR_SSR_list_0"
+              role="option"
+            >
+              long
+            </div>
+            <div
+              aria-selected="false"
+              id="rc_select_TEST_OR_SSR_list_1"
+              role="option"
+            >
+              short
+            </div>
+          </div>
+          <div
+            class="rc-virtual-list"
+            style="position: relative;"
+          >
+            <div
+              class="rc-virtual-list-holder"
+              style="max-height: 256px; overflow-y: auto;"
+            >
+              <div>
+                <div
+                  class="rc-virtual-list-holder-inner"
+                  style="display: flex; flex-direction: column;"
+                >
+                  <div
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      <article
+                        class="ant-typography"
+                      >
+                        long, long, long piece of text
+                      </article>
+                    </div>
+                  </div>
+                  <div
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      <article
+                        class="ant-typography"
+                      >
+                        short
+                      </article>
+                    </div>
+                  </div>
+                  <div
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option"
+                    title="normal"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      normal
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select: none;"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
+      style="width: 120px; height: 60px;"
+    >
+      <div
+        class="ant-select-selector"
+      >
+        <span
+          class="ant-select-selection-search"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-controls="rc_select_TEST_OR_SSR_list"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="Search"
+            aria-owns="rc_select_TEST_OR_SSR_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            id="rc_select_TEST_OR_SSR"
+            readonly=""
+            role="combobox"
+            style="opacity: 0;"
+            type="search"
+            unselectable="on"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-placeholder"
+        >
+          Select a option
+        </span>
+      </div>
+      <div
+        class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
+      >
+        <div>
+          <div
+            class="ant-cascader-menus"
+          >
+            <ul
+              class="ant-cascader-menu"
+              role="menu"
+            >
+              <li
+                aria-checked="false"
+                class="ant-cascader-menu-item"
+                data-path-key="long"
+                role="menuitemcheckbox"
+              >
+                <div
+                  class="ant-cascader-menu-item-content"
+                >
+                  <article
+                    class="ant-typography"
+                  >
+                    long, long, long piece of text
+                  </article>
+                </div>
+              </li>
+              <li
+                aria-checked="false"
+                class="ant-cascader-menu-item"
+                data-path-key="short"
+                role="menuitemcheckbox"
+              >
+                <div
+                  class="ant-cascader-menu-item-content"
+                >
+                  <article
+                    class="ant-typography"
+                  >
+                    short
+                  </article>
+                </div>
+              </li>
+              <li
+                aria-checked="false"
+                class="ant-cascader-menu-item"
+                data-path-key="normal"
+                role="menuitemcheckbox"
+                title="normal"
+              >
+                <div
+                  class="ant-cascader-menu-item-content"
+                >
+                  normal
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select: none;"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
+      style="width: 120px; height: 60px;"
+    >
+      <div
+        class="ant-select-selector"
+      >
+        <span
+          class="ant-select-selection-search"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-controls="rc_select_TEST_OR_SSR_list"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="Search"
+            aria-owns="rc_select_TEST_OR_SSR_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            id="rc_select_TEST_OR_SSR"
+            role="combobox"
+            type="search"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-placeholder"
+        >
+          Please select
+        </span>
+      </div>
+      <div
+        class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-placement-bottomLeft"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div>
+          <div>
+            <div
+              class="ant-select-tree"
+              role="tree"
+            >
+              <div>
+                <input
+                  aria-label="for screen reader"
+                  disabled=""
+                  style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+                  value=""
+                />
+              </div>
+              <div
+                aria-hidden="true"
+                class="ant-select-tree-treenode"
+                style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
+              >
+                <div
+                  class="ant-select-tree-indent"
+                >
+                  <div
+                    class="ant-select-tree-indent-unit"
+                  />
+                </div>
+              </div>
+              <div
+                class="ant-select-tree-list"
+                style="position: relative;"
+              >
+                <div
+                  class="ant-select-tree-list-holder"
+                  style="max-height: 256px; overflow-y: auto;"
+                >
+                  <div>
+                    <div
+                      class="ant-select-tree-list-holder-inner"
+                      style="display: flex; flex-direction: column;"
+                    >
+                      <div
+                        aria-grabbed="false"
+                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
+                        draggable="false"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-tree-indent"
+                        />
+                        <span
+                          class="ant-select-tree-switcher ant-select-tree-switcher_open"
+                        >
+                          <span
+                            aria-label="caret-down"
+                            class="anticon anticon-caret-down ant-select-tree-switcher-icon"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              data-icon="caret-down"
+                              fill="currentColor"
+                              focusable="false"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-open"
+                          title="parent 1"
+                        >
+                          <span
+                            class="ant-select-tree-title"
+                          >
+                            parent 1
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        aria-grabbed="false"
+                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
+                        draggable="false"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-tree-indent"
+                        >
+                          <span
+                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
+                          />
+                        </span>
+                        <span
+                          class="ant-select-tree-switcher ant-select-tree-switcher-noop"
+                        />
+                        <span
+                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
+                          title=""
+                        >
+                          <span
+                            class="ant-select-tree-title"
+                          >
+                            <article
+                              class="ant-typography"
+                            >
+                              long, long, long piece of text
+                            </article>
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        aria-grabbed="false"
+                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
+                        draggable="false"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-tree-indent"
+                        >
+                          <span
+                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
+                          />
+                        </span>
+                        <span
+                          class="ant-select-tree-switcher ant-select-tree-switcher-noop"
+                        />
+                        <span
+                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
+                          title=""
+                        >
+                          <span
+                            class="ant-select-tree-title"
+                          >
+                            <article
+                              class="ant-typography"
+                            >
+                              short
+                            </article>
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        aria-grabbed="false"
+                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
+                        draggable="false"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-tree-indent"
+                        >
+                          <span
+                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
+                          />
+                        </span>
+                        <span
+                          class="ant-select-tree-switcher ant-select-tree-switcher-noop"
+                        />
+                        <span
+                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
+                          title="normal"
+                        >
+                          <span
+                            class="ant-select-tree-title"
+                          >
+                            normal
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select: none;"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
 </div>
 `;
 

components/select/__tests__/__snapshots__/demo.test.tsx.snap

@@ -371,11 +371,6 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
 
 exports[`renders components/select/demo/big-data.tsx correctly 1`] = `
 Array [
-  <h3
-    class="ant-typography"
-  >
-    Ant Design 4.0
-  </h3>,
   <h4
     class="ant-typography"
   >
@@ -510,20 +505,6 @@ Array [
       </span>
     </span>
   </div>,
-  <div
-    class="ant-divider ant-divider-horizontal"
-    role="separator"
-  />,
-  <h3
-    class="ant-typography"
-  >
-    Ant Design 3.0
-  </h3>,
-  <iframe
-    src="https://codesandbox.io/embed/solitary-voice-m3vme?fontsize=14&hidenavigation=1&theme=dark&view=preview"
-    style="width:100%;height:300px"
-    title="Ant Design 3.0 Select demo"
-  />,
 ]
 `;
 
@@ -1886,6 +1867,274 @@ exports[`renders components/select/demo/option-label-center.tsx correctly 1`] =
       </span>
     </div>
   </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
+      style="width:120px;height:60px"
+    >
+      <div
+        class="ant-select-selector"
+      >
+        <span
+          class="ant-select-selection-search"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-controls="undefined_list"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="Search"
+            aria-owns="undefined_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            readonly=""
+            role="combobox"
+            style="opacity:0"
+            type="search"
+            unselectable="on"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-placeholder"
+        >
+          Select a option
+        </span>
+      </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
+      style="width:120px;height:60px"
+    >
+      <div
+        class="ant-select-selector"
+      >
+        <div
+          class="ant-select-selection-overflow"
+        >
+          <div
+            class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
+            style="opacity:1"
+          >
+            <div
+              class="ant-select-selection-search"
+              style="width:0"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="undefined_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="Search"
+                aria-owns="undefined_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                readonly=""
+                role="combobox"
+                style="opacity:0"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+              <span
+                aria-hidden="true"
+                class="ant-select-selection-search-mirror"
+              >
+              </span>
+            </div>
+          </div>
+        </div>
+        <span
+          class="ant-select-selection-placeholder"
+        >
+          Select a option
+        </span>
+      </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
+      style="width:120px;height:60px"
+    >
+      <div
+        class="ant-select-selector"
+      >
+        <span
+          class="ant-select-selection-search"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-controls="undefined_list"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="Search"
+            aria-owns="undefined_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            readonly=""
+            role="combobox"
+            style="opacity:0"
+            type="search"
+            unselectable="on"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-placeholder"
+        >
+          Select a option
+        </span>
+      </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
+      style="width:120px;height:60px"
+    >
+      <div
+        class="ant-select-selector"
+      >
+        <span
+          class="ant-select-selection-search"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-controls="undefined_list"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="Search"
+            aria-owns="undefined_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            role="combobox"
+            type="search"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-placeholder"
+        >
+          Please select
+        </span>
+      </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
 </div>
 `;
 

components/select/demo/big-data.md

@@ -1,7 +1,7 @@
 ## zh-CN
 
-Select 使用了[虚拟滚动](https://github.com/react-component/virtual-list)技术，因而获得了比 [3.0 更好的性能](https://codesandbox.io/s/beautiful-banzai-m72lv)。
+Select 默认针对大数据开启了[虚拟滚动](https://github.com/react-component/virtual-list)，因而获得了更好的性能，可以通过 `virtual={false}` 关闭。
 
 ## en-US
 
-Select use [virtual scroll](https://github.com/react-component/virtual-list) which get better performance [than 3.0](https://codesandbox.io/s/beautiful-banzai-m72lv).
+Select use [virtual scroll](https://github.com/react-component/virtual-list) which get better performance, turn off it by set `virtual={false}`.

components/select/demo/big-data.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { SelectProps } from 'antd';
-import { Divider, Select, Typography } from 'antd';
+import { Select, Typography } from 'antd';
 
 const { Title } = Typography;
 
@@ -21,7 +21,6 @@ const handleChange = (value: string[]) => {
 
 const App: React.FC = () => (
   <>
-    <Title level={3}>Ant Design 4.0</Title>
     <Title level={4}>{options.length} Items</Title>
     <Select
       mode="multiple"
@@ -31,15 +30,6 @@ const App: React.FC = () => (
       onChange={handleChange}
       options={options}
     />
-
-    <Divider />
-
-    <Title level={3}>Ant Design 3.0</Title>
-    <iframe
-      title="Ant Design 3.0 Select demo"
-      src="https://codesandbox.io/embed/solitary-voice-m3vme?fontsize=14&hidenavigation=1&theme=dark&view=preview"
-      style={{ width: '100%', height: 300 }}
-    />
   </>
 );
 

components/select/demo/option-label-center.md

@@ -1,6 +1,6 @@
 ## zh-CN
 
-选项文本居中
+选项文本应该居中。
 
 ## en-US
 

components/select/demo/option-label-center.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { Select, Space, Typography } from 'antd';
+import { Select, Space, Cascader, Typography, TreeSelect } from 'antd';
+
+const options = [
+  { value: 'long', label: <Typography>long, long, long piece of text</Typography> },
+  { value: 'short', label: <Typography>short</Typography> },
+  { value: 'normal', label: 'normal' },
+];
 
 const App: React.FC = () => (
   <Space wrap>
@@ -7,9 +13,44 @@ const App: React.FC = () => (
       defaultValue="long, long, long piece of text"
       style={{ width: 120 }}
       allowClear
-      options={[
+      options={options}
-        { value: 'long', label: <Typography>long, long, long piece of text</Typography> },
+    />
-        { value: 'short', label: <Typography>short</Typography> },
+
+    <Select
+      placeholder="Select a option"
+      style={{ width: 120, height: 60 }}
+      allowClear
+      options={options}
+    />
+
+    <Select
+      mode="multiple"
+      placeholder="Select a option"
+      style={{ width: 120, height: 60 }}
+      allowClear
+      options={options}
+    />
+
+    <Cascader
+      placeholder="Select a option"
+      style={{ width: 120, height: 60 }}
+      allowClear
+      options={options}
+    />
+
+    <TreeSelect
+      showSearch
+      style={{ width: 120, height: 60 }}
+      placeholder="Please select"
+      allowClear
+      popupMatchSelectWidth={false}
+      treeDefaultExpandAll
+      treeData={[
+        {
+          value: 'parent 1',
+          title: 'parent 1',
+          children: options,
+        },
       ]}
     />
   </Space>

components/select/style/index.tsx

@@ -132,6 +132,7 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
       input: {
         cursor: 'auto',
         color: 'inherit',
+        height: '100%',
       },
     },
 
@@ -217,7 +218,7 @@ const getSearchInputWithoutBorderStyle: GenerateStyle<SelectToken, CSSObject> =
 
 // =============================== Base ===============================
 const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
-  const { componentCls, inputPaddingHorizontalBase, iconCls } = token;
+  const { antCls, componentCls, inputPaddingHorizontalBase, iconCls } = token;
 
   return {
     [componentCls]: {
@@ -239,7 +240,14 @@ const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
       [`${componentCls}-selection-item`]: {
         flex: 1,
         fontWeight: 'normal',
+        position: 'relative',
+        userSelect: 'none',
         ...textEllipsis,
+
+        // https://github.com/ant-design/ant-design/issues/40421
+        [`> ${antCls}-typography`]: {
+          display: 'inline',
+        },
       },
 
       // ======================= Placeholder =======================

components/select/style/multiple.tsx

@@ -54,6 +54,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         display: 'flex',
         flexWrap: 'wrap',
         alignItems: 'center',
+        height: '100%',
         // Multiple is little different that horizontal is follow the vertical
         padding: `${selectItemDist - FIXED_ITEM_MARGIN}px ${FIXED_ITEM_MARGIN * 2}px`,
         borderRadius: token.borderRadius,
@@ -86,8 +87,8 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
 
       // ======================== Selections ========================
       [`${componentCls}-selection-item`]: {
-        position: 'relative',
         display: 'flex',
+        alignSelf: 'center',
         flex: 'none',
         boxSizing: 'border-box',
         maxWidth: '100%',
@@ -100,7 +101,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         borderRadius: token.borderRadiusSM,
         cursor: 'default',
         transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
-        userSelect: 'none',
         marginInlineEnd: FIXED_ITEM_MARGIN * 2,
         paddingInlineStart: token.paddingXS,
         paddingInlineEnd: token.paddingXS / 2,
@@ -148,6 +148,11 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         },
       },
 
+      // https://github.com/ant-design/ant-design/issues/44754
+      [`${selectOverflowPrefixCls}-item-suffix`]: {
+        height: '100%',
+      },
+
       [`${componentCls}-selection-search`]: {
         display: 'inline-flex',
         position: 'relative',
@@ -181,7 +186,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
       },
 
       // ======================= Placeholder =======================
-      [`${componentCls}-selection-placeholder `]: {
+      [`${componentCls}-selection-placeholder`]: {
         position: 'absolute',
         top: '50%',
         insetInlineStart: token.inputPaddingHorizontalBase,

components/select/style/single.tsx

@@ -15,6 +15,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
   return {
     [`${componentCls}-single${suffixCls}`]: {
       fontSize: token.fontSize,
+      height: token.controlHeight,
 
       // ========================= Selector =========================
       [`${componentCls}-selector`]: {
@@ -42,16 +43,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
           padding: 0,
           lineHeight: `${selectHeightWithoutBorder}px`,
           transition: `all ${token.motionDurationSlow}, visibility 0s`,
-
+          alignSelf: 'center',
-          // Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
-          '@supports (-moz-appearance: meterbar)': {
-            lineHeight: `${selectHeightWithoutBorder}px`,
-          },
-        },
-
-        [`${componentCls}-selection-item`]: {
-          position: 'relative',
-          userSelect: 'none',
         },
 
         [`${componentCls}-selection-placeholder`]: {
@@ -92,7 +84,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
       [`&:not(${componentCls}-customize-input)`]: {
         [`${componentCls}-selector`]: {
           width: '100%',
-          height: token.controlHeight,
+          height: '100%',
           padding: `0 ${inputPaddingHorizontalBase}px`,
 
           [`${componentCls}-selection-search-input`]: {

components/space/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -15176,112 +15176,6 @@ Array [
 
 exports[`renders components/space/demo/compact-nested.tsx extend context correctly 2`] = `[]`;
 
-exports[`renders components/space/demo/customize.tsx extend context correctly 1`] = `
-Array [
-  <div
-    class="ant-slider ant-slider-horizontal"
-  >
-    <div
-      class="ant-slider-rail"
-    />
-    <div
-      class="ant-slider-track"
-      style="left: 0%; width: 8%;"
-    />
-    <div
-      class="ant-slider-step"
-    />
-    <div
-      aria-disabled="false"
-      aria-orientation="horizontal"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="8"
-      class="ant-slider-handle"
-      role="slider"
-      style="left: 8%; transform: translateX(-50%);"
-      tabindex="0"
-    />
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; bottom: 0px; left: 0px;"
-      />
-      <div
-        class="ant-tooltip-content"
-      >
-        <div
-          class="ant-tooltip-inner"
-          role="tooltip"
-        >
-          8
-        </div>
-      </div>
-    </div>
-  </div>,
-  <br />,
-  <br />,
-  <div
-    class="ant-space ant-space-horizontal ant-space-align-center"
-    style="column-gap: 8px; row-gap: 8px;"
-  >
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-primary"
-        type="button"
-      >
-        <span>
-          Primary
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-default"
-        type="button"
-      >
-        <span>
-          Default
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-dashed"
-        type="button"
-      >
-        <span>
-          Dashed
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-link"
-        type="button"
-      >
-        <span>
-          Link
-        </span>
-      </button>
-    </div>
-  </div>,
-]
-`;
-
-exports[`renders components/space/demo/customize.tsx extend context correctly 2`] = `[]`;
-
 exports[`renders components/space/demo/debug.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
@@ -15604,7 +15498,7 @@ Array [
         />
       </span>
       <span>
-        Small
+        small
       </span>
     </label>
     <label
@@ -15623,7 +15517,7 @@ Array [
         />
       </span>
       <span>
-        Middle
+        middle
       </span>
     </label>
     <label
@@ -15642,7 +15536,26 @@ Array [
         />
       </span>
       <span>
-        Large
+        large
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio ant-wave-target"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="customize"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        customize
       </span>
     </label>
   </div>,

components/space/__tests__/__snapshots__/demo.test.tsx.snap

@@ -3939,91 +3939,6 @@ Array [
 ]
 `;
 
-exports[`renders components/space/demo/customize.tsx correctly 1`] = `
-Array [
-  <div
-    class="ant-slider ant-slider-horizontal"
-  >
-    <div
-      class="ant-slider-rail"
-    />
-    <div
-      class="ant-slider-track"
-      style="left:0%;width:8%"
-    />
-    <div
-      class="ant-slider-step"
-    />
-    <div
-      aria-disabled="false"
-      aria-orientation="horizontal"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="8"
-      class="ant-slider-handle"
-      role="slider"
-      style="left:8%;transform:translateX(-50%)"
-      tabindex="0"
-    />
-  </div>,
-  <br />,
-  <br />,
-  <div
-    class="ant-space ant-space-horizontal ant-space-align-center"
-    style="column-gap:8px;row-gap:8px"
-  >
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-primary"
-        type="button"
-      >
-        <span>
-          Primary
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-default"
-        type="button"
-      >
-        <span>
-          Default
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-dashed"
-        type="button"
-      >
-        <span>
-          Dashed
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-link"
-        type="button"
-      >
-        <span>
-          Link
-        </span>
-      </button>
-    </div>
-  </div>,
-]
-`;
-
 exports[`renders components/space/demo/debug.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
@@ -4178,7 +4093,7 @@ Array [
         />
       </span>
       <span>
-        Small
+        small
       </span>
     </label>
     <label
@@ -4197,7 +4112,7 @@ Array [
         />
       </span>
       <span>
-        Middle
+        middle
       </span>
     </label>
     <label
@@ -4216,7 +4131,26 @@ Array [
         />
       </span>
       <span>
-        Large
+        large
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio ant-wave-target"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="customize"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        customize
       </span>
     </label>
   </div>,

components/space/demo/customize.md

@@ -1,7 +0,0 @@
-## zh-CN
-
-自定义间距大小。
-
-## en-US
-
-Custom spacing size.

components/space/demo/customize.tsx

@@ -1,22 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Slider, Space } from 'antd';
-
-const App: React.FC = () => {
-  const [size, setSize] = useState(8);
-
-  return (
-    <>
-      <Slider value={size} onChange={(value) => setSize(value)} />
-      <br />
-      <br />
-      <Space size={size}>
-        <Button type="primary">Primary</Button>
-        <Button>Default</Button>
-        <Button type="dashed">Dashed</Button>
-        <Button type="link">Link</Button>
-      </Space>
-    </>
-  );
-};
-
-export default App;

components/space/demo/size.md

@@ -1,11 +1,7 @@
 ## zh-CN
 
-间距预设大、中、小三种大小。
+使用 `size` 设置元素之间的间距，预设了 `small`、`middle`、`large` 三种尺寸，也可以自定义间距，若不设置 `size`，则默认为 `small`。
-
-通过设置 `size` 为 `large` `middle` 分别把间距设为大、中间距。若不设置 `size`，则间距为小。
 
 ## en-US
 
-`large`, `middle` and `small` preset sizes.
+Use `size` to set the spacing, Three sizes are preset: `small`, `middle`, `large`. You can also customize the spacing. If `size` is not set, the spacing is `small`.
-
-Set the size to `large` and `middle` by setting size to large and middle respectively. If `size` is not set, the spacing is `small`.

components/space/demo/size.tsx

@@ -1,20 +1,28 @@
 import React, { useState } from 'react';
-import { Button, Radio, Space } from 'antd';
+import { Button, Radio, Slider, Space } from 'antd';
-import type { SpaceSize } from 'antd/es/space';
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
 
 const App: React.FC = () => {
-  const [size, setSize] = useState<SpaceSize | [SpaceSize, SpaceSize]>('small');
+  const [size, setSize] = useState<SizeType | [SizeType, SizeType] | 'customize'>('small');
-
+  const [customSize, setCustomSize] = React.useState<number>(0);
   return (
     <>
       <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
-        <Radio value="small">Small</Radio>
+        {['small', 'middle', 'large', 'customize'].map((item) => (
-        <Radio value="middle">Middle</Radio>
+          <Radio key={item} value={item}>
-        <Radio value="large">Large</Radio>
+            {item}
+          </Radio>
+        ))}
       </Radio.Group>
       <br />
       <br />
-      <Space size={size}>
+      {size === 'customize' && (
+        <>
+          <Slider value={customSize} onChange={setCustomSize} />
+          <br />
+        </>
+      )}
+      <Space size={size !== 'customize' ? size : customSize}>
         <Button type="primary">Primary</Button>
         <Button>Default</Button>
         <Button type="dashed">Dashed</Button>

components/space/index.en-US.md

@@ -20,7 +20,6 @@ Set components spacing.
 <code src="./demo/vertical.tsx">Vertical Space</code>
 <code src="./demo/size.tsx">Space Size</code>
 <code src="./demo/align.tsx">Align</code>
-<code src="./demo/customize.tsx">Customize Size</code>
 <code src="./demo/wrap.tsx">Wrap</code>
 <code src="./demo/split.tsx">Split</code>
 <code src="./demo/compact.tsx">Compact Mode for form component</code>

components/space/index.zh-CN.md

@@ -24,7 +24,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
 <code src="./demo/vertical.tsx">垂直间距</code>
 <code src="./demo/size.tsx">间距大小</code>
 <code src="./demo/align.tsx">对齐</code>
-<code src="./demo/customize.tsx">自定义尺寸</code>
 <code src="./demo/wrap.tsx">自动换行</code>
 <code src="./demo/split.tsx">分隔符</code>
 <code src="./demo/compact.tsx">紧凑布局组合</code>

docs/react/migration-v5.en-US.md

@@ -318,6 +318,57 @@ export default () => (
 
 Ant Design v5 using `:where` css selector to reduce CSS-in-JS hash priority. You can use `@ant-design/cssinjs` `StyleProvider` to cancel this function. Please ref [Compatible adjustment](/docs/react/customize-theme#compatible-adjustment).
 
+## Multiple versions coexist
+
+We do not recommend multiple versions coexist, it will make the application more complex (such as style override, ConfigProvider not reused, etc.). It's better to use micro-applications such as [qiankun](https://qiankun.umijs.org/) for page level development.
+
+### Install v5 through alias
+
+```bash
+$ npm install --save antd-v5@npm:antd@5
+# or
+$ yarn add antd-v5@npm:antd@5
+# or
+$ pnpm add antd-v5@npm:antd@5
+```
+
+The package.json will be:
+
+```json
+{
+  "antd": "4.x",
+  "antd-v5": "npm:antd@5"
+}
+```
+
+Now, antd in your project is still v4, and antd-v5 is v5.
+
+```tsx
+import React from 'react';
+import { Button as Button4 } from 'antd'; // v4
+import { Button as Button5 } from 'antd-v5'; // v5
+
+export default () => (
+  <>
+    <Button4 />
+    <Button5 />
+  </>
+);
+```
+
+Then config `prefixCls` of ConfigProvider to avoid style conflict:
+
+```tsx
+import React from 'react';
+import { ConfigProvider as ConfigProvider5 } from 'antd-v5';
+
+export default () => (
+  <ConfigProvider5 prefixCls="ant5">
+    <MyApp />
+  </ConfigProvider5>
+);
+```
+
 ## Encounter problems
 
 If you encounter problems during the upgrade, please go to [GitHub issues](https://new-issue.ant.design/) for feedback. We will respond and improve this document as soon as possible.

docs/react/migration-v5.zh-CN.md

@@ -309,6 +309,59 @@ export default () => (
 
 Ant Design v5 使用 `:where` css selector 降低 CSS-in-JS hash 值优先级，如果你需要支持旧版本浏览器（如 IE 11、360 浏览器 等等）。可以通过 `@ant-design/cssinjs` 的 `StyleProvider` 去除降权操作。详情请参阅 [兼容性调整](/docs/react/customize-theme-cn#兼容性调整)。
 
+## 多版本共存
+
+一般情况下，并不推荐多版本共存，它会让应用变得复杂（例如样式覆盖、ConfigProvider 不复用等问题）。我们更推荐使用微应用如 [qiankun](https://qiankun.umijs.org/) 等框架进行分页研发。
+
+### 通过别名安装 v5
+
+```bash
+$ npm install --save antd-v5@npm:antd@5
+# or
+$ yarn add antd-v5@npm:antd@5
+# or
+$ pnpm add antd-v5@npm:antd@5
+```
+
+对应的 package.json 为：
+
+```json
+{
+  "antd": "4.x",
+  "antd-v5": "npm:antd@5"
+}
+```
+
+现在，你项目中的 antd 还是 v4 版本，antd-v5 是 v5 版本。
+
+```tsx
+import React from 'react';
+import { Button as Button4 } from 'antd'; // v4
+import { Button as Button5 } from 'antd-v5'; // v5
+
+export default () => (
+  <>
+    <Button4 />
+    <Button5 />
+  </>
+);
+```
+
+接着配置 ConfigProvider 将 v5 `prefixCls` 改写，防止样式冲突：
+
+```tsx
+import React from 'react';
+import { ConfigProvider as ConfigProvider5 } from 'antd-v5';
+
+export default () => (
+  <ConfigProvider5 prefixCls="ant5">
+    <MyApp />
+  </ConfigProvider5>
+);
+```
+
+需要注意的是，npm 别名并不是所有的包管理器都有很好的支持。
+
 ## 遇到问题
 
 如果您在升级过程中遇到了问题，请到 [GitHub issues](https://new-issue.ant.design/) 进行反馈。我们会尽快响应和相应改进这篇文档。

package.json

@@ -63,7 +63,7 @@
     "predist": "npm run version",
     "presite": "npm run prestart",
     "compile": "npm run clean && antd-tools run compile",
-    "changelog": "git fetch origin && node ./scripts/print-changelog",
+    "changelog": "git fetch origin && tsx scripts/print-changelog.ts",
     "predeploy": "antd-tools run clean && npm run site && cp CNAME _site && npm run site:test",
     "deploy": "gh-pages -d _site -b gh-pages -f",
     "deploy:china-mirror": "git checkout gh-pages && git pull origin gh-pages && git push git@gitee.com:ant-design/ant-design.git gh-pages -f",
@@ -79,12 +79,12 @@
     "lint:md": "remark . -f -q",
     "lint:style": "tsx scripts/check-cssinjs.ts",
     "lint:script": "npm run component-changelog && eslint . --ext .js,.jsx,.ts,.tsx --cache",
-    "pre-publish": "npm run test-all -- --skip-build && node ./scripts/pre-publish-notice.js",
+    "pre-publish": "npm run test-all -- --skip-build && tsx ./scripts/pre-publish-notice.ts",
     "prettier": "prettier -c --write **/* --cache",
     "pub": "npm run version && npm run collect-token-statistic && npm run token-meta && antd-tools run pub",
     "biome:format": "biome format --write .",
     "prepublishOnly": "antd-tools run guard",
-    "postpublish": "node ./scripts/post-script.js",
+    "postpublish": "tsx scripts/post-script.ts",
     "site": "dumi build && cp .surgeignore _site",
     "sort": "npx sort-package-json",
     "sort-api": "antd-tools run sort-api-table",
@@ -241,7 +241,7 @@
     "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
     "immer": "^10.0.1",
-    "inquirer": "^9.1.2",
+    "inquirer": "^9.2.11",
     "is-ci": "^3.0.1",
     "isomorphic-fetch": "^3.0.0",
     "jest": "^29.4.1",

scripts/post-script.ts

@@ -1,10 +1,11 @@
 /* eslint-disable no-console */
-const { spawnSync } = require('child_process');
+import { spawnSync } from 'child_process';
-const fetch = require('isomorphic-fetch');
+import chalk from 'chalk';
-const semver = require('semver');
+import dayjs from 'dayjs';
-const dayjs = require('dayjs');
+import relativeTime from 'dayjs/plugin/relativeTime';
-const chalk = require('chalk');
+import inquirer from 'inquirer';
-const relativeTime = require('dayjs/plugin/relativeTime');
+import fetch from 'isomorphic-fetch';
+import semver from 'semver';
 
 dayjs.extend(relativeTime);
 
@@ -45,14 +46,14 @@ const DEPRECIATED_VERSION = {
     'https://github.com/ant-design/ant-design/issues/43684',
   ],
   '5.8.0': ['https://github.com/ant-design/ant-design/issues/43943'],
-};
+} as const;
 
-function matchDeprecated(version) {
+function matchDeprecated(v: string) {
   const match = Object.keys(DEPRECIATED_VERSION).find((depreciated) =>
-    semver.satisfies(version, depreciated),
+    semver.satisfies(v, depreciated),
   );
 
-  const reason = DEPRECIATED_VERSION[match] || [];
+  const reason = DEPRECIATED_VERSION[match as keyof typeof DEPRECIATED_VERSION] || [];
 
   return {
     match,
@@ -72,7 +73,7 @@ const SAFE_DAYS_DIFF = 1000 * 60 * 60 * 24 * 3; // 3 days not update seems to be
   // }
 
   const { time, 'dist-tags': distTags } = await fetch('http://registry.npmjs.org/antd').then(
-    (res) => res.json(),
+    (res: Response) => res.json(),
   );
 
   console.log('🐚 Latest Conch Version:', chalk.green(distTags[CONCH_TAG] || 'null'), '\n');
@@ -128,11 +129,10 @@ const SAFE_DAYS_DIFF = 1000 * 60 * 60 * 24 * 3; // 3 days not update seems to be
   let defaultVersion = defaultVersionObj ? defaultVersionObj.value : null;
 
   // If default version is less than current, use current
-  if (semver.compare(defaultVersion, distTags[CONCH_TAG]) < 0) {
+  if (semver.compare(defaultVersion!, distTags[CONCH_TAG]) < 0) {
     defaultVersion = distTags[CONCH_TAG];
   }
 
-  const { default: inquirer } = await import('inquirer');
   // Selection
   let { conchVersion } = await inquirer.prompt([
     {
@@ -196,9 +196,6 @@ const SAFE_DAYS_DIFF = 1000 * 60 * 60 * 24 * 3; // 3 days not update seems to be
     console.log(`🎃 Conch Version not change. Safe to ${chalk.green('ignore')}.`);
   } else {
     console.log('💾 Tagging Conch Version:', chalk.green(conchVersion));
-    spawnSync('npm', ['dist-tag', 'add', `antd@${conchVersion}`, CONCH_TAG], {
+    spawnSync('npm', ['dist-tag', 'add', `antd@${conchVersion}`, CONCH_TAG], { stdio: 'inherit' });
-      stdio: 'inherit',
-      stdin: 'inherit',
-    });
   }
 })();

scripts/pre-publish-notice.ts

@@ -1,6 +1,6 @@
-const { Notification } = require('node-notifier');
+const { Notification: Notifier } = require('node-notifier');
 
-new Notification().notify({
+new Notifier().notify({
   title: '✅ 准备发布到 npm',
   message: '测试用例执行完毕，快回来输入 npm 校验码了！',
   sound: 'Crystal',

scripts/print-changelog.ts

@@ -1,19 +1,22 @@
 /* eslint-disable no-await-in-loop, no-console */
-const { spawn } = require('child_process');
+import { spawn } from 'child_process';
-const path = require('path');
+import path from 'path';
-const chalk = require('chalk');
+import chalk from 'chalk';
-const jsdom = require('jsdom');
+import fs from 'fs-extra';
-const jQuery = require('jquery');
+import inquirer from 'inquirer';
-const fetch = require('isomorphic-fetch');
+import fetch from 'isomorphic-fetch';
-const fs = require('fs-extra');
+import jQuery from 'jquery';
-const simpleGit = require('simple-git');
+import jsdom from 'jsdom';
+import openWindow from 'open';
+import simpleGit from 'simple-git';
 
 const { JSDOM } = jsdom;
 const { window } = new JSDOM();
 const { document } = new JSDOM('').window;
+
 global.document = document;
 
-const $ = jQuery(window);
+const $ = jQuery<jsdom.DOMWindow>(window) as unknown as JQueryStatic;
 
 const QUERY_TITLE = '.gh-header-title .js-issue-title';
 const QUERY_DESCRIPTION_LINES = '.comment-body table tbody tr';
@@ -43,7 +46,21 @@ const MAINTAINERS = [
 const cwd = process.cwd();
 const git = simpleGit(cwd);
 
-function getDescription(entity) {
+interface Line {
+  text: string;
+  element: JQuery<HTMLElement>;
+}
+
+interface PR {
+  pr?: string;
+  hash: string;
+  title: string;
+  author: string;
+  english: string;
+  chinese: string;
+}
+
+const getDescription = (entity?: Line): string => {
   if (!entity) {
     return '';
   }
@@ -51,11 +68,10 @@ function getDescription(entity) {
   let htmlContent = descEle.html();
   htmlContent = htmlContent.replace(/<code class="notranslate">([^<]*)<\/code>/g, '`$1`');
   return htmlContent.trim();
-}
+};
 
 async function printLog() {
   const tags = await git.tags();
-  const { default: inquirer } = await import('inquirer');
   const { fromVersion } = await inquirer.prompt([
     {
       type: 'list',
@@ -98,7 +114,7 @@ async function printLog() {
 
   const logs = await git.log({ from: fromVersion, to: toVersion });
 
-  let prList = [];
+  let prList: PR[] = [];
 
   for (let i = 0; i < logs.all.length; i += 1) {
     const { message, body, hash, author_name: author } = logs.all[i];
@@ -119,10 +135,10 @@ async function printLog() {
       const pr = prs[j];
 
       // Use jquery to get full html page since it don't need auth token
-      let res;
+      let res: any;
       let tryTimes = 0;
       const timeout = 30000;
-      let html;
+      let html: HTMLElement | undefined;
       const fetchPullRequest = async () => {
         try {
           res = await new Promise((resolve, reject) => {
@@ -130,7 +146,7 @@ async function printLog() {
               reject(new Error(`Fetch timeout of ${timeout}ms exceeded`));
             }, timeout);
             fetch(`https://github.com/ant-design/ant-design/pull/${pr}`)
-              .then((response) => {
+              .then((response: Response) => {
                 response.text().then((htmlRes) => {
                   html = htmlRes;
                   resolve(response);
@@ -150,17 +166,18 @@ async function printLog() {
         }
       };
       await fetchPullRequest();
-      if (res.url.includes('/issues/')) {
+      if (res?.url.includes('/issues/')) {
         continue;
       }
 
-      const $html = $(html);
+      const $html = $(html!);
 
-      const prTitle = $html.find(QUERY_TITLE).text().trim();
+      const prTitle: string = $html.find(QUERY_TITLE).text().trim();
-      const prAuthor = $html.find(QUERY_AUTHOR).text().trim();
+      const prAuthor: string = $html.find(QUERY_AUTHOR).text().trim();
-      const prLines = $html.find(QUERY_DESCRIPTION_LINES);
+      const prLines: JQuery<HTMLElement> = $html.find(QUERY_DESCRIPTION_LINES);
+
+      const lines: Line[] = [];
 
-      const lines = [];
       prLines.each(function getDesc() {
         lines.push({
           text: $(this).text().trim(),
@@ -170,6 +187,7 @@ async function printLog() {
 
       const english = getDescription(lines.find((line) => line.text.includes('🇺🇸 English')));
       const chinese = getDescription(lines.find((line) => line.text.includes('🇨🇳 Chinese')));
+
       if (english) {
         console.log(`  🇺🇸  ${english}`);
       }
@@ -206,11 +224,11 @@ async function printLog() {
 
   console.log('\n', chalk.green('Done. Here is the log:'));
 
-  function printPR(lang, postLang) {
+  function printPR(lang: string, postLang: (str?: string) => string) {
     prList.forEach((entity) => {
       const { pr, author, hash, title } = entity;
       if (pr) {
-        const str = postLang(entity[lang]);
+        const str = postLang(entity[lang as keyof PR]);
         let icon = '';
         if (str.toLowerCase().includes('fix') || str.includes('修复')) {
           icon = '🐞';
@@ -239,7 +257,8 @@ async function printLog() {
   console.log('\n');
   console.log(chalk.yellow('🇨🇳 Chinese changelog:'));
   console.log('\n');
-  printPR('chinese', (chinese) =>
+
+  printPR('chinese', (chinese: string) =>
     chinese[chinese.length - 1] === '。' || !chinese ? chinese : `${chinese}。`,
   );
 
@@ -248,7 +267,7 @@ async function printLog() {
   // English
   console.log(chalk.yellow('🇺🇸 English changelog:'));
   console.log('\n');
-  printPR('english', (english) => {
+  printPR('english', (english: string) => {
     english = english.trim();
     if (english[english.length - 1] !== '.' || !english) {
       english = `${english}.`;
@@ -269,19 +288,17 @@ async function printLog() {
   const ls = spawn(
     'npx',
     ['http-server', path.join(__dirname, 'previewEditor'), '-c-1', '-p', '2893'],
-    {
+    { shell: true },
-      shell: true,
-    },
   );
+
   ls.stdout.on('data', (data) => {
     console.log(data.toString());
   });
 
   console.log(chalk.green('Start changelog preview editor...'));
-  const { default: open } = await import('open');
 
   setTimeout(() => {
-    open('http://localhost:2893/');
+    openWindow('http://localhost:2893/');
   }, 1000);
 }
 

tests/index.html

@@ -7,6 +7,7 @@
     <style>
       body {
         border: 5px solid #1890ff;
+        height: auto !important;
       }
     </style>
   </head>