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

package/lib/es/list/index.js

@@ -23,14 +23,14 @@ class List extends BaseComponent {
 
       if (emptyContent) {
         return /*#__PURE__*/React.createElement("div", {
-          className: "".concat(cssClasses.PREFIX, "-empty"),
+          className: `${cssClasses.PREFIX}-empty`,
           "x-semi-prop": "emptyContent"
         }, emptyContent);
       } else {
         return /*#__PURE__*/React.createElement(LocaleConsumer, {
           componentName: "List"
         }, locale => /*#__PURE__*/React.createElement("div", {
-          className: "".concat(cssClasses.PREFIX, "-empty")
+          className: `${cssClasses.PREFIX}-empty`
         }, locale.emptyText));
       }
     };
@@ -54,7 +54,7 @@ class List extends BaseComponent {
     }
 
     return /*#__PURE__*/React.createElement("ul", {
-      className: "".concat(prefixCls, "-items")
+      className: `${prefixCls}-items`
     }, childrenList ? childrenList : null, children);
   }
 
@@ -78,11 +78,11 @@ class List extends BaseComponent {
       children
     } = this.props;
     const wrapperCls = cls(prefixCls, className, {
-      ["".concat(prefixCls, "-flex")]: layout === 'horizontal',
-      ["".concat(prefixCls, "-").concat(size)]: size,
-      ["".concat(prefixCls, "-grid")]: grid,
-      ["".concat(prefixCls, "-split")]: split,
-      ["".concat(prefixCls, "-bordered")]: bordered
+      [`${prefixCls}-flex`]: layout === 'horizontal',
+      [`${prefixCls}-${size}`]: size,
+      [`${prefixCls}-grid`]: grid,
+      [`${prefixCls}-split`]: split,
+      [`${prefixCls}-bordered`]: bordered
     });
     let childrenList;
 
@@ -90,7 +90,7 @@ class List extends BaseComponent {
       childrenList = [];
       const items = renderItem ? dataSource.map((item, index) => renderItem(item, index)) : [];
       React.Children.forEach(items, (child, index) => {
-        const itemKey = child.key || "list-item-".concat(index);
+        const itemKey = child.key || `list-item-${index}`;
         childrenList.push( /*#__PURE__*/React.cloneElement(child, {
           key: itemKey
         }));
@@ -103,7 +103,7 @@ class List extends BaseComponent {
       className: wrapperCls,
       style: style
     }, header ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(cssClasses.PREFIX, "-header"),
+      className: `${cssClasses.PREFIX}-header`,
       "x-semi-prop": "header"
     }, header) : null, /*#__PURE__*/React.createElement(ListContext.Provider, {
       value: {
@@ -115,7 +115,7 @@ class List extends BaseComponent {
       spinning: loading,
       size: "large"
     }, this.wrapChildren(childrenList, children))), footer ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(cssClasses.PREFIX, "-footer"),
+      className: `${cssClasses.PREFIX}-footer`,
       "x-semi-prop": "footer"
     }, footer) : null, loadMore ? loadMore : null);
   }

package/lib/es/list/item.js

@@ -56,9 +56,9 @@ export default class ListItem extends PureComponent {
     } = this.context;
     const handleContextMenu = onRightClick ? onRightClick : contextOnRightClick;
     const handleClick = onClick ? onClick : contextOnClick;
-    const itemCls = cls("".concat(prefixCls, "-item"), className);
-    const bodyCls = cls("".concat(prefixCls, "-item-body"), {
-      ["".concat(prefixCls, "-item-body-").concat(align)]: align
+    const itemCls = cls(`${prefixCls}-item`, className);
+    const bodyCls = cls(`${prefixCls}-item-body`, {
+      [`${prefixCls}-item-body-${align}`]: align
     });
     let body;
 
@@ -66,9 +66,9 @@ export default class ListItem extends PureComponent {
       body = /*#__PURE__*/React.createElement("div", {
         className: bodyCls
       }, header ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-item-body-header")
+        className: `${prefixCls}-item-body-header`
       }, header) : null, main ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-item-body-main")
+        className: `${prefixCls}-item-body-main`
       }, main) : null);
     }
 
@@ -83,7 +83,7 @@ export default class ListItem extends PureComponent {
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
     }, body ? body : null, children, extra ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-item-extra")
+      className: `${prefixCls}-item-extra`
     }, extra) : null);
 
     if (this.context && contextGrid) {

package/lib/es/modal/ConfirmModal.js

@@ -69,20 +69,20 @@ const ConfirmModal = props => {
       setVisible(false);
     }
   }, [onCancel]);
-  const confirmCls = "".concat(cssClasses.DIALOG, "-confirm");
+  const confirmCls = `${cssClasses.DIALOG}-confirm`;
   const wrapperCls = cls(className, confirmCls, {
-    ["".concat(confirmCls, "-rtl")]: direction === 'rtl'
+    [`${confirmCls}-rtl`]: direction === 'rtl'
   });
-  const typeCls = cls("".concat(cssClasses.DIALOG, "-").concat(type));
+  const typeCls = cls(`${cssClasses.DIALOG}-${type}`);
   const iconNode = isSemiIcon(icon) ? /*#__PURE__*/React.cloneElement(icon, {
-    className: "".concat(confirmCls, "-icon ").concat(typeCls, "-icon"),
+    className: `${confirmCls}-icon ${typeCls}-icon`,
     size: 'extra-large'
   }) : icon;
   const titleNode = title == null ? null : /*#__PURE__*/React.createElement("span", {
-    className: "".concat(confirmCls, "-title-text")
+    className: `${confirmCls}-title-text`
   }, title);
-  const contentCls = cls("".concat(confirmCls, "-content"), {
-    ["".concat(confirmCls, "-content-withIcon")]: props.icon
+  const contentCls = cls(`${confirmCls}-content`, {
+    [`${confirmCls}-content-withIcon`]: props.icon
   });
   return /*#__PURE__*/React.createElement(Modal, Object.assign({
     className: wrapperCls,

package/lib/es/modal/Modal.js

@@ -125,7 +125,7 @@ class Modal extends BaseComponent {
       }
 
       const classList = cls(className, {
-        ["".concat(cssClasses.DIALOG, "-displayNone")]: keepDOM && this.state.displayNone
+        [`${cssClasses.DIALOG}-displayNone`]: keepDOM && this.state.displayNone
       });
       const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered) || this.props.motion && !this.state.displayNone
       /* When there is animation, we use displayNone to judge whether animation is ended and judge whether to unmount content */
@@ -141,7 +141,7 @@ class Modal extends BaseComponent {
       }, /*#__PURE__*/React.createElement(CSSAnimation, {
         motion: this.props.motion,
         animationState: visible ? 'enter' : 'leave',
-        startClassName: visible ? "".concat(cssClasses.DIALOG, "-content-animate-show") : "".concat(cssClasses.DIALOG, "-content-animate-hide"),
+        startClassName: visible ? `${cssClasses.DIALOG}-content-animate-show` : `${cssClasses.DIALOG}-content-animate-hide`,
         onAnimationEnd: () => {
           this.updateState();
         }
@@ -153,7 +153,7 @@ class Modal extends BaseComponent {
         return /*#__PURE__*/React.createElement(CSSAnimation, {
           motion: this.props.motion,
           animationState: visible ? 'enter' : 'leave',
-          startClassName: visible ? "".concat(cssClasses.DIALOG, "-mask-animate-show") : "".concat(cssClasses.DIALOG, "-mask-animate-hide"),
+          startClassName: visible ? `${cssClasses.DIALOG}-mask-animate-show` : `${cssClasses.DIALOG}-mask-animate-hide`,
           onAnimationEnd: () => {
             this.updateState();
           }
@@ -202,7 +202,7 @@ class Modal extends BaseComponent {
 
         if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = 'hidden';
-          document.body.style.width = "calc(".concat(this.originBodyWidth || '100%', " - ").concat(this.scrollBarWidth, "px)");
+          document.body.style.width = `calc(${this.originBodyWidth || '100%'} - ${this.scrollBarWidth}px)`;
         }
       },
       enabledBodyScroll: () => {

package/lib/es/modal/ModalContent.js

@@ -64,7 +64,7 @@ export default class ModalContent extends BaseComponent {
       } = props;
 
       if (mask) {
-        const className = cls("".concat(cssClasses.DIALOG, "-mask"), {// [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
+        const className = cls(`${cssClasses.DIALOG}-mask`, {// [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
         });
         return /*#__PURE__*/React.createElement("div", Object.assign({
           key: "mask"
@@ -90,7 +90,7 @@ export default class ModalContent extends BaseComponent {
         });
         closer = /*#__PURE__*/React.createElement(Button, {
           "aria-label": "close",
-          className: "".concat(cssClasses.DIALOG, "-close"),
+          className: `${cssClasses.DIALOG}-close`,
           key: "close-btn",
           onClick: this.close,
           type: "tertiary",
@@ -108,7 +108,7 @@ export default class ModalContent extends BaseComponent {
         icon
       } = this.props;
       return icon ? /*#__PURE__*/React.createElement("span", {
-        className: "".concat(cssClasses.DIALOG, "-icon-wrapper"),
+        className: `${cssClasses.DIALOG}-icon-wrapper`,
         "x-semi-prop": "icon"
       }, icon) : null;
     };
@@ -124,11 +124,11 @@ export default class ModalContent extends BaseComponent {
       const closer = this.renderCloseBtn();
       const icon = this.renderIcon();
       return title === null || title === undefined ? null : /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cssClasses.DIALOG, "-header")
+        className: `${cssClasses.DIALOG}-header`
       }, icon, /*#__PURE__*/React.createElement(Typography.Title, {
         heading: 5,
-        className: "".concat(cssClasses.DIALOG, "-title"),
-        id: "".concat(cssClasses.DIALOG, "-title"),
+        className: `${cssClasses.DIALOG}-title`,
+        id: `${cssClasses.DIALOG}-title`,
         "x-semi-prop": "title"
       }, title), closer);
     };
@@ -139,19 +139,19 @@ export default class ModalContent extends BaseComponent {
         children,
         title
       } = this.props;
-      const bodyCls = cls("".concat(cssClasses.DIALOG, "-body"), {
-        ["".concat(cssClasses.DIALOG, "-withIcon")]: this.props.icon
+      const bodyCls = cls(`${cssClasses.DIALOG}-body`, {
+        [`${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.createElement("div", {
         className: bodyCls,
-        id: "".concat(cssClasses.DIALOG, "-body"),
+        id: `${cssClasses.DIALOG}-body`,
         style: bodyStyle,
         "x-semi-prop": "children"
       }, children) : /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cssClasses.DIALOG, "-body-wrapper")
+        className: `${cssClasses.DIALOG}-body-wrapper`
       }, icon, /*#__PURE__*/React.createElement("div", {
         className: bodyCls,
         style: bodyStyle,
@@ -163,9 +163,9 @@ export default class ModalContent extends BaseComponent {
       const props = __rest(this.props, []);
 
       const style = {};
-      const digCls = cls("".concat(cssClasses.DIALOG), {
-        ["".concat(cssClasses.DIALOG, "-centered")]: props.centered,
-        ["".concat(cssClasses.DIALOG, "-").concat(props.size)]: props.size
+      const digCls = cls(`${cssClasses.DIALOG}`, {
+        [`${cssClasses.DIALOG}-centered`]: props.centered,
+        [`${cssClasses.DIALOG}-${props.size}`]: props.size
       });
 
       if (props.width) {
@@ -185,7 +185,7 @@ export default class ModalContent extends BaseComponent {
       const body = this.renderBody();
       const header = this.renderHeader();
       const footer = props.footer ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cssClasses.DIALOG, "-footer"),
+        className: `${cssClasses.DIALOG}-footer`,
         "x-semi-prop": "footer"
       }, props.footer) : null;
       const dialogElement =
@@ -201,11 +201,11 @@ export default class ModalContent extends BaseComponent {
         role: "dialog",
         ref: this.modalDialogRef,
         "aria-modal": "true",
-        "aria-labelledby": "".concat(cssClasses.DIALOG, "-title"),
-        "aria-describedby": "".concat(cssClasses.DIALOG, "-body"),
+        "aria-labelledby": `${cssClasses.DIALOG}-title`,
+        "aria-describedby": `${cssClasses.DIALOG}-body`,
         onAnimationEnd: props.onAnimationEnd,
-        className: cls(["".concat(cssClasses.DIALOG, "-content"), props.contentClassName, {
-          ["".concat(cssClasses.DIALOG, "-content-fullScreen")]: props.isFullScreen
+        className: cls([`${cssClasses.DIALOG}-content`, props.contentClassName, {
+          [`${cssClasses.DIALOG}-content-fullScreen`]: props.isFullScreen
         }])
       }, header, body, footer)); // return props.visible ? dialogElement : null;
 
@@ -217,7 +217,7 @@ export default class ModalContent extends BaseComponent {
       prevFocusElement: FocusTrapHandle.getActiveElement()
     };
     this.foundation = new ModalContentFoundation(this.adapter);
-    this.dialogId = "dialog-".concat(uuid++);
+    this.dialogId = `dialog-${uuid++}`;
     this.modalDialogRef = /*#__PURE__*/React.createRef();
   }
 
@@ -328,9 +328,9 @@ export default class ModalContent extends BaseComponent {
       direction
     } = this.context;
     const classList = cls(className, {
-      ["".concat(cssClasses.DIALOG, "-popup")]: getPopupContainer && !maskFixed,
-      ["".concat(cssClasses.DIALOG, "-fixed")]: maskFixed,
-      ["".concat(cssClasses.DIALOG, "-rtl")]: direction === 'rtl'
+      [`${cssClasses.DIALOG}-popup`]: getPopupContainer && !maskFixed,
+      [`${cssClasses.DIALOG}-fixed`]: maskFixed,
+      [`${cssClasses.DIALOG}-rtl`]: direction === 'rtl'
     });
     const containerContext = getContainerContext();
     const elem = /*#__PURE__*/React.createElement("div", {
@@ -338,8 +338,8 @@ export default class ModalContent extends BaseComponent {
     }, this.getMaskElement(), /*#__PURE__*/React.createElement("div", Object.assign({
       role: "none",
       className: cls({
-        ["".concat(cssClasses.DIALOG, "-wrap")]: true,
-        ["".concat(cssClasses.DIALOG, "-wrap-center")]: this.props.centered
+        [`${cssClasses.DIALOG}-wrap`]: true,
+        [`${cssClasses.DIALOG}-wrap-center`]: this.props.centered
       }),
       onClick: maskClosable ? this.onMaskClick : null,
       onMouseUp: maskClosable ? this.onMaskMouseUp : null

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

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

package/lib/es/navigation/CollapseButton.js

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

package/lib/es/navigation/Footer.js

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

package/lib/es/navigation/Header.js

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

package/lib/es/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/es/navigation/Item.js

@@ -1,3 +1,4 @@
+import _isUndefined from "lodash/isUndefined";
 import _times from "lodash/times";
 import _noop from "lodash/noop";
 
@@ -15,7 +16,7 @@ import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/navigation
 import Tooltip from '../tooltip';
 import NavContext from './nav-context';
 import Dropdown from '../dropdown';
-const clsPrefix = "".concat(cssClasses.PREFIX, "-item");
+const clsPrefix = `${cssClasses.PREFIX}-item`;
 export default class NavItem extends BaseComponent {
   constructor(props) {
     super(props);
@@ -97,21 +98,28 @@ export default class NavItem extends BaseComponent {
       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 === strings.MODE_HORIZONTAL) {
+    if (!icon && mode === strings.MODE_HORIZONTAL) {
       return null;
     }
 
@@ -121,9 +129,9 @@ export default class NavItem extends BaseComponent {
       iconSize = 'default';
     }
 
-    const className = cls("".concat(clsPrefix, "-icon"), {
-      ["".concat(clsPrefix, "-icon-toggle-").concat(this.context.toggleIconPosition)]: isToggleIcon,
-      ["".concat(clsPrefix, "-icon-info")]: !isToggleIcon
+    const className = cls(`${clsPrefix}-icon`, {
+      [`${clsPrefix}-icon-toggle-${this.context.toggleIconPosition}`]: isToggleIcon,
+      [`${clsPrefix}-icon-info`]: !isToggleIcon
     });
     return /*#__PURE__*/React.createElement("i", {
       className: className,
@@ -149,16 +157,19 @@ export default class NavItem extends BaseComponent {
       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 (!isNullOrUndefined(children)) {
@@ -172,13 +183,13 @@ export default class NavItem extends BaseComponent {
       }
 
       itemChildren = /*#__PURE__*/React.createElement(React.Fragment, null, placeholderIcons, this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'), icon || indent || isInSubNav ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, 'key-position-left') : null, !isNullOrUndefined(text) ? /*#__PURE__*/React.createElement("span", {
-        className: "".concat(cssClasses.PREFIX, "-item-text")
+        className: `${cssClasses.PREFIX}-item-text`
       }, text) : '', this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'));
     }
 
     if (typeof link === 'string') {
       itemChildren = /*#__PURE__*/React.createElement("a", Object.assign({
-        className: "".concat(prefixCls, "-item-link"),
+        className: `${prefixCls}-item-link`,
         href: link,
         tabIndex: -1
       }, linkOptions), itemChildren);
@@ -189,10 +200,10 @@ export default class NavItem extends BaseComponent {
     if (isInSubNav && (isCollapsed || mode === strings.MODE_HORIZONTAL)) {
       const popoverItemCls = cls({
         [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.createElement(Dropdown.Item, {
         selected: selected,
@@ -207,13 +218,17 @@ export default class NavItem extends BaseComponent {
       }, itemChildren);
     } else {
       // Items are divided into normal and sub-wrap
-      const popoverItemCls = cls("".concat(className || "".concat(clsPrefix, "-normal")), {
+      const isFirstLayer = !_isUndefined(isInSubNavInProps) && !isInSubNavInProps || _isUndefined(isInSubNavInProps) && _isUndefined(isInSubNavInContext);
+
+      const popoverItemCls = cls(`${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',
+        [`${cssClasses.PREFIX}-first-layer`]: isFirstLayer,
+        [`${clsPrefix}-horizontal`]: modeInProps === strings.MODE_HORIZONTAL
       });
       const ariaProps = {
         'aria-disabled': disabled
@@ -291,4 +306,5 @@ NavItem.defaultProps = {
   onMouseLeave: _noop,
   disabled: false,
   tabIndex: 0
-};
+};
+NavItem.elementType = 'Nav.Item';

package/lib/es/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>;