@seamapi/react 1.65.0 → 2.0.1

package/lib/seam/components/SupportedDeviceTable/use-filtered-manufacturers.js

@@ -0,0 +1,37 @@
+import { useManufacturers } from '../../../../lib/seam/components/SupportedDeviceTable/use-manufacturers.js';
+export const useFilteredManufacturers = (params) => {
+    return useManufacturers({
+        liqe_query: createLiqeQuery(params),
+    });
+};
+export const createLiqeQuery = ({ manufacturers, excludedManufacturers, }) => {
+    if ((manufacturers?.some(isInvalidInput) ?? false) ||
+        excludedManufacturers.some(isInvalidInput)) {
+        return undefined;
+    }
+    const excludedManufacturersClause = `NOT (${excludedManufacturers
+        .map(manufacturerToMatcher)
+        .join(' OR ')})`;
+    if (manufacturers == null) {
+        if (excludedManufacturers.length === 0)
+            return undefined;
+        return excludedManufacturersClause;
+    }
+    if (manufacturers.length === 0) {
+        return 'manufacturer_id:none';
+    }
+    const includedManufacturersClause = `(${manufacturers
+        .map(manufacturerToMatcher)
+        .join(' OR ')})`;
+    if (excludedManufacturers.length === 0)
+        return includedManufacturersClause;
+    return `${includedManufacturersClause} AND ${excludedManufacturersClause}`;
+};
+const manufacturerToMatcher = (value) => {
+    const [manufacturer, uuid] = value.split('=');
+    if (uuid != null)
+        return `manufacturer_id:"${uuid}"`;
+    return `display_name:"${manufacturer}"`;
+};
+const isInvalidInput = (value) => value.includes('"');
+//# sourceMappingURL=use-filtered-manufacturers.js.map

package/lib/seam/components/SupportedDeviceTable/use-filtered-manufacturers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-filtered-manufacturers.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/use-filtered-manufacturers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+DAA+D,CAAA;AAMhG,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,MAAc,EACuB,EAAE;IACvC,OAAO,gBAAgB,CAAC;QACtB,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC;KACpC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,aAAa,EACb,qBAAqB,GACd,EAAsB,EAAE;IAC/B,IACE,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,KAAK,CAAC;QAC9C,qBAAqB,CAAC,IAAI,CAAC,cAAc,CAAC,EAC1C;QACA,OAAO,SAAS,CAAA;KACjB;IAED,MAAM,2BAA2B,GAAG,QAAQ,qBAAqB;SAC9D,GAAG,CAAC,qBAAqB,CAAC;SAC1B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAA;IAElB,IAAI,aAAa,IAAI,IAAI,EAAE;QACzB,IAAI,qBAAqB,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,SAAS,CAAA;QACxD,OAAO,2BAA2B,CAAA;KACnC;IAED,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;QAC9B,OAAO,sBAAsB,CAAA;KAC9B;IAED,MAAM,2BAA2B,GAAG,IAAI,aAAa;SAClD,GAAG,CAAC,qBAAqB,CAAC;SAC1B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAA;IAElB,IAAI,qBAAqB,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,2BAA2B,CAAA;IAE1E,OAAO,GAAG,2BAA2B,QAAQ,2BAA2B,EAAE,CAAA;AAC5E,CAAC,CAAA;AAED,MAAM,qBAAqB,GAAG,CAAC,KAAa,EAAU,EAAE;IACtD,MAAM,CAAC,YAAY,EAAE,IAAI,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAC7C,IAAI,IAAI,IAAI,IAAI;QAAE,OAAO,oBAAoB,IAAI,GAAG,CAAA;IACpD,OAAO,iBAAiB,YAAY,GAAG,CAAA;AACzC,CAAC,CAAA;AAED,MAAM,cAAc,GAAG,CAAC,KAAa,EAAW,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA"}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const seamapiReactVersion = "1.65.0";
+declare const seamapiReactVersion = "2.0.1";
 export default seamapiReactVersion;

package/lib/version.js

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

package/lib/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,MAAM,mBAAmB,GAAG,QAAQ,CAAA;AAEpC,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,MAAM,mBAAmB,GAAG,OAAO,CAAA;AAEnC,eAAe,mBAAmB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "1.65.0",
+  "version": "2.0.1",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",
@@ -132,7 +132,7 @@
     "luxon": "^3.3.0",
     "queue": "^7.0.0",
     "react-hook-form": "^7.46.1",
-    "seamapi": "^8.13.1",
+    "seamapi": "^8.13.3",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -141,7 +141,7 @@
     "@mui/material": "^5.12.2",
     "@rxfork/r2wc-react-to-web-component": "^2.4.0",
     "@seamapi/fake-devicedb": "^1.1.0",
-    "@seamapi/fake-seam-connect": "^1.32.0",
+    "@seamapi/fake-seam-connect": "^1.37.1",
     "@seamapi/http": "^0.2.1",
     "@seamapi/types": "^1.28.0",
     "@storybook/addon-designs": "^7.0.1",

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

@@ -49,10 +49,6 @@ export interface AccessCodeTableProps extends CommonProps {
   onAccessCodeClick?: (accessCodeId: string) => void
   preventDefaultOnAccessCodeClick?: boolean
   heading?: string | null
-  /**
-   * @deprecated Use heading.
-   */
-  title?: string | null
 }
 
 type AccessCode = UseAccessCodesData[number]
@@ -82,7 +78,6 @@ export function AccessCodeTable({
   errorFilter = () => true,
   warningFilter = () => true,
   heading = t.accessCodes,
-  title = t.accessCodes,
   className,
   disableCreateAccessCode = false,
   disableEditAccessCode = false,
@@ -231,10 +226,9 @@ export function AccessCodeTable({
         <ContentHeader onBack={onBack} />
         <TableHeader>
           <div className='seam-left'>
-            {title != null ? (
+            {heading != null ? (
               <TableTitle>
-                {heading ?? title ?? t.accessCodes}{' '}
-                <Caption>({filteredAccessCodes.length})</Caption>
+                {heading} <Caption>({filteredAccessCodes.length})</Caption>
               </TableTitle>
             ) : (
               <div className='seam-fragment' />

package/src/lib/seam/components/DeviceDetails/ThermostatDeviceDetails.tsx

@@ -133,7 +133,7 @@ export function ThermostatDeviceDetails({
             </DetailSection>
 
             <DetailSection label={t.deviceDetails}>
-              <DetailRow label={t.brand}>
+              <DetailRow label={t.manufacturer}>
                 <div className='seam-detail-row-hstack'>
                   {device.properties.model.manufacturer_display_name}
                   {device.properties.manufacturer === 'ecobee' && <BeeIcon />}
@@ -175,7 +175,7 @@ const t = {
   defaultClimate: 'Default climate',
   allowManualOverride: 'Allow manual override',
   deviceDetails: 'Device details',
-  brand: 'Brand',
+  manufacturer: 'Manufacturer',
   linkedAccount: 'Linked account',
   deviceId: 'Device ID',
   none: 'None',

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

@@ -41,10 +41,6 @@ export interface DeviceTableProps extends CommonProps {
   onDeviceClick?: (deviceId: string) => void
   preventDefaultOnDeviceClick?: boolean
   heading?: string | null
-  /**
-   * @deprecated Use heading.
-   */
-  title?: string | null
 }
 
 export const defaultDeviceFilter = (
@@ -67,7 +63,6 @@ export function DeviceTable({
   deviceFilter = defaultDeviceFilter,
   deviceComparator = compareByCreatedAtDesc,
   heading = t.devices,
-  title = t.devices,
   errorFilter = () => true,
   warningFilter = () => true,
   disableLockUnlock = false,
@@ -129,10 +124,9 @@ export function DeviceTable({
     <div className={classNames('seam-device-table', className)}>
       <ContentHeader onBack={onBack} />
       <TableHeader>
-        {title != null ? (
+        {heading != null ? (
           <TableTitle>
-            {heading ?? title ?? t.devices}{' '}
-            <Caption>({filteredDevices.length})</Caption>
+            {heading} <Caption>({filteredDevices.length})</Caption>
           </TableTitle>
         ) : (
           <div className='seam-fragment' />

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.tsx

@@ -1,35 +1,35 @@
-import type { DeviceModel } from 'seamapi'
+import type { DeviceModelV1 } from '@seamapi/types/devicedb'
 
-import { SupportedDeviceBrandSection } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceBrandSection.js'
 import { SupportedDeviceFilterResultRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRow.js'
+import { SupportedDeviceManufacturerSection } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceManufacturerSection.js'
+import type { UseDeviceModelsData } from 'lib/seam/components/SupportedDeviceTable/use-device-models.js'
 import {
   type DeviceModelFilters,
   useFilteredDeviceModels,
 } from 'lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js'
-import type { UseDeviceModelsData } from 'lib/seam/device-models/use-device-models.js'
 import { Button } from 'lib/ui/Button.js'
 
 interface SupportedDeviceContentProps {
   filterValue: string
   resetFilterValue: () => void
   filters: DeviceModelFilters
-  brands: string[] | null
-  excludedBrands: string[]
+  manufacturers: string[] | null
+  excludedManufacturers: string[]
 }
 
 export function SupportedDeviceContent({
   resetFilterValue,
   filterValue,
   filters,
-  brands,
-  excludedBrands,
+  manufacturers,
+  excludedManufacturers,
 }: SupportedDeviceContentProps): JSX.Element | null {
   const { deviceModels, isLoading, isError, refetch } = useFilteredDeviceModels(
     {
       filterValue,
       filters,
-      brands,
-      excludedBrands,
+      manufacturers,
+      excludedManufacturers,
     }
   )
 
@@ -74,20 +74,14 @@ export function SupportedDeviceContent({
     )
   }
 
-  const hasFilters = filterValue.trim() !== '' || filters.brand !== null
+  const hasFilters = filterValue.trim() !== '' || filters.manufacturer !== null
 
   if (hasFilters) {
     return (
       <div className='seam-supported-device-table-content'>
-        {deviceModels.map((deviceModel, index) => (
+        {deviceModels.map((deviceModel) => (
           <SupportedDeviceFilterResultRow
-            key={[
-              deviceModel.main_category,
-              deviceModel.brand,
-              deviceModel.model_name,
-              deviceModel.manufacturer_model_id,
-              index,
-            ].join(':')}
+            key={deviceModel.device_model_id}
             deviceModel={deviceModel}
           />
         ))}
@@ -97,11 +91,11 @@ export function SupportedDeviceContent({
 
   return (
     <>
-      {Object.entries(groupDeviceModelsByBrand(deviceModels)).map(
-        ([brand, models]) => (
-          <SupportedDeviceBrandSection
-            key={brand}
-            brand={brand}
+      {Object.entries(groupDeviceModelsByManufacturer(deviceModels)).map(
+        ([manufacturerId, models]) => (
+          <SupportedDeviceManufacturerSection
+            key={manufacturerId}
+            manufacturerId={manufacturerId}
             deviceModels={models}
           />
         )
@@ -142,15 +136,15 @@ function EmptyResult({
   )
 }
 
-function groupDeviceModelsByBrand(
+function groupDeviceModelsByManufacturer(
   deviceModels: UseDeviceModelsData
-): Record<string, DeviceModel[]> {
-  const result: Record<string, DeviceModel[]> = {}
+): Record<string, DeviceModelV1[]> {
+  const result: Record<string, DeviceModelV1[]> = {}
 
   for (const model of deviceModels) {
-    const { brand } = model
-    const list = result[brand] ?? []
-    result[brand] = [...list, model]
+    const { manufacturer } = model
+    const list = result[manufacturer.manufacturer_id] ?? []
+    result[manufacturer.manufacturer_id] = [...list, model]
   }
   return result
 }

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContentRows.tsx

@@ -1,5 +1,5 @@
 import { SupportedDeviceRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
-import type { UseDeviceModelsData } from 'lib/seam/device-models/use-device-models.js'
+import type { UseDeviceModelsData } from 'lib/seam/components/SupportedDeviceTable/use-device-models.js'
 
 interface SupportedDeviceContentRowsProps {
   deviceModels: UseDeviceModelsData
@@ -10,15 +10,9 @@ export function SupportedDeviceContentRows({
 }: SupportedDeviceContentRowsProps): JSX.Element | null {
   return (
     <div className='seam-supported-device-table-content'>
-      {deviceModels.map((deviceModel, index) => (
+      {deviceModels.map((deviceModel) => (
         <SupportedDeviceRow
-          key={[
-            deviceModel.main_category,
-            deviceModel.brand,
-            deviceModel.model_name,
-            deviceModel.manufacturer_model_id,
-            index,
-          ].join(':')}
+          key={deviceModel.device_model_id}
           deviceModel={deviceModel}
         />
       ))}

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterArea.tsx

@@ -2,19 +2,19 @@ import type { Dispatch, SetStateAction } from 'react'
 
 import { FilterCategoryMenu } from 'lib/seam/components/SupportedDeviceTable/FilterCategoryMenu.js'
 import type { DeviceModelFilters } from 'lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js'
-import { useDeviceModels } from 'lib/seam/device-models/use-device-models.js'
-import { capitalize } from 'lib/strings.js'
 import { Button } from 'lib/ui/Button.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
 import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
 
+import { useFilteredManufacturers } from './use-filtered-manufacturers.js'
+
 interface SupportedDeviceFilterAreaProps {
   filterValue: string
   setFilterValue: (filter: string) => void
   filters: DeviceModelFilters
   setFilters: Dispatch<SetStateAction<DeviceModelFilters>>
-  brands: string[] | null
-  excludedBrands: string[]
+  manufacturers: string[] | null
+  excludedManufacturers: string[]
 }
 
 export function SupportedDeviceFilterArea({
@@ -22,12 +22,15 @@ export function SupportedDeviceFilterArea({
   setFilterValue,
   filters,
   setFilters,
-  brands,
-  excludedBrands,
+  manufacturers,
+  excludedManufacturers,
 }: SupportedDeviceFilterAreaProps): JSX.Element {
   const appliedFiltersCount = getAppliedFilterCount(filters)
 
-  const availableBrands = useAvailableBrands(brands, excludedBrands)
+  const { manufacturers: availableManufacturers } = useFilteredManufacturers({
+    manufacturers,
+    excludedManufacturers,
+  })
 
   const resetFilter = (filterType: keyof DeviceModelFilters): void => {
     setFilters((filters) => ({
@@ -64,18 +67,22 @@ export function SupportedDeviceFilterArea({
           >
             <div className='seam-filter-menu-row'>
               <FilterCategoryMenu
-                label={t.brand}
+                label={t.manufacturer}
                 allLabel={allLabel}
-                options={availableBrands}
-                onSelect={(brand: string) => {
+                options={
+                  availableManufacturers?.map(
+                    (manufacturer) => manufacturer.display_name
+                  ) ?? []
+                }
+                onSelect={(manufacturer: string) => {
                   setFilters((filters) => ({
                     ...filters,
-                    brand,
+                    manufacturer,
                   }))
                 }}
-                buttonLabel={filters.brand ?? allLabel}
+                buttonLabel={filters.manufacturer ?? allLabel}
                 onAllOptionSelect={() => {
-                  resetFilter('brand')
+                  resetFilter('manufacturer')
                 }}
               />
             </div>
@@ -118,40 +125,14 @@ export function SupportedDeviceFilterArea({
 
 const getAppliedFilterCount = (filters: DeviceModelFilters): number => {
   let count = 0
-  if (filters.brand !== null) count++
+  if (filters.manufacturer !== null) count++
   if (!filters.supportedOnly) count++
   return count
 }
 
-const useAvailableBrands = (
-  brands: string[] | null,
-  excludedBrands: string[]
-): string[] => {
-  const { deviceModels } = useDeviceModels()
-
-  if (deviceModels == null) return []
-
-  const availableBrands = deviceModels
-    .map(({ brand }) => brand.trim())
-    .filter((brand) => {
-      // UPSTREAM: API can return an empty value for brand.
-      return brand !== ''
-    })
-    .filter((brand) => {
-      if (brands === null) return true
-      return brands.includes(brand)
-    })
-    .filter((brand) => {
-      return !excludedBrands.includes(brand)
-    })
-    .map((brand) => capitalize(brand))
-
-  return Array.from(new Set(availableBrands))
-}
-
 const t = {
   all: 'All',
-  brand: 'Brand',
+  manufacturer: 'Manufacturer',
   supported: 'Supported',
   filter: 'Filter',
   filters: 'Filters',

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRow.tsx

@@ -1,15 +1,13 @@
-import type { DeviceModel } from 'seamapi'
+import type { DeviceModelV1 } from '@seamapi/types/devicedb'
 
 import {
-  connectionTypeNames,
   ImageColumn,
   StatusColumn,
 } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
-import { useDeviceProvider } from 'lib/seam/components/SupportedDeviceTable/use-device-provider.js'
 import { DotDivider } from 'lib/ui/layout/DotDivider.js'
 
 interface SupportedDeviceFilterResultRowProps {
-  deviceModel: DeviceModel
+  deviceModel: DeviceModelV1
 }
 
 export function SupportedDeviceFilterResultRow({
@@ -27,23 +25,21 @@ export function SupportedDeviceFilterResultRow({
 export function ModelColumn({
   deviceModel,
 }: SupportedDeviceFilterResultRowProps): JSX.Element {
-  const deviceProvider = useDeviceProvider(deviceModel.brand)
-
   return (
     <div className='seam-col seam-model-col'>
       <div className='seam-model-name'>
         <img
-          src={deviceProvider.image_url}
-          alt={deviceModel.brand}
-          className='seam-brand-image'
+          src={deviceModel.manufacturer.logo?.url}
+          alt={deviceModel.manufacturer.display_name}
+          className='seam-manufacturer-image'
         />{' '}
-        <div className='seam-truncated-text'>{deviceModel.model_name}</div>
+        <div className='seam-truncated-text'>{deviceModel.display_name}</div>
       </div>
       <div className='seam-model-id'>
         <div className='seam-truncated-text'>
-          {deviceModel.manufacturer_model_id}
+          {deviceModel.device_model_id}
           <DotDivider />
-          {connectionTypeNames[deviceModel.connection_type]}
+          {deviceModel.main_connection_type}
         </div>
       </div>
     </div>

package/src/lib/seam/components/SupportedDeviceTable/{SupportedDeviceBrandSection.tsx → SupportedDeviceManufacturerSection.tsx}

@@ -1,30 +1,29 @@
+import type { DeviceModelV1 } from '@seamapi/types/devicedb'
 import classNames from 'classnames'
-import type { DeviceModel } from 'seamapi'
 
 import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
 import { HiddenDevicesOverlay } from 'lib/seam/components/SupportedDeviceTable/HiddenDevicesOverlay.js'
 import { ShowAllDevicesButton } from 'lib/seam/components/SupportedDeviceTable/ShowAllDevicesButton.js'
 import { SupportedDeviceRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
-import { useDeviceProvider } from 'lib/seam/components/SupportedDeviceTable/use-device-provider.js'
+import { useManufacturer } from 'lib/seam/components/SupportedDeviceTable/use-manufacturer.js'
 import { useToggle } from 'lib/ui/use-toggle.js'
 
 /**
- * How many device models required before we collapse
- * the list, and require the user to click to
- * view all.
+ * How many device models required before collapsing the list,
+ * and requiring the user to click to view all.
  */
 const maxDevicesBeforeCollapsing = 3
 
-interface SupportedDeviceBrandSectionProps {
-  brand: string
-  deviceModels: DeviceModel[]
+interface SupportedDeviceManufacturerSectionProps {
+  manufacturerId: string
+  deviceModels: DeviceModelV1[]
 }
 
-export function SupportedDeviceBrandSection({
-  brand,
+export function SupportedDeviceManufacturerSection({
+  manufacturerId,
   deviceModels,
-}: SupportedDeviceBrandSectionProps): JSX.Element | null {
-  const deviceProvider = useDeviceProvider(brand)
+}: SupportedDeviceManufacturerSectionProps): JSX.Element | null {
+  const { manufacturer } = useManufacturer({ manufacturer_id: manufacturerId })
 
   const [expanded, toggleExpand] = useToggle()
 
@@ -47,32 +46,26 @@ export function SupportedDeviceBrandSection({
 
   return (
     <div
-      className={classNames('seam-brand-section', {
+      className={classNames('seam-manufacturer-section', {
         'can-expand': canExpand,
         expanded,
       })}
     >
       <div className='seam-header' onClick={handleHeaderClick}>
         <img
-          src={deviceProvider.image_url}
-          alt={brand}
-          className='seam-brand-image'
+          src={manufacturer?.logo?.url}
+          alt={manufacturer?.display_name}
+          className='seam-manufacturer-image'
         />
-        <h5 className='seam-brand-name'>
-          {deviceProvider.display_name} {t.devices}
+        <h5 className='seam-manufacturer-name'>
+          {manufacturer?.display_name} {t.devices}
         </h5>
         {canExpand && <ChevronRightIcon className='chevron' />}
       </div>
       <div className='seam-supported-device-table-content'>
-        {visibleDevices.map((deviceModel, index) => (
+        {visibleDevices.map((deviceModel) => (
           <SupportedDeviceRow
-            key={[
-              deviceModel.main_category,
-              deviceModel.brand,
-              deviceModel.model_name,
-              deviceModel.manufacturer_model_id,
-              index,
-            ].join(':')}
+            key={deviceModel.device_model_id}
             deviceModel={deviceModel}
           />
         ))}

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.tsx

@@ -1,10 +1,11 @@
+import type { DeviceModelV1 } from '@seamapi/types/devicedb'
 import classNames from 'classnames'
 import type { DeviceModel } from 'seamapi'
 
 import { DotDivider } from 'lib/ui/layout/DotDivider.js'
 
 interface SupportedDeviceRowProps {
-  deviceModel: DeviceModel
+  deviceModel: DeviceModelV1
 }
 
 export function SupportedDeviceRow({
@@ -25,7 +26,10 @@ export function ImageColumn({
   return (
     <div className='seam-col seam-device-image-col'>
       <div className='seam-image-box'>
-        <img width={40} src={deviceModel.icon_url} />
+        <img
+          width={40}
+          src={deviceModel.aesthetic_variants[0]?.images[0]?.url}
+        />
       </div>
     </div>
   )
@@ -37,13 +41,13 @@ export function ModelColumn({
   return (
     <div className='seam-col seam-model-col'>
       <div className='seam-model-name'>
-        <div className='seam-truncated-text'>{deviceModel.model_name}</div>
+        <div className='seam-truncated-text'>{deviceModel.display_name}</div>
       </div>
       <div className='seam-model-id'>
         <div className='seam-truncated-text'>
-          {deviceModel.manufacturer_model_id}
+          {deviceModel.aesthetic_variants[0]?.manufacturer_sku}
           <DotDivider />
-          {connectionTypeNames[deviceModel.connection_type]}
+          {deviceModel.main_connection_type}
         </div>
       </div>
     </div>
@@ -53,30 +57,35 @@ export function ModelColumn({
 export function StatusColumn({
   deviceModel,
 }: SupportedDeviceRowProps): JSX.Element {
-  const statusColor = supportLevelColors[deviceModel.support_level] ?? 'unknown'
+  const statusColor =
+    supportLevelColors[deviceModel.manufacturer.integration] ?? 'unknown'
 
   return (
     <div className='seam-col seam-status-col'>
       <div className={classNames('seam-status-pill', `status-${statusColor}`)}>
-        <span>{status[deviceModel.support_level]}</span>
+        <span>{status[deviceModel.manufacturer.integration]}</span>
       </div>
     </div>
   )
 }
 
 const supportLevelColors: Record<
-  DeviceModel['support_level'],
+  DeviceModelV1['manufacturer']['integration'],
   'green' | 'blue' | 'unknown'
 > = {
-  live: 'green',
+  stable: 'green',
   beta: 'blue',
+  planned: 'unknown',
   unsupported: 'unknown',
+  inquire: 'unknown',
 }
 
-const status: Record<DeviceModel['support_level'], string> = {
-  live: 'LIVE',
+const status: Record<DeviceModelV1['manufacturer']['integration'], string> = {
+  stable: 'LIVE',
   beta: 'BETA',
   unsupported: 'Inquire',
+  planned: 'Inquire',
+  inquire: 'Inquire',
 }
 
 export const connectionTypeNames: Record<

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

@@ -5,10 +5,9 @@ import type { SupportedDeviceTableProps } from './SupportedDeviceTable.js'
 export const name = 'seam-supported-device-table'
 
 export const props: ElementProps<SupportedDeviceTableProps> = {
-  cannotFilter: 'boolean',
   disableFilter: 'boolean',
-  brands: 'array',
-  excludedBrands: 'array',
+  manufacturers: 'array',
+  excludedManufacturers: 'array',
 }
 
 export { SupportedDeviceTable as Component } from './SupportedDeviceTable.js'