fuse-importer 0.25.8 → 0.25.9

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

@@ -22,12 +22,15 @@ import { AppResponseModal } from "./AppResponseModal";
 import { useReviewContext } from "./ReviewContextProvider";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
+import useWindowDimensions from "../../utils/hooks/useWindowSize";
 var TitleContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var ReviewWithContext = function () {
     var _a = useReviewContext(), fields = _a.reviewFields, initialDataSet = _a.reviewInitialDataSet, options = _a.options, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged;
+    var isOnSmallScreens = useWindowDimensions().isOnSmallScreens;
     var _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows, isUsingManualImport = _b.isUsingManualImport;
     var t = useTranslation("review").t;
-    var spreadsheetUI = initialDataSet && (_jsx(Spreadsheet, { options: __assign(__assign({}, options), { showCheckboxColumn: true }), selectedRows: selectedRows, setSelectedRows: setSelectedRows, initialDataSet: initialDataSet, fields: fields, rowWidth: getSpreadsheetRowWidth(fields, 6), onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord, onValidationStateChanged: onValidationStateChanged }));
+    var rowWidth = getSpreadsheetRowWidth(fields, isOnSmallScreens ? 3 : 6);
+    var spreadsheetUI = initialDataSet && (_jsx(Spreadsheet, { options: __assign(__assign({}, options), { showCheckboxColumn: true }), selectedRows: selectedRows, setSelectedRows: setSelectedRows, initialDataSet: initialDataSet, fields: fields, rowWidth: rowWidth, onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord, onValidationStateChanged: onValidationStateChanged }));
     return (_jsxs(Div, __assign({ centered: true, flexColumn: true, h100: true }, { children: [_jsx(AppResponseModal, {}), _jsxs(Div, __assign({ w100: true, h100: true, flexColumn: true }, { children: [_jsx(TitleContainer, __assign({ flexColumn: true, ml: 32 }, { children: _jsx(Div, __assign({ h2: true, mt: 40, mb: 40 }, { children: t(isUsingManualImport.current ? "manual_importer_title" : "title") })) })), _jsx(Div, __assign({ h100: true, w100: true, justifyCenter: true }, { children: spreadsheetUI }))] }))] })));
 };
 export default ReviewWithContext;

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

@@ -22,13 +22,16 @@ import { HeaderButtons } from "./HeaderButtons";
 import { useImporterContext } from "../contexts/ImporterContextProvider";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import useWindowDimensions from "../../utils/hooks/useWindowSize";
 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"])));
 var HeadersPreview = function () {
     var _a = useReviewContext(), fields = _a.previewFields, initialDataSet = _a.previewInitialDataSet;
+    var isOnSmallScreens = useWindowDimensions().isOnSmallScreens;
     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, { rowWidth: getSpreadsheetRowWidth(fields, 6), isReadOnly: true, initialDataSet: initialDataSet, fields: fields, highlightFirstRow: true, options: {
+    var rowWidth = getSpreadsheetRowWidth(fields, isOnSmallScreens ? 3 : 6);
+    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, { rowWidth: rowWidth, isReadOnly: true, initialDataSet: initialDataSet, fields: fields, highlightFirstRow: true, options: {
                         showCheckboxColumn: true,
                         firstRowIsHeader: true,
                     }, selectedRows: selectedRows, setSelectedRows: setSelectedRows })) }))] })));

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

@@ -3,5 +3,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { createGlobalStyle } from "styled-components";
-export var GlobalStyle = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n #fuse-importer-root > * {\n    font-size: 17px;\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    font-family: DM Sans;\n    color-scheme: normal;\n    color: black;\n  }\n"], ["\n #fuse-importer-root > * {\n    font-size: 17px;\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    font-family: DM Sans;\n    color-scheme: normal;\n    color: black;\n  }\n"])));
+export var GlobalStyle = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  #fuse-importer-root > *,\n  body > * {\n    font-size: 17px;\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    font-family: DM Sans;\n    color-scheme: normal;\n    color: black;\n  }\n"], ["\n  #fuse-importer-root > *,\n  body > * {\n    font-size: 17px;\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    font-family: DM Sans;\n    color-scheme: normal;\n    color: black;\n  }\n"])));
 var templateObject_1;

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

@@ -26,6 +26,7 @@ type State = {
     setFilteredInputValue: React.Dispatch<React.SetStateAction<string>>;
     addNewRowsToSpreadsheet: () => void;
     checkboxColumnWidth: number;
+    isFiltering: boolean;
 } & ValidationState;
 type Props = {
     initialDataSet: RecordDataSet;

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

@@ -24,7 +24,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { get } from "lodash";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { useValidationState } from "./hooks";
-import { addEmptyRows } from "../../../Importer/data";
 import { addMeta } from "../../../Importer/data";
 var SpreadsheetContext = createContext({});
 export var SpreadsheetContextProvider = function (_a) {
@@ -46,14 +45,14 @@ export var SpreadsheetContextProvider = function (_a) {
         setIsLoading: setIsLoading,
         onValidateRecord: onValidateRecord,
     }), errorsRef = _h.errorsRef, warningsRef = _h.warningsRef, updateRecordAndRevalidate = _h.updateRecordAndRevalidate, deleteRecords = _h.deleteRecords, filterRecordsBySearchValue = _h.filterRecordsBySearchValue, validationState = __rest(_h, ["errorsRef", "warningsRef", "updateRecordAndRevalidate", "deleteRecords", "filterRecordsBySearchValue"]);
-    var addNewRowsToSpreadsheet = function () {
+    var addNewRowsToSpreadsheet = useCallback(function () {
         var highestRowIndex = Math.max.apply(Math, Object.values(dataSet).map(function (obj) { return obj._meta.rowIndex; }));
         var newRow = addMeta({}, highestRowIndex + 1);
         setDataSet(function (oldValues) {
             var _a;
             return (__assign(__assign({}, oldValues), (_a = {}, _a[newRow._meta.id] = newRow, _a)));
         });
-    };
+    }, [dataSet]);
     // sort data based on errors (errors group on top and not errors group at bottom)
     var data = useMemo(function () {
         var filteredObj = filterRecordsBySearchValue(dataSet, filteredInputValue);
@@ -71,7 +70,7 @@ export var SpreadsheetContextProvider = function (_a) {
             return bHasErrors ? 1 : -1;
         });
     }, [dataSet, filteredInputValue, sortByFieldErrors, sortByFieldWarnings]);
-    addEmptyRows(data, fields);
+    var isFiltering = useMemo(function () { return !!filteredInputValue; }, [filteredInputValue]);
     useEffect(function () {
         onDataSetChanged && onDataSetChanged(dataSet);
         var dataSetKeys = Object.keys(dataSet);
@@ -113,7 +112,7 @@ export var SpreadsheetContextProvider = function (_a) {
         var baseCheckboxColumnWidth = lastRowIndexLength * singleLetterWidth + horizontalSpacing;
         return baseCheckboxColumnWidth < 40 ? 40 : baseCheckboxColumnWidth;
     }, [data]);
-    var value = __assign(__assign({ data: data, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, rowWidth: rowWidth, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, highlightFirstRow: highlightFirstRow, options: options, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, setSortByFieldWarnings: handleSortByFieldWarnings, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows, deleteRecords: deleteRecords, filteredInputValue: filteredInputValue, setFilteredInputValue: setFilteredInputValue, lastClickedIndexRef: lastClickedIndexRef, addNewRowsToSpreadsheet: addNewRowsToSpreadsheet, checkboxColumnWidth: checkboxColumnWidth });
+    var value = __assign(__assign({ data: data, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, rowWidth: rowWidth, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, highlightFirstRow: highlightFirstRow, options: options, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, setSortByFieldWarnings: handleSortByFieldWarnings, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows, deleteRecords: deleteRecords, filteredInputValue: filteredInputValue, setFilteredInputValue: setFilteredInputValue, lastClickedIndexRef: lastClickedIndexRef, addNewRowsToSpreadsheet: addNewRowsToSpreadsheet, checkboxColumnWidth: checkboxColumnWidth, 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/index.d.ts

@@ -2,9 +2,9 @@ import { Record, Field, FieldTypes } from "../../../../types";
 export declare const spreadsheetRowHeightPx = 40;
 export declare const spreadsheetHeaderHeightPx = 40;
 export declare const isNullOrUndefined: (value: any) => boolean;
-export declare const isEmpty: (value: any) => boolean;
-export declare const isEmail: (value: any) => boolean;
-export declare const isUrl: (value: any) => boolean;
+export declare const isEmpty: (value: string) => boolean;
+export declare const isEmail: (value: string) => boolean;
+export declare const isUrl: (value: string) => boolean;
 export declare const isTrue: (value: string) => boolean;
 export declare const isFalse: (value: string) => boolean;
 export declare const isBoolean: (value: string) => boolean;

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

@@ -11,7 +11,7 @@ export var isEmpty = function (value) {
         (typeof value === "string" && value.trim().length === 0));
 };
 export var isEmail = function (value) {
-    var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
+    var emailRegex = /^[\w+.-]+@([\w-]+\.)+[\w-]{2,4}$/;
     return emailRegex.test(value);
 };
 export var isUrl = function (value) {

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

@@ -37,7 +37,7 @@ import { TableActions } from "../../../../common/Table/TableActions";
 import { useImporterContext } from "../../../../Importer/contexts/ImporterContextProvider";
 var getItemKey = function (record) { return record._meta.id; };
 var SpreadsheetData = function () {
-    var _a = useSpreadsheetContext(), fields = _a.fields, data = _a.data, isLoading = _a.isLoading, isReadOnly = _a.isReadOnly, rowWidth = _a.rowWidth, totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage, setSortByFieldErrors = _a.setSortByFieldErrors, options = _a.options, setSortByFieldWarnings = _a.setSortByFieldWarnings, selectedRows = _a.selectedRows, checkboxColumnWidth = _a.checkboxColumnWidth;
+    var _a = useSpreadsheetContext(), fields = _a.fields, data = _a.data, isLoading = _a.isLoading, isReadOnly = _a.isReadOnly, rowWidth = _a.rowWidth, totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage, setSortByFieldErrors = _a.setSortByFieldErrors, options = _a.options, setSortByFieldWarnings = _a.setSortByFieldWarnings, selectedRows = _a.selectedRows, checkboxColumnWidth = _a.checkboxColumnWidth, isFiltering = _a.isFiltering;
     var currentStepIndex = useImporterContext().currentStepIndex;
     var canShowCheckboxOnCheckboxRowHover = currentStepIndex === 2;
     var rowNumbersGridRef = useRef();
@@ -83,6 +83,7 @@ var SpreadsheetData = function () {
         });
     }, [dataLength]);
     var showValidationProgress = !isReadOnly && validationPercentage < 100;
-    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: currentStepIndex === 2 && _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, spreadsheetHasXScroll: rowWidth > 1, height: spreadsheetHeight, firstRowIsHeader: options === null || options === void 0 ? void 0 : options.firstRowIsHeader, isLoadingData: showValidationProgress })), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, h: spreadsheetHeight, rowWidth: rowWidth, data: data, columns: columns, isLoading: isLoading, onTableScroll: onTableScroll, getItemKey: getItemKey, isInsideImporter: true, checkboxColumnWidth: checkboxColumnWidth })] }))] }))] })));
+    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, spreadsheetHasXScroll: rowWidth > 1, height: spreadsheetHeight, firstRowIsHeader: options === null || options === void 0 ? void 0 : options.firstRowIsHeader, isLoadingData: showValidationProgress })), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, h: spreadsheetHeight, rowWidth: rowWidth, data: data, columns: columns, isLoading: isLoading, onTableScroll: onTableScroll, getItemKey: getItemKey, shouldHaveCustomScrollbar: true, checkboxColumnWidth: checkboxColumnWidth, isFiltering: isFiltering })] }))] }))] })));
 };
 export default React.memo(SpreadsheetData, areEqual);

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

@@ -20,7 +20,7 @@ import { Autocomplete as AutocompleteBase, } from "../../../../../common/inputs/
 import { SelectMenuDiv, SelectMenuScrollArea, } from "../../../../../common/inputs/SelectMenu";
 import { HTMLInput, TextInputIcon, } from "../../../../../common/inputs/TextInput";
 import { spreadsheetRowHeightPx } from "../../common";
-var Autocomplete = styled(AutocompleteBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", " {\n    border: none !important;\n    border-radius: 0;\n    margin: 0;\n    background: transparent;\n    /* TODO: remove !important's when we start rendering importer through iframe */\n    height: ", "px !important;\n    padding: 0 12px !important;\n\n    ", "\n\n    ::placeholder {\n      ", "\n\n      ", "\n\n        ::placeholder {\n        ", "\n      }\n    }\n\n    /* TODO: remove !important's when we start rendering importer through iframe */\n    :focus {\n      border: none !important;\n      box-shadow: none !important;\n    }\n\n    :hover {\n      background: transparent !important;\n    }\n  }\n  ", " {\n    right: 6px;\n  }\n  ", " {\n    border-radius: 7px;\n  }\n  ", " {\n    padding: 4px;\n  }\n"], ["\n  ", " {\n    border: none !important;\n    border-radius: 0;\n    margin: 0;\n    background: transparent;\n    /* TODO: remove !important's when we start rendering importer through iframe */\n    height: ", "px !important;\n    padding: 0 12px !important;\n\n    ", "\n\n    ::placeholder {\n      ", "\n\n      ", "\n\n        ::placeholder {\n        ", "\n      }\n    }\n\n    /* TODO: remove !important's when we start rendering importer through iframe */\n    :focus {\n      border: none !important;\n      box-shadow: none !important;\n    }\n\n    :hover {\n      background: transparent !important;\n    }\n  }\n  ", " {\n    right: 6px;\n  }\n  ", " {\n    border-radius: 7px;\n  }\n  ", " {\n    padding: 4px;\n  }\n"])), HTMLInput, spreadsheetRowHeightPx - 5, function (p) {
+var Autocomplete = styled(AutocompleteBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", " {\n    border: none;\n    border-radius: 0;\n    margin: 0;\n    background: transparent;\n    height: ", "px;\n    padding: 0 12px;\n\n    ", "\n\n    ::placeholder {\n      ", "\n\n      ", "\n\n        ::placeholder {\n        ", "\n      }\n    }\n\n    :focus {\n      border: none;\n      box-shadow: none;\n    }\n\n    :hover {\n      background: transparent;\n    }\n  }\n  ", " {\n    right: 6px;\n  }\n  ", " {\n    border-radius: 7px;\n  }\n  ", " {\n    padding: 4px;\n  }\n"], ["\n  ", " {\n    border: none;\n    border-radius: 0;\n    margin: 0;\n    background: transparent;\n    height: ", "px;\n    padding: 0 12px;\n\n    ", "\n\n    ::placeholder {\n      ", "\n\n      ", "\n\n        ::placeholder {\n        ", "\n      }\n    }\n\n    :focus {\n      border: none;\n      box-shadow: none;\n    }\n\n    :hover {\n      background: transparent;\n    }\n  }\n  ", " {\n    right: 6px;\n  }\n  ", " {\n    border-radius: 7px;\n  }\n  ", " {\n    padding: 4px;\n  }\n"])), HTMLInput, spreadsheetRowHeightPx - 5, function (p) {
     return p.hasWarning && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), function (p) { return p.theme.colors.orange1200; });
 }, function (p) {
     return p.hasWarning && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), function (p) { return p.theme.colors.orange1200; });

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

@@ -35,9 +35,9 @@ export var SpreadsheetInput = function (_a) {
                 return setValue(value);
             } }, props)) })));
 };
-export var Input = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /* Using this styling to prevent CSS conflict from clients importers */\n  /* TODO: remove !important's when we start rendering importer through iframe */\n\n  background: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n  box-sizing: border-box !important;\n  height: calc(100% - 2px) !important;\n  margin: 0px !important;\n  outline: none !important;\n  width: 100% !important;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  padding: 0 12px !important;\n  ", ";\n  color: ", " !important;\n  ::placeholder {\n    color: ", " !important;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  /* Using this styling to prevent CSS conflict from clients importers */\n  /* TODO: remove !important's when we start rendering importer through iframe */\n\n  background: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n  box-sizing: border-box !important;\n  height: calc(100% - 2px) !important;\n  margin: 0px !important;\n  outline: none !important;\n  width: 100% !important;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  padding: 0 12px !important;\n  ", ";\n  color: ", " !important;\n  ::placeholder {\n    color: ", " !important;\n  }\n\n  ", "\n\n  ", "\n"])), function (props) { return props.theme.css.body1; }, function (props) { return props.theme.colors.gray1000; }, function (props) { return props.theme.colors.placeholder; }, function (p) {
-    return p.hasWarning && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", " !important;\n    "], ["\n      color: ", " !important;\n    "])), function (p) { return p.theme.colors.orange1200; });
+export var Input = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: calc(100% - 2px);\n  margin: 0px;\n  outline: none;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  padding: 0 12px;\n  ", ";\n  color: ", ";\n  ::placeholder {\n    color: ", ";\n  }\n\n  ", "\n\n  ", "\n"], ["\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: calc(100% - 2px);\n  margin: 0px;\n  outline: none;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  padding: 0 12px;\n  ", ";\n  color: ", ";\n  ::placeholder {\n    color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), function (props) { return props.theme.css.body1; }, function (props) { return props.theme.colors.gray1000; }, function (props) { return props.theme.colors.placeholder; }, function (p) {
+    return p.hasWarning && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.orange1200; });
 }, function (p) {
-    return p.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", " !important;\n    "], ["\n      color: ", " !important;\n    "])), function (p) { return p.theme.colors.error; });
+    return p.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.error; });
 });
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -49,6 +49,7 @@ import { omit, set } from "lodash";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { sleep } from "../../..";
 import { selectValidatorsFor, validateRecord } from "./validation";
+import { addEmptyRows, recordListToDataSet } from "../../../Importer/data";
 var checkIfHasErrors = function (errors) {
     return errors && Object.keys(errors).length > 0;
 };
@@ -120,6 +121,11 @@ export var useValidationState = function (_a) {
                 }
             }
         }
+        // To ensure that rows are always displayed, even when the search query is empty,
+        // we return an empty record list when the search yields no results.
+        if (Object.keys(filteredObj).length === 0) {
+            return recordListToDataSet(addEmptyRows([], fields), fields);
+        }
         return filteredObj;
     };
     //Validate record and update dataSet

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, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, shouldBeDraggable, isInsideImporter, checkboxColumnWidth, ...props }: import("../../../common/Table/TableView").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, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, shouldBeDraggable, shouldHaveCustomScrollbar, checkboxColumnWidth, isFiltering, ...props }: import("../../../common/Table/TableView").TableViewProps) => JSX.Element>, import("styled-components").DefaultTheme, {}, never>;
 export {};

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

@@ -36,7 +36,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import axios from "axios";
 export var getSpreadsheetRowWidth = function (fields, visibleRowsOnTableViewport) {
-    var res = fields.length / visibleRowsOnTableViewport;
+    var res = Math.ceil(fields.length / visibleRowsOnTableViewport);
     return res > 1 ? res : 1;
 };
 export var getColumnType = function (_a) {

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

@@ -30,7 +30,7 @@ var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateO
     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  width: 100%;\n\n  /* Using this styling to prevent CSS conflict from clients importers */\n  /* TODO: remove !important's when we start rendering importer through iframe */\n  background-color: none !important;\n  background: none !important;\n  border: none !important;\n  box-shadow: none !important;\n  color: ", " !important;\n  height: 20px !important;\n  line-height: 20px !important;\n  outline: none !important;\n  padding: 1px 2px !important;\n\n  ", ";\n"], ["\n  ", ";\n  width: 100%;\n\n  /* Using this styling to prevent CSS conflict from clients importers */\n  /* TODO: remove !important's when we start rendering importer through iframe */\n  background-color: none !important;\n  background: none !important;\n  border: none !important;\n  box-shadow: none !important;\n  color: ", " !important;\n  height: 20px !important;\n  line-height: 20px !important;\n  outline: none !important;\n  padding: 1px 2px !important;\n\n  ", ";\n"])), textStyles.body3, colors.gray700, function (_a) {
+var Input = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  width: 100%;\n\n  background-color: none;\n  background: none;\n  border: none;\n  box-shadow: none;\n  color: ", ";\n  height: 20px;\n  line-height: 20px;\n  outline: none;\n  padding: 1px 2px;\n\n  ", ";\n"], ["\n  ", ";\n  width: 100%;\n\n  background-color: none;\n  background: none;\n  border: none;\n  box-shadow: none;\n  color: ", ";\n  height: 20px;\n  line-height: 20px;\n  outline: none;\n  padding: 1px 2px;\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    "])));
 });

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

@@ -20,11 +20,11 @@ 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, isSpreadsheetTable = data.isSpreadsheetTable;
+    var items = data.items, onRowClick = data.onRowClick, columns = data.columns, highlightFirstRow = data.highlightFirstRow, rowHeight = data.rowHeight, getItemKey = data.getItemKey, shouldHaveCustomScrollbar = data.shouldHaveCustomScrollbar;
     var item = items[rowIndex];
     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, isSpreadsheetTable: isSpreadsheetTable }) })));
+    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, shouldHaveCustomScrollbar: shouldHaveCustomScrollbar }) })));
 }, areEqual);
 var DraggableCell = React.memo(function (_a) {
     var data = _a.data, rowIndex = _a.rowIndex, baseStyle = _a.style;

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

@@ -4,10 +4,10 @@ import { DivCSSProps } from "../../../styled/utils";
 import { SortDirection } from "../TableDataProvider";
 type TableViewHeaderProps = {
     isLast: boolean;
-    isSpreadsheetTable?: boolean;
+    shouldHaveCustomScrollbar?: boolean;
 };
 export declare const TableViewHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & {
-    isSpreadsheetTable?: boolean;
+    shouldHaveCustomScrollbar?: boolean;
 } & TableViewHeaderProps, never>;
 type SortIndicatorProps = {
     direction: SortDirection;
@@ -19,7 +19,7 @@ type TableHeadersProps = Pick<TableViewProps, "columns" | "sortBy" | "setSortBy"
     scrollLeft: number;
     height: number;
     containerRef: React.MutableRefObject<HTMLDivElement>;
-    isSpreadsheetTable?: boolean;
+    shouldHaveCustomScrollbar?: boolean;
 } & DivCSSProps;
-export declare const TableHeaders: ({ scrollLeft, columns, sortBy, rowHeight, containerRef, setSortBy, rowWidth, height, isSpreadsheetTable, ...props }: TableHeadersProps) => JSX.Element;
+export declare const TableHeaders: ({ scrollLeft, columns, sortBy, rowHeight, containerRef, setSortBy, rowWidth, height, shouldHaveCustomScrollbar, ...props }: TableHeadersProps) => JSX.Element;
 export {};

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

@@ -31,19 +31,16 @@ import { chevronDown as chevronDownIcon } from "../icons";
 import { SortDirection } from "../TableDataProvider";
 import { columnWidthPercentage, defaultTableHeaderHeightPx, TableViewCellContainer, } from "./common";
 import { useTranslation } from "react-i18next";
-export var TableViewHeader = styled(TableViewCellContainer)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\n  ", "\n  ", "\n"], ["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\n  ", "\n  ", "\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.body2; }, function (p) { return p.theme.colors.text; }, function (p) {
+export var TableViewHeader = styled(TableViewCellContainer)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\n  ", "\n"], ["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\n  ", "\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.body2; }, function (p) { return p.theme.colors.text; }, function (p) {
     return p.isLast && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-right: solid 1px transparent !important;\n    "], ["\n      border-right: solid 1px transparent !important;\n    "])));
-}, function (_a) {
-    var isSpreadsheetTable = _a.isSpreadsheetTable;
-    return isSpreadsheetTable && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      min-width: 200px;\n    "], ["\n      min-width: 200px;\n    "])));
 });
-export var SortIndicator = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: 10px;\n  margin-top: -4px;\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"], ["\n  margin-left: 10px;\n  margin-top: -4px;\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (p) {
-    return p.direction === SortDirection.asc && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      margin-top: 3px;\n      transform: rotate(180deg);\n    "], ["\n      margin-top: 3px;\n      transform: rotate(180deg);\n    "])));
+export var SortIndicator = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 10px;\n  margin-top: -4px;\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"], ["\n  margin-left: 10px;\n  margin-top: -4px;\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (p) {
+    return p.direction === SortDirection.asc && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      margin-top: 3px;\n      transform: rotate(180deg);\n    "], ["\n      margin-top: 3px;\n      transform: rotate(180deg);\n    "])));
 }, function (p) { return p.theme.colors.gray300; });
-export var TableHeadersContainer = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
-export var TableHeadersContent = styled(Div)(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
+export var TableHeadersContainer = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
+export var TableHeadersContent = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
 export var TableHeaders = function (_a) {
-    var _b = _a.scrollLeft, scrollLeft = _b === void 0 ? 0 : _b, columns = _a.columns, sortBy = _a.sortBy, rowHeight = _a.rowHeight, containerRef = _a.containerRef, setSortBy = _a.setSortBy, _c = _a.rowWidth, rowWidth = _c === void 0 ? 1 : _c, _d = _a.height, height = _d === void 0 ? defaultTableHeaderHeightPx : _d, isSpreadsheetTable = _a.isSpreadsheetTable, props = __rest(_a, ["scrollLeft", "columns", "sortBy", "rowHeight", "containerRef", "setSortBy", "rowWidth", "height", "isSpreadsheetTable"]);
+    var _b = _a.scrollLeft, scrollLeft = _b === void 0 ? 0 : _b, columns = _a.columns, sortBy = _a.sortBy, rowHeight = _a.rowHeight, containerRef = _a.containerRef, setSortBy = _a.setSortBy, _c = _a.rowWidth, rowWidth = _c === void 0 ? 1 : _c, _d = _a.height, height = _d === void 0 ? defaultTableHeaderHeightPx : _d, shouldHaveCustomScrollbar = _a.shouldHaveCustomScrollbar, props = __rest(_a, ["scrollLeft", "columns", "sortBy", "rowHeight", "containerRef", "setSortBy", "rowWidth", "height", "shouldHaveCustomScrollbar"]);
     var t = useTranslation().t;
     return (_jsx(TableHeadersContainer, __assign({ ref: containerRef }, { children: _jsx(TableHeadersContent, __assign({ dflex: true, w: "".concat(100 * rowWidth, "%") }, { children: columns.map(function (column, index) {
                 var header = column.header, Header = column.Header;
@@ -65,7 +62,7 @@ export var TableHeaders = function (_a) {
                         });
                     }
                 };
-                return (_jsxs(TableViewHeader, __assign({ isLast: index === columns.length - 1, w: columnWidthPercentage(column, columns), onClick: onHeaderClick, h: height, isSpreadsheetTable: isSpreadsheetTable }, props, { children: [_jsx(_Fragment, { children: Header ? _jsx(Header, {}) : t(header) }), (sortBy === null || sortBy === void 0 ? void 0 : sortBy.field) === column.dataAccessor && (_jsx(SortIndicator, __assign({ direction: sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction }, { children: chevronDownIcon })))] }), index));
+                return (_jsxs(TableViewHeader, __assign({ isLast: index === columns.length - 1, w: columnWidthPercentage(column, columns), onClick: onHeaderClick, h: height, shouldHaveCustomScrollbar: shouldHaveCustomScrollbar }, props, { children: [_jsx(_Fragment, { children: Header ? _jsx(Header, {}) : t(header) }), (sortBy === null || sortBy === void 0 ? void 0 : sortBy.field) === column.dataAccessor && (_jsx(SortIndicator, __assign({ direction: sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction }, { children: chevronDownIcon })))] }), index));
             }) })) })));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

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

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

@@ -31,8 +31,8 @@ import styled, { css } from "styled-components";
 import { Div } from "../../../styled/utils";
 import { columnWidthPercentage, TableViewCellContainer } from "./common";
 export var Cell = React.memo(function (props) {
-    var children = props.children, isSpreadsheetTable = props.isSpreadsheetTable, cellProps = __rest(props, ["children", "isSpreadsheetTable"]);
-    return (_jsx(TableViewCellContainer, __assign({ isSpreadsheetTable: isSpreadsheetTable }, cellProps, { children: children })));
+    var children = props.children, shouldHaveCustomScrollbar = props.shouldHaveCustomScrollbar, cellProps = __rest(props, ["children", "shouldHaveCustomScrollbar"]);
+    return (_jsx(TableViewCellContainer, __assign({ shouldHaveCustomScrollbar: shouldHaveCustomScrollbar }, cellProps, { children: children })));
 }, areEqual);
 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; });
@@ -40,7 +40,7 @@ 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, _b = _a.isRowSelected, isRowSelected = _b === void 0 ? false : _b, isSpreadsheetTable = _a.isSpreadsheetTable, props = __rest(_a, ["row", "indexI", "columns", "isLast", "highlightFirstRow", "onRowClick", "getItemKey", "isRowSelected", "isSpreadsheetTable"]);
+    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, shouldHaveCustomScrollbar = _a.shouldHaveCustomScrollbar, props = __rest(_a, ["row", "indexI", "columns", "isLast", "highlightFirstRow", "onRowClick", "getItemKey", "isRowSelected", "shouldHaveCustomScrollbar"]);
     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;
@@ -48,7 +48,7 @@ export var TableRow = function (_a) {
             var resolvedKey = "column-".concat(indexJ, "-row-").concat(key);
             return (_jsx(Cell, __assign({ row: row, onClick: onRowClick && !column.preventRowClick
                     ? function () { return onRowClick(row); }
-                    : null, isSpreadsheetTable: isSpreadsheetTable, w: columnWidthPercentage(column, columns) }, { children: Content ? (_jsx(Content, __assign({}, row, { rowIndex: indexI }))) : (_jsx(Div, __assign({ truncateText: true }, { children: row[column.dataAccessor] || "-" }))) }), resolvedKey));
+                    : null, shouldHaveCustomScrollbar: shouldHaveCustomScrollbar, w: columnWidthPercentage(column, columns) }, { children: Content ? (_jsx(Content, __assign({}, row, { rowIndex: indexI }))) : (_jsx(Div, __assign({ truncateText: true }, { children: row[column.dataAccessor] || "-" }))) }), resolvedKey));
         }) })));
 };
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -2,7 +2,7 @@ import { TableViewColumn } from ".";
 export declare const defaultTableRowHeightPx = 60;
 export declare const defaultTableHeaderHeightPx = 60;
 type TableViewCellContainerProps = {
-    isSpreadsheetTable?: boolean;
+    shouldHaveCustomScrollbar?: boolean;
 };
 export declare const columnWidthPercentage: (column: TableViewColumn, columns: TableViewColumn[]) => string;
 export declare const TableViewCellContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableViewCellContainerProps, never>;

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

@@ -14,14 +14,11 @@ export var columnWidthPercentage = function (column, columns) {
         ? "".concat((column.width || 1 / totalColumnWidthCount) * 100, "%")
         : "0%";
 };
-export var TableViewCellContainer = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  padding-left: 16px;\n  align-items: center;\n  color: ", ";\n\n  ", "\n  ", ";\n  ", "\n"], ["\n  display: flex;\n  padding-left: 16px;\n  align-items: center;\n  color: ", ";\n\n  ", "\n  ", ";\n  ", "\n"])), function (p) { return p.theme.colors.textPrim; }, function (_a) {
+export var TableViewCellContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  padding-left: 16px;\n  align-items: center;\n  color: ", ";\n\n  ", "\n  ", ";\n"], ["\n  display: flex;\n  padding-left: 16px;\n  align-items: center;\n  color: ", ";\n\n  ", "\n  ", ";\n"])), function (p) { return p.theme.colors.textPrim; }, function (_a) {
     var onClick = _a.onClick;
     return onClick && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      :hover {\n        cursor: pointer;\n      }\n    "], ["\n      :hover {\n        cursor: pointer;\n      }\n    "])));
 }, function (_a) {
     var theme = _a.theme;
     return theme.css.body3;
-}, function (_a) {
-    var isSpreadsheetTable = _a.isSpreadsheetTable;
-    return isSpreadsheetTable && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      min-width: 200px;\n    "], ["\n      min-width: 200px;\n    "])));
 });
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2;

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

@@ -39,8 +39,8 @@ export type TableViewProps = {
     onRowClick?: (row: any) => void;
     getItemKey?: (row: any) => string;
     shouldBeDraggable?: boolean;
-    isInsideImporter?: boolean;
     checkboxColumnWidth?: number;
-    isSpreadsheetTable?: boolean;
+    shouldHaveCustomScrollbar?: boolean;
+    isFiltering?: boolean;
 } & DivCSSProps;
-export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, shouldBeDraggable, isInsideImporter, checkboxColumnWidth, ...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, shouldHaveCustomScrollbar, checkboxColumnWidth, isFiltering, ...props }: TableViewProps) => JSX.Element>;

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

@@ -63,7 +63,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, _p = _a.isInsideImporter, isInsideImporter = _p === void 0 ? false : _p, checkboxColumnWidth = _a.checkboxColumnWidth, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "shouldBeDraggable", "isInsideImporter", "checkboxColumnWidth"]);
+    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.shouldHaveCustomScrollbar, shouldHaveCustomScrollbar = _p === void 0 ? false : _p, checkboxColumnWidth = _a.checkboxColumnWidth, _q = _a.isFiltering, isFiltering = _q === void 0 ? false : _q, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "shouldBeDraggable", "shouldHaveCustomScrollbar", "checkboxColumnWidth", "isFiltering"]);
     /*
     multiply the rowWidth by 0.95 to let the user know they can scroll
     horizontally (will display partial column on the right)
@@ -71,7 +71,8 @@ export var TableView = React.memo(function (_a) {
     var _rowWidth = rowWidth > 1 ? rowWidth * 0.95 : rowWidth;
     var headerContainerRef = useRef();
     var listRef = useRef();
-    var tableHeadersUI = data.length > 0 && (_jsx(TableHeaders, { id: tableHeaderId, containerRef: headerContainerRef, height: tableHeadersHeight, rowHeight: rowHeight, rowWidth: _rowWidth, scrollLeft: 0, columns: columns, sortBy: sortBy, setSortBy: setSortBy, isSpreadsheetTable: isInsideImporter }));
+    var canRenderTableHeaders = isFiltering ? true : data.length > 0;
+    var tableHeadersUI = canRenderTableHeaders && (_jsx(TableHeaders, { id: tableHeaderId, containerRef: headerContainerRef, height: tableHeadersHeight, rowHeight: rowHeight, rowWidth: _rowWidth, scrollLeft: 0, columns: columns, sortBy: sortBy, setSortBy: setSortBy, shouldHaveCustomScrollbar: shouldHaveCustomScrollbar }));
     var onScroll = function (_a) {
         var scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
         if (headerContainerRef.current && headerContainerRef.current.scrollTo) {
@@ -102,18 +103,45 @@ export var TableView = React.memo(function (_a) {
         highlightFirstRow: highlightFirstRow,
         rowHeight: rowHeight,
         getItemKey: getItemKey,
-        isSpreadsheetTable: isInsideImporter,
+        shouldHaveCustomScrollbar: shouldHaveCustomScrollbar,
     }); }, [
         data,
         onRowClick,
         columns,
         highlightFirstRow,
         rowHeight,
-        isInsideImporter,
+        shouldHaveCustomScrollbar,
     ]);
-    return (_jsxs(TableViewWrapper, __assign({ "data-test-id": "table-view-wrapper", isLoading: isLoading, checkboxColumnWidth: checkboxColumnWidth }, (!isInsideImporter ? { h: tableHeight } : {}), props, { children: [tableHeadersUI, loadingUI, _jsx(AutoSizer, { children: function (_a) {
+    var buildGridProps = function (width, isDraggable, columnWidth, height) { return ({
+        style: buildGridStyles(_rowWidth),
+        width: width,
+        columnCount: 1,
+        itemData: itemData,
+        onItemsRendered: onItemsRendered,
+        onScroll: onScroll,
+        columnWidth: isDraggable ? Math.floor(width * _rowWidth) : columnWidth,
+        height: height - tableHeadersHeight,
+        rowHeight: rowHeight,
+        rowCount: data.length,
+    }); };
+    return (_jsxs(TableViewWrapper, __assign({ "data-test-id": "table-view-wrapper", isLoading: isLoading, checkboxColumnWidth: checkboxColumnWidth }, (!shouldHaveCustomScrollbar ? { 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(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, ref: listRef, outerElementType: isInsideImporter ? CustomScrollbarsVirtualList : undefined }, { children: Cell })))] }));
+                    var canUseCustomScrollbar = shouldHaveCustomScrollbar && !shouldBeDraggable;
+                    var gridProps = {
+                        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,
+                    };
+                    return (_jsx(_Fragment, { children: shouldBeDraggable ? (_jsx(SortableContext, __assign({ items: data, strategy: verticalListSortingStrategy }, { children: _jsx(StyledGrid, __assign({}, gridProps, { children: DraggableCell })) }))) : (_jsx(StyledGrid, __assign({}, gridProps, { ref: canUseCustomScrollbar ? listRef : undefined, outerElementType: canUseCustomScrollbar
+                                ? CustomScrollbarsVirtualList
+                                : undefined }, { children: Cell }))) }));
                 } })] })));
 }, areEqual);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/esm/common/inputs/TextInput.js

@@ -31,7 +31,7 @@ import { FormInputLabel } from "..";
 import { useDebounce } from "../../hooks";
 import { Div } from "../../styled/utils";
 import Tooltip from "./tooltip";
-export var HTMLInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n\n  /* TODO: remove !important's when we start rendering importer through iframe */\n  padding: ", " !important;\n  height: 68px !important;\n  margin: 0px !important;\n  box-shadow: none !important;\n\n  outline: none;\n\n  border: 1px solid ", " !important;\n  box-sizing: border-box;\n  border-radius: 8px;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  :focus {\n    border: 2px solid ", "!important;\n\n    /* 3d at the end adds .24 opacity (using 8 digit hex)*/\n    box-shadow: 0px 0px 8px ", "3d !important;\n  }\n\n  /* TODO: remove !important's when we start rendering importer through iframe */\n  :hover {\n    box-shadow: none !important;\n    background: transparent !important;\n  }\n\n  ", "\n  ", "\n"], ["\n  position: relative;\n\n  /* TODO: remove !important's when we start rendering importer through iframe */\n  padding: ", " !important;\n  height: 68px !important;\n  margin: 0px !important;\n  box-shadow: none !important;\n\n  outline: none;\n\n  border: 1px solid ", " !important;\n  box-sizing: border-box;\n  border-radius: 8px;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  :focus {\n    border: 2px solid ", "!important;\n\n    /* 3d at the end adds .24 opacity (using 8 digit hex)*/\n    box-shadow: 0px 0px 8px ", "3d !important;\n  }\n\n  /* TODO: remove !important's when we start rendering importer through iframe */\n  :hover {\n    box-shadow: none !important;\n    background: transparent !important;\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
+export var HTMLInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n\n  padding: ", ";\n  height: 68px;\n  margin: 0px;\n  box-shadow: none;\n\n  outline: none;\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  :focus {\n    border: 2px solid ", ";\n\n    /* 3d at the end adds .24 opacity (using 8 digit hex)*/\n    box-shadow: 0px 0px 8px ", "3d;\n  }\n\n  :hover {\n    box-shadow: none;\n    background: transparent;\n  }\n\n  ", "\n  ", "\n"], ["\n  position: relative;\n\n  padding: ", ";\n  height: 68px;\n  margin: 0px;\n  box-shadow: none;\n\n  outline: none;\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  :focus {\n    border: 2px solid ", ";\n\n    /* 3d at the end adds .24 opacity (using 8 digit hex)*/\n    box-shadow: 0px 0px 8px ", "3d;\n  }\n\n  :hover {\n    box-shadow: none;\n    background: transparent;\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
     var padding = _a.padding;
     return (padding ? padding : "20px 16px");
 }, function (props) { return props.theme.colors.gray300; }, function (props) { return props.theme.css.body1; }, function (props) { return props.theme.colors.placeholder; }, function (props) { return props.theme.colors.blue500; }, function (props) { return props.theme.colors.blue500; }, function (props) {

package/lib/esm/index.d.ts

@@ -6,12 +6,18 @@ declare class FuseImporter {
     zIndex: number;
     options: ImporterOptions;
     constructor(apiToken: string, templateSlug: string, options?: ImporterOptions);
+    private cleanupIframe;
     formatRecord: FormatRecord;
     onValidateRecord: OnValidateRecord;
     onSubmit: OnSubmit;
     onClose: () => void;
     close(): void;
     show(): Promise<void>;
+    private renderImporterComponent;
+    private createDivComponent;
+    private createIframe;
+    private createImporterComponent;
+    private configureIframe;
     private configureI18n;
 }
 export default FuseImporter;