fuse-importer 0.26.3 → 0.26.5

package/lib/esm/Importer/ImporterWithContext.js

@@ -31,20 +31,6 @@ import { Stepper } from "./Stepper/index";
 import { TrialModeBanner } from "./TrialModeBanner";
 import Uploader from "./Uploader";
 import { useTranslation } from "react-i18next";
-var steps = [
-    {
-        label: "general:steps.upload",
-        component: _jsx(Uploader, {}),
-    },
-    {
-        label: "general:steps.match",
-        component: _jsx(Matcher, {}),
-    },
-    {
-        label: "general:steps.review",
-        component: _jsx(Review, {}),
-    },
-];
 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;
@@ -60,8 +46,13 @@ export var ImporterWithContext = function () {
     useEffect(function () {
         layoutRef.current.scrollTo(0, 0);
     }, [currentStepIndex, matcherSubstep]);
+    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: steps.map(function (step) { return t(step.label); }), logoURL: logoURL })] }), _jsx(Content, { children: steps[currentStepIndex].component }), 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 && _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() })) })] })));

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

@@ -118,6 +118,10 @@ export var ReviewContextProvider = function (_a) {
     var _j = useState(null), previewInitialDataSet = _j[0], setPreviewInitialDataSet = _j[1];
     var _k = useState([]), reviewFields = _k[0], setReviewFields = _k[1];
     var _l = useState(null), reviewInitialDataSet = _l[0], setReviewInitialDataSet = _l[1];
+    useEffect(function () {
+        if (currentStepIndex === 1)
+            setReviewInitialDataSet(null);
+    }, [currentStepIndex]);
     var reviewDataSetRef = useRef(null);
     var options = useMemo(function () { return ({
         batchValidationDelayMs: batchValidationDelayMs,
@@ -137,7 +141,7 @@ export var ReviewContextProvider = function (_a) {
         link.click();
     }, [reviewFields, selectedRows]);
     var onSubmitData = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var dataSet, dataSetValues, validDataSetValues, validDataSetLength, invalidRecords, applicationResponse, isAppResponseSuccessful, _a, errors, isDataValid, invalidDataSet, error_2;
+        var dataSet, dataSetValues, validDataSetValues, validDataSetLength, invalidRecords_1, applicationResponse, isAppResponseSuccessful, _a, errors, isDataValid, recordsToDisplayFiltered, invalidDataSet, error_2;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -151,19 +155,26 @@ export var ReviewContextProvider = function (_a) {
                         return !record._meta.isInvalid && !isRecordEmpty(record, reviewFields);
                     });
                     validDataSetLength = validDataSetValues.length;
-                    invalidRecords = dataSetValues.filter(function (v) { return v._meta.isInvalid; });
+                    invalidRecords_1 = dataSetValues.filter(function (v) { return v._meta.isInvalid; });
                     return [4 /*yield*/, onSubmit(validDataSetValues)];
                 case 1:
                     applicationResponse = _b.sent();
                     isAppResponseSuccessful = getImportWasSuccessful(applicationResponse);
                     if (!isAppResponseSuccessful) {
                         _a = (applicationResponse !== null && applicationResponse !== void 0 ? applicationResponse : {}).errors, errors = _a === void 0 ? {} : _a;
-                        invalidRecords = __spreadArray(__spreadArray([], filterAndMapWithBackendErrors(dataSet, errors), true), invalidRecords, true);
+                        invalidRecords_1 = __spreadArray(__spreadArray([], filterAndMapWithBackendErrors(dataSet, errors), true), invalidRecords_1, true);
                     }
-                    isDataValid = invalidRecords.length === 0;
+                    isDataValid = invalidRecords_1.length === 0;
                     setImportWasSuccessful(isDataValid && isAppResponseSuccessful);
                     setAppResponse(applicationResponse);
-                    invalidDataSet = recordListToDataSet(invalidRecords, reviewFields);
+                    if (applicationResponse.recordsToDisplay) {
+                        recordsToDisplayFiltered = applicationResponse.recordsToDisplay.filter(function (record) {
+                            var recordId = record._meta.id;
+                            return !invalidRecords_1.some(function (invalidRecord) { return invalidRecord._meta.id === recordId; });
+                        });
+                        invalidRecords_1 = __spreadArray(__spreadArray([], invalidRecords_1, true), (recordsToDisplayFiltered || []), true);
+                    }
+                    invalidDataSet = recordListToDataSet(invalidRecords_1, reviewFields);
                     setReviewInitialDataSet(invalidDataSet);
                     if (!!previewMode) return [3 /*break*/, 4];
                     return [4 /*yield*/, trackImportedRowsCount(fuseApi, templateSlug, validDataSetLength)];

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { SpreadsheetOptions } from "../../..";
-import { Field, OnValidateRecord, Record, RecordDataSet } from "../../../types";
+import { BatchValidationErrors, Field, Record, RecordDataSet } from "../../../types";
+import { SortBy, SpreadsheetProps } from "./common/types";
 import { ValidationState } from "./hooks";
 export type OnDataSetChanged = (dataSet: RecordDataSet) => void;
 export type OnValidationStateChanged = (state: ValidationState) => void;
@@ -9,6 +10,8 @@ type State = {
     fields: Field[];
     isLoading: boolean;
     isReadOnly?: boolean;
+    errors: BatchValidationErrors;
+    warnings: BatchValidationErrors;
     highlightFirstRow: boolean;
     options: SpreadsheetOptions;
     sortByFieldErrors: string;
@@ -28,20 +31,12 @@ type State = {
     addNewRowsToSpreadsheet: () => void;
     checkboxColumnWidth: number;
     isFiltering: boolean;
+    sortBy: SortBy | null;
+    setSortBy: React.Dispatch<React.SetStateAction<SortBy>>;
 } & ValidationState;
-type Props = {
-    initialDataSet: RecordDataSet;
-    isReadOnly?: boolean;
+type Props = SpreadsheetProps & {
     children: JSX.Element;
-    fields: Field[];
-    options: SpreadsheetOptions;
-    highlightFirstRow: boolean;
-    onValidationStateChanged?: OnValidationStateChanged;
-    onValidateRecord?: OnValidateRecord;
-    onDataSetChanged?: OnDataSetChanged;
-    selectedRows: string[];
-    setSelectedRows: React.Dispatch<React.SetStateAction<string[]>>;
 };
-export declare const SpreadsheetContextProvider: ({ initialDataSet, 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, getSortCompareFn, }: Props) => JSX.Element;
 export declare const useSpreadsheetContext: () => State;
 export {};

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

@@ -25,18 +25,33 @@ import { get } from "lodash";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { addMeta } from "../../../Importer/data";
 import { useValidationState } from "./hooks";
+var getDefaultSortCompareFn = function (sortBy) {
+    return function (a, b) {
+        var aField = get(a, sortBy.field);
+        var bField = get(b, sortBy.field);
+        if (aField === bField)
+            return a._meta.rowIndex > b._meta.rowIndex ? 1 : -1;
+        if (!aField)
+            return 1;
+        if (!bField)
+            return -1;
+        if (sortBy.direction === "asc")
+            return aField > bField ? 1 : -1;
+        return aField < bField ? 1 : -1;
+    };
+};
 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;
-    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({
+    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 _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 addRowTimeoutRef = useRef(null);
+    var _k = useValidationState({
         dataSet: dataSet,
         initialDataSet: initialDataSet,
         fields: fields,
@@ -45,57 +60,60 @@ 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, 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) {
-        var errors = errorsRef.current;
-        var warnings = errorsRef.current;
-        var selectedRecordsLength = selectedRows.length;
-        var dataSetLength = Object.keys(dataSet).length - 1;
-        var isDeletingAllRows = selectedRecordsLength === dataSetLength;
-        deleteRecords(setDataSet, selectedRows, errors, warnings, isDeletingAllRows);
-    }, [dataSet, errorsRef.current, errorsRef.current]);
-    // sort data based on errors (errors group on top and not errors group at bottom)
-    var data = useMemo(function () {
+    }), 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"]);
+    var addNewRowsToSpreadsheet = function () {
+        addRowTimeoutRef.current = setTimeout(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)));
+            });
+            addRowTimeoutRef.current = null;
+        }, 300);
+    };
+    var handleDeleteErrors = function (selectedRows) {
+        deleteRecords(selectedRows, errors, warnings);
+    };
+    var dataSnapshot = useMemo(function () {
         var filteredDatasetByString = filteredInputValue
             ? filterRecordsBySearchValue(dataSet, filteredInputValue, fields)
             : dataSet;
         var filteredDatasetByError = selectedErrorToFilter
-            ? filterRecordsByError(filteredDatasetByString, selectedErrorToFilter, errorsRef.current, fields)
+            ? filterRecordsByError(filteredDatasetByString, selectedErrorToFilter, errors, 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)
-            return dataSetValues;
-        return dataSetValues.sort(function (a, b) {
-            var aHasErrors = !!get(sortByFieldErrors ? errors : warnings, "".concat(get(a, "_meta.id"), ".").concat(sortByFieldErrors || sortByFieldWarnings), false);
-            var bHasErrors = !!get(sortByFieldErrors ? errors : warnings, "".concat(get(b, "_meta.id"), ".").concat(sortByFieldErrors || sortByFieldWarnings), false);
-            if (aHasErrors === bHasErrors) {
-                return a._meta.rowIndex > b._meta.rowIndex ? 1 : -1;
-            }
-            return bHasErrors ? 1 : -1;
-        });
+        if (sortBy) {
+            return dataSetValues.sort(getSortCompareFn(sortBy));
+        }
+        else if (!!sortByFieldErrors || !!sortByFieldWarnings)
+            return dataSetValues.sort(function (a, b) {
+                var aHasErrors = !!get(sortByFieldErrors ? errors : warnings, "".concat(get(a, "_meta.id"), ".").concat(sortByFieldErrors || sortByFieldWarnings), false);
+                var bHasErrors = !!get(sortByFieldErrors ? errors : warnings, "".concat(get(b, "_meta.id"), ".").concat(sortByFieldErrors || sortByFieldWarnings), false);
+                if (aHasErrors === bHasErrors) {
+                    return a._meta.rowIndex > b._meta.rowIndex ? 1 : -1;
+                }
+                return bHasErrors ? 1 : -1;
+            });
+        return dataSetValues;
     }, [
-        dataSet,
         filteredInputValue,
         selectedErrorToFilter,
+        sortBy,
+        Object.keys(dataSet).length,
         sortByFieldErrors,
         sortByFieldWarnings,
     ]);
     var isFiltering = useMemo(function () { return !!filteredInputValue; }, [filteredInputValue]);
     useEffect(function () {
         onDataSetChanged && onDataSetChanged(dataSet);
+        if (addRowTimeoutRef.current) {
+            // avoid adding new rows when the user is typing
+            clearTimeout(addRowTimeoutRef.current);
+        }
         var dataSetKeys = Object.keys(dataSet);
         var latestDataSet = dataSet[dataSetKeys[dataSetKeys.length - 1]];
         var latestDataSetValuesWithoutMeta = Object.values(latestDataSet).filter(function (key) { return key !== "_meta"; });
@@ -109,33 +127,35 @@ export var SpreadsheetContextProvider = function (_a) {
         }
     }, [dataSet]);
     useEffect(function () {
-        setDataSet(initialDataSet);
-    }, [initialDataSet]);
-    useEffect(function () {
-        onValidationStateChanged && onValidationStateChanged(validationState);
+        onValidationStateChanged &&
+            onValidationStateChanged(__assign(__assign({}, validationState), { errors: errors, warnings: warnings }));
     }, [validationState, onValidationStateChanged]);
-    var handleSortByFieldErrors = useCallback(function (value) {
-        //current errors snapshot for use on sort to keep data sorted without changing with each edit or revalidation.
-        sortByCurrentErrorsRef.current = __assign({}, errorsRef.current);
-        setSortByFieldErrors(value);
+    var handleSortByFieldErrors = useCallback(function (field) {
+        setSortByFieldErrors(field === sortByFieldErrors ? null : field);
         setSortByFieldWarnings(null);
-    }, []);
-    var handleSortByFieldWarnings = useCallback(function (value) {
-        //current errors snapshot for use on sort to keep data sorted without changing with each edit or revalidation.
-        sortByCurrentWarningsRef.current = __assign({}, warningsRef.current);
-        setSortByFieldWarnings(value);
+        setSortBy(null);
+    }, [sortByFieldErrors]);
+    var handleSortByFieldWarnings = useCallback(function (field) {
+        setSortByFieldWarnings(field === sortByFieldWarnings ? null : field);
         setSortByFieldErrors(null);
-    }, []);
+        setSortBy(null);
+    }, [sortByFieldWarnings]);
     var lastClickedIndexRef = useRef(null);
     var checkboxColumnWidth = useMemo(function () {
-        var _a, _b, _c, _d;
-        var lastRowIndexLength = (_d = (_c = (_b = (_a = data[data.length - 1]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.rowIndex) === null || _c === void 0 ? void 0 : _c.toString()) === null || _d === void 0 ? void 0 : _d.length;
+        var lastRowIndexLength = dataSnapshot.length.toString().length;
         var singleLetterWidth = 15;
         var horizontalSpacing = 8;
         var baseCheckboxColumnWidth = lastRowIndexLength * singleLetterWidth + horizontalSpacing;
         return baseCheckboxColumnWidth < 40 ? 40 : baseCheckboxColumnWidth;
-    }, [data]);
-    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 });
+    }, [dataSnapshot]);
+    var updatedDataSnapshot = useMemo(function () {
+        return dataSnapshot.map(function (data) {
+            var _a;
+            var updatedData = dataSet[(_a = data._meta) === null || _a === void 0 ? void 0 : _a.id];
+            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 });
     return (_jsx(SpreadsheetContext.Provider, __assign({ value: value }, { children: children })));
 };
 export var useSpreadsheetContext = function () { return useContext(SpreadsheetContext); };

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { RecordDataSet, Field, SpreadsheetOptions, OnValidateRecord, Record } from "../../../../types";
+import { OnDataSetChanged, OnValidationStateChanged } from "../SpreadsheetContextProvider";
+export declare enum SortOrder {
+    ASC = "asc",
+    DESC = "desc"
+}
+export type SortBy = {
+    field: string;
+    direction: SortOrder;
+};
+export type SpreadsheetProps = {
+    initialDataSet: RecordDataSet;
+    isReadOnly?: boolean;
+    fields?: Field[];
+    highlightFirstRow?: boolean;
+    options?: SpreadsheetOptions;
+    onValidateRecord?: OnValidateRecord;
+    onDataSetChanged?: OnDataSetChanged;
+    onValidationStateChanged?: OnValidationStateChanged;
+    selectedRows?: string[];
+    setSelectedRows?: React.Dispatch<React.SetStateAction<string[]>>;
+    getSortCompareFn?: (sortBy: SortBy) => (a: Record, b: Record) => number;
+};

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

@@ -0,0 +1,5 @@
+export var SortOrder;
+(function (SortOrder) {
+    SortOrder["ASC"] = "asc";
+    SortOrder["DESC"] = "desc";
+})(SortOrder || (SortOrder = {}));

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

@@ -1,8 +1,15 @@
 import React from "react";
 import { Field } from "../../../../types";
+import { SortOrder } from "../common/types";
+type SortIndicatorProps = {
+    direction: SortOrder;
+};
+export declare const SortIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../../styled/utils").CSSProps & SortIndicatorProps, never>;
 export type FieldHeaderProps = {
     field: Field;
     sortByFieldErrors: (name: string) => void;
     sortByFieldWarnings: (name: string) => void;
 };
 export declare const FieldHeader: React.FC<FieldHeaderProps>;
+export declare const chevronDown: JSX.Element;
+export {};

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

@@ -19,19 +19,45 @@ import styled, { css } from "styled-components";
 import { TooltipProvider } from "../../../../common";
 import { Div } from "../../../../styled/utils";
 import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
+import { SortOrder } from "../common/types";
 var ErrorCount = styled(Div)(function (_a) {
     var _b = _a.theme, colors = _b.colors, c = _b.css;
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    background: ", ";\n    border: solid 1px ", ";\n    padding: 4px 7px;\n    border-radius: 56px;\n    min-width: 24px;\n    ", ";\n  "], ["\n    color: ", ";\n    background: ", ";\n    border: solid 1px ", ";\n    padding: 4px 7px;\n    border-radius: 56px;\n    min-width: 24px;\n    ", ";\n  "])), colors.error, colors.red100, colors.error, c.centered);
 });
+export var SortIndicator = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"], ["\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (p) {
+    return p.direction === SortOrder.ASC && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      transform: rotate(180deg);\n    "], ["\n      transform: rotate(180deg);\n    "])));
+}, 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;
+    var _b = useSpreadsheetContext(), columnErrorCounts = _b.columnErrorCounts, columnWarningCounts = _b.columnWarningCounts, sortBy = _b.sortBy, filteredInputValue = _b.filteredInputValue, setSortBy = _b.setSortBy;
     var fieldErrorCount = columnErrorCounts[field.name];
     var fieldWarningCount = columnWarningCounts[field.name];
-    return (_jsxs(Div, __assign({ "data-test-id": "column-header-".concat(field.name), p: "0 16px", spaceBetween: true, w100: true, alignCenter: true }, { children: [_jsxs(Div, __assign({ truncateText: true }, { children: [field.label, field.isRequired && "*"] })), fieldErrorCount && (_jsx(TooltipProvider, __assign({ mr: 3, w: 35, tooltip: "Sort by ".concat(field.label, " errors") }, { children: _jsx(ErrorCount, __assign({ "data-test-id": "column-errors-count-".concat(field.name), onClick: function () { return sortByFieldErrors(field.name); } }, { children: _jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 35, textAlignCenter: true, label3: true, truncateText: true }, { children: fieldErrorCount })) })) })) }))), !fieldErrorCount && fieldWarningCount && (_jsx(TooltipProvider, __assign({ mr: 3, w: 35, tooltip: "Sort by ".concat(field.label, " errors") }, { children: _jsx(ErrorCount, __assign({ style: {
+    var shouldRenderErrorCount = fieldErrorCount && filteredInputValue === "";
+    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({
+                field: field.name,
+                direction: SortOrder.DESC,
+            });
+        }
+        else {
+            setSortBy({
+                field: field.name,
+                direction: SortOrder.ASC,
+            });
+        }
+    };
+    return (_jsxs(Div, __assign({ "data-test-id": "column-header-".concat(field.name), p: "0 16px", spaceBetween: true, w100: true, alignCenter: true, onClick: onHeaderClick }, { children: [_jsxs(Div, __assign({ dflex: true }, { children: [_jsxs(Div, __assign({ truncateText: true, selectNone: true }, { children: [field.label, field.isRequired && "*"] })), _jsx(Div, __assign({ ml: 8, centered: true }, { children: (sortBy === null || sortBy === void 0 ? void 0 : sortBy.field) === field.name && (_jsx(SortIndicator, __assign({ direction: sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction }, { children: chevronDown }))) }))] })), shouldRenderErrorCount && (_jsx(TooltipProvider, __assign({ mr: 3, w: 35, tooltip: "Sort by ".concat(field.label, " errors") }, { children: _jsx(ErrorCount, __assign({ "data-test-id": "column-errors-count-".concat(field.name), onClick: function (ev) {
+                        ev.stopPropagation();
+                        sortByFieldErrors(field.name);
+                    } }, { children: _jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 35, textAlignCenter: true, label3: true, truncateText: true }, { children: fieldErrorCount })) })) })) }))), !fieldErrorCount && fieldWarningCount && (_jsx(TooltipProvider, __assign({ mr: 3, w: 35, tooltip: "Sort by ".concat(field.label, " errors") }, { children: _jsx(ErrorCount, __assign({ style: {
                         color: colors.orange1200,
                         background: colors.orange1100,
                         boxShadow: "0px 0px 0px 1px ".concat(colors.orange500, " inset"),
-                    }, "data-test-id": "column-errors-count-".concat(field.name), onClick: function () { return sortByFieldWarnings(field.name); } }, { children: _jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 35, textAlignCenter: true, label3: true, truncateText: true }, { children: fieldWarningCount })) })) })) })))] })));
+                    }, "data-test-id": "column-errors-count-".concat(field.name), onClick: function (ev) {
+                        ev.stopPropagation();
+                        sortByFieldWarnings(field.name);
+                    } }, { children: _jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 35, textAlignCenter: true, label3: true, truncateText: true }, { children: fieldWarningCount })) })) })) })))] })));
 };
-var templateObject_1;
+export var chevronDown = (_jsx("svg", __assign({ width: "9", height: "5", viewBox: "0 0 9 5", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M4.31848 4.93945L0.421366 0.439453L8.2156 0.439454L4.31848 4.93945Z", fill: "#102622" }) })));
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -68,26 +68,16 @@ var SpreadsheetData = function () {
         */
         return res * horizontalScrollVisibilityRatio;
     })();
-    var sortByErrors = useCallback(function (field) {
-        return setSortByFieldErrors(function (sortByFieldErrors) {
-            return sortByFieldErrors === field ? null : field;
-        });
-    }, []);
-    var sortByWarnings = useCallback(function (field) {
-        return setSortByFieldWarnings(function (sortByFieldWarnings) {
-            return sortByFieldWarnings === field ? null : field;
-        });
-    }, []);
     var columns = useMemo(function () {
         return fields.map(function (field) { return ({
-            Header: function () { return (_jsx(FieldHeader, { field: field, sortByFieldErrors: sortByErrors, sortByFieldWarnings: sortByWarnings })); },
+            Header: function () { return (_jsx(FieldHeader, { field: field, sortByFieldErrors: setSortByFieldErrors, sortByFieldWarnings: setSortByFieldWarnings })); },
             Content: function (record) {
                 var Input = inputTypes[field.type];
                 var rowIndex = record.rowIndex, recordProp = __rest(record, ["rowIndex"]);
                 return (_jsx(Input, { id: "".concat(field.name, "-").concat(rowIndex), fieldType: field.type, name: field.name, options: field.options, record: recordProp }));
             },
         }); });
-    }, [fields, sortByErrors]);
+    }, [fields, setSortByFieldErrors]);
     var onTableScroll = useCallback(function (scrollTop) {
         if (rowNumbersGridRef.current) {
             var grid = rowNumbersGridRef.current;

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

@@ -72,12 +72,9 @@ export var SpreadsheetRowCheckboxes = function (_a) {
     var handleRowSelect = function (checked, rowIndex, rowMetaId) {
         var lastRowMetaId = data[data.length - 1]._meta.id;
         var isLastRow = rowMetaId === lastRowMetaId;
-        var isSelectingRowHeader = firstRowIsHeader && rowIndex === 0;
-        // Prevent user from deleting the last row and
-        // If the first row is a header, we don't want to select it
-        if (isSelectingRowHeader || isLastRow) {
+        var isLastRowAndEmpty = isLastRow && rowIsEmpty(data[rowIndex]);
+        if (isLastRowAndEmpty)
             return;
-        }
         // If the first row is a header, we need to adjust the rowIndex
         var adjustedRowIndex = firstRowIsHeader ? rowIndex - 1 : rowIndex;
         if (checked) {
@@ -101,8 +98,9 @@ export var SpreadsheetRowCheckboxes = function (_a) {
             var rangeEndIndex_1 = Math.max(clickedRowIndex, lastClickedIndex);
             var lastRowId_1 = data[data.length - 1]._meta.id;
             var updatedSelectedRows = selectedRows.filter(function (value, index) {
-                return (index < rangeStartIndex_1 && value !== lastRowId_1) ||
-                    (index > rangeEndIndex_1 && value !== lastRowId_1);
+                return index < rangeStartIndex_1 ||
+                    index > rangeEndIndex_1 ||
+                    (value === lastRowId_1 && rowIsEmpty(data[data.length - 1]));
             });
             setSelectedRows(updatedSelectedRows);
         }
@@ -117,8 +115,10 @@ export var SpreadsheetRowCheckboxes = function (_a) {
             var range = data.slice(Math.min(rangeStartIndex, rangeEndIndex), Math.max(rangeStartIndex, rangeEndIndex) + 1);
             var rangeIds = range.map(function (row) { return row === null || row === void 0 ? void 0 : row._meta.id; });
             var lastRowId_2 = data[data.length - 1]._meta.id;
+            var isLastRowEmpty_1 = rowIsEmpty(data[data.length - 1]);
             var updatedSelectedRows = __spreadArray(__spreadArray([], selectedRows, true), rangeIds, true).filter(function (value, index, array) {
-                return array.indexOf(value) === index && value !== lastRowId_2;
+                return array.indexOf(value) === index &&
+                    (value !== lastRowId_2 || (value === lastRowId_2 && !isLastRowEmpty_1));
             });
             setSelectedRows(updatedSelectedRows);
             lastClickedIndexRef.current = rowIndex;
@@ -128,8 +128,9 @@ export var SpreadsheetRowCheckboxes = function (_a) {
         if (checked) {
             var allRows = data
                 .filter(function (row) {
-                var lastRowIndex = data[data.length - 1]._meta.id;
-                return row._meta.id !== lastRowIndex;
+                var isLastRow = row._meta.id === data[data.length - 1]._meta.id;
+                var isLastRowAndEmpty = isLastRow && rowIsEmpty(row);
+                return !isLastRowAndEmpty;
             })
                 .map(function (row) {
                 return row === null || row === void 0 ? void 0 : row._meta.id;

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

@@ -70,7 +70,7 @@ export var useSpreadsheetField = function (name, record, fieldType) {
             updateRecord(newRecord);
             return [2 /*return*/];
         });
-    }); }, 300), [record]);
+    }); }, 50), [record]);
     var updateValue = useCallback(function (value) {
         setValue(value);
         updateData(value);

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

@@ -31,8 +31,6 @@ type UseValidationStateReturnValue = ValidationState & {
     filterRecordsBySearchValue: FilterRecordsBySearchValue;
     filterRecordsByError: FilterRecordsByError;
     updateRecordAndRevalidate: (record: Record) => Promise<void>;
-    errorsRef: React.MutableRefObject<BatchValidationErrors>;
-    warningsRef: React.MutableRefObject<BatchValidationErrors>;
 };
 export declare const useValidationState: ({ initialDataSet, dataSet, fields, options, isReadOnly, setDataSet, setIsLoading, onValidateRecord, }: UseValidationStateArgs) => UseValidationStateReturnValue;
 export {};

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

@@ -46,7 +46,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { omit, set } from "lodash";
-import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { useCallback, useEffect, useMemo, useState, } from "react";
 import { sleep } from "../../..";
 import { selectValidatorsFor, validateRecord } from "./validation";
 import { useTableActions, } from "../../../common/Table/TableActions/hooks";
@@ -61,9 +61,7 @@ export var useValidationState = function (_a) {
     var _c = useState({}), warnings = _c[0], setWarnings = _c[1];
     var _d = useState(0), validationPercentage = _d[0], setValidationPercentage = _d[1];
     var validatorsCache = useMemo(function () { return selectValidatorsFor(fields); }, [fields]);
-    var errorsRef = useRef(errors);
-    var warningsRef = useRef(warnings);
-    var _e = useTableActions({ setErrors: setErrors, setWarnings: setWarnings, fields: fields }), deleteRecords = _e.deleteRecords, filterRecordsByError = _e.filterRecordsByError, filterRecordsBySearchValue = _e.filterRecordsBySearchValue;
+    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;
@@ -93,7 +91,6 @@ export var useValidationState = function (_a) {
                         var newState = hasError
                             ? set(newErrors, recordId, recordErrors)
                             : omit(newErrors, recordId);
-                        errorsRef.current = newState;
                         return newState;
                     });
                     setWarnings(function (warnings) {
@@ -101,7 +98,6 @@ export var useValidationState = function (_a) {
                         var newState = hasWarning
                             ? set(newWarnings, recordId, recordWarnings)
                             : omit(newWarnings, recordId);
-                        warningsRef.current = newState;
                         return newState;
                     });
                     setDataSet(newDataSet); //Update the dataSet
@@ -171,9 +167,7 @@ export var useValidationState = function (_a) {
                         return [4 /*yield*/, sleep(batchValidationDelayMs)];
                     case 6:
                         _d.sent();
-                        errorsRef.current = errors;
                         setErrors(errors);
-                        warningsRef.current = warnings;
                         setWarnings(warnings);
                         _d.label = 7;
                     case 7:
@@ -229,8 +223,6 @@ export var useValidationState = function (_a) {
         validationPercentage: validationPercentage,
         isValidationCompleted: isValidationCompleted,
         isValid: isValid,
-        errorsRef: errorsRef,
-        warningsRef: warningsRef,
         updateRecordAndRevalidate: updateRecordAndRevalidate,
         deleteRecords: deleteRecords,
         filterRecordsBySearchValue: filterRecordsBySearchValue,

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

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