@seamapi/react 0.25.0 → 0.26.1

package/src/lib/ui/DeviceDetails/DeviceDetails.tsx

@@ -7,7 +7,7 @@ import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
 import { isLockDevice } from 'lib/seam/devices/types.js'
 import { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
 import { AccessCodeTable } from 'lib/ui/AccessCodeTable/AccessCodeTable.js'
-import { type AlertProps } from 'lib/ui/Alert/Alert.js'
+import type { AlertProps } from 'lib/ui/Alert/Alert.js'
 import { Alerts } from 'lib/ui/Alert/Alerts.js'
 import { Button } from 'lib/ui/Button.js'
 import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
@@ -15,7 +15,7 @@ import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
 import { DeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import useToggle from 'lib/use-toggle.js'
+import { useToggle } from 'lib/use-toggle.js'
 
 export interface DeviceDetailsProps {
   deviceId: string
@@ -121,10 +121,7 @@ function LockDeviceDetails(props: { device: LockDevice; onBack?: () => void }) {
               </div>
             </div>
           </div>
-
-          {alerts.length > 0 && (
-            <Alerts alerts={alerts} className='seam-alerts-space-top' />
-          )}
+          <Alerts alerts={alerts} className='seam-alerts-space-top' />
         </div>
         <div className='seam-box'>
           <div

package/src/lib/ui/DeviceTable/DeviceRow.tsx

@@ -1,7 +1,7 @@
 import { isLockDevice } from 'lib/seam/devices/types.js'
-import {
-  type UseDevicesData,
-  type UseDevicesParams,
+import type {
+  UseDevicesData,
+  UseDevicesParams,
 } from 'lib/seam/devices/use-devices.js'
 import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
@@ -18,7 +18,7 @@ interface Props {
   onBack?: () => void
 }
 
-export interface DeviceRowProps {
+interface DeviceRowProps {
   device: UseDevicesData[number]
   onClick: () => void
 }
@@ -39,7 +39,7 @@ export function DeviceRow({
         <DeviceImage device={device} />
       </TableCell>
       <TableCell className='seam-body-cell'>
-        <Title>{device.properties.name}</Title>
+        <Title className='seam-truncated-text'>{device.properties.name}</Title>
         <div className='seam-bottom'>
           <span className='seam-device-model'>{deviceModel}</span>
           <div className='seam-device-statuses'>

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

@@ -1,6 +1,8 @@
 import classNames from 'classnames'
 import {
   createContext,
+  type MouseEvent,
+  type PropsWithChildren,
   useCallback,
   useContext,
   useEffect,
@@ -10,32 +12,34 @@ import {
 import { createPortal } from 'react-dom'
 
 export interface MenuProps {
-  children: JSX.Element | JSX.Element[]
   verticalOffset?: number
   horizontalOffset?: number
   edgeOffset?: number
-  button: (props: {
-    open: (event: React.MouseEvent<HTMLElement>) => void
-  }) => React.ReactElement
-  BackgroundProps?: Partial<{
+  renderButton: (props: {
+    onOpen: (event: MouseEvent<HTMLElement>) => void
+  }) => JSX.Element
+  backgroundProps?: Partial<{
     className?: string
   }>
 }
 
-interface MenuContextProps {
+interface MenuContextValue {
   close: () => void
 }
 
-const MenuContext = createContext<MenuContextProps | undefined>(undefined)
+const menuContext = createContext<MenuContextValue>({
+  close: () => {},
+})
 
-const Menu = ({
+export function Menu({
   verticalOffset = 5,
   horizontalOffset = 0,
   edgeOffset = 5,
   children,
-  button,
-  BackgroundProps,
-}: MenuProps) => {
+  renderButton,
+  backgroundProps,
+}: PropsWithChildren<MenuProps>) {
+  const { Provider } = menuContext
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
   const [documentEl, setDocumentEl] = useState<null | Element>(null)
   const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null)
@@ -43,7 +47,9 @@ const Menu = ({
   const [left, setLeft] = useState(0)
 
   useEffect(() => {
-    const containers = document.querySelectorAll('.seam-components')
+    const containers =
+      globalThis?.document?.querySelectorAll('.seam-components')
+    if (containers == null) return
     const el = containers[containers.length - 1]
     if (el != null) {
       setDocumentEl(el)
@@ -54,7 +60,7 @@ const Menu = ({
     setAnchorEl(null)
   }
 
-  const open = (event: React.MouseEvent<HTMLElement>) => {
+  const handleOpen = (event: MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget)
   }
 
@@ -80,16 +86,14 @@ const Menu = ({
     const right = left + contentWidth
     const bottom = top + contentHeight
 
-    // If the content would overflow right, we'll need to set it relative
-    // to the right of the container.
+    // If the content would overflow right, set it relative to the right of the container.
     const isOverflowingRight = right > containerRight
     const visibleLeft = isOverflowingRight
       ? containerRight - contentWidth - horizontalOffset - edgeOffset
       : left
     setLeft(visibleLeft)
 
-    // If the content would overflow bottom, we'll position it to be
-    // above the anchor.
+    // If the content would overflow bottom, position it above the anchor.
     const isOverFlowingBottom = bottom > containerBottom
     const visibleTop = isOverFlowingBottom
       ? anchorTop - contentHeight - verticalOffset
@@ -104,18 +108,17 @@ const Menu = ({
     edgeOffset,
   ])
 
-  const isOpen = Boolean(anchorEl)
-
   useLayoutEffect(() => {
     setPositions()
-    window.addEventListener('scroll', setPositions)
-    window.addEventListener('resize', setPositions)
+    globalThis?.addEventListener('scroll', setPositions)
+    globalThis?.addEventListener('resize', setPositions)
     return () => {
-      window.removeEventListener('scroll', setPositions)
-      window.removeEventListener('resize', setPositions)
+      globalThis?.removeEventListener('scroll', setPositions)
+      globalThis?.removeEventListener('resize', setPositions)
     }
   }, [setPositions])
 
+  const isOpen = anchorEl != null
   const hasSetPosition = top !== 0 && left !== 0
   const visible = isOpen && hasSetPosition
 
@@ -124,20 +127,20 @@ const Menu = ({
   }
 
   return (
-    <MenuContext.Provider
+    <Provider
       value={{
         close: handleClose,
       }}
     >
-      {button({ open })}
+      {renderButton({ onOpen: handleOpen })}
       {createPortal(
         <div
-          className={classNames('seam-menu-bg', BackgroundProps?.className)}
+          className={classNames('seam-menu-bg', backgroundProps?.className)}
           style={{
             display: visible ? 'flex' : 'none',
           }}
-          onClick={(e) => {
-            e.stopPropagation()
+          onClick={(event) => {
+            event.stopPropagation()
             handleClose()
           }}
         >
@@ -163,17 +166,14 @@ const Menu = ({
           {children}
         </div>
       </div>
-    </MenuContext.Provider>
+    </Provider>
   )
 }
 
 export function useMenu() {
-  const context = useContext(MenuContext)
-  if (context === undefined) {
+  const context = useContext(menuContext)
+  if (context == null) {
     throw new Error('useMenu must be used within a Menu.')
   }
-
   return context
 }
-
-export default Menu

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

@@ -1,13 +1,15 @@
-import type { ReactNode } from 'react'
+import type { PropsWithChildren } from 'react'
 
 import { useMenu } from 'lib/ui/Menu/Menu.js'
 
-export interface MenuItemProps {
-  children: ReactNode
+interface MenuItemProps {
   onClick: () => void
 }
 
-export function MenuItem({ children, onClick }: MenuItemProps) {
+export function MenuItem({
+  onClick,
+  children,
+}: PropsWithChildren<MenuItemProps>) {
   const { close: closeMenu } = useMenu()
 
   return (

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

@@ -1,25 +1,30 @@
+import type { PropsWithChildren } from 'react'
+
 import { DotsEllipsisMoreIcon } from 'lib/icons/DotsEllipsisMore.js'
 import { IconButton } from 'lib/ui/IconButton.js'
-import Menu, { type MenuProps } from 'lib/ui/Menu/Menu.js'
+import { Menu, type MenuProps } from 'lib/ui/Menu/Menu.js'
 
-export interface MoreActionsMenuProps {
-  children: JSX.Element | JSX.Element[]
-  MenuProps?: Partial<MenuProps>
+interface MoreActionsMenuProps {
+  menuProps?: Partial<MenuProps>
 }
-export function MoreActionsMenu({ children, MenuProps }: MoreActionsMenuProps) {
+
+export function MoreActionsMenu({
+  children,
+  menuProps,
+}: PropsWithChildren<MoreActionsMenuProps>) {
   return (
     <Menu
-      button={({ open }) => (
+      renderButton={({ onOpen }) => (
         <IconButton
-          onClick={(e) => {
-            e.stopPropagation()
-            open(e)
+          onClick={(event) => {
+            event.stopPropagation()
+            onOpen(event)
           }}
         >
           <DotsEllipsisMoreIcon />
         </IconButton>
       )}
-      {...MenuProps}
+      {...menuProps}
     >
       {children}
     </Menu>

package/src/lib/ui/SupportedDevices/SupportedDeviceRow.tsx

@@ -6,22 +6,8 @@ export interface SupportedDeviceRowProps {
   deviceModel: DeviceModel
 }
 
-export default function SupportedDeviceRow({
-  deviceModel,
-}: SupportedDeviceRowProps) {
-  function getColorFromSupportLevel() {
-    switch (deviceModel.support_level) {
-      case 'Live':
-        return 'green'
-      case 'Beta':
-        return 'blue'
-      case 'Unsupported':
-        return 'orange'
-      default:
-        return 'gray'
-    }
-  }
-
+export function SupportedDeviceRow({ deviceModel }: SupportedDeviceRowProps) {
+  const statusColor = supportLevelColors[deviceModel.support_level] ?? 'gray'
   return (
     <tr>
       <td>
@@ -33,10 +19,7 @@ export default function SupportedDeviceRow({
       <td>{deviceModel.connection_type}</td>
       <td>
         <div
-          className={classNames(
-            'seam-status-pill',
-            `status-${getColorFromSupportLevel()}`
-          )}
+          className={classNames('seam-status-pill', `status-${statusColor}`)}
         >
           <span>{deviceModel.support_level}</span>
         </div>
@@ -44,3 +27,9 @@ export default function SupportedDeviceRow({
     </tr>
   )
 }
+
+const supportLevelColors = {
+  Live: 'green',
+  Beta: 'blue',
+  Unsupported: 'orange',
+}

package/src/lib/ui/SupportedDevices/SupportedDevices.tsx

@@ -4,8 +4,8 @@ import axios from 'axios'
 import { Button } from 'lib/ui/Button.js'
 import type { DeviceModel } from 'lib/ui/SupportedDevices/types.js'
 
-import SupportedDeviceRow from './SupportedDeviceRow.js'
-import SupportedDevicesHeader from './SupportedDevicesHeader.js'
+import { SupportedDeviceRow } from './SupportedDeviceRow.js'
+import { SupportedDevicesHeader } from './SupportedDevicesHeader.js'
 
 export function SupportedDevices() {
   const { data, isLoading, isError, refetch } = useQuery<{

package/src/lib/ui/SupportedDevices/SupportedDevicesHeader.tsx

@@ -1,4 +1,4 @@
-export default function SupportedDevicesHeader() {
+export function SupportedDevicesHeader() {
   return (
     <thead>
       <tr>

package/src/lib/ui/Table/TableFilterBar/TableFilterBar.tsx

@@ -2,7 +2,7 @@ import { ArrowRestartIcon } from 'lib/icons/ArrowRestart.js'
 import { IconButton } from 'lib/ui/IconButton.js'
 import type { ButtonProps, DivProps } from 'lib/ui/types.js'
 
-export interface TableFiltersProps extends DivProps {
+interface TableFilterBarProps extends DivProps {
   isFilterCleared?: boolean
   onFilterClear?: () => void
 }
@@ -12,12 +12,14 @@ export function TableFilterBar({
   onFilterClear,
   children,
   ...props
-}: TableFiltersProps) {
+}: TableFilterBarProps) {
   const showClearFilterButton = isFilterCleared === false
   return (
     <div className='seam-table-filter-bar' {...props}>
       {children}{' '}
-      {showClearFilterButton && <ClearFiltersButton onClick={onFilterClear} />}
+      {showClearFilterButton ? (
+        <ClearFiltersButton onClick={onFilterClear} />
+      ) : null}
     </div>
   )
 }

package/src/lib/ui/Table/TableFilterBar/TableFilterItem.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames'
 
 import type { DivProps } from 'lib/ui/types.js'
 
-export interface TableFilterItemProps extends DivProps {
+interface TableFilterItemProps extends DivProps {
   selected?: boolean
 }
 
@@ -15,7 +15,7 @@ export function TableFilterItem({
     <div
       onClick={onClick}
       className={classNames('seam-table-filter-item', {
-        'seam-clickable': onClick !== undefined,
+        'seam-clickable': onClick != null,
         'seam-selected': selected,
       })}
       {...props}

package/src/lib/ui/TextField/TextField.tsx

@@ -21,6 +21,6 @@ export function TextField(props: TextFieldProps): JSX.Element {
 
 export const handleString =
   (setter: (v: string) => void) =>
-  (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
-    setter(e.currentTarget.value)
+  (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
+    setter(event.currentTarget.value)
   }

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

@@ -5,7 +5,7 @@ import { BatteryLevelFullIcon } from 'lib/icons/BatteryLevelFull.js'
 import { BatteryLevelHighIcon } from 'lib/icons/BatteryLevelHigh.js'
 import { BatteryLevelLowIcon } from 'lib/icons/BatteryLevelLow.js'
 
-export interface BatteryStatusProps {
+interface BatteryStatusProps {
   device: LockDevice
 }
 

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

@@ -3,7 +3,7 @@ import type { LockDevice } from 'seamapi'
 import { LockLockedIcon } from 'lib/icons/LockLocked.js'
 import { LockUnlockedIcon } from 'lib/icons/LockUnlocked.js'
 
-export interface LockStatusProps {
+interface LockStatusProps {
   device: LockDevice
 }
 

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

@@ -3,7 +3,7 @@ import type { LockDevice } from 'seamapi'
 import { OnlineStatusDeviceOfflineIcon } from 'lib/icons/OnlineStatusDeviceOffline.js'
 import { OnlineStatusOnlineIcon } from 'lib/icons/OnlineStatusOnline.js'
 
-export interface OnlineStatusProps {
+interface OnlineStatusProps {
   device: LockDevice
 }
 

package/src/lib/ui/types.ts

@@ -2,3 +2,4 @@ import type { HTMLAttributes, HtmlHTMLAttributes } from 'react'
 
 export type DivProps = HTMLAttributes<HTMLDivElement>
 export type ButtonProps = HtmlHTMLAttributes<HTMLButtonElement>
+export type SpanProps = HtmlHTMLAttributes<HTMLSpanElement>

package/src/lib/ui/typography/Title.tsx

@@ -1,5 +1,15 @@
-import type { PropsWithChildren } from 'react'
+import classNames from 'classnames'
 
-export function Title({ children }: PropsWithChildren): JSX.Element {
-  return <span className='seam-title'>{children}</span>
+import type { SpanProps } from 'lib/ui/types.js'
+
+export function Title({
+  children,
+  className,
+  ...props
+}: SpanProps): JSX.Element {
+  return (
+    <span className={classNames('seam-title', className)} {...props}>
+      {children}
+    </span>
+  )
 }

package/src/lib/use-toggle.ts

@@ -3,7 +3,9 @@ import { useCallback, useState } from 'react'
 /**
  * Simple util to quickly handle on/off states.
  */
-const useToggle = (initialState: boolean = false): [boolean, () => void] => {
+export const useToggle = (
+  initialState: boolean = false
+): [boolean, () => void] => {
   const [isTrue, setIsTrue] = useState(initialState)
 
   // use callback otherwise it would yield unexpected results in promises
@@ -14,5 +16,3 @@ const useToggle = (initialState: boolean = false): [boolean, () => void] => {
 
   return [isTrue, toggle]
 }
-
-export default useToggle

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

@@ -26,11 +26,22 @@
         justify-content: center;
         align-items: flex-start;
         gap: 2px;
+        overflow: hidden;
+
+        .seam-title {
+          max-width: 380px;
+        }
 
         .seam-code-details {
           font-size: 14px;
           line-height: 134%;
           color: colors.$text-gray-1;
+          display: flex;
+
+          .seam-device-name {
+            max-width: 190px;
+            width: auto;
+          }
 
           .seam-dot-divider {
             margin: 0 4px;

package/src/styles/_device-table.scss

@@ -21,6 +21,11 @@
         justify-content: center;
         align-items: flex-start;
         gap: 2px;
+        overflow: hidden;
+
+        .seam-title {
+          max-width: 380px;
+        }
 
         .seam-bottom {
           display: flex;

package/src/styles/_supported-devices.scss

@@ -55,7 +55,6 @@ $row-padding: 8px;
       }
     }
 
-    // stylelint-disable-next-line no-descending-specificity
     tr {
       th:first-of-type,
       td:first-of-type {

package/src/styles/_typography.scss

@@ -35,10 +35,21 @@
   }
 }
 
+@mixin truncated-text {
+  .seam-truncated-text {
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 @mixin all {
   @include headers;
   @include caption;
   @include danger-text;
   @include font-family;
   @include defaults;
+  @include truncated-text;
 }

package/lib/copy.d.ts

@@ -1 +0,0 @@
-export declare function copy(value: string): Promise<void>;

package/lib/copy.js

@@ -1,4 +0,0 @@
-export async function copy(value) {
-    await window.navigator.clipboard.writeText(value);
-}
-//# sourceMappingURL=copy.js.map

package/lib/copy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"copy.js","sourceRoot":"","sources":["../src/lib/copy.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,IAAI,CAAC,KAAa;IACtC,MAAM,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC"}

package/src/lib/copy.ts

@@ -1,3 +0,0 @@
-export async function copy(value: string) {
-  await window.navigator.clipboard.writeText(value)
-}