@seamapi/react 2.14.0 → 2.15.0

package/lib/icons/NoiseLevels.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function NoiseLevelsIcon(props) {
+    return (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 18, height: 19, fill: 'none', ...props, children: [_jsx("path", { fill: '#9DA1A9', fillRule: 'evenodd', d: 'M8.744 5.47q.046-.09.097-.18c.547-.966 1.534-1.77 3.412-1.77 1.016 0 1.76.259 2.302.638.546.381.934.916 1.186 1.537.516 1.273.415 2.81-.006 3.762-.362.816-.915 1.949-1.477 3.1-.464.952-.935 1.916-1.308 2.724-.603 1.303-1.939 1.383-2.55.842-.453-.401-.624-.87-.659-1.273-.018-.206 0-.389.034-.528.03-.127.062-.18.062-.18v.002l-.002.001a.767.767 0 0 0-.88-1.203 9.5 9.5 0 0 1-.745 1.489q-.021.264.002.55a3.43 3.43 0 0 0 1.171 2.291c1.467 1.298 3.974.783 4.96-1.346.338-.732.8-1.68 1.264-2.634.583-1.196 1.171-2.403 1.53-3.213.587-1.324.701-3.294.026-4.96-.343-.848-.901-1.64-1.73-2.22-.831-.58-1.89-.914-3.18-.914-2.106 0-3.509.827-4.378 1.983q.501.708.869 1.502M9.93 6.752c.298-.952 1.163-1.623 2.3-1.592.893.024 1.514.445 1.88.967.333.474.469 1.054.402 1.484a.767.767 0 0 1-1.517-.227v-.003a.5.5 0 0 0-.02-.11.8.8 0 0 0-.12-.263c-.106-.149-.289-.304-.666-.314-.45-.012-.701.219-.795.516-.1.32-.043.834.444 1.337.513.53.69 1.182.638 1.75-.046.5-.304 1.138-.898 1.382a.767.767 0 0 1-.665-1.38.4.4 0 0 0 .034-.14.69.69 0 0 0-.211-.544c-.822-.849-1.098-1.933-.806-2.863m.969 3.572.002-.003z', clipRule: 'evenodd' }), _jsx("path", { fill: '#27AE60', d: 'm1.191 8.702-.816.974.844 1.007a1.312 1.312 0 0 0-.028-1.98M2.173 11.82l1.041 1.242a4.4 4.4 0 0 0 1.577-3.383c0-1.36-.614-2.575-1.58-3.385L2.17 7.536A2.79 2.79 0 0 1 3.17 9.679c0 .86-.387 1.628-.997 2.14' }), _jsx("path", { fill: '#27AE60', d: 'm4.154 14.183 1.042 1.242a7.48 7.48 0 0 0 2.679-5.746 7.48 7.48 0 0 0-2.683-5.748L4.151 5.173a5.87 5.87 0 0 1 2.103 4.506 5.87 5.87 0 0 1-2.1 4.503' })] }));
+}
+//# sourceMappingURL=NoiseLevels.js.map

package/lib/icons/NoiseLevels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoiseLevels.js","sourceRoot":"","sources":["../../src/lib/icons/NoiseLevels.tsx"],"names":[],"mappings":";AAKA,MAAM,UAAU,eAAe,CAAC,KAA8B;IAC5D,OAAO,CACL,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,MAAM,KACP,KAAK,aAET,eACE,IAAI,EAAC,SAAS,EACd,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,gkCAAgkC,EAClkC,QAAQ,EAAC,SAAS,GAClB,EACF,eACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,6MAA6M,GAC/M,EACF,eACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,qJAAqJ,GACvJ,IACE,CACP,CAAA;AACH,CAAC"}

package/lib/seam/components/DeviceDetails/DeviceDetails.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isLockDevice, isThermostatDevice } from 'seamapi';
+import { isLockDevice, isNoiseSensorDevice, isThermostatDevice } from 'seamapi';
 import { withRequiredCommonProps, } from '../../../../lib/seam/components/common-props.js';
 import { LockDeviceDetails } from '../../../../lib/seam/components/DeviceDetails/LockDeviceDetails.js';
+import { NoiseSensorDeviceDetails } from '../../../../lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.js';
 import { ThermostatDeviceDetails } from '../../../../lib/seam/components/DeviceDetails/ThermostatDeviceDetails.js';
 import { useDevice } from '../../../../lib/seam/devices/use-device.js';
 import { useComponentTelemetry } from '../../../../lib/telemetry/index.js';
@@ -33,6 +34,9 @@ export function DeviceDetails({ deviceId, errorFilter = () => true, warningFilte
     if (isThermostatDevice(device)) {
         return _jsx(ThermostatDeviceDetails, { device: device, ...props });
     }
+    if (isNoiseSensorDevice(device)) {
+        return _jsx(NoiseSensorDeviceDetails, { device: device, ...props });
+    }
     return null;
 }
 //# sourceMappingURL=DeviceDetails.js.map

package/lib/seam/components/DeviceDetails/DeviceDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceDetails.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/DeviceDetails/DeviceDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAE1D,OAAO,EAEL,uBAAuB,GACxB,MAAM,qCAAqC,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAA;AAC1F,OAAO,EAAE,uBAAuB,EAAE,MAAM,8DAA8D,CAAA;AACtG,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAA;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAM9D,MAAM,CAAC,MAAM,mBAAmB,GAAG,uBAAuB,CAAC,aAAa,CAAC,CAAA;AAQzE,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,WAAW,GAAG,GAAG,EAAE,CAAC,IAAI,EACxB,aAAa,GAAG,GAAG,EAAE,CAAC,IAAI,EAC1B,iBAAiB,GAAG,KAAK,EACzB,uBAAuB,GAAG,KAAK,EAC/B,kBAAkB,GAAG,KAAK,EAC1B,kCAAkC,GAAG,KAAK,EAC1C,uBAAuB,GAAG,KAAK,EAC/B,qBAAqB,GAAG,KAAK,EAC7B,8BAA8B,GAAG,KAAK,EACtC,MAAM,EACN,SAAS,GACU;IACnB,qBAAqB,CAAC,eAAe,CAAC,CAAA;IAEtC,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;QAC3B,SAAS,EAAE,QAAQ;KACpB,CAAC,CAAA;IAEF,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;QACnB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,KAAK,GAAqC;QAC9C,WAAW;QACX,aAAa;QACb,iBAAiB;QACjB,uBAAuB;QACvB,kBAAkB;QAClB,kCAAkC;QAClC,uBAAuB;QACvB,qBAAqB;QACrB,8BAA8B;QAC9B,MAAM;QACN,SAAS;KACV,CAAA;IAED,IAAI,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;QACzB,OAAO,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,KAAM,KAAK,GAAI,CAAA;IACzD,CAAC;IAED,IAAI,kBAAkB,CAAC,MAAM,CAAC,EAAE,CAAC;QAC/B,OAAO,KAAC,uBAAuB,IAAC,MAAM,EAAE,MAAM,KAAM,KAAK,GAAI,CAAA;IAC/D,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC"}
+{"version":3,"file":"DeviceDetails.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/DeviceDetails/DeviceDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAE/E,OAAO,EAEL,uBAAuB,GACxB,MAAM,qCAAqC,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAA;AAC1F,OAAO,EAAE,wBAAwB,EAAE,MAAM,+DAA+D,CAAA;AACxG,OAAO,EAAE,uBAAuB,EAAE,MAAM,8DAA8D,CAAA;AACtG,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAA;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAM9D,MAAM,CAAC,MAAM,mBAAmB,GAAG,uBAAuB,CAAC,aAAa,CAAC,CAAA;AAQzE,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,WAAW,GAAG,GAAG,EAAE,CAAC,IAAI,EACxB,aAAa,GAAG,GAAG,EAAE,CAAC,IAAI,EAC1B,iBAAiB,GAAG,KAAK,EACzB,uBAAuB,GAAG,KAAK,EAC/B,kBAAkB,GAAG,KAAK,EAC1B,kCAAkC,GAAG,KAAK,EAC1C,uBAAuB,GAAG,KAAK,EAC/B,qBAAqB,GAAG,KAAK,EAC7B,8BAA8B,GAAG,KAAK,EACtC,MAAM,EACN,SAAS,GACU;IACnB,qBAAqB,CAAC,eAAe,CAAC,CAAA;IAEtC,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;QAC3B,SAAS,EAAE,QAAQ;KACpB,CAAC,CAAA;IAEF,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;QACnB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,KAAK,GAAqC;QAC9C,WAAW;QACX,aAAa;QACb,iBAAiB;QACjB,uBAAuB;QACvB,kBAAkB;QAClB,kCAAkC;QAClC,uBAAuB;QACvB,qBAAqB;QACrB,8BAA8B;QAC9B,MAAM;QACN,SAAS;KACV,CAAA;IAED,IAAI,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;QACzB,OAAO,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,KAAM,KAAK,GAAI,CAAA;IACzD,CAAC;IAED,IAAI,kBAAkB,CAAC,MAAM,CAAC,EAAE,CAAC;QAC/B,OAAO,KAAC,uBAAuB,IAAC,MAAM,EAAE,MAAM,KAAM,KAAK,GAAI,CAAA;IAC/D,CAAC;IAED,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE,CAAC;QAChC,OAAO,KAAC,wBAAwB,IAAC,MAAM,EAAE,MAAM,KAAM,KAAK,GAAI,CAAA;IAChE,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC"}

package/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { NoiseSensorDevice } from 'seamapi';
+import type { NestedSpecificDeviceDetailsProps } from '../../../../lib/seam/components/DeviceDetails/DeviceDetails.js';
+interface NoiseSensorDeviceDetailsProps extends NestedSpecificDeviceDetailsProps {
+    device: NoiseSensorDevice;
+}
+export declare function NoiseSensorDeviceDetails({ device, disableConnectedAccountInformation, disableResourceIds, }: NoiseSensorDeviceDetailsProps): JSX.Element | null;
+export {};

package/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DeviceInfo } from '../../../../lib/seam/components/DeviceDetails/DeviceInfo.js';
+import { DeviceModel } from '../../../../lib/seam/components/DeviceDetails/DeviceModel.js';
+import { DeviceImage } from '../../../../lib/ui/device/DeviceImage.js';
+import { OnlineStatus } from '../../../../lib/ui/device/OnlineStatus.js';
+import { NoiseThresholdsList } from '../../../../lib/ui/noise-sensor/NoiseThresholdsList.js';
+export function NoiseSensorDeviceDetails({ device, disableConnectedAccountInformation, disableResourceIds, }) {
+    return (_jsx("div", { className: 'seam-device-details', children: _jsxs("div", { className: 'seam-body', children: [_jsx("div", { className: 'seam-summary', children: _jsxs("div", { className: 'seam-content', children: [_jsx("div", { className: 'seam-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-info', children: [_jsx("span", { className: 'seam-label', children: t.noiseSensor }), _jsx("h4", { className: 'seam-device-name', children: device.properties.name }), _jsxs("div", { className: 'seam-properties', children: [_jsxs("span", { className: 'seam-label', children: [t.status, ":"] }), ' ', _jsx(OnlineStatus, { device: device }), _jsx(DeviceModel, { device: device })] })] })] }) }), _jsx(NoiseThresholdsList, { device: device }), _jsx(DeviceInfo, { device: device, disableConnectedAccountInformation: disableConnectedAccountInformation, disableResourceIds: disableResourceIds })] }) }));
+}
+const t = {
+    noiseSensor: 'Noise Sensor',
+    status: 'Status',
+    noiseLevel: 'Noise level',
+};
+//# sourceMappingURL=NoiseSensorDeviceDetails.js.map

package/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoiseSensorDeviceDetails.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,iDAAiD,CAAA;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,kDAAkD,CAAA;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAA;AAOhF,MAAM,UAAU,wBAAwB,CAAC,EACvC,MAAM,EACN,kCAAkC,EAClC,kBAAkB,GACY;IAC9B,OAAO,CACL,cAAK,SAAS,EAAC,qBAAqB,YAClC,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,cAAc,YAC3B,eAAK,SAAS,EAAC,cAAc,aAC3B,cAAK,SAAS,EAAC,YAAY,YACzB,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,GAAI,GAC3B,EACN,eAAK,SAAS,EAAC,WAAW,aACxB,eAAM,SAAS,EAAC,YAAY,YAAE,CAAC,CAAC,WAAW,GAAQ,EACnD,aAAI,SAAS,EAAC,kBAAkB,YAAE,MAAM,CAAC,UAAU,CAAC,IAAI,GAAM,EAC9D,eAAK,SAAS,EAAC,iBAAiB,aAC9B,gBAAM,SAAS,EAAC,YAAY,aAAE,CAAC,CAAC,MAAM,SAAS,EAAC,GAAG,EACnD,KAAC,YAAY,IAAC,MAAM,EAAE,MAAM,GAAI,EAChC,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,GAAI,IAC3B,IACF,IACF,GACF,EAEN,KAAC,mBAAmB,IAAC,MAAM,EAAE,MAAM,GAAI,EAEvC,KAAC,UAAU,IACT,MAAM,EAAE,MAAM,EACd,kCAAkC,EAChC,kCAAkC,EAEpC,kBAAkB,EAAE,kBAAkB,GACtC,IACE,GACF,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,WAAW,EAAE,cAAc;IAC3B,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,aAAa;CAC1B,CAAA"}

package/lib/seam/noise-sensors/use-noise-thresholds.d.ts

@@ -0,0 +1,5 @@
+import type { NoiseThresholds, NoiseThresholdsListRequest } from 'seamapi';
+import type { UseSeamQueryResult } from '../../../lib/seam/use-seam-query-result.js';
+export type UseNoiseThresholdsParams = NoiseThresholdsListRequest;
+export type UseNoiseThresholdsData = NoiseThresholds[];
+export declare function useNoiseThresholds(params: UseNoiseThresholdsParams): UseSeamQueryResult<'noiseThresholds', UseNoiseThresholdsData>;

package/lib/seam/noise-sensors/use-noise-thresholds.js

@@ -0,0 +1,26 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useSeamClient } from '../../../lib/seam/use-seam-client.js';
+export function useNoiseThresholds(params) {
+    const { client } = useSeamClient();
+    const queryClient = useQueryClient();
+    const { data, ...rest } = useQuery({
+        enabled: client != null,
+        queryKey: ['noise_thresholds', 'list', params],
+        queryFn: async () => {
+            if (client == null)
+                return [];
+            return await client.noiseThresholds.list(params);
+        },
+        onSuccess: (noiseThresholds) => {
+            for (const noiseThreshold of noiseThresholds) {
+                queryClient.setQueryData([
+                    'noise_thresholds',
+                    'get',
+                    { noise_threshold_id: noiseThreshold.noise_threshold_id },
+                ], noiseThreshold);
+            }
+        },
+    });
+    return { ...rest, noiseThresholds: data };
+}
+//# sourceMappingURL=use-noise-thresholds.js.map

package/lib/seam/noise-sensors/use-noise-thresholds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-noise-thresholds.js","sourceRoot":"","sources":["../../../src/lib/seam/noise-sensors/use-noise-thresholds.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAQhE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAM3D,MAAM,UAAU,kBAAkB,CAChC,MAAgC;IAEhC,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IAEpC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAGhC;QACA,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,kBAAkB,EAAE,MAAM,EAAE,MAAM,CAAC;QAC9C,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,EAAE,CAAA;YAC7B,OAAO,MAAM,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAClD,CAAC;QACD,SAAS,EAAE,CAAC,eAAe,EAAE,EAAE;YAC7B,KAAK,MAAM,cAAc,IAAI,eAAe,EAAE,CAAC;gBAC7C,WAAW,CAAC,YAAY,CACtB;oBACE,kBAAkB;oBAClB,KAAK;oBACL,EAAE,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,EAAE;iBAC1D,EACD,cAAc,CACf,CAAA;YACH,CAAC;QACH,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,EAAE,GAAG,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,CAAA;AAC3C,CAAC"}

package/lib/ui/layout/DetailRow.d.ts

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 interface DetailRowProps {
-    label: string;
+    label: JSX.Element | string;
     sublabel?: string;
     onClick?: () => void;
 }

package/lib/ui/layout/DetailSection.d.ts

@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react';
 interface DetailSectionProps {
     label?: string;
-    tooltipContent?: string;
+    tooltipContent?: JSX.Element | string;
 }
 export declare function DetailSection({ label, tooltipContent, children, }: PropsWithChildren<DetailSectionProps>): JSX.Element;
 export {};

package/lib/ui/noise-sensor/NoiseThresholdsList.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { NoiseSensorDevice } from 'seamapi';
+interface NoiseThresholdsListProps {
+    device: NoiseSensorDevice;
+}
+export declare function NoiseThresholdsList({ device, }: NoiseThresholdsListProps): JSX.Element;
+export {};

package/lib/ui/noise-sensor/NoiseThresholdsList.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ZonedTime } from 'zoned-time';
+import { formatTime, formatTimeZone } from '../../../lib/dates.js';
+import { ArrowRightIcon } from '../../../lib/icons/ArrowRight.js';
+import { useNoiseThresholds } from '../../../lib/seam/noise-sensors/use-noise-thresholds.js';
+import { DetailRow } from '../../../lib/ui/layout/DetailRow.js';
+import { DetailSection } from '../../../lib/ui/layout/DetailSection.js';
+import { DetailSectionGroup } from '../../../lib/ui/layout/DetailSectionGroup.js';
+export function NoiseThresholdsList({ device, }) {
+    const { noiseThresholds, isInitialLoading } = useNoiseThresholds({
+        device_id: device.device_id,
+    });
+    return (_jsx(DetailSectionGroup, { children: _jsxs("div", { className: 'seam-detail-section-wrap', children: [_jsx(DetailSection, { label: t.noiseThresholds, tooltipContent: device.device_type === 'minut_sensor' ? (_jsxs("div", { className: 'seam-detail-section-tooltip-inner-content', children: [_jsx("span", { className: 'seam-tooltip-content', children: t.minutTooltipFirst }), _jsx("span", { className: 'seam-tooltip-content', children: t.minutTooltipSecond })] })) : (t.tooltip), children: _jsx(Content, { isInitialLoading: isInitialLoading, noiseThresholds: noiseThresholds }) }), _jsxs("div", { className: 'seam-detail-section-footer', children: [_jsx("div", { className: 'seam-empty-div' }), _jsx("div", { className: 'seam-detail-section-footer-content', children: _jsx("div", { className: 'seam-detail-section-footer-content-text', children: _jsx("p", { children: getTimeZoneCaption(device, noiseThresholds) }) }) })] })] }) }));
+}
+function Content({ isInitialLoading, noiseThresholds, }) {
+    if (isInitialLoading) {
+        return (_jsx(DetailRow, { label: _jsx("span", { className: 'seam-detail-row-empty-label', children: t.loading }) }));
+    }
+    if (noiseThresholds == null || noiseThresholds.length === 0) {
+        return (_jsx(DetailRow, { label: _jsx("span", { className: 'seam-detail-row-empty-label', children: t.none }) }));
+    }
+    return noiseThresholds?.map((noiseThreshold) => (_jsx(DetailRow, { label: _jsxs("div", { className: 'seam-detail-row-label-column', children: [noiseThreshold.name !== '' && (_jsx("span", { className: 'seam-detail-row-label', children: noiseThreshold.name })), _jsxs("div", { className: 'seam-detail-row-label-block', children: [_jsx("span", { className: 'seam-row-sublabel seam-row-sublabel-text-default', children: formatTime(noiseThreshold.starts_daily_at) }), _jsx(ArrowRightIcon, {}), _jsx("span", { className: 'seam-row-sublabel seam-row-sublabel-text-default', children: formatTime(noiseThreshold.ends_daily_at) })] })] }), children: _jsxs("p", { children: [noiseThreshold.noise_threshold_decibels, " ", t.decibel] }) }, noiseThreshold.noise_threshold_id)));
+}
+const getTimeZoneCaption = (device, thresholds) => {
+    if (device.location?.timezone != null) {
+        return `${t.allTimesIn} ${formatTimeZone(device.location.timezone)}`;
+    }
+    const firstThreshold = thresholds?.[0];
+    if (firstThreshold != null) {
+        const zonedTime = ZonedTime.from(firstThreshold.starts_daily_at);
+        return `${t.allTimesIn} ${formatTimeZone(zonedTime.timeZone)}`;
+    }
+    return null;
+};
+const t = {
+    noiseThresholds: 'Noise thresholds',
+    tooltip: 'A noise threshold is the highest noise level (in dB) you want to allow for a given time range in the day.',
+    minutTooltipFirst: 'A noise threshold is the highest noise level (in dB) you want to allow.',
+    minutTooltipSecond: 'Quiet hours is a separate threshold that takes effect only for a specified time range.',
+    none: 'None',
+    loading: 'Loading...',
+    decibel: 'dB',
+    allTimesIn: 'All times in',
+};
+//# sourceMappingURL=NoiseThresholdsList.js.map

package/lib/ui/noise-sensor/NoiseThresholdsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoiseThresholdsList.js","sourceRoot":"","sources":["../../../src/lib/ui/noise-sensor/NoiseThresholdsList.tsx"],"names":[],"mappings":"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"}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const seamapiReactVersion = "2.14.0";
+declare const seamapiReactVersion = "2.15.0";
 export default seamapiReactVersion;

package/lib/version.js

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.14.0';
+const seamapiReactVersion = '2.15.0';
 export default seamapiReactVersion;
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",
@@ -133,7 +133,8 @@
     "queue": "^7.0.0",
     "react-hook-form": "^7.46.1",
     "seamapi": "^8.22.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "zoned-time": "^1.1.2"
   },
   "devDependencies": {
     "@emotion/styled": "^11.10.6",

package/src/lib/dates.ts

@@ -23,6 +23,11 @@ export const formatTimeZone = (timeZone: string): string => {
   return `${timeZone.replaceAll('_', ' ')} (${offset})`
 }
 
+export const formatTime = (time: string): string => {
+  const dateTime = DateTime.fromISO(time)
+  return dateTime.isValid ? dateTime.toLocaleString(DateTime.TIME_SIMPLE) : ''
+}
+
 export const serializeDateTimePickerValue = (
   dateTime: DateTime,
   timeZone: string

package/src/lib/icons/NoiseLevels.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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 NoiseLevelsIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={18}
+      height={19}
+      fill='none'
+      {...props}
+    >
+      <path
+        fill='#9DA1A9'
+        fillRule='evenodd'
+        d='M8.744 5.47q.046-.09.097-.18c.547-.966 1.534-1.77 3.412-1.77 1.016 0 1.76.259 2.302.638.546.381.934.916 1.186 1.537.516 1.273.415 2.81-.006 3.762-.362.816-.915 1.949-1.477 3.1-.464.952-.935 1.916-1.308 2.724-.603 1.303-1.939 1.383-2.55.842-.453-.401-.624-.87-.659-1.273-.018-.206 0-.389.034-.528.03-.127.062-.18.062-.18v.002l-.002.001a.767.767 0 0 0-.88-1.203 9.5 9.5 0 0 1-.745 1.489q-.021.264.002.55a3.43 3.43 0 0 0 1.171 2.291c1.467 1.298 3.974.783 4.96-1.346.338-.732.8-1.68 1.264-2.634.583-1.196 1.171-2.403 1.53-3.213.587-1.324.701-3.294.026-4.96-.343-.848-.901-1.64-1.73-2.22-.831-.58-1.89-.914-3.18-.914-2.106 0-3.509.827-4.378 1.983q.501.708.869 1.502M9.93 6.752c.298-.952 1.163-1.623 2.3-1.592.893.024 1.514.445 1.88.967.333.474.469 1.054.402 1.484a.767.767 0 0 1-1.517-.227v-.003a.5.5 0 0 0-.02-.11.8.8 0 0 0-.12-.263c-.106-.149-.289-.304-.666-.314-.45-.012-.701.219-.795.516-.1.32-.043.834.444 1.337.513.53.69 1.182.638 1.75-.046.5-.304 1.138-.898 1.382a.767.767 0 0 1-.665-1.38.4.4 0 0 0 .034-.14.69.69 0 0 0-.211-.544c-.822-.849-1.098-1.933-.806-2.863m.969 3.572.002-.003z'
+        clipRule='evenodd'
+      />
+      <path
+        fill='#27AE60'
+        d='m1.191 8.702-.816.974.844 1.007a1.312 1.312 0 0 0-.028-1.98M2.173 11.82l1.041 1.242a4.4 4.4 0 0 0 1.577-3.383c0-1.36-.614-2.575-1.58-3.385L2.17 7.536A2.79 2.79 0 0 1 3.17 9.679c0 .86-.387 1.628-.997 2.14'
+      />
+      <path
+        fill='#27AE60'
+        d='m4.154 14.183 1.042 1.242a7.48 7.48 0 0 0 2.679-5.746 7.48 7.48 0 0 0-2.683-5.748L4.151 5.173a5.87 5.87 0 0 1 2.103 4.506 5.87 5.87 0 0 1-2.1 4.503'
+      />
+    </svg>
+  )
+}

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

@@ -1,10 +1,11 @@
-import { isLockDevice, isThermostatDevice } from 'seamapi'
+import { isLockDevice, isNoiseSensorDevice, isThermostatDevice } from 'seamapi'
 
 import {
   type CommonProps,
   withRequiredCommonProps,
 } from 'lib/seam/components/common-props.js'
 import { LockDeviceDetails } from 'lib/seam/components/DeviceDetails/LockDeviceDetails.js'
+import { NoiseSensorDeviceDetails } from 'lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.js'
 import { ThermostatDeviceDetails } from 'lib/seam/components/DeviceDetails/ThermostatDeviceDetails.js'
 import { useDevice } from 'lib/seam/devices/use-device.js'
 import { useComponentTelemetry } from 'lib/telemetry/index.js'
@@ -67,5 +68,9 @@ export function DeviceDetails({
     return <ThermostatDeviceDetails device={device} {...props} />
   }
 
+  if (isNoiseSensorDevice(device)) {
+    return <NoiseSensorDeviceDetails device={device} {...props} />
+  }
+
   return null
 }

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

@@ -0,0 +1,58 @@
+import type { NoiseSensorDevice } from 'seamapi'
+
+import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
+import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
+import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
+import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
+import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
+import { NoiseThresholdsList } from 'lib/ui/noise-sensor/NoiseThresholdsList.js'
+
+interface NoiseSensorDeviceDetailsProps
+  extends NestedSpecificDeviceDetailsProps {
+  device: NoiseSensorDevice
+}
+
+export function NoiseSensorDeviceDetails({
+  device,
+  disableConnectedAccountInformation,
+  disableResourceIds,
+}: NoiseSensorDeviceDetailsProps): JSX.Element | null {
+  return (
+    <div className='seam-device-details'>
+      <div className='seam-body'>
+        <div className='seam-summary'>
+          <div className='seam-content'>
+            <div className='seam-image'>
+              <DeviceImage device={device} />
+            </div>
+            <div className='seam-info'>
+              <span className='seam-label'>{t.noiseSensor}</span>
+              <h4 className='seam-device-name'>{device.properties.name}</h4>
+              <div className='seam-properties'>
+                <span className='seam-label'>{t.status}:</span>{' '}
+                <OnlineStatus device={device} />
+                <DeviceModel device={device} />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <NoiseThresholdsList device={device} />
+
+        <DeviceInfo
+          device={device}
+          disableConnectedAccountInformation={
+            disableConnectedAccountInformation
+          }
+          disableResourceIds={disableResourceIds}
+        />
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  noiseSensor: 'Noise Sensor',
+  status: 'Status',
+  noiseLevel: 'Noise level',
+}

package/src/lib/seam/noise-sensors/use-noise-thresholds.ts

@@ -0,0 +1,46 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import type {
+  NoiseThresholds,
+  NoiseThresholdsListRequest,
+  NoiseThresholdsListResponse,
+  SeamError,
+} from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+
+export type UseNoiseThresholdsParams = NoiseThresholdsListRequest
+export type UseNoiseThresholdsData = NoiseThresholds[]
+
+export function useNoiseThresholds(
+  params: UseNoiseThresholdsParams
+): UseSeamQueryResult<'noiseThresholds', UseNoiseThresholdsData> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  const { data, ...rest } = useQuery<
+    NoiseThresholdsListResponse['noise_thresholds'],
+    SeamError
+  >({
+    enabled: client != null,
+    queryKey: ['noise_thresholds', 'list', params],
+    queryFn: async () => {
+      if (client == null) return []
+      return await client.noiseThresholds.list(params)
+    },
+    onSuccess: (noiseThresholds) => {
+      for (const noiseThreshold of noiseThresholds) {
+        queryClient.setQueryData(
+          [
+            'noise_thresholds',
+            'get',
+            { noise_threshold_id: noiseThreshold.noise_threshold_id },
+          ],
+          noiseThreshold
+        )
+      }
+    },
+  })
+
+  return { ...rest, noiseThresholds: data }
+}

package/src/lib/ui/layout/DetailRow.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames'
 import type { PropsWithChildren } from 'react'
 
 interface DetailRowProps {
-  label: string
+  label: JSX.Element | string
   sublabel?: string
   onClick?: () => void
 }

package/src/lib/ui/layout/DetailSection.tsx

@@ -4,7 +4,7 @@ import { Tooltip } from 'lib/ui/Tooltip/Tooltip.js'
 
 interface DetailSectionProps {
   label?: string
-  tooltipContent?: string
+  tooltipContent?: JSX.Element | string
 }
 
 export function DetailSection({

package/src/lib/ui/noise-sensor/NoiseThresholdsList.tsx

@@ -0,0 +1,141 @@
+import type { NoiseSensorDevice, NoiseThresholds } from 'seamapi'
+import { ZonedTime } from 'zoned-time'
+
+import { formatTime, formatTimeZone } from 'lib/dates.js'
+import { ArrowRightIcon } from 'lib/icons/ArrowRight.js'
+import { useNoiseThresholds } from 'lib/seam/noise-sensors/use-noise-thresholds.js'
+import { DetailRow } from 'lib/ui/layout/DetailRow.js'
+import { DetailSection } from 'lib/ui/layout/DetailSection.js'
+import { DetailSectionGroup } from 'lib/ui/layout/DetailSectionGroup.js'
+
+interface NoiseThresholdsListProps {
+  device: NoiseSensorDevice
+}
+
+export function NoiseThresholdsList({
+  device,
+}: NoiseThresholdsListProps): JSX.Element {
+  const { noiseThresholds, isInitialLoading } = useNoiseThresholds({
+    device_id: device.device_id,
+  })
+
+  return (
+    <DetailSectionGroup>
+      <div className='seam-detail-section-wrap'>
+        <DetailSection
+          label={t.noiseThresholds}
+          tooltipContent={
+            device.device_type === 'minut_sensor' ? (
+              <div className='seam-detail-section-tooltip-inner-content'>
+                <span className='seam-tooltip-content'>
+                  {t.minutTooltipFirst}
+                </span>
+                <span className='seam-tooltip-content'>
+                  {t.minutTooltipSecond}
+                </span>
+              </div>
+            ) : (
+              t.tooltip
+            )
+          }
+        >
+          <Content
+            isInitialLoading={isInitialLoading}
+            noiseThresholds={noiseThresholds}
+          />
+        </DetailSection>
+
+        <div className='seam-detail-section-footer'>
+          <div className='seam-empty-div' />
+          <div className='seam-detail-section-footer-content'>
+            <div className='seam-detail-section-footer-content-text'>
+              <p>{getTimeZoneCaption(device, noiseThresholds)}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DetailSectionGroup>
+  )
+}
+
+function Content({
+  isInitialLoading,
+  noiseThresholds,
+}: {
+  isInitialLoading: boolean
+  noiseThresholds: NoiseThresholds[] | undefined
+}): JSX.Element | JSX.Element[] {
+  if (isInitialLoading) {
+    return (
+      <DetailRow
+        label={<span className='seam-detail-row-empty-label'>{t.loading}</span>}
+      />
+    )
+  }
+
+  if (noiseThresholds == null || noiseThresholds.length === 0) {
+    return (
+      <DetailRow
+        label={<span className='seam-detail-row-empty-label'>{t.none}</span>}
+      />
+    )
+  }
+
+  return noiseThresholds?.map((noiseThreshold) => (
+    <DetailRow
+      key={noiseThreshold.noise_threshold_id}
+      label={
+        <div className='seam-detail-row-label-column'>
+          {noiseThreshold.name !== '' && (
+            <span className='seam-detail-row-label'>{noiseThreshold.name}</span>
+          )}
+          <div className='seam-detail-row-label-block'>
+            <span className='seam-row-sublabel seam-row-sublabel-text-default'>
+              {formatTime(noiseThreshold.starts_daily_at)}
+            </span>
+            <ArrowRightIcon />
+            <span className='seam-row-sublabel seam-row-sublabel-text-default'>
+              {formatTime(noiseThreshold.ends_daily_at)}
+            </span>
+          </div>
+        </div>
+      }
+    >
+      <p>
+        {noiseThreshold.noise_threshold_decibels} {t.decibel}
+      </p>
+    </DetailRow>
+  ))
+}
+
+const getTimeZoneCaption = (
+  device: NoiseSensorDevice,
+  thresholds: NoiseThresholds[] | undefined
+): string | null => {
+  if (device.location?.timezone != null) {
+    return `${t.allTimesIn} ${formatTimeZone(device.location.timezone)}`
+  }
+
+  const firstThreshold = thresholds?.[0]
+
+  if (firstThreshold != null) {
+    const zonedTime = ZonedTime.from(firstThreshold.starts_daily_at)
+    return `${t.allTimesIn} ${formatTimeZone(zonedTime.timeZone)}`
+  }
+
+  return null
+}
+
+const t = {
+  noiseThresholds: 'Noise thresholds',
+  tooltip:
+    'A noise threshold is the highest noise level (in dB) you want to allow for a given time range in the day.',
+  minutTooltipFirst:
+    'A noise threshold is the highest noise level (in dB) you want to allow.',
+  minutTooltipSecond:
+    'Quiet hours is a separate threshold that takes effect only for a specified time range.',
+  none: 'None',
+  loading: 'Loading...',
+  decibel: 'dB',
+  allTimesIn: 'All times in',
+}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.14.0'
+const seamapiReactVersion = '2.15.0'
 
 export default seamapiReactVersion

package/src/styles/_device-details.scss

@@ -103,6 +103,7 @@
 
               .seam-label {
                 color: colors.$text-gray-2;
+                white-space: nowrap;
               }
 
               .seam-status-text {