@seamapi/react 1.61.1 → 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/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/version.ts

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

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,6 +21,7 @@
 @use './thermostat';
 @use './tooltip';
 @use './seam-table';
+@use './snackbar';
 @use './spinner';
 @use './switch';
 @use './climate-setting-schedule-form';
@@ -45,6 +46,7 @@
   @include checkbox.all;
   @include radio-field.all;
   @include tooltip.all;
+  @include snackbar.all;
   @include spinner.all;
   @include switch.all;
   @include time-zone-picker.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;
+      }
+    }
+  }
+}

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

@@ -3,6 +3,10 @@
 $row-padding: 8px;
 
 @mixin all {
+  .seam-supported-device-table-content-wrap {
+    background: colors.$white;
+  }
+
   .seam-supported-device-table-filter-area {
     width: 100%;
     display: flex;
@@ -372,4 +376,9 @@ $row-padding: 8px;
       align-items: center;
     }
   }
+
+  .seam-supported-device-table-filter-menu-content {
+    max-height: 300px;
+    overflow: auto;
+  }
 }