es-grid-template 1.7.37 → 1.7.38

package/lib/table-component/body/EditableCell.js

@@ -43,7 +43,7 @@ const filterTreeNode = (input, treeNode) => {
     title,
     value
   } = treeNode;
-  if (typeof title === "string" || typeof title === 'number') {
+  if (typeof title === "string" || typeof title === "number") {
     return title.toString().toLowerCase().includes(input.toLowerCase()) || value.toLowerCase().includes(input.toLowerCase());
   }
   return value.toLowerCase().includes(input.toLowerCase());
@@ -78,7 +78,7 @@ const EditableCell = props => {
   const dateTimePickerRef = _react.default.useRef(null);
   // const timePickerRef = React.useRef(null);
 
-  const colFormat = typeof column?.format === 'function' ? column?.format(record) : column?.format;
+  const colFormat = typeof column?.format === "function" ? column?.format(record) : column?.format;
   const cellFormat = (0, _utils.getFormat)(colFormat, format);
   const inputNode = (value, onChange) => {
     const dateFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
@@ -104,33 +104,32 @@ const EditableCell = props => {
 
     // @ts-ignore
     const key = record[rowKey];
-    const field = column.field ?? '';
+    const field = column.field ?? "";
 
     // const message = errors && column.field && errors[column.field] ? errors[column.field].message : ''
     const message = isInvalid?.message;
     const keySelect = (0, _utils.checkFieldKey)(column?.editSelectSettings?.fieldKey);
-    const selectOptions = typeof propsOptions === 'function' ? propsOptions(record, column.field) : propsOptions;
+    const selectOptions = typeof propsOptions === "function" ? propsOptions(record, column.field) : propsOptions;
     const options = validateOption ? validateOption(record, column.field) : selectOptions ?? [];
     const optionsTree = validateOption ? (0, _utils.convertArrayWithIndent)(validateOption(record, column.field)) : selectOptions ? (0, _utils.convertArrayWithIndent)(selectOptions) : [];
 
     // const currt = flatColumns2()
 
     switch (editType) {
-      case 'date':
+      case "date":
         return /*#__PURE__*/_react.default.createElement(_antd.DatePicker, {
           ref: datePickerRef,
           format: {
             format: dateFormat,
-            type: 'mask'
+            type: "mask"
           },
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId
-
           // locale={buddhistLocale}
           ,
           style: {
-            width: '100%',
-            height: '100%'
+            width: "100%",
+            height: "100%"
           }
           // value={date}
           ,
@@ -154,11 +153,11 @@ const EditableCell = props => {
                 option: newState,
                 indexCol,
                 indexRow,
-                type: 'blur'
+                type: "blur"
               });
             }
           },
-          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
           disabled: (0, _utils.isDisable)(column, record) ?? false,
           maxDate: maxDate,
           minDate: minDate,
@@ -170,31 +169,31 @@ const EditableCell = props => {
               datePickerRef.current?.focus();
             }, 0);
           },
-          popupClassName: 'be-popup-container',
-          status: isInvalid ? 'error' : undefined,
+          popupClassName: "be-popup-container",
+          status: isInvalid ? "error" : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });
-      case 'datetime':
+      case "datetime":
         return /*#__PURE__*/_react.default.createElement(_antd.DatePicker
         // id={`col${indexCol}-record${indexRow}`}
         , {
           ref: dateTimePickerRef,
           format: {
             format: dateFormat,
-            type: 'mask'
+            type: "mask"
           }
           // locale={buddhistLocale}
           ,
           style: {
-            width: '100%',
-            height: '100%'
+            width: "100%",
+            height: "100%"
           },
           showTime: true
           // value={date}
           ,
           defaultValue: date,
-          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
           disabled: (0, _utils.isDisable)(column, record) ?? false,
           maxDate: maxDate,
           minDate: minDate,
@@ -222,20 +221,20 @@ const EditableCell = props => {
                 option: newState,
                 indexCol,
                 indexRow,
-                type: 'blur'
+                type: "blur"
               });
             }
           },
-          popupClassName: 'be-popup-container',
-          status: isInvalid ? 'error' : undefined,
+          popupClassName: "be-popup-container",
+          status: isInvalid ? "error" : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`,
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId
         });
-      case 'month':
-      case 'quarter':
-      case 'year':
+      case "month":
+      case "quarter":
+      case "year":
         const pickerFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
         const maxDateValue1 = !(0, _utils.isEmpty)(column.maxDate) ? (0, _dayjs.default)(column.maxDate, pickerFormat) : undefined;
         const minDateValue1 = !(0, _utils.isEmpty)(column.minDate) ? (0, _dayjs.default)(column.minDate, pickerFormat) : undefined;
@@ -243,76 +242,76 @@ const EditableCell = props => {
           id: `col${indexCol}-record${indexRow}`,
           format: {
             format: pickerFormat,
-            type: 'mask'
+            type: "mask"
           },
           style: {
-            width: '100%',
-            height: '100%'
+            width: "100%",
+            height: "100%"
           },
           picker: editType,
-          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
           disabled: (0, _utils.isDisable)(column, record) ?? false,
           maxDate: maxDateValue1,
           minDate: minDateValue1,
-          popupClassName: 'be-popup-container',
-          status: isInvalid ? 'error' : undefined,
+          popupClassName: "be-popup-container",
+          status: isInvalid ? "error" : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`,
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId
         });
-      case 'week':
+      case "week":
         const weekFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
         const maxWeekValue = !(0, _utils.isEmpty)(column.maxDate) ? (0, _dayjs.default)(column.maxDate, weekFormat) : undefined;
         const minWeekValue = !(0, _utils.isEmpty)(column.minDate) ? (0, _dayjs.default)(column.minDate, weekFormat) : undefined;
         return /*#__PURE__*/_react.default.createElement(_antd.DatePicker, {
           format: val => (0, _utils.customWeekStartEndFormat)(val, weekFormat),
           style: {
-            width: '100%',
-            height: '100%'
+            width: "100%",
+            height: "100%"
           },
           picker: editType,
-          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
           disabled: (0, _utils.isDisable)(column, record) ?? false,
           maxDate: maxWeekValue,
           minDate: minWeekValue,
-          popupClassName: 'be-popup-container',
-          status: isInvalid ? 'error' : undefined,
+          popupClassName: "be-popup-container",
+          status: isInvalid ? "error" : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`,
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId
         });
-      case 'time':
+      case "time":
         const timeFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
         const maxTimeValue = !(0, _utils.isEmpty)(column.maxTime) ? (0, _dayjs.default)(column.maxTime).format(timeFormat) : null;
         const minTimeValue = !(0, _utils.isEmpty)(column.minTime) ? (0, _dayjs.default)(column.minTime).format(timeFormat) : null;
 
         // @ts-ignore
-        // const timeValue = !isEmpty(record[column.dataIndex]) ? dayjs(record[column.dataIndex], timeFormat) : null
+        // const timeValue = !isEmpty(record[dataIndex]) ? dayjs(record[dataIndex], timeFormat) : null
         const maxTime = maxTimeValue ? (0, _dayjs.default)(maxTimeValue, timeFormat) : undefined;
         const minTime = minTimeValue ? (0, _dayjs.default)(minTimeValue, timeFormat) : undefined;
         return /*#__PURE__*/_react.default.createElement(_antd.TimePicker, {
           format: {
             format: timeFormat,
-            type: 'mask'
+            type: "mask"
           },
-          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
           maxDate: maxTime,
           minDate: minTime,
           disabled: (0, _utils.isDisable)(column, record) ?? false,
           style: {
-            width: '100%',
-            height: '100%'
+            width: "100%",
+            height: "100%"
           },
-          popupClassName: 'be-popup-container',
-          status: isInvalid ? 'error' : undefined,
+          popupClassName: "be-popup-container",
+          status: isInvalid ? "error" : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`,
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId
         });
-      case 'selectTable':
+      case "selectTable":
         const rr = selectColumns ?? [];
         const columnsTable = rr.map(colSelect => {
           return {
@@ -337,9 +336,9 @@ const EditableCell = props => {
           // @ts-ignore
           valueSelectTable = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === 'checkbox') {
+        if (isMulti || selectMode === "checkbox") {
           // @ts-ignore
-          valueSelectTable = !(0, _utils.isNullOrUndefined)(record[column.dataIndex]) && Array.isArray(record[column.dataIndex]) && record[column.dataIndex]?.length > 0 ? options.filter(val => record[column.dataIndex]?.includes(val[keySelect])) : undefined;
+          valueSelectTable = !(0, _utils.isNullOrUndefined)(record[dataIndex ?? ""]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
         return /*#__PURE__*/_react.default.createElement(_asyncTableSelect.AsyncTableSelect
         // id={`col${indexCol}-record${indexRow}`}
@@ -348,10 +347,11 @@ const EditableCell = props => {
           options: options,
           defaultOptions: options,
           value: valueSelectTable,
-          rowData: record,
-          autoDestroy: true,
+          rowData: record
+          // autoDestroy={true}
+          ,
           onChange: (val, option) => {
-            onChange(val ?? '');
+            onChange(val ?? "");
             const formState = getValues();
             // const itemState = getValues(dataIndex)
             // @ts-ignore
@@ -367,39 +367,38 @@ const EditableCell = props => {
               option: option,
               indexCol,
               indexRow,
-              type: 'blur'
+              type: "blur"
             });
           },
           showSearch: true,
-          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
+          mode: isMulti || selectMode === "checkbox" ? "multiple" : undefined,
           valueSelectAble: true,
           selectMode: selectMode,
           style: {
-            width: '100%',
-            height: '100%'
+            width: "100%",
+            height: "100%"
           },
           defaultOpen: column.field === startCell?.colId,
           autoFocus: column.field === startCell?.colId
-
           // defaultOpen={column.field === cellEditing?.column.field}
           ,
-          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
           allowClear: column.isClearable ?? false,
-          maxTagCount: 'responsive',
+          maxTagCount: "responsive",
           rowKey: keySelect,
           popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
           optionFilterProp: "label",
-          popupClassName: 'be-popup-container',
+          popupClassName: "be-popup-container",
           loadOptions: loadOptions,
-          status: isInvalid ? 'error' : undefined,
+          status: isInvalid ? "error" : undefined,
           dropdownRender: menu => {
             if (toolbarItems && toolbarItems.length > 0) {
               return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, menu, /*#__PURE__*/_react.default.createElement(_antd.Divider, {
                 style: {
-                  margin: '8px 0'
+                  margin: "8px 0"
                 }
               }), /*#__PURE__*/_react.default.createElement("div", {
-                className: 'toolbar-control d-flex justify-content-end'
+                className: "toolbar-control d-flex justify-content-end"
               }));
             } else {
               return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", menu);
@@ -408,12 +407,13 @@ const EditableCell = props => {
           filterOption: filterOption,
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
-            label: inputKey ?? 'label'
+            label: inputKey ?? "label"
           },
           onBlur: event => {
+            console.log("aafffffff");
             if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
               const val = event.inputValue;
-              onChange(val ?? '');
+              onChange(val ?? "");
               const formState = getValues();
               // const itemState = getValues(dataIndex)
               // @ts-ignore
@@ -431,28 +431,28 @@ const EditableCell = props => {
                 },
                 indexCol,
                 indexRow,
-                type: 'blur'
+                type: "blur"
               });
             }
           },
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });
-      case 'select':
+      case "select":
         let valueSelect = value;
         if (fieldValue) {
           // @ts-ignore
           valueSelect = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === 'checkbox') {
+        if (isMulti || selectMode === "checkbox") {
           // @ts-ignore
-          valueSelect = !(0, _utils.isNullOrUndefined)(record[column.dataIndex]) && Array.isArray(record[column.dataIndex]) && record[column.dataIndex]?.length > 0 ? options.filter(val => record[column.dataIndex]?.includes(val[keySelect])) : undefined;
+          valueSelect = !(0, _utils.isNullOrUndefined)(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
         return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
           options: options,
           value: valueSelect,
           onChange: (val, option) => {
-            onChange(val ?? '');
+            onChange(val ?? "");
             const formState = getValues();
             // const itemState = getValues(dataIndex)
             // @ts-ignore
@@ -467,39 +467,39 @@ const EditableCell = props => {
               option: option,
               indexCol,
               indexRow,
-              type: 'blur'
+              type: "blur"
             });
-          },
-          autoDestroy: true,
+          }
+          // autoDestroy={true}
+          ,
           showSearch: true,
-          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
+          mode: isMulti || selectMode === "checkbox" ? "multiple" : undefined,
           valueSelectAble: true,
           defaultOpen: column.field === startCell?.colId,
           autoFocus: column.field === startCell?.colId
-
           // defaultOpen={column.field === cellEditing?.column.field}
           ,
 
           style: {
-            width: '100%',
-            height: '100%'
+            width: "100%",
+            height: "100%"
           },
-          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
           allowClear: column.isClearable ?? false,
-          maxTagCount: 'responsive',
+          maxTagCount: "responsive",
           popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
           optionFilterProp: "label",
-          popupClassName: 'be-popup-container',
-          status: isInvalid ? 'error' : undefined,
+          popupClassName: "be-popup-container",
+          status: isInvalid ? "error" : undefined,
           filterOption: filterOption,
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
-            label: inputKey ?? 'label'
+            label: inputKey ?? "label"
           },
           onBlur: event => {
             if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
               const val = event.inputValue;
-              onChange(val ?? '');
+              onChange(val ?? "");
               const formState = getValues();
               // const itemState = getValues(dataIndex)
               // @ts-ignore
@@ -517,29 +517,29 @@ const EditableCell = props => {
                 },
                 indexCol,
                 indexRow,
-                type: 'blur'
+                type: "blur"
               });
             }
           },
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });
-      case 'asyncSelect':
+      case "asyncSelect":
         let valueAsyncSelect = value;
         if (fieldValue) {
           // @ts-ignore
           valueAsyncSelect = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === 'checkbox') {
+        if (isMulti || selectMode === "checkbox") {
           // @ts-ignore
-          valueAsyncSelect = !(0, _utils.isNullOrUndefined)(record[column.dataIndex]) && Array.isArray(record[column.dataIndex]) && record[column.dataIndex]?.length > 0 ? options.filter(val => record[column.dataIndex]?.includes(val[keySelect])) : undefined;
+          valueAsyncSelect = !(0, _utils.isNullOrUndefined)(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
         return /*#__PURE__*/_react.default.createElement(_asyncSelect.AsyncSelect, {
           options: options,
           defaultOptions: options,
           value: valueAsyncSelect,
           onChange: (val, option) => {
-            onChange(val ?? '');
+            onChange(val ?? "");
             const formState = getValues();
             // const itemState = getValues(dataIndex)
             // @ts-ignore
@@ -554,30 +554,30 @@ const EditableCell = props => {
               option: option,
               indexCol,
               indexRow,
-              type: 'blur'
+              type: "blur"
             });
-          },
-          autoDestroy: true,
+          }
+          // autoDestroy={true}
+          ,
           showSearch: true,
           defaultOpen: column.field === startCell?.colId,
           autoFocus: column.field === startCell?.colId
-
           // defaultOpen={column.field === cellEditing?.column.field}
           ,
-          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
+          mode: isMulti || selectMode === "checkbox" ? "multiple" : undefined,
           valueSelectAble: true,
           style: {
-            width: '100%',
-            height: '100%'
+            width: "100%",
+            height: "100%"
           },
-          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
           allowClear: column.isClearable ?? false,
-          maxTagCount: 'responsive',
+          maxTagCount: "responsive",
           popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
           optionFilterProp: "label",
-          popupClassName: 'be-popup-container',
+          popupClassName: "be-popup-container",
           loadOptions: loadOptions,
-          status: isInvalid ? 'error' : undefined
+          status: isInvalid ? "error" : undefined
           // dropdownRender={(menu) => {
           //   if (toolbarItems && toolbarItems.length > 0) {
           //     return (
@@ -619,12 +619,12 @@ const EditableCell = props => {
           filterOption: filterOption,
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
-            label: inputKey ?? 'label'
+            label: inputKey ?? "label"
           },
           onBlur: event => {
             if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
               const val = event.inputValue;
-              onChange(val ?? '');
+              onChange(val ?? "");
               const formState = getValues();
               // const itemState = getValues(dataIndex)
               // @ts-ignore
@@ -642,47 +642,46 @@ const EditableCell = props => {
                 },
                 indexCol,
                 indexRow,
-                type: 'blur'
+                type: "blur"
               });
             }
           },
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });
-      case 'treeSelect':
+      case "treeSelect":
         // let valueTreeSelect
 
         const newTreeData = (0, _utils.convertLabelToTitle)(optionsTree);
         // @ts-ignore
-        // const valueTreeSelect = column?.editSelectSettings?.isMulti ? (Array.isArray(record[column.dataIndex]) ? record[column.dataIndex] : []) : record[column.dataIndex]
+        // const valueTreeSelect = column?.editSelectSettings?.isMulti ? (Array.isArray(record[dataIndex]) ? record[dataIndex] : []) : record[dataIndex]
 
         let valueTreeSelect = value;
         if (fieldValue) {
           // @ts-ignore
           valueTreeSelect = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === 'checkbox') {
+        if (isMulti || selectMode === "checkbox") {
           // @ts-ignore
-          valueTreeSelect = !(0, _utils.isNullOrUndefined)(record[column.dataIndex]) && Array.isArray(record[column.dataIndex]) && record[column.dataIndex]?.length > 0 ? options.filter(val => record[column.dataIndex]?.includes(val[keySelect])) : undefined;
+          valueTreeSelect = !(0, _utils.isNullOrUndefined)(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
         return /*#__PURE__*/_react.default.createElement(_rcMasterUi.TreeSelect, {
           id: `col${indexCol}-record${indexRow}`,
-          className: 'be-tree-select',
+          className: "be-tree-select",
           style: {
-            width: '100%',
-            height: '100%'
+            width: "100%",
+            height: "100%"
           },
           value: valueTreeSelect,
           dropdownStyle: {
             maxHeight: 400,
-            overflow: 'auto'
+            overflow: "auto"
           },
           treeData: newTreeData,
-          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
           treeDefaultExpandAll: true,
           defaultOpen: column.field === startCell?.colId,
           autoFocus: column.field === startCell?.colId
-
           // defaultOpen={column.field === cellEditing?.column.field}
           ,
           virtual: true,
@@ -694,14 +693,14 @@ const EditableCell = props => {
           maxTagPlaceholder: 2,
           treeTitleRender: column?.editSelectSettings?.formatOptionLabel,
           showCheckedStrategy: SHOW_PARENT,
-          multiple: column?.editSelectSettings?.selectMode === 'checkbox' || column?.editSelectSettings?.isMulti
+          multiple: column?.editSelectSettings?.selectMode === "checkbox" || column?.editSelectSettings?.isMulti
           // fieldNames={{label: inputKey ? inputKey : 'title', value: keySelect, children: 'children'}}
           ,
-          treeCheckable: column?.editSelectSettings?.selectMode === 'checkbox',
+          treeCheckable: column?.editSelectSettings?.selectMode === "checkbox",
           filterTreeNode: filterTreeNode,
           popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
           onSelect: (val, option) => {
-            onChange(val ?? '');
+            onChange(val ?? "");
             const formState = getValues();
             // const itemState = getValues(dataIndex)
             // @ts-ignore
@@ -716,23 +715,23 @@ const EditableCell = props => {
               option: option,
               indexCol,
               indexRow,
-              type: 'blur'
+              type: "blur"
             });
           },
-          popupClassName: 'be-popup-container',
-          status: isInvalid ? 'error' : undefined,
+          popupClassName: "be-popup-container",
+          status: isInvalid ? "error" : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });
-      case 'checkbox':
+      case "checkbox":
         return /*#__PURE__*/_react.default.createElement("div", {
           style: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: column.align ?? 'center',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: column.align ?? "center",
             paddingInline: 5,
-            height: '100%',
-            width: '100%'
+            height: "100%",
+            width: "100%"
           }
         }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Checkbox, {
           checked: Boolean(value)
@@ -751,12 +750,12 @@ const EditableCell = props => {
               field: column.field ?? column.field,
               indexCol,
               indexRow,
-              type: 'blur'
+              type: "blur"
             });
           },
           disabled: (0, _utils.isDisable)(column, record) ?? false
         }));
-      case 'form':
+      case "form":
         const valueForm = value;
         return /*#__PURE__*/_react.default.createElement(_EditForm.EditForm, {
           rowData: record,
@@ -766,7 +765,6 @@ const EditableCell = props => {
           value: valueForm,
           fieldKey: column.editFromSettings?.fieldKey,
           indexRow: indexRow
-
           // cellFocus={column.field === cellEditing?.column.field}
           ,
 
@@ -781,14 +779,14 @@ const EditableCell = props => {
               field: column.field,
               record: {
                 ...formState,
-                [column.field ?? '']: val
+                [column.field ?? ""]: val
               },
               prevState,
               newState,
               option: val,
               indexCol,
               indexRow,
-              type: 'blur'
+              type: "blur"
             });
           }
           // cellEditing={cellEditing}
@@ -796,13 +794,13 @@ const EditableCell = props => {
           // menuPortalTarget={tableContainerRef}
           // classNamePrefix={column.classElement ?? 'select'}
           ,
-          placeholder: t ? t(column.placeholder ? column.placeholder : '') : column.placeholder ? column.placeholder : '',
+          placeholder: t ? t(column.placeholder ? column.placeholder : "") : column.placeholder ? column.placeholder : "",
           menuWidth: column.editFromSettings?.menuWidth,
           menuHeight: column.editFromSettings?.menuHeight
         });
 
       // case 'file':
-      //   const valueFile = record[column.dataIndex]
+      //   const valueFile = record[dataIndex]
       //   return (
       //
       //
@@ -817,7 +815,7 @@ const EditableCell = props => {
       //           const newValue = Array.isArray(val) ? val.map((it: any) => it) : val
       //           const newrecordData = {
       //             ...record,
-      //             [column.dataIndex]: newValue
+      //             [dataIndex]: newValue
       //           }
       //           handleCellChange(val, newValue, newrecordData, col, indexRow, indexCol)
       //         }}
@@ -828,8 +826,8 @@ const EditableCell = props => {
       //
       //   )
 
-      case 'color':
-        const color = (0, _utils.isColor)(value) ? value : '#ffffff';
+      case "color":
+        const color = (0, _utils.isColor)(value) ? value : "#ffffff";
         const presets = (0, _utils.genPresets)({
           blue: _colors.blue,
           red: _colors.red,
@@ -851,7 +849,7 @@ const EditableCell = props => {
               newState: `#${valueColor.toHex()}`,
               indexCol,
               indexRow,
-              type: 'blur'
+              type: "blur"
             });
           },
           presets: presets,
@@ -869,7 +867,7 @@ const EditableCell = props => {
           }, /*#__PURE__*/_react.default.createElement(Presets, null)), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
             type: "vertical",
             style: {
-              height: 'auto'
+              height: "auto"
             }
           }), /*#__PURE__*/_react.default.createElement(_antd.Col, {
             flex: "auto"
@@ -877,7 +875,7 @@ const EditableCell = props => {
         });
 
       // case 'image':
-      //   let image = record[column.dataIndex]
+      //   let image = record[dataIndex]
       //   return (
       //     <ImageUpload
       //       id={`col${indexCol}-record${indexRow}`}
@@ -888,8 +886,8 @@ const EditableCell = props => {
       //         const checkKey = checkKeyDown(val, col, indexRow + 1, indexCol + 1)
       //         if (checkKey === 'ArrecordDown' || checkKey === 'ArrecordUp' || checkKey === 'Enter') {
       //           let newVal = ''
-      //           if (newVal != record[column.dataIndex]) {
-      //             record[column.dataIndex] = path
+      //           if (newVal != record[dataIndex]) {
+      //             record[dataIndex] = path
       //             // handleDataChange(path, record, col, indexRow, indexCol)
       //             handleCellChange(path, record, col, indexRow, indexCol)
       //           }
@@ -898,7 +896,7 @@ const EditableCell = props => {
       //     />
       //   )
 
-      case 'numeric':
+      case "numeric":
         const thousandSeparator = cellFormat?.thousandSeparator;
         const decimalSeparator = cellFormat?.decimalSeparator;
 
@@ -924,13 +922,13 @@ const EditableCell = props => {
           customInput: _antd.Input
           // valueIsNumericString={true}
           ,
-          placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',
-          autoComplete: 'off',
-          className: (0, _classnames.default)('be-cell-editing  rounded-0 input-element', {
-            'is-invalid': isInvalid,
-            'be-cell-edit-align-center': column.align === 'center',
-            'be-cell-edit-align-left': column.align === 'left',
-            'be-cell-edit-align-right': !column.align || column.align === 'right'
+          placeholder: t ? t(column.placeholder ?? "Enter") : column.placeholder ?? "Enter",
+          autoComplete: "off",
+          className: (0, _classnames.default)("be-cell-editing  rounded-0 input-element", {
+            "is-invalid": isInvalid,
+            "be-cell-edit-align-center": column.align === "center",
+            "be-cell-edit-align-left": column.align === "left",
+            "be-cell-edit-align-right": !column.align || column.align === "right"
           }),
           autoFocus: column.field === startCell?.colId,
           onValueChange: values => {
@@ -954,7 +952,7 @@ const EditableCell = props => {
                 newState,
                 indexCol,
                 indexRow,
-                type: 'blur'
+                type: "blur"
               });
             }
           },
@@ -966,17 +964,16 @@ const EditableCell = props => {
           id: `col${indexCol}-record${indexRow}`,
           style: {
             textAlign: column.align,
-            resize: 'none',
-            height: '100%'
+            resize: "none",
+            height: "100%"
           }
-
           // @ts-ignore
-          // value={!isNullOrUndefined(record[column.dataIndex]) ? record[column.dataIndex] : ''}
+          // value={!isNullOrUndefined(record[dataIndex]) ? record[dataIndex] : ''}
           ,
           disabled: (0, _utils.isDisable)(column, record) ?? false,
-          className: (0, _classnames.default)('be-cell-editing rounded-0 input-element'),
-          placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',
-          value: !(0, _utils.isNullOrUndefined)(value) ? value : '',
+          className: (0, _classnames.default)("be-cell-editing rounded-0 input-element"),
+          placeholder: t ? t(column.placeholder ?? "Enter") : column.placeholder ?? "Enter",
+          value: !(0, _utils.isNullOrUndefined)(value) ? value : "",
           onBlur: () => {
             const formState = getValues();
             // const itemState = getValues(dataIndex)
@@ -994,7 +991,7 @@ const EditableCell = props => {
                 field,
                 indexCol,
                 indexRow,
-                type: 'blur'
+                type: "blur"
               });
             }
           },
@@ -1013,12 +1010,12 @@ const EditableCell = props => {
               record: formState,
               indexCol,
               indexRow,
-              type: 'enter'
+              type: "enter"
             });
             // }
           },
           onChange: onChange,
-          status: isInvalid ? 'error' : undefined,
+          status: isInvalid ? "error" : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`,
           autoSize: {