@veltdev/react 1.0.94 → 1.0.96

package/cjs/index.js

@@ -109,7 +109,7 @@ var loadVelt = function (callback, version, staging, develop) {
     }
 };
 
-var VELT_SDK_VERSION = '1.0.109';
+var VELT_SDK_VERSION = '1.0.111';
 var VELT_SDK_INIT_EVENT = 'onVeltInit';
 
 var SnippylyProvider = function (props) {
@@ -277,7 +277,7 @@ var SnippylyCommentsSidebar = function (props) {
 };
 
 var SnippylyCommentTool = function (props) {
-    var targetCommentElementId = props.targetCommentElementId, onCommentModeChange = props.onCommentModeChange, children = props.children;
+    var targetCommentElementId = props.targetCommentElementId, onCommentModeChange = props.onCommentModeChange, children = props.children, darkMode = props.darkMode;
     var ref = React.useRef();
     React.useEffect(function () {
         if (ref.current) {
@@ -289,7 +289,7 @@ var SnippylyCommentTool = function (props) {
             });
         }
     }, []);
-    return (React__default["default"].createElement("velt-comment-tool", { ref: ref, "target-comment-element-id": targetCommentElementId }, children));
+    return (React__default["default"].createElement("velt-comment-tool", { ref: ref, "target-comment-element-id": targetCommentElementId, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyCursor = function (props) {
@@ -316,8 +316,8 @@ var SnippylyHuddle = function (props) {
 };
 
 var SnippylyHuddleTool = function (props) {
-    var type = props.type, children = props.children;
-    return (React__default["default"].createElement("velt-huddle-tool", { type: type }, children));
+    var type = props.type, children = props.children, darkMode = props.darkMode;
+    return (React__default["default"].createElement("velt-huddle-tool", { type: type, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyPresence = function (props) {
@@ -386,13 +386,13 @@ var SnippylyRecorderPlayer = function (props) {
 };
 
 var SnippylyRecorderTool = function (props) {
-    var type = props.type, panelId = props.panelId, buttonLabel = props.buttonLabel, children = props.children;
-    return (React__default["default"].createElement("velt-recorder-tool", { type: type, "panel-id": panelId, "button-label": buttonLabel }, children));
+    var type = props.type, panelId = props.panelId, buttonLabel = props.buttonLabel, children = props.children, darkMode = props.darkMode;
+    return (React__default["default"].createElement("velt-recorder-tool", { type: type, "panel-id": panelId, "button-label": buttonLabel, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylySidebarButton = function (props) {
-    var tooltipText = props.tooltipText, children = props.children;
-    return (React__default["default"].createElement("velt-sidebar-button", { "tooltip-text": tooltipText }, children));
+    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 SnippylyTags = function (props) {
@@ -410,13 +410,13 @@ var SnippylyArrows = function () {
 };
 
 var SnippylyArrowTool = function (props) {
-    var children = props.children;
-    return (React__default["default"].createElement("velt-arrow-tool", null, children));
+    var children = props.children, darkMode = props.darkMode;
+    return (React__default["default"].createElement("velt-arrow-tool", { "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyUserInviteTool = function (props) {
-    var type = props.type, source = props.source, title = props.title, placeholder = props.placeholder, inviteUrl = props.inviteUrl, accessControlDropdown = props.accessControlDropdown, documentUserAccessList = props.documentUserAccessList, children = props.children;
-    return (React__default["default"].createElement("velt-user-invite-tool", { type: type, source: source, title: title, placeholder: placeholder, "invite-url": inviteUrl, "access-control-dropdown": [true, false].includes(accessControlDropdown) ? accessControlDropdown : undefined, "document-user-access-list": [true, false].includes(documentUserAccessList) ? documentUserAccessList : undefined }, children));
+    var type = props.type, source = props.source, title = props.title, placeholder = props.placeholder, inviteUrl = props.inviteUrl, accessControlDropdown = props.accessControlDropdown, documentUserAccessList = props.documentUserAccessList, children = props.children, darkMode = props.darkMode;
+    return (React__default["default"].createElement("velt-user-invite-tool", { type: type, source: source, title: title, placeholder: placeholder, "invite-url": inviteUrl, "access-control-dropdown": [true, false].includes(accessControlDropdown) ? accessControlDropdown : undefined, "document-user-access-list": [true, false].includes(documentUserAccessList) ? documentUserAccessList : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyUserRequestTool = function (props) {
@@ -456,7 +456,7 @@ var VeltCommentThread = function (props) {
 };
 
 var VeltNotificationsTool = function (props) {
-    var children = props.children, onNotificationClick = props.onNotificationClick;
+    var children = props.children, darkMode = props.darkMode, onNotificationClick = props.onNotificationClick;
     var ref = React.useRef();
     React.useEffect(function () {
         if (ref.current) {
@@ -468,11 +468,11 @@ var VeltNotificationsTool = function (props) {
             });
         }
     }, []);
-    return (React__default["default"].createElement("velt-notifications-tool", { ref: ref }, children));
+    return (React__default["default"].createElement("velt-notifications-tool", { ref: ref, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var VeltNotificationsPanel = function (props) {
-    var onNotificationClick = props.onNotificationClick;
+    var darkMode = props.darkMode, onNotificationClick = props.onNotificationClick;
     var ref = React.useRef();
     React.useEffect(function () {
         if (ref.current) {
@@ -484,11 +484,11 @@ var VeltNotificationsPanel = function (props) {
             });
         }
     }, []);
-    return (React__default["default"].createElement("velt-notifications-panel", { ref: ref }));
+    return (React__default["default"].createElement("velt-notifications-panel", { ref: ref, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }));
 };
 
-var VeltNotificationsHistory = function (props) {
-    var embedMode = props.embedMode, onNotificationClick = props.onNotificationClick;
+var VeltNotificationsHistoryPanel = function (props) {
+    var embedMode = props.embedMode, darkMode = props.darkMode, onNotificationClick = props.onNotificationClick;
     var ref = React.useRef();
     React.useEffect(function () {
         if (ref.current) {
@@ -500,7 +500,7 @@ var VeltNotificationsHistory = function (props) {
             });
         }
     }, []);
-    return (React__default["default"].createElement("velt-notifications-history", { ref: ref, "embed-mode": [true, false].includes(embedMode) ? (embedMode ? 'true' : 'false') : undefined }));
+    return (React__default["default"].createElement("velt-notifications-history-panel", { ref: ref, "embed-mode": [true, false].includes(embedMode) ? (embedMode ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }));
 };
 
 /**
@@ -1028,6 +1028,39 @@ 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;
+    React__default["default"].useEffect(function () {
+        if (!client || notificationElement)
+            return;
+        var loadedNotificationElement = client.getNotificationElement();
+        setNotificationElement(loadedNotificationElement);
+    }, [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];
+    React.useEffect(function () {
+        if (!(notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.getNotificationsData))
+            return;
+        var subscription = notificationElement.getNotificationsData().subscribe(function (res) {
+            setData(res);
+        });
+        return function () {
+            subscription.unsubscribe();
+        };
+    }, [notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.getNotificationsData]);
+    return data;
+}
+
 var sessionId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
 var getSessionId = function () {
     return sessionId;
@@ -1115,7 +1148,7 @@ exports.VeltCommentsSidebar = SnippylyCommentsSidebar;
 exports.VeltCursor = SnippylyCursor;
 exports.VeltHuddle = SnippylyHuddle;
 exports.VeltHuddleTool = SnippylyHuddleTool;
-exports.VeltNotificationsHistory = VeltNotificationsHistory;
+exports.VeltNotificationsHistoryPanel = VeltNotificationsHistoryPanel;
 exports.VeltNotificationsPanel = VeltNotificationsPanel;
 exports.VeltNotificationsTool = VeltNotificationsTool;
 exports.VeltPresence = SnippylyPresence;
@@ -1151,6 +1184,8 @@ exports.useLiveSelectionUtils = useLiveSelectionUtils;
 exports.useLiveState = useLiveState;
 exports.useLiveStateData = useLiveStateData;
 exports.useLiveStateSyncUtils = useLiveStateSyncUtils;
+exports.useNotificationUtils = useNotificationUtils;
+exports.useNotificationsData = useNotificationsData;
 exports.usePresenceUsers = usePresenceUsers;
 exports.usePresenceUtils = usePresenceUtils;
 exports.useRecorderAddHandler = useRecorderAddHandler;