@fileverse-dev/fortune-react 1.1.55 → 1.1.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/es/components/SheetOverlay/FormulaHint/dragable-div.d.ts +9 -0
  2. package/es/components/SheetOverlay/FormulaHint/dragable-div.js +125 -0
  3. package/es/components/SheetOverlay/FormulaHint/index.css +8 -4
  4. package/es/components/SheetOverlay/FormulaHint/index.d.ts +1 -1
  5. package/es/components/SheetOverlay/FormulaHint/index.js +77 -22
  6. package/es/components/SheetOverlay/FormulaSearch/index.css +13 -3
  7. package/es/components/SheetOverlay/FormulaSearch/index.js +18 -13
  8. package/es/components/SheetOverlay/Icon.d.ts +18 -0
  9. package/es/components/SheetOverlay/Icon.js +383 -0
  10. package/es/components/SheetOverlay/InputBox.js +83 -25
  11. package/es/components/SheetOverlay/LucideIcon.d.ts +30 -0
  12. package/es/components/SheetOverlay/LucideIcon.js +45 -0
  13. package/es/components/SheetOverlay/index.css +15 -0
  14. package/lib/components/SheetOverlay/FormulaHint/dragable-div.d.ts +9 -0
  15. package/lib/components/SheetOverlay/FormulaHint/dragable-div.js +132 -0
  16. package/lib/components/SheetOverlay/FormulaHint/index.css +8 -4
  17. package/lib/components/SheetOverlay/FormulaHint/index.d.ts +1 -1
  18. package/lib/components/SheetOverlay/FormulaHint/index.js +77 -22
  19. package/lib/components/SheetOverlay/FormulaSearch/index.css +13 -3
  20. package/lib/components/SheetOverlay/FormulaSearch/index.js +18 -13
  21. package/lib/components/SheetOverlay/Icon.d.ts +18 -0
  22. package/lib/components/SheetOverlay/Icon.js +390 -0
  23. package/lib/components/SheetOverlay/InputBox.js +83 -25
  24. package/lib/components/SheetOverlay/LucideIcon.d.ts +30 -0
  25. package/lib/components/SheetOverlay/LucideIcon.js +54 -0
  26. package/lib/components/SheetOverlay/index.css +15 -0
  27. package/package.json +2 -2
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ interface DraggableDivProps {
3
+ children?: React.ReactNode;
4
+ className?: string;
5
+ initialTop?: any;
6
+ dragHasMoved?: any;
7
+ }
8
+ export declare const DraggableDiv: ({ children, className, initialTop, dragHasMoved, }: DraggableDivProps) => React.JSX.Element;
9
+ export {};
@@ -0,0 +1,125 @@
1
+ "use client";
2
+
3
+ import React, { useEffect, useState, useRef } from "react";
4
+ import { cn } from "@fileverse/ui";
5
+ export var DraggableDiv = function DraggableDiv(_a) {
6
+ var children = _a.children,
7
+ className = _a.className,
8
+ initialTop = _a.initialTop,
9
+ dragHasMoved = _a.dragHasMoved;
10
+ var initialX = 0;
11
+ var initialY = initialTop;
12
+ var _b = useState({
13
+ x: initialX,
14
+ y: initialY
15
+ }),
16
+ position = _b[0],
17
+ setPosition = _b[1];
18
+ var _c = useState(false),
19
+ isDragging = _c[0],
20
+ setIsDragging = _c[1];
21
+ var _d = useState({
22
+ x: 0,
23
+ y: 0
24
+ }),
25
+ dragOffset = _d[0],
26
+ setDragOffset = _d[1];
27
+ var divRef = useRef(null);
28
+ useEffect(function () {
29
+ setPosition({
30
+ x: position.x,
31
+ y: initialTop
32
+ });
33
+ }, [initialTop]);
34
+ var handleMouseDown = function handleMouseDown(e) {
35
+ setIsDragging(true);
36
+ var element = document.getElementById("luckysheet-formula-help-c");
37
+ if (element) {
38
+ element.style.userSelect = "none";
39
+ }
40
+ setDragOffset({
41
+ x: e.clientX - position.x,
42
+ y: e.clientY - position.y
43
+ });
44
+ };
45
+ var handleTouchStart = function handleTouchStart(e) {
46
+ setIsDragging(true);
47
+ var element = document.getElementById("luckysheet-formula-help-c");
48
+ if (element) {
49
+ element.style.userSelect = "none";
50
+ }
51
+ var touch = e.touches[0];
52
+ setDragOffset({
53
+ x: touch.clientX - position.x,
54
+ y: touch.clientY - position.y
55
+ });
56
+ };
57
+ var handleMouseMove = function handleMouseMove(e) {
58
+ if (!isDragging) return;
59
+ e.preventDefault();
60
+ dragHasMoved.current = true;
61
+ setPosition(function () {
62
+ var newX = e.clientX - dragOffset.x;
63
+ var newY = e.clientY - dragOffset.y;
64
+ return {
65
+ x: newX * 1.3,
66
+ y: newY * 1.3
67
+ };
68
+ });
69
+ };
70
+ var handleTouchMove = function handleTouchMove(e) {
71
+ if (!isDragging) return;
72
+ e.preventDefault();
73
+ dragHasMoved.current = true;
74
+ var touch = e.touches[0];
75
+ setPosition(function () {
76
+ var newX = touch.clientX - dragOffset.x;
77
+ var newY = touch.clientY - dragOffset.y;
78
+ return {
79
+ x: newX * 1.3,
80
+ y: newY * 1.3
81
+ };
82
+ });
83
+ };
84
+ var handleMouseUp = function handleMouseUp() {
85
+ setIsDragging(false);
86
+ var element = document.getElementById("luckysheet-formula-help-c");
87
+ if (element) {
88
+ element.style.userSelect = "auto";
89
+ }
90
+ };
91
+ var handleTouchEnd = function handleTouchEnd() {
92
+ setIsDragging(false);
93
+ var element = document.getElementById("luckysheet-formula-help-c");
94
+ if (element) {
95
+ element.style.userSelect = "auto";
96
+ }
97
+ };
98
+ React.useEffect(function () {
99
+ if (isDragging) {
100
+ document.addEventListener("mousemove", handleMouseMove);
101
+ document.addEventListener("mouseup", handleMouseUp);
102
+ document.addEventListener("touchmove", handleTouchMove);
103
+ document.addEventListener("touchend", handleTouchEnd);
104
+ }
105
+ return function () {
106
+ document.removeEventListener("mousemove", handleMouseMove);
107
+ document.removeEventListener("mouseup", handleMouseUp);
108
+ document.removeEventListener("touchmove", handleTouchMove);
109
+ document.removeEventListener("touchend", handleTouchEnd);
110
+ };
111
+ }, [isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
112
+ return /*#__PURE__*/React.createElement("div", {
113
+ ref: divRef,
114
+ className: cn("absolute select-none touch-none", isDragging ? "cursor-grabbing shadow-2xl z-50" : "cursor-grab shadow-lg", className),
115
+ style: {
116
+ left: "".concat(position.x, "px"),
117
+ top: "".concat(position.y, "px"),
118
+ height: "0px"
119
+ },
120
+ onMouseDown: handleMouseDown,
121
+ onMouseUp: handleMouseUp,
122
+ onTouchStart: handleTouchStart,
123
+ onTouchEnd: handleTouchEnd
124
+ }, children);
125
+ };
@@ -9,6 +9,12 @@
9
9
  width: 300px;
10
10
  }
11
11
 
12
+ .font-family-mono {
13
+ font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
14
+ font-weight: 500;
15
+ font-size: 14px;
16
+ }
17
+
12
18
  /* .luckysheet-formula-help-c .luckysheet-formula-help-content {
13
19
  max-height: 300px;
14
20
  overflow-y: scroll;
@@ -29,25 +35,23 @@
29
35
 
30
36
  .luckysheet-formula-help-title,
31
37
  .luckysheet-formula-search-item-active {
32
- padding: 10px !important;
38
+ padding: 4px 10px !important;
33
39
  font-size: small;
34
40
  /* background: #f8f9fa !important; */
35
41
  font-weight: 600;
36
42
  border-bottom: 0px !important;
37
43
  border-top: 0px !important;
44
+ border-radius: 4px;
38
45
  }
39
46
 
40
47
  .luckysheet-formula-help-c,
41
48
  .luckysheet-formula-search-c {
42
49
  padding: 6px;
43
50
  user-select: text;
44
- border-radius: 10px;
45
51
  top: 25px;
46
52
  background: #ffff;
47
53
  min-width: 300px;
48
54
  /* max-width: 450px; */
49
- border: 1px solid lavender;
50
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
51
55
  }
52
56
 
53
57
  #luckysheet-formula-help-c {
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import "./index.css";
3
- declare const FormulaHint: React.FC<React.HTMLAttributes<HTMLDivElement>>;
3
+ declare const FormulaHint: (props: any) => React.JSX.Element | null;
4
4
  export default FormulaHint;
@@ -13,8 +13,12 @@ import { Button, TextField, LucideIcon } from "@fileverse/ui";
13
13
  import React, { useContext, useEffect, useRef, useState } from "react";
14
14
  import WorkbookContext from "../../../context";
15
15
  import "./index.css";
16
+ import { DraggableDiv } from "./dragable-div";
16
17
  var FormulaHint = function FormulaHint(props) {
17
18
  var _a;
19
+ var showFormulaHint = props.showFormulaHint,
20
+ handleShowFormulaHint = props.handleShowFormulaHint;
21
+ var dragHasMoved = useRef(false);
18
22
  var context = useContext(WorkbookContext).context;
19
23
  var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
20
24
  var formulaMore = locale(context).formulaMore;
@@ -28,7 +32,8 @@ var FormulaHint = function FormulaHint(props) {
28
32
  var _d = useState(!!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY)),
29
33
  isKeyAdded = _d[0],
30
34
  setApiKeyAdded = _d[1];
31
- var _e = useState(true),
35
+ var formulaExpand = localStorage.getItem("formula-expand") === "true";
36
+ var _e = useState(formulaExpand),
32
37
  showFunctionBody = _e[0],
33
38
  setShouldShowFunctionBody = _e[1];
34
39
  useEffect(function () {
@@ -45,6 +50,9 @@ var FormulaHint = function FormulaHint(props) {
45
50
  var _f = useState(0),
46
51
  top = _f[0],
47
52
  setTop = _f[1];
53
+ var _g = useState(false),
54
+ showDelayedHint = _g[0],
55
+ setShowDelayedHint = _g[1];
48
56
  var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
49
57
  var _a, _b, _c;
50
58
  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;
@@ -58,7 +66,14 @@ var FormulaHint = function FormulaHint(props) {
58
66
  };
59
67
  useEffect(function () {
60
68
  calcuatePopUpPlacement();
61
- });
69
+ }, []);
70
+ useEffect(function () {
71
+ if (!top) {
72
+ setTimeout(function () {
73
+ setShowDelayedHint(true);
74
+ }, 40);
75
+ }
76
+ }, [top]);
62
77
  useEffect(function () {
63
78
  var el = document.getElementById("function-details");
64
79
  var handleWheel;
@@ -94,12 +109,44 @@ var FormulaHint = function FormulaHint(props) {
94
109
  };
95
110
  }, []);
96
111
  if (!fn) return null;
97
- return /*#__PURE__*/React.createElement("div", __assign({}, props, {
112
+ return /*#__PURE__*/React.createElement(DraggableDiv, {
113
+ initialTop: top,
114
+ dragHasMoved: dragHasMoved,
115
+ className: "bg-secondary text-secondary-foreground p-4 rounded-lg flex items-center justify-center ".concat(showDelayedHint ? "opacity-100" : "opacity-0")
116
+ }, showFormulaHint && (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
117
+ type: "button",
118
+ className: "flex items-center justify-center w-4 h-4 rounded-full",
119
+ style: {
120
+ backgroundColor: "black",
121
+ zIndex: 2000,
122
+ position: "absolute",
123
+ left: "327px",
124
+ top: "-8px"
125
+ },
126
+ onClick: handleShowFormulaHint,
127
+ "aria-label": "Close formula hint"
128
+ }, /*#__PURE__*/React.createElement("svg", {
129
+ xmlns: "http://www.w3.org/2000/svg",
130
+ className: " text-white",
131
+ style: {
132
+ width: "12px",
133
+ height: "12px"
134
+ },
135
+ fill: "none",
136
+ viewBox: "0 0 24 24",
137
+ stroke: "currentColor",
138
+ strokeWidth: "3"
139
+ }, /*#__PURE__*/React.createElement("path", {
140
+ strokeLinecap: "round",
141
+ strokeLinejoin: "round",
142
+ d: "M6 18L18 6M6 6l12 12"
143
+ }))), /*#__PURE__*/React.createElement("div", __assign({}, props, {
98
144
  ref: hintRef,
99
145
  id: "luckysheet-formula-help-c",
100
146
  className: "luckysheet-formula-help-c",
101
147
  style: {
102
- top: top,
148
+ top: "0px",
149
+ left: "0px",
103
150
  borderWidth: "1px",
104
151
  borderColor: (fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR) ? fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR : "#F8F9FA",
105
152
  backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
@@ -120,9 +167,13 @@ var FormulaHint = function FormulaHint(props) {
120
167
  "aria-hidden": "true"
121
168
  })), /*#__PURE__*/React.createElement("div", {
122
169
  onClick: function onClick() {
123
- setShouldShowFunctionBody(!showFunctionBody);
170
+ if (!dragHasMoved.current) {
171
+ localStorage.setItem("formula-expand", "".concat(!showFunctionBody));
172
+ setShouldShowFunctionBody(!showFunctionBody);
173
+ }
174
+ dragHasMoved.current = false;
124
175
  },
125
- className: "flex cursor-pointer items-center justify-between",
176
+ className: "flex cursor-pointer items-start justify-between",
126
177
  style: {
127
178
  backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
128
179
  padding: "10px",
@@ -134,11 +185,11 @@ var FormulaHint = function FormulaHint(props) {
134
185
  style: {
135
186
  fontWeight: 500
136
187
  },
137
- className: "luckysheet-arguments-help-function-name"
188
+ className: "luckysheet-arguments-help-function-name font-family-mono mb-1 mt-2 color-text-default font-family-mono"
138
189
  }, fn.n), /*#__PURE__*/React.createElement("code", {
139
- className: "luckysheet-arguments-paren"
190
+ className: "luckysheet-arguments-paren font-family-mono mb-1 mt-2 color-text-default"
140
191
  }, "("), /*#__PURE__*/React.createElement("code", {
141
- className: "luckysheet-arguments-parameter-holder"
192
+ className: "luckysheet-arguments-parameter-holder font-family-mono mb-1 mt-2 color-text-default"
142
193
  }, fn.p.map(function (param, i) {
143
194
  var name = param.name;
144
195
  if (param.repeat === "y") {
@@ -148,12 +199,12 @@ var FormulaHint = function FormulaHint(props) {
148
199
  name = "[".concat(name, "]");
149
200
  }
150
201
  return /*#__PURE__*/React.createElement("code", {
151
- className: "luckysheet-arguments-help-parameter",
202
+ className: "luckysheet-arguments-help-parameter font-family-mono mb-1 mt-2 color-text-default",
152
203
  dir: "auto",
153
204
  key: name
154
205
  }, name, i !== fn.p.length - 1 && ", ");
155
206
  })), /*#__PURE__*/React.createElement("code", {
156
- className: "luckysheet-arguments-paren"
207
+ className: "luckysheet-arguments-paren font-family-mono mb-1 mt-2 color-text-default"
157
208
  }, ")")), /*#__PURE__*/React.createElement("div", {
158
209
  style: {
159
210
  display: "flex",
@@ -199,14 +250,15 @@ var FormulaHint = function FormulaHint(props) {
199
250
  id: "function-details",
200
251
  style: {
201
252
  backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
202
- maxHeight: "318px",
253
+ maxHeight: "284px",
203
254
  overflowY: "scroll"
204
255
  }
205
256
  }, fn.API_KEY && (/*#__PURE__*/React.createElement("div", {
206
257
  style: {
207
258
  borderLeft: "4px solid ".concat(isKeyAdded ? "#177E23" : "#fb923c"),
208
259
  backgroundColor: "white",
209
- padding: "16px",
260
+ padding: "8px",
261
+ paddingBottom: "2px",
210
262
  margin: "4px 4px 0px 4px",
211
263
  borderRadius: "4px"
212
264
  }
@@ -245,7 +297,7 @@ var FormulaHint = function FormulaHint(props) {
245
297
  setApiKeyAdded(false);
246
298
  }
247
299
  }), /*#__PURE__*/React.createElement("div", {
248
- className: "flex justify-end mt-2"
300
+ className: "flex justify-end mt-2 mb-2"
249
301
  }, /*#__PURE__*/React.createElement(Button, {
250
302
  onClick: function onClick() {
251
303
  localStorage.setItem(fn.API_KEY, API_KEY);
@@ -259,16 +311,17 @@ var FormulaHint = function FormulaHint(props) {
259
311
  backgroundColor: "white",
260
312
  padding: "6px",
261
313
  margin: "4px 4px 0px 4px",
262
- borderRadius: "4px"
314
+ borderRadius: "4px",
315
+ marginTop: "-1px"
263
316
  }
264
317
  }, /*#__PURE__*/React.createElement("div", {
265
318
  className: ""
266
319
  }, /*#__PURE__*/React.createElement("div", {
267
320
  style: {
268
321
  lineHeight: "16px",
269
- fontSize: "12px"
322
+ fontSize: "14px"
270
323
  },
271
- className: "text-body-sm-bold mb-1 color-text-secondary"
324
+ className: "font-family-mono mb-1 color-text-default jetbrains-mono"
272
325
  }, formulaMore.helpExample), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("code", {
273
326
  style: {
274
327
  overflowWrap: "break-word"
@@ -298,10 +351,10 @@ var FormulaHint = function FormulaHint(props) {
298
351
  }, /*#__PURE__*/React.createElement("div", {
299
352
  style: {
300
353
  lineHeight: "16px",
301
- fontSize: "12px",
354
+ fontSize: "14px",
302
355
  padding: "0px"
303
356
  },
304
- className: "text-body-sm-bold mb-1 mt-2 color-text-secondary"
357
+ className: "font-family-mono mb-1 mt-2 color-text-default"
305
358
  }, "About"), /*#__PURE__*/React.createElement("span", {
306
359
  className: "luckysheet-arguments-help-parameter-content text-helper-text-sm"
307
360
  }, fn.d))), /*#__PURE__*/React.createElement("div", {
@@ -313,7 +366,9 @@ var FormulaHint = function FormulaHint(props) {
313
366
  return /*#__PURE__*/React.createElement("div", {
314
367
  className: "",
315
368
  key: param.name
316
- }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("code", null, param.name, param.repeat === "y" && (/*#__PURE__*/React.createElement("span", {
369
+ }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("code", {
370
+ className: "font-family-mono mb-1 mt-2 color-text-default font-family-mono"
371
+ }, param.name, param.repeat === "y" && (/*#__PURE__*/React.createElement("span", {
317
372
  className: "luckysheet-arguments-help-argument-info example-value",
318
373
  style: {
319
374
  marginTop: "2px"
@@ -329,7 +384,7 @@ var FormulaHint = function FormulaHint(props) {
329
384
  marginTop: "2px"
330
385
  }
331
386
  }, param.detail));
332
- }))))), /*#__PURE__*/React.createElement("div", {
387
+ }))))), showFunctionBody && (/*#__PURE__*/React.createElement("div", {
333
388
  style: {
334
389
  backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
335
390
  padding: "8px",
@@ -343,6 +398,6 @@ var FormulaHint = function FormulaHint(props) {
343
398
  (_a = document.getElementById("function-button")) === null || _a === void 0 ? void 0 : _a.click();
344
399
  },
345
400
  className: "color-text-link cursor-pointer text-helper-text-sm"
346
- }, "Learn More")));
401
+ }, "Learn More")))))));
347
402
  };
348
403
  export default FormulaHint;
@@ -1,14 +1,24 @@
1
- .luckysheet-formula-search-c {
1
+ .luckysheet-formula-search-c-p {
2
2
  position: absolute;
3
- border: 1px solid rgba(0, 0, 0, 0.2);
4
3
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
5
4
  color: #535353;
6
5
  font-size: 12px;
7
6
  background: #fff;
8
7
  z-index: 1003;
8
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
9
+ border: 1px solid lavender;
10
+ border-radius: 10px;
11
+ }
12
+
13
+ .luckysheet-formula-search-c {
14
+ color: #535353;
15
+ font-size: 12px;
16
+ background: #fff;
9
17
  width: 300px;
10
- max-height: 360px;
18
+ max-height: 380px;
11
19
  overflow-y: auto;
20
+ border-radius: 10px;
21
+
12
22
  }
13
23
 
14
24
  .luckysheet-formula-search-c .luckysheet-formula-search-item {
@@ -19,7 +19,7 @@ var FormulaSearch = function FormulaSearch(props) {
19
19
  var _b = useContext(WorkbookContext),
20
20
  context = _b.context,
21
21
  isAuthorized = _b.settings.isAuthorized;
22
- var authedFunction = ["COINGECKO", "ETHERSCAN", "DEFILLAMA", "GNOSIS", "BASE", "EOA", "PNL", "SAFE", "BLOCKSCOUT", "GNOSIS", "LENS", "FARCASTER", "Ethereum", "SMARTCONTRACT", "DUNESIM"];
22
+ var authedFunction = ["COINGECKO", "ETHERSCAN", "DEFILLAMA", "GNOSIS", "BASE", "EOA", "PNL", "SAFE", "BLOCKSCOUT", "LENS", "FARCASTER", "Ethereum", "SMARTCONTRACT", "DUNESIM"];
23
23
  var filteredDefaultCandidates = context.defaultCandidates.filter(function (item) {
24
24
  return !authedFunction.includes(item.n);
25
25
  });
@@ -44,19 +44,22 @@ var FormulaSearch = function FormulaSearch(props) {
44
44
  var hintAbove = hintHeight > availableBelow;
45
45
  var selectionHeight = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0;
46
46
  var divOffset = ((_c = hintRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) || 0;
47
- setTop(hintAbove ? selectionHeight - (divOffset + 30) : selectionHeight + 4);
47
+ var topV = hintAbove ? selectionHeight - (divOffset + 80) : selectionHeight + 4;
48
+ setTop(topV);
48
49
  };
49
50
  useEffect(function () {
50
51
  calcuatePopUpPlacement();
51
52
  });
52
53
  if (_.isEmpty(context.functionCandidates) && _.isEmpty(context.defaultCandidates)) return null;
53
- return /*#__PURE__*/React.createElement("div", __assign({}, props, {
54
- ref: hintRef,
55
- id: "luckysheet-formula-search-c",
56
- className: "luckysheet-formula-search-c",
54
+ return /*#__PURE__*/React.createElement("div", {
55
+ className: "flex flex-col luckysheet-formula-search-c-p",
57
56
  style: {
58
57
  top: top
59
58
  }
59
+ }, /*#__PURE__*/React.createElement("div", __assign({}, props, {
60
+ ref: hintRef,
61
+ id: "luckysheet-formula-search-c",
62
+ className: "luckysheet-formula-search-c"
60
63
  }), context.defaultCandidates.length > 0 && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
61
64
  style: {
62
65
  marginBottom: "4px"
@@ -100,14 +103,14 @@ var FormulaSearch = function FormulaSearch(props) {
100
103
  height: "16px"
101
104
  }
102
105
  });
103
- })))))), context.defaultCandidates.length > 0 ? (/*#__PURE__*/React.createElement(React.Fragment, null, finalDefaultCandidates.map(function (v) {
106
+ })))))), context.defaultCandidates.length > 0 ? (/*#__PURE__*/React.createElement(React.Fragment, null, finalDefaultCandidates.map(function (v, index) {
104
107
  return /*#__PURE__*/React.createElement("div", {
105
108
  key: v.n,
106
109
  "data-func": v.n,
107
110
  style: {
108
111
  cursor: "pointer"
109
112
  },
110
- className: "luckysheet-formula-search-item"
113
+ className: "luckysheet-formula-search-item ".concat(index === 0 ? "luckysheet-formula-search-item-active" : "")
111
114
  }, /*#__PURE__*/React.createElement("div", {
112
115
  style: {
113
116
  display: "flex",
@@ -155,11 +158,11 @@ var FormulaSearch = function FormulaSearch(props) {
155
158
  })))))), /*#__PURE__*/React.createElement("div", {
156
159
  className: "luckysheet-formula-search-detail mt-1 text-helper-text-sm color-text-default"
157
160
  }, v.d));
158
- }))) : (/*#__PURE__*/React.createElement(React.Fragment, null, finalFunctionCandidates.length > 0 && finalFunctionCandidates.map(function (v) {
161
+ }))) : (/*#__PURE__*/React.createElement(React.Fragment, null, finalFunctionCandidates.length > 0 && finalFunctionCandidates.map(function (v, index) {
159
162
  return /*#__PURE__*/React.createElement("div", {
160
163
  key: v.n,
161
164
  "data-func": v.n,
162
- className: "luckysheet-formula-search-item"
165
+ className: "luckysheet-formula-search-item ".concat(index === 0 ? "luckysheet-formula-search-item-active" : "")
163
166
  }, /*#__PURE__*/React.createElement("div", {
164
167
  style: {
165
168
  display: "flex",
@@ -244,8 +247,10 @@ var FormulaSearch = function FormulaSearch(props) {
244
247
  height: "16px"
245
248
  }
246
249
  });
247
- })))))))), /*#__PURE__*/React.createElement("hr", {
248
- className: "color-border-default mb-2 mt-4 "
250
+ }))))))))), /*#__PURE__*/React.createElement("div", {
251
+ className: "p-2 pt-0"
252
+ }, /*#__PURE__*/React.createElement("hr", {
253
+ className: "color-border-default mb-2"
249
254
  }), /*#__PURE__*/React.createElement("div", {
250
255
  style: {
251
256
  paddingLeft: "10px",
@@ -256,6 +261,6 @@ var FormulaSearch = function FormulaSearch(props) {
256
261
  className: "border p-1 color-text-default rounded"
257
262
  }, "Tab"), /*#__PURE__*/React.createElement("p", {
258
263
  className: "color-text-secondary"
259
- }, "to insert")));
264
+ }, "to insert"))));
260
265
  };
261
266
  export default FormulaSearch;
@@ -0,0 +1,18 @@
1
+ import React from "react";
2
+ import { LucideIconProps } from "./LucideIcon";
3
+ export declare const LucideIcons: {
4
+ File3d: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
5
+ FileWord: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
6
+ FilePdf: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
7
+ FilePpt: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
8
+ FileExcel: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
9
+ Section: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
10
+ XSocial: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
11
+ Farcaster: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
12
+ Warpcast: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
13
+ DSheetTextDisabled: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
14
+ Orb: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
15
+ Lens: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
16
+ Hey: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
17
+ CloudSaved: ({ width, height, ...props }: LucideIconProps) => React.JSX.Element;
18
+ };