fuse-importer 0.23.2 → 0.23.5

package/README.md

@@ -1,15 +1,14 @@
 <div>
-   <center>
-      <a href="https://fuse.flatironsdevelopment.com/users/sign-up?utm_source=npmjs&utm_medium=Fuse+importer+logo&utm_campaign=NPM">
-      <img src="https://wp.flatironsdevelopment.com/wp-content/uploads/2022/07/fuse-logo.png">
-          
-      </a>
-   </center>
-   <br>
-   <br>
-   <p>
-      Flatirons Fuse is a customizable and powerful CSV Importer that works with all front-end languages.
-   </p>
+<center>
+<a href="https://fuse.flatironsdevelopment.com/users/sign-up?utm_source=npmjs&utm_medium=Fuse+importer+logo&utm_campaign=NPM">
+<img alt="Flatirons Fuse" src="https://wp.flatironsdevelopment.com/wp-content/uploads/2022/07/fuse-logo.png">
+</a>
+</center>
+<br>
+<br>
+<p>
+Flatirons Fuse is a customizable and powerful CSV Importer that works with all front-end languages.
+</p>
 </div>
 
 ## Table of Contents
@@ -69,11 +68,11 @@ For more information see our [full documentation.](https://fuse-docs.flatironsde
 
 Check it out in action:
 
+<div>
 <center>
-    <a href="https://fuse.flatironsdevelopment.com/users/sign-up?utm_source=npmjs&utm_medium=Fuse+importer+Gif&utm_campaign=NPM">
-    <img src="https://wp.flatironsdevelopment.com/wp-content/uploads/2022/07/Flatirons-Fuse-users-Columns-7-July-2022.gif">
-    </a>
+<img alt="Check it out in action" src="https://wp.flatironsdevelopment.com/wp-content/uploads/2022/07/ezgif-1-242e10926e.gif">
 </center>
+</div>
 
 ## Registration
 

package/lib/esm/Importer/FuseApi.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { api } from "../api";
 import { baseUrls } from "./common/index";
 // copies the axios request config from axios.AxiosInstance type and adds
-// baseUrl based on environment and api token
+// baseUrl based on environment and api key
 var FuseApi = /** @class */ (function () {
     function FuseApi(environment, apiToken) {
         this.environment = environment;

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

@@ -69,6 +69,8 @@ export declare type State = {
     importerOptions: ImporterOptions;
     theme: any;
     logoURL: string;
+    isSpreadsheetValid: boolean;
+    setIsSpreadsheetValid: React.Dispatch<boolean>;
 };
 export declare type Props = {
     templateSlug: string;

package/lib/esm/Importer/ImporterContextProvider.js

@@ -72,6 +72,7 @@ export var ImporterContextProvider = function (_a) {
     var _j = useState(null), templateHeaderMatchings = _j[0], setTemplateHeaderMatchings = _j[1];
     var _k = useState(null), enumFieldValueMatchings = _k[0], setEnumFieldValueMatchings = _k[1];
     var _l = useState(null), uploadedDataEnumFieldValues = _l[0], setUploadedDataEnumFieldValues = _l[1];
+    var _m = useState(false), isSpreadsheetValid = _m[0], setIsSpreadsheetValid = _m[1];
     var fuseApi = useMemo(function () { return new FuseApi(options.env, apiToken); }, [
         options.env,
         apiToken,
@@ -130,7 +131,7 @@ export var ImporterContextProvider = function (_a) {
                     case 2:
                         error_1 = _d.sent();
                         errorMsg = ((_c = (_b = error_1.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.message) ||
-                            "There was an error preventing the data importer from loading. Check your API Token and try again.";
+                            "There was an error preventing the data importer from loading. Check your API Key and try again.";
                         setTemplateError(errorMsg);
                         return [3 /*break*/, 3];
                     case 3: return [2 /*return*/];
@@ -180,6 +181,8 @@ export var ImporterContextProvider = function (_a) {
         fuseApi: fuseApi,
         theme: style.theme,
         logoURL: style.logoURL,
+        isSpreadsheetValid: isSpreadsheetValid,
+        setIsSpreadsheetValid: setIsSpreadsheetValid,
     };
     return (_jsx(ImporterContext.Provider, __assign({ value: value }, { children: children })));
 };

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

@@ -76,7 +76,7 @@ var Review = function () {
     }, [templateHeaders]);
     var spreadsheetUI = useMemo(function () { return (_jsx(Div, { children: _jsx(Spreadsheet, __assign({ rowWidth: getSpreadsheetRowWidth(fields, 6), options: {
                 batchValidationDelayMs: batchValidationDelayMs,
-                batchValidationSize: batchValidationSize || initialData.length,
+                batchValidationSize: batchValidationSize,
             } }, {
             submittedData: submittedData,
             appResponse: appResponse,

package/lib/esm/Importer/SpreadsheetReviewContextProvider.d.ts

@@ -13,7 +13,8 @@ declare type State = {
 declare type Props = {
     onSubmit?: OnSubmit;
     children: JSX.Element;
+    loadingComponent?: () => JSX.Element;
 };
-export declare const SpreadsheetReviewContextProvider: ({ children, onSubmit, }: Props) => JSX.Element;
+export declare const SpreadsheetReviewContextProvider: ({ children, onSubmit, loadingComponent, }: Props) => JSX.Element;
 export declare const useSpreadsheetReviewContext: () => State;
 export {};

package/lib/esm/Importer/SpreadsheetReviewContextProvider.js

@@ -52,7 +52,7 @@ import { getUnsubmittedData } from "./common/utils";
 import { useImporterContext } from "./ImporterContextProvider";
 var SpreadsheetReviewContext = createContext({});
 export var SpreadsheetReviewContextProvider = function (_a) {
-    var children = _a.children, onSubmit = _a.onSubmit;
+    var children = _a.children, onSubmit = _a.onSubmit, loadingComponent = _a.loadingComponent;
     var _b = useState(false), isSubmitting = _b[0], setIsSubmitting = _b[1];
     var _c = useState(null), reviewedData = _c[0], setReviewedData = _c[1];
     var _d = useState(null), submittedData = _d[0], setSubmittedData = _d[1];
@@ -67,14 +67,25 @@ export var SpreadsheetReviewContextProvider = function (_a) {
             switch (_a.label) {
                 case 0:
                     trackImportedRowsCount = function (rowCount) { return __awaiter(void 0, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0: return [4 /*yield*/, fuseApi.post("/api/v1/importer/templates/".concat(templateSlug, "/imports"), {
-                                        row_count: rowCount,
-                                    })];
+                        var error_1, errorMessage;
+                        var _a, _b;
+                        return __generator(this, function (_c) {
+                            switch (_c.label) {
+                                case 0:
+                                    _c.trys.push([0, 2, , 3]);
+                                    return [4 /*yield*/, fuseApi.post("/api/v1/importer/templates/".concat(templateSlug, "/imports"), {
+                                            row_count: rowCount,
+                                        })];
                                 case 1:
-                                    _a.sent();
-                                    return [2 /*return*/];
+                                    _c.sent();
+                                    return [3 /*break*/, 3];
+                                case 2:
+                                    error_1 = _c.sent();
+                                    errorMessage = ((_b = (_a = error_1 === null || error_1 === void 0 ? void 0 : error_1.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) ||
+                                        "There was an error submitting your dataset";
+                                    setAppResponse({ message: errorMessage });
+                                    return [3 /*break*/, 3];
+                                case 3: return [2 /*return*/];
                             }
                         });
                     }); };
@@ -110,7 +121,7 @@ export var SpreadsheetReviewContextProvider = function (_a) {
         onSubmit: onSubmitData,
         setReviewedData: setReviewedData,
     };
-    return (_jsxs(SpreadsheetReviewContext.Provider, __assign({ value: value }, { children: [isSubmitting && _jsx(AppLoading, {}), children] })));
+    return (_jsxs(SpreadsheetReviewContext.Provider, __assign({ value: value }, { children: [isSubmitting ? (loadingComponent ? (loadingComponent()) : (_jsx(AppLoading, {}))) : null, children] })));
 };
 export var useSpreadsheetReviewContext = function () {
     return useContext(SpreadsheetReviewContext);

package/lib/esm/Importer/Stepper.js

@@ -66,7 +66,9 @@ var Stepper = function (_a) {
     var _b = useState(false), isUnmatchedHeadersModalOpen = _b[0], setIsUnmatchedHeadersModalOpen = _b[1];
     var _c = useSpreadsheetReviewContext(), appResponse = _c.appResponse, isSpreadsheetReviewComplete = _c.isSpreadsheetReviewComplete, onSubmit = _c.onSubmit;
     var _d = useState(false), isSubmitModalOpen = _d[0], setIsSubmitModalOpen = _d[1];
-    var _e = useImporterContext(), currentStepIndex = _e.currentStepIndex, setEnumFieldValueMatchings = _e.setEnumFieldValueMatchings, setCurrentStepIndex = _e.setCurrentStepIndex, templateHeaderMatchings = _e.templateHeaderMatchings, matcherSubstep = _e.matcherSubstep, setMatcherSubstep = _e.setMatcherSubstep, templateHeaders = _e.templateHeaders, uploadedDataEnumFieldValues = _e.uploadedDataEnumFieldValues, onClose = _e.onClose;
+    var _e = useImporterContext(), currentStepIndex = _e.currentStepIndex, setEnumFieldValueMatchings = _e.setEnumFieldValueMatchings, setCurrentStepIndex = _e.setCurrentStepIndex, templateHeaderMatchings = _e.templateHeaderMatchings, matcherSubstep = _e.matcherSubstep, setMatcherSubstep = _e.setMatcherSubstep, templateHeaders = _e.templateHeaders, uploadedDataEnumFieldValues = _e.uploadedDataEnumFieldValues, onClose = _e.onClose, isSpreadsheetValid = _e.isSpreadsheetValid, disableSubmitIfInvalid = _e.importerOptions.disableSubmitIfInvalid;
+    var isSubmitDisabled = (disableSubmitIfInvalid && !isSpreadsheetValid) ||
+        !isSpreadsheetReviewComplete;
     var submitModalUI = (_jsx(Modal, __assign({ isOpen: isSubmitModalOpen, onClose: function () { return setIsSubmitModalOpen(false); } }, { children: _jsxs(Div, __assign({ centered: true, flexColumn: true, p: 60 }, { children: [_jsx(Div, { children: submitSvg }), _jsx(Div, __assign({ h5: true, mt: 20 }, { children: "Ready to submit?" })), _jsx(Div, __assign({ body1: true, mt: 12, w: 448, textAlignCenter: true }, { children: "We didn't find anything wrong with your file. You're good to go!" })), _jsxs(Div, __assign({ dflex: true, mt: 40, w100: true, centered: true }, { children: [_jsx(Button, __assign({ w: 115, variant: "secondary", mr: 10, onClick: function () { return setIsSubmitModalOpen(false); } }, { children: "Go back" })), _jsx(Button, __assign({ w: 140, ml: 10, onClick: function () {
                                 onSubmit();
                                 setIsSubmitModalOpen(false);
@@ -130,7 +132,7 @@ var Stepper = function (_a) {
     var isMatchStep = currentStepIndex === 1;
     var isReviewStep = currentStepIndex === 2;
     var leftButtonUI = (_jsx(Div, __assign({ w: 100 }, { children: currentStepIndex > 0 && !appResponse && (_jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: "Go back" }))) })));
-    var rightButtonUI = (_jsxs(Div, __assign({ w: 100 }, { children: [isMatchStep && (_jsx(Button, __assign({ variant: "primary", onClick: continueToNextStep }, { children: "Continue" }))), isReviewStep && (_jsx(Button, __assign({ variant: "primary", isDisabled: !isSpreadsheetReviewComplete, onClick: function () { return setIsSubmitModalOpen(true); } }, { children: "Submit" })))] })));
+    var rightButtonUI = (_jsxs(Div, __assign({ w: 100 }, { children: [isMatchStep && (_jsx(Button, __assign({ variant: "primary", onClick: continueToNextStep }, { children: "Continue" }))), isReviewStep && (_jsx(Button, __assign({ variant: "primary", isDisabled: isSubmitDisabled, onClick: function () { return setIsSubmitModalOpen(true); } }, { children: "Submit" })))] })));
     return (_jsxs(_Fragment, { children: [unmatchedHeadersModalUI, submitModalUI, _jsxs(StepperWrapper, __assign({ pRelative: true, alignCenter: true, w100: true, h: 96, centered: true }, { children: [logoURL && _jsx(Logo, { src: logoURL, alt: "" }), _jsxs(Content, __assign({ spaceBetween: true, w: contentWidth }, { children: [leftButtonUI, _jsx(Div, __assign({ alignCenter: true }, { children: stepsUI })), rightButtonUI] })), _jsx(CloseIcon, __assign({ centered: true, clickable: true, onClick: onClose }, { children: closeIconCondensed }))] }))] }));
 };
 var Content = styled(Div)(function (_a) {

package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterDropzone.js

@@ -42,7 +42,7 @@ var ImporterDropzone = function () {
     var _a = useUploaderContext(), setIsUploading = _a.setIsUploading, setFileName = _a.setFileName;
     var setUploadedData = useImporterContext().setUploadedData;
     var validHeadersCount = function (headersLength) {
-        var headersCountLimit = 50;
+        var headersCountLimit = 60;
         if (headersLength > headersCountLimit) {
             addToast("File cannot contain more than ".concat(headersCountLimit, " columns"), "error");
             return false;

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

@@ -74,7 +74,7 @@ var HeadersPreview = function () {
             };
         });
     }, []);
-    return (_jsx(_Fragment, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true, pt: 40 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Verify Your Column Headers" })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "File must contain column headers to proceed." })), _jsx(HeaderButtons, {}), _jsx(Div, __assign({ w100: true, centered: true, mb: 36 }, { children: _jsx(Spreadsheet, __assign({ rowWidth: getSpreadsheetRowWidth(readonlyFields, 6), isReadOnly: true, initialData: formattedData }, { fields: readonlyFields }, { highlightFirstRow: true })) }))] })) }));
+    return (_jsx(_Fragment, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true, pt: 40 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Verify Your Column Headers" })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "File must contain column headers to proceed." })), _jsx(HeaderButtons, {}), _jsx(Div, __assign({ w100: true, centered: true, mb: 36 }, { children: _jsx(Spreadsheet, { rowWidth: getSpreadsheetRowWidth(readonlyFields, 6), isReadOnly: true, initialData: formattedData, fields: readonlyFields, highlightFirstRow: true }) }))] })) }));
 };
 export default HeadersPreview;
 var templateObject_1;

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

@@ -4,6 +4,7 @@ import { BatchValidationErrors, Field, OnValidateBatch, OnValidateRecord, Record
 export declare const getBatchErrors: (records: Record[], onValidateRecord: OnValidateRecord) => Promise<BatchValidationErrors>;
 declare type State = {
     rowWidth?: number;
+    dataRef: React.MutableRefObject<Record[]>;
     data: Record[];
     fields: Field[];
     isLoading: boolean;

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

@@ -55,9 +55,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useState, useMemo, } from "react";
+import { createContext, useContext, useEffect, useState, useMemo, useCallback, useRef, } from "react";
 import { formatBatchErrors } from "../../..";
 import { getRecordErrors, getRenderedRecordWithErrors, recordIsEmpty, } from "./common";
+import { sleep } from "../../../utils";
+import { useImporterContext } from "../../ImporterContextProvider";
 var MINIMUM_ROW_COUNT = 20;
 var getRowId = function (id) { return "r".concat(id); };
 export var getBatchErrors = function (records, onValidateRecord) { return __awaiter(void 0, void 0, void 0, function () {
@@ -85,10 +87,14 @@ export var getBatchErrors = function (records, onValidateRecord) { return __awai
     });
 }); };
 var SpreadsheetContext = createContext({});
-var sleep = function (n) { return new Promise(function (resolve) { return setTimeout(resolve, n); }); };
+var addMeta = function (d, i) { return (__assign(__assign({}, d), { _meta: { id: getRowId(i), rowIndex: i } })); };
 export var SpreadsheetContextProvider = function (_a) {
     var initialData = _a.initialData, _b = _a.rowWidth, rowWidth = _b === void 0 ? 1 : _b, _c = _a.onValidateRecord, onValidateRecord = _c === void 0 ? null : _c, _d = _a.onValidateBatch, onValidateBatch = _d === void 0 ? null : _d, appResponse = _a.appResponse, fields = _a.fields, options = _a.options, isReadOnly = _a.isReadOnly, highlightFirstRow = _a.highlightFirstRow, submittedData = _a.submittedData, setReviewedData = _a.setReviewedData, children = _a.children;
-    var _e = useState(initialData.map(function (d, i) { return (__assign(__assign({}, d), { _meta: { id: getRowId(i), rowIndex: i } })); })), data = _e[0], setData = _e[1];
+    var mappedInitialData = useMemo(function () { return initialData.map(addMeta); }, [
+        initialData,
+    ]);
+    var _e = useState(mappedInitialData), data = _e[0], setData = _e[1];
+    var dataRef = useRef(mappedInitialData);
     var _f = useState(false), isLoading = _f[0], setIsLoading = _f[1];
     var _g = useState(null), sortByFieldErrors = _g[0], setSortByFieldErrors = _g[1];
     var _h = useState(true), isScrollingEnabled = _h[0], setIsScrollingEnabled = _h[1];
@@ -100,74 +106,85 @@ export var SpreadsheetContextProvider = function (_a) {
         batchValidationErrors: batchValidationErrors,
         submittedData: submittedData,
     }), columnErrorCounts = _l.columnErrorCounts, totalErrors = _l.totalErrors, isValidationComplete = _l.isValidationComplete;
+    var updateData = useCallback(function (data) {
+        dataRef.current = data;
+        setData(data);
+    }, []);
     useEffect(function () {
+        var batchValidationDelayMs = options.batchValidationDelayMs, _a = options.batchValidationSize, batchValidationSize = _a === void 0 ? 1000 : _a;
+        var batchSize = Math.min(Math.floor(batchValidationSize), data.length) || data.length;
+        var batchCount = Math.ceil(data.length / batchSize);
+        var isCancelled = false;
+        var addEmptyRows = function () {
+            var newData = __spreadArray([], data, true);
+            var emptyRecord = fields.reduce(function (obj, f) {
+                var _a;
+                return (__assign(__assign({}, obj), (_a = {}, _a[f.name] = null, _a)));
+            }, {});
+            for (var i = newData.length; i < MINIMUM_ROW_COUNT; i++) {
+                newData.push(__assign(__assign({}, emptyRecord), { _meta: {
+                        id: getRowId(i),
+                        rowIndex: i,
+                    } }));
+            }
+            updateData(newData);
+        };
+        var validateInBatches = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var validationErrors, batchIdx, idx, batch, errors, validationPercentage;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        validationErrors = {};
+                        batchIdx = 0;
+                        _a.label = 1;
+                    case 1:
+                        if (!(batchIdx < batchCount)) return [3 /*break*/, 5];
+                        if (isCancelled)
+                            return [3 /*break*/, 5];
+                        idx = batchIdx * batchSize;
+                        batch = data.slice(idx, idx + batchSize);
+                        return [4 /*yield*/, (onValidateBatch
+                                ? onValidateBatch(batch)
+                                : getBatchErrors(batch, onValidateRecord))];
+                    case 2:
+                        errors = _a.sent();
+                        validationErrors = __assign(__assign({}, validationErrors), errors);
+                        // unblocks main thread for rendering ui
+                        return [4 /*yield*/, sleep(batchValidationDelayMs)];
+                    case 3:
+                        // unblocks main thread for rendering ui
+                        _a.sent();
+                        validationPercentage = (Math.min(idx + batchSize, data.length) / data.length) * 100;
+                        setBatchValidationPercentage(Math.floor(validationPercentage));
+                        _a.label = 4;
+                    case 4:
+                        batchIdx++;
+                        return [3 /*break*/, 1];
+                    case 5:
+                        if (!isCancelled)
+                            setBatchValidationErrors(validationErrors);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
         var init = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var batchValidationDelayMs, batchValidationSize, addEmptyRows, validateInBatches;
             return __generator(this, function (_a) {
-                batchValidationDelayMs = options.batchValidationDelayMs, batchValidationSize = options.batchValidationSize;
-                addEmptyRows = function () {
-                    var newData = __spreadArray([], data, true);
-                    var emptyRecord = fields.reduce(function (obj, f) {
-                        var _a;
-                        return (__assign(__assign({}, obj), (_a = {}, _a[f.name] = null, _a)));
-                    }, {});
-                    for (var i = newData.length; i < MINIMUM_ROW_COUNT; i++) {
-                        newData.push(__assign(__assign({}, emptyRecord), { _meta: {
-                                id: getRowId(i),
-                                rowIndex: i,
-                            } }));
-                    }
-                    setData(newData);
-                };
                 if (data.length < MINIMUM_ROW_COUNT)
                     addEmptyRows();
-                validateInBatches = function () { return __awaiter(void 0, void 0, void 0, function () {
-                    var validationErrors, batchSize, batchCount, batchIdx, idx, batch, errors, validationPercentage;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                validationErrors = {};
-                                batchSize = Math.min(Math.floor(batchValidationSize), data.length) || data.length;
-                                batchCount = Math.ceil(data.length / batchSize);
-                                batchIdx = 0;
-                                _a.label = 1;
-                            case 1:
-                                if (!(batchIdx < batchCount)) return [3 /*break*/, 5];
-                                idx = batchIdx * batchSize;
-                                batch = data.slice(idx, idx + batchSize);
-                                return [4 /*yield*/, (onValidateBatch
-                                        ? onValidateBatch(batch)
-                                        : getBatchErrors(batch, onValidateRecord))];
-                            case 2:
-                                errors = _a.sent();
-                                validationErrors = __assign(__assign({}, validationErrors), errors);
-                                // unblocks main thread for rendering ui
-                                return [4 /*yield*/, sleep(batchValidationDelayMs)];
-                            case 3:
-                                // unblocks main thread for rendering ui
-                                _a.sent();
-                                validationPercentage = (Math.min(idx + batchSize, data.length) / data.length) * 100;
-                                setBatchValidationPercentage(Math.floor(validationPercentage));
-                                setBatchValidationErrors(validationErrors);
-                                _a.label = 4;
-                            case 4:
-                                batchIdx++;
-                                return [3 /*break*/, 1];
-                            case 5: return [2 /*return*/];
-                        }
-                    });
-                }); };
                 validateInBatches();
                 return [2 /*return*/];
             });
         }); };
         if (!isReadOnly)
             init();
+        return function () {
+            isCancelled = true;
+        };
     }, []);
     useEffect(function () {
         var appValidationErrors = appResponse === null || appResponse === void 0 ? void 0 : appResponse.errors;
         if (appValidationErrors) {
-            setData(__spreadArray([], data, true).map(function (record) { return (__assign(__assign({}, record), { _meta: __assign(__assign({}, record._meta), { appValidationErrors: appValidationErrors[record._meta.id] }) })); }));
+            updateData(__spreadArray([], data, true).map(function (record) { return (__assign(__assign({}, record), { _meta: __assign(__assign({}, record._meta), { appValidationErrors: appValidationErrors[record._meta.id] }) })); }));
         }
     }, [appResponse]);
     useEffect(function () {
@@ -196,9 +213,9 @@ export var SpreadsheetContextProvider = function (_a) {
                 return a._meta.rowIndex > b._meta.rowIndex ? 1 : -1;
             return bHasErrors ? 1 : -1;
         });
-        setData(sortedByFieldErrors);
+        updateData(sortedByFieldErrors);
     }, [sortByFieldErrors]);
-    var validateRenderedRecords = function (renderedData) { return __awaiter(void 0, void 0, void 0, function () {
+    var validateRenderedRecords = useCallback(function (renderedData) { return __awaiter(void 0, void 0, void 0, function () {
         var newData;
         return __generator(this, function (_a) {
             if (isReadOnly)
@@ -226,12 +243,13 @@ export var SpreadsheetContextProvider = function (_a) {
                 });
             }); });
             setIsLoading(false);
-            setData(newData);
+            updateData(newData);
             return [2 /*return*/];
         });
-    }); };
+    }); }, [data]);
     var value = {
         data: data,
+        dataRef: dataRef,
         fields: fields,
         isLoading: isLoading,
         setIsLoading: setIsLoading,
@@ -246,7 +264,7 @@ export var SpreadsheetContextProvider = function (_a) {
         sortByFieldErrors: sortByFieldErrors,
         submittedData: submittedData,
         setSortByFieldErrors: setSortByFieldErrors,
-        setData: setData,
+        setData: updateData,
         onValidateRecord: onValidateRecord,
         validateRenderedRecords: validateRenderedRecords,
         setIsScrollingEnabled: setIsScrollingEnabled,
@@ -257,6 +275,7 @@ export var SpreadsheetContextProvider = function (_a) {
 var useValidationState = function (_a) {
     var data = _a.data, fields = _a.fields, batchValidationErrors = _a.batchValidationErrors, submittedData = _a.submittedData;
     var _b = useState({}), columnErrorCounts = _b[0], setColumnErrorCounts = _b[1];
+    var setIsSpreadsheetValid = useImporterContext().setIsSpreadsheetValid;
     useEffect(function () {
         var updateErrorCounts = function () {
             var newColumnErrorCounts = {};
@@ -276,6 +295,7 @@ var useValidationState = function (_a) {
                 });
                 updateFieldErrorCount(recordErrors);
             });
+            setIsSpreadsheetValid(Object.keys(newColumnErrorCounts).length === 0);
             setColumnErrorCounts(newColumnErrorCounts);
         };
         updateErrorCounts();

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

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

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

@@ -25,27 +25,27 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Grid } from "react-virtualized";
+import { FixedSizeGrid as Grid } from "react-window";
 import styled, { css } from "styled-components";
 import { Div } from "../../../styled/utils";
 import { spreadsheetRowHeightPx } from "./common";
 import { spreadsheetHeaderHeightPx } from "./common/index";
 import { useSpreadsheetContext } from "./SpreadsheetContextProvider";
 var SPREADSHEET_ROW_NUMBERS_WIDTH = 75;
+var gridStyles = {
+    outline: "none",
+    willChange: "unset",
+    overflowY: "hidden",
+    overflowX: "scroll",
+};
 export var SpreadsheetRowNumbers = function (_a) {
-    var height = _a.height, scrollTop = _a.scrollTop, spreadsheetHasXScroll = _a.spreadsheetHasXScroll, props = __rest(_a, ["height", "scrollTop", "spreadsheetHasXScroll"]);
+    var height = _a.height, spreadsheetHasXScroll = _a.spreadsheetHasXScroll, gridRef = _a.gridRef, props = __rest(_a, ["height", "spreadsheetHasXScroll", "gridRef"]);
     var data = useSpreadsheetContext().data;
-    var rowRenderer = function (_a) {
+    var Cell = function (_a) {
         var rowIndex = _a.rowIndex, style = _a.style;
         return (_jsx(RowNumber, __assign({ style: style, alignCenter: true, justifyEnd: true, isLast: rowIndex === data.length - 1 }, { children: _jsx(Div, __assign({ truncateText: true, mr: 16, textAlignRight: true }, { children: rowIndex + 1 })) }), rowIndex));
     };
-    var gridStyles = {
-        outline: "none",
-        willChange: "unset",
-        overflowY: "hidden",
-        overflowX: "scroll",
-    };
-    return (_jsxs(SpreadsheetRowNumbersContainer, __assign({}, props, { h: height }, { children: [_jsx(SpreadsheetRowNumbersHeader, {}), _jsx(Grid, { scrollTop: scrollTop, style: gridStyles, width: SPREADSHEET_ROW_NUMBERS_WIDTH, columnCount: 1, columnWidth: SPREADSHEET_ROW_NUMBERS_WIDTH, height: height - spreadsheetHeaderHeightPx, rowHeight: 40, cellRenderer: rowRenderer, rowCount: data.length })] })));
+    return (_jsxs(SpreadsheetRowNumbersContainer, __assign({}, props, { h: height }, { children: [_jsx(SpreadsheetRowNumbersHeader, {}), _jsx(Grid, __assign({ ref: gridRef, style: gridStyles, width: SPREADSHEET_ROW_NUMBERS_WIDTH, columnCount: 1, columnWidth: SPREADSHEET_ROW_NUMBERS_WIDTH, height: height - spreadsheetHeaderHeightPx, rowHeight: 40, rowCount: data.length }, { children: Cell }))] })));
 };
 var RowNumber = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", "\n"], ["\n  background-color: ", ";\n  ", ";\n  ", "\n"])), function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.label3; }, function (p) {
     return !p.isLast && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-shadow: inset 0 -1px 0 ", ";\n    "], ["\n      box-shadow: inset 0 -1px 0 ", ";\n    "])), function (p) { return p.theme.colors.gray300; });

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

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 import { FieldTypes, Record } from "../../../../../types";
 export declare const parseValue: (fieldType: FieldTypes, value: any) => any;
 export declare const useValidationError: (fieldName: string, record: Record) => {
@@ -6,7 +6,7 @@ export declare const useValidationError: (fieldName: string, record: Record) =>
 };
 export declare const useSpreadsheetField: (name: any, record: Record, fieldType: FieldTypes) => {
     value: any;
-    setValue: React.Dispatch<any>;
+    setValue: (value: any) => void;
     validationError: any;
 };
 export declare const SpreadsheetField: ({ validationError, children }: {

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

@@ -59,7 +59,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useState, useCallback } from "react";
+import { debounce } from "lodash";
 import styled, { css } from "styled-components";
 import { getRecordErrors, getRenderedRecordWithErrors, isFloat, isInteger, } from "..";
 import { TooltipProvider } from "../../../../../common/TooltipProvider";
@@ -90,54 +91,38 @@ export var useValidationError = function (fieldName, record) {
     return { validationError: validationError };
 };
 export var useSpreadsheetField = function (name, record, fieldType) {
-    var _a = useSpreadsheetContext(), data = _a.data, setData = _a.setData, onValidateRecord = _a.onValidateRecord;
+    var _a = useSpreadsheetContext(), dataRef = _a.dataRef, setData = _a.setData, onValidateRecord = _a.onValidateRecord;
     var _b = useState(record[name]), value = _b[0], setValue = _b[1];
     var validationError = useValidationError(name, record).validationError;
-    // used for debouncing validations
-    var timeoutIdRef = useRef(null);
-    // used for getting updated data in setTimeout
-    var isMountedRef = useRef(false);
-    var dataRef = useRef(null);
-    var recordRef = useRef(null);
-    // set latest data on refs
-    useEffect(function () {
-        dataRef.current = __spreadArray([], data, true);
-        recordRef.current = __assign({}, record);
-    }, [data, record]);
-    // debouncing
-    useEffect(function () {
-        if (!isMountedRef.current) {
-            isMountedRef.current = true;
-            return;
-        }
-        if (timeoutIdRef.current)
-            clearTimeout(timeoutIdRef.current);
-        timeoutIdRef.current = setTimeout(function () { return __awaiter(void 0, void 0, void 0, function () {
-            var newData, newRecord, rowIndex, _a, _b, _c;
-            var _d, _e;
-            return __generator(this, function (_f) {
-                switch (_f.label) {
-                    case 0:
-                        newData = __spreadArray([], dataRef.current, true);
-                        newRecord = __assign(__assign({}, recordRef.current), (_d = {}, _d[name] = parseValue(fieldType, value), _d));
-                        rowIndex = newData.findIndex(function (r) { return r._meta.id === record._meta.id; });
-                        _a = newData;
-                        _b = rowIndex;
-                        _c = getRenderedRecordWithErrors;
-                        _e = {
-                            record: newRecord
-                        };
-                        return [4 /*yield*/, onValidateRecord(newRecord)];
-                    case 1:
-                        _a[_b] = _c.apply(void 0, [(_e.validationErrors = _f.sent(),
-                                _e)]);
-                        setData(newData);
-                        return [2 /*return*/];
-                }
-            });
-        }); }, 300);
-    }, [value]);
-    return { value: value, setValue: setValue, validationError: validationError };
+    var updateData = useCallback(debounce(function (value) { return __awaiter(void 0, void 0, void 0, function () {
+        var newData, newRecord, rowIndex, _a, _b, _c;
+        var _d, _e;
+        return __generator(this, function (_f) {
+            switch (_f.label) {
+                case 0:
+                    newData = __spreadArray([], dataRef.current, true);
+                    newRecord = __assign(__assign({}, record), (_d = {}, _d[name] = parseValue(fieldType, value), _d));
+                    rowIndex = newData.findIndex(function (r) { return r._meta.id === record._meta.id; });
+                    _a = newData;
+                    _b = rowIndex;
+                    _c = getRenderedRecordWithErrors;
+                    _e = {
+                        record: newRecord
+                    };
+                    return [4 /*yield*/, onValidateRecord(newRecord)];
+                case 1:
+                    _a[_b] = _c.apply(void 0, [(_e.validationErrors = _f.sent(),
+                            _e)]);
+                    setData(newData);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, 300), [record]);
+    var updateValue = useCallback(function (value) {
+        setValue(value);
+        updateData(value);
+    }, [record, updateData]);
+    return { value: value, setValue: updateValue, validationError: validationError };
 };
 var ContentContainer = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: calc(100% - 1px);\n  width: 100%;\n  ", ";\n  ", "\n  ", "\n"], ["\n  height: calc(100% - 1px);\n  width: 100%;\n  ", ";\n  ", "\n  ", "\n"])), function (p) { return p.theme.css.alignCenter; }, function (p) {
     return p.hasError && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.error; }, function (p) { return p.theme.colors.red100; }, function (p) { return p.theme.colors.error; });

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

@@ -85,7 +85,7 @@ export var getRecordErrors = function (_a) {
             if (isEmpty(fieldValue) && field.isRequired) {
                 newErrors[field.name] = "".concat(field.label, " is required");
             }
-            else if (validations[field.type]) {
+            else if (!isEmpty(fieldValue) && validations[field.type]) {
                 newErrors[field.name] = validations[field.type](field, fieldValue);
             }
             return newErrors;