@douyinfe/semi-ui 2.36.0-alpha.0 → 2.36.0-beta.0

package/lib/cjs/form/field.d.ts

@@ -86,7 +86,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     preventScroll?: boolean;
     showRestTagsPopover?: boolean;
     restTagsPopoverProps?: import("../popover").PopoverProps;
-} & Pick<import("../tooltip").TooltipProps, "motion" | "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "motion" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
 declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
 declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
 declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;

package/lib/cjs/input/index.d.ts

@@ -84,7 +84,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
         showClear: PropTypes.Requireable<boolean>;
         hideSuffix: PropTypes.Requireable<boolean>;
         placeholder: PropTypes.Requireable<any>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;

package/lib/cjs/input/inputGroup.d.ts

@@ -21,7 +21,7 @@ export default class inputGroup extends BaseComponent<InputGroupProps, InputGrou
     static propTypes: {
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         style: PropTypes.Requireable<object>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/input/textarea.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ValidateStatus } from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/cjs/input/textarea.css';
-declare type OmitTextareaAttr = 'onChange' | 'onInput' | 'prefix' | 'size' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyPress' | 'onKeyUp';
+declare type OmitTextareaAttr = 'onChange' | 'onInput' | 'prefix' | 'size' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyPress' | 'onKeyUp' | 'onResize';
 export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, OmitTextareaAttr> {
     autosize?: boolean;
     borderless?: boolean;

package/lib/cjs/modal/confirm.d.ts

@@ -140,12 +140,12 @@ export declare function withWarning(props: ModalReactProps): {
     type: "warning";
 };
 export declare function withError(props: ModalReactProps): {
-    children?: React.ReactNode;
-    motion?: boolean;
     title?: React.ReactNode;
+    children?: React.ReactNode;
     size?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").Size;
     style?: React.CSSProperties;
     className?: string;
+    motion?: boolean;
     getPopupContainer?: () => HTMLElement;
     footer?: React.ReactNode;
     header?: React.ReactNode;
@@ -201,24 +201,34 @@ export declare function withError(props: ModalReactProps): {
         onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
         onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
         'aria-label'?: string;
-        onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
-        onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
         title?: string;
         name?: string;
         value?: string | number | readonly string[];
+        onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
         form?: string;
         slot?: string;
         hidden?: boolean;
         color?: string;
+        onChange?: React.FormEventHandler<HTMLButtonElement>;
+        defaultChecked?: boolean;
         defaultValue?: string | number | readonly string[];
+        suppressContentEditableWarning?: boolean;
+        suppressHydrationWarning?: boolean;
         accessKey?: string;
+        autoFocus?: boolean;
+        formAction?: string;
+        formEncType?: string;
+        formMethod?: string;
+        formNoValidate?: boolean;
+        formTarget?: string;
         dir?: string;
         draggable?: boolean | "false" | "true";
         lang?: string;
-        translate?: "yes" | "no";
+        translate?: "no" | "yes";
         prefix?: string;
         contentEditable?: "inherit" | (boolean | "false" | "true");
-        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal";
+        inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal";
         tabIndex?: number;
         role?: React.AriaRole;
         onMouseOut?: React.MouseEventHandler<HTMLButtonElement>;
@@ -230,9 +240,6 @@ export declare function withError(props: ModalReactProps): {
         'aria-haspopup'?: boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree";
         'aria-controls'?: string;
         'aria-describedby'?: string;
-        defaultChecked?: boolean;
-        suppressContentEditableWarning?: boolean;
-        suppressHydrationWarning?: boolean;
         contextMenu?: string;
         placeholder?: string;
         spellCheck?: boolean | "false" | "true";
@@ -267,7 +274,7 @@ export declare function withError(props: ModalReactProps): {
         'aria-current'?: boolean | "time" | "page" | "false" | "true" | "location" | "step" | "date";
         'aria-details'?: string;
         'aria-disabled'?: boolean | "false" | "true";
-        'aria-dropeffect'?: "none" | "link" | "copy" | "move" | "execute" | "popup";
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup";
         'aria-errormessage'?: string;
         'aria-flowto'?: string;
         'aria-grabbed'?: boolean | "false" | "true";
@@ -316,7 +323,6 @@ export declare function withError(props: ModalReactProps): {
         onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLButtonElement>;
         onFocusCapture?: React.FocusEventHandler<HTMLButtonElement>;
         onBlurCapture?: React.FocusEventHandler<HTMLButtonElement>;
-        onChange?: React.FormEventHandler<HTMLButtonElement>;
         onChangeCapture?: React.FormEventHandler<HTMLButtonElement>;
         onBeforeInput?: React.FormEventHandler<HTMLButtonElement>;
         onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement>;
@@ -451,12 +457,6 @@ export declare function withError(props: ModalReactProps): {
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement>;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement>;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement>;
-        autoFocus?: boolean;
-        formAction?: string;
-        formEncType?: string;
-        formMethod?: string;
-        formNoValidate?: boolean;
-        formTarget?: string;
     };
 };
 export declare function withConfirm(props: ModalReactProps): {

package/lib/cjs/navigation/Footer.d.ts

@@ -6,6 +6,7 @@ import { BaseProps } from '../_base/baseComponent';
 export interface NavFooterProps extends BaseProps {
     collapseButton?: React.ReactNode;
     collapseText?: (collapsed?: boolean) => React.ReactNode;
+    onClick?: (event: React.MouseEvent) => void;
 }
 export default class NavFooter extends PureComponent<NavFooterProps> {
     static contextType: React.Context<NavContextType>;
@@ -15,9 +16,11 @@ export default class NavFooter extends PureComponent<NavFooterProps> {
         className: PropTypes.Requireable<string>;
         collapseButton: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         collapseText: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         collapseButton: boolean;
+        onClick: (...args: any[]) => void;
     };
     context: NavContextType;
     static elementType: string;

package/lib/cjs/navigation/Footer.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -19,12 +21,12 @@ require("@douyinfe/semi-foundation/lib/cjs/navigation/navigation.css");
 
 var _navContext = _interopRequireDefault(require("./nav-context"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 class NavFooter extends _react.PureComponent {
   constructor() {
     super(...arguments);
@@ -59,7 +61,8 @@ class NavFooter extends _react.PureComponent {
     const {
       style,
       className,
-      collapseButton
+      collapseButton,
+      onClick
     } = this.props;
     let {
       children
@@ -76,10 +79,15 @@ class NavFooter extends _react.PureComponent {
     const wrapCls = (0, _classnames.default)(className, `${_constants.cssClasses.PREFIX}-footer`, {
       [`${_constants.cssClasses.PREFIX}-footer-collapsed`]: isCollapsed
     });
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: wrapCls,
-      style: style
-    }, children);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      _react.default.createElement("div", {
+        className: wrapCls,
+        style: style,
+        onClick: onClick
+      }, children)
+    );
   }
 
 }
@@ -91,9 +99,11 @@ NavFooter.propTypes = {
   style: _propTypes.default.object,
   className: _propTypes.default.string,
   collapseButton: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.bool]),
-  collapseText: _propTypes.default.func
+  collapseText: _propTypes.default.func,
+  onClick: _propTypes.default.func
 };
 NavFooter.defaultProps = {
-  collapseButton: false
+  collapseButton: false,
+  onClick: _noop2.default
 };
 NavFooter.elementType = "NavFooter";

package/lib/cjs/navigation/Item.d.ts

@@ -19,9 +19,6 @@ export interface NavItemProps extends ItemProps, BaseProps {
     onClick?(clickItems: SelectedData): void;
     onMouseEnter?: React.MouseEventHandler<HTMLLIElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLLIElement>;
-    selected?: boolean;
-    mode?: string;
-    isInSubNav?: boolean;
 }
 export interface SelectedData extends SelectedItemProps<NavItemProps> {
     text?: React.ReactNode;
@@ -31,7 +28,6 @@ export interface NavItemState {
 }
 export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
     static contextType: React.Context<NavContextType>;
-    static elementType: string;
     static propTypes: {
         text: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         itemKey: PropTypes.Requireable<NonNullable<string | number>>;

package/lib/cjs/navigation/Item.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
-
 var _times2 = _interopRequireDefault(require("lodash/times"));
 
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
@@ -123,28 +121,21 @@ class NavItem extends _baseComponent.default {
       notifyMouseLeave: function () {
         return _this.props.onMouseLeave(...arguments);
       },
-      getIsCollapsed: () => this.props.isCollapsed || Boolean(this.context && this.context.isCollapsed),
-      getSelected: () => this.props.selected || Boolean(this.context && this.context.selectedKeys && this.context.selectedKeys.includes(this.props.itemKey)),
-      getIsOpen: () => Boolean(this.context && this.context.openKeys && this.context.openKeys.includes(this.props.itemKey)),
-      getIsInSubNav: () => this.props.isInSubNav || Boolean(this.context && this.context.isInSubNav),
-      getMode: () => {
-        var _a, _b;
-
-        return (_a = this.props.mode) !== null && _a !== void 0 ? _a : (_b = this.context) === null || _b === void 0 ? void 0 : _b.mode;
-      }
+      getIsCollapsed: () => this.props.isCollapsed || Boolean(this.context && this.context.isCollapsed) || false,
+      getSelected: () => Boolean(this.context && this.context.selectedKeys && this.context.selectedKeys.includes(this.props.itemKey)),
+      getIsOpen: () => Boolean(this.context && this.context.openKeys && this.context.openKeys.includes(this.props.itemKey))
     });
   }
 
   renderIcon(icon, pos) {
     let isToggleIcon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     let key = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-    const mode = this.adapter.getMode();
 
     if (this.props.isSubNav) {
       return null;
     }
 
-    if (!icon && mode === _constants.strings.MODE_HORIZONTAL) {
+    if (!icon && this.context.mode === _constants.strings.MODE_HORIZONTAL) {
       return null;
     }
 
@@ -167,8 +158,6 @@ class NavItem extends _baseComponent.default {
   }
 
   render() {
-    var _a;
-
     const {
       text,
       children,
@@ -184,17 +173,16 @@ class NavItem extends _baseComponent.default {
       linkOptions,
       disabled,
       level = 0,
-      tabIndex,
-      mode: modeInProps
+      tabIndex
     } = this.props;
     const {
+      mode,
+      isInSubNav,
       prefixCls,
       limitIndent
     } = this.context;
     const isCollapsed = this.adapter.getIsCollapsed();
     const selected = this.adapter.getSelected();
-    const isInSubNav = this.adapter.getIsInSubNav();
-    const mode = this.adapter.getMode();
     let itemChildren = null;
 
     if (!(0, _isNullOrUndefined.default)(children)) {
@@ -242,20 +230,14 @@ class NavItem extends _baseComponent.default {
         onKeyDown: this.handleKeyPress
       }, itemChildren);
     } else {
-      // isFirstLayer 用于决定 semi-navigation-first-layers（仅在 c2中使用) 是否生效
-      // 当 this.props.isInSubNav 存在是，则由 this.props.isInSubNav 决定
-      // 否则由 this.context?.mode 决定，因为第一层节点无context
-      const isFirstLayer = !(0, _isUndefined2.default)(this.props.isInSubNav) ? !this.props.isInSubNav : (0, _isUndefined2.default)((_a = this.context) === null || _a === void 0 ? void 0 : _a.mode); // Items are divided into normal and sub-wrap
-
+      // Items are divided into normal and sub-wrap
       const popoverItemCls = (0, _classnames.default)(`${className || `${clsPrefix}-normal`}`, {
         [clsPrefix]: true,
         [`${clsPrefix}-sub`]: isSubNav,
         [`${clsPrefix}-selected`]: selected && !isSubNav,
         [`${clsPrefix}-collapsed`]: isCollapsed,
         [`${clsPrefix}-disabled`]: disabled,
-        [`${clsPrefix}-has-link`]: typeof link === 'string',
-        [`${_constants.cssClasses.PREFIX}-first-layer`]: isFirstLayer,
-        [`${clsPrefix}-horizontal`]: modeInProps === _constants.strings.MODE_HORIZONTAL
+        [`${clsPrefix}-has-link`]: typeof link === 'string'
       });
       const ariaProps = {
         'aria-disabled': disabled
@@ -335,5 +317,4 @@ NavItem.defaultProps = {
   onMouseLeave: _noop2.default,
   disabled: false,
   tabIndex: 0
-};
-NavItem.elementType = 'Nav.Item';
+};

package/lib/cjs/navigation/SubNav.d.ts

@@ -4,10 +4,6 @@ import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/cjs/navigation/navigation.css';
 import SubNavFoundation, { SubNavAdapter } from '@douyinfe/semi-foundation/lib/cjs/navigation/subNavFoundation';
 import { NavContextType } from './nav-context';
-export interface ToggleIcon {
-    open?: string;
-    closed?: string;
-}
 export interface SubNavProps extends BaseProps {
     disabled?: boolean;
     dropdownStyle?: React.CSSProperties;
@@ -21,15 +17,12 @@ export interface SubNavProps extends BaseProps {
     onMouseEnter?: React.MouseEventHandler<HTMLLIElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLLIElement>;
     text?: React.ReactNode;
-    toggleIcon?: ToggleIcon;
-    active?: boolean;
-    mode?: string;
+    expandIcon?: React.ReactNode;
 }
 export interface SubNavState {
     isHovered: boolean;
 }
 export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
-    static elementType: string;
     static contextType: React.Context<NavContextType>;
     static propTypes: {
         /**
@@ -56,10 +49,6 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
          * Nested child elements
          */
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * The icon name of the right control switch (on and off status)
-         */
-        toggleIcon: PropTypes.Requireable<any>;
         style: PropTypes.Requireable<object>;
         /**
          * Icon name on the left
@@ -73,7 +62,6 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
         disabled: PropTypes.Requireable<boolean>;
         level: PropTypes.Requireable<number>;
-        active: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         level: number;
@@ -81,12 +69,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         isCollapsed: boolean;
         isOpen: boolean;
         maxHeight: number;
-        toggleIcon: {
-            open: JSX.Element;
-            closed: JSX.Element;
-        };
         disabled: boolean;
-        active: boolean;
     };
     titleRef: React.RefObject<HTMLDivElement>;
     itemRef: React.RefObject<HTMLLIElement>;

package/lib/cjs/navigation/SubNav.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
 
 var _times2 = _interopRequireDefault(require("lodash/times"));
@@ -131,29 +129,16 @@ class SubNav extends _baseComponent.default {
 
         return _this._invokeContextFunc('onClick', ...args);
       },
-      getIsSelected: itemKey => this.props.active || Boolean(!(0, _isNullOrUndefined.default)(itemKey) && (0, _get2.default)(this.context, 'selectedKeys', []).includes(String(itemKey))),
-      getIsOpen: () => this.props.isOpen || Boolean(this.context && this.context.openKeys && this.context.openKeys.includes(String(this.props.itemKey))),
-      getIsCollapsed: () => {
-        var _a;
-
-        return this.props.isCollapsed || Boolean((_a = this.context) === null || _a === void 0 ? void 0 : _a.isCollapsed);
-      },
-      getMode: () => {
-        var _a, _b;
-
-        return (_a = this.props.mode) !== null && _a !== void 0 ? _a : (_b = this.context) === null || _b === void 0 ? void 0 : _b.mode;
-      }
+      getIsSelected: itemKey => Boolean(!(0, _isNullOrUndefined.default)(itemKey) && (0, _get2.default)(this.context, 'selectedKeys', []).includes(String(itemKey))),
+      getIsOpen: () => Boolean(this.context && this.context.openKeys && this.context.openKeys.includes(String(this.props.itemKey)))
     });
   }
 
   renderIcon(icon, pos, withTransition) {
     let isToggleIcon = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     let key = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-
-    var _a;
-
     const {
-      prefixCls = _constants.cssClasses.PREFIX
+      prefixCls
     } = this.context;
     let iconSize = 'large';
 
@@ -161,15 +146,14 @@ class SubNav extends _baseComponent.default {
       iconSize = 'default';
     }
 
-    const isOpen = this.adapter.getIsOpen();
     const className = (0, _classnames.default)(`${prefixCls}-item-icon`, {
-      [`${prefixCls}-item-icon-toggle-${(_a = this.context.toggleIconPosition) !== null && _a !== void 0 ? _a : 'right'}`]: isToggleIcon,
-      [`${prefixCls}-item-icon-info`]: !isToggleIcon,
-      [`${prefixCls}-icon-rotate-${isOpen ? "180" : "0"}-no-transition`]: !withTransition && isToggleIcon
+      [`${prefixCls}-item-icon-toggle-${this.context.toggleIconPosition}`]: isToggleIcon,
+      [`${prefixCls}-item-icon-info`]: !isToggleIcon
     });
+    const isOpen = this.adapter.getIsOpen();
     const iconElem = /*#__PURE__*/_react.default.isValidElement(icon) ? withTransition ? /*#__PURE__*/_react.default.createElement(_cssAnimation.default, {
       animationState: isOpen ? "enter" : "leave",
-      startClassName: `${prefixCls}-icon-rotate-${isOpen ? "180" : "0"}`
+      startClassName: `${_constants.cssClasses.PREFIX}-icon-rotate-${isOpen ? "180" : "0"}`
     }, _ref => {
       let {
         animationClassName
@@ -196,23 +180,21 @@ class SubNav extends _baseComponent.default {
       itemKey,
       indent,
       disabled,
-      level
+      level,
+      expandIcon
     } = this.props;
     const {
+      mode,
       isInSubNav,
-      prefixCls = _constants.cssClasses.PREFIX,
+      isCollapsed,
+      prefixCls,
       subNavMotion,
       limitIndent
     } = this.context;
-    const isFirstLayer = (0, _isUndefined2.default)(this.context.mode);
-    const mode = this.adapter.getMode();
     const isOpen = this.adapter.getIsOpen();
-    const isCollapsed = this.adapter.getIsCollapsed();
     const titleCls = (0, _classnames.default)(`${prefixCls}-sub-title`, {
       [`${prefixCls}-sub-title-selected`]: this.adapter.getIsSelected(itemKey),
-      [`${prefixCls}-sub-title-disabled`]: disabled,
-      [`${prefixCls}-first-layer`]: isFirstLayer,
-      [`${prefixCls}-sub-title-horizontal`]: mode === _constants.strings.MODE_HORIZONTAL
+      [`${prefixCls}-sub-title-disabled`]: disabled
     });
     let withTransition = false;
     let toggleIconType = '';
@@ -229,7 +211,7 @@ class SubNav extends _baseComponent.default {
           "aria-hidden": true
         });
       } else {
-        toggleIconType = /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, {
+        toggleIconType = expandIcon ? expandIcon : /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, {
           "aria-hidden": true
         }); // Horizontal mode does not require animation fix#1198
         // withTransition = true;
@@ -239,7 +221,7 @@ class SubNav extends _baseComponent.default {
         withTransition = true;
       }
 
-      toggleIconType = /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, {
+      toggleIconType = expandIcon ? expandIcon : /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, {
         "aria-hidden": true
       });
     }
@@ -253,7 +235,6 @@ class SubNav extends _baseComponent.default {
     }
 
     const isIconChevronRightShow = !isCollapsed && isInSubNav && mode === _constants.strings.MODE_HORIZONTAL || isCollapsed && isInSubNav;
-    const toggleIconPositionLeft = this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT;
 
     const titleDiv = /*#__PURE__*/_react.default.createElement("div", {
       role: "menuitem",
@@ -266,9 +247,9 @@ class SubNav extends _baseComponent.default {
       "aria-expanded": isOpen ? 'true' : 'false'
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: `${prefixCls}-item-inner`
-    }, placeholderIcons, toggleIconPositionLeft && this.renderIcon(toggleIconType, _constants.strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== _constants.strings.MODE_HORIZONTAL ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left') : null, /*#__PURE__*/_react.default.createElement("span", {
+    }, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, _constants.strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== _constants.strings.MODE_HORIZONTAL ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left') : null, /*#__PURE__*/_react.default.createElement("span", {
       className: `${prefixCls}-item-text`
-    }, text), !toggleIconPositionLeft && this.renderIcon(toggleIconType, _constants.strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
+    }, text), this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIconType, _constants.strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
 
     return titleDiv;
   }
@@ -279,12 +260,12 @@ class SubNav extends _baseComponent.default {
       maxHeight
     } = this.props;
     const {
+      isCollapsed,
+      mode,
       subNavMotion,
-      prefixCls = _constants.cssClasses.PREFIX
+      prefixCls
     } = this.context;
-    const isCollapsed = this.adapter.getIsCollapsed();
     const isOpen = this.adapter.getIsOpen();
-    const mode = this.adapter.getMode();
     const isHorizontal = mode === _constants.strings.MODE_HORIZONTAL;
     const subNavCls = (0, _classnames.default)(`${prefixCls}-sub`, {
       [`${prefixCls}-sub-open`]: isOpen,
@@ -315,14 +296,14 @@ class SubNav extends _baseComponent.default {
       disabled
     } = this.props;
     const {
+      mode,
       isInSubNav,
+      isCollapsed,
       subNavCloseDelay,
       subNavOpenDelay,
-      prefixCls = _constants.cssClasses.PREFIX,
+      prefixCls,
       getPopupContainer
     } = this.context;
-    const isCollapsed = this.adapter.getIsCollapsed();
-    const mode = this.adapter.getMode();
     const isOpen = this.adapter.getIsOpen();
     const openKeysIsControlled = this.adapter.getOpenKeysIsControlled();
     const subNavCls = (0, _classnames.default)({
@@ -367,10 +348,10 @@ class SubNav extends _baseComponent.default {
       text
     } = this.props;
     const {
-      prefixCls = _constants.cssClasses.PREFIX
+      mode,
+      isCollapsed,
+      prefixCls
     } = this.context;
-    const mode = this.adapter.getMode();
-    const isCollapsed = this.adapter.getIsCollapsed();
     let titleDiv = this.renderTitleDiv();
     const subUl = this.renderSubUl(); // When mode=horizontal, it is displayed in Dropdown
 
@@ -388,11 +369,9 @@ class SubNav extends _baseComponent.default {
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       disabled: disabled,
-      text: text,
-      mode: mode
+      text: text
     }, /*#__PURE__*/_react.default.createElement(_navContext.default.Provider, {
       value: Object.assign(Object.assign({}, this.context), {
-        mode: mode,
         isInSubNav: true
       })
     }, titleDiv, subUl));
@@ -432,14 +411,6 @@ SubNav.propTypes = {
    * Nested child elements
    */
   children: _propTypes.default.node,
-
-  /**
-   * The icon name of the right control switch (on and off status)
-   */
-  toggleIcon: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.shape({
-    open: _propTypes.default.string,
-    closed: _propTypes.default.string
-  })]),
   style: _propTypes.default.object,
 
   /**
@@ -455,8 +426,7 @@ SubNav.propTypes = {
   onMouseLeave: _propTypes.default.func,
   // Is it disabled
   disabled: _propTypes.default.bool,
-  level: _propTypes.default.number,
-  active: _propTypes.default.bool
+  level: _propTypes.default.number
 };
 SubNav.defaultProps = {
   level: 0,
@@ -464,15 +434,5 @@ SubNav.defaultProps = {
   isCollapsed: false,
   isOpen: false,
   maxHeight: _constants.numbers.DEFAULT_SUBNAV_MAX_HEIGHT,
-  toggleIcon: {
-    open: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronUp, {
-      "aria-hidden": true
-    }),
-    closed: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, {
-      "aria-hidden": true
-    })
-  },
-  disabled: false,
-  active: false
-};
-SubNav.elementType = 'Nav.Sub';
+  disabled: false
+};

package/lib/cjs/navigation/index.d.ts

@@ -11,7 +11,7 @@ export type { CollapseButtonProps } from './CollapseButton';
 export type { NavFooterProps } from './Footer';
 export type { NavHeaderProps } from './Header';
 export type { NavItemProps } from './Item';
-export type { ToggleIcon, SubNavProps } from './SubNav';
+export type { SubNavProps } from './SubNav';
 export declare type Mode = 'vertical' | 'horizontal';
 export interface OnSelectedData {
     itemKey: React.ReactText;
@@ -33,6 +33,7 @@ export interface NavProps extends BaseProps {
     defaultIsCollapsed?: boolean;
     defaultOpenKeys?: React.ReactText[];
     defaultSelectedKeys?: React.ReactText[];
+    expandIcon?: React.ReactNode;
     footer?: React.ReactNode | NavFooterProps;
     header?: React.ReactNode | NavHeaderProps;
     isCollapsed?: boolean;
@@ -86,9 +87,11 @@ declare class Nav extends BaseComponent<NavProps, NavState> {
     static Header: typeof Header;
     static Footer: typeof Footer;
     static propTypes: {
+        collapseIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         defaultOpenKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
         openKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
         defaultSelectedKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
+        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         selectedKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
         mode: PropTypes.Requireable<string>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;