fuse-importer 0.1.4-testing → 0.1.5-testing

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

@@ -1,15 +1,44 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as S from "./FilterByErrors.styles";
-import { useSpreadsheetContext } from "../../../../Importer";
-import { formatErrors, getUniqueErrors } from "./functions";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useSpreadsheetContext } from "../../../../Importer";
+import { useFilteredDataContext } from "../../../../Importer/common/Spreadsheet/FilteredDataContextProvider";
+import { useValidationContext } from "../../../../Importer/common/Spreadsheet/ValidationContextProvider";
 import { addToast } from "../../../../common/Toast";
-import { useState } from "react";
+import { useEventManagerContext } from "../../../EventManagerContextProvider";
+import * as S from "./FilterByErrors.styles";
 export var FilterByErrors = function () {
     var _a, _b;
-    var _c = useSpreadsheetContext(), errors = _c.errors, fields = _c.fields, spreadsheetFilter = _c.spreadsheetFilter, resetSpreadsheetFilter = _c.resetSpreadsheetFilter, filterRecordsByFieldErrors = _c.filterRecordsByFieldErrors, isTransformTooltipOpened = _c.isTransformTooltipOpened;
+    var _c = useFilteredDataContext(), spreadsheetFilter = _c.spreadsheetFilter, resetSpreadsheetFilter = _c.resetSpreadsheetFilter, filterRecordsByFieldErrors = _c.filterRecordsByFieldErrors;
+    var _d = useEventManagerContext(), on = _d.on, off = _d.off, EVENTS = _d.EVENTS;
+    var _e = useSpreadsheetContext(), fields = _e.fields, isTransformTooltipOpened = _e.isTransformTooltipOpened;
+    var columnsWithErrorCounts = useValidationContext().columnsWithErrorCounts;
     var t = useTranslation("review").t;
-    var _d = useState(false), isMenuOpened = _d[0], setIsMenuOpened = _d[1];
+    var _f = useState([]), errorArray = _f[0], setErrorArray = _f[1];
+    var _g = useState(false), isMenuOpened = _g[0], setIsMenuOpened = _g[1];
+    useEffect(function () {
+        var listener = function () {
+            var getErrorArray = function () {
+                var errorArray = [];
+                var _loop_1 = function (key, value) {
+                    if (value > 0) {
+                        var field = fields.find(function (f) { return f.name === key; });
+                        errorArray.push({ label: field.label, value: field.name });
+                    }
+                };
+                for (var _i = 0, _a = Object.entries(columnsWithErrorCounts.current); _i < _a.length; _i++) {
+                    var _b = _a[_i], key = _b[0], value = _b[1];
+                    _loop_1(key, value);
+                }
+                return errorArray;
+            };
+            setErrorArray(getErrorArray());
+        };
+        on(EVENTS.UPDATE_COLUMN_ERROR_COUNT, listener);
+        return function () {
+            off(EVENTS.UPDATE_COLUMN_ERROR_COUNT, listener);
+        };
+    }, []);
     var prefix = t("table_actions.filter_by_errors.filter_by_errors");
     var search_or_select = t("table_actions.filter_by_errors.search_or_select");
     var selectedErrorToFilter = ((_a = spreadsheetFilter === null || spreadsheetFilter === void 0 ? void 0 : spreadsheetFilter.byColumn) === null || _a === void 0 ? void 0 : _a.field) || null;
@@ -23,14 +52,12 @@ export var FilterByErrors = function () {
         if (selected) {
             var label = getSelectedErrorLabel(selected);
             filterRecordsByFieldErrors(selected);
-            addToast("Showing only the rows with error on the ".concat(label, " column"), "success");
+            addToast("Showing rows with an error in the ".concat(label, " column"), "success");
         }
         else {
             resetSpreadsheetFilter();
         }
     };
-    var uniqueErrors = getUniqueErrors(fields, errors);
-    var errorArray = formatErrors(fields, uniqueErrors);
     // the average size of each character in the input (in px)
     var widthPerCharacter = 5.8;
     var amountOfCharacters = prefix.length + ((_b = getSelectedErrorLabel(selectedErrorToFilter)) === null || _b === void 0 ? void 0 : _b.length);

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

@@ -14,10 +14,16 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import { useSpreadsheetContext } from "../../../Importer";
+import { useDataSetContext } from "../../../Importer/common/Spreadsheet/DataSetContextProvider";
+import { useDuplicateDataContext } from "../../../Importer/common/Spreadsheet/DuplicateDataContextProvider";
+import { useFilteredDataContext } from "../../../Importer/common/Spreadsheet/FilteredDataContextProvider";
+import { useValidationContext } from "../../../Importer/common/Spreadsheet/ValidationContextProvider";
 import { Div } from "../../../styled";
-import { useTranslation } from "react-i18next";
+import { useEventManagerContext } from "../../EventManagerContextProvider";
 var FilterContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 6px 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", ";\n  ", "\n"], ["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 6px 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", ";\n  ", "\n"])), function (p) { return p.theme.css.body3; }, function (p) {
     return p.isSelected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n      border-radius: 4px;\n    "], ["\n      background: ", ";\n      color: ", ";\n      border-radius: 4px;\n    "])), function (p) { return p.theme.colors.black; }, function (p) { return p.theme.colors.white; });
 });
@@ -29,18 +35,60 @@ var Wrapper = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplate
 var FilteredDataCount = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 8px;\n  margin-left: -3px;\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n"], ["\n  background: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 8px;\n  margin-left: -3px;\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n"])), function (p) { return p.theme.colors.highlight01; }, function (p) { return p.theme.colors.black; });
 var Filter = function (_a) {
     var label = _a.label, count = _a.count, isSelected = _a.isSelected, onClick = _a.onClick, isDisabled = _a.isDisabled;
-    var _b = useSpreadsheetContext(), filteredInputValue = _b.filteredInputValue, filteredDataCount = _b.filteredDataCount;
+    var _b = useFilteredDataContext(), filteredInputValue = _b.filteredInputValue, filteredDataIds = _b.filteredDataIds;
     var labelToId = function (label) {
         return label.toLowerCase().replace(/\s/g, "_") + "_filter";
     };
-    return (_jsxs(Div, __assign({ disabledWhen: isDisabled, dflex: true, clickable: true, onClick: function () { return !isDisabled && onClick(); }, "data-test-id": labelToId(label) }, { children: [_jsxs(FilterContainer, __assign({ isSelected: isSelected }, { children: [label, count >= 0 && _jsxs(_Fragment, { children: ["\u00A0(", count, ")"] })] })), isSelected && filteredInputValue !== "" && (_jsx(FilteredDataCount, { children: _jsx(Div, __assign({ minw: 14, centered: true }, { children: filteredDataCount })) }))] })));
+    return (_jsxs(Div, __assign({ disabledWhen: isDisabled, dflex: true, clickable: true, onClick: function () { return !isDisabled && onClick(); }, "data-test-id": labelToId(label) }, { children: [_jsxs(FilterContainer, __assign({ isSelected: isSelected }, { children: [label, count >= 0 && _jsxs(_Fragment, { children: ["\u00A0(", count.toLocaleString(), ")"] })] })), isSelected && filteredInputValue !== "" && (_jsx(FilteredDataCount, { children: _jsx(Div, __assign({ minw: 14, centered: true }, { children: filteredDataIds.length })) }))] })));
 };
 export var RowFilters = function () {
-    var _a = useSpreadsheetContext(), spreadsheetFilter = _a.spreadsheetFilter, errors = _a.errors, filterRecordsByRowType = _a.filterRecordsByRowType, recordsWithValuesCount = _a.recordsWithValuesCount, isTransformTooltipOpened = _a.isTransformTooltipOpened, duplicateRecords = _a.duplicateRecords;
+    var _a = useFilteredDataContext(), spreadsheetFilter = _a.spreadsheetFilter, filterRecordsByRowType = _a.filterRecordsByRowType;
+    var _b = useDuplicateDataContext(), duplicateRecordIds = _b.duplicateRecordIds, calculateDuplicateRecords = _b.calculateDuplicateRecords;
+    var invalidRowsCountRef = useValidationContext().invalidRowsCountRef;
+    var isTransformTooltipOpened = useSpreadsheetContext().isTransformTooltipOpened;
+    var _c = useState(invalidRowsCountRef.current), invalidRowsCount = _c[0], setInvalidRowsCount = _c[1];
+    var _d = useDataSetContext(), dataSetLength = _d.dataSetLength, emptyRecordIds = _d.emptyRecordIds;
+    var _e = useEventManagerContext(), on = _e.on, off = _e.off, EVENTS = _e.EVENTS;
     var t = useTranslation("review").t;
     var all_rows = t("table_actions.filters_by_rows.all_rows");
     var invalid_rows = t("table_actions.filters_by_rows.invalid_rows");
     var duplicates = t("table_actions.filters_by_rows.duplicates");
-    return (_jsx(Wrapper, __assign({ isDisabled: isTransformTooltipOpened }, { children: _jsxs(Container, { children: [_jsx(Filter, { isSelected: spreadsheetFilter.byRow === "all", label: all_rows, count: recordsWithValuesCount, onClick: function () { return filterRecordsByRowType("all"); } }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "invalid", label: invalid_rows, count: Object.values(errors).length, onClick: function () { return filterRecordsByRowType("invalid"); } }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "duplicates", label: duplicates, count: duplicateRecords.count, onClick: function () { return filterRecordsByRowType("duplicates"); } })] }) })));
+    var _f = useState(0), recordsWithValuesCount = _f[0], setRecordsWithValuesCount = _f[1];
+    var calculateRecordsWithValuesCount = function () {
+        setRecordsWithValuesCount(dataSetLength.current - emptyRecordIds.current.size);
+    };
+    useEffect(function () {
+        var listener = function () {
+            setInvalidRowsCount(invalidRowsCountRef.current);
+        };
+        on(EVENTS.UPDATE_TOTAL_ERROR_COUNT, listener);
+        return function () {
+            off(EVENTS.UPDATE_TOTAL_ERROR_COUNT, listener);
+        };
+    }, []);
+    useEffect(function () {
+        calculateRecordsWithValuesCount();
+        on(EVENTS.UPDATE_TOTAL_ROW_COUNT, calculateRecordsWithValuesCount);
+        return function () {
+            off(EVENTS.UPDATE_TOTAL_ROW_COUNT, calculateRecordsWithValuesCount);
+        };
+    }, []);
+    var onDuplicatesSelected = function () {
+        calculateDuplicateRecords();
+        filterRecordsByRowType("duplicates");
+    };
+    var onAllSelected = function () {
+        if (spreadsheetFilter.byRow === "duplicates") {
+            calculateDuplicateRecords();
+        }
+        filterRecordsByRowType("all");
+    };
+    var onInvalidSelected = function () {
+        if (spreadsheetFilter.byRow === "duplicates") {
+            calculateDuplicateRecords();
+        }
+        filterRecordsByRowType("invalid");
+    };
+    return (_jsx(Wrapper, __assign({ isDisabled: isTransformTooltipOpened }, { children: _jsxs(Container, { children: [_jsx(Filter, { isSelected: spreadsheetFilter.byRow === "all", label: all_rows, count: recordsWithValuesCount, onClick: function () { return onAllSelected(); } }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "invalid", label: invalid_rows, count: invalidRowsCount, onClick: function () { return onInvalidSelected(); } }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "duplicates", label: duplicates, count: duplicateRecordIds.size, onClick: function () { return onDuplicatesSelected(); } })] }) })));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -24,6 +24,7 @@ import { textStyles } from "../../../styled/theme/textStyles";
 import { TooltipProvider } from "../../../common/TooltipProvider";
 import { useTranslation } from "react-i18next";
 import { Div } from "../../../styled";
+import { useFilteredDataContext } from "../../../Importer/common/Spreadsheet/FilteredDataContextProvider";
 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");
@@ -64,7 +65,8 @@ var SearchInput = function (_a) {
 };
 export var SearchRows = function (_a) {
     var _b = _a.testId, testId = _b === void 0 ? "ta-search-rows" : _b;
-    var _c = useSpreadsheetContext(), filteredInputValue = _c.filteredInputValue, setFilteredInputValue = _c.setFilteredInputValue, isTransformTooltipOpened = _c.isTransformTooltipOpened;
+    var _c = useFilteredDataContext(), filteredInputValue = _c.filteredInputValue, setFilteredInputValue = _c.setFilteredInputValue;
+    var isTransformTooltipOpened = useSpreadsheetContext().isTransformTooltipOpened;
     var handleChangeInputValue = function (value) {
         setFilteredInputValue(value);
     };

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

@@ -30,7 +30,8 @@ import { FilterByErrors } from "./FilterByErrors/FilterByErrors";
 import { RowFilters } from "./RowFilters";
 import { TransformedRecordsCount } from "./TransformedRecordsCount";
 import { CustomActions } from "./CustomActions";
+import ValidationProgress from "./ValidationProgress";
 export var TableActions = function (_a) {
     var _b = _a.tableActionsHeight, tableActionsHeight = _b === void 0 ? defaultTableActionsHeightPx : _b, props = __rest(_a, ["tableActionsHeight"]);
-    return (_jsxs(S.TableActionsContainer, __assign({ height: tableActionsHeight }, props, { children: [_jsxs(S.TableActionsContent, { children: [_jsx(SearchRows, {}), _jsx(RowFilters, {}), _jsx(FilterByErrors, {}), _jsxs(S.ButtonActionsContainer, { children: [_jsx(DeleteSelectedRows, {}), _jsx(ExportData, {}), _jsx(CustomActions, {})] })] }), _jsx(S.TableActionsInformations, { children: _jsx(TransformedRecordsCount, {}) })] })));
+    return (_jsxs(S.TableActionsContainer, __assign({ height: tableActionsHeight }, props, { children: [_jsxs(S.TableActionsContent, { children: [_jsx(SearchRows, {}), _jsx(RowFilters, {}), _jsx(FilterByErrors, {}), _jsxs(S.ButtonActionsContainer, { children: [_jsx(DeleteSelectedRows, {}), _jsx(ExportData, {}), _jsx(CustomActions, {})] })] }), _jsxs(S.TableActionsInformations, { children: [_jsx(ValidationProgress, {}), _jsx(TransformedRecordsCount, {})] })] })));
 };

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

@@ -22,6 +22,8 @@ import { Div, colors } from "../../../styled";
 import { CheckIcon } from "./icons";
 import { Button } from "../../../common/buttons";
 import { truncateString } from "../../../utils";
+import { useDataSetContext } from "../../../Importer/common/Spreadsheet/DataSetContextProvider";
+import { useValidationContext } from "../../../Importer/common/Spreadsheet/ValidationContextProvider";
 var formatToLocaleString = function (number) {
     return number.toLocaleString(undefined, {
         minimumFractionDigits: 0,
@@ -41,37 +43,42 @@ var Tooltip = function (_a) {
                 }) })), transformedRowData && (_jsxs(Div, { children: [_jsx(Div, __assign({ mb: 5, label1: true, style: { color: colors.gray700 } }, { children: t("table_actions.transformed_records.example") })), _jsxs(ExampleCode, { children: [_jsx(Div, __assign({ body1: true }, { children: truncateString(transformedRowData === null || transformedRowData === void 0 ? void 0 : transformedRowData.transformed, 15) })), _jsx(Div, __assign({ body1: true, style: { textDecoration: "line-through" } }, { children: truncateString(transformedRowData === null || transformedRowData === void 0 ? void 0 : transformedRowData.original, 15) }))] })] })), _jsx(StyledButton, __assign({ buttonTextSmall: true, uppercase: true, onClick: onClose }, { children: "OK" }))] })));
 };
 export var TransformedRecordsCount = function () {
-    var _a = useSpreadsheetContext(), data = _a.data, isTransformTooltipOpened = _a.isTransformTooltipOpened, setIsTransformTooltipOpened = _a.setIsTransformTooltipOpened;
+    var _a = useSpreadsheetContext(), filteredDataIds = _a.filteredDataIds, isTransformTooltipOpened = _a.isTransformTooltipOpened, setIsTransformTooltipOpened = _a.setIsTransformTooltipOpened;
+    var spreadsheetInitialized = useValidationContext().spreadsheetInitialized;
+    var getRecord = useDataSetContext().getRecord;
     var t = useTranslation("review").t;
     var tooltipWasAlreadyOpened = useRef(false);
     var transformedRecordsCount = useMemo(function () {
         var _a;
+        if (tooltipWasAlreadyOpened.current)
+            return;
         var counter = 0;
-        for (var i = 0; i < data.length; i++) {
-            var currentData = data[i];
+        for (var i = 0; i < filteredDataIds.length; i++) {
+            var currentData = getRecord(filteredDataIds[i]);
             var transformedObj = (_a = currentData === null || currentData === void 0 ? void 0 : currentData._meta) === null || _a === void 0 ? void 0 : _a.transformedRow;
             if (transformedObj) {
                 counter += Object.keys(transformedObj).length;
             }
         }
         return counter;
-    }, [data]);
+    }, [filteredDataIds]);
     useEffect(function () {
-        if (tooltipWasAlreadyOpened.current)
+        if (tooltipWasAlreadyOpened.current || !spreadsheetInitialized)
             return;
         if (transformedRecordsCount > 0 && !isTransformTooltipOpened) {
             setIsTransformTooltipOpened(true);
             tooltipWasAlreadyOpened.current = true;
         }
-    }, [transformedRecordsCount]);
+    }, [transformedRecordsCount, spreadsheetInitialized]);
     var handleCloseTooltip = function () {
         setIsTransformTooltipOpened(false);
     };
     var firstTransformedRow = useMemo(function () {
         var _a;
-        for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
-            var obj = data_1[_i];
-            var transformedRow = (_a = obj === null || obj === void 0 ? void 0 : obj._meta) === null || _a === void 0 ? void 0 : _a.transformedRow;
+        for (var _i = 0, filteredDataIds_1 = filteredDataIds; _i < filteredDataIds_1.length; _i++) {
+            var id = filteredDataIds_1[_i];
+            var record = getRecord(id);
+            var transformedRow = (_a = record === null || record === void 0 ? void 0 : record._meta) === null || _a === void 0 ? void 0 : _a.transformedRow;
             if (transformedRow && Object.keys(transformedRow).length > 0) {
                 return Object.values(transformedRow)[0];
             }

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

@@ -0,0 +1,2 @@
+declare const ValidationProgress: () => JSX.Element;
+export default ValidationProgress;

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

@@ -0,0 +1,22 @@
+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 { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useSpreadsheetContext } from "../../../Importer/common/Spreadsheet/SpreadsheetContextProvider";
+import { useValidationContext } from "../../../Importer/common/Spreadsheet/ValidationContextProvider";
+import { Div, Span } from "../../../styled/utils";
+var ValidationProgress = function () {
+    var isReadOnly = useSpreadsheetContext().isReadOnly;
+    var validationPercentage = useValidationContext().validationPercentage;
+    var showValidationProgress = !isReadOnly && validationPercentage < 100;
+    return (_jsx(_Fragment, { children: showValidationProgress ? (_jsxs(Div, __assign({ w: 250, textAlignRight: true }, { children: ["Processing Data...", _jsxs(Span, __assign({ bold: true, ml: 5 }, { children: [validationPercentage, "%"] }))] }))) : (_jsx(_Fragment, {})) }));
+};
+export default ValidationProgress;

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

@@ -12,7 +12,7 @@ type Props = Pick<TableViewProps, "columns" | "onRowClick"> & {
     rowWidth: number;
     indexI: number;
     isLast?: boolean;
-    getItemKey?: (row: any) => string;
+    getItemKey?: (id: string) => string;
     isRowSelected?: boolean;
 } & DivCSSProps;
 export declare const TableRow: ({ row, indexI, columns, isLast, onRowClick, getItemKey, rowWidth, isRowSelected, ...props }: Props) => JSX.Element;

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

@@ -34,7 +34,7 @@ export var Cell = React.memo(function (props) {
     var children = props.children, cellProps = __rest(props, ["children"]);
     return (_jsx(TableViewCellContainer, __assign({}, 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) {
+export var TableViewRow = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: white;\n  ", "\n  ", "\n\n  &:hover {\n    .shouldBeVisibleOnHover {\n      opacity: 1;\n      transition: opacity 0.25s ease;\n      visibility: visible;\n    }\n  }\n"], ["\n  background-color: white;\n  ", "\n  ", "\n\n  &:hover {\n    .shouldBeVisibleOnHover {\n      opacity: 1;\n      transition: opacity 0.25s ease;\n      visibility: visible;\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; });
 }, function (p) {
     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);
@@ -43,7 +43,7 @@ export var TableRow = function (_a) {
     var row = _a.row, indexI = _a.indexI, columns = _a.columns, isLast = _a.isLast, onRowClick = _a.onRowClick, getItemKey = _a.getItemKey, rowWidth = _a.rowWidth, _b = _a.isRowSelected, isRowSelected = _b === void 0 ? false : _b, props = __rest(_a, ["row", "indexI", "columns", "isLast", "onRowClick", "getItemKey", "rowWidth", "isRowSelected"]);
     var isHighlighted = isRowSelected;
     var key = getItemKey ? getItemKey(row) : "".concat(indexI);
-    return (_jsx(TableViewRow, __assign({ "data-test-id": "row-".concat(indexI), id: "row-id-".concat(key), dflex: true }, { isHighlighted: isHighlighted, isLast: isLast }, props, { children: columns.map(function (column, indexJ) {
+    return (_jsx(TableViewRow, __assign({ "data-test-id": "row-".concat(indexI), "data-cy": "rows", id: "row-id-".concat(key), dflex: true }, { isHighlighted: isHighlighted, isLast: isLast }, props, { children: columns.map(function (column, indexJ) {
             var Content = column.Content;
             var resolvedKey = "column-".concat(indexJ, "-row-").concat(key);
             var columnWidthPercentages = getColumnWidthsPx(columns, rowWidth);

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

@@ -20,18 +20,33 @@ import { TableRow } from "./TableRow";
 var Row = React.memo(function (_a) {
     var _b;
     var data = _a.data, rowIndex = _a.rowIndex, style = _a.style;
-    var items = data.items, rowWidth = data.rowWidth, isDraggable = data.isDraggable, onRowClick = data.onRowClick, columns = data.columns, rowHeight = data.rowHeight, getItemKey = data.getItemKey;
-    var item = items[rowIndex];
+    var items = data.items, dataRefIds = data.dataRefIds, rowWidth = data.rowWidth, isDraggable = data.isDraggable, onRowClick = data.onRowClick, columns = data.columns, rowHeight = data.rowHeight, getItemKey = data.getItemKey;
+    var item;
     var selectedRows = useSpreadsheetContext().selectedRows;
+    var rowCount = dataRefIds ? dataRefIds.ids.length : items.length;
+    var fistSelectedRowId = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows[0];
+    var dataSetfirstSelectedRowIndex;
+    if (dataRefIds) {
+        var rowId = dataRefIds.ids[rowIndex];
+        item = dataRefIds.ref.current[rowId];
+        if ((selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) > 0)
+            dataSetfirstSelectedRowIndex = dataRefIds.ids.findIndex(function (id) { return fistSelectedRowId === id; });
+    }
+    else {
+        item = items[rowIndex];
+        if ((selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) > 0)
+            dataSetfirstSelectedRowIndex = items.findIndex(function (item) { var _a; return fistSelectedRowId === ((_a = item === null || item === void 0 ? void 0 : item._meta) === null || _a === void 0 ? void 0 : _a.id); });
+    }
     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);
     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, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === items.length - 1, pRelative: true, getItemKey: getItemKey, isRowSelected: isRowSelected || false, className: rowIndex <
-                items.findIndex(function (item) { var _a; return ((_a = item === null || item === void 0 ? void 0 : item._meta) === null || _a === void 0 ? void 0 : _a.id) === (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows[0]); })
-                ? "before-selected-row"
-                : "" }) })));
+    return (_jsx(Container, __assign({}, containerProps, { children: _jsx(TableRow, { rowWidth: rowWidth, columns: columns, onRowClick: onRowClick, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === rowCount - 1, pRelative: true, getItemKey: getItemKey, isRowSelected: isRowSelected || false, className: (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) === 0
+                ? ""
+                : rowIndex < dataSetfirstSelectedRowIndex
+                    ? "before-selected-row"
+                    : "" }) })));
 }, areEqual);
 var DraggableRow = React.memo(function (_a) {
     var item = _a.item, baseStyle = _a.style, children = _a.children;

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

@@ -8,4 +8,4 @@ type TableViewWrapperProps = {
     checkboxColumnWidth?: number;
 };
 export declare const TableViewWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableViewWrapperProps, never>;
-export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, setSortBy, rowWidthScalingFactor, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, isDraggable, checkboxColumnWidth, isFiltering, ...props }: TableViewProps) => JSX.Element>;
+export declare const TableView: React.MemoExoticComponent<({ data, dataRefIds, columns, pageSize, onRowClick, sortBy, isLoading, setSortBy, rowWidthScalingFactor, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, isDraggable, checkboxColumnWidth, isFiltering, ...props }: TableViewProps) => JSX.Element>;

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

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { SortableContext, verticalListSortingStrategy, } from "@dnd-kit/sortable";
-import React, { Fragment, useCallback, useRef } from "react";
+import React, { Fragment, useRef } from "react";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeGrid as Grid, areEqual } from "react-window";
 import styled, { css } from "styled-components";
@@ -66,8 +66,9 @@ var buildGridStyles = function (rowWidthScalingFactor) {
     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.setSortBy, setSortBy = _e === void 0 ? null : _e, _f = _a.rowWidthScalingFactor, rowWidthScalingFactor = _f === void 0 ? 1 : _f, onSectionRendered = _a.onSectionRendered, _g = _a.tableHeadersHeight, tableHeadersHeight = _g === void 0 ? defaultTableHeaderHeightPx : _g, _h = _a.rowHeight, rowHeight = _h === void 0 ? defaultTableRowHeightPx : _h, _j = _a.h, h = _j === void 0 ? 500 : _j, _k = _a.onTableScroll, onTableScroll = _k === void 0 ? null : _k, _l = _a.getItemKey, getItemKey = _l === void 0 ? null : _l, _m = _a.isDraggable, isDraggable = _m === void 0 ? false : _m, checkboxColumnWidth = _a.checkboxColumnWidth, _o = _a.isFiltering, isFiltering = _o === void 0 ? false : _o, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "setSortBy", "rowWidthScalingFactor", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "isDraggable", "checkboxColumnWidth", "isFiltering"]);
+    var _b = _a.data, data = _b === void 0 ? null : _b, _c = _a.dataRefIds, dataRefIds = _c === void 0 ? null : _c, columns = _a.columns, pageSize = _a.pageSize, _d = _a.onRowClick, onRowClick = _d === void 0 ? null : _d, _e = _a.sortBy, sortBy = _e === void 0 ? { field: null, direction: null } : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.setSortBy, setSortBy = _g === void 0 ? null : _g, _h = _a.rowWidthScalingFactor, rowWidthScalingFactor = _h === void 0 ? 1 : _h, _j = _a.tableHeadersHeight, tableHeadersHeight = _j === void 0 ? defaultTableHeaderHeightPx : _j, _k = _a.rowHeight, rowHeight = _k === void 0 ? defaultTableRowHeightPx : _k, _l = _a.h, h = _l === void 0 ? 500 : _l, _m = _a.onTableScroll, onTableScroll = _m === void 0 ? null : _m, _o = _a.getItemKey, getItemKey = _o === void 0 ? null : _o, _p = _a.isDraggable, isDraggable = _p === void 0 ? false : _p, checkboxColumnWidth = _a.checkboxColumnWidth, _q = _a.isFiltering, isFiltering = _q === void 0 ? false : _q, props = __rest(_a, ["data", "dataRefIds", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "setSortBy", "rowWidthScalingFactor", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "isDraggable", "checkboxColumnWidth", "isFiltering"]);
     var headerContainerRef = useRef();
+    var rowCount = dataRefIds ? dataRefIds.ids.length : data.length;
     var onScroll = function (_a) {
         var scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
         if (headerContainerRef.current && headerContainerRef.current.scrollTo) {
@@ -82,20 +83,10 @@ export var TableView = React.memo(function (_a) {
             onTableScroll(scrollTop);
         }
     };
-    var onItemsRendered = useCallback(function (_a) {
-        var rowStartIndex = _a.overscanRowStartIndex, rowStopIndex = _a.overscanRowStopIndex;
-        if (onSectionRendered) {
-            onSectionRendered({
-                rowStartIndex: rowStartIndex,
-                rowStopIndex: rowStopIndex,
-                data: data.slice(rowStartIndex, rowStopIndex + 1),
-            });
-        }
-    }, [data, onSectionRendered]);
     var tableHeight = pageSize
         ? pageSize * rowHeight + tableHeadersHeight
         : h;
-    var canRenderTableHeaders = isFiltering ? true : data.length > 0;
+    var canRenderTableHeaders = isFiltering ? true : rowCount > 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
@@ -103,6 +94,7 @@ export var TableView = React.memo(function (_a) {
                     var gridProps = {
                         itemData: {
                             items: data,
+                            dataRefIds: dataRefIds,
                             isDraggable: isDraggable,
                             rowWidth: rowWidth,
                             onRowClick: onRowClick,
@@ -113,12 +105,11 @@ export var TableView = React.memo(function (_a) {
                         style: buildGridStyles(rowWidthScalingFactor),
                         width: autosizerWidth,
                         columnCount: 1,
-                        onItemsRendered: onItemsRendered,
                         onScroll: onScroll,
                         columnWidth: rowWidth,
                         height: autosizerHeight - tableHeadersHeight,
                         rowHeight: rowHeight,
-                        rowCount: data.length,
+                        rowCount: rowCount,
                     };
                     var GridContainer = isDraggable
                         ? SortableContext

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { DivCSSProps } from "../../../styled/utils";
+import { Record, RecordDataSet } from "../../../types";
 import { SortBy } from "../TableDataProvider";
 export type TableViewColumn = {
     header?: string;
@@ -10,13 +11,13 @@ export type TableViewColumn = {
     disableSort?: boolean;
     width?: number;
 };
-type TableSection = {
-    rowStartIndex?: number;
-    rowStopIndex?: number;
-    data?: any[];
-};
 export type TableViewProps = {
-    data: any[];
+    data?: any;
+    dataRefIds?: {
+        ids: string[];
+        ref: React.MutableRefObject<RecordDataSet>;
+    };
+    rowCount: number;
     columns: TableViewColumn[];
     sortBy?: SortBy;
     setSortBy?: React.Dispatch<React.SetStateAction<SortBy>>;
@@ -25,12 +26,10 @@ export type TableViewProps = {
     rowWidthScalingFactor?: number;
     rowHeight?: number;
     tableHeadersHeight?: number;
-    onSectionRendered?: (section: TableSection) => void;
     onTableScroll?: (scrollTop: number) => void;
     onRowClick?: (row: any) => void;
-    getItemKey?: (row: any) => string;
+    getItemKey?: (row: Record) => string;
     isDraggable?: boolean;
     checkboxColumnWidth?: number;
     isFiltering?: boolean;
 } & DivCSSProps;
-export {};

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

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

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

@@ -77,7 +77,7 @@ var TableView = styled(TableViewBase)(templateObject_4 || (templateObject_4 = __
     return p.withPagination && css(templateObject_3 || (templateObject_3 = __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.isDraggable, isDraggable = _d === void 0 ? false : _d, props = __rest(_a, ["columns", "onRowClick", "blankState", "templateSlug", "isDraggable"]);
+    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, rowHeight = _a.rowHeight, props = __rest(_a, ["columns", "onRowClick", "blankState", "templateSlug", "isDraggable", "rowHeight"]);
     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;
@@ -126,7 +126,7 @@ var Table = function (_a) {
     };
     var Container = data.length > 0 ? TableContainer : Div;
     var Wrapper = data.length > 0 ? TableWrapper : Div;
-    return (_jsx(Container, { children: _jsx(Wrapper, { children: _jsxs(Div, __assign({}, props, { children: [data.length || isLoading ? (_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 }, {
+    return (_jsx(Container, { children: _jsx(Wrapper, { children: _jsxs(Div, __assign({}, props, { children: [data.length || isLoading ? (_jsx(DndContext, __assign({ sensors: dndContextValues.sensors, collisionDetection: dndContextValues.collisionDetection, onDragEnd: dndContextValues.onDragEnd, modifiers: dndContextValues.modifiers }, { children: _jsx(TableView, __assign({ rowCount: data.length, pageSize: data.length, withPagination: withPagination, isDraggable: isDraggable, rowHeight: rowHeight }, {
                             isLoading: isLoading,
                             data: data,
                             columns: columns,

package/lib/esm/common/Toast.js

@@ -55,15 +55,16 @@ var toastTypeStyles = {
     },
 };
 var ToastWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 10px;\n  box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.1);\n  border-radius: ", "px;\n  ", ";\n"], ["\n  padding: 10px;\n  box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.1);\n  border-radius: ", "px;\n  ", ";\n"])), toastBorderRadius, function (p) { return p.theme.css.alignCenter; });
+var IconWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 10px;\n"], ["\n  margin-right: 10px;\n"])));
 var Toast = function () {
     return (_jsx(Toaster, __assign({ toastOptions: {
             style: toastContainerCss,
         } }, { children: function (t) { return (_jsx(ToastBar, __assign({ toast: t }, { children: function (_a) {
                 var message = _a.message, hotToastIcon = _a.icon;
                 var _b = toastTypeStyles[t.type] || {}, icon = _b.icon, color = _b.color, backgroundColor = _b.backgroundColor;
-                return (_jsxs(ToastWrapper, __assign({ c: color, bg: backgroundColor }, { children: [_jsx(Div, __assign({ alignCenter: true }, { children: icon || hotToastIcon })), _jsx(Div, __assign({ alignCenter: true }, { children: message })), _jsx(Div, __assign({ p: 5, clickable: true, onClick: function () { return toast.dismiss(t.id); } }, { children: closeIcon }))] })));
+                return (_jsxs(ToastWrapper, __assign({ c: color, bg: backgroundColor }, { children: [_jsx(IconWrapper, __assign({ alignCenter: true }, { children: icon || hotToastIcon })), _jsx(Div, __assign({ alignCenter: true }, { children: message })), _jsx(Div, __assign({ p: 5, clickable: true, onClick: function () { return toast.dismiss(t.id); } }, { children: closeIcon }))] })));
             } }))); } })));
 };
 export { Toast };
 var closeIcon = (_jsxs("svg", __assign({ width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M2.5 2.5L7.82258 7.82258", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M2.5 7.82251L7.82258 2.49993", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/lib/esm/common/TooltipProvider.d.ts

@@ -3,6 +3,7 @@ import React from "react";
 import { DivCSSProps } from "../styled/utils";
 type TooltipContentProps = {
     isActionable?: boolean;
+    shouldCenterText?: boolean;
 };
 export declare const TooltipContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../styled/utils").CSSProps & TooltipContentProps, never>;
 export type TooltipProps = {
@@ -14,6 +15,7 @@ export type TooltipProps = {
     tooltipMaxWidth?: number;
     tooltipMinWidth?: number;
     offset?: number[];
+    shouldCenterText?: boolean;
 } & DivCSSProps;
 export declare const TooltipProvider: React.FC<TooltipProps>;
 export {};

package/lib/esm/common/TooltipProvider.js

@@ -27,14 +27,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { usePopper } from "react-popper";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { Div } from "../styled/utils";
-export var TooltipContent = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n  padding: 10px;\n  pointer-events: none;\n  z-index: 1000;\n"], ["\n  ", ";\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n  padding: 10px;\n  pointer-events: none;\n  z-index: 1000;\n"])), function (p) { return p.theme.css.body4; }, function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.black; });
+export var TooltipContent = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n  padding: 10px;\n  pointer-events: none;\n  z-index: 1000;\n\n  ", "\n"], ["\n  ", ";\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n  padding: 10px;\n  pointer-events: none;\n  z-index: 1000;\n\n  ", "\n"])), function (p) { return p.theme.css.body4; }, function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.black; }, function (_a) {
+    var shouldCenterText = _a.shouldCenterText;
+    return shouldCenterText && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      text-align: center;\n    "], ["\n      text-align: center;\n    "])));
+});
 export var TooltipProvider = function (_a) {
-    var tooltip = _a.tooltip, children = _a.children, tooltipMaxWidth = _a.tooltipMaxWidth, tooltipMinWidth = _a.tooltipMinWidth, _b = _a.placement, placement = _b === void 0 ? "top-start" : _b, _c = _a.flip, flip = _c === void 0 ? true : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isOpen, isOpen = _e === void 0 ? false : _e, _f = _a.offset, offset = _f === void 0 ? [0, 4] : _f, props = __rest(_a, ["tooltip", "children", "tooltipMaxWidth", "tooltipMinWidth", "placement", "flip", "isDisabled", "isOpen", "offset"]);
-    var _g = useState(false), isDisplayingTooltip = _g[0], setIsDisplayingTooltip = _g[1];
-    var _h = useState(null), referenceElement = _h[0], setReferenceElement = _h[1];
-    var _j = useState(null), popperElement = _j[0], setPopperElement = _j[1];
+    var tooltip = _a.tooltip, children = _a.children, tooltipMaxWidth = _a.tooltipMaxWidth, tooltipMinWidth = _a.tooltipMinWidth, _b = _a.placement, placement = _b === void 0 ? "top-start" : _b, _c = _a.flip, flip = _c === void 0 ? true : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isOpen, isOpen = _e === void 0 ? false : _e, _f = _a.offset, offset = _f === void 0 ? [0, 4] : _f, _g = _a.shouldCenterText, shouldCenterText = _g === void 0 ? false : _g, props = __rest(_a, ["tooltip", "children", "tooltipMaxWidth", "tooltipMinWidth", "placement", "flip", "isDisabled", "isOpen", "offset", "shouldCenterText"]);
+    var _h = useState(false), isDisplayingTooltip = _h[0], setIsDisplayingTooltip = _h[1];
+    var _j = useState(null), referenceElement = _j[0], setReferenceElement = _j[1];
+    var _k = useState(null), popperElement = _k[0], setPopperElement = _k[1];
     var options = useMemo(function () { return ({
         placement: placement,
         modifiers: [
@@ -50,8 +53,8 @@ export var TooltipProvider = function (_a) {
             },
         ],
     }); }, [placement, offset]);
-    var _k = usePopper(referenceElement, popperElement, options), styles = _k.styles, attributes = _k.attributes;
+    var _l = usePopper(referenceElement, popperElement, options), styles = _l.styles, attributes = _l.attributes;
     var showTooltip = isOpen || (isDisplayingTooltip && !!tooltip);
-    return (_jsxs(Div, __assign({ dim: "100%", ref: setReferenceElement, onMouseOver: function () { return isDisabled || setIsDisplayingTooltip(true); }, onMouseOut: function () { return isDisabled || setIsDisplayingTooltip(false); } }, props, { children: [children, showTooltip && (_jsx(TooltipContent, __assign({ ref: setPopperElement, style: styles.popper, maxw: tooltipMaxWidth, minw: tooltipMinWidth }, attributes.popper, { children: tooltip })))] })));
+    return (_jsxs(Div, __assign({ dim: "100%", ref: setReferenceElement, onMouseOver: function () { return isDisabled || setIsDisplayingTooltip(true); }, onMouseOut: function () { return isDisabled || setIsDisplayingTooltip(false); } }, props, { children: [children, showTooltip && (_jsx(TooltipContent, __assign({ ref: setPopperElement, style: styles.popper, maxw: tooltipMaxWidth, minw: tooltipMinWidth, shouldCenterText: shouldCenterText }, attributes.popper, { children: tooltip })))] })));
 };
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/lib/esm/common/buttons.d.ts

@@ -15,6 +15,7 @@ export type BtnProps = {
     svgNormalStrokeColorOverride?: string;
     svgActiveStrokeColorOverride?: string;
     svgDisabledStrokeColorOverride?: string;
+    iconPlacement?: "left" | "right";
 } & CSSProps;
 export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CSSProps & {
     onClick?: () => void;
@@ -30,6 +31,7 @@ export declare const ButtonWrapper: import("styled-components").StyledComponent<
     svgNormalStrokeColorOverride?: string;
     svgActiveStrokeColorOverride?: string;
     svgDisabledStrokeColorOverride?: string;
+    iconPlacement?: "left" | "right";
 }, never>;
 export declare const ButtonElementWrapper: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, CSSProps & {
     onClick?: () => void;
@@ -45,6 +47,8 @@ export declare const ButtonElementWrapper: import("styled-components").StyledCom
     svgNormalStrokeColorOverride?: string;
     svgActiveStrokeColorOverride?: string;
     svgDisabledStrokeColorOverride?: string;
+    iconPlacement?: "left" | "right";
 }, never>;
-export declare const Button: ({ onClick, isDisabled, variant, isSmall, children, isButtonElement, ...props }: BtnProps) => JSX.Element;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CSSProps, never>;
+export declare const Button: ({ onClick, isDisabled, variant, isSmall, children, isButtonElement, iconPlacement, ...props }: BtnProps) => JSX.Element;
 export {};