@veltdev/react 2.0.8 → 2.0.10

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 (7) hide show
  1. package/cjs/index.js +255 -134
  2. package/cjs/index.js.map +1 -1
  3. package/cjs/types/constants.d.ts +1 -1
  4. package/esm/index.js +255 -134
  5. package/esm/index.js.map +1 -1
  6. package/esm/types/constants.d.ts +1 -1
  7. package/package.json +1 -1
package/cjs/types/constants.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export declare const VELT_SDK_VERSION = "2.0.8";
1
+ export declare const VELT_SDK_VERSION = "2.0.10";
2
2
  export declare const VELT_SDK_INIT_EVENT = "onVeltInit";
3
3
  export declare const VELT_TAB_ID = "veltTabId";
package/esm/index.js CHANGED
@@ -132,7 +132,7 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain) {
132
132
  }
133
133
  };
134
134
 
135
- var VELT_SDK_VERSION = '2.0.8';
135
+ var VELT_SDK_VERSION = '2.0.10';
136
136
  var VELT_SDK_INIT_EVENT = 'onVeltInit';
137
137
  var VELT_TAB_ID = 'veltTabId';
138
138
 
@@ -266,54 +266,79 @@ var SnippylyComments = function (props) {
266
266
  onCommentSelectionChangeRef.current = onCommentSelectionChange;
267
267
  }, [onCommentSelectionChange]);
268
268
  useEffect(function () {
269
+ var element;
270
+ var handleSignIn = function (event) {
271
+ if (onSignInRef.current) {
272
+ onSignInRef.current(event === null || event === void 0 ? void 0 : event.detail);
273
+ }
274
+ };
275
+ var handleUpgrade = function (event) {
276
+ if (onUpgradeRef.current) {
277
+ onUpgradeRef.current(event === null || event === void 0 ? void 0 : event.detail);
278
+ }
279
+ };
280
+ var handleCommentAdd = function (event) {
281
+ if (onCommentAddRef.current) {
282
+ onCommentAddRef.current(event === null || event === void 0 ? void 0 : event.detail);
283
+ }
284
+ };
285
+ var handleCommentUpdate = function (event) {
286
+ if (onCommentUpdateRef.current) {
287
+ onCommentUpdateRef.current(event === null || event === void 0 ? void 0 : event.detail);
288
+ }
289
+ };
290
+ var handleCommentAccept = function (event) {
291
+ if (onCommentAcceptRef.current) {
292
+ onCommentAcceptRef.current(event === null || event === void 0 ? void 0 : event.detail);
293
+ }
294
+ };
295
+ var handleCommentReject = function (event) {
296
+ if (onCommentRejectRef.current) {
297
+ onCommentRejectRef.current(event === null || event === void 0 ? void 0 : event.detail);
298
+ }
299
+ };
300
+ var handleSidebarButtonOnCommentDialogClick = function (event) {
301
+ if (onSidebarButtonOnCommentDialogClickRef.current) {
302
+ onSidebarButtonOnCommentDialogClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
303
+ }
304
+ };
305
+ var handleCustomPinInject = function (event) {
306
+ if (onCustomPinInjectRef.current) {
307
+ onCustomPinInjectRef.current(event === null || event === void 0 ? void 0 : event.detail);
308
+ }
309
+ };
310
+ var handleCommentSelectionChange = function (event) {
311
+ if (onCommentSelectionChangeRef.current) {
312
+ onCommentSelectionChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
313
+ }
314
+ };
269
315
  if (ref.current) {
270
- var element = ref.current;
271
- element.addEventListener('onSignIn', function (event) {
272
- if (onSignInRef.current) {
273
- onSignInRef.current(event === null || event === void 0 ? void 0 : event.detail);
274
- }
275
- });
276
- element.addEventListener('onUpgrade', function (event) {
277
- if (onUpgradeRef.current) {
278
- onUpgradeRef.current(event === null || event === void 0 ? void 0 : event.detail);
279
- }
280
- });
281
- element.addEventListener('onCommentAdd', function (event) {
282
- if (onCommentAddRef.current) {
283
- onCommentAddRef.current(event === null || event === void 0 ? void 0 : event.detail);
284
- }
285
- });
286
- element.addEventListener('onCommentUpdate', function (event) {
287
- if (onCommentUpdateRef.current) {
288
- onCommentUpdateRef.current(event === null || event === void 0 ? void 0 : event.detail);
289
- }
290
- });
291
- element.addEventListener('onCommentAccept', function (event) {
292
- if (onCommentAcceptRef.current) {
293
- onCommentAcceptRef.current(event === null || event === void 0 ? void 0 : event.detail);
294
- }
295
- });
296
- element.addEventListener('onCommentReject', function (event) {
297
- if (onCommentRejectRef.current) {
298
- onCommentRejectRef.current(event === null || event === void 0 ? void 0 : event.detail);
299
- }
300
- });
301
- element.addEventListener('onSidebarButtonOnCommentDialogClick', function (event) {
302
- if (onSidebarButtonOnCommentDialogClickRef.current) {
303
- onSidebarButtonOnCommentDialogClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
304
- }
305
- });
306
- element.addEventListener('onCustomPinInject', function (event) {
307
- if (onCustomPinInjectRef.current) {
308
- onCustomPinInjectRef.current(event === null || event === void 0 ? void 0 : event.detail);
309
- }
310
- });
311
- element.addEventListener('onCommentSelectionChange', function (event) {
312
- if (onCommentSelectionChangeRef.current) {
313
- onCommentSelectionChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
314
- }
315
- });
316
+ element = ref.current;
317
+ if (element) {
318
+ element.addEventListener('onSignIn', handleSignIn);
319
+ element.addEventListener('onUpgrade', handleUpgrade);
320
+ element.addEventListener('onCommentAdd', handleCommentAdd);
321
+ element.addEventListener('onCommentUpdate', handleCommentUpdate);
322
+ element.addEventListener('onCommentAccept', handleCommentAccept);
323
+ element.addEventListener('onCommentReject', handleCommentReject);
324
+ element.addEventListener('onSidebarButtonOnCommentDialogClick', handleSidebarButtonOnCommentDialogClick);
325
+ element.addEventListener('onCustomPinInject', handleCustomPinInject);
326
+ element.addEventListener('onCommentSelectionChange', handleCommentSelectionChange);
327
+ }
316
328
  }
329
+ return function () {
330
+ if (element) {
331
+ element.removeEventListener('onSignIn', handleSignIn);
332
+ element.removeEventListener('onUpgrade', handleUpgrade);
333
+ element.removeEventListener('onCommentAdd', handleCommentAdd);
334
+ element.removeEventListener('onCommentUpdate', handleCommentUpdate);
335
+ element.removeEventListener('onCommentAccept', handleCommentAccept);
336
+ element.removeEventListener('onCommentReject', handleCommentReject);
337
+ element.removeEventListener('onSidebarButtonOnCommentDialogClick', handleSidebarButtonOnCommentDialogClick);
338
+ element.removeEventListener('onCustomPinInject', handleCustomPinInject);
339
+ element.removeEventListener('onCommentSelectionChange', handleCommentSelectionChange);
340
+ }
341
+ };
317
342
  }, []);
318
343
  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));
319
344
  };
@@ -339,25 +364,36 @@ var SnippylyCommentsSidebar = function (props) {
339
364
  onCommentClickRef.current = onCommentClick;
340
365
  }, [onCommentClick]);
341
366
  useEffect(function () {
367
+ var element;
368
+ var handleSidebarOpen = function (event) {
369
+ if (openSidebarRef.current) {
370
+ openSidebarRef.current(event === null || event === void 0 ? void 0 : event.detail);
371
+ }
372
+ if (onSidebarOpenRef.current) {
373
+ onSidebarOpenRef.current(event === null || event === void 0 ? void 0 : event.detail);
374
+ }
375
+ };
376
+ var handleSidebarCommentClick = function (event) {
377
+ if (onSidebarCommentClickRef.current) {
378
+ onSidebarCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
379
+ }
380
+ if (onCommentClickRef.current) {
381
+ onCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
382
+ }
383
+ };
342
384
  if (ref.current) {
343
- var element = ref.current;
344
- element.addEventListener('onSidebarOpen', function (event) {
345
- if (openSidebarRef.current) {
346
- openSidebarRef.current(event === null || event === void 0 ? void 0 : event.detail);
347
- }
348
- if (onSidebarOpenRef.current) {
349
- onSidebarOpenRef.current(event === null || event === void 0 ? void 0 : event.detail);
350
- }
351
- });
352
- element.addEventListener('onSidebarCommentClick', function (event) {
353
- if (onSidebarCommentClickRef.current) {
354
- onSidebarCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
355
- }
356
- if (onCommentClickRef.current) {
357
- onCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
358
- }
359
- });
385
+ element = ref.current;
386
+ if (element) {
387
+ element.addEventListener('onSidebarOpen', handleSidebarOpen);
388
+ element.addEventListener('onSidebarCommentClick', handleSidebarCommentClick);
389
+ }
360
390
  }
391
+ return function () {
392
+ if (element) {
393
+ element.removeEventListener('onSidebarOpen', handleSidebarOpen);
394
+ element.removeEventListener('onSidebarCommentClick', handleSidebarCommentClick);
395
+ }
396
+ };
361
397
  }, []);
362
398
  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 }));
363
399
  };
@@ -371,14 +407,23 @@ var SnippylyCommentTool = function (props) {
371
407
  onCommentModeChangeRef.current = onCommentModeChange;
372
408
  }, [onCommentModeChange]);
373
409
  useEffect(function () {
410
+ var element;
411
+ var handleCommentModeChange = function (event) {
412
+ if (onCommentModeChangeRef.current) {
413
+ onCommentModeChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
414
+ }
415
+ };
374
416
  if (ref.current) {
375
- var element = ref.current;
376
- element.addEventListener('onCommentModeChange', function (event) {
377
- if (onCommentModeChangeRef.current) {
378
- onCommentModeChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
379
- }
380
- });
417
+ element = ref.current;
418
+ if (element) {
419
+ element.addEventListener('onCommentModeChange', handleCommentModeChange);
420
+ }
381
421
  }
422
+ return function () {
423
+ if (element) {
424
+ element.removeEventListener('onCommentModeChange', handleCommentModeChange);
425
+ }
426
+ };
382
427
  }, []);
383
428
  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));
384
429
  };
@@ -396,17 +441,26 @@ var SnippylyCursor = function (props) {
396
441
  onCursorUserChangeRef.current = onCursorUserChange;
397
442
  }, [onCursorUserChange]);
398
443
  useEffect(function () {
444
+ var element;
445
+ var handleCursorUserChange = function (event) {
446
+ if (onCursorUsersChangedRef.current) {
447
+ onCursorUsersChangedRef.current(event === null || event === void 0 ? void 0 : event.detail);
448
+ }
449
+ if (onCursorUserChangeRef.current) {
450
+ onCursorUserChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
451
+ }
452
+ };
399
453
  if (ref.current) {
400
- var element = ref.current;
401
- element.addEventListener('onCursorUserChange', function (event) {
402
- if (onCursorUsersChangedRef.current) {
403
- onCursorUsersChangedRef.current(event === null || event === void 0 ? void 0 : event.detail);
404
- }
405
- if (onCursorUserChangeRef.current) {
406
- onCursorUserChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
407
- }
408
- });
454
+ element = ref.current;
455
+ if (element) {
456
+ element.addEventListener('onCursorUserChange', handleCursorUserChange);
457
+ }
409
458
  }
459
+ return function () {
460
+ if (element) {
461
+ element.removeEventListener('onCursorUserChange', handleCursorUserChange);
462
+ }
463
+ };
410
464
  }, []);
411
465
  return (React.createElement("velt-cursor", { ref: ref, "allowed-element-ids": allowedElementIds, "avatar-mode": avatarMode ? 'true' : undefined, "inactivity-time": inactivityTime }, children));
412
466
  };
@@ -442,27 +496,40 @@ var SnippylyPresence = function (props) {
442
496
  onPresenceUserClickRef.current = onPresenceUserClick;
443
497
  }, [onPresenceUserClick]);
444
498
  useEffect(function () {
499
+ var element;
500
+ var handlePresenceUserChange = function (event) {
501
+ if (onUsersChangedRef.current) {
502
+ onUsersChangedRef.current(event === null || event === void 0 ? void 0 : event.detail);
503
+ }
504
+ if (onPresenceUserChangeRef.current) {
505
+ onPresenceUserChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
506
+ }
507
+ };
508
+ var handleNavigate = function (event) {
509
+ if (onNavigateRef.current) {
510
+ onNavigateRef.current(event === null || event === void 0 ? void 0 : event.detail);
511
+ }
512
+ };
513
+ var handlePresenceUserClick = function (event) {
514
+ if (onPresenceUserClickRef.current) {
515
+ onPresenceUserClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
516
+ }
517
+ };
445
518
  if (ref.current) {
446
- var element = ref.current;
447
- element.addEventListener('onPresenceUserChange', function (event) {
448
- if (onUsersChangedRef.current) {
449
- onUsersChangedRef.current(event === null || event === void 0 ? void 0 : event.detail);
450
- }
451
- if (onPresenceUserChangeRef.current) {
452
- onPresenceUserChangeRef.current(event === null || event === void 0 ? void 0 : event.detail);
453
- }
454
- });
455
- element.addEventListener('onNavigate', function (event) {
456
- if (onNavigateRef.current) {
457
- onNavigateRef.current(event === null || event === void 0 ? void 0 : event.detail);
458
- }
459
- });
460
- element.addEventListener('onPresenceUserClick', function (event) {
461
- if (onPresenceUserClickRef.current) {
462
- onPresenceUserClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
463
- }
464
- });
519
+ element = ref.current;
520
+ if (element) {
521
+ element.addEventListener('onPresenceUserChange', handlePresenceUserChange);
522
+ element.addEventListener('onNavigate', handleNavigate);
523
+ element.addEventListener('onPresenceUserClick', handlePresenceUserClick);
524
+ }
465
525
  }
526
+ return function () {
527
+ if (element) {
528
+ element.removeEventListener('onPresenceUserChange', handlePresenceUserChange);
529
+ element.removeEventListener('onNavigate', handleNavigate);
530
+ element.removeEventListener('onPresenceUserClick', handlePresenceUserClick);
531
+ }
532
+ };
466
533
  }, []);
467
534
  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) }));
468
535
  };
@@ -476,14 +543,23 @@ var SnippylyRecorderControlPanel = function (props) {
476
543
  onRecordedDataRef.current = onRecordedData;
477
544
  }, [onRecordedData]);
478
545
  useEffect(function () {
546
+ var element;
547
+ var handleRecordedData = function (event) {
548
+ if (onRecordedDataRef.current) {
549
+ onRecordedDataRef.current(event === null || event === void 0 ? void 0 : event.detail);
550
+ }
551
+ };
479
552
  if (ref.current) {
480
- var element = ref.current;
481
- element.addEventListener('onRecordedData', function (event) {
482
- if (onRecordedDataRef.current) {
483
- onRecordedDataRef.current(event === null || event === void 0 ? void 0 : event.detail);
484
- }
485
- });
553
+ element = ref.current;
554
+ if (element) {
555
+ element.addEventListener('onRecordedData', handleRecordedData);
556
+ }
486
557
  }
558
+ return function () {
559
+ if (element) {
560
+ element.removeEventListener('onRecordedData', handleRecordedData);
561
+ }
562
+ };
487
563
  }, []);
488
564
  return (React.createElement("velt-recorder-control-panel", { ref: ref, mode: mode, "panel-id": panelId }));
489
565
  };
@@ -501,14 +577,23 @@ var SnippylyRecorderPlayer = function (props) {
501
577
  onDeleteRef.current = onDelete;
502
578
  }, [onDelete]);
503
579
  useEffect(function () {
580
+ var element;
581
+ var handleOnDelete = function (event) {
582
+ if (onDeleteRef.current) {
583
+ onDeleteRef.current(event === null || event === void 0 ? void 0 : event.detail);
584
+ }
585
+ };
504
586
  if (ref.current) {
505
- var element = ref.current;
506
- element === null || element === void 0 ? void 0 : element.addEventListener('onDelete', function (event) {
507
- if (onDeleteRef.current) {
508
- onDeleteRef.current(event === null || event === void 0 ? void 0 : event.detail);
509
- }
510
- });
587
+ element = ref.current;
588
+ if (element) {
589
+ element === null || element === void 0 ? void 0 : element.addEventListener('onDelete', handleOnDelete);
590
+ }
511
591
  }
592
+ return function () {
593
+ if (element) {
594
+ element === null || element === void 0 ? void 0 : element.removeEventListener('onDelete', handleOnDelete);
595
+ }
596
+ };
512
597
  }, []);
513
598
  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 }));
514
599
  };
@@ -561,14 +646,23 @@ var VeltCommentPlayerTimeline = function (props) {
561
646
  onCommentClickRef.current = onCommentClick;
562
647
  }, [onCommentClick]);
563
648
  useEffect(function () {
649
+ var element;
650
+ var handleCommentClick = function (event) {
651
+ if (onCommentClickRef.current) {
652
+ onCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
653
+ }
654
+ };
564
655
  if (ref.current) {
565
- var element = ref.current;
566
- element.addEventListener('onCommentClick', function (event) {
567
- if (onCommentClickRef.current) {
568
- onCommentClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
569
- }
570
- });
656
+ element = ref.current;
657
+ if (element) {
658
+ element.addEventListener('onCommentClick', handleCommentClick);
659
+ }
571
660
  }
661
+ return function () {
662
+ if (element) {
663
+ element.removeEventListener('onCommentClick', handleCommentClick);
664
+ }
665
+ };
572
666
  }, []);
573
667
  return (React.createElement("velt-comment-player-timeline", { ref: ref, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "total-media-length": totalMediaLength }));
574
668
  };
@@ -597,14 +691,23 @@ var VeltNotificationsTool = function (props) {
597
691
  onNotificationClickRef.current = onNotificationClick;
598
692
  }, [onNotificationClick]);
599
693
  useEffect(function () {
694
+ var element;
695
+ var handleNotificationClick = function (event) {
696
+ if (onNotificationClickRef.current) {
697
+ onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
698
+ }
699
+ };
600
700
  if (ref.current) {
601
- var element = ref.current;
602
- element.addEventListener('onNotificationClick', function (event) {
603
- if (onNotificationClickRef.current) {
604
- onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
605
- }
606
- });
701
+ element = ref.current;
702
+ if (element) {
703
+ element === null || element === void 0 ? void 0 : element.addEventListener('onNotificationClick', handleNotificationClick);
704
+ }
607
705
  }
706
+ return function () {
707
+ if (element) {
708
+ element === null || element === void 0 ? void 0 : element.removeEventListener('onNotificationClick', handleNotificationClick);
709
+ }
710
+ };
608
711
  }, []);
609
712
  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));
610
713
  };
@@ -618,14 +721,23 @@ var VeltNotificationsPanel = function (props) {
618
721
  onNotificationClickRef.current = onNotificationClick;
619
722
  }, [onNotificationClick]);
620
723
  useEffect(function () {
724
+ var element;
725
+ var handleNotificationClick = function (event) {
726
+ if (onNotificationClickRef.current) {
727
+ onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
728
+ }
729
+ };
621
730
  if (ref.current) {
622
- var element = ref.current;
623
- element.addEventListener('onNotificationClick', function (event) {
624
- if (onNotificationClickRef.current) {
625
- onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
626
- }
627
- });
731
+ element = ref.current;
732
+ if (element) {
733
+ element === null || element === void 0 ? void 0 : element.addEventListener('onNotificationClick', handleNotificationClick);
734
+ }
628
735
  }
736
+ return function () {
737
+ if (element) {
738
+ element === null || element === void 0 ? void 0 : element.removeEventListener('onNotificationClick', handleNotificationClick);
739
+ }
740
+ };
629
741
  }, []);
630
742
  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 }));
631
743
  };
@@ -639,14 +751,23 @@ var VeltNotificationsHistoryPanel = function (props) {
639
751
  onNotificationClickRef.current = onNotificationClick;
640
752
  }, [onNotificationClick]);
641
753
  useEffect(function () {
754
+ var element;
755
+ var handleNotificationClick = function (event) {
756
+ if (onNotificationClickRef.current) {
757
+ onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
758
+ }
759
+ };
642
760
  if (ref.current) {
643
- var element = ref.current;
644
- element.addEventListener('onNotificationClick', function (event) {
645
- if (onNotificationClickRef.current) {
646
- onNotificationClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
647
- }
648
- });
761
+ element = ref.current;
762
+ if (element) {
763
+ element === null || element === void 0 ? void 0 : element.addEventListener('onNotificationClick', handleNotificationClick);
764
+ }
649
765
  }
766
+ return function () {
767
+ if (element) {
768
+ element === null || element === void 0 ? void 0 : element.removeEventListener('onNotificationClick', handleNotificationClick);
769
+ }
770
+ };
650
771
  }, []);
651
772
  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 }));
652
773
  };