fuse-importer 0.24.4 → 0.25.0

package/README.md

@@ -80,7 +80,7 @@ If you don't have an account yet, you can go over the [Registration](https://fus
 
 ## Create Your First Importer
 
-If you don’t have a Importer yet, you can go over [Create Your First Importer](https://fuse-docs.flatirons.com/getting-started/create-your-first-template?utm_source=npmjs&utm_medium=Create+Your+First+Template&utm_campaign=NPM). Importer represents the fields and validations that your own system accepts, also known as your data schema.
+If you don’t have an Importer yet, you can go over [Create Your First Importer](https://fuse-docs.flatirons.com/getting-started/create-your-first-template?utm_source=npmjs&utm_medium=Create+Your+First+Template&utm_campaign=NPM). Importer represents the fields and validations that your own system accepts, also known as your data schema.
 
 ## Getting started
 
@@ -180,26 +180,35 @@ importer.onClose = () => {
 
 #### `onValidateRecord`
 
-The `onValidationRecord` hook is called for each row (record) that a customer uploads. It allows you to specify custom frontend validations and display error messages in the importer for the user to fix. When you create a importer, each column contains an `internal key`. These internal keys represent the
+The `onValidationRecord` hook is called for each row (record) that a customer uploads. It allows you to specify custom frontend validations and display error messages in the importer for the user to fix. When you create an importer, each column contains an `internal key`. These internal keys represent the
 
 Return values:
 
-- If the record has no errors, we expect you to return an empty object: `return {}`;
-- If the record has validation errors, you can specify them like so:
+- If the record has no errors, we expect you to return an empty object: `return {}`.
+- If the record has validation errors, you can specify them like below.
+- If the record has validation warnings, you can specify them like so:
 
 ```typescript
 importer.onValidateRecord = async (record) => {
   const errors = {};
+  const warnings = {};
 
   // force emails to include gmail
   if (!record.email?.includes("gmail")) {
     errors["email"] = "Email must be from Gmail";
   }
 
-  return errors;
+  // email should be from the domain.
+  if (!record.email?.includes("@example.com")) {
+    warnings["email"] = "Email is outside the domain";
+  }
+
+  return { errors: errors, warnings: warnings };
 };
 ```
 
+`warnings` will still allow you to submit the spreadsheet, unlike `errors`.
+
 #### `formatRecord`
 
 The `formatRecord` hook can be used to format data automatically on behalf of a user. For example, if you have a field called `first_name` and you know that your system always requires `first_name` to be capitalized, you can use this callback to uppercase all `first_name` records like so:

package/lib/esm/Importer/ImporterWithContext.js

@@ -51,7 +51,7 @@ var Content = styled(Div)(function (_a) {
     return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    padding-bottom: 70px;\n  "], ["\n    background-color: ", ";\n    padding-bottom: 70px;\n  "])), colors.backgroundInterface);
 });
 export var ImporterWithContext = function () {
-    var _a = useImporterContext(), inTrialMode = _a.inTrialMode, currentStepIndex = _a.currentStepIndex, matcherSubstep = _a.matcherSubstep, theme = _a.theme, logoURL = _a.logoURL, previewFirstTime = _a.previewFirstTime, _b = _a.importerOptions, zIndex = _b.zIndex, loadingComponent = _b.loadingComponent, previewMode = _b.previewMode;
+    var _a = useImporterContext(), inTrialMode = _a.inTrialMode, currentStepIndex = _a.currentStepIndex, matcherSubstep = _a.matcherSubstep, theme = _a.theme, logoURL = _a.logoURL, previewFirstTime = _a.previewFirstTime, _b = _a.importerOptions, zIndex = _b.zIndex, previewMode = _b.previewMode;
     var layoutRef = useRef(null);
     var t = useTranslation().t;
     useEffect(function () {

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

@@ -13,11 +13,13 @@ type State = {
     highlightFirstRow: boolean;
     options: SpreadsheetOptions;
     sortByFieldErrors: string;
+    sortByFieldWarnings: string;
     updateRecord: (record: Record) => void;
     setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
     setSortByFieldErrors: React.Dispatch<React.SetStateAction<string>>;
     selectedRows: number[];
     setSelectedRows: React.Dispatch<React.SetStateAction<number[]>>;
+    setSortByFieldWarnings: React.Dispatch<React.SetStateAction<string>>;
 } & ValidationState;
 type Props = {
     initialDataSet: RecordDataSet;

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

@@ -30,8 +30,10 @@ export var SpreadsheetContextProvider = function (_a) {
     var _c = useState(initialDataSet), dataSet = _c[0], setDataSet = _c[1];
     var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
     var _e = useState(null), sortByFieldErrors = _e[0], setSortByFieldErrors = _e[1];
+    var _f = useState(null), sortByFieldWarnings = _f[0], setSortByFieldWarnings = _f[1];
     var sortByCurrentErrorsRef = useRef({});
-    var _f = useValidationState({
+    var sortByCurrentWarningsRef = useRef({});
+    var _g = useValidationState({
         dataSet: dataSet,
         initialDataSet: initialDataSet,
         fields: fields,
@@ -40,22 +42,23 @@ export var SpreadsheetContextProvider = function (_a) {
         setDataSet: setDataSet,
         setIsLoading: setIsLoading,
         onValidateRecord: onValidateRecord,
-    }), errorsRef = _f.errorsRef, updateRecordAndRevalidate = _f.updateRecordAndRevalidate, validationState = __rest(_f, ["errorsRef", "updateRecordAndRevalidate"]);
+    }), errorsRef = _g.errorsRef, warningsRef = _g.warningsRef, updateRecordAndRevalidate = _g.updateRecordAndRevalidate, validationState = __rest(_g, ["errorsRef", "warningsRef", "updateRecordAndRevalidate"]);
     // sort data based on errors (errors group on top and not errors group at bottom)
     var data = useMemo(function () {
         var errors = sortByCurrentErrorsRef.current; //Sort errors snapshot
+        var warnings = sortByCurrentWarningsRef.current; //Sort warnings snapshot
         var dataSetValues = Object.values(dataSet);
-        if (!sortByFieldErrors)
+        if (!sortByFieldErrors && !sortByFieldWarnings)
             return dataSetValues;
         return dataSetValues.sort(function (a, b) {
-            var aHasErrors = !!get(errors, "".concat(get(a, "_meta.id"), ".").concat(sortByFieldErrors), false);
-            var bHasErrors = !!get(errors, "".concat(get(b, "_meta.id"), ".").concat(sortByFieldErrors), false);
+            var aHasErrors = !!get(sortByFieldErrors ? errors : warnings, "".concat(get(a, "_meta.id"), ".").concat(sortByFieldErrors || sortByFieldWarnings), false);
+            var bHasErrors = !!get(sortByFieldErrors ? errors : warnings, "".concat(get(b, "_meta.id"), ".").concat(sortByFieldErrors || sortByFieldWarnings), false);
             if (aHasErrors === bHasErrors) {
                 return a._meta.rowIndex > b._meta.rowIndex ? 1 : -1;
             }
             return bHasErrors ? 1 : -1;
         });
-    }, [dataSet, sortByFieldErrors]);
+    }, [dataSet, sortByFieldErrors, sortByFieldWarnings]);
     useEffect(function () {
         onDataSetChanged && onDataSetChanged(dataSet);
     }, [dataSet]);
@@ -69,8 +72,15 @@ export var SpreadsheetContextProvider = function (_a) {
         //current errors snapshot for use on sort to keep data sorted without changing with each edit or revalidation.
         sortByCurrentErrorsRef.current = __assign({}, errorsRef.current);
         setSortByFieldErrors(value);
+        setSortByFieldWarnings(null);
     }, []);
-    var value = __assign(__assign({ data: data, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, rowWidth: rowWidth, sortByFieldErrors: sortByFieldErrors, highlightFirstRow: highlightFirstRow, options: options, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows });
+    var handleSortByFieldWarnings = useCallback(function (value) {
+        //current errors snapshot for use on sort to keep data sorted without changing with each edit or revalidation.
+        sortByCurrentWarningsRef.current = __assign({}, warningsRef.current);
+        setSortByFieldWarnings(value);
+        setSortByFieldErrors(null);
+    }, []);
+    var value = __assign(__assign({ data: data, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, rowWidth: rowWidth, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, highlightFirstRow: highlightFirstRow, options: options, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, setSortByFieldWarnings: handleSortByFieldWarnings, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows });
     return (_jsx(SpreadsheetContext.Provider, __assign({ value: value }, { children: children })));
 };
 export var useSpreadsheetContext = function () { return useContext(SpreadsheetContext); };

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

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

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

@@ -14,6 +14,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { colors } from "../../../../styled/theme/colorPalette";
 import styled, { css } from "styled-components";
 import { TooltipProvider } from "../../../../common";
 import { Div } from "../../../../styled/utils";
@@ -23,9 +24,14 @@ var ErrorCount = styled(Div)(function (_a) {
     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 field = _a.field, sortByFieldErrors = _a.sortByFieldErrors, sortByFieldWarnings = _a.sortByFieldWarnings;
+    var _b = useSpreadsheetContext(), columnErrorCounts = _b.columnErrorCounts, columnWarningCounts = _b.columnWarningCounts;
     var fieldErrorCount = columnErrorCounts[field.name];
-    return (_jsxs(Div, __assign({ "data-test-id": "column-header-".concat(field.name), 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({ "data-test-id": "column-errors-count-".concat(field.name), 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 fieldWarningCount = columnWarningCounts[field.name];
+    return (_jsxs(Div, __assign({ "data-test-id": "column-header-".concat(field.name), 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({ "data-test-id": "column-errors-count-".concat(field.name), 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 })) })) })) }))), !fieldErrorCount && fieldWarningCount && (_jsx(TooltipProvider, __assign({ mr: 3, w: 35, tooltip: "Sort by ".concat(field.label, " errors") }, { children: _jsx(ErrorCount, __assign({ style: {
+                        color: colors.orange1200,
+                        background: colors.orange1100,
+                        boxShadow: "0px 0px 0px 1px ".concat(colors.orange500, " inset"),
+                    }, "data-test-id": "column-errors-count-".concat(field.name), onClick: function () { return sortByFieldWarnings(field.name); } }, { children: _jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 35, textAlignCenter: true, label3: true, truncateText: true }, { children: fieldWarningCount })) })) })) })))] })));
 };
 var templateObject_1;

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

@@ -36,7 +36,7 @@ import { SpreadsheetRowCheckboxes } from "./SpreadsheetRowCheckboxes";
 import ValidationProgress from "./ValidationProgress";
 var getItemKey = function (record) { return record._meta.id; };
 var SpreadsheetData = function () {
-    var _a = useSpreadsheetContext(), fields = _a.fields, data = _a.data, isLoading = _a.isLoading, isReadOnly = _a.isReadOnly, rowWidth = _a.rowWidth, totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage, setSortByFieldErrors = _a.setSortByFieldErrors, options = _a.options;
+    var _a = useSpreadsheetContext(), fields = _a.fields, data = _a.data, isLoading = _a.isLoading, isReadOnly = _a.isReadOnly, rowWidth = _a.rowWidth, totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage, setSortByFieldErrors = _a.setSortByFieldErrors, options = _a.options, setSortByFieldWarnings = _a.setSortByFieldWarnings;
     var rowNumbersGridRef = useRef();
     var rowCheckboxesGridRef = useRef();
     var sortByErrors = useCallback(function (field) {
@@ -44,9 +44,14 @@ var SpreadsheetData = function () {
             return sortByFieldErrors === field ? null : field;
         });
     }, []);
+    var sortByWarnings = useCallback(function (field) {
+        return setSortByFieldWarnings(function (sortByFieldWarnings) {
+            return sortByFieldWarnings === field ? null : field;
+        });
+    }, []);
     var columns = useMemo(function () {
         return fields.map(function (field) { return ({
-            Header: function () { return (_jsx(FieldHeader, { field: field, sortByFieldErrors: sortByErrors })); },
+            Header: function () { return (_jsx(FieldHeader, { field: field, sortByFieldErrors: sortByErrors, sortByFieldWarnings: sortByWarnings })); },
             Content: function (record) {
                 var Input = inputTypes[field.type];
                 var rowIndex = record.rowIndex, recordProp = __rest(record, ["rowIndex"]);

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

@@ -20,15 +20,19 @@ import { Autocomplete as AutocompleteBase, } from "../../../../../common/inputs/
 import { SelectMenuDiv, SelectMenuScrollArea, } from "../../../../../common/inputs/SelectMenu";
 import { HTMLInput, TextInputIcon, } from "../../../../../common/inputs/TextInput";
 import { spreadsheetRowHeightPx } from "../../common";
-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; });
+var Autocomplete = styled(AutocompleteBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", " {\n    border: none;\n    border-radius: 0;\n    margin: 0;\n    background: transparent;\n    height: ", "px;\n    padding: 0 12px;\n\n    ", "\n\n    ::placeholder {\n      ", "\n\n      ", "\n\n        ::placeholder {\n        ", "\n      }\n    }\n    :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      ", "\n\n        ::placeholder {\n        ", "\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.hasWarning && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), function (p) { return p.theme.colors.orange1200; });
 }, function (p) {
-    return p.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), function (p) { return p.theme.colors.error; });
+    return p.hasWarning && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), function (p) { return p.theme.colors.orange1200; });
+}, function (p) {
+    return p.hasError && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), function (p) { return p.theme.colors.error; });
+}, function (p) {
+    return p.hasError && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            color: ", ";\n          "], ["\n            color: ", ";\n          "])), function (p) { return p.theme.colors.error; });
 }, TextInputIcon, SelectMenuDiv, SelectMenuScrollArea);
 export var SpreadsheetAutocomplete = function (props) {
     var name = props.name, record = props.record, options = props.options, fieldType = props.fieldType, _a = props.isInputDisabled, isInputDisabled = _a === void 0 ? false : _a, id = props.id;
-    var _b = useSpreadsheetField(name, record, fieldType), value = _b.value, setValue = _b.setValue, validationError = _b.validationError;
-    return (_jsx(SpreadsheetField, __assign({ validationError: validationError }, { children: _jsx(Autocomplete, { placement: "bottom", isInputDisabled: isInputDisabled, hasError: !!validationError, options: options, value: value, icon: chevronDownIcon, onChange: function (v) { return setValue(v); }, id: id }) })));
+    var _b = useSpreadsheetField(name, record, fieldType), value = _b.value, setValue = _b.setValue, validationError = _b.validationError, validationWarning = _b.validationWarning;
+    return (_jsx(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning }, { children: _jsx(Autocomplete, { placement: "bottom", isInputDisabled: isInputDisabled, hasError: !!validationError, hasWarning: !!validationWarning, options: options, value: value, icon: chevronDownIcon, onChange: function (v) { return setValue(v); }, id: id }) })));
 };
 var 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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -8,4 +8,5 @@ export type SpreadsheetTextInputArgs = {
 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;
+    hasWarning?: boolean;
 } & import("../../../../../styled/utils").HTMLInputProps & import("../../../../../styled/utils").CSSProps, never>;

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

@@ -29,13 +29,15 @@ import styled, { css } from "styled-components";
 import { SpreadsheetField, useSpreadsheetField } from ".";
 export var SpreadsheetInput = function (_a) {
     var name = _a.name, record = _a.record, fieldType = _a.fieldType, props = __rest(_a, ["name", "record", "fieldType"]);
-    var _b = useSpreadsheetField(name, record, fieldType), value = _b.value, setValue = _b.setValue, validationError = _b.validationError;
-    return (_jsx(SpreadsheetField, __assign({ validationError: validationError }, { children: _jsx(Input, __assign({ hasError: !!validationError, value: value || "", onChange: function (_a) {
+    var _b = useSpreadsheetField(name, record, fieldType), value = _b.value, setValue = _b.setValue, validationError = _b.validationError, validationWarning = _b.validationWarning;
+    return (_jsx(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning }, { children: _jsx(Input, __assign({ hasError: !!validationError, hasWarning: !!validationWarning, value: value || "", onChange: function (_a) {
                 var value = _a.target.value;
                 return setValue(value);
             } }, props)) })));
 };
-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; });
+export var Input = styled.input(templateObject_3 || (templateObject_3 = __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  ", "\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\n  ", "\n"])), function (props) { return props.theme.css.body1; }, function (props) { return props.theme.colors.gray1000; }, function (props) { return props.theme.colors.placeholder; }, function (p) {
+    return p.hasWarning && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.orange1200; });
+}, function (p) {
+    return p.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.error; });
 });
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,10 +1,12 @@
 import { FieldTypes, Record } from "../../../../../types";
-export declare const useSpreadsheetField: (name: any, record: Record, fieldType: FieldTypes) => {
+export declare const useSpreadsheetField: (name: string, record: Record, fieldType: FieldTypes) => {
     value: any;
     setValue: (value: any) => void;
     validationError: any;
+    validationWarning: any;
 };
-export declare const SpreadsheetField: ({ validationError, children }: {
+export declare const SpreadsheetField: ({ validationError, validationWarning, children, }: {
     validationError: any;
+    validationWarning: any;
     children: any;
 }) => JSX.Element;

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

@@ -58,9 +58,10 @@ import { Div } from "../../../../../styled/utils";
 import { parseValue } from "../../common";
 import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
 export var useSpreadsheetField = function (name, record, fieldType) {
-    var _a = useSpreadsheetContext(), updateRecord = _a.updateRecord, errors = _a.errors;
+    var _a = useSpreadsheetContext(), updateRecord = _a.updateRecord, errors = _a.errors, warnings = _a.warnings;
     var _b = useState(record[name]), value = _b[0], setValue = _b[1];
     var validationError = get(errors, "".concat(record._meta.id, ".").concat(name), null);
+    var validationWarning = get(warnings, "".concat(record._meta.id, ".").concat(name), null);
     var updateData = useCallback(debounce(function (value) { return __awaiter(void 0, void 0, void 0, function () {
         var newRecord;
         var _a;
@@ -74,20 +75,22 @@ export var useSpreadsheetField = function (name, record, fieldType) {
         setValue(value);
         updateData(value);
     }, [record, updateData]);
-    return { value: value, setValue: updateValue, validationError: validationError };
+    return { value: value, setValue: updateValue, validationError: validationError, validationWarning: validationWarning };
 };
-var ContentContainer = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: calc(100% - 1px);\n  width: 100%;\n  ", ";\n  ", "\n  ", "\n"], ["\n  height: calc(100% - 1px);\n  width: 100%;\n  ", ";\n  ", "\n  ", "\n"])), function (p) { return p.theme.css.alignCenter; }, function (p) {
-    return p.hasError && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.error; }, function (p) { return p.theme.colors.red100; }, function (p) { return p.theme.colors.error; });
+var ContentContainer = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: calc(100% - 1px);\n  width: 100%;\n  ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  height: calc(100% - 1px);\n  width: 100%;\n  ", ";\n  ", "\n  ", "\n  ", "\n"])), function (p) { return p.theme.css.alignCenter; }, function (p) {
+    return p.hasWarning && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.orange1200; }, function (p) { return p.theme.colors.orange1100; }, function (p) { return p.theme.colors.orange500; });
 }, function (p) {
-    return p.isReadOnly && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
+    return p.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.error; }, function (p) { return p.theme.colors.red100; }, function (p) { return p.theme.colors.error; });
+}, function (p) {
+    return p.isReadOnly && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 });
 var Wrapper = styled(Div)(function (_a) {
     var isLoading = _a.isLoading;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), isLoading && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "]))));
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), isLoading && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "]))));
 });
 export var SpreadsheetField = function (_a) {
-    var validationError = _a.validationError, children = _a.children;
+    var validationError = _a.validationError, validationWarning = _a.validationWarning, children = _a.children;
     var _b = useSpreadsheetContext(), isReadOnly = _b.isReadOnly, isLoading = _b.isLoading;
-    return (_jsx(Wrapper, __assign({ dim: "100%", isLoading: isLoading }, { children: _jsx(TooltipProvider, __assign({ tooltip: validationError }, { children: _jsx(Div, __assign({ dim: "100%" }, { children: _jsx(ContentContainer, __assign({ hasError: !!validationError, isReadOnly: isReadOnly }, { children: children })) })) })) })));
+    return (_jsx(Wrapper, __assign({ dim: "100%", isLoading: isLoading }, { children: _jsx(TooltipProvider, __assign({ tooltip: validationError || validationWarning }, { children: _jsx(Div, __assign({ dim: "100%" }, { children: _jsx(ContentContainer, __assign({ hasError: !!validationError, hasWarning: !!validationWarning, isReadOnly: isReadOnly }, { children: children })) })) })) })));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -16,14 +16,19 @@ export type ValidationState = {
     isValidationCompleted: boolean;
     validationPercentage: number;
     errors: BatchValidationErrors;
+    warnings: BatchValidationErrors;
     totalErrors: number;
     columnErrorCounts: {
         [column: string]: number;
     };
+    columnWarningCounts: {
+        [column: string]: number;
+    };
 };
 type UseValidationStateReturnValue = ValidationState & {
     updateRecordAndRevalidate: (record: Record) => Promise<void>;
     errorsRef: React.MutableRefObject<BatchValidationErrors>;
+    warningsRef: React.MutableRefObject<BatchValidationErrors>;
 };
 export declare const useValidationState: ({ initialDataSet, dataSet, fields, options, isReadOnly, setDataSet, setIsLoading, onValidateRecord, }: UseValidationStateArgs) => UseValidationStateReturnValue;
 export {};

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

@@ -50,25 +50,27 @@ import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { sleep } from "../../..";
 import { selectValidatorsFor, validateRecord } from "./validation";
 var checkIfHasErrors = function (errors) {
-    return Object.keys(errors).length > 0;
+    return errors && Object.keys(errors).length > 0;
 };
 export var useValidationState = function (_a) {
     var initialDataSet = _a.initialDataSet, //Initial Data Set, used to run the initial validation
     dataSet = _a.dataSet, //Current Updated Data Set
     fields = _a.fields, options = _a.options, isReadOnly = _a.isReadOnly, setDataSet = _a.setDataSet, setIsLoading = _a.setIsLoading, onValidateRecord = _a.onValidateRecord;
     var _b = useState({}), errors = _b[0], setErrors = _b[1];
-    var _c = useState(0), validationPercentage = _c[0], setValidationPercentage = _c[1];
+    var _c = useState({}), warnings = _c[0], setWarnings = _c[1];
+    var _d = useState(0), validationPercentage = _d[0], setValidationPercentage = _d[1];
     var validatorsCache = useMemo(function () { return selectValidatorsFor(fields); }, [fields]);
     var errorsRef = useRef(errors);
+    var warningsRef = useRef(warnings);
     //Validate record and update dataSet
     var updateRecordAndRevalidate = useCallback(function (record) { return __awaiter(void 0, void 0, void 0, function () {
-        var recordId, newDataSet, data, recordErrors, hasError;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var recordId, newDataSet, data, _a, recordErrors, recordWarnings, hasError, hasWarning;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
                     recordId = record._meta.id;
-                    newDataSet = __assign(__assign({}, dataSet), (_a = {}, _a[recordId] = __assign({}, record), _a));
+                    newDataSet = __assign(__assign({}, dataSet), (_b = {}, _b[recordId] = __assign({}, record), _b));
                     data = Object.values(newDataSet);
                     return [4 /*yield*/, validateRecord({
                             validatorsCache: validatorsCache,
@@ -78,9 +80,11 @@ export var useValidationState = function (_a) {
                             record: record,
                         })];
                 case 1:
-                    recordErrors = _b.sent();
+                    _a = _c.sent(), recordErrors = _a.errors, recordWarnings = _a.warnings;
                     hasError = checkIfHasErrors(recordErrors);
+                    hasWarning = checkIfHasErrors(recordWarnings);
                     newDataSet[recordId]._meta.isInvalid = hasError;
+                    newDataSet[recordId]._meta.hasWarning = hasWarning;
                     newDataSet[recordId]._meta.touched = true;
                     setErrors(function (errors) {
                         var newErrors = __assign({}, errors);
@@ -90,6 +94,14 @@ export var useValidationState = function (_a) {
                         errorsRef.current = newState;
                         return newState;
                     });
+                    setWarnings(function (warnings) {
+                        var newWarnings = __assign({}, warnings);
+                        var newState = hasWarning
+                            ? set(newWarnings, recordId, recordWarnings)
+                            : omit(newWarnings, recordId);
+                        warningsRef.current = newState;
+                        return newState;
+                    });
                     setDataSet(newDataSet); //Update the dataSet
                     return [2 /*return*/];
             }
@@ -102,18 +114,19 @@ export var useValidationState = function (_a) {
         var isCancelled = false;
         setIsLoading(true);
         var initialValidation = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var errors, initialData, length, _a, batchValidationDelayMs, _b, batchValidationSize, batchSize, batchCount, batchIdx, idx, batch, index, record, recordId, recordErrors, hasError, validationPercentage_1, newState;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var errors, warnings, initialData, length, _a, batchValidationDelayMs, _b, batchValidationSize, batchSize, batchCount, batchIdx, idx, batch, index, record, recordId, _c, recordErrors, recordWarnings, hasError, hasWarning, validationPercentage_1;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0:
                         errors = {};
+                        warnings = {};
                         initialData = Object.values(initialDataSet);
                         length = initialData.length;
                         _a = options.batchValidationDelayMs, batchValidationDelayMs = _a === void 0 ? 400 : _a, _b = options.batchValidationSize, batchValidationSize = _b === void 0 ? 1000 : _b;
                         batchSize = Math.min(Math.floor(batchValidationSize), length) || length;
                         batchCount = Math.ceil(length / batchSize);
                         batchIdx = 0;
-                        _c.label = 1;
+                        _d.label = 1;
                     case 1:
                         if (!(batchIdx < batchCount)) return [3 /*break*/, 8];
                         if (isCancelled)
@@ -121,7 +134,7 @@ export var useValidationState = function (_a) {
                         idx = batchIdx * batchSize;
                         batch = initialData.slice(idx, idx + batchSize);
                         index = 0;
-                        _c.label = 2;
+                        _d.label = 2;
                     case 2:
                         if (!(index < batch.length)) return [3 /*break*/, 5];
                         if (isCancelled)
@@ -136,12 +149,16 @@ export var useValidationState = function (_a) {
                                 validatorsCache: validatorsCache,
                             })];
                     case 3:
-                        recordErrors = _c.sent();
+                        _c = _d.sent(), recordErrors = _c.errors, recordWarnings = _c.warnings;
                         hasError = checkIfHasErrors(recordErrors);
+                        hasWarning = checkIfHasErrors(recordWarnings);
                         record._meta.isInvalid = hasError;
+                        record._meta.hasWarning = hasWarning;
                         if (hasError)
                             errors[recordId] = recordErrors;
-                        _c.label = 4;
+                        if (hasWarning)
+                            warnings[recordId] = recordWarnings;
+                        _d.label = 4;
                     case 4:
                         index++;
                         return [3 /*break*/, 2];
@@ -151,11 +168,12 @@ export var useValidationState = function (_a) {
                         setValidationPercentage(Math.round((validationPercentage_1 + Number.EPSILON) * 10) / 10);
                         return [4 /*yield*/, sleep(batchValidationDelayMs)];
                     case 6:
-                        _c.sent();
-                        newState = __assign({}, errors);
-                        errorsRef.current = newState;
-                        setErrors(newState);
-                        _c.label = 7;
+                        _d.sent();
+                        errorsRef.current = errors;
+                        setErrors(errors);
+                        warningsRef.current = warnings;
+                        setWarnings(warnings);
+                        _d.label = 7;
                     case 7:
                         batchIdx++;
                         return [3 /*break*/, 1];
@@ -183,6 +201,18 @@ export var useValidationState = function (_a) {
             }, errorsByColumns);
         }, {});
     }, [errors]);
+    var columnWarningCounts = useMemo(function () {
+        return Object.keys(warnings).reduce(function (errorsByColumns, rowId) {
+            var recordWarnings = warnings[rowId];
+            return Object.keys(recordWarnings).reduce(function (internalErrorsByColumns, fieldKey) {
+                var _a;
+                var hasError = !!recordWarnings[fieldKey];
+                var count = (_a = internalErrorsByColumns[fieldKey]) !== null && _a !== void 0 ? _a : 0;
+                internalErrorsByColumns[fieldKey] = hasError ? count + 1 : count;
+                return internalErrorsByColumns;
+            }, errorsByColumns);
+        }, {});
+    }, [warnings]);
     var totalErrors = useMemo(function () {
         return Object.keys(columnErrorCounts).reduce(function (count, column) { return count + columnErrorCounts[column]; }, 0);
     }, [columnErrorCounts]);
@@ -190,12 +220,15 @@ export var useValidationState = function (_a) {
     var isValid = isValidationCompleted && totalErrors === 0;
     return {
         errors: errors,
+        warnings: warnings,
         totalErrors: totalErrors,
         columnErrorCounts: columnErrorCounts,
+        columnWarningCounts: columnWarningCounts,
         validationPercentage: validationPercentage,
         isValidationCompleted: isValidationCompleted,
         isValid: isValid,
         errorsRef: errorsRef,
+        warningsRef: warningsRef,
         updateRecordAndRevalidate: updateRecordAndRevalidate,
     };
 };

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

@@ -16,5 +16,8 @@ type ValidateRecordArgs = {
     data: Record[];
 };
 export declare function selectValidatorsFor(fields: Field[]): SelectedFieldValidators[];
-export declare function validateRecord({ record, fields, data, onValidateRecord, validatorsCache, }: ValidateRecordArgs): Promise<ValidationErrors>;
+export declare function validateRecord({ record, fields, data, onValidateRecord, validatorsCache, }: ValidateRecordArgs): Promise<{
+    errors?: ValidationErrors;
+    warnings?: ValidationErrors;
+}>;
 export {};