@seamapi/react 1.46.4 → 1.48.0

package/src/lib/seam/thermostats/climate-setting-schedules/use-delete-climate-setting-schedule.ts

@@ -0,0 +1,53 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type {
+  ClimateSettingScheduleDeleteRequest,
+  ClimateSettingScheduleDeleteResponse,
+  SeamError,
+} from 'seamapi'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseDeleteClimateSettingScheduleMutationParams =
+  ClimateSettingScheduleDeleteRequest
+
+export type UseDeleteClimateSettingScheduleData =
+  ClimateSettingScheduleDeleteResponse
+
+export function useDeleteClimateSettingSchedule(): UseMutationResult<
+  UseDeleteClimateSettingScheduleData,
+  SeamError,
+  UseDeleteClimateSettingScheduleMutationParams
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseDeleteClimateSettingScheduleData,
+    SeamError,
+    ClimateSettingScheduleDeleteRequest
+  >({
+    mutationFn: async (
+      mutationParams: UseDeleteClimateSettingScheduleMutationParams
+    ) => {
+      if (client === null) throw new NullSeamClientError()
+      await client.thermostats.climateSettingSchedules.delete(mutationParams)
+    },
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries([
+        'thermostats',
+        'climate_setting_schedules',
+        'get',
+        { climate_setting_schedule_id: variables.climate_setting_schedule_id },
+      ])
+      void queryClient.invalidateQueries([
+        'thermostats',
+        'climate_setting_schedules',
+        'list',
+      ])
+    },
+  })
+}

package/src/lib/ui/Tooltip/Tooltip.tsx

@@ -0,0 +1,64 @@
+import {
+  type MouseEventHandler,
+  type PropsWithChildren,
+  useEffect,
+  useState,
+} from 'react'
+
+import { InfoIcon } from 'lib/icons/Info.js'
+import { InfoDarkIcon } from 'lib/icons/InfoDark.js'
+
+export function Tooltip({ children }: PropsWithChildren): JSX.Element {
+  const [isOpen, setIsOpen] = useState(false)
+
+  useEffect(() => {
+    const handleClose = (): void => {
+      setIsOpen(false)
+    }
+
+    const handleEscape = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') {
+        handleClose()
+      }
+    }
+    if (isOpen) {
+      globalThis.document?.addEventListener('click', handleClose)
+      globalThis.addEventListener?.('keydown', handleEscape)
+    }
+
+    return () => {
+      globalThis.document?.removeEventListener('click', handleClose)
+      globalThis.removeEventListener?.('keydown', handleEscape)
+    }
+  }, [isOpen, setIsOpen])
+
+  const handleToggle: MouseEventHandler<HTMLButtonElement> = (event): void => {
+    event.stopPropagation()
+    setIsOpen((prev) => !prev)
+  }
+
+  return (
+    <div className='seam-tooltip'>
+      <div className='seam-tooltip-trigger-wrap'>
+        <button onClick={handleToggle} className='seam-tooltip-button'>
+          <div className='seam-tooltip-button-icon seam-tooltip-button-icon-default'>
+            <InfoIcon />
+          </div>
+          <div className='seam-tooltip-button-icon seam-tooltip-button-icon-hover'>
+            <InfoDarkIcon />
+          </div>
+        </button>
+      </div>
+
+      <div
+        className='seam-tooltip-popover'
+        aria-expanded={isOpen}
+        onClick={(event) => {
+          event.stopPropagation()
+        }}
+      >
+        <p className='seam-tooltip-text'>{children}</p>
+      </div>
+    </div>
+  )
+}

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

@@ -23,16 +23,16 @@ export function ClimateSettingStatus({
       )}
       <Content
         mode={climateSetting.hvac_mode_setting}
-        coolingSetPoint={
+        coolingSetPoint={formatTemperatureValue(
           temperatureUnit === 'fahrenheit'
             ? climateSetting.cooling_set_point_fahrenheit
             : climateSetting.cooling_set_point_celsius
-        }
-        heatingSetPoint={
+        )}
+        heatingSetPoint={formatTemperatureValue(
           temperatureUnit === 'fahrenheit'
             ? climateSetting.heating_set_point_fahrenheit
             : climateSetting.heating_set_point_celsius
-        }
+        )}
         temperatureUnit={temperatureUnit}
       />
       {iconPlacement === 'right' && (
@@ -59,12 +59,8 @@ function ClimateSettingIcon(props: {
 
 function Content(props: {
   mode: ClimateSetting['hvac_mode_setting']
-  coolingSetPoint:
-    | ClimateSetting['cooling_set_point_fahrenheit']
-    | ClimateSetting['cooling_set_point_celsius']
-  heatingSetPoint:
-    | ClimateSetting['heating_set_point_fahrenheit']
-    | ClimateSetting['heating_set_point_celsius']
+  coolingSetPoint: string
+  heatingSetPoint: string
   temperatureUnit: 'fahrenheit' | 'celsius'
 }): JSX.Element | null {
   const { mode, coolingSetPoint, heatingSetPoint, temperatureUnit } = props
@@ -89,6 +85,12 @@ function Content(props: {
   return null
 }
 
+const formatTemperatureValue = (value: number | undefined): string => {
+  if (value == null) return '0'
+  if (Number.isInteger(value)) return value.toFixed()
+  return value.toFixed(1)
+}
+
 const t = {
   degreeFahrenheit: '°F',
   degreeCelsius: '°C',

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.46.4'
+const seamapiReactVersion = '1.48.0'
 
 export default seamapiReactVersion

package/src/styles/_main.scss

@@ -18,6 +18,7 @@
 @use './radio-field';
 @use './checkbox';
 @use './thermostat';
+@use './tooltip';
 @use './seam-table';
 
 .seam-components {
@@ -36,6 +37,7 @@
   @include menus.all;
   @include checkbox.all;
   @include radio-field.all;
+  @include tooltip.all;
 
   // Components
   @include device-details.all;

package/src/styles/_tooltip.scss

@@ -0,0 +1,83 @@
+@use './colors';
+
+@mixin all {
+  .seam-tooltip {
+    position: relative;
+
+    .seam-tooltip-button {
+      appearance: none;
+      width: 18px;
+      height: 18px;
+      border: none;
+      box-shadow: none;
+      background: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 90px;
+      cursor: pointer;
+
+      & .seam-tooltip-button-icon {
+        position: absolute;
+        transition: opacity 0.15s ease-in-out;
+      }
+
+      .seam-tooltip-button-icon-hover {
+        opacity: 0;
+      }
+
+      &:hover,
+      &:focus {
+        .seam-tooltip-button-icon-default {
+          opacity: 0;
+        }
+
+        .seam-tooltip-button-icon-hover {
+          opacity: 1;
+        }
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .seam-tooltip-popover {
+      width: 230px;
+      padding: 10px;
+      gap: 10px;
+      position: absolute;
+      bottom: 28px;
+      left: 2px;
+      display: flex;
+      border-radius: 8px;
+      background: colors.$white;
+      box-shadow:
+        0 2px 16px 2px rgb(15 22 28 / 15%),
+        0 0 1px 0 rgb(0 0 0 / 30%);
+      transform-origin: bottom left;
+      transition: 0.1s ease-in-out;
+      opacity: 0;
+      transform: scale(0.9);
+      visibility: hidden;
+      pointer-events: none;
+      z-index: -1;
+
+      &[aria-expanded='true'] {
+        opacity: 1;
+        transform: scale(1);
+        visibility: visible;
+        pointer-events: auto;
+        z-index: 9;
+      }
+    }
+
+    .seam-tooltip-text {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 134%;
+    }
+  }
+}