@fileverse-dev/fortune-react 1.1.55 → 1.1.57

package/es/components/SheetOverlay/LucideIcon.js

@@ -0,0 +1,45 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  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 cn from "classnames";
+import React, { forwardRef } from "react";
+import { LucideIcons } from "./Icon";
+export var UltimateIcons = __assign({}, LucideIcons);
+export var LucideIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var name = _a.name,
+    className = _a.className,
+    strokeWidth = _a.strokeWidth,
+    size = _a.size,
+    fill = _a.fill,
+    stroke = _a.stroke,
+    props = __rest(_a, ["name", "className", "strokeWidth", "size", "fill", "stroke"]);
+  var buttonSize = size === "sm" ? "w-6 h-6" : size === "lg" ? "w-10 h-10" : "w-8 h-8";
+  var IconComponent = UltimateIcons[name];
+  if (!IconComponent) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(IconComponent, __assign({
+    name: name,
+    ref: ref,
+    className: cn(buttonSize, className),
+    strokeWidth: strokeWidth || 2,
+    fill: fill || "none",
+    stroke: stroke || "currentColor"
+  }, props));
+});
+LucideIcon.displayName = "LucideIcon";

package/es/components/SheetOverlay/index.css

@@ -950,3 +950,18 @@
   pointer-events: none;
   user-select: none;
 }
+
+.luckysheet-hint {
+  /* position: absolute; */
+  top: -18px;
+  left: 0;
+  background-color: #efc703;
+  color: #000000;
+  padding: 2px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  z-index: 20;
+  pointer-events: none;
+  user-select: none;
+}

package/lib/components/SheetOverlay/FormulaHint/dragable-div.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface DraggableDivProps {
+    children?: React.ReactNode;
+    className?: string;
+    initialTop?: any;
+    dragHasMoved?: any;
+}
+export declare const DraggableDiv: ({ children, className, initialTop, dragHasMoved, }: DraggableDivProps) => React.JSX.Element;
+export {};

package/lib/components/SheetOverlay/FormulaHint/dragable-div.js

@@ -0,0 +1,132 @@
+"use strict";
+"use client";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DraggableDiv = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ui = require("@fileverse/ui");
+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 DraggableDiv = exports.DraggableDiv = function DraggableDiv(_a) {
+  var children = _a.children,
+    className = _a.className,
+    initialTop = _a.initialTop,
+    dragHasMoved = _a.dragHasMoved;
+  var initialX = 0;
+  var initialY = initialTop;
+  var _b = (0, _react.useState)({
+      x: initialX,
+      y: initialY
+    }),
+    position = _b[0],
+    setPosition = _b[1];
+  var _c = (0, _react.useState)(false),
+    isDragging = _c[0],
+    setIsDragging = _c[1];
+  var _d = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    dragOffset = _d[0],
+    setDragOffset = _d[1];
+  var divRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    setPosition({
+      x: position.x,
+      y: initialTop
+    });
+  }, [initialTop]);
+  var handleMouseDown = function handleMouseDown(e) {
+    setIsDragging(true);
+    var element = document.getElementById("luckysheet-formula-help-c");
+    if (element) {
+      element.style.userSelect = "none";
+    }
+    setDragOffset({
+      x: e.clientX - position.x,
+      y: e.clientY - position.y
+    });
+  };
+  var handleTouchStart = function handleTouchStart(e) {
+    setIsDragging(true);
+    var element = document.getElementById("luckysheet-formula-help-c");
+    if (element) {
+      element.style.userSelect = "none";
+    }
+    var touch = e.touches[0];
+    setDragOffset({
+      x: touch.clientX - position.x,
+      y: touch.clientY - position.y
+    });
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    if (!isDragging) return;
+    e.preventDefault();
+    dragHasMoved.current = true;
+    setPosition(function () {
+      var newX = e.clientX - dragOffset.x;
+      var newY = e.clientY - dragOffset.y;
+      return {
+        x: newX * 1.3,
+        y: newY * 1.3
+      };
+    });
+  };
+  var handleTouchMove = function handleTouchMove(e) {
+    if (!isDragging) return;
+    e.preventDefault();
+    dragHasMoved.current = true;
+    var touch = e.touches[0];
+    setPosition(function () {
+      var newX = touch.clientX - dragOffset.x;
+      var newY = touch.clientY - dragOffset.y;
+      return {
+        x: newX * 1.3,
+        y: newY * 1.3
+      };
+    });
+  };
+  var handleMouseUp = function handleMouseUp() {
+    setIsDragging(false);
+    var element = document.getElementById("luckysheet-formula-help-c");
+    if (element) {
+      element.style.userSelect = "auto";
+    }
+  };
+  var handleTouchEnd = function handleTouchEnd() {
+    setIsDragging(false);
+    var element = document.getElementById("luckysheet-formula-help-c");
+    if (element) {
+      element.style.userSelect = "auto";
+    }
+  };
+  _react.default.useEffect(function () {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("touchmove", handleTouchMove);
+      document.addEventListener("touchend", handleTouchEnd);
+    }
+    return function () {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: divRef,
+    className: (0, _ui.cn)("absolute select-none touch-none", isDragging ? "cursor-grabbing shadow-2xl z-50" : "cursor-grab shadow-lg", className),
+    style: {
+      left: "".concat(position.x, "px"),
+      top: "".concat(position.y, "px"),
+      height: "0px"
+    },
+    onMouseDown: handleMouseDown,
+    onMouseUp: handleMouseUp,
+    onTouchStart: handleTouchStart,
+    onTouchEnd: handleTouchEnd
+  }, children);
+};

package/lib/components/SheetOverlay/FormulaHint/index.css

@@ -9,6 +9,12 @@
   width: 300px;
 }
 
+.font-family-mono {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-weight: 500;
+  font-size: 14px;
+}
+
 /* .luckysheet-formula-help-c .luckysheet-formula-help-content {
   max-height: 300px;
   overflow-y: scroll;
@@ -29,25 +35,23 @@
 
 .luckysheet-formula-help-title,
 .luckysheet-formula-search-item-active {
-  padding: 10px !important;
+  padding: 4px 10px !important;
   font-size: small;
   /* background: #f8f9fa !important; */
   font-weight: 600;
   border-bottom: 0px !important;
   border-top: 0px !important;
+  border-radius: 4px;
 }
 
 .luckysheet-formula-help-c,
 .luckysheet-formula-search-c {
   padding: 6px;
   user-select: text;
-  border-radius: 10px;
   top: 25px;
   background: #ffff;
   min-width: 300px;
   /* max-width: 450px; */
-  border: 1px solid lavender;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 #luckysheet-formula-help-c {

package/lib/components/SheetOverlay/FormulaHint/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import "./index.css";
-declare const FormulaHint: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+declare const FormulaHint: (props: any) => React.JSX.Element | null;
 export default FormulaHint;

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

@@ -10,6 +10,7 @@ var _ui = require("@fileverse/ui");
 var _react = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("../../../context"));
 require("./index.css");
+var _dragableDiv = require("./dragable-div");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 __assign = void 0 && (void 0).__assign || function () {
@@ -24,6 +25,9 @@ var __assign = void 0 && (void 0).__assign || function () {
 };
 var FormulaHint = function FormulaHint(props) {
   var _a;
+  var showFormulaHint = props.showFormulaHint,
+    handleShowFormulaHint = props.handleShowFormulaHint;
+  var dragHasMoved = (0, _react.useRef)(false);
   var context = (0, _react.useContext)(_context.default).context;
   var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
   var formulaMore = (0, _fortuneCore.locale)(context).formulaMore;
@@ -37,7 +41,8 @@ var FormulaHint = function FormulaHint(props) {
   var _d = (0, _react.useState)(!!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY)),
     isKeyAdded = _d[0],
     setApiKeyAdded = _d[1];
-  var _e = (0, _react.useState)(true),
+  var formulaExpand = localStorage.getItem("formula-expand") === "true";
+  var _e = (0, _react.useState)(formulaExpand),
     showFunctionBody = _e[0],
     setShouldShowFunctionBody = _e[1];
   (0, _react.useEffect)(function () {
@@ -54,6 +59,9 @@ var FormulaHint = function FormulaHint(props) {
   var _f = (0, _react.useState)(0),
     top = _f[0],
     setTop = _f[1];
+  var _g = (0, _react.useState)(false),
+    showDelayedHint = _g[0],
+    setShowDelayedHint = _g[1];
   var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
     var _a, _b, _c;
     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;
@@ -67,7 +75,14 @@ var FormulaHint = function FormulaHint(props) {
   };
   (0, _react.useEffect)(function () {
     calcuatePopUpPlacement();
-  });
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (!top) {
+      setTimeout(function () {
+        setShowDelayedHint(true);
+      }, 40);
+    }
+  }, [top]);
   (0, _react.useEffect)(function () {
     var el = document.getElementById("function-details");
     var handleWheel;
@@ -103,12 +118,44 @@ var FormulaHint = function FormulaHint(props) {
     };
   }, []);
   if (!fn) return null;
-  return /*#__PURE__*/_react.default.createElement("div", __assign({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_dragableDiv.DraggableDiv, {
+    initialTop: top,
+    dragHasMoved: dragHasMoved,
+    className: "bg-secondary text-secondary-foreground p-4 rounded-lg flex items-center justify-center ".concat(showDelayedHint ? "opacity-100" : "opacity-0")
+  }, showFormulaHint && (/*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "flex items-center justify-center w-4 h-4 rounded-full",
+    style: {
+      backgroundColor: "black",
+      zIndex: 2000,
+      position: "absolute",
+      left: "327px",
+      top: "-8px"
+    },
+    onClick: handleShowFormulaHint,
+    "aria-label": "Close formula hint"
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    className: " text-white",
+    style: {
+      width: "12px",
+      height: "12px"
+    },
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "3"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M6 18L18 6M6 6l12 12"
+  }))), /*#__PURE__*/_react.default.createElement("div", __assign({}, props, {
     ref: hintRef,
     id: "luckysheet-formula-help-c",
     className: "luckysheet-formula-help-c",
     style: {
-      top: top,
+      top: "0px",
+      left: "0px",
       borderWidth: "1px",
       borderColor: (fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR) ? fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR : "#F8F9FA",
       backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
@@ -129,9 +176,13 @@ var FormulaHint = function FormulaHint(props) {
     "aria-hidden": "true"
   })), /*#__PURE__*/_react.default.createElement("div", {
     onClick: function onClick() {
-      setShouldShowFunctionBody(!showFunctionBody);
+      if (!dragHasMoved.current) {
+        localStorage.setItem("formula-expand", "".concat(!showFunctionBody));
+        setShouldShowFunctionBody(!showFunctionBody);
+      }
+      dragHasMoved.current = false;
     },
-    className: "flex cursor-pointer items-center justify-between",
+    className: "flex cursor-pointer items-start justify-between",
     style: {
       backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
       padding: "10px",
@@ -143,11 +194,11 @@ var FormulaHint = function FormulaHint(props) {
     style: {
       fontWeight: 500
     },
-    className: "luckysheet-arguments-help-function-name"
+    className: "luckysheet-arguments-help-function-name font-family-mono mb-1 mt-2 color-text-default font-family-mono"
   }, fn.n), /*#__PURE__*/_react.default.createElement("code", {
-    className: "luckysheet-arguments-paren"
+    className: "luckysheet-arguments-paren font-family-mono mb-1 mt-2 color-text-default"
   }, "("), /*#__PURE__*/_react.default.createElement("code", {
-    className: "luckysheet-arguments-parameter-holder"
+    className: "luckysheet-arguments-parameter-holder font-family-mono mb-1 mt-2 color-text-default"
   }, fn.p.map(function (param, i) {
     var name = param.name;
     if (param.repeat === "y") {
@@ -157,12 +208,12 @@ var FormulaHint = function FormulaHint(props) {
       name = "[".concat(name, "]");
     }
     return /*#__PURE__*/_react.default.createElement("code", {
-      className: "luckysheet-arguments-help-parameter",
+      className: "luckysheet-arguments-help-parameter font-family-mono mb-1 mt-2 color-text-default",
       dir: "auto",
       key: name
     }, name, i !== fn.p.length - 1 && ", ");
   })), /*#__PURE__*/_react.default.createElement("code", {
-    className: "luckysheet-arguments-paren"
+    className: "luckysheet-arguments-paren font-family-mono mb-1 mt-2 color-text-default"
   }, ")")), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: "flex",
@@ -208,14 +259,15 @@ var FormulaHint = function FormulaHint(props) {
     id: "function-details",
     style: {
       backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
-      maxHeight: "318px",
+      maxHeight: "284px",
       overflowY: "scroll"
     }
   }, fn.API_KEY && (/*#__PURE__*/_react.default.createElement("div", {
     style: {
       borderLeft: "4px solid ".concat(isKeyAdded ? "#177E23" : "#fb923c"),
       backgroundColor: "white",
-      padding: "16px",
+      padding: "8px",
+      paddingBottom: "2px",
       margin: "4px 4px 0px 4px",
       borderRadius: "4px"
     }
@@ -254,7 +306,7 @@ var FormulaHint = function FormulaHint(props) {
       setApiKeyAdded(false);
     }
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex justify-end mt-2"
+    className: "flex justify-end mt-2 mb-2"
   }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
     onClick: function onClick() {
       localStorage.setItem(fn.API_KEY, API_KEY);
@@ -268,16 +320,17 @@ var FormulaHint = function FormulaHint(props) {
       backgroundColor: "white",
       padding: "6px",
       margin: "4px 4px 0px 4px",
-      borderRadius: "4px"
+      borderRadius: "4px",
+      marginTop: "-1px"
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: ""
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       lineHeight: "16px",
-      fontSize: "12px"
+      fontSize: "14px"
     },
-    className: "text-body-sm-bold mb-1 color-text-secondary"
+    className: "font-family-mono mb-1 color-text-default jetbrains-mono"
   }, formulaMore.helpExample), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("code", {
     style: {
       overflowWrap: "break-word"
@@ -307,10 +360,10 @@ var FormulaHint = function FormulaHint(props) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       lineHeight: "16px",
-      fontSize: "12px",
+      fontSize: "14px",
       padding: "0px"
     },
-    className: "text-body-sm-bold mb-1 mt-2 color-text-secondary"
+    className: "font-family-mono mb-1 mt-2 color-text-default"
   }, "About"), /*#__PURE__*/_react.default.createElement("span", {
     className: "luckysheet-arguments-help-parameter-content text-helper-text-sm"
   }, fn.d))), /*#__PURE__*/_react.default.createElement("div", {
@@ -322,7 +375,9 @@ var FormulaHint = function FormulaHint(props) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "",
       key: param.name
-    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("code", null, param.name, param.repeat === "y" && (/*#__PURE__*/_react.default.createElement("span", {
+    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("code", {
+      className: "font-family-mono mb-1 mt-2 color-text-default font-family-mono"
+    }, param.name, param.repeat === "y" && (/*#__PURE__*/_react.default.createElement("span", {
       className: "luckysheet-arguments-help-argument-info example-value",
       style: {
         marginTop: "2px"
@@ -338,7 +393,7 @@ var FormulaHint = function FormulaHint(props) {
         marginTop: "2px"
       }
     }, param.detail));
-  }))))), /*#__PURE__*/_react.default.createElement("div", {
+  }))))), showFunctionBody && (/*#__PURE__*/_react.default.createElement("div", {
     style: {
       backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
       padding: "8px",
@@ -352,6 +407,6 @@ var FormulaHint = function FormulaHint(props) {
       (_a = document.getElementById("function-button")) === null || _a === void 0 ? void 0 : _a.click();
     },
     className: "color-text-link cursor-pointer text-helper-text-sm"
-  }, "Learn More")));
+  }, "Learn More")))))));
 };
 var _default = exports.default = FormulaHint;

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

@@ -1,14 +1,24 @@
-.luckysheet-formula-search-c {
+.luckysheet-formula-search-c-p {
   position: absolute;
-  border: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   color: #535353;
   font-size: 12px;
   background: #fff;
   z-index: 1003;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  border: 1px solid lavender;
+  border-radius: 10px;
+}
+
+.luckysheet-formula-search-c {
+  color: #535353;
+  font-size: 12px;
+  background: #fff;
   width: 300px;
-  max-height: 360px;
+  max-height: 380px;
   overflow-y: auto;
+    border-radius: 10px;
+
 }
 
 .luckysheet-formula-search-c .luckysheet-formula-search-item {

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

@@ -28,7 +28,7 @@ var FormulaSearch = function FormulaSearch(props) {
   var _b = (0, _react.useContext)(_context.default),
     context = _b.context,
     isAuthorized = _b.settings.isAuthorized;
-  var authedFunction = ["COINGECKO", "ETHERSCAN", "DEFILLAMA", "GNOSIS", "BASE", "EOA", "PNL", "SAFE", "BLOCKSCOUT", "GNOSIS", "LENS", "FARCASTER", "Ethereum", "SMARTCONTRACT", "DUNESIM"];
+  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);
   });
@@ -53,19 +53,22 @@ var FormulaSearch = function FormulaSearch(props) {
     var hintAbove = hintHeight > availableBelow;
     var selectionHeight = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0;
     var divOffset = ((_c = hintRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) || 0;
-    setTop(hintAbove ? selectionHeight - (divOffset + 30) : selectionHeight + 4);
+    var topV = hintAbove ? selectionHeight - (divOffset + 80) : selectionHeight + 4;
+    setTop(topV);
   };
   (0, _react.useEffect)(function () {
     calcuatePopUpPlacement();
   });
   if (_lodash.default.isEmpty(context.functionCandidates) && _lodash.default.isEmpty(context.defaultCandidates)) return null;
-  return /*#__PURE__*/_react.default.createElement("div", __assign({}, props, {
-    ref: hintRef,
-    id: "luckysheet-formula-search-c",
-    className: "luckysheet-formula-search-c",
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex flex-col luckysheet-formula-search-c-p",
     style: {
       top: top
     }
+  }, /*#__PURE__*/_react.default.createElement("div", __assign({}, props, {
+    ref: hintRef,
+    id: "luckysheet-formula-search-c",
+    className: "luckysheet-formula-search-c"
   }), context.defaultCandidates.length > 0 && (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       marginBottom: "4px"
@@ -109,14 +112,14 @@ var FormulaSearch = function FormulaSearch(props) {
         height: "16px"
       }
     });
-  })))))), context.defaultCandidates.length > 0 ? (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, finalDefaultCandidates.map(function (v) {
+  })))))), context.defaultCandidates.length > 0 ? (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, finalDefaultCandidates.map(function (v, index) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: v.n,
       "data-func": v.n,
       style: {
         cursor: "pointer"
       },
-      className: "luckysheet-formula-search-item"
+      className: "luckysheet-formula-search-item ".concat(index === 0 ? "luckysheet-formula-search-item-active" : "")
     }, /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",
@@ -164,11 +167,11 @@ var FormulaSearch = function FormulaSearch(props) {
     })))))), /*#__PURE__*/_react.default.createElement("div", {
       className: "luckysheet-formula-search-detail mt-1 text-helper-text-sm  color-text-default"
     }, v.d));
-  }))) : (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, finalFunctionCandidates.length > 0 && finalFunctionCandidates.map(function (v) {
+  }))) : (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, finalFunctionCandidates.length > 0 && finalFunctionCandidates.map(function (v, index) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: v.n,
       "data-func": v.n,
-      className: "luckysheet-formula-search-item"
+      className: "luckysheet-formula-search-item ".concat(index === 0 ? "luckysheet-formula-search-item-active" : "")
     }, /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",
@@ -253,8 +256,10 @@ var FormulaSearch = function FormulaSearch(props) {
         height: "16px"
       }
     });
-  })))))))), /*#__PURE__*/_react.default.createElement("hr", {
-    className: "color-border-default mb-2 mt-4 "
+  }))))))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-2 pt-0"
+  }, /*#__PURE__*/_react.default.createElement("hr", {
+    className: "color-border-default mb-2"
   }), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       paddingLeft: "10px",
@@ -265,6 +270,6 @@ var FormulaSearch = function FormulaSearch(props) {
     className: "border p-1 color-text-default rounded"
   }, "Tab"), /*#__PURE__*/_react.default.createElement("p", {
     className: "color-text-secondary"
-  }, "to insert")));
+  }, "to insert"))));
 };
 var _default = exports.default = FormulaSearch;

package/lib/components/SheetOverlay/Icon.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { LucideIconProps } from "./LucideIcon";
+export declare const LucideIcons: {
+    File3d: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
+    FileWord: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
+    FilePdf: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
+    FilePpt: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
+    FileExcel: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
+    Section: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
+    XSocial: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
+    Farcaster: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
+    Warpcast: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
+    DSheetTextDisabled: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
+    Orb: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
+    Lens: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
+    Hey: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
+    CloudSaved: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
+};