fuse-importer 0.25.4 → 0.25.5

package/lib/esm/Importer/ImporterWithContext.js

@@ -47,8 +47,8 @@ var steps = [
 ];
 export var Layout = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  height: 100vh;\n  width: 100vw;\n  overflow-y: scroll;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: ", ";\n  ", ";\n"], ["\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  height: 100vh;\n  width: 100vw;\n  overflow-y: scroll;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: ", ";\n  ", ";\n"])), function (p) { return p.zIndex; }, function (p) { return p.theme.css.scrollbarDark; });
 var Content = styled(Div)(function (_a) {
-    var _b = _a.theme, colors = _b.colors, c = _b.css;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    padding-bottom: 70px;\n  "], ["\n    background-color: ", ";\n    padding-bottom: 70px;\n  "])), colors.backgroundInterface);
+    var colors = _a.theme.colors;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n  "], ["\n    background-color: ", ";\n  "])), colors.backgroundInterface);
 });
 export var ImporterWithContext = function () {
     var _a = useImporterContext(), inTrialMode = _a.inTrialMode, currentStepIndex = _a.currentStepIndex, matcherSubstep = _a.matcherSubstep, theme = _a.theme, logoURL = _a.logoURL, previewFirstTime = _a.previewFirstTime, _b = _a.importerOptions, zIndex = _b.zIndex, previewMode = _b.previewMode;

package/lib/esm/Importer/Matcher/HeaderMatcher/index.js

@@ -40,12 +40,10 @@ var HeaderMatcher = function () {
                 : MatcherStatus.unmatched,
         };
     });
-    var dataSortingOrderRef = useRef(templateHeaderLabels
-        .map(function (templateHeaderLabel, index) { return ({
+    var dataSortingOrderRef = useRef(templateHeaderLabels.map(function (templateHeaderLabel, index) { return ({
         index: index,
         isMatched: !!templateHeaderMatchings[templateHeaderLabel],
-    }); })
-        .sort(function (a, b) { return (b.isMatched ? 1 : -1); }));
+    }); }));
     var sortedData = dataSortingOrderRef.current.map(function (sorting) { return data[sorting.index]; });
     var tableRowHeight = 100;
     var tableHeight = getTableHeight({

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

@@ -113,7 +113,6 @@ export var ReviewContextProvider = function (_a) {
     var _d = useState(false), isSubmitting = _d[0], setIsSubmitting = _d[1];
     var _e = useState(false), isSubmitDisabled = _e[0], setIsSubmitDisabled = _e[1];
     var _f = useState(false), importWasSuccessful = _f[0], setImportWasSuccessful = _f[1];
-    var isDataInitialized = useRef(false);
     var _g = useState(null), appResponse = _g[0], setAppResponse = _g[1];
     var _h = useState([]), previewFields = _h[0], setPreviewFields = _h[1];
     var _j = useState(null), previewInitialDataSet = _j[0], setPreviewInitialDataSet = _j[1];
@@ -129,10 +128,7 @@ export var ReviewContextProvider = function (_a) {
             return;
         var dataSet = reviewDataSetRef.current;
         var dataSetValues = Object.values(dataSet);
-        var selectedDataSetValues = dataSetValues.filter(function (_, index) {
-            return selectedRows.includes(index);
-        });
-        var csv = convertToCSV(selectedDataSetValues);
+        var csv = convertToCSV(dataSetValues);
         var blob = new Blob([csv], { type: "text/csv" });
         var url = URL.createObjectURL(blob);
         var link = document.createElement("a");
@@ -141,7 +137,7 @@ export var ReviewContextProvider = function (_a) {
         link.click();
     }, [reviewFields, selectedRows]);
     var onSubmitData = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var dataSet, dataSetValues, selectedDataSetValues, validDataSetValues, validDataSetLength, invalidRecords, applicationResponse, isAppResponseSuccessful, _a, errors, isDataValid, invalidDataSet, error_2;
+        var dataSet, dataSetValues, validDataSetValues, validDataSetLength, invalidRecords, applicationResponse, isAppResponseSuccessful, _a, errors, isDataValid, invalidDataSet, error_2;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -151,10 +147,7 @@ export var ReviewContextProvider = function (_a) {
                     setIsSubmitting(true);
                     dataSet = reviewDataSetRef.current;
                     dataSetValues = Object.values(dataSet);
-                    selectedDataSetValues = dataSetValues.filter(function (_, index) {
-                        return selectedRows.includes(index);
-                    });
-                    validDataSetValues = selectedDataSetValues.filter(function (record) {
+                    validDataSetValues = dataSetValues.filter(function (record) {
                         return !record._meta.isInvalid && !isRecordEmpty(record, reviewFields);
                     });
                     validDataSetLength = validDataSetValues.length;
@@ -210,7 +203,6 @@ export var ReviewContextProvider = function (_a) {
             setReviewFields([]);
             setReviewInitialDataSet(null);
             reviewDataSetRef.current = null;
-            isDataInitialized.current = false;
             return;
         }
         if (currentStepIndex === 0) {
@@ -218,9 +210,8 @@ export var ReviewContextProvider = function (_a) {
             var _a = getPreviewDataSet({ uploadedData: uploadedData }), fields = _a.fields, initialDataSet = _a.initialDataSet;
             setPreviewFields(fields);
             setPreviewInitialDataSet(initialDataSet);
-            isDataInitialized.current = false;
         }
-        else if (currentStepIndex === 2 && !isDataInitialized.current) {
+        else if (currentStepIndex === 2) {
             //Review spreadsheet data
             var _b = getReviewDataSet({
                 enumFieldValueMatchings: enumFieldValueMatchings,
@@ -232,7 +223,6 @@ export var ReviewContextProvider = function (_a) {
             }), fields = _b.fields, initialDataSet = _b.initialDataSet;
             setReviewFields(fields);
             setReviewInitialDataSet(initialDataSet);
-            isDataInitialized.current = true;
         }
     }, [
         uploadedData,

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

@@ -32,7 +32,7 @@ var ReviewWithContext = function () {
     var _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows;
     var t = useTranslation("review").t;
     var spreadsheetUI = initialDataSet && (_jsx(Spreadsheet, { options: __assign(__assign({}, options), { showCheckboxColumn: true }), selectedRows: selectedRows, setSelectedRows: setSelectedRows, initialDataSet: initialDataSet, fields: fields, rowWidth: getSpreadsheetRowWidth(fields, 6), onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord, onValidationStateChanged: onValidationStateChanged }));
-    return (_jsxs(Div, __assign({ centered: true, flexColumn: true }, { children: [_jsx(AppResponseModal, {}), _jsxs(Div, __assign({ w: 1400 }, { children: [_jsxs(TitleContainer, __assign({ centered: true, textAlignCenter: true, flexColumn: true }, { children: [_jsx(Div, __assign({ h2: true, mt: 40 }, { children: t("title") })), _jsx(ExportButtonContainer, __assign({ mb: 16, mt: 64 }, { children: _jsxs(Button, __assign({ w: 120, br: 8, variant: "secondary", svgNormalFillColorOverride: "transparent", svgActiveFillColorOverride: "transparent", svgActiveStrokeColorOverride: "white", onClick: onExport }, { children: [downloadIcon, " ", _jsxs(Span, __assign({ ml: 6 }, { children: [" ", t("export")] }))] })) }))] })), _jsx(Div, __assign({ centered: true, textAlignCenter: true, flexColumn: true }, { children: _jsx(Div, __assign({ body1: true, mt: 20, w: 540, mb: 15 }, { children: t("description") })) })), spreadsheetUI] }))] })));
+    return (_jsxs(Div, __assign({ centered: true, flexColumn: true, h100: true }, { children: [_jsx(AppResponseModal, {}), _jsxs(Div, __assign({ w100: true, h100: true }, { children: [_jsxs(TitleContainer, __assign({ centered: true, textAlignCenter: true, flexColumn: true }, { children: [_jsx(Div, __assign({ h2: true, mt: 40 }, { children: t("title") })), _jsx(ExportButtonContainer, __assign({ mb: 16, mt: 64 }, { children: _jsxs(Button, __assign({ w: 120, br: 8, variant: "secondary", svgNormalFillColorOverride: "transparent", svgActiveFillColorOverride: "transparent", svgActiveStrokeColorOverride: "white", onClick: onExport }, { children: [downloadIcon, " ", _jsxs(Span, __assign({ ml: 6 }, { children: [" ", t("export")] }))] })) }))] })), _jsx(Div, __assign({ centered: true, textAlignCenter: true, flexColumn: true }, { children: _jsx(Div, __assign({ body1: true, mt: 20, w: 540, mb: 15 }, { children: t("description") })) })), spreadsheetUI] }))] })));
 };
 export default ReviewWithContext;
 var templateObject_1, templateObject_2;

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

@@ -21,7 +21,7 @@ var HeadersPreview = function () {
     var _a = useReviewContext(), fields = _a.previewFields, initialDataSet = _a.previewInitialDataSet;
     var t = useTranslation("upload").t;
     var _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows;
-    return (_jsxs(Div, __assign({ flexColumn: true, centered: true, pt: 40 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: t("headers_preview.title") })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: t("headers_preview.description") })), _jsx(HeaderButtons, {}), _jsx(Div, __assign({ w100: true, centered: true, mb: 36 }, { children: initialDataSet && (_jsx(Spreadsheet, { rowWidth: getSpreadsheetRowWidth(fields, 6), isReadOnly: true, initialDataSet: initialDataSet, fields: fields, highlightFirstRow: true, options: {
+    return (_jsxs(Div, __assign({ flexColumn: true, centered: true, pt: 40, h100: true }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: t("headers_preview.title") })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: t("headers_preview.description") })), _jsx(HeaderButtons, {}), _jsx(Div, __assign({ w100: true, h100: true }, { children: initialDataSet && (_jsx(Spreadsheet, { rowWidth: getSpreadsheetRowWidth(fields, 6), 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

@@ -17,9 +17,13 @@ type State = {
     updateRecord: (record: Record) => void;
     setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
     setSortByFieldErrors: React.Dispatch<React.SetStateAction<string>>;
-    selectedRows: number[];
-    setSelectedRows: React.Dispatch<React.SetStateAction<number[]>>;
+    selectedRows: string[];
+    setSelectedRows: React.Dispatch<React.SetStateAction<string[]>>;
     setSortByFieldWarnings: React.Dispatch<React.SetStateAction<string>>;
+    deleteRecords: (selectedRecords: string[]) => void;
+    lastClickedIndexRef: React.MutableRefObject<number | null>;
+    filteredInputValue: string;
+    setFilteredInputValue: React.Dispatch<React.SetStateAction<string>>;
 } & ValidationState;
 type Props = {
     initialDataSet: RecordDataSet;
@@ -32,8 +36,8 @@ type Props = {
     onValidationStateChanged?: OnValidationStateChanged;
     onValidateRecord?: OnValidateRecord;
     onDataSetChanged?: OnDataSetChanged;
-    selectedRows: number[];
-    setSelectedRows: React.Dispatch<React.SetStateAction<number[]>>;
+    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 useSpreadsheetContext: () => State;

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

@@ -24,6 +24,7 @@ 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 { addEmptyRows } from "../../../Importer/data";
 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;
@@ -31,9 +32,10 @@ export var SpreadsheetContextProvider = function (_a) {
     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 sortByCurrentErrorsRef = useRef({});
     var sortByCurrentWarningsRef = useRef({});
-    var _g = useValidationState({
+    var _h = useValidationState({
         dataSet: dataSet,
         initialDataSet: initialDataSet,
         fields: fields,
@@ -42,12 +44,13 @@ export var SpreadsheetContextProvider = function (_a) {
         setDataSet: setDataSet,
         setIsLoading: setIsLoading,
         onValidateRecord: onValidateRecord,
-    }), errorsRef = _g.errorsRef, warningsRef = _g.warningsRef, updateRecordAndRevalidate = _g.updateRecordAndRevalidate, validationState = __rest(_g, ["errorsRef", "warningsRef", "updateRecordAndRevalidate"]);
+    }), errorsRef = _h.errorsRef, warningsRef = _h.warningsRef, updateRecordAndRevalidate = _h.updateRecordAndRevalidate, deleteRecords = _h.deleteRecords, filterRecordsBySearchValue = _h.filterRecordsBySearchValue, validationState = __rest(_h, ["errorsRef", "warningsRef", "updateRecordAndRevalidate", "deleteRecords", "filterRecordsBySearchValue"]);
     // 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 errors = sortByCurrentErrorsRef.current; //Sort errors snapshot
         var warnings = sortByCurrentWarningsRef.current; //Sort warnings snapshot
-        var dataSetValues = Object.values(dataSet);
         if (!sortByFieldErrors && !sortByFieldWarnings)
             return dataSetValues;
         return dataSetValues.sort(function (a, b) {
@@ -58,7 +61,8 @@ export var SpreadsheetContextProvider = function (_a) {
             }
             return bHasErrors ? 1 : -1;
         });
-    }, [dataSet, sortByFieldErrors, sortByFieldWarnings]);
+    }, [dataSet, filteredInputValue, sortByFieldErrors, sortByFieldWarnings]);
+    addEmptyRows(data, fields);
     useEffect(function () {
         onDataSetChanged && onDataSetChanged(dataSet);
     }, [dataSet]);
@@ -80,7 +84,8 @@ export var SpreadsheetContextProvider = function (_a) {
         setSortByFieldWarnings(value);
         setSortByFieldErrors(null);
     }, []);
-    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 });
+    var lastClickedIndexRef = useRef(null);
+    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 });
     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

@@ -31,12 +31,15 @@ import * as S from "../styles";
 import { FieldHeader } from "./FieldHeader";
 import GlobalStyle from "./GlobalStyle";
 import { inputTypes } from "./inputs";
-import { SpreadsheetRowNumbers } from "./SpreadsheetRowNumbers";
 import { SpreadsheetRowCheckboxes } from "./SpreadsheetRowCheckboxes";
 import ValidationProgress from "./ValidationProgress";
+import { TableActions } from "../../../../common/Table/TableActions";
+import { useImporterContext } from "../../../../Importer/contexts/ImporterContextProvider";
 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;
+    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;
+    var currentStepIndex = useImporterContext().currentStepIndex;
+    var canShowCheckboxOnCheckboxRowHover = currentStepIndex === 2;
     var rowNumbersGridRef = useRef();
     var rowCheckboxesGridRef = useRef();
     var sortByErrors = useCallback(function (field) {
@@ -80,6 +83,6 @@ var SpreadsheetData = function () {
         });
     }, [dataLength]);
     var showValidationProgress = !isReadOnly && validationPercentage < 100;
-    return (_jsxs(S.SpreadSheetData, { children: [_jsx(GlobalStyle, {}), _jsx(Div, __assign({ h: 32 }, { children: showValidationProgress && (_jsx(ValidationProgress, { totalErrors: totalErrors, validationPercentage: validationPercentage })) })), _jsxs(S.SpreadSheetWrapper, __assign({ h: spreadsheetHeight, dflex: true }, { children: [options.showCheckboxColumn && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, spreadsheetHasXScroll: rowWidth > 1, height: spreadsheetHeight, firstRowIsHeader: options.firstRowIsHeader })), _jsx(SpreadsheetRowNumbers, { gridRef: rowNumbersGridRef, spreadsheetHasXScroll: rowWidth > 1, height: spreadsheetHeight }), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, h: spreadsheetHeight, rowWidth: rowWidth, data: data, columns: columns, isLoading: isLoading, onTableScroll: onTableScroll, getItemKey: getItemKey })] }))] }));
+    return (_jsxs(S.SpreadSheetData, __assign({ h100: true, flexColumn: true }, { children: [_jsx(GlobalStyle, {}), _jsx(Div, __assign({ h: 32 }, { children: showValidationProgress && (_jsx(ValidationProgress, { totalErrors: totalErrors, validationPercentage: validationPercentage })) })), _jsxs(S.SpreadSheetContainer, __assign({ flexColumn: true, w100: true, h100: true }, { children: [currentStepIndex === 2 && _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, isInsideImporter: true })] }))] }))] })));
 };
 export default React.memo(SpreadsheetData, areEqual);

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

@@ -5,6 +5,7 @@ type Props = {
     spreadsheetHasXScroll?: boolean;
     gridRef: React.MutableRefObject<any>;
     firstRowIsHeader?: boolean;
+    isLoadingData?: boolean;
 } & DivCSSProps;
-export declare const SpreadsheetRowCheckboxes: ({ height, spreadsheetHasXScroll, gridRef, firstRowIsHeader, ...props }: Props) => JSX.Element;
+export declare const SpreadsheetRowCheckboxes: ({ height, spreadsheetHasXScroll, gridRef, firstRowIsHeader, isLoadingData, ...props }: Props) => JSX.Element;
 export {};

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

@@ -42,7 +42,9 @@ import { spreadsheetRowHeightPx } from "../common";
 import { spreadsheetHeaderHeightPx } from "../common/index";
 import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
 import { Checkbox } from "../../../../common/inputs/Checkbox";
-var SPREADSHEET_ROW_CHECKBOXES_WIDTH = 40;
+import { useImporterContext } from "../../../contexts/ImporterContextProvider";
+import ReactVirtualizedAutoSizer from "react-virtualized-auto-sizer";
+var StyledGrid = styled(Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n\n  -ms-overflow-style: none;\n  overflow: -moz-scrollbars-none;\n  scrollbar-width: none;\n"], ["\n  ::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n\n  -ms-overflow-style: none;\n  overflow: -moz-scrollbars-none;\n  scrollbar-width: none;\n"])));
 var gridStyles = {
     outline: "none",
     willChange: "unset",
@@ -57,12 +59,19 @@ 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, props = __rest(_a, ["height", "spreadsheetHasXScroll", "gridRef", "firstRowIsHeader"]);
-    var _c = useSpreadsheetContext(), data = _c.data, selectedRows = _c.selectedRows, setSelectedRows = _c.setSelectedRows;
+    var _b, _c, _d, _e;
+    var height = _a.height, spreadsheetHasXScroll = _a.spreadsheetHasXScroll, gridRef = _a.gridRef, _f = _a.firstRowIsHeader, firstRowIsHeader = _f === void 0 ? false : _f, isLoadingData = _a.isLoadingData, props = __rest(_a, ["height", "spreadsheetHasXScroll", "gridRef", "firstRowIsHeader", "isLoadingData"]);
+    var _g = useSpreadsheetContext(), data = _g.data, selectedRows = _g.selectedRows, lastClickedIndexRef = _g.lastClickedIndexRef, setSelectedRows = _g.setSelectedRows;
+    var currentStepIndex = useImporterContext().currentStepIndex;
     var nonEmptyRows = useMemo(function () { return data.filter(function (row) { return !rowIsEmpty(row); }); }, [
         data,
     ]);
     var isIndeterminate = selectedRows.length > 0 && selectedRows.length < nonEmptyRows.length;
+    var lastRowIndexLength = (_e = (_d = (_c = (_b = data[data.length - 1]) === null || _b === void 0 ? void 0 : _b._meta) === null || _c === void 0 ? void 0 : _c.rowIndex) === null || _d === void 0 ? void 0 : _d.toString()) === null || _e === void 0 ? void 0 : _e.length;
+    var singleLetterWidth = 15;
+    var horizontalSpacing = 8;
+    var baseColumnWidth = lastRowIndexLength * singleLetterWidth + horizontalSpacing;
+    var columnWidth = baseColumnWidth < 40 ? 40 : baseColumnWidth;
     var handleRowSelect = function (checked, rowIndex) {
         if (checked && rowIsEmpty(data[rowIndex])) {
             return;
@@ -74,33 +83,90 @@ export var SpreadsheetRowCheckboxes = function (_a) {
         // If the first row is a header, we need to adjust the rowIndex
         var adjustedRowIndex = firstRowIsHeader ? rowIndex - 1 : rowIndex;
         if (checked) {
-            setSelectedRows(function (prev) { return __spreadArray(__spreadArray([], prev, true), [adjustedRowIndex], false); });
+            setSelectedRows(function (prev) { var _a, _b; return __spreadArray(__spreadArray([], prev, true), [(_b = (_a = data[adjustedRowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id], false); });
         }
         else {
-            setSelectedRows(function (prev) { return prev.filter(function (row) { return row !== adjustedRowIndex; }); });
+            setSelectedRows(function (prev) {
+                return prev.filter(function (row) { var _a, _b; return row !== ((_b = (_a = data[adjustedRowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id); });
+            });
+        }
+        lastClickedIndexRef.current = rowIndex;
+    };
+    var handleSelectMultipleRows = function (rowIndex) {
+        var _a, _b;
+        var clickedRowId = (_b = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id;
+        if (selectedRows.includes(clickedRowId)) {
+            // The clicked row is already selected, so we have to remove it
+            var clickedRowIndex = selectedRows.indexOf(clickedRowId);
+            var lastClickedIndex = lastClickedIndexRef.current;
+            var rangeStartIndex_1 = Math.min(clickedRowIndex, lastClickedIndex);
+            var rangeEndIndex_1 = Math.max(clickedRowIndex, lastClickedIndex);
+            var updatedSelectedRows = selectedRows.filter(function (_, index) { return index < rangeStartIndex_1 || index > rangeEndIndex_1; });
+            setSelectedRows(updatedSelectedRows);
+        }
+        else {
+            // The clicked row is not selected, so we have to add it
+            var lastSelectedRowIndex = selectedRows.length - 1;
+            var lastSelectedRowId_1 = selectedRows[lastSelectedRowIndex];
+            var lastSelectedRow = data.find(function (row) { var _a; return ((_a = row === null || row === void 0 ? void 0 : row._meta) === null || _a === void 0 ? void 0 : _a.id) === lastSelectedRowId_1; });
+            var clickedRow = data[rowIndex];
+            var rangeStartIndex = data.indexOf(lastSelectedRow);
+            var rangeEndIndex = data.indexOf(clickedRow);
+            var range = data.slice(Math.min(rangeStartIndex, rangeEndIndex), Math.max(rangeStartIndex, rangeEndIndex) + 1);
+            var rangeIds = range.map(function (row) { return row === null || row === void 0 ? void 0 : row._meta.id; });
+            var updatedSelectedRows = __spreadArray(__spreadArray([], selectedRows, true), rangeIds, true).filter(function (value, index, array) { return array.indexOf(value) === index; });
+            setSelectedRows(updatedSelectedRows);
+            lastClickedIndexRef.current = rowIndex;
         }
     };
     var handleSelectAllRows = function (checked) {
         if (checked) {
             var allRows = data
                 .filter(function (row) { return !rowIsEmpty(row); })
-                .map(function (_, index) { return (firstRowIsHeader ? index - 1 : index); });
+                .map(function (row) {
+                return row === null || row === void 0 ? void 0 : row._meta.id;
+            });
             setSelectedRows(allRows);
         }
         else {
             setSelectedRows([]);
         }
+        lastClickedIndexRef.current = null;
+    };
+    var CheckboxCell = function (_a) {
+        var _b, _c;
+        var rowIndex = _a.rowIndex, adjustedRowIndex = _a.adjustedRowIndex;
+        var currentDataIndex = rowIndex === 0 ? 0 : adjustedRowIndex;
+        var rowMetaId = (_c = (_b = data[currentDataIndex]) === null || _b === void 0 ? void 0 : _b._meta) === null || _c === void 0 ? void 0 : _c.id;
+        return (_jsx(Div, __assign({ className: "checkbox-cell" }, { children: firstRowIsHeader && rowIndex === 0 ? ("") : (_jsx(Checkbox, { isChecked: rowMetaId && selectedRows.includes(rowMetaId), onChange: function (checked) {
+                    return !isLoadingData && handleRowSelect(checked, rowIndex);
+                }, onShiftKeyPressed: function () { return handleSelectMultipleRows(rowIndex); }, style: { cursor: "pointer" }, isDisabled: isLoadingData })) })));
+    };
+    var RowNumbersCell = function (_a) {
+        var rowIndex = _a.rowIndex;
+        return (_jsx(Div, __assign({ className: "row-numbers-cell", textAlignCenter: true, body2: true }, { children: rowIndex + 1 })));
     };
     var Cell = function (_a) {
         var rowIndex = _a.rowIndex, style = _a.style;
         var adjustedRowIndex = firstRowIsHeader ? rowIndex - 1 : rowIndex;
-        return (_jsx(RowCheckbox, __assign({ style: style, alignCenter: true, justifyEnd: true, isLast: adjustedRowIndex === data.length - 1 }, { children: firstRowIsHeader && rowIndex === 0 ? ("") : (_jsx(Checkbox, { isChecked: selectedRows.includes(adjustedRowIndex), onChange: function (checked) { return handleRowSelect(checked, rowIndex); } })) }), adjustedRowIndex));
+        return (_jsxs(RowCheckbox, __assign({ style: style, alignCenter: true, justifyCenter: true, isLast: adjustedRowIndex === data.length - 1 }, { children: [_jsx(CheckboxCell, { rowIndex: rowIndex, adjustedRowIndex: adjustedRowIndex }), _jsx(RowNumbersCell, { rowIndex: rowIndex })] }), adjustedRowIndex));
     };
-    return (_jsxs(SpreadsheetRowCheckboxesContainer, __assign({}, props, { h: height }, { children: [_jsx(SpreadsheetRowCheckboxesHeader, { children: _jsx(Checkbox, { isChecked: selectedRows.length >= nonEmptyRows.length, onChange: handleSelectAllRows, isIndeterminate: isIndeterminate }) }), _jsx(Grid, __assign({ ref: gridRef, style: gridStyles, width: SPREADSHEET_ROW_CHECKBOXES_WIDTH, columnCount: 1, columnWidth: SPREADSHEET_ROW_CHECKBOXES_WIDTH, height: height - spreadsheetHeaderHeightPx, rowHeight: 40, rowCount: data.length }, { children: Cell }))] })));
+    var isSelectAllRowsChekboxChecked = (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) > 0 &&
+        (data === null || data === void 0 ? void 0 : data.length) > 0 &&
+        (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) >= (nonEmptyRows === null || nonEmptyRows === void 0 ? void 0 : nonEmptyRows.length);
+    return (_jsxs(SpreadsheetRowCheckboxesContainer, __assign({ className: "spreadsheet-row-container", columnWidth: columnWidth }, props, { h100: true }, { children: [_jsx(SpreadsheetRowCheckboxesHeader, { children: currentStepIndex === 2 && (_jsx(Checkbox, { isChecked: isSelectAllRowsChekboxChecked, onChange: function (checked) {
+                        return !isLoadingData && handleSelectAllRows(checked);
+                    }, isIndeterminate: isIndeterminate, isDisabled: isLoadingData })) }), _jsx(ReactVirtualizedAutoSizer, { children: function (_a) {
+                    var height = _a.height;
+                    return (_jsx(StyledGrid, __assign({ ref: gridRef, style: gridStyles, width: columnWidth, columnCount: 1, columnWidth: columnWidth, rowHeight: 40, rowCount: data.length, height: height - spreadsheetHeaderHeightPx }, { children: Cell })));
+                } })] })));
 };
-var RowCheckbox = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n"])), function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.label3; }, function (p) {
-    return !p.isLast && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-shadow: inset 0 -1px 0 ", ";\n    "], ["\n      box-shadow: inset 0 -1px 0 ", ";\n    "])), function (p) { return p.theme.colors.gray300; });
+var RowCheckbox = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n\n  .checkbox-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    visibility: hidden;\n    z-index: 1;\n  }\n\n  .row-numbers-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n"], ["\n  background-color: ", ";\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n\n  .checkbox-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    visibility: hidden;\n    z-index: 1;\n  }\n\n  .row-numbers-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])), function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.label3; }, function (p) {
+    return !p.isLast && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      box-shadow: inset 0 -1px 0 ", ";\n    "], ["\n      box-shadow: inset 0 -1px 0 ", ";\n    "])), function (p) { return p.theme.colors.gray300; });
 });
-var SpreadsheetRowCheckboxesHeader = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  height: ", "px;\n  border-top-left-radius: 8px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0 ", ";\n  padding-left: 2px;\n  display: flex;\n  justify-content: center;\n"], ["\n  align-items: center;\n  height: ", "px;\n  border-top-left-radius: 8px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0 ", ";\n  padding-left: 2px;\n  display: flex;\n  justify-content: center;\n"])), spreadsheetRowHeightPx, function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.colors.gray300; });
-var SpreadsheetRowCheckboxesContainer = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: ", "px;\n  border-top-left-radius: 8px;\n  border-right: solid 1px ", ";\n\n  .ReactVirtualized__Grid {\n    /* Scrollbar */\n    ::-webkit-scrollbar {\n      width: 8px;\n    }\n\n    /* Track */\n    ::-webkit-scrollbar-track {\n      background-color: ", " !important;\n    }\n  }\n"], ["\n  width: ", "px;\n  border-top-left-radius: 8px;\n  border-right: solid 1px ", ";\n\n  .ReactVirtualized__Grid {\n    /* Scrollbar */\n    ::-webkit-scrollbar {\n      width: 8px;\n    }\n\n    /* Track */\n    ::-webkit-scrollbar-track {\n      background-color: ", " !important;\n    }\n  }\n"])), SPREADSHEET_ROW_CHECKBOXES_WIDTH, function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.tableHeader; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var SpreadsheetRowCheckboxesHeader = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  height: ", "px;\n  border-top-left-radius: 8px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0 ", ";\n  display: flex;\n  justify-content: center;\n"], ["\n  align-items: center;\n  height: ", "px;\n  border-top-left-radius: 8px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0 ", ";\n  display: flex;\n  justify-content: center;\n"])), spreadsheetRowHeightPx, function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.colors.gray300; });
+var SpreadsheetRowCheckboxesContainer = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-right: solid 1px ", ";\n  border-top-left-radius: 8px;\n  width: ", "px;\n\n  .ReactVirtualized__Grid {\n    /* Scrollbar */\n    ::-webkit-scrollbar {\n      width: 8px;\n    }\n\n    /* Track */\n    ::-webkit-scrollbar-track {\n      background-color: ", " !important;\n    }\n  }\n"], ["\n  border-right: solid 1px ", ";\n  border-top-left-radius: 8px;\n  width: ", "px;\n\n  .ReactVirtualized__Grid {\n    /* Scrollbar */\n    ::-webkit-scrollbar {\n      width: 8px;\n    }\n\n    /* Track */\n    ::-webkit-scrollbar-track {\n      background-color: ", " !important;\n    }\n  }\n"])), function (p) { return p.theme.colors.gray300; }, function (_a) {
+    var columnWidth = _a.columnWidth;
+    return columnWidth || 40;
+}, function (p) { return p.theme.colors.tableHeader; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -31,7 +31,7 @@ import { Div } from "../../../../styled/utils";
 import { spreadsheetRowHeightPx } from "../common";
 import { spreadsheetHeaderHeightPx } from "../common/index";
 import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
-var SPREADSHEET_ROW_NUMBERS_WIDTH = 75;
+var SPREADSHEET_ROW_NUMBERS_WIDTH = 36;
 var gridStyles = {
     outline: "none",
     willChange: "unset",
@@ -43,7 +43,7 @@ export var SpreadsheetRowNumbers = function (_a) {
     var data = useSpreadsheetContext().data;
     var Cell = function (_a) {
         var rowIndex = _a.rowIndex, style = _a.style;
-        return (_jsx(RowNumber, __assign({ style: style, alignCenter: true, justifyEnd: true, isLast: rowIndex === data.length - 1 }, { children: _jsx(Div, __assign({ truncateText: true, mr: 16, textAlignRight: true }, { children: rowIndex + 1 })) }), rowIndex));
+        return (_jsx(RowNumber, __assign({ style: style, alignCenter: true, justifyCenter: true, isLast: rowIndex === data.length - 1 }, { children: _jsx(Div, __assign({ truncateText: true, textAlignCenter: true, body2: true }, { children: rowIndex + 1 })) }), rowIndex));
     };
     return (_jsxs(SpreadsheetRowNumbersContainer, __assign({}, props, { h: height }, { children: [_jsx(SpreadsheetRowNumbersHeader, {}), _jsx(Grid, __assign({ ref: gridRef, style: gridStyles, width: SPREADSHEET_ROW_NUMBERS_WIDTH, columnCount: 1, columnWidth: SPREADSHEET_ROW_NUMBERS_WIDTH, height: height - spreadsheetHeaderHeightPx, rowHeight: 40, rowCount: data.length }, { children: Cell }))] })));
 };

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

@@ -91,6 +91,6 @@ var Wrapper = styled(Div)(function (_a) {
 export var SpreadsheetField = function (_a) {
     var validationError = _a.validationError, validationWarning = _a.validationWarning, children = _a.children;
     var _b = useSpreadsheetContext(), isReadOnly = _b.isReadOnly, isLoading = _b.isLoading;
-    return (_jsx(Wrapper, __assign({ dim: "100%", isLoading: isLoading }, { children: _jsx(TooltipProvider, __assign({ tooltip: validationError || validationWarning }, { children: _jsx(Div, __assign({ dim: "100%" }, { children: _jsx(ContentContainer, __assign({ hasError: !!validationError, hasWarning: !!validationWarning, isReadOnly: isReadOnly }, { children: children })) })) })) })));
+    return (_jsx(Wrapper, __assign({ dim: "100%", isLoading: isLoading }, { children: _jsx(TooltipProvider, __assign({ tooltip: validationError || validationWarning }, { children: _jsx(Div, __assign({ dim: "100%" }, { children: _jsx(ContentContainer, __assign({ hasError: !!validationError, hasWarning: !!validationWarning, isReadOnly: isReadOnly, className: "input-content" }, { children: children })) })) })) })));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -26,6 +26,8 @@ export type ValidationState = {
     };
 };
 type UseValidationStateReturnValue = ValidationState & {
+    deleteRecords: (selectedRecords: string[]) => void;
+    filterRecordsBySearchValue: (obj: RecordDataSet, value: string) => RecordDataSet;
     updateRecordAndRevalidate: (record: Record) => Promise<void>;
     errorsRef: React.MutableRefObject<BatchValidationErrors>;
     warningsRef: React.MutableRefObject<BatchValidationErrors>;

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

@@ -52,6 +52,40 @@ import { selectValidatorsFor, validateRecord } from "./validation";
 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);
+        return stringValue.includes(searchValue);
+    }
+    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
@@ -62,6 +96,31 @@ 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;
+                }
+            }
+        }
+        return filteredObj;
+    };
     //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;
@@ -230,5 +289,7 @@ export var useValidationState = function (_a) {
         errorsRef: errorsRef,
         warningsRef: warningsRef,
         updateRecordAndRevalidate: updateRecordAndRevalidate,
+        deleteRecords: deleteRecords,
+        filterRecordsBySearchValue: filterRecordsBySearchValue,
     };
 };

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

@@ -12,8 +12,8 @@ export type SpreadsheetProps = {
     onValidateRecord?: OnValidateRecord;
     onDataSetChanged?: OnDataSetChanged;
     onValidationStateChanged?: OnValidationStateChanged;
-    selectedRows?: number[];
-    setSelectedRows?: React.Dispatch<React.SetStateAction<number[]>>;
+    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>;
 export default _default;

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

@@ -1,4 +1,10 @@
 /// <reference types="react" />
+interface SpreadSheetWrapperProps {
+    canShowCheckboxOnHover?: boolean;
+    shouldShowOnlyCheckbox?: boolean;
+}
 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, 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, ...props }: import("../../../common/Table/TableView").TableViewProps) => JSX.Element>, import("styled-components").DefaultTheme, {}, 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, isInsideImporter, ...props }: import("../../../common/Table/TableView").TableViewProps) => JSX.Element>, import("styled-components").DefaultTheme, {}, never>;
+export {};

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

@@ -2,10 +2,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from "styled-components";
+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_2 || (templateObject_2 = __makeTemplateObject(["\n  border: solid 1px ", ";\n  border-radius: 8px;\n  background: ", ";\n  overflow: hidden !important;\n  flex-grow: 1;\n  margin-left: 32px;\n  margin-right: 32px;\n"], ["\n  border: solid 1px ", ";\n  border-radius: 8px;\n  background: ", ";\n  overflow: hidden !important;\n  flex-grow: 1;\n  margin-left: 32px;\n  margin-right: 32px;\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.white; });
-export var TableView = styled(TableViewBase)(templateObject_3 || (templateObject_3 = __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; });
-var templateObject_1, templateObject_2, templateObject_3;
+export var SpreadSheetData = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  max-height: 675px;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  max-height: 675px;\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) {
+    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; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/lib/esm/Importer/contexts/ImporterContextProvider.d.ts

@@ -14,6 +14,10 @@ export type EnumFieldValueMatchings = {
 export type UploadedDataEnumFieldValues = {
     [templateHeaderLabel: string]: string[];
 };
+export type SelectedRow = {
+    tableRow: number;
+    dataRowIndex: number;
+};
 export type State = {
     currentStepIndex: number;
     templateError: string | null;
@@ -44,8 +48,8 @@ export type State = {
     formatRecord: FormatRecord;
     onValidateRecord?: OnValidateRecord;
     setMatcherSubstep: React.Dispatch<number>;
-    selectedRows: number[];
-    setSelectedRows: React.Dispatch<React.SetStateAction<number[]>>;
+    selectedRows: string[];
+    setSelectedRows: React.Dispatch<React.SetStateAction<string[]>>;
 };
 export type Props = {
     templateSlug: string;

package/lib/esm/Importer/contexts/ImporterContextProvider.js

@@ -113,12 +113,8 @@ export var ImporterContextProvider = function (_a) {
     useEffect(function () {
         if (uploadedData) {
             setHeadersFromDataset();
-            selectAllRows();
         }
     }, [uploadedData]);
-    var selectAllRows = function () {
-        setSelectedRows(uploadedData.map(function (_, index) { return index; }));
-    };
     useEffect(function () {
         (function () { return __awaiter(void 0, void 0, void 0, function () {
             var _a, organization_1, columns, importer_style_preferences, integrations_1, preview_first_time, columnsOrderedByPosition, error_1, errorMsg;