fuse-importer 0.25.9 → 0.26.0

package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcher/index.js

@@ -42,7 +42,17 @@ export var EnumFieldMatcher = function (_a) {
         index: index,
         isMatched: !!enumFieldValueMatching[uploadedDataValue],
     }); })
-        .sort(function (a, b) { return (b.isMatched ? 1 : -1); }));
+        .sort(function (a, b) {
+        if (a.isMatched === b.isMatched) {
+            return a.index - b.index;
+        }
+        else if (a.isMatched) {
+            return -1;
+        }
+        else {
+            return 1;
+        }
+    }));
     //sort data based on automatched items
     var sortedData = dataSortingOrderRef.current.map(function (sorting) { return data[sorting.index]; });
     var tableRowHeight = 100;

package/lib/esm/Importer/Review/ReviewWithContext.js

@@ -14,23 +14,19 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useImporterContext } from "../contexts/ImporterContextProvider";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
 import { Div } from "../../styled/utils";
 import Spreadsheet from "../common/Spreadsheet";
-import { getSpreadsheetRowWidth } from "../common/utils";
+import { useImporterContext } from "../contexts/ImporterContextProvider";
 import { AppResponseModal } from "./AppResponseModal";
 import { useReviewContext } from "./ReviewContextProvider";
-import styled from "styled-components";
-import { useTranslation } from "react-i18next";
-import useWindowDimensions from "../../utils/hooks/useWindowSize";
 var TitleContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var ReviewWithContext = function () {
     var _a = useReviewContext(), fields = _a.reviewFields, initialDataSet = _a.reviewInitialDataSet, options = _a.options, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged;
-    var isOnSmallScreens = useWindowDimensions().isOnSmallScreens;
     var _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows, isUsingManualImport = _b.isUsingManualImport;
     var t = useTranslation("review").t;
-    var rowWidth = getSpreadsheetRowWidth(fields, isOnSmallScreens ? 3 : 6);
-    var spreadsheetUI = initialDataSet && (_jsx(Spreadsheet, { options: __assign(__assign({}, options), { showCheckboxColumn: true }), selectedRows: selectedRows, setSelectedRows: setSelectedRows, initialDataSet: initialDataSet, fields: fields, rowWidth: rowWidth, onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord, onValidationStateChanged: onValidationStateChanged }));
+    var spreadsheetUI = initialDataSet && (_jsx(Spreadsheet, { options: __assign(__assign({}, options), { showCheckboxColumn: true }), selectedRows: selectedRows, setSelectedRows: setSelectedRows, initialDataSet: initialDataSet, fields: fields, onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord, onValidationStateChanged: onValidationStateChanged }));
     return (_jsxs(Div, __assign({ centered: true, flexColumn: true, h100: true }, { children: [_jsx(AppResponseModal, {}), _jsxs(Div, __assign({ w100: true, h100: true, flexColumn: true }, { children: [_jsx(TitleContainer, __assign({ flexColumn: true, ml: 32 }, { children: _jsx(Div, __assign({ h2: true, mt: 40, mb: 40 }, { children: t(isUsingManualImport.current ? "manual_importer_title" : "title") })) })), _jsx(Div, __assign({ h100: true, w100: true, justifyCenter: true }, { children: spreadsheetUI }))] }))] })));
 };
 export default ReviewWithContext;

package/lib/esm/Importer/Uploader/HeadersPreview.js

@@ -14,24 +14,20 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
 import { Div } from "../../styled/utils";
-import Spreadsheet from "../common/Spreadsheet";
-import { getSpreadsheetRowWidth } from "../common/utils";
 import { useReviewContext } from "../Review/ReviewContextProvider";
-import { HeaderButtons } from "./HeaderButtons";
+import Spreadsheet from "../common/Spreadsheet";
 import { useImporterContext } from "../contexts/ImporterContextProvider";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import useWindowDimensions from "../../utils/hooks/useWindowSize";
+import { HeaderButtons } from "./HeaderButtons";
 var HeaderContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: 32px;\n\n  @media (max-width: 1050px) {\n    margin-left: 0px;\n\n    > div:first-of-type {\n      text-align: center;\n    }\n\n    div:last-of-type {\n      margin-left: 0px;\n    }\n  }\n"], ["\n  margin-left: 32px;\n\n  @media (max-width: 1050px) {\n    margin-left: 0px;\n\n    > div:first-of-type {\n      text-align: center;\n    }\n\n    div:last-of-type {\n      margin-left: 0px;\n    }\n  }\n"])));
 var DescriptionAndButtons = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  @media (max-width: 1050px) {\n    flex-direction: column;\n    gap: 16px;\n  }\n"], ["\n  @media (max-width: 1050px) {\n    flex-direction: column;\n    gap: 16px;\n  }\n"])));
 var HeadersPreview = function () {
     var _a = useReviewContext(), fields = _a.previewFields, initialDataSet = _a.previewInitialDataSet;
-    var isOnSmallScreens = useWindowDimensions().isOnSmallScreens;
     var t = useTranslation("upload").t;
     var _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows;
-    var rowWidth = getSpreadsheetRowWidth(fields, isOnSmallScreens ? 3 : 6);
-    return (_jsxs(Div, __assign({ flexColumn: true, h100: true }, { children: [_jsxs(HeaderContainer, { children: [_jsx(Div, __assign({ h2: true, mt: 40, mb: 16 }, { children: t("headers_preview.title") })), _jsxs(DescriptionAndButtons, __assign({ body1: true, mb: 24, alignCenter: true }, { children: [t("headers_preview.description"), _jsx(HeaderButtons, {})] }))] }), _jsx(Div, __assign({ w100: true, h100: true, justifyCenter: true }, { children: initialDataSet && (_jsx(Spreadsheet, { rowWidth: rowWidth, isReadOnly: true, initialDataSet: initialDataSet, fields: fields, highlightFirstRow: true, options: {
+    return (_jsxs(Div, __assign({ flexColumn: true, h100: true }, { children: [_jsxs(HeaderContainer, { children: [_jsx(Div, __assign({ h2: true, mt: 40, mb: 16 }, { children: t("headers_preview.title") })), _jsxs(DescriptionAndButtons, __assign({ body1: true, mb: 24, alignCenter: true }, { children: [t("headers_preview.description"), _jsx(HeaderButtons, {})] }))] }), _jsx(Div, __assign({ w100: true, h100: true, justifyCenter: true }, { children: initialDataSet && (_jsx(Spreadsheet, { isReadOnly: true, initialDataSet: initialDataSet, fields: fields, highlightFirstRow: true, options: {
                         showCheckboxColumn: true,
                         firstRowIsHeader: true,
                     }, selectedRows: selectedRows, setSelectedRows: setSelectedRows })) }))] })));

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

@@ -5,7 +5,6 @@ import { ValidationState } from "./hooks";
 export type OnDataSetChanged = (dataSet: RecordDataSet) => void;
 export type OnValidationStateChanged = (state: ValidationState) => void;
 type State = {
-    rowWidth?: number;
     data: Record[];
     fields: Field[];
     isLoading: boolean;
@@ -24,13 +23,14 @@ type State = {
     lastClickedIndexRef: React.MutableRefObject<number | null>;
     filteredInputValue: string;
     setFilteredInputValue: React.Dispatch<React.SetStateAction<string>>;
+    selectedErrorToFilter: string;
+    setSelectedErrorToFilter: React.Dispatch<React.SetStateAction<string>>;
     addNewRowsToSpreadsheet: () => void;
     checkboxColumnWidth: number;
     isFiltering: boolean;
 } & ValidationState;
 type Props = {
     initialDataSet: RecordDataSet;
-    rowWidth?: number;
     isReadOnly?: boolean;
     children: JSX.Element;
     fields: Field[];
@@ -42,6 +42,6 @@ type Props = {
     selectedRows: string[];
     setSelectedRows: React.Dispatch<React.SetStateAction<string[]>>;
 };
-export declare const SpreadsheetContextProvider: ({ initialDataSet, rowWidth, fields, options, isReadOnly, highlightFirstRow, children, onValidateRecord, onDataSetChanged, onValidationStateChanged, selectedRows, setSelectedRows, }: Props) => JSX.Element;
+export declare const SpreadsheetContextProvider: ({ initialDataSet, fields, options, isReadOnly, highlightFirstRow, children, onValidateRecord, onDataSetChanged, onValidationStateChanged, selectedRows, setSelectedRows, }: Props) => JSX.Element;
 export declare const useSpreadsheetContext: () => State;
 export {};

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

@@ -23,16 +23,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { get } from "lodash";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
-import { useValidationState } from "./hooks";
 import { addMeta } from "../../../Importer/data";
+import { useValidationState } from "./hooks";
 var SpreadsheetContext = createContext({});
 export var SpreadsheetContextProvider = function (_a) {
-    var initialDataSet = _a.initialDataSet, _b = _a.rowWidth, rowWidth = _b === void 0 ? 1 : _b, fields = _a.fields, options = _a.options, isReadOnly = _a.isReadOnly, highlightFirstRow = _a.highlightFirstRow, children = _a.children, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows;
-    var _c = useState(initialDataSet), dataSet = _c[0], setDataSet = _c[1];
-    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
-    var _e = useState(null), sortByFieldErrors = _e[0], setSortByFieldErrors = _e[1];
-    var _f = useState(null), sortByFieldWarnings = _f[0], setSortByFieldWarnings = _f[1];
-    var _g = useState(""), filteredInputValue = _g[0], setFilteredInputValue = _g[1];
+    var initialDataSet = _a.initialDataSet, fields = _a.fields, options = _a.options, isReadOnly = _a.isReadOnly, highlightFirstRow = _a.highlightFirstRow, children = _a.children, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows;
+    var _b = useState(initialDataSet), dataSet = _b[0], setDataSet = _b[1];
+    var _c = useState(false), isLoading = _c[0], setIsLoading = _c[1];
+    var _d = useState(null), sortByFieldErrors = _d[0], setSortByFieldErrors = _d[1];
+    var _e = useState(null), sortByFieldWarnings = _e[0], setSortByFieldWarnings = _e[1];
+    var _f = useState(""), filteredInputValue = _f[0], setFilteredInputValue = _f[1];
+    var _g = useState(""), selectedErrorToFilter = _g[0], setSelectedErrorToFilter = _g[1];
     var sortByCurrentErrorsRef = useRef({});
     var sortByCurrentWarningsRef = useRef({});
     var _h = useValidationState({
@@ -44,7 +45,7 @@ export var SpreadsheetContextProvider = function (_a) {
         setDataSet: setDataSet,
         setIsLoading: setIsLoading,
         onValidateRecord: onValidateRecord,
-    }), errorsRef = _h.errorsRef, warningsRef = _h.warningsRef, updateRecordAndRevalidate = _h.updateRecordAndRevalidate, deleteRecords = _h.deleteRecords, filterRecordsBySearchValue = _h.filterRecordsBySearchValue, validationState = __rest(_h, ["errorsRef", "warningsRef", "updateRecordAndRevalidate", "deleteRecords", "filterRecordsBySearchValue"]);
+    }), errorsRef = _h.errorsRef, warningsRef = _h.warningsRef, updateRecordAndRevalidate = _h.updateRecordAndRevalidate, deleteRecords = _h.deleteRecords, filterRecordsBySearchValue = _h.filterRecordsBySearchValue, filterRecordsByError = _h.filterRecordsByError, validationState = __rest(_h, ["errorsRef", "warningsRef", "updateRecordAndRevalidate", "deleteRecords", "filterRecordsBySearchValue", "filterRecordsByError"]);
     var addNewRowsToSpreadsheet = useCallback(function () {
         var highestRowIndex = Math.max.apply(Math, Object.values(dataSet).map(function (obj) { return obj._meta.rowIndex; }));
         var newRow = addMeta({}, highestRowIndex + 1);
@@ -53,10 +54,21 @@ export var SpreadsheetContextProvider = function (_a) {
             return (__assign(__assign({}, oldValues), (_a = {}, _a[newRow._meta.id] = newRow, _a)));
         });
     }, [dataSet]);
+    var handleDeleteErrors = useCallback(function (selectedRows) {
+        deleteRecords(dataSet, selectedRows, errorsRef.current, warningsRef.current);
+    }, []);
     // sort data based on errors (errors group on top and not errors group at bottom)
     var data = useMemo(function () {
-        var filteredObj = filterRecordsBySearchValue(dataSet, filteredInputValue);
-        var dataSetValues = Object.values(filteredInputValue ? filteredObj : dataSet);
+        var filteredDatasetByString = filteredInputValue
+            ? filterRecordsBySearchValue(dataSet, filteredInputValue, fields)
+            : dataSet;
+        var filteredDatasetByError = selectedErrorToFilter
+            ? filterRecordsByError(filteredDatasetByString, selectedErrorToFilter, errorsRef.current, fields)
+            : filteredDatasetByString;
+        var dataSetValues = Object.values(filteredDatasetByError);
+        if (dataSetValues.length === 0) {
+            setSelectedErrorToFilter("");
+        }
         var errors = sortByCurrentErrorsRef.current; //Sort errors snapshot
         var warnings = sortByCurrentWarningsRef.current; //Sort warnings snapshot
         if (!sortByFieldErrors && !sortByFieldWarnings)
@@ -69,7 +81,13 @@ export var SpreadsheetContextProvider = function (_a) {
             }
             return bHasErrors ? 1 : -1;
         });
-    }, [dataSet, filteredInputValue, sortByFieldErrors, sortByFieldWarnings]);
+    }, [
+        dataSet,
+        filteredInputValue,
+        selectedErrorToFilter,
+        sortByFieldErrors,
+        sortByFieldWarnings,
+    ]);
     var isFiltering = useMemo(function () { return !!filteredInputValue; }, [filteredInputValue]);
     useEffect(function () {
         onDataSetChanged && onDataSetChanged(dataSet);
@@ -112,7 +130,7 @@ export var SpreadsheetContextProvider = function (_a) {
         var baseCheckboxColumnWidth = lastRowIndexLength * singleLetterWidth + horizontalSpacing;
         return baseCheckboxColumnWidth < 40 ? 40 : baseCheckboxColumnWidth;
     }, [data]);
-    var value = __assign(__assign({ data: data, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, rowWidth: rowWidth, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, highlightFirstRow: highlightFirstRow, options: options, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, setSortByFieldWarnings: handleSortByFieldWarnings, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows, deleteRecords: deleteRecords, filteredInputValue: filteredInputValue, setFilteredInputValue: setFilteredInputValue, lastClickedIndexRef: lastClickedIndexRef, addNewRowsToSpreadsheet: addNewRowsToSpreadsheet, checkboxColumnWidth: checkboxColumnWidth, isFiltering: isFiltering });
+    var value = __assign(__assign({ data: data, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, highlightFirstRow: highlightFirstRow, options: options, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, setSortByFieldWarnings: handleSortByFieldWarnings, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows, deleteRecords: handleDeleteErrors, filteredInputValue: filteredInputValue, setFilteredInputValue: setFilteredInputValue, lastClickedIndexRef: lastClickedIndexRef, addNewRowsToSpreadsheet: addNewRowsToSpreadsheet, checkboxColumnWidth: checkboxColumnWidth, selectedErrorToFilter: selectedErrorToFilter, setSelectedErrorToFilter: setSelectedErrorToFilter, isFiltering: isFiltering });
     return (_jsx(SpreadsheetContext.Provider, __assign({ value: value }, { children: children })));
 };
 export var useSpreadsheetContext = function () { return useContext(SpreadsheetContext); };

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

@@ -35,13 +35,39 @@ import { SpreadsheetRowCheckboxes } from "./SpreadsheetRowCheckboxes";
 import ValidationProgress from "./ValidationProgress";
 import { TableActions } from "../../../../common/Table/TableActions";
 import { useImporterContext } from "../../../../Importer/contexts/ImporterContextProvider";
+import useWindowDimensions from "../../../../utils/hooks/useWindowSize";
 var getItemKey = function (record) { return record._meta.id; };
 var SpreadsheetData = function () {
-    var _a = useSpreadsheetContext(), fields = _a.fields, data = _a.data, isLoading = _a.isLoading, isReadOnly = _a.isReadOnly, rowWidth = _a.rowWidth, totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage, setSortByFieldErrors = _a.setSortByFieldErrors, options = _a.options, setSortByFieldWarnings = _a.setSortByFieldWarnings, selectedRows = _a.selectedRows, checkboxColumnWidth = _a.checkboxColumnWidth, isFiltering = _a.isFiltering;
+    var _a = useSpreadsheetContext(), fields = _a.fields, data = _a.data, isLoading = _a.isLoading, isReadOnly = _a.isReadOnly, totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage, setSortByFieldErrors = _a.setSortByFieldErrors, options = _a.options, setSortByFieldWarnings = _a.setSortByFieldWarnings, selectedRows = _a.selectedRows, checkboxColumnWidth = _a.checkboxColumnWidth, isFiltering = _a.isFiltering;
     var currentStepIndex = useImporterContext().currentStepIndex;
+    var isOnSmallScreens = useWindowDimensions().isOnSmallScreens;
     var canShowCheckboxOnCheckboxRowHover = currentStepIndex === 2;
     var rowNumbersGridRef = useRef();
     var rowCheckboxesGridRef = useRef();
+    var rowWidthScalingFactor = (function () {
+        // Spreadsheet will display 6 columns on the viewport and a small portion of the
+        // 7th column in the right side to let the user know they can scroll horizontally
+        var visibleColumnsOnTableViewport = 6;
+        // by multiplying by horizontalScrollVisibilityRatio the final rowWidth for the spreadsheet
+        // will be reduced in order to partially display the last column on the right side
+        // 0.95 was chosen because it's the ratio that looks better on the UI on desktop
+        // 0.9 was chosen because it's the ratio that looks better on the UI on mobile
+        var horizontalScrollVisibilityRatio = 0.95;
+        if (isOnSmallScreens) {
+            // When the screen is too small the Spreadsheet will display 3 columns on the viewport
+            // and a small portion of the  4th column in the right side to let the user know they can scroll horizontally
+            visibleColumnsOnTableViewport = 3;
+            horizontalScrollVisibilityRatio = 0.9;
+        }
+        var res = fields.length / visibleColumnsOnTableViewport;
+        if (res <= 1)
+            return 1;
+        /*
+        multiply the rowWidthScalingFactor by 0.95/0.9 to let the user know they can scroll
+        horizontally (will display partial column on the right)
+        */
+        return res * horizontalScrollVisibilityRatio;
+    })();
     var sortByErrors = useCallback(function (field) {
         return setSortByFieldErrors(function (sortByFieldErrors) {
             return sortByFieldErrors === field ? null : field;
@@ -84,6 +110,6 @@ var SpreadsheetData = function () {
     }, [dataLength]);
     var showValidationProgress = !isReadOnly && validationPercentage < 100;
     var isReviewStep = currentStepIndex === 2;
-    return (_jsxs(S.SpreadSheetData, __assign({ h100: true, flexColumn: true }, { children: [_jsx(GlobalStyle, {}), showValidationProgress && (_jsx(Div, __assign({ h: 32 }, { children: _jsx(ValidationProgress, { totalErrors: totalErrors, validationPercentage: validationPercentage }) }))), _jsxs(S.SpreadSheetContainer, __assign({ flexColumn: true, w100: true, h100: true }, { children: [_jsx(Div, __assign({ w100: true, justifyCenter: true }, { children: isReviewStep && _jsx(TableActions, {}) })), _jsxs(S.SpreadSheetWrapper, __assign({ canShowCheckboxOnHover: !showValidationProgress && canShowCheckboxOnCheckboxRowHover, shouldShowOnlyCheckbox: !showValidationProgress && selectedRows.length > 0, dflex: true, h100: true }, { children: [(options === null || options === void 0 ? void 0 : options.showCheckboxColumn) && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, spreadsheetHasXScroll: rowWidth > 1, height: spreadsheetHeight, firstRowIsHeader: options === null || options === void 0 ? void 0 : options.firstRowIsHeader, isLoadingData: showValidationProgress })), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, h: spreadsheetHeight, rowWidth: rowWidth, data: data, columns: columns, isLoading: isLoading, onTableScroll: onTableScroll, getItemKey: getItemKey, shouldHaveCustomScrollbar: true, checkboxColumnWidth: checkboxColumnWidth, isFiltering: isFiltering })] }))] }))] })));
+    return (_jsxs(S.SpreadSheetData, __assign({ h100: true, flexColumn: true }, { children: [_jsx(GlobalStyle, {}), showValidationProgress && (_jsx(Div, __assign({ h: 32 }, { children: _jsx(ValidationProgress, { totalErrors: totalErrors, validationPercentage: validationPercentage }) }))), _jsxs(S.SpreadSheetContainer, __assign({ flexColumn: true, w100: true, h100: true }, { children: [_jsx(Div, __assign({ w100: true, justifyCenter: true }, { children: isReviewStep && _jsx(TableActions, {}) })), _jsxs(S.SpreadSheetWrapper, __assign({ canShowCheckboxOnHover: !showValidationProgress && canShowCheckboxOnCheckboxRowHover, shouldShowOnlyCheckbox: !showValidationProgress && selectedRows.length > 0, dflex: true, h100: true }, { children: [(options === null || options === void 0 ? void 0 : options.showCheckboxColumn) && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, height: spreadsheetHeight, firstRowIsHeader: options === null || options === void 0 ? void 0 : options.firstRowIsHeader, isLoadingData: showValidationProgress })), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, h: null, rowWidthScalingFactor: rowWidthScalingFactor, data: data, columns: columns, isLoading: isLoading, onTableScroll: onTableScroll, getItemKey: getItemKey, checkboxColumnWidth: checkboxColumnWidth, isFiltering: isFiltering })] }))] }))] })));
 };
 export default React.memo(SpreadsheetData, areEqual);

package/lib/esm/Importer/common/Spreadsheet/components/SpreadsheetRowCheckboxes.d.ts

@@ -2,10 +2,9 @@ import React from "react";
 import { DivCSSProps } from "../../../../styled/utils";
 type Props = {
     height?: number;
-    spreadsheetHasXScroll?: boolean;
     gridRef: React.MutableRefObject<any>;
     firstRowIsHeader?: boolean;
     isLoadingData?: boolean;
 } & DivCSSProps;
-export declare const SpreadsheetRowCheckboxes: ({ height, spreadsheetHasXScroll, gridRef, firstRowIsHeader, isLoadingData, ...props }: Props) => JSX.Element;
+export declare const SpreadsheetRowCheckboxes: ({ height, gridRef, firstRowIsHeader, isLoadingData, ...props }: Props) => JSX.Element;
 export {};

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

@@ -62,7 +62,7 @@ var rowIsEmpty = function (row) {
     });
 };
 export var SpreadsheetRowCheckboxes = function (_a) {
-    var height = _a.height, spreadsheetHasXScroll = _a.spreadsheetHasXScroll, gridRef = _a.gridRef, _b = _a.firstRowIsHeader, firstRowIsHeader = _b === void 0 ? false : _b, isLoadingData = _a.isLoadingData, props = __rest(_a, ["height", "spreadsheetHasXScroll", "gridRef", "firstRowIsHeader", "isLoadingData"]);
+    var height = _a.height, gridRef = _a.gridRef, _b = _a.firstRowIsHeader, firstRowIsHeader = _b === void 0 ? false : _b, isLoadingData = _a.isLoadingData, props = __rest(_a, ["height", "gridRef", "firstRowIsHeader", "isLoadingData"]);
     var _c = useSpreadsheetContext(), data = _c.data, selectedRows = _c.selectedRows, lastClickedIndexRef = _c.lastClickedIndexRef, setSelectedRows = _c.setSelectedRows, checkboxColumnWidth = _c.checkboxColumnWidth;
     var currentStepIndex = useImporterContext().currentStepIndex;
     var nonEmptyRows = useMemo(function () { return data.filter(function (row) { return !rowIsEmpty(row); }); }, [

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { SpreadsheetOptions } from "../../..";
 import { BatchValidationErrors, Field, OnValidateRecord, Record, RecordDataSet } from "../../../types";
+import { DeleteRecords, FilterRecordsByError, FilterRecordsBySearchValue } from "../../../common/Table/TableActions/hooks";
 type UseValidationStateArgs = {
     onValidateRecord?: OnValidateRecord;
     setDataSet: React.Dispatch<React.SetStateAction<RecordDataSet>>;
@@ -26,8 +27,9 @@ export type ValidationState = {
     };
 };
 type UseValidationStateReturnValue = ValidationState & {
-    deleteRecords: (selectedRecords: string[]) => void;
-    filterRecordsBySearchValue: (obj: RecordDataSet, value: string) => RecordDataSet;
+    deleteRecords: DeleteRecords;
+    filterRecordsBySearchValue: FilterRecordsBySearchValue;
+    filterRecordsByError: FilterRecordsByError;
     updateRecordAndRevalidate: (record: Record) => Promise<void>;
     errorsRef: React.MutableRefObject<BatchValidationErrors>;
     warningsRef: React.MutableRefObject<BatchValidationErrors>;

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

@@ -49,45 +49,10 @@ import { omit, set } from "lodash";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { sleep } from "../../..";
 import { selectValidatorsFor, validateRecord } from "./validation";
-import { addEmptyRows, recordListToDataSet } from "../../../Importer/data";
+import { useTableActions, } from "../../../common/Table/TableActions/hooks";
 var checkIfHasErrors = function (errors) {
     return errors && Object.keys(errors).length > 0;
 };
-var removeItemsFromObject = function (obj, idsToRemove) {
-    var _a;
-    var idSet = new Set(idsToRemove);
-    var newObj = {};
-    for (var key in obj) {
-        if (Object.prototype.hasOwnProperty.call(obj, key)) {
-            var meta = (_a = obj[key]) === null || _a === void 0 ? void 0 : _a._meta;
-            if (meta && (meta === null || meta === void 0 ? void 0 : meta.id) && !(idSet === null || idSet === void 0 ? void 0 : idSet.has(meta === null || meta === void 0 ? void 0 : meta.id))) {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    return newObj;
-};
-var removeErrorsOrWarningsFromObject = function (obj, keysToRemove) {
-    var keysSet = new Set(keysToRemove);
-    var newObj = {};
-    for (var key in obj) {
-        if (Object.prototype.hasOwnProperty.call(obj, key) && !(keysSet === null || keysSet === void 0 ? void 0 : keysSet.has(key))) {
-            newObj[key] = obj[key];
-        }
-    }
-    return newObj;
-};
-var isObject = function (value) {
-    return typeof value === "object" && value !== null && !Array.isArray(value);
-};
-var includesSearchValue = function (value, searchValue) {
-    if (typeof value === "string" || typeof value === "number") {
-        var stringValue = String(value).toLowerCase();
-        var searchValueLower = searchValue.toLowerCase();
-        return stringValue.includes(searchValueLower);
-    }
-    return false;
-};
 export var useValidationState = function (_a) {
     var initialDataSet = _a.initialDataSet, //Initial Data Set, used to run the initial validation
     dataSet = _a.dataSet, //Current Updated Data Set
@@ -98,36 +63,7 @@ export var useValidationState = function (_a) {
     var validatorsCache = useMemo(function () { return selectValidatorsFor(fields); }, [fields]);
     var errorsRef = useRef(errors);
     var warningsRef = useRef(warnings);
-    //Delete record from dataSet and from validations
-    var deleteRecords = function (selectedRecords) {
-        var newDataSet = removeItemsFromObject(dataSet, selectedRecords);
-        var newErrors = removeErrorsOrWarningsFromObject(errors, selectedRecords);
-        var newWarnings = removeErrorsOrWarningsFromObject(warnings, selectedRecords);
-        setDataSet(newDataSet);
-        setErrors(newErrors);
-        setWarnings(newWarnings);
-    };
-    //Filter records by search value
-    var filterRecordsBySearchValue = function (obj, value) {
-        var filteredObj = {};
-        for (var _i = 0, _a = Object.entries(obj); _i < _a.length; _i++) {
-            var _b = _a[_i], key = _b[0], currentObj = _b[1];
-            if (isObject(currentObj)) {
-                var matches = Object.values(currentObj).some(function (propertyValue) {
-                    return includesSearchValue(propertyValue, value);
-                });
-                if (matches) {
-                    filteredObj[key] = currentObj;
-                }
-            }
-        }
-        // To ensure that rows are always displayed, even when the search query is empty,
-        // we return an empty record list when the search yields no results.
-        if (Object.keys(filteredObj).length === 0) {
-            return recordListToDataSet(addEmptyRows([], fields), fields);
-        }
-        return filteredObj;
-    };
+    var _e = useTableActions({ setDataSet: setDataSet, setErrors: setErrors, setWarnings: setWarnings }), deleteRecords = _e.deleteRecords, filterRecordsByError = _e.filterRecordsByError, filterRecordsBySearchValue = _e.filterRecordsBySearchValue;
     //Validate record and update dataSet
     var updateRecordAndRevalidate = useCallback(function (record) { return __awaiter(void 0, void 0, void 0, function () {
         var recordId, newDataSet, data, _a, recordErrors, recordWarnings, hasError, hasWarning;
@@ -298,5 +234,6 @@ export var useValidationState = function (_a) {
         updateRecordAndRevalidate: updateRecordAndRevalidate,
         deleteRecords: deleteRecords,
         filterRecordsBySearchValue: filterRecordsBySearchValue,
+        filterRecordsByError: filterRecordsByError,
     };
 };

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

@@ -3,7 +3,6 @@ import { Field, OnValidateRecord, Record, RecordDataSet, SpreadsheetOptions } fr
 import { OnDataSetChanged, OnValidationStateChanged } from "./SpreadsheetContextProvider";
 export type SpreadsheetProps = {
     initialDataSet: RecordDataSet;
-    rowWidth?: number;
     isReadOnly?: boolean;
     fields?: Field[];
     submittedData?: Record[];
@@ -15,7 +14,7 @@ export type SpreadsheetProps = {
     selectedRows?: string[];
     setSelectedRows?: React.Dispatch<React.SetStateAction<string[]>>;
 };
-declare const _default: React.MemoExoticComponent<({ isReadOnly, initialDataSet, rowWidth, fields, options, highlightFirstRow, onValidateRecord, onDataSetChanged, onValidationStateChanged, selectedRows, setSelectedRows, }: SpreadsheetProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ isReadOnly, initialDataSet, fields, options, highlightFirstRow, onValidateRecord, onDataSetChanged, onValidationStateChanged, selectedRows, setSelectedRows, }: SpreadsheetProps) => JSX.Element>;
 export default _default;
 export * from "./hooks";
 export * from "./SpreadsheetContextProvider";

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

@@ -15,8 +15,8 @@ import { areEqual } from "react-window";
 import SpreadsheetData from "./components/SpreadsheetData";
 import { SpreadsheetContextProvider, } from "./SpreadsheetContextProvider";
 var Spreadsheet = function (_a) {
-    var isReadOnly = _a.isReadOnly, initialDataSet = _a.initialDataSet, rowWidth = _a.rowWidth, fields = _a.fields, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.highlightFirstRow, highlightFirstRow = _c === void 0 ? false : _c, _d = _a.onValidateRecord, onValidateRecord = _d === void 0 ? null : _d, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows;
-    return (_jsx(SpreadsheetContextProvider, __assign({ rowWidth: rowWidth, isReadOnly: isReadOnly, fields: fields, initialDataSet: initialDataSet, highlightFirstRow: highlightFirstRow, options: options, onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord, onValidationStateChanged: onValidationStateChanged, selectedRows: selectedRows, setSelectedRows: setSelectedRows }, { children: _jsx(SpreadsheetData, {}) })));
+    var isReadOnly = _a.isReadOnly, initialDataSet = _a.initialDataSet, fields = _a.fields, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.highlightFirstRow, highlightFirstRow = _c === void 0 ? false : _c, _d = _a.onValidateRecord, onValidateRecord = _d === void 0 ? null : _d, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows;
+    return (_jsx(SpreadsheetContextProvider, __assign({ isReadOnly: isReadOnly, fields: fields, initialDataSet: initialDataSet, highlightFirstRow: highlightFirstRow, options: options, onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord, onValidationStateChanged: onValidationStateChanged, selectedRows: selectedRows, setSelectedRows: setSelectedRows }, { children: _jsx(SpreadsheetData, {}) })));
 };
 export default React.memo(Spreadsheet, areEqual);
 export * from "./hooks";

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

@@ -6,5 +6,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, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, shouldBeDraggable, shouldHaveCustomScrollbar, checkboxColumnWidth, isFiltering, ...props }: import("../../../common/Table/TableView").TableViewProps) => JSX.Element>, import("styled-components").DefaultTheme, {}, never>;
+export declare const TableView: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, 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 {};

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

@@ -6,11 +6,11 @@ import styled, { css } from "styled-components";
 import { TableView as TableViewBase, TableViewCellContainer, TableViewRow, } from "../../../common/Table/TableView";
 import { Div } from "../../../styled/utils";
 export var SpreadSheetData = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"])));
-export var SpreadSheetWrapper = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: solid 1px ", ";\n  background: ", ";\n  overflow: hidden !important;\n  flex-grow: 1;\n\n  ", "\n"], ["\n  border: solid 1px ", ";\n  background: ", ";\n  overflow: hidden !important;\n  flex-grow: 1;\n\n  ", "\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.white; }, function (_a) {
+export var SpreadSheetWrapper = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-bottom: solid 1px ", ";\n  border-top: solid 1px ", ";\n  background: ", ";\n  overflow: hidden !important;\n  flex-grow: 1;\n\n  ", "\n"], ["\n  border-bottom: solid 1px ", ";\n  border-top: solid 1px ", ";\n  background: ", ";\n  overflow: hidden !important;\n  flex-grow: 1;\n\n  ", "\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.white; }, function (_a) {
     var canShowCheckboxOnHover = _a.canShowCheckboxOnHover, shouldShowOnlyCheckbox = _a.shouldShowOnlyCheckbox;
     return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    .spreadsheet-row-container {\n      ", "\n\n      ", "\n    }\n  "], ["\n    .spreadsheet-row-container {\n      ", "\n\n      ", "\n    }\n  "])), shouldShowOnlyCheckbox && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        .row-numbers-cell {\n          visibility: hidden;\n        }\n\n        .checkbox-cell {\n          visibility: visible;\n        }\n      "], ["\n        .row-numbers-cell {\n          visibility: hidden;\n        }\n\n        .checkbox-cell {\n          visibility: visible;\n        }\n      "]))), !shouldShowOnlyCheckbox &&
         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;\n    border-right: 1px solid ", ";\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;\n    border-right: 1px solid ", ";\n  }\n"])), function (p) { return p.theme.colors.gray50; }, TableViewRow, TableViewCellContainer, function (p) { return p.theme.colors.gray300; });
+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; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/lib/esm/Importer/common/utils.d.ts

@@ -1,5 +1,4 @@
 import { Integration, Record, TemplateHeader } from "../../types";
-export declare const getSpreadsheetRowWidth: (fields: any, visibleRowsOnTableViewport: any) => number;
 type IsEnumFieldArgs = {
     templateLabel: string;
     templateHeaders: TemplateHeader[];

package/lib/esm/Importer/common/utils.js

@@ -35,10 +35,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import axios from "axios";
-export var getSpreadsheetRowWidth = function (fields, visibleRowsOnTableViewport) {
-    var res = Math.ceil(fields.length / visibleRowsOnTableViewport);
-    return res > 1 ? res : 1;
-};
 export var getColumnType = function (_a) {
     var _b;
     var templateLabel = _a.templateLabel, templateHeaders = _a.templateHeaders;

package/lib/esm/Importer/data/index.d.ts

@@ -1,7 +1,12 @@
 import { Field, FieldTypes, FormatRecord, Record, RecordDataSet, TemplateHeader } from "../../types";
 import { EnumFieldValueMatchings, HeaderMatchings } from "../contexts/ImporterContextProvider";
-export declare const addEmptyRows: (data: Record[], fields: Field[]) => Record[];
-export declare const addMeta: (record: any, index: number) => Record;
+export declare const addEmptyRows: (data: Record[], fields: Field[]) => {
+    _meta: {
+        id: string;
+        rowIndex: number;
+    };
+}[];
+export declare const addMeta: (record: any, index: number, uploadedRow?: any) => Record;
 export declare const recordListToDataSet: (data: Record[], fields: Field[]) => RecordDataSet;
 type transformToRecordsArgs = {
     templateHeaderMatchings: HeaderMatchings;

package/lib/esm/Importer/data/index.js

@@ -9,6 +9,15 @@ 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 { FieldTypes, } from "../../types";
 import { parseValue } from "../common/Spreadsheet/common";
 var MINIMUM_ROW_COUNT = 20;
@@ -21,19 +30,18 @@ export var addEmptyRows = function (data, fields) {
         var _a;
         return (__assign(__assign({}, obj), (_a = {}, _a[f.name] = null, _a)));
     }, {});
-    for (var i = data.length; i < MINIMUM_ROW_COUNT; i++) {
-        data.push(__assign(__assign({}, emptyRecord), { _meta: {
-                id: getRowId(i),
-                rowIndex: i,
-            } }));
-    }
-    return data;
+    var newData = Array.from({ length: MINIMUM_ROW_COUNT - data.length }, function (_, index) { return (__assign(__assign({}, emptyRecord), { _meta: {
+            id: getRowId(data.length + index),
+            rowIndex: data.length + index,
+        } })); });
+    return __spreadArray(__spreadArray([], data, true), newData, true);
 };
-export var addMeta = function (record, index) {
+export var addMeta = function (record, index, uploadedRow) {
     var _a;
+    if (uploadedRow === void 0) { uploadedRow = null; }
     var rId = getRowId(index);
     var meta = (_a = record._meta) !== null && _a !== void 0 ? _a : {};
-    return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { id: rId, rowIndex: index, touched: false }) });
+    return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { id: rId, rowIndex: index, touched: false, uploadedRow: uploadedRow }) });
 };
 export var recordListToDataSet = function (data, fields) {
     var initialData = data;
@@ -59,7 +67,7 @@ var transformToRecords = function (_a) {
         return (__assign(__assign({}, byLabel), (_a = {}, _a[header.label] = header, _a)));
     }, {});
     var getRecord = function (row, index) {
-        var record = addMeta({}, index);
+        var record = addMeta({}, index, row);
         matchedColumnsLabels.forEach(function (_a) {
             var label = _a.label, index = _a.index;
             var enumSet = enumFieldValueMatchings

package/lib/esm/Importer/index.js

@@ -12,7 +12,6 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ImporterContextProvider } from "./contexts/ImporterContextProvider";
 import { ImporterWithContext } from "./ImporterWithContext";
-import { useFullscreenOverlay } from "./useFullscreenOverlay";
 export var ACCOUNT_ROUTES = {
     TEMPLATES: "/importers",
 };
@@ -21,7 +20,6 @@ var p = function (path) { return "".concat(ACCOUNT_VIEW_PATH).concat(path); };
 export var TEMPLATES_ROUTE = p(ACCOUNT_ROUTES.TEMPLATES);
 var Importer = function (_a) {
     var templateSlug = _a.templateSlug, apiToken = _a.apiToken, options = _a.options, formatRecord = _a.formatRecord, onValidateRecord = _a.onValidateRecord, onSubmit = _a.onSubmit, onClose = _a.onClose;
-    useFullscreenOverlay();
     return (_jsx(ImporterContextProvider, __assign({ options: options, templateSlug: templateSlug, apiToken: apiToken, formatRecord: formatRecord, onValidateRecord: onValidateRecord, onClose: onClose, onSubmit: onSubmit }, { children: _jsx(ImporterWithContext, {}) })));
 };
 export * from "./common/Spreadsheet";

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

@@ -24,6 +24,7 @@ import { DeleteIcon, ConfirmationDeleteIcon } from "./icons";
 import { addToast } from "../../../common/Toast";
 import { Div } from "../../../styled/utils";
 import { ActionButton } from "./TableActions.styles";
+import { useTranslation } from "react-i18next";
 var StyledTooltipProvider = styled(TooltipProvider)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
 var filterByRecordsThatContainsValues = function (mainObject) {
     return mainObject.filter(function (obj) {
@@ -40,6 +41,7 @@ export var DeleteSelectedRows = function (_a) {
     var _c = useState(false), isConfirmationModalOpen = _c[0], setIsConfirmationModalOpen = _c[1];
     var _d = useSpreadsheetContext(), data = _d.data, filteredInputValue = _d.filteredInputValue, deleteRecords = _d.deleteRecords, selectedRows = _d.selectedRows, setSelectedRows = _d.setSelectedRows, setFilteredInputValue = _d.setFilteredInputValue;
     var _e = useImporterContext(), setCurrentStepIndex = _e.setCurrentStepIndex, isUsingManualImport = _e.isUsingManualImport;
+    var t = useTranslation("review").t;
     var toggleModalVisibility = function () {
         setIsConfirmationModalOpen(function (oldValue) { return !oldValue; });
     };
@@ -53,13 +55,17 @@ export var DeleteSelectedRows = function (_a) {
             !filteredInputValue &&
             selectedRows.length === validData.length) {
             setCurrentStepIndex(0);
-            return addToast("You have deleted all the rows. You will be redirect to the upload step.", "success");
+            return addToast(t("table_actions.delete_rows.delete_toast"), "success");
         }
         deleteRecords(selectedRows);
     };
-    var DescriptionUI = function () { return (_jsx(_Fragment, { children: _jsxs(Div, { children: ["Are you sure you want to delete ", selectedRows.length, " row", selectedRows.length > 1 ? "s" : "", "?"] }) })); };
-    var confirmationModalUI = (_jsx(ConfirmationModal, { isOpen: isConfirmationModalOpen, handleClose: toggleModalVisibility, title: "Delete Selected Row".concat(selectedRows.length > 1 ? "s" : ""), description: _jsx(DescriptionUI, {}), onSubmit: handleDeleteRecord, buttonText: "Yes, delete", icon: ConfirmationDeleteIcon }));
+    var DescriptionUI = function () { return (_jsx(_Fragment, { children: _jsxs(Div, { children: [t("table_actions.delete_rows.confirmation_modal", {
+                    length: selectedRows.length,
+                }), selectedRows.length > 1 ? "s" : "", "?"] }) })); };
+    var confirmationModalUI = (_jsx(ConfirmationModal, { isOpen: isConfirmationModalOpen, handleClose: toggleModalVisibility, title: "".concat(t("table_actions.delete_rows.modal_title")).concat(selectedRows.length > 1 ? "s" : ""), description: _jsx(DescriptionUI, {}), onSubmit: handleDeleteRecord, buttonText: t("table_actions.delete_rows.yes_delete"), icon: ConfirmationDeleteIcon }));
     var isDeleteButtonDisabled = selectedRows.length <= 0;
-    return (_jsxs(_Fragment, { children: [confirmationModalUI, _jsx(StyledTooltipProvider, __assign({ tooltip: isDeleteButtonDisabled ? "Select rows to delete" : "Delete Row", placement: "right", flip: false, centered: true, "data-testid": testId }, { children: _jsx(ActionButton, __assign({ onClick: toggleModalVisibility, disabled: isDeleteButtonDisabled }, { children: _jsx(DeleteIcon, {}) })) }))] }));
+    return (_jsxs(_Fragment, { children: [confirmationModalUI, _jsx(StyledTooltipProvider, __assign({ tooltip: isDeleteButtonDisabled
+                    ? t("table_actions.delete_rows.select_rows")
+                    : t("table_actions.delete_rows.delete_row"), placement: "right", flip: false, centered: true, "data-testid": testId }, { children: _jsx(ActionButton, __assign({ onClick: toggleModalVisibility, disabled: isDeleteButtonDisabled }, { children: _jsx(DeleteIcon, {}) })) }))] }));
 };
 var templateObject_1;