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

package/es/TopNavBar/TopNavBarItem/index.js

@@ -0,0 +1,634 @@
+var _dec, _dec2, _dec3, _class, _class2, _IconArrowOpenUpSolid, _IconArrowOpenDownSol;
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/** @jsx jsx */
+import React, { Component } from 'react';
+import { callRenderProp, matchComponentTypes, omitProps, passthroughProps, safeCloneElement, withDeterministicId } from '@instructure/ui-react-utils';
+import { createChainedFunction } from '@instructure/ui-utils';
+import { testable } from '@instructure/ui-testable';
+import { warn, error } from '@instructure/console';
+import { withStyle, jsx, InstUISettingsProvider } from '@instructure/emotion';
+import { IconArrowOpenDownSolid, IconArrowOpenUpSolid } from '@instructure/ui-icons';
+import { Avatar } from '@instructure/ui-avatar';
+import { BaseButton } from '@instructure/ui-buttons';
+import { Tooltip } from '@instructure/ui-tooltip';
+import { Popover } from '@instructure/ui-popover';
+import { Drilldown } from '@instructure/ui-drilldown';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { TopNavBarContext } from '../TopNavBarContext';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
+import { propTypes, allowedProps } from './props';
+const navbarStackingDefault = 10000;
+const submenuStacking = navbarStackingDefault + 1;
+const tooltipStacking = navbarStackingDefault + 2;
+/**
+---
+parent: TopNavBar
+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({
+            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 && matchComponentTypes(renderSubmenu, [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) {
+      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;
+    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;
+    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,
+      ...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: 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 = 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", {
+      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 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 = callRenderProp(tooltipProps.renderTip);
+
+    if (!tipContent) {
+      return button;
+    }
+
+    const contentAndTooltipIdentical = tipContent === content;
+    return jsx(InstUISettingsProvider, {
+      theme: {
+        componentOverrides: {
+          View: {
+            // moves tooltips above submenus/popovers
+            stackingTopmost: tooltipStacking
+          }
+        }
+      }
+    }, jsx(Tooltip, Object.assign({}, tooltipProps, {
+      renderTip: contentAndTooltipIdentical ? tipContent : jsx("div", {
+        id: this._tooltipContentId
+      }, tipContent),
+      positionContainerDisplay: "block"
+    }), jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.submenuTriggerContainer
+    }, contentAndTooltipIdentical ? button : 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) {
+      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,
+      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') {
+      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
+      }, this.renderContent()),
+      show: this.state.isSubmenuOpen,
+      onToggle: 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) {
+      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: jsx("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.submenuTriggerContainer
+      }, this.renderContent()),
+      onShowContent: createChainedFunction(customPopoverConfig.onShowContent, () => {
+        if (!this.isCustomPopoverControlled) {
+          this.setState({
+            isPopoverOpen: true
+          });
+        }
+      }),
+      onHideContent: 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 jsx(Popover, popoverProps, customPopoverConfig.children);
+  }
+
+  render() {
+    const styles = this.props.styles;
+    let content;
+
+    if (this.shouldRenderPopover) {
+      content = jsx(InstUISettingsProvider, {
+        theme: {
+          componentOverrides: {
+            View: {
+              // moves popovers above navbar, below tooltips
+              stackingTopmost: submenuStacking
+            }
+          }
+        }
+      }, this.renderPopover());
+    } else if (this.shouldRenderSubmenu) {
+      content = jsx(InstUISettingsProvider, {
+        theme: {
+          componentOverrides: {
+            View: {
+              // moves submenus above navbar, below tooltips
+              stackingTopmost: submenuStacking
+            }
+          }
+        }
+      }, this.renderDropdownMenu());
+    } 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',
+  showSubmenuChevron: true
+}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class) || _class);
+export { TopNavBarItem };
+export default TopNavBarItem;

package/es/TopNavBar/TopNavBarItem/props.js

@@ -0,0 +1,64 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * 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';
+const topNavBarItemTooltipPropType = PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
+  renderTip: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  color: PropTypes.oneOf(['primary', 'primary-inverse']),
+  placement: PropTypes.string,
+  offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onShowContent: PropTypes.func,
+  onHideContent: PropTypes.func
+})]);
+const propTypes = {
+  id: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  variant: PropTypes.oneOf(['default', 'button', 'icon', 'avatar']),
+  status: PropTypes.oneOf(['default', 'active', 'disabled']),
+  renderSubmenu: ChildrenPropTypes.oneOf([Drilldown]),
+  showSubmenuChevron: PropTypes.bool,
+  customPopoverConfig: PropTypes.object,
+  tooltip: topNavBarItemTooltipPropType,
+  renderAvatar: PropTypes.shape({
+    avatarName: PropTypes.string.isRequired,
+    avatarSrc: PropTypes.string,
+    avatarAlt: PropTypes.string
+  }),
+  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  onSubmenuToggle: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  onMouseOut: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  elementRef: PropTypes.func,
+  itemRef: PropTypes.func
+};
+const allowedProps = ['id', 'children', 'variant', 'status', 'renderSubmenu', 'showSubmenuChevron', 'customPopoverConfig', 'tooltip', 'renderAvatar', 'renderIcon', 'href', 'onClick', 'onSubmenuToggle', 'onMouseOver', 'onMouseOut', 'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'elementRef', 'itemRef'];
+export { propTypes, allowedProps, topNavBarItemTooltipPropType };