fuse-importer 0.1.3-testing → 0.1.5-testing

package/lib/esm/Importer/common/Spreadsheet/components/SpreadsheetRowCheckboxes.js

@@ -45,6 +45,7 @@ import { Checkbox } from "../../../../common/inputs/Checkbox";
 import { useImporterContext } from "../../../contexts/ImporterContextProvider";
 import ReactVirtualizedAutoSizer from "react-virtualized-auto-sizer";
 import { rowIsEmpty } from "../SpreadsheetContextProvider/utils";
+import { useDataSetContext } from "../DataSetContextProvider";
 var StyledGrid = styled(Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  overflow-y: scroll;\n"], ["\n  background: ", ";\n  overflow-y: scroll;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.white50;
@@ -57,52 +58,55 @@ var gridStyles = {
 };
 export var SpreadsheetRowCheckboxes = function (_a) {
     var height = _a.height, gridRef = _a.gridRef, isLoadingData = _a.isLoadingData, props = __rest(_a, ["height", "gridRef", "isLoadingData"]);
-    var _b = useSpreadsheetContext(), data = _b.data, selectedRows = _b.selectedRows, options = _b.options, lastClickedIndexRef = _b.lastClickedIndexRef, setSelectedRows = _b.setSelectedRows, checkboxColumnWidth = _b.checkboxColumnWidth, isTransformTooltipOpened = _b.isTransformTooltipOpened;
+    var _b = useSpreadsheetContext(), selectedRows = _b.selectedRows, options = _b.options, filteredDataIds = _b.filteredDataIds, lastClickedIndexRef = _b.lastClickedIndexRef, setSelectedRows = _b.setSelectedRows, checkboxColumnWidth = _b.checkboxColumnWidth, isTransformTooltipOpened = _b.isTransformTooltipOpened;
+    var getRecord = useDataSetContext().getRecord;
     var currentStepIndex = useImporterContext().currentStepIndex;
-    var nonEmptyRows = useMemo(function () { return data.filter(function (row) { return !rowIsEmpty(row); }); }, [
-        data,
-    ]);
+    var nonEmptyRows = useMemo(function () { return filteredDataIds.filter(function (rowId) { return !rowIsEmpty(getRecord(rowId)); }); }, [filteredDataIds]);
     var isIndeterminate = selectedRows.length > 0 && selectedRows.length < nonEmptyRows.length;
     var handleRowSelect = function (checked, rowIndex, rowMetaId) {
-        var _a, _b;
+        var _a;
         if (isTransformTooltipOpened)
             return;
-        var lastRowMetaId = data[data.length - 1]._meta.id;
-        var isLastRow = rowMetaId === lastRowMetaId;
-        var isLastRowAndEmpty = isLastRow && rowIsEmpty(data[rowIndex]);
+        var recordId = filteredDataIds[rowIndex];
+        var record = getRecord(recordId);
+        var lastRowRecordId = filteredDataIds[filteredDataIds.length - 1];
+        var isLastRow = rowMetaId === lastRowRecordId;
+        var isLastRowAndEmpty = isLastRow && rowIsEmpty(getRecord(lastRowRecordId));
         if (isLastRowAndEmpty)
             return;
         if (options.withSingleRowSelect) {
-            if (!rowIsEmpty(data[rowIndex]))
-                setSelectedRows([(_b = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id]);
+            if (!rowIsEmpty(record))
+                setSelectedRows([(_a = record === null || record === void 0 ? void 0 : record._meta) === null || _a === void 0 ? void 0 : _a.id]);
             return;
         }
         if (checked) {
-            setSelectedRows(function (prev) { var _a, _b; return __spreadArray(__spreadArray([], prev, true), [(_b = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id], false); });
+            setSelectedRows(function (prev) { var _a; return __spreadArray(__spreadArray([], prev, true), [(_a = record === null || record === void 0 ? void 0 : record._meta) === null || _a === void 0 ? void 0 : _a.id], false); });
         }
         else {
             setSelectedRows(function (prev) {
-                return prev.filter(function (row) { var _a, _b; return row !== ((_b = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id); });
+                return prev.filter(function (row) { var _a; return row !== ((_a = record === null || record === void 0 ? void 0 : record._meta) === null || _a === void 0 ? void 0 : _a.id); });
             });
         }
         lastClickedIndexRef.current = rowIndex;
     };
     var handleSelectMultipleRows = function (rowIndex) {
-        var _a, _b;
+        var _a;
         if (isTransformTooltipOpened)
             return;
-        var clickedRowId = (_b = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id;
+        var rowId = filteredDataIds[rowIndex];
+        var record = getRecord(rowId);
+        var clickedRowId = (_a = record === null || record === void 0 ? void 0 : record._meta) === null || _a === void 0 ? void 0 : _a.id;
         if (selectedRows.includes(clickedRowId)) {
             // The clicked row is already selected, so we have to remove it
             var clickedRowIndex = selectedRows.indexOf(clickedRowId);
             var lastClickedIndex = lastClickedIndexRef.current;
             var rangeStartIndex_1 = Math.min(clickedRowIndex, lastClickedIndex);
             var rangeEndIndex_1 = Math.max(clickedRowIndex, lastClickedIndex);
-            var lastRowId_1 = data[data.length - 1]._meta.id;
+            var lastRowId_1 = filteredDataIds[filteredDataIds.length - 1];
             var updatedSelectedRows = selectedRows.filter(function (value, index) {
                 return index < rangeStartIndex_1 ||
                     index > rangeEndIndex_1 ||
-                    (value === lastRowId_1 && rowIsEmpty(data[data.length - 1]));
+                    (value === lastRowId_1 && rowIsEmpty(getRecord(lastRowId_1)));
             });
             setSelectedRows(updatedSelectedRows);
         }
@@ -110,14 +114,14 @@ export var SpreadsheetRowCheckboxes = function (_a) {
             // The clicked row is not selected, so we have to add it
             var lastSelectedRowIndex = selectedRows.length - 1;
             var lastSelectedRowId_1 = selectedRows[lastSelectedRowIndex];
-            var lastSelectedRow = data.find(function (row) { var _a; return ((_a = row === null || row === void 0 ? void 0 : row._meta) === null || _a === void 0 ? void 0 : _a.id) === lastSelectedRowId_1; });
-            var clickedRow = data[rowIndex];
-            var rangeStartIndex = data.indexOf(lastSelectedRow);
-            var rangeEndIndex = data.indexOf(clickedRow);
-            var range = data.slice(Math.min(rangeStartIndex, rangeEndIndex), Math.max(rangeStartIndex, rangeEndIndex) + 1);
-            var rangeIds = range.map(function (row) { return row === null || row === void 0 ? void 0 : row._meta.id; });
-            var lastRowId_2 = data[data.length - 1]._meta.id;
-            var isLastRowEmpty_1 = rowIsEmpty(data[data.length - 1]);
+            var lastSelectedRow = filteredDataIds.find(function (id) { return id === lastSelectedRowId_1; });
+            var clickedRow = filteredDataIds[rowIndex];
+            var rangeStartIndex = filteredDataIds.indexOf(lastSelectedRow);
+            var rangeEndIndex = filteredDataIds.indexOf(clickedRow);
+            var range = filteredDataIds.slice(Math.min(rangeStartIndex, rangeEndIndex), Math.max(rangeStartIndex, rangeEndIndex) + 1);
+            var rangeIds = range.map(function (row) { return row; });
+            var lastRowId_2 = filteredDataIds[filteredDataIds.length - 1];
+            var isLastRowEmpty_1 = rowIsEmpty(getRecord(lastRowId_2));
             var updatedSelectedRows = __spreadArray(__spreadArray([], selectedRows, true), rangeIds, true).filter(function (value, index, array) {
                 return array.indexOf(value) === index &&
                     (value !== lastRowId_2 || (value === lastRowId_2 && !isLastRowEmpty_1));
@@ -130,14 +134,10 @@ export var SpreadsheetRowCheckboxes = function (_a) {
         if (isTransformTooltipOpened)
             return;
         if (checked) {
-            var allRows = data
-                .filter(function (row) {
-                var isLastRow = row._meta.id === data[data.length - 1]._meta.id;
-                var isLastRowAndEmpty = isLastRow && rowIsEmpty(row);
+            var allRows = filteredDataIds.filter(function (recordId) {
+                var isLastRow = recordId === filteredDataIds[filteredDataIds.length - 1];
+                var isLastRowAndEmpty = isLastRow && rowIsEmpty(getRecord(recordId));
                 return !isLastRowAndEmpty;
-            })
-                .map(function (row) {
-                return row === null || row === void 0 ? void 0 : row._meta.id;
             });
             setSelectedRows(allRows);
         }
@@ -147,9 +147,8 @@ export var SpreadsheetRowCheckboxes = function (_a) {
         lastClickedIndexRef.current = null;
     };
     var CheckboxCell = function (_a) {
-        var _b, _c;
         var rowIndex = _a.rowIndex;
-        var rowMetaId = (_c = (_b = data[rowIndex]) === null || _b === void 0 ? void 0 : _b._meta) === null || _c === void 0 ? void 0 : _c.id;
+        var rowMetaId = filteredDataIds[rowIndex];
         return (_jsx(Div, __assign({ className: "checkbox-cell", "data-test-id": "checkbox-cell-".concat(rowIndex) }, { children: _jsx(Checkbox, { isChecked: rowMetaId && selectedRows.includes(rowMetaId), onChange: function (checked) {
                     return !isLoadingData && handleRowSelect(checked, rowIndex, rowMetaId);
                 }, onShiftKeyPressed: function () {
@@ -163,16 +162,16 @@ export var SpreadsheetRowCheckboxes = function (_a) {
     };
     var Cell = function (_a) {
         var rowIndex = _a.rowIndex, style = _a.style;
-        return (_jsxs(RowCheckbox, __assign({ style: style, alignCenter: true, justifyCenter: true, isLast: rowIndex === data.length - 1 }, { children: [_jsx(CheckboxCell, { rowIndex: rowIndex }), _jsx(RowNumbersCell, { rowIndex: rowIndex })] }), rowIndex));
+        return (_jsxs(RowCheckbox, __assign({ style: style, alignCenter: true, justifyCenter: true, isLast: rowIndex === filteredDataIds.length - 1 }, { children: [_jsx(CheckboxCell, { rowIndex: rowIndex }), _jsx(RowNumbersCell, { rowIndex: rowIndex })] }), rowIndex));
     };
     var isSelectAllRowsChekboxChecked = (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) > 0 &&
-        (data === null || data === void 0 ? void 0 : data.length) > 0 &&
+        (filteredDataIds === null || filteredDataIds === void 0 ? void 0 : filteredDataIds.length) > 0 &&
         (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) >= (nonEmptyRows === null || nonEmptyRows === void 0 ? void 0 : nonEmptyRows.length);
     return (_jsxs(SpreadsheetRowCheckboxesContainer, __assign({ className: "spreadsheet-row-container", columnWidth: checkboxColumnWidth }, props, { h100: true }, { children: [_jsx(SpreadsheetRowCheckboxesHeader, { children: currentStepIndex === 2 && (_jsx(Checkbox, { isChecked: isSelectAllRowsChekboxChecked, onChange: function (checked) {
                         return !isLoadingData && handleSelectAllRows(checked);
                     }, isIndeterminate: isIndeterminate, isDisabled: isLoadingData })) }), _jsx(ReactVirtualizedAutoSizer, { children: function (_a) {
                     var height = _a.height;
-                    return (_jsx(StyledGrid, __assign({ ref: gridRef, style: gridStyles, width: checkboxColumnWidth, columnCount: 1, columnWidth: checkboxColumnWidth, rowHeight: 40, rowCount: data.length, height: height - spreadsheetHeaderHeightPx }, { children: Cell })));
+                    return (_jsx(StyledGrid, __assign({ ref: gridRef, style: gridStyles, width: checkboxColumnWidth, columnCount: 1, columnWidth: checkboxColumnWidth, rowHeight: 40, rowCount: filteredDataIds.length, height: height - spreadsheetHeaderHeightPx }, { children: Cell })));
                 } })] })));
 };
 var RowCheckbox = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n\n  .checkbox-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    visibility: hidden;\n    z-index: 1;\n  }\n\n  .row-numbers-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n"], ["\n  background-color: ", ";\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n\n  .checkbox-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    visibility: hidden;\n    z-index: 1;\n  }\n\n  .row-numbers-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])), function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.label3; }, function (p) {

package/lib/esm/Importer/common/Spreadsheet/components/SpreadsheetRowNumbers.js

@@ -40,12 +40,12 @@ var gridStyles = {
 };
 export var SpreadsheetRowNumbers = function (_a) {
     var height = _a.height, spreadsheetHasXScroll = _a.spreadsheetHasXScroll, gridRef = _a.gridRef, props = __rest(_a, ["height", "spreadsheetHasXScroll", "gridRef"]);
-    var data = useSpreadsheetContext().data;
+    var filteredDataIds = useSpreadsheetContext().filteredDataIds;
     var Cell = function (_a) {
         var rowIndex = _a.rowIndex, style = _a.style;
-        return (_jsx(RowNumber, __assign({ style: style, alignCenter: true, justifyCenter: true, isLast: rowIndex === data.length - 1 }, { children: _jsx(Div, __assign({ truncateText: true, textAlignCenter: true, body2: true }, { children: rowIndex + 1 })) }), rowIndex));
+        return (_jsx(RowNumber, __assign({ style: style, alignCenter: true, justifyCenter: true, isLast: rowIndex === filteredDataIds.length - 1 }, { children: _jsx(Div, __assign({ truncateText: true, textAlignCenter: true, body2: true }, { children: rowIndex + 1 })) }), rowIndex));
     };
-    return (_jsxs(SpreadsheetRowNumbersContainer, __assign({}, props, { h: height }, { children: [_jsx(SpreadsheetRowNumbersHeader, {}), _jsx(Grid, __assign({ ref: gridRef, style: gridStyles, width: SPREADSHEET_ROW_NUMBERS_WIDTH, columnCount: 1, columnWidth: SPREADSHEET_ROW_NUMBERS_WIDTH, height: height - spreadsheetHeaderHeightPx, rowHeight: 40, rowCount: data.length }, { children: Cell }))] })));
+    return (_jsxs(SpreadsheetRowNumbersContainer, __assign({}, props, { h: height }, { children: [_jsx(SpreadsheetRowNumbersHeader, {}), _jsx(Grid, __assign({ ref: gridRef, style: gridStyles, width: SPREADSHEET_ROW_NUMBERS_WIDTH, columnCount: 1, columnWidth: SPREADSHEET_ROW_NUMBERS_WIDTH, height: height - spreadsheetHeaderHeightPx, rowHeight: 40, rowCount: filteredDataIds.length }, { children: Cell }))] })));
 };
 var RowNumber = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", "\n"], ["\n  background-color: ", ";\n  ", ";\n  ", "\n"])), function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.label3; }, function (p) {
     return !p.isLast && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-shadow: inset 0 -1px 0 ", ";\n    "], ["\n      box-shadow: inset 0 -1px 0 ", ";\n    "])), function (p) { return p.theme.colors.gray300; });

package/lib/esm/Importer/common/Spreadsheet/components/fields/SpreadsheetInput.js

@@ -31,6 +31,10 @@ import { SpreadsheetField, useSpreadsheetField } from ".";
 import { Div } from "../../../../../styled/utils";
 import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
 import { AVERAGE_CHAR_SIZE, getFieldContentWidth } from "./utils";
+var parseValue = function (value) {
+    var isFalsyButNotZero = !value && value !== 0;
+    return isFalsyButNotZero ? "" : value;
+};
 export var SpreadsheetInput = function (_a) {
     var _b, _c, _d, _e, _f, _g;
     var name = _a.name, record = _a.record, fieldType = _a.fieldType, columnWidth = _a.columnWidth, props = __rest(_a, ["name", "record", "fieldType", "columnWidth"]);
@@ -56,7 +60,7 @@ export var SpreadsheetInput = function (_a) {
             ? "".concat(totalInputSize, "px")
             : "".concat(defaultWidthAsNumber, "px");
     }, [value, record, columnWidth]);
-    return (_jsxs(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning, isHighlighted: isHighlighted, defaultFieldWidth: defaultWidthAsNumber, expandedFieldWidth: expandedFieldWidth, shouldExpandInput: true }, { children: [_jsx(Input, __assign({ autoComplete: "off", hasError: !!validationError, hasWarning: !!validationWarning, value: value || "", onChange: function (_a) {
+    return (_jsxs(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning, isHighlighted: isHighlighted, defaultFieldWidth: defaultWidthAsNumber, expandedFieldWidth: expandedFieldWidth, shouldExpandInput: true }, { children: [_jsx(Input, __assign({ autoComplete: "off", hasError: !!validationError, hasWarning: !!validationWarning, value: parseValue(value), onChange: function (_a) {
                     var value = _a.target.value;
                     return !isTransformTooltipOpened && setValue(value);
                 }, disabledWhen: isTransformTooltipOpened }, props)), ((_g = (_f = (_e = record === null || record === void 0 ? void 0 : record._meta) === null || _e === void 0 ? void 0 : _e.transformedRow) === null || _f === void 0 ? void 0 : _f[name]) === null || _g === void 0 ? void 0 : _g.original) &&

package/lib/esm/Importer/common/Spreadsheet/components/fields/index.js

@@ -53,33 +53,59 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { debounce, get } from "lodash";
 import { useCallback, useEffect, useState } from "react";
 import styled, { css } from "styled-components";
+import { useEventManagerContext } from "../../../../../common/EventManagerContextProvider";
 import { TooltipProvider } from "../../../../../common/TooltipProvider";
 import { Div } from "../../../../../styled/utils";
-import { parseValue } from "../../common";
+import { useDataSetContext } from "../../DataSetContextProvider";
+import { useFilteredDataContext } from "../../FilteredDataContextProvider";
 import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
+import { useDataSetManipulation } from "../../SpreadsheetContextProvider/useDataSetManipulation";
+import { useValidationContext } from "../../ValidationContextProvider";
+import { parseValue } from "../../common";
 export var useSpreadsheetField = function (name, record, fieldType) {
-    var _a = useSpreadsheetContext(), updateRecord = _a.updateRecord, errors = _a.errors, warnings = _a.warnings;
-    var _b = useState(record[name]), value = _b[0], setValue = _b[1];
-    var validationError = get(errors, "".concat(record._meta.id, ".").concat(name), null);
-    var validationWarning = get(warnings, "".concat(record._meta.id, ".").concat(name), null);
+    var appendNewRecordToSpreadsheet = useDataSetManipulation().appendNewRecordToSpreadsheet;
+    var lastFilteredRecordId = useFilteredDataContext().lastFilteredRecordId;
+    var _a = useValidationContext(), updateRecordAndRevalidate = _a.updateRecordAndRevalidate, warnings = _a.warnings, errors = _a.errors;
+    var getRecord = useDataSetContext().getRecord;
+    var _b = useState(record), recordState = _b[0], setRecordState = _b[1];
+    var _c = useState(record[name]), value = _c[0], setValue = _c[1];
+    var _d = useEventManagerContext(), on = _d.on, off = _d.off;
+    var _e = useState(get(errors.current, "".concat(record._meta.id, ".").concat(name), null)), validationError = _e[0], setValidationError = _e[1];
+    var _f = useState(get(warnings.current, "".concat(record._meta.id, ".").concat(name), null)), validationWarning = _f[0], setValidationWarning = _f[1];
     useEffect(function () {
-        if (record[name] !== value) {
-            setValue(record[name]);
-        }
-    }, [record[name]]);
+        var listener = function (newRecord) {
+            var _record = getRecord(record._meta.id);
+            setValidationError(get(errors.current, "".concat(_record._meta.id, ".").concat(name), null));
+            setValidationWarning(get(warnings.current, "".concat(_record._meta.id, ".").concat(name), null));
+            setRecordState(_record);
+        };
+        on(record._meta.id, listener);
+        return function () {
+            off(record._meta.id, listener);
+        };
+    }, []);
     var updateData = useCallback(debounce(function (value) { return __awaiter(void 0, void 0, void 0, function () {
-        var newRecord;
-        var _a;
-        return __generator(this, function (_b) {
-            newRecord = __assign(__assign({}, record), (_a = {}, _a[name] = parseValue(fieldType, value), _a));
-            updateRecord(newRecord);
+        var _record;
+        return __generator(this, function (_a) {
+            _record = __assign({}, getRecord(record._meta.id));
+            _record[name] = parseValue(fieldType, value);
+            updateRecordAndRevalidate(_record);
+            setRecordState(_record);
+            if (record._meta.id === lastFilteredRecordId.current) {
+                appendNewRecordToSpreadsheet();
+            }
             return [2 /*return*/];
         });
-    }); }, 50), [record]);
+    }); }, 200), [record]);
+    useEffect(function () {
+        if (recordState[name] !== value) {
+            setValue(recordState[name]);
+        }
+    }, [recordState[name], recordState]);
     var updateValue = useCallback(function (value) {
         setValue(value);
         updateData(value);
-    }, [record, updateData]);
+    }, [record, recordState, updateData]);
     return {
         value: value,
         setValue: updateValue,
@@ -87,29 +113,34 @@ export var useSpreadsheetField = function (name, record, fieldType) {
         validationWarning: validationWarning,
     };
 };
-var ContentContainer = styled(Div)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: calc(100% - 1px);\n  width: ", ";\n  overflow: hidden;\n\n  ", "\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  height: calc(100% - 1px);\n  width: ", ";\n  overflow: hidden;\n\n  ", "\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
+var ContentContainer = styled(Div)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: calc(100% - 1px);\n  width: ", ";\n  overflow: hidden;\n\n  ", "\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  height: calc(100% - 1px);\n  width: ", ";\n  overflow: hidden;\n\n  ", "\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var defaultFieldWidth = _a.defaultFieldWidth;
     return defaultFieldWidth ? "".concat(defaultFieldWidth, "px") : "100%";
 }, function (_a) {
     var expandedFieldWidth = _a.expandedFieldWidth;
     return expandedFieldWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n    "], ["\n      position: absolute;\n    "])));
 }, function (_a) {
-    var expandedFieldWidth = _a.expandedFieldWidth, isHighlighted = _a.isHighlighted, theme = _a.theme, shouldExpandInput = _a.shouldExpandInput;
-    return shouldExpandInput && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        background: ", ";\n        box-shadow: 0px 0px 0px 2px ", " inset;\n        width: ", ";\n        z-index: 1;\n\n        .suffix {\n          right: 12px;\n        }\n      "], ["\n        background: ", ";\n        box-shadow: 0px 0px 0px 2px ", " inset;\n        width: ", ";\n        z-index: 1;\n\n        .suffix {\n          right: 12px;\n        }\n      "])), !isHighlighted
+    var hasError = _a.hasError, hasWarning = _a.hasWarning, isHighlighted = _a.isHighlighted, theme = _a.theme, shouldExpandInput = _a.shouldExpandInput;
+    return shouldExpandInput &&
+        !hasError &&
+        !hasWarning && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        background: ", ";\n        box-shadow: 0px 0px 0px 2px ", " inset;\n      "], ["\n        background: ", ";\n        box-shadow: 0px 0px 0px 2px ", " inset;\n      "])), !isHighlighted
         ? theme.colors.white
-        : theme.colors.blue100, function (p) { return p.theme.colors.blue500; }, expandedFieldWidth || "auto");
+        : theme.colors.blue100, function (p) { return p.theme.colors.blue500; });
+}, function (_a) {
+    var expandedFieldWidth = _a.expandedFieldWidth, shouldExpandInput = _a.shouldExpandInput;
+    return shouldExpandInput && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        width: ", ";\n        z-index: 1;\n\n        .suffix {\n          right: 12px;\n        }\n      "], ["\n        width: ", ";\n        z-index: 1;\n\n        .suffix {\n          right: 12px;\n        }\n      "])), expandedFieldWidth || "auto");
 }, function (p) { return p.theme.css.alignCenter; }, function (p) {
-    return p.isHighlighted && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n    "], ["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n    "])), function (p) { return p.theme.colors.blue100; }, function (p) { return p.theme.colors.blue500; });
+    return p.isHighlighted && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n    "], ["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n    "])), function (p) { return p.theme.colors.blue100; }, function (p) { return p.theme.colors.blue500; });
 }, function (p) {
-    return p.hasWarning && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.orange1200; }, function (p) { return p.theme.colors.orange1100; }, function (p) { return p.theme.colors.orange500; });
+    return p.hasWarning && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.orange1200; }, function (p) { return p.theme.colors.orange1100; }, function (p) { return p.theme.colors.orange500; });
 }, function (p) {
-    return p.hasError && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.error; }, function (p) { return p.theme.colors.red100; }, function (p) { return p.theme.colors.error; });
+    return p.hasError && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.error; }, function (p) { return p.theme.colors.red100; }, function (p) { return p.theme.colors.error; });
 }, function (p) {
-    return p.isReadOnly && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
+    return p.isReadOnly && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 });
 export var SpreadsheetField = function (_a) {
     var validationError = _a.validationError, validationWarning = _a.validationWarning, children = _a.children, isHighlighted = _a.isHighlighted, expandedFieldWidth = _a.expandedFieldWidth, shouldExpandInput = _a.shouldExpandInput, defaultFieldWidth = _a.defaultFieldWidth;
     var isReadOnly = useSpreadsheetContext().isReadOnly;
-    return (_jsx(Div, __assign({ dim: "100%" }, { children: _jsx(TooltipProvider, __assign({ tooltip: validationError || validationWarning }, { children: _jsx(Div, __assign({ dim: "100%" }, { children: _jsx(ContentContainer, __assign({ hasError: !!validationError, hasWarning: !!validationWarning, isHighlighted: isHighlighted, expandedFieldWidth: expandedFieldWidth, defaultFieldWidth: defaultFieldWidth, shouldExpandInput: shouldExpandInput, isReadOnly: isReadOnly, className: "input-content" }, { children: children })) })) })) })));
+    return (_jsx(Div, __assign({ dim: "100%" }, { children: _jsx(TooltipProvider, __assign({ tooltip: validationError || validationWarning }, { children: _jsx(Div, __assign({ dim: "100%" }, { children: _jsx(ContentContainer, __assign({ hasError: validationError !== null, hasWarning: validationWarning !== null, isHighlighted: isHighlighted, expandedFieldWidth: expandedFieldWidth, defaultFieldWidth: defaultFieldWidth, shouldExpandInput: shouldExpandInput, isReadOnly: isReadOnly, className: "input-content" }, { children: children })) })) })) })));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/lib/esm/Importer/common/Spreadsheet/components/inputs/index.js

@@ -1,14 +1,13 @@
 var _a;
 import { FieldTypes } from "../../../../../types";
 import { BooleanInput } from "./Boolean";
-import { EmailInput } from "./EmailInput";
 import { EnumInput } from "./EnumInput";
 import { FloatInput } from "./FloatInput";
 import { IntegerInput } from "./IntegerInput";
 import { StringInput } from "./StringInput";
 export var inputTypes = (_a = {},
     _a[FieldTypes.boolean] = BooleanInput,
-    _a[FieldTypes.email] = EmailInput,
+    _a[FieldTypes.email] = StringInput,
     _a[FieldTypes.enum] = EnumInput,
     _a[FieldTypes.float] = FloatInput,
     _a[FieldTypes.integer] = IntegerInput,

package/lib/esm/Importer/common/Spreadsheet/index.d.ts

@@ -3,4 +3,3 @@ import { SpreadsheetProps } from "./common/types";
 declare const _default: React.MemoExoticComponent<({ initialDataSet, initialDataSetUpdatedAt, ...props }: SpreadsheetProps) => JSX.Element>;
 export default _default;
 export * from "./SpreadsheetContextProvider";
-export * from "./hooks";

package/lib/esm/Importer/common/Spreadsheet/index.js

@@ -21,99 +21,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { get } from "lodash";
-import { DateTime } from "luxon";
 import React from "react";
 import { areEqual } from "react-window";
-import { useImporterContext } from "../../contexts/ImporterContextProvider";
 import { SpreadsheetContextProvider } from "./SpreadsheetContextProvider";
 import SpreadsheetData from "./components/SpreadsheetData";
-var useFieldSorting = function () {
-    var templateHeaders = useImporterContext().templateHeaders;
-    var getDefaultSortCompareFn = function (sortBy) {
-        return function (a, b) {
-            var aField = get(a, sortBy.field);
-            var bField = get(b, sortBy.field);
-            var fieldTypes = templateHeaders.reduce(function (acc, header) {
-                var type = header.column_type;
-                var pattern = header.pattern || null;
-                acc[header.internal_key] = { type: type, pattern: pattern };
-                return acc;
-            }, {});
-            var fieldType = fieldTypes[sortBy.field];
-            var isAEmpty = aField === undefined || aField === null || aField === "";
-            var isBEmpty = bField === undefined || bField === null || bField === "";
-            // sort empty values to the end
-            if (isAEmpty && isBEmpty) {
-                if (a._meta.rowIndex === b._meta.rowIndex)
-                    return 0;
-                return a._meta.rowIndex < b._meta.rowIndex ? -1 : 1;
-            }
-            if (isAEmpty)
-                return 1;
-            if (isBEmpty)
-                return -1;
-            if (fieldType && fieldType.type === "boolean") {
-                var aString = aField ? "true" : "false";
-                var bString = bField ? "true" : "false";
-                if (aString === bString) {
-                    if (a._meta.rowIndex === b._meta.rowIndex)
-                        return 0;
-                    return a._meta.rowIndex < b._meta.rowIndex ? -1 : 1;
-                }
-                if (aString === "true")
-                    return sortBy.direction === "asc" ? -1 : 1;
-                if (bString === "true")
-                    return sortBy.direction === "asc" ? 1 : -1;
-            }
-            else if (fieldType &&
-                (fieldType.type === "date" ||
-                    fieldType.type === "datetime" ||
-                    fieldType.type === "time")) {
-                var aDateTime = aField
-                    ? DateTime.fromFormat(aField, fieldType.pattern)
-                    : null;
-                var bDateTime = bField
-                    ? DateTime.fromFormat(bField, fieldType.pattern)
-                    : null;
-                // sort invalid date values to the end before empty values
-                if (aDateTime && !aDateTime.isValid)
-                    return 1;
-                if (bDateTime && !bDateTime.isValid)
-                    return -1;
-                if (aDateTime && bDateTime && aDateTime.equals(bDateTime)) {
-                    if (a._meta.rowIndex === b._meta.rowIndex)
-                        return 0;
-                    return a._meta.rowIndex < b._meta.rowIndex ? -1 : 1;
-                }
-                if (sortBy.direction === "asc") {
-                    return (aDateTime === null || aDateTime === void 0 ? void 0 : aDateTime.valueOf()) - (bDateTime === null || bDateTime === void 0 ? void 0 : bDateTime.valueOf());
-                }
-                return (bDateTime === null || bDateTime === void 0 ? void 0 : bDateTime.valueOf()) - (aDateTime === null || aDateTime === void 0 ? void 0 : aDateTime.valueOf());
-            }
-            else {
-                if (aField === bField) {
-                    if (a._meta.rowIndex === b._meta.rowIndex)
-                        return 0;
-                    return a._meta.rowIndex < b._meta.rowIndex ? -1 : 1;
-                }
-                if (sortBy.direction === "asc") {
-                    return aField > bField ? 1 : -1;
-                }
-                return aField < bField ? 1 : -1;
-            }
-        };
-    };
-    return { getDefaultSortCompareFn: getDefaultSortCompareFn };
-};
 var SpreadsheetWrapper = function (_a) {
     var initialDataSet = _a.initialDataSet, initialDataSetUpdatedAt = _a.initialDataSetUpdatedAt, props = __rest(_a, ["initialDataSet", "initialDataSetUpdatedAt"]);
     return (_jsx(_Fragment, { children: initialDataSet && (_jsx(Spreadsheet, __assign({ initialDataSet: initialDataSet }, props), initialDataSetUpdatedAt || 0)) }));
 };
 var Spreadsheet = function (props) {
-    var getDefaultSortCompareFn = useFieldSorting().getDefaultSortCompareFn;
-    return (_jsx(SpreadsheetContextProvider, __assign({}, props, { getSortCompareFn: getDefaultSortCompareFn }, { children: _jsx(SpreadsheetData, { className: props.className }) })));
+    return (_jsx(SpreadsheetContextProvider, __assign({}, props, { children: _jsx(SpreadsheetData, { className: props.className }) })));
 };
 export default React.memo(SpreadsheetWrapper, areEqual);
 export * from "./SpreadsheetContextProvider";
-export * from "./hooks";

package/lib/esm/Importer/common/Spreadsheet/styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface SpreadSheetWrapperProps {
     canShowCheckboxOnHover?: boolean;
     shouldShowOnlyCheckbox?: boolean;
@@ -6,5 +5,5 @@ interface SpreadSheetWrapperProps {
 export declare const SpreadSheetData: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
 export declare const SpreadSheetWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & SpreadSheetWrapperProps, never>;
 export declare const SpreadSheetContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
-export declare const TableView: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, setSortBy, rowWidthScalingFactor, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, isDraggable, checkboxColumnWidth, isFiltering, ...props }: import("../../../common/Table/TableView/types").TableViewProps) => JSX.Element>, import("styled-components").DefaultTheme, {}, never>;
+export declare const TableView: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export {};

package/lib/esm/Importer/common/Spreadsheet/styles.js

@@ -2,6 +2,18 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
 import { TableView as TableViewBase, TableViewCellContainer, TableViewRow, } from "../../../common/Table/TableView";
 import { Div } from "../../../styled/utils";
@@ -12,5 +24,5 @@ export var SpreadSheetWrapper = styled(Div)(templateObject_5 || (templateObject_
         canShowCheckboxOnHover && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        &:hover {\n          .row-numbers-cell {\n            visibility: hidden;\n          }\n\n          .checkbox-cell {\n            visibility: visible;\n          }\n        }\n      "], ["\n        &:hover {\n          .row-numbers-cell {\n            visibility: hidden;\n          }\n\n          .checkbox-cell {\n            visibility: visible;\n          }\n        }\n      "]))));
 });
 export var SpreadSheetContainer = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
-export var TableView = styled(TableViewBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0 !important;\n    box-shadow: inset 0 -1px 0 ", ",\n      inset -1px 0 0 ", ";\n    &.last-column {\n      box-shadow: inset 0 -1px 0 ", ",\n        inset 1px 0 0 transparent, inset -1px 0 0 transparent !important;\n    }\n  }\n"], ["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0 !important;\n    box-shadow: inset 0 -1px 0 ", ",\n      inset -1px 0 0 ", ";\n    &.last-column {\n      box-shadow: inset 0 -1px 0 ", ",\n        inset 1px 0 0 transparent, inset -1px 0 0 transparent !important;\n    }\n  }\n"])), function (p) { return p.theme.colors.gray50; }, TableViewRow, TableViewCellContainer, function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.gray300; });
+export var TableView = styled(function (props) { return _jsx(TableViewBase, __assign({}, props)); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0 !important;\n    box-shadow: inset 0 -1px 0 ", ",\n      inset -1px 0 0 ", ";\n    &.last-column {\n      box-shadow: inset 0 -1px 0 ", ",\n        inset 1px 0 0 transparent, inset -1px 0 0 transparent !important;\n    }\n  }\n"], ["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0 !important;\n    box-shadow: inset 0 -1px 0 ", ",\n      inset -1px 0 0 ", ";\n    &.last-column {\n      box-shadow: inset 0 -1px 0 ", ",\n        inset 1px 0 0 transparent, inset -1px 0 0 transparent !important;\n    }\n  }\n"])), function (p) { return p.theme.colors.gray50; }, TableViewRow, TableViewCellContainer, function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.gray300; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/lib/esm/Importer/common/Spreadsheet/useFieldSorting.d.ts

@@ -0,0 +1,5 @@
+import { SortBy } from "../../../common";
+import { Record } from "../../../types";
+export declare const useFieldSorting: () => {
+    getDefaultSortCompareFn: (sortBy: SortBy) => (a: Record, b: Record) => number;
+};

package/lib/esm/Importer/common/Spreadsheet/useFieldSorting.js

@@ -0,0 +1,81 @@
+import { get } from "lodash";
+import { DateTime } from "luxon";
+import { useImporterContext } from "../../contexts/ImporterContextProvider";
+export var useFieldSorting = function () {
+    var templateHeaders = useImporterContext().templateHeaders;
+    var getDefaultSortCompareFn = function (sortBy) {
+        return function (a, b) {
+            var aField = get(a, sortBy.field);
+            var bField = get(b, sortBy.field);
+            var fieldTypes = templateHeaders.reduce(function (acc, header) {
+                var type = header.column_type;
+                var pattern = header.pattern || null;
+                acc[header.internal_key] = { type: type, pattern: pattern };
+                return acc;
+            }, {});
+            var fieldType = fieldTypes[sortBy.field];
+            var isAEmpty = aField === undefined || aField === null || aField === "";
+            var isBEmpty = bField === undefined || bField === null || bField === "";
+            // sort empty values to the end
+            if (isAEmpty && isBEmpty) {
+                if (a._meta.rowIndex === b._meta.rowIndex)
+                    return 0;
+                return a._meta.rowIndex < b._meta.rowIndex ? -1 : 1;
+            }
+            if (isAEmpty)
+                return 1;
+            if (isBEmpty)
+                return -1;
+            if (fieldType && fieldType.type === "boolean") {
+                var aString = aField ? "true" : "false";
+                var bString = bField ? "true" : "false";
+                if (aString === bString) {
+                    if (a._meta.rowIndex === b._meta.rowIndex)
+                        return 0;
+                    return a._meta.rowIndex < b._meta.rowIndex ? -1 : 1;
+                }
+                if (aString === "true")
+                    return sortBy.direction === "asc" ? -1 : 1;
+                if (bString === "true")
+                    return sortBy.direction === "asc" ? 1 : -1;
+            }
+            else if (fieldType &&
+                (fieldType.type === "date" ||
+                    fieldType.type === "datetime" ||
+                    fieldType.type === "time")) {
+                var aDateTime = aField
+                    ? DateTime.fromFormat(aField, fieldType.pattern)
+                    : null;
+                var bDateTime = bField
+                    ? DateTime.fromFormat(bField, fieldType.pattern)
+                    : null;
+                // sort invalid date values to the end before empty values
+                if (aDateTime && !aDateTime.isValid)
+                    return 1;
+                if (bDateTime && !bDateTime.isValid)
+                    return -1;
+                if (aDateTime && bDateTime && aDateTime.equals(bDateTime)) {
+                    if (a._meta.rowIndex === b._meta.rowIndex)
+                        return 0;
+                    return a._meta.rowIndex < b._meta.rowIndex ? -1 : 1;
+                }
+                if (sortBy.direction === "asc") {
+                    return (aDateTime === null || aDateTime === void 0 ? void 0 : aDateTime.valueOf()) - (bDateTime === null || bDateTime === void 0 ? void 0 : bDateTime.valueOf());
+                }
+                return (bDateTime === null || bDateTime === void 0 ? void 0 : bDateTime.valueOf()) - (aDateTime === null || aDateTime === void 0 ? void 0 : aDateTime.valueOf());
+            }
+            else {
+                if (aField === bField) {
+                    if (a._meta.rowIndex === b._meta.rowIndex)
+                        return 0;
+                    return a._meta.rowIndex < b._meta.rowIndex ? -1 : 1;
+                }
+                if (sortBy.direction === "asc") {
+                    return aField > bField ? 1 : -1;
+                }
+                return aField < bField ? 1 : -1;
+            }
+        };
+    };
+    return { getDefaultSortCompareFn: getDefaultSortCompareFn };
+};

package/lib/esm/Importer/common/Spreadsheet/validation/index.d.ts

@@ -1,4 +1,5 @@
-import { Field, FieldValidation, OnValidateRecord, Record, ValidationErrors } from "../../../../types";
+import { MutableRefObject } from "react";
+import { DuplicateValuesCollection, Field, FieldValidation, OnValidateRecord, Record, ValidationErrors } from "../../../../types";
 import { FieldValidator } from "./validators";
 type SelectedValidator = {
     validator: FieldValidation;
@@ -13,10 +14,11 @@ type ValidateRecordArgs = {
     validatorsCache?: SelectedFieldValidators[];
     record: Record;
     fields: Field[];
-    data: Record[];
+    duplicateValues: MutableRefObject<DuplicateValuesCollection>;
+    backendErrors?: ValidationErrors;
 };
 export declare function selectValidatorsFor(fields: Field[]): SelectedFieldValidators[];
-export declare function validateRecord({ record, fields, data, onValidateRecord, validatorsCache, }: ValidateRecordArgs): Promise<{
+export declare function validateRecord({ record, fields, onValidateRecord, validatorsCache, duplicateValues, backendErrors, }: ValidateRecordArgs): Promise<{
     errors?: ValidationErrors;
     warnings?: ValidationErrors;
 }>;