fuse-importer 0.24.0 → 0.24.3

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

@@ -2,21 +2,24 @@ import React from "react";
 import { SpreadsheetOptions } from "../../..";
 import { Field, OnValidateRecord, Record, RecordDataSet } from "../../../types";
 import { ValidationState } from "./hooks";
-export declare type OnDataSetChanged = (dataSet: RecordDataSet) => void;
-export declare type OnValidationStateChanged = (state: ValidationState) => void;
-declare type State = {
+export type OnDataSetChanged = (dataSet: RecordDataSet) => void;
+export type OnValidationStateChanged = (state: ValidationState) => void;
+type State = {
     rowWidth?: number;
     data: Record[];
     fields: Field[];
     isLoading: boolean;
     isReadOnly?: boolean;
     highlightFirstRow: boolean;
+    options: SpreadsheetOptions;
     sortByFieldErrors: 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[]>>;
 } & ValidationState;
-declare type Props = {
+type Props = {
     initialDataSet: RecordDataSet;
     rowWidth?: number;
     isReadOnly?: boolean;
@@ -27,7 +30,9 @@ declare type Props = {
     onValidationStateChanged?: OnValidationStateChanged;
     onValidateRecord?: OnValidateRecord;
     onDataSetChanged?: OnDataSetChanged;
+    selectedRows: number[];
+    setSelectedRows: React.Dispatch<React.SetStateAction<number[]>>;
 };
-export declare const SpreadsheetContextProvider: ({ initialDataSet, rowWidth, fields, options, isReadOnly, highlightFirstRow, children, onValidateRecord, onDataSetChanged, onValidationStateChanged, }: Props) => JSX.Element;
+export declare const SpreadsheetContextProvider: ({ initialDataSet, rowWidth, fields, options, isReadOnly, highlightFirstRow, children, onValidateRecord, onDataSetChanged, onValidationStateChanged, selectedRows, setSelectedRows, }: Props) => JSX.Element;
 export declare const useSpreadsheetContext: () => State;
 export {};

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

@@ -26,7 +26,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useRef, use
 import { useValidationState } from "./hooks";
 var SpreadsheetContext = createContext({});
 export var SpreadsheetContextProvider = function (_a) {
-    var initialDataSet = _a.initialDataSet, _b = _a.rowWidth, rowWidth = _b === void 0 ? 1 : _b, fields = _a.fields, options = _a.options, isReadOnly = _a.isReadOnly, highlightFirstRow = _a.highlightFirstRow, children = _a.children, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged;
+    var initialDataSet = _a.initialDataSet, _b = _a.rowWidth, rowWidth = _b === void 0 ? 1 : _b, fields = _a.fields, options = _a.options, isReadOnly = _a.isReadOnly, highlightFirstRow = _a.highlightFirstRow, children = _a.children, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows;
     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];
@@ -70,7 +70,7 @@ export var SpreadsheetContextProvider = function (_a) {
         sortByCurrentErrorsRef.current = __assign({}, errorsRef.current);
         setSortByFieldErrors(value);
     }, []);
-    var value = __assign(__assign({ data: data, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, rowWidth: rowWidth, sortByFieldErrors: sortByFieldErrors, highlightFirstRow: highlightFirstRow, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate });
+    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 });
     return (_jsx(SpreadsheetContext.Provider, __assign({ value: value }, { children: children })));
 };
 export var useSpreadsheetContext = function () { return useContext(SpreadsheetContext); };

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

@@ -11,7 +11,7 @@ export var isEmpty = function (value) {
         (typeof value === "string" && value.trim().length === 0));
 };
 export var isEmail = function (value) {
-    var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
     return emailRegex.test(value);
 };
 export var isUrl = function (value) {

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

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

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

@@ -32,11 +32,13 @@ import { FieldHeader } from "./FieldHeader";
 import GlobalStyle from "./GlobalStyle";
 import { inputTypes } from "./inputs";
 import { SpreadsheetRowNumbers } from "./SpreadsheetRowNumbers";
+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;
+    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 rowNumbersGridRef = useRef();
+    var rowCheckboxesGridRef = useRef();
     var sortByErrors = useCallback(function (field) {
         return setSortByFieldErrors(function (sortByFieldErrors) {
             return sortByFieldErrors === field ? null : field;
@@ -57,6 +59,10 @@ var SpreadsheetData = function () {
             var grid = rowNumbersGridRef.current;
             grid.scrollTo({ scrollTop: scrollTop });
         }
+        if (rowCheckboxesGridRef.current) {
+            var grid = rowCheckboxesGridRef.current;
+            grid.scrollTo({ scrollTop: scrollTop });
+        }
     }, []);
     var dataLength = data === null || data === void 0 ? void 0 : data.length;
     var spreadsheetHeight = useMemo(function () {
@@ -69,6 +75,6 @@ var SpreadsheetData = function () {
         });
     }, [dataLength]);
     var showValidationProgress = !isReadOnly && validationPercentage < 100;
-    return (_jsxs(Div, { children: [_jsx(GlobalStyle, {}), _jsx(Div, __assign({ h: 32 }, { children: showValidationProgress && (_jsx(ValidationProgress, { totalErrors: totalErrors, validationPercentage: validationPercentage })) })), _jsxs(S.SpreadSheetWrapper, __assign({ h: spreadsheetHeight, dflex: true, w: 1400 }, { children: [_jsx(SpreadsheetRowNumbers, { gridRef: rowNumbersGridRef, spreadsheetHasXScroll: rowWidth > 1, height: spreadsheetHeight }), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, h: spreadsheetHeight, rowWidth: rowWidth, data: data, columns: columns, isLoading: isLoading, onTableScroll: onTableScroll, getItemKey: getItemKey })] }))] }));
+    return (_jsxs(S.SpreadSheetData, { children: [_jsx(GlobalStyle, {}), _jsx(Div, __assign({ h: 32 }, { children: showValidationProgress && (_jsx(ValidationProgress, { totalErrors: totalErrors, validationPercentage: validationPercentage })) })), _jsxs(S.SpreadSheetWrapper, __assign({ h: spreadsheetHeight, dflex: true }, { children: [options.showCheckboxColumn && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, spreadsheetHasXScroll: rowWidth > 1, height: spreadsheetHeight, firstRowIsHeader: options.firstRowIsHeader })), _jsx(SpreadsheetRowNumbers, { gridRef: rowNumbersGridRef, spreadsheetHasXScroll: rowWidth > 1, height: spreadsheetHeight }), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, h: spreadsheetHeight, rowWidth: rowWidth, data: data, columns: columns, isLoading: isLoading, onTableScroll: onTableScroll, getItemKey: getItemKey })] }))] }));
 };
 export default React.memo(SpreadsheetData, areEqual);

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { DivCSSProps } from "../../../../styled/utils";
+type Props = {
+    height?: number;
+    spreadsheetHasXScroll?: boolean;
+    gridRef: React.MutableRefObject<any>;
+    firstRowIsHeader?: boolean;
+} & DivCSSProps;
+export declare const SpreadsheetRowCheckboxes: ({ height, spreadsheetHasXScroll, gridRef, firstRowIsHeader, ...props }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,106 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { FixedSizeGrid as Grid } from "react-window";
+import styled, { css } from "styled-components";
+import { Div } from "../../../../styled/utils";
+import { spreadsheetRowHeightPx } from "../common";
+import { spreadsheetHeaderHeightPx } from "../common/index";
+import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
+import { Checkbox } from "../../../../common/inputs/Checkbox";
+var SPREADSHEET_ROW_CHECKBOXES_WIDTH = 40;
+var gridStyles = {
+    outline: "none",
+    willChange: "unset",
+    overflowY: "hidden",
+    overflowX: "scroll",
+};
+var rowIsEmpty = function (row) {
+    return Object.keys(row).every(function (key) {
+        if (key === "_meta")
+            return true;
+        return !row[key];
+    });
+};
+export var SpreadsheetRowCheckboxes = function (_a) {
+    var height = _a.height, spreadsheetHasXScroll = _a.spreadsheetHasXScroll, gridRef = _a.gridRef, _b = _a.firstRowIsHeader, firstRowIsHeader = _b === void 0 ? false : _b, props = __rest(_a, ["height", "spreadsheetHasXScroll", "gridRef", "firstRowIsHeader"]);
+    var _c = useSpreadsheetContext(), data = _c.data, selectedRows = _c.selectedRows, setSelectedRows = _c.setSelectedRows;
+    var nonEmptyRows = useMemo(function () { return data.filter(function (row) { return !rowIsEmpty(row); }); }, [
+        data,
+    ]);
+    var isIndeterminate = selectedRows.length > 0 && selectedRows.length < nonEmptyRows.length;
+    var handleRowSelect = function (checked, rowIndex) {
+        if (checked && rowIsEmpty(data[rowIndex])) {
+            return;
+        }
+        // If the first row is a header, we don't want to select it
+        if (firstRowIsHeader && rowIndex === 0) {
+            return;
+        }
+        // If the first row is a header, we need to adjust the rowIndex
+        var adjustedRowIndex = firstRowIsHeader ? rowIndex - 1 : rowIndex;
+        if (checked) {
+            setSelectedRows(function (prev) { return __spreadArray(__spreadArray([], prev, true), [adjustedRowIndex], false); });
+        }
+        else {
+            setSelectedRows(function (prev) { return prev.filter(function (row) { return row !== adjustedRowIndex; }); });
+        }
+    };
+    var handleSelectAllRows = function (checked) {
+        if (checked) {
+            var allRows = data
+                .filter(function (row) { return !rowIsEmpty(row); })
+                .map(function (_, index) { return (firstRowIsHeader ? index - 1 : index); });
+            setSelectedRows(allRows);
+        }
+        else {
+            setSelectedRows([]);
+        }
+    };
+    var Cell = function (_a) {
+        var rowIndex = _a.rowIndex, style = _a.style;
+        var adjustedRowIndex = firstRowIsHeader ? rowIndex - 1 : rowIndex;
+        return (_jsx(RowCheckbox, __assign({ style: style, alignCenter: true, justifyEnd: true, isLast: adjustedRowIndex === data.length - 1 }, { children: firstRowIsHeader && rowIndex === 0 ? ("") : (_jsx(Checkbox, { isChecked: selectedRows.includes(adjustedRowIndex), onChange: function (checked) { return handleRowSelect(checked, rowIndex); } })) }), adjustedRowIndex));
+    };
+    return (_jsxs(SpreadsheetRowCheckboxesContainer, __assign({}, props, { h: height }, { children: [_jsx(SpreadsheetRowCheckboxesHeader, { children: _jsx(Checkbox, { isChecked: selectedRows.length >= nonEmptyRows.length, onChange: handleSelectAllRows, isIndeterminate: isIndeterminate }) }), _jsx(Grid, __assign({ ref: gridRef, style: gridStyles, width: SPREADSHEET_ROW_CHECKBOXES_WIDTH, columnCount: 1, columnWidth: SPREADSHEET_ROW_CHECKBOXES_WIDTH, height: height - spreadsheetHeaderHeightPx, rowHeight: 40, rowCount: data.length }, { children: Cell }))] })));
+};
+var RowCheckbox = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n"])), function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.label3; }, function (p) {
+    return !p.isLast && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-shadow: inset 0 -1px 0 ", ";\n    "], ["\n      box-shadow: inset 0 -1px 0 ", ";\n    "])), function (p) { return p.theme.colors.gray300; });
+});
+var SpreadsheetRowCheckboxesHeader = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  height: ", "px;\n  border-top-left-radius: 8px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0 ", ";\n  padding-left: 2px;\n  display: flex;\n  justify-content: center;\n"], ["\n  align-items: center;\n  height: ", "px;\n  border-top-left-radius: 8px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0 ", ";\n  padding-left: 2px;\n  display: flex;\n  justify-content: center;\n"])), spreadsheetRowHeightPx, function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.colors.gray300; });
+var SpreadsheetRowCheckboxesContainer = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: ", "px;\n  border-top-left-radius: 8px;\n  border-right: solid 1px ", ";\n\n  .ReactVirtualized__Grid {\n    /* Scrollbar */\n    ::-webkit-scrollbar {\n      width: 8px;\n    }\n\n    /* Track */\n    ::-webkit-scrollbar-track {\n      background-color: ", " !important;\n    }\n  }\n"], ["\n  width: ", "px;\n  border-top-left-radius: 8px;\n  border-right: solid 1px ", ";\n\n  .ReactVirtualized__Grid {\n    /* Scrollbar */\n    ::-webkit-scrollbar {\n      width: 8px;\n    }\n\n    /* Track */\n    ::-webkit-scrollbar-track {\n      background-color: ", " !important;\n    }\n  }\n"])), SPREADSHEET_ROW_CHECKBOXES_WIDTH, function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.tableHeader; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { DivCSSProps } from "../../../../styled/utils";
-declare type Props = {
+type Props = {
     height?: number;
     spreadsheetHasXScroll?: boolean;
     gridRef: React.MutableRefObject<any>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const ValidationProgress: ({ totalErrors, validationPercentage, }: {
     totalErrors: number;
     validationPercentage: number;

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

@@ -1,8 +1,8 @@
 import React from "react";
 import { Option } from "../../../../../common/inputs/Autocomplete";
 import { FieldTypes, Record } from "../../../../../types";
-export declare type AutoCompleteOption = Option;
-export declare type SpreadsheetAutocompleteProps = {
+export type AutoCompleteOption = Option;
+export type SpreadsheetAutocompleteProps = {
     name: string;
     record: Record;
     options: AutoCompleteOption[];

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { HTMLInputCSSProps } from "../../../../../styled/utils";
 import { FieldTypes, Record } from "../../../../../types";
-export declare type SpreadsheetTextInputArgs = {
+export type SpreadsheetTextInputArgs = {
     name: string;
     record: Record;
     fieldType: FieldTypes;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FieldTypes, Record } from "../../../../../types";
 export declare const useSpreadsheetField: (name: any, record: Record, fieldType: FieldTypes) => {
     value: any;

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

@@ -28,7 +28,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/lib/esm/Importer/common/Spreadsheet/components/inputs/EnumInput.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SpreadsheetAutocompleteProps } from "../fields/SpeadsheetAutocomplete";
-export declare type EnumInputProps = {
+export type EnumInputProps = {
     options: any;
 } & SpreadsheetAutocompleteProps;
 export declare const EnumInput: React.FC<EnumInputProps>;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { SpreadsheetOptions } from "../../..";
 import { BatchValidationErrors, Field, OnValidateRecord, Record, RecordDataSet } from "../../../types";
-declare type UseValidationStateArgs = {
+type UseValidationStateArgs = {
     onValidateRecord?: OnValidateRecord;
     setDataSet: React.Dispatch<React.SetStateAction<RecordDataSet>>;
     setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
@@ -11,7 +11,7 @@ declare type UseValidationStateArgs = {
     options: SpreadsheetOptions;
     isReadOnly: boolean;
 };
-export declare type ValidationState = {
+export type ValidationState = {
     isValid: boolean;
     isValidationCompleted: boolean;
     validationPercentage: number;
@@ -21,7 +21,7 @@ export declare type ValidationState = {
         [column: string]: number;
     };
 };
-declare type UseValidationStateReturnValue = ValidationState & {
+type UseValidationStateReturnValue = ValidationState & {
     updateRecordAndRevalidate: (record: Record) => Promise<void>;
     errorsRef: React.MutableRefObject<BatchValidationErrors>;
 };

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

@@ -24,7 +24,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -126,7 +126,7 @@ export var useValidationState = function (_a) {
                         if (!(index < batch.length)) return [3 /*break*/, 5];
                         if (isCancelled)
                             return [2 /*return*/];
-                        record = initialData[index];
+                        record = batch[index];
                         recordId = record._meta.id;
                         return [4 /*yield*/, validateRecord({
                                 onValidateRecord: onValidateRecord,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Field, OnValidateRecord, Record, RecordDataSet, SpreadsheetOptions } from "../../../types";
 import { OnDataSetChanged, OnValidationStateChanged } from "./SpreadsheetContextProvider";
-export declare type SpreadsheetProps = {
+export type SpreadsheetProps = {
     initialDataSet: RecordDataSet;
     rowWidth?: number;
     isReadOnly?: boolean;
@@ -12,8 +12,10 @@ export declare type SpreadsheetProps = {
     onValidateRecord?: OnValidateRecord;
     onDataSetChanged?: OnDataSetChanged;
     onValidationStateChanged?: OnValidationStateChanged;
+    selectedRows?: number[];
+    setSelectedRows?: React.Dispatch<React.SetStateAction<number[]>>;
 };
-declare const _default: React.MemoExoticComponent<({ isReadOnly, initialDataSet, rowWidth, fields, options, highlightFirstRow, onValidateRecord, onDataSetChanged, onValidationStateChanged, }: SpreadsheetProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ isReadOnly, initialDataSet, rowWidth, fields, options, highlightFirstRow, onValidateRecord, onDataSetChanged, onValidationStateChanged, selectedRows, setSelectedRows, }: SpreadsheetProps) => JSX.Element>;
 export default _default;
 export * from "./hooks";
 export * from "./SpreadsheetContextProvider";

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

@@ -15,8 +15,8 @@ import { areEqual } from "react-window";
 import SpreadsheetData from "./components/SpreadsheetData";
 import { SpreadsheetContextProvider, } from "./SpreadsheetContextProvider";
 var Spreadsheet = function (_a) {
-    var isReadOnly = _a.isReadOnly, initialDataSet = _a.initialDataSet, rowWidth = _a.rowWidth, fields = _a.fields, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.highlightFirstRow, highlightFirstRow = _c === void 0 ? false : _c, _d = _a.onValidateRecord, onValidateRecord = _d === void 0 ? null : _d, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged;
-    return (_jsx(SpreadsheetContextProvider, __assign({ rowWidth: rowWidth, isReadOnly: isReadOnly, fields: fields, initialDataSet: initialDataSet, highlightFirstRow: highlightFirstRow, options: options, onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord, onValidationStateChanged: onValidationStateChanged }, { children: _jsx(SpreadsheetData, {}) })));
+    var isReadOnly = _a.isReadOnly, initialDataSet = _a.initialDataSet, rowWidth = _a.rowWidth, fields = _a.fields, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.highlightFirstRow, highlightFirstRow = _c === void 0 ? false : _c, _d = _a.onValidateRecord, onValidateRecord = _d === void 0 ? null : _d, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows;
+    return (_jsx(SpreadsheetContextProvider, __assign({ rowWidth: rowWidth, isReadOnly: isReadOnly, fields: fields, initialDataSet: initialDataSet, highlightFirstRow: highlightFirstRow, options: options, onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord, onValidationStateChanged: onValidationStateChanged, selectedRows: selectedRows, setSelectedRows: setSelectedRows }, { children: _jsx(SpreadsheetData, {}) })));
 };
 export default React.memo(Spreadsheet, areEqual);
 export * from "./hooks";

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

@@ -1,3 +1,4 @@
 /// <reference types="react" />
+export declare const SpreadSheetData: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
 export declare const SpreadSheetWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
 export declare const TableView: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, ...props }: import("../../../common/Table/TableView").TableViewProps) => JSX.Element>, import("styled-components").DefaultTheme, {}, never>;

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

@@ -5,6 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import styled from "styled-components";
 import { TableView as TableViewBase, TableViewCellContainer, TableViewRow, } from "../../../common/Table/TableView";
 import { Div } from "../../../styled/utils";
-export var SpreadSheetWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: solid 1px ", ";\n  border-radius: 8px;\n  background: ", ";\n  overflow: hidden !important;\n"], ["\n  border: solid 1px ", ";\n  border-radius: 8px;\n  background: ", ";\n  overflow: hidden !important;\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.white; });
-export var TableView = styled(TableViewBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n"], ["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n"])), function (p) { return p.theme.colors.gray50; }, TableViewRow, TableViewCellContainer, function (p) { return p.theme.colors.gray300; });
-var templateObject_1, templateObject_2;
+export var SpreadSheetData = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"])));
+export var SpreadSheetWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: solid 1px ", ";\n  border-radius: 8px;\n  background: ", ";\n  overflow: hidden !important;\n  flex-grow: 1;\n  margin-left: 32px;\n  margin-right: 32px;\n"], ["\n  border: solid 1px ", ";\n  border-radius: 8px;\n  background: ", ";\n  overflow: hidden !important;\n  flex-grow: 1;\n  margin-left: 32px;\n  margin-right: 32px;\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.white; });
+export var TableView = styled(TableViewBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n"], ["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n"])), function (p) { return p.theme.colors.gray50; }, TableViewRow, TableViewCellContainer, function (p) { return p.theme.colors.gray300; });
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,14 +1,14 @@
 import { Field, FieldValidation, OnValidateRecord, Record, ValidationErrors } from "../../../../types";
 import { FieldValidator } from "./validators";
-declare type SelectedValidator = {
+type SelectedValidator = {
     validator: FieldValidation;
     validatorFunction: FieldValidator;
 };
-declare type SelectedFieldValidators = {
+type SelectedFieldValidators = {
     field: Field;
     validators: SelectedValidator[];
 };
-declare type ValidateRecordArgs = {
+type ValidateRecordArgs = {
     onValidateRecord?: OnValidateRecord;
     validatorsCache?: SelectedFieldValidators[];
     record: Record;

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

@@ -24,7 +24,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

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

@@ -1,6 +1,6 @@
 import { Field, FieldValidation, Record } from "../../../../types";
-export declare type FieldValidator = (field: Field, fieldValue: any, validation?: FieldValidation, data?: Record[]) => null | string;
-export declare type FieldValidations = Partial<{
+export type FieldValidator = (field: Field, fieldValue: any, validation?: FieldValidation, data?: Record[]) => null | string;
+export type FieldValidations = Partial<{
     [key: string]: FieldValidator;
 }>;
 export declare const fieldValidations: FieldValidations;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const fileExtensionIcon: JSX.Element;
 export declare const closeIconWithCircle: JSX.Element;
 export declare const errorIcon: JSX.Element;

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

@@ -1,10 +1,10 @@
 import { EnvironmentType } from "../../types";
 export declare const contentWidth = 1120;
-declare type Environments = {
+type Environments = {
     [K in EnvironmentType]?: any;
 };
 export declare const baseUrls: Environments;
-declare type GetTableHeightArgs = {
+type GetTableHeightArgs = {
     headerHeight: number;
     rowHeight: number;
     maxVisibleRows: number;

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

@@ -1,5 +1,5 @@
 import { theme } from "../../styled/theme";
-export declare type ImporterStylePreferences = {
+export type ImporterStylePreferences = {
     id: number;
     background: string;
     highlight1: string;
@@ -8,7 +8,7 @@ export declare type ImporterStylePreferences = {
     secondary_color: string;
     logo_url: string;
 };
-export declare type Theme = typeof theme;
+export type Theme = typeof theme;
 declare const getCustomTheme: (importerStylePreferences: ImporterStylePreferences) => {
     theme: {
         readonly colors: {

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

@@ -9,10 +9,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import Color from 'color';
 import { theme } from "../../styled/theme";
 var getCustomTheme = function (importerStylePreferences) {
     var primary_color = importerStylePreferences.primary_color, secondary_color = importerStylePreferences.secondary_color, highlight1 = importerStylePreferences.highlight1, highlight2 = importerStylePreferences.highlight2, background = importerStylePreferences.background;
-    var customTheme = __assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { pink500: primary_color, black: secondary_color, blue500: highlight1, blue100: highlight2, backgroundInterface: background }) });
+    var customTheme = __assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { pink500: primary_color, pink700: Color(primary_color).darken(0.2).hex(), black: secondary_color, blue500: highlight1, blue100: highlight2, backgroundInterface: background }) });
     return { theme: customTheme, logoURL: importerStylePreferences.logo_url };
 };
 export { theme, getCustomTheme };

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

@@ -1,6 +1,6 @@
 import { Integration, Record, TemplateHeader } from "../../types";
 export declare const getSpreadsheetRowWidth: (fields: any, visibleRowsOnTableViewport: any) => number;
-declare type IsEnumFieldArgs = {
+type IsEnumFieldArgs = {
     templateLabel: string;
     templateHeaders: TemplateHeader[];
 };

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

@@ -13,7 +13,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

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

@@ -3,18 +3,18 @@ import React from "react";
 import { FormatRecord, ImporterOptions, Integration, OnSubmit, OnValidateRecord, TemplateHeader } from "../../types";
 import { FuseApi } from "../common/FuseApi";
 export declare const fusejsOptions: Fuse.IFuseOptions<string>;
-export declare type HeaderMatchings = {
+export type HeaderMatchings = {
     [templateHeaderLabel: string]: string;
 };
-export declare type EnumFieldValueMatchings = {
+export type EnumFieldValueMatchings = {
     [templateHeaderLabel: string]: {
         [uploadedDataValue: string]: string;
     };
 };
-export declare type UploadedDataEnumFieldValues = {
+export type UploadedDataEnumFieldValues = {
     [templateHeaderLabel: string]: string[];
 };
-export declare type State = {
+export type State = {
     currentStepIndex: number;
     templateError: string | null;
     uploadedData: any[];
@@ -44,8 +44,10 @@ export declare type State = {
     formatRecord: FormatRecord;
     onValidateRecord?: OnValidateRecord;
     setMatcherSubstep: React.Dispatch<number>;
+    selectedRows: number[];
+    setSelectedRows: React.Dispatch<React.SetStateAction<number[]>>;
 };
-export declare type Props = {
+export type Props = {
     templateSlug: string;
     apiToken: string;
     options: ImporterOptions;

package/lib/esm/Importer/contexts/ImporterContextProvider.js

@@ -24,7 +24,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -74,6 +74,7 @@ export var ImporterContextProvider = function (_a) {
     var _l = useState(null), templateHeaderMatchings = _l[0], setTemplateHeaderMatchings = _l[1];
     var _m = useState(null), enumFieldValueMatchings = _m[0], setEnumFieldValueMatchings = _m[1];
     var _o = useState(null), uploadedDataEnumFieldValues = _o[0], setUploadedDataEnumFieldValues = _o[1];
+    var _p = useState([]), selectedRows = _p[0], setSelectedRows = _p[1];
     var fuseApi = useMemo(function () { return new FuseApi(options.env, apiToken); }, [
         options.env,
         apiToken,
@@ -109,9 +110,14 @@ export var ImporterContextProvider = function (_a) {
         setUploadedDataEnumFieldValues(_uploadedDataEnumFieldValues);
     }, [templateHeaderMatchings]);
     useEffect(function () {
-        if (uploadedData)
+        if (uploadedData) {
             setHeadersFromDataset();
+            selectAllRows();
+        }
     }, [uploadedData]);
+    var selectAllRows = function () {
+        setSelectedRows(uploadedData.map(function (_, index) { return index; }));
+    };
     useEffect(function () {
         (function () { return __awaiter(void 0, void 0, void 0, function () {
             var _a, organization_1, columns, importer_style_preferences, integrations_1, preview_first_time, error_1, errorMsg;
@@ -187,6 +193,8 @@ export var ImporterContextProvider = function (_a) {
         onClose: onClose,
         setPreviewFirstTime: setPreviewFirstTime,
         onSubmit: onSubmit,
+        selectedRows: selectedRows,
+        setSelectedRows: setSelectedRows,
     };
     return (_jsx(ImporterContext.Provider, __assign({ value: value }, { children: children })));
 };

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

@@ -2,7 +2,7 @@ import { Field, FieldTypes, FormatRecord, Record, RecordDataSet, TemplateHeader
 import { EnumFieldValueMatchings, HeaderMatchings } from "../contexts/ImporterContextProvider";
 export declare const addMeta: (record: any, index: number) => Record;
 export declare const recordListToDataSet: (data: Record[], fields: Field[]) => RecordDataSet;
-declare type transformToRecordsArgs = {
+type transformToRecordsArgs = {
     templateHeaderMatchings: HeaderMatchings;
     enumFieldValueMatchings: EnumFieldValueMatchings;
     uploadedDataHeaders: string[];

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

@@ -1,11 +1,10 @@
-/// <reference types="react" />
 import { FormatRecord, ImporterOptions, OnSubmit, OnValidateRecord } from "../types";
 export declare const ACCOUNT_ROUTES: {
     TEMPLATES: string;
 };
 export declare const ACCOUNT_VIEW_PATH = "/account";
 export declare const TEMPLATES_ROUTE: string;
-declare type ImporterProps = {
+type ImporterProps = {
     templateSlug: string;
     apiToken: string;
     options: ImporterOptions;