fuse-importer 0.25.8 → 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,20 +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";
 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 _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows, isUsingManualImport = _b.isUsingManualImport;
     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 }));
+    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,21 +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 { 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 t = useTranslation("upload").t;
     var _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows;
-    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: getSpreadsheetRowWidth(fields, 6), 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/GlobalStyle.js

@@ -3,5 +3,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { createGlobalStyle } from "styled-components";
-export var GlobalStyle = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n #fuse-importer-root > * {\n    font-size: 17px;\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    font-family: DM Sans;\n    color-scheme: normal;\n    color: black;\n  }\n"], ["\n #fuse-importer-root > * {\n    font-size: 17px;\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    font-family: DM Sans;\n    color-scheme: normal;\n    color: black;\n  }\n"])));
+export var GlobalStyle = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  #fuse-importer-root > *,\n  body > * {\n    font-size: 17px;\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    font-family: DM Sans;\n    color-scheme: normal;\n    color: black;\n  }\n"], ["\n  #fuse-importer-root > *,\n  body > * {\n    font-size: 17px;\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    font-family: DM Sans;\n    color-scheme: normal;\n    color: black;\n  }\n"])));
 var templateObject_1;

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,12 +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[];
@@ -41,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,17 +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 { addEmptyRows } from "../../../Importer/data";
 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({
@@ -45,19 +45,30 @@ 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"]);
-    var addNewRowsToSpreadsheet = function () {
+    }), 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);
         setDataSet(function (oldValues) {
             var _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)
@@ -70,8 +81,14 @@ export var SpreadsheetContextProvider = function (_a) {
             }
             return bHasErrors ? 1 : -1;
         });
-    }, [dataSet, filteredInputValue, sortByFieldErrors, sortByFieldWarnings]);
-    addEmptyRows(data, fields);
+    }, [
+        dataSet,
+        filteredInputValue,
+        selectedErrorToFilter,
+        sortByFieldErrors,
+        sortByFieldWarnings,
+    ]);
+    var isFiltering = useMemo(function () { return !!filteredInputValue; }, [filteredInputValue]);
     useEffect(function () {
         onDataSetChanged && onDataSetChanged(dataSet);
         var dataSetKeys = Object.keys(dataSet);
@@ -113,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 });
+    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/common/index.d.ts

@@ -2,9 +2,9 @@ import { Record, Field, FieldTypes } from "../../../../types";
 export declare const spreadsheetRowHeightPx = 40;
 export declare const spreadsheetHeaderHeightPx = 40;
 export declare const isNullOrUndefined: (value: any) => boolean;
-export declare const isEmpty: (value: any) => boolean;
-export declare const isEmail: (value: any) => boolean;
-export declare const isUrl: (value: any) => boolean;
+export declare const isEmpty: (value: string) => boolean;
+export declare const isEmail: (value: string) => boolean;
+export declare const isUrl: (value: string) => boolean;
 export declare const isTrue: (value: string) => boolean;
 export declare const isFalse: (value: string) => boolean;
 export declare const isBoolean: (value: string) => boolean;

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

@@ -11,7 +11,7 @@ export var isEmpty = function (value) {
         (typeof value === "string" && value.trim().length === 0));
 };
 export var isEmail = function (value) {
-    var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
+    var emailRegex = /^[\w+.-]+@([\w-]+\.)+[\w-]{2,4}$/;
     return emailRegex.test(value);
 };
 export var isUrl = function (value) {

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;
+    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;
@@ -83,6 +109,7 @@ var SpreadsheetData = function () {
         });
     }, [dataLength]);
     var showValidationProgress = !isReadOnly && validationPercentage < 100;
-    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: 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, checkboxColumnWidth: checkboxColumnWidth })] }))] }))] })));
+    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, 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/components/fields/SpeadsheetAutocomplete.js

@@ -20,7 +20,7 @@ import { Autocomplete as AutocompleteBase, } from "../../../../../common/inputs/
 import { SelectMenuDiv, SelectMenuScrollArea, } from "../../../../../common/inputs/SelectMenu";
 import { HTMLInput, TextInputIcon, } from "../../../../../common/inputs/TextInput";
 import { spreadsheetRowHeightPx } from "../../common";
-var Autocomplete = styled(AutocompleteBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", " {\n    border: none !important;\n    border-radius: 0;\n    margin: 0;\n    background: transparent;\n    /* TODO: remove !important's when we start rendering importer through iframe */\n    height: ", "px !important;\n    padding: 0 12px !important;\n\n    ", "\n\n    ::placeholder {\n      ", "\n\n      ", "\n\n        ::placeholder {\n        ", "\n      }\n    }\n\n    /* TODO: remove !important's when we start rendering importer through iframe */\n    :focus {\n      border: none !important;\n      box-shadow: none !important;\n    }\n\n    :hover {\n      background: transparent !important;\n    }\n  }\n  ", " {\n    right: 6px;\n  }\n  ", " {\n    border-radius: 7px;\n  }\n  ", " {\n    padding: 4px;\n  }\n"], ["\n  ", " {\n    border: none !important;\n    border-radius: 0;\n    margin: 0;\n    background: transparent;\n    /* TODO: remove !important's when we start rendering importer through iframe */\n    height: ", "px !important;\n    padding: 0 12px !important;\n\n    ", "\n\n    ::placeholder {\n      ", "\n\n      ", "\n\n        ::placeholder {\n        ", "\n      }\n    }\n\n    /* TODO: remove !important's when we start rendering importer through iframe */\n    :focus {\n      border: none !important;\n      box-shadow: none !important;\n    }\n\n    :hover {\n      background: transparent !important;\n    }\n  }\n  ", " {\n    right: 6px;\n  }\n  ", " {\n    border-radius: 7px;\n  }\n  ", " {\n    padding: 4px;\n  }\n"])), HTMLInput, spreadsheetRowHeightPx - 5, function (p) {
+var Autocomplete = styled(AutocompleteBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", " {\n    border: none;\n    border-radius: 0;\n    margin: 0;\n    background: transparent;\n    height: ", "px;\n    padding: 0 12px;\n\n    ", "\n\n    ::placeholder {\n      ", "\n\n      ", "\n\n        ::placeholder {\n        ", "\n      }\n    }\n\n    :focus {\n      border: none;\n      box-shadow: none;\n    }\n\n    :hover {\n      background: transparent;\n    }\n  }\n  ", " {\n    right: 6px;\n  }\n  ", " {\n    border-radius: 7px;\n  }\n  ", " {\n    padding: 4px;\n  }\n"], ["\n  ", " {\n    border: none;\n    border-radius: 0;\n    margin: 0;\n    background: transparent;\n    height: ", "px;\n    padding: 0 12px;\n\n    ", "\n\n    ::placeholder {\n      ", "\n\n      ", "\n\n        ::placeholder {\n        ", "\n      }\n    }\n\n    :focus {\n      border: none;\n      box-shadow: none;\n    }\n\n    :hover {\n      background: transparent;\n    }\n  }\n  ", " {\n    right: 6px;\n  }\n  ", " {\n    border-radius: 7px;\n  }\n  ", " {\n    padding: 4px;\n  }\n"])), HTMLInput, spreadsheetRowHeightPx - 5, function (p) {
     return p.hasWarning && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), function (p) { return p.theme.colors.orange1200; });
 }, function (p) {
     return p.hasWarning && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), function (p) { return p.theme.colors.orange1200; });

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

@@ -35,9 +35,9 @@ export var SpreadsheetInput = function (_a) {
                 return setValue(value);
             } }, props)) })));
 };
-export var Input = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /* Using this styling to prevent CSS conflict from clients importers */\n  /* TODO: remove !important's when we start rendering importer through iframe */\n\n  background: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n  box-sizing: border-box !important;\n  height: calc(100% - 2px) !important;\n  margin: 0px !important;\n  outline: none !important;\n  width: 100% !important;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  padding: 0 12px !important;\n  ", ";\n  color: ", " !important;\n  ::placeholder {\n    color: ", " !important;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  /* Using this styling to prevent CSS conflict from clients importers */\n  /* TODO: remove !important's when we start rendering importer through iframe */\n\n  background: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n  box-sizing: border-box !important;\n  height: calc(100% - 2px) !important;\n  margin: 0px !important;\n  outline: none !important;\n  width: 100% !important;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  padding: 0 12px !important;\n  ", ";\n  color: ", " !important;\n  ::placeholder {\n    color: ", " !important;\n  }\n\n  ", "\n\n  ", "\n"])), function (props) { return props.theme.css.body1; }, function (props) { return props.theme.colors.gray1000; }, function (props) { return props.theme.colors.placeholder; }, function (p) {
-    return p.hasWarning && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", " !important;\n    "], ["\n      color: ", " !important;\n    "])), function (p) { return p.theme.colors.orange1200; });
+export var Input = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: calc(100% - 2px);\n  margin: 0px;\n  outline: none;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  padding: 0 12px;\n  ", ";\n  color: ", ";\n  ::placeholder {\n    color: ", ";\n  }\n\n  ", "\n\n  ", "\n"], ["\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: calc(100% - 2px);\n  margin: 0px;\n  outline: none;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  padding: 0 12px;\n  ", ";\n  color: ", ";\n  ::placeholder {\n    color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), function (props) { return props.theme.css.body1; }, function (props) { return props.theme.colors.gray1000; }, function (props) { return props.theme.colors.placeholder; }, function (p) {
+    return p.hasWarning && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.orange1200; });
 }, function (p) {
-    return p.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", " !important;\n    "], ["\n      color: ", " !important;\n    "])), function (p) { return p.theme.colors.error; });
+    return p.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.error; });
 });
 var templateObject_1, templateObject_2, templateObject_3;

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,44 +49,10 @@ import { omit, set } from "lodash";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { sleep } from "../../..";
 import { selectValidatorsFor, validateRecord } from "./validation";
+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
@@ -97,31 +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;
-                }
-            }
-        }
-        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;
@@ -292,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, isInsideImporter, checkboxColumnWidth, ...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 = 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;