@seamapi/react 1.61.0 → 1.61.2

package/src/lib/ui/Menu/Menu.tsx

@@ -42,21 +42,20 @@ export function Menu({
   backgroundProps,
 }: MenuProps): JSX.Element | null {
   const { Provider } = menuContext
+  const [documentEl, setDocumentEl] = useState<null | HTMLElement>(null)
+  const [bodyEl, setBodyEl] = useState<null | HTMLElement>(null)
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-  const [documentEl, setDocumentEl] = useState<null | Element>(null)
   const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null)
   const [top, setTop] = useState(0)
   const [left, setLeft] = useState(0)
 
   useEffect(() => {
-    const containers = globalThis.document?.querySelectorAll(
-      seamComponentsClassName
-    )
-    if (containers == null) return
-    const el = containers[containers.length - 1]
-    if (el != null) {
-      setDocumentEl(el)
-    }
+    const documentEl = globalThis.document.documentElement
+    setDocumentEl(documentEl)
+
+    const bodyElements = documentEl?.getElementsByTagName('body')
+    if (bodyElements[0] == null) return
+    setBodyEl(bodyElements[0])
   }, [setDocumentEl])
 
   const handleClose = (): void => {
@@ -68,18 +67,24 @@ export function Menu({
   }
 
   const setPositions = useCallback(() => {
-    if (anchorEl == null || contentEl == null || documentEl == null) return
-
-    const { right: containerRight, bottom: containerBottom } =
-      documentEl.getBoundingClientRect()
+    if (
+      anchorEl == null ||
+      contentEl == null ||
+      bodyEl == null ||
+      documentEl == null
+    )
+      return
 
-    const { height: anchorHeight } = anchorEl.getBoundingClientRect()
+    const containerRight = documentEl.offsetLeft + documentEl.clientWidth
+    const containerBottom = documentEl.offsetTop + documentEl.clientHeight
 
-    const anchorTop = anchorEl.offsetTop
-    const anchorLeft = anchorEl.offsetLeft
+    const anchorBox = anchorEl.getBoundingClientRect()
+    const anchorTop = anchorBox.top + bodyEl.clientTop
+    const anchorLeft = anchorBox.left + bodyEl.clientLeft
+    const anchorHeight = anchorEl.offsetHeight
 
-    const { width: contentWidth, height: contentHeight } =
-      contentEl.getBoundingClientRect()
+    const contentWidth = contentEl.offsetWidth
+    const contentHeight = contentEl.offsetHeight
 
     const anchorBottom = anchorTop + anchorHeight
 
@@ -97,17 +102,20 @@ export function Menu({
 
     // If the content would overflow bottom, position it above the anchor.
     const isOverFlowingBottom = bottom > containerBottom
-    const visibleTop = isOverFlowingBottom
-      ? anchorTop - contentHeight - verticalOffset
-      : top
+    const topWhenAboveAnchor = anchorTop - contentHeight - verticalOffset
+
+    // Only open the menu above the anchor if it won't get clipped, i.e., not < 0.
+    const visibleTop =
+      isOverFlowingBottom && topWhenAboveAnchor > 0 ? topWhenAboveAnchor : top
     setTop(visibleTop)
   }, [
     anchorEl,
     horizontalOffset,
     verticalOffset,
     contentEl,
-    documentEl,
     edgeOffset,
+    bodyEl,
+    documentEl,
   ])
 
   useLayoutEffect(() => {
@@ -124,7 +132,7 @@ export function Menu({
   const hasSetPosition = top !== 0 && left !== 0
   const visible = isOpen && hasSetPosition
 
-  if (documentEl == null) {
+  if (bodyEl == null) {
     return null
   }
 
@@ -136,28 +144,30 @@ export function Menu({
     >
       {renderButton({ onOpen: handleOpen })}
       {createPortal(
-        <div
-          className={classNames(
-            'seam-menu-bg',
-            backgroundProps?.className,
-            visible ? 'seam-menu-visible' : 'seam-menu-hidden'
-          )}
-          onClick={(event) => {
-            event.stopPropagation()
-            handleClose()
-          }}
-        >
+        <div className={seamComponentsClassName}>
           <div
-            className='seam-menu-content'
-            style={{
-              top,
-              left,
+            className={classNames(
+              'seam-menu-bg',
+              backgroundProps?.className,
+              visible ? 'seam-menu-visible' : 'seam-menu-hidden'
+            )}
+            onClick={(event) => {
+              event.stopPropagation()
+              handleClose()
             }}
           >
-            {children}
+            <div
+              className='seam-menu-content'
+              style={{
+                top,
+                left,
+              }}
+            >
+              {children}
+            </div>
           </div>
         </div>,
-        documentEl
+        bodyEl
       )}
 
       {/*

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

@@ -0,0 +1,97 @@
+import classNames from 'classnames'
+import { useEffect, useState } from 'react'
+
+import { CheckGreenIcon } from 'lib/icons/CheckGreen.js'
+import { CloseWhiteIcon } from 'lib/icons/CloseWhite.js'
+import { ExclamationCircleIcon } from 'lib/icons/ExclamationCircle.js'
+
+type SnackbarVariant = 'success' | 'error'
+
+interface SnackbarProps {
+  message: string
+  variant: SnackbarVariant
+  visible: boolean
+  action?: {
+    label: string
+    onClick: () => void
+  }
+  autoDismiss?: boolean
+  dismissAfterMs?: number
+  disableCloseButton?: boolean
+}
+
+export function Snackbar({
+  message,
+  variant,
+  visible,
+  action,
+  autoDismiss = false,
+  dismissAfterMs = 5000,
+  disableCloseButton = false,
+}: SnackbarProps): JSX.Element {
+  const [hidden, setHidden] = useState(visible)
+
+  const { label: actionLabel, onClick: handleActionClick } = action ?? {}
+
+  useEffect(() => {
+    setHidden(!visible)
+  }, [visible])
+
+  useEffect(() => {
+    if (!autoDismiss) {
+      return () => {}
+    }
+
+    const timeout = globalThis.setTimeout(() => {
+      setHidden(false)
+    }, dismissAfterMs)
+
+    return () => {
+      globalThis.clearTimeout(timeout)
+    }
+  }, [autoDismiss, dismissAfterMs])
+
+  return (
+    <div className='seam-snackbar-wrap'>
+      <div
+        className={classNames('seam-snackbar', {
+          'seam-snackbar-hide': hidden,
+        })}
+      >
+        <SnackbarIcon variant={variant} />
+        <div className='seam-snackbar-message-wrap'>
+          <p className='seam-snackbar-message'>{message}</p>
+        </div>
+        <div className='seam-snackbar-actions-wrap'>
+          {action != null && (
+            <button
+              className='seam-snackbar-action'
+              onClick={handleActionClick}
+            >
+              <span className='seam-snackbar-action-label'>{actionLabel}</span>
+            </button>
+          )}
+          {!disableCloseButton && (
+            <button
+              className='seam-snackbar-close-button'
+              onClick={() => {
+                setHidden(true)
+              }}
+            >
+              <CloseWhiteIcon />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SnackbarIcon(props: { variant: SnackbarVariant }): JSX.Element {
+  switch (props.variant) {
+    case 'success':
+      return <CheckGreenIcon />
+    case 'error':
+      return <ExclamationCircleIcon />
+  }
+}

package/src/lib/ui/TimeZonePicker/TimeZonePicker.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react'
+
+import {
+  formatTimeZone,
+  getSupportedTimeZones,
+  getSystemTimeZone,
+} from 'lib/dates.js'
+import { Checkbox } from 'lib/ui/Checkbox.js'
+import { handleString } from 'lib/ui/TextField/TextField.js'
+
+interface TimeZonePickerProps {
+  value: string
+  onChange: (timeZone: string) => void
+  onManualTimeZoneSelected?: (manualTimeZoneSelected: boolean) => void
+}
+
+export function TimeZonePicker({
+  onChange,
+  value,
+  onManualTimeZoneSelected,
+}: TimeZonePickerProps): JSX.Element {
+  const [manualTimeZoneEnabled, setManualTimeZoneEnabled] = useState(false)
+
+  const isBrowserTimeZoneSelected = value === getSystemTimeZone()
+  const isManualTimeZoneSelected =
+    !isBrowserTimeZoneSelected || manualTimeZoneEnabled
+
+  useEffect(() => {
+    if (onManualTimeZoneSelected != null)
+      onManualTimeZoneSelected(isManualTimeZoneSelected)
+  }, [isManualTimeZoneSelected, onManualTimeZoneSelected])
+
+  const handleChangeManualTimeZone = (enabled: boolean): void => {
+    setManualTimeZoneEnabled(enabled)
+    if (!enabled) {
+      onChange(getSystemTimeZone())
+    }
+  }
+
+  return (
+    <div className='seam-time-zone-picker'>
+      <Checkbox
+        label={t.setTimeZoneManuallyLabel}
+        checked={!isManualTimeZoneSelected}
+        onChange={(manual) => {
+          handleChangeManualTimeZone(!manual)
+        }}
+        className='seam-manual-time-zone-checkbox'
+      />
+
+      <select
+        value={value}
+        onChange={handleString(onChange)}
+        className='seam-time-zone-select'
+      >
+        {getSupportedTimeZones().map((timeZone) => (
+          <option value={timeZone} key={timeZone}>
+            {formatTimeZone(timeZone)}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
+const t = {
+  utc: 'UTC',
+  setTimeZoneManuallyLabel: 'Use local time zone',
+}

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

@@ -26,15 +26,14 @@ function Content(props: {
 }): JSX.Element | null {
   const { status, level } = props
 
-  const percentage = level != null ? ` (${Math.floor(level * 100)}%)` : null
-
   if (status === 'full') {
     return (
       <>
         <BatteryLevelFullIcon />
-        <span className='seam-status-text'>{`${t.full}${
-          percentage ?? ''
-        }`}</span>
+        <span className='seam-status-text'>
+          {t.full}
+          <Percentage level={level} />
+        </span>
       </>
     )
   }
@@ -43,9 +42,10 @@ function Content(props: {
     return (
       <>
         <BatteryLevelHighIcon />
-        <span className='seam-status-text'>{`${t.high}${
-          percentage ?? ''
-        }`}</span>
+        <span className='seam-status-text'>
+          {t.high}
+          <Percentage level={level} />
+        </span>
       </>
     )
   }
@@ -54,9 +54,10 @@ function Content(props: {
     return (
       <>
         <BatteryLevelLowIcon />
-        <span className='seam-status-text'>{`${t.low}${
-          percentage ?? ''
-        }`}</span>
+        <span className='seam-status-text'>
+          {t.low}
+          <Percentage level={level} />
+        </span>
       </>
     )
   }
@@ -65,9 +66,10 @@ function Content(props: {
     return (
       <>
         <BatteryLevelCriticalIcon />
-        <span className='seam-text-danger'>{`${t.critical}${
-          percentage ?? ''
-        }`}</span>
+        <span className='seam-text-danger'>
+          {t.critical}
+          <Percentage level={level} />
+        </span>
       </>
     )
   }
@@ -75,6 +77,13 @@ function Content(props: {
   return null
 }
 
+function Percentage(props: {
+  level: number | null | undefined
+}): JSX.Element | null {
+  if (props.level == null) return null
+  return <> ({Math.floor(props.level * 100)}%)</>
+}
+
 const t = {
   full: 'Good',
   high: 'Good',

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

@@ -24,7 +24,7 @@ export function ClimateModeMenu({
       renderButton={({ onOpen }) => (
         <button onClick={onOpen} className='seam-climate-mode-menu-button'>
           <div className='seam-climate-mode-menu-button-icon'>
-            {ModeIcon(mode)}
+            <ModeIcon mode={mode} />
           </div>
           <ChevronDownIcon />
         </button>
@@ -39,7 +39,7 @@ export function ClimateModeMenu({
         <ThermoModeMenuOption
           key={m}
           label={t[m]}
-          icon={ModeIcon(m)}
+          icon={<ModeIcon mode={m} />}
           isSelected={mode === m}
           onClick={() => {
             onChange(m)
@@ -50,8 +50,8 @@ export function ClimateModeMenu({
   )
 }
 
-function ModeIcon(mode: HvacModeSetting): JSX.Element {
-  switch (mode) {
+function ModeIcon(props: { mode: HvacModeSetting }): JSX.Element {
+  switch (props.mode) {
     case 'heat':
       return <ThermostatHeatIcon />
     case 'cool':

package/src/lib/ui/{use-current-time.ts → use-now.ts}

@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react'
 
 import { useInterval } from 'lib/ui/use-interval.js'
 
-export function useCurrentTime(): DateTime {
+export function useNow(): DateTime {
   const [date, setDate] = useState<DateTime>(DateTime.now())
 
   const update = useCallback(() => {

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.61.0'
+const seamapiReactVersion = '1.61.2'
 
 export default seamapiReactVersion

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

@@ -4,7 +4,7 @@
   .seam-access-code-form {
     @include main;
     @include schedule-picker;
-    @include timezone-picker;
+    @include time-zone-picker;
   }
 }
 
@@ -96,7 +96,7 @@
     .seam-content {
       padding: 0 24px;
 
-      .seam-timezone {
+      .seam-time-zone {
         display: flex;
         align-items: center;
         font-size: 14px;
@@ -127,8 +127,8 @@
   }
 }
 
-@mixin timezone-picker {
-  .seam-access-code-timezone-picker {
+@mixin time-zone-picker {
+  .seam-access-code-time-zone-picker {
     .seam-content {
       padding: 0 24px;
     }

package/src/styles/_climate-setting-schedule-form.scss

@@ -25,7 +25,7 @@
 
 @mixin name-and-schedule {
   .seam-climate-setting-schedule-form-name-and-schedule {
-    .seam-timezone {
+    .seam-time-zone {
       display: flex;
       align-items: center;
       font-size: 14px;

package/src/styles/_colors.scss

@@ -20,6 +20,7 @@ $bg-b: #e9edef;
 $bg-a: #f1f3f4;
 $bg-aa: #fafafa;
 $bg-gray: #ececec;
+$feedback-bg: #30373a;
 $status-red: #e36857;
 $white: #fff;
 $black: #000;
@@ -38,3 +39,4 @@ $thermo-orange: #fc8e28;
 $thermo-orange-faded: #fff2e0;
 $thermo-blue: #6b95ff;
 $thermo-blue-faded: #e7f2ff;
+$text-hyperlink: #6ac1ff;

package/src/styles/_loading_toast.scss

@@ -1,21 +1,10 @@
 @use './colors';
-
-@keyframes scale-in {
-  0% {
-    transform: scale(0.5);
-    opacity: 0;
-    visibility: hidden;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 1;
-    visibility: visible;
-  }
-}
+@use './motion';
 
 @mixin all {
   .seam-loading-toast {
+    @include motion.scale-in;
+
     height: 32px;
     padding: 0 10px;
     display: flex;
@@ -29,8 +18,8 @@
       0 0 1px 0 rgb(24 29 37 / 25%);
     gap: 8px;
     will-change: transform;
-    animation: scale-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
-    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+    animation: scale-in 0.2s motion.$ease-out-quint;
+    transition: all 0.2s motion.$ease-out-quint;
     pointer-events: none;
     position: absolute;
     z-index: 9;

package/src/styles/_main.scss

@@ -21,11 +21,12 @@
 @use './thermostat';
 @use './tooltip';
 @use './seam-table';
+@use './snackbar';
 @use './spinner';
 @use './switch';
 @use './climate-setting-schedule-form';
 @use './climate-setting-schedule-details';
-@use './timezone-picker';
+@use './time-zone-picker';
 
 .seam-components {
   // Reset
@@ -45,9 +46,10 @@
   @include checkbox.all;
   @include radio-field.all;
   @include tooltip.all;
+  @include snackbar.all;
   @include spinner.all;
   @include switch.all;
-  @include timezone-picker.all;
+  @include time-zone-picker.all;
 
   // Components
   @include device-details.all;

package/src/styles/_motion.scss

@@ -0,0 +1,34 @@
+$ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
+$ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
+
+@mixin scale-in {
+  @keyframes scale-in {
+    0% {
+      transform: scale(0.5);
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    100% {
+      transform: scale(1);
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
+@mixin fade-in-up {
+  @keyframes fade-in-up {
+    0% {
+      transform: translateY(24px);
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}

package/src/styles/_snackbar.scss

@@ -0,0 +1,107 @@
+@use './colors';
+@use './motion';
+
+@mixin all {
+  .seam-snackbar-wrap {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    height: 0;
+    z-index: 9;
+  }
+
+  .seam-snackbar {
+    @include motion.fade-in-up;
+
+    pointer-events: auto;
+    display: flex;
+    padding: 16px;
+    align-items: flex-start;
+    border-radius: 12px;
+    background: colors.$feedback-bg;
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 25%);
+    gap: 10px;
+    position: absolute;
+    bottom: 24px;
+    will-change: transform;
+    animation: fade-in-up 0.2s motion.$ease-in-out-quint;
+    transition: all 0.2s motion.$ease-in-out-quint;
+
+    &.seam-snackbar-hide {
+      transform: translateY(24px);
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    .seam-snackbar-message-wrap {
+      display: flex;
+      max-width: 300px;
+    }
+
+    .seam-snackbar-message {
+      color: colors.$white;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 134%;
+      margin: 0;
+      padding: 0;
+    }
+
+    .seam-snackbar-actions-wrap {
+      height: 24px;
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      gap: 16px;
+    }
+
+    .seam-snackbar-action {
+      appearance: none;
+      background-color: transparent;
+      margin: 0;
+      padding: 0;
+      padding-top: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-shadow: none;
+      border: none;
+      cursor: pointer;
+      transition: opacity 0.2s ease-in-out;
+
+      &:hover {
+        opacity: 0.75;
+      }
+
+      .seam-snackbar-action-label {
+        color: colors.$text-hyperlink;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 0.8;
+        white-space: nowrap;
+      }
+    }
+
+    .seam-snackbar-close-button {
+      appearance: none;
+      background-color: transparent;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 0;
+      box-shadow: none;
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+      transition: opacity 0.2s ease-in-out;
+
+      &:hover {
+        opacity: 0.75;
+      }
+    }
+  }
+}