@fileverse-dev/fortune-react 1.1.99 → 1.2.0-patch-1

package/es/components/SheetOverlay/RowHeader.js

@@ -1,4 +1,5 @@
-import { rowLocation, rowLocationByIndex, selectTitlesMap, selectTitlesRange, handleContextMenu, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, fixRowStyleOverflowInFreeze, handleRowFreezeHandleMouseDown, getSheetIndex, fixPositionOnFrozenCells } from "@fileverse-dev/fortune-core";
+import { rowLocation, rowLocationByIndex, selectTitlesMap, selectTitlesRange, handleContextMenu, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, fixRowStyleOverflowInFreeze, handleRowFreezeHandleMouseDown, getSheetIndex, showSelected, fixPositionOnFrozenCells } from "@fileverse-dev/fortune-core";
+import { api } from "@fileverse-dev/fortune-core";
 import _ from "lodash";
 import React, { useContext, useState, useRef, useCallback, useEffect, useMemo } from "react";
 import WorkbookContext from "../../context";
@@ -67,7 +68,13 @@ var RowHeader = function RowHeader() {
     getRowIndexClicked = _f.getRowIndexClicked,
     isRowDoubleClicked = _f.isRowDoubleClicked;
   var onMouseDown = useCallback(function (e) {
-    if (e.button !== 0) return;
+    if (e.button === 0 && e.target.tagName === "use" || e.button === 2) {
+      var nativeEvent_1 = e.nativeEvent;
+      setContext(function (draft) {
+        handleRowHeaderMouseDown(draft, refs.globalCache, nativeEvent_1, containerRef.current, refs.cellInput.current, refs.fxInput.current);
+      });
+    }
+    if (e.button !== 0 || context.isFlvReadOnly) return;
     var targetEl = e.target;
     if (targetEl.closest(".fortune-rows-change-size") || targetEl.closest(".fortune-rows-freeze-handle")) return;
     var headerEl = containerRef.current;
@@ -79,9 +86,9 @@ var RowHeader = function RowHeader() {
         draft.luckysheet_scroll_status = true;
       });
     } else {
-      var nativeEvent_1 = e.nativeEvent;
+      var nativeEvent_2 = e.nativeEvent;
       setContext(function (draft) {
-        handleRowHeaderMouseDown(draft, refs.globalCache, nativeEvent_1, containerRef.current, refs.cellInput.current, refs.fxInput.current);
+        handleRowHeaderMouseDown(draft, refs.globalCache, nativeEvent_2, containerRef.current, refs.cellInput.current, refs.fxInput.current);
       });
       return;
     }
@@ -147,6 +154,43 @@ var RowHeader = function RowHeader() {
     }
     setSelectedLocation(selects);
   }, [context.luckysheet_select_save, context.visibledatarow]);
+  var _g = useState([]),
+    hiddenPointers = _g[0],
+    setHiddenPointers = _g[1];
+  useEffect(function () {
+    var _a, _b;
+    if (sheetIndex == null) return;
+    var tempPointers = [];
+    var rowhidden = (_b = (_a = context.luckysheetfile[sheetIndex]) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.rowhidden;
+    if (rowhidden) {
+      Object.keys(rowhidden).forEach(function (key) {
+        var item = {
+          row: key,
+          top: context.visibledatarow[Number(key) - 1]
+        };
+        tempPointers.push(item);
+      });
+      setHiddenPointers(tempPointers);
+    } else {
+      setHiddenPointers([]);
+    }
+  }, [context.visibledatarow, sheetIndex]);
+  var showRow = function showRow(e, item) {
+    if (context.isFlvReadOnly) return;
+    e.stopPropagation();
+    setContext(function (ctx) {
+      var _a;
+      api.setSelection(ctx, [{
+        row: [Number(item.row) - 1, Number(item.row) + 1],
+        column: [0, (_a = context.visibledatacolumn) === null || _a === void 0 ? void 0 : _a.length]
+      }], {
+        id: context.currentSheetId
+      });
+    });
+    setContext(function (ctx) {
+      showSelected(ctx, "row");
+    });
+  };
   useEffect(function () {
     containerRef.current.scrollTop = context.scrollTop;
   }, [context.scrollTop]);
@@ -161,7 +205,40 @@ var RowHeader = function RowHeader() {
     onMouseDown: onMouseDown,
     onMouseLeave: onMouseLeave,
     onContextMenu: onContextMenu
-  }, /*#__PURE__*/React.createElement("div", {
+  }, hiddenPointers.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-col gap-4 cursor-pointer align-center hide-btn-row hide-btn",
+      style: {
+        top: "".concat(item.top - 16, "px"),
+        zIndex: 100
+      },
+      onClick: function onClick(e) {
+        return showRow(e, item);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "rotate-row-icon"
+    }, /*#__PURE__*/React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "5",
+      height: "8",
+      viewBox: "0 0 5 8",
+      fill: "none"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M0.164574 4.20629L3.54376 7.58548C3.7275 7.76922 4.04167 7.63909 4.04167 7.37924L4.04167 0.620865C4.04167 0.361018 3.7275 0.230885 3.54376 0.414625L0.164575 3.79381C0.0506717 3.90772 0.0506715 4.09239 0.164574 4.20629Z",
+      fill: "#363B3F"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "rotate-90"
+    }, /*#__PURE__*/React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "5",
+      height: "8",
+      viewBox: "0 0 5 8",
+      fill: "none"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M0.164574 4.20629L3.54376 7.58548C3.7275 7.76922 4.04167 7.63909 4.04167 7.37924L4.04167 0.620865C4.04167 0.361018 3.7275 0.230885 3.54376 0.414625L0.164575 3.79381C0.0506717 3.90772 0.0506715 4.09239 0.164574 4.20629Z",
+      fill: "#363B3F"
+    }))));
+  }), /*#__PURE__*/React.createElement("div", {
     className: "fortune-rows-freeze-handle",
     onMouseDown: onRowFreezeHandleMouseDown,
     style: {
@@ -189,13 +266,12 @@ var RowHeader = function RowHeader() {
       r1 = _a.r1,
       r2 = _a.r2;
     return /*#__PURE__*/React.createElement("div", {
-      className: "fortune-row-header-selected",
+      className: "fortune-row-header-selected color-bg-tertiary",
       key: i,
       style: _.assign({
         top: row_pre,
         height: row - row_pre - 1,
         display: "block",
-        backgroundColor: "#EFC703",
         mixBlendMode: "multiply"
       }, fixRowStyleOverflowInFreeze(context, r1, r2, (_b = refs.globalCache.freezen) === null || _b === void 0 ? void 0 : _b[context.currentSheetId]))
     });

package/es/components/SheetOverlay/drag_and_drop/column-helpers.js

@@ -272,24 +272,26 @@ export var useColumnDragAndDrop = function useColumnDragAndDrop(containerRef, se
               }
             });
           });
-          var newDataVerification = {};
-          Object.keys(_sheet.dataVerification).forEach(function (item) {
-            var _a;
-            var itemData = (_a = _sheet.dataVerification) === null || _a === void 0 ? void 0 : _a[item];
-            var colRow = item.split("_");
-            if (colRow.length !== 2) return;
-            var presentcol = parseInt(colRow[1], 10);
-            var updatedCol = presentcol;
-            if (presentcol === sourceIndex_1) {
-              updatedCol = targetIndex;
-            } else if (presentcol > sourceIndex_1 && presentcol < targetIndex) {
-              updatedCol -= 1;
-            } else if (presentcol < sourceIndex_1 && presentcol >= targetIndex) {
-              updatedCol += 1;
-            }
-            newDataVerification["".concat(colRow[0], "_").concat(updatedCol)] = itemData;
-          });
-          _sheet.dataVerification = newDataVerification;
+          if (_sheet.dataVerification) {
+            var newDataVerification_1 = {};
+            Object.keys(_sheet.dataVerification).forEach(function (item) {
+              var _a;
+              var itemData = (_a = _sheet.dataVerification) === null || _a === void 0 ? void 0 : _a[item];
+              var colRow = item.split("_");
+              if (colRow.length !== 2) return;
+              var presentcol = parseInt(colRow[1], 10);
+              var updatedCol = presentcol;
+              if (presentcol === sourceIndex_1) {
+                updatedCol = targetIndex;
+              } else if (presentcol > sourceIndex_1 && presentcol < targetIndex) {
+                updatedCol -= 1;
+              } else if (presentcol < sourceIndex_1 && presentcol >= targetIndex) {
+                updatedCol += 1;
+              }
+              newDataVerification_1["".concat(colRow[0], "_").concat(updatedCol)] = itemData;
+            });
+            _sheet.dataVerification = newDataVerification_1;
+          }
           (_c = _sheet.calcChain) === null || _c === void 0 ? void 0 : _c.forEach(function (item) {
             if (item.c === sourceIndex_1) {
               item.c = targetIndex;

package/es/components/SheetOverlay/drag_and_drop/row-helpers.js

@@ -253,24 +253,26 @@ export var useRowDragAndDrop = function useRowDragAndDrop(containerRef, selected
               }
             });
           });
-          var newDataVerification = {};
-          Object.keys(_sheet.dataVerification).forEach(function (item) {
-            var _a;
-            var itemData = (_a = _sheet.dataVerification) === null || _a === void 0 ? void 0 : _a[item];
-            var colRow = item.split("_");
-            if (colRow.length !== 2) return;
-            var presentRow = parseInt(colRow[0], 10);
-            var updatedRow = presentRow;
-            if (presentRow === sourceIndex_1) {
-              updatedRow = targetIndex;
-            } else if (presentRow > sourceIndex_1 && presentRow < targetIndex) {
-              updatedRow -= 1;
-            } else if (presentRow < sourceIndex_1 && presentRow >= targetIndex) {
-              updatedRow += 1;
-            }
-            newDataVerification["".concat(updatedRow, "_").concat(colRow[1])] = itemData;
-          });
-          _sheet.dataVerification = newDataVerification;
+          if (_sheet.dataVerification) {
+            var newDataVerification_1 = {};
+            Object.keys(_sheet.dataVerification).forEach(function (item) {
+              var _a;
+              var itemData = (_a = _sheet.dataVerification) === null || _a === void 0 ? void 0 : _a[item];
+              var colRow = item.split("_");
+              if (colRow.length !== 2) return;
+              var presentRow = parseInt(colRow[0], 10);
+              var updatedRow = presentRow;
+              if (presentRow === sourceIndex_1) {
+                updatedRow = targetIndex;
+              } else if (presentRow > sourceIndex_1 && presentRow < targetIndex) {
+                updatedRow -= 1;
+              } else if (presentRow < sourceIndex_1 && presentRow >= targetIndex) {
+                updatedRow += 1;
+              }
+              newDataVerification_1["".concat(updatedRow, "_").concat(colRow[1])] = itemData;
+            });
+            _sheet.dataVerification = newDataVerification_1;
+          }
           (_a = _sheet.calcChain) === null || _a === void 0 ? void 0 : _a.forEach(function (item) {
             if (item.r === sourceIndex_1) {
               item.r = targetIndex;

package/es/components/SheetOverlay/helper.js

@@ -94,12 +94,12 @@ export function countCommasBeforeCursor(editableDiv) {
   var textBeforeCursor = preCaretRange.toString();
   var inQuotes = false;
   var count = 0;
-  for (var i = 0; i < textBeforeCursor.length; i++) {
+  for (var i = 0; i < textBeforeCursor.length; i += 1) {
     var char = textBeforeCursor[i];
     if (char === '"') {
       inQuotes = !inQuotes;
-    } else if (char === ',' && !inQuotes) {
-      count++;
+    } else if (char === "," && !inQuotes) {
+      count += 1;
     }
   }
   return count;

package/es/components/SheetOverlay/index.css

@@ -45,12 +45,10 @@
 .fortune-row-header-selected {
   position: absolute;
   z-index: 10;
-  border-right: 1px solid #0188fb;
   right: 0;
   width: 100%;
   margin-top: 2px;
   display: none;
-  background-color: rgba(76, 76, 76, 0.1);
 }
 
 .fortune-col-header-wrap {
@@ -94,12 +92,10 @@
   cursor: default;
   position: absolute;
   z-index: 10;
-  border-bottom: 1px solid #0188fb;
   bottom: 0;
   height: 100%;
   margin-left: 0px;
   display: none;
-  background-color: rgba(76, 76, 76, 0.1);
 }
 
 .fortune-left-top {
@@ -137,7 +133,7 @@
   z-index: 14;
   /*border:1px solid #fff;*/
   margin: 0px 0 0 0px;
-  background: rgba(0, 80, 208, 0.15);
+  /* background: rgba(0, 80, 208, 0.15); */
   display: none;
 }
 
@@ -199,7 +195,7 @@
   z-index: 15;
   border: 2.5px solid #efc703;
   margin: -1px 0 0 -1px;
-  background: rgba(1, 136, 251, 0.15);
+  background: rgba(239, 199, 5, 0.02);
   display: none;
   box-sizing: content-box;
 }
@@ -1010,4 +1006,27 @@
   background: #555;
   /* darker on hover */
   /* scrollbar */
-}
+}
+
+.hide-btn {
+  padding-top: 1px;
+  position: absolute;
+  right: 5;
+  top: 5px;
+  z-index: 200;
+  width: 9px;
+}
+
+.hide-btn:hover {
+  border: 1px solid #0188fb;
+}
+
+.rotate-row-icon {
+  transform: rotate(-90deg);
+}
+
+.hide-btn-row {
+  position: absolute;
+   left: 4px;
+  z-index: 200;
+}

package/es/components/Toolbar/Combo.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef, useState } from "react";
-import { IconButton, Tooltip, Popover, PopoverContent, PopoverTrigger, cn, Button } from "@fileverse/ui";
+import { IconButton, Tooltip, Popover, PopoverContent, PopoverTrigger, cn, Button, LucideIcon } from "@fileverse/ui";
 import SVGIcon from "../SVGIcon";
 import { getLucideIcon } from ".";
 var Combo = function Combo(_a) {
@@ -49,7 +49,10 @@ var Combo = function Combo(_a) {
     height: 16
   })) : (/*#__PURE__*/React.createElement("span", {
     className: "fortune-toolbar-combo-text"
-  }, text !== undefined ? text : ""))))) : (/*#__PURE__*/React.createElement("span", null, iconId === "font-color" ? (/*#__PURE__*/React.createElement(Tooltip, {
+  }, text !== undefined ? text : "")), /*#__PURE__*/React.createElement(LucideIcon, {
+    className: "w-[16px] h-[16px]",
+    name: "ChevronDown"
+  })))) : (/*#__PURE__*/React.createElement("span", null, iconId === "font-color" ? (/*#__PURE__*/React.createElement(Tooltip, {
     text: tooltip,
     placement: "bottom"
   }, /*#__PURE__*/React.createElement(Button, {

package/es/components/Toolbar/index.css

@@ -141,12 +141,24 @@
 
 .fortune-toolbar-combo-button {
   font-size: 12px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 4px;
+  gap: 8px;
+}
+.fortune-toolbar-combo-button:hover {
+  background: hsl(var(--color-bg-default-hover));
 }
 
 .fortune-toolbar-select-option {
   font-size: 12px;
   min-width: 60px;
-  padding: 8px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 6px;
+  padding-bottom: 6px;
   cursor: pointer;
   user-select: none;
 }
@@ -171,6 +183,10 @@
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
+  max-width: 56px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .fortune-toolbar-color-picker-item {

package/es/components/Toolbar/index.js

@@ -124,7 +124,7 @@ var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
 };
 import React, { useContext, useCallback, useRef, useEffect, useState } from "react";
 import { toolbarItemClickHandler, handleTextBackground, handleTextColor, handleTextSize, normalizedCellAttr, getFlowdata, newComment, editComment, deleteComment, showHideComment, showHideAllComments, autoSelectionFormula, handleSum, locale, handleMerge, handleBorder, toolbarItemSelectedFunc, handleFreeze, insertImage, showImgChooser, updateFormat, handleSort, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, createFilter, clearFilter, applyLocation, insertDuneChart } from "@fileverse-dev/fortune-core";
-import { setSelection, getSelection } from "@fileverse-dev/fortune-core/lib/api";
+import { api } from "@fileverse-dev/fortune-core";
 import _ from "lodash";
 import { IconButton, LucideIcon, Tooltip, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@fileverse/ui";
 import DataVerificationPortal from "./dataVerificationPortal";
@@ -585,9 +585,35 @@ var Toolbar = function Toolbar(_a) {
       }
     }
   }, [itemLocations, setMoreItems, settings.toolbarItems.length, sheetWidth, isDesktop]);
+  useEffect(function () {
+    setContext(function (ctx) {
+      ctx.dataVerification.dataRegulation.value1 = "value1";
+    });
+  }, []);
   var _o = useState(false),
     showDataValidation = _o[0],
     setShowDataValidation = _o[1];
+  var dataVerificationClick = function dataVerificationClick() {
+    var _a;
+    var selection = api.getSelection(context);
+    if (!selection) {
+      setContext(function (ctx) {
+        api.setSelection(ctx, [{
+          row: [0, 0],
+          column: [0, 0]
+        }], {
+          id: context.currentSheetId
+        });
+      });
+    }
+    (_a = document.getElementById("data-verification-button")) === null || _a === void 0 ? void 0 : _a.click();
+    setTimeout(function () {
+      setShowDataValidation(true);
+    }, 100);
+  };
+  useEffect(function () {
+    window.dataVerificationClick = dataVerificationClick;
+  }, []);
   var getToolbarItem = useCallback(function (name, i) {
     var _a, _b, _c, _d, _e, _f, _g;
     var tooltip = toolbar[name];
@@ -970,24 +996,7 @@ var Toolbar = function Toolbar(_a) {
         iconId: name,
         tooltip: tooltip,
         key: name,
-        onClick: function onClick() {
-          var _a;
-          var selection = getSelection(context);
-          if (!selection) {
-            setContext(function (ctx) {
-              setSelection(ctx, [{
-                row: [0, 0],
-                column: [0, 0]
-              }], {
-                id: context.currentSheetId
-              });
-            });
-          }
-          (_a = document.getElementById("data-verification-button")) === null || _a === void 0 ? void 0 : _a.click();
-          setTimeout(function () {
-            setShowDataValidation(true);
-          }, 100);
-        }
+        onClick: dataVerificationClick
       }));
     }
     if (name === "locationCondition") {

package/es/components/Workbook/index.d.ts

@@ -57,7 +57,7 @@ declare const Workbook: React.ForwardRefExoticComponent<Settings & AdditionalPro
     getHtmlByRange: (range: import("@fileverse-dev/fortune-core").Range, options?: api.CommonOptions) => string | null;
     setSelection: (range: import("@fileverse-dev/fortune-core").Range, options?: api.CommonOptions) => void;
     setCellValuesByRange: (data: any[][], range: import("@fileverse-dev/fortune-core").SingleRange, options?: api.CommonOptions) => void;
-    setCellFormatByRange: (attr: "error" | "rt" | "f" | "m" | "v" | "mc" | "ct" | "qp" | "spl" | "bg" | "lo" | "baseValue" | "baseCurrency" | "baseCurrencyPrice" | "isDataBlockFormula" | "ps" | "hl" | keyof import("@fileverse-dev/fortune-core").CellStyle, value: any, range: import("@fileverse-dev/fortune-core").SingleRange | import("@fileverse-dev/fortune-core").Range, options?: api.CommonOptions) => void;
+    setCellFormatByRange: (attr: "error" | "rt" | "f" | "m" | "v" | "mc" | "ct" | "qp" | "spl" | "bg" | "lo" | "baseValue" | "baseCurrency" | "baseCurrencyPrice" | "isDataBlockFormula" | "ps" | "hl" | keyof import("@fileverse-dev/fortune-core").CellStyle, value: any, range: import("@fileverse-dev/fortune-core").Range | import("@fileverse-dev/fortune-core").SingleRange, options?: api.CommonOptions) => void;
     mergeCells: (ranges: import("@fileverse-dev/fortune-core").Range, type: string, options?: api.CommonOptions) => void;
     cancelMerge: (ranges: import("@fileverse-dev/fortune-core").Range, options?: api.CommonOptions) => void;
     getAllSheets: () => SheetType[];

package/es/components/Workbook/index.js

@@ -647,6 +647,11 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         }
       });
     }
+    setContextWithProduce(function (ctx) {
+      if (ctx.luckysheet_selection_range) {
+        ctx.luckysheet_selection_range = [];
+      }
+    });
   }, [context, setContextWithProduce]);
   var onMoreToolbarItemsClose = useCallback(function () {
     setMoreToolbarItems(null);

package/lib/components/ContextMenu/Menu.d.ts

@@ -3,6 +3,7 @@ type Props = React.PropsWithChildren<{
     onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, container: HTMLDivElement) => void;
     onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, container: HTMLDivElement) => void;
     onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, container: HTMLDivElement) => void;
+    isActive?: boolean;
 }>;
 declare const Menu: React.FC<Props>;
 export default Menu;

package/lib/components/ContextMenu/Menu.js

@@ -5,17 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _ui = require("@fileverse/ui");
 var _react = _interopRequireWildcard(require("react"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var Menu = function Menu(_a) {
   var _onClick = _a.onClick,
     _onMouseLeave = _a.onMouseLeave,
     _onMouseEnter = _a.onMouseEnter,
-    children = _a.children;
+    children = _a.children,
+    _b = _a.isActive,
+    isActive = _b === void 0 ? false : _b;
   var containerRef = (0, _react.useRef)(null);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
-    className: "luckysheet-cols-menuitem luckysheet-mousedown-cancel",
+    className: (0, _ui.cn)("luckysheet-cols-menuitem luckysheet-mousedown-cancel", isActive && "color-bg-default-hover"),
     onClick: function onClick(e) {
       return _onClick === null || _onClick === void 0 ? void 0 : _onClick(e, containerRef.current);
     },

package/lib/components/ContextMenu/index.css

@@ -82,7 +82,10 @@
   cursor: pointer;
   list-style: none;
   margin: 0;
-  padding: 8px !important;
+  padding-right: 8px !important;
+  padding-left: 8px !important;
+  padding-top: 6px !important;
+  padding-bottom: 6px !important;
   white-space: nowrap;
   user-select: none;
   display: flex;

package/lib/components/ContextMenu/index.js

@@ -158,6 +158,9 @@ var ContextMenu = function ContextMenu() {
     info = _b.info,
     toolbar = _b.toolbar,
     splitText = _b.splitText;
+  var _c = (0, _react.useState)(""),
+    activeMenu = _c[0],
+    setActiveMenu = _c[1];
   var addRowColRightAvobe = function addRowColRightAvobe(type, direction) {
     var _a, _b, _c, _d, _e, _f;
     var positionCol = (_c = (_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.column) === null || _c === void 0 ? void 0 : _c[0];
@@ -642,7 +645,7 @@ var ContextMenu = function ContextMenu() {
       }), /*#__PURE__*/_react.default.createElement("div", null, rightclick.deleteSelected, rightclick.row))));
     }
     if (name === "hide-row") {
-      return (selection === null || selection === void 0 ? void 0 : selection.row_select) === true && ["hideSelected", "showHide"].map(function (item) {
+      return (selection === null || selection === void 0 ? void 0 : selection.row_select) && ["hideSelected", "showHide"].map(function (item) {
         return /*#__PURE__*/_react.default.createElement(_Menu.default, {
           key: item,
           onClick: function onClick() {
@@ -838,6 +841,12 @@ var ContextMenu = function ContextMenu() {
         arrow: false,
         zIndex: 3000,
         appendTo: document.body,
+        onShow: function onShow() {
+          setActiveMenu("sort");
+        },
+        onHide: function onHide() {
+          if (activeMenu === "sort") setActiveMenu("");
+        },
         content: /*#__PURE__*/_react.default.createElement("div", {
           className: "fortune-toolbar-select",
           style: {
@@ -876,7 +885,9 @@ var ContextMenu = function ContextMenu() {
         }), /*#__PURE__*/_react.default.createElement("p", null, sort.desc))))),
         trigger: "mouseenter focus",
         hideOnClick: false
-      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Menu.default, null, /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Menu.default, {
+        isActive: activeMenu === "sort"
+      }, /*#__PURE__*/_react.default.createElement("div", {
         className: "flex items-center justify-between w-full"
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "context-item"
@@ -916,7 +927,7 @@ var ContextMenu = function ContextMenu() {
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: "context-item p-2 w-full",
           style: {
-            height: "40px"
+            height: "32px"
           }
         }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
           name: "Filter",
@@ -931,14 +942,22 @@ var ContextMenu = function ContextMenu() {
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: "context-item p-2 w-full",
           style: {
-            height: "40px"
+            height: "32px"
           }
         }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
           name: "Eraser"
         }), /*#__PURE__*/_react.default.createElement("p", null, filter.clearFilter))))),
         trigger: "mouseenter focus",
-        hideOnClick: false
-      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Menu.default, null, /*#__PURE__*/_react.default.createElement("div", {
+        hideOnClick: false,
+        onShow: function onShow() {
+          setActiveMenu("filter");
+        },
+        onHide: function onHide() {
+          if (activeMenu === "filter") setActiveMenu("");
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Menu.default, {
+        isActive: activeMenu === "filter"
+      }, /*#__PURE__*/_react.default.createElement("div", {
         className: "flex items-center justify-between w-full"
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "context-item"
@@ -992,6 +1011,12 @@ var ContextMenu = function ContextMenu() {
         arrow: false,
         zIndex: 3000,
         appendTo: document.body,
+        onShow: function onShow() {
+          setActiveMenu("conditionFormat");
+        },
+        onHide: function onHide() {
+          if (activeMenu === "conditionFormat") setActiveMenu("");
+        },
         content: /*#__PURE__*/_react.default.createElement("div", {
           style: {
             minWidth: 220
@@ -1002,7 +1027,9 @@ var ContextMenu = function ContextMenu() {
         })),
         trigger: "mouseenter focus",
         hideOnClick: false
-      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Menu.default, null, /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Menu.default, {
+        isActive: activeMenu === "conditionFormat"
+      }, /*#__PURE__*/_react.default.createElement("div", {
         className: "flex items-center justify-between w-full"
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "flex items-center gap-2 context-item"
@@ -1038,7 +1065,7 @@ var ContextMenu = function ContextMenu() {
       }), /*#__PURE__*/_react.default.createElement("p", null, "Clear formatting")));
     }
     return null;
-  }, [context, setContext, refs.globalCache, rightclick, showAlert, showDialog, drag.noMulti, info.tipRowHeightLimit, info.tipColumnWidthLimit, generalDialog.partiallyError, generalDialog.readOnlyError, generalDialog.dataNullError]);
+  }, [context, setContext, refs.globalCache, rightclick, showAlert, showDialog, drag.noMulti, info.tipRowHeightLimit, info.tipColumnWidthLimit, generalDialog.partiallyError, generalDialog.readOnlyError, generalDialog.dataNullError, activeMenu]);
   (0, _react.useLayoutEffect)(function () {
     var _a;
     if (!containerRef.current) {
@@ -1086,7 +1113,7 @@ var ContextMenu = function ContextMenu() {
       left: contextMenu.x,
       top: contextMenu.y
     }
-  }, context.contextMenu.headerMenu === true ? settings.headerContextMenu.map(function (menu, i) {
+  }, context.contextMenu.headerMenu === true || context.contextMenu.headerMenu === "row" ? settings.headerContextMenu.map(function (menu, i) {
     return getMenuElement(menu, i);
   }) : settings.cellContextMenu.map(function (menu, i) {
     return getMenuElement(menu, i);