@fileverse-dev/fortune-react 1.0.97 → 1.0.99

package/es/components/SearchReplace/index.js

@@ -1,4 +1,4 @@
-import { locale, searchAll, searchNext, normalizeSelection, onSearchDialogMoveStart, replace, replaceAll, scrollToHighlightCell } from "@fileverse-dev/fortune-core";
+import { locale, searchAll, searchNext, normalizeSelection, replace, replaceAll, scrollToHighlightCell } from "@fileverse-dev/fortune-core";
 import { Button, Checkbox, cn, Divider, IconButton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TextField } from "@fileverse/ui";
 import produce from "immer";
 import React, { useContext, useState, useCallback, useRef } from "react";
@@ -6,36 +6,35 @@ import _ from "lodash";
 import WorkbookContext from "../../context";
 import { useAlert } from "../../hooks/useAlert";
 import "./index.css";
-var SearchReplace = function SearchReplace(_a) {
-  var getContainer = _a.getContainer;
-  var _b = useContext(WorkbookContext),
-    context = _b.context,
-    setContext = _b.setContext,
-    refs = _b.refs;
+var SearchReplace = function SearchReplace() {
+  var _a = useContext(WorkbookContext),
+    context = _a.context,
+    setContext = _a.setContext,
+    refs = _a.refs;
   var findAndReplace = locale(context).findAndReplace;
+  var _b = useState(""),
+    searchText = _b[0],
+    setSearchText = _b[1];
   var _c = useState(""),
-    searchText = _c[0],
-    setSearchText = _c[1];
-  var _d = useState(""),
-    replaceText = _d[0],
-    setReplaceText = _d[1];
-  var _e = useState([]),
-    searchResult = _e[0],
-    setSearchResult = _e[1];
-  var _f = useState(),
-    selectedCell = _f[0],
-    setSelectedCell = _f[1];
+    replaceText = _c[0],
+    setReplaceText = _c[1];
+  var _d = useState([]),
+    searchResult = _d[0],
+    setSearchResult = _d[1];
+  var _e = useState(),
+    selectedCell = _e[0],
+    setSelectedCell = _e[1];
   var showAlert = useAlert().showAlert;
   var tableContainerRef = useRef(null);
   var searchInputRef = useRef(null);
   var replaceInputRef = useRef(null);
-  var _g = useState({
+  var _f = useState({
       regCheck: false,
       wordCheck: false,
       caseCheck: false
     }),
-    checkMode = _g[0],
-    checkModeReplace = _g[1];
+    checkMode = _f[0],
+    checkModeReplace = _f[1];
   var closeDialog = useCallback(function () {
     _.set(refs.globalCache, "searchDialog.mouseEnter", false);
     setContext(function (draftCtx) {
@@ -48,27 +47,19 @@ var SearchReplace = function SearchReplace(_a) {
       _.set(draft, mode, value);
     }));
   }, []);
-  var getInitialPosition = useCallback(function (container) {
-    var rect = container.getBoundingClientRect();
-    return {
-      left: (rect.width - 500) / 2,
-      top: (rect.height - 200) / 3
-    };
-  }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: "fortune-search-replace",
     className: "fortune-search-replace fortune-dialog",
-    style: getInitialPosition(getContainer()),
+    style: {
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)"
+    },
     onMouseEnter: function onMouseEnter() {
       _.set(refs.globalCache, "searchDialog.mouseEnter", true);
     },
     onMouseLeave: function onMouseLeave() {
       _.set(refs.globalCache, "searchDialog.mouseEnter", false);
-    },
-    onMouseDown: function onMouseDown(e) {
-      var nativeEvent = e.nativeEvent;
-      onSearchDialogMoveStart(refs.globalCache, nativeEvent, getContainer());
-      e.stopPropagation();
     }
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "flex items-center justify-between border-b color-border-default py-3 px-6"

package/es/components/Sheet/index.js

@@ -144,11 +144,12 @@ var Sheet = function Sheet(_a) {
     }
   }, [context, refs.canvas, refs.globalCache.freezen, setContext, sheet.id]);
   var onWheel = useCallback(function (e) {
+    var _a, _b;
     var functionDetailsEl = document.getElementById("function-details");
     var formulaSearchEl = document.getElementById("luckysheet-formula-search-c");
     var isMouseOverFunctionDetails = functionDetailsEl === null || functionDetailsEl === void 0 ? void 0 : functionDetailsEl.matches(":hover");
     var isMouseOverFormulaSearch = formulaSearchEl === null || formulaSearchEl === void 0 ? void 0 : formulaSearchEl.matches(":hover");
-    if (functionDetailsEl && isMouseOverFunctionDetails || formulaSearchEl && isMouseOverFormulaSearch) return;
+    if (functionDetailsEl && isMouseOverFunctionDetails || formulaSearchEl && isMouseOverFormulaSearch || ((_b = (_a = refs === null || refs === void 0 ? void 0 : refs.globalCache) === null || _a === void 0 ? void 0 : _a.searchDialog) === null || _b === void 0 ? void 0 : _b.mouseEnter)) return;
     setContext(function (draftCtx) {
       handleGlobalWheel(draftCtx, e, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
     });

package/es/components/SheetOverlay/FormulaSearch/index.js

@@ -19,7 +19,7 @@ var FormulaSearch = function FormulaSearch(props) {
   var _b = useContext(WorkbookContext),
     context = _b.context,
     isAuthorized = _b.settings.isAuthorized;
-  var authedFunction = ["COINGECKO", "ETHERSCAN", "DEFILLAMA", "GNOSIS", "BASE", "EOA", "PNL", "SAFE", "BLOCKSCOUT", "GNOSIS", "LENS", "FARCASTER", "Ethereum", "SMARTCONTRACT"];
+  var authedFunction = ["COINGECKO", "ETHERSCAN", "DEFILLAMA", "GNOSIS", "BASE", "EOA", "PNL", "SAFE", "BLOCKSCOUT", "GNOSIS", "LENS", "FARCASTER", "Ethereum", "SMARTCONTRACT", "DUNESIM"];
   var filteredDefaultCandidates = context.defaultCandidates.filter(function (item) {
     return !authedFunction.includes(item.n);
   });

package/es/components/Toolbar/Combo.d.ts

@@ -7,6 +7,7 @@ type Props = {
     onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     children: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.ReactNode;
     fillColor?: string;
+    triggerRef?: React.RefObject<HTMLButtonElement | null>;
 };
 declare const Combo: React.FC<Props>;
 export default Combo;

package/es/components/Toolbar/Combo.js

@@ -10,7 +10,8 @@ var Combo = function Combo(_a) {
     _b = _a.showArrow,
     showArrow = _b === void 0 ? true : _b,
     children = _a.children,
-    fillColor = _a.fillColor;
+    fillColor = _a.fillColor,
+    triggerRef = _a.triggerRef;
   var style = {
     userSelect: "none"
   };
@@ -18,6 +19,10 @@ var Combo = function Combo(_a) {
     open = _c[0],
     setOpen = _c[1];
   var buttonRef = useRef(null);
+  var ref = useRef(null);
+  if (!triggerRef) {
+    triggerRef = ref;
+  }
   var handleOpenChange = function handleOpenChange(newOpen) {
     setOpen(newOpen);
   };
@@ -73,7 +78,7 @@ var Combo = function Combo(_a) {
     icon: getLucideIcon(iconId),
     variant: "ghost",
     onClick: function onClick() {
-      return setOpen(!open);
+      setOpen(!open);
     },
     className: cn("fortune-toolbar-combo-button", {
       "custom-color-button": iconId === "font-color" && fillColor,
@@ -94,6 +99,7 @@ var Combo = function Combo(_a) {
     onOpenChange: handleOpenChange,
     modal: true
   }, /*#__PURE__*/React.createElement(PopoverTrigger, {
+    ref: triggerRef,
     asChild: true
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex items-center"

package/es/components/Toolbar/index.css

@@ -11,6 +11,10 @@
   justify-content: space-between;
 }
 
+.dollar-icon:hover {
+  background-color: #f2f4f5;
+}
+
 .fortune-toolbar-divider {
   width: 1px;
   height: 20px;

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

@@ -1,6 +1,12 @@
 import React from "react";
+import { Cell } from "@fileverse-dev/fortune-core";
 import "./index.css";
 export declare const getLucideIcon: (title: string) => "Ethereum" | "DollarSign" | "" | "ChevronDown" | "Undo" | "Redo" | "PaintRoller" | "Bold" | "Italic" | "Strikethrough" | "Underline" | "AlignLeft" | "AlignCenter" | "AlignRight" | "ArrowUpFromLine" | "AlignVerticalMiddle" | "ArrowDownToLine" | "TextOverflow" | "WrapText" | "TextClip" | "Baseline" | "PaintBucket" | "Border" | "MergeHorizontal" | "Percent" | "DecimalsArrowLeft" | "DecimalsArrowRight" | "PaintbrushVertical" | "Filter" | "Link" | "MessageSquarePlus" | "Image" | "Sigma" | "ShieldCheck" | "Search" | "DuneChart" | "Ellipsis";
+export declare const CurrencySelector: ({ cell, defaultTextFormat, toolTipText, }: {
+    cell: Cell | null | undefined;
+    defaultTextFormat: string;
+    toolTipText: string;
+}) => React.JSX.Element;
 declare const Toolbar: React.FC<{
     setMoreItems: React.Dispatch<React.SetStateAction<React.ReactNode>>;
     moreItemsOpen: boolean;

package/es/components/Toolbar/index.js

@@ -227,6 +227,223 @@ export var getLucideIcon = function getLucideIcon(title) {
       return "";
   }
 };
+export var CurrencySelector = function CurrencySelector(_a) {
+  var cell = _a.cell,
+    defaultTextFormat = _a.defaultTextFormat,
+    toolTipText = _a.toolTipText;
+  var _b = useContext(WorkbookContext),
+    context = _b.context,
+    setContext = _b.setContext,
+    refs = _b.refs;
+  var _c = useState(""),
+    searchTerm = _c[0],
+    setSearchTerm = _c[1];
+  var _d = useState(2),
+    decimals = _d[0],
+    setDecimals = _d[1];
+  var _e = useState("USD"),
+    selectedFiat = _e[0],
+    setSelectedFiat = _e[1];
+  var currentFmt = defaultTextFormat;
+  var currentIcon = "currency";
+  if (cell) {
+    var curr_1 = normalizedCellAttr(cell, "ct");
+    if (curr_1 === null || curr_1 === void 0 ? void 0 : curr_1.fa) {
+      var allOptions = __spreadArray(__spreadArray([], CRYPTO_OPTIONS, true), locale(context).currencyDetail.map(function (c) {
+        return {
+          label: c.name,
+          value: c.value,
+          icon: undefined,
+          type: "fiat"
+        };
+      }), true);
+      var found = __spreadArray([], allOptions, true).sort(function (a, b) {
+        return b.value.length - a.value.length;
+      }).find(function (o) {
+        return curr_1.fa.includes(o.value);
+      });
+      if (found) {
+        currentFmt = found.label;
+      }
+    }
+  }
+  var groupedOptions = getGroupedCurrencyOptions(locale(context).currencyDetail);
+  var filterOptions = function filterOptions(options) {
+    if (!searchTerm.trim()) return options;
+    var query = searchTerm.trim().toLowerCase();
+    return options.filter(function (opt) {
+      return query.split(/\s+/).every(function (word) {
+        return opt.label.toLowerCase().includes(word) || opt.value.toLowerCase().includes(word);
+      });
+    });
+  };
+  var dedupeByValue = function dedupeByValue(options) {
+    var seen = new Set();
+    return options.filter(function (opt) {
+      if (seen.has(opt.value)) return false;
+      seen.add(opt.value);
+      return true;
+    });
+  };
+  var handleCurrencyDecimalsChange = function handleCurrencyDecimalsChange(newDecimals) {
+    setDecimals(newDecimals);
+    var isCrypto = false;
+    if (cell && cell.ct && typeof cell.ct.fa === "string") {
+      var _a = cell.ct.fa.match(/"([A-Z]+)"/) || [],
+        matchedDenom = _a[1];
+      if (matchedDenom) isCrypto = true;
+    }
+    updateCellsDecimalFormat({
+      context: context,
+      setContext: setContext,
+      decimals: newDecimals,
+      denomination: isCrypto ? undefined : selectedFiat
+    });
+  };
+  var triggerRef = useRef(null);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "items-center fortune-toolbar-button"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    text: toolTipText,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "",
+    onClick: function onClick() {
+      var _a;
+      (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    },
+    tabIndex: 0,
+    role: "button"
+  }, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: getLucideIcon("currency-format"),
+    width: 16,
+    height: 16
+  }))), /*#__PURE__*/React.createElement(Combo, {
+    iconId: currentIcon,
+    text: currentFmt,
+    key: "currency",
+    tooltip: "",
+    showArrow: true,
+    triggerRef: triggerRef
+  }, function (setOpen) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        minWidth: "20rem",
+        boxShadow: "2px 2px 10px rgba(0, 0, 0, 0.2)",
+        borderRadius: "8px"
+      }
+    }, /*#__PURE__*/React.createElement(Command, {
+      className: "border color-border-default rounded-lg"
+    }, /*#__PURE__*/React.createElement("div", {
+      id: "search-input-container"
+    }, /*#__PURE__*/React.createElement(CommandInput, {
+      placeholder: "Search by name or code",
+      value: searchTerm,
+      onValueChange: setSearchTerm
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "px-4 py-2 border-b color-border-default flex items-center justify-between gap-2 text-body-sm color-text-default",
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }, /*#__PURE__*/React.createElement("span", null, "Decimal places:"), /*#__PURE__*/React.createElement("span", {
+      className: "cds-row flex items-center"
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      icon: "Minus",
+      variant: "ghost",
+      size: "sm",
+      className: "",
+      disabled: decimals === 1,
+      onClick: function onClick() {
+        return handleCurrencyDecimalsChange(Math.max(1, decimals - 1));
+      }
+    }), /*#__PURE__*/React.createElement("input", {
+      type: "number",
+      min: 1,
+      max: 18,
+      value: decimals,
+      onChange: function onChange(e) {
+        return handleCurrencyDecimalsChange(Math.max(1, Math.min(18, Number(e.target.value))));
+      }
+    }), /*#__PURE__*/React.createElement(IconButton, {
+      icon: "Plus",
+      variant: "ghost",
+      size: "sm",
+      disabled: decimals === 18,
+      onClick: function onClick() {
+        return handleCurrencyDecimalsChange(Math.min(18, decimals + 1));
+      }
+    }))), /*#__PURE__*/React.createElement(CommandList, null, /*#__PURE__*/React.createElement(CommandEmpty, {
+      className: "text-center text-body-sm color-text-secondary flex items-center justify-center",
+      style: {
+        minHeight: "5rem"
+      }
+    }, "No results found."), groupedOptions.map(function (group) {
+      var filtered = dedupeByValue(filterOptions(group.options));
+      return /*#__PURE__*/React.createElement(CommandGroup, {
+        key: group.group,
+        heading: group.group
+      }, filtered.map(function (opt) {
+        return /*#__PURE__*/React.createElement(CommandItem, {
+          key: opt.value,
+          value: "".concat(opt.label, " ").concat(opt.value),
+          onSelect: function onSelect() {
+            return __awaiter(void 0, void 0, void 0, function () {
+              return __generator(this, function (_a) {
+                switch (_a.label) {
+                  case 0:
+                    if (!(opt.type === "crypto")) return [3, 2];
+                    return [4, convertCellsToCrypto({
+                      context: context,
+                      setContext: setContext,
+                      denomination: opt.value,
+                      decimals: decimals
+                    })];
+                  case 1:
+                    _a.sent();
+                    return [3, 3];
+                  case 2:
+                    setSelectedFiat(opt.value);
+                    setContext(function (ctx) {
+                      var d = getFlowdata(ctx);
+                      if (d == null) return;
+                      var formatString = "".concat(getFiatSymbol(opt.value), " #,##0.").concat("0".repeat(decimals));
+                      updateFormat(ctx, refs.cellInput.current, d, "ct", formatString);
+                    });
+                    _a.label = 3;
+                  case 3:
+                    setOpen(false);
+                    return [2];
+                }
+              });
+            });
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "fortune-toolbar-menu-line flex items-center justify-between w-full"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "flex items-center gap-2 w-[250px]"
+        }, currentFmt === opt.label ? (/*#__PURE__*/React.createElement(LucideIcon, {
+          name: "Check",
+          className: "w-4 h-4"
+        })) : (/*#__PURE__*/React.createElement("span", {
+          className: "w-4 h-4"
+        })), /*#__PURE__*/React.createElement("span", {
+          className: "truncate flex-1 overflow-hidden whitespace-nowrap"
+        }, opt.label)), opt.type === "crypto" ? (/*#__PURE__*/React.createElement("span", {
+          className: "color-text-secondary"
+        }, /*#__PURE__*/React.createElement(LucideIcon, {
+          name: opt.icon,
+          className: "cds-icon"
+        }), opt.value === "SOL" && (/*#__PURE__*/React.createElement(SVGIcon, {
+          name: "solana",
+          width: 16,
+          height: 16
+        })))) : (/*#__PURE__*/React.createElement("span", {
+          className: "color-text-secondary"
+        }, opt.value))));
+      }));
+    }))));
+  }));
+};
 var Toolbar = function Toolbar(_a) {
   var _b, _c, _d;
   var setMoreItems = _a.setMoreItems,
@@ -286,15 +503,6 @@ var Toolbar = function Toolbar(_a) {
   var defaultFormat = defaultFmt(currency);
   var customColor = useState("#000000")[0];
   var customStyle = useState("1")[0];
-  var _m = useState(""),
-    searchTerm = _m[0],
-    setSearchTerm = _m[1];
-  var _o = useState(2),
-    decimals = _o[0],
-    setDecimals = _o[1];
-  var _p = useState("USD"),
-    selectedFiat = _p[0],
-    setSelectedFiat = _p[1];
   var showSubMenu = useCallback(function (e, className) {
     var target = e.target;
     var menuItem = target.className === "fortune-toolbar-menu-line" ? target.parentElement : target;
@@ -429,11 +637,11 @@ var Toolbar = function Toolbar(_a) {
     if (name === "format") {
       var currentFmt = defaultFormat[0].text;
       if (cell) {
-        var curr_1 = normalizedCellAttr(cell, "ct");
+        var curr_2 = normalizedCellAttr(cell, "ct");
         var format = _.find(defaultFormat, function (v) {
-          return v.value === (curr_1 === null || curr_1 === void 0 ? void 0 : curr_1.fa);
+          return v.value === (curr_2 === null || curr_2 === void 0 ? void 0 : curr_2.fa);
         });
-        if ((curr_1 === null || curr_1 === void 0 ? void 0 : curr_1.fa) != null) {
+        if ((curr_2 === null || curr_2 === void 0 ? void 0 : curr_2.fa) != null) {
           if (format != null) {
             currentFmt = format.text;
           } else {
@@ -1210,12 +1418,12 @@ var Toolbar = function Toolbar(_a) {
         iconId: "text-wrap",
         value: "wrap"
       }];
-      var curr_2 = items_7[0];
+      var curr_3 = items_7[0];
       if ((cell === null || cell === void 0 ? void 0 : cell.tb) != null) {
-        curr_2 = _.get(items_7, cell.tb);
+        curr_3 = _.get(items_7, cell.tb);
       }
       return /*#__PURE__*/React.createElement(Combo, {
-        iconId: curr_2.iconId,
+        iconId: curr_3.iconId,
         key: name,
         tooltip: toolbar.textWrap,
         showArrow: false
@@ -1234,7 +1442,7 @@ var Toolbar = function Toolbar(_a) {
             value = _a.value;
           return /*#__PURE__*/React.createElement(IconButton, {
             key: value,
-            isActive: curr_2.value === value,
+            isActive: curr_3.value === value,
             icon: getLucideIcon(iconId),
             variant: "ghost",
             onClick: function onClick() {
@@ -1388,185 +1596,10 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "currency") {
-      var currentFmt_1 = defaultFormat[0].text;
-      var currentIcon = "currency";
-      if (cell) {
-        var curr_3 = normalizedCellAttr(cell, "ct");
-        if (curr_3 === null || curr_3 === void 0 ? void 0 : curr_3.fa) {
-          var allOptions = __spreadArray(__spreadArray([], CRYPTO_OPTIONS, true), locale(context).currencyDetail.map(function (c) {
-            return {
-              label: c.name,
-              value: c.value,
-              icon: undefined,
-              type: "fiat"
-            };
-          }), true);
-          var found = __spreadArray([], allOptions, true).sort(function (a, b) {
-            return b.value.length - a.value.length;
-          }).find(function (o) {
-            return curr_3.fa.includes(o.value);
-          });
-          if (found) {
-            currentFmt_1 = found.label;
-          }
-        }
-      }
-      var groupedOptions_1 = getGroupedCurrencyOptions(locale(context).currencyDetail);
-      var filterOptions_1 = function filterOptions_1(options) {
-        if (!searchTerm.trim()) return options;
-        var query = searchTerm.trim().toLowerCase();
-        return options.filter(function (opt) {
-          return query.split(/\s+/).every(function (word) {
-            return opt.label.toLowerCase().includes(word) || opt.value.toLowerCase().includes(word);
-          });
-        });
-      };
-      var dedupeByValue_1 = function dedupeByValue_1(options) {
-        var seen = new Set();
-        return options.filter(function (opt) {
-          if (seen.has(opt.value)) return false;
-          seen.add(opt.value);
-          return true;
-        });
-      };
-      var handleCurrencyDecimalsChange_1 = function handleCurrencyDecimalsChange_1(newDecimals) {
-        setDecimals(newDecimals);
-        var isCrypto = false;
-        if (cell && cell.ct && typeof cell.ct.fa === "string") {
-          var _a = cell.ct.fa.match(/"([A-Z]+)"/) || [],
-            matchedDenom = _a[1];
-          if (matchedDenom) isCrypto = true;
-        }
-        updateCellsDecimalFormat({
-          context: context,
-          setContext: setContext,
-          decimals: newDecimals,
-          denomination: isCrypto ? undefined : selectedFiat
-        });
-      };
-      return /*#__PURE__*/React.createElement(Combo, {
-        iconId: currentIcon,
-        text: currentFmt_1,
-        key: name,
-        tooltip: tooltip,
-        showArrow: true
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement("div", {
-          style: {
-            minWidth: "20rem",
-            boxShadow: "2px 2px 10px rgba(0, 0, 0, 0.2)",
-            borderRadius: "8px"
-          }
-        }, /*#__PURE__*/React.createElement(Command, {
-          className: "border color-border-default rounded-lg"
-        }, /*#__PURE__*/React.createElement("div", {
-          id: "search-input-container"
-        }, /*#__PURE__*/React.createElement(CommandInput, {
-          placeholder: "Search by name or code",
-          value: searchTerm,
-          onValueChange: setSearchTerm
-        })), /*#__PURE__*/React.createElement("div", {
-          className: "px-4 py-2 border-b color-border-default flex items-center justify-between gap-2 text-body-sm color-text-default",
-          onClick: function onClick(e) {
-            return e.stopPropagation();
-          }
-        }, /*#__PURE__*/React.createElement("span", null, "Decimal places:"), /*#__PURE__*/React.createElement("span", {
-          className: "cds-row flex items-center"
-        }, /*#__PURE__*/React.createElement(IconButton, {
-          icon: "Minus",
-          variant: "ghost",
-          size: "sm",
-          className: "",
-          disabled: decimals === 1,
-          onClick: function onClick() {
-            return handleCurrencyDecimalsChange_1(Math.max(1, decimals - 1));
-          }
-        }), /*#__PURE__*/React.createElement("input", {
-          type: "number",
-          min: 1,
-          max: 18,
-          value: decimals,
-          onChange: function onChange(e) {
-            return handleCurrencyDecimalsChange_1(Math.max(1, Math.min(18, Number(e.target.value))));
-          }
-        }), /*#__PURE__*/React.createElement(IconButton, {
-          icon: "Plus",
-          variant: "ghost",
-          size: "sm",
-          disabled: decimals === 18,
-          onClick: function onClick() {
-            return handleCurrencyDecimalsChange_1(Math.min(18, decimals + 1));
-          }
-        }))), /*#__PURE__*/React.createElement(CommandList, null, /*#__PURE__*/React.createElement(CommandEmpty, {
-          className: "text-center text-body-sm color-text-secondary flex items-center justify-center",
-          style: {
-            minHeight: "5rem"
-          }
-        }, "No results found."), groupedOptions_1.map(function (group) {
-          var filtered = dedupeByValue_1(filterOptions_1(group.options));
-          return /*#__PURE__*/React.createElement(CommandGroup, {
-            key: group.group,
-            heading: group.group
-          }, filtered.map(function (opt) {
-            return /*#__PURE__*/React.createElement(CommandItem, {
-              key: opt.value,
-              value: "".concat(opt.label, " ").concat(opt.value),
-              onSelect: function onSelect() {
-                return __awaiter(void 0, void 0, void 0, function () {
-                  return __generator(this, function (_a) {
-                    switch (_a.label) {
-                      case 0:
-                        if (!(opt.type === "crypto")) return [3, 2];
-                        return [4, convertCellsToCrypto({
-                          context: context,
-                          setContext: setContext,
-                          denomination: opt.value,
-                          decimals: decimals
-                        })];
-                      case 1:
-                        _a.sent();
-                        return [3, 3];
-                      case 2:
-                        setSelectedFiat(opt.value);
-                        setContext(function (ctx) {
-                          var d = getFlowdata(ctx);
-                          if (d == null) return;
-                          var formatString = "".concat(getFiatSymbol(opt.value), " #,##0.").concat("0".repeat(decimals));
-                          updateFormat(ctx, refs.cellInput.current, d, "ct", formatString);
-                        });
-                        _a.label = 3;
-                      case 3:
-                        setOpen(false);
-                        return [2];
-                    }
-                  });
-                });
-              }
-            }, /*#__PURE__*/React.createElement("div", {
-              className: "fortune-toolbar-menu-line flex items-center justify-between w-full"
-            }, /*#__PURE__*/React.createElement("div", {
-              className: "flex items-center gap-2 w-[250px]"
-            }, currentFmt_1 === opt.label ? (/*#__PURE__*/React.createElement(LucideIcon, {
-              name: "Check",
-              className: "w-4 h-4"
-            })) : (/*#__PURE__*/React.createElement("span", {
-              className: "w-4 h-4"
-            })), /*#__PURE__*/React.createElement("span", {
-              className: "truncate flex-1 overflow-hidden whitespace-nowrap"
-            }, opt.label)), opt.type === "crypto" ? (/*#__PURE__*/React.createElement("span", {
-              className: "color-text-secondary"
-            }, /*#__PURE__*/React.createElement(LucideIcon, {
-              name: opt.icon,
-              className: "cds-icon"
-            }), opt.value === "SOL" && (/*#__PURE__*/React.createElement(SVGIcon, {
-              name: "solana",
-              width: 16,
-              height: 16
-            })))) : (/*#__PURE__*/React.createElement("span", {
-              className: "color-text-secondary"
-            }, opt.value))));
-          }));
-        }))));
+      return /*#__PURE__*/React.createElement(CurrencySelector, {
+        cell: cell,
+        defaultTextFormat: defaultFormat[0].text,
+        toolTipText: toolbar["currency-format"]
       });
     }
     return /*#__PURE__*/React.createElement(Tooltip, {