fuse-importer 0.25.7 → 0.25.9

package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcher/tableColumns.js

@@ -41,7 +41,7 @@ export var tableColumns = [
                 newEnumFieldValueMatchings[templateHeaderLabel][uploadedDataValue] = selected;
                 setEnumFieldValueMatchings(newEnumFieldValueMatchings);
             };
-            return (_jsx(Div, __assign({ w100: true }, { children: _jsx(Autocomplete, { w: "90%", placeholder: t("columns.placeholder"), onChange: onChange, value: uploadedDataValueMatching, options: valueOptions.map(function (vo) { return ({
+            return (_jsx(Div, __assign({ w100: true }, { children: _jsx(Autocomplete, { w: "90%", placeholder: t("columns.placeholder"), onChange: onChange, placement: "bottom", value: uploadedDataValueMatching, options: valueOptions.map(function (vo) { return ({
                         value: vo,
                         label: vo,
                     }); }) }) })));

package/lib/esm/Importer/Matcher/HeaderMatcher/tableColumns.js

@@ -27,7 +27,7 @@ export var tableColumns = [
                 newTemplateHeaderMatchings[ourColumns] = selected;
                 setTemplateHeaderMatchings(newTemplateHeaderMatchings);
             };
-            return (_jsx(Autocomplete, { w: "92%", onChange: onChange, value: yourColumns, id: "your-column-".concat(ourColumns), options: uploadedDataHeaders.map(function (h) { return ({
+            return (_jsx(Autocomplete, { w: "92%", onChange: onChange, value: yourColumns, placement: "bottom", id: "your-column-".concat(ourColumns), options: uploadedDataHeaders.map(function (h) { return ({
                     value: h,
                     label: h,
                 }); }) }));

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/Stepper/index.js

@@ -35,7 +35,8 @@ var StepperButtonContainer = styled(Div)(templateObject_5 || (templateObject_5 =
     var align = _a.align;
     return align === "left" ? "flex-start" : "flex-end";
 });
-var CloseIcon = styled(Div)(function () { return css(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""]))); });
+var GoBackButtonWrapper = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  @media (max-width: 740px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 740px) {\n    display: none;\n  }\n"])));
+var CloseIcon = styled(Div)(function () { return css(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""]))); });
 export var Stepper = function (_a) {
     var stepLabels = _a.stepLabels, logoURL = _a.logoURL;
     var _b = useState(false), isUnmatchedHeadersModalOpen = _b[0], setIsUnmatchedHeadersModalOpen = _b[1];
@@ -107,10 +108,10 @@ export var Stepper = function (_a) {
             var isCompleted = index < currentStepIndex;
             return (_jsxs(Div, __assign({ centered: true }, { children: [_jsx(Step, { index: index, label: label, isCompleted: isCompleted, isSelected: index === currentStepIndex }), !isLast && (_jsx(Div, __assign({ ml: 18, mr: 18, dflex: true }, { children: _jsx(ChevronRightIcon, {}) })))] }), index));
         }) })));
-    var leftButtonUI = (_jsx(Div, __assign({ forDesktop: true, style: { flex: 1 } }, { children: _jsxs(StepperButtonContainer, __assign({ align: "left" }, { children: [logoURL && _jsx(Logo, { src: logoURL, alt: "" }), currentStepIndex > 0 && !appResponse && (_jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: t("stepper.go_back") })))] })) })));
+    var leftButtonUI = (_jsx(Div, __assign({ style: { flex: 1 } }, { children: _jsxs(StepperButtonContainer, __assign({ align: "left" }, { children: [logoURL && (_jsx(Div, __assign({ forDesktop: true }, { children: _jsx(Logo, { src: logoURL, alt: "" }) }))), currentStepIndex > 0 && !appResponse && (_jsx(GoBackButtonWrapper, { children: _jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: t("stepper.go_back") })) }))] })) })));
     var rightButtonUI = (_jsxs(StepperButtonContainer, __assign({ align: "right" }, { children: [(isMatchStep || isVerifyStep) && (_jsx(Button, __assign({ variant: "primary", onClick: continueToNextStep }, { children: t("stepper.continue") }))), isReviewStep && (_jsx(Button, __assign({ variant: "primary", isDisabled: isSubmitDisabled, onClick: function () { return setIsSubmitModalOpen(true); } }, { children: t("stepper.submit") }))), _jsx(CloseIcon, __assign({ "data-test-id": "close-importer", centered: true, clickable: true, onClick: handleOnClose }, { children: closeIconCondensed }))] })));
     return (_jsxs(_Fragment, { children: [_jsx(StepperWrapper, __assign({ pRelative: true, alignCenter: true, w100: true, h: 72, centered: true }, { children: _jsxs(StepperContainer, { children: [leftButtonUI, _jsx(Steps, __assign({ alignCenter: true }, { children: stepsUI })), rightButtonUI] }) })), _jsx(UnmatchedHeadersModal, { isUnmatchedHeadersModalOpen: isUnmatchedHeadersModalOpen, unmatchedHeadersCount: unmatchedHeadersCount, onSetStep: function () { return setStep(); }, onCloseUnmatchedHeadersModal: function () {
                     return setIsUnmatchedHeadersModalOpen(false);
                 } }), _jsx(StepperSubmitModal, { isSubmitModalOpen: isSubmitModalOpen, onCloseModal: function () { return setIsSubmitModalOpen(false); }, onSubmit: onSubmit }), _jsx(ConfirmCloseModal, { isOpen: isConfirmCloseModalOpen, onClose: function () { return setIsConfirmCloseModalOpen(false); }, onCloseImporter: onClose })] }));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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/SpreadsheetRowCheckboxes.js

@@ -44,7 +44,10 @@ import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
 import { Checkbox } from "../../../../common/inputs/Checkbox";
 import { useImporterContext } from "../../../contexts/ImporterContextProvider";
 import ReactVirtualizedAutoSizer from "react-virtualized-auto-sizer";
-var StyledGrid = styled(Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-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 StyledGrid = styled(Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  overflow-y: scroll;\n"], ["\n  background: ", ";\n  overflow-y: scroll;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.white50;
+});
 var gridStyles = {
     outline: "none",
     willChange: "unset",

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;\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    :focus {\n      border: none;\n      box-shadow: none;\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    :focus {\n      border: none;\n      box-shadow: none;\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,7 +35,7 @@ export var SpreadsheetInput = function (_a) {
                 return setValue(value);
             } }, props)) })));
 };
-export var Input = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  outline: none;\n  border: none;\n  width: 100%;\n  height: calc(100% - 2px);\n  background: transparent;\n  box-sizing: border-box;\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  outline: none;\n  border: none;\n  width: 100%;\n  height: calc(100% - 2px);\n  background: transparent;\n  box-sizing: border-box;\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) {
+export var Input = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: calc(100% - 2px);\n  margin: 0px;\n  outline: none;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  padding: 0 12px;\n  ", ";\n  color: ", ";\n  ::placeholder {\n    color: ", ";\n  }\n\n  ", "\n\n  ", "\n"], ["\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: calc(100% - 2px);\n  margin: 0px;\n  outline: none;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  padding: 0 12px;\n  ", ";\n  color: ", ";\n  ::placeholder {\n    color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), function (props) { return props.theme.css.body1; }, function (props) { return props.theme.colors.gray1000; }, function (props) { return props.theme.colors.placeholder; }, function (p) {
     return p.hasWarning && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.orange1200; });
 }, function (p) {
     return p.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.error; });

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;
 };
@@ -81,8 +82,9 @@ var isObject = function (value) {
 };
 var includesSearchValue = function (value, searchValue) {
     if (typeof value === "string" || typeof value === "number") {
-        var stringValue = String(value);
-        return stringValue.includes(searchValue);
+        var stringValue = String(value).toLowerCase();
+        var searchValueLower = searchValue.toLowerCase();
+        return stringValue.includes(searchValueLower);
     }
     return false;
 };
@@ -119,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  background: none;\n  border: none;\n  color: ", ";\n  height: 20px !important;\n  outline: none;\n\n  ", ";\n"], ["\n  ", ";\n  background: none;\n  border: none;\n  color: ", ";\n  height: 20px !important;\n  outline: none;\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/CustomScrollbar.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CustomScrollbarsVirtualList: import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<unknown>>;

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

@@ -0,0 +1,34 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
+import { Scrollbars } from "react-custom-scrollbars";
+import styled from "styled-components";
+var StyledScrollbars = styled(Scrollbars)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  scrollbar-width: thin;\n  scrollbar-color: #b1b1b2 transparent;\n\n  ::-webkit-scrollbar {\n    width: 0;\n    height: 5px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: #b1b1b2;\n    border-radius: 3px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  > div:first-of-type {\n    margin-bottom: 0 !important;\n  }\n"], ["\n  scrollbar-width: thin;\n  scrollbar-color: #b1b1b2 transparent;\n\n  ::-webkit-scrollbar {\n    width: 0;\n    height: 5px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: #b1b1b2;\n    border-radius: 3px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  > div:first-of-type {\n    margin-bottom: 0 !important;\n  }\n"])));
+var CustomScrollbars = function (_a) {
+    var onScroll = _a.onScroll, forwardedRef = _a.forwardedRef, style = _a.style, children = _a.children;
+    var refSetter = useCallback(function (scrollbarsRef) {
+        if (scrollbarsRef) {
+            forwardedRef(scrollbarsRef.view);
+        }
+        else {
+            forwardedRef(null);
+        }
+    }, []);
+    return (_jsx(StyledScrollbars, __assign({ renderTrackHorizontal: function (props) { return (_jsx("div", __assign({}, props, { style: { display: "none" }, className: "track-horizontal" }))); }, ref: refSetter, style: style, onScroll: onScroll }, { children: children })));
+};
+export var CustomScrollbarsVirtualList = forwardRef(function (props, ref) { return (_jsx(CustomScrollbars, __assign({}, props, { forwardedRef: ref }))); });
+var templateObject_1;

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>;