@seamapi/react 2.8.7 → 2.10.0

package/src/lib/temperature-bounds.ts

@@ -1,4 +1,4 @@
-import type { HvacModeSetting } from 'seamapi'
+import type { HvacModeSetting, ThermostatDevice } from 'seamapi'
 
 export interface ControlBounds {
   mode: Exclude<HvacModeSetting, 'off'>
@@ -51,3 +51,25 @@ export const getTemperatureBounds = (
   heat: getHeatBounds(controlBounds),
   cool: getCoolBounds(controlBounds),
 })
+
+export const getSupportedThermostatModes = (
+  device: ThermostatDevice
+): HvacModeSetting[] => {
+  const allModes: HvacModeSetting[] = ['heat', 'cool', 'heat_cool', 'off']
+
+  return allModes.filter((mode) => {
+    switch (mode) {
+      case 'cool':
+        return device.properties.is_cooling_available
+      case 'heat':
+        return device.properties.is_heating_available
+      case 'heat_cool':
+        return (
+          device.properties.is_heating_available &&
+          device.properties.is_cooling_available
+        )
+      default:
+        return true
+    }
+  })
+}

package/src/lib/ui/layout/AccordionRow.tsx

@@ -5,11 +5,13 @@ import { useToggle } from 'lib/ui/use-toggle.js'
 
 interface AccordionRowProps extends PropsWithChildren {
   label: string
+  leftContent?: JSX.Element
   rightCollapsedContent?: JSX.Element
 }
 
 export function AccordionRow({
   label,
+  leftContent,
   rightCollapsedContent,
   children,
 }: AccordionRowProps): JSX.Element {
@@ -18,7 +20,10 @@ export function AccordionRow({
   return (
     <div className='seam-accordion-row' aria-expanded={isExpanded}>
       <button className='seam-accordion-row-trigger' onClick={toggle}>
-        <p className='seam-row-label'>{label}</p>
+        <div className='seam-row-inner-wrap'>
+          <p className='seam-row-label'>{label}</p>
+          <div className='seam-row-trigger-left-content'>{leftContent}</div>
+        </div>
         <div className='seam-row-inner-wrap'>
           <div className='seam-row-trigger-right-content'>
             {rightCollapsedContent}

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

@@ -8,16 +8,16 @@ import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
 import { ThermoModeMenuOption } from 'lib/ui/thermostat/ThermoModeMenuOption.js'
 
-const modes: HvacModeSetting[] = ['heat', 'cool', 'heat_cool', 'off']
-
 interface ClimateModeMenuProps {
   mode: HvacModeSetting
   onChange: (mode: HvacModeSetting) => void
+  supportedModes?: HvacModeSetting[]
 }
 
 export function ClimateModeMenu({
   mode,
   onChange,
+  supportedModes = ['heat', 'cool', 'heat_cool', 'off'],
 }: ClimateModeMenuProps): JSX.Element {
   return (
     <Menu
@@ -35,7 +35,7 @@ export function ClimateModeMenu({
         className: 'seam-thermo-mode-menu',
       }}
     >
-      {modes.map((m) => (
+      {supportedModes.map((m) => (
         <ThermoModeMenuOption
           key={m}
           label={t[m]}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.8.7'
+const seamapiReactVersion = '2.10.0'
 
 export default seamapiReactVersion

package/src/styles/_layout.scss

@@ -126,6 +126,16 @@
     gap: 8px;
   }
 
+  .seam-detail-row-end-alignment {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    flex-direction: row;
+    gap: 24px;
+    padding-top: 12px;
+  }
+
   .seam-detail-row-rotated-icon {
     transform: rotate(-90deg);
   }
@@ -168,7 +178,7 @@
 
     &[aria-expanded='true'] {
       .seam-accordion-row-content {
-        max-height: 64px;
+        max-height: 128px;
         opacity: 1;
       }
 
@@ -183,7 +193,8 @@
     }
 
     .seam-accordion-row-inner-content {
-      height: 64px;
+      width: 100%;
+      height: 128px;
       padding: 0 16px;
       overflow: hidden;
     }

package/src/styles/_thermostat.scss

@@ -703,6 +703,31 @@
   }
 }
 
+@mixin status {
+  .seam-thermostat-mutation-status {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    gap: 4px;
+    opacity: 0;
+    transition: 0.2s ease-in-out;
+
+    &.is-visible {
+      opacity: 1;
+    }
+  }
+
+  .seam-thermostat-mutation-status-icon {
+    opacity: 0.25;
+  }
+
+  .seam-thermostat-mutation-status-label {
+    font-size: 14px;
+    color: colors.$text-gray-2-5;
+  }
+}
+
 @mixin all {
   @include climate-setting-control-group;
   @include temperature-control-group;
@@ -712,4 +737,5 @@
   @include mode-menu-common;
   @include fan-mode-menu;
   @include climate-mode-menu;
+  @include status;
 }