@fileverse-dev/fortune-react 1.1.0 → 1.1.2

package/es/components/DataVerification/index.js

@@ -0,0 +1,398 @@
+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);
+};
+import { getDropdownList, getFlowdata, getRangeByTxt, getRangetxt, getSheetIndex, 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 WorkbookContext from "../../context";
+import { useDialog } from "../../hooks/useDialog";
+import { injectDatepickerStyles } from "../../utils/datepickerStyles";
+import "./index.css";
+injectDatepickerStyles();
+var DataVerification = function DataVerification() {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  var _p = useContext(WorkbookContext),
+    context = _p.context,
+    setContext = _p.setContext;
+  var _q = useDialog(),
+    showDialog = _q.showDialog,
+    hideDialog = _q.hideDialog;
+  var _r = locale(context),
+    dataVerification = _r.dataVerification,
+    button = _r.button,
+    generalDialog = _r.generalDialog;
+  var dateCondition = useState(["between", "notBetween", "equal", "notEqualTo", "earlierThan", "noEarlierThan", "laterThan", "noLaterThan"])[0];
+  var dataSelectRange = useCallback(function (type, value) {
+    hideDialog();
+    setContext(function (ctx) {
+      ctx.rangeDialog.show = true;
+      ctx.rangeDialog.type = type;
+      ctx.rangeDialog.rangeTxt = value;
+    });
+  }, [hideDialog, setContext]);
+  var btn = useCallback(function (type) {
+    if (type === "confirm") {
+      setContext(function (ctx) {
+        var _a, _b, _c;
+        var isPass = confirmMessage(ctx, generalDialog, dataVerification);
+        if (isPass) {
+          var range = getRangeByTxt(ctx, (_b = (_a = ctx.dataVerification) === null || _a === void 0 ? void 0 : _a.dataRegulation) === null || _b === void 0 ? void 0 : _b.rangeTxt);
+          if (range.length === 0) {
+            return;
+          }
+          var regulation = ctx.dataVerification.dataRegulation;
+          var verifacationT = regulation === null || regulation === void 0 ? void 0 : regulation.type;
+          var value1 = regulation.value1;
+          var item = __assign(__assign({}, regulation), {
+            checked: false
+          });
+          if (verifacationT === "dropdown") {
+            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 str = range[range.length - 1].row[0];
+          var edr = range[range.length - 1].row[1];
+          var stc = range[range.length - 1].column[0];
+          var edc = range[range.length - 1].column[1];
+          var d = getFlowdata(ctx);
+          if (!d) return;
+          for (var r = str; r <= edr; r += 1) {
+            for (var c = stc; c <= edc; c += 1) {
+              var key = "".concat(r, "_").concat(c);
+              currentDataVerification[key] = item;
+              if (regulation.type === "checkbox") {
+                setCellValue(ctx, r, c, d, item.value2);
+              }
+            }
+          }
+          ctx.luckysheetfile[getSheetIndex(ctx, ctx.currentSheetId)].dataVerification = currentDataVerification;
+        }
+      });
+    } else if (type === "delete") {
+      setContext(function (ctx) {
+        var _a, _b, _c;
+        var range = getRangeByTxt(ctx, (_b = (_a = ctx.dataVerification) === null || _a === void 0 ? void 0 : _a.dataRegulation) === null || _b === void 0 ? void 0 : _b.rangeTxt);
+        if (range.length === 0) {
+          showDialog(generalDialog.noSelectionError, "ok");
+          return;
+        }
+        var currentDataVerification = (_c = ctx.luckysheetfile[getSheetIndex(ctx, ctx.currentSheetId)].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];
+        var edc = range[range.length - 1].column[1];
+        for (var r = str; r <= edr; r += 1) {
+          for (var c = stc; c <= edc; c += 1) {
+            delete currentDataVerification["".concat(r, "_").concat(c)];
+          }
+        }
+      });
+    }
+    hideDialog();
+  }, [dataVerification, generalDialog, hideDialog, setContext, showDialog]);
+  useEffect(function () {
+    setContext(function (ctx) {
+      var _a, _b, _c;
+      var rangeT = "";
+      if (ctx.luckysheet_select_save) {
+        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 ctxDataVerification = ctx.luckysheetfile[index].dataVerification;
+      if (ctxDataVerification) {
+        if (!ctx.luckysheet_select_save) return;
+        var last = ctx.luckysheet_select_save[ctx.luckysheet_select_save.length - 1];
+        var rowIndex = last.row_focus;
+        var colIndex = last.column_focus;
+        if (rowIndex == null || colIndex == null) return;
+        var item = ctxDataVerification["".concat(rowIndex, "_").concat(colIndex)];
+        var defaultItem = item !== null && item !== void 0 ? item : {};
+        var rangValue = (_a = defaultItem.value1) !== null && _a !== void 0 ? _a : "";
+        if (((_b = ctx.rangeDialog) === null || _b === void 0 ? void 0 : _b.type) === "dropDown" && ctx.dataVerification && ctx.dataVerification.dataRegulation && ctx.dataVerification.dataRegulation.rangeTxt) {
+          rangeT = ctx.dataVerification.dataRegulation.rangeTxt;
+          rangValue = ctx.rangeDialog.rangeTxt;
+        } else if (((_c = ctx.rangeDialog) === null || _c === void 0 ? void 0 : _c.type) === "rangeTxt" && ctx.dataVerification && ctx.dataVerification.dataRegulation && ctx.dataVerification.dataRegulation.value1) {
+          rangValue = ctx.dataVerification.dataRegulation.value1;
+          rangeT = ctx.rangeDialog.rangeTxt;
+        }
+        ctx.rangeDialog.type = "";
+        if (item) {
+          ctx.dataVerification.dataRegulation = __assign(__assign({}, item), {
+            value1: rangValue,
+            rangeTxt: rangeT
+          });
+        } else {
+          ctx.dataVerification.dataRegulation = {
+            type: "dropdown",
+            type2: "",
+            rangeTxt: rangeT,
+            value1: rangValue,
+            value2: "",
+            validity: "",
+            remote: false,
+            prohibitInput: false,
+            hintShow: false,
+            hintValue: ""
+          };
+        }
+      } else {
+        ctx.dataVerification.dataRegulation = {
+          type: "dropdown",
+          type2: "",
+          rangeTxt: rangeT,
+          value1: "",
+          value2: "",
+          validity: "",
+          remote: false,
+          prohibitInput: false,
+          hintShow: false,
+          hintValue: ""
+        };
+      }
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: "fortune-data-verification"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-heading-xsm mb-2"
+  }, dataVerification.cellRange), /*#__PURE__*/React.createElement(TextField, {
+    rightIcon: /*#__PURE__*/React.createElement(LucideIcon, {
+      name: "Grid2x2",
+      size: "sm"
+    }),
+    "aria-hidden": "true",
+    readOnly: true,
+    value: (_a = context.dataVerification.dataRegulation) === null || _a === void 0 ? void 0 : _a.rangeTxt,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setContext(function (ctx) {
+        ctx.dataVerification.dataRegulation.rangeTxt = value;
+      });
+    },
+    onClick: function onClick() {
+      hideDialog();
+      dataSelectRange("rangeTxt", context.dataVerification.dataRegulation.value1);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-heading-xsm mb-2"
+  }, dataVerification.verificationCondition), /*#__PURE__*/React.createElement(Select, {
+    value: context.dataVerification.dataRegulation.type,
+    onValueChange: function onValueChange(value) {
+      setContext(function (ctx) {
+        ctx.dataVerification.dataRegulation.type = value;
+        if (value === "dropdown" || value === "checkbox") {
+          ctx.dataVerification.dataRegulation.type2 = "";
+        } else if (value === "number" || value === "number_integer" || value === "number_decimal" || value === "text_length" || value === "date") {
+          ctx.dataVerification.dataRegulation.type2 = "between";
+        } else if (value === "text_content") {
+          ctx.dataVerification.dataRegulation.type2 = "include";
+        } else if (value === "validity") {
+          ctx.dataVerification.dataRegulation.type2 = "identificationNumber";
+        }
+        ctx.dataVerification.dataRegulation.value1 = "";
+        ctx.dataVerification.dataRegulation.value2 = "";
+      });
+    }
+  }, /*#__PURE__*/React.createElement(SelectTrigger, null, /*#__PURE__*/React.createElement(SelectValue, null)), /*#__PURE__*/React.createElement(SelectContent, null, ["dropdown", "checkbox", "date"].map(function (v) {
+    return /*#__PURE__*/React.createElement(SelectItem, {
+      value: v,
+      key: v
+    }, 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("div", {
+    className: "mt-4 flex items-center"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
+    checked: context.dataVerification.dataRegulation.type2 === "true",
+    onCheckedChange: function onCheckedChange(e) {
+      var checked = e.target.checked;
+      setContext(function (ctx) {
+        ctx.dataVerification.dataRegulation.type2 = "".concat(checked);
+      });
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ml-2"
+  }, dataVerification.allowMultiSelect)))), ((_e = (_d = context.dataVerification) === null || _d === void 0 ? void 0 : _d.dataRegulation) === null || _e === void 0 ? void 0 : _e.type) === "checkbox" && (/*#__PURE__*/React.createElement("div", {
+    className: "mt-4 space-y-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "data-verification-checkbox-label"
+  }, dataVerification.selected), /*#__PURE__*/React.createElement(TextField, {
+    value: (_g = (_f = context.dataVerification) === null || _f === void 0 ? void 0 : _f.dataRegulation) === null || _g === void 0 ? void 0 : _g.value1,
+    placeholder: dataVerification.placeholder2,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setContext(function (ctx) {
+        ctx.dataVerification.dataRegulation.value1 = value;
+      });
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "data-verification-checkbox-label"
+  }, dataVerification.notSelected), /*#__PURE__*/React.createElement(TextField, {
+    value: (_j = (_h = context.dataVerification) === null || _h === void 0 ? void 0 : _h.dataRegulation) === null || _j === void 0 ? void 0 : _j.value2,
+    placeholder: dataVerification.placeholder2,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setContext(function (ctx) {
+        ctx.dataVerification.dataRegulation.value2 = value;
+      });
+    }
+  })))), ((_l = (_k = context.dataVerification) === null || _k === void 0 ? void 0 : _k.dataRegulation) === null || _l === void 0 ? void 0 : _l.type) === "date" && (/*#__PURE__*/React.createElement("div", {
+    className: "mt-4"
+  }, /*#__PURE__*/React.createElement(Select, {
+    value: context.dataVerification.dataRegulation.type2,
+    onValueChange: function onValueChange(value) {
+      setContext(function (ctx) {
+        ctx.dataVerification.dataRegulation.type2 = value;
+        ctx.dataVerification.dataRegulation.value1 = "";
+        ctx.dataVerification.dataRegulation.value2 = "";
+      });
+    }
+  }, /*#__PURE__*/React.createElement(SelectTrigger, null, /*#__PURE__*/React.createElement(SelectValue, null)), /*#__PURE__*/React.createElement(SelectContent, null, dateCondition.map(function (v) {
+    return /*#__PURE__*/React.createElement(SelectItem, {
+      value: v,
+      key: v
+    }, dataVerification[v]);
+  }))), context.dataVerification.dataRegulation.type2 === "between" || context.dataVerification.dataRegulation.type2 === "notBetween" ? (/*#__PURE__*/React.createElement("div", {
+    className: "mt-4 flex gap-2 items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "datepicker-toggle"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "date",
+    className: "datepicker-input",
+    value: context.dataVerification.dataRegulation.value1,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setContext(function (ctx) {
+        ctx.dataVerification.dataRegulation.value1 = value;
+      });
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "datepicker-toggle-button"
+  })), /*#__PURE__*/React.createElement("span", null, "-"), /*#__PURE__*/React.createElement("div", {
+    className: "datepicker-toggle"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "date",
+    className: "datepicker-input",
+    value: context.dataVerification.dataRegulation.value2,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setContext(function (ctx) {
+        ctx.dataVerification.dataRegulation.value2 = value;
+      });
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "datepicker-toggle-button"
+  })))) : (/*#__PURE__*/React.createElement("div", {
+    className: "mt-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "datepicker-toggle"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "date",
+    className: "datepicker-input",
+    placeholder: dataVerification.placeholder3,
+    value: context.dataVerification.dataRegulation.value1,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setContext(function (ctx) {
+        ctx.dataVerification.dataRegulation.value1 = value;
+      });
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "datepicker-toggle-button"
+  }))))))), /*#__PURE__*/React.createElement(Divider, {
+    className: "w-full border-t-[1px]"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-2"
+  }, ["prohibitInput", "hintShow"].map(function (v) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: v,
+      className: "flex items-center"
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      className: "border-2",
+      checked: context.dataVerification.dataRegulation[v],
+      onCheckedChange: function onCheckedChange(e) {
+        var checked = e.target.checked;
+        setContext(function (ctx) {
+          var _a;
+          var dataRegulation = (_a = ctx.dataVerification) === null || _a === void 0 ? void 0 : _a.dataRegulation;
+          if (v === "prohibitInput") {
+            dataRegulation.prohibitInput = checked;
+          } else if (v === "hintShow") {
+            dataRegulation.hintShow = checked;
+          }
+        });
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "ml-2"
+    }, dataVerification[v]));
+  }), ((_o = (_m = context.dataVerification) === null || _m === void 0 ? void 0 : _m.dataRegulation) === null || _o === void 0 ? void 0 : _o.hintShow) && (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TextField, {
+    placeholder: dataVerification.placeholder5,
+    value: context.dataVerification.dataRegulation.hintValue,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setContext(function (ctx) {
+        ctx.dataVerification.dataRegulation.hintValue = value;
+      });
+    }
+  }))))), /*#__PURE__*/React.createElement(Divider, {
+    className: "w-full border-t-[1px] my-4"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2 justify-between items-center"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: function onClick() {
+      btn("close");
+    }
+  }, button.cancel), /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: function onClick() {
+      btn("delete");
+    }
+  }, dataVerification.deleteVerification), /*#__PURE__*/React.createElement(Button, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: function onClick() {
+      btn("confirm");
+    }
+  }, button.confirm))));
+};
+export default DataVerification;

package/es/components/Dialog/index.css

@@ -0,0 +1,64 @@
+.fortune-dialog {
+  min-width: 368px;
+  max-width: 368px;
+  max-height: 70%;
+  border-radius: 12px;
+  background: hsl(var(--color-bg-default));
+  box-shadow: rgb(0 0 0 / 10%) 5px 5px 30px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.fortune-dialog-box-button-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fortune-dialog-box-content {
+  padding: 0px 25px;
+}
+
+.fortune-dialog-box-button-container {
+  padding-top: 10px;
+  padding-bottom: 20px;
+}
+
+.fortune-message-box-button {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 12px;
+  margin: 0 8px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 20px;
+  outline: none;
+  cursor: pointer;
+}
+
+.fortune-message-box-button.button-default {
+  color: rgb(38, 42, 51);
+  background-color: rgb(255, 255, 255);
+  border: 1px solid rgb(235, 235, 235);
+}
+
+.fortune-message-box-button.button-primary {
+  color: white;
+  background-color: #0188fb;
+}
+
+.fortune-modal-dialog-header {
+  outline: 0;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.fortune-modal-dialog-icon-close {
+  color: #d4d4d4;
+  opacity: 0.3;
+}
+
+.fortune-modal-dialog-icon-close:hover {
+  opacity: 0.7;
+}

package/{dist/packages/react/src → es}/components/Dialog/index.d.ts

@@ -1,15 +1,15 @@
-import React from "react";
-import "./index.css";
-type Props = {
-    type?: "ok" | "yesno";
-    onOk?: () => void;
-    onCancel?: () => void;
-    containerStyle?: React.CSSProperties;
-    contentStyle?: React.CSSProperties;
-    children?: React.ReactNode;
-    title?: string | React.ReactNode;
-    okLabel?: string;
-    cancelLabel?: string;
-};
-declare const Dialog: React.FC<Props>;
-export default Dialog;
+import React from "react";
+import "./index.css";
+type Props = {
+    type?: "ok" | "yesno";
+    onOk?: () => void;
+    onCancel?: () => void;
+    containerStyle?: React.CSSProperties;
+    contentStyle?: React.CSSProperties;
+    children?: React.ReactNode;
+    title?: string | React.ReactNode;
+    okLabel?: string;
+    cancelLabel?: string;
+};
+declare const Dialog: React.FC<Props>;
+export default Dialog;

package/es/components/Dialog/index.js

@@ -0,0 +1,72 @@
+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);
+};
+import { locale } from "@fileverse-dev/fortune-core";
+import { Button, cn, IconButton } from "@fileverse/ui";
+import React, { useContext } from "react";
+import WorkbookContext from "../../context";
+import "./index.css";
+var Dialog = function Dialog(_a) {
+  var type = _a.type,
+    onOk = _a.onOk,
+    onCancel = _a.onCancel,
+    children = _a.children,
+    containerStyle = _a.containerStyle,
+    contentStyle = _a.contentStyle,
+    title = _a.title,
+    okLabel = _a.okLabel,
+    cancelLabel = _a.cancelLabel;
+  var context = useContext(WorkbookContext).context;
+  var button = locale(context).button;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fortune-dialog",
+    style: __assign(__assign({}, containerStyle), ["Data verification", "Split text to columns", "Resize column"].includes(title) ? {
+      maxWidth: "unset"
+    } : {})
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn("flex items-center justify-between border-b color-border-default py-3 px-6")
+  }, title ? (/*#__PURE__*/React.createElement("div", {
+    className: "text-heading-sm"
+  }, title)) : (/*#__PURE__*/React.createElement("div", {
+    className: "text-heading-sm"
+  }, "Oops! Something went wrong")), /*#__PURE__*/React.createElement(IconButton, {
+    icon: "X",
+    variant: "ghost",
+    onClick: onCancel,
+    tabIndex: 0
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "px-6 pb-6 pt-4 text-body-sm",
+    style: contentStyle
+  }, children), type != null && (/*#__PURE__*/React.createElement("div", {
+    className: "px-6 pb-6 flex flex-row gap-2 justify-end"
+  }, type === "ok" ? (/*#__PURE__*/React.createElement(Button, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: onOk,
+    tabIndex: 0
+  }, okLabel || button.confirm)) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: onCancel,
+    tabIndex: 0
+  }, cancelLabel || button.cancel), /*#__PURE__*/React.createElement(Button, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: onOk,
+    tabIndex: 0
+  }, okLabel || button.confirm))))));
+};
+export default Dialog;

package/{dist/packages/react/src → es}/components/DuneChartsInputModal/DuneChartsInputModal.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
-import "./duneChartsInputModal.css";
-interface DuneChartsInputModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onSubmit: (value: string) => void;
-    submitText?: string;
-    placeholder?: string;
-}
-declare const DuneChartsInputModal: ({ isOpen, onClose, onSubmit, submitText, placeholder, }: DuneChartsInputModalProps) => React.JSX.Element | null;
-export default DuneChartsInputModal;
+import React from "react";
+import "./duneChartsInputModal.css";
+interface DuneChartsInputModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (value: string) => void;
+    submitText?: string;
+    placeholder?: string;
+}
+declare const DuneChartsInputModal: ({ isOpen, onClose, onSubmit, submitText, placeholder, }: DuneChartsInputModalProps) => React.JSX.Element | null;
+export default DuneChartsInputModal;

package/es/components/DuneChartsInputModal/DuneChartsInputModal.js

@@ -0,0 +1,95 @@
+import React, { useState, useEffect, useRef } from "react";
+import "./duneChartsInputModal.css";
+import { Button, LucideIcon } from "@fileverse/ui";
+import { sanitizeDuneUrl } from "@fileverse-dev/fortune-core";
+import SVGIcon from "../SVGIcon";
+var DuneChartsInputModal = function DuneChartsInputModal(_a) {
+  var isOpen = _a.isOpen,
+    onClose = _a.onClose,
+    onSubmit = _a.onSubmit,
+    _b = _a.submitText,
+    submitText = _b === void 0 ? "Submit" : _b,
+    _c = _a.placeholder,
+    placeholder = _c === void 0 ? "Enter a value..." : _c;
+  var _d = useState(""),
+    url = _d[0],
+    setUrl = _d[1];
+  var _e = useState(false),
+    showError = _e[0],
+    setShowError = _e[1];
+  var inputRef = useRef(null);
+  useEffect(function () {
+    if (isOpen && inputRef.current) {
+      var timer_1 = setTimeout(function () {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      }, 100);
+      return function () {
+        return clearTimeout(timer_1);
+      };
+    }
+    return undefined;
+  }, [isOpen]);
+  if (!isOpen) return null;
+  var handleSubmit = function handleSubmit() {
+    var trimmed = url.trim();
+    if (trimmed && sanitizeDuneUrl(trimmed)) {
+      onSubmit(trimmed);
+      setUrl("");
+      setShowError(false);
+      onClose();
+    } else {
+      setShowError(true);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      handleSubmit();
+    } else if (e.key === "Escape") {
+      onClose();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "custom-overlay",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "input-modal w-3/4 md:w-full",
+    style: {
+      transformOrigin: "top center"
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-header"
+  }, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: "DuneChart"
+  }), /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    className: "modal-input",
+    type: "text",
+    placeholder: placeholder,
+    value: url,
+    onChange: function onChange(e) {
+      setUrl(e.target.value);
+      setShowError(false);
+    },
+    onKeyDown: handleKeyDown
+  })), showError && (/*#__PURE__*/React.createElement("div", {
+    className: "modal-error-message"
+  }, /*#__PURE__*/React.createElement(SVGIcon, {
+    style: {
+      width: "14px",
+      height: "14px"
+    },
+    name: "circle-alert"
+  }), /*#__PURE__*/React.createElement("span", null, "Please add a valid valid Dune chart URL"))), url.length > 0 && !showError && (/*#__PURE__*/React.createElement("div", {
+    className: "modal-footer"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleSubmit,
+    className: "modal-button"
+  }, submitText)))));
+};
+export default DuneChartsInputModal;