@microsoft/live-share-react 2.0.0-internal.1 → 2.0.0-internal.11

package/bin/cjs/internal/errors.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionLiveDataObjectInitializedError = exports.ActionLiveDataObjectUndefinedError = exports.ActionContainerNotJoinedError = void 0;
+/**
+ * @hidden
+ */
+class UseLiveDataObjectActionError extends Error {
+    constructor(ddsName, functionName, message) {
+        const hookName = `use${toFirstLetterUppercase(ddsName)}`;
+        super(`${hookName} ${functionName}: ${message}`);
+    }
+}
+/**
+ * @hidden
+ */
+class ActionContainerNotJoinedError extends UseLiveDataObjectActionError {
+    constructor(ddsName, functionName) {
+        super(ddsName, functionName, "container has not yet been joined.\nTo fix this error, ensure `container` from `useFluidObjectsContext()` is defined before calling this function.\nIf using `<LiveShareProvider>`, you can instead check the `joined` response is true from `useLiveShareContext()` before calling this function.");
+    }
+}
+exports.ActionContainerNotJoinedError = ActionContainerNotJoinedError;
+/**
+ * @hidden
+ */
+class ActionLiveDataObjectUndefinedError extends UseLiveDataObjectActionError {
+    constructor(ddsName, functionName) {
+        const hookName = `use${toFirstLetterUppercase(ddsName)}`;
+        super(ddsName, functionName, `${ddsName} is undefined, which means it is still being dynamically created.\nTo fix this error, ensure that \`${ddsName}\` (found in the response of \`${hookName}\`) is defined before calling this function.`);
+    }
+}
+exports.ActionLiveDataObjectUndefinedError = ActionLiveDataObjectUndefinedError;
+/**
+ * @hidden
+ */
+class ActionLiveDataObjectInitializedError extends UseLiveDataObjectActionError {
+    constructor(ddsName, functionName) {
+        const hookName = `use${toFirstLetterUppercase(ddsName)}`;
+        super(ddsName, functionName, `${ddsName} is not yet initialized.\nTo fix this error, ensure that \`${ddsName}?.isInitialized\` is true (found in the response of \`${hookName}\`) before calling this function.`);
+    }
+}
+exports.ActionLiveDataObjectInitializedError = ActionLiveDataObjectInitializedError;
+/**
+ * @hidden
+ */
+function toFirstLetterUppercase(word) {
+    return word[0].toUpperCase() + word.substring(1);
+}
+//# sourceMappingURL=errors.js.map

package/bin/cjs/internal/errors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.js","sourceRoot":"","sources":["../../../src/internal/errors.ts"],"names":[],"mappings":";;;AAAA;;GAEG;AACH,MAAM,4BAA6B,SAAQ,KAAK;IAC5C,YAAY,OAAe,EAAE,YAAoB,EAAE,OAAe;QAC9D,MAAM,QAAQ,GAAG,MAAM,sBAAsB,CAAC,OAAO,CAAC,EAAE,CAAC;QACzD,KAAK,CAAC,GAAG,QAAQ,IAAI,YAAY,KAAK,OAAO,EAAE,CAAC,CAAC;IACrD,CAAC;CACJ;AAED;;GAEG;AACH,MAAa,6BAA8B,SAAQ,4BAA4B;IAC3E,YAAY,OAAe,EAAE,YAAoB;QAC7C,KAAK,CACD,OAAO,EACP,YAAY,EACZ,oSAAoS,CACvS,CAAC;IACN,CAAC;CACJ;AARD,sEAQC;AAED;;GAEG;AACH,MAAa,kCAAmC,SAAQ,4BAA4B;IAChF,YAAY,OAAe,EAAE,YAAoB;QAC7C,MAAM,QAAQ,GAAG,MAAM,sBAAsB,CAAC,OAAO,CAAC,EAAE,CAAC;QACzD,KAAK,CACD,OAAO,EACP,YAAY,EACZ,GAAG,OAAO,uGAAuG,OAAO,kCAAkC,QAAQ,8CAA8C,CACnN,CAAC;IACN,CAAC;CACJ;AATD,gFASC;AAED;;GAEG;AACH,MAAa,oCAAqC,SAAQ,4BAA4B;IAClF,YAAY,OAAe,EAAE,YAAoB;QAC7C,MAAM,QAAQ,GAAG,MAAM,sBAAsB,CAAC,OAAO,CAAC,EAAE,CAAC;QACzD,KAAK,CACD,OAAO,EACP,YAAY,EACZ,GAAG,OAAO,8DAA8D,OAAO,yDAAyD,QAAQ,mCAAmC,CACtL,CAAC;IACN,CAAC;CACJ;AATD,oFASC;AAkBD;;GAEG;AACH,SAAS,sBAAsB,CAAC,IAAY;IACxC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AACrD,CAAC"}

package/bin/cjs/internal/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./errors.js";
+export * from "./type-guards.js";
+//# sourceMappingURL=index.d.ts.map

package/bin/cjs/internal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/internal/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}

package/bin/cjs/internal/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./errors.js"), exports);
+__exportStar(require("./type-guards.js"), exports);
+//# sourceMappingURL=index.js.map

package/bin/cjs/internal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/internal/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,mDAAiC"}

package/bin/cjs/internal/type-guards.d.ts

@@ -0,0 +1,11 @@
+import { ITeamsJsSdkError } from "./errors.js";
+/**
+ * @hidden
+ * Used for useLiveState and useSharedState for checking if a value is a prevState callback
+ */
+export declare function isPrevStateCallback<TState>(value: any): value is (value: TState) => TState;
+/**
+ * @hidden
+ */
+export declare function isITeamsJsSdkError(value: any): value is ITeamsJsSdkError;
+//# sourceMappingURL=type-guards.d.ts.map

package/bin/cjs/internal/type-guards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type-guards.d.ts","sourceRoot":"","sources":["../../../src/internal/type-guards.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EACtC,KAAK,EAAE,GAAG,GACX,KAAK,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAEpC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI,gBAAgB,CAKxE"}

package/bin/cjs/internal/type-guards.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isPrevStateCallback = isPrevStateCallback;
+exports.isITeamsJsSdkError = isITeamsJsSdkError;
+/**
+ * @hidden
+ * Used for useLiveState and useSharedState for checking if a value is a prevState callback
+ */
+function isPrevStateCallback(value) {
+    return typeof value === "function";
+}
+/**
+ * @hidden
+ */
+function isITeamsJsSdkError(value) {
+    if (!value)
+        return false;
+    if (typeof value.errorCode !== "number")
+        return false;
+    if (value.message === undefined)
+        return true;
+    return typeof value.message === "string";
+}
+//# sourceMappingURL=type-guards.js.map

package/bin/cjs/internal/type-guards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type-guards.js","sourceRoot":"","sources":["../../../src/internal/type-guards.ts"],"names":[],"mappings":";;AAMA,kDAIC;AAKD,gDAKC;AAlBD;;;GAGG;AACH,SAAgB,mBAAmB,CAC/B,KAAU;IAEV,OAAO,OAAO,KAAK,KAAK,UAAU,CAAC;AACvC,CAAC;AAED;;GAEG;AACH,SAAgB,kBAAkB,CAAC,KAAU;IACzC,IAAI,CAAC,KAAK;QAAE,OAAO,KAAK,CAAC;IACzB,IAAI,OAAO,KAAK,CAAC,SAAS,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC;IACtD,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IAC7C,OAAO,OAAO,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC;AAC7C,CAAC"}

package/bin/cjs/live-hooks/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./useLivePresence.js";
+export * from "./useLiveFollowMode.js";
+export * from "./useLiveState.js";
+export * from "./useMediaSynchronizer.js";
+export * from "./useLiveEvent.js";
+export * from "./useLiveCanvas.js";
+export * from "./useLiveTimer.js";
+//# sourceMappingURL=index.d.ts.map

package/bin/cjs/live-hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/live-hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC"}

package/bin/cjs/live-hooks/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLivePresence.js"), exports);
+__exportStar(require("./useLiveFollowMode.js"), exports);
+__exportStar(require("./useLiveState.js"), exports);
+__exportStar(require("./useMediaSynchronizer.js"), exports);
+__exportStar(require("./useLiveEvent.js"), exports);
+__exportStar(require("./useLiveCanvas.js"), exports);
+__exportStar(require("./useLiveTimer.js"), exports);
+//# sourceMappingURL=index.js.map

package/bin/cjs/live-hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/live-hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC;AACrC,yDAAuC;AACvC,oDAAkC;AAClC,4DAA0C;AAC1C,oDAAkC;AAClC,qDAAmC;AACnC,oDAAkC"}

package/bin/cjs/live-hooks/useLiveCanvas.d.ts

@@ -0,0 +1,80 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Microsoft Live Share SDK License.
+ */
+import React from "react";
+import { IUseLiveCanvasOptionalProps, IUseLiveCanvasResults } from "../types/index.js";
+/**
+ * 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.
+ * This hook can only be used in a child component of `<LiveShareProvider>` or `<AzureProvider>`.
+ *
+ * @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 props Optional. Other optional props.
+ * @param props.active Optional. Stateful boolean that will activate/de-activate `InkingManager` accordingly.
+ * @param props.tool Optional. Stateful enum for what tool to use in the `InkingManager`.
+ * @param props.lineBrush Optional. Stateful lineBrush object for the selected lineBrush options to use in `InkingManager`.
+ * @param props.offset Optional. Stateful offset point to use in the `InkingManager`. Gets the viewport offset. Defaults to 0,0.
+ * @param props.scale Optional. Stateful scale number to use in the `InkingManager`. Defaults to 1 and must be greater than 0.
+ * @param props.referencePoint Optional. Stateful reference point enum to use in the `InkingManger`. Defaults to "center".
+ * @param props.isCursorShared Optional. Stateful boolean flag for whether cursor should be shared in `LiveCanvas`. Defaults to false.
+ * @param props.localUserPictureUrl Optional. url string for the local user to display alongside their cursor. Defaults to undefined.
+ * @param props.node Optional. A Fluid `LiveCanvasTree` `TreeNode` instance to swap out the underlying storage solution for strokes.
+ * To learn more, look at Fluid's [SharedTree](https://fluidframework.com/docs/data-structures/tree/) documentation.
+ * @param allowedRoles Optional. The user roles that are allowed to start/stop/pause the timer.
+ *
+ * @returns `IUseLiveCanvasResults` object that contains the `liveCanvas` data object and `inkingManager`.
+ *
+ * @example
+ ```jsx
+import { useLiveCanvas } from "@microsoft/live-share-react";
+import { InkingTool } from "@microsoft/live-share-canvas";
+import { useRef } from "react";
+
+// Unique identifier that distinguishes this useLiveCanvas from others in your app
+const UNIQUE_KEY = "CUSTOM-LIVE-CANVAS";
+
+// Example component
+export function ExampleLiveCanvas() {
+    const liveCanvasRef = useRef(null);
+    const { liveCanvas, inkingManager } = useLiveCanvas(
+        "CUSTOM-LIVE-CANVAS",
+        liveCanvasRef,
+    );
+
+    return (
+        <div style={{ position: "absolute"}}>
+            <div
+                ref={liveCanvasRef}
+                // Best practice is to not define inline styles
+                style={{ width: "556px", height: "224px" }}
+            />
+            {!!liveCanvas && (
+                <div>
+                    <button
+                        onClick={() => {
+                            inkingManager.tool = InkingTool.pen;
+                        }}
+                    >
+                        {"Pen"}
+                    </button>
+                    <button
+                        onClick={() => {
+                            inkingManager.tool = InkingTool.laserPointer;
+                        }}
+                    >
+                        {"Laser pointer"}
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+ ```
+ */
+export declare function useLiveCanvas(uniqueKey: string, canvasElementRef: React.RefObject<HTMLElement | null> | string, props?: IUseLiveCanvasOptionalProps): IUseLiveCanvasResults;
+//# sourceMappingURL=useLiveCanvas.d.ts.map

package/bin/cjs/live-hooks/useLiveCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveCanvas.d.ts","sourceRoot":"","sources":["../../../src/live-hooks/useLiveCanvas.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACH,2BAA2B,EAC3B,qBAAqB,EACxB,MAAM,mBAAmB,CAAC;AAK3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,wBAAgB,aAAa,CACzB,SAAS,EAAE,MAAM,EACjB,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,MAAM,EAC9D,KAAK,CAAC,EAAE,2BAA2B,GACpC,qBAAqB,CA0KvB"}

package/bin/cjs/live-hooks/useLiveCanvas.js

@@ -0,0 +1,244 @@
+"use strict";
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Microsoft Live Share SDK License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLiveCanvas = useLiveCanvas;
+const live_share_canvas_1 = require("@microsoft/live-share-canvas");
+const react_1 = __importDefault(require("react"));
+const index_js_1 = require("../shared-hooks/index.js");
+const index_js_2 = require("../utils/index.js");
+const tree_node_utils_js_1 = require("../shared-hooks/internals/tree-node-utils.js");
+const live_share_1 = require("@microsoft/live-share");
+/**
+ * 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.
+ * This hook can only be used in a child component of `<LiveShareProvider>` or `<AzureProvider>`.
+ *
+ * @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 props Optional. Other optional props.
+ * @param props.active Optional. Stateful boolean that will activate/de-activate `InkingManager` accordingly.
+ * @param props.tool Optional. Stateful enum for what tool to use in the `InkingManager`.
+ * @param props.lineBrush Optional. Stateful lineBrush object for the selected lineBrush options to use in `InkingManager`.
+ * @param props.offset Optional. Stateful offset point to use in the `InkingManager`. Gets the viewport offset. Defaults to 0,0.
+ * @param props.scale Optional. Stateful scale number to use in the `InkingManager`. Defaults to 1 and must be greater than 0.
+ * @param props.referencePoint Optional. Stateful reference point enum to use in the `InkingManger`. Defaults to "center".
+ * @param props.isCursorShared Optional. Stateful boolean flag for whether cursor should be shared in `LiveCanvas`. Defaults to false.
+ * @param props.localUserPictureUrl Optional. url string for the local user to display alongside their cursor. Defaults to undefined.
+ * @param props.node Optional. A Fluid `LiveCanvasTree` `TreeNode` instance to swap out the underlying storage solution for strokes.
+ * To learn more, look at Fluid's [SharedTree](https://fluidframework.com/docs/data-structures/tree/) documentation.
+ * @param allowedRoles Optional. The user roles that are allowed to start/stop/pause the timer.
+ *
+ * @returns `IUseLiveCanvasResults` object that contains the `liveCanvas` data object and `inkingManager`.
+ *
+ * @example
+ ```jsx
+import { useLiveCanvas } from "@microsoft/live-share-react";
+import { InkingTool } from "@microsoft/live-share-canvas";
+import { useRef } from "react";
+
+// Unique identifier that distinguishes this useLiveCanvas from others in your app
+const UNIQUE_KEY = "CUSTOM-LIVE-CANVAS";
+
+// Example component
+export function ExampleLiveCanvas() {
+    const liveCanvasRef = useRef(null);
+    const { liveCanvas, inkingManager } = useLiveCanvas(
+        "CUSTOM-LIVE-CANVAS",
+        liveCanvasRef,
+    );
+
+    return (
+        <div style={{ position: "absolute"}}>
+            <div
+                ref={liveCanvasRef}
+                // Best practice is to not define inline styles
+                style={{ width: "556px", height: "224px" }}
+            />
+            {!!liveCanvas && (
+                <div>
+                    <button
+                        onClick={() => {
+                            inkingManager.tool = InkingTool.pen;
+                        }}
+                    >
+                        {"Pen"}
+                    </button>
+                    <button
+                        onClick={() => {
+                            inkingManager.tool = InkingTool.laserPointer;
+                        }}
+                    >
+                        {"Laser pointer"}
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+ ```
+ */
+function useLiveCanvas(uniqueKey, canvasElementRef, props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    /**
+     * User facing: inking manager instance
+     */
+    const [inkingManager, setInkingManager] = react_1.default.useState();
+    /**
+     * User facing: dynamically load the DDS for the given unique key.
+     */
+    const { dds: liveCanvas } = (0, index_js_1.useDynamicDDS)(uniqueKey, live_share_canvas_1.LiveCanvas);
+    // This should change less frequently then node if they are using `useTreeNode`
+    // We need the raw node anyways to apply event listeners
+    const rawNode = (0, tree_node_utils_js_1.getRawNode)(props === null || props === void 0 ? void 0 : props.node);
+    /**
+     * Setup the InkingManager and LiveCanvas
+     */
+    react_1.default.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 ((0, index_js_2.isRefObject)(canvasElementRef)) {
+            htmlElement = canvasElementRef.current;
+        }
+        else {
+            htmlElement = document.getElementById(canvasElementRef);
+        }
+        if (htmlElement === null)
+            return;
+        // Clear out existing nodes
+        function removeAllChildren(node) {
+            node.childNodes.forEach((childNode) => {
+                removeAllChildren(childNode);
+                childNode.remove();
+            });
+        }
+        removeAllChildren(htmlElement);
+        // Create the InkingManager and initialize the liveCanvas with it
+        const inkingManager = new live_share_canvas_1.InkingManager(htmlElement);
+        setInkingManager(inkingManager);
+        liveCanvas.initialize(inkingManager, props === null || props === void 0 ? void 0 : props.allowedRoles, rawNode);
+        // cleanup function to be called when the component is unmount
+        return () => {
+            inkingManager.removeAllListeners();
+        };
+    }, 
+    // Intentionally ommitting rawNode from deps because we only want to initialize once,
+    // whereas rawNode may change many times.
+    [liveCanvas, props === null || props === void 0 ? void 0 : props.allowedRoles]);
+    /**
+     * Set the node if it changes while LiveCanvas is initialized
+     */
+    react_1.default.useEffect(() => {
+        if (!rawNode ||
+            (liveCanvas === null || liveCanvas === void 0 ? void 0 : liveCanvas.initializeState) !==
+                live_share_1.LiveDataObjectInitializeState.succeeded)
+            return;
+        liveCanvas.setTreeNode(rawNode);
+    }, [liveCanvas, rawNode]);
+    /**
+     * Activate or deactivate the inkingManager based on the 'active' prop
+     */
+    react_1.default.useEffect(() => {
+        if (inkingManager && (props === null || props === void 0 ? void 0 : props.active) !== undefined) {
+            if (props === null || props === void 0 ? void 0 : props.active) {
+                inkingManager.activate();
+            }
+            else {
+                inkingManager.deactivate();
+            }
+        }
+    }, [props === null || props === void 0 ? void 0 : props.active, inkingManager]);
+    /**
+     * Sets the tool of the inkingManager based on the 'tool' prop
+     */
+    react_1.default.useEffect(() => {
+        if (inkingManager && (props === null || props === void 0 ? void 0 : props.tool) !== undefined) {
+            inkingManager.tool = props.tool;
+        }
+    }, [props === null || props === void 0 ? void 0 : props.tool, inkingManager]);
+    /**
+     * Sets the offset of the inkingManager based on the 'offset' prop
+     */
+    react_1.default.useEffect(() => {
+        if (inkingManager && (props === null || props === void 0 ? void 0 : props.offset) !== undefined) {
+            inkingManager.offset = {
+                x: props === null || props === void 0 ? void 0 : props.offset.x,
+                y: props === null || props === void 0 ? void 0 : props.offset.y,
+            };
+        }
+    }, [(_a = props === null || props === void 0 ? void 0 : props.offset) === null || _a === void 0 ? void 0 : _a.x, (_b = props === null || props === void 0 ? void 0 : props.offset) === null || _b === void 0 ? void 0 : _b.y, inkingManager]);
+    /**
+     * Sets the scale of the inkingManager based on the 'scale' prop
+     */
+    react_1.default.useEffect(() => {
+        if (inkingManager && (props === null || props === void 0 ? void 0 : props.scale) !== undefined) {
+            inkingManager.scale = props === null || props === void 0 ? void 0 : props.scale;
+        }
+    }, [props === null || props === void 0 ? void 0 : props.scale, inkingManager]);
+    /**
+     * Sets the referencePoint of the inkingManager based on the 'referencePoint' prop
+     */
+    react_1.default.useEffect(() => {
+        if (inkingManager && (props === null || props === void 0 ? void 0 : props.referencePoint) !== undefined) {
+            inkingManager.referencePoint = props === null || props === void 0 ? void 0 : props.referencePoint;
+        }
+    }, [props === null || props === void 0 ? void 0 : props.referencePoint, inkingManager]);
+    /**
+     * Sets the lineBrush of the inkingManager based on the 'lineBrush' prop
+     */
+    react_1.default.useEffect(() => {
+        if (inkingManager && (props === null || props === void 0 ? void 0 : props.lineBrush)) {
+            inkingManager.lineBrush = {
+                color: props.lineBrush.color,
+                tip: props.lineBrush.tip,
+                tipSize: props.lineBrush.tipSize,
+                type: props.lineBrush.type,
+                endArrow: props.lineBrush.endArrow,
+            };
+        }
+    }, [
+        (_c = props === null || props === void 0 ? void 0 : props.lineBrush) === null || _c === void 0 ? void 0 : _c.color,
+        (_d = props === null || props === void 0 ? void 0 : props.lineBrush) === null || _d === void 0 ? void 0 : _d.tip,
+        (_e = props === null || props === void 0 ? void 0 : props.lineBrush) === null || _e === void 0 ? void 0 : _e.tipSize,
+        (_f = props === null || props === void 0 ? void 0 : props.lineBrush) === null || _f === void 0 ? void 0 : _f.type,
+        (_g = props === null || props === void 0 ? void 0 : props.lineBrush) === null || _g === void 0 ? void 0 : _g.endArrow,
+        inkingManager,
+    ]);
+    /**
+     * Sets the isCursorShared of the liveCanvas based on the 'isCursorShared' prop
+     */
+    react_1.default.useEffect(() => {
+        if (liveCanvas && (props === null || props === void 0 ? void 0 : props.isCursorShared) !== undefined) {
+            liveCanvas.isCursorShared = props.isCursorShared;
+        }
+    }, [props === null || props === void 0 ? void 0 : props.isCursorShared, liveCanvas]);
+    /**
+     * Sets the onGetLocalUserInfo method of the liveCanvas based on the 'localUserCursor' prop
+     */
+    react_1.default.useEffect(() => {
+        if (liveCanvas && (props === null || props === void 0 ? void 0 : props.localUserPictureUrl)) {
+            liveCanvas.onGetLocalUserPictureUrl = () => {
+                return props.localUserPictureUrl;
+            };
+        }
+    }, [props === null || props === void 0 ? void 0 : props.localUserPictureUrl, liveCanvas]);
+    /**
+     * Return hook response
+     */
+    return {
+        inkingManager,
+        liveCanvas,
+    };
+}
+//# sourceMappingURL=useLiveCanvas.js.map

package/bin/cjs/live-hooks/useLiveCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveCanvas.js","sourceRoot":"","sources":["../../../src/live-hooks/useLiveCanvas.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,59 @@
+/*!
+ * 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/index.js";
+/**
+ * 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.
+ * This hook can only be used in a child component of `<LiveShareProvider>` or `<AzureProvider>`.
+ *
+ * @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.
+ *
+ * @example
+ ```jsx
+import { useLiveEvent } from "@microsoft/live-share-react";
+
+const emojis = ["❤️", "😂", "👍", "👎"];
+
+// Define a unique key that differentiates this usage of `useLiveEvent` from others in your app
+const MY_UNIQUE_KEY = "event-key";
+
+// Example component for using useLiveEvent
+export const MyCustomEvent = () => {
+  const { latestEvent, liveEvent, sendEvent } = useLiveEvent(MY_UNIQUE_KEY);
+
+  // Render loading UI when creating LiveEvent instance for first time
+  if (!liveEvent) return <>Loading...</>;
+
+  // Render UI
+  return (
+    <div>
+      {`Latest event: ${latestEvent?.value}, from local user: ${latestEvent?.local}`}
+      {"Select a planet below:"}
+      {emojis.map((emoji) => (
+        <button
+          key={emoji}
+          onClick={() => {
+            sendEvent(emoji);
+          }}
+        >
+          {emoji}
+        </button>
+      ))}
+    </div>
+  );
+};
+ ```
+ */
+export declare function useLiveEvent<TEvent = any>(uniqueKey: string, allowedRoles?: UserMeetingRole[], onReceivedEvent?: OnReceivedLiveEventAction<TEvent>): IUseLiveEventResults<TEvent>;
+//# sourceMappingURL=useLiveEvent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveEvent.d.ts","sourceRoot":"","sources":["../../../src/live-hooks/useLiveEvent.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAEH,eAAe,EAGlB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,oBAAoB,EACpB,yBAAyB,EAE5B,MAAM,mBAAmB,CAAC;AAU3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,YAAY,CAAC,MAAM,GAAG,GAAG,EACrC,SAAS,EAAE,MAAM,EACjB,YAAY,CAAC,EAAE,eAAe,EAAE,EAChC,eAAe,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,GACpD,oBAAoB,CAAC,MAAM,CAAC,CAoG9B"}