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

package/lib/TopNavBar/TopNavBarLayout/props.js

@@ -1,9 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.smallViewportAllowedProps = exports.desktopAllowedProps = exports.commonAllowedProps = exports.allowedProps = void 0;
+exports.smallViewportPropTypes = exports.smallViewportAllowedProps = exports.propTypes = exports.desktopPropTypes = exports.desktopAllowedProps = exports.commonPropTypes = exports.commonAllowedProps = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+var _element = require("@instructure/ui-prop-types/lib/element.js");
+var _TopNavBarActionItems = require("../TopNavBarActionItems");
+var _TopNavBarBrand = require("../TopNavBarBrand");
+var _TopNavBarMenuItems = require("../TopNavBarMenuItems");
+var _TopNavBarUser = require("../TopNavBarUser");
+var _props = require("../TopNavBarItem/props");
+var _TopNavBarBreadcrumb = require("../TopNavBarBreadcrumb");
 /*
  * The MIT License (MIT)
  *
@@ -28,6 +38,42 @@ exports.smallViewportAllowedProps = exports.desktopAllowedProps = exports.common
  * SOFTWARE.
  */
 
+const commonPropTypes = exports.commonPropTypes = {
+  renderBrand: _Children.Children.oneOf([_TopNavBarBrand.TopNavBarBrand]),
+  renderMenuItems: _Children.Children.oneOf([_TopNavBarMenuItems.TopNavBarMenuItems]),
+  renderActionItems: _Children.Children.oneOf([_TopNavBarActionItems.TopNavBarActionItems]),
+  renderUser: _Children.Children.oneOf([_TopNavBarUser.TopNavBarUser]),
+  renderBreadcrumb: _Children.Children.oneOf([_TopNavBarBreadcrumb.TopNavBarBreadcrumb]),
+  navLabel: _propTypes.default.string,
+  elementRef: _propTypes.default.func
+};
+const desktopPropTypes = exports.desktopPropTypes = {
+  hideActionsUserSeparator: _propTypes.default.bool
+};
+const smallViewportPropTypes = exports.smallViewportPropTypes = {
+  dropdownMenuToggleButtonLabel: _propTypes.default.string.isRequired,
+  dropdownMenuToggleButtonTooltip: _props.topNavBarItemTooltipPropType,
+  dropdownMenuLabel: _propTypes.default.string,
+  alternativeTitle: _propTypes.default.node,
+  renderInPlaceDialogConfig: _propTypes.default.shape({
+    open: _propTypes.default.bool.isRequired,
+    onClose: _propTypes.default.func.isRequired,
+    closeButtonLabel: _propTypes.default.string.isRequired,
+    content: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+    returnFocusElement: _propTypes.default.func,
+    shouldContainFocus: _propTypes.default.bool,
+    shouldCloseOnDocumentClick: _propTypes.default.bool,
+    shouldCloseOnEscape: _propTypes.default.bool
+  }),
+  trayMountNode: _propTypes.default.oneOfType([_element.element, _propTypes.default.func]),
+  onDropdownMenuToggle: _propTypes.default.func,
+  onDropdownMenuSelect: _propTypes.default.func,
+  renderNavbarStartDangerousHack: _propTypes.default.node
+};
+const propTypes = exports.propTypes = {
+  ...commonPropTypes,
+  smallViewportConfig: _propTypes.default.shape(smallViewportPropTypes).isRequired
+};
 const commonAllowedProps = exports.commonAllowedProps = ['renderBrand', 'renderMenuItems', 'renderActionItems', 'renderUser', 'renderBreadcrumb', 'navLabel', 'elementRef'];
 const desktopAllowedProps = exports.desktopAllowedProps = ['hideActionsUserSeparator'];
 const smallViewportAllowedProps = exports.smallViewportAllowedProps = ['dropdownMenuToggleButtonLabel', 'dropdownMenuToggleButtonTooltip', 'dropdownMenuLabel', 'alternativeTitle', 'renderInPlaceDialogConfig', 'trayMountNode', 'onDropdownMenuToggle', 'onDropdownMenuSelect'];

package/lib/TopNavBar/TopNavBarMenuItems/index.js

@@ -10,6 +10,7 @@ var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 var _console = require("@instructure/console");
+var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _emotion = require("@instructure/emotion");
 var _Drilldown = require("@instructure/ui-drilldown/lib/Drilldown");
 var _TruncateList = require("@instructure/ui-truncate-list/lib/TruncateList");
@@ -21,7 +22,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, _TopNavBarMenuItems, _span;
+var _dec, _dec2, _dec3, _class, _TopNavBarMenuItems, _span;
 /*
  * The MIT License (MIT)
  *
@@ -52,7 +53,7 @@ id: TopNavBar.MenuItems
 ---
 @module TopNavBarMenuItems
 **/
-let TopNavBarMenuItems = exports.TopNavBarMenuItems = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_TopNavBarMenuItems = class TopNavBarMenuItems extends _react.Component {
+let TopNavBarMenuItems = exports.TopNavBarMenuItems = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_TopNavBarMenuItems = class TopNavBarMenuItems extends _react.Component {
   constructor(props) {
     super(props);
     this._hiddenMenuItemsMenuTriggerId = void 0;
@@ -132,8 +133,7 @@ let TopNavBarMenuItems = exports.TopNavBarMenuItems = (_dec = (0, _withDetermini
       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;
@@ -190,9 +190,8 @@ let TopNavBarMenuItems = exports.TopNavBarMenuItems = (_dec = (0, _withDetermini
       ...((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 = _props.allowedProps, _TopNavBarMenuItems.defaultProps = {}, _TopNavBarMenuItems.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarMenuItems)) || _class) || _class);
+}, _TopNavBarMenuItems.displayName = "TopNavBarMenuItems", _TopNavBarMenuItems.componentId = 'TopNavBar.MenuItems', _TopNavBarMenuItems.propTypes = _props.propTypes, _TopNavBarMenuItems.allowedProps = _props.allowedProps, _TopNavBarMenuItems.defaultProps = {}, _TopNavBarMenuItems.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarMenuItems)) || _class) || _class) || _class);
 var _default = exports.default = TopNavBarMenuItems;

package/lib/TopNavBar/TopNavBarMenuItems/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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+var _TopNavBarItem = require("../TopNavBarItem");
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +32,11 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
+const propTypes = exports.propTypes = {
+  children: _Children.Children.oneOf([_TopNavBarItem.TopNavBarItem]),
+  currentPageId: _propTypes.default.string,
+  renderHiddenItemsMenuTriggerLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]).isRequired,
+  listLabel: _propTypes.default.string,
+  elementRef: _propTypes.default.func
+};
 const allowedProps = exports.allowedProps = ['children', 'currentPageId', 'renderHiddenItemsMenuTriggerLabel', 'listLabel', 'elementRef'];

package/lib/TopNavBar/TopNavBarUser/index.js

@@ -8,12 +8,13 @@ exports.default = exports.TopNavBarUser = void 0;
 var _react = require("react");
 var _console = require("@instructure/console");
 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 _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _TopNavBarUser;
+var _dec, _dec2, _class, _TopNavBarUser;
 /*
  * The MIT License (MIT)
  *
@@ -44,7 +45,7 @@ id: TopNavBar.User
 ---
 @module TopNavBarUser
 **/
-let TopNavBarUser = exports.TopNavBarUser = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_TopNavBarUser = class TopNavBarUser extends _react.Component {
+let TopNavBarUser = exports.TopNavBarUser = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_TopNavBarUser = class TopNavBarUser extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -91,9 +92,8 @@ let TopNavBarUser = exports.TopNavBarUser = (_dec = (0, _emotion.withStyle)(_sty
       ...(0, _omitProps.omitProps)(this.props, _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 = _props.allowedProps, _TopNavBarUser.defaultProps = {}, _TopNavBarUser.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarUser)) || _class);
+}, _TopNavBarUser.displayName = "TopNavBarUser", _TopNavBarUser.componentId = 'TopNavBar.User', _TopNavBarUser.propTypes = _props.propTypes, _TopNavBarUser.allowedProps = _props.allowedProps, _TopNavBarUser.defaultProps = {}, _TopNavBarUser.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBarUser)) || _class) || _class);
 var _default = exports.default = TopNavBarUser;

package/lib/TopNavBar/TopNavBarUser/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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+var _TopNavBarItem = require("../TopNavBarItem");
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +32,8 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
+const propTypes = exports.propTypes = {
+  children: _Children.Children.oneOf([_TopNavBarItem.TopNavBarItem]).isRequired,
+  elementRef: _propTypes.default.func
+};
 const allowedProps = exports.allowedProps = ['children', 'elementRef'];

package/lib/TopNavBar/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TopNavBar = void 0;
 var _react = require("react");
 var _console = require("@instructure/console");
+var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _px = require("@instructure/ui-utils/lib/px.js");
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _Responsive = require("@instructure/ui-responsive/lib/Responsive");
@@ -19,6 +20,7 @@ var _TopNavBarBreadcrumb = require("./TopNavBarBreadcrumb");
 var _TopNavBarContext = require("./TopNavBarContext");
 var _props2 = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _TopNavBar;
 /*
  * The MIT License (MIT)
  *
@@ -42,13 +44,12 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 /**
 ---
 category: components
 ---
 **/
-class TopNavBar extends _react.Component {
+let TopNavBar = exports.TopNavBar = (_dec = (0, _testable.testable)(), _dec(_class = (_TopNavBar = class TopNavBar extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -69,7 +70,6 @@ class TopNavBar extends _react.Component {
       mediaQueryMatch = _this$props.mediaQueryMatch,
       inverseColor = _this$props.inverseColor;
     return (0, _jsxRuntime.jsx)(_Responsive.Responsive, {
-      "data-cid": "TopNavBar",
       elementRef: this.handleRef,
       match: mediaQueryMatch,
       query: {
@@ -100,23 +100,9 @@ class TopNavBar extends _react.Component {
       }
     });
   }
-}
-exports.TopNavBar = TopNavBar;
-TopNavBar.displayName = "TopNavBar";
-TopNavBar.componentId = 'TopNavBar';
-// TODO: mention subcomponent registration in "new component" docs
-TopNavBar.ActionItems = _TopNavBarActionItems.TopNavBarActionItems;
-TopNavBar.Brand = _TopNavBarBrand.TopNavBarBrand;
-TopNavBar.Item = _TopNavBarItem.TopNavBarItem;
-TopNavBar.Layout = _TopNavBarLayout.TopNavBarLayout;
-TopNavBar.MenuItems = _TopNavBarMenuItems.TopNavBarMenuItems;
-TopNavBar.User = _TopNavBarUser.TopNavBarUser;
-TopNavBar.Breadcrumb = _TopNavBarBreadcrumb.TopNavBarBreadcrumb;
-TopNavBar.contextType = _TopNavBarContext.TopNavBarContext;
-TopNavBar.allowedProps = _props2.allowedProps;
-TopNavBar.defaultProps = {
+}, _TopNavBar.displayName = "TopNavBar", _TopNavBar.componentId = 'TopNavBar', _TopNavBar.ActionItems = _TopNavBarActionItems.TopNavBarActionItems, _TopNavBar.Brand = _TopNavBarBrand.TopNavBarBrand, _TopNavBar.Item = _TopNavBarItem.TopNavBarItem, _TopNavBar.Layout = _TopNavBarLayout.TopNavBarLayout, _TopNavBar.MenuItems = _TopNavBarMenuItems.TopNavBarMenuItems, _TopNavBar.User = _TopNavBarUser.TopNavBarUser, _TopNavBar.Breadcrumb = _TopNavBarBreadcrumb.TopNavBarBreadcrumb, _TopNavBar.contextType = _TopNavBarContext.TopNavBarContext, _TopNavBar.propTypes = _props2.propTypes, _TopNavBar.allowedProps = _props2.allowedProps, _TopNavBar.defaultProps = {
   breakpoint: 1024,
   mediaQueryMatch: 'media',
   inverseColor: false
-};
+}, _TopNavBar)) || _class);
 var _default = exports.default = TopNavBar;

package/lib/TopNavBar/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,11 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
+const propTypes = exports.propTypes = {
+  children: _propTypes.default.func,
+  breakpoint: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  mediaQueryMatch: _propTypes.default.oneOf(['element', 'media']),
+  inverseColor: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func]),
+  elementRef: _propTypes.default.func
+};
 const allowedProps = exports.allowedProps = ['children', 'breakpoint', 'mediaQueryMatch', 'inverseColor', 'elementRef'];

package/lib/TopNavBar/utils/mapItemsForDrilldown.js

@@ -49,8 +49,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-top-nav-bar",
-  "version": "10.26.1-snapshot-2",
+  "version": "10.26.2",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,40 +24,43 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.26.1-snapshot-2",
-    "@instructure/emotion": "10.26.1-snapshot-2",
-    "@instructure/shared-types": "10.26.1-snapshot-2",
-    "@instructure/ui-a11y-content": "10.26.1-snapshot-2",
-    "@instructure/ui-avatar": "10.26.1-snapshot-2",
-    "@instructure/ui-breadcrumb": "10.26.1-snapshot-2",
-    "@instructure/ui-buttons": "10.26.1-snapshot-2",
-    "@instructure/ui-dialog": "10.26.1-snapshot-2",
-    "@instructure/ui-dom-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-drilldown": "10.26.1-snapshot-2",
-    "@instructure/ui-icons": "10.26.1-snapshot-2",
-    "@instructure/ui-link": "10.26.1-snapshot-2",
-    "@instructure/ui-popover": "10.26.1-snapshot-2",
-    "@instructure/ui-react-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-responsive": "10.26.1-snapshot-2",
-    "@instructure/ui-tooltip": "10.26.1-snapshot-2",
-    "@instructure/ui-tray": "10.26.1-snapshot-2",
-    "@instructure/ui-truncate-list": "10.26.1-snapshot-2",
-    "@instructure/ui-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-view": "10.26.1-snapshot-2"
+    "@instructure/console": "10.26.2",
+    "@instructure/emotion": "10.26.2",
+    "@instructure/shared-types": "10.26.2",
+    "@instructure/ui-a11y-content": "10.26.2",
+    "@instructure/ui-avatar": "10.26.2",
+    "@instructure/ui-breadcrumb": "10.26.2",
+    "@instructure/ui-buttons": "10.26.2",
+    "@instructure/ui-dialog": "10.26.2",
+    "@instructure/ui-dom-utils": "10.26.2",
+    "@instructure/ui-drilldown": "10.26.2",
+    "@instructure/ui-icons": "10.26.2",
+    "@instructure/ui-link": "10.26.2",
+    "@instructure/ui-popover": "10.26.2",
+    "@instructure/ui-prop-types": "10.26.2",
+    "@instructure/ui-react-utils": "10.26.2",
+    "@instructure/ui-responsive": "10.26.2",
+    "@instructure/ui-testable": "10.26.2",
+    "@instructure/ui-tooltip": "10.26.2",
+    "@instructure/ui-tray": "10.26.2",
+    "@instructure/ui-truncate-list": "10.26.2",
+    "@instructure/ui-utils": "10.26.2",
+    "@instructure/ui-view": "10.26.2",
+    "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.1-snapshot-2",
-    "@instructure/ui-babel-preset": "10.26.1-snapshot-2",
-    "@instructure/ui-color-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-scripts": "10.26.1-snapshot-2",
-    "@instructure/ui-themes": "10.26.1-snapshot-2",
+    "@instructure/ui-axe-check": "10.26.2",
+    "@instructure/ui-babel-preset": "10.26.2",
+    "@instructure/ui-color-utils": "10.26.2",
+    "@instructure/ui-scripts": "10.26.2",
+    "@instructure/ui-themes": "10.26.2",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "15.0.7",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2"
   },
   "peerDependencies": {
-    "react": ">=18 <=19"
+    "react": ">=16.14 <=18"
   },
   "publishConfig": {
     "access": "public"

package/src/TopNavBar/TopNavBarActionItems/index.tsx

@@ -30,6 +30,7 @@ import {
   safeCloneElement,
   withDeterministicId
 } from '@instructure/ui-react-utils'
+import { testable } from '@instructure/ui-testable'
 import { warn, error } from '@instructure/console'
 
 import { withStyle } from '@instructure/emotion'
@@ -52,7 +53,11 @@ import { TopNavBarContext } from '../TopNavBarContext'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps, TopNavBarActionItemsStyleProps } from './props'
+import {
+  propTypes,
+  allowedProps,
+  TopNavBarActionItemsStyleProps
+} from './props'
 import type {
   TopNavBarActionItemsProps,
   TopNavBarActionItemsState
@@ -67,12 +72,14 @@ id: TopNavBar.ActionItems
 **/
 @withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
+@testable()
 class TopNavBarActionItems extends Component<
   TopNavBarActionItemsProps,
   TopNavBarActionItemsState
 > {
   static readonly componentId = 'TopNavBar.ActionItems'
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {}
 
@@ -277,7 +284,6 @@ class TopNavBarActionItems extends Component<
         ref={this.handleRef}
         css={styles?.topNavBarActionItems}
         aria-label={listLabel}
-        data-cid="TopNavBarActionItems"
       >
         {this.childrenArray.map((item) => (
           <li css={styles?.listItem} key={item.props.id}>

package/src/TopNavBar/TopNavBarActionItems/props.ts

@@ -23,14 +23,20 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import type {
   TopNavBarActionItemsTheme,
   OtherHTMLAttributes,
+  PropValidators,
   ChildrenOfType
 } from '@instructure/shared-types'
 
+import { TopNavBarItem } from '../TopNavBarItem'
+import { topNavBarItemTooltipPropType } from '../TopNavBarItem/props'
 import type {
   ItemChild,
   TopNavBarItemTooltipType
@@ -112,6 +118,21 @@ type TopNavBarActionItemsState = {
 type TopNavBarActionItemsStyleProps = {
   layout?: TopNavBarContextType['layout']
 }
+
+const propTypes: PropValidators<PropKeys> = {
+  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: AllowedPropKeys = [
   'children',
   'listLabel',
@@ -128,4 +149,4 @@ export type {
   TopNavBarActionItemsStyleProps,
   TopNavBarActionItemsStyle
 }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/TopNavBar/TopNavBarBrand/index.tsx

@@ -25,6 +25,7 @@
 import { Component } from 'react'
 
 import { getElementType, omitProps } from '@instructure/ui-react-utils'
+import { testable } from '@instructure/ui-testable'
 
 import { withStyle } from '@instructure/emotion'
 
@@ -36,7 +37,7 @@ import { TopNavBarContext } from '../TopNavBarContext'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { TopNavBarBrandProps, TopNavBarBrandStyleProps } from './props'
 
 /**
@@ -47,10 +48,12 @@ id: TopNavBar.Brand
 @module TopNavBarBrand
 **/
 @withStyle(generateStyle, generateComponentTheme)
+@testable()
 class TopNavBarBrand extends Component<TopNavBarBrandProps> {
   static readonly componentId = 'TopNavBar.Brand'
   // TODO: add to the docs: making it static on parent and jsdocs parent/module settings, dont export child on its own
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {}
 
@@ -103,11 +106,7 @@ class TopNavBarBrand extends Component<TopNavBarBrandProps> {
     const ElementType = getElementType(TopNavBarBrand, this.props)
 
     return (
-      <div
-        ref={this.handleRef}
-        css={styles?.topNavBarBrand}
-        data-cid="TopNavBarBrand"
-      >
+      <div ref={this.handleRef} css={styles?.topNavBarBrand}>
         {renderIcon && (
           <View
             {...omitProps(this.props, allowedProps)}

package/src/TopNavBar/TopNavBarBrand/props.ts

@@ -23,13 +23,17 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type {
   TopNavBarBrandTheme,
   OtherHTMLAttributes,
+  PropValidators,
   AsElementType
 } from '@instructure/shared-types'
 import type { ViewOwnProps } from '@instructure/ui-view'
+
 import type { TopNavBarContextType } from '../TopNavBarContext'
 
 import { TopNavBarBrand } from './index'
@@ -91,6 +95,17 @@ type TopNavBarBrandStyle = ComponentStyle<
 type TopNavBarBrandStyleProps = {
   layout: TopNavBarContextType['layout']
 }
+
+const propTypes: PropValidators<PropKeys> = {
+  screenReaderLabel: PropTypes.string.isRequired,
+  renderIcon: PropTypes.node,
+  iconBackground: PropTypes.string,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  as: PropTypes.elementType,
+  elementRef: PropTypes.func
+}
+
 const allowedProps: AllowedPropKeys = [
   'screenReaderLabel',
   'renderIcon',
@@ -108,4 +123,4 @@ export type {
   TopNavBarBrandStyle,
   TopNavBarBrandStyleProps
 }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/TopNavBar/TopNavBarBreadcrumb/index.tsx

@@ -26,11 +26,13 @@ import { Children, Component, ReactElement } from 'react'
 import {
   TopNavBarBreadcrumbProps,
   TopNavBarBreadcrumbState,
-  allowedProps
+  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
@@ -47,10 +49,12 @@ id: TopNavBar.Breadcrumb
 @module TopNavBarBreadcrumb
  **/
 @withStyle(generateStyle, null)
+@testable()
 class TopNavBarBreadcrumb extends Component<
   TopNavBarBreadcrumbProps,
   TopNavBarBreadcrumbState
 > {
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {}
 
@@ -103,29 +107,21 @@ class TopNavBarBreadcrumb extends Component<
       )
     }
 
-    const breadcrumbElement = Children.toArray(children)[0] as ReactElement<any>
+    const breadcrumbElement = Children.toArray(children)[0] as ReactElement
     const breadCrumbLinks = breadcrumbElement.props.children
     const lastButOneLink = Children.toArray(breadCrumbLinks)[
       Children.count(breadCrumbLinks) - 2
-    ] as ReactElement<any>
+    ] as ReactElement
 
     return (
       this.context.inverseColor &&
       (this.context.layout === 'desktop' ? (
-        <div
-          ref={this.handleRef}
-          css={styles?.topNavBarBreadcrumb}
-          data-cid="TopNavBarBreadcrumb"
-        >
+        <div ref={this.handleRef} css={styles?.topNavBarBreadcrumb}>
           <div css={styles?.iconContainer}>{this.renderMenu()}</div>
           <div css={styles?.breadcrumbContainer}>{children}</div>
         </div>
       ) : (
-        <div
-          ref={this.handleRef}
-          css={styles?.topNavBarBreadcrumb}
-          data-cid="TopNavBarBreadcrumb"
-        >
+        <div ref={this.handleRef} css={styles?.topNavBarBreadcrumb}>
           <div css={styles?.linkContainer}>
             {lastButOneLink && (
               <Link

package/src/TopNavBar/TopNavBarBreadcrumb/props.ts

@@ -26,9 +26,14 @@ import { ComponentElement } from 'react'
 import type { ViewOwnProps } from '@instructure/ui-view'
 import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
 import { TopNavBarContextType } from '../TopNavBarContext'
-import { ChildrenOfType, OtherHTMLAttributes } from '@instructure/shared-types'
+import {
+  ChildrenOfType,
+  OtherHTMLAttributes,
+  PropValidators
+} from '@instructure/shared-types'
 import TopNavBarBreadcrumb from './index'
-
+import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
+import PropTypes from 'prop-types'
 import { Breadcrumb } from '@instructure/ui-breadcrumb'
 import type { BreadcrumbProps } from '@instructure/ui-breadcrumb'
 
@@ -77,6 +82,13 @@ type TopNavBarBreadcrumbStyleProps = {
 type PropKeys = keyof TopNavBarBreadcrumbOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+const propTypes: PropValidators<PropKeys> = {
+  onClick: PropTypes.func,
+  elementRef: PropTypes.func,
+  children: ChildrenPropTypes.oneOf([Breadcrumb])
+}
+
 const allowedProps: AllowedPropKeys = ['children', 'onClick', 'elementRef']
 
 export type {
@@ -87,4 +99,4 @@ export type {
   BreadcrumbChild
 }
 
-export { allowedProps }
+export { propTypes, allowedProps }