fuse-importer 0.25.9 → 0.26.1

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

@@ -25,24 +25,22 @@ 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 { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import { Div } from "../../../styled/utils";
-import { chevronDown as chevronDownIcon } from "../icons";
 import { SortDirection } from "../TableDataProvider";
-import { columnWidthPercentage, defaultTableHeaderHeightPx, TableViewCellContainer, } from "./common";
-import { useTranslation } from "react-i18next";
-export var TableViewHeader = styled(TableViewCellContainer)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\n  ", "\n"], ["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\n  ", "\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.body2; }, function (p) { return p.theme.colors.text; }, function (p) {
-    return p.isLast && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-right: solid 1px transparent !important;\n    "], ["\n      border-right: solid 1px transparent !important;\n    "])));
-});
-export var SortIndicator = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 10px;\n  margin-top: -4px;\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"], ["\n  margin-left: 10px;\n  margin-top: -4px;\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (p) {
-    return p.direction === SortDirection.asc && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      margin-top: 3px;\n      transform: rotate(180deg);\n    "], ["\n      margin-top: 3px;\n      transform: rotate(180deg);\n    "])));
+import { chevronDown as chevronDownIcon } from "../icons";
+import { TableViewCellContainer, defaultTableHeaderHeightPx, getColumnWidthsPx, } from "./common";
+export var TableViewHeader = styled(TableViewCellContainer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\n"], ["\n  border-bottom: none;\n  box-shadow: inset 0 -1px 0 ", ";\n  background-color: ", ";\n  ", ";\n  color: ", ";\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.body2; }, function (p) { return p.theme.colors.text; });
+export var SortIndicator = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: 10px;\n  margin-top: -4px;\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"], ["\n  margin-left: 10px;\n  margin-top: -4px;\n  ", "\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (p) {
+    return p.direction === SortDirection.asc && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      margin-top: 3px;\n      transform: rotate(180deg);\n    "], ["\n      margin-top: 3px;\n      transform: rotate(180deg);\n    "])));
 }, function (p) { return p.theme.colors.gray300; });
-export var TableHeadersContainer = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
-export var TableHeadersContent = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
+export var TableHeadersContainer = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow-x: hidden;\n  background-color: ", ";\n"], ["\n  overflow-x: hidden;\n  background-color: ", ";\n"])), function (p) { return p.theme.colors.tableHeader; });
+export var TableHeadersContent = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  /* We may add some padding-right here \n  since TableHeadersContainer has overflow-x: hidden */\n  /* Table header scrolling is controlled by the table content,\n  we need to add some padding to cover the width of the vertical scrollbars that may \n  be present in the table content. Scrollbars can vary between browsers and OSes,\n  Assuming scrollbars won't be wider than 100px: */\n  box-shadow: inset 0 -1px 0 ", ";\n  padding-right: 100px;\n"], ["\n  /* We may add some padding-right here \n  since TableHeadersContainer has overflow-x: hidden */\n  /* Table header scrolling is controlled by the table content,\n  we need to add some padding to cover the width of the vertical scrollbars that may \n  be present in the table content. Scrollbars can vary between browsers and OSes,\n  Assuming scrollbars won't be wider than 100px: */\n  box-shadow: inset 0 -1px 0 ", ";\n  padding-right: 100px;\n"])), function (p) { return p.theme.colors.gray300; });
 export var TableHeaders = function (_a) {
-    var _b = _a.scrollLeft, scrollLeft = _b === void 0 ? 0 : _b, columns = _a.columns, sortBy = _a.sortBy, rowHeight = _a.rowHeight, containerRef = _a.containerRef, setSortBy = _a.setSortBy, _c = _a.rowWidth, rowWidth = _c === void 0 ? 1 : _c, _d = _a.height, height = _d === void 0 ? defaultTableHeaderHeightPx : _d, shouldHaveCustomScrollbar = _a.shouldHaveCustomScrollbar, props = __rest(_a, ["scrollLeft", "columns", "sortBy", "rowHeight", "containerRef", "setSortBy", "rowWidth", "height", "shouldHaveCustomScrollbar"]);
+    var _b = _a.scrollLeft, scrollLeft = _b === void 0 ? 0 : _b, columns = _a.columns, sortBy = _a.sortBy, rowHeight = _a.rowHeight, containerRef = _a.containerRef, setSortBy = _a.setSortBy, _c = _a.height, height = _c === void 0 ? defaultTableHeaderHeightPx : _c, containerWidth = _a.containerWidth, rowWidth = _a.rowWidth, props = __rest(_a, ["scrollLeft", "columns", "sortBy", "rowHeight", "containerRef", "setSortBy", "height", "containerWidth", "rowWidth"]);
     var t = useTranslation().t;
-    return (_jsx(TableHeadersContainer, __assign({ ref: containerRef }, { children: _jsx(TableHeadersContent, __assign({ dflex: true, w: "".concat(100 * rowWidth, "%") }, { children: columns.map(function (column, index) {
+    return (_jsx(TableHeadersContainer, __assign({ ref: containerRef, w: containerWidth }, { children: _jsx(TableHeadersContent, __assign({ dflex: true, w: rowWidth }, { children: columns.map(function (column, index) {
                 var header = column.header, Header = column.Header;
                 var onHeaderClick = function () {
                     if (!setSortBy || column.disableSort)
@@ -62,7 +60,10 @@ export var TableHeaders = function (_a) {
                         });
                     }
                 };
-                return (_jsxs(TableViewHeader, __assign({ isLast: index === columns.length - 1, w: columnWidthPercentage(column, columns), onClick: onHeaderClick, h: height, shouldHaveCustomScrollbar: shouldHaveCustomScrollbar }, props, { children: [_jsx(_Fragment, { children: Header ? _jsx(Header, {}) : t(header) }), (sortBy === null || sortBy === void 0 ? void 0 : sortBy.field) === column.dataAccessor && (_jsx(SortIndicator, __assign({ direction: sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction }, { children: chevronDownIcon })))] }), index));
+                var columnWidthPercentages = getColumnWidthsPx(columns, rowWidth);
+                var columnWidthPercentage = columnWidthPercentages[index];
+                var isLast = index === columns.length - 1;
+                return (_jsxs(TableViewHeader, __assign({ isLast: isLast, className: isLast ? "last-column" : "", w: columnWidthPercentage, onClick: onHeaderClick, h: height }, props, { children: [_jsx(_Fragment, { children: Header ? _jsx(Header, {}) : _jsx(Div, __assign({ truncateText: true }, { children: t(header) })) }), (sortBy === null || sortBy === void 0 ? void 0 : sortBy.field) === column.dataAccessor && (_jsx(SortIndicator, __assign({ direction: sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction }, { children: chevronDownIcon })))] }), index));
             }) })) })));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -1,19 +1,19 @@
 import React from "react";
-import { TableViewProps } from ".";
-import { DivCSSProps } from "../../../styled/utils";
+import { TableViewProps } from "../types";
+import { DivCSSProps } from "../../../../styled/utils";
 export declare const Cell: React.MemoExoticComponent<(props: any) => JSX.Element>;
 type TableViewRowProps = {
     isHighlighted: boolean;
     isLast: boolean;
 };
-export declare const TableViewRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableViewRowProps, never>;
+export declare const TableViewRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../../styled/utils").CSSProps & TableViewRowProps, never>;
 type Props = Pick<TableViewProps, "columns" | "onRowClick" | "highlightFirstRow"> & {
     row: any;
+    rowWidth: number;
     indexI: number;
     isLast?: boolean;
     getItemKey?: (row: any) => string;
     isRowSelected?: boolean;
-    shouldHaveCustomScrollbar?: boolean;
 } & DivCSSProps;
-export declare const TableRow: ({ row, indexI, columns, isLast, highlightFirstRow, onRowClick, getItemKey, isRowSelected, shouldHaveCustomScrollbar, ...props }: Props) => JSX.Element;
+export declare const TableRow: ({ row, indexI, columns, isLast, highlightFirstRow, onRowClick, getItemKey, rowWidth, isRowSelected, ...props }: Props) => JSX.Element;
 export {};

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

@@ -28,11 +28,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { areEqual } from "react-window";
 import styled, { css } from "styled-components";
-import { Div } from "../../../styled/utils";
-import { columnWidthPercentage, TableViewCellContainer } from "./common";
+import { Div } from "../../../../styled/utils";
+import { getColumnWidthsPx, TableViewCellContainer } from "../common";
 export var Cell = React.memo(function (props) {
-    var children = props.children, shouldHaveCustomScrollbar = props.shouldHaveCustomScrollbar, cellProps = __rest(props, ["children", "shouldHaveCustomScrollbar"]);
-    return (_jsx(TableViewCellContainer, __assign({ shouldHaveCustomScrollbar: shouldHaveCustomScrollbar }, cellProps, { children: children })));
+    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) {
     return !p.isLast && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-shadow: inset 0 -1px 0 ", ";\n    "], ["\n      box-shadow: inset 0 -1px 0 ", ";\n    "])), function (p) { return p.theme.colors.gray300; });
@@ -40,15 +40,18 @@ export var TableViewRow = styled(Div)(templateObject_3 || (templateObject_3 = __
     return p.isHighlighted && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n      box-shadow: inset 0 0 0 3px ", ";\n\n      .input-content {\n        background: transparent;\n        border: none;\n        box-shadow: none;\n\n        &,\n        input {\n          color: ", ";\n        }\n      }\n    "], ["\n      background: ", ";\n      box-shadow: inset 0 0 0 3px ", ";\n\n      .input-content {\n        background: transparent;\n        border: none;\n        box-shadow: none;\n\n        &,\n        input {\n          color: ", ";\n        }\n      }\n    "])), p.theme.colors.blue100, p.theme.colors.blue500, p.theme.colors.gray1000);
 });
 export var TableRow = function (_a) {
-    var row = _a.row, indexI = _a.indexI, columns = _a.columns, isLast = _a.isLast, highlightFirstRow = _a.highlightFirstRow, onRowClick = _a.onRowClick, getItemKey = _a.getItemKey, _b = _a.isRowSelected, isRowSelected = _b === void 0 ? false : _b, shouldHaveCustomScrollbar = _a.shouldHaveCustomScrollbar, props = __rest(_a, ["row", "indexI", "columns", "isLast", "highlightFirstRow", "onRowClick", "getItemKey", "isRowSelected", "shouldHaveCustomScrollbar"]);
+    var row = _a.row, indexI = _a.indexI, columns = _a.columns, isLast = _a.isLast, highlightFirstRow = _a.highlightFirstRow, 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", "highlightFirstRow", "onRowClick", "getItemKey", "rowWidth", "isRowSelected"]);
     var isHighlighted = (indexI === 0 && highlightFirstRow) || isRowSelected;
     return (_jsx(TableViewRow, __assign({ "data-test-id": "row-".concat(indexI), dflex: true }, { isHighlighted: isHighlighted, isLast: isLast }, props, { children: columns.map(function (column, indexJ) {
             var Content = column.Content;
             var key = getItemKey ? getItemKey(row) : "".concat(indexI);
             var resolvedKey = "column-".concat(indexJ, "-row-").concat(key);
+            var columnWidthPercentages = getColumnWidthsPx(columns, rowWidth);
+            var columnWidthPercentage = columnWidthPercentages[indexJ];
+            var isLastColumn = indexJ === columns.length - 1;
             return (_jsx(Cell, __assign({ row: row, onClick: onRowClick && !column.preventRowClick
                     ? function () { return onRowClick(row); }
-                    : null, shouldHaveCustomScrollbar: shouldHaveCustomScrollbar, w: columnWidthPercentage(column, columns) }, { children: Content ? (_jsx(Content, __assign({}, row, { rowIndex: indexI }))) : (_jsx(Div, __assign({ truncateText: true }, { children: row[column.dataAccessor] || "-" }))) }), resolvedKey));
+                    : null, isLast: isLastColumn, className: isLastColumn ? "last-column" : "", w: columnWidthPercentage }, { children: Content ? (_jsx(Content, __assign({}, row, { rowIndex: indexI }))) : (_jsx(Div, __assign({ truncateText: true }, { children: row[column.dataAccessor] || "-" }))) }), resolvedKey));
         }) })));
 };
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,4 @@
+import React from "react";
+declare const Row: React.MemoExoticComponent<any>;
+declare const DraggableRow: React.MemoExoticComponent<any>;
+export { Row, DraggableRow };

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, shouldHaveCustomScrollbar = data.shouldHaveCustomScrollbar;
+    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, shouldHaveCustomScrollbar: shouldHaveCustomScrollbar }) })));
+    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.js → common/index.js}

@@ -3,16 +3,29 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { css } from "styled-components";
-import { Div } from "../../../styled/utils";
+import { Div } from "../../../../styled/utils";
 export var defaultTableRowHeightPx = 60;
 export var defaultTableHeaderHeightPx = 60;
-export var columnWidthPercentage = function (column, columns) {
+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);
-    return totalColumnWidthCount
-        ? "".concat((column.width || 1 / totalColumnWidthCount) * 100, "%")
-        : "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;

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;
-    checkboxColumnWidth?: number;
-    shouldHaveCustomScrollbar?: boolean;
-    isFiltering?: boolean;
-} & DivCSSProps;
-export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, shouldBeDraggable, shouldHaveCustomScrollbar, checkboxColumnWidth, isFiltering, ...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,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

@@ -71,11 +71,13 @@ import { useTableContext } from "./TableDataProvider";
 import { TableView as TableViewBase } from "./TableView";
 import { useReorderRows } from "./useReorderRows";
 import { addToast } from "../../common/Toast";
-var TableView = styled(TableViewBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
-    return p.withPagination && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-radius: 0px;\n    "], ["\n      border-radius: 0px;\n    "])));
+var TableContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow-x: auto;\n  width: calc(100% + 2px);\n  ", ";\n"], ["\n  overflow-x: auto;\n  width: calc(100% + 2px);\n  ", ";\n"])), function (p) { return p.theme.css.scrollbarDark; });
+var TableWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 1000px;\n  border: solid 1px ", ";\n"], ["\n  min-width: 1000px;\n  border: solid 1px ", ";\n"])), function (p) { return p.theme.colors.gray300; });
+var TableView = styled(TableViewBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+    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.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,22 +117,24 @@ 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 }, {
-                    isLoading: isLoading,
-                    data: data,
-                    columns: columns,
-                    sortBy: sortBy,
-                    setSortBy: setSortBy,
-                    onRowClick: onRowClick,
-                })) }))) : (blankState), paginationUI] })));
+    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 ? (_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,
+                            sortBy: sortBy,
+                            setSortBy: setSortBy,
+                            onRowClick: onRowClick,
+                        })) }))) : (blankState), paginationUI] })) }) }));
 };
 export { Table };
 export * from "./TableDataProvider";
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,45 @@
+import { ColumnRequiredProps, ValidationOptionKeys, ValidationTypes } from "../types";
+export type ValidationOption = {
+    type: "text" | "number" | "date";
+    key: ValidationOptionKeys;
+    tooltip: string;
+};
+export type Validation = {
+    value: ValidationTypes;
+    label: string;
+    isDefaultValidation?: boolean;
+    options?: ValidationOption[];
+};
+export declare const validationsByColumnType: {
+    [key: string]: Validation[];
+};
+export declare const validationsByType: {};
+export declare const availableColumnTypes: string[];
+export declare const datePatterns: {
+    value: string;
+    label: string;
+}[];
+export declare const dateTimePatterns: {
+    value: string;
+    label: string;
+}[];
+export declare const timePatterns: {
+    value: string;
+    label: string;
+}[];
+export declare const allowedPatterns: {
+    date: {
+        value: string;
+        label: string;
+    }[];
+    datetime: {
+        value: string;
+        label: string;
+    }[];
+    time: {
+        value: string;
+        label: string;
+    }[];
+};
+export declare const patternsColumnTypes: string[];
+export declare const validateColumn: <T extends "string" | "boolean" | "time" | "integer" | "float" | "email" | "url" | "enum" | "date" | "datetime">(columnData: ColumnRequiredProps<T>) => Promise<void>;