@douyinfe/semi-ui 2.27.1-alpha.0 → 2.27.1-alpha.2

package/lib/cjs/modal/ModalContent.js

@@ -86,7 +86,7 @@ class ModalContent extends _baseComponent.default {
       } = props;
 
       if (mask) {
-        const className = (0, _classnames.default)("".concat(_constants.cssClasses.DIALOG, "-mask"), {// [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
+        const className = (0, _classnames.default)(`${_constants.cssClasses.DIALOG}-mask`, {// [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
         });
         return /*#__PURE__*/_react.default.createElement("div", Object.assign({
           key: "mask"
@@ -113,7 +113,7 @@ class ModalContent extends _baseComponent.default {
 
         closer = /*#__PURE__*/_react.default.createElement(_iconButton.default, {
           "aria-label": "close",
-          className: "".concat(_constants.cssClasses.DIALOG, "-close"),
+          className: `${_constants.cssClasses.DIALOG}-close`,
           key: "close-btn",
           onClick: this.close,
           type: "tertiary",
@@ -131,7 +131,7 @@ class ModalContent extends _baseComponent.default {
         icon
       } = this.props;
       return icon ? /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(_constants.cssClasses.DIALOG, "-icon-wrapper"),
+        className: `${_constants.cssClasses.DIALOG}-icon-wrapper`,
         "x-semi-prop": "icon"
       }, icon) : null;
     };
@@ -147,11 +147,11 @@ class ModalContent extends _baseComponent.default {
       const closer = this.renderCloseBtn();
       const icon = this.renderIcon();
       return title === null || title === undefined ? null : /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(_constants.cssClasses.DIALOG, "-header")
+        className: `${_constants.cssClasses.DIALOG}-header`
       }, icon, /*#__PURE__*/_react.default.createElement(_typography.default.Title, {
         heading: 5,
-        className: "".concat(_constants.cssClasses.DIALOG, "-title"),
-        id: "".concat(_constants.cssClasses.DIALOG, "-title"),
+        className: `${_constants.cssClasses.DIALOG}-title`,
+        id: `${_constants.cssClasses.DIALOG}-title`,
         "x-semi-prop": "title"
       }, title), closer);
     };
@@ -162,19 +162,19 @@ class ModalContent extends _baseComponent.default {
         children,
         title
       } = this.props;
-      const bodyCls = (0, _classnames.default)("".concat(_constants.cssClasses.DIALOG, "-body"), {
-        ["".concat(_constants.cssClasses.DIALOG, "-withIcon")]: this.props.icon
+      const bodyCls = (0, _classnames.default)(`${_constants.cssClasses.DIALOG}-body`, {
+        [`${_constants.cssClasses.DIALOG}-withIcon`]: this.props.icon
       });
       const closer = this.renderCloseBtn();
       const icon = this.renderIcon();
       const hasHeader = title !== null && title !== undefined || 'header' in this.props;
       return hasHeader ? /*#__PURE__*/_react.default.createElement("div", {
         className: bodyCls,
-        id: "".concat(_constants.cssClasses.DIALOG, "-body"),
+        id: `${_constants.cssClasses.DIALOG}-body`,
         style: bodyStyle,
         "x-semi-prop": "children"
       }, children) : /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(_constants.cssClasses.DIALOG, "-body-wrapper")
+        className: `${_constants.cssClasses.DIALOG}-body-wrapper`
       }, icon, /*#__PURE__*/_react.default.createElement("div", {
         className: bodyCls,
         style: bodyStyle,
@@ -186,9 +186,9 @@ class ModalContent extends _baseComponent.default {
       const props = __rest(this.props, []);
 
       const style = {};
-      const digCls = (0, _classnames.default)("".concat(_constants.cssClasses.DIALOG), {
-        ["".concat(_constants.cssClasses.DIALOG, "-centered")]: props.centered,
-        ["".concat(_constants.cssClasses.DIALOG, "-").concat(props.size)]: props.size
+      const digCls = (0, _classnames.default)(`${_constants.cssClasses.DIALOG}`, {
+        [`${_constants.cssClasses.DIALOG}-centered`]: props.centered,
+        [`${_constants.cssClasses.DIALOG}-${props.size}`]: props.size
       });
 
       if (props.width) {
@@ -208,7 +208,7 @@ class ModalContent extends _baseComponent.default {
       const body = this.renderBody();
       const header = this.renderHeader();
       const footer = props.footer ? /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(_constants.cssClasses.DIALOG, "-footer"),
+        className: `${_constants.cssClasses.DIALOG}-footer`,
         "x-semi-prop": "footer"
       }, props.footer) : null;
 
@@ -225,11 +225,11 @@ class ModalContent extends _baseComponent.default {
         role: "dialog",
         ref: this.modalDialogRef,
         "aria-modal": "true",
-        "aria-labelledby": "".concat(_constants.cssClasses.DIALOG, "-title"),
-        "aria-describedby": "".concat(_constants.cssClasses.DIALOG, "-body"),
+        "aria-labelledby": `${_constants.cssClasses.DIALOG}-title`,
+        "aria-describedby": `${_constants.cssClasses.DIALOG}-body`,
         onAnimationEnd: props.onAnimationEnd,
-        className: (0, _classnames.default)(["".concat(_constants.cssClasses.DIALOG, "-content"), props.contentClassName, {
-          ["".concat(_constants.cssClasses.DIALOG, "-content-fullScreen")]: props.isFullScreen
+        className: (0, _classnames.default)([`${_constants.cssClasses.DIALOG}-content`, props.contentClassName, {
+          [`${_constants.cssClasses.DIALOG}-content-fullScreen`]: props.isFullScreen
         }])
       }, header, body, footer)); // return props.visible ? dialogElement : null;
 
@@ -242,7 +242,7 @@ class ModalContent extends _baseComponent.default {
       prevFocusElement: _FocusHandle.default.getActiveElement()
     };
     this.foundation = new _modalContentFoundation.default(this.adapter);
-    this.dialogId = "dialog-".concat(uuid++);
+    this.dialogId = `dialog-${uuid++}`;
     this.modalDialogRef = /*#__PURE__*/_react.default.createRef();
   }
 
@@ -353,9 +353,9 @@ class ModalContent extends _baseComponent.default {
       direction
     } = this.context;
     const classList = (0, _classnames.default)(className, {
-      ["".concat(_constants.cssClasses.DIALOG, "-popup")]: getPopupContainer && !maskFixed,
-      ["".concat(_constants.cssClasses.DIALOG, "-fixed")]: maskFixed,
-      ["".concat(_constants.cssClasses.DIALOG, "-rtl")]: direction === 'rtl'
+      [`${_constants.cssClasses.DIALOG}-popup`]: getPopupContainer && !maskFixed,
+      [`${_constants.cssClasses.DIALOG}-fixed`]: maskFixed,
+      [`${_constants.cssClasses.DIALOG}-rtl`]: direction === 'rtl'
     });
     const containerContext = getContainerContext();
 
@@ -364,8 +364,8 @@ class ModalContent extends _baseComponent.default {
     }, this.getMaskElement(), /*#__PURE__*/_react.default.createElement("div", Object.assign({
       role: "none",
       className: (0, _classnames.default)({
-        ["".concat(_constants.cssClasses.DIALOG, "-wrap")]: true,
-        ["".concat(_constants.cssClasses.DIALOG, "-wrap-center")]: this.props.centered
+        [`${_constants.cssClasses.DIALOG}-wrap`]: true,
+        [`${_constants.cssClasses.DIALOG}-wrap-center`]: this.props.centered
       }),
       onClick: maskClosable ? this.onMaskClick : null,
       onMouseUp: maskClosable ? this.onMaskMouseUp : null

package/lib/cjs/modal/useModal/index.js

@@ -41,7 +41,7 @@ function useModal() {
       let closeFunc;
 
       const modal = /*#__PURE__*/_react.default.createElement(_HookModal.default, {
-        key: "semi-modal-".concat(uuid),
+        key: `semi-modal-${uuid}`,
         config: withFunc(config),
         ref: modalRef,
         afterClose: () => {

package/lib/cjs/navigation/CollapseButton.js

@@ -45,7 +45,7 @@ function CollapseButton(_ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(prefixCls, "-collapse-btn")
+    className: `${prefixCls}-collapse-btn`
   }, isCollapsed ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: finalCollapseText,
     position: "right"

package/lib/cjs/navigation/Footer.js

@@ -73,8 +73,8 @@ class NavFooter extends _react.PureComponent {
       children = this.renderCollapseButton();
     }
 
-    const wrapCls = (0, _classnames.default)(className, "".concat(_constants.cssClasses.PREFIX, "-footer"), {
-      ["".concat(_constants.cssClasses.PREFIX, "-footer-collapsed")]: isCollapsed
+    const wrapCls = (0, _classnames.default)(className, `${_constants.cssClasses.PREFIX}-footer`, {
+      [`${_constants.cssClasses.PREFIX}-footer-collapsed`]: isCollapsed
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: wrapCls,

package/lib/cjs/navigation/Header.js

@@ -48,19 +48,19 @@ class NavHeader extends _react.PureComponent {
     const {
       isCollapsed
     } = this.context;
-    const wrapCls = (0, _classnames.default)(className, "".concat(_constants.cssClasses.PREFIX, "-header"), {
-      ["".concat(_constants.cssClasses.PREFIX, "-header-collapsed")]: isCollapsed
+    const wrapCls = (0, _classnames.default)(className, `${_constants.cssClasses.PREFIX}-header`, {
+      [`${_constants.cssClasses.PREFIX}-header-collapsed`]: isCollapsed
     });
 
     let wrappedChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, logo ? /*#__PURE__*/_react.default.createElement("i", {
-      className: "".concat(_constants.cssClasses.PREFIX, "-header-logo")
+      className: `${_constants.cssClasses.PREFIX}-header-logo`
     }, this.renderLogo(logo)) : null, !(0, _isNullOrUndefined.default)(text) && !isCollapsed ? /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(_constants.cssClasses.PREFIX, "-header-text")
+      className: `${_constants.cssClasses.PREFIX}-header-text`
     }, text) : null, children);
 
     if (typeof link === 'string') {
       wrappedChildren = /*#__PURE__*/_react.default.createElement("a", Object.assign({
-        className: "".concat(prefixCls, "-header-link"),
+        className: `${prefixCls}-header-link`,
         href: link
       }, linkOptions), wrappedChildren);
     }

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

@@ -19,6 +19,9 @@ 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;
@@ -28,6 +31,7 @@ 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,6 +5,8 @@ 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"));
@@ -36,7 +38,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable max-len */
 
 /* eslint-disable no-nested-ternary */
-const clsPrefix = "".concat(_constants.cssClasses.PREFIX, "-item");
+const clsPrefix = `${_constants.cssClasses.PREFIX}-item`;
 
 class NavItem extends _baseComponent.default {
   constructor(props) {
@@ -119,21 +121,28 @@ class NavItem extends _baseComponent.default {
       notifyMouseLeave: function () {
         return _this.props.onMouseLeave(...arguments);
       },
-      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))
+      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;
+      }
     });
   }
 
   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 && this.context.mode === _constants.strings.MODE_HORIZONTAL) {
+    if (!icon && mode === _constants.strings.MODE_HORIZONTAL) {
       return null;
     }
 
@@ -143,9 +152,9 @@ class NavItem extends _baseComponent.default {
       iconSize = 'default';
     }
 
-    const className = (0, _classnames.default)("".concat(clsPrefix, "-icon"), {
-      ["".concat(clsPrefix, "-icon-toggle-").concat(this.context.toggleIconPosition)]: isToggleIcon,
-      ["".concat(clsPrefix, "-icon-info")]: !isToggleIcon
+    const className = (0, _classnames.default)(`${clsPrefix}-icon`, {
+      [`${clsPrefix}-icon-toggle-${this.context.toggleIconPosition}`]: isToggleIcon,
+      [`${clsPrefix}-icon-info`]: !isToggleIcon
     });
     return /*#__PURE__*/_react.default.createElement("i", {
       className: className,
@@ -171,16 +180,19 @@ class NavItem extends _baseComponent.default {
       linkOptions,
       disabled,
       level = 0,
-      tabIndex
+      tabIndex,
+      isInSubNav: isInSubNavInProps,
+      mode: modeInProps
     } = this.props;
     const {
-      mode,
-      isInSubNav,
+      isInSubNav: isInSubNavInContext,
       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)) {
@@ -194,13 +206,13 @@ class NavItem extends _baseComponent.default {
       }
 
       itemChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'), icon || indent || isInSubNav ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT, false, 'key-position-left') : null, !(0, _isNullOrUndefined.default)(text) ? /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(_constants.cssClasses.PREFIX, "-item-text")
+        className: `${_constants.cssClasses.PREFIX}-item-text`
       }, text) : '', this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'));
     }
 
     if (typeof link === 'string') {
       itemChildren = /*#__PURE__*/_react.default.createElement("a", Object.assign({
-        className: "".concat(prefixCls, "-item-link"),
+        className: `${prefixCls}-item-link`,
         href: link,
         tabIndex: -1
       }, linkOptions), itemChildren);
@@ -211,10 +223,10 @@ class NavItem extends _baseComponent.default {
     if (isInSubNav && (isCollapsed || mode === _constants.strings.MODE_HORIZONTAL)) {
       const popoverItemCls = (0, _classnames.default)({
         [clsPrefix]: true,
-        ["".concat(clsPrefix, "-sub")]: isSubNav,
-        ["".concat(clsPrefix, "-selected")]: selected,
-        ["".concat(clsPrefix, "-collapsed")]: isCollapsed,
-        ["".concat(clsPrefix, "-disabled")]: disabled
+        [`${clsPrefix}-sub`]: isSubNav,
+        [`${clsPrefix}-selected`]: selected,
+        [`${clsPrefix}-collapsed`]: isCollapsed,
+        [`${clsPrefix}-disabled`]: disabled
       });
       itemDom = /*#__PURE__*/_react.default.createElement(_dropdown.default.Item, {
         selected: selected,
@@ -229,13 +241,16 @@ class NavItem extends _baseComponent.default {
       }, itemChildren);
     } else {
       // Items are divided into normal and sub-wrap
-      const popoverItemCls = (0, _classnames.default)("".concat(className || "".concat(clsPrefix, "-normal")), {
+      const isFirstLayer = !(0, _isUndefined2.default)(isInSubNavInProps) && !isInSubNavInProps || (0, _isUndefined2.default)(isInSubNavInProps) && (0, _isUndefined2.default)(isInSubNavInContext);
+      const popoverItemCls = (0, _classnames.default)(`${className || `${clsPrefix}-normal`}`, {
         [clsPrefix]: true,
-        ["".concat(clsPrefix, "-sub")]: isSubNav,
-        ["".concat(clsPrefix, "-selected")]: selected && !isSubNav,
-        ["".concat(clsPrefix, "-collapsed")]: isCollapsed,
-        ["".concat(clsPrefix, "-disabled")]: disabled,
-        ["".concat(clsPrefix, "-has-link")]: typeof link === 'string'
+        [`${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
       });
       const ariaProps = {
         'aria-disabled': disabled
@@ -315,4 +330,5 @@ NavItem.defaultProps = {
   onMouseLeave: _noop2.default,
   disabled: false,
   tabIndex: 0
-};
+};
+NavItem.elementType = 'Nav.Item';

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

@@ -22,12 +22,15 @@ export interface SubNavProps extends BaseProps {
     onMouseLeave?: React.MouseEventHandler<HTMLLIElement>;
     text?: React.ReactNode;
     toggleIcon?: ToggleIcon;
+    active?: boolean;
+    mode?: string;
 }
 export interface SubNavState {
     isHovered: boolean;
 }
 export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
     static contextType: React.Context<NavContextType>;
+    static elementType: string;
     static propTypes: {
         /**
          * Unique identification
@@ -70,6 +73,7 @@ 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;
@@ -82,6 +86,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
             closed: JSX.Element;
         };
         disabled: boolean;
+        active: boolean;
     };
     titleRef: React.RefObject<HTMLDivElement>;
     itemRef: React.RefObject<HTMLLIElement>;

package/lib/cjs/navigation/SubNav.js

@@ -129,16 +129,25 @@ class SubNav extends _baseComponent.default {
 
         return _this._invokeContextFunc('onClick', ...args);
       },
-      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)))
+      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: () => this.props.isCollapsed || Boolean(this.context && this.context.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;
+      }
     });
   }
 
   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
+      prefixCls = _constants.cssClasses.PREFIX
     } = this.context;
     let iconSize = 'large';
 
@@ -146,14 +155,15 @@ class SubNav extends _baseComponent.default {
       iconSize = 'default';
     }
 
-    const className = (0, _classnames.default)("".concat(prefixCls, "-item-icon"), {
-      ["".concat(prefixCls, "-item-icon-toggle-").concat(this.context.toggleIconPosition)]: isToggleIcon,
-      ["".concat(prefixCls, "-item-icon-info")]: !isToggleIcon
-    });
     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
+    });
     const iconElem = /*#__PURE__*/_react.default.isValidElement(icon) ? withTransition ? /*#__PURE__*/_react.default.createElement(_cssAnimation.default, {
       animationState: isOpen ? "enter" : "leave",
-      startClassName: "".concat(_constants.cssClasses.PREFIX, "-icon-rotate-").concat(isOpen ? "180" : "0")
+      startClassName: `${prefixCls}-icon-rotate-${isOpen ? "180" : "0"}`
     }, _ref => {
       let {
         animationClassName
@@ -183,17 +193,19 @@ class SubNav extends _baseComponent.default {
       level
     } = this.props;
     const {
-      mode,
       isInSubNav,
-      isCollapsed,
-      prefixCls,
+      prefixCls = _constants.cssClasses.PREFIX,
       subNavMotion,
       limitIndent
     } = this.context;
+    const mode = this.adapter.getMode();
     const isOpen = this.adapter.getIsOpen();
-    const titleCls = (0, _classnames.default)("".concat(prefixCls, "-sub-title"), {
-      ["".concat(prefixCls, "-sub-title-selected")]: this.adapter.getIsSelected(itemKey),
-      ["".concat(prefixCls, "-sub-title-disabled")]: disabled
+    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`]: !isInSubNav,
+      [`${prefixCls}-sub-title-horizontal`]: mode === _constants.strings.MODE_HORIZONTAL
     });
     let withTransition = false;
     let toggleIconType = '';
@@ -234,6 +246,7 @@ 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",
@@ -245,10 +258,10 @@ class SubNav extends _baseComponent.default {
       onKeyPress: this.handleKeyPress,
       "aria-expanded": isOpen ? 'true' : 'false'
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-item-inner")
-    }, 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: "".concat(prefixCls, "-item-text")
-    }, text), this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIconType, _constants.strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
+      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", {
+      className: `${prefixCls}-item-text`
+    }, text), !toggleIconPositionLeft && this.renderIcon(toggleIconType, _constants.strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
 
     return titleDiv;
   }
@@ -259,16 +272,16 @@ class SubNav extends _baseComponent.default {
       maxHeight
     } = this.props;
     const {
-      isCollapsed,
-      mode,
       subNavMotion,
-      prefixCls
+      prefixCls = _constants.cssClasses.PREFIX
     } = 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)("".concat(prefixCls, "-sub"), {
-      ["".concat(prefixCls, "-sub-open")]: isOpen,
-      ["".concat(prefixCls, "-sub-popover")]: isCollapsed || isHorizontal
+    const subNavCls = (0, _classnames.default)(`${prefixCls}-sub`, {
+      [`${prefixCls}-sub-open`]: isOpen,
+      [`${prefixCls}-sub-popover`]: isCollapsed || isHorizontal
     });
 
     const ulWithMotion = /*#__PURE__*/_react.default.createElement(_collapsible.default, {
@@ -295,18 +308,18 @@ class SubNav extends _baseComponent.default {
       disabled
     } = this.props;
     const {
-      mode,
       isInSubNav,
-      isCollapsed,
       subNavCloseDelay,
       subNavOpenDelay,
-      prefixCls,
+      prefixCls = _constants.cssClasses.PREFIX,
       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)({
-      ["".concat(prefixCls, "-popover")]: isCollapsed
+      [`${prefixCls}-popover`]: isCollapsed
     });
     const dropdownProps = {
       trigger: 'hover',
@@ -347,10 +360,10 @@ class SubNav extends _baseComponent.default {
       text
     } = this.props;
     const {
-      mode,
-      isCollapsed,
-      prefixCls
+      prefixCls = _constants.cssClasses.PREFIX
     } = 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
 
@@ -364,13 +377,15 @@ class SubNav extends _baseComponent.default {
       itemKey: itemKey,
       forwardRef: this.setItemRef,
       isCollapsed: isCollapsed,
-      className: "".concat(prefixCls, "-sub-wrap"),
+      className: `${prefixCls}-sub-wrap`,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       disabled: disabled,
-      text: text
+      text: text,
+      mode: mode
     }, /*#__PURE__*/_react.default.createElement(_navContext.default.Provider, {
       value: Object.assign(Object.assign({}, this.context), {
+        mode: mode,
         isInSubNav: true
       })
     }, titleDiv, subUl));
@@ -433,7 +448,8 @@ SubNav.propTypes = {
   onMouseLeave: _propTypes.default.func,
   // Is it disabled
   disabled: _propTypes.default.bool,
-  level: _propTypes.default.number
+  level: _propTypes.default.number,
+  active: _propTypes.default.bool
 };
 SubNav.defaultProps = {
   level: 0,
@@ -449,5 +465,7 @@ SubNav.defaultProps = {
       "aria-hidden": true
     })
   },
-  disabled: false
-};
+  disabled: false,
+  active: false
+};
+SubNav.elementType = 'Nav.Sub';

package/lib/cjs/navigation/index.js

@@ -301,12 +301,12 @@ class Nav extends _baseComponent.default {
     }
 
     const finalCls = (0, _classnames.default)(prefixCls, className, {
-      ["".concat(prefixCls, "-collapsed")]: isCollapsed,
-      ["".concat(prefixCls, "-horizontal")]: mode === 'horizontal',
-      ["".concat(prefixCls, "-vertical")]: mode === 'vertical'
+      [`${prefixCls}-collapsed`]: isCollapsed,
+      [`${prefixCls}-horizontal`]: mode === 'horizontal',
+      [`${prefixCls}-vertical`]: mode === 'vertical'
     });
-    const headerListOuterCls = (0, _classnames.default)("".concat(prefixCls, "-header-list-outer"), {
-      ["".concat(prefixCls, "-header-list-outer-collapsed")]: isCollapsed
+    const headerListOuterCls = (0, _classnames.default)(`${prefixCls}-header-list-outer`, {
+      [`${prefixCls}-header-list-outer-collapsed`]: isCollapsed
     });
 
     if (this.itemsChanged) {
@@ -351,16 +351,16 @@ class Nav extends _baseComponent.default {
       className: finalCls,
       style: finalStyle
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-inner")
+      className: `${prefixCls}-inner`
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: headerListOuterCls
     }, headers, /*#__PURE__*/_react.default.createElement("div", {
       style: bodyStyle,
-      className: "".concat(prefixCls, "-list-wrapper")
+      className: `${prefixCls}-list-wrapper`
     }, /*#__PURE__*/_react.default.createElement("ul", {
       role: "menu",
       "aria-orientation": mode,
-      className: "".concat(prefixCls, "-list")
+      className: `${prefixCls}-list`
     }, this.adapter.getCache('itemElems'), children))), footers))));
   }