@veltdev/react 2.0.9 → 2.0.11

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

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

package/cjs/types/components/VeltCommentDialogWireframe/VeltCommentDialogComposer/VeltCommentDialogComposerInput/VeltCommentDialogComposerInput.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface IVeltCommentDialogComposerInputProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
     variant?: string;
+    placeholder?: string;
 }
 declare const VeltCommentDialogComposerInput: React.FC<IVeltCommentDialogComposerInputProps>;
 export default VeltCommentDialogComposerInput;

package/cjs/types/constants.d.ts

@@ -1,3 +1,3 @@
-export declare const VELT_SDK_VERSION = "2.0.9";
+export declare const VELT_SDK_VERSION = "2.0.11";
 export declare const VELT_SDK_INIT_EVENT = "onVeltInit";
 export declare const VELT_TAB_ID = "veltTabId";

package/esm/index.js

@@ -132,7 +132,7 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain) {
     }
 };
 
-var VELT_SDK_VERSION = '2.0.9';
+var VELT_SDK_VERSION = '2.0.11';
 var VELT_SDK_INIT_EVENT = 'onVeltInit';
 var VELT_TAB_ID = 'veltTabId';
 
@@ -226,7 +226,7 @@ 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, resolvedCommentsOnDom = props.resolvedCommentsOnDom, 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, enterKeyToSubmit = props.enterKeyToSubmit, pinShadowDom = props.pinShadowDom, dialogShadowDom = props.dialogShadowDom, shadowDom = props.shadowDom, changeDetectionInCommentMode = props.changeDetectionInCommentMode, areaComment = props.areaComment, allowedElementIds = props.allowedElementIds, allowedElementClassNames = props.allowedElementClassNames, allowedElementQuerySelectors = props.allowedElementQuerySelectors, commentPinHighlighter = props.commentPinHighlighter, customReactions = props.customReactions, onCommentAdd = props.onCommentAdd, onCommentUpdate = props.onCommentUpdate, onCommentAccept = props.onCommentAccept, onCommentReject = props.onCommentReject, onSidebarButtonOnCommentDialogClick = props.onSidebarButtonOnCommentDialogClick, onCommentSelectionChange = props.onCommentSelectionChange, customStatus = props.customStatus, customPriority = props.customPriority, customCategory = props.customCategory, status = props.status, resolveButton = props.resolveButton, darkMode = props.darkMode, onCustomPinInject = props.onCustomPinInject, children = props.children, textCommentToolShadowDom = props.textCommentToolShadowDom, textCommentToolbarShadowDom = props.textCommentToolbarShadowDom, dialogDarkMode = props.dialogDarkMode, pinDarkMode = props.pinDarkMode, textCommentToolDarkMode = props.textCommentToolDarkMode, textCommentToolbarDarkMode = props.textCommentToolbarDarkMode, composerMode = props.composerMode;
+    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, resolvedCommentsOnDom = props.resolvedCommentsOnDom, 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, enterKeyToSubmit = props.enterKeyToSubmit, pinShadowDom = props.pinShadowDom, dialogShadowDom = props.dialogShadowDom, shadowDom = props.shadowDom, changeDetectionInCommentMode = props.changeDetectionInCommentMode, areaComment = props.areaComment, pinCursorImage = props.pinCursorImage, allowedElementIds = props.allowedElementIds, allowedElementClassNames = props.allowedElementClassNames, allowedElementQuerySelectors = props.allowedElementQuerySelectors, commentPinHighlighter = props.commentPinHighlighter, customReactions = props.customReactions, onCommentAdd = props.onCommentAdd, onCommentUpdate = props.onCommentUpdate, onCommentAccept = props.onCommentAccept, onCommentReject = props.onCommentReject, onSidebarButtonOnCommentDialogClick = props.onSidebarButtonOnCommentDialogClick, onCommentSelectionChange = props.onCommentSelectionChange, customStatus = props.customStatus, customPriority = props.customPriority, customCategory = props.customCategory, status = props.status, resolveButton = props.resolveButton, darkMode = props.darkMode, onCustomPinInject = props.onCustomPinInject, children = props.children, textCommentToolShadowDom = props.textCommentToolShadowDom, textCommentToolbarShadowDom = props.textCommentToolbarShadowDom, dialogDarkMode = props.dialogDarkMode, pinDarkMode = props.pinDarkMode, textCommentToolDarkMode = props.textCommentToolDarkMode, textCommentToolbarDarkMode = props.textCommentToolbarDarkMode, composerMode = props.composerMode;
     var ref = useRef();
     var onSignInRef = useRef(onSignIn);
     var onUpgradeRef = useRef(onUpgrade);
@@ -266,56 +266,81 @@ var SnippylyComments = function (props) {
         onCommentSelectionChangeRef.current = onCommentSelectionChange;
     }, [onCommentSelectionChange]);
     useEffect(function () {
+        var element;
+        var handleSignIn = function (event) {
+            if (onSignInRef.current) {
+                onSignInRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
+        var handleUpgrade = function (event) {
+            if (onUpgradeRef.current) {
+                onUpgradeRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
+        var handleCommentAdd = function (event) {
+            if (onCommentAddRef.current) {
+                onCommentAddRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
+        var handleCommentUpdate = function (event) {
+            if (onCommentUpdateRef.current) {
+                onCommentUpdateRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
+        var handleCommentAccept = function (event) {
+            if (onCommentAcceptRef.current) {
+                onCommentAcceptRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
+        var handleCommentReject = function (event) {
+            if (onCommentRejectRef.current) {
+                onCommentRejectRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
+        var handleSidebarButtonOnCommentDialogClick = function (event) {
+            if (onSidebarButtonOnCommentDialogClickRef.current) {
+                onSidebarButtonOnCommentDialogClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
+        var handleCustomPinInject = function (event) {
+            if (onCustomPinInjectRef.current) {
+                onCustomPinInjectRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
+        var handleCommentSelectionChange = function (event) {
+            if (onCommentSelectionChangeRef.current) {
+                onCommentSelectionChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
         if (ref.current) {
-            var element = ref.current;
-            element.addEventListener('onSignIn', function (event) {
-                if (onSignInRef.current) {
-                    onSignInRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
-            element.addEventListener('onUpgrade', function (event) {
-                if (onUpgradeRef.current) {
-                    onUpgradeRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
-            element.addEventListener('onCommentAdd', function (event) {
-                if (onCommentAddRef.current) {
-                    onCommentAddRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
-            element.addEventListener('onCommentUpdate', function (event) {
-                if (onCommentUpdateRef.current) {
-                    onCommentUpdateRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
-            element.addEventListener('onCommentAccept', function (event) {
-                if (onCommentAcceptRef.current) {
-                    onCommentAcceptRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
-            element.addEventListener('onCommentReject', function (event) {
-                if (onCommentRejectRef.current) {
-                    onCommentRejectRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
-            element.addEventListener('onSidebarButtonOnCommentDialogClick', function (event) {
-                if (onSidebarButtonOnCommentDialogClickRef.current) {
-                    onSidebarButtonOnCommentDialogClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
-            element.addEventListener('onCustomPinInject', function (event) {
-                if (onCustomPinInjectRef.current) {
-                    onCustomPinInjectRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
-            element.addEventListener('onCommentSelectionChange', function (event) {
-                if (onCommentSelectionChangeRef.current) {
-                    onCommentSelectionChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
+            element = ref.current;
+            if (element) {
+                element.addEventListener('onSignIn', handleSignIn);
+                element.addEventListener('onUpgrade', handleUpgrade);
+                element.addEventListener('onCommentAdd', handleCommentAdd);
+                element.addEventListener('onCommentUpdate', handleCommentUpdate);
+                element.addEventListener('onCommentAccept', handleCommentAccept);
+                element.addEventListener('onCommentReject', handleCommentReject);
+                element.addEventListener('onSidebarButtonOnCommentDialogClick', handleSidebarButtonOnCommentDialogClick);
+                element.addEventListener('onCustomPinInject', handleCustomPinInject);
+                element.addEventListener('onCommentSelectionChange', handleCommentSelectionChange);
+            }
         }
+        return function () {
+            if (element) {
+                element.removeEventListener('onSignIn', handleSignIn);
+                element.removeEventListener('onUpgrade', handleUpgrade);
+                element.removeEventListener('onCommentAdd', handleCommentAdd);
+                element.removeEventListener('onCommentUpdate', handleCommentUpdate);
+                element.removeEventListener('onCommentAccept', handleCommentAccept);
+                element.removeEventListener('onCommentReject', handleCommentReject);
+                element.removeEventListener('onSidebarButtonOnCommentDialogClick', handleSidebarButtonOnCommentDialogClick);
+                element.removeEventListener('onCustomPinInject', handleCustomPinInject);
+                element.removeEventListener('onCommentSelectionChange', handleCommentSelectionChange);
+            }
+        };
     }, []);
-    return (React.createElement("velt-comments", { ref: ref, "composer-mode": composerMode, "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, "resolved-comments-on-dom": [true, false].includes(resolvedCommentsOnDom) ? (resolvedCommentsOnDom ? '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, "enter-key-to-submit": [true, false].includes(enterKeyToSubmit) ? (enterKeyToSubmit ? 'true' : 'false') : undefined, "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, "text-comment-tool-shadow-dom": [true, false].includes(textCommentToolShadowDom) ? (textCommentToolShadowDom ? 'true' : 'false') : undefined, "text-comment-toolbar-shadow-dom": [true, false].includes(textCommentToolbarShadowDom) ? (textCommentToolbarShadowDom ? 'true' : 'false') : undefined, "change-detection-in-comment-mode": [true, false].includes(changeDetectionInCommentMode) ? (changeDetectionInCommentMode ? 'true' : 'false') : undefined, "area-comment": [true, false].includes(areaComment) ? (areaComment ? 'true' : 'false') : undefined, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "comment-pin-highlighter": [true, false].includes(commentPinHighlighter) ? (commentPinHighlighter ? 'true' : 'false') : undefined, "custom-reactions": JSON.stringify(customReactions), "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, "dialog-dark-mode": [true, false].includes(dialogDarkMode) ? (dialogDarkMode ? 'true' : 'false') : undefined, "pin-dark-mode": [true, false].includes(pinDarkMode) ? (pinDarkMode ? 'true' : 'false') : undefined, "text-comment-tool-dark-mode": [true, false].includes(textCommentToolDarkMode) ? (textCommentToolDarkMode ? 'true' : 'false') : undefined, "text-comment-toolbar-dark-mode": [true, false].includes(textCommentToolbarDarkMode) ? (textCommentToolbarDarkMode ? 'true' : 'false') : undefined }, children));
+    return (React.createElement("velt-comments", { ref: ref, "composer-mode": composerMode, "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, "resolved-comments-on-dom": [true, false].includes(resolvedCommentsOnDom) ? (resolvedCommentsOnDom ? '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, "enter-key-to-submit": [true, false].includes(enterKeyToSubmit) ? (enterKeyToSubmit ? 'true' : 'false') : undefined, "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, "text-comment-tool-shadow-dom": [true, false].includes(textCommentToolShadowDom) ? (textCommentToolShadowDom ? 'true' : 'false') : undefined, "text-comment-toolbar-shadow-dom": [true, false].includes(textCommentToolbarShadowDom) ? (textCommentToolbarShadowDom ? 'true' : 'false') : undefined, "change-detection-in-comment-mode": [true, false].includes(changeDetectionInCommentMode) ? (changeDetectionInCommentMode ? 'true' : 'false') : undefined, "area-comment": [true, false].includes(areaComment) ? (areaComment ? 'true' : 'false') : undefined, "pin-cursor-image": pinCursorImage, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "comment-pin-highlighter": [true, false].includes(commentPinHighlighter) ? (commentPinHighlighter ? 'true' : 'false') : undefined, "custom-reactions": JSON.stringify(customReactions), "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, "dialog-dark-mode": [true, false].includes(dialogDarkMode) ? (dialogDarkMode ? 'true' : 'false') : undefined, "pin-dark-mode": [true, false].includes(pinDarkMode) ? (pinDarkMode ? 'true' : 'false') : undefined, "text-comment-tool-dark-mode": [true, false].includes(textCommentToolDarkMode) ? (textCommentToolDarkMode ? 'true' : 'false') : undefined, "text-comment-toolbar-dark-mode": [true, false].includes(textCommentToolbarDarkMode) ? (textCommentToolbarDarkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyCommentsSidebar = function (props) {
@@ -339,25 +364,36 @@ var SnippylyCommentsSidebar = function (props) {
         onCommentClickRef.current = onCommentClick;
     }, [onCommentClick]);
     useEffect(function () {
+        var element;
+        var handleSidebarOpen = function (event) {
+            if (openSidebarRef.current) {
+                openSidebarRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+            if (onSidebarOpenRef.current) {
+                onSidebarOpenRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
+        var handleSidebarCommentClick = function (event) {
+            if (onSidebarCommentClickRef.current) {
+                onSidebarCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+            if (onCommentClickRef.current) {
+                onCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
         if (ref.current) {
-            var element = ref.current;
-            element.addEventListener('onSidebarOpen', function (event) {
-                if (openSidebarRef.current) {
-                    openSidebarRef.current(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 (onSidebarCommentClickRef.current) {
-                    onSidebarCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-                if (onCommentClickRef.current) {
-                    onCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
+            element = ref.current;
+            if (element) {
+                element.addEventListener('onSidebarOpen', handleSidebarOpen);
+                element.addEventListener('onSidebarCommentClick', handleSidebarCommentClick);
+            }
         }
+        return function () {
+            if (element) {
+                element.removeEventListener('onSidebarOpen', handleSidebarOpen);
+                element.removeEventListener('onSidebarCommentClick', handleSidebarCommentClick);
+            }
+        };
     }, []);
     return (React.createElement("velt-comments-sidebar", { ref: ref, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "embed-mode": [true, false].includes(embedMode) ? (embedMode ? 'true' : 'false') : undefined, "enable-url-navigation": [true, false].includes(enableUrlNavigation) ? (enableUrlNavigation ? 'true' : 'false') : undefined, "url-navigation": [true, false].includes(urlNavigation) ? (urlNavigation ? 'true' : 'false') : undefined, "page-mode": [true, false].includes(pageMode) ? (pageMode ? 'true' : 'false') : undefined, "current-location-suffix": [true, false].includes(currentLocationSuffix) ? (currentLocationSuffix ? 'true' : 'false') : undefined, "filter-config": filterConfig ? JSON.stringify(filterConfig) : undefined, "group-config": groupConfig ? JSON.stringify(groupConfig) : undefined, filters: filters ? JSON.stringify(filters) : undefined, variant: variant, "page-mode-composer-variant": pageModeComposerVariant, "dialog-variant": dialogVariant, "sort-data": sortData, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }));
 };
@@ -371,14 +407,23 @@ var SnippylyCommentTool = function (props) {
         onCommentModeChangeRef.current = onCommentModeChange;
     }, [onCommentModeChange]);
     useEffect(function () {
+        var element;
+        var handleCommentModeChange = function (event) {
+            if (onCommentModeChangeRef.current) {
+                onCommentModeChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
         if (ref.current) {
-            var element = ref.current;
-            element.addEventListener('onCommentModeChange', function (event) {
-                if (onCommentModeChangeRef.current) {
-                    onCommentModeChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
+            element = ref.current;
+            if (element) {
+                element.addEventListener('onCommentModeChange', handleCommentModeChange);
+            }
         }
+        return function () {
+            if (element) {
+                element.removeEventListener('onCommentModeChange', handleCommentModeChange);
+            }
+        };
     }, []);
     return (React.createElement("velt-comment-tool", { ref: ref, "target-comment-element-id": targetCommentElementId, variant: variant, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
@@ -396,17 +441,26 @@ var SnippylyCursor = function (props) {
         onCursorUserChangeRef.current = onCursorUserChange;
     }, [onCursorUserChange]);
     useEffect(function () {
+        var element;
+        var handleCursorUserChange = function (event) {
+            if (onCursorUsersChangedRef.current) {
+                onCursorUsersChangedRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+            if (onCursorUserChangeRef.current) {
+                onCursorUserChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
         if (ref.current) {
-            var element = ref.current;
-            element.addEventListener('onCursorUserChange', function (event) {
-                if (onCursorUsersChangedRef.current) {
-                    onCursorUsersChangedRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-                if (onCursorUserChangeRef.current) {
-                    onCursorUserChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
+            element = ref.current;
+            if (element) {
+                element.addEventListener('onCursorUserChange', handleCursorUserChange);
+            }
         }
+        return function () {
+            if (element) {
+                element.removeEventListener('onCursorUserChange', handleCursorUserChange);
+            }
+        };
     }, []);
     return (React.createElement("velt-cursor", { ref: ref, "allowed-element-ids": allowedElementIds, "avatar-mode": avatarMode ? 'true' : undefined, "inactivity-time": inactivityTime }, children));
 };
@@ -442,27 +496,40 @@ var SnippylyPresence = function (props) {
         onPresenceUserClickRef.current = onPresenceUserClick;
     }, [onPresenceUserClick]);
     useEffect(function () {
+        var element;
+        var handlePresenceUserChange = function (event) {
+            if (onUsersChangedRef.current) {
+                onUsersChangedRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+            if (onPresenceUserChangeRef.current) {
+                onPresenceUserChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
+        var handleNavigate = function (event) {
+            if (onNavigateRef.current) {
+                onNavigateRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
+        var handlePresenceUserClick = function (event) {
+            if (onPresenceUserClickRef.current) {
+                onPresenceUserClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
         if (ref.current) {
-            var element = ref.current;
-            element.addEventListener('onPresenceUserChange', function (event) {
-                if (onUsersChangedRef.current) {
-                    onUsersChangedRef.current(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 (onNavigateRef.current) {
-                    onNavigateRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
-            element.addEventListener('onPresenceUserClick', function (event) {
-                if (onPresenceUserClickRef.current) {
-                    onPresenceUserClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
+            element = ref.current;
+            if (element) {
+                element.addEventListener('onPresenceUserChange', handlePresenceUserChange);
+                element.addEventListener('onNavigate', handleNavigate);
+                element.addEventListener('onPresenceUserClick', handlePresenceUserClick);
+            }
         }
+        return function () {
+            if (element) {
+                element.removeEventListener('onPresenceUserChange', handlePresenceUserChange);
+                element.removeEventListener('onNavigate', handleNavigate);
+                element.removeEventListener('onPresenceUserClick', handlePresenceUserClick);
+            }
+        };
     }, []);
     return (React.createElement("velt-presence", { ref: ref, "flock-mode": [true, false].includes(flockMode) ? (flockMode ? 'true' : 'false') : undefined, "max-users": maxUsers, "inactivity-time": inactivityTime, "document-params": (typeof documentParams === 'object') ? JSON.stringify(documentParams) : (documentParams ? documentParams : undefined), "disable-flock-navigation": [true, false].includes(disableFlockNavigation) ? (disableFlockNavigation ? 'true' : 'false') : undefined, "default-flock-navigation": [true, false].includes(defaultFlockNavigation) ? (defaultFlockNavigation ? 'true' : 'false') : undefined, self: [true, false].includes(self) ? (self ? 'true' : 'false') : undefined, location: (typeof location === 'object') ? JSON.stringify(location) : (location ? location : undefined) }));
 };
@@ -476,14 +543,23 @@ var SnippylyRecorderControlPanel = function (props) {
         onRecordedDataRef.current = onRecordedData;
     }, [onRecordedData]);
     useEffect(function () {
+        var element;
+        var handleRecordedData = function (event) {
+            if (onRecordedDataRef.current) {
+                onRecordedDataRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
         if (ref.current) {
-            var element = ref.current;
-            element.addEventListener('onRecordedData', function (event) {
-                if (onRecordedDataRef.current) {
-                    onRecordedDataRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
+            element = ref.current;
+            if (element) {
+                element.addEventListener('onRecordedData', handleRecordedData);
+            }
         }
+        return function () {
+            if (element) {
+                element.removeEventListener('onRecordedData', handleRecordedData);
+            }
+        };
     }, []);
     return (React.createElement("velt-recorder-control-panel", { ref: ref, mode: mode, "panel-id": panelId }));
 };
@@ -501,14 +577,23 @@ var SnippylyRecorderPlayer = function (props) {
         onDeleteRef.current = onDelete;
     }, [onDelete]);
     useEffect(function () {
+        var element;
+        var handleOnDelete = function (event) {
+            if (onDeleteRef.current) {
+                onDeleteRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
         if (ref.current) {
-            var element = ref.current;
-            element === null || element === void 0 ? void 0 : element.addEventListener('onDelete', function (event) {
-                if (onDeleteRef.current) {
-                    onDeleteRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
+            element = ref.current;
+            if (element) {
+                element === null || element === void 0 ? void 0 : element.addEventListener('onDelete', handleOnDelete);
+            }
         }
+        return function () {
+            if (element) {
+                element === null || element === void 0 ? void 0 : element.removeEventListener('onDelete', handleOnDelete);
+            }
+        };
     }, []);
     return (React.createElement("velt-recorder-player", { ref: ref, "recorder-id": recorderId, "show-summary": [true, false].includes(showSummary) ? (showSummary ? 'true' : 'false') : undefined, summary: [true, false].includes(summary) ? (summary ? 'true' : 'false') : undefined }));
 };
@@ -561,14 +646,23 @@ var VeltCommentPlayerTimeline = function (props) {
         onCommentClickRef.current = onCommentClick;
     }, [onCommentClick]);
     useEffect(function () {
+        var element;
+        var handleCommentClick = function (event) {
+            if (onCommentClickRef.current) {
+                onCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
         if (ref.current) {
-            var element = ref.current;
-            element.addEventListener('onCommentClick', function (event) {
-                if (onCommentClickRef.current) {
-                    onCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
+            element = ref.current;
+            if (element) {
+                element.addEventListener('onCommentClick', handleCommentClick);
+            }
         }
+        return function () {
+            if (element) {
+                element.removeEventListener('onCommentClick', handleCommentClick);
+            }
+        };
     }, []);
     return (React.createElement("velt-comment-player-timeline", { ref: ref, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "total-media-length": totalMediaLength }));
 };
@@ -597,14 +691,23 @@ var VeltNotificationsTool = function (props) {
         onNotificationClickRef.current = onNotificationClick;
     }, [onNotificationClick]);
     useEffect(function () {
+        var element;
+        var handleNotificationClick = function (event) {
+            if (onNotificationClickRef.current) {
+                onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
         if (ref.current) {
-            var element = ref.current;
-            element.addEventListener('onNotificationClick', function (event) {
-                if (onNotificationClickRef.current) {
-                    onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
+            element = ref.current;
+            if (element) {
+                element === null || element === void 0 ? void 0 : element.addEventListener('onNotificationClick', handleNotificationClick);
+            }
         }
+        return function () {
+            if (element) {
+                element === null || element === void 0 ? void 0 : element.removeEventListener('onNotificationClick', handleNotificationClick);
+            }
+        };
     }, []);
     return (React.createElement("velt-notifications-tool", { ref: ref, "panel-shadow-dom": [true, false].includes(panelShadowDom) ? (panelShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
@@ -618,14 +721,23 @@ var VeltNotificationsPanel = function (props) {
         onNotificationClickRef.current = onNotificationClick;
     }, [onNotificationClick]);
     useEffect(function () {
+        var element;
+        var handleNotificationClick = function (event) {
+            if (onNotificationClickRef.current) {
+                onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
         if (ref.current) {
-            var element = ref.current;
-            element.addEventListener('onNotificationClick', function (event) {
-                if (onNotificationClickRef.current) {
-                    onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
+            element = ref.current;
+            if (element) {
+                element === null || element === void 0 ? void 0 : element.addEventListener('onNotificationClick', handleNotificationClick);
+            }
         }
+        return function () {
+            if (element) {
+                element === null || element === void 0 ? void 0 : element.removeEventListener('onNotificationClick', handleNotificationClick);
+            }
+        };
     }, []);
     return (React.createElement("velt-notifications-panel", { ref: ref, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }));
 };
@@ -639,14 +751,23 @@ var VeltNotificationsHistoryPanel = function (props) {
         onNotificationClickRef.current = onNotificationClick;
     }, [onNotificationClick]);
     useEffect(function () {
+        var element;
+        var handleNotificationClick = function (event) {
+            if (onNotificationClickRef.current) {
+                onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
         if (ref.current) {
-            var element = ref.current;
-            element.addEventListener('onNotificationClick', function (event) {
-                if (onNotificationClickRef.current) {
-                    onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
-                }
-            });
+            element = ref.current;
+            if (element) {
+                element === null || element === void 0 ? void 0 : element.addEventListener('onNotificationClick', handleNotificationClick);
+            }
         }
+        return function () {
+            if (element) {
+                element === null || element === void 0 ? void 0 : element.removeEventListener('onNotificationClick', handleNotificationClick);
+            }
+        };
     }, []);
     return (React.createElement("velt-notifications-history-panel", { ref: ref, "embed-mode": [true, false].includes(embedMode) ? (embedMode ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }));
 };