@instructure/ui-top-nav-bar 8.30.1-snapshot-15

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

@@ -0,0 +1,187 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import type {
+  TopNavBarLayoutSmallViewportTheme,
+  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,
+  commonPropTypes,
+  smallViewportPropTypes,
+  smallViewportAllowedProps
+} from '../props'
+import type { CommonTopNavBarLayoutProps } from '../props'
+
+import { TopNavBarSmallViewportLayout } from './index'
+
+type SmallViewportLayoutChild = React.ComponentElement<
+  TopNavBarSmallViewportLayoutProps,
+  TopNavBarSmallViewportLayout
+>
+
+type SmallViewportLayoutOwnProps = {
+  /**
+   * A __required__ label for the hamburger menu icon, used as an accessible screen reader label.
+   */
+  dropdownMenuToggleButtonLabel: string
+
+  /**
+   * An optional tooltip for the hamburger menu icon.
+   */
+  dropdownMenuToggleButtonTooltip?: TopNavBarItemTooltipType
+
+  /**
+   * An 'aria-label' for the dropdown menu.
+   */
+  dropdownMenuLabel?: string
+
+  /**
+   * Instead of the Brand logo and link, display other data (e.g.: page title).
+   *
+   * In this case, the hamburger menu icon will be replaced with a chevron.
+   */
+  alternativeTitle?: React.ReactNode
+
+  /**
+   * Renders a custom `<Dialog>` that renders in place of the navbar.
+   * Useful for features like full width search bars, etc.
+   *
+   * Use `returnFocusElement` prop for returning focus after close.
+   */
+  renderInPlaceDialogConfig?: {
+    open: boolean
+    onClose: () => void
+    closeButtonLabel: string
+    content?:
+      | React.ReactNode
+      | ((args: { closeInPlaceDialog: () => void }) => React.ReactNode)
+    /**
+     * Function that returns an element the focus needs to return to on close
+     */
+    returnFocusElement?: () => HTMLElement | null
+    shouldContainFocus?: boolean
+    shouldCloseOnDocumentClick?: boolean
+    shouldCloseOnEscape?: boolean
+  }
+
+  /**
+   * An element or a function returning an element to use as the mount node for the dropdown menu's `<Tray>` container.
+   *
+   * Use this prop when the default Tray placement doesn't work for your layout (e.g.: when the TopNavBar is not the main navbar of the window).
+   */
+  trayMountNode?: Element | (() => Element | null) | null
+
+  /**
+   * Callback fired on dropdown menu open and close
+   */
+  onDropdownMenuToggle?: (isMenuOpen: boolean) => void
+
+  /**
+   * Callback fired when an item is selected in the dropdown menu
+   */
+  onDropdownMenuSelect?: DrilldownProps['onSelect']
+}
+
+type TopNavBarSmallViewportLayoutOwnProps = CommonTopNavBarLayoutProps &
+  SmallViewportLayoutOwnProps
+
+type PropKeys = keyof TopNavBarSmallViewportLayoutOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TopNavBarSmallViewportLayoutProps = TopNavBarSmallViewportLayoutOwnProps &
+  WithStyleProps<
+    TopNavBarLayoutSmallViewportTheme,
+    TopNavBarSmallViewportLayoutStyle
+  > &
+  OtherHTMLAttributes<TopNavBarSmallViewportLayoutOwnProps> &
+  WithDeterministicIdProps
+
+type TopNavBarSmallViewportLayoutStyle = ComponentStyle<
+  | 'topNavBarSmallViewportLayout'
+  | 'navbar'
+  | 'inPlaceDialogContainer'
+  | 'inPlaceDialogContainerContent'
+  | 'inPlaceDialogContainerButton'
+  | 'menuTriggerContainer'
+  | 'menuTrigger'
+  | 'dropdownMenuOption'
+  | 'dropdownMenuOptionActive'
+  | 'dropdownMenuOptionWithAvatar'
+  | 'brandContainer'
+  | 'alternativeTitleContainer'
+  | 'trayContainer'
+  | 'globalStyles'
+> & {
+  navbarHeight: string | number
+}
+
+type TopNavBarSmallViewportLayoutState = {
+  isDropdownMenuOpen: boolean
+  isDropdownMenuVisible: boolean
+  menuBottomPosition: number
+}
+
+type TopNavBarSmallViewportLayoutStyleProps = {
+  isDropdownMenuVisible: boolean
+  drilldownId: string
+  trayId: string
+  menuBottomPosition: number
+  inverseColor: TopNavBarContextType['inverseColor']
+}
+
+const propTypes: PropValidators<PropKeys> = {
+  // Edit PropTypes in TopNabBarLayout/props.ts
+  ...commonPropTypes,
+  ...smallViewportPropTypes
+}
+
+const allowedProps: AllowedPropKeys = [
+  // Edit allowed props in TopNabBarLayout/props.ts
+  ...commonAllowedProps,
+  ...smallViewportAllowedProps
+]
+
+export type {
+  SmallViewportLayoutChild,
+  SmallViewportLayoutOwnProps,
+  TopNavBarSmallViewportLayoutProps,
+  TopNavBarSmallViewportLayoutOwnProps,
+  TopNavBarSmallViewportLayoutStyle,
+  TopNavBarSmallViewportLayoutState,
+  TopNavBarSmallViewportLayoutStyleProps
+}
+export { propTypes, allowedProps }

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

@@ -0,0 +1,184 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { TopNavBarLayoutSmallViewportTheme } from '@instructure/shared-types'
+import type {
+  TopNavBarSmallViewportLayoutProps,
+  TopNavBarSmallViewportLayoutStyleProps,
+  TopNavBarSmallViewportLayoutStyle
+} from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: TopNavBarLayoutSmallViewportTheme,
+  _props: TopNavBarSmallViewportLayoutProps,
+  state: TopNavBarSmallViewportLayoutStyleProps
+): TopNavBarSmallViewportLayoutStyle => {
+  const {
+    isDropdownMenuVisible,
+    drilldownId,
+    trayId,
+    menuBottomPosition,
+    inverseColor
+  } = state
+
+  const dropdownMenuTopPosition =
+    componentTheme.smallViewportTrayFixTopPosition || `${menuBottomPosition}px`
+
+  const dropdownMenuOptionStyle = {
+    display: 'inline-block',
+    padding: `0 ${componentTheme.smallViewportDropdownMenuActiveOptionIndicatorSpacing}`
+  }
+
+  const navBarStyles = {
+    fontSize: componentTheme.smallViewportFontSize,
+    fontFamily: componentTheme.smallViewportFontFamily,
+    fontWeight: componentTheme.smallViewportFontWeight,
+    background: inverseColor
+      ? componentTheme.smallViewportBackgroundInverse
+      : componentTheme.smallViewportBackground,
+    borderBlockEnd: inverseColor
+      ? componentTheme.smallViewportBottomBorderInverse
+      : componentTheme.smallViewportBottomBorder,
+    height: componentTheme.smallViewportHeight,
+    maxWidth: '100%',
+    paddingBlock: 0,
+    paddingInline: componentTheme.smallViewportInlinePadding,
+    position: 'relative',
+    zIndex: componentTheme.smallViewportZIndex,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'stretch',
+    overflow: 'hidden'
+  }
+
+  return {
+    topNavBarSmallViewportLayout: {
+      label: 'topNavBarSmallViewportLayout'
+    },
+    navbar: {
+      label: 'topNavBarSmallViewportLayout__navbar',
+      ...navBarStyles
+    },
+    inPlaceDialogContainer: {
+      label: 'topNavBarSmallViewportLayout__inPlaceDialogContainer',
+      ...navBarStyles,
+      alignItems: 'center'
+    },
+    inPlaceDialogContainerContent: {
+      label: 'topNavBarSmallViewportLayout__inPlaceDialogContainerContent',
+      flex: '1 1'
+    },
+    inPlaceDialogContainerButton: {
+      label: 'topNavBarSmallViewportLayout__inPlaceDialogContainerButton',
+      flex: '0 0'
+    },
+    menuTriggerContainer: {
+      label: 'topNavBarSmallViewportLayout__menuTriggerContainer',
+      display: 'flex',
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+      flex: '1 1'
+    },
+    menuTrigger: {
+      label: 'topNavBarSmallViewportLayout__menuTrigger',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start'
+    },
+    alternativeTitleContainer: {
+      label: 'topNavBarSmallViewportLayout__alternativeTitleContainer',
+      marginBlock: componentTheme.smallViewportAlternativeTitleBlockMargin,
+      marginInline: componentTheme.smallViewportAlternativeTitleInlineMargin
+    },
+    dropdownMenuOption: {
+      label: 'topNavBarSmallViewportLayout__dropdownMenuOption',
+      ...dropdownMenuOptionStyle
+    },
+    dropdownMenuOptionActive: {
+      label: 'topNavBarSmallViewportLayout__dropdownMenuOptionActive',
+      ...dropdownMenuOptionStyle,
+      fontWeight:
+        componentTheme.smallViewportDropdownMenuActiveOptionFontWeight,
+      paddingBlockEnd:
+        componentTheme.smallViewportDropdownMenuActiveOptionIndicatorSpacing,
+      borderBottom: `${componentTheme.smallViewportDropdownMenuActiveOptionIndicatorWidth} solid ${componentTheme.smallViewportDropdownMenuActiveOptionIndicatorColor}`
+    },
+    dropdownMenuOptionWithAvatar: {
+      label: 'topNavBarSmallViewportLayout__dropdownMenuOptionWithAvatar',
+      ...dropdownMenuOptionStyle,
+      display: 'flex',
+      alignItems: 'center'
+    },
+    brandContainer: {
+      label: 'topNavBarSmallViewportLayout__brandContainer',
+      display: 'flex',
+      alignItems: 'stretch'
+    },
+    trayContainer: {
+      label: 'topNavBarSmallViewportLayout__trayContainer',
+      width: '100%',
+      position: componentTheme.smallViewportTrayPosition,
+      insetBlockStart: dropdownMenuTopPosition,
+      insetInlineStart: '0px',
+      zIndex: componentTheme.smallViewportTrayZIndex,
+
+      ...(isDropdownMenuVisible && {
+        height: `calc(100% - ${dropdownMenuTopPosition})`
+      })
+    },
+    globalStyles: {
+      // the tray should all have 100% height
+      [`#${trayId}`]: {
+        height: '100%'
+      },
+      // removes the focus ring on the drilldown,
+      // not needed on the mobile menu
+      [`#${drilldownId}`]: {
+        height: '100%',
+
+        '&::before': {
+          // display: 'none'
+          top: '4px',
+          left: '4px',
+          right: '4px',
+          bottom: '4px',
+          zIndex: 1
+        }
+      }
+    },
+    navbarHeight: componentTheme.smallViewportHeight
+  }
+}
+
+export default generateStyle

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

@@ -0,0 +1,69 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Theme } from '@instructure/ui-themes'
+import type { TopNavBarLayoutSmallViewportTheme } from '@instructure/shared-types'
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = (
+  theme: Theme
+): TopNavBarLayoutSmallViewportTheme => {
+  const { colors, stacking, typography, spacing, borders } = theme
+
+  const componentVariables: TopNavBarLayoutSmallViewportTheme = {
+    smallViewportFontSize: typography?.fontSizeMedium,
+    smallViewportFontFamily: typography?.fontFamily,
+    smallViewportFontWeight: typography?.fontWeightNormal,
+
+    smallViewportBackground: colors?.backgroundBrandSecondary,
+    smallViewportBackgroundInverse: colors?.backgroundLightest,
+    smallViewportBottomBorder: 'none',
+    smallViewportBottomBorderInverse: `${borders?.widthSmall} ${borders?.style} ${colors?.borderMedium}`,
+    smallViewportHeight: '3.5rem',
+    smallViewportInlinePadding: `0.25rem`,
+    smallViewportZIndex: stacking?.topmost + 1,
+
+    smallViewportTrayPosition: 'fixed',
+    smallViewportTrayFixTopPosition: undefined,
+    smallViewportTrayZIndex: stacking?.topmost + 1,
+
+    smallViewportDropdownMenuActiveOptionFontWeight: typography?.fontWeightBold,
+    smallViewportDropdownMenuActiveOptionIndicatorSpacing: '0.25rem',
+    smallViewportDropdownMenuActiveOptionIndicatorWidth: borders?.widthMedium,
+    smallViewportDropdownMenuActiveOptionIndicatorColor: 'currentColor',
+
+    smallViewportAlternativeTitleInlineMargin: spacing?.xxSmall,
+    smallViewportAlternativeTitleBlockMargin: '0'
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export default generateComponentTheme

package/src/TopNavBar/TopNavBarLayout/TopNavBarLayoutLocator.ts

@@ -0,0 +1,46 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { locator } from '@instructure/ui-test-locator'
+
+import { TopNavBarDesktopLayoutLocator } from './DesktopLayout/TopNavBarDesktopLayoutLocator'
+import { TopNavBarSmallViewportLayoutLocator } from './SmallViewportLayout/TopNavBarSmallViewportLayoutLocator'
+
+import { TopNavBarLayout } from './index'
+
+// TODO: this type seems to be too complex, try to fix it later
+export const TopNavBarLayoutLocator: {
+  customMethods: {
+    findDesktopLayout: any
+    findSmallViewportLayout: any
+  }
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+} = locator(TopNavBarLayout.selector, {
+  findDesktopLayout: (...args: any[]) => {
+    return TopNavBarDesktopLayoutLocator.find(...args)
+  },
+  findSmallViewportLayout: (...args: any[]) => {
+    return TopNavBarSmallViewportLayoutLocator.find(...args)
+  }
+})

package/src/TopNavBar/TopNavBarLayout/index.tsx

@@ -0,0 +1,149 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/** @jsx jsx */
+import React, { Component } from 'react'
+
+import { testable } from '@instructure/ui-testable'
+
+import { withStyle, jsx } from '@instructure/emotion'
+
+import type {
+  TopNavBarLayoutDesktopTheme,
+  TopNavBarLayoutSmallViewportTheme
+} from '@instructure/shared-types'
+
+import { TopNavBarContext } from '../TopNavBarContext'
+
+import generateComponentTheme from './theme'
+
+import { TopNavBarSmallViewportLayout } from './SmallViewportLayout'
+import type { TopNavBarSmallViewportLayoutProps } from './SmallViewportLayout/props'
+import { TopNavBarDesktopLayout } from './DesktopLayout'
+import type { TopNavBarDesktopLayoutProps } from './DesktopLayout/props'
+
+import { propTypes, allowedProps } from './props'
+import type { TopNavBarLayoutProps } from './props'
+
+/**
+---
+parent: TopNavBar
+id: TopNavBar.Layout
+---
+@module TopNavBarLayout
+@tsProps
+**/
+@withStyle(null, generateComponentTheme)
+@testable()
+class TopNavBarLayout extends Component<TopNavBarLayoutProps> {
+  static readonly componentId = 'TopNavBar.Layout'
+
+  static propTypes = propTypes
+  static allowedProps = allowedProps
+  static defaultProps = {
+    desktopConfig: {},
+    smallViewportConfig: {}
+  }
+
+  declare context: React.ContextType<typeof TopNavBarContext>
+  static contextType = TopNavBarContext
+
+  ref: HTMLElement | null = null
+
+  handleRef = (el: HTMLElement | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  get sortedThemeOverride() {
+    const { themeOverride } = this.props
+
+    // TODO: try to type better, the themeOverride types are not prepared to be inherited and sorted
+
+    if (!themeOverride || typeof themeOverride === 'function') {
+      return {
+        desktopThemeOverride: themeOverride as any,
+        smallViewportThemeOverride: themeOverride as any
+      }
+    }
+
+    const desktopThemeOverride: Partial<TopNavBarLayoutDesktopTheme> = {}
+    const smallViewportThemeOverride: Partial<TopNavBarLayoutSmallViewportTheme> =
+      {}
+
+    for (const key in themeOverride) {
+      if (key.startsWith('smallViewport')) {
+        const variable = key as keyof TopNavBarLayoutSmallViewportTheme
+        smallViewportThemeOverride[variable] = themeOverride[variable] as any
+      } else if (
+        (key as keyof TopNavBarLayoutDesktopTheme).startsWith('desktop')
+      ) {
+        const variable = key as keyof TopNavBarLayoutDesktopTheme
+        desktopThemeOverride[variable] = themeOverride[variable] as any
+      }
+    }
+
+    return { desktopThemeOverride, smallViewportThemeOverride }
+  }
+
+  render() {
+    const {
+      desktopConfig,
+      smallViewportConfig,
+      // @ts-expect-error prevents it to be passed
+      styles,
+      // @ts-expect-error prevents it to be passed
+      makeStyles,
+      ...restProps
+    } = this.props
+
+    if (this.context.layout === 'smallViewport') {
+      return (
+        <TopNavBarSmallViewportLayout
+          {...smallViewportConfig}
+          {...(restProps as TopNavBarSmallViewportLayoutProps)}
+          themeOverride={this.sortedThemeOverride.smallViewportThemeOverride}
+          elementRef={this.handleRef}
+        />
+      )
+    }
+
+    return (
+      <TopNavBarDesktopLayout
+        {...desktopConfig}
+        {...(restProps as TopNavBarDesktopLayoutProps)}
+        themeOverride={this.sortedThemeOverride.desktopThemeOverride}
+        elementRef={this.handleRef}
+      />
+    )
+  }
+}
+
+export { TopNavBarLayout }
+export default TopNavBarLayout