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

package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/theme.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+ * 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.
+ */
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = theme => {
+  const colors = theme.colors,
+        stacking = theme.stacking,
+        typography = theme.typography,
+        spacing = theme.spacing,
+        borders = theme.borders;
+  const componentVariables = {
+    desktopFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    desktopFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    desktopFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    desktopBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary,
+    desktopBackgroundInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    desktopBottomBorder: 'none',
+    desktopBottomBorderInverse: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} ${borders === null || borders === void 0 ? void 0 : borders.style} ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
+    desktopHeight: '4rem',
+    desktopZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) + 1,
+    desktopInlinePadding: spacing.small,
+    desktopBrandContainerInlineMargin: `0 ${spacing.medium}`,
+    desktopMenuItemsContainerInlineMargin: `0 ${spacing.large}`,
+    desktopActionItemsContainerInlineMargin: `${spacing.xSmall} 0`,
+    desktopUserContainerInlineMargin: `${spacing.xSmall} 0`,
+    desktopUserSeparatorGap: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    desktopUserSeparatorHeight: '1.5rem',
+    desktopUserSeparatorWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    desktopUserSeparatorColor: colors.borderMedium,
+    desktopUserSeparatorColorInverse: colors.borderMedium
+  };
+  return { ...componentVariables
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

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

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopNavBarSmallViewportLayoutLocator = void 0;
+
+var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
+
+var _uiTestUtils = require("@instructure/ui-test-utils");
+
+var _DrilldownLocator = require("@instructure/ui-drilldown/lib/Drilldown/DrilldownLocator");
+
+var _TrayLocator = require("@instructure/ui-tray/lib/Tray/TrayLocator");
+
+var _TruncateListLocator = require("@instructure/ui-truncate-list/lib/TruncateList/TruncateListLocator");
+
+var _TopNavBarItemLocator = require("../../TopNavBarItem/TopNavBarItemLocator");
+
+var _TopNavBarBrandLocator = require("../../TopNavBarBrand/TopNavBarBrandLocator");
+
+var _TopNavBarActionItemsLocator = require("../../TopNavBarActionItems/TopNavBarActionItemsLocator");
+
+var _index = require("./index");
+
+/*
+ * 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.
+ */
+
+/* eslint-disable no-restricted-imports */
+// @ts-expect-error bypass no type definition found error
+// @ts-expect-error bypass no type definition found error
+// @ts-expect-error bypass no type definition found error
+
+/* eslint-enable no-restricted-imports */
+const TopNavBarSmallViewportLayoutLocator = (0, _locator.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
+_index.TopNavBarSmallViewportLayout.selector, {
+  findNavBar: function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return (0, _uiTestUtils.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 (0, _uiTestUtils.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 (0, _uiTestUtils.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 (0, _uiTestUtils.find)('[id^=TopNavBarSmallViewportLayout-menuTrigger_]', ...args);
+
+    if (triggerExists) {
+      return _TopNavBarItemLocator.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 (0, _uiTestUtils.find)('[id^=TopNavBarSmallViewportLayout-menuTrigger_]', ...args);
+
+    if (triggerExists) {
+      const menuItem = await _TopNavBarItemLocator.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 (0, _uiTestUtils.find)('[class$=-topNavBarSmallViewportLayout__brandContainer]', ...args);
+  },
+  findBrand: function () {
+    return _TopNavBarBrandLocator.TopNavBarBrandLocator.find(...arguments);
+  },
+  findActionItems: function () {
+    return _TopNavBarActionItemsLocator.TopNavBarActionItemsLocator.find(...arguments);
+  },
+  findTruncateList: function () {
+    return _TruncateListLocator.TruncateListLocator.find(...arguments);
+  },
+  findDropdownMenuTray: function () {
+    return _TrayLocator.TrayLocator.find(...arguments);
+  },
+  findDropdownMenu: function () {
+    return _DrilldownLocator.DrilldownLocator.find(...arguments);
+  },
+  findInPlaceDialog: function () {
+    for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+      args[_key7] = arguments[_key7];
+    }
+
+    return (0, _uiTestUtils.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 (0, _uiTestUtils.find)('[id^=TopNavBarSmallViewportLayout-inPlaceDialogCloseButton_]', ...args);
+  }
+});
+exports.TopNavBarSmallViewportLayoutLocator = TopNavBarSmallViewportLayoutLocator;

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

@@ -0,0 +1,472 @@
+"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.TopNavBarSmallViewportLayout = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+
+var _px = require("@instructure/ui-utils/lib/px.js");
+
+var _console = require("@instructure/console");
+
+var _testable = require("@instructure/ui-testable/lib/testable.js");
+
+var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
+
+var _requestAnimationFrame = require("@instructure/ui-dom-utils/lib/requestAnimationFrame.js");
+
+var _emotion = require("@instructure/emotion");
+
+var _Tray = require("@instructure/ui-tray/lib/Tray");
+
+var _IconXLine2 = require("@instructure/ui-icons/lib/IconXLine.js");
+
+var _IconHamburgerLine2 = require("@instructure/ui-icons/lib/IconHamburgerLine.js");
+
+var _IconArrowOpenDownSolid = require("@instructure/ui-icons/lib/IconArrowOpenDownSolid.js");
+
+var _IconArrowOpenUpSolid = require("@instructure/ui-icons/lib/IconArrowOpenUpSolid.js");
+
+var _Avatar = require("@instructure/ui-avatar/lib/Avatar");
+
+var _Dialog = require("@instructure/ui-dialog/lib/Dialog");
+
+var _Drilldown = require("@instructure/ui-drilldown/lib/Drilldown");
+
+var _TopNavBarItem = require("../../TopNavBarItem");
+
+var _mapItemsForDrilldown = require("../../utils/mapItemsForDrilldown");
+
+var _TopNavBarContext = require("../../TopNavBarContext");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _theme = _interopRequireDefault(require("./theme"));
+
+var _props = require("./props");
+
+var _dec, _dec2, _dec3, _class, _class2, _IconXLine, _IconHamburgerLine;
+
+/**
+---
+private: true
+---
+@tsProps
+**/
+let TopNavBarSmallViewportLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TopNavBarSmallViewportLayout extends _react.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 = (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)(_Avatar.Avatar, {
+          name: avatarName,
+          src: avatarSrc,
+          alt: label,
+          size: "small",
+          margin: "0 small 0 0",
+          role: "presentation",
+          "aria-hidden": "true"
+        }), children);
+      }
+
+      return (0, _emotion.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: (0, _px.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.default.Children.count(renderMenuItems.props.children) > 0;
+  }
+
+  hasActionItemsBlock(renderActionItems) {
+    return !!renderActionItems && _react.default.Children.count(renderActionItems.props.children) > 0;
+  }
+
+  hasUserBlock(renderUser) {
+    return !!renderUser && _react.default.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.default.Children.toArray(renderUser.props.children);
+
+    return (0, _mapItemsForDrilldown.mapItemsForDrilldown)(userChildren, {
+      renderOptionContent: this.renderOptionContent
+    });
+  }
+
+  get mappedMenuItemsOptions() {
+    const renderMenuItems = this.props.renderMenuItems;
+
+    if (!this.hasMenuItemsBlock(renderMenuItems)) {
+      return [];
+    }
+
+    const menuItemsChildren = _react.default.Children.toArray(renderMenuItems.props.children);
+
+    return (0, _mapItemsForDrilldown.mapItemsForDrilldown)(menuItemsChildren, {
+      renderOptionContent: this.renderOptionContent,
+      currentPageId: renderMenuItems.props.currentPageId
+    });
+  }
+
+  get extractDrilldownSubpages() {
+    return (0, _mapItemsForDrilldown.renderMappedItemDrilldownSubpages)([...this.mappedUserOptions, ...this.mappedMenuItemsOptions]);
+  }
+
+  updateMenuBottomPosition() {
+    const boundingRect = (0, _getBoundingClientRect.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) {
+        (0, _console.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 = (0, _emotion.jsx)("div", {
+        css: menuTriggerStyle
+      }, alternativeTitle ? (0, _emotion.jsx)(_TopNavBarItem.TopNavBarItem, Object.assign({}, itemProps, {
+        "aria-label": dropdownMenuToggleButtonLabel
+      }), isDropdownMenuOpen ? (0, _emotion.jsx)(_IconArrowOpenUpSolid.IconArrowOpenUpSolid, alternativeTitleIconProps) : (0, _emotion.jsx)(_IconArrowOpenDownSolid.IconArrowOpenDownSolid, alternativeTitleIconProps), alternativeTitle) : (0, _emotion.jsx)(_TopNavBarItem.TopNavBarItem, Object.assign({}, itemProps, {
+        variant: "icon",
+        renderIcon: isDropdownMenuOpen ? _IconXLine || (_IconXLine = (0, _emotion.jsx)(_IconXLine2.IconXLine, null)) : _IconHamburgerLine || (_IconHamburgerLine = (0, _emotion.jsx)(_IconHamburgerLine2.IconHamburgerLine, null))
+      }), dropdownMenuToggleButtonLabel));
+    }
+
+    return (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.menuTriggerContainer
+    }, menuTrigger, this.hasBrandBlock(renderBrand) && !alternativeTitle && (0, _emotion.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 = (0, _mapItemsForDrilldown.renderMappedItemsAsDrilldownOptions)(this.mappedUserOptions);
+
+      if (hasMenuItems) {
+        pageChildren.push((0, _emotion.jsx)(_Drilldown.Drilldown.Separator, {
+          id: this._separatorId,
+          key: this._separatorId
+        }));
+      }
+    }
+
+    if (hasMenuItems) {
+      pageChildren = [...pageChildren, ...(0, _mapItemsForDrilldown.renderMappedItemsAsDrilldownOptions)(this.mappedMenuItemsOptions)];
+    }
+
+    return pageChildren.length ? pageChildren : void 0;
+  }
+
+  renderDropdownMenu() {
+    const _this$props5 = this.props,
+          dropdownMenuLabel = _this$props5.dropdownMenuLabel,
+          onDropdownMenuSelect = _this$props5.onDropdownMenuSelect;
+    return (0, _emotion.jsx)(_Drilldown.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();
+        }
+      }
+    }, [(0, _emotion.jsx)(_Drilldown.Drilldown.Page, {
+      id: this._menuId,
+      key: this._menuId
+    }, this.dropdownMenuContent), ...this.extractDrilldownSubpages]);
+  }
+
+  renderDropdownMenuTray() {
+    const trayMountNode = this.props.trayMountNode;
+
+    if (!this.hasSubmenu) {
+      return null;
+    }
+
+    return (0, _emotion.jsx)(_Tray.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((0, _requestAnimationFrame.requestAnimationFrame)(() => {
+          var _returnFocusElement;
+
+          (_returnFocusElement = returnFocusElement()) === null || _returnFocusElement === void 0 ? void 0 : _returnFocusElement.focus();
+        }));
+      }
+    };
+
+    const dialog = (0, _emotion.jsx)(_Dialog.Dialog, {
+      display: "block",
+      open: open,
+      shouldContainFocus: shouldContainFocus,
+      shouldCloseOnEscape: shouldCloseOnEscape,
+      shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
+      onDismiss: handleClose
+    }, (0, _emotion.jsx)("div", {
+      id: this._inPlaceDialogId,
+      css: styles === null || styles === void 0 ? void 0 : styles.inPlaceDialogContainer
+    }, (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.inPlaceDialogContainerContent
+    }, (0, _callRenderProp.callRenderProp)(content, {
+      closeInPlaceDialog: handleClose
+    })), (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.inPlaceDialogContainerButton
+    }, (0, _emotion.jsx)(_TopNavBarItem.TopNavBarItem, {
+      id: this._inPlaceDialogCloseButtonId,
+      renderIcon: _IconXLine2.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 (0, _emotion.jsx)("nav", Object.assign({}, (0, _omitProps.omitProps)(this.props, _props.allowedProps), {
+      ref: this.handleRef,
+      "aria-label": navLabel
+    }), (0, _emotion.jsx)(_emotion.Global, {
+      styles: styles === null || styles === void 0 ? void 0 : styles.globalStyles
+    }), !this.isInPlaceDialogOpen && (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.navbar
+    }, this.renderMenuTrigger(), this.hasActionItemsBlock(renderActionItems) && renderActionItems), this.renderInPlaceDialog(), !trayMountNode && (0, _emotion.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 = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {}, _class2.contextType = _TopNavBarContext.TopNavBarContext, _class2)) || _class) || _class) || _class);
+exports.TopNavBarSmallViewportLayout = TopNavBarSmallViewportLayout;
+var _default = TopNavBarSmallViewportLayout;
+exports.default = _default;