@fileverse-dev/fortune-react 1.0.2-mod-35 → 1.0.2-mod-36

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fixPositionOnFrozenCells, colLocation, getFlowdata, isAllowEdit, handleColumnHeaderMouseDown, handleColSizeHandleMouseDown, handleColFreezeHandleMouseDown, handleContextMenu, selectTitlesMap, selectTitlesRange, fixColumnStyleOverflowInFreeze, rowLocationByIndex, rowLocation, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, handleRowFreezeHandleMouseDown, fixRowStyleOverflowInFreeze, locale, getStyleByCell, getCellValue, createRangeHightlight, isInlineStringCell, getInlineStringHTML, valueShowEs, escapeHTMLTag, escapeScriptTag, moveToEnd, isShowHidenCR, getrangeseleciton, cancelNormalSelected, moveHighlightCell, israngeseleciton, handleFormulaInput, onSearchDialogMoveStart, replaceAll, replace, searchAll, searchNext, normalizeSelection, scrollToHighlightCell, isLinkValid, goToLink, replaceHtml, removeHyperlink, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, getRangetxt, setConditionRules, mergeBorder, setDropcownValue, handleCellAreaMouseDown, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, getCellHyperlink, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, insertRowCol, drawArrow, onCellsMoveStart, createDropCellRange, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, getDataArr, updateMoreCell, getRegStr, getOptionValue, getSelectRange, applyLocation, updateItem, update, normalizedCellAttr, updateFormat, handleTextSize, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, showImgChooser, insertImage, editComment, deleteComment, showHideComment, showHideAllComments, newComment, handleSum, autoSelectionFormula, handleMerge, handleBorder, handleFreeze, handleSort, createFilter, clearFilter, toolbarItemSelectedFunc, toolbarItemClickHandler, handleTextColor, handleTextBackground, getInlineStringNoStyle, rangeHightlightselected, updateCell, editSheetName, cancelActiveImgItem, MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, addSheet, getFreezeState, toggleFreeze, jfrefreshgrid, handleCopy, deleteRowCol, hideSelected, showSelected, api, removeActiveImage, deleteSelectedCellText, sortSelection, handleLink, handlePasteByClick, deleteSheet, opToPatch, setCaretPosition, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, calcSelectionInfo, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePaste, groupValuesRefresh } from '@fileverse-dev/fortune-core';
+import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fixPositionOnFrozenCells, colLocation, getFlowdata, isAllowEdit, handleColumnHeaderMouseDown, handleColSizeHandleMouseDown, handleColFreezeHandleMouseDown, handleContextMenu, selectTitlesMap, selectTitlesRange, fixColumnStyleOverflowInFreeze, rowLocationByIndex, rowLocation, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, handleRowFreezeHandleMouseDown, fixRowStyleOverflowInFreeze, locale, getStyleByCell, getCellValue, createRangeHightlight, isInlineStringCell, getInlineStringHTML, valueShowEs, escapeHTMLTag, escapeScriptTag, moveToEnd, isShowHidenCR, getrangeseleciton, cancelNormalSelected, moveHighlightCell, israngeseleciton, handleFormulaInput, onSearchDialogMoveStart, replaceAll, replace, searchAll, searchNext, normalizeSelection, scrollToHighlightCell, isLinkValid, goToLink, replaceHtml, removeHyperlink, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, getRangetxt, setConditionRules, mergeBorder, setDropdownValue, handleCellAreaMouseDown, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, getCellHyperlink, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, insertRowCol, drawArrow, onCellsMoveStart, createDropCellRange, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, getDataArr, updateMoreCell, getRegStr, getOptionValue, getSelectRange, applyLocation, updateItem, update, normalizedCellAttr, updateFormat, handleTextSize, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, showImgChooser, insertImage, editComment, deleteComment, showHideComment, showHideAllComments, newComment, handleSum, autoSelectionFormula, handleMerge, handleBorder, handleFreeze, handleSort, createFilter, clearFilter, toolbarItemSelectedFunc, toolbarItemClickHandler, handleTextColor, handleTextBackground, getInlineStringNoStyle, rangeHightlightselected, updateCell, editSheetName, cancelActiveImgItem, MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, addSheet, getFreezeState, toggleFreeze, jfrefreshgrid, handleCopy, deleteRowCol, hideSelected, showSelected, api, removeActiveImage, deleteSelectedCellText, sortSelection, handleLink, handlePasteByClick, deleteSheet, opToPatch, setCaretPosition, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, calcSelectionInfo, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePaste, groupValuesRefresh } from '@fileverse-dev/fortune-core';
 import React, { useContext, useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import produce, { applyPatches, enablePatches, produceWithPatches } from 'immer';
 import _ from 'lodash';
@@ -172,7 +172,7 @@ function _regenerator() {
             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));
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = 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;
@@ -2559,8 +2559,18 @@ function useDialog() {
   };
 }
 
+var datepickerStyles = "\n  .datepicker-toggle {\n    display: inline-block;\n    position: relative;\n    width: 100%;\n  }\n  \n  .datepicker-toggle-button {\n    opacity: 0.3;\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 16px;\n    height: 16px;\n    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjQiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGxpbmUgeDE9IjE2IiB5MT0iMiIgeDI9IjE2IiB5Mj0iNiI+PC9saW5lPjxsaW5lIHgxPSI4IiB5MT0iMiIgeDI9IjgiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjMiIHkxPSIxMCIgeDI9IjIxIiB5Mj0iMTAiPjwvbGluZT48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-position: center;\n    pointer-events: none;\n  }\n  \n  .datepicker-input {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #1a202c;\n    background-color: #fff;\n    cursor: pointer;\n  }\n  \n  .datepicker-input::-webkit-calendar-picker-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0;\n  }\n  \n  .datepicker-input:focus {\n    outline: none;\n    border-color: #4299e1;\n    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);\n  }\n";
+var injectDatepickerStyles = function injectDatepickerStyles() {
+  if (typeof document !== "undefined") {
+    var styleSheet = document.createElement("style");
+    styleSheet.textContent = datepickerStyles;
+    document.head.appendChild(styleSheet);
+  }
+};
+
+injectDatepickerStyles();
 var DataVerification = function DataVerification() {
-  var _context$dataVerifica, _context$dataVerifica2, _context$dataVerifica3, _context$dataVerifica4, _context$dataVerifica5, _context$dataVerifica6, _context$dataVerifica7, _context$dataVerifica8, _context$dataVerifica9, _context$dataVerifica0, _context$dataVerifica1, _context$dataVerifica10, _context$dataVerifica11, _context$dataVerifica12, _context$dataVerifica13, _context$dataVerifica14, _context$dataVerifica15, _context$dataVerifica16, _context$dataVerifica17, _context$dataVerifica18, _context$dataVerifica19, _context$dataVerifica20, _context$dataVerifica21, _context$dataVerifica22, _context$dataVerifica23;
+  var _context$dataVerifica, _context$dataVerifica2, _context$dataVerifica3, _context$dataVerifica4, _context$dataVerifica5, _context$dataVerifica6, _context$dataVerifica7, _context$dataVerifica8, _context$dataVerifica9, _context$dataVerifica0, _context$dataVerifica1, _context$dataVerifica10, _context$dataVerifica11;
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext;
@@ -2569,15 +2579,11 @@ var DataVerification = function DataVerification() {
     hideDialog = _useDialog.hideDialog;
   var _locale = locale(context),
     dataVerification = _locale.dataVerification,
-    toolbar = _locale.toolbar,
     button = _locale.button,
     generalDialog = _locale.generalDialog;
-  var _useState = useState(["between", "notBetween", "equal", "notEqualTo", "moreThanThe", "lessThan", "greaterOrEqualTo", "lessThanOrEqualTo"]),
+  var _useState = useState(["between", "notBetween", "equal", "notEqualTo", "earlierThan", "noEarlierThan", "laterThan", "noLaterThan"]),
     _useState2 = _slicedToArray(_useState, 1),
-    numberCondition = _useState2[0];
-  var _useState3 = useState(["between", "notBetween", "equal", "notEqualTo", "earlierThan", "noEarlierThan", "laterThan", "noLaterThan"]),
-    _useState4 = _slicedToArray(_useState3, 1),
-    dateCondition = _useState4[0];
+    dateCondition = _useState2[0];
   var dataSelectRange = useCallback(function (type, value) {
     hideDialog();
     setContext(function (ctx) {
@@ -2712,48 +2718,36 @@ var DataVerification = function DataVerification() {
   return /*#__PURE__*/React.createElement("div", {
     id: "fortune-data-verification"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "title"
-  }, toolbar.dataVerification), /*#__PURE__*/React.createElement("div", {
-    className: "box"
+    className: "flex flex-col gap-4"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "box-item",
-    style: {
-      borderTop: "1px solid #E1E4E8"
-    }
+    className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "box-item-title"
-  }, dataVerification.cellRange), /*#__PURE__*/React.createElement("div", {
-    className: "data-verification-range"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "formulaInputFocus",
-    spellCheck: "false",
+    className: "text-heading-xsm mb-2"
+  }, dataVerification.cellRange), /*#__PURE__*/React.createElement(TextField, {
+    rightIcon: /*#__PURE__*/React.createElement(LucideIcon, {
+      name: "Grid2x2",
+      size: "sm"
+    }),
+    "aria-hidden": "true",
+    readOnly: true,
     value: (_context$dataVerifica = context.dataVerification.dataRegulation) === null || _context$dataVerifica === void 0 ? void 0 : _context$dataVerifica.rangeTxt,
     onChange: function onChange(e) {
       var value = e.target.value;
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.rangeTxt = value;
       });
-    }
-  }), /*#__PURE__*/React.createElement("i", {
-    className: "icon",
-    "aria-hidden": "true",
+    },
     onClick: function onClick() {
       hideDialog();
       dataSelectRange("rangeTxt", context.dataVerification.dataRegulation.value1);
-    },
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "tab",
-    width: 18
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "box-item"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "box-item-title"
-  }, dataVerification.verificationCondition), /*#__PURE__*/React.createElement("select", {
-    className: "data-verification-type-select",
+    className: "text-heading-xsm mb-2"
+  }, dataVerification.verificationCondition), /*#__PURE__*/React.createElement(Select$1, {
     value: context.dataVerification.dataRegulation.type,
-    onChange: function onChange(e) {
-      var value = e.target.value;
+    onValueChange: function onValueChange(value) {
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.type = value;
         if (value === "dropdown" || value === "checkbox") {
@@ -2769,18 +2763,14 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value2 = "";
       });
     }
-  }, ["dropdown", "checkbox", "number", "number_integer", "number_decimal", "text_content", "text_length", "date", "validity"].map(function (v) {
-    return /*#__PURE__*/React.createElement("option", {
+  }, /*#__PURE__*/React.createElement(SelectTrigger, null, /*#__PURE__*/React.createElement(SelectValue, null)), /*#__PURE__*/React.createElement(SelectContent, null, ["dropdown", "checkbox", "date"].map(function (v) {
+    return /*#__PURE__*/React.createElement(SelectItem$1, {
       value: v,
       key: v
     }, dataVerification[v]);
-  })), ((_context$dataVerifica2 = context.dataVerification) === null || _context$dataVerifica2 === void 0 ? void 0 : (_context$dataVerifica3 = _context$dataVerifica2.dataRegulation) === null || _context$dataVerifica3 === void 0 ? void 0 : _context$dataVerifica3.type) === "dropdown" && (/*#__PURE__*/React.createElement("div", {
-    className: "show-box-item"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "data-verification-range"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "formulaInputFocus",
-    spellCheck: "false",
+  }))), ((_context$dataVerifica2 = context.dataVerification) === null || _context$dataVerifica2 === void 0 ? void 0 : (_context$dataVerifica3 = _context$dataVerifica2.dataRegulation) === null || _context$dataVerifica3 === void 0 ? void 0 : _context$dataVerifica3.type) === "dropdown" && (/*#__PURE__*/React.createElement("div", {
+    className: "mt-4"
+  }, /*#__PURE__*/React.createElement(TextField, {
     value: context.dataVerification.dataRegulation.value1,
     placeholder: dataVerification.placeholder1,
     onChange: function onChange(e) {
@@ -2789,39 +2779,28 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value1 = value;
       });
     }
-  }), /*#__PURE__*/React.createElement("i", {
-    className: "icon",
-    "aria-hidden": "true",
-    onClick: function onClick() {
-      return dataSelectRange("dropDown", context.dataVerification.dataRegulation.value1);
-    },
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "tab",
-    width: 18
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "check"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "mt-4 flex items-center"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
     checked: context.dataVerification.dataRegulation.type2 === "true",
-    id: "mul",
-    onChange: function onChange(e) {
+    onCheckedChange: function onCheckedChange(e) {
       var checked = e.target.checked;
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.type2 = "".concat(checked);
       });
     }
-  }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: "mul"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ml-2"
   }, dataVerification.allowMultiSelect)))), ((_context$dataVerifica4 = context.dataVerification) === null || _context$dataVerifica4 === void 0 ? void 0 : (_context$dataVerifica5 = _context$dataVerifica4.dataRegulation) === null || _context$dataVerifica5 === void 0 ? void 0 : _context$dataVerifica5.type) === "checkbox" && (/*#__PURE__*/React.createElement("div", {
-    className: "show-box-item"
+    className: "mt-4 space-y-2"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "check-box"
-  }, /*#__PURE__*/React.createElement("span", null, dataVerification.selected, " \u2014\u2014 "), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    className: "data-verification-value1",
-    placeholder: dataVerification.placeholder2,
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "data-verification-checkbox-label"
+  }, dataVerification.selected), /*#__PURE__*/React.createElement(TextField, {
     value: (_context$dataVerifica6 = context.dataVerification) === null || _context$dataVerifica6 === void 0 ? void 0 : (_context$dataVerifica7 = _context$dataVerifica6.dataRegulation) === null || _context$dataVerifica7 === void 0 ? void 0 : _context$dataVerifica7.value1,
+    placeholder: dataVerification.placeholder2,
     onChange: function onChange(e) {
       var value = e.target.value;
       setContext(function (ctx) {
@@ -2829,129 +2808,41 @@ var DataVerification = function DataVerification() {
       });
     }
   })), /*#__PURE__*/React.createElement("div", {
-    className: "check-box"
-  }, /*#__PURE__*/React.createElement("span", null, dataVerification.notSelected, " \u2014\u2014 "), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    className: "data-verification-value2",
-    placeholder: dataVerification.placeholder2,
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "data-verification-checkbox-label"
+  }, dataVerification.notSelected), /*#__PURE__*/React.createElement(TextField, {
     value: (_context$dataVerifica8 = context.dataVerification) === null || _context$dataVerifica8 === void 0 ? void 0 : (_context$dataVerifica9 = _context$dataVerifica8.dataRegulation) === null || _context$dataVerifica9 === void 0 ? void 0 : _context$dataVerifica9.value2,
+    placeholder: dataVerification.placeholder2,
     onChange: function onChange(e) {
       var value = e.target.value;
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.value2 = value;
       });
     }
-  })))), (((_context$dataVerifica0 = context.dataVerification) === null || _context$dataVerifica0 === void 0 ? void 0 : (_context$dataVerifica1 = _context$dataVerifica0.dataRegulation) === null || _context$dataVerifica1 === void 0 ? void 0 : _context$dataVerifica1.type) === "number" || ((_context$dataVerifica10 = context.dataVerification) === null || _context$dataVerifica10 === void 0 ? void 0 : (_context$dataVerifica11 = _context$dataVerifica10.dataRegulation) === null || _context$dataVerifica11 === void 0 ? void 0 : _context$dataVerifica11.type) === "number_integer" || ((_context$dataVerifica12 = context.dataVerification) === null || _context$dataVerifica12 === void 0 ? void 0 : (_context$dataVerifica13 = _context$dataVerifica12.dataRegulation) === null || _context$dataVerifica13 === void 0 ? void 0 : _context$dataVerifica13.type) === "number_decimal" || ((_context$dataVerifica14 = context.dataVerification) === null || _context$dataVerifica14 === void 0 ? void 0 : (_context$dataVerifica15 = _context$dataVerifica14.dataRegulation) === null || _context$dataVerifica15 === void 0 ? void 0 : _context$dataVerifica15.type) === "text_length") && (/*#__PURE__*/React.createElement("div", {
-    className: "show-box-item"
-  }, /*#__PURE__*/React.createElement("select", {
-    className: "data-verification-type-select",
-    value: context.dataVerification.dataRegulation.type2,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.type2 = value;
-        ctx.dataVerification.dataRegulation.value1 = "";
-        ctx.dataVerification.dataRegulation.value2 = "";
-      });
-    }
-  }, numberCondition.map(function (v) {
-    return /*#__PURE__*/React.createElement("option", {
-      value: v,
-      key: v
-    }, dataVerification[v]);
-  })), context.dataVerification.dataRegulation.type2 === "between" || context.dataVerification.dataRegulation.type2 === "notBetween" ? (/*#__PURE__*/React.createElement("div", {
-    className: "input-box"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "number",
-    placeholder: "1",
-    value: context.dataVerification.dataRegulation.value1,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.value1 = value;
-      });
-    }
-  }), /*#__PURE__*/React.createElement("span", null, "-"), /*#__PURE__*/React.createElement("input", {
-    type: "number",
-    placeholder: "100",
-    value: context.dataVerification.dataRegulation.value2,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.value2 = value;
-      });
-    }
-  }))) : (/*#__PURE__*/React.createElement("div", {
-    className: "input-box"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "number",
-    style: {
-      width: "100%"
-    },
-    placeholder: dataVerification.placeholder3,
-    value: context.dataVerification.dataRegulation.value1,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.value1 = value;
-      });
-    }
-  }))))), ((_context$dataVerifica16 = context.dataVerification) === null || _context$dataVerifica16 === void 0 ? void 0 : (_context$dataVerifica17 = _context$dataVerifica16.dataRegulation) === null || _context$dataVerifica17 === void 0 ? void 0 : _context$dataVerifica17.type) === "text_content" && (/*#__PURE__*/React.createElement("div", {
-    className: "show-box-item"
-  }, /*#__PURE__*/React.createElement("select", {
-    className: "data-verification-type-select",
+  })))), ((_context$dataVerifica0 = context.dataVerification) === null || _context$dataVerifica0 === void 0 ? void 0 : (_context$dataVerifica1 = _context$dataVerifica0.dataRegulation) === null || _context$dataVerifica1 === void 0 ? void 0 : _context$dataVerifica1.type) === "date" && (/*#__PURE__*/React.createElement("div", {
+    className: "mt-4"
+  }, /*#__PURE__*/React.createElement(Select$1, {
     value: context.dataVerification.dataRegulation.type2,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.type2 = value;
-        ctx.dataVerification.dataRegulation.value1 = "";
-        ctx.dataVerification.dataRegulation.value2 = "";
-      });
-    }
-  }, ["include", "exclude", "equal"].map(function (v) {
-    return /*#__PURE__*/React.createElement("option", {
-      value: v,
-      key: v
-    }, dataVerification[v]);
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "input-box"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    style: {
-      width: "100%"
-    },
-    placeholder: dataVerification.placeholder4,
-    value: context.dataVerification.dataRegulation.value1,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.value1 = value;
-      });
-    }
-  })))), ((_context$dataVerifica18 = context.dataVerification) === null || _context$dataVerifica18 === void 0 ? void 0 : (_context$dataVerifica19 = _context$dataVerifica18.dataRegulation) === null || _context$dataVerifica19 === void 0 ? void 0 : _context$dataVerifica19.type) === "date" && (/*#__PURE__*/React.createElement("div", {
-    className: "show-box-item"
-  }, /*#__PURE__*/React.createElement("select", {
-    className: "data-verification-type-select",
-    value: context.dataVerification.dataRegulation.type2,
-    onChange: function onChange(e) {
-      var value = e.target.value;
+    onValueChange: function onValueChange(value) {
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.type2 = value;
         ctx.dataVerification.dataRegulation.value1 = "";
         ctx.dataVerification.dataRegulation.value2 = "";
       });
     }
-  }, dateCondition.map(function (v) {
-    return /*#__PURE__*/React.createElement("option", {
+  }, /*#__PURE__*/React.createElement(SelectTrigger, null, /*#__PURE__*/React.createElement(SelectValue, null)), /*#__PURE__*/React.createElement(SelectContent, null, dateCondition.map(function (v) {
+    return /*#__PURE__*/React.createElement(SelectItem$1, {
       value: v,
       key: v
     }, dataVerification[v]);
-  })), context.dataVerification.dataRegulation.type2 === "between" || context.dataVerification.dataRegulation.type2 === "notBetween" ? (/*#__PURE__*/React.createElement("div", {
-    className: "input-box"
+  }))), context.dataVerification.dataRegulation.type2 === "between" || context.dataVerification.dataRegulation.type2 === "notBetween" ? (/*#__PURE__*/React.createElement("div", {
+    className: "mt-4 flex gap-2 items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "datepicker-toggle"
   }, /*#__PURE__*/React.createElement("input", {
     type: "date",
-    placeholder: "1",
+    className: "datepicker-input",
     value: context.dataVerification.dataRegulation.value1,
     onChange: function onChange(e) {
       var value = e.target.value;
@@ -2959,9 +2850,13 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value1 = value;
       });
     }
-  }), /*#__PURE__*/React.createElement("span", null, "-"), /*#__PURE__*/React.createElement("input", {
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "datepicker-toggle-button"
+  })), /*#__PURE__*/React.createElement("span", null, "-"), /*#__PURE__*/React.createElement("div", {
+    className: "datepicker-toggle"
+  }, /*#__PURE__*/React.createElement("input", {
     type: "date",
-    placeholder: "100",
+    className: "datepicker-input",
     value: context.dataVerification.dataRegulation.value2,
     onChange: function onChange(e) {
       var value = e.target.value;
@@ -2969,13 +2864,15 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value2 = value;
       });
     }
-  }))) : (/*#__PURE__*/React.createElement("div", {
-    className: "input-box"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "datepicker-toggle-button"
+  })))) : (/*#__PURE__*/React.createElement("div", {
+    className: "mt-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "datepicker-toggle"
   }, /*#__PURE__*/React.createElement("input", {
     type: "date",
-    style: {
-      width: "100%"
-    },
+    className: "datepicker-input",
     placeholder: dataVerification.placeholder3,
     value: context.dataVerification.dataRegulation.value1,
     onChange: function onChange(e) {
@@ -2984,57 +2881,35 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value1 = value;
       });
     }
-  }))))), ((_context$dataVerifica20 = context.dataVerification) === null || _context$dataVerifica20 === void 0 ? void 0 : (_context$dataVerifica21 = _context$dataVerifica20.dataRegulation) === null || _context$dataVerifica21 === void 0 ? void 0 : _context$dataVerifica21.type) === "validity" && (/*#__PURE__*/React.createElement("div", {
-    className: "show-box-item"
-  }, /*#__PURE__*/React.createElement("select", {
-    className: "data-verification-type-select",
-    value: context.dataVerification.dataRegulation.type2,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.type2 = value;
-        ctx.dataVerification.dataRegulation.value1 = "";
-        ctx.dataVerification.dataRegulation.value2 = "";
-      });
-    }
-  }, ["identificationNumber", "phoneNumber"].map(function (v) {
-    return /*#__PURE__*/React.createElement("option", {
-      value: v,
-      key: v
-    }, dataVerification[v]);
-  }))))), /*#__PURE__*/React.createElement("div", {
-    className: "box-item"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "datepicker-toggle-button"
+  }))))))), /*#__PURE__*/React.createElement(Divider$2, {
+    className: "w-full border-t-[1px]"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-2"
   }, ["prohibitInput", "hintShow"].map(function (v) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "check",
-      key: "div".concat(v)
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
-      id: v,
-      key: "input".concat(v),
+      key: v,
+      className: "flex items-center"
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      className: "border-2",
       checked: context.dataVerification.dataRegulation[v],
-      onChange: function onChange() {
+      onCheckedChange: function onCheckedChange(e) {
+        var checked = e.target.checked;
         setContext(function (ctx) {
           var _ctx$dataVerification5;
           var dataRegulation = (_ctx$dataVerification5 = ctx.dataVerification) === null || _ctx$dataVerification5 === void 0 ? void 0 : _ctx$dataVerification5.dataRegulation;
           if (v === "prohibitInput") {
-            dataRegulation.prohibitInput = !dataRegulation.prohibitInput;
+            dataRegulation.prohibitInput = checked;
           } else if (v === "hintShow") {
-            dataRegulation.hintShow = !dataRegulation.hintShow;
+            dataRegulation.hintShow = checked;
           }
         });
       }
-    }), /*#__PURE__*/React.createElement("label", {
-      htmlFor: v,
-      key: "label".concat(v)
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "ml-2"
     }, dataVerification[v]));
-  }), ((_context$dataVerifica22 = context.dataVerification) === null || _context$dataVerifica22 === void 0 ? void 0 : (_context$dataVerifica23 = _context$dataVerifica22.dataRegulation) === null || _context$dataVerifica23 === void 0 ? void 0 : _context$dataVerifica23.hintShow) && (/*#__PURE__*/React.createElement("div", {
-    className: "input-box"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    style: {
-      width: "100%"
-    },
+  }), ((_context$dataVerifica10 = context.dataVerification) === null || _context$dataVerifica10 === void 0 ? void 0 : (_context$dataVerifica11 = _context$dataVerifica10.dataRegulation) === null || _context$dataVerifica11 === void 0 ? void 0 : _context$dataVerifica11.hintShow) && (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TextField, {
     placeholder: dataVerification.placeholder5,
     value: context.dataVerification.dataRegulation.hintValue,
     onChange: function onChange(e) {
@@ -3043,25 +2918,37 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.hintValue = value;
       });
     }
-  }))))), /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-primary",
+  }))))), /*#__PURE__*/React.createElement(Divider$2, {
+    className: "w-full border-t-[1px] my-4"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2 justify-between items-center"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
     onClick: function onClick() {
-      btn("confirm");
+      btn("close");
+    }
+  }, button.cancel), /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
     },
-    tabIndex: 0
-  }, button.confirm), /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-close",
     onClick: function onClick() {
       btn("delete");
+    }
+  }, dataVerification.deleteVerification), /*#__PURE__*/React.createElement(Button$1, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
     },
-    tabIndex: 0
-  }, dataVerification.deleteVerification), /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-close",
     onClick: function onClick() {
-      btn("close");
-    },
-    tabIndex: 0
-  }, button.cancel));
+      btn("confirm");
+    }
+  }, button.confirm))));
 };
 
 function getDisplayedRangeTxt(context) {
@@ -3073,12 +2960,7 @@ function getDisplayedRangeTxt(context) {
   return (_context$rangeDialog$ = (_context$rangeDialog = context.rangeDialog) === null || _context$rangeDialog === void 0 ? void 0 : _context$rangeDialog.rangeTxt) !== null && _context$rangeDialog$ !== void 0 ? _context$rangeDialog$ : "";
 }
 
-var datepickerStyles = "\n  .datepicker-toggle {\n    display: inline-block;\n    position: relative;\n    width: 100%;\n  }\n  \n  .datepicker-toggle-button {\n    opacity: 0.3;\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 16px;\n    height: 16px;\n    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjQiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGxpbmUgeDE9IjE2IiB5MT0iMiIgeDI9IjE2IiB5Mj0iNiI+PC9saW5lPjxsaW5lIHgxPSI4IiB5MT0iMiIgeDI9IjgiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjMiIHkxPSIxMCIgeDI9IjIxIiB5Mj0iMTAiPjwvbGluZT48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-position: center;\n    pointer-events: none;\n  }\n  \n  .datepicker-input {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #1a202c;\n    background-color: #fff;\n    cursor: pointer;\n  }\n  \n  .datepicker-input::-webkit-calendar-picker-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0;\n  }\n  \n  .datepicker-input:focus {\n    outline: none;\n    border-color: #4299e1;\n    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);\n  }\n";
-if (typeof document !== "undefined") {
-  var styleSheet = document.createElement("style");
-  styleSheet.textContent = datepickerStyles;
-  document.head.appendChild(styleSheet);
-}
+injectDatepickerStyles();
 var ConditionRules = function ConditionRules(_ref) {
   var type = _ref.type;
   var _useContext = useContext(WorkbookContext),
@@ -3399,7 +3281,8 @@ var RangeDialog = function RangeDialog() {
     showDialog = _useDialog.showDialog;
   var _locale = locale(context),
     dataVerification = _locale.dataVerification,
-    button = _locale.button;
+    button = _locale.button,
+    toolbar = _locale.toolbar;
   var _useState = useState(getDisplayedRangeTxt(context)),
     _useState2 = _slicedToArray(_useState, 2),
     rangeTxt2 = _useState2[0],
@@ -3424,7 +3307,7 @@ var RangeDialog = function RangeDialog() {
       }), undefined, locale(context).conditionformat["conditionformat_".concat(rulesType)]);
       return;
     }
-    showDialog(/*#__PURE__*/React.createElement(DataVerification, null));
+    showDialog(/*#__PURE__*/React.createElement(DataVerification, null), undefined, toolbar.dataVerification);
   }, [setContext, showDialog, context]);
   useEffect(function () {
     setRangeTxt2(getDisplayedRangeTxt(context));
@@ -3613,7 +3496,7 @@ var DropDownList = function DropDownList() {
             arr.splice(index, 1);
           }
           setSelected(arr);
-          setDropcownValue(ctx, v, arr);
+          setDropdownValue(ctx, v, arr);
         });
       },
       tabIndex: 0
@@ -4083,8 +3966,9 @@ var SheetOverlay = function SheetOverlay() {
       display: "none"
     }
   }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "combo-arrow",
-    width: 16
+    name: "caret-down-fill",
+    width: 16,
+    height: 16
   })), context.dataVerificationDropDownList && /*#__PURE__*/React.createElement(DropDownList, null), /*#__PURE__*/React.createElement("div", {
     id: "luckysheet-dataVerification-showHintBox",
     className: "luckysheet-mousedown-cancel",
@@ -4403,6 +4287,9 @@ var Combo = function Combo(_ref) {
     setPopupPosition = _useState4[1];
   var popupRef = useRef(null);
   var buttonRef = useRef(null);
+  var isLucideIcon = useMemo(function () {
+    return (iconId === null || iconId === void 0 ? void 0 : iconId.startsWith("align-")) || ["text-overflow", "text-wrap", "text-clip"].includes(iconId);
+  }, [iconId]);
   useOutsideClick(popupRef, function () {
     setOpen(false);
   });
@@ -4430,7 +4317,7 @@ var Combo = function Combo(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     ref: buttonRef,
     className: "fortune-toolbar-combo"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, !isLucideIcon ? (/*#__PURE__*/React.createElement("div", {
     className: "fortune-toolbar-combo-button",
     onClick: function onClick(e) {
       if (_onClick) {
@@ -4449,7 +4336,13 @@ var Combo = function Combo(_ref) {
     name: iconId
   })) : (/*#__PURE__*/React.createElement("span", {
     className: "fortune-toolbar-combo-text"
-  }, text !== undefined ? text : ""))), showArrow && (/*#__PURE__*/React.createElement("div", {
+  }, text !== undefined ? text : "")))) : (/*#__PURE__*/React.createElement(IconButton, {
+    icon: getIcon(iconId),
+    variant: "ghost",
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
+  })), showArrow && (/*#__PURE__*/React.createElement("div", {
     className: "fortune-toolbar-combo-arrow",
     onClick: function onClick() {
       return setOpen(!open);
@@ -5354,6 +5247,30 @@ var FormatSearch = function FormatSearch(_ref) {
   }, button.cancel)));
 };
 
+var getIcon = function getIcon(title) {
+  switch (title) {
+    case "align-left":
+      return "AlignLeft";
+    case "align-center":
+      return "AlignCenter";
+    case "align-right":
+      return "AlignRight";
+    case "align-top":
+      return "ArrowUpFromLine";
+    case "align-middle":
+      return "AlignVerticalMiddle";
+    case "align-bottom":
+      return "ArrowDownFromLine";
+    case "text-overflow":
+      return "TextOverflow";
+    case "text-wrap":
+      return "WrapText";
+    case "text-clip":
+      return "TextClip";
+    default:
+      return "";
+  }
+};
 var Toolbar = function Toolbar(_ref) {
   var _context$luckysheet_s, _flowdata$row, _settings$customToolb;
   var setMoreItems = _ref.setMoreItems,
@@ -5690,27 +5607,38 @@ var Toolbar = function Toolbar(_ref) {
         tooltip: toolbar.horizontalAlign,
         showArrow: false
       }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, items.map(function (_ref3) {
-          var text = _ref3.text,
-            title = _ref3.title;
-          return /*#__PURE__*/React.createElement(Option, {
+        return /*#__PURE__*/React.createElement(Select, {
+          style: {
+            minWidth: "fit-content",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 4
+          }
+        }, items.map(function (_ref3) {
+          var _$find2;
+          var title = _ref3.title;
+          return /*#__PURE__*/React.createElement(IconButton, {
             key: title,
+            isActive: ((_$find2 = _.find(items, function (item) {
+              return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.ht);
+            })) === null || _$find2 === void 0 ? void 0 : _$find2.title) === title,
+            icon: getIcon(title),
+            variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
                 handleHorizontalAlign(ctx, refs.cellInput.current, title.replace("align-", ""));
               });
               setOpen(false);
-            }
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: title
-          })));
+            },
+            tabIndex: 0
+          });
         }));
       });
     }
     if (name === "vertical-align") {
-      var _$find2;
+      var _$find3;
       var _items = [{
         title: "align-top",
         text: align.top,
@@ -5725,29 +5653,40 @@ var Toolbar = function Toolbar(_ref) {
         value: 2
       }];
       return /*#__PURE__*/React.createElement(Combo, {
-        iconId: ((_$find2 = _.find(_items, function (item) {
+        iconId: ((_$find3 = _.find(_items, function (item) {
           return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.vt);
-        })) === null || _$find2 === void 0 ? void 0 : _$find2.title) || "align-top",
+        })) === null || _$find3 === void 0 ? void 0 : _$find3.title) || "align-top",
         key: name,
         tooltip: toolbar.verticalAlign,
         showArrow: false
       }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, _items.map(function (_ref4) {
-          var text = _ref4.text,
-            title = _ref4.title;
-          return /*#__PURE__*/React.createElement(Option, {
+        return /*#__PURE__*/React.createElement(Select, {
+          style: {
+            minWidth: "fit-content",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 4
+          }
+        }, _items.map(function (_ref4) {
+          var _$find4;
+          var title = _ref4.title;
+          return /*#__PURE__*/React.createElement(IconButton, {
             key: title,
+            isActive: ((_$find4 = _.find(_items, function (item) {
+              return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.vt);
+            })) === null || _$find4 === void 0 ? void 0 : _$find4.title) === title,
+            icon: getIcon(title),
+            variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
                 handleVerticalAlign(ctx, refs.cellInput.current, title.replace("align-", ""));
               });
               setOpen(false);
-            }
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: title
-          })));
+            },
+            tabIndex: 0
+          });
         }));
       });
     }
@@ -5822,7 +5761,7 @@ var Toolbar = function Toolbar(_ref) {
         key: name,
         onClick: function onClick() {
           if (context.allowEdit === false) return;
-          showDialog(/*#__PURE__*/React.createElement(DataVerification, null));
+          showDialog(/*#__PURE__*/React.createElement(DataVerification, null), undefined, toolbar.dataVerification);
         }
       });
     }
@@ -6296,12 +6235,23 @@ var Toolbar = function Toolbar(_ref) {
         tooltip: toolbar.textWrap,
         showArrow: false
       }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, _items6.map(function (_ref1) {
-          var text = _ref1.text,
-            iconId = _ref1.iconId,
+        return /*#__PURE__*/React.createElement(Select, {
+          style: {
+            minWidth: "fit-content",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 4
+          }
+        }, _items6.map(function (_ref1) {
+          var iconId = _ref1.iconId,
             value = _ref1.value;
-          return /*#__PURE__*/React.createElement(Option, {
+          return /*#__PURE__*/React.createElement(IconButton, {
             key: value,
+            isActive: _curr.value === value,
+            icon: getIcon(iconId),
+            variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
                 var d = getFlowdata(ctx);
@@ -6309,12 +6259,9 @@ var Toolbar = function Toolbar(_ref) {
                 updateFormat(ctx, refs.cellInput.current, d, "tb", value);
               });
               setOpen(false);
-            }
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: iconId
-          })));
+            },
+            tabIndex: 0
+          });
         }));
       });
     }
@@ -9651,6 +9598,21 @@ var SVGDefines = function SVGDefines(_ref) {
     "clip-rule": "evenodd",
     d: "M12.75 2.25C13.1642 2.25 13.5 2.58579 13.5 3V15C13.5 15.4142 13.1642 15.75 12.75 15.75C12.3358 15.75 12 15.4142 12 15V3C12 2.58579 12.3358 2.25 12.75 2.25Z",
     fill: "#363B3F"
+  })), /*#__PURE__*/React.createElement("symbol", {
+    id: "caret-down-fill",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "14",
+    height: "14",
+    rx: "4",
+    fill: "black",
+    "fill-opacity": "0.1"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6.64775 8.97978L3.77152 6.10355C3.45654 5.78857 3.67962 5.25 4.12507 5.25H9.87753C10.323 5.25 10.5461 5.78857 10.2311 6.10355L7.35486 8.97978C7.15959 9.17504 6.84301 9.17504 6.64775 8.97978Z",
+    fill: "#363B3F"
   }))));
 };