fuse-importer 0.26.7 → 0.26.9

package/lib/esm/Importer/ImporterWithContext.js

@@ -15,13 +15,10 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import styled, { css, ThemeProvider } from "styled-components";
+import { useTranslation } from "react-i18next";
+import styled, { ThemeProvider, css } from "styled-components";
 import { Toast } from "../common";
 import { Div } from "../styled";
-import { Footer } from "./common/Footer";
-import { GlobalStyle } from "./common/GlobalStyle";
-import { ImporterFonts } from "./common/ImporterFonts";
-import { useImporterContext } from "./contexts/ImporterContextProvider";
 import Matcher from "./Matcher";
 import { PreviewFirstTime } from "./PreviewFirstTime";
 import { PreviewModeBanner } from "./PreviewModeBanner";
@@ -30,7 +27,11 @@ import { ReviewContextProvider } from "./Review/ReviewContextProvider";
 import { Stepper } from "./Stepper/index";
 import { TrialModeBanner } from "./TrialModeBanner";
 import Uploader from "./Uploader";
-import { useTranslation } from "react-i18next";
+import { AppLoading } from "./common/AppLoading";
+import { Footer } from "./common/Footer";
+import { GlobalStyle } from "./common/GlobalStyle";
+import { ImporterFonts } from "./common/ImporterFonts";
+import { useImporterContext } from "./contexts/ImporterContextProvider";
 export var Layout = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  left: 0;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: ", ";\n  ", ";\n"], ["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  left: 0;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.backgroundInterface;
@@ -40,21 +41,22 @@ var Content = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplate
     return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    flex: ", ";\n  "], ["\n    background-color: ", ";\n    flex: ", ";\n  "])), colors.backgroundInterface, inTrialMode ? "none" : 1);
 });
 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;
+    var _a = useImporterContext(), inTrialMode = _a.inTrialMode, currentStepIndex = _a.currentStepIndex, matcherSubstep = _a.matcherSubstep, templateHeaders = _a.templateHeaders, theme = _a.theme, logoURL = _a.logoURL, previewFirstTime = _a.previewFirstTime, headerRowIndex = _a.headerRowIndex, initialRecords = _a.initialRecords, _b = _a.importerOptions, zIndex = _b.zIndex, previewMode = _b.previewMode;
     var layoutRef = useRef(null);
     var t = useTranslation().t;
     useEffect(function () {
-        layoutRef.current.scrollTo(0, 0);
-    }, [currentStepIndex, matcherSubstep]);
+        var _a;
+        (_a = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
+    }, [currentStepIndex, matcherSubstep, layoutRef.current]);
     var stepLabels = [
         t("general:steps.upload"),
         t("general:steps.match"),
         t("general:steps.review"),
     ];
     function renderContent() {
-        return (_jsxs(_Fragment, { children: [_jsxs(Div, { children: [previewMode && _jsx(PreviewModeBanner, {}), !previewMode && _jsx(TrialModeBanner, {}), _jsx(Stepper, { stepLabels: stepLabels, logoURL: logoURL })] }), _jsxs(Content, { children: [currentStepIndex === 0 && _jsx(Uploader, {}), currentStepIndex === 1 && _jsx(Matcher, {}), currentStepIndex === 2 && _jsx(Review, {})] }), inTrialMode && (_jsx(Content, __assign({ inTrialMode: inTrialMode }, { children: _jsx(Footer, {}) })))] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(Div, { children: [previewMode && _jsx(PreviewModeBanner, {}), !previewMode && _jsx(TrialModeBanner, {}), _jsx(Stepper, { stepLabels: stepLabels, logoURL: logoURL })] }), _jsxs(Content, { children: [currentStepIndex === 0 && _jsx(Uploader, {}), currentStepIndex === 1 && _jsx(Matcher, {}), currentStepIndex === 2 && templateHeaders && _jsx(Review, {})] }), inTrialMode && (_jsx(Content, __assign({ inTrialMode: inTrialMode }, { children: _jsx(Footer, {}) })))] }));
     }
     var shouldShowPreviewFirstTime = previewFirstTime && previewMode;
-    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Toast, {}), _jsx(GlobalStyle, {}), _jsx(ImporterFonts, {}), _jsx(ReviewContextProvider, { children: _jsx(Layout, __assign({ zIndex: zIndex, ref: layoutRef }, { children: shouldShowPreviewFirstTime ? _jsx(PreviewFirstTime, {}) : renderContent() })) })] })));
+    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Toast, {}), _jsx(GlobalStyle, {}), _jsx(ImporterFonts, {}), templateHeaders ? (_jsx(ReviewContextProvider, __assign({ initialRecords: initialRecords }, { children: _jsx(Layout, __assign({ zIndex: zIndex, ref: layoutRef }, { children: shouldShowPreviewFirstTime ? (_jsx(PreviewFirstTime, {})) : (renderContent()) })) }))) : (_jsx(AppLoading, {}))] })));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/Importer/Review/ReviewContextProvider.d.ts

@@ -1,4 +1,4 @@
-import { AppResponse, Field, OnValidateRecord, RecordDataSet } from "../../types";
+import { AppResponse, Field, OnValidateRecord, Record, RecordDataSet } from "../../types";
 import { OnDataSetChanged, OnValidationStateChanged } from "../common/Spreadsheet";
 type State = {
     previewInitialDataSet: RecordDataSet;
@@ -21,8 +21,9 @@ type State = {
 };
 type ExportDataType = "csv" | "excel";
 type Props = {
+    initialRecords?: Record[];
     children: JSX.Element;
 };
-export declare const ReviewContextProvider: ({ children }: Props) => JSX.Element;
+export declare const ReviewContextProvider: ({ initialRecords, children }: Props) => JSX.Element;
 export declare const useReviewContext: () => State;
 export {};

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

@@ -72,7 +72,8 @@ import { AppLoading } from "../common/AppLoading";
 import { isRecordEmpty } from "../common/Spreadsheet/common";
 import { sendRecordsToIntegrations } from "../common/utils";
 import { useImporterContext } from "../contexts/ImporterContextProvider";
-import { getPreviewDataSet, getReviewDataSet, recordListToDataSet, } from "../data";
+import { transformToRecords } from "../data/index";
+import { getPreviewDataSet, getReviewDataSet, getTemplateFields, recordListToDataSet, } from "../data";
 var ReviewContext = createContext({});
 var trackImportedRowsCount = function (fuseApi, templateSlug, rowCount) { return __awaiter(void 0, void 0, void 0, function () {
     var error_1, errorMessage;
@@ -123,8 +124,8 @@ function csvExport(data) {
     writeFile(workbook, "export.csv");
 }
 export var ReviewContextProvider = function (_a) {
-    var children = _a.children;
-    var _b = useImporterContext(), templateHeaderMatchings = _b.templateHeaderMatchings, enumFieldValueMatchings = _b.enumFieldValueMatchings, templateHeaders = _b.templateHeaders, uploadedDataHeaders = _b.uploadedDataHeaders, uploadedData = _b.uploadedData, currentStepIndex = _b.currentStepIndex, integrations = _b.integrations, templateSlug = _b.templateSlug, fuseApi = _b.fuseApi, _c = _b.importerOptions, disableSubmitIfInvalid = _c.disableSubmitIfInvalid, batchValidationDelayMs = _c.batchValidationDelayMs, batchValidationSize = _c.batchValidationSize, previewMode = _c.previewMode, loadingComponent = _c.loadingComponent, onSubmit = _b.onSubmit, onValidateRecord = _b.onValidateRecord, formatRecord = _b.formatRecord, selectedRows = _b.selectedRows;
+    var initialRecords = _a.initialRecords, children = _a.children;
+    var _b = useImporterContext(), templateHeaderMatchings = _b.templateHeaderMatchings, enumFieldValueMatchings = _b.enumFieldValueMatchings, templateHeaders = _b.templateHeaders, uploadedDataHeaders = _b.uploadedDataHeaders, headerRowIndex = _b.headerRowIndex, uploadedData = _b.uploadedData, currentStepIndex = _b.currentStepIndex, integrations = _b.integrations, templateSlug = _b.templateSlug, fuseApi = _b.fuseApi, setSelectedRows = _b.setSelectedRows, _c = _b.importerOptions, disableSubmitIfInvalid = _c.disableSubmitIfInvalid, batchValidationDelayMs = _c.batchValidationDelayMs, batchValidationSize = _c.batchValidationSize, previewMode = _c.previewMode, loadingComponent = _c.loadingComponent, onSubmit = _b.onSubmit, onValidateRecord = _b.onValidateRecord, formatRecord = _b.formatRecord, selectedRows = _b.selectedRows;
     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];
@@ -238,27 +239,26 @@ export var ReviewContextProvider = function (_a) {
             setPreviewInitialDataSet(initialDataSet);
         }
         else if (currentStepIndex === 2) {
+            var fields = getTemplateFields({ templateHeaders: templateHeaders });
             //Review spreadsheet data
-            var _b = getReviewDataSet({
-                enumFieldValueMatchings: enumFieldValueMatchings,
-                templateHeaderMatchings: templateHeaderMatchings,
-                templateHeaders: templateHeaders,
-                uploadedDataHeaders: uploadedDataHeaders,
-                uploadedData: uploadedData,
-                formatRecord: formatRecord,
-            }), fields = _b.fields, initialDataSet = _b.initialDataSet;
+            var _records = initialRecords ||
+                transformToRecords({
+                    templateHeaderMatchings: templateHeaderMatchings,
+                    enumFieldValueMatchings: enumFieldValueMatchings,
+                    templateHeaders: templateHeaders,
+                    uploadedDataHeaders: uploadedDataHeaders,
+                    uploadedData: uploadedData.slice(headerRowIndex + 1),
+                    formatRecord: formatRecord,
+                });
+            var initialDataSet = getReviewDataSet({
+                records: _records,
+                fields: fields,
+            }).initialDataSet;
+            setSelectedRows([]);
             setReviewFields(fields);
             setReviewInitialDataSet(initialDataSet);
         }
-    }, [
-        uploadedData,
-        currentStepIndex,
-        enumFieldValueMatchings,
-        templateHeaderMatchings,
-        templateHeaders,
-        uploadedDataHeaders,
-        uploadedData,
-    ]);
+    }, [uploadedData, currentStepIndex, templateHeaders, uploadedData]);
     var value = {
         previewInitialDataSet: previewInitialDataSet,
         previewFields: previewFields,

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

@@ -15,18 +15,18 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
-import { Button, closeIconCondensed, ChevronRightIcon } from "../../common";
+import { Button, ChevronRightIcon, closeIconCondensed } from "../../common";
 import { Div } from "../../styled/utils";
-import { useImporterContext } from "../contexts/ImporterContextProvider";
-import { useReviewContext } from "../Review/ReviewContextProvider";
 import { ColumnType } from "../Matcher/common/types";
-import { getEnumFieldValueMatchingsInitialValue } from "./common/getEnumFieldValueMatchingsInitialValue";
+import { useReviewContext } from "../Review/ReviewContextProvider";
+import { useImporterContext } from "../contexts/ImporterContextProvider";
+import { ConfirmCloseModal } from "./ConfirmCloseModal";
 import { Step } from "./Step";
 import { StepperSubmitModal } from "./StepperSubmitModal";
 import { UnmatchedHeadersModal } from "./UnmatchedHeadersModal";
-import { ConfirmCloseModal } from "./ConfirmCloseModal";
-import { useTranslation } from "react-i18next";
+import { getEnumFieldValueMatchingsInitialValue } from "./common/getEnumFieldValueMatchingsInitialValue";
 var StepperWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  user-select: none;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  user-select: none;\n"])), function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.gray300; });
 var StepperContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n  padding-left: 32px;\n  padding-right: 32px;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n  padding-left: 32px;\n  padding-right: 32px;\n  width: 100%;\n"])));
 var Steps = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  @media (max-width: 630px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 630px) {\n    display: none;\n  }\n"])));
@@ -44,7 +44,7 @@ export var Stepper = function (_a) {
     var _c = useState(false), isSubmitModalOpen = _c[0], setIsSubmitModalOpen = _c[1];
     var _d = useState(false), isConfirmCloseModalOpen = _d[0], setIsConfirmCloseModalOpen = _d[1];
     var _e = useReviewContext(), appResponse = _e.appResponse, isSubmitDisabled = _e.isSubmitDisabled, onSubmit = _e.onSubmit;
-    var _f = useImporterContext(), currentStepIndex = _f.currentStepIndex, templateHeaderMatchings = _f.templateHeaderMatchings, matcherSubstep = _f.matcherSubstep, templateHeaders = _f.templateHeaders, uploadedDataEnumFieldValues = _f.uploadedDataEnumFieldValues, setEnumFieldValueMatchings = _f.setEnumFieldValueMatchings, setMatcherSubstep = _f.setMatcherSubstep, setCurrentStepIndex = _f.setCurrentStepIndex, onClose = _f.onClose, isUsingManualImport = _f.isUsingManualImport, resetImporterWhenUsingManualImport = _f.resetImporterWhenUsingManualImport, uploadedData = _f.uploadedData;
+    var _f = useImporterContext(), initialRecords = _f.initialRecords, currentStepIndex = _f.currentStepIndex, templateHeaderMatchings = _f.templateHeaderMatchings, matcherSubstep = _f.matcherSubstep, templateHeaders = _f.templateHeaders, uploadedDataEnumFieldValues = _f.uploadedDataEnumFieldValues, setEnumFieldValueMatchings = _f.setEnumFieldValueMatchings, setMatcherSubstep = _f.setMatcherSubstep, setCurrentStepIndex = _f.setCurrentStepIndex, onClose = _f.onClose, isUsingManualImport = _f.isUsingManualImport, resetImporterWhenUsingManualImport = _f.resetImporterWhenUsingManualImport, uploadedData = _f.uploadedData;
     var templateHeaderLabels = Object.keys(templateHeaderMatchings || []);
     var unmatchedHeadersCount = templateHeaderLabels.filter(function (templateHeaderLabel) { return !templateHeaderMatchings[templateHeaderLabel]; }).length;
     var isLastSubMatchStep = matcherSubstep === 1;
@@ -103,12 +103,13 @@ export var Stepper = function (_a) {
     var isVerifyStep = currentStepIndex === 0 && !!uploadedData;
     var isMatchStep = currentStepIndex === 1;
     var isReviewStep = currentStepIndex === 2;
-    var stepsUI = (_jsx(Div, __assign({ dflex: true, centered: true }, { children: stepLabels.map(function (label, index) {
-            var isLast = index === stepLabels.length - 1;
-            var isCompleted = index < currentStepIndex;
-            return (_jsxs(Div, __assign({ centered: true }, { children: [_jsx(Step, { index: index, label: label, isCompleted: isCompleted, isSelected: index === currentStepIndex }), !isLast && (_jsx(Div, __assign({ ml: 18, mr: 18, dflex: true }, { children: _jsx(ChevronRightIcon, {}) })))] }), index));
-        }) })));
-    var leftButtonUI = (_jsx(Div, __assign({ style: { flex: 1 } }, { children: _jsxs(StepperButtonContainer, __assign({ align: "left" }, { children: [logoURL && (_jsx(Div, __assign({ forDesktop: true }, { children: _jsx(Logo, { src: logoURL, alt: "" }) }))), currentStepIndex > 0 && !appResponse && (_jsx(GoBackButtonWrapper, { children: _jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: t("stepper.go_back") })) }))] })) })));
+    var stepsUI = (_jsx(Div, __assign({ dflex: true, centered: true }, { children: !initialRecords &&
+            stepLabels.map(function (label, index) {
+                var isLast = index === stepLabels.length - 1;
+                var isCompleted = index < currentStepIndex;
+                return (_jsxs(Div, __assign({ centered: true }, { children: [_jsx(Step, { index: index, label: label, isCompleted: isCompleted, isSelected: index === currentStepIndex }), !isLast && (_jsx(Div, __assign({ ml: 18, mr: 18, dflex: true }, { children: _jsx(ChevronRightIcon, {}) })))] }), index));
+            }) })));
+    var leftButtonUI = (_jsx(Div, __assign({ style: { flex: 1 } }, { children: !initialRecords && (_jsxs(StepperButtonContainer, __assign({ align: "left" }, { children: [logoURL && (_jsx(Div, __assign({ forDesktop: true }, { children: _jsx(Logo, { src: logoURL, alt: "" }) }))), currentStepIndex > 0 && !appResponse && (_jsx(GoBackButtonWrapper, { children: _jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: t("stepper.go_back") })) }))] }))) })));
     var rightButtonUI = (_jsxs(StepperButtonContainer, __assign({ align: "right" }, { children: [(isMatchStep || isVerifyStep) && (_jsx(Button, __assign({ variant: "primary", onClick: continueToNextStep }, { children: t("stepper.continue") }))), isReviewStep && (_jsx(Button, __assign({ variant: "primary", isDisabled: isSubmitDisabled, onClick: function () { return setIsSubmitModalOpen(true); } }, { children: t("stepper.submit") }))), _jsx(CloseIcon, __assign({ "data-test-id": "close-importer", centered: true, clickable: true, onClick: handleOnClose }, { children: closeIconCondensed }))] })));
     return (_jsxs(_Fragment, { children: [_jsx(StepperWrapper, __assign({ pRelative: true, alignCenter: true, w100: true, h: 72, centered: true }, { children: _jsxs(StepperContainer, { children: [leftButtonUI, _jsx(Steps, __assign({ alignCenter: true }, { children: stepsUI })), rightButtonUI] }) })), _jsx(UnmatchedHeadersModal, { isUnmatchedHeadersModalOpen: isUnmatchedHeadersModalOpen, unmatchedHeadersCount: unmatchedHeadersCount, onSetStep: function () { return setStep(); }, onCloseUnmatchedHeadersModal: function () {
                     return setIsUnmatchedHeadersModalOpen(false);

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

@@ -15,22 +15,30 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { Div } from "../../styled/utils";
 import { useReviewContext } from "../Review/ReviewContextProvider";
-import Spreadsheet from "../common/Spreadsheet";
+import SpreadsheetBase from "../common/Spreadsheet";
 import { useImporterContext } from "../contexts/ImporterContextProvider";
 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"])));
+import { useEffect } from "react";
+var Spreadsheet = styled(SpreadsheetBase)(function () { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    /* rows will be removed for match and review steps */\n    .before-selected-row {\n      opacity: 0.2;\n    }\n  "], ["\n    /* rows will be removed for match and review steps */\n    .before-selected-row {\n      opacity: 0.2;\n    }\n  "]))); });
+var HeaderContainer = styled(Div)(templateObject_2 || (templateObject_2 = __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_3 || (templateObject_3 = __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, { isReadOnly: true, initialDataSet: initialDataSet, fields: fields, highlightFirstRow: true, options: {
+    var _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows, setHeaderRowIndex = _b.setHeaderRowIndex;
+    useEffect(function () {
+        if (initialDataSet && selectedRows[0]) {
+            var headerRowIndex = Object.keys(initialDataSet).findIndex(function (key) { return key === selectedRows[0]; });
+            setHeaderRowIndex(headerRowIndex);
+        }
+    }, [initialDataSet, selectedRows]);
+    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, options: {
                         showCheckboxColumn: true,
-                        firstRowIsHeader: true,
+                        withSingleRowSelect: true,
                     }, selectedRows: selectedRows, setSelectedRows: setSelectedRows })) }))] })));
 };
 export default HeadersPreview;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,5 @@
+import { BatchValidationErrors, RecordDataSet } from "../../../../types";
+import { SpreadsheetFilter } from "./useSpreadsheetFilter";
+export declare const filterRecordsBySearchValue: (obj: RecordDataSet, value: string) => RecordDataSet;
+export declare const filterRecordsByType: (obj: RecordDataSet, filterType: SpreadsheetFilter["byRow"]) => RecordDataSet;
+export declare const filterRecordsByError: (obj: RecordDataSet, keyToFilter: string, errors: BatchValidationErrors) => RecordDataSet;

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

@@ -0,0 +1,56 @@
+//Filter records by search value
+export var filterRecordsBySearchValue = function (obj, value) {
+    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;
+    };
+    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)) {
+            continue;
+        }
+        var matches = Object.values(currentObj).some(function (propertyValue) {
+            return includesSearchValue(propertyValue, value);
+        });
+        if (matches) {
+            filteredObj[key] = currentObj;
+        }
+    }
+    return filteredObj;
+};
+export var filterRecordsByType = function (obj, filterType) {
+    var _a, _b;
+    var rowIsEmpty = function (row) {
+        return Object.keys(row).every(function (key) {
+            if (key === "_meta")
+                return true;
+            return !row[key];
+        });
+    };
+    var filteredObj = {};
+    for (var key in obj) {
+        if (filterType === "all" ||
+            (((_b = (_a = obj[key]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.isInvalid) !== (filterType === "valid") &&
+                !rowIsEmpty(obj[key]))) {
+            filteredObj[key] = obj[key];
+        }
+    }
+    return filteredObj;
+};
+//Filter records by selected column error
+export var filterRecordsByError = function (obj, keyToFilter, errors) {
+    var filteredObj = {};
+    var filteredKeys = Object.keys(errors).filter(function (key) { var _a, _b; return ((_b = (_a = obj[key]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.isInvalid) && errors[key][keyToFilter]; });
+    for (var i = 0; i < filteredKeys.length; i++) {
+        filteredObj[filteredKeys[i]] = obj[filteredKeys[i]];
+    }
+    return filteredObj;
+};

package/lib/esm/Importer/common/Spreadsheet/{SpreadsheetContextProvider.d.ts → SpreadsheetContextProvider/index.d.ts}

@@ -1,8 +1,9 @@
 import React from "react";
-import { SpreadsheetOptions } from "../../..";
-import { BatchValidationErrors, Field, Record, RecordDataSet } from "../../../types";
-import { SortBy, SpreadsheetProps } from "./common/types";
-import { ValidationState } from "./hooks";
+import { SpreadsheetOptions } from "../../../..";
+import { BatchValidationErrors, Field, Record, RecordDataSet } from "../../../../types";
+import { SortBy, SpreadsheetProps } from "../common/types";
+import { ValidationState } from "../hooks";
+import { SpreadsheetFilter } from "./useSpreadsheetFilter";
 export type OnDataSetChanged = (dataSet: RecordDataSet) => void;
 export type OnValidationStateChanged = (state: ValidationState) => void;
 type State = {
@@ -12,7 +13,6 @@ type State = {
     isReadOnly?: boolean;
     errors: BatchValidationErrors;
     warnings: BatchValidationErrors;
-    highlightFirstRow: boolean;
     options: SpreadsheetOptions;
     sortByFieldErrors: string;
     sortByFieldWarnings: string;
@@ -26,9 +26,13 @@ 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;
+    spreadsheetFilter: SpreadsheetFilter;
+    filterRecordsByRowType: (filterByRow: SpreadsheetFilter["byRow"]) => void;
+    filterRecordsByFieldErrors: (filterByColumn: string) => void;
+    resetSpreadsheetFilter: () => void;
+    recordsWithValuesCount: number;
+    filteredDataCount: number;
     checkboxColumnWidth: number;
     isFiltering: boolean;
     sortBy: SortBy | null;
@@ -37,6 +41,6 @@ type State = {
 type Props = SpreadsheetProps & {
     children: JSX.Element;
 };
-export declare const SpreadsheetContextProvider: ({ initialDataSet, fields, options, isReadOnly, highlightFirstRow, children, onValidateRecord, onDataSetChanged, onValidationStateChanged, selectedRows, setSelectedRows, getSortCompareFn, }: Props) => JSX.Element;
+export declare const SpreadsheetContextProvider: ({ initialDataSet, fields, options, isReadOnly, children, onValidateRecord, onDataSetChanged, onValidationStateChanged, selectedRows, setSelectedRows, getSortCompareFn, }: Props) => JSX.Element;
 export declare const useSpreadsheetContext: () => State;
 export {};

package/lib/esm/Importer/common/Spreadsheet/{SpreadsheetContextProvider.js → SpreadsheetContextProvider/index.js}

@@ -23,8 +23,11 @@ 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 { addMeta } from "../../../Importer/data";
-import { useValidationState } from "./hooks";
+import { addMeta } from "../../../data";
+import { useValidationState } from "../hooks";
+import { useSpreadsheetFilter, } from "./useSpreadsheetFilter";
+import { filterRecordsByType, filterRecordsByError, filterRecordsBySearchValue, } from "./filterMethods";
+import { hasValueInAnyField } from "./utils";
 var getDefaultSortCompareFn = function (sortBy) {
     return function (a, b) {
         var aField = get(a, sortBy.field);
@@ -42,15 +45,15 @@ var getDefaultSortCompareFn = function (sortBy) {
 };
 var SpreadsheetContext = createContext({});
 export var SpreadsheetContextProvider = function (_a) {
-    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, _b = _a.getSortCompareFn, getSortCompareFn = _b === void 0 ? getDefaultSortCompareFn : _b;
+    var initialDataSet = _a.initialDataSet, fields = _a.fields, options = _a.options, isReadOnly = _a.isReadOnly, children = _a.children, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows, _b = _a.getSortCompareFn, getSortCompareFn = _b === void 0 ? getDefaultSortCompareFn : _b;
     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 _h = useState(""), selectedErrorToFilter = _h[0], setSelectedErrorToFilter = _h[1];
-    var _j = useState(null), sortBy = _j[0], setSortBy = _j[1];
+    var _h = useState(null), sortBy = _h[0], setSortBy = _h[1];
     var addRowTimeoutRef = useRef(null);
+    var _j = useSpreadsheetFilter(), spreadsheetFilter = _j.spreadsheetFilter, filterRecordsByRowType = _j.filterRecordsByRowType, filterRecordsByFieldErrors = _j.filterRecordsByFieldErrors, resetSpreadsheetFilter = _j.resetSpreadsheetFilter;
     var _k = useValidationState({
         dataSet: dataSet,
         initialDataSet: initialDataSet,
@@ -60,10 +63,14 @@ export var SpreadsheetContextProvider = function (_a) {
         setDataSet: setDataSet,
         setIsLoading: setIsLoading,
         onValidateRecord: onValidateRecord,
-    }), updateRecordAndRevalidate = _k.updateRecordAndRevalidate, deleteRecords = _k.deleteRecords, filterRecordsBySearchValue = _k.filterRecordsBySearchValue, filterRecordsByError = _k.filterRecordsByError, warnings = _k.warnings, errors = _k.errors, validationState = __rest(_k, ["updateRecordAndRevalidate", "deleteRecords", "filterRecordsBySearchValue", "filterRecordsByError", "warnings", "errors"]);
+    }), updateRecordAndRevalidate = _k.updateRecordAndRevalidate, deleteRecords = _k.deleteRecords, warnings = _k.warnings, errors = _k.errors, validationState = __rest(_k, ["updateRecordAndRevalidate", "deleteRecords", "warnings", "errors"]);
     var addNewRowsToSpreadsheet = function () {
         addRowTimeoutRef.current = setTimeout(function () {
-            var highestRowIndex = Math.max.apply(Math, Object.values(dataSet).map(function (obj) { return obj._meta.rowIndex; }));
+            var _a, _b;
+            var highestRowIndex = -1;
+            for (var key in dataSet)
+                if (((_b = (_a = dataSet[key]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.rowIndex) > highestRowIndex)
+                    highestRowIndex = dataSet[key]._meta.rowIndex;
             var newRow = addMeta({}, highestRowIndex + 1);
             setDataSet(function (oldValues) {
                 var _a;
@@ -76,16 +83,13 @@ export var SpreadsheetContextProvider = function (_a) {
         deleteRecords(selectedRows, errors, warnings);
     };
     var dataSnapshot = useMemo(function () {
+        var filteredData = spreadsheetFilter.type === "rowBased"
+            ? filterRecordsByType(dataSet, spreadsheetFilter.byRow)
+            : filterRecordsByError(dataSet, spreadsheetFilter.byColumn.field, errors);
         var filteredDatasetByString = filteredInputValue
-            ? filterRecordsBySearchValue(dataSet, filteredInputValue, fields)
-            : dataSet;
-        var filteredDatasetByError = selectedErrorToFilter
-            ? filterRecordsByError(filteredDatasetByString, selectedErrorToFilter, errors, fields)
-            : filteredDatasetByString;
-        var dataSetValues = Object.values(filteredDatasetByError);
-        if (dataSetValues.length === 0) {
-            setSelectedErrorToFilter("");
-        }
+            ? filterRecordsBySearchValue(filteredData, filteredInputValue)
+            : filteredData;
+        var dataSetValues = Object.values(filteredDatasetByString);
         if (sortBy) {
             return dataSetValues.sort(getSortCompareFn(sortBy));
         }
@@ -101,12 +105,18 @@ export var SpreadsheetContextProvider = function (_a) {
         return dataSetValues;
     }, [
         filteredInputValue,
-        selectedErrorToFilter,
+        spreadsheetFilter,
         sortBy,
         Object.keys(dataSet).length,
         sortByFieldErrors,
         sortByFieldWarnings,
     ]);
+    var recordsWithValuesCount = useMemo(function () {
+        return Object.values(dataSet).filter(hasValueInAnyField).length;
+    }, [dataSet]);
+    var filteredDataCount = useMemo(function () {
+        return Object.values(dataSnapshot).filter(hasValueInAnyField).length;
+    }, [dataSnapshot]);
     var isFiltering = useMemo(function () { return !!filteredInputValue; }, [filteredInputValue]);
     useEffect(function () {
         onDataSetChanged && onDataSetChanged(dataSet);
@@ -155,7 +165,7 @@ export var SpreadsheetContextProvider = function (_a) {
             return updatedData;
         });
     }, [dataSet, dataSnapshot]);
-    var value = __assign(__assign({ data: updatedDataSnapshot, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, highlightFirstRow: highlightFirstRow, options: options, sortBy: sortBy, warnings: warnings, errors: errors, 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, setSortBy: setSortBy, isFiltering: isFiltering });
+    var value = __assign(__assign({ data: updatedDataSnapshot, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, options: options, recordsWithValuesCount: recordsWithValuesCount, filteredDataCount: filteredDataCount, sortBy: sortBy, warnings: warnings, errors: errors, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, setSortByFieldWarnings: handleSortByFieldWarnings, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows, deleteRecords: handleDeleteErrors, filteredInputValue: filteredInputValue, setFilteredInputValue: setFilteredInputValue, lastClickedIndexRef: lastClickedIndexRef, addNewRowsToSpreadsheet: addNewRowsToSpreadsheet, spreadsheetFilter: spreadsheetFilter, resetSpreadsheetFilter: resetSpreadsheetFilter, filterRecordsByRowType: filterRecordsByRowType, filterRecordsByFieldErrors: filterRecordsByFieldErrors, checkboxColumnWidth: checkboxColumnWidth, setSortBy: setSortBy, isFiltering: isFiltering });
     return (_jsx(SpreadsheetContext.Provider, __assign({ value: value }, { children: children })));
 };
 export var useSpreadsheetContext = function () { return useContext(SpreadsheetContext); };

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

@@ -0,0 +1,14 @@
+export type SpreadsheetFilter = {
+    type: "rowBased" | "columnBased";
+    byRow?: "all" | "invalid" | "valid";
+    byColumn?: {
+        type: "fieldWithErrors";
+        field: string;
+    };
+};
+export declare const useSpreadsheetFilter: () => {
+    spreadsheetFilter: SpreadsheetFilter;
+    filterRecordsByRowType: (filterByRow: SpreadsheetFilter["byRow"]) => void;
+    filterRecordsByFieldErrors: (filterByColumn: string) => void;
+    resetSpreadsheetFilter: () => void;
+};

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

@@ -0,0 +1,45 @@
+import { useReducer } from "react";
+export var useSpreadsheetFilter = function () {
+    var filtersInitialState = {
+        type: "rowBased",
+        byRow: "all",
+    };
+    function reducer(state, action) {
+        switch (action.type) {
+            case "FILTER_BY_ROW_TYPE":
+                return { type: "rowBased", byRow: action.payload, byColumn: null };
+            case "FILTER_BY_FIELD_ERRORS":
+                return {
+                    type: "columnBased",
+                    byColumn: {
+                        type: "fieldWithErrors",
+                        field: action.payload,
+                    },
+                    byRow: null,
+                };
+            case "RESTORE_FILTERS":
+                return filtersInitialState;
+            default:
+                return state;
+        }
+    }
+    var _a = useReducer(reducer, filtersInitialState), spreadsheetFilter = _a[0], filtersDispatch = _a[1];
+    var resetSpreadsheetFilter = function () {
+        filtersDispatch({ type: "RESTORE_FILTERS" });
+    };
+    var filterRecordsByRowType = function (filterByRow) {
+        filtersDispatch({ type: "FILTER_BY_ROW_TYPE", payload: filterByRow });
+    };
+    var filterRecordsByFieldErrors = function (filterByColumn) {
+        filtersDispatch({
+            type: "FILTER_BY_FIELD_ERRORS",
+            payload: filterByColumn,
+        });
+    };
+    return {
+        spreadsheetFilter: spreadsheetFilter,
+        filterRecordsByRowType: filterRecordsByRowType,
+        filterRecordsByFieldErrors: filterRecordsByFieldErrors,
+        resetSpreadsheetFilter: resetSpreadsheetFilter,
+    };
+};

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

@@ -0,0 +1,2 @@
+import { Record } from "../../../../types";
+export declare const hasValueInAnyField: (record: Record) => boolean;

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

@@ -0,0 +1,14 @@
+export var hasValueInAnyField = function (record) {
+    return Object.entries(record)
+        .filter(function (_a) {
+        var key = _a[0];
+        return key !== "_meta";
+    })
+        .some(function (_a) {
+        var key = _a[0], value = _a[1];
+        if (typeof value === "string") {
+            return value.trim() !== "";
+        }
+        return value !== null && value !== undefined;
+    });
+};

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { DivCSSProps } from "../../../../styled";
 import { RecordDataSet, Field, SpreadsheetOptions, OnValidateRecord, Record } from "../../../../types";
 import { OnDataSetChanged, OnValidationStateChanged } from "../SpreadsheetContextProvider";
 export declare enum SortOrder {
@@ -13,7 +14,6 @@ export type SpreadsheetProps = {
     initialDataSet: RecordDataSet;
     isReadOnly?: boolean;
     fields?: Field[];
-    highlightFirstRow?: boolean;
     options?: SpreadsheetOptions;
     onValidateRecord?: OnValidateRecord;
     onDataSetChanged?: OnDataSetChanged;
@@ -21,4 +21,4 @@ export type SpreadsheetProps = {
     selectedRows?: string[];
     setSelectedRows?: React.Dispatch<React.SetStateAction<string[]>>;
     getSortCompareFn?: (sortBy: SortBy) => (a: Record, b: Record) => number;
-};
+} & DivCSSProps;

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

@@ -29,10 +29,13 @@ export var SortIndicator = styled(Div)(templateObject_3 || (templateObject_3 = _
 }, function (p) { return p.theme.colors.gray300; });
 export var FieldHeader = function (_a) {
     var field = _a.field, sortByFieldErrors = _a.sortByFieldErrors, sortByFieldWarnings = _a.sortByFieldWarnings;
-    var _b = useSpreadsheetContext(), columnErrorCounts = _b.columnErrorCounts, columnWarningCounts = _b.columnWarningCounts, sortBy = _b.sortBy, filteredInputValue = _b.filteredInputValue, setSortBy = _b.setSortBy;
+    var _b = useSpreadsheetContext(), columnErrorCounts = _b.columnErrorCounts, columnWarningCounts = _b.columnWarningCounts, sortBy = _b.sortBy, spreadsheetFilter = _b.spreadsheetFilter, filteredInputValue = _b.filteredInputValue, setSortBy = _b.setSortBy;
     var fieldErrorCount = columnErrorCounts[field.name];
     var fieldWarningCount = columnWarningCounts[field.name];
-    var shouldRenderErrorCount = fieldErrorCount && filteredInputValue === "";
+    var shouldRenderErrorCount = fieldErrorCount &&
+        filteredInputValue === "" &&
+        spreadsheetFilter.type === "rowBased" &&
+        spreadsheetFilter.byRow === "all";
     var onHeaderClick = function () {
         if ((sortBy === null || sortBy === void 0 ? void 0 : sortBy.field) === field.name && (sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction) === SortOrder.ASC) {
             setSortBy({

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

@@ -1,3 +1,4 @@
 import React from "react";
-declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+import { DivCSSProps } from "../../../../styled/utils";
+declare const _default: React.MemoExoticComponent<(props: DivCSSProps) => JSX.Element>;
 export default _default;