fuse-importer 0.25.9 → 0.26.1

package/lib/esm/Importer/contexts/ImporterContextProvider.js

@@ -45,20 +45,29 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         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 Fuse from "fuse.js";
 import { createContext, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { FieldTypes, } from "../../types";
 import { FuseApi } from "../common/FuseApi";
 import { getCustomTheme, theme } from "../common/theme";
-import { getColumnType } from "../common/utils";
+import { getColumnType, verifyDuplicateValue } from "../common/utils";
 export var fusejsOptions = {
     includeScore: true,
     threshold: 0.35,
 };
 var ImporterContext = createContext({});
 export var ImporterContextProvider = function (_a) {
-    var templateSlug = _a.templateSlug, apiToken = _a.apiToken, children = _a.children, options = _a.options, onSubmit = _a.onSubmit, onClose = _a.onClose, formatRecord = _a.formatRecord, onValidateRecord = _a.onValidateRecord;
+    var templateSlug = _a.templateSlug, apiToken = _a.apiToken, children = _a.children, options = _a.options, onSubmit = _a.onSubmit, onClose = _a.onClose, formatRecord = _a.formatRecord, onValidateRecord = _a.onValidateRecord, dynamicColumns = _a.dynamicColumns;
     var _b = useState(0), currentStepIndex = _b[0], setCurrentStepIndex = _b[1];
     var _c = useState(0), matcherSubstep = _c[0], setMatcherSubstep = _c[1];
     var _d = useState(null), templateError = _d[0], setTemplateError = _d[1];
@@ -125,7 +134,7 @@ export var ImporterContextProvider = function (_a) {
     }, [uploadedData]);
     useEffect(function () {
         (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var _a, organization_1, columns, importer_style_preferences, integrations_1, preview_first_time, columnsOrderedByPosition, error_1, errorMsg;
+            var _a, organization_1, columns_1, importer_style_preferences, integrations_1, preview_first_time, error_1, errorMsg;
             var _b, _c;
             return __generator(this, function (_d) {
                 switch (_d.label) {
@@ -133,10 +142,21 @@ export var ImporterContextProvider = function (_a) {
                         _d.trys.push([0, 2, , 3]);
                         return [4 /*yield*/, fuseApi.get("/api/v1/importer/templates/".concat(templateSlug))];
                     case 1:
-                        _a = (_d.sent()).data, organization_1 = _a.organization, columns = _a.columns, importer_style_preferences = _a.importer_style_preferences, integrations_1 = _a.integrations, preview_first_time = _a.preview_first_time;
-                        columnsOrderedByPosition = columns.sort(function (a, b) { return a.position - b.position; });
+                        _a = (_d.sent()).data, organization_1 = _a.organization, columns_1 = _a.columns, importer_style_preferences = _a.importer_style_preferences, integrations_1 = _a.integrations, preview_first_time = _a.preview_first_time;
                         setOrganization(organization_1);
-                        setTemplateHeaders(columnsOrderedByPosition);
+                        setTemplateHeaders(function () {
+                            // user has created dynamic columns
+                            if (dynamicColumns && (dynamicColumns === null || dynamicColumns === void 0 ? void 0 : dynamicColumns.length) >= 0) {
+                                var allColumns = __spreadArray(__spreadArray([], columns_1, true), dynamicColumns, true);
+                                var columnsOrderedByPosition_1 = allColumns.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.position) - (b === null || b === void 0 ? void 0 : b.position); });
+                                verifyDuplicateValue(columnsOrderedByPosition_1, "internal_key", true, "There is a duplicated 'internal_key' between your columns.");
+                                verifyDuplicateValue(columnsOrderedByPosition_1, "label", true, "There is a duplicated 'label' between your columns.");
+                                return columnsOrderedByPosition_1;
+                            }
+                            // user has not created dynamic columns
+                            var columnsOrderedByPosition = columns_1.sort(function (a, b) { return a.position - b.position; });
+                            return columnsOrderedByPosition;
+                        });
                         setIntegrations(integrations_1);
                         setPreviewFirstTime(preview_first_time);
                         if (organization_1.plan && organization_1.plan.allow_style_customization) {
@@ -153,7 +173,7 @@ export var ImporterContextProvider = function (_a) {
                 }
             });
         }); })();
-    }, []);
+    }, [dynamicColumns]);
     var resetImport = function () {
         setUploadedData(null);
         setTemplateHeaderMatchings(null);

package/lib/esm/Importer/data/index.d.ts

@@ -1,7 +1,12 @@
 import { Field, FieldTypes, FormatRecord, Record, RecordDataSet, TemplateHeader } from "../../types";
 import { EnumFieldValueMatchings, HeaderMatchings } from "../contexts/ImporterContextProvider";
-export declare const addEmptyRows: (data: Record[], fields: Field[]) => Record[];
-export declare const addMeta: (record: any, index: number) => Record;
+export declare const addEmptyRows: (data: Record[], fields: Field[]) => {
+    _meta: {
+        id: string;
+        rowIndex: number;
+    };
+}[];
+export declare const addMeta: (record: any, index: number, uploadedRow?: any) => Record;
 export declare const recordListToDataSet: (data: Record[], fields: Field[]) => RecordDataSet;
 type transformToRecordsArgs = {
     templateHeaderMatchings: HeaderMatchings;

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

@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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 { FieldTypes, } from "../../types";
 import { parseValue } from "../common/Spreadsheet/common";
 var MINIMUM_ROW_COUNT = 20;
@@ -21,19 +30,18 @@ export var addEmptyRows = function (data, fields) {
         var _a;
         return (__assign(__assign({}, obj), (_a = {}, _a[f.name] = null, _a)));
     }, {});
-    for (var i = data.length; i < MINIMUM_ROW_COUNT; i++) {
-        data.push(__assign(__assign({}, emptyRecord), { _meta: {
-                id: getRowId(i),
-                rowIndex: i,
-            } }));
-    }
-    return data;
+    var newData = Array.from({ length: MINIMUM_ROW_COUNT - data.length }, function (_, index) { return (__assign(__assign({}, emptyRecord), { _meta: {
+            id: getRowId(data.length + index),
+            rowIndex: data.length + index,
+        } })); });
+    return __spreadArray(__spreadArray([], data, true), newData, true);
 };
-export var addMeta = function (record, index) {
+export var addMeta = function (record, index, uploadedRow) {
     var _a;
+    if (uploadedRow === void 0) { uploadedRow = null; }
     var rId = getRowId(index);
     var meta = (_a = record._meta) !== null && _a !== void 0 ? _a : {};
-    return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { id: rId, rowIndex: index, touched: false }) });
+    return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { id: rId, rowIndex: index, touched: false, uploadedRow: uploadedRow }) });
 };
 export var recordListToDataSet = function (data, fields) {
     var initialData = data;
@@ -59,7 +67,7 @@ var transformToRecords = function (_a) {
         return (__assign(__assign({}, byLabel), (_a = {}, _a[header.label] = header, _a)));
     }, {});
     var getRecord = function (row, index) {
-        var record = addMeta({}, index);
+        var record = addMeta({}, index, row);
         matchedColumnsLabels.forEach(function (_a) {
             var label = _a.label, index = _a.index;
             var enumSet = enumFieldValueMatchings

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

@@ -1,4 +1,4 @@
-import { FormatRecord, ImporterOptions, OnSubmit, OnValidateRecord } from "../types";
+import { FormatRecord, ImporterOptions, OnSubmit, OnValidateRecord, TemplateHeader } from "../types";
 export declare const ACCOUNT_ROUTES: {
     TEMPLATES: string;
 };
@@ -13,8 +13,9 @@ type ImporterProps = {
     onValidateRecord?: OnValidateRecord;
     onSubmit?: OnSubmit;
     onClose: () => void;
+    dynamicColumns: TemplateHeader[];
 };
-declare const Importer: ({ templateSlug, apiToken, options, formatRecord, onValidateRecord, onSubmit, onClose, }: ImporterProps) => JSX.Element;
+declare const Importer: ({ templateSlug, apiToken, options, formatRecord, onValidateRecord, onSubmit, onClose, dynamicColumns, }: ImporterProps) => JSX.Element;
 export * from "./common/Spreadsheet";
 export * from "./common/utils";
 export * from "./Review/ReviewContextProvider";

package/lib/esm/Importer/index.js

@@ -12,7 +12,6 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ImporterContextProvider } from "./contexts/ImporterContextProvider";
 import { ImporterWithContext } from "./ImporterWithContext";
-import { useFullscreenOverlay } from "./useFullscreenOverlay";
 export var ACCOUNT_ROUTES = {
     TEMPLATES: "/importers",
 };
@@ -20,9 +19,8 @@ export var ACCOUNT_VIEW_PATH = "/account";
 var p = function (path) { return "".concat(ACCOUNT_VIEW_PATH).concat(path); };
 export var TEMPLATES_ROUTE = p(ACCOUNT_ROUTES.TEMPLATES);
 var Importer = function (_a) {
-    var templateSlug = _a.templateSlug, apiToken = _a.apiToken, options = _a.options, formatRecord = _a.formatRecord, onValidateRecord = _a.onValidateRecord, onSubmit = _a.onSubmit, onClose = _a.onClose;
-    useFullscreenOverlay();
-    return (_jsx(ImporterContextProvider, __assign({ options: options, templateSlug: templateSlug, apiToken: apiToken, formatRecord: formatRecord, onValidateRecord: onValidateRecord, onClose: onClose, onSubmit: onSubmit }, { children: _jsx(ImporterWithContext, {}) })));
+    var templateSlug = _a.templateSlug, apiToken = _a.apiToken, options = _a.options, formatRecord = _a.formatRecord, onValidateRecord = _a.onValidateRecord, onSubmit = _a.onSubmit, onClose = _a.onClose, dynamicColumns = _a.dynamicColumns;
+    return (_jsx(ImporterContextProvider, __assign({ options: options, templateSlug: templateSlug, apiToken: apiToken, formatRecord: formatRecord, onValidateRecord: onValidateRecord, onClose: onClose, onSubmit: onSubmit, dynamicColumns: dynamicColumns }, { children: _jsx(ImporterWithContext, {}) })));
 };
 export * from "./common/Spreadsheet";
 export * from "./common/utils";

package/lib/esm/common/Table/TableActions/DeleteSelectedRows.js

@@ -19,27 +19,16 @@ import styled from "styled-components";
 import { TooltipProvider } from "../../../common/TooltipProvider";
 import { ConfirmationModal } from "../../../common/ConfirmationModal";
 import { useSpreadsheetContext } from "../../../Importer";
-import { useImporterContext } from "../../../Importer/contexts/ImporterContextProvider";
 import { DeleteIcon, ConfirmationDeleteIcon } from "./icons";
-import { addToast } from "../../../common/Toast";
 import { Div } from "../../../styled/utils";
 import { ActionButton } from "./TableActions.styles";
+import { useTranslation } from "react-i18next";
 var StyledTooltipProvider = styled(TooltipProvider)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
-var filterByRecordsThatContainsValues = function (mainObject) {
-    return mainObject.filter(function (obj) {
-        for (var key in obj) {
-            if (key !== "_meta" && obj[key] !== null && obj[key] !== undefined) {
-                return true;
-            }
-        }
-        return false;
-    });
-};
 export var DeleteSelectedRows = function (_a) {
     var _b = _a.testId, testId = _b === void 0 ? "ta-delete-rows" : _b;
     var _c = useState(false), isConfirmationModalOpen = _c[0], setIsConfirmationModalOpen = _c[1];
-    var _d = useSpreadsheetContext(), data = _d.data, filteredInputValue = _d.filteredInputValue, deleteRecords = _d.deleteRecords, selectedRows = _d.selectedRows, setSelectedRows = _d.setSelectedRows, setFilteredInputValue = _d.setFilteredInputValue;
-    var _e = useImporterContext(), setCurrentStepIndex = _e.setCurrentStepIndex, isUsingManualImport = _e.isUsingManualImport;
+    var _d = useSpreadsheetContext(), deleteRecords = _d.deleteRecords, selectedRows = _d.selectedRows, setSelectedRows = _d.setSelectedRows, setFilteredInputValue = _d.setFilteredInputValue;
+    var t = useTranslation("review").t;
     var toggleModalVisibility = function () {
         setIsConfirmationModalOpen(function (oldValue) { return !oldValue; });
     };
@@ -47,19 +36,15 @@ export var DeleteSelectedRows = function (_a) {
         setSelectedRows([]);
         toggleModalVisibility();
         setFilteredInputValue("");
-        var validData = filterByRecordsThatContainsValues(data);
-        // If user is deleting every row, but not using the manual import option
-        if (!isUsingManualImport.current &&
-            !filteredInputValue &&
-            selectedRows.length === validData.length) {
-            setCurrentStepIndex(0);
-            return addToast("You have deleted all the rows. You will be redirect to the upload step.", "success");
-        }
         deleteRecords(selectedRows);
     };
-    var DescriptionUI = function () { return (_jsx(_Fragment, { children: _jsxs(Div, { children: ["Are you sure you want to delete ", selectedRows.length, " row", selectedRows.length > 1 ? "s" : "", "?"] }) })); };
-    var confirmationModalUI = (_jsx(ConfirmationModal, { isOpen: isConfirmationModalOpen, handleClose: toggleModalVisibility, title: "Delete Selected Row".concat(selectedRows.length > 1 ? "s" : ""), description: _jsx(DescriptionUI, {}), onSubmit: handleDeleteRecord, buttonText: "Yes, delete", icon: ConfirmationDeleteIcon }));
+    var DescriptionUI = function () { return (_jsx(_Fragment, { children: _jsxs(Div, { children: [t("table_actions.delete_rows.confirmation_modal", {
+                    length: selectedRows.length,
+                }), selectedRows.length > 1 ? "s" : "", "?"] }) })); };
+    var confirmationModalUI = (_jsx(ConfirmationModal, { isOpen: isConfirmationModalOpen, handleClose: toggleModalVisibility, title: "".concat(t("table_actions.delete_rows.modal_title")).concat(selectedRows.length > 1 ? "s" : ""), description: _jsx(DescriptionUI, {}), onSubmit: handleDeleteRecord, buttonText: t("table_actions.delete_rows.yes_delete"), icon: ConfirmationDeleteIcon }));
     var isDeleteButtonDisabled = selectedRows.length <= 0;
-    return (_jsxs(_Fragment, { children: [confirmationModalUI, _jsx(StyledTooltipProvider, __assign({ tooltip: isDeleteButtonDisabled ? "Select rows to delete" : "Delete Row", placement: "right", flip: false, centered: true, "data-testid": testId }, { children: _jsx(ActionButton, __assign({ onClick: toggleModalVisibility, disabled: isDeleteButtonDisabled }, { children: _jsx(DeleteIcon, {}) })) }))] }));
+    return (_jsxs(_Fragment, { children: [confirmationModalUI, _jsx(StyledTooltipProvider, __assign({ tooltip: isDeleteButtonDisabled
+                    ? t("table_actions.delete_rows.select_rows")
+                    : t("table_actions.delete_rows.delete_row"), placement: "right", flip: false, centered: true, "data-testid": testId }, { children: _jsx(ActionButton, __assign({ onClick: toggleModalVisibility, disabled: isDeleteButtonDisabled }, { children: _jsx(DeleteIcon, {}) })) }))] }));
 };
 var templateObject_1;

package/lib/esm/common/Table/TableActions/ExportData.js

@@ -14,8 +14,10 @@ import { DownloadIcon } from "./icons";
 import { useReviewContext } from "../../../Importer";
 import { TooltipProvider } from "../../../common/TooltipProvider";
 import { ActionButton } from "./TableActions.styles";
+import { useTranslation } from "react-i18next";
 export var ExportData = function (_a) {
     var _b = _a.testId, testId = _b === void 0 ? "ta-export-data" : _b;
     var onExport = useReviewContext().onExport;
-    return (_jsx(TooltipProvider, __assign({ tooltip: "Export your data", placement: "right", flip: false, centered: true, "data-testid": testId }, { children: _jsx(ActionButton, __assign({ onClick: onExport }, { children: _jsx(DownloadIcon, {}) })) })));
+    var t = useTranslation("review").t;
+    return (_jsx(TooltipProvider, __assign({ tooltip: t("table_actions.export_your_data.tooltip"), placement: "right", flip: false, centered: true, "data-testid": testId }, { children: _jsx(ActionButton, __assign({ onClick: onExport }, { children: _jsx(DownloadIcon, {}) })) })));
 };

package/lib/esm/common/Table/TableActions/FilterByErrors/FilterByErrors.d.ts

@@ -0,0 +1 @@
+export declare const FilterByErrors: () => JSX.Element;

package/lib/esm/common/Table/TableActions/FilterByErrors/FilterByErrors.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import * as S from "./FilterByErrors.styles";
+import { useSpreadsheetContext } from "../../../../Importer";
+import { formatErrors, getUniqueErrors } from "./functions";
+import { useTranslation } from "react-i18next";
+import { addToast } from "../../../../common/Toast";
+export var FilterByErrors = function () {
+    var _a = useSpreadsheetContext(), errors = _a.errors, fields = _a.fields, selectedErrorToFilter = _a.selectedErrorToFilter, setSelectedErrorToFilter = _a.setSelectedErrorToFilter;
+    var _b = useState(false), isMenuOpened = _b[0], setIsMenuOpened = _b[1];
+    var t = useTranslation("review").t;
+    var prefix = "Filter by errors: ";
+    var onToggle = function (isOpen) {
+        if (errorArray.length === 0)
+            return;
+        setIsMenuOpened(isOpen);
+    };
+    var onChange = function (selected) {
+        if (selected) {
+            var selectedField = fields.filter(function (field) { return field.name === selected; });
+            var label = selectedField[0].label || selected;
+            addToast("Showing only the rows with error on the ".concat(label, " column"), "success");
+        }
+        setSelectedErrorToFilter(selected || "");
+    };
+    var uniqueErrors = getUniqueErrors(fields, errors);
+    var errorArray = formatErrors(fields, uniqueErrors);
+    // the average size of each character in the input (in px)
+    var widthPerCharacter = 5.3;
+    var amountOfCharacters = prefix.length + (selectedErrorToFilter === null || selectedErrorToFilter === void 0 ? void 0 : selectedErrorToFilter.length) || 0;
+    // 24 + 24 -> padding right and left + 48px of the X icon area
+    var totalWidth = widthPerCharacter * amountOfCharacters + 24 + 48;
+    var inputWidth = selectedErrorToFilter ? "".concat(totalWidth, "px") : "fit-content";
+    var search_or_select = t("table_actions.filter_by_errors.search_or_select");
+    var filter_by_errors = t("table_actions.filter_by_errors.filter_by_errors");
+    return (_jsx(S.StyledAutocomplete, { placement: "bottom", placeholder: isMenuOpened ? search_or_select : filter_by_errors, onChange: onChange, value: selectedErrorToFilter, options: errorArray, isDisabled: errorArray.length === 0, isInputDisabled: errorArray.length === 0, onToggle: onToggle, inputWidth: inputWidth, "data-testid": "ta-filter-by-errors", prefix: prefix }));
+};

package/lib/esm/common/Table/TableActions/FilterByErrors/FilterByErrors.styles.d.ts

@@ -0,0 +1,6 @@
+type StyledAutocompleteProps = {
+    inputWidth: string;
+    isDisabled: boolean;
+};
+export declare const StyledAutocomplete: import("styled-components").StyledComponent<({ label, isDisabled, isInputDisabled, placeholder, value, icon, onChange, placement, options, onToggle, id, labelTooltip, prefix, ...props }: import("../../../../common/inputs/Autocomplete").Props) => JSX.Element, import("styled-components").DefaultTheme, StyledAutocompleteProps, never>;
+export {};

package/lib/esm/common/Table/TableActions/FilterByErrors/FilterByErrors.styles.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from "styled-components";
+import { Autocomplete } from "../../../../common/inputs/Autocomplete";
+import { textStyles } from "../../../../styled/theme/textStyles";
+export var StyledAutocomplete = styled(Autocomplete)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &,\n  * {\n    box-sizing: border-box !important;\n\n    ", "\n  }\n\n  div[data-popper-placement=\"bottom\"] > div {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    outline: 1px solid red;\n    padding: 8px;\n\n    > div div {\n      padding: 6px 12px;\n    }\n\n    ", "\n  }\n\n  input {\n    ", ";\n    background-color: ", ";\n    border: 1px solid transparent;\n    font-family: \"DM Sans\";\n    font-size: 14px;\n    font-weight: 400;\n    height: 32px;\n    padding: 6px 12px;\n    width: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    :focus {\n      border: none;\n      box-shadow: none;\n    }\n  }\n"], ["\n  &,\n  * {\n    box-sizing: border-box !important;\n\n    ", "\n  }\n\n  div[data-popper-placement=\"bottom\"] > div {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    outline: 1px solid red;\n    padding: 8px;\n\n    > div div {\n      padding: 6px 12px;\n    }\n\n    ", "\n  }\n\n  input {\n    ", ";\n    background-color: ", ";\n    border: 1px solid transparent;\n    font-family: \"DM Sans\";\n    font-size: 14px;\n    font-weight: 400;\n    height: 32px;\n    padding: 6px 12px;\n    width: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    :focus {\n      border: none;\n      box-shadow: none;\n    }\n  }\n"])), function (_a) {
+    var isDisabled = _a.isDisabled;
+    return isDisabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        cursor: not-allowed !important;\n      "], ["\n        cursor: not-allowed !important;\n      "])));
+}, function (_a) {
+    var isDisabled = _a.isDisabled;
+    return isDisabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        cursor: not-allowed;\n      "], ["\n        cursor: not-allowed;\n      "])));
+}, textStyles.body3, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.orange50;
+}, function (_a) {
+    var inputWidth = _a.inputWidth;
+    return inputWidth;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.black;
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/common/Table/TableActions/FilterByErrors/functions.d.ts

@@ -0,0 +1,11 @@
+import { Field, BatchValidationErrors } from "../../../../types";
+type UniqueError = {
+    fieldName: string;
+};
+type Error = {
+    value: string;
+    label: string;
+};
+export declare const getUniqueErrors: (fields: Field[], errors: BatchValidationErrors) => UniqueError[];
+export declare const formatErrors: (fields: Field[], uniqueErrors: any) => Error[];
+export {};

package/lib/esm/common/Table/TableActions/FilterByErrors/functions.js

@@ -0,0 +1,35 @@
+export var getUniqueErrors = function (fields, errors) {
+    var fieldKeys = new Set(fields.map(function (field) { return field.name; }));
+    var uniqueErrors = [];
+    for (var _i = 0, _a = Object.entries(errors); _i < _a.length; _i++) {
+        var _b = _a[_i], _1 = _b[0], errorObj = _b[1];
+        for (var _c = 0, _d = Object.entries(errorObj); _c < _d.length; _c++) {
+            var fieldName = _d[_c][0];
+            if (fieldKeys.has(fieldName)) {
+                uniqueErrors.push({ fieldName: fieldName });
+            }
+        }
+    }
+    return uniqueErrors;
+};
+export var formatErrors = function (fields, uniqueErrors) {
+    var errorMap = new Map();
+    var orderedErrorArray = [];
+    fields.forEach(function (field) {
+        errorMap.set(field.name, field);
+    });
+    fields.forEach(function (field) {
+        var name = field.name, label = field.label;
+        if (uniqueErrors.some(function (_a) {
+            var fieldName = _a.fieldName;
+            return fieldName === name;
+        }) &&
+            !orderedErrorArray.some(function (error) { return error.value === name; })) {
+            orderedErrorArray.push({
+                value: name,
+                label: label,
+            });
+        }
+    });
+    return orderedErrorArray;
+};

package/lib/esm/common/Table/TableActions/FilterByErrors/index.d.ts

@@ -0,0 +1 @@
+export * from "./FilterByErrors";

package/lib/esm/common/Table/TableActions/FilterByErrors/index.js

@@ -0,0 +1 @@
+export * from "./FilterByErrors";

package/lib/esm/common/Table/TableActions/SearchRows.js

@@ -22,6 +22,7 @@ import { useRef, useState } from "react";
 import { colors } from "../../../styled/theme/colorPalette";
 import { textStyles } from "../../../styled/theme/textStyles";
 import { TooltipProvider } from "../../../common/TooltipProvider";
+import { useTranslation } from "react-i18next";
 var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  position: relative;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"], ["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  position: relative;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"])), function (_a) {
     var isOpen = _a.isOpen;
     return (isOpen ? colors.orange50 : "none");
@@ -39,6 +40,7 @@ var SearchInput = function (_a) {
     var _b = useDebounce(value, onChange, 300), _value = _b._value, set_Value = _b.set_Value;
     var inputRef = useRef(null);
     var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
+    var t = useTranslation("review").t;
     var handleInputChange = function (_a) {
         var target = _a.target;
         set_Value(target.value);
@@ -57,7 +59,7 @@ var SearchInput = function (_a) {
             }
         }
     };
-    return (_jsx(TooltipProvider, __assign({ tooltip: !isOpen ? "Search something" : "", placement: "right", flip: false, centered: true, "data-testid": testId }, { children: _jsxs(Wrapper, __assign({ isOpen: isOpen, onClick: handleWrapperClick }, { children: [_jsx(IconWrapper, { children: _jsx(SearchIcon, {}) }), _jsx(Input, { isOpen: isOpen, ref: inputRef, value: _value, onChange: handleInputChange, onBlur: handleInputOnBlur, type: "text", placeholder: "Search something..." })] })) })));
+    return (_jsx(TooltipProvider, __assign({ tooltip: !isOpen ? t("table_actions.search_rows.tooltip") : "", placement: "right", flip: false, centered: true, w: "auto", "data-testid": testId }, { children: _jsxs(Wrapper, __assign({ isOpen: isOpen, onClick: handleWrapperClick }, { children: [_jsx(IconWrapper, { children: _jsx(SearchIcon, {}) }), _jsx(Input, { isOpen: isOpen, ref: inputRef, value: _value, onChange: handleInputChange, onBlur: handleInputOnBlur, type: "text", placeholder: t("table_actions.search_rows.placeholder") })] })) })));
 };
 export var SearchRows = function (_a) {
     var _b = _a.testId, testId = _b === void 0 ? "ta-search-rows" : _b;

package/lib/esm/common/Table/TableActions/TableActions.js

@@ -26,7 +26,8 @@ import { DeleteSelectedRows } from "./DeleteSelectedRows";
 import { SearchRows } from "./SearchRows";
 import { ExportData } from "./ExportData";
 import { ButtonActionsContainer, TableActionsContainer, TableActionsContent, } from "./TableActions.styles";
+import { FilterByErrors } from "./FilterByErrors/FilterByErrors";
 export var TableActions = function (_a) {
     var _b = _a.tableActionsHeight, tableActionsHeight = _b === void 0 ? defaultTableActionsHeightPx : _b, props = __rest(_a, ["tableActionsHeight"]);
-    return (_jsx(TableActionsContainer, __assign({ height: tableActionsHeight }, props, { children: _jsxs(TableActionsContent, { children: [_jsx(SearchRows, {}), _jsxs(ButtonActionsContainer, { children: [_jsx(DeleteSelectedRows, {}), _jsx(ExportData, {})] })] }) })));
+    return (_jsx(TableActionsContainer, __assign({ height: tableActionsHeight }, props, { children: _jsxs(TableActionsContent, { children: [_jsx(SearchRows, {}), _jsx(FilterByErrors, {}), _jsxs(ButtonActionsContainer, { children: [_jsx(DeleteSelectedRows, {}), _jsx(ExportData, {})] })] }) })));
 };

package/lib/esm/common/Table/TableActions/TableActions.styles.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled from "styled-components";
 import { Div } from "../../../styled/utils";
-export var TableActionsContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-top: 1px solid ", ";\n  display: flex;\n  overflow: hidden;\n  padding: 8px 32px;\n  width: 100%;\n\n  * {\n    box-sizing: content-box;\n  }\n"], ["\n  align-items: center;\n  background: ", ";\n  border-top: 1px solid ", ";\n  display: flex;\n  overflow: hidden;\n  padding: 8px 32px;\n  width: 100%;\n\n  * {\n    box-sizing: content-box;\n  }\n"])), function (_a) {
+export var TableActionsContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-top: 1px solid ", ";\n  display: flex;\n  padding: 8px 32px;\n  width: 100%;\n\n  * {\n    box-sizing: content-box;\n  }\n"], ["\n  align-items: center;\n  background: ", ";\n  border-top: 1px solid ", ";\n  display: flex;\n  padding: 8px 32px;\n  width: 100%;\n\n  * {\n    box-sizing: content-box;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.white;
 }, function (_a) {

package/lib/esm/common/Table/TableActions/hooks.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { BatchValidationErrors, Field, RecordDataSet } from "../../../types";
+interface UseTableActionsProps {
+    setErrors: React.Dispatch<React.SetStateAction<BatchValidationErrors>>;
+    setWarnings: React.Dispatch<React.SetStateAction<BatchValidationErrors>>;
+}
+export type DeleteRecords = (setDataSet: React.Dispatch<React.SetStateAction<RecordDataSet>>, selectedRecords: string[], errors: BatchValidationErrors, warnings: BatchValidationErrors, isDeletingAllRows: boolean) => void;
+export type FilterRecordsBySearchValue = (obj: RecordDataSet, value: string, fields: Field[]) => RecordDataSet;
+export type FilterRecordsByError = (obj: RecordDataSet, keyToFilter: string, errors: BatchValidationErrors, fields: Field[]) => RecordDataSet;
+interface UseTableActionsProps {
+    setErrors: React.Dispatch<React.SetStateAction<BatchValidationErrors>>;
+    setWarnings: React.Dispatch<React.SetStateAction<BatchValidationErrors>>;
+    fields: Field[];
+}
+export declare const useTableActions: ({ setErrors, setWarnings, fields, }: UseTableActionsProps) => {
+    deleteRecords: DeleteRecords;
+    filterRecordsBySearchValue: (obj: RecordDataSet, value: string) => RecordDataSet;
+    filterRecordsByError: (obj: RecordDataSet, keyToFilter: string, errors: BatchValidationErrors, fields: Field[]) => {};
+};
+export {};

package/lib/esm/common/Table/TableActions/hooks.js

@@ -0,0 +1,96 @@
+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 { useRef } from "react";
+import { addEmptyRows, recordListToDataSet } from "../../../Importer/data";
+var removeErrorsOrWarningsFromObject = function (obj, keysToRemove) {
+    var keysSet = new Set(keysToRemove);
+    var newObj = {};
+    for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key) && !(keysSet === null || keysSet === void 0 ? void 0 : keysSet.has(key))) {
+            newObj[key] = obj[key];
+        }
+    }
+    return newObj;
+};
+var isObject = function (value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+};
+var includesSearchValue = function (value, searchValue) {
+    if (typeof value === "string" || typeof value === "number") {
+        var stringValue = String(value).toLowerCase();
+        var searchValueLower = searchValue.toLowerCase();
+        return stringValue.includes(searchValueLower);
+    }
+    return false;
+};
+export var useTableActions = function (_a) {
+    var setErrors = _a.setErrors, setWarnings = _a.setWarnings, fields = _a.fields;
+    var allRowsDeleted = useRef([]);
+    // Delete records from dataSet and from validations
+    var deleteRecords = function (setDataSet, selectedRecords, errors, warnings, isDeletingAllRows) {
+        var rowsToBeAddedIntoDeletedOnes = Array.from(new Set(__spreadArray(__spreadArray([], selectedRecords, true), allRowsDeleted.current, true)));
+        allRowsDeleted.current = rowsToBeAddedIntoDeletedOnes;
+        var newErrors = removeErrorsOrWarningsFromObject(errors, rowsToBeAddedIntoDeletedOnes);
+        var newWarnings = removeErrorsOrWarningsFromObject(warnings, rowsToBeAddedIntoDeletedOnes);
+        setDataSet(function (oldValues) {
+            if (!rowsToBeAddedIntoDeletedOnes)
+                return oldValues;
+            if (isDeletingAllRows) {
+                allRowsDeleted.current = [];
+                return recordListToDataSet(addEmptyRows([], fields), fields);
+            }
+            var dataSetWithoutDeletedRecords = {};
+            for (var objKey in oldValues) {
+                if (!selectedRecords.includes(objKey)) {
+                    dataSetWithoutDeletedRecords[objKey] = oldValues[objKey];
+                }
+            }
+            return dataSetWithoutDeletedRecords;
+        });
+        setErrors(newErrors);
+        setWarnings(newWarnings);
+    };
+    // Filter records by search value
+    var filterRecordsBySearchValue = function (obj, value) {
+        var filteredObj = {};
+        for (var _i = 0, _a = Object.entries(obj); _i < _a.length; _i++) {
+            var _b = _a[_i], key = _b[0], currentObj = _b[1];
+            if (!isObject(currentObj)) {
+                continue;
+            }
+            var matches = Object.values(currentObj).some(function (propertyValue) {
+                return includesSearchValue(propertyValue, value);
+            });
+            if (matches) {
+                filteredObj[key] = currentObj;
+            }
+        }
+        // To ensure that rows are always displayed, even when the search query is empty,
+        // we return an empty record list when the search yields no results.
+        if (Object.keys(filteredObj).length === 0) {
+            return recordListToDataSet(addEmptyRows([], fields), fields);
+        }
+        return filteredObj;
+    };
+    // Filter records by selected column error
+    var filterRecordsByError = function (obj, keyToFilter, errors, fields) {
+        var filteredObj = {};
+        var filteredKeys = Object.keys(errors).filter(function (key) { var _a, _b; return ((_b = (_a = obj[key]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.isInvalid) && errors[key][keyToFilter]; });
+        for (var i = 0; i < filteredKeys.length; i++) {
+            filteredObj[filteredKeys[i]] = obj[filteredKeys[i]];
+        }
+        return filteredObj;
+    };
+    return {
+        deleteRecords: deleteRecords,
+        filterRecordsBySearchValue: filterRecordsBySearchValue,
+        filterRecordsByError: filterRecordsByError,
+    };
+};

package/lib/esm/common/Table/TableView/TableHeaders.d.ts

@@ -1,25 +1,23 @@
 import React from "react";
-import { TableViewProps } from ".";
 import { DivCSSProps } from "../../../styled/utils";
 import { SortDirection } from "../TableDataProvider";
+import { TableViewProps } from "./types";
 type TableViewHeaderProps = {
     isLast: boolean;
-    shouldHaveCustomScrollbar?: boolean;
 };
-export declare const TableViewHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & {
-    shouldHaveCustomScrollbar?: boolean;
-} & TableViewHeaderProps, never>;
+export declare const TableViewHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableViewHeaderProps, never>;
 type SortIndicatorProps = {
     direction: SortDirection;
 };
 export declare const SortIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & SortIndicatorProps, never>;
 export declare const TableHeadersContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
 export declare const TableHeadersContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
-type TableHeadersProps = Pick<TableViewProps, "columns" | "sortBy" | "setSortBy" | "rowHeight" | "rowWidth"> & {
+type TableHeadersProps = Pick<TableViewProps, "columns" | "sortBy" | "setSortBy" | "rowHeight" | "rowWidthScalingFactor"> & {
     scrollLeft: number;
     height: number;
     containerRef: React.MutableRefObject<HTMLDivElement>;
-    shouldHaveCustomScrollbar?: boolean;
+    containerWidth: number;
+    rowWidth: number;
 } & DivCSSProps;
-export declare const TableHeaders: ({ scrollLeft, columns, sortBy, rowHeight, containerRef, setSortBy, rowWidth, height, shouldHaveCustomScrollbar, ...props }: TableHeadersProps) => JSX.Element;
+export declare const TableHeaders: ({ scrollLeft, columns, sortBy, rowHeight, containerRef, setSortBy, height, containerWidth, rowWidth, ...props }: TableHeadersProps) => JSX.Element;
 export {};