Merge branch 'main' of github.com:seamapi/react into fake-thermostats

Author: Andrewjeska

README.md

@@ -78,7 +78,7 @@ export function App() {
   <seam-device-table publishable-key="your_publishable_key"></seam-device-table>
   <script
     type="module"
-    src="https://react.seam.co/v/1.44.0/dist/elements.js"
+    src="https://react.seam.co/v/1.45.2/dist/elements.js"
   ></script>
 </body>
 ```

package-lock.json

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

package.json

@@ -14,19 +14,22 @@ interface SupportedDeviceContentProps {
   resetFilterValue: () => void
   filters: DeviceModelFilters
   brands: string[] | null
+  excludedBrands: string[]
 }
 
 export function SupportedDeviceContent({
   resetFilterValue,
   filterValue,
   filters,
   brands,
+  excludedBrands,
 }: SupportedDeviceContentProps): JSX.Element | null {
   const { deviceModels, isLoading, isError, refetch } = useFilteredDeviceModels(
     {
       filterValue,
       filters,
       brands,
+      excludedBrands,
     }
   )
 
@@ -129,13 +132,13 @@ function EmptyResult({
   )
 
   return (
-    <tr className='seam-supported-device-table-content-message-row'>
-      <td colSpan={6}>
+    <div className='seam-supported-device-table-content-message-row'>
+      <div>
         <div className='seam-supported-device-table-content-message'>
           {filterValue.length === 0 ? <p>{t.noneFound}</p> : noMatchingRows}
         </div>
-      </td>
-    </tr>
+      </div>
+    </div>
   )
 }
 

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

@@ -14,6 +14,7 @@ interface SupportedDeviceFilterAreaProps {
   filters: DeviceModelFilters
   setFilters: Dispatch<SetStateAction<DeviceModelFilters>>
   brands: string[] | null
+  excludedBrands: string[]
 }
 
 export function SupportedDeviceFilterArea({
@@ -22,10 +23,11 @@ export function SupportedDeviceFilterArea({
   filters,
   setFilters,
   brands,
+  excludedBrands,
 }: SupportedDeviceFilterAreaProps): JSX.Element {
   const appliedFiltersCount = getAppliedFilterCount(filters)
 
-  const availableBrands = useAvailableBrands(brands)
+  const availableBrands = useAvailableBrands(brands, excludedBrands)
 
   const resetFilter = (filterType: keyof DeviceModelFilters): void => {
     setFilters((filters) => ({
@@ -121,27 +123,30 @@ const getAppliedFilterCount = (filters: DeviceModelFilters): number => {
   return count
 }
 
-const useAvailableBrands = (brands: string[] | null): string[] => {
+const useAvailableBrands = (
+  brands: string[] | null,
+  excludedBrands: string[]
+): string[] => {
   const { deviceModels } = useDeviceModels()
 
   if (deviceModels == null) return []
 
-  const uniqueBrands = new Set<string>()
-  for (const deviceModel of deviceModels) {
-    const value = deviceModel.brand
-
-    // UPSTREAM: API can return an empty value for brand.
-    if (value.trim() === '') continue
-
-    uniqueBrands.add(deviceModel.brand)
-  }
-
-  return Array.from(uniqueBrands)
+  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 = {

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

@@ -8,6 +8,7 @@ export const props: ElementProps<SupportedDeviceTableProps> = {
   cannotFilter: 'boolean',
   disableFilter: 'boolean',
   brands: 'array',
+  excludedBrands: 'array',
   className: 'string',
 }
 

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

@@ -12,13 +12,15 @@ export interface SupportedDeviceTableProps {
    */
   cannotFilter?: boolean
   brands?: string[] | null
+  excludedBrands?: string[]
   className?: string
 }
 
 export function SupportedDeviceTable({
   disableFilter = false,
   cannotFilter,
   brands = null,
+  excludedBrands = [],
   className,
 }: SupportedDeviceTableProps = {}): JSX.Element {
   const [filterValue, setFilterValue] = useState('')
@@ -43,6 +45,7 @@ export function SupportedDeviceTable({
           filters={filters}
           setFilters={setFilters}
           brands={brands}
+          excludedBrands={excludedBrands}
         />
       )}
       <SupportedDeviceContent
@@ -52,6 +55,7 @@ export function SupportedDeviceTable({
         filterValue={filterValue}
         filters={filters}
         brands={brands}
+        excludedBrands={excludedBrands}
       />
     </div>
   )

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

@@ -12,10 +12,12 @@ export const useFilteredDeviceModels = ({
   filterValue,
   filters,
   brands,
+  excludedBrands,
 }: {
   filterValue: string
   filters: DeviceModelFilters
   brands: string[] | null
+  excludedBrands: string[]
 }): ReturnType<typeof useDeviceModels> => {
   const params: UseDeviceModelsParams = {}
 
@@ -33,16 +35,17 @@ export const useFilteredDeviceModels = ({
 
   const query = useDeviceModels(params)
 
-  if (brands === null) {
-    return query
-  }
-
-  // UPSTREAM: The API does not have a brands query parameter,
+  // UPSTREAM: The API does not have a brands or excludedBrands query parameter,
   // so selected brands are filtered here.
   return {
     ...query,
-    deviceModels: query.deviceModels?.filter((deviceModel) =>
-      brands.includes(deviceModel.brand)
-    ),
+    deviceModels: query.deviceModels
+      ?.filter(({ brand }) => {
+        if (brands === null) return true
+        return brands.includes(brand)
+      })
+      .filter(({ brand }) => {
+        return !excludedBrands.includes(brand)
+      }),
   }
 }