feat: Select like component support pure render (#36407)

* feat: support select pure render

* test: Update snapshot

* chore: fix pure render export ts

* chore: fix lint

* test: do not care about ssr

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

@@ -1909,6 +1909,162 @@ Array [
 ]
 `;
 
+exports[`renders ./components/cascader/demo/render-panel.md extend context correctly 1`] = `
+<div
+  style="padding-bottom:0"
+>
+  <div
+    class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
+    style="margin:0"
+  >
+    <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-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"
+      >
+        Please select
+      </span>
+    </div>
+    <div>
+      <div
+        class="ant-select-dropdown ant-cascader-dropdown"
+        style="opacity:0;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 ant-cascader-menu-item-expand"
+                data-path-key="zhejiang"
+                role="menuitemcheckbox"
+                title="Zhejiang"
+              >
+                <div
+                  class="ant-cascader-menu-item-content"
+                >
+                  Zhejiang
+                </div>
+                <div
+                  class="ant-cascader-menu-item-expand-icon"
+                >
+                  <span
+                    aria-label="right"
+                    class="anticon anticon-right"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="right"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </li>
+              <li
+                aria-checked="false"
+                class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+                data-path-key="jiangsu"
+                role="menuitemcheckbox"
+                title="Jiangsu"
+              >
+                <div
+                  class="ant-cascader-menu-item-content"
+                >
+                  Jiangsu
+                </div>
+                <div
+                  class="ant-cascader-menu-item-expand-icon"
+                >
+                  <span
+                    aria-label="right"
+                    class="anticon anticon-right"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="right"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </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>
+`;
+
 exports[`renders ./components/cascader/demo/search.md extend context correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"

components/cascader/__tests__/__snapshots__/demo.test.js.snap

@@ -803,6 +803,72 @@ Array [
 ]
 `;
 
+exports[`renders ./components/cascader/demo/render-panel.md correctly 1`] = `
+<div
+  style="padding-bottom:0"
+>
+  <div
+    class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
+    style="margin:0"
+  >
+    <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-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"
+      >
+        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>
+`;
+
 exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"

components/cascader/demo/render-panel.md

@@ -0,0 +1,67 @@
+---
+order: 999
+title:
+  zh-CN: _InternalPanelDoNotUseOrYouWillBeFired
+  en-US: _InternalPanelDoNotUseOrYouWillBeFired
+debug: true
+---
+
+## zh-CN
+
+调试用组件，请勿直接使用。
+
+## en-US
+
+Debug usage. Do not use in your production.
+
+```tsx
+import { Cascader } from 'antd';
+import React from 'react';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalCascader } = Cascader;
+
+interface Option {
+  value: string | number;
+  label: string;
+  children?: Option[];
+}
+
+const options: Option[] = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [
+          {
+            value: 'xihu',
+            label: 'West Lake',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: 'Nanjing',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: 'Zhong Hua Men',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const App: React.FC = () => <InternalCascader options={options} placeholder="Please select" />;
+
+export default App;
+```

components/cascader/index.tsx

@@ -29,6 +29,7 @@ import warning from '../_util/warning';
 
 import useSelectStyle from '../select/style';
 import useStyle from './style';
+import genPurePanel from '../select/PurePanel';
 
 // Align the design since we use `rc-select` in root. This help:
 // - List search content will show all content
@@ -317,11 +318,18 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
   displayName: string;
   SHOW_PARENT: typeof SHOW_PARENT;
   SHOW_CHILD: typeof SHOW_CHILD;
+  _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
 };
 if (process.env.NODE_ENV !== 'production') {
   Cascader.displayName = 'Cascader';
 }
+
+// We don't care debug panel
+/* istanbul ignore next */
+const PurePanel = genPurePanel(Cascader);
+
 Cascader.SHOW_PARENT = SHOW_PARENT;
 Cascader.SHOW_CHILD = SHOW_CHILD;
+Cascader._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
 
 export default Cascader;

components/select/PurePanel.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { ConfigContext } from '../config-provider';
+
+export interface BaseProps {
+  prefixCls?: string;
+  style?: React.CSSProperties;
+}
+
+/* istanbul ignore next */
+export default function genPurePanel<ComponentProps extends BaseProps>(Component: any) {
+  return function PurePanel(props: ComponentProps) {
+    const { prefixCls: customizePrefixCls, style } = props;
+    const holderRef = React.useRef<HTMLDivElement>(null);
+    const [popupHeight, setPopupHeight] = React.useState(0);
+    const [open, setOpen] = React.useState(false);
+
+    const { getPrefixCls } = React.useContext(ConfigContext);
+    const prefixCls = getPrefixCls('select', customizePrefixCls);
+
+    React.useEffect(() => {
+      // We do not care about ssr
+      setOpen(true);
+
+      if (typeof ResizeObserver !== 'undefined') {
+        const resizeObserver = new ResizeObserver(entries => {
+          const element: HTMLDivElement = entries[0].target as any;
+          setPopupHeight(element.offsetHeight + 8);
+        });
+
+        const interval = setInterval(() => {
+          const popup = holderRef.current?.querySelector(`.${prefixCls}-dropdown`);
+
+          if (popup) {
+            clearInterval(interval);
+            resizeObserver.observe(popup);
+          }
+        }, 10);
+
+        return () => {
+          clearInterval(interval);
+          resizeObserver.disconnect();
+        };
+      }
+    }, []);
+
+    return (
+      <div ref={holderRef} style={{ paddingBottom: popupHeight }}>
+        <Component
+          {...props}
+          style={{
+            ...style,
+            margin: 0,
+          }}
+          open={open}
+          getPopupContainer={() => holderRef.current!}
+        />
+      </div>
+    );
+  } as typeof Component;
+}

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

@@ -4403,6 +4403,190 @@ Array [
 ]
 `;
 
+exports[`renders ./components/select/demo/render-panel.md extend context correctly 1`] = `
+<div
+  style="padding-bottom:0"
+>
+  <div
+    class="ant-select ant-select-single ant-select-show-arrow"
+    style="width:120px;margin:0"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-activedescendant="undefined_list_0"
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          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-item"
+        title="Lucy"
+      >
+        Lucy
+      </span>
+    </div>
+    <div>
+      <div
+        class="ant-select-dropdown"
+        style="opacity:0"
+      >
+        <div>
+          <div
+            id="undefined_list"
+            role="listbox"
+            style="height:0;width:0;overflow:hidden"
+          >
+            <div
+              aria-label="Jack"
+              aria-selected="false"
+              id="undefined_list_0"
+              role="option"
+            >
+              jack
+            </div>
+            <div
+              aria-label="Lucy"
+              aria-selected="true"
+              id="undefined_list_1"
+              role="option"
+            >
+              lucy
+            </div>
+          </div>
+          <div
+            class="rc-virtual-list"
+            style="position:relative"
+          >
+            <div
+              class="rc-virtual-list-holder"
+              style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+            >
+              <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"
+                    title="Jack"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      Jack
+                    </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select:none;-webkit-user-select:none"
+                      unselectable="on"
+                    />
+                  </div>
+                  <div
+                    aria-selected="true"
+                    class="ant-select-item ant-select-item-option ant-select-item-option-selected"
+                    title="Lucy"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      Lucy
+                    </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select:none;-webkit-user-select:none"
+                      unselectable="on"
+                    />
+                  </div>
+                  <div
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option"
+                    title="Disabled"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      Disabled
+                    </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select:none;-webkit-user-select:none"
+                      unselectable="on"
+                    />
+                  </div>
+                  <div
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option"
+                    title="Bamboo"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      Bamboo
+                    </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select:none;-webkit-user-select:none"
+                      unselectable="on"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </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>
+`;
+
 exports[`renders ./components/select/demo/responsive.md extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"

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

@@ -1717,6 +1717,74 @@ Array [
 ]
 `;
 
+exports[`renders ./components/select/demo/render-panel.md correctly 1`] = `
+<div
+  style="padding-bottom:0"
+>
+  <div
+    class="ant-select ant-select-single ant-select-show-arrow"
+    style="width:120px;margin:0"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-activedescendant="undefined_list_0"
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          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-item"
+        title="Lucy"
+      >
+        Lucy
+      </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>
+`;
+
 exports[`renders ./components/select/demo/responsive.md correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"

components/select/demo/render-panel.md

@@ -0,0 +1,37 @@
+---
+order: 999
+title:
+  zh-CN: _InternalPanelDoNotUseOrYouWillBeFired
+  en-US: _InternalPanelDoNotUseOrYouWillBeFired
+debug: true
+---
+
+## zh-CN
+
+调试用组件，请勿直接使用。
+
+## en-US
+
+Debug usage. Do not use in your production.
+
+```tsx
+import { Select } from 'antd';
+import React from 'react';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalSelect } = Select;
+
+const App: React.FC = () => (
+  <InternalSelect
+    defaultValue="lucy"
+    style={{ width: 120 }}
+    options={[
+      { label: 'Jack', value: 'jack' },
+      { label: 'Lucy', value: 'lucy' },
+      { label: 'Disabled', value: 'disabled' },
+      { label: 'Bamboo', value: 'bamboo' },
+    ]}
+  />
+);
+
+export default App;
+```

components/select/index.tsx

@@ -21,6 +21,7 @@ import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import getIcons from './utils/iconUtil';
 
 import useStyle from './style';
+import genPurePanel from './PurePanel';
 
 type RawValue = string | number;
 
@@ -221,10 +222,16 @@ const Select = React.forwardRef(InternalSelect) as unknown as (<
   SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
   Option: typeof Option;
   OptGroup: typeof OptGroup;
+  _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
 };
 
+// We don't care debug panel
+/* istanbul ignore next */
+const PurePanel = genPurePanel(Select);
+
 Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
 Select.Option = Option;
 Select.OptGroup = OptGroup;
+Select._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
 
 export default Select;

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

@@ -1571,6 +1571,193 @@ Array [
 ]
 `;
 
+exports[`renders ./components/tree-select/demo/render-panel.md extend context correctly 1`] = `
+<div
+  style="padding-bottom:0"
+>
+  <div
+    class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+    style="width:100%;margin:0"
+  >
+    <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-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-item"
+        title="lucy"
+      >
+        lucy
+      </span>
+    </div>
+    <div>
+      <div
+        class="ant-select-dropdown ant-tree-select-dropdown"
+        style="opacity:0"
+      >
+        <div>
+          <div>
+            <div
+              class="ant-select-tree"
+              role="tree"
+            >
+              <div>
+                <input
+                  aria-label="for screen reader"
+                  disabled=""
+                  style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
+                  value=""
+                />
+              </div>
+              <div
+                aria-hidden="true"
+                class="ant-select-tree-treenode"
+                style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+              >
+                <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;overflow-anchor:none"
+                >
+                  <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-close"
+                        draggable="false"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-tree-indent"
+                        />
+                        <span
+                          class="ant-select-tree-switcher ant-select-tree-switcher_close"
+                        >
+                          <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-close"
+                          title="Node1"
+                        >
+                          <span
+                            class="ant-select-tree-title"
+                          >
+                            Node1
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        aria-grabbed="false"
+                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close 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-noop"
+                        />
+                        <span
+                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
+                          title="Node2"
+                        >
+                          <span
+                            class="ant-select-tree-title"
+                          >
+                            Node2
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </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>
+`;
+
 exports[`renders ./components/tree-select/demo/status.md extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"

components/tree-select/__tests__/__snapshots__/demo.test.js.snap

@@ -399,6 +399,73 @@ Array [
 ]
 `;
 
+exports[`renders ./components/tree-select/demo/render-panel.md correctly 1`] = `
+<div
+  style="padding-bottom:0"
+>
+  <div
+    class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+    style="width:100%;margin:0"
+  >
+    <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-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-item"
+        title="lucy"
+      >
+        lucy
+      </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>
+`;
+
 exports[`renders ./components/tree-select/demo/status.md correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"

components/tree-select/demo/render-panel.md

@@ -0,0 +1,49 @@
+---
+order: 999
+title:
+  zh-CN: _InternalPanelDoNotUseOrYouWillBeFired
+  en-US: _InternalPanelDoNotUseOrYouWillBeFired
+debug: true
+---
+
+## zh-CN
+
+调试用组件，请勿直接使用。
+
+## en-US
+
+Debug usage. Do not use in your production.
+
+```tsx
+import { TreeSelect } from 'antd';
+import React from 'react';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalTreeSelect } = TreeSelect;
+
+const treeData = [
+  {
+    title: 'Node1',
+    value: '0-0',
+    children: [
+      {
+        title: 'Child Node1',
+        value: '0-0-1',
+      },
+      {
+        title: 'Child Node2',
+        value: '0-0-2',
+      },
+    ],
+  },
+  {
+    title: 'Node2',
+    value: '0-1',
+  },
+];
+
+const App: React.FC = () => (
+  <InternalTreeSelect defaultValue="lucy" style={{ width: '100%' }} treeData={treeData} />
+);
+
+export default App;
+```

components/tree-select/index.tsx

@@ -12,6 +12,7 @@ import DisabledContext from '../config-provider/DisabledContext';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
+import genPurePanel from '../select/PurePanel';
 import useSelectStyle from '../select/style';
 import getIcons from '../select/utils/iconUtil';
 import type { AntTreeNodeProps, TreeProps } from '../tree';
@@ -245,14 +246,20 @@ interface TreeSelectInterface extends InternalTreeSelectType {
   SHOW_ALL: typeof SHOW_ALL;
   SHOW_PARENT: typeof SHOW_PARENT;
   SHOW_CHILD: typeof SHOW_CHILD;
+  _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
 }
 
 const TreeSelect = TreeSelectRef as TreeSelectInterface;
 
+// We don't care debug panel
+/* istanbul ignore next */
+const PurePanel = genPurePanel(TreeSelect);
+
 TreeSelect.TreeNode = TreeNode;
 TreeSelect.SHOW_ALL = SHOW_ALL;
 TreeSelect.SHOW_PARENT = SHOW_PARENT;
 TreeSelect.SHOW_CHILD = SHOW_CHILD;
+TreeSelect._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
 
 export { TreeNode };