@instantdb/react - npm Package Compare versions

Comparing version 0.10.5 to 0.10.6

dist/Cursors.d.ts

 import { ReactNode } from "react";
 import { InstantReactRoom } from "./InstantReact";
 import { RoomSchemaShape } from "@instantdb/core";
-export declare function Cursors<RoomSchema extends RoomSchemaShape, RoomType extends keyof RoomSchema>({ as, spaceId: _spaceId, room, className, style, userCursorColor, children, renderCursor, propagate, }: {
+export declare function Cursors<RoomSchema extends RoomSchemaShape, RoomType extends keyof RoomSchema>({ as, spaceId: _spaceId, room, className, style, userCursorColor, children, renderCursor, propagate, zIndex, }: {
     spaceId?: string;
@@ -17,3 +17,4 @@ room: InstantReactRoom<any, RoomSchema, RoomType>;
     propagate?: boolean;
+    zIndex?: number;
 }): import("react").DetailedReactHTMLElement<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 //# sourceMappingURL=Cursors.d.ts.map

dist/Cursors.js

@@ -6,13 +6,3 @@ "use strict";
 const react_1 = require("react");
-const cursorStyles = {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-    transformOrigin: "0 0",
-    pointerEvents: "none",
-    userSelect: "none",
-};
-function Cursors({ as = "div", spaceId: _spaceId, room, className, style, userCursorColor, children, renderCursor, propagate, }) {
+function Cursors({ as = "div", spaceId: _spaceId, room, className, style, userCursorColor, children, renderCursor, propagate, zIndex, }) {
     const spaceId = _spaceId || `cursors-space-default--${String(room.type)}-${room.id}`;
@@ -23,14 +13,2 @@ const cursorsPresence = room.usePresence({
     const fullPresence = room._core._reactor.getPresence(room.type, room.id);
-    const cursorEls = Object.entries(cursorsPresence.peers).map(([id, presence]) => {
-        const cursor = presence[spaceId];
-        if (!cursor)
-            return null;
-        const transform = `translate(${cursor.xPercent}%, ${cursor.yPercent}%)`;
-        const cursorEl = renderCursor ? (renderCursor({
-            color: cursor.color,
-            presence: fullPresence.peers[id],
-        })) : ((0, jsx_runtime_1.jsx)(Cursor, Object.assign({}, cursor)));
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: Object.assign(Object.assign({}, cursorStyles), { transform }) }, { children: cursorEl }), id));
-    });
-    const cursorsFragment = (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: cursorEls }, spaceId);
     function onMouseMove(e) {
@@ -65,3 +43,14 @@ if (!propagate) {
         style: Object.assign({ position: "relative" }, style),
-    }, [cursorsFragment, children]);
+    }, [
+        children,
+        (0, jsx_runtime_1.jsx)("div", Object.assign({ style: Object.assign(Object.assign(Object.assign({}, absStyles), inertStyles), { zIndex: zIndex !== undefined ? zIndex : defaultZ }) }, { children: Object.entries(cursorsPresence.peers).map(([id, presence]) => {
+                const cursor = presence[spaceId];
+                if (!cursor)
+                    return null;
+                return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: Object.assign(Object.assign({}, absStyles), { transform: `translate(${cursor.xPercent}%, ${cursor.yPercent}%)`, transformOrigin: "0 0", transition: "transform 100ms" }) }, { children: renderCursor ? (renderCursor({
+                        color: cursor.color,
+                        presence: fullPresence.peers[id],
+                    })) : ((0, jsx_runtime_1.jsx)(Cursor, Object.assign({}, cursor))) }), id));
+            }) }), spaceId),
+    ]);
 }
@@ -74,2 +63,15 @@ exports.Cursors = Cursors;
 }
+const absStyles = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+};
+const inertStyles = {
+    overflow: "hidden",
+    pointerEvents: "none",
+    userSelect: "none",
+};
+const defaultZ = 99999;
 //# sourceMappingURL=Cursors.js.map

dist/module/Cursors.d.ts

 import { ReactNode } from "react";
 import { InstantReactRoom } from "./InstantReact";
 import { RoomSchemaShape } from "@instantdb/core";
-export declare function Cursors<RoomSchema extends RoomSchemaShape, RoomType extends keyof RoomSchema>({ as, spaceId: _spaceId, room, className, style, userCursorColor, children, renderCursor, propagate, }: {
+export declare function Cursors<RoomSchema extends RoomSchemaShape, RoomType extends keyof RoomSchema>({ as, spaceId: _spaceId, room, className, style, userCursorColor, children, renderCursor, propagate, zIndex, }: {
     spaceId?: string;
@@ -17,3 +17,4 @@ room: InstantReactRoom<any, RoomSchema, RoomType>;
     propagate?: boolean;
+    zIndex?: number;
 }): import("react").DetailedReactHTMLElement<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 //# sourceMappingURL=Cursors.d.ts.map

dist/module/Cursors.js

 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, createElement, } from "react";
-const cursorStyles = {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-    transformOrigin: "0 0",
-    pointerEvents: "none",
-    userSelect: "none",
-};
-export function Cursors({ as = "div", spaceId: _spaceId, room, className, style, userCursorColor, children, renderCursor, propagate, }) {
+import { createElement, } from "react";
+export function Cursors({ as = "div", spaceId: _spaceId, room, className, style, userCursorColor, children, renderCursor, propagate, zIndex, }) {
     const spaceId = _spaceId || `cursors-space-default--${String(room.type)}-${room.id}`;
@@ -19,14 +9,2 @@ const cursorsPresence = room.usePresence({
     const fullPresence = room._core._reactor.getPresence(room.type, room.id);
-    const cursorEls = Object.entries(cursorsPresence.peers).map(([id, presence]) => {
-        const cursor = presence[spaceId];
-        if (!cursor)
-            return null;
-        const transform = `translate(${cursor.xPercent}%, ${cursor.yPercent}%)`;
-        const cursorEl = renderCursor ? (renderCursor({
-            color: cursor.color,
-            presence: fullPresence.peers[id],
-        })) : (_jsx(Cursor, Object.assign({}, cursor)));
-        return (_jsx("div", Object.assign({ style: Object.assign(Object.assign({}, cursorStyles), { transform }) }, { children: cursorEl }), id));
-    });
-    const cursorsFragment = _jsx(Fragment, { children: cursorEls }, spaceId);
     function onMouseMove(e) {
@@ -61,3 +39,14 @@ if (!propagate) {
         style: Object.assign({ position: "relative" }, style),
-    }, [cursorsFragment, children]);
+    }, [
+        children,
+        _jsx("div", Object.assign({ style: Object.assign(Object.assign(Object.assign({}, absStyles), inertStyles), { zIndex: zIndex !== undefined ? zIndex : defaultZ }) }, { children: Object.entries(cursorsPresence.peers).map(([id, presence]) => {
+                const cursor = presence[spaceId];
+                if (!cursor)
+                    return null;
+                return (_jsx("div", Object.assign({ style: Object.assign(Object.assign({}, absStyles), { transform: `translate(${cursor.xPercent}%, ${cursor.yPercent}%)`, transformOrigin: "0 0", transition: "transform 100ms" }) }, { children: renderCursor ? (renderCursor({
+                        color: cursor.color,
+                        presence: fullPresence.peers[id],
+                    })) : (_jsx(Cursor, Object.assign({}, cursor))) }), id));
+            }) }), spaceId),
+    ]);
 }
@@ -69,2 +58,15 @@ function Cursor({ color }) {
 }
+const absStyles = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+};
+const inertStyles = {
+    overflow: "hidden",
+    pointerEvents: "none",
+    userSelect: "none",
+};
+const defaultZ = 99999;
 //# sourceMappingURL=Cursors.js.map

package.json

 {
   "name": "@instantdb/react",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "description": "Instant DB for React",
@@ -31,4 +31,4 @@ "main": "dist/index.js",
   "dependencies": {
-    "@instantdb/core": "0.10.5"
+    "@instantdb/core": "0.10.6"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

150524

increased by0.75%

Lines of code

2979

increased by0.85%

Dependency changes

• + Added@instantdb/core@0.10.6(transitive)

• - Removed@instantdb/core@0.10.5(transitive)

• Updated@instantdb/core@0.10.6