fuse-importer 0.1.8-testing → 0.2.0-testing

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

@@ -0,0 +1,128 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useRef, useState } from "react";
+import { css } from "styled-components";
+import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
+// 1x1 transparent GIF to prevent drag image from showing
+var img = new Image();
+img.src =
+    "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
+var CellContext = createContext({});
+export var CellContextProvider = function (_a) {
+    var children = _a.children, rowIndex = _a.rowIndex, colIndex = _a.colIndex;
+    var _b = useState(false), isFocused = _b[0], setIsFocused = _b[1];
+    var _c = useSpreadsheetContext(), isReadOnly = _c.isReadOnly, selectedCellRect = _c.selectedCellRect, setSelectedCellRect = _c.setSelectedCellRect;
+    var isSelected = (function () {
+        var start = selectedCellRect.start, end = selectedCellRect.end;
+        var isRowSelected = rowIndex >= start.rowIndex && rowIndex <= end.rowIndex;
+        var isColSelected = colIndex >= start.colIndex && colIndex <= end.colIndex;
+        return isRowSelected && isColSelected;
+    })();
+    var selectedCellsCount = (function () {
+        var start = selectedCellRect.start, end = selectedCellRect.end;
+        return ((end.rowIndex - start.rowIndex + 1) * (end.colIndex - start.colIndex + 1));
+    })();
+    var updateSelectionRect = function (newRowIndex, newColIndex) {
+        setSelectedCellRect(function (prev) {
+            return __assign(__assign({}, prev), { start: {
+                    rowIndex: Math.min(prev.initialCell.rowIndex, newRowIndex),
+                    colIndex: Math.min(prev.initialCell.colIndex, newColIndex),
+                }, end: {
+                    rowIndex: Math.max(prev.initialCell.rowIndex, newRowIndex),
+                    colIndex: Math.max(prev.initialCell.colIndex, newColIndex),
+                } });
+        });
+    };
+    var onClick = function (e) {
+        if (e.shiftKey) {
+            updateSelectionRect(rowIndex, colIndex);
+        }
+        else {
+            setIsFocused(true);
+            setSelectedCellRect({
+                start: { rowIndex: rowIndex, colIndex: colIndex },
+                end: { rowIndex: rowIndex, colIndex: colIndex },
+                initialCell: { rowIndex: rowIndex, colIndex: colIndex },
+            });
+        }
+    };
+    var onBlur = function () {
+        setIsFocused(false);
+    };
+    var onDragOver = function () {
+        if (isUpdatingSelection.current)
+            return;
+        isUpdatingSelection.current = true;
+        setTimeout(function () {
+            isUpdatingSelection.current = false;
+            updateSelectionRect(rowIndex, colIndex);
+        }, 50);
+    };
+    var onDragStart = function (e) {
+        e.dataTransfer.setDragImage(img, -10, -10);
+        setSelectedCellRect({
+            start: { rowIndex: rowIndex, colIndex: colIndex },
+            end: { rowIndex: rowIndex, colIndex: colIndex },
+            initialCell: { rowIndex: rowIndex, colIndex: colIndex },
+            editMode: true,
+        });
+    };
+    var isUpdatingSelection = useRef(false);
+    var onDragEnd = function () {
+        setSelectedCellRect(function (p) { return (__assign(__assign({}, p), { editMode: false })); });
+    };
+    var selectedCellStyles = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), function (p) {
+        var start = selectedCellRect.start, end = selectedCellRect.end, initialCell = selectedCellRect.initialCell;
+        var isTopEdge = rowIndex === start.rowIndex;
+        var isBottomEdge = rowIndex === end.rowIndex;
+        var isLeftEdge = colIndex === start.colIndex;
+        var isRightEdge = colIndex === end.colIndex;
+        var withDashedBorder = selectedCellRect.isDashed;
+        var isInitialCell = rowIndex === (initialCell === null || initialCell === void 0 ? void 0 : initialCell.rowIndex) &&
+            colIndex === (initialCell === null || initialCell === void 0 ? void 0 : initialCell.colIndex);
+        // add selection rect border
+        var boxShadow = [
+            isTopEdge ? "inset 0 1px 0 ".concat(p.theme.colors.blue500) : "",
+            isRightEdge
+                ? "inset -2px 0 0 ".concat(p.theme.colors.blue500)
+                : "inset -1px 0 0 ".concat(p.theme.colors.gray300),
+            isBottomEdge ? "inset 0 -1px 0 ".concat(p.theme.colors.blue500) : "",
+            isLeftEdge ? "inset 1px 0 0 ".concat(p.theme.colors.blue500) : "",
+        ]
+            .filter(Boolean)
+            .join(", ");
+        var isInSelectionRect = selectedCellsCount > 1 && isSelected;
+        return (isInSelectionRect && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          background-color: ", ";\n          box-shadow: ", ";\n          ", "\n          ", "\n        "], ["\n          background-color: ", ";\n          box-shadow: ", ";\n          ", "\n          ", "\n        "])), p.theme.colors.blue100, boxShadow, withDashedBorder && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            box-shadow: inset -1px 0 0 ", ";\n            position: relative;\n            &::before {\n              content: \"\";\n              position: absolute;\n              top: ", ";\n              right: ", ";\n              bottom: ", ";\n              left: ", ";\n              border: 2.5px dashed ", ";\n            }\n          "], ["\n            box-shadow: inset -1px 0 0 ", ";\n            position: relative;\n            &::before {\n              content: \"\";\n              position: absolute;\n              top: ", ";\n              right: ", ";\n              bottom: ", ";\n              left: ", ";\n              border: 2.5px dashed ", ";\n            }\n          "])), function (p) { return p.theme.colors.gray300; }, isTopEdge ? "0" : "-2.5px", isRightEdge ? "0" : "-2.5px", isBottomEdge ? "0" : "-2.5px", isLeftEdge ? "0" : "-2.5px", p.theme.colors.blue500), isInitialCell && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            box-shadow: inset 0 0 0 2px ", ";\n          "], ["\n            box-shadow: inset 0 0 0 2px ", ";\n          "])), p.theme.colors.blue500)));
+    });
+    var selectionProps = isReadOnly
+        ? {}
+        : {
+            onClick: onClick,
+            onDragStart: onDragStart,
+            onDragEnd: onDragEnd,
+            onDragOver: onDragOver,
+            onBlur: onBlur,
+            draggable: !isFocused,
+        };
+    return (_jsx(CellContext.Provider, __assign({ value: {
+            isSelected: selectedCellsCount > 1 ? isSelected : false,
+            selectionProps: selectionProps,
+            selectedCellStyles: selectedCellStyles,
+        } }, { children: children })));
+};
+export var useCellContext = function () { return useContext(CellContext); };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/esm/Importer/common/Spreadsheet/components/{SpreadsheetData.d.ts → SpreadsheetData/index.d.ts}

@@ -1,4 +1,4 @@
 import React from "react";
-import { DivCSSProps } from "../../../../styled/utils";
+import { DivCSSProps } from "../../../../../styled/utils";
 declare const _default: React.MemoExoticComponent<(props: DivCSSProps) => JSX.Element>;
 export default _default;

package/lib/esm/Importer/common/Spreadsheet/components/{SpreadsheetData.js → SpreadsheetData/index.js}

@@ -23,21 +23,22 @@ 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 { TableActions } from "../../../../common/Table/TableActions";
-import { useImporterContext } from "../../../../Importer/contexts/ImporterContextProvider";
-import { Div } from "../../../../styled/utils";
-import useWindowDimensions from "../../../../utils/hooks/useWindowSize";
-import { getTableHeight } from "../../../common";
-import { spreadsheetHeaderHeightPx, spreadsheetRowHeightPx } from "../common";
-import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
-import * as S from "../styles";
-import { FieldHeader } from "./FieldHeader";
-import GlobalStyle from "./GlobalStyle";
-import { inputTypes } from "./inputs";
-import { SpreadsheetRowCheckboxes } from "./SpreadsheetRowCheckboxes";
-import { useDataSetContext } from "../DataSetContextProvider";
-import { useFilteredDataContext } from "../FilteredDataContextProvider";
-import { useValidationContext } from "../ValidationContextProvider";
+import { getTableHeight } from "../../..";
+import { TableActions } from "../../../../../common/Table/TableActions";
+import { Div } from "../../../../../styled/utils";
+import useWindowDimensions from "../../../../../utils/hooks/useWindowSize";
+import { useImporterContext } from "../../../../contexts/ImporterContextProvider";
+import { spreadsheetHeaderHeightPx, spreadsheetRowHeightPx, } from "../../common";
+import { useDataSetContext } from "../../DataSetContextProvider";
+import { useFilteredDataContext } from "../../FilteredDataContextProvider";
+import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
+import * as S from "../../styles";
+import { useValidationContext } from "../../ValidationContextProvider";
+import { FieldHeader } from "../FieldHeader";
+import GlobalStyle from "../GlobalStyle";
+import { inputTypes } from "../inputs";
+import { SpreadsheetRowCheckboxes } from "../SpreadsheetRowCheckboxes";
+import { CellContextProvider } from "./CellContextProvider";
 var getItemKey = function (record) { return record._meta.id; };
 var SpreadsheetData = function (props) {
     var _a = useSpreadsheetContext(), fields = _a.fields, filteredDataIds = _a.filteredDataIds, isReadOnly = _a.isReadOnly, options = _a.options, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows, checkboxColumnWidth = _a.checkboxColumnWidth;
@@ -82,8 +83,8 @@ var SpreadsheetData = function (props) {
             Header: function () { return _jsx(FieldHeader, { field: field }); },
             Content: function (record) {
                 var Input = inputTypes[field.type];
-                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 }));
+                var rowIndex = record.rowIndex, colIndex = record.colIndex, columnWidth = record.columnWidth, recordProp = __rest(record, ["rowIndex", "colIndex", "columnWidth"]);
+                return (_jsx(CellContextProvider, __assign({ rowIndex: rowIndex, colIndex: colIndex }, { children: _jsx(Input, { id: "".concat(field.name, "-").concat(rowIndex), fieldType: field.type, name: field.name, options: field.options, record: recordProp, columnWidth: columnWidth }) })));
             },
         }); });
     }, [fields, handleSortByFieldErrors, dataSet.current]);
@@ -113,6 +114,6 @@ var SpreadsheetData = function (props) {
                             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 })] }))] }))] })));
+                                }, 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

@@ -40,13 +40,13 @@ 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 { useImporterContext } from "../../../contexts/ImporterContextProvider";
 import { useReviewContext } from "../../../Review/ReviewContextProvider";
-import { spreadsheetRowHeightPx } from "../common";
-import { spreadsheetHeaderHeightPx } from "../common/index";
+import { useImporterContext } from "../../../contexts/ImporterContextProvider";
+import { useDataSetContext } from "../DataSetContextProvider";
 import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
 import { rowIsEmpty } from "../SpreadsheetContextProvider/utils";
-import { useDataSetContext } from "../DataSetContextProvider";
+import { spreadsheetRowHeightPx } from "../common";
+import { spreadsheetHeaderHeightPx } from "../common/index";
 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;
@@ -60,14 +60,14 @@ var gridStyles = {
 export var SpreadsheetRowCheckboxes = function (_a) {
     var height = _a.height, gridRef = _a.gridRef, isLoadingData = _a.isLoadingData, props = __rest(_a, ["height", "gridRef", "isLoadingData"]);
     var _b = useSpreadsheetContext(), selectedRows = _b.selectedRows, options = _b.options, filteredDataIds = _b.filteredDataIds, lastClickedIndexRef = _b.lastClickedIndexRef, setSelectedRows = _b.setSelectedRows, checkboxColumnWidth = _b.checkboxColumnWidth;
-    var isTransformTooltipOpened = useReviewContext().isTransformTooltipOpened;
+    var hasTransformedRecords = useReviewContext().hasTransformedRecords;
     var getRecord = useDataSetContext().getRecord;
     var currentStepIndex = useImporterContext().currentStepIndex;
     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;
-        if (isTransformTooltipOpened)
+        if (hasTransformedRecords)
             return;
         var recordId = filteredDataIds[rowIndex];
         var record = getRecord(recordId);
@@ -93,7 +93,7 @@ export var SpreadsheetRowCheckboxes = function (_a) {
     };
     var handleSelectMultipleRows = function (rowIndex) {
         var _a;
-        if (isTransformTooltipOpened)
+        if (hasTransformedRecords)
             return;
         var rowId = filteredDataIds[rowIndex];
         var record = getRecord(rowId);
@@ -133,7 +133,7 @@ export var SpreadsheetRowCheckboxes = function (_a) {
         }
     };
     var handleSelectAllRows = function (checked) {
-        if (isTransformTooltipOpened)
+        if (hasTransformedRecords)
             return;
         if (checked) {
             var allRows = filteredDataIds.filter(function (recordId) {

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

@@ -34,10 +34,9 @@ export var SpreadsheetAutocomplete = function (props) {
     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 = useReviewContext().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 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.js

@@ -28,6 +28,7 @@ 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 { handleInputPaste } from "../../../../../common";
 import { Div } from "../../../../../styled/utils";
 import { useReviewContext } from "../../../../Review/ReviewContextProvider";
 import { AVERAGE_CHAR_SIZE, getFieldContentWidth } from "./utils";
@@ -39,16 +40,15 @@ export var SpreadsheetInput = function (_a) {
     var _b, _c, _d, _e, _f, _g;
     var name = _a.name, record = _a.record, fieldType = _a.fieldType, columnWidth = _a.columnWidth, props = __rest(_a, ["name", "record", "fieldType", "columnWidth"]);
     var _h = useSpreadsheetField(name, record, fieldType), value = _h.value, setValue = _h.setValue, validationError = _h.validationError, validationWarning = _h.validationWarning;
-    var isTransformTooltipOpened = useReviewContext().isTransformTooltipOpened;
+    var hasTransformedRecords = useReviewContext().hasTransformedRecords;
     var defaultWidthAsNumber = Number.parseInt(columnWidth.replace("px", ""));
     var _fieldContentWidth = getFieldContentWidth({
         record: record,
         fieldType: fieldType,
-        isTooltipOpened: isTransformTooltipOpened,
+        isTooltipOpened: hasTransformedRecords,
         name: name,
     });
-    var isHighlighted = isTransformTooltipOpened &&
-        ((_d = (_c = (_b = record._meta) === null || _b === void 0 ? void 0 : _b.transformedRow) === null || _c === void 0 ? void 0 : _c[name]) === null || _d === void 0 ? void 0 : _d.transformed);
+    var 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)
@@ -60,11 +60,11 @@ export var SpreadsheetInput = function (_a) {
             ? "".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) {
+    return (_jsxs(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning, isHighlighted: isHighlighted, defaultFieldWidth: defaultWidthAsNumber, expandedFieldWidth: expandedFieldWidth, shouldExpandInput: true }, { children: [_jsx(Input, __assign({ onPaste: handleInputPaste, autoComplete: "off", hasError: !!validationError, hasWarning: !!validationWarning, value: parseValue(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", fieldWidth: _fieldContentWidth }, { children: record._meta.transformedRow[name].original })))] })));
+                    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 })))] })));
 };
 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;

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

@@ -6,6 +6,17 @@ export declare const useSpreadsheetField: (name: string, record: Record, fieldTy
     validationError: any;
     validationWarning: any;
 };
+type ContentContainerProps = {
+    hasError?: boolean;
+    hasWarning?: boolean;
+    isReadOnly?: boolean;
+    isHighlighted?: boolean;
+    expandedFieldWidth?: string;
+    shouldExpandInput?: boolean;
+    defaultFieldWidth?: number;
+    isSelected?: boolean;
+};
+export declare const ContentContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../../../styled/utils").CSSProps & ContentContainerProps, never>;
 type SpreadsheetFieldProps = {
     validationError: string | JSX.Element;
     validationWarning: string | JSX.Element;

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

@@ -62,16 +62,17 @@ import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
 import { useDataSetManipulation } from "../../SpreadsheetContextProvider/useDataSetManipulation";
 import { useValidationContext } from "../../ValidationContextProvider";
 import { parseValue } from "../../common";
+import { useCellContext } from "../SpreadsheetData/CellContextProvider";
 export var useSpreadsheetField = function (name, record, fieldType) {
     var appendNewRecordToSpreadsheet = useDataSetManipulation().appendNewRecordToSpreadsheet;
-    var lastFilteredRecordId = useFilteredDataContext().lastFilteredRecordId;
-    var _a = useValidationContext(), updateRecordAndRevalidate = _a.updateRecordAndRevalidate, warnings = _a.warnings, errors = _a.errors;
+    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 _b = useState(record), recordState = _b[0], setRecordState = _b[1];
-    var _c = useState(record[name]), value = _c[0], setValue = _c[1];
-    var _d = useEventManagerContext(), on = _d.on, off = _d.off;
-    var _e = useState(get(errors.current, "".concat(record._meta.id, ".").concat(name), null)), validationError = _e[0], setValidationError = _e[1];
-    var _f = useState(get(warnings.current, "".concat(record._meta.id, ".").concat(name), null)), validationWarning = _f[0], setValidationWarning = _f[1];
+    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);
@@ -91,7 +92,8 @@ export var useSpreadsheetField = function (name, record, fieldType) {
             _record[name] = parseValue(fieldType, value);
             updateRecordAndRevalidate(_record);
             setRecordState(_record);
-            if (record._meta.id === lastFilteredRecordId.current) {
+            if (record._meta.id === lastFilteredRecordId.current &&
+                spreadsheetFilter.byRow === "all") {
                 appendNewRecordToSpreadsheet();
             }
             return [2 /*return*/];
@@ -113,34 +115,40 @@ export var useSpreadsheetField = function (name, record, fieldType) {
         validationWarning: validationWarning,
     };
 };
-var ContentContainer = styled(Div)(templateObject_8 || (templateObject_8 = __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  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"])), function (_a) {
+export var ContentContainer = styled(Div)(templateObject_11 || (templateObject_11 = __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;
+    var hasError = _a.hasError, hasWarning = _a.hasWarning, isHighlighted = _a.isHighlighted, theme = _a.theme, shouldExpandInput = _a.shouldExpandInput, isSelected = _a.isSelected;
     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
+        !hasWarning &&
+        !isSelected && 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        z-index: 1;\n\n        .suffix {\n          right: 12px;\n        }\n      "], ["\n        width: ", ";\n        z-index: 1;\n\n        .suffix {\n          right: 12px;\n        }\n      "])), expandedFieldWidth || "auto");
+    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.isHighlighted && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n      z-index: 100;\n    "], ["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n      z-index: 100;\n    "])), function (p) { return p.theme.colors.blue100; }, function (p) { return p.theme.colors.blue500; });
+    return p.hasWarning && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n      ", "\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n      ", "\n    "])), function (p) { return p.theme.colors.orange1200; }, function (p) { return p.theme.colors.orange1100; }, function (p) { return p.theme.colors.orange500; }, p.isSelected && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        filter: brightness(90%);\n      "], ["\n        filter: brightness(90%);\n      "]))));
 }, function (p) {
-    return p.hasWarning && 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.orange1200; }, function (p) { return p.theme.colors.orange1100; }, function (p) { return p.theme.colors.orange500; });
+    return p.hasError && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n      ", "\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n      ", "\n    "])), function (p) { return p.theme.colors.error; }, function (p) { return p.theme.colors.red100; }, function (p) { return p.theme.colors.error; }, p.isSelected && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        filter: brightness(90%);\n      "], ["\n        filter: brightness(90%);\n      "]))));
 }, function (p) {
-    return p.hasError && css(templateObject_6 || (templateObject_6 = __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.isHighlighted && css(templateObject_8 || (templateObject_8 = __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_9 || (templateObject_9 = __makeTemplateObject(["\n      z-index: 1;\n    "], ["\n      z-index: 1;\n    "])));
 }, function (p) {
-    return p.isReadOnly && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
+    return p.isReadOnly && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 });
 export var SpreadsheetField = function (_a) {
     var validationError = _a.validationError, validationWarning = _a.validationWarning, children = _a.children, isHighlighted = _a.isHighlighted, expandedFieldWidth = _a.expandedFieldWidth, shouldExpandInput = _a.shouldExpandInput, 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 _b = useCellContext(), selectedCellStyles = _b.selectedCellStyles, selectionProps = _b.selectionProps, isSelected = _b.isSelected;
+    return (_jsx(Div, __assign({ dim: "100%" }, selectionProps, { children: _jsx(TooltipProvider, __assign({ tooltip: validationError || validationWarning }, { children: _jsx(Div, __assign({ dim: "100%" }, { children: _jsx(ContentContainer, __assign({ css: selectedCellStyles, hasError: validationError !== null, hasWarning: validationWarning !== null, isSelected: isSelected, isHighlighted: isHighlighted, expandedFieldWidth: expandedFieldWidth, defaultFieldWidth: defaultFieldWidth, shouldExpandInput: shouldExpandInput, isReadOnly: isReadOnly, className: "input-content" }, { children: children })) })) })) })));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/lib/esm/Importer/common/Spreadsheet/validation/validators.d.ts

@@ -1,5 +1,5 @@
-import { DuplicateValuesCollection, Field, FieldValidation } from "../../../../types";
 import { MutableRefObject } from "react";
+import { DuplicateValuesCollection, Field, FieldValidation } from "../../../../types";
 export type FieldValidator = (field: Field, fieldValue: any, validation?: FieldValidation, duplicateValues?: MutableRefObject<DuplicateValuesCollection>, customErrorMessage?: string) => null | string;
 export type FieldValidations = Partial<{
     [key: string]: FieldValidator;

package/lib/esm/Importer/common/Spreadsheet/validation/validators.js

@@ -99,6 +99,7 @@ export var fieldValidations = {
         var _a;
         if (!isNullOrUndefined(fieldValue) &&
             !isNullOrUndefined(duplicateValues.current)) {
+            fieldValue = String(fieldValue);
             var isDuplicated = duplicateValues.current[field.name] &&
                 duplicateValues.current[field.name][fieldValue] &&
                 duplicateValues.current[field.name][fieldValue].length > 1;
@@ -110,6 +111,7 @@ export var fieldValidations = {
         var _a;
         if (!isNullOrUndefined(fieldValue) &&
             !isNullOrUndefined(duplicateValues.current)) {
+            fieldValue = String(fieldValue);
             var isDuplicated = duplicateValues.current[field.name] &&
                 duplicateValues.current[field.name][fieldValue.toLowerCase()] &&
                 duplicateValues.current[field.name][fieldValue.toLowerCase()].length >

package/lib/esm/Importer/contexts/ImporterContextProvider.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MutableRefObject } from "react";
 import { CustomAction, FormatRecord, ImporterOptions, Integration, OnSubmit, OnValidateRecord, Record, TemplateHeader } from "../../types";
 import { FuseApi } from "../common/FuseApi";
 export type HeaderMatchings = {
@@ -31,6 +31,7 @@ export type State = {
     templateSlug: string;
     apiToken: string;
     inTrialMode: boolean;
+    hasValidSubmitFn: boolean;
     previewFirstTime: boolean;
     fuseApi: FuseApi;
     importerOptions: ImporterOptions;
@@ -59,6 +60,8 @@ export type State = {
     customActions: CustomAction[];
     headerMappingsLoaded: boolean;
     valueMappingsLoaded: boolean;
+    headersMappings: HeaderMappings[];
+    layoutRef: MutableRefObject<HTMLDivElement>;
 };
 export type Props = {
     templateSlug: string;
@@ -73,5 +76,9 @@ export type Props = {
     dynamicColumns: TemplateHeader[] | null;
     customActions: CustomAction[];
 };
+type HeaderMappings = {
+    [key: string]: string;
+};
 export declare const ImporterContextProvider: ({ templateSlug, initialRecords, apiToken, children, options, onSubmit, onClose, formatRecord, onValidateRecord, dynamicColumns, customActions, }: Props) => JSX.Element;
 export declare const useImporterContext: () => State;
+export {};

package/lib/esm/Importer/contexts/ImporterContextProvider.js

@@ -77,13 +77,14 @@ export var ImporterContextProvider = function (_a) {
         logoURL: null,
     }), style = _l[0], setStyle = _l[1];
     var _m = useState(null), templateHeaderMatchings = _m[0], setTemplateHeaderMatchings = _m[1];
-    var _o = useState(null), enumFieldValueMatchings = _o[0], setEnumFieldValueMatchings = _o[1];
+    var _o = useState({}), enumFieldValueMatchings = _o[0], setEnumFieldValueMatchings = _o[1];
     var _p = useState(null), uploadedDataEnumFieldValues = _p[0], setUploadedDataEnumFieldValues = _p[1];
     var _q = useState([]), selectedRows = _q[0], setSelectedRows = _q[1];
     var isUsingManualImport = useRef(false);
     var _r = useState(0), headerRowIndex = _r[0], setHeaderRowIndex = _r[1];
     var _s = useState(false), headerMappingsLoaded = _s[0], setHeaderMappingsLoaded = _s[1];
     var _t = useState(false), valueMappingsLoaded = _t[0], setValueMappingsLoaded = _t[1];
+    var layoutRef = useRef(null);
     var fuseApi = useMemo(function () { return new FuseApi(options.env, apiToken); }, [
         options.env,
         apiToken,
@@ -230,7 +231,9 @@ export var ImporterContextProvider = function (_a) {
         }
     }, [uploadedDataHeaders, headersMappings]);
     useEffect(function () {
-        if (!templateHeaderMatchings || !uploadedDataHeaders)
+        if (!templateHeaderMatchings ||
+            !uploadedDataHeaders ||
+            !headerMappingsLoaded)
             return;
         var _uploadedDataEnumFieldValues = {};
         var templateLabels = Object.keys(templateHeaderMatchings);
@@ -252,8 +255,13 @@ export var ImporterContextProvider = function (_a) {
             });
         });
         setUploadedDataEnumFieldValues(_uploadedDataEnumFieldValues);
-        loadValueMappings(_uploadedDataEnumFieldValues);
-    }, [templateHeaderMatchings, uploadedDataHeaders]);
+        var valueLimitPerEnumField = Math.ceil(40 / enumFieldsLabels.length);
+        var enumFieldsLabelsLimited = {};
+        Object.keys(_uploadedDataEnumFieldValues).forEach(function (key) {
+            enumFieldsLabelsLimited[key] = _uploadedDataEnumFieldValues[key].slice(0, valueLimitPerEnumField);
+        });
+        loadValueMappings(enumFieldsLabelsLimited);
+    }, [headerMappingsLoaded, matcherSubstep]);
     useEffect(function () {
         (function () { return __awaiter(void 0, void 0, void 0, function () {
             var _a, organization_1, columns_1, importer_style_preferences, integrations_1, preview_first_time, error_1, errorMsg;
@@ -300,7 +308,8 @@ export var ImporterContextProvider = function (_a) {
         setUploadedData(null);
         setTemplateHeaderMatchings(null);
         setHeadersMappings(null);
-        setEnumFieldValueMatchings(null);
+        setEnumFieldValueMatchings({});
+        setUploadedDataEnumFieldValues(null);
         setSelectedRows([]);
         setHeaderRowIndex(0);
     };
@@ -318,6 +327,7 @@ export var ImporterContextProvider = function (_a) {
         }
     };
     var inTrialMode = organization === null || organization === void 0 ? void 0 : organization.trial_mode;
+    var hasValidSubmitFn = typeof onSubmit === "function";
     var value = {
         initialRecords: initialRecords,
         currentStepIndex: currentStepIndex,
@@ -334,6 +344,7 @@ export var ImporterContextProvider = function (_a) {
         apiToken: apiToken,
         templateSlug: templateSlug,
         inTrialMode: inTrialMode,
+        hasValidSubmitFn: hasValidSubmitFn,
         fuseApi: fuseApi,
         theme: style.theme,
         logoURL: style.logoURL,
@@ -361,6 +372,8 @@ export var ImporterContextProvider = function (_a) {
         customActions: customActions,
         headerMappingsLoaded: headerMappingsLoaded,
         valueMappingsLoaded: valueMappingsLoaded,
+        headersMappings: headersMappings,
+        layoutRef: layoutRef,
     };
     return (_jsx(ImporterContext.Provider, __assign({ value: value }, { children: children })));
 };

package/lib/esm/Importer/hooks/useSubmitToServer.d.ts

@@ -1,5 +1,5 @@
 import { AppResponse, RecordDataSet } from "../../types";
-export declare const useSubmitToServer: (setIsTransformTooltipOpened: any) => {
+export declare const useSubmitToServer: (setHasTransformedRecords: any) => {
     appResponse: AppResponse;
     isSubmitting: boolean;
     onSubmitToServer: (dataSet: RecordDataSet, afterSubmitCallback: (dataSet: RecordDataSet) => void) => Promise<void>;