@seamapi/react 0.26.1 → 0.28.0

package/lib/ui/SupportedDeviceTable/SupportedDeviceContent.js.map

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

package/lib/ui/SupportedDeviceTable/SupportedDeviceFilterArea.d.ts

@@ -0,0 +1,11 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { DeviceModel, Filters } from '../../../lib/ui/SupportedDeviceTable/types.js';
+interface SupportedDeviceFilterAreaProps {
+    deviceModels: DeviceModel[];
+    filterValue: string;
+    setFilterValue: (filter: string) => void;
+    filters: Filters;
+    setFilters: Dispatch<SetStateAction<Filters>>;
+}
+export declare function SupportedDeviceFilterArea({ deviceModels, filterValue, setFilterValue, filters, setFilters, }: SupportedDeviceFilterAreaProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ui/SupportedDeviceTable/SupportedDeviceFilterArea.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { capitalize } from '../../../lib/capitalize.js';
+import { Button } from '../../../lib/ui/Button.js';
+import { Menu } from '../../../lib/ui/Menu/Menu.js';
+import { FilterCategoryMenu } from '../../../lib/ui/SupportedDeviceTable/FilterCategoryMenu.js';
+import { SearchTextField } from '../../../lib/ui/TextField/SearchTextField.js';
+export function SupportedDeviceFilterArea({ deviceModels, filterValue, setFilterValue, filters, setFilters, }) {
+    const appliedFilters = Object.keys(filters).filter((key) => {
+        const filterProperty = filters[key];
+        return (filterProperty !== undefined &&
+            filterProperty !== null &&
+            filterProperty !== false);
+    });
+    const appliedFiltersCount = appliedFilters.length;
+    const getAvailablePropertiesFromDeviceModels = (property) => {
+        const properties = new Set();
+        deviceModels.forEach((deviceModel) => {
+            properties.add(capitalize(deviceModel[property]));
+        });
+        return Array.from(properties);
+    };
+    const resetFilter = (filterType) => {
+        setFilters((filters) => ({
+            ...filters,
+            [filterType]: null,
+        }));
+    };
+    const isPlural = appliedFiltersCount > 1;
+    const filterButtonLabel = isPlural
+        ? `Filters (${appliedFiltersCount})`
+        : 'Filter';
+    return (_jsxs("div", { className: 'seam-supported-devices-filter-area', children: [_jsx("div", { className: 'seam-deliberate-block' }), _jsxs("div", { className: 'seam-filters-wrap', children: [_jsx(Menu, { renderButton: ({ onOpen }) => (_jsx(Button, { variant: 'outline', className: 'seam-filters-button', onClick: onOpen, children: filterButtonLabel })), children: _jsxs("div", { className: 'seam-supported-devices-filter-menu', onClick: (event) => {
+                                event.stopPropagation();
+                            }, children: [_jsx("div", { className: 'seam-filter-menu-row', children: _jsx(FilterCategoryMenu, { label: 'Brand', options: getAvailablePropertiesFromDeviceModels('brand'), onSelect: (brand) => {
+                                            setFilters((filters) => ({
+                                                ...filters,
+                                                brand,
+                                            }));
+                                        }, buttonLabel: filters.brand ?? 'All', onAllOptionSelect: () => {
+                                            resetFilter('brand');
+                                        } }) }), _jsx("div", { className: 'seam-filter-menu-row', children: _jsxs("label", { htmlFor: 'supportedOnly', className: 'seam-filter-checkbox-label', children: [_jsx("p", { children: "Supported" }), _jsx("input", { id: 'supportedOnly', name: 'supportedOnly', type: 'checkbox', className: 'seam-filter-checkbox', checked: filters.supportedOnly, onChange: (event) => {
+                                                    setFilters((filters) => ({
+                                                        ...filters,
+                                                        supportedOnly: event.target.checked,
+                                                    }));
+                                                } })] }) })] }) }), _jsx("div", { className: 'seam-supported-devices-filter-area-search-bar-wrap', children: _jsx(SearchTextField, { value: filterValue, onChange: (value) => {
+                                setFilterValue(value);
+                            }, className: 'seam-supported-devices-filter-area-search-bar' }) })] })] }));
+}
+//# sourceMappingURL=SupportedDeviceFilterArea.js.map

package/lib/ui/SupportedDeviceTable/SupportedDeviceFilterArea.js.map

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

package/lib/ui/SupportedDeviceTable/SupportedDeviceHeader.d.ts

@@ -0,0 +1 @@
+export declare function SupportedDeviceHeader(): import("react/jsx-runtime").JSX.Element;

package/lib/ui/{SupportedDevices/SupportedDevicesHeader.js → SupportedDeviceTable/SupportedDeviceHeader.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function SupportedDevicesHeader() {
+export function SupportedDeviceHeader() {
     return (_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: "Category" }), _jsx("th", { children: "Model Name" }), _jsx("th", { children: "Manufacturer Model ID" }), _jsx("th", { children: "Connection Type" }), _jsx("th", { children: "Status" })] }) }));
 }
-//# sourceMappingURL=SupportedDevicesHeader.js.map
+//# sourceMappingURL=SupportedDeviceHeader.js.map

package/lib/ui/SupportedDeviceTable/SupportedDeviceHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportedDeviceHeader.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDeviceTable/SupportedDeviceHeader.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,qBAAqB;IACnC,OAAO,CACL,0BACE,yBACE,cAAM,EACN,oCAAiB,EACjB,sCAAmB,EACnB,iDAA8B,EAC9B,2CAAwB,EACxB,kCAAe,IACZ,GACC,CACT,CAAA;AACH,CAAC"}

package/lib/ui/{SupportedDevices → SupportedDeviceTable}/SupportedDeviceRow.d.ts

@@ -1,4 +1,4 @@
-import type { DeviceModel } from '../../../lib/ui/SupportedDevices/types.js';
+import type { DeviceModel } from '../../../lib/ui/SupportedDeviceTable/types.js';
 export interface SupportedDeviceRowProps {
     deviceModel: DeviceModel;
 }

package/lib/ui/SupportedDeviceTable/SupportedDeviceRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportedDeviceRow.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDeviceTable/SupportedDeviceRow.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAQnC,MAAM,UAAU,kBAAkB,CAAC,EAAE,WAAW,EAA2B;IACzE,MAAM,WAAW,GAAG,kBAAkB,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,MAAM,CAAA;IAC3E,OAAO,CACL,yBACE,uBACE,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,CAAC,QAAQ,GAAI,GACrD,EACL,uBAAK,WAAW,CAAC,aAAa,GAAM,EACpC,uBAAK,WAAW,CAAC,UAAU,GAAM,EACjC,uBAAK,WAAW,CAAC,qBAAqB,GAAM,EAC5C,uBAAK,WAAW,CAAC,eAAe,GAAM,EACtC,uBACE,cACE,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,UAAU,WAAW,EAAE,CAAC,YAElE,yBAAO,WAAW,CAAC,aAAa,GAAQ,GACpC,GACH,IACF,CACN,CAAA;AACH,CAAC;AAED,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,QAAQ;CACtB,CAAA"}

package/lib/ui/SupportedDeviceTable/SupportedDeviceTable.d.ts

@@ -0,0 +1,3 @@
+import type { SupportedDeviceContentProps } from '../../../lib/ui/SupportedDeviceTable/SupportedDeviceContent.js';
+export type SupportedDeviceTableProps = SupportedDeviceContentProps;
+export declare function SupportedDeviceTable(props: SupportedDeviceContentProps): import("react/jsx-runtime").JSX.Element;

package/lib/ui/SupportedDeviceTable/SupportedDeviceTable.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { SupportedDeviceContent } from '../../../lib/ui/SupportedDeviceTable/SupportedDeviceContent.js';
+const client = new QueryClient();
+export function SupportedDeviceTable(props) {
+    return (_jsx(QueryClientProvider, { client: client, children: _jsx(SupportedDeviceContent, { ...props }) }));
+}
+//# sourceMappingURL=SupportedDeviceTable.js.map

package/lib/ui/SupportedDeviceTable/SupportedDeviceTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportedDeviceTable.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDeviceTable/SupportedDeviceTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAGxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,uDAAuD,CAAA;AAE9F,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAA;AAIhC,MAAM,UAAU,oBAAoB,CAAC,KAAkC;IACrE,OAAO,CACL,KAAC,mBAAmB,IAAC,MAAM,EAAE,MAAM,YACjC,KAAC,sBAAsB,OAAK,KAAK,GAAI,GACjB,CACvB,CAAA;AACH,CAAC"}

package/lib/ui/{SupportedDevices → SupportedDeviceTable}/types.d.ts

@@ -8,3 +8,8 @@ export interface DeviceModel {
     icon_url: string;
     seam_device_model_page_url: string;
 }
+export interface Filters {
+    supportedOnly: boolean;
+    category: string | null;
+    brand: string | null;
+}

package/lib/ui/SupportedDeviceTable/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDeviceTable/types.ts"],"names":[],"mappings":""}

package/lib/ui/Table/TableHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export function TableHeader({ children }) {
-    return _jsx("div", { className: 'seam-table-header', children: children });
+    return (_jsx("div", { className: 'seam-table-header', children: _jsx("div", { className: 'seam-body', children: children }) }));
 }
 //# sourceMappingURL=TableHeader.js.map

package/lib/ui/Table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/lib/ui/Table/TableHeader.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAqB;IACzD,OAAO,cAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,CAAA;AAC5D,CAAC"}
+{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/lib/ui/Table/TableHeader.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAqB;IACzD,OAAO,CACL,cAAK,SAAS,EAAC,mBAAmB,YAChC,cAAK,SAAS,EAAC,WAAW,YAAE,QAAQ,GAAO,GACvC,CACP,CAAA;AACH,CAAC"}

package/lib/ui/TextField/SearchTextField.d.ts

@@ -1,2 +1,2 @@
 import { type TextFieldProps } from '../../../lib/ui/TextField/TextField.js';
-export declare function SearchTextField({ className, ...props }: TextFieldProps): JSX.Element;
+export declare function SearchTextField({ className, value, onChange, ...props }: TextFieldProps): JSX.Element;

package/lib/ui/TextField/SearchTextField.js

@@ -1,7 +1,57 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import { CloseIcon } from '../../../lib/icons/Close.js';
+import { SearchIcon } from '../../../lib/icons/Search.js';
 import { TextField } from '../../../lib/ui/TextField/TextField.js';
-export function SearchTextField({ className, ...props }) {
-    return (_jsx(TextField, { ...props, className: classNames(className, 'seam-search-text-field') }));
+export function SearchTextField({ className, value, onChange, ...props }) {
+    const [inputEl, setInputEl] = useState(null);
+    const valueIsEmpty = useValueIsEmpty(value, inputEl);
+    const clearInput = () => {
+        if (onChange != null) {
+            onChange('');
+            return;
+        }
+        if (inputEl != null) {
+            inputEl.value = '';
+        }
+    };
+    return (_jsx(TextField, { value: value, onChange: onChange, ...props, className: classNames(className, 'seam-search-text-field'), startAdornment: _jsx(SearchIcon, {}), inputProps: {
+            ref: setInputEl,
+            placeholder: 'Search',
+        }, endAdornment: _jsx("button", { className: classNames({
+                'seam-hidden': valueIsEmpty,
+            }), onClick: clearInput, children: _jsx(CloseIcon, {}) }) }));
+}
+function useValueIsEmpty(value, inputEl) {
+    const [valueIsEmpty, setValueIsEmpty] = useState(true);
+    // If this is a controlled element, we'll just look at `value`
+    useEffect(() => {
+        setValueIsEmpty(value == null || value === '');
+    }, [value]);
+    // If this is not a controlled element, we'll need to listen to `input`
+    // events.
+    useEffect(() => {
+        if (inputEl == null) {
+            return;
+        }
+        const handler = (event) => {
+            if (value !== undefined) {
+                return;
+            }
+            if (event.target == null || !('value' in event.target)) {
+                return;
+            }
+            const inputValue = event.target.value;
+            if (value === undefined) {
+                setValueIsEmpty(inputValue === '');
+            }
+        };
+        inputEl.addEventListener('input', handler);
+        return () => {
+            inputEl.removeEventListener('input', handler);
+        };
+    }, [inputEl, value]);
+    return valueIsEmpty;
 }
 //# sourceMappingURL=SearchTextField.js.map

package/lib/ui/TextField/SearchTextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchTextField.js","sourceRoot":"","sources":["../../../src/lib/ui/TextField/SearchTextField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAEnC,OAAO,EAAE,SAAS,EAAuB,MAAM,+BAA+B,CAAA;AAE9E,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACO;IACf,OAAO,CACL,KAAC,SAAS,OACJ,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,wBAAwB,CAAC,GAC1D,CACH,CAAA;AACH,CAAC"}
+{"version":3,"file":"SearchTextField.js","sourceRoot":"","sources":["../../../src/lib/ui/TextField/SearchTextField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,SAAS,EAAuB,MAAM,+BAA+B,CAAA;AAE9E,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACO;IACf,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC,CAAA;IAErE,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;IACpD,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,QAAQ,IAAI,IAAI,EAAE;YACpB,QAAQ,CAAC,EAAE,CAAC,CAAA;YACZ,OAAM;SACP;QAED,IAAI,OAAO,IAAI,IAAI,EAAE;YACnB,OAAO,CAAC,KAAK,GAAG,EAAE,CAAA;SACnB;IACH,CAAC,CAAA;IAED,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,KACd,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,wBAAwB,CAAC,EAC1D,cAAc,EAAE,KAAC,UAAU,KAAG,EAC9B,UAAU,EAAE;YACV,GAAG,EAAE,UAAU;YACf,WAAW,EAAE,QAAQ;SACtB,EACD,YAAY,EACV,iBACE,SAAS,EAAE,UAAU,CAAC;gBACpB,aAAa,EAAE,YAAY;aAC5B,CAAC,EACF,OAAO,EAAE,UAAU,YAEnB,KAAC,SAAS,KAAG,GACN,GAEX,CACH,CAAA;AACH,CAAC;AAED,SAAS,eAAe,CACtB,KAAyB,EACzB,OAAgC;IAEhC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAEtD,8DAA8D;IAC9D,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC,CAAA;IAChD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,uEAAuE;IACvE,UAAU;IACV,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,IAAI,EAAE;YACnB,OAAM;SACP;QAED,MAAM,OAAO,GAAG,CAAC,KAAY,EAAE,EAAE;YAC/B,IAAI,KAAK,KAAK,SAAS,EAAE;gBACvB,OAAM;aACP;YAED,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,CAAC,EAAE;gBACtD,OAAM;aACP;YAED,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA;YACrC,IAAI,KAAK,KAAK,SAAS,EAAE;gBACvB,eAAe,CAAC,UAAU,KAAK,EAAE,CAAC,CAAA;aACnC;QACH,CAAC,CAAA;QAED,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QAE1C,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QAC/C,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,OAAO,YAAY,CAAA;AACrB,CAAC"}

package/lib/ui/TextField/TextField.d.ts

@@ -1,7 +1,14 @@
-import type { ChangeEvent, InputHTMLAttributes } from 'react';
-export type TextFieldProps = {
+import type { ChangeEvent, InputHTMLAttributes, MutableRefObject } from 'react';
+export interface TextFieldProps {
     value?: string;
-    onChange: (value: string) => void;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;
+    onChange?: (value: string) => void;
+    startAdornment?: JSX.Element;
+    endAdornment?: JSX.Element;
+    disabled?: boolean;
+    className?: string;
+    inputProps?: {
+        ref?: MutableRefObject<HTMLInputElement | null> | ((inputEl: HTMLInputElement) => void);
+    } & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;
+}
 export declare function TextField(props: TextFieldProps): JSX.Element;
 export declare const handleString: (setter: (v: string) => void) => (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;

package/lib/ui/TextField/TextField.js

@@ -1,8 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 export function TextField(props) {
-    const { value, onChange, className, ...inputProps } = props;
-    return (_jsx("input", { className: classNames('seam-text-field', className), value: value, onChange: handleString(onChange), type: 'text', ...inputProps }));
+    const { value, onChange, className, startAdornment, endAdornment, inputProps, disabled, } = props;
+    return (_jsxs("div", { className: classNames('seam-text-field', className, {
+            'seam-disabled': disabled,
+        }), children: [startAdornment != null && (_jsx("div", { className: 'seam-adornment seam-start', children: startAdornment })), _jsx("input", { className: 'seam-text-field-input', value: value, onChange: onChange == null ? undefined : handleString(onChange), type: 'text', disabled: disabled, ...inputProps }), endAdornment != null && (_jsx("div", { className: 'seam-adornment seam-end', children: endAdornment }))] }));
 }
 export const handleString = (setter) => (event) => {
     setter(event.currentTarget.value);

package/lib/ui/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/lib/ui/TextField/TextField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAQnC,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IAC3D,OAAO,CACL,gBACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,EACnD,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,EAChC,IAAI,EAAC,MAAM,KACP,UAAU,GACd,CACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GACvB,CAAC,MAA2B,EAAE,EAAE,CAChC,CAAC,KAA0D,EAAQ,EAAE;IACnE,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;AACnC,CAAC,CAAA"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/lib/ui/TextField/TextField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAiBnC,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,UAAU,EACV,QAAQ,GACT,GAAG,KAAK,CAAA;IAET,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;YAClD,eAAe,EAAE,QAAQ;SAC1B,CAAC,aAED,cAAc,IAAI,IAAI,IAAI,CACzB,cAAK,SAAS,EAAC,2BAA2B,YAAE,cAAc,GAAO,CAClE,EACD,gBACE,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,EAC/D,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,QAAQ,KACd,UAAU,GACd,EACD,YAAY,IAAI,IAAI,IAAI,CACvB,cAAK,SAAS,EAAC,yBAAyB,YAAE,YAAY,GAAO,CAC9D,IACG,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GACvB,CAAC,MAA2B,EAAE,EAAE,CAChC,CAAC,KAA0D,EAAQ,EAAE;IACnE,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;AACnC,CAAC,CAAA"}

package/lib/ui/index.d.ts

@@ -2,4 +2,4 @@ export * from './AccessCodeDetails/AccessCodeDetails.js';
 export * from './AccessCodeTable/AccessCodeTable.js';
 export * from './DeviceDetails/DeviceDetails.js';
 export * from './DeviceTable/DeviceTable.js';
-export * from './SupportedDevices/SupportedDevices.js';
+export * from './SupportedDeviceTable/SupportedDeviceTable.js';

package/lib/ui/index.js

@@ -2,5 +2,5 @@ export * from './AccessCodeDetails/AccessCodeDetails.js';
 export * from './AccessCodeTable/AccessCodeTable.js';
 export * from './DeviceDetails/DeviceDetails.js';
 export * from './DeviceTable/DeviceTable.js';
-export * from './SupportedDevices/SupportedDevices.js';
+export * from './SupportedDeviceTable/SupportedDeviceTable.js';
 //# sourceMappingURL=index.js.map

package/lib/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAA;AACxD,cAAc,sCAAsC,CAAA;AACpD,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wCAAwC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAA;AACxD,cAAc,sCAAsC,CAAA;AACpD,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gDAAgD,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "0.26.1",
+  "version": "0.28.0",
   "description": "Seam React component library.",
   "type": "module",
   "main": "index.js",

package/src/lib/capitalize.ts

@@ -0,0 +1,3 @@
+export function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}

package/src/lib/icons/ChevronDown.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react'
+export const ChevronDownIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={20}
+    height={20}
+    fill='none'
+    {...props}
+  >
+    <g mask='url(#chevron-down_svg__mask0_1045_100036)'>
+      <path
+        fill='#6E7179'
+        d='m10 12.813-5-5 1.167-1.167L10 10.479l3.833-3.833L15 7.813l-5 5Z'
+      />
+    </g>
+  </svg>
+)

package/src/lib/icons/Close.tsx

@@ -0,0 +1,30 @@
+import type { SVGProps } from 'react'
+export const CloseIcon = (props: SVGProps<SVGSVGElement>): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={24}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='close_svg__a'
+      width={24}
+      height={24}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#D9D9D9' d='M0 0h24v24H0z' />
+    </mask>
+    <g mask='url(#close_svg__a)'>
+      <path
+        fill='#B9BEC5'
+        d='M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19Z'
+      />
+    </g>
+  </svg>
+)

package/src/lib/icons/Search.tsx

@@ -0,0 +1,30 @@
+import type { SVGProps } from 'react'
+export const SearchIcon = (props: SVGProps<SVGSVGElement>): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={20}
+    height={20}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='search_svg__a'
+      width={20}
+      height={20}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#D9D9D9' d='M0 0h20v20H0z' />
+    </mask>
+    <g mask='url(#search_svg__a)'>
+      <path
+        fill='#6E7179'
+        d='m16.333 17.5-5.25-5.25a5.08 5.08 0 0 1-3.167 1.083c-1.513 0-2.794-.524-3.843-1.572C3.024 10.71 2.5 9.43 2.5 7.917c0-1.514.524-2.796 1.573-3.845C5.122 3.024 6.403 2.5 7.917 2.5c1.514 0 2.795.524 3.844 1.572 1.048 1.05 1.572 2.33 1.572 3.845a5.08 5.08 0 0 1-1.083 3.166l5.25 5.25-1.167 1.167Zm-8.416-5.833c1.041 0 1.927-.365 2.656-1.094.73-.73 1.094-1.615 1.094-2.656 0-1.042-.365-1.928-1.094-2.657-.73-.729-1.615-1.093-2.656-1.093-1.042 0-1.928.364-2.657 1.093-.729.73-1.093 1.615-1.093 2.657 0 1.041.364 1.927 1.093 2.656.73.73 1.615 1.094 2.657 1.094Z'
+      />
+    </g>
+  </svg>
+)

package/src/lib/ui/Button.tsx

@@ -1,11 +1,12 @@
 import classNames from 'classnames'
+import type { MouseEventHandler, PropsWithChildren } from 'react'
 
 interface ButtonProps {
-  children?: string
   variant?: 'solid' | 'outline' | 'neutral'
   size?: 'small' | 'medium' | 'large'
   disabled?: boolean
-  onClick?: () => void
+  onClick?: MouseEventHandler<HTMLButtonElement>
+  className?: string
 }
 
 export function Button({
@@ -14,12 +15,17 @@ export function Button({
   size = 'medium',
   disabled,
   onClick,
-}: ButtonProps): JSX.Element {
+  className,
+}: PropsWithChildren<ButtonProps>): JSX.Element {
   return (
     <button
-      className={classNames(`seam-btn seam-btn-${variant} seam-btn-${size}`, {
-        'seam-btn-disabled': disabled,
-      })}
+      className={classNames(
+        `seam-btn seam-btn-${variant} seam-btn-${size}`,
+        {
+          'seam-btn-disabled': disabled,
+        },
+        className
+      )}
       disabled={disabled}
       onClick={onClick}
     >

package/src/lib/ui/DeviceTable/DeviceTable.tsx

@@ -16,6 +16,7 @@ import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
 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 type DeviceTableProps = Props & UseDevicesParams
@@ -31,6 +32,7 @@ export function DeviceTable({
   const { devices, isLoading, isError, error } = useDevices(props)
 
   const [selectedDeviceId, selectDevice] = useState<string | null>(null)
+  const [searchTerm, setSearchTerm] = useState('')
 
   if (selectedDeviceId != null) {
     return (
@@ -57,6 +59,14 @@ export function DeviceTable({
 
   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='seam-device-table'>
       <ContentHeader onBack={onBack} />
@@ -64,9 +74,14 @@ export function DeviceTable({
         <TableTitle>
           {t.devices} <Caption>({deviceCount})</Caption>
         </TableTitle>
+        <SearchTextField
+          value={searchTerm}
+          onChange={setSearchTerm}
+          disabled={deviceCount === 0}
+        />
       </TableHeader>
       <TableBody>
-        <Body devices={devices} selectDevice={selectDevice} />
+        <Body devices={filteredDevices} selectDevice={selectDevice} />
       </TableBody>
     </div>
   )

package/src/lib/ui/SupportedDeviceTable/FilterCategoryMenu.tsx

@@ -0,0 +1,65 @@
+import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
+import { Menu } from 'lib/ui/Menu/Menu.js'
+import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
+
+interface FilterCategoryMenuBaseProps {
+  label: string
+  options: string[]
+  onSelect: (option: string) => void
+  buttonLabel?: string
+}
+
+export type FilterCategoryMenuProps =
+  | (FilterCategoryMenuBaseProps & {
+      addAllOption: true
+      onAllOptionSelect: () => void
+    })
+  | (FilterCategoryMenuBaseProps & {
+      addAllOption?: false
+      onAllOptionSelect?: never
+    })
+
+export function FilterCategoryMenu({
+  label,
+  options,
+  addAllOption,
+  onSelect,
+  onAllOptionSelect,
+  buttonLabel,
+}: FilterCategoryMenuProps) {
+  const usableOptions = addAllOption !== null ? ['All', ...options] : options
+
+  return (
+    <div className='seam-supported-devices-filter-menu-wrap'>
+      <p>{label}</p>
+      <Menu
+        renderButton={({ onOpen }) => (
+          <button onClick={onOpen}>
+            <span>{buttonLabel}</span>
+            <ChevronDownIcon />
+          </button>
+        )}
+      >
+        {usableOptions.map((option, index) => (
+          <MenuItem
+            key={`${index}:${option}`}
+            onClick={() => {
+              if (option === 'All') {
+                onAllOptionSelect?.()
+              } else {
+                onSelect(option)
+              }
+            }}
+          >
+            <span>{option}</span>
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  )
+}
+
+FilterCategoryMenu.defaultProps = {
+  addAllOption: true,
+  buttonLabel: 'Filter',
+}