@fileverse-dev/fortune-react 1.1.0 → 1.1.1

package/lib/components/SheetTab/index.js

@@ -0,0 +1,200 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = _interopRequireWildcard(require("react"));
+var _usehooksTs = require("usehooks-ts");
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _context = _interopRequireDefault(require("../../context"));
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+require("./index.css");
+var _SheetItem = _interopRequireDefault(require("./SheetItem"));
+var _ZoomControl = _interopRequireDefault(require("../ZoomControl"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var SheetTab = function SheetTab() {
+  var isMobile = (0, _usehooksTs.useMediaQuery)("(max-width: 780px)", {
+    defaultValue: true
+  });
+  var _a = (0, _react.useContext)(_context.default),
+    context = _a.context,
+    setContext = _a.setContext,
+    settings = _a.settings,
+    refs = _a.refs;
+  var tabContainerRef = (0, _react.useRef)(null);
+  var leftScrollRef = (0, _react.useRef)(null);
+  var rightScrollRef = (0, _react.useRef)(null);
+  var _b = (0, _react.useState)(false),
+    isShowScrollBtn = _b[0],
+    setIsShowScrollBtn = _b[1];
+  var _c = (0, _react.useState)(true),
+    isShowBoundary = _c[0],
+    setIsShowBoundary = _c[1];
+  var scrollDelta = 150;
+  var scrollBy = (0, _react.useCallback)(function (amount) {
+    var _a;
+    if (tabContainerRef.current == null || tabContainerRef.current.scrollLeft == null) {
+      return;
+    }
+    var scrollLeft = tabContainerRef.current.scrollLeft;
+    if (scrollLeft + amount <= 0) setIsShowBoundary(true);else if (scrollLeft > 0) setIsShowBoundary(false);
+    (_a = tabContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
+      left: amount,
+      behavior: "smooth"
+    });
+  }, []);
+  (0, _react.useEffect)(function () {
+    var tabCurrent = tabContainerRef.current;
+    if (!tabCurrent) return;
+    setIsShowScrollBtn(tabCurrent.scrollWidth - 2 > tabCurrent.clientWidth);
+  }, [context.luckysheetfile]);
+  var onAddSheetClick = (0, _react.useCallback)(function () {
+    return setTimeout(function () {
+      setContext(function (draftCtx) {
+        if (draftCtx.luckysheetCellUpdate.length > 0) {
+          (0, _fortuneCore.updateCell)(draftCtx, draftCtx.luckysheetCellUpdate[0], draftCtx.luckysheetCellUpdate[1], refs.cellInput.current);
+        }
+        (0, _fortuneCore.addSheet)(draftCtx, settings);
+      }, {
+        addSheetOp: true
+      });
+      var tabCurrent = tabContainerRef.current;
+      setIsShowScrollBtn(tabCurrent.scrollWidth > tabCurrent.clientWidth);
+    });
+  }, [refs.cellInput, setContext, settings]);
+  var _d = (0, _react.useState)(true),
+    showDisclaimer = _d[0],
+    setShowDisclaimer = _d[1];
+  var handleCloseDisclaimer = function handleCloseDisclaimer() {
+    setShowDisclaimer(false);
+    var cornerPlus = document.getElementById("corner-plus");
+    if (cornerPlus) {
+      cornerPlus.style.display = "block";
+    }
+  };
+  (0, _react.useEffect)(function () {
+    var cornerPlus = document.getElementById("corner-plus");
+    if (cornerPlus) {
+      cornerPlus.style.display = "none";
+    }
+  }, [isMobile]);
+  (0, _react.useEffect)(function () {
+    var _a;
+    (_a = settings.onSheetCountChange) === null || _a === void 0 ? void 0 : _a.call(settings, context.luckysheetfile.length);
+  }, [context.luckysheetfile.length]);
+  return /*#__PURE__*/_react.default.createElement("div", null, showDisclaimer && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "w-full",
+    id: "denomination-warning",
+    style: {
+      zIndex: 1003,
+      position: "absolute",
+      display: "none",
+      bottom: "31px",
+      backgroundColor: "#F8F9FA",
+      borderBottom: "1px solid #E8EBEC",
+      color: "#77818A",
+      fontFamily: "Helvetica Neue",
+      fontSize: "var(--font-size-2xsm, 12px)",
+      fontStyle: "normal",
+      fontWeight: "400"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "max-w-7xl mx-auto px-4 py-1 ".concat(isMobile && "w-full flex justify-between")
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "".concat(isMobile ? "text-left" : "text-center", " text-xsm")
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "font-medium"
+  }, "Disclaimer:"), " Prices are not updated in real time and may differ slightly. Updates may be delayed by up to 20 minutes."), isMobile && (/*#__PURE__*/_react.default.createElement("p", {
+    className: "ml-4 content-center cursor-pointer",
+    style: {
+      alignContent: "center"
+    },
+    onClick: handleCloseDisclaimer
+  }, "Close"))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-sheet-area luckysheet-noselected-text",
+    onContextMenu: function onContextMenu(e) {
+      return e.preventDefault();
+    },
+    id: "luckysheet-sheet-area"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheet-sheet-content"
+  }, context.allowEdit && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-sheettab-button",
+    onClick: onAddSheetClick
+  }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: "plus",
+    width: 16,
+    height: 16
+  }))), context.allowEdit && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "sheet-list-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "all-sheets",
+    className: "fortune-sheettab-button",
+    ref: tabContainerRef,
+    onMouseDown: function onMouseDown(e) {
+      e.stopPropagation();
+      setContext(function (ctx) {
+        ctx.showSheetList = _lodash.default.isUndefined(ctx.showSheetList) ? true : !ctx.showSheetList;
+        ctx.sheetTabContextMenu = {};
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: "all-sheets",
+    width: 16,
+    height: 16
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheet-sheets-m",
+    className: "luckysheet-sheets-m lucky-button-custom"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "iconfont luckysheet-iconfont-caidan2"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-sheettab-container",
+    id: "fortune-sheettab-container"
+  }, !isShowBoundary && /*#__PURE__*/_react.default.createElement("div", {
+    className: "boundary boundary-left"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-sheettab-container-c",
+    id: "fortune-sheettab-container-c",
+    ref: tabContainerRef
+  }, _lodash.default.sortBy(context.luckysheetfile, function (s) {
+    return Number(s.order);
+  }).map(function (sheet) {
+    return /*#__PURE__*/_react.default.createElement(_SheetItem.default, {
+      key: sheet.id,
+      sheet: sheet
+    });
+  })), isShowBoundary && isShowScrollBtn && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "boundary boundary-right"
+  }))), isShowScrollBtn && (/*#__PURE__*/_react.default.createElement("div", {
+    id: "fortune-sheettab-leftscroll",
+    className: "fortune-sheettab-scroll",
+    ref: leftScrollRef,
+    onClick: function onClick() {
+      scrollBy(-scrollDelta);
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: "arrow-doubleleft",
+    width: 12,
+    height: 12
+  }))), isShowScrollBtn && (/*#__PURE__*/_react.default.createElement("div", {
+    id: "fortune-sheettab-rightscroll",
+    className: "fortune-sheettab-scroll",
+    ref: rightScrollRef,
+    onClick: function onClick() {
+      scrollBy(scrollDelta);
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: "arrow-doubleright",
+    width: 12,
+    height: 12
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-sheet-area-right"
+  }, /*#__PURE__*/_react.default.createElement(_ZoomControl.default, null))));
+};
+var _default = exports.default = SheetTab;

package/lib/components/SplitColumn/index.css

@@ -0,0 +1,121 @@
+#fortune-split-column {
+  /* position: absolute;
+    padding: 30px 42px;
+    z-index: 1002; */
+  /* min-width: 500px; */
+  width: 464px;
+
+  input[type="checkbox"] {
+    accent-color: black;
+    appearance: none;
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1.5px solid black;
+    border-radius: 3px;
+    position: relative;
+    cursor: pointer;
+  }
+  
+  input[type="checkbox"]:checked {
+    background-color: black;
+    border-color: black;
+  }
+  
+  /* Smaller tick mark */
+  input[type="checkbox"]:checked::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 4px;
+    width: 4px;      /* Reduced from default */
+    height: 7px;     /* Reduced from default */
+    border: solid white;
+    border-width: 0 1px 1px 0;
+    transform: rotate(45deg);
+  }
+}
+#fortune-split-column label {
+  user-select: none;
+}
+#fortune-split-column .title {
+  font-size: 16px;
+}
+#fortune-split-column .splitDelimiters {
+  margin-top: 20px;
+}
+.splitSymbols {
+  width: 464px
+}
+#fortune-split-column .splitSymbols {
+  position: relative;
+  /* border: 1px solid #dfdfdf; */
+  padding: 5px 5px 5px 0;
+  margin: 5px 0px;
+}
+#fortune-split-column .splitSymbol {
+  font-size: 14px;
+}
+#fortune-split-column .splitSimple {
+  position: absolute;
+  top: 114px;
+  left: 0px;
+}
+#fortune-split-column #otherValue {
+  margin-left: 5px;
+  width: 50px;
+  padding: 0 5px;
+}
+#fortune-split-column .splitDataPreview {
+  font-size: 14px;
+  /* margin-top: 26px; */
+  margin-bottom: 12px;
+}
+#fortune-split-column .splitColumnData {
+  border: 1px solid #dfdfdf;
+  border-radius: 4px;
+  background-color: #F8F9FA;
+  padding: 5px;
+  margin: 5px 0px;
+  height: 100px;
+  overflow-y: scroll;
+}
+#fortune-split-column .button-basic {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: 400;
+  text-align: center;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  white-space: nowrap;
+  padding: 4px 8px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  border-radius: 2px;
+  user-select: none;
+}
+#fortune-split-column .button-primary {
+  background: #0188fb;
+  border: 1px solid #0188fb;
+  color: #fff;
+  margin-right: 10px;
+}
+#fortune-split-column .button-close {
+  color: #333;
+  background-color: #fff;
+  border: 1px solid #ccc;
+}
+#fortune-split-column table {
+  border-collapse: collapse;
+}
+#fortune-split-column tr {
+  display: table-row;
+  vertical-align: inherit;
+  border-color: inherit;
+}
+#fortune-split-column td {
+  border: 1px solid #333;
+  display: table-cell;
+  vertical-align: inherit;
+}

package/lib/components/SplitColumn/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import "./index.css";
+export declare const SplitColumn: React.FC<{}>;

package/lib/components/SplitColumn/index.js

@@ -0,0 +1,176 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitColumn = void 0;
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _ui = require("@fileverse/ui");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("../../context"));
+var _useDialog = require("../../hooks/useDialog");
+require("./index.css");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var SplitColumn = exports.SplitColumn = function SplitColumn() {
+  var _a = (0, _react.useContext)(_context.default),
+    context = _a.context,
+    setContext = _a.setContext;
+  var _b = (0, _fortuneCore.locale)(context),
+    splitText = _b.splitText,
+    button = _b.button;
+  var _c = (0, _react.useState)(""),
+    splitOperate = _c[0],
+    setSplitOperate = _c[1];
+  var _d = (0, _react.useState)(false),
+    otherFlag = _d[0],
+    setOtherFlag = _d[1];
+  var _e = (0, _react.useState)([]),
+    tableData = _e[0],
+    setTableData = _e[1];
+  var splitSymbols = (0, _react.useRef)(null);
+  var _f = (0, _useDialog.useDialog)(),
+    showDialog = _f.showDialog,
+    hideDialog = _f.hideDialog;
+  var certainBtn = (0, _react.useCallback)(function () {
+    hideDialog();
+    var dataArr = (0, _fortuneCore.getDataArr)(splitOperate, context);
+    var r = context.luckysheet_select_save[0].row[0];
+    var c = context.luckysheet_select_save[0].column[0];
+    if (dataArr[0].length === 1) {
+      return;
+    }
+    var dataCover = false;
+    var data = (0, _fortuneCore.getFlowdata)(context);
+    for (var i = 0; i < dataArr.length; i += 1) {
+      for (var j = 1; j < dataArr[0].length; j += 1) {
+        var cell = data[r + i][c + j];
+        if (!_lodash.default.isNull(cell) && !_lodash.default.isNull(cell.v)) {
+          dataCover = true;
+          break;
+        }
+      }
+    }
+    if (dataCover) {
+      showDialog(splitText.splitConfirmToExe, "yesno", undefined, undefined, undefined, function () {
+        hideDialog();
+        setContext(function (ctx) {
+          (0, _fortuneCore.updateMoreCell)(r, c, dataArr, ctx);
+        });
+      });
+    } else {
+      setContext(function (ctx) {
+        (0, _fortuneCore.updateMoreCell)(r, c, dataArr, ctx);
+      });
+    }
+  }, [context, hideDialog, setContext, showDialog, splitOperate, splitText.splitConfirmToExe]);
+  (0, _react.useEffect)(function () {
+    setTableData(function (table) {
+      table = (0, _fortuneCore.getDataArr)(splitOperate, context);
+      return table;
+    });
+  }, [context, splitOperate]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "fortune-split-column"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "splitDataPreview text-heading-xsm"
+  }, splitText.splitDataPreview), /*#__PURE__*/_react.default.createElement("div", {
+    className: "splitColumnData"
+  }, /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, tableData.map(function (o, index) {
+    if (o.length >= 1) {
+      return /*#__PURE__*/_react.default.createElement("tr", {
+        key: index
+      }, o.map(function (o1) {
+        return /*#__PURE__*/_react.default.createElement("td", {
+          key: o + o1
+        }, o1);
+      }));
+    }
+    return /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null));
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "splitDelimiters text-heading-xsm !mt-4"
+  }, "Separator"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "splitSymbols flex gap-3 flex-wrap",
+    ref: splitSymbols
+  }, splitText.splitSymbols.map(function (o) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: o.value,
+      className: "splitSymbol flex gap-2 items-center"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      id: o.value,
+      name: o.value,
+      type: "checkbox",
+      onClick: function onClick() {
+        setSplitOperate(function (regStr) {
+          var _a;
+          return (0, _fortuneCore.getRegStr)(regStr, (_a = splitSymbols.current) === null || _a === void 0 ? void 0 : _a.childNodes);
+        });
+      },
+      tabIndex: 0
+    }), /*#__PURE__*/_react.default.createElement("label", {
+      htmlFor: o.value,
+      className: "text-body-sm"
+    }, o.name));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "splitSymbol flex gap-2 items-center pb-4 mb-4  border-b"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    id: "other",
+    name: "other",
+    type: "checkbox",
+    onClick: function onClick() {
+      setOtherFlag(!otherFlag);
+      setSplitOperate(function (regStr) {
+        var _a;
+        return (0, _fortuneCore.getRegStr)(regStr, (_a = splitSymbols.current) === null || _a === void 0 ? void 0 : _a.childNodes);
+      });
+    },
+    tabIndex: 0
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "other"
+  }, "Custom"), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+    placeholder: "Custom separator",
+    id: "otherValue",
+    name: "otherValue",
+    type: "text",
+    onBlur: function onBlur() {
+      if (otherFlag) {
+        setSplitOperate(function (regStr) {
+          var _a;
+          return (0, _fortuneCore.getRegStr)(regStr, (_a = splitSymbols.current) === null || _a === void 0 ? void 0 : _a.childNodes);
+        });
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "splitSymbol flex gap-2 mb-4 items-center"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    id: "splitsimple",
+    name: "splitsimple",
+    type: "checkbox",
+    onClick: function onClick() {
+      setSplitOperate(function (regStr) {
+        var _a;
+        return (0, _fortuneCore.getRegStr)(regStr, (_a = splitSymbols.current) === null || _a === void 0 ? void 0 : _a.childNodes);
+      });
+    },
+    tabIndex: 0
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "splitsimple"
+  }, splitText.splitContinueSymbol)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex justify-end gap-2"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    className: "",
+    variant: "secondary",
+    onClick: function onClick() {
+      hideDialog();
+    },
+    tabIndex: 0
+  }, button.cancel), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    className: "",
+    onClick: function onClick() {
+      certainBtn();
+    },
+    tabIndex: 0
+  }, "Split")));
+};

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

@@ -0,0 +1,12 @@
+import React from "react";
+type Props = {
+    tooltip: string;
+    iconId: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    disabled?: boolean;
+    selected?: boolean;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+};
+declare const Button: React.FC<Props>;
+export default Button;

package/lib/components/Toolbar/Button.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ui = require("@fileverse/ui");
+var _ = require(".");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var Button = function Button(_a) {
+  var tooltip = _a.tooltip,
+    onClick = _a.onClick,
+    iconId = _a.iconId,
+    disabled = _a.disabled,
+    selected = _a.selected,
+    children = _a.children,
+    style = _a.style;
+  return /*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-toolbar-button fortune-toolbar-item",
+    onClick: onClick,
+    tabIndex: 0,
+    role: "button",
+    style: selected ? {
+      backgroundColor: "#FFDF0A"
+    } : style
+  }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+    name: (0, _.getLucideIcon)(iconId),
+    width: 16,
+    height: 16,
+    style: disabled ? {
+      opacity: 0.3
+    } : {}
+  }), children));
+};
+var _default = exports.default = Button;

package/lib/components/Toolbar/ColorPicker.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type Props = {
+    onPick: (color: string) => void;
+};
+declare const ColorPicker: React.FC<Props>;
+export default ColorPicker;

package/lib/components/Toolbar/ColorPicker.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var palette = [["#000000", "#444444", "#666666", "#999999", "#B7B7B7", "#cccccc", "#D9D9D9", "#EFEFEF", "#f3f3f3", "#ffffff"], ["#970007", "#FE0012", "#FE9728", "#FFFD40", "#27FD3C", "#21FFFF", "#4A89E4", "#0027F9", "#9726FA", "#FD23FA"], ["#E6B8B0", "#f4cccc", "#FCE5CF", "#FFF1CF", "#DAEAD4", "#D0E0E3", "#C9DBF7", "#CFE3F2", "#D9D3E8", "#EAD1DC"], ["#DC7D6D", "#E9999A", "#F9CAA0", "#FFE49F", "#B7D6AB", "#A3C4C9", "#A4C3F2", "#A0C6E6", "#B4A8D4", "#D5A7BC"], ["#CB402B", "#DF6668", "#F6B171", "#FFD871", "#95C382", "#77A6AF", "#6DA0E8", "#70AADA", "#8E7EC0", "#C17C9F"], ["#A51A0A", "#CB000C", "#E59043", "#F1C046", "#6CA756", "#46828D", "#3C7BD4", "#3E87C3", "#6651A4", "#A54E78"], ["#841F11", "#980007", "#B35E19", "#BF8F22", "#3A7527", "#15505B", "#0E5AC8", "#0B5592", "#0B5592", "#731C46"], ["#5B0E03", "#660003", "#783E0E", "#7F5F13", "#284E19", "#0D343D", "#1C4785", "#073961", "#1F154B", "#4C112F"]];
+var ColorPicker = function ColorPicker(_a) {
+  var onPick = _a.onPick;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-toolbar-color-picker"
+  }, palette.map(function (rows, i) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: i,
+      className: "fortune-toolbar-color-picker-row"
+    }, rows.map(function (c) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: c,
+        className: "fortune-toolbar-color-picker-item",
+        onClick: function onClick() {
+          return onPick(c);
+        },
+        tabIndex: 0,
+        style: {
+          backgroundColor: c,
+          border: c === "#ffffff" ? "1px solid #E8EBEC" : "none"
+        }
+      });
+    }));
+  }));
+};
+var _default = exports.default = ColorPicker;

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

@@ -0,0 +1,13 @@
+import React from "react";
+type Props = {
+    tooltip: string;
+    iconId?: string;
+    text?: string;
+    showArrow?: boolean;
+    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;