@instructure/ui-top-nav-bar 10.26.1-snapshot-2 → 10.26.2

package/CHANGELOG.md

@@ -3,30 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.26.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.26.0...v10.26.1-snapshot-2) (2025-10-06)
+## [10.26.2](https://github.com/instructure/instructure-ui/compare/v10.26.1...v10.26.2) (2025-10-13)
 
+**Note:** Version bump only for package @instructure/ui-top-nav-bar
 
-### Features
 
-* **many:** instUI v11 release ([36f5438](https://github.com/instructure/instructure-ui/commit/36f54382669186227ba24798bbf7201ef2f5cd4c))
 
 
-### BREAKING CHANGES
 
-* **many:** InstUI v11 contains the following breaking changes:
-- React 16 and 17 are no longer supported
-- remove `PropTypes` from all packages
-- remove `CodeEditor` component
-- remove `@instui/theme-registry` package
-- remove `@testable`, `@experimental`, `@hack` decorators
-- InstUISettingsProvider's `as` prop is removed
-- `canvas.use()`, `canvasHighContrast.use()` functions are removed
-- `canvasThemeLocal`, `canvasHighContrastThemeLocal` are removed
-- `variables` field on theme objects are removed
-- remove deprecated props from Table: Row's `isStacked`, Body's
-  `isStacked`, `hover`, and `headers`
-- `Table`'s `caption` prop is now required
-- `ui-dom-utils`'s `getComputedStyle` can now return `undefined`
+## [10.26.1](https://github.com/instructure/instructure-ui/compare/v10.26.0...v10.26.1) (2025-10-06)
+
+**Note:** Version bump only for package @instructure/ui-top-nav-bar
 
 
 

package/es/TopNavBar/TopNavBarActionItems/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _TopNavBarActionItems;
+var _dec, _dec2, _dec3, _class, _TopNavBarActionItems;
 /*
  * The MIT License (MIT)
  *
@@ -25,6 +25,7 @@ var _dec, _dec2, _class, _TopNavBarActionItems;
 
 import { Children, Component } from 'react';
 import { omitProps, passthroughProps, safeCloneElement, withDeterministicId } from '@instructure/ui-react-utils';
+import { testable } from '@instructure/ui-testable';
 import { warn, error } from '@instructure/console';
 import { withStyle } from '@instructure/emotion';
 import { Drilldown } from '@instructure/ui-drilldown';
@@ -35,7 +36,7 @@ import { mapItemsForDrilldown, renderMappedItemDrilldownSubpages, renderMappedIt
 import { TopNavBarContext } from '../TopNavBarContext';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { allowedProps } from './props';
+import { propTypes, allowedProps } from './props';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
 /**
@@ -45,7 +46,7 @@ id: TopNavBar.ActionItems
 ---
 @module TopNavBarActionItems
 **/
-let TopNavBarActionItems = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_TopNavBarActionItems = class TopNavBarActionItems extends Component {
+let TopNavBarActionItems = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_TopNavBarActionItems = class TopNavBarActionItems extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -186,13 +187,12 @@ let TopNavBarActionItems = (_dec = withDeterministicId(), _dec2 = withStyle(gene
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarActionItems,
       "aria-label": listLabel,
-      "data-cid": "TopNavBarActionItems",
       children: this.childrenArray.map(item => _jsx("li", {
         css: styles === null || styles === void 0 ? void 0 : styles.listItem,
         children: item
       }, item.props.id))
     });
   }
-}, _TopNavBarActionItems.displayName = "TopNavBarActionItems", _TopNavBarActionItems.componentId = 'TopNavBar.ActionItems', _TopNavBarActionItems.allowedProps = allowedProps, _TopNavBarActionItems.defaultProps = {}, _TopNavBarActionItems.contextType = TopNavBarContext, _TopNavBarActionItems)) || _class) || _class);
+}, _TopNavBarActionItems.displayName = "TopNavBarActionItems", _TopNavBarActionItems.componentId = 'TopNavBar.ActionItems', _TopNavBarActionItems.propTypes = propTypes, _TopNavBarActionItems.allowedProps = allowedProps, _TopNavBarActionItems.defaultProps = {}, _TopNavBarActionItems.contextType = TopNavBarContext, _TopNavBarActionItems)) || _class) || _class) || _class);
 export { TopNavBarActionItems };
 export default TopNavBarActionItems;

package/es/TopNavBar/TopNavBarActionItems/props.js

@@ -22,5 +22,16 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types';
+import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
+import { TopNavBarItem } from '../TopNavBarItem';
+import { topNavBarItemTooltipPropType } from '../TopNavBarItem/props';
+const propTypes = {
+  children: ChildrenPropTypes.oneOf([TopNavBarItem]),
+  listLabel: PropTypes.string,
+  renderHiddenItemsMenuTriggerLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+  renderHiddenItemsMenuTriggerTooltip: PropTypes.oneOfType([topNavBarItemTooltipPropType, PropTypes.func]),
+  elementRef: PropTypes.func
+};
 const allowedProps = ['children', 'listLabel', 'renderHiddenItemsMenuTriggerLabel', 'renderHiddenItemsMenuTriggerTooltip', 'elementRef'];
-export { allowedProps };
+export { propTypes, allowedProps };

package/es/TopNavBar/TopNavBarBrand/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _TopNavBarBrand;
+var _dec, _dec2, _class, _TopNavBarBrand;
 /*
  * The MIT License (MIT)
  *
@@ -25,13 +25,14 @@ var _dec, _class, _TopNavBarBrand;
 
 import { Component } from 'react';
 import { getElementType, omitProps } from '@instructure/ui-react-utils';
+import { testable } from '@instructure/ui-testable';
 import { withStyle } from '@instructure/emotion';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { View } from '@instructure/ui-view';
 import { TopNavBarContext } from '../TopNavBarContext';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { allowedProps } from './props';
+import { propTypes, allowedProps } from './props';
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -40,7 +41,7 @@ id: TopNavBar.Brand
 ---
 @module TopNavBarBrand
 **/
-let TopNavBarBrand = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_TopNavBarBrand = class TopNavBarBrand extends Component {
+let TopNavBarBrand = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_TopNavBarBrand = class TopNavBarBrand extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -81,7 +82,6 @@ let TopNavBarBrand = (_dec = withStyle(generateStyle, generateComponentTheme), _
     return _jsx("div", {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarBrand,
-      "data-cid": "TopNavBarBrand",
       children: renderIcon && _jsxs(View, {
         ...omitProps(this.props, allowedProps),
         css: styles === null || styles === void 0 ? void 0 : styles.container,
@@ -106,6 +106,6 @@ let TopNavBarBrand = (_dec = withStyle(generateStyle, generateComponentTheme), _
       })
     });
   }
-}, _TopNavBarBrand.displayName = "TopNavBarBrand", _TopNavBarBrand.componentId = 'TopNavBar.Brand', _TopNavBarBrand.allowedProps = allowedProps, _TopNavBarBrand.defaultProps = {}, _TopNavBarBrand.contextType = TopNavBarContext, _TopNavBarBrand)) || _class);
+}, _TopNavBarBrand.displayName = "TopNavBarBrand", _TopNavBarBrand.componentId = 'TopNavBar.Brand', _TopNavBarBrand.propTypes = propTypes, _TopNavBarBrand.allowedProps = allowedProps, _TopNavBarBrand.defaultProps = {}, _TopNavBarBrand.contextType = TopNavBarContext, _TopNavBarBrand)) || _class) || _class);
 export { TopNavBarBrand };
 export default TopNavBarBrand;

package/es/TopNavBar/TopNavBarBrand/props.js

@@ -22,5 +22,15 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types';
+const propTypes = {
+  screenReaderLabel: PropTypes.string.isRequired,
+  renderIcon: PropTypes.node,
+  iconBackground: PropTypes.string,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  as: PropTypes.elementType,
+  elementRef: PropTypes.func
+};
 const allowedProps = ['screenReaderLabel', 'renderIcon', 'iconBackground', 'href', 'onClick', 'as', 'elementRef'];
-export { allowedProps };
+export { propTypes, allowedProps };

package/es/TopNavBar/TopNavBarBreadcrumb/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _TopNavBarBreadcrumb, _IconHamburgerLine;
+var _dec, _dec2, _class, _TopNavBarBreadcrumb, _IconHamburgerLine;
 /*
  * The MIT License (MIT)
  *
@@ -24,10 +24,11 @@ var _dec, _class, _TopNavBarBreadcrumb, _IconHamburgerLine;
  */
 
 import { Children, Component } from 'react';
-import { allowedProps } from './props';
+import { allowedProps, propTypes } from './props';
 import TopNavBar from '../index';
 import { withStyle } from '@instructure/emotion';
 import generateStyle from '../TopNavBarBreadcrumb/styles';
+import { testable } from '@instructure/ui-testable';
 import { IconArrowOpenStartLine, IconHamburgerLine } from '@instructure/ui-icons';
 import TopNavBarContext from '../TopNavBarContext';
 import { error } from '@instructure/console';
@@ -41,7 +42,7 @@ id: TopNavBar.Breadcrumb
 @module TopNavBarBreadcrumb
  **/
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-let TopNavBarBreadcrumb = (_dec = withStyle(generateStyle, null), _dec(_class = (_TopNavBarBreadcrumb = class TopNavBarBreadcrumb extends Component {
+let TopNavBarBreadcrumb = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_TopNavBarBreadcrumb = class TopNavBarBreadcrumb extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -92,7 +93,6 @@ let TopNavBarBreadcrumb = (_dec = withStyle(generateStyle, null), _dec(_class =
     return this.context.inverseColor && (this.context.layout === 'desktop' ? _jsxs("div", {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarBreadcrumb,
-      "data-cid": "TopNavBarBreadcrumb",
       children: [_jsx("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.iconContainer,
         children: this.renderMenu()
@@ -103,7 +103,6 @@ let TopNavBarBreadcrumb = (_dec = withStyle(generateStyle, null), _dec(_class =
     }) : _jsx("div", {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarBreadcrumb,
-      "data-cid": "TopNavBarBreadcrumb",
       children: _jsx("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.linkContainer,
         children: lastButOneLink && _jsx(Link, {
@@ -115,6 +114,6 @@ let TopNavBarBreadcrumb = (_dec = withStyle(generateStyle, null), _dec(_class =
       })
     }));
   }
-}, _TopNavBarBreadcrumb.displayName = "TopNavBarBreadcrumb", _TopNavBarBreadcrumb.allowedProps = allowedProps, _TopNavBarBreadcrumb.defaultProps = {}, _TopNavBarBreadcrumb.contextType = TopNavBarContext, _TopNavBarBreadcrumb)) || _class);
+}, _TopNavBarBreadcrumb.displayName = "TopNavBarBreadcrumb", _TopNavBarBreadcrumb.propTypes = propTypes, _TopNavBarBreadcrumb.allowedProps = allowedProps, _TopNavBarBreadcrumb.defaultProps = {}, _TopNavBarBreadcrumb.contextType = TopNavBarContext, _TopNavBarBreadcrumb)) || _class) || _class);
 export { TopNavBarBreadcrumb };
 export default TopNavBarBreadcrumb;

package/es/TopNavBar/TopNavBarBreadcrumb/props.js

@@ -22,5 +22,13 @@
  * SOFTWARE.
  */
 
+import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
+import PropTypes from 'prop-types';
+import { Breadcrumb } from '@instructure/ui-breadcrumb';
+const propTypes = {
+  onClick: PropTypes.func,
+  elementRef: PropTypes.func,
+  children: ChildrenPropTypes.oneOf([Breadcrumb])
+};
 const allowedProps = ['children', 'onClick', 'elementRef'];
-export { allowedProps };
+export { propTypes, allowedProps };

package/es/TopNavBar/TopNavBarItem/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _TopNavBarItem, _IconArrowOpenUpSolid, _IconArrowOpenDownSol;
+var _dec, _dec2, _dec3, _class, _TopNavBarItem, _IconArrowOpenUpSolid, _IconArrowOpenDownSol;
 /*
  * The MIT License (MIT)
  *
@@ -26,6 +26,7 @@ var _dec, _dec2, _class, _TopNavBarItem, _IconArrowOpenUpSolid, _IconArrowOpenDo
 import { 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, InstUISettingsProvider } from '@instructure/emotion';
 import { IconArrowOpenDownSolid, IconArrowOpenUpSolid } from '@instructure/ui-icons';
@@ -38,7 +39,7 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { TopNavBarContext } from '../TopNavBarContext';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { allowedProps } from './props';
+import { propTypes, allowedProps } from './props';
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const navbarStackingDefault = 10000;
 const submenuStacking = navbarStackingDefault + 1;
@@ -51,7 +52,7 @@ id: TopNavBar.Item
 ---
 @module TopNavBarItem
 **/
-let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_TopNavBarItem = class TopNavBarItem extends Component {
+let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_TopNavBarItem = class TopNavBarItem extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -565,15 +566,14 @@ let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
     return _jsx("div", {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarItem,
-      "data-cid": "TopNavBarItem",
       children: content
     });
   }
-}, _TopNavBarItem.displayName = "TopNavBarItem", _TopNavBarItem.componentId = 'TopNavBar.Item', _TopNavBarItem.allowedProps = allowedProps, _TopNavBarItem.defaultProps = {
+}, _TopNavBarItem.displayName = "TopNavBarItem", _TopNavBarItem.componentId = 'TopNavBar.Item', _TopNavBarItem.propTypes = propTypes, _TopNavBarItem.allowedProps = allowedProps, _TopNavBarItem.defaultProps = {
   status: 'default',
   variant: 'default',
   showSubmenuChevron: true,
   shouldCloseOnClick: 'auto'
-}, _TopNavBarItem.contextType = TopNavBarContext, _TopNavBarItem)) || _class) || _class);
+}, _TopNavBarItem.contextType = TopNavBarContext, _TopNavBarItem)) || _class) || _class) || _class);
 export { TopNavBarItem };
 export default TopNavBarItem;

package/es/TopNavBar/TopNavBarItem/props.js

@@ -22,5 +22,48 @@
  * 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,
+  as: PropTypes.elementType,
+  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,
+  onHiddenClick: 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,
+  shouldCloseOnClick: PropTypes.oneOf(['auto', 'always', 'never']),
+  withFocusOutline: PropTypes.bool
+};
 const allowedProps = ['id', 'as', 'children', 'variant', 'status', 'renderSubmenu', 'showSubmenuChevron', 'customPopoverConfig', 'tooltip', 'renderAvatar', 'renderIcon', 'href', 'onClick', 'onHiddenClick', 'onSubmenuToggle', 'onMouseOver', 'onMouseOut', 'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'elementRef', 'itemRef', 'shouldCloseOnClick', 'withFocusOutline'];
-export { allowedProps };
+export { propTypes, allowedProps, topNavBarItemTooltipPropType };

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

@@ -1,4 +1,4 @@
-var _dec, _class, _TopNavBarDesktopLayout;
+var _dec, _dec2, _class, _TopNavBarDesktopLayout;
 /*
  * The MIT License (MIT)
  *
@@ -25,18 +25,19 @@ var _dec, _class, _TopNavBarDesktopLayout;
 
 import { Children, Component } from 'react';
 import { omitProps } from '@instructure/ui-react-utils';
+import { testable } from '@instructure/ui-testable';
 import { withStyle } from '@instructure/emotion';
 import { TopNavBarContext } from '../../TopNavBarContext';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { allowedProps } from './props';
+import { propTypes, allowedProps } from './props';
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
 private: true
 ---
 **/
-let TopNavBarDesktopLayout = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_TopNavBarDesktopLayout = class TopNavBarDesktopLayout extends Component {
+let TopNavBarDesktopLayout = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_TopNavBarDesktopLayout = class TopNavBarDesktopLayout extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -101,7 +102,6 @@ let TopNavBarDesktopLayout = (_dec = withStyle(generateStyle, generateComponentT
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarDesktopLayout,
       "aria-label": navLabel,
-      "data-cid": "TopNavBarDesktopLayout",
       children: [this.hasBrandBlock && _jsx("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.brandContainer,
         children: renderBrand
@@ -119,6 +119,6 @@ let TopNavBarDesktopLayout = (_dec = withStyle(generateStyle, generateComponentT
       })]
     });
   }
-}, _TopNavBarDesktopLayout.displayName = "TopNavBarDesktopLayout", _TopNavBarDesktopLayout.componentId = 'TopNavBar.DesktopLayout', _TopNavBarDesktopLayout.allowedProps = allowedProps, _TopNavBarDesktopLayout.defaultProps = {}, _TopNavBarDesktopLayout.contextType = TopNavBarContext, _TopNavBarDesktopLayout)) || _class);
+}, _TopNavBarDesktopLayout.displayName = "TopNavBarDesktopLayout", _TopNavBarDesktopLayout.componentId = 'TopNavBar.DesktopLayout', _TopNavBarDesktopLayout.propTypes = propTypes, _TopNavBarDesktopLayout.allowedProps = allowedProps, _TopNavBarDesktopLayout.defaultProps = {}, _TopNavBarDesktopLayout.contextType = TopNavBarContext, _TopNavBarDesktopLayout)) || _class) || _class);
 export { TopNavBarDesktopLayout };
 export default TopNavBarDesktopLayout;

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

@@ -22,8 +22,13 @@
  * SOFTWARE.
  */
 
-import { commonAllowedProps, desktopAllowedProps } from '../props';
+import { commonPropTypes, commonAllowedProps, desktopPropTypes, desktopAllowedProps } from '../props';
+const propTypes = {
+  // Edit PropTypes in TopNabBarLayout/props.ts
+  ...commonPropTypes,
+  ...desktopPropTypes
+};
 const allowedProps = [
 // Edit allowed props in TopNabBarLayout/props.ts
 ...commonAllowedProps, ...desktopAllowedProps];
-export { allowedProps };
+export { propTypes, allowedProps };

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

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _TopNavBarSmallViewportLayout, _IconXLine, _IconHamburgerLine;
+var _dec, _dec2, _dec3, _class, _TopNavBarSmallViewportLayout, _IconXLine, _IconHamburgerLine;
 /*
  * The MIT License (MIT)
  *
@@ -27,6 +27,7 @@ import { Fragment, Children, 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, Global } from '@instructure/emotion';
 import { Tray } from '@instructure/ui-tray';
@@ -39,14 +40,14 @@ import { mapItemsForDrilldown, renderMappedItemDrilldownSubpages, renderMappedIt
 import { TopNavBarContext } from '../../TopNavBarContext';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { allowedProps } from './props';
+import { propTypes, allowedProps } from './props';
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
 private: true
 ---
 **/
-let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_TopNavBarSmallViewportLayout = class TopNavBarSmallViewportLayout extends Component {
+let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_TopNavBarSmallViewportLayout = class TopNavBarSmallViewportLayout extends Component {
   constructor(props) {
     var _props$styles;
     super(props);
@@ -444,7 +445,6 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
       ...omitProps(this.props, allowedProps),
       ref: this.handleRef,
       "aria-label": navLabel,
-      "data-cid": "TopNavBarSmallViewportLayout",
       children: [_jsx(Global, {
         styles: styles === null || styles === void 0 ? void 0 : styles.globalStyles
       }), this.hasBreadcrumbBlock && _jsx("div", {
@@ -456,6 +456,6 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
       }), !this.hasBreadcrumbBlock && this.renderInPlaceDialog(), !this.hasBreadcrumbBlock && this.renderDropdownMenuTray()]
     });
   }
-}, _TopNavBarSmallViewportLayout.displayName = "TopNavBarSmallViewportLayout", _TopNavBarSmallViewportLayout.componentId = 'TopNavBar.SmallViewportLayout', _TopNavBarSmallViewportLayout.allowedProps = allowedProps, _TopNavBarSmallViewportLayout.defaultProps = {}, _TopNavBarSmallViewportLayout.contextType = TopNavBarContext, _TopNavBarSmallViewportLayout)) || _class) || _class);
+}, _TopNavBarSmallViewportLayout.displayName = "TopNavBarSmallViewportLayout", _TopNavBarSmallViewportLayout.componentId = 'TopNavBar.SmallViewportLayout', _TopNavBarSmallViewportLayout.propTypes = propTypes, _TopNavBarSmallViewportLayout.allowedProps = allowedProps, _TopNavBarSmallViewportLayout.defaultProps = {}, _TopNavBarSmallViewportLayout.contextType = TopNavBarContext, _TopNavBarSmallViewportLayout)) || _class) || _class) || _class);
 export { TopNavBarSmallViewportLayout };
 export default TopNavBarSmallViewportLayout;

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

@@ -22,8 +22,13 @@
  * SOFTWARE.
  */
 
-import { commonAllowedProps, smallViewportAllowedProps } from '../props';
+import { commonAllowedProps, commonPropTypes, smallViewportPropTypes, smallViewportAllowedProps } from '../props';
+const propTypes = {
+  // Edit PropTypes in TopNavBarLayout/props.ts
+  ...commonPropTypes,
+  ...smallViewportPropTypes
+};
 const allowedProps = [
 // Edit allowed props in TopNavBarLayout/props.ts
 ...commonAllowedProps, ...smallViewportAllowedProps];
-export { allowedProps };
+export { propTypes, allowedProps };

package/es/TopNavBar/TopNavBarLayout/index.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["smallViewportConfig", "styles", "makeStyles"];
-var _dec, _class, _TopNavBarLayout;
+var _dec, _dec2, _class, _TopNavBarLayout;
 /*
  * The MIT License (MIT)
  *
@@ -26,12 +26,13 @@ var _dec, _class, _TopNavBarLayout;
  */
 
 import { Component } from 'react';
+import { testable } from '@instructure/ui-testable';
 import { withStyle } from '@instructure/emotion';
 import { TopNavBarContext } from '../TopNavBarContext';
 import generateComponentTheme from './theme';
 import { TopNavBarSmallViewportLayout } from './SmallViewportLayout';
 import { TopNavBarDesktopLayout } from './DesktopLayout';
-import { allowedProps } from './props';
+import { propTypes, allowedProps } from './props';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -40,7 +41,7 @@ id: TopNavBar.Layout
 ---
 @module TopNavBarLayout
 **/
-let TopNavBarLayout = (_dec = withStyle(null, generateComponentTheme), _dec(_class = (_TopNavBarLayout = class TopNavBarLayout extends Component {
+let TopNavBarLayout = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_TopNavBarLayout = class TopNavBarLayout extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -103,8 +104,8 @@ let TopNavBarLayout = (_dec = withStyle(null, generateComponentTheme), _dec(_cla
       elementRef: this.handleRef
     });
   }
-}, _TopNavBarLayout.displayName = "TopNavBarLayout", _TopNavBarLayout.componentId = 'TopNavBar.Layout', _TopNavBarLayout.allowedProps = allowedProps, _TopNavBarLayout.defaultProps = {
+}, _TopNavBarLayout.displayName = "TopNavBarLayout", _TopNavBarLayout.componentId = 'TopNavBar.Layout', _TopNavBarLayout.propTypes = propTypes, _TopNavBarLayout.allowedProps = allowedProps, _TopNavBarLayout.defaultProps = {
   smallViewportConfig: {}
-}, _TopNavBarLayout.contextType = TopNavBarContext, _TopNavBarLayout)) || _class);
+}, _TopNavBarLayout.contextType = TopNavBarContext, _TopNavBarLayout)) || _class) || _class);
 export { TopNavBarLayout };
 export default TopNavBarLayout;

package/es/TopNavBar/TopNavBarLayout/props.js

@@ -22,8 +22,52 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types';
+import { Children as ChildrenPropTypes, element } from '@instructure/ui-prop-types';
+import { TopNavBarActionItems } from '../TopNavBarActionItems';
+import { TopNavBarBrand } from '../TopNavBarBrand';
+import { TopNavBarMenuItems } from '../TopNavBarMenuItems';
+import { TopNavBarUser } from '../TopNavBarUser';
+import { topNavBarItemTooltipPropType } from '../TopNavBarItem/props';
+import { TopNavBarBreadcrumb } from '../TopNavBarBreadcrumb';
+const commonPropTypes = {
+  renderBrand: ChildrenPropTypes.oneOf([TopNavBarBrand]),
+  renderMenuItems: ChildrenPropTypes.oneOf([TopNavBarMenuItems]),
+  renderActionItems: ChildrenPropTypes.oneOf([TopNavBarActionItems]),
+  renderUser: ChildrenPropTypes.oneOf([TopNavBarUser]),
+  renderBreadcrumb: ChildrenPropTypes.oneOf([TopNavBarBreadcrumb]),
+  navLabel: PropTypes.string,
+  elementRef: PropTypes.func
+};
+const desktopPropTypes = {
+  hideActionsUserSeparator: PropTypes.bool
+};
+const smallViewportPropTypes = {
+  dropdownMenuToggleButtonLabel: PropTypes.string.isRequired,
+  dropdownMenuToggleButtonTooltip: topNavBarItemTooltipPropType,
+  dropdownMenuLabel: PropTypes.string,
+  alternativeTitle: PropTypes.node,
+  renderInPlaceDialogConfig: PropTypes.shape({
+    open: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    closeButtonLabel: PropTypes.string.isRequired,
+    content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    returnFocusElement: PropTypes.func,
+    shouldContainFocus: PropTypes.bool,
+    shouldCloseOnDocumentClick: PropTypes.bool,
+    shouldCloseOnEscape: PropTypes.bool
+  }),
+  trayMountNode: PropTypes.oneOfType([element, PropTypes.func]),
+  onDropdownMenuToggle: PropTypes.func,
+  onDropdownMenuSelect: PropTypes.func,
+  renderNavbarStartDangerousHack: PropTypes.node
+};
+const propTypes = {
+  ...commonPropTypes,
+  smallViewportConfig: PropTypes.shape(smallViewportPropTypes).isRequired
+};
 const commonAllowedProps = ['renderBrand', 'renderMenuItems', 'renderActionItems', 'renderUser', 'renderBreadcrumb', 'navLabel', 'elementRef'];
 const desktopAllowedProps = ['hideActionsUserSeparator'];
 const smallViewportAllowedProps = ['dropdownMenuToggleButtonLabel', 'dropdownMenuToggleButtonTooltip', 'dropdownMenuLabel', 'alternativeTitle', 'renderInPlaceDialogConfig', 'trayMountNode', 'onDropdownMenuToggle', 'onDropdownMenuSelect'];
 const allowedProps = [...commonAllowedProps, 'smallViewportConfig'];
-export { allowedProps, commonAllowedProps, desktopAllowedProps, smallViewportAllowedProps };
+export { propTypes, allowedProps, commonPropTypes, commonAllowedProps, desktopPropTypes, smallViewportPropTypes, desktopAllowedProps, smallViewportAllowedProps };

package/es/TopNavBar/TopNavBarMenuItems/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _TopNavBarMenuItems, _span;
+var _dec, _dec2, _dec3, _class, _TopNavBarMenuItems, _span;
 /*
  * The MIT License (MIT)
  *
@@ -26,6 +26,7 @@ var _dec, _dec2, _class, _TopNavBarMenuItems, _span;
 import { Children, Component } from 'react';
 import { omitProps, safeCloneElement, withDeterministicId } from '@instructure/ui-react-utils';
 import { warn, error } from '@instructure/console';
+import { testable } from '@instructure/ui-testable';
 import { withStyle } from '@instructure/emotion';
 import { Drilldown } from '@instructure/ui-drilldown';
 import { TruncateList } from '@instructure/ui-truncate-list';
@@ -34,7 +35,7 @@ import { TopNavBarItem } from '../TopNavBarItem';
 import { mapItemsForDrilldown, renderMappedItemDrilldownSubpages, renderMappedItemsAsDrilldownOptions } from '../utils/mapItemsForDrilldown';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { allowedProps } from './props';
+import { propTypes, allowedProps } from './props';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
 /**
@@ -44,7 +45,7 @@ id: TopNavBar.MenuItems
 ---
 @module TopNavBarMenuItems
 **/
-let TopNavBarMenuItems = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_TopNavBarMenuItems = class TopNavBarMenuItems extends Component {
+let TopNavBarMenuItems = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_TopNavBarMenuItems = class TopNavBarMenuItems extends Component {
   constructor(props) {
     super(props);
     this._hiddenMenuItemsMenuTriggerId = void 0;
@@ -124,8 +125,7 @@ let TopNavBarMenuItems = (_dec = withDeterministicId(), _dec2 = withStyle(genera
       const _child$props = child.props,
         id = _child$props.id,
         status = _child$props.status,
-        _child$props$variant = _child$props.variant,
-        variant = _child$props$variant === void 0 ? 'default' : _child$props$variant,
+        variant = _child$props.variant,
         renderSubmenu = _child$props.renderSubmenu,
         renderAvatar = _child$props.renderAvatar;
       const isCurrentPage = currentPageId === id;
@@ -182,10 +182,9 @@ let TopNavBarMenuItems = (_dec = withDeterministicId(), _dec2 = withStyle(genera
       ...((styles === null || styles === void 0 ? void 0 : styles.itemSpacing) && {
         itemSpacing: styles.itemSpacing
       }),
-      "aria-label": listLabel,
-      "data-cid": "TopNavBarMenuItems"
+      "aria-label": listLabel
     }, this.renderChildren());
   }
-}, _TopNavBarMenuItems.displayName = "TopNavBarMenuItems", _TopNavBarMenuItems.componentId = 'TopNavBar.MenuItems', _TopNavBarMenuItems.allowedProps = allowedProps, _TopNavBarMenuItems.defaultProps = {}, _TopNavBarMenuItems.contextType = TopNavBarContext, _TopNavBarMenuItems)) || _class) || _class);
+}, _TopNavBarMenuItems.displayName = "TopNavBarMenuItems", _TopNavBarMenuItems.componentId = 'TopNavBar.MenuItems', _TopNavBarMenuItems.propTypes = propTypes, _TopNavBarMenuItems.allowedProps = allowedProps, _TopNavBarMenuItems.defaultProps = {}, _TopNavBarMenuItems.contextType = TopNavBarContext, _TopNavBarMenuItems)) || _class) || _class) || _class);
 export { TopNavBarMenuItems };
 export default TopNavBarMenuItems;

package/es/TopNavBar/TopNavBarMenuItems/props.js

@@ -22,5 +22,15 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types';
+import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
+import { TopNavBarItem } from '../TopNavBarItem';
+const propTypes = {
+  children: ChildrenPropTypes.oneOf([TopNavBarItem]),
+  currentPageId: PropTypes.string,
+  renderHiddenItemsMenuTriggerLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.string]).isRequired,
+  listLabel: PropTypes.string,
+  elementRef: PropTypes.func
+};
 const allowedProps = ['children', 'currentPageId', 'renderHiddenItemsMenuTriggerLabel', 'listLabel', 'elementRef'];
-export { allowedProps };
+export { propTypes, allowedProps };