@vendorflow/components 2.0.95 → 2.0.97

package/lib/components/material-ui/DataTable/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/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/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/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/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/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/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/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;
+    };
+};

package/lib/components/material-ui/DataTable/Utils.js

@@ -0,0 +1,119 @@
+"use strict";
+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 });
+var react_1 = require("react");
+var short_uuid_1 = __importDefault(require("short-uuid"));
+var server_1 = require("react-dom/server");
+var resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
+/**
+ * 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
+ */
+function useCellMeasurer(_a) {
+    var items = _a.items, renderItem = _a.renderItem;
+    // create a ref to get the `div` element the `VariableSizeList` uses
+    var innerRef = (0, react_1.useRef)(null);
+    // create a unique ID for this cell measurer instance
+    var id = (0, react_1.useMemo)(function () { return short_uuid_1.default.generate(); }, []);
+    // create a "hidden sizing element" in state.
+    //
+    // when the innerRef element mounts, the width of the innerRef will be used for width of
+    // the hidden sizing element
+    var _b = __read((0, react_1.useState)(null), 2), hiddenSizingEl = _b[0], setHiddenSizingEl = _b[1];
+    // this width is used to determine whether the list needs to be re-rendered due to a resize
+    var _c = __read((0, react_1.useState)(0), 2), width = _c[0], setWidth = _c[1];
+    // `itemSize` is a function required by `VariableSizeList`. This function is called when it needs
+    // to get the height of the item inside it.
+    // note: the result of this function is memoized by `react-window` so it will only be called once
+    // to get the item size
+    var itemSize = (0, react_1.useCallback)(function (index) {
+        if (!hiddenSizingEl)
+            return 0;
+        // get the item (which is a react node)
+        var item = items[index];
+        // then render the react node to a string synchronously with `react-dom/server`
+        hiddenSizingEl.innerHTML = (0, server_1.renderToString)(renderItem(item));
+        // get and return the size of the hidden sizing element
+        return hiddenSizingEl.clientHeight || 0;
+    }, [hiddenSizingEl, items]);
+    // this effects adds the hidden sizing element to the DOM
+    (0, react_1.useEffect)(function () {
+        /** @type {HTMLElement} */
+        var innerEl = innerRef.current;
+        if (!innerEl)
+            return;
+        if (hiddenSizingEl)
+            return;
+        var newHiddenSizingEl = document.createElement('div');
+        var width = innerEl.clientWidth;
+        newHiddenSizingEl.classList.add("hidden-sizing-element-" + id);
+        newHiddenSizingEl.style.position = 'absolute';
+        newHiddenSizingEl.style.top = '0';
+        newHiddenSizingEl.style.width = width + "px";
+        newHiddenSizingEl.style.pointerEvents = 'none';
+        newHiddenSizingEl.style.visibility = 'hidden';
+        setHiddenSizingEl(newHiddenSizingEl);
+        document.body.appendChild(newHiddenSizingEl);
+    }, [hiddenSizingEl, id]);
+    // this removes all hidden sizing elements on unmount
+    (0, react_1.useEffect)(function () {
+        // returning a function from `useEffect` is the "clean-up" phase
+        return function () {
+            var hiddenSizingElement = document.querySelector(".hidden-sizing-element-" + id);
+            if (hiddenSizingElement) {
+                document.body.removeChild(hiddenSizingElement);
+            }
+        };
+    }, [id]);
+    // this is used to watch for changes in the size of the list element and sets the width
+    (0, react_1.useEffect)(function () {
+        var el = innerRef.current;
+        if (!el)
+            return;
+        function handleResize() {
+            var width = ((el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) || { width: 0 }).width;
+            setWidth(width);
+        }
+        var resizeObserver = new resize_observer_polyfill_1.default(handleResize);
+        resizeObserver.observe(el);
+        return function () { return resizeObserver.disconnect(); };
+    }, []);
+    // this key is used to re-render the list when the dependencies array changes
+    var key = (0, react_1.useMemo)(function () { return short_uuid_1.default.generate(); }, [itemSize, hiddenSizingEl, width]);
+    // while there is no hidden sizing element, hide the list element
+    var style = hiddenSizingEl
+        ? {}
+        : {
+            visibility: 'hidden',
+        };
+    return {
+        innerRef: innerRef,
+        itemSize: itemSize,
+        itemCount: items.length,
+        key: key,
+        style: style,
+    };
+}
+exports.default = useCellMeasurer;

package/lib/components/material-ui/DataTable/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/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/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { ReactNode } from 'react';
+export default function ErrorBoundary({ children, onReset, }: {
+    children: ReactNode;
+    onReset: (...args: Array<unknown>) => void | Promise<void>;
+}): jsx.JSX.Element;

package/lib/components/material-ui/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,20 @@
+"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 });
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var material_1 = require("@mui/material");
+var react_error_boundary_1 = require("react-error-boundary");
+function ErrorFallback(_a) {
+    var resetErrorBoundary = _a.resetErrorBoundary;
+    return ((0, react_1.jsx)(material_1.Alert, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: 100%;\n      "], ["\n        width: 100%;\n      "]))), severity: "error", action: (0, react_1.jsx)(material_1.Button, { color: "inherit", size: "small", onClick: resetErrorBoundary }, "Reload") }, "Something went wrong when trying to load this view's data. Please try to reload the data again."));
+}
+function ErrorBoundary(_a) {
+    var children = _a.children, onReset = _a.onReset;
+    return ((0, react_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: onReset }, children));
+}
+exports.default = ErrorBoundary;
+var templateObject_1;

package/lib/components/material-ui/ErrorBoundary/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ErrorBoundary';

package/lib/components/material-ui/ErrorBoundary/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ErrorBoundary_1 = require("./ErrorBoundary");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ErrorBoundary_1).default; } });

package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.d.ts

@@ -12,6 +12,7 @@ interface Props {
     options: BasicOption[];
     values: string[];
     multi?: boolean;
+    size?: 'small' | 'medium';
 }
 export default function InputCheckboxGroup(props: Props): JSX.Element;
 export {};

package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.js

@@ -43,8 +43,8 @@ var immer_1 = __importDefault(require("immer"));
 var lodash_1 = require("lodash");
 var material_1 = require("@mui/material");
 function InputCheckboxGroup(props) {
-    var className = props.className, style = props.style, _a = props.color, color = _a === void 0 ? 'primary' : _a, disabled = props.disabled, error = props.error, helperText = props.helperText, label = props.label, name = props.name, onChange = props.onChange, options = props.options, _b = props.multi, multi = _b === void 0 ? true : _b;
-    var _c = __read((0, react_1.useState)({}), 2), values = _c[0], setValues = _c[1];
+    var className = props.className, style = props.style, _a = props.color, color = _a === void 0 ? 'primary' : _a, disabled = props.disabled, error = props.error, helperText = props.helperText, label = props.label, name = props.name, onChange = props.onChange, options = props.options, _b = props.multi, multi = _b === void 0 ? true : _b, _c = props.size, size = _c === void 0 ? 'small' : _c;
+    var _d = __read((0, react_1.useState)({}), 2), values = _d[0], setValues = _d[1];
     (0, react_1.useEffect)(function () {
         var newValues = {};
         options.forEach(function (_a) {
@@ -88,7 +88,7 @@ function InputCheckboxGroup(props) {
     function renderOptions() {
         return options.map(function (_a) {
             var label = _a.label, value = _a.value;
-            return (react_1.default.createElement(material_1.FormControlLabel, { key: label, label: label, control: react_1.default.createElement(material_1.Checkbox, { color: color, disabled: disabled, onChange: handleOnChange, checked: values[value] || false, name: label }) }));
+            return (react_1.default.createElement(material_1.FormControlLabel, { key: label, label: label, control: react_1.default.createElement(material_1.Checkbox, { color: color, disabled: disabled, onChange: handleOnChange, checked: values[value] || false, name: label, size: size }) }));
         });
     }
     return (react_1.default.createElement(material_1.FormControl, { className: className, style: style, component: "fieldset", error: error },

package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.d.ts

@@ -12,6 +12,7 @@ interface Props {
     options: BasicOption[];
     value: string | null;
     row?: boolean;
+    size?: 'small' | 'medium';
 }
 export default function InputRadioGroup(props: Props): JSX.Element;
 export {};

package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.js

@@ -60,8 +60,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var material_1 = require("@mui/material");
 function InputRadioGroup(props) {
-    var _a = props.color, color = _a === void 0 ? 'primary' : _a, disabled = props.disabled, error = props.error, helperText = props.helperText, label = props.label, name = props.name, onChange = props.onChange, options = props.options, _b = props.row, row = _b === void 0 ? false : _b, restOfProps = __rest(props, ["color", "disabled", "error", "helperText", "label", "name", "onChange", "options", "row"]);
-    var _c = __read((0, react_1.useState)(null), 2), value = _c[0], setValue = _c[1];
+    var _a = props.color, color = _a === void 0 ? 'primary' : _a, disabled = props.disabled, error = props.error, helperText = props.helperText, label = props.label, name = props.name, onChange = props.onChange, options = props.options, _b = props.row, row = _b === void 0 ? false : _b, _c = props.size, size = _c === void 0 ? 'small' : _c, restOfProps = __rest(props, ["color", "disabled", "error", "helperText", "label", "name", "onChange", "options", "row", "size"]);
+    var _d = __read((0, react_1.useState)(null), 2), value = _d[0], setValue = _d[1];
     (0, react_1.useEffect)(function () {
         if (props.value !== value) {
             setValue(props.value);
@@ -72,7 +72,7 @@ function InputRadioGroup(props) {
         onChange({ target: { name: name, value: value } });
     }
     function renderOptions() {
-        return options.map(function (option) { return (react_1.default.createElement(material_1.FormControlLabel, { key: option.label, value: option.value, label: option.label, control: react_1.default.createElement(material_1.Radio, { color: color, disabled: disabled }) })); });
+        return options.map(function (option) { return (react_1.default.createElement(material_1.FormControlLabel, { key: option.label, value: option.value, label: option.label, control: react_1.default.createElement(material_1.Radio, { size: size, color: color, disabled: disabled }) })); });
     }
     return (react_1.default.createElement(material_1.FormControl, __assign({ component: "fieldset", error: error }, restOfProps),
         react_1.default.createElement(material_1.FormLabel, { component: "legend" }, label),

package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactNode } from 'react';
+import { ChangeEvent, ReactNode, Ref } from 'react';
 import { AutocompleteProps, AutocompleteChangeReason, AutocompleteRenderInputParams } from '@mui/material';
 import { Variant } from '../../../types';
 declare type MaybeBoolean = boolean | undefined;
@@ -17,6 +17,7 @@ declare type Props<T> = {
     count?: number;
     onChange: (event: ChangeEvent<any>, value: any, reason: AutocompleteChangeReason) => void;
     getKey?: (value: T) => string;
+    mRef?: Ref<HTMLElement>;
 } & Omit<AutocompleteProps<T, MaybeBoolean, MaybeBoolean, MaybeBoolean, any>, 'onChange' | 'renderInput' | 'id'>;
 export default function InputSearchDropdown<T>(props: Props<T>): JSX.Element;
 export {};