fuse-importer 0.1.1-testing → 0.1.2-testing

package/lib/esm/Importer/ImporterWithContext.js

@@ -42,7 +42,7 @@ var Content = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplate
     return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    flex: ", ";\n  "], ["\n    background-color: ", ";\n    flex: ", ";\n  "])), colors.backgroundInterface, inTrialMode ? "none" : 1);
 });
 export var ImporterWithContext = function () {
-    var _a = useImporterContext(), inTrialMode = _a.inTrialMode, currentStepIndex = _a.currentStepIndex, matcherSubstep = _a.matcherSubstep, templateHeaders = _a.templateHeaders, theme = _a.theme, logoURL = _a.logoURL, previewFirstTime = _a.previewFirstTime, headerRowIndex = _a.headerRowIndex, initialRecords = _a.initialRecords, _b = _a.importerOptions, zIndex = _b.zIndex, previewMode = _b.previewMode;
+    var _a = useImporterContext(), inTrialMode = _a.inTrialMode, currentStepIndex = _a.currentStepIndex, matcherSubstep = _a.matcherSubstep, templateHeaders = _a.templateHeaders, theme = _a.theme, logoURL = _a.logoURL, previewFirstTime = _a.previewFirstTime, initialRecords = _a.initialRecords, _b = _a.importerOptions, zIndex = _b.zIndex, previewMode = _b.previewMode;
     var layoutRef = useRef(null);
     var t = useTranslation().t;
     useEffect(function () {

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

@@ -63,7 +63,7 @@ var rowIsEmpty = function (row) {
 };
 export var SpreadsheetRowCheckboxes = function (_a) {
     var height = _a.height, gridRef = _a.gridRef, isLoadingData = _a.isLoadingData, props = __rest(_a, ["height", "gridRef", "isLoadingData"]);
-    var _b = useSpreadsheetContext(), data = _b.data, selectedRows = _b.selectedRows, options = _b.options, lastClickedIndexRef = _b.lastClickedIndexRef, setSelectedRows = _b.setSelectedRows, checkboxColumnWidth = _b.checkboxColumnWidth;
+    var _b = useSpreadsheetContext(), data = _b.data, selectedRows = _b.selectedRows, options = _b.options, lastClickedIndexRef = _b.lastClickedIndexRef, setSelectedRows = _b.setSelectedRows, checkboxColumnWidth = _b.checkboxColumnWidth, isTransformTooltipOpened = _b.isTransformTooltipOpened;
     var currentStepIndex = useImporterContext().currentStepIndex;
     var nonEmptyRows = useMemo(function () { return data.filter(function (row) { return !rowIsEmpty(row); }); }, [
         data,
@@ -71,6 +71,8 @@ export var SpreadsheetRowCheckboxes = function (_a) {
     var isIndeterminate = selectedRows.length > 0 && selectedRows.length < nonEmptyRows.length;
     var handleRowSelect = function (checked, rowIndex, rowMetaId) {
         var _a, _b;
+        if (isTransformTooltipOpened)
+            return;
         var lastRowMetaId = data[data.length - 1]._meta.id;
         var isLastRow = rowMetaId === lastRowMetaId;
         var isLastRowAndEmpty = isLastRow && rowIsEmpty(data[rowIndex]);
@@ -93,6 +95,8 @@ export var SpreadsheetRowCheckboxes = function (_a) {
     };
     var handleSelectMultipleRows = function (rowIndex) {
         var _a, _b;
+        if (isTransformTooltipOpened)
+            return;
         var clickedRowId = (_b = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id;
         if (selectedRows.includes(clickedRowId)) {
             // The clicked row is already selected, so we have to remove it
@@ -129,6 +133,8 @@ export var SpreadsheetRowCheckboxes = function (_a) {
         }
     };
     var handleSelectAllRows = function (checked) {
+        if (isTransformTooltipOpened)
+            return;
         if (checked) {
             var allRows = data
                 .filter(function (row) {

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

@@ -51,7 +51,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { debounce, get } from "lodash";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import styled, { css } from "styled-components";
 import { TooltipProvider } from "../../../../../common/TooltipProvider";
 import { Div } from "../../../../../styled/utils";
@@ -62,6 +62,11 @@ export var useSpreadsheetField = function (name, record, fieldType) {
     var _b = useState(record[name]), value = _b[0], setValue = _b[1];
     var validationError = get(errors, "".concat(record._meta.id, ".").concat(name), null);
     var validationWarning = get(warnings, "".concat(record._meta.id, ".").concat(name), null);
+    useEffect(function () {
+        if (record[name] !== value) {
+            setValue(record[name]);
+        }
+    }, [record[name]]);
     var updateData = useCallback(debounce(function (value) { return __awaiter(void 0, void 0, void 0, function () {
         var newRecord;
         var _a;

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

@@ -68,14 +68,22 @@ export var useValidationState = function (_a) {
         setWarnings: setWarnings,
     }).deleteRecords;
     // Validate record and update dataSet
-    var updateRecordAndRevalidate = useCallback(function (record) { return __awaiter(void 0, void 0, void 0, function () {
-        var recordId, newDataSet, data, _a, recordErrors, recordWarnings, hasError, hasWarning;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+    var updateRecordAndRevalidate = useCallback(function (records) { return __awaiter(void 0, void 0, void 0, function () {
+        var recordsArray, newDataSet, errorUpdates, warningUpdates, i, record, recordId, data, _a, recordErrors, recordWarnings, hasError, hasWarning;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
+                    recordsArray = Array.isArray(records) ? records : [records];
+                    newDataSet = __assign({}, dataSet);
+                    errorUpdates = {};
+                    warningUpdates = {};
+                    i = 0;
+                    _b.label = 1;
+                case 1:
+                    if (!(i < recordsArray.length)) return [3 /*break*/, 4];
+                    record = recordsArray[i];
                     recordId = record._meta.id;
-                    newDataSet = __assign(__assign({}, dataSet), (_b = {}, _b[recordId] = __assign({}, record), _b));
+                    newDataSet[recordId] = __assign({}, record);
                     // 'touched' should be set before validation
                     newDataSet[recordId]._meta.touched = true;
                     data = Object.values(newDataSet);
@@ -86,25 +94,46 @@ export var useValidationState = function (_a) {
                             fields: fields,
                             record: record,
                         })];
-                case 1:
-                    _a = _c.sent(), recordErrors = _a.errors, recordWarnings = _a.warnings;
+                case 2:
+                    _a = _b.sent(), recordErrors = _a.errors, recordWarnings = _a.warnings;
                     hasError = checkIfHasErrors(recordErrors);
                     hasWarning = checkIfHasErrors(recordWarnings);
                     newDataSet[recordId]._meta.isInvalid = hasError;
                     newDataSet[recordId]._meta.hasWarning = hasWarning;
+                    errorUpdates = hasError
+                        ? set(errorUpdates, recordId, recordErrors)
+                        : omit(errorUpdates, recordId);
+                    warningUpdates = hasWarning
+                        ? set(warningUpdates, recordId, recordWarnings)
+                        : omit(warningUpdates, recordId);
+                    _b.label = 3;
+                case 3:
+                    i++;
+                    return [3 /*break*/, 1];
+                case 4:
                     setErrors(function (errors) {
-                        var newErrors = __assign({}, errors);
-                        var newState = hasError
-                            ? set(newErrors, recordId, recordErrors)
-                            : omit(newErrors, recordId);
-                        return newState;
+                        var currentErrors = __assign({}, errors);
+                        var newErrors = {};
+                        for (var errorId in errorUpdates) {
+                            var updatedError = errorUpdates[errorId];
+                            var hasUpdatedError = updatedError && Object.keys(updatedError).length > 0;
+                            newErrors = hasUpdatedError
+                                ? set(currentErrors, errorId, updatedError)
+                                : omit(currentErrors, errorId);
+                        }
+                        return newErrors;
                     });
                     setWarnings(function (warnings) {
-                        var newWarnings = __assign({}, warnings);
-                        var newState = hasWarning
-                            ? set(newWarnings, recordId, recordWarnings)
-                            : omit(newWarnings, recordId);
-                        return newState;
+                        var currentWarnings = __assign({}, warnings);
+                        var newWarnings = {};
+                        for (var warningId in warningUpdates) {
+                            var updatedWarning = warningUpdates[warningId];
+                            var hasUpdatedWarning = updatedWarning && Object.keys(updatedWarning).length > 0;
+                            newWarnings = hasUpdatedWarning
+                                ? set(currentWarnings, warningId, updatedWarning)
+                                : omit(currentWarnings, warningId);
+                        }
+                        return newWarnings;
                     });
                     setDataSet(newDataSet); //Update the dataSet
                     return [2 /*return*/];

package/lib/esm/Importer/contexts/ImporterContextProvider.d.ts

@@ -1,6 +1,6 @@
 import Fuse from "fuse.js";
 import React from "react";
-import { FormatRecord, ImporterOptions, Integration, OnSubmit, OnValidateRecord, Record, TemplateHeader } from "../../types";
+import { CustomAction, FormatRecord, ImporterOptions, Integration, OnSubmit, OnValidateRecord, Record, TemplateHeader } from "../../types";
 import { FuseApi } from "../common/FuseApi";
 export declare const fusejsOptions: Fuse.IFuseOptions<string>;
 export type HeaderMatchings = {
@@ -56,6 +56,7 @@ export type State = {
     isUsingManualImport: React.MutableRefObject<boolean>;
     resetImporterWhenUsingManualImport: () => void;
     manualDataImportSelected: () => void;
+    customActions: CustomAction[];
 };
 export type Props = {
     templateSlug: string;
@@ -68,6 +69,7 @@ export type Props = {
     formatRecord: FormatRecord;
     onValidateRecord?: OnValidateRecord;
     dynamicColumns: TemplateHeader[] | null;
+    customActions: CustomAction[];
 };
-export declare const ImporterContextProvider: ({ templateSlug, initialRecords, apiToken, children, options, onSubmit, onClose, formatRecord, onValidateRecord, dynamicColumns, }: Props) => JSX.Element;
+export declare const ImporterContextProvider: ({ templateSlug, initialRecords, apiToken, children, options, onSubmit, onClose, formatRecord, onValidateRecord, dynamicColumns, customActions, }: Props) => JSX.Element;
 export declare const useImporterContext: () => State;

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

@@ -67,7 +67,7 @@ export var fusejsOptions = {
 };
 var ImporterContext = createContext({});
 export var ImporterContextProvider = function (_a) {
-    var templateSlug = _a.templateSlug, initialRecords = _a.initialRecords, apiToken = _a.apiToken, children = _a.children, options = _a.options, onSubmit = _a.onSubmit, onClose = _a.onClose, formatRecord = _a.formatRecord, onValidateRecord = _a.onValidateRecord, dynamicColumns = _a.dynamicColumns;
+    var templateSlug = _a.templateSlug, initialRecords = _a.initialRecords, apiToken = _a.apiToken, children = _a.children, options = _a.options, onSubmit = _a.onSubmit, onClose = _a.onClose, formatRecord = _a.formatRecord, onValidateRecord = _a.onValidateRecord, dynamicColumns = _a.dynamicColumns, customActions = _a.customActions;
     var _b = useState(initialRecords ? 2 : 0), currentStepIndex = _b[0], setCurrentStepIndex = _b[1];
     var _c = useState(0), matcherSubstep = _c[0], setMatcherSubstep = _c[1];
     var _d = useState(null), templateError = _d[0], setTemplateError = _d[1];
@@ -241,6 +241,7 @@ export var ImporterContextProvider = function (_a) {
         isUsingManualImport: isUsingManualImport,
         resetImporterWhenUsingManualImport: resetImporterWhenUsingManualImport,
         manualDataImportSelected: manualDataImportSelected,
+        customActions: customActions,
     };
     return (_jsx(ImporterContext.Provider, __assign({ value: value }, { children: children })));
 };

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

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

package/lib/esm/Importer/index.js

@@ -19,8 +19,8 @@ export var ACCOUNT_VIEW_PATH = "/account";
 var p = function (path) { return "".concat(ACCOUNT_VIEW_PATH).concat(path); };
 export var TEMPLATES_ROUTE = p(ACCOUNT_ROUTES.TEMPLATES);
 var Importer = function (_a) {
-    var templateSlug = _a.templateSlug, apiToken = _a.apiToken, options = _a.options, formatRecord = _a.formatRecord, onValidateRecord = _a.onValidateRecord, onSubmit = _a.onSubmit, onClose = _a.onClose, dynamicColumns = _a.dynamicColumns;
-    return (_jsx(ImporterContextProvider, __assign({ initialRecords: options.records, options: options, templateSlug: templateSlug, apiToken: apiToken, formatRecord: formatRecord, onValidateRecord: onValidateRecord, onClose: onClose, onSubmit: onSubmit, dynamicColumns: dynamicColumns }, { children: _jsx(ImporterWithContext, {}) })));
+    var templateSlug = _a.templateSlug, apiToken = _a.apiToken, options = _a.options, formatRecord = _a.formatRecord, onValidateRecord = _a.onValidateRecord, dynamicColumns = _a.dynamicColumns, customActions = _a.customActions, onSubmit = _a.onSubmit, onClose = _a.onClose;
+    return (_jsx(ImporterContextProvider, __assign({ initialRecords: options.records, options: options, templateSlug: templateSlug, apiToken: apiToken, formatRecord: formatRecord, onValidateRecord: onValidateRecord, onClose: onClose, onSubmit: onSubmit, dynamicColumns: dynamicColumns, customActions: customActions }, { children: _jsx(ImporterWithContext, {}) })));
 };
 export * from "./common/Spreadsheet";
 export * from "./common/utils";

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

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

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

@@ -0,0 +1,81 @@
+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 { useMemo, useState } from "react";
+import { ActionPlus } from "../icons";
+import { Div } from "../../../../styled";
+import styled from "styled-components";
+import { SelectMenu } from "../../../../common/inputs";
+import { MenuItem, addToast } from "../../../index";
+import { useSpreadsheetContext } from "../../../../index";
+import { useImporterContext } from "../../../../Importer/contexts/ImporterContextProvider";
+import { useTranslation } from "react-i18next";
+var Container = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
+var StyledSelectMenu = styled(SelectMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .selectMenu[data-popper-placement^=\"bottom\"] {\n    width: 320px !important;\n    transform: translate(-199px, 21px);\n  }\n"], ["\n  .selectMenu[data-popper-placement^=\"bottom\"] {\n    width: 320px !important;\n    transform: translate(-199px, 21px);\n  }\n"])));
+export var CustomActions = function () {
+    var customActions = useImporterContext().customActions;
+    var _a = useSpreadsheetContext(), selectedRows = _a.selectedRows, data = _a.data, updateRecord = _a.updateRecord;
+    var _b = useState(null), referenceElement = _b[0], setReferenceElement = _b[1];
+    var _c = useState(false), isMenuOpen = _c[0], setIsMenuOpen = _c[1];
+    var t = useTranslation("review").t;
+    var filteredOptions = useMemo(function () {
+        return customActions.map(function (action) { return action.name; });
+    }, [customActions]);
+    var handleCustomAction = function (actionKey) {
+        var recordsToRunAction = data.filter(function (row) {
+            return selectedRows.includes(row._meta.id);
+        });
+        var recordsAfterActions = [];
+        var action = customActions.find(function (action) { return action.name === actionKey; });
+        if (!action || Object.keys(action).length === 0) {
+            addToast(t("table_actions.custom_actions.general_error_toast"), "error");
+            return;
+        }
+        for (var i = 0; i < recordsToRunAction.length; i++) {
+            var currentRecord = recordsToRunAction[i];
+            try {
+                if (action.actionType === "record") {
+                    var newRecord = action.handler(currentRecord);
+                    recordsAfterActions.push(newRecord);
+                    continue;
+                }
+            }
+            catch (error) {
+                addToast(t("table_actions.custom_actions.error_toast", {
+                    actionName: action.name,
+                }), "error");
+                break;
+            }
+        }
+        if (recordsAfterActions.length) {
+            addToast(t("table_actions.custom_actions.success_toast", {
+                actionName: action.name,
+            }), "success");
+        }
+        updateRecord(recordsAfterActions);
+    };
+    var onSelect = function (value) {
+        setIsMenuOpen(false);
+        handleCustomAction(value);
+    };
+    var handleMenuVisibility = function () {
+        setIsMenuOpen(function (oldValue) { return !oldValue; });
+    };
+    if (!filteredOptions.length || !selectedRows.length)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsxs(Container, __assign({ onClick: handleMenuVisibility, dflex: true, alignCenter: true, minw: 152, w100: true, pl: 20, pr: 20, pt: 6, pb: 6, ref: setReferenceElement, "data-testid": "ta-custom-actions" }, { children: [_jsx(ActionPlus, {}), _jsx(Div, __assign({ pl: 4, buttonTextSmall: true }, { children: t("table_actions.custom_actions.label") }))] })), isMenuOpen && (_jsx(StyledSelectMenu, __assign({ referenceElement: referenceElement, placement: "bottom", isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); }, selectMenuClassName: "selectMenu" }, { children: filteredOptions.map(function (option, index) { return (_jsx(Div, __assign({ "data-test-id": "autocomplete-menu-item" }, { children: _jsx(MenuItem, __assign({ id: "custom-action-option-".concat(option), onClick: function () { return onSelect(option); } }, { children: option })) }), index)); }) })))] }));
+};
+var templateObject_1, templateObject_2;

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

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

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

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

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

@@ -7,7 +7,7 @@ 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 _c = useSpreadsheetContext(), errors = _c.errors, fields = _c.fields, spreadsheetFilter = _c.spreadsheetFilter, resetSpreadsheetFilter = _c.resetSpreadsheetFilter, filterRecordsByFieldErrors = _c.filterRecordsByFieldErrors, isTransformTooltipOpened = _c.isTransformTooltipOpened;
     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");
@@ -42,6 +42,6 @@ export var FilterByErrors = function () {
         : isMenuOpened
             ? search_or_select
             : prefix;
-    var isDisabled = errorArray.length === 0;
+    var isDisabled = errorArray.length === 0 || isTransformTooltipOpened;
     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/RowFilters.js

@@ -24,19 +24,19 @@ var FilterContainer = styled(Div)(templateObject_2 || (templateObject_2 = __make
 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 label = _a.label, count = _a.count, isSelected = _a.isSelected, onClick = _a.onClick, isDisabled = _a.isDisabled;
     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 })) }))] })));
+    return (_jsxs(Div, __assign({ disabledWhen: isDisabled, dflex: true, clickable: true, onClick: function () { return !isDisabled && 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 _a = useSpreadsheetContext(), spreadsheetFilter = _a.spreadsheetFilter, errors = _a.errors, filterRecordsByRowType = _a.filterRecordsByRowType, recordsWithValuesCount = _a.recordsWithValuesCount, isTransformTooltipOpened = _a.isTransformTooltipOpened;
     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"); } })] }));
+    return (_jsxs(Container, { children: [_jsx(Filter, { isSelected: spreadsheetFilter.byRow === "all", label: all_rows, count: recordsWithValuesCount, onClick: function () { return filterRecordsByRowType("all"); }, isDisabled: isTransformTooltipOpened }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "valid", label: valid_rows, onClick: function () { return filterRecordsByRowType("valid"); }, isDisabled: isTransformTooltipOpened }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "invalid", label: invalid_rows, count: Object.values(errors).length, onClick: function () { return filterRecordsByRowType("invalid"); }, isDisabled: isTransformTooltipOpened })] }));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -23,7 +23,8 @@ 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) {
+import { Div } from "../../../styled";
+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) {
@@ -36,7 +37,7 @@ var Input = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateO
     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 testId = _a.testId, value = _a.value, onChange = _a.onChange, isDisabled = _a.isDisabled;
     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];
@@ -59,14 +60,14 @@ var SearchInput = function (_a) {
             }
         }
     };
-    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") })] })) })));
+    return (_jsx(TooltipProvider, __assign({ tooltip: !isOpen && !isDisabled ? t("table_actions.search_rows.tooltip") : "", placement: "right", flip: false, centered: true, w: "auto", "data-testid": testId }, { children: _jsxs(Wrapper, __assign({ isOpen: isOpen, onClick: function () { return !isDisabled && handleWrapperClick(); }, disabledWhen: isDisabled }, { 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 _c = useSpreadsheetContext(), filteredInputValue = _c.filteredInputValue, setFilteredInputValue = _c.setFilteredInputValue, isTransformTooltipOpened = _c.isTransformTooltipOpened;
     var handleChangeInputValue = function (value) {
         setFilteredInputValue(value);
     };
-    return (_jsx(SearchInput, { testId: testId, value: filteredInputValue, onChange: handleChangeInputValue }));
+    return (_jsx(SearchInput, { testId: testId, value: filteredInputValue, onChange: handleChangeInputValue, isDisabled: isTransformTooltipOpened }));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -29,7 +29,8 @@ import * as S from "./TableActions.styles";
 import { FilterByErrors } from "./FilterByErrors/FilterByErrors";
 import { RowFilters } from "./RowFilters";
 import { TransformedRecordsCount } from "./TransformedRecordsCount";
+import { CustomActions } from "./CustomActions";
 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, {}) })] })));
+    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(CustomActions, {})] })] }), _jsx(S.TableActionsInformations, { children: _jsx(TransformedRecordsCount, {}) })] })));
 };

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

@@ -3,3 +3,4 @@ export declare const ConfirmationDeleteIcon: JSX.Element;
 export declare const SearchIcon: () => JSX.Element;
 export declare const DownloadIcon: () => JSX.Element;
 export declare const CheckIcon: () => JSX.Element;
+export declare const ActionPlus: () => JSX.Element;

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

@@ -15,3 +15,4 @@ export var ConfirmationDeleteIcon = (_jsxs("svg", __assign({ width: "68", height
 export var SearchIcon = function () { return (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M11 20C15.9706 20 20 15.9706 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20Z", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M21 21L18 18", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
 export var DownloadIcon = function () { return (_jsxs("svg", __assign({ width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M10.0834 18C9.66675 16.75 9.66675 15.5 9.66675 14.6303C9.66675 11.7319 12.2621 8.83337 15.4637 8.83337C17.6094 8.83337 19.4828 9.99914 20.4852 11.7319H21.2607C23.6619 11.7319 25.9167 13.4167 25.9167 15.5C25.9167 16.3334 25.9167 17.1667 25.5001 18", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M14.1807 23.2764L17.5834 26.5416L20.9862 23.2764", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M17.5833 25.6827L17.5833 16.4375", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round" })] }))); };
 export var CheckIcon = function () { return (_jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "53", height: "53", viewBox: "0 0 53 53", fill: "none" }, { children: [_jsx("rect", { width: "53", height: "53", fill: "white" }), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M40.6023 5.38665C41.3381 4.56281 42.6024 4.49142 43.4263 5.22719L51.5083 12.4453C52.3321 13.181 52.4035 14.4454 51.6677 15.2692L23.539 46.7647C22.8032 47.5885 21.5389 47.6599 20.7151 46.9242L12.6331 39.7061C11.8092 38.9703 11.7378 37.706 12.4736 36.8822L40.6023 5.38665Z", fill: "url(#paint0_linear_643_341)" }) })), _jsx("g", __assign({ style: { mixBlendMode: "darken" } }, { children: _jsx("rect", { x: "32.0707", y: "37.1587", width: "14.836", height: "29.7113", rx: "2", transform: "rotate(131.582 32.0707 37.1587)", fill: "url(#paint1_linear_643_341)" }) })), _jsxs("defs", { children: [_jsxs("linearGradient", __assign({ id: "paint0_linear_643_341", x1: "15.4625", y1: "39.0861", x2: "31.139", y2: "48.4231", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#D0A617" }), _jsx("stop", { offset: "1", stopColor: "#FEE18F" })] })), _jsxs("linearGradient", __assign({ id: "paint1_linear_643_341", x1: "39.4887", y1: "37.1587", x2: "29.9147", y2: "74.1394", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#6BEEFF" }), _jsx("stop", { offset: "1", stopColor: "#08CABE" })] }))] })] }))); };
+export var ActionPlus = function () { return (_jsx("svg", __assign({ width: "16", height: "17", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsxs("g", __assign({ id: "Actions Plus" }, { children: [_jsx("path", { id: "Vector 4", d: "M8 2.91602V14.916", stroke: "#909090", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { id: "Vector 5", d: "M2 8.91602L14 8.91602", stroke: "#909090", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })) }))); };

package/lib/esm/common/inputs/SelectMenu.d.ts

@@ -9,6 +9,7 @@ type Props = {
     children: any;
     placement?: Placement;
     referenceElement: any;
+    selectMenuClassName?: string;
 } & DivCSSProps;
-export declare const SelectMenu: ({ isOpen, onClose, placement, referenceElement, children, ...props }: Props) => JSX.Element;
+export declare const SelectMenu: ({ isOpen, onClose, placement, referenceElement, children, selectMenuClassName, ...props }: Props) => JSX.Element;
 export {};

package/lib/esm/common/inputs/SelectMenu.js

@@ -37,7 +37,7 @@ export var SelectMenuScrollArea = styled(Div)(function (_a) {
 });
 export var SelectMenu = function (_a) {
     var _b;
-    var _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, _d = _a.onClose, onClose = _d === void 0 ? null : _d, _e = _a.placement, placement = _e === void 0 ? "auto" : _e, referenceElement = _a.referenceElement, children = _a.children, props = __rest(_a, ["isOpen", "onClose", "placement", "referenceElement", "children"]);
+    var _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, _d = _a.onClose, onClose = _d === void 0 ? null : _d, _e = _a.placement, placement = _e === void 0 ? "auto" : _e, referenceElement = _a.referenceElement, children = _a.children, selectMenuClassName = _a.selectMenuClassName, props = __rest(_a, ["isOpen", "onClose", "placement", "referenceElement", "children", "selectMenuClassName"]);
     var _f = useState(null), popperElement = _f[0], setPopperElement = _f[1];
     var _g = useState(null), width = _g[0], setWidth = _g[1];
     var options = {
@@ -69,6 +69,6 @@ export var SelectMenu = function (_a) {
         if (referenceElement)
             setWidth(referenceElementWidth);
     }, [referenceElementWidth]);
-    return (_jsx(_Fragment, { children: isOpen && (_jsxs(Div, __assign({ pRelative: true }, props, { children: [_jsx(SelectMenuBackdrop, { onClick: onClose }), _jsx(SelectMenuDiv, __assign({ ref: setPopperElement, style: __assign(__assign({}, styles.popper), { width: width }) }, attributes.popper, { children: _jsx(SelectMenuScrollArea, { children: children }) }))] }))) }));
+    return (_jsx(_Fragment, { children: isOpen && (_jsxs(Div, __assign({ pRelative: true }, props, { children: [_jsx(SelectMenuBackdrop, { onClick: onClose }), _jsx(SelectMenuDiv, __assign({ ref: setPopperElement, style: __assign(__assign({}, styles.popper), { width: width }), className: selectMenuClassName }, attributes.popper, { children: _jsx(SelectMenuScrollArea, { children: children }) }))] }))) }));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/index.d.ts

@@ -1,4 +1,4 @@
-import { ColumnRequiredProps, EnvironmentType, FieldTypesAsUnion, FormatRecord, ImporterOptions, OnSubmit, OnValidateRecord, Record } from "./types";
+import { ColumnRequiredProps, CustomAction, CustomActionTypes, EnvironmentType, FieldTypesAsUnion, FormatRecord, ImporterOptions, OnSubmit, OnValidateRecord, Record } from "./types";
 declare class FuseImporter {
     apiToken: string;
     templateSlug: string;
@@ -8,6 +8,7 @@ declare class FuseImporter {
     records: Record[];
     constructor(apiToken: string, templateSlug: string, options?: ImporterOptions);
     private dynamicColumns;
+    private customActions;
     private cleanupIframe;
     formatRecord: FormatRecord;
     onValidateRecord: OnValidateRecord;
@@ -17,6 +18,7 @@ declare class FuseImporter {
     close(): void;
     show(): Promise<void>;
     addColumn<T extends FieldTypesAsUnion>(columnData: ColumnRequiredProps<T>): void;
+    addCustomAction<T extends CustomActionTypes>(actions: CustomAction<T>[] | CustomAction<T>): void;
     private renderImporterComponent;
     private createDivComponent;
     private createIframe;

package/lib/esm/index.js

@@ -68,6 +68,7 @@ var FuseImporter = /** @class */ (function () {
     function FuseImporter(apiToken, templateSlug, options) {
         if (options === void 0) { options = {}; }
         this.dynamicColumns = [];
+        this.customActions = [];
         this.cleanupIframe = null;
         this.windowScrollPosition = {
             x: 0,
@@ -139,6 +140,12 @@ var FuseImporter = /** @class */ (function () {
         };
         this.dynamicColumns.push(column);
     };
+    FuseImporter.prototype.addCustomAction = function (actions) {
+        var _a;
+        if (!Array.isArray(actions))
+            actions = [actions];
+        (_a = this.customActions).push.apply(_a, actions);
+    };
     FuseImporter.prototype.renderImporterComponent = function () {
         var importerDiv = this.createDivComponent();
         var importerComponent = this.createImporterComponent();
@@ -160,9 +167,9 @@ var FuseImporter = /** @class */ (function () {
     };
     FuseImporter.prototype.createImporterComponent = function () {
         var _this = this;
-        return (_jsx(Importer, { apiToken: this.apiToken, templateSlug: this.templateSlug, options: this.options, formatRecord: this.formatRecord, onValidateRecord: this.onValidateRecord, onSubmit: this.onSubmit, onClose: function () {
+        return (_jsx(Importer, { apiToken: this.apiToken, templateSlug: this.templateSlug, options: this.options, formatRecord: this.formatRecord, onValidateRecord: this.onValidateRecord, dynamicColumns: this.dynamicColumns, customActions: this.customActions, onSubmit: this.onSubmit, onClose: function () {
                 _this.close();
-            }, dynamicColumns: this.dynamicColumns }));
+            } }));
     };
     FuseImporter.prototype.configureIframe = function (iframe, importerComponent) {
         var onLoadCallback = function () {

package/lib/esm/locales/de.d.ts

@@ -83,6 +83,12 @@ declare const _default: {
                 example: string;
                 auto_corrections_amount: string;
             };
+            custom_actions: {
+                label: string;
+                general_error_toast: string;
+                error_toast: string;
+                success_toast: string;
+            };
         };
     };
     general: {

package/lib/esm/locales/de.js

@@ -84,6 +84,12 @@ export default {
                 example: "Beispiel",
                 auto_corrections_amount: "Wir haben {{amount}} Probleme automatisch korrigiert.",
             },
+            custom_actions: {
+                label: "Weitere Aktionen",
+                general_error_toast: "Die Aktion konnte nicht ausgeführt werden. Bitte versuchen Sie es erneut.",
+                error_toast: 'Beim Ausführen der Aktion "{{actionName}}" auf den ausgewählten Zeilen ist ein Fehler aufgetreten. Bitte überprüfen Sie die Code-Implementierung und versuchen Sie es erneut.',
+                success_toast: 'Die Aktion "{{actionName}}" wurde erfolgreich auf den ausgewählten Zeilen ausgeführt.',
+            },
         },
     },
     general: {

package/lib/esm/locales/en.d.ts

@@ -83,6 +83,12 @@ declare const _default: {
                 example: string;
                 auto_corrections_amount: string;
             };
+            custom_actions: {
+                label: string;
+                general_error_toast: string;
+                error_toast: string;
+                success_toast: string;
+            };
         };
     };
     general: {

package/lib/esm/locales/en.js

@@ -84,6 +84,12 @@ export default {
                 example: "Example",
                 auto_corrections_amount: "We have auto-corrected {{amount}} issues.",
             },
+            custom_actions: {
+                label: "More actions",
+                general_error_toast: "It was not possible to run the action. Please try again.",
+                error_toast: 'Error occurred while running action "{{actionName}} on selected rows". Please check the code implementation and try again.',
+                success_toast: 'Action "{{actionName}}" was executed successfully on the selected rows.',
+            },
         },
     },
     general: {

package/lib/esm/locales/es.d.ts

@@ -83,6 +83,12 @@ declare const _default: {
                 example: string;
                 auto_corrections_amount: string;
             };
+            custom_actions: {
+                label: string;
+                general_error_toast: string;
+                error_toast: string;
+                success_toast: string;
+            };
         };
     };
     general: {

package/lib/esm/locales/es.js

@@ -84,6 +84,12 @@ export default {
                 example: "Ejemplo",
                 auto_corrections_amount: "Hemos corregido automáticamente {{amount}} problemas.",
             },
+            custom_actions: {
+                label: "Más acciones",
+                general_error_toast: "No fue posible ejecutar la acción. Por favor, inténtalo nuevamente.",
+                error_toast: 'Se produjo un error al ejecutar la acción "{{actionName}}" en las filas seleccionadas. Por favor, revisa la implementación del código y vuelve a intentarlo.',
+                success_toast: 'La acción "{{actionName}}" se ejecutó correctamente en las filas seleccionadas.',
+            },
         },
     },
     general: {