@seamapi/react 1.59.0 → 1.60.0

package/src/lib/telemetry/client.ts

@@ -127,15 +127,27 @@ export class TelemetryClient {
 
   get #context(): Context {
     return {
-      ...(this.#user?.traits == null ? {} : { traits: this.#user.traits }),
-      app: {
+      traits: this.#user?.traits ?? undefined,
+      locale: globalThis.navigator?.language ?? undefined,
+      timezone:
+        Intl?.DateTimeFormat()?.resolvedOptions()?.timeZone ?? undefined,
+      userAgent: globalThis.navigator?.userAgent ?? undefined,
+      screen: {
+        width: globalThis.screen?.width ?? undefined,
+        height: globalThis.screen?.height ?? undefined,
+        density:
+          globalThis.devicePixelRatio != null
+            ? Math.round(globalThis.devicePixelRatio * 100) / 100
+            : undefined,
+      },
+      library: {
         version: version ?? undefined,
         name:
           // Assume if one of the elements is defined then this is loaded inside a web component.
           // This method will be inaccurate if the element bundle is loaded alongside
           // an app using the React components, however this use case is unlikely.
           // Choose seam-device-details as this component is unlikely to ever be removed.
-          globalThis.customElements.get('seam-device-details') != null
+          globalThis.customElements?.get('seam-device-details') != null
             ? '@seamapi/react/elements'
             : '@seamapi/react',
       },
@@ -233,7 +245,16 @@ interface CommonSpec {
 // https://segment.com/docs/connections/spec/common/#context
 interface Context {
   traits?: Traits
-  app: {
+  locale?: string
+  timezone?: string
+  userAgent?: string
+  userAgentData?: string
+  screen: {
+    width?: number
+    height?: number
+    density?: number
+  }
+  library: {
     name: string
     version: string | undefined
   }

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

@@ -73,11 +73,10 @@ export function Menu({
     const { right: containerRight, bottom: containerBottom } =
       documentEl.getBoundingClientRect()
 
-    const {
-      top: anchorTop,
-      left: anchorLeft,
-      height: anchorHeight,
-    } = anchorEl.getBoundingClientRect()
+    const { height: anchorHeight } = anchorEl.getBoundingClientRect()
+
+    const anchorTop = anchorEl.offsetTop
+    const anchorLeft = anchorEl.offsetLeft
 
     const { width: contentWidth, height: contentHeight } =
       contentEl.getBoundingClientRect()

package/src/lib/ui/Spinner/Spinner.tsx

@@ -0,0 +1,9 @@
+import classNames from 'classnames'
+
+interface SpinnerProps {
+  size?: 'small' | 'medium' | 'large'
+}
+
+export function Spinner({ size = 'small' }: SpinnerProps): JSX.Element {
+  return <div className={classNames('seam-spinner', `size-${size}`)} />
+}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.59.0'
+const seamapiReactVersion = '1.60.0'
 
 export default seamapiReactVersion

package/src/styles/_main.scss

@@ -20,6 +20,7 @@
 @use './thermostat';
 @use './tooltip';
 @use './seam-table';
+@use './spinner';
 @use './switch';
 @use './climate-setting-schedule-form';
 @use './climate-setting-schedule-details';
@@ -42,6 +43,7 @@
   @include checkbox.all;
   @include radio-field.all;
   @include tooltip.all;
+  @include spinner.all;
   @include switch.all;
   @include timezone-picker.all;
 

package/src/styles/_spinner.scss

@@ -0,0 +1,44 @@
+@use './colors';
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@mixin all {
+  $default-size: 16px;
+  $default-border-width: 2px;
+
+  .seam-spinner {
+    width: $default-size;
+    height: $default-size;
+    border: $default-border-width solid colors.$primary;
+    border-top: $default-border-width solid colors.$white;
+    display: inline-block;
+    border-radius: 50%;
+    animation: spin 0.5s linear infinite;
+
+    &.size-small {
+      width: $default-size;
+      height: $default-size;
+      border-width: $default-border-width;
+    }
+
+    &.size-medium {
+      width: 24px;
+      height: 24px;
+      border-width: 3px;
+    }
+
+    &.size-large {
+      width: 32px;
+      height: 32px;
+      border-width: 3px;
+    }
+  }
+}