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

package/es/TopNavBar/TopNavBarItem/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _dec3, _class, _class2, _IconArrowOpenUpSolid, _IconArrowOpenDownSol;
-
 /*
  * The MIT License (MIT)
  *
@@ -45,6 +44,7 @@ import { propTypes, allowedProps } from './props';
 const navbarStackingDefault = 10000;
 const submenuStacking = navbarStackingDefault + 1;
 const tooltipStacking = navbarStackingDefault + 2;
+
 /**
 ---
 parent: TopNavBar
@@ -53,42 +53,34 @@ id: TopNavBar.Item
 @module TopNavBarItem
 @tsProps
 **/
-
 let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TopNavBarItem extends 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({
@@ -97,274 +89,224 @@ let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
         }
       }
     };
-
     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 && matchComponentTypes(renderSubmenu, [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) {
       warn(false, `Pass the content of the custom Popover as "customPopoverConfig.children" for the item with id: "${id}".`);
       return false;
     }
-
     if (customPopoverConfig && renderSubmenu) {
       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) {
       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')) {
       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 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 = jsx(IconArrowOpenUpSolid, null)) : _IconArrowOpenDownSol || (_IconArrowOpenDownSol = jsx(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) {
         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) {
         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) {
       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)) {
         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') {
         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) {
         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,
@@ -390,27 +332,21 @@ let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
       }
     };
   }
-
   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 = jsx(ScreenReaderContent, null, content);
     }
-
     const button = jsx(BaseButton, Object.assign({}, itemProps, passthroughProps(omitProps(this.props, allowedProps))), this.isIconVariant && !this.submenuIcon ? content : jsx("div", {
       css: styles === null || styles === void 0 ? void 0 : styles.content
     }, this.hasAvatar && !this.isAvatarOnlyVariant && jsx("span", {
@@ -420,35 +356,29 @@ let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
       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 = callRenderProp(tooltipProps.renderTip);
-
     if (!tipContent) {
       return button;
     }
-
     const contentAndTooltipIdentical = tipContent === content;
     return jsx(InstUISettingsProvider, {
       theme: {
@@ -470,26 +400,22 @@ let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
       '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) {
       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 ? jsx(Avatar, {
       name: avatarName,
       src: avatarSrc,
@@ -497,28 +423,22 @@ let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
       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') {
       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) {
       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 safeCloneElement(renderSubmenu, {
       trigger: jsx("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.submenuTriggerContainer
@@ -537,22 +457,19 @@ let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
       })
     });
   }
-
   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) {
       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',
@@ -588,11 +505,9 @@ let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
     };
     return jsx(Popover, popoverProps, customPopoverConfig.children);
   }
-
   render() {
     const styles = this.props.styles;
     let content;
-
     if (this.shouldRenderPopover) {
       content = jsx(InstUISettingsProvider, {
         theme: {
@@ -618,13 +533,11 @@ let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
     } else {
       content = this.renderContent();
     }
-
     return 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 = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   status: 'default',
   variant: 'default',

package/es/TopNavBar/TopNavBarItem/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { Drilldown } from '@instructure/ui-drilldown';

package/es/TopNavBar/TopNavBarItem/styles.js

@@ -34,12 +34,12 @@
  */
 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;
@@ -120,5 +120,4 @@ const generateStyle = (componentTheme, props, state) => {
     itemInlinePadding: componentTheme.itemInlinePadding
   };
 };
-
 export default generateStyle;

package/es/TopNavBar/TopNavBarItem/theme.js

@@ -29,9 +29,9 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        spacing = theme.spacing,
-        typography = theme.typography,
-        borders = theme.borders;
+    spacing = theme.spacing,
+    typography = theme.typography,
+    borders = theme.borders;
   const componentVariables = {
     fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
     fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
@@ -47,8 +47,8 @@ const generateComponentTheme = theme => {
     activeIndicatorColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
     activeIndicatorColorInverse: colors.textDarkest
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 export default generateComponentTheme;

package/es/TopNavBar/TopNavBarLayout/DesktopLayout/TopNavBarDesktopLayoutLocator.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { locator } from '@instructure/ui-test-locator';
 import { find } from '@instructure/ui-test-utils';
 import { getComputedStyle } from '@instructure/ui-dom-utils';
@@ -29,34 +30,31 @@ import { TopNavBarMenuItemsLocator } from '../../TopNavBarMenuItems/TopNavBarMen
 import { TopNavBarActionItemsLocator } from '../../TopNavBarActionItems/TopNavBarActionItemsLocator';
 import { TopNavBarUserLocator } from '../../TopNavBarUser/TopNavBarUserLocator';
 import { TopNavBarDesktopLayout } from './index';
-export const TopNavBarDesktopLayoutLocator = locator( // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+export const TopNavBarDesktopLayoutLocator = locator(
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 TopNavBarDesktopLayout.selector, {
   findBrandContainer: function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     return find('[class$=-topNavBarDesktopLayout__brandContainer]', ...args);
   },
   findMenuItemsContainer: function () {
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-
     return find('[class$=-topNavBarDesktopLayout__menuItemsContainer]', ...args);
   },
   findActionItemsContainer: function () {
     for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
       args[_key3] = arguments[_key3];
     }
-
     return find('[class$=-topNavBarDesktopLayout__actionItemsContainer]', ...args);
   },
   findUserContainer: function () {
     for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
       args[_key4] = arguments[_key4];
     }
-
     return find('[class$=-topNavBarDesktopLayout__userContainer]', ...args);
   },
   findBrand: function () {
@@ -76,7 +74,6 @@ TopNavBarDesktopLayout.selector, {
       for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
         args[_key5] = arguments[_key5];
       }
-
       const user = await find('[class$=-topNavBarDesktopLayout__userContainer]', ...args);
       return user ? getComputedStyle(user.getDOMNode(), '::before').backgroundColor : 'rgba(0, 0, 0, 0)';
     } catch {