@fileverse-dev/fortune-react 1.0.2-mod-62 → 1.0.2-mod-64

package/dist/components/Toolbar/index.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import "./index.css";
-export declare const getLucideIcon: (title: string) => "Undo" | "Redo" | "Bold" | "Italic" | "Strikethrough" | "Underline" | "AlignLeft" | "AlignCenter" | "AlignRight" | "ArrowUpFromLine" | "AlignVerticalMiddle" | "ArrowDownToLine" | "TextOverflow" | "WrapText" | "TextClip" | "Baseline" | "PaintBucket" | "Border" | "MergeHorizontal" | "JapaneseYen" | "Percent" | "DecimalsArrowLeft" | "DecimalsArrowRight" | "PaintbrushVertical" | "Filter" | "Link" | "MessageSquarePlus" | "Image" | "Sigma" | "ShieldCheck" | "Search" | "DuneChart" | "Ellipsis" | "";
+export declare const getLucideIcon: (title: string) => "Undo" | "Redo" | "Bold" | "Italic" | "Strikethrough" | "Underline" | "AlignLeft" | "AlignCenter" | "AlignRight" | "ArrowUpFromLine" | "AlignVerticalMiddle" | "ArrowDownToLine" | "TextOverflow" | "WrapText" | "TextClip" | "Baseline" | "PaintBucket" | "Border" | "MergeHorizontal" | "DollarSign" | "Percent" | "DecimalsArrowLeft" | "DecimalsArrowRight" | "PaintbrushVertical" | "Filter" | "Link" | "MessageSquarePlus" | "Image" | "Sigma" | "ShieldCheck" | "Search" | "DuneChart" | "Ellipsis" | "";
 declare const Toolbar: React.FC<{
     setMoreItems: React.Dispatch<React.SetStateAction<React.ReactNode>>;
     moreItemsOpen: boolean;

package/dist/index.css

@@ -2332,7 +2332,7 @@ input[type="number"].condition-rules-project-input {
 
 .fortune-toolbar-button:active,
 .fortune-toolbar-combo:active {
-  background-color: rgba(0, 0, 0, 0.12);
+  /* background-color: rgba(0, 0, 0, 0.12); */
   cursor: pointer;
 }
 
@@ -2458,13 +2458,16 @@ input[type="number"].condition-rules-project-input {
   flex-direction: row;
   align-items: center;
   align-self: flex-end;
-  top: 40px;
+  top: 32px;
   right: 0px;
   max-width: 348px;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
   background: white;
   flex-wrap: wrap;
   z-index: 1002;
+  padding: 8px;
+  border-radius: 8px;
+  border: 1px solid hsl(var(--color-border-default));
 }
 
 .fortune-toolbar-subtext {
@@ -2505,9 +2508,9 @@ input[type="number"].condition-rules-project-input {
 
 #fortune-custom-color {
   min-width: 164px;
-  background: #fff;
-  border-radius: 4px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  background: hsl(var(--color-bg-default));
+  border-radius: 8px;
+  border: 1px solid hsl(var(--color-border-default));
   font-size: 12px;
   padding: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
@@ -2532,7 +2535,7 @@ input[type="number"].condition-rules-project-input {
   background: white;
   padding: 4px 8px;
   height: 30px;
-  border-radius: 4px 4px 0px 0px;
+  border-radius: 4px;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -2542,7 +2545,8 @@ input[type="number"].condition-rules-project-input {
 }
 
 #fortune-custom-color .color-reset:hover {
-  background: rgb(230, 230, 230);
+  background: hsl(var(--color-bg-default-hover));
+  transition: all 0.2s ease-in-out;
 }
 
 #fortune-custom-color .custom-color {
@@ -3711,35 +3715,45 @@ label {
 .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
 #fortune-change-color {
   min-width: 164px;
-  height: 252px;
-  background: rgb(240, 240, 240);
+  background: hsl(var(--color-bg-default));
   position: absolute;
-  bottom: 10px;
-  left: 100px;
+  top: -100px;
+  left: 232px;
   border-radius: 6px;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 8px;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+  border: 1px solid hsl(var(--color-border-default));
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 #fortune-change-color .color-reset {
   position: relative;
-  color: #333;
+  color: hsl(var(--color-text-default));
   cursor: pointer;
   list-style: none;
-  padding: 10px;
+  padding: 4px 8px;
   white-space: nowrap;
-  padding-left: 8px;
   vertical-align: middle;
   padding-right: 24px;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  border-radius: 6px;
-  background: white;
+  border-radius: 4px;
+  background: hsl(var(--color-bg-default));
+  height: 30px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
 }
 
 #fortune-change-color .color-reset:hover {
-  background: rgb(230, 230, 230);
+  background: hsl(var(--color-bg-default-hover));
+  transition: all 0.2s ease-in-out;
 }
 
 #fortune-change-color .custom-color {

package/dist/index.esm.css

@@ -2332,7 +2332,7 @@ input[type="number"].condition-rules-project-input {
 
 .fortune-toolbar-button:active,
 .fortune-toolbar-combo:active {
-  background-color: rgba(0, 0, 0, 0.12);
+  /* background-color: rgba(0, 0, 0, 0.12); */
   cursor: pointer;
 }
 
@@ -2458,13 +2458,16 @@ input[type="number"].condition-rules-project-input {
   flex-direction: row;
   align-items: center;
   align-self: flex-end;
-  top: 40px;
+  top: 32px;
   right: 0px;
   max-width: 348px;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
   background: white;
   flex-wrap: wrap;
   z-index: 1002;
+  padding: 8px;
+  border-radius: 8px;
+  border: 1px solid hsl(var(--color-border-default));
 }
 
 .fortune-toolbar-subtext {
@@ -2505,9 +2508,9 @@ input[type="number"].condition-rules-project-input {
 
 #fortune-custom-color {
   min-width: 164px;
-  background: #fff;
-  border-radius: 4px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  background: hsl(var(--color-bg-default));
+  border-radius: 8px;
+  border: 1px solid hsl(var(--color-border-default));
   font-size: 12px;
   padding: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
@@ -2532,7 +2535,7 @@ input[type="number"].condition-rules-project-input {
   background: white;
   padding: 4px 8px;
   height: 30px;
-  border-radius: 4px 4px 0px 0px;
+  border-radius: 4px;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -2542,7 +2545,8 @@ input[type="number"].condition-rules-project-input {
 }
 
 #fortune-custom-color .color-reset:hover {
-  background: rgb(230, 230, 230);
+  background: hsl(var(--color-bg-default-hover));
+  transition: all 0.2s ease-in-out;
 }
 
 #fortune-custom-color .custom-color {
@@ -3711,35 +3715,45 @@ label {
 .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
 #fortune-change-color {
   min-width: 164px;
-  height: 252px;
-  background: rgb(240, 240, 240);
+  background: hsl(var(--color-bg-default));
   position: absolute;
-  bottom: 10px;
-  left: 100px;
+  top: -100px;
+  left: 232px;
   border-radius: 6px;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 8px;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+  border: 1px solid hsl(var(--color-border-default));
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 #fortune-change-color .color-reset {
   position: relative;
-  color: #333;
+  color: hsl(var(--color-text-default));
   cursor: pointer;
   list-style: none;
-  padding: 10px;
+  padding: 4px 8px;
   white-space: nowrap;
-  padding-left: 8px;
   vertical-align: middle;
   padding-right: 24px;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  border-radius: 6px;
-  background: white;
+  border-radius: 4px;
+  background: hsl(var(--color-bg-default));
+  height: 30px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
 }
 
 #fortune-change-color .color-reset:hover {
-  background: rgb(230, 230, 230);
+  background: hsl(var(--color-bg-default-hover));
+  transition: all 0.2s ease-in-out;
 }
 
 #fortune-change-color .custom-color {

package/dist/index.esm.js

@@ -5326,6 +5326,7 @@ var CustomColor = function CustomColor(_ref) {
 };
 
 var FormatSearch = function FormatSearch(_ref) {
+  var _toolbarFormat$select, _toolbarFormat$select2;
   var type = _ref.type,
     _onCancel = _ref.onCancel;
   var _useContext = useContext(WorkbookContext),
@@ -5357,7 +5358,6 @@ var FormatSearch = function FormatSearch(_ref) {
   var toolbarFormat = useMemo(function () {
     return toolbarFormatAll[type];
   }, [toolbarFormatAll, type]);
-  var tips = _.get(format, type);
   var onConfirm = useCallback(function () {
     if (decimalPlace < 0 || decimalPlace > 9) {
       _onCancel();
@@ -5393,60 +5393,62 @@ var FormatSearch = function FormatSearch(_ref) {
     _onCancel();
   }, [_onCancel, cellInput, setContext]);
   return /*#__PURE__*/React.createElement("div", {
-    id: "luckysheet-search-format"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "listbox",
-    style: {
-      height: 200
-    }
+    className: "format-search"
   }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-4"
+  }, type === "currency" && (/*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-body-sm",
     style: {
-      marginBottom: 16
+      width: "180px"
     }
-  }, tips, format.format, "\uFF1A"), /*#__PURE__*/React.createElement("div", {
-    className: "inpbox",
-    style: type === "currency" ? {
-      display: "block"
-    } : {
-      display: "none"
-    }
-  }, format.decimalPlaces, "\uFF1A", /*#__PURE__*/React.createElement("input", {
-    className: "decimal-places-input",
-    id: "decimal-places-input",
+  }, format.decimalPlaces, "\uFF1A"), /*#__PURE__*/React.createElement(TextField, {
+    className: "w-full",
+    type: "number",
     min: 0,
     max: 9,
     defaultValue: 2,
-    type: "number",
     onChange: function onChange(e) {
       setDecimalPlace(parseInt(e.target.value, 10));
     }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "format-list"
-  }, toolbarFormat.map(function (v, index) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "listBox".concat(index === selectedFormatIndex ? " on" : ""),
-      key: v.name,
-      onClick: function onClick() {
-        setSelectedFormatIndex(index);
-      },
-      tabIndex: 0
-    }, /*#__PURE__*/React.createElement("div", null, v.name), /*#__PURE__*/React.createElement("div", null, v.value));
   }))), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-dialog-box-button-container",
-    style: type === "currency" ? {
-      marginTop: 40
-    } : {
-      marginTop: 30
+    className: "flex flex-col gap-2"
+  }, /*#__PURE__*/React.createElement(Select$1, {
+    value: String(selectedFormatIndex),
+    onValueChange: function onValueChange(value) {
+      setSelectedFormatIndex(Number(value));
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-message-box-button button-primary",
-    onClick: onConfirm,
-    tabIndex: 0
-  }, button.confirm), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-message-box-button button-default",
+  }, /*#__PURE__*/React.createElement(SelectTrigger, {
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement(SelectValue, null, (_toolbarFormat$select = toolbarFormat[selectedFormatIndex]) === null || _toolbarFormat$select === void 0 ? void 0 : _toolbarFormat$select.name, " ", (_toolbarFormat$select2 = toolbarFormat[selectedFormatIndex]) === null || _toolbarFormat$select2 === void 0 ? void 0 : _toolbarFormat$select2.value)), /*#__PURE__*/React.createElement(SelectContent, null, toolbarFormat.map(function (v, index) {
+    return /*#__PURE__*/React.createElement(SelectItem$1, {
+      key: v.name,
+      value: String(index)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "flex justify-between w-full"
+    }, /*#__PURE__*/React.createElement("span", null, v.name), /*#__PURE__*/React.createElement("span", {
+      className: "text-body-sm text-icon-secondary"
+    }, v.value)));
+  }))))), /*#__PURE__*/React.createElement(Divider$2, {
+    className: "w-full border-t-[1px] my-4"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2 justify-end"
+  }, /*#__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: onConfirm,
+    tabIndex: 0
+  }, button.confirm)));
 };
 
 var DuneChartsInputModal = function DuneChartsInputModal(_ref) {
@@ -5594,9 +5596,9 @@ var getLucideIcon = function getLucideIcon(title) {
     case "merge-all":
       return "MergeHorizontal";
     case "format":
-      return "JapaneseYen";
+      return "DollarSign";
     case "currency-format":
-      return "JapaneseYen";
+      return "DollarSign";
     case "percentage-format":
       return "Percent";
     case "number-decrease":
@@ -5654,6 +5656,10 @@ var Toolbar = function Toolbar(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     showDuneModal = _useState6[0],
     setShowDuneModal = _useState6[1];
+  var _useState7 = useState(window.innerWidth >= 1280),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isDesktop = _useState8[0],
+    setIsDesktop = _useState8[1];
   var _useDialog = useDialog(),
     showDialog = _useDialog.showDialog,
     hideDialog = _useDialog.hideDialog;
@@ -5684,12 +5690,12 @@ var Toolbar = function Toolbar(_ref) {
   var sheetWidth = context.luckysheetTableContentHW[0];
   var currency = settings.currency;
   var defaultFormat = defaultFmt(currency);
-  var _useState7 = useState("#000000"),
-    _useState8 = _slicedToArray(_useState7, 1),
-    customColor = _useState8[0];
-  var _useState9 = useState("1"),
+  var _useState9 = useState("#000000"),
     _useState0 = _slicedToArray(_useState9, 1),
-    customStyle = _useState0[0];
+    customColor = _useState0[0];
+  var _useState1 = useState("1"),
+    _useState10 = _slicedToArray(_useState1, 1),
+    customStyle = _useState10[0];
   var showSubMenu = useCallback(function (e, className) {
     var target = e.target;
     var menuItem = target.className === "fortune-toolbar-menu-line" ? target.parentElement : target;
@@ -5717,6 +5723,15 @@ var Toolbar = function Toolbar(_ref) {
     if (_.isNil(subMenu)) return;
     subMenu.style.display = "none";
   }, []);
+  useEffect(function () {
+    var handleResize = function handleResize() {
+      setIsDesktop(window.innerWidth >= 1280);
+    };
+    window.addEventListener("resize", handleResize);
+    return function () {
+      return window.removeEventListener("resize", handleResize);
+    };
+  }, []);
   useEffect(function () {
     setToolbarWrapIndex(-1);
   }, [settings.toolbarItems, settings.customToolbarItems]);
@@ -5737,6 +5752,11 @@ var Toolbar = function Toolbar(_ref) {
     }
   }, [toolbarWrapIndex, sheetWidth]);
   useEffect(function () {
+    if (isDesktop) {
+      setToolbarWrapIndex(-1);
+      setMoreItems(null);
+      return;
+    }
     if (itemLocations.length === 0) return;
     var container = containerRef.current;
     if (!container) return;
@@ -5753,7 +5773,7 @@ var Toolbar = function Toolbar(_ref) {
         break;
       }
     }
-  }, [itemLocations, setMoreItems, settings.toolbarItems.length, sheetWidth]);
+  }, [itemLocations, setMoreItems, settings.toolbarItems.length, sheetWidth, isDesktop]);
   var getToolbarItem = useCallback(function (name, i) {
     var _toolbarItemSelectedF;
     var tooltip = toolbar[name];
@@ -5865,7 +5885,7 @@ var Toolbar = function Toolbar(_ref) {
                 showDialog(/*#__PURE__*/React.createElement(FormatSearch, {
                   onCancel: hideDialog,
                   type: "currency"
-                }));
+                }), undefined, "Currency Format");
                 setOpen(false);
               }
             }].map(function (v) {
@@ -6836,9 +6856,9 @@ var Toolbar = function Toolbar(_ref) {
     }, n.children);
   }), ((_settings$customToolb = settings.customToolbarItems) === null || _settings$customToolb === void 0 ? void 0 : _settings$customToolb.length) > 0 ? (/*#__PURE__*/React.createElement(Divider, {
     key: "customDivider"
-  })) : null, (toolbarWrapIndex === -1 ? settings.toolbarItems : settings.toolbarItems.slice(0, toolbarWrapIndex + 1)).map(function (name, i) {
+  })) : null, (toolbarWrapIndex === -1 || isDesktop ? settings.toolbarItems : settings.toolbarItems.slice(0, toolbarWrapIndex + 1)).map(function (name, i) {
     return getToolbarItem(name, i);
-  }), toolbarWrapIndex !== -1 && toolbarWrapIndex < settings.toolbarItems.length - 1 ? (/*#__PURE__*/React.createElement(Button, {
+  }), !isDesktop && toolbarWrapIndex !== -1 && toolbarWrapIndex < settings.toolbarItems.length - 1 ? (/*#__PURE__*/React.createElement(Button, {
     iconId: "Ellipsis",
     tooltip: toolbar.toolMore,
     onClick: function onClick() {
@@ -10701,21 +10721,10 @@ var ChangeColor = function ChangeColor(_ref) {
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext;
-  var _locale = locale(context),
-    toolbar = _locale.toolbar,
-    sheetconfig = _locale.sheetconfig,
-    button = _locale.button;
-  var _useState = useState("#000000"),
+  var _useState = useState(context.luckysheetfile[getSheetIndex(context, context.currentSheetId)].color),
     _useState2 = _slicedToArray(_useState, 2),
-    inputColor = _useState2[0],
-    setInputColor = _useState2[1];
-  var _useState3 = useState(context.luckysheetfile[getSheetIndex(context, context.currentSheetId)].color),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectColor = _useState4[0],
-    setSelectColor = _useState4[1];
-  var certainBtn = useCallback(function () {
-    setSelectColor(inputColor);
-  }, [inputColor]);
+    selectColor = _useState2[0],
+    setSelectColor = _useState2[1];
   useEffect(function () {
     setContext(function (ctx) {
       if (ctx.allowEdit === false) return;
@@ -10731,30 +10740,15 @@ var ChangeColor = function ChangeColor(_ref) {
       return setSelectColor(undefined);
     },
     tabIndex: 0
-  }, sheetconfig.resetColor), /*#__PURE__*/React.createElement("div", {
-    className: "custom-color"
-  }, /*#__PURE__*/React.createElement("div", null, toolbar.customColor, ":"), /*#__PURE__*/React.createElement("input", {
-    type: "color",
-    value: inputColor,
-    onChange: function onChange(e) {
-      return setInputColor(e.target.value);
-    },
-    onFocus: function onFocus() {
-      triggerParentUpdate(true);
-    },
-    onBlur: function onBlur() {
-      triggerParentUpdate(false);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-primary",
-    onClick: function onClick() {
-      certainBtn();
-    },
-    tabIndex: 0
-  }, button.confirm)), /*#__PURE__*/React.createElement(ColorPicker, {
+  }, /*#__PURE__*/React.createElement(SVGIcon, {
+    name: "reset-color",
+    width: 16,
+    height: 16
+  }), "Reset"), /*#__PURE__*/React.createElement(ColorPicker, {
     onPick: function onPick(color) {
-      setInputColor(color);
+      triggerParentUpdate(true);
       setSelectColor(color);
+      triggerParentUpdate(false);
     }
   }));
 };
@@ -10947,14 +10941,14 @@ var SheetTabContextMenu = function SheetTabContextMenu() {
             setIsShowChangeColor(false);
           }
         }
-      }, sheetconfig.changeColor, /*#__PURE__*/React.createElement("span", {
-        className: "change-color-triangle"
-      }, /*#__PURE__*/React.createElement(SVGIcon, {
-        name: "rightArrow",
-        width: 18
-      })), isShowChangeColor && context.allowEdit && (/*#__PURE__*/React.createElement(ChangeColor, {
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center justify-between w-full"
+      }, sheetconfig.changeColor, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "ChevronRight",
+        size: "sm"
+      }), isShowChangeColor && context.allowEdit && (/*#__PURE__*/React.createElement(ChangeColor, {
         triggerParentUpdate: updateShowInputColor
-      })));
+      }))));
     }
     if (name === "focus") {
       return /*#__PURE__*/React.createElement(Menu, {