fuse-importer 0.0.1-staging → 0.0.2-testing

package/lib/esm/Importer/ImporterWithContext.js

@@ -41,7 +41,7 @@ var Content = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplate
     return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    flex: ", ";\n  "], ["\n    background-color: ", ";\n    flex: ", ";\n  "])), colors.backgroundInterface, inTrialMode ? "none" : 1);
 });
 export var ImporterWithContext = function () {
-    var _a = useImporterContext(), inTrialMode = _a.inTrialMode, currentStepIndex = _a.currentStepIndex, matcherSubstep = _a.matcherSubstep, templateHeaders = _a.templateHeaders, theme = _a.theme, logoURL = _a.logoURL, previewFirstTime = _a.previewFirstTime, initialRecords = _a.initialRecords, _b = _a.importerOptions, zIndex = _b.zIndex, previewMode = _b.previewMode;
+    var _a = useImporterContext(), inTrialMode = _a.inTrialMode, currentStepIndex = _a.currentStepIndex, matcherSubstep = _a.matcherSubstep, templateHeaders = _a.templateHeaders, theme = _a.theme, logoURL = _a.logoURL, previewFirstTime = _a.previewFirstTime, headerRowIndex = _a.headerRowIndex, initialRecords = _a.initialRecords, _b = _a.importerOptions, zIndex = _b.zIndex, previewMode = _b.previewMode;
     var layoutRef = useRef(null);
     var t = useTranslation().t;
     useEffect(function () {

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

@@ -125,7 +125,7 @@ function csvExport(data) {
 }
 export var ReviewContextProvider = function (_a) {
     var initialRecords = _a.initialRecords, children = _a.children;
-    var _b = useImporterContext(), templateHeaderMatchings = _b.templateHeaderMatchings, enumFieldValueMatchings = _b.enumFieldValueMatchings, templateHeaders = _b.templateHeaders, uploadedDataHeaders = _b.uploadedDataHeaders, uploadedData = _b.uploadedData, currentStepIndex = _b.currentStepIndex, integrations = _b.integrations, templateSlug = _b.templateSlug, fuseApi = _b.fuseApi, _c = _b.importerOptions, disableSubmitIfInvalid = _c.disableSubmitIfInvalid, batchValidationDelayMs = _c.batchValidationDelayMs, batchValidationSize = _c.batchValidationSize, previewMode = _c.previewMode, loadingComponent = _c.loadingComponent, onSubmit = _b.onSubmit, onValidateRecord = _b.onValidateRecord, formatRecord = _b.formatRecord, selectedRows = _b.selectedRows;
+    var _b = useImporterContext(), templateHeaderMatchings = _b.templateHeaderMatchings, enumFieldValueMatchings = _b.enumFieldValueMatchings, templateHeaders = _b.templateHeaders, uploadedDataHeaders = _b.uploadedDataHeaders, headerRowIndex = _b.headerRowIndex, uploadedData = _b.uploadedData, currentStepIndex = _b.currentStepIndex, integrations = _b.integrations, templateSlug = _b.templateSlug, fuseApi = _b.fuseApi, setSelectedRows = _b.setSelectedRows, _c = _b.importerOptions, disableSubmitIfInvalid = _c.disableSubmitIfInvalid, batchValidationDelayMs = _c.batchValidationDelayMs, batchValidationSize = _c.batchValidationSize, previewMode = _c.previewMode, loadingComponent = _c.loadingComponent, onSubmit = _b.onSubmit, onValidateRecord = _b.onValidateRecord, formatRecord = _b.formatRecord, selectedRows = _b.selectedRows;
     var _d = useState(false), isSubmitting = _d[0], setIsSubmitting = _d[1];
     var _e = useState(false), isSubmitDisabled = _e[0], setIsSubmitDisabled = _e[1];
     var _f = useState(false), importWasSuccessful = _f[0], setImportWasSuccessful = _f[1];
@@ -247,25 +247,18 @@ export var ReviewContextProvider = function (_a) {
                     enumFieldValueMatchings: enumFieldValueMatchings,
                     templateHeaders: templateHeaders,
                     uploadedDataHeaders: uploadedDataHeaders,
-                    uploadedData: uploadedData,
+                    uploadedData: uploadedData.slice(headerRowIndex + 1),
                     formatRecord: formatRecord,
                 });
             var initialDataSet = getReviewDataSet({
                 records: _records,
                 fields: fields,
             }).initialDataSet;
+            setSelectedRows([]);
             setReviewFields(fields);
             setReviewInitialDataSet(initialDataSet);
         }
-    }, [
-        uploadedData,
-        currentStepIndex,
-        enumFieldValueMatchings,
-        templateHeaderMatchings,
-        templateHeaders,
-        uploadedDataHeaders,
-        uploadedData,
-    ]);
+    }, [uploadedData, currentStepIndex, templateHeaders, uploadedData]);
     var value = {
         previewInitialDataSet: previewInitialDataSet,
         previewFields: previewFields,

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

@@ -16,7 +16,6 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDropzone } from "react-dropzone";
 import styled, { css } from "styled-components";
-import * as XLSX from "xlsx";
 import { useUploaderContext } from "../UploaderContextProvider";
 import { useImporterContext } from "../../contexts/ImporterContextProvider";
 import { Div } from "../../../styled/utils";
@@ -25,6 +24,7 @@ import { addToast } from "../../../common/Toast";
 import { Button } from "../../../common/buttons";
 import { DragAndDropSvg, UploadIndicatorSvg } from "./backgrounds";
 import { useTranslation } from "react-i18next";
+import Papa from "papaparse";
 var DragAndDropCard = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  margin-right: ", ";\n  width: 100%;\n  height: 100%;\n  display: flex;\n  background: ", ";\n  border: 1px dashed ", ";\n\n  @media (max-width: 1050px) {\n    padding: 24px;\n    width: auto;\n  }\n\n  ", "\n"], ["\n  border-radius: 8px;\n  margin-right: ", ";\n  width: 100%;\n  height: 100%;\n  display: flex;\n  background: ", ";\n  border: 1px dashed ", ";\n\n  @media (max-width: 1050px) {\n    padding: 24px;\n    width: auto;\n  }\n\n  ", "\n"])), function (props) { return (props.isDragActive ? "-10px" : "revert"); }, theme.colors.white, theme.colors.red50, function (props) {
     return props.isDragActive && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      border: 1px solid ", ";\n      justify-content: center;\n    "], ["\n      background: ", ";\n      border: 1px solid ", ";\n      justify-content: center;\n    "])), function (p) { return p.theme.colors.blue100; }, function (p) { return p.theme.colors.blue500; });
 });
@@ -63,14 +63,11 @@ var ImporterDropzone = function () {
                 var _a;
                 var results = event.target.result;
                 var getDataFromFile = function (fileResults) {
-                    var workBook = XLSX.read(fileResults, {
-                        type: "array",
-                        codepage: 65001,
-                        raw: true,
-                    });
-                    var workBookName = workBook.SheetNames[0];
-                    var sheet = workBook.Sheets[workBookName];
-                    return XLSX.utils.sheet_to_json(sheet, { header: 1, raw: false });
+                    var csvString = new TextDecoder().decode(fileResults instanceof ArrayBuffer
+                        ? fileResults
+                        : new TextEncoder().encode(fileResults));
+                    var data = Papa.parse(csvString).data;
+                    return data;
                 };
                 var fileData = getDataFromFile(results);
                 var headersCount = (_a = fileData[0]) === null || _a === void 0 ? void 0 : _a.length;
@@ -85,7 +82,7 @@ var ImporterDropzone = function () {
     var onDropRejected = function (rejectedFiles) {
         var errorMessages = rejectedFiles.map(function (file) {
             if (file.errors[0].code === "file-too-large") {
-                return "Maximum file size is 10MB";
+                return "Maximum file size is 40MB";
             }
             else {
                 return file.errors[0].message;
@@ -103,7 +100,7 @@ var ImporterDropzone = function () {
         noKeyboard: true,
         accept: ".csv, .tsv, .xls, .xlsx",
         maxFiles: 1,
-        maxSize: 10000000,
+        maxSize: 41943040, // 40MB
     }), getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, open = _b.open, isDragActive = _b.isDragActive;
     return (_jsxs(DragAndDropCard, __assign({ isDragActive: isDragActive, centered: true, pRelative: true }, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), isDragActive && dropzoneUploadingUI, _jsx(DragAndDropComponent, { openUploadFileDialog: open })] })));
 };

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

@@ -15,22 +15,30 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { Div } from "../../styled/utils";
 import { useReviewContext } from "../Review/ReviewContextProvider";
-import Spreadsheet from "../common/Spreadsheet";
+import SpreadsheetBase from "../common/Spreadsheet";
 import { useImporterContext } from "../contexts/ImporterContextProvider";
 import { HeaderButtons } from "./HeaderButtons";
-var HeaderContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: 32px;\n\n  @media (max-width: 1050px) {\n    margin-left: 0px;\n\n    > div:first-of-type {\n      text-align: center;\n    }\n\n    div:last-of-type {\n      margin-left: 0px;\n    }\n  }\n"], ["\n  margin-left: 32px;\n\n  @media (max-width: 1050px) {\n    margin-left: 0px;\n\n    > div:first-of-type {\n      text-align: center;\n    }\n\n    div:last-of-type {\n      margin-left: 0px;\n    }\n  }\n"])));
-var DescriptionAndButtons = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  @media (max-width: 1050px) {\n    flex-direction: column;\n    gap: 16px;\n  }\n"], ["\n  @media (max-width: 1050px) {\n    flex-direction: column;\n    gap: 16px;\n  }\n"])));
+import { useEffect } from "react";
+var Spreadsheet = styled(SpreadsheetBase)(function () { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    /* rows will be removed for match and review steps */\n    .before-selected-row {\n      opacity: 0.2;\n    }\n  "], ["\n    /* rows will be removed for match and review steps */\n    .before-selected-row {\n      opacity: 0.2;\n    }\n  "]))); });
+var HeaderContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: 32px;\n\n  @media (max-width: 1050px) {\n    margin-left: 0px;\n\n    > div:first-of-type {\n      text-align: center;\n    }\n\n    div:last-of-type {\n      margin-left: 0px;\n    }\n  }\n"], ["\n  margin-left: 32px;\n\n  @media (max-width: 1050px) {\n    margin-left: 0px;\n\n    > div:first-of-type {\n      text-align: center;\n    }\n\n    div:last-of-type {\n      margin-left: 0px;\n    }\n  }\n"])));
+var DescriptionAndButtons = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  @media (max-width: 1050px) {\n    flex-direction: column;\n    gap: 16px;\n  }\n"], ["\n  @media (max-width: 1050px) {\n    flex-direction: column;\n    gap: 16px;\n  }\n"])));
 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, h100: true }, { children: [_jsxs(HeaderContainer, { children: [_jsx(Div, __assign({ h2: true, mt: 40, mb: 16 }, { children: t("headers_preview.title") })), _jsxs(DescriptionAndButtons, __assign({ body1: true, mb: 24, alignCenter: true }, { children: [t("headers_preview.description"), _jsx(HeaderButtons, {})] }))] }), _jsx(Div, __assign({ w100: true, h100: true, justifyCenter: true }, { children: initialDataSet && (_jsx(Spreadsheet, { isReadOnly: true, initialDataSet: initialDataSet, fields: fields, highlightFirstRow: true, options: {
+    var _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows, setHeaderRowIndex = _b.setHeaderRowIndex;
+    useEffect(function () {
+        if (initialDataSet && selectedRows[0]) {
+            var headerRowIndex = Object.keys(initialDataSet).findIndex(function (key) { return key === selectedRows[0]; });
+            setHeaderRowIndex(headerRowIndex);
+        }
+    }, [initialDataSet, selectedRows]);
+    return (_jsxs(Div, __assign({ flexColumn: true, h100: true }, { children: [_jsxs(HeaderContainer, { children: [_jsx(Div, __assign({ h2: true, mt: 40, mb: 16 }, { children: t("headers_preview.title") })), _jsxs(DescriptionAndButtons, __assign({ body1: true, mb: 24, alignCenter: true }, { children: [t("headers_preview.description"), _jsx(HeaderButtons, {})] }))] }), _jsx(Div, __assign({ w100: true, h100: true, justifyCenter: true }, { children: initialDataSet && (_jsx(Spreadsheet, { isReadOnly: true, initialDataSet: initialDataSet, fields: fields, options: {
                         showCheckboxColumn: true,
-                        firstRowIsHeader: true,
+                        withSingleRowSelect: true,
                     }, selectedRows: selectedRows, setSelectedRows: setSelectedRows })) }))] })));
 };
 export default HeadersPreview;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,14 +1,3 @@
-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);
-};
 //Filter records by search value
 export var filterRecordsBySearchValue = function (obj, value) {
     var isObject = function (value) {
@@ -38,6 +27,7 @@ export var filterRecordsBySearchValue = function (obj, value) {
     return filteredObj;
 };
 export var filterRecordsByType = function (obj, filterType) {
+    var _a, _b;
     var rowIsEmpty = function (row) {
         return Object.keys(row).every(function (key) {
             if (key === "_meta")
@@ -45,16 +35,15 @@ export var filterRecordsByType = function (obj, filterType) {
             return !row[key];
         });
     };
-    var filteredKeys = Object.keys(obj).filter(function (key) {
-        var _a, _b;
-        return filterType === "all" ||
+    var filteredObj = {};
+    for (var key in obj) {
+        if (filterType === "all" ||
             (((_b = (_a = obj[key]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.isInvalid) !== (filterType === "valid") &&
-                !rowIsEmpty(obj[key]));
-    });
-    return filteredKeys.reduce(function (acc, key) {
-        var _a;
-        return (__assign(__assign({}, acc), (_a = {}, _a[key] = obj[key], _a)));
-    }, {});
+                !rowIsEmpty(obj[key]))) {
+            filteredObj[key] = obj[key];
+        }
+    }
+    return filteredObj;
 };
 //Filter records by selected column error
 export var filterRecordsByError = function (obj, keyToFilter, errors) {

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

@@ -13,7 +13,6 @@ type State = {
     isReadOnly?: boolean;
     errors: BatchValidationErrors;
     warnings: BatchValidationErrors;
-    highlightFirstRow: boolean;
     options: SpreadsheetOptions;
     sortByFieldErrors: string;
     sortByFieldWarnings: string;
@@ -42,6 +41,6 @@ type State = {
 type Props = SpreadsheetProps & {
     children: JSX.Element;
 };
-export declare const SpreadsheetContextProvider: ({ initialDataSet, fields, options, isReadOnly, highlightFirstRow, children, onValidateRecord, onDataSetChanged, onValidationStateChanged, selectedRows, setSelectedRows, getSortCompareFn, }: Props) => JSX.Element;
+export declare const SpreadsheetContextProvider: ({ initialDataSet, fields, options, isReadOnly, children, onValidateRecord, onDataSetChanged, onValidationStateChanged, selectedRows, setSelectedRows, getSortCompareFn, }: Props) => JSX.Element;
 export declare const useSpreadsheetContext: () => State;
 export {};

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

@@ -45,7 +45,7 @@ var getDefaultSortCompareFn = function (sortBy) {
 };
 var SpreadsheetContext = createContext({});
 export var SpreadsheetContextProvider = function (_a) {
-    var initialDataSet = _a.initialDataSet, 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, _b = _a.getSortCompareFn, getSortCompareFn = _b === void 0 ? getDefaultSortCompareFn : _b;
+    var initialDataSet = _a.initialDataSet, fields = _a.fields, options = _a.options, isReadOnly = _a.isReadOnly, children = _a.children, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows, _b = _a.getSortCompareFn, getSortCompareFn = _b === void 0 ? getDefaultSortCompareFn : _b;
     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];
@@ -66,7 +66,11 @@ export var SpreadsheetContextProvider = function (_a) {
     }), updateRecordAndRevalidate = _k.updateRecordAndRevalidate, deleteRecords = _k.deleteRecords, warnings = _k.warnings, errors = _k.errors, validationState = __rest(_k, ["updateRecordAndRevalidate", "deleteRecords", "warnings", "errors"]);
     var addNewRowsToSpreadsheet = function () {
         addRowTimeoutRef.current = setTimeout(function () {
-            var highestRowIndex = Math.max.apply(Math, Object.values(dataSet).map(function (obj) { return obj._meta.rowIndex; }));
+            var _a, _b;
+            var highestRowIndex = -1;
+            for (var key in dataSet)
+                if (((_b = (_a = dataSet[key]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.rowIndex) > highestRowIndex)
+                    highestRowIndex = dataSet[key]._meta.rowIndex;
             var newRow = addMeta({}, highestRowIndex + 1);
             setDataSet(function (oldValues) {
                 var _a;
@@ -161,7 +165,7 @@ export var SpreadsheetContextProvider = function (_a) {
             return updatedData;
         });
     }, [dataSet, dataSnapshot]);
-    var value = __assign(__assign({ data: updatedDataSnapshot, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, highlightFirstRow: highlightFirstRow, options: options, recordsWithValuesCount: recordsWithValuesCount, filteredDataCount: filteredDataCount, sortBy: sortBy, warnings: warnings, errors: errors, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, setSortByFieldWarnings: handleSortByFieldWarnings, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows, deleteRecords: handleDeleteErrors, filteredInputValue: filteredInputValue, setFilteredInputValue: setFilteredInputValue, lastClickedIndexRef: lastClickedIndexRef, addNewRowsToSpreadsheet: addNewRowsToSpreadsheet, spreadsheetFilter: spreadsheetFilter, resetSpreadsheetFilter: resetSpreadsheetFilter, filterRecordsByRowType: filterRecordsByRowType, filterRecordsByFieldErrors: filterRecordsByFieldErrors, checkboxColumnWidth: checkboxColumnWidth, setSortBy: setSortBy, isFiltering: isFiltering });
+    var value = __assign(__assign({ data: updatedDataSnapshot, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, options: options, recordsWithValuesCount: recordsWithValuesCount, filteredDataCount: filteredDataCount, sortBy: sortBy, warnings: warnings, errors: errors, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, setSortByFieldWarnings: handleSortByFieldWarnings, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows, deleteRecords: handleDeleteErrors, filteredInputValue: filteredInputValue, setFilteredInputValue: setFilteredInputValue, lastClickedIndexRef: lastClickedIndexRef, addNewRowsToSpreadsheet: addNewRowsToSpreadsheet, spreadsheetFilter: spreadsheetFilter, resetSpreadsheetFilter: resetSpreadsheetFilter, filterRecordsByRowType: filterRecordsByRowType, filterRecordsByFieldErrors: filterRecordsByFieldErrors, checkboxColumnWidth: checkboxColumnWidth, setSortBy: setSortBy, isFiltering: isFiltering });
     return (_jsx(SpreadsheetContext.Provider, __assign({ value: value }, { children: children })));
 };
 export var useSpreadsheetContext = function () { return useContext(SpreadsheetContext); };

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { DivCSSProps } from "../../../../styled";
 import { RecordDataSet, Field, SpreadsheetOptions, OnValidateRecord, Record } from "../../../../types";
 import { OnDataSetChanged, OnValidationStateChanged } from "../SpreadsheetContextProvider";
 export declare enum SortOrder {
@@ -13,7 +14,6 @@ export type SpreadsheetProps = {
     initialDataSet: RecordDataSet;
     isReadOnly?: boolean;
     fields?: Field[];
-    highlightFirstRow?: boolean;
     options?: SpreadsheetOptions;
     onValidateRecord?: OnValidateRecord;
     onDataSetChanged?: OnDataSetChanged;
@@ -21,4 +21,4 @@ export type SpreadsheetProps = {
     selectedRows?: string[];
     setSelectedRows?: React.Dispatch<React.SetStateAction<string[]>>;
     getSortCompareFn?: (sortBy: SortBy) => (a: Record, b: Record) => number;
-};
+} & DivCSSProps;

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

@@ -1,3 +1,4 @@
 import React from "react";
-declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+import { DivCSSProps } from "../../../../styled/utils";
+declare const _default: React.MemoExoticComponent<(props: DivCSSProps) => JSX.Element>;
 export default _default;

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

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { areEqual } from "react-window";
 import { Div } from "../../../../styled/utils";
 import { getTableHeight } from "../../../common";
@@ -37,13 +37,17 @@ 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 SpreadsheetData = function (props) {
+    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, setSelectedRows = _a.setSelectedRows, checkboxColumnWidth = _a.checkboxColumnWidth, isFiltering = _a.isFiltering;
     var currentStepIndex = useImporterContext().currentStepIndex;
     var isOnSmallScreens = useWindowDimensions().isOnSmallScreens;
     var canShowCheckboxOnCheckboxRowHover = currentStepIndex === 2;
     var rowNumbersGridRef = useRef();
     var rowCheckboxesGridRef = useRef();
+    useEffect(function () {
+        if (data.length > 0 && options.withSingleRowSelect)
+            setSelectedRows([data === null || data === void 0 ? void 0 : data[0]._meta.id]);
+    }, [options.withSingleRowSelect]);
     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
@@ -100,6 +104,7 @@ var SpreadsheetData = function () {
     }, [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 })] }))] }))] })));
+    return (_jsxs(S.SpreadSheetData, __assign({ h100: true, flexColumn: true, className: props.className }, { 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) ||
+                            currentStepIndex === 0, dflex: true, h100: true }, { children: [(options === null || options === void 0 ? void 0 : options.showCheckboxColumn) && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, height: spreadsheetHeight, isLoadingData: showValidationProgress })), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, 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

@@ -3,8 +3,7 @@ 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 declare const SpreadsheetRowCheckboxes: ({ height, gridRef, isLoadingData, ...props }: Props) => JSX.Element;
 export {};

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

@@ -62,27 +62,31 @@ var rowIsEmpty = function (row) {
     });
 };
 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 height = _a.height, gridRef = _a.gridRef, isLoadingData = _a.isLoadingData, props = __rest(_a, ["height", "gridRef", "isLoadingData"]);
+    var _b = useSpreadsheetContext(), data = _b.data, selectedRows = _b.selectedRows, options = _b.options, lastClickedIndexRef = _b.lastClickedIndexRef, setSelectedRows = _b.setSelectedRows, checkboxColumnWidth = _b.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 _a, _b;
         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 (options.withSingleRowSelect) {
+            if (!rowIsEmpty(data[rowIndex]))
+                setSelectedRows([(_b = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id]);
+            return;
+        }
         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); });
+            setSelectedRows(function (prev) { var _a, _b; return __spreadArray(__spreadArray([], prev, true), [(_b = (_a = data[rowIndex]) === 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); });
+                return prev.filter(function (row) { var _a, _b; return row !== ((_b = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.id); });
             });
         }
         lastClickedIndexRef.current = rowIndex;
@@ -144,12 +148,14 @@ export var SpreadsheetRowCheckboxes = function (_a) {
     };
     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) {
+        var rowIndex = _a.rowIndex;
+        var rowMetaId = (_c = (_b = data[rowIndex]) === null || _b === void 0 ? void 0 : _b._meta) === null || _c === void 0 ? void 0 : _c.id;
+        return (_jsx(Div, __assign({ className: "checkbox-cell", "data-test-id": "checkbox-cell-".concat(rowIndex) }, { children: _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 })) })));
+                }, onShiftKeyPressed: function () {
+                    if (!options.withSingleRowSelect)
+                        handleSelectMultipleRows(rowIndex);
+                }, style: { cursor: "pointer" }, isDisabled: isLoadingData }) })));
     };
     var RowNumbersCell = function (_a) {
         var rowIndex = _a.rowIndex;
@@ -157,8 +163,7 @@ export var SpreadsheetRowCheckboxes = function (_a) {
     };
     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));
+        return (_jsxs(RowCheckbox, __assign({ style: style, alignCenter: true, justifyCenter: true, isLast: rowIndex === data.length - 1 }, { children: [_jsx(CheckboxCell, { rowIndex: rowIndex }), _jsx(RowNumbersCell, { rowIndex: rowIndex })] }), rowIndex));
     };
     var isSelectAllRowsChekboxChecked = (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) > 0 &&
         (data === null || data === void 0 ? void 0 : data.length) > 0 &&

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

@@ -118,7 +118,7 @@ var SpreadsheetWrapper = function (_a) {
 };
 var Spreadsheet = function (props) {
     var getDefaultSortCompareFn = useFieldSorting().getDefaultSortCompareFn;
-    return (_jsx(SpreadsheetContextProvider, __assign({}, props, { getSortCompareFn: getDefaultSortCompareFn }, { children: _jsx(SpreadsheetData, {}) })));
+    return (_jsx(SpreadsheetContextProvider, __assign({}, props, { getSortCompareFn: getDefaultSortCompareFn }, { children: _jsx(SpreadsheetData, { className: props.className }) })));
 };
 export default React.memo(SpreadsheetWrapper, areEqual);
 export * from "./SpreadsheetContextProvider";

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

@@ -6,5 +6,5 @@ interface SpreadSheetWrapperProps {
 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 & SpreadSheetWrapperProps, never>;
 export declare const SpreadSheetContainer: 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, rowWidthScalingFactor, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, isDraggable, checkboxColumnWidth, isFiltering, ...props }: import("../../../common/Table/TableView/types").TableViewProps) => JSX.Element>, import("styled-components").DefaultTheme, {}, never>;
+export declare const TableView: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, setSortBy, rowWidthScalingFactor, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, isDraggable, checkboxColumnWidth, isFiltering, ...props }: import("../../../common/Table/TableView/types").TableViewProps) => JSX.Element>, import("styled-components").DefaultTheme, {}, never>;
 export {};

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

@@ -39,6 +39,8 @@ export type State = {
     logoURL: string;
     integrations: Integration[];
     onSubmit: OnSubmit;
+    headerRowIndex: number;
+    setHeaderRowIndex: React.Dispatch<React.SetStateAction<number>>;
     resetImport: () => void;
     onClose: () => void;
     setCurrentStepIndex: React.Dispatch<number>;

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

@@ -85,6 +85,7 @@ export var ImporterContextProvider = function (_a) {
     var _o = useState(null), uploadedDataEnumFieldValues = _o[0], setUploadedDataEnumFieldValues = _o[1];
     var _p = useState([]), selectedRows = _p[0], setSelectedRows = _p[1];
     var isUsingManualImport = useRef(false);
+    var _q = useState(0), headerRowIndex = _q[0], setHeaderRowIndex = _q[1];
     var fuseApi = useMemo(function () { return new FuseApi(options.env, apiToken); }, [
         options.env,
         apiToken,
@@ -99,12 +100,27 @@ export var ImporterContextProvider = function (_a) {
                 return acc;
             }, []);
         }
-        return (_a = uploadedData[0]) === null || _a === void 0 ? void 0 : _a.map(function (ud) {
+        return (_a = uploadedData[headerRowIndex]) === null || _a === void 0 ? void 0 : _a.map(function (ud) {
             return typeof ud === "number" ? ud.toString() : ud;
         });
-    }, [uploadedData]);
+    }, [uploadedData, headerRowIndex]);
     useEffect(function () {
-        if (!templateHeaderMatchings)
+        var setHeadersFromDataset = function () {
+            var _templateHeaderMatchings = {};
+            var fuse = new Fuse(uploadedDataHeaders, fusejsOptions);
+            templateHeaders.forEach(function (templateHeader, _index) {
+                var _a;
+                var fuseResults = fuse.search(templateHeader.label);
+                _templateHeaderMatchings[templateHeader.label] = (_a = fuseResults[0]) === null || _a === void 0 ? void 0 : _a.item;
+            });
+            setTemplateHeaderMatchings(_templateHeaderMatchings);
+        };
+        if (uploadedDataHeaders) {
+            setHeadersFromDataset();
+        }
+    }, [uploadedDataHeaders]);
+    useEffect(function () {
+        if (!templateHeaderMatchings || !uploadedDataHeaders)
             return;
         var _uploadedDataEnumFieldValues = {};
         var templateLabels = Object.keys(templateHeaderMatchings);
@@ -117,7 +133,7 @@ export var ImporterContextProvider = function (_a) {
             var columnIndex = uploadedDataHeaders.indexOf(uploadedDataHeader);
             if (columnIndex === -1)
                 return;
-            uploadedData.slice(1).forEach(function (row) {
+            uploadedData === null || uploadedData === void 0 ? void 0 : uploadedData.slice(headerRowIndex + 1).forEach(function (row) {
                 var uploadedValue = row[columnIndex];
                 enumFieldValues.add(uploadedValue);
             });
@@ -126,12 +142,7 @@ export var ImporterContextProvider = function (_a) {
             });
         });
         setUploadedDataEnumFieldValues(_uploadedDataEnumFieldValues);
-    }, [templateHeaderMatchings]);
-    useEffect(function () {
-        if (uploadedData) {
-            setHeadersFromDataset();
-        }
-    }, [uploadedData]);
+    }, [templateHeaderMatchings, uploadedDataHeaders]);
     useEffect(function () {
         (function () { return __awaiter(void 0, void 0, void 0, function () {
             var _a, organization_1, columns_1, importer_style_preferences, integrations_1, preview_first_time, error_1, errorMsg;
@@ -191,16 +202,6 @@ export var ImporterContextProvider = function (_a) {
             setCurrentStepIndex(2);
         }
     };
-    var setHeadersFromDataset = function () {
-        var _templateHeaderMatchings = {};
-        var fuse = new Fuse(uploadedDataHeaders, fusejsOptions);
-        templateHeaders.forEach(function (templateHeader, _index) {
-            var _a;
-            var fuseResults = fuse.search(templateHeader.label);
-            _templateHeaderMatchings[templateHeader.label] = (_a = fuseResults[0]) === null || _a === void 0 ? void 0 : _a.item;
-        });
-        setTemplateHeaderMatchings(_templateHeaderMatchings);
-    };
     var inTrialMode = organization === null || organization === void 0 ? void 0 : organization.trial_mode;
     var value = {
         initialRecords: initialRecords,
@@ -222,6 +223,8 @@ export var ImporterContextProvider = function (_a) {
         logoURL: style.logoURL,
         integrations: integrations,
         previewFirstTime: previewFirstTime,
+        headerRowIndex: headerRowIndex,
+        setHeaderRowIndex: setHeaderRowIndex,
         setUploadedData: setUploadedData,
         formatRecord: formatRecord,
         setCurrentStepIndex: setCurrentStepIndex,

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

@@ -85,17 +85,14 @@ export var transformToRecords = function (_a) {
         });
         return formatRecord ? formatRecord(record) : record;
     };
-    return uploadedData.slice(1).map(getRecord);
+    return uploadedData.map(getRecord);
 };
 export var getPreviewDataSet = function (_a) {
     var uploadedData = _a.uploadedData;
-    var getFirstRowLen = function () {
-        if (uploadedData.length > 0 && Array.isArray(uploadedData[0])) {
-            return uploadedData[0].length;
-        }
-        return 0;
-    };
-    var fields = new Array(getFirstRowLen()).fill(null).map(function (_, i) {
+    var rowLen = 0;
+    for (var i = 0; i < uploadedData.length; i++)
+        rowLen = Math.max(rowLen, uploadedData[i].length);
+    var fields = new Array(rowLen).fill(null).map(function (_, i) {
         var key = String.fromCharCode(65 + i);
         return {
             label: key,
@@ -105,9 +102,7 @@ export var getPreviewDataSet = function (_a) {
         };
     });
     var getInitialDataSet = function () {
-        //Showing only the first 100 rows to improve performance
-        //TODO: Check with Mike
-        var data = uploadedData.slice(0, 100).map(function (row, index) {
+        var data = uploadedData.map(function (row, index) {
             var entry = addMeta({}, index);
             fields.forEach(function (field, index) {
                 entry[field.name] = row[index];

package/lib/esm/common/Table/TableActions/RowFilters.js

@@ -26,7 +26,10 @@ var FilteredDataCount = styled(Div)(templateObject_4 || (templateObject_4 = __ma
 var Filter = function (_a) {
     var label = _a.label, count = _a.count, isSelected = _a.isSelected, onClick = _a.onClick;
     var _b = useSpreadsheetContext(), filteredInputValue = _b.filteredInputValue, filteredDataCount = _b.filteredDataCount;
-    return (_jsxs(Div, __assign({ dflex: true, clickable: true, onClick: onClick }, { children: [_jsxs(FilterContainer, __assign({ isSelected: isSelected }, { children: [label, count >= 0 && _jsxs(_Fragment, { children: ["\u00A0(", count, ")"] })] })), isSelected && filteredInputValue !== "" && (_jsx(FilteredDataCount, { children: _jsx(Div, __assign({ minw: 14, centered: true }, { children: filteredDataCount })) }))] })));
+    var labelToId = function (label) {
+        return label.toLowerCase().replace(/\s/g, "_") + "_filter";
+    };
+    return (_jsxs(Div, __assign({ dflex: true, clickable: true, onClick: onClick, "data-test-id": labelToId(label) }, { children: [_jsxs(FilterContainer, __assign({ isSelected: isSelected }, { children: [label, count >= 0 && _jsxs(_Fragment, { children: ["\u00A0(", count, ")"] })] })), isSelected && filteredInputValue !== "" && (_jsx(FilteredDataCount, { children: _jsx(Div, __assign({ minw: 14, centered: true }, { children: filteredDataCount })) }))] })));
 };
 export var RowFilters = function () {
     var _a = useSpreadsheetContext(), spreadsheetFilter = _a.spreadsheetFilter, errors = _a.errors, filterRecordsByRowType = _a.filterRecordsByRowType, recordsWithValuesCount = _a.recordsWithValuesCount;

package/lib/esm/common/Table/TableView/TableRows/TableRow.d.ts

@@ -7,7 +7,7 @@ type TableViewRowProps = {
     isLast: boolean;
 };
 export declare const TableViewRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../../styled/utils").CSSProps & TableViewRowProps, never>;
-type Props = Pick<TableViewProps, "columns" | "onRowClick" | "highlightFirstRow"> & {
+type Props = Pick<TableViewProps, "columns" | "onRowClick"> & {
     row: any;
     rowWidth: number;
     indexI: number;
@@ -15,5 +15,5 @@ type Props = Pick<TableViewProps, "columns" | "onRowClick" | "highlightFirstRow"
     getItemKey?: (row: any) => string;
     isRowSelected?: boolean;
 } & DivCSSProps;
-export declare const TableRow: ({ row, indexI, columns, isLast, highlightFirstRow, onRowClick, getItemKey, rowWidth, isRowSelected, ...props }: Props) => JSX.Element;
+export declare const TableRow: ({ row, indexI, columns, isLast, onRowClick, getItemKey, rowWidth, isRowSelected, ...props }: Props) => JSX.Element;
 export {};

package/lib/esm/common/Table/TableView/TableRows/TableRow.js

@@ -40,11 +40,11 @@ export var TableViewRow = styled(Div)(templateObject_3 || (templateObject_3 = __
     return p.isHighlighted && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n      box-shadow: inset 0 0 0 3px ", ";\n\n      .input-content {\n        background: transparent;\n        border: none;\n        box-shadow: none;\n\n        &,\n        input {\n          color: ", ";\n        }\n      }\n    "], ["\n      background: ", ";\n      box-shadow: inset 0 0 0 3px ", ";\n\n      .input-content {\n        background: transparent;\n        border: none;\n        box-shadow: none;\n\n        &,\n        input {\n          color: ", ";\n        }\n      }\n    "])), p.theme.colors.blue100, p.theme.colors.blue500, p.theme.colors.gray1000);
 });
 export var TableRow = function (_a) {
-    var row = _a.row, indexI = _a.indexI, columns = _a.columns, isLast = _a.isLast, highlightFirstRow = _a.highlightFirstRow, onRowClick = _a.onRowClick, getItemKey = _a.getItemKey, rowWidth = _a.rowWidth, _b = _a.isRowSelected, isRowSelected = _b === void 0 ? false : _b, props = __rest(_a, ["row", "indexI", "columns", "isLast", "highlightFirstRow", "onRowClick", "getItemKey", "rowWidth", "isRowSelected"]);
-    var isHighlighted = (indexI === 0 && highlightFirstRow) || isRowSelected;
-    return (_jsx(TableViewRow, __assign({ "data-test-id": "row-".concat(indexI), dflex: true }, { isHighlighted: isHighlighted, isLast: isLast }, props, { children: columns.map(function (column, indexJ) {
+    var row = _a.row, indexI = _a.indexI, columns = _a.columns, isLast = _a.isLast, onRowClick = _a.onRowClick, getItemKey = _a.getItemKey, rowWidth = _a.rowWidth, _b = _a.isRowSelected, isRowSelected = _b === void 0 ? false : _b, props = __rest(_a, ["row", "indexI", "columns", "isLast", "onRowClick", "getItemKey", "rowWidth", "isRowSelected"]);
+    var isHighlighted = isRowSelected;
+    var key = getItemKey ? getItemKey(row) : "".concat(indexI);
+    return (_jsx(TableViewRow, __assign({ "data-test-id": "row-".concat(indexI), id: "row-id-".concat(key), dflex: true }, { isHighlighted: isHighlighted, isLast: isLast }, props, { children: columns.map(function (column, indexJ) {
             var Content = column.Content;
-            var key = getItemKey ? getItemKey(row) : "".concat(indexI);
             var resolvedKey = "column-".concat(indexJ, "-row-").concat(key);
             var columnWidthPercentages = getColumnWidthsPx(columns, rowWidth);
             var columnWidthPercentage = columnWidthPercentages[indexJ];