fuse-importer 0.0.1-staging

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

@@ -0,0 +1,66 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { colors } from "../../../../styled/theme/colorPalette";
+import styled, { css } from "styled-components";
+import { TooltipProvider } from "../../../../common";
+import { Div } from "../../../../styled/utils";
+import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
+import { SortOrder } from "../common/types";
+var ErrorCount = styled(Div)(function (_a) {
+    var _b = _a.theme, colors = _b.colors, c = _b.css;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    background: ", ";\n    border: solid 1px ", ";\n    padding: 4px 7px;\n    border-radius: 56px;\n    min-width: 24px;\n    ", ";\n  "], ["\n    color: ", ";\n    background: ", ";\n    border: solid 1px ", ";\n    padding: 4px 7px;\n    border-radius: 56px;\n    min-width: 24px;\n    ", ";\n  "])), colors.error, colors.red100, colors.error, c.centered);
+});
+export var SortIndicator = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"], ["\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (p) {
+    return p.direction === SortOrder.ASC && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      transform: rotate(180deg);\n    "], ["\n      transform: rotate(180deg);\n    "])));
+}, function (p) { return p.theme.colors.gray300; });
+export var FieldHeader = function (_a) {
+    var field = _a.field, sortByFieldErrors = _a.sortByFieldErrors, sortByFieldWarnings = _a.sortByFieldWarnings;
+    var _b = useSpreadsheetContext(), columnErrorCounts = _b.columnErrorCounts, columnWarningCounts = _b.columnWarningCounts, sortBy = _b.sortBy, spreadsheetFilter = _b.spreadsheetFilter, filteredInputValue = _b.filteredInputValue, setSortBy = _b.setSortBy;
+    var fieldErrorCount = columnErrorCounts[field.name];
+    var fieldWarningCount = columnWarningCounts[field.name];
+    var shouldRenderErrorCount = fieldErrorCount &&
+        filteredInputValue === "" &&
+        spreadsheetFilter.type === "rowBased" &&
+        spreadsheetFilter.byRow === "all";
+    var onHeaderClick = function () {
+        if ((sortBy === null || sortBy === void 0 ? void 0 : sortBy.field) === field.name && (sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction) === SortOrder.ASC) {
+            setSortBy({
+                field: field.name,
+                direction: SortOrder.DESC,
+            });
+        }
+        else {
+            setSortBy({
+                field: field.name,
+                direction: SortOrder.ASC,
+            });
+        }
+    };
+    return (_jsxs(Div, __assign({ "data-test-id": "column-header-".concat(field.name), p: "0 16px", spaceBetween: true, w100: true, alignCenter: true, onClick: onHeaderClick }, { children: [_jsxs(Div, __assign({ dflex: true }, { children: [_jsxs(Div, __assign({ truncateText: true, selectNone: true }, { children: [field.label, field.isRequired && "*"] })), _jsx(Div, __assign({ ml: 8, centered: true }, { children: (sortBy === null || sortBy === void 0 ? void 0 : sortBy.field) === field.name && (_jsx(SortIndicator, __assign({ direction: sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction }, { children: chevronDown }))) }))] })), shouldRenderErrorCount && (_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 (ev) {
+                        ev.stopPropagation();
+                        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 (ev) {
+                        ev.stopPropagation();
+                        sortByFieldWarnings(field.name);
+                    } }, { children: _jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 35, textAlignCenter: true, label3: true, truncateText: true }, { children: fieldWarningCount })) })) })) })))] })));
+};
+export var chevronDown = (_jsx("svg", __assign({ width: "9", height: "5", viewBox: "0 0 9 5", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M4.31848 4.93945L0.421366 0.439453L8.2156 0.439454L4.31848 4.93945Z", fill: "#102622" }) })));
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,2 @@
+declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export default GlobalStyle;

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

@@ -0,0 +1,9 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { createGlobalStyle } from "styled-components";
+// fix issues with external styles changing the spreadsheet scrollbar and layout
+var GlobalStyle = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (p) { return p.theme.css.scrollbarDark; });
+export default GlobalStyle;
+var templateObject_1;

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

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,105 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo, useRef } from "react";
+import { areEqual } from "react-window";
+import { Div } from "../../../../styled/utils";
+import { getTableHeight } from "../../../common";
+import { spreadsheetHeaderHeightPx, spreadsheetRowHeightPx } from "../common";
+import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
+import * as S from "../styles";
+import { FieldHeader } from "./FieldHeader";
+import GlobalStyle from "./GlobalStyle";
+import { inputTypes } from "./inputs";
+import { SpreadsheetRowCheckboxes } from "./SpreadsheetRowCheckboxes";
+import ValidationProgress from "./ValidationProgress";
+import { TableActions } from "../../../../common/Table/TableActions";
+import { useImporterContext } from "../../../../Importer/contexts/ImporterContextProvider";
+import useWindowDimensions from "../../../../utils/hooks/useWindowSize";
+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, totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage, setSortByFieldErrors = _a.setSortByFieldErrors, options = _a.options, setSortByFieldWarnings = _a.setSortByFieldWarnings, selectedRows = _a.selectedRows, checkboxColumnWidth = _a.checkboxColumnWidth, isFiltering = _a.isFiltering;
+    var currentStepIndex = useImporterContext().currentStepIndex;
+    var isOnSmallScreens = useWindowDimensions().isOnSmallScreens;
+    var canShowCheckboxOnCheckboxRowHover = currentStepIndex === 2;
+    var rowNumbersGridRef = useRef();
+    var rowCheckboxesGridRef = useRef();
+    var rowWidthScalingFactor = (function () {
+        // Spreadsheet will display 6 columns on the viewport and a small portion of the
+        // 7th column in the right side to let the user know they can scroll horizontally
+        var visibleColumnsOnTableViewport = 6;
+        // by multiplying by horizontalScrollVisibilityRatio the final rowWidth for the spreadsheet
+        // will be reduced in order to partially display the last column on the right side
+        // 0.95 was chosen because it's the ratio that looks better on the UI on desktop
+        // 0.9 was chosen because it's the ratio that looks better on the UI on mobile
+        var horizontalScrollVisibilityRatio = 0.95;
+        if (isOnSmallScreens) {
+            // When the screen is too small the Spreadsheet will display 3 columns on the viewport
+            // and a small portion of the  4th column in the right side to let the user know they can scroll horizontally
+            visibleColumnsOnTableViewport = 3;
+            horizontalScrollVisibilityRatio = 0.9;
+        }
+        var res = fields.length / visibleColumnsOnTableViewport;
+        if (res <= 1)
+            return 1;
+        /*
+        multiply the rowWidthScalingFactor by 0.95/0.9 to let the user know they can scroll
+        horizontally (will display partial column on the right)
+        */
+        return res * horizontalScrollVisibilityRatio;
+    })();
+    var columns = useMemo(function () {
+        return fields.map(function (field) { return ({
+            Header: function () { return (_jsx(FieldHeader, { field: field, sortByFieldErrors: setSortByFieldErrors, sortByFieldWarnings: setSortByFieldWarnings })); },
+            Content: function (record) {
+                var Input = inputTypes[field.type];
+                var rowIndex = record.rowIndex, recordProp = __rest(record, ["rowIndex"]);
+                return (_jsx(Input, { id: "".concat(field.name, "-").concat(rowIndex), fieldType: field.type, name: field.name, options: field.options, record: recordProp }));
+            },
+        }); });
+    }, [fields, setSortByFieldErrors]);
+    var onTableScroll = useCallback(function (scrollTop) {
+        if (rowNumbersGridRef.current) {
+            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 () {
+        return getTableHeight({
+            headerHeight: spreadsheetHeaderHeightPx,
+            rowHeight: spreadsheetRowHeightPx,
+            dataCount: dataLength,
+            minimumTableHeight: 450,
+            maxVisibleRows: 12,
+        });
+    }, [dataLength]);
+    var showValidationProgress = !isReadOnly && validationPercentage < 100;
+    var isReviewStep = currentStepIndex === 2;
+    return (_jsxs(S.SpreadSheetData, __assign({ h100: true, flexColumn: true }, { children: [_jsx(GlobalStyle, {}), showValidationProgress && (_jsx(Div, __assign({ h: 32 }, { children: _jsx(ValidationProgress, { totalErrors: totalErrors, validationPercentage: validationPercentage }) }))), _jsxs(S.SpreadSheetContainer, __assign({ flexColumn: true, w100: true, h100: true }, { children: [_jsx(Div, __assign({ w100: true, justifyCenter: true }, { children: isReviewStep && _jsx(TableActions, {}) })), _jsxs(S.SpreadSheetWrapper, __assign({ canShowCheckboxOnHover: !showValidationProgress && canShowCheckboxOnCheckboxRowHover, shouldShowOnlyCheckbox: !showValidationProgress && selectedRows.length > 0, dflex: true, h100: true }, { children: [(options === null || options === void 0 ? void 0 : options.showCheckboxColumn) && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, height: spreadsheetHeight, firstRowIsHeader: options === null || options === void 0 ? void 0 : options.firstRowIsHeader, isLoadingData: showValidationProgress })), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, h: null, rowWidthScalingFactor: rowWidthScalingFactor, data: data, columns: columns, isLoading: isLoading, onTableScroll: onTableScroll, getItemKey: getItemKey, checkboxColumnWidth: checkboxColumnWidth, isFiltering: isFiltering })] }))] }))] })));
+};
+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;
+    gridRef: React.MutableRefObject<any>;
+    firstRowIsHeader?: boolean;
+    isLoadingData?: boolean;
+} & DivCSSProps;
+export declare const SpreadsheetRowCheckboxes: ({ height, gridRef, firstRowIsHeader, isLoadingData, ...props }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,181 @@
+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";
+import { useImporterContext } from "../../../contexts/ImporterContextProvider";
+import ReactVirtualizedAutoSizer from "react-virtualized-auto-sizer";
+var StyledGrid = styled(Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  overflow-y: scroll;\n"], ["\n  background: ", ";\n  overflow-y: scroll;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.white50;
+});
+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, gridRef = _a.gridRef, _b = _a.firstRowIsHeader, firstRowIsHeader = _b === void 0 ? false : _b, isLoadingData = _a.isLoadingData, props = __rest(_a, ["height", "gridRef", "firstRowIsHeader", "isLoadingData"]);
+    var _c = useSpreadsheetContext(), data = _c.data, selectedRows = _c.selectedRows, lastClickedIndexRef = _c.lastClickedIndexRef, setSelectedRows = _c.setSelectedRows, checkboxColumnWidth = _c.checkboxColumnWidth;
+    var currentStepIndex = useImporterContext().currentStepIndex;
+    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, rowMetaId) {
+        var lastRowMetaId = data[data.length - 1]._meta.id;
+        var isLastRow = rowMetaId === lastRowMetaId;
+        var isLastRowAndEmpty = isLastRow && rowIsEmpty(data[rowIndex]);
+        if (isLastRowAndEmpty)
+            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) { var _a, _b; return __spreadArray(__spreadArray([], prev, true), [(_b = (_a = data[adjustedRowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id], false); });
+        }
+        else {
+            setSelectedRows(function (prev) {
+                return prev.filter(function (row) { var _a, _b; return row !== ((_b = (_a = data[adjustedRowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id); });
+            });
+        }
+        lastClickedIndexRef.current = rowIndex;
+    };
+    var handleSelectMultipleRows = function (rowIndex) {
+        var _a, _b;
+        var clickedRowId = (_b = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id;
+        if (selectedRows.includes(clickedRowId)) {
+            // The clicked row is already selected, so we have to remove it
+            var clickedRowIndex = selectedRows.indexOf(clickedRowId);
+            var lastClickedIndex = lastClickedIndexRef.current;
+            var rangeStartIndex_1 = Math.min(clickedRowIndex, lastClickedIndex);
+            var rangeEndIndex_1 = Math.max(clickedRowIndex, lastClickedIndex);
+            var lastRowId_1 = data[data.length - 1]._meta.id;
+            var updatedSelectedRows = selectedRows.filter(function (value, index) {
+                return index < rangeStartIndex_1 ||
+                    index > rangeEndIndex_1 ||
+                    (value === lastRowId_1 && rowIsEmpty(data[data.length - 1]));
+            });
+            setSelectedRows(updatedSelectedRows);
+        }
+        else {
+            // The clicked row is not selected, so we have to add it
+            var lastSelectedRowIndex = selectedRows.length - 1;
+            var lastSelectedRowId_1 = selectedRows[lastSelectedRowIndex];
+            var lastSelectedRow = data.find(function (row) { var _a; return ((_a = row === null || row === void 0 ? void 0 : row._meta) === null || _a === void 0 ? void 0 : _a.id) === lastSelectedRowId_1; });
+            var clickedRow = data[rowIndex];
+            var rangeStartIndex = data.indexOf(lastSelectedRow);
+            var rangeEndIndex = data.indexOf(clickedRow);
+            var range = data.slice(Math.min(rangeStartIndex, rangeEndIndex), Math.max(rangeStartIndex, rangeEndIndex) + 1);
+            var rangeIds = range.map(function (row) { return row === null || row === void 0 ? void 0 : row._meta.id; });
+            var lastRowId_2 = data[data.length - 1]._meta.id;
+            var isLastRowEmpty_1 = rowIsEmpty(data[data.length - 1]);
+            var updatedSelectedRows = __spreadArray(__spreadArray([], selectedRows, true), rangeIds, true).filter(function (value, index, array) {
+                return array.indexOf(value) === index &&
+                    (value !== lastRowId_2 || (value === lastRowId_2 && !isLastRowEmpty_1));
+            });
+            setSelectedRows(updatedSelectedRows);
+            lastClickedIndexRef.current = rowIndex;
+        }
+    };
+    var handleSelectAllRows = function (checked) {
+        if (checked) {
+            var allRows = data
+                .filter(function (row) {
+                var isLastRow = row._meta.id === data[data.length - 1]._meta.id;
+                var isLastRowAndEmpty = isLastRow && rowIsEmpty(row);
+                return !isLastRowAndEmpty;
+            })
+                .map(function (row) {
+                return row === null || row === void 0 ? void 0 : row._meta.id;
+            });
+            setSelectedRows(allRows);
+        }
+        else {
+            setSelectedRows([]);
+        }
+        lastClickedIndexRef.current = null;
+    };
+    var CheckboxCell = function (_a) {
+        var _b, _c;
+        var rowIndex = _a.rowIndex, adjustedRowIndex = _a.adjustedRowIndex;
+        var currentDataIndex = rowIndex === 0 ? 0 : adjustedRowIndex;
+        var rowMetaId = (_c = (_b = data[currentDataIndex]) === null || _b === void 0 ? void 0 : _b._meta) === null || _c === void 0 ? void 0 : _c.id;
+        return (_jsx(Div, __assign({ className: "checkbox-cell" }, { children: firstRowIsHeader && rowIndex === 0 ? ("") : (_jsx(Checkbox, { isChecked: rowMetaId && selectedRows.includes(rowMetaId), onChange: function (checked) {
+                    return !isLoadingData && handleRowSelect(checked, rowIndex, rowMetaId);
+                }, onShiftKeyPressed: function () { return handleSelectMultipleRows(rowIndex); }, style: { cursor: "pointer" }, isDisabled: isLoadingData })) })));
+    };
+    var RowNumbersCell = function (_a) {
+        var rowIndex = _a.rowIndex;
+        return (_jsx(Div, __assign({ className: "row-numbers-cell", textAlignCenter: true, body2: true }, { children: rowIndex + 1 })));
+    };
+    var Cell = function (_a) {
+        var rowIndex = _a.rowIndex, style = _a.style;
+        var adjustedRowIndex = firstRowIsHeader ? rowIndex - 1 : rowIndex;
+        return (_jsxs(RowCheckbox, __assign({ style: style, alignCenter: true, justifyCenter: true, isLast: adjustedRowIndex === data.length - 1 }, { children: [_jsx(CheckboxCell, { rowIndex: rowIndex, adjustedRowIndex: adjustedRowIndex }), _jsx(RowNumbersCell, { rowIndex: rowIndex })] }), adjustedRowIndex));
+    };
+    var isSelectAllRowsChekboxChecked = (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) > 0 &&
+        (data === null || data === void 0 ? void 0 : data.length) > 0 &&
+        (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) >= (nonEmptyRows === null || nonEmptyRows === void 0 ? void 0 : nonEmptyRows.length);
+    return (_jsxs(SpreadsheetRowCheckboxesContainer, __assign({ className: "spreadsheet-row-container", columnWidth: checkboxColumnWidth }, props, { h100: true }, { children: [_jsx(SpreadsheetRowCheckboxesHeader, { children: currentStepIndex === 2 && (_jsx(Checkbox, { isChecked: isSelectAllRowsChekboxChecked, onChange: function (checked) {
+                        return !isLoadingData && handleSelectAllRows(checked);
+                    }, isIndeterminate: isIndeterminate, isDisabled: isLoadingData })) }), _jsx(ReactVirtualizedAutoSizer, { children: function (_a) {
+                    var height = _a.height;
+                    return (_jsx(StyledGrid, __assign({ ref: gridRef, style: gridStyles, width: checkboxColumnWidth, columnCount: 1, columnWidth: checkboxColumnWidth, rowHeight: 40, rowCount: data.length, height: height - spreadsheetHeaderHeightPx }, { children: Cell })));
+                } })] })));
+};
+var RowCheckbox = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n\n  .checkbox-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    visibility: hidden;\n    z-index: 1;\n  }\n\n  .row-numbers-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n"], ["\n  background-color: ", ";\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n\n  .checkbox-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    visibility: hidden;\n    z-index: 1;\n  }\n\n  .row-numbers-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])), function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.label3; }, function (p) {
+    return !p.isLast && css(templateObject_2 || (templateObject_2 = __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_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  height: ", "px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0 ", ";\n  display: flex;\n  justify-content: center;\n"], ["\n  align-items: center;\n  height: ", "px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0 ", ";\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_5 || (templateObject_5 = __makeTemplateObject(["\n  border-right: solid 1px ", ";\n  border-top-left-radius: 8px;\n  width: ", "px;\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  border-right: solid 1px ", ";\n  border-top-left-radius: 8px;\n  width: ", "px;\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"])), function (p) { return p.theme.colors.gray300; }, function (_a) {
+    var columnWidth = _a.columnWidth;
+    return columnWidth || 40;
+}, function (p) { return p.theme.colors.tableHeader; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

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

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

@@ -0,0 +1,55 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+var SPREADSHEET_ROW_NUMBERS_WIDTH = 36;
+var gridStyles = {
+    outline: "none",
+    willChange: "unset",
+    overflowY: "hidden",
+    overflowX: "scroll",
+};
+export var SpreadsheetRowNumbers = function (_a) {
+    var height = _a.height, spreadsheetHasXScroll = _a.spreadsheetHasXScroll, gridRef = _a.gridRef, props = __rest(_a, ["height", "spreadsheetHasXScroll", "gridRef"]);
+    var data = useSpreadsheetContext().data;
+    var Cell = function (_a) {
+        var rowIndex = _a.rowIndex, style = _a.style;
+        return (_jsx(RowNumber, __assign({ style: style, alignCenter: true, justifyCenter: true, isLast: rowIndex === data.length - 1 }, { children: _jsx(Div, __assign({ truncateText: true, textAlignCenter: true, body2: true }, { children: rowIndex + 1 })) }), rowIndex));
+    };
+    return (_jsxs(SpreadsheetRowNumbersContainer, __assign({}, props, { h: height }, { children: [_jsx(SpreadsheetRowNumbersHeader, {}), _jsx(Grid, __assign({ ref: gridRef, style: gridStyles, width: SPREADSHEET_ROW_NUMBERS_WIDTH, columnCount: 1, columnWidth: SPREADSHEET_ROW_NUMBERS_WIDTH, height: height - spreadsheetHeaderHeightPx, rowHeight: 40, rowCount: data.length }, { children: Cell }))] })));
+};
+var RowNumber = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", "\n"], ["\n  background-color: ", ";\n  ", ";\n  ", "\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 SpreadsheetRowNumbersHeader = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: ", "px;\n  border-top-left-radius: 8px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0px ", ";\n"], ["\n  height: ", "px;\n  border-top-left-radius: 8px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0px ", ";\n"])), spreadsheetRowHeightPx, function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.colors.gray300; });
+var SpreadsheetRowNumbersContainer = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: ", "px;\n  border-top-left-radius: 8px;\n  border-right: solid 1px ", ";\n  .ReactVirtualized__Grid {\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  .ReactVirtualized__Grid {\n    /* Track */\n    ::-webkit-scrollbar-track {\n      background-color: ", " !important;\n    }\n  }\n"])), SPREADSHEET_ROW_NUMBERS_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/ValidationProgress.d.ts

@@ -0,0 +1,5 @@
+declare const ValidationProgress: ({ totalErrors, validationPercentage, }: {
+    totalErrors: number;
+    validationPercentage: number;
+}) => JSX.Element;
+export default ValidationProgress;

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

@@ -0,0 +1,19 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { colors } from "../../../../styled/theme/colorPalette";
+import { Div } from "../../../../styled/utils";
+var ValidationProgress = function (_a) {
+    var totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage;
+    return (_jsxs(Div, __assign({ body1: true, dflex: true, ml: 32, mb: 22 }, { children: ["Calculating Data...", _jsxs(Div, __assign({ bold: true, ml: 5 }, { children: [validationPercentage, "%"] })), _jsxs(Div, __assign({ bold: true, c: colors.error, ml: 5 }, { children: ["(", totalErrors, " errors)"] }))] })));
+};
+export default ValidationProgress;

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

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

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

@@ -0,0 +1,38 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { SpreadsheetField, useSpreadsheetField } from ".";
+import { Autocomplete as AutocompleteBase, } from "../../../../../common/inputs/Autocomplete";
+import { SelectMenuDiv, SelectMenuScrollArea, } from "../../../../../common/inputs/SelectMenu";
+import { HTMLInput, TextInputIcon, } from "../../../../../common/inputs/TextInput";
+import { spreadsheetRowHeightPx } from "../../common";
+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\n    :focus {\n      border: none;\n      box-shadow: none;\n    }\n\n    :hover {\n      background: transparent;\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\n    :focus {\n      border: none;\n      box-shadow: none;\n    }\n\n    :hover {\n      background: transparent;\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.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, 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, templateObject_4, templateObject_5;

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

@@ -0,0 +1,12 @@
+import { HTMLInputCSSProps } from "../../../../../styled/utils";
+import { FieldTypes, Record } from "../../../../../types";
+export type SpreadsheetTextInputArgs = {
+    name: string;
+    record: Record;
+    fieldType: FieldTypes;
+} & HTMLInputCSSProps;
+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

@@ -0,0 +1,43 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+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, 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_3 || (templateObject_3 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: calc(100% - 2px);\n  margin: 0px;\n  outline: none;\n  width: 100%;\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  background: transparent;\n  border: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: calc(100% - 2px);\n  margin: 0px;\n  outline: none;\n  width: 100%;\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, templateObject_3;

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

@@ -0,0 +1,12 @@
+import { FieldTypes, Record } from "../../../../../types";
+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, validationWarning, children, }: {
+    validationError: any;
+    validationWarning: any;
+    children: any;
+}) => JSX.Element;