fuse-importer 0.0.9-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/Review/ReviewContextProvider.js

@@ -201,6 +201,7 @@ export var ReviewContextProvider = function (_a) {
                     }
                     invalidDataSet = recordListToDataSet(invalidRecords_1, reviewFields);
                     setReviewInitialDataSet(invalidDataSet);
+                    setInitialDataSetUpdatedAt(Date.now());
                     if (!!previewMode) return [3 /*break*/, 4];
                     return [4 /*yield*/, trackImportedRowsCount(fuseApi, templateSlug, validDataSetLength)];
                 case 2:
@@ -253,7 +254,7 @@ export var ReviewContextProvider = function (_a) {
         else if (currentStepIndex === 2) {
             setIsLoadingApp(true);
             (function () { return __awaiter(void 0, void 0, void 0, function () {
-                var fields, _records, initialDataSet;
+                var generateRecords, fields, records, initialDataSet;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -265,9 +266,8 @@ export var ReviewContextProvider = function (_a) {
                             _a.sent();
                             _a.label = 2;
                         case 2:
-                            fields = getTemplateFields({ templateHeaders: templateHeaders });
-                            _records = initialRecords ||
-                                transformToRecords({
+                            generateRecords = function () {
+                                return transformToRecords({
                                     templateHeaderMatchings: templateHeaderMatchings,
                                     enumFieldValueMatchings: enumFieldValueMatchings,
                                     templateHeaders: templateHeaders,
@@ -275,8 +275,11 @@ export var ReviewContextProvider = function (_a) {
                                     uploadedData: uploadedData.slice(headerRowIndex + 1),
                                     formatRecord: formatRecord,
                                 });
+                            };
+                            fields = getTemplateFields({ templateHeaders: templateHeaders });
+                            records = initialRecords !== null && initialRecords !== void 0 ? initialRecords : generateRecords();
                             initialDataSet = getReviewDataSet({
-                                records: _records,
+                                records: records,
                                 fields: fields,
                             }).initialDataSet;
                             setSelectedRows([]);

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

@@ -15,7 +15,7 @@ export var isEmail = function (value) {
     return emailRegex.test(value);
 };
 export var isUrl = function (value) {
-    var urlRegex = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/g;
+    var urlRegex = /^(?:(?:https?|ftp|file|tcp|mailto|tel|data|ssh|irc|gopher|ws|wss):\/\/|www\.)[A-Za-z0-9]+([\-\.]{1}[A-Za-z0-9]+)*\.[A-Za-z]{2,16}(:[0-9]{1,5})?(\/.*)?$/g;
     return urlRegex.test(value);
 };
 export var isTrue = function (value) {

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

@@ -30,38 +30,42 @@ import styled, { css } from "styled-components";
 import { SpreadsheetField, useSpreadsheetField } from ".";
 import { Div } from "../../../../../styled/utils";
 import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
+import { AVERAGE_CHAR_SIZE, getFieldContentWidth } from "./utils";
 export var SpreadsheetInput = function (_a) {
     var _b, _c, _d, _e, _f, _g;
     var name = _a.name, record = _a.record, fieldType = _a.fieldType, columnWidth = _a.columnWidth, props = __rest(_a, ["name", "record", "fieldType", "columnWidth"]);
     var _h = useSpreadsheetField(name, record, fieldType), value = _h.value, setValue = _h.setValue, validationError = _h.validationError, validationWarning = _h.validationWarning;
     var isTransformTooltipOpened = useSpreadsheetContext().isTransformTooltipOpened;
+    var defaultWidthAsNumber = Number.parseInt(columnWidth.replace("px", ""));
+    var _fieldContentWidth = getFieldContentWidth({
+        record: record,
+        fieldType: fieldType,
+        isTooltipOpened: isTransformTooltipOpened,
+        name: name,
+    });
     var isHighlighted = isTransformTooltipOpened &&
         ((_d = (_c = (_b = record._meta) === null || _b === void 0 ? void 0 : _b.transformedRow) === null || _c === void 0 ? void 0 : _c[name]) === null || _d === void 0 ? void 0 : _d.transformed);
     var expandedFieldWidth = useMemo(function () {
-        var _a, _b, _c, _d;
         // if the value is falsy, returns the default width
         if (!value)
             return columnWidth;
-        var averageCharacterSize = 9;
         var inputPadding = 24; // 12 left + 12 right
-        var transformedValueSize = value.length * averageCharacterSize;
-        var originalValueSize = isTransformTooltipOpened
-            ? ((_d = (_c = (_b = (_a = record._meta) === null || _a === void 0 ? void 0 : _a.transformedRow) === null || _b === void 0 ? void 0 : _b[name]) === null || _c === void 0 ? void 0 : _c.original) === null || _d === void 0 ? void 0 : _d.length) *
-                averageCharacterSize
-            : 0 || 0;
-        var totalInputSize = transformedValueSize + originalValueSize + inputPadding + 50;
-        var defaultWidthAsNumber = Number.parseInt(columnWidth.replace("px", ""));
+        var transformedValueSize = value.length * AVERAGE_CHAR_SIZE;
+        var totalInputSize = transformedValueSize + _fieldContentWidth + inputPadding;
         return totalInputSize > defaultWidthAsNumber
             ? "".concat(totalInputSize, "px")
             : "".concat(defaultWidthAsNumber, "px");
     }, [value, record, columnWidth]);
-    return (_jsxs(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning, isHighlighted: isHighlighted, expandedFieldWidth: expandedFieldWidth, shouldExpandInput: true }, { children: [_jsx(Input, __assign({ hasError: !!validationError, hasWarning: !!validationWarning, value: value || "", onChange: function (_a) {
+    return (_jsxs(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning, isHighlighted: isHighlighted, defaultFieldWidth: defaultWidthAsNumber, expandedFieldWidth: expandedFieldWidth, shouldExpandInput: true }, { children: [_jsx(Input, __assign({ hasError: !!validationError, hasWarning: !!validationWarning, value: value || "", onChange: function (_a) {
                     var value = _a.target.value;
                     return !isTransformTooltipOpened && setValue(value);
                 }, disabledWhen: isTransformTooltipOpened }, props)), ((_g = (_f = (_e = record === null || record === void 0 ? void 0 : record._meta) === null || _e === void 0 ? void 0 : _e.transformedRow) === null || _f === void 0 ? void 0 : _f[name]) === null || _g === void 0 ? void 0 : _g.original) &&
-                isTransformTooltipOpened && (_jsx(SuffixText, __assign({ className: "suffix" }, { children: record._meta.transformedRow[name].original })))] })));
+                isTransformTooltipOpened && (_jsx(SuffixText, __assign({ className: "suffix", fieldWidth: _fieldContentWidth }, { children: record._meta.transformedRow[name].original })))] })));
 };
-var SuffixText = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: #1c1c1c;\n  font-family: DM Sans;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  position: absolute;\n  right: 12px;\n  text-decoration: line-through;\n  visibility: hidden;\n  white-space: nowrap;\n"], ["\n  color: #1c1c1c;\n  font-family: DM Sans;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  position: absolute;\n  right: 12px;\n  text-decoration: line-through;\n  visibility: hidden;\n  white-space: nowrap;\n"])));
+var SuffixText = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: #1c1c1c;\n  font-family: DM Sans;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  position: absolute;\n  left: ", "px;\n  text-decoration: line-through;\n  white-space: nowrap;\n"], ["\n  color: #1c1c1c;\n  font-family: DM Sans;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  position: absolute;\n  left: ", "px;\n  text-decoration: line-through;\n  white-space: nowrap;\n"])), function (_a) {
+    var fieldWidth = _a.fieldWidth;
+    return fieldWidth;
+});
 export var Input = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: calc(100% - 2px);\n  margin: 0px;\n  outline: none;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  padding: 0 12px;\n  ", ";\n  color: ", ";\n  ::placeholder {\n    color: ", ";\n  }\n\n  ", "\n\n  ", "\n"], ["\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: calc(100% - 2px);\n  margin: 0px;\n  outline: none;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  padding: 0 12px;\n  ", ";\n  color: ", ";\n  ::placeholder {\n    color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), function (props) { return props.theme.css.body1; }, function (props) { return props.theme.colors.gray1000; }, function (props) { return props.theme.colors.placeholder; }, function (p) {
     return p.hasWarning && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.orange1200; });
 }, function (p) {

package/lib/esm/Importer/common/Spreadsheet/components/fields/index.d.ts

@@ -13,6 +13,7 @@ type SpreadsheetFieldProps = {
     isHighlighted?: boolean;
     expandedFieldWidth?: string;
     shouldExpandInput?: boolean;
+    defaultFieldWidth?: number;
 };
-export declare const SpreadsheetField: ({ validationError, validationWarning, children, isHighlighted, expandedFieldWidth, shouldExpandInput, }: SpreadsheetFieldProps) => JSX.Element;
+export declare const SpreadsheetField: ({ validationError, validationWarning, children, isHighlighted, expandedFieldWidth, shouldExpandInput, defaultFieldWidth, }: SpreadsheetFieldProps) => JSX.Element;
 export {};

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;
@@ -82,27 +87,33 @@ export var useSpreadsheetField = function (name, record, fieldType) {
         validationWarning: validationWarning,
     };
 };
-var ContentContainer = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: calc(100% - 1px);\n  width: 100%;\n\n  &:focus-within {\n    ", "\n  }\n\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  height: calc(100% - 1px);\n  width: 100%;\n\n  &:focus-within {\n    ", "\n  }\n\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
-    var isHighlighted = _a.isHighlighted, expandedFieldWidth = _a.expandedFieldWidth, theme = _a.theme, shouldExpandInput = _a.shouldExpandInput;
-    return shouldExpandInput && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        box-shadow: 0px 0px 0px 2px ", " inset;\n        width: ", ";\n        position: absolute;\n        z-index: 1;\n        background: ", ";\n\n        .suffix {\n          visibility: visible;\n        }\n      "], ["\n        box-shadow: 0px 0px 0px 2px ", " inset;\n        width: ", ";\n        position: absolute;\n        z-index: 1;\n        background: ", ";\n\n        .suffix {\n          visibility: visible;\n        }\n      "])), function (p) { return p.theme.colors.blue500; }, expandedFieldWidth || "auto", !isHighlighted
+var ContentContainer = styled(Div)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: calc(100% - 1px);\n  width: ", ";\n  overflow: hidden;\n\n  ", "\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  height: calc(100% - 1px);\n  width: ", ";\n  overflow: hidden;\n\n  ", "\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
+    var defaultFieldWidth = _a.defaultFieldWidth;
+    return defaultFieldWidth ? "".concat(defaultFieldWidth, "px") : "100%";
+}, function (_a) {
+    var expandedFieldWidth = _a.expandedFieldWidth;
+    return expandedFieldWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n    "], ["\n      position: absolute;\n    "])));
+}, function (_a) {
+    var expandedFieldWidth = _a.expandedFieldWidth, isHighlighted = _a.isHighlighted, theme = _a.theme, shouldExpandInput = _a.shouldExpandInput;
+    return shouldExpandInput && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        background: ", ";\n        box-shadow: 0px 0px 0px 2px ", " inset;\n        width: ", ";\n        z-index: 1;\n\n        .suffix {\n          right: 12px;\n        }\n      "], ["\n        background: ", ";\n        box-shadow: 0px 0px 0px 2px ", " inset;\n        width: ", ";\n        z-index: 1;\n\n        .suffix {\n          right: 12px;\n        }\n      "])), !isHighlighted
         ? theme.colors.white
-        : theme.colors.blue100);
+        : theme.colors.blue100, function (p) { return p.theme.colors.blue500; }, expandedFieldWidth || "auto");
 }, function (p) { return p.theme.css.alignCenter; }, function (p) {
-    return p.isHighlighted && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n    "], ["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n    "])), function (p) { return p.theme.colors.blue100; }, function (p) { return p.theme.colors.blue500; });
+    return p.isHighlighted && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n    "], ["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n    "])), function (p) { return p.theme.colors.blue100; }, function (p) { return p.theme.colors.blue500; });
 }, function (p) {
-    return p.hasWarning && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.orange1200; }, function (p) { return p.theme.colors.orange1100; }, function (p) { return p.theme.colors.orange500; });
+    return p.hasWarning && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.orange1200; }, function (p) { return p.theme.colors.orange1100; }, function (p) { return p.theme.colors.orange500; });
 }, function (p) {
-    return p.hasError && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.error; }, function (p) { return p.theme.colors.red100; }, function (p) { return p.theme.colors.error; });
+    return p.hasError && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.error; }, function (p) { return p.theme.colors.red100; }, function (p) { return p.theme.colors.error; });
 }, function (p) {
-    return p.isReadOnly && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
+    return p.isReadOnly && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 });
 var Wrapper = styled(Div)(function (_a) {
     var isLoading = _a.isLoading;
-    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), isLoading && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "]))));
+    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), isLoading && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "]))));
 });
 export var SpreadsheetField = function (_a) {
-    var validationError = _a.validationError, validationWarning = _a.validationWarning, children = _a.children, isHighlighted = _a.isHighlighted, expandedFieldWidth = _a.expandedFieldWidth, shouldExpandInput = _a.shouldExpandInput;
+    var validationError = _a.validationError, validationWarning = _a.validationWarning, children = _a.children, isHighlighted = _a.isHighlighted, expandedFieldWidth = _a.expandedFieldWidth, shouldExpandInput = _a.shouldExpandInput, defaultFieldWidth = _a.defaultFieldWidth;
     var _b = useSpreadsheetContext(), isReadOnly = _b.isReadOnly, isLoading = _b.isLoading;
-    return (_jsx(Wrapper, __assign({ dim: "100%", isLoading: isLoading }, { children: _jsx(TooltipProvider, __assign({ tooltip: validationError || validationWarning }, { children: _jsx(Div, __assign({ dim: "100%" }, { children: _jsx(ContentContainer, __assign({ hasError: !!validationError, hasWarning: !!validationWarning, isHighlighted: isHighlighted, expandedFieldWidth: expandedFieldWidth, shouldExpandInput: shouldExpandInput, isReadOnly: isReadOnly, className: "input-content" }, { children: children })) })) })) })));
+    return (_jsx(Wrapper, __assign({ dim: "100%", isLoading: isLoading }, { children: _jsx(TooltipProvider, __assign({ tooltip: validationError || validationWarning }, { children: _jsx(Div, __assign({ dim: "100%" }, { children: _jsx(ContentContainer, __assign({ hasError: !!validationError, hasWarning: !!validationWarning, isHighlighted: isHighlighted, expandedFieldWidth: expandedFieldWidth, defaultFieldWidth: defaultFieldWidth, shouldExpandInput: shouldExpandInput, isReadOnly: isReadOnly, className: "input-content" }, { children: children })) })) })) })));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/lib/esm/Importer/common/Spreadsheet/components/fields/utils.d.ts

@@ -0,0 +1,11 @@
+import { FieldTypes, Record } from "../../../../../types";
+export declare const AVERAGE_CHAR_SIZE = 11;
+interface FieldProps {
+    record: Record;
+    name: string;
+    fieldType: FieldTypes;
+    isTooltipOpened: boolean;
+    avgCharSize?: number;
+}
+export declare const getFieldContentWidth: ({ record, fieldType, isTooltipOpened, name, avgCharSize, }: FieldProps) => number;
+export {};

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

@@ -0,0 +1,29 @@
+import { FieldTypes } from "../../../../../types";
+export var AVERAGE_CHAR_SIZE = 11;
+var isFullUppercase = /^[A-Z]*$/;
+export var getFieldContentWidth = function (_a) {
+    var _b, _c, _d, _e;
+    var record = _a.record, fieldType = _a.fieldType, isTooltipOpened = _a.isTooltipOpened, name = _a.name, _f = _a.avgCharSize, avgCharSize = _f === void 0 ? AVERAGE_CHAR_SIZE : _f;
+    var additionalWidth = 5;
+    if (fieldType === FieldTypes.url) {
+        // assuming 90px as an average size of the url prefix
+        // 'https://' have around 50px, but assuming more to prevent some issues
+        additionalWidth += 90;
+    }
+    var transformedRow = (_c = (_b = record._meta) === null || _b === void 0 ? void 0 : _b.transformedRow) === null || _c === void 0 ? void 0 : _c[name];
+    var transformedLength = (_d = String(transformedRow === null || transformedRow === void 0 ? void 0 : transformedRow.transformed)) === null || _d === void 0 ? void 0 : _d.length;
+    var originalLength = (_e = String(transformedRow === null || transformedRow === void 0 ? void 0 : transformedRow.original)) === null || _e === void 0 ? void 0 : _e.length;
+    var transformedHasHigherLength = transformedLength >= originalLength;
+    var transformedIsUppercase = isFullUppercase.test(transformedRow === null || transformedRow === void 0 ? void 0 : transformedRow.transformed);
+    var originalIsUppercase = isFullUppercase.test(transformedRow === null || transformedRow === void 0 ? void 0 : transformedRow.original);
+    if (transformedHasHigherLength) {
+        additionalWidth += transformedIsUppercase ? transformedLength : 0;
+    }
+    else {
+        additionalWidth += originalIsUppercase ? originalLength : 0;
+    }
+    return isTooltipOpened
+        ? Math.max(transformedLength, originalLength) * avgCharSize +
+            additionalWidth
+        : 0 || 0;
+};

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/common/Spreadsheet/transformation/transformators.js

@@ -9,7 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { DateTime } from "luxon";
+import { datePatterns, dateTimePatterns, timePatterns, } from "../../../../common/datePatterns";
 var isTransformationNeeded = function (fieldValue, transformedValue) { return ({
     transformationWasNeeded: fieldValue !== transformedValue,
     original: fieldValue,
@@ -79,29 +89,51 @@ var stringFieldTransformations = {
         return isTransformationNeeded(fieldValue, transformedValue);
     },
 };
+var parseDate = function (date) {
+    if (!date)
+        return null;
+    var allPatterns = __spreadArray(__spreadArray(__spreadArray([], datePatterns, true), dateTimePatterns, true), timePatterns, true);
+    var possibleFormats = allPatterns.map(function (date) { return date.value; });
+    for (var i = 0; i < possibleFormats.length; i++) {
+        var format = possibleFormats[i];
+        try {
+            var currentDate = DateTime.fromFormat(date, format, { zone: "utc" });
+            if (currentDate.isValid) {
+                return currentDate;
+            }
+        }
+        catch (error) {
+            return null;
+        }
+    }
+    return null;
+};
 var datesDateTimesAndTimesTransformations = {
     autoformat: function (fieldValue, _, fieldOptions) {
         var cleanFieldValue = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.replace(/"/g, "");
         var normalizedFieldValue = cleanFieldValue === null || cleanFieldValue === void 0 ? void 0 : cleanFieldValue.replace(/-/g, "/");
         var isUnixTimestamp = /^\d+$/.test(normalizedFieldValue);
-        var JSDate = isUnixTimestamp
-            ? new Date(Number(normalizedFieldValue))
-            : new Date(normalizedFieldValue);
+        var luxonDate = isUnixTimestamp
+            ? DateTime.fromSeconds(Number(normalizedFieldValue))
+            : parseDate(normalizedFieldValue);
         var pattern = fieldOptions === null || fieldOptions === void 0 ? void 0 : fieldOptions.pattern;
         var defaultObj = {
             transformationWasNeeded: false,
             original: fieldValue,
             transformed: null,
         };
-        if (!fieldValue || !pattern || isNotANumber(JSDate.getTime())) {
+        if (!fieldValue || !pattern || !luxonDate || isNaN(luxonDate.toSeconds())) {
             return defaultObj;
         }
-        var luxonDate = DateTime.fromJSDate(JSDate);
         if (!luxonDate.isValid) {
             return defaultObj;
         }
-        var transformedValue = luxonDate === null || luxonDate === void 0 ? void 0 : luxonDate.toFormat(fieldOptions.pattern);
-        return isTransformationNeeded(fieldValue, transformedValue);
+        var transformedValue = luxonDate.toFormat(pattern);
+        return {
+            transformationWasNeeded: fieldValue !== transformedValue,
+            original: fieldValue,
+            transformed: transformedValue,
+        };
     },
 };
 var urlTransformations = {

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/data/index.js

@@ -43,7 +43,7 @@ export var addMeta = function (record, index, uploadedRow, transformedRow) {
     if (transformedRow === void 0) { transformedRow = null; }
     var rId = getRowId(index);
     var meta = (_a = record._meta) !== null && _a !== void 0 ? _a : {};
-    return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { id: rId, rowIndex: index, touched: false, uploadedRow: uploadedRow, transformedRow: transformedRow }) });
+    return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { id: rId, rowIndex: index, touched: false, uploadedRow: uploadedRow, transformedRow: __assign(__assign({}, meta.transformedRow), transformedRow) }) });
 };
 export var recordListToDataSet = function (data, fields) {
     var fieldWithTransformations = fields.filter(function (field) { var _a; return ((_a = field === null || field === void 0 ? void 0 : field.transformations) === null || _a === void 0 ? void 0 : _a.length) > 0; });
@@ -64,6 +64,20 @@ export var recordListToDataSet = function (data, fields) {
         return dataSet;
     }, {});
 };
+var compareFormattedRecord = function (originalRecord, formattedRecord) {
+    var comparisonResult = {};
+    for (var key in formattedRecord) {
+        if (formattedRecord.hasOwnProperty(key)) {
+            if (formattedRecord[key] !== originalRecord[key]) {
+                comparisonResult[key] = {
+                    original: originalRecord[key],
+                    transformed: formattedRecord[key],
+                };
+            }
+        }
+    }
+    return comparisonResult;
+};
 export var transformToRecords = function (_a) {
     var templateHeaderMatchings = _a.templateHeaderMatchings, enumFieldValueMatchings = _a.enumFieldValueMatchings, templateHeaders = _a.templateHeaders, uploadedDataHeaders = _a.uploadedDataHeaders, uploadedData = _a.uploadedData, formatRecord = _a.formatRecord;
     var matchedColumnsLabels = Object.keys(templateHeaderMatchings)
@@ -92,7 +106,13 @@ export var transformToRecords = function (_a) {
                 return;
             record[key] = parseValue(FieldTypes[header.column_type], value, enumSet);
         });
-        return formatRecord ? formatRecord(record) : record;
+        if (formatRecord) {
+            var formattedRecord = formatRecord(record);
+            var comparisonResult = compareFormattedRecord(record, formattedRecord);
+            record._meta.transformedRow = comparisonResult;
+            return formattedRecord;
+        }
+        return record;
     };
     return uploadedData.map(getRecord);
 };

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;