feat(zhst/biz,zhst/meta): 穿梭框完成,新增meta组件

packages/biz/es/BigImageModal/BigImageModal.js

@@ -4,7 +4,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -12,13 +11,16 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 // @ts-nocheck
-import React, { forwardRef, useImperativeHandle, useRef, useState, useEffect } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { ConfigProvider, Descriptions, Modal, Tabs, CropperImage, AttachImage, VideoPlayer, BtnGroup, RelatedImage } from '@zhst/meta';
 import classNames from 'classnames';
 import { get, isEmpty, pick } from '@zhst/func';
 import Navigation from "./components/navigation";
 import CombineImage from "./components/CombineImage";
 import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var DescriptionsItem = Descriptions.Item;
 export var componentPrefix = 'zhst-image';
 
@@ -98,58 +100,62 @@ var BigImageModal = /*#__PURE__*/forwardRef(function (props, ref) {
     items: [{
       label: '对比图模式',
       key: 'COMPATER',
-      children: /*#__PURE__*/React.createElement(CombineImage, _extends({
+      children: /*#__PURE__*/_jsx(CombineImage, _objectSpread({
         ref: combineImageRef,
         data: pick(dataSource, 'compaterImage', 'imgSummary', 'imageKey', 'score')
       }, compareImageProps))
     }, {
       label: '场景图模式',
       key: 'NORMAL',
-      children: /*#__PURE__*/React.createElement("div", {
+      children: /*#__PURE__*/_jsx("div", {
         style: {
           display: 'flex',
           justifyContent: 'center',
           width: '100%'
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          width: '85%',
-          height: '500px'
-        }
-      }, /*#__PURE__*/React.createElement(CropperImage, _extends({
-        type: "rect",
-        odList: get(dataSource, 'odRect', [])
-      }, cropperImageProps), !(cropperImageProps !== null && cropperImageProps !== void 0 && cropperImageProps.editAble) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AttachImage, {
-        data: [{
-          label: '测试',
-          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
-        }]
-      }), /*#__PURE__*/React.createElement("div", {
-        style: {
-          position: 'absolute',
-          right: '24px',
-          bottom: '24px',
-          fontSize: '18px',
-          color: 'red',
-          cursor: 'default'
-        }
-      }, "\u4EBA\u8138\u8D28\u91CF\u5206\uFF1A".concat(Number(cropperImageProps === null || cropperImageProps === void 0 ? void 0 : cropperImageProps.score).toFixed(2)))), (cropperImageProps === null || cropperImageProps === void 0 ? void 0 : cropperImageProps.showEditTools) && /*#__PURE__*/React.createElement(BtnGroup, _extends({
-        circle: true,
-        style: {
-          position: 'absolute',
-          top: 0,
-          right: 0
         },
-        dataSource: cropBtnDataSource,
-        onClick: handleCropBtnClick,
-        selectKey: cropType
-      }, btnGroupProps)))))
+        children: /*#__PURE__*/_jsx("div", {
+          style: {
+            width: '85%',
+            height: '500px'
+          },
+          children: /*#__PURE__*/_jsxs(CropperImage, _objectSpread(_objectSpread({
+            type: "rect",
+            odList: get(dataSource, 'odRect', [])
+          }, cropperImageProps), {}, {
+            children: [!(cropperImageProps !== null && cropperImageProps !== void 0 && cropperImageProps.editAble) && /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(AttachImage, {
+                data: [{
+                  label: '测试',
+                  url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+                }]
+              }), /*#__PURE__*/_jsx("div", {
+                style: {
+                  position: 'absolute',
+                  right: '24px',
+                  bottom: '24px',
+                  fontSize: '18px',
+                  color: 'red',
+                  cursor: 'default'
+                },
+                children: "\u4EBA\u8138\u8D28\u91CF\u5206\uFF1A".concat(Number(cropperImageProps === null || cropperImageProps === void 0 ? void 0 : cropperImageProps.score).toFixed(2))
+              })]
+            }), (cropperImageProps === null || cropperImageProps === void 0 ? void 0 : cropperImageProps.showEditTools) && /*#__PURE__*/_jsx(BtnGroup, _objectSpread({
+              circle: true,
+              style: {
+                position: 'absolute',
+                top: 0,
+                right: 0
+              },
+              dataSource: cropBtnDataSource,
+              onClick: handleCropBtnClick,
+              selectKey: cropType
+            }, btnGroupProps))]
+          }))
+        })
+      })
     }]
   };
 
-  // TODO: 页面初始化
-  useEffect(function () {}, [dataSource]);
-
   // 暴露 ref 实例
   useImperativeHandle(ref, function () {
     return {
@@ -163,7 +169,7 @@ var BigImageModal = /*#__PURE__*/forwardRef(function (props, ref) {
       combineImageRef: combineImageRef
     };
   });
-  return /*#__PURE__*/React.createElement(Modal, _extends({
+  return /*#__PURE__*/_jsxs(Modal, _objectSpread(_objectSpread({
     destroyOnClose: true,
     width: width,
     open: open,
@@ -172,85 +178,93 @@ var BigImageModal = /*#__PURE__*/forwardRef(function (props, ref) {
     className: componentPrefix,
     title: title,
     onCancel: onCancel
-  }, modalProps), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: '16px'
-    }
-  }, /*#__PURE__*/React.createElement(ConfigProvider, {
-    theme: _objectSpread({
-      token: {
-        colorTextSecondary: 'rgba(0,0,0,0.45)'
-      },
-      components: {
-        Descriptions: {
-          titleMarginBottom: '20px',
-          viewBg: '#f6f6f6',
-          titleColor: 'rgba(0,0,0,0.45)',
-          colorTextLabel: 'rgba(0,0,0,0.45)',
-          contentColor: 'rgba(0,0,0,0.88)'
-        }
-      }
-    }, theme)
-  }, attributeList.map(function (descriptions) {
-    var _descriptions$childre;
-    return /*#__PURE__*/React.createElement(Descriptions, _extends({
-      key: descriptions.title,
-      title: /*#__PURE__*/React.createElement("p", {
-        style: {
-          margin: '12px 0 0',
-          fontSize: initialStyle.fontSize
-        }
-      }, descriptions.title),
-      column: 8,
+  }, modalProps), {}, {
+    children: [/*#__PURE__*/_jsxs("div", {
       style: {
-        padding: '0 64px'
-      }
-    }, descriptionsProps), descriptions === null || descriptions === void 0 || (_descriptions$childre = descriptions.children) === null || _descriptions$childre === void 0 ? void 0 : _descriptions$childre.map(function (item) {
-      return /*#__PURE__*/React.createElement(DescriptionsItem, {
-        key: item.key,
-        label: item.label,
-        span: 1,
-        contentStyle: {
-          fontSize: initialStyle.fontSize
-        },
-        labelStyle: {
-          fontSize: initialStyle.fontSize
-        }
-      }, item.children);
-    }));
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(componentPrefix, "-view-container"))
-  }, /*#__PURE__*/React.createElement(Tabs, _extends({
-    activeKey: tab,
-    centered: true,
-    destroyInactiveTabPane: true,
-    onChange: function onChange(v) {
-      setTab(function (pre) {
-        onTabChange === null || onTabChange === void 0 || onTabChange(v, pre);
-        return v;
-      });
-    },
-    tabBarStyle: {
-      fontSize: '18px',
-      fontWeight: 'bold'
-    }
-  }, defaultTabsProps, tabsProps)), tab === 'VIDEO' && /*#__PURE__*/React.createElement(VideoPlayer, {
-    ref: videoPlayerRef,
-    url: dataSource === null || dataSource === void 0 ? void 0 : dataSource.flvUrl
-  }), /*#__PURE__*/React.createElement(Navigation, _extends({
-    className: classNames("".concat(componentPrefix, "-view-container__nav"), (prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.disabled) && "".concat(componentPrefix, "-view-container__nav--disabled"), "".concat(componentPrefix, "-view-container__nav--left")),
-    prev: true,
-    show: showNavigation,
-    onClick: onPrevButtonClick
-  }, prevButtonProps)), /*#__PURE__*/React.createElement(Navigation, _extends({
-    className: classNames("".concat(componentPrefix, "-view-container__nav"), (nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.disabled) && "".concat(componentPrefix, "-view-container__nav--disabled"), "".concat(componentPrefix, "-view-container__nav--right")),
-    next: true,
-    show: showNavigation,
-    onClick: onNextButtonClick
-  }, nextButtonProps)), isRelated && /*#__PURE__*/React.createElement("div", {
-    style: {
-      margin: '24px 0'
-    }
-  }, /*#__PURE__*/React.createElement(RelatedImage, relatedImageProps)))), children);
+        marginTop: '16px'
+      },
+      children: [/*#__PURE__*/_jsx(ConfigProvider, {
+        theme: _objectSpread({
+          token: {
+            colorTextSecondary: 'rgba(0,0,0,0.45)'
+          },
+          components: {
+            Descriptions: {
+              titleMarginBottom: '20px',
+              viewBg: '#f6f6f6',
+              titleColor: 'rgba(0,0,0,0.45)',
+              colorTextLabel: 'rgba(0,0,0,0.45)',
+              contentColor: 'rgba(0,0,0,0.88)'
+            }
+          }
+        }, theme),
+        children: attributeList.map(function (descriptions) {
+          var _descriptions$childre;
+          return /*#__PURE__*/_jsx(Descriptions, _objectSpread(_objectSpread({
+            title: /*#__PURE__*/_jsx("p", {
+              style: {
+                margin: '12px 0 0',
+                fontSize: initialStyle.fontSize
+              },
+              children: descriptions.title
+            }),
+            column: 8,
+            style: {
+              padding: '0 64px'
+            }
+          }, descriptionsProps), {}, {
+            children: descriptions === null || descriptions === void 0 || (_descriptions$childre = descriptions.children) === null || _descriptions$childre === void 0 ? void 0 : _descriptions$childre.map(function (item) {
+              return /*#__PURE__*/_jsx(DescriptionsItem, {
+                label: item.label,
+                span: 1,
+                contentStyle: {
+                  fontSize: initialStyle.fontSize
+                },
+                labelStyle: {
+                  fontSize: initialStyle.fontSize
+                },
+                children: item.children
+              }, item.key);
+            })
+          }), descriptions.title);
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: classNames("".concat(componentPrefix, "-view-container")),
+        children: [/*#__PURE__*/_jsx(Tabs, _objectSpread(_objectSpread({
+          activeKey: tab,
+          centered: true,
+          destroyInactiveTabPane: true,
+          onChange: function onChange(v) {
+            setTab(function (pre) {
+              onTabChange === null || onTabChange === void 0 || onTabChange(v, pre);
+              return v;
+            });
+          },
+          tabBarStyle: {
+            fontSize: '18px',
+            fontWeight: 'bold'
+          }
+        }, defaultTabsProps), tabsProps)), tab === 'VIDEO' && /*#__PURE__*/_jsx(VideoPlayer, {
+          ref: videoPlayerRef,
+          url: dataSource === null || dataSource === void 0 ? void 0 : dataSource.flvUrl
+        }), /*#__PURE__*/_jsx(Navigation, _objectSpread({
+          className: classNames("".concat(componentPrefix, "-view-container__nav"), (prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.disabled) && "".concat(componentPrefix, "-view-container__nav--disabled"), "".concat(componentPrefix, "-view-container__nav--left")),
+          prev: true,
+          show: showNavigation,
+          onClick: onPrevButtonClick
+        }, prevButtonProps)), /*#__PURE__*/_jsx(Navigation, _objectSpread({
+          className: classNames("".concat(componentPrefix, "-view-container__nav"), (nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.disabled) && "".concat(componentPrefix, "-view-container__nav--disabled"), "".concat(componentPrefix, "-view-container__nav--right")),
+          next: true,
+          show: showNavigation,
+          onClick: onNextButtonClick
+        }, nextButtonProps)), isRelated && /*#__PURE__*/_jsx("div", {
+          style: {
+            margin: '24px 0'
+          },
+          children: /*#__PURE__*/_jsx(RelatedImage, _objectSpread({}, relatedImageProps))
+        })]
+      })]
+    }), children]
+  }));
 });
 export default BigImageModal;

packages/biz/src/boxSelectTree/boxSelectTree.tsx

@@ -1,6 +1,5 @@
 import React, { FC, ReactNode, useContext } from 'react';
-import { Tabs, TabsProps } from 'antd'
-import { ConfigProvider } from '@zhst/meta';
+import { ConfigProvider, Tabs, TabsProps } from '@zhst/meta';
 import BoxPanel from './components/boxPanel';
 import type { BoxPanelProps } from './components/boxPanel';
 import './index.less'

packages/biz/src/boxSelectTree/components/boxPanel/index.tsx

@@ -1,13 +1,22 @@
 import React, { FC, useState, useContext, ReactNode } from 'react';
-import{ Button, Divider, Dropdown, Input, TreeDataNode } from 'antd'
 import { ModalFormProps } from '@ant-design/pro-components'
-import { ButtonProps, ConfigProvider, Tooltip } from '@zhst/meta';
+import { Input, Dropdown } from 'antd'
+import {
+  ButtonProps,
+  ConfigProvider,
+  Tooltip,
+  Button,
+  Divider,
+  DataNode as TreeDataNode,
+  Tree as BoxTree,
+  TreeProps as BoxTreeProps,
+  TreeProps,
+  InputProps,
+  DropDownProps
+} from '@zhst/meta';
 import { IconFont } from '@zhst/icon';
 import { ClockCircleOutlined, CloseCircleOutlined, DiffOutlined, FolderAddOutlined, ImportOutlined, SwitcherOutlined  } from '@ant-design/icons'
-import type { TreeProps, InputProps, DropDownProps } from 'antd';
 import classNames from 'classnames';
-import type { BoxTreeProps } from '../../../tree';
-import BoxTree from '../../../tree';
 import './index.less'
 
 interface IOption {
@@ -42,10 +51,6 @@ export interface BoxPanelProps {
    * @deprecated 将于下个版本 0.23.0 以后弃用
    */
   onBoxBatchDelete?: (data?: any) => void
-  /**
-   * @deprecated 将于下个版本 0.23.0 以后弃用
-   */
-  onBoxDelete?: (data?: any) => void
   /**
    * @deprecated 将于下个版本 0.23.0 以后弃用
    */
@@ -98,7 +103,6 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
     onItemCheck,
     onItemSelect,
     onBoxBatchDelete,
-    onBoxDelete,
     onClockClick,
     onImport,
     onBatch,
@@ -314,11 +318,11 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
       )}
       <BoxTree
         className={classNames(componentName + '-tree')}
-        treeCheckable={isTreeCheckable}
-        data={data}
-        onItemSelect={onItemSelect}
-        onItemCheck={onItemCheck}
-        onItemDelete={onBoxDelete}
+        checkable={isTreeCheckable}
+        treeData={data}
+        blockNode
+        onSelect={onItemSelect}
+        onCheck={onItemCheck}
         {...treeProps}
       />
     </div>

packages/biz/src/boxSelectTree/demo/basic.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { BoxSelectTree } from '@zhst/biz';
 import { treeData, boxDataSource } from './mock'
-import { Select, TreeProps, Modal, Checkbox, Button } from 'antd';
+import { Select, TreeProps, Modal, Checkbox, Button } from '@zhst/meta';
 
 const { Option } = Select
 

packages/biz/src/boxSelectTree/index.md

@@ -3,7 +3,7 @@ category: Components
 title: BoxSelectTree 盒子树
 toc: content
 demo:
-  cols: 3
+  cols: 2
 group:
   title: 进阶组件
 ---

packages/biz/src/tree/boxTree.tsx

@@ -1,5 +1,6 @@
+// !! 已经弃用，改为使用meta/tree
 import React, { FC, useState } from 'react';
-import { Tree, Badge, TreeDataNode, Space, TreeProps, theme, ConfigProvider } from 'antd';
+import { Tree, Badge, DataNode as TreeDataNode, Space, TreeProps, theme } from '@zhst/meta'
 import { CloseOutlined, EditOutlined, SettingOutlined } from '@ant-design/icons'
 import classNames from 'classnames';
 import './index.less'

packages/biz/src/tree/index.md

@@ -1,6 +1,6 @@
 ---
 category: Components
-title: Tree 树
+title: Tree 树 [废弃]
 toc: content
 demo:
   cols: 2
@@ -10,6 +10,11 @@ group:
 ---
 
 
+:::warning{title=0.25.1之后版本已废弃}
+组件迁移到 @zhst/meta
+:::
+
+
 ## 代码演示
 
 <code src="./demo/basic.tsx">基本用法</code>

packages/biz/src/treeTransfer/TreeTransfer.tsx

@@ -1,22 +1,45 @@
-import React, { useState } from 'react';
-import { Button, Card, ConfigProvider, theme, Flex, Input, InputProps, TransferProps, TreeDataNode, TreeProps, Tree } from 'antd';
+import React, { ReactNode } from 'react';
+import { Button, ConfigProvider, theme, Flex, InputProps, TabsProps, Tabs, ButtonProps, Tree, TreeProps, DataNode as TreeDataNode } from '@zhst/meta'
+import { Input } from 'antd'
+import { IconFont } from '@zhst/icon'
 import './index.less'
-import { DeleteOutlined, DoubleRightOutlined, SearchOutlined } from '@ant-design/icons';
 
 const componentName = 'zhst-biz-treeTransfer'
 
 export interface TreeTransferProps {
+  titles?: string[] | ReactNode[]
   dataSource: TreeDataNode[]
   treeProps?: TreeProps
+  showLeftSearch?: boolean
   searchInputProps?: InputProps
   targetItems: TreeDataNode[];
   checkedKeys: string[];
+  showFilter?: boolean;
+  showLeftPanelFooter?: boolean;
+  leftPanelFooterRender?: ReactNode | string;
+  showRightPanelFooter?: boolean;
+  rightPanelFooterRender?: (events: { onOk: TreeTransferProps['onOk'], onReset: TreeTransferProps['onReset'] }) => ReactNode | string;
+  leftPanelWidth?: string | number;
+  rightPanelWidth?: string | number;
+  leftPanelScrollY?: number;
+  rightPanelScrollY?: number;
+  tabsItems?: TabsProps['items']
+  showLeftTabs?: boolean
+  activeTabKey?: string
+  treeBackgroundColor?: string
+  leftTabsProps?: Partial<TabsProps>
+  customLeftPanelContent?: (data?: TreeDataNode[]) => ReactNode
+  filters?: (ButtonProps & {
+    label?: string;
+    icon?: ReactNode;
+  })[]
+  onLeftTabsChange?: TabsProps['onChange']
   onTreeSelect?: TreeProps['onSelect']
   onTreeCheck?: TreeProps['onCheck']
   onItemDelete?: (key: string, info?: TreeDataNode) => void
-  onChange?: TransferProps['onChange'];
   onOk?: (data: any) => void;
   onReset?: () => void;
+  onSearch?: InputProps['onChange']
 }
 
 const { useToken } = theme
@@ -24,68 +47,133 @@ const { useToken } = theme
 const TreeTransfer: React.FC<TreeTransferProps> = ({
   dataSource,
   treeProps,
+  titles = ['可选择的范围', '已选择的范围'],
   searchInputProps,
+  showLeftSearch = true,
+  leftPanelScrollY = 300,
+  treeBackgroundColor = '#FCFCFC',
+  leftPanelWidth = 500,
+  rightPanelScrollY = 422,
+  rightPanelWidth = 300,
   targetItems = [],
   checkedKeys = [],
+  showFilter = true,
+  showLeftPanelFooter,
+  showRightPanelFooter = true,
+  customLeftPanelContent,
+  leftPanelFooterRender,
+  rightPanelFooterRender,
+  showLeftTabs,
+  leftTabsProps,
+  activeTabKey,
+  tabsItems = [
+    {
+      key: 'camera',
+      label: <div className={`${componentName}-left_card_tabs_tab`} style={{ textAlign:'center' }} >摄像头</div>,
+    },
+    {
+      key: 'plan',
+      label: <div className={`${componentName}-left_card_tabs_tab`} style={{ textAlign:'center' }} >预案</div>,
+    },
+    {
+      key: 'map',
+      label: <div className={`${componentName}-left_card_tabs_tab`} style={{ textAlign:'center' }} >地图框选</div>,
+    },
+  ],
+  filters = [],
+  onLeftTabsChange,
   onTreeCheck,
   onTreeSelect,
   onItemDelete,
+  onSearch,
   onOk,
   onReset
 }) => {
 
   const { token } = useToken()
-  const [keyWords, setKeyWords ] = useState('')
-
-  function findNodesWithKeyword(_keyWords: string, _treeData: TreeDataNode[]) {
-    // @ts-ignore
-    function dfs(node: any) {
-      return node.filter((item: { title: string | string[]; }) => item.title.includes(_keyWords))
-    }
-
-    const data = dfs(_treeData)
-    return data || [];
-  }
 
   return (
-    <Flex gap={20} className={componentName} align='center' justify='center'>
-      <div className={`${componentName}-left`}>
-        <Card
+    <div className={componentName}>
+      <div className={`${componentName}-left`}
+        style={{ width: typeof leftPanelWidth === 'number' ? leftPanelWidth + 'px' : leftPanelWidth }}
+      >
+        <div
           className={`${componentName}-left_card`}
-          title={<div style={{ textAlign: 'center' }} >可选择的范围</div>}
         >
-          <Input prefix={<SearchOutlined />} onChange={e => setKeyWords(e.target.value)} placeholder='请输入设备名称' {...searchInputProps} />
-          <ConfigProvider
-            theme={{
-              components: {
-                Tree: {
-                  colorBgContainer: '#FCFCFC'
-                }
-              }
-            }}
-          >
-            <Tree
-              className={`${componentName}-left_card-tree`}
-              height={420}
-              blockNode
-              checkable
-              checkedKeys={checkedKeys}
-              treeData={findNodesWithKeyword(keyWords, dataSource)}
-              onCheck={(keys, info) => onTreeCheck?.(keys, info)}
-              onSelect={(keys, info) => onTreeSelect?.(keys, info)}
-              {...treeProps}
+          <div className={`${componentName}-left_card_title`}>{titles?.[0]}</div>
+          {showLeftTabs && (
+            <Tabs
+              activeKey={activeTabKey}
+              items={tabsItems}
+              onChange={onLeftTabsChange}
+              {...leftTabsProps}
             />
-          </ConfigProvider>
-        </Card>
+          )}
+          {showLeftSearch && (
+            <div
+              className={`${componentName}-left_card_search`}
+            >
+              <Input
+                className={`${componentName}-left_card_search_input`}
+                prefix={<IconFont icon="icon-sousuo" />}
+                placeholder='请输入设备名称'
+                onChange={onSearch}
+                {...searchInputProps}
+              />
+              {showFilter && (
+                <div
+                  className={`${componentName}-left_card_search_filters`}
+                >
+                  {filters?.map(item => (
+                    <Button icon={item.icon} {...item} >{item.label}</Button>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+          {customLeftPanelContent?.(dataSource) || (
+            <ConfigProvider
+              theme={{
+                components: {
+                  Tree: {
+                    colorBgContainer: treeBackgroundColor
+                  }
+                }
+              }}
+            >
+              <Tree
+                className={`${componentName}-left_card-tree`}
+                blockNode
+                checkable
+                height={leftPanelScrollY}
+                checkedKeys={checkedKeys}
+                treeData={dataSource}
+                onCheck={(keys: any, info: any) => onTreeCheck?.(keys, info)}
+                onSelect={(keys: any, info: any) => onTreeSelect?.(keys, info)}
+                {...treeProps}
+              />
+            </ConfigProvider>
+          )}
+          {showLeftPanelFooter && (
+            <div className={`${componentName}-left_card-footer`}>
+              {leftPanelFooterRender}
+            </div>
+          )}
+        </div>
       </div>
-      <DoubleRightOutlined/>
-      <div className={`${componentName}-right`}>
-        <Card
+      <div className={`${componentName}-middle`}>
+        <IconFont icon="icon-zhankai" />
+      </div>
+      <div className={`${componentName}-right`}
+        style={{ width: typeof rightPanelWidth === 'number' ? rightPanelWidth + 'px' : rightPanelWidth }}
+      >
+        <div
           className={`${componentName}-right_card`}
-          title={<div style={{ textAlign: 'center' }}>已选择的范围</div>}
         >
+          <div className={`${componentName}-right_card_title`} >{titles?.[1]}</div>
           <div
             className={`${componentName}-right_card__items`}
+            style={{ height: typeof rightPanelScrollY === 'number' ? rightPanelScrollY + 'px' : rightPanelScrollY}}
           >
             {targetItems.map(item => (
               <div
@@ -102,8 +190,7 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
               >
                 {item.title as any}
                 <div style={{ float: 'right' }}>
-                  <DeleteOutlined onClick={() => {
-                    // const { root, keys } = getAllRootKeyById(item.key as string, dataSource)
+                  <IconFont icon="icon-shanchu" onIconClick={() => {
                     onItemDelete?.(item.key as string, item)
                   }} />
                 </div>
@@ -111,19 +198,25 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
             ))}
 
           </div>
-          <Flex
-            className={`${componentName}-right_card__btns`}
-          >
-            <Button style={{ marginRight: 8, width: '50%' }} disabled={targetItems.length <= 0} onClick={onReset}>重置</Button>
-            <Button
-              style={{ width: '50%' }}
-              type='primary'
-              onClick={() => onOk?.(targetItems)}
-            >确定</Button>
-          </Flex>
-        </Card>
+          {showRightPanelFooter && (
+            <Flex
+              className={`${componentName}-right_card__btns`}
+            >
+              {rightPanelFooterRender?.({ onOk, onReset }) || (
+                <>
+                  <Button style={{ marginRight: 8, width: '50%' }} disabled={targetItems.length <= 0} onClick={onReset}>重置</Button>
+                  <Button
+                    style={{ width: '50%' }}
+                    type='primary'
+                    onClick={() => onOk?.(targetItems)}
+                  >确定</Button>
+                </>
+              )}
+            </Flex>
+          )}
+        </div>
       </div>
-    </Flex>
+    </div>
   );
 }
 

packages/biz/src/treeTransfer/demo/basic.tsx

@@ -42,10 +42,18 @@ const App: React.FC = () => {
 
   return (
     <TreeTransfer
+      leftPanelWidth={800}
+      rightPanelWidth={500}
+      showLeftPanelFooter
       dataSource={boxDataSource}
       targetItems={targetItems}
       checkedKeys={checkedKeys}
       onTreeCheck={onTreeCheck}
+      leftPanelFooterRender={(
+        <div style={{ padding: '6px', color: 'red' }}>
+          自定义脚部dom
+        </div>
+      )}
       onItemDelete={onItemDelete}
       onOk={onOk}
       onReset={onReset}

packages/biz/src/treeTransfer/demo/noSearch.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { TreeTransfer } from '@zhst/biz';
+import { TreeDataNode } from 'antd';
+import { TreeProps } from 'antd/lib';
+import { boxDataSource } from './mock'
+
+const App: React.FC = () => {
+  const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
+  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
+
+  const onTreeCheck: TreeProps['onCheck'] = (keys: any, info) => {
+    let _targetItems: TreeDataNode[] = []
+    setCheckedKeys(keys)
+    info.checkedNodes.forEach(o => {
+      o.isLeaf && _targetItems.push(o)
+    })
+    setTargetItems(_targetItems)
+  }
+
+  /**
+   * 删除
+   * @param key
+   * @param param1
+   */
+  const onItemDelete = (key: any, { keys = [] }: any) => {
+    setCheckedKeys(pre => {
+      const newKeys = pre.filter(_key => _key !== key)
+      console.log('newKeys', newKeys, keys)
+      return newKeys
+    })
+    setTargetItems(pre => pre.filter(o => o.key !== key))
+  }
+
+  const onOk = (data: any) => {
+    console.log('data', data)
+  }
+
+  const onReset = () => {
+    setCheckedKeys([])
+    setTargetItems([])
+  }
+
+  return (
+    <TreeTransfer
+      dataSource={boxDataSource}
+      targetItems={targetItems}
+      checkedKeys={checkedKeys}
+      onTreeCheck={onTreeCheck}
+      showLeftSearch={false}
+      onItemDelete={onItemDelete}
+      onOk={onOk}
+      onReset={onReset}
+    />
+  )
+};
+
+export default App;

packages/biz/src/treeTransfer/demo/withFilter.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { TreeTransfer } from '@zhst/biz';
+import { TreeDataNode } from 'antd';
+import { IconFont } from '@zhst/icon'
+import { TreeProps } from 'antd/lib';
+import { boxDataSource } from './mock'
+
+const App: React.FC = () => {
+  const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
+  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
+
+  const onTreeCheck: TreeProps['onCheck'] = (keys: any, info) => {
+    let _targetItems: TreeDataNode[] = []
+    setCheckedKeys(keys)
+    info.checkedNodes.forEach(o => {
+      o.isLeaf && _targetItems.push(o)
+    })
+    setTargetItems(_targetItems)
+  }
+
+  /**
+   * 删除
+   * @param key
+   * @param param1
+   */
+  const onItemDelete = (key: any, { keys = [] }: any) => {
+    setCheckedKeys(pre => {
+      const newKeys = pre.filter(_key => _key !== key)
+      console.log('newKeys', newKeys, keys)
+      return newKeys
+    })
+    setTargetItems(pre => pre.filter(o => o.key !== key))
+  }
+
+  const onOk = (data: any) => {
+    console.log('data', data)
+  }
+
+  const onReset = () => {
+    setCheckedKeys([])
+    setTargetItems([])
+  }
+
+  return (
+    <TreeTransfer
+      dataSource={boxDataSource}
+      targetItems={targetItems}
+      checkedKeys={checkedKeys}
+      onTreeCheck={onTreeCheck}
+      showFilter
+      filters={[
+        {
+          label: '',
+          icon: <IconFont icon="icon-bangzhu2" />,
+          danger: true,
+          onClick: () => {}
+        }
+      ]}
+      onItemDelete={onItemDelete}
+      onOk={onOk}
+      onReset={onReset}
+    />
+  )
+};
+
+export default App;

packages/biz/src/treeTransfer/demo/withMap.tsx

@@ -0,0 +1,103 @@
+import React, { useRef, useState } from 'react';
+import { TreeTransfer } from '@zhst/biz';
+import { TreeDataNode } from 'antd';
+import { TreeProps } from 'antd/lib';
+import { MapBox } from '@zhst/map'
+import { boxDataSource } from './mock'
+
+const App: React.FC = () => {
+  const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
+  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
+  const [activeTabKey, setActiveTabKey] = useState<string>('camera');
+  const mapRef = useRef(null);
+  const [canDraw, setCanDraw] = useState(false)
+  const [toolsBarOpen, setToolsBarOpen] = useState(false)
+
+  // 地图初始化
+  const handleMapLoad = (e: mapboxgl.MapboxEvent<undefined>) => {
+    const map = e.target;
+
+    if (!map) return
+
+    map.flyTo({
+      // center: [120,30],
+      // zoom: map?.getMaxZoom(),
+    });
+  };
+
+  const onTreeCheck: TreeProps['onCheck'] = (keys: any, info) => {
+    let _targetItems: TreeDataNode[] = []
+    setCheckedKeys(keys)
+    info.checkedNodes.forEach(o => {
+      o.isLeaf && _targetItems.push(o)
+    })
+    setTargetItems(_targetItems)
+  }
+
+  /**
+   * 删除
+   * @param key
+   * @param param1
+   */
+  const onItemDelete = (key: any, { keys = [] }: any) => {
+    setCheckedKeys(pre => {
+      const newKeys = pre.filter(_key => _key !== key)
+      console.log('newKeys', newKeys, keys)
+      return newKeys
+    })
+    setTargetItems(pre => pre.filter(o => o.key !== key))
+  }
+
+  const onOk = (data: any) => {
+    console.log('data', data)
+  }
+
+  const onReset = () => {
+    setCheckedKeys([])
+    setTargetItems([])
+  }
+
+  return (
+    <TreeTransfer
+      dataSource={boxDataSource}
+      targetItems={targetItems}
+      checkedKeys={checkedKeys}
+      leftPanelWidth={800}
+      rightPanelWidth={600}
+      onTreeCheck={onTreeCheck}
+      showLeftTabs
+      activeTabKey={activeTabKey}
+      onLeftTabsChange={val => setActiveTabKey(val)}
+      customLeftPanelContent={(data) => {
+        if (activeTabKey !== 'map') return null
+
+        return (
+          <div
+            style={{ flex: 1 }}
+          >
+            <MapBox
+              onLoad={handleMapLoad}
+              ref={mapRef}
+              width='100%'
+              height="402px"
+              draw={canDraw}
+              toolsBarOpen={toolsBarOpen}
+              onToolClick={e => {
+                setCanDraw(pre => !pre)
+                setToolsBarOpen(pre => !pre)
+              }}
+              drawerProps={{
+                onActionable: e => console.log('e', e)
+              }}
+            ></MapBox>
+          </div>
+        )
+      }}
+      onItemDelete={onItemDelete}
+      onOk={onOk}
+      onReset={onReset}
+    />
+  )
+};
+
+export default App;

packages/biz/src/treeTransfer/index.less

@@ -1,28 +1,84 @@
 .zhst-biz-treeTransfer {
+  display: flex;
+  align-items: center;
   &-left {
     &_card {
-      width: 500px;
+      display: flex;
+      flex-direction: column;
+      position: relative;
       min-height: 544px;
       background-color: #FCFCFC;
+      border: 2px solid #f7f7f7;
+
+      &_title {
+        padding: 12px;
+        text-align: center;
+        border-bottom: 2px solid #f7f7f7;
+      }
+
+      .ant-tabs {
+        .ant-tabs-nav {
+          margin-bottom: 0;
+        }
+        .ant-tabs-nav-list {
+          width: 100%;
+        }
+        .ant-tabs-tab {
+          margin: 0;
+          justify-content: center;
+          text-align: center;
+          flex: 1;
+        }
+      }
+
+      &_search {
+        display: flex;
+        margin: 8px;
+        &_input {
+          margin-right: 8px;
+        }
+      }
 
       &-tree {
-        margin-top: 6px;
+      }
+
+      &-footer {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        left: 0;
       }
     }
   }
 
+  &-middle {
+    padding: 24px;
+    height: 100%;
+    color: #d9d9d9;
+    transform-origin: center center;
+    transform: rotate(90deg);
+  }
+
   &-right {
     &_card {
-      width: 300px;
+      position: relative;
       min-height: 544px;
       background-color: #FCFCFC;
+      border: 2px solid #f7f7f7;
+
+      &_title {
+        padding: 12px;
+        text-align: center;
+        border-bottom: 2px solid #f7f7f7;
+      }
 
       &__items {
-        padding: 8px 4px;
         width: 100%;
         height: calc(100% - 105px);
+        font-size: 14px;
         overflow-y: scroll;
         max-height: 422px;
+        box-sizing: border-box;
 
         &::-webkit-scrollbar {
           display: none;
@@ -44,7 +100,7 @@
         left: 50%;
         transform: translateX(-50%);
         box-sizing: border-box;
-        border-top: 1px solid #f0f0f0;
+        border-top: 2px solid #f0f0f0;
       }
     }
   }

packages/biz/src/treeTransfer/index.md

@@ -12,10 +12,41 @@ group:
 ## 代码演示
 
 <code src="./demo/basic.tsx">基本用法</code>
+<code src="./demo/noSearch.tsx">没有搜索框</code>
+<code src="./demo/withFilter.tsx">加载filter按钮</code>
+<code src="./demo/withMap.tsx">和地图组件搭配使用</code>
 <code src="./demo/withModal.tsx">和Modal组合使用</code>
 
 ## API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| data | 数据源 | Array[] | [] | - |
+| titles | 顶部标题 | string[]、ReactNode[] | [] | - |
+| dataSource | 数据 | TreeDataNode[] | [] | - |
+| treeProps | 左侧树的props | antd-tree | [] | - |
+| showLeftSearch | 显示左侧搜索框 | boolean | true | - |
+| searchInputProps | 左侧搜索透传 | InputProps | {} | - |
+| targetItems | 选中数据 | TreeDataNode[] | [] | - |
+| checkedKeys | 选中的key数组 | string[] | [] | - |
+| showFilter | 是否显示搜索框边上的dom | boolean | false | - |
+| leftPanelWidth | 左边面板高度 | string、number | - | - |
+| leftPanelScrollY | 左边面板滚动高度 | number | - | - |
+| showLeftPanelFooter | 是否显示左边面板的底部 | boolean | false | - |
+| leftPanelFooterRender | 左边面板底部自定义 |  | ReactNode、string | - |
+| rightPanelWidth | 右边面板高度 | number、string | - | - |
+| rightPanelScrollY | 右边面板滚动高度 | number | - | - |
+| showRightPanelFooter | 是否显示右边面板的底部 | boolean | false | - |
+| rightPanelFooterRender | 右边边面板底部自定义 | ReactNode、string | - | - |
+| tabsItems | tab列表 | 参考antd-tabs组件的 tabsProps['items'] | - | - |
+| showLeftTabs | 是否显示tabs组件 | boolean | false | - |
+| activeTabKey | 当前选中tab | string | - | - |
+| treeBackgroundColor | 左侧树颜色 | string | #FCFCFC | - |
+| leftTabsProps | 左侧树tabs的props | tabsProps | - | - |
+| customLeftPanelContent | 左侧树自定义内容 | (data?: TreeDataNode[]) => ReactNode | - | - |
+| filters | 左侧过滤自定义 | ButtonProps & { label: string; icon?: string } | - | - |
+| onLeftTabsChange | 左侧tab点击事件 | TabsProps['onChange'] | - | - |
+| onTreeSelect | 左侧树点击事件 | TreeProps['onSelect'] | - | - |
+| onTreeCheck | 左侧树勾选☑️事件 | TreeProps['onCheck'] | - | - |
+| onOk | 提交事件 | (data: any) => void; | - | - |
+| onReset | 重置事件 |  () => void; | - | - |
+| onSearch | 左侧树搜索事件 |  InputProps['onChange'] | - | - |

packages/func/es/file/index.d.ts

@@ -1,4 +1,4 @@
-export type Rect = {
+export declare type Rect = {
     x: number;
     y: number;
     w: number;

packages/func/es/string/index.js

@@ -86,4 +86,20 @@ export var pxToRem = function pxToRem(value, rootFontSize) {
   }).map(function (val) {
     return parseFloat(val) / fontSize + 'rem';
   }).join(' ');
+};
+
+/**
+ * 跳转到指定URL
+ * @param to 跳转的url
+ * @returns URL
+ */
+export var jumpTo = function jumpTo(to) {
+  var from = location.origin + location.pathname;
+  // 检查是否为url，并且跑出错误
+  if (!isUrl(to)) {
+    throw Error("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u94FE\u63A5\uFF0C\u4EE5http(s)://\u5F00\u5934\uFF01'");
+  }
+  var _targetUrl = new URL(to);
+  _targetUrl.searchParams.set('from', from);
+  return _targetUrl;
 };

packages/func/lib/file/index.d.ts

@@ -1,4 +1,4 @@
-export type Rect = {
+export declare type Rect = {
     x: number;
     y: number;
     w: number;

packages/func/lib/string/index.js

@@ -23,6 +23,7 @@ __export(string_exports, {
   getStrLength: () => getStrLength,
   getValueByUrl: () => getValueByUrl,
   isUrl: () => isUrl,
+  jumpTo: () => jumpTo,
   pxToRem: () => pxToRem
 });
 module.exports = __toCommonJS(string_exports);
@@ -80,11 +81,21 @@ var pxToRem = (value, rootFontSize) => {
   const valueArr = value.split(" ");
   return valueArr.filter((o) => o).map((val) => parseFloat(val) / fontSize + "rem").join(" ");
 };
+var jumpTo = (to) => {
+  const from = location.origin + location.pathname;
+  if (!isUrl(to)) {
+    throw Error(`\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u94FE\u63A5\uFF0C\u4EE5http(s)://\u5F00\u5934\uFF01'`);
+  }
+  let _targetUrl = new URL(to);
+  _targetUrl.searchParams.set("from", from);
+  return _targetUrl;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   cutStr,
   getStrLength,
   getValueByUrl,
   isUrl,
+  jumpTo,
   pxToRem
 });

packages/func/lib/time/index.js

@@ -43,15 +43,15 @@ var formateDuration = (diff) => {
   var minutes = Math.floor(leave2 / (60 * 1e3));
   var leave3 = leave2 % (60 * 1e3);
   var seconds = Math.round(leave3 / 1e3);
-  var returnStr = seconds + "秒";
+  var returnStr = seconds + "\u79D2";
   if (minutes > 0) {
-    returnStr = minutes + "分";
+    returnStr = minutes + "\u5206";
   }
   if (hours > 0) {
-    returnStr = hours + "小时";
+    returnStr = hours + "\u5C0F\u65F6";
   }
   if (days > 0) {
-    returnStr = days + "天";
+    returnStr = days + "\u5929";
   }
   return returnStr;
 };

packages/hooks/es/useCustomCompareEffect/index.d.ts

@@ -1,4 +1,4 @@
 import { DependencyList, EffectCallback } from 'react';
-type DepsEqualFnType<TDeps extends DependencyList> = (prevDeps: TDeps, nextDeps: TDeps) => boolean;
+declare type DepsEqualFnType<TDeps extends DependencyList> = (prevDeps: TDeps, nextDeps: TDeps) => boolean;
 declare const useCustomCompareEffect: <TDeps extends DependencyList>(effect: EffectCallback, deps: TDeps, depsEqual: DepsEqualFnType<TDeps>) => void;
 export default useCustomCompareEffect;

packages/hooks/es/useJump/interface.d.ts

@@ -1 +1 @@
-export type JumpType = 'warningRecord' | 'targetSearch' | 'passerby' | 'targetDetail' | 'traceAnalysis' | 'offlineAnalysis';
+export declare type JumpType = 'warningRecord' | 'targetSearch' | 'passerby' | 'targetDetail' | 'traceAnalysis' | 'offlineAnalysis';

packages/hooks/es/useRafLoop.d.ts

@@ -1,2 +1,2 @@
-export type RafLoopReturns = [() => void, () => void, () => boolean];
+export declare type RafLoopReturns = [() => void, () => void, () => boolean];
 export default function useRafLoop(callback: FrameRequestCallback, initiallyActive?: boolean): RafLoopReturns;

packages/hooks/es/useSocket/index.d.ts

@@ -0,0 +1 @@
+export {};

packages/hooks/lib/useCustomCompareEffect/index.d.ts

@@ -1,4 +1,4 @@
 import { DependencyList, EffectCallback } from 'react';
-type DepsEqualFnType<TDeps extends DependencyList> = (prevDeps: TDeps, nextDeps: TDeps) => boolean;
+declare type DepsEqualFnType<TDeps extends DependencyList> = (prevDeps: TDeps, nextDeps: TDeps) => boolean;
 declare const useCustomCompareEffect: <TDeps extends DependencyList>(effect: EffectCallback, deps: TDeps, depsEqual: DepsEqualFnType<TDeps>) => void;
 export default useCustomCompareEffect;

packages/hooks/lib/useJump/interface.d.ts

@@ -1 +1 @@
-export type JumpType = 'warningRecord' | 'targetSearch' | 'passerby' | 'targetDetail' | 'traceAnalysis' | 'offlineAnalysis';
+export declare type JumpType = 'warningRecord' | 'targetSearch' | 'passerby' | 'targetDetail' | 'traceAnalysis' | 'offlineAnalysis';

packages/hooks/lib/useRafLoop.d.ts

@@ -1,2 +1,2 @@
-export type RafLoopReturns = [() => void, () => void, () => boolean];
+export declare type RafLoopReturns = [() => void, () => void, () => boolean];
 export default function useRafLoop(callback: FrameRequestCallback, initiallyActive?: boolean): RafLoopReturns;

packages/hooks/lib/useSocket/index.d.ts

@@ -0,0 +1 @@
+export {};

packages/icon/es/Iconfont.js

@@ -6,6 +6,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { createFromIconfontCN } from '@ant-design/icons';
 import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 var Icon = createFromIconfontCN({
   scriptUrl: require("./font/iconfont.js")
 });
@@ -24,7 +25,7 @@ var IconFont = function IconFont(props) {
     active = _ref$active === void 0 ? false : _ref$active,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? '' : _ref$color;
-  return /*#__PURE__*/React.createElement(Icon, {
+  return /*#__PURE__*/_jsx(Icon, {
     title: title,
     onClick: function onClick(e) {
       onIconClick && onIconClick(e);
@@ -36,7 +37,8 @@ var IconFont = function IconFont(props) {
     }, active ? {
       color: '#09f'
     } : {}),
-    type: icon
-  }, children);
+    type: icon,
+    children: children
+  });
 };
 export default IconFont;

packages/map/package.json

@@ -40,8 +40,8 @@
     "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1",
     "@turf/turf": "^6.5.0",
-    "@zhst/hooks": "workspace:^0.13.1",
-    "@zhst/icon": "workspace:^0.5.0",
+    "@zhst/hooks": "workspace:^",
+    "@zhst/icon": "workspace:^",
     "@zhst/meta": "workspace:^",
     "classnames": "^2.5.1",
     "mapbox-gl": "^2.15.0",
@@ -51,7 +51,6 @@
     "react-map-gl": "^7.1.7"
   },
   "devDependencies": {
-    "@types/mapbox__mapbox-gl-draw": "^1.4.6",
-    "axios": "^1.7.2"
+    "@types/mapbox__mapbox-gl-draw": "^1.4.6"
   }
 }

packages/map/src/demo/basic.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { MapBox, Marker } from '@zhst/map';
-import axios from 'axios';
-import { FloatButton, Switch } from '@zhst/meta';
+import { Button, Input, Space } from '@zhst/meta';
 import { MarkerProps } from '../components/marker';
 import { getDistancesByStringLine, lineToPoly } from '../utils';
 // import { sluterData } from './.data/mock.ts'
@@ -18,6 +17,7 @@ const demo = () => {
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
   const [rangingList, setRangingList] = useState([])
   const mapRef = useRef(null);
+  const [token, setToken] = useState('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MTczMDA4NTIsImp0aSI6IjExNTkiLCJpYXQiOjE3MTcwNDE2NTIsInVzZXJJZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsImRhdGFSaWdodCI6MiwiY2FtZXJhUmlnaHQiOjEsImdwdVJpZ2h0IjoxLCJ1c2VybGVhZGVySWQiOjAsIm9yZ2FuaXphdGlvbklkIjoxLCJyb2xlSWQiOjF9.n9b_jcvzyehu2vmZF6ZrFM4Vz7h7Xr2GCf9p7muGTBE')
 
   // 初始化
   const handleMapLoad = (e: mapboxgl.MapboxEvent<undefined>) => {
@@ -31,21 +31,23 @@ const demo = () => {
     });
   };
 
-  const getData = async () => {
-    let res = await axios({
+  const getData = async ({ url = 'http://10.0.0.120:30003/singer.DeviceService/ListCamera', token }: { url?: String, token: string }) => {
+    let res = await fetch(
+      url,
+      {
       method: 'post',
-      url: 'http://10.0.0.120:30003/singer.DeviceService/ListCamera',
       headers: {
-        Authorization: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MTcwNDAzNzEsImp0aSI6IjExMjgiLCJpYXQiOjE3MTY3ODExNzEsInVzZXJJZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsImRhdGFSaWdodCI6MiwiY2FtZXJhUmlnaHQiOjEsImdwdVJpZ2h0IjoxLCJ1c2VybGVhZGVySWQiOjAsIm9yZ2FuaXphdGlvbklkIjoxLCJyb2xlSWQiOjF9.XHbXIkXkfUuvqV6_qSV4d20xj-s7I0qOQZgL-zspMDc'
+        Authorization: token
       },
       data: {"labelData":[],"filter":{"realtimeProcessingFilter":0,"cameraFilter":[{"opt":"ORNOT","cameraOpt":"CAMERAOPT_TYPE","value":"100"}]},"maxResults":50}
     });
+    const data = await res.json()
     if  (res.status === 200) {
       let markers = []
       let sluters = {
         features: []
       }
-      res.data.cameras?.forEach(camera => {
+      data.cameras?.forEach(camera => {
         markers.push({
           key: camera.id,
           id: camera.id,
@@ -74,15 +76,13 @@ const demo = () => {
     }
   }
 
-  useEffect(() => {
-    getData()
-  }, [])
-
   return (
       <div>
-        <FloatButton>
-          <Switch value={true}/>
-        </FloatButton>
+        <Space style={{ marginBottom: '12px' }}>
+          获取摄像头位置：
+          <Input onChange={e => setToken(e.target.value)} value={token} />
+          <Button onClick={() => getData({ token })} >请求</Button>
+        </Space>
         <MapBox
           onLoad={handleMapLoad}
           ref={mapRef}
@@ -159,7 +159,7 @@ const demo = () => {
           {rangingList?.map((item, index) => {
             return (
               <Marker
-                key={index}
+                key={item.to[0] || index}
                 anchor="bottom"
                 longitude={item.to[0]}
                 latitude={item.to[1]}

packages/map/src/tools/index.less

@@ -15,6 +15,7 @@
     padding-left: 0;
     list-style: none;
     font-size: 0;
+    white-space: nowrap;
     background-color: #fff;
     border: 1px solid #09f;
     border-radius: 3px;

packages/meta/es/index.js

@@ -7,8 +7,13 @@ export { default as AttachImage } from "./attachImage";
 export { default as RelatedImage } from "./relatedImage";
 export { default as VideoPlayer } from "./VideoPlayer";
 export { default as Tabs } from "./tabs";
-export { default as Button } from "./button";
+export { default as Tree } from "./tree";
 export { default as message } from "./message";
+export { default as Button } from "./button";
+export { default as Image } from "./image";
+export { default as Layout } from "./layout";
+export { default as Dropdown } from "./dropdown";
+export { default as FloatButton } from "./float-button";
 export { default as Space } from "./space";
 export { default as Slider } from "./slider";
 export { default as Switch } from "./switch";

packages/meta/src/_util/ActionButton.tsx

@@ -1,5 +1,6 @@
-import useState from 'rc-util/lib/hooks/useState';
 import * as React from 'react';
+import useState from 'rc-util/lib/hooks/useState';
+
 import Button from '../button';
 import type { ButtonProps, LegacyButtonType } from '../button/button';
 import { convertLegacyProps } from '../button/buttonHelpers';
@@ -110,7 +111,7 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
       clickedRef.current = false;
     } else {
       returnValueOfOnOk = actionFn();
-      if (!returnValueOfOnOk) {
+      if (!isThenable(returnValueOfOnOk)) {
         onInternalClose();
         return;
       }

packages/meta/src/_util/PurePanel.tsx

@@ -45,7 +45,7 @@ const genPurePanel = <ComponentProps extends BaseProps = BaseProps>(
 
       if (typeof ResizeObserver !== 'undefined') {
         const resizeObserver = new ResizeObserver((entries) => {
-          const element: HTMLDivElement = entries[0].target as any;
+          const element = entries[0].target as HTMLDivElement;
           setPopupHeight(element.offsetHeight + 8);
           setPopupWidth(element.offsetWidth);
         });

packages/meta/src/_util/__tests__/getScroll.test.ts

@@ -1,12 +1,12 @@
 import getScroll from '../getScroll';
 
 describe('getScroll', () => {
-  it('getScroll target null', async () => {
+  it('getScroll target null', () => {
     expect(getScroll(null, true)).toBe(0);
     expect(getScroll(null, false)).toBe(0);
   });
 
-  it('getScroll window', async () => {
+  it('getScroll window', () => {
     const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
       window.pageXOffset = x;
       window.pageYOffset = y;
@@ -17,7 +17,7 @@ describe('getScroll', () => {
     scrollToSpy.mockRestore();
   });
 
-  it('getScroll document', async () => {
+  it('getScroll document', () => {
     const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
       document.documentElement.scrollLeft = x;
       document.documentElement.scrollTop = y;
@@ -28,7 +28,7 @@ describe('getScroll', () => {
     scrollToSpy.mockRestore();
   });
 
-  it('getScroll div', async () => {
+  it('getScroll div', () => {
     const div = document.createElement('div');
     const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
       div.scrollLeft = x;
@@ -40,7 +40,7 @@ describe('getScroll', () => {
     scrollToSpy.mockRestore();
   });
 
-  it('getScroll documentElement', async () => {
+  it('getScroll documentElement', () => {
     const div: any = {};
     const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
       div.scrollLeft = null;

packages/meta/src/_util/__tests__/hooks.test.tsx

@@ -1,13 +1,14 @@
+import React, { useEffect } from 'react';
 import { CloseOutlined } from '@ant-design/icons';
 import { render } from '@testing-library/react';
-import React, { useEffect } from 'react';
+
 import type { UseClosableParams } from '../hooks/useClosable';
 import useClosable from '../hooks/useClosable';
 
 type ParamsOfUseClosable = [
-  UseClosableParams['closable'],
-  UseClosableParams['closeIcon'],
-  UseClosableParams['defaultClosable'],
+  closable: UseClosableParams['closable'],
+  closeIcon: UseClosableParams['closeIcon'],
+  defaultClosable: UseClosableParams['defaultClosable'],
 ];
 
 describe('hooks test', () => {
@@ -19,7 +20,7 @@ describe('hooks test', () => {
     },
     {
       params: [undefined, undefined, true],
-      res: [true, 'anticon-close'],
+      res: [true, '.anticon-close'],
     },
     {
       params: [undefined, undefined, false],
@@ -33,11 +34,11 @@ describe('hooks test', () => {
     },
     {
       params: [true, undefined, true],
-      res: [true, 'anticon-close'],
+      res: [true, '.anticon-close'],
     },
     {
       params: [true, undefined, false],
-      res: [true, 'anticon-close'],
+      res: [true, '.anticon-close'],
     },
 
     // test case like: <Component closable={false | true} closeIcon={null | false | element} />
@@ -51,19 +52,19 @@ describe('hooks test', () => {
     },
     {
       params: [true, null, true],
-      res: [true, 'anticon-close'],
+      res: [true, '.anticon-close'],
     },
     {
       params: [true, false, true],
-      res: [true, 'anticon-close'],
+      res: [true, '.anticon-close'],
     },
     {
       params: [true, null, false],
-      res: [true, 'anticon-close'],
+      res: [true, '.anticon-close'],
     },
     {
       params: [true, false, false],
-      res: [true, 'anticon-close'],
+      res: [true, '.anticon-close'],
     },
     {
       params: [
@@ -73,14 +74,14 @@ describe('hooks test', () => {
         </div>,
         false,
       ],
-      res: [true, 'custom-close'],
+      res: [true, '.custom-close'],
     },
     {
       params: [false, <div key="close">close</div>, false],
       res: [false, ''],
     },
 
-    // test case like: <Component closeIcon={null | false | element} />
+    // test case like: <Component closeIcon={null | false | element | true} />
     {
       params: [undefined, null, undefined],
       res: [false, ''],
@@ -89,6 +90,10 @@ describe('hooks test', () => {
       params: [undefined, false, undefined],
       res: [false, ''],
     },
+    {
+      params: [undefined, true, undefined],
+      res: [true, '.anticon-close'],
+    },
     {
       params: [
         undefined,
@@ -97,7 +102,7 @@ describe('hooks test', () => {
         </div>,
         undefined,
       ],
-      res: [true, 'custom-close'],
+      res: [true, '.custom-close'],
     },
     {
       params: [
@@ -107,7 +112,7 @@ describe('hooks test', () => {
         </div>,
         true,
       ],
-      res: [true, 'custom-close'],
+      res: [true, '.custom-close'],
     },
     {
       params: [
@@ -117,7 +122,18 @@ describe('hooks test', () => {
         </div>,
         false,
       ],
-      res: [true, 'custom-close'],
+      res: [true, '.custom-close'],
+    },
+    {
+      params: [
+        {
+          closeIcon: 'Close',
+          'aria-label': 'Close Btn',
+        },
+        undefined,
+        false,
+      ],
+      res: [true, '*[aria-label="Close Btn"]'],
     },
   ];
 
@@ -127,11 +143,14 @@ describe('hooks test', () => {
     },defaultClosable=${params[2]}. the result should be ${res}`, () => {
       const App = () => {
         const [closable, closeIcon] = useClosable(
-          params[0],
-          params[1],
-          undefined,
-          undefined,
-          params[2],
+          {
+            closable: params[0],
+            closeIcon: params[1],
+          },
+          null,
+          {
+            closable: params[2],
+          },
         );
         useEffect(() => {
           expect(closable).toBe(res[0]);
@@ -142,7 +161,7 @@ describe('hooks test', () => {
       if (res[1] === '') {
         expect(container.querySelector('.anticon-close')).toBeFalsy();
       } else {
-        expect(container.querySelector(`.${res[1]}`)).toBeTruthy();
+        expect(container.querySelector(`${res[1]}`)).toBeTruthy();
       }
     });
   });
@@ -150,10 +169,13 @@ describe('hooks test', () => {
   it('useClosable with defaultCloseIcon', () => {
     const App = () => {
       const [closable, closeIcon] = useClosable(
-        true,
-        undefined,
-        undefined,
-        <CloseOutlined className="custom-close-icon" />,
+        {
+          closable: true,
+        },
+        null,
+        {
+          closeIcon: <CloseOutlined className="custom-close-icon" />,
+        },
       );
       useEffect(() => {
         expect(closable).toBe(true);
@@ -163,13 +185,37 @@ describe('hooks test', () => {
     const { container } = render(<App />);
     expect(container.querySelector('.custom-close-icon')).toBeTruthy();
   });
+  it('useClosable without defaultCloseIcon', () => {
+    const App = () => {
+      const [closable, closeIcon] = useClosable(
+        {
+          closable: true,
+        },
+        null,
+      );
+      useEffect(() => {
+        expect(closable).toBe(true);
+      }, [closable]);
+      return <div>hooks test {closeIcon}</div>;
+    };
+    const { container } = render(<App />);
+    expect(container.querySelector('.anticon-close')).toBeTruthy();
+  });
 
   it('useClosable with customCloseIconRender', () => {
     const App = () => {
       const customCloseIconRender = (icon: React.ReactNode) => (
         <span className="custom-close-wrapper">{icon}</span>
       );
-      const [closable, closeIcon] = useClosable(true, undefined, customCloseIconRender);
+      const [closable, closeIcon] = useClosable(
+        {
+          closable: true,
+        },
+        null,
+        {
+          closeIconRender: customCloseIconRender,
+        },
+      );
       useEffect(() => {
         expect(closable).toBe(true);
       }, [closable]);

packages/meta/src/_util/__tests__/reactNode.test.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
-import { isValidElement, cloneElement, isFragment, replaceElement } from '../reactNode';
+
+import { cloneElement, isFragment, replaceElement } from '../reactNode';
 
 describe('reactNode test', () => {
-  it('isValidElement', () => {
-    expect(isValidElement(null)).toBe(false);
-    expect(isValidElement(<p>test</p>)).toBe(true);
-  });
   it('isFragment', () => {
     expect(isFragment(<p>test</p>)).toBe(false);
     expect(isFragment(<>test</>)).toBe(true);

packages/meta/src/_util/__tests__/responsiveObserve.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { render } from '../../../tests/utils';
 import useResponsiveObserver from '../responsiveObserver';
 

packages/meta/src/_util/__tests__/transButton.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import TransButton from '../transButton';
+
 import { render } from '../../../tests/utils';
+import TransButton from '../transButton';
 
 describe('transButton component', () => {
   it('disabled should update style', () => {

packages/meta/src/_util/__tests__/type.test.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+
+import type { GetProp, GetProps, GetRef } from '../type';
+
+describe('type', () => {
+  class CC extends React.Component<{ bamboo?: number }> {
+    getBamboo() {
+      return this.props.bamboo;
+    }
+
+    render() {
+      return this.props.bamboo;
+    }
+  }
+
+  interface TestRef {
+    nativeElement: HTMLDivElement;
+  }
+
+  const RefFC = React.forwardRef<TestRef, { bamboo?: number }>((props, ref) => {
+    const eleRef = React.useRef<HTMLDivElement>(null);
+
+    React.useImperativeHandle(ref, () => ({
+      nativeElement: eleRef.current!,
+    }));
+
+    return <div ref={eleRef}>{props.bamboo}</div>;
+  });
+
+  describe('GetProps', () => {
+    it('FC', () => {
+      const FC = (props: { bamboo: number }) => props.bamboo;
+      type Props = GetProps<typeof FC>;
+      const props: Props = { bamboo: 123 };
+
+      expect(props).toBeTruthy();
+    });
+
+    it('CC', () => {
+      type Props = GetProps<typeof CC>;
+      const props: Props = { bamboo: 123 };
+
+      expect(props).toBeTruthy();
+    });
+
+    it('RefFc', () => {
+      type Props = GetProps<typeof RefFC>;
+      const props: Props = { bamboo: 123 };
+
+      expect(props).toBeTruthy();
+    });
+  });
+
+  describe('GetRef', () => {
+    it('CC', () => {
+      type Ref = GetRef<CC>;
+      const ref = React.createRef<Ref>();
+
+      expect(<CC ref={ref} />).toBeTruthy();
+    });
+
+    it('RefFC', () => {
+      type Ref = GetRef<typeof RefFC>;
+      const ref = React.createRef<Ref>();
+
+      expect(<RefFC ref={ref} />).toBeTruthy();
+    });
+
+    it('Support ForwardRefExoticComponent type', () => {
+      interface InnerProps {
+        test: number;
+      }
+      interface InnerRef {
+        bamboo: number;
+      }
+      type TestComponent = React.ForwardRefExoticComponent<
+        InnerProps & React.RefAttributes<InnerRef>
+      >;
+      type ExtractedTestRef = GetRef<TestComponent>;
+
+      const a: ExtractedTestRef = { bamboo: 123 };
+      expect(a).toBeTruthy();
+    });
+  });
+
+  describe('GetProp', () => {
+    it('optional', () => {
+      const Optional = (props: { list?: { bamboo: string }[] }) => props.list?.length;
+      type ListItemType = GetProp<typeof Optional, 'list'>[number];
+
+      const item: ListItemType = { bamboo: '123' };
+      expect(item).toBeTruthy();
+    });
+
+    it('interface directly', () => {
+      interface Props {
+        bamboo: number;
+      }
+
+      type BambooType = GetProp<Props, 'bamboo'>;
+      const bamboo: BambooType = 123;
+      expect(bamboo).toBeTruthy();
+    });
+  });
+});

packages/meta/src/_util/__tests__/useSyncState.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+
+import { fireEvent, render } from '../../../tests/utils';
 import useSyncState from '../hooks/useSyncState';
-import { render, fireEvent } from '../../../tests/utils';
 
 describe('Table', () => {
   it('useSyncState', () => {

packages/meta/src/_util/__tests__/util.test.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable class-methods-use-this */
-import KeyCode from 'rc-util/lib/KeyCode';
 import React from 'react';
+import KeyCode from 'rc-util/lib/KeyCode';
+
 import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import { isStyleSupport } from '../styleChecker';
 import throttleByAnimationFrame from '../throttleByAnimationFrame';

packages/meta/src/_util/__tests__/warning.test.tsx

@@ -1,5 +1,6 @@
-import { render } from '@testing-library/react';
 import React from 'react';
+import { render } from '@testing-library/react';
+
 import { devUseWarning as useWarning } from '../warning';
 
 describe('Test warning', () => {

packages/meta/src/_util/__tests__/wave.test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import classNames from 'classnames';
+
 import mountTest from '../../../tests/shared/mountTest';
 import { act, fireEvent, getByText, render, waitFakeTimer } from '../../../tests/utils';
+import Checkbox from '../../checkbox';
 import Wave from '../wave';
 import { TARGET_CLS } from '../wave/interface';
-import Checkbox from '../../checkbox';
 
 (global as any).isVisible = true;
 
@@ -79,6 +80,7 @@ describe('Wave component', () => {
   }
 
   it('work', async () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     const { container, unmount } = render(
       <Wave>
         <button type="button">button</button>
@@ -94,6 +96,8 @@ describe('Wave component', () => {
 
     expect(document.querySelector('.ant-wave')).toBeFalsy();
 
+    expect(errorSpy).not.toHaveBeenCalled();
+
     unmount();
   });
 

packages/meta/src/_util/aria-data-attrs.ts

@@ -0,0 +1,5 @@
+import type * as React from 'react';
+
+export type HTMLAriaDataAttributes = React.AriaAttributes & {
+  [key: `data-${string}`]: unknown;
+} & Pick<React.HTMLAttributes<HTMLDivElement>, 'role'>;

packages/meta/src/_util/colors.ts

@@ -14,7 +14,7 @@ export const PresetStatusColorTypes = [
 
 export type PresetColorType = PresetColorKey | InverseColor;
 
-export type PresetStatusColorType = typeof PresetStatusColorTypes[number];
+export type PresetStatusColorType = (typeof PresetStatusColorTypes)[number];
 
 /**
  * determine if the color keyword belongs to the `Ant Design` {@link PresetColors}.

packages/meta/src/_util/getAllowClear.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
+import type { BaseInputProps } from 'rc-input/lib/interface';
+
+export type AllowClear = BaseInputProps['allowClear'];
+
+const getAllowClear = (allowClear: AllowClear): AllowClear => {
+  let mergedAllowClear: AllowClear;
+  if (typeof allowClear === 'object' && allowClear?.clearIcon) {
+    mergedAllowClear = allowClear;
+  } else if (allowClear) {
+    mergedAllowClear = {
+      clearIcon: <CloseCircleFilled />,
+    };
+  }
+
+  return mergedAllowClear;
+};
+
+export default getAllowClear;

packages/meta/src/_util/hooks/useClosable.tsx

@@ -1,43 +1,176 @@
-import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import type { ReactNode } from 'react';
 import React from 'react';
+import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 
-function useInnerClosable(
-  closable?: boolean,
-  closeIcon?: boolean | ReactNode,
-  defaultClosable?: boolean,
-): boolean {
-  if (typeof closable === 'boolean') {
-    return closable;
+export type BaseClosableType = { closeIcon?: React.ReactNode } & React.AriaAttributes;
+export type ClosableType = boolean | BaseClosableType;
+
+export type ContextClosable<T extends { closable?: ClosableType; closeIcon?: ReactNode } = any> =
+  Partial<Pick<T, 'closable' | 'closeIcon'>>;
+
+export function pickClosable<T extends { closable?: ClosableType; closeIcon?: ReactNode }>(
+  context?: ContextClosable<T>,
+): ContextClosable<T> | undefined {
+  if (!context) {
+    return undefined;
   }
-  if (closeIcon === undefined) {
-    return !!defaultClosable;
-  }
-  return closeIcon !== false && closeIcon !== null;
+  return {
+    closable: context.closable,
+    closeIcon: context.closeIcon,
+  };
 }
 
 export type UseClosableParams = {
-  closable?: boolean;
-  closeIcon?: boolean | ReactNode;
+  closable?: ClosableType;
+  closeIcon?: ReactNode;
   defaultClosable?: boolean;
   defaultCloseIcon?: ReactNode;
   customCloseIconRender?: (closeIcon: ReactNode) => ReactNode;
+  context?: ContextClosable;
 };
 
-export default function useClosable(
-  closable?: boolean,
-  closeIcon?: boolean | ReactNode,
-  customCloseIconRender?: (closeIcon: ReactNode) => ReactNode,
-  defaultCloseIcon: ReactNode = <CloseOutlined />,
-  defaultClosable = false,
-): [closable: boolean, closeIcon: React.ReactNode | null] {
-  const mergedClosable = useInnerClosable(closable, closeIcon, defaultClosable);
-  if (!mergedClosable) {
-    return [false, null];
-  }
-  const mergedCloseIcon =
-    typeof closeIcon === 'boolean' || closeIcon === undefined || closeIcon === null
-      ? defaultCloseIcon
-      : closeIcon;
-  return [true, customCloseIconRender ? customCloseIconRender(mergedCloseIcon) : mergedCloseIcon];
+/** Convert `closable` and `closeIcon` to config object */
+function useClosableConfig(closableCollection?: ClosableCollection | null) {
+  const { closable, closeIcon } = closableCollection || {};
+
+  return React.useMemo(() => {
+    if (
+      // If `closable`, whatever rest be should be true
+      !closable &&
+      (closable === false || closeIcon === false || closeIcon === null)
+    ) {
+      return false;
+    }
+
+    if (closable === undefined && closeIcon === undefined) {
+      return null;
+    }
+
+    let closableConfig: BaseClosableType = {
+      closeIcon: typeof closeIcon !== 'boolean' && closeIcon !== null ? closeIcon : undefined,
+    };
+    if (closable && typeof closable === 'object') {
+      closableConfig = {
+        ...closableConfig,
+        ...closable,
+      };
+    }
+
+    return closableConfig;
+  }, [closable, closeIcon]);
+}
+
+/**
+ * Assign object without `undefined` field. Will skip if is `false`.
+ * This helps to handle both closableConfig or false
+ */
+function assignWithoutUndefined<T extends object>(
+  ...objList: (Partial<T> | false | null | undefined)[]
+): Partial<T> {
+  const target: Partial<T> = {};
+
+  objList.forEach((obj) => {
+    if (obj) {
+      (Object.keys(obj) as (keyof T)[]).forEach((key) => {
+        if (obj[key] !== undefined) {
+          target[key] = obj[key];
+        }
+      });
+    }
+  });
+
+  return target;
+}
+
+/** Collection contains the all the props related with closable. e.g. `closable`, `closeIcon` */
+interface ClosableCollection {
+  closable?: ClosableType;
+  closeIcon?: ReactNode;
+}
+
+/** Use same object to support `useMemo` optimization */
+const EmptyFallbackCloseCollection: ClosableCollection = {};
+
+export default function useClosable(
+  propCloseCollection?: ClosableCollection,
+  contextCloseCollection?: ClosableCollection | null,
+  fallbackCloseCollection: ClosableCollection & {
+    /**
+     * Some components need to wrap CloseIcon twice,
+     * this method will be executed once after the final CloseIcon is calculated
+     */
+    closeIconRender?: (closeIcon: ReactNode) => ReactNode;
+  } = EmptyFallbackCloseCollection,
+): [closable: boolean, closeIcon: React.ReactNode | null] {
+  // Align the `props`, `context` `fallback` to config object first
+  const propCloseConfig = useClosableConfig(propCloseCollection);
+  const contextCloseConfig = useClosableConfig(contextCloseCollection);
+  const mergedFallbackCloseCollection = React.useMemo(
+    () => ({
+      closeIcon: <CloseOutlined />,
+      ...fallbackCloseCollection,
+    }),
+    [fallbackCloseCollection],
+  );
+
+  // Use fallback logic to fill the config
+  const mergedClosableConfig = React.useMemo(() => {
+    // ================ Props First ================
+    // Skip if prop is disabled
+    if (propCloseConfig === false) {
+      return false;
+    }
+
+    if (propCloseConfig) {
+      return assignWithoutUndefined(
+        mergedFallbackCloseCollection,
+        contextCloseConfig,
+        propCloseConfig,
+      );
+    }
+
+    // =============== Context Second ==============
+    // Skip if context is disabled
+    if (contextCloseConfig === false) {
+      return false;
+    }
+
+    if (contextCloseConfig) {
+      return assignWithoutUndefined(mergedFallbackCloseCollection, contextCloseConfig);
+    }
+
+    // ============= Fallback Default ==============
+    return !mergedFallbackCloseCollection.closable ? false : mergedFallbackCloseCollection;
+  }, [propCloseConfig, contextCloseConfig, mergedFallbackCloseCollection]);
+
+  // Calculate the final closeIcon
+  return React.useMemo(() => {
+    if (mergedClosableConfig === false) {
+      return [false, null];
+    }
+
+    const { closeIconRender } = mergedFallbackCloseCollection;
+    const { closeIcon } = mergedClosableConfig;
+
+    let mergedCloseIcon: ReactNode = closeIcon;
+    if (mergedCloseIcon !== null && mergedCloseIcon !== undefined) {
+      // Wrap the closeIcon if needed
+      if (closeIconRender) {
+        mergedCloseIcon = closeIconRender(closeIcon);
+      }
+
+      // Wrap the closeIcon with aria props
+      const ariaProps = pickAttrs(mergedClosableConfig, true);
+      if (Object.keys(ariaProps).length) {
+        mergedCloseIcon = React.isValidElement(mergedCloseIcon) ? (
+          React.cloneElement(mergedCloseIcon, ariaProps)
+        ) : (
+          <span {...ariaProps}>{mergedCloseIcon}</span>
+        );
+      }
+    }
+
+    return [true, mergedCloseIcon];
+  }, [mergedClosableConfig, mergedFallbackCloseCollection]);
 }

packages/meta/src/_util/hooks/useProxyImperativeHandle.ts

@@ -1,7 +1,8 @@
 // Proxy the dom ref with `{ nativeElement, otherFn }` type
 // ref: https://github.com/ant-design/ant-design/discussions/45242
 
-import { useImperativeHandle, type Ref } from 'react';
+import { useImperativeHandle } from 'react';
+import type { Ref } from 'react';
 
 function fillProxy(
   element: HTMLElement & { _antProxy?: Record<string, any> },

packages/meta/src/_util/index.zh-CN.md

@@ -0,0 +1,49 @@
+---
+category: Components
+title: Util 工具类
+subtitle: 工具类
+description: 辅助开发，提供一些常用的工具方法。
+showImport: false
+demo:
+  cols: 2
+group:
+  title: 其他
+  order: 99
+---
+
+自 `5.13.0` 版本开始提供这些方法。
+
+## GetRef
+
+获取组件的 `ref` 属性定义，这对于未直接暴露或者子组件的 `ref` 属性定义非常有用。
+
+```ts
+import { Select } from 'antd';
+import type { GetRef } from 'antd';
+
+type SelectRefType = GetRef<typeof Select>; // BaseSelectRef
+```
+
+## GetProps
+
+获取组件的 `props` 属性定义：
+
+```ts
+import { Checkbox } from 'antd';
+import type { GetProps } from 'antd';
+
+type CheckboxGroupType = GetProps<typeof Checkbox.Group>;
+```
+
+## GetProp
+
+获取组件的单个 `props` 属性定义。它已经将 `NonNullable` 进行了封装，所以不用在考虑为空的情况：
+
+```ts
+import { Select } from 'antd';
+import type { GetProp, SelectProps } from 'antd';
+
+// 以下两种都可以生效
+type SelectOptionType1 = GetProp<SelectProps, 'options'>[number];
+type SelectOptionType2 = GetProp<typeof Select, 'options'>[number];
+```

packages/meta/src/_util/motion.ts

@@ -27,7 +27,7 @@ const initCollapseMotion = (rootCls: string = 'ant'): CSSMotionProps => ({
 
 const SelectPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const;
 
-export type SelectCommonPlacement = typeof SelectPlacements[number];
+export type SelectCommonPlacement = (typeof SelectPlacements)[number];
 
 const getTransitionName = (rootPrefixCls: string, motion: string, transitionName?: string) => {
   if (transitionName !== undefined) {

packages/meta/src/_util/reactNode.ts

@@ -1,28 +1,27 @@
-import * as React from 'react';
+import React from 'react';
+
 import type { AnyObject } from './type';
 
-export const { isValidElement } = React;
-
 export function isFragment(child: any): boolean {
-  return child && isValidElement(child) && child.type === React.Fragment;
+  return child && React.isValidElement(child) && child.type === React.Fragment;
 }
 
 type RenderProps = AnyObject | ((originProps: AnyObject) => AnyObject | void);
 
-export function replaceElement(
+export const replaceElement = <P>(
   element: React.ReactNode,
   replacement: React.ReactNode,
   props?: RenderProps,
-): React.ReactNode {
-  if (!isValidElement(element)) {
+) => {
+  if (!React.isValidElement<P>(element)) {
     return replacement;
   }
-  return React.cloneElement(
+  return React.cloneElement<P>(
     element,
     typeof props === 'function' ? props(element.props || {}) : props,
   );
-}
+};
 
-export function cloneElement(element: React.ReactNode, props?: RenderProps): React.ReactElement {
-  return replaceElement(element, element, props) as React.ReactElement;
+export function cloneElement<P>(element: React.ReactNode, props?: RenderProps) {
+  return replaceElement<P>(element, element, props) as React.ReactElement;
 }

packages/meta/src/_util/responsiveObserver.ts

@@ -95,18 +95,16 @@ export default function useResponsiveObserver() {
         if (!subscribers.size) this.unregister();
       },
       unregister() {
-        // @ts-ignore
-        Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
-          const matchMediaQuery = responsiveMap[screen];
+        Object.keys(responsiveMap).forEach((screen) => {
+          const matchMediaQuery = responsiveMap[screen as Breakpoint];
           const handler = this.matchHandlers[matchMediaQuery];
           handler?.mql.removeListener(handler?.listener);
         });
         subscribers.clear();
       },
       register() {
-        // @ts-ignore
-        Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
-          const matchMediaQuery = responsiveMap[screen];
+        Object.keys(responsiveMap).forEach((screen) => {
+          const matchMediaQuery = responsiveMap[screen as Breakpoint];
           const listener = ({ matches }: { matches: boolean }) => {
             this.dispatch({
               ...screens,

packages/meta/src/_util/scrollTo.ts

@@ -1,4 +1,5 @@
 import raf from 'rc-util/lib/raf';
+
 import { easeInOutCubic } from './easings';
 import getScroll, { isWindow } from './getScroll';
 

packages/meta/src/_util/statusUtils.ts

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
+
 import type { ValidateStatus } from '../form/FormItem';
 
 const InputStatuses = ['warning', 'error', ''] as const;
 
-export type InputStatus = typeof InputStatuses[number];
+export type InputStatus = (typeof InputStatuses)[number];
 
 export function getStatusClassNames(
   prefixCls: string,

packages/meta/src/_util/transButton.tsx

@@ -3,14 +3,15 @@
  *
  * This helps accessibility reader to tread as a interactive button to operation.
  */
-import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
+import KeyCode from 'rc-util/lib/KeyCode';
 
 interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
-  onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
+  onClick?: (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   noStyle?: boolean;
   autoFocus?: boolean;
   disabled?: boolean;
+  tabIndex?: number;
 }
 
 const inlineStyle: React.CSSProperties = {
@@ -37,7 +38,7 @@ const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, r
     }
   };
 
-  const { style, noStyle, disabled, ...restProps } = props;
+  const { style, noStyle, disabled, tabIndex = 0, ...restProps } = props;
 
   let mergedStyle: React.CSSProperties = {};
 
@@ -59,7 +60,7 @@ const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, r
   return (
     <div
       role="button"
-      tabIndex={0}
+      tabIndex={tabIndex}
       ref={ref}
       {...restProps}
       onKeyDown={onKeyDown}

packages/meta/src/_util/transKeys.ts

@@ -1,5 +1,7 @@
-export const groupKeysMap = (keys: string[]) => {
-  const map = new Map<string, number>();
+import type { TransferKey } from '../transfer/interface';
+
+export const groupKeysMap = (keys: TransferKey[]) => {
+  const map = new Map<TransferKey, number>();
   keys.forEach((key, index) => {
     map.set(key, index);
   });
@@ -7,7 +9,7 @@ export const groupKeysMap = (keys: string[]) => {
 };
 
 export const groupDisabledKeysMap = <RecordType extends any[]>(dataSource: RecordType) => {
-  const map = new Map<string, number>();
+  const map = new Map<TransferKey, number>();
   dataSource.forEach(({ disabled, key }, index) => {
     if (disabled) {
       map.set(key, index);

packages/meta/src/_util/type.ts

@@ -1,6 +1,34 @@
+import type React from 'react';
+
 /** https://github.com/Microsoft/TypeScript/issues/29729 */
 export type LiteralUnion<T extends string> = T | (string & {});
 
 export type AnyObject = Record<PropertyKey, any>;
 
 export type CustomComponent<P = AnyObject> = React.ComponentType<P> | string;
+
+export type GetProps<T extends React.ComponentType<any> | object> = T extends React.ComponentType<
+  infer P
+>
+  ? P
+  : T extends object
+    ? T
+    : never;
+
+export type GetProp<
+  T extends React.ComponentType<any> | object,
+  PropName extends keyof GetProps<T>,
+> = NonNullable<GetProps<T>[PropName]>;
+
+type ReactRefComponent<Props extends { ref?: React.Ref<any> | string }> = (
+  props: Props,
+) => React.ReactNode;
+
+type ExtractRefAttributesRef<T> = T extends React.RefAttributes<infer P> ? P : never;
+
+export type GetRef<T extends ReactRefComponent<any> | React.Component<any>> =
+  T extends React.Component<any>
+    ? T
+    : T extends React.ComponentType<infer P>
+      ? ExtractRefAttributesRef<P>
+      : never;

packages/meta/src/_util/warning.ts

@@ -41,6 +41,11 @@ type TypeWarning = BaseTypeWarning & {
 };
 
 export interface WarningContextProps {
+  /**
+   * @descCN 设置警告等级，设置 `false` 时会将废弃相关信息聚合为单条信息。
+   * @descEN Set the warning level. When set to `false`, discard related information will be aggregated into a single message.
+   * @since 5.10.0
+   */
   strict?: boolean;
 }
 

packages/meta/src/_util/wave/WaveEffect.tsx

@@ -1,10 +1,13 @@
+import * as React from 'react';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
-import { render, unmount } from 'rc-util/lib/React/render';
 import raf from 'rc-util/lib/raf';
-import * as React from 'react';
+import { render, unmount } from 'rc-util/lib/React/render';
+import { composeRef } from 'rc-util/lib/ref';
+
+import { TARGET_CLS } from './interface';
+import type { ShowWaveEffect } from './interface';
 import { getTargetWaveColor } from './util';
-import { type ShowWaveEffect, TARGET_CLS } from './interface';
 
 function validateNum(value: number) {
   return Number.isNaN(value) ? 0 : value;
@@ -18,7 +21,7 @@ export interface WaveEffectProps {
 
 const WaveEffect: React.FC<WaveEffectProps> = (props) => {
   const { className, target, component } = props;
-  const divRef = React.useRef<HTMLDivElement>(null);
+  const divRef = React.useRef<HTMLDivElement | null>(null);
 
   const [color, setWaveColor] = React.useState<string | null>(null);
   const [borderRadius, setBorderRadius] = React.useState<number[]>([]);
@@ -123,16 +126,10 @@ const WaveEffect: React.FC<WaveEffectProps> = (props) => {
         return false;
       }}
     >
-      {({ className: motionClassName }) => (
+      {({ className: motionClassName }, ref) => (
         <div
-          ref={divRef}
-          className={classNames(
-            className,
-            {
-              'wave-quick': isSmallComponent,
-            },
-            motionClassName,
-          )}
+          ref={composeRef(divRef, ref)}
+          className={classNames(className, { 'wave-quick': isSmallComponent }, motionClassName)}
           style={waveStyle}
         />
       )}

packages/meta/src/_util/wave/index.ts

@@ -1,7 +1,8 @@
-import classNames from 'classnames';
-import { composeRef, supportRef } from 'rc-util/lib/ref';
-import isVisible from 'rc-util/lib/Dom/isVisible';
 import React, { useContext, useRef } from 'react';
+import classNames from 'classnames';
+import isVisible from 'rc-util/lib/Dom/isVisible';
+import { composeRef, supportRef } from 'rc-util/lib/ref';
+
 import type { ConfigConsumerProps } from '../../config-provider';
 import { ConfigContext } from '../../config-provider';
 import { cloneElement } from '../reactNode';
@@ -11,7 +12,7 @@ import useWave from './useWave';
 export interface WaveProps {
   disabled?: boolean;
   children?: React.ReactNode;
-  component?: string;
+  component?: 'Tag' | 'Button' | 'Checkbox' | 'Radio' | 'Switch';
 }
 
 const Wave: React.FC<WaveProps> = (props) => {
@@ -47,7 +48,6 @@ const Wave: React.FC<WaveProps> = (props) => {
       ) {
         return;
       }
-
       showWave(e);
     };
 
@@ -60,7 +60,7 @@ const Wave: React.FC<WaveProps> = (props) => {
 
   // ============================== Render ==============================
   if (!React.isValidElement(children)) {
-    return (children ?? null) as unknown as React.ReactElement;
+    return children ?? null;
   }
 
   const ref = supportRef(children) ? composeRef((children as any).ref, containerRef) : containerRef;

packages/meta/src/_util/wave/style.ts

@@ -29,11 +29,10 @@ const genWaveStyle: GenerateStyle<WaveToken> = (token) => {
           boxShadow: `0 0 0 6px currentcolor`,
           opacity: 0,
         },
-
         '&.wave-quick': {
           transition: [
-            `box-shadow 0.3s ${token.motionEaseInOut}`,
-            `opacity 0.35s ${token.motionEaseInOut}`,
+            `box-shadow ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+            `opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
           ].join(','),
         },
       },

packages/meta/src/_util/wave/useWave.ts

@@ -1,16 +1,18 @@
 import * as React from 'react';
 import { useEvent } from 'rc-util';
 import raf from 'rc-util/lib/raf';
-import showWaveEffect from './WaveEffect';
+
 import { ConfigContext } from '../../config-provider';
 import useToken from '../../theme/useToken';
-import { TARGET_CLS, type ShowWave } from './interface';
+import { TARGET_CLS } from './interface';
+import type { ShowWave } from './interface';
+import showWaveEffect from './WaveEffect';
 
-export default function useWave(
+const useWave = (
   nodeRef: React.RefObject<HTMLElement>,
   className: string,
-  component?: string,
-) {
+  component?: 'Tag' | 'Button' | 'Checkbox' | 'Radio' | 'Switch',
+) => {
   const { wave } = React.useContext(ConfigContext);
   const [, token, hashId] = useToken();
 
@@ -41,4 +43,6 @@ export default function useWave(
   };
 
   return showDebounceWave;
-}
+};
+
+export default useWave;

packages/meta/src/date-picker/style/index.ts

@@ -6,10 +6,10 @@ import type { SharedComponentToken, SharedInputToken } from '../../input/style';
 import {
   genActiveStyle,
   genBasicInputStyle,
-  genHoverStyle,
   initComponentToken,
   initInputToken,
 } from '../../input/style';
+import { genHoverStyle } from '../../input/style/variants'
 import { resetComponent, textEllipsis } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 import {

packages/meta/src/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropdownButton rtl render component should be rendered correctly in RTL direction 1`] = `
+<div
+  class="ant-space-compact ant-space-compact-rtl ant-space-compact-block ant-dropdown-button"
+>
+  <button
+    class="ant-btn ant-btn-default ant-btn-rtl ant-btn-compact-item ant-btn-compact-first-item ant-btn-compact-item-rtl"
+    type="button"
+  />
+  <button
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-rtl ant-btn-compact-item ant-btn-compact-last-item ant-btn-compact-item-rtl ant-dropdown-trigger ant-dropdown-rtl"
+    type="button"
+  >
+    <span
+      class="ant-btn-icon"
+    >
+      <span
+        aria-label="ellipsis"
+        class="anticon anticon-ellipsis"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="ellipsis"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+          />
+        </svg>
+      </span>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`DropdownButton should support href like Button 1`] = `
+<div
+  class="ant-space-compact ant-space-compact-block ant-dropdown-button"
+>
+  <a
+    class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+    href="https://ant.design"
+    tabindex="0"
+  />
+  <button
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+    type="button"
+  >
+    <span
+      class="ant-btn-icon"
+    >
+      <span
+        aria-label="ellipsis"
+        class="anticon anticon-ellipsis"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="ellipsis"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+          />
+        </svg>
+      </span>
+    </span>
+  </button>
+</div>
+`;

packages/meta/src/dropdown/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropdown overlay is function and has custom transitionName 1`] = `
+Array [
+  <button
+    class="ant-dropdown-trigger ant-dropdown-open"
+    type="button"
+  >
+    button
+  </button>,
+  <div
+    class="ant-dropdown move-up-appear move-up-appear-prepare move-up ant-dropdown-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <div>
+      menu
+    </div>
+  </div>,
+]
+`;
+
+exports[`Dropdown overlay is string 1`] = `
+Array [
+  <button
+    class="ant-dropdown-trigger ant-dropdown-open"
+    type="button"
+  >
+    button
+  </button>,
+  <div
+    class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-dropdown-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <span>
+      string
+    </span>
+  </div>,
+]
+`;
+
+exports[`Dropdown rtl render component should be rendered correctly in RTL direction 1`] = `
+<span
+  class="ant-dropdown-trigger ant-dropdown-rtl"
+/>
+`;
+
+exports[`Dropdown should render custom dropdown correctly 1`] = `
+Array [
+  <button
+    class="ant-dropdown-trigger ant-dropdown-open"
+    type="button"
+  >
+    button
+  </button>,
+  <div
+    class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-dropdown-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <div>
+      <ul
+        class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
+        data-menu-list="true"
+        role="menu"
+        tabindex="0"
+      >
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          data-menu-id="rc-menu-uuid-test-1"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            foo
+          </span>
+        </li>
+      </ul>
+      <div
+        aria-hidden="true"
+        style="display: none;"
+      />
+      <div
+        class="dropdown-custom-node"
+      >
+        CUSTOM NODE
+      </div>
+    </div>
+  </div>,
+]
+`;

packages/meta/src/dropdown/__tests__/demo-extend.test.ts

@@ -0,0 +1,5 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('dropdown', {
+  skip: ['sub-menu-debug.tsx'],
+});

packages/meta/src/dropdown/__tests__/demo.test.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
+
+demoTest('dropdown', {
+  testRootProps: false,
+  skip: ['sub-menu-debug.tsx'],
+});
+
+rootPropsTest(
+  'dropdown',
+  (Dropdown, props) => (
+    <Dropdown
+      {...props}
+      menu={{
+        openKeys: ['1'],
+        items: [
+          {
+            key: '1',
+            label: 'parent',
+            children: [
+              {
+                key: '2',
+                label: 'child',
+              },
+            ],
+          },
+        ],
+      }}
+    >
+      <a />
+    </Dropdown>
+  ),
+  {
+    findRootElements: () => document.querySelector('.ant-dropdown')!,
+  },
+);

packages/meta/src/dropdown/__tests__/dropdown-button.test.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+
+import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+import { render, waitFakeTimer } from '../../../tests/utils';
+import type { DropdownProps } from '../dropdown';
+import DropdownButton from '../dropdown-button';
+
+let dropdownProps: DropdownProps;
+
+jest.mock('../dropdown', () => {
+  const ActualDropdown = jest.requireActual('../dropdown');
+  const ActualDropdownComponent = ActualDropdown.default;
+  const h: typeof React = jest.requireActual('react');
+
+  const MockedDropdown: React.FC<DropdownProps> & {
+    Button: typeof ActualDropdownComponent.Button;
+  } = (props) => {
+    const clone: Record<string, any> = {};
+    Object.keys(props).forEach((key) => {
+      clone[key] = props[key as keyof typeof props];
+    });
+
+    dropdownProps = clone;
+    const { children, ...restProps } = props;
+    return h.createElement(ActualDropdownComponent, { ...restProps }, children);
+  };
+  MockedDropdown.Button = ActualDropdownComponent.Button;
+
+  return {
+    ...ActualDropdown,
+    __esModule: true,
+    default: MockedDropdown,
+  };
+});
+
+describe('DropdownButton', () => {
+  mountTest(DropdownButton);
+  rtlTest(DropdownButton);
+
+  it('pass appropriate props to Dropdown', () => {
+    const items = [
+      {
+        label: 'foo',
+        key: '1',
+      },
+    ];
+
+    const props: DropdownProps = {
+      align: {
+        offset: [10, 20],
+      },
+      menu: { items },
+      disabled: false,
+      trigger: ['hover'],
+      open: true,
+      onOpenChange: () => {},
+    };
+
+    const { rerender } = render(<DropdownButton {...props} />);
+
+    (Object.keys(props) as (keyof DropdownProps)[]).forEach((key) => {
+      expect(dropdownProps[key]).toBe(props[key]);
+    });
+
+    rerender(<DropdownButton menu={{ items }} open />);
+    expect(dropdownProps.open).toBe(true);
+  });
+
+  it("don't pass open to Dropdown if it's not exits", () => {
+    const items = [
+      {
+        label: 'foo',
+        key: '1',
+      },
+    ];
+    render(<DropdownButton menu={{ items }} />);
+    expect('open' in dropdownProps).toBe(false);
+  });
+
+  it('should support href like Button', () => {
+    const items = [
+      {
+        label: 'foo',
+        key: '1',
+      },
+    ];
+    const { asFragment } = render(<DropdownButton menu={{ items }} href="https://ant.design" />);
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
+
+  it('have static property for type detecting', () => {
+    expect(DropdownButton.__ANT_BUTTON).toBe(true);
+  });
+
+  it('should pass mouseEnterDelay and mouseLeaveDelay to Dropdown', () => {
+    const items = [
+      {
+        label: 'foo',
+        key: '1',
+      },
+    ];
+    render(<DropdownButton mouseEnterDelay={1} mouseLeaveDelay={2} menu={{ items }} />);
+    expect(dropdownProps.mouseEnterDelay).toBe(1);
+    expect(dropdownProps.mouseLeaveDelay).toBe(2);
+  });
+
+  it('should support overlayClassName and overlayStyle', () => {
+    const items = [
+      {
+        label: 'foo',
+        key: '1',
+      },
+    ];
+    const { container } = render(
+      <DropdownButton
+        overlayClassName="className"
+        overlayStyle={{ color: 'red' }}
+        menu={{ items }}
+        open
+      />,
+    );
+    expect(container.querySelector('.ant-dropdown')?.classList).toContain('className');
+    expect((container.querySelector('.ant-dropdown') as HTMLElement).style.color).toContain('red');
+  });
+
+  it('should support loading', () => {
+    const items = [
+      {
+        label: 'foo',
+        key: '1',
+      },
+    ];
+    const { container } = render(<DropdownButton menu={{ items }} loading />);
+
+    expect(container.querySelector('.ant-dropdown-button .ant-btn-loading')?.classList).toContain(
+      'ant-btn',
+    );
+  });
+  it('should console Error when `overlay` in props', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<DropdownButton overlay={<div>test</div>} />);
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Dropdown] `overlay` is deprecated. Please use `menu` instead.',
+    );
+    errSpy.mockRestore();
+  });
+  it('should not console Error when `overlay` not in props', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<DropdownButton />);
+    expect(errSpy).not.toHaveBeenCalled();
+    errSpy.mockRestore();
+  });
+
+  it('should support dropdownRender', () => {
+    const dropdownRender = jest.fn((menu) => <div>Custom Menu {menu}</div>);
+    render(<DropdownButton open dropdownRender={dropdownRender} />);
+    expect(dropdownRender).toHaveBeenCalled();
+  });
+
+  it('should support focus menu when set autoFocus', async () => {
+    jest.useFakeTimers();
+    const items = [
+      {
+        label: 'foo',
+        key: '1',
+      },
+    ];
+    const { container } = render(<DropdownButton open autoFocus menu={{ items }} />);
+    await waitFakeTimer();
+    expect(container.querySelector('.ant-dropdown-menu-item-active')).toBeTruthy();
+  });
+});

packages/meta/src/dropdown/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Dropdown image', () => {
+  imageDemoTest('dropdown', { skip: ['dropdown-button.tsx'] });
+});

packages/meta/src/dropdown/__tests__/index.test.tsx

@@ -0,0 +1,327 @@
+import React from 'react';
+import type { TriggerProps } from '@rc-component/trigger';
+
+import type { DropDownProps } from '..';
+import Dropdown from '..';
+import { resetWarned } from '../../_util/warning';
+import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+
+let triggerProps: TriggerProps;
+
+jest.mock('@rc-component/trigger', () => {
+  let Trigger = jest.requireActual('@rc-component/trigger/lib/mock');
+  Trigger = Trigger.default || Trigger;
+  const h: typeof React = jest.requireActual('react');
+
+  return {
+    default: h.forwardRef<HTMLElement, TriggerProps>((props, ref) => {
+      triggerProps = props;
+      return h.createElement(Trigger, { ref, ...props });
+    }),
+    __esModule: true,
+  };
+});
+
+describe('Dropdown', () => {
+  const items = [
+    {
+      label: 'foo',
+      key: '1',
+    },
+  ];
+
+  mountTest(() => (
+    <Dropdown menu={{ items }}>
+      <span />
+    </Dropdown>
+  ));
+
+  rtlTest(() => (
+    <Dropdown menu={{ items }}>
+      <span />
+    </Dropdown>
+  ));
+
+  it('overlay is function and has custom transitionName', () => {
+    const { asFragment } = render(
+      <Dropdown overlay={() => <div>menu</div>} transitionName="move-up" open>
+        <button type="button">button</button>
+      </Dropdown>,
+    );
+    expect(Array.from(asFragment().childNodes)).toMatchSnapshot();
+  });
+
+  it('overlay is string', () => {
+    const { asFragment } = render(
+      <Dropdown overlay={'string' as any} open>
+        <button type="button">button</button>
+      </Dropdown>,
+    );
+    expect(Array.from(asFragment().childNodes)).toMatchSnapshot();
+  });
+
+  it('should render custom dropdown correctly', () => {
+    const { asFragment } = render(
+      <Dropdown
+        open
+        menu={{ items }}
+        dropdownRender={(menu) => (
+          <div>
+            {menu}
+            <div className="dropdown-custom-node">CUSTOM NODE</div>
+          </div>
+        )}
+      >
+        <button type="button">button</button>
+      </Dropdown>,
+    );
+    expect(Array.from(asFragment().childNodes)).toMatchSnapshot();
+  });
+
+  it('support Menu expandIcon', async () => {
+    jest.useFakeTimers();
+    const props: DropDownProps = {
+      menu: {
+        items: [
+          {
+            label: 'foo',
+            key: '1',
+          },
+          {
+            label: 'SubMenu',
+            key: 'submenu',
+            children: [
+              {
+                label: 'foo',
+                key: '1',
+              },
+            ],
+          },
+        ],
+        expandIcon: <span id="customExpandIcon" />,
+      },
+      open: true,
+      getPopupContainer: (node) => node,
+    };
+
+    const { container } = render(
+      <Dropdown {...props}>
+        <button type="button">button</button>
+      </Dropdown>,
+    );
+    await waitFakeTimer();
+    expect(container.querySelectorAll('#customExpandIcon').length).toBe(1);
+    jest.useRealTimers();
+  });
+
+  it('should warn if use topCenter or bottomCenter', () => {
+    const error = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(
+      <div>
+        <Dropdown menu={{ items }} placement="bottomCenter">
+          <button type="button">bottomCenter</button>
+        </Dropdown>
+        <Dropdown menu={{ items }} placement="topCenter">
+          <button type="button">topCenter</button>
+        </Dropdown>
+      </div>,
+    );
+    expect(error).toHaveBeenCalledWith(
+      expect.stringContaining("[antd: Dropdown] You are using 'bottomCenter'"),
+    );
+    expect(error).toHaveBeenCalledWith(
+      expect.stringContaining("[antd: Dropdown] You are using 'topCenter'"),
+    );
+    error.mockRestore();
+  });
+
+  // zombieJ: when replaced with react test lib, it may be mock fully content
+  it('dropdown should support auto adjust placement', () => {
+    render(
+      <Dropdown menu={{ items }} open>
+        <button type="button">button</button>
+      </Dropdown>,
+    );
+
+    expect(triggerProps.builtinPlacements).toEqual(
+      expect.objectContaining({
+        bottomLeft: expect.objectContaining({
+          overflow: {
+            adjustX: true,
+            adjustY: true,
+          },
+        }),
+      }),
+    );
+  });
+
+  it('menu item with group', () => {
+    jest.useFakeTimers();
+    const { container } = render(
+      <Dropdown
+        trigger={['click']}
+        menu={{
+          items: [
+            {
+              label: 'grp',
+              type: 'group',
+              children: [
+                {
+                  label: '1',
+                  key: 1,
+                },
+              ],
+            },
+          ],
+        }}
+      >
+        <a />
+      </Dropdown>,
+    );
+
+    // Open
+    fireEvent.click(container.querySelector('a')!);
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    // Close
+    fireEvent.click(container.querySelector('.ant-dropdown-menu-item')!);
+
+    // Force Motion move on
+    for (let i = 0; i < 10; i += 1) {
+      act(() => {
+        jest.runAllTimers();
+      });
+    }
+
+    // Motion End
+    fireEvent.animationEnd(container.querySelector('.ant-slide-up-leave-active')!);
+
+    expect(container.querySelector('.ant-dropdown-hidden')).toBeTruthy();
+
+    jest.useRealTimers();
+  });
+
+  it('legacy visible', () => {
+    resetWarned();
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const onOpenChange = jest.fn();
+    const onVisibleChange = jest.fn();
+
+    const { container, rerender } = render(
+      <Dropdown
+        visible
+        onOpenChange={onOpenChange}
+        onVisibleChange={onVisibleChange}
+        trigger={['click']}
+        menu={{
+          items: [
+            {
+              label: <div className="bamboo" />,
+              key: 'bamboo',
+            },
+          ],
+        }}
+      >
+        <a className="little" />
+      </Dropdown>,
+    );
+
+    expect(document.querySelector('.bamboo')).toBeTruthy();
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Dropdown] `visible` is deprecated. Please use `open` instead.',
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Dropdown] `onVisibleChange` is deprecated. Please use `onOpenChange` instead.',
+    );
+
+    fireEvent.click(container.querySelector('.little')!);
+    expect(onOpenChange).toHaveBeenCalled();
+    expect(onVisibleChange).toHaveBeenCalled();
+
+    rerender(
+      <Dropdown overlay={<div>menu</div>}>
+        <a className="little" />
+      </Dropdown>,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Dropdown] `overlay` is deprecated. Please use `menu` instead.',
+    );
+
+    errorSpy.mockRestore();
+  });
+
+  it('not block ref', () => {
+    const divRef = React.createRef<HTMLDivElement>();
+    render(
+      <Dropdown open dropdownRender={() => <div ref={divRef} />}>
+        <a />
+      </Dropdown>,
+    );
+
+    expect(divRef.current).toBeTruthy();
+  });
+
+  it('should trigger open event when click on item', () => {
+    const onOpenChange = jest.fn();
+    render(
+      <Dropdown
+        onOpenChange={onOpenChange}
+        open
+        menu={{
+          items: [
+            {
+              label: <div className="bamboo" />,
+              key: 1,
+            },
+          ],
+        }}
+      >
+        <a />
+      </Dropdown>,
+    );
+
+    fireEvent.click(document.body.querySelector('.bamboo')!);
+    expect(onOpenChange).toHaveBeenCalledWith(false, { source: 'menu' });
+  });
+
+  it('is still open after selection in multiple mode', () => {
+    jest.useFakeTimers();
+    const { container } = render(
+      <Dropdown
+        trigger={['click']}
+        menu={{
+          selectable: true,
+          multiple: true,
+          items: [
+            { label: '1', key: 1 },
+            { label: '2', key: 2 },
+          ],
+        }}
+      >
+        <a />
+      </Dropdown>,
+    );
+
+    // Open
+    fireEvent.click(container.querySelector('a')!);
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    // Selecting item
+    fireEvent.click(container.querySelector('.ant-dropdown-menu-item')!);
+
+    // Force Motion move on
+    for (let i = 0; i < 10; i += 1) {
+      act(() => {
+        jest.runAllTimers();
+      });
+    }
+    expect(container.querySelector('.ant-dropdown-hidden')).toBeFalsy();
+    jest.useRealTimers();
+  });
+});

packages/meta/src/dropdown/demo/arrow-center.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+设置 `arrow` 为 `{ pointAtCenter: true }` 后，箭头将指向目标元素的中心。
+
+## en-US
+
+By specifying `arrow` prop with `{ pointAtCenter: true }`, the arrow will point to the center of the target element.

packages/meta/src/dropdown/demo/arrow-center.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { MenuProps } from 'antd';
+import { Button, Dropdown, Space } from 'antd';
+
+const items: MenuProps['items'] = [
+  {
+    key: '1',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
+        1st menu item
+      </a>
+    ),
+  },
+  {
+    key: '2',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
+        2nd menu item
+      </a>
+    ),
+  },
+  {
+    key: '3',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
+        3rd menu item
+      </a>
+    ),
+  },
+];
+
+const App: React.FC = () => (
+  <Space direction="vertical">
+    <Space wrap>
+      <Dropdown menu={{ items }} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
+        <Button>bottomLeft</Button>
+      </Dropdown>
+      <Dropdown menu={{ items }} placement="bottom" arrow={{ pointAtCenter: true }}>
+        <Button>bottom</Button>
+      </Dropdown>
+      <Dropdown menu={{ items }} placement="bottomRight" arrow={{ pointAtCenter: true }}>
+        <Button>bottomRight</Button>
+      </Dropdown>
+    </Space>
+    <Space wrap>
+      <Dropdown menu={{ items }} placement="topLeft" arrow={{ pointAtCenter: true }}>
+        <Button>topLeft</Button>
+      </Dropdown>
+      <Dropdown menu={{ items }} placement="top" arrow={{ pointAtCenter: true }}>
+        <Button>top</Button>
+      </Dropdown>
+      <Dropdown menu={{ items }} placement="topRight" arrow={{ pointAtCenter: true }}>
+        <Button>topRight</Button>
+      </Dropdown>
+    </Space>
+  </Space>
+);
+
+export default App;

packages/meta/src/dropdown/demo/arrow.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+可以展示一个箭头。
+
+## en-US
+
+You could display an arrow.

packages/meta/src/dropdown/demo/arrow.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { MenuProps } from 'antd';
+import { Button, Dropdown, Space } from 'antd';
+
+const items: MenuProps['items'] = [
+  {
+    key: '1',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
+        1st menu item
+      </a>
+    ),
+  },
+  {
+    key: '2',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
+        2nd menu item
+      </a>
+    ),
+  },
+  {
+    key: '3',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
+        3rd menu item
+      </a>
+    ),
+  },
+];
+
+const App: React.FC = () => (
+  <Space direction="vertical">
+    <Space wrap>
+      <Dropdown menu={{ items }} placement="bottomLeft" arrow>
+        <Button>bottomLeft</Button>
+      </Dropdown>
+      <Dropdown menu={{ items }} placement="bottom" arrow>
+        <Button>bottom</Button>
+      </Dropdown>
+      <Dropdown menu={{ items }} placement="bottomRight" arrow>
+        <Button>bottomRight</Button>
+      </Dropdown>
+    </Space>
+    <Space wrap>
+      <Dropdown menu={{ items }} placement="topLeft" arrow>
+        <Button>topLeft</Button>
+      </Dropdown>
+      <Dropdown menu={{ items }} placement="top" arrow>
+        <Button>top</Button>
+      </Dropdown>
+      <Dropdown menu={{ items }} placement="topRight" arrow>
+        <Button>topRight</Button>
+      </Dropdown>
+    </Space>
+  </Space>
+);
+
+export default App;

packages/meta/src/dropdown/demo/basic.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+最简单的下拉菜单。
+
+## en-US
+
+The most basic dropdown menu.

packages/meta/src/dropdown/demo/basic.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { DownOutlined, SmileOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Dropdown, Space } from 'antd';
+
+const items: MenuProps['items'] = [
+  {
+    key: '1',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
+        1st menu item
+      </a>
+    ),
+  },
+  {
+    key: '2',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
+        2nd menu item (disabled)
+      </a>
+    ),
+    icon: <SmileOutlined />,
+    disabled: true,
+  },
+  {
+    key: '3',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
+        3rd menu item (disabled)
+      </a>
+    ),
+    disabled: true,
+  },
+  {
+    key: '4',
+    danger: true,
+    label: 'a danger item',
+  },
+];
+
+const App: React.FC = () => (
+  <Dropdown menu={{ items }}>
+    <a onClick={(e) => e.preventDefault()}>
+      <Space>
+        Hover me
+        <DownOutlined />
+      </Space>
+    </a>
+  </Dropdown>
+);
+
+export default App;

packages/meta/src/dropdown/demo/context-menu.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+默认是移入触发菜单，可以点击鼠标右键触发。弹出菜单位置会跟随右键点击位置变动。
+
+## en-US
+
+The default trigger mode is `hover`, you can change it to `contextMenu`. The pop-up menu position will follow the right-click position.

packages/meta/src/dropdown/demo/context-menu.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { MenuProps } from 'antd';
+import { Dropdown, theme } from 'antd';
+
+const items: MenuProps['items'] = [
+  {
+    label: '1st menu item',
+    key: '1',
+  },
+  {
+    label: '2nd menu item',
+    key: '2',
+  },
+  {
+    label: '3rd menu item',
+    key: '3',
+  },
+];
+
+const App: React.FC = () => {
+  const {
+    token: { colorBgLayout, colorTextTertiary },
+  } = theme.useToken();
+
+  return (
+    <Dropdown menu={{ items }} trigger={['contextMenu']}>
+      <div
+        style={{
+          color: colorTextTertiary,
+          background: colorBgLayout,
+          height: 200,
+          textAlign: 'center',
+          lineHeight: '200px',
+        }}
+      >
+        Right Click on here
+      </div>
+    </Dropdown>
+  );
+};
+
+export default App;

packages/meta/src/dropdown/demo/custom-dropdown.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 `dropdownRender` 对下拉菜单进行自由扩展。如果你并不需要 Menu 内容，请直接使用 Popover 组件。
+
+## en-US
+
+Customize the dropdown menu via `dropdownRender`. If you don't need the Menu content, use the Popover component directly.

packages/meta/src/dropdown/demo/custom-dropdown.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { DownOutlined } from '@ant-design/icons';
+import { Button, Divider, Dropdown, Space, theme } from 'antd';
+import type { MenuProps } from 'antd';
+
+const { useToken } = theme;
+
+const items: MenuProps['items'] = [
+  {
+    key: '1',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
+        1st menu item
+      </a>
+    ),
+  },
+  {
+    key: '2',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
+        2nd menu item (disabled)
+      </a>
+    ),
+    disabled: true,
+  },
+  {
+    key: '3',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
+        3rd menu item (disabled)
+      </a>
+    ),
+    disabled: true,
+  },
+];
+
+const App: React.FC = () => {
+  const { token } = useToken();
+
+  const contentStyle: React.CSSProperties = {
+    backgroundColor: token.colorBgElevated,
+    borderRadius: token.borderRadiusLG,
+    boxShadow: token.boxShadowSecondary,
+  };
+
+  const menuStyle: React.CSSProperties = {
+    boxShadow: 'none',
+  };
+
+  return (
+    <Dropdown
+      menu={{ items }}
+      dropdownRender={(menu) => (
+        <div style={contentStyle}>
+          {React.cloneElement(menu as React.ReactElement, { style: menuStyle })}
+          <Divider style={{ margin: 0 }} />
+          <Space style={{ padding: 8 }}>
+            <Button type="primary">Click me!</Button>
+          </Space>
+        </div>
+      )}
+    >
+      <a onClick={(e) => e.preventDefault()}>
+        <Space>
+          Hover me
+          <DownOutlined />
+        </Space>
+      </a>
+    </Dropdown>
+  );
+};
+
+export default App;

packages/meta/src/dropdown/demo/dropdown-button.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+左边是按钮，右边是额外的相关功能菜单。可设置 `icon` 属性来修改右边的图标。
+
+## en-US
+
+A button is on the left, and a related functional menu is on the right. You can set the icon property to modify the icon of right.

packages/meta/src/dropdown/demo/dropdown-button.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { DownOutlined, UserOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Button, Dropdown, message, Space, Tooltip } from 'antd';
+
+const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  message.info('Click on left button.');
+  console.log('click left button', e);
+};
+
+const handleMenuClick: MenuProps['onClick'] = (e) => {
+  message.info('Click on menu item.');
+  console.log('click', e);
+};
+
+const items: MenuProps['items'] = [
+  {
+    label: '1st menu item',
+    key: '1',
+    icon: <UserOutlined />,
+  },
+  {
+    label: '2nd menu item',
+    key: '2',
+    icon: <UserOutlined />,
+  },
+  {
+    label: '3rd menu item',
+    key: '3',
+    icon: <UserOutlined />,
+    danger: true,
+  },
+  {
+    label: '4rd menu item',
+    key: '4',
+    icon: <UserOutlined />,
+    danger: true,
+    disabled: true,
+  },
+];
+
+const menuProps = {
+  items,
+  onClick: handleMenuClick,
+};
+
+const App: React.FC = () => (
+  <Space wrap>
+    <Dropdown.Button menu={menuProps} onClick={handleButtonClick}>
+      Dropdown
+    </Dropdown.Button>
+    <Dropdown.Button menu={menuProps} placement="bottom" icon={<UserOutlined />}>
+      Dropdown
+    </Dropdown.Button>
+    <Dropdown.Button menu={menuProps} onClick={handleButtonClick} disabled>
+      Dropdown
+    </Dropdown.Button>
+    <Dropdown.Button
+      menu={menuProps}
+      buttonsRender={([leftButton, rightButton]) => [
+        <Tooltip title="tooltip" key="leftButton">
+          {leftButton}
+        </Tooltip>,
+        React.cloneElement(rightButton as React.ReactElement<any, string>, { loading: true }),
+      ]}
+    >
+      With Tooltip
+    </Dropdown.Button>
+    <Dropdown menu={menuProps}>
+      <Button>
+        <Space>
+          Button
+          <DownOutlined />
+        </Space>
+      </Button>
+    </Dropdown>
+    <Dropdown.Button menu={menuProps} onClick={handleButtonClick} danger>
+      Danger
+    </Dropdown.Button>
+  </Space>
+);
+
+export default App;

packages/meta/src/dropdown/demo/event.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。
+
+## en-US
+
+An event will be triggered when you click menu items, in which you can make different operations according to item's key.

packages/meta/src/dropdown/demo/event.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { DownOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Dropdown, message, Space } from 'antd';
+
+const onClick: MenuProps['onClick'] = ({ key }) => {
+  message.info(`Click on item ${key}`);
+};
+
+const items: MenuProps['items'] = [
+  {
+    label: '1st menu item',
+    key: '1',
+  },
+  {
+    label: '2nd menu item',
+    key: '2',
+  },
+  {
+    label: '3rd menu item',
+    key: '3',
+  },
+];
+
+const App: React.FC = () => (
+  <Dropdown menu={{ items, onClick }}>
+    <a onClick={(e) => e.preventDefault()}>
+      <Space>
+        Hover me, Click menu item
+        <DownOutlined />
+      </Space>
+    </a>
+  </Dropdown>
+);
+
+export default App;

packages/meta/src/dropdown/demo/icon-debug.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+特殊处理 Down icon。
+
+## en-US
+
+Specially handle Down icon.

packages/meta/src/dropdown/demo/icon-debug.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DownOutlined } from '@ant-design/icons';
+import { Dropdown, Space } from 'antd';
+
+const App: React.FC = () => (
+  <Space>
+    <Dropdown.Button icon={<DownOutlined />} menu={{ items: [] }}>
+      Submit
+    </Dropdown.Button>
+  </Space>
+);
+
+export default App;

packages/meta/src/dropdown/demo/item.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+分割线和不可用菜单项。
+
+## en-US
+
+Divider and disabled menu item.

packages/meta/src/dropdown/demo/item.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { DownOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Dropdown, Space } from 'antd';
+
+const items: MenuProps['items'] = [
+  {
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
+        1st menu item
+      </a>
+    ),
+    key: '0',
+  },
+  {
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
+        2nd menu item
+      </a>
+    ),
+    key: '1',
+  },
+  {
+    type: 'divider',
+  },
+  {
+    label: '3rd menu item（disabled）',
+    key: '3',
+    disabled: true,
+  },
+];
+
+const App: React.FC = () => (
+  <Dropdown menu={{ items }}>
+    <a onClick={(e) => e.preventDefault()}>
+      <Space>
+        Hover me
+        <DownOutlined />
+      </Space>
+    </a>
+  </Dropdown>
+);
+
+export default App;

packages/meta/src/dropdown/demo/loading.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+添加 `loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
+
+## en-US
+
+A loading indicator can be added to a button by setting the `loading` property on the `Dropdown.Button`.

packages/meta/src/dropdown/demo/loading.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { DownOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Dropdown, Space } from 'antd';
+
+const items: MenuProps['items'] = [
+  {
+    label: 'Submit and continue',
+    key: '1',
+  },
+];
+
+const App: React.FC = () => {
+  const [loadings, setLoadings] = useState<boolean[]>([]);
+
+  const enterLoading = (index: number) => {
+    setLoadings((state) => {
+      const newLoadings = [...state];
+      newLoadings[index] = true;
+      return newLoadings;
+    });
+
+    setTimeout(() => {
+      setLoadings((state) => {
+        const newLoadings = [...state];
+        newLoadings[index] = false;
+        return newLoadings;
+      });
+    }, 6000);
+  };
+
+  return (
+    <Space direction="vertical">
+      <Dropdown.Button type="primary" loading menu={{ items }}>
+        Submit
+      </Dropdown.Button>
+      <Dropdown.Button type="primary" size="small" loading menu={{ items }}>
+        Submit
+      </Dropdown.Button>
+      <Dropdown.Button
+        type="primary"
+        loading={loadings[0]}
+        menu={{ items }}
+        onClick={() => enterLoading(0)}
+      >
+        Submit
+      </Dropdown.Button>
+      <Dropdown.Button
+        icon={<DownOutlined />}
+        loading={loadings[1]}
+        menu={{ items }}
+        onClick={() => enterLoading(1)}
+      >
+        Submit
+      </Dropdown.Button>
+    </Space>
+  );
+};
+
+export default App;

packages/meta/src/dropdown/demo/menu-full.md

@@ -0,0 +1,11 @@
+## zh-CN
+
+此演示需要注意去掉 Reset 样式后查看 Dropdown 内 Menu 的样式是否正常。
+
+[#19150](https://github.com/ant-design/ant-design/pull/19150)
+
+## en-US
+
+This demo was created for debugging Menu styles inside Dropdown.
+
+[#19150](https://github.com/ant-design/ant-design/pull/19150)

packages/meta/src/dropdown/demo/menu-full.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { AppstoreOutlined, DownOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Dropdown, Space } from 'antd';
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+function getItem(
+  label: React.ReactNode,
+  key: React.Key,
+  icon?: React.ReactNode,
+  children?: MenuItem[],
+  type?: 'group',
+): MenuItem {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  } as MenuItem;
+}
+
+const items: MenuItem[] = [
+  getItem(
+    'Item Group',
+    'group',
+    null,
+    [getItem('Option 0', '01'), getItem('Option 0', '02')],
+    'group',
+  ),
+  getItem('Navigation One', 'sub1', <MailOutlined />, [
+    getItem('Item 1', 'g1', null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'),
+    getItem('Item 2', 'g2', null, [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'),
+  ]),
+  getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
+    getItem('Option 5', '5'),
+    getItem('Option 6', '6'),
+    getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
+  ]),
+  getItem('Navigation Three', 'sub4', <SettingOutlined />, [
+    getItem('Option 9', '9'),
+    getItem('Option 10', '10'),
+    getItem('Option 11', '11'),
+    getItem('Option 12', '12'),
+  ]),
+  // Not crash
+  null as any,
+];
+
+const App: React.FC = () => (
+  <Dropdown
+    menu={{
+      items,
+      selectedKeys: ['1'],
+      openKeys: ['sub1'],
+    }}
+  >
+    <a onClick={(e) => e.preventDefault()}>
+      <Space>
+        Hover to check menu style
+        <DownOutlined />
+      </Space>
+    </a>
+  </Dropdown>
+);
+
+export default App;

packages/meta/src/dropdown/demo/overlay-open.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+默认是点击关闭菜单，可以关闭此功能。
+
+## en-US
+
+The default is to close the menu when you click on menu items, this feature can be turned off.

packages/meta/src/dropdown/demo/overlay-open.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { DownOutlined } from '@ant-design/icons';
+import type { DropdownProps, MenuProps } from 'antd';
+import { Dropdown, Space } from 'antd';
+
+const App: React.FC = () => {
+  const [open, setOpen] = useState(false);
+
+  const handleMenuClick: MenuProps['onClick'] = (e) => {
+    if (e.key === '3') {
+      setOpen(false);
+    }
+  };
+
+  const handleOpenChange: DropdownProps['onOpenChange'] = (nextOpen, info) => {
+    if (info.source === 'trigger' || nextOpen) {
+      setOpen(nextOpen);
+    }
+  };
+
+  const items: MenuProps['items'] = [
+    {
+      label: 'Clicking me will not close the menu.',
+      key: '1',
+    },
+    {
+      label: 'Clicking me will not close the menu also.',
+      key: '2',
+    },
+    {
+      label: 'Clicking me will close the menu.',
+      key: '3',
+    },
+  ];
+
+  return (
+    <Dropdown
+      menu={{
+        items,
+        onClick: handleMenuClick,
+      }}
+      onOpenChange={handleOpenChange}
+      open={open}
+    >
+      <a onClick={(e) => e.preventDefault()}>
+        <Space>
+          Hover me
+          <DownOutlined />
+        </Space>
+      </a>
+    </Dropdown>
+  );
+};
+
+export default App;

packages/meta/src/dropdown/demo/placement.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+支持 6 个弹出位置。
+
+## en-US
+
+Support 6 placements.

packages/meta/src/dropdown/demo/placement.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { MenuProps } from 'antd';
+import { Button, Dropdown, Space } from 'antd';
+
+const items: MenuProps['items'] = [
+  {
+    key: '1',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
+        1st menu item
+      </a>
+    ),
+  },
+  {
+    key: '2',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
+        2nd menu item
+      </a>
+    ),
+  },
+  {
+    key: '3',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
+        3rd menu item
+      </a>
+    ),
+  },
+];
+
+const App: React.FC = () => (
+  <Space direction="vertical">
+    <Space wrap>
+      <Dropdown menu={{ items }} placement="bottomLeft">
+        <Button>bottomLeft</Button>
+      </Dropdown>
+      <Dropdown menu={{ items }} placement="bottom">
+        <Button>bottom</Button>
+      </Dropdown>
+      <Dropdown menu={{ items }} placement="bottomRight">
+        <Button>bottomRight</Button>
+      </Dropdown>
+    </Space>
+    <Space wrap>
+      <Dropdown menu={{ items }} placement="topLeft">
+        <Button>topLeft</Button>
+      </Dropdown>
+      <Dropdown menu={{ items }} placement="top">
+        <Button>top</Button>
+      </Dropdown>
+      <Dropdown menu={{ items }} placement="topRight">
+        <Button>topRight</Button>
+      </Dropdown>
+    </Space>
+  </Space>
+);
+
+export default App;

packages/meta/src/dropdown/demo/render-panel.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+调试用组件，请勿直接使用。
+
+## en-US
+
+Debug usage. Do not use in your production.