react-table-edit 1.4.9 → 1.4.10

package/dist/component/edit-form-inline/index.d.ts

@@ -0,0 +1,36 @@
+import { ClipboardEvent, Dispatch, JSX, SetStateAction } from "react";
+import { UseFormGetValues, UseFormSetValue } from "react-hook-form";
+import { InferType } from "yup";
+export type FromItemsField = {
+    name: string;
+    label: string;
+    type: 'text' | 'numeric' | 'select' | 'selectCreatable';
+    disabled?: boolean;
+    fraction?: number;
+    min?: number;
+    max?: number;
+    options?: any[];
+};
+type Props = {
+    id?: string;
+    field?: string;
+    displayValue: string;
+    textAlign?: 'left' | 'right' | 'center';
+    placeholder?: string;
+    invalid?: any;
+    rowData: any;
+    indexRow: any;
+    onKeyDown?: any;
+    defaultValues?: any;
+    schema?: InferType<any>;
+    onFormOpen?: (rowData: any, itemsField: FromItemsField[], setItemsField: Dispatch<SetStateAction<FromItemsField[]>>) => void;
+    footerTemplate?: (rowData: any) => JSX.Element;
+    template?: (row: any, indexRow: number) => any;
+    onChangeField?: (rowData: any, field: string, setValue: UseFormSetValue<any>, getValues: UseFormGetValues<any>) => void;
+    onChange: (rowData: any) => void;
+    onPaste?: (e: ClipboardEvent<HTMLInputElement>) => void;
+    isClearable?: boolean;
+    labelSize?: 'label-small' | 'label-medium' | 'label-large';
+};
+declare const EditFormInline: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
+export default EditFormInline;

package/dist/component/edit-form-inline/select-table/index.d.ts

@@ -0,0 +1,32 @@
+import { IFColumnSelectTable } from "../../select-table";
+interface ISelectTableBox {
+    id?: string;
+    name: string;
+    control: any;
+    defaultValue?: any;
+    isMulti?: boolean;
+    isLabel?: boolean;
+    inLine?: boolean;
+    labelComponent?: any;
+    options: any[];
+    loadOptions?: any;
+    placeholder?: string;
+    disabled?: boolean;
+    label?: any;
+    labelSize?: any;
+    required?: boolean;
+    errors?: any;
+    cssClass?: string;
+    callback?: any;
+    confirmHandle?: any;
+    columns?: IFColumnSelectTable[];
+    handleAddNew?: any;
+    fieldLabel?: string;
+    fieldValue?: string;
+    isClearable?: boolean;
+    noHeader?: boolean;
+    desciptionLabel?: string;
+    classLabel?: string;
+}
+declare const SelectTableBox: (props: ISelectTableBox) => import("react/jsx-runtime").JSX.Element;
+export default SelectTableBox;

package/dist/component/type/index.d.ts

@@ -3,7 +3,7 @@ import { IFColumnSelectTable } from "../select-table";
 import { FromItemsField } from "../edit-form";
 import { UseFormGetValues, UseFormReset, UseFormSetValue } from "react-hook-form";
 type ITextAlign = 'center' | 'left' | 'right';
-type IEditType = 'text' | 'numeric' | 'datetime' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'color';
+type IEditType = 'text' | 'numeric' | 'datetime' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'formInline' | 'color';
 export type ICommandItem = {
     id: string;
     color?: string;

package/dist/index.d.ts

@@ -71,7 +71,7 @@ type FromItemsField = {
 };
 
 type ITextAlign = 'center' | 'left' | 'right';
-type IEditType = 'text' | 'numeric' | 'datetime' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'color';
+type IEditType = 'text' | 'numeric' | 'datetime' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'formInline' | 'color';
 type ICommandItem = {
     id: string;
     color?: string;

package/dist/index.js

@@ -23016,7 +23016,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                                 }, children: jsxRuntime.jsxs("div", { className: 'r-select-grid', children: [jsxRuntime.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: jsxRuntime.jsx(RenderTable, {}) }), jsxRuntime.jsxs("div", { className: classnames('r-select-footer', { 'd-none': !(showFooter === true || handleAdd) }), children: [jsxRuntime.jsxs(Button$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classnames('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsxRuntime.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));
@@ -23217,7 +23217,7 @@ const EditForm = React$5.forwardRef((props, ref) => {
                     return (jsxRuntime.jsx(Col$1, { xl: 12, onKeyDown: e => formItemKeyDown(e, index), children: jsxRuntime.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 (jsxRuntime.jsx(Col$1, { xl: 12, onKeyDown: e => formItemKeyDown(e, index), children: jsxRuntime.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 (jsxRuntime.jsx(Col$1, { xl: 12, onKeyDown: e => formItemKeyDown(e, index), children: jsxRuntime.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));
                 }
             }) }));
     };
@@ -42347,6 +42347,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 } = reactI18next.useTranslation();
+        const { isLabel, desciptionLabel, id, classLabel, name, label, required } = props;
+        return (jsxRuntime.jsxs(React$5.Fragment, { children: [isLabel === false ? '' : jsxRuntime.jsxs(Label$1, { id: `label-${id}`, className: classLabel, for: name, children: [t(label ? label : ''), " ", required ? jsxRuntime.jsx("span", { className: "text-danger", children: "*" }) : ''] }), (!isNullOrUndefined$1(desciptionLabel) && desciptionLabel !== '') ?? jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(UncontrolledTooltip, { target: `label-${id}`, children: t(desciptionLabel ?? '') }) })] }));
+    };
+    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.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 ?? '' }), jsxRuntime.jsxs("div", { className: classnames('form-input-content', { 'hidden-label': isLabel === false }), children: [jsxRuntime.jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => {
+                                return (jsxRuntime.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 && jsxRuntime.jsx(FormFeedback$1, { children: errors?.message })] })] }) }));
+};
+
+const EditFormInline = React$5.forwardRef((props, ref) => {
+    const { id, field, rowData, onChange, onChangeField, onKeyDown, defaultValues, schema, indexRow, template, displayValue, onFormOpen, labelSize = 'label-small' } = props;
+    React$5.useRef(null);
+    React$5.useRef(null);
+    const [itemsField, setItemsField] = React$5.useState([]);
+    const [onFocus, setOnFocus] = React$5.useState(false);
+    reactI18next.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);
+            }
+        }
+    };
+    React$5.useEffect(() => {
+        if (onFocus && itemsField.length > 0) {
+            itemsField.forEach((ele) => {
+                setValue(ele.name, (rowData[ele.name] ?? ""));
+            });
+            focusElement(`form-element-${field}-${0}`);
+        }
+    }, [onFocus, itemsField]);
+    return (jsxRuntime.jsxs("div", { className: "form-edit-inline", ref: ref, id: id, children: [!onFocus && jsxRuntime.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 }), jsxRuntime.jsx("div", { className: `form__edit ${onFocus ? 'active' : ''}`, onKeyDown: e => handleOnKeyDown(), children: itemsField.map((item, index) => {
+                    if (item.type === 'numeric') {
+                        return (jsxRuntime.jsx("div", { className: "form__element", onKeyDown: e => formItemKeyDown(e, index), children: jsxRuntime.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 (jsxRuntime.jsx("div", { className: "form__element", onKeyDown: e => formItemKeyDown(e, index), children: jsxRuntime.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 (jsxRuntime.jsx("div", { className: "form__element", onKeyDown: e => formItemKeyDown(e, index), children: jsxRuntime.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 = React$5.forwardRef((props, ref) => {
     const { t } = reactI18next.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;
@@ -42731,6 +42856,18 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                             e.preventDefault();
                         }
                     } }));
+            case 'formInline':
+                return (jsxRuntime.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) {
+                            pasteDataFromExcel(indexRow, indexCol, e);
+                            e.preventDefault();
+                        }
+                    } }));
             default:
                 return (jsxRuntime.jsx(Input$1, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, style: { textAlign: col.textAlign, height: 29 }, value: isNullOrUndefined$1(row[col.field]) ? '' : row[col.field], className: classnames('border-0 rounded-0 input-element', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), onChange: (val) => {
                         if (row[col.field] != val.target?.value) {
@@ -43146,9 +43283,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             const errorMessage = typeDis === 1 || col.field === '' || !col.validate ? '' : col.validate(row[col.field], row);
             return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.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) {
@@ -43178,8 +43313,8 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                             e.stopPropagation();
                         }
                     }, children: jsxRuntime.jsx("div", { className: classnames('r-rowcell-div'), children: jsxRuntime.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) : jsxRuntime.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 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), jsxRuntime.jsx("span", { id: `error-${indexRow}-${indexCol}`, className: classnames('cursor-pointer text-primary icon-table', { 'd-none': !errorMessage }), children: jsxRuntime.jsx(SvgAlertCircle, { fontSize: 15.5 }) }), (!(typeDis === 1 && !refreshRow)) && jsxRuntime.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 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), jsxRuntime.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 ? RenderEdit(row, col, indexCol, indexRow) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: typeDis === 2 ? (col.template && col.template(row, indexRow)) ?? '' : jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }) }), jsxRuntime.jsx("span", { id: `error-${indexRow}-${indexCol}`, className: classnames('cursor-pointer text-primary icon-table', { 'd-none': !errorMessage }), children: jsxRuntime.jsx(SvgAlertCircle, { fontSize: 15.5 }) }), (!(typeDis === 1 && !refreshRow) && typeDis !== 2) && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), jsxRuntime.jsx(UncontrolledTooltip, { target: `error-${indexRow}-${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? '' })] }) }) }, `col-${indexRow}-${indexCol}`) }, indexCol));
         }
     };
     const renderFooterCol = (col, indexCol) => {
@@ -64970,7 +65105,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' })] })] }) : jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'fs-4 bolder', children: t('Drag and drop files here') }), jsxRuntime.jsx("div", { className: 'my-50', children: t('or') }), jsxRuntime.jsxs(Button$1, { tag: Label$1, outline: true, className: 'me-75', size: 'md', color: 'primary', children: [jsxRuntime.jsx(SvgArrowLeftCircle, { fontSize: 18, className: 'me-50' }), t('Select file'), jsxRuntime.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' })] }), jsxRuntime.jsx("div", { className: 'mt-1', children: t('Accepts .xls, .xlsx, .csv files') })] }) }), jsxRuntime.jsxs(Row$1, { className: `${getValues('file') ? '' : 'd-none'} m-0 gy-1`, children: [jsxRuntime.jsx(Col$1, { lg: 6, md: 12, xs: 12, children: jsxRuntime.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 }) }), jsxRuntime.jsx(Col$1, { lg: 6, md: 12, xs: 12, children: jsxRuntime.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' })] }), jsxRuntime.jsx("div", { className: 'mt-1', children: t('Accepts .xls, .xlsx, .csv files') })] }) }), jsxRuntime.jsxs(Row$1, { className: `${getValues('file') ? '' : 'd-none'} m-0 gy-1`, children: [jsxRuntime.jsx(Col$1, { lg: 6, md: 12, xs: 12, children: jsxRuntime.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 }) }), jsxRuntime.jsx(Col$1, { lg: 6, md: 12, xs: 12, children: jsxRuntime.jsx(NumberInput, { control: control, name: "headerRow", labelSize: "d-flex form-row-inline label-medium", label: t("Header row"), errors: errors.headerRow }) })] })] }));
 };
 
 const TabMergeImportExcel = (props) => {