@seamapi/react 1.14.0 → 1.16.0

package/lib/seam/access-codes/use-access-codes.js

@@ -1,5 +1,4 @@
 import { useQuery } from '@tanstack/react-query';
-import { compareByCreatedAtDesc } from '../../../lib/dates.js';
 import { useSeamClient } from '../../../lib/seam/use-seam-client.js';
 export function useAccessCodes(params) {
     const normalizedParams = typeof params === 'string' ? { device_id: params } : params;
@@ -10,8 +9,7 @@ export function useAccessCodes(params) {
         queryFn: async () => {
             if (client == null)
                 return [];
-            const accessCodes = await client?.accessCodes.list(normalizedParams);
-            return accessCodes.sort(compareByCreatedAtDesc);
+            return await client?.accessCodes.list(normalizedParams);
         },
     });
     return { ...rest, accessCodes: data };

package/lib/seam/access-codes/use-access-codes.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-access-codes.js","sourceRoot":"","sources":["../../../src/lib/seam/access-codes/use-access-codes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQhD,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAM3D,MAAM,UAAU,cAAc,CAC5B,MAA4B;IAE5B,MAAM,gBAAgB,GACpB,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAA;IAE7D,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAGhC;QACA,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,gBAAgB,CAAC;QACpD,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,EAAE,CAAA;YAC7B,MAAM,WAAW,GAAG,MAAM,MAAM,EAAE,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;YACpE,OAAO,WAAW,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAA;QACjD,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,EAAE,GAAG,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,CAAA;AACvC,CAAC"}
+{"version":3,"file":"use-access-codes.js","sourceRoot":"","sources":["../../../src/lib/seam/access-codes/use-access-codes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQhD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAM3D,MAAM,UAAU,cAAc,CAC5B,MAA4B;IAE5B,MAAM,gBAAgB,GACpB,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAA;IAE7D,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAGhC;QACA,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,gBAAgB,CAAC;QACpD,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,EAAE,CAAA;YAC7B,OAAO,MAAM,MAAM,EAAE,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QACzD,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,EAAE,GAAG,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,CAAA;AACvC,CAAC"}

package/lib/seam/components/AccessCodeTable/AccessCodeTable.d.ts

@@ -1,7 +1,14 @@
 /// <reference types="react" />
+import { type UseAccessCodesData } from '../../../../lib/seam/access-codes/use-access-codes.js';
 export interface AccessCodeTableProps {
     deviceId: string;
+    accessCodeFilter?: (accessCode: AccessCode, searchInputValue: string) => boolean;
+    accessCodeComparator?: (accessCodeA: AccessCode, accessCodeB: AccessCode) => number;
+    onAccessCodeClick?: (accessCodeId: string) => void;
+    preventDefaultOnAccessCodeClick?: boolean;
     onBack?: () => void;
     className?: string;
 }
-export declare function AccessCodeTable({ deviceId, onBack, className, }: AccessCodeTableProps): JSX.Element | null;
+type AccessCode = UseAccessCodesData[number];
+export declare function AccessCodeTable({ deviceId, onAccessCodeClick, preventDefaultOnAccessCodeClick, onBack, accessCodeFilter, accessCodeComparator, className, }: AccessCodeTableProps): JSX.Element;
+export {};

package/lib/seam/components/AccessCodeTable/AccessCodeTable.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { compareByCreatedAtDesc } from '../../../../lib/dates.js';
 import { AccessCodeKeyIcon } from '../../../../lib/icons/AccessCodeKey.js';
 import { CopyIcon } from '../../../../lib/icons/Copy.js';
 import { ExclamationCircleOutlineIcon } from '../../../../lib/icons/ExclamationCircleOutline.js';
@@ -20,36 +21,45 @@ import { TableTitle } from '../../../../lib/ui/Table/TableTitle.js';
 import { SearchTextField } from '../../../../lib/ui/TextField/SearchTextField.js';
 import { Caption } from '../../../../lib/ui/typography/Caption.js';
 import { Title } from '../../../../lib/ui/typography/Title.js';
-export function AccessCodeTable({ deviceId, onBack, className, }) {
+const defaultAccessCodeFilter = (accessCode, searchInputValue) => {
+    const value = searchInputValue.trim();
+    if (value === '')
+        return true;
+    return new RegExp(value, 'i').test(accessCode.name ?? '');
+};
+export function AccessCodeTable({ deviceId, onAccessCodeClick = () => { }, preventDefaultOnAccessCodeClick = false, onBack, accessCodeFilter = defaultAccessCodeFilter, accessCodeComparator = compareByCreatedAtDesc, className, }) {
     const { accessCodes } = useAccessCodes({
         device_id: deviceId,
     });
-    const [selectedAccessCode, selectAccessCode] = useState(null);
-    const [searchTerm, setSearchTerm] = useState('');
-    if (selectedAccessCode != null) {
-        return (_jsx(AccessCodeDetails, { className: className, accessCodeId: selectedAccessCode.access_code_id, onBack: () => {
-                selectAccessCode(null);
+    const [selectedAccessCodeId, setSelectedAccessCodeId] = useState(null);
+    const [searchInputValue, setSearchInputValue] = useState('');
+    const filteredAccessCodes = useMemo(() => accessCodes
+        ?.filter((accessCode) => accessCodeFilter(accessCode, searchInputValue))
+        ?.sort(accessCodeComparator) ?? [], [accessCodes, searchInputValue, accessCodeFilter, accessCodeComparator]);
+    const handleAccessCodeClick = useCallback((accessCodeId) => {
+        onAccessCodeClick(accessCodeId);
+        if (preventDefaultOnAccessCodeClick)
+            return;
+        setSelectedAccessCodeId(accessCodeId);
+    }, [
+        onAccessCodeClick,
+        preventDefaultOnAccessCodeClick,
+        setSelectedAccessCodeId,
+    ]);
+    if (selectedAccessCodeId != null) {
+        return (_jsx(AccessCodeDetails, { className: className, accessCodeId: selectedAccessCodeId, onBack: () => {
+                setSelectedAccessCodeId(null);
             } }));
     }
-    if (accessCodes == null) {
-        return null;
-    }
-    const filteredCodes = accessCodes.filter((accessCode) => {
-        if (searchTerm === '') {
-            return true;
-        }
-        return new RegExp(searchTerm, 'i').test(accessCode.name ?? '');
-    });
-    const accessCodeCount = accessCodes.length;
-    return (_jsxs("div", { className: classNames('seam-access-code-table', className), children: [_jsx(ContentHeader, { onBack: onBack }), _jsxs(TableHeader, { children: [_jsxs(TableTitle, { children: [t.accessCodes, " ", _jsxs(Caption, { children: ["(", accessCodeCount, ")"] })] }), _jsx(SearchTextField, { value: searchTerm, onChange: setSearchTerm, disabled: accessCodeCount === 0 })] }), _jsx(TableBody, { children: _jsx(Body, { accessCodes: filteredCodes, selectAccessCode: selectAccessCode }) })] }));
+    return (_jsxs("div", { className: classNames('seam-access-code-table', className), children: [_jsx(ContentHeader, { onBack: onBack }), _jsxs(TableHeader, { children: [_jsxs(TableTitle, { children: [t.accessCodes, " ", _jsxs(Caption, { children: ["(", filteredAccessCodes.length, ")"] })] }), _jsx(SearchTextField, { value: searchInputValue, onChange: setSearchInputValue, disabled: (accessCodes?.length ?? 0) === 0 })] }), _jsx(TableBody, { children: _jsx(Body, { accessCodes: filteredAccessCodes, onAccessCodeClick: handleAccessCodeClick }) })] }));
 }
 function Body(props) {
-    const { accessCodes, selectAccessCode } = props;
+    const { accessCodes, onAccessCodeClick } = props;
     if (accessCodes.length === 0) {
         return _jsx(EmptyPlaceholder, { children: t.noAccessCodesMessage });
     }
     return (_jsx(_Fragment, { children: accessCodes.map((accessCode) => (_jsx(AccessCodeRow, { accessCode: accessCode, onClick: () => {
-                selectAccessCode(accessCode);
+                onAccessCodeClick(accessCode.access_code_id);
             } }, accessCode.access_code_id))) }));
 }
 function AccessCodeRow(props) {

package/lib/seam/components/AccessCodeTable/AccessCodeTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessCodeTable.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AccessCodeTable.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx"],"names":[],"mappings":"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"}

package/lib/seam/components/DeviceTable/DeviceTable.d.ts

@@ -1,9 +1,14 @@
 /// <reference types="react" />
+import { type UseDevicesData } from '../../../../lib/seam/devices/use-devices.js';
+type Device = UseDevicesData[number];
 export interface DeviceTableProps {
     deviceIds?: string[];
+    deviceFilter?: (device: Device, searchInputValue: string) => boolean;
+    deviceComparator?: (deviceA: Device, deviceB: Device) => number;
     onDeviceClick?: (deviceId: string) => void;
     preventDefaultOnDeviceClick?: boolean;
     onBack?: () => void;
     className?: string;
 }
-export declare function DeviceTable({ deviceIds, onDeviceClick, preventDefaultOnDeviceClick, onBack, className, }?: DeviceTableProps): JSX.Element | null;
+export declare function DeviceTable({ deviceIds, onDeviceClick, preventDefaultOnDeviceClick, onBack, deviceFilter, deviceComparator, className, }?: DeviceTableProps): JSX.Element;
+export {};

package/lib/seam/components/DeviceTable/DeviceTable.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { compareByCreatedAtDesc } from '../../../../lib/dates.js';
 import { DeviceDetails } from '../../../../lib/seam/components/DeviceDetails/DeviceDetails.js';
 import { DeviceHealthBar, } from '../../../../lib/seam/components/DeviceTable/DeviceHealthBar.js';
 import { DeviceRow } from '../../../../lib/seam/components/DeviceTable/DeviceRow.js';
@@ -12,12 +13,21 @@ import { TableHeader } from '../../../../lib/ui/Table/TableHeader.js';
 import { TableTitle } from '../../../../lib/ui/Table/TableTitle.js';
 import { SearchTextField } from '../../../../lib/ui/TextField/SearchTextField.js';
 import { Caption } from '../../../../lib/ui/typography/Caption.js';
-export function DeviceTable({ deviceIds, onDeviceClick = () => { }, preventDefaultOnDeviceClick = false, onBack, className, } = {}) {
+const defaultDeviceFilter = (device, searchInputValue) => {
+    const value = searchInputValue.trim();
+    if (value === '')
+        return true;
+    return new RegExp(value, 'i').test(device.properties.name ?? '');
+};
+export function DeviceTable({ deviceIds, onDeviceClick = () => { }, preventDefaultOnDeviceClick = false, onBack, deviceFilter = defaultDeviceFilter, deviceComparator = compareByCreatedAtDesc, className, } = {}) {
     const { devices, isLoading, isError, error } = useDevices({
         device_ids: deviceIds,
     });
     const [selectedDeviceId, setSelectedDeviceId] = useState(null);
-    const [searchTerm, setSearchTerm] = useState('');
+    const [searchInputValue, setSearchInputValue] = useState('');
+    const filteredDevices = useMemo(() => devices
+        ?.filter((device) => deviceFilter(device, searchInputValue))
+        ?.sort(deviceComparator) ?? [], [devices, searchInputValue, deviceFilter, deviceComparator]);
     const handleDeviceClick = useCallback((deviceId) => {
         onDeviceClick(deviceId);
         if (preventDefaultOnDeviceClick)
@@ -35,17 +45,7 @@ export function DeviceTable({ deviceIds, onDeviceClick = () => { }, preventDefau
     if (isError) {
         return _jsx("p", { className: className, children: error?.message });
     }
-    if (devices == null) {
-        return null;
-    }
-    const deviceCount = devices.length;
-    const filteredDevices = devices.filter((device) => {
-        if (searchTerm === '') {
-            return true;
-        }
-        return new RegExp(searchTerm, 'i').test(device.properties.name);
-    });
-    return (_jsxs("div", { className: classNames('seam-device-table', className), children: [_jsx(ContentHeader, { onBack: onBack }), _jsxs(TableHeader, { children: [_jsxs(TableTitle, { children: [t.devices, " ", _jsxs(Caption, { children: ["(", deviceCount, ")"] })] }), _jsx(SearchTextField, { value: searchTerm, onChange: setSearchTerm, disabled: deviceCount === 0 })] }), _jsx(TableBody, { children: _jsx(Body, { devices: filteredDevices, onDeviceClick: handleDeviceClick }) })] }));
+    return (_jsxs("div", { className: classNames('seam-device-table', className), children: [_jsx(ContentHeader, { onBack: onBack }), _jsxs(TableHeader, { children: [_jsxs(TableTitle, { children: [t.devices, " ", _jsxs(Caption, { children: ["(", filteredDevices.length, ")"] })] }), _jsx(SearchTextField, { value: searchInputValue, onChange: setSearchInputValue, disabled: (devices?.length ?? 0) === 0 })] }), _jsx(TableBody, { children: _jsx(Body, { devices: filteredDevices, onDeviceClick: handleDeviceClick }) })] }));
 }
 function Body(props) {
     const { devices, onDeviceClick } = props;

package/lib/seam/components/DeviceTable/DeviceTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceTable.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/DeviceTable/DeviceTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DeviceTable.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/DeviceTable/DeviceTable.tsx"],"names":[],"mappings":"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"}

package/lib/seam/devices/use-devices.js

@@ -1,5 +1,4 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { compareByCreatedAtDesc } from '../../../lib/dates.js';
 import { useSeamClient } from '../../../lib/seam/use-seam-client.js';
 export function useDevices(params) {
     const { client } = useSeamClient();
@@ -10,8 +9,7 @@ export function useDevices(params) {
         queryFn: async () => {
             if (client == null)
                 return [];
-            const devices = await client?.devices.list(params);
-            return devices.sort(compareByCreatedAtDesc);
+            return await client?.devices.list(params);
         },
         onSuccess: (devices) => {
             // Prime cache for each device.

package/lib/seam/devices/use-devices.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-devices.js","sourceRoot":"","sources":["../../../src/lib/seam/devices/use-devices.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAShE,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAM3D,MAAM,UAAU,UAAU,CACxB,MAAyB;IAEzB,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IAEpC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAChC;QACE,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC;QACrC,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,EAAE,CAAA;YAC7B,MAAM,OAAO,GAAG,MAAM,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YAClD,OAAO,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAA;QAC7C,CAAC;QACD,SAAS,EAAE,CAAC,OAAO,EAAE,EAAE;YACrB,+BAA+B;YAC/B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;gBAC5B,WAAW,CAAC,YAAY,CACtB,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,CAAC,EACnD,MAAM,CACP,CAAA;aACF;QACH,CAAC;KACF,CACF,CAAA;IAED,OAAO,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAA;AACnC,CAAC"}
+{"version":3,"file":"use-devices.js","sourceRoot":"","sources":["../../../src/lib/seam/devices/use-devices.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAShE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAM3D,MAAM,UAAU,UAAU,CACxB,MAAyB;IAEzB,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IAEpC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAChC;QACE,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC;QACrC,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,EAAE,CAAA;YAC7B,OAAO,MAAM,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAC3C,CAAC;QACD,SAAS,EAAE,CAAC,OAAO,EAAE,EAAE;YACrB,+BAA+B;YAC/B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;gBAC5B,WAAW,CAAC,YAAY,CACtB,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,CAAC,EACnD,MAAM,CACP,CAAA;aACF;QACH,CAAC;KACF,CACF,CAAA;IAED,OAAO,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAA;AACnC,CAAC"}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const seamapiReactVersion = "1.14.0";
+declare const seamapiReactVersion = "1.16.0";
 export default seamapiReactVersion;

package/lib/version.js

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.14.0';
+const seamapiReactVersion = '1.16.0';
 export default seamapiReactVersion;
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",

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

@@ -6,7 +6,6 @@ import type {
   SeamError,
 } from 'seamapi'
 
-import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
 
@@ -28,8 +27,7 @@ export function useAccessCodes(
     queryKey: ['access_codes', 'list', normalizedParams],
     queryFn: async () => {
       if (client == null) return []
-      const accessCodes = await client?.accessCodes.list(normalizedParams)
-      return accessCodes.sort(compareByCreatedAtDesc)
+      return await client?.accessCodes.list(normalizedParams)
     },
   })
 

package/src/lib/seam/components/AccessCodeTable/AccessCodeTable.element.ts

@@ -6,6 +6,10 @@ export const name = 'seam-access-code-table'
 
 export const props: ElementProps<AccessCodeTableProps> = {
   deviceId: 'string',
+  accessCodeFilter: 'function',
+  accessCodeComparator: 'function',
+  onAccessCodeClick: 'function',
+  preventDefaultOnAccessCodeClick: 'boolean',
   onBack: 'function',
   className: 'string',
 }

package/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
-import { useState } from 'react'
-import type { AccessCode } from 'seamapi'
+import { useCallback, useMemo, useState } from 'react'
 
+import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
 import { CopyIcon } from 'lib/icons/Copy.js'
 import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
@@ -27,65 +27,101 @@ import { Title } from 'lib/ui/typography/Title.js'
 
 export interface AccessCodeTableProps {
   deviceId: string
+  accessCodeFilter?: (
+    accessCode: AccessCode,
+    searchInputValue: string
+  ) => boolean
+  accessCodeComparator?: (
+    accessCodeA: AccessCode,
+    accessCodeB: AccessCode
+  ) => number
+  onAccessCodeClick?: (accessCodeId: string) => void
+  preventDefaultOnAccessCodeClick?: boolean
   onBack?: () => void
   className?: string
 }
 
+type AccessCode = UseAccessCodesData[number]
+
+const defaultAccessCodeFilter = (
+  accessCode: AccessCode,
+  searchInputValue: string
+) => {
+  const value = searchInputValue.trim()
+  if (value === '') return true
+  return new RegExp(value, 'i').test(accessCode.name ?? '')
+}
+
 export function AccessCodeTable({
   deviceId,
+  onAccessCodeClick = () => {},
+  preventDefaultOnAccessCodeClick = false,
   onBack,
+  accessCodeFilter = defaultAccessCodeFilter,
+  accessCodeComparator = compareByCreatedAtDesc,
   className,
-}: AccessCodeTableProps): JSX.Element | null {
+}: AccessCodeTableProps): JSX.Element {
   const { accessCodes } = useAccessCodes({
     device_id: deviceId,
   })
 
-  const [selectedAccessCode, selectAccessCode] = useState<AccessCode | null>(
-    null
+  const [selectedAccessCodeId, setSelectedAccessCodeId] = useState<
+    string | null
+  >(null)
+
+  const [searchInputValue, setSearchInputValue] = useState('')
+
+  const filteredAccessCodes = useMemo(
+    () =>
+      accessCodes
+        ?.filter((accessCode) => accessCodeFilter(accessCode, searchInputValue))
+        ?.sort(accessCodeComparator) ?? [],
+    [accessCodes, searchInputValue, accessCodeFilter, accessCodeComparator]
+  )
+
+  const handleAccessCodeClick = useCallback(
+    (accessCodeId: string): void => {
+      onAccessCodeClick(accessCodeId)
+      if (preventDefaultOnAccessCodeClick) return
+      setSelectedAccessCodeId(accessCodeId)
+    },
+    [
+      onAccessCodeClick,
+      preventDefaultOnAccessCodeClick,
+      setSelectedAccessCodeId,
+    ]
   )
-  const [searchTerm, setSearchTerm] = useState('')
 
-  if (selectedAccessCode != null) {
+  if (selectedAccessCodeId != null) {
     return (
       <AccessCodeDetails
         className={className}
-        accessCodeId={selectedAccessCode.access_code_id}
+        accessCodeId={selectedAccessCodeId}
         onBack={() => {
-          selectAccessCode(null)
+          setSelectedAccessCodeId(null)
         }}
       />
     )
   }
 
-  if (accessCodes == null) {
-    return null
-  }
-
-  const filteredCodes = accessCodes.filter((accessCode) => {
-    if (searchTerm === '') {
-      return true
-    }
-
-    return new RegExp(searchTerm, 'i').test(accessCode.name ?? '')
-  })
-
-  const accessCodeCount = accessCodes.length
-
   return (
     <div className={classNames('seam-access-code-table', className)}>
       <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
-          {t.accessCodes} <Caption>({accessCodeCount})</Caption>
+          {t.accessCodes} <Caption>({filteredAccessCodes.length})</Caption>
         </TableTitle>
         <SearchTextField
-          value={searchTerm}
-          onChange={setSearchTerm}
-          disabled={accessCodeCount === 0}
+          value={searchInputValue}
+          onChange={setSearchInputValue}
+          disabled={(accessCodes?.length ?? 0) === 0}
         />
       </TableHeader>
       <TableBody>
-        <Body accessCodes={filteredCodes} selectAccessCode={selectAccessCode} />
+        <Body
+          accessCodes={filteredAccessCodes}
+          onAccessCodeClick={handleAccessCodeClick}
+        />
       </TableBody>
     </div>
   )
@@ -93,9 +129,9 @@ export function AccessCodeTable({
 
 function Body(props: {
   accessCodes: Array<UseAccessCodesData[number]>
-  selectAccessCode: (accessCode: AccessCode) => void
+  onAccessCodeClick: (accessCodeId: string) => void
 }): JSX.Element {
-  const { accessCodes, selectAccessCode } = props
+  const { accessCodes, onAccessCodeClick } = props
 
   if (accessCodes.length === 0) {
     return <EmptyPlaceholder>{t.noAccessCodesMessage}</EmptyPlaceholder>
@@ -108,7 +144,7 @@ function Body(props: {
           key={accessCode.access_code_id}
           accessCode={accessCode}
           onClick={() => {
-            selectAccessCode(accessCode)
+            onAccessCodeClick(accessCode.access_code_id)
           }}
         />
       ))}

package/src/lib/seam/components/DeviceTable/DeviceTable.element.ts

@@ -6,6 +6,8 @@ export const name = 'seam-device-table'
 
 export const props: ElementProps<DeviceTableProps> = {
   deviceIds: 'json',
+  deviceFilter: 'function',
+  deviceComparator: 'function',
   onDeviceClick: 'function',
   preventDefaultOnDeviceClick: 'boolean',
   onBack: 'function',

package/src/lib/seam/components/DeviceTable/DeviceTable.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
+import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { DeviceDetails } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import {
   type DeviceFilter,
@@ -19,28 +20,47 @@ import { TableTitle } from 'lib/ui/Table/TableTitle.js'
 import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
 import { Caption } from 'lib/ui/typography/Caption.js'
 
+type Device = UseDevicesData[number]
+
 export interface DeviceTableProps {
   deviceIds?: string[]
+  deviceFilter?: (device: Device, searchInputValue: string) => boolean
+  deviceComparator?: (deviceA: Device, deviceB: Device) => number
   onDeviceClick?: (deviceId: string) => void
   preventDefaultOnDeviceClick?: boolean
   onBack?: () => void
   className?: string
 }
 
+const defaultDeviceFilter = (device: Device, searchInputValue: string) => {
+  const value = searchInputValue.trim()
+  if (value === '') return true
+  return new RegExp(value, 'i').test(device.properties.name ?? '')
+}
+
 export function DeviceTable({
   deviceIds,
   onDeviceClick = () => {},
   preventDefaultOnDeviceClick = false,
   onBack,
+  deviceFilter = defaultDeviceFilter,
+  deviceComparator = compareByCreatedAtDesc,
   className,
-}: DeviceTableProps = {}): JSX.Element | null {
+}: DeviceTableProps = {}): JSX.Element {
   const { devices, isLoading, isError, error } = useDevices({
     device_ids: deviceIds,
   })
 
   const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null)
-
-  const [searchTerm, setSearchTerm] = useState('')
+  const [searchInputValue, setSearchInputValue] = useState('')
+
+  const filteredDevices = useMemo(
+    () =>
+      devices
+        ?.filter((device) => deviceFilter(device, searchInputValue))
+        ?.sort(deviceComparator) ?? [],
+    [devices, searchInputValue, deviceFilter, deviceComparator]
+  )
 
   const handleDeviceClick = useCallback(
     (deviceId: string): void => {
@@ -71,31 +91,17 @@ export function DeviceTable({
     return <p className={className}>{error?.message}</p>
   }
 
-  if (devices == null) {
-    return null
-  }
-
-  const deviceCount = devices.length
-
-  const filteredDevices = devices.filter((device) => {
-    if (searchTerm === '') {
-      return true
-    }
-
-    return new RegExp(searchTerm, 'i').test(device.properties.name)
-  })
-
   return (
     <div className={classNames('seam-device-table', className)}>
       <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
-          {t.devices} <Caption>({deviceCount})</Caption>
+          {t.devices} <Caption>({filteredDevices.length})</Caption>
         </TableTitle>
         <SearchTextField
-          value={searchTerm}
-          onChange={setSearchTerm}
-          disabled={deviceCount === 0}
+          value={searchInputValue}
+          onChange={setSearchInputValue}
+          disabled={(devices?.length ?? 0) === 0}
         />
       </TableHeader>
       <TableBody>

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

@@ -7,7 +7,6 @@ import type {
   SeamError,
 } from 'seamapi'
 
-import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
 
@@ -26,8 +25,7 @@ export function useDevices(
       queryKey: ['devices', 'list', params],
       queryFn: async () => {
         if (client == null) return []
-        const devices = await client?.devices.list(params)
-        return devices.sort(compareByCreatedAtDesc)
+        return await client?.devices.list(params)
       },
       onSuccess: (devices) => {
         // Prime cache for each device.

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.14.0'
+const seamapiReactVersion = '1.16.0'
 
 export default seamapiReactVersion