@microsoft/live-share-react 1.0.0-preview.12 → 1.0.0-preview.14

package/bin/live-hooks/useLiveCanvas.js

@@ -1,159 +1,159 @@
-/*!
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the Microsoft Live Share SDK License.
- */
-import { InkingManager, LiveCanvas, } from "@microsoft/live-share-canvas";
-import React from "react";
-import { useDynamicDDS } from "../shared-hooks";
-import { isRefObject } from "../utils";
-/**
- * React hook for using a Live Share Canvas `LiveCanvas` and `InkingManager`.
- *
- * @remarks
- * Use this hook to set up an `LiveCanvas` object, which is used for collaborative inking. It takes several input parameters, including a unique key,
- * a reference to a canvas element, and various settings for the inking tool, brush, and canvas offset and scale.
- *
- * @param uniqueKey the unique key for the `LiveCanvas`. If one does not yet exist, a new one.
- * @param canvasElementRef the HTML div element ref or document ID that `InkingManager` will use for canvas-based collaboration.
- * @param active Optional. Stateful boolean that will activate/de-activate `InkingManager` accordingly.
- * @param tool Optional. Stateful enum for what tool to use in the `InkingManager`.
- * @param lineBrush Optional. Stateful lineBrush object for the selected lineBrush options to use in `InkingManager`.
- * @param offset Optional. Stateful offset point to use in the `InkingManager`. Gets the viewport offset. Defaults to 0,0.
- * @param scale Optional. Stateful scale number to use in the `InkingManager`. Defaults to 1 and must be greater than 0.
- * @param referencePoint Optional. Stateful reference point enum to use in the `InkingManger`. Defaults to "center".
- * @param isCursorShared Optional. Stateful boolean flag for whether cursor should be shared in `LiveCanvas`. Defaults to false.
- * @param localUserPictureUrl Optional. url string for the local user to display alongside their cursor. Defaults to undefined.
- * @returns IUseLiveCanvasResults object that contains the `liveCanvas` data object and `inkingManager`.
- */
-export function useLiveCanvas(uniqueKey, canvasElementRef, active, tool, lineBrush, offset, scale, referencePoint, isCursorShared, localUserPictureUrl) {
-    /**
-     * User facing: inking manager instance
-     */
-    const [inkingManager, setInkingManager] = React.useState();
-    /**
-     * User facing: dynamically load the DDS for the given unique key.
-     */
-    const { dds: liveCanvas } = useDynamicDDS(uniqueKey, LiveCanvas);
-    /**
-     * Setup the InkingManager and LiveCanvas
-     */
-    React.useEffect(() => {
-        // if the component is already listening or liveCanvas is not yet initialized, return
-        if (!liveCanvas)
-            return;
-        // get the canvas element from the ref or document
-        let htmlElement;
-        if (isRefObject(canvasElementRef)) {
-            htmlElement = canvasElementRef.current;
-        }
-        else {
-            htmlElement = document.getElementById(canvasElementRef);
-        }
-        if (htmlElement === null)
-            return;
-        // Create the InkingManager and initialize the liveCanvas with it
-        const inkingManager = new InkingManager(htmlElement);
-        setInkingManager(inkingManager);
-        liveCanvas.initialize(inkingManager);
-        // cleanup function to be called when the component is unmount
-        return () => {
-            liveCanvas.dispose();
-            inkingManager.removeAllListeners();
-        };
-    }, [liveCanvas]);
-    /**
-     * Activate or deactivate the inkingManager based on the 'active' prop
-     */
-    React.useEffect(() => {
-        if (inkingManager && active !== undefined) {
-            if (active) {
-                inkingManager.activate();
-            }
-            else {
-                inkingManager.deactivate();
-            }
-        }
-    }, [active, inkingManager]);
-    /**
-     * Sets the tool of the inkingManager based on the 'tool' prop
-     */
-    React.useEffect(() => {
-        if (inkingManager && tool !== undefined) {
-            inkingManager.tool = tool;
-        }
-    }, [tool, inkingManager]);
-    /**
-     * Sets the offset of the inkingManager based on the 'offset' prop
-     */
-    React.useEffect(() => {
-        if (inkingManager && offset !== undefined) {
-            inkingManager.offset = {
-                x: offset.x,
-                y: offset.y,
-            };
-        }
-    }, [offset === null || offset === void 0 ? void 0 : offset.x, offset === null || offset === void 0 ? void 0 : offset.y, inkingManager]);
-    /**
-     * Sets the scale of the inkingManager based on the 'scale' prop
-     */
-    React.useEffect(() => {
-        if (inkingManager && scale !== undefined) {
-            inkingManager.scale = scale;
-        }
-    }, [scale, inkingManager]);
-    /**
-     * Sets the referencePoint of the inkingManager based on the 'referencePoint' prop
-     */
-    React.useEffect(() => {
-        if (inkingManager && referencePoint !== undefined) {
-            inkingManager.referencePoint = referencePoint;
-        }
-    }, [referencePoint, inkingManager]);
-    /**
-     * Sets the lineBrush of the inkingManager based on the 'lineBrush' prop
-     */
-    React.useEffect(() => {
-        if (inkingManager && lineBrush) {
-            inkingManager.lineBrush = {
-                color: lineBrush.color,
-                tip: lineBrush.tip,
-                tipSize: lineBrush.tipSize,
-                type: lineBrush.type,
-                endArrow: lineBrush.endArrow,
-            };
-        }
-    }, [
-        lineBrush === null || lineBrush === void 0 ? void 0 : lineBrush.color,
-        lineBrush === null || lineBrush === void 0 ? void 0 : lineBrush.tip,
-        lineBrush === null || lineBrush === void 0 ? void 0 : lineBrush.tipSize,
-        lineBrush === null || lineBrush === void 0 ? void 0 : lineBrush.type,
-        lineBrush === null || lineBrush === void 0 ? void 0 : lineBrush.endArrow,
-        inkingManager,
-    ]);
-    /**
-     * Sets the isCursorShared of the liveCanvas based on the 'isCursorShared' prop
-     */
-    React.useEffect(() => {
-        if (liveCanvas && isCursorShared !== undefined) {
-            liveCanvas.isCursorShared = isCursorShared;
-        }
-    }, [isCursorShared, liveCanvas]);
-    /**
-     * Sets the onGetLocalUserInfo method of the liveCanvas based on the 'localUserCursor' prop
-     */
-    React.useEffect(() => {
-        if (liveCanvas && localUserPictureUrl) {
-            liveCanvas.onGetLocalUserPictureUrl = () => {
-                return localUserPictureUrl;
-            };
-        }
-    }, [localUserPictureUrl, liveCanvas]);
-    /**
-     * Return hook response
-     */
-    return {
-        inkingManager,
-        liveCanvas,
-    };
-}
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Microsoft Live Share SDK License.
+ */
+import { InkingManager, LiveCanvas, } from "@microsoft/live-share-canvas";
+import React from "react";
+import { useDynamicDDS } from "../shared-hooks";
+import { isRefObject } from "../utils";
+/**
+ * React hook for using a Live Share Canvas `LiveCanvas` and `InkingManager`.
+ *
+ * @remarks
+ * Use this hook to set up an `LiveCanvas` object, which is used for collaborative inking. It takes several input parameters, including a unique key,
+ * a reference to a canvas element, and various settings for the inking tool, brush, and canvas offset and scale.
+ *
+ * @param uniqueKey the unique key for the `LiveCanvas`. If one does not yet exist, a new one.
+ * @param canvasElementRef the HTML div element ref or document ID that `InkingManager` will use for canvas-based collaboration.
+ * @param active Optional. Stateful boolean that will activate/de-activate `InkingManager` accordingly.
+ * @param tool Optional. Stateful enum for what tool to use in the `InkingManager`.
+ * @param lineBrush Optional. Stateful lineBrush object for the selected lineBrush options to use in `InkingManager`.
+ * @param offset Optional. Stateful offset point to use in the `InkingManager`. Gets the viewport offset. Defaults to 0,0.
+ * @param scale Optional. Stateful scale number to use in the `InkingManager`. Defaults to 1 and must be greater than 0.
+ * @param referencePoint Optional. Stateful reference point enum to use in the `InkingManger`. Defaults to "center".
+ * @param isCursorShared Optional. Stateful boolean flag for whether cursor should be shared in `LiveCanvas`. Defaults to false.
+ * @param localUserPictureUrl Optional. url string for the local user to display alongside their cursor. Defaults to undefined.
+ * @returns IUseLiveCanvasResults object that contains the `liveCanvas` data object and `inkingManager`.
+ */
+export function useLiveCanvas(uniqueKey, canvasElementRef, active, tool, lineBrush, offset, scale, referencePoint, isCursorShared, localUserPictureUrl) {
+    /**
+     * User facing: inking manager instance
+     */
+    const [inkingManager, setInkingManager] = React.useState();
+    /**
+     * User facing: dynamically load the DDS for the given unique key.
+     */
+    const { dds: liveCanvas } = useDynamicDDS(uniqueKey, LiveCanvas);
+    /**
+     * Setup the InkingManager and LiveCanvas
+     */
+    React.useEffect(() => {
+        // if the component is already listening or liveCanvas is not yet initialized, return
+        if (!liveCanvas)
+            return;
+        // get the canvas element from the ref or document
+        let htmlElement;
+        if (isRefObject(canvasElementRef)) {
+            htmlElement = canvasElementRef.current;
+        }
+        else {
+            htmlElement = document.getElementById(canvasElementRef);
+        }
+        if (htmlElement === null)
+            return;
+        // Create the InkingManager and initialize the liveCanvas with it
+        const inkingManager = new InkingManager(htmlElement);
+        setInkingManager(inkingManager);
+        liveCanvas.initialize(inkingManager);
+        // cleanup function to be called when the component is unmount
+        return () => {
+            liveCanvas.dispose();
+            inkingManager.removeAllListeners();
+        };
+    }, [liveCanvas]);
+    /**
+     * Activate or deactivate the inkingManager based on the 'active' prop
+     */
+    React.useEffect(() => {
+        if (inkingManager && active !== undefined) {
+            if (active) {
+                inkingManager.activate();
+            }
+            else {
+                inkingManager.deactivate();
+            }
+        }
+    }, [active, inkingManager]);
+    /**
+     * Sets the tool of the inkingManager based on the 'tool' prop
+     */
+    React.useEffect(() => {
+        if (inkingManager && tool !== undefined) {
+            inkingManager.tool = tool;
+        }
+    }, [tool, inkingManager]);
+    /**
+     * Sets the offset of the inkingManager based on the 'offset' prop
+     */
+    React.useEffect(() => {
+        if (inkingManager && offset !== undefined) {
+            inkingManager.offset = {
+                x: offset.x,
+                y: offset.y,
+            };
+        }
+    }, [offset === null || offset === void 0 ? void 0 : offset.x, offset === null || offset === void 0 ? void 0 : offset.y, inkingManager]);
+    /**
+     * Sets the scale of the inkingManager based on the 'scale' prop
+     */
+    React.useEffect(() => {
+        if (inkingManager && scale !== undefined) {
+            inkingManager.scale = scale;
+        }
+    }, [scale, inkingManager]);
+    /**
+     * Sets the referencePoint of the inkingManager based on the 'referencePoint' prop
+     */
+    React.useEffect(() => {
+        if (inkingManager && referencePoint !== undefined) {
+            inkingManager.referencePoint = referencePoint;
+        }
+    }, [referencePoint, inkingManager]);
+    /**
+     * Sets the lineBrush of the inkingManager based on the 'lineBrush' prop
+     */
+    React.useEffect(() => {
+        if (inkingManager && lineBrush) {
+            inkingManager.lineBrush = {
+                color: lineBrush.color,
+                tip: lineBrush.tip,
+                tipSize: lineBrush.tipSize,
+                type: lineBrush.type,
+                endArrow: lineBrush.endArrow,
+            };
+        }
+    }, [
+        lineBrush === null || lineBrush === void 0 ? void 0 : lineBrush.color,
+        lineBrush === null || lineBrush === void 0 ? void 0 : lineBrush.tip,
+        lineBrush === null || lineBrush === void 0 ? void 0 : lineBrush.tipSize,
+        lineBrush === null || lineBrush === void 0 ? void 0 : lineBrush.type,
+        lineBrush === null || lineBrush === void 0 ? void 0 : lineBrush.endArrow,
+        inkingManager,
+    ]);
+    /**
+     * Sets the isCursorShared of the liveCanvas based on the 'isCursorShared' prop
+     */
+    React.useEffect(() => {
+        if (liveCanvas && isCursorShared !== undefined) {
+            liveCanvas.isCursorShared = isCursorShared;
+        }
+    }, [isCursorShared, liveCanvas]);
+    /**
+     * Sets the onGetLocalUserInfo method of the liveCanvas based on the 'localUserCursor' prop
+     */
+    React.useEffect(() => {
+        if (liveCanvas && localUserPictureUrl) {
+            liveCanvas.onGetLocalUserPictureUrl = () => {
+                return localUserPictureUrl;
+            };
+        }
+    }, [localUserPictureUrl, liveCanvas]);
+    /**
+     * Return hook response
+     */
+    return {
+        inkingManager,
+        liveCanvas,
+    };
+}
 //# sourceMappingURL=useLiveCanvas.js.map

package/bin/live-hooks/useLiveEvent.d.ts

@@ -1,22 +1,22 @@
-/*!
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the Microsoft Live Share SDK License.
- */
-import { UserMeetingRole } from "@microsoft/live-share";
-import { IUseLiveEventResults, OnReceivedLiveEventAction } from "../types";
-/**
- * React hook for using a Live Share `LiveEvent`.
- *
- * @remarks
- * Use this hook if you want to send transient JSON objects to everyone connected to the Fluid container,
- * such as when sending push notifications or reactions.
- *
- * @template TEvent Optional typing for events sent & received. Default is `object` type.
- * @param uniqueKey the unique key for the `LiveEvent`. If one does not yet exist, a new one
- * will be created, otherwise it will use the existing one.
- * @param allowedRoles Optional. The meeting roles eligible to send events through this object.
- * @param onReceivedEvent Optional. Callback method to be called when a new notification is received.
- * @returns stateful `latestEvent` & `allEvents` list, `sendEvent` callback, and the `liveEvent` object.
- */
-export declare function useLiveEvent<TEvent extends object = object>(uniqueKey: string, allowedRoles?: UserMeetingRole[], onReceivedEvent?: OnReceivedLiveEventAction<TEvent>): IUseLiveEventResults<TEvent>;
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Microsoft Live Share SDK License.
+ */
+import { UserMeetingRole } from "@microsoft/live-share";
+import { IUseLiveEventResults, OnReceivedLiveEventAction } from "../types";
+/**
+ * React hook for using a Live Share `LiveEvent`.
+ *
+ * @remarks
+ * Use this hook if you want to send transient JSON objects to everyone connected to the Fluid container,
+ * such as when sending push notifications or reactions.
+ *
+ * @template TEvent Optional typing for events sent & received. Default is `object` type.
+ * @param uniqueKey the unique key for the `LiveEvent`. If one does not yet exist, a new one
+ * will be created, otherwise it will use the existing one.
+ * @param allowedRoles Optional. The meeting roles eligible to send events through this object.
+ * @param onReceivedEvent Optional. Callback method to be called when a new notification is received.
+ * @returns stateful `latestEvent` & `allEvents` list, `sendEvent` callback, and the `liveEvent` object.
+ */
+export declare function useLiveEvent<TEvent extends object = object>(uniqueKey: string, allowedRoles?: UserMeetingRole[], onReceivedEvent?: OnReceivedLiveEventAction<TEvent>): IUseLiveEventResults<TEvent>;
 //# sourceMappingURL=useLiveEvent.d.ts.map

package/bin/live-hooks/useLiveEvent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLiveEvent.d.ts","sourceRoot":"","sources":["../../src/live-hooks/useLiveEvent.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAEH,eAAe,EAElB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,oBAAoB,EACpB,yBAAyB,EAE5B,MAAM,UAAU,CAAC;AAIlB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,EACvD,SAAS,EAAE,MAAM,EACjB,YAAY,CAAC,EAAE,eAAe,EAAE,EAChC,eAAe,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,GACpD,oBAAoB,CAAC,MAAM,CAAC,CA+E9B"}
+{"version":3,"file":"useLiveEvent.d.ts","sourceRoot":"","sources":["../../src/live-hooks/useLiveEvent.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAEH,eAAe,EAElB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,oBAAoB,EACpB,yBAAyB,EAE5B,MAAM,UAAU,CAAC;AAIlB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,EACvD,SAAS,EAAE,MAAM,EACjB,YAAY,CAAC,EAAE,eAAe,EAAE,EAChC,eAAe,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,GACpD,oBAAoB,CAAC,MAAM,CAAC,CA2E9B"}

package/bin/live-hooks/useLiveEvent.js

@@ -1,86 +1,93 @@
-/*!
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the Microsoft Live Share SDK License.
- */
-import { LiveEventEvents, LiveEvent, } from "@microsoft/live-share";
-import React from "react";
-import { useDynamicDDS } from "../shared-hooks";
-/**
- * React hook for using a Live Share `LiveEvent`.
- *
- * @remarks
- * Use this hook if you want to send transient JSON objects to everyone connected to the Fluid container,
- * such as when sending push notifications or reactions.
- *
- * @template TEvent Optional typing for events sent & received. Default is `object` type.
- * @param uniqueKey the unique key for the `LiveEvent`. If one does not yet exist, a new one
- * will be created, otherwise it will use the existing one.
- * @param allowedRoles Optional. The meeting roles eligible to send events through this object.
- * @param onReceivedEvent Optional. Callback method to be called when a new notification is received.
- * @returns stateful `latestEvent` & `allEvents` list, `sendEvent` callback, and the `liveEvent` object.
- */
-export function useLiveEvent(uniqueKey, allowedRoles, onReceivedEvent) {
-    /**
-     * Stateful latest event (user facing) and its non-user-facing setter method.
-     */
-    const [latestEvent, setLatestReceived] = React.useState();
-    /**
-     * Reference for all received/sent events. The current value of this is user-facing. Because
-     * this is always set at the same time as latestEvent, it is effectively a stateful value.
-     */
-    const allEventsRef = React.useRef([]);
-    /**
-     * User facing: dynamically load the DDS for the given unique key.
-     */
-    const { dds: liveEvent } = useDynamicDDS(uniqueKey, LiveEvent);
-    /**
-     * User facing: callback to send event through `LiveEvent`
-     */
-    const sendEvent = React.useCallback((event) => {
-        if ((liveEvent === null || liveEvent === void 0 ? void 0 : liveEvent.isInitialized) === undefined) {
-            console.error(new Error("Cannot call emitEvent when liveEvent is undefined"));
-            return;
-        }
-        if (!liveEvent.isInitialized) {
-            console.error(new Error("Cannot call emitEvent while liveEvent is not started"));
-            return;
-        }
-        liveEvent === null || liveEvent === void 0 ? void 0 : liveEvent.send(event);
-    }, [liveEvent === null || liveEvent === void 0 ? void 0 : liveEvent.isInitialized]);
-    /**
-     * Setup change listeners and start `LiveEvent` if needed
-     */
-    React.useEffect(() => {
-        if ((liveEvent === null || liveEvent === void 0 ? void 0 : liveEvent.isInitialized) === undefined)
-            return;
-        // Register event listener
-        const onEventReceived = (event, local) => {
-            // If developer passed the optional onReceivedEvent callback, we
-            // call it.
-            onReceivedEvent === null || onReceivedEvent === void 0 ? void 0 : onReceivedEvent(event, local);
-            // Set the received event to our local state
-            const received = {
-                event: event,
-                local,
-            };
-            allEventsRef.current = [...allEventsRef.current, received];
-            setLatestReceived(received);
-        };
-        liveEvent.on(LiveEventEvents.received, onEventReceived);
-        if (!liveEvent.isInitialized) {
-            // Start live event
-            liveEvent.initialize(allowedRoles);
-        }
-        return () => {
-            // on unmount, remove event listeners
-            liveEvent === null || liveEvent === void 0 ? void 0 : liveEvent.off(LiveEventEvents.received, onEventReceived);
-        };
-    }, [liveEvent === null || liveEvent === void 0 ? void 0 : liveEvent.isInitialized]);
-    return {
-        latestEvent,
-        allEvents: allEventsRef.current,
-        sendEvent,
-        liveEvent,
-    };
-}
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Microsoft Live Share SDK License.
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LiveEventEvents, LiveEvent, } from "@microsoft/live-share";
+import React from "react";
+import { useDynamicDDS } from "../shared-hooks";
+/**
+ * React hook for using a Live Share `LiveEvent`.
+ *
+ * @remarks
+ * Use this hook if you want to send transient JSON objects to everyone connected to the Fluid container,
+ * such as when sending push notifications or reactions.
+ *
+ * @template TEvent Optional typing for events sent & received. Default is `object` type.
+ * @param uniqueKey the unique key for the `LiveEvent`. If one does not yet exist, a new one
+ * will be created, otherwise it will use the existing one.
+ * @param allowedRoles Optional. The meeting roles eligible to send events through this object.
+ * @param onReceivedEvent Optional. Callback method to be called when a new notification is received.
+ * @returns stateful `latestEvent` & `allEvents` list, `sendEvent` callback, and the `liveEvent` object.
+ */
+export function useLiveEvent(uniqueKey, allowedRoles, onReceivedEvent) {
+    /**
+     * Stateful latest event (user facing) and its non-user-facing setter method.
+     */
+    const [latestEvent, setLatestReceived] = React.useState();
+    /**
+     * Reference for all received/sent events. The current value of this is user-facing. Because
+     * this is always set at the same time as latestEvent, it is effectively a stateful value.
+     */
+    const allEventsRef = React.useRef([]);
+    /**
+     * User facing: dynamically load the DDS for the given unique key.
+     */
+    const { dds: liveEvent } = useDynamicDDS(uniqueKey, (LiveEvent));
+    /**
+     * User facing: callback to send event through `LiveEvent`
+     */
+    const sendEvent = React.useCallback((event) => __awaiter(this, void 0, void 0, function* () {
+        if (liveEvent === undefined) {
+            throw new Error("Cannot call emitEvent when liveEvent is undefined");
+        }
+        if (!liveEvent.isInitialized) {
+            throw new Error("Cannot call emitEvent while liveEvent is not started");
+        }
+        return yield liveEvent.send(event);
+    }), [liveEvent]);
+    /**
+     * Setup change listeners and start `LiveEvent` if needed
+     */
+    React.useEffect(() => {
+        if ((liveEvent === null || liveEvent === void 0 ? void 0 : liveEvent.isInitialized) === undefined)
+            return;
+        // Register event listener
+        const onEventReceived = (event, local) => {
+            // If developer passed the optional onReceivedEvent callback, we
+            // call it.
+            onReceivedEvent === null || onReceivedEvent === void 0 ? void 0 : onReceivedEvent(event, local);
+            // Set the received event to our local state
+            const received = {
+                event: event,
+                local,
+            };
+            allEventsRef.current = [...allEventsRef.current, received];
+            setLatestReceived(received);
+        };
+        liveEvent.on(LiveEventEvents.received, onEventReceived);
+        if (!liveEvent.isInitialized) {
+            // Start live event
+            liveEvent.initialize(allowedRoles);
+        }
+        return () => {
+            // on unmount, remove event listeners
+            liveEvent === null || liveEvent === void 0 ? void 0 : liveEvent.off(LiveEventEvents.received, onEventReceived);
+        };
+    }, [liveEvent]);
+    return {
+        latestEvent,
+        allEvents: allEventsRef.current,
+        sendEvent,
+        liveEvent,
+    };
+}
 //# sourceMappingURL=useLiveEvent.js.map

package/bin/live-hooks/useLiveEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLiveEvent.js","sourceRoot":"","sources":["../../src/live-hooks/useLiveEvent.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACH,eAAe,EAEf,SAAS,GACZ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,YAAY,CACxB,SAAiB,EACjB,YAAgC,EAChC,eAAmD;IAEnD;;OAEG;IACH,MAAM,CAAC,WAAW,EAAE,iBAAiB,CAAC,GAClC,KAAK,CAAC,QAAQ,EAA6B,CAAC;IAChD;;;OAGG;IACH,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAA8B,EAAE,CAAC,CAAC;IACnE;;OAEG;IACH,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,aAAa,CAAY,SAAS,EAAE,SAAS,CAAC,CAAC;IAE1E;;OAEG;IACH,MAAM,SAAS,GAAgC,KAAK,CAAC,WAAW,CAC5D,CAAC,KAAa,EAAE,EAAE;QACd,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,aAAa,MAAK,SAAS,EAAE;YACxC,OAAO,CAAC,KAAK,CACT,IAAI,KAAK,CACL,mDAAmD,CACtD,CACJ,CAAC;YACF,OAAO;SACV;QACD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE;YAC1B,OAAO,CAAC,KAAK,CACT,IAAI,KAAK,CACL,sDAAsD,CACzD,CACJ,CAAC;YACF,OAAO;SACV;QACD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EACD,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,aAAa,CAAC,CAC7B,CAAC;IAEF;;OAEG;IACH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,aAAa,MAAK,SAAS;YACtC,OAAO;QACX,0BAA0B;QAC1B,MAAM,eAAe,GAAG,CAAC,KAAU,EAAE,KAAc,EAAE,EAAE;YACnD,gEAAgE;YAChE,WAAW;YACX,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,KAAe,EAAE,KAAK,CAAC,CAAC;YAC1C,4CAA4C;YAC5C,MAAM,QAAQ,GAA8B;gBACxC,KAAK,EAAE,KAAe;gBACtB,KAAK;aACR,CAAC;YACF,YAAY,CAAC,OAAO,GAAG,CAAC,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;YAC3D,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAChC,CAAC,CAAC;QACF,SAAS,CAAC,EAAE,CAAC,eAAe,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;QACxD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE;YAC1B,mBAAmB;YACnB,SAAS,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;SACtC;QAED,OAAO,GAAG,EAAE;YACR,qCAAqC;YACrC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,eAAe,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;QAC9D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,aAAa,CAAC,CAAC,CAAC;IAE/B,OAAO;QACH,WAAW;QACX,SAAS,EAAE,YAAY,CAAC,OAAO;QAC/B,SAAS;QACT,SAAS;KACZ,CAAC;AACN,CAAC"}
+{"version":3,"file":"useLiveEvent.js","sourceRoot":"","sources":["../../src/live-hooks/useLiveEvent.ts"],"names":[],"mappings":"AAAA;;;GAGG;;;;;;;;;;AAEH,OAAO,EACH,eAAe,EAEf,SAAS,GACZ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,YAAY,CACxB,SAAiB,EACjB,YAAgC,EAChC,eAAmD;IAEnD;;OAEG;IACH,MAAM,CAAC,WAAW,EAAE,iBAAiB,CAAC,GAClC,KAAK,CAAC,QAAQ,EAA6B,CAAC;IAChD;;;OAGG;IACH,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAA8B,EAAE,CAAC,CAAC;IACnE;;OAEG;IACH,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,aAAa,CACpC,SAAS,EACT,CAAA,SAAiB,CAAA,CACpB,CAAC;IAEF;;OAEG;IACH,MAAM,SAAS,GAAgC,KAAK,CAAC,WAAW,CAC5D,CAAO,KAAa,EAAE,EAAE;QACpB,IAAI,SAAS,KAAK,SAAS,EAAE;YACzB,MAAM,IAAI,KAAK,CACX,mDAAmD,CACtD,CAAC;SACL;QACD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE;YAC1B,MAAM,IAAI,KAAK,CACX,sDAAsD,CACzD,CAAC;SACL;QACD,OAAO,MAAM,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAA,EACD,CAAC,SAAS,CAAC,CACd,CAAC;IAEF;;OAEG;IACH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,aAAa,MAAK,SAAS;YAAE,OAAO;QACnD,0BAA0B;QAC1B,MAAM,eAAe,GAAG,CAAC,KAAU,EAAE,KAAc,EAAE,EAAE;YACnD,gEAAgE;YAChE,WAAW;YACX,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,KAAe,EAAE,KAAK,CAAC,CAAC;YAC1C,4CAA4C;YAC5C,MAAM,QAAQ,GAA8B;gBACxC,KAAK,EAAE,KAAe;gBACtB,KAAK;aACR,CAAC;YACF,YAAY,CAAC,OAAO,GAAG,CAAC,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;YAC3D,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAChC,CAAC,CAAC;QACF,SAAS,CAAC,EAAE,CAAC,eAAe,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;QACxD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE;YAC1B,mBAAmB;YACnB,SAAS,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;SACtC;QAED,OAAO,GAAG,EAAE;YACR,qCAAqC;YACrC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,eAAe,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;QAC9D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO;QACH,WAAW;QACX,SAAS,EAAE,YAAY,CAAC,OAAO;QAC/B,SAAS;QACT,SAAS;KACZ,CAAC;AACN,CAAC"}

package/bin/live-hooks/useLivePresence.d.ts

@@ -1,26 +1,26 @@
-/*!
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the Microsoft Live Share SDK License.
- */
-import { PresenceState } from "@microsoft/live-share";
-import { IUseLivePresenceResults } from "../types";
-/**
- * React hook for using a Live Share `LivePresence`.
- *
- * @remarks
- * Use this hook if you want to track presence for who is currently using this component, such as
- * who is online or who is viewing a specific document. With presence, you can sent along any custom
- * user data. This is useful for rendering a list of users, profile pictures, cursor positions, and more.
- *
- * @template TData Optional typing for the custom user presence data object. Default is `object` type.
-
- * @param userId Optional. The unique ID for a user. If none is provided, a random UUID will be generated.
- * @param initialData Optional. Initial presence data object for the user.
- * @param initialPresenceState Optional. Initial status of the user's presence. Default is online.
- * @param uniqueKey Optional. The unique key for `LivePresence`. If one does not yet exist, a new one
- * will be created, otherwise it will use the existing one. Default value is ":<dds-default>"
- * @returns stateful `localUser`, `otherUsers` list, and `allUsers` list. Also returns a callback method
- * to update the local user's presence and the `LivePresence` Fluid object.
- */
-export declare function useLivePresence<TData extends object = object>(initialData?: TData | undefined, initialPresenceState?: PresenceState, uniqueKey?: string): IUseLivePresenceResults<TData>;
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Microsoft Live Share SDK License.
+ */
+import { PresenceState, UserMeetingRole } from "@microsoft/live-share";
+import { IUseLivePresenceResults } from "../types";
+/**
+ * React hook for using a Live Share `LivePresence`.
+ *
+ * @remarks
+ * Use this hook if you want to track presence for who is currently using this component, such as
+ * who is online or who is viewing a specific document. With presence, you can sent along any custom
+ * user data. This is useful for rendering a list of users, profile pictures, cursor positions, and more.
+ *
+ * @template TData Optional typing for the custom user presence data object. Default is `object` type.
+ * @param uniqueKey The unique key for `LivePresence`. If one does not yet exist, a new one
+ * @param userId Optional. The unique ID for a user. If none is provided, a random UUID will be generated.
+ * @param initialData Optional. Initial presence data object for the user.
+ * @param initialPresenceState Optional. Initial status of the user's presence. Default is online.
+ * @param allowedRoles Optional. the user roles that are allowed to mutate the synchronized state
+ * will be created, otherwise it will use the existing one. Default value is ":<dds-default>"
+ * @returns stateful `localUser`, `otherUsers` list, and `allUsers` list. Also returns a callback method
+ * to update the local user's presence and the `LivePresence` Fluid object.
+ */
+export declare function useLivePresence<TData extends object = object>(uniqueKey: string, initialData?: TData | undefined, initialPresenceState?: PresenceState, allowedRoles?: UserMeetingRole[]): IUseLivePresenceResults<TData>;
 //# sourceMappingURL=useLivePresence.d.ts.map

package/bin/live-hooks/useLivePresence.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLivePresence.d.ts","sourceRoot":"","sources":["../../src/live-hooks/useLivePresence.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAEH,aAAa,EAEhB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,uBAAuB,EAA8B,MAAM,UAAU,CAAC;AAG/E;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACzD,WAAW,CAAC,EAAE,KAAK,GAAG,SAAS,EAC/B,oBAAoB,GAAE,aAAoC,EAC1D,SAAS,GAAE,MAAyB,GACrC,uBAAuB,CAAC,KAAK,CAAC,CAwFhC"}
+{"version":3,"file":"useLivePresence.d.ts","sourceRoot":"","sources":["../../src/live-hooks/useLivePresence.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAEH,aAAa,EAEb,eAAe,EAClB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,uBAAuB,EAA8B,MAAM,UAAU,CAAC;AAG/E;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACzD,SAAS,EAAE,MAAM,EACjB,WAAW,CAAC,EAAE,KAAK,GAAG,SAAS,EAC/B,oBAAoB,GAAE,aAAoC,EAC1D,YAAY,CAAC,EAAE,eAAe,EAAE,GACjC,uBAAuB,CAAC,KAAK,CAAC,CA4FhC"}