fuse-importer 0.25.8 → 0.26.0

package/lib/esm/common/Table/TableView/{TableCells.js → TableRows/index.js}

@@ -12,24 +12,26 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CSS } from "@dnd-kit/utilities";
 import { useSortable } from "@dnd-kit/sortable";
-import { Div } from "../../../styled/utils";
+import { Div } from "../../../../styled/utils";
 import { TableRow } from "./TableRow";
 import React from "react";
 import { areEqual } from "react-window";
-import { useSpreadsheetContext } from "../../../Importer";
-var Cell = React.memo(function (_a) {
+import { useSpreadsheetContext } from "../../../../Importer";
+var Row = React.memo(function (_a) {
     var _b;
     var data = _a.data, rowIndex = _a.rowIndex, style = _a.style;
-    var items = data.items, onRowClick = data.onRowClick, columns = data.columns, highlightFirstRow = data.highlightFirstRow, rowHeight = data.rowHeight, getItemKey = data.getItemKey, isSpreadsheetTable = data.isSpreadsheetTable;
+    var items = data.items, rowWidth = data.rowWidth, isDraggable = data.isDraggable, onRowClick = data.onRowClick, columns = data.columns, highlightFirstRow = data.highlightFirstRow, rowHeight = data.rowHeight, getItemKey = data.getItemKey;
     var item = items[rowIndex];
     var selectedRows = useSpreadsheetContext().selectedRows;
     var isRowSelected = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.includes((_b = item === null || item === void 0 ? void 0 : item._meta) === null || _b === void 0 ? void 0 : _b.id);
-    return (_jsx(Div, __assign({ style: style }, { children: _jsx(TableRow, { columns: columns, onRowClick: onRowClick, highlightFirstRow: highlightFirstRow, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === items.length - 1, pRelative: true, getItemKey: getItemKey, isRowSelected: isRowSelected || false, isSpreadsheetTable: isSpreadsheetTable }) })));
+    var Container = isDraggable ? DraggableRow : Div;
+    var containerProps = { style: style };
+    if (isDraggable)
+        containerProps = __assign(__assign({}, containerProps), { item: item });
+    return (_jsx(Container, __assign({}, containerProps, { children: _jsx(TableRow, { rowWidth: rowWidth, columns: columns, onRowClick: onRowClick, highlightFirstRow: highlightFirstRow, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === items.length - 1, pRelative: true, getItemKey: getItemKey, isRowSelected: isRowSelected || false }) })));
 }, areEqual);
-var DraggableCell = React.memo(function (_a) {
-    var data = _a.data, rowIndex = _a.rowIndex, baseStyle = _a.style;
-    var items = data.items, onRowClick = data.onRowClick, columns = data.columns, highlightFirstRow = data.highlightFirstRow, rowHeight = data.rowHeight, getItemKey = data.getItemKey;
-    var item = items[rowIndex];
+var DraggableRow = React.memo(function (_a) {
+    var item = _a.item, baseStyle = _a.style, children = _a.children;
     var _b = useSortable({
         id: item.id,
     }), listeners = _b.listeners, setNodeRef = _b.setNodeRef, transform = _b.transform;
@@ -38,6 +40,6 @@ var DraggableCell = React.memo(function (_a) {
     };
     var dragAndDropHandler = __assign({}, listeners);
     item.dragAndDropHandler = dragAndDropHandler;
-    return (_jsx(Div, __assign({ style: __assign(__assign({}, baseStyle), dragAndDropStyles), ref: setNodeRef }, { children: _jsx(TableRow, { columns: columns, onRowClick: onRowClick, highlightFirstRow: highlightFirstRow, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === items.length - 1, pRelative: true, getItemKey: getItemKey }) })));
+    return (_jsx(Div, __assign({ style: __assign(__assign({}, baseStyle), dragAndDropStyles), ref: setNodeRef }, { children: children })));
 }, areEqual);
-export { Cell, DraggableCell };
+export { Row, DraggableRow };

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

@@ -0,0 +1,5 @@
+import { TableViewColumn } from "../types";
+export declare const defaultTableRowHeightPx = 60;
+export declare const defaultTableHeaderHeightPx = 60;
+export declare const getColumnWidthsPx: (columns: TableViewColumn[], rowWidth: number) => string[];
+export declare const TableViewCellContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../../styled/utils").CSSProps, never>;

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

@@ -0,0 +1,37 @@
+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, { css } from "styled-components";
+import { Div } from "../../../../styled/utils";
+export var defaultTableRowHeightPx = 60;
+export var defaultTableHeaderHeightPx = 60;
+export var getColumnWidthsPx = function (columns, rowWidth) {
+    var round4 = function (n) { return Number((Math.floor(n * 10000) / 10000).toFixed(4)); };
+    var totalColumnWidthCount = columns.reduce(function (sum, c) {
+        return sum + (c.width ? c.width : 1);
+    }, 0);
+    var remainingPercentage = 1;
+    var percentages = columns.map(function (column, index) {
+        if (index === columns.length - 1) {
+            // for the last column, just use the remaining percentage
+            // to avoid floating point errors
+            return round4(remainingPercentage);
+        }
+        var percentage = (column.width || 1) / totalColumnWidthCount;
+        percentage = round4(percentage);
+        remainingPercentage -= percentage;
+        remainingPercentage = round4(remainingPercentage);
+        return percentage;
+    });
+    var res = percentages.map(function (p) { return Math.floor(p * rowWidth); });
+    return res.map(function (r) { return r + "px"; });
+};
+export var TableViewCellContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  padding-left: 16px;\n  align-items: center;\n  color: ", ";\n\n  ", "\n  ", ";\n"], ["\n  display: flex;\n  padding-left: 16px;\n  align-items: center;\n  color: ", ";\n\n  ", "\n  ", ";\n"])), function (p) { return p.theme.colors.textPrim; }, function (_a) {
+    var onClick = _a.onClick;
+    return onClick && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      :hover {\n        cursor: pointer;\n      }\n    "], ["\n      :hover {\n        cursor: pointer;\n      }\n    "])));
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.css.body3;
+});
+var templateObject_1, templateObject_2;

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

@@ -1,46 +1,11 @@
 import React from "react";
-import { DivCSSProps } from "../../../styled/utils";
-import { SortBy } from "../TableDataProvider";
-export * from "./common";
+import { TableViewProps } from "./types";
 export * from "./TableHeaders";
-export * from "./TableRow";
+export * from "./TableRows/TableRow";
+export * from "./common";
 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 = {
-    header?: string;
-    Header?: (p: any) => JSX.Element;
-    Content?: (p: any) => JSX.Element;
-    dataAccessor?: string;
-    preventRowClick?: boolean;
-    disableSort?: boolean;
-    width?: number;
-};
-type TableSection = {
-    rowStartIndex?: number;
-    rowStopIndex?: number;
-    data?: any[];
-};
-export type TableViewProps = {
-    data: any[];
-    columns: TableViewColumn[];
-    sortBy?: SortBy;
-    setSortBy?: React.Dispatch<React.SetStateAction<SortBy>>;
-    isLoading?: boolean;
-    pageSize?: number;
-    highlightFirstRow?: boolean;
-    rowWidth?: number;
-    rowHeight?: number;
-    tableHeadersHeight?: number;
-    onSectionRendered?: (section: TableSection) => void;
-    onTableScroll?: (scrollTop: number) => void;
-    onRowClick?: (row: any) => void;
-    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, checkboxColumnWidth, ...props }: TableViewProps) => JSX.Element>;
+export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidthScalingFactor, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, isDraggable, checkboxColumnWidth, isFiltering, ...props }: TableViewProps) => JSX.Element>;

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

@@ -25,57 +25,55 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useRef, useMemo, useCallback } from "react";
-import { FixedSizeGrid as Grid, areEqual } from "react-window";
+import { SortableContext, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import React, { Fragment, useCallback, useRef } from "react";
 import AutoSizer from "react-virtualized-auto-sizer";
+import { FixedSizeGrid as Grid, areEqual } from "react-window";
 import styled, { css } from "styled-components";
-import { SortableContext, verticalListSortingStrategy, } from "@dnd-kit/sortable";
 import { Div } from "../../../styled/utils";
 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";
+import { Row } from "./TableRows";
+import { defaultTableHeaderHeightPx, defaultTableRowHeightPx } from "./common";
 export * from "./TableHeaders";
-export * from "./TableRow";
-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) {
+export * from "./TableRows/TableRow";
+export * from "./common";
+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"], ["\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"])), 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 (_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_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) {
+var VirtualizedGrid = styled(Grid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (p) { return p.theme.css.scrollbarDark; });
+var loadingUI = (_jsx(SpinnerWrapper, __assign({ pRelative: true }, { children: _jsx(Div, __assign({ w100: true, h100: true, centered: true, h: 400, pAbsolute: true }, { children: _jsx(Spinner, {}) })) })));
+var buildGridStyles = function (rowWidthScalingFactor) {
     /* using style={{ willChange: "unset" }} is important for having items
               like backdrops with position fixed inside of the table working as
               expected. Required for dropdowns in cells */
     var gridStyles = {
         outline: "none",
         willChange: "unset",
+        boxSizing: "border-box",
     };
-    if (rowWidth === 1)
+    if (rowWidthScalingFactor === 1)
         gridStyles = __assign(__assign({}, gridStyles), { overflowX: "hidden", overflowY: "auto" });
-    else if (rowWidth > 1)
-        gridStyles = __assign(__assign({}, gridStyles), { overflowX: "hidden" });
+    else if (rowWidthScalingFactor > 1)
+        gridStyles = __assign(__assign({}, gridStyles), { overflowX: "auto" });
     return gridStyles;
 };
 export var TableView = React.memo(function (_a) {
-    var data = _a.data, columns = _a.columns, pageSize = _a.pageSize, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.sortBy, sortBy = _c === void 0 ? { field: null, direction: null } : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.highlightFirstRow, highlightFirstRow = _e === void 0 ? false : _e, _f = _a.setSortBy, setSortBy = _f === void 0 ? null : _f, _g = _a.rowWidth, rowWidth = _g === void 0 ? 1 : _g, onSectionRendered = _a.onSectionRendered, _h = _a.tableHeadersHeight, tableHeadersHeight = _h === void 0 ? defaultTableHeaderHeightPx : _h, _j = _a.rowHeight, rowHeight = _j === void 0 ? defaultTableRowHeightPx : _j, _k = _a.h, h = _k === void 0 ? 500 : _k, _l = _a.onTableScroll, onTableScroll = _l === void 0 ? null : _l, _m = _a.getItemKey, getItemKey = _m === void 0 ? null : _m, _o = _a.shouldBeDraggable, shouldBeDraggable = _o === void 0 ? false : _o, _p = _a.isInsideImporter, isInsideImporter = _p === void 0 ? false : _p, checkboxColumnWidth = _a.checkboxColumnWidth, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "shouldBeDraggable", "isInsideImporter", "checkboxColumnWidth"]);
-    /*
-    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 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.rowWidthScalingFactor, rowWidthScalingFactor = _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.isDraggable, isDraggable = _o === void 0 ? false : _o, checkboxColumnWidth = _a.checkboxColumnWidth, _p = _a.isFiltering, isFiltering = _p === void 0 ? false : _p, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidthScalingFactor", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "isDraggable", "checkboxColumnWidth", "isFiltering"]);
     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;
         if (headerContainerRef.current && headerContainerRef.current.scrollTo) {
-            headerContainerRef.current.scrollTo({ left: scrollLeft });
+            requestAnimationFrame(function () {
+                headerContainerRef.current.scrollTo({
+                    left: scrollLeft,
+                });
+            });
         }
         if (onTableScroll) {
             onTableScroll(scrollTop);
@@ -91,29 +89,42 @@ export var TableView = React.memo(function (_a) {
             });
         }
     }, [data, onSectionRendered]);
-    var loadingUI = isLoading && (_jsx(SpinnerWrapper, __assign({ pRelative: true }, { children: _jsx(Div, __assign({ w100: true, h100: true, centered: true, h: 400, pAbsolute: true }, { children: _jsx(Spinner, {}) })) })));
     var tableHeight = pageSize
         ? pageSize * rowHeight + tableHeadersHeight
         : h;
-    var itemData = useMemo(function () { return ({
-        items: data,
-        onRowClick: onRowClick,
-        columns: columns,
-        highlightFirstRow: highlightFirstRow,
-        rowHeight: rowHeight,
-        getItemKey: getItemKey,
-        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, ref: listRef, outerElementType: isInsideImporter ? CustomScrollbarsVirtualList : undefined }, { children: Cell })))] }));
+    var canRenderTableHeaders = isFiltering ? true : data.length > 0;
+    return (_jsxs(TableViewWrapper, __assign({ "data-test-id": "table-view-wrapper", isLoading: isLoading, checkboxColumnWidth: checkboxColumnWidth, h: tableHeight }, props, { children: [isLoading && loadingUI, _jsx(AutoSizer, { children: function (_a) {
+                    var autosizerWidth = _a.width, autosizerHeight = _a.height;
+                    // using Math.floor to avoid floating point errors with the grid and table cell widths
+                    var rowWidth = Math.floor(autosizerWidth * rowWidthScalingFactor);
+                    var gridProps = {
+                        itemData: {
+                            items: data,
+                            isDraggable: isDraggable,
+                            rowWidth: rowWidth,
+                            onRowClick: onRowClick,
+                            columns: columns,
+                            highlightFirstRow: highlightFirstRow,
+                            rowHeight: rowHeight,
+                            getItemKey: getItemKey,
+                        },
+                        style: buildGridStyles(rowWidthScalingFactor),
+                        width: autosizerWidth,
+                        columnCount: 1,
+                        onItemsRendered: onItemsRendered,
+                        onScroll: onScroll,
+                        columnWidth: rowWidth,
+                        height: autosizerHeight - tableHeadersHeight,
+                        rowHeight: rowHeight,
+                        rowCount: data.length,
+                    };
+                    var GridContainer = isDraggable
+                        ? SortableContext
+                        : Fragment;
+                    var gridContainerProps = isDraggable
+                        ? { items: data, strategy: verticalListSortingStrategy }
+                        : {};
+                    return (_jsxs(_Fragment, { children: [canRenderTableHeaders && (_jsx(TableHeaders, { rowWidth: rowWidth, containerWidth: autosizerWidth, id: tableHeaderId, containerRef: headerContainerRef, height: tableHeadersHeight, rowHeight: rowHeight, scrollLeft: 0, columns: columns, sortBy: sortBy, setSortBy: setSortBy })), _jsx(GridContainer, __assign({}, gridContainerProps, { children: _jsx(VirtualizedGrid, __assign({}, gridProps, { children: Row })) }))] }));
                 } })] })));
 }, areEqual);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { DivCSSProps } from "../../../styled/utils";
+import { SortBy } from "../TableDataProvider";
+export type TableViewColumn = {
+    header?: string;
+    Header?: (p: any) => JSX.Element;
+    Content?: (p: any) => JSX.Element;
+    dataAccessor?: string;
+    preventRowClick?: boolean;
+    disableSort?: boolean;
+    width?: number;
+};
+type TableSection = {
+    rowStartIndex?: number;
+    rowStopIndex?: number;
+    data?: any[];
+};
+export type TableViewProps = {
+    data: any[];
+    columns: TableViewColumn[];
+    sortBy?: SortBy;
+    setSortBy?: React.Dispatch<React.SetStateAction<SortBy>>;
+    isLoading?: boolean;
+    pageSize?: number;
+    highlightFirstRow?: boolean;
+    rowWidthScalingFactor?: number;
+    rowHeight?: number;
+    tableHeadersHeight?: number;
+    onSectionRendered?: (section: TableSection) => void;
+    onTableScroll?: (scrollTop: number) => void;
+    onRowClick?: (row: any) => void;
+    getItemKey?: (row: any) => string;
+    isDraggable?: boolean;
+    checkboxColumnWidth?: number;
+    isFiltering?: boolean;
+} & DivCSSProps;
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -4,8 +4,8 @@ type Props = {
     columns: any[];
     onRowClick?: (row: any) => void;
     templateSlug?: string;
-    shouldBeDraggable?: boolean;
+    isDraggable?: boolean;
 } & DivCSSProps;
-declare const Table: ({ columns, onRowClick, blankState, templateSlug, shouldBeDraggable, ...props }: Props) => JSX.Element;
+declare const Table: ({ columns, onRowClick, blankState, templateSlug, isDraggable, ...props }: Props) => JSX.Element;
 export { Table };
 export * from "./TableDataProvider";

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

@@ -75,7 +75,7 @@ var TableView = styled(TableViewBase)(templateObject_2 || (templateObject_2 = __
     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"]);
+    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.isDraggable, isDraggable = _d === void 0 ? false : _d, props = __rest(_a, ["columns", "onRowClick", "blankState", "templateSlug", "isDraggable"]);
     var _e = useTableContext(), data = _e.data, isLoading = _e.isLoading, sortBy = _e.sortBy, setSortBy = _e.setSortBy, totalPages = _e.totalPages;
     var reorderRows = useReorderRows(templateSlug).reorderRows;
     var withPagination = data.length > 0 && totalPages > 1;
@@ -115,14 +115,14 @@ var Table = function (_a) {
         });
     }); };
     var dndContextValues = {
-        sensors: shouldBeDraggable ? sensors : undefined,
-        collisionDetection: shouldBeDraggable ? closestCenter : undefined,
-        onDragEnd: shouldBeDraggable ? handleDragEnd : undefined,
-        modifiers: shouldBeDraggable
+        sensors: isDraggable ? sensors : undefined,
+        collisionDetection: isDraggable ? closestCenter : undefined,
+        onDragEnd: isDraggable ? handleDragEnd : undefined,
+        modifiers: isDraggable
             ? [restrictToVerticalAxis, restrictToWindowEdges]
             : undefined,
     };
-    return (_jsxs(Div, __assign({}, props, { children: [data.length ? (_jsx(DndContext, __assign({ sensors: dndContextValues.sensors, collisionDetection: dndContextValues.collisionDetection, onDragEnd: dndContextValues.onDragEnd, modifiers: dndContextValues.modifiers }, { children: _jsx(TableView, __assign({ pageSize: data.length, withPagination: withPagination, shouldBeDraggable: shouldBeDraggable }, {
+    return (_jsxs(Div, __assign({}, props, { children: [data.length ? (_jsx(DndContext, __assign({ sensors: dndContextValues.sensors, collisionDetection: dndContextValues.collisionDetection, onDragEnd: dndContextValues.onDragEnd, modifiers: dndContextValues.modifiers }, { children: _jsx(TableView, __assign({ pageSize: data.length, withPagination: withPagination, isDraggable: isDraggable }, {
                     isLoading: isLoading,
                     data: data,
                     columns: columns,

package/lib/esm/common/inputs/Autocomplete.d.ts

@@ -16,6 +16,7 @@ export type Props = {
     onToggle?: (isOpen: boolean) => void;
     placement?: Placement;
     icon?: JSX.Element;
+    prefix?: string;
 } & DivCSSProps;
-declare const Autocomplete: ({ label, isDisabled, isInputDisabled, placeholder, value, icon, onChange, placement, options, onToggle, id, labelTooltip, ...props }: Props) => JSX.Element;
+declare const Autocomplete: ({ label, isDisabled, isInputDisabled, placeholder, value, icon, onChange, placement, options, onToggle, id, labelTooltip, prefix, ...props }: Props) => JSX.Element;
 export { Autocomplete };

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

@@ -47,7 +47,7 @@ var ClickableArea = styled(Div)(function (_a) {
     return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), isInputDisabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      :hover {\n        cursor: pointer;\n        opacity: 0.9;\n      }\n    "], ["\n      :hover {\n        cursor: pointer;\n        opacity: 0.9;\n      }\n    "]))));
 });
 var Autocomplete = function (_a) {
-    var _b = _a.label, label = _b === void 0 ? null : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isInputDisabled, isInputDisabled = _d === void 0 ? false : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "general:autocomplete.placeholder" : _e, value = _a.value, icon = _a.icon, onChange = _a.onChange, placement = _a.placement, options = _a.options, onToggle = _a.onToggle, id = _a.id, labelTooltip = _a.labelTooltip, props = __rest(_a, ["label", "isDisabled", "isInputDisabled", "placeholder", "value", "icon", "onChange", "placement", "options", "onToggle", "id", "labelTooltip"]);
+    var _b = _a.label, label = _b === void 0 ? null : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isInputDisabled, isInputDisabled = _d === void 0 ? false : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "general:autocomplete.placeholder" : _e, value = _a.value, icon = _a.icon, onChange = _a.onChange, placement = _a.placement, options = _a.options, onToggle = _a.onToggle, id = _a.id, labelTooltip = _a.labelTooltip, prefix = _a.prefix, props = __rest(_a, ["label", "isDisabled", "isInputDisabled", "placeholder", "value", "icon", "onChange", "placement", "options", "onToggle", "id", "labelTooltip", "prefix"]);
     var _f = useState(false), updatedText = _f[0], setUpdatedText = _f[1];
     var selectedLabel = useMemo(function () { var _a; return ((_a = options === null || options === void 0 ? void 0 : options.find(function (o) { return (o === null || o === void 0 ? void 0 : o.value) === value; })) === null || _a === void 0 ? void 0 : _a.label) || ""; }, [value]);
     var _g = useState(selectedLabel), text = _g[0], setText = _g[1];
@@ -92,7 +92,7 @@ var Autocomplete = function (_a) {
                             setText(selectedLabel);
                             setIsMenuOpen(false);
                         }
-                    }, label: label, isDisabled: isDisabled || isInputDisabled, placeholder: t(placeholder), value: text, onChange: function (v) { return setText(v); }, icon: isDisabled ? null : inputIconUI, labelTooltip: labelTooltip }) })), !isDisabled && filteredOptions.length > 0 && (_jsx(SelectMenu, __assign({ referenceElement: referenceElement, placement: placement, isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); } }, { children: filteredOptions.map(function (o, index) { return (_jsx(Div, { children: _jsx(MenuItem, __assign({ id: id ? "".concat(id, "-option-").concat(o.label) : null, isSelected: value === (o === null || o === void 0 ? void 0 : o.value), onClick: function () { return onSelect(o === null || o === void 0 ? void 0 : o.value); } }, { children: o.label })) }, index)); }) })))] })));
+                    }, label: label, isDisabled: isDisabled || isInputDisabled, placeholder: t(placeholder), value: prefix ? "".concat(prefix).concat(text) : text, onChange: function (v) { return setText(v); }, icon: isDisabled ? null : inputIconUI, labelTooltip: labelTooltip }) })), !isDisabled && filteredOptions.length > 0 && (_jsx(SelectMenu, __assign({ referenceElement: referenceElement, placement: placement, isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); } }, { children: filteredOptions.map(function (o, index) { return (_jsx(Div, { children: _jsx(MenuItem, __assign({ id: id ? "".concat(id, "-option-").concat(o.label) : null, isSelected: value === (o === null || o === void 0 ? void 0 : o.value), onClick: function () { return onSelect(o === null || o === void 0 ? void 0 : o.value); } }, { children: o.label })) }, index)); }) })))] })));
 };
 var chevronDownIcon = (_jsx("svg", __assign({ width: "16", height: "9", viewBox: "0 0 16 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M14.9263 1L7.9631 7.96317L0.999928 1", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
 var clearIcon = (_jsxs("svg", __assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M4 4L12.5161 12.5161", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M4 12.5161L12.5161 3.99998", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));

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

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

package/lib/esm/index.d.ts

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

package/lib/esm/index.js

@@ -45,16 +45,31 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import ReactDOM from "react-dom";
 import { Importer } from "./Importer";
 import { fuseImporterId } from "./common";
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import * as locales from "./locales";
+import { StyleSheetManager } from "styled-components";
+import { fontsURL } from "./styled/fontsURL";
+var addLinkToHead = function (document, head, href, rel, crossOrigin) {
+    if (crossOrigin === void 0) { crossOrigin = ""; }
+    var link = document.createElement("link");
+    link.href = href;
+    link.rel = rel;
+    link.crossOrigin = crossOrigin;
+    head.appendChild(link);
+};
 var FuseImporter = /** @class */ (function () {
     function FuseImporter(apiToken, templateSlug, options) {
         if (options === void 0) { options = {}; }
+        this.cleanupIframe = null;
+        this.windowScrollPosition = {
+            x: 0,
+            y: 0,
+        };
         this.apiToken = apiToken;
         this.templateSlug = templateSlug;
         this.options = __assign({ env: "production", zIndex: 1000, batchValidationDelayMs: 500 }, options);
@@ -62,39 +77,93 @@ var FuseImporter = /** @class */ (function () {
     FuseImporter.prototype.close = function () {
         var _a;
         (_a = this.onClose) === null || _a === void 0 ? void 0 : _a.call(this);
-        var importerRoot = document.getElementById(fuseImporterId);
-        ReactDOM.unmountComponentAtNode(importerRoot);
-        document.body.removeChild(importerRoot);
+        if (this.cleanupIframe) {
+            this.cleanupIframe();
+            this.cleanupIframe = null;
+        }
+        var iframe = document.getElementById(fuseImporterId);
+        document.body.removeChild(iframe);
+        // allow the scroll when the importer is closed
+        document.body.style.overflow = "auto";
+        window.scrollTo(this.windowScrollPosition.x, this.windowScrollPosition.y);
     };
     FuseImporter.prototype.show = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var div;
-            var _this = this;
+            var isRunningTest, iframe, importerComponent;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0: return [4 /*yield*/, this.configureI18n()];
                     case 1:
                         _a.sent();
-                        div = document.createElement("div");
-                        div.setAttribute("id", fuseImporterId);
-                        document.body.appendChild(div);
-                        ReactDOM.render(React.createElement(Importer, {
-                            apiToken: this.apiToken,
-                            templateSlug: this.templateSlug,
-                            options: this.options,
-                            formatRecord: this.formatRecord,
-                            onValidateRecord: this.onValidateRecord,
-                            onSubmit: this.onSubmit,
-                            onClose: function () {
-                                _this.close();
-                            },
-                        }), document.getElementById(fuseImporterId));
-                        i18n.reloadResources();
+                        isRunningTest = typeof (window === null || window === void 0 ? void 0 : window.Cypress) !== "undefined";
+                        if (isRunningTest) {
+                            this.renderImporterComponent();
+                            i18n.reloadResources();
+                            return [2 /*return*/];
+                        }
+                        iframe = this.createIframe();
+                        importerComponent = this.createImporterComponent();
+                        // saves the position of the page before the importer was opened
+                        this.windowScrollPosition = {
+                            x: window.scrollX,
+                            y: window.scrollY,
+                        };
+                        // block the scroll when opening the importer
+                        window.scrollTo(0, 0);
+                        document.body.style.overflow = "hidden";
+                        this.configureIframe(iframe, importerComponent);
                         return [2 /*return*/];
                 }
             });
         });
     };
+    FuseImporter.prototype.renderImporterComponent = function () {
+        var importerDiv = this.createDivComponent();
+        var importerComponent = this.createImporterComponent();
+        ReactDOM.render(importerComponent, importerDiv);
+    };
+    FuseImporter.prototype.createDivComponent = function () {
+        var div = document.createElement("div");
+        div.setAttribute("id", fuseImporterId);
+        document.body.appendChild(div);
+        return div;
+    };
+    FuseImporter.prototype.createIframe = function () {
+        var iframe = document.createElement("iframe");
+        iframe.setAttribute("id", fuseImporterId);
+        iframe.style.cssText =
+            "border: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000;";
+        document.body.appendChild(iframe);
+        return iframe;
+    };
+    FuseImporter.prototype.createImporterComponent = function () {
+        var _this = this;
+        return (_jsx(Importer, { apiToken: this.apiToken, templateSlug: this.templateSlug, options: this.options, formatRecord: this.formatRecord, onValidateRecord: this.onValidateRecord, onSubmit: this.onSubmit, onClose: function () {
+                _this.close();
+            } }));
+    };
+    FuseImporter.prototype.configureIframe = function (iframe, importerComponent) {
+        var onLoadCallback = function () {
+            var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+            iframeDocument.body.style.margin = "0";
+            iframeDocument.body.style.padding = "0";
+            var head = iframeDocument.getElementsByTagName("head")[0];
+            for (var _i = 0, fontsURL_1 = fontsURL; _i < fontsURL_1.length; _i++) {
+                var link = fontsURL_1[_i];
+                addLinkToHead(iframeDocument, head, link.href, link.rel, link.crossOrigin);
+            }
+            ReactDOM.render(_jsx(StyleSheetManager, __assign({ target: iframeDocument.head }, { children: importerComponent })), iframeDocument.body);
+            i18n.reloadResources();
+            iframe.removeEventListener("load", onLoadCallback);
+        };
+        iframe.addEventListener("load", onLoadCallback);
+        iframe.src = "about:blank";
+        var cleanup = function () {
+            iframe.removeEventListener("load", onLoadCallback);
+        };
+        this.cleanupIframe = cleanup;
+        return cleanup;
+    };
     FuseImporter.prototype.configureI18n = function () {
         return __awaiter(this, void 0, void 0, function () {
             var browserLanguage, language;