fuse-importer 0.25.9 → 0.26.1

package/lib/esm/common/columnsValidations.js

@@ -0,0 +1,351 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as yup from "yup";
+import { FieldTypes, mutableValidationTypes, } from "../types";
+var commonValidations = [
+    {
+        value: "regex",
+        label: "Must Match Regex",
+        options: [
+            {
+                type: "text",
+                key: "pattern",
+                tooltip: "Regex Pattern",
+            },
+        ],
+    },
+];
+var uniqueValidation = [
+    { value: "unique_case_sensitive", label: "Must be Unique (case sensitive)" },
+    {
+        value: "unique_case_insensitive",
+        label: "Must be Unique (case insensitive)",
+    },
+];
+var containsValidations = [
+    {
+        value: "cannot_contain",
+        label: "Cannot Contain",
+        options: [
+            {
+                type: "text",
+                key: "pattern",
+                tooltip: "It must be a word that you want to exclude",
+            },
+        ],
+    },
+    {
+        value: "contain",
+        label: "Must Contain",
+        options: [
+            {
+                type: "text",
+                key: "pattern",
+                tooltip: "It must be a word to be included mandatorily",
+            },
+        ],
+    },
+];
+var stringValidations = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], containsValidations, true), [
+    {
+        value: "max_length",
+        label: "Length (shorter than)",
+        options: [
+            {
+                type: "number",
+                key: "max_length",
+                tooltip: "Number of characters",
+            },
+        ],
+    },
+    {
+        value: "min_length",
+        label: "Length (longer than)",
+        options: [
+            {
+                type: "number",
+                key: "min_length",
+                tooltip: "Number of characters",
+            },
+        ],
+    },
+    {
+        value: "length_exactly",
+        label: "Length (exactly)",
+        options: [
+            {
+                type: "number",
+                key: "length",
+                tooltip: "Number of characters",
+            },
+        ],
+    }
+], false), uniqueValidation, true), commonValidations, true);
+var numericValidations = __spreadArray(__spreadArray([
+    {
+        value: "less_than",
+        label: "Must Be Less Than",
+        options: [
+            {
+                type: "number",
+                key: "max",
+                tooltip: "The max allowed value",
+            },
+        ],
+    },
+    {
+        value: "greater_than",
+        label: "Must Be Greater Than",
+        options: [
+            {
+                type: "number",
+                key: "min",
+                tooltip: "The minimum allowed value",
+            },
+        ],
+    },
+    { value: "even", label: "Must be Even" },
+    { value: "odd", label: "Must be Odd" }
+], uniqueValidation, true), commonValidations, true);
+var emailValidations = __spreadArray([
+    { value: "email", label: "Must be an email", isDefaultValidation: true }
+], stringValidations, true);
+var urlValidations = __spreadArray([
+    { value: "url", label: "Must be a URL", isDefaultValidation: true }
+], stringValidations, true);
+var booleanValidations = [
+    {
+        value: "boolean",
+        label: "Must be True or False",
+        isDefaultValidation: true,
+    },
+];
+var structuredDataValidations = __spreadArray([], uniqueValidation, true);
+var dateValidations = __spreadArray(__spreadArray([], uniqueValidation, true), [
+    {
+        value: "before_date",
+        label: "Must Be Before Date",
+        options: [
+            {
+                type: "date",
+                key: "max",
+                tooltip: "The maximum allowed date",
+            },
+        ],
+    },
+    {
+        value: "after_date",
+        label: "Must Be After Date",
+        options: [
+            {
+                type: "date",
+                key: "min",
+                tooltip: "The minimum allowed date",
+            },
+        ],
+    },
+], false);
+export var validationsByColumnType = {
+    string: stringValidations,
+    integer: __spreadArray([
+        {
+            value: "integer",
+            label: "Must be an integer",
+            isDefaultValidation: true,
+        }
+    ], numericValidations, true),
+    float: __spreadArray([
+        {
+            value: "float",
+            label: "Must be a float",
+            isDefaultValidation: true,
+        }
+    ], numericValidations, true),
+    email: emailValidations,
+    enum: structuredDataValidations,
+    url: urlValidations,
+    boolean: booleanValidations,
+    date: dateValidations,
+    datetime: dateValidations,
+    time: uniqueValidation,
+};
+export var validationsByType = Object.values(validationsByColumnType)
+    .reduce(function (acc, arr) { return acc.concat(arr); }, [])
+    .reduce(function (result, p) {
+    result[p.value] = p;
+    return result;
+}, {});
+export var availableColumnTypes = Object.keys(validationsByColumnType);
+export var datePatterns = [
+    {
+        value: "MM/dd/yyyy",
+        label: "MM/dd/yyyy",
+    },
+];
+export var dateTimePatterns = [
+    {
+        value: "MM/dd/yyyy HH:mm",
+        label: "MM/dd/yyyy HH:mm",
+    },
+    {
+        value: "MM/dd/yyyy HH:mm:ss",
+        label: "MM/dd/yyyy HH:mm:ss",
+    },
+];
+export var timePatterns = [
+    {
+        value: "HH:mm",
+        label: "HH:mm",
+    },
+    {
+        value: "HH:mm:ss",
+        label: "HH:mm:ss",
+    },
+];
+export var allowedPatterns = {
+    date: datePatterns,
+    datetime: dateTimePatterns,
+    time: timePatterns,
+};
+export var patternsColumnTypes = Object.keys(allowedPatterns);
+var iso8601Regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
+var schema = yup
+    .mixed()
+    .test("validations", "Invalid validations", function (value) {
+    var isAnArray = Array.isArray(value);
+    if (isAnArray) {
+        for (var _i = 0, value_1 = value; _i < value_1.length; _i++) {
+            var validation = value_1[_i];
+            var validation_type = validation.validation_type, options = validation.options;
+            var optionsPropertyIsNotRequiredFor = [
+                "unique_case_insensitive",
+                "unique_case_sensitive",
+            ];
+            if (mutableValidationTypes.includes(validation_type)) {
+                if (optionsPropertyIsNotRequiredFor.includes(validation_type)) {
+                    continue;
+                }
+                if (!options) {
+                    return this.createError({
+                        path: "validations",
+                        message: "Options is required for this validation type",
+                    });
+                }
+                var min = options.min, max = options.max;
+                var minOptionDoesNotMatchISO = min && !min.match(iso8601Regex);
+                var maxOptionDoesNotMatchISO = max && !max.match(iso8601Regex);
+                if (minOptionDoesNotMatchISO || maxOptionDoesNotMatchISO) {
+                    return this.createError({
+                        path: "validations",
+                        message: "Invalid ISO 8601 format for min or max",
+                    });
+                }
+            }
+            else {
+                return this.createError({
+                    path: "validations",
+                    message: "".concat(validation_type, " is not a valid validation type. Please check the values you inserted."),
+                });
+            }
+        }
+        return true;
+    }
+    var arrayIsNotDefined = !["undefined", "null"].includes(typeof value);
+    if (arrayIsNotDefined && !isAnArray) {
+        return this.createError({
+            path: "validations",
+            message: "Validations must be an array",
+        });
+    }
+    return true;
+});
+var columnSchema = yup.object().shape({
+    column_type: yup.string().oneOf(availableColumnTypes).required(),
+    internal_key: yup.string().required(),
+    label: yup.string().required(),
+    required: yup.boolean().required(),
+    validations: schema,
+});
+var dateColumnSchema = columnSchema.shape({
+    pattern: yup.string().oneOf(datePatterns.map(function (p) { return p.value; })),
+});
+var dateTimeColumnSchema = columnSchema.shape({
+    pattern: yup.string().oneOf(dateTimePatterns.map(function (p) { return p.value; })),
+});
+var timeColumnSchema = columnSchema.shape({
+    pattern: yup.string().oneOf(timePatterns.map(function (p) { return p.value; })),
+});
+var enumColumnSchema = columnSchema.shape({
+    values: yup.array().of(yup.string()).min(1).required(),
+});
+export var validateColumn = function (columnData) { return __awaiter(void 0, void 0, void 0, function () {
+    var schema, error_1;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                schema = columnData.column_type === FieldTypes.date
+                    ? dateColumnSchema
+                    : columnData.column_type === FieldTypes.datetime
+                        ? dateTimeColumnSchema
+                        : columnData.column_type === FieldTypes.time
+                            ? timeColumnSchema
+                            : columnData.column_type === FieldTypes.enum
+                                ? enumColumnSchema
+                                : columnSchema;
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 3, , 4]);
+                return [4 /*yield*/, schema.validate(columnData, { abortEarly: true })];
+            case 2:
+                _a.sent();
+                return [3 /*break*/, 4];
+            case 3:
+                error_1 = _a.sent();
+                throw new Error("Error on custom column creation: ".concat(error_1.message));
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };

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

@@ -23,3 +23,4 @@ export * from "./Modal";
 export * from "./Spinner";
 export * from "./TooltipProvider";
 export * from "./ConfirmationModal";
+export * from "./columnsValidations";

package/lib/esm/common/index.js

@@ -40,4 +40,5 @@ export * from "./Modal";
 export * from "./Spinner";
 export * from "./TooltipProvider";
 export * from "./ConfirmationModal";
+export * from "./columnsValidations";
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -16,6 +16,7 @@ export type Props = {
     onToggle?: (isOpen: boolean) => void;
     placement?: Placement;
     icon?: JSX.Element;
+    prefix?: string;
 } & DivCSSProps;
-declare const Autocomplete: ({ label, isDisabled, isInputDisabled, placeholder, value, icon, onChange, placement, options, onToggle, id, labelTooltip, ...props }: Props) => JSX.Element;
+declare const Autocomplete: ({ label, isDisabled, isInputDisabled, placeholder, value, icon, onChange, placement, options, onToggle, id, labelTooltip, prefix, ...props }: Props) => JSX.Element;
 export { Autocomplete };

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

@@ -47,7 +47,7 @@ var ClickableArea = styled(Div)(function (_a) {
     return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), isInputDisabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      :hover {\n        cursor: pointer;\n        opacity: 0.9;\n      }\n    "], ["\n      :hover {\n        cursor: pointer;\n        opacity: 0.9;\n      }\n    "]))));
 });
 var Autocomplete = function (_a) {
-    var _b = _a.label, label = _b === void 0 ? null : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isInputDisabled, isInputDisabled = _d === void 0 ? false : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "general:autocomplete.placeholder" : _e, value = _a.value, icon = _a.icon, onChange = _a.onChange, placement = _a.placement, options = _a.options, onToggle = _a.onToggle, id = _a.id, labelTooltip = _a.labelTooltip, props = __rest(_a, ["label", "isDisabled", "isInputDisabled", "placeholder", "value", "icon", "onChange", "placement", "options", "onToggle", "id", "labelTooltip"]);
+    var _b = _a.label, label = _b === void 0 ? null : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isInputDisabled, isInputDisabled = _d === void 0 ? false : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "general:autocomplete.placeholder" : _e, value = _a.value, icon = _a.icon, onChange = _a.onChange, placement = _a.placement, options = _a.options, onToggle = _a.onToggle, id = _a.id, labelTooltip = _a.labelTooltip, prefix = _a.prefix, props = __rest(_a, ["label", "isDisabled", "isInputDisabled", "placeholder", "value", "icon", "onChange", "placement", "options", "onToggle", "id", "labelTooltip", "prefix"]);
     var _f = useState(false), updatedText = _f[0], setUpdatedText = _f[1];
     var selectedLabel = useMemo(function () { var _a; return ((_a = options === null || options === void 0 ? void 0 : options.find(function (o) { return (o === null || o === void 0 ? void 0 : o.value) === value; })) === null || _a === void 0 ? void 0 : _a.label) || ""; }, [value]);
     var _g = useState(selectedLabel), text = _g[0], setText = _g[1];
@@ -92,7 +92,7 @@ var Autocomplete = function (_a) {
                             setText(selectedLabel);
                             setIsMenuOpen(false);
                         }
-                    }, label: label, isDisabled: isDisabled || isInputDisabled, placeholder: t(placeholder), value: text, onChange: function (v) { return setText(v); }, icon: isDisabled ? null : inputIconUI, labelTooltip: labelTooltip }) })), !isDisabled && filteredOptions.length > 0 && (_jsx(SelectMenu, __assign({ referenceElement: referenceElement, placement: placement, isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); } }, { children: filteredOptions.map(function (o, index) { return (_jsx(Div, { children: _jsx(MenuItem, __assign({ id: id ? "".concat(id, "-option-").concat(o.label) : null, isSelected: value === (o === null || o === void 0 ? void 0 : o.value), onClick: function () { return onSelect(o === null || o === void 0 ? void 0 : o.value); } }, { children: o.label })) }, index)); }) })))] })));
+                    }, label: label, isDisabled: isDisabled || isInputDisabled, placeholder: t(placeholder), value: prefix ? "".concat(prefix).concat(text) : text, onChange: function (v) { return setText(v); }, icon: isDisabled ? null : inputIconUI, labelTooltip: labelTooltip }) })), !isDisabled && filteredOptions.length > 0 && (_jsx(SelectMenu, __assign({ referenceElement: referenceElement, placement: placement, isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); } }, { children: filteredOptions.map(function (o, index) { return (_jsx(Div, { children: _jsx(MenuItem, __assign({ id: id ? "".concat(id, "-option-").concat(o.label) : null, isSelected: value === (o === null || o === void 0 ? void 0 : o.value), onClick: function () { return onSelect(o === null || o === void 0 ? void 0 : o.value); } }, { children: o.label })) }, index)); }) })))] })));
 };
 var chevronDownIcon = (_jsx("svg", __assign({ width: "16", height: "9", viewBox: "0 0 16 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M14.9263 1L7.9631 7.96317L0.999928 1", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
 var clearIcon = (_jsxs("svg", __assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M4 4L12.5161 12.5161", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M4 12.5161L12.5161 3.99998", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));

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

@@ -1,5 +1,5 @@
-import { DivCSSProps } from "../../styled/utils";
 import { Placement } from "@popperjs/core";
+import { DivCSSProps } from "../../styled/utils";
 export declare const SelectMenuBackdrop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../styled/utils").CSSProps, never>;
 export declare const SelectMenuDiv: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../styled/utils").CSSProps, never>;
 export declare const SelectMenuScrollArea: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../styled/utils").CSSProps, never>;

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

@@ -25,21 +25,24 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
-import styled, { css } from "styled-components";
+import { useEffect, useLayoutEffect, useState } from "react";
 import { usePopper } from "react-popper";
+import styled, { css } from "styled-components";
 import { Div } from "../../styled/utils";
 export var SelectMenuBackdrop = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  width: 100vw;\n  height: 100vh;\n  z-index: 99999999;\n  display: flex;\n"], ["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  width: 100vw;\n  height: 100vh;\n  z-index: 99999999;\n  display: flex;\n"])));
-export var SelectMenuDiv = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: white;\n  border: solid 1px ", ";\n  position: absolute;\n  border-radius: 16px;\n  width: 100%;\n  overflow: hidden;\n  z-index: 10000000000;\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);\n"], ["\n  background-color: white;\n  border: solid 1px ", ";\n  position: absolute;\n  border-radius: 16px;\n  width: 100%;\n  overflow: hidden;\n  z-index: 10000000000;\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);\n"])), function (p) { return p.theme.colors.gray5; });
+export var SelectMenuDiv = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: white;\n  border: solid 1px ", ";\n  position: absolute;\n  border-radius: 16px;\n  overflow: hidden;\n  z-index: 10000000000;\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);\n"], ["\n  background-color: white;\n  border: solid 1px ", ";\n  position: absolute;\n  border-radius: 16px;\n  overflow: hidden;\n  z-index: 10000000000;\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);\n"])), function (p) { return p.theme.colors.gray5; });
 export var SelectMenuScrollArea = styled(Div)(function (_a) {
     var _b = _a.theme, colors = _b.colors, c = _b.css;
     return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: 16px;\n    overflow-y: auto;\n    max-height: 250px;\n    ", ";\n  "], ["\n    padding: 16px;\n    overflow-y: auto;\n    max-height: 250px;\n    ", ";\n  "])), function (p) { return p.theme.css.scrollbarDark; });
 });
 export var SelectMenu = function (_a) {
-    var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? null : _c, _d = _a.placement, placement = _d === void 0 ? "auto" : _d, referenceElement = _a.referenceElement, children = _a.children, props = __rest(_a, ["isOpen", "onClose", "placement", "referenceElement", "children"]);
-    var _e = useState(null), popperElement = _e[0], setPopperElement = _e[1];
-    var options = useMemo(function () { return ({
+    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 _f = useState(null), popperElement = _f[0], setPopperElement = _f[1];
+    var _g = useState(null), width = _g[0], setWidth = _g[1];
+    var options = {
         placement: placement,
+        strategy: "fixed",
         modifiers: [
             {
                 name: "offset",
@@ -48,12 +51,17 @@ export var SelectMenu = function (_a) {
                 },
             },
         ],
-    }); }, [placement]);
-    var _f = usePopper(referenceElement, popperElement, options), styles = _f.styles, attributes = _f.attributes, update = _f.update;
+    };
+    var _h = usePopper(referenceElement, popperElement, options), styles = _h.styles, attributes = _h.attributes, update = _h.update;
     useEffect(function () {
         if (update)
             update();
     }, [isOpen]);
-    return (_jsx(_Fragment, { children: isOpen && (_jsxs(Div, __assign({ pRelative: true }, props, { children: [_jsx(SelectMenuBackdrop, { onClick: onClose }), _jsx(SelectMenuDiv, __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { children: _jsx(SelectMenuScrollArea, { children: children }) }))] }))) }));
+    var referenceElementWidth = (_b = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width;
+    useLayoutEffect(function () {
+        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 }) }))] }))) }));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/index.d.ts

@@ -1,4 +1,4 @@
-import { EnvironmentType, FormatRecord, ImporterOptions, OnSubmit, OnValidateRecord } from "./types";
+import { ColumnRequiredProps, EnvironmentType, FieldTypesAsUnion, FormatRecord, ImporterOptions, OnSubmit, OnValidateRecord } from "./types";
 declare class FuseImporter {
     apiToken: string;
     templateSlug: string;
@@ -6,13 +6,16 @@ declare class FuseImporter {
     zIndex: number;
     options: ImporterOptions;
     constructor(apiToken: string, templateSlug: string, options?: ImporterOptions);
+    private dynamicColumns;
     private cleanupIframe;
     formatRecord: FormatRecord;
     onValidateRecord: OnValidateRecord;
     onSubmit: OnSubmit;
     onClose: () => void;
+    private windowScrollPosition;
     close(): void;
     show(): Promise<void>;
+    addColumn<T extends FieldTypesAsUnion>({ options, ...requiredProps }: ColumnRequiredProps<T>): void;
     private renderImporterComponent;
     private createDivComponent;
     private createIframe;

package/lib/esm/index.js

@@ -45,27 +45,45 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactDOM from "react-dom";
 import { Importer } from "./Importer";
-import { fuseImporterId } from "./common";
+import { fuseImporterId, validateColumn } from "./common";
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import * as locales from "./locales";
 import { StyleSheetManager } from "styled-components";
 import { fontsURL } from "./styled/fontsURL";
-var addLinkToHead = function (document, head, href, rel, crossOrigin) {
-    if (crossOrigin === void 0) { crossOrigin = ""; }
-    var link = document.createElement("link");
-    link.href = href;
-    link.rel = rel;
-    link.crossOrigin = crossOrigin;
-    head.appendChild(link);
-};
+import { addLinkToHead, getDefaultValidations } from "./utils";
 var FuseImporter = /** @class */ (function () {
     function FuseImporter(apiToken, templateSlug, options) {
         if (options === void 0) { options = {}; }
+        this.dynamicColumns = [];
         this.cleanupIframe = null;
+        this.windowScrollPosition = {
+            x: 0,
+            y: 0,
+        };
         this.apiToken = apiToken;
         this.templateSlug = templateSlug;
         this.options = __assign({ env: "production", zIndex: 1000, batchValidationDelayMs: 500 }, options);
@@ -79,6 +97,9 @@ var FuseImporter = /** @class */ (function () {
         }
         var iframe = document.getElementById(fuseImporterId);
         document.body.removeChild(iframe);
+        // allow the scroll when the importer is closed
+        document.body.style.overflow = "auto";
+        window.scrollTo(this.windowScrollPosition.x, this.windowScrollPosition.y);
     };
     FuseImporter.prototype.show = function () {
         return __awaiter(this, void 0, void 0, function () {
@@ -96,12 +117,37 @@ var FuseImporter = /** @class */ (function () {
                         }
                         iframe = this.createIframe();
                         importerComponent = this.createImporterComponent();
+                        // saves the position of the page before the importer was opened
+                        this.windowScrollPosition = {
+                            x: window.scrollX,
+                            y: window.scrollY,
+                        };
+                        // block the scroll when opening the importer
+                        window.scrollTo(0, 0);
+                        document.body.style.overflow = "hidden";
                         this.configureIframe(iframe, importerComponent);
                         return [2 /*return*/];
                 }
             });
         });
     };
+    FuseImporter.prototype.addColumn = function (_a) {
+        var options = _a.options, requiredProps = __rest(_a, ["options"]);
+        validateColumn(__assign(__assign({}, options), requiredProps));
+        var validations = __spreadArray(__spreadArray([], getDefaultValidations(requiredProps.column_type), true), ((options === null || options === void 0 ? void 0 : options.validations) || []), true);
+        var column = {
+            column_type: requiredProps.column_type,
+            internal_key: requiredProps.internal_key,
+            label: requiredProps.label,
+            required: requiredProps.required,
+            pattern: (options === null || options === void 0 ? void 0 : options.pattern) || null,
+            position: (options === null || options === void 0 ? void 0 : options.position) || null,
+            unique: (options === null || options === void 0 ? void 0 : options.unique) || false,
+            values: requiredProps.column_type === "enum" ? (options === null || options === void 0 ? void 0 : options.values) || [] : [],
+            validations: validations,
+        };
+        this.dynamicColumns.push(column);
+    };
     FuseImporter.prototype.renderImporterComponent = function () {
         var importerDiv = this.createDivComponent();
         var importerComponent = this.createImporterComponent();
@@ -125,7 +171,7 @@ var FuseImporter = /** @class */ (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 () {
                 _this.close();
-            } }));
+            }, dynamicColumns: this.dynamicColumns }));
     };
     FuseImporter.prototype.configureIframe = function (iframe, importerComponent) {
         var onLoadCallback = function () {

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

@@ -54,6 +54,26 @@ declare const _default: {
         manual_importer_title: string;
         export: string;
         description: string;
+        table_actions: {
+            search_rows: {
+                tooltip: string;
+                placeholder: string;
+            };
+            filter_by_errors: {
+                search_or_select: string;
+                filter_by_errors: string;
+            };
+            delete_rows: {
+                confirmation_modal: string;
+                modal_title: string;
+                yes_delete: string;
+                select_rows: string;
+                delete_row: string;
+            };
+            export_your_data: {
+                tooltip: string;
+            };
+        };
     };
     general: {
         autocomplete: {

package/lib/esm/locales/de.js

@@ -55,6 +55,26 @@ export default {
         manual_importer_title: "Daten Eingeben und Senden",
         export: "Exportieren",
         description: "Einige Zellen im Dokument können Fehler im Format oder fehlende Informationen aufweisen. Bitte überprüfen Sie diese, um fortzufahren.",
+        table_actions: {
+            search_rows: {
+                tooltip: "Etwas suchen",
+                placeholder: "Etwas suchen...",
+            },
+            filter_by_errors: {
+                search_or_select: "Suchen oder auswählen",
+                filter_by_errors: "Nach Fehlern filtern",
+            },
+            delete_rows: {
+                confirmation_modal: "Möchtest du wirklich {{length}} Zeile löschen",
+                modal_title: "Ausgewählte Zeile löschen",
+                yes_delete: "Ja, löschen",
+                select_rows: "Wählen Sie Zeilen zum Löschen aus",
+                delete_row: "Zeile löschen",
+            },
+            export_your_data: {
+                tooltip: "Exportiere deine Daten",
+            },
+        },
     },
     general: {
         autocomplete: {