fuse-importer 0.25.6 → 0.25.7

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

@@ -59,19 +59,13 @@ var rowIsEmpty = function (row) {
     });
 };
 export var SpreadsheetRowCheckboxes = function (_a) {
-    var _b, _c, _d, _e;
-    var height = _a.height, spreadsheetHasXScroll = _a.spreadsheetHasXScroll, gridRef = _a.gridRef, _f = _a.firstRowIsHeader, firstRowIsHeader = _f === void 0 ? false : _f, isLoadingData = _a.isLoadingData, props = __rest(_a, ["height", "spreadsheetHasXScroll", "gridRef", "firstRowIsHeader", "isLoadingData"]);
-    var _g = useSpreadsheetContext(), data = _g.data, selectedRows = _g.selectedRows, lastClickedIndexRef = _g.lastClickedIndexRef, setSelectedRows = _g.setSelectedRows;
+    var height = _a.height, spreadsheetHasXScroll = _a.spreadsheetHasXScroll, gridRef = _a.gridRef, _b = _a.firstRowIsHeader, firstRowIsHeader = _b === void 0 ? false : _b, isLoadingData = _a.isLoadingData, props = __rest(_a, ["height", "spreadsheetHasXScroll", "gridRef", "firstRowIsHeader", "isLoadingData"]);
+    var _c = useSpreadsheetContext(), data = _c.data, selectedRows = _c.selectedRows, lastClickedIndexRef = _c.lastClickedIndexRef, setSelectedRows = _c.setSelectedRows, checkboxColumnWidth = _c.checkboxColumnWidth;
     var currentStepIndex = useImporterContext().currentStepIndex;
     var nonEmptyRows = useMemo(function () { return data.filter(function (row) { return !rowIsEmpty(row); }); }, [
         data,
     ]);
     var isIndeterminate = selectedRows.length > 0 && selectedRows.length < nonEmptyRows.length;
-    var lastRowIndexLength = (_e = (_d = (_c = (_b = data[data.length - 1]) === null || _b === void 0 ? void 0 : _b._meta) === null || _c === void 0 ? void 0 : _c.rowIndex) === null || _d === void 0 ? void 0 : _d.toString()) === null || _e === void 0 ? void 0 : _e.length;
-    var singleLetterWidth = 15;
-    var horizontalSpacing = 8;
-    var baseColumnWidth = lastRowIndexLength * singleLetterWidth + horizontalSpacing;
-    var columnWidth = baseColumnWidth < 40 ? 40 : baseColumnWidth;
     var handleRowSelect = function (checked, rowIndex) {
         if (checked && rowIsEmpty(data[rowIndex])) {
             return;
@@ -154,17 +148,17 @@ export var SpreadsheetRowCheckboxes = function (_a) {
     var isSelectAllRowsChekboxChecked = (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) > 0 &&
         (data === null || data === void 0 ? void 0 : data.length) > 0 &&
         (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) >= (nonEmptyRows === null || nonEmptyRows === void 0 ? void 0 : nonEmptyRows.length);
-    return (_jsxs(SpreadsheetRowCheckboxesContainer, __assign({ className: "spreadsheet-row-container", columnWidth: columnWidth }, props, { h100: true }, { children: [_jsx(SpreadsheetRowCheckboxesHeader, { children: currentStepIndex === 2 && (_jsx(Checkbox, { isChecked: isSelectAllRowsChekboxChecked, onChange: function (checked) {
+    return (_jsxs(SpreadsheetRowCheckboxesContainer, __assign({ className: "spreadsheet-row-container", columnWidth: checkboxColumnWidth }, props, { h100: true }, { children: [_jsx(SpreadsheetRowCheckboxesHeader, { children: currentStepIndex === 2 && (_jsx(Checkbox, { isChecked: isSelectAllRowsChekboxChecked, onChange: function (checked) {
                         return !isLoadingData && handleSelectAllRows(checked);
                     }, isIndeterminate: isIndeterminate, isDisabled: isLoadingData })) }), _jsx(ReactVirtualizedAutoSizer, { children: function (_a) {
                     var height = _a.height;
-                    return (_jsx(StyledGrid, __assign({ ref: gridRef, style: gridStyles, width: columnWidth, columnCount: 1, columnWidth: columnWidth, rowHeight: 40, rowCount: data.length, height: height - spreadsheetHeaderHeightPx }, { children: Cell })));
+                    return (_jsx(StyledGrid, __assign({ ref: gridRef, style: gridStyles, width: checkboxColumnWidth, columnCount: 1, columnWidth: checkboxColumnWidth, rowHeight: 40, rowCount: data.length, height: height - spreadsheetHeaderHeightPx }, { children: Cell })));
                 } })] })));
 };
 var RowCheckbox = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n\n  .checkbox-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    visibility: hidden;\n    z-index: 1;\n  }\n\n  .row-numbers-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n"], ["\n  background-color: ", ";\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n\n  .checkbox-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    visibility: hidden;\n    z-index: 1;\n  }\n\n  .row-numbers-cell {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])), function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.label3; }, function (p) {
     return !p.isLast && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      box-shadow: inset 0 -1px 0 ", ";\n    "], ["\n      box-shadow: inset 0 -1px 0 ", ";\n    "])), function (p) { return p.theme.colors.gray300; });
 });
-var SpreadsheetRowCheckboxesHeader = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  height: ", "px;\n  border-top-left-radius: 8px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0 ", ";\n  display: flex;\n  justify-content: center;\n"], ["\n  align-items: center;\n  height: ", "px;\n  border-top-left-radius: 8px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0 ", ";\n  display: flex;\n  justify-content: center;\n"])), spreadsheetRowHeightPx, function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.colors.gray300; });
+var SpreadsheetRowCheckboxesHeader = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  height: ", "px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0 ", ";\n  display: flex;\n  justify-content: center;\n"], ["\n  align-items: center;\n  height: ", "px;\n  background-color: ", ";\n  box-shadow: inset 0 -1px 0 ", ";\n  display: flex;\n  justify-content: center;\n"])), spreadsheetRowHeightPx, function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.colors.gray300; });
 var SpreadsheetRowCheckboxesContainer = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-right: solid 1px ", ";\n  border-top-left-radius: 8px;\n  width: ", "px;\n\n  .ReactVirtualized__Grid {\n    /* Scrollbar */\n    ::-webkit-scrollbar {\n      width: 8px;\n    }\n\n    /* Track */\n    ::-webkit-scrollbar-track {\n      background-color: ", " !important;\n    }\n  }\n"], ["\n  border-right: solid 1px ", ";\n  border-top-left-radius: 8px;\n  width: ", "px;\n\n  .ReactVirtualized__Grid {\n    /* Scrollbar */\n    ::-webkit-scrollbar {\n      width: 8px;\n    }\n\n    /* Track */\n    ::-webkit-scrollbar-track {\n      background-color: ", " !important;\n    }\n  }\n"])), function (p) { return p.theme.colors.gray300; }, function (_a) {
     var columnWidth = _a.columnWidth;
     return columnWidth || 40;

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

@@ -14,6 +14,6 @@ import { colors } from "../../../../styled/theme/colorPalette";
 import { Div } from "../../../../styled/utils";
 var ValidationProgress = function (_a) {
     var totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage;
-    return (_jsxs(Div, __assign({ body1: true, dflex: true, mb: 22 }, { children: ["Calculating Data...", _jsxs(Div, __assign({ bold: true, ml: 5 }, { children: [validationPercentage, "%"] })), _jsxs(Div, __assign({ bold: true, c: colors.error, ml: 5 }, { children: ["(", totalErrors, " errors)"] }))] })));
+    return (_jsxs(Div, __assign({ body1: true, dflex: true, ml: 32, mb: 22 }, { children: ["Calculating Data...", _jsxs(Div, __assign({ bold: true, ml: 5 }, { children: [validationPercentage, "%"] })), _jsxs(Div, __assign({ bold: true, c: colors.error, ml: 5 }, { children: ["(", totalErrors, " errors)"] }))] })));
 };
 export default ValidationProgress;

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, ...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, isInsideImporter, checkboxColumnWidth, ...props }: import("../../../common/Table/TableView").TableViewProps) => JSX.Element>, import("styled-components").DefaultTheme, {}, never>;
 export {};

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

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import styled, { css } from "styled-components";
 import { TableView as TableViewBase, TableViewCellContainer, TableViewRow, } from "../../../common/Table/TableView";
 import { Div } from "../../../styled/utils";
-export var SpreadSheetData = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  max-height: 675px;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  max-height: 675px;\n  width: 100%;\n"])));
+export var SpreadSheetData = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"])));
 export var SpreadSheetWrapper = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: solid 1px ", ";\n  background: ", ";\n  overflow: hidden !important;\n  flex-grow: 1;\n\n  ", "\n"], ["\n  border: solid 1px ", ";\n  background: ", ";\n  overflow: hidden !important;\n  flex-grow: 1;\n\n  ", "\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.white; }, function (_a) {
     var canShowCheckboxOnHover = _a.canShowCheckboxOnHover, shouldShowOnlyCheckbox = _a.shouldShowOnlyCheckbox;
     return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    .spreadsheet-row-container {\n      ", "\n\n      ", "\n    }\n  "], ["\n    .spreadsheet-row-container {\n      ", "\n\n      ", "\n    }\n  "])), shouldShowOnlyCheckbox && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        .row-numbers-cell {\n          visibility: hidden;\n        }\n\n        .checkbox-cell {\n          visibility: visible;\n        }\n      "], ["\n        .row-numbers-cell {\n          visibility: hidden;\n        }\n\n        .checkbox-cell {\n          visibility: visible;\n        }\n      "]))), !shouldShowOnlyCheckbox &&

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

@@ -130,7 +130,13 @@ export var getReviewDataSet = function (_a) {
         formatRecord: formatRecord,
     });
     var baseInitialDataSet = recordListToDataSet(addEmptyRows(records, fields), fields);
-    var highestRowIndex = Math.max.apply(Math, Object.values(records).map(function (obj) { return obj._meta.rowIndex; }));
+    var highestRowIndex = 0;
+    for (var _i = 0, records_1 = records; _i < records_1.length; _i++) {
+        var obj = records_1[_i];
+        if (obj._meta && obj._meta.rowIndex > highestRowIndex) {
+            highestRowIndex = obj._meta.rowIndex;
+        }
+    }
     var emptyRowAtBottom = addMeta({}, highestRowIndex + 1);
     var initialDataSet = __assign(__assign({}, baseInitialDataSet), (_b = {}, _b[emptyRowAtBottom._meta.id] = emptyRowAtBottom, _b));
     return { fields: fields, initialDataSet: initialDataSet };

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

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

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

@@ -23,8 +23,8 @@ import { useImporterContext } from "../../../Importer/contexts/ImporterContextPr
 import { DeleteIcon, ConfirmationDeleteIcon } from "./icons";
 import { addToast } from "../../../common/Toast";
 import { Div } from "../../../styled/utils";
+import { ActionButton } from "./TableActions.styles";
 var StyledTooltipProvider = styled(TooltipProvider)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
-export var ActionButton = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background: transparent;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  width: 40px;\n\n  :disabled {\n    opacity: 0.6;\n\n    :hover {\n      background-color: transparent !important;\n      cursor: not-allowed;\n    }\n  }\n"], ["\n  align-items: center;\n  background: transparent;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  width: 40px;\n\n  :disabled {\n    opacity: 0.6;\n\n    :hover {\n      background-color: transparent !important;\n      cursor: not-allowed;\n    }\n  }\n"])));
 var filterByRecordsThatContainsValues = function (mainObject) {
     return mainObject.filter(function (obj) {
         for (var key in obj) {
@@ -62,4 +62,4 @@ export var DeleteSelectedRows = function (_a) {
     var isDeleteButtonDisabled = selectedRows.length <= 0;
     return (_jsxs(_Fragment, { children: [confirmationModalUI, _jsx(StyledTooltipProvider, __assign({ tooltip: isDeleteButtonDisabled ? "Select rows to delete" : "Delete Row", placement: "right", flip: false, centered: true, "data-testid": testId }, { children: _jsx(ActionButton, __assign({ onClick: toggleModalVisibility, disabled: isDeleteButtonDisabled }, { children: _jsx(DeleteIcon, {}) })) }))] }));
 };
-var templateObject_1, templateObject_2;
+var templateObject_1;

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

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

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

@@ -0,0 +1,21 @@
+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 { DownloadIcon } from "./icons";
+import { useReviewContext } from "../../../Importer";
+import { TooltipProvider } from "../../../common/TooltipProvider";
+import { ActionButton } from "./TableActions.styles";
+export var ExportData = function (_a) {
+    var _b = _a.testId, testId = _b === void 0 ? "ta-export-data" : _b;
+    var onExport = useReviewContext().onExport;
+    return (_jsx(TooltipProvider, __assign({ tooltip: "Export your data", placement: "right", flip: false, centered: true, "data-testid": testId }, { children: _jsx(ActionButton, __assign({ onClick: onExport }, { children: _jsx(DownloadIcon, {}) })) })));
+};

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

@@ -22,7 +22,7 @@ import { useRef, useState } from "react";
 import { colors } from "../../../styled/theme/colorPalette";
 import { textStyles } from "../../../styled/theme/textStyles";
 import { TooltipProvider } from "../../../common/TooltipProvider";
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"], ["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"])), function (_a) {
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  position: relative;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"], ["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  position: relative;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"])), function (_a) {
     var isOpen = _a.isOpen;
     return (isOpen ? colors.orange50 : "none");
 }, function (_a) {
@@ -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  outline: none;\n  width: 100%;\n\n  ", ";\n"], ["\n  ", ";\n  background: none;\n  border: none;\n  color: ", ";\n  outline: none;\n  width: 100%;\n\n  ", ";\n"])), textStyles.body3, colors.gray700, function (_a) {
+var 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 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/TableActions/TableActions.d.ts

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

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

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

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

@@ -0,0 +1,5 @@
+import { TableActionsContainerProps } from "./TableActions";
+export declare const TableActionsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableActionsContainerProps, never>;
+export declare const ButtonActionsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
+export declare const TableActionsContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
+export declare const ActionButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,17 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from "styled-components";
+import { Div } from "../../../styled/utils";
+export var TableActionsContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-top: 1px solid ", ";\n  display: flex;\n  overflow: hidden;\n  padding: 8px 32px;\n  width: 100%;\n\n  * {\n    box-sizing: content-box;\n  }\n"], ["\n  align-items: center;\n  background: ", ";\n  border-top: 1px solid ", ";\n  display: flex;\n  overflow: hidden;\n  padding: 8px 32px;\n  width: 100%;\n\n  * {\n    box-sizing: content-box;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.white;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.gray300;
+});
+export var ButtonActionsContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n"])));
+export var TableActionsContent = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n"])));
+export var ActionButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background: transparent;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 36px;\n  justify-content: center;\n  padding: 0px;\n  width: 36px;\n\n  :disabled {\n    opacity: 0.6;\n\n    :hover {\n      background-color: transparent !important;\n      cursor: not-allowed;\n    }\n  }\n"], ["\n  align-items: center;\n  background: transparent;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 36px;\n  justify-content: center;\n  padding: 0px;\n  width: 36px;\n\n  :disabled {\n    opacity: 0.6;\n\n    :hover {\n      background-color: transparent !important;\n      cursor: not-allowed;\n    }\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

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

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

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

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

@@ -31,16 +31,19 @@ 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_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) {
+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) {
     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_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    "])));
+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    "])));
 }, function (p) { return p.theme.colors.gray300; });
-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 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 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, props = __rest(_a, ["scrollLeft", "columns", "sortBy", "rowHeight", "containerRef", "setSortBy", "rowWidth", "height"]);
+    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 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;
@@ -62,7 +65,7 @@ export var TableHeaders = function (_a) {
                         });
                     }
                 };
-                return (_jsxs(TableViewHeader, __assign({ isLast: index === columns.length - 1, w: columnWidthPercentage(column, columns), onClick: onHeaderClick, h: height }, 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, 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));
             }) })) })));
 };
-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/common/Table/TableView/TableRow.d.ts

@@ -13,6 +13,7 @@ type Props = Pick<TableViewProps, "columns" | "onRowClick" | "highlightFirstRow"
     isLast?: boolean;
     getItemKey?: (row: any) => string;
     isRowSelected?: boolean;
+    isSpreadsheetTable?: boolean;
 } & DivCSSProps;
-export declare const TableRow: ({ row, indexI, columns, isLast, highlightFirstRow, onRowClick, getItemKey, isRowSelected, ...props }: Props) => JSX.Element;
+export declare const TableRow: ({ row, indexI, columns, isLast, highlightFirstRow, onRowClick, getItemKey, isRowSelected, isSpreadsheetTable, ...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, cellProps = __rest(props, ["children"]);
-    return (_jsx(TableViewCellContainer, __assign({}, cellProps, { children: children })));
+    var children = props.children, isSpreadsheetTable = props.isSpreadsheetTable, cellProps = __rest(props, ["children", "isSpreadsheetTable"]);
+    return (_jsx(TableViewCellContainer, __assign({ isSpreadsheetTable: isSpreadsheetTable }, 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, props = __rest(_a, ["row", "indexI", "columns", "isLast", "highlightFirstRow", "onRowClick", "getItemKey", "isRowSelected"]);
+    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 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, w: columnWidthPercentage(column, columns) }, { children: Content ? (_jsx(Content, __assign({}, row, { rowIndex: indexI }))) : (_jsx(Div, __assign({ truncateText: true }, { children: row[column.dataAccessor] || "-" }))) }), resolvedKey));
+                    : 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));
         }) })));
 };
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,5 +1,9 @@
 import { TableViewColumn } from ".";
 export declare const defaultTableRowHeightPx = 60;
 export declare const defaultTableHeaderHeightPx = 60;
+type TableViewCellContainerProps = {
+    isSpreadsheetTable?: 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, never>;
+export declare const TableViewCellContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableViewCellContainerProps, never>;
+export {};

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

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

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

@@ -6,6 +6,7 @@ export * from "./TableHeaders";
 export * from "./TableRow";
 type TableViewWrapperProps = {
     isLoading: boolean;
+    checkboxColumnWidth?: number;
 };
 export declare const TableViewWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableViewWrapperProps, never>;
 export type TableViewColumn = {
@@ -39,5 +40,7 @@ export type TableViewProps = {
     getItemKey?: (row: any) => string;
     shouldBeDraggable?: boolean;
     isInsideImporter?: boolean;
+    checkboxColumnWidth?: number;
+    isSpreadsheetTable?: 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, ...props }: TableViewProps) => JSX.Element>;
+export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, shouldBeDraggable, isInsideImporter, checkboxColumnWidth, ...props }: TableViewProps) => JSX.Element>;

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

@@ -38,12 +38,15 @@ import { Cell, DraggableCell } from "./TableCells";
 export * from "./common";
 export * from "./TableHeaders";
 export * from "./TableRow";
-export var TableViewWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  border-radius: 8px;\n  border: solid 1px ", ";\n  max-width: calc(100vw - 50px);\n  overflow: hidden;\n\n  // prevents clipped dropdowns\n  .ReactVirtualized__Grid__innerScrollContainer {\n    overflow: visible !important;\n  }\n  .ReactVirtualized__Table__row {\n    overflow: visible !important;\n  }\n\n  // fix scrollbar layout issues on windows/macos\n  .ReactVirtualized__Grid {\n    ", ";\n  }\n"], ["\n  ", "\n  border-radius: 8px;\n  border: solid 1px ", ";\n  max-width: calc(100vw - 50px);\n  overflow: hidden;\n\n  // prevents clipped dropdowns\n  .ReactVirtualized__Grid__innerScrollContainer {\n    overflow: visible !important;\n  }\n  .ReactVirtualized__Table__row {\n    overflow: visible !important;\n  }\n\n  // fix scrollbar layout issues on windows/macos\n  .ReactVirtualized__Grid {\n    ", ";\n  }\n"])), function (p) {
+export var TableViewWrapper = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  box-shadow: 0 0 0 1px ", ";\n  overflow: hidden;\n\n  ", "\n\n  // prevents clipped dropdowns\n  .ReactVirtualized__Grid__innerScrollContainer {\n    overflow: visible !important;\n  }\n  .ReactVirtualized__Table__row {\n    overflow: visible !important;\n  }\n\n  // fix scrollbar layout issues on windows/macos\n  .ReactVirtualized__Grid {\n    ", ";\n  }\n"], ["\n  ", "\n  box-shadow: 0 0 0 1px ", ";\n  overflow: hidden;\n\n  ", "\n\n  // prevents clipped dropdowns\n  .ReactVirtualized__Grid__innerScrollContainer {\n    overflow: visible !important;\n  }\n  .ReactVirtualized__Table__row {\n    overflow: visible !important;\n  }\n\n  // fix scrollbar layout issues on windows/macos\n  .ReactVirtualized__Grid {\n    ", ";\n  }\n"])), function (p) {
     return p.isLoading && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      opacity: 0.5;\n    "], ["\n      opacity: 0.5;\n    "])));
-}, function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.css.scrollbarDark; });
-var SpinnerWrapper = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  pointer-events: none;\n  z-index: 100;\n"], ["\n  pointer-events: none;\n  z-index: 100;\n"])));
+}, function (p) { return p.theme.colors.gray300; }, function (_a) {
+    var checkboxColumnWidth = _a.checkboxColumnWidth;
+    return checkboxColumnWidth && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      max-width: calc(100vw - ", "px);\n    "], ["\n      max-width: calc(100vw - ", "px);\n    "])), checkboxColumnWidth);
+}, 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_4 || (templateObject_4 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n\n  -ms-overflow-style: none;\n  overflow: -moz-scrollbars-none;\n  scrollbar-width: none;\n"], ["\n  ::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n\n  -ms-overflow-style: none;\n  overflow: -moz-scrollbars-none;\n  scrollbar-width: none;\n"])));
+var 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 buildGridStyles = function (rowWidth) {
     /* using style={{ willChange: "unset" }} is important for having items
               like backdrops with position fixed inside of the table working as
@@ -59,14 +62,14 @@ 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, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "shouldBeDraggable", "isInsideImporter"]);
+    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"]);
     /*
     multiply the rowWidth by 0.95 to let the user know they can scroll
     horizontally (will display partial column on the right)
   */
     var _rowWidth = rowWidth > 1 ? rowWidth * 0.95 : rowWidth;
     var headerContainerRef = 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 }));
+    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;
         if (headerContainerRef.current && headerContainerRef.current.scrollTo) {
@@ -97,10 +100,18 @@ export var TableView = React.memo(function (_a) {
         highlightFirstRow: highlightFirstRow,
         rowHeight: rowHeight,
         getItemKey: getItemKey,
-    }); }, [data, onRowClick, columns, highlightFirstRow, rowHeight]);
-    return (_jsxs(TableViewWrapper, __assign({ "data-test-id": "table-view-wrapper", isLoading: isLoading }, (!isInsideImporter ? { h: tableHeight } : {}), props, { children: [tableHeadersUI, loadingUI, _jsx(AutoSizer, { children: function (_a) {
+        isSpreadsheetTable: isInsideImporter,
+    }); }, [
+        data,
+        onRowClick,
+        columns,
+        highlightFirstRow,
+        rowHeight,
+        isInsideImporter,
+    ]);
+    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 })))] }));
                 } })] })));
 }, areEqual);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -72,7 +72,7 @@ import { TableView as TableViewBase } from "./TableView";
 import { useReorderRows } from "./useReorderRows";
 import { addToast } from "../../common/Toast";
 var TableView = styled(TableViewBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
-    return p.withPagination && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-radius: 0px;\n      border-top-left-radius: 8px;\n      border-top-right-radius: 8px;\n    "], ["\n      border-radius: 0px;\n      border-top-left-radius: 8px;\n      border-top-right-radius: 8px;\n    "])));
+    return p.withPagination && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-radius: 0px;\n    "], ["\n      border-radius: 0px;\n    "])));
 });
 var Table = function (_a) {
     var columns = _a.columns, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.blankState, blankState = _c === void 0 ? null : _c, templateSlug = _a.templateSlug, _d = _a.shouldBeDraggable, shouldBeDraggable = _d === void 0 ? false : _d, props = __rest(_a, ["columns", "onRowClick", "blankState", "templateSlug", "shouldBeDraggable"]);