@fileverse-dev/fortune-react 1.0.2-mod-42 → 1.0.2-mod-44

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

@@ -6,6 +6,7 @@ type Props = {
     disabled?: boolean;
     selected?: boolean;
     children?: React.ReactNode;
+    style?: React.CSSProperties;
 };
 declare const Button: React.FC<Props>;
 export default Button;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import "./index.css";
-export declare const getIcon: (title: string) => "AlignLeft" | "AlignCenter" | "AlignRight" | "ArrowUpFromLine" | "AlignVerticalMiddle" | "ArrowDownFromLine" | "TextOverflow" | "WrapText" | "TextClip" | "";
+export declare const getIcon: (title: string) => "AlignLeft" | "AlignCenter" | "AlignRight" | "ArrowUpFromLine" | "AlignVerticalMiddle" | "ArrowDownToLine" | "TextOverflow" | "WrapText" | "TextClip" | "";
 declare const Toolbar: React.FC<{
     setMoreItems: React.Dispatch<React.SetStateAction<React.ReactNode>>;
     moreItemsOpen: boolean;

package/dist/index.css

@@ -2254,6 +2254,7 @@ input[type="number"].condition-rules-project-input {
   border-bottom: 1px solid #d4d4d4;
   white-space: nowrap;
   align-items: center;
+  gap: 4px;
 }
 
 .fortune-toolbar-divider {
@@ -2289,13 +2290,21 @@ input[type="number"].condition-rules-project-input {
   user-select: none;
   background: 0;
   outline: none;
-  padding: 0;
+  padding: 2px;
   list-style: none;
   text-decoration: none;
   display: flex;
+  justify-content: center;
   align-items: center;
-  padding: 2px;
-  margin: 2px 8px;
+  min-width: 30px;
+  height: 30px;
+  margin: 0;
+}
+
+.fortune-toolbar-button svg,
+.fortune-toolbar-combo svg {
+  width: 16px !important;
+  height: 16px !important;
 }
 
 .fortune-toolbar-combo-button,
@@ -2306,12 +2315,12 @@ input[type="number"].condition-rules-project-input {
 
 .fortune-toolbar-button:hover,
 .fortune-toolbar-combo:hover {
-  background-color: rgba(0, 0, 0, 0.06);
+  background-color: #f2f4f5;
   cursor: pointer;
 }
 
 .fortune-toolbar-combo-arrow:hover {
-  background-color: rgba(0, 0, 0, 0.06);
+  background-color: #f2f4f5;
   cursor: pointer;
 }
 
@@ -2385,6 +2394,7 @@ input[type="number"].condition-rules-project-input {
   margin: 0 4px;
   font-weight: 500;
   font-size: 14px;
+  line-height: 20px;
 }
 
 .fortune-toolbar-color-picker-item {
@@ -2592,6 +2602,20 @@ input[type="number"].condition-rules-project-input {
   background-color: hsl(var(--color-bg-default-hover));
 }
 
+.fortune-toolbar-left {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+
+.fortune-toolbar-right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+
 #fortune-split-column {
   /* position: absolute;
     padding: 30px 42px;
@@ -2791,7 +2815,7 @@ label {
 
 .input-modal {
   position: fixed;
-  top: 25%;
+  top: 16%;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 0.75rem;

package/dist/index.esm.css

@@ -2254,6 +2254,7 @@ input[type="number"].condition-rules-project-input {
   border-bottom: 1px solid #d4d4d4;
   white-space: nowrap;
   align-items: center;
+  gap: 4px;
 }
 
 .fortune-toolbar-divider {
@@ -2289,13 +2290,21 @@ input[type="number"].condition-rules-project-input {
   user-select: none;
   background: 0;
   outline: none;
-  padding: 0;
+  padding: 2px;
   list-style: none;
   text-decoration: none;
   display: flex;
+  justify-content: center;
   align-items: center;
-  padding: 2px;
-  margin: 2px 8px;
+  min-width: 30px;
+  height: 30px;
+  margin: 0;
+}
+
+.fortune-toolbar-button svg,
+.fortune-toolbar-combo svg {
+  width: 16px !important;
+  height: 16px !important;
 }
 
 .fortune-toolbar-combo-button,
@@ -2306,12 +2315,12 @@ input[type="number"].condition-rules-project-input {
 
 .fortune-toolbar-button:hover,
 .fortune-toolbar-combo:hover {
-  background-color: rgba(0, 0, 0, 0.06);
+  background-color: #f2f4f5;
   cursor: pointer;
 }
 
 .fortune-toolbar-combo-arrow:hover {
-  background-color: rgba(0, 0, 0, 0.06);
+  background-color: #f2f4f5;
   cursor: pointer;
 }
 
@@ -2385,6 +2394,7 @@ input[type="number"].condition-rules-project-input {
   margin: 0 4px;
   font-weight: 500;
   font-size: 14px;
+  line-height: 20px;
 }
 
 .fortune-toolbar-color-picker-item {
@@ -2592,6 +2602,20 @@ input[type="number"].condition-rules-project-input {
   background-color: hsl(var(--color-bg-default-hover));
 }
 
+.fortune-toolbar-left {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+
+.fortune-toolbar-right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+
 #fortune-split-column {
   /* position: absolute;
     padding: 30px 42px;
@@ -2791,7 +2815,7 @@ label {
 
 .input-modal {
   position: fixed;
-  top: 25%;
+  top: 16%;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 0.75rem;

package/dist/index.esm.js

@@ -2023,8 +2023,8 @@ var LinkEditCard = function LinkEditCard(_ref) {
     }, /*#__PURE__*/React.createElement(SVGIcon, {
       name: iconId,
       style: {
-        width: 18,
-        height: 18
+        width: 16,
+        height: 16
       }
     }));
   }, []);
@@ -2121,7 +2121,9 @@ var LinkEditCard = function LinkEditCard(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "input-icon"
   }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "link"
+    name: "link",
+    width: 16,
+    height: 16
   })), /*#__PURE__*/React.createElement(TextField, {
     placeholder: "Paste URL",
     value: linkAddress,
@@ -2134,7 +2136,9 @@ var LinkEditCard = function LinkEditCard(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "input-icon"
   }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "link"
+    name: "link",
+    width: 16,
+    height: 16
   })), /*#__PURE__*/React.createElement(Select$1, {
     onValueChange: function onValueChange(value) {
       if (!linkText) setLinkText(value);
@@ -4396,7 +4400,8 @@ var Button = function Button(_ref) {
     iconId = _ref.iconId,
     disabled = _ref.disabled,
     selected = _ref.selected,
-    children = _ref.children;
+    children = _ref.children,
+    style = _ref.style;
   return /*#__PURE__*/React.createElement("div", {
     className: "fortune-toolbar-button fortune-toolbar-item",
     onClick: onClick,
@@ -4406,9 +4411,11 @@ var Button = function Button(_ref) {
     "aria-label": tooltip,
     style: selected ? {
       backgroundColor: "#E7E5EB"
-    } : {}
+    } : style
   }, /*#__PURE__*/React.createElement(SVGIcon, {
     name: iconId,
+    width: 16,
+    height: 16,
     style: disabled ? {
       opacity: 0.3
     } : {}
@@ -4497,7 +4504,9 @@ var Combo = function Combo(_ref) {
     "aria-label": "".concat(tooltip, ": ").concat(text !== undefined ? text : ""),
     style: style
   }, iconId ? (/*#__PURE__*/React.createElement(SVGIcon, {
-    name: iconId
+    name: iconId,
+    width: 16,
+    height: 16
   })) : (/*#__PURE__*/React.createElement("span", {
     className: "fortune-toolbar-combo-text"
   }, text !== undefined ? text : "")))) : (/*#__PURE__*/React.createElement(IconButton, {
@@ -5213,6 +5222,8 @@ var CustomButton = function CustomButton(_ref) {
       backgroundColor: "#E7E5EB"
     } : {}
   }, /*#__PURE__*/React.createElement(CustomIcon, {
+    width: 16,
+    height: 16,
     iconName: iconName,
     content: icon
   }), tooltip && /*#__PURE__*/React.createElement("div", {
@@ -5515,7 +5526,7 @@ var getIcon = function getIcon(title) {
     case "align-middle":
       return "AlignVerticalMiddle";
     case "align-bottom":
-      return "ArrowDownFromLine";
+      return "ArrowDownToLine";
     case "text-overflow":
       return "TextOverflow";
     case "text-wrap":
@@ -5638,9 +5649,11 @@ var Toolbar = function Toolbar(_ref) {
     var container = containerRef.current;
     if (!container) return;
     var moreButtonWidth = 50;
+    var containerWidth = container.getBoundingClientRect().width;
+    var availableWidth = containerWidth - 30;
     for (var i = itemLocations.length - 1; i >= 0; i -= 1) {
       var loc = itemLocations[i];
-      if (loc + moreButtonWidth < container.clientWidth) {
+      if (loc + moreButtonWidth < availableWidth) {
         setToolbarWrapIndex(i - itemLocations.length + settings.toolbarItems.length);
         if (i === itemLocations.length - 1) {
           setMoreItems(null);
@@ -5744,7 +5757,8 @@ var Toolbar = function Toolbar(_ref) {
               className: "fortune-toolbar-menu-line"
             }, /*#__PURE__*/React.createElement("div", null, text), /*#__PURE__*/React.createElement(SVGIcon, {
               name: "rightArrow",
-              width: 14
+              width: 16,
+              height: 16
             })), /*#__PURE__*/React.createElement("div", {
               className: "more-format toolbar-item-sub-menu fortune-toolbar-select",
               style: {
@@ -6315,16 +6329,20 @@ var Toolbar = function Toolbar(_ref) {
     if (name === "merge-cell") {
       var itemdata = [{
         text: merge.mergeAll,
-        value: "merge-all"
+        value: "merge-all",
+        icon: "MergeAll"
       }, {
         text: merge.mergeV,
-        value: "merge-vertical"
+        value: "merge-vertical",
+        icon: "MergeVertical"
       }, {
         text: merge.mergeH,
-        value: "merge-horizontal"
+        value: "merge-horizontal",
+        icon: "MergeHorizontal"
       }, {
         text: merge.mergeCancel,
-        value: "merge-cancel"
+        value: "merge-cancel",
+        icon: "Unmerge"
       }];
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: "merge-all",
@@ -6339,7 +6357,8 @@ var Toolbar = function Toolbar(_ref) {
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, itemdata.map(function (_ref8) {
           var text = _ref8.text,
-            value = _ref8.value;
+            value = _ref8.value,
+            icon = _ref8.icon;
           return /*#__PURE__*/React.createElement(Option, {
             key: value,
             onClick: function onClick() {
@@ -6354,8 +6373,10 @@ var Toolbar = function Toolbar(_ref) {
               alignItems: "center",
               gap: 6
             }
-          }, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: value
+          }, /*#__PURE__*/React.createElement(LucideIcon, {
+            name: icon,
+            width: 16,
+            height: 16
           }), text));
         }));
       });
@@ -6363,37 +6384,44 @@ var Toolbar = function Toolbar(_ref) {
     if (name === "border") {
       var _items4 = [{
         text: border.borderTop,
-        value: "border-top"
+        value: "border-top",
+        icon: "BorderTop"
       }, {
         text: border.borderBottom,
-        value: "border-bottom"
+        value: "border-bottom",
+        icon: "BorderBottom"
       }, {
         text: border.borderLeft,
-        value: "border-left"
+        value: "border-left",
+        icon: "BorderLeft"
       }, {
         text: border.borderRight,
-        value: "border-right"
+        value: "border-right",
+        icon: "BorderRight"
       }, {
         text: border.borderNone,
-        value: "border-none"
+        value: "border-none",
+        icon: "NoBorder"
       }, {
         text: border.borderAll,
-        value: "border-all"
+        value: "border-all",
+        icon: "Border"
       }, {
         text: border.borderOutside,
-        value: "border-outside"
+        value: "border-outside",
+        icon: "BorderOutside"
       }, {
         text: border.borderInside,
-        value: "border-inside"
+        value: "border-inside",
+        icon: "BorderInside"
       }, {
         text: border.borderHorizontal,
-        value: "border-horizontal"
+        value: "border-horizontal",
+        icon: "BorderHorizontal"
       }, {
         text: border.borderVertical,
-        value: "border-vertical"
-      }, {
-        text: border.borderSlash,
-        value: "border-slash"
+        value: "border-vertical",
+        icon: "BorderVertical"
       }];
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: "border-all",
@@ -6410,7 +6438,8 @@ var Toolbar = function Toolbar(_ref) {
         return /*#__PURE__*/React.createElement("div", {
           className: "fortune-toolbar-select fortune-border-grid"
         }, _items4.map(function (_ref9) {
-          var value = _ref9.value;
+          var value = _ref9.value,
+            icon = _ref9.icon;
           return /*#__PURE__*/React.createElement("div", {
             key: value,
             className: "fortune-border-grid-item",
@@ -6420,8 +6449,10 @@ var Toolbar = function Toolbar(_ref) {
               });
               setOpen(false);
             }
-          }, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: value
+          }, /*#__PURE__*/React.createElement(LucideIcon, {
+            name: icon,
+            width: 16,
+            height: 16
           }));
         }));
       });
@@ -6465,7 +6496,9 @@ var Toolbar = function Toolbar(_ref) {
           }, /*#__PURE__*/React.createElement("div", {
             className: "fortune-toolbar-menu-line"
           }, text, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: value
+            name: value,
+            width: 16,
+            height: 16
           })));
         }));
       });
@@ -6577,7 +6610,9 @@ var Toolbar = function Toolbar(_ref) {
           }, /*#__PURE__*/React.createElement("div", {
             className: "fortune-toolbar-menu-line"
           }, text, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: iconId
+            name: iconId,
+            width: 16,
+            height: 16
           })));
         }));
       });
@@ -6651,8 +6686,8 @@ var Toolbar = function Toolbar(_ref) {
             }
           }, /*#__PURE__*/React.createElement(SVGIcon, {
             name: iconId,
-            width: 24,
-            height: 18
+            width: 16,
+            height: 16
           }), text))) : (/*#__PURE__*/React.createElement(MenuDivider, {
             key: "divider-".concat(index)
           }));
@@ -6676,6 +6711,8 @@ var Toolbar = function Toolbar(_ref) {
     ref: containerRef,
     className: "fortune-toolbar",
     "aria-label": toolbar.toolbar
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fortune-toolbar-left"
   }, settings.customToolbarItems.filter(function (n) {
     return n.key === "import-export";
   }).map(function (n) {
@@ -6702,9 +6739,9 @@ var Toolbar = function Toolbar(_ref) {
         }));
       }
     }
-  })) : null, /*#__PURE__*/React.createElement(Divider, {
-    key: "templateDivider"
-  }), settings.customToolbarItems.filter(function (n) {
+  })) : null), /*#__PURE__*/React.createElement("div", {
+    className: "fortune-toolbar-right"
+  }, settings.customToolbarItems.filter(function (n) {
     return n.key === "templates";
   }).map(function (n) {
     return /*#__PURE__*/React.createElement(CustomButton, {
@@ -6714,8 +6751,6 @@ var Toolbar = function Toolbar(_ref) {
       icon: n.icon,
       iconName: n.iconName
     }, n.children);
-  }), /*#__PURE__*/React.createElement(Divider, {
-    key: "customDivider"
   }), settings.customToolbarItems.filter(function (n) {
     return n.key !== "templates" && n.key !== "import-export";
   }).map(function (n) {
@@ -6733,6 +6768,10 @@ var Toolbar = function Toolbar(_ref) {
     onClick: function onClick() {
       if (context.allowEdit === false) return;
       setShowDuneModal(true);
+    },
+    style: {
+      backgroundColor: "#F4603E2E",
+      borderRadius: "8px"
     }
   }), showDuneModal && (/*#__PURE__*/React.createElement(DuneChartsInputModal, {
     isOpen: showDuneModal,
@@ -6748,7 +6787,7 @@ var Toolbar = function Toolbar(_ref) {
     icon: "dune-logo",
     placeholder: "Add Dune chart link to embed",
     submitText: "Embed Dune chart"
-  })));
+  }))));
 };
 
 var LocationBox = function LocationBox() {
@@ -7491,8 +7530,8 @@ var ContextMenu = function ContextMenu() {
         className: "context-item"
       }, /*#__PURE__*/React.createElement(SVGIcon, {
         name: "freeze-flv",
-        width: 18,
-        height: 18,
+        width: 16,
+        height: 16,
         style: {
           marginTop: "4px",
           marginRight: "4px"
@@ -8163,10 +8202,12 @@ var ContextMenu = function ContextMenu() {
         className: "flex items-center gap-2"
       }, /*#__PURE__*/React.createElement(SVGIcon, {
         name: "conditionFormat",
-        width: 18
+        width: 16,
+        height: 16
       }), /*#__PURE__*/React.createElement("p", null, rightclick.conditionFormat || "Conditional Format")), /*#__PURE__*/React.createElement(SVGIcon, {
         name: "rightArrow",
-        width: 18
+        width: 16,
+        height: 16
       })))));
     }
     return null;