fuse-importer 0.25.4 → 0.25.6

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

@@ -2,10 +2,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { TableView as TableViewBase, TableViewCellContainer, TableViewRow, } from "../../../common/Table/TableView";
 import { Div } from "../../../styled/utils";
-export var SpreadSheetData = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"])));
-export var SpreadSheetWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: solid 1px ", ";\n  border-radius: 8px;\n  background: ", ";\n  overflow: hidden !important;\n  flex-grow: 1;\n  margin-left: 32px;\n  margin-right: 32px;\n"], ["\n  border: solid 1px ", ";\n  border-radius: 8px;\n  background: ", ";\n  overflow: hidden !important;\n  flex-grow: 1;\n  margin-left: 32px;\n  margin-right: 32px;\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.white; });
-export var TableView = styled(TableViewBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n"], ["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n"])), function (p) { return p.theme.colors.gray50; }, TableViewRow, TableViewCellContainer, function (p) { return p.theme.colors.gray300; });
-var templateObject_1, templateObject_2, templateObject_3;
+export var SpreadSheetData = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  max-height: 675px;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  max-height: 675px;\n  width: 100%;\n"])));
+export var SpreadSheetWrapper = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: solid 1px ", ";\n  background: ", ";\n  overflow: hidden !important;\n  flex-grow: 1;\n\n  ", "\n"], ["\n  border: solid 1px ", ";\n  background: ", ";\n  overflow: hidden !important;\n  flex-grow: 1;\n\n  ", "\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.white; }, function (_a) {
+    var canShowCheckboxOnHover = _a.canShowCheckboxOnHover, shouldShowOnlyCheckbox = _a.shouldShowOnlyCheckbox;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    .spreadsheet-row-container {\n      ", "\n\n      ", "\n    }\n  "], ["\n    .spreadsheet-row-container {\n      ", "\n\n      ", "\n    }\n  "])), shouldShowOnlyCheckbox && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        .row-numbers-cell {\n          visibility: hidden;\n        }\n\n        .checkbox-cell {\n          visibility: visible;\n        }\n      "], ["\n        .row-numbers-cell {\n          visibility: hidden;\n        }\n\n        .checkbox-cell {\n          visibility: visible;\n        }\n      "]))), !shouldShowOnlyCheckbox &&
+        canShowCheckboxOnHover && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        &:hover {\n          .row-numbers-cell {\n            visibility: hidden;\n          }\n\n          .checkbox-cell {\n            visibility: visible;\n          }\n        }\n      "], ["\n        &:hover {\n          .row-numbers-cell {\n            visibility: hidden;\n          }\n\n          .checkbox-cell {\n            visibility: visible;\n          }\n        }\n      "]))));
+});
+export var SpreadSheetContainer = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
+export var TableView = styled(TableViewBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n"], ["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n"])), function (p) { return p.theme.colors.gray50; }, TableViewRow, TableViewCellContainer, function (p) { return p.theme.colors.gray300; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -14,6 +14,10 @@ export type EnumFieldValueMatchings = {
 export type UploadedDataEnumFieldValues = {
     [templateHeaderLabel: string]: string[];
 };
+export type SelectedRow = {
+    tableRow: number;
+    dataRowIndex: number;
+};
 export type State = {
     currentStepIndex: number;
     templateError: string | null;
@@ -44,8 +48,11 @@ export type State = {
     formatRecord: FormatRecord;
     onValidateRecord?: OnValidateRecord;
     setMatcherSubstep: React.Dispatch<number>;
-    selectedRows: number[];
-    setSelectedRows: React.Dispatch<React.SetStateAction<number[]>>;
+    selectedRows: string[];
+    setSelectedRows: React.Dispatch<React.SetStateAction<string[]>>;
+    isUsingManualImport: React.MutableRefObject<boolean>;
+    resetImporterWhenUsingManualImport: () => void;
+    manualDataImportSelected: () => void;
 };
 export type Props = {
     templateSlug: string;

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

@@ -47,7 +47,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import Fuse from "fuse.js";
-import { createContext, useContext, useEffect, useMemo, useState, } from "react";
+import { createContext, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { FieldTypes, } from "../../types";
 import { FuseApi } from "../common/FuseApi";
 import { getCustomTheme, theme } from "../common/theme";
@@ -75,16 +75,24 @@ export var ImporterContextProvider = function (_a) {
     var _m = useState(null), enumFieldValueMatchings = _m[0], setEnumFieldValueMatchings = _m[1];
     var _o = useState(null), uploadedDataEnumFieldValues = _o[0], setUploadedDataEnumFieldValues = _o[1];
     var _p = useState([]), selectedRows = _p[0], setSelectedRows = _p[1];
+    var isUsingManualImport = useRef(false);
     var fuseApi = useMemo(function () { return new FuseApi(options.env, apiToken); }, [
         options.env,
         apiToken,
     ]);
     var uploadedDataHeaders = useMemo(function () {
         var _a;
-        return uploadedData &&
-            ((_a = uploadedData[0]) === null || _a === void 0 ? void 0 : _a.map(function (ud) {
-                return typeof ud === "number" ? ud.toString() : ud;
-            }));
+        if (!uploadedData)
+            return null;
+        if (isUsingManualImport.current) {
+            return templateHeaders.reduce(function (acc, curr) {
+                acc.push(curr.internal_key);
+                return acc;
+            }, []);
+        }
+        return (_a = uploadedData[0]) === null || _a === void 0 ? void 0 : _a.map(function (ud) {
+            return typeof ud === "number" ? ud.toString() : ud;
+        });
     }, [uploadedData]);
     useEffect(function () {
         if (!templateHeaderMatchings)
@@ -113,12 +121,8 @@ export var ImporterContextProvider = function (_a) {
     useEffect(function () {
         if (uploadedData) {
             setHeadersFromDataset();
-            selectAllRows();
         }
     }, [uploadedData]);
-    var selectAllRows = function () {
-        setSelectedRows(uploadedData.map(function (_, index) { return index; }));
-    };
     useEffect(function () {
         (function () { return __awaiter(void 0, void 0, void 0, function () {
             var _a, organization_1, columns, importer_style_preferences, integrations_1, preview_first_time, columnsOrderedByPosition, error_1, errorMsg;
@@ -154,6 +158,19 @@ export var ImporterContextProvider = function (_a) {
         setUploadedData(null);
         setTemplateHeaderMatchings(null);
     };
+    var resetImporterWhenUsingManualImport = function () {
+        setCurrentStepIndex(0);
+        isUsingManualImport.current = false;
+        resetImport();
+    };
+    var manualDataImportSelected = function () {
+        if (templateHeaders) {
+            isUsingManualImport.current = true;
+            setUploadedData([]);
+            setTemplateHeaderMatchings({});
+            setCurrentStepIndex(2);
+        }
+    };
     var setHeadersFromDataset = function () {
         var _templateHeaderMatchings = {};
         var fuse = new Fuse(uploadedDataHeaders, fusejsOptions);
@@ -197,6 +214,9 @@ export var ImporterContextProvider = function (_a) {
         onSubmit: onSubmit,
         selectedRows: selectedRows,
         setSelectedRows: setSelectedRows,
+        isUsingManualImport: isUsingManualImport,
+        resetImporterWhenUsingManualImport: resetImporterWhenUsingManualImport,
+        manualDataImportSelected: manualDataImportSelected,
     };
     return (_jsx(ImporterContext.Provider, __assign({ value: value }, { children: children })));
 };

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

@@ -1,5 +1,6 @@
 import { Field, FieldTypes, FormatRecord, Record, RecordDataSet, TemplateHeader } from "../../types";
 import { EnumFieldValueMatchings, HeaderMatchings } from "../contexts/ImporterContextProvider";
+export declare const addEmptyRows: (data: Record[], fields: Field[]) => Record[];
 export declare const addMeta: (record: any, index: number) => Record;
 export declare const recordListToDataSet: (data: Record[], fields: Field[]) => RecordDataSet;
 type transformToRecordsArgs = {
@@ -23,6 +24,8 @@ export declare const getPreviewDataSet: ({ uploadedData, }: {
 };
 export declare const getReviewDataSet: ({ templateHeaderMatchings, enumFieldValueMatchings, templateHeaders, uploadedDataHeaders, uploadedData, formatRecord, }: transformToRecordsArgs) => {
     fields: Field[];
-    initialDataSet: RecordDataSet;
+    initialDataSet: {
+        [x: string]: Record;
+    };
 };
 export {};

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

@@ -16,7 +16,7 @@ var getRowId = function (index) {
     var uniqueTimestamp = new Date().getTime();
     return "r".concat(index, "-").concat(uniqueTimestamp);
 };
-var addEmptyRows = function (data, fields) {
+export var addEmptyRows = function (data, fields) {
     var emptyRecord = fields.reduce(function (obj, f) {
         var _a;
         return (__assign(__assign({}, obj), (_a = {}, _a[f.name] = null, _a)));
@@ -110,6 +110,7 @@ export var getPreviewDataSet = function (_a) {
     return { fields: fields, initialDataSet: getInitialDataSet() };
 };
 export var getReviewDataSet = function (_a) {
+    var _b;
     var templateHeaderMatchings = _a.templateHeaderMatchings, enumFieldValueMatchings = _a.enumFieldValueMatchings, templateHeaders = _a.templateHeaders, uploadedDataHeaders = _a.uploadedDataHeaders, uploadedData = _a.uploadedData, formatRecord = _a.formatRecord;
     var fields = templateHeaders.map(function (templateHeader) { return ({
         label: templateHeader.label,
@@ -128,6 +129,9 @@ export var getReviewDataSet = function (_a) {
         uploadedData: uploadedData,
         formatRecord: formatRecord,
     });
-    var initialDataSet = recordListToDataSet(addEmptyRows(records, fields), fields);
+    var baseInitialDataSet = recordListToDataSet(addEmptyRows(records, fields), fields);
+    var highestRowIndex = Math.max.apply(Math, Object.values(records).map(function (obj) { return obj._meta.rowIndex; }));
+    var emptyRowAtBottom = addMeta({}, highestRowIndex + 1);
+    var initialDataSet = __assign(__assign({}, baseInitialDataSet), (_b = {}, _b[emptyRowAtBottom._meta.id] = emptyRowAtBottom, _b));
     return { fields: fields, initialDataSet: initialDataSet };
 };

package/lib/esm/common/ConfirmationModal.d.ts

@@ -0,0 +1,10 @@
+export declare const ConfirmationModal: ({ isOpen, handleClose, onSubmit, title, description, buttonText, icon, hasCancelButton, }: {
+    isOpen: any;
+    handleClose: any;
+    onSubmit: any;
+    title: any;
+    description: any;
+    buttonText: any;
+    icon?: any;
+    hasCancelButton?: boolean;
+}) => JSX.Element;

package/lib/esm/common/ConfirmationModal.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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { colors, Div, Modal, Button } from "../";
+export var ConfirmationModal = function (_a) {
+    var isOpen = _a.isOpen, handleClose = _a.handleClose, onSubmit = _a.onSubmit, title = _a.title, description = _a.description, buttonText = _a.buttonText, _b = _a.icon, icon = _b === void 0 ? null : _b, _c = _a.hasCancelButton, hasCancelButton = _c === void 0 ? true : _c;
+    var headerUI = (_jsxs(Div, { children: [icon && (_jsx(Div, __assign({ centered: true, mb: 20 }, { children: icon }))), _jsx(Div, __assign({ mb: 16 }, { children: _jsx(Div, __assign({ h5: true, dflex: true, centered: true }, { children: title })) }))] }));
+    var bodyUI = (_jsxs(_Fragment, { children: [_jsx(Div, __assign({ c: colors.gray800, body1: true, flexColumn: true, centered: true }, { children: description })), _jsxs(Div, __assign({ mt: 40, dflex: true, centered: true }, { children: [hasCancelButton && (_jsx(Button, __assign({ variant: "secondary", mr: 16, w: 104, onClick: handleClose }, { children: "Cancel" }))), _jsx(Button, __assign({ w: 135, onClick: onSubmit }, { children: buttonText }))] }))] }));
+    return (_jsx(_Fragment, { children: _jsx(Modal, __assign({ isOpen: isOpen, onClose: handleClose }, { children: _jsxs(Div, __assign({ p: "48px 56px" }, { children: [headerUI, bodyUI] })) })) }));
+};

package/lib/esm/common/Table/TableActions/DeleteSelectedRows.d.ts

@@ -0,0 +1,6 @@
+interface DeleteSelectedRowsProps {
+    testId?: string;
+}
+export declare const ActionButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const DeleteSelectedRows: ({ testId, }: DeleteSelectedRowsProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,65 @@
+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, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import styled from "styled-components";
+import { TooltipProvider } from "../../../common/TooltipProvider";
+import { ConfirmationModal } from "../../../common/ConfirmationModal";
+import { useSpreadsheetContext } from "../../../Importer";
+import { useImporterContext } from "../../../Importer/contexts/ImporterContextProvider";
+import { DeleteIcon, ConfirmationDeleteIcon } from "./icons";
+import { addToast } from "../../../common/Toast";
+import { Div } from "../../../styled/utils";
+var StyledTooltipProvider = styled(TooltipProvider)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
+export var ActionButton = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background: transparent;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  width: 40px;\n\n  :disabled {\n    opacity: 0.6;\n\n    :hover {\n      background-color: transparent !important;\n      cursor: not-allowed;\n    }\n  }\n"], ["\n  align-items: center;\n  background: transparent;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  width: 40px;\n\n  :disabled {\n    opacity: 0.6;\n\n    :hover {\n      background-color: transparent !important;\n      cursor: not-allowed;\n    }\n  }\n"])));
+var filterByRecordsThatContainsValues = function (mainObject) {
+    return mainObject.filter(function (obj) {
+        for (var key in obj) {
+            if (key !== "_meta" && obj[key] !== null && obj[key] !== undefined) {
+                return true;
+            }
+        }
+        return false;
+    });
+};
+export var DeleteSelectedRows = function (_a) {
+    var _b = _a.testId, testId = _b === void 0 ? "ta-delete-rows" : _b;
+    var _c = useState(false), isConfirmationModalOpen = _c[0], setIsConfirmationModalOpen = _c[1];
+    var _d = useSpreadsheetContext(), data = _d.data, filteredInputValue = _d.filteredInputValue, deleteRecords = _d.deleteRecords, selectedRows = _d.selectedRows, setSelectedRows = _d.setSelectedRows, setFilteredInputValue = _d.setFilteredInputValue;
+    var _e = useImporterContext(), setCurrentStepIndex = _e.setCurrentStepIndex, isUsingManualImport = _e.isUsingManualImport;
+    var toggleModalVisibility = function () {
+        setIsConfirmationModalOpen(function (oldValue) { return !oldValue; });
+    };
+    var handleDeleteRecord = function () {
+        setSelectedRows([]);
+        toggleModalVisibility();
+        setFilteredInputValue("");
+        var validData = filterByRecordsThatContainsValues(data);
+        // If user is deleting every row, but not using the manual import option
+        if (!isUsingManualImport.current &&
+            !filteredInputValue &&
+            selectedRows.length === validData.length) {
+            setCurrentStepIndex(0);
+            return addToast("You have deleted all the rows. You will be redirect to the upload step.", "success");
+        }
+        deleteRecords(selectedRows);
+    };
+    var DescriptionUI = function () { return (_jsx(_Fragment, { children: _jsxs(Div, { children: ["Are you sure you want to delete ", selectedRows.length, " row", selectedRows.length > 1 ? "s" : "", "?"] }) })); };
+    var confirmationModalUI = (_jsx(ConfirmationModal, { isOpen: isConfirmationModalOpen, handleClose: toggleModalVisibility, title: "Delete Selected Row".concat(selectedRows.length > 1 ? "s" : ""), description: _jsx(DescriptionUI, {}), onSubmit: handleDeleteRecord, buttonText: "Yes, delete", icon: ConfirmationDeleteIcon }));
+    var isDeleteButtonDisabled = selectedRows.length <= 0;
+    return (_jsxs(_Fragment, { children: [confirmationModalUI, _jsx(StyledTooltipProvider, __assign({ tooltip: isDeleteButtonDisabled ? "Select rows to delete" : "Delete Row", placement: "right", flip: false, centered: true, "data-testid": testId }, { children: _jsx(ActionButton, __assign({ onClick: toggleModalVisibility, disabled: isDeleteButtonDisabled }, { children: _jsx(DeleteIcon, {}) })) }))] }));
+};
+var templateObject_1, templateObject_2;

package/lib/esm/common/Table/TableActions/SearchRows.d.ts

@@ -0,0 +1,3 @@
+export declare const SearchRows: ({ testId, }: {
+    testId?: string;
+}) => JSX.Element;

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

@@ -0,0 +1,70 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { useSpreadsheetContext } from "../../../Importer";
+import { SearchIcon } from "./icons";
+import { useDebounce } from "../../../hooks";
+import { useRef, useState } from "react";
+import { colors } from "../../../styled/theme/colorPalette";
+import { textStyles } from "../../../styled/theme/textStyles";
+import { TooltipProvider } from "../../../common/TooltipProvider";
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"], ["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"])), function (_a) {
+    var isOpen = _a.isOpen;
+    return (isOpen ? colors.orange50 : "none");
+}, function (_a) {
+    var isOpen = _a.isOpen;
+    return (isOpen ? "332px" : "24px");
+});
+var IconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
+var Input = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  background: none;\n  border: none;\n  color: ", ";\n  outline: none;\n  width: 100%;\n\n  ", ";\n"], ["\n  ", ";\n  background: none;\n  border: none;\n  color: ", ";\n  outline: none;\n  width: 100%;\n\n  ", ";\n"])), textStyles.body3, colors.gray700, function (_a) {
+    var isOpen = _a.isOpen;
+    return !isOpen && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      top: -9999px;\n    "], ["\n      position: absolute;\n      top: -9999px;\n    "])));
+});
+var SearchInput = function (_a) {
+    var testId = _a.testId, value = _a.value, onChange = _a.onChange;
+    var _b = useDebounce(value, onChange, 300), _value = _b._value, set_Value = _b.set_Value;
+    var inputRef = useRef(null);
+    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
+    var handleInputChange = function (_a) {
+        var target = _a.target;
+        set_Value(target.value);
+    };
+    var handleInputOnBlur = function () {
+        if (!_value) {
+            setIsOpen(false);
+        }
+    };
+    var handleWrapperClick = function () {
+        var _a;
+        if (!isOpen) {
+            setIsOpen(true);
+            if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+    };
+    return (_jsx(TooltipProvider, __assign({ tooltip: !isOpen ? "Search something" : "", placement: "right", flip: false, centered: true, "data-testid": testId }, { children: _jsxs(Wrapper, __assign({ isOpen: isOpen, onClick: handleWrapperClick }, { children: [_jsx(IconWrapper, { children: _jsx(SearchIcon, {}) }), _jsx(Input, { isOpen: isOpen, ref: inputRef, value: _value, onChange: handleInputChange, onBlur: handleInputOnBlur, type: "text", placeholder: "Search something..." })] })) })));
+};
+export var SearchRows = function (_a) {
+    var _b = _a.testId, testId = _b === void 0 ? "ta-search-rows" : _b;
+    var _c = useSpreadsheetContext(), filteredInputValue = _c.filteredInputValue, setFilteredInputValue = _c.setFilteredInputValue;
+    var handleChangeInputValue = function (value) {
+        setFilteredInputValue(value);
+    };
+    return (_jsx(SearchInput, { testId: testId, value: filteredInputValue, onChange: handleChangeInputValue }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/esm/common/Table/TableActions/TableActions.d.ts

@@ -0,0 +1,10 @@
+type TableActionsContainerProps = {
+    height: number;
+};
+type TableActionsProps = {
+    tableActionsHeight?: number;
+};
+export declare const TableActionsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableActionsContainerProps, never>;
+export declare const TableActionsContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
+export declare const TableActions: ({ tableActionsHeight, ...props }: TableActionsProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,45 @@
+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 styled from "styled-components";
+import { Div } from "../../../styled/utils";
+import { defaultTableActionsHeightPx } from "./common";
+import { DeleteSelectedRows } from "./DeleteSelectedRows";
+import { SearchRows } from "./SearchRows";
+export var TableActionsContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-top: 1px solid ", ";\n  display: flex;\n  overflow: hidden;\n  padding: 8px 32px;\n"], ["\n  align-items: center;\n  background: ", ";\n  border-top: 1px solid ", ";\n  display: flex;\n  overflow: hidden;\n  padding: 8px 32px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.white;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.gray300;
+});
+export var TableActionsContent = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+export var TableActions = function (_a) {
+    var _b = _a.tableActionsHeight, tableActionsHeight = _b === void 0 ? defaultTableActionsHeightPx : _b, props = __rest(_a, ["tableActionsHeight"]);
+    return (_jsx(TableActionsContainer, __assign({ height: tableActionsHeight }, props, { children: _jsxs(TableActionsContent, __assign({ dflex: true }, { children: [_jsx(SearchRows, {}), _jsx(DeleteSelectedRows, {})] })) })));
+};
+var templateObject_1, templateObject_2;

package/lib/esm/common/Table/TableActions/common.d.ts

@@ -0,0 +1 @@
+export declare const defaultTableActionsHeightPx = 60;

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

@@ -0,0 +1 @@
+export var defaultTableActionsHeightPx = 60;

package/lib/esm/common/Table/TableActions/icons.d.ts

@@ -0,0 +1,3 @@
+export declare const DeleteIcon: () => JSX.Element;
+export declare const ConfirmationDeleteIcon: JSX.Element;
+export declare const SearchIcon: () => JSX.Element;

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

@@ -0,0 +1,15 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+export var DeleteIcon = function () { return (_jsxs("svg", __assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M3.5 5.16675H18.5L17.9875 15.4164C17.8545 18.0775 15.6581 20.1667 12.9938 20.1667H9.00625C6.34188 20.1667 4.14554 18.0775 4.01248 15.4164L3.5 5.16675Z", stroke: "#262626", strokeWidth: "2" }), _jsx("path", { d: "M6.83331 5.16675V4.83341C6.83331 3.17656 8.17646 1.83341 9.83331 1.83341H12.1666C13.8235 1.83341 15.1666 3.17656 15.1666 4.83341V5.16675", stroke: "#262626", strokeWidth: "2" }), _jsx("path", { d: "M1.83331 5.16675H20.1666", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round" }), _jsx("path", { d: "M13.5 10.1667V14.3334", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round" }), _jsx("path", { d: "M8.5 10.1667V14.3334", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round" })] }))); };
+export var ConfirmationDeleteIcon = (_jsxs("svg", __assign({ width: "68", height: "68", viewBox: "0 0 68 68", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("rect", { width: "68", height: "68", fill: "white" }), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M8.79639 4.52687C8.79639 3.70291 9.73698 3.23251 10.3962 3.72676L33.7964 21.2699C33.9246 21.3661 34.0001 21.517 34.0001 21.6772L34.0001 46.015C34.0001 46.4345 33.5212 46.674 33.1856 46.4224L9.59669 28.7376C9.0929 28.3599 8.79639 27.7671 8.79639 27.1374L8.79639 4.52687Z", fill: "url(#paint0_linear_2363_5281)" }) })), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M8.7959 63.1264C8.7959 63.9504 9.73649 64.4208 10.3957 63.9266L33.7959 46.3834C33.9241 46.2873 33.9996 46.1363 33.9996 45.9761L33.9996 21.6383C33.9996 21.2188 33.5207 20.9794 33.1851 21.231L9.5962 38.9157C9.09241 39.2934 8.7959 39.8863 8.7959 40.5159L8.7959 63.1264Z", fill: "url(#paint1_linear_2363_5281)" }) })), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M59.2039 4.87257C59.2039 4.04862 58.2633 3.57821 57.604 4.07246L34.1528 21.6539C34.0567 21.726 34.0002 21.839 34.0002 21.9591L34.0002 46.6159C34.0002 46.9302 34.359 47.1097 34.6104 46.9211L58.4036 29.0833C58.9073 28.7056 59.2039 28.1128 59.2039 27.4831L59.2039 4.87257Z", fill: "url(#paint2_linear_2363_5281)" }) })), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M59.2041 63.4722C59.2041 64.2961 58.2635 64.7665 57.6043 64.2723L34.1531 46.6908C34.057 46.6188 34.0004 46.5057 34.0004 46.3856L34.0004 21.7288C34.0004 21.4145 34.3592 21.2351 34.6107 21.4236L58.4038 39.2614C58.9076 39.6391 59.2041 40.232 59.2041 40.8616L59.2041 63.4722Z", fill: "url(#paint3_linear_2363_5281)" }) })), _jsxs("defs", { children: [_jsxs("linearGradient", __assign({ id: "paint0_linear_2363_5281", x1: "28.828", y1: "2.27186", x2: "10.8931", y2: "6.63443", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#FF710A" }), _jsx("stop", { offset: "1", stopColor: "#FD9827" })] })), _jsxs("linearGradient", __assign({ id: "paint1_linear_2363_5281", x1: "28.8275", y1: "65.3815", x2: "10.8926", y2: "61.0189", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#FF710A" }), _jsx("stop", { offset: "1", stopColor: "#FD9827" })] })), _jsxs("linearGradient", __assign({ id: "paint2_linear_2363_5281", x1: "41.7498", y1: "25.1258", x2: "70.7926", y2: "29.9741", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#EDD172" }), _jsx("stop", { offset: "1", stopColor: "#D0A617" })] })), _jsxs("linearGradient", __assign({ id: "paint3_linear_2363_5281", x1: "41.7501", y1: "43.2189", x2: "70.7929", y2: "38.3706", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#EDD172" }), _jsx("stop", { offset: "1", stopColor: "#D0A617" })] }))] })] })));
+export var SearchIcon = function () { return (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M11 20C15.9706 20 20 15.9706 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20Z", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M21 21L18 18", stroke: "#262626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };

package/lib/esm/common/Table/TableActions/index.d.ts

@@ -0,0 +1 @@
+export * from "./TableActions";

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

@@ -0,0 +1 @@
+export * from "./TableActions";

package/lib/esm/common/Table/TableView/TableCells.js

@@ -16,11 +16,15 @@ import { Div } from "../../../styled/utils";
 import { TableRow } from "./TableRow";
 import React from "react";
 import { areEqual } from "react-window";
+import { useSpreadsheetContext } from "../../../Importer";
 var Cell = React.memo(function (_a) {
+    var _b;
     var data = _a.data, rowIndex = _a.rowIndex, style = _a.style;
     var items = data.items, onRowClick = data.onRowClick, columns = data.columns, highlightFirstRow = data.highlightFirstRow, rowHeight = data.rowHeight, getItemKey = data.getItemKey;
     var item = items[rowIndex];
-    return (_jsx(Div, __assign({ style: style }, { children: _jsx(TableRow, { columns: columns, onRowClick: onRowClick, highlightFirstRow: highlightFirstRow, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === items.length - 1, pRelative: true, getItemKey: getItemKey }) })));
+    var selectedRows = useSpreadsheetContext().selectedRows;
+    var isRowSelected = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.includes((_b = item === null || item === void 0 ? void 0 : item._meta) === null || _b === void 0 ? void 0 : _b.id);
+    return (_jsx(Div, __assign({ style: style }, { children: _jsx(TableRow, { columns: columns, onRowClick: onRowClick, highlightFirstRow: highlightFirstRow, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === items.length - 1, pRelative: true, getItemKey: getItemKey, isRowSelected: isRowSelected || false }) })));
 }, areEqual);
 var DraggableCell = React.memo(function (_a) {
     var data = _a.data, rowIndex = _a.rowIndex, baseStyle = _a.style;

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

@@ -12,6 +12,7 @@ type Props = Pick<TableViewProps, "columns" | "onRowClick" | "highlightFirstRow"
     indexI: number;
     isLast?: boolean;
     getItemKey?: (row: any) => string;
+    isRowSelected?: boolean;
 } & DivCSSProps;
-export declare const TableRow: ({ row, indexI, columns, isLast, highlightFirstRow, onRowClick, getItemKey, ...props }: Props) => JSX.Element;
+export declare const TableRow: ({ row, indexI, columns, isLast, highlightFirstRow, onRowClick, getItemKey, isRowSelected, ...props }: Props) => JSX.Element;
 export {};

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

@@ -37,11 +37,11 @@ export var Cell = React.memo(function (props) {
 export var TableViewRow = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: white;\n  ", "\n  ", "\n"], ["\n  background-color: white;\n  ", "\n  ", "\n"])), 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; });
 }, function (p) {
-    return p.isHighlighted && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n      box-shadow: inset 0 0 0 3px ", ";\n    "], ["\n      background: ", ";\n      box-shadow: inset 0 0 0 3px ", ";\n    "])), p.theme.colors.blue100, p.theme.colors.blue500);
+    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, props = __rest(_a, ["row", "indexI", "columns", "isLast", "highlightFirstRow", "onRowClick", "getItemKey"]);
-    var isHighlighted = indexI === 0 && highlightFirstRow;
+    var row = _a.row, indexI = _a.indexI, columns = _a.columns, isLast = _a.isLast, highlightFirstRow = _a.highlightFirstRow, onRowClick = _a.onRowClick, getItemKey = _a.getItemKey, _b = _a.isRowSelected, isRowSelected = _b === void 0 ? false : _b, props = __rest(_a, ["row", "indexI", "columns", "isLast", "highlightFirstRow", "onRowClick", "getItemKey", "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 Content = column.Content;
             var key = getItemKey ? getItemKey(row) : "".concat(indexI);

package/lib/esm/common/Table/TableView/index.d.ts

@@ -38,5 +38,6 @@ export type TableViewProps = {
     onRowClick?: (row: any) => void;
     getItemKey?: (row: any) => string;
     shouldBeDraggable?: boolean;
+    isInsideImporter?: boolean;
 } & DivCSSProps;
-export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, shouldBeDraggable, ...props }: TableViewProps) => JSX.Element>;
+export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, shouldBeDraggable, isInsideImporter, ...props }: TableViewProps) => JSX.Element>;

package/lib/esm/common/Table/TableView/index.js

@@ -38,11 +38,12 @@ import { Cell, DraggableCell } from "./TableCells";
 export * from "./common";
 export * from "./TableHeaders";
 export * from "./TableRow";
-export var TableViewWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  border-radius: 8px;\n  border: solid 1px ", ";\n  overflow: hidden;\n\n  // prevents clipped dropdowns\n  .ReactVirtualized__Grid__innerScrollContainer {\n    overflow: visible !important;\n  }\n  .ReactVirtualized__Table__row {\n    overflow: visible !important;\n  }\n\n  // fix scrollbar layout issues on windows/macos\n  .ReactVirtualized__Grid {\n    ", ";\n  }\n"], ["\n  ", "\n  border-radius: 8px;\n  border: solid 1px ", ";\n  overflow: hidden;\n\n  // prevents clipped dropdowns\n  .ReactVirtualized__Grid__innerScrollContainer {\n    overflow: visible !important;\n  }\n  .ReactVirtualized__Table__row {\n    overflow: visible !important;\n  }\n\n  // fix scrollbar layout issues on windows/macos\n  .ReactVirtualized__Grid {\n    ", ";\n  }\n"])), function (p) {
+export var TableViewWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  border-radius: 8px;\n  border: solid 1px ", ";\n  max-width: calc(100vw - 50px);\n  overflow: hidden;\n\n  // prevents clipped dropdowns\n  .ReactVirtualized__Grid__innerScrollContainer {\n    overflow: visible !important;\n  }\n  .ReactVirtualized__Table__row {\n    overflow: visible !important;\n  }\n\n  // fix scrollbar layout issues on windows/macos\n  .ReactVirtualized__Grid {\n    ", ";\n  }\n"], ["\n  ", "\n  border-radius: 8px;\n  border: solid 1px ", ";\n  max-width: calc(100vw - 50px);\n  overflow: hidden;\n\n  // prevents clipped dropdowns\n  .ReactVirtualized__Grid__innerScrollContainer {\n    overflow: visible !important;\n  }\n  .ReactVirtualized__Table__row {\n    overflow: visible !important;\n  }\n\n  // fix scrollbar layout issues on windows/macos\n  .ReactVirtualized__Grid {\n    ", ";\n  }\n"])), function (p) {
     return p.isLoading && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      opacity: 0.5;\n    "], ["\n      opacity: 0.5;\n    "])));
 }, function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.css.scrollbarDark; });
 var SpinnerWrapper = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  pointer-events: none;\n  z-index: 100;\n"], ["\n  pointer-events: none;\n  z-index: 100;\n"])));
 var tableHeaderId = "tableHeaderId";
+var StyledGrid = styled(Grid)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n\n  -ms-overflow-style: none;\n  overflow: -moz-scrollbars-none;\n  scrollbar-width: none;\n"], ["\n  ::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n\n  -ms-overflow-style: none;\n  overflow: -moz-scrollbars-none;\n  scrollbar-width: none;\n"])));
 var buildGridStyles = function (rowWidth) {
     /* using style={{ willChange: "unset" }} is important for having items
               like backdrops with position fixed inside of the table working as
@@ -58,7 +59,7 @@ var buildGridStyles = function (rowWidth) {
     return gridStyles;
 };
 export var TableView = React.memo(function (_a) {
-    var data = _a.data, columns = _a.columns, pageSize = _a.pageSize, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.sortBy, sortBy = _c === void 0 ? { field: null, direction: null } : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.highlightFirstRow, highlightFirstRow = _e === void 0 ? false : _e, _f = _a.setSortBy, setSortBy = _f === void 0 ? null : _f, _g = _a.rowWidth, rowWidth = _g === void 0 ? 1 : _g, onSectionRendered = _a.onSectionRendered, _h = _a.tableHeadersHeight, tableHeadersHeight = _h === void 0 ? defaultTableHeaderHeightPx : _h, _j = _a.rowHeight, rowHeight = _j === void 0 ? defaultTableRowHeightPx : _j, _k = _a.h, h = _k === void 0 ? 500 : _k, _l = _a.onTableScroll, onTableScroll = _l === void 0 ? null : _l, _m = _a.getItemKey, getItemKey = _m === void 0 ? null : _m, _o = _a.shouldBeDraggable, shouldBeDraggable = _o === void 0 ? false : _o, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "shouldBeDraggable"]);
+    var data = _a.data, columns = _a.columns, pageSize = _a.pageSize, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.sortBy, sortBy = _c === void 0 ? { field: null, direction: null } : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.highlightFirstRow, highlightFirstRow = _e === void 0 ? false : _e, _f = _a.setSortBy, setSortBy = _f === void 0 ? null : _f, _g = _a.rowWidth, rowWidth = _g === void 0 ? 1 : _g, onSectionRendered = _a.onSectionRendered, _h = _a.tableHeadersHeight, tableHeadersHeight = _h === void 0 ? defaultTableHeaderHeightPx : _h, _j = _a.rowHeight, rowHeight = _j === void 0 ? defaultTableRowHeightPx : _j, _k = _a.h, h = _k === void 0 ? 500 : _k, _l = _a.onTableScroll, onTableScroll = _l === void 0 ? null : _l, _m = _a.getItemKey, getItemKey = _m === void 0 ? null : _m, _o = _a.shouldBeDraggable, shouldBeDraggable = _o === void 0 ? false : _o, _p = _a.isInsideImporter, isInsideImporter = _p === void 0 ? false : _p, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "shouldBeDraggable", "isInsideImporter"]);
     /*
     multiply the rowWidth by 0.95 to let the user know they can scroll
     horizontally (will display partial column on the right)
@@ -97,9 +98,9 @@ export var TableView = React.memo(function (_a) {
         rowHeight: rowHeight,
         getItemKey: getItemKey,
     }); }, [data, onRowClick, columns, highlightFirstRow, rowHeight]);
-    return (_jsxs(TableViewWrapper, __assign({ "data-test-id": "table-view-wrapper", isLoading: isLoading, h: tableHeight }, props, { children: [tableHeadersUI, loadingUI, _jsx(AutoSizer, { children: function (_a) {
+    return (_jsxs(TableViewWrapper, __assign({ "data-test-id": "table-view-wrapper", isLoading: isLoading }, (!isInsideImporter ? { h: tableHeight } : {}), props, { children: [tableHeadersUI, loadingUI, _jsx(AutoSizer, { children: function (_a) {
                     var width = _a.width, height = _a.height;
-                    return (_jsxs(_Fragment, { children: [shouldBeDraggable && (_jsx(SortableContext, __assign({ items: data, strategy: verticalListSortingStrategy }, { children: _jsx(Grid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: DraggableCell })) }))), !shouldBeDraggable && (_jsx(Grid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: Cell })))] }));
+                    return (_jsxs(_Fragment, { children: [shouldBeDraggable && (_jsx(SortableContext, __assign({ items: data, strategy: verticalListSortingStrategy }, { children: _jsx(StyledGrid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: DraggableCell })) }))), !shouldBeDraggable && (_jsx(StyledGrid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: Cell })))] }));
                 } })] })));
 }, areEqual);
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/esm/common/buttons.d.ts

@@ -1,5 +1,5 @@
 import { CSSProps } from "../styled/utils";
-declare const types: readonly ["primary", "secondary", "tertiary"];
+declare const types: readonly ["primary", "secondary", "tertiary", "link"];
 export type ButtonTypes = typeof types[number];
 export type BtnProps = {
     onClick?: () => void;