@veltdev/react 1.0.95 → 1.0.97

package/cjs/index.js

@@ -109,7 +109,7 @@ var loadVelt = function (callback, version, staging, develop) {
     }
 };
 
-var VELT_SDK_VERSION = '1.0.110';
+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 VeltNotificationsHistoryPanel = function (props) {
-    var embedMode = props.embedMode, onNotificationClick = props.onNotificationClick;
+    var embedMode = props.embedMode, darkMode = props.darkMode, onNotificationClick = props.onNotificationClick;
     var ref = React.useRef();
     React.useEffect(function () {
         if (ref.current) {
@@ -500,7 +500,74 @@ var VeltNotificationsHistoryPanel = function (props) {
             });
         }
     }, []);
-    return (React__default["default"].createElement("velt-notifications-history-panel", { 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 }));
+};
+
+var VeltNivoChartComments = function (_a) {
+    var _b, _c, _d;
+    var props = _a.props;
+    var polarToCartesian = function (centerX, centerY, radius, angleInRadians) {
+        return {
+            x: centerX + radius * Math.cos(angleInRadians - Math.PI / 2),
+            y: centerY + radius * Math.sin(angleInRadians - Math.PI / 2)
+        };
+    };
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("foreignObject", null,
+            React__default["default"].createElement("style", null, "\n                        .nivo-chart-comment-point {\n                            opacity: 0 !important;\n                            visibility: hidden !important;\n                          }\n                          \n                          .nivo-chart-comment-tool {\n                            opacity: 0;\n                          }\n                          \n                          .nivo-chart-comment-tool:hover {\n                            opacity: 1;\n                            visibility: visible;\n                            transition: 0.3s;\n                          }\n                          \n                          .nivo-chart-comment-container {\n                            position: relative;\n                            display: flex;\n                            flex-direction: column;\n                            align-items: center;\n                            /* justify-content: center; */\n                            width: 100%;\n                            height: 100%;\n                          }\n                          \n                          .nivo-chart-comment-container velt-comment-tool {\n                            display: flex;\n                            cursor: pointer;\n                          }\n                          \n                          .nivo-chart-container snippyly-comment-pin-portal {\n                              /* hide it */\n                              display: none;\n                          }\n                    ")),
+        ((_b = props === null || props === void 0 ? void 0 : props.points) === null || _b === void 0 ? void 0 : _b.length) && props.points.map(function (point, index) {
+            var _a, _b;
+            var targetCommentElementId = "".concat((_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.x, "-").concat((_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.y);
+            return (React__default["default"].createElement("g", { transform: "translate(".concat(point.x, ", ").concat(point.y, ")"), key: point.id },
+                React__default["default"].createElement("foreignObject", { x: -20, y: -40, width: "40", height: "40" },
+                    React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
+                        React__default["default"].createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
+                        React__default["default"].createElement("div", { className: 'nivo-chart-comment-tool' },
+                            React__default["default"].createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
+                                React__default["default"].createElement("div", { slot: 'button' },
+                                    React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: '#625DF5', className: "bi bi-chat", viewBox: "0 0 16 16" },
+                                        React__default["default"].createElement("path", { d: "M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105" }))))),
+                        React__default["default"].createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
+                            React__default["default"].createElement("div", { slot: 'content' },
+                                React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: point.serieColor, className: "bi bi-chat-fill", viewBox: "0 0 16 16" },
+                                    React__default["default"].createElement("path", { d: "M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15" }))))))));
+        }),
+        ((_c = props === null || props === void 0 ? void 0 : props.bars) === null || _c === void 0 ? void 0 : _c.length) && props.bars.map(function (point, index) {
+            var _a, _b;
+            var targetCommentElementId = "".concat(point === null || point === void 0 ? void 0 : point.key, "-").concat((_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.value);
+            return (React__default["default"].createElement("g", { transform: "translate(".concat(point.x + point.width, ", ").concat(point.y, ")"), key: point.key },
+                React__default["default"].createElement("foreignObject", { x: 0, y: -8, width: "24", height: "24" },
+                    React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
+                        React__default["default"].createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
+                        React__default["default"].createElement("div", { className: 'nivo-chart-comment-tool' },
+                            React__default["default"].createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
+                                React__default["default"].createElement("div", { slot: 'button' },
+                                    React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: '#625DF5', className: "bi bi-chat", viewBox: "0 0 16 16" },
+                                        React__default["default"].createElement("path", { d: "M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105" }))))),
+                        React__default["default"].createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
+                            React__default["default"].createElement("div", { slot: 'content' },
+                                React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: ((_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.fill) || point.color, className: "bi bi-chat-fill", viewBox: "0 0 16 16" },
+                                    React__default["default"].createElement("path", { d: "M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15" }))))))));
+        }),
+        ((_d = props === null || props === void 0 ? void 0 : props.dataWithArc) === null || _d === void 0 ? void 0 : _d.length) && props.dataWithArc.map(function (arcData, index) {
+            var midAngle = (arcData.arc.startAngle + arcData.arc.endAngle) / 2;
+            var radiusOffset = 20; // Extend beyond the outer radius for visibility
+            var position = polarToCartesian(props.centerX, props.centerY, arcData.arc.outerRadius + radiusOffset, midAngle);
+            var targetCommentElementId = "".concat(arcData === null || arcData === void 0 ? void 0 : arcData.id, "-").concat(arcData === null || arcData === void 0 ? void 0 : arcData.value);
+            return (React__default["default"].createElement("g", { transform: "translate(".concat(position.x, ", ").concat(position.y, ")"), key: arcData.id },
+                React__default["default"].createElement("foreignObject", { width: "100", height: "50", x: "-50", y: "-25", style: { overflow: 'visible' } },
+                    React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
+                        React__default["default"].createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
+                        React__default["default"].createElement("div", { className: 'nivo-chart-comment-tool' },
+                            React__default["default"].createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
+                                React__default["default"].createElement("div", { slot: 'button' },
+                                    React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: '#625DF5', className: "bi bi-chat", viewBox: "0 0 16 16" },
+                                        React__default["default"].createElement("path", { d: "M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105" }))))),
+                        React__default["default"].createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
+                            React__default["default"].createElement("div", { slot: 'content' },
+                                React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: (arcData === null || arcData === void 0 ? void 0 : arcData.fill) || arcData.color, className: "bi bi-chat-fill", viewBox: "0 0 16 16" },
+                                    React__default["default"].createElement("path", { d: "M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15" }))))))));
+        })));
 };
 
 /**
@@ -1148,6 +1215,7 @@ exports.VeltCommentsSidebar = SnippylyCommentsSidebar;
 exports.VeltCursor = SnippylyCursor;
 exports.VeltHuddle = SnippylyHuddle;
 exports.VeltHuddleTool = SnippylyHuddleTool;
+exports.VeltNivoChartComments = VeltNivoChartComments;
 exports.VeltNotificationsHistoryPanel = VeltNotificationsHistoryPanel;
 exports.VeltNotificationsPanel = VeltNotificationsPanel;
 exports.VeltNotificationsTool = VeltNotificationsTool;