@instructure/ui-top-nav-bar 8.30.1-snapshot-15

package/lib/TopNavBar/TopNavBarItem/index.js

@@ -0,0 +1,650 @@
+"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
+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({
+            isPopoverOpen: false
+          });
+        }
+      }
+    };
+
+    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 === 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 === 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;
+    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;
+
+    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;
+    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;
+    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,
+      ...this.ariaProps,
+      size: this.size,
+      withBorder: this.isButtonVariant,
+      withBackground: this.isButtonVariant,
+      interaction: status === 'disabled' ? 'disabled' : void 0,
+      'aria-disabled': status === 'disabled' ? 'true' : void 0,
+      shape: this.isAvatarOnlyVariant && !this.submenuIcon ? 'circle' : 'rectangle',
+      href,
+      onClick,
+      onMouseOver,
+      onMouseOut,
+      onFocus,
+      onBlur,
+      onKeyDown: (0, _createChainedFunction.createChainedFunction)(onKeyDown, this.handleKeyDown),
+      onKeyUp,
+      renderIcon,
+      themeOverride: this.buttonThemeOverride,
+      elementRef: e => {
+        this.handleItemRef(e);
+      }
+    };
+  }
+
+  renderContent() {
+    var _this$props$styles2;
+
+    const _this$props6 = this.props,
+          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", {
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.avatarContainer
+    }, this.renderAvatar()), content, this.submenuIcon));
+    return (0, _emotion.jsx)("div", {
+      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;
+
+    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,
+        ...tooltip
+      };
+    }
+
+    const tipContent = (0, _callRenderProp.callRenderProp)(tooltipProps.renderTip);
+
+    if (!tipContent) {
+      return button;
+    }
+
+    const contentAndTooltipIdentical = tipContent === content;
+    return (0, _emotion.jsx)(_emotion.InstUISettingsProvider, {
+      theme: {
+        componentOverrides: {
+          View: {
+            // moves tooltips above submenus/popovers
+            stackingTopmost: tooltipStacking
+          }
+        }
+      }
+    }, (0, _emotion.jsx)(_Tooltip.Tooltip, Object.assign({}, tooltipProps, {
+      renderTip: contentAndTooltipIdentical ? tipContent : (0, _emotion.jsx)("div", {
+        id: this._tooltipContentId
+      }, tipContent),
+      positionContainerDisplay: "block"
+    }), (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.submenuTriggerContainer
+    }, contentAndTooltipIdentical ? button : (0, _safeCloneElement.safeCloneElement)(button, {
+      '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;
+    const _ref = renderAvatar,
+          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,
+      alt: label,
+      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;
+
+    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
+      }, this.renderContent()),
+      show: this.state.isSubmenuOpen,
+      onToggle: (0, _createChainedFunction.createChainedFunction)((_renderSubmenu$props = renderSubmenu.props) === null || _renderSubmenu$props === void 0 ? void 0 : _renderSubmenu$props.onToggle, this.handleMenuToggle),
+      positionContainerDisplay: 'block',
+      placement: 'bottom start',
+      withArrow: false,
+      minWidth: ((_renderSubmenu$props2 = renderSubmenu.props) === null || _renderSubmenu$props2 === void 0 ? void 0 : _renderSubmenu$props2.minWidth) || '18.5rem',
+      maxHeight: ((_renderSubmenu$props3 = renderSubmenu.props) === null || _renderSubmenu$props3 === void 0 ? void 0 : _renderSubmenu$props3.maxHeight) || `calc(100vh - 10rem)`,
+      ...(status === 'disabled' && {
+        disabled: true,
+        show: false,
+        onToggle: void 0
+      })
+    });
+  }
+
+  renderPopover() {
+    const _this$props10 = this.props,
+          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
+
+
+    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',
+      withArrow: true,
+      shouldReturnFocus: true,
+      shouldContainFocus: false,
+      // user input:
+      ...customPopoverConfig,
+      // fix overrides:
+      positionContainerDisplay: 'block',
+      renderTrigger: (0, _emotion.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.submenuTriggerContainer
+      }, this.renderContent()),
+      onShowContent: (0, _createChainedFunction.createChainedFunction)(customPopoverConfig.onShowContent, () => {
+        if (!this.isCustomPopoverControlled) {
+          this.setState({
+            isPopoverOpen: true
+          });
+        }
+      }),
+      onHideContent: (0, _createChainedFunction.createChainedFunction)(customPopoverConfig.onHideContent, () => {
+        if (!this.isCustomPopoverControlled) {
+          this.setState({
+            isPopoverOpen: false
+          });
+        }
+      }),
+      isShowingContent: this.state.isPopoverOpen,
+      // @ts-expect-error This is a force override for Popover, because it puts
+      // aria-expanded on the trigger when shouldContainFocus="true",
+      // even when it should be on the item's <button>
+      'aria-expanded': void 0
+    };
+    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: {
+          componentOverrides: {
+            View: {
+              // moves popovers above navbar, below tooltips
+              stackingTopmost: submenuStacking
+            }
+          }
+        }
+      }, this.renderPopover());
+    } else if (this.shouldRenderSubmenu) {
+      content = (0, _emotion.jsx)(_emotion.InstUISettingsProvider, {
+        theme: {
+          componentOverrides: {
+            View: {
+              // moves submenus above navbar, below tooltips
+              stackingTopmost: submenuStacking
+            }
+          }
+        }
+      }, this.renderDropdownMenu());
+    } 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',
+  showSubmenuChevron: true
+}, _class2.contextType = _TopNavBarContext.TopNavBarContext, _class2)) || _class) || _class) || _class);
+exports.TopNavBarItem = TopNavBarItem;
+var _default = TopNavBarItem;
+exports.default = _default;