@seamapi/react 2.5.1 → 2.7.0

package/src/lib/icons/ThermostatHeatLarge.tsx

@@ -16,7 +16,7 @@ export function ThermostatHeatLargeIcon(
     >
       <path
         fill='#FC8E28'
-        d='M4 14c0-1.75.417-3.308 1.25-4.675S7 6.808 8 5.875c1-.933 1.917-1.646 2.75-2.138L12 3v3.3c0 .617.208 1.104.625 1.463.417.358.883.537 1.4.537.283 0 .554-.058.813-.175.258-.117.495-.308.712-.575L16 7c1.2.7 2.167 1.67 2.9 2.912.733 1.242 1.1 2.605 1.1 4.088 0 1.467-.358 2.804-1.075 4.012a8.086 8.086 0 0 1-2.825 2.863c.283-.4.504-.837.662-1.313.159-.475.238-.979.238-1.512a4.8 4.8 0 0 0-.375-1.887 4.957 4.957 0 0 0-1.075-1.588L12 11.1l-3.525 3.475a5.093 5.093 0 0 0-1.1 1.6A4.709 4.709 0 0 0 7 18.05c0 .533.08 1.037.237 1.512.159.476.38.913.663 1.313a8.086 8.086 0 0 1-2.825-2.863C4.358 16.805 4 15.467 4 14Zm8-.1 2.125 2.075c.283.283.5.6.65.95.15.35.225.725.225 1.125 0 .817-.292 1.512-.875 2.087-.583.575-1.292.863-2.125.863s-1.542-.288-2.125-.863A2.823 2.823 0 0 1 9 18.05c0-.383.075-.754.225-1.113.15-.358.367-.679.65-.962L12 13.9Z'
+        d='M4 14c0-1.75.417-3.308 1.25-4.675S7 6.808 8 5.875c1-.933 1.917-1.646 2.75-2.137L12 3v3.3c0 .617.208 1.104.625 1.463.417.358.883.537 1.4.537.283 0 .554-.058.813-.175.258-.117.495-.308.712-.575L16 7c1.2.7 2.167 1.67 2.9 2.912.733 1.242 1.1 2.605 1.1 4.088 0 1.467-.358 2.804-1.075 4.012a8.086 8.086 0 0 1-2.825 2.863c.283-.4.504-.837.662-1.312.159-.476.238-.98.238-1.513a4.8 4.8 0 0 0-.375-1.887 4.957 4.957 0 0 0-1.075-1.588L12 11.1l-3.525 3.475a5.093 5.093 0 0 0-1.1 1.6A4.709 4.709 0 0 0 7 18.05c0 .533.08 1.037.237 1.512.159.476.38.913.663 1.313a8.086 8.086 0 0 1-2.825-2.863C4.358 16.805 4 15.468 4 14m8-.1 2.125 2.075c.283.283.5.6.65.95.15.35.225.725.225 1.125 0 .817-.292 1.512-.875 2.087-.583.575-1.292.863-2.125.863s-1.542-.288-2.125-.863A2.823 2.823 0 0 1 9 18.05c0-.383.075-.754.225-1.113.15-.358.367-.679.65-.962z'
       />
     </svg>
   )

package/src/lib/icons/ThermostatOff.tsx

@@ -14,7 +14,7 @@ export function ThermostatOffIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
     >
       <path
         fill='#9DA1A9'
-        d='M11.78 13.64 10.36 12.22a6.403 6.403 0 0 1-1.633.765 6.127 6.127 0 0 1-1.805.266 6.086 6.086 0 0 1-2.437-.492 6.311 6.311 0 0 1-1.985-1.336 6.312 6.312 0 0 1-1.336-1.985A6.086 6.086 0 0 1 .671 7c0-.625.089-1.227.266-1.805a6.4 6.4 0 0 1 .766-1.633L.28 2.141l.89-.891 11.5 11.5-.89.89ZM6.922 12a4.955 4.955 0 0 0 2.532-.688L2.609 4.47A4.956 4.956 0 0 0 1.92 7c0 1.385.487 2.565 1.461 3.54.974.973 2.154 1.46 3.54 1.46Zm5.219-1.563-.906-.906A4.955 4.955 0 0 0 11.922 7c0-1.385-.488-2.565-1.462-3.54C9.486 2.488 8.307 2 6.921 2a4.955 4.955 0 0 0-2.531.688l-.906-.907a6.401 6.401 0 0 1 1.633-.765A6.127 6.127 0 0 1 6.92.75c.865 0 1.677.164 2.438.492.76.328 1.422.774 1.984 1.336a6.311 6.311 0 0 1 1.336 1.985c.328.76.492 1.572.492 2.437 0 .625-.088 1.227-.265 1.805a6.4 6.4 0 0 1-.766 1.633Z'
+        d='M11.78 13.64 10.36 12.22a6.403 6.403 0 0 1-1.633.765 6.127 6.127 0 0 1-1.805.266 6.086 6.086 0 0 1-2.437-.492 6.311 6.311 0 0 1-1.985-1.336 6.312 6.312 0 0 1-1.336-1.985A6.086 6.086 0 0 1 .671 7c0-.625.089-1.227.266-1.805a6.4 6.4 0 0 1 .766-1.633L.28 2.141l.89-.891 11.5 11.5zM6.922 12a4.955 4.955 0 0 0 2.532-.687L2.609 4.469A4.956 4.956 0 0 0 1.92 7c0 1.385.487 2.565 1.461 3.54.974.973 2.154 1.46 3.54 1.46m5.219-1.562-.906-.907A4.955 4.955 0 0 0 11.922 7c0-1.385-.488-2.565-1.462-3.54C9.486 2.488 8.307 2 6.921 2a4.955 4.955 0 0 0-2.531.688l-.906-.907a6.401 6.401 0 0 1 1.633-.765A6.127 6.127 0 0 1 6.92.75c.865 0 1.677.164 2.438.492.76.328 1.422.774 1.984 1.336a6.311 6.311 0 0 1 1.336 1.985c.328.76.492 1.572.492 2.437 0 .625-.088 1.227-.265 1.805a6.4 6.4 0 0 1-.766 1.633'
       />
     </svg>
   )

package/src/lib/icons/TriangleWarning.tsx

@@ -30,7 +30,7 @@ export function TriangleWarningIcon(
       <g mask='url(#triangle-warning_svg__a)'>
         <path
           fill='#F3980F'
-          d='M1 21 12 2l11 19H1Zm11-3a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 17a.967.967 0 0 0-.287-.712A.968.968 0 0 0 12 16a.965.965 0 0 0-.712.288A.965.965 0 0 0 11 17c0 .283.096.52.288.712A.965.965 0 0 0 12 18Zm-1-3h2v-5h-2v5Z'
+          d='M1 21 12 2l11 19zm11-3a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 17a.967.967 0 0 0-.287-.712A.968.968 0 0 0 12 16a.965.965 0 0 0-.712.288A.965.965 0 0 0 11 17c0 .283.096.52.288.712A.965.965 0 0 0 12 18m-1-3h2v-5h-2z'
         />
       </g>
     </svg>

package/src/lib/icons/TriangleWarningOutline.tsx

@@ -14,11 +14,8 @@ export function TriangleWarningOutlineIcon(
       fill='none'
       {...props}
     >
-      <path
-        fill='#FF9800'
-        d='m12 6.49 7.53 13.01H4.47L12 6.49Zm0-3.99-11 19h22l-11-19Z'
-      />
-      <path fill='#FF9800' d='M13 16.5h-2v2h2v-2ZM13 10.5h-2v5h2v-5Z' />
+      <path fill='#FF9800' d='m12 6.49 7.53 13.01H4.47zm0-3.99-11 19h22z' />
+      <path fill='#FF9800' d='M13 16.5h-2v2h2zM13 10.5h-2v5h2z' />
     </svg>
   )
 }

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

@@ -15,6 +15,8 @@ interface SupportedDeviceContentProps {
   filters: DeviceModelFilters
   manufacturers: string[] | null
   excludedManufacturers: string[]
+  includeIf: string[] | null
+  excludeIf: string[]
 }
 
 export function SupportedDeviceContent({
@@ -23,6 +25,8 @@ export function SupportedDeviceContent({
   filters,
   manufacturers,
   excludedManufacturers,
+  includeIf,
+  excludeIf,
 }: SupportedDeviceContentProps): JSX.Element | null {
   const { deviceModels, isLoading, isError, refetch } = useFilteredDeviceModels(
     {
@@ -30,6 +34,8 @@ export function SupportedDeviceContent({
       filters,
       manufacturers,
       excludedManufacturers,
+      includeIf,
+      excludeIf,
     }
   )
 

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

@@ -1,7 +1,10 @@
 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 {
+  type DeviceModelFilters,
+  supportedIntegrationSupportLevels,
+} from 'lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js'
 import { Button } from 'lib/ui/Button.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
 import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
@@ -28,6 +31,9 @@ export function SupportedDeviceFilterArea({
   const appliedFiltersCount = getAppliedFilterCount(filters)
 
   const { manufacturers: manufacturersData } = useFilteredManufacturers({
+    integrationSupportLevels: filters.supportedOnly
+      ? supportedIntegrationSupportLevels
+      : null,
     manufacturers,
     excludedManufacturers,
   })
@@ -44,16 +50,6 @@ export function SupportedDeviceFilterArea({
 
   const allLabel = t.all
 
-  const options =
-    manufacturersData
-      ?.filter((manufacturer) => {
-        if (filters.supportedOnly) {
-          return ['stable', 'beta'].includes(manufacturer.integration)
-        }
-        return true
-      })
-      ?.map((manufacturer) => manufacturer.display_name) ?? []
-
   return (
     <div className='seam-supported-device-table-filter-area'>
       <div className='seam-deliberate-block' />
@@ -79,7 +75,11 @@ export function SupportedDeviceFilterArea({
               <FilterCategoryMenu
                 label={t.manufacturer}
                 allLabel={allLabel}
-                options={options}
+                options={
+                  manufacturersData?.map(
+                    (manufacturer) => manufacturer.display_name
+                  ) ?? []
+                }
                 onSelect={(manufacturer: string) => {
                   setFilters((filters) => ({
                     ...filters,

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

@@ -8,6 +8,8 @@ export const props: ElementProps<SupportedDeviceTableProps> = {
   disableFilter: 'boolean',
   manufacturers: 'array',
   excludedManufacturers: 'array',
+  includeIf: 'array',
+  excludeIf: 'array',
 }
 
 export { SupportedDeviceTable as Component } from './SupportedDeviceTable.js'

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

@@ -15,6 +15,8 @@ export interface SupportedDeviceTableProps extends CommonProps {
   disableFilter?: boolean
   manufacturers?: string[] | null
   excludedManufacturers?: string[]
+  includeIf?: string[] | null
+  excludeIf?: string[]
 }
 
 export const NestedSupportedDeviceTable =
@@ -24,6 +26,8 @@ export function SupportedDeviceTable({
   disableFilter = false,
   manufacturers = null,
   excludedManufacturers = [],
+  includeIf = null,
+  excludeIf = [],
   className,
 }: SupportedDeviceTableProps = {}): JSX.Element {
   useComponentTelemetry('SupportedDeviceTable')
@@ -59,6 +63,8 @@ export function SupportedDeviceTable({
         filters={filters}
         manufacturers={manufacturers}
         excludedManufacturers={excludedManufacturers}
+        includeIf={includeIf}
+        excludeIf={excludeIf}
       />
     </div>
   )

package/src/lib/seam/components/SupportedDeviceTable/use-device-model.ts

@@ -37,7 +37,11 @@ export function useDeviceModel(
     },
   })
 
-  return { ...rest, deviceModel: data }
+  return {
+    ...rest,
+    // @ts-expect-error: Upstream mismatch between type and route type.
+    deviceModel: data,
+  }
 }
 
 type DeviceModelsGetParams = RouteRequestParams<'/v1/device_models/get'>

package/src/lib/seam/components/SupportedDeviceTable/use-device-models.ts

@@ -49,7 +49,11 @@ export function useDeviceModels(
     },
   })
 
-  return { ...rest, deviceModels: data }
+  return {
+    ...rest,
+    // @ts-expect-error: Upstream mismatch between type and route type.
+    deviceModels: data,
+  }
 }
 
 type DeviceModelsListParams = RouteRequestParams<'/v1/device_models/list'>

package/src/lib/seam/components/SupportedDeviceTable/use-filtered-device-models.ts

@@ -1,3 +1,5 @@
+import type { ManufacturerIntegrationSupportLevel } from '@seamapi/types/devicedb'
+
 import {
   useDeviceModels,
   type UseDeviceModelsParams,
@@ -10,26 +12,47 @@ export interface DeviceModelFilters {
   manufacturer: string | null
 }
 
+export const supportedIntegrationSupportLevels: ManufacturerIntegrationSupportLevel[] =
+  ['stable', 'beta']
+
 export const useFilteredDeviceModels = ({
   filterValue,
   filters,
+  includeIf,
+  excludeIf,
   ...manufacturersParams
 }: {
   filterValue: string
   filters: DeviceModelFilters
   manufacturers: string[] | null
   excludedManufacturers: string[]
+  includeIf: string[] | null
+  excludeIf: string[]
 }): ReturnType<typeof useDeviceModels> => {
-  const { manufacturers } = useFilteredManufacturers(manufacturersParams)
+  const { manufacturers } = useFilteredManufacturers({
+    ...manufacturersParams,
+    integrationSupportLevels: filters.supportedOnly
+      ? supportedIntegrationSupportLevels
+      : null,
+  })
 
   const params: UseDeviceModelsParams = {}
 
+  if (excludeIf.length > 0) {
+    params.exclude_if = excludeIf
+  }
+
+  // UPSTREAM: API does not parse zero-length arrays correctly.
+  if (includeIf != null && includeIf.length > 0) {
+    params.include_if = includeIf
+  }
+
   if (filterValue.trim() !== '') {
     params.text_search = filterValue.trim()
   }
 
   if (filters.supportedOnly) {
-    params.integration_status = 'stable'
+    params.integration_support_levels = supportedIntegrationSupportLevels
   }
 
   if (filters.manufacturer !== null) {
@@ -50,13 +73,17 @@ export const useFilteredDeviceModels = ({
 
   return {
     ...rest,
-    deviceModels: deviceModels?.filter(
-      (deviceModel) =>
-        manufacturers?.some(
-          (manufacturer) =>
-            deviceModel.manufacturer.manufacturer_id ===
-            manufacturer.manufacturer_id
-        )
-    ),
+    deviceModels:
+      // UPSTREAM: API does not parse zero-length arrays correctly.
+      includeIf?.length === 0
+        ? []
+        : deviceModels?.filter(
+            (deviceModel) =>
+              manufacturers?.some(
+                (manufacturer) =>
+                  deviceModel.manufacturer.manufacturer_id ===
+                  manufacturer.manufacturer_id
+              )
+          ),
   }
 }

package/src/lib/seam/components/SupportedDeviceTable/use-filtered-manufacturers.ts

@@ -1,13 +1,19 @@
+import type { ManufacturerIntegrationSupportLevel } from '@seamapi/types/devicedb'
+
 import { useManufacturers } from 'lib/seam/components/SupportedDeviceTable/use-manufacturers.js'
 
 interface Params {
   manufacturers: string[] | null
   excludedManufacturers: string[]
+  integrationSupportLevels: ManufacturerIntegrationSupportLevel[] | null
 }
-export const useFilteredManufacturers = (
-  params: Params
-): ReturnType<typeof useManufacturers> => {
+
+export const useFilteredManufacturers = ({
+  integrationSupportLevels,
+  ...params
+}: Params): ReturnType<typeof useManufacturers> => {
   const { manufacturers, ...rest } = useManufacturers({
+    integration_support_levels: integrationSupportLevels ?? undefined,
     liqe_query: createLiqeQuery(params),
   })
 
@@ -22,7 +28,9 @@ export const useFilteredManufacturers = (
 export const createLiqeQuery = ({
   manufacturers,
   excludedManufacturers,
-}: Params): string | undefined => {
+}: Pick<Params, 'manufacturers' | 'excludedManufacturers'>):
+  | string
+  | undefined => {
   if (
     (manufacturers?.some(isInvalidInput) ?? false) ||
     excludedManufacturers.some(isInvalidInput)

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.5.1'
+const seamapiReactVersion = '2.7.0'
 
 export default seamapiReactVersion