@fileverse-dev/fortune-react 1.3.11-input-ref-1 → 1.3.11-input-ref-2

package/es/components/FxEditor/index.js

@@ -1,4 +1,4 @@
-import { getFlowdata, cancelNormalSelected, getCellValue, updateCell, getInlineStringNoStyle, isInlineStringCell, escapeScriptTag, moveHighlightCell, handleFormulaInput, getFormulaRangeIndexAtCaret, isCaretAtValidFormulaRangeInsertionPoint, markRangeSelectionDirty, rangeHightlightselected, getFormulaEditorOwner, setFormulaEditorOwner, valueShowEs, isShowHidenCR, escapeHTMLTag, functionHTMLGenerate, isAllowEdit } from "@fileverse-dev/fortune-core";
+import { getFlowdata, cancelNormalSelected, getCellValue, updateCell, getInlineStringNoStyle, isInlineStringCell, escapeScriptTag, moveHighlightCell, handleFormulaInput, getFormulaRangeIndexAtCaret, isCaretAtValidFormulaRangeInsertionPoint, markRangeSelectionDirty, rangeHightlightselected, getFormulaEditorOwner, setFormulaEditorOwner, createRangeHightlight, valueShowEs, isShowHidenCR, escapeHTMLTag, functionHTMLGenerate, isAllowEdit, suppressFormulaRangeSelectionForInitialEdit } from "@fileverse-dev/fortune-core";
 import React, { useContext, useState, useCallback, useEffect, useLayoutEffect, useRef, useMemo } from "react";
 import "./index.css";
 import _ from "lodash";
@@ -46,6 +46,7 @@ var FxEditor = function FxEditor() {
   var prevCellUpdate = usePrevious(context.luckysheetCellUpdate);
   var prevSheetId = usePrevious(context.currentSheetId);
   var recentText = useRef("");
+  var formulaAnchorCellRef = useRef(null);
   var handleShowFormulaHint = function handleShowFormulaHint() {
     localStorage.setItem("formulaMore", String(showFormulaHint));
     setShowFormulaHint(!showFormulaHint);
@@ -111,13 +112,20 @@ var FxEditor = function FxEditor() {
     if (_.isNil(rowIndex) || _.isNil(colIndex)) {
       return;
     }
+    var pending = refs.globalCache.pendingTypeOverCell;
+    if (pending && pending[0] === rowIndex && pending[1] === colIndex) {
+      refs.globalCache.overwriteCell = false;
+      refs.globalCache.ignoreWriteCell = false;
+      return;
+    }
     var flowdata = getFlowdata(context);
     if (!flowdata) {
       return;
     }
     var cell = (_a = flowdata === null || flowdata === void 0 ? void 0 : flowdata[rowIndex]) === null || _a === void 0 ? void 0 : _a[colIndex];
     var value = "";
-    if (cell && !refs.globalCache.overwriteCell) {
+    var overwrite = refs.globalCache.overwriteCell;
+    if (cell && !overwrite) {
       if (isInlineStringCell(cell)) {
         value = getInlineStringNoStyle(rowIndex, colIndex, flowdata);
       } else if (cell.f) {
@@ -129,7 +137,7 @@ var FxEditor = function FxEditor() {
     refs.globalCache.overwriteCell = false;
     if (!refs.globalCache.ignoreWriteCell && value) {
       fxInput.innerHTML = escapeHTMLTag(escapeScriptTag(value));
-    } else if (!refs.globalCache.ignoreWriteCell) {
+    } else if (!refs.globalCache.ignoreWriteCell && !overwrite) {
       var valueD = getCellValue(rowIndex, colIndex, flowdata, "f");
       fxInput.innerText = valueD;
     }
@@ -137,9 +145,21 @@ var FxEditor = function FxEditor() {
   }, [context.luckysheetCellUpdate, context.luckysheetfile, context.currentSheetId, prevCellUpdate, prevSheetId, refs.fxInput, refs.globalCache]);
   useEffect(function () {
     if (_.isEmpty(context.luckysheetCellUpdate)) {
+      delete refs.globalCache.pendingTypeOverCell;
       resetFormulaHistory();
     }
-  }, [context.luckysheetCellUpdate, resetFormulaHistory]);
+  }, [context.luckysheetCellUpdate, resetFormulaHistory, refs.globalCache]);
+  useEffect(function () {
+    var _a;
+    if (_.isEmpty(context.luckysheetCellUpdate) || !refs.fxInput.current) {
+      formulaAnchorCellRef.current = null;
+      return;
+    }
+    var inputText = ((_a = refs.fxInput.current.innerText) === null || _a === void 0 ? void 0 : _a.trim()) || "";
+    if (!inputText.startsWith("=")) {
+      formulaAnchorCellRef.current = null;
+    }
+  }, [context.luckysheetCellUpdate, refs.fxInput]);
   var onFocus = useCallback(function () {
     var _a, _b;
     if (context.allowEdit === false) {
@@ -147,12 +167,25 @@ var FxEditor = function FxEditor() {
     }
     if (((_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 && !context.luckysheet_cell_selected_move && isAllowEdit(context, context.luckysheet_select_save)) {
       setContext(function (draftCtx) {
+        var _a;
         setFormulaEditorOwner(draftCtx, "fx");
         var last = draftCtx.luckysheet_select_save[draftCtx.luckysheet_select_save.length - 1];
         var row_index = last.row_focus;
         var col_index = last.column_focus;
-        draftCtx.luckysheetCellUpdate = [row_index, col_index];
-        refs.globalCache.doNotFocus = true;
+        if (!_.isNil(row_index) && !_.isNil(col_index)) {
+          var flowdata = getFlowdata(draftCtx);
+          var cellAt = (_a = flowdata === null || flowdata === void 0 ? void 0 : flowdata[row_index]) === null || _a === void 0 ? void 0 : _a[col_index];
+          if ((cellAt === null || cellAt === void 0 ? void 0 : cellAt.f) != null && String(cellAt.f).trim() !== "") {
+            suppressFormulaRangeSelectionForInitialEdit(draftCtx);
+          }
+        }
+        var currentUpdate = draftCtx.luckysheetCellUpdate || [];
+        var alreadyEditingSameCell = currentUpdate.length === 2 && currentUpdate[0] === row_index && currentUpdate[1] === col_index;
+        if (!alreadyEditingSameCell) {
+          refs.globalCache.doNotUpdateCell = true;
+          draftCtx.luckysheetCellUpdate = [row_index, col_index];
+          refs.globalCache.doNotFocus = true;
+        }
       });
     }
     setContext(function (draftCtx) {
@@ -212,6 +245,25 @@ var FxEditor = function FxEditor() {
   }, [getActiveFormula, insertSelectedFormula]);
   var onKeyDown = useCallback(function (e) {
     var _a, _b, _c;
+    if (e.key === "Delete" || e.key === "Backspace") {
+      var anchor = formulaAnchorCellRef.current;
+      if (anchor != null) {
+        var anchorRow_1 = anchor[0],
+          anchorCol_1 = anchor[1];
+        setTimeout(function () {
+          setContext(function (draftCtx) {
+            draftCtx.luckysheetCellUpdate = [anchorRow_1, anchorCol_1];
+            draftCtx.luckysheet_select_save = [{
+              row: [anchorRow_1, anchorRow_1],
+              column: [anchorCol_1, anchorCol_1],
+              row_focus: anchorRow_1,
+              column_focus: anchorCol_1
+            }];
+            markRangeSelectionDirty(draftCtx);
+          });
+        }, 0);
+      }
+    }
     if (context.allowEdit === false) {
       return;
     }
@@ -225,6 +277,46 @@ var FxEditor = function FxEditor() {
     recentText.current = refs.fxInput.current.innerText;
     var key = e.key;
     var currentInputText = ((_c = (_b = refs.fxInput.current) === null || _b === void 0 ? void 0 : _b.innerText) === null || _c === void 0 ? void 0 : _c.trim()) || "";
+    if ((key === "=" || currentInputText.startsWith("=")) && context.luckysheetCellUpdate.length === 2 && formulaAnchorCellRef.current == null) {
+      setContext(function (draftCtx) {
+        draftCtx.formulaCache.rangeSelectionActive = null;
+      });
+      formulaAnchorCellRef.current = [context.luckysheetCellUpdate[0], context.luckysheetCellUpdate[1]];
+    }
+    if (key === "(" && currentInputText.startsWith("=")) {
+      setContext(function (draftCtx) {
+        draftCtx.formulaCache.rangeSelectionActive = null;
+      });
+    }
+    if (key === "," && context.luckysheetCellUpdate.length > 0 && currentInputText.startsWith("=") && formulaAnchorCellRef.current) {
+      setContext(function (draftCtx) {
+        draftCtx.formulaCache.rangeSelectionActive = null;
+      });
+      var _d = formulaAnchorCellRef.current,
+        anchorRow_2 = _d[0],
+        anchorCol_2 = _d[1];
+      setTimeout(function () {
+        setContext(function (draftCtx) {
+          var _a, _b;
+          draftCtx.luckysheetCellUpdate = [anchorRow_2, anchorCol_2];
+          draftCtx.luckysheet_select_save = [{
+            row: [anchorRow_2, anchorRow_2],
+            column: [anchorCol_2, anchorCol_2],
+            row_focus: anchorRow_2,
+            column_focus: anchorCol_2
+          }];
+          draftCtx.formulaRangeSelect = undefined;
+          draftCtx.formulaCache.selectingRangeIndex = -1;
+          draftCtx.formulaCache.func_selectedrange = undefined;
+          draftCtx.formulaCache.rangechangeindex = undefined;
+          draftCtx.formulaCache.rangestart = false;
+          draftCtx.formulaCache.rangedrag_column_start = false;
+          draftCtx.formulaCache.rangedrag_row_start = false;
+          createRangeHightlight(draftCtx, ((_a = refs.fxInput.current) === null || _a === void 0 ? void 0 : _a.innerHTML) || ((_b = refs.cellInput.current) === null || _b === void 0 ? void 0 : _b.innerHTML) || "");
+          moveHighlightCell(draftCtx, "down", 0, "rangeOfSelect");
+        });
+      }, 0);
+    }
     if (key === "ArrowLeft" || key === "ArrowRight") {
       e.stopPropagation();
     }
@@ -252,7 +344,7 @@ var FxEditor = function FxEditor() {
       }
       return;
     }
-    if (e.key === "ArrowUp" && context.luckysheetCellUpdate.length > 0) {
+    if (!(e.metaKey || e.ctrlKey) && e.key === "ArrowUp" && context.luckysheetCellUpdate.length > 0) {
       if (document.getElementById("luckysheet-formula-search-c")) {
         var formulaSearchContainer = document.getElementById("luckysheet-formula-search-c");
         var activeItem = formulaSearchContainer === null || formulaSearchContainer === void 0 ? void 0 : formulaSearchContainer.querySelector(".luckysheet-formula-search-item-active");
@@ -271,7 +363,7 @@ var FxEditor = function FxEditor() {
         }
       }
       e.preventDefault();
-    } else if (e.key === "ArrowDown" && context.luckysheetCellUpdate.length > 0) {
+    } else if (!(e.metaKey || e.ctrlKey) && e.key === "ArrowDown" && context.luckysheetCellUpdate.length > 0) {
       if (document.getElementById("luckysheet-formula-search-c")) {
         var formulaSearchContainer = document.getElementById("luckysheet-formula-search-c");
         var activeItem = formulaSearchContainer === null || formulaSearchContainer === void 0 ? void 0 : formulaSearchContainer.querySelector(".luckysheet-formula-search-item-active");
@@ -330,7 +422,7 @@ var FxEditor = function FxEditor() {
         }
       }
     });
-  }, [capturePreFormulaState, context.allowEdit, context.luckysheetCellUpdate.length, handleFormulaHistoryUndoRedo, refs.fxInput, setContext]);
+  }, [capturePreFormulaState, context.allowEdit, context.luckysheetCellUpdate, handleFormulaHistoryUndoRedo, refs.cellInput, refs.fxInput, setContext]);
   var handleHideShowHint = function handleHideShowHint() {
     var _a, _b, _c, _d;
     var el = (_a = document.getElementsByClassName("cell-hint")) === null || _a === void 0 ? void 0 : _a[0];
@@ -351,11 +443,18 @@ var FxEditor = function FxEditor() {
     }
   };
   var onChange = useCallback(function () {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (context.isFlvReadOnly) return;
+    var fxEl = refs.fxInput.current;
+    if (fxEl && context.luckysheetCellUpdate.length === 2 && formulaAnchorCellRef.current == null) {
+      var t = ((_a = fxEl.innerText) === null || _a === void 0 ? void 0 : _a.trim()) || "";
+      if (t.startsWith("=")) {
+        formulaAnchorCellRef.current = [context.luckysheetCellUpdate[0], context.luckysheetCellUpdate[1]];
+      }
+    }
     handleHideShowHint();
-    setShowSearchHint(shouldShowFormulaFunctionList((_b = (_a = refs.fxInput) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : null));
-    var currentCommaCount = countCommasBeforeCursor((_c = refs.fxInput) === null || _c === void 0 ? void 0 : _c.current);
+    setShowSearchHint(shouldShowFormulaFunctionList((_c = (_b = refs.fxInput) === null || _b === void 0 ? void 0 : _b.current) !== null && _c !== void 0 ? _c : null));
+    var currentCommaCount = countCommasBeforeCursor((_d = refs.fxInput) === null || _d === void 0 ? void 0 : _d.current);
     setCommaCount(currentCommaCount);
     var e = lastKeyDownEventRef.current;
     if (!e) {
@@ -390,7 +489,7 @@ var FxEditor = function FxEditor() {
         handleFormulaInput(draftCtx, refs.cellInput.current, refs.fxInput.current, kcode, recentText.current);
       });
     }
-  }, [appendFormulaHistoryFromPrimaryEditor, context.isFlvReadOnly, refs.cellInput, refs.fxInput, setContext]);
+  }, [appendFormulaHistoryFromPrimaryEditor, context.isFlvReadOnly, context.luckysheetCellUpdate, refs.cellInput, refs.fxInput, setContext]);
   useRerenderOnFormulaCaret(refs.fxInput, context.luckysheetCellUpdate.length > 0);
   var getFunctionNameFromInput = useCallback(function () {
     var _a, _b, _c, _d;
@@ -445,7 +544,7 @@ var FxEditor = function FxEditor() {
     document.addEventListener("mouseup", _onMouseUp);
   };
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-fx-editor",
+    className: showFxFormulaChrome ? "fortune-fx-editor fortune-fx-editor--formula-owner" : "fortune-fx-editor",
     ref: divRef
   }, /*#__PURE__*/React.createElement(NameBox, null), /*#__PURE__*/React.createElement("div", {
     className: "fortune-fx-icon",

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

@@ -10,7 +10,7 @@ var __assign = this && this.__assign || function () {
 };
 import { locale } from "@fileverse-dev/fortune-core";
 import { Button, TextField, LucideIcon, Tooltip } from "@fileverse/ui";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import WorkbookContext from "../../../context";
 import "./index.css";
 import { DraggableDiv } from "./dragable-div";
@@ -49,29 +49,49 @@ var FormulaHint = function FormulaHint(props) {
     ETHERSCAN_API_KEY: "Etherscan API key"
   };
   var hintRef = useRef(null);
-  var _h = useState(0),
+  var cellHeightPx = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) != null ? Number(firstSelection.height_move) : 24;
+  var belowCellTop = cellHeightPx + 4;
+  var _h = useState(belowCellTop),
     top = _h[0],
     setTop = _h[1];
   var _j = useState(false),
     showDelayedHint = _j[0],
     setShowDelayedHint = _j[1];
-  var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
-    var _a, _b, _c, _d, _e, _f;
-    if (!((_a = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) === null || _a === void 0 ? void 0 : _a.toString()) || !((_b = firstSelection.height_move) === null || _b === void 0 ? void 0 : _b.toString()) || !hintRef.current) return;
-    var hintHeight = 360;
-    var inputBoxTop = parseInt(((_c = document.getElementById("luckysheet-input-box")) === null || _c === void 0 ? void 0 : _c.style.top) || "0", 10) - 85;
-    var inputBottom = inputBoxTop + firstSelection.height_move;
-    var availableBelow = window.innerHeight - inputBottom;
-    var hintAbove = hintHeight > availableBelow;
-    var selectionHeight = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0;
-    var divOffset = ((_d = hintRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) || 0;
-    var topV = hintAbove ? selectionHeight - (divOffset + 30) : selectionHeight + 4;
-    var el = (_e = document.getElementsByClassName("fx-hint")) === null || _e === void 0 ? void 0 : _e[0];
-    if (el && ((_f = el === null || el === void 0 ? void 0 : el.style) === null || _f === void 0 ? void 0 : _f.display) !== "none") {
+  var measureFormulaHintPlacement = useCallback(function () {
+    var _a;
+    if ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) == null || firstSelection.height_move == null) {
+      setTop(belowCellTop);
+      return;
+    }
+    var cellH = Number(firstSelection.height_move) || cellHeightPx;
+    var innerEl = hintRef.current;
+    var popupHeight = Math.min((innerEl === null || innerEl === void 0 ? void 0 : innerEl.offsetHeight) || 360, 360);
+    var inputBox = document.getElementById("luckysheet-input-box");
+    var rect = inputBox === null || inputBox === void 0 ? void 0 : inputBox.getBoundingClientRect();
+    if (!rect) {
+      setTop(cellH + 4);
+      return;
+    }
+    var cellBottomViewport = rect.top + cellH;
+    var availableBelow = window.innerHeight - cellBottomViewport - 12;
+    var preferBelow = popupHeight <= availableBelow;
+    var topV = preferBelow ? cellH + 4 : -(popupHeight + 8);
+    var fxHint = (_a = document.getElementsByClassName("fx-hint")) === null || _a === void 0 ? void 0 : _a[0];
+    if (fxHint && fxHint.style.display !== "none") {
       topV = 25;
     }
     setTop(topV);
-  };
+  }, [belowCellTop, cellHeightPx, firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move, firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top]);
+  useLayoutEffect(function () {
+    if (!fn) {
+      return undefined;
+    }
+    measureFormulaHintPlacement();
+    var id = requestAnimationFrame(measureFormulaHintPlacement);
+    return function () {
+      cancelAnimationFrame(id);
+    };
+  }, [functionName, context.functionHint, measureFormulaHintPlacement, showFormulaHint, commaCount, showFunctionBody]);
   var hexToRgbString = function hexToRgbString(hex) {
     hex = hex.replace("#", "");
     var r = parseInt(hex.substring(0, 2), 16);
@@ -84,14 +104,13 @@ var FormulaHint = function FormulaHint(props) {
     return bg;
   };
   useEffect(function () {
-    calcuatePopUpPlacement();
-  }, []);
-  useEffect(function () {
-    if (!top) {
-      setTimeout(function () {
-        setShowDelayedHint(true);
-      }, 40);
-    }
+    setShowDelayedHint(false);
+    var t = setTimeout(function () {
+      return setShowDelayedHint(true);
+    }, 40);
+    return function () {
+      return clearTimeout(t);
+    };
   }, [top]);
   if (!fn) return null;
   var fnNameClass = fn.n ? String(fn.n).replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-") : "";
@@ -174,7 +193,7 @@ var FormulaHint = function FormulaHint(props) {
         localStorage.setItem("formula-expand", "".concat(!showFunctionBody));
         setShouldShowFunctionBody(!showFunctionBody);
         setTimeout(function () {
-          calcuatePopUpPlacement();
+          measureFormulaHintPlacement();
         }, 50);
       }
       dragHasMoved.current = false;
@@ -277,6 +296,7 @@ var FormulaHint = function FormulaHint(props) {
       cursor: "auto"
     }
   }, fn.API_KEY && (/*#__PURE__*/React.createElement("div", {
+    className: "luckysheet-formula-help-content-api",
     style: {
       borderLeft: "4px solid ".concat(isKeyAdded ? "#177E23" : "#fb923c"),
       backgroundColor: "white",
@@ -340,6 +360,7 @@ var FormulaHint = function FormulaHint(props) {
     className: "fortune-formula-hint__cta min-w-[80px]",
     "data-testid": "formula-hint-cta-ok"
   }, "Ok"))))))), /*#__PURE__*/React.createElement("div", {
+    id: "luckysheet-formula-help-content-example",
     style: {
       backgroundColor: "white",
       padding: "6px",

package/es/components/SheetOverlay/FormulaSearch/index.d.ts

@@ -1,4 +1,6 @@
 import React from "react";
 import "./index.css";
-declare const FormulaSearch: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+declare const FormulaSearch: React.FC<React.HTMLAttributes<HTMLDivElement> & {
+    from?: string;
+}>;
 export default FormulaSearch;

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

@@ -8,17 +8,27 @@ var __assign = this && this.__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 import _ from "lodash";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useCallback, useContext, useLayoutEffect, useRef, useState } from "react";
 import { LucideIcon, Tooltip } from "@fileverse/ui";
 import { UNFilter } from "./constant";
 import WorkbookContext from "../../../context";
 import "./index.css";
-var FormulaSearch = function FormulaSearch(props) {
-  var _a;
-  var _b = useContext(WorkbookContext),
-    context = _b.context,
-    isAuthorized = _b.settings.isAuthorized;
+var FormulaSearch = function FormulaSearch(_a) {
+  var _b, _c, _d;
+  var from = _a.from,
+    divProps = __rest(_a, ["from"]);
+  var _e = useContext(WorkbookContext),
+    context = _e.context,
+    isAuthorized = _e.settings.isAuthorized;
   var authedFunction = ["COINGECKO", "ETHERSCAN", "DEFILLAMA", "GNOSIS", "BASE", "EOA", "PNL", "SAFE", "BLOCKSCOUT", "LENS", "FARCASTER", "Ethereum", "SMARTCONTRACT", "DUNESIM"];
   var filteredDefaultCandidates = context.defaultCandidates.filter(function (item) {
     return !authedFunction.includes(item.n);
@@ -30,39 +40,58 @@ var FormulaSearch = function FormulaSearch(props) {
   var finalFunctionCandidates = isAuthorized ? context.functionCandidates : context.functionCandidates.filter(function (item) {
     return item.t !== 20;
   });
-  var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
+  var firstSelection = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0];
+  var cellHeightPx = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) != null ? Number(firstSelection.height_move) : 24;
+  var belowCellTop = cellHeightPx + 4;
   var hintRef = useRef(null);
-  var _c = useState(0),
-    top = _c[0],
-    setTop = _c[1];
-  var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
-    var _a, _b, _c, _d, _e, _f;
-    if (!((_a = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) === null || _a === void 0 ? void 0 : _a.toString()) || !((_b = firstSelection.height_move) === null || _b === void 0 ? void 0 : _b.toString()) || !hintRef.current) return;
-    var hintHeight = 360;
-    var inputBoxTop = parseInt(((_c = document.getElementById("luckysheet-input-box")) === null || _c === void 0 ? void 0 : _c.style.top) || "0", 10) - 85;
-    var inputBottom = inputBoxTop + firstSelection.height_move;
-    var availableBelow = window.innerHeight - inputBottom;
-    var hintAbove = hintHeight > availableBelow;
-    var selectionHeight = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0;
-    var divOffset = ((_d = hintRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) || 0;
-    var topV = hintAbove ? selectionHeight - (divOffset + 80) : selectionHeight + 4;
-    var el = (_e = document.getElementsByClassName("fx-hint")) === null || _e === void 0 ? void 0 : _e[0];
-    if (el && ((_f = el === null || el === void 0 ? void 0 : el.style) === null || _f === void 0 ? void 0 : _f.display) !== "none") {
+  var _f = useState(belowCellTop),
+    top = _f[0],
+    setTop = _f[1];
+  var applyPlacement = useCallback(function () {
+    var _a;
+    if ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) == null || firstSelection.height_move == null) {
+      setTop(belowCellTop);
+      return;
+    }
+    var fromFx = from === "fx";
+    var cellH = Number(firstSelection.height_move) || cellHeightPx;
+    if (fromFx) {
+      setTop(25);
+      return;
+    }
+    var innerEl = hintRef.current;
+    var popupHeight = Math.min((innerEl === null || innerEl === void 0 ? void 0 : innerEl.offsetHeight) || 360, 360);
+    var inputBox = document.getElementById("luckysheet-input-box");
+    var rect = inputBox === null || inputBox === void 0 ? void 0 : inputBox.getBoundingClientRect();
+    if (!rect) {
+      setTop(cellH + 4);
+      return;
+    }
+    var cellBottomViewport = rect.top + cellH;
+    var availableBelow = window.innerHeight - cellBottomViewport - 12;
+    var preferBelow = popupHeight <= availableBelow;
+    var topV = preferBelow ? cellH + 4 : -(popupHeight + 8);
+    var fxHint = (_a = document.getElementsByClassName("fx-hint")) === null || _a === void 0 ? void 0 : _a[0];
+    if (fxHint && fxHint.style.display !== "none") {
       topV = 25;
     }
     setTop(topV);
-  };
-  useEffect(function () {
-    calcuatePopUpPlacement();
-  });
+  }, [belowCellTop, cellHeightPx, firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move, firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top, from]);
+  useLayoutEffect(function () {
+    applyPlacement();
+    var id = requestAnimationFrame(applyPlacement);
+    return function () {
+      cancelAnimationFrame(id);
+    };
+  }, [applyPlacement, (_c = context.defaultCandidates) === null || _c === void 0 ? void 0 : _c.length, (_d = context.functionCandidates) === null || _d === void 0 ? void 0 : _d.length, context.functionHint]);
   if (_.isEmpty(context.functionCandidates) && _.isEmpty(context.defaultCandidates)) return null;
   return /*#__PURE__*/React.createElement("div", {
-    className: "flex color-border-default border flex-col luckysheet-formula-search-c-p custom-scroll ".concat((props === null || props === void 0 ? void 0 : props.from) === "fx" ? "fx-search" : "cell-search"),
+    className: "flex color-border-default border flex-col luckysheet-formula-search-c-p custom-scroll ".concat(from === "fx" ? "fx-search" : "cell-search"),
     id: "luckysheet-formula-search-c-p",
     style: {
       top: top
     }
-  }, /*#__PURE__*/React.createElement("div", __assign({}, props, {
+  }, /*#__PURE__*/React.createElement("div", __assign({}, divProps, {
     ref: hintRef,
     id: "luckysheet-formula-search-c",
     className: "luckysheet-formula-search-c"