@seamapi/react 2.5.0 → 2.6.0

package/src/lib/seam/components/AccessCodeTable/AccessCodeMainIcon.tsx

@@ -0,0 +1,65 @@
+import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
+import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
+import { TriangleWarningOutlineIcon } from 'lib/icons/TriangleWarningOutline.js'
+import type { UseAccessCodesData } from 'lib/seam/access-codes/use-access-codes.js'
+
+export interface AccessCodeMainIconProps {
+  accessCode: UseAccessCodesData[number]
+}
+
+export function AccessCodeMainIcon({
+  accessCode,
+}: AccessCodeMainIconProps): JSX.Element {
+  const errorCount = accessCode.errors.length
+  const warningCount = accessCode.warnings.length
+  const isPlural = errorCount === 0 || errorCount > 1
+  const errorIconTitle = isPlural
+    ? `${errorCount} ${t.codeIssues}`
+    : `${errorCount} ${t.codeIssue}`
+  const warningIconTitle = isPlural
+    ? `${warningCount} ${t.codeIssues}`
+    : `${warningCount} ${t.codeIssue}`
+
+  if (errorCount > 0) {
+    return (
+      <>
+        <div
+          className='seam-issue-icon-wrap seam-md-invisible'
+          title={errorIconTitle}
+        >
+          <ExclamationCircleOutlineIcon />
+        </div>
+        <div className='seam-invisible seam-md-flex'>
+          <AccessCodeKeyIcon />
+        </div>
+      </>
+    )
+  }
+
+  if (errorCount === 0 && warningCount > 0) {
+    return (
+      <>
+        <div
+          className='seam-issue-icon-wrap seam-md-invisible'
+          title={warningIconTitle}
+        >
+          <TriangleWarningOutlineIcon />
+        </div>
+        <div className='seam-invisible seam-md-flex'>
+          <AccessCodeKeyIcon />
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <div className='seam-issue-icon-wrap'>
+      <AccessCodeKeyIcon />
+    </div>
+  )
+}
+
+const t = {
+  codeIssue: 'code issue',
+  codeIssues: 'code issues',
+}

package/src/lib/seam/components/AccessCodeTable/AccessCodeRow.tsx

@@ -1,7 +1,7 @@
-import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
 import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
 import { TriangleWarningOutlineIcon } from 'lib/icons/TriangleWarningOutline.js'
 import type { UseAccessCodesData } from 'lib/seam/access-codes/use-access-codes.js'
+import { AccessCodeMainIcon } from 'lib/seam/components/AccessCodeTable/AccessCodeMainIcon.js'
 import { AccessCodeMenu } from 'lib/seam/components/AccessCodeTable/AccessCodeMenu.js'
 import { CodeDetails } from 'lib/seam/components/AccessCodeTable/CodeDetails.js'
 import { TableCell } from 'lib/ui/Table/TableCell.js'
@@ -36,9 +36,7 @@ export function AccessCodeRow({
   return (
     <TableRow onClick={onClick}>
       <TableCell className='seam-icon-cell'>
-        <div>
-          <AccessCodeKeyIcon />
-        </div>
+        <AccessCodeMainIcon accessCode={accessCode} />
       </TableCell>
       <TableCell className='seam-name-cell'>
         <Title className='seam-truncated-text'>{accessCode.name}</Title>
@@ -46,12 +44,18 @@ export function AccessCodeRow({
       </TableCell>
       <TableCell className='seam-action-cell'>
         {errorCount > 0 && (
-          <div className='seam-issue-icon-wrap' title={errorIconTitle}>
+          <div
+            className='seam-issue-icon-wrap seam-invisible seam-md-flex'
+            title={errorIconTitle}
+          >
             <ExclamationCircleOutlineIcon />
           </div>
         )}
         {errorCount === 0 && warningCount > 0 && (
-          <div className='seam-issue-icon-wrap' title={warningIconTitle}>
+          <div
+            className='seam-issue-icon-wrap seam-invisible seam-md-flex'
+            title={warningIconTitle}
+          >
             <TriangleWarningOutlineIcon />
           </div>
         )}

package/src/lib/seam/components/AccessCodeTable/CodeDetails.tsx

@@ -17,7 +17,8 @@ export function CodeDetails(props: { accessCode: AccessCode }): JSX.Element {
       <DotDivider />
       <Duration accessCode={accessCode} />
       <DotDivider />
-      {t.code}: {accessCode.code}
+      <span className='seam-invisible seam-md-block'>{t.code}: </span>
+      {accessCode.code}
     </div>
   )
 }

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

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

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

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

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

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

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

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

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

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

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

@@ -13,17 +13,30 @@ export interface DeviceModelFilters {
 export const useFilteredDeviceModels = ({
   filterValue,
   filters,
+  includeIf,
+  excludeIf,
   ...manufacturersParams
 }: {
   filterValue: string
   filters: DeviceModelFilters
   manufacturers: string[] | null
   excludedManufacturers: string[]
+  includeIf: string[] | null
+  excludeIf: string[]
 }): ReturnType<typeof useDeviceModels> => {
   const { manufacturers } = useFilteredManufacturers(manufacturersParams)
 
   const params: UseDeviceModelsParams = {}
 
+  if (excludeIf.length > 0) {
+    params.exclude_if = excludeIf
+  }
+
+  // UPSTREAM: API does not parse zero-length arrays correctly.
+  if (includeIf != null && includeIf.length > 0) {
+    params.include_if = includeIf
+  }
+
   if (filterValue.trim() !== '') {
     params.text_search = filterValue.trim()
   }
@@ -50,13 +63,17 @@ export const useFilteredDeviceModels = ({
 
   return {
     ...rest,
-    deviceModels: deviceModels?.filter(
-      (deviceModel) =>
-        manufacturers?.some(
-          (manufacturer) =>
-            deviceModel.manufacturer.manufacturer_id ===
-            manufacturer.manufacturer_id
-        )
-    ),
+    deviceModels:
+      // UPSTREAM: API does not parse zero-length arrays correctly.
+      includeIf?.length === 0
+        ? []
+        : deviceModels?.filter(
+            (deviceModel) =>
+              manufacturers?.some(
+                (manufacturer) =>
+                  deviceModel.manufacturer.manufacturer_id ===
+                  manufacturer.manufacturer_id
+              )
+          ),
   }
 }

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.5.0'
+const seamapiReactVersion = '2.6.0'
 
 export default seamapiReactVersion

package/src/styles/_main.scss

@@ -5,6 +5,7 @@
 @use './alert';
 @use './buttons';
 @use './layout';
+@use './visibility';
 @use './loading_toast';
 @use './colors';
 @use './icons';
@@ -41,6 +42,7 @@
   @include form-field.all;
   @include buttons.all;
   @include layout.all;
+  @include visibility.all;
   @include loading_toast.all;
   @include icons.all;
   @include menus.all;

package/src/styles/_seam-table.scss

@@ -27,11 +27,17 @@
         justify-content: center;
 
         > div {
-          width: 40px;
+          width: 32px;
           height: 40px;
           display: flex;
           align-items: center;
           justify-content: center;
+          margin-right: 4px;
+
+          @media only screen and (width >= 768px) {
+            width: 40px;
+            margin-right: 4px;
+          }
         }
       }
 
@@ -48,10 +54,15 @@
         }
 
         .seam-details {
-          font-size: 14px;
+          font-size: 12px;
           line-height: 134%;
           color: colors.$text-gray-1;
           display: flex;
+          flex-wrap: wrap;
+
+          @media only screen and (width >= 768px) {
+            font-size: 14px;
+          }
 
           .seam-device-name {
             max-width: 190px;
@@ -66,10 +77,14 @@
       }
 
       .seam-action-cell {
-        margin-right: 12px;
+        margin-right: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
+
+        @media only screen and (width >= 768px) {
+          margin-right: 12px;
+        }
       }
 
       .seam-issue-icon-wrap {

package/src/styles/_visibility.scss

@@ -0,0 +1,25 @@
+@use './colors';
+
+@mixin all {
+  .seam-invisible {
+    display: none !important;
+  }
+
+  .seam-md-flex {
+    @media only screen and (width >= 768px) {
+      display: flex !important;
+    }
+  }
+
+  .seam-md-block {
+    @media only screen and (width >= 768px) {
+      display: block !important;
+    }
+  }
+
+  .seam-md-invisible {
+    @media only screen and (width >= 768px) {
+      display: none !important;
+    }
+  }
+}