@fileverse-dev/fortune-react 1.0.2-mod-20 → 1.0.2-mod-22

package/dist/index.css

@@ -1187,11 +1187,11 @@ html::-webkit-scrollbar-button {
 }
 
 .fortune-dialog {
+  min-width: 368px;
   max-width: 90%;
   max-height: 90%;
-  overflow: scroll;
-  border-radius: 6px;
-  background: white;
+  border-radius: 12px;
+  background: hsl(var(--color-bg-default));
   box-shadow: rgb(0 0 0 / 10%) 5px 5px 30px;
   box-sizing: border-box;
   overflow: auto;
@@ -1251,10 +1251,11 @@ html::-webkit-scrollbar-button {
   opacity: 0.7;
 }
 
+@import "@fileverse/ui/styles";
 /*查找替换弹出框样式*/
 #fortune-search-replace {
   position: absolute;
-  padding: 30px 42px;
+  min-width: 504px;
   z-index: 1002;
 }
 
@@ -1336,10 +1337,7 @@ html::-webkit-scrollbar-button {
 }
 
 #fortune-search-replace #searchAllbox {
-  height: 210px;
-  border: 1px solid #d4d4d4;
-  margin-top: 10px;
-  overflow-y: auto;
+  overflow-y: scroll;
   position: relative;
 }
 
@@ -1413,6 +1411,38 @@ html::-webkit-scrollbar-button {
   white-space: nowrap;
 }
 
+.find-replace-label {
+  min-width: 100px;
+}
+
+.find-replace-table-cell {
+  min-width: 154px;
+}
+
+/* Add scrollbar styles */
+#fortune-search-replace .table-container {
+  scrollbar-width: thin;
+  scrollbar-color: #babac0 transparent;
+}
+
+#fortune-search-replace .table-container::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+#fortune-search-replace .table-container::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+#fortune-search-replace .table-container::-webkit-scrollbar-thumb {
+  background-color: #babac0;
+  border-radius: 16px;
+}
+
+#fortune-search-replace .table-container::-webkit-scrollbar-button {
+  display: none;
+}
+
 .fortune-link-modify-modal {
   position: absolute;
   overflow: hidden;
@@ -3304,8 +3334,8 @@ label {
   height: 252px;
   background: rgb(240, 240, 240);
   position: absolute;
-  bottom: -110px;
-  left: 197px;
+  bottom: 10px;
+  left: 100px;
   border-radius: 6px;
   box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
   border: 1px solid rgba(0, 0, 0, 0.2);

package/dist/index.esm.css

@@ -1187,11 +1187,11 @@ html::-webkit-scrollbar-button {
 }
 
 .fortune-dialog {
+  min-width: 368px;
   max-width: 90%;
   max-height: 90%;
-  overflow: scroll;
-  border-radius: 6px;
-  background: white;
+  border-radius: 12px;
+  background: hsl(var(--color-bg-default));
   box-shadow: rgb(0 0 0 / 10%) 5px 5px 30px;
   box-sizing: border-box;
   overflow: auto;
@@ -1251,10 +1251,11 @@ html::-webkit-scrollbar-button {
   opacity: 0.7;
 }
 
+@import "@fileverse/ui/styles";
 /*查找替换弹出框样式*/
 #fortune-search-replace {
   position: absolute;
-  padding: 30px 42px;
+  min-width: 504px;
   z-index: 1002;
 }
 
@@ -1336,10 +1337,7 @@ html::-webkit-scrollbar-button {
 }
 
 #fortune-search-replace #searchAllbox {
-  height: 210px;
-  border: 1px solid #d4d4d4;
-  margin-top: 10px;
-  overflow-y: auto;
+  overflow-y: scroll;
   position: relative;
 }
 
@@ -1413,6 +1411,38 @@ html::-webkit-scrollbar-button {
   white-space: nowrap;
 }
 
+.find-replace-label {
+  min-width: 100px;
+}
+
+.find-replace-table-cell {
+  min-width: 154px;
+}
+
+/* Add scrollbar styles */
+#fortune-search-replace .table-container {
+  scrollbar-width: thin;
+  scrollbar-color: #babac0 transparent;
+}
+
+#fortune-search-replace .table-container::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+#fortune-search-replace .table-container::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+#fortune-search-replace .table-container::-webkit-scrollbar-thumb {
+  background-color: #babac0;
+  border-radius: 16px;
+}
+
+#fortune-search-replace .table-container::-webkit-scrollbar-button {
+  display: none;
+}
+
 .fortune-link-modify-modal {
   position: absolute;
   overflow: hidden;
@@ -3304,8 +3334,8 @@ label {
   height: 252px;
   background: rgb(240, 240, 240);
   position: absolute;
-  bottom: -110px;
-  left: 197px;
+  bottom: 10px;
+  left: 100px;
   border-radius: 6px;
   box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
   border: 1px solid rgba(0, 0, 0, 0.2);

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, cn, TableCell } from '@fileverse/ui';
 import regeneratorRuntime from 'regenerator-runtime';
 
 function _arrayLikeToArray(r, a) {
@@ -437,11 +438,6 @@ var ColumnHeader = function ColumnHeader() {
       var c2 = s[i].column[1];
       columnTitleMap = selectTitlesMap(columnTitleMap, c1, c2);
     }
-    console.log({
-      x: s[0].row_select,
-      y: s[0].column_select,
-      columnTitleMap: columnTitleMap
-    });
     var columnTitleRange = selectTitlesRange(columnTitleMap);
     var selects = [];
     for (var j = 0; j < columnTitleRange.length; j += 1) {
@@ -1233,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) {
@@ -1273,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);
 };
 
@@ -1355,8 +1347,7 @@ var SearchReplace = function SearchReplace(_ref) {
     setContext = _useContext.setContext,
     refs = _useContext.refs;
   var _locale = locale(context),
-    findAndReplace = _locale.findAndReplace,
-    button = _locale.button;
+    findAndReplace = _locale.findAndReplace;
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     searchText = _useState2[0],
@@ -1365,28 +1356,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) {
@@ -1421,98 +1411,110 @@ var SearchReplace = function SearchReplace(_ref) {
       onSearchDialogMoveStart(refs.globalCache, nativeEvent, getContainer());
       e.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "container",
-    onMouseDown: function onMouseDown(e) {
-      return e.stopPropagation();
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "icon-close fortune-modal-dialog-icon-close",
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    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);
+      if (e.target.value.length === 0) {
+        setSearchResult([]);
+      }
+      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 mb-4"
+  }, /*#__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);
@@ -1520,10 +1522,12 @@ var SearchReplace = function SearchReplace(_ref) {
         showAlert(alertMsg);
       });
     },
-    tabIndex: 0
-  }, findAndReplace.allReplaceBtn), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    disabled: searchText.length === 0 || replaceText.length === 0
+  }, 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);
@@ -1533,10 +1537,12 @@ var SearchReplace = function SearchReplace(_ref) {
         }
       });
     },
-    tabIndex: 0
-  }, findAndReplace.replaceBtn))), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    disabled: searchText.length === 0 || replaceText.length === 0
+  }, 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);
@@ -1546,10 +1552,12 @@ var SearchReplace = function SearchReplace(_ref) {
         if (_.isEmpty(res)) showAlert(findAndReplace.noFindTip);
       });
     },
-    tabIndex: 0
-  }, findAndReplace.allFindBtn), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    disabled: searchText.length === 0
+  }, findAndReplace.allFindBtn), /*#__PURE__*/React.createElement(Button$1, {
     id: "searchNextBtn",
-    className: "fortune-message-box-button button-default",
+    variant: "default",
+    className: "min-w-fit",
     onClick: function onClick() {
       return setContext(function (draftCtx) {
         setSearchResult([]);
@@ -1557,23 +1565,45 @@ var SearchReplace = function SearchReplace(_ref) {
         if (alertMsg != null) showAlert(alertMsg);
       });
     },
+    tabIndex: 0,
+    disabled: searchText.length === 0
+  }, findAndReplace.findBtn))), searchResult.length > 0 && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider$2, {
+    className: "w-full border-t-[1px] mb-4"
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: tableContainerRef,
+    className: "mb-6 table-container 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();
+      }
+    },
+    onWheel: function onWheel(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (tableContainerRef.current) {
+        tableContainerRef.current.scrollTop += e.deltaY;
+      }
+    },
+    onTouchStart: function onTouchStart(e) {
+      e.stopPropagation();
+    },
+    onTouchMove: function onTouchMove(e) {
+      e.stopPropagation();
+    },
     tabIndex: 0
-  }, findAndReplace.findBtn))), /*#__PURE__*/React.createElement("div", {
-    className: "close-button fortune-message-box-button button-default",
-    onClick: closeDialog,
-    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: cn(_.isEqual(selectedCell, {
         r: v.r,
         c: v.c
-      }) ? "on" : ""),
+      }) ? "color-bg-default-selected" : ""),
       key: v.cellPosition,
       onClick: function onClick() {
         setContext(function (draftCtx) {
@@ -1589,8 +1619,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) {