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

package/es/TopNavBar/TopNavBarUser/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _TopNavBarUser;
+var _dec, _dec2, _class, _TopNavBarUser;
 /*
  * The MIT License (MIT)
  *
@@ -26,10 +26,11 @@ var _dec, _class, _TopNavBarUser;
 import { Component, Children } from 'react';
 import { error } from '@instructure/console';
 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 { allowedProps } from './props';
+import { propTypes, allowedProps } from './props';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -38,7 +39,7 @@ id: TopNavBar.User
 ---
 @module TopNavBarUser
 **/
-let TopNavBarUser = (_dec = withStyle(generateStyle, null), _dec(_class = (_TopNavBarUser = class TopNavBarUser extends Component {
+let TopNavBarUser = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_TopNavBarUser = class TopNavBarUser extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -85,10 +86,9 @@ let TopNavBarUser = (_dec = withStyle(generateStyle, null), _dec(_class = (_TopN
       ...omitProps(this.props, allowedProps),
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarUser,
-      "data-cid": "TopNavBarUser",
       children: this.content
     });
   }
-}, _TopNavBarUser.displayName = "TopNavBarUser", _TopNavBarUser.componentId = 'TopNavBar.User', _TopNavBarUser.allowedProps = allowedProps, _TopNavBarUser.defaultProps = {}, _TopNavBarUser.contextType = TopNavBarContext, _TopNavBarUser)) || _class);
+}, _TopNavBarUser.displayName = "TopNavBarUser", _TopNavBarUser.componentId = 'TopNavBar.User', _TopNavBarUser.propTypes = propTypes, _TopNavBarUser.allowedProps = allowedProps, _TopNavBarUser.defaultProps = {}, _TopNavBarUser.contextType = TopNavBarContext, _TopNavBarUser)) || _class) || _class);
 export { TopNavBarUser };
 export default TopNavBarUser;

package/es/TopNavBar/TopNavBarUser/props.js

@@ -22,5 +22,12 @@
  * 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]).isRequired,
+  elementRef: PropTypes.func
+};
 const allowedProps = ['children', 'elementRef'];
-export { allowedProps };
+export { propTypes, allowedProps };

package/es/TopNavBar/index.js

@@ -1,3 +1,4 @@
+var _dec, _class, _TopNavBar;
 /*
  * The MIT License (MIT)
  *
@@ -24,6 +25,7 @@
 
 import { Component } from 'react';
 import { error } from '@instructure/console';
+import { testable } from '@instructure/ui-testable';
 import { px } from '@instructure/ui-utils';
 import { matchComponentTypes } from '@instructure/ui-react-utils';
 import { Responsive } from '@instructure/ui-responsive';
@@ -35,14 +37,14 @@ import { TopNavBarMenuItems } from './TopNavBarMenuItems';
 import { TopNavBarUser } from './TopNavBarUser';
 import { TopNavBarBreadcrumb } from './TopNavBarBreadcrumb';
 import { TopNavBarContext } from './TopNavBarContext';
-import { allowedProps } from './props';
+import { propTypes, allowedProps } from './props';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
 ---
 **/
-class TopNavBar extends Component {
+let TopNavBar = (_dec = testable(), _dec(_class = (_TopNavBar = class TopNavBar extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -63,7 +65,6 @@ class TopNavBar extends Component {
       mediaQueryMatch = _this$props.mediaQueryMatch,
       inverseColor = _this$props.inverseColor;
     return _jsx(Responsive, {
-      "data-cid": "TopNavBar",
       elementRef: this.handleRef,
       match: mediaQueryMatch,
       query: {
@@ -94,23 +95,10 @@ class TopNavBar extends Component {
       }
     });
   }
-}
-TopNavBar.displayName = "TopNavBar";
-TopNavBar.componentId = 'TopNavBar';
-// TODO: mention subcomponent registration in "new component" docs
-TopNavBar.ActionItems = TopNavBarActionItems;
-TopNavBar.Brand = TopNavBarBrand;
-TopNavBar.Item = TopNavBarItem;
-TopNavBar.Layout = TopNavBarLayout;
-TopNavBar.MenuItems = TopNavBarMenuItems;
-TopNavBar.User = TopNavBarUser;
-TopNavBar.Breadcrumb = TopNavBarBreadcrumb;
-TopNavBar.contextType = TopNavBarContext;
-TopNavBar.allowedProps = allowedProps;
-TopNavBar.defaultProps = {
+}, _TopNavBar.displayName = "TopNavBar", _TopNavBar.componentId = 'TopNavBar', _TopNavBar.ActionItems = TopNavBarActionItems, _TopNavBar.Brand = TopNavBarBrand, _TopNavBar.Item = TopNavBarItem, _TopNavBar.Layout = TopNavBarLayout, _TopNavBar.MenuItems = TopNavBarMenuItems, _TopNavBar.User = TopNavBarUser, _TopNavBar.Breadcrumb = TopNavBarBreadcrumb, _TopNavBar.contextType = TopNavBarContext, _TopNavBar.propTypes = propTypes, _TopNavBar.allowedProps = allowedProps, _TopNavBar.defaultProps = {
   breakpoint: 1024,
   mediaQueryMatch: 'media',
   inverseColor: false
-};
+}, _TopNavBar)) || _class);
 export { TopNavBar };
 export default TopNavBar;

package/es/TopNavBar/props.js

@@ -22,5 +22,13 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types';
+const propTypes = {
+  children: PropTypes.func,
+  breakpoint: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  mediaQueryMatch: PropTypes.oneOf(['element', 'media']),
+  inverseColor: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  elementRef: PropTypes.func
+};
 const allowedProps = ['children', 'breakpoint', 'mediaQueryMatch', 'inverseColor', 'elementRef'];
-export { allowedProps };
+export { propTypes, allowedProps };

package/es/TopNavBar/utils/mapItemsForDrilldown.js

@@ -43,8 +43,7 @@ const mapItemsForDrilldown = (itemList, options = {}) => {
       id = _item$props.id,
       children = _item$props.children,
       status = _item$props.status,
-      _item$props$variant = _item$props.variant,
-      variant = _item$props$variant === void 0 ? 'default' : _item$props$variant,
+      variant = _item$props.variant,
       href = _item$props.href,
       onClick = _item$props.onClick,
       shouldCloseOnClick = _item$props.shouldCloseOnClick;

package/lib/TopNavBar/TopNavBarActionItems/index.js

@@ -10,6 +10,7 @@ var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _console = require("@instructure/console");
 var _emotion = require("@instructure/emotion");
 var _Drilldown = require("@instructure/ui-drilldown/lib/Drilldown");
@@ -23,7 +24,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _react2 = require("@emotion/react");
-var _dec, _dec2, _class, _TopNavBarActionItems;
+var _dec, _dec2, _dec3, _class, _TopNavBarActionItems;
 /*
  * The MIT License (MIT)
  *
@@ -54,7 +55,7 @@ id: TopNavBar.ActionItems
 ---
 @module TopNavBarActionItems
 **/
-let TopNavBarActionItems = exports.TopNavBarActionItems = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_TopNavBarActionItems = class TopNavBarActionItems extends _react.Component {
+let TopNavBarActionItems = exports.TopNavBarActionItems = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_TopNavBarActionItems = class TopNavBarActionItems extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -195,12 +196,11 @@ let TopNavBarActionItems = exports.TopNavBarActionItems = (_dec = (0, _withDeter
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarActionItems,
       "aria-label": listLabel,
-      "data-cid": "TopNavBarActionItems",
       children: this.childrenArray.map(item => (0, _jsxRuntime.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 = _props.allowedProps, _TopNavBarActionItems.defaultProps = {}, _TopNavBarActionItems.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarActionItems)) || _class) || _class);
+}, _TopNavBarActionItems.displayName = "TopNavBarActionItems", _TopNavBarActionItems.componentId = 'TopNavBar.ActionItems', _TopNavBarActionItems.propTypes = _props.propTypes, _TopNavBarActionItems.allowedProps = _props.allowedProps, _TopNavBarActionItems.defaultProps = {}, _TopNavBarActionItems.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarActionItems)) || _class) || _class) || _class);
 var _default = exports.default = TopNavBarActionItems;

package/lib/TopNavBar/TopNavBarActionItems/props.js

@@ -1,9 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+var _TopNavBarItem = require("../TopNavBarItem");
+var _props = require("../TopNavBarItem/props");
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +33,11 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
+const propTypes = exports.propTypes = {
+  children: _Children.Children.oneOf([_TopNavBarItem.TopNavBarItem]),
+  listLabel: _propTypes.default.string,
+  renderHiddenItemsMenuTriggerLabel: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]).isRequired,
+  renderHiddenItemsMenuTriggerTooltip: _propTypes.default.oneOfType([_props.topNavBarItemTooltipPropType, _propTypes.default.func]),
+  elementRef: _propTypes.default.func
+};
 const allowedProps = exports.allowedProps = ['children', 'listLabel', 'renderHiddenItemsMenuTriggerLabel', 'renderHiddenItemsMenuTriggerTooltip', 'elementRef'];

package/lib/TopNavBar/TopNavBarBrand/index.js

@@ -8,6 +8,7 @@ exports.default = exports.TopNavBarBrand = void 0;
 var _react = require("react");
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _emotion = require("@instructure/emotion");
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
 var _View = require("@instructure/ui-view/lib/View");
@@ -16,7 +17,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _TopNavBarBrand;
+var _dec, _dec2, _class, _TopNavBarBrand;
 /*
  * The MIT License (MIT)
  *
@@ -47,7 +48,7 @@ id: TopNavBar.Brand
 ---
 @module TopNavBarBrand
 **/
-let TopNavBarBrand = exports.TopNavBarBrand = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_TopNavBarBrand = class TopNavBarBrand extends _react.Component {
+let TopNavBarBrand = exports.TopNavBarBrand = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_TopNavBarBrand = class TopNavBarBrand extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -88,7 +89,6 @@ let TopNavBarBrand = exports.TopNavBarBrand = (_dec = (0, _emotion.withStyle)(_s
     return (0, _jsxRuntime.jsx)("div", {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarBrand,
-      "data-cid": "TopNavBarBrand",
       children: renderIcon && (0, _jsxRuntime.jsxs)(_View.View, {
         ...(0, _omitProps.omitProps)(this.props, _props.allowedProps),
         css: styles === null || styles === void 0 ? void 0 : styles.container,
@@ -113,5 +113,5 @@ let TopNavBarBrand = exports.TopNavBarBrand = (_dec = (0, _emotion.withStyle)(_s
       })
     });
   }
-}, _TopNavBarBrand.displayName = "TopNavBarBrand", _TopNavBarBrand.componentId = 'TopNavBar.Brand', _TopNavBarBrand.allowedProps = _props.allowedProps, _TopNavBarBrand.defaultProps = {}, _TopNavBarBrand.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarBrand)) || _class);
+}, _TopNavBarBrand.displayName = "TopNavBarBrand", _TopNavBarBrand.componentId = 'TopNavBar.Brand', _TopNavBarBrand.propTypes = _props.propTypes, _TopNavBarBrand.allowedProps = _props.allowedProps, _TopNavBarBrand.defaultProps = {}, _TopNavBarBrand.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarBrand)) || _class) || _class);
 var _default = exports.default = TopNavBarBrand;

package/lib/TopNavBar/TopNavBarBrand/props.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +30,13 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
+const propTypes = exports.propTypes = {
+  screenReaderLabel: _propTypes.default.string.isRequired,
+  renderIcon: _propTypes.default.node,
+  iconBackground: _propTypes.default.string,
+  href: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  as: _propTypes.default.elementType,
+  elementRef: _propTypes.default.func
+};
 const allowedProps = exports.allowedProps = ['screenReaderLabel', 'renderIcon', 'iconBackground', 'href', 'onClick', 'as', 'elementRef'];

package/lib/TopNavBar/TopNavBarBreadcrumb/index.js

@@ -10,13 +10,14 @@ var _props = require("./props");
 var _index = _interopRequireDefault(require("../index"));
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("../TopNavBarBreadcrumb/styles"));
+var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _IconArrowOpenStartLine = require("@instructure/ui-icons/lib/IconArrowOpenStartLine.js");
 var _IconHamburgerLine2 = require("@instructure/ui-icons/lib/IconHamburgerLine.js");
 var _TopNavBarContext = _interopRequireDefault(require("../TopNavBarContext"));
 var _console = require("@instructure/console");
 var _Link = require("@instructure/ui-link/lib/Link");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _TopNavBarBreadcrumb, _IconHamburgerLine;
+var _dec, _dec2, _class, _TopNavBarBreadcrumb, _IconHamburgerLine;
 /*
  * The MIT License (MIT)
  *
@@ -47,7 +48,7 @@ id: TopNavBar.Breadcrumb
 ---
 @module TopNavBarBreadcrumb
  **/
-let TopNavBarBreadcrumb = exports.TopNavBarBreadcrumb = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_TopNavBarBreadcrumb = class TopNavBarBreadcrumb extends _react.Component {
+let TopNavBarBreadcrumb = exports.TopNavBarBreadcrumb = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_TopNavBarBreadcrumb = class TopNavBarBreadcrumb extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -98,7 +99,6 @@ let TopNavBarBreadcrumb = exports.TopNavBarBreadcrumb = (_dec = (0, _emotion.wit
     return this.context.inverseColor && (this.context.layout === 'desktop' ? (0, _jsxRuntime.jsxs)("div", {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarBreadcrumb,
-      "data-cid": "TopNavBarBreadcrumb",
       children: [(0, _jsxRuntime.jsx)("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.iconContainer,
         children: this.renderMenu()
@@ -109,7 +109,6 @@ let TopNavBarBreadcrumb = exports.TopNavBarBreadcrumb = (_dec = (0, _emotion.wit
     }) : (0, _jsxRuntime.jsx)("div", {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarBreadcrumb,
-      "data-cid": "TopNavBarBreadcrumb",
       children: (0, _jsxRuntime.jsx)("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.linkContainer,
         children: lastButOneLink && (0, _jsxRuntime.jsx)(_Link.Link, {
@@ -121,5 +120,5 @@ let TopNavBarBreadcrumb = exports.TopNavBarBreadcrumb = (_dec = (0, _emotion.wit
       })
     }));
   }
-}, _TopNavBarBreadcrumb.displayName = "TopNavBarBreadcrumb", _TopNavBarBreadcrumb.allowedProps = _props.allowedProps, _TopNavBarBreadcrumb.defaultProps = {}, _TopNavBarBreadcrumb.contextType = _TopNavBarContext.default, _TopNavBarBreadcrumb)) || _class);
+}, _TopNavBarBreadcrumb.displayName = "TopNavBarBreadcrumb", _TopNavBarBreadcrumb.propTypes = _props.propTypes, _TopNavBarBreadcrumb.allowedProps = _props.allowedProps, _TopNavBarBreadcrumb.defaultProps = {}, _TopNavBarBreadcrumb.contextType = _TopNavBarContext.default, _TopNavBarBreadcrumb)) || _class) || _class);
 var _default = exports.default = TopNavBarBreadcrumb;

package/lib/TopNavBar/TopNavBarBreadcrumb/props.js

@@ -1,9 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Breadcrumb = require("@instructure/ui-breadcrumb/lib/Breadcrumb");
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +32,9 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
+const propTypes = exports.propTypes = {
+  onClick: _propTypes.default.func,
+  elementRef: _propTypes.default.func,
+  children: _Children.Children.oneOf([_Breadcrumb.Breadcrumb])
+};
 const allowedProps = exports.allowedProps = ['children', 'onClick', 'elementRef'];

package/lib/TopNavBar/TopNavBarItem/index.js

@@ -13,6 +13,7 @@ var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProp
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
+var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _console = require("@instructure/console");
 var _emotion = require("@instructure/emotion");
 var _IconArrowOpenDownSolid = require("@instructure/ui-icons/lib/IconArrowOpenDownSolid.js");
@@ -28,7 +29,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class, _TopNavBarItem, _IconArrowOpenUpSolid, _IconArrowOpenDownSol;
+var _dec, _dec2, _dec3, _class, _TopNavBarItem, _IconArrowOpenUpSolid, _IconArrowOpenDownSol;
 /*
  * The MIT License (MIT)
  *
@@ -63,7 +64,7 @@ id: TopNavBar.Item
 ---
 @module TopNavBarItem
 **/
-let TopNavBarItem = exports.TopNavBarItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_TopNavBarItem = class TopNavBarItem extends _react.Component {
+let TopNavBarItem = exports.TopNavBarItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_TopNavBarItem = class TopNavBarItem extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -577,14 +578,13 @@ let TopNavBarItem = exports.TopNavBarItem = (_dec = (0, _withDeterministicId.wit
     return (0, _jsxRuntime.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 = _props.allowedProps, _TopNavBarItem.defaultProps = {
+}, _TopNavBarItem.displayName = "TopNavBarItem", _TopNavBarItem.componentId = 'TopNavBar.Item', _TopNavBarItem.propTypes = _props.propTypes, _TopNavBarItem.allowedProps = _props.allowedProps, _TopNavBarItem.defaultProps = {
   status: 'default',
   variant: 'default',
   showSubmenuChevron: true,
   shouldCloseOnClick: 'auto'
-}, _TopNavBarItem.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarItem)) || _class) || _class);
+}, _TopNavBarItem.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarItem)) || _class) || _class) || _class);
 var _default = exports.default = TopNavBarItem;

package/lib/TopNavBar/TopNavBarItem/props.js

@@ -1,9 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.topNavBarItemTooltipPropType = exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+var _Drilldown = require("@instructure/ui-drilldown/lib/Drilldown");
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +32,44 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
+const topNavBarItemTooltipPropType = exports.topNavBarItemTooltipPropType = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
+  renderTip: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
+  color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
+  placement: _propTypes.default.string,
+  offsetX: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  offsetY: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  onShowContent: _propTypes.default.func,
+  onHideContent: _propTypes.default.func
+})]);
+const propTypes = exports.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  as: _propTypes.default.elementType,
+  children: _propTypes.default.node.isRequired,
+  variant: _propTypes.default.oneOf(['default', 'button', 'icon', 'avatar']),
+  status: _propTypes.default.oneOf(['default', 'active', 'disabled']),
+  renderSubmenu: _Children.Children.oneOf([_Drilldown.Drilldown]),
+  showSubmenuChevron: _propTypes.default.bool,
+  customPopoverConfig: _propTypes.default.object,
+  tooltip: topNavBarItemTooltipPropType,
+  renderAvatar: _propTypes.default.shape({
+    avatarName: _propTypes.default.string.isRequired,
+    avatarSrc: _propTypes.default.string,
+    avatarAlt: _propTypes.default.string
+  }),
+  renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  href: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  onHiddenClick: _propTypes.default.func,
+  onSubmenuToggle: _propTypes.default.func,
+  onMouseOver: _propTypes.default.func,
+  onMouseOut: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
+  onKeyUp: _propTypes.default.func,
+  elementRef: _propTypes.default.func,
+  itemRef: _propTypes.default.func,
+  shouldCloseOnClick: _propTypes.default.oneOf(['auto', 'always', 'never']),
+  withFocusOutline: _propTypes.default.bool
+};
 const allowedProps = exports.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'];

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

@@ -7,13 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TopNavBarDesktopLayout = void 0;
 var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _emotion = require("@instructure/emotion");
 var _TopNavBarContext = require("../../TopNavBarContext");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _TopNavBarDesktopLayout;
+var _dec, _dec2, _class, _TopNavBarDesktopLayout;
 /*
  * The MIT License (MIT)
  *
@@ -42,7 +43,7 @@ var _dec, _class, _TopNavBarDesktopLayout;
 private: true
 ---
 **/
-let TopNavBarDesktopLayout = exports.TopNavBarDesktopLayout = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_TopNavBarDesktopLayout = class TopNavBarDesktopLayout extends _react.Component {
+let TopNavBarDesktopLayout = exports.TopNavBarDesktopLayout = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_TopNavBarDesktopLayout = class TopNavBarDesktopLayout extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -107,7 +108,6 @@ let TopNavBarDesktopLayout = exports.TopNavBarDesktopLayout = (_dec = (0, _emoti
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarDesktopLayout,
       "aria-label": navLabel,
-      "data-cid": "TopNavBarDesktopLayout",
       children: [this.hasBrandBlock && (0, _jsxRuntime.jsx)("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.brandContainer,
         children: renderBrand
@@ -125,5 +125,5 @@ let TopNavBarDesktopLayout = exports.TopNavBarDesktopLayout = (_dec = (0, _emoti
       })]
     });
   }
-}, _TopNavBarDesktopLayout.displayName = "TopNavBarDesktopLayout", _TopNavBarDesktopLayout.componentId = 'TopNavBar.DesktopLayout', _TopNavBarDesktopLayout.allowedProps = _props.allowedProps, _TopNavBarDesktopLayout.defaultProps = {}, _TopNavBarDesktopLayout.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarDesktopLayout)) || _class);
+}, _TopNavBarDesktopLayout.displayName = "TopNavBarDesktopLayout", _TopNavBarDesktopLayout.componentId = 'TopNavBar.DesktopLayout', _TopNavBarDesktopLayout.propTypes = _props.propTypes, _TopNavBarDesktopLayout.allowedProps = _props.allowedProps, _TopNavBarDesktopLayout.defaultProps = {}, _TopNavBarDesktopLayout.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarDesktopLayout)) || _class) || _class);
 var _default = exports.default = TopNavBarDesktopLayout;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
 var _props = require("../props");
 /*
  * The MIT License (MIT)
@@ -29,6 +29,11 @@ var _props = require("../props");
  * SOFTWARE.
  */
 
+const propTypes = exports.propTypes = {
+  // Edit PropTypes in TopNabBarLayout/props.ts
+  ..._props.commonPropTypes,
+  ..._props.desktopPropTypes
+};
 const allowedProps = exports.allowedProps = [
 // Edit allowed props in TopNabBarLayout/props.ts
 ..._props.commonAllowedProps, ..._props.desktopAllowedProps];

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

@@ -11,6 +11,7 @@ var _withDeterministicId = require("@instructure/ui-react-utils/lib/Deterministi
 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");
@@ -29,7 +30,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class, _TopNavBarSmallViewportLayout, _IconXLine, _IconHamburgerLine;
+var _dec, _dec2, _dec3, _class, _TopNavBarSmallViewportLayout, _IconXLine, _IconHamburgerLine;
 /*
  * The MIT License (MIT)
  *
@@ -58,7 +59,7 @@ var _dec, _dec2, _class, _TopNavBarSmallViewportLayout, _IconXLine, _IconHamburg
 private: true
 ---
 **/
-let TopNavBarSmallViewportLayout = exports.TopNavBarSmallViewportLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_TopNavBarSmallViewportLayout = class TopNavBarSmallViewportLayout extends _react.Component {
+let TopNavBarSmallViewportLayout = exports.TopNavBarSmallViewportLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_TopNavBarSmallViewportLayout = class TopNavBarSmallViewportLayout extends _react.Component {
   constructor(props) {
     var _props$styles;
     super(props);
@@ -456,7 +457,6 @@ let TopNavBarSmallViewportLayout = exports.TopNavBarSmallViewportLayout = (_dec
       ...(0, _omitProps.omitProps)(this.props, _props.allowedProps),
       ref: this.handleRef,
       "aria-label": navLabel,
-      "data-cid": "TopNavBarSmallViewportLayout",
       children: [(0, _jsxRuntime.jsx)(_emotion.Global, {
         styles: styles === null || styles === void 0 ? void 0 : styles.globalStyles
       }), this.hasBreadcrumbBlock && (0, _jsxRuntime.jsx)("div", {
@@ -468,5 +468,5 @@ let TopNavBarSmallViewportLayout = exports.TopNavBarSmallViewportLayout = (_dec
       }), !this.hasBreadcrumbBlock && this.renderInPlaceDialog(), !this.hasBreadcrumbBlock && this.renderDropdownMenuTray()]
     });
   }
-}, _TopNavBarSmallViewportLayout.displayName = "TopNavBarSmallViewportLayout", _TopNavBarSmallViewportLayout.componentId = 'TopNavBar.SmallViewportLayout', _TopNavBarSmallViewportLayout.allowedProps = _props.allowedProps, _TopNavBarSmallViewportLayout.defaultProps = {}, _TopNavBarSmallViewportLayout.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarSmallViewportLayout)) || _class) || _class);
+}, _TopNavBarSmallViewportLayout.displayName = "TopNavBarSmallViewportLayout", _TopNavBarSmallViewportLayout.componentId = 'TopNavBar.SmallViewportLayout', _TopNavBarSmallViewportLayout.propTypes = _props.propTypes, _TopNavBarSmallViewportLayout.allowedProps = _props.allowedProps, _TopNavBarSmallViewportLayout.defaultProps = {}, _TopNavBarSmallViewportLayout.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarSmallViewportLayout)) || _class) || _class) || _class);
 var _default = exports.default = TopNavBarSmallViewportLayout;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
 var _props = require("../props");
 /*
  * The MIT License (MIT)
@@ -29,6 +29,11 @@ var _props = require("../props");
  * SOFTWARE.
  */
 
+const propTypes = exports.propTypes = {
+  // Edit PropTypes in TopNavBarLayout/props.ts
+  ..._props.commonPropTypes,
+  ..._props.smallViewportPropTypes
+};
 const allowedProps = exports.allowedProps = [
 // Edit allowed props in TopNavBarLayout/props.ts
 ..._props.commonAllowedProps, ..._props.smallViewportAllowedProps];

package/lib/TopNavBar/TopNavBarLayout/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TopNavBarLayout = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
+var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _emotion = require("@instructure/emotion");
 var _TopNavBarContext = require("../TopNavBarContext");
 var _theme = _interopRequireDefault(require("./theme"));
@@ -15,7 +16,7 @@ var _DesktopLayout = require("./DesktopLayout");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["smallViewportConfig", "styles", "makeStyles"];
-var _dec, _class, _TopNavBarLayout;
+var _dec, _dec2, _class, _TopNavBarLayout;
 /*
  * The MIT License (MIT)
  *
@@ -46,7 +47,7 @@ id: TopNavBar.Layout
 ---
 @module TopNavBarLayout
 **/
-let TopNavBarLayout = exports.TopNavBarLayout = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec(_class = (_TopNavBarLayout = class TopNavBarLayout extends _react.Component {
+let TopNavBarLayout = exports.TopNavBarLayout = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_TopNavBarLayout = class TopNavBarLayout extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -109,7 +110,7 @@ let TopNavBarLayout = exports.TopNavBarLayout = (_dec = (0, _emotion.withStyle)(
       elementRef: this.handleRef
     });
   }
-}, _TopNavBarLayout.displayName = "TopNavBarLayout", _TopNavBarLayout.componentId = 'TopNavBar.Layout', _TopNavBarLayout.allowedProps = _props.allowedProps, _TopNavBarLayout.defaultProps = {
+}, _TopNavBarLayout.displayName = "TopNavBarLayout", _TopNavBarLayout.componentId = 'TopNavBar.Layout', _TopNavBarLayout.propTypes = _props.propTypes, _TopNavBarLayout.allowedProps = _props.allowedProps, _TopNavBarLayout.defaultProps = {
   smallViewportConfig: {}
-}, _TopNavBarLayout.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarLayout)) || _class);
+}, _TopNavBarLayout.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarLayout)) || _class) || _class);
 var _default = exports.default = TopNavBarLayout;