fuse-importer 0.21.0 → 0.22.0

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

@@ -1,6 +1,7 @@
 import Fuse from "fuse.js";
 import React from "react";
 import { ImporterOptions, OnValidateBatch, OnValidateRecord, FormatRecord } from "../types";
+import { ImporterStylePreferences } from "./theme";
 import { FuseApi } from "./FuseApi";
 export declare const fusejsOptions: Fuse.IFuseOptions<string>;
 export declare type HeaderMatchings = {
@@ -20,8 +21,28 @@ export declare type TemplateHeader = {
     column_type: string;
     internal_key: string;
     values: string[];
+    pattern: string;
 };
-declare type State = {
+export declare type Organization = {
+    id: number;
+    name: string;
+    trial_mode: boolean;
+    plan: {
+        title: string;
+        allow_style_customization: boolean;
+        has_records_limit: boolean;
+        allowed_records: number;
+    };
+};
+export declare type Column = {
+    column_type: string;
+    internal_key: string;
+    label: string;
+    pattern: string;
+    required: boolean;
+    values: string[];
+};
+export declare type State = {
     resetImport: () => void;
     currentStepIndex: number;
     setCurrentStepIndex: React.Dispatch<number>;
@@ -46,9 +67,10 @@ declare type State = {
     fuseApi: FuseApi;
     formatRecord: FormatRecord;
     importerOptions: ImporterOptions;
-    canOrganizationCustomize: boolean;
+    theme: any;
+    logoURL: string;
 };
-declare type Props = {
+export declare type Props = {
     templateSlug: string;
     apiToken: string;
     options: ImporterOptions;
@@ -58,6 +80,11 @@ declare type Props = {
     onValidateRecord?: OnValidateRecord;
     onValidateBatch?: OnValidateBatch;
 };
+export declare type TemplateInfo = {
+    columns: Column[];
+    importer_style_preferences: ImporterStylePreferences;
+    organization: Organization;
+    name: string;
+};
 export declare const ImporterContextProvider: ({ templateSlug, apiToken, children, options, onClose, formatRecord, onValidateBatch, onValidateRecord, }: Props) => JSX.Element;
 export declare const useImporterContext: () => State;
-export {};

package/lib/esm/Importer/ImporterContextProvider.js

@@ -47,9 +47,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import Fuse from "fuse.js";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState, } from "react";
 import { FieldTypes, } from "../types";
 import { getColumnType } from "./common/utils";
+import { theme, getCustomTheme, } from "./theme";
 import { FuseApi } from "./FuseApi";
 export var fusejsOptions = {
     includeScore: true,
@@ -63,21 +64,24 @@ export var ImporterContextProvider = function (_a) {
     var _d = useState(null), templateError = _d[0], setTemplateError = _d[1];
     var _e = useState(null), templateHeaders = _e[0], setTemplateHeaders = _e[1];
     var _f = useState(null), uploadedData = _f[0], setUploadedData = _f[1];
-    var _g = useState(false), canOrganizationCustomize = _g[0], _setCanOrganizationCustomize = _g[1];
-    var _h = useState(null), templateHeaderMatchings = _h[0], setTemplateHeaderMatchings = _h[1];
-    var _j = useState(null), enumFieldValueMatchings = _j[0], setEnumFieldValueMatchings = _j[1];
-    var _k = useState(null), uploadedDataEnumFieldValues = _k[0], setUploadedDataEnumFieldValues = _k[1];
-    var _l = useState(false), inTrialMode = _l[0], setInTrialMode = _l[1];
-    var fuseApi = new FuseApi(options.env, apiToken);
-    var uploadedDataHeaders = uploadedData &&
-        uploadedData[0].map(function (ud) { return (typeof ud === "number" ? ud.toString() : ud); });
-    var setCanOrganizationCustomize = function (organization) {
-        var _a;
-        var customizablePlans = ["pro", "unlimited"];
-        var planTitle = (_a = organization.plan) === null || _a === void 0 ? void 0 : _a.title;
-        var isPlanCustomizable = customizablePlans.includes(planTitle);
-        _setCanOrganizationCustomize(isPlanCustomizable);
-    };
+    var _g = useState(null), organization = _g[0], setOrganization = _g[1];
+    var _h = useState({
+        theme: theme,
+        logoURL: null,
+    }), style = _h[0], setStyle = _h[1];
+    var _j = useState(null), templateHeaderMatchings = _j[0], setTemplateHeaderMatchings = _j[1];
+    var _k = useState(null), enumFieldValueMatchings = _k[0], setEnumFieldValueMatchings = _k[1];
+    var _l = useState(null), uploadedDataEnumFieldValues = _l[0], setUploadedDataEnumFieldValues = _l[1];
+    var fuseApi = useMemo(function () { return new FuseApi(options.env, apiToken); }, [
+        options.env,
+        apiToken,
+    ]);
+    var uploadedDataHeaders = useMemo(function () {
+        return uploadedData &&
+            uploadedData[0].map(function (ud) {
+                return typeof ud === "number" ? ud.toString() : ud;
+            });
+    }, [uploadedData]);
     useEffect(function () {
         if (!templateHeaderMatchings)
             return;
@@ -102,25 +106,30 @@ export var ImporterContextProvider = function (_a) {
         });
         setUploadedDataEnumFieldValues(_uploadedDataEnumFieldValues);
     }, [templateHeaderMatchings]);
+    useEffect(function () {
+        if (uploadedData)
+            setHeadersFromDataset();
+    }, [uploadedData]);
     useEffect(function () {
         (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var data, organization, error_1, errorMsg;
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var _a, organization_1, columns, importer_style_preferences, error_1, errorMsg;
+            var _b, _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0:
-                        _c.trys.push([0, 2, , 3]);
+                        _d.trys.push([0, 2, , 3]);
                         return [4 /*yield*/, fuseApi.get("/api/v1/importer/templates/".concat(templateSlug))];
                     case 1:
-                        data = (_c.sent()).data;
-                        organization = data.organization;
-                        setCanOrganizationCustomize(organization);
-                        setTemplateHeaders(data.columns);
-                        setInTrialMode(organization.trial_mode);
+                        _a = (_d.sent()).data, organization_1 = _a.organization, columns = _a.columns, importer_style_preferences = _a.importer_style_preferences;
+                        setOrganization(organization_1);
+                        setTemplateHeaders(columns);
+                        if (organization_1.plan && organization_1.plan.allow_style_customization) {
+                            setStyle(getCustomTheme(importer_style_preferences));
+                        }
                         return [3 /*break*/, 3];
                     case 2:
-                        error_1 = _c.sent();
-                        errorMsg = ((_b = (_a = error_1.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) ||
+                        error_1 = _d.sent();
+                        errorMsg = ((_c = (_b = error_1.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.message) ||
                             "There was an error preventing the data importer from loading. Check your API Token and try again.";
                         setTemplateError(errorMsg);
                         return [3 /*break*/, 3];
@@ -129,10 +138,6 @@ export var ImporterContextProvider = function (_a) {
             });
         }); })();
     }, []);
-    useEffect(function () {
-        if (uploadedData)
-            setHeadersFromDataset();
-    }, [uploadedData]);
     var resetImport = function () {
         setUploadedData(null);
         setTemplateHeaderMatchings(null);
@@ -147,6 +152,7 @@ export var ImporterContextProvider = function (_a) {
         });
         setTemplateHeaderMatchings(_templateHeaderMatchings);
     };
+    var inTrialMode = organization === null || organization === void 0 ? void 0 : organization.trial_mode;
     var value = {
         setUploadedData: setUploadedData,
         currentStepIndex: currentStepIndex,
@@ -172,7 +178,8 @@ export var ImporterContextProvider = function (_a) {
         inTrialMode: inTrialMode,
         onClose: onClose,
         fuseApi: fuseApi,
-        canOrganizationCustomize: canOrganizationCustomize,
+        theme: style.theme,
+        logoURL: style.logoURL,
     };
     return (_jsx(ImporterContext.Provider, __assign({ value: value }, { children: children })));
 };

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

@@ -14,6 +14,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import styled, { css } from "styled-components";
 import { FieldTypes } from "../..";
 import { Div } from "../../styled/utils";
@@ -26,11 +27,11 @@ var Dot = styled(Div)(function (_a) {
 });
 var Matcher = function () {
     var _a = useImporterContext(), matcherSubstep = _a.matcherSubstep, templateHeaders = _a.templateHeaders;
-    var enumFieldsCount = templateHeaders.filter(function (th) { return th.column_type === FieldTypes.enum; }).length;
-    var dots = [];
-    for (var step = 0; step < 2; step++)
-        dots.push(_jsx(Dot, { isSelected: matcherSubstep === step }, step));
-    return (_jsxs(_Fragment, { children: [_jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 30, mt: 40, mb: 16, alignCenter: true, spaceBetween: true }, { children: enumFieldsCount > 0 && dots })) })), matcherSubstep === 0 && _jsx(HeaderMatcher, {}), matcherSubstep === 1 && _jsx(EnumFieldsMatchers, {})] }));
+    var enumFieldsCount = useMemo(function () {
+        return templateHeaders.filter(function (th) { return th.column_type === FieldTypes.enum; }).length;
+    }, [templateHeaders]);
+    var dotsUI = (_jsxs(_Fragment, { children: [_jsx(Dot, { isSelected: matcherSubstep === 0 }), _jsx(Dot, { isSelected: matcherSubstep === 1 })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 30, mt: 40, mb: 16, alignCenter: true, spaceBetween: true }, { children: enumFieldsCount > 0 && dotsUI })) })), matcherSubstep === 0 && _jsx(HeaderMatcher, {}), matcherSubstep === 1 && _jsx(EnumFieldsMatchers, {})] }));
 };
 export { Matcher };
 var templateObject_1, templateObject_2;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PreviewModeBanner: () => JSX.Element;

package/lib/esm/Importer/PreviewModeBanner.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from "../styled/theme";
+import { Div, Span } from "../styled/utils";
+import { useImporterContext } from "./ImporterContextProvider";
+export var PreviewModeBanner = function () {
+    var previewMode = useImporterContext().importerOptions.previewMode;
+    return previewMode ? (_jsxs(Div, __assign({ bg: theme.colors.blue100, h: 80, alignCenter: true }, { children: [_jsx(Div, __assign({ ml: 33, mr: 8 }, { children: infoIcon })), _jsx(Span, __assign({ mr: 16 }, { children: "You’re currently in Preview mode." }))] }))) : null;
+};
+var infoIcon = (_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: "14", cy: "2.5", r: "2.5", fill: "#0EBEBE" }), _jsx("path", { d: "M15.5075 8H6L5 10.5L10 11L6.57474 18.9354C6.57474 18.9354 6.40657 20.1663 6.57474 20.9247C6.76276 21.7725 6.97074 22.2838 7.56727 22.9139C8.6672 24.0757 9.95115 24.1037 11.5374 23.9085C14.2577 23.5737 17 19.5 17 19.5L15.5075 17.9408C15.5075 17.9408 13.5223 19.93 12.5298 19.93C11.5373 19.93 11.5374 18.9354 11.5374 18.9354L15.5075 8Z", fill: "#0EBEBE" })] })));

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

@@ -14,18 +14,11 @@ import { useMemo } from "react";
 import { Div } from "../../styled/utils";
 import { FieldTypes } from "../../types";
 import { Spreadsheet } from "../common/Spreadsheet";
+import { isFloat, isInteger, isTrue } from "../common/Spreadsheet/common/index";
 import { getColumnType, getSpreadsheetRowWidth } from "../common/utils";
 import { useImporterContext } from "../ImporterContextProvider";
 import { useSpreadsheetReviewContext } from "../SpreadsheetReviewContextProvider";
 import { AppResponseModal } from "./AppResponseModal";
-var valueIsTrue = function (value) {
-    var _value = (value || "").toString().toLowerCase();
-    return ["true", "yes", "1", "y", "on", "t"].includes(_value);
-};
-var valueIsInteger = function (value) { return /^-?[0-9]+$/.test(value + ""); };
-var valueIsNumber = function (value) {
-    return /^-?[0-9]+(?:\.[0-9]+)?$/.test(value + "");
-};
 var useInitialData = function () {
     var _a = useImporterContext(), templateHeaderMatchings = _a.templateHeaderMatchings, enumFieldValueMatchings = _a.enumFieldValueMatchings, templateHeaders = _a.templateHeaders, uploadedDataHeaders = _a.uploadedDataHeaders, uploadedData = _a.uploadedData, formatRecord = _a.formatRecord;
     return useMemo(function () {
@@ -50,11 +43,11 @@ var useInitialData = function () {
                 if (columnType === FieldTypes.enum)
                     record[key] = enumFieldValueMatchings[templateLabel][value];
                 if (columnType === FieldTypes.boolean)
-                    record[key] = valueIsTrue(value);
+                    record[key] = isTrue(value);
                 if (columnType === FieldTypes.float)
-                    record[key] = valueIsNumber(value) ? parseFloat(value) : undefined;
+                    record[key] = isFloat(value) ? parseFloat(value) : value;
                 if (columnType === FieldTypes.integer)
-                    record[key] = valueIsInteger(value) ? parseInt(value) : undefined;
+                    record[key] = isInteger(value) ? parseInt(value) : value;
             });
             return formatRecord ? formatRecord(record) : record;
         };
@@ -71,13 +64,16 @@ var Review = function () {
     var _a = useImporterContext(), templateHeaders = _a.templateHeaders, onValidateRecord = _a.onValidateRecord, onValidateBatch = _a.onValidateBatch, _b = _a.importerOptions, batchValidationDelayMs = _b.batchValidationDelayMs, batchValidationSize = _b.batchValidationSize;
     var initialData = useInitialData();
     var _c = useSpreadsheetReviewContext(), submittedData = _c.submittedData, appResponse = _c.appResponse, setReviewedData = _c.setReviewedData;
-    var fields = templateHeaders.map(function (templateHeader) { return ({
-        label: templateHeader.label,
-        name: templateHeader.internal_key,
-        type: FieldTypes[templateHeader.column_type] || FieldTypes.string,
-        isRequired: templateHeader.required,
-        options: templateHeader.values,
-    }); });
+    var fields = useMemo(function () {
+        return templateHeaders.map(function (templateHeader) { return ({
+            label: templateHeader.label,
+            name: templateHeader.internal_key,
+            type: FieldTypes[templateHeader.column_type] || FieldTypes.string,
+            isRequired: templateHeader.required,
+            options: templateHeader.values,
+            pattern: templateHeader.pattern,
+        }); });
+    }, [templateHeaders]);
     var spreadsheetUI = useMemo(function () { return (_jsx(Div, { children: _jsx(Spreadsheet, __assign({ rowWidth: getSpreadsheetRowWidth(fields, 6), options: {
                 batchValidationDelayMs: batchValidationDelayMs,
                 batchValidationSize: batchValidationSize || initialData.length,

package/lib/esm/Importer/SpreadsheetReviewContextProvider.js

@@ -47,8 +47,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useState } from "react";
-import { getUnsubmittedData } from ".";
 import { AppLoading } from "./common/AppLoading";
+import { getUnsubmittedData } from "./common/utils";
 import { useImporterContext } from "./ImporterContextProvider";
 var SpreadsheetReviewContext = createContext({});
 export var SpreadsheetReviewContextProvider = function (_a) {

package/lib/esm/Importer/Stepper.js

@@ -31,7 +31,7 @@ var StepIndexWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __mak
     return p.isSelected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 32px;\n      width: 32px;\n      border: solid 1px ", ";\n      color: ", ";\n      background-color: ", ";\n    "], ["\n      height: 32px;\n      width: 32px;\n      border: solid 1px ", ";\n      color: ", ";\n      background-color: ", ";\n    "])), function (p) { return p.theme.colors.blue500; }, function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.blue500; });
 });
 var StepperWrapper = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  user-select: none;\n  border-bottom: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  user-select: none;\n  border-bottom: 1px solid ", ";\n"])), function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.gray300; });
-var Logo = styled.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  max-height: 70px;\n  position: absolute;\n  left: 41px;\n"], ["\n  max-height: 70px;\n  position: absolute;\n  left: 41px;\n"])));
+var Logo = styled.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  max-height: 70px;\n  max-width: 300px;\n  position: absolute;\n  left: 41px;\n"], ["\n  max-height: 70px;\n  max-width: 300px;\n  position: absolute;\n  left: 41px;\n"])));
 var StepIndex = function (_a) {
     var index = _a.index, isSelected = _a.isSelected, isCompleted = _a.isCompleted;
     return (_jsx(_Fragment, { children: isCompleted ? (_jsx(Div, __assign({ centered: true, body2: true, bold: true, mr: 8 }, { children: whiteCheckIcon }))) : (_jsx(StepIndexWrapper, __assign({ centered: true, body2: true, bold: true, mr: 8, isSelected: isSelected }, { children: index }))) }));
@@ -112,8 +112,15 @@ var Stepper = function (_a) {
         }
     };
     var goBack = function () {
-        setMatcherSubstep(0);
-        setCurrentStepIndex(currentStepIndex - 1);
+        var isMatchingColumnValues = matcherSubstep === 1;
+        var isInMachStep = currentStepIndex === 1;
+        var shouldBackOnlyMatcherSubStep = isMatchingColumnValues && isInMachStep;
+        if (shouldBackOnlyMatcherSubStep) {
+            setMatcherSubstep(matcherSubstep - 1);
+        }
+        else {
+            setCurrentStepIndex(currentStepIndex - 1);
+        }
     };
     var skipStep = function () {
         setStep();

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

@@ -61,7 +61,10 @@ var ImporterDropzone = function () {
             reader.onload = function (event) {
                 var results = event.target.result;
                 var getDataFromFile = function (fileResults) {
-                    var workBook = XLSX.read(fileResults, { type: "array" });
+                    var workBook = XLSX.read(fileResults, {
+                        type: "array",
+                        raw: true,
+                    });
                     var workBookName = workBook.SheetNames[0];
                     var sheet = workBook.Sheets[workBookName];
                     return XLSX.utils.sheet_to_json(sheet, { header: 1 });

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

@@ -30,6 +30,7 @@ import { useImporterContext } from "../ImporterContextProvider";
 import { FieldTypes } from "../../types";
 import { Div } from "../../styled/utils";
 import { getSpreadsheetRowWidth } from "../common/utils";
+import { useMemo } from "react";
 var HeaderButtonsWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > div {\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n"], ["\n  > div {\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n"])));
 var HeaderButtons = function () {
     var _a = useImporterContext(), setCurrentStepIndex = _a.setCurrentStepIndex, resetImport = _a.resetImport;
@@ -40,13 +41,14 @@ var HeaderButtons = function () {
 };
 var HeadersPreview = function () {
     var uploadedData = useImporterContext().uploadedData;
-    var formattedData = (function () {
+    var formattedData = useMemo(function () {
         var firstRowLen = 0;
-        if (uploadedData.length > 0 && Array.isArray(uploadedData[0]))
+        if (uploadedData.length > 0 && Array.isArray(uploadedData[0])) {
             firstRowLen = uploadedData[0].length;
-        var placeholderHeaders = __spreadArray([], Array(firstRowLen), true).map(function (_, i) {
-            return String.fromCharCode(65 + i);
-        });
+        }
+        var placeholderHeaders = new Array(firstRowLen)
+            .fill(null)
+            .map(function (_, i) { return String.fromCharCode(65 + i); });
         var getDataRows = function () {
             var emptyRows = [];
             if (uploadedData.length < 20)
@@ -60,18 +62,18 @@ var HeadersPreview = function () {
                 return entry;
             });
         };
-        var dataRows = getDataRows();
-        return dataRows;
-    })();
-    var placeholderFields = Object.keys(formattedData[0]);
-    var readonlyFields = placeholderFields.map(function (key) {
-        return {
-            label: key,
-            name: key,
-            type: FieldTypes.string,
-            isRequired: false,
-        };
-    });
+        return getDataRows();
+    }, [uploadedData]);
+    var readonlyFields = useMemo(function () {
+        return Object.keys(formattedData[0]).map(function (key) {
+            return {
+                label: key,
+                name: key,
+                type: FieldTypes.string,
+                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" })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "File must contain column headers to proceed." })), _jsx(HeaderButtons, {}), _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 })) }))] })) }));
 };
 export default HeadersPreview;

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

@@ -55,7 +55,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState, useMemo, } from "react";
 import { formatBatchErrors } from "../../..";
 import { getRecordErrors, getRenderedRecordWithErrors, recordIsEmpty, } from "./common";
 var MINIMUM_ROW_COUNT = 20;
@@ -102,10 +102,10 @@ 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 batchValidationDelayMs, batchValidationSize, addEmtpyRows, validateInBatches;
+            var batchValidationDelayMs, batchValidationSize, addEmptyRows, validateInBatches;
             return __generator(this, function (_a) {
                 batchValidationDelayMs = options.batchValidationDelayMs, batchValidationSize = options.batchValidationSize;
-                addEmtpyRows = function () {
+                addEmptyRows = function () {
                     var newData = __spreadArray([], data, true);
                     var emptyRecord = fields.reduce(function (obj, f) {
                         var _a;
@@ -120,7 +120,7 @@ export var SpreadsheetContextProvider = function (_a) {
                     setData(newData);
                 };
                 if (data.length < MINIMUM_ROW_COUNT)
-                    addEmtpyRows();
+                    addEmptyRows();
                 validateInBatches = function () { return __awaiter(void 0, void 0, void 0, function () {
                     var validationErrors, batchSize, batchCount, batchIdx, idx, batch, errors, validationPercentage;
                     return __generator(this, function (_a) {
@@ -280,7 +280,9 @@ var useValidationState = function (_a) {
         };
         updateErrorCounts();
     }, [data, batchValidationErrors]);
-    var totalErrors = Object.keys(columnErrorCounts).reduce(function (total, key) { return total + (columnErrorCounts[key] || 0); }, 0);
+    var totalErrors = useMemo(function () {
+        return Object.keys(columnErrorCounts).reduce(function (total, key) { return total + (columnErrorCounts[key] || 0); }, 0);
+    }, []);
     var isValidationComplete = batchValidationErrors && totalErrors === 0;
     return { columnErrorCounts: columnErrorCounts, totalErrors: totalErrors, isValidationComplete: isValidationComplete };
 };

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { Field } from "../../../../types";
+export declare type FieldHeaderProps = {
+    field: Field;
+    sortByFieldErrors: (name: string) => void;
+};
+export declare const FieldHeader: React.FC<FieldHeaderProps>;

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

@@ -0,0 +1,31 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { TooltipProvider } from "../../../../common";
+import { Div } from "../../../../styled/utils";
+import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
+import styled, { css } from "styled-components";
+var ErrorCount = styled(Div)(function (_a) {
+    var _b = _a.theme, colors = _b.colors, c = _b.css;
+    return css(templateObject_1 || (templateObject_1 = __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);
+});
+export var FieldHeader = function (_a) {
+    var field = _a.field, sortByFieldErrors = _a.sortByFieldErrors;
+    var columnErrorCounts = useSpreadsheetContext().columnErrorCounts;
+    var fieldErrorCount = columnErrorCounts[field.name];
+    return (_jsxs(Div, __assign({ p: "0 16px", spaceBetween: true, w100: true, alignCenter: true }, { children: [_jsxs(Div, __assign({ truncateText: true }, { children: [field.label, field.isRequired && "*"] })), fieldErrorCount && (_jsx(TooltipProvider, __assign({ mr: 3, w: 35, tooltip: "Sort by ".concat(field.label, " errors") }, { children: _jsx(ErrorCount, __assign({ onClick: function () { return sortByFieldErrors(field.name); } }, { children: _jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 35, textAlignCenter: true, label3: true, truncateText: true }, { children: fieldErrorCount })) })) })) })))] })));
+};
+var templateObject_1;

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

@@ -1,7 +1,12 @@
-/// <reference types="react" />
-export declare const SpreadsheetAutocomplete: ({ name, record, options, isInputDisabled, }: {
-    name: any;
-    record: any;
-    options: any;
+import React from "react";
+import { Option } from "../../../../../common/inputs/Autocomplete";
+import { Record, FieldTypes } from "../../../../../types";
+export declare type AutoCompleteOption = Option;
+export declare type SpreadsheetAutocompleteProps = {
+    name: string;
+    record: Record;
+    options: AutoCompleteOption[];
     isInputDisabled?: boolean;
-}) => JSX.Element;
+    fieldType: FieldTypes;
+};
+export declare const SpreadsheetAutocomplete: React.FC<SpreadsheetAutocompleteProps>;

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

@@ -15,9 +15,9 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
-import { SpreadsheetField, useSpreadsheetField, useValidationError } from ".";
+import { SpreadsheetField, useSpreadsheetField } from ".";
 import { spreadsheetRowHeightPx } from "..";
-import { Autocomplete as AutocompleteBase } from "../../../../../common/inputs/Autocomplete";
+import { Autocomplete as AutocompleteBase, } from "../../../../../common/inputs/Autocomplete";
 import { SelectMenuDiv, SelectMenuScrollArea, } from "../../../../../common/inputs/SelectMenu";
 import { HTMLInput, TextInputIcon, } from "../../../../../common/inputs/TextInput";
 import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
@@ -26,12 +26,11 @@ var Autocomplete = styled(AutocompleteBase)(templateObject_3 || (templateObject_
 }, function (p) {
     return p.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), function (p) { return p.theme.colors.error; });
 }, 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;
+export var SpreadsheetAutocomplete = function (props) {
+    var name = props.name, record = props.record, options = props.options, fieldType = props.fieldType, _a = props.isInputDisabled, isInputDisabled = _a === void 0 ? false : _a;
+    var _b = useSpreadsheetField(name, record, fieldType), value = _b.value, setValue = _b.setValue, validationError = _b.validationError;
     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, icon: chevronDownIcon, onChange: function (v) { return setValue(v); } }) })));
+    return (_jsx(SpreadsheetField, __assign({ validationError: validationError }, { 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); } }) })));
 };
 var chevronDownIcon = (_jsx("svg", __assign({ width: "10", height: "6", viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M8.46289 1L4.98131 4.48159L1.49972 1", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { HTMLInputCSSProps } from "../../../../../styled/utils";
-import { Record } from "../../../../../types";
-declare type SpreadsheetTextInputArgs = {
+import { FieldTypes, Record } from "../../../../../types";
+export declare type SpreadsheetTextInputArgs = {
     name: string;
     record: Record;
+    fieldType: FieldTypes;
 } & HTMLInputCSSProps;
-export declare const SpreadsheetInput: ({ name, record, ...props }: SpreadsheetTextInputArgs) => JSX.Element;
+export declare const SpreadsheetInput: ({ name, record, fieldType, ...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/SpreadsheetInput.js

@@ -26,12 +26,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
-import { SpreadsheetField, useSpreadsheetField, useValidationError } from ".";
+import { SpreadsheetField, useSpreadsheetField } from ".";
 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, __assign({ hasError: !!validationError, value: value || "", onChange: function (_a) {
+    var name = _a.name, record = _a.record, fieldType = _a.fieldType, props = __rest(_a, ["name", "record", "fieldType"]);
+    var _b = useSpreadsheetField(name, record, fieldType), value = _b.value, setValue = _b.setValue, validationError = _b.validationError;
+    return (_jsx(SpreadsheetField, __assign({ validationError: validationError }, { children: _jsx(Input, __assign({ hasError: !!validationError, value: value || "", onChange: function (_a) {
                 var value = _a.target.value;
                 return setValue(value);
             } }, props)) })));

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

@@ -1,14 +1,15 @@
 import React from "react";
-import { Record } from "../../../../../types";
+import { FieldTypes, Record } from "../../../../../types";
+export declare const parseValue: (fieldType: FieldTypes, value: any) => any;
 export declare const useValidationError: (fieldName: string, record: Record) => {
     validationError: any;
 };
-export declare const useSpreadsheetField: (name: any, record: Record) => {
+export declare const useSpreadsheetField: (name: any, record: Record, fieldType: FieldTypes) => {
     value: any;
     setValue: React.Dispatch<any>;
+    validationError: any;
 };
-export declare const SpreadsheetField: ({ name, record, children }: {
-    name: any;
-    record: any;
+export declare const SpreadsheetField: ({ validationError, children }: {
+    validationError: any;
     children: any;
 }) => JSX.Element;