@fileverse-dev/fortune-react 1.0.2-mod-19 → 1.0.2-mod-21

package/dist/index.esm.js

@@ -2,6 +2,7 @@ import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fix
 import React, { useContext, useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import produce, { applyPatches, enablePatches, produceWithPatches } from 'immer';
 import _ from 'lodash';
+import { IconButton, Button as Button$1, TextField, Checkbox, Divider as Divider$2, Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '@fileverse/ui';
 import regeneratorRuntime from 'regenerator-runtime';
 
 function _arrayLikeToArray(r, a) {
@@ -137,274 +138,115 @@ function _objectWithoutPropertiesLoose(r, e) {
   }
   return t;
 }
-function _regeneratorRuntime() {
-  _regeneratorRuntime = function () {
-    return r;
-  };
-  var t,
-    r = {},
-    e = Object.prototype,
-    n = e.hasOwnProperty,
-    o = "function" == typeof Symbol ? Symbol : {},
-    i = o.iterator || "@@iterator",
-    a = o.asyncIterator || "@@asyncIterator",
-    u = o.toStringTag || "@@toStringTag";
-  function c(t, r, e, n) {
-    return Object.defineProperty(t, r, {
-      value: e,
-      enumerable: !n,
-      configurable: !n,
-      writable: !n
-    });
-  }
-  try {
-    c({}, "");
-  } catch (t) {
-    c = function (t, r, e) {
-      return t[r] = e;
-    };
-  }
-  function h(r, e, n, o) {
-    var i = e && e.prototype instanceof Generator ? e : Generator,
-      a = Object.create(i.prototype);
-    return c(a, "_invoke", function (r, e, n) {
-      var o = 1;
-      return function (i, a) {
-        if (3 === o) throw Error("Generator is already running");
-        if (4 === o) {
-          if ("throw" === i) throw a;
-          return {
-            value: t,
-            done: !0
-          };
-        }
-        for (n.method = i, n.arg = a;;) {
-          var u = n.delegate;
-          if (u) {
-            var c = d(u, n);
-            if (c) {
-              if (c === f) continue;
-              return c;
-            }
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = !1,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function (t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
           }
-          if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
-            if (1 === o) throw o = 4, n.arg;
-            n.dispatchException(n.arg);
-          } else "return" === n.method && n.abrupt("return", n.arg);
-          o = 3;
-          var h = s(r, e, n);
-          if ("normal" === h.type) {
-            if (o = n.done ? 4 : 2, h.arg === f) continue;
-            return {
-              value: h.arg,
-              done: n.done
-            };
+        };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (c = i[4] || 3, u = i[5] === e ? i[3] : i[5], i[4] = 3, i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+        }
+        if (o || r > 1) return a;
+        throw y = !0, n;
+      }
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
           }
-          "throw" === h.type && (o = 4, n.method = "throw", n.arg = h.arg);
         }
+        return {
+          value: t,
+          done: y
+        };
       };
-    }(r, n, new Context(o || [])), !0), a;
-  }
-  function s(t, r, e) {
-    try {
-      return {
-        type: "normal",
-        arg: t.call(r, e)
-      };
-    } catch (t) {
-      return {
-        type: "throw",
-        arg: t
-      };
-    }
+    }(r, o, i), !0), u;
   }
-  r.wrap = h;
-  var f = {};
+  var a = {};
   function Generator() {}
   function GeneratorFunction() {}
   function GeneratorFunctionPrototype() {}
-  var l = {};
-  c(l, i, function () {
-    return this;
-  });
-  var p = Object.getPrototypeOf,
-    y = p && p(p(x([])));
-  y && y !== e && n.call(y, i) && (l = y);
-  var v = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(l);
-  function g(t) {
-    ["next", "throw", "return"].forEach(function (r) {
-      c(t, r, function (t) {
-        return this._invoke(r, t);
-      });
-    });
-  }
-  function AsyncIterator(t, r) {
-    function e(o, i, a, u) {
-      var c = s(t[o], t, i);
-      if ("throw" !== c.type) {
-        var h = c.arg,
-          f = h.value;
-        return f && "object" == typeof f && n.call(f, "__await") ? r.resolve(f.__await).then(function (t) {
-          e("next", t, a, u);
-        }, function (t) {
-          e("throw", t, a, u);
-        }) : r.resolve(f).then(function (t) {
-          h.value = t, a(h);
-        }, function (t) {
-          return e("throw", t, a, u);
-        });
-      }
-      u(c.arg);
-    }
-    var o;
-    c(this, "_invoke", function (t, n) {
-      function i() {
-        return new r(function (r, o) {
-          e(t, n, r, o);
-        });
-      }
-      return o = o ? o.then(i, i) : i();
-    }, !0);
-  }
-  function d(r, e) {
-    var n = e.method,
-      o = r.i[n];
-    if (o === t) return e.delegate = null, "throw" === n && r.i.return && (e.method = "return", e.arg = t, d(r, e), "throw" === e.method) || "return" !== n && (e.method = "throw", e.arg = new TypeError("The iterator does not provide a '" + n + "' method")), f;
-    var i = s(o, r.i, e.arg);
-    if ("throw" === i.type) return e.method = "throw", e.arg = i.arg, e.delegate = null, f;
-    var a = i.arg;
-    return a ? a.done ? (e[r.r] = a.value, e.next = r.n, "return" !== e.method && (e.method = "next", e.arg = t), e.delegate = null, f) : a : (e.method = "throw", e.arg = new TypeError("iterator result is not an object"), e.delegate = null, f);
-  }
-  function w(t) {
-    this.tryEntries.push(t);
-  }
-  function m(r) {
-    var e = r[4] || {};
-    e.type = "normal", e.arg = t, r[4] = e;
-  }
-  function Context(t) {
-    this.tryEntries = [[-1]], t.forEach(w, this), this.reset(!0);
-  }
-  function x(r) {
-    if (null != r) {
-      var e = r[i];
-      if (e) return e.call(r);
-      if ("function" == typeof r.next) return r;
-      if (!isNaN(r.length)) {
-        var o = -1,
-          a = function e() {
-            for (; ++o < r.length;) if (n.call(r, o)) return e.value = r[o], e.done = !1, e;
-            return e.value = t, e.done = !0, e;
-          };
-        return a.next = a;
-      }
-    }
-    throw new TypeError(typeof r + " is not iterable");
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
   }
-  return GeneratorFunction.prototype = GeneratorFunctionPrototype, c(v, "constructor", GeneratorFunctionPrototype), c(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = c(GeneratorFunctionPrototype, u, "GeneratorFunction"), r.isGeneratorFunction = function (t) {
-    var r = "function" == typeof t && t.constructor;
-    return !!r && (r === GeneratorFunction || "GeneratorFunction" === (r.displayName || r.name));
-  }, r.mark = function (t) {
-    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, c(t, u, "GeneratorFunction")), t.prototype = Object.create(v), t;
-  }, r.awrap = function (t) {
-    return {
-      __await: t
-    };
-  }, g(AsyncIterator.prototype), c(AsyncIterator.prototype, a, function () {
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
     return this;
-  }), r.AsyncIterator = AsyncIterator, r.async = function (t, e, n, o, i) {
-    void 0 === i && (i = Promise);
-    var a = new AsyncIterator(h(t, e, n, o), i);
-    return r.isGeneratorFunction(e) ? a : a.next().then(function (t) {
-      return t.done ? t.value : a.next();
-    });
-  }, g(v), c(v, u, "Generator"), c(v, i, function () {
-    return this;
-  }), c(v, "toString", function () {
+  }), _regeneratorDefine(u, "toString", function () {
     return "[object Generator]";
-  }), r.keys = function (t) {
-    var r = Object(t),
-      e = [];
-    for (var n in r) e.unshift(n);
-    return function t() {
-      for (; e.length;) if ((n = e.pop()) in r) return t.value = n, t.done = !1, t;
-      return t.done = !0, t;
+  }), (_regenerator = function () {
+    return {
+      w: i,
+      m: f
     };
-  }, r.values = x, Context.prototype = {
-    constructor: Context,
-    reset: function (r) {
-      if (this.prev = this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(m), !r) for (var e in this) "t" === e.charAt(0) && n.call(this, e) && !isNaN(+e.slice(1)) && (this[e] = t);
-    },
-    stop: function () {
-      this.done = !0;
-      var t = this.tryEntries[0][4];
-      if ("throw" === t.type) throw t.arg;
-      return this.rval;
-    },
-    dispatchException: function (r) {
-      if (this.done) throw r;
-      var e = this;
-      function n(t) {
-        a.type = "throw", a.arg = r, e.next = t;
-      }
-      for (var o = e.tryEntries.length - 1; o >= 0; --o) {
-        var i = this.tryEntries[o],
-          a = i[4],
-          u = this.prev,
-          c = i[1],
-          h = i[2];
-        if (-1 === i[0]) return n("end"), !1;
-        if (!c && !h) throw Error("try statement without catch or finally");
-        if (null != i[0] && i[0] <= u) {
-          if (u < c) return this.method = "next", this.arg = t, n(c), !0;
-          if (u < h) return n(h), !1;
-        }
-      }
-    },
-    abrupt: function (t, r) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var n = this.tryEntries[e];
-        if (n[0] > -1 && n[0] <= this.prev && this.prev < n[2]) {
-          var o = n;
-          break;
-        }
-      }
-      o && ("break" === t || "continue" === t) && o[0] <= r && r <= o[2] && (o = null);
-      var i = o ? o[4] : {};
-      return i.type = t, i.arg = r, o ? (this.method = "next", this.next = o[2], f) : this.complete(i);
-    },
-    complete: function (t, r) {
-      if ("throw" === t.type) throw t.arg;
-      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && r && (this.next = r), f;
-    },
-    finish: function (t) {
-      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
-        var e = this.tryEntries[r];
-        if (e[2] === t) return this.complete(e[4], e[3]), m(e), f;
-      }
-    },
-    catch: function (t) {
-      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
-        var e = this.tryEntries[r];
-        if (e[0] === t) {
-          var n = e[4];
-          if ("throw" === n.type) {
-            var o = n.arg;
-            m(e);
-          }
-          return o;
-        }
+  })();
+}
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
+  try {
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function (e, r, n, t) {
+    if (r) i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n;else {
+      function o(r, n) {
+        _regeneratorDefine(e, r, function (e) {
+          return this._invoke(r, n, e);
+        });
       }
-      throw Error("illegal catch attempt");
-    },
-    delegateYield: function (r, e, n) {
-      return this.delegate = {
-        i: x(r),
-        r: e,
-        n: n
-      }, "next" === this.method && (this.arg = t), f;
+      o("next", 0), o("throw", 1), o("return", 2);
     }
-  }, r;
+  }, _regeneratorDefine(e, r, n, t);
 }
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
@@ -588,6 +430,8 @@ var ColumnHeader = function ColumnHeader() {
   useEffect(function () {
     var s = context.luckysheet_select_save;
     if (_.isNil(s)) return;
+    setSelectedLocation([]);
+    if (s[0].row_select) return;
     var columnTitleMap = {};
     for (var i = 0; i < s.length; i += 1) {
       var c1 = s[i].column[0];
@@ -678,7 +522,8 @@ var ColumnHeader = function ColumnHeader() {
         left: col_pre,
         width: col - col_pre - 1,
         display: "block",
-        backgroundColor: "rgba(76, 76, 76, 0.1)"
+        backgroundColor: "#EFC703",
+        mixBlendMode: "multiply"
       }, fixColumnStyleOverflowInFreeze(context, c1, c2, (_refs$globalCache$fre3 = refs.globalCache.freezen) === null || _refs$globalCache$fre3 === void 0 ? void 0 : _refs$globalCache$fre3[context.currentSheetId]))
     });
   }), /*#__PURE__*/React.createElement("div", {
@@ -792,7 +637,11 @@ var RowHeader = function RowHeader() {
     });
   }, [refs.workbookContainer, setContext, settings, refs.cellArea]);
   useEffect(function () {
+    var _s$;
     var s = context.luckysheet_select_save || [];
+    if (_.isNil(s)) return;
+    setSelectedLocation([]);
+    if ((_s$ = s[0]) === null || _s$ === void 0 ? void 0 : _s$.column_select) return;
     var rowTitleMap = {};
     for (var i = 0; i < s.length; i += 1) {
       var r1 = s[i].row[0];
@@ -865,7 +714,8 @@ var RowHeader = function RowHeader() {
         top: row_pre,
         height: row - row_pre - 1,
         display: "block",
-        backgroundColor: "rgba(76, 76, 76, 0.1)"
+        backgroundColor: "#EFC703",
+        mixBlendMode: "multiply"
       }, fixRowStyleOverflowInFreeze(context, r1, r2, (_refs$globalCache$fre3 = refs.globalCache.freezen) === null || _refs$globalCache$fre3 === void 0 ? void 0 : _refs$globalCache$fre3[context.currentSheetId]))
     });
   }), /*#__PURE__*/React.createElement("div", {
@@ -1379,35 +1229,39 @@ var Dialog = function Dialog(_ref) {
     className: "fortune-dialog",
     style: containerStyle
   }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-modal-dialog-header"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-modal-dialog-icon-close",
+    className: "flex items-center justify-end border-b color-border-default py-3 px-6"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: "X",
+    variant: "ghost",
     onClick: onCancel,
     tabIndex: 0
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "close",
-    style: {
-      padding: 7,
-      cursor: "pointer"
-    }
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-dialog-box-content",
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "px-6 pb-6 pt-4 text-body-sm",
     style: contentStyle
   }, children), type != null && (/*#__PURE__*/React.createElement("div", {
-    className: "fortune-dialog-box-button-container"
-  }, type === "ok" ? (/*#__PURE__*/React.createElement("div", {
-    className: "fortune-message-box-button button-default",
-    onClick: onOk,
-    tabIndex: 0
-  }, button.confirm)) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-message-box-button button-primary",
+    className: "px-6 pb-6 flex flex-row gap-2 justify-end"
+  }, type === "ok" ? (/*#__PURE__*/React.createElement(Button$1, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
     onClick: onOk,
     tabIndex: 0
-  }, button.confirm), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-message-box-button button-default",
+  }, button.confirm)) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button$1, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
     onClick: onCancel,
     tabIndex: 0
-  }, button.cancel))))));
+  }, button.cancel), /*#__PURE__*/React.createElement(Button$1, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: onOk,
+    tabIndex: 0
+  }, button.confirm))))));
 };
 
 var MessageBox = function MessageBox(_ref) {
@@ -1419,15 +1273,7 @@ var MessageBox = function MessageBox(_ref) {
   return /*#__PURE__*/React.createElement(Dialog, {
     type: type,
     onOk: onOk,
-    onCancel: onCancel,
-    contentStyle: {
-      width: 300,
-      paddingTop: 20,
-      paddingBottom: 30,
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center"
-    }
+    onCancel: onCancel
   }, children);
 };
 
@@ -1511,28 +1357,27 @@ var SearchReplace = function SearchReplace(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     replaceText = _useState4[0],
     setReplaceText = _useState4[1];
-  var _useState5 = useState(context.showReplace),
+  var _useState5 = useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
-    showReplace = _useState6[0],
-    setShowReplace = _useState6[1];
-  var _useState7 = useState([]),
+    searchResult = _useState6[0],
+    setSearchResult = _useState6[1];
+  var _useState7 = useState(),
     _useState8 = _slicedToArray(_useState7, 2),
-    searchResult = _useState8[0],
-    setSearchResult = _useState8[1];
-  var _useState9 = useState(),
-    _useState0 = _slicedToArray(_useState9, 2),
-    selectedCell = _useState0[0],
-    setSelectedCell = _useState0[1];
+    selectedCell = _useState8[0],
+    setSelectedCell = _useState8[1];
   var _useAlert = useAlert(),
     showAlert = _useAlert.showAlert;
-  var _useState1 = useState({
+  var tableContainerRef = useRef(null);
+  var searchInputRef = useRef(null);
+  var replaceInputRef = useRef(null);
+  var _useState9 = useState({
       regCheck: false,
       wordCheck: false,
       caseCheck: false
     }),
-    _useState10 = _slicedToArray(_useState1, 2),
-    checkMode = _useState10[0],
-    checkModeReplace = _useState10[1];
+    _useState0 = _slicedToArray(_useState9, 2),
+    checkMode = _useState0[0],
+    checkModeReplace = _useState0[1];
   var closeDialog = useCallback(function () {
     _.set(refs.globalCache, "searchDialog.mouseEnter", false);
     setContext(function (draftCtx) {
@@ -1568,97 +1413,113 @@ var SearchReplace = function SearchReplace(_ref) {
       e.stopPropagation();
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "container",
-    onMouseDown: function onMouseDown(e) {
-      return e.stopPropagation();
-    }
+    className: ""
   }, /*#__PURE__*/React.createElement("div", {
-    className: "icon-close fortune-modal-dialog-icon-close",
+    className: "flex items-center justify-between border-b color-border-default py-3 px-6"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "text-heading-sm"
+  }, "Find and replace"), /*#__PURE__*/React.createElement(IconButton, {
+    icon: "X",
+    variant: "ghost",
     onClick: closeDialog,
     tabIndex: 0
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "close",
-    style: {
-      padding: 7,
-      cursor: "pointer"
-    }
   })), /*#__PURE__*/React.createElement("div", {
-    className: "tabBox"
-  }, /*#__PURE__*/React.createElement("span", {
-    id: "searchTab",
-    className: showReplace ? "" : "on",
-    onClick: function onClick() {
-      return setShowReplace(false);
-    },
-    tabIndex: 0
-  }, findAndReplace.find), /*#__PURE__*/React.createElement("span", {
-    id: "replaceTab",
-    className: showReplace ? "on" : "",
-    onClick: function onClick() {
-      return setShowReplace(true);
-    },
-    tabIndex: 0
-  }, findAndReplace.replace)), /*#__PURE__*/React.createElement("div", {
-    className: "ctBox"
+    className: "px-6 pb-6 pt-4"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "row"
+    className: "flex flex-col gap-4"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "inputBox"
+    className: "flex flex-col gap-4"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "textboxs",
-    id: "searchInput"
-  }, findAndReplace.findTextbox, "\uFF1A", /*#__PURE__*/React.createElement("input", {
+    id: "searchInput",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "find-replace-label text-heading-xsm"
+  }, findAndReplace.findTextbox, "\uFF1A"), /*#__PURE__*/React.createElement(TextField, {
+    ref: searchInputRef,
     className: "formulaInputFocus",
     autoFocus: true,
     spellCheck: "false",
     onKeyDown: function onKeyDown(e) {
       return e.stopPropagation();
     },
+    onMouseDown: function onMouseDown(e) {
+      var _searchInputRef$curre;
+      if (e.target === searchInputRef.current || ((_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.contains(e.target))) {
+        e.stopPropagation();
+      }
+    },
     value: searchText,
     onChange: function onChange(e) {
       return setSearchText(e.target.value);
     }
-  })), showReplace && (/*#__PURE__*/React.createElement("div", {
-    className: "textboxs",
-    id: "replaceInput"
-  }, findAndReplace.replaceTextbox, "\uFF1A", /*#__PURE__*/React.createElement("input", {
+  })), /*#__PURE__*/React.createElement("div", {
+    id: "replaceInput",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "find-replace-label text-heading-xsm"
+  }, findAndReplace.replaceTextbox, "\uFF1A"), /*#__PURE__*/React.createElement(TextField, {
+    ref: replaceInputRef,
     className: "formulaInputFocus",
     spellCheck: "false",
     onKeyDown: function onKeyDown(e) {
       return e.stopPropagation();
     },
+    onMouseDown: function onMouseDown(e) {
+      var _replaceInputRef$curr;
+      if (e.target === replaceInputRef.current || ((_replaceInputRef$curr = replaceInputRef.current) === null || _replaceInputRef$curr === void 0 ? void 0 : _replaceInputRef$curr.contains(e.target))) {
+        e.stopPropagation();
+      }
+    },
     value: replaceText,
     onChange: function onChange(e) {
       return setReplaceText(e.target.value);
     }
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "checkboxs"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row gap-2"
   }, /*#__PURE__*/React.createElement("div", {
-    id: "regCheck"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    onChange: function onChange(e) {
+    className: "find-replace-label"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-2 text-body-sm"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "regCheck",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
+    checked: checkMode.regCheck,
+    onCheckedChange: function onCheckedChange(e) {
       return setCheckMode("regCheck", e.target.checked);
     }
   }), /*#__PURE__*/React.createElement("span", null, findAndReplace.regexTextbox)), /*#__PURE__*/React.createElement("div", {
-    id: "wordCheck"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    onChange: function onChange(e) {
-      return setCheckMode("wordCheck", e.target.checked);
-    }
-  }), /*#__PURE__*/React.createElement("span", null, findAndReplace.wholeTextbox)), /*#__PURE__*/React.createElement("div", {
-    id: "caseCheck"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    onChange: function onChange(e) {
+    id: "caseCheck",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
+    checked: checkMode.caseCheck,
+    onCheckedChange: function onCheckedChange(e) {
       return setCheckMode("caseCheck", e.target.checked);
     }
-  }), /*#__PURE__*/React.createElement("span", null, findAndReplace.distinguishTextbox)))), /*#__PURE__*/React.createElement("div", {
-    className: "btnBox"
-  }, showReplace && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("span", null, findAndReplace.distinguishTextbox)), /*#__PURE__*/React.createElement("div", {
+    id: "wordCheck",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
+    checked: checkMode.wordCheck,
+    onCheckedChange: function onCheckedChange(e) {
+      return setCheckMode("wordCheck", e.target.checked);
+    }
+  }), /*#__PURE__*/React.createElement("span", null, findAndReplace.wholeTextbox)))), /*#__PURE__*/React.createElement(Divider$2, {
+    className: "w-full border-t-[1px]"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row gap-2 justify-center items-center"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    variant: "secondary",
+    className: "min-w-fit",
+    onClick: closeDialog,
+    tabIndex: 0
+  }, button.close), /*#__PURE__*/React.createElement(Button$1, {
     id: "replaceAllBtn",
-    className: "fortune-message-box-button button-default",
+    variant: "secondary",
+    className: "min-w-fit",
     onClick: function onClick() {
       setContext(function (draftCtx) {
         setSelectedCell(undefined);
@@ -1667,9 +1528,10 @@ var SearchReplace = function SearchReplace(_ref) {
       });
     },
     tabIndex: 0
-  }, findAndReplace.allReplaceBtn), /*#__PURE__*/React.createElement("div", {
+  }, findAndReplace.allReplaceBtn), /*#__PURE__*/React.createElement(Button$1, {
     id: "replaceBtn",
-    className: "fortune-message-box-button button-default",
+    variant: "secondary",
+    className: "min-w-fit",
     onClick: function onClick() {
       return setContext(function (draftCtx) {
         setSelectedCell(undefined);
@@ -1680,9 +1542,10 @@ var SearchReplace = function SearchReplace(_ref) {
       });
     },
     tabIndex: 0
-  }, findAndReplace.replaceBtn))), /*#__PURE__*/React.createElement("div", {
+  }, findAndReplace.replaceBtn), /*#__PURE__*/React.createElement(Button$1, {
     id: "searchAllBtn",
-    className: "fortune-message-box-button button-default",
+    variant: "secondary",
+    className: "min-w-fit",
     onClick: function onClick() {
       return setContext(function (draftCtx) {
         setSelectedCell(undefined);
@@ -1693,9 +1556,10 @@ var SearchReplace = function SearchReplace(_ref) {
       });
     },
     tabIndex: 0
-  }, findAndReplace.allFindBtn), /*#__PURE__*/React.createElement("div", {
+  }, findAndReplace.allFindBtn), /*#__PURE__*/React.createElement(Button$1, {
     id: "searchNextBtn",
-    className: "fortune-message-box-button button-default",
+    variant: "secondary",
+    className: "min-w-fit",
     onClick: function onClick() {
       return setContext(function (draftCtx) {
         setSearchResult([]);
@@ -1704,19 +1568,25 @@ var SearchReplace = function SearchReplace(_ref) {
       });
     },
     tabIndex: 0
-  }, findAndReplace.findBtn))), /*#__PURE__*/React.createElement("div", {
-    className: "close-button fortune-message-box-button button-default",
-    onClick: closeDialog,
+  }, findAndReplace.findBtn)))), searchResult.length > 0 && (/*#__PURE__*/React.createElement("div", {
+    ref: tableContainerRef,
+    className: "px-6 pb-6 max-h-[300px] overflow-y-auto",
+    onMouseDown: function onMouseDown(e) {
+      var _tableContainerRef$cu;
+      if (e.target === tableContainerRef.current || ((_tableContainerRef$cu = tableContainerRef.current) === null || _tableContainerRef$cu === void 0 ? void 0 : _tableContainerRef$cu.contains(e.target))) {
+        var _tableContainerRef$cu2;
+        e.stopPropagation();
+        (_tableContainerRef$cu2 = tableContainerRef.current) === null || _tableContainerRef$cu2 === void 0 ? void 0 : _tableContainerRef$cu2.focus();
+      }
+    },
     tabIndex: 0
-  }, button.close), searchResult.length > 0 && (/*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Table, {
     id: "searchAllbox"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "boxTitle"
-  }, /*#__PURE__*/React.createElement("span", null, findAndReplace.searchTargetSheet), /*#__PURE__*/React.createElement("span", null, findAndReplace.searchTargetCell), /*#__PURE__*/React.createElement("span", null, findAndReplace.searchTargetValue)), /*#__PURE__*/React.createElement("div", {
-    className: "boxMain"
-  }, searchResult.map(function (v) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "boxItem ".concat(_.isEqual(selectedCell, {
+  }, /*#__PURE__*/React.createElement(TableHeader, {
+    className: "color-bg-secondary"
+  }, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHead, null, findAndReplace.searchTargetSheet), /*#__PURE__*/React.createElement(TableHead, null, findAndReplace.searchTargetCell), /*#__PURE__*/React.createElement(TableHead, null, findAndReplace.searchTargetValue))), /*#__PURE__*/React.createElement(TableBody, null, searchResult.map(function (v) {
+    return /*#__PURE__*/React.createElement(TableRow, {
+      className: "".concat(_.isEqual(selectedCell, {
         r: v.r,
         c: v.c
       }) ? "on" : ""),
@@ -1735,8 +1605,14 @@ var SearchReplace = function SearchReplace(_ref) {
         });
       },
       tabIndex: 0
-    }, /*#__PURE__*/React.createElement("span", null, v.sheetName), /*#__PURE__*/React.createElement("span", null, v.cellPosition), /*#__PURE__*/React.createElement("span", null, v.value));
-  }))))));
+    }, /*#__PURE__*/React.createElement(TableCell, {
+      className: "find-replace-table-cell"
+    }, v.sheetName), /*#__PURE__*/React.createElement(TableCell, {
+      className: "find-replace-table-cell"
+    }, v.cellPosition), /*#__PURE__*/React.createElement(TableCell, {
+      className: "find-replace-table-cell"
+    }, v.value));
+  })))))));
 };
 
 var LinkEditCard = function LinkEditCard(_ref) {
@@ -7600,22 +7476,21 @@ var ContextMenu = function ContextMenu() {
       return /*#__PURE__*/React.createElement(Menu, {
         key: name,
         onClick: function () {
-          var _onClick = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          var _onClick = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
             var clipboardText;
-            return _regeneratorRuntime().wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
+            return _regenerator().w(function (_context) {
+              while (1) switch (_context.n) {
                 case 0:
-                  _context.next = 2;
+                  _context.n = 1;
                   return navigator.clipboard.readText();
-                case 2:
-                  clipboardText = _context.sent;
+                case 1:
+                  clipboardText = _context.v;
                   setContext(function (draftCtx) {
                     handlePasteByClick(draftCtx, clipboardText);
                     draftCtx.contextMenu = {};
                   });
-                case 4:
-                case "end":
-                  return _context.stop();
+                case 2:
+                  return _context.a(2);
               }
             }, _callee);
           }));