fuse-importer 0.1.4-testing → 0.1.6-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,
@@ -104,7 +130,7 @@ var ContentContainer = styled(Div)(templateObject_8 || (templateObject_8 = __mak
     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_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; });
+    return p.isHighlighted && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n      z-index: 100;\n    "], ["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n      z-index: 100;\n    "])), function (p) { return p.theme.colors.blue100; }, function (p) { return p.theme.colors.blue500; });
 }, function (p) {
     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) {
@@ -115,6 +141,6 @@ var ContentContainer = styled(Div)(templateObject_8 || (templateObject_8 = __mak
 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, 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/transformation/index.d.ts

@@ -2,6 +2,7 @@ import { Field, Record, TransformedRecord } from "../../../../types";
 type TransformRecordArgs = {
     record: Record;
     fields: Field[];
+    possibleDateFormats?: string[];
 };
-export declare const transformRecord: ({ record, fields }: TransformRecordArgs) => TransformedRecord;
+export declare const transformRecord: ({ record, fields, possibleDateFormats, }: TransformRecordArgs) => TransformedRecord;
 export {};

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

@@ -1,11 +1,15 @@
-import { fieldTransformations } from "./transformators";
-var runTransformation = function (record, transformation, field) {
+import { datesDateTimesAndTimesTransformations, fieldTransformations, } from "./transformators";
+var runTransformation = function (fieldValue, transformation, field, possibleDateFormats) {
     var transformationType = transformation.transformation_type;
     var transformerFunction = fieldTransformations[transformationType];
-    return transformerFunction(record, transformation, field);
+    if (Object.keys(datesDateTimesAndTimesTransformations).includes(transformationType)) {
+        var dateTimeTransformFunction = transformerFunction;
+        return dateTimeTransformFunction(fieldValue, transformation, field, possibleDateFormats);
+    }
+    return transformerFunction(fieldValue, transformation, field);
 };
 export var transformRecord = function (_a) {
-    var record = _a.record, fields = _a.fields;
+    var record = _a.record, fields = _a.fields, possibleDateFormats = _a.possibleDateFormats;
     var transformedRecords = {};
     for (var _i = 0, fields_1 = fields; _i < fields_1.length; _i++) {
         var currentField = fields_1[_i];
@@ -23,7 +27,7 @@ export var transformRecord = function (_a) {
         var fieldWasTransformed = false;
         for (var i = 0; i < fieldTransformations_1.length; i++) {
             var currentTransformation = fieldTransformations_1[i];
-            var transformed = runTransformation(transformedField.transformed, currentTransformation, currentField);
+            var transformed = runTransformation(transformedField.transformed, currentTransformation, currentField, possibleDateFormats);
             if (transformed.transformationWasNeeded) {
                 fieldWasTransformed = true;
                 transformedField = {

package/lib/esm/Importer/common/Spreadsheet/transformation/transformators.d.ts

@@ -4,9 +4,15 @@ export type FieldTransformator = (fieldValue: any, transformation?: FieldTransfo
     original: any;
     transformed: any;
 };
+export type DateTimeTransformator = (fieldValue: any, transformation?: FieldTransformation, fieldOptions?: Field, possibleDateFormats?: string[]) => {
+    transformationWasNeeded: boolean;
+    original: any;
+    transformed: any;
+};
 export type FieldTransformations = Partial<{
-    [key: string]: FieldTransformator;
+    [key: string]: FieldTransformator | DateTimeTransformator;
 }>;
+export declare const datesDateTimesAndTimesTransformations: FieldTransformations;
 export declare const fieldTransformations: {
-    [x: string]: FieldTransformator;
+    [x: string]: FieldTransformator | DateTimeTransformator;
 };

package/lib/esm/Importer/common/Spreadsheet/transformation/transformators.js

@@ -9,17 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { DateTime } from "luxon";
-import { datePatterns, dateTimePatterns, timePatterns, } from "../../../../common/datePatterns";
 var isTransformationNeeded = function (fieldValue, transformedValue) { return ({
     transformationWasNeeded: fieldValue !== transformedValue,
     original: fieldValue,
@@ -89,11 +79,9 @@ var stringFieldTransformations = {
         return isTransformationNeeded(fieldValue, transformedValue);
     },
 };
-var parseDate = function (date) {
+var parseDate = function (date, possibleFormats) {
     if (!date)
         return null;
-    var allPatterns = __spreadArray(__spreadArray(__spreadArray([], datePatterns, true), dateTimePatterns, true), timePatterns, true);
-    var possibleFormats = allPatterns.map(function (date) { return date.value; });
     for (var i = 0; i < possibleFormats.length; i++) {
         var format = possibleFormats[i];
         try {
@@ -108,14 +96,14 @@ var parseDate = function (date) {
     }
     return null;
 };
-var datesDateTimesAndTimesTransformations = {
-    autoformat: function (fieldValue, _, fieldOptions) {
+export var datesDateTimesAndTimesTransformations = {
+    autoformat: function (fieldValue, _, fieldOptions, possibleDateFormats) {
         var cleanFieldValue = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.replace(/"/g, "");
         var normalizedFieldValue = cleanFieldValue === null || cleanFieldValue === void 0 ? void 0 : cleanFieldValue.replace(/-/g, "/");
         var isUnixTimestamp = /^\d+$/.test(normalizedFieldValue);
         var luxonDate = isUnixTimestamp
             ? DateTime.fromSeconds(Number(normalizedFieldValue))
-            : parseDate(normalizedFieldValue);
+            : parseDate(normalizedFieldValue, possibleDateFormats);
         var pattern = fieldOptions === null || fieldOptions === void 0 ? void 0 : fieldOptions.pattern;
         var defaultObj = {
             transformationWasNeeded: false,

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;
+};