@veltdev/react 1.0.117 → 1.0.118

package/cjs/index.js

@@ -233,76 +233,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 = React.useRef();
+    var onSignInRef = React.useRef(onSignIn);
+    var onUpgradeRef = React.useRef(onUpgrade);
+    var onCommentAddRef = React.useRef(onCommentAdd);
+    var onCommentUpdateRef = React.useRef(onCommentUpdate);
+    var onCommentAcceptRef = React.useRef(onCommentAccept);
+    var onCommentRejectRef = React.useRef(onCommentReject);
+    var onSidebarButtonOnCommentDialogClickRef = React.useRef(onSidebarButtonOnCommentDialogClick);
+    var onCustomPinInjectRef = React.useRef(onCustomPinInject);
+    // Update the ref to always point to the latest callback function
+    React.useEffect(function () {
+        onSignInRef.current = onSignIn;
+    }, [onSignIn]);
+    React.useEffect(function () {
+        onUpgradeRef.current = onUpgrade;
+    }, [onUpgrade]);
+    React.useEffect(function () {
+        onCommentAddRef.current = onCommentAdd;
+    }, [onCommentAdd]);
+    React.useEffect(function () {
+        onCommentUpdateRef.current = onCommentUpdate;
+    }, [onCommentUpdate]);
+    React.useEffect(function () {
+        onCommentAcceptRef.current = onCommentAccept;
+    }, [onCommentAccept]);
+    React.useEffect(function () {
+        onCommentRejectRef.current = onCommentReject;
+    }, [onCommentReject]);
+    React.useEffect(function () {
+        onSidebarButtonOnCommentDialogClickRef.current = onSidebarButtonOnCommentDialogClick;
+    }, [onSidebarButtonOnCommentDialogClick]);
+    React.useEffect(function () {
+        onCustomPinInjectRef.current = onCustomPinInject;
+    }, [onCustomPinInject]);
     React.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__default["default"].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__default["default"].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 = React.useRef();
+    var openSidebarRef = React.useRef(openSidebar);
+    var onSidebarOpenRef = React.useRef(onSidebarOpen);
+    var onSidebarCommentClickRef = React.useRef(onSidebarCommentClick);
+    var onCommentClickRef = React.useRef(onCommentClick);
+    // Update the ref to always point to the latest callback function
+    React.useEffect(function () {
+        openSidebarRef.current = openSidebar;
+    }, [openSidebar]);
+    React.useEffect(function () {
+        onSidebarOpenRef.current = onSidebarOpen;
+    }, [onSidebarOpen]);
+    React.useEffect(function () {
+        onSidebarCommentClickRef.current = onSidebarCommentClick;
+    }, [onSidebarCommentClick]);
+    React.useEffect(function () {
+        onCommentClickRef.current = onCommentClick;
+    }, [onCommentClick]);
     React.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);
                 }
             });
         }
@@ -313,12 +363,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 = React.useRef();
+    var onCommentModeChangeRef = React.useRef(onCommentModeChange);
+    // Update the ref to always point to the latest callback function
+    React.useEffect(function () {
+        onCommentModeChangeRef.current = onCommentModeChange;
+    }, [onCommentModeChange]);
     React.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);
                 }
             });
         }
@@ -329,15 +384,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 = React.useRef();
+    var onCursorUsersChangedRef = React.useRef(onCursorUsersChanged);
+    var onCursorUserChangeRef = React.useRef(onCursorUserChange);
+    // Update the ref to always point to the latest callback function
+    React.useEffect(function () {
+        onCursorUsersChangedRef.current = onCursorUsersChanged;
+    }, [onCursorUsersChanged]);
+    React.useEffect(function () {
+        onCursorUserChangeRef.current = onCursorUserChange;
+    }, [onCursorUserChange]);
     React.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);
                 }
             });
         }
@@ -358,25 +422,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 = React.useRef();
+    var onUsersChangedRef = React.useRef(onUsersChanged);
+    var onPresenceUserChangeRef = React.useRef(onPresenceUserChange);
+    var onNavigateRef = React.useRef(onNavigate);
+    var onPresenceUserClickRef = React.useRef(onPresenceUserClick);
+    // Update the ref to always point to the latest callback function
+    React.useEffect(function () {
+        onUsersChangedRef.current = onUsersChanged;
+    }, [onUsersChanged]);
+    React.useEffect(function () {
+        onPresenceUserChangeRef.current = onPresenceUserChange;
+    }, [onPresenceUserChange]);
+    React.useEffect(function () {
+        onNavigateRef.current = onNavigate;
+    }, [onNavigate]);
+    React.useEffect(function () {
+        onPresenceUserClickRef.current = onPresenceUserClick;
+    }, [onPresenceUserClick]);
     React.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);
                 }
             });
         }
@@ -387,12 +468,17 @@ var SnippylyPresence = function (props) {
 var SnippylyRecorderControlPanel = function (props) {
     var mode = props.mode, panelId = props.panelId, onRecordedData = props.onRecordedData;
     var ref = React.useRef();
+    var onRecordedDataRef = React.useRef(onRecordedData);
+    // Update the ref to always point to the latest callback function
+    React.useEffect(function () {
+        onRecordedDataRef.current = onRecordedData;
+    }, [onRecordedData]);
     React.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);
                 }
             });
         }
@@ -407,12 +493,17 @@ var SnippylyRecorderNotes = function (props) {
 var SnippylyRecorderPlayer = function (props) {
     var recorderId = props.recorderId, onDelete = props.onDelete, showSummary = props.showSummary, summary = props.summary;
     var ref = React.useRef();
+    var onDeleteRef = React.useRef(onDelete);
+    // Update the ref to always point to the latest callback function
+    React.useEffect(function () {
+        onDeleteRef.current = onDelete;
+    }, [onDelete]);
     React.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);
                 }
             });
         }
@@ -462,12 +553,17 @@ var SnippylyUserRequestTool = function (props) {
 var VeltCommentPlayerTimeline = function (props) {
     var totalMediaLength = props.totalMediaLength, onCommentClick = props.onCommentClick;
     var ref = React.useRef();
+    var onCommentClickRef = React.useRef(onCommentClick);
+    // Update the ref to always point to the latest callback function
+    React.useEffect(function () {
+        onCommentClickRef.current = onCommentClick;
+    }, [onCommentClick]);
     React.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);
                 }
             });
         }
@@ -493,12 +589,17 @@ var VeltCommentThread = function (props) {
 var VeltNotificationsTool = function (props) {
     var children = props.children, darkMode = props.darkMode, onNotificationClick = props.onNotificationClick;
     var ref = React.useRef();
+    var onNotificationClickRef = React.useRef(onNotificationClick);
+    // Update the ref to always point to the latest callback function
+    React.useEffect(function () {
+        onNotificationClickRef.current = onNotificationClick;
+    }, [onNotificationClick]);
     React.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);
                 }
             });
         }
@@ -509,12 +610,17 @@ var VeltNotificationsTool = function (props) {
 var VeltNotificationsPanel = function (props) {
     var darkMode = props.darkMode, onNotificationClick = props.onNotificationClick;
     var ref = React.useRef();
+    var onNotificationClickRef = React.useRef(onNotificationClick);
+    // Update the ref to always point to the latest callback function
+    React.useEffect(function () {
+        onNotificationClickRef.current = onNotificationClick;
+    }, [onNotificationClick]);
     React.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);
                 }
             });
         }
@@ -525,12 +631,17 @@ var VeltNotificationsPanel = function (props) {
 var VeltNotificationsHistoryPanel = function (props) {
     var embedMode = props.embedMode, darkMode = props.darkMode, onNotificationClick = props.onNotificationClick;
     var ref = React.useRef();
+    var onNotificationClickRef = React.useRef(onNotificationClick);
+    // Update the ref to always point to the latest callback function
+    React.useEffect(function () {
+        onNotificationClickRef.current = onNotificationClick;
+    }, [onNotificationClick]);
     React.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);
                 }
             });
         }