@fileverse-dev/fortune-react 1.1.90 → 1.1.92

package/es/components/Toolbar/index.js

@@ -136,7 +136,6 @@ import SVGIcon from "../SVGIcon";
 import { useDialog } from "../../hooks/useDialog";
 import { SplitColumn } from "../SplitColumn";
 import { LocationCondition } from "../LocationCondition";
-import DataVerification from "../DataVerification";
 import ConditionalFormat from "../ConditionFormat";
 import CustomButton from "./CustomButton";
 import { CustomColor } from "./CustomColor";
@@ -448,58 +447,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;
@@ -965,8 +964,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 +1642,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 +1659,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/es/components/Workbook/api.d.ts

@@ -4,6 +4,7 @@ import { SetContextOptions } from "../../context";
 export declare function generateAPIs(context: Context, setContext: (recipe: (ctx: Context) => void, options?: SetContextOptions) => void, handleUndo: () => void, handleRedo: () => void, settings: Required<Settings>, cellInput: HTMLDivElement | null, scrollbarX: HTMLDivElement | null, scrollbarY: HTMLDivElement | null, globalCache: GlobalCache | null): {
     applyOp: (ops: Op[]) => void;
     getCryptoPrice: typeof getCryptoPrice;
+    DataVerificationComponent: import("react").FC<{}>;
     getCellValue: (row: number, column: number, options?: api.CommonOptions & {
         type?: keyof Cell;
     }) => any;

package/es/components/Workbook/api.js

@@ -9,6 +9,7 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { addSheet, api, deleteRowCol, deleteSheet, insertRowCol, opToPatch, createFilterOptions, getSheetIndex, locale, setCaretPosition, newComment } from "@fileverse-dev/fortune-core";
+import DataVerification from "../DataVerification";
 import { applyPatches } from "immer";
 import _ from "lodash";
 import { getCryptoPrice } from "../../utils/cryptoApi";
@@ -66,6 +67,7 @@ export function generateAPIs(context, setContext, handleUndo, handleRedo, settin
       });
     },
     getCryptoPrice: getCryptoPrice,
+    DataVerificationComponent: DataVerification,
     getCellValue: function getCellValue(row, column, options) {
       if (options === void 0) {
         options = {};

package/es/components/Workbook/index.d.ts

@@ -11,6 +11,7 @@ type AdditionalProps = {
 declare const Workbook: React.ForwardRefExoticComponent<Settings & AdditionalProps & React.RefAttributes<{
     applyOp: (ops: Op[]) => void;
     getCryptoPrice: typeof getCryptoPrice;
+    DataVerificationComponent: React.FC<{}>;
     getCellValue: (row: number, column: number, options?: api.CommonOptions & {
         type?: "error" | "rt" | "f" | "m" | "v" | "mc" | "ct" | "qp" | "spl" | "bg" | "lo" | "baseValue" | "baseCurrency" | "baseCurrencyPrice" | "isDataBlockFormula" | "ps" | "hl" | keyof import("@fileverse-dev/fortune-core").CellStyle | undefined;
     }) => any;

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;

package/lib/components/DataVerification/DropdownOption.js

@@ -0,0 +1,271 @@
+"use strict";
+"use client";
+
+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 _react = _interopRequireWildcard(require("react"));
+var _ui = require("@fileverse/ui");
+var _ColorPicker = require("./ColorPicker");
+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 __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 __spreadArray = void 0 && (void 0).__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));
+};
+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 = (0, _react.useRef)(null);
+  var _b = (0, _react.useState)(null),
+    draggingIndex = _b[0],
+    setDraggingIndex = _b[1];
+  var _c = (0, _react.useState)(null),
+    overPosition = _c[0],
+    setOverPosition = _c[1];
+  var dragPreviewRef = (0, _react.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);
+    });
+  };
+  (0, _react.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.default.createElement("div", {
+    className: "mx-auto max-w-2xl"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "flex flex-col"
+  }, optionItems.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: item.id,
+      className: (0, _ui.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.default.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.default.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.default.createElement("circle", {
+      cx: "4",
+      cy: "5",
+      r: "1.5"
+    }), /*#__PURE__*/_react.default.createElement("circle", {
+      cx: "4",
+      cy: "10",
+      r: "1.5"
+    }), /*#__PURE__*/_react.default.createElement("circle", {
+      cx: "4",
+      cy: "15",
+      r: "1.5"
+    }), /*#__PURE__*/_react.default.createElement("circle", {
+      cx: "10",
+      cy: "5",
+      r: "1.5"
+    }), /*#__PURE__*/_react.default.createElement("circle", {
+      cx: "10",
+      cy: "10",
+      r: "1.5"
+    }), /*#__PURE__*/_react.default.createElement("circle", {
+      cx: "10",
+      cy: "15",
+      r: "1.5"
+    }))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "flex optionItems-center"
+    }, /*#__PURE__*/_react.default.createElement(_ColorPicker.ColorSection, {
+      onPick: function onPick(c) {
+        return handleColorChange(index, c);
+      },
+      trigerColor: item.color
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "flex flex-1 optionItems-center transition"
+    }, /*#__PURE__*/_react.default.createElement(_ui.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.default.createElement(_ui.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.default.createElement("div", {
+    className: "mt-8"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    variant: "secondary",
+    onClick: handleAdd,
+    className: ""
+  }, "Add another item")));
+};
+var _default = exports.default = DynamicInputList;

package/lib/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));
 }