@veltdev/react 2.0.9 → 2.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/cjs/index.js +257 -136
  2. package/cjs/index.js.map +1 -1
  3. package/cjs/types/components/SnippylyComments/SnippylyComments.d.ts +1 -0
  4. package/cjs/types/components/VeltCommentDialogWireframe/VeltCommentDialogComposer/VeltCommentDialogComposerInput/VeltCommentDialogComposerInput.d.ts +1 -0
  5. package/cjs/types/constants.d.ts +1 -1
  6. package/esm/index.js +257 -136
  7. package/esm/index.js.map +1 -1
  8. package/esm/types/components/SnippylyComments/SnippylyComments.d.ts +1 -0
  9. package/esm/types/components/VeltCommentDialogWireframe/VeltCommentDialogComposer/VeltCommentDialogComposerInput/VeltCommentDialogComposerInput.d.ts +1 -0
  10. package/esm/types/constants.d.ts +1 -1
  11. package/index.d.ts +2 -0
  12. package/package.json +1 -1
package/cjs/index.js CHANGED
@@ -140,7 +140,7 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain) {
140
140
  }
141
141
  };
142
142
 
143
- var VELT_SDK_VERSION = '2.0.9';
143
+ var VELT_SDK_VERSION = '2.0.11';
144
144
  var VELT_SDK_INIT_EVENT = 'onVeltInit';
145
145
  var VELT_TAB_ID = 'veltTabId';
146
146
 
@@ -234,7 +234,7 @@ var SnippylyCommentBubble = function (props) {
234
234
  };
235
235
 
236
236
  var SnippylyComments = function (props) {
237
- 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;
237
+ 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;
238
238
  var ref = React.useRef();
239
239
  var onSignInRef = React.useRef(onSignIn);
240
240
  var onUpgradeRef = React.useRef(onUpgrade);
@@ -274,56 +274,81 @@ var SnippylyComments = function (props) {
274
274
  onCommentSelectionChangeRef.current = onCommentSelectionChange;
275
275
  }, [onCommentSelectionChange]);
276
276
  React.useEffect(function () {
277
+ var element;
278
+ var handleSignIn = function (event) {
279
+ if (onSignInRef.current) {
280
+ onSignInRef.current(event === null || event === void 0 ? void 0 : event.detail);
281
+ }
282
+ };
283
+ var handleUpgrade = function (event) {
284
+ if (onUpgradeRef.current) {
285
+ onUpgradeRef.current(event === null || event === void 0 ? void 0 : event.detail);
286
+ }
287
+ };
288
+ var handleCommentAdd = function (event) {
289
+ if (onCommentAddRef.current) {
290
+ onCommentAddRef.current(event === null || event === void 0 ? void 0 : event.detail);
291
+ }
292
+ };
293
+ var handleCommentUpdate = function (event) {
294
+ if (onCommentUpdateRef.current) {
295
+ onCommentUpdateRef.current(event === null || event === void 0 ? void 0 : event.detail);
296
+ }
297
+ };
298
+ var handleCommentAccept = function (event) {
299
+ if (onCommentAcceptRef.current) {
300
+ onCommentAcceptRef.current(event === null || event === void 0 ? void 0 : event.detail);
301
+ }
302
+ };
303
+ var handleCommentReject = function (event) {
304
+ if (onCommentRejectRef.current) {
305
+ onCommentRejectRef.current(event === null || event === void 0 ? void 0 : event.detail);
306
+ }
307
+ };
308
+ var handleSidebarButtonOnCommentDialogClick = function (event) {
309
+ if (onSidebarButtonOnCommentDialogClickRef.current) {
310
+ onSidebarButtonOnCommentDialogClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
311
+ }
312
+ };
313
+ var handleCustomPinInject = function (event) {
314
+ if (onCustomPinInjectRef.current) {
315
+ onCustomPinInjectRef.current(event === null || event === void 0 ? void 0 : event.detail);
316
+ }
317
+ };
318
+ var handleCommentSelectionChange = function (event) {
319
+ if (onCommentSelectionChangeRef.current) {
320
+ onCommentSelectionChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
321
+ }
322
+ };
277
323
  if (ref.current) {
278
- var element = ref.current;
279
- element.addEventListener('onSignIn', function (event) {
280
- if (onSignInRef.current) {
281
- onSignInRef.current(event === null || event === void 0 ? void 0 : event.detail);
282
- }
283
- });
284
- element.addEventListener('onUpgrade', function (event) {
285
- if (onUpgradeRef.current) {
286
- onUpgradeRef.current(event === null || event === void 0 ? void 0 : event.detail);
287
- }
288
- });
289
- element.addEventListener('onCommentAdd', function (event) {
290
- if (onCommentAddRef.current) {
291
- onCommentAddRef.current(event === null || event === void 0 ? void 0 : event.detail);
292
- }
293
- });
294
- element.addEventListener('onCommentUpdate', function (event) {
295
- if (onCommentUpdateRef.current) {
296
- onCommentUpdateRef.current(event === null || event === void 0 ? void 0 : event.detail);
297
- }
298
- });
299
- element.addEventListener('onCommentAccept', function (event) {
300
- if (onCommentAcceptRef.current) {
301
- onCommentAcceptRef.current(event === null || event === void 0 ? void 0 : event.detail);
302
- }
303
- });
304
- element.addEventListener('onCommentReject', function (event) {
305
- if (onCommentRejectRef.current) {
306
- onCommentRejectRef.current(event === null || event === void 0 ? void 0 : event.detail);
307
- }
308
- });
309
- element.addEventListener('onSidebarButtonOnCommentDialogClick', function (event) {
310
- if (onSidebarButtonOnCommentDialogClickRef.current) {
311
- onSidebarButtonOnCommentDialogClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
312
- }
313
- });
314
- element.addEventListener('onCustomPinInject', function (event) {
315
- if (onCustomPinInjectRef.current) {
316
- onCustomPinInjectRef.current(event === null || event === void 0 ? void 0 : event.detail);
317
- }
318
- });
319
- element.addEventListener('onCommentSelectionChange', function (event) {
320
- if (onCommentSelectionChangeRef.current) {
321
- onCommentSelectionChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
322
- }
323
- });
324
+ element = ref.current;
325
+ if (element) {
326
+ element.addEventListener('onSignIn', handleSignIn);
327
+ element.addEventListener('onUpgrade', handleUpgrade);
328
+ element.addEventListener('onCommentAdd', handleCommentAdd);
329
+ element.addEventListener('onCommentUpdate', handleCommentUpdate);
330
+ element.addEventListener('onCommentAccept', handleCommentAccept);
331
+ element.addEventListener('onCommentReject', handleCommentReject);
332
+ element.addEventListener('onSidebarButtonOnCommentDialogClick', handleSidebarButtonOnCommentDialogClick);
333
+ element.addEventListener('onCustomPinInject', handleCustomPinInject);
334
+ element.addEventListener('onCommentSelectionChange', handleCommentSelectionChange);
335
+ }
324
336
  }
337
+ return function () {
338
+ if (element) {
339
+ element.removeEventListener('onSignIn', handleSignIn);
340
+ element.removeEventListener('onUpgrade', handleUpgrade);
341
+ element.removeEventListener('onCommentAdd', handleCommentAdd);
342
+ element.removeEventListener('onCommentUpdate', handleCommentUpdate);
343
+ element.removeEventListener('onCommentAccept', handleCommentAccept);
344
+ element.removeEventListener('onCommentReject', handleCommentReject);
345
+ element.removeEventListener('onSidebarButtonOnCommentDialogClick', handleSidebarButtonOnCommentDialogClick);
346
+ element.removeEventListener('onCustomPinInject', handleCustomPinInject);
347
+ element.removeEventListener('onCommentSelectionChange', handleCommentSelectionChange);
348
+ }
349
+ };
325
350
  }, []);
326
- return (React__default["default"].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));
351
+ return (React__default["default"].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));
327
352
  };
328
353
 
329
354
  var SnippylyCommentsSidebar = function (props) {
@@ -347,25 +372,36 @@ var SnippylyCommentsSidebar = function (props) {
347
372
  onCommentClickRef.current = onCommentClick;
348
373
  }, [onCommentClick]);
349
374
  React.useEffect(function () {
375
+ var element;
376
+ var handleSidebarOpen = function (event) {
377
+ if (openSidebarRef.current) {
378
+ openSidebarRef.current(event === null || event === void 0 ? void 0 : event.detail);
379
+ }
380
+ if (onSidebarOpenRef.current) {
381
+ onSidebarOpenRef.current(event === null || event === void 0 ? void 0 : event.detail);
382
+ }
383
+ };
384
+ var handleSidebarCommentClick = function (event) {
385
+ if (onSidebarCommentClickRef.current) {
386
+ onSidebarCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
387
+ }
388
+ if (onCommentClickRef.current) {
389
+ onCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
390
+ }
391
+ };
350
392
  if (ref.current) {
351
- var element = ref.current;
352
- element.addEventListener('onSidebarOpen', function (event) {
353
- if (openSidebarRef.current) {
354
- openSidebarRef.current(event === null || event === void 0 ? void 0 : event.detail);
355
- }
356
- if (onSidebarOpenRef.current) {
357
- onSidebarOpenRef.current(event === null || event === void 0 ? void 0 : event.detail);
358
- }
359
- });
360
- element.addEventListener('onSidebarCommentClick', function (event) {
361
- if (onSidebarCommentClickRef.current) {
362
- onSidebarCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
363
- }
364
- if (onCommentClickRef.current) {
365
- onCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
366
- }
367
- });
393
+ element = ref.current;
394
+ if (element) {
395
+ element.addEventListener('onSidebarOpen', handleSidebarOpen);
396
+ element.addEventListener('onSidebarCommentClick', handleSidebarCommentClick);
397
+ }
368
398
  }
399
+ return function () {
400
+ if (element) {
401
+ element.removeEventListener('onSidebarOpen', handleSidebarOpen);
402
+ element.removeEventListener('onSidebarCommentClick', handleSidebarCommentClick);
403
+ }
404
+ };
369
405
  }, []);
370
406
  return (React__default["default"].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
407
  };
@@ -379,14 +415,23 @@ var SnippylyCommentTool = function (props) {
379
415
  onCommentModeChangeRef.current = onCommentModeChange;
380
416
  }, [onCommentModeChange]);
381
417
  React.useEffect(function () {
418
+ var element;
419
+ var handleCommentModeChange = function (event) {
420
+ if (onCommentModeChangeRef.current) {
421
+ onCommentModeChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
422
+ }
423
+ };
382
424
  if (ref.current) {
383
- var element = ref.current;
384
- element.addEventListener('onCommentModeChange', function (event) {
385
- if (onCommentModeChangeRef.current) {
386
- onCommentModeChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
387
- }
388
- });
425
+ element = ref.current;
426
+ if (element) {
427
+ element.addEventListener('onCommentModeChange', handleCommentModeChange);
428
+ }
389
429
  }
430
+ return function () {
431
+ if (element) {
432
+ element.removeEventListener('onCommentModeChange', handleCommentModeChange);
433
+ }
434
+ };
390
435
  }, []);
391
436
  return (React__default["default"].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));
392
437
  };
@@ -404,17 +449,26 @@ var SnippylyCursor = function (props) {
404
449
  onCursorUserChangeRef.current = onCursorUserChange;
405
450
  }, [onCursorUserChange]);
406
451
  React.useEffect(function () {
452
+ var element;
453
+ var handleCursorUserChange = function (event) {
454
+ if (onCursorUsersChangedRef.current) {
455
+ onCursorUsersChangedRef.current(event === null || event === void 0 ? void 0 : event.detail);
456
+ }
457
+ if (onCursorUserChangeRef.current) {
458
+ onCursorUserChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
459
+ }
460
+ };
407
461
  if (ref.current) {
408
- var element = ref.current;
409
- element.addEventListener('onCursorUserChange', function (event) {
410
- if (onCursorUsersChangedRef.current) {
411
- onCursorUsersChangedRef.current(event === null || event === void 0 ? void 0 : event.detail);
412
- }
413
- if (onCursorUserChangeRef.current) {
414
- onCursorUserChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
415
- }
416
- });
462
+ element = ref.current;
463
+ if (element) {
464
+ element.addEventListener('onCursorUserChange', handleCursorUserChange);
465
+ }
417
466
  }
467
+ return function () {
468
+ if (element) {
469
+ element.removeEventListener('onCursorUserChange', handleCursorUserChange);
470
+ }
471
+ };
418
472
  }, []);
419
473
  return (React__default["default"].createElement("velt-cursor", { ref: ref, "allowed-element-ids": allowedElementIds, "avatar-mode": avatarMode ? 'true' : undefined, "inactivity-time": inactivityTime }, children));
420
474
  };
@@ -450,27 +504,40 @@ var SnippylyPresence = function (props) {
450
504
  onPresenceUserClickRef.current = onPresenceUserClick;
451
505
  }, [onPresenceUserClick]);
452
506
  React.useEffect(function () {
507
+ var element;
508
+ var handlePresenceUserChange = function (event) {
509
+ if (onUsersChangedRef.current) {
510
+ onUsersChangedRef.current(event === null || event === void 0 ? void 0 : event.detail);
511
+ }
512
+ if (onPresenceUserChangeRef.current) {
513
+ onPresenceUserChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
514
+ }
515
+ };
516
+ var handleNavigate = function (event) {
517
+ if (onNavigateRef.current) {
518
+ onNavigateRef.current(event === null || event === void 0 ? void 0 : event.detail);
519
+ }
520
+ };
521
+ var handlePresenceUserClick = function (event) {
522
+ if (onPresenceUserClickRef.current) {
523
+ onPresenceUserClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
524
+ }
525
+ };
453
526
  if (ref.current) {
454
- var element = ref.current;
455
- element.addEventListener('onPresenceUserChange', function (event) {
456
- if (onUsersChangedRef.current) {
457
- onUsersChangedRef.current(event === null || event === void 0 ? void 0 : event.detail);
458
- }
459
- if (onPresenceUserChangeRef.current) {
460
- onPresenceUserChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
461
- }
462
- });
463
- element.addEventListener('onNavigate', function (event) {
464
- if (onNavigateRef.current) {
465
- onNavigateRef.current(event === null || event === void 0 ? void 0 : event.detail);
466
- }
467
- });
468
- element.addEventListener('onPresenceUserClick', function (event) {
469
- if (onPresenceUserClickRef.current) {
470
- onPresenceUserClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
471
- }
472
- });
527
+ element = ref.current;
528
+ if (element) {
529
+ element.addEventListener('onPresenceUserChange', handlePresenceUserChange);
530
+ element.addEventListener('onNavigate', handleNavigate);
531
+ element.addEventListener('onPresenceUserClick', handlePresenceUserClick);
532
+ }
473
533
  }
534
+ return function () {
535
+ if (element) {
536
+ element.removeEventListener('onPresenceUserChange', handlePresenceUserChange);
537
+ element.removeEventListener('onNavigate', handleNavigate);
538
+ element.removeEventListener('onPresenceUserClick', handlePresenceUserClick);
539
+ }
540
+ };
474
541
  }, []);
475
542
  return (React__default["default"].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
543
  };
@@ -484,14 +551,23 @@ var SnippylyRecorderControlPanel = function (props) {
484
551
  onRecordedDataRef.current = onRecordedData;
485
552
  }, [onRecordedData]);
486
553
  React.useEffect(function () {
554
+ var element;
555
+ var handleRecordedData = function (event) {
556
+ if (onRecordedDataRef.current) {
557
+ onRecordedDataRef.current(event === null || event === void 0 ? void 0 : event.detail);
558
+ }
559
+ };
487
560
  if (ref.current) {
488
- var element = ref.current;
489
- element.addEventListener('onRecordedData', function (event) {
490
- if (onRecordedDataRef.current) {
491
- onRecordedDataRef.current(event === null || event === void 0 ? void 0 : event.detail);
492
- }
493
- });
561
+ element = ref.current;
562
+ if (element) {
563
+ element.addEventListener('onRecordedData', handleRecordedData);
564
+ }
494
565
  }
566
+ return function () {
567
+ if (element) {
568
+ element.removeEventListener('onRecordedData', handleRecordedData);
569
+ }
570
+ };
495
571
  }, []);
496
572
  return (React__default["default"].createElement("velt-recorder-control-panel", { ref: ref, mode: mode, "panel-id": panelId }));
497
573
  };
@@ -509,14 +585,23 @@ var SnippylyRecorderPlayer = function (props) {
509
585
  onDeleteRef.current = onDelete;
510
586
  }, [onDelete]);
511
587
  React.useEffect(function () {
588
+ var element;
589
+ var handleOnDelete = function (event) {
590
+ if (onDeleteRef.current) {
591
+ onDeleteRef.current(event === null || event === void 0 ? void 0 : event.detail);
592
+ }
593
+ };
512
594
  if (ref.current) {
513
- var element = ref.current;
514
- element === null || element === void 0 ? void 0 : element.addEventListener('onDelete', function (event) {
515
- if (onDeleteRef.current) {
516
- onDeleteRef.current(event === null || event === void 0 ? void 0 : event.detail);
517
- }
518
- });
595
+ element = ref.current;
596
+ if (element) {
597
+ element === null || element === void 0 ? void 0 : element.addEventListener('onDelete', handleOnDelete);
598
+ }
519
599
  }
600
+ return function () {
601
+ if (element) {
602
+ element === null || element === void 0 ? void 0 : element.removeEventListener('onDelete', handleOnDelete);
603
+ }
604
+ };
520
605
  }, []);
521
606
  return (React__default["default"].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 }));
522
607
  };
@@ -569,14 +654,23 @@ var VeltCommentPlayerTimeline = function (props) {
569
654
  onCommentClickRef.current = onCommentClick;
570
655
  }, [onCommentClick]);
571
656
  React.useEffect(function () {
657
+ var element;
658
+ var handleCommentClick = function (event) {
659
+ if (onCommentClickRef.current) {
660
+ onCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
661
+ }
662
+ };
572
663
  if (ref.current) {
573
- var element = ref.current;
574
- element.addEventListener('onCommentClick', function (event) {
575
- if (onCommentClickRef.current) {
576
- onCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
577
- }
578
- });
664
+ element = ref.current;
665
+ if (element) {
666
+ element.addEventListener('onCommentClick', handleCommentClick);
667
+ }
579
668
  }
669
+ return function () {
670
+ if (element) {
671
+ element.removeEventListener('onCommentClick', handleCommentClick);
672
+ }
673
+ };
580
674
  }, []);
581
675
  return (React__default["default"].createElement("velt-comment-player-timeline", { ref: ref, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "total-media-length": totalMediaLength }));
582
676
  };
@@ -605,14 +699,23 @@ var VeltNotificationsTool = function (props) {
605
699
  onNotificationClickRef.current = onNotificationClick;
606
700
  }, [onNotificationClick]);
607
701
  React.useEffect(function () {
702
+ var element;
703
+ var handleNotificationClick = function (event) {
704
+ if (onNotificationClickRef.current) {
705
+ onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
706
+ }
707
+ };
608
708
  if (ref.current) {
609
- var element = ref.current;
610
- element.addEventListener('onNotificationClick', function (event) {
611
- if (onNotificationClickRef.current) {
612
- onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
613
- }
614
- });
709
+ element = ref.current;
710
+ if (element) {
711
+ element === null || element === void 0 ? void 0 : element.addEventListener('onNotificationClick', handleNotificationClick);
712
+ }
615
713
  }
714
+ return function () {
715
+ if (element) {
716
+ element === null || element === void 0 ? void 0 : element.removeEventListener('onNotificationClick', handleNotificationClick);
717
+ }
718
+ };
616
719
  }, []);
617
720
  return (React__default["default"].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
721
  };
@@ -626,14 +729,23 @@ var VeltNotificationsPanel = function (props) {
626
729
  onNotificationClickRef.current = onNotificationClick;
627
730
  }, [onNotificationClick]);
628
731
  React.useEffect(function () {
732
+ var element;
733
+ var handleNotificationClick = function (event) {
734
+ if (onNotificationClickRef.current) {
735
+ onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
736
+ }
737
+ };
629
738
  if (ref.current) {
630
- var element = ref.current;
631
- element.addEventListener('onNotificationClick', function (event) {
632
- if (onNotificationClickRef.current) {
633
- onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
634
- }
635
- });
739
+ element = ref.current;
740
+ if (element) {
741
+ element === null || element === void 0 ? void 0 : element.addEventListener('onNotificationClick', handleNotificationClick);
742
+ }
636
743
  }
744
+ return function () {
745
+ if (element) {
746
+ element === null || element === void 0 ? void 0 : element.removeEventListener('onNotificationClick', handleNotificationClick);
747
+ }
748
+ };
637
749
  }, []);
638
750
  return (React__default["default"].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
751
  };
@@ -647,14 +759,23 @@ var VeltNotificationsHistoryPanel = function (props) {
647
759
  onNotificationClickRef.current = onNotificationClick;
648
760
  }, [onNotificationClick]);
649
761
  React.useEffect(function () {
762
+ var element;
763
+ var handleNotificationClick = function (event) {
764
+ if (onNotificationClickRef.current) {
765
+ onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
766
+ }
767
+ };
650
768
  if (ref.current) {
651
- var element = ref.current;
652
- element.addEventListener('onNotificationClick', function (event) {
653
- if (onNotificationClickRef.current) {
654
- onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
655
- }
656
- });
769
+ element = ref.current;
770
+ if (element) {
771
+ element === null || element === void 0 ? void 0 : element.addEventListener('onNotificationClick', handleNotificationClick);
772
+ }
657
773
  }
774
+ return function () {
775
+ if (element) {
776
+ element === null || element === void 0 ? void 0 : element.removeEventListener('onNotificationClick', handleNotificationClick);
777
+ }
778
+ };
658
779
  }, []);
659
780
  return (React__default["default"].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 }));
660
781
  };