@seamapi/react 1.24.0 → 1.25.0

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceContentRows.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { UseDeviceModelsData } from '../../../../lib/seam/device-models/use-device-models.js';
+interface SupportedDeviceContentRowsProps {
+    deviceModels: UseDeviceModelsData;
+}
+export declare function SupportedDeviceContentRows({ deviceModels, }: SupportedDeviceContentRowsProps): JSX.Element | null;
+export {};

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceContentRows.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SupportedDeviceRow } from '../../../../lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js';
+export function SupportedDeviceContentRows({ deviceModels, }) {
+    return (_jsx("div", { className: 'seam-supported-device-table-content', children: deviceModels.map((deviceModel, index) => (_jsx(SupportedDeviceRow, { deviceModel: deviceModel }, [
+            deviceModel.main_category,
+            deviceModel.brand,
+            deviceModel.model_name,
+            deviceModel.manufacturer_model_id,
+            index,
+        ].join(':')))) }));
+}
+//# sourceMappingURL=SupportedDeviceContentRows.js.map

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceContentRows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportedDeviceContentRows.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContentRows.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gEAAgE,CAAA;AAOnG,MAAM,UAAU,0BAA0B,CAAC,EACzC,YAAY,GACoB;IAChC,OAAO,CACL,cAAK,SAAS,EAAC,qCAAqC,YACjD,YAAY,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,CAAC,CACxC,KAAC,kBAAkB,IAQjB,WAAW,EAAE,WAAW,IAPnB;YACH,WAAW,CAAC,aAAa;YACzB,WAAW,CAAC,KAAK;YACjB,WAAW,CAAC,UAAU;YACtB,WAAW,CAAC,qBAAqB;YACjC,KAAK;SACN,CAAC,IAAI,CAAC,GAAG,CAAC,CAEX,CACH,CAAC,GACE,CACP,CAAA;AACH,CAAC"}

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterArea.d.ts

@@ -5,5 +5,6 @@ export interface SupportedDeviceFilterAreaProps {
     setFilterValue: (filter: string) => void;
     filters: DeviceModelFilters;
     setFilters: Dispatch<SetStateAction<DeviceModelFilters>>;
+    brands: string[];
 }
-export declare function SupportedDeviceFilterArea({ filterValue, setFilterValue, filters, setFilters, }: SupportedDeviceFilterAreaProps): JSX.Element;
+export declare function SupportedDeviceFilterArea({ filterValue, setFilterValue, filters, setFilters, brands, }: SupportedDeviceFilterAreaProps): JSX.Element;

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterArea.js

@@ -5,10 +5,10 @@ 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';
-export function SupportedDeviceFilterArea({ filterValue, setFilterValue, filters, setFilters, }) {
+export function SupportedDeviceFilterArea({ filterValue, setFilterValue, filters, setFilters, brands, }) {
     const appliedFiltersCount = Object.values(filters).filter((v) => v != null && v !== false).length;
     const filterProperty = 'brand';
-    const availableProperties = useAvailableProperties(filterProperty);
+    const availableProperties = useAvailableProperties(filterProperty, { brands });
     const resetFilter = (filterType) => {
         setFilters((filters) => ({
             ...filters,
@@ -35,13 +35,21 @@ export function SupportedDeviceFilterArea({ filterValue, setFilterValue, filters
                                 setFilterValue(value);
                             }, className: 'seam-supported-device-table-filter-area-search-bar' }) })] })] }));
 }
-const useAvailableProperties = (property) => {
+const useAvailableProperties = (property, options) => {
     const { deviceModels } = useDeviceModels();
     if (deviceModels == null)
         return [];
     const properties = new Set();
     for (const deviceModel of deviceModels) {
-        properties.add(capitalize(deviceModel[property]));
+        const value = deviceModel[property];
+        // If we're only looking at a subset of brands, such as ["yale", "august"], then we
+        // don't want to show other brands in the filter.
+        if (property === 'brand' &&
+            options.brands.length > 0 &&
+            !options.brands.includes(value)) {
+            continue;
+        }
+        properties.add(capitalize(value));
     }
     return Array.from(properties);
 };

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterArea.js.map

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

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRowProps.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { DeviceModel } from 'seamapi';
+export interface SupportedDeviceFilterResultRowProps {
+    deviceModel: DeviceModel;
+}
+export declare function SupportedDeviceFilterResultRow({ deviceModel, }: SupportedDeviceFilterResultRowProps): JSX.Element;
+export declare function ModelColumn({ deviceModel, }: SupportedDeviceFilterResultRowProps): import("react/jsx-runtime").JSX.Element;

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRowProps.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+export function SupportedDeviceFilterResultRow({ deviceModel, }) {
+    return (_jsxs("div", { className: 'seam-row filter-result-row', children: [_jsx(ImageColumn, { deviceModel: deviceModel }), _jsx(ModelColumn, { deviceModel: deviceModel }), _jsx(StatusColumn, { deviceModel: deviceModel })] }));
+}
+export function ModelColumn({ deviceModel, }) {
+    const deviceProvider = useDeviceProvider(deviceModel.brand);
+    return (_jsxs("div", { className: 'seam-col seam-model-col', children: [_jsxs("div", { className: 'seam-model-name', children: [_jsx("img", { src: deviceProvider.image_url, alt: deviceModel.brand, className: 'seam-brand-image' }), ' ', deviceModel.model_name] }), _jsxs("div", { className: 'seam-model-id', children: [deviceModel.manufacturer_model_id, _jsx(DotDivider, {}), connectionTypeNames[deviceModel.connection_type]] })] }));
+}
+//# sourceMappingURL=SupportedDeviceFilterResultRowProps.js.map

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRowProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportedDeviceFilterResultRowProps.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRowProps.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,YAAY,GACb,MAAM,gEAAgE,CAAA;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iEAAiE,CAAA;AACnG,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAMxD,MAAM,UAAU,8BAA8B,CAAC,EAC7C,WAAW,GACyB;IACpC,OAAO,CACL,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,WAAW,IAAC,WAAW,EAAE,WAAW,GAAI,EACzC,KAAC,WAAW,IAAC,WAAW,EAAE,WAAW,GAAI,EACzC,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,GAAI,IACtC,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,WAAW,GACyB;IACpC,MAAM,cAAc,GAAG,iBAAiB,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;IAE3D,OAAO,CACL,eAAK,SAAS,EAAC,yBAAyB,aACtC,eAAK,SAAS,EAAC,iBAAiB,aAC9B,cACE,GAAG,EAAE,cAAc,CAAC,SAAS,EAC7B,GAAG,EAAE,WAAW,CAAC,KAAK,EACtB,SAAS,EAAC,kBAAkB,GAC5B,EAAC,GAAG,EACL,WAAW,CAAC,UAAU,IACnB,EACN,eAAK,SAAS,EAAC,eAAe,aAC3B,WAAW,CAAC,qBAAqB,EAClC,KAAC,UAAU,KAAG,EACb,mBAAmB,CAAC,WAAW,CAAC,eAAe,CAAC,IAC7C,IACF,CACP,CAAA;AACH,CAAC"}

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.d.ts

@@ -4,3 +4,7 @@ export interface SupportedDeviceRowProps {
     deviceModel: DeviceModel;
 }
 export declare function SupportedDeviceRow({ deviceModel, }: SupportedDeviceRowProps): JSX.Element;
+export declare function ImageColumn({ deviceModel }: SupportedDeviceRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function ModelColumn({ deviceModel }: SupportedDeviceRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatusColumn({ deviceModel }: SupportedDeviceRowProps): import("react/jsx-runtime").JSX.Element;
+export declare const connectionTypeNames: Record<DeviceModel['connection_type'], string>;

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js

@@ -1,16 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { capitalize } from '../../../../lib/strings.js';
+import { DotDivider } from '../../../../lib/ui/layout/DotDivider.js';
 export function SupportedDeviceRow({ deviceModel, }) {
-    const statusColor = supportLevelColors[deviceModel.support_level] ?? 'gray';
-    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("img", { width: 40, src: deviceModel.icon_url }) }), _jsx("td", { children: deviceModel.main_category }), _jsx("td", { children: deviceModel.model_name }), _jsx("td", { children: deviceModel.manufacturer_model_id }), _jsx("td", { children: connectionTypeNames[deviceModel.connection_type] }), _jsx("td", { children: _jsx("div", { className: classNames('seam-status-pill', `status-${statusColor}`), children: _jsx("span", { children: capitalize(deviceModel.support_level) }) }) })] }));
+    return (_jsxs("div", { className: 'seam-row', children: [_jsx(ImageColumn, { deviceModel: deviceModel }), _jsx(ModelColumn, { deviceModel: deviceModel }), _jsx(StatusColumn, { deviceModel: deviceModel })] }));
+}
+export function ImageColumn({ deviceModel }) {
+    return (_jsx("div", { className: 'seam-col seam-device-image-col', children: _jsx("div", { className: 'seam-image-box', children: _jsx("img", { width: 40, src: deviceModel.icon_url }) }) }));
+}
+export function ModelColumn({ deviceModel }) {
+    return (_jsxs("div", { className: 'seam-col seam-model-col', children: [_jsx("div", { className: 'seam-model-name', children: deviceModel.model_name }), _jsxs("div", { className: 'seam-model-id', children: [deviceModel.manufacturer_model_id, _jsx(DotDivider, {}), connectionTypeNames[deviceModel.connection_type]] })] }));
+}
+export function StatusColumn({ deviceModel }) {
+    const statusColor = supportLevelColors[deviceModel.support_level] ?? 'unknown';
+    return (_jsx("div", { className: 'seam-col seam-status-col', children: _jsx("div", { className: classNames('seam-status-pill', `status-${statusColor}`), children: _jsx("span", { children: status[deviceModel.support_level] }) }) }));
 }
 const supportLevelColors = {
     live: 'green',
     beta: 'blue',
-    unsupported: 'orange',
+    unsupported: 'unknown',
+};
+const status = {
+    live: 'LIVE',
+    beta: 'BETA',
+    unsupported: 'Inquire',
 };
-const connectionTypeNames = {
+export const connectionTypeNames = {
     wifi: 'Wifi',
     zwave: 'Z-Wave',
     zigbee: 'Zigbee',

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"SupportedDeviceRow.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAGnC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAM3C,MAAM,UAAU,kBAAkB,CAAC,EACjC,WAAW,GACa;IACxB,MAAM,WAAW,GAAG,kBAAkB,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,MAAM,CAAA;IAC3E,OAAO,CACL,yBACE,uBACE,cAAK,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,CAAC,QAAQ,GAAI,GAC1C,EACL,uBAAK,WAAW,CAAC,aAAa,GAAM,EACpC,uBAAK,WAAW,CAAC,UAAU,GAAM,EACjC,uBAAK,WAAW,CAAC,qBAAqB,GAAM,EAC5C,uBAAK,mBAAmB,CAAC,WAAW,CAAC,eAAe,CAAC,GAAM,EAC3D,uBACE,cACE,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,UAAU,WAAW,EAAE,CAAC,YAElE,yBAAO,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,GAAQ,GAChD,GACH,IACF,CACN,CAAA;AACH,CAAC;AAED,MAAM,kBAAkB,GAGpB;IACF,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,QAAQ;CACtB,CAAA;AAED,MAAM,mBAAmB,GAAmD;IAC1E,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;CACnB,CAAA"}
+{"version":3,"file":"SupportedDeviceRow.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAGnC,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAMxD,MAAM,UAAU,kBAAkB,CAAC,EACjC,WAAW,GACa;IACxB,OAAO,CACL,eAAK,SAAS,EAAC,UAAU,aACvB,KAAC,WAAW,IAAC,WAAW,EAAE,WAAW,GAAI,EACzC,KAAC,WAAW,IAAC,WAAW,EAAE,WAAW,GAAI,EACzC,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,GAAI,IACtC,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAAE,WAAW,EAA2B;IAClE,OAAO,CACL,cAAK,SAAS,EAAC,gCAAgC,YAC7C,cAAK,SAAS,EAAC,gBAAgB,YAC7B,cAAK,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,CAAC,QAAQ,GAAI,GACzC,GACF,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAAE,WAAW,EAA2B;IAClE,OAAO,CACL,eAAK,SAAS,EAAC,yBAAyB,aACtC,cAAK,SAAS,EAAC,iBAAiB,YAAE,WAAW,CAAC,UAAU,GAAO,EAC/D,eAAK,SAAS,EAAC,eAAe,aAC3B,WAAW,CAAC,qBAAqB,EAClC,KAAC,UAAU,KAAG,EACb,mBAAmB,CAAC,WAAW,CAAC,eAAe,CAAC,IAC7C,IACF,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAAE,WAAW,EAA2B;IACnE,MAAM,WAAW,GAAG,kBAAkB,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,SAAS,CAAA;IAE9E,OAAO,CACL,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,UAAU,WAAW,EAAE,CAAC,YACrE,yBAAO,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,GAAQ,GAC5C,GACF,CACP,CAAA;AACH,CAAC;AAED,MAAM,kBAAkB,GAGpB;IACF,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,SAAS;CACvB,CAAA;AAED,MAAM,MAAM,GAAiD;IAC3D,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,SAAS;CACvB,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAG5B;IACF,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;CACnB,CAAA"}

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

@@ -5,6 +5,7 @@ export interface SupportedDeviceTableProps {
      * @deprecated Use disableFilter.
      */
     cannotFilter?: boolean;
+    brands?: string[];
     className?: string;
 }
-export declare function SupportedDeviceTable({ disableFilter, cannotFilter, className, }?: SupportedDeviceTableProps): JSX.Element;
+export declare function SupportedDeviceTable({ disableFilter, cannotFilter, brands, className, }?: SupportedDeviceTableProps): JSX.Element;

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { useState } from 'react';
 import { SupportedDeviceContent } from '../../../../lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.js';
 import { SupportedDeviceFilterArea } from '../../../../lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterArea.js';
-export function SupportedDeviceTable({ disableFilter = false, cannotFilter, className, } = {}) {
+export function SupportedDeviceTable({ disableFilter = false, cannotFilter, brands = [], className, } = {}) {
     const [filterValue, setFilterValue] = useState('');
     const [filters, setFilters] = useState({
         supportedOnly: false,
@@ -11,8 +11,8 @@ export function SupportedDeviceTable({ disableFilter = false, cannotFilter, clas
         brand: null,
     });
     const hideFilter = cannotFilter ?? disableFilter;
-    return (_jsxs("div", { className: classNames('seam-supported-device-table-content-wrap', className), children: [!hideFilter && (_jsx(SupportedDeviceFilterArea, { filterValue: filterValue, setFilterValue: setFilterValue, filters: filters, setFilters: setFilters })), _jsx(SupportedDeviceContent, { resetFilterValue: () => {
+    return (_jsxs("div", { className: classNames('seam-supported-device-table-content-wrap', className), children: [!hideFilter && (_jsx(SupportedDeviceFilterArea, { filterValue: filterValue, setFilterValue: setFilterValue, filters: filters, setFilters: setFilters, brands: brands })), _jsx(SupportedDeviceContent, { resetFilterValue: () => {
                     setFilterValue('');
-                }, filterValue: filterValue, filters: filters })] }));
+                }, filterValue: filterValue, filters: filters, brands: brands })] }));
 }
 //# sourceMappingURL=SupportedDeviceTable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SupportedDeviceTable.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oEAAoE,CAAA;AAC3G,OAAO,EAAE,yBAAyB,EAAE,MAAM,uEAAuE,CAAA;AAYjH,MAAM,UAAU,oBAAoB,CAAC,EACnC,aAAa,GAAG,KAAK,EACrB,YAAY,EACZ,SAAS,MACoB,EAAE;IAC/B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB;QACzD,aAAa,EAAE,KAAK;QACpB,QAAQ,EAAE,IAAI;QACd,KAAK,EAAE,IAAI;KACZ,CAAC,CAAA;IAEF,MAAM,UAAU,GAAG,YAAY,IAAI,aAAa,CAAA;IAEhD,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CACnB,0CAA0C,EAC1C,SAAS,CACV,aAEA,CAAC,UAAU,IAAI,CACd,KAAC,yBAAyB,IACxB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,GACtB,CACH,EACD,KAAC,sBAAsB,IACrB,gBAAgB,EAAE,GAAG,EAAE;oBACrB,cAAc,CAAC,EAAE,CAAC,CAAA;gBACpB,CAAC,EACD,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,GAChB,IACE,CACP,CAAA;AACH,CAAC"}
+{"version":3,"file":"SupportedDeviceTable.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oEAAoE,CAAA;AAC3G,OAAO,EAAE,yBAAyB,EAAE,MAAM,uEAAuE,CAAA;AAajH,MAAM,UAAU,oBAAoB,CAAC,EACnC,aAAa,GAAG,KAAK,EACrB,YAAY,EACZ,MAAM,GAAG,EAAE,EACX,SAAS,MACoB,EAAE;IAC/B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB;QACzD,aAAa,EAAE,KAAK;QACpB,QAAQ,EAAE,IAAI;QACd,KAAK,EAAE,IAAI;KACZ,CAAC,CAAA;IAEF,MAAM,UAAU,GAAG,YAAY,IAAI,aAAa,CAAA;IAEhD,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CACnB,0CAA0C,EAC1C,SAAS,CACV,aAEA,CAAC,UAAU,IAAI,CACd,KAAC,yBAAyB,IACxB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,GACd,CACH,EACD,KAAC,sBAAsB,IACrB,gBAAgB,EAAE,GAAG,EAAE;oBACrB,cAAc,CAAC,EAAE,CAAC,CAAA;gBACpB,CAAC,EACD,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,GACd,IACE,CACP,CAAA;AACH,CAAC"}

package/lib/seam/components/SupportedDeviceTable/use-device-provider.d.ts

@@ -0,0 +1,2 @@
+import type { DeviceProvider } from 'seamapi';
+export declare function useDeviceProvider(brand: string): DeviceProvider;

package/lib/seam/components/SupportedDeviceTable/use-device-provider.js

@@ -0,0 +1,15 @@
+import { useDeviceProviders } from '../../../../lib/seam/devices/use-device-providers.js';
+export function useDeviceProvider(brand) {
+    const { deviceProviders } = useDeviceProviders();
+    const definedProvider = deviceProviders?.find((provider) => provider.device_provider_name === brand);
+    if (definedProvider != null) {
+        return definedProvider;
+    }
+    return {
+        device_provider_name: 'unknown',
+        display_name: 'Unknown',
+        image_url: `https://connect.getseam.com/assets/images/logos/seam.png`,
+        provider_categories: [],
+    };
+}
+//# sourceMappingURL=use-device-provider.js.map

package/lib/seam/components/SupportedDeviceTable/use-device-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-device-provider.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/use-device-provider.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAA;AAE7E,MAAM,UAAU,iBAAiB,CAAC,KAAa;IAC7C,MAAM,EAAE,eAAe,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAEhD,MAAM,eAAe,GAAG,eAAe,EAAE,IAAI,CAC3C,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,oBAAoB,KAAK,KAAK,CACtD,CAAA;IAED,IAAI,eAAe,IAAI,IAAI,EAAE;QAC3B,OAAO,eAAe,CAAA;KACvB;IAED,OAAO;QACL,oBAAoB,EAAE,SAAS;QAC/B,YAAY,EAAE,SAAS;QACvB,SAAS,EAAE,0DAA0D;QACrE,mBAAmB,EAAE,EAAE;KACxB,CAAA;AACH,CAAC"}

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

@@ -4,4 +4,8 @@ export interface DeviceModelFilters {
     category: string | null;
     brand: string | null;
 }
-export declare const useFilteredDeviceModels: (filterValue: string, filters: DeviceModelFilters) => ReturnType<typeof useDeviceModels>;
+export declare const useFilteredDeviceModels: ({ filterValue, filters, brands, }: {
+    filterValue: string;
+    filters: DeviceModelFilters;
+    brands: string[];
+}) => ReturnType<typeof useDeviceModels>;

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

@@ -1,5 +1,5 @@
 import { useDeviceModels, } from '../../../../lib/seam/device-models/use-device-models.js';
-export const useFilteredDeviceModels = (filterValue, filters) => {
+export const useFilteredDeviceModels = ({ filterValue, filters, brands, }) => {
     const params = {};
     if (filterValue.trim() !== '') {
         params.text_search = filterValue.trim();
@@ -13,6 +13,13 @@ export const useFilteredDeviceModels = (filterValue, filters) => {
     if (filters.brand !== null) {
         params.brand = filters.brand;
     }
-    return useDeviceModels(params);
+    const query = useDeviceModels(params);
+    if (brands.length === 0) {
+        return query;
+    }
+    // If the user only wants models for a collection of brands, such as ["yale", "august"], then
+    // we'll filter everything else out here.
+    const onlySpecificBrands = query.deviceModels?.filter((deviceModel) => brands.includes(deviceModel.brand));
+    return { ...query, deviceModels: onlySpecificBrands };
 };
 //# sourceMappingURL=use-filtered-device-models.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-filtered-device-models.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/use-filtered-device-models.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,GAEhB,MAAM,6CAA6C,CAAA;AAQpD,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,WAAmB,EACnB,OAA2B,EACS,EAAE;IACtC,MAAM,MAAM,GAA0B,EAAE,CAAA;IAExC,IAAI,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC7B,MAAM,CAAC,WAAW,GAAG,WAAW,CAAC,IAAI,EAAE,CAAA;KACxC;IAED,IAAI,OAAO,CAAC,aAAa,EAAE;QACzB,MAAM,CAAC,aAAa,GAAG,MAAM,CAAA;KAC9B;IAED,IAAI,OAAO,CAAC,QAAQ,KAAK,IAAI,EAAE;QAC7B,MAAM,CAAC,aAAa,GAAG,OAAO,CAAC,QAAQ,CAAA;KACxC;IAED,IAAI,OAAO,CAAC,KAAK,KAAK,IAAI,EAAE;QAC1B,MAAM,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;KAC7B;IAED,OAAO,eAAe,CAAC,MAAM,CAAC,CAAA;AAChC,CAAC,CAAA"}
+{"version":3,"file":"use-filtered-device-models.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/use-filtered-device-models.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,GAEhB,MAAM,6CAA6C,CAAA;AAQpD,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACtC,WAAW,EACX,OAAO,EACP,MAAM,GAKP,EAAsC,EAAE;IACvC,MAAM,MAAM,GAA0B,EAAE,CAAA;IAExC,IAAI,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC7B,MAAM,CAAC,WAAW,GAAG,WAAW,CAAC,IAAI,EAAE,CAAA;KACxC;IAED,IAAI,OAAO,CAAC,aAAa,EAAE;QACzB,MAAM,CAAC,aAAa,GAAG,MAAM,CAAA;KAC9B;IAED,IAAI,OAAO,CAAC,QAAQ,KAAK,IAAI,EAAE;QAC7B,MAAM,CAAC,aAAa,GAAG,OAAO,CAAC,QAAQ,CAAA;KACxC;IAED,IAAI,OAAO,CAAC,KAAK,KAAK,IAAI,EAAE;QAC1B,MAAM,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;KAC7B;IAED,MAAM,KAAK,GAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAErC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;QACvB,OAAO,KAAK,CAAA;KACb;IAED,6FAA6F;IAC7F,yCAAyC;IACzC,MAAM,kBAAkB,GAAG,KAAK,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,WAAW,EAAE,EAAE,CACpE,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CACnC,CAAA;IAED,OAAO,EAAE,GAAG,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,CAAA;AACvD,CAAC,CAAA"}

package/lib/seam/devices/use-device-providers.d.ts

@@ -0,0 +1,5 @@
+import type { DeviceProvider } from 'seamapi';
+export declare function useDeviceProviders(): {
+    deviceProviders: DeviceProvider[] | undefined;
+    isLoading: boolean;
+};

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

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import { useSeamClient } from '../../../lib/seam/use-seam-client.js';
+export function useDeviceProviders() {
+    const { client } = useSeamClient();
+    const { data, isLoading } = useQuery({
+        queryFn: async () => {
+            if (client == null) {
+                return [];
+            }
+            return await client?.devices.listDeviceProviders({});
+        },
+        queryKey: ['devices', 'list_device_providers'],
+        enabled: client != null,
+    });
+    return { deviceProviders: data, isLoading };
+}
+//# sourceMappingURL=use-device-providers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-device-providers.js","sourceRoot":"","sources":["../../../src/lib/seam/devices/use-device-providers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGhD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAE3D,MAAM,UAAU,kBAAkB;IAIhC,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAElC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC;QACnC,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI,EAAE;gBAClB,OAAO,EAAE,CAAA;aACV;YAED,OAAO,MAAM,MAAM,EAAE,OAAO,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAA;QACtD,CAAC;QACD,QAAQ,EAAE,CAAC,SAAS,EAAE,uBAAuB,CAAC;QAC9C,OAAO,EAAE,MAAM,IAAI,IAAI;KACxB,CAAC,CAAA;IAEF,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAA;AAC7C,CAAC"}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const seamapiReactVersion = "1.24.0";
+declare const seamapiReactVersion = "1.25.0";
 export default seamapiReactVersion;

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "1.24.0",
+  "version": "1.25.0",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",
@@ -121,7 +121,7 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.2",
     "@r2wc/react-to-web-component": "^2.0.2",
-    "@seamapi/fake-seam-connect": "^0.8.0",
+    "@seamapi/fake-seam-connect": "^0.10.0",
     "@storybook/addon-essentials": "^7.0.2",
     "@storybook/addon-interactions": "^7.0.2",
     "@storybook/addon-links": "^7.0.2",

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

@@ -0,0 +1,11 @@
+interface HiddenDevicesOverlayProps {
+  visible: boolean
+}
+
+export function HiddenDevicesOverlay({ visible }: HiddenDevicesOverlayProps) {
+  if (!visible) {
+    return null
+  }
+
+  return <div className='hidden-devices-overlay' />
+}

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

@@ -0,0 +1,32 @@
+import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
+
+interface ShowAllDevicesButtonProps {
+  onClick: () => void
+  visible: boolean
+  expanded: boolean
+  totalDeviceCount: number
+}
+
+export function ShowAllDevicesButton({
+  onClick,
+  visible,
+  expanded,
+  totalDeviceCount,
+}: ShowAllDevicesButtonProps) {
+  if (!visible) {
+    return null
+  }
+
+  const label = expanded ? t.showLess : t.showAll(totalDeviceCount)
+
+  return (
+    <button className='show-all-devices-button' onClick={onClick}>
+      <ChevronRightIcon /> {label}
+    </button>
+  )
+}
+
+const t = {
+  showLess: 'Show less',
+  showAll: (count: number) => `See all ${count} devices`,
+}

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

@@ -0,0 +1,96 @@
+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 { 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.
+ */
+const maxDevicesBeforeCollapsing = 3
+
+export interface SupportedDeviceBrandSectionProps {
+  brand: string
+  deviceModels: DeviceModel[]
+}
+
+export function SupportedDeviceBrandSection({
+  brand,
+  deviceModels,
+}: SupportedDeviceBrandSectionProps): JSX.Element | null {
+  const deviceProvider = useDeviceProvider(brand)
+
+  const [expanded, toggleExpand] = useToggle()
+
+  const canExpand = deviceModels.length > maxDevicesBeforeCollapsing
+
+  const visibleDevices = () => {
+    if (!canExpand || expanded) {
+      return deviceModels
+    }
+
+    return deviceModels.filter(
+      (_deviceModel, index) => index < maxDevicesBeforeCollapsing
+    )
+  }
+
+  const handleHeaderClick = () => {
+    if (!canExpand) {
+      return
+    }
+
+    toggleExpand()
+  }
+
+  return (
+    <div
+      className={classNames('seam-brand-section', {
+        'can-expand': canExpand,
+        expanded,
+      })}
+    >
+      <div className='seam-header' onClick={handleHeaderClick}>
+        <img
+          src={deviceProvider.image_url}
+          alt={brand}
+          className='seam-brand-image'
+        />
+        <h5 className='seam-brand-name'>
+          {deviceProvider.display_name} {t.devices}
+        </h5>
+        {canExpand && <ChevronRightIcon className='chevron' />}
+      </div>
+      <div className='seam-supported-device-table-content'>
+        {visibleDevices().map((deviceModel, index) => (
+          <SupportedDeviceRow
+            key={[
+              deviceModel.main_category,
+              deviceModel.brand,
+              deviceModel.model_name,
+              deviceModel.manufacturer_model_id,
+              index,
+            ].join(':')}
+            deviceModel={deviceModel}
+          />
+        ))}
+      </div>
+      <ShowAllDevicesButton
+        visible={canExpand}
+        onClick={toggleExpand}
+        expanded={expanded}
+        totalDeviceCount={deviceModels.length}
+      />
+      <HiddenDevicesOverlay visible={canExpand && !expanded} />
+    </div>
+  )
+}
+
+const t = {
+  devices: 'Devices',
+}

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

@@ -1,25 +1,33 @@
-import { SupportedDeviceHeader } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceHeader.js'
-import { SupportedDeviceRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
+import type { DeviceModel } from 'seamapi'
+
+import { SupportedDeviceBrandSection } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceBrandSection.js'
+import { SupportedDeviceFilterResultRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRowProps.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[]
 }
 
 export function SupportedDeviceContent({
   resetFilterValue,
   filterValue,
   filters,
+  brands,
 }: SupportedDeviceContentProps): JSX.Element | null {
   const { deviceModels, isLoading, isError, refetch } = useFilteredDeviceModels(
-    filterValue,
-    filters
+    {
+      filterValue,
+      filters,
+      brands,
+    }
   )
 
   if (isLoading) {
@@ -51,12 +59,29 @@ export function SupportedDeviceContent({
     return null
   }
 
-  return (
-    <table className='seam-supported-device-table-content'>
-      <SupportedDeviceHeader />
-      <tbody>
+  const isEmpty = deviceModels.length === 0
+  if (isEmpty) {
+    return (
+      <div className='seam-supported-device-table-content'>
+        <EmptyResult
+          filterValue={filterValue}
+          resetFilterValue={resetFilterValue}
+        />
+      </div>
+    )
+  }
+
+  // If there are no active filters or search, show all the rows without any brand sections.
+  const hasFilters =
+    filterValue.trim() !== '' ||
+    filters.supportedOnly ||
+    filters.category !== null ||
+    filters.brand !== null
+  if (hasFilters) {
+    return (
+      <div className='seam-supported-device-table-content'>
         {deviceModels.map((deviceModel, index) => (
-          <SupportedDeviceRow
+          <SupportedDeviceFilterResultRow
             key={[
               deviceModel.main_category,
               deviceModel.brand,
@@ -67,14 +92,22 @@ export function SupportedDeviceContent({
             deviceModel={deviceModel}
           />
         ))}
-        {deviceModels.length === 0 && (
-          <EmptyResult
-            filterValue={filterValue}
-            resetFilterValue={resetFilterValue}
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {Object.entries(groupDeviceModelsByBrand(deviceModels)).map(
+        ([brand, models]) => (
+          <SupportedDeviceBrandSection
+            key={brand}
+            brand={brand}
+            deviceModels={models}
           />
-        )}
-      </tbody>
-    </table>
+        )
+      )}
+    </>
   )
 }
 
@@ -110,6 +143,19 @@ function EmptyResult({
   )
 }
 
+function groupDeviceModelsByBrand(
+  deviceModels: UseDeviceModelsData
+): Record<string, DeviceModel[]> {
+  const result: Record<string, DeviceModel[]> = {}
+
+  for (const model of deviceModels) {
+    const { brand } = model
+    const list = result[brand] ?? []
+    result[brand] = [...list, model]
+  }
+  return result
+}
+
 const t = {
   loading: 'Loading device models...',
   retry: 'Retry',

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

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