fuse-importer 0.27.0 → 0.30.0

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

@@ -23,31 +23,36 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { areEqual } from "react-window";
+import { useImporterContext } from "../../../../Importer/contexts/ImporterContextProvider";
+import { TableActions } from "../../../../common/Table/TableActions";
 import { Div } from "../../../../styled/utils";
+import useWindowDimensions from "../../../../utils/hooks/useWindowSize";
 import { getTableHeight } from "../../../common";
-import { spreadsheetHeaderHeightPx, spreadsheetRowHeightPx } from "../common";
+import { useDataSetContext } from "../DataSetContextProvider";
+import { useFilteredDataContext } from "../FilteredDataContextProvider";
 import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
+import { useValidationContext } from "../ValidationContextProvider";
+import { spreadsheetHeaderHeightPx, spreadsheetRowHeightPx } from "../common";
 import * as S from "../styles";
 import { FieldHeader } from "./FieldHeader";
 import GlobalStyle from "./GlobalStyle";
-import { inputTypes } from "./inputs";
 import { SpreadsheetRowCheckboxes } from "./SpreadsheetRowCheckboxes";
-import ValidationProgress from "./ValidationProgress";
-import { TableActions } from "../../../../common/Table/TableActions";
-import { useImporterContext } from "../../../../Importer/contexts/ImporterContextProvider";
-import useWindowDimensions from "../../../../utils/hooks/useWindowSize";
+import { inputTypes } from "./inputs";
 var getItemKey = function (record) { return record._meta.id; };
 var SpreadsheetData = function (props) {
-    var _a = useSpreadsheetContext(), fields = _a.fields, data = _a.data, isLoading = _a.isLoading, isReadOnly = _a.isReadOnly, totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage, setSortByFieldErrors = _a.setSortByFieldErrors, options = _a.options, setSortByFieldWarnings = _a.setSortByFieldWarnings, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows, checkboxColumnWidth = _a.checkboxColumnWidth, isFiltering = _a.isFiltering;
+    var _a = useSpreadsheetContext(), fields = _a.fields, filteredDataIds = _a.filteredDataIds, isReadOnly = _a.isReadOnly, options = _a.options, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows, checkboxColumnWidth = _a.checkboxColumnWidth;
+    var _b = useFilteredDataContext(), isFiltering = _b.isFiltering, handleSortByFieldErrors = _b.handleSortByFieldErrors;
+    var validationPercentage = useValidationContext().validationPercentage;
+    var dataSet = useDataSetContext().dataSet;
     var currentStepIndex = useImporterContext().currentStepIndex;
     var isOnSmallScreens = useWindowDimensions().isOnSmallScreens;
     var canShowCheckboxOnCheckboxRowHover = currentStepIndex === 2;
     var rowNumbersGridRef = useRef();
     var rowCheckboxesGridRef = useRef();
     useEffect(function () {
-        if (data.length > 0 && options.withSingleRowSelect)
-            setSelectedRows([data === null || data === void 0 ? void 0 : data[0]._meta.id]);
-    }, [options.withSingleRowSelect]);
+        if (filteredDataIds.length > 0 && options.withSingleRowSelect)
+            setSelectedRows([filteredDataIds === null || filteredDataIds === void 0 ? void 0 : filteredDataIds[0]]);
+    }, [options.withSingleRowSelect, filteredDataIds]);
     var rowWidthScalingFactor = (function () {
         // Spreadsheet will display 6 columns on the viewport and a small portion of the
         // 7th column in the right side to let the user know they can scroll horizontally
@@ -74,14 +79,14 @@ var SpreadsheetData = function (props) {
     })();
     var columns = useMemo(function () {
         return fields.map(function (field) { return ({
-            Header: function () { return (_jsx(FieldHeader, { field: field, sortByFieldErrors: setSortByFieldErrors, sortByFieldWarnings: setSortByFieldWarnings })); },
+            Header: function () { return _jsx(FieldHeader, { field: field }); },
             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]);
+    }, [fields, handleSortByFieldErrors, dataSet.current]);
     var onTableScroll = useCallback(function (scrollTop) {
         if (rowNumbersGridRef.current) {
             var grid = rowNumbersGridRef.current;
@@ -92,7 +97,7 @@ var SpreadsheetData = function (props) {
             grid.scrollTo({ scrollTop: scrollTop });
         }
     }, []);
-    var dataLength = data === null || data === void 0 ? void 0 : data.length;
+    var dataLength = filteredDataIds.length;
     var spreadsheetHeight = useMemo(function () {
         return getTableHeight({
             headerHeight: spreadsheetHeaderHeightPx,
@@ -104,7 +109,10 @@ var SpreadsheetData = function (props) {
     }, [dataLength]);
     var showValidationProgress = !isReadOnly && validationPercentage < 100;
     var isReviewStep = currentStepIndex === 2;
-    return (_jsxs(S.SpreadSheetData, __assign({ h100: true, flexColumn: true, className: props.className }, { children: [_jsx(GlobalStyle, {}), showValidationProgress && (_jsx(Div, __assign({ h: 32 }, { children: _jsx(ValidationProgress, { totalErrors: totalErrors, validationPercentage: validationPercentage }) }))), _jsxs(S.SpreadSheetContainer, __assign({ flexColumn: true, w100: true, h100: true }, { children: [_jsx(Div, __assign({ w100: true, justifyCenter: true }, { children: isReviewStep && _jsx(TableActions, {}) })), _jsxs(S.SpreadSheetWrapper, __assign({ canShowCheckboxOnHover: !showValidationProgress && canShowCheckboxOnCheckboxRowHover, shouldShowOnlyCheckbox: (!showValidationProgress && selectedRows.length > 0) ||
-                            currentStepIndex === 0, dflex: true, h100: true }, { children: [(options === null || options === void 0 ? void 0 : options.showCheckboxColumn) && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, height: spreadsheetHeight, isLoadingData: showValidationProgress })), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, rowHeight: spreadsheetRowHeightPx, h: null, rowWidthScalingFactor: rowWidthScalingFactor, data: data, columns: columns, isLoading: isLoading, onTableScroll: onTableScroll, getItemKey: getItemKey, checkboxColumnWidth: checkboxColumnWidth, isFiltering: isFiltering })] }))] }))] })));
+    return (_jsxs(S.SpreadSheetData, __assign({ h100: true, flexColumn: true, className: props.className }, { children: [_jsx(GlobalStyle, {}), _jsxs(S.SpreadSheetContainer, __assign({ flexColumn: true, w100: true, h100: true }, { children: [_jsx(Div, __assign({ w100: true, justifyCenter: true }, { children: isReviewStep && _jsx(TableActions, {}) })), _jsxs(S.SpreadSheetWrapper, __assign({ canShowCheckboxOnHover: !showValidationProgress && canShowCheckboxOnCheckboxRowHover, shouldShowOnlyCheckbox: (!showValidationProgress && selectedRows.length > 0) ||
+                            currentStepIndex === 0, dflex: true, h100: true }, { children: [(options === null || options === void 0 ? void 0 : options.showCheckboxColumn) && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, height: spreadsheetHeight, isLoadingData: showValidationProgress })), _jsx(S.TableView, { rowCount: filteredDataIds.length, tableHeadersHeight: spreadsheetHeaderHeightPx, rowHeight: spreadsheetRowHeightPx, h: null, rowWidthScalingFactor: rowWidthScalingFactor, dataRefIds: {
+                                    ref: dataSet,
+                                    ids: filteredDataIds,
+                                }, columns: columns, onTableScroll: onTableScroll, getItemKey: getItemKey, checkboxColumnWidth: checkboxColumnWidth, isFiltering: isFiltering, shouldHideTable: dataLength === 0 })] }))] }))] })));
 };
 export default React.memo(SpreadsheetData, areEqual);

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

@@ -35,15 +35,18 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
+import ReactVirtualizedAutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeGrid as Grid } from "react-window";
 import styled, { css } from "styled-components";
+import { Checkbox } from "../../../../common/inputs/Checkbox";
 import { Div } from "../../../../styled/utils";
+import { useReviewContext } from "../../../Review/ReviewContextProvider";
+import { useImporterContext } from "../../../contexts/ImporterContextProvider";
+import { useDataSetContext } from "../DataSetContextProvider";
+import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
+import { rowIsEmpty } from "../SpreadsheetContextProvider/utils";
 import { spreadsheetRowHeightPx } from "../common";
 import { spreadsheetHeaderHeightPx } from "../common/index";
-import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
-import { Checkbox } from "../../../../common/inputs/Checkbox";
-import { useImporterContext } from "../../../contexts/ImporterContextProvider";
-import ReactVirtualizedAutoSizer from "react-virtualized-auto-sizer";
 var StyledGrid = styled(Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  overflow-y: scroll;\n"], ["\n  background: ", ";\n  overflow-y: scroll;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.white50;
@@ -54,57 +57,58 @@ var gridStyles = {
     overflowY: "hidden",
     overflowX: "scroll",
 };
-var rowIsEmpty = function (row) {
-    return Object.keys(row).every(function (key) {
-        if (key === "_meta")
-            return true;
-        return !row[key];
-    });
-};
 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(), selectedRows = _b.selectedRows, options = _b.options, filteredDataIds = _b.filteredDataIds, lastClickedIndexRef = _b.lastClickedIndexRef, setSelectedRows = _b.setSelectedRows, checkboxColumnWidth = _b.checkboxColumnWidth;
+    var hasTransformedRecords = useReviewContext().hasTransformedRecords;
+    var getRecord = useDataSetContext().getRecord;
     var currentStepIndex = useImporterContext().currentStepIndex;
-    var nonEmptyRows = useMemo(function () { return data.filter(function (row) { return !rowIsEmpty(row); }); }, [
-        data,
-    ]);
+    var nonEmptyRows = useMemo(function () { return filteredDataIds.filter(function (rowId) { return !rowIsEmpty(getRecord(rowId)); }); }, [filteredDataIds]);
     var isIndeterminate = selectedRows.length > 0 && selectedRows.length < nonEmptyRows.length;
     var handleRowSelect = function (checked, rowIndex, rowMetaId) {
-        var _a, _b;
-        var lastRowMetaId = data[data.length - 1]._meta.id;
-        var isLastRow = rowMetaId === lastRowMetaId;
-        var isLastRowAndEmpty = isLastRow && rowIsEmpty(data[rowIndex]);
+        var _a;
+        if (hasTransformedRecords)
+            return;
+        var recordId = filteredDataIds[rowIndex];
+        var record = getRecord(recordId);
+        var lastRowRecordId = filteredDataIds[filteredDataIds.length - 1];
+        var isLastRow = rowMetaId === lastRowRecordId;
+        var isLastRowAndEmpty = isLastRow && rowIsEmpty(getRecord(lastRowRecordId));
         if (isLastRowAndEmpty)
             return;
         if (options.withSingleRowSelect) {
-            if (!rowIsEmpty(data[rowIndex]))
-                setSelectedRows([(_b = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id]);
+            if (!rowIsEmpty(record))
+                setSelectedRows([(_a = record === null || record === void 0 ? void 0 : record._meta) === null || _a === void 0 ? void 0 : _a.id]);
             return;
         }
         if (checked) {
-            setSelectedRows(function (prev) { var _a, _b; return __spreadArray(__spreadArray([], prev, true), [(_b = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id], false); });
+            setSelectedRows(function (prev) { var _a; return __spreadArray(__spreadArray([], prev, true), [(_a = record === null || record === void 0 ? void 0 : record._meta) === null || _a === void 0 ? void 0 : _a.id], false); });
         }
         else {
             setSelectedRows(function (prev) {
-                return prev.filter(function (row) { var _a, _b; return row !== ((_b = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id); });
+                return prev.filter(function (row) { var _a; return row !== ((_a = record === null || record === void 0 ? void 0 : record._meta) === null || _a === void 0 ? void 0 : _a.id); });
             });
         }
         lastClickedIndexRef.current = rowIndex;
     };
     var handleSelectMultipleRows = function (rowIndex) {
-        var _a, _b;
-        var clickedRowId = (_b = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id;
+        var _a;
+        if (hasTransformedRecords)
+            return;
+        var rowId = filteredDataIds[rowIndex];
+        var record = getRecord(rowId);
+        var clickedRowId = (_a = record === null || record === void 0 ? void 0 : record._meta) === null || _a === void 0 ? void 0 : _a.id;
         if (selectedRows.includes(clickedRowId)) {
             // The clicked row is already selected, so we have to remove it
             var clickedRowIndex = selectedRows.indexOf(clickedRowId);
             var lastClickedIndex = lastClickedIndexRef.current;
             var rangeStartIndex_1 = Math.min(clickedRowIndex, lastClickedIndex);
             var rangeEndIndex_1 = Math.max(clickedRowIndex, lastClickedIndex);
-            var lastRowId_1 = data[data.length - 1]._meta.id;
+            var lastRowId_1 = filteredDataIds[filteredDataIds.length - 1];
             var updatedSelectedRows = selectedRows.filter(function (value, index) {
                 return index < rangeStartIndex_1 ||
                     index > rangeEndIndex_1 ||
-                    (value === lastRowId_1 && rowIsEmpty(data[data.length - 1]));
+                    (value === lastRowId_1 && rowIsEmpty(getRecord(lastRowId_1)));
             });
             setSelectedRows(updatedSelectedRows);
         }
@@ -112,14 +116,14 @@ export var SpreadsheetRowCheckboxes = function (_a) {
             // The clicked row is not selected, so we have to add it
             var lastSelectedRowIndex = selectedRows.length - 1;
             var lastSelectedRowId_1 = selectedRows[lastSelectedRowIndex];
-            var lastSelectedRow = data.find(function (row) { var _a; return ((_a = row === null || row === void 0 ? void 0 : row._meta) === null || _a === void 0 ? void 0 : _a.id) === lastSelectedRowId_1; });
-            var clickedRow = data[rowIndex];
-            var rangeStartIndex = data.indexOf(lastSelectedRow);
-            var rangeEndIndex = data.indexOf(clickedRow);
-            var range = data.slice(Math.min(rangeStartIndex, rangeEndIndex), Math.max(rangeStartIndex, rangeEndIndex) + 1);
-            var rangeIds = range.map(function (row) { return row === null || row === void 0 ? void 0 : row._meta.id; });
-            var lastRowId_2 = data[data.length - 1]._meta.id;
-            var isLastRowEmpty_1 = rowIsEmpty(data[data.length - 1]);
+            var lastSelectedRow = filteredDataIds.find(function (id) { return id === lastSelectedRowId_1; });
+            var clickedRow = filteredDataIds[rowIndex];
+            var rangeStartIndex = filteredDataIds.indexOf(lastSelectedRow);
+            var rangeEndIndex = filteredDataIds.indexOf(clickedRow);
+            var range = filteredDataIds.slice(Math.min(rangeStartIndex, rangeEndIndex), Math.max(rangeStartIndex, rangeEndIndex) + 1);
+            var rangeIds = range.map(function (row) { return row; });
+            var lastRowId_2 = filteredDataIds[filteredDataIds.length - 1];
+            var isLastRowEmpty_1 = rowIsEmpty(getRecord(lastRowId_2));
             var updatedSelectedRows = __spreadArray(__spreadArray([], selectedRows, true), rangeIds, true).filter(function (value, index, array) {
                 return array.indexOf(value) === index &&
                     (value !== lastRowId_2 || (value === lastRowId_2 && !isLastRowEmpty_1));
@@ -129,15 +133,13 @@ export var SpreadsheetRowCheckboxes = function (_a) {
         }
     };
     var handleSelectAllRows = function (checked) {
+        if (hasTransformedRecords)
+            return;
         if (checked) {
-            var allRows = data
-                .filter(function (row) {
-                var isLastRow = row._meta.id === data[data.length - 1]._meta.id;
-                var isLastRowAndEmpty = isLastRow && rowIsEmpty(row);
+            var allRows = filteredDataIds.filter(function (recordId) {
+                var isLastRow = recordId === filteredDataIds[filteredDataIds.length - 1];
+                var isLastRowAndEmpty = isLastRow && rowIsEmpty(getRecord(recordId));
                 return !isLastRowAndEmpty;
-            })
-                .map(function (row) {
-                return row === null || row === void 0 ? void 0 : row._meta.id;
             });
             setSelectedRows(allRows);
         }
@@ -147,9 +149,8 @@ export var SpreadsheetRowCheckboxes = function (_a) {
         lastClickedIndexRef.current = null;
     };
     var CheckboxCell = function (_a) {
-        var _b, _c;
         var rowIndex = _a.rowIndex;
-        var rowMetaId = (_c = (_b = data[rowIndex]) === null || _b === void 0 ? void 0 : _b._meta) === null || _c === void 0 ? void 0 : _c.id;
+        var rowMetaId = filteredDataIds[rowIndex];
         return (_jsx(Div, __assign({ className: "checkbox-cell", "data-test-id": "checkbox-cell-".concat(rowIndex) }, { children: _jsx(Checkbox, { isChecked: rowMetaId && selectedRows.includes(rowMetaId), onChange: function (checked) {
                     return !isLoadingData && handleRowSelect(checked, rowIndex, rowMetaId);
                 }, onShiftKeyPressed: function () {
@@ -163,16 +164,16 @@ export var SpreadsheetRowCheckboxes = function (_a) {
     };
     var Cell = function (_a) {
         var rowIndex = _a.rowIndex, style = _a.style;
-        return (_jsxs(RowCheckbox, __assign({ style: style, alignCenter: true, justifyCenter: true, isLast: rowIndex === data.length - 1 }, { children: [_jsx(CheckboxCell, { rowIndex: rowIndex }), _jsx(RowNumbersCell, { rowIndex: rowIndex })] }), rowIndex));
+        return (_jsxs(RowCheckbox, __assign({ style: style, alignCenter: true, justifyCenter: true, isLast: rowIndex === filteredDataIds.length - 1 }, { children: [_jsx(CheckboxCell, { rowIndex: rowIndex }), _jsx(RowNumbersCell, { rowIndex: rowIndex })] }), rowIndex));
     };
     var isSelectAllRowsChekboxChecked = (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) > 0 &&
-        (data === null || data === void 0 ? void 0 : data.length) > 0 &&
+        (filteredDataIds === null || filteredDataIds === void 0 ? void 0 : filteredDataIds.length) > 0 &&
         (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) >= (nonEmptyRows === null || nonEmptyRows === void 0 ? void 0 : nonEmptyRows.length);
     return (_jsxs(SpreadsheetRowCheckboxesContainer, __assign({ className: "spreadsheet-row-container", columnWidth: checkboxColumnWidth }, props, { h100: true }, { children: [_jsx(SpreadsheetRowCheckboxesHeader, { children: currentStepIndex === 2 && (_jsx(Checkbox, { isChecked: isSelectAllRowsChekboxChecked, onChange: function (checked) {
                         return !isLoadingData && handleSelectAllRows(checked);
                     }, isIndeterminate: isIndeterminate, isDisabled: isLoadingData })) }), _jsx(ReactVirtualizedAutoSizer, { children: function (_a) {
                     var height = _a.height;
-                    return (_jsx(StyledGrid, __assign({ ref: gridRef, style: gridStyles, width: checkboxColumnWidth, columnCount: 1, columnWidth: checkboxColumnWidth, rowHeight: 40, rowCount: data.length, height: height - spreadsheetHeaderHeightPx }, { children: Cell })));
+                    return (_jsx(StyledGrid, __assign({ ref: gridRef, style: gridStyles, width: checkboxColumnWidth, columnCount: 1, columnWidth: checkboxColumnWidth, rowHeight: 40, rowCount: filteredDataIds.length, height: height - spreadsheetHeaderHeightPx }, { children: Cell })));
                 } })] })));
 };
 var RowCheckbox = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n\n  .checkbox-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    visibility: hidden;\n    z-index: 1;\n  }\n\n  .row-numbers-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n"], ["\n  background-color: ", ";\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n\n  .checkbox-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    visibility: hidden;\n    z-index: 1;\n  }\n\n  .row-numbers-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])), function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.label3; }, function (p) {

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

@@ -40,12 +40,12 @@ var gridStyles = {
 };
 export var SpreadsheetRowNumbers = function (_a) {
     var height = _a.height, spreadsheetHasXScroll = _a.spreadsheetHasXScroll, gridRef = _a.gridRef, props = __rest(_a, ["height", "spreadsheetHasXScroll", "gridRef"]);
-    var data = useSpreadsheetContext().data;
+    var filteredDataIds = useSpreadsheetContext().filteredDataIds;
     var Cell = function (_a) {
         var rowIndex = _a.rowIndex, style = _a.style;
-        return (_jsx(RowNumber, __assign({ style: style, alignCenter: true, justifyCenter: true, isLast: rowIndex === data.length - 1 }, { children: _jsx(Div, __assign({ truncateText: true, textAlignCenter: true, body2: true }, { children: rowIndex + 1 })) }), rowIndex));
+        return (_jsx(RowNumber, __assign({ style: style, alignCenter: true, justifyCenter: true, isLast: rowIndex === filteredDataIds.length - 1 }, { children: _jsx(Div, __assign({ truncateText: true, textAlignCenter: true, body2: true }, { children: rowIndex + 1 })) }), rowIndex));
     };
-    return (_jsxs(SpreadsheetRowNumbersContainer, __assign({}, props, { h: height }, { children: [_jsx(SpreadsheetRowNumbersHeader, {}), _jsx(Grid, __assign({ ref: gridRef, style: gridStyles, width: SPREADSHEET_ROW_NUMBERS_WIDTH, columnCount: 1, columnWidth: SPREADSHEET_ROW_NUMBERS_WIDTH, height: height - spreadsheetHeaderHeightPx, rowHeight: 40, rowCount: data.length }, { children: Cell }))] })));
+    return (_jsxs(SpreadsheetRowNumbersContainer, __assign({}, props, { h: height }, { children: [_jsx(SpreadsheetRowNumbersHeader, {}), _jsx(Grid, __assign({ ref: gridRef, style: gridStyles, width: SPREADSHEET_ROW_NUMBERS_WIDTH, columnCount: 1, columnWidth: SPREADSHEET_ROW_NUMBERS_WIDTH, height: height - spreadsheetHeaderHeightPx, rowHeight: 40, rowCount: filteredDataIds.length }, { children: Cell }))] })));
 };
 var RowNumber = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", "\n"], ["\n  background-color: ", ";\n  ", ";\n  ", "\n"])), function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.label3; }, function (p) {
     return !p.isLast && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-shadow: inset 0 -1px 0 ", ";\n    "], ["\n      box-shadow: inset 0 -1px 0 ", ";\n    "])), function (p) { return p.theme.colors.gray300; });

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

@@ -19,6 +19,7 @@ import { SpreadsheetField, useSpreadsheetField } from ".";
 import { Autocomplete as AutocompleteBase, } from "../../../../../common/inputs/Autocomplete";
 import { SelectMenuDiv, SelectMenuScrollArea, } from "../../../../../common/inputs/SelectMenu";
 import { HTMLInput, TextInputIcon, } from "../../../../../common/inputs/TextInput";
+import { useReviewContext } from "../../../../Review/ReviewContextProvider";
 import { spreadsheetRowHeightPx } from "../../common";
 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; });
@@ -30,9 +31,12 @@ 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 hasTransformedRecords = useReviewContext().hasTransformedRecords;
+    var isHighlighted = hasTransformedRecords && ((_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 !hasTransformedRecords && setValue(v); }, disabledWhen: hasTransformedRecords, 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,54 @@ 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 { useReviewContext } from "../../../../Review/ReviewContextProvider";
+import { AVERAGE_CHAR_SIZE, getFieldContentWidth } from "./utils";
+var parseValue = function (value) {
+    var isFalsyButNotZero = !value && value !== 0;
+    return isFalsyButNotZero ? "" : value;
+};
 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 hasTransformedRecords = useReviewContext().hasTransformedRecords;
+    var defaultWidthAsNumber = Number.parseInt(columnWidth.replace("px", ""));
+    var _fieldContentWidth = getFieldContentWidth({
+        record: record,
+        fieldType: fieldType,
+        isTooltipOpened: hasTransformedRecords,
+        name: name,
+    });
+    var isHighlighted = hasTransformedRecords && ((_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 () {
+        // if the value is falsy, returns the default width
+        if (!value)
+            return columnWidth;
+        var inputPadding = 24; // 12 left + 12 right
+        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, defaultFieldWidth: defaultWidthAsNumber, expandedFieldWidth: expandedFieldWidth, shouldExpandInput: true }, { children: [_jsx(Input, __assign({ autoComplete: "off", hasError: !!validationError, hasWarning: !!validationWarning, value: parseValue(value), onChange: function (_a) {
+                    var value = _a.target.value;
+                    return !hasTransformedRecords && setValue(value);
+                }, disabledWhen: hasTransformedRecords }, 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) &&
+                hasTransformedRecords && (_jsx(SuffixText, __assign({ className: "suffix", fieldWidth: _fieldContentWidth }, { 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  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) {
-    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,14 @@ 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;
+    defaultFieldWidth?: number;
+};
+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,46 +51,101 @@ 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 { useEventManagerContext } from "../../../../../common/EventManagerContextProvider";
 import { TooltipProvider } from "../../../../../common/TooltipProvider";
 import { Div } from "../../../../../styled/utils";
-import { parseValue } from "../../common";
+import { useDataSetContext } from "../../DataSetContextProvider";
+import { useFilteredDataContext } from "../../FilteredDataContextProvider";
 import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
+import { useDataSetManipulation } from "../../SpreadsheetContextProvider/useDataSetManipulation";
+import { useValidationContext } from "../../ValidationContextProvider";
+import { parseValue } from "../../common";
 export var useSpreadsheetField = function (name, record, fieldType) {
-    var _a = useSpreadsheetContext(), updateRecord = _a.updateRecord, errors = _a.errors, warnings = _a.warnings;
-    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);
+    var appendNewRecordToSpreadsheet = useDataSetManipulation().appendNewRecordToSpreadsheet;
+    var _a = useFilteredDataContext(), lastFilteredRecordId = _a.lastFilteredRecordId, spreadsheetFilter = _a.spreadsheetFilter;
+    var _b = useValidationContext(), updateRecordAndRevalidate = _b.updateRecordAndRevalidate, warnings = _b.warnings, errors = _b.errors;
+    var getRecord = useDataSetContext().getRecord;
+    var _c = useState(record), recordState = _c[0], setRecordState = _c[1];
+    var _d = useState(record[name]), value = _d[0], setValue = _d[1];
+    var _e = useEventManagerContext(), on = _e.on, off = _e.off;
+    var _f = useState(get(errors.current, "".concat(record._meta.id, ".").concat(name), null)), validationError = _f[0], setValidationError = _f[1];
+    var _g = useState(get(warnings.current, "".concat(record._meta.id, ".").concat(name), null)), validationWarning = _g[0], setValidationWarning = _g[1];
+    useEffect(function () {
+        var listener = function (newRecord) {
+            var _record = getRecord(record._meta.id);
+            setValidationError(get(errors.current, "".concat(_record._meta.id, ".").concat(name), null));
+            setValidationWarning(get(warnings.current, "".concat(_record._meta.id, ".").concat(name), null));
+            setRecordState(_record);
+        };
+        on(record._meta.id, listener);
+        return function () {
+            off(record._meta.id, listener);
+        };
+    }, []);
     var updateData = useCallback(debounce(function (value) { return __awaiter(void 0, void 0, void 0, function () {
-        var newRecord;
-        var _a;
-        return __generator(this, function (_b) {
-            newRecord = __assign(__assign({}, record), (_a = {}, _a[name] = parseValue(fieldType, value), _a));
-            updateRecord(newRecord);
+        var _record;
+        return __generator(this, function (_a) {
+            _record = __assign({}, getRecord(record._meta.id));
+            _record[name] = parseValue(fieldType, value);
+            updateRecordAndRevalidate(_record);
+            setRecordState(_record);
+            if (record._meta.id === lastFilteredRecordId.current &&
+                spreadsheetFilter.byRow === "all") {
+                appendNewRecordToSpreadsheet();
+            }
             return [2 /*return*/];
         });
-    }); }, 50), [record]);
+    }); }, 200), [record]);
+    useEffect(function () {
+        if (recordState[name] !== value) {
+            setValue(recordState[name]);
+        }
+    }, [recordState[name], recordState]);
     var updateValue = useCallback(function (value) {
         setValue(value);
         updateData(value);
-    }, [record, updateData]);
-    return { value: value, setValue: updateValue, validationError: validationError, validationWarning: validationWarning };
+    }, [record, recordState, updateData]);
+    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_9 || (templateObject_9 = __makeTemplateObject(["\n  height: calc(100% - 1px);\n  width: ", ";\n  overflow: hidden;\n\n  ", "\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\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  &:focus-within, \n  &:hover {\n    ", "\n  }\n\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 hasError = _a.hasError, hasWarning = _a.hasWarning, isHighlighted = _a.isHighlighted, theme = _a.theme, shouldExpandInput = _a.shouldExpandInput;
+    return shouldExpandInput &&
+        !hasError &&
+        !hasWarning && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        background: ", ";\n        box-shadow: 0px 0px 0px 2px ", " inset;\n      "], ["\n        background: ", ";\n        box-shadow: 0px 0px 0px 2px ", " inset;\n      "])), !isHighlighted
+        ? theme.colors.white
+        : theme.colors.blue100, function (p) { return p.theme.colors.blue500; });
+}, function (_a) {
+    var expandedFieldWidth = _a.expandedFieldWidth, shouldExpandInput = _a.shouldExpandInput;
+    return shouldExpandInput && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        width: ", ";\n\n        .suffix {\n          right: 12px;\n        }\n      "], ["\n        width: ", ";\n\n        .suffix {\n          right: 12px;\n        }\n      "])), expandedFieldWidth || "auto");
+}, function (p) { return p.theme.css.alignCenter; }, function (p) {
+    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_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_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_3 || (templateObject_3 = __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 p.isHighlighted && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n      z-index: 99;\n      color: ", ";\n\n      &:hover {\n        z-index: 100;\n      }\n\n      input {\n        color: ", ";\n      }\n    "], ["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n      z-index: 99;\n      color: ", ";\n\n      &:hover {\n        z-index: 100;\n      }\n\n      input {\n        color: ", ";\n      }\n    "])), function (p) { return p.theme.colors.blue100; }, function (p) { return p.theme.colors.blue500; }, function (p) { return p.theme.colors.gray1000; }, function (p) { return p.theme.colors.gray1000; });
+}, function (_a) {
+    var shouldExpandInput = _a.shouldExpandInput, isHighlighted = _a.isHighlighted;
+    return shouldExpandInput &&
+        !isHighlighted && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      z-index: 1;\n    "], ["\n      z-index: 1;\n    "])));
+}, function (p) {
+    return p.isReadOnly && 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;
-    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 })) })) })) })));
+    var validationError = _a.validationError, validationWarning = _a.validationWarning, children = _a.children, isHighlighted = _a.isHighlighted, expandedFieldWidth = _a.expandedFieldWidth, shouldExpandInput = _a.shouldExpandInput, defaultFieldWidth = _a.defaultFieldWidth;
+    var isReadOnly = useSpreadsheetContext().isReadOnly;
+    return (_jsx(Div, __assign({ dim: "100%" }, { children: _jsx(TooltipProvider, __assign({ tooltip: validationError || validationWarning }, { children: _jsx(Div, __assign({ dim: "100%" }, { children: _jsx(ContentContainer, __assign({ hasError: validationError !== null, hasWarning: validationWarning !== null, 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;
+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 {};