@vendorflow/components 2.0.71 → 2.0.74

package/lib/components/material-ui/DataTable/TablePieces/GlobalSearchFilter.js

@@ -0,0 +1,49 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var material_1 = require("@mui/material");
+var icons_material_1 = require("@mui/icons-material");
+var react_table_1 = require("react-table");
+var react_2 = require("react");
+function GlobalSearchFilter(_a) {
+    var globalFilter = _a.globalFilter, setGlobalFilter = _a.setGlobalFilter, setShowSearch = _a.setShowSearch;
+    var _b = __read((0, react_2.useState)(globalFilter), 2), value = _b[0], setValue = _b[1];
+    var onChange = (0, react_table_1.useAsyncDebounce)(function (value) {
+        setGlobalFilter(value || undefined);
+    }, 300);
+    return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        max-width: 100%;\n        min-width: 20rem;\n        display: flex;\n        flex-direction: row;\n        justify-content: flex-start;\n        align-items: center;\n      "], ["\n        max-width: 100%;\n        min-width: 20rem;\n        display: flex;\n        flex-direction: row;\n        justify-content: flex-start;\n        align-items: center;\n      "]))), "data-testid": "globalSearchFilter" },
+        (0, react_1.jsx)(icons_material_1.Search, null),
+        (0, react_1.jsx)(material_1.TextField, { value: value || '', onChange: function (evt) {
+                setValue(evt.target.value);
+                onChange(evt.target.value);
+            }, fullWidth: true, variant: "standard", autoFocus: true }),
+        (0, react_1.jsx)(material_1.IconButton, { onClick: function () {
+                setGlobalFilter(null);
+                setShowSearch(false);
+            } },
+            (0, react_1.jsx)(icons_material_1.Close, null))));
+}
+exports.default = GlobalSearchFilter;
+var templateObject_1;

package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.d.ts

@@ -0,0 +1,12 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { EnhancedHeader } from '../DataTable';
+import { TableHeaderProps } from 'react-table';
+interface Props<D extends object> {
+    className?: string;
+    header: EnhancedHeader<D>;
+    headerProps: Omit<TableHeaderProps, 'key'>;
+}
+export default function HeaderCell<D extends object>({ className, header, headerProps }: Props<D>): jsx.JSX.Element;
+export {};

package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.js

@@ -0,0 +1,53 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var SortIndicator_1 = __importDefault(require("./SortIndicator"));
+var material_1 = require("@mui/material");
+var DataTable_1 = require("../DataTable");
+function HeaderCell(_a) {
+    var className = _a.className, header = _a.header, headerProps = _a.headerProps;
+    var headerPropsClassName = headerProps.className, style = headerProps.style, restOfProps = __rest(headerProps, ["className", "style"]);
+    return ((0, react_1.jsx)(react_1.ClassNames, null, function (_a) {
+        var css = _a.css, cx = _a.cx;
+        return ((0, react_1.jsx)(material_1.TableCell, __assign({}, restOfProps, { component: "div", variant: "head", css: cx(
+            // @ts-ignore
+            css(style), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              && {\n                display: flex;\n                box-sizing: border-box;\n                padding: ", "px;\n              }\n            "], ["\n              && {\n                display: flex;\n                box-sizing: border-box;\n                padding: ", "px;\n              }\n            "])), DataTable_1.CELL_PADDING), header.minWidth !== undefined && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                min-width: ", "px;\n              "], ["\n                min-width: ", "px;\n              "])), header.minWidth), header.maxWidth !== undefined && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                max-width: ", "px;\n              "], ["\n                max-width: ", "px;\n              "])), header.maxWidth)), className: (0, classnames_1.default)(headerPropsClassName, className, "col-" + header.id) }),
+            (0, react_1.jsx)("div", { css: cx(css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                display: flex;\n                flex-direction: row;\n                justify-content: ", ";\n                align-items: center;\n                width: 100%;\n                overflow: hidden;\n                white-space: nowrap;\n                text-overflow: ellipsis;\n              "], ["\n                display: flex;\n                flex-direction: row;\n                justify-content: ", ";\n                align-items: center;\n                width: 100%;\n                overflow: hidden;\n                white-space: nowrap;\n                text-overflow: ellipsis;\n              "])), header.columns != null ? 'center' : 'flex-start')) },
+                (0, react_1.jsx)("span", { css: cx(css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                  font-weight: 600;\n                  flex: none;\n                "], ["\n                  font-weight: 600;\n                  flex: none;\n                "])))) }, header.render('Header')),
+                (0, react_1.jsx)(SortIndicator_1.default, { canSort: header.canSort, isSorted: header.isSorted, isSortedDesc: header.isSortedDesc }))));
+    }));
+}
+exports.default = HeaderCell;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/components/material-ui/DataTable/TablePieces/IndeterminateCheckbox.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const CHECKBOX_WIDTH = 32;
+declare const IndeterminateCheckbox: import("react").ForwardRefExoticComponent<HTMLInputElement & import("react").RefAttributes<HTMLInputElement>>;
+export default IndeterminateCheckbox;

package/lib/components/material-ui/DataTable/TablePieces/IndeterminateCheckbox.js

@@ -0,0 +1,65 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHECKBOX_WIDTH = void 0;
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var react_2 = require("react");
+var material_1 = require("@mui/material");
+exports.CHECKBOX_WIDTH = 32;
+// eslint-disable-next-line react/display-name
+var IndeterminateCheckbox = (0, react_2.forwardRef)(function (_a, ref) {
+    var indeterminate = _a.indeterminate, restOfProps = __rest(_a, ["indeterminate"]);
+    var resolvedRef = useForwardedRef(ref);
+    (0, react_2.useEffect)(function () {
+        if (resolvedRef.current) {
+            resolvedRef.current.indeterminate = indeterminate;
+        }
+    }, [resolvedRef, indeterminate]);
+    return ((0, react_1.jsx)(react_2.Fragment, null,
+        (0, react_1.jsx)(material_1.Checkbox, __assign({ css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            width: ", "px;\n            height: ", "px;\n          "], ["\n            width: ", "px;\n            height: ", "px;\n          "])), exports.CHECKBOX_WIDTH, exports.CHECKBOX_WIDTH), 
+            //@ts-ignore
+            ref: resolvedRef }, restOfProps, { indeterminate: indeterminate }))));
+});
+exports.default = IndeterminateCheckbox;
+function useForwardedRef(ref) {
+    var innerRef = (0, react_2.useRef)(null);
+    (0, react_2.useEffect)(function () {
+        if (!ref)
+            return;
+        if (typeof ref === 'function') {
+            ref(innerRef.current);
+        }
+        else {
+            ref.current = innerRef.current;
+        }
+    }, []);
+    return innerRef;
+}
+var templateObject_1;

package/lib/components/material-ui/DataTable/TablePieces/SortIndicator.d.ts

@@ -0,0 +1,10 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+interface Props {
+    canSort?: boolean;
+    isSorted?: boolean;
+    isSortedDesc?: boolean;
+}
+export default function SortIndicator({ canSort, isSorted, isSortedDesc }: Props): jsx.JSX.Element | null;
+export {};

package/lib/components/material-ui/DataTable/TablePieces/SortIndicator.js

@@ -0,0 +1,33 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var icons_material_1 = require("@mui/icons-material");
+var iconStyle = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: 0.25rem;\n  color: #b2b2b2;\n  line-height: 0;\n\n  && {\n    font-size: 1rem;\n  }\n"], ["\n  margin-left: 0.25rem;\n  color: #b2b2b2;\n  line-height: 0;\n\n  && {\n    font-size: 1rem;\n  }\n"])));
+var smallIconStyle = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  && {\n    font-size: 0.75rem;\n  }\n"], ["\n  ", ";\n  && {\n    font-size: 0.75rem;\n  }\n"])), iconStyle);
+var wrapperStyle = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  line-height: 0;\n  flex: none;\n"], ["\n  line-height: 0;\n  flex: none;\n"])));
+var stackedWrapperStyle = (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  flex: none;\n  display: inline-flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"], ["\n  ", ";\n  flex: none;\n  display: inline-flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), wrapperStyle);
+function SortIndicator(_a) {
+    var canSort = _a.canSort, isSorted = _a.isSorted, isSortedDesc = _a.isSortedDesc;
+    if (!canSort) {
+        return null;
+    }
+    if (!isSorted) {
+        return ((0, react_1.jsx)("span", { css: stackedWrapperStyle },
+            (0, react_1.jsx)(icons_material_1.ArrowUpward, { css: smallIconStyle }),
+            (0, react_1.jsx)(icons_material_1.ArrowDownward, { css: smallIconStyle })));
+    }
+    if (isSortedDesc) {
+        return ((0, react_1.jsx)("span", { css: wrapperStyle },
+            (0, react_1.jsx)(icons_material_1.ArrowDownward, { css: iconStyle })));
+    }
+    return ((0, react_1.jsx)("span", { css: wrapperStyle },
+        (0, react_1.jsx)(icons_material_1.ArrowUpward, { css: iconStyle })));
+}
+exports.default = SortIndicator;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/components/material-ui/DataTable/TablePieces/Table.d.ts

@@ -0,0 +1,12 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { TablePropGetter, TableProps } from 'react-table';
+import { ReactNode } from 'react';
+interface Props<D extends object> {
+    children: ReactNode;
+    className?: string;
+    getTableProps: (propGetter?: TablePropGetter<D>) => TableProps;
+}
+export default function Table<D extends object>({ children, className, getTableProps }: Props<D>): jsx.JSX.Element;
+export {};

package/lib/components/material-ui/DataTable/TablePieces/Table.js

@@ -0,0 +1,47 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+function Table(_a) {
+    var children = _a.children, className = _a.className, getTableProps = _a.getTableProps;
+    var _b = getTableProps(), style = _b.style, tablePropsClassName = _b.className, restOfProps = __rest(_b, ["style", "className"]);
+    return ((0, react_1.jsx)(react_1.ClassNames, null, function (_a) {
+        var css = _a.css, cx = _a.cx;
+        return ((0, react_1.jsx)("div", __assign({}, restOfProps, { className: (0, classnames_1.default)(tablePropsClassName, className, 'VfTable'), css: cx(
+            // @ts-ignore
+            css(style), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              height: 100%;\n            "], ["\n              height: 100%;\n            "])))) }), children));
+    }));
+}
+exports.default = Table;
+var templateObject_1;

package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.d.ts

@@ -0,0 +1,25 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { Dispatch, MutableRefObject, SetStateAction } from 'react';
+import { Row } from 'react-table';
+interface Props<D extends object> {
+    defaultRowHeight: number;
+    ExpandedComponent: ((props: {
+        data: D;
+    }) => JSX.Element) | undefined;
+    hasScrollbarRefCallback: (node: HTMLDivElement | null) => void;
+    height: number | undefined;
+    isVirtualizeEnabled: boolean;
+    noMatchLabel?: string;
+    prepareRow: (row: Row<D>) => void;
+    scrollContainerRef: MutableRefObject<HTMLDivElement | null>;
+    setScrollLeft: Dispatch<SetStateAction<number>>;
+    tableBodyRef: MutableRefObject<HTMLDivElement | null>;
+    tableBodyMeasureRefCallback: (node: HTMLDivElement | null) => void;
+    tableRows: Row<D>[];
+    totalColumnsWidth: number;
+    width: number | undefined;
+}
+export default function TableBodyContent<D extends object>({ defaultRowHeight, ExpandedComponent, hasScrollbarRefCallback, height, isVirtualizeEnabled, noMatchLabel, prepareRow, scrollContainerRef, setScrollLeft, tableBodyRef, tableBodyMeasureRefCallback, tableRows, totalColumnsWidth, width, }: Props<D>): jsx.JSX.Element;
+export {};

package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.js

@@ -0,0 +1,71 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var react_virtualized_1 = require("react-virtualized");
+var BodyRow_1 = __importDefault(require("./BodyRow"));
+var material_1 = require("@mui/material");
+var react_2 = require("react");
+function TableBodyContent(_a) {
+    var defaultRowHeight = _a.defaultRowHeight, ExpandedComponent = _a.ExpandedComponent, hasScrollbarRefCallback = _a.hasScrollbarRefCallback, height = _a.height, isVirtualizeEnabled = _a.isVirtualizeEnabled, noMatchLabel = _a.noMatchLabel, prepareRow = _a.prepareRow, scrollContainerRef = _a.scrollContainerRef, setScrollLeft = _a.setScrollLeft, tableBodyRef = _a.tableBodyRef, tableBodyMeasureRefCallback = _a.tableBodyMeasureRefCallback, tableRows = _a.tableRows, totalColumnsWidth = _a.totalColumnsWidth, width = _a.width;
+    var cache = (0, react_2.useRef)(new react_virtualized_1.CellMeasurerCache({ fixedWidth: true, defaultHeight: defaultRowHeight, defaultWidth: totalColumnsWidth }));
+    function renderRow(_a) {
+        var columnIndex = _a.columnIndex, rowIndex = _a.rowIndex, key = _a.key, parent = _a.parent, style = _a.style;
+        var row = tableRows[rowIndex];
+        prepareRow(row);
+        var _b = row.getRowProps(), _ = _b.key, restOfRowProps = __rest(_b, ["key"]);
+        return ((0, react_1.jsx)(react_virtualized_1.CellMeasurer, { cache: cache.current, columnIndex: columnIndex, key: key, rowIndex: rowIndex, parent: parent }, function (_a) {
+            var measure = _a.measure, registerChild = _a.registerChild;
+            return ((0, react_1.jsx)(BodyRow_1.default, { key: key, innerRef: registerChild, ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps, style: style, measure: measure }));
+        }));
+    }
+    return ((0, react_1.jsx)(material_1.TableBody, { ref: function (node) {
+            // @ts-ignore
+            tableBodyRef.current = node;
+            tableBodyMeasureRefCallback(node); // need this to get the height and width
+            if (isVirtualizeEnabled) {
+                scrollContainerRef.current = (node === null || node === void 0 ? void 0 : node.firstElementChild) || null;
+                hasScrollbarRefCallback((node === null || node === void 0 ? void 0 : node.firstElementChild) || null);
+            }
+        }, component: "div", css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        && {\n          display: block;\n        }\n      "], ["\n        && {\n          display: block;\n        }\n      "]))), className: "DataTable__TableBody" },
+        isVirtualizeEnabled && !!height && !!width && ((0, react_1.jsx)(react_virtualized_1.Grid, { deferredMeasurementCache: cache.current, height: height, width: width, overscanRowCount: 5, columnCount: 1, columnWidth: cache.current.columnWidth, rowCount: tableRows.length, rowHeight: cache.current.rowHeight, estimatedRowSize: defaultRowHeight, cellRenderer: renderRow, onScroll: function (params) {
+                var scrollLeft = params.scrollLeft;
+                setScrollLeft(scrollLeft);
+            } })),
+        !isVirtualizeEnabled && !!height && !!width && ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            height: ", "px;\n            width: ", "px;\n            overflow: auto;\n          "], ["\n            height: ", "px;\n            width: ", "px;\n            overflow: auto;\n          "])), height, width), ref: function (node) {
+                scrollContainerRef.current = node;
+                hasScrollbarRefCallback(node);
+            }, onScroll: function (evt) {
+                var scrollLeft = evt.target.scrollLeft;
+                setScrollLeft(scrollLeft);
+            } },
+            (0, react_1.jsx)("div", null, tableRows.length > 0 ? (tableRows.map(function (row) {
+                prepareRow(row);
+                var _a = row.getRowProps(), key = _a.key, restOfRowProps = __rest(_a, ["key"]);
+                return ((0, react_1.jsx)(BodyRow_1.default, { key: key, ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps }));
+            })) : ((0, react_1.jsx)(material_1.TableRow, { component: "div", css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                  && {\n                    display: flex;\n                    flex-direction: row;\n                    flex-wrap: nowrap;\n                    align-items: center;\n                    box-sizing: border-box;\n                    min-width: 100%;\n                    width: 100%;\n                    border-bottom: 1px solid rgba(224, 224, 224, 1);\n                  }\n\n                  &&:last-child {\n                    border-bottom: none;\n                  }\n                "], ["\n                  && {\n                    display: flex;\n                    flex-direction: row;\n                    flex-wrap: nowrap;\n                    align-items: center;\n                    box-sizing: border-box;\n                    min-width: 100%;\n                    width: 100%;\n                    border-bottom: 1px solid rgba(224, 224, 224, 1);\n                  }\n\n                  &&:last-child {\n                    border-bottom: none;\n                  }\n                "]))) },
+                (0, react_1.jsx)(material_1.TableCell, { component: "div", variant: "body", css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    && {\n                      display: block;\n                      border-bottom: none;\n                      width: 100%;\n                    }\n                  "], ["\n                    && {\n                      display: block;\n                      border-bottom: none;\n                      width: 100%;\n                    }\n                  "]))) },
+                    (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                      text-align: center;\n                    "], ["\n                      text-align: center;\n                    "]))) },
+                        (0, react_1.jsx)("span", null, noMatchLabel))))))))));
+}
+exports.default = TableBodyContent;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/components/material-ui/DataTable/TablePieces/Toolbar.d.ts

@@ -0,0 +1,24 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { ReactNode } from 'react';
+import { SimpleMap } from '../../../../types/Internal.types';
+import { EnhancedHeader } from '../DataTable';
+import { UseFiltersInstanceProps } from 'react-table';
+interface Props<D extends object> {
+    title?: string;
+    allColumns: EnhancedHeader<D>[];
+    columnNameById: SimpleMap<string>;
+    enableFilters?: boolean;
+    enableGlobalSearch?: boolean;
+    enableHideColumns?: boolean;
+    hasRowsSelected: boolean;
+    numRowsSelected: number;
+    globalFilter: string;
+    renderActions?: () => ReactNode;
+    renderRowSelectActions?: () => ReactNode;
+    setAllFilters: UseFiltersInstanceProps<D>['setAllFilters'];
+    setGlobalFilter: (filterValue: any) => void | Promise<void>;
+}
+export default function Toolbar<D extends object>({ title, allColumns, columnNameById, enableFilters, enableGlobalSearch, enableHideColumns, hasRowsSelected, numRowsSelected, globalFilter, renderActions, renderRowSelectActions, setAllFilters, setGlobalFilter, }: Props<D>): jsx.JSX.Element;
+export {};

package/lib/components/material-ui/DataTable/TablePieces/Toolbar.js

@@ -0,0 +1,63 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var material_1 = require("@mui/material");
+var ViewColumnTool_1 = __importDefault(require("./ViewColumnTool"));
+var icons_material_1 = require("@mui/icons-material");
+var react_2 = require("react");
+var GlobalSearchFilter_1 = __importDefault(require("./GlobalSearchFilter"));
+var FilterTool_1 = __importDefault(require("../FilterTool"));
+function Toolbar(_a) {
+    var title = _a.title, allColumns = _a.allColumns, columnNameById = _a.columnNameById, enableFilters = _a.enableFilters, enableGlobalSearch = _a.enableGlobalSearch, enableHideColumns = _a.enableHideColumns, hasRowsSelected = _a.hasRowsSelected, numRowsSelected = _a.numRowsSelected, globalFilter = _a.globalFilter, renderActions = _a.renderActions, renderRowSelectActions = _a.renderRowSelectActions, setAllFilters = _a.setAllFilters, setGlobalFilter = _a.setGlobalFilter;
+    var _b = __read((0, react_2.useState)(false), 2), showSearch = _b[0], setShowSearch = _b[1];
+    return ((0, react_1.jsx)(material_1.Toolbar, { sx: hasRowsSelected ? { backgroundColor: function (theme) { return (0, material_1.lighten)(theme.palette.primary.light, 0.85); } } : undefined }, hasRowsSelected ? ((0, react_1.jsx)(material_1.Grid, { container: true, spacing: 2 },
+        (0, react_1.jsx)(material_1.Grid, { item: true, sm: 6 },
+            (0, react_1.jsx)(material_1.Stack, { height: "100%", direction: "row", alignContent: "center" },
+                (0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                  font-size: 1.125rem;\n                  margin-top: 4px;\n                "], ["\n                  font-size: 1.125rem;\n                  margin-top: 4px;\n                "]))) },
+                    numRowsSelected,
+                    " selected"))),
+        (0, react_1.jsx)(material_1.Grid, { item: true, sm: 6 },
+            (0, react_1.jsx)(material_1.Stack, { direction: "row", justifyContent: "flex-end", css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                width: 100%;\n              "], ["\n                width: 100%;\n              "]))) }, renderRowSelectActions && renderRowSelectActions())))) : ((0, react_1.jsx)(material_1.Grid, { container: true, spacing: 2 },
+        (0, react_1.jsx)(material_1.Grid, { item: true, sm: 6 },
+            (0, react_1.jsx)(material_1.Stack, { direction: "row" }, enableGlobalSearch && showSearch ? ((0, react_1.jsx)(GlobalSearchFilter_1.default, { globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, setShowSearch: setShowSearch })) : ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    font-size: 1.125rem;\n                    margin-top: 6px;\n                  "], ["\n                    font-size: 1.125rem;\n                    margin-top: 6px;\n                  "]))) }, title || '')))),
+        (0, react_1.jsx)(material_1.Grid, { item: true, sm: 6 },
+            (0, react_1.jsx)(material_1.Stack, { direction: "row", justifyContent: "flex-end", css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                width: 100%;\n              "], ["\n                width: 100%;\n              "]))) },
+                enableGlobalSearch && ((0, react_1.jsx)(material_1.Tooltip, { title: "Search" },
+                    (0, react_1.jsx)(material_1.IconButton, { onClick: function () {
+                            if (showSearch) {
+                                setGlobalFilter(null);
+                            }
+                            setShowSearch(!showSearch);
+                        } },
+                        (0, react_1.jsx)(icons_material_1.Search, null)))),
+                enableHideColumns && (0, react_1.jsx)(ViewColumnTool_1.default, { allColumns: allColumns, columnNameById: columnNameById }),
+                enableFilters && ((0, react_1.jsx)(FilterTool_1.default, { allColumns: allColumns, columnNameById: columnNameById, setAllFilters: setAllFilters })),
+                renderActions && renderActions()))))));
+}
+exports.default = Toolbar;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/components/material-ui/DataTable/TablePieces/ViewColumnTool.d.ts

@@ -0,0 +1,11 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { ColumnInstance } from 'react-table';
+import { SimpleMap } from '../../../../types/Internal.types';
+interface Props<D extends object> {
+    allColumns: ColumnInstance<D>[];
+    columnNameById: SimpleMap<string>;
+}
+export default function ViewColumnTool<D extends object>({ allColumns, columnNameById }: Props<D>): jsx.JSX.Element;
+export {};

package/lib/components/material-ui/DataTable/TablePieces/ViewColumnTool.js

@@ -0,0 +1,76 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            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);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var react_2 = require("react");
+var material_1 = require("@mui/material");
+var icons_material_1 = require("@mui/icons-material");
+var nanoid_1 = require("nanoid");
+var IndeterminateCheckbox_1 = __importDefault(require("./IndeterminateCheckbox"));
+function ViewColumnTool(_a) {
+    var allColumns = _a.allColumns, columnNameById = _a.columnNameById;
+    var id = (0, react_2.useMemo)(function () { return (0, nanoid_1.nanoid)(); }, []);
+    var _b = __read((0, react_2.useState)(null), 2), anchorEl = _b[0], setAnchorEl = _b[1];
+    var open = !!anchorEl;
+    function handleClick(evt) {
+        setAnchorEl(evt.currentTarget);
+    }
+    function handleClose() {
+        setAnchorEl(null);
+    }
+    return ((0, react_1.jsx)(react_2.Fragment, null,
+        (0, react_1.jsx)(material_1.Tooltip, { title: "Show Columns" },
+            (0, react_1.jsx)(material_1.IconButton, { "aria-describedby": id, onClick: handleClick },
+                (0, react_1.jsx)(icons_material_1.ViewColumn, null))),
+        (0, react_1.jsx)(material_1.Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' } },
+            (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            padding: 0.5rem;\n          "], ["\n            padding: 0.5rem;\n          "]))) },
+                (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              display: flex;\n              flex-direction: row;\n              justify-content: flex-start;\n              align-items: center;\n            "], ["\n              display: flex;\n              flex-direction: row;\n              justify-content: flex-start;\n              align-items: center;\n            "]))) },
+                    (0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                font-size: 14px;\n                color: rgba(0, 0, 0, 0.54);\n              "], ["\n                font-size: 14px;\n                color: rgba(0, 0, 0, 0.54);\n              "]))) }, "Show Columns"),
+                    (0, react_1.jsx)(material_1.Tooltip, { title: "Close" },
+                        (0, react_1.jsx)(material_1.IconButton, { onClick: handleClose },
+                            (0, react_1.jsx)(icons_material_1.Close, null)))),
+                (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              display: flex;\n              flex-direction: column;\n              justify-content: flex-start;\n              align-items: flex-start;\n            "], ["\n              display: flex;\n              flex-direction: column;\n              justify-content: flex-start;\n              align-items: flex-start;\n            "]))) }, allColumns
+                    .filter(function (column) { return column.id !== 'custom'; })
+                    .map(function (column) {
+                    return ((0, react_1.jsx)(material_1.FormControlLabel, { key: column.id, label: columnNameById[column.id], 
+                        // @ts-ignore
+                        control: (0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({}, column.getToggleHiddenProps())) }));
+                }))))));
+}
+exports.default = ViewColumnTool;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/components/material-ui/DataTable/Utils.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import short from 'short-uuid';
+import { EnhancedRow } from './DataTable';
+/**
+ * This custom hook is designed to replace the `<CellMeasurer />` component in `react-virtualized`
+ * in `react-window`
+ *
+ * This hook returns props to be given to the `<VariableSizeList />` component in `react-window`
+ *
+ * `items` are react elements
+ */
+export default function useCellMeasurer({ items, renderItem, }: {
+    items: any[];
+    renderItem: (item: EnhancedRow<any>) => JSX.Element;
+}): {
+    innerRef: import("react").RefObject<HTMLDivElement>;
+    itemSize: (index: any) => number;
+    itemCount: number;
+    key: short.SUUID;
+    style: {
+        visibility?: undefined;
+    } | {
+        visibility: string;
+    };
+};