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

package/src/TopNavBar/TopNavBarItem/index.tsx

@@ -33,6 +33,7 @@ import {
   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'
@@ -57,7 +58,7 @@ import { TopNavBarContext } from '../TopNavBarContext'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type {
   TopNavBarItemProps,
   TopNavBarItemState,
@@ -79,9 +80,11 @@ id: TopNavBar.Item
 **/
 @withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
+@testable()
 class TopNavBarItem extends Component<TopNavBarItemProps, TopNavBarItemState> {
   static readonly componentId = 'TopNavBar.Item'
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     status: 'default',
@@ -741,11 +744,7 @@ class TopNavBarItem extends Component<TopNavBarItemProps, TopNavBarItemState> {
     }
 
     return (
-      <div
-        ref={this.handleRef}
-        css={styles?.topNavBarItem}
-        data-cid="TopNavBarItem"
-      >
+      <div ref={this.handleRef} css={styles?.topNavBarItem}>
         {content}
       </div>
     )

package/src/TopNavBar/TopNavBarItem/props.ts

@@ -23,12 +23,16 @@
  */
 
 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 {
   TopNavBarItemTheme,
   OtherHTMLAttributes,
+  PropValidators,
   Renderable,
   AsElementType
 } from '@instructure/shared-types'
@@ -59,6 +63,19 @@ type TopNavBarItemTooltipType =
       onHideContent?: TooltipProps['onHideContent']
     }
 
+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
+  })
+])
+
 type TopNavBarItemOwnProps = {
   /**
    * the element type to render as (will default to `<a>` if href is provided)
@@ -279,6 +296,39 @@ type TopNavBarItemStyleProps = {
   layout: TopNavBarContextType['layout']
   inverseColor: TopNavBarContextType['inverseColor']
 }
+
+const propTypes: PropValidators<PropKeys> = {
+  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: AllowedPropKeys = [
   'id',
   'as',
@@ -317,4 +367,4 @@ export type {
   DrilldownSubmenu,
   TopNavBarItemTooltipType
 }
-export { allowedProps }
+export { propTypes, allowedProps, topNavBarItemTooltipPropType }

package/src/TopNavBar/TopNavBarLayout/DesktopLayout/index.tsx

@@ -25,6 +25,7 @@
 import { Children, Component } from 'react'
 
 import { omitProps } from '@instructure/ui-react-utils'
+import { testable } from '@instructure/ui-testable'
 
 import { withStyle } from '@instructure/emotion'
 
@@ -33,7 +34,7 @@ import { TopNavBarContext } from '../../TopNavBarContext'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type {
   TopNavBarDesktopLayoutProps,
   TopNavBarDesktopLayoutStyleProps
@@ -45,9 +46,11 @@ private: true
 ---
 **/
 @withStyle(generateStyle, generateComponentTheme)
+@testable()
 class TopNavBarDesktopLayout extends Component<TopNavBarDesktopLayoutProps> {
   static readonly componentId = 'TopNavBar.DesktopLayout'
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {}
 
@@ -136,7 +139,6 @@ class TopNavBarDesktopLayout extends Component<TopNavBarDesktopLayoutProps> {
         ref={this.handleRef}
         css={styles?.topNavBarDesktopLayout}
         aria-label={navLabel}
-        data-cid="TopNavBarDesktopLayout"
       >
         {this.hasBrandBlock && (
           <div css={styles?.brandContainer}>{renderBrand}</div>

package/src/TopNavBar/TopNavBarLayout/DesktopLayout/props.ts

@@ -23,13 +23,22 @@
  */
 
 import React from 'react'
+
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type {
   TopNavBarLayoutDesktopTheme,
-  OtherHTMLAttributes
+  OtherHTMLAttributes,
+  PropValidators
 } from '@instructure/shared-types'
+
 import type { TopNavBarContextType } from '../../TopNavBarContext'
-import { commonAllowedProps, desktopAllowedProps } from '../props'
+
+import {
+  commonPropTypes,
+  commonAllowedProps,
+  desktopPropTypes,
+  desktopAllowedProps
+} from '../props'
 import type { CommonTopNavBarLayoutProps } from '../props'
 
 import { TopNavBarDesktopLayout } from './index'
@@ -73,6 +82,13 @@ type TopNavBarDesktopLayoutStyleProps = {
   hasActionItemsBlock: boolean
   hasUserBlock: boolean
 }
+
+const propTypes: PropValidators<PropKeys> = {
+  // Edit PropTypes in TopNabBarLayout/props.ts
+  ...commonPropTypes,
+  ...desktopPropTypes
+}
+
 const allowedProps: AllowedPropKeys = [
   // Edit allowed props in TopNabBarLayout/props.ts
   ...commonAllowedProps,
@@ -87,4 +103,4 @@ export type {
   TopNavBarDesktopLayoutStyle,
   TopNavBarDesktopLayoutStyleProps
 }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.tsx

@@ -31,6 +31,7 @@ import {
 } 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
@@ -65,7 +66,7 @@ import { TopNavBarContext } from '../../TopNavBarContext'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type {
   TopNavBarSmallViewportLayoutProps,
   TopNavBarSmallViewportLayoutState,
@@ -79,12 +80,14 @@ private: true
 **/
 @withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
+@testable()
 class TopNavBarSmallViewportLayout extends Component<
   TopNavBarSmallViewportLayoutProps,
   TopNavBarSmallViewportLayoutState
 > {
   static readonly componentId = 'TopNavBar.SmallViewportLayout'
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {}
 
@@ -625,7 +628,6 @@ class TopNavBarSmallViewportLayout extends Component<
         {...omitProps(this.props, allowedProps)}
         ref={this.handleRef}
         aria-label={navLabel}
-        data-cid="TopNavBarSmallViewportLayout"
       >
         <Global styles={styles?.globalStyles} />
 

package/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/props.ts

@@ -23,18 +23,26 @@
  */
 
 import React from 'react'
+
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import type {
   TopNavBarLayoutSmallViewportTheme,
-  OtherHTMLAttributes
+  OtherHTMLAttributes,
+  PropValidators
 } from '@instructure/shared-types'
 
 import type { DrilldownProps } from '@instructure/ui-drilldown'
+
 import type { TopNavBarItemTooltipType } from '../../TopNavBarItem/props'
 import type { TopNavBarContextType } from '../../TopNavBarContext'
 
-import { commonAllowedProps, smallViewportAllowedProps } from '../props'
+import {
+  commonAllowedProps,
+  commonPropTypes,
+  smallViewportPropTypes,
+  smallViewportAllowedProps
+} from '../props'
 import type { CommonTopNavBarLayoutProps } from '../props'
 
 import { TopNavBarSmallViewportLayout } from './index'
@@ -159,6 +167,13 @@ type TopNavBarSmallViewportLayoutStyleProps = {
   menuBottomPosition: number
   inverseColor: TopNavBarContextType['inverseColor']
 }
+
+const propTypes: PropValidators<PropKeys> = {
+  // Edit PropTypes in TopNavBarLayout/props.ts
+  ...commonPropTypes,
+  ...smallViewportPropTypes
+}
+
 const allowedProps: AllowedPropKeys = [
   // Edit allowed props in TopNavBarLayout/props.ts
   ...commonAllowedProps,
@@ -174,4 +189,4 @@ export type {
   TopNavBarSmallViewportLayoutState,
   TopNavBarSmallViewportLayoutStyleProps
 }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/TopNavBar/TopNavBarLayout/index.tsx

@@ -24,6 +24,8 @@
 
 import { Component } from 'react'
 
+import { testable } from '@instructure/ui-testable'
+
 import { withStyle } from '@instructure/emotion'
 
 import type {
@@ -40,7 +42,7 @@ import type { TopNavBarSmallViewportLayoutProps } from './SmallViewportLayout/pr
 import { TopNavBarDesktopLayout } from './DesktopLayout'
 import type { TopNavBarDesktopLayoutProps } from './DesktopLayout/props'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { TopNavBarLayoutProps } from './props'
 
 /**
@@ -51,9 +53,11 @@ id: TopNavBar.Layout
 @module TopNavBarLayout
 **/
 @withStyle(null, generateComponentTheme)
+@testable()
 class TopNavBarLayout extends Component<TopNavBarLayoutProps> {
   static readonly componentId = 'TopNavBar.Layout'
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     smallViewportConfig: {}

package/src/TopNavBar/TopNavBarLayout/props.ts

@@ -23,22 +23,37 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
+import {
+  Children as ChildrenPropTypes,
+  element
+} from '@instructure/ui-prop-types'
 
 import type { WithStyleProps } from '@instructure/emotion'
 import type {
   TopNavBarLayoutTheme,
-  OtherHTMLAttributes
+  OtherHTMLAttributes,
+  PropValidators
 } from '@instructure/shared-types'
 
+import { TopNavBarActionItems } from '../TopNavBarActionItems'
+import { TopNavBarBrand } from '../TopNavBarBrand'
+import { TopNavBarMenuItems } from '../TopNavBarMenuItems'
+import { TopNavBarUser } from '../TopNavBarUser'
+
 import type { ActionItemsChild } from '../TopNavBarActionItems/props'
 import type { BrandChild } from '../TopNavBarBrand/props'
 import type { MenuItemsChild } from '../TopNavBarMenuItems/props'
 import type { UserChild } from '../TopNavBarUser/props'
 import type { BreadcrumbChild } from '../TopNavBarBreadcrumb/props'
 
+import { topNavBarItemTooltipPropType } from '../TopNavBarItem/props'
+
 import { TopNavBarLayout } from './index'
 import type { DesktopLayoutOwnProps } from './DesktopLayout/props'
 import type { SmallViewportLayoutOwnProps } from './SmallViewportLayout/props'
+import { TopNavBarBreadcrumb } from '../TopNavBarBreadcrumb'
 
 type LayoutChild = React.ComponentElement<TopNavBarLayoutProps, TopNavBarLayout>
 
@@ -121,6 +136,46 @@ type TopNavBarLayoutProps = TopNavBarLayoutOwnProps &
   WithStyleProps<TopNavBarLayoutTheme, null> &
   OtherHTMLAttributes<TopNavBarLayoutOwnProps>
 
+const commonPropTypes: PropValidators<CommonPropKeys> = {
+  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: PropValidators<DesktopPropKeys> = {
+  hideActionsUserSeparator: PropTypes.bool
+}
+
+const smallViewportPropTypes: PropValidators<SmallViewportPropKeys> = {
+  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: PropValidators<PropKeys> = {
+  ...commonPropTypes,
+  smallViewportConfig: PropTypes.shape(smallViewportPropTypes).isRequired
+}
+
 const commonAllowedProps: CommonAllowedPropKeys = [
   'renderBrand',
   'renderMenuItems',
@@ -151,8 +206,12 @@ const allowedProps: AllowedPropKeys = [
 
 export type { LayoutChild, CommonTopNavBarLayoutProps, TopNavBarLayoutProps }
 export {
+  propTypes,
   allowedProps,
+  commonPropTypes,
   commonAllowedProps,
+  desktopPropTypes,
+  smallViewportPropTypes,
   desktopAllowedProps,
   smallViewportAllowedProps
 }

package/src/TopNavBar/TopNavBarMenuItems/index.tsx

@@ -30,6 +30,7 @@ import {
   withDeterministicId
 } from '@instructure/ui-react-utils'
 import { warn, error } from '@instructure/console'
+import { testable } from '@instructure/ui-testable'
 
 import { withStyle } from '@instructure/emotion'
 
@@ -50,7 +51,7 @@ import type { RenderOptionContent } from '../utils/mapItemsForDrilldown'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { TopNavBarMenuItemsProps, TopNavBarMenuItemsState } from './props'
 
 /**
@@ -62,12 +63,14 @@ id: TopNavBar.MenuItems
 **/
 @withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
+@testable()
 class TopNavBarMenuItems extends Component<
   TopNavBarMenuItemsProps,
   TopNavBarMenuItemsState
 > {
   static readonly componentId = 'TopNavBar.MenuItems'
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {}
 
@@ -189,14 +192,7 @@ class TopNavBarMenuItems extends Component<
         return
       }
 
-      const {
-        id,
-        status,
-        variant = 'default', // workaround because after react 19 defaultProps are not working as expected
-        renderSubmenu,
-        renderAvatar
-      } = child.props
-
+      const { id, status, variant, renderSubmenu, renderAvatar } = child.props
       const isCurrentPage = currentPageId === id
 
       if (renderAvatar) {
@@ -267,7 +263,6 @@ class TopNavBarMenuItems extends Component<
           itemSpacing: styles.itemSpacing
         })}
         aria-label={listLabel}
-        data-cid="TopNavBarMenuItems"
       >
         {this.renderChildren()}
       </TruncateList>

package/src/TopNavBar/TopNavBarMenuItems/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 { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type {
   TopNavBarMenuItemsTheme,
   OtherHTMLAttributes,
+  PropValidators,
   ChildrenOfType
 } from '@instructure/shared-types'
+
+import { TopNavBarItem } from '../TopNavBarItem'
 import type { ItemChild } from '../TopNavBarItem/props'
 
 import { TopNavBarMenuItems } from './index'
@@ -97,6 +103,18 @@ type TopNavBarMenuItemsState = {
   key: number
   visibleItemsCount?: number
 }
+
+const propTypes: PropValidators<PropKeys> = {
+  children: ChildrenPropTypes.oneOf([TopNavBarItem]),
+  currentPageId: PropTypes.string,
+  renderHiddenItemsMenuTriggerLabel: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string
+  ]).isRequired,
+  listLabel: PropTypes.string,
+  elementRef: PropTypes.func
+}
+
 const allowedProps: AllowedPropKeys = [
   'children',
   'currentPageId',
@@ -112,4 +130,4 @@ export type {
   TopNavBarMenuItemsStyle,
   TopNavBarMenuItemsState
 }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/TopNavBar/TopNavBarUser/index.tsx

@@ -26,6 +26,7 @@ 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'
 
@@ -34,7 +35,7 @@ import type { ItemChild, TopNavBarItemProps } from '../TopNavBarItem/props'
 
 import generateStyle from './styles'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { TopNavBarUserProps } from './props'
 
 /**
@@ -45,9 +46,11 @@ id: TopNavBar.User
 @module TopNavBarUser
 **/
 @withStyle(generateStyle, null)
+@testable()
 class TopNavBarUser extends Component<TopNavBarUserProps> {
   static readonly componentId = 'TopNavBar.User'
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {}
 
@@ -117,7 +120,6 @@ class TopNavBarUser extends Component<TopNavBarUserProps> {
         {...omitProps(this.props, allowedProps)}
         ref={this.handleRef}
         css={styles?.topNavBarUser}
-        data-cid="TopNavBarUser"
       >
         {this.content}
       </div>

package/src/TopNavBar/TopNavBarUser/props.ts

@@ -23,11 +23,18 @@
  */
 
 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 {
   OtherHTMLAttributes,
+  PropValidators,
   ChildrenOfType
 } from '@instructure/shared-types'
+
+import { TopNavBarItem } from '../TopNavBarItem'
 import type { ItemChild } from '../TopNavBarItem/props'
 
 import { TopNavBarUser } from './index'
@@ -59,6 +66,12 @@ type TopNavBarUserProps = TopNavBarUserOwnProps &
   OtherHTMLAttributes<TopNavBarUserOwnProps>
 
 type TopNavBarUserStyle = ComponentStyle<'topNavBarUser'>
+
+const propTypes: PropValidators<PropKeys> = {
+  children: ChildrenPropTypes.oneOf([TopNavBarItem]).isRequired,
+  elementRef: PropTypes.func
+}
+
 const allowedProps: AllowedPropKeys = ['children', 'elementRef']
 
 export type {
@@ -67,4 +80,4 @@ export type {
   TopNavBarUserOwnProps,
   TopNavBarUserStyle
 }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/TopNavBar/index.tsx

@@ -25,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'
 
@@ -41,7 +42,7 @@ import { TopNavBarBreadcrumb } from './TopNavBarBreadcrumb'
 import { TopNavBarContext } from './TopNavBarContext'
 import type { TopNavBarLayouts } from './TopNavBarContext'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { TopNavBarProps } from './props'
 
 /**
@@ -49,6 +50,7 @@ import type { TopNavBarProps } from './props'
 category: components
 ---
 **/
+@testable()
 class TopNavBar extends Component<TopNavBarProps> {
   static readonly componentId = 'TopNavBar'
 
@@ -63,6 +65,7 @@ class TopNavBar extends Component<TopNavBarProps> {
 
   static contextType = TopNavBarContext
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     breakpoint: 1024,
@@ -91,7 +94,6 @@ class TopNavBar extends Component<TopNavBarProps> {
 
     return (
       <Responsive
-        data-cid="TopNavBar"
         elementRef={this.handleRef}
         match={mediaQueryMatch}
         query={{

package/src/TopNavBar/props.ts

@@ -22,7 +22,12 @@
  * SOFTWARE.
  */
 
-import type { OtherHTMLAttributes } from '@instructure/shared-types'
+import PropTypes from 'prop-types'
+
+import type {
+  OtherHTMLAttributes,
+  PropValidators
+} from '@instructure/shared-types'
 
 import type { ActionItemsChild } from './TopNavBarActionItems/props'
 import type { BrandChild } from './TopNavBarBrand/props'
@@ -30,6 +35,7 @@ import type { ItemChild } from './TopNavBarItem/props'
 import type { LayoutChild } from './TopNavBarLayout/props'
 import type { MenuItemsChild } from './TopNavBarMenuItems/props'
 import type { UserChild } from './TopNavBarUser/props'
+
 import type { TopNavBarContextType } from './TopNavBarContext'
 
 type TopNavBarOwnProps = {
@@ -71,6 +77,15 @@ type PropKeys = keyof TopNavBarOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TopNavBarProps = TopNavBarOwnProps & OtherHTMLAttributes<TopNavBarOwnProps>
+
+const propTypes: PropValidators<PropKeys> = {
+  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: AllowedPropKeys = [
   'children',
   'breakpoint',
@@ -90,4 +105,4 @@ export type {
   MenuItemsChild,
   UserChild
 }
-export { allowedProps }
+export { propTypes, allowedProps }