@fileverse-dev/fortune-react 1.1.89 → 1.1.91

package/es/components/SheetOverlay/drag_and_drop/column-helpers.js

@@ -2,7 +2,7 @@ import { useContext, useRef } from "react";
 import { fixPositionOnFrozenCells, getSheetIndex, getFlowdata, colLocation, colLocationByIndex, updateContextWithSheetData } from "@fileverse-dev/fortune-core";
 import WorkbookContext from "../../../context";
 export function numberToColumnName(num) {
-  var columnName = '';
+  var columnName = "";
   while (num >= 0) {
     var remainder = num % 26;
     columnName = String.fromCharCode(65 + remainder) + columnName;
@@ -174,7 +174,7 @@ export var useColumnDragAndDrop = function useColumnDragAndDrop(containerRef, se
     var dragOffset = Math.abs(ev.pageX - dragRef.current.startX);
     if (!isDragActivated(host, dragOffset)) return;
     var lineLeftPx = computeInsertionFromPageX(ev.pageX).lineLeftPx;
-    var ghostPosOffset = dragRef.current.startX > ev.pageX ? 0 : 120;
+    var ghostPosOffset = dragRef.current.startX > ev.pageX ? 0 : 80;
     if (dragRef.current.lineEl) {
       dragRef.current.lineEl.style.left = "".concat(lineLeftPx, "px");
     }
@@ -194,7 +194,6 @@ export var useColumnDragAndDrop = function useColumnDragAndDrop(containerRef, se
       var sourceIndex_1 = dragRef.current.source;
       var sheetIdx_1 = getSheetIndex(context, context.currentSheetId);
       if (sheetIdx_1 != null && sourceIndex_1 >= 0 && Number.isFinite(finalInsertionIndex_1) && finalInsertionIndex_1 >= 0) {
-        console.log("sourceIndex", sourceIndex_1);
         setContext(function (draft) {
           var _a, _b, _c, _d;
           var _sheet = draft.luckysheetfile[sheetIdx_1];
@@ -222,7 +221,7 @@ export var useColumnDragAndDrop = function useColumnDragAndDrop(containerRef, se
                 var sourceColName = numberToColumnName(sourceIndex_1);
                 var targetColName_1 = numberToColumnName(targetIndex);
                 if (cell.f) {
-                  cell.f = cell.f.replace(new RegExp("\\b".concat(sourceColName, "(\\d+)\\b"), 'g'), function (match, p1) {
+                  cell.f = cell.f.replace(new RegExp("\\b".concat(sourceColName, "(\\d+)\\b"), "g"), function (match, p1) {
                     if (/^\d+$/.test(p1)) {
                       return "".concat(targetColName_1).concat(p1);
                     }
@@ -249,7 +248,7 @@ export var useColumnDragAndDrop = function useColumnDragAndDrop(containerRef, se
                   var formula_1 = cell.f;
                   var replacements_1 = [];
                   otherAffectedCols.forEach(function (col) {
-                    var regex = new RegExp("\\b".concat(col.source, "(\\d+)\\b"), 'g');
+                    var regex = new RegExp("\\b".concat(col.source, "(\\d+)\\b"), "g");
                     var match;
                     while ((match = regex.exec(formula_1)) !== null) {
                       if (/^\d+$/.test(match[1])) {
@@ -273,16 +272,16 @@ export var useColumnDragAndDrop = function useColumnDragAndDrop(containerRef, se
               }
             });
           });
-          (_c = _sheet.calcChain) === null || _c === void 0 ? void 0 : _c.map(function (item) {
+          (_c = _sheet.calcChain) === null || _c === void 0 ? void 0 : _c.forEach(function (item) {
             if (item.c === sourceIndex_1) {
               item.c = targetIndex;
             } else if (item.c > sourceIndex_1 && item.c < targetIndex) {
-              item.c = item.c - 1;
+              item.c -= 1;
             } else if (item.c < sourceIndex_1 && item.c >= targetIndex) {
-              item.c = item.c + 1;
+              item.c += 1;
             }
           });
-          (_d = window === null || window === void 0 ? void 0 : window.updateDataBlockCalcFunctionAfterRowDrag) === null || _d === void 0 ? void 0 : _d.call(window, sourceIndex_1, targetIndex, 'column', context.currentSheetId);
+          (_d = window === null || window === void 0 ? void 0 : window.updateDataBlockCalcFunctionAfterRowDrag) === null || _d === void 0 ? void 0 : _d.call(window, sourceIndex_1, targetIndex, "column", context.currentSheetId);
         });
       }
     }
@@ -299,7 +298,6 @@ export var useColumnDragAndDrop = function useColumnDragAndDrop(containerRef, se
     dragRef.current.startX = startX;
     dragRef.current.source = clickedColIndex;
     dragRef.current.active = false;
-    console.log("initiateDrag", startX);
     dragRef.current.onDocMove = handleColumnDrag;
     dragRef.current.onDocUp = handleColumnDragEnd;
     document.addEventListener("mousemove", handleColumnDrag);

package/es/components/SheetOverlay/drag_and_drop/row-helpers.js

@@ -198,15 +198,14 @@ export var useRowDragAndDrop = function useRowDragAndDrop(containerRef, selected
           rows.splice(targetIndex, 0, rowData);
           _sheet.data = rows;
           updateContextWithSheetData(draft, _sheet.data);
-          console.log("rows", sourceIndex_1);
           var d = getFlowdata(draft);
           d === null || d === void 0 ? void 0 : d.forEach(function (row) {
-            row.forEach(function (cell, index) {
+            row.forEach(function (cell) {
               if (cell) {
                 var startingIndex = sourceIndex_1 + 1;
                 var targetingIndex_1 = targetIndex + 1;
                 if (cell.f) {
-                  cell.f = cell.f.replace(new RegExp("\\b([A-Z]+)".concat(startingIndex, "\\b"), 'g'), function (match, p1) {
+                  cell.f = cell.f.replace(new RegExp("\\b([A-Z]+)".concat(startingIndex, "\\b"), "g"), function (match, p1) {
                     return "".concat(p1).concat(targetingIndex_1);
                   });
                 }
@@ -232,7 +231,7 @@ export var useRowDragAndDrop = function useRowDragAndDrop(containerRef, selected
                   otherAffectedRows.forEach(function (_a) {
                     var source = _a.source,
                       target = _a.target;
-                    var regex = new RegExp("\\b([A-Z]+)".concat(source, "\\b"), 'g');
+                    var regex = new RegExp("\\b([A-Z]+)".concat(source, "\\b"), "g");
                     var match;
                     while ((match = regex.exec(formula_1)) !== null) {
                       replacements_1.push({
@@ -254,17 +253,16 @@ export var useRowDragAndDrop = function useRowDragAndDrop(containerRef, selected
               }
             });
           });
-          (_a = _sheet.calcChain) === null || _a === void 0 ? void 0 : _a.map(function (item) {
+          (_a = _sheet.calcChain) === null || _a === void 0 ? void 0 : _a.forEach(function (item) {
             if (item.r === sourceIndex_1) {
               item.r = targetIndex;
             } else if (item.r > sourceIndex_1 && item.r < targetIndex) {
-              item.r = item.r - 1;
+              item.r -= 1;
             } else if (item.r < sourceIndex_1 && item.r >= targetIndex) {
-              item.r = item.r + 1;
+              item.r += 1;
             }
           });
-          console.log("_sheet.calcChain", _sheet.calcChain);
-          (_b = window === null || window === void 0 ? void 0 : window.updateDataBlockCalcFunctionAfterRowDrag) === null || _b === void 0 ? void 0 : _b.call(window, sourceIndex_1, targetIndex, 'row', context.currentSheetId);
+          (_b = window === null || window === void 0 ? void 0 : window.updateDataBlockCalcFunctionAfterRowDrag) === null || _b === void 0 ? void 0 : _b.call(window, sourceIndex_1, targetIndex, "row", context.currentSheetId);
         });
       }
     }

package/es/components/SheetOverlay/index.js

@@ -25,7 +25,6 @@ import ImgBoxs from "../ImgBoxs";
 import NotationBoxes from "../NotationBoxes";
 import RangeDialog from "../DataVerification/RangeDialog";
 import { useDialog } from "../../hooks/useDialog";
-import SVGIcon from "../SVGIcon";
 import DropDownList from "../DataVerification/DropdownList";
 import IframeBoxs from "../IFrameBoxs/iFrameBoxs";
 import ErrorBoxes from "../ErrorState";
@@ -482,11 +481,7 @@ var SheetOverlay = function SheetOverlay() {
     style: {
       display: "none"
     }
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "caret-down-fill",
-    width: 16,
-    height: 16
-  })), context.dataVerificationDropDownList && (context.dataVerification.dataRegulation.value1 !== "" || context.dataVerification.dataRegulation.value2 !== "") && (/*#__PURE__*/React.createElement(DropDownList, null)), /*#__PURE__*/React.createElement("div", {
+  }), context.dataVerificationDropDownList && (context.dataVerification.dataRegulation.value1 !== "" || context.dataVerification.dataRegulation.value2 !== "") && (/*#__PURE__*/React.createElement(DropDownList, null)), /*#__PURE__*/React.createElement("div", {
     id: "luckysheet-dataVerification-showHintBox",
     ref: dataVerificationHintBoxRef
   }), /*#__PURE__*/React.createElement("div", {

package/es/components/Toolbar/index.js

@@ -448,58 +448,58 @@ export var CurrencySelector = function CurrencySelector(_a) {
   }));
 };
 var Toolbar = function Toolbar(_a) {
-  var _b, _c, _d;
+  var _b, _c, _d, _e;
   var setMoreItems = _a.setMoreItems,
     moreItemsOpen = _a.moreItemsOpen,
     onMoreToolbarItemsClose = _a.onMoreToolbarItemsClose,
     moreToolbarItems = _a.moreToolbarItems;
-  var _e = useContext(WorkbookContext),
-    context = _e.context,
-    setContext = _e.setContext,
-    refs = _e.refs,
-    settings = _e.settings,
-    handleUndo = _e.handleUndo,
-    handleRedo = _e.handleRedo;
+  var _f = useContext(WorkbookContext),
+    context = _f.context,
+    setContext = _f.setContext,
+    refs = _f.refs,
+    settings = _f.settings,
+    handleUndo = _f.handleUndo,
+    handleRedo = _f.handleRedo;
   var contextRef = useRef(context);
   var containerRef = useRef(null);
-  var _f = useState(-1),
-    toolbarWrapIndex = _f[0],
-    setToolbarWrapIndex = _f[1];
-  var _g = useState([]),
-    itemLocations = _g[0],
-    setItemLocations = _g[1];
-  var _h = useState(false),
-    showDuneModal = _h[0],
-    setShowDuneModal = _h[1];
-  var _j = useState(window.innerWidth >= 1280),
-    isDesktop = _j[0],
-    setIsDesktop = _j[1];
-  var _k = useDialog(),
-    showDialog = _k.showDialog,
-    hideDialog = _k.hideDialog;
+  var _g = useState(-1),
+    toolbarWrapIndex = _g[0],
+    setToolbarWrapIndex = _g[1];
+  var _h = useState([]),
+    itemLocations = _h[0],
+    setItemLocations = _h[1];
+  var _j = useState(false),
+    showDuneModal = _j[0],
+    setShowDuneModal = _j[1];
+  var _k = useState(window.innerWidth >= 1280),
+    isDesktop = _k[0],
+    setIsDesktop = _k[1];
+  var _l = useDialog(),
+    showDialog = _l.showDialog,
+    hideDialog = _l.hideDialog;
   var firstSelection = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0];
   var flowdata = getFlowdata(context);
   contextRef.current = context;
   var row = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
   var col = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
   var cell = flowdata && row != null && col != null ? (_c = flowdata === null || flowdata === void 0 ? void 0 : flowdata[row]) === null || _c === void 0 ? void 0 : _c[col] : undefined;
-  var _l = locale(context),
-    toolbar = _l.toolbar,
-    merge = _l.merge,
-    border = _l.border,
-    freezen = _l.freezen,
-    defaultFmt = _l.defaultFmt,
-    formula = _l.formula,
-    sort = _l.sort,
-    align = _l.align,
-    textWrap = _l.textWrap,
-    rotation = _l.rotation,
-    screenshot = _l.screenshot,
-    filter = _l.filter,
-    splitText = _l.splitText,
-    findAndReplace = _l.findAndReplace,
-    comment = _l.comment,
-    fontarray = _l.fontarray;
+  var _m = locale(context),
+    toolbar = _m.toolbar,
+    merge = _m.merge,
+    border = _m.border,
+    freezen = _m.freezen,
+    defaultFmt = _m.defaultFmt,
+    formula = _m.formula,
+    sort = _m.sort,
+    align = _m.align,
+    textWrap = _m.textWrap,
+    rotation = _m.rotation,
+    screenshot = _m.screenshot,
+    filter = _m.filter,
+    splitText = _m.splitText,
+    findAndReplace = _m.findAndReplace,
+    comment = _m.comment,
+    fontarray = _m.fontarray;
   var toolbarFormat = locale(context).format;
   var sheetWidth = context.luckysheetTableContentHW[0];
   var currency = settings.currency;
@@ -534,6 +534,9 @@ var Toolbar = function Toolbar(_a) {
     subMenu.style.display = "none";
   }, []);
   useEffect(function () {
+    window.getDataValidationComponent = function () {
+      return /*#__PURE__*/React.createElement(DataVerification, null);
+    };
     var handleResize = function handleResize() {
       setIsDesktop(window.innerWidth >= 1280);
     };
@@ -965,8 +968,8 @@ var Toolbar = function Toolbar(_a) {
         tooltip: tooltip,
         key: name,
         onClick: function onClick() {
-          if (context.allowEdit === false) return;
-          showDialog(/*#__PURE__*/React.createElement(DataVerification, null), undefined, toolbar.dataVerification);
+          var _a;
+          (_a = document.getElementById("data-verification-button")) === null || _a === void 0 ? void 0 : _a.click();
         }
       });
     }
@@ -1643,7 +1646,7 @@ var Toolbar = function Toolbar(_a) {
         });
       }
     }));
-  }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFormat, align, handleUndo, handleRedo, flowdata, formula, showDuneModal, merge, border, freezen, screenshot, sort, textWrap, rotation, filter, splitText, findAndReplace, context.luckysheet_select_save, context.defaultFontSize, context.allowEdit, comment, fontarray, hideSubMenu, showSubMenu, refs.canvas, customColor, customStyle, toolbarFormat.moreCurrency]);
+  }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFormat, align, handleUndo, handleRedo, flowdata, formula, showDuneModal, merge, border, freezen, screenshot, sort, textWrap, rotation, filter, splitText, findAndReplace, context.luckysheet_select_save, context.defaultFontSize, context.allowEdit, comment, fontarray, hideSubMenu, showSubMenu, refs.canvas, customColor, customStyle, toolbarFormat.moreCurrency, (_d = context.dataVerification) === null || _d === void 0 ? void 0 : _d.dataRegulation]);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     className: "fortune-toolbar",
@@ -1660,7 +1663,7 @@ var Toolbar = function Toolbar(_a) {
       icon: n.icon,
       iconName: n.iconName
     }, n.children);
-  }), ((_d = settings.customToolbarItems) === null || _d === void 0 ? void 0 : _d.length) > 0 ? (/*#__PURE__*/React.createElement(Divider, {
+  }), ((_e = settings.customToolbarItems) === null || _e === void 0 ? void 0 : _e.length) > 0 ? (/*#__PURE__*/React.createElement(Divider, {
     key: "customDivider"
   })) : null, (toolbarWrapIndex === -1 || isDesktop ? settings.toolbarItems : settings.toolbarItems.slice(0, toolbarWrapIndex + 1)).map(function (name, i) {
     return getToolbarItem(name, i);

package/lib/components/ContextMenu/index.js

@@ -428,7 +428,7 @@ var ContextMenu = function ContextMenu() {
       });
     }
     if (name === "insert-row-above") {
-      return (selection === null || selection === void 0 ? void 0 : selection.row_select) ? null : ["left"].map(function (dir) {
+      return (selection === null || selection === void 0 ? void 0 : selection.column_select) ? null : ["left"].map(function (dir) {
         return /*#__PURE__*/_react.default.createElement(_Menu.default, {
           key: "add-row-above-".concat(dir),
           onClick: function onClick() {
@@ -442,7 +442,7 @@ var ContextMenu = function ContextMenu() {
       });
     }
     if (name === "insert-row") {
-      return (selection === null || selection === void 0 ? void 0 : selection.row_select) ? null : ["left"].map(function (dir) {
+      return (selection === null || selection === void 0 ? void 0 : selection.column_select) ? null : ["left"].map(function (dir) {
         return /*#__PURE__*/_react.default.createElement(_Menu.default, {
           key: "add-row-below-".concat(dir),
           onClick: function onClick() {

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

@@ -0,0 +1,9 @@
+import React from "react";
+export declare const TEXT_COLORS: {
+    name: string;
+    value: string;
+}[];
+export declare const ColorSection: ({ onPick, trigerColor, }: {
+    onPick: (color: string) => void;
+    trigerColor: string;
+}) => React.JSX.Element;

package/lib/components/DataVerification/ColorPicker.js

@@ -0,0 +1,106 @@
+"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.TEXT_COLORS = exports.ColorSection = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lucideReact = require("lucide-react");
+var _ui = require("@fileverse/ui");
+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 TEXT_COLORS = exports.TEXT_COLORS = [{
+  name: "Light Gray",
+  value: "228, 232, 237"
+}, {
+  name: "White",
+  value: "249, 249, 249"
+}, {
+  name: "Pink",
+  value: "244, 217, 227"
+}, {
+  name: "Peach",
+  value: "247, 229, 207"
+}, {
+  name: "Blue",
+  value: "217, 234, 244"
+}, {
+  name: "Green",
+  value: "222, 239, 222"
+}, {
+  name: "Light Green",
+  value: "239, 239, 239"
+}, {
+  name: "Rose",
+  value: "244, 230, 230"
+}, {
+  name: "Yellow",
+  value: "247, 239, 217"
+}, {
+  name: "Purple",
+  value: "230, 230, 244"
+}, {
+  name: "Cyan",
+  value: "217, 244, 244"
+}, {
+  name: "Cream",
+  value: "244, 239, 234"
+}];
+var ColorSection = exports.ColorSection = function ColorSection(_a) {
+  var onPick = _a.onPick,
+    trigerColor = _a.trigerColor;
+  var _b = (0, _react.useState)(false),
+    isOpen = _b[0],
+    setIsOpen = _b[1];
+  return /*#__PURE__*/_react.default.createElement(_ui.Popover, {
+    open: isOpen,
+    onOpenChange: function onOpenChange(open) {
+      setIsOpen(open);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ui.PopoverTrigger, {
+    className: "hover:bg-red",
+    style: {
+      backgroundColor: "red!important"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex items-center justify-between  color-picker rounded transition-all cursor-pointer border border-gray-300",
+    style: {
+      padding: "7px"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex items-center gap-3 color-text-secondary"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "w-5 h-5 rounded-full",
+    style: {
+      backgroundColor: "rgb(".concat(trigerColor, ")")
+    }
+  }), /*#__PURE__*/_react.default.createElement(_lucideReact.ChevronDown, {
+    size: 18,
+    className: "transition-transform ".concat(isOpen ? "rotate-180" : "")
+  })))), /*#__PURE__*/_react.default.createElement(_ui.PopoverContent, {
+    align: "start",
+    alignOffset: 0,
+    className: "w-[200px] export-content-popover",
+    elevation: 2,
+    side: "bottom",
+    sideOffset: 4
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "transition-all p-2 duration-200 w-full"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex gap-2 flex-wrap w-full"
+  }, TEXT_COLORS.map(function (color) {
+    return /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      key: color.value,
+      onClick: function onClick() {
+        onPick(color.value);
+        setIsOpen(false);
+      },
+      className: "w-7 h-7 rounded-full transition-all hover:scale-110 hover:shadow-md",
+      style: {
+        backgroundColor: "rgb(".concat(color.value, ")")
+      },
+      title: color.name
+    });
+  })))));
+};

package/lib/components/DataVerification/DropdownList.js

@@ -30,11 +30,10 @@ var DropDownList = function DropDownList() {
   var _e = (0, _react.useState)([]),
     selected = _e[0],
     setSelected = _e[1];
-  var close = (0, _react.useCallback)(function () {
-    setContext(function (ctx) {
-      ctx.dataVerificationDropDownList = false;
-    });
-  }, [setContext]);
+  var _f = (0, _react.useState)([]),
+    rbgColor = _f[0],
+    setRbgColor = _f[1];
+  var close = (0, _react.useCallback)(function () {}, [setContext]);
   (0, _useOutsideClick.useOutsideClick)(containerRef, close, [close]);
   (0, _react.useEffect)(function () {
     var _a, _b;
@@ -54,19 +53,30 @@ var DropDownList = function DropDownList() {
     }
     var index = (0, _fortuneCore.getSheetIndex)(context, context.currentSheetId);
     var dataVerification = context.luckysheetfile[index].dataVerification;
+    if (!dataVerification) return;
     var item = dataVerification["".concat(rowIndex, "_").concat(colIndex)];
+    if (!item) return;
     var dropdownList = (0, _fortuneCore.getDropdownList)(context, item.value1);
     var cellValue = (0, _fortuneCore.getCellValue)(rowIndex, colIndex, d);
     if (cellValue) {
       setSelected(cellValue.toString().split(","));
     }
+    var color = item.color;
+    var colorValues = color === null || color === void 0 ? void 0 : color.split(",").map(function (v) {
+      return v.trim();
+    });
+    var rbgColorArr = [];
+    for (var i = 0; i < colorValues.length; i += 3) {
+      rbgColorArr.push(colorValues.slice(i, i + 3).join(", "));
+    }
+    setRbgColor(rbgColorArr);
     setList(dropdownList);
     setPosition({
       left: col_pre,
       top: row
     });
     setIsMul(item.type2 === "true");
-  }, []);
+  }, [context.luckysheet_select_save]);
   (0, _react.useEffect)(function () {
     if (!context.luckysheet_select_save) return;
     var last = context.luckysheet_select_save[context.luckysheet_select_save.length - 1];
@@ -75,7 +85,9 @@ var DropDownList = function DropDownList() {
     if (rowIndex == null || colIndex == null) return;
     var index = (0, _fortuneCore.getSheetIndex)(context, context.currentSheetId);
     var dataVerification = context.luckysheetfile[index].dataVerification;
+    if (!dataVerification) return;
     var item = dataVerification["".concat(rowIndex, "_").concat(colIndex)];
+    if (!item) return;
     if (item.type2 !== "true") return;
     var d = (0, _fortuneCore.getFlowdata)(context);
     if (!d) return;
@@ -106,7 +118,10 @@ var DropDownList = function DropDownList() {
     tabIndex: 0
   }, list.map(function (v, i) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dropdown-List-item",
+      className: "dropdown-List-item mb-1",
+      style: {
+        backgroundColor: "rgb(".concat(rbgColor[i], ")") || "red"
+      },
       key: i,
       onClick: function onClick() {
         setContext(function (ctx) {

package/lib/components/DataVerification/DropdownOption.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type Item = {
+    id: string;
+    value: string;
+    color?: string | null;
+};
+declare const DynamicInputList: ({ optionItems, setOptionItems, }: {
+    optionItems: Item[];
+    setOptionItems: React.Dispatch<React.SetStateAction<Item[]>>;
+}) => React.JSX.Element;
+export default DynamicInputList;