fuse-importer 0.25.8 → 0.26.0

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.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",
 };
@@ -21,7 +20,6 @@ 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, {}) })));
 };
 export * from "./common/Spreadsheet";

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

@@ -24,6 +24,7 @@ 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) {
@@ -40,6 +41,7 @@ export var DeleteSelectedRows = function (_a) {
     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 t = useTranslation("review").t;
     var toggleModalVisibility = function () {
         setIsConfirmationModalOpen(function (oldValue) { return !oldValue; });
     };
@@ -53,13 +55,17 @@ export var DeleteSelectedRows = function (_a) {
             !filteredInputValue &&
             selectedRows.length === validData.length) {
             setCurrentStepIndex(0);
-            return addToast("You have deleted all the rows. You will be redirect to the upload step.", "success");
+            return addToast(t("table_actions.delete_rows.delete_toast"), "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,35 @@
+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) {
+            addToast("Showing only the rows with error on the ".concat(selected, " 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");
@@ -30,7 +31,7 @@ var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateO
     return (isOpen ? "332px" : "24px");
 });
 var IconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
-var Input = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  width: 100%;\n\n  /* Using this styling to prevent CSS conflict from clients importers */\n  /* TODO: remove !important's when we start rendering importer through iframe */\n  background-color: none !important;\n  background: none !important;\n  border: none !important;\n  box-shadow: none !important;\n  color: ", " !important;\n  height: 20px !important;\n  line-height: 20px !important;\n  outline: none !important;\n  padding: 1px 2px !important;\n\n  ", ";\n"], ["\n  ", ";\n  width: 100%;\n\n  /* Using this styling to prevent CSS conflict from clients importers */\n  /* TODO: remove !important's when we start rendering importer through iframe */\n  background-color: none !important;\n  background: none !important;\n  border: none !important;\n  box-shadow: none !important;\n  color: ", " !important;\n  height: 20px !important;\n  line-height: 20px !important;\n  outline: none !important;\n  padding: 1px 2px !important;\n\n  ", ";\n"])), textStyles.body3, colors.gray700, function (_a) {
+var Input = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  width: 100%;\n\n  background-color: none;\n  background: none;\n  border: none;\n  box-shadow: none;\n  color: ", ";\n  height: 20px;\n  line-height: 20px;\n  outline: none;\n  padding: 1px 2px;\n\n  ", ";\n"], ["\n  ", ";\n  width: 100%;\n\n  background-color: none;\n  background: none;\n  border: none;\n  box-shadow: none;\n  color: ", ";\n  height: 20px;\n  line-height: 20px;\n  outline: none;\n  padding: 1px 2px;\n\n  ", ";\n"])), textStyles.body3, colors.gray700, function (_a) {
     var isOpen = _a.isOpen;
     return !isOpen && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      top: -9999px;\n    "], ["\n      position: absolute;\n      top: -9999px;\n    "])));
 });
@@ -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,21 @@
+/// <reference types="react" />
+import { BatchValidationErrors, Field, RecordDataSet } from "../../../types";
+interface UseTableActionsProps {
+    setDataSet: React.Dispatch<React.SetStateAction<RecordDataSet>>;
+    setErrors: React.Dispatch<React.SetStateAction<BatchValidationErrors>>;
+    setWarnings: React.Dispatch<React.SetStateAction<BatchValidationErrors>>;
+}
+export type DeleteRecords = (dataSet: RecordDataSet, selectedRecords: string[], errors: BatchValidationErrors, warnings: BatchValidationErrors) => 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 {
+    setDataSet: React.Dispatch<React.SetStateAction<RecordDataSet>>;
+    setErrors: React.Dispatch<React.SetStateAction<BatchValidationErrors>>;
+    setWarnings: React.Dispatch<React.SetStateAction<BatchValidationErrors>>;
+}
+export declare const useTableActions: ({ setDataSet, setErrors, setWarnings, }: UseTableActionsProps) => {
+    deleteRecords: (dataSet: RecordDataSet, selectedRecords: string[], errors: BatchValidationErrors, warnings: BatchValidationErrors) => void;
+    filterRecordsBySearchValue: (obj: RecordDataSet, value: string, fields: Field[]) => RecordDataSet;
+    filterRecordsByError: (obj: RecordDataSet, keyToFilter: string, errors: BatchValidationErrors, fields: Field[]) => {};
+};
+export {};

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

@@ -0,0 +1,84 @@
+import { addEmptyRows, recordListToDataSet } from "../../../Importer/data";
+var removeItemsFromObject = function (obj, idsToRemove) {
+    var _a;
+    var idSet = new Set(idsToRemove);
+    var newObj = {};
+    for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            var meta = (_a = obj[key]) === null || _a === void 0 ? void 0 : _a._meta;
+            if (meta && (meta === null || meta === void 0 ? void 0 : meta.id) && !(idSet === null || idSet === void 0 ? void 0 : idSet.has(meta === null || meta === void 0 ? void 0 : meta.id))) {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    return newObj;
+};
+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 setDataSet = _a.setDataSet, setErrors = _a.setErrors, setWarnings = _a.setWarnings;
+    //Delete record from dataSet and from validations
+    var deleteRecords = function (dataSet, selectedRecords, errors, warnings) {
+        var newDataSet = removeItemsFromObject(dataSet, selectedRecords);
+        var newErrors = removeErrorsOrWarningsFromObject(errors, selectedRecords);
+        var newWarnings = removeErrorsOrWarningsFromObject(warnings, selectedRecords);
+        setDataSet(newDataSet);
+        setErrors(newErrors);
+        setWarnings(newWarnings);
+    };
+    //Filter records by search value
+    var filterRecordsBySearchValue = function (obj, value, fields) {
+        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;
-    isSpreadsheetTable?: boolean;
 };
-export declare const TableViewHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & {
-    isSpreadsheetTable?: 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>;
-    isSpreadsheetTable?: boolean;
+    containerWidth: number;
+    rowWidth: number;
 } & DivCSSProps;
-export declare const TableHeaders: ({ scrollLeft, columns, sortBy, rowHeight, containerRef, setSortBy, rowWidth, height, isSpreadsheetTable, ...props }: TableHeadersProps) => JSX.Element;
+export declare const TableHeaders: ({ scrollLeft, columns, sortBy, rowHeight, containerRef, setSortBy, height, containerWidth, rowWidth, ...props }: TableHeadersProps) => JSX.Element;
 export {};

package/lib/esm/common/Table/TableView/TableHeaders.js

@@ -25,27 +25,22 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import { Div } from "../../../styled/utils";
-import { chevronDown as chevronDownIcon } from "../icons";
 import { SortDirection } from "../TableDataProvider";
-import { columnWidthPercentage, defaultTableHeaderHeightPx, TableViewCellContainer, } from "./common";
-import { useTranslation } from "react-i18next";
-export var TableViewHeader = styled(TableViewCellContainer)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\n  ", "\n  ", "\n"], ["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\n  ", "\n  ", "\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.body2; }, function (p) { return p.theme.colors.text; }, function (p) {
-    return p.isLast && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-right: solid 1px transparent !important;\n    "], ["\n      border-right: solid 1px transparent !important;\n    "])));
-}, function (_a) {
-    var isSpreadsheetTable = _a.isSpreadsheetTable;
-    return isSpreadsheetTable && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      min-width: 200px;\n    "], ["\n      min-width: 200px;\n    "])));
-});
-export var SortIndicator = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: 10px;\n  margin-top: -4px;\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"], ["\n  margin-left: 10px;\n  margin-top: -4px;\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (p) {
-    return p.direction === SortDirection.asc && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      margin-top: 3px;\n      transform: rotate(180deg);\n    "], ["\n      margin-top: 3px;\n      transform: rotate(180deg);\n    "])));
+import { chevronDown as chevronDownIcon } from "../icons";
+import { TableViewCellContainer, defaultTableHeaderHeightPx, getColumnWidthsPx, } from "./common";
+export var TableViewHeader = styled(TableViewCellContainer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\n"], ["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.body2; }, function (p) { return p.theme.colors.text; });
+export var SortIndicator = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: 10px;\n  margin-top: -4px;\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"], ["\n  margin-left: 10px;\n  margin-top: -4px;\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (p) {
+    return p.direction === SortDirection.asc && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      margin-top: 3px;\n      transform: rotate(180deg);\n    "], ["\n      margin-top: 3px;\n      transform: rotate(180deg);\n    "])));
 }, function (p) { return p.theme.colors.gray300; });
-export var TableHeadersContainer = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
-export var TableHeadersContent = styled(Div)(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
+export var TableHeadersContainer = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow-x: hidden;\n  background-color: ", ";\n"], ["\n  overflow-x: hidden;\n  background-color: ", ";\n"])), function (p) { return p.theme.colors.tableHeader; });
+export var TableHeadersContent = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  /* We may add some padding-right here \n  since TableHeadersContainer has overflow-x: hidden */\n  /* Table header scrolling is controlled by the table content,\n  we need to add some padding to cover the width of the vertical scrollbars that may \n  be present in the table content. Scrollbars can vary between browsers and OSes,\n  Assuming scrollbars won't be wider than 100px: */\n  box-shadow: inset 0 -1px 0 ", ";\n  padding-right: 100px;\n"], ["\n  /* We may add some padding-right here \n  since TableHeadersContainer has overflow-x: hidden */\n  /* Table header scrolling is controlled by the table content,\n  we need to add some padding to cover the width of the vertical scrollbars that may \n  be present in the table content. Scrollbars can vary between browsers and OSes,\n  Assuming scrollbars won't be wider than 100px: */\n  box-shadow: inset 0 -1px 0 ", ";\n  padding-right: 100px;\n"])), function (p) { return p.theme.colors.gray300; });
 export var TableHeaders = function (_a) {
-    var _b = _a.scrollLeft, scrollLeft = _b === void 0 ? 0 : _b, columns = _a.columns, sortBy = _a.sortBy, rowHeight = _a.rowHeight, containerRef = _a.containerRef, setSortBy = _a.setSortBy, _c = _a.rowWidth, rowWidth = _c === void 0 ? 1 : _c, _d = _a.height, height = _d === void 0 ? defaultTableHeaderHeightPx : _d, isSpreadsheetTable = _a.isSpreadsheetTable, props = __rest(_a, ["scrollLeft", "columns", "sortBy", "rowHeight", "containerRef", "setSortBy", "rowWidth", "height", "isSpreadsheetTable"]);
+    var _b = _a.scrollLeft, scrollLeft = _b === void 0 ? 0 : _b, columns = _a.columns, sortBy = _a.sortBy, rowHeight = _a.rowHeight, containerRef = _a.containerRef, setSortBy = _a.setSortBy, _c = _a.height, height = _c === void 0 ? defaultTableHeaderHeightPx : _c, containerWidth = _a.containerWidth, rowWidth = _a.rowWidth, props = __rest(_a, ["scrollLeft", "columns", "sortBy", "rowHeight", "containerRef", "setSortBy", "height", "containerWidth", "rowWidth"]);
     var t = useTranslation().t;
-    return (_jsx(TableHeadersContainer, __assign({ ref: containerRef }, { children: _jsx(TableHeadersContent, __assign({ dflex: true, w: "".concat(100 * rowWidth, "%") }, { children: columns.map(function (column, index) {
+    return (_jsx(TableHeadersContainer, __assign({ ref: containerRef, w: containerWidth }, { children: _jsx(TableHeadersContent, __assign({ dflex: true, w: rowWidth }, { children: columns.map(function (column, index) {
                 var header = column.header, Header = column.Header;
                 var onHeaderClick = function () {
                     if (!setSortBy || column.disableSort)
@@ -65,7 +60,10 @@ export var TableHeaders = function (_a) {
                         });
                     }
                 };
-                return (_jsxs(TableViewHeader, __assign({ isLast: index === columns.length - 1, w: columnWidthPercentage(column, columns), onClick: onHeaderClick, h: height, isSpreadsheetTable: isSpreadsheetTable }, props, { children: [_jsx(_Fragment, { children: Header ? _jsx(Header, {}) : t(header) }), (sortBy === null || sortBy === void 0 ? void 0 : sortBy.field) === column.dataAccessor && (_jsx(SortIndicator, __assign({ direction: sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction }, { children: chevronDownIcon })))] }), index));
+                var columnWidthPercentages = getColumnWidthsPx(columns, rowWidth);
+                var columnWidthPercentage = columnWidthPercentages[index];
+                var isLast = index === columns.length - 1;
+                return (_jsxs(TableViewHeader, __assign({ isLast: isLast, className: isLast ? "last-column" : "", w: columnWidthPercentage, onClick: onHeaderClick, h: height }, props, { children: [_jsx(_Fragment, { children: Header ? _jsx(Header, {}) : _jsx(Div, __assign({ truncateText: true }, { children: t(header) })) }), (sortBy === null || sortBy === void 0 ? void 0 : sortBy.field) === column.dataAccessor && (_jsx(SortIndicator, __assign({ direction: sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction }, { children: chevronDownIcon })))] }), index));
             }) })) })));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/esm/common/Table/TableView/{TableRow.d.ts → TableRows/TableRow.d.ts}

@@ -1,19 +1,19 @@
 import React from "react";
-import { TableViewProps } from ".";
-import { DivCSSProps } from "../../../styled/utils";
+import { TableViewProps } from "../types";
+import { DivCSSProps } from "../../../../styled/utils";
 export declare const Cell: React.MemoExoticComponent<(props: any) => JSX.Element>;
 type TableViewRowProps = {
     isHighlighted: boolean;
     isLast: boolean;
 };
-export declare const TableViewRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableViewRowProps, never>;
+export declare const TableViewRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../../styled/utils").CSSProps & TableViewRowProps, never>;
 type Props = Pick<TableViewProps, "columns" | "onRowClick" | "highlightFirstRow"> & {
     row: any;
+    rowWidth: number;
     indexI: number;
     isLast?: boolean;
     getItemKey?: (row: any) => string;
     isRowSelected?: boolean;
-    isSpreadsheetTable?: boolean;
 } & DivCSSProps;
-export declare const TableRow: ({ row, indexI, columns, isLast, highlightFirstRow, onRowClick, getItemKey, isRowSelected, isSpreadsheetTable, ...props }: Props) => JSX.Element;
+export declare const TableRow: ({ row, indexI, columns, isLast, highlightFirstRow, onRowClick, getItemKey, rowWidth, isRowSelected, ...props }: Props) => JSX.Element;
 export {};

package/lib/esm/common/Table/TableView/{TableRow.js → TableRows/TableRow.js}

@@ -28,11 +28,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { areEqual } from "react-window";
 import styled, { css } from "styled-components";
-import { Div } from "../../../styled/utils";
-import { columnWidthPercentage, TableViewCellContainer } from "./common";
+import { Div } from "../../../../styled/utils";
+import { getColumnWidthsPx, TableViewCellContainer } from "../common";
 export var Cell = React.memo(function (props) {
-    var children = props.children, isSpreadsheetTable = props.isSpreadsheetTable, cellProps = __rest(props, ["children", "isSpreadsheetTable"]);
-    return (_jsx(TableViewCellContainer, __assign({ isSpreadsheetTable: isSpreadsheetTable }, cellProps, { children: children })));
+    var children = props.children, cellProps = __rest(props, ["children"]);
+    return (_jsx(TableViewCellContainer, __assign({}, cellProps, { children: children })));
 }, areEqual);
 export var TableViewRow = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: white;\n  ", "\n  ", "\n"], ["\n  background-color: white;\n  ", "\n  ", "\n"])), function (p) {
     return !p.isLast && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-shadow: inset 0 -1px 0 ", ";\n    "], ["\n      box-shadow: inset 0 -1px 0 ", ";\n    "])), function (p) { return p.theme.colors.gray300; });
@@ -40,15 +40,18 @@ export var TableViewRow = styled(Div)(templateObject_3 || (templateObject_3 = __
     return p.isHighlighted && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n      box-shadow: inset 0 0 0 3px ", ";\n\n      .input-content {\n        background: transparent;\n        border: none;\n        box-shadow: none;\n\n        &,\n        input {\n          color: ", ";\n        }\n      }\n    "], ["\n      background: ", ";\n      box-shadow: inset 0 0 0 3px ", ";\n\n      .input-content {\n        background: transparent;\n        border: none;\n        box-shadow: none;\n\n        &,\n        input {\n          color: ", ";\n        }\n      }\n    "])), p.theme.colors.blue100, p.theme.colors.blue500, p.theme.colors.gray1000);
 });
 export var TableRow = function (_a) {
-    var row = _a.row, indexI = _a.indexI, columns = _a.columns, isLast = _a.isLast, highlightFirstRow = _a.highlightFirstRow, onRowClick = _a.onRowClick, getItemKey = _a.getItemKey, _b = _a.isRowSelected, isRowSelected = _b === void 0 ? false : _b, isSpreadsheetTable = _a.isSpreadsheetTable, props = __rest(_a, ["row", "indexI", "columns", "isLast", "highlightFirstRow", "onRowClick", "getItemKey", "isRowSelected", "isSpreadsheetTable"]);
+    var row = _a.row, indexI = _a.indexI, columns = _a.columns, isLast = _a.isLast, highlightFirstRow = _a.highlightFirstRow, onRowClick = _a.onRowClick, getItemKey = _a.getItemKey, rowWidth = _a.rowWidth, _b = _a.isRowSelected, isRowSelected = _b === void 0 ? false : _b, props = __rest(_a, ["row", "indexI", "columns", "isLast", "highlightFirstRow", "onRowClick", "getItemKey", "rowWidth", "isRowSelected"]);
     var isHighlighted = (indexI === 0 && highlightFirstRow) || isRowSelected;
     return (_jsx(TableViewRow, __assign({ "data-test-id": "row-".concat(indexI), dflex: true }, { isHighlighted: isHighlighted, isLast: isLast }, props, { children: columns.map(function (column, indexJ) {
             var Content = column.Content;
             var key = getItemKey ? getItemKey(row) : "".concat(indexI);
             var resolvedKey = "column-".concat(indexJ, "-row-").concat(key);
+            var columnWidthPercentages = getColumnWidthsPx(columns, rowWidth);
+            var columnWidthPercentage = columnWidthPercentages[indexJ];
+            var isLastColumn = indexJ === columns.length - 1;
             return (_jsx(Cell, __assign({ row: row, onClick: onRowClick && !column.preventRowClick
                     ? function () { return onRowClick(row); }
-                    : null, isSpreadsheetTable: isSpreadsheetTable, w: columnWidthPercentage(column, columns) }, { children: Content ? (_jsx(Content, __assign({}, row, { rowIndex: indexI }))) : (_jsx(Div, __assign({ truncateText: true }, { children: row[column.dataAccessor] || "-" }))) }), resolvedKey));
+                    : null, isLast: isLastColumn, className: isLastColumn ? "last-column" : "", w: columnWidthPercentage }, { children: Content ? (_jsx(Content, __assign({}, row, { rowIndex: indexI }))) : (_jsx(Div, __assign({ truncateText: true }, { children: row[column.dataAccessor] || "-" }))) }), resolvedKey));
         }) })));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/common/Table/TableView/TableRows/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const Row: React.MemoExoticComponent<any>;
+declare const DraggableRow: React.MemoExoticComponent<any>;
+export { Row, DraggableRow };