Add <NavigationProvider/> to <SeamProvider/>

src/lib/NavigationView.tsx

@@ -4,7 +4,7 @@ import { useNavigation, type View } from 'lib/NavigationProvider.js'
 import AccessCodeDetails from 'lib/ui/AccessCodeDetails/AccessCodeDetails.js'
 
 interface NavigationViewProps {
-  children: JSX.Element
+  children: React.ReactNode
 }
 
 export function NavigationView({ children: rootView }: NavigationViewProps) {
@@ -19,14 +19,18 @@ export function NavigationView({ children: rootView }: NavigationViewProps) {
 }
 
 function Subview({ view }: { view: View }) {
+  const { goBack } = useNavigation()
+
   switch (view.name) {
     case 'device_detail':
-      return <DeviceDetails deviceId={view.deviceId} />
+      return <DeviceDetails deviceId={view.deviceId} onBack={goBack} />
     case 'access_code_detail':
-      return <AccessCodeDetails accessCodeId={view.accessCodeId} />
+      return (
+        <AccessCodeDetails accessCodeId={view.accessCodeId} onBack={goBack} />
+      )
     case 'device_table':
-      return <DeviceTable />
+      return <DeviceTable onBack={goBack} />
     case 'access_code_table':
-      return <AccessCodeTable deviceId={view.deviceId} />
+      return <AccessCodeTable deviceId={view.deviceId} onBack={goBack} />
   }
 }

src/lib/SeamProvider.tsx

@@ -9,6 +9,9 @@ import {
 } from 'react'
 import type { Seam, SeamClientOptions } from 'seamapi'
 
+import NavigationProvider from 'lib/NavigationProvider.js'
+import { NavigationView } from 'lib/NavigationView.js'
+
 declare global {
   // eslint-disable-next-line no-var
   var seam: SeamProviderProps | undefined
@@ -68,7 +71,11 @@ export function SeamProvider({
   return (
     <div className='seam-components'>
       <QueryClientProvider client={queryClientRef.current}>
-        <Provider value={{ ...contextRef.current }}>{children}</Provider>
+        <NavigationProvider>
+          <Provider value={{ ...contextRef.current }}>
+            <NavigationView>{children}</NavigationView>
+          </Provider>
+        </NavigationProvider>
       </QueryClientProvider>
     </div>
   )

src/lib/ui/AccessCodeDetails/AccessCodeDetails.tsx

@@ -8,10 +8,12 @@ import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 
 export interface AccessCodeDetailsProps {
   accessCodeId: string
+  onBack?: () => void
 }
 
 export default function AccessCodeDetails({
   accessCodeId,
+  onBack,
 }: AccessCodeDetailsProps) {
   const { isLoading, data: accessCode } = useFakeAccessCode({
     access_code_id: accessCodeId,
@@ -25,7 +27,7 @@ export default function AccessCodeDetails({
 
   return (
     <div className='seam-access-code-details'>
-      <ContentHeader title='Access code' />
+      <ContentHeader title='Access code' onBack={onBack} />
       <div className='seam-summary'>
         <div className='seam-top'>
           <span className='seam-label'>{t.accessCode}</span>

src/lib/ui/AccessCodeTable/AccessCodeTable.tsx

@@ -11,9 +11,17 @@ import { TableTitle } from 'lib/ui/Table/TableTitle.js'
 import { Caption } from 'lib/ui/typography/Caption.js'
 import { Title } from 'lib/ui/typography/Title.js'
 
-export function AccessCodeTable(props: { deviceId: string }): JSX.Element {
+interface AccessCodeTableProps {
+  deviceId: string
+  onBack?: () => void
+}
+
+export function AccessCodeTable({
+  deviceId,
+  onBack,
+}: AccessCodeTableProps): JSX.Element {
   const { accessCodes } = useAccessCodes({
-    device_id: props.deviceId,
+    device_id: deviceId,
   })
 
   const { show } = useNavigation()
@@ -22,7 +30,7 @@ export function AccessCodeTable(props: { deviceId: string }): JSX.Element {
 
   return (
     <div className='seam-access-code-table'>
-      <ContentHeader />
+      <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
           {t.accessCodes} <Caption>({accessCodes.length})</Caption>

src/lib/ui/DeviceDetails/DeviceDetails.tsx

@@ -12,10 +12,11 @@ import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 
 export interface DeviceDetailsProps {
   deviceId: string
+  onBack?: () => void
 }
 
 export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
-  const { deviceId } = props
+  const { deviceId, onBack } = props
 
   const { isLoading: isLoadingDevice, device } = useFakeDevice({
     device_id: deviceId,
@@ -46,7 +47,7 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
 
   return (
     <div className='seam-device-details'>
-      <ContentHeader title='Device' />
+      <ContentHeader title='Device' onBack={onBack} />
       <div className='seam-body'>
         <div className='seam-summary'>
           <div className='seam-content'>

src/lib/ui/DeviceTable/DeviceTable.stories.tsx

@@ -1,8 +1,6 @@
 import { Button, Dialog, DialogActions } from '@mui/material'
 import type { Meta, StoryObj } from '@storybook/react'
 
-import NavigationProvider from 'lib/NavigationProvider.js'
-import { NavigationView } from 'lib/NavigationView.js'
 import {
   DeviceTable,
   type DeviceTableProps,
@@ -65,11 +63,7 @@ function WithNavigationComponent(props: DeviceTableProps) {
       <Button onClick={toggleOpen}>Open Modal</Button>
       <Dialog open={open} fullWidth maxWidth='sm' onClose={toggleOpen}>
         <div className='seam-components'>
-          <NavigationProvider>
-            <NavigationView>
-              <DeviceTable {...props} />
-            </NavigationView>
-          </NavigationProvider>
+          <DeviceTable {...props} />
         </div>
         <DialogActions
           sx={{

src/lib/ui/DeviceTable/DeviceTable.tsx

@@ -37,7 +37,7 @@ export function DeviceTable({ onBack, ...props }: DeviceTableProps) {
 
   return (
     <div className='seam-device-table'>
-      <ContentHeader />
+      <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
           {t.devices} <Caption>({deviceCount})</Caption>

src/lib/ui/layout/ContentHeader.tsx

@@ -1,17 +1,18 @@
 import { ArrowBackIcon } from 'lib/icons/ArrowBack.js'
-import { useNavigation } from 'lib/NavigationProvider.js'
 
-export function ContentHeader(props: { title?: string }): JSX.Element | null {
-  const { title } = props
+export function ContentHeader(props: {
+  title?: string
+  onBack?: () => void
+}): JSX.Element | null {
+  const { title, onBack } = props
 
-  const { goBack } = useNavigation()
-  if (!title && !goBack) {
+  if (!title && !onBack) {
     return null
   }
 
   return (
     <div className='seam-content-header'>
-      {goBack && <BackIcon onClick={goBack} />}
+      {onBack && <BackIcon onClick={onBack} />}
       <span className='seam-title'>{title}</span>
     </div>
   )