@veltdev/react 4.5.0-beta.12 → 4.5.0-beta.14

package/cjs/index.js

@@ -99,7 +99,7 @@ function useVeltClient() {
     return React.useContext(VeltContext);
 }
 
-var loadVelt = function (callback, version, staging, develop, proxyDomain) {
+var loadVelt = function (callback, version, staging, develop, proxyDomain, integrity, integrityValue) {
     if (version === void 0) { version = 'latest'; }
     if (staging === void 0) { staging = false; }
     if (develop === void 0) { develop = false; }
@@ -126,6 +126,10 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain) {
         }
         script.id = 'veltScript';
         script.type = 'module';
+        if (integrity && integrityValue) {
+            script.integrity = integrityValue;
+            script.crossOrigin = 'anonymous';
+        }
         document.body.appendChild(script);
         script.onload = function () {
             if (callback) {
@@ -140,18 +144,40 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain) {
     }
 };
 
-var VELT_SDK_VERSION = '4.5.0-beta.12';
+var VELT_SDK_VERSION = '4.5.0-beta.14';
 var VELT_SDK_INIT_EVENT = 'onVeltInit';
 var VELT_TAB_ID = 'veltTabId';
+// integrity map for the Velt SDK
+// Note: generate integrity hashes with: https://www.srihash.org/
+var INTEGRITY_MAP = {
+    '4.5.0-beta.14': 'sha384-B3QUsHRraEePOqRV+SRKeu1n6cTJRTQtHmHj3E0l0MksnjkCtpOCJvV7xEqJkGjE',
+};
 
 var SnippylyProvider = function (props) {
     var apiKey = props.apiKey, user = props.user, config = props.config, documentId = props.documentId, language = props.language, translations = props.translations, autoTranslation = props.autoTranslation, userDataProvider = props.userDataProvider, dataProviders = props.dataProviders, onClientLoad = props.onClientLoad, children = props.children;
     var _a = React.useState(null), client = _a[0], setClient = _a[1];
     React.useEffect(function () {
         if (apiKey) {
+            var staging = config === null || config === void 0 ? void 0 : config.staging;
+            var develop = config === null || config === void 0 ? void 0 : config.develop;
+            var version = (config === null || config === void 0 ? void 0 : config.version) || VELT_SDK_VERSION;
+            var integrity = !!(config === null || config === void 0 ? void 0 : config.integrity);
+            var integrityValue = '';
+            if (integrity) {
+                if (develop || staging) {
+                    if (config === null || config === void 0 ? void 0 : config.sriv) {
+                        integrityValue = config === null || config === void 0 ? void 0 : config.sriv;
+                    }
+                }
+                else {
+                    if (INTEGRITY_MAP[version]) {
+                        integrityValue = INTEGRITY_MAP[version];
+                    }
+                }
+            }
             loadVelt(function () {
                 initVelt();
-            }, (config === null || config === void 0 ? void 0 : config.version) || VELT_SDK_VERSION, config === null || config === void 0 ? void 0 : config.staging, config === null || config === void 0 ? void 0 : config.develop, config === null || config === void 0 ? void 0 : config.proxyDomain);
+            }, version, staging, develop, config === null || config === void 0 ? void 0 : config.proxyDomain, integrity, integrityValue);
         }
     }, []);
     React.useEffect(function () {
@@ -849,7 +875,7 @@ var VeltCommentThread = function (props) {
 };
 
 var VeltNotificationsTool = function (props) {
-    var children = props.children, darkMode = props.darkMode, onNotificationClick = props.onNotificationClick, shadowDom = props.shadowDom, panelShadowDom = props.panelShadowDom, variant = props.variant, maxDays = props.maxDays, tabConfig = props.tabConfig, panelOpenMode = props.panelOpenMode, panelVariant = props.panelVariant, readNotificationsOnForYouTab = props.readNotificationsOnForYouTab;
+    var children = props.children, darkMode = props.darkMode, onNotificationClick = props.onNotificationClick, shadowDom = props.shadowDom, panelShadowDom = props.panelShadowDom, variant = props.variant, maxDays = props.maxDays, tabConfig = props.tabConfig, panelOpenMode = props.panelOpenMode, panelVariant = props.panelVariant, readNotificationsOnForYouTab = props.readNotificationsOnForYouTab, settings = props.settings;
     var ref = React.useRef();
     var onNotificationClickRef = React.useRef(onNotificationClick);
     // Update the ref to always point to the latest callback function
@@ -875,11 +901,11 @@ var VeltNotificationsTool = function (props) {
             }
         };
     }, []);
-    return (React__default["default"].createElement("velt-notifications-tool", { ref: ref, "panel-open-mode": panelOpenMode, panelVariant: panelVariant, "tab-config": JSON.stringify(tabConfig), variant: variant, "max-days": (maxDays && maxDays > 0) ? maxDays + '' : undefined, "panel-shadow-dom": [true, false].includes(panelShadowDom) ? (panelShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "read-notifications-on-for-you-tab": [true, false].includes(readNotificationsOnForYouTab) ? (readNotificationsOnForYouTab ? 'true' : 'false') : undefined }, children));
+    return (React__default["default"].createElement("velt-notifications-tool", { ref: ref, "panel-open-mode": panelOpenMode, panelVariant: panelVariant, "tab-config": JSON.stringify(tabConfig), variant: variant, "max-days": (maxDays && maxDays > 0) ? maxDays + '' : undefined, "panel-shadow-dom": [true, false].includes(panelShadowDom) ? (panelShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, settings: [true, false].includes(settings) ? (settings ? 'true' : 'false') : undefined, "read-notifications-on-for-you-tab": [true, false].includes(readNotificationsOnForYouTab) ? (readNotificationsOnForYouTab ? 'true' : 'false') : undefined }, children));
 };
 
 var VeltNotificationsPanel = function (props) {
-    var darkMode = props.darkMode, onNotificationClick = props.onNotificationClick, shadowDom = props.shadowDom, tabConfig = props.tabConfig, variant = props.variant, readNotificationsOnForYouTab = props.readNotificationsOnForYouTab, panelOpenMode = props.panelOpenMode;
+    var darkMode = props.darkMode, onNotificationClick = props.onNotificationClick, shadowDom = props.shadowDom, tabConfig = props.tabConfig, variant = props.variant, readNotificationsOnForYouTab = props.readNotificationsOnForYouTab, panelOpenMode = props.panelOpenMode, settings = props.settings;
     var ref = React.useRef();
     var onNotificationClickRef = React.useRef(onNotificationClick);
     // Update the ref to always point to the latest callback function
@@ -905,7 +931,7 @@ var VeltNotificationsPanel = function (props) {
             }
         };
     }, []);
-    return (React__default["default"].createElement("velt-notifications-panel", { ref: ref, variant: variant, "tab-config": JSON.stringify(tabConfig), "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "read-notifications-on-for-you-tab": [true, false].includes(readNotificationsOnForYouTab) ? (readNotificationsOnForYouTab ? 'true' : 'false') : undefined, "panel-open-mode": panelOpenMode }));
+    return (React__default["default"].createElement("velt-notifications-panel", { ref: ref, variant: variant, "tab-config": JSON.stringify(tabConfig), "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, settings: [true, false].includes(settings) ? (settings ? 'true' : 'false') : undefined, "read-notifications-on-for-you-tab": [true, false].includes(readNotificationsOnForYouTab) ? (readNotificationsOnForYouTab ? 'true' : 'false') : undefined, "panel-open-mode": panelOpenMode }));
 };
 
 var VeltNotificationsHistoryPanel = function (props) {
@@ -3810,6 +3836,151 @@ var VeltNotificationsPanelSkeletonWireframe = function (props) {
     return (React__default["default"].createElement("velt-notifications-panel-skeleton-wireframe", __assign({}, transformedProps), children));
 };
 
+var VeltNotificationsPanelSettingsButtonWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-button-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsDescriptionWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-description-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsBackButtonWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-back-button-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsFooterWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-footer-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsHeaderTitleWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-header-title-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsHeaderWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-header-wireframe", __assign({}, transformedProps), children));
+};
+VeltNotificationsPanelSettingsHeaderWireframe.Title = VeltNotificationsPanelSettingsHeaderTitleWireframe;
+
+var VeltNotificationsPanelSettingsAccordionTriggerSelectedValueWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-trigger-selected-value-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsAccordionTriggerLabelWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-trigger-label-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsAccordionTriggerIconWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-trigger-icon-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsAccordionTriggerWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-trigger-wireframe", __assign({}, transformedProps), children));
+};
+VeltNotificationsPanelSettingsAccordionTriggerWireframe.SelectedValue = VeltNotificationsPanelSettingsAccordionTriggerSelectedValueWireframe;
+VeltNotificationsPanelSettingsAccordionTriggerWireframe.Label = VeltNotificationsPanelSettingsAccordionTriggerLabelWireframe;
+VeltNotificationsPanelSettingsAccordionTriggerWireframe.Icon = VeltNotificationsPanelSettingsAccordionTriggerIconWireframe;
+
+var VeltNotificationsPanelSettingsAccordionContentItemLabelWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-content-item-label-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsAccordionContentItemIconWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-content-item-icon-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsAccordionContentItemWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-content-item-wireframe", __assign({}, transformedProps), children));
+};
+VeltNotificationsPanelSettingsAccordionContentItemWireframe.Icon = VeltNotificationsPanelSettingsAccordionContentItemIconWireframe;
+VeltNotificationsPanelSettingsAccordionContentItemWireframe.Label = VeltNotificationsPanelSettingsAccordionContentItemLabelWireframe;
+
+var VeltNotificationsPanelSettingsAccordionContentWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-content-wireframe", __assign({}, transformedProps), children));
+};
+VeltNotificationsPanelSettingsAccordionContentWireframe.Item = VeltNotificationsPanelSettingsAccordionContentItemWireframe;
+
+var VeltNotificationsPanelSettingsAccordionWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-wireframe", __assign({}, transformedProps), children));
+};
+VeltNotificationsPanelSettingsAccordionWireframe.Trigger = VeltNotificationsPanelSettingsAccordionTriggerWireframe;
+VeltNotificationsPanelSettingsAccordionWireframe.Content = VeltNotificationsPanelSettingsAccordionContentWireframe;
+
+var VeltNotificationsPanelSettingsListWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-list-wireframe", __assign({}, transformedProps), children));
+};
+VeltNotificationsPanelSettingsListWireframe.Accordion = VeltNotificationsPanelSettingsAccordionWireframe;
+
+var VeltNotificationsPanelSettingsMuteAllDescriptionWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-mute-all-description-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsMuteAllTitleWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-mute-all-title-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsMuteAllToggleWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-mute-all-toggle-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsTitleWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-title-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-wireframe", __assign({}, transformedProps), children));
+};
+VeltNotificationsPanelSettingsWireframe.BackButton = VeltNotificationsPanelSettingsBackButtonWireframe;
+VeltNotificationsPanelSettingsWireframe.Description = VeltNotificationsPanelSettingsDescriptionWireframe;
+VeltNotificationsPanelSettingsWireframe.Footer = VeltNotificationsPanelSettingsFooterWireframe;
+VeltNotificationsPanelSettingsWireframe.Header = VeltNotificationsPanelSettingsHeaderWireframe;
+VeltNotificationsPanelSettingsWireframe.List = VeltNotificationsPanelSettingsListWireframe;
+VeltNotificationsPanelSettingsWireframe.MuteAllDescription = VeltNotificationsPanelSettingsMuteAllDescriptionWireframe;
+VeltNotificationsPanelSettingsWireframe.MuteAllTitle = VeltNotificationsPanelSettingsMuteAllTitleWireframe;
+VeltNotificationsPanelSettingsWireframe.MuteAllToggle = VeltNotificationsPanelSettingsMuteAllToggleWireframe;
+VeltNotificationsPanelSettingsWireframe.Title = VeltNotificationsPanelSettingsTitleWireframe;
+
 var VeltNotificationsPanelWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     var transformedProps = transformWireframeProps(remainingProps);
@@ -3822,6 +3993,8 @@ VeltNotificationsPanelWireframe.Title = VeltNotificationsPanelTitleWireframe;
 VeltNotificationsPanelWireframe.ViewAllButton = VeltNotificationsPanelViewAllButtonWireframe;
 VeltNotificationsPanelWireframe.CloseButton = VeltNotificationsPanelCloseButtonWireframe;
 VeltNotificationsPanelWireframe.Skeleton = VeltNotificationsPanelSkeletonWireframe;
+VeltNotificationsPanelWireframe.SettingsButton = VeltNotificationsPanelSettingsButtonWireframe;
+VeltNotificationsPanelWireframe.Settings = VeltNotificationsPanelSettingsWireframe;
 
 var VeltNotificationsToolIconWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
@@ -6545,6 +6718,9 @@ function usePresenceUtils() {
     }, [client, setPresenceElement, presenceElement]);
     return presenceElement;
 }
+/**
+ * @deprecated Use `usePresenceData` hook instead.
+ */
 function usePresenceUsers() {
     var presenceElement = usePresenceUtils();
     var _a = React__default["default"].useState(null), data = _a[0], setData = _a[1];
@@ -6904,6 +7080,33 @@ function useUnreadNotificationsCount() {
     return data;
 }
 
+function useNotificationEventCallback(action) {
+    var notificationElement = useNotificationUtils();
+    var _a = React.useState(null), data = _a[0], setData = _a[1];
+    var subscriptionRef = React.useRef(null);
+    var memoizedAction = React.useMemo(function () { return action; }, [action]);
+    React.useEffect(function () {
+        var _a;
+        if (!(notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.on))
+            return;
+        if (subscriptionRef.current) {
+            subscriptionRef.current.unsubscribe();
+        }
+        var subscription = (_a = notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.on(memoizedAction)) === null || _a === void 0 ? void 0 : _a.subscribe(function (data) {
+            setData(data);
+        });
+        // Store the new subscription
+        subscriptionRef.current = subscription;
+        // Cleanup function
+        return function () {
+            if (subscriptionRef.current) {
+                subscriptionRef.current.unsubscribe();
+            }
+        };
+    }, [notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.on, memoizedAction]);
+    return data;
+}
+
 function useAutocompleteUtils() {
     var _a = React__default["default"].useState(), autocompleteElement = _a[0], setAutocompleteElement = _a[1];
     var client = useVeltClient().client;
@@ -7262,6 +7465,7 @@ exports.useLiveState = useLiveState;
 exports.useLiveStateData = useLiveStateData;
 exports.useLiveStateSyncEventCallback = useLiveStateSyncEventCallback;
 exports.useLiveStateSyncUtils = useLiveStateSyncUtils;
+exports.useNotificationEventCallback = useNotificationEventCallback;
 exports.useNotificationUtils = useNotificationUtils;
 exports.useNotificationsData = useNotificationsData;
 exports.usePresenceData = usePresenceData;