@seamapi/react 4.0.0 → 4.2.0

package/src/lib/icons/ThermostatOff.tsx

@@ -7,9 +7,10 @@ export function ThermostatOffIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={14}
-      height={14}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 14 14'
       {...props}
     >
       <path

package/src/lib/icons/TriangleWarning.tsx

@@ -9,9 +9,10 @@ export function TriangleWarningIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <mask

package/src/lib/icons/TriangleWarningOutline.tsx

@@ -9,9 +9,10 @@ export function TriangleWarningOutlineIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <path fill='#FF9800' d='m12 6.49 7.53 13.01H4.47zm0-3.99-11 19h22z' />

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

@@ -217,7 +217,7 @@ export function AccessCodeDetails({
         </div>
         {(!disableEditAccessCode || !disableDeleteAccessCode) && (
           <div className='seam-actions'>
-            {!disableEditAccessCode && (
+            {!disableEditAccessCode && !accessCode.is_offline_access_code && (
               <Button
                 size='small'
                 onClick={handleEdit}
@@ -226,7 +226,7 @@ export function AccessCodeDetails({
                 {t.editCode}
               </Button>
             )}
-            {!disableDeleteAccessCode && (
+            {!disableDeleteAccessCode && !accessCode.is_offline_access_code && (
               <Button
                 size='small'
                 onClick={handleDelete}

package/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx

@@ -68,7 +68,7 @@ function Content(props: {
           {t.deviceDetails}
         </TextButton>
       </div>
-      {!disableLockUnlock && (
+      {!disableLockUnlock && device.properties.online && (
         <Button
           onClick={() => {
             toggleLock.mutate(device)

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

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { AddIcon } from 'lib/icons/Add.js'
+import { useDevice } from 'lib/index.js'
 import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
 import { NestedAccessCodeDetails } from 'lib/seam/components/AccessCodeDetails/AccessCodeDetails.js'
 import {
@@ -73,6 +74,10 @@ export function AccessCodeTable({
     device_id: deviceId,
   })
 
+  const { device } = useDevice({
+    device_id: deviceId,
+  })
+
   const [selectedViewAccessCodeId, setSelectedViewAccessCodeId] = useState<
     string | null
   >(null)
@@ -128,6 +133,10 @@ export function AccessCodeTable({
     }
   }, [accessCodeResult])
 
+  if (device == null) {
+    return <></>
+  }
+
   if (selectedEditAccessCodeId != null) {
     return (
       <NestedEditAccessCodeForm
@@ -214,14 +223,16 @@ export function AccessCodeTable({
             ) : (
               <div className='seam-fragment' />
             )}
-            {!disableCreateAccessCode && (
-              <IconButton
-                onClick={toggleAddAccessCodeForm}
-                className='seam-add-button'
-              >
-                <AddIcon />
-              </IconButton>
-            )}
+            {!disableCreateAccessCode &&
+              (device.properties.online_access_codes_enabled === true ||
+                device.can_program_online_access_codes === true) && (
+                <IconButton
+                  onClick={toggleAddAccessCodeForm}
+                  className='seam-add-button'
+                >
+                  <AddIcon />
+                </IconButton>
+              )}
           </div>
           <div className='seam-table-header-loading-wrap'>
             <LoadingToast

package/src/lib/seam/components/DeviceDetails/DeviceInfo.tsx

@@ -32,7 +32,9 @@ export function DeviceInfo({
       <DetailRow label={t.manufacturer}>
         <div className='seam-detail-row-hstack'>
           {device.properties.model.manufacturer_display_name}
-          {device.properties.manufacturer === 'ecobee' && <BeeIcon />}
+          {device.properties.manufacturer === 'ecobee' && (
+            <BeeIcon style={{ fontSize: '33px' }} />
+          )}
         </div>
       </DetailRow>
       {!disableConnectedAccountInformation && (

package/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx

@@ -99,8 +99,12 @@ export function LockDeviceDetails({
               <div className='seam-properties'>
                 <span className='seam-label'>{t.status}:</span>{' '}
                 <OnlineStatus device={device} />
-                <span className='seam-label'>{t.power}:</span>{' '}
-                <BatteryStatusIndicator device={device} />
+                {device.properties.online && (
+                  <>
+                    <span className='seam-label'>{t.power}:</span>{' '}
+                    <BatteryStatusIndicator device={device} />
+                  </>
+                )}
                 <DeviceModel device={device} />
               </div>
             </div>
@@ -120,25 +124,28 @@ export function LockDeviceDetails({
         </div>
 
         <div className='seam-box'>
-          <div className='seam-content seam-lock-status'>
-            <div>
-              <span className='seam-label'>{t.lockStatus}</span>
-              <span className='seam-value'>{lockStatus}</span>
-            </div>
-            <div className='seam-right'>
-              {!disableLockUnlock &&
-                device.capabilities_supported.includes('lock') && (
-                  <Button
-                    size='small'
-                    onClick={() => {
-                      toggleLock.mutate(device)
-                    }}
-                  >
-                    {toggleLockLabel}
-                  </Button>
-                )}
+          {device.properties.locked && device.properties.online && (
+            <div className='seam-content seam-lock-status'>
+              <div>
+                <span className='seam-label'>{t.lockStatus}</span>
+                <span className='seam-value'>{lockStatus}</span>
+              </div>
+              <div className='seam-right'>
+                {!disableLockUnlock &&
+                  device.capabilities_supported.includes('lock') && (
+                    <Button
+                      size='small'
+                      onClick={() => {
+                        toggleLock.mutate(device)
+                      }}
+                    >
+                      {toggleLockLabel}
+                    </Button>
+                  )}
+              </div>
             </div>
-          </div>
+          )}
+
           <AccessCodeLength
             supportedCodeLengths={
               device.properties?.supported_code_lengths ?? []

package/src/lib/seam/locks/lock-device.ts

@@ -5,5 +5,14 @@ export type LockDevice = Omit<Device, 'properties'> & {
     NonNullable<Required<Pick<Device['properties'], 'locked'>>>
 }
 
-export const isLockDevice = (device: Device): device is LockDevice =>
-  'locked' in device.properties
+export const isLockDevice = (device: Device): device is LockDevice => {
+  return (
+    'locked' in device.properties ||
+    'can_remotely_lock' in device ||
+    'can_remotely_unlock' in device ||
+    'can_program_online_access_code' in device ||
+    'can_program_offline_access_code' in device ||
+    device.properties.online_access_codes_enabled === true ||
+    device.properties.offline_access_codes_enabled === true
+  )
+}

package/src/lib/ui/Snackbar/Snackbar.tsx

@@ -67,7 +67,10 @@ export function Snackbar({
           'seam-snackbar-visible': automaticVisibility ? !hidden : visible,
         })}
       >
-        <SnackbarIcon variant={variant} />
+        <span className='seam-snackbar-icon-wrap'>
+          <SnackbarIcon variant={variant} />
+        </span>
+
         <div className='seam-snackbar-message-wrap'>
           <p className='seam-snackbar-message'>{message}</p>
         </div>

package/src/lib/ui/device/BatteryStatusIndicator.tsx

@@ -34,7 +34,7 @@ function Content(props: {
   if (status === 'full') {
     return (
       <>
-        <BatteryLevelFullIcon />
+        <BatteryLevelFullIcon style={{ fontSize: '24px' }} />
         <span className='seam-status-text'>
           {t.full}
           <Percentage level={level} />
@@ -46,7 +46,7 @@ function Content(props: {
   if (status === 'good') {
     return (
       <>
-        <BatteryLevelHighIcon />
+        <BatteryLevelHighIcon style={{ fontSize: '24px' }} />
         <span className='seam-status-text'>
           {t.high}
           <Percentage level={level} />
@@ -58,7 +58,7 @@ function Content(props: {
   if (status === 'low') {
     return (
       <>
-        <BatteryLevelLowIcon />
+        <BatteryLevelLowIcon style={{ fontSize: '24px' }} />
         <span className='seam-status-text'>
           {t.low}
           <Percentage level={level} />
@@ -70,7 +70,7 @@ function Content(props: {
   if (status === 'critical') {
     return (
       <>
-        <BatteryLevelCriticalIcon />
+        <BatteryLevelCriticalIcon style={{ fontSize: '24px' }} />
         <span className='seam-text-danger'>
           {t.critical}
           <Percentage level={level} />

package/src/lib/ui/device/LockStatus.tsx

@@ -19,6 +19,10 @@ export function LockStatus(props: LockStatusProps): JSX.Element | null {
     },
   } = props
 
+  if (locked === null) {
+    return null
+  }
+
   return (
     <div className='seam-lock-status'>
       <Content isLocked={locked} />

package/src/lib/ui/device/OnlineStatus.tsx

@@ -25,7 +25,7 @@ export function OnlineStatus(props: OnlineStatusProps): JSX.Element {
 function AccountOfflineContent(): JSX.Element {
   return (
     <>
-      <OnlineStatusAccountOfflineIcon />
+      <OnlineStatusAccountOfflineIcon className='seam-font-24' />
       <span className='seam-text-danger'>{t.accountOffline}</span>
     </>
   )
@@ -36,7 +36,7 @@ function AccountOnlineContent(props: { isOnline: boolean }): JSX.Element {
   if (isOnline) {
     return (
       <>
-        <OnlineStatusOnlineIcon />
+        <OnlineStatusOnlineIcon className='seam-font-24' />
         <span className='seam-status-text'>{t.online}</span>
       </>
     )
@@ -44,7 +44,7 @@ function AccountOnlineContent(props: { isOnline: boolean }): JSX.Element {
 
   return (
     <>
-      <OnlineStatusDeviceOfflineIcon />
+      <OnlineStatusDeviceOfflineIcon className='seam-font-24' />
       <span className='seam-text-danger'>{t.deviceOffline}</span>
     </>
   )

package/src/lib/ui/thermostat/ClimateModeMenu.tsx

@@ -25,7 +25,7 @@ export function ClimateModeMenu({
           <div className='seam-climate-mode-menu-button-icon'>
             <ModeIcon mode={mode} />
           </div>
-          <ChevronDownIcon />
+          <ChevronDownIcon className='seam-climate-mode-menu-button-chevron' />
         </button>
       )}
       verticalOffset={-180}

package/src/lib/ui/thermostat/ClimateSettingStatus.tsx

@@ -1,3 +1,5 @@
+import classNames from 'classnames'
+
 import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
 import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
 import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
@@ -46,7 +48,14 @@ function ClimateSettingIcon(props: {
   const { mode } = props
 
   return (
-    <div className='seam-climate-setting-status-icon'>
+    <div
+      className={classNames('seam-climate-setting-status-icon', {
+        'seam-climate-setting-status-icon-cool': mode === 'cool',
+        'seam-climate-setting-status-icon-heat': mode === 'heat',
+        'seam-climate-setting-status-icon-heat-cool': mode === 'heat_cool',
+        'seam-climate-setting-status-icon-off': mode === 'off',
+      })}
+    >
       {mode === 'cool' && <ThermostatCoolIcon />}
       {mode === 'heat' && <ThermostatHeatIcon />}
       {mode === 'heat_cool' && <ThermostatHeatCoolIcon />}

package/src/lib/ui/thermostat/TemperatureControlGroup.tsx

@@ -138,7 +138,7 @@ export function TemperatureControlGroup({
     <div className='seam-temperature-control-group'>
       {showHeat && (
         <div className='seam-temperature-control-group-block'>
-          <ThermostatHeatLargeIcon />
+          <ThermostatHeatLargeIcon className='seam-temperature-control-group-block-thermostat-icon' />
           <TemperatureControl
             variant='heat'
             value={heatValue}
@@ -151,7 +151,7 @@ export function TemperatureControlGroup({
 
       {showCool && (
         <div className='seam-temperature-control-group-block'>
-          <ThermostatCoolLargeIcon />
+          <ThermostatCoolLargeIcon className='seam-temperature-control-group-block-thermostat-icon' />
           <TemperatureControl
             variant='cool'
             value={coolValue}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '4.0.0'
+const seamapiReactVersion = '4.2.0'
 
 export default seamapiReactVersion

package/src/styles/_access-code-details.scss

@@ -59,7 +59,7 @@
             }
 
             svg {
-              scale: 0.8333;
+              font-size: 20px;
             }
           }
         }
@@ -141,7 +141,7 @@
               }
 
               svg {
-                scale: 0.8333;
+                font-size: 20px;
               }
             }
           }

package/src/styles/_alert.scss

@@ -80,6 +80,7 @@
     .seam-alert-icon {
       width: 24px;
       height: 24px;
+      font-size: 24px;
     }
 
     .seam-alert-content {

package/src/styles/_buttons.scss

@@ -11,17 +11,15 @@
     line-height: 0;
     width: 30px;
     height: 30px;
+    font-size: 18px;
+    color: colors.$primary;
 
-    &:hover {
-      background: rgb(0 122 252 / 8%);
+    path {
+      fill: colors.$primary;
     }
 
-    svg {
-      scale: 0.75;
-
-      * {
-        fill: colors.$primary;
-      }
+    &:hover {
+      background: rgb(0 122 252 / 8%);
     }
   }
 }

package/src/styles/_checkbox.scss

@@ -11,6 +11,7 @@
     > .seam-checkbox-icon {
       height: 24px;
       width: 24px;
+      font-size: 24px;
     }
 
     > input {

package/src/styles/_device-details.scss

@@ -123,7 +123,7 @@
               }
 
               svg {
-                scale: 0.75;
+                font-size: 18px !important;
                 margin-right: 8px;
               }
 

package/src/styles/_icons.scss

@@ -2,6 +2,8 @@
 
 @mixin all {
   .seam-lock-icon {
+    font-size: 24px;
+
     * {
       fill: colors.$text-gray-1;
     }

package/src/styles/_inputs.scss

@@ -49,7 +49,7 @@
       align-items: center;
 
       svg {
-        scale: 0.8333;
+        font-size: 22px;
       }
 
       &.seam-start {

package/src/styles/_layout.scss

@@ -18,6 +18,7 @@
       top: 50%;
       transform: translate(4px, -50%);
       left: 0;
+      font-size: 24px;
       cursor: pointer;
     }
 
@@ -281,6 +282,7 @@
       justify-content: center;
       align-items: center;
       transition: transform 0.2s ease-in-out;
+      font-size: 24px;
     }
   }
 }

package/src/styles/_radio-field.scss

@@ -20,6 +20,7 @@
       > .seam-radio-icon {
         height: 24px;
         width: 24px;
+        font-size: 24px;
       }
 
       > .seam-radio-label {

package/src/styles/_seam-table.scss

@@ -34,7 +34,7 @@
           justify-content: center;
           margin-right: 4px;
 
-          @media only screen and (width >= 768px) {
+          @media only screen and (width >=768px) {
             width: 40px;
             margin-right: 4px;
           }
@@ -60,7 +60,7 @@
           display: flex;
           flex-wrap: wrap;
 
-          @media only screen and (width >= 768px) {
+          @media only screen and (width >=768px) {
             font-size: 14px;
           }
 
@@ -82,7 +82,7 @@
         align-items: center;
         justify-content: center;
 
-        @media only screen and (width >= 768px) {
+        @media only screen and (width >=768px) {
           margin-right: 12px;
         }
       }
@@ -92,6 +92,7 @@
         justify-content: center;
         align-items: center;
         margin-right: 8px;
+        font-size: 25px;
       }
     }
 

package/src/styles/_snackbar.scss

@@ -40,6 +40,11 @@
       visibility: visible;
     }
 
+    .seam-snackbar-icon-wrap {
+      font-size: 24px;
+      display: inline-flex;
+    }
+
     .seam-snackbar-message-wrap {
       display: flex;
       max-width: 300px;
@@ -101,6 +106,7 @@
       padding: 0;
       cursor: pointer;
       transition: opacity 0.2s ease-in-out;
+      font-size: 24px;
 
       &:hover {
         opacity: 0.75;

package/src/styles/_supported-device-table-manufacturer-keys.scss

@@ -14,6 +14,7 @@
       display: table-cell;
       cursor: pointer;
       padding-left: 10px;
+      font-size: 25px;
     }
   }
 }

package/src/styles/_supported-device-table.scss

@@ -187,6 +187,7 @@ $see-all-button-height: 30px;
 
       svg {
         transform: rotate(90deg);
+        font-size: 25px;
       }
     }
 

package/src/styles/_tables.scss

@@ -88,7 +88,7 @@
       padding: 0;
 
       svg {
-        scale: 0.8333;
+        font-size: 20px;
 
         * {
           fill: colors.$text-gray-1;
@@ -107,7 +107,8 @@
     line-height: 134%;
 
     svg {
-      scale: 0.75;
+      font-size: 19px;
+      margin: 3px 4px;
     }
 
     &.seam-clickable {

package/src/styles/_thermostat.scss

@@ -28,6 +28,10 @@
     align-items: center;
     flex-direction: row;
     gap: 8px;
+
+    .seam-temperature-control-group-block-thermostat-icon {
+      font-size: 24px;
+    }
   }
 }
 
@@ -89,6 +93,10 @@
     align-items: center;
     flex-direction: row;
     gap: 7px;
+
+    svg {
+      font-size: 20px;
+    }
   }
 
   .seam-temperature-range-wrap {
@@ -330,6 +338,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    font-size: 14px;
+
+    .seam-climate-setting-status-icon-heat-cool {
+      font-size: 19px;
+    }
   }
 }
 
@@ -541,6 +554,10 @@
     cursor: pointer;
     transition: 0.2s ease;
 
+    svg {
+      font-size: 20px;
+    }
+
     &:hover {
       border-color: colors.$text-gray-2;
     }
@@ -556,6 +573,10 @@
       align-items: center;
       flex-direction: row;
       gap: 10px;
+
+      svg {
+        font-size: 22px;
+      }
     }
 
     .seam-fan-mode-menu-button-text {
@@ -594,6 +615,10 @@
       background-color: colors.$bg-c;
       border-color: colors.$text-gray-2;
     }
+
+    .seam-climate-mode-menu-button-chevron {
+      font-size: 20px;
+    }
   }
 
   .seam-climate-mode-menu-button-icon {
@@ -602,6 +627,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    font-size: 18px;
   }
 }
 

package/src/styles/_typography.scss

@@ -55,6 +55,12 @@
   }
 }
 
+@mixin font-size {
+  .seam-font-24 {
+    font-size: 24px;
+  }
+}
+
 @mixin all {
   @include headers;
   @include caption;
@@ -62,4 +68,5 @@
   @include font-family;
   @include defaults;
   @include truncated-text;
+  @include font-size;
 }