fuse-importer 0.1.8-testing → 0.2.0-testing

package/lib/esm/Importer/hooks/useSubmitToServer.js

@@ -55,10 +55,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { useState } from "react";
-import { useImporterContext, } from "../contexts/ImporterContextProvider";
 import { isRecordEmpty } from "../../Importer/common/Spreadsheet/common";
 import { sendRecordsToIntegrations } from "../../Importer/common/utils";
 import { getTemplateFields, recordListToDataSet } from "../../Importer/data";
+import { addToast } from "../../common";
+import { useImporterContext, } from "../contexts/ImporterContextProvider";
 var trackImportedRowsCount = function (fuseApi, templateSlug, rowCount) { return __awaiter(void 0, void 0, void 0, function () {
     var error_1, errorMessage;
     var _a, _b;
@@ -82,21 +83,41 @@ var trackImportedRowsCount = function (fuseApi, templateSlug, rowCount) { return
     });
 }); };
 var buildColumnMappingsFromHeaderMatchings = function (templateHeaders, templateHeaderMatchings) {
-    return templateHeaders.map(function (column) {
+    return templateHeaders
+        .filter(function (column) { return column.label && templateHeaderMatchings[column.label]; })
+        .map(function (column) {
         return {
             matched_column_name: templateHeaderMatchings[column.label],
             template_column_name: column.label,
         };
     });
 };
-var saveMappedColumns = function (columnMappings, fuseApi, templateSlug) { return __awaiter(void 0, void 0, void 0, function () {
+var buildValueMappingsFromHeaderValueMatchings = function (enumFieldValueMatchings) {
+    var mappings = Object.values(enumFieldValueMatchings).map(function (column) {
+        var valuesMappings = [];
+        for (var _i = 0, _a = Object.entries(column); _i < _a.length; _i++) {
+            var _b = _a[_i], key = _b[0], value = _b[1];
+            if (!value) {
+                continue;
+            }
+            valuesMappings.push({
+                matched_value: key,
+                template_value: value,
+            });
+        }
+        return valuesMappings;
+    });
+    return mappings.flat();
+};
+var saveMappedColumns = function (columnMappings, valueMappings, fuseApi, templateSlug) { return __awaiter(void 0, void 0, void 0, function () {
     var error_2;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 _a.trys.push([0, 2, , 3]);
                 return [4 /*yield*/, fuseApi.patch("/api/v1/importer/templates/".concat(templateSlug), {
-                        column_mappings_attributes: columnMappings,
+                        column_mappings: columnMappings,
+                        value_mappings: valueMappings,
                     })];
             case 1:
                 _a.sent();
@@ -118,13 +139,36 @@ var filterAndMapWithBackendErrors = function (dataSet, errors) {
         return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { isInvalid: true, backendErrors: errors[rId] }) });
     }, []);
 };
-export var useSubmitToServer = function (setIsTransformTooltipOpened) {
-    var _a = useImporterContext(), templateHeaderMatchings = _a.templateHeaderMatchings, templateHeaders = _a.templateHeaders, integrations = _a.integrations, templateSlug = _a.templateSlug, fuseApi = _a.fuseApi, previewMode = _a.importerOptions.previewMode, onSubmit = _a.onSubmit;
+var checkWrongData = function (dataSet, errors, reviewFields) {
+    var errorsKeys = Object.keys(errors);
+    var highestRowIndex = 0;
+    Object.values(dataSet).forEach(function (record) {
+        highestRowIndex = Math.max(highestRowIndex, record._meta.rowIndex);
+    });
+    var _loop_1 = function (currErrorId) {
+        var allFieldsName = reviewFields.map(function (field) { return field.name; });
+        var columnsOnError = Object.keys(errors[currErrorId]);
+        columnsOnError.forEach(function (column) {
+            if (!allFieldsName.includes(column)) {
+                addToast("Invalid column \"".concat(column, "\""), "error");
+            }
+        });
+        if (+currErrorId > highestRowIndex) {
+            addToast("Invalid row id \"".concat(currErrorId, "\""), "error");
+        }
+    };
+    for (var _i = 0, errorsKeys_1 = errorsKeys; _i < errorsKeys_1.length; _i++) {
+        var currErrorId = errorsKeys_1[_i];
+        _loop_1(currErrorId);
+    }
+};
+export var useSubmitToServer = function (setHasTransformedRecords) {
+    var _a = useImporterContext(), enumFieldValueMatchings = _a.enumFieldValueMatchings, templateHeaderMatchings = _a.templateHeaderMatchings, templateHeaders = _a.templateHeaders, integrations = _a.integrations, templateSlug = _a.templateSlug, fuseApi = _a.fuseApi, previewMode = _a.importerOptions.previewMode, onSubmit = _a.onSubmit;
     var _b = useState(false), isSubmitting = _b[0], setIsSubmitting = _b[1];
     var _c = useState(false), importWasSuccessful = _c[0], setImportWasSuccessful = _c[1];
     var _d = useState(null), appResponse = _d[0], setAppResponse = _d[1];
     var onSubmitToServer = function (dataSet, afterSubmitCallback) { return __awaiter(void 0, void 0, void 0, function () {
-        var dataSetValues, reviewFields_1, validDataSetValues, validDataSetLength, invalidRecords_1, applicationResponse, isAppResponseSuccessful, _a, errors, isDataValid, recordsToDisplayFiltered, invalidDataSet, columnMappings, error_3;
+        var dataSetValues, reviewFields_1, validDataSetValues, validDataSetLength, invalidRecords_1, applicationResponse, isAppResponseSuccessful, _a, errors, isDataValid, recordsToDisplayFiltered, invalidDataSet, columnMappings, valueMappings, error_3;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -146,6 +190,7 @@ export var useSubmitToServer = function (setIsTransformTooltipOpened) {
                     if (!isAppResponseSuccessful) {
                         _a = (applicationResponse !== null && applicationResponse !== void 0 ? applicationResponse : {}).errors, errors = _a === void 0 ? {} : _a;
                         invalidRecords_1 = __spreadArray(__spreadArray([], filterAndMapWithBackendErrors(dataSet, errors), true), invalidRecords_1, true);
+                        checkWrongData(dataSet, errors, reviewFields_1);
                     }
                     isDataValid = invalidRecords_1.length === 0;
                     setImportWasSuccessful(isDataValid && isAppResponseSuccessful);
@@ -158,7 +203,7 @@ export var useSubmitToServer = function (setIsTransformTooltipOpened) {
                         invalidRecords_1 = __spreadArray(__spreadArray([], invalidRecords_1, true), (recordsToDisplayFiltered || []), true);
                     }
                     invalidDataSet = recordListToDataSet(invalidRecords_1, reviewFields_1, false).dataSet;
-                    setIsTransformTooltipOpened(false);
+                    setHasTransformedRecords(false);
                     afterSubmitCallback(invalidDataSet);
                     if (!!previewMode) return [3 /*break*/, 5];
                     return [4 /*yield*/, trackImportedRowsCount(fuseApi, templateSlug, validDataSetLength)];
@@ -168,7 +213,8 @@ export var useSubmitToServer = function (setIsTransformTooltipOpened) {
                 case 3:
                     _b.sent();
                     columnMappings = buildColumnMappingsFromHeaderMatchings(templateHeaders, templateHeaderMatchings);
-                    return [4 /*yield*/, saveMappedColumns(columnMappings, fuseApi, templateSlug)];
+                    valueMappings = buildValueMappingsFromHeaderValueMatchings(enumFieldValueMatchings);
+                    return [4 /*yield*/, saveMappedColumns(columnMappings, valueMappings, fuseApi, templateSlug)];
                 case 4:
                     _b.sent();
                     _b.label = 5;

package/lib/esm/common/CircleSpinner.d.ts

@@ -0,0 +1 @@
+export declare const CircleSpinner: () => JSX.Element;

package/lib/esm/common/CircleSpinner.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+var SpinnerContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  animation: spin 1s linear infinite;\n  background: transparent;\n  border-radius: 50%;\n  height: 24px;\n  overflow: hidden;\n  position: relative;\n  width: 24px;\n  z-index: 0;\n\n  @keyframes spin {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  animation: spin 1s linear infinite;\n  background: transparent;\n  border-radius: 50%;\n  height: 24px;\n  overflow: hidden;\n  position: relative;\n  width: 24px;\n  z-index: 0;\n\n  @keyframes spin {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
+var SpinBlocker = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: black;\n  border-radius: 50%;\n  height: 80%;\n  left: 10%;\n  position: absolute;\n  top: 10%;\n  width: 80%;\n"], ["\n  background: black;\n  border-radius: 50%;\n  height: 80%;\n  left: 10%;\n  position: absolute;\n  top: 10%;\n  width: 80%;\n"])));
+var Spin = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: linear-gradient(\n    to bottom right,\n    rgba(255, 255, 255, 0.85) 50%,\n    rgba(0, 0, 0, 0) 150%\n  );\n  height: 50%;\n  left: 0;\n  position: absolute;\n  top: 50%;\n  width: 50%;\n  z-index: -1;\n"], ["\n  background: linear-gradient(\n    to bottom right,\n    rgba(255, 255, 255, 0.85) 50%,\n    rgba(0, 0, 0, 0) 150%\n  );\n  height: 50%;\n  left: 0;\n  position: absolute;\n  top: 50%;\n  width: 50%;\n  z-index: -1;\n"])));
+export var CircleSpinner = function () {
+    return (_jsxs(SpinnerContainer, { children: [_jsx(SpinBlocker, {}), _jsx(Spin, {})] }));
+};
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/common/FileUploadDropzone/ImporterDropzone.js

@@ -6,12 +6,19 @@ export var useDragAndDrop = function (_a) {
     var onComplete = _a.onComplete, saveFileName = _a.saveFileName, setIsLoading = _a.setIsLoading, validHeadersCount = _a.validHeadersCount;
     var onDrop = function (acceptedFiles) {
         acceptedFiles.forEach(function (file) {
+            if (file.size <= 0) {
+                addToast("Cannot upload an empty file.", "error");
+                return;
+            }
             setIsLoading && setIsLoading(true);
             saveFileName(file.name);
             var reader = new FileReader();
             var isCsvFile = file.type === "text/csv";
             reader.onabort = function () { return console.log("file reading was aborted"); };
-            reader.onerror = function () { return console.log("file reading has failed"); };
+            reader.onerror = function () {
+                addToast("An error occurred while reading the file.", "error");
+                setIsLoading && setIsLoading(false);
+            };
             reader.onload = function (event) {
                 var _a;
                 var results = event.target.result;
@@ -22,31 +29,59 @@ export var useDragAndDrop = function (_a) {
                             onComplete(parserResults.data);
                             setIsLoading && setIsLoading(false);
                         },
+                        error: function (error) {
+                            addToast("An error occurred while parsing the CSV: ".concat(error.message), "error");
+                            setIsLoading && setIsLoading(false);
+                        },
                     });
                     return;
                 }
-                var getDataFromFile = function (fileResults) {
-                    // rounded value to 20MB
-                    var isLargeFile = file.size > 20000000;
-                    var workBook = XLSX.read(fileResults, {
-                        type: "array",
-                        codepage: 65001,
-                        raw: true,
-                        dense: isLargeFile,
-                    });
-                    var workBookName = workBook.SheetNames[0];
-                    var sheet = workBook.Sheets[workBookName];
-                    return XLSX.utils.sheet_to_json(sheet, { header: 1, raw: false });
-                };
-                var fileData = getDataFromFile(results);
-                var headersCount = (_a = fileData[0]) === null || _a === void 0 ? void 0 : _a.length;
-                if (validHeadersCount) {
-                    validHeadersCount(headersCount) && onComplete(fileData);
+                var arr = new Uint8Array(event.target.result).subarray(0, 4);
+                var header = "";
+                for (var i = 0; i < arr.length; i++) {
+                    header += arr[i].toString(16);
                 }
-                else {
-                    onComplete(fileData);
+                // Check the file signature
+                var isExcelFile = header === "504b34" || header === "d0cf11e0"; // .xlsx or .xls
+                if (!isExcelFile) {
+                    addToast("The file is not a valid Excel file.", "error");
+                    setIsLoading && setIsLoading(false);
+                    return;
+                }
+                try {
+                    var getDataFromFile = function (fileResults) {
+                        // rounded value to 20MB
+                        var isLargeFile = file.size > 20000000;
+                        var workBook = XLSX.read(fileResults, {
+                            type: "array",
+                            codepage: 65001,
+                            raw: true,
+                            dense: isLargeFile,
+                        });
+                        var workBookName = workBook.SheetNames[0];
+                        var sheet = workBook.Sheets[workBookName];
+                        return XLSX.utils.sheet_to_json(sheet, { header: 1, raw: false });
+                    };
+                    var fileData = getDataFromFile(results);
+                    if (!fileData.length) {
+                        addToast("The file appears to be empty or cannot be parsed.", "error");
+                        setIsLoading && setIsLoading(false);
+                        return;
+                    }
+                    var headersCount = (_a = fileData[0]) === null || _a === void 0 ? void 0 : _a.length;
+                    if (validHeadersCount && !validHeadersCount(headersCount)) {
+                        addToast("Invalid header count in file.", "error");
+                        setIsLoading && setIsLoading(false);
+                    }
+                    else {
+                        onComplete(fileData);
+                        setIsLoading && setIsLoading(false);
+                    }
+                }
+                catch (error) {
+                    addToast("An error occurred while processing the file: ".concat(error.message), "error");
+                    setIsLoading && setIsLoading(false);
                 }
-                setIsLoading && setIsLoading(false);
             };
             if (isCsvFile) {
                 reader.readAsText(file);

package/lib/esm/common/Table/TableActions/CustomActions/CustomActions.js

@@ -105,30 +105,35 @@ export var CustomActions = function () {
     var handleCustomAction = function (actionKey) { return __awaiter(void 0, void 0, void 0, function () {
         var recordsToRunAction, action, processRecordsInBatches, toastMessage;
         return __generator(this, function (_a) {
-            recordsToRunAction = selectedRows.map(function (recordId) {
-                return getRecord(recordId);
-            });
-            action = customActions.find(function (action) { return action.name === actionKey; });
-            if (!action || Object.keys(action).length === 0) {
-                addToast(t("table_actions.custom_actions.general_error_toast"), "error");
-                return [2 /*return*/];
-            }
-            processRecordsInBatches = useBatchProcessing().processRecordsInBatches;
-            processRecordsInBatches(recordsToRunAction, function (batch) { return __awaiter(void 0, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, processBatch(batch, action)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
+            switch (_a.label) {
+                case 0:
+                    recordsToRunAction = selectedRows.map(function (recordId) {
+                        return getRecord(recordId);
+                    });
+                    action = customActions.find(function (action) { return action.name === actionKey; });
+                    if (!action || Object.keys(action).length === 0) {
+                        addToast(t("table_actions.custom_actions.general_error_toast"), "error");
+                        return [2 /*return*/];
                     }
-                });
-            }); });
-            toastMessage = t("table_actions.custom_actions.success_toast", {
-                actionName: action.name,
-            });
-            addToast(toastMessage, "success");
-            return [2 /*return*/];
+                    processRecordsInBatches = useBatchProcessing().processRecordsInBatches;
+                    return [4 /*yield*/, processRecordsInBatches(recordsToRunAction, function (batch) { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, processBatch(batch, action)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                case 1:
+                    _a.sent();
+                    toastMessage = t("table_actions.custom_actions.success_toast", {
+                        actionName: action.name,
+                    });
+                    addToast(toastMessage, "success");
+                    return [2 /*return*/];
+            }
         });
     }); };
     var onSelect = function (value) {

package/lib/esm/common/Table/TableActions/FilterByErrors/FilterByErrors.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { addToast } from "../../../../common/Toast";
 import { useReviewContext, useSpreadsheetContext } from "../../../../Importer";
 import { useFilteredDataContext } from "../../../../Importer/common/Spreadsheet/FilteredDataContextProvider";
 import { useValidationContext } from "../../../../Importer/common/Spreadsheet/ValidationContextProvider";
+import { addToast } from "../../../../common/Toast";
 import { useEventManagerContext } from "../../../EventManagerContextProvider";
 import * as S from "./FilterByErrors.styles";
 export var FilterByErrors = function () {
@@ -12,7 +12,7 @@ export var FilterByErrors = function () {
     var _c = useFilteredDataContext(), spreadsheetFilter = _c.spreadsheetFilter, resetSpreadsheetFilter = _c.resetSpreadsheetFilter, filterRecordsByFieldErrors = _c.filterRecordsByFieldErrors;
     var _d = useEventManagerContext(), on = _d.on, off = _d.off, EVENTS = _d.EVENTS;
     var fields = useSpreadsheetContext().fields;
-    var isTransformTooltipOpened = useReviewContext().isTransformTooltipOpened;
+    var hasTransformedRecords = useReviewContext().hasTransformedRecords;
     var columnsWithErrorCounts = useValidationContext().columnsWithErrorCounts;
     var t = useTranslation("review").t;
     var _e = useState([]), errorArray = _e[0], setErrorArray = _e[1];
@@ -72,6 +72,6 @@ export var FilterByErrors = function () {
         : isMenuOpened
             ? search_or_select
             : prefix;
-    var isDisabled = errorArray.length === 0 || isTransformTooltipOpened;
+    var isDisabled = errorArray.length === 0 || hasTransformedRecords;
     return (_jsx(S.StyledAutocomplete, { placement: "bottom", placeholder: inputText, onToggle: function (v) { return !isDisabled && setIsMenuOpened(v); }, onChange: onChange, value: selectedErrorToFilter, options: errorArray, isDisabled: isDisabled, isInputDisabled: isDisabled, inputWidth: inputWidth, "data-testid": "ta-filter-by-errors", prefix: inputText }));
 };

package/lib/esm/common/Table/TableActions/RowFilters.js

@@ -45,7 +45,7 @@ export var RowFilters = function () {
     var _a = useFilteredDataContext(), spreadsheetFilter = _a.spreadsheetFilter, filterRecordsByRowType = _a.filterRecordsByRowType;
     var _b = useDuplicateDataContext(), duplicateRecordIds = _b.duplicateRecordIds, calculateDuplicateRecords = _b.calculateDuplicateRecords;
     var invalidRowsCountRef = useValidationContext().invalidRowsCountRef;
-    var isTransformTooltipOpened = useReviewContext().isTransformTooltipOpened;
+    var hasTransformedRecords = useReviewContext().hasTransformedRecords;
     var _c = useState(invalidRowsCountRef.current), invalidRowsCount = _c[0], setInvalidRowsCount = _c[1];
     var _d = useDataSetContext(), dataSetLength = _d.dataSetLength, emptyRecordIds = _d.emptyRecordIds;
     var _e = useEventManagerContext(), on = _e.on, off = _e.off, EVENTS = _e.EVENTS;
@@ -89,6 +89,6 @@ export var RowFilters = function () {
         }
         filterRecordsByRowType("invalid");
     };
-    return (_jsx(Wrapper, __assign({ isDisabled: isTransformTooltipOpened }, { children: _jsxs(Container, { children: [_jsx(Filter, { isSelected: spreadsheetFilter.byRow === "all", label: all_rows, count: recordsWithValuesCount, onClick: function () { return onAllSelected(); } }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "invalid", label: invalid_rows, count: invalidRowsCount, onClick: function () { return onInvalidSelected(); } }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "duplicates", label: duplicates, count: duplicateRecordIds.size, onClick: function () { return onDuplicatesSelected(); } })] }) })));
+    return (_jsx(Wrapper, __assign({ isDisabled: hasTransformedRecords }, { children: _jsxs(Container, { children: [_jsx(Filter, { isSelected: spreadsheetFilter.byRow === "all", label: all_rows, count: recordsWithValuesCount, onClick: function () { return onAllSelected(); }, "data-test-id": "all_rows_filter" }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "invalid", label: invalid_rows, count: invalidRowsCount, onClick: function () { return onInvalidSelected(); }, "data-test-id": "invalid_filter" }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "duplicates", label: duplicates, count: duplicateRecordIds.size, onClick: function () { return onDuplicatesSelected(); }, "data-test-id": "duplicates_filter" })] }) })));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/lib/esm/common/Table/TableActions/SearchRows.js

@@ -14,18 +14,19 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
-import { useDebounce } from "../../../hooks";
 import { useReviewContext } from "../../../Importer";
-import { colors } from "../../../styled/theme/colorPalette";
-import { textStyles } from "../../../styled/theme/textStyles";
-import { SearchIcon, ReplaceIcon } from "./icons";
-import { TooltipProvider } from "../../../common/TooltipProvider";
-import { useTranslation } from "react-i18next";
-import { Div } from "../../../styled";
 import { useFilteredDataContext } from "../../../Importer/common/Spreadsheet/FilteredDataContextProvider";
 import { FindAndReplaceModal } from "../../../Importer/common/Spreadsheet/components/FindAndReplace";
+import { TooltipProvider } from "../../../common/TooltipProvider";
+import { useDebounce } from "../../../hooks";
+import { Div } from "../../../styled";
+import { colors } from "../../../styled/theme/colorPalette";
+import { textStyles } from "../../../styled/theme/textStyles";
+import { ReplaceIcon, SearchIcon } from "./icons";
+import { useSearchContext } from "../../../Importer/common/Spreadsheet/SearchContextProvider";
 var Wrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  position: relative;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"], ["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  position: relative;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"])), function (_a) {
     var isOpen = _a.isOpen;
     return (isOpen ? colors.orange50 : "none");
@@ -43,10 +44,8 @@ var Input = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateO
 var SearchInput = function (_a) {
     var testId = _a.testId, value = _a.value, onChange = _a.onChange, isDisabled = _a.isDisabled;
     var _b = useDebounce(value, onChange, 300), _value = _b._value, set_Value = _b.set_Value;
-    var inputRef = useRef(null);
     var filteredDataIds = useFilteredDataContext().filteredDataIds;
-    var _c = useState(false), findAndReplaceModalOpen = _c[0], setFindAndReplaceModalOpen = _c[1];
-    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    var _c = useSearchContext(), findAndReplaceModalOpen = _c.findAndReplaceModalOpen, setFindAndReplaceModalOpen = _c.setFindAndReplaceModalOpen, openSearchInput = _c.openSearchInput, closeSearchInput = _c.closeSearchInput, searchInputRef = _c.searchInputRef, isOpen = _c.isOpen;
     var actionsRef = useRef();
     var t = useTranslation("review").t;
     var handleInputChange = function (_a) {
@@ -55,29 +54,22 @@ var SearchInput = function (_a) {
     };
     var handleInputOnBlur = function (e) {
         if (!_value && e.relatedTarget !== actionsRef.current) {
-            setIsOpen(false);
-        }
-    };
-    var handleWrapperClick = function () {
-        var _a;
-        if (!isOpen) {
-            setIsOpen(true);
-            if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }
+            closeSearchInput();
         }
     };
-    return (_jsxs(TooltipProvider, __assign({ tooltip: !isOpen && !isDisabled ? t("table_actions.search_rows.tooltip") : "", placement: "right", flip: false, centered: true, w: "auto", "data-testid": testId }, { children: [_jsxs(Wrapper, __assign({ isOpen: isOpen, onClick: function () { return !isDisabled && handleWrapperClick(); }, disabledWhen: isDisabled }, { children: [_jsx(IconWrapper, { children: _jsx(SearchIcon, {}) }), _jsx(Input, { isOpen: isOpen, ref: inputRef, value: _value, onChange: handleInputChange, onBlur: handleInputOnBlur, type: "text", placeholder: t("table_actions.search_rows.placeholder") }), _jsxs(ActionsWrapper, __assign({ "data-cy": "open-find-replace", ref: actionsRef, onClick: function () { return setFindAndReplaceModalOpen(true); }, tabIndex: 0 }, { children: [_jsx(ResultsText, { children: t("table_actions.search_rows.number_of_results", {
-                                    length: value ? filteredDataIds.length : 0,
-                                }) }), _jsx(IconWrapper, { children: _jsx(ReplaceIcon, {}) })] }))] })), findAndReplaceModalOpen && (_jsx(FindAndReplaceModal, { initialText: value, onClose: function () { return setFindAndReplaceModalOpen(false); } }))] })));
+    return (_jsxs(Div, { children: [_jsx(TooltipProvider, __assign({ tooltip: !isOpen && !isDisabled && !findAndReplaceModalOpen
+                    ? t("table_actions.search_rows.tooltip")
+                    : "", placement: "right", flip: false, centered: true, w: "auto", "data-testid": testId }, { children: _jsxs(Wrapper, __assign({ isOpen: isOpen, onClick: function () { return !isDisabled && openSearchInput(); }, disabledWhen: isDisabled }, { children: [_jsx(IconWrapper, { children: _jsx(SearchIcon, {}) }), _jsx(Input, { isOpen: isOpen, ref: searchInputRef, value: _value, onChange: handleInputChange, onBlur: handleInputOnBlur, type: "text", placeholder: t("table_actions.search_rows.placeholder") }), _jsxs(ActionsWrapper, __assign({ "data-cy": "open-find-replace", ref: actionsRef, onClick: function () { return setFindAndReplaceModalOpen(true); }, tabIndex: 0 }, { children: [_jsx(ResultsText, { children: t("table_actions.search_rows.number_of_results", {
+                                        length: value ? filteredDataIds.length : 0,
+                                    }) }), _jsx(IconWrapper, { children: _jsx(ReplaceIcon, {}) })] }))] })) })), _jsx(Div, { children: findAndReplaceModalOpen && (_jsx(FindAndReplaceModal, { initialText: value, onClose: function () { return setFindAndReplaceModalOpen(false); } })) })] }));
 };
 export var SearchRows = function (_a) {
     var _b = _a.testId, testId = _b === void 0 ? "ta-search-rows" : _b;
     var _c = useFilteredDataContext(), filteredInputValue = _c.filteredInputValue, setFilteredInputValue = _c.setFilteredInputValue;
-    var isTransformTooltipOpened = useReviewContext().isTransformTooltipOpened;
+    var hasTransformedRecords = useReviewContext().hasTransformedRecords;
     var handleChangeInputValue = function (value) {
         setFilteredInputValue(value);
     };
-    return (_jsx(_Fragment, { children: _jsx(SearchInput, { testId: testId, value: filteredInputValue, onChange: handleChangeInputValue, isDisabled: isTransformTooltipOpened }) }));
+    return (_jsx(_Fragment, { children: _jsx(SearchInput, { testId: testId, value: filteredInputValue, onChange: handleChangeInputValue, isDisabled: hasTransformedRecords }) }));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/lib/esm/common/Table/TableActions/TableActions.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useReviewContext } from "../../../Importer";
-import { defaultTableActionsHeightPx } from "./common";
+import { useValidationContext } from "../../../Importer/common/Spreadsheet/ValidationContextProvider";
 import { CustomActions } from "./CustomActions";
 import { DeleteSelectedRows } from "./DeleteSelectedRows";
 import { ExportData } from "./ExportData";
@@ -32,11 +32,14 @@ import { SearchRows } from "./SearchRows";
 import * as S from "./TableActions.styles";
 import { TransformedRecordsCount } from "./TransformedRecordsCount";
 import ValidationProgress from "./ValidationProgress";
+import { defaultTableActionsHeightPx } from "./common";
 export var TableActions = function (_a) {
     var _b = _a.tableActionsHeight, tableActionsHeight = _b === void 0 ? defaultTableActionsHeightPx : _b, props = __rest(_a, ["tableActionsHeight"]);
-    var _c = useReviewContext(), isTransformTooltipOpened = _c.isTransformTooltipOpened, setIsTransformTooltipOpened = _c.setIsTransformTooltipOpened;
+    var _c = useReviewContext(), hasTransformedRecords = _c.hasTransformedRecords, setHasTransformedRecords = _c.setHasTransformedRecords;
+    var isValidationCompleted = useValidationContext().isValidationCompleted;
     var onCloseTransformsTooltip = function () {
-        setIsTransformTooltipOpened(false);
+        setHasTransformedRecords(false);
     };
-    return (_jsxs(S.TableActionsContainer, __assign({ height: tableActionsHeight }, props, { children: [_jsxs(S.TableActionsContent, { children: [_jsx(SearchRows, {}), _jsx(RowFilters, {}), _jsx(FilterByErrors, {}), _jsxs(S.ButtonActionsContainer, { children: [_jsx(DeleteSelectedRows, {}), _jsx(ExportData, {}), _jsx(CustomActions, {})] })] }), _jsxs(S.TableActionsInformations, { children: [_jsx(ValidationProgress, {}), isTransformTooltipOpened && (_jsx(TransformedRecordsCount, { onClose: onCloseTransformsTooltip }))] })] })));
+    var shouldShowTransformedCount = hasTransformedRecords && isValidationCompleted;
+    return (_jsxs(S.TableActionsContainer, __assign({ height: tableActionsHeight }, props, { children: [_jsxs(S.TableActionsContent, { children: [_jsx(SearchRows, {}), _jsx(RowFilters, {}), _jsx(FilterByErrors, {}), _jsxs(S.ButtonActionsContainer, { children: [_jsx(DeleteSelectedRows, {}), _jsx(ExportData, {}), _jsx(CustomActions, {})] })] }), _jsxs(S.TableActionsInformations, { children: [_jsx(ValidationProgress, {}), shouldShowTransformedCount && (_jsx(TransformedRecordsCount, { onClose: onCloseTransformsTooltip }))] })] })));
 };

package/lib/esm/common/Table/TableActions/TableActions.styles.js

@@ -13,6 +13,6 @@ export var TableActionsContainer = styled(Div)(templateObject_1 || (templateObje
 });
 export var ButtonActionsContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n"])));
 export var TableActionsContent = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n"])));
-export var TableActionsInformations = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  position: relative;\n  z-index: 101;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  position: relative;\n  z-index: 101;\n"])));
+export var TableActionsInformations = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  position: relative;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  position: relative;\n"])));
 export var ActionButton = styled.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background: transparent;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 36px;\n  justify-content: center;\n  padding: 0px;\n  width: 36px;\n\n  :disabled {\n    opacity: 0.6;\n\n    :hover {\n      background-color: transparent !important;\n      cursor: not-allowed;\n    }\n  }\n"], ["\n  align-items: center;\n  background: transparent;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 36px;\n  justify-content: center;\n  padding: 0px;\n  width: 36px;\n\n  :disabled {\n    opacity: 0.6;\n\n    :hover {\n      background-color: transparent !important;\n      cursor: not-allowed;\n    }\n  }\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/esm/common/Table/TableActions/TransformedRecordsCount.js

@@ -17,11 +17,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { Button } from "../../../common/buttons";
 import { useSpreadsheetContext } from "../../../Importer";
 import { useDataSetContext } from "../../../Importer/common/Spreadsheet/DataSetContextProvider";
 import { useFilteredDataContext } from "../../../Importer/common/Spreadsheet/FilteredDataContextProvider";
-import { colors, Div } from "../../../styled";
+import { Button } from "../../../common/buttons";
+import { Div, colors } from "../../../styled";
 import { truncateString } from "../../../utils";
 import { CheckIcon } from "./icons";
 var formatToLocaleString = function (number) {
@@ -30,7 +30,7 @@ var formatToLocaleString = function (number) {
         maximumFractionDigits: 0,
     });
 };
-var RecordsCountContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 2;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  position: relative;\n  z-index: 2;\n\n  * {\n    box-sizing: border-box;\n  }\n"])));
+var RecordsCountContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  position: relative;\n\n  * {\n    box-sizing: border-box;\n  }\n"])));
 var Counter = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-radius: 35px;\n  display: flex;\n  padding: 0px 18px;\n  position: relative;\n  user-select: none;\n  z-index: 101;\n"], ["\n  align-items: center;\n  background: ", ";\n  border-radius: 35px;\n  display: flex;\n  padding: 0px 18px;\n  position: relative;\n  user-select: none;\n  z-index: 101;\n"])), colors.blue100);
 var TooltipContainer = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 8px;\n  box-shadow: 0px 3.53px 63.58px 0px #b7a6a640;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  padding: 16px 32px 24px 24px;\n  position: absolute;\n  right: 0px;\n  top: 66px;\n  width: clamp(150px, 379px, 379px);\n  z-index: 101;\n\n  &::before {\n    border-color: transparent transparent #ffffff transparent;\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 0 14.5px 24px 14.5px;\n    content: \"\";\n    height: 0;\n    position: absolute;\n    right: -4px;\n    top: -6px;\n    transform: rotate(120deg);\n    width: 0;\n  }\n"], ["\n  background: ", ";\n  border-radius: 8px;\n  box-shadow: 0px 3.53px 63.58px 0px #b7a6a640;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  padding: 16px 32px 24px 24px;\n  position: absolute;\n  right: 0px;\n  top: 66px;\n  width: clamp(150px, 379px, 379px);\n  z-index: 101;\n\n  &::before {\n    border-color: transparent transparent #ffffff transparent;\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 0 14.5px 24px 14.5px;\n    content: \"\";\n    height: 0;\n    position: absolute;\n    right: -4px;\n    top: -6px;\n    transform: rotate(120deg);\n    width: 0;\n  }\n"])), colors.white);
 var ExampleCode = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  display: flex;\n  justify-content: space-between;\n  padding: 4px;\n"], ["\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  display: flex;\n  justify-content: space-between;\n  padding: 4px;\n"])), colors.blue100);

package/lib/esm/common/Table/TableView/TableRows/TableRow.js

@@ -51,7 +51,7 @@ export var TableRow = function (_a) {
             var isLastColumn = indexJ === columns.length - 1;
             return (_jsx(Cell, __assign({ row: row, onClick: onRowClick && !column.preventRowClick
                     ? function () { return onRowClick(row); }
-                    : null, isLast: isLastColumn, className: isLastColumn ? "last-column" : "", w: columnWidthPercentage }, { children: Content ? (_jsx(Content, __assign({}, row, { columnWidth: columnWidthPercentage, rowIndex: indexI }))) : (_jsx(Div, __assign({ truncateText: true }, { children: row[column.dataAccessor] || "-" }))) }), resolvedKey));
+                    : null, isLast: isLastColumn, className: isLastColumn ? "last-column" : "", w: columnWidthPercentage }, { children: Content ? (_jsx(Content, __assign({}, row, { columnWidth: columnWidthPercentage, colIndex: indexJ, rowIndex: indexI }))) : (_jsx(Div, __assign({ truncateText: true }, { children: row[column.dataAccessor] || "-" }))) }), resolvedKey));
         }) })));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/common/Table/TableView/index.d.ts

@@ -8,4 +8,4 @@ type TableViewWrapperProps = {
     checkboxColumnWidth?: number;
 };
 export declare const TableViewWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableViewWrapperProps, never>;
-export declare const TableView: React.MemoExoticComponent<({ data, dataRefIds, columns, pageSize, onRowClick, sortBy, isLoading, setSortBy, rowWidthScalingFactor, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, isDraggable, checkboxColumnWidth, isFiltering, ...props }: TableViewProps) => JSX.Element>;
+export declare const TableView: React.MemoExoticComponent<({ data, dataRefIds, columns, pageSize, onRowClick, sortBy, isLoading, setSortBy, rowWidthScalingFactor, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, isDraggable, checkboxColumnWidth, isFiltering, shouldHideTable, ...props }: TableViewProps) => JSX.Element>;

package/lib/esm/common/Table/TableView/index.js

@@ -66,7 +66,7 @@ var buildGridStyles = function (rowWidthScalingFactor) {
     return gridStyles;
 };
 export var TableView = React.memo(function (_a) {
-    var _b = _a.data, data = _b === void 0 ? null : _b, _c = _a.dataRefIds, dataRefIds = _c === void 0 ? null : _c, columns = _a.columns, pageSize = _a.pageSize, _d = _a.onRowClick, onRowClick = _d === void 0 ? null : _d, _e = _a.sortBy, sortBy = _e === void 0 ? { field: null, direction: null } : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.setSortBy, setSortBy = _g === void 0 ? null : _g, _h = _a.rowWidthScalingFactor, rowWidthScalingFactor = _h === void 0 ? 1 : _h, _j = _a.tableHeadersHeight, tableHeadersHeight = _j === void 0 ? defaultTableHeaderHeightPx : _j, _k = _a.rowHeight, rowHeight = _k === void 0 ? defaultTableRowHeightPx : _k, _l = _a.h, h = _l === void 0 ? 500 : _l, _m = _a.onTableScroll, onTableScroll = _m === void 0 ? null : _m, _o = _a.getItemKey, getItemKey = _o === void 0 ? null : _o, _p = _a.isDraggable, isDraggable = _p === void 0 ? false : _p, checkboxColumnWidth = _a.checkboxColumnWidth, _q = _a.isFiltering, isFiltering = _q === void 0 ? false : _q, props = __rest(_a, ["data", "dataRefIds", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "setSortBy", "rowWidthScalingFactor", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "isDraggable", "checkboxColumnWidth", "isFiltering"]);
+    var _b = _a.data, data = _b === void 0 ? null : _b, _c = _a.dataRefIds, dataRefIds = _c === void 0 ? null : _c, columns = _a.columns, pageSize = _a.pageSize, _d = _a.onRowClick, onRowClick = _d === void 0 ? null : _d, _e = _a.sortBy, sortBy = _e === void 0 ? { field: null, direction: null } : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.setSortBy, setSortBy = _g === void 0 ? null : _g, _h = _a.rowWidthScalingFactor, rowWidthScalingFactor = _h === void 0 ? 1 : _h, _j = _a.tableHeadersHeight, tableHeadersHeight = _j === void 0 ? defaultTableHeaderHeightPx : _j, _k = _a.rowHeight, rowHeight = _k === void 0 ? defaultTableRowHeightPx : _k, _l = _a.h, h = _l === void 0 ? 500 : _l, _m = _a.onTableScroll, onTableScroll = _m === void 0 ? null : _m, _o = _a.getItemKey, getItemKey = _o === void 0 ? null : _o, _p = _a.isDraggable, isDraggable = _p === void 0 ? false : _p, checkboxColumnWidth = _a.checkboxColumnWidth, _q = _a.isFiltering, isFiltering = _q === void 0 ? false : _q, _r = _a.shouldHideTable, shouldHideTable = _r === void 0 ? false : _r, props = __rest(_a, ["data", "dataRefIds", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "setSortBy", "rowWidthScalingFactor", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "isDraggable", "checkboxColumnWidth", "isFiltering", "shouldHideTable"]);
     var headerContainerRef = useRef();
     var rowCount = dataRefIds ? dataRefIds.ids.length : data.length;
     var onScroll = function (_a) {
@@ -106,7 +106,7 @@ export var TableView = React.memo(function (_a) {
                         width: autosizerWidth,
                         columnCount: 1,
                         onScroll: onScroll,
-                        columnWidth: rowWidth,
+                        columnWidth: shouldHideTable ? 0 : rowWidth,
                         height: autosizerHeight - tableHeadersHeight,
                         rowHeight: rowHeight,
                         rowCount: rowCount,

package/lib/esm/common/Table/TableView/types.d.ts

@@ -32,4 +32,5 @@ export type TableViewProps = {
     isDraggable?: boolean;
     checkboxColumnWidth?: number;
     isFiltering?: boolean;
+    shouldHideTable?: boolean;
 } & DivCSSProps;

package/lib/esm/common/Toast.d.ts

@@ -1,9 +1,12 @@
+import { CSSProperties } from "react";
 import { ToastOptions } from "react-hot-toast";
 type ToastProps = {
     zIndex?: number;
+    toastStyle?: CSSProperties;
 };
 type ToastTypes = keyof typeof toastTypeStyles;
 export declare const addToast: (msg: JSX.Element | string, type?: ToastTypes, toastOptions?: ToastOptions) => void;
+export declare const addLoadingToast: (msg: JSX.Element | string, helperMsg: JSX.Element | string, toastOptions?: ToastOptions, minW?: number) => void;
 declare const toastTypeStyles: {
     error: {
         color: string;
@@ -30,6 +33,11 @@ declare const toastTypeStyles: {
         backgroundColor: string;
         icon: JSX.Element;
     };
+    loadingNotification: {
+        color: string;
+        backgroundColor: string;
+        icon: JSX.Element;
+    };
 };
-declare const Toast: ({ zIndex }: ToastProps) => JSX.Element;
+declare const Toast: ({ zIndex, toastStyle }: ToastProps) => JSX.Element;
 export { Toast };