@veltdev/react 1.0.119 → 1.0.121

package/cjs/index.js

@@ -228,12 +228,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__default["default"].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__default["default"].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 = React.useRef();
     var onSignInRef = React.useRef(onSignIn);
     var onUpgradeRef = React.useRef(onUpgrade);
@@ -313,7 +313,7 @@ var SnippylyComments = function (props) {
             });
         }
     }, []);
-    return (React__default["default"].createElement("velt-comments", { ref: ref, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "comment-tool": [true, false].includes(commentTool) ? (commentTool ? 'true' : 'false') : undefined, "sidebar-button-on-comment-dialog": [true, false].includes(sidebarButtonOnCommentDialog) ? (sidebarButtonOnCommentDialog ? 'true' : 'false') : undefined, "device-indicator-on-comment-pins": [true, false].includes(deviceIndicatorOnCommentPins) ? (deviceIndicatorOnCommentPins ? 'true' : 'false') : undefined, "scroll-to-comment": [true, false].includes(scrollToComment) ? (scrollToComment ? 'true' : 'false') : undefined, "user-mentions": [true, false].includes(userMentions) ? (userMentions ? 'true' : 'false') : undefined, "delete-on-backspace": [true, false].includes(deleteOnBackspace) ? (deleteOnBackspace ? 'true' : 'false') : undefined, hotkey: [true, false].includes(hotkey) ? (hotkey ? 'true' : 'false') : undefined, "recording-summary": [true, false].includes(recordingSummary) ? (recordingSummary ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "unread-indicator-mode": unreadIndicatorMode, "pin-shadow-dom": [true, false].includes(pinShadowDom) ? (pinShadowDom ? 'true' : 'false') : undefined, "dialog-shadow-dom": [true, false].includes(dialogShadowDom) ? (dialogShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "change-detection-in-comment-mode": [true, false].includes(changeDetectionInCommentMode) ? (changeDetectionInCommentMode ? 'true' : 'false') : undefined, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "custom-status": JSON.stringify(customStatus), "custom-priority": JSON.stringify(customPriority), "custom-category": JSON.stringify(customCategory), "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
+    return (React__default["default"].createElement("velt-comments", { ref: ref, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "comment-tool": [true, false].includes(commentTool) ? (commentTool ? 'true' : 'false') : undefined, "sidebar-button-on-comment-dialog": [true, false].includes(sidebarButtonOnCommentDialog) ? (sidebarButtonOnCommentDialog ? 'true' : 'false') : undefined, "device-indicator-on-comment-pins": [true, false].includes(deviceIndicatorOnCommentPins) ? (deviceIndicatorOnCommentPins ? 'true' : 'false') : undefined, "scroll-to-comment": [true, false].includes(scrollToComment) ? (scrollToComment ? 'true' : 'false') : undefined, "user-mentions": [true, false].includes(userMentions) ? (userMentions ? 'true' : 'false') : undefined, "delete-on-backspace": [true, false].includes(deleteOnBackspace) ? (deleteOnBackspace ? 'true' : 'false') : undefined, hotkey: [true, false].includes(hotkey) ? (hotkey ? 'true' : 'false') : undefined, "recording-summary": [true, false].includes(recordingSummary) ? (recordingSummary ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "unread-indicator-mode": unreadIndicatorMode, "pin-shadow-dom": [true, false].includes(pinShadowDom) ? (pinShadowDom ? 'true' : 'false') : undefined, "dialog-shadow-dom": [true, false].includes(dialogShadowDom) ? (dialogShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "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) {
@@ -357,11 +357,11 @@ var SnippylyCommentsSidebar = function (props) {
             });
         }
     }, []);
-    return (React__default["default"].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__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 }));
 };
 
 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 = React.useRef();
     var onCommentModeChangeRef = React.useRef(onCommentModeChange);
     // Update the ref to always point to the latest callback function
@@ -378,7 +378,7 @@ var SnippylyCommentTool = function (props) {
             });
         }
     }, []);
-    return (React__default["default"].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__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));
 };
 
 var SnippylyCursor = function (props) {
@@ -517,8 +517,8 @@ var SnippylyRecorderTool = function (props) {
 };
 
 var SnippylySidebarButton = function (props) {
-    var tooltipText = props.tooltipText, children = props.children, darkMode = props.darkMode;
-    return (React__default["default"].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__default["default"].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) {
@@ -1113,6 +1113,11 @@ var VeltHighChartComments = function (_a) {
             React__default["default"].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__default["default"].createElement("velt-autocomplete", { hotkey: hotkey, "list-data": (typeof listData === 'object') ? JSON.stringify(listData) : undefined }));
+};
+
 var VeltWireframe = function (props) {
     var children = props.children;
     return (React__default["default"].createElement("velt-wireframe", null, children));
@@ -1166,9 +1171,9 @@ var VeltCommentDialogCommentCategory = function (props) {
     return (React__default["default"].createElement("velt-comment-dialog-comment-category-wireframe", null, children));
 };
 
-var VeltCommentDialogCommentCount = function (props) {
+var VeltCommentDialogCommentIndex = function (props) {
     var children = props.children;
-    return (React__default["default"].createElement("velt-comment-dialog-comment-count-wireframe", null, children));
+    return (React__default["default"].createElement("velt-comment-dialog-comment-index-wireframe", null, children));
 };
 
 var VeltCommentDialogCommentSuggestionStatus = function (props) {
@@ -1375,7 +1380,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;
@@ -1504,9 +1509,9 @@ var VeltCommentsSidebarList = function (props) {
     return (React__default["default"].createElement("velt-comments-sidebar-list-wireframe", null, children));
 };
 
-var VeltCommentsSidebarPageMode = function (props) {
+var VeltCommentsSidebarPageModeComposer = function (props) {
     var children = props.children;
-    return (React__default["default"].createElement("velt-comments-sidebar-page-mode-wireframe", null, children));
+    return (React__default["default"].createElement("velt-comments-sidebar-page-mode-composer-wireframe", null, children));
 };
 
 var VeltCommentsSidebarSearch = function (props) {
@@ -1533,7 +1538,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;
@@ -1579,8 +1584,8 @@ var VeltSidebarButtonCommentsCount = function (props) {
 };
 
 var VeltSidebarButtonWireframe = function (props) {
-    var children = props.children;
-    return (React__default["default"].createElement("velt-sidebar-button-wireframe", null, children));
+    var children = props.children, remainingProp = __rest(props, ["children"]);
+    return (React__default["default"].createElement("velt-sidebar-button-wireframe", __assign({}, remainingProp), children));
 };
 VeltSidebarButtonWireframe.CommentsCount = VeltSidebarButtonCommentsCount;
 
@@ -1652,6 +1657,35 @@ VeltUserSelectorDropdown.Email = VeltUserSelectorDropdownEmail;
 VeltUserSelectorDropdown.ErrorIcon = VeltUserSelectorDropdownErrorIcon;
 VeltUserSelectorDropdown.Name = VeltUserSelectorDropdownName;
 
+var VeltAutocompleteOptionIconWireframe = function (props) {
+    var children = props.children;
+    return (React__default["default"].createElement("velt-autocomplete-option-icon-wireframe", null, children));
+};
+
+var VeltAutocompleteOptionNameWireframe = function (props) {
+    var children = props.children;
+    return (React__default["default"].createElement("velt-autocomplete-option-name-wireframe", null, children));
+};
+
+var VeltAutocompleteOptionDescriptionWireframe = function (props) {
+    var children = props.children;
+    return (React__default["default"].createElement("velt-autocomplete-option-description-wireframe", null, children));
+};
+
+var VeltAutocompleteOptionErrorIconWireframe = function (props) {
+    var children = props.children;
+    return (React__default["default"].createElement("velt-autocomplete-option-error-icon-wireframe", null, children));
+};
+
+var VeltAutocompleteOptionWireframe = function (props) {
+    var children = props.children;
+    return (React__default["default"].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__default["default"].createElement("velt-comment-bubble-avatar-wireframe", null, children));
@@ -1662,9 +1696,6 @@ var VeltCommentBubbleCommentsCount = function (props) {
     return (React__default["default"].createElement("velt-comment-bubble-comments-count-wireframe", null, children));
 };
 
-/**
- * @beta This hook is in beta
- */
 function useClient() {
     var client = useVeltClient().client;
     var _a = React__default["default"].useState(), veltClient = _a[0], setVeltClient = _a[1];
@@ -1675,55 +1706,31 @@ function useClient() {
     }, [client, setVeltClient, veltClient]);
     return veltClient;
 }
-/**
- * @beta This hook is in beta
- */
 function useIdentify(user, userOptions) {
     var client = useVeltClient().client;
     React__default["default"].useEffect(function () {
         client && client.identify(user, userOptions);
     }, [client]);
 }
-/**
- * @beta This hook is in beta
- */
 function useSetDocumentId(documentId) {
     var client = useVeltClient().client;
     React__default["default"].useEffect(function () {
         client && client.setDocumentId(documentId);
     }, [client]);
 }
-/**
- * @beta This hook is in beta
- */
 function useUnsetDocumentId() {
     var client = useVeltClient().client;
     React__default["default"].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__default["default"].useEffect(function () {
-        client && client.setLocation(location);
-    }, [client]);
-}
-/**
- * @beta This hook is in beta
- */
-function useAddLocation(location) {
-    var client = useVeltClient().client;
-    React__default["default"].useEffect(function () {
-        client && client.addLocation(location);
+        client && client.setLocation(location, appendLocation);
     }, [client]);
 }
 
-/**
- * @beta This hook is in beta
- */
 function useCommentUtils() {
     var _a = React__default["default"].useState(), commentElement = _a[0], setCommentElement = _a[1];
     var client = useVeltClient().client;
@@ -1735,9 +1742,6 @@ function useCommentUtils() {
     }, [client, setCommentElement, commentElement]);
     return commentElement;
 }
-/**
- * @beta This hook is in beta
- */
 function useCommentAnnotations(documentId, location) {
     var commentElement = useCommentUtils();
     var _a = React__default["default"].useState([]), data = _a[0], setData = _a[1];
@@ -1753,9 +1757,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__default["default"].useState(), data = _a[0], setData = _a[1];
@@ -1771,9 +1772,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__default["default"].useState(), data = _a[0], setData = _a[1];
@@ -1789,9 +1787,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__default["default"].useState(), data = _a[0], setData = _a[1];
@@ -1807,9 +1802,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__default["default"].useState(), data = _a[0], setData = _a[1];
@@ -1826,9 +1818,6 @@ function useCommentDialogSidebarClickHandler() {
     return data;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useCursorUtils() {
     var _a = React__default["default"].useState(), cursorElement = _a[0], setCursorElement = _a[1];
     var client = useVeltClient().client;
@@ -1840,9 +1829,6 @@ function useCursorUtils() {
     }, [client, setCursorElement, cursorElement]);
     return cursorElement;
 }
-/**
- * @beta This hook is in beta
- */
 function useCursorUsers() {
     var cursorElement = useCursorUtils();
     var _a = React__default["default"].useState(null), data = _a[0], setData = _a[1];
@@ -1859,9 +1845,6 @@ function useCursorUsers() {
     return data;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useHuddleUtils() {
     var _a = React__default["default"].useState(), huddleElement = _a[0], setHuddleElement = _a[1];
     var client = useVeltClient().client;
@@ -1874,9 +1857,6 @@ function useHuddleUtils() {
     return huddleElement;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useLiveStateSyncUtils() {
     var _a = React__default["default"].useState(), liveStateSyncElement = _a[0], setLiveStateSyncElement = _a[1];
     var client = useVeltClient().client;
@@ -1888,9 +1868,6 @@ function useLiveStateSyncUtils() {
     }, [client, setLiveStateSyncElement, liveStateSyncElement]);
     return liveStateSyncElement;
 }
-/**
- * @beta This hook is in beta
- */
 function useLiveStateData(liveStateDataId) {
     var liveStateSyncElement = useLiveStateSyncUtils();
     var _a = React__default["default"].useState(), data = _a[0], setData = _a[1];
@@ -1906,9 +1883,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__default["default"].useEffect(function () {
@@ -1917,9 +1891,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__default["default"].useState(null), data = _a[0], setData = _a[1];
@@ -1935,9 +1906,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__default["default"].useState(null), data = _a[0], setData = _a[1];
@@ -1953,9 +1921,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__default["default"].useState({ state: 'idle' }), data = _a[0], setData = _a[1];
@@ -1971,9 +1936,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__default["default"].useState(null), data = _a[0], setData = _a[1];
@@ -1989,9 +1951,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;
@@ -2061,9 +2020,6 @@ function useLiveState(liveStateDataId, initialValue, options) {
     return [data, setDataFunction];
 }
 
-/**
- * @beta This hook is in beta
- */
 function usePresenceUtils() {
     var _a = React__default["default"].useState(), presenceElement = _a[0], setPresenceElement = _a[1];
     var client = useVeltClient().client;
@@ -2075,9 +2031,6 @@ function usePresenceUtils() {
     }, [client, setPresenceElement, presenceElement]);
     return presenceElement;
 }
-/**
- * @beta This hook is in beta
- */
 function usePresenceUsers() {
     var presenceElement = usePresenceUtils();
     var _a = React__default["default"].useState(null), data = _a[0], setData = _a[1];
@@ -2094,9 +2047,6 @@ function usePresenceUsers() {
     return data;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useRecorderUtils() {
     var _a = React__default["default"].useState(), recorderElement = _a[0], setRecorderElement = _a[1];
     var client = useVeltClient().client;
@@ -2108,9 +2058,6 @@ function useRecorderUtils() {
     }, [client, setRecorderElement, recorderElement]);
     return recorderElement;
 }
-/**
- * @beta This hook is in beta
- */
 function useRecorderAddHandler() {
     var recorderElement = useRecorderUtils();
     var _a = React__default["default"].useState(), data = _a[0], setData = _a[1];
@@ -2127,9 +2074,6 @@ function useRecorderAddHandler() {
     return data;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useAIRewriterUtils() {
     var _a = React__default["default"].useState(), rewriterElement = _a[0], setRewriterElement = _a[1];
     var client = useVeltClient().client;
@@ -2142,9 +2086,6 @@ function useAIRewriterUtils() {
     return rewriterElement;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useLiveSelectionUtils() {
     var _a = React__default["default"].useState(), selectionElement = _a[0], setSelectionElement = _a[1];
     var client = useVeltClient().client;
@@ -2157,9 +2098,6 @@ function useLiveSelectionUtils() {
     return selectionElement;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useTagUtils() {
     var _a = React__default["default"].useState(), tagElement = _a[0], setTagElement = _a[1];
     var client = useVeltClient().client;
@@ -2171,9 +2109,6 @@ function useTagUtils() {
     }, [client, setTagElement, tagElement]);
     return tagElement;
 }
-/**
- * @beta This hook is in beta
- */
 function useTagAnnotations(documentId, location) {
     var tagElement = useTagUtils();
     var _a = React__default["default"].useState(null), data = _a[0], setData = _a[1];
@@ -2190,9 +2125,6 @@ function useTagAnnotations(documentId, location) {
     return data;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useViewsUtils() {
     var _a = React__default["default"].useState(), viewsElement = _a[0], setViewsElement = _a[1];
     var client = useVeltClient().client;
@@ -2204,9 +2136,6 @@ function useViewsUtils() {
     }, [client, setViewsElement, viewsElement]);
     return viewsElement;
 }
-/**
- * @beta This hook is in beta
- */
 function useUniqueViewsByUser(clientLocationId) {
     var viewsElement = useViewsUtils();
     var _a = React__default["default"].useState(null), data = _a[0], setData = _a[1];
@@ -2222,9 +2151,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__default["default"].useState(null), data = _a[0], setData = _a[1];
@@ -2241,9 +2167,6 @@ function useUniqueViewsByDate(clientLocationId) {
     return data;
 }
 
-/**
- * @beta This hook is in beta
- */
 function useNotificationUtils() {
     var _a = React__default["default"].useState(), notificationElement = _a[0], setNotificationElement = _a[1];
     var client = useVeltClient().client;
@@ -2255,9 +2178,6 @@ function useNotificationUtils() {
     }, [client, setNotificationElement, notificationElement]);
     return notificationElement;
 }
-/**
- * @beta This hook is in beta
- */
 function useNotificationsData() {
     var notificationElement = useNotificationUtils();
     var _a = React__default["default"].useState([]), data = _a[0], setData = _a[1];
@@ -2274,6 +2194,33 @@ function useNotificationsData() {
     return data;
 }
 
+function useAutocompleteUtils() {
+    var _a = React__default["default"].useState(), autocompleteElement = _a[0], setAutocompleteElement = _a[1];
+    var client = useVeltClient().client;
+    React__default["default"].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__default["default"].useState(), data = _a[0], setData = _a[1];
+    React.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;
@@ -2367,6 +2314,8 @@ var logLiveState = function (action, liveStateDataId) {
 
 exports.VeltArrowTool = SnippylyArrowTool;
 exports.VeltArrows = SnippylyArrows;
+exports.VeltAutocomplete = VeltAutocomplete;
+exports.VeltAutocompleteOptionWireframe = VeltAutocompleteOptionWireframe;
 exports.VeltChartComment = VeltChartComment;
 exports.VeltCommentBubble = SnippylyCommentBubble;
 exports.VeltCommentBubbleAvatar = VeltCommentBubbleAvatar;
@@ -2408,7 +2357,8 @@ exports.VeltViewAnalytics = VeltViewAnalytics;
 exports.VeltWireframe = VeltWireframe;
 exports.createLiveStateMiddleware = createLiveStateMiddleware;
 exports.useAIRewriterUtils = useAIRewriterUtils;
-exports.useAddLocation = useAddLocation;
+exports.useAutocompleteChipClick = useAutocompleteChipClick;
+exports.useAutocompleteUtils = useAutocompleteUtils;
 exports.useClient = useClient;
 exports.useCommentAddHandler = useCommentAddHandler;
 exports.useCommentAnnotations = useCommentAnnotations;