fuse-importer 0.0.5-testing → 0.0.7-testing

package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterDropzone.js

@@ -44,7 +44,7 @@ var ImporterDropzone = function () {
     var _a = useUploaderContext(), setIsUploading = _a.setIsUploading, setFileName = _a.setFileName;
     var setUploadedData = useImporterContext().setUploadedData;
     var validHeadersCount = function (headersLength) {
-        var headersCountLimit = 60;
+        var headersCountLimit = 70;
         if (headersLength > headersCountLimit) {
             addToast("File cannot contain more than ".concat(headersCountLimit, " columns"), "error");
             return false;

package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/index.d.ts

@@ -37,6 +37,8 @@ type State = {
     isFiltering: boolean;
     sortBy: SortBy | null;
     setSortBy: React.Dispatch<React.SetStateAction<SortBy>>;
+    setIsTransformTooltipOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    isTransformTooltipOpened: boolean;
 } & ValidationState;
 type Props = SpreadsheetProps & {
     children: JSX.Element;

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

@@ -53,8 +53,9 @@ export var SpreadsheetContextProvider = function (_a) {
     var _g = useState(""), filteredInputValue = _g[0], setFilteredInputValue = _g[1];
     var _h = useState(null), sortBy = _h[0], setSortBy = _h[1];
     var addRowTimeoutRef = useRef(null);
-    var _j = useSpreadsheetFilter(), spreadsheetFilter = _j.spreadsheetFilter, filterRecordsByRowType = _j.filterRecordsByRowType, filterRecordsByFieldErrors = _j.filterRecordsByFieldErrors, resetSpreadsheetFilter = _j.resetSpreadsheetFilter;
-    var _k = useValidationState({
+    var _j = useState(false), isTransformTooltipOpened = _j[0], setIsTransformTooltipOpened = _j[1];
+    var _k = useSpreadsheetFilter(), spreadsheetFilter = _k.spreadsheetFilter, filterRecordsByRowType = _k.filterRecordsByRowType, filterRecordsByFieldErrors = _k.filterRecordsByFieldErrors, resetSpreadsheetFilter = _k.resetSpreadsheetFilter;
+    var _l = useValidationState({
         dataSet: dataSet,
         initialDataSet: initialDataSet,
         fields: fields,
@@ -63,7 +64,7 @@ export var SpreadsheetContextProvider = function (_a) {
         setDataSet: setDataSet,
         setIsLoading: setIsLoading,
         onValidateRecord: onValidateRecord,
-    }), updateRecordAndRevalidate = _k.updateRecordAndRevalidate, deleteRecords = _k.deleteRecords, warnings = _k.warnings, errors = _k.errors, validationState = __rest(_k, ["updateRecordAndRevalidate", "deleteRecords", "warnings", "errors"]);
+    }), updateRecordAndRevalidate = _l.updateRecordAndRevalidate, deleteRecords = _l.deleteRecords, warnings = _l.warnings, errors = _l.errors, validationState = __rest(_l, ["updateRecordAndRevalidate", "deleteRecords", "warnings", "errors"]);
     var addNewRowsToSpreadsheet = function () {
         addRowTimeoutRef.current = setTimeout(function () {
             var _a, _b;
@@ -169,7 +170,7 @@ export var SpreadsheetContextProvider = function (_a) {
             return updatedData;
         });
     }, [dataSet, dataSnapshot]);
-    var value = __assign(__assign({ data: updatedDataSnapshot, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, options: options, recordsWithValuesCount: recordsWithValuesCount, filteredDataCount: filteredDataCount, sortBy: sortBy, warnings: warnings, errors: errors, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, setSortByFieldWarnings: handleSortByFieldWarnings, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows, deleteRecords: handleDeleteErrors, filteredInputValue: filteredInputValue, setFilteredInputValue: setFilteredInputValue, lastClickedIndexRef: lastClickedIndexRef, addNewRowsToSpreadsheet: addNewRowsToSpreadsheet, spreadsheetFilter: spreadsheetFilter, resetSpreadsheetFilter: resetSpreadsheetFilter, filterRecordsByRowType: filterRecordsByRowType, filterRecordsByFieldErrors: filterRecordsByFieldErrors, checkboxColumnWidth: checkboxColumnWidth, setSortBy: setSortBy, isFiltering: isFiltering });
+    var value = __assign(__assign({ data: updatedDataSnapshot, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, options: options, recordsWithValuesCount: recordsWithValuesCount, filteredDataCount: filteredDataCount, sortBy: sortBy, warnings: warnings, errors: errors, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, setSortByFieldWarnings: handleSortByFieldWarnings, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows, deleteRecords: handleDeleteErrors, filteredInputValue: filteredInputValue, setFilteredInputValue: setFilteredInputValue, lastClickedIndexRef: lastClickedIndexRef, addNewRowsToSpreadsheet: addNewRowsToSpreadsheet, spreadsheetFilter: spreadsheetFilter, resetSpreadsheetFilter: resetSpreadsheetFilter, filterRecordsByRowType: filterRecordsByRowType, filterRecordsByFieldErrors: filterRecordsByFieldErrors, checkboxColumnWidth: checkboxColumnWidth, setSortBy: setSortBy, isFiltering: isFiltering, setIsTransformTooltipOpened: setIsTransformTooltipOpened, isTransformTooltipOpened: isTransformTooltipOpened });
     return (_jsx(SpreadsheetContext.Provider, __assign({ value: value }, { children: children })));
 };
 export var useSpreadsheetContext = function () { return useContext(SpreadsheetContext); };

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

@@ -77,8 +77,8 @@ var SpreadsheetData = function (props) {
             Header: function () { return (_jsx(FieldHeader, { field: field, sortByFieldErrors: setSortByFieldErrors, sortByFieldWarnings: setSortByFieldWarnings })); },
             Content: function (record) {
                 var Input = inputTypes[field.type];
-                var rowIndex = record.rowIndex, recordProp = __rest(record, ["rowIndex"]);
-                return (_jsx(Input, { id: "".concat(field.name, "-").concat(rowIndex), fieldType: field.type, name: field.name, options: field.options, record: recordProp }));
+                var rowIndex = record.rowIndex, columnWidth = record.columnWidth, recordProp = __rest(record, ["rowIndex", "columnWidth"]);
+                return (_jsx(Input, { id: "".concat(field.name, "-").concat(rowIndex), fieldType: field.type, name: field.name, options: field.options, record: recordProp, columnWidth: columnWidth }));
             },
         }); });
     }, [fields, setSortByFieldErrors]);

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

@@ -9,5 +9,6 @@ export type SpreadsheetAutocompleteProps = {
     isInputDisabled?: boolean;
     fieldType: FieldTypes;
     id?: string;
+    columnWidth?: string;
 };
 export declare const SpreadsheetAutocomplete: React.FC<SpreadsheetAutocompleteProps>;

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

@@ -20,6 +20,7 @@ import { Autocomplete as AutocompleteBase, } from "../../../../../common/inputs/
 import { SelectMenuDiv, SelectMenuScrollArea, } from "../../../../../common/inputs/SelectMenu";
 import { HTMLInput, TextInputIcon, } from "../../../../../common/inputs/TextInput";
 import { spreadsheetRowHeightPx } from "../../common";
+import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
 var Autocomplete = styled(AutocompleteBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", " {\n    border: none;\n    border-radius: 0;\n    margin: 0;\n    background: transparent;\n    height: ", "px;\n    padding: 0 12px;\n\n    ", "\n\n    ::placeholder {\n      ", "\n\n      ", "\n\n        ::placeholder {\n        ", "\n      }\n    }\n\n    :focus {\n      border: none;\n      box-shadow: none;\n    }\n\n    :hover {\n      background: transparent;\n    }\n  }\n  ", " {\n    right: 6px;\n  }\n  ", " {\n    border-radius: 7px;\n  }\n  ", " {\n    padding: 4px;\n  }\n"], ["\n  ", " {\n    border: none;\n    border-radius: 0;\n    margin: 0;\n    background: transparent;\n    height: ", "px;\n    padding: 0 12px;\n\n    ", "\n\n    ::placeholder {\n      ", "\n\n      ", "\n\n        ::placeholder {\n        ", "\n      }\n    }\n\n    :focus {\n      border: none;\n      box-shadow: none;\n    }\n\n    :hover {\n      background: transparent;\n    }\n  }\n  ", " {\n    right: 6px;\n  }\n  ", " {\n    border-radius: 7px;\n  }\n  ", " {\n    padding: 4px;\n  }\n"])), HTMLInput, spreadsheetRowHeightPx - 5, function (p) {
     return p.hasWarning && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), function (p) { return p.theme.colors.orange1200; });
 }, function (p) {
@@ -30,9 +31,13 @@ var Autocomplete = styled(AutocompleteBase)(templateObject_5 || (templateObject_
     return p.hasError && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            color: ", ";\n          "], ["\n            color: ", ";\n          "])), function (p) { return p.theme.colors.error; });
 }, TextInputIcon, SelectMenuDiv, SelectMenuScrollArea);
 export var SpreadsheetAutocomplete = function (props) {
-    var name = props.name, record = props.record, options = props.options, fieldType = props.fieldType, _a = props.isInputDisabled, isInputDisabled = _a === void 0 ? false : _a, id = props.id;
-    var _b = useSpreadsheetField(name, record, fieldType), value = _b.value, setValue = _b.setValue, validationError = _b.validationError, validationWarning = _b.validationWarning;
-    return (_jsx(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning }, { children: _jsx(Autocomplete, { placement: "bottom", isInputDisabled: isInputDisabled, hasError: !!validationError, hasWarning: !!validationWarning, options: options, value: value, icon: chevronDownIcon, onChange: function (v) { return setValue(v); }, id: id }) })));
+    var _a, _b, _c;
+    var name = props.name, record = props.record, options = props.options, fieldType = props.fieldType, _d = props.isInputDisabled, isInputDisabled = _d === void 0 ? false : _d, id = props.id;
+    var _e = useSpreadsheetField(name, record, fieldType), value = _e.value, setValue = _e.setValue, validationError = _e.validationError, validationWarning = _e.validationWarning;
+    var isTransformTooltipOpened = useSpreadsheetContext().isTransformTooltipOpened;
+    var isHighlighted = isTransformTooltipOpened &&
+        ((_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.transformed);
+    return (_jsx(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning, isHighlighted: isHighlighted }, { children: _jsx(Autocomplete, { placement: "bottom", isInputDisabled: isInputDisabled, hasError: !!validationError, hasWarning: !!validationWarning, options: options, value: value, icon: chevronDownIcon, onChange: function (v) { return !isTransformTooltipOpened && setValue(v); }, disabledWhen: isTransformTooltipOpened, id: id }) })));
 };
 var chevronDownIcon = (_jsx("svg", __assign({ width: "10", height: "6", viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M8.46289 1L4.98131 4.48159L1.49972 1", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -4,9 +4,11 @@ export type SpreadsheetTextInputArgs = {
     name: string;
     record: Record;
     fieldType: FieldTypes;
+    columnWidth?: string;
 } & HTMLInputCSSProps;
-export declare const SpreadsheetInput: ({ name, record, fieldType, ...props }: SpreadsheetTextInputArgs) => JSX.Element;
+export declare const SpreadsheetInput: ({ name, record, fieldType, columnWidth, ...props }: SpreadsheetTextInputArgs) => JSX.Element;
 export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
     hasError: boolean;
     hasWarning?: boolean;
+    fitContent?: boolean;
 } & import("../../../../../styled/utils").HTMLInputProps & import("../../../../../styled/utils").CSSProps, never>;

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

@@ -24,20 +24,47 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import styled, { css } from "styled-components";
 import { SpreadsheetField, useSpreadsheetField } from ".";
+import { Div } from "../../../../../styled/utils";
+import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
 export var SpreadsheetInput = function (_a) {
-    var name = _a.name, record = _a.record, fieldType = _a.fieldType, props = __rest(_a, ["name", "record", "fieldType"]);
-    var _b = useSpreadsheetField(name, record, fieldType), value = _b.value, setValue = _b.setValue, validationError = _b.validationError, validationWarning = _b.validationWarning;
-    return (_jsx(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning }, { children: _jsx(Input, __assign({ hasError: !!validationError, hasWarning: !!validationWarning, value: value || "", onChange: function (_a) {
-                var value = _a.target.value;
-                return setValue(value);
-            } }, props)) })));
+    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 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", ""));
+        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) {
+                    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 })))] })));
 };
-export var Input = styled.input(templateObject_3 || (templateObject_3 = __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_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.orange1200; });
+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"])));
+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) {
-    return p.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.error; });
+    return p.hasError && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.error; });
 });
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FieldTypes, Record } from "../../../../../types";
 export declare const useSpreadsheetField: (name: string, record: Record, fieldType: FieldTypes) => {
     value: any;
@@ -5,8 +6,13 @@ export declare const useSpreadsheetField: (name: string, record: Record, fieldTy
     validationError: any;
     validationWarning: any;
 };
-export declare const SpreadsheetField: ({ validationError, validationWarning, children, }: {
-    validationError: any;
-    validationWarning: any;
-    children: any;
-}) => JSX.Element;
+type SpreadsheetFieldProps = {
+    validationError: string | JSX.Element;
+    validationWarning: string | JSX.Element;
+    children: React.ReactNode;
+    isHighlighted?: boolean;
+    expandedFieldWidth?: string;
+    shouldExpandInput?: boolean;
+};
+export declare const SpreadsheetField: ({ validationError, validationWarning, children, isHighlighted, expandedFieldWidth, shouldExpandInput, }: SpreadsheetFieldProps) => JSX.Element;
+export {};

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

@@ -75,22 +75,34 @@ export var useSpreadsheetField = function (name, record, fieldType) {
         setValue(value);
         updateData(value);
     }, [record, updateData]);
-    return { value: value, setValue: updateValue, validationError: validationError, validationWarning: validationWarning };
+    return {
+        value: value,
+        setValue: updateValue,
+        validationError: validationError,
+        validationWarning: validationWarning,
+    };
 };
-var ContentContainer = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: calc(100% - 1px);\n  width: 100%;\n  ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  height: calc(100% - 1px);\n  width: 100%;\n  ", ";\n  ", "\n  ", "\n  ", "\n"])), function (p) { return p.theme.css.alignCenter; }, function (p) {
-    return p.hasWarning && css(templateObject_1 || (templateObject_1 = __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; });
+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
+        ? theme.colors.white
+        : theme.colors.blue100);
+}, 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; });
+}, 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; });
 }, function (p) {
-    return p.hasError && css(templateObject_2 || (templateObject_2 = __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_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; });
 }, function (p) {
-    return p.isReadOnly && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
+    return p.isReadOnly && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 });
 var Wrapper = styled(Div)(function (_a) {
     var isLoading = _a.isLoading;
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), isLoading && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "]))));
+    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    "]))));
 });
 export var SpreadsheetField = function (_a) {
-    var validationError = _a.validationError, validationWarning = _a.validationWarning, children = _a.children;
+    var validationError = _a.validationError, validationWarning = _a.validationWarning, children = _a.children, isHighlighted = _a.isHighlighted, expandedFieldWidth = _a.expandedFieldWidth, shouldExpandInput = _a.shouldExpandInput;
     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, 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, shouldExpandInput: shouldExpandInput, isReadOnly: isReadOnly, className: "input-content" }, { children: children })) })) })) })));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -115,7 +115,6 @@ export var useValidationState = function (_a) {
     useEffect(function () {
         if (!initialDataSet || isReadOnly)
             return;
-        var isCancelled = false;
         setIsLoading(true);
         var initialValidation = function () { return __awaiter(void 0, void 0, void 0, function () {
             var errors, warnings, initialData, length, _a, batchValidationDelayMs, _b, batchValidationSize, batchSize, batchCount, batchIdx, idx, batch, index, record, recordId, _c, recordErrors, recordWarnings, hasError, hasWarning, validationPercentage_1;
@@ -133,16 +132,12 @@ export var useValidationState = function (_a) {
                         _d.label = 1;
                     case 1:
                         if (!(batchIdx < batchCount)) return [3 /*break*/, 8];
-                        if (isCancelled)
-                            return [2 /*return*/];
                         idx = batchIdx * batchSize;
                         batch = initialData.slice(idx, idx + batchSize);
                         index = 0;
                         _d.label = 2;
                     case 2:
                         if (!(index < batch.length)) return [3 /*break*/, 5];
-                        if (isCancelled)
-                            return [2 /*return*/];
                         record = batch[index];
                         recordId = record._meta.id;
                         return [4 /*yield*/, validateRecord({
@@ -199,16 +194,12 @@ export var useValidationState = function (_a) {
                     case 2: return [4 /*yield*/, initialValidation()];
                     case 3:
                         _a.sent();
-                        if (!isCancelled)
-                            setIsLoading(false);
+                        setIsLoading(false);
                         setIsLoadingApp(false);
                         return [2 /*return*/];
                 }
             });
         }); })();
-        return function () {
-            isCancelled = true;
-        };
     }, [initialDataSet]);
     var columnErrorCounts = useMemo(function () {
         return Object.keys(errors).reduce(function (errorsByColumns, rowId) {

package/lib/esm/Importer/common/Spreadsheet/transformation/index.d.ts

@@ -1,7 +1,7 @@
-import { Field, Record } from "../../../../types";
+import { Field, Record, TransformedRecord } from "../../../../types";
 type TransformRecordArgs = {
     record: Record;
     fields: Field[];
 };
-export declare function transformRecord({ record, fields }: TransformRecordArgs): void;
+export declare const transformRecord: ({ record, fields }: TransformRecordArgs) => TransformedRecord;
 export {};

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

@@ -4,22 +4,44 @@ var runTransformation = function (record, transformation, field) {
     var transformerFunction = fieldTransformations[transformationType];
     return transformerFunction(record, transformation, field);
 };
-export function transformRecord(_a) {
+export var transformRecord = function (_a) {
     var record = _a.record, fields = _a.fields;
-    for (var key in fields) {
-        var currentField = fields[key];
-        var fieldTransformations_1 = currentField === null || currentField === void 0 ? void 0 : currentField.transformations;
-        var fieldToBeTransformed = record === null || record === void 0 ? void 0 : record[currentField === null || currentField === void 0 ? void 0 : currentField.name];
+    var transformedRecords = {};
+    for (var _i = 0, fields_1 = fields; _i < fields_1.length; _i++) {
+        var currentField = fields_1[_i];
+        var fieldTransformations_1 = currentField.transformations;
+        var fieldToBeTransformed = record[currentField.name];
         if (!fieldTransformations_1 ||
-            (fieldTransformations_1 === null || fieldTransformations_1 === void 0 ? void 0 : fieldTransformations_1.length) === 0 ||
-            !fieldToBeTransformed) {
+            fieldTransformations_1.length === 0 ||
+            fieldToBeTransformed === undefined) {
             continue;
         }
-        var transformedField = fieldToBeTransformed;
+        var transformedField = {
+            original: fieldToBeTransformed,
+            transformed: fieldToBeTransformed,
+        };
+        var fieldWasTransformed = false;
         for (var i = 0; i < fieldTransformations_1.length; i++) {
             var currentTransformation = fieldTransformations_1[i];
-            transformedField = runTransformation(transformedField, currentTransformation, currentField);
+            var transformed = runTransformation(transformedField.transformed, currentTransformation, currentField);
+            if (transformed.transformationWasNeeded) {
+                fieldWasTransformed = true;
+                transformedField = {
+                    original: transformedField.original,
+                    transformed: transformed.transformed,
+                };
+            }
         }
-        record[currentField.name] = transformedField;
+        if (!fieldWasTransformed) {
+            continue;
+        }
+        // the data have changed
+        record[currentField.name] = transformedField.transformed;
+        transformedRecords[currentField.name] = {
+            original: transformedField.original,
+            transformed: transformedField.transformed,
+        };
     }
-}
+    var isTransformedRecordsEmpty = Object.keys(transformedRecords).length === 0;
+    return isTransformedRecordsEmpty ? null : transformedRecords;
+};

package/lib/esm/Importer/common/Spreadsheet/transformation/transformators.d.ts

@@ -1,8 +1,12 @@
 import { Field, FieldTransformation } from "../../../../types";
-export type FieldValidator = (fieldValue: any, transformation?: FieldTransformation, fieldOptions?: Field) => null | any;
+export type FieldTransformator = (fieldValue: any, transformation?: FieldTransformation, fieldOptions?: Field) => {
+    transformationWasNeeded: boolean;
+    original: any;
+    transformed: any;
+};
 export type FieldTransformations = Partial<{
-    [key: string]: FieldValidator;
+    [key: string]: FieldTransformator;
 }>;
 export declare const fieldTransformations: {
-    [x: string]: FieldValidator;
+    [x: string]: FieldTransformator;
 };