@instructure/ui-top-nav-bar 8.33.1 → 8.33.2

package/lib/TopNavBar/TopNavBarItem/index.js

@@ -1,65 +1,39 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TopNavBarItem = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
-
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _console = require("@instructure/console");
-
 var _emotion = require("@instructure/emotion");
-
 var _IconArrowOpenDownSolid = require("@instructure/ui-icons/lib/IconArrowOpenDownSolid.js");
-
 var _IconArrowOpenUpSolid2 = require("@instructure/ui-icons/lib/IconArrowOpenUpSolid.js");
-
 var _Avatar = require("@instructure/ui-avatar/lib/Avatar");
-
 var _BaseButton = require("@instructure/ui-buttons/lib/BaseButton");
-
 var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
-
 var _Popover = require("@instructure/ui-popover/lib/Popover");
-
 var _Drilldown = require("@instructure/ui-drilldown/lib/Drilldown");
-
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
-
 var _TopNavBarContext = require("../TopNavBarContext");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 var _dec, _dec2, _dec3, _class, _class2, _IconArrowOpenUpSolid, _IconArrowOpenDownSol;
-
 const navbarStackingDefault = 10000;
 const submenuStacking = navbarStackingDefault + 1;
 const tooltipStacking = navbarStackingDefault + 2;
+
 /**
 ---
 parent: TopNavBar
@@ -68,42 +42,34 @@ id: TopNavBar.Item
 @module TopNavBarItem
 @tsProps
 **/
-
 let TopNavBarItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TopNavBarItem extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
     this._itemRef = null;
     this._tooltipContentId = void 0;
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
-
     this.handleItemRef = el => {
       const itemRef = this.props.itemRef;
       this._itemRef = el;
-
       if (typeof itemRef === 'function') {
         itemRef(el);
       }
     };
-
     this.handleKeyDown = e => {
       if (e.key === 'ArrowDown') {
         if (this.shouldRenderSubmenu && !this.state.isSubmenuOpen || this.shouldRenderPopover && !this.state.isPopoverOpen) {
           var _this$_itemRef;
-
           e.preventDefault();
           (_this$_itemRef = this._itemRef) === null || _this$_itemRef === void 0 ? void 0 : _this$_itemRef.click();
         }
       }
-
       if (e.key === 'Tab') {
         if (this.state.isPopoverOpen && !this.isCustomPopoverControlled) {
           this.setState({
@@ -112,274 +78,224 @@ let TopNavBarItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
         }
       }
     };
-
     this.handleMenuToggle = (event, args) => {
       this.setState({
         isSubmenuOpen: args.shown
       });
-
       if (typeof this.props.onSubmenuToggle === 'function') {
         this.props.onSubmenuToggle(event, args);
       }
     };
-
     this._tooltipContentId = props.deterministicId('TopNavBarItem-tooltip');
     this.state = {
       isSubmenuOpen: false,
       isPopoverOpen: false
     };
   }
-
   componentDidMount() {
     const _this$props = this.props,
-          makeStyles = _this$props.makeStyles,
-          customPopoverConfig = _this$props.customPopoverConfig;
+      makeStyles = _this$props.makeStyles,
+      customPopoverConfig = _this$props.customPopoverConfig;
     makeStyles === null || makeStyles === void 0 ? void 0 : makeStyles(this.makeStylesVariables);
-
     if (customPopoverConfig && this.isCustomPopoverControlled) {
       this.setState({
         isPopoverOpen: !!customPopoverConfig.isShowingContent
       });
     }
   }
-
   componentDidUpdate() {
     const _this$props2 = this.props,
-          makeStyles = _this$props2.makeStyles,
-          customPopoverConfig = _this$props2.customPopoverConfig;
+      makeStyles = _this$props2.makeStyles,
+      customPopoverConfig = _this$props2.customPopoverConfig;
     makeStyles === null || makeStyles === void 0 ? void 0 : makeStyles(this.makeStylesVariables);
-
     if (customPopoverConfig && this.isCustomPopoverControlled && customPopoverConfig.isShowingContent !== this.state.isPopoverOpen) {
       this.setState({
         isPopoverOpen: !!customPopoverConfig.isShowingContent
       });
     }
   }
-
   get makeStylesVariables() {
     const _this$context = this.context,
-          layout = _this$context.layout,
-          inverseColor = _this$context.inverseColor;
+      layout = _this$context.layout,
+      inverseColor = _this$context.inverseColor;
     return {
       layout,
       inverseColor
     };
   }
-
   get shouldRenderSubmenu() {
     const renderSubmenu = this.props.renderSubmenu;
     return !!renderSubmenu && (0, _matchComponentTypes.matchComponentTypes)(renderSubmenu, [_Drilldown.Drilldown]);
   }
-
   get shouldRenderPopover() {
     const _this$props3 = this.props,
-          id = _this$props3.id,
-          renderSubmenu = _this$props3.renderSubmenu,
-          customPopoverConfig = _this$props3.customPopoverConfig;
-
+      id = _this$props3.id,
+      renderSubmenu = _this$props3.renderSubmenu,
+      customPopoverConfig = _this$props3.customPopoverConfig;
     if (!customPopoverConfig) {
       return false;
     }
-
     if (!customPopoverConfig.children) {
       (0, _console.warn)(false, `Pass the content of the custom Popover as "customPopoverConfig.children" for the item with id: "${id}".`);
       return false;
     }
-
     if (customPopoverConfig && renderSubmenu) {
       (0, _console.warn)(false, `TopNavBar.Items are not allowed to have both the "renderSubmenu" and "customPopoverConfig" props. For submenus, pass a Drilldown component via the "renderSubmenu" prop, and only use "customPopoverConfig" for custom features. Item with id: "${id}" will ignore the "customPopoverConfig" prop.`);
       return false;
     }
-
     return true;
   }
-
   get isCustomPopoverControlled() {
     const customPopoverConfig = this.props.customPopoverConfig;
     return customPopoverConfig && typeof customPopoverConfig.isShowingContent !== 'undefined';
   }
-
   get hasOpenPopover() {
     return this.state.isSubmenuOpen || this.state.isPopoverOpen;
   }
-
   get isDefaultVariant() {
     return this.props.variant === 'default';
   }
-
   get isButtonVariant() {
     return this.props.variant === 'button';
   }
-
   get isIconVariant() {
     return this.props.variant === 'icon';
   }
-
   get isAvatarOnlyVariant() {
     return this.props.variant === 'avatar';
   }
-
   get hasAvatar() {
     const _this$props4 = this.props,
-          id = _this$props4.id,
-          renderIcon = _this$props4.renderIcon,
-          renderAvatar = _this$props4.renderAvatar,
-          variant = _this$props4.variant;
+      id = _this$props4.id,
+      renderIcon = _this$props4.renderIcon,
+      renderAvatar = _this$props4.renderAvatar,
+      variant = _this$props4.variant;
     const hasAvatar = !!renderAvatar;
-
     if (this.isAvatarOnlyVariant && !hasAvatar) {
       (0, _console.warn)(false, `The "renderAvatar" config is required for the 'variant="avatar"' type <TopNavBar.Item> components, but received none for the item with id "${id}".`);
       return false;
     }
-
     if (hasAvatar && (renderIcon || variant === 'icon')) {
       (0, _console.warn)(false, `<TopNavBar.Item> components with icons cannot display avatars, so the "renderAvatar" config prop will be ignored for item with id "${id}".`);
       return false;
     }
-
     return hasAvatar;
   }
-
   get submenuIcon() {
     var _this$props$styles;
-
     if (!(this.shouldRenderSubmenu || this.shouldRenderPopover) || !this.props.showSubmenuChevron) {
       return null;
     }
-
     return (0, _emotion.jsx)("span", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.submenuIcon
     }, this.shouldRenderSubmenu && this.state.isSubmenuOpen || this.shouldRenderPopover && this.state.isPopoverOpen ? _IconArrowOpenUpSolid || (_IconArrowOpenUpSolid = (0, _emotion.jsx)(_IconArrowOpenUpSolid2.IconArrowOpenUpSolid, null)) : _IconArrowOpenDownSol || (_IconArrowOpenDownSol = (0, _emotion.jsx)(_IconArrowOpenDownSolid.IconArrowOpenDownSolid, null)));
   }
-
   get buttonThemeOverride() {
     const styles = this.props.styles;
     const themeOverride = {};
-
     if (this.isDefaultVariant || this.hasAvatar) {
       themeOverride.mediumPaddingHorizontal = styles === null || styles === void 0 ? void 0 : styles.itemInlinePadding;
     }
-
     if (this.hasAvatar) {
       themeOverride.mediumPaddingTop = '0.125rem';
       themeOverride.mediumPaddingBottom = '0.125rem';
     }
-
     if (this.isAvatarOnlyVariant && !this.submenuIcon) {
       themeOverride.mediumPaddingHorizontal = '0';
       themeOverride.mediumPaddingTop = '0';
       themeOverride.mediumPaddingBottom = '0';
     }
-
     if (this.size === 'large') {
       // we need a custom 42x42 px icon here,
       // so that the focus ring won't be cut off
       themeOverride.largeHeight = '2.625rem';
       themeOverride.iconSizeLarge = '1.5rem';
     }
-
     return Object.keys(themeOverride).length > 0 ? themeOverride : void 0;
   }
-
   get colorProps() {
     let color = 'primary-inverse';
     let focusColor = 'inverse';
-
     if (this.context.inverseColor) {
       color = 'secondary';
       focusColor = 'info';
-
       if (this.isButtonVariant) {
         color = 'primary';
       }
     }
-
     return {
       color,
       focusColor
     };
   }
-
   get size() {
     return this.isIconVariant && this.context.layout === 'smallViewport' ? 'large' : 'medium';
   }
-
   get ariaProps() {
     let hasPopup;
     let expanded;
-
     if (this.shouldRenderSubmenu) {
       hasPopup = 'menu';
       expanded = this.state.isSubmenuOpen;
     }
-
     if (this.shouldRenderPopover) {
       hasPopup = 'true';
       expanded = this.state.isPopoverOpen;
     }
-
     return {
       'aria-haspopup': hasPopup,
       'aria-expanded': expanded
     };
   }
-
   get itemProps() {
     const _this$props5 = this.props,
-          id = _this$props5.id,
-          variant = _this$props5.variant,
-          hrefOriginal = _this$props5.href,
-          onClickOriginal = _this$props5.onClick,
-          onMouseOver = _this$props5.onMouseOver,
-          onMouseOut = _this$props5.onMouseOut,
-          onFocus = _this$props5.onFocus,
-          onBlur = _this$props5.onBlur,
-          onKeyDown = _this$props5.onKeyDown,
-          onKeyUp = _this$props5.onKeyUp,
-          renderSubmenu = _this$props5.renderSubmenu,
-          statusOriginal = _this$props5.status,
-          renderAvatar = _this$props5.renderAvatar,
-          renderIcon = _this$props5.renderIcon;
+      id = _this$props5.id,
+      variant = _this$props5.variant,
+      hrefOriginal = _this$props5.href,
+      onClickOriginal = _this$props5.onClick,
+      onMouseOver = _this$props5.onMouseOver,
+      onMouseOut = _this$props5.onMouseOut,
+      onFocus = _this$props5.onFocus,
+      onBlur = _this$props5.onBlur,
+      onKeyDown = _this$props5.onKeyDown,
+      onKeyUp = _this$props5.onKeyUp,
+      renderSubmenu = _this$props5.renderSubmenu,
+      statusOriginal = _this$props5.status,
+      renderAvatar = _this$props5.renderAvatar,
+      renderIcon = _this$props5.renderIcon;
     let href = hrefOriginal;
     let onClick = onClickOriginal;
     let status = statusOriginal;
-
     if (renderSubmenu) {
       if (href) {
         (0, _console.warn)(false, `TopNavBar.Items with submenus are not allowed to have 'href' property, but received href "${href}" for item with the id: "${id}".`);
         href = void 0;
       }
-
       if (onClick) {
         (0, _console.warn)(false, `TopNavBar.Items with submenus are not allowed to have 'onClick' property, but received onClick for item with the id: "${id}".Use the \`onSubmenuToggle\` prop instead. OnClick: ${onClick}`);
         onClick = void 0;
       }
     }
-
     if (status === 'active' && !this.isDefaultVariant) {
       (0, _console.warn)(false, `Only \`variant="default"\` <TopNavBar.Item> components can be set to active, but item with id "${id}" has variant: "${variant}".`);
       status = 'default';
     }
-
     if (this.hasAvatar) {
       if (!(renderAvatar !== null && renderAvatar !== void 0 && renderAvatar.avatarName)) {
         (0, _console.error)(false, `The "avatarName" prop is required for for <TopNavBar.Item> components with avatar, but the item with id "${id}" is missing it.`);
         return null;
       }
-
       if (status === 'active') {
         (0, _console.warn)(false, `<TopNavBar.Item> components with avatar cannot have "active" status, so the "active" status on the item with id "${id}" will be ignored.`);
         status = 'default';
       }
     }
-
     if (this.isIconVariant) {
       if (!renderIcon) {
         (0, _console.error)(false, `The "renderIcon" prop is required for the \`variant="icon"\` type <TopNavBar.Item> components, but the item with id "${id}" is missing it.`);
         return null;
       }
     }
-
     return {
       id,
       ...this.colorProps,
@@ -405,27 +321,21 @@ let TopNavBarItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
       }
     };
   }
-
   renderContent() {
     var _this$props$styles2;
-
     const _this$props6 = this.props,
-          children = _this$props6.children,
-          styles = _this$props6.styles;
+      children = _this$props6.children,
+      styles = _this$props6.styles;
     const itemProps = this.itemProps;
-
     if (!itemProps) {
       return null;
     }
-
     let content = children;
-
     if (this.isAvatarOnlyVariant) {
       content = this.renderAvatar();
     } else if (this.isIconVariant) {
       content = (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, content);
     }
-
     const button = (0, _emotion.jsx)(_BaseButton.BaseButton, Object.assign({}, itemProps, (0, _passthroughProps.passthroughProps)((0, _omitProps.omitProps)(this.props, _props.allowedProps))), this.isIconVariant && !this.submenuIcon ? content : (0, _emotion.jsx)("div", {
       css: styles === null || styles === void 0 ? void 0 : styles.content
     }, this.hasAvatar && !this.isAvatarOnlyVariant && (0, _emotion.jsx)("span", {
@@ -435,35 +345,29 @@ let TopNavBarItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
       css: styles === null || styles === void 0 ? void 0 : styles.container
     }, this.props.tooltip ? this.wrapButtonInTooltip(button, children) : button);
   }
-
   wrapButtonInTooltip(button, content) {
     const _this$props7 = this.props,
-          tooltip = _this$props7.tooltip,
-          styles = _this$props7.styles;
-
+      tooltip = _this$props7.tooltip,
+      styles = _this$props7.styles;
     if (!tooltip) {
       return button;
     }
-
     let tooltipProps = {
       placement: 'bottom',
       color: this.context.inverseColor ? 'primary' : 'primary-inverse'
     };
-
     if (typeof tooltip === 'string') {
       tooltipProps.renderTip = tooltip;
     } else {
-      tooltipProps = { ...tooltipProps,
+      tooltipProps = {
+        ...tooltipProps,
         ...tooltip
       };
     }
-
     const tipContent = (0, _callRenderProp.callRenderProp)(tooltipProps.renderTip);
-
     if (!tipContent) {
       return button;
     }
-
     const contentAndTooltipIdentical = tipContent === content;
     return (0, _emotion.jsx)(_emotion.InstUISettingsProvider, {
       theme: {
@@ -485,26 +389,22 @@ let TopNavBarItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
       'aria-describedby': this._tooltipContentId
     }))));
   }
-
   renderAvatar() {
     if (!this.hasAvatar) {
       return null;
     }
-
     const _this$props8 = this.props,
-          id = _this$props8.id,
-          children = _this$props8.children,
-          renderAvatar = _this$props8.renderAvatar;
+      id = _this$props8.id,
+      children = _this$props8.children,
+      renderAvatar = _this$props8.renderAvatar;
     const _ref = renderAvatar,
-          avatarName = _ref.avatarName,
-          avatarSrc = _ref.avatarSrc,
-          avatarAlt = _ref.avatarAlt;
+      avatarName = _ref.avatarName,
+      avatarSrc = _ref.avatarSrc,
+      avatarAlt = _ref.avatarAlt;
     const label = avatarAlt || (typeof children === 'string' ? children : void 0);
-
     if (!label) {
       (0, _console.warn)(false, `Please supply a label for the avatar with either the "renderAvatar.avatarAlt" or the "children" (as string) prop. It is needed for screen reader support, but missing on the item with the id: "${id}".`);
     }
-
     return avatarName ? (0, _emotion.jsx)(_Avatar.Avatar, {
       name: avatarName,
       src: avatarSrc,
@@ -512,28 +412,22 @@ let TopNavBarItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
       size: "small"
     }) : null;
   }
-
   renderDropdownMenu() {
     var _renderSubmenu$props, _renderSubmenu$props2, _renderSubmenu$props3;
-
     const _this$props9 = this.props,
-          id = _this$props9.id,
-          renderSubmenu = _this$props9.renderSubmenu,
-          status = _this$props9.status,
-          styles = _this$props9.styles;
-
+      id = _this$props9.id,
+      renderSubmenu = _this$props9.renderSubmenu,
+      status = _this$props9.status,
+      styles = _this$props9.styles;
     if (!renderSubmenu || !this.shouldRenderSubmenu) {
       return null;
     }
-
     if (typeof renderSubmenu.props.show !== 'undefined') {
       (0, _console.warn)(false, `TopNavBar.Item Drilldown submenus are controlled by the component. The "show" prop will be ignored on the submenu of the item with id: "${id}".`);
     }
-
     if (renderSubmenu.props.trigger) {
       (0, _console.warn)(false, `TopNavBar.Item submenus have the item itself as their trigger. The "trigger" prop will be ignored on the Drilldown submenu of item with id: "${id}".`);
     }
-
     return (0, _safeCloneElement.safeCloneElement)(renderSubmenu, {
       trigger: (0, _emotion.jsx)("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.submenuTriggerContainer
@@ -552,22 +446,19 @@ let TopNavBarItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
       })
     });
   }
-
   renderPopover() {
     const _this$props10 = this.props,
-          id = _this$props10.id,
-          customPopoverConfig = _this$props10.customPopoverConfig,
-          styles = _this$props10.styles;
-
+      id = _this$props10.id,
+      customPopoverConfig = _this$props10.customPopoverConfig,
+      styles = _this$props10.styles;
     if (!customPopoverConfig || !this.shouldRenderPopover) {
       return null;
-    } // @ts-expect-error throw a warning just in case they pass trigger
-
+    }
 
+    // @ts-expect-error throw a warning just in case they pass trigger
     if (customPopoverConfig.renderTrigger) {
       (0, _console.warn)(false, `TopNavBar.Item popovers have the item itself as their trigger. The "renderTrigger" prop will be ignored on the popover of item with id: "${id}".`);
     }
-
     const popoverProps = {
       // defaults:
       placement: 'bottom start',
@@ -603,11 +494,9 @@ let TopNavBarItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
     };
     return (0, _emotion.jsx)(_Popover.Popover, popoverProps, customPopoverConfig.children);
   }
-
   render() {
     const styles = this.props.styles;
     let content;
-
     if (this.shouldRenderPopover) {
       content = (0, _emotion.jsx)(_emotion.InstUISettingsProvider, {
         theme: {
@@ -633,13 +522,11 @@ let TopNavBarItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
     } else {
       content = this.renderContent();
     }
-
     return (0, _emotion.jsx)("div", {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarItem
     }, content);
   }
-
 }, _class2.displayName = "TopNavBarItem", _class2.componentId = 'TopNavBar.Item', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   status: 'default',
   variant: 'default',

package/lib/TopNavBar/TopNavBarItem/props.js

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.topNavBarItemTooltipPropType = exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _Children = require("@instructure/ui-prop-types/lib/Children.js");
-
 var _Drilldown = require("@instructure/ui-drilldown/lib/Drilldown");
-
 /*
  * The MIT License (MIT)
  *
@@ -36,6 +31,7 @@ var _Drilldown = require("@instructure/ui-drilldown/lib/Drilldown");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const topNavBarItemTooltipPropType = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
   renderTip: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
   color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
@@ -45,7 +41,6 @@ const topNavBarItemTooltipPropType = _propTypes.default.oneOfType([_propTypes.de
   onShowContent: _propTypes.default.func,
   onHideContent: _propTypes.default.func
 })]);
-
 exports.topNavBarItemTooltipPropType = topNavBarItemTooltipPropType;
 const propTypes = {
   id: _propTypes.default.string.isRequired,

package/lib/TopNavBar/TopNavBarItem/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -41,12 +40,12 @@ exports.default = void 0;
  */
 const generateStyle = (componentTheme, props, state) => {
   const status = props.status,
-        variant = props.variant,
-        renderSubmenu = props.renderSubmenu,
-        renderAvatar = props.renderAvatar,
-        customPopoverConfig = props.customPopoverConfig;
+    variant = props.variant,
+    renderSubmenu = props.renderSubmenu,
+    renderAvatar = props.renderAvatar,
+    customPopoverConfig = props.customPopoverConfig;
   const layout = state.layout,
-        inverseColor = state.inverseColor;
+    inverseColor = state.inverseColor;
   const isSmallViewport = layout === 'smallViewport';
   const isActive = renderAvatar ? false : status === 'active' && variant === 'default';
   const hasPopover = renderSubmenu || customPopoverConfig;
@@ -127,6 +126,5 @@ const generateStyle = (componentTheme, props, state) => {
     itemInlinePadding: componentTheme.itemInlinePadding
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;