@fileverse-dev/fortune-react 1.1.89 → 1.1.91

package/es/components/ContextMenu/index.js

@@ -419,7 +419,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.createElement(Menu, {
           key: "add-row-above-".concat(dir),
           onClick: function onClick() {
@@ -433,7 +433,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.createElement(Menu, {
           key: "add-row-below-".concat(dir),
           onClick: function onClick() {

package/es/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/es/components/DataVerification/ColorPicker.js

@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@fileverse/ui";
+export var 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"
+}];
+export var ColorSection = function ColorSection(_a) {
+  var onPick = _a.onPick,
+    trigerColor = _a.trigerColor;
+  var _b = useState(false),
+    isOpen = _b[0],
+    setIsOpen = _b[1];
+  return /*#__PURE__*/React.createElement(Popover, {
+    open: isOpen,
+    onOpenChange: function onOpenChange(open) {
+      setIsOpen(open);
+    }
+  }, /*#__PURE__*/React.createElement(PopoverTrigger, {
+    className: "hover:bg-red",
+    style: {
+      backgroundColor: "red!important"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-between  color-picker rounded transition-all cursor-pointer border border-gray-300",
+    style: {
+      padding: "7px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-3 color-text-secondary"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "w-5 h-5 rounded-full",
+    style: {
+      backgroundColor: "rgb(".concat(trigerColor, ")")
+    }
+  }), /*#__PURE__*/React.createElement(ChevronDown, {
+    size: 18,
+    className: "transition-transform ".concat(isOpen ? "rotate-180" : "")
+  })))), /*#__PURE__*/React.createElement(PopoverContent, {
+    align: "start",
+    alignOffset: 0,
+    className: "w-[200px] export-content-popover",
+    elevation: 2,
+    side: "bottom",
+    sideOffset: 4
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "transition-all p-2 duration-200 w-full"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2 flex-wrap w-full"
+  }, TEXT_COLORS.map(function (color) {
+    return /*#__PURE__*/React.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/es/components/DataVerification/DropdownList.js

@@ -21,11 +21,10 @@ var DropDownList = function DropDownList() {
   var _e = useState([]),
     selected = _e[0],
     setSelected = _e[1];
-  var close = useCallback(function () {
-    setContext(function (ctx) {
-      ctx.dataVerificationDropDownList = false;
-    });
-  }, [setContext]);
+  var _f = useState([]),
+    rbgColor = _f[0],
+    setRbgColor = _f[1];
+  var close = useCallback(function () {}, [setContext]);
   useOutsideClick(containerRef, close, [close]);
   useEffect(function () {
     var _a, _b;
@@ -45,19 +44,30 @@ var DropDownList = function DropDownList() {
     }
     var index = 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 = getDropdownList(context, item.value1);
     var cellValue = 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]);
   useEffect(function () {
     if (!context.luckysheet_select_save) return;
     var last = context.luckysheet_select_save[context.luckysheet_select_save.length - 1];
@@ -66,7 +76,9 @@ var DropDownList = function DropDownList() {
     if (rowIndex == null || colIndex == null) return;
     var index = 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 = getFlowdata(context);
     if (!d) return;
@@ -97,7 +109,10 @@ var DropDownList = function DropDownList() {
     tabIndex: 0
   }, list.map(function (v, i) {
     return /*#__PURE__*/React.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/es/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;

package/es/components/DataVerification/DropdownOption.js

@@ -0,0 +1,264 @@
+"use client";
+
+var __assign = this && this.__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 __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useEffect, useRef, useState } from "react";
+import { Button, cn, TextField, IconButton } from "@fileverse/ui";
+import { ColorSection as ColorPicker } from "./ColorPicker";
+function createId() {
+  return "".concat(Date.now(), "_").concat(Math.random().toString(36).slice(2));
+}
+var DynamicInputList = function DynamicInputList(_a) {
+  var optionItems = _a.optionItems,
+    setOptionItems = _a.setOptionItems;
+  var dragFromIndexRef = useRef(null);
+  var _b = useState(null),
+    draggingIndex = _b[0],
+    setDraggingIndex = _b[1];
+  var _c = useState(null),
+    overPosition = _c[0],
+    setOverPosition = _c[1];
+  var dragPreviewRef = useRef(null);
+  var handleAdd = function handleAdd() {
+    var nextNum = optionItems.length + 1;
+    setOptionItems(function (prev) {
+      return __spreadArray(__spreadArray([], prev, true), [{
+        id: createId(),
+        value: "Option ".concat(nextNum),
+        color: "228, 232, 237"
+      }], false);
+    });
+  };
+  useEffect(function () {
+    handleAdd();
+  }, []);
+  var handleRemove = function handleRemove(index) {
+    setOptionItems(function (prev) {
+      return prev.filter(function (_, i) {
+        return i !== index;
+      });
+    });
+  };
+  var handleChange = function handleChange(index, v) {
+    setOptionItems(function (prev) {
+      var next = prev.slice();
+      next[index] = __assign(__assign({}, next[index]), {
+        value: v
+      });
+      return next;
+    });
+  };
+  function createDragPreview(node, cursorX, cursorY) {
+    if (cursorX === void 0) {
+      cursorX = 20;
+    }
+    if (cursorY === void 0) {
+      cursorY = 10;
+    }
+    var rect = node.getBoundingClientRect();
+    var clone = node.cloneNode(true);
+    clone.style.position = "fixed";
+    clone.style.top = "".concat(rect.top, "px");
+    clone.style.left = "".concat(rect.left, "px");
+    clone.style.width = "".concat(rect.width, "px");
+    clone.style.pointerEvents = "none";
+    clone.style.zIndex = "9999";
+    clone.style.transform = "scale(0.98)";
+    clone.style.borderRadius = "12px";
+    clone.style.background = getComputedStyle(document.documentElement).getPropertyValue("--color-card") || "white";
+    clone.style.boxShadow = "0 8px 24px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08)";
+    clone.style.opacity = "0.95";
+    document.body.appendChild(clone);
+    return {
+      clone: clone,
+      offsetX: cursorX,
+      offsetY: cursorY
+    };
+  }
+  var _onDragStart = function onDragStart(index, e) {
+    dragFromIndexRef.current = index;
+    setDraggingIndex(index);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", String(index));
+    var handle = e.currentTarget;
+    var row = handle.closest("li");
+    if (row) {
+      var preview = createDragPreview(row);
+      dragPreviewRef.current = preview.clone;
+      try {
+        e.dataTransfer.setDragImage(preview.clone, preview.offsetX, preview.offsetY);
+      } catch (_a) {}
+    }
+  };
+  var onDragEnd = function onDragEnd() {
+    if (dragPreviewRef.current && dragPreviewRef.current.parentNode) {
+      dragPreviewRef.current.parentNode.removeChild(dragPreviewRef.current);
+    }
+    dragPreviewRef.current = null;
+    setDraggingIndex(null);
+    setOverPosition(null);
+    dragFromIndexRef.current = null;
+  };
+  var onDragOverRow = function onDragOverRow(index, e) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    var target = e.currentTarget;
+    var rect = target.getBoundingClientRect();
+    var halfway = rect.top + rect.height / 2;
+    var pos = e.clientY < halfway ? "before" : "after";
+    setOverPosition(pos);
+  };
+  var onDragLeaveRow = function onDragLeaveRow() {};
+  function move(list, from, to) {
+    var result = list.slice();
+    var removed = result.splice(from, 1)[0];
+    result.splice(to, 0, removed);
+    return result;
+  }
+  var onDropRow = function onDropRow(index, e) {
+    e.preventDefault();
+    var fromText = e.dataTransfer.getData("text/plain");
+    var fromIndex = Number.isNaN(Number(fromText)) ? dragFromIndexRef.current : Number(fromText);
+    if (fromIndex == null) {
+      setOverPosition(null);
+      return;
+    }
+    var dest = index;
+    if (overPosition === "after") {
+      dest = index + 1;
+    }
+    var adjustedDest = fromIndex < dest ? dest - 1 : dest;
+    if (fromIndex !== adjustedDest) {
+      setOptionItems(function (prev) {
+        return move(prev, fromIndex, Math.max(0, Math.min(prev.length, adjustedDest)));
+      });
+    }
+    setOverPosition(null);
+    dragFromIndexRef.current = null;
+    setDraggingIndex(null);
+    if (dragPreviewRef.current && dragPreviewRef.current.parentNode) {
+      dragPreviewRef.current.parentNode.removeChild(dragPreviewRef.current);
+      dragPreviewRef.current = null;
+    }
+  };
+  var handleColorChange = function handleColorChange(index, color) {
+    setOptionItems(function (prev) {
+      var next = prev.slice();
+      next[index] = __assign(__assign({}, next[index]), {
+        color: color
+      });
+      return next;
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "mx-auto max-w-2xl"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "flex flex-col"
+  }, optionItems.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: item.id,
+      className: cn("relative flex optionItems-center gap-3 transition mb-4", draggingIndex === index && "scale-[0.99] opacity-80 shadow-lg rounded-xl"),
+      onDragOver: function onDragOver(e) {
+        return onDragOverRow(index, e);
+      },
+      onDragLeave: onDragLeaveRow,
+      onDrop: function onDrop(e) {
+        return onDropRow(index, e);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cursor-grab p-2 text-muted-foreground hover:text-foreground active:cursor-grabbing",
+      draggable: true,
+      onDragStart: function onDragStart(e) {
+        return _onDragStart(index, e);
+      },
+      onDragEnd: onDragEnd,
+      "aria-label": "Drag handle for row ".concat(index + 1),
+      title: "Drag to reorder",
+      style: {
+        cursor: "grab"
+      }
+    }, /*#__PURE__*/React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "20",
+      viewBox: "0 0 16 20",
+      fill: "currentColor",
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React.createElement("circle", {
+      cx: "4",
+      cy: "5",
+      r: "1.5"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "4",
+      cy: "10",
+      r: "1.5"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "4",
+      cy: "15",
+      r: "1.5"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "10",
+      cy: "5",
+      r: "1.5"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "10",
+      cy: "10",
+      r: "1.5"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "10",
+      cy: "15",
+      r: "1.5"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "flex optionItems-center"
+    }, /*#__PURE__*/React.createElement(ColorPicker, {
+      onPick: function onPick(c) {
+        return handleColorChange(index, c);
+      },
+      trigerColor: item.color
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-1 optionItems-center transition"
+    }, /*#__PURE__*/React.createElement(TextField, {
+      className: "w-full",
+      placeholder: "Option ".concat(index + 1),
+      value: item.value,
+      onChange: function onChange(e) {
+        return handleChange(index, e.target.value);
+      },
+      "aria-label": "Option ".concat(index + 1)
+    })), /*#__PURE__*/React.createElement(IconButton, {
+      icon: "Trash2",
+      type: "button",
+      variant: "ghost",
+      onClick: function onClick() {
+        return handleRemove(index);
+      },
+      className: "",
+      "aria-label": "Delete row ".concat(index + 1),
+      title: "Delete"
+    }));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "mt-8"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    onClick: handleAdd,
+    className: ""
+  }, "Add another item")));
+};
+export default DynamicInputList;

package/es/components/DataVerification/index.css

@@ -199,4 +199,8 @@
 
 .data-verification-checkbox-label {
   min-width: 100px;
+}
+
+.color-picker:hover {
+  background: hsl(var(--color-bg-default-hover, #F2F4F5));
 }

package/es/components/DataVerification/index.js

@@ -8,13 +8,17 @@ var __assign = this && this.__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
-import { getDropdownList, getFlowdata, getRangeByTxt, getRangetxt, getSheetIndex, locale, setCellValue, confirmMessage } from "@fileverse-dev/fortune-core";
+import { getDropdownList, getFlowdata, getRangeByTxt, getRangetxt, locale, setCellValue, confirmMessage } from "@fileverse-dev/fortune-core";
 import { Button, Checkbox, Divider, LucideIcon, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TextField } from "@fileverse/ui";
 import React, { useCallback, useContext, useEffect, useState } from "react";
+import DynamicInputList from "./DropdownOption";
 import WorkbookContext from "../../context";
 import { useDialog } from "../../hooks/useDialog";
 import { injectDatepickerStyles } from "../../utils/datepickerStyles";
 import "./index.css";
+function createId() {
+  return "".concat(Date.now(), "_").concat(Math.random().toString(36).slice(2));
+}
 injectDatepickerStyles();
 var DataVerification = function DataVerification() {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
@@ -29,6 +33,56 @@ var DataVerification = function DataVerification() {
     button = _r.button,
     generalDialog = _r.generalDialog;
   var dateCondition = useState(["between", "notBetween", "equal", "notEqualTo", "earlierThan", "noEarlierThan", "laterThan", "noLaterThan"])[0];
+  function getSheetIndex() {
+    var _a;
+    for (var i = 0; i < context.luckysheetfile.length; i += 1) {
+      if (((_a = context.luckysheetfile[i]) === null || _a === void 0 ? void 0 : _a.id) === context.currentSheetId) {
+        return i;
+      }
+    }
+    return null;
+  }
+  var _s = useState([]),
+    optionItems = _s[0],
+    setOptionItems = _s[1];
+  var valuesFromArray = optionItems.map(function (i) {
+    return i.value;
+  }).join(",");
+  var colors = optionItems.map(function (i) {
+    return i.color;
+  }).join(",");
+  useEffect(function () {
+    setContext(function (ctx) {
+      ctx.dataVerification.dataRegulation.color = colors;
+      ctx.dataVerification.dataRegulation.value1 = valuesFromArray;
+    });
+  }, [optionItems]);
+  useEffect(function () {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var selectRow = (_c = (_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.row) === null || _c === void 0 ? void 0 : _c[0];
+    var selectCol = (_f = (_e = (_d = context.luckysheet_select_save) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.column) === null || _f === void 0 ? void 0 : _f[0];
+    var sheetIndex = getSheetIndex();
+    var dataVerificationInfo = context.luckysheetfile[sheetIndex].dataVerification;
+    var value = (_g = dataVerificationInfo === null || dataVerificationInfo === void 0 ? void 0 : dataVerificationInfo["".concat(selectRow, "_").concat(selectCol)]) === null || _g === void 0 ? void 0 : _g.value1;
+    var color = (_h = dataVerificationInfo === null || dataVerificationInfo === void 0 ? void 0 : dataVerificationInfo["".concat(selectRow, "_").concat(selectCol)]) === null || _h === void 0 ? void 0 : _h.color;
+    if (value && color) {
+      var colorValues = color === null || color === void 0 ? void 0 : color.split(",").map(function (v) {
+        return v.trim();
+      });
+      var rgbArray_1 = [];
+      for (var i = 0; i < colorValues.length; i += 3) {
+        rgbArray_1.push(colorValues.slice(i, i + 3).join(", "));
+      }
+      value = value === null || value === void 0 ? void 0 : value.split(",");
+      setOptionItems(value.map(function (v, i) {
+        return {
+          id: createId(),
+          value: v,
+          color: rgbArray_1[i]
+        };
+      }));
+    }
+  }, []);
   var dataSelectRange = useCallback(function (type, value) {
     hideDialog();
     setContext(function (ctx) {
@@ -57,7 +111,7 @@ var DataVerification = function DataVerification() {
             var list = getDropdownList(ctx, value1);
             item.value1 = list.join(",");
           }
-          var currentDataVerification = (_c = ctx.luckysheetfile[getSheetIndex(ctx, ctx.currentSheetId)].dataVerification) !== null && _c !== void 0 ? _c : {};
+          var currentDataVerification = (_c = ctx.luckysheetfile[getSheetIndex()].dataVerification) !== null && _c !== void 0 ? _c : {};
           var str = range[range.length - 1].row[0];
           var edr = range[range.length - 1].row[1];
           var stc = range[range.length - 1].column[0];
@@ -73,7 +127,7 @@ var DataVerification = function DataVerification() {
               }
             }
           }
-          ctx.luckysheetfile[getSheetIndex(ctx, ctx.currentSheetId)].dataVerification = currentDataVerification;
+          ctx.luckysheetfile[getSheetIndex()].dataVerification = currentDataVerification;
         }
       });
     } else if (type === "delete") {
@@ -84,7 +138,7 @@ var DataVerification = function DataVerification() {
           showDialog(generalDialog.noSelectionError, "ok");
           return;
         }
-        var currentDataVerification = (_c = ctx.luckysheetfile[getSheetIndex(ctx, ctx.currentSheetId)].dataVerification) !== null && _c !== void 0 ? _c : {};
+        var currentDataVerification = (_c = ctx.luckysheetfile[getSheetIndex()].dataVerification) !== null && _c !== void 0 ? _c : {};
         var str = range[range.length - 1].row[0];
         var edr = range[range.length - 1].row[1];
         var stc = range[range.length - 1].column[0];
@@ -106,7 +160,7 @@ var DataVerification = function DataVerification() {
         var range = ctx.luckysheet_select_save[ctx.luckysheet_select_save.length - 1];
         rangeT = getRangetxt(context, context.currentSheetId, range, context.currentSheetId);
       }
-      var index = getSheetIndex(ctx, ctx.currentSheetId);
+      var index = getSheetIndex();
       var ctxDataVerification = ctx.luckysheetfile[index].dataVerification;
       if (ctxDataVerification) {
         if (!ctx.luckysheet_select_save) return;
@@ -215,15 +269,9 @@ var DataVerification = function DataVerification() {
     }, dataVerification[v]);
   }))), ((_c = (_b = context.dataVerification) === null || _b === void 0 ? void 0 : _b.dataRegulation) === null || _c === void 0 ? void 0 : _c.type) === "dropdown" && (/*#__PURE__*/React.createElement("div", {
     className: "mt-4"
-  }, /*#__PURE__*/React.createElement(TextField, {
-    value: context.dataVerification.dataRegulation.value1,
-    placeholder: dataVerification.placeholder1,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.value1 = value;
-      });
-    }
+  }, /*#__PURE__*/React.createElement(DynamicInputList, {
+    optionItems: optionItems,
+    setOptionItems: setOptionItems
   }), /*#__PURE__*/React.createElement("div", {
     className: "mt-4 flex items-center"
   }, /*#__PURE__*/React.createElement(Checkbox, {

package/es/components/SheetOverlay/ColumnHeader.js

@@ -73,6 +73,12 @@ var ColumnHeader = function ColumnHeader() {
     }]);
   }, [context, hoverLocation.col_index, refs.globalCache.freezen]);
   var onMouseDown = useCallback(function (e) {
+    if (e.button === 0 && e.target.tagName === "use") {
+      var nativeEvent_1 = e.nativeEvent;
+      setContext(function (draft) {
+        handleColumnHeaderMouseDown(draft, refs.globalCache, nativeEvent_1, containerRef.current, refs.cellInput.current, refs.fxInput.current);
+      });
+    }
     if (e.button !== 0) return;
     var targetEl = e.target;
     if (targetEl.closest(".fortune-cols-change-size") || targetEl.closest(".fortune-cols-freeze-handle") || targetEl.closest(".header-arrow")) return;
@@ -85,9 +91,9 @@ var ColumnHeader = function ColumnHeader() {
         draft.luckysheet_scroll_status = true;
       });
     } else {
-      var nativeEvent_1 = e.nativeEvent;
+      var nativeEvent_2 = e.nativeEvent;
       setContext(function (draft) {
-        handleColumnHeaderMouseDown(draft, refs.globalCache, nativeEvent_1, containerRef.current, refs.cellInput.current, refs.fxInput.current);
+        handleColumnHeaderMouseDown(draft, refs.globalCache, nativeEvent_2, containerRef.current, refs.cellInput.current, refs.fxInput.current);
       });
       return;
     }