feat: add dropdownProps to navigation (#2555)

* feat: add dropdownProps to navigation
* feat: rename dropdownProps to subDropdownProps

content/navigation/navigation/index-en-US.md

@@ -735,6 +735,7 @@ function NavApp (props = {}) {
 | defaultIsCollapsed  | Whether the default is put away, valid only when `mode = "vertical"`                                                                                                                       | boolean                                                                                                                                                                  | false     |
 | defaultOpenKeys     | Initially open sub navigation `itemKey` array, valid only `mode = "vertical"`and the sidebar is in an expanded state                                                                       | string[]                                                                                                                                                                 | []        |
 | defaultSelectedKeys | Originally selected navigation item `itemKey` array                                                                                                                                        | string[]                                                                                                                                                                 | []        |
+| subDropdownProps | Control the dropdown parameters in nav.sub under `horizontal` or `vertical && isCollapsed` (v >= 2.69) | DropdownProps | |
 | expandIcon          | Default Arrow Icon             | ReactNode                                                       |         |
 | footer              | The bottom area configure objects or elements, see [Nav.Footer](#Nav.Footer)                                                                                                               | object\|ReactNode                                                                                                                                                        |           |
 | getPopupContainer   | Dropdown's getPopupContainer config of vertical collapsed Nav or horizontal Nav. >= v2.24                                                                                                  | Function                                                                                                                                                                 |           |
@@ -779,6 +780,7 @@ function NavApp (props = {}) {
 | Properties    | Description                                                                                                       | Type                | Default  |
 | ------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------- | -------- |
 | disabled      | Disabled state                                                                                                    | boolean             | false    |
+| dropdownProps | Popup layer `dropdown` parameter configuration (v >= 2.69)                        | DropdownProps     |          |  |
 | dropdownStyle | Style of dropdown layer                                                                                           | CSSProperties       |          |
 | icon          | Navigation project icon name or component                                                                         | ReactNode           |          |
 | indent        | If the icon is empty, keep its space or not. Only effective for first level navigation                            | boolean             | false    |

content/navigation/navigation/index.md

@@ -739,6 +739,7 @@ function NavApp (props = {}) {
 | defaultIsCollapsed  | 默认是否处于收起状态，仅 `mode = "vertical"` 时有效                                                                                         | boolean                                                                                                                                                               | false      |
 | defaultOpenKeys     | 初始打开的子导航 `itemKey` 数组，仅 `mode = "vertical"` 且侧边栏处于展开状态时有效                                                          | string[]                                                                                                                                                              | []         |
 | defaultSelectedKeys | 初始选中的导航项 `itemKey` 数组                                                                                                             | string[]                                                                                                                                                              | []         |
+| subDropdownProps | 用于控制 `horizontal` 或者 `vertical && isCollapsed` 下 nav.sub 中的 dropdown 参数(v >= 2.69)                                                                                                             | DropdownProps                                                                                                                                                              |          |
 | expandIcon          | 默认下拉箭头Icon, v>=2.36                                                                                                                   | ReactNode                                                                                                                                                             |            |
 | footer              | 底部区域配置对象或元素，详见 [Nav.Footer](#Nav.Footer)                                                                                      | object\|ReactNode                                                                                                                                                     |            |
 | getPopupContainer   | 垂直 Nav 折叠或 水平 Nav中 Dropdown 的 getPopupContainer 配置，可指定弹出层容器 这会改变浮层 DOM 树位置，但不会改变视图渲染位置。 v>=2.24.0 | Function                                                                                                                                                              |            |
@@ -784,6 +785,7 @@ function NavApp (props = {}) {
 | 属性          | 描述                                                          | 类型              | 默认值   |
 | ------------- | ------------------------------------------------------------- | ----------------- | -------- |
 | disabled      | 是否禁用                                                      | boolean           | false    |  |
+| dropdownProps | 弹出层 `dropdown` 参数配置 (v >= 2.69)                        | DropdownProps     |          |  |
 | dropdownStyle | 弹出层的 style                                                | CSSProperties     |          |  |
 | icon          | 导航项目图标                                                  | ReactNode         |          |
 | indent        | 如果 icon 为空，是否保留其占位，仅对一级导航生效              | boolean           | false    |

packages/semi-ui/navigation/SubNav.tsx

@@ -30,7 +30,9 @@ export interface SubNavProps extends BaseProps {
     onMouseEnter?: React.MouseEventHandler<HTMLLIElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLLIElement>;
     text?: React.ReactNode;
-    expandIcon?: React.ReactNode
+    expandIcon?: React.ReactNode;
+    dropdownProps?: DropdownProps;
+    subDropdownProps?: DropdownProps
 }
 
 export interface SubNavState {
@@ -293,7 +295,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
 
     wrapDropdown(elem: React.ReactNode = '') {
         let _elem: React.ReactNode = elem;
-        const { children, dropdownStyle, disabled } = this.props;
+        const { children, dropdownStyle, disabled, subDropdownProps, dropdownProps: userDropdownProps } = this.props;
 
         const { mode, isInSubNav, isCollapsed, subNavCloseDelay, subNavOpenDelay, prefixCls, getPopupContainer } = this.context;
 
@@ -333,6 +335,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
                     mouseEnterDelay={subNavOpenDelay}
                     mouseLeaveDelay={subNavCloseDelay}
                     onVisibleChange={this.handleDropdownVisible}
+                    {...(userDropdownProps ? userDropdownProps : subDropdownProps)}
                     {...dropdownProps}
                 >
                     {_elem}

packages/semi-ui/navigation/_story/navigation.stories.jsx

@@ -119,7 +119,7 @@ class NavApp extends React.Component {
           </Nav.Sub>
           <Nav.Item key={3} itemKey={'3'} text={'Option 3'} icon={<IconCamera />} />
           <Nav.Item key={4} itemKey={'4'} text={'Option 4'} icon={<IconArticle />} />
-          <Nav.Sub text={'Group 5'} stayWhenClick={true} icon={<IconFolder />}>
+          <Nav.Sub text={'Group 5'} stayWhenClick={true} icon={<IconFolder />} dropdownProps={{ spacing: 20 }}>
             {['5-1', '5-2'].map(k => (
               <Nav.Item key={k} itemKey={String(k)} text={'Option ' + k} />
             ))}
@@ -173,6 +173,10 @@ export const Horizontal = () => (
         },
       ]}
       onSelect={key => console.log(key)}
+      subDropdownProps={{
+        clickToHide: true,
+        spacing: 12
+      }}
     />
   </div>
 );

packages/semi-ui/navigation/index.tsx

@@ -15,6 +15,7 @@ import NavContext from './nav-context';
 import LocaleConsumer from '../locale/localeConsumer';
 import '@douyinfe/semi-foundation/navigation/navigation.scss';
 import { getDefaultPropsFromGlobalConfig } from "../_utils";
+import { DropdownProps } from '../dropdown';
 
 export type { CollapseButtonProps } from './CollapseButton';
 export type { NavFooterProps } from './Footer';
@@ -43,10 +44,11 @@ export type NavItems = (string | SubNavPropsWithItems | NavItemPropsWithItems)[]
 export interface NavProps extends BaseProps {
     bodyStyle?: React.CSSProperties;
     children?: React.ReactNode;
-    
+
     defaultIsCollapsed?: boolean;
     defaultOpenKeys?: React.ReactText[];
     defaultSelectedKeys?: React.ReactText[];
+    subDropdownProps?: DropdownProps;
     expandIcon?: React.ReactNode;
     footer?: React.ReactNode | NavFooterProps;
     header?: React.ReactNode | NavHeaderProps;
@@ -70,7 +72,7 @@ export interface NavProps extends BaseProps {
     onDeselect?: (data?: any) => void;
     onOpenChange?: (data: { itemKey?: ItemKey; openKeys?: ItemKey[]; domEvent?: MouseEvent; isOpen?: boolean }) => void;
     onSelect?: (data: OnSelectedData) => void;
-    renderWrapper?: ({ itemElement, isSubNav, isInSubNav, props }: { itemElement: ReactElement;isInSubNav: boolean; isSubNav: boolean; props: NavItemProps | SubNavProps }) => ReactNode
+    renderWrapper?: ({ itemElement, isSubNav, isInSubNav, props }: { itemElement: ReactElement; isInSubNav: boolean; isSubNav: boolean; props: NavItemProps | SubNavProps }) => ReactNode
 }
 
 export interface NavState {
@@ -270,7 +272,7 @@ class Nav extends BaseComponent<NavProps, NavState> {
      * @returns {JSX.Element}
      */
     renderItems(items: (SubNavPropsWithItems | NavItemPropsWithItems)[] = [], level = 0) {
-        const { expandIcon } = this.props;
+        const { expandIcon, subDropdownProps } = this.props;
         const finalDom = (
             <>
                 {items.map((item, idx) => {
@@ -281,6 +283,7 @@ class Nav extends BaseComponent<NavProps, NavState> {
                                 {...item as SubNavPropsWithItems}
                                 level={level}
                                 expandIcon={expandIcon}
+                                subDropdownProps={subDropdownProps}
                             >
                                 {this.renderItems(item.items as (SubNavPropsWithItems | NavItemPropsWithItems)[], level + 1)}
                             </SubNav>