@veltdev/react 3.0.42 → 3.0.44

package/cjs/index.js

@@ -140,7 +140,7 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain) {
     }
 };
 
-var VELT_SDK_VERSION = '3.0.42';
+var VELT_SDK_VERSION = '3.0.44';
 var VELT_SDK_INIT_EVENT = 'onVeltInit';
 var VELT_TAB_ID = 'veltTabId';
 
@@ -363,13 +363,14 @@ var SnippylyComments = function (props) {
 };
 
 var SnippylyCommentsSidebar = function (props) {
-    var embedMode = props.embedMode; props.floatingMode; var enableUrlNavigation = props.enableUrlNavigation, urlNavigation = props.urlNavigation, queryParamsComments = props.queryParamsComments, pageMode = props.pageMode, currentLocationSuffix = props.currentLocationSuffix, sortData = props.sortData, filterConfig = props.filterConfig, groupConfig = props.groupConfig, filters = props.filters, excludeLocationIds = props.excludeLocationIds, variant = props.variant, pageModeComposerVariant = props.pageModeComposerVariant, dialogVariant = props.dialogVariant, shadowDom = props.shadowDom, openSidebar = props.openSidebar, onSidebarOpen = props.onSidebarOpen, onSidebarCommentClick = props.onSidebarCommentClick, onCommentClick = props.onCommentClick, onSidebarClose = props.onSidebarClose, darkMode = props.darkMode, position = props.position, filterPanelLayout = props.filterPanelLayout, customActions = props.customActions;
+    var embedMode = props.embedMode; props.floatingMode; var enableUrlNavigation = props.enableUrlNavigation, urlNavigation = props.urlNavigation, queryParamsComments = props.queryParamsComments, pageMode = props.pageMode, currentLocationSuffix = props.currentLocationSuffix, sortData = props.sortData, filterConfig = props.filterConfig, groupConfig = props.groupConfig, filters = props.filters, excludeLocationIds = props.excludeLocationIds, variant = props.variant, pageModeComposerVariant = props.pageModeComposerVariant, dialogVariant = props.dialogVariant, shadowDom = props.shadowDom, openSidebar = props.openSidebar, onSidebarOpen = props.onSidebarOpen, onSidebarCommentClick = props.onSidebarCommentClick, onCommentClick = props.onCommentClick, onSidebarClose = props.onSidebarClose, darkMode = props.darkMode, position = props.position, filterPanelLayout = props.filterPanelLayout, customActions = props.customActions, focusedThreadDialogVariant = props.focusedThreadDialogVariant, focusedThreadMode = props.focusedThreadMode, onCommentNavigationButtonClick = props.onCommentNavigationButtonClick;
     var ref = React.useRef();
     var openSidebarRef = React.useRef(openSidebar);
     var onSidebarOpenRef = React.useRef(onSidebarOpen);
     var onSidebarCommentClickRef = React.useRef(onSidebarCommentClick);
     var onCommentClickRef = React.useRef(onCommentClick);
     var onSidebarCloseRef = React.useRef(onSidebarClose);
+    var onCommentNavigationButtonClickRef = React.useRef(onCommentNavigationButtonClick);
     // Update the ref to always point to the latest callback function
     React.useEffect(function () {
         openSidebarRef.current = openSidebar;
@@ -386,6 +387,9 @@ var SnippylyCommentsSidebar = function (props) {
     React.useEffect(function () {
         onCommentClickRef.current = onCommentClick;
     }, [onCommentClick]);
+    React.useEffect(function () {
+        onCommentNavigationButtonClickRef.current = onCommentNavigationButtonClick;
+    }, [onCommentNavigationButtonClick]);
     React.useEffect(function () {
         var element;
         var handleSidebarOpen = function (event) {
@@ -409,12 +413,18 @@ var SnippylyCommentsSidebar = function (props) {
                 onSidebarCloseRef.current(event === null || event === void 0 ? void 0 : event.detail);
             }
         };
+        var handleCommentNavigationButtonClick = function (event) {
+            if (onCommentNavigationButtonClickRef.current) {
+                onCommentNavigationButtonClickRef.current(event === null || event === void 0 ? void 0 : event.detail);
+            }
+        };
         if (ref.current) {
             element = ref.current;
             if (element) {
                 element.addEventListener('onSidebarOpen', handleSidebarOpen);
                 element.addEventListener('onSidebarCommentClick', handleSidebarCommentClick);
                 element.addEventListener('onSidebarClose', handleSidebarClose);
+                element.addEventListener('onCommentNavigationButtonClick', handleCommentNavigationButtonClick);
             }
         }
         return function () {
@@ -422,10 +432,11 @@ var SnippylyCommentsSidebar = function (props) {
                 element.removeEventListener('onSidebarOpen', handleSidebarOpen);
                 element.removeEventListener('onSidebarCommentClick', handleSidebarCommentClick);
                 element.removeEventListener('onSidebarClose', handleSidebarClose);
+                element.removeEventListener('onCommentNavigationButtonClick', handleCommentNavigationButtonClick);
             }
         };
     }, []);
-    return (React__default["default"].createElement("velt-comments-sidebar", { ref: ref, position: position, "filter-panel-layout": filterPanelLayout, "custom-actions": [true, false].includes(customActions) ? (customActions ? 'true' : 'false') : undefined, "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, "query-params-comments": [true, false].includes(queryParamsComments) ? (queryParamsComments ? '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, "exclude-location-ids": excludeLocationIds ? JSON.stringify(excludeLocationIds) : undefined, variant: variant, "page-mode-composer-variant": pageModeComposerVariant, "dialog-variant": dialogVariant, "sort-data": sortData, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "floating-mode": [true, false].includes(embedMode) ? (embedMode ? 'true' : 'false') : undefined }));
+    return (React__default["default"].createElement("velt-comments-sidebar", { ref: ref, position: position, "filter-panel-layout": filterPanelLayout, "focused-thread-mode": [true, false].includes(focusedThreadMode) ? (focusedThreadMode ? 'true' : 'false') : undefined, "focused-thread-dialog-variant": focusedThreadDialogVariant, "custom-actions": [true, false].includes(customActions) ? (customActions ? 'true' : 'false') : undefined, "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, "query-params-comments": [true, false].includes(queryParamsComments) ? (queryParamsComments ? '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, "exclude-location-ids": excludeLocationIds ? JSON.stringify(excludeLocationIds) : undefined, variant: variant, "page-mode-composer-variant": pageModeComposerVariant, "dialog-variant": dialogVariant, "sort-data": sortData, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "floating-mode": [true, false].includes(embedMode) ? (embedMode ? 'true' : 'false') : undefined }));
 };
 
 var SnippylyCommentTool = function (props) {
@@ -1391,6 +1402,11 @@ var VeltCommentPin = function (props) {
     return (React__default["default"].createElement("velt-comment-pin", { "annotation-id": annotationId }, children));
 };
 
+var VeltCommentText = function (props) {
+    var children = props.children, annotationId = props.annotationId, multiThreadAnnotationId = props.multiThreadAnnotationId;
+    return (React__default["default"].createElement("velt-comment-text", { "annotation-id": annotationId, "multi-thread-annotation-id": multiThreadAnnotationId }, children));
+};
+
 var VeltCanvasComment = function (props) {
     var children = props.children, canvasId = props.canvasId, position = props.position;
     return (React__default["default"].createElement("velt-canvas-comment", { "canvas-id": canvasId, position: JSON.stringify(position) }, children));
@@ -2147,6 +2163,11 @@ var VeltCommentDialogUnresolveButton = function (props) {
     return (React__default["default"].createElement("velt-comment-dialog-unresolve-button-wireframe", __assign({}, remainingProp), children));
 };
 
+var VeltCommentDialogNavigationButton = function (props) {
+    var children = props.children, remainingProp = __rest(props, ["children"]);
+    return (React__default["default"].createElement("velt-comment-dialog-navigation-button-wireframe", __assign({}, remainingProp), children));
+};
+
 var VeltCommentDialogWireframe = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-wireframe", __assign({}, remainingProp), children));
@@ -2179,6 +2200,7 @@ VeltCommentDialogWireframe.Upgrade = VeltCommentDialogUpgrade;
 VeltCommentDialogWireframe.CustomAnnotationDropdown = VeltCommentDialogCustomAnnotationDropdown;
 VeltCommentDialogWireframe.DeleteButton = VeltCommentDialogDeleteButton;
 VeltCommentDialogWireframe.CloseButton = VeltCommentDialogCloseButton;
+VeltCommentDialogWireframe.NavigationButton = VeltCommentDialogNavigationButton;
 
 var VeltCommentsSidebarCloseButton = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
@@ -2585,6 +2607,23 @@ var VeltCommentsSidebarActionButton = function (props) {
     return (React__default["default"].createElement("velt-comments-sidebar-action-button-wireframe", { variant: variant, type: type, id: id }, children));
 };
 
+var VeltCommentsSidebarFocusedThreadBackButton = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    return (React__default["default"].createElement("velt-comments-sidebar-focused-thread-back-button-wireframe", __assign({}, remainingProps), children));
+};
+
+var VeltCommentsSidebarFocusedThreadDialogContainer = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    return (React__default["default"].createElement("velt-comments-sidebar-focused-thread-dialog-container-wireframe", __assign({}, remainingProps), children));
+};
+
+var VeltCommentsSidebarFocusedThread = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    return (React__default["default"].createElement("velt-comments-sidebar-focused-thread-wireframe", __assign({}, remainingProps), children));
+};
+VeltCommentsSidebarFocusedThread.BackButton = VeltCommentsSidebarFocusedThreadBackButton;
+VeltCommentsSidebarFocusedThread.DialogContainer = VeltCommentsSidebarFocusedThreadDialogContainer;
+
 var VeltCommentsSidebarWireframe = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comments-sidebar-wireframe", __assign({}, remainingProp), children));
@@ -2605,6 +2644,7 @@ VeltCommentsSidebarWireframe.LocationFilterDropdown = VeltCommentsSidebarLocatio
 VeltCommentsSidebarWireframe.MinimalActionsDropdown = VeltCommentsSidebarMinimalActionsDropdownWireframe;
 VeltCommentsSidebarWireframe.ResetFilterButton = VeltCommentsSidebarResetFilterButtonWireframe;
 VeltCommentsSidebarWireframe.ActionButton = VeltCommentsSidebarActionButton;
+VeltCommentsSidebarWireframe.FocusedThread = VeltCommentsSidebarFocusedThread;
 
 var VeltCommentPinGhostCommentIndicator = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
@@ -3414,6 +3454,11 @@ var VeltCommentComposerWireframe = function (props) {
     return (React__default["default"].createElement("velt-comment-composer-wireframe", __assign({}, remainingProps), children));
 };
 
+var VeltCommentThreadWireframe = function (props) {
+    var children = props.children, remainingProp = __rest(props, ["children"]);
+    return (React__default["default"].createElement("velt-comment-thread-wireframe", __assign({}, remainingProp), children));
+};
+
 function useClient() {
     var client = useVeltClient().client;
     var _a = React__default["default"].useState(), veltClient = _a[0], setVeltClient = _a[1];
@@ -4111,6 +4156,21 @@ function useLiveSelectionUtils() {
     }, [client, setSelectionElement, selectionElement]);
     return selectionElement;
 }
+function useLiveSelectionDataHandler() {
+    var selectionElement = useLiveSelectionUtils();
+    var _a = React__default["default"].useState(null), data = _a[0], setData = _a[1];
+    React.useEffect(function () {
+        if (!(selectionElement === null || selectionElement === void 0 ? void 0 : selectionElement.getLiveSelectionData))
+            return;
+        var subscription = selectionElement.getLiveSelectionData().subscribe(function (res) {
+            setData(res);
+        });
+        return function () {
+            subscription.unsubscribe();
+        };
+    }, [selectionElement === null || selectionElement === void 0 ? void 0 : selectionElement.getLiveSelectionData]);
+    return data;
+}
 
 function useTagUtils() {
     var _a = React__default["default"].useState(), tagElement = _a[0], setTagElement = _a[1];
@@ -4389,7 +4449,9 @@ exports.VeltCommentDialogWireframe = VeltCommentDialogWireframe;
 exports.VeltCommentPin = VeltCommentPin;
 exports.VeltCommentPinWireframe = VeltCommentPinWireframe;
 exports.VeltCommentPlayerTimeline = VeltCommentPlayerTimeline;
+exports.VeltCommentText = VeltCommentText;
 exports.VeltCommentThread = VeltCommentThread;
+exports.VeltCommentThreadWireframe = VeltCommentThreadWireframe;
 exports.VeltCommentTool = SnippylyCommentTool;
 exports.VeltCommentToolWireframe = VeltCommentToolWireframe;
 exports.VeltComments = SnippylyComments;
@@ -4466,6 +4528,7 @@ exports.useEditorAccessRequestHandler = useEditorAccessRequestHandler;
 exports.useEditorAccessTimer = useEditorAccessTimer;
 exports.useHuddleUtils = useHuddleUtils;
 exports.useIdentify = useIdentify;
+exports.useLiveSelectionDataHandler = useLiveSelectionDataHandler;
 exports.useLiveSelectionUtils = useLiveSelectionUtils;
 exports.useLiveState = useLiveState;
 exports.useLiveStateData = useLiveStateData;