fuse-importer 0.0.4-testing → 0.0.6-testing

package/lib/esm/Importer/Review/ReviewContextProvider.js

@@ -67,7 +67,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
-import { utils, writeFile } from "xlsx";
+import Papa from "papaparse";
 import { AppLoading } from "../common/AppLoading";
 import { isRecordEmpty } from "../common/Spreadsheet/common";
 import { sendRecordsToIntegrations } from "../common/utils";
@@ -108,6 +108,15 @@ var filterAndMapWithBackendErrors = function (dataSet, errors) {
         return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { isInvalid: true, backendErrors: errors[rId] }) });
     }, []);
 };
+function downloadCsv(data, fileName) {
+    var blob = new Blob([data], { type: "text/csv;charset=utf-8;" });
+    var link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}
 function csvExport(data) {
     var valuesWithQuotesWhenNecessary = data.map(function (obj) {
         var newObj = {};
@@ -118,11 +127,8 @@ function csvExport(data) {
         }
         return newObj;
     });
-    var worksheet = utils.json_to_sheet(valuesWithQuotesWhenNecessary);
-    var workbook = utils.book_new();
-    utils.book_append_sheet(workbook, worksheet, "Data");
-    utils.sheet_to_csv(worksheet);
-    writeFile(workbook, "export.csv");
+    var csv = Papa.unparse(valuesWithQuotesWhenNecessary);
+    downloadCsv(csv, "export.csv");
 }
 export var ReviewContextProvider = function (_a) {
     var initialRecords = _a.initialRecords, children = _a.children;

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

@@ -25,6 +25,7 @@ import { Button } from "../../../common/buttons";
 import { DragAndDropSvg, UploadIndicatorSvg } from "./backgrounds";
 import { useTranslation } from "react-i18next";
 import Papa from "papaparse";
+import * as XLSX from "xlsx";
 var DragAndDropCard = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  margin-right: ", ";\n  width: 100%;\n  height: 100%;\n  display: flex;\n  background: ", ";\n  border: 1px dashed ", ";\n\n  @media (max-width: 1050px) {\n    padding: 24px;\n    width: auto;\n  }\n\n  ", "\n"], ["\n  border-radius: 8px;\n  margin-right: ", ";\n  width: 100%;\n  height: 100%;\n  display: flex;\n  background: ", ";\n  border: 1px dashed ", ";\n\n  @media (max-width: 1050px) {\n    padding: 24px;\n    width: auto;\n  }\n\n  ", "\n"])), function (props) { return (props.isDragActive ? "-10px" : "revert"); }, theme.colors.white, theme.colors.red50, function (props) {
     return props.isDragActive && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      border: 1px solid ", ";\n      justify-content: center;\n    "], ["\n      background: ", ";\n      border: 1px solid ", ";\n      justify-content: center;\n    "])), function (p) { return p.theme.colors.blue100; }, function (p) { return p.theme.colors.blue500; });
 });
@@ -62,12 +63,26 @@ var ImporterDropzone = function () {
             reader.onload = function (event) {
                 var _a;
                 var results = event.target.result;
+                var isCsvFile = file.type === "text/csv";
+                // rounded value to 20MB
+                var isLargeFile = file.size > 20000000;
                 var getDataFromFile = function (fileResults) {
-                    var csvString = new TextDecoder().decode(fileResults instanceof ArrayBuffer
-                        ? fileResults
-                        : new TextEncoder().encode(fileResults));
-                    var data = Papa.parse(csvString).data;
-                    return data;
+                    if (isCsvFile) {
+                        var csvString = new TextDecoder().decode(fileResults instanceof ArrayBuffer
+                            ? fileResults
+                            : new TextEncoder().encode(fileResults));
+                        var data = Papa.parse(csvString).data;
+                        return data;
+                    }
+                    var workBook = XLSX.read(fileResults, {
+                        type: "array",
+                        codepage: 65001,
+                        raw: true,
+                        dense: isLargeFile,
+                    });
+                    var workBookName = workBook.SheetNames[0];
+                    var sheet = workBook.Sheets[workBookName];
+                    return XLSX.utils.sheet_to_json(sheet, { header: 1, raw: false });
                 };
                 var fileData = getDataFromFile(results);
                 var headersCount = (_a = fileData[0]) === null || _a === void 0 ? void 0 : _a.length;
@@ -98,7 +113,7 @@ var ImporterDropzone = function () {
         onDropRejected: onDropRejected,
         noClick: true,
         noKeyboard: true,
-        accept: ".csv, .tsv, .xls, .xlsx",
+        accept: ".csv, .xls, .xlsx",
         maxFiles: 1,
         maxSize: 200000000, // 200MB
     }), getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, open = _b.open, isDragActive = _b.isDragActive;

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;
 };