fuse-importer 0.25.7 → 0.25.8

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/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/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 !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) {
     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  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) {
-    return p.hasWarning && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.orange1200; });
+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; });
 }, function (p) {
-    return p.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.error; });
+    return p.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", " !important;\n    "], ["\n      color: ", " !important;\n    "])), function (p) { return p.theme.colors.error; });
 });
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -81,8 +81,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;
 };

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

@@ -35,6 +35,7 @@ import { Spinner } from "../../Spinner";
 import { defaultTableRowHeightPx, defaultTableHeaderHeightPx } from "./common";
 import { TableHeaders } from "./TableHeaders";
 import { Cell, DraggableCell } from "./TableCells";
+import { CustomScrollbarsVirtualList } from "./CustomScrollbar";
 export * from "./common";
 export * from "./TableHeaders";
 export * from "./TableRow";
@@ -46,7 +47,7 @@ export var TableViewWrapper = styled(Div)(templateObject_3 || (templateObject_3
 }, function (p) { return p.theme.css.scrollbarDark; });
 var SpinnerWrapper = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  pointer-events: none;\n  z-index: 100;\n"], ["\n  pointer-events: none;\n  z-index: 100;\n"])));
 var tableHeaderId = "tableHeaderId";
-var StyledGrid = styled(Grid)(templateObject_5 || (templateObject_5 = __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_5 || (templateObject_5 = __makeTemplateObject(["\n  scrollbar-width: thin;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 5px;\n    height: 5px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background-color: #b1b1b2;\n    border-radius: 3px;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"], ["\n  scrollbar-width: thin;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 5px;\n    height: 5px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background-color: #b1b1b2;\n    border-radius: 3px;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])));
 var buildGridStyles = function (rowWidth) {
     /* using style={{ willChange: "unset" }} is important for having items
               like backdrops with position fixed inside of the table working as
@@ -58,7 +59,7 @@ var buildGridStyles = function (rowWidth) {
     if (rowWidth === 1)
         gridStyles = __assign(__assign({}, gridStyles), { overflowX: "hidden", overflowY: "auto" });
     else if (rowWidth > 1)
-        gridStyles = __assign(__assign({}, gridStyles), { overflowX: "scroll" });
+        gridStyles = __assign(__assign({}, gridStyles), { overflowX: "hidden" });
     return gridStyles;
 };
 export var TableView = React.memo(function (_a) {
@@ -69,6 +70,7 @@ 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 onScroll = function (_a) {
         var scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
@@ -111,7 +113,7 @@ export var TableView = React.memo(function (_a) {
     ]);
     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 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 }, { children: Cell })))] }));
+                    return (_jsxs(_Fragment, { children: [shouldBeDraggable && (_jsx(SortableContext, __assign({ items: data, strategy: verticalListSortingStrategy }, { children: _jsx(StyledGrid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: DraggableCell })) }))), !shouldBeDraggable && (_jsx(StyledGrid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length, ref: listRef, outerElementType: isInsideImporter ? CustomScrollbarsVirtualList : undefined }, { children: Cell })))] }));
                 } })] })));
 }, areEqual);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -38,7 +38,7 @@ var Checkbox = function (_a) {
     var handleOnChange = function (event) {
         if (!onChange)
             return;
-        if (event.shiftKey && onShiftKeyPressed) {
+        if ((event.shiftKey || event.nativeEvent.metaKey) && onShiftKeyPressed) {
             onShiftKeyPressed();
             return;
         }

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  padding: ", ";\n  height: 68px;\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  ", "\n  ", "\n"], ["\n  position: relative;\n  padding: ", ";\n  height: 68px;\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  ", "\n  ", "\n"])), function (_a) {
+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) {
     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) {