@esic-lab/data-core-ui 0.0.40 → 0.0.42

package/dist/index.mjs

@@ -1231,83 +1231,119 @@ function InputFieldNumber({
 var import_dayjs = __toESM(require_dayjs_min());
 var import_th2 = __toESM(require_th());
 var import_buddhistEra = __toESM(require_buddhistEra());
-import { ConfigProvider as ConfigProvider5, DatePicker } from "antd";
-import th from "antd/es/date-picker/locale/th_TH";
-import { th as thFns } from "date-fns/locale";
+import { useState as useState6 } from "react";
 import { format } from "date-fns";
+import { th as thFns } from "date-fns/locale";
 import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 import_dayjs.default.extend(import_buddhistEra.default);
+import_dayjs.default.locale("th");
 function DatePickerBasic({
   value,
   onChange,
-  required,
   label,
+  required,
   error,
-  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
   disabled,
-  defaultValue,
+  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
   minDate,
   maxDate,
-  disabledDate,
-  className,
-  size
+  disabledDate
 }) {
-  const dateFormat = "DD/MM/YYYY";
-  import_dayjs.default.locale("th_TH");
-  const buddhistLocale = {
-    ...th,
-    lang: {
-      ...th.lang,
-      fieldDateFormat: "BBBB-MM-DD",
-      fieldDateTimeFormat: "BBBB-MM-DD HH:mm:ss",
-      yearFormat: "BBBB",
-      cellYearFormat: "BBBB"
-    }
+  const [open, setOpen] = useState6(false);
+  const current = value ? (0, import_dayjs.default)(value) : null;
+  const today = (0, import_dayjs.default)();
+  const formatThaiBE = (date) => {
+    const formatted = format(date, "dd MMMM yyyy", { locale: thFns });
+    const year = parseInt(format(date, "yyyy")) + 543;
+    return formatted.replace(/\d{4}$/, String(year));
   };
-  return /* @__PURE__ */ jsx23(
-    ConfigProvider5,
-    {
-      theme: {
-        token: {
-          fontFamily: "Kanit",
-          fontSize: 16
-        }
-      },
-      children: /* @__PURE__ */ jsxs19("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs19("div", { children: [
-          /* @__PURE__ */ jsx23("span", { className: "body-1", children: label }),
-          " ",
-          required && /* @__PURE__ */ jsx23("span", { className: "text-red-500", children: "*" })
-        ] }),
-        /* @__PURE__ */ jsx23(
-          DatePicker,
-          {
-            className: `body-1 w-full ${className ?? ""}`,
-            value,
-            placeholder,
-            onChange,
-            allowClear: true,
-            disabled,
-            format: (date) => date ? format(date.toDate(), "dd/MM/yyyy", { locale: thFns }).replace(
-              /\d{4}$/,
-              (y) => String(parseInt(y) + 543)
-            ) : "",
-            defaultValue,
-            disabledDate: (d) => disabledDate ? disabledDate(d.toDate()) : false,
-            minDate: minDate ? (0, import_dayjs.default)(minDate) : void 0,
-            maxDate: maxDate ? (0, import_dayjs.default)(maxDate) : void 0,
-            size,
-            locale: buddhistLocale
-          }
-        ),
-        error && /* @__PURE__ */ jsx23("p", { className: "text-red-500 caption-1", children: error })
-      ] })
-    }
-  );
+  const monthNames = [
+    "\u0E21\u0E01\u0E23\u0E32\u0E04\u0E21",
+    "\u0E01\u0E38\u0E21\u0E20\u0E32\u0E1E\u0E31\u0E19\u0E18\u0E4C",
+    "\u0E21\u0E35\u0E19\u0E32\u0E04\u0E21",
+    "\u0E40\u0E21\u0E29\u0E32\u0E22\u0E19",
+    "\u0E1E\u0E24\u0E29\u0E20\u0E32\u0E04\u0E21",
+    "\u0E21\u0E34\u0E16\u0E38\u0E19\u0E32\u0E22\u0E19",
+    "\u0E01\u0E23\u0E01\u0E0E\u0E32\u0E04\u0E21",
+    "\u0E2A\u0E34\u0E07\u0E2B\u0E32\u0E04\u0E21",
+    "\u0E01\u0E31\u0E19\u0E22\u0E32\u0E22\u0E19",
+    "\u0E15\u0E38\u0E25\u0E32\u0E04\u0E21",
+    "\u0E1E\u0E24\u0E28\u0E08\u0E34\u0E01\u0E32\u0E22\u0E19",
+    "\u0E18\u0E31\u0E19\u0E27\u0E32\u0E04\u0E21"
+  ];
+  const [calendar, setCalendar] = useState6(current || today);
+  const daysInMonth = calendar.daysInMonth();
+  const firstDayOfMonth = calendar.startOf("month").day();
+  const isDisabled = (date) => {
+    if (disabledDate && disabledDate(date.toDate())) return true;
+    if (minDate && date.isBefore((0, import_dayjs.default)(minDate), "day")) return true;
+    if (maxDate && date.isAfter((0, import_dayjs.default)(maxDate), "day")) return true;
+    return false;
+  };
+  const handleSelect = (d) => {
+    const selected = calendar.date(d);
+    if (isDisabled(selected)) return;
+    onChange(selected.toDate());
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs19("div", { style: { fontFamily: "Kanit", fontSize: 16 }, className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "mb-1", children: [
+      /* @__PURE__ */ jsx23("span", { className: "body-1", children: label }),
+      required && /* @__PURE__ */ jsx23("span", { className: "text-red-500", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx23(
+      "div",
+      {
+        className: `border rounded px-3 py-2 cursor-pointer bg-white ${disabled ? "opacity-50" : ""}`,
+        onClick: () => !disabled && setOpen(!open),
+        children: value ? formatThaiBE(value) : /* @__PURE__ */ jsx23("span", { className: "text-gray-400", children: placeholder })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs19(
+      "div",
+      {
+        className: "absolute z-50 mt-2 w-80 p-4 bg-white shadow-xl rounded-lg border",
+        style: { fontFamily: "Kanit", fontSize: 16 },
+        children: [
+          /* @__PURE__ */ jsxs19("div", { className: "flex justify-between items-center mb-3", children: [
+            /* @__PURE__ */ jsx23("button", { onClick: () => setCalendar(calendar.subtract(1, "month")), className: "px-2", children: "\u25C0" }),
+            /* @__PURE__ */ jsxs19("div", { className: "font-semibold", children: [
+              monthNames[calendar.month()],
+              " ",
+              calendar.year() + 543
+            ] }),
+            /* @__PURE__ */ jsx23("button", { onClick: () => setCalendar(calendar.add(1, "month")), className: "px-2", children: "\u25B6" })
+          ] }),
+          /* @__PURE__ */ jsx23("div", { className: "grid grid-cols-7 text-center text-gray-600 mb-2", children: ["\u0E2D\u0E32", "\u0E08", "\u0E2D", "\u0E1E", "\u0E1E\u0E24", "\u0E28", "\u0E2A"].map((d) => /* @__PURE__ */ jsx23("div", { children: d }, d)) }),
+          /* @__PURE__ */ jsxs19("div", { className: "grid grid-cols-7 gap-1 text-center", children: [
+            Array(firstDayOfMonth).fill(null).map((_, i) => /* @__PURE__ */ jsx23("div", {}, `empty-${i}`)),
+            Array.from({ length: daysInMonth }, (_, i) => i + 1).map((d) => {
+              const dateObj = calendar.date(d);
+              const disabled2 = isDisabled(dateObj);
+              const selected = current && dateObj.isSame(current, "day");
+              return /* @__PURE__ */ jsx23(
+                "div",
+                {
+                  onClick: () => !disabled2 && handleSelect(d),
+                  className: `py-1 rounded cursor-pointer 
+                    ${selected ? "bg-blue-500 text-white" : ""}
+                    ${disabled2 ? "text-gray-400 cursor-not-allowed" : "hover:bg-blue-100"}
+                  `,
+                  children: d
+                },
+                d
+              );
+            })
+          ] })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx23("p", { className: "text-red-500 caption-1", children: error })
+  ] });
 }
 
 // src/ColorPicker/ColorPickerBasic/ColorPicker.tsx
-import { ConfigProvider as ConfigProvider6, ColorPicker } from "antd";
+import { ConfigProvider as ConfigProvider5, ColorPicker } from "antd";
 import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 function ColorPickerBasic({
   value,
@@ -1322,7 +1358,7 @@ function ColorPickerBasic({
   placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
 }) {
   return /* @__PURE__ */ jsx24(
-    ConfigProvider6,
+    ConfigProvider5,
     {
       theme: {
         token: {
@@ -1366,7 +1402,7 @@ function ColorPickerBasic({
 }
 
 // src/ColorPicker/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
-import { ConfigProvider as ConfigProvider7, ColorPicker as ColorPicker2, theme } from "antd";
+import { ConfigProvider as ConfigProvider6, ColorPicker as ColorPicker2, theme } from "antd";
 
 // node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -2096,7 +2132,7 @@ function ColorPalettePickerBasic({
     green
   });
   return /* @__PURE__ */ jsx25(
-    ConfigProvider7,
+    ConfigProvider6,
     {
       theme: {
         token: {
@@ -2142,7 +2178,7 @@ function ColorPalettePickerBasic({
 }
 
 // src/Select/SelectField/SelectField.tsx
-import { Select, ConfigProvider as ConfigProvider8 } from "antd";
+import { Select, ConfigProvider as ConfigProvider7 } from "antd";
 import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 function SelectField({
   value,
@@ -2162,7 +2198,7 @@ function SelectField({
   onClear
 }) {
   return /* @__PURE__ */ jsx26(
-    ConfigProvider8,
+    ConfigProvider7,
     {
       theme: {
         token: {
@@ -2215,7 +2251,7 @@ function SelectField({
 }
 
 // src/Select/SelectFieldGroup/SelectFieldGroup.tsx
-import { Select as Select2, ConfigProvider as ConfigProvider9 } from "antd";
+import { Select as Select2, ConfigProvider as ConfigProvider8 } from "antd";
 import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 function SelectFieldGroup({
   value,
@@ -2234,7 +2270,7 @@ function SelectFieldGroup({
   className
 }) {
   return /* @__PURE__ */ jsx27(
-    ConfigProvider9,
+    ConfigProvider8,
     {
       theme: {
         token: {
@@ -2285,7 +2321,7 @@ function SelectFieldGroup({
 }
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
-import { Select as Select3, ConfigProvider as ConfigProvider10 } from "antd";
+import { Select as Select3, ConfigProvider as ConfigProvider9 } from "antd";
 
 // src/Select/SelectFieldStatus/StatusMockup.ts
 var status = [
@@ -2312,7 +2348,7 @@ function SelectFieldStatus({
 }) {
   const selectedItem = status.find((s) => s.value === value);
   return /* @__PURE__ */ jsx28(
-    ConfigProvider10,
+    ConfigProvider9,
     {
       theme: {
         components: {
@@ -2355,7 +2391,7 @@ function SelectFieldStatus({
 }
 
 // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
-import { Select as Select4, ConfigProvider as ConfigProvider11 } from "antd";
+import { Select as Select4, ConfigProvider as ConfigProvider10 } from "antd";
 
 // src/Select/SelectFieldStatusReport/StatusReportMockup.ts
 var status2 = [
@@ -2379,7 +2415,7 @@ function SelectFieldStatusReport({
 }) {
   const selectedItem = status2.find((s) => s.value === value);
   return /* @__PURE__ */ jsx29(
-    ConfigProvider11,
+    ConfigProvider10,
     {
       theme: {
         components: {
@@ -2422,8 +2458,8 @@ function SelectFieldStatusReport({
 }
 
 // src/Select/SelectFieldTag/SelectFieldTag.tsx
-import { Select as Select5, ConfigProvider as ConfigProvider12 } from "antd";
-import { useState as useState6 } from "react";
+import { Select as Select5, ConfigProvider as ConfigProvider11 } from "antd";
+import { useState as useState7 } from "react";
 import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 function SelectFieldTag({
   label,
@@ -2436,10 +2472,10 @@ function SelectFieldTag({
   onChange,
   onClear
 }) {
-  const [internalValue, setInternalValue] = useState6([]);
+  const [internalValue, setInternalValue] = useState7([]);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internalValue;
-  const [searchWord, setSearchWord] = useState6("");
+  const [searchWord, setSearchWord] = useState7("");
   const handleChange = (val) => {
     const trimValue = val.map((v) => v.trim());
     const filtered = trimValue.filter((v) => v.trim() !== "");
@@ -2458,7 +2494,7 @@ function SelectFieldTag({
     onChange?.([]);
   };
   return /* @__PURE__ */ jsx30(
-    ConfigProvider12,
+    ConfigProvider11,
     {
       theme: {
         token: {
@@ -2498,8 +2534,8 @@ function SelectFieldTag({
 
 // src/Select/SelectCustom/SelectCustom.tsx
 import { IconTrash } from "@tabler/icons-react";
-import { Select as Select6, ConfigProvider as ConfigProvider13 } from "antd";
-import { useState as useState7 } from "react";
+import { Select as Select6, ConfigProvider as ConfigProvider12 } from "antd";
+import { useState as useState8 } from "react";
 import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
 function SelectCustom({
   label = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
@@ -2510,8 +2546,8 @@ function SelectCustom({
   error,
   onClear
 }) {
-  const [value, setValue] = useState7([]);
-  const [valueList, setValueList] = useState7([]);
+  const [value, setValue] = useState8([]);
+  const [valueList, setValueList] = useState8([]);
   const handleChange = (selectedValues) => {
     const newValues = selectedValues.filter((v) => !valueList.includes(v));
     setValueList((prev) => {
@@ -2530,7 +2566,7 @@ function SelectCustom({
   };
   const filteredOptions = options.filter((opt) => !valueList.includes(opt.value)).map((opt) => ({ value: opt.value, label: opt.label }));
   return /* @__PURE__ */ jsx31(
-    ConfigProvider13,
+    ConfigProvider12,
     {
       theme: {
         token: {
@@ -2572,7 +2608,7 @@ function SelectCustom({
 }
 
 // src/SortFilter/SortFilter.tsx
-import { ConfigProvider as ConfigProvider14 } from "antd";
+import { ConfigProvider as ConfigProvider13 } from "antd";
 import { CalendarOutlined } from "@ant-design/icons";
 
 // src/SortFilter/DataMockSortFilter.ts
@@ -2603,7 +2639,7 @@ var quarters = [
 ];
 
 // src/SortFilter/SortFilter.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { IconSortDescending as IconSortDescending2, IconFilter } from "@tabler/icons-react";
 import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 function SortFilter({
@@ -2613,11 +2649,11 @@ function SortFilter({
   onSortClick,
   onFilterClick
 }) {
-  const [yearValue, setYearValue] = useState8();
-  const [monthValue, setMonthValue] = useState8();
-  const [quarterValue, setQuartersValue] = useState8();
+  const [yearValue, setYearValue] = useState9();
+  const [monthValue, setMonthValue] = useState9();
+  const [quarterValue, setQuartersValue] = useState9();
   return /* @__PURE__ */ jsx32(
-    ConfigProvider14,
+    ConfigProvider13,
     {
       theme: {
         token: {
@@ -2691,7 +2727,7 @@ function SortFilter({
 
 // src/Upload/FileUploader/FileUploader.tsx
 import { IconPaperclip, IconUpload, IconTrash as IconTrash2 } from "@tabler/icons-react";
-import { useRef as useRef2, useState as useState9 } from "react";
+import { useRef as useRef2, useState as useState10 } from "react";
 import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
 function FileUploader({
   onUpload,
@@ -2704,9 +2740,9 @@ function FileUploader({
   description,
   label
 }) {
-  const [fileList, setFileList] = useState9([]);
-  const [uploading, setUploading] = useState9(false);
-  const [dragActive, setDragActive] = useState9(false);
+  const [fileList, setFileList] = useState10([]);
+  const [uploading, setUploading] = useState10(false);
+  const [dragActive, setDragActive] = useState10(false);
   const inputRef = useRef2(null);
   const validateFile = (file) => {
     if (accept && !accept.includes(file.type)) {
@@ -2859,7 +2895,7 @@ function messageLoading(content, duration) {
 }
 
 // src/Breadcrumb/Breadcrumb.tsx
-import { ConfigProvider as ConfigProvider15 } from "antd";
+import { ConfigProvider as ConfigProvider14 } from "antd";
 import { Breadcrumb } from "antd";
 import { jsx as jsx34 } from "react/jsx-runtime";
 function Breadcrumbs({
@@ -2870,7 +2906,7 @@ function Breadcrumbs({
   params
 }) {
   return /* @__PURE__ */ jsx34(
-    ConfigProvider15,
+    ConfigProvider14,
     {
       theme: {
         token: {
@@ -2892,7 +2928,7 @@ function Breadcrumbs({
 }
 
 // src/HeadingPage/HeadingPage.tsx
-import { ConfigProvider as ConfigProvider16 } from "antd";
+import { ConfigProvider as ConfigProvider15 } from "antd";
 import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
 function HeadingPage({ Heading }) {
   const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
@@ -2902,7 +2938,7 @@ function HeadingPage({ Heading }) {
     year: "numeric"
   });
   return /* @__PURE__ */ jsx35(
-    ConfigProvider16,
+    ConfigProvider15,
     {
       theme: {
         token: {
@@ -2921,8 +2957,8 @@ function HeadingPage({ Heading }) {
 }
 
 // src/Progress/ProgressBar.tsx
-import { ConfigProvider as ConfigProvider17, Progress } from "antd";
-import { useEffect as useEffect2, useRef as useRef3, useState as useState10 } from "react";
+import { ConfigProvider as ConfigProvider16, Progress } from "antd";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState11 } from "react";
 import { jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
 function ProgressBar({
   percent = 0,
@@ -2936,7 +2972,7 @@ function ProgressBar({
   steps,
   isCheckPoints
 }) {
-  const [barWidth, setBarWidth] = useState10(0);
+  const [barWidth, setBarWidth] = useState11(0);
   const progressRef = useRef3(null);
   let strokeColor = "--color-green-500";
   const defaultStrokeWidth = type === "circle" ? 13 : strokeWidth ?? 8;
@@ -2955,7 +2991,7 @@ function ProgressBar({
     return () => observer.disconnect();
   }, []);
   return /* @__PURE__ */ jsx36(
-    ConfigProvider17,
+    ConfigProvider16,
     {
       theme: {
         token: {
@@ -3001,25 +3037,25 @@ function ProgressBar({
 }
 
 // src/KpiSection/KpiSection.tsx
-import { ConfigProvider as ConfigProvider18, message } from "antd";
-import { useEffect as useEffect3, useState as useState12 } from "react";
+import { ConfigProvider as ConfigProvider17, message } from "antd";
+import { useEffect as useEffect3, useState as useState13 } from "react";
 
 // src/KpiSection/hooks/useGetKpiSection.ts
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import cuid from "cuid";
 function useGetKpiSection() {
-  const [nameKpi, setNameKpi] = useState11("");
-  const [kpiValue, setKpiValue] = useState11("");
-  const [unitValue, setUnitValue] = useState11("");
-  const [kpiList, setKpiList] = useState11([]);
-  const [editingBackup, setEditingBackup] = useState11({});
-  const [selected, setSelected] = useState11("2");
-  const [errors, setErrors] = useState11({
+  const [nameKpi, setNameKpi] = useState12("");
+  const [kpiValue, setKpiValue] = useState12("");
+  const [unitValue, setUnitValue] = useState12("");
+  const [kpiList, setKpiList] = useState12([]);
+  const [editingBackup, setEditingBackup] = useState12({});
+  const [selected, setSelected] = useState12("2");
+  const [errors, setErrors] = useState12({
     nameKpi: "",
     kpiValue: "",
     unitValue: ""
   });
-  const [itemErrors, setItemErrors] = useState11({});
+  const [itemErrors, setItemErrors] = useState12({});
   const options = [
     { value: "1", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
     { value: "2", label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }
@@ -3173,7 +3209,7 @@ function KpiSection({ type, onChangeKpiList }) {
     setItemErrors
   } = useGetKpiSection();
   const [messageApi2, messageContainer] = message.useMessage();
-  const [hasShownError, setHasShownError] = useState12(false);
+  const [hasShownError, setHasShownError] = useState13(false);
   useEffect3(() => {
     setMessageApi(messageApi2);
   }, [messageApi2]);
@@ -3183,7 +3219,7 @@ function KpiSection({ type, onChangeKpiList }) {
     }
   }, [kpiList]);
   return /* @__PURE__ */ jsx37(
-    ConfigProvider18,
+    ConfigProvider17,
     {
       theme: {
         token: {
@@ -3415,7 +3451,7 @@ function AntDModal({ children, isOpen, width, onCancel }) {
 
 // src/Indicator/Indicator/Indicator.tsx
 import { IconCheck as IconCheck3, IconCirclePlus as IconCirclePlus2, IconPencil as IconPencil2, IconTrash as IconTrash4, IconX as IconX3 } from "@tabler/icons-react";
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { Input as Input4 } from "antd";
 import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
 function Indicator({
@@ -3427,22 +3463,22 @@ function Indicator({
   arrayData,
   setArrayData
 }) {
-  const [valueSwitch, setValueSwitch] = useState13("TEXT");
-  const [cacheData, setCacheData] = useState13({
+  const [valueSwitch, setValueSwitch] = useState14("TEXT");
+  const [cacheData, setCacheData] = useState14({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: "",
     unit: ""
   });
-  const [cacheEditData, setCacheEditData] = useState13({
+  const [cacheEditData, setCacheEditData] = useState14({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: "",
     unit: ""
   });
-  const [editIndex, setEditIndex] = useState13(null);
+  const [editIndex, setEditIndex] = useState14(null);
   const handleAddIndicator = () => {
     if (cacheData.textValue.trim() === "") return;
     setArrayData([
@@ -3602,11 +3638,11 @@ function Indicator({
 
 // src/FilterPopUp/FilterPopUp.tsx
 import { IconCheck as IconCheck4, IconFilter as IconFilter2, IconTrash as IconTrash5 } from "@tabler/icons-react";
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import { jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
 var FilterPopUp = (filter) => {
-  const [isAction, setIsAction] = useState14(true);
-  const [filterArray, setFilterArray] = useState14([""]);
+  const [isAction, setIsAction] = useState15(true);
+  const [filterArray, setFilterArray] = useState15([""]);
   const handleClearFilter = () => {
     setFilterArray([]);
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",