react-table-edit 1.4.9 → 1.4.11

package/dist/index.mjs

@@ -22988,7 +22988,7 @@ const SelectTable = forwardRef((props, ref) => {
                                 }, children: jsxs("div", { className: 'r-select-grid', children: [jsx("div", { className: classnames('r-select-gridtable', { 'no-header': noHeader || (columns?.length ?? 0) === 0 }), ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight$1 }, children: jsx(RenderTable, {}) }), jsxs("div", { className: classnames('r-select-footer', { 'd-none': !(showFooter === true || handleAdd) }), children: [jsxs(Button$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classnames('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), footerComponent ? footerComponent() : null] })] }) }) }) })] }) }) }));
 });
 
-const SelectTableBox = (props) => {
+const SelectTableBox$1 = (props) => {
     const { isMulti, isLabel, confirmHandle, id, fieldValue, fieldLabel, labelComponent, options, loadOptions, control, placeholder, disabled, name, label, labelSize, required, errors, inLine, callback, desciptionLabel, classLabel, isClearable, defaultValue, handleAddNew, columns, ...rest } = props;
     const handChange = ({ onChange, val }) => {
         onChange((!isNullOrUndefined$1(val) && isMulti) ? val.map((item) => item.value) : ((!isNullOrUndefined$1(val) && !isMulti) ? (fieldValue ? val[fieldValue] : val?.value) : undefined));
@@ -23033,12 +23033,13 @@ const SelectTableBox = (props) => {
 
 const defaultWidth = 200;
 const EditForm = forwardRef((props, ref) => {
-    const { id, field, displayValue, menuHeight, menuWidth, rowData, invalid, onChange, onChangeField, onKeyDown, defaultValues, placeholder, textAlign, schema, onFormOpen, onFormSubmit, footerTemplate, minWidth, onPaste, openOnFocus, isClearable, labelSize = 'label-small' } = props;
+    const { id, field, displayValue, menuHeight, menuWidth, rowData, invalid, onChange, onChangeField, onKeyDown, defaultValues, placeholder, textAlign, schema, onFormOpen, onFormSubmit, footerTemplate, template, minWidth, onPaste, openOnFocus, isClearable, indexRow, labelSize = 'label-small' } = props;
     const { innerWidth } = window;
     const inputRef = useRef(null);
     const editFormRef = useRef(null);
     const buttonRef = useRef(null);
     const [dropdownOpen, setDropdownOpen] = useState(false);
+    const [isFocus, setIsFocus] = useState(false);
     const [itemsField, setItemsField] = useState([]);
     const { t } = useTranslation();
     useOnClickOutside(editFormRef, () => {
@@ -23080,6 +23081,7 @@ const EditForm = forwardRef((props, ref) => {
         else {
             setDropdownOpen(true);
         }
+        inputRef?.current.focus();
     };
     const handleOnSubmit = (val) => {
         closeMenu();
@@ -23189,11 +23191,30 @@ const EditForm = forwardRef((props, ref) => {
                     return (jsx(Col$1, { xl: 12, onKeyDown: e => formItemKeyDown(e, index), children: jsx(TextInput, { id: `form-element-${field}-${index}`, control: control, name: item.name, label: item.label ? item.label : '', labelSize: `text-left ${labelSize}`, errors: errors[item.name], disabled: item.disabled, callback: () => { elementChange(item.name); } }, index) }, index));
                 }
                 else if (item.type === 'select') {
-                    return (jsx(Col$1, { xl: 12, onKeyDown: e => formItemKeyDown(e, index), children: jsx(SelectTableBox, { id: `form-element-${field}-${index}`, options: item.options ?? [], control: control, name: item.name, label: item.label ? item.label : '', labelSize: `text-left ${labelSize}`, errors: errors[item.name], disabled: item.disabled, callback: () => { elementChange(item.name); } }, index) }, index));
+                    return (jsx(Col$1, { xl: 12, onKeyDown: e => formItemKeyDown(e, index), children: jsx(SelectTableBox$1, { id: `form-element-${field}-${index}`, options: item.options ?? [], control: control, name: item.name, label: item.label ? item.label : '', labelSize: `text-left ${labelSize}`, errors: errors[item.name], disabled: item.disabled, callback: () => { elementChange(item.name); } }, index) }, index));
                 }
             }) }));
     };
-    return (jsx("div", { className: "form-edit", ref: ref, id: id, children: jsx("div", { ref: editFormRef, children: jsxs(Dropdown$1, { isOpen: dropdownOpen, toggle: () => { }, children: [jsx(DropdownToggle$1, { tag: 'div', children: jsx(Input$1, { style: { backgroundColor: '#FFF', textAlign: textAlign ?? 'left' }, placeholder: placeholder, innerRef: inputRef, className: classnames('input-display input-numeric', { 'is-invalid': invalid }), value: displayValue, onClick: handleOnClick, onKeyDown: (e) => handleOnKeyDown(e), onPaste: (e) => onPaste && onPaste(e), readOnly: true }) }), jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', style: {
+    useEffect(() => {
+        if (inputRef) {
+            inputRef.current.addEventListener('blur', function () {
+                setIsFocus(false);
+            });
+            inputRef.current.addEventListener('focus', function () {
+                if (!isFocus) {
+                    setIsFocus(true);
+                }
+            });
+        }
+    }, [inputRef]);
+    return (jsx("div", { className: "form-edit", ref: ref, id: id, children: jsx("div", { ref: editFormRef, children: jsxs(Dropdown$1, { isOpen: dropdownOpen, toggle: () => { }, children: [jsx(DropdownToggle$1, { tag: 'div', children: jsxs("div", { className: classnames('display-value', { 'r-is-focus': isFocus || dropdownOpen }, { 'is-invalid': invalid }), onClick: handleOnClick, children: [template?.(rowData, indexRow) ?? displayValue, jsx(Input$1, { style: {
+                                        width: template ? 0 : '100%',
+                                        height: template ? 0 : 28,
+                                        lineHeight: template ? 0 : 19,
+                                        padding: template ? 0 : 'auto',
+                                        backgroundColor: '#FFF',
+                                        textAlign: textAlign ?? 'left'
+                                    }, placeholder: placeholder, innerRef: inputRef, onKeyDown: (e) => handleOnKeyDown(e), onPaste: (e) => onPaste && onPaste(e), readOnly: true })] }) }), jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', style: {
                             minWidth: minWidth ? minWidth : defaultWidth,
                             width: menuWidth ? menuWidth : 'min-content',
                             maxWidth: innerWidth > 1280 ? 1280 : innerWidth,
@@ -41695,6 +41716,12 @@ const HeaderTableCol = (props) => {
         if (size.width > 50) {
             const newColumns = [...column];
             newColumns[indexCol].width = size.width;
+            if ((column[indexCol]?.maxWidth ?? 0) < size.width) {
+                newColumns[indexCol].maxWidth = size.width;
+            }
+            if ((column[indexCol]?.minWidth ?? 0) > size.width) {
+                newColumns[indexCol].minWidth = size.width;
+            }
             setColumn(newColumns);
         }
     };
@@ -41703,8 +41730,8 @@ const HeaderTableCol = (props) => {
                     left: col.fixedType === 'left' ? objWidthFix[col.index ?? 0] : undefined,
                     right: col.fixedType === 'right' ? objWidthFix[col.index ?? 0] : undefined,
                     width: col.width ? typeof col.width === 'number' ? col.width : col.width?.includes('px') || col.width?.includes('%') ? col.width : `${col.width}px` : 'auto',
-                    minWidth: col.width ? typeof col.width === 'number' ? col.width : col.width?.includes('px') || col.width?.includes('%') ? col.width : `${col.width}px` : 'auto',
-                    maxWidth: col.width ? typeof col.width === 'number' ? col.width : col.width?.includes('px') || col.width?.includes('%') ? col.width : `${col.width}px` : 'auto'
+                    minWidth: col.fixedType ? col.width : col.minWidth ? typeof col.minWidth === 'number' ? col.minWidth : col.minWidth?.includes('px') || col.minWidth?.includes('%') ? col.minWidth : `${col.minWidth}px` : 'auto',
+                    maxWidth: col.fixedType ? col.width : col.maxWidth ? typeof col.maxWidth === 'number' ? col.maxWidth : col.maxWidth?.includes('px') || col.maxWidth?.includes('%') ? col.maxWidth : `${col.maxWidth}px` : 'auto'
                 }, children: jsxs("div", { style: { justifyContent: col.textAlign ?? 'left' }, className: classnames('r-headercell-div'), children: [col.field === 'checkbox' && (jsx(Input$1, { checked: totalCount > 0 && selectedRows?.length >= totalCount, type: "checkbox", className: classnames('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
                                 if (selectEnable) {
                                     if (e.target.checked) {
@@ -42108,11 +42135,11 @@ const RenderToolbarTop = ({ toolbarTopOption }) => {
 
 const handleAdd = (dataSource, tableElement, columnFistEdit, 
 /*eslint-disable*/
-changeDataSource, pagingSetting, setIndexFocus, focusNewElement
+changeDataSource, pagingSetting, setIndexFocus, focusNewElement, 
 /*eslint-enable*/
-) => {
+numberOfRows) => {
     const lengthData = dataSource.length;
-    changeDataSource(dataSource, true);
+    changeDataSource(dataSource, numberOfRows ?? 1);
     if (pagingSetting?.setCurrentPage) {
         pagingSetting?.setCurrentPage(Math.floor(lengthData / (pagingSetting?.pageSize ?? 0)) + 1);
     }
@@ -42196,14 +42223,14 @@ editDisable, addDisable, toolbarSetting, buttonSetting) => {
         messageBoxConfirmDelete(t, () => {
             if (!editDisable && !addDisable) {
                 setIndexFocus(-1);
-                changeDataSource([], false);
+                changeDataSource([]);
             }
         }, '');
     }
 };
 
 const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, indexFocus, editDisable, addDisable, buttonSetting, toolbarSetting, headerColumns, t }) => {
-    return (jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxs("div", { className: "r-toolbar-items", children: [jsxs("div", { className: "r-toolbar-left", children: [jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: handleAdd, className: 'd-flex', children: t('Add item') }) }), (indexFocus ?? -1) > -1 ? jsxs(Fragment$1, { children: [jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: () => { handleDuplicate(); }, className: 'd-flex', children: t('Duplicate') }) }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertBefore, className: 'd-flex', children: t('Insert item before') }) }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertAfter, className: 'd-flex', children: t('Insert item after') }) })] }) : jsx(Fragment$1, { children: " " }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'primary', outline: true, onClick: handleDeleteAll, className: 'd-flex', children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
+    return (jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxs("div", { className: "r-toolbar-items", children: [jsxs("div", { className: "r-toolbar-left", children: [jsxs("div", { className: classnames('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsx(Button$1, { color: 'success', outline: true, onClick: () => handleAdd(1), className: 'd-flex', children: t('Add item') }), jsxs(UncontrolledDropdown, { className: 'nav-item', children: [jsx(DropdownToggle$1, { tag: 'div', className: 'me-0 d-flex', children: jsx(Button$1, { type: 'button', color: 'success', outline: true, style: { marginLeft: -1 }, className: 'px-25', children: jsx("svg", { fill: '#28c76f', height: "15", width: "20", viewBox: "0 0 20 20", children: jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) }) }), jsxs(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', style: { width: 60 }, children: [jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(10), children: " 10 " }), jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(20), children: " 20 " }), jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(30), children: " 30 " }), jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(40), children: " 40 " }), jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(50), children: " 50 " })] })] })] }), (indexFocus ?? -1) > -1 ? jsxs(Fragment$1, { children: [jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: () => { handleDuplicate(); }, className: 'd-flex', children: t('Duplicate') }) }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertBefore, className: 'd-flex', children: t('Insert item before') }) }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertAfter, className: 'd-flex', children: t('Insert item after') }) })] }) : jsx(Fragment$1, { children: " " }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'primary', outline: true, onClick: handleDeleteAll, className: 'd-flex', children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                             return ((item.align === 'left') ? jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : '');
                         })] }), jsx("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                         return ((item.align === 'center') ? jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : '');
@@ -42319,6 +42346,131 @@ const handleCtrlD = (e, params) => {
     }
 };
 
+const SelectTableBox = (props) => {
+    const { isMulti, isLabel, confirmHandle, id, fieldValue, fieldLabel, labelComponent, options, loadOptions, control, placeholder, disabled, name, label, labelSize, required, errors, inLine, callback, desciptionLabel, classLabel, isClearable, defaultValue, handleAddNew, columns, ...rest } = props;
+    const handChange = ({ onChange, val }) => {
+        onChange((!isNullOrUndefined$1(val) && isMulti) ? val.map((item) => item.value) : ((!isNullOrUndefined$1(val) && !isMulti) ? (fieldValue ? val[fieldValue] : val?.value) : undefined));
+        if (callback) {
+            callback(val);
+        }
+    };
+    const renderLabel = (props) => {
+        const { t } = useTranslation();
+        const { isLabel, desciptionLabel, id, classLabel, name, label, required } = props;
+        return (jsxs(Fragment, { children: [isLabel === false ? '' : jsxs(Label$1, { id: `label-${id}`, className: classLabel, for: name, children: [t(label ? label : ''), " ", required ? jsx("span", { className: "text-danger", children: "*" }) : ''] }), (!isNullOrUndefined$1(desciptionLabel) && desciptionLabel !== '') ?? jsx(Fragment$1, { children: jsx(UncontrolledTooltip, { target: `label-${id}`, children: t(desciptionLabel ?? '') }) })] }));
+    };
+    return (jsx(Fragment, { children: jsxs("div", { className: classnames(inLine === false ? 'form-group ' : 'form-row-inline d-flex', 'align', {
+                [labelSize ? labelSize : '']: labelSize,
+                'form-row-inline-error': errors
+            }), children: [renderLabel({ isLabel, desciptionLabel, classLabel, name, label, required, id: id ?? '' }), jsxs("div", { className: classnames('form-input-content', { 'hidden-label': isLabel === false }), children: [jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => {
+                                return (jsx(SelectTable, { ...rest, id: id, value: (isMulti ? value?.length > 0 : value) ? (!isMulti ? (options.find((val) => val[fieldValue ?? 'value'] === value) ?? (defaultValue ?? '')) : value) : (isMulti ? [] : undefined), 
+                                    // Giá trị của SelectTable, nếu isMulti là true và value có độ dài lớn hơn 0, hoặc nếu isMulti là false và value có giá trị, 
+                                    // thì tìm giá trị tương ứng trong options hoặc sử dụng defaultValue. Nếu không, sử dụng giá trị mặc định tùy thuộc vào isMulti.
+                                    onChange: (val) => {
+                                        if (isMulti || (fieldValue && val ? val[fieldValue] : val?.value) !== value) { // Kiểm tra nếu giá trị mới khác với giá trị hiện tại
+                                            if (confirmHandle) { // Nếu có hàm confirmHandle
+                                                confirmHandle(handChange, onChange, val); // Gọi hàm confirmHandle với các tham số tương ứng
+                                            }
+                                            else {
+                                                if (isMulti) {
+                                                    onChange(!isNullOrUndefined$1(val) ? val.map((item) => item[fieldValue ?? 'value']) : []);
+                                                }
+                                                else {
+                                                    onChange(!isNullOrUndefined$1(val) ? val[fieldValue ?? 'value'] : undefined);
+                                                }
+                                                // Nếu giá trị mới không null hoặc undefined và isMulti là true, thì lấy mảng các giá trị. 
+                                                // Nếu isMulti là false, lấy giá trị mới hoặc giá trị của fieldValue.
+                                                if (callback) { // Nếu có hàm callback
+                                                    callback(val); // Gọi hàm callback với giá trị mới
+                                                }
+                                            }
+                                        }
+                                    }, handleAdd: handleAddNew, isClearable: isClearable, isMulti: isMulti, placeholder: placeholder, invalid: errors, loadOptions: loadOptions, options: options, isDisabled: disabled, columns: columns, fieldValue: fieldValue, fieldLabel: fieldLabel, formatOptionLabel: labelComponent ? labelComponent : undefined }));
+                            } }), errors && jsx(FormFeedback$1, { children: errors?.message })] })] }) }));
+};
+
+const EditFormInline = forwardRef((props, ref) => {
+    const { id, field, rowData, onChange, onChangeField, onKeyDown, defaultValues, schema, indexRow, template, displayValue, onFormOpen, labelSize = 'label-small' } = props;
+    useRef(null);
+    useRef(null);
+    const [itemsField, setItemsField] = useState([]);
+    const [onFocus, setOnFocus] = useState(false);
+    useTranslation();
+    const { control, handleSubmit, getValues, reset, setValue, formState: { errors } } = useForm({
+        mode: 'onChange',
+        defaultValues,
+        resolver: o(schema)
+    });
+    const focusElement = (id, focus) => {
+        const element = document.getElementById(id);
+        if (element) {
+            if (element.className.includes('react-select')) {
+                element.getElementsByTagName('input')[0]?.focus();
+            }
+            else {
+                element.focus();
+                if (focus) {
+                    element.setSelectionRange(0, element.innerText.length - 1);
+                }
+            }
+        }
+    };
+    const handleOnKeyDown = (e) => {
+    };
+    const formKeyDown = (e, handSubmit) => {
+        if (e.code === 'Enter') {
+            handSubmit();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    const formItemKeyDown = (e, index) => {
+        if (e.code === 'ArrowRight' && index < itemsField.length - 1) {
+            focusElement(`form-element-${field}-${index + 1}`);
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else if (e.code === 'ArrowLeft' && index > 0) {
+            focusElement(`form-element-${field}-${index - 1}`);
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    const elementChange = (field) => {
+        if (onChangeField) {
+            onChangeField(rowData, field, setValue, getValues);
+            const rs = getValues();
+            if (rs) {
+                onChange(rs);
+            }
+        }
+    };
+    useEffect(() => {
+        if (onFocus && itemsField.length > 0) {
+            itemsField.forEach((ele) => {
+                setValue(ele.name, (rowData[ele.name] ?? ""));
+            });
+            focusElement(`form-element-${field}-${0}`);
+        }
+    }, [onFocus, itemsField]);
+    return (jsxs("div", { className: "form-edit-inline", ref: ref, id: id, children: [!onFocus && jsx("div", { className: "form__display", onClick: () => {
+                    if (onFormOpen && itemsField.length === 0) {
+                        onFormOpen(rowData, itemsField, setItemsField);
+                    }
+                    setOnFocus(true);
+                }, onKeyDown: e => formKeyDown(e, handleSubmit), children: template ? template(rowData, indexRow) : displayValue }), onFocus && jsx("div", { className: `form__edit ${onFocus ? 'active' : ''}`, style: { width: (itemsField?.length ?? 0) * 95 }, onKeyDown: e => handleOnKeyDown(), children: itemsField.map((item, index) => {
+                    if (item.type === 'numeric') {
+                        return (jsx("div", { style: { minWidth: 90 }, className: "form__element", onKeyDown: e => formItemKeyDown(e, index), children: jsx(NumberInput, { id: `form-element-${field}-${index}`, control: control, name: item.name, label: item.label ? item.label : '', labelSize: `${labelSize}`, errors: errors[item.name], disabled: item.disabled, min: item.min, max: item.max, inLine: false, fractionCurrency: item.fraction, callback: () => { elementChange(item.name); } }, index) }, index));
+                    }
+                    else if (item.type === 'text') {
+                        return (jsx("div", { className: "form__element", onKeyDown: e => formItemKeyDown(e, index), children: jsx(TextInput, { id: `form-element-${field}-${index}`, control: control, name: item.name, label: item.label ? item.label : '', labelSize: `${labelSize}`, inLine: false, errors: errors[item.name], disabled: item.disabled, callback: () => { elementChange(item.name); } }, index) }, index));
+                    }
+                    else if (item.type === 'select') {
+                        return (jsx("div", { className: "form__element", onKeyDown: e => formItemKeyDown(e, index), children: jsx(SelectTableBox, { id: `form-element-${field}-${index}`, options: item.options ?? [], control: control, name: item.name, label: item.label ? item.label : '', labelSize: `${labelSize}`, inLine: false, errors: errors[item.name], disabled: item.disabled, callback: () => { elementChange(item.name); } }, index) }, index));
+                    }
+                }) })] }));
+});
+
 const TableEdit = forwardRef((props, ref) => {
     const { t } = useTranslation();
     const { idTable, dataSource, columns, commandClick, dataSourceChange, rowChange, pagingSetting, setDataSource, height, maxHeight, minHeight, defaultValue, toolbarSetting, searchSetting, setSelectedItem, selectedItem, selectEnable, editDisable, addDisable, buttonSetting, formatSetting, handleSelect, haveSum, isMulti, disableAutoKey, onDuplicate } = props;
@@ -42495,7 +42647,7 @@ const TableEdit = forwardRef((props, ref) => {
     else {
         toolbarTopOption = [...defaultToolbarOption];
     }
-    const RenderEdit = (row, col, indexCol, indexRow) => {
+    const RenderEditCell = (row, col, indexCol, indexRow) => {
         /*eslint-disable */
         switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
             case 'date':
@@ -42606,31 +42758,29 @@ const TableEdit = forwardRef((props, ref) => {
                 else {
                     valueSelectTree = (!isNullOrUndefined$1(row[col.field]) && row[col.field] !== '') ? findItemInTree(optionsSelectTree, row[col.field]) : '';
                 }
-                return (jsx("div", { onKeyDown: (e) => {
+                return (jsx(SelectTableTree, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, value: valueSelectTree, options: optionsSelectTree, onChange: (val) => {
+                        if (col.selectSettings?.isMulti) {
+                            row[col.field] = !isNullOrUndefined$1(val) ? val : [];
+                        }
+                        else {
+                            row[col.field] = !isNullOrUndefined$1(val) ? val[col.selectSettings?.fieldValue ?? 'value'] : undefined;
+                        }
+                        if (col.callback) {
+                            col.callback(val, indexRow, row);
+                        }
+                        handleDataChange(row, col, indexRow);
+                    }, fieldValue: col.selectSettings?.fieldValue, fieldLabel: col.selectSettings?.fieldLabel, component: gridRef, columns: col.selectSettings?.columns, isClearable: col.selectSettings?.isClearable ?? false, formatSetting: formatSetting, placeholder: t('Select'), onOpenMenu: () => {
+                        if (col.selectSettings?.onOpenMenu) {
+                            col.selectSettings?.onOpenMenu(row, col, indexRow);
+                        }
+                    }, loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, fieldChildren: col.selectSettings?.fieldChild ?? 'children', selectChilds: col.selectSettings?.selectChilds, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, width: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, invalid: col.validate && col.validate(row[col.field], row), maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : undefined, menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, textAlign: col.textAlign ?? 'left', onKeyDown: (e) => {
                         if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) ;
-                    }, children: jsx(SelectTableTree, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, value: valueSelectTree, options: optionsSelectTree, onChange: (val) => {
-                            if (col.selectSettings?.isMulti) {
-                                row[col.field] = !isNullOrUndefined$1(val) ? val : [];
-                            }
-                            else {
-                                row[col.field] = !isNullOrUndefined$1(val) ? val[col.selectSettings?.fieldValue ?? 'value'] : undefined;
-                            }
-                            if (col.callback) {
-                                col.callback(val, indexRow, row);
-                            }
-                            handleDataChange(row, col, indexRow);
-                        }, fieldValue: col.selectSettings?.fieldValue, fieldLabel: col.selectSettings?.fieldLabel, component: gridRef, columns: col.selectSettings?.columns, isClearable: col.selectSettings?.isClearable ?? false, formatSetting: formatSetting, placeholder: t('Select'), onOpenMenu: () => {
-                            if (col.selectSettings?.onOpenMenu) {
-                                col.selectSettings?.onOpenMenu(row, col, indexRow);
-                            }
-                        }, loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, fieldChildren: col.selectSettings?.fieldChild ?? 'children', selectChilds: col.selectSettings?.selectChilds, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, width: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, invalid: col.validate && col.validate(row[col.field], row), maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : undefined, menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, textAlign: col.textAlign ?? 'left', onKeyDown: (e) => {
-                            if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) ;
-                        }, onPaste: (e) => {
-                            if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
-                                pasteDataFromExcel(indexRow, indexCol, e);
-                                e.preventDefault();
-                            }
-                        } }) }));
+                    }, onPaste: (e) => {
+                        if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
+                            pasteDataFromExcel(indexRow, indexCol, e);
+                            e.preventDefault();
+                        }
+                    } }));
             case 'checkbox':
                 return (jsx(Input$1, { checked: row[col.field], id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, type: "checkbox", className: "input-checkbox cursor-pointer", style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (val) => {
                         row[col.field] = val.currentTarget.checked;
@@ -42695,7 +42845,19 @@ const TableEdit = forwardRef((props, ref) => {
                 return (jsx(EditForm, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, ...col.formSettings, field: col.field, displayValue: col.formSettings?.displayValue ? col.formSettings?.displayValue(row) : '', placeholder: col.placeholder ? t(col.placeholder) : '', rowData: row, indexRow: indexRow, onChange: (val) => {
                         Object.assign(row, val);
                         handleDataChange(row, col, indexRow);
-                    }, invalid: col.validate && col.validate(row[col.field], row), textAlign: col.textAlign, onKeyDown: (e) => {
+                    }, invalid: col.validate && col.validate(row[col.field], row), textAlign: col.textAlign, template: col.template, onKeyDown: (e) => {
+                        return checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
+                    }, onPaste: (e) => {
+                        if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
+                            pasteDataFromExcel(indexRow, indexCol, e);
+                            e.preventDefault();
+                        }
+                    } }));
+            case 'formInline':
+                return (jsx(EditFormInline, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, ...col.formSettings, field: col.field, displayValue: col.formSettings?.displayValue ? col.formSettings?.displayValue(row) : '', placeholder: col.placeholder ? t(col.placeholder) : '', rowData: row, indexRow: indexRow, onChange: (val) => {
+                        Object.assign(row, val);
+                        handleDataChange(row, col, indexRow);
+                    }, invalid: col.validate && col.validate(row[col.field], row), textAlign: col.textAlign, template: col.template, onKeyDown: (e) => {
                         return checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
                     }, onPaste: (e) => {
                         if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
@@ -42759,7 +42921,7 @@ const TableEdit = forwardRef((props, ref) => {
     };
     //Thêm dòng mới
     const moveIndexRowToNewPage = () => {
-        changeDataSource(dataSource, true);
+        changeDataSource(dataSource, 1);
         if (pagingClient && pagingSetting?.setCurrentPage && (totalCount % (pagingSetting?.pageSize ?? 0)) === 0) {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
         }
@@ -42826,13 +42988,13 @@ const TableEdit = forwardRef((props, ref) => {
         }, 50);
     });
     const getColumn = (col, index) => {
-        const column = contentColumns.filter(e => e.visible !== false)[col + index];
+        const column = contentColumns[col + index];
         if (column) {
             return { ...column };
         }
         return undefined;
     };
-    const pasteDataFromExcel = async (currenRowIndex, col, e) => {
+    const pasteDataFromExcel = async (currenRowIndex, indexCol, e) => {
         const clipboard = (e.clipboardData || window.Clipboard).getData('text');
         const rowsClipboard = clipboard.trimEnd().split('\n');
         setIndexFocus(-1);
@@ -42848,7 +43010,8 @@ const TableEdit = forwardRef((props, ref) => {
                         stringData.push(element.trimEnd().split('\t')[index].toString().trim());
                     }
                 });
-                const column = getColumn(col, index);
+                const column = getColumn(indexCol, index);
+                console.log(column);
                 if (column) {
                     if ((!column.disabledCondition || !column.disabledCondition(dataSource[currenRowIndex + 0])) && column.editEnable && column.onPasteValidate) {
                         const rs = await column.onPasteValidate(stringData.join(','), currenRowIndex + 0, dataSource[currenRowIndex + 0]);
@@ -42925,8 +43088,7 @@ const TableEdit = forwardRef((props, ref) => {
                                     }
                                 }
                                 else if (column.editType === 'select') {
-                                    const rs = ((column.selectSettings?.optionsField ? item[column.selectSettings?.optionsField] : column.selectSettings?.options) ?? []).find((item) => item[column.selectSettings?.fieldValue ?? 'value'] === stringData);
-                                    if (rs) {
+                                    if (column.selectSettings?.allowCreate) {
                                         if (column.onPaste) {
                                             dataRow[column.field] = column.onPaste(dataRow, stringData);
                                         }
@@ -42934,11 +43096,25 @@ const TableEdit = forwardRef((props, ref) => {
                                             dataRow[column.field] = stringData;
                                         }
                                         if (column.callback) {
-                                            column.callback(rs, currenRowIndex + indexRow);
+                                            column.callback(stringData, currenRowIndex + indexRow);
                                         }
                                     }
                                     else {
-                                        notificationError(t('PasteExcelNotExist', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
+                                        const rs = ((column.selectSettings?.optionsField ? item[column.selectSettings?.optionsField] : column.selectSettings?.options) ?? []).find((item) => item[column.selectSettings?.fieldValue ?? 'value'] === stringData);
+                                        if (rs) {
+                                            if (column.onPaste) {
+                                                dataRow[column.field] = column.onPaste(dataRow, stringData);
+                                            }
+                                            else {
+                                                dataRow[column.field] = stringData;
+                                            }
+                                            if (column.callback) {
+                                                column.callback(rs, currenRowIndex + indexRow);
+                                            }
+                                        }
+                                        else {
+                                            notificationError(t('PasteExcelNotExist', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
+                                        }
                                     }
                                 }
                                 else {
@@ -42963,7 +43139,7 @@ const TableEdit = forwardRef((props, ref) => {
         }
         changeDataSource(dataSource);
     };
-    const changeDataSource = (data, haveNew = false) => {
+    const changeDataSource = (data, numberOfRows) => {
         if (!editDisable && setDataSource) {
             if ((searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm)) {
                 if (searchSetting?.setSearchTerm) {
@@ -42973,8 +43149,10 @@ const TableEdit = forwardRef((props, ref) => {
                     setSearchTerm('');
                 }
             }
-            if (haveNew && !addDisable) {
-                data.push(defaultValue ? { ...defaultValue, [fieldKey]: disableAutoKey ? undefined : generateUUID() } : {});
+            if (numberOfRows && !addDisable) {
+                for (let index = 0; index < numberOfRows; index++) {
+                    data.push(defaultValue ? { ...defaultValue, [fieldKey]: disableAutoKey ? undefined : generateUUID() } : {});
+                }
                 setDataSource([...data]);
             }
             else {
@@ -43077,9 +43255,8 @@ const TableEdit = forwardRef((props, ref) => {
         else if (col.field === 'checkbox') {
             return (jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
                     left: col.fixedType === 'left' ? objWidthFix[indexCol] : undefined,
-                    right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined,
-                    textAlign: col.textAlign ? col.textAlign : 'center',
-                }, children: jsx("div", { className: "r-rowcell-div cursor-pointer", onClick: (e) => {
+                    right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined
+                }, children: jsx("div", { className: "r-rowcell-div cursor-pointer", style: { alignItems: 'center' }, onClick: (e) => {
                         if (selectEnable) {
                             const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
                             if (index > -1) {
@@ -43101,7 +43278,7 @@ const TableEdit = forwardRef((props, ref) => {
                             }
                             e.stopPropagation();
                         }
-                    }, children: jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", onChange: () => { }, style: { textAlign: col.textAlign ?? 'center' } }) }) }, `col-${indexRow}-${indexCol}`));
+                    }, children: jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", style: { textAlign: col.textAlign ?? 'center' } }) }) }, `col-${indexRow}-${indexCol}`));
         }
         else {
             let value = row[col.field];
@@ -43118,9 +43295,7 @@ const TableEdit = forwardRef((props, ref) => {
             const errorMessage = typeDis === 1 || col.field === '' || !col.validate ? '' : col.validate(row[col.field], row);
             return (jsx(Fragment, { children: col.visible !== false && jsx("td", { className: classnames(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
                         left: col.fixedType === 'left' ? objWidthFix[indexCol] : undefined,
-                        right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined,
-                        padding: 0,
-                        textAlign: col.textAlign ? col.textAlign : 'left'
+                        right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined
                     }, onClick: (e) => {
                         if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
                             if (!editDisable && indexRow != indexFocus) {
@@ -43150,9 +43325,21 @@ const TableEdit = forwardRef((props, ref) => {
                             e.stopPropagation();
                         }
                     }, children: jsx("div", { className: classnames('r-rowcell-div'), children: jsxs("div", { id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : '', className: classnames('r-rowcell-content', { 'r-is-invalid': errorMessage }), style: {
-                                margin: typeDis === 1 ? 2 : !errorMessage ? '7px 9px' : 2
-                            }, children: [typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? (col.template && col.template(row, indexRow)) ?? '' : (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), jsx("span", { id: `error-${indexRow}-${indexCol}`, className: classnames('cursor-pointer text-primary icon-table', { 'd-none': !errorMessage }), children: jsx(SvgAlertCircle, { fontSize: 15.5 }) }), (!(typeDis === 1 && !refreshRow)) && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? (col.template && col.template(row, indexRow)) ?? '' : (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), jsx(UncontrolledTooltip, { target: `error-${indexRow}-${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? '' })] }) }) }, `col-${indexRow}-${indexCol}`) }, indexCol));
+                                textAlign: col.textAlign ? col.textAlign : 'left'
+                            }, children: [typeDis === 1 && !refreshRow && jsx(Fragment$1, { children: RenderEditCell(row, col, indexCol, indexRow) }), (typeDis !== 1 || refreshRow) && RenderContentCell(row, col, indexCol, indexRow, typeDis, value), jsx("span", { id: `error-${indexRow}-${indexCol}`, className: classnames('cursor-pointer text-primary icon-table', { 'd-none': !errorMessage }), children: jsx(SvgAlertCircle, { fontSize: 15.5 }) }), jsx(UncontrolledTooltip, { target: `error-${indexRow}-${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? '' })] }) }) }, `col-${indexRow}-${indexCol}`) }, indexCol));
+        }
+    };
+    const RenderContentCell = (row, col, indexCol, indexRow, typeDis, value) => {
+        if (typeDis === 2) {
+            const value = col.template?.(row, indexRow) ?? '';
+            if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+                return (jsxs(Fragment$1, { children: [jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: value }), (!refreshRow && typeDis !== 2) && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }));
+            }
+            else {
+                return value;
+            }
         }
+        return (jsxs(Fragment$1, { children: [jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), (!(typeDis === 1 && !refreshRow) && typeDis !== 2) && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }));
     };
     const renderFooterCol = (col, indexCol) => {
         const sumValue = (col.haveSum === true && col.editType === "numeric") ? dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0) : 0;
@@ -43195,8 +43382,8 @@ const TableEdit = forwardRef((props, ref) => {
                                                     }) }, `header-${-indexParent}`));
                                             }) }), jsx("tbody", { className: 'r-gridcontent', children: renderData() }), jsx("tfoot", { className: "r-gridfoot", children: haveSum == true ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, index) => {
                                                     return (renderFooterCol(col, index));
-                                                }) }) : jsx(Fragment$1, {}) })] }) }), toolbarSetting?.showBottomToolbar && jsx(ToolbarBottom, { handleAdd: () => {
-                                    handleAdd(dataSource, tableElement.current, columnFistEdit, changeDataSource, pagingSetting, setIndexFocus, focusNewElement);
+                                                }) }) : jsx(Fragment$1, {}) })] }) }), toolbarSetting?.showBottomToolbar && jsx(ToolbarBottom, { handleAdd: (numberOfRows) => {
+                                    handleAdd(dataSource, tableElement.current, columnFistEdit, changeDataSource, pagingSetting, setIndexFocus, focusNewElement, numberOfRows);
                                 }, handleDuplicate: () => {
                                     handleDuplicate(dataSource, indexFocus, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
                                 }, handleInsertAfter: () => {
@@ -64942,7 +65129,7 @@ const TabSelectFileImportExcel = (props) => {
                                         getSheetsExcel(e.target.files[0], setValue, setOptionSheetName);
                                     }, hidden: true, accept: '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel' })] })] }) : jsxs(Fragment$1, { children: [jsx("div", { className: 'fs-4 bolder', children: t('Drag and drop files here') }), jsx("div", { className: 'my-50', children: t('or') }), jsxs(Button$1, { tag: Label$1, outline: true, className: 'me-75', size: 'md', color: 'primary', children: [jsx(SvgArrowLeftCircle, { fontSize: 18, className: 'me-50' }), t('Select file'), jsx(Input$1, { type: 'file', onChange: (e) => {
                                         getSheetsExcel(e.target.files[0], setValue, setOptionSheetName);
-                                    }, hidden: true, accept: '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel' })] }), jsx("div", { className: 'mt-1', children: t('Accepts .xls, .xlsx, .csv files') })] }) }), jsxs(Row$1, { className: `${getValues('file') ? '' : 'd-none'} m-0 gy-1`, children: [jsx(Col$1, { lg: 6, md: 12, xs: 12, children: jsx(SelectTableBox, { labelSize: "d-flex form-row-inline label-medium", control: control, name: "sheetId", label: t("Sheet name"), required: true, errors: errors.sheetId, placeholder: t("Select"), options: optionSheetName }) }), jsx(Col$1, { lg: 6, md: 12, xs: 12, children: jsx(NumberInput, { control: control, name: "headerRow", labelSize: "d-flex form-row-inline label-medium", label: t("Header row"), errors: errors.headerRow }) })] })] }));
+                                    }, hidden: true, accept: '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel' })] }), jsx("div", { className: 'mt-1', children: t('Accepts .xls, .xlsx, .csv files') })] }) }), jsxs(Row$1, { className: `${getValues('file') ? '' : 'd-none'} m-0 gy-1`, children: [jsx(Col$1, { lg: 6, md: 12, xs: 12, children: jsx(SelectTableBox$1, { labelSize: "d-flex form-row-inline label-medium", control: control, name: "sheetId", label: t("Sheet name"), required: true, errors: errors.sheetId, placeholder: t("Select"), options: optionSheetName }) }), jsx(Col$1, { lg: 6, md: 12, xs: 12, children: jsx(NumberInput, { control: control, name: "headerRow", labelSize: "d-flex form-row-inline label-medium", label: t("Header row"), errors: errors.headerRow }) })] })] }));
 };
 
 const TabMergeImportExcel = (props) => {