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

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

@@ -1,5 +1,4 @@
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -33,7 +32,6 @@ import { TopNavBarContext } from '../../TopNavBarContext';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 private: true
@@ -44,29 +42,22 @@ let TopNavBarDesktopLayout = (_dec = withStyle(generateStyle, generateComponentT
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
   }
-
   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);
   }
-
   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);
   }
-
   get makeStylesVariables() {
     return {
       inverseColor: this.context.inverseColor,
@@ -75,30 +66,26 @@ let TopNavBarDesktopLayout = (_dec = withStyle(generateStyle, generateComponentT
       hasUserBlock: this.hasUserBlock
     };
   }
-
   get hasBrandBlock() {
     const renderBrand = this.props.renderBrand;
     return !!renderBrand && (!!renderBrand.props.renderName || !!renderBrand.props.renderIcon);
   }
-
   get hasActionItemsBlock() {
     const renderActionItems = this.props.renderActionItems;
     return !!renderActionItems && React.Children.count(renderActionItems.props.children) > 0;
   }
-
   get hasUserBlock() {
     const renderUser = this.props.renderUser;
     return !!renderUser && React.Children.count(renderUser.props.children) > 0;
   }
-
   render() {
     const _this$props3 = this.props,
-          renderBrand = _this$props3.renderBrand,
-          renderMenuItems = _this$props3.renderMenuItems,
-          renderActionItems = _this$props3.renderActionItems,
-          renderUser = _this$props3.renderUser,
-          navLabel = _this$props3.navLabel,
-          styles = _this$props3.styles;
+      renderBrand = _this$props3.renderBrand,
+      renderMenuItems = _this$props3.renderMenuItems,
+      renderActionItems = _this$props3.renderActionItems,
+      renderUser = _this$props3.renderUser,
+      navLabel = _this$props3.navLabel,
+      styles = _this$props3.styles;
     return jsx("nav", Object.assign({}, omitProps(this.props, allowedProps), {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarDesktopLayout,
@@ -113,7 +100,6 @@ let TopNavBarDesktopLayout = (_dec = withStyle(generateStyle, generateComponentT
       css: styles === null || styles === void 0 ? void 0 : styles.userContainer
     }, renderUser));
   }
-
 }, _class2.displayName = "TopNavBarDesktopLayout", _class2.componentId = 'TopNavBar.DesktopLayout', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class);
 export { TopNavBarDesktopLayout };
 export default TopNavBarDesktopLayout;

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

@@ -21,11 +21,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { commonPropTypes, commonAllowedProps, desktopPropTypes, desktopAllowedProps } from '../props';
-const propTypes = { // Edit PropTypes in TopNabBarLayout/props.ts
+const propTypes = {
+  // Edit PropTypes in TopNabBarLayout/props.ts
   ...commonPropTypes,
   ...desktopPropTypes
 };
-const allowedProps = [// Edit allowed props in TopNabBarLayout/props.ts
+const allowedProps = [
+// Edit allowed props in TopNabBarLayout/props.ts
 ...commonAllowedProps, ...desktopAllowedProps];
 export { propTypes, allowedProps };

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

@@ -35,9 +35,9 @@
 const generateStyle = (componentTheme, props, state) => {
   const hideActionsUserSeparator = props.hideActionsUserSeparator;
   const inverseColor = state.inverseColor,
-        hasBrandBlock = state.hasBrandBlock,
-        hasActionItemsBlock = state.hasActionItemsBlock,
-        hasUserBlock = state.hasUserBlock;
+    hasBrandBlock = state.hasBrandBlock,
+    hasActionItemsBlock = state.hasActionItemsBlock,
+    hasUserBlock = state.hasUserBlock;
   const hasUserSeparator = hasActionItemsBlock && hasUserBlock && !hideActionsUserSeparator;
   return {
     topNavBarDesktopLayout: {
@@ -111,5 +111,4 @@ const generateStyle = (componentTheme, props, state) => {
     }
   };
 };
-
 export default generateStyle;

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

@@ -29,10 +29,10 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        stacking = theme.stacking,
-        typography = theme.typography,
-        spacing = theme.spacing,
-        borders = theme.borders;
+    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,
@@ -54,8 +54,8 @@ const generateComponentTheme = theme => {
     desktopUserSeparatorColor: colors.borderMedium,
     desktopUserSeparatorColorInverse: colors.borderMedium
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 export default generateComponentTheme;

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

@@ -21,15 +21,16 @@
  * 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 { 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 */
 
@@ -37,36 +38,32 @@ 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
+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 {
@@ -77,9 +74,7 @@ TopNavBarSmallViewportLayout.selector, {
     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();
@@ -91,7 +86,6 @@ TopNavBarSmallViewportLayout.selector, {
     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 () {
@@ -113,14 +107,12 @@ TopNavBarSmallViewportLayout.selector, {
     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

@@ -1,5 +1,4 @@
 var _dec, _dec2, _dec3, _class, _class2, _IconXLine, _IconHamburgerLine;
-
 /*
  * The MIT License (MIT)
  *
@@ -43,7 +42,6 @@ import { TopNavBarContext } from '../../TopNavBarContext';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 private: true
@@ -53,7 +51,6 @@ private: true
 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;
@@ -65,27 +62,23 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
     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;
+        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;
+          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, {
@@ -98,12 +91,10 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
           "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');
@@ -118,28 +109,21 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
       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());
-
     if (this.state.isDropdownMenuOpen) {
       this.toggleDropdownMenu();
     }
   }
-
   get makeStylesVariables() {
     return {
       isDropdownMenuVisible: this.state.isDropdownMenuVisible,
@@ -149,102 +133,80 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
       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;
+      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.');
       }
@@ -276,25 +238,21 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
         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;
+      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,
@@ -302,18 +260,15 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
         }));
       }
     }
-
     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;
+      dropdownMenuLabel = _this$props5.dropdownMenuLabel,
+      onDropdownMenuSelect = _this$props5.onDropdownMenuSelect;
     return jsx(Drilldown, {
       id: this._drilldownId,
       rootPageId: this._menuId,
@@ -324,7 +279,6 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
         if (typeof onDropdownMenuSelect === 'function') {
           onDropdownMenuSelect(e, args);
         }
-
         if (args.selectedOption.props.href) {
           this.toggleDropdownMenu();
         }
@@ -334,14 +288,11 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
       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: '',
@@ -376,39 +327,32 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
       }
     }, this.renderDropdownMenu());
   }
-
   renderInPlaceDialog() {
     const _this$props6 = this.props,
-          renderInPlaceDialogConfig = _this$props6.renderInPlaceDialogConfig,
-          styles = _this$props6.styles;
-
+      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;
-
+      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,
@@ -433,13 +377,12 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
     }, 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;
+      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
@@ -452,7 +395,6 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
       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

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

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

@@ -34,10 +34,10 @@
  */
 const generateStyle = (componentTheme, _props, state) => {
   const isDropdownMenuVisible = state.isDropdownMenuVisible,
-        drilldownId = state.drilldownId,
-        trayId = state.trayId,
-        menuBottomPosition = state.menuBottomPosition,
-        inverseColor = state.inverseColor;
+    drilldownId = state.drilldownId,
+    trayId = state.trayId,
+    menuBottomPosition = state.menuBottomPosition,
+    inverseColor = state.inverseColor;
   const dropdownMenuTopPosition = componentTheme.smallViewportTrayFixTopPosition || `${menuBottomPosition}px`;
   const dropdownMenuOptionStyle = {
     display: 'inline-block',
@@ -154,5 +154,4 @@ const generateStyle = (componentTheme, _props, state) => {
     navbarHeight: componentTheme.smallViewportHeight
   };
 };
-
 export default generateStyle;

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

@@ -29,10 +29,10 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        stacking = theme.stacking,
-        typography = theme.typography,
-        spacing = theme.spacing,
-        borders = theme.borders;
+    stacking = theme.stacking,
+    typography = theme.typography,
+    spacing = theme.spacing,
+    borders = theme.borders;
   const componentVariables = {
     smallViewportFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
     smallViewportFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
@@ -54,8 +54,8 @@ const generateComponentTheme = theme => {
     smallViewportAlternativeTitleInlineMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
     smallViewportAlternativeTitleBlockMargin: '0'
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 export default generateComponentTheme;

package/es/TopNavBar/TopNavBarLayout/TopNavBarLayoutLocator.js

@@ -21,11 +21,13 @@
  * 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 { TopNavBarDesktopLayoutLocator } from './DesktopLayout/TopNavBarDesktopLayoutLocator';
 import { TopNavBarSmallViewportLayoutLocator } from './SmallViewportLayout/TopNavBarSmallViewportLayoutLocator';
-import { TopNavBarLayout } from './index'; // TODO: this type seems to be too complex, try to fix it later
+import { TopNavBarLayout } from './index';
 
+// TODO: this type seems to be too complex, try to fix it later
 export const TopNavBarLayoutLocator = locator(TopNavBarLayout.selector, {
   findDesktopLayout: function () {
     return TopNavBarDesktopLayoutLocator.find(...arguments);