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

package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/TopNavBarSmallViewportLayoutLocator.js

@@ -0,0 +1,126 @@
+/*
+ * 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 { locator } from '@instructure/ui-test-locator';
+import { find } from '@instructure/ui-test-utils';
+/* eslint-disable no-restricted-imports */
+// @ts-expect-error bypass no type definition found error
+
+import { DrilldownLocator } from '@instructure/ui-drilldown/es/Drilldown/DrilldownLocator'; // @ts-expect-error bypass no type definition found error
+
+import { TrayLocator } from '@instructure/ui-tray/es/Tray/TrayLocator'; // @ts-expect-error bypass no type definition found error
+
+import { TruncateListLocator } from '@instructure/ui-truncate-list/es/TruncateList/TruncateListLocator';
+/* eslint-enable no-restricted-imports */
+
+import { TopNavBarItemLocator } from '../../TopNavBarItem/TopNavBarItemLocator';
+import { TopNavBarBrandLocator } from '../../TopNavBarBrand/TopNavBarBrandLocator';
+import { TopNavBarActionItemsLocator } from '../../TopNavBarActionItems/TopNavBarActionItemsLocator';
+import { TopNavBarSmallViewportLayout } from './index';
+export const TopNavBarSmallViewportLayoutLocator = 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
+TopNavBarSmallViewportLayout.selector, {
+  findNavBar: function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return find('[class$=-topNavBarSmallViewportLayout__navbar]', ...args);
+  },
+  findDropdownMenuTriggerWrapper: function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    return find('[class*=-topNavBarSmallViewportLayout__menuTrigger]', ...args);
+  },
+  findAlternativeTitleContainer: function () {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
+    return find('[class*=-topNavBarSmallViewportLayout__alternativeTitleContainer]', ...args);
+  },
+  findDropdownMenuTriggerItem: async function () {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+
+    const triggerExists = await find('[id^=TopNavBarSmallViewportLayout-menuTrigger_]', ...args);
+
+    if (triggerExists) {
+      return TopNavBarItemLocator.find('[id^=TopNavBarSmallViewportLayout-menuTrigger_]');
+    } else {
+      return triggerExists;
+    }
+  },
+  findDropdownMenuTriggerButton: async function () {
+    for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+      args[_key5] = arguments[_key5];
+    }
+
+    const triggerExists = await find('[id^=TopNavBarSmallViewportLayout-menuTrigger_]', ...args);
+
+    if (triggerExists) {
+      const menuItem = await TopNavBarItemLocator.find('[id^=TopNavBarSmallViewportLayout-menuTrigger_]');
+      return menuItem.findButton();
+    } else {
+      return triggerExists;
+    }
+  },
+  findBrandContainer: function () {
+    for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+      args[_key6] = arguments[_key6];
+    }
+
+    return find('[class$=-topNavBarSmallViewportLayout__brandContainer]', ...args);
+  },
+  findBrand: function () {
+    return TopNavBarBrandLocator.find(...arguments);
+  },
+  findActionItems: function () {
+    return TopNavBarActionItemsLocator.find(...arguments);
+  },
+  findTruncateList: function () {
+    return TruncateListLocator.find(...arguments);
+  },
+  findDropdownMenuTray: function () {
+    return TrayLocator.find(...arguments);
+  },
+  findDropdownMenu: function () {
+    return DrilldownLocator.find(...arguments);
+  },
+  findInPlaceDialog: function () {
+    for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+      args[_key7] = arguments[_key7];
+    }
+
+    return find('[class$=-topNavBarSmallViewportLayout__inPlaceDialogContainer]', ...args);
+  },
+  findInPlaceDialogCloseButton: function () {
+    for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
+      args[_key8] = arguments[_key8];
+    }
+
+    return find('[id^=TopNavBarSmallViewportLayout-inPlaceDialogCloseButton_]', ...args);
+  }
+});

package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.js

@@ -0,0 +1,454 @@
+var _dec, _dec2, _dec3, _class, _class2, _IconXLine, _IconHamburgerLine;
+
+/*
+ * 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 { omitProps, withDeterministicId, callRenderProp } from '@instructure/ui-react-utils';
+import { px } from '@instructure/ui-utils';
+import { warn } from '@instructure/console';
+import { testable } from '@instructure/ui-testable';
+import { getBoundingClientRect, requestAnimationFrame } from '@instructure/ui-dom-utils';
+import { withStyle, jsx, Global } from '@instructure/emotion';
+import { Tray } from '@instructure/ui-tray';
+import { IconXLine, IconHamburgerLine, IconArrowOpenDownSolid, IconArrowOpenUpSolid } from '@instructure/ui-icons';
+import { Avatar } from '@instructure/ui-avatar';
+import { Dialog } from '@instructure/ui-dialog';
+import { Drilldown } from '@instructure/ui-drilldown';
+import { TopNavBarItem } from '../../TopNavBarItem';
+import { mapItemsForDrilldown, renderMappedItemDrilldownSubpages, renderMappedItemsAsDrilldownOptions } from '../../utils/mapItemsForDrilldown';
+import { TopNavBarContext } from '../../TopNavBarContext';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
+import { propTypes, allowedProps } from './props';
+
+/**
+---
+private: true
+---
+@tsProps
+**/
+let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TopNavBarSmallViewportLayout extends Component {
+  constructor(props) {
+    var _props$styles;
+
+    super(props);
+    this.ref = null;
+    this._trayContainerId = void 0;
+    this._trayId = void 0;
+    this._drilldownId = void 0;
+    this._menuTriggerId = void 0;
+    this._menuId = void 0;
+    this._inPlaceDialogId = void 0;
+    this._inPlaceDialogCloseButtonId = void 0;
+    this._separatorId = void 0;
+    this._raf = [];
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
+    this.renderOptionContent = (children, itemProps) => {
+      const styles = this.props.styles;
+      const status = itemProps.status,
+            renderAvatar = itemProps.renderAvatar;
+      let content = children;
+      let optionStyle = status === 'active' ? styles === null || styles === void 0 ? void 0 : styles.dropdownMenuOptionActive : styles === null || styles === void 0 ? void 0 : styles.dropdownMenuOption;
+
+      if (renderAvatar) {
+        const avatarName = renderAvatar.avatarName,
+              avatarSrc = renderAvatar.avatarSrc,
+              avatarAlt = renderAvatar.avatarAlt;
+        const label = avatarAlt || (typeof children === 'string' ? children : void 0);
+        optionStyle = styles === null || styles === void 0 ? void 0 : styles.dropdownMenuOptionWithAvatar;
+        content = jsx(React.Fragment, null, jsx(Avatar, {
+          name: avatarName,
+          src: avatarSrc,
+          alt: label,
+          size: "small",
+          margin: "0 small 0 0",
+          role: "presentation",
+          "aria-hidden": "true"
+        }), children);
+      }
+
+      return jsx("span", {
+        css: optionStyle
+      }, content);
+    };
+
+    this._trayContainerId = props.deterministicId('TopNavBarSmallViewportLayout-trayContainer');
+    this._trayId = props.deterministicId('TopNavBarSmallViewportLayout-tray');
+    this._menuId = props.deterministicId('TopNavBarSmallViewportLayout-menu');
+    this._menuTriggerId = props.deterministicId('TopNavBarSmallViewportLayout-menuTrigger');
+    this._drilldownId = props.deterministicId('TopNavBarSmallViewportLayout-drilldown');
+    this._inPlaceDialogId = props.deterministicId('TopNavBarSmallViewportLayout-inPlaceDialog');
+    this._inPlaceDialogCloseButtonId = props.deterministicId('TopNavBarSmallViewportLayout-inPlaceDialogCloseButton');
+    this._separatorId = props.deterministicId('TopNavBarSmallViewportLayout-separator');
+    this.state = {
+      isDropdownMenuOpen: false,
+      isDropdownMenuVisible: false,
+      menuBottomPosition: px(((_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.navbarHeight) || 0)
+    };
+  }
+
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
+    this.updateMenuBottomPosition();
+  }
+
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
+  }
+
+  componentWillUnmount() {
+    this._raf.forEach(request => request.cancel());
+  }
+
+  get makeStylesVariables() {
+    return {
+      isDropdownMenuVisible: this.state.isDropdownMenuVisible,
+      drilldownId: this._drilldownId,
+      trayId: this._trayId,
+      menuBottomPosition: this.state.menuBottomPosition,
+      inverseColor: this.context.inverseColor
+    };
+  }
+
+  hasBrandBlock(renderBrand) {
+    return !!renderBrand && (!!renderBrand.props.renderName || !!renderBrand.props.renderIcon);
+  }
+
+  hasMenuItemsBlock(renderMenuItems) {
+    return !!renderMenuItems && React.Children.count(renderMenuItems.props.children) > 0;
+  }
+
+  hasActionItemsBlock(renderActionItems) {
+    return !!renderActionItems && React.Children.count(renderActionItems.props.children) > 0;
+  }
+
+  hasUserBlock(renderUser) {
+    return !!renderUser && React.Children.count(renderUser.props.children) > 0;
+  }
+
+  get hasSubmenu() {
+    return (this.dropdownMenuContent || []).length > 0;
+  }
+
+  get isInPlaceDialogOpen() {
+    var _this$props$renderInP;
+
+    return (_this$props$renderInP = this.props.renderInPlaceDialogConfig) === null || _this$props$renderInP === void 0 ? void 0 : _this$props$renderInP.open;
+  }
+
+  get mappedUserOptions() {
+    const renderUser = this.props.renderUser;
+
+    if (!this.hasUserBlock(renderUser)) {
+      return [];
+    }
+
+    const userChildren = React.Children.toArray(renderUser.props.children);
+    return mapItemsForDrilldown(userChildren, {
+      renderOptionContent: this.renderOptionContent
+    });
+  }
+
+  get mappedMenuItemsOptions() {
+    const renderMenuItems = this.props.renderMenuItems;
+
+    if (!this.hasMenuItemsBlock(renderMenuItems)) {
+      return [];
+    }
+
+    const menuItemsChildren = React.Children.toArray(renderMenuItems.props.children);
+    return mapItemsForDrilldown(menuItemsChildren, {
+      renderOptionContent: this.renderOptionContent,
+      currentPageId: renderMenuItems.props.currentPageId
+    });
+  }
+
+  get extractDrilldownSubpages() {
+    return renderMappedItemDrilldownSubpages([...this.mappedUserOptions, ...this.mappedMenuItemsOptions]);
+  }
+
+  updateMenuBottomPosition() {
+    const boundingRect = getBoundingClientRect(this.ref);
+    this.setState({
+      menuBottomPosition: boundingRect.top + boundingRect.height
+    });
+  }
+
+  toggleDropdownMenu() {
+    const onDropdownMenuToggle = this.props.onDropdownMenuToggle;
+    const isDropdownMenuOpen = this.state.isDropdownMenuOpen;
+
+    if (!isDropdownMenuOpen) {
+      this.updateMenuBottomPosition();
+    }
+
+    if (typeof onDropdownMenuToggle === 'function') {
+      onDropdownMenuToggle(!isDropdownMenuOpen);
+    }
+
+    this.setState({
+      isDropdownMenuOpen: !isDropdownMenuOpen
+    });
+  }
+
+  renderMenuTrigger() {
+    const _this$props3 = this.props,
+          dropdownMenuToggleButtonLabel = _this$props3.dropdownMenuToggleButtonLabel,
+          dropdownMenuToggleButtonTooltip = _this$props3.dropdownMenuToggleButtonTooltip,
+          renderBrand = _this$props3.renderBrand,
+          alternativeTitle = _this$props3.alternativeTitle,
+          styles = _this$props3.styles;
+    const isDropdownMenuOpen = this.state.isDropdownMenuOpen;
+    let menuTrigger;
+    const menuTriggerStyle = [styles === null || styles === void 0 ? void 0 : styles.menuTrigger, ...(alternativeTitle ? [styles === null || styles === void 0 ? void 0 : styles.alternativeTitleContainer] : [])];
+
+    if (!this.hasSubmenu) {
+      menuTrigger = null;
+
+      if (alternativeTitle) {
+        warn(false, 'There are no menu items or user menu to display in the <TopNavBar> dropdown menu! The menu trigger and the alternative title will not display.');
+      }
+    } else {
+      const itemProps = {
+        id: this._menuTriggerId,
+        onClick: () => {
+          this.toggleDropdownMenu();
+        },
+        tooltip: dropdownMenuToggleButtonTooltip,
+        themeOverride: {
+          itemSpacing: '0.375rem'
+        },
+        'aria-haspopup': 'menu',
+        'aria-expanded': isDropdownMenuOpen
+      };
+      const alternativeTitleIconProps = {
+        size: 'x-small',
+        style: {
+          marginInlineEnd: '0.5em'
+        }
+      };
+      menuTrigger = jsx("div", {
+        css: menuTriggerStyle
+      }, alternativeTitle ? jsx(TopNavBarItem, Object.assign({}, itemProps, {
+        "aria-label": dropdownMenuToggleButtonLabel
+      }), isDropdownMenuOpen ? jsx(IconArrowOpenUpSolid, alternativeTitleIconProps) : jsx(IconArrowOpenDownSolid, alternativeTitleIconProps), alternativeTitle) : jsx(TopNavBarItem, Object.assign({}, itemProps, {
+        variant: "icon",
+        renderIcon: isDropdownMenuOpen ? _IconXLine || (_IconXLine = jsx(IconXLine, null)) : _IconHamburgerLine || (_IconHamburgerLine = jsx(IconHamburgerLine, null))
+      }), dropdownMenuToggleButtonLabel));
+    }
+
+    return jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.menuTriggerContainer
+    }, menuTrigger, this.hasBrandBlock(renderBrand) && !alternativeTitle && jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.brandContainer
+    }, renderBrand));
+  }
+
+  get dropdownMenuContent() {
+    const _this$props4 = this.props,
+          renderUser = _this$props4.renderUser,
+          renderMenuItems = _this$props4.renderMenuItems;
+    const hasMenuItems = this.hasMenuItemsBlock(renderMenuItems);
+    const hasUser = this.hasUserBlock(renderUser);
+    let pageChildren = [];
+
+    if (hasUser) {
+      pageChildren = renderMappedItemsAsDrilldownOptions(this.mappedUserOptions);
+
+      if (hasMenuItems) {
+        pageChildren.push(jsx(Drilldown.Separator, {
+          id: this._separatorId,
+          key: this._separatorId
+        }));
+      }
+    }
+
+    if (hasMenuItems) {
+      pageChildren = [...pageChildren, ...renderMappedItemsAsDrilldownOptions(this.mappedMenuItemsOptions)];
+    }
+
+    return pageChildren.length ? pageChildren : void 0;
+  }
+
+  renderDropdownMenu() {
+    const _this$props5 = this.props,
+          dropdownMenuLabel = _this$props5.dropdownMenuLabel,
+          onDropdownMenuSelect = _this$props5.onDropdownMenuSelect;
+    return jsx(Drilldown, {
+      id: this._drilldownId,
+      rootPageId: this._menuId,
+      label: dropdownMenuLabel,
+      height: "100%",
+      width: "100%",
+      onSelect: (e, args) => {
+        if (typeof onDropdownMenuSelect === 'function') {
+          onDropdownMenuSelect(e, args);
+        }
+
+        if (args.selectedOption.props.href) {
+          this.toggleDropdownMenu();
+        }
+      }
+    }, [jsx(Drilldown.Page, {
+      id: this._menuId,
+      key: this._menuId
+    }, this.dropdownMenuContent), ...this.extractDrilldownSubpages]);
+  }
+
+  renderDropdownMenuTray() {
+    const trayMountNode = this.props.trayMountNode;
+
+    if (!this.hasSubmenu) {
+      return null;
+    }
+
+    return jsx(Tray, {
+      id: this._trayId,
+      label: '',
+      role: "none",
+      open: this.state.isDropdownMenuOpen,
+      transitionExit: false,
+      onDismiss: () => {
+        this.toggleDropdownMenu();
+      },
+      onKeyUp: e => {
+        if (e.key === 'Escape') {
+          this.toggleDropdownMenu();
+        }
+      },
+      onEnter: () => {
+        this.setState({
+          isDropdownMenuVisible: true
+        });
+      },
+      onExited: () => {
+        this.setState({
+          isDropdownMenuVisible: false
+        });
+      },
+      shouldCloseOnDocumentClick: true,
+      placement: "top",
+      shadow: false,
+      mountNode: trayMountNode || document.getElementById(this._trayContainerId),
+      defaultFocusElement: () => document.getElementById(this._drilldownId),
+      themeOverride: {
+        position: 'absolute'
+      }
+    }, this.renderDropdownMenu());
+  }
+
+  renderInPlaceDialog() {
+    const _this$props6 = this.props,
+          renderInPlaceDialogConfig = _this$props6.renderInPlaceDialogConfig,
+          styles = _this$props6.styles;
+
+    if (!renderInPlaceDialogConfig) {
+      return null;
+    }
+
+    const content = renderInPlaceDialogConfig.content,
+          open = renderInPlaceDialogConfig.open,
+          onClose = renderInPlaceDialogConfig.onClose,
+          closeButtonLabel = renderInPlaceDialogConfig.closeButtonLabel,
+          shouldContainFocus = renderInPlaceDialogConfig.shouldContainFocus,
+          shouldCloseOnEscape = renderInPlaceDialogConfig.shouldCloseOnEscape,
+          shouldCloseOnDocumentClick = renderInPlaceDialogConfig.shouldCloseOnDocumentClick,
+          returnFocusElement = renderInPlaceDialogConfig.returnFocusElement;
+
+    const handleClose = () => {
+      if (typeof onClose === 'function') {
+        onClose();
+      }
+
+      if (returnFocusElement) {
+        this._raf.push(requestAnimationFrame(() => {
+          var _returnFocusElement;
+
+          (_returnFocusElement = returnFocusElement()) === null || _returnFocusElement === void 0 ? void 0 : _returnFocusElement.focus();
+        }));
+      }
+    };
+
+    const dialog = jsx(Dialog, {
+      display: "block",
+      open: open,
+      shouldContainFocus: shouldContainFocus,
+      shouldCloseOnEscape: shouldCloseOnEscape,
+      shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
+      onDismiss: handleClose
+    }, jsx("div", {
+      id: this._inPlaceDialogId,
+      css: styles === null || styles === void 0 ? void 0 : styles.inPlaceDialogContainer
+    }, jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.inPlaceDialogContainerContent
+    }, callRenderProp(content, {
+      closeInPlaceDialog: handleClose
+    })), jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.inPlaceDialogContainerButton
+    }, jsx(TopNavBarItem, {
+      id: this._inPlaceDialogCloseButtonId,
+      renderIcon: IconXLine,
+      variant: "icon",
+      onClick: handleClose
+    }, closeButtonLabel))));
+    return dialog;
+  }
+
+  render() {
+    const _this$props7 = this.props,
+          trayMountNode = _this$props7.trayMountNode,
+          navLabel = _this$props7.navLabel,
+          renderActionItems = _this$props7.renderActionItems,
+          styles = _this$props7.styles;
+    return jsx("nav", Object.assign({}, omitProps(this.props, allowedProps), {
+      ref: this.handleRef,
+      "aria-label": navLabel
+    }), jsx(Global, {
+      styles: styles === null || styles === void 0 ? void 0 : styles.globalStyles
+    }), !this.isInPlaceDialogOpen && jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.navbar
+    }, this.renderMenuTrigger(), this.hasActionItemsBlock(renderActionItems) && renderActionItems), this.renderInPlaceDialog(), !trayMountNode && jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.trayContainer,
+      id: this._trayContainerId
+    }), this.renderDropdownMenuTray());
+  }
+
+}, _class2.displayName = "TopNavBarSmallViewportLayout", _class2.componentId = 'TopNavBar.SmallViewportLayout', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class) || _class);
+export { TopNavBarSmallViewportLayout };
+export default TopNavBarSmallViewportLayout;

package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/props.js

@@ -0,0 +1,31 @@
+/*
+ * 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 { commonAllowedProps, commonPropTypes, smallViewportPropTypes, smallViewportAllowedProps } from '../props';
+const propTypes = { // Edit PropTypes in TopNabBarLayout/props.ts
+  ...commonPropTypes,
+  ...smallViewportPropTypes
+};
+const allowedProps = [// Edit allowed props in TopNabBarLayout/props.ts
+...commonAllowedProps, ...smallViewportAllowedProps];
+export { propTypes, allowedProps };