@seamapi/react 2.1.4 → 2.3.0

package/src/lib/temperature-bounds.ts

@@ -23,34 +23,26 @@ export const getHeatBounds = ({
   mode,
   minHeat,
   maxHeat,
-  minCool,
   maxCool,
   delta,
-}: ControlBounds): MinMax => {
+}: Omit<ControlBounds, 'minCool'>): MinMax => {
   const actualMaxHeat =
     mode === 'heat_cool' ? Math.min(maxHeat - delta, maxCool - delta) : maxHeat
 
-  const actualMinHeat =
-    mode === 'heat_cool' ? Math.max(minHeat, minCool) : minHeat
-
-  return { min: actualMinHeat, max: actualMaxHeat }
+  return { min: minHeat, max: actualMaxHeat }
 }
 
 export const getCoolBounds = ({
   mode,
   minHeat,
-  maxHeat,
   minCool,
   maxCool,
   delta,
-}: ControlBounds): MinMax => {
-  const actualMaxCool =
-    mode === 'heat_cool' ? Math.min(maxCool, maxHeat) : maxCool
-
+}: Omit<ControlBounds, 'maxHeat'>): MinMax => {
   const actualMinCool =
     mode === 'heat_cool' ? Math.max(minCool + delta, minHeat + delta) : minCool
 
-  return { min: actualMinCool, max: actualMaxCool }
+  return { min: actualMinCool, max: maxCool }
 }
 
 export const getTemperatureBounds = (

package/src/lib/ui/ClimateSettingForm/ClimateSettingScheduleFormClimateSetting.tsx

@@ -1,6 +1,8 @@
 import { type Control, Controller } from 'react-hook-form'
+import { isThermostatDevice } from 'seamapi'
 
 import { useDevice } from 'lib/seam/devices/use-device.js'
+import { getSetPointBounds, type SetPointBounds } from 'lib/set-point-bounds.js'
 import { Button } from 'lib/ui/Button.js'
 import type { ClimateSettingScheduleFormFields } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.js'
 import { FormField } from 'lib/ui/FormField.js'
@@ -29,6 +31,11 @@ export function ClimateSettingScheduleFormClimateSetting({
     device_id: deviceId,
   })
 
+  if (device == null) return <></>
+  if (!isThermostatDevice(device)) return <></>
+
+  const setPointBounds = getSetPointBounds(device.properties)
+
   return (
     <>
       <ContentHeader
@@ -43,7 +50,7 @@ export function ClimateSettingScheduleFormClimateSetting({
               <InputLabel>{t.climateSetting}</InputLabel>
               <span className='seam-label'>{t.climateSettingSubHeading}</span>
             </div>
-            <FormContent control={control} />
+            <FormContent control={control} setPointBounds={setPointBounds} />
           </div>
         </div>
         <div className='seam-actions'>
@@ -59,9 +66,13 @@ export function ClimateSettingScheduleFormClimateSetting({
 
 interface FormContentProps {
   control: Control<ClimateSettingScheduleFormFields>
+  setPointBounds: SetPointBounds
 }
 
-function FormContent({ control }: FormContentProps): JSX.Element {
+function FormContent({
+  control,
+  setPointBounds,
+}: FormContentProps): JSX.Element {
   return (
     <FormField>
       <Controller
@@ -75,6 +86,7 @@ function FormContent({ control }: FormContentProps): JSX.Element {
             }}
             coolValue={value.coolingSetPoint}
             heatValue={value.heatingSetPoint}
+            {...setPointBounds}
             onCoolValueChange={(coolingSetPoint) => {
               onChange({
                 ...value,

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { CheckGreenIcon } from 'lib/icons/CheckGreen.js'
 import { CloseWhiteIcon } from 'lib/icons/CloseWhite.js'
@@ -19,6 +19,7 @@ interface SnackbarProps {
   autoDismiss?: boolean
   dismissAfterMs?: number
   disableCloseButton?: boolean
+  automaticVisibility?: boolean
 }
 
 export function Snackbar({
@@ -29,29 +30,41 @@ export function Snackbar({
   autoDismiss = false,
   dismissAfterMs = 5000,
   disableCloseButton = false,
+  automaticVisibility = false,
   onClose = () => {},
 }: SnackbarProps): JSX.Element {
+  const [hidden, setHidden] = useState(visible)
+
+  useEffect(() => {
+    setHidden(!visible)
+  }, [visible, setHidden])
+
   const { label: actionLabel, onClick: handleActionClick } = action ?? {}
 
+  const handleClose = useCallback(() => {
+    setHidden(true)
+    onClose()
+  }, [onClose, setHidden])
+
   useEffect(() => {
     if (!autoDismiss) {
       return () => {}
     }
 
     const timeout = globalThis.setTimeout(() => {
-      onClose()
+      handleClose()
     }, dismissAfterMs)
 
     return () => {
       globalThis.clearTimeout(timeout)
     }
-  }, [autoDismiss, dismissAfterMs, onClose])
+  }, [autoDismiss, dismissAfterMs, handleClose])
 
   return (
     <div className='seam-snackbar-wrap'>
       <div
         className={classNames('seam-snackbar', {
-          'seam-snackbar-visible': visible,
+          'seam-snackbar-visible': automaticVisibility ? !hidden : visible,
         })}
       >
         <SnackbarIcon variant={variant} />
@@ -71,7 +84,7 @@ export function Snackbar({
             <button
               className='seam-snackbar-close-button'
               onClick={() => {
-                onClose()
+                handleClose()
               }}
             >
               <CloseWhiteIcon />

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

@@ -27,8 +27,7 @@ export function FanModeMenu({ mode, onChange }: FanModeMenuProps): JSX.Element {
           <ChevronDownIcon />
         </button>
       )}
-      verticalOffset={-180}
-      horizontalOffset={-32}
+      horizontalOffset={-20}
       backgroundProps={{
         className: 'seam-thermo-mode-menu',
       }}

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

@@ -130,6 +130,10 @@ export function TemperatureControlGroup({
     onCoolValueChange,
   ])
 
+  // This is done so that both sliders are operating on the same range of numbers
+  const heatCoolSliderMin = Math.min(minCool, minHeat)
+  const heatCoolSliderMax = Math.max(maxCool, maxHeat)
+
   return (
     <div className='seam-temperature-control-group'>
       {showHeat && (
@@ -139,8 +143,8 @@ export function TemperatureControlGroup({
             variant='heat'
             value={heatValue}
             onChange={adjustHeat}
-            min={minHeat}
-            max={maxHeat}
+            min={mode === 'heat_cool' ? heatCoolSliderMin : minHeat}
+            max={mode === 'heat_cool' ? heatCoolSliderMax : maxHeat}
           />
         </div>
       )}
@@ -152,8 +156,8 @@ export function TemperatureControlGroup({
             variant='cool'
             value={coolValue}
             onChange={adjustCool}
-            min={minCool}
-            max={maxCool}
+            min={mode === 'heat_cool' ? heatCoolSliderMin : minCool}
+            max={mode === 'heat_cool' ? heatCoolSliderMax : maxCool}
           />
         </div>
       )}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.1.4'
+const seamapiReactVersion = '2.3.0'
 
 export default seamapiReactVersion