@fileverse-dev/fortune-react 1.0.2-mod-56 → 1.0.2-mod-57

package/dist/components/Toolbar/index.d.ts

@@ -1,8 +1,10 @@
 import React from "react";
 import "./index.css";
-export declare const getIcon: (title: string) => "AlignLeft" | "AlignCenter" | "AlignRight" | "ArrowUpFromLine" | "AlignVerticalMiddle" | "ArrowDownToLine" | "TextOverflow" | "WrapText" | "TextClip" | "";
+export declare const getLucideIcon: (title: string) => "Undo" | "Redo" | "Bold" | "Italic" | "Strikethrough" | "Underline" | "AlignLeft" | "AlignCenter" | "AlignRight" | "ArrowUpFromLine" | "AlignVerticalMiddle" | "ArrowDownToLine" | "TextOverflow" | "WrapText" | "TextClip" | "Baseline" | "PaintBucket" | "Border" | "MergeHorizontal" | "JapaneseYen" | "Percent" | "DecimalsArrowLeft" | "DecimalsArrowRight" | "PaintbrushVertical" | "Filter" | "Link" | "MessageSquarePlus" | "Image" | "Sigma" | "ShieldCheck" | "Search" | "DuneChart" | "Ellipsis" | "";
 declare const Toolbar: React.FC<{
     setMoreItems: React.Dispatch<React.SetStateAction<React.ReactNode>>;
     moreItemsOpen: boolean;
+    onMoreToolbarItemsClose?: () => void;
+    moreToolbarItems?: React.ReactNode;
 }>;
 export default Toolbar;

package/dist/index.css

@@ -2250,11 +2250,12 @@ input[type="number"].condition-rules-project-input {
   flex-direction: row;
   /* background: #fafafc; */
   position: relative;
-  padding: 10px 0px 8px 15px;
+  padding: 4px 8px;
   border-bottom: 1px solid #d4d4d4;
   white-space: nowrap;
   align-items: center;
   gap: 4px;
+  justify-content: space-between;
 }
 
 .fortune-toolbar-divider {
@@ -2313,8 +2314,11 @@ input[type="number"].condition-rules-project-input {
   align-items: center;
 }
 
-.fortune-toolbar-button:hover,
-.fortune-toolbar-combo:hover {
+.fortune-toolbar-combo-button.show-arrow {
+  border-radius: 4px 0px 0px 4px;
+}
+
+.fortune-toolbar-button:hover {
   background-color: #f2f4f5;
   cursor: pointer;
 }
@@ -2322,6 +2326,8 @@ input[type="number"].condition-rules-project-input {
 .fortune-toolbar-combo-arrow:hover {
   background-color: #f2f4f5;
   cursor: pointer;
+  height: 30px;
+  border-radius: 0px 4px 4px 0px;
 }
 
 .fortune-toolbar-button:active,
@@ -2452,8 +2458,8 @@ input[type="number"].condition-rules-project-input {
   flex-direction: row;
   align-items: center;
   align-self: flex-end;
-  margin-right: 40px;
   top: 40px;
+  right: 0px;
   max-width: 348px;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
   background: white;
@@ -2641,6 +2647,7 @@ input[type="number"].condition-rules-project-input {
   flex-direction: row;
   align-items: center;
   gap: 4px;
+  position: relative;
 }
 
 .fortune-toolbar-right {

package/dist/index.esm.css

@@ -2250,11 +2250,12 @@ input[type="number"].condition-rules-project-input {
   flex-direction: row;
   /* background: #fafafc; */
   position: relative;
-  padding: 10px 0px 8px 15px;
+  padding: 4px 8px;
   border-bottom: 1px solid #d4d4d4;
   white-space: nowrap;
   align-items: center;
   gap: 4px;
+  justify-content: space-between;
 }
 
 .fortune-toolbar-divider {
@@ -2313,8 +2314,11 @@ input[type="number"].condition-rules-project-input {
   align-items: center;
 }
 
-.fortune-toolbar-button:hover,
-.fortune-toolbar-combo:hover {
+.fortune-toolbar-combo-button.show-arrow {
+  border-radius: 4px 0px 0px 4px;
+}
+
+.fortune-toolbar-button:hover {
   background-color: #f2f4f5;
   cursor: pointer;
 }
@@ -2322,6 +2326,8 @@ input[type="number"].condition-rules-project-input {
 .fortune-toolbar-combo-arrow:hover {
   background-color: #f2f4f5;
   cursor: pointer;
+  height: 30px;
+  border-radius: 0px 4px 4px 0px;
 }
 
 .fortune-toolbar-button:active,
@@ -2452,8 +2458,8 @@ input[type="number"].condition-rules-project-input {
   flex-direction: row;
   align-items: center;
   align-self: flex-end;
-  margin-right: 40px;
   top: 40px;
+  right: 0px;
   max-width: 348px;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
   background: white;
@@ -2641,6 +2647,7 @@ input[type="number"].condition-rules-project-input {
   flex-direction: row;
   align-items: center;
   gap: 4px;
+  position: relative;
 }
 
 .fortune-toolbar-right {

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fix
 import React, { useContext, useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import produce, { applyPatches, enablePatches, produceWithPatches } from 'immer';
 import _ from 'lodash';
-import { LucideIcon, TextField, Button as Button$1, cn, IconButton, Checkbox, Divider as Divider$2, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectItem as SelectItem$1, RadioGroup, RadioGroupItem, Label } from '@fileverse/ui';
+import { LucideIcon, TextField, Button as Button$1, cn, IconButton, Checkbox, Divider as Divider$2, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectItem as SelectItem$1, Tooltip, RadioGroup, RadioGroupItem, Label } from '@fileverse/ui';
 import regeneratorRuntime from 'regenerator-runtime';
 import Tippy from '@tippyjs/react';
 
@@ -4443,26 +4443,25 @@ var Button = function Button(_ref) {
     selected = _ref.selected,
     children = _ref.children,
     style = _ref.style;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "fortune-toolbar-button fortune-toolbar-item",
     onClick: onClick,
     tabIndex: 0,
-    "data-tips": tooltip,
     role: "button",
-    "aria-label": tooltip,
     style: selected ? {
       backgroundColor: "#E7E5EB"
     } : style
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: iconId,
+  }, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: getLucideIcon(iconId),
     width: 16,
     height: 16,
     style: disabled ? {
       opacity: 0.3
     } : {}
-  }), tooltip && /*#__PURE__*/React.createElement("div", {
-    className: "fortune-tooltip"
-  }, tooltip), children);
+  }), children));
 };
 
 var Divider = function Divider() {
@@ -4500,7 +4499,7 @@ var Combo = function Combo(_ref) {
   var popupRef = useRef(null);
   var buttonRef = useRef(null);
   var isLucideIcon = useMemo(function () {
-    return (iconId === null || iconId === void 0 ? void 0 : iconId.startsWith("align-")) || ["text-overflow", "text-wrap", "text-clip"].includes(iconId);
+    return (iconId === null || iconId === void 0 ? void 0 : iconId.startsWith("align-")) || ["text-overflow", "text-wrap", "text-clip", "font-color", "background", "border-all", "merge-all", "format", "conditionFormat", "filter", "comment", "image", "formula-sum", "dune", "template"].includes(iconId);
   }, [iconId]);
   useOutsideClick(popupRef, function () {
     setOpen(false);
@@ -4529,7 +4528,10 @@ var Combo = function Combo(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     ref: buttonRef,
     className: "fortune-toolbar-combo"
-  }, !isLucideIcon ? (/*#__PURE__*/React.createElement("div", {
+  }, !isLucideIcon ? (/*#__PURE__*/React.createElement(Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "fortune-toolbar-combo-button",
     onClick: function onClick(e) {
       if (_onClick) {
@@ -4540,9 +4542,7 @@ var Combo = function Combo(_ref) {
       }
     },
     tabIndex: 0,
-    "data-tips": tooltip,
     role: "button",
-    "aria-label": "".concat(tooltip, ": ").concat(text !== undefined ? text : ""),
     style: style
   }, iconId ? (/*#__PURE__*/React.createElement(SVGIcon, {
     name: iconId,
@@ -4550,29 +4550,29 @@ var Combo = function Combo(_ref) {
     height: 16
   })) : (/*#__PURE__*/React.createElement("span", {
     className: "fortune-toolbar-combo-text"
-  }, text !== undefined ? text : "")))) : (/*#__PURE__*/React.createElement(IconButton, {
-    icon: getIcon(iconId),
+  }, text !== undefined ? text : ""))))) : (/*#__PURE__*/React.createElement(Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: getLucideIcon(iconId),
     variant: "ghost",
     onClick: function onClick() {
       return setOpen(!open);
-    }
-  })), showArrow && (/*#__PURE__*/React.createElement("div", {
+    },
+    className: showArrow ? "fortune-toolbar-combo-button show-arrow" : ""
+  }))), showArrow && (/*#__PURE__*/React.createElement("div", {
     className: "fortune-toolbar-combo-arrow",
     onClick: function onClick() {
       return setOpen(!open);
     },
     tabIndex: 0,
-    "data-tips": tooltip,
     role: "button",
-    "aria-label": tooltip,
     style: style
   }, /*#__PURE__*/React.createElement(LucideIcon, {
     name: "ChevronDown",
     width: 14,
     height: 14
-  }))), tooltip && /*#__PURE__*/React.createElement("div", {
-    className: "fortune-tooltip"
-  }, tooltip)), open && (/*#__PURE__*/React.createElement("div", {
+  })))), open && (/*#__PURE__*/React.createElement("div", {
     ref: popupRef,
     className: "fortune-toolbar-combo-popup",
     style: popupPosition
@@ -5256,11 +5256,13 @@ var CustomButton = function CustomButton(_ref) {
     children = _ref.children,
     iconName = _ref.iconName,
     icon = _ref.icon;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "fortune-toolbar-button fortune-toolbar-item",
     onClick: onClick,
     tabIndex: 0,
-    "data-tips": tooltip,
     role: "button",
     style: selected ? {
       backgroundColor: "#E7E5EB"
@@ -5270,9 +5272,7 @@ var CustomButton = function CustomButton(_ref) {
     height: 16,
     iconName: iconName,
     content: icon
-  }), tooltip && /*#__PURE__*/React.createElement("div", {
-    className: "fortune-tooltip"
-  }, tooltip), children);
+  }), children));
 };
 
 var palette = [["#000000", "#444444", "#666666", "#999999", "#B7B7B7", "#cccccc", "#D9D9D9", "#EFEFEF", "#f3f3f3", "#ffffff"], ["#970007", "#FE0012", "#FE9728", "#FFFD40", "#27FD3C", "#21FFFF", "#4A89E4", "#0027F9", "#9726FA", "#FD23FA"], ["#E6B8B0", "#f4cccc", "#FCE5CF", "#FFF1CF", "#DAEAD4", "#D0E0E3", "#C9DBF7", "#CFE3F2", "#D9D3E8", "#EAD1DC"], ["#DC7D6D", "#E9999A", "#F9CAA0", "#FFE49F", "#B7D6AB", "#A3C4C9", "#A4C3F2", "#A0C6E6", "#B4A8D4", "#D5A7BC"], ["#CB402B", "#DF6668", "#F6B171", "#FFD871", "#95C382", "#77A6AF", "#6DA0E8", "#70AADA", "#8E7EC0", "#C17C9F"], ["#A51A0A", "#CB000C", "#E59043", "#F1C046", "#6CA756", "#46828D", "#3C7BD4", "#3E87C3", "#6651A4", "#A54E78"], ["#841F11", "#980007", "#B35E19", "#BF8F22", "#3A7527", "#15505B", "#0E5AC8", "#0B5592", "#0B5592", "#731C46"], ["#5B0E03", "#660003", "#783E0E", "#7F5F13", "#284E19", "#0D343D", "#1C4785", "#073961", "#1F154B", "#4C112F"]];
@@ -5538,8 +5538,33 @@ var DuneChartsInputModal = function DuneChartsInputModal(_ref) {
   }, submitText)))));
 };
 
-var getIcon = function getIcon(title) {
+var MoreItemsContaier = function MoreItemsContaier(_ref) {
+  var onClose = _ref.onClose,
+    children = _ref.children;
+  var containerRef = useRef(null);
+  useOutsideClick(containerRef, function () {
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [containerRef, onClose]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: "fortune-toolbar-more-container"
+  }, children);
+};
+
+var getLucideIcon = function getLucideIcon(title) {
   switch (title) {
+    case "undo":
+      return "Undo";
+    case "redo":
+      return "Redo";
+    case "bold":
+      return "Bold";
+    case "italic":
+      return "Italic";
+    case "strike-through":
+      return "Strikethrough";
+    case "underline":
+      return "Underline";
     case "align-left":
       return "AlignLeft";
     case "align-center":
@@ -5558,6 +5583,44 @@ var getIcon = function getIcon(title) {
       return "WrapText";
     case "text-clip":
       return "TextClip";
+    case "font-color":
+      return "Baseline";
+    case "background":
+      return "PaintBucket";
+    case "border-all":
+      return "Border";
+    case "merge-all":
+      return "MergeHorizontal";
+    case "format":
+      return "JapaneseYen";
+    case "currency-format":
+      return "JapaneseYen";
+    case "percentage-format":
+      return "Percent";
+    case "number-decrease":
+      return "DecimalsArrowLeft";
+    case "number-increase":
+      return "DecimalsArrowRight";
+    case "conditionFormat":
+      return "PaintbrushVertical";
+    case "filter":
+      return "Filter";
+    case "link":
+      return "Link";
+    case "comment":
+      return "MessageSquarePlus";
+    case "image":
+      return "Image";
+    case "formula-sum":
+      return "Sigma";
+    case "dataVerification":
+      return "ShieldCheck";
+    case "search":
+      return "Search";
+    case "dune":
+      return "DuneChart";
+    case "Ellipsis":
+      return "Ellipsis";
     default:
       return "";
   }
@@ -5565,7 +5628,9 @@ var getIcon = function getIcon(title) {
 var Toolbar = function Toolbar(_ref) {
   var _context$luckysheet_s, _flowdata$row, _settings$customToolb;
   var setMoreItems = _ref.setMoreItems,
-    moreItemsOpen = _ref.moreItemsOpen;
+    moreItemsOpen = _ref.moreItemsOpen,
+    onMoreToolbarItemsClose = _ref.onMoreToolbarItemsClose,
+    moreToolbarItems = _ref.moreToolbarItems;
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext,
@@ -5938,7 +6003,7 @@ var Toolbar = function Toolbar(_ref) {
             isActive: ((_$find2 = _.find(items, function (item) {
               return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.ht);
             })) === null || _$find2 === void 0 ? void 0 : _$find2.title) === title,
-            icon: getIcon(title),
+            icon: getLucideIcon(title),
             variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
@@ -5991,7 +6056,7 @@ var Toolbar = function Toolbar(_ref) {
             isActive: ((_$find4 = _.find(_items, function (item) {
               return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.vt);
             })) === null || _$find4 === void 0 ? void 0 : _$find4.title) === title,
-            icon: getIcon(title),
+            icon: getLucideIcon(title),
             variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
@@ -6583,7 +6648,7 @@ var Toolbar = function Toolbar(_ref) {
           return /*#__PURE__*/React.createElement(IconButton, {
             key: value,
             isActive: _curr.value === value,
-            icon: getIcon(iconId),
+            icon: getLucideIcon(iconId),
             variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
@@ -6735,7 +6800,10 @@ var Toolbar = function Toolbar(_ref) {
         }));
       });
     }
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      text: tooltip,
+      placement: "bottom"
+    }, /*#__PURE__*/React.createElement(Button, {
       iconId: name,
       tooltip: tooltip,
       key: name,
@@ -6746,7 +6814,7 @@ var Toolbar = function Toolbar(_ref) {
           (_toolbarItemClickHand = toolbarItemClickHandler(name)) === null || _toolbarItemClickHand === void 0 ? void 0 : _toolbarItemClickHand(draftCtx, refs.cellInput.current, refs.globalCache);
         });
       }
-    });
+    }));
   }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFormat, align, handleUndo, handleRedo, flowdata, formula, showDuneModal, merge, border, freezen, screenshot, sort, textWrap, rotation, filter, splitText, findAndReplace, context.luckysheet_select_save, context.defaultFontSize, context.allowEdit, comment, fontarray, hideSubMenu, showSubMenu, refs.canvas, customColor, customStyle, toolbarFormat.moreCurrency]);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
@@ -6769,7 +6837,7 @@ var Toolbar = function Toolbar(_ref) {
   })) : null, (toolbarWrapIndex === -1 ? settings.toolbarItems : settings.toolbarItems.slice(0, toolbarWrapIndex + 1)).map(function (name, i) {
     return getToolbarItem(name, i);
   }), toolbarWrapIndex !== -1 && toolbarWrapIndex < settings.toolbarItems.length - 1 ? (/*#__PURE__*/React.createElement(Button, {
-    iconId: "more",
+    iconId: "Ellipsis",
     tooltip: toolbar.toolMore,
     onClick: function onClick() {
       if (moreItemsOpen) {
@@ -6780,7 +6848,9 @@ var Toolbar = function Toolbar(_ref) {
         }));
       }
     }
-  })) : null), /*#__PURE__*/React.createElement("div", {
+  })) : null, moreToolbarItems && (/*#__PURE__*/React.createElement(MoreItemsContaier, {
+    onClose: onMoreToolbarItemsClose
+  }, moreToolbarItems))), /*#__PURE__*/React.createElement("div", {
     className: "fortune-toolbar-right"
   }, settings.customToolbarItems.filter(function (n) {
     return n.key === "templates";
@@ -6803,7 +6873,7 @@ var Toolbar = function Toolbar(_ref) {
       iconName: n.iconName
     }, n.children);
   }), /*#__PURE__*/React.createElement(Button, {
-    iconId: "dune-logo",
+    iconId: "dune",
     tooltip: "Insert Dune Chart",
     key: "dune-charts",
     onClick: function onClick() {
@@ -7519,11 +7589,11 @@ var ResetColumnWidth = function ResetColumnWidth() {
     if (data) {
       for (var i = 0; i < data.length; i += 1) {
         var cellD = data[i][col];
-        if (typeof cellD === 'string') {
+        if (typeof cellD === "string") {
           if (cellD.length * 7 > maxWidth) {
             maxWidth = cellD.length * 7;
           }
-        } else if (_typeof(cellD) === 'object' && cellD !== null) {
+        } else if (_typeof(cellD) === "object" && cellD !== null) {
           console.log(cellD, "cellD");
           var cellText = cellD.v || cellD.m;
           if (cellText.length * 7 > maxWidth) {
@@ -8333,21 +8403,16 @@ var ContextMenu = function ContextMenu() {
       }), "px")))) : null;
     }
     if (name === "set-column-width") {
-      var _context$luckysheet_s0, _context$luckysheet_s1;
-      var colWidth = (selection === null || selection === void 0 ? void 0 : selection.width) || context.defaultcollen;
-      var shownColWidth = ((_context$luckysheet_s0 = context.luckysheet_select_save) === null || _context$luckysheet_s0 === void 0 ? void 0 : _context$luckysheet_s0.some(function (section) {
-        return section.width_move !== (colWidth + 1) * (section.column[1] - section.column[0] + 1) - 1;
-      })) ? "" : colWidth;
-      return ((_context$luckysheet_s1 = context.luckysheet_select_save) === null || _context$luckysheet_s1 === void 0 ? void 0 : _context$luckysheet_s1.some(function (section) {
+      var _context$luckysheet_s0;
+      return ((_context$luckysheet_s0 = context.luckysheet_select_save) === null || _context$luckysheet_s0 === void 0 ? void 0 : _context$luckysheet_s0.some(function (section) {
         return section.column_select;
       })) ? (/*#__PURE__*/React.createElement(Menu, {
         key: "set-column-width",
-        onClick: function onClick(e, container) {
+        onClick: function onClick() {
           showDialog(/*#__PURE__*/React.createElement(ResetColumnWidth, null), undefined, "Resize column");
           setContext(function (draftCtx) {
             draftCtx.contextMenu = {};
           });
-          return;
         }
       }, /*#__PURE__*/React.createElement("div", {
         className: "context-item"
@@ -10894,19 +10959,6 @@ var SheetTabContextMenu = function SheetTabContextMenu() {
   }));
 };
 
-var MoreItemsContaier = function MoreItemsContaier(_ref) {
-  var onClose = _ref.onClose,
-    children = _ref.children;
-  var containerRef = useRef(null);
-  useOutsideClick(containerRef, function () {
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [containerRef, onClose]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: containerRef,
-    className: "fortune-toolbar-more-container"
-  }, children);
-};
-
 function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cellInput, scrollbarX, scrollbarY, globalCache) {
   return {
     applyOp: function applyOp(ops) {
@@ -12521,12 +12573,12 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "fortune-workarea"
   }, mergedSettings.showToolbar && (/*#__PURE__*/React.createElement(Toolbar, {
     moreItemsOpen: moreToolbarItems !== null,
-    setMoreItems: setMoreToolbarItems
+    setMoreItems: setMoreToolbarItems,
+    onMoreToolbarItemsClose: onMoreToolbarItemsClose,
+    moreToolbarItems: moreToolbarItems
   })), mergedSettings.showFormulaBar && /*#__PURE__*/React.createElement(FxEditor, null)), /*#__PURE__*/React.createElement(Sheet, {
     sheet: sheet
-  }), mergedSettings.showSheetTabs && /*#__PURE__*/React.createElement(SheetTab, null), /*#__PURE__*/React.createElement(ContextMenu, null), /*#__PURE__*/React.createElement(FilterMenu, null), /*#__PURE__*/React.createElement(SheetTabContextMenu, null), context.showSheetList && /*#__PURE__*/React.createElement(SheetList, null), moreToolbarItems && (/*#__PURE__*/React.createElement(MoreItemsContaier, {
-    onClose: onMoreToolbarItemsClose
-  }, moreToolbarItems)), !_.isEmpty(context.contextMenu) && (/*#__PURE__*/React.createElement("div", {
+  }), mergedSettings.showSheetTabs && /*#__PURE__*/React.createElement(SheetTab, null), /*#__PURE__*/React.createElement(ContextMenu, null), /*#__PURE__*/React.createElement(FilterMenu, null), /*#__PURE__*/React.createElement(SheetTabContextMenu, null), context.showSheetList && /*#__PURE__*/React.createElement(SheetList, null), !_.isEmpty(context.contextMenu) && (/*#__PURE__*/React.createElement("div", {
     onMouseDown: function onMouseDown() {
       setContextWithProduce(function (draftCtx) {
         draftCtx.contextMenu = {};