fuse-importer 0.25.9 → 0.26.0

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

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

@@ -11,6 +11,7 @@ declare class FuseImporter {
     onValidateRecord: OnValidateRecord;
     onSubmit: OnSubmit;
     onClose: () => void;
+    private windowScrollPosition;
     close(): void;
     show(): Promise<void>;
     private renderImporterComponent;

package/lib/esm/index.js

@@ -66,6 +66,10 @@ 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);
@@ -79,6 +83,9 @@ var FuseImporter = /** @class */ (function () {
         }
         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 () {
@@ -96,6 +103,14 @@ var FuseImporter = /** @class */ (function () {
                         }
                         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*/];
                 }

package/lib/esm/locales/de.d.ts

@@ -54,6 +54,27 @@ declare const _default: {
         manual_importer_title: string;
         export: string;
         description: string;
+        table_actions: {
+            search_rows: {
+                tooltip: string;
+                placeholder: string;
+            };
+            filter_by_errors: {
+                search_or_select: string;
+                filter_by_errors: string;
+            };
+            delete_rows: {
+                delete_toast: string;
+                confirmation_modal: string;
+                modal_title: string;
+                yes_delete: string;
+                select_rows: string;
+                delete_row: string;
+            };
+            export_your_data: {
+                tooltip: string;
+            };
+        };
     };
     general: {
         autocomplete: {

package/lib/esm/locales/de.js

@@ -55,6 +55,27 @@ export default {
         manual_importer_title: "Daten Eingeben und Senden",
         export: "Exportieren",
         description: "Einige Zellen im Dokument können Fehler im Format oder fehlende Informationen aufweisen. Bitte überprüfen Sie diese, um fortzufahren.",
+        table_actions: {
+            search_rows: {
+                tooltip: "Etwas suchen",
+                placeholder: "Etwas suchen...",
+            },
+            filter_by_errors: {
+                search_or_select: "Suchen oder auswählen",
+                filter_by_errors: "Nach Fehlern filtern",
+            },
+            delete_rows: {
+                delete_toast: "Du hast alle Zeilen gelöscht. Du wirst zum Upload-Schritt weitergeleitet.",
+                confirmation_modal: "Möchtest du wirklich {{length}} Zeile löschen",
+                modal_title: "Ausgewählte Zeile löschen",
+                yes_delete: "Ja, löschen",
+                select_rows: "Wählen Sie Zeilen zum Löschen aus",
+                delete_row: "Zeile löschen",
+            },
+            export_your_data: {
+                tooltip: "Exportiere deine Daten",
+            },
+        },
     },
     general: {
         autocomplete: {

package/lib/esm/locales/en.d.ts

@@ -54,6 +54,27 @@ declare const _default: {
         manual_importer_title: string;
         export: string;
         description: string;
+        table_actions: {
+            search_rows: {
+                tooltip: string;
+                placeholder: string;
+            };
+            filter_by_errors: {
+                search_or_select: string;
+                filter_by_errors: string;
+            };
+            delete_rows: {
+                delete_toast: string;
+                confirmation_modal: string;
+                modal_title: string;
+                yes_delete: string;
+                select_rows: string;
+                delete_row: string;
+            };
+            export_your_data: {
+                tooltip: string;
+            };
+        };
     };
     general: {
         autocomplete: {

package/lib/esm/locales/en.js

@@ -55,6 +55,27 @@ export default {
         manual_importer_title: "Enter Data & Submit",
         export: "Export",
         description: "Some cells in the document might have errors in format or missing information. Please review these to continue.",
+        table_actions: {
+            search_rows: {
+                tooltip: "Search something",
+                placeholder: "Search something...",
+            },
+            filter_by_errors: {
+                search_or_select: "Search or select",
+                filter_by_errors: "Filter by errors",
+            },
+            delete_rows: {
+                delete_toast: "You have deleted all the rows. You will be redirect to the upload step.",
+                confirmation_modal: "Are you sure you want to delete {{length}} row",
+                modal_title: "Delete Selected Row",
+                yes_delete: "Yes, delete",
+                select_rows: "Select rows to delete",
+                delete_row: "Delete Row",
+            },
+            export_your_data: {
+                tooltip: "Export your data",
+            },
+        },
     },
     general: {
         autocomplete: {

package/lib/esm/locales/es.d.ts

@@ -54,6 +54,27 @@ declare const _default: {
         manual_importer_title: string;
         export: string;
         description: string;
+        table_actions: {
+            search_rows: {
+                tooltip: string;
+                placeholder: string;
+            };
+            filter_by_errors: {
+                search_or_select: string;
+                filter_by_errors: string;
+            };
+            delete_rows: {
+                delete_toast: string;
+                confirmation_modal: string;
+                modal_title: string;
+                yes_delete: string;
+                select_rows: string;
+                delete_row: string;
+            };
+            export_your_data: {
+                tooltip: string;
+            };
+        };
     };
     general: {
         autocomplete: {

package/lib/esm/locales/es.js

@@ -55,6 +55,27 @@ export default {
         manual_importer_title: "Ingresar Datos y Enviar",
         export: "Exportar",
         description: "Algunas celdas en el documento pueden tener errores en el formato o información faltante. Por favor revise esto para continuar.",
+        table_actions: {
+            search_rows: {
+                tooltip: "Buscar algo",
+                placeholder: "Buscar algo...",
+            },
+            filter_by_errors: {
+                search_or_select: "Buscar o seleccionar",
+                filter_by_errors: "Filtrar por errores",
+            },
+            delete_rows: {
+                delete_toast: "Has eliminado todas las filas. Serás redirigido al paso de carga.",
+                confirmation_modal: "¿Seguro que quieres eliminar {{length}} fila",
+                modal_title: "Eliminar la fila seleccionada",
+                yes_delete: "Sí, eliminar",
+                select_rows: "Seleccione las filas a eliminar",
+                delete_row: "Eliminar fila",
+            },
+            export_your_data: {
+                tooltip: "Exporta tus datos",
+            },
+        },
     },
     general: {
         autocomplete: {

package/lib/esm/locales/fr.d.ts

@@ -54,6 +54,27 @@ declare const _default: {
         manual_importer_title: string;
         export: string;
         description: string;
+        table_actions: {
+            search_rows: {
+                tooltip: string;
+                placeholder: string;
+            };
+            filter_by_errors: {
+                search_or_select: string;
+                filter_by_errors: string;
+            };
+            delete_rows: {
+                delete_toast: string;
+                confirmation_modal: string;
+                modal_title: string;
+                yes_delete: string;
+                select_rows: string;
+                delete_row: string;
+            };
+            export_your_data: {
+                tooltip: string;
+            };
+        };
     };
     general: {
         autocomplete: {

package/lib/esm/locales/fr.js

@@ -55,6 +55,27 @@ export default {
         manual_importer_title: "Saisir Des Données et Envoyer",
         export: "Exporter",
         description: "Certaines cellules du document peuvent avoir des erreurs de format ou des informations manquantes. Veuillez les examiner pour continuer.",
+        table_actions: {
+            search_rows: {
+                tooltip: "Rechercher quelque chose",
+                placeholder: "Rechercher quelque chose...",
+            },
+            filter_by_errors: {
+                search_or_select: "Rechercher ou sélectionner",
+                filter_by_errors: "Filtrer par erreurs",
+            },
+            delete_rows: {
+                delete_toast: "Vous avez supprimé toutes les lignes. Vous serez redirigé vers l'étape de téléchargement.",
+                confirmation_modal: "Voulez-vous vraiment supprimer {{length}} ligne",
+                modal_title: "Supprimer la ligne sélectionnée",
+                yes_delete: "Oui, supprimer",
+                select_rows: "Sélectionnez les lignes à supprimer",
+                delete_row: "Supprimer la ligne",
+            },
+            export_your_data: {
+                tooltip: "Exporter vos données",
+            },
+        },
     },
     general: {
         autocomplete: {

package/lib/esm/types.d.ts

@@ -36,6 +36,7 @@ export type Meta = {
     isInvalid?: boolean;
     hasWarning?: boolean;
     touched?: boolean;
+    uploadedRow?: any;
     backendErrors?: ValidationErrors;
 };
 export type Record = {