fuse-importer 0.0.8-testing → 0.0.9-testing

package/lib/esm/common/Modal.js

@@ -0,0 +1,31 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from "styled-components";
+import { Div } from "../styled/utils";
+import { closeIcon } from "./icons";
+export var ModalContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  position: fixed;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 10000000000;\n  width: 100vw;\n  height: 100vh;\n  pointer-events: none;\n  div {\n    pointer-events: auto;\n  }\n"], ["\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  position: fixed;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 10000000000;\n  width: 100vw;\n  height: 100vh;\n  pointer-events: none;\n  div {\n    pointer-events: auto;\n  }\n"])));
+export var ModalBackdrop = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  width: 100vw;\n  height: 100vh;\n  z-index: 99999999;\n  background: black;\n  opacity: 0.38;\n"], ["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  width: 100vw;\n  height: 100vh;\n  z-index: 99999999;\n  background: black;\n  opacity: 0.38;\n"])));
+export var ModalWrapper = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n  padding: 32px 36px;\n  border-radius: 8px;\n  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.32);\n"], ["\n  background: ", ";\n  padding: 32px 36px;\n  border-radius: 8px;\n  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.32);\n"])), function (props) { return props.theme.colors.white; });
+export var ModalCloseIcon = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 0;\n  display: flex;\n  flex-direction: row-reverse;\n  z-index: 10;\n"], ["\n  height: 0;\n  display: flex;\n  flex-direction: row-reverse;\n  z-index: 10;\n"])));
+export var Modal = function (_a) {
+    var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? null : _c, children = _a.children, _d = _a.withCloseIcon, withCloseIcon = _d === void 0 ? true : _d, _e = _a.withBackdropClose, withBackdropClose = _e === void 0 ? true : _e, _f = _a.className, className = _f === void 0 ? "" : _f, testId = _a.testId;
+    function renderModal() {
+        return (_jsxs(Div, __assign({ className: className, "data-testid": testId }, { children: [_jsx(ModalBackdrop, { onClick: withBackdropClose ? onClose : null }), _jsx(ModalContainer, { children: _jsxs(ModalWrapper, { children: [withCloseIcon && (_jsx(ModalCloseIcon, { children: _jsx(Div, __assign({ clickable: true, mt: -5, mr: -5, w: "25px", h: "25px", onClick: onClose }, { children: closeIcon })) })), children] }) })] })));
+    }
+    return _jsx(_Fragment, { children: isOpen && renderModal() });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/esm/common/Spinner.js

@@ -0,0 +1,41 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { theme } from "../styled/theme";
+import { Div } from "../styled/utils";
+var Wrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n"])));
+var Bounce = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 12px;\n  height: 12px;\n  margin: 0 5px 0 5px;\n  background: ", ";\n  @-webkit-keyframes sk-bouncedelay {\n    0%,\n    80%,\n    100% {\n      -webkit-transform: scale(0);\n    }\n    40% {\n      -webkit-transform: scale(1);\n    }\n  }\n  @keyframes sk-bouncedelay {\n    0%,\n    80%,\n    100% {\n      -webkit-transform: scale(0);\n      transform: scale(0);\n    }\n    40% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n    }\n  }\n  border-radius: 100%;\n  display: inline-block;\n  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;\n  animation: sk-bouncedelay 1.4s infinite ease-in-out both;\n"], ["\n  width: 12px;\n  height: 12px;\n  margin: 0 5px 0 5px;\n  background: ", ";\n  @-webkit-keyframes sk-bouncedelay {\n    0%,\n    80%,\n    100% {\n      -webkit-transform: scale(0);\n    }\n    40% {\n      -webkit-transform: scale(1);\n    }\n  }\n  @keyframes sk-bouncedelay {\n    0%,\n    80%,\n    100% {\n      -webkit-transform: scale(0);\n      transform: scale(0);\n    }\n    40% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n    }\n  }\n  border-radius: 100%;\n  display: inline-block;\n  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;\n  animation: sk-bouncedelay 1.4s infinite ease-in-out both;\n"])), function (props) { return props.color; });
+var Bounce1 = styled(Bounce)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  -webkit-animation-delay: -0.32s;\n  animation-delay: -0.32s;\n"], ["\n  -webkit-animation-delay: -0.32s;\n  animation-delay: -0.32s;\n"])));
+var Bounce2 = styled(Bounce)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  -webkit-animation-delay: -0.16s;\n  animation-delay: -0.16s;\n"], ["\n  -webkit-animation-delay: -0.16s;\n  animation-delay: -0.16s;\n"])));
+var SpinnerContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 70px;\n  text-align: center;\n"], ["\n  width: 70px;\n  text-align: center;\n"])));
+var Spinner = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? theme.colors.gray300 : _b, props = __rest(_a, ["color"]);
+    return (_jsx(Wrapper, __assign({}, props, { children: _jsxs(SpinnerContainer, { children: [_jsx(Bounce1, { color: color }), _jsx(Bounce2, { color: color }), _jsx(Bounce, { color: color })] }) })));
+};
+export { Spinner };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/esm/common/Table/Pagination/icons.js

@@ -0,0 +1,42 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { Div } from "../../../styled/utils";
+var IconContainer = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  border-radius: 4px;\n  height: 24px;\n  width: 24px;\n  ", "\n"], ["\n  ", ";\n  color: ", ";\n  border-radius: 4px;\n  height: 24px;\n  width: 24px;\n  ", "\n"])), function (p) { return p.theme.css.centered; }, function (p) { return p.theme.colors.gray900; }, function (p) {
+    return p.isDisabled
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), function (p) { return p.theme.colors.disabled3; }) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          :hover {\n            cursor: pointer;\n\n            background-color: ", ";\n          }\n        "], ["\n          :hover {\n            cursor: pointer;\n\n            background-color: ", ";\n          }\n        "])), function (p) { return p.theme.colors.gray100; });
+});
+export var PaginationIcon = function (_a) {
+    var _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, children = _a.children, props = __rest(_a, ["isDisabled", "children"]);
+    return (_jsx(IconContainer, __assign({ ml: 10, isDisabled: isDisabled }, props, { children: children })));
+};
+export var previousPage = (_jsx("svg", __assign({ width: "8", height: "13", viewBox: "0 0 8 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M7.00623 0.90802L1.26688 6.3505L7.00623 11.793", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })));
+export var nextPage = (_jsx("svg", __assign({ width: "8", height: "13", viewBox: "0 0 8 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M1.24243 0.90802L6.98177 6.3505L1.24243 11.793", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })));
+export var jumpToFirst = (_jsxs("svg", __assign({ width: "24", height: "19", viewBox: "0 0 24 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M16.4547 3.90802L10.7154 9.3505L16.4547 14.793", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.59399 14.069L6.59399 4.68966", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })] })));
+export var jumpToLast = (_jsxs("svg", __assign({ width: "25", height: "19", viewBox: "0 0 25 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M8.23022 14.8506L13.9696 9.40811L8.23023 3.96563", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M18.0909 4.68964L18.0909 14.0689", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })] })));
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/common/Table/Pagination/index.js

@@ -0,0 +1,32 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTableContext } from "../TableDataProvider";
+import { jumpToFirst, jumpToLast, nextPage, PaginationIcon, previousPage, } from "./icons";
+import styled from "styled-components";
+import { colors } from "../../../styled/theme/colorPalette";
+import { Div } from "../../../styled/utils";
+var Container = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: solid 1px ", ";\n  border-top: none;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n"], ["\n  border: solid 1px ", ";\n  border-top: none;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n"])), function (p) { return p.theme.colors.gray300; });
+var Pagination = function () {
+    var _a = useTableContext(), totalPages = _a.totalPages, totalCount = _a.totalCount, pageSize = _a.pageSize, currentPage = _a.currentPage, setCurrentPage = _a.setCurrentPage;
+    var isFirstPage = currentPage === 1;
+    var isLastPage = currentPage === totalPages;
+    var cursor = (currentPage - 1) * pageSize;
+    var buttonsUI = (_jsxs(Div, __assign({ mr: 25, dflex: true }, { children: [_jsx(PaginationIcon, __assign({ isDisabled: isFirstPage, onClick: function () { return setCurrentPage(1); } }, { children: jumpToFirst })), _jsx(PaginationIcon, __assign({ isDisabled: isFirstPage, onClick: function () { return setCurrentPage(Math.max(currentPage - 1, 1)); } }, { children: previousPage })), _jsxs(Div, __assign({ centered: true, ml: 10 }, { children: [cursor + 1, "-", Math.min(cursor + pageSize, totalCount), " of ", totalCount] })), _jsx(PaginationIcon, __assign({ isDisabled: isLastPage, onClick: function () { return setCurrentPage(Math.min(currentPage + 1, totalPages)); } }, { children: nextPage })), _jsx(PaginationIcon, __assign({ isDisabled: isLastPage, onClick: function () { return setCurrentPage(totalPages); } }, { children: jumpToLast }))] })));
+    return (_jsx(Container, __assign({ w100: true }, { children: _jsx(Div, __assign({ h: 38, bg: colors.tableHeader, justifyEnd: true }, { children: _jsx(Div, __assign({ dflex: true, alignCenter: true, body2: true, c: colors.text }, { children: buttonsUI })) })) })));
+};
+export { Pagination };
+var templateObject_1;

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

@@ -0,0 +1,50 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import styled from "styled-components";
+import { TooltipProvider } from "../../../common/TooltipProvider";
+import { ConfirmationModal } from "../../../common/ConfirmationModal";
+import { useSpreadsheetContext } from "../../../Importer";
+import { DeleteIcon, ConfirmationDeleteIcon } from "./icons";
+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"])));
+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(), 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; });
+    };
+    var handleDeleteRecord = function () {
+        setSelectedRows([]);
+        toggleModalVisibility();
+        setFilteredInputValue("");
+        deleteRecords(selectedRows);
+    };
+    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
+                    ? 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

@@ -0,0 +1,23 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+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;
+    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: function () { return onExport("csv"); } }, { children: _jsx(DownloadIcon, {}) })) })));
+};

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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";
+import { useState } from "react";
+export var FilterByErrors = function () {
+    var _a, _b;
+    var _c = useSpreadsheetContext(), errors = _c.errors, fields = _c.fields, spreadsheetFilter = _c.spreadsheetFilter, resetSpreadsheetFilter = _c.resetSpreadsheetFilter, filterRecordsByFieldErrors = _c.filterRecordsByFieldErrors;
+    var t = useTranslation("review").t;
+    var _d = useState(false), isMenuOpened = _d[0], setIsMenuOpened = _d[1];
+    var prefix = t("table_actions.filter_by_errors.filter_by_errors");
+    var search_or_select = t("table_actions.filter_by_errors.search_or_select");
+    var selectedErrorToFilter = ((_a = spreadsheetFilter === null || spreadsheetFilter === void 0 ? void 0 : spreadsheetFilter.byColumn) === null || _a === void 0 ? void 0 : _a.field) || null;
+    var getSelectedErrorLabel = function (selectedFieldName) {
+        var _a;
+        var selectedField = fields.filter(function (field) { return (field === null || field === void 0 ? void 0 : field.name) === selectedFieldName; });
+        var label = ((_a = selectedField === null || selectedField === void 0 ? void 0 : selectedField[0]) === null || _a === void 0 ? void 0 : _a.label) || selectedFieldName;
+        return label;
+    };
+    var onChange = function (selected) {
+        if (selected) {
+            var label = getSelectedErrorLabel(selected);
+            filterRecordsByFieldErrors(selected);
+            addToast("Showing only the rows with error on the ".concat(label, " column"), "success");
+        }
+        else {
+            resetSpreadsheetFilter();
+        }
+    };
+    var uniqueErrors = getUniqueErrors(fields, errors);
+    var errorArray = formatErrors(fields, uniqueErrors);
+    // the average size of each character in the input (in px)
+    var widthPerCharacter = 5.8;
+    var amountOfCharacters = prefix.length + ((_b = getSelectedErrorLabel(selectedErrorToFilter)) === null || _b === void 0 ? void 0 : _b.length);
+    // 24 -> padding + 64px of the X icon area
+    var totalWidth = widthPerCharacter * amountOfCharacters + 24 + 64;
+    var inputWidth = selectedErrorToFilter ? "".concat(totalWidth, "px") : "fit-content";
+    var inputText = selectedErrorToFilter
+        ? "".concat(prefix, ": ")
+        : isMenuOpened
+            ? search_or_select
+            : prefix;
+    var isDisabled = errorArray.length === 0;
+    return (_jsx(S.StyledAutocomplete, { placement: "bottom", placeholder: inputText, onToggle: function (v) { return !isDisabled && setIsMenuOpened(v); }, onChange: onChange, value: selectedErrorToFilter, options: errorArray, isDisabled: isDisabled, isInputDisabled: isDisabled, inputWidth: inputWidth, "data-testid": "ta-filter-by-errors", prefix: inputText }));
+};

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.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.js

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

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

@@ -0,0 +1,42 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { useSpreadsheetContext } from "../../../Importer";
+import { Div } from "../../../styled";
+import { useTranslation } from "react-i18next";
+var FilterContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 6px 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", ";\n  ", "\n"], ["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 6px 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", ";\n  ", "\n"])), function (p) { return p.theme.css.body3; }, function (p) {
+    return p.isSelected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n      border-radius: 4px;\n    "], ["\n      background: ", ";\n      color: ", ";\n      border-radius: 4px;\n    "])), function (p) { return p.theme.colors.black; }, function (p) { return p.theme.colors.white; });
+});
+var Container = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  border-radius: 4px;\n  background-color: ", ";\n"], ["\n  display: flex;\n  border-radius: 4px;\n  background-color: ", ";\n"])), function (p) { return p.theme.colors.backgroundInterface; });
+var FilteredDataCount = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 8px;\n  margin-left: -3px;\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n"], ["\n  background: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 8px;\n  margin-left: -3px;\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n"])), function (p) { return p.theme.colors.highlight01; }, function (p) { return p.theme.colors.black; });
+var Filter = function (_a) {
+    var label = _a.label, count = _a.count, isSelected = _a.isSelected, onClick = _a.onClick;
+    var _b = useSpreadsheetContext(), filteredInputValue = _b.filteredInputValue, filteredDataCount = _b.filteredDataCount;
+    var labelToId = function (label) {
+        return label.toLowerCase().replace(/\s/g, "_") + "_filter";
+    };
+    return (_jsxs(Div, __assign({ dflex: true, clickable: true, onClick: onClick, "data-test-id": labelToId(label) }, { children: [_jsxs(FilterContainer, __assign({ isSelected: isSelected }, { children: [label, count >= 0 && _jsxs(_Fragment, { children: ["\u00A0(", count, ")"] })] })), isSelected && filteredInputValue !== "" && (_jsx(FilteredDataCount, { children: _jsx(Div, __assign({ minw: 14, centered: true }, { children: filteredDataCount })) }))] })));
+};
+export var RowFilters = function () {
+    var _a = useSpreadsheetContext(), spreadsheetFilter = _a.spreadsheetFilter, errors = _a.errors, filterRecordsByRowType = _a.filterRecordsByRowType, recordsWithValuesCount = _a.recordsWithValuesCount;
+    var t = useTranslation("review").t;
+    var all_rows = t("table_actions.filters_by_rows.all_rows");
+    var valid_rows = t("table_actions.filters_by_rows.valid_rows");
+    var invalid_rows = t("table_actions.filters_by_rows.invalid_rows");
+    return (_jsxs(Container, { children: [_jsx(Filter, { isSelected: spreadsheetFilter.byRow === "all", label: all_rows, count: recordsWithValuesCount, onClick: function () { return filterRecordsByRowType("all"); } }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "valid", label: valid_rows, onClick: function () { return filterRecordsByRowType("valid"); } }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "invalid", label: invalid_rows, count: Object.values(errors).length, onClick: function () { return filterRecordsByRowType("invalid"); } })] }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,72 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { useSpreadsheetContext } from "../../../Importer";
+import { SearchIcon } from "./icons";
+import { useDebounce } from "../../../hooks";
+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");
+}, function (_a) {
+    var isOpen = _a.isOpen;
+    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  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    "])));
+});
+var SearchInput = function (_a) {
+    var testId = _a.testId, value = _a.value, onChange = _a.onChange;
+    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);
+    };
+    var handleInputOnBlur = function () {
+        if (!_value) {
+            setIsOpen(false);
+        }
+    };
+    var handleWrapperClick = function () {
+        var _a;
+        if (!isOpen) {
+            setIsOpen(true);
+            if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+    };
+    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;
+    var _c = useSpreadsheetContext(), filteredInputValue = _c.filteredInputValue, setFilteredInputValue = _c.setFilteredInputValue;
+    var handleChangeInputValue = function (value) {
+        setFilteredInputValue(value);
+    };
+    return (_jsx(SearchInput, { testId: testId, value: filteredInputValue, onChange: handleChangeInputValue }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,35 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defaultTableActionsHeightPx } from "./common";
+import { DeleteSelectedRows } from "./DeleteSelectedRows";
+import { SearchRows } from "./SearchRows";
+import { ExportData } from "./ExportData";
+import * as S from "./TableActions.styles";
+import { FilterByErrors } from "./FilterByErrors/FilterByErrors";
+import { RowFilters } from "./RowFilters";
+import { TransformedRecordsCount } from "./TransformedRecordsCount";
+export var TableActions = function (_a) {
+    var _b = _a.tableActionsHeight, tableActionsHeight = _b === void 0 ? defaultTableActionsHeightPx : _b, props = __rest(_a, ["tableActionsHeight"]);
+    return (_jsxs(S.TableActionsContainer, __assign({ height: tableActionsHeight }, props, { children: [_jsxs(S.TableActionsContent, { children: [_jsx(SearchRows, {}), _jsx(RowFilters, {}), _jsx(FilterByErrors, {}), _jsxs(S.ButtonActionsContainer, { children: [_jsx(DeleteSelectedRows, {}), _jsx(ExportData, {})] })] }), _jsx(S.TableActionsInformations, { children: _jsx(TransformedRecordsCount, {}) })] })));
+};

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

@@ -0,0 +1,18 @@
+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 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  justify-content: space-between;\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  justify-content: space-between;\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) {
+    var theme = _a.theme;
+    return theme.colors.gray300;
+});
+export var ButtonActionsContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n"])));
+export var TableActionsContent = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n"])));
+export var TableActionsInformations = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n"])));
+export var ActionButton = styled.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background: transparent;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 36px;\n  justify-content: center;\n  padding: 0px;\n  width: 36px;\n\n  :disabled {\n    opacity: 0.6;\n\n    :hover {\n      background-color: transparent !important;\n      cursor: not-allowed;\n    }\n  }\n"], ["\n  align-items: center;\n  background: transparent;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 36px;\n  justify-content: center;\n  padding: 0px;\n  width: 36px;\n\n  :disabled {\n    opacity: 0.6;\n\n    :hover {\n      background-color: transparent !important;\n      cursor: not-allowed;\n    }\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,71 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { useSpreadsheetContext } from "../../../Importer";
+import { Div, colors } from "../../../styled";
+import { CheckIcon } from "./icons";
+import { Button } from "../../../common/buttons";
+var formatToLocaleString = function (number) {
+    return number.toLocaleString(undefined, {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+    });
+};
+var RecordsCountContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 2;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  position: relative;\n  z-index: 2;\n\n  * {\n    box-sizing: border-box;\n  }\n"])));
+var Counter = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-radius: 35px;\n  display: flex;\n  padding: 0px 18px;\n  user-select: none;\n"], ["\n  align-items: center;\n  background: ", ";\n  border-radius: 35px;\n  display: flex;\n  padding: 0px 18px;\n  user-select: none;\n"])), colors.blue100);
+var TooltipContainer = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 8px;\n  box-shadow: 0px 3.53px 63.58px 0px #b7a6a640;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  padding: 16px 32px 24px 24px;\n  position: absolute;\n  right: 0px;\n  top: 66px;\n  width: clamp(150px, 379px, 379px);\n\n  &::before {\n    border-color: transparent transparent #ffffff transparent;\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 0 14.5px 24px 14.5px;\n    content: \"\";\n    height: 0;\n    position: absolute;\n    right: -4px;\n    top: -6px;\n    transform: rotate(120deg);\n    width: 0;\n  }\n"], ["\n  background: ", ";\n  border-radius: 8px;\n  box-shadow: 0px 3.53px 63.58px 0px #b7a6a640;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  padding: 16px 32px 24px 24px;\n  position: absolute;\n  right: 0px;\n  top: 66px;\n  width: clamp(150px, 379px, 379px);\n\n  &::before {\n    border-color: transparent transparent #ffffff transparent;\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 0 14.5px 24px 14.5px;\n    content: \"\";\n    height: 0;\n    position: absolute;\n    right: -4px;\n    top: -6px;\n    transform: rotate(120deg);\n    width: 0;\n  }\n"])), colors.white);
+var ExampleCode = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  display: flex;\n  justify-content: space-between;\n  padding: 4px;\n"], ["\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  display: flex;\n  justify-content: space-between;\n  padding: 4px;\n"])), colors.blue100);
+var StyledButton = styled(Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-self: flex-end;\n  height: 36px;\n  padding: 0px;\n  width: 61px;\n"], ["\n  align-self: flex-end;\n  height: 36px;\n  padding: 0px;\n  width: 61px;\n"])));
+var Tooltip = function (_a) {
+    var recordsCount = _a.recordsCount, onClose = _a.onClose;
+    var t = useTranslation("review").t;
+    return (_jsxs(TooltipContainer, __assign({ "data-cy": "transformations-tooltip" }, { children: [_jsx(Div, { children: _jsx(CheckIcon, {}) }), _jsx(Div, __assign({ subtitle: true }, { children: t("table_actions.transformed_records.auto_corrections_amount", {
+                    amount: formatToLocaleString(recordsCount),
+                }) })), _jsxs(Div, { children: [_jsx(Div, __assign({ mb: 5, label1: true, style: { color: colors.gray700 } }, { children: t("table_actions.transformed_records.example") })), _jsxs(ExampleCode, { children: [_jsx(Div, __assign({ body1: true }, { children: "$37.00" })), _jsx(Div, __assign({ body1: true, style: { textDecoration: "line-through" } }, { children: "$36.8" }))] })] }), _jsx(StyledButton, __assign({ buttonTextSmall: true, uppercase: true, onClick: onClose }, { children: "OK" }))] })));
+};
+export var TransformedRecordsCount = function () {
+    var _a = useSpreadsheetContext(), data = _a.data, isTransformTooltipOpened = _a.isTransformTooltipOpened, setIsTransformTooltipOpened = _a.setIsTransformTooltipOpened;
+    var t = useTranslation("review").t;
+    var tooltipWasAlreadyOpened = useRef(false);
+    var transformedRecordsCount = useMemo(function () {
+        var _a;
+        var counter = 0;
+        for (var i = 0; i < data.length; i++) {
+            var currentData = data[i];
+            var transformedObj = (_a = currentData === null || currentData === void 0 ? void 0 : currentData._meta) === null || _a === void 0 ? void 0 : _a.transformedRow;
+            if (transformedObj) {
+                counter += Object.keys(transformedObj).length;
+            }
+        }
+        return counter;
+    }, [data]);
+    useEffect(function () {
+        if (tooltipWasAlreadyOpened.current)
+            return;
+        if (transformedRecordsCount > 0 && !isTransformTooltipOpened) {
+            setIsTransformTooltipOpened(true);
+            tooltipWasAlreadyOpened.current = true;
+        }
+    }, [transformedRecordsCount]);
+    var handleCloseTooltip = function () {
+        setIsTransformTooltipOpened(false);
+    };
+    return (_jsx(_Fragment, { children: isTransformTooltipOpened && transformedRecordsCount ? (_jsxs(RecordsCountContainer, { children: [_jsxs(Counter, __assign({ body1: true }, { children: [_jsxs(Div, __assign({ bold: true, mr: 4, "data-cy": "transformations-counter" }, { children: [formatToLocaleString(transformedRecordsCount), " "] })), t("table_actions.transformed_records.auto_corrections_done")] })), isTransformTooltipOpened && (_jsx(Tooltip, { recordsCount: transformedRecordsCount, onClose: handleCloseTooltip }))] })) : null }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1 @@
+export var defaultTableActionsHeightPx = 60;