@veltdev/react 1.0.119 → 1.0.121

package/esm/index.js

@@ -220,12 +220,12 @@ var SnippylyProvider = function (props) {
 };
 
 var SnippylyCommentBubble = function (props) {
-    var targetCommentElementId = props.targetCommentElementId, avatar = props.avatar, showAvatar = props.showAvatar, commentBubbleTargetPinHover = props.commentBubbleTargetPinHover, children = props.children;
-    return (React.createElement("velt-comment-bubble", { "target-comment-element-id": targetCommentElementId, "show-avatar": [true, false].includes(showAvatar) ? (showAvatar ? 'true' : 'false') : undefined, avatar: [true, false].includes(avatar) ? (avatar ? 'true' : 'false') : undefined, "comment-bubble-target-pin-hover": commentBubbleTargetPinHover ? 'true' : undefined }, children));
+    var targetCommentElementId = props.targetCommentElementId, avatar = props.avatar, showAvatar = props.showAvatar, commentBubbleTargetPinHover = props.commentBubbleTargetPinHover, children = props.children, shadowDom = props.shadowDom, variant = props.variant;
+    return (React.createElement("velt-comment-bubble", { "target-comment-element-id": targetCommentElementId, "show-avatar": [true, false].includes(showAvatar) ? (showAvatar ? 'true' : 'false') : undefined, avatar: [true, false].includes(avatar) ? (avatar ? 'true' : 'false') : undefined, "comment-bubble-target-pin-hover": commentBubbleTargetPinHover ? 'true' : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, variant: variant }, children));
 };
 
 var SnippylyComments = function (props) {
-    var autoCategorize = props.autoCategorize, streamViewContainerId = props.streamViewContainerId, onSignIn = props.onSignIn, onUpgrade = props.onUpgrade, textMode = props.textMode, popoverMode = props.popoverMode, popoverTriangleComponent = props.popoverTriangleComponent, floatingCommentDialog = props.floatingCommentDialog, moderatorMode = props.moderatorMode, streamMode = props.streamMode, signInButton = props.signInButton, upgradeButton = props.upgradeButton, attachments = props.attachments, recordings = props.recordings, reactions = props.reactions, deviceInfo = props.deviceInfo, commentIndex = props.commentIndex, dialogOnHover = props.dialogOnHover, dialogOnTargetElementClick = props.dialogOnTargetElementClick, priority = props.priority, inboxMode = props.inboxMode, suggestionMode = props.suggestionMode, mobileMode = props.mobileMode, inlineCommentMode = props.inlineCommentMode, privateCommentMode = props.privateCommentMode, minimap = props.minimap, persistentCommentMode = props.persistentCommentMode, ghostComments = props.ghostComments, ghostCommentsIndicator = props.ghostCommentsIndicator, commentsOnDom = props.commentsOnDom, commentTool = props.commentTool, sidebarButtonOnCommentDialog = props.sidebarButtonOnCommentDialog, deviceIndicatorOnCommentPins = props.deviceIndicatorOnCommentPins, scrollToComment = props.scrollToComment, userMentions = props.userMentions, deleteOnBackspace = props.deleteOnBackspace, hotkey = props.hotkey, recordingSummary = props.recordingSummary, recordingCountdown = props.recordingCountdown, unreadIndicatorMode = props.unreadIndicatorMode, pinShadowDom = props.pinShadowDom, dialogShadowDom = props.dialogShadowDom, shadowDom = props.shadowDom, changeDetectionInCommentMode = props.changeDetectionInCommentMode, allowedElementIds = props.allowedElementIds, allowedElementClassNames = props.allowedElementClassNames, allowedElementQuerySelectors = props.allowedElementQuerySelectors, onCommentAdd = props.onCommentAdd, onCommentUpdate = props.onCommentUpdate, onCommentAccept = props.onCommentAccept, onCommentReject = props.onCommentReject, onSidebarButtonOnCommentDialogClick = props.onSidebarButtonOnCommentDialogClick, customStatus = props.customStatus, customPriority = props.customPriority, customCategory = props.customCategory, status = props.status, resolveButton = props.resolveButton, darkMode = props.darkMode, onCustomPinInject = props.onCustomPinInject, children = props.children;
+    var autoCategorize = props.autoCategorize, streamViewContainerId = props.streamViewContainerId, onSignIn = props.onSignIn, onUpgrade = props.onUpgrade, textMode = props.textMode, popoverMode = props.popoverMode, popoverTriangleComponent = props.popoverTriangleComponent, floatingCommentDialog = props.floatingCommentDialog, moderatorMode = props.moderatorMode, streamMode = props.streamMode, signInButton = props.signInButton, upgradeButton = props.upgradeButton, attachments = props.attachments, recordings = props.recordings, reactions = props.reactions, deviceInfo = props.deviceInfo, commentIndex = props.commentIndex, dialogOnHover = props.dialogOnHover, dialogOnTargetElementClick = props.dialogOnTargetElementClick, priority = props.priority, inboxMode = props.inboxMode, suggestionMode = props.suggestionMode, mobileMode = props.mobileMode, inlineCommentMode = props.inlineCommentMode, privateCommentMode = props.privateCommentMode, minimap = props.minimap, persistentCommentMode = props.persistentCommentMode, ghostComments = props.ghostComments, ghostCommentsIndicator = props.ghostCommentsIndicator, commentsOnDom = props.commentsOnDom, commentTool = props.commentTool, sidebarButtonOnCommentDialog = props.sidebarButtonOnCommentDialog, deviceIndicatorOnCommentPins = props.deviceIndicatorOnCommentPins, scrollToComment = props.scrollToComment, userMentions = props.userMentions, deleteOnBackspace = props.deleteOnBackspace, hotkey = props.hotkey, recordingSummary = props.recordingSummary, recordingCountdown = props.recordingCountdown, unreadIndicatorMode = props.unreadIndicatorMode, pinShadowDom = props.pinShadowDom, dialogShadowDom = props.dialogShadowDom, shadowDom = props.shadowDom, changeDetectionInCommentMode = props.changeDetectionInCommentMode, allowedElementIds = props.allowedElementIds, allowedElementClassNames = props.allowedElementClassNames, allowedElementQuerySelectors = props.allowedElementQuerySelectors, onCommentAdd = props.onCommentAdd, onCommentUpdate = props.onCommentUpdate, onCommentAccept = props.onCommentAccept, onCommentReject = props.onCommentReject, onSidebarButtonOnCommentDialogClick = props.onSidebarButtonOnCommentDialogClick, customStatus = props.customStatus, customPriority = props.customPriority, customCategory = props.customCategory, status = props.status, resolveButton = props.resolveButton, darkMode = props.darkMode, onCustomPinInject = props.onCustomPinInject, children = props.children, textCommentToolShadowDom = props.textCommentToolShadowDom, textCommentToolbarShadowDom = props.textCommentToolbarShadowDom;
     var ref = useRef();
     var onSignInRef = useRef(onSignIn);
     var onUpgradeRef = useRef(onUpgrade);
@@ -305,7 +305,7 @@ var SnippylyComments = function (props) {
             });
         }
     }, []);
-    return (React.createElement("velt-comments", { ref: ref, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "comment-tool": [true, false].includes(commentTool) ? (commentTool ? 'true' : 'false') : undefined, "sidebar-button-on-comment-dialog": [true, false].includes(sidebarButtonOnCommentDialog) ? (sidebarButtonOnCommentDialog ? 'true' : 'false') : undefined, "device-indicator-on-comment-pins": [true, false].includes(deviceIndicatorOnCommentPins) ? (deviceIndicatorOnCommentPins ? 'true' : 'false') : undefined, "scroll-to-comment": [true, false].includes(scrollToComment) ? (scrollToComment ? 'true' : 'false') : undefined, "user-mentions": [true, false].includes(userMentions) ? (userMentions ? 'true' : 'false') : undefined, "delete-on-backspace": [true, false].includes(deleteOnBackspace) ? (deleteOnBackspace ? 'true' : 'false') : undefined, hotkey: [true, false].includes(hotkey) ? (hotkey ? 'true' : 'false') : undefined, "recording-summary": [true, false].includes(recordingSummary) ? (recordingSummary ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "unread-indicator-mode": unreadIndicatorMode, "pin-shadow-dom": [true, false].includes(pinShadowDom) ? (pinShadowDom ? 'true' : 'false') : undefined, "dialog-shadow-dom": [true, false].includes(dialogShadowDom) ? (dialogShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "change-detection-in-comment-mode": [true, false].includes(changeDetectionInCommentMode) ? (changeDetectionInCommentMode ? 'true' : 'false') : undefined, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "custom-status": JSON.stringify(customStatus), "custom-priority": JSON.stringify(customPriority), "custom-category": JSON.stringify(customCategory), "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
+    return (React.createElement("velt-comments", { ref: ref, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "comment-tool": [true, false].includes(commentTool) ? (commentTool ? 'true' : 'false') : undefined, "sidebar-button-on-comment-dialog": [true, false].includes(sidebarButtonOnCommentDialog) ? (sidebarButtonOnCommentDialog ? 'true' : 'false') : undefined, "device-indicator-on-comment-pins": [true, false].includes(deviceIndicatorOnCommentPins) ? (deviceIndicatorOnCommentPins ? 'true' : 'false') : undefined, "scroll-to-comment": [true, false].includes(scrollToComment) ? (scrollToComment ? 'true' : 'false') : undefined, "user-mentions": [true, false].includes(userMentions) ? (userMentions ? 'true' : 'false') : undefined, "delete-on-backspace": [true, false].includes(deleteOnBackspace) ? (deleteOnBackspace ? 'true' : 'false') : undefined, hotkey: [true, false].includes(hotkey) ? (hotkey ? 'true' : 'false') : undefined, "recording-summary": [true, false].includes(recordingSummary) ? (recordingSummary ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "unread-indicator-mode": unreadIndicatorMode, "pin-shadow-dom": [true, false].includes(pinShadowDom) ? (pinShadowDom ? 'true' : 'false') : undefined, "dialog-shadow-dom": [true, false].includes(dialogShadowDom) ? (dialogShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "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, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "custom-status": JSON.stringify(customStatus), "custom-priority": JSON.stringify(customPriority), "custom-category": JSON.stringify(customCategory), "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyCommentsSidebar = function (props) {
@@ -349,11 +349,11 @@ var SnippylyCommentsSidebar = function (props) {
             });
         }
     }, []);
-    return (React.createElement("velt-comments-sidebar", { ref: ref, "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, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined }));
+    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 }));
 };
 
 var SnippylyCommentTool = function (props) {
-    var targetCommentElementId = props.targetCommentElementId, onCommentModeChange = props.onCommentModeChange, children = props.children, darkMode = props.darkMode, variant = props.variant;
+    var targetCommentElementId = props.targetCommentElementId, onCommentModeChange = props.onCommentModeChange, children = props.children, darkMode = props.darkMode, variant = props.variant, shadowDom = props.shadowDom;
     var ref = useRef();
     var onCommentModeChangeRef = useRef(onCommentModeChange);
     // Update the ref to always point to the latest callback function
@@ -370,7 +370,7 @@ var SnippylyCommentTool = function (props) {
             });
         }
     }, []);
-    return (React.createElement("velt-comment-tool", { ref: ref, "target-comment-element-id": targetCommentElementId, variant: variant, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
+    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));
 };
 
 var SnippylyCursor = function (props) {
@@ -509,8 +509,8 @@ var SnippylyRecorderTool = function (props) {
 };
 
 var SnippylySidebarButton = function (props) {
-    var tooltipText = props.tooltipText, children = props.children, darkMode = props.darkMode;
-    return (React.createElement("velt-sidebar-button", { "tooltip-text": tooltipText, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
+    var tooltipText = props.tooltipText, children = props.children, darkMode = props.darkMode, shadowDom = props.shadowDom;
+    return (React.createElement("velt-sidebar-button", { "tooltip-text": tooltipText, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyTags = function (props) {
@@ -1105,6 +1105,11 @@ var VeltHighChartComments = function (_a) {
             React.createElement(VeltChartComment, { ghostComment: true, commentMetadata: point.metadata, dialogMetadataTemplate: dialogMetadataTemplate || point.dialogMetadataTemplate || ['groupId', 'label', 'value'] }))); })));
 };
 
+var VeltAutocomplete = function (props) {
+    var hotkey = props.hotkey, listData = props.listData;
+    return (React.createElement("velt-autocomplete", { hotkey: hotkey, "list-data": (typeof listData === 'object') ? JSON.stringify(listData) : undefined }));
+};
+
 var VeltWireframe = function (props) {
     var children = props.children;
     return (React.createElement("velt-wireframe", null, children));
@@ -1158,9 +1163,9 @@ var VeltCommentDialogCommentCategory = function (props) {
     return (React.createElement("velt-comment-dialog-comment-category-wireframe", null, children));
 };
 
-var VeltCommentDialogCommentCount = function (props) {
+var VeltCommentDialogCommentIndex = function (props) {
     var children = props.children;
-    return (React.createElement("velt-comment-dialog-comment-count-wireframe", null, children));
+    return (React.createElement("velt-comment-dialog-comment-index-wireframe", null, children));
 };
 
 var VeltCommentDialogCommentSuggestionStatus = function (props) {
@@ -1367,7 +1372,7 @@ VeltCommentDialogWireframe.AssigneeBanner = VeltCommentDialogAssigneeBanner;
 VeltCommentDialogWireframe.AssignMenu = VeltCommentDialogAssignMenu;
 VeltCommentDialogWireframe.Body = VeltCommentDialogBody;
 VeltCommentDialogWireframe.CommentCategory = VeltCommentDialogCommentCategory;
-VeltCommentDialogWireframe.CommentCount = VeltCommentDialogCommentCount;
+VeltCommentDialogWireframe.CommentIndex = VeltCommentDialogCommentIndex;
 VeltCommentDialogWireframe.CommentSuggestionStatus = VeltCommentDialogCommentSuggestionStatus;
 VeltCommentDialogWireframe.Composer = VeltCommentDialogComposer;
 VeltCommentDialogWireframe.CopyLink = VeltCommentDialogCopyLink;
@@ -1496,9 +1501,9 @@ var VeltCommentsSidebarList = function (props) {
     return (React.createElement("velt-comments-sidebar-list-wireframe", null, children));
 };
 
-var VeltCommentsSidebarPageMode = function (props) {
+var VeltCommentsSidebarPageModeComposer = function (props) {
     var children = props.children;
-    return (React.createElement("velt-comments-sidebar-page-mode-wireframe", null, children));
+    return (React.createElement("velt-comments-sidebar-page-mode-composer-wireframe", null, children));
 };
 
 var VeltCommentsSidebarSearch = function (props) {
@@ -1525,7 +1530,7 @@ VeltCommentsSidebarWireframe.EmptyPlaceholder = VeltCommentsSidebarEmptyPlacehol
 VeltCommentsSidebarWireframe.Filter = VeltCommentsSidebarFilter;
 VeltCommentsSidebarWireframe.Header = VeltCommentsSidebarHeader;
 VeltCommentsSidebarWireframe.List = VeltCommentsSidebarList;
-VeltCommentsSidebarWireframe.PageMode = VeltCommentsSidebarPageMode;
+VeltCommentsSidebarWireframe.PageModeComposer = VeltCommentsSidebarPageModeComposer;
 VeltCommentsSidebarWireframe.Search = VeltCommentsSidebarSearch;
 VeltCommentsSidebarWireframe.Status = VeltCommentsSidebarStatus;
 VeltCommentsSidebarWireframe.FilterButton = VeltCommentsSidebarFilterButton;
@@ -1571,8 +1576,8 @@ var VeltSidebarButtonCommentsCount = function (props) {
 };
 
 var VeltSidebarButtonWireframe = function (props) {
-    var children = props.children;
-    return (React.createElement("velt-sidebar-button-wireframe", null, children));
+    var children = props.children, remainingProp = __rest(props, ["children"]);
+    return (React.createElement("velt-sidebar-button-wireframe", __assign({}, remainingProp), children));
 };
 VeltSidebarButtonWireframe.CommentsCount = VeltSidebarButtonCommentsCount;
 
@@ -1644,6 +1649,35 @@ VeltUserSelectorDropdown.Email = VeltUserSelectorDropdownEmail;
 VeltUserSelectorDropdown.ErrorIcon = VeltUserSelectorDropdownErrorIcon;
 VeltUserSelectorDropdown.Name = VeltUserSelectorDropdownName;
 
+var VeltAutocompleteOptionIconWireframe = function (props) {
+    var children = props.children;
+    return (React.createElement("velt-autocomplete-option-icon-wireframe", null, children));
+};
+
+var VeltAutocompleteOptionNameWireframe = function (props) {
+    var children = props.children;
+    return (React.createElement("velt-autocomplete-option-name-wireframe", null, children));
+};
+
+var VeltAutocompleteOptionDescriptionWireframe = function (props) {
+    var children = props.children;
+    return (React.createElement("velt-autocomplete-option-description-wireframe", null, children));
+};
+
+var VeltAutocompleteOptionErrorIconWireframe = function (props) {
+    var children = props.children;
+    return (React.createElement("velt-autocomplete-option-error-icon-wireframe", null, children));
+};
+
+var VeltAutocompleteOptionWireframe = function (props) {
+    var children = props.children;
+    return (React.createElement("velt-autocomplete-option-wireframe", null, children));
+};
+VeltAutocompleteOptionWireframe.Icon = VeltAutocompleteOptionIconWireframe;
+VeltAutocompleteOptionWireframe.Description = VeltAutocompleteOptionDescriptionWireframe;
+VeltAutocompleteOptionWireframe.ErrorIcon = VeltAutocompleteOptionErrorIconWireframe;
+VeltAutocompleteOptionWireframe.Name = VeltAutocompleteOptionNameWireframe;
+
 var VeltCommentBubbleAvatar = function (props) {
     var children = props.children;
     return (React.createElement("velt-comment-bubble-avatar-wireframe", null, children));
@@ -1654,9 +1688,6 @@ var VeltCommentBubbleCommentsCount = function (props) {
     return (React.createElement("velt-comment-bubble-comments-count-wireframe", null, children));
 };
 
-/**
- * @beta This hook is in beta
- */
 function useClient() {
     var client = useVeltClient().client;
     var _a = React.useState(), veltClient = _a[0], setVeltClient = _a[1];
@@ -1667,55 +1698,31 @@ function useClient() {
     }, [client, setVeltClient, veltClient]);
     return veltClient;
 }
-/**
- * @beta This hook is in beta
- */
 function useIdentify(user, userOptions) {
     var client = useVeltClient().client;
     React.useEffect(function () {
         client && client.identify(user, userOptions);
     }, [client]);
 }
-/**
- * @beta This hook is in beta
- */
 function useSetDocumentId(documentId) {
     var client = useVeltClient().client;
     React.useEffect(function () {
         client && client.setDocumentId(documentId);
     }, [client]);
 }
-/**
- * @beta This hook is in beta
- */
 function useUnsetDocumentId() {
     var client = useVeltClient().client;
     React.useEffect(function () {
         client && client.unsetDocumentId && client.unsetDocumentId();
     }, [client]);
 }
-/**
- * @beta This hook is in beta
- */
-function useSetLocation(location) {
+function useSetLocation(location, appendLocation) {
     var client = useVeltClient().client;
     React.useEffect(function () {
-        client && client.setLocation(location);
-    }, [client]);
-}
-/**
- * @beta This hook is in beta
- */
-function useAddLocation(location) {
-    var client = useVeltClient().client;
-    React.useEffect(function () {
-        client && client.addLocation(location);
+        client && client.setLocation(location, appendLocation);
     }, [client]);
 }
 
-/**
- * @beta This hook is in beta
- */
 function useCommentUtils() {
     var _a = React.useState(), commentElement = _a[0], setCommentElement = _a[1];
     var client = useVeltClient().client;
@@ -1727,9 +1734,6 @@ function useCommentUtils() {
     }, [client, setCommentElement, commentElement]);
     return commentElement;
 }
-/**
- * @beta This hook is in beta
- */
 function useCommentAnnotations(documentId, location) {
     var commentElement = useCommentUtils();
     var _a = React.useState([]), data = _a[0], setData = _a[1];
@@ -1745,9 +1749,6 @@ function useCommentAnnotations(documentId, location) {
     }, [commentElement === null || commentElement === void 0 ? void 0 : commentElement.getAllCommentAnnotations]);
     return data;
 }
-/**
- * @beta This hook is in beta
- */
 function useCommentModeState() {
     var commentElement = useCommentUtils();
     var _a = React.useState(), data = _a[0], setData = _a[1];
@@ -1763,9 +1764,6 @@ function useCommentModeState() {
     }, [commentElement === null || commentElement === void 0 ? void 0 : commentElement.onCommentModeChange]);
     return data;
 }
-/**
- * @beta This hook is in beta
- */
 function useCommentAddHandler() {
     var commentElement = useCommentUtils();
     var _a = React.useState(), data = _a[0], setData = _a[1];
@@ -1781,9 +1779,6 @@ function useCommentAddHandler() {
     }, [commentElement === null || commentElement === void 0 ? void 0 : commentElement.onCommentAdd]);
     return data;
 }
-/**
- * @beta This hook is in beta
- */
 function useCommentUpdateHandler() {
     var commentElement = useCommentUtils();
     var _a = React.useState(), data = _a[0], setData = _a[1];
@@ -1799,9 +1794,6 @@ function useCommentUpdateHandler() {
     }, [commentElement === null || commentElement === void 0 ? void 0 : commentElement.onCommentUpdate]);
     return data;
 }
-/**
- * @beta This hook is in beta
- */
 function useCommentDialogSidebarClickHandler() {
     var commentElement = useCommentUtils();
     var _a = React.useState(), data = _a[0], setData = _a[1];
@@ -1818,9 +1810,6 @@ function useCommentDialogSidebarClickHandler() {
     return data;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useCursorUtils() {
     var _a = React.useState(), cursorElement = _a[0], setCursorElement = _a[1];
     var client = useVeltClient().client;
@@ -1832,9 +1821,6 @@ function useCursorUtils() {
     }, [client, setCursorElement, cursorElement]);
     return cursorElement;
 }
-/**
- * @beta This hook is in beta
- */
 function useCursorUsers() {
     var cursorElement = useCursorUtils();
     var _a = React.useState(null), data = _a[0], setData = _a[1];
@@ -1851,9 +1837,6 @@ function useCursorUsers() {
     return data;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useHuddleUtils() {
     var _a = React.useState(), huddleElement = _a[0], setHuddleElement = _a[1];
     var client = useVeltClient().client;
@@ -1866,9 +1849,6 @@ function useHuddleUtils() {
     return huddleElement;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useLiveStateSyncUtils() {
     var _a = React.useState(), liveStateSyncElement = _a[0], setLiveStateSyncElement = _a[1];
     var client = useVeltClient().client;
@@ -1880,9 +1860,6 @@ function useLiveStateSyncUtils() {
     }, [client, setLiveStateSyncElement, liveStateSyncElement]);
     return liveStateSyncElement;
 }
-/**
- * @beta This hook is in beta
- */
 function useLiveStateData(liveStateDataId) {
     var liveStateSyncElement = useLiveStateSyncUtils();
     var _a = React.useState(), data = _a[0], setData = _a[1];
@@ -1898,9 +1875,6 @@ function useLiveStateData(liveStateDataId) {
     }, [liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.getLiveStateData]);
     return data;
 }
-/**
- * @beta This hook is in beta
- */
 function useSetLiveStateData(liveStateDataId, liveStateData) {
     var liveStateSyncElement = useLiveStateSyncUtils();
     React.useEffect(function () {
@@ -1909,9 +1883,6 @@ function useSetLiveStateData(liveStateDataId, liveStateData) {
         }
     }, [liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.setLiveStateData]);
 }
-/**
- * @beta This hook is in beta
- */
 function useUserEditorState() {
     var liveStateSyncElement = useLiveStateSyncUtils();
     var _a = React.useState(null), data = _a[0], setData = _a[1];
@@ -1927,9 +1898,6 @@ function useUserEditorState() {
     }, [liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.isUserEditor]);
     return data;
 }
-/**
- * @beta This hook is in beta
- */
 function useEditor() {
     var liveStateSyncElement = useLiveStateSyncUtils();
     var _a = React.useState(null), data = _a[0], setData = _a[1];
@@ -1945,9 +1913,6 @@ function useEditor() {
     }, [liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.getEditor]);
     return data;
 }
-/**
- * @beta This hook is in beta
- */
 function useEditorAccessTimer() {
     var liveStateSyncElement = useLiveStateSyncUtils();
     var _a = React.useState({ state: 'idle' }), data = _a[0], setData = _a[1];
@@ -1963,9 +1928,6 @@ function useEditorAccessTimer() {
     }, [liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.getEditorAccessTimer]);
     return data;
 }
-/**
- * @beta This hook is in beta
- */
 function useEditorAccessRequestHandler() {
     var liveStateSyncElement = useLiveStateSyncUtils();
     var _a = React.useState(null), data = _a[0], setData = _a[1];
@@ -1981,9 +1943,6 @@ function useEditorAccessRequestHandler() {
     }, [liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.isEditorAccessRequested]);
     return data;
 }
-/**
- * @beta This hook is in beta
- */
 function useLiveState(liveStateDataId, initialValue, options) {
     var liveStateSyncElement = useLiveStateSyncUtils();
     var client = useVeltClient().client;
@@ -2053,9 +2012,6 @@ function useLiveState(liveStateDataId, initialValue, options) {
     return [data, setDataFunction];
 }
 
-/**
- * @beta This hook is in beta
- */
 function usePresenceUtils() {
     var _a = React.useState(), presenceElement = _a[0], setPresenceElement = _a[1];
     var client = useVeltClient().client;
@@ -2067,9 +2023,6 @@ function usePresenceUtils() {
     }, [client, setPresenceElement, presenceElement]);
     return presenceElement;
 }
-/**
- * @beta This hook is in beta
- */
 function usePresenceUsers() {
     var presenceElement = usePresenceUtils();
     var _a = React.useState(null), data = _a[0], setData = _a[1];
@@ -2086,9 +2039,6 @@ function usePresenceUsers() {
     return data;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useRecorderUtils() {
     var _a = React.useState(), recorderElement = _a[0], setRecorderElement = _a[1];
     var client = useVeltClient().client;
@@ -2100,9 +2050,6 @@ function useRecorderUtils() {
     }, [client, setRecorderElement, recorderElement]);
     return recorderElement;
 }
-/**
- * @beta This hook is in beta
- */
 function useRecorderAddHandler() {
     var recorderElement = useRecorderUtils();
     var _a = React.useState(), data = _a[0], setData = _a[1];
@@ -2119,9 +2066,6 @@ function useRecorderAddHandler() {
     return data;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useAIRewriterUtils() {
     var _a = React.useState(), rewriterElement = _a[0], setRewriterElement = _a[1];
     var client = useVeltClient().client;
@@ -2134,9 +2078,6 @@ function useAIRewriterUtils() {
     return rewriterElement;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useLiveSelectionUtils() {
     var _a = React.useState(), selectionElement = _a[0], setSelectionElement = _a[1];
     var client = useVeltClient().client;
@@ -2149,9 +2090,6 @@ function useLiveSelectionUtils() {
     return selectionElement;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useTagUtils() {
     var _a = React.useState(), tagElement = _a[0], setTagElement = _a[1];
     var client = useVeltClient().client;
@@ -2163,9 +2101,6 @@ function useTagUtils() {
     }, [client, setTagElement, tagElement]);
     return tagElement;
 }
-/**
- * @beta This hook is in beta
- */
 function useTagAnnotations(documentId, location) {
     var tagElement = useTagUtils();
     var _a = React.useState(null), data = _a[0], setData = _a[1];
@@ -2182,9 +2117,6 @@ function useTagAnnotations(documentId, location) {
     return data;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useViewsUtils() {
     var _a = React.useState(), viewsElement = _a[0], setViewsElement = _a[1];
     var client = useVeltClient().client;
@@ -2196,9 +2128,6 @@ function useViewsUtils() {
     }, [client, setViewsElement, viewsElement]);
     return viewsElement;
 }
-/**
- * @beta This hook is in beta
- */
 function useUniqueViewsByUser(clientLocationId) {
     var viewsElement = useViewsUtils();
     var _a = React.useState(null), data = _a[0], setData = _a[1];
@@ -2214,9 +2143,6 @@ function useUniqueViewsByUser(clientLocationId) {
     }, [viewsElement === null || viewsElement === void 0 ? void 0 : viewsElement.getUniqueViewsByUser]);
     return data;
 }
-/**
- * @beta This hook is in beta
- */
 function useUniqueViewsByDate(clientLocationId) {
     var viewsElement = useViewsUtils();
     var _a = React.useState(null), data = _a[0], setData = _a[1];
@@ -2233,9 +2159,6 @@ function useUniqueViewsByDate(clientLocationId) {
     return data;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useNotificationUtils() {
     var _a = React.useState(), notificationElement = _a[0], setNotificationElement = _a[1];
     var client = useVeltClient().client;
@@ -2247,9 +2170,6 @@ function useNotificationUtils() {
     }, [client, setNotificationElement, notificationElement]);
     return notificationElement;
 }
-/**
- * @beta This hook is in beta
- */
 function useNotificationsData() {
     var notificationElement = useNotificationUtils();
     var _a = React.useState([]), data = _a[0], setData = _a[1];
@@ -2266,6 +2186,33 @@ function useNotificationsData() {
     return data;
 }
 
+function useAutocompleteUtils() {
+    var _a = React.useState(), autocompleteElement = _a[0], setAutocompleteElement = _a[1];
+    var client = useVeltClient().client;
+    React.useEffect(function () {
+        if (!client || autocompleteElement)
+            return;
+        var loadedAutocompleteElement = client.getAutocompleteElement();
+        setAutocompleteElement(loadedAutocompleteElement);
+    }, [client, setAutocompleteElement, autocompleteElement]);
+    return autocompleteElement;
+}
+function useAutocompleteChipClick() {
+    var autocompleteElement = useAutocompleteUtils();
+    var _a = React.useState(), data = _a[0], setData = _a[1];
+    useEffect(function () {
+        if (!autocompleteElement)
+            return;
+        var subscription = autocompleteElement.onAutocompleteChipClick().subscribe(function (res) {
+            setData(res);
+        });
+        return function () {
+            subscription.unsubscribe();
+        };
+    }, [autocompleteElement]);
+    return data;
+}
+
 var sessionId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
 var getSessionId = function () {
     return sessionId;
@@ -2357,5 +2304,5 @@ var logLiveState = function (action, liveStateDataId) {
     }
 };
 
-export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, VeltChartComment, SnippylyCommentBubble as VeltCommentBubble, VeltCommentBubbleAvatar, VeltCommentBubbleCommentsCount, VeltCommentDialogWireframe, VeltCommentPinWireframe, VeltCommentPlayerTimeline, VeltCommentThread, SnippylyCommentTool as VeltCommentTool, VeltCommentToolWireframe, SnippylyComments as VeltComments, SnippylyCommentsSidebar as VeltCommentsSidebar, VeltCommentsSidebarWireframe, SnippylyCursor as VeltCursor, VeltHighChartComments, SnippylyHuddle as VeltHuddle, SnippylyHuddleTool as VeltHuddleTool, VeltNivoChartComments, VeltNotificationsHistoryPanel, VeltNotificationsPanel, VeltNotificationsTool, SnippylyPresence as VeltPresence, SnippylyProvider as VeltProvider, SnippylyRecorderControlPanel as VeltRecorderControlPanel, SnippylyRecorderNotes as VeltRecorderNotes, SnippylyRecorderPlayer as VeltRecorderPlayer, SnippylyRecorderTool as VeltRecorderTool, SnippylySidebarButton as VeltSidebarButton, VeltSidebarButtonWireframe, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, VeltTextCommentToolWireframe, VeltTextCommentToolbar as VeltTextCommentToolbarWireframe, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltUserSelectorDropdown as VeltUserSelectorDropdownWireframe, VeltVideoPlayer, VeltViewAnalytics, VeltWireframe, createLiveStateMiddleware, useAIRewriterUtils, useAddLocation, useClient, useCommentAddHandler, useCommentAnnotations, useCommentDialogSidebarClickHandler, useCommentModeState, useCommentUpdateHandler, useCommentUtils, useCursorUsers, useCursorUtils, useEditor, useEditorAccessRequestHandler, useEditorAccessTimer, useHuddleUtils, useIdentify, useLiveSelectionUtils, useLiveState, useLiveStateData, useLiveStateSyncUtils, useNotificationUtils, useNotificationsData, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderUtils, useSetDocumentId, useSetLiveStateData, useSetLocation, useTagAnnotations, useTagUtils, useUniqueViewsByDate, useUniqueViewsByUser, useUnsetDocumentId, useUserEditorState, useVeltClient, useViewsUtils };
+export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, VeltAutocomplete, VeltAutocompleteOptionWireframe, VeltChartComment, SnippylyCommentBubble as VeltCommentBubble, VeltCommentBubbleAvatar, VeltCommentBubbleCommentsCount, VeltCommentDialogWireframe, VeltCommentPinWireframe, VeltCommentPlayerTimeline, VeltCommentThread, SnippylyCommentTool as VeltCommentTool, VeltCommentToolWireframe, SnippylyComments as VeltComments, SnippylyCommentsSidebar as VeltCommentsSidebar, VeltCommentsSidebarWireframe, SnippylyCursor as VeltCursor, VeltHighChartComments, SnippylyHuddle as VeltHuddle, SnippylyHuddleTool as VeltHuddleTool, VeltNivoChartComments, VeltNotificationsHistoryPanel, VeltNotificationsPanel, VeltNotificationsTool, SnippylyPresence as VeltPresence, SnippylyProvider as VeltProvider, SnippylyRecorderControlPanel as VeltRecorderControlPanel, SnippylyRecorderNotes as VeltRecorderNotes, SnippylyRecorderPlayer as VeltRecorderPlayer, SnippylyRecorderTool as VeltRecorderTool, SnippylySidebarButton as VeltSidebarButton, VeltSidebarButtonWireframe, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, VeltTextCommentToolWireframe, VeltTextCommentToolbar as VeltTextCommentToolbarWireframe, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltUserSelectorDropdown as VeltUserSelectorDropdownWireframe, VeltVideoPlayer, VeltViewAnalytics, VeltWireframe, createLiveStateMiddleware, useAIRewriterUtils, useAutocompleteChipClick, useAutocompleteUtils, useClient, useCommentAddHandler, useCommentAnnotations, useCommentDialogSidebarClickHandler, useCommentModeState, useCommentUpdateHandler, useCommentUtils, useCursorUsers, useCursorUtils, useEditor, useEditorAccessRequestHandler, useEditorAccessTimer, useHuddleUtils, useIdentify, useLiveSelectionUtils, useLiveState, useLiveStateData, useLiveStateSyncUtils, useNotificationUtils, useNotificationsData, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderUtils, useSetDocumentId, useSetLiveStateData, useSetLocation, useTagAnnotations, useTagUtils, useUniqueViewsByDate, useUniqueViewsByUser, useUnsetDocumentId, useUserEditorState, useVeltClient, useViewsUtils };
 //# sourceMappingURL=index.js.map