fuse-importer 0.1.3-testing → 0.1.5-testing

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

@@ -1,3 +1,4 @@
+import { isEmpty } from "../common";
 export var hasValueInAnyField = function (record) {
     return Object.entries(record)
         .filter(function (_a) {
@@ -16,6 +17,6 @@ export var rowIsEmpty = function (row) {
     return Object.keys(row).every(function (key) {
         if (key === "_meta")
             return true;
-        return !row[key];
+        return isEmpty(row[key]);
     });
 };

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

@@ -0,0 +1,31 @@
+import { MutableRefObject } from "react";
+import { SpreadsheetOptions } from "../../../..";
+import { BatchValidationErrors, CalculateColumnCount, ColumnWithCount, Field, OnValidateRecord, Record } from "../../../../types";
+type UseValidationStateArgs = {
+    onValidateRecord?: OnValidateRecord;
+    fields: Field[];
+    options: SpreadsheetOptions;
+    isReadOnly: boolean;
+    children: any;
+};
+export type ValidationState = {
+    isValid: boolean;
+    isValidationCompleted: boolean;
+    validationPercentage: number;
+    errors: MutableRefObject<BatchValidationErrors>;
+    warnings: MutableRefObject<BatchValidationErrors>;
+    totalErrorCount: MutableRefObject<number>;
+    invalidRowsCountRef: MutableRefObject<number>;
+    columnsWithErrorCounts: MutableRefObject<ColumnWithCount>;
+    columnsWithWarningCounts: MutableRefObject<ColumnWithCount>;
+    calculateColumnErrorCounts?: CalculateColumnCount;
+    calculateColumnWarningCounts?: CalculateColumnCount;
+};
+type UseValidationStateReturnValue = ValidationState & {
+    updateRecordAndRevalidate: (record: Record | Record[], initialValidation?: boolean) => Promise<void>;
+    spreadsheetInitialized: boolean;
+};
+export declare const ValidationContext: import("react").Context<UseValidationStateReturnValue>;
+export declare const ValidationContextProvider: ({ fields, isReadOnly, onValidateRecord, children, }: UseValidationStateArgs) => JSX.Element;
+export declare const useValidationContext: () => UseValidationStateReturnValue;
+export {};

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

@@ -0,0 +1,304 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { useAppLoadingContext } from "../../../../common/AppLoadingContextProvider";
+import { useEventManagerContext } from "../../../../common/EventManagerContextProvider";
+import { useDataSetContext } from "../DataSetContextProvider";
+import { useDuplicateDataContext } from "../DuplicateDataContextProvider";
+import { useBatchProcessing } from "../SpreadsheetContextProvider/useBatchProcessing";
+import { selectValidatorsFor, validateRecord } from "../validation";
+// this is the fastest check for empty object as per
+// https://stackoverflow.com/questions/679915/how-do-i-test-for-an-empty-javascript-object/785768#785768
+var isObjectEmpty = function (obj) {
+    for (var i in obj) {
+        return false;
+    }
+    return true;
+};
+var checkIfHasErrors = function (_errors) {
+    return _errors && !isObjectEmpty(_errors);
+};
+var calculateFieldCountChangeInRecord = function (prevCountsInRecord, currCountsInRecord, globalFieldCounts, totalGlobalFieldCount) {
+    if (prevCountsInRecord === void 0) { prevCountsInRecord = {}; }
+    if (currCountsInRecord === void 0) { currCountsInRecord = {}; }
+    if (totalGlobalFieldCount === void 0) { totalGlobalFieldCount = null; }
+    var allFieldsInRecord = new Set(__spreadArray(__spreadArray([], Object.keys(prevCountsInRecord), true), Object.keys(currCountsInRecord), true));
+    allFieldsInRecord.forEach(function (fieldName) {
+        var _a;
+        var countChangeInRecord = (currCountsInRecord[fieldName] ? 1 : 0) -
+            (prevCountsInRecord[fieldName] ? 1 : 0);
+        if (!countChangeInRecord)
+            return;
+        globalFieldCounts.current = __assign(__assign({}, globalFieldCounts.current), (_a = {}, _a[fieldName] = (globalFieldCounts.current[fieldName] || 0) + countChangeInRecord, _a));
+        if (totalGlobalFieldCount)
+            totalGlobalFieldCount.current += countChangeInRecord;
+    });
+};
+export var ValidationContext = createContext({});
+export var ValidationContextProvider = function (_a) {
+    var fields = _a.fields, isReadOnly = _a.isReadOnly, onValidateRecord = _a.onValidateRecord, children = _a.children;
+    var errors = useRef({});
+    var warnings = useRef({});
+    var _b = useState(0), validationPercentage = _b[0], setValidationPercentage = _b[1];
+    var validatorsCache = useMemo(function () { return selectValidatorsFor(fields); }, [fields]);
+    var setIsLoadingApp = useAppLoadingContext().setIsLoadingApp;
+    var columnsWithErrorCounts = useRef({});
+    var columnsWithWarningCounts = useRef({});
+    var totalErrorCount = useRef(0);
+    var invalidRowsCountRef = useRef(0);
+    var _c = useState(false), spreadsheetInitialized = _c[0], setSpreadsheetInitialized = _c[1];
+    var _d = useEventManagerContext(), emit = _d.emit, EVENTS = _d.EVENTS;
+    var _e = useDataSetContext(), getRecord = _e.getRecord, setRecord = _e.setRecord, dataSet = _e.dataSet;
+    var _f = useDuplicateDataContext(), duplicateValues = _f.duplicateValues, updateDuplicateValues = _f.updateDuplicateValues;
+    var processRecordsInBatches = useBatchProcessing(10000).processRecordsInBatches;
+    var reset = function () {
+        columnsWithErrorCounts.current = {};
+        columnsWithWarningCounts.current = {};
+        totalErrorCount.current = 0;
+        invalidRowsCountRef.current = 0;
+    };
+    var calculateColumnErrorCounts = function (oldErrors, newErrors) {
+        if (oldErrors === void 0) { oldErrors = {}; }
+        if (newErrors === void 0) { newErrors = {}; }
+        if (Object.keys(oldErrors).length === 0 &&
+            Object.keys(newErrors).length > 0)
+            invalidRowsCountRef.current += 1;
+        if (Object.keys(oldErrors).length > 0 &&
+            Object.keys(newErrors).length === 0)
+            invalidRowsCountRef.current -= 1;
+        calculateFieldCountChangeInRecord(oldErrors, newErrors, columnsWithErrorCounts, totalErrorCount);
+    };
+    var calculateColumnWarningCounts = function (oldWarnings, newWarnings) {
+        if (oldWarnings === void 0) { oldWarnings = {}; }
+        if (newWarnings === void 0) { newWarnings = {}; }
+        calculateFieldCountChangeInRecord(oldWarnings, newWarnings, columnsWithWarningCounts);
+    };
+    var batchValidationDelayMs = 100;
+    var sleep = function (n) { return new Promise(function (resolve) { return setTimeout(resolve, n); }); };
+    var getBackendErrors = function (record) {
+        var _a;
+        var recordBackendErrors = (_a = record === null || record === void 0 ? void 0 : record._meta) === null || _a === void 0 ? void 0 : _a.backendErrors;
+        return recordBackendErrors || null;
+    };
+    var _validateRecord = function (record, initialValidation) {
+        if (initialValidation === void 0) { initialValidation = false; }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var recordId, oldRecord, newRecord, backendErrors, _a, recordErrors, recordWarnings, hasError, hasWarning;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!record)
+                            return [2 /*return*/];
+                        recordId = record._meta.id;
+                        oldRecord = getRecord(recordId);
+                        updateDuplicateValues(oldRecord, record, initialValidation, updateRecordAndRevalidate);
+                        newRecord = setRecord(recordId, __assign({}, record));
+                        backendErrors = getBackendErrors(record);
+                        return [4 /*yield*/, validateRecord({
+                                validatorsCache: validatorsCache,
+                                onValidateRecord: onValidateRecord,
+                                fields: fields,
+                                record: newRecord,
+                                duplicateValues: duplicateValues,
+                                backendErrors: backendErrors,
+                            })];
+                    case 1:
+                        _a = _b.sent(), recordErrors = _a.errors, recordWarnings = _a.warnings;
+                        calculateColumnErrorCounts(errors.current[recordId], recordErrors);
+                        calculateColumnWarningCounts(warnings.current[recordId], recordWarnings);
+                        hasError = checkIfHasErrors(recordErrors);
+                        hasWarning = checkIfHasErrors(recordWarnings);
+                        newRecord._meta.isInvalid = hasError;
+                        newRecord._meta.hasWarning = hasWarning;
+                        if (hasError) {
+                            errors.current[recordId] = recordErrors;
+                        }
+                        else {
+                            delete errors.current[recordId];
+                        }
+                        if (hasWarning) {
+                            warnings.current[recordId] = recordWarnings;
+                        }
+                        else {
+                            delete warnings.current[recordId];
+                        }
+                        if (backendErrors) {
+                            record._meta.backendErrors = {};
+                        }
+                        emit(recordId, newRecord);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    var updateValidationPercentage = function (recordsValidated, totalRecords) {
+        var validationPercentage = (Math.min(recordsValidated, totalRecords) / totalRecords) * 100;
+        setValidationPercentage(Math.round((validationPercentage + Number.EPSILON) * 10) / 10);
+    };
+    // Validate record and update dataSet
+    var updateRecordAndRevalidate = function (records, initialValidation) {
+        if (initialValidation === void 0) { initialValidation = false; }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var recordsArray, length, recordsProcessed;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        recordsArray = Array.isArray(records) ? records : [records];
+                        length = recordsArray.length;
+                        if (!(length > 10000)) return [3 /*break*/, 2];
+                        setIsLoadingApp(true);
+                        // wait for the first render to complete
+                        // before blocking main thread with review step logic
+                        return [4 /*yield*/, sleep(200)];
+                    case 1:
+                        // wait for the first render to complete
+                        // before blocking main thread with review step logic
+                        _a.sent();
+                        _a.label = 2;
+                    case 2:
+                        recordsProcessed = 0;
+                        return [4 /*yield*/, processRecordsInBatches(recordsArray, function (batch) { return __awaiter(void 0, void 0, void 0, function () {
+                                var i, record;
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0:
+                                            i = 0;
+                                            _a.label = 1;
+                                        case 1:
+                                            if (!(i < batch.length)) return [3 /*break*/, 4];
+                                            record = batch[i];
+                                            return [4 /*yield*/, _validateRecord(record, initialValidation)];
+                                        case 2:
+                                            _a.sent();
+                                            recordsProcessed += 1;
+                                            _a.label = 3;
+                                        case 3:
+                                            i++;
+                                            return [3 /*break*/, 1];
+                                        case 4:
+                                            updateValidationPercentage(recordsProcessed, length);
+                                            emit(EVENTS.UPDATE_COLUMN_ERROR_COUNT);
+                                            emit(EVENTS.UPDATE_TOTAL_ERROR_COUNT);
+                                            emit(EVENTS.UPDATE_TOTAL_ROW_COUNT);
+                                            return [4 /*yield*/, sleep(batchValidationDelayMs)];
+                                        case 5:
+                                            _a.sent();
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); })];
+                    case 3:
+                        _a.sent();
+                        setIsLoadingApp(false);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    // Initial data validation and update dataSet
+    useEffect(function () {
+        reset();
+        if (!dataSet.current || isReadOnly)
+            return;
+        setIsLoadingApp(true);
+        var initialValidation = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var initialData;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        initialData = Object.values(dataSet.current);
+                        return [4 /*yield*/, updateRecordAndRevalidate(initialData, true)];
+                    case 1:
+                        _a.sent();
+                        setSpreadsheetInitialized(true);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, initialValidation()];
+                    case 1:
+                        _a.sent();
+                        setIsLoadingApp(false);
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, [dataSet.current]);
+    var isValidationCompleted = validationPercentage === 100;
+    var isValid = isValidationCompleted && totalErrorCount.current === 0;
+    var value = {
+        errors: errors,
+        warnings: warnings,
+        totalErrorCount: totalErrorCount,
+        invalidRowsCountRef: invalidRowsCountRef,
+        columnsWithErrorCounts: columnsWithErrorCounts,
+        columnsWithWarningCounts: columnsWithWarningCounts,
+        calculateColumnErrorCounts: calculateColumnErrorCounts,
+        calculateColumnWarningCounts: calculateColumnWarningCounts,
+        validationPercentage: validationPercentage,
+        isValidationCompleted: isValidationCompleted,
+        isValid: isValid,
+        updateRecordAndRevalidate: updateRecordAndRevalidate,
+        spreadsheetInitialized: spreadsheetInitialized,
+    };
+    return (_jsx(ValidationContext.Provider, __assign({ value: value }, { children: children })));
+};
+export var useValidationContext = function () { return useContext(ValidationContext); };

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

@@ -5,10 +5,10 @@ export var isNullOrUndefined = function (value) {
     return value === null || value === undefined;
 };
 export var isEmpty = function (value) {
-    return (value === undefined ||
-        value === null ||
+    return (isNullOrUndefined(value) ||
         (typeof value === "object" && Object.keys(value).length === 0) ||
-        (typeof value === "string" && value.trim().length === 0));
+        (typeof value === "string" &&
+            (value.length === 0 || value.trim().length === 0)));
 };
 export var isEmail = function (value) {
     var emailRegex = /^[\w+.-]+@([\w-]+\.)+[\w-]{2,4}$/;
@@ -46,7 +46,8 @@ export var ignoreNullOrUndefinedKeyValues = function (obj) {
     return result;
 };
 export var isRecordEmpty = function (record, fields) {
-    return fields.reduce(function (isEmptyRecord, f) { return isEmptyRecord && isEmpty(record[f.name]); }, true);
+    var hasValue = fields.some(function (f) { return !isEmpty(record[f.name]); });
+    return !hasValue;
 };
 export var parseValue = function (fieldType, value, enumSet) {
     if (isEmpty(value))

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { DivCSSProps } from "../../../../styled";
-import { RecordDataSet, Field, SpreadsheetOptions, OnValidateRecord, Record } from "../../../../types";
-import { OnDataSetChanged, OnValidationStateChanged } from "../SpreadsheetContextProvider";
+import { Field, OnValidateRecord, Record, RecordDataSet, SpreadsheetOptions } from "../../../../types";
+import { OnDataSetChanged } from "../SpreadsheetContextProvider";
 export declare enum SortOrder {
     ASC = "asc",
     DESC = "desc"
@@ -18,7 +18,6 @@ export type SpreadsheetProps = {
     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/components/FieldHeader.d.ts

@@ -7,8 +7,6 @@ type SortIndicatorProps = {
 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;

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

@@ -14,11 +14,14 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { colors } from "../../../../styled/theme/colorPalette";
+import { useEffect, useState } from "react";
 import styled, { css } from "styled-components";
 import { TooltipProvider } from "../../../../common";
+import { useEventManagerContext } from "../../../../common/EventManagerContextProvider";
+import { colors } from "../../../../styled/theme/colorPalette";
 import { Div } from "../../../../styled/utils";
-import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
+import { useFilteredDataContext } from "../FilteredDataContextProvider";
+import { useValidationContext } from "../ValidationContextProvider";
 import { SortOrder } from "../common/types";
 var ErrorCount = styled(Div)(function (_a) {
     var _b = _a.theme, colors = _b.colors, c = _b.css;
@@ -28,11 +31,23 @@ export var SortIndicator = styled(Div)(templateObject_3 || (templateObject_3 = _
     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, 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 &&
+    var field = _a.field;
+    var _b = useValidationContext(), columnsWithErrorCounts = _b.columnsWithErrorCounts, columnsWithWarningCounts = _b.columnsWithWarningCounts;
+    var _c = useFilteredDataContext(), handleSortByFieldErrors = _c.handleSortByFieldErrors, handleSortByFieldWarnings = _c.handleSortByFieldWarnings, sortBy = _c.sortBy, setSortBy = _c.setSortBy, spreadsheetFilter = _c.spreadsheetFilter, filteredInputValue = _c.filteredInputValue;
+    var _d = useEventManagerContext(), on = _d.on, off = _d.off, EVENTS = _d.EVENTS;
+    var _e = useState(columnsWithErrorCounts.current[field.name] || null), fieldErrorCount = _e[0], setFieldErrorCount = _e[1];
+    var _f = useState(columnsWithWarningCounts.current[field.name] || null), fieldWarningCount = _f[0], setFieldWarningCount = _f[1];
+    useEffect(function () {
+        var listener = function () {
+            setFieldErrorCount(columnsWithErrorCounts.current[field.name] || null);
+        };
+        on(EVENTS.UPDATE_COLUMN_ERROR_COUNT, listener);
+        return function () {
+            off(EVENTS.UPDATE_COLUMN_ERROR_COUNT, listener);
+        };
+    }, []);
+    var shouldRenderErrorCount = fieldErrorCount !== null &&
+        fieldErrorCount > 0 &&
         filteredInputValue === "" &&
         spreadsheetFilter.type === "rowBased" &&
         spreadsheetFilter.byRow === "all";
@@ -50,16 +65,16 @@ export var FieldHeader = function (_a) {
             });
         }
     };
-    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) {
+    return (_jsxs(Div, __assign({ "data-cy": "column-header", "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, "data-cy": "tool-tip-message", tooltip: "Sort by ".concat(field.label, " errors") }, { children: _jsx(ErrorCount, __assign({ "data-cy": "column-error", "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: {
+                        handleSortByFieldErrors(field.name);
+                    } }, { children: _jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 35, textAlignCenter: true, label3: true, truncateText: true }, { children: fieldErrorCount })) })) })) }))), !fieldErrorCount && fieldWarningCount !== null && fieldWarningCount > 0 && (_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 (ev) {
                         ev.stopPropagation();
-                        sortByFieldWarnings(field.name);
+                        handleSortByFieldWarnings(field.name);
                     } }, { children: _jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 35, textAlignCenter: true, label3: true, truncateText: true }, { children: fieldWarningCount })) })) })) })))] })));
 };
 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" }) })));

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

@@ -23,7 +23,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { areEqual } from "react-window";
+import { TableActions } from "../../../../common/Table/TableActions";
+import { useImporterContext } from "../../../../Importer/contexts/ImporterContextProvider";
 import { Div } from "../../../../styled/utils";
+import useWindowDimensions from "../../../../utils/hooks/useWindowSize";
 import { getTableHeight } from "../../../common";
 import { spreadsheetHeaderHeightPx, spreadsheetRowHeightPx } from "../common";
 import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
@@ -32,22 +35,24 @@ import { FieldHeader } from "./FieldHeader";
 import GlobalStyle from "./GlobalStyle";
 import { inputTypes } from "./inputs";
 import { SpreadsheetRowCheckboxes } from "./SpreadsheetRowCheckboxes";
-import ValidationProgress from "./ValidationProgress";
-import { TableActions } from "../../../../common/Table/TableActions";
-import { useImporterContext } from "../../../../Importer/contexts/ImporterContextProvider";
-import useWindowDimensions from "../../../../utils/hooks/useWindowSize";
+import { useDataSetContext } from "../DataSetContextProvider";
+import { useFilteredDataContext } from "../FilteredDataContextProvider";
+import { useValidationContext } from "../ValidationContextProvider";
 var getItemKey = function (record) { return record._meta.id; };
 var SpreadsheetData = function (props) {
-    var _a = useSpreadsheetContext(), fields = _a.fields, data = _a.data, isReadOnly = _a.isReadOnly, totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage, setSortByFieldErrors = _a.setSortByFieldErrors, options = _a.options, setSortByFieldWarnings = _a.setSortByFieldWarnings, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows, checkboxColumnWidth = _a.checkboxColumnWidth, isFiltering = _a.isFiltering;
+    var _a = useSpreadsheetContext(), fields = _a.fields, filteredDataIds = _a.filteredDataIds, isReadOnly = _a.isReadOnly, options = _a.options, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows, checkboxColumnWidth = _a.checkboxColumnWidth;
+    var _b = useFilteredDataContext(), isFiltering = _b.isFiltering, handleSortByFieldErrors = _b.handleSortByFieldErrors;
+    var validationPercentage = useValidationContext().validationPercentage;
+    var dataSet = useDataSetContext().dataSet;
     var currentStepIndex = useImporterContext().currentStepIndex;
     var isOnSmallScreens = useWindowDimensions().isOnSmallScreens;
     var canShowCheckboxOnCheckboxRowHover = currentStepIndex === 2;
     var rowNumbersGridRef = useRef();
     var rowCheckboxesGridRef = useRef();
     useEffect(function () {
-        if (data.length > 0 && options.withSingleRowSelect)
-            setSelectedRows([data === null || data === void 0 ? void 0 : data[0]._meta.id]);
-    }, [options.withSingleRowSelect]);
+        if (filteredDataIds.length > 0 && options.withSingleRowSelect)
+            setSelectedRows([filteredDataIds === null || filteredDataIds === void 0 ? void 0 : filteredDataIds[0]]);
+    }, [options.withSingleRowSelect, filteredDataIds]);
     var rowWidthScalingFactor = (function () {
         // Spreadsheet will display 6 columns on the viewport and a small portion of the
         // 7th column in the right side to let the user know they can scroll horizontally
@@ -74,14 +79,14 @@ var SpreadsheetData = function (props) {
     })();
     var columns = useMemo(function () {
         return fields.map(function (field) { return ({
-            Header: function () { return (_jsx(FieldHeader, { field: field, sortByFieldErrors: setSortByFieldErrors, sortByFieldWarnings: setSortByFieldWarnings })); },
+            Header: function () { return _jsx(FieldHeader, { field: field }); },
             Content: function (record) {
                 var Input = inputTypes[field.type];
                 var rowIndex = record.rowIndex, columnWidth = record.columnWidth, recordProp = __rest(record, ["rowIndex", "columnWidth"]);
                 return (_jsx(Input, { id: "".concat(field.name, "-").concat(rowIndex), fieldType: field.type, name: field.name, options: field.options, record: recordProp, columnWidth: columnWidth }));
             },
         }); });
-    }, [fields, setSortByFieldErrors]);
+    }, [fields, handleSortByFieldErrors, dataSet.current]);
     var onTableScroll = useCallback(function (scrollTop) {
         if (rowNumbersGridRef.current) {
             var grid = rowNumbersGridRef.current;
@@ -92,7 +97,7 @@ var SpreadsheetData = function (props) {
             grid.scrollTo({ scrollTop: scrollTop });
         }
     }, []);
-    var dataLength = data === null || data === void 0 ? void 0 : data.length;
+    var dataLength = filteredDataIds.length;
     var spreadsheetHeight = useMemo(function () {
         return getTableHeight({
             headerHeight: spreadsheetHeaderHeightPx,
@@ -104,7 +109,10 @@ var SpreadsheetData = function (props) {
     }, [dataLength]);
     var showValidationProgress = !isReadOnly && validationPercentage < 100;
     var isReviewStep = currentStepIndex === 2;
-    return (_jsxs(S.SpreadSheetData, __assign({ h100: true, flexColumn: true, className: props.className }, { children: [_jsx(GlobalStyle, {}), showValidationProgress && (_jsx(Div, __assign({ h: 32 }, { children: _jsx(ValidationProgress, { totalErrors: totalErrors, validationPercentage: validationPercentage }) }))), _jsxs(S.SpreadSheetContainer, __assign({ flexColumn: true, w100: true, h100: true }, { children: [_jsx(Div, __assign({ w100: true, justifyCenter: true }, { children: isReviewStep && _jsx(TableActions, {}) })), _jsxs(S.SpreadSheetWrapper, __assign({ canShowCheckboxOnHover: !showValidationProgress && canShowCheckboxOnCheckboxRowHover, shouldShowOnlyCheckbox: (!showValidationProgress && selectedRows.length > 0) ||
-                            currentStepIndex === 0, dflex: true, h100: true }, { children: [(options === null || options === void 0 ? void 0 : options.showCheckboxColumn) && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, height: spreadsheetHeight, isLoadingData: showValidationProgress })), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, rowHeight: spreadsheetRowHeightPx, h: null, rowWidthScalingFactor: rowWidthScalingFactor, data: data, columns: columns, onTableScroll: onTableScroll, getItemKey: getItemKey, checkboxColumnWidth: checkboxColumnWidth, isFiltering: isFiltering })] }))] }))] })));
+    return (_jsxs(S.SpreadSheetData, __assign({ h100: true, flexColumn: true, className: props.className }, { children: [_jsx(GlobalStyle, {}), _jsxs(S.SpreadSheetContainer, __assign({ flexColumn: true, w100: true, h100: true }, { children: [_jsx(Div, __assign({ w100: true, justifyCenter: true }, { children: isReviewStep && _jsx(TableActions, {}) })), _jsxs(S.SpreadSheetWrapper, __assign({ canShowCheckboxOnHover: !showValidationProgress && canShowCheckboxOnCheckboxRowHover, shouldShowOnlyCheckbox: (!showValidationProgress && selectedRows.length > 0) ||
+                            currentStepIndex === 0, dflex: true, h100: true }, { children: [(options === null || options === void 0 ? void 0 : options.showCheckboxColumn) && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, height: spreadsheetHeight, isLoadingData: showValidationProgress })), _jsx(S.TableView, { rowCount: filteredDataIds.length, tableHeadersHeight: spreadsheetHeaderHeightPx, rowHeight: spreadsheetRowHeightPx, h: null, rowWidthScalingFactor: rowWidthScalingFactor, dataRefIds: {
+                                    ref: dataSet,
+                                    ids: filteredDataIds,
+                                }, columns: columns, onTableScroll: onTableScroll, getItemKey: getItemKey, checkboxColumnWidth: checkboxColumnWidth, isFiltering: isFiltering })] }))] }))] })));
 };
 export default React.memo(SpreadsheetData, areEqual);