@seamapi/react 1.61.1 → 1.62.0

package/src/lib/icons/CheckGreen.tsx

@@ -0,0 +1,36 @@
+/*
+ * Automatically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function CheckGreenIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={24}
+      height={24}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='check-green_svg__a'
+        width={24}
+        height={24}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#D9D9D9' d='M0 0h24v24H0z' />
+      </mask>
+      <g mask='url(#check-green_svg__a)'>
+        <path
+          fill='#27AE60'
+          d='m10.6 16.6 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4 4.25 4.25ZM12 22a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12c0-1.383.263-2.683.788-3.9a10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2c1.383 0 2.683.262 3.9.787a10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22Z'
+        />
+      </g>
+    </svg>
+  )
+}

package/src/lib/icons/CloseWhite.tsx

@@ -0,0 +1,36 @@
+/*
+ * Automatically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function CloseWhiteIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={24}
+      height={24}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='close-white_svg__a'
+        width={24}
+        height={24}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#D9D9D9' d='M0 0h24v24H0z' />
+      </mask>
+      <g mask='url(#close-white_svg__a)'>
+        <path
+          fill='#fff'
+          d='M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19Z'
+        />
+      </g>
+    </svg>
+  )
+}

package/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx

@@ -24,6 +24,7 @@ import { NestedEditAccessCodeForm } from 'lib/seam/components/EditAccessCodeForm
 import { IconButton } from 'lib/ui/IconButton.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { LoadingToast } from 'lib/ui/LoadingToast/LoadingToast.js'
+import { Snackbar } from 'lib/ui/Snackbar/Snackbar.js'
 import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
 import { TableHeader } from 'lib/ui/Table/TableHeader.js'
@@ -130,6 +131,13 @@ export function AccessCodeTable({
     [setSelectedEditAccessCodeId]
   )
 
+  const [accessCodeResult, setAccessCodeResult] = useState<
+    'created' | 'updated' | null
+  >(null)
+
+  const accessCodeResultMessage =
+    accessCodeResult === 'created' ? t.accesCodeCreated : t.accesCodeUpdated
+
   if (selectedEditAccessCodeId != null) {
     return (
       <NestedEditAccessCodeForm
@@ -141,6 +149,9 @@ export function AccessCodeTable({
         onBack={() => {
           setSelectedEditAccessCodeId(null)
         }}
+        onSuccess={() => {
+          setAccessCodeResult('updated')
+        }}
         className={className}
       />
     )
@@ -148,20 +159,31 @@ export function AccessCodeTable({
 
   if (selectedViewAccessCodeId != null) {
     return (
-      <NestedAccessCodeDetails
-        accessCodeId={selectedViewAccessCodeId}
-        onEdit={() => {
-          setSelectedEditAccessCodeId(selectedViewAccessCodeId)
-        }}
-        disableLockUnlock={disableLockUnlock}
-        disableCreateAccessCode={disableCreateAccessCode}
-        disableEditAccessCode={disableEditAccessCode}
-        disableDeleteAccessCode={disableDeleteAccessCode}
-        onBack={() => {
-          setSelectedViewAccessCodeId(null)
-        }}
-        className={className}
-      />
+      <>
+        <Snackbar
+          variant='success'
+          message={accessCodeResultMessage}
+          visible={accessCodeResult != null}
+          autoDismiss
+          onClose={() => {
+            setAccessCodeResult(null)
+          }}
+        />
+        <NestedAccessCodeDetails
+          accessCodeId={selectedViewAccessCodeId}
+          onEdit={() => {
+            setSelectedEditAccessCodeId(selectedViewAccessCodeId)
+          }}
+          disableLockUnlock={disableLockUnlock}
+          disableCreateAccessCode={disableCreateAccessCode}
+          disableEditAccessCode={disableEditAccessCode}
+          disableDeleteAccessCode={disableDeleteAccessCode}
+          onBack={() => {
+            setSelectedViewAccessCodeId(null)
+          }}
+          className={className}
+        />
+      </>
     )
   }
 
@@ -175,6 +197,9 @@ export function AccessCodeTable({
         disableDeleteAccessCode={disableDeleteAccessCode}
         onBack={toggleAddAccessCodeForm}
         className={className}
+        onSuccess={() => {
+          setAccessCodeResult('created')
+        }}
       />
     )
   }
@@ -184,52 +209,63 @@ export function AccessCodeTable({
   }
 
   return (
-    <div className={classNames('seam-table', className)}>
-      <ContentHeader onBack={onBack} />
-      <TableHeader>
-        <div className='seam-left'>
-          {title != null ? (
-            <TableTitle>
-              {heading ?? title ?? t.accessCodes}{' '}
-              <Caption>({filteredAccessCodes.length})</Caption>
-            </TableTitle>
-          ) : (
-            <div className='seam-fragment' />
-          )}
-          {!disableCreateAccessCode && (
-            <IconButton
-              onClick={toggleAddAccessCodeForm}
-              className='seam-add-button'
-            >
-              <AddIcon />
-            </IconButton>
+    <>
+      <Snackbar
+        variant='success'
+        message={accessCodeResultMessage}
+        visible={accessCodeResult != null}
+        autoDismiss
+        onClose={() => {
+          setAccessCodeResult(null)
+        }}
+      />
+      <div className={classNames('seam-table', className)}>
+        <ContentHeader onBack={onBack} />
+        <TableHeader>
+          <div className='seam-left'>
+            {title != null ? (
+              <TableTitle>
+                {heading ?? title ?? t.accessCodes}{' '}
+                <Caption>({filteredAccessCodes.length})</Caption>
+              </TableTitle>
+            ) : (
+              <div className='seam-fragment' />
+            )}
+            {!disableCreateAccessCode && (
+              <IconButton
+                onClick={toggleAddAccessCodeForm}
+                className='seam-add-button'
+              >
+                <AddIcon />
+              </IconButton>
+            )}
+          </div>
+          <div className='seam-table-header-loading-wrap'>
+            <LoadingToast
+              isLoading={isInitialLoading}
+              label={t.loading}
+              top={-20}
+            />
+          </div>
+          {!disableSearch && (
+            <SearchTextField
+              value={searchInputValue}
+              onChange={setSearchInputValue}
+              disabled={(accessCodes?.length ?? 0) === 0}
+            />
           )}
-        </div>
-        <div className='seam-table-header-loading-wrap'>
-          <LoadingToast
-            isLoading={isInitialLoading}
-            label={t.loading}
-            top={-20}
+        </TableHeader>
+        <TableBody>
+          <Content
+            accessCodes={filteredAccessCodes}
+            onAccessCodeClick={handleAccessCodeClick}
+            onAccessCodeEdit={handleAccessCodeEdit}
+            disableEditAccessCode={disableEditAccessCode}
+            disableDeleteAccessCode={disableDeleteAccessCode}
           />
-        </div>
-        {!disableSearch && (
-          <SearchTextField
-            value={searchInputValue}
-            onChange={setSearchInputValue}
-            disabled={(accessCodes?.length ?? 0) === 0}
-          />
-        )}
-      </TableHeader>
-      <TableBody>
-        <Content
-          accessCodes={filteredAccessCodes}
-          onAccessCodeClick={handleAccessCodeClick}
-          onAccessCodeEdit={handleAccessCodeEdit}
-          disableEditAccessCode={disableEditAccessCode}
-          disableDeleteAccessCode={disableDeleteAccessCode}
-        />
-      </TableBody>
-    </div>
+        </TableBody>
+      </div>
+    </>
   )
 }
 
@@ -296,4 +332,6 @@ const t = {
   accessCodes: 'Access Codes',
   noAccessCodesMessage: 'Sorry, no access codes were found',
   loading: 'Loading access codes',
+  accesCodeUpdated: 'Access code updated',
+  accesCodeCreated: 'Access code created',
 }

package/src/lib/seam/components/CreateAccessCodeForm/CreateAccessCodeForm.element.ts

@@ -5,6 +5,7 @@ export const name = 'seam-create-access-code-form'
 
 export const props: ElementProps<CreateAccessCodeFormProps> = {
   deviceId: 'string',
+  onSuccess: 'object',
 }
 
 export { CreateAccessCodeForm as Component } from './CreateAccessCodeForm.js'

package/src/lib/seam/components/CreateAccessCodeForm/CreateAccessCodeForm.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import type { SeamError } from 'seamapi'
+import type { AccessCode, SeamError } from 'seamapi'
 
 import { useComponentTelemetry } from 'lib/telemetry/index.js'
 
@@ -18,6 +18,7 @@ import {
 
 export interface CreateAccessCodeFormProps extends CommonProps {
   deviceId: string
+  onSuccess?: (accessCodeId: string) => void
 }
 
 export const NestedCreateAccessCodeForm =
@@ -27,6 +28,7 @@ export function CreateAccessCodeForm({
   className,
   onBack,
   deviceId,
+  onSuccess,
 }: CreateAccessCodeFormProps): JSX.Element | null {
   useComponentTelemetry('CreateAccessCodeForm')
 
@@ -38,18 +40,30 @@ export function CreateAccessCodeForm({
     return null
   }
 
-  return <Content device={device} className={className} onBack={onBack} />
+  return (
+    <Content
+      device={device}
+      className={className}
+      onBack={onBack}
+      onSuccess={onSuccess}
+    />
+  )
 }
 
 function Content({
   device,
   className,
   onBack,
+  onSuccess,
 }: Omit<CreateAccessCodeFormProps, 'deviceId'> & {
   device: NonNullable<UseDeviceData>
 }): JSX.Element {
   const { submit, isSubmitting, responseErrors } = useSubmitCreateAccessCode({
-    onSuccess: () => {
+    onSuccess: (accessCode: AccessCode) => {
+      if (onSuccess != null) {
+        onSuccess(accessCode.access_code_id)
+      }
+
       if (onBack != null) {
         onBack()
       }
@@ -68,7 +82,9 @@ function Content({
   )
 }
 
-function useSubmitCreateAccessCode(params: { onSuccess: () => void }): {
+function useSubmitCreateAccessCode(params: {
+  onSuccess: (accessCode: AccessCode) => void
+}): {
   submit: (data: AccessCodeFormSubmitData) => void
   isSubmitting: boolean
   responseErrors: ResponseErrors | null

package/src/lib/seam/components/DeviceDetails/ThermostatDeviceDetails.tsx

@@ -128,10 +128,7 @@ export function ThermostatDeviceDetails(
               </DetailRow>
             </DetailSection>
 
-            <DetailSection
-              label={t.deviceDetails}
-              tooltipContent={t.deviceDetailsTooltip}
-            >
+            <DetailSection label={t.deviceDetails}>
               <DetailRow label={t.brand}>
                 <div className='seam-detail-row-hstack'>
                   {device.properties.model.manufacturer_display_name}
@@ -172,8 +169,6 @@ const t = {
   defaultClimate: 'Default climate',
   allowManualOverride: 'Allow manual override',
   deviceDetails: 'Device details',
-  deviceDetailsTooltip:
-    'When a scheduled climate reaches its end time, the default settings will kick in.',
   brand: 'Brand',
   linkedAccount: 'Linked account',
   deviceId: 'Device ID',

package/src/lib/seam/components/EditAccessCodeForm/EditAccessCodeForm.element.ts

@@ -5,6 +5,7 @@ export const name = 'seam-edit-access-code-form'
 
 export const props: ElementProps<EditAccessCodeFormProps> = {
   accessCodeId: 'string',
+  onSuccess: 'object',
 }
 
 export { EditAccessCodeForm as Component } from './EditAccessCodeForm.js'

package/src/lib/seam/components/EditAccessCodeForm/EditAccessCodeForm.tsx

@@ -19,6 +19,7 @@ import {
 
 export interface EditAccessCodeFormProps extends CommonProps {
   accessCodeId: string
+  onSuccess?: (accessCodeId: string) => void
 }
 
 export const NestedEditAccessCodeForm =
@@ -28,6 +29,7 @@ export function EditAccessCodeForm({
   accessCodeId,
   onBack,
   className,
+  onSuccess,
 }: EditAccessCodeFormProps): JSX.Element | null {
   useComponentTelemetry('EditAccessCodeForm')
 
@@ -40,7 +42,12 @@ export function EditAccessCodeForm({
   }
 
   return (
-    <Content accessCode={accessCode} className={className} onBack={onBack} />
+    <Content
+      accessCode={accessCode}
+      className={className}
+      onBack={onBack}
+      onSuccess={onSuccess}
+    />
   )
 }
 
@@ -48,6 +55,7 @@ function Content({
   className,
   onBack,
   accessCode,
+  onSuccess,
 }: Omit<EditAccessCodeFormProps, 'accessCodeId'> & {
   accessCode: NonNullable<UseAccessCodeData>
 }): JSX.Element | null {
@@ -57,7 +65,15 @@ function Content({
 
   const { submit, isSubmitting, responseErrors } = useSubmitEditAccessCode(
     accessCode,
-    onBack
+    () => {
+      if (onSuccess != null) {
+        onSuccess(accessCode.access_code_id)
+      }
+
+      if (onBack != null) {
+        onBack()
+      }
+    }
   )
 
   if (device == null) {

package/src/lib/seam/components/SupportedDeviceTable/FilterCategoryMenu.tsx

@@ -36,7 +36,10 @@ export function FilterCategoryMenu({
   onAllOptionSelect,
   buttonLabel,
 }: FilterCategoryMenuProps): JSX.Element {
-  const usableOptions = hideAllOption ? options : [allLabel, ...options]
+  const sortedOptions = [...options].sort((a, b) => a.localeCompare(b))
+  const usableOptions = hideAllOption
+    ? sortedOptions
+    : [allLabel, ...sortedOptions]
 
   return (
     <div className='seam-supported-device-table-filter-menu-wrap'>
@@ -49,20 +52,22 @@ export function FilterCategoryMenu({
           </button>
         )}
       >
-        {usableOptions.map((option, index) => (
-          <MenuItem
-            key={`${index}:${option}`}
-            onClick={() => {
-              if (option === allLabel) {
-                onAllOptionSelect?.()
-              } else {
-                onSelect(option)
-              }
-            }}
-          >
-            <span>{option}</span>
-          </MenuItem>
-        ))}
+        <div className='seam-supported-device-table-filter-menu-content'>
+          {usableOptions.map((option, index) => (
+            <MenuItem
+              key={`${index}:${option}`}
+              onClick={() => {
+                if (option === allLabel) {
+                  onAllOptionSelect?.()
+                } else {
+                  onSelect(option)
+                }
+              }}
+            >
+              <span>{option}</span>
+            </MenuItem>
+          ))}
+        </div>
       </Menu>
     </div>
   )

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
       )}
 
       {/*