@seamapi/react 4.14.2 → 5.1.0

package/src/styles/_ecosystem.scss

@@ -0,0 +1,295 @@
+@use './colors';
+
+// Shared styles for the Seam Ecosystem components (CompatibleApps, SupportedDevices).
+// Colors are CSS custom properties so the light, dark and auto themes share one set of rules.
+
+@mixin light-tokens {
+  --seam-ecosystem-fg-1: #{colors.$text-default};
+  --seam-ecosystem-fg-2: #{colors.$text-gray-1};
+  --seam-ecosystem-fg-3: #{colors.$text-gray-2};
+  --seam-ecosystem-surface-1: #{colors.$white};
+  --seam-ecosystem-surface-2: #{colors.$bg-a};
+  --seam-ecosystem-line-1: #{colors.$bg-b};
+  --seam-ecosystem-line-2: #{colors.$bg-d};
+  --seam-ecosystem-accent: #{colors.$primary};
+  --seam-ecosystem-accent-soft: #{colors.$primary-transparent};
+  --seam-ecosystem-skeleton: #{colors.$bg-b};
+}
+
+@mixin dark-tokens {
+  --seam-ecosystem-fg-1: #f1f3f4;
+  --seam-ecosystem-fg-2: #b9bec5;
+  --seam-ecosystem-fg-3: #8a9099;
+  --seam-ecosystem-surface-1: #16191d;
+  --seam-ecosystem-surface-2: #22262c;
+  --seam-ecosystem-line-1: #2c3138;
+  --seam-ecosystem-line-2: #434a54;
+  --seam-ecosystem-accent: #4da3ff;
+  --seam-ecosystem-accent-soft: rgb(77 163 255 / 14%);
+  --seam-ecosystem-skeleton: #2c3138;
+}
+
+@mixin dark-images {
+  .seam-ecosystem-light-only {
+    display: none;
+  }
+
+  .seam-ecosystem-dark-only {
+    display: block;
+  }
+}
+
+@mixin all {
+  .seam-ecosystem {
+    @include light-tokens;
+
+    width: 100%;
+    color: var(--seam-ecosystem-fg-1);
+    font-size: 16px;
+    line-height: 1.4;
+
+    &.seam-ecosystem-theme-dark {
+      @include dark-tokens;
+      @include dark-images;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      &.seam-ecosystem-theme-auto {
+        @include dark-tokens;
+        @include dark-images;
+      }
+    }
+
+    .seam-ecosystem-dark-only {
+      display: none;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    img {
+      max-width: 100%;
+    }
+  }
+
+  .seam-ecosystem-header {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    gap: 8px 12px;
+    margin-bottom: 16px;
+  }
+
+  .seam-ecosystem-title {
+    margin: 0 auto 0 0;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--seam-ecosystem-fg-1);
+  }
+
+  .seam-ecosystem-controls {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+  }
+
+  .seam-ecosystem-search {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-width: 200px;
+
+    .seam-ecosystem-search-icon {
+      position: absolute;
+      left: 10px;
+      font-size: 18px;
+      pointer-events: none;
+
+      path {
+        fill: var(--seam-ecosystem-fg-3);
+      }
+    }
+
+    .seam-ecosystem-search-input {
+      width: 100%;
+      height: 36px;
+      padding: 0 12px 0 34px;
+      border: 1px solid var(--seam-ecosystem-line-2);
+      border-radius: 8px;
+      background: var(--seam-ecosystem-surface-1);
+      color: var(--seam-ecosystem-fg-1);
+      font: inherit;
+      font-size: 14px;
+
+      &::placeholder {
+        color: var(--seam-ecosystem-fg-3);
+      }
+
+      &:focus {
+        outline: 2px solid var(--seam-ecosystem-accent);
+        outline-offset: -1px;
+        border-color: transparent;
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .seam-ecosystem-select {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+
+    .seam-ecosystem-select-input {
+      appearance: none;
+      height: 36px;
+      max-width: 220px;
+      padding: 0 32px 0 12px;
+      border: 1px solid var(--seam-ecosystem-line-2);
+      border-radius: 8px;
+      background: var(--seam-ecosystem-surface-1);
+      color: var(--seam-ecosystem-fg-1);
+      font: inherit;
+      font-size: 14px;
+      text-overflow: ellipsis;
+      cursor: pointer;
+
+      &:focus {
+        outline: 2px solid var(--seam-ecosystem-accent);
+        outline-offset: -1px;
+        border-color: transparent;
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    }
+
+    .seam-ecosystem-select-icon {
+      position: absolute;
+      right: 8px;
+      font-size: 18px;
+      pointer-events: none;
+
+      path {
+        fill: var(--seam-ecosystem-fg-2);
+      }
+    }
+  }
+
+  .seam-ecosystem-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    padding: 0 14px;
+    border: 1px solid var(--seam-ecosystem-line-2);
+    border-radius: 8px;
+    background: var(--seam-ecosystem-surface-1);
+    color: var(--seam-ecosystem-fg-1);
+    font: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--seam-ecosystem-surface-2);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--seam-ecosystem-accent);
+      outline-offset: 2px;
+    }
+  }
+
+  .seam-ecosystem-message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 32px 16px;
+    border: 1px dashed var(--seam-ecosystem-line-2);
+    border-radius: 12px;
+    color: var(--seam-ecosystem-fg-2);
+    font-size: 14px;
+    text-align: center;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  .seam-ecosystem-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border: 1px solid transparent;
+    border-radius: 999px;
+    background: var(--seam-ecosystem-accent-soft);
+    color: var(--seam-ecosystem-accent);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 18px;
+    white-space: nowrap;
+
+    &.seam-ecosystem-badge-type {
+      background: var(--seam-ecosystem-surface-2);
+      color: var(--seam-ecosystem-fg-1);
+    }
+
+    &.seam-ecosystem-badge-conditional {
+      border: 1px dashed var(--seam-ecosystem-accent);
+      background: transparent;
+      cursor: help;
+    }
+  }
+
+  .seam-ecosystem-skeleton {
+    border-radius: 6px;
+    background: var(--seam-ecosystem-skeleton);
+    animation: seam-ecosystem-pulse 1.5s ease-in-out infinite;
+  }
+
+  .seam-ecosystem-skeleton-line {
+    width: 60%;
+    height: 14px;
+  }
+
+  .seam-ecosystem-skeleton-line-short {
+    width: 35%;
+    height: 12px;
+  }
+
+  .seam-ecosystem-visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @keyframes seam-ecosystem-pulse {
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .seam-ecosystem-skeleton {
+      animation: none;
+    }
+  }
+}

package/src/styles/_main.scss

@@ -13,8 +13,6 @@
 @use './device-details';
 @use './device-table';
 @use './access-code-details';
-@use './supported-device-table';
-@use './supported-device-table-manufacturer-keys';
 @use './access-code-form';
 @use './input-label';
 @use './form-field';
@@ -31,6 +29,9 @@
 @use './noise-sensor';
 @use './seam-editable-device-name';
 @use './popover';
+@use './ecosystem';
+@use './compatible-apps';
+@use './supported-devices';
 
 .seam-components {
   // Reset
@@ -64,10 +65,11 @@
   @include access-code-details.all;
   @include access-code-form.all;
   @include alert.all;
-  @include supported-device-table.all;
-  @include supported-device-table-manufacturer-keys.all;
   @include thermostat.all;
   @include seam-table.all;
   @include noise-sensor.all;
   @include popover.all;
+  @include ecosystem.all;
+  @include compatible-apps.all;
+  @include supported-devices.all;
 }

package/src/styles/_supported-devices.scss

@@ -0,0 +1,153 @@
+@mixin all {
+  .seam-supported-devices {
+    container-type: inline-size;
+
+    .seam-supported-devices-sections {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+
+    .seam-supported-devices-section {
+      overflow: hidden;
+      border: 1px solid var(--seam-ecosystem-line-1);
+      border-radius: 12px;
+      background: var(--seam-ecosystem-surface-1);
+    }
+
+    .seam-supported-devices-section-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--seam-ecosystem-line-1);
+    }
+
+    .seam-supported-devices-logo {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      overflow: hidden;
+      border-radius: 8px;
+      background: var(--seam-ecosystem-surface-2);
+      color: var(--seam-ecosystem-fg-2);
+      font-weight: 600;
+
+      img {
+        width: 100%;
+        height: 100%;
+        padding: 4px;
+        object-fit: contain;
+      }
+    }
+
+    .seam-supported-devices-section-title {
+      flex: 1;
+      min-width: 0;
+      margin: 0;
+      overflow: hidden;
+      font-size: 18px;
+      font-weight: 600;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .seam-supported-devices-count {
+      flex-shrink: 0;
+      color: var(--seam-ecosystem-fg-2);
+      font-size: 14px;
+    }
+
+    .seam-supported-devices-rows {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .seam-supported-devices-row {
+      display: grid;
+      grid-template-columns: 48px minmax(0, 1fr);
+      align-items: center;
+      gap: 8px 12px;
+      padding: 12px 16px;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--seam-ecosystem-line-1);
+      }
+    }
+
+    .seam-supported-devices-image {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      overflow: hidden;
+      border-radius: 8px;
+      background: var(--seam-ecosystem-surface-2);
+      color: var(--seam-ecosystem-fg-3);
+      font-weight: 600;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+
+    .seam-supported-devices-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      min-width: 0;
+    }
+
+    .seam-supported-devices-name {
+      color: var(--seam-ecosystem-fg-1);
+      font-weight: 600;
+    }
+
+    a.seam-supported-devices-name:hover {
+      text-decoration: underline;
+    }
+
+    .seam-supported-devices-meta {
+      overflow: hidden;
+      color: var(--seam-ecosystem-fg-2);
+      font-size: 13px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .seam-supported-devices-badges {
+      display: flex;
+      flex-wrap: wrap;
+      grid-column: 2;
+      gap: 4px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .seam-supported-devices-section-footer {
+      display: flex;
+      justify-content: center;
+      padding: 12px 16px;
+      border-top: 1px solid var(--seam-ecosystem-line-1);
+    }
+
+    @container (width >= 720px) {
+      .seam-supported-devices-row {
+        grid-template-columns: 48px minmax(0, 1fr) minmax(0, 45%);
+      }
+
+      .seam-supported-devices-badges {
+        grid-column: 3;
+        justify-content: flex-end;
+      }
+    }
+  }
+}

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

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-export type FilterCategoryMenuProps = FilterCategoryMenuPropsWithAllOption | FilterCategoryMenuPropsWithoutAllOption;
-interface FilterCategoryMenuPropsWithAllOption extends FilterCategoryMenuBaseProps {
-    hideAllOption?: false;
-    allLabel: string;
-    onAllOptionSelect: () => void;
-}
-interface FilterCategoryMenuPropsWithoutAllOption extends FilterCategoryMenuBaseProps {
-    hideAllOption: true;
-    allLabel: never;
-    onAllOptionSelect?: never;
-}
-interface FilterCategoryMenuBaseProps {
-    label: string;
-    options: string[];
-    onSelect: (option: string) => void;
-    buttonLabel?: string;
-}
-export declare function FilterCategoryMenu({ label, allLabel, options, hideAllOption, onSelect, onAllOptionSelect, buttonLabel, }: FilterCategoryMenuProps): JSX.Element;
-export {};

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

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDownIcon } from '../../../../lib/icons/ChevronDown.js';
-import { Menu } from '../../../../lib/ui/Menu/Menu.js';
-import { MenuItem } from '../../../../lib/ui/Menu/MenuItem.js';
-export function FilterCategoryMenu({ label = t.filter, allLabel, options, hideAllOption = false, onSelect, onAllOptionSelect, buttonLabel, }) {
-    const sortedOptions = [...options].sort((a, b) => a.localeCompare(b));
-    const usableOptions = hideAllOption
-        ? sortedOptions
-        : [allLabel, ...sortedOptions];
-    return (_jsxs("div", { className: 'seam-supported-device-table-filter-menu-wrap', children: [_jsx("p", { children: label }), _jsx(Menu, { renderButton: ({ onOpen }) => (_jsxs("button", { type: 'button', onClick: onOpen, children: [_jsx("span", { children: buttonLabel }), _jsx(ChevronDownIcon, {})] })), children: _jsx("div", { className: 'seam-supported-device-table-filter-menu-content', children: usableOptions.map((option, index) => (_jsx(MenuItem, { onClick: () => {
-                            if (option === allLabel) {
-                                onAllOptionSelect?.();
-                            }
-                            else {
-                                onSelect(option);
-                            }
-                        }, children: _jsx("span", { children: option }) }, `${index}:${option}`))) }) })] }));
-}
-const t = {
-    filter: 'Filter',
-};
-//# sourceMappingURL=FilterCategoryMenu.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FilterCategoryMenu.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/FilterCategoryMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AA2BlD,MAAM,UAAU,kBAAkB,CAAC,EACjC,KAAK,GAAG,CAAC,CAAC,MAAM,EAChB,QAAQ,EACR,OAAO,EACP,aAAa,GAAG,KAAK,EACrB,QAAQ,EACR,iBAAiB,EACjB,WAAW,GACa;IACxB,MAAM,aAAa,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAA;IACrE,MAAM,aAAa,GAAG,aAAa;QACjC,CAAC,CAAC,aAAa;QACf,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,aAAa,CAAC,CAAA;IAEhC,OAAO,CACL,eAAK,SAAS,EAAC,8CAA8C,aAC3D,sBAAI,KAAK,GAAK,EACd,KAAC,IAAI,IACH,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAC5B,kBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,aACnC,yBAAO,WAAW,GAAQ,EAC1B,KAAC,eAAe,KAAG,IACZ,CACV,YAED,cAAK,SAAS,EAAC,iDAAiD,YAC7D,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACpC,KAAC,QAAQ,IAEP,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,MAAM,KAAK,QAAQ,EAAE,CAAC;gCACxB,iBAAiB,EAAE,EAAE,CAAA;4BACvB,CAAC;iCAAM,CAAC;gCACN,QAAQ,CAAC,MAAM,CAAC,CAAA;4BAClB,CAAC;wBACH,CAAC,YAED,yBAAO,MAAM,GAAQ,IAThB,GAAG,KAAK,IAAI,MAAM,EAAE,CAUhB,CACZ,CAAC,GACE,GACD,IACH,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,MAAM,EAAE,QAAQ;CACjB,CAAA"}

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

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-interface HiddenDevicesOverlayProps {
-    visible: boolean;
-}
-export declare function HiddenDevicesOverlay({ visible, }: HiddenDevicesOverlayProps): JSX.Element | null;
-export {};

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

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function HiddenDevicesOverlay({ visible, }) {
-    if (!visible) {
-        return null;
-    }
-    return _jsx("div", { className: 'hidden-devices-overlay' });
-}
-//# sourceMappingURL=HiddenDevicesOverlay.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"HiddenDevicesOverlay.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/HiddenDevicesOverlay.tsx"],"names":[],"mappings":";AAIA,MAAM,UAAU,oBAAoB,CAAC,EACnC,OAAO,GACmB;IAC1B,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,cAAK,SAAS,EAAC,wBAAwB,GAAG,CAAA;AACnD,CAAC"}

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

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-interface ShowAllDevicesButtonProps {
-    onClick: () => void;
-    visible: boolean;
-    expanded: boolean;
-    totalDeviceCount: number;
-}
-export declare function ShowAllDevicesButton({ onClick, visible, expanded, totalDeviceCount, }: ShowAllDevicesButtonProps): JSX.Element | null;
-export {};

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

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronRightIcon } from '../../../../lib/icons/ChevronRight.js';
-export function ShowAllDevicesButton({ onClick, visible, expanded, totalDeviceCount, }) {
-    if (!visible) {
-        return null;
-    }
-    const label = expanded ? t.showLess : t.showAll(totalDeviceCount);
-    return (_jsxs("button", { type: 'button', className: 'show-all-devices-button', onClick: onClick, children: [_jsx(ChevronRightIcon, {}), " ", label] }));
-}
-const t = {
-    showLess: 'Show less',
-    showAll: (count) => `See all ${count}`,
-};
-//# sourceMappingURL=ShowAllDevicesButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ShowAllDevicesButton.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/ShowAllDevicesButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAS5D,MAAM,UAAU,oBAAoB,CAAC,EACnC,OAAO,EACP,OAAO,EACP,QAAQ,EACR,gBAAgB,GACU;IAC1B,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAEjE,OAAO,CACL,kBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAE,OAAO,aACxE,KAAC,gBAAgB,KAAG,OAAE,KAAK,IACpB,CACV,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,QAAQ,EAAE,WAAW;IACrB,OAAO,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,WAAW,KAAK,EAAE;CAC/C,CAAA"}

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

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import { type DeviceModelFilters } from '../../../../lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js';
-interface SupportedDeviceContentProps {
-    filterValue: string;
-    resetFilterValue: () => void;
-    filters: DeviceModelFilters;
-    manufacturers: string[] | null;
-    excludedManufacturers: string[];
-    includeIf: string[] | null;
-    excludeIf: string[];
-}
-export declare function SupportedDeviceContent({ resetFilterValue, filterValue, filters, manufacturers, excludedManufacturers, includeIf, excludeIf, }: SupportedDeviceContentProps): JSX.Element | null;
-export {};

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

@@ -1,58 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { SupportedDeviceManufacturerSection } from '../../../../lib/seam/components/SupportedDeviceTable/SupportedDeviceManufacturerSection.js';
-import { useFilteredDeviceModels, } from '../../../../lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js';
-import { Button } from '../../../../lib/ui/Button.js';
-export function SupportedDeviceContent({ resetFilterValue, filterValue, filters, manufacturers, excludedManufacturers, includeIf, excludeIf, }) {
-    const { deviceModels, isPending, isError, refetch } = useFilteredDeviceModels({
-        filterValue,
-        filters,
-        manufacturers,
-        excludedManufacturers,
-        includeIf,
-        excludeIf,
-    });
-    const groupedDeviceModels = useMemo(() => groupDeviceModelsByManufacturer(deviceModels ?? []), [deviceModels]);
-    if (isPending) {
-        return (_jsx("div", { className: 'seam-supported-device-table-content-state-block', children: _jsx("p", { children: t.loading }) }));
-    }
-    if (isError) {
-        return (_jsxs("div", { className: 'seam-supported-device-table-content-state-block', children: [_jsx("p", { children: t.error }), _jsx(Button, { variant: 'solid', size: 'small', onClick: () => {
-                        void refetch();
-                    }, children: t.retry })] }));
-    }
-    if (deviceModels == null) {
-        return null;
-    }
-    const isEmpty = deviceModels.length === 0;
-    if (isEmpty) {
-        return (_jsx("div", { className: 'seam-supported-device-table-content', children: _jsx(EmptyResult, { filterValue: filterValue, resetFilterValue: resetFilterValue }) }));
-    }
-    return (_jsx(_Fragment, { children: Object.entries(groupedDeviceModels)
-            .sort((e1, e2) => e1[1][0]?.manufacturer.display_name.localeCompare(e2[1][0]?.manufacturer.display_name ?? '') ?? 0)
-            .map(([manufacturerId, models]) => {
-            return (_jsx(SupportedDeviceManufacturerSection, { manufacturerId: manufacturerId, deviceModels: models }, manufacturerId));
-        }) }));
-}
-function EmptyResult({ filterValue, resetFilterValue, }) {
-    const noMatchingRows = (_jsxs(_Fragment, { children: [_jsx("p", { children: t.noMatch }), _jsx(Button, { variant: 'outline', size: 'small', onClick: resetFilterValue, className: 'seam-supported-device-table-content-message-clear-search', children: t.clear })] }));
-    return (_jsx("div", { className: 'seam-supported-device-table-content-message-row', children: _jsx("div", { children: _jsx("div", { className: 'seam-supported-device-table-content-message', children: filterValue.length === 0 ? _jsx("p", { children: t.noneFound }) : noMatchingRows }) }) }));
-}
-const groupDeviceModelsByManufacturer = (deviceModels) => {
-    const result = {};
-    for (const model of deviceModels) {
-        const { manufacturer } = model;
-        const list = result[manufacturer.manufacturer_id] ?? [];
-        result[manufacturer.manufacturer_id] = [...list, model];
-    }
-    return result;
-};
-const t = {
-    loading: 'Loading device models...',
-    retry: 'Retry',
-    error: 'There was an error fetching device models.',
-    noneFound: 'No device models found.',
-    noMatch: 'No device models matched your search.',
-    clear: 'Clear search terms',
-};
-//# sourceMappingURL=SupportedDeviceContent.js.map

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

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

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import type { DeviceModel } from '@seamapi/types/devicedb';
-interface SupportedDeviceContentRowsProps {
-    deviceModels: DeviceModel[];
-}
-export declare function SupportedDeviceContentRows({ deviceModels, }: SupportedDeviceContentRowsProps): JSX.Element | null;
-export {};

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

@@ -1,6 +0,0 @@
-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) => (_jsx(SupportedDeviceRow, { deviceModel: deviceModel }, deviceModel.device_model_id))) }));
-}
-//# sourceMappingURL=SupportedDeviceContentRows.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SupportedDeviceContentRows.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContentRows.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gEAAgE,CAAA;AAMnG,MAAM,UAAU,0BAA0B,CAAC,EACzC,YAAY,GACoB;IAChC,OAAO,CACL,cAAK,SAAS,EAAC,qCAAqC,YACjD,YAAY,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CACjC,KAAC,kBAAkB,IAEjB,WAAW,EAAE,WAAW,IADnB,WAAW,CAAC,eAAe,CAEhC,CACH,CAAC,GACE,CACP,CAAA;AACH,CAAC"}