@veltdev/react 1.0.117 → 1.0.119

package/cjs/types/components/SnippylyComments/SnippylyComments.d.ts

@@ -51,6 +51,7 @@ export interface IVeltCommentsProps extends React.DetailedHTMLProps<React.HTMLAt
     pinShadowDom?: boolean;
     dialogShadowDom?: boolean;
     shadowDom?: boolean;
+    changeDetectionInCommentMode?: boolean;
     allowedElementIds?: string[];
     allowedElementClassNames?: string[];
     allowedElementQuerySelectors?: string[];

package/cjs/types/hooks/LiveStateSyncElement.d.ts

@@ -33,4 +33,7 @@ export declare function useEditorAccessRequestHandler(): {
 /**
  * @beta This hook is in beta
  */
-export declare function useLiveState<T>(liveStateDataId: string, initialValue?: any, debounceTime?: number): [T, (value: T) => void];
+export declare function useLiveState<T>(liveStateDataId: string, initialValue?: any, options?: {
+    syncDuration?: number;
+    resetLiveState?: boolean;
+}): [T, (value: T) => void];

package/esm/index.js

@@ -225,76 +225,126 @@ var SnippylyCommentBubble = function (props) {
 };
 
 var SnippylyComments = function (props) {
-    var autoCategorize = props.autoCategorize, streamViewContainerId = props.streamViewContainerId, onSignIn = props.onSignIn, onUpgrade = props.onUpgrade, textMode = props.textMode, popoverMode = props.popoverMode, popoverTriangleComponent = props.popoverTriangleComponent, floatingCommentDialog = props.floatingCommentDialog, moderatorMode = props.moderatorMode, streamMode = props.streamMode, signInButton = props.signInButton, upgradeButton = props.upgradeButton, attachments = props.attachments, recordings = props.recordings, reactions = props.reactions, deviceInfo = props.deviceInfo, commentIndex = props.commentIndex, dialogOnHover = props.dialogOnHover, dialogOnTargetElementClick = props.dialogOnTargetElementClick, priority = props.priority, inboxMode = props.inboxMode, suggestionMode = props.suggestionMode, mobileMode = props.mobileMode, inlineCommentMode = props.inlineCommentMode, privateCommentMode = props.privateCommentMode, minimap = props.minimap, persistentCommentMode = props.persistentCommentMode, ghostComments = props.ghostComments, ghostCommentsIndicator = props.ghostCommentsIndicator, commentsOnDom = props.commentsOnDom, commentTool = props.commentTool, sidebarButtonOnCommentDialog = props.sidebarButtonOnCommentDialog, deviceIndicatorOnCommentPins = props.deviceIndicatorOnCommentPins, scrollToComment = props.scrollToComment, userMentions = props.userMentions, deleteOnBackspace = props.deleteOnBackspace, hotkey = props.hotkey, recordingSummary = props.recordingSummary, recordingCountdown = props.recordingCountdown, unreadIndicatorMode = props.unreadIndicatorMode, pinShadowDom = props.pinShadowDom, dialogShadowDom = props.dialogShadowDom, shadowDom = props.shadowDom, allowedElementIds = props.allowedElementIds, allowedElementClassNames = props.allowedElementClassNames, allowedElementQuerySelectors = props.allowedElementQuerySelectors, onCommentAdd = props.onCommentAdd, onCommentUpdate = props.onCommentUpdate, onCommentAccept = props.onCommentAccept, onCommentReject = props.onCommentReject, onSidebarButtonOnCommentDialogClick = props.onSidebarButtonOnCommentDialogClick, customStatus = props.customStatus, customPriority = props.customPriority, customCategory = props.customCategory, status = props.status, resolveButton = props.resolveButton, darkMode = props.darkMode, onCustomPinInject = props.onCustomPinInject, children = props.children;
+    var autoCategorize = props.autoCategorize, streamViewContainerId = props.streamViewContainerId, onSignIn = props.onSignIn, onUpgrade = props.onUpgrade, textMode = props.textMode, popoverMode = props.popoverMode, popoverTriangleComponent = props.popoverTriangleComponent, floatingCommentDialog = props.floatingCommentDialog, moderatorMode = props.moderatorMode, streamMode = props.streamMode, signInButton = props.signInButton, upgradeButton = props.upgradeButton, attachments = props.attachments, recordings = props.recordings, reactions = props.reactions, deviceInfo = props.deviceInfo, commentIndex = props.commentIndex, dialogOnHover = props.dialogOnHover, dialogOnTargetElementClick = props.dialogOnTargetElementClick, priority = props.priority, inboxMode = props.inboxMode, suggestionMode = props.suggestionMode, mobileMode = props.mobileMode, inlineCommentMode = props.inlineCommentMode, privateCommentMode = props.privateCommentMode, minimap = props.minimap, persistentCommentMode = props.persistentCommentMode, ghostComments = props.ghostComments, ghostCommentsIndicator = props.ghostCommentsIndicator, commentsOnDom = props.commentsOnDom, commentTool = props.commentTool, sidebarButtonOnCommentDialog = props.sidebarButtonOnCommentDialog, deviceIndicatorOnCommentPins = props.deviceIndicatorOnCommentPins, scrollToComment = props.scrollToComment, userMentions = props.userMentions, deleteOnBackspace = props.deleteOnBackspace, hotkey = props.hotkey, recordingSummary = props.recordingSummary, recordingCountdown = props.recordingCountdown, unreadIndicatorMode = props.unreadIndicatorMode, pinShadowDom = props.pinShadowDom, dialogShadowDom = props.dialogShadowDom, shadowDom = props.shadowDom, changeDetectionInCommentMode = props.changeDetectionInCommentMode, allowedElementIds = props.allowedElementIds, allowedElementClassNames = props.allowedElementClassNames, allowedElementQuerySelectors = props.allowedElementQuerySelectors, onCommentAdd = props.onCommentAdd, onCommentUpdate = props.onCommentUpdate, onCommentAccept = props.onCommentAccept, onCommentReject = props.onCommentReject, onSidebarButtonOnCommentDialogClick = props.onSidebarButtonOnCommentDialogClick, customStatus = props.customStatus, customPriority = props.customPriority, customCategory = props.customCategory, status = props.status, resolveButton = props.resolveButton, darkMode = props.darkMode, onCustomPinInject = props.onCustomPinInject, children = props.children;
     var ref = useRef();
+    var onSignInRef = useRef(onSignIn);
+    var onUpgradeRef = useRef(onUpgrade);
+    var onCommentAddRef = useRef(onCommentAdd);
+    var onCommentUpdateRef = useRef(onCommentUpdate);
+    var onCommentAcceptRef = useRef(onCommentAccept);
+    var onCommentRejectRef = useRef(onCommentReject);
+    var onSidebarButtonOnCommentDialogClickRef = useRef(onSidebarButtonOnCommentDialogClick);
+    var onCustomPinInjectRef = useRef(onCustomPinInject);
+    // Update the ref to always point to the latest callback function
+    useEffect(function () {
+        onSignInRef.current = onSignIn;
+    }, [onSignIn]);
+    useEffect(function () {
+        onUpgradeRef.current = onUpgrade;
+    }, [onUpgrade]);
+    useEffect(function () {
+        onCommentAddRef.current = onCommentAdd;
+    }, [onCommentAdd]);
+    useEffect(function () {
+        onCommentUpdateRef.current = onCommentUpdate;
+    }, [onCommentUpdate]);
+    useEffect(function () {
+        onCommentAcceptRef.current = onCommentAccept;
+    }, [onCommentAccept]);
+    useEffect(function () {
+        onCommentRejectRef.current = onCommentReject;
+    }, [onCommentReject]);
+    useEffect(function () {
+        onSidebarButtonOnCommentDialogClickRef.current = onSidebarButtonOnCommentDialogClick;
+    }, [onSidebarButtonOnCommentDialogClick]);
+    useEffect(function () {
+        onCustomPinInjectRef.current = onCustomPinInject;
+    }, [onCustomPinInject]);
     useEffect(function () {
         if (ref.current) {
             var element = ref.current;
             element.addEventListener('onSignIn', function (event) {
-                if (onSignIn) {
-                    onSignIn(event === null || event === void 0 ? void 0 : event.detail);
+                if (onSignInRef.current) {
+                    onSignInRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
             element.addEventListener('onUpgrade', function (event) {
-                if (onUpgrade) {
-                    onUpgrade(event === null || event === void 0 ? void 0 : event.detail);
+                if (onUpgradeRef.current) {
+                    onUpgradeRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
             element.addEventListener('onCommentAdd', function (event) {
-                if (onCommentAdd) {
-                    onCommentAdd(event === null || event === void 0 ? void 0 : event.detail);
+                if (onCommentAddRef.current) {
+                    onCommentAddRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
             element.addEventListener('onCommentUpdate', function (event) {
-                if (onCommentUpdate) {
-                    onCommentUpdate(event === null || event === void 0 ? void 0 : event.detail);
+                if (onCommentUpdateRef.current) {
+                    onCommentUpdateRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
             element.addEventListener('onCommentAccept', function (event) {
-                if (onCommentAccept) {
-                    onCommentAccept(event === null || event === void 0 ? void 0 : event.detail);
+                if (onCommentAcceptRef.current) {
+                    onCommentAcceptRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
             element.addEventListener('onCommentReject', function (event) {
-                if (onCommentReject) {
-                    onCommentReject(event === null || event === void 0 ? void 0 : event.detail);
+                if (onCommentRejectRef.current) {
+                    onCommentRejectRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
             element.addEventListener('onSidebarButtonOnCommentDialogClick', function (event) {
-                if (onSidebarButtonOnCommentDialogClick) {
-                    onSidebarButtonOnCommentDialogClick(event === null || event === void 0 ? void 0 : event.detail);
+                if (onSidebarButtonOnCommentDialogClickRef.current) {
+                    onSidebarButtonOnCommentDialogClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
             element.addEventListener('onCustomPinInject', function (event) {
-                if (onCustomPinInject) {
-                    onCustomPinInject(event === null || event === void 0 ? void 0 : event.detail);
+                if (onCustomPinInjectRef.current) {
+                    onCustomPinInjectRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
         }
     }, []);
-    return (React.createElement("velt-comments", { ref: ref, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "comment-tool": [true, false].includes(commentTool) ? (commentTool ? 'true' : 'false') : undefined, "sidebar-button-on-comment-dialog": [true, false].includes(sidebarButtonOnCommentDialog) ? (sidebarButtonOnCommentDialog ? 'true' : 'false') : undefined, "device-indicator-on-comment-pins": [true, false].includes(deviceIndicatorOnCommentPins) ? (deviceIndicatorOnCommentPins ? 'true' : 'false') : undefined, "scroll-to-comment": [true, false].includes(scrollToComment) ? (scrollToComment ? 'true' : 'false') : undefined, "user-mentions": [true, false].includes(userMentions) ? (userMentions ? 'true' : 'false') : undefined, "delete-on-backspace": [true, false].includes(deleteOnBackspace) ? (deleteOnBackspace ? 'true' : 'false') : undefined, hotkey: [true, false].includes(hotkey) ? (hotkey ? 'true' : 'false') : undefined, "recording-summary": [true, false].includes(recordingSummary) ? (recordingSummary ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "unread-indicator-mode": unreadIndicatorMode, "pin-shadow-dom": [true, false].includes(pinShadowDom) ? (pinShadowDom ? 'true' : 'false') : undefined, "dialog-shadow-dom": [true, false].includes(dialogShadowDom) ? (dialogShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "custom-status": JSON.stringify(customStatus), "custom-priority": JSON.stringify(customPriority), "custom-category": JSON.stringify(customCategory), "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
+    return (React.createElement("velt-comments", { ref: ref, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "comment-tool": [true, false].includes(commentTool) ? (commentTool ? 'true' : 'false') : undefined, "sidebar-button-on-comment-dialog": [true, false].includes(sidebarButtonOnCommentDialog) ? (sidebarButtonOnCommentDialog ? 'true' : 'false') : undefined, "device-indicator-on-comment-pins": [true, false].includes(deviceIndicatorOnCommentPins) ? (deviceIndicatorOnCommentPins ? 'true' : 'false') : undefined, "scroll-to-comment": [true, false].includes(scrollToComment) ? (scrollToComment ? 'true' : 'false') : undefined, "user-mentions": [true, false].includes(userMentions) ? (userMentions ? 'true' : 'false') : undefined, "delete-on-backspace": [true, false].includes(deleteOnBackspace) ? (deleteOnBackspace ? 'true' : 'false') : undefined, hotkey: [true, false].includes(hotkey) ? (hotkey ? 'true' : 'false') : undefined, "recording-summary": [true, false].includes(recordingSummary) ? (recordingSummary ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "unread-indicator-mode": unreadIndicatorMode, "pin-shadow-dom": [true, false].includes(pinShadowDom) ? (pinShadowDom ? 'true' : 'false') : undefined, "dialog-shadow-dom": [true, false].includes(dialogShadowDom) ? (dialogShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "change-detection-in-comment-mode": [true, false].includes(changeDetectionInCommentMode) ? (changeDetectionInCommentMode ? 'true' : 'false') : undefined, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "custom-status": JSON.stringify(customStatus), "custom-priority": JSON.stringify(customPriority), "custom-category": JSON.stringify(customCategory), "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyCommentsSidebar = function (props) {
     var embedMode = props.embedMode, enableUrlNavigation = props.enableUrlNavigation, urlNavigation = props.urlNavigation, pageMode = props.pageMode, currentLocationSuffix = props.currentLocationSuffix, sortData = props.sortData, filterConfig = props.filterConfig, groupConfig = props.groupConfig, filters = props.filters, variant = props.variant, pageModeComposerVariant = props.pageModeComposerVariant, dialogVariant = props.dialogVariant, shadowDom = props.shadowDom, openSidebar = props.openSidebar, onSidebarOpen = props.onSidebarOpen, onSidebarCommentClick = props.onSidebarCommentClick, onCommentClick = props.onCommentClick;
     var ref = useRef();
+    var openSidebarRef = useRef(openSidebar);
+    var onSidebarOpenRef = useRef(onSidebarOpen);
+    var onSidebarCommentClickRef = useRef(onSidebarCommentClick);
+    var onCommentClickRef = useRef(onCommentClick);
+    // Update the ref to always point to the latest callback function
+    useEffect(function () {
+        openSidebarRef.current = openSidebar;
+    }, [openSidebar]);
+    useEffect(function () {
+        onSidebarOpenRef.current = onSidebarOpen;
+    }, [onSidebarOpen]);
+    useEffect(function () {
+        onSidebarCommentClickRef.current = onSidebarCommentClick;
+    }, [onSidebarCommentClick]);
+    useEffect(function () {
+        onCommentClickRef.current = onCommentClick;
+    }, [onCommentClick]);
     useEffect(function () {
         if (ref.current) {
             var element = ref.current;
             element.addEventListener('onSidebarOpen', function (event) {
-                if (openSidebar) {
-                    openSidebar(event === null || event === void 0 ? void 0 : event.detail);
+                if (openSidebarRef.current) {
+                    openSidebarRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
-                if (onSidebarOpen) {
-                    onSidebarOpen(event === null || event === void 0 ? void 0 : event.detail);
+                if (onSidebarOpenRef.current) {
+                    onSidebarOpenRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
             element.addEventListener('onSidebarCommentClick', function (event) {
-                if (onSidebarCommentClick) {
-                    onSidebarCommentClick(event === null || event === void 0 ? void 0 : event.detail);
+                if (onSidebarCommentClickRef.current) {
+                    onSidebarCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
-                if (onCommentClick) {
-                    onCommentClick(event === null || event === void 0 ? void 0 : event.detail);
+                if (onCommentClickRef.current) {
+                    onCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
         }
@@ -305,12 +355,17 @@ var SnippylyCommentsSidebar = function (props) {
 var SnippylyCommentTool = function (props) {
     var targetCommentElementId = props.targetCommentElementId, onCommentModeChange = props.onCommentModeChange, children = props.children, darkMode = props.darkMode, variant = props.variant;
     var ref = useRef();
+    var onCommentModeChangeRef = useRef(onCommentModeChange);
+    // Update the ref to always point to the latest callback function
+    useEffect(function () {
+        onCommentModeChangeRef.current = onCommentModeChange;
+    }, [onCommentModeChange]);
     useEffect(function () {
         if (ref.current) {
             var element = ref.current;
             element.addEventListener('onCommentModeChange', function (event) {
-                if (onCommentModeChange) {
-                    onCommentModeChange(event === null || event === void 0 ? void 0 : event.detail);
+                if (onCommentModeChangeRef.current) {
+                    onCommentModeChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
         }
@@ -321,15 +376,24 @@ var SnippylyCommentTool = function (props) {
 var SnippylyCursor = function (props) {
     var allowedElementIds = props.allowedElementIds, avatarMode = props.avatarMode, inactivityTime = props.inactivityTime, onCursorUsersChanged = props.onCursorUsersChanged, onCursorUserChange = props.onCursorUserChange, children = props.children;
     var ref = useRef();
+    var onCursorUsersChangedRef = useRef(onCursorUsersChanged);
+    var onCursorUserChangeRef = useRef(onCursorUserChange);
+    // Update the ref to always point to the latest callback function
+    useEffect(function () {
+        onCursorUsersChangedRef.current = onCursorUsersChanged;
+    }, [onCursorUsersChanged]);
+    useEffect(function () {
+        onCursorUserChangeRef.current = onCursorUserChange;
+    }, [onCursorUserChange]);
     useEffect(function () {
         if (ref.current) {
             var element = ref.current;
             element.addEventListener('onCursorUserChange', function (event) {
-                if (onCursorUsersChanged) {
-                    onCursorUsersChanged(event === null || event === void 0 ? void 0 : event.detail);
+                if (onCursorUsersChangedRef.current) {
+                    onCursorUsersChangedRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
-                if (onCursorUserChange) {
-                    onCursorUserChange(event === null || event === void 0 ? void 0 : event.detail);
+                if (onCursorUserChangeRef.current) {
+                    onCursorUserChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
         }
@@ -350,25 +414,42 @@ var SnippylyHuddleTool = function (props) {
 var SnippylyPresence = function (props) {
     var maxUsers = props.maxUsers, inactivityTime = props.inactivityTime, documentParams = props.documentParams, location = props.location, self = props.self, onPresenceUserClick = props.onPresenceUserClick, onUsersChanged = props.onUsersChanged, onPresenceUserChange = props.onPresenceUserChange, disableFlockNavigation = props.disableFlockNavigation, defaultFlockNavigation = props.defaultFlockNavigation, onNavigate = props.onNavigate, flockMode = props.flockMode;
     var ref = useRef();
+    var onUsersChangedRef = useRef(onUsersChanged);
+    var onPresenceUserChangeRef = useRef(onPresenceUserChange);
+    var onNavigateRef = useRef(onNavigate);
+    var onPresenceUserClickRef = useRef(onPresenceUserClick);
+    // Update the ref to always point to the latest callback function
+    useEffect(function () {
+        onUsersChangedRef.current = onUsersChanged;
+    }, [onUsersChanged]);
+    useEffect(function () {
+        onPresenceUserChangeRef.current = onPresenceUserChange;
+    }, [onPresenceUserChange]);
+    useEffect(function () {
+        onNavigateRef.current = onNavigate;
+    }, [onNavigate]);
+    useEffect(function () {
+        onPresenceUserClickRef.current = onPresenceUserClick;
+    }, [onPresenceUserClick]);
     useEffect(function () {
         if (ref.current) {
             var element = ref.current;
             element.addEventListener('onPresenceUserChange', function (event) {
-                if (onUsersChanged) {
-                    onUsersChanged(event === null || event === void 0 ? void 0 : event.detail);
+                if (onUsersChangedRef.current) {
+                    onUsersChangedRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
-                if (onPresenceUserChange) {
-                    onPresenceUserChange(event === null || event === void 0 ? void 0 : event.detail);
+                if (onPresenceUserChangeRef.current) {
+                    onPresenceUserChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
             element.addEventListener('onNavigate', function (event) {
-                if (onNavigate) {
-                    onNavigate(event === null || event === void 0 ? void 0 : event.detail);
+                if (onNavigateRef.current) {
+                    onNavigateRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
             element.addEventListener('onPresenceUserClick', function (event) {
-                if (onPresenceUserClick) {
-                    onPresenceUserClick(event === null || event === void 0 ? void 0 : event.detail);
+                if (onPresenceUserClickRef.current) {
+                    onPresenceUserClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
         }
@@ -379,12 +460,17 @@ var SnippylyPresence = function (props) {
 var SnippylyRecorderControlPanel = function (props) {
     var mode = props.mode, panelId = props.panelId, onRecordedData = props.onRecordedData;
     var ref = useRef();
+    var onRecordedDataRef = useRef(onRecordedData);
+    // Update the ref to always point to the latest callback function
+    useEffect(function () {
+        onRecordedDataRef.current = onRecordedData;
+    }, [onRecordedData]);
     useEffect(function () {
         if (ref.current) {
             var element = ref.current;
             element.addEventListener('onRecordedData', function (event) {
-                if (onRecordedData) {
-                    onRecordedData(event === null || event === void 0 ? void 0 : event.detail);
+                if (onRecordedDataRef.current) {
+                    onRecordedDataRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
         }
@@ -399,12 +485,17 @@ var SnippylyRecorderNotes = function (props) {
 var SnippylyRecorderPlayer = function (props) {
     var recorderId = props.recorderId, onDelete = props.onDelete, showSummary = props.showSummary, summary = props.summary;
     var ref = useRef();
+    var onDeleteRef = useRef(onDelete);
+    // Update the ref to always point to the latest callback function
+    useEffect(function () {
+        onDeleteRef.current = onDelete;
+    }, [onDelete]);
     useEffect(function () {
         if (ref.current) {
             var element = ref.current;
             element === null || element === void 0 ? void 0 : element.addEventListener('onDelete', function (event) {
-                if (onDelete) {
-                    onDelete(event === null || event === void 0 ? void 0 : event.detail);
+                if (onDeleteRef.current) {
+                    onDeleteRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
         }
@@ -454,12 +545,17 @@ var SnippylyUserRequestTool = function (props) {
 var VeltCommentPlayerTimeline = function (props) {
     var totalMediaLength = props.totalMediaLength, onCommentClick = props.onCommentClick;
     var ref = useRef();
+    var onCommentClickRef = useRef(onCommentClick);
+    // Update the ref to always point to the latest callback function
+    useEffect(function () {
+        onCommentClickRef.current = onCommentClick;
+    }, [onCommentClick]);
     useEffect(function () {
         if (ref.current) {
             var element = ref.current;
             element.addEventListener('onCommentClick', function (event) {
-                if (onCommentClick) {
-                    onCommentClick(event === null || event === void 0 ? void 0 : event.detail);
+                if (onCommentClickRef.current) {
+                    onCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
         }
@@ -485,12 +581,17 @@ var VeltCommentThread = function (props) {
 var VeltNotificationsTool = function (props) {
     var children = props.children, darkMode = props.darkMode, onNotificationClick = props.onNotificationClick;
     var ref = useRef();
+    var onNotificationClickRef = useRef(onNotificationClick);
+    // Update the ref to always point to the latest callback function
+    useEffect(function () {
+        onNotificationClickRef.current = onNotificationClick;
+    }, [onNotificationClick]);
     useEffect(function () {
         if (ref.current) {
             var element = ref.current;
             element.addEventListener('onNotificationClick', function (event) {
-                if (onNotificationClick) {
-                    onNotificationClick(event === null || event === void 0 ? void 0 : event.detail);
+                if (onNotificationClickRef.current) {
+                    onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
         }
@@ -501,12 +602,17 @@ var VeltNotificationsTool = function (props) {
 var VeltNotificationsPanel = function (props) {
     var darkMode = props.darkMode, onNotificationClick = props.onNotificationClick;
     var ref = useRef();
+    var onNotificationClickRef = useRef(onNotificationClick);
+    // Update the ref to always point to the latest callback function
+    useEffect(function () {
+        onNotificationClickRef.current = onNotificationClick;
+    }, [onNotificationClick]);
     useEffect(function () {
         if (ref.current) {
             var element = ref.current;
             element.addEventListener('onNotificationClick', function (event) {
-                if (onNotificationClick) {
-                    onNotificationClick(event === null || event === void 0 ? void 0 : event.detail);
+                if (onNotificationClickRef.current) {
+                    onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
         }
@@ -517,12 +623,17 @@ var VeltNotificationsPanel = function (props) {
 var VeltNotificationsHistoryPanel = function (props) {
     var embedMode = props.embedMode, darkMode = props.darkMode, onNotificationClick = props.onNotificationClick;
     var ref = useRef();
+    var onNotificationClickRef = useRef(onNotificationClick);
+    // Update the ref to always point to the latest callback function
+    useEffect(function () {
+        onNotificationClickRef.current = onNotificationClick;
+    }, [onNotificationClick]);
     useEffect(function () {
         if (ref.current) {
             var element = ref.current;
             element.addEventListener('onNotificationClick', function (event) {
-                if (onNotificationClick) {
-                    onNotificationClick(event === null || event === void 0 ? void 0 : event.detail);
+                if (onNotificationClickRef.current) {
+                    onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
                 }
             });
         }
@@ -1873,18 +1984,45 @@ function useEditorAccessRequestHandler() {
 /**
  * @beta This hook is in beta
  */
-function useLiveState(liveStateDataId, initialValue, debounceTime) {
-    if (debounceTime === void 0) { debounceTime = 50; }
+function useLiveState(liveStateDataId, initialValue, options) {
     var liveStateSyncElement = useLiveStateSyncUtils();
-    var _a = React.useState(initialValue), data = _a[0], setData = _a[1];
+    var client = useVeltClient().client;
+    var _a = React.useState(null), documentId = _a[0], setDocumentId = _a[1];
+    var _b = React.useState(null), user = _b[0], setUser = _b[1];
+    var _c = React.useState(initialValue), data = _c[0], setData = _c[1];
+    useEffect(function () {
+        resetLiveStateData();
+    }, [documentId, user]);
+    var resetLiveStateData = function () {
+        if (user && documentId) {
+            liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.setLiveStateData(liveStateDataId, data);
+        }
+    };
     useEffect(function () {
         if (!(liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.getLiveStateData))
             return;
+        var documentPathsSubscription, userSubscription;
+        if (options === null || options === void 0 ? void 0 : options.resetLiveState) {
+            documentPathsSubscription = client.docService.getDocumentPaths$().subscribe(function (paths) {
+                if (paths) {
+                    setDocumentId(paths === null || paths === void 0 ? void 0 : paths.documentId);
+                    documentPathsSubscription === null || documentPathsSubscription === void 0 ? void 0 : documentPathsSubscription.unsubscribe();
+                }
+            });
+            userSubscription = client.authService.getUser$().subscribe(function (user) {
+                if (user) {
+                    setUser(user);
+                    userSubscription === null || userSubscription === void 0 ? void 0 : userSubscription.unsubscribe();
+                }
+            });
+        }
         var subscription = liveStateSyncElement.getLiveStateData(liveStateDataId).subscribe(function (res) {
             setData(res);
         });
         return function () {
             subscription.unsubscribe();
+            documentPathsSubscription === null || documentPathsSubscription === void 0 ? void 0 : documentPathsSubscription.unsubscribe();
+            userSubscription === null || userSubscription === void 0 ? void 0 : userSubscription.unsubscribe();
         };
     }, [liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.getLiveStateData]);
     var useDebounce = function (callback) {
@@ -1905,7 +2043,7 @@ function useLiveState(liveStateDataId, initialValue, debounceTime) {
     };
     var setDataFunction = function (value) {
         setData(value);
-        debouncedOnInput(value, debounceTime); // default 50ms debounce time
+        debouncedOnInput(value, (options === null || options === void 0 ? void 0 : options.syncDuration) >= 0 ? options === null || options === void 0 ? void 0 : options.syncDuration : 50); // default 50ms debounce time
     };
     var debouncedOnInput = useDebounce(function (value) {
         if (liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.setLiveStateData) {