fuse-importer 0.13.0 → 0.16.0

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*/];
                         }

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

@@ -19,18 +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;

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,17 +13,28 @@ 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; });

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,7 +64,7 @@ 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 {};

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,17 +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;

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,3 +6,8 @@ export var baseUrls = {
     production: "https://fuse.flatironsdevelopment.com",
     test: "https://fuse-test.flatironsdevelopment.com",
 };
+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 {};

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

@@ -1,4 +1,14 @@
-import { FieldTypes } from "../../types";
+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);
+};
 export var getSpreadsheetRowWidth = function (fields, visibleRowsOnTableViewport) {
     var res = fields.length / visibleRowsOnTableViewport;
     return res > 1 ? res : 1;
@@ -9,9 +19,16 @@ export var getUnsubmittedData = function (data, appResponse) {
         unsubmittedData = data.filter(function (r) { return !!r._meta.appValidationErrors; });
     return unsubmittedData;
 };
-export var isEnumField = function (_a) {
+export var getColumnType = function (_a) {
     var _b;
     var templateLabel = _a.templateLabel, templateHeaders = _a.templateHeaders;
-    return ((_b = templateHeaders.find(function (th) { return th.label === templateLabel; })) === null || _b === void 0 ? void 0 : _b.column_type) ===
-        FieldTypes.enum;
+    return (_b = templateHeaders.find(function (th) { return th.label === templateLabel; })) === null || _b === void 0 ? void 0 : _b.column_type;
+};
+export var formatBatchErrors = function (errors) {
+    var res = errors.reduce(function (prevState, curr) {
+        var newState = __assign({}, prevState);
+        newState[curr.rowId] = curr.errors;
+        return newState;
+    }, {});
+    return res;
 };

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

@@ -1,20 +1,19 @@
 /// <reference types="react" />
-import { EnvironmentType, OnSubmit, OnValidateBatch, OnValidateRecord } from "../types";
+import { ImporterOptions, OnSubmit, OnValidateBatch, OnValidateRecord } from "../types";
 declare type LayoutProps = {
     zIndex: number;
 };
 export declare const Layout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../styled/utils").CSSProps & LayoutProps, never>;
 declare type Props = {
-    templateId: string;
+    templateSlug: string;
     apiToken: string;
-    environment?: EnvironmentType;
-    zIndex: number;
+    options: ImporterOptions;
     onValidateRecord?: OnValidateRecord;
     onValidateBatch?: OnValidateBatch;
     onSubmit?: OnSubmit;
     onClose: any;
 };
-declare const Importer: ({ environment, templateId, apiToken, onSubmit, onValidateRecord, onValidateBatch, zIndex, onClose, }: Props) => JSX.Element;
+declare const Importer: ({ templateSlug, apiToken, onSubmit, onValidateRecord, onValidateBatch, options, onClose, }: Props) => JSX.Element;
 export * from "./common/Spreadsheet";
 export * from "./common/utils";
 export * from "./SpreadsheetReviewContextProvider";

package/lib/esm/Importer/index.js

@@ -21,7 +21,7 @@ import { Div } from "../styled/utils";
 import { Footer } from "./Footer";
 import { GlobalStyle } from "./GlobalStyle";
 import { ImporterContextProvider, useImporterContext, } from "./ImporterContextProvider";
-import { ImporterFonts } from "./LoadFonts";
+import { ImporterFonts } from "./ImporterFonts";
 import { Matcher } from "./Matcher";
 import Review from "./Review";
 import { SpreadsheetReviewContextProvider } from "./SpreadsheetReviewContextProvider";
@@ -50,21 +50,21 @@ var steps = [
     },
 ];
 var Importer = function (_a) {
-    var _b = _a.environment, environment = _b === void 0 ? "local" : _b, templateId = _a.templateId, apiToken = _a.apiToken, onSubmit = _a.onSubmit, onValidateRecord = _a.onValidateRecord, onValidateBatch = _a.onValidateBatch, zIndex = _a.zIndex, onClose = _a.onClose;
+    var templateSlug = _a.templateSlug, apiToken = _a.apiToken, onSubmit = _a.onSubmit, onValidateRecord = _a.onValidateRecord, onValidateBatch = _a.onValidateBatch, options = _a.options, onClose = _a.onClose;
     useFullscreenOverlay();
     return (_jsx(ImporterContextProvider, __assign({}, {
-        environment: environment,
-        templateId: templateId,
+        options: options,
+        templateSlug: templateSlug,
         apiToken: apiToken,
         onValidateRecord: onValidateRecord,
         onValidateBatch: onValidateBatch,
         onClose: onClose,
-    }, { children: _jsx(ImporterWithContext, __assign({}, { zIndex: zIndex, onSubmit: onSubmit }), void 0) }), void 0));
+    }, { children: _jsx(ImporterWithContext, __assign({}, { onSubmit: onSubmit }), void 0) }), void 0));
 };
 var ImporterWithContext = function (_a) {
-    var zIndex = _a.zIndex, onSubmit = _a.onSubmit;
+    var onSubmit = _a.onSubmit;
     var _b = useCustomImporter(), theme = _b.theme, logoURL = _b.logoURL;
-    var _c = useImporterContext(), currentStepIndex = _c.currentStepIndex, matcherSubstep = _c.matcherSubstep;
+    var _c = useImporterContext(), currentStepIndex = _c.currentStepIndex, matcherSubstep = _c.matcherSubstep, zIndex = _c.importerOptions.zIndex;
     var layoutRef = useRef(null);
     useEffect(function () {
         layoutRef.current.scrollTo(0, 0);

package/lib/esm/common/Table/TableView/TableHeaders.d.ts

@@ -14,6 +14,7 @@ export declare const TableHeadersContainer: import("styled-components").StyledCo
 export declare const TableHeadersContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
 declare type TableHeadersProps = Pick<TableViewProps, "columns" | "sortBy" | "setSortBy" | "rowHeight" | "rowWidth"> & {
     scrollLeft: number;
+    height: number;
 } & DivCSSProps;
-export declare const TableHeaders: ({ scrollLeft, columns, sortBy, setSortBy, rowHeight, rowWidth, ...props }: TableHeadersProps) => JSX.Element;
+export declare const TableHeaders: ({ scrollLeft, columns, sortBy, setSortBy, rowHeight, rowWidth, height, ...props }: TableHeadersProps) => JSX.Element;
 export {};