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

package/es/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/es/components/ContextMenu/Menu.js

@@ -1,13 +1,16 @@
+import { cn } from "@fileverse/ui";
 import React, { useRef } from "react";
 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 = useRef(null);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
-    className: "luckysheet-cols-menuitem luckysheet-mousedown-cancel",
+    className: 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/es/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/es/components/ContextMenu/index.js

@@ -115,7 +115,7 @@ var __generator = this && this.__generator || function (thisArg, body) {
 };
 import { locale, handleCopy, handlePasteByClick, deleteRowCol, insertRowCol, removeActiveImage, deleteSelectedCellText, sortSelection, createFilter, showImgChooser, handleLink, hideSelected, showSelected, getSheetIndex, api, isAllowEdit, jfrefreshgrid, newComment, getFreezeState, toggleFreeze, clearFilter, clearSelectedCellFormat, clearColumnsCellsFormat, clearRowsCellsFormat } from "@fileverse-dev/fortune-core";
 import _ from "lodash";
-import React, { useContext, useRef, useCallback, useLayoutEffect } from "react";
+import React, { useContext, useRef, useCallback, useLayoutEffect, useState } from "react";
 import regeneratorRuntime from "regenerator-runtime";
 import Tippy from "@tippyjs/react";
 import { LucideIcon } from "@fileverse/ui";
@@ -149,6 +149,9 @@ var ContextMenu = function ContextMenu() {
     info = _b.info,
     toolbar = _b.toolbar,
     splitText = _b.splitText;
+  var _c = 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];
@@ -633,7 +636,7 @@ var ContextMenu = function ContextMenu() {
       }), /*#__PURE__*/React.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.createElement(Menu, {
           key: item,
           onClick: function onClick() {
@@ -829,6 +832,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.createElement("div", {
           className: "fortune-toolbar-select",
           style: {
@@ -867,7 +876,9 @@ var ContextMenu = function ContextMenu() {
         }), /*#__PURE__*/React.createElement("p", null, sort.desc))))),
         trigger: "mouseenter focus",
         hideOnClick: false
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Menu, {
+        isActive: activeMenu === "sort"
+      }, /*#__PURE__*/React.createElement("div", {
         className: "flex items-center justify-between w-full"
       }, /*#__PURE__*/React.createElement("div", {
         className: "context-item"
@@ -907,7 +918,7 @@ var ContextMenu = function ContextMenu() {
         }, /*#__PURE__*/React.createElement("div", {
           className: "context-item p-2 w-full",
           style: {
-            height: "40px"
+            height: "32px"
           }
         }, /*#__PURE__*/React.createElement(LucideIcon, {
           name: "Filter",
@@ -922,14 +933,22 @@ var ContextMenu = function ContextMenu() {
         }, /*#__PURE__*/React.createElement("div", {
           className: "context-item p-2 w-full",
           style: {
-            height: "40px"
+            height: "32px"
           }
         }, /*#__PURE__*/React.createElement(LucideIcon, {
           name: "Eraser"
         }), /*#__PURE__*/React.createElement("p", null, filter.clearFilter))))),
         trigger: "mouseenter focus",
-        hideOnClick: false
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement("div", {
+        hideOnClick: false,
+        onShow: function onShow() {
+          setActiveMenu("filter");
+        },
+        onHide: function onHide() {
+          if (activeMenu === "filter") setActiveMenu("");
+        }
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Menu, {
+        isActive: activeMenu === "filter"
+      }, /*#__PURE__*/React.createElement("div", {
         className: "flex items-center justify-between w-full"
       }, /*#__PURE__*/React.createElement("div", {
         className: "context-item"
@@ -983,6 +1002,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.createElement("div", {
           style: {
             minWidth: 220
@@ -993,7 +1018,9 @@ var ContextMenu = function ContextMenu() {
         })),
         trigger: "mouseenter focus",
         hideOnClick: false
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Menu, {
+        isActive: activeMenu === "conditionFormat"
+      }, /*#__PURE__*/React.createElement("div", {
         className: "flex items-center justify-between w-full"
       }, /*#__PURE__*/React.createElement("div", {
         className: "flex items-center gap-2 context-item"
@@ -1029,7 +1056,7 @@ var ContextMenu = function ContextMenu() {
       }), /*#__PURE__*/React.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]);
   useLayoutEffect(function () {
     var _a;
     if (!containerRef.current) {
@@ -1077,7 +1104,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);

package/es/components/DataVerification/ColorPicker.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { ChevronDown } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger } from "@fileverse/ui";
+import { Button, Popover, PopoverContent, PopoverTrigger, IconButton } from "@fileverse/ui";
 export var TEXT_COLORS = [{
   name: "Light Gray",
   value: "228, 232, 237"
@@ -57,7 +57,9 @@ export var ColorSection = function ColorSection(_a) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex items-center justify-between  color-picker rounded transition-all cursor-pointer border border-gray-300",
     style: {
-      padding: "7px"
+      padding: "7px",
+      border: "var(--border-width-md, 1px) solid hsl(var(--color-border-default, #E8EBEC))",
+      borderRadius: "var(--border-radius-sm, 4px)"
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-3 color-text-secondary"
@@ -72,7 +74,7 @@ export var ColorSection = function ColorSection(_a) {
   })))), /*#__PURE__*/React.createElement(PopoverContent, {
     align: "start",
     alignOffset: 0,
-    className: "w-[200px] export-content-popover",
+    className: "color-picker-container",
     elevation: 2,
     side: "bottom",
     sideOffset: 4
@@ -81,18 +83,40 @@ export var ColorSection = function ColorSection(_a) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex gap-2 flex-wrap w-full"
   }, TEXT_COLORS.map(function (color) {
-    return /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/React.createElement("div", {
+      key: color.value,
+      className: "w-7 h-7 rounded-full transition-all hover:scale-110 hover:shadow-md",
+      style: {
+        border: "".concat(color.value) === trigerColor ? "2px solid rgb(".concat(color.value, ")") : "none",
+        padding: "2px"
+      }
+    }, /*#__PURE__*/React.createElement("button", {
       type: "button",
       key: color.value,
       onClick: function onClick() {
         onPick(color.value);
         setIsOpen(false);
       },
-      className: "w-7 h-7 rounded-full transition-all hover:scale-110 hover:shadow-md",
+      className: "w-full h-full rounded-full transition-all hover:scale-110 hover:shadow-md",
       style: {
         backgroundColor: "rgb(".concat(color.value, ")")
       },
       title: color.name
-    });
-  })))));
+    }));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "w-full flex justify-center",
+    onClick: function onClick() {
+      onPick("228, 232, 237");
+      setIsOpen(false);
+    }
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: "DropletOff",
+    size: "md",
+    variant: "ghost",
+    className: "color-picker-icon"
+  }), /*#__PURE__*/React.createElement(Button, {
+    size: "md",
+    variant: "ghost",
+    className: "color-picker-reset"
+  }, "Reset"))))));
 };

package/es/components/DataVerification/DropdownList.js

@@ -1,5 +1,6 @@
 import { getCellValue, getDropdownList, getFlowdata, getSheetIndex, mergeBorder, setDropdownValue } from "@fileverse-dev/fortune-core";
 import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { Button, IconButton } from "@fileverse/ui";
 import WorkbookContext from "../../context";
 import { useOutsideClick } from "../../hooks/useOutsideClick";
 import SVGIcon from "../SVGIcon";
@@ -145,6 +146,24 @@ var DropDownList = function DropDownList() {
         display: isMul && selected.indexOf(v) >= 0 ? "inline" : "none"
       }
     }), v);
-  }));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "w-full flex align-center",
+    style: {
+      height: "28px"
+    },
+    onClick: function onClick() {
+      var _a;
+      (_a = window === null || window === void 0 ? void 0 : window.dataVerificationClick) === null || _a === void 0 ? void 0 : _a.call(window);
+    }
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: "Pencil",
+    size: "sm",
+    variant: "ghost",
+    className: "color-picker-icon pt-2 color-picker"
+  }), /*#__PURE__*/React.createElement(Button, {
+    size: "md",
+    variant: "ghost",
+    className: "color-picker-reset color-picker"
+  }, "Edit")));
 };
 export default DropDownList;

package/es/components/DataVerification/DropdownOption.js

@@ -174,7 +174,7 @@ var DynamicInputList = function DynamicInputList(_a) {
   }, optionItems.map(function (item, index) {
     return /*#__PURE__*/React.createElement("li", {
       key: item.id,
-      className: cn("relative flex optionItems-center gap-3 transition mb-4", draggingIndex === index && "scale-[0.99] opacity-80 shadow-lg rounded-xl"),
+      className: cn("relative flex optionItems-center gap-2 transition mb-4", draggingIndex === index && "scale-[0.99] opacity-80 shadow-lg rounded-xl"),
       onDragOver: function onDragOver(e) {
         return onDragOverRow(index, e);
       },
@@ -269,7 +269,10 @@ var DynamicInputList = function DynamicInputList(_a) {
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "secondary",
     onClick: handleAdd,
-    className: ""
+    size: "sm",
+    style: {
+      fontWeight: 500
+    }
   }, "Add another item")));
 };
 export default DynamicInputList;

package/es/components/DataVerification/RangeDialog.js

@@ -1,7 +1,6 @@
 import { locale } from "@fileverse-dev/fortune-core";
 import { Button, cn, IconButton, TextField } from "@fileverse/ui";
 import React, { useCallback, useContext, useEffect, useState } from "react";
-import DataVerification from ".";
 import WorkbookContext from "../../context";
 import { useDialog } from "../../hooks/useDialog";
 import ConditionRules from "../ConditionFormat/ConditionRules";
@@ -14,8 +13,7 @@ var RangeDialog = function RangeDialog() {
   var showDialog = useDialog().showDialog;
   var _b = locale(context),
     dataVerification = _b.dataVerification,
-    button = _b.button,
-    toolbar = _b.toolbar;
+    button = _b.button;
   var _c = useState(getDisplayedRangeTxt(context)),
     rangeTxt2 = _c[0],
     setRangeTxt2 = _c[1];
@@ -37,9 +35,7 @@ var RangeDialog = function RangeDialog() {
       showDialog(/*#__PURE__*/React.createElement(ConditionRules, {
         type: rulesType
       }), undefined, locale(context).conditionformat["conditionformat_".concat(rulesType)]);
-      return;
     }
-    showDialog(/*#__PURE__*/React.createElement(DataVerification, null), undefined, toolbar.dataVerification);
   }, [setContext, showDialog, context]);
   useEffect(function () {
     setRangeTxt2(getDisplayedRangeTxt(context));

package/es/components/DataVerification/index.css

@@ -202,5 +202,25 @@
 }
 
 .color-picker:hover {
-  background: hsl(var(--color-bg-default-hover, #F2F4F5));
+  background: hsl(var(--color-bg-default-hover, #F2F4F5))!important;
+}
+
+.color-picker-container {
+  border: 1px solid hsl(var(--color-border-default, #E8EBEC)) !important;
+  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.15);
+  width: 230px !important;
+}
+
+.color-picker-reset {
+  min-width: 0px !important;
+  padding-left: 0px !important;
+  margin-left: 0px !important;
+}
+
+.color-picker-reset:hover {
+  background-color: white!important;
+}
+
+.color-picker-icon:hover {
+  background-color: white!important;
 }

package/es/components/DataVerification/index.js

@@ -84,6 +84,14 @@ var DataVerification = function DataVerification() {
       }));
     }
   }, []);
+  var dataSelectRange = useCallback(function (type, value) {
+    hideDialog();
+    setContext(function (ctx) {
+      ctx.rangeDialog.show = true;
+      ctx.rangeDialog.type = type;
+      ctx.rangeDialog.rangeTxt = value;
+    });
+  }, [hideDialog, setContext]);
   var btn = useCallback(function (type) {
     if (type === "confirm") {
       setContext(function (ctx) {
@@ -210,7 +218,7 @@ var DataVerification = function DataVerification() {
   return /*#__PURE__*/React.createElement("div", {
     id: "fortune-data-verification"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-4",
+    className: "flex flex-col gap-4 h-[calc(100vh-270px)] overflow-y-auto no-scrollbar",
     style: {
       width: "345px",
       padding: "16px"
@@ -226,7 +234,19 @@ var DataVerification = function DataVerification() {
     }),
     "aria-hidden": "true",
     readOnly: true,
-    value: (_a = context.dataVerification.dataRegulation) === null || _a === void 0 ? void 0 : _a.rangeTxt
+    value: (_a = context.dataVerification.dataRegulation) === null || _a === void 0 ? void 0 : _a.rangeTxt,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setContext(function (ctx) {
+        ctx.dataVerification.dataRegulation.rangeTxt = value;
+      });
+    },
+    onClick: function onClick() {
+      var _a;
+      (_a = document.getElementById("data-verification-button")) === null || _a === void 0 ? void 0 : _a.click();
+      hideDialog();
+      dataSelectRange("rangeTxt", context.dataVerification.dataRegulation.value1);
+    }
   })), /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
@@ -271,7 +291,7 @@ var DataVerification = function DataVerification() {
       });
     }
   }), /*#__PURE__*/React.createElement("span", {
-    className: "ml-2"
+    className: "ml-2 text-body-sm"
   }, dataVerification.allowMultiSelect)))), ((_e = (_d = context.dataVerification) === null || _d === void 0 ? void 0 : _d.dataRegulation) === null || _e === void 0 ? void 0 : _e.type) === "checkbox" && (/*#__PURE__*/React.createElement("div", {
     className: "mt-4 space-y-2"
   }, /*#__PURE__*/React.createElement("div", {
@@ -387,7 +407,7 @@ var DataVerification = function DataVerification() {
         });
       }
     }), /*#__PURE__*/React.createElement("span", {
-      className: "ml-2"
+      className: "ml-2 text-body-sm"
     }, dataVerification[v]));
   }), ((_o = (_m = context.dataVerification) === null || _m === void 0 ? void 0 : _m.dataRegulation) === null || _o === void 0 ? void 0 : _o.hintShow) && (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TextField, {
     placeholder: dataVerification.placeholder5,
@@ -399,7 +419,11 @@ var DataVerification = function DataVerification() {
       });
     }
   }))))), /*#__PURE__*/React.createElement(Divider, {
-    className: "w-full border-t-[1px] my-4"
+    className: "border-t-[1px]",
+    style: {
+      width: "315px",
+      margin: "0 16px 16px 16px"
+    }
   }), /*#__PURE__*/React.createElement("div", {
     className: "flex gap-2 justify-between items-center",
     style: {
@@ -423,7 +447,9 @@ var DataVerification = function DataVerification() {
       minWidth: "80px"
     },
     onClick: function onClick() {
+      var _a;
       btn("confirm");
+      (_a = document.getElementById("data-verification-button")) === null || _a === void 0 ? void 0 : _a.click();
     }
   }, button.confirm))));
 };

package/es/components/SheetOverlay/ColumnHeader.js

@@ -1,4 +1,5 @@
-import { colLocation, colLocationByIndex, selectTitlesMap, selectTitlesRange, handleColSizeHandleMouseDown, handleColumnHeaderMouseDown, isAllowEdit, getFlowdata, fixColumnStyleOverflowInFreeze, handleColFreezeHandleMouseDown, getSheetIndex, fixPositionOnFrozenCells } from "@fileverse-dev/fortune-core";
+import { colLocation, colLocationByIndex, selectTitlesMap, selectTitlesRange, handleColSizeHandleMouseDown, handleColumnHeaderMouseDown, isAllowEdit, getFlowdata, fixColumnStyleOverflowInFreeze, handleColFreezeHandleMouseDown, getSheetIndex, fixPositionOnFrozenCells, showSelected } 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";
@@ -73,13 +74,13 @@ var ColumnHeader = function ColumnHeader() {
     }]);
   }, [context, hoverLocation.col_index, refs.globalCache.freezen]);
   var onMouseDown = useCallback(function (e) {
-    if (e.button === 0 && e.target.tagName === "use") {
+    if (e.button === 0 && e.target.tagName === "use" || e.button === 2) {
       var nativeEvent_1 = e.nativeEvent;
       setContext(function (draft) {
         handleColumnHeaderMouseDown(draft, refs.globalCache, nativeEvent_1, containerRef.current, refs.cellInput.current, refs.fxInput.current);
       });
     }
-    if (e.button !== 0) return;
+    if (e.button !== 0 || context.isFlvReadOnly) return;
     var targetEl = e.target;
     if (targetEl.closest(".fortune-cols-change-size") || targetEl.closest(".fortune-cols-freeze-handle") || targetEl.closest(".header-arrow")) return;
     var headerEl = containerRef.current;
@@ -154,6 +155,44 @@ var ColumnHeader = function ColumnHeader() {
     }
     setSelectedLocation(selects);
   }, [context.luckysheet_select_save, context.visibledatacolumn]);
+  var _g = useState([]),
+    hiddenPointers = _g[0],
+    setHiddenPointers = _g[1];
+  useEffect(function () {
+    var _a, _b;
+    if (sheetIndex == null) return;
+    var tempPointers = [];
+    var colhidden = (_b = (_a = context.luckysheetfile[sheetIndex]) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.colhidden;
+    if (colhidden) {
+      Object.keys(colhidden).forEach(function (key) {
+        var item = {
+          col: key,
+          left: context.visibledatacolumn[Number(key) - 1]
+        };
+        tempPointers.push(item);
+      });
+      console.log(tempPointers);
+      setHiddenPointers(tempPointers);
+    } else {
+      setHiddenPointers([]);
+    }
+  }, [context.visibledatacolumn, sheetIndex]);
+  var showColumn = function showColumn(e, item) {
+    if (context.isFlvReadOnly) return;
+    e.stopPropagation();
+    setContext(function (ctx) {
+      var _a;
+      api.setSelection(ctx, [{
+        row: [0, (_a = context.visibledatarow) === null || _a === void 0 ? void 0 : _a.length],
+        column: [Number(item.col) - 1, Number(item.col) + 1]
+      }], {
+        id: context.currentSheetId
+      });
+    });
+    setContext(function (ctx) {
+      showSelected(ctx, "column");
+    });
+  };
   useEffect(function () {
     containerRef.current.scrollLeft = context.scrollLeft;
   }, [context.scrollLeft]);
@@ -176,7 +215,51 @@ var ColumnHeader = function ColumnHeader() {
         };
       });
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, hiddenPointers.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex gap-4 cursor-pointer hide-btn align-center",
+      style: {
+        height: context.columnHeaderHeight - 12,
+        left: "".concat(item.left - 12, "px")
+      },
+      onClick: function onClick(e) {
+        return showColumn(e, item);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ""
+    }, /*#__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"
+    }))));
+  }), hiddenPointers.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex gap-4 cursor-pointer hide-btn align-center",
+      style: {
+        height: context.columnHeaderHeight - 12,
+        left: "".concat(item.left + 6, "px")
+      },
+      onClick: function onClick(e) {
+        return showColumn(e, item);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ""
+    }, /*#__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: "M4.68811 4.35359L1.81188 7.22982C1.4969 7.5448 0.958328 7.32172 0.958328 6.87627L0.958328 1.12381C0.958328 0.678362 1.4969 0.455279 1.81188 0.770261L4.68811 3.64649C4.88337 3.84175 4.88337 4.15833 4.68811 4.35359Z",
+      fill: "#363B3F"
+    }))));
+  }), /*#__PURE__*/React.createElement("div", {
     className: "fortune-cols-freeze-handle",
     onMouseDown: onColFreezeHandleMouseDown,
     style: {
@@ -199,7 +282,7 @@ var ColumnHeader = function ColumnHeader() {
       display: "block"
     }, fixColumnStyleOverflowInFreeze(context, hoverLocation.col_index, hoverLocation.col_index, (_a = refs.globalCache.freezen) === null || _a === void 0 ? void 0 : _a[context.currentSheetId]))
   }, allowEditRef.current && (/*#__PURE__*/React.createElement("span", {
-    className: "header-arrow",
+    className: "header-arrow mr-2",
     onClick: function onClick(e) {
       setContext(function (ctx) {
         ctx.contextMenu = {
@@ -223,13 +306,12 @@ var ColumnHeader = function ColumnHeader() {
       c1 = _a.c1,
       c2 = _a.c2;
     return /*#__PURE__*/React.createElement("div", {
-      className: "fortune-col-header-selected",
+      className: "fortune-col-header-selected color-bg-tertiary",
       key: i,
       style: _.assign({
         left: col_pre,
         width: col - col_pre - 1,
         display: "block",
-        backgroundColor: "#EFC703",
         mixBlendMode: "multiply"
       }, fixColumnStyleOverflowInFreeze(context, c1, c2, (_b = refs.globalCache.freezen) === null || _b === void 0 ? void 0 : _b[context.currentSheetId]))
     });

package/es/components/SheetOverlay/FormulaHint/index.js

@@ -66,6 +66,17 @@ var FormulaHint = function FormulaHint(props) {
     var divOffset = ((_d = hintRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) || 0;
     setTop(hintAbove ? selectionHeight - (divOffset + 30) : selectionHeight + 4);
   };
+  var hexToRgbString = function hexToRgbString(hex) {
+    hex = hex.replace("#", "");
+    var r = parseInt(hex.substring(0, 2), 16);
+    var g = parseInt(hex.substring(2, 4), 16);
+    var b = parseInt(hex.substring(4, 6), 16);
+    return "".concat(r, ", ").concat(g, ", ").concat(b);
+  };
+  var bgColor = function bgColor(BRAND_SECONDARY_COLOR) {
+    var bg = BRAND_SECONDARY_COLOR ? "rgb(".concat(hexToRgbString(BRAND_SECONDARY_COLOR), ", 0.4)") : "#FFDF0A";
+    return bg;
+  };
   useEffect(function () {
     calcuatePopUpPlacement();
   }, []);
@@ -189,7 +200,7 @@ var FormulaHint = function FormulaHint(props) {
       dir: "auto",
       key: name,
       style: {
-        backgroundColor: commaCount === i ? (fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR) || "#FFDF0A" : "transparent"
+        backgroundColor: commaCount === i ? bgColor(fn.BRAND_SECONDARY_COLOR) : "transparent"
       }
     }, name, i !== fn.p.length - 1 && ", ");
   })), /*#__PURE__*/React.createElement("code", {
@@ -365,7 +376,7 @@ var FormulaHint = function FormulaHint(props) {
     }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("code", {
       className: "font-family-mono mb-1 mt-2 color-text-default font-family-mono",
       style: {
-        backgroundColor: commaCount === index ? (fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR) || "#FFDF0A" : "transparent"
+        backgroundColor: commaCount === index ? bgColor(fn.BRAND_SECONDARY_COLOR) : "transparent"
       }
     }, param.name, param.repeat === "y" && (/*#__PURE__*/React.createElement("span", {
       className: "luckysheet-arguments-help-argument-info example-value",

package/es/components/SheetOverlay/FormulaSearch/index.css

@@ -6,7 +6,6 @@
   background: #fff;
   z-index: 1003;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  border: 1px solid lavender;
   border-radius: 10px;
 }
 

package/es/components/SheetOverlay/FormulaSearch/index.js

@@ -53,7 +53,7 @@ var FormulaSearch = function FormulaSearch(props) {
   });
   if (_.isEmpty(context.functionCandidates) && _.isEmpty(context.defaultCandidates)) return null;
   return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col luckysheet-formula-search-c-p custom-scroll",
+    className: "flex color-border-default border flex-col luckysheet-formula-search-c-p custom-scroll",
     id: "luckysheet-formula-search-c-p",
     style: {
       top: top