fuse-importer 0.12.0 → 0.15.0

package/lib/esm/Importer/TrialModeBanner.js

@@ -21,4 +21,3 @@ export var TrialModeBanner = function () {
                     } }, { children: "Select plan" }), void 0)] }), void 0)) }, void 0));
 };
 var exclamationPointIcon = (_jsx("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 6C12.5523 6 13 6.44772 13 7V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V7C11 6.44772 11.4477 6 12 6ZM12 15C12.5523 15 13 15.4477 13 16V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V16C11 15.4477 11.4477 15 12 15Z", fill: "#FF9A34" }, void 0) }), void 0));
-//# sourceMappingURL=TrialModeBanner.js.map

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

@@ -103,4 +103,3 @@ var ImporterDropzone = function () {
 };
 export { ImporterDropzone };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
-//# sourceMappingURL=ImporterDropzone.js.map

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

@@ -12,4 +12,3 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var DragAndDropSvg = (_jsxs("svg", __assign({ width: "164", height: "96", viewBox: "0 0 164 96", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("g", { children: _jsx("path", { d: "M70.5229 74.0865C70.7599 74.9708 70.2351 75.8798 69.3508 76.1167L20.8309 89.1176C19.9466 89.3545 19.0377 88.8297 18.8007 87.9455L1.0238 21.6011C0.786859 20.7168 1.31164 19.8079 2.19593 19.5709L25.801 13.246C26.2207 13.1335 26.6678 13.1904 27.0461 13.4043L58.5194 31.2049C58.9065 31.4238 59.1894 31.7891 59.3045 32.2187L70.5229 74.0865Z", fill: "url(#paint0_linear_1658_47819)" }, void 0) }, void 0), _jsx("g", { children: _jsx("path", { d: "M26.1516 13.1523L58.22 31.2361L34.3354 37.6359C33.4988 37.8601 32.6389 37.3636 32.4148 36.527L26.1516 13.1523Z", fill: "#E8CF81" }, void 0) }, void 0), _jsx("g", { children: _jsx("path", { d: "M145.75 88.0883C145.511 88.9799 144.594 89.509 143.703 89.2701L95.2092 76.2763C94.3176 76.0374 93.7885 75.121 94.0274 74.2294L111.797 7.9115C112.036 7.0199 112.953 6.49079 113.844 6.72969L137.431 13.0496C137.854 13.163 138.216 13.4381 138.438 13.8155L156.789 44.9582C157.016 45.3445 157.079 45.8061 156.963 46.2392L145.75 88.0883Z", fill: "url(#paint1_linear_1658_47819)" }, void 0) }, void 0), _jsx("g", { children: _jsx("path", { d: "M138.09 13.2272L156.82 44.9224L132.676 38.4529C131.983 38.2672 131.571 37.5548 131.757 36.8617L138.09 13.2272Z", fill: "#68CECA" }, void 0) }, void 0), _jsx("g", { children: _jsx("path", { d: "M118.113 93.183C118.113 94.7388 116.852 96.0001 115.296 96.0001L49.5348 96.0001C47.979 96.0001 46.7177 94.7388 46.7177 93.183L46.7177 2.81711C46.7177 1.2613 47.979 6.91772e-05 49.5348 6.87584e-05L81.2634 6.02178e-05C82.0018 6.00191e-05 82.7108 0.290033 83.2376 0.807552L117.271 34.2418C117.81 34.7715 118.113 35.4956 118.113 36.2514L118.113 93.183Z", fill: "url(#paint2_linear_1658_47819)" }, void 0) }, void 0), _jsx("g", { children: _jsx("path", { d: "M81.9936 0.00131226L117.054 34.3579H83.8716C82.8344 34.3579 81.9936 33.5171 81.9936 32.4799L81.9936 0.00131226Z", fill: "#6FE7E2" }, void 0) }, void 0), _jsxs("defs", { children: [_jsxs("linearGradient", __assign({ id: "paint0_linear_1658_47819", x1: "40.3734", y1: "13.1259", x2: "-7.01613", y2: "51.8154", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#D0A617" }, void 0), _jsx("stop", { offset: "1", stopColor: "#FEE18F" }, void 0)] }), void 0), _jsxs("linearGradient", __assign({ id: "paint1_linear_1658_47819", x1: "119.456", y1: "82.7732", x2: "171.105", y2: "7.1263", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#006BA8" }, void 0), _jsx("stop", { offset: "1", stopColor: "#01FFD7" }, void 0)] }), void 0), _jsxs("linearGradient", __assign({ id: "paint2_linear_1658_47819", x1: "82.4156", y1: "96.0001", x2: "103.774", y2: "10.7256", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#24D2EA" }, void 0), _jsx("stop", { offset: "1", stopColor: "#10F9EB" }, void 0)] }), void 0)] }, void 0)] }), void 0));
 export var UploadIndicatorSvg = (_jsxs("svg", __assign({ width: "96", height: "96", viewBox: "0 0 96 96", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("g", { children: _jsx("path", { d: "M1 79.3761L95.7523 79.3762L48.3762 32L1 79.3761Z", fill: "url(#paint0_linear_1630_46301)" }, void 0) }, void 0), _jsx("g", { children: _jsx("path", { d: "M1 55.3761L95.7523 55.3762L48.3762 8L1 55.3761Z", fill: "url(#paint1_linear_1630_46301)" }, void 0) }, void 0), _jsxs("defs", { children: [_jsxs("linearGradient", __assign({ id: "paint0_linear_1630_46301", x1: "48.3761", y1: "32", x2: "40.1872", y2: "94.8016", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#88CDF3" }, void 0), _jsx("stop", { offset: "1", stopColor: "#00C7A8", stopOpacity: "0.895833" }, void 0)] }), void 0), _jsxs("linearGradient", __assign({ id: "paint1_linear_1630_46301", x1: "78.6058", y1: "-24.6165", x2: "64.3686", y2: "81.3108", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#0098B9" }, void 0), _jsx("stop", { offset: "1", stopColor: "#00A8CD", stopOpacity: "0.895833" }, void 0)] }), void 0)] }, void 0)] }), void 0));
-//# sourceMappingURL=backgrounds.js.map

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

@@ -76,4 +76,3 @@ var DragAndDropImporter = function () {
 };
 export { DragAndDropImporter };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
-//# sourceMappingURL=index.js.map

package/lib/esm/Importer/Uploader/HeadersPreview.js

@@ -36,7 +36,7 @@ var HeaderButtons = function () {
     var onClick = function () {
         setCurrentStepIndex(1);
     };
-    return (_jsxs(HeaderButtonsWrapper, __assign({ dflex: true, spaceBetween: true, mb: 24 }, { children: [_jsx(Button, __assign({ w: 180, isSmall: true, variant: "secondary", onClick: resetImport }, { children: "No, Re-upload file" }), void 0), _jsx(Button, __assign({ w: 142, isSmall: true, onClick: onClick }, { children: "Yes, continue" }), void 0)] }), void 0));
+    return (_jsxs(HeaderButtonsWrapper, __assign({ dflex: true, spaceBetween: true, mb: 12 }, { children: [_jsx(Button, __assign({ w: 180, isSmall: true, variant: "secondary", onClick: resetImport }, { children: "No, Re-upload file" }), void 0), _jsx(Button, __assign({ w: 142, isSmall: true, onClick: onClick }, { children: "Yes, continue" }), void 0)] }), void 0));
 };
 var HeadersPreview = function () {
     var uploadedData = useImporterContext().uploadedData;
@@ -72,8 +72,7 @@ var HeadersPreview = function () {
             isRequired: false,
         };
     });
-    return (_jsx(_Fragment, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true, pt: 40 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Verify Your Column Headers" }), void 0), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "File must contain column headers to proceed." }), void 0), _jsx(HeaderButtons, {}, void 0), _jsx(Div, __assign({ w100: true, centered: true, mt: 30, mb: 36 }, { children: _jsx(Spreadsheet, __assign({ rowWidth: getSpreadsheetRowWidth(readonlyFields, 6), isReadOnly: true, initialData: formattedData }, { fields: readonlyFields }, { highlightFirstRow: true }), void 0) }), void 0)] }), void 0) }, void 0));
+    return (_jsx(_Fragment, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true, pt: 40 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Verify Your Column Headers" }), void 0), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "File must contain column headers to proceed." }), void 0), _jsx(HeaderButtons, {}, void 0), _jsx(Div, __assign({ w100: true, centered: true, mb: 36 }, { children: _jsx(Spreadsheet, __assign({ rowWidth: getSpreadsheetRowWidth(readonlyFields, 6), isReadOnly: true, initialData: formattedData }, { fields: readonlyFields }, { highlightFirstRow: true }), void 0) }), void 0)] }), void 0) }, void 0));
 };
 export default HeadersPreview;
 var templateObject_1;
-//# sourceMappingURL=HeadersPreview.js.map

package/lib/esm/Importer/Uploader/UploaderContextProvider.js

@@ -25,4 +25,3 @@ export var UploaderContextProvider = function (_a) {
     return (_jsx(UploaderContext.Provider, __assign({ value: value }, { children: children }), void 0));
 };
 export var useUploaderContext = function () { return useContext(UploaderContext); };
-//# sourceMappingURL=UploaderContextProvider.js.map

package/lib/esm/Importer/Uploader/index.js

@@ -11,4 +11,3 @@ var Uploader = function () {
     return (_jsx(UploaderContextProvider, { children: _jsx(UploaderWithContext, {}, void 0) }, void 0));
 };
 export { Uploader };
-//# sourceMappingURL=index.js.map

package/lib/esm/Importer/common/AppLoading.js

@@ -22,4 +22,3 @@ var ModalContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeT
 var LoaderContainer = styled(ModalContainer)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  pointer-events: none;\n"], ["\n  pointer-events: none;\n"])));
 export var AppLoading = function () { return (_jsxs(_Fragment, { children: [_jsx(LoadingBackdrop, {}, void 0), _jsx(LoaderContainer, { children: _jsx(Div, __assign({ w: 300 }, { children: _jsx(Div, __assign({ pRelative: true }, { children: _jsx(Spinner, {}, void 0) }), void 0) }), void 0) }, void 0)] }, void 0)); };
 var templateObject_1, templateObject_2, templateObject_3;
-//# sourceMappingURL=AppLoading.js.map

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

@@ -7,4 +7,3 @@ import { createGlobalStyle } from "styled-components";
 var GlobalStyle = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (p) { return p.theme.css.scrollbarDark; });
 export default GlobalStyle;
 var templateObject_1;
-//# sourceMappingURL=GlobalStyle.js.map

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { AppResponse } from "../../..";
+import { AppResponse, SpreadsheetOptions } from "../../..";
 import { BatchValidationErrors, Field, OnValidateBatch, OnValidateRecord, Record } from "../../../types";
-export declare const getBatchErrors: (records: any, onValidateRecord: any) => Promise<any>;
+export declare const getBatchErrors: (records: Record[], onValidateRecord: OnValidateRecord) => Promise<BatchValidationErrors>;
 declare type State = {
     rowWidth?: number;
     data: Record[];
@@ -33,13 +33,13 @@ declare type Props = {
     appResponse?: AppResponse;
     onValidateRecord: OnValidateRecord;
     onValidateBatch?: OnValidateBatch;
-    validationBatchSize?: number;
     children: JSX.Element;
     fields: Field[];
+    options: SpreadsheetOptions;
     highlightFirstRow: boolean;
     submittedData?: Record[];
     setReviewedData?: React.Dispatch<React.SetStateAction<Record[]>>;
 };
-export declare const SpreadsheetContextProvider: ({ initialData, rowWidth, onValidateRecord, onValidateBatch, appResponse, fields, isReadOnly, validationBatchSize, highlightFirstRow, submittedData, setReviewedData, children, }: Props) => JSX.Element;
+export declare const SpreadsheetContextProvider: ({ initialData, rowWidth, onValidateRecord, onValidateBatch, appResponse, fields, options, isReadOnly, highlightFirstRow, submittedData, setReviewedData, children, }: Props) => JSX.Element;
 export declare const useSpreadsheetContext: () => State;
 export {};

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

@@ -56,45 +56,38 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useState } from "react";
+import { formatBatchErrors } from "../../..";
 import { getRecordErrors, getRenderedRecordWithErrors, recordIsEmpty, } from "./common";
 var MINIMUM_ROW_COUNT = 20;
-// time in ms
-var batchValidationIdleTime = 500;
 var getRowId = function (id) { return "r".concat(id); };
 export var getBatchErrors = function (records, onValidateRecord) { return __awaiter(void 0, void 0, void 0, function () {
-    var getRecordError, errors;
+    var batchErrors;
     return __generator(this, function (_a) {
         switch (_a.label) {
-            case 0:
-                getRecordError = function (record) { return __awaiter(void 0, void 0, void 0, function () {
+            case 0: return [4 /*yield*/, Promise.all(records.map(function (record) { return __awaiter(void 0, void 0, void 0, function () {
                     var _a;
                     return __generator(this, function (_b) {
                         switch (_b.label) {
                             case 0:
                                 _a = {
-                                    id: record._meta.id
+                                    rowId: record._meta.id
                                 };
                                 return [4 /*yield*/, onValidateRecord(record)];
-                            case 1: return [2 /*return*/, (_a.error = _b.sent(),
+                            case 1: return [2 /*return*/, (_a.errors = _b.sent(),
                                     _a)];
                         }
                     });
-                }); };
-                return [4 /*yield*/, Promise.all(records.map(function (r) { return getRecordError(r); }))];
+                }); }))];
             case 1:
-                errors = _a.sent();
-                return [2 /*return*/, errors.reduce(function (prevState, curr) {
-                        var newState = __assign({}, prevState);
-                        newState[curr.id] = curr.error;
-                        return newState;
-                    }, {})];
+                batchErrors = _a.sent();
+                return [2 /*return*/, formatBatchErrors(batchErrors)];
         }
     });
 }); };
 var SpreadsheetContext = createContext({});
 var sleep = function (n) { return new Promise(function (resolve) { return setTimeout(resolve, n); }); };
 export var SpreadsheetContextProvider = function (_a) {
-    var initialData = _a.initialData, _b = _a.rowWidth, rowWidth = _b === void 0 ? 1 : _b, _c = _a.onValidateRecord, onValidateRecord = _c === void 0 ? null : _c, _d = _a.onValidateBatch, onValidateBatch = _d === void 0 ? null : _d, appResponse = _a.appResponse, fields = _a.fields, isReadOnly = _a.isReadOnly, validationBatchSize = _a.validationBatchSize, highlightFirstRow = _a.highlightFirstRow, submittedData = _a.submittedData, setReviewedData = _a.setReviewedData, children = _a.children;
+    var initialData = _a.initialData, _b = _a.rowWidth, rowWidth = _b === void 0 ? 1 : _b, _c = _a.onValidateRecord, onValidateRecord = _c === void 0 ? null : _c, _d = _a.onValidateBatch, onValidateBatch = _d === void 0 ? null : _d, appResponse = _a.appResponse, fields = _a.fields, options = _a.options, isReadOnly = _a.isReadOnly, highlightFirstRow = _a.highlightFirstRow, submittedData = _a.submittedData, setReviewedData = _a.setReviewedData, children = _a.children;
     var _e = useState(initialData.map(function (d, i) { return (__assign(__assign({}, d), { _meta: { id: getRowId(i), rowIndex: i } })); })), data = _e[0], setData = _e[1];
     var _f = useState(false), isLoading = _f[0], setIsLoading = _f[1];
     var _g = useState(null), sortByFieldErrors = _g[0], setSortByFieldErrors = _g[1];
@@ -109,8 +102,9 @@ export var SpreadsheetContextProvider = function (_a) {
     }), columnErrorCounts = _l.columnErrorCounts, totalErrors = _l.totalErrors, isValidationComplete = _l.isValidationComplete;
     useEffect(function () {
         var init = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var addEmtpyRows, validateInBatches;
+            var batchValidationDelayMs, batchValidationSize, addEmtpyRows, validateInBatches;
             return __generator(this, function (_a) {
+                batchValidationDelayMs = options.batchValidationDelayMs, batchValidationSize = options.batchValidationSize;
                 addEmtpyRows = function () {
                     var newData = __spreadArray([], data, true);
                     var emptyRecord = fields.reduce(function (obj, f) {
@@ -128,16 +122,18 @@ export var SpreadsheetContextProvider = function (_a) {
                 if (data.length < MINIMUM_ROW_COUNT)
                     addEmtpyRows();
                 validateInBatches = function () { return __awaiter(void 0, void 0, void 0, function () {
-                    var validationErrors, batchSize, idx, batch, errors;
+                    var validationErrors, batchSize, batchCount, batchIdx, idx, batch, errors, validationPercentage;
                     return __generator(this, function (_a) {
                         switch (_a.label) {
                             case 0:
                                 validationErrors = {};
-                                batchSize = Math.min(validationBatchSize, data.length) || data.length;
-                                idx = 0;
+                                batchSize = Math.min(Math.floor(batchValidationSize), data.length) || data.length;
+                                batchCount = Math.ceil(data.length / batchSize);
+                                batchIdx = 0;
                                 _a.label = 1;
                             case 1:
-                                if (!(idx < data.length)) return [3 /*break*/, 5];
+                                if (!(batchIdx < batchCount)) return [3 /*break*/, 5];
+                                idx = batchIdx * batchSize;
                                 batch = data.slice(idx, idx + batchSize);
                                 return [4 /*yield*/, (onValidateBatch
                                         ? onValidateBatch(batch)
@@ -146,15 +142,16 @@ export var SpreadsheetContextProvider = function (_a) {
                                 errors = _a.sent();
                                 validationErrors = __assign(__assign({}, validationErrors), errors);
                                 // unblocks main thread for rendering ui
-                                return [4 /*yield*/, sleep(batchValidationIdleTime)];
+                                return [4 /*yield*/, sleep(batchValidationDelayMs)];
                             case 3:
                                 // unblocks main thread for rendering ui
                                 _a.sent();
-                                setBatchValidationPercentage(Math.floor(((idx + batchSize) / data.length) * 100));
+                                validationPercentage = (Math.min(idx + batchSize, data.length) / data.length) * 100;
+                                setBatchValidationPercentage(Math.floor(validationPercentage));
                                 setBatchValidationErrors(validationErrors);
                                 _a.label = 4;
                             case 4:
-                                idx += batchSize;
+                                batchIdx++;
                                 return [3 /*break*/, 1];
                             case 5: return [2 /*return*/];
                         }
@@ -288,4 +285,3 @@ var useValidationState = function (_a) {
     return { columnErrorCounts: columnErrorCounts, totalErrors: totalErrors, isValidationComplete: isValidationComplete };
 };
 export var useSpreadsheetContext = function () { return useContext(SpreadsheetContext); };
-//# sourceMappingURL=SpreadsheetContextProvider.js.map

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

@@ -53,4 +53,3 @@ var RowNumber = styled(Div)(templateObject_2 || (templateObject_2 = __makeTempla
 var SpreadsheetRowNumbersHeader = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: ", "px;\n  border-top-left-radius: 8px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0px ", ";\n"], ["\n  height: ", "px;\n  border-top-left-radius: 8px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0px ", ";\n"])), spreadsheetRowHeightPx, function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.colors.gray300; });
 var SpreadsheetRowNumbersContainer = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: ", "px;\n  border-top-left-radius: 8px;\n  border-right: solid 1px ", ";\n  .ReactVirtualized__Grid {\n    /* Track */\n    ::-webkit-scrollbar-track {\n      background-color: ", " !important;\n    }\n  }\n"], ["\n  width: ", "px;\n  border-top-left-radius: 8px;\n  border-right: solid 1px ", ";\n  .ReactVirtualized__Grid {\n    /* Track */\n    ::-webkit-scrollbar-track {\n      background-color: ", " !important;\n    }\n  }\n"])), SPREADSHEET_ROW_NUMBERS_WIDTH, function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.tableHeader; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
-//# sourceMappingURL=SpreadsheetRowNumbers.js.map

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

@@ -19,19 +19,19 @@ import { SpreadsheetField, useSpreadsheetField, useValidationError } from ".";
 import { spreadsheetRowHeightPx } from "..";
 import { Autocomplete as AutocompleteBase } from "../../../../../common/inputs/Autocomplete";
 import { SelectMenuDiv, SelectMenuScrollArea, } from "../../../../../common/inputs/SelectMenu";
-import { HTMLInput } from "../../../../../common/inputs/TextInput";
+import { HTMLInput, TextInputIcon, } from "../../../../../common/inputs/TextInput";
 import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
-var Autocomplete = styled(AutocompleteBase)(templateObject_3 || (templateObject_3 = __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    :focus {\n      border: none;\n      box-shadow: none;\n    }\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    :focus {\n      border: none;\n      box-shadow: none;\n    }\n  }\n  ", " {\n    border-radius: 7px;\n  }\n  ", " {\n    padding: 4px;\n  }\n"])), HTMLInput, spreadsheetRowHeightPx - 5, function (p) {
+var Autocomplete = styled(AutocompleteBase)(templateObject_3 || (templateObject_3 = __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    :focus {\n      border: none;\n      box-shadow: none;\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    :focus {\n      border: none;\n      box-shadow: none;\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.hasError && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), function (p) { return p.theme.colors.error; });
 }, function (p) {
     return p.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), function (p) { return p.theme.colors.error; });
-}, SelectMenuDiv, SelectMenuScrollArea);
+}, TextInputIcon, SelectMenuDiv, SelectMenuScrollArea);
 export var SpreadsheetAutocomplete = function (_a) {
     var name = _a.name, record = _a.record, options = _a.options, _b = _a.isInputDisabled, isInputDisabled = _b === void 0 ? false : _b;
     var validationError = useValidationError(name, record).validationError;
     var _c = useSpreadsheetField(name, record), value = _c.value, setValue = _c.setValue;
     var setIsScrollingEnabled = useSpreadsheetContext().setIsScrollingEnabled;
-    return (_jsx(SpreadsheetField, __assign({}, { name: name, record: record }, { children: _jsx(Autocomplete, { placement: "bottom", isInputDisabled: isInputDisabled, hasError: !!validationError, onToggle: function (isOpen) { return setIsScrollingEnabled(!isOpen); }, options: options, value: value, onChange: function (v) { return setValue(v); } }, void 0) }), void 0));
+    return (_jsx(SpreadsheetField, __assign({}, { name: name, record: record }, { children: _jsx(Autocomplete, { placement: "bottom", isInputDisabled: isInputDisabled, hasError: !!validationError, onToggle: function (isOpen) { return setIsScrollingEnabled(!isOpen); }, options: options, value: value, icon: chevronDownIcon, onChange: function (v) { return setValue(v); } }, void 0) }), void 0));
 };
+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" }, void 0) }), void 0));
 var templateObject_1, templateObject_2, templateObject_3;
-//# sourceMappingURL=SpeadsheetAutocomplete.js.map

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { HTMLInputCSSProps } from "../../../../../styled/utils";
+import { Record } from "../../../../../types";
+declare type SpreadsheetTextInputArgs = {
+    name: string;
+    record: Record;
+} & HTMLInputCSSProps;
+export declare const SpreadsheetInput: ({ name, record, ...props }: SpreadsheetTextInputArgs) => JSX.Element;
+export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
+    hasError: boolean;
+} & import("../../../../../styled/utils").HTMLInputProps & import("../../../../../styled/utils").CSSProps, never>;
+export {};

package/lib/esm/Importer/common/Spreadsheet/common/fields/{SpreadsheetTextInput.js → SpreadsheetInput.js}

@@ -13,20 +13,30 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
 import { SpreadsheetField, useSpreadsheetField, useValidationError } from ".";
-export var SpreadsheetTextInput = function (_a) {
-    var name = _a.name, record = _a.record, type = _a.type;
+export var SpreadsheetInput = function (_a) {
+    var name = _a.name, record = _a.record, props = __rest(_a, ["name", "record"]);
     var validationError = useValidationError(name, record).validationError;
     var _b = useSpreadsheetField(name, record), value = _b.value, setValue = _b.setValue;
-    return (_jsx(SpreadsheetField, __assign({}, { name: name, record: record }, { children: _jsx(Input, { type: type, hasError: !!validationError, value: value || "", onChange: function (_a) {
+    return (_jsx(SpreadsheetField, __assign({}, { name: name, record: record }, { children: _jsx(Input, __assign({ hasError: !!validationError, value: value || "", onChange: function (_a) {
                 var value = _a.target.value;
                 return setValue(value);
-            } }, void 0) }), void 0));
+            } }, props), void 0) }), void 0));
 };
 export var Input = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  outline: none;\n  border: none;\n  width: 100%;\n  height: calc(100% - 2px);\n  background: transparent;\n  box-sizing: border-box;\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  outline: none;\n  border: none;\n  width: 100%;\n  height: calc(100% - 2px);\n  background: transparent;\n  box-sizing: border-box;\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"])), 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.hasError && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.error; });
 });
 var templateObject_1, templateObject_2;
-//# sourceMappingURL=SpreadsheetTextInput.js.map

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

@@ -146,4 +146,3 @@ export var SpreadsheetField = function (_a) {
     return (_jsx(Wrapper, __assign({ dim: "100%", isLoading: isLoading }, { children: _jsx(TooltipProvider, __assign({ tooltip: validationError }, { children: _jsx(Div, __assign({ dim: "100%" }, { children: _jsx(ContentContainer, __assign({ hasError: !!validationError, isReadOnly: isReadOnly }, { children: children }), void 0) }), void 0) }), void 0) }), void 0));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
-//# sourceMappingURL=index.js.map

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

@@ -12,8 +12,14 @@ var __assign = (this && this.__assign) || function () {
 import { FieldTypes, } from "../../../../types";
 export var spreadsheetRowHeightPx = 40;
 export var spreadsheetHeaderHeightPx = 40;
+var isEmpty = function (value) {
+    return (value === undefined ||
+        value === null ||
+        (typeof value === "object" && Object.keys(value).length === 0) ||
+        (typeof value === "string" && value.trim().length === 0));
+};
 export var recordIsEmpty = function (record, fields) {
-    return fields.reduce(function (isEmptyRecord, f) { return isEmptyRecord && !record[f.name]; }, true);
+    return fields.reduce(function (isEmptyRecord, f) { return isEmptyRecord && isEmpty(record[f.name]); }, true);
 };
 export var getRenderedRecordWithErrors = function (_a) {
     var record = _a.record, validationErrors = _a.validationErrors;
@@ -23,23 +29,20 @@ export var getRecordErrors = function (_a) {
     var record = _a.record, fields = _a.fields, batchValidationErrors = _a.batchValidationErrors, submittedData = _a.submittedData;
     var submittedRecord = submittedData === null || submittedData === void 0 ? void 0 : submittedData.find(function (r) { return r._meta.id === record._meta.id; });
     var isEmail = function (value) {
-        var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
-        return Boolean(value.match(emailRegex));
-    };
-    var isEmptyString = function (string) {
-        return string.replace(/\s/g, "") === "";
+        var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return emailRegex.test(value);
     };
     var recordHasData = !recordIsEmpty(record, fields);
     if (recordHasData) {
-        var recordIsRequiredErrors = fields.reduce(function (errors, field) {
+        var recordTemplateValidationErrors = fields.reduce(function (errors, field) {
             var newErrors = __assign({}, errors);
             var fieldValue = record[field.name];
-            if (field.isRequired && !fieldValue)
-                newErrors[field.name] = "".concat(field.label, " is required");
-            if (FieldTypes.email === field.type &&
-                !isEmptyString(fieldValue) &&
-                !isEmail(fieldValue)) {
-                newErrors[field.name] = "Must be an email";
+            if (isEmpty(fieldValue)) {
+                if (field.isRequired)
+                    newErrors[field.name] = "".concat(field.label, " is required");
+            }
+            else if (field.type === FieldTypes.email && !isEmail(fieldValue)) {
+                newErrors[field.name] = "".concat(field.label, " is not a valid email");
             }
             return newErrors;
         }, {});
@@ -61,9 +64,8 @@ export var getRecordErrors = function (_a) {
                 return newErrors;
             }, {});
         }
-        var recordErrors = __assign(__assign(__assign({}, recordValidationErrors), recordIsRequiredErrors), appValidationErrors);
+        var recordErrors = __assign(__assign(__assign({}, recordValidationErrors), recordTemplateValidationErrors), appValidationErrors);
         return recordErrors;
     }
     return {};
 };
-//# sourceMappingURL=index.js.map

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

@@ -1,18 +1,18 @@
 import React from "react";
 import { AppResponse } from "../../..";
-import { Field, OnValidateBatch, OnValidateRecord, Record } from "../../../types";
+import { Field, OnValidateBatch, OnValidateRecord, Record, SpreadsheetOptions } from "../../../types";
 export declare type SpreadsheetProps = {
     initialData: any[];
     rowWidth?: number;
     appResponse?: AppResponse;
     isReadOnly?: boolean;
-    validationBatchSize?: number;
     onValidateRecord?: OnValidateRecord;
     onValidateBatch?: OnValidateBatch;
     fields?: Field[];
     submittedData?: Record[];
     highlightFirstRow?: boolean;
+    options?: SpreadsheetOptions;
     setReviewedData?: React.Dispatch<React.SetStateAction<Record[]>>;
 };
-declare const Spreadsheet: ({ isReadOnly, initialData, rowWidth, fields, appResponse, validationBatchSize, onValidateRecord, submittedData, setReviewedData, onValidateBatch, highlightFirstRow, }: SpreadsheetProps) => JSX.Element;
+declare const Spreadsheet: ({ isReadOnly, initialData, rowWidth, fields, appResponse, options, onValidateRecord, submittedData, setReviewedData, onValidateBatch, highlightFirstRow, }: SpreadsheetProps) => JSX.Element;
 export { Spreadsheet };

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

@@ -52,27 +52,28 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import styled, { css } from "styled-components";
-import { TableView as TableViewBase, TableViewCellContainer, TableViewHeader, TableViewRow, } from "../../../common/Table/TableView";
+import { getTableHeight } from "..";
+import { TooltipProvider } from "../../../common";
+import { TableView as TableViewBase, TableViewCellContainer, TableViewRow, } from "../../../common/Table/TableView";
 import { colors } from "../../../styled/theme/colorPalette";
 import { Div } from "../../../styled/utils";
 import { FieldTypes, } from "../../../types";
-import GlobalStyle from "./GlobalStyle";
 import { useSpreadsheetReviewContext } from "../../SpreadsheetReviewContextProvider";
 import { getUnsubmittedData } from "../utils";
 import { spreadsheetHeaderHeightPx, spreadsheetRowHeightPx } from "./common";
 import { SpreadsheetAutocomplete } from "./common/fields/SpeadsheetAutocomplete";
-import { SpreadsheetTextInput } from "./common/fields/SpreadsheetTextInput";
+import { SpreadsheetInput } from "./common/fields/SpreadsheetInput";
+import GlobalStyle from "./GlobalStyle";
 import { SpreadsheetContextProvider, useSpreadsheetContext, } from "./SpreadsheetContextProvider";
 import { SpreadsheetRowNumbers } from "./SpreadsheetRowNumbers";
-var SPREADSHEET_HEIGHT = 540;
 var SpreadSheetWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: solid 1px ", ";\n  border-radius: 8px;\n  background: ", ";\n  overflow: hidden !important;\n"], ["\n  border: solid 1px ", ";\n  border-radius: 8px;\n  background: ", ";\n  overflow: hidden !important;\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.white; });
-var TableView = styled(TableViewBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n  ", " {\n    background: ", ";\n    height: ", "px;\n    box-shadow: inset 0 -1px 0 ", ";\n    border-bottom: none;\n  }\n"], ["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n  ", " {\n    background: ", ";\n    height: ", "px;\n    box-shadow: inset 0 -1px 0 ", ";\n    border-bottom: none;\n  }\n"])), TableViewRow, TableViewCellContainer, function (p) { return p.theme.colors.gray300; }, TableViewHeader, function (p) { return p.theme.colors.tableHeader; }, spreadsheetHeaderHeightPx, function (p) { return p.theme.colors.gray300; });
+var TableView = styled(TableViewBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n"], ["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n"])), function (p) { return p.theme.colors.gray50; }, TableViewRow, TableViewCellContainer, function (p) { return p.theme.colors.gray300; });
 var ErrorCount = styled(Div)(function (_a) {
     var _b = _a.theme, colors = _b.colors, c = _b.css;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: ", ";\n    background: ", ";\n    border: solid 1px ", ";\n    padding: 4px 7px;\n    border-radius: 56px;\n    min-width: 22px;\n    ", ";\n    ", ";\n  "], ["\n    color: ", ";\n    background: ", ";\n    border: solid 1px ", ";\n    padding: 4px 7px;\n    border-radius: 56px;\n    min-width: 22px;\n    ", ";\n    ", ";\n  "])), colors.error, colors.red100, colors.error, c.label3, c.centered);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: ", ";\n    background: ", ";\n    border: solid 1px ", ";\n    padding: 4px 7px;\n    border-radius: 56px;\n    min-width: 24px;\n    ", ";\n  "], ["\n    color: ", ";\n    background: ", ";\n    border: solid 1px ", ";\n    padding: 4px 7px;\n    border-radius: 56px;\n    min-width: 24px;\n    ", ";\n  "])), colors.error, colors.red100, colors.error, c.centered);
 });
 var Spreadsheet = function (_a) {
-    var isReadOnly = _a.isReadOnly, initialData = _a.initialData, rowWidth = _a.rowWidth, fields = _a.fields, appResponse = _a.appResponse, validationBatchSize = _a.validationBatchSize, _b = _a.onValidateRecord, onValidateRecord = _b === void 0 ? null : _b, submittedData = _a.submittedData, setReviewedData = _a.setReviewedData, _c = _a.onValidateBatch, onValidateBatch = _c === void 0 ? null : _c, _d = _a.highlightFirstRow, highlightFirstRow = _d === void 0 ? false : _d;
+    var isReadOnly = _a.isReadOnly, initialData = _a.initialData, rowWidth = _a.rowWidth, fields = _a.fields, appResponse = _a.appResponse, options = _a.options, _b = _a.onValidateRecord, onValidateRecord = _b === void 0 ? null : _b, submittedData = _a.submittedData, setReviewedData = _a.setReviewedData, _c = _a.onValidateBatch, onValidateBatch = _c === void 0 ? null : _c, _d = _a.highlightFirstRow, highlightFirstRow = _d === void 0 ? false : _d;
     return (_jsx(SpreadsheetContextProvider, __assign({}, {
         appResponse: appResponse,
         submittedData: submittedData,
@@ -84,16 +85,20 @@ var Spreadsheet = function (_a) {
         onValidateRecord: onValidateRecord,
         onValidateBatch: onValidateBatch,
         highlightFirstRow: highlightFirstRow,
-        validationBatchSize: validationBatchSize || initialData.length,
+        options: options,
     }, { children: _jsx(SpreadSheetWithContext, {}, void 0) }), void 0));
 };
 var SpreadSheetWithContext = function () {
     var _a = useSpreadsheetContext(), isReadOnly = _a.isReadOnly, totalErrors = _a.totalErrors, batchValidationPercentage = _a.batchValidationPercentage;
     var batchValidationProgressUI = (_jsxs(Div, __assign({ body1: true, dflex: true, mb: 22 }, { children: ["Calculating Data...", _jsxs(Div, __assign({ bold: true, ml: 5 }, { children: [batchValidationPercentage, "%"] }), void 0), _jsxs(Div, __assign({ bold: true, c: colors.error, ml: 5 }, { children: ["(", totalErrors, " errors)"] }), void 0)] }), void 0));
-    return (_jsxs(_Fragment, { children: [_jsx(Div, __assign({ h: 32 }, { children: !isReadOnly &&
+    return (_jsxs(Div, { children: [_jsx(Div, __assign({ h: 32 }, { children: !isReadOnly &&
                     batchValidationPercentage < 100 &&
                     batchValidationProgressUI }), void 0), _jsx(SpreadsheetData, {}, void 0)] }, void 0));
 };
+var booleanOptions = [
+    { label: "True", value: true },
+    { label: "False", value: false },
+];
 var SpreadsheetData = function () {
     var _a = useSpreadsheetReviewContext(), appResponse = _a.appResponse, isSubmitting = _a.isSubmitting;
     var _b = useSpreadsheetContext(), fields = _b.fields, data = _b.data, isLoading = _b.isLoading, isReadOnly = _b.isReadOnly, rowWidth = _b.rowWidth, sortByFieldErrors = _b.sortByFieldErrors, setSortByFieldErrors = _b.setSortByFieldErrors, validateRenderedRecords = _b.validateRenderedRecords, setIsLoading = _b.setIsLoading;
@@ -129,27 +134,11 @@ var SpreadsheetData = function () {
             Header: function () {
                 var columnErrorCounts = useSpreadsheetContext().columnErrorCounts;
                 var fieldErrorCount = columnErrorCounts[f.name];
-                return (_jsxs(Div, __assign({ p: "0px 16px", spaceBetween: true, w100: true, alignCenter: true }, { children: [_jsxs(Div, { children: [f.label, f.isRequired && "*"] }, void 0), fieldErrorCount && (_jsx(ErrorCount, __assign({ onClick: function () { return setSortByFieldErrors(f.name); } }, { children: fieldErrorCount }), void 0))] }), void 0));
+                return (_jsxs(Div, __assign({ p: "0 16px", spaceBetween: true, w100: true, alignCenter: true }, { children: [_jsxs(Div, __assign({ truncateText: true }, { children: [f.label, f.isRequired && "*"] }), void 0), fieldErrorCount && (_jsx(TooltipProvider, __assign({ mr: 3, w: 35, tooltip: "Sort by ".concat(f.label, " errors") }, { children: _jsx(ErrorCount, __assign({ onClick: function () { return setSortByFieldErrors(f.name); } }, { children: _jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 35, textAlignCenter: true, label3: true, truncateText: true }, { children: fieldErrorCount }), void 0) }), void 0) }), void 0) }), void 0))] }), void 0));
             },
             Content: function (record) {
-                var getInputType = function () {
-                    switch (f.type) {
-                        case FieldTypes.integer:
-                        case FieldTypes.float:
-                            return "number";
-                        case FieldTypes.email:
-                            return "email";
-                        default:
-                            return "text";
-                    }
-                };
-                var booleanOptions = [
-                    { label: "True", value: "true" },
-                    { label: "False", value: "false" },
-                ];
                 var props = {
                     name: f.name,
-                    type: getInputType(),
                     record: (function () {
                         var res = __assign({}, record);
                         delete res.rowIndex;
@@ -161,18 +150,37 @@ var SpreadsheetData = function () {
                         return (_jsx(SpreadsheetAutocomplete, __assign({ isInputDisabled: true }, props, { options: booleanOptions }), void 0));
                     case FieldTypes.enum:
                         return (_jsx(SpreadsheetAutocomplete, __assign({}, props, { options: f === null || f === void 0 ? void 0 : f.options.map(function (o) { return ({ label: o, value: o }); }) }), void 0));
-                    case FieldTypes.string:
-                    case FieldTypes.float:
                     case FieldTypes.integer:
+                        return (_jsx(SpreadsheetInput, __assign({}, props, { type: "number", step: "1", onKeyDown: function (event) {
+                                if (event.key === "." ||
+                                    event.key === "," ||
+                                    event.key === "e") {
+                                    event.preventDefault();
+                                }
+                            } }), void 0));
+                    case FieldTypes.float:
+                        return (_jsx(SpreadsheetInput, __assign({}, props, { type: "number", onKeyDown: function (event) {
+                                if (event.key === "e") {
+                                    event.preventDefault();
+                                }
+                            } }), void 0));
+                    case FieldTypes.string:
+                        return _jsx(SpreadsheetInput, __assign({}, props, { type: "email" }), void 0);
                     case FieldTypes.email:
-                        return _jsx(SpreadsheetTextInput, __assign({}, props), void 0);
+                        return _jsx(SpreadsheetInput, __assign({}, props, { type: "text" }), void 0);
                 }
             },
         }); });
     }, [fields]);
     var unsubmittedData = getUnsubmittedData(data, appResponse);
-    return (_jsxs(_Fragment, { children: [_jsx(GlobalStyle, {}, void 0), !isSortingTableData && !isSubmitting && (_jsxs(SpreadSheetWrapper, __assign({ h: SPREADSHEET_HEIGHT, dflex: true, w: 1400 }, { children: [_jsx(SpreadsheetRowNumbers, { spreadsheetHasXScroll: rowWidth > 1, scrollTop: scrollTop, height: SPREADSHEET_HEIGHT }, void 0), _jsx(TableView, { highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, onSectionRendered: onSectionRendered, onTableScroll: function (_scrollTop) { return setScrollTop(_scrollTop); }, h: SPREADSHEET_HEIGHT, rowWidth: rowWidth, data: unsubmittedData, columns: columns, isLoading: isLoading }, void 0)] }), void 0))] }, void 0));
+    var spreadsheetHeight = getTableHeight({
+        headerHeight: spreadsheetHeaderHeightPx,
+        rowHeight: spreadsheetRowHeightPx,
+        dataCount: unsubmittedData.length,
+        mininmumTableHeight: 450,
+        maxVisibleRows: 12,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(GlobalStyle, {}, void 0), !isSortingTableData && !isSubmitting && (_jsxs(SpreadSheetWrapper, __assign({ h: spreadsheetHeight, dflex: true, w: 1400 }, { children: [_jsx(SpreadsheetRowNumbers, { spreadsheetHasXScroll: rowWidth > 1, scrollTop: scrollTop, height: spreadsheetHeight }, void 0), _jsx(TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, onSectionRendered: onSectionRendered, onTableScroll: function (_scrollTop) { return setScrollTop(_scrollTop); }, h: spreadsheetHeight, rowWidth: rowWidth, data: unsubmittedData, columns: columns, isLoading: isLoading }, void 0)] }), void 0))] }, void 0));
 };
 export { Spreadsheet };
 var templateObject_1, templateObject_2, templateObject_3;
-//# sourceMappingURL=index.js.map

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

@@ -13,4 +13,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var fileExtensionIcon = (_jsxs("svg", __assign({ width: "36", height: "44", viewBox: "0 0 36 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M33 43.0001H3C1.89543 43.0001 1 42.1046 1 41.0001V3.00006C1 1.89549 1.89543 1.00006 3 1.00006H16.655C19.0148 1.00006 21.2542 2.04193 22.7743 3.84697L33.1193 16.1317C34.3339 17.5741 35 19.3991 35 21.2848V41.0001C35 42.1046 34.1046 43.0001 33 43.0001Z", fill: "#C2CEEC", stroke: "#333333", strokeWidth: "2" }, void 0), _jsx("path", { d: "M33 43.0004H3C1.89543 43.0004 1 42.105 1 41.0004V3.0004C1 1.89583 1.89543 1.0004 3 1.0004H16.8421C18.499 1.0004 19.8421 2.34354 19.8421 4.0004V14.5004C19.8421 15.8811 20.9614 17.0004 22.3421 17.0004H32C33.6569 17.0004 35 18.3435 35 20.0004V41.0004C35 42.105 34.1046 43.0004 33 43.0004Z", fill: "white", stroke: "#333333", strokeWidth: "2" }, void 0)] }), void 0));
 export var closeIconWithCircle = (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("circle", { cx: "12", cy: "12", r: "11", stroke: "#989898", strokeWidth: "2" }, void 0), _jsx("path", { d: "M9 9L15 15", stroke: "#989898", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0), _jsx("path", { d: "M9 15L15 9", stroke: "#989898", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0));
 export var errorIcon = (_jsxs("svg", __assign({ width: "76", height: "64", viewBox: "0 0 76 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M38 3.95611L72.0101 62H3.98992L38 3.95611Z", stroke: "black", strokeWidth: "4" }, void 0), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M40.5 26.5C40.5 25.1193 39.3807 24 38 24C36.6193 24 35.5 25.1193 35.5 26.5V39.8333C35.5 41.214 36.6193 42.3333 38 42.3333C39.3807 42.3333 40.5 41.214 40.5 39.8333V26.5ZM40.5 50.5C40.5 49.1193 39.3807 48 38 48C36.6193 48 35.5 49.1193 35.5 50.5V51.8333C35.5 53.214 36.6193 54.3333 38 54.3333C39.3807 54.3333 40.5 53.214 40.5 51.8333V50.5Z", fill: "black" }, void 0)] }), void 0));
-//# sourceMappingURL=index.js.map

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

@@ -4,4 +4,12 @@ declare type Environments = {
     [K in EnvironmentType]?: any;
 };
 export declare const baseUrls: Environments;
+declare type GetTableHeightArgs = {
+    headerHeight: number;
+    rowHeight: number;
+    maxVisibleRows: number;
+    mininmumTableHeight?: number;
+    dataCount: number;
+};
+export declare const getTableHeight: ({ headerHeight, rowHeight, maxVisibleRows, mininmumTableHeight, dataCount, }: GetTableHeightArgs) => number;
 export {};

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

@@ -1,3 +1,4 @@
+import { defaultTableHeaderHeightPx, defaultTableRowHeightPx, } from "../../common/Table/TableView/common";
 export var contentWidth = 1120;
 export var baseUrls = {
     local: "http://localhost:3000",
@@ -5,4 +6,8 @@ export var baseUrls = {
     production: "https://fuse.flatironsdevelopment.com",
     test: "https://fuse-test.flatironsdevelopment.com",
 };
-//# sourceMappingURL=index.js.map
+var MINIMUM_TABLE_HEIGHT = 375;
+export var getTableHeight = function (_a) {
+    var _b = _a.headerHeight, headerHeight = _b === void 0 ? defaultTableHeaderHeightPx : _b, _c = _a.rowHeight, rowHeight = _c === void 0 ? defaultTableRowHeightPx : _c, _d = _a.maxVisibleRows, maxVisibleRows = _d === void 0 ? 7 : _d, _e = _a.mininmumTableHeight, mininmumTableHeight = _e === void 0 ? MINIMUM_TABLE_HEIGHT : _e, dataCount = _a.dataCount;
+    return Math.max(headerHeight + rowHeight * Math.min(dataCount, maxVisibleRows + 0.5), mininmumTableHeight);
+};

package/lib/esm/Importer/common/utils.d.ts

@@ -1,4 +1,4 @@
-import { AppResponse, Record } from "../../types";
+import { AppResponse, BatchValidationErrors, Record, RowValidationError } from "../../types";
 import { TemplateHeader } from "../ImporterContextProvider";
 export declare const getSpreadsheetRowWidth: (fields: any, visibleRowsOnTableViewport: any) => number;
 export declare const getUnsubmittedData: (data: Record[], appResponse: AppResponse) => Record[];
@@ -6,5 +6,6 @@ declare type IsEnumFieldArgs = {
     templateLabel: string;
     templateHeaders: TemplateHeader[];
 };
-export declare const isEnumField: ({ templateLabel, templateHeaders, }: IsEnumFieldArgs) => boolean;
+export declare const getColumnType: ({ templateLabel, templateHeaders, }: IsEnumFieldArgs) => string;
+export declare const formatBatchErrors: (errors: RowValidationError[]) => BatchValidationErrors;
 export {};