fuse-importer 0.24.3 → 0.25.0

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

@@ -16,10 +16,12 @@ import { getSpreadsheetRowWidth } from "../common/utils";
 import { useReviewContext } from "../Review/ReviewContextProvider";
 import { HeaderButtons } from "./HeaderButtons";
 import { useImporterContext } from "../contexts/ImporterContextProvider";
+import { useTranslation } from "react-i18next";
 var HeadersPreview = function () {
     var _a = useReviewContext(), fields = _a.previewFields, initialDataSet = _a.previewInitialDataSet;
+    var t = useTranslation("upload").t;
     var _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows;
-    return (_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: initialDataSet && (_jsx(Spreadsheet, { rowWidth: getSpreadsheetRowWidth(fields, 6), isReadOnly: true, initialDataSet: initialDataSet, fields: fields, highlightFirstRow: true, options: {
+    return (_jsxs(Div, __assign({ flexColumn: true, centered: true, pt: 40 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: t("headers_preview.title") })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: t("headers_preview.description") })), _jsx(HeaderButtons, {}), _jsx(Div, __assign({ w100: true, centered: true, mb: 36 }, { children: initialDataSet && (_jsx(Spreadsheet, { rowWidth: getSpreadsheetRowWidth(fields, 6), isReadOnly: true, initialDataSet: initialDataSet, fields: fields, highlightFirstRow: true, options: {
                         showCheckboxColumn: true,
                         firstRowIsHeader: true,
                     }, selectedRows: selectedRows, setSelectedRows: setSelectedRows })) }))] })));

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 {};

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

@@ -60,17 +60,29 @@ var datePatternTypes = ["date", "datetime", "time"];
 function safeCallOnValidateRecord(_a) {
     var onValidateRecord = _a.onValidateRecord, record = _a.record;
     return __awaiter(this, void 0, void 0, function () {
-        var error_1;
+        var result, isNewVersion, mappedResult, errors, warnings, error_1;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
                     _b.trys.push([0, 2, , 3]);
                     return [4 /*yield*/, onValidateRecord(record)];
-                case 1: return [2 /*return*/, _b.sent()];
+                case 1:
+                    result = _b.sent();
+                    isNewVersion = "errors" in result || "warnings" in result;
+                    mappedResult = isNewVersion
+                        ? result
+                        : result;
+                    errors = isNewVersion
+                        ? mappedResult.errors
+                        : mappedResult;
+                    warnings = isNewVersion
+                        ? mappedResult.warnings
+                        : mappedResult;
+                    return [2 /*return*/, { errors: errors || {}, warnings: warnings || {} }];
                 case 2:
                     error_1 = _b.sent();
                     console.warn("onValidateRecord hook failed with error: ".concat(error_1));
-                    return [2 /*return*/, {}];
+                    return [2 /*return*/, { errors: {}, warnings: {} }];
                 case 3: return [2 /*return*/];
             }
         });
@@ -82,7 +94,7 @@ function safeCallValidator(_a) {
         return validatorFunction(field, record[field.name], validator, data);
     }
     catch (e) {
-        console.error("Validator ".concat(validator.validation_type, " failed."), e);
+        console.error("Validator ".concat(validator === null || validator === void 0 ? void 0 : validator.validation_type, " for field ").concat(JSON.stringify(field), " and value ").concat(record[field.name], " failed."), e);
         return "".concat(e);
     }
 }
@@ -105,7 +117,7 @@ function runValidatorsFor(_a) {
                 break;
             }
         }
-        return __assign(__assign({}, currentErrors), errors);
+        return __assign(__assign({}, currentErrors), { errors: __assign(__assign({}, (currentErrors.errors || {})), errors), warnings: __assign({}, (currentErrors.warnings || {})) });
     }, {});
 }
 export function selectValidatorsFor(fields) {
@@ -144,28 +156,40 @@ export function validateRecord(_a) {
     var _b, _c;
     var record = _a.record, fields = _a.fields, data = _a.data, onValidateRecord = _a.onValidateRecord, validatorsCache = _a.validatorsCache;
     return __awaiter(this, void 0, void 0, function () {
-        var isTouched, backendErrors, hasBackendErrors, validators, validatorErrors, errors, hasError;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
+        var isTouched, backendErrors, hasBackendErrors, validators, _d, validatorErrors, validatorWarnings, errors, warnings, _e, onValidateRecordErrors, onValidateRecordWarnings;
+        return __generator(this, function (_f) {
+            switch (_f.label) {
                 case 0:
                     if (isRecordEmpty(record, fields)) {
                         //TODO: Check this logic because this can skip the validation of touched rows because all fields are empty
-                        return [2 /*return*/, {}];
+                        return [2 /*return*/, { errors: {}, warnings: {} }];
                     }
                     isTouched = (_b = record._meta) === null || _b === void 0 ? void 0 : _b.touched;
                     backendErrors = ((_c = record._meta) === null || _c === void 0 ? void 0 : _c.backendErrors) || {};
                     hasBackendErrors = Object.keys(backendErrors).length > 0;
                     if (!isTouched && hasBackendErrors) {
-                        return [2 /*return*/, backendErrors];
+                        return [2 /*return*/, { errors: backendErrors, warnings: {} }];
                     }
                     validators = validatorsCache !== null && validatorsCache !== void 0 ? validatorsCache : selectValidatorsFor(fields);
-                    validatorErrors = runValidatorsFor({ record: record, data: data, validators: validators });
+                    _d = runValidatorsFor({
+                        record: record,
+                        data: data,
+                        validators: validators,
+                    }), validatorErrors = _d.errors, validatorWarnings = _d.warnings;
                     errors = ignoreNullOrUndefinedKeyValues(validatorErrors);
-                    hasError = Object.keys(errors).length > 0;
-                    if (!(!hasError && !isNullOrUndefined(onValidateRecord))) return [3 /*break*/, 2];
-                    return [4 /*yield*/, safeCallOnValidateRecord({ onValidateRecord: onValidateRecord, record: record })];
-                case 1: return [2 /*return*/, _d.sent()];
-                case 2: return [2 /*return*/, errors];
+                    warnings = ignoreNullOrUndefinedKeyValues(validatorWarnings);
+                    if (!!isNullOrUndefined(onValidateRecord)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, safeCallOnValidateRecord({
+                            onValidateRecord: onValidateRecord,
+                            record: record,
+                        })];
+                case 1:
+                    _e = _f.sent(), onValidateRecordErrors = _e.errors, onValidateRecordWarnings = _e.warnings;
+                    return [2 /*return*/, {
+                            errors: __assign(__assign({}, errors), onValidateRecordErrors),
+                            warnings: __assign(__assign({}, warnings), onValidateRecordWarnings),
+                        }];
+                case 2: return [2 /*return*/, { errors: errors, warnings: warnings }];
             }
         });
     });

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

@@ -92,6 +92,8 @@ declare const getCustomTheme: (importerStylePreferences: ImporterStylePreference
             orange800: string;
             orange900: string;
             orange1000: string;
+            orange1100: string;
+            orange1200: string;
         };
         readonly textStyles: {
             h1: import("styled-components").FlattenSimpleInterpolation;

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

@@ -116,7 +116,6 @@ export var getReviewDataSet = function (_a) {
         name: templateHeader.internal_key,
         type: FieldTypes[templateHeader.column_type] || FieldTypes.string,
         isRequired: templateHeader.required,
-        isUnique: templateHeader.unique,
         options: templateHeader.values,
         pattern: templateHeader.pattern,
         validations: templateHeader.validations,