@seamapi/react 0.17.0 → 0.19.0

package/lib/ui/Table/TableCell.d.ts

@@ -1,2 +1,2 @@
 import type { DivProps } from '../../../lib/ui/types.js';
-export declare function TableCell({ className, ...otherProps }: DivProps): JSX.Element;
+export declare function TableCell({ className, ...props }: DivProps): JSX.Element;

package/lib/ui/Table/TableCell.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-export function TableCell({ className, ...otherProps }) {
-    return (_jsx("div", { className: classNames('seam-table-cell', className), ...otherProps }));
+export function TableCell({ className, ...props }) {
+    return _jsx("div", { className: classNames('seam-table-cell', className), ...props });
 }
 //# sourceMappingURL=TableCell.js.map

package/lib/ui/Table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../../../src/lib/ui/Table/TableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAInC,MAAM,UAAU,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,UAAU,EAAY;IAC9D,OAAO,CACL,cAAK,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,KAAM,UAAU,GAAI,CAC7E,CAAA;AACH,CAAC"}
+{"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../../../src/lib/ui/Table/TableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAInC,MAAM,UAAU,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAY;IACzD,OAAO,cAAK,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAA;AAChF,CAAC"}

package/lib/ui/TextField/SearchTextField.d.ts

@@ -1,2 +1,2 @@
 import { type TextFieldProps } from '../../../lib/ui/TextField/TextField.js';
-export declare function SearchTextField({ className, ...otherProps }: TextFieldProps): JSX.Element;
+export declare function SearchTextField({ className, ...props }: TextFieldProps): JSX.Element;

package/lib/ui/TextField/SearchTextField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { TextField } from '../../../lib/ui/TextField/TextField.js';
-export function SearchTextField({ className, ...otherProps }) {
-    return (_jsx(TextField, { ...otherProps, className: classNames(className, 'seam-search-text-field') }));
+export function SearchTextField({ className, ...props }) {
+    return (_jsx(TextField, { ...props, className: classNames(className, 'seam-search-text-field') }));
 }
 //# sourceMappingURL=SearchTextField.js.map

package/lib/ui/TextField/SearchTextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchTextField.js","sourceRoot":"","sources":["../../../src/lib/ui/TextField/SearchTextField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAEnC,OAAO,EAAE,SAAS,EAAuB,MAAM,+BAA+B,CAAA;AAE9E,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,UAAU,EACE;IACf,OAAO,CACL,KAAC,SAAS,OACJ,UAAU,EACd,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,wBAAwB,CAAC,GAC1D,CACH,CAAA;AACH,CAAC"}
+{"version":3,"file":"SearchTextField.js","sourceRoot":"","sources":["../../../src/lib/ui/TextField/SearchTextField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAEnC,OAAO,EAAE,SAAS,EAAuB,MAAM,+BAA+B,CAAA;AAE9E,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACO;IACf,OAAO,CACL,KAAC,SAAS,OACJ,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,wBAAwB,CAAC,GAC1D,CACH,CAAA;AACH,CAAC"}

package/lib/ui/device/BatteryStatus.d.ts

@@ -2,4 +2,4 @@ import type { LockDevice } from 'seamapi';
 export interface BatteryStatusProps {
     device: LockDevice;
 }
-export declare function BatteryStatus(props: BatteryStatusProps): import("react/jsx-runtime").JSX.Element;
+export declare function BatteryStatus(props: BatteryStatusProps): JSX.Element;

package/lib/ui/layout/ContentHeader.d.ts

@@ -1,3 +1,4 @@
 export declare function ContentHeader(props: {
     title?: string;
+    onBack?: () => void;
 }): JSX.Element | null;

package/lib/ui/layout/ContentHeader.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowBackIcon } from '../../../lib/icons/ArrowBack.js';
-import { useNavigation } from '../../../lib/NavigationProvider.js';
 export function ContentHeader(props) {
-    const { title } = props;
-    const { goBack } = useNavigation();
-    if (!title && !goBack) {
+    const { title, onBack } = props;
+    if (title == null && onBack == null) {
         return null;
     }
-    return (_jsxs("div", { className: 'seam-content-header', children: [goBack && _jsx(BackIcon, { onClick: goBack }), _jsx("span", { className: 'seam-title', children: title })] }));
+    return (_jsxs("div", { className: 'seam-content-header', children: [_jsx(BackIcon, { onClick: onBack }), _jsx("span", { className: 'seam-title', children: title })] }));
 }
 function BackIcon(props) {
     if (props.onClick == null) {

package/lib/ui/layout/ContentHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentHeader.js","sourceRoot":"","sources":["../../../src/lib/ui/layout/ContentHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IAEvB,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,EAAE;QACrB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aACjC,MAAM,IAAI,KAAC,QAAQ,IAAC,OAAO,EAAE,MAAM,GAAI,EACxC,eAAM,SAAS,EAAC,YAAY,YAAE,KAAK,GAAQ,IACvC,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,KAA+B;IAC/C,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,EAAE;QACzB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,KAAC,aAAa,IAAC,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAA;AAC7E,CAAC"}
+{"version":3,"file":"ContentHeader.js","sourceRoot":"","sources":["../../../src/lib/ui/layout/ContentHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAEtD,MAAM,UAAU,aAAa,CAAC,KAG7B;IACC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAC/B,IAAI,KAAK,IAAI,IAAI,IAAI,MAAM,IAAI,IAAI,EAAE;QACnC,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,OAAO,EAAE,MAAM,GAAI,EAC7B,eAAM,SAAS,EAAC,YAAY,YAAE,KAAK,GAAQ,IACvC,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,KAA+B;IAC/C,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,EAAE;QACzB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,KAAC,aAAa,IAAC,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAA;AAC7E,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "Seam React component library.",
   "type": "module",
   "main": "index.js",
@@ -58,7 +58,6 @@
     "docs:build": "storybook build --docs --output-dir docs",
     "predocs:build": "npm run examples:build",
     "typecheck": "tsc",
-    "dependencies": "dpdm --exit-code circular:1 src/index.ts",
     "test": "jest --collect-coverage",
     "test:update": "jest --updateSnapshot",
     "test:watch": "jest --watch",
@@ -95,7 +94,7 @@
     "@tanstack/react-query": "^4.28.0",
     "classnames": "^2.3.2",
     "luxon": "^3.3.0",
-    "seamapi": "^5.21.0",
+    "seamapi": "^5.21.1",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -126,7 +125,6 @@
     "concurrently": "^8.0.1",
     "copy-webpack-plugin": "^11.0.0",
     "del-cli": "^5.0.0",
-    "dpdm": "^3.13.0",
     "eslint": "^8.9.0",
     "eslint-config-prettier": "^8.4.0",
     "eslint-config-standard-jsx": "^11.0.0",
@@ -137,7 +135,6 @@
     "eslint-plugin-unused-imports": "^2.0.0",
     "fast-glob": "^3.2.12",
     "http-proxy-middleware": "^2.0.6",
-    "isomorphic-fetch": "^3.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "prettier": "^2.3.0",

package/src/lib/seam/access-codes/use-access-code.ts

@@ -1,45 +1,34 @@
 import { useQuery } from '@tanstack/react-query'
-import { DateTime } from 'luxon'
-import type { AccessCode, AccessCodeGetRequest } from 'seamapi'
-import { v4 as uuid } from 'uuid'
+import type {
+  AccessCode,
+  AccessCodeGetRequest,
+  AccessCodeGetResponse,
+  SeamError,
+} from 'seamapi'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
 
 export type UseAccessCodeParams = AccessCodeGetRequest | string
-export type UseAccessCodeData = AccessCode
-
-export function useAccessCode(params: UseAccessCodeParams) {
-  const { client } = useSeamClient()
+export type UseAccessCodeData = AccessCode | null
 
+export function useAccessCode(
+  params: UseAccessCodeParams
+): UseSeamQueryResult<'accessCode', UseAccessCodeData> {
   const normalizedParams =
     typeof params === 'string' ? { access_code_id: params } : params
 
-  return useQuery({
+  const { client } = useSeamClient()
+  const { data, ...rest } = useQuery<
+    AccessCodeGetResponse['access_code'] | null,
+    SeamError
+  >({
     enabled: client != null,
-    queryKey: ['access_code', 'get', normalizedParams],
+    queryKey: ['access_codes', 'get', normalizedParams],
     queryFn: async () => {
       if (client == null) return null
-
       return await client?.accessCodes.get(normalizedParams)
     },
   })
-}
-
-export function useFakeAccessCode(_params: UseAccessCodeParams): {
-  isLoading: boolean
-  data: AccessCode
-} {
-  const accessCode: AccessCode = {
-    access_code_id: uuid(),
-    type: 'time_bound',
-    starts_at: DateTime.now().minus({ days: 2 }).toISO() ?? '',
-    ends_at: DateTime.now().plus({ days: 1 }).toISO() ?? '',
-    code: '1234',
-    created_at: DateTime.now().toISO() ?? '',
-    device_id: 'some_device_id',
-    status: 'set',
-    name: 'Guest - Kranz',
-  }
-
-  return { isLoading: false, data: accessCode }
+  return { ...rest, accessCode: data }
 }

package/src/lib/seam/access-codes/use-access-codes.ts

@@ -1,8 +1,14 @@
 import { useQuery } from '@tanstack/react-query'
-import type { AccessCode, AccessCodesListResponse, SeamError } from 'seamapi'
+import type {
+  AccessCode,
+  AccessCodesListRequest,
+  AccessCodesListResponse,
+  SeamError,
+} from 'seamapi'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+import { byCreatedAt } from 'lib/sort-by.js'
 
 export type UseAccessCodesParams = AccessCodesListRequest | string
 export type UseAccessCodesData = AccessCode[]
@@ -23,17 +29,9 @@ export function useAccessCodes(
     queryFn: async () => {
       if (client == null) return []
       const accessCodes = await client?.accessCodes.list(normalizedParams)
-      return accessCodes.sort(
-        (a, b) =>
-          new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
-      )
+      return accessCodes.sort(byCreatedAt)
     },
   })
 
   return { ...rest, accessCodes: data }
 }
-
-// UPSTREAM: https://github.com/seamapi/javascript/pull/200
-interface AccessCodesListRequest {
-  device_id: string
-}

package/src/lib/seam/devices/use-device.ts

@@ -36,7 +36,10 @@ export function useDevice(
   return { ...rest, device: data }
 }
 
-export function useFakeDevice(_params: DeviceGetRequest) {
+export function useFakeDevice(_params: DeviceGetRequest): {
+  isLoading: boolean
+  device: UseDeviceData
+} {
   const device: LockDevice = {
     device_id: 'f9a9ab36-9e14-4390-a88c-b4c78304c6aa',
     device_type: 'august_lock',

package/src/lib/seam/devices/use-devices.ts

@@ -9,6 +9,7 @@ import type {
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+import { byCreatedAt } from 'lib/sort-by.js'
 
 export type UseDevicesParams = DevicesListRequest
 export type UseDevicesData = Array<Device<CommonDeviceProperties>>
@@ -24,10 +25,7 @@ export function useDevices(
       queryFn: async () => {
         if (client == null) return []
         const devices = await client?.devices.list(params)
-        return devices.sort(
-          (a, b) =>
-            new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
-        )
+        return devices.sort(byCreatedAt)
       },
     }
   )

package/src/lib/sort-by.ts

@@ -0,0 +1,11 @@
+import { DateTime } from 'luxon'
+
+export const byCreatedAt = (
+  a: { created_at: string },
+  b: { created_at: string }
+): number => {
+  const t1 = DateTime.fromISO(a.created_at)
+  const t2 = DateTime.fromISO(b.created_at)
+  if (!t1.isValid || !t2.isValid) return 0
+  return t1.toMillis() - t2.toMillis()
+}

package/src/lib/ui/AccessCodeDetails/AccessCodeDetails.tsx

@@ -1,31 +1,38 @@
 import { DateTime } from 'luxon'
-import type { AccessCode } from 'seamapi'
+import { useState } from 'react'
+import type { AccessCode, CommonDeviceProperties, Device } from 'seamapi'
 
-import { useFakeAccessCode } from 'lib/index.js'
-
-import AccessCodeDevice from 'lib/ui/AccessCodeDetails/AccessCodeDevice.js'
+import { AccessCodeDevice } from 'lib/ui/AccessCodeDetails/AccessCodeDevice.js'
+import { DeviceDetails } from 'lib/ui/DeviceDetails/DeviceDetails.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 
 export interface AccessCodeDetailsProps {
-  accessCodeId: string
+  accessCode: AccessCode
+  onBack?: () => void
 }
 
-export default function AccessCodeDetails({
-  accessCodeId,
-}: AccessCodeDetailsProps) {
-  const { isLoading, data: accessCode } = useFakeAccessCode({
-    access_code_id: accessCodeId,
-  })
+export function AccessCodeDetails({
+  accessCode,
+  onBack,
+}: AccessCodeDetailsProps): JSX.Element {
+  const name = accessCode.name ?? t.fallbackName
+  const [selectedDevice, selectDevice] =
+    useState<Device<CommonDeviceProperties> | null>(null)
 
-  if (isLoading || !accessCode) {
-    return null
+  if (selectedDevice != null) {
+    return (
+      <DeviceDetails
+        device={selectedDevice}
+        onBack={() => {
+          selectDevice(null)
+        }}
+      />
+    )
   }
 
-  const name = accessCode.name ?? t.fallbackName
-
   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>
@@ -35,7 +42,10 @@ export default function AccessCodeDetails({
             <Duration accessCode={accessCode} />
           </div>
         </div>
-        <AccessCodeDevice deviceId={accessCode.device_id} />
+        <AccessCodeDevice
+          deviceId={accessCode.device_id}
+          onSelectDevice={selectDevice}
+        />
       </div>
       <div className='seam-details'>
         <div className='seam-row'>
@@ -60,7 +70,7 @@ export default function AccessCodeDetails({
   )
 }
 
-function ScheduleInfo({ accessCode }: { accessCode: AccessCode }) {
+function ScheduleInfo({ accessCode }: { accessCode: AccessCode }): JSX.Element {
   if (accessCode.type === 'ongoing') {
     return <span>{t.ongoing}</span>
   }

package/src/lib/ui/AccessCodeDetails/AccessCodeDevice.tsx

@@ -1,4 +1,5 @@
-import { useNavigation } from 'lib/NavigationProvider.js'
+import type { CommonDeviceProperties, Device } from 'seamapi'
+
 import { isLockDevice } from 'lib/seam/devices/types.js'
 import { useFakeDevice } from 'lib/seam/devices/use-device.js'
 import { Button } from 'lib/ui/Button.js'
@@ -6,13 +7,17 @@ import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { getDeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
 import { TextButton } from 'lib/ui/TextButton.js'
 
-export default function AccessCodeDevice({ deviceId }: { deviceId: string }) {
+export function AccessCodeDevice({
+  deviceId,
+  onSelectDevice,
+}: {
+  deviceId: string
+  onSelectDevice: (device: Device<CommonDeviceProperties>) => void
+}): JSX.Element | null {
   //  TODO: Replace with `useDevice()` once ready
   const { isLoading, device } = useFakeDevice({ device_id: deviceId })
-  const { show } = useNavigation()
 
-  // TODO: Do we want to return a skeleton loader here instead?
-  if (isLoading || !device || !isLockDevice(device)) {
+  if (isLoading || device == null || !isLockDevice(device)) {
     return null
   }
 
@@ -27,7 +32,7 @@ export default function AccessCodeDevice({ deviceId }: { deviceId: string }) {
         <div className='seam-model'>{model}</div>
         <TextButton
           onClick={() => {
-            show({ name: 'device_detail', deviceId: device.device_id })
+            onSelectDevice(device)
           }}
         >
           {t.deviceDetails}

package/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx

@@ -1,6 +1,9 @@
+import { useState } from 'react'
+import type { AccessCode } from 'seamapi'
+
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
-import { useNavigation } from 'lib/NavigationProvider.js'
 import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
+import { AccessCodeDetails } from 'lib/ui/AccessCodeDetails/AccessCodeDetails.js'
 import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
@@ -11,18 +14,37 @@ 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 {
+export function AccessCodeTable(props: {
+  deviceId: string
+  onBack?: () => void
+}): JSX.Element | null {
   const { accessCodes } = useAccessCodes({
     device_id: props.deviceId,
   })
+  const { onBack } = props
+
+  const [selectedAccessCode, selectAccessCode] = useState<AccessCode | null>(
+    null
+  )
 
-  const { show } = useNavigation()
+  if (selectedAccessCode != null) {
+    return (
+      <AccessCodeDetails
+        accessCode={selectedAccessCode}
+        onBack={() => {
+          selectAccessCode(null)
+        }}
+      />
+    )
+  }
 
-  if (!accessCodes) return <>{null}</>
+  if (accessCodes == null) {
+    return null
+  }
 
   return (
     <div className='seam-access-code-table'>
-      <ContentHeader />
+      <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
           {t.accessCodes} <Caption>({accessCodes.length})</Caption>
@@ -33,10 +55,7 @@ export function AccessCodeTable(props: { deviceId: string }): JSX.Element {
           <TableRow
             key={code.access_code_id}
             onClick={() => {
-              show({
-                name: 'access_code_detail',
-                accessCodeId: code.access_code_id,
-              })
+              selectAccessCode(code)
             }}
           >
             <TableCell className='seam-icon-cell'>
@@ -48,11 +67,7 @@ export function AccessCodeTable(props: { deviceId: string }): JSX.Element {
               <Title>{code.name}</Title>
               <CodeDetails accessCode={code} />
             </TableCell>
-            <TableCell className='seam-action-cell'>
-              {/* <IconButton>
-                <DotsEllipsisMoreIcon />
-              </IconButton> */}
-            </TableCell>
+            <TableCell className='seam-action-cell' />
           </TableRow>
         ))}
       </TableBody>

package/src/lib/ui/AccessCodeTable/AccessCodeTableContent.tsx

@@ -13,16 +13,17 @@ import { Title } from 'lib/ui/typography/Title.js'
 
 export interface AccessCodeTableContentProps {
   accessCodes: AccessCode[]
+  onBack?: () => void
 }
 
 export function AccessCodeTableContent(
   props: AccessCodeTableContentProps
 ): JSX.Element {
-  const { accessCodes } = props
+  const { accessCodes, onBack } = props
 
   return (
     <div className='seam-access-code-table'>
-      <ContentHeader />
+      <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
           {t.accessCodes} <Caption>({accessCodes.length})</Caption>
@@ -40,11 +41,7 @@ export function AccessCodeTableContent(
               <Title>{code.name}</Title>
               <CodeDetails accessCode={code} />
             </TableCell>
-            <TableCell className='seam-action-cell'>
-              {/* <IconButton>
-                <DotsEllipsisMoreIcon />
-              </IconButton> */}
-            </TableCell>
+            <TableCell className='seam-action-cell' />
           </TableRow>
         ))}
       </TableBody>

package/src/lib/ui/Button.tsx

@@ -12,7 +12,7 @@ export function Button({
   children,
   size = 'medium',
   disabled,
-}: ButtonProps) {
+}: ButtonProps): JSX.Element {
   return (
     <button
       className={classNames(`seam-btn seam-btn-${variant} seam-btn-${size}`, {

package/src/lib/ui/DeviceDetails/DeviceDetails.tsx

@@ -1,38 +1,44 @@
+import { type CommonDeviceProperties, type Device } from 'seamapi'
+
 import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
-import { useNavigation } from 'lib/NavigationProvider.js'
 import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
 import { isLockDevice } from 'lib/seam/devices/types.js'
-import { useFakeDevice } from 'lib/seam/devices/use-device.js'
+import { AccessCodeTable } from 'lib/ui/AccessCodeTable/AccessCodeTable.js'
 import { Button } from 'lib/ui/Button.js'
 import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
 import { DeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import useToggle from 'lib/use-toggle.js'
 
 export interface DeviceDetailsProps {
-  deviceId: string
+  device: Device<CommonDeviceProperties>
+  onBack?: () => void
 }
 
 export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
-  const { deviceId } = props
+  const { device, onBack } = props
 
-  const { isLoading: isLoadingDevice, device } = useFakeDevice({
-    device_id: deviceId,
-  })
+  const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
 
-  const { isLoading: isLoadingAccessCodes, accessCodes } = useAccessCodes({
-    device_id: deviceId,
+  const { isLoading, accessCodes } = useAccessCodes({
+    device_id: device.device_id,
   })
 
-  const isLoading = isLoadingDevice || isLoadingAccessCodes
-
-  const { show } = useNavigation()
-
-  if (isLoading || !device) {
+  if (isLoading) {
     return null
   }
 
+  if (accessCodesOpen) {
+    return (
+      <AccessCodeTable
+        deviceId={device.device_id}
+        onBack={toggleAccessCodesOpen}
+      />
+    )
+  }
+
   if (!isLockDevice(device)) {
     return null
   }
@@ -46,7 +52,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'>
@@ -69,9 +75,7 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
         <div className='seam-box'>
           <div
             className='seam-content seam-access-codes'
-            onClick={() => {
-              show({ name: 'access_code_table', deviceId: device.device_id })
-            }}
+            onClick={toggleAccessCodesOpen}
           >
             <span className='seam-value'>
               {accessCodeCount} {t.accessCodes}

package/src/lib/ui/DeviceDetails/DeviceModel.tsx

@@ -6,7 +6,7 @@ interface DeviceModelProps {
 
 export function DeviceModel({ device }: DeviceModelProps): JSX.Element | null {
   const model = getDeviceModel(device)
-  if (!model) {
+  if (model == null) {
     return null
   }