@fileverse-dev/fortune-react 1.2.9 → 1.2.10

package/es/components/ConditionFormat/index.css

@@ -22,6 +22,8 @@
   z-index: 1005;
   border-radius: 4px;
   cursor: pointer;
+  align-items: center;
+  height: 32px;
 }
 
 .condition-format-item:hover {

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];
@@ -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) {

package/es/components/LinkEidtCard/index.js

@@ -8,7 +8,7 @@ var __assign = this && this.__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
-import React, { useContext, useState, useMemo, useCallback, useLayoutEffect } from "react";
+import React, { useContext, useState, useMemo, useCallback, useLayoutEffect, useRef, useEffect } from "react";
 import { locale, saveHyperlink, removeHyperlink, replaceHtml, goToLink, isLinkValid } from "@fileverse-dev/fortune-core";
 import { Button, TextField, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, LucideIcon } from "@fileverse/ui";
 import "./index.css";
@@ -28,18 +28,24 @@ export var LinkEditCard = function LinkEditCard(_a) {
     context = _b.context,
     setContext = _b.setContext,
     refs = _b.refs;
-  var _c = useState(originText),
-    linkText = _c[0],
-    setLinkText = _c[1];
-  var _d = useState(originAddress),
-    linkAddress = _d[0],
-    setLinkAddress = _d[1];
-  var _e = useState(originType),
-    linkType = _e[0],
-    setLinkType = _e[1];
-  var _f = locale(context),
-    insertLink = _f.insertLink,
-    linkTypeList = _f.linkTypeList;
+  var cardRef = useRef(null);
+  var linkAddressRef = useRef(null);
+  var linkTextRef = useRef(null);
+  var _c = useState(position.cellBottom),
+    cardTop = _c[0],
+    setCardTop = _c[1];
+  var _d = useState(originText),
+    linkText = _d[0],
+    setLinkText = _d[1];
+  var _e = useState(originAddress),
+    linkAddress = _e[0],
+    setLinkAddress = _e[1];
+  var _f = useState(originType),
+    linkType = _f[0],
+    setLinkType = _f[1];
+  var _g = locale(context),
+    insertLink = _g.insertLink,
+    linkTypeList = _g.linkTypeList;
   var isLinkAddressValid = isLinkValid(context, linkType, linkAddress);
   var isButtonDisabled = useMemo(function () {
     if (!linkText.trim()) return true;
@@ -75,13 +81,20 @@ export var LinkEditCard = function LinkEditCard(_a) {
         return e.stopPropagation();
       },
       onKeyDown: function onKeyDown(e) {
-        return e.stopPropagation();
+        e.stopPropagation();
+        if (isButtonDisabled) return;
+        if (e.key === "Enter") {
+          _.set(refs.globalCache, "linkCard.mouseEnter", false);
+          setContext(function (draftCtx) {
+            return saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
+          });
+        }
       },
       onDoubleClick: function onDoubleClick(e) {
         return e.stopPropagation();
       }
     };
-  }, [refs.globalCache]);
+  }, [refs.globalCache, isButtonDisabled]);
   var renderToolbarButton = useCallback(function (iconId, onClick) {
     return /*#__PURE__*/React.createElement("div", {
       className: "fortune-toolbar-button",
@@ -100,6 +113,40 @@ export var LinkEditCard = function LinkEditCard(_a) {
     setLinkText(originText);
     setLinkType(originType);
   }, [rc, originAddress, originText, originType]);
+  useEffect(function () {
+    var dragHandle = document.querySelector(".luckysheet-cs-draghandle-top.luckysheet-cs-draghandle");
+    var card = cardRef.current;
+    if (!dragHandle || !card) {
+      setCardTop(position.cellBottom + 8);
+      return;
+    }
+    var dragRect = dragHandle.getBoundingClientRect();
+    var cardRect = card.getBoundingClientRect();
+    var viewportHeight = window.innerHeight;
+    var spaceBelow = viewportHeight - dragRect.bottom;
+    var spaceAbove = dragRect.top;
+    var newTop;
+    if (spaceBelow < cardRect.height + 16 && spaceAbove > cardRect.height + 16) {
+      var cellTop = position.cellBottom - 30;
+      newTop = cellTop - cardRect.height - 8;
+    } else {
+      newTop = position.cellBottom + 8;
+    }
+    setCardTop(newTop);
+  }, [position.cellBottom, isEditing]);
+  useEffect(function () {
+    var _a, _b;
+    if (linkAddressRef.current && !linkAddress && isEditing) {
+      (_a = linkAddressRef.current) === null || _a === void 0 ? void 0 : _a.focus({
+        preventScroll: true
+      });
+    }
+    if (linkTextRef.current && !linkText && isEditing) {
+      (_b = linkTextRef.current) === null || _b === void 0 ? void 0 : _b.focus({
+        preventScroll: true
+      });
+    }
+  }, [linkAddressRef, isEditing, linkTextRef]);
   if (!isEditing) {
     return /*#__PURE__*/React.createElement("div", __assign({}, containerEvent, {
       onKeyDown: function onKeyDown(e) {
@@ -142,9 +189,10 @@ export var LinkEditCard = function LinkEditCard(_a) {
   }
   return /*#__PURE__*/React.createElement("div", __assign({
     className: "fortune-link-card",
+    ref: cardRef,
     style: {
       left: position.cellLeft + 20,
-      top: position.cellBottom
+      top: cardTop
     }
   }, containerEvent), /*#__PURE__*/React.createElement(Select, {
     value: linkType,
@@ -177,6 +225,7 @@ export var LinkEditCard = function LinkEditCard(_a) {
   }, /*#__PURE__*/React.createElement(LucideIcon, {
     name: "ALargeSmall"
   })), /*#__PURE__*/React.createElement(TextField, {
+    ref: linkTextRef,
     placeholder: "Display text",
     value: linkText,
     onChange: function onChange(e) {
@@ -192,6 +241,7 @@ export var LinkEditCard = function LinkEditCard(_a) {
     width: 16,
     height: 16
   })), /*#__PURE__*/React.createElement(TextField, {
+    ref: linkAddressRef,
     placeholder: "Paste URL",
     value: linkAddress,
     onChange: function onChange(e) {

package/es/components/NotationBoxes/index.js

@@ -44,8 +44,6 @@ var NotationBoxes = function NotationBoxes() {
       rc = commentBox.rc,
       left = commentBox.left,
       top = commentBox.top,
-      width = commentBox.width,
-      height = commentBox.height,
       size = commentBox.size;
     var isEditing = ((_a = context.editingCommentBox) === null || _a === void 0 ? void 0 : _a.rc) === rc;
     var commentId = "comment-box-".concat(rc);
@@ -65,19 +63,12 @@ var NotationBoxes = function NotationBoxes() {
       }
     }), /*#__PURE__*/React.createElement("div", {
       id: commentId,
-      className: "luckysheet-postil-show-main",
       style: {
-        width: width,
-        height: height,
-        color: "#000",
-        padding: 5,
-        border: "1px solid #000",
-        backgroundColor: "rgb(255,255,225)",
         position: "absolute",
         left: left,
         top: top,
-        boxSizing: "border-box",
-        zIndex: isEditing ? 200 : 100
+        zIndex: isEditing ? 200 : 100,
+        boxShadow: "0 1px 1px #0000002e,0 4px 8px #0000001a"
       },
       onMouseDown: function onMouseDown(e) {
         var nativeEvent = e.nativeEvent;

package/es/components/SheetOverlay/ColumnHeader.js

@@ -329,13 +329,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/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

package/es/components/SheetOverlay/RowHeader.js

@@ -300,13 +300,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/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,9 +195,9 @@
   z-index: 15;
   border: 2.5px solid #efc703;
   margin: -1px 0 0 -1px;
-  background: rgba(1, 136, 251, 0.15);
   display: none;
   box-sizing: content-box;
+  background: rgba(239, 199, 5, 0.02);
 }
 
 .luckysheet-cs-inner-border {

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/Select.js

@@ -27,7 +27,7 @@ var Option = function Option(_a) {
   }, iconId && /*#__PURE__*/React.createElement(SVGIcon, {
     name: iconId
   }), /*#__PURE__*/React.createElement("div", {
-    className: "fortuen-toolbar-text color-text-default text-body-sm"
+    className: "fortuen-toolbar-text color-text-default text-body-sm w-full"
   }, children));
 };
 export { Option };

package/es/components/Toolbar/index.css

@@ -141,14 +141,30 @@
 
 .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;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  
 }
 
 .fortune-toolbar-select-option:hover {
@@ -171,6 +187,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/lib/components/ConditionFormat/index.css

@@ -22,6 +22,8 @@
   z-index: 1005;
   border-radius: 4px;
   cursor: pointer;
+  align-items: center;
+  height: 32px;
 }
 
 .condition-format-item:hover {

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];
@@ -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) {

package/lib/components/LinkEidtCard/index.js

@@ -37,18 +37,24 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
     context = _b.context,
     setContext = _b.setContext,
     refs = _b.refs;
-  var _c = (0, _react.useState)(originText),
-    linkText = _c[0],
-    setLinkText = _c[1];
-  var _d = (0, _react.useState)(originAddress),
-    linkAddress = _d[0],
-    setLinkAddress = _d[1];
-  var _e = (0, _react.useState)(originType),
-    linkType = _e[0],
-    setLinkType = _e[1];
-  var _f = (0, _fortuneCore.locale)(context),
-    insertLink = _f.insertLink,
-    linkTypeList = _f.linkTypeList;
+  var cardRef = (0, _react.useRef)(null);
+  var linkAddressRef = (0, _react.useRef)(null);
+  var linkTextRef = (0, _react.useRef)(null);
+  var _c = (0, _react.useState)(position.cellBottom),
+    cardTop = _c[0],
+    setCardTop = _c[1];
+  var _d = (0, _react.useState)(originText),
+    linkText = _d[0],
+    setLinkText = _d[1];
+  var _e = (0, _react.useState)(originAddress),
+    linkAddress = _e[0],
+    setLinkAddress = _e[1];
+  var _f = (0, _react.useState)(originType),
+    linkType = _f[0],
+    setLinkType = _f[1];
+  var _g = (0, _fortuneCore.locale)(context),
+    insertLink = _g.insertLink,
+    linkTypeList = _g.linkTypeList;
   var isLinkAddressValid = (0, _fortuneCore.isLinkValid)(context, linkType, linkAddress);
   var isButtonDisabled = (0, _react.useMemo)(function () {
     if (!linkText.trim()) return true;
@@ -84,13 +90,20 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
         return e.stopPropagation();
       },
       onKeyDown: function onKeyDown(e) {
-        return e.stopPropagation();
+        e.stopPropagation();
+        if (isButtonDisabled) return;
+        if (e.key === "Enter") {
+          _lodash.default.set(refs.globalCache, "linkCard.mouseEnter", false);
+          setContext(function (draftCtx) {
+            return (0, _fortuneCore.saveHyperlink)(draftCtx, r, c, linkText, linkType, linkAddress);
+          });
+        }
       },
       onDoubleClick: function onDoubleClick(e) {
         return e.stopPropagation();
       }
     };
-  }, [refs.globalCache]);
+  }, [refs.globalCache, isButtonDisabled]);
   var renderToolbarButton = (0, _react.useCallback)(function (iconId, onClick) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "fortune-toolbar-button",
@@ -109,6 +122,40 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
     setLinkText(originText);
     setLinkType(originType);
   }, [rc, originAddress, originText, originType]);
+  (0, _react.useEffect)(function () {
+    var dragHandle = document.querySelector(".luckysheet-cs-draghandle-top.luckysheet-cs-draghandle");
+    var card = cardRef.current;
+    if (!dragHandle || !card) {
+      setCardTop(position.cellBottom + 8);
+      return;
+    }
+    var dragRect = dragHandle.getBoundingClientRect();
+    var cardRect = card.getBoundingClientRect();
+    var viewportHeight = window.innerHeight;
+    var spaceBelow = viewportHeight - dragRect.bottom;
+    var spaceAbove = dragRect.top;
+    var newTop;
+    if (spaceBelow < cardRect.height + 16 && spaceAbove > cardRect.height + 16) {
+      var cellTop = position.cellBottom - 30;
+      newTop = cellTop - cardRect.height - 8;
+    } else {
+      newTop = position.cellBottom + 8;
+    }
+    setCardTop(newTop);
+  }, [position.cellBottom, isEditing]);
+  (0, _react.useEffect)(function () {
+    var _a, _b;
+    if (linkAddressRef.current && !linkAddress && isEditing) {
+      (_a = linkAddressRef.current) === null || _a === void 0 ? void 0 : _a.focus({
+        preventScroll: true
+      });
+    }
+    if (linkTextRef.current && !linkText && isEditing) {
+      (_b = linkTextRef.current) === null || _b === void 0 ? void 0 : _b.focus({
+        preventScroll: true
+      });
+    }
+  }, [linkAddressRef, isEditing, linkTextRef]);
   if (!isEditing) {
     return /*#__PURE__*/_react.default.createElement("div", __assign({}, containerEvent, {
       onKeyDown: function onKeyDown(e) {
@@ -151,9 +198,10 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
   }
   return /*#__PURE__*/_react.default.createElement("div", __assign({
     className: "fortune-link-card",
+    ref: cardRef,
     style: {
       left: position.cellLeft + 20,
-      top: position.cellBottom
+      top: cardTop
     }
   }, containerEvent), /*#__PURE__*/_react.default.createElement(_ui.Select, {
     value: linkType,
@@ -186,6 +234,7 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
   }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
     name: "ALargeSmall"
   })), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+    ref: linkTextRef,
     placeholder: "Display text",
     value: linkText,
     onChange: function onChange(e) {
@@ -201,6 +250,7 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
     width: 16,
     height: 16
   })), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+    ref: linkAddressRef,
     placeholder: "Paste URL",
     value: linkAddress,
     onChange: function onChange(e) {

package/lib/components/NotationBoxes/index.js

@@ -53,8 +53,6 @@ var NotationBoxes = function NotationBoxes() {
       rc = commentBox.rc,
       left = commentBox.left,
       top = commentBox.top,
-      width = commentBox.width,
-      height = commentBox.height,
       size = commentBox.size;
     var isEditing = ((_a = context.editingCommentBox) === null || _a === void 0 ? void 0 : _a.rc) === rc;
     var commentId = "comment-box-".concat(rc);
@@ -74,19 +72,12 @@ var NotationBoxes = function NotationBoxes() {
       }
     }), /*#__PURE__*/_react.default.createElement("div", {
       id: commentId,
-      className: "luckysheet-postil-show-main",
       style: {
-        width: width,
-        height: height,
-        color: "#000",
-        padding: 5,
-        border: "1px solid #000",
-        backgroundColor: "rgb(255,255,225)",
         position: "absolute",
         left: left,
         top: top,
-        boxSizing: "border-box",
-        zIndex: isEditing ? 200 : 100
+        zIndex: isEditing ? 200 : 100,
+        boxShadow: "0 1px 1px #0000002e,0 4px 8px #0000001a"
       },
       onMouseDown: function onMouseDown(e) {
         var nativeEvent = e.nativeEvent;

package/lib/components/SheetOverlay/ColumnHeader.js

@@ -338,13 +338,12 @@ var ColumnHeader = function ColumnHeader() {
       c1 = _a.c1,
       c2 = _a.c2;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "fortune-col-header-selected",
+      className: "fortune-col-header-selected color-bg-tertiary",
       key: i,
       style: _lodash.default.assign({
         left: col_pre,
         width: col - col_pre - 1,
         display: "block",
-        backgroundColor: "#EFC703",
         mixBlendMode: "multiply"
       }, (0, _fortuneCore.fixColumnStyleOverflowInFreeze)(context, c1, c2, (_b = refs.globalCache.freezen) === null || _b === void 0 ? void 0 : _b[context.currentSheetId]))
     });

package/lib/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/lib/components/SheetOverlay/FormulaSearch/index.js

@@ -62,7 +62,7 @@ var FormulaSearch = function FormulaSearch(props) {
   });
   if (_lodash.default.isEmpty(context.functionCandidates) && _lodash.default.isEmpty(context.defaultCandidates)) return null;
   return /*#__PURE__*/_react.default.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

package/lib/components/SheetOverlay/RowHeader.js

@@ -309,13 +309,12 @@ var RowHeader = function RowHeader() {
       r1 = _a.r1,
       r2 = _a.r2;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "fortune-row-header-selected",
+      className: "fortune-row-header-selected color-bg-tertiary",
       key: i,
       style: _lodash.default.assign({
         top: row_pre,
         height: row - row_pre - 1,
         display: "block",
-        backgroundColor: "#EFC703",
         mixBlendMode: "multiply"
       }, (0, _fortuneCore.fixRowStyleOverflowInFreeze)(context, r1, r2, (_b = refs.globalCache.freezen) === null || _b === void 0 ? void 0 : _b[context.currentSheetId]))
     });

package/lib/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,9 +195,9 @@
   z-index: 15;
   border: 2.5px solid #efc703;
   margin: -1px 0 0 -1px;
-  background: rgba(1, 136, 251, 0.15);
   display: none;
   box-sizing: content-box;
+  background: rgba(239, 199, 5, 0.02);
 }
 
 .luckysheet-cs-inner-border {

package/lib/components/Toolbar/Combo.js

@@ -58,7 +58,10 @@ var Combo = function Combo(_a) {
     height: 16
   })) : (/*#__PURE__*/_react.default.createElement("span", {
     className: "fortune-toolbar-combo-text"
-  }, text !== undefined ? text : ""))))) : (/*#__PURE__*/_react.default.createElement("span", null, iconId === "font-color" ? (/*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+  }, text !== undefined ? text : "")), /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+    className: "w-[16px] h-[16px]",
+    name: "ChevronDown"
+  })))) : (/*#__PURE__*/_react.default.createElement("span", null, iconId === "font-color" ? (/*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
     text: tooltip,
     placement: "bottom"
   }, /*#__PURE__*/_react.default.createElement(_ui.Button, {

package/lib/components/Toolbar/Select.js

@@ -34,7 +34,7 @@ var Option = exports.Option = function Option(_a) {
   }, iconId && /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
     name: iconId
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortuen-toolbar-text color-text-default text-body-sm"
+    className: "fortuen-toolbar-text color-text-default text-body-sm w-full"
   }, children));
 };
 var _default = exports.default = Select;

package/lib/components/Toolbar/index.css

@@ -141,14 +141,30 @@
 
 .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;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  
 }
 
 .fortune-toolbar-select-option:hover {
@@ -171,6 +187,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse-dev/fortune-react",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "module": "es/index.js",
@@ -16,7 +16,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@fileverse-dev/fortune-core": "1.2.9",
+    "@fileverse-dev/fortune-core": "1.2.10",
     "@fileverse/ui": "^4.1.7-patch-21",
     "@tippyjs/react": "^4.2.6",
     "@types/regenerator-runtime": "^0.13.6",