@fileverse-dev/fortune-react 1.0.5 → 1.0.6

package/lib/components/DuneChartsInputModal/duneChartsInputModal.css

@@ -0,0 +1,98 @@
+.custom-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 50;
+  height: 100vh;
+  width: 100%;
+  display: grid;
+  place-items: center;
+}
+
+.input-modal {
+  position: fixed;
+  top: 17.5%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 0.75rem;
+  background-color: #ffffff;
+  padding: 0;
+  border: none;
+  box-shadow: 0px 8px 32px 0px #00000026;
+  animation: fadeIn 0.2s ease-in-out;
+  max-width: 480px;
+}
+
+.modal-header {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+  height: 52px;
+  width: 100%;
+}
+
+.modal-header svg {
+  width: 20px;
+  height: 20px;
+}
+
+.fetch-url-button {
+  cursor: pointer;
+}
+
+.modal-input {
+  border: none;
+  padding: 0;
+  outline: none;
+  user-select: text;
+  max-width: 218px;
+  flex: 1;
+}
+
+@media (min-width: 768px) {
+  .modal-input {
+    max-width: 400px;
+    width: 380px !important;
+  }
+}
+
+.modal-input:disabled {
+  opacity: 1;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 16px;
+}
+
+.modal-button {
+  width: 100%;
+  margin: 8px;
+}
+
+.modal-error-message {
+  color: #ef4e2f;
+  background: #fff5f5;
+  margin: 8px 16px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 400;
+}

package/lib/components/DunePreview/DunePreview.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "./index.css";
+interface DunePreviewProps {
+    url: string;
+    position: {
+        left: number;
+        top: number;
+    };
+    onKeepAsLink: () => void;
+    onEmbed: () => void;
+}
+declare const DunePreview: React.FC<DunePreviewProps>;
+export default DunePreview;

package/lib/components/DunePreview/DunePreview.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+require("./index.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var DunePreview = function DunePreview(_a) {
+  var url = _a.url,
+    position = _a.position,
+    onKeepAsLink = _a.onKeepAsLink,
+    onEmbed = _a.onEmbed;
+  var embedUrl = (0, _fortuneCore.sanitizeDuneUrl)(url);
+  if (!embedUrl) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-dune-preview",
+    style: {
+      left: position.left,
+      top: position.top
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-dune-preview-header"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "fortune-dune-preview-title"
+  }, "Detected Dune chart link")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-dune-preview-content"
+  }, /*#__PURE__*/_react.default.createElement("iframe", {
+    src: embedUrl,
+    title: "Dune Chart Preview",
+    style: {
+      width: "100%",
+      height: "100%",
+      border: "none"
+    }
+  })), /*#__PURE__*/_react.default.createElement("p", null, "Do you want to insert Dune chart?"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-dune-preview-footer"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    onClick: onKeepAsLink,
+    className: "fortune-dune-preview-button"
+  }, "Keep as Link"), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    onClick: onEmbed,
+    className: "fortune-dune-preview-button primary"
+  }, "Embed")));
+};
+var _default = exports.default = DunePreview;

package/lib/components/DunePreview/index.css

@@ -0,0 +1,57 @@
+.fortune-dune-preview {
+  position: absolute;
+  background-color: #fff;
+  border: 1px solid #e8ebec;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  width: 270px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  gap: 8px;
+}
+
+.fortune-dune-preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fortune-dune-preview-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #363b3f;
+}
+
+.fortune-dune-preview-content {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  border-radius: 4px;
+  border: 1px solid #f8f9fa;
+}
+
+.fortune-dune-preview-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.fortune-dune-preview-button {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 80px;
+}
+
+.fortune-dune-preview-button:hover {
+  background-color: #f5f5f5;
+}
+
+.fortune-dune-preview-button.primary {
+  background-color: #000000;
+  color: #fff;
+}

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

@@ -0,0 +1,5 @@
+import React from "react";
+declare const FilterOptions: React.FC<{
+    getContainer: () => HTMLDivElement;
+}>;
+export default FilterOptions;

package/lib/components/FilterOption/index.js

@@ -0,0 +1,130 @@
+"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 _fortuneCore = require("@fileverse-dev/fortune-core");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("../../context"));
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+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 __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var FilterOptions = function FilterOptions(_a) {
+  var _b, _c, _d, _e;
+  var getContainer = _a.getContainer;
+  var _f = (0, _react.useContext)(_context.default),
+    context = _f.context,
+    setContext = _f.setContext,
+    refs = _f.refs;
+  var filterOptions = context.filterOptions,
+    currentSheetId = context.currentSheetId,
+    filter = context.filter,
+    visibledatarow = context.visibledatarow,
+    visibledatacolumn = context.visibledatacolumn;
+  var sheetIndex = (0, _fortuneCore.getSheetIndex)(context, context.currentSheetId);
+  var _g = context.luckysheetfile[sheetIndex],
+    filter_select = _g.filter_select,
+    frozen = _g.frozen;
+  (0, _react.useEffect)(function () {
+    setContext(function (draftCtx) {
+      var sheetIdx = (0, _fortuneCore.getSheetIndex)(draftCtx, draftCtx.currentSheetId);
+      if (sheetIdx == null) return;
+      draftCtx.luckysheet_filter_save = draftCtx.luckysheetfile[sheetIdx].filter_select;
+      draftCtx.filter = draftCtx.luckysheetfile[sheetIdx].filter || {};
+      (0, _fortuneCore.createFilterOptions)(draftCtx, draftCtx.luckysheet_filter_save, undefined);
+    });
+  }, [visibledatarow, visibledatacolumn, setContext, currentSheetId, filter_select]);
+  var showFilterContextMenu = (0, _react.useCallback)(function (v, i) {
+    if (filterOptions == null) return;
+    setContext(function (draftCtx) {
+      var _a, _b;
+      if (((_a = draftCtx.filterContextMenu) === null || _a === void 0 ? void 0 : _a.col) === filterOptions.startCol + i) return;
+      draftCtx.filterContextMenu = {
+        x: v.left + draftCtx.rowHeaderWidth - refs.scrollbarX.current.scrollLeft,
+        y: v.top + 23 + draftCtx.toolbarHeight + draftCtx.calculatebarHeight + draftCtx.columnHeaderHeight - refs.scrollbarY.current.scrollTop,
+        col: filterOptions.startCol + i,
+        startRow: filterOptions.startRow,
+        endRow: filterOptions.endRow,
+        startCol: filterOptions.startCol,
+        endCol: filterOptions.endCol,
+        hiddenRows: _lodash.default.keys((_b = draftCtx.filter[i]) === null || _b === void 0 ? void 0 : _b.rowhidden).map(function (r) {
+          return parseInt(r, 10);
+        }),
+        listBoxMaxHeight: 400
+      };
+    });
+  }, [filterOptions, getContainer, refs.scrollbarX, refs.scrollbarY, setContext]);
+  var freezeType = frozen === null || frozen === void 0 ? void 0 : frozen.type;
+  var frozenColumns = -1;
+  var frozenRows = -1;
+  if (freezeType === "row") frozenRows = 0;else if (freezeType === "column") frozenColumns = 0;else if (freezeType === "both") {
+    frozenColumns = 0;
+    frozenRows = 0;
+  } else {
+    frozenColumns = ((_b = frozen === null || frozen === void 0 ? void 0 : frozen.range) === null || _b === void 0 ? void 0 : _b.column_focus) || -1;
+    frozenRows = ((_c = frozen === null || frozen === void 0 ? void 0 : frozen.range) === null || _c === void 0 ? void 0 : _c.row_focus) || -1;
+  }
+  return filterOptions == null ? (/*#__PURE__*/_react.default.createElement("div", null)) : (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheet-filter-selected-sheet",
+    className: "luckysheet-cell-selected luckysheet-filter-selected",
+    style: _lodash.default.assign({
+      left: filterOptions.left,
+      width: filterOptions.width,
+      top: filterOptions.top,
+      height: filterOptions.height,
+      display: "block"
+    }, (0, _fortuneCore.fixRowStyleOverflowInFreeze)(context, filterOptions.startRow, filterOptions.endRow, (_d = refs.globalCache.freezen) === null || _d === void 0 ? void 0 : _d[context.currentSheetId]), (0, _fortuneCore.fixColumnStyleOverflowInFreeze)(context, filterOptions.startCol, filterOptions.endCol, (_e = refs.globalCache.freezen) === null || _e === void 0 ? void 0 : _e[context.currentSheetId]))
+  }), filterOptions.items.map(function (v, i) {
+    var _a, _b;
+    var filterParam = filter[i];
+    var columnOverflowFreezeStyle = (0, _fortuneCore.fixColumnStyleOverflowInFreeze)(context, i + filterOptions.startCol, i + filterOptions.startCol, (_a = refs.globalCache.freezen) === null || _a === void 0 ? void 0 : _a[context.currentSheetId]);
+    var rowOverflowFreezeStyle = (0, _fortuneCore.fixRowStyleOverflowInFreeze)(context, filterOptions.startRow, filterOptions.startRow, (_b = refs.globalCache.freezen) === null || _b === void 0 ? void 0 : _b[context.currentSheetId]);
+    var col = visibledatacolumn[v.col];
+    var col_pre = v.col > 0 ? visibledatacolumn[v.col - 1] : 0;
+    var left = v.col <= frozenColumns && columnOverflowFreezeStyle.left ? columnOverflowFreezeStyle.left + col - col_pre - 20 : v.left;
+    var top = filterOptions.startRow <= frozenRows && rowOverflowFreezeStyle.top ? rowOverflowFreezeStyle.top : v.top;
+    var v_adjusted = __assign(__assign({}, v), {
+      left: left,
+      top: top
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      onMouseDown: function onMouseDown(e) {
+        return e.stopPropagation();
+      },
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        showFilterContextMenu(v_adjusted, i);
+      },
+      onDoubleClick: function onDoubleClick(e) {
+        return e.stopPropagation();
+      },
+      tabIndex: 0,
+      key: i,
+      style: _lodash.default.assign(rowOverflowFreezeStyle, columnOverflowFreezeStyle, {
+        left: left,
+        top: top,
+        height: undefined,
+        width: undefined
+      }),
+      className: "luckysheet-filter-options ".concat(filterParam == null ? "" : "luckysheet-filter-options-active")
+    }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+      name: "filter",
+      width: 15,
+      height: 15
+    }));
+  })));
+};
+var _default = exports.default = FilterOptions;

package/lib/components/FormatSearch/index.css

@@ -0,0 +1,19 @@
+.listBox {
+  display: flex;
+  justify-content: space-between;
+}
+
+.inpbox {
+  margin-bottom: 10px;
+}
+
+.decimal-places-input {
+  width: 70px;
+}
+
+.format-list {
+  width: 300px;
+  height: 170px;
+  border: 1px solid #d4d4d4;
+  overflow-y: scroll;
+}

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

@@ -0,0 +1,6 @@
+import React from "react";
+import "./index.css";
+export declare const FormatSearch: React.FC<{
+    type: "currency" | "date" | "number";
+    onCancel: () => void;
+}>;

package/lib/components/FormatSearch/index.js

@@ -0,0 +1,138 @@
+"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.FormatSearch = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _ui = require("@fileverse/ui");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _context = _interopRequireDefault(require("../../context"));
+require("./index.css");
+var _useDialog = require("../../hooks/useDialog");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+var FormatSearch = exports.FormatSearch = function FormatSearch(_a) {
+  var _b, _c;
+  var type = _a.type,
+    _onCancel = _a.onCancel;
+  var _d = (0, _react.useContext)(_context.default),
+    context = _d.context,
+    setContext = _d.setContext,
+    cellInput = _d.refs.cellInput;
+  var _e = (0, _react.useState)(2),
+    decimalPlace = _e[0],
+    setDecimalPlace = _e[1];
+  var _f = (0, _react.useState)(0),
+    selectedFormatIndex = _f[0],
+    setSelectedFormatIndex = _f[1];
+  var _g = (0, _fortuneCore.locale)(context),
+    button = _g.button,
+    format = _g.format,
+    currencyDetail = _g.currencyDetail,
+    dateFmtList = _g.dateFmtList;
+  var showDialog = (0, _useDialog.useDialog)().showDialog;
+  var toolbarFormatAll = (0, _react.useMemo)(function () {
+    return {
+      currency: currencyDetail,
+      date: dateFmtList,
+      number: []
+    };
+  }, [currencyDetail, dateFmtList]);
+  var toolbarFormat = (0, _react.useMemo)(function () {
+    return toolbarFormatAll[type];
+  }, [toolbarFormatAll, type]);
+  var onConfirm = (0, _react.useCallback)(function () {
+    if (decimalPlace < 0 || decimalPlace > 9) {
+      _onCancel();
+      showDialog(format.tipDecimalPlaces, "ok");
+      return;
+    }
+    setContext(function (ctx) {
+      var index = (0, _fortuneCore.getSheetIndex)(ctx, ctx.currentSheetId);
+      if (_lodash.default.isNil(index)) return;
+      var selectedFormat = toolbarFormat[selectedFormatIndex].value;
+      var formatString = "".concat(selectedFormat, "#,##0.").concat("0".repeat(decimalPlace));
+      _lodash.default.forEach(ctx.luckysheet_select_save, function (selection) {
+        var _a, _b, _c, _d;
+        for (var r = selection.row[0]; r <= selection.row[1]; r += 1) {
+          for (var c = selection.column[0]; c <= selection.column[1]; c += 1) {
+            if (((_a = ctx.luckysheetfile[index].data) === null || _a === void 0 ? void 0 : _a[r][c]) && ((_d = (_c = (_b = ctx.luckysheetfile[index].data) === null || _b === void 0 ? void 0 : _b[r][c]) === null || _c === void 0 ? void 0 : _c.ct) === null || _d === void 0 ? void 0 : _d.t) === "n") {
+              ctx.luckysheetfile[index].data[r][c].ct.fa = formatString;
+              ctx.luckysheetfile[index].data[r][c].m = (0, _fortuneCore.update)(formatString, ctx.luckysheetfile[index].data[r][c].v);
+            }
+          }
+        }
+      });
+      _onCancel();
+    });
+  }, [_onCancel, decimalPlace, format.tipDecimalPlaces, selectedFormatIndex, setContext, showDialog, toolbarFormat]);
+  var onCancel = (0, _react.useCallback)(function () {
+    setContext(function (ctx) {
+      (0, _fortuneCore.cancelNormalSelected)(ctx);
+      if (cellInput.current) {
+        cellInput.current.innerHTML = "";
+      }
+    });
+    _onCancel();
+  }, [_onCancel, cellInput, setContext]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "format-search"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex flex-col gap-4"
+  }, type === "currency" && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "text-body-sm",
+    style: {
+      width: "180px"
+    }
+  }, format.decimalPlaces, "\uFF1A"), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+    className: "w-full",
+    type: "number",
+    min: 0,
+    max: 9,
+    defaultValue: 2,
+    onChange: function onChange(e) {
+      setDecimalPlace(parseInt(e.target.value, 10));
+    }
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex flex-col gap-2"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Select, {
+    value: String(selectedFormatIndex),
+    onValueChange: function onValueChange(value) {
+      setSelectedFormatIndex(Number(value));
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ui.SelectTrigger, {
+    className: "w-full"
+  }, /*#__PURE__*/_react.default.createElement(_ui.SelectValue, null, (_b = toolbarFormat[selectedFormatIndex]) === null || _b === void 0 ? void 0 : _b.name, " ", (_c = toolbarFormat[selectedFormatIndex]) === null || _c === void 0 ? void 0 : _c.value)), /*#__PURE__*/_react.default.createElement(_ui.SelectContent, null, toolbarFormat.map(function (v, index) {
+    return /*#__PURE__*/_react.default.createElement(_ui.SelectItem, {
+      key: v.name,
+      value: String(index)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "flex justify-between w-full"
+    }, /*#__PURE__*/_react.default.createElement("span", null, v.name), /*#__PURE__*/_react.default.createElement("span", {
+      className: "text-body-sm text-icon-secondary"
+    }, v.value)));
+  }))))), /*#__PURE__*/_react.default.createElement(_ui.Divider, {
+    className: "w-full border-t-[1px] my-4"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex gap-2 justify-end"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: onCancel,
+    tabIndex: 0
+  }, button.cancel), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: onConfirm,
+    tabIndex: 0
+  }, button.confirm)));
+};

package/lib/components/FormulaSearch/index.css

@@ -0,0 +1,65 @@
+/*函数公式查找样式*/
+#luckysheet-search-formula {
+  font-size: 12px;
+}
+
+#luckysheet-search-formula .inpbox {
+  margin-bottom: 5px;
+}
+
+#luckysheet-search-formula .inpbox div {
+  display: block;
+  margin-bottom: 5px;
+}
+
+#luckysheet-search-formula .inpbox input {
+  width: 100%;
+  height: 24px;
+  line-height: 24px;
+  border: 1px solid #d4d4d4;
+  padding: 0 10px;
+  box-sizing: border-box;
+  font-size: 12px;
+}
+
+#luckysheet-search-formula .selbox {
+  margin-bottom: 5px;
+}
+
+#luckysheet-search-formula .selbox select {
+  width: 50%;
+  height: 24px;
+  line-height: 24px;
+  border: 1px solid #d4d4d4;
+  box-sizing: border-box;
+  font-size: 12px;
+}
+
+#luckysheet-search-formula .listbox label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+#formulaTypeList {
+  width: 300px;
+  height: 170px;
+  border: 1px solid #d4d4d4;
+  overflow-y: scroll;
+}
+
+.formulaList {
+  width: 300px;
+  height: 170px;
+  border: 1px solid #d4d4d4;
+  overflow-y: scroll;
+}
+
+.listBox {
+  padding: 5px;
+  border-bottom: 1px solid #d4d4d4;
+}
+
+.listBox.on {
+  background-color: #8c89fe;
+  color: #fff;
+}

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

@@ -0,0 +1,5 @@
+import React from "react";
+import "./index.css";
+export declare const FormulaSearch: React.FC<{
+    onCancel: () => void;
+}>;