@popmenu/common-ui 0.18.4-alpha.0 → 0.19.0

package/build/index.js

@@ -45,10 +45,6 @@ var MenuList = require('@material-ui/core/MenuList');
 var MuiRadio = require('@material-ui/core/Radio');
 var TextField = require('@material-ui/core/TextField');
 var MuiSwitch = require('@material-ui/core/Switch');
-var useTable_js = require('react-table/src/hooks/useTable.js');
-var usePagination_js = require('react-table/src/plugin-hooks/usePagination.js');
-var useSortBy_js = require('react-table/src/plugin-hooks/useSortBy.js');
-var lab = require('@material-ui/lab');
 var Tab = require('@material-ui/core/Tab');
 var Tabs = require('@material-ui/core/Tabs');
 var MuiToggleButton = require('@material-ui/lab/ToggleButton');
@@ -161,70 +157,6 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || from);
-}
-
-var _path$3K;
-
-function _extends$3$() { _extends$3$ = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3$.apply(this, arguments); }
-
-function SvgMore(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3$({
-    viewBox: "0 0 16 16",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "currentColor",
-    width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$3K || (_path$3K = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8 8.667a.667.667 0 100-1.334.667.667 0 000 1.334zM8 4a.667.667 0 100-1.333A.667.667 0 008 4zm0 9.333A.667.667 0 108 12a.667.667 0 000 1.333z"
-  })));
-}
-
-var _path$2X;
-
-function _extends$3b() { _extends$3b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3b.apply(this, arguments); }
-
-function SvgChevronDown(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3b({
-    viewBox: "0 0 16 16",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "currentColor",
-    width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$2X || (_path$2X = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M4 6l4 4 4-4"
-  })));
-}
-
-var _path$2W;
-
-function _extends$3a() { _extends$3a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3a.apply(this, arguments); }
-
-function SvgChevronUp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3a({
-    viewBox: "0 0 16 16",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "currentColor",
-    width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$2W || (_path$2W = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M12 10L8 6l-4 4"
-  })));
 }
 
 var _path$1f;
@@ -1126,201 +1058,6 @@ var Switch = React.forwardRef(function (props, ref) {
 });
 Switch.displayName = 'Switch';
 
-var TableFooter = function (props) {
-    return (React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "center", alignItems: "end", paddingTop: 3, paddingBottom: 4, flexGrow: 1 }, props.children));
-};
-
-var TableHeader = function (props) {
-    var children = props.children, restProps = __rest(props, ["children"]);
-    return React__default['default'].createElement("thead", __assign({}, restProps), children);
-};
-
-var getWidth = function (props) {
-    var isActionColumn = props.column.isActionColumn, fullWidth = props.tableProps.fullWidth;
-    var width;
-    if (fullWidth && isActionColumn) {
-        width = '0.0000000001%';
-    }
-    if (fullWidth && !isActionColumn) {
-        width = '1%';
-    }
-    if (!fullWidth && isActionColumn) {
-        width = 72;
-    }
-    if (!fullWidth && !isActionColumn) {
-        width = undefined;
-    }
-    return width;
-};
-var useTableHeaderCellStyles = core.makeStyles(function (theme) { return ({
-    root: function (props) {
-        var width = getWidth(props);
-        return {
-            borderBottomStyle: 'solid',
-            borderBottomWidth: 2,
-            borderBottomColor: theme.palette.grey[100],
-            padding: theme.spacing(2),
-            textAlign: 'left',
-            fontWeight: 500,
-            width: width,
-        };
-    },
-}); });
-
-var TableHeaderCell = function (props) {
-    var children = props.children, column = props.column; props.tableProps; var restProps = __rest(props, ["children", "column", "tableProps"]);
-    var root = useTableHeaderCellStyles(props).root;
-    var _a = core.useTheme(), palette = _a.palette, spacing = _a.spacing;
-    //@ts-expect-error @types/react-table issue
-    var canSort = column.canSort, isSorted = column.isSorted, isSortedDesc = column.isSortedDesc, isActionColumn = column.isActionColumn;
-    var showSortIndicator = canSort && !isActionColumn;
-    return (React__default['default'].createElement("th", __assign({ className: root }, restProps),
-        React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", gridGap: spacing(1) },
-            children,
-            showSortIndicator && (React__default['default'].createElement(Icon, { icon: isSortedDesc ? SvgChevronDown : SvgChevronUp, color: isSorted ? palette.text.primary : palette.text.disabled, size: "large" })))));
-};
-
-var TableHeaderRow = function (props) {
-    var children = props.children, restProps = __rest(props, ["children"]);
-    return React__default['default'].createElement("tr", __assign({}, restProps), children);
-};
-
-var useTableRowStyles = core.makeStyles(function (theme) { return ({
-    root: function () { return ({
-        '&:nth-child(even)': {
-            backgroundColor: theme.palette.grey[100],
-        },
-    }); },
-}); });
-
-var TableRow = function (props) {
-    var children = props.children, restProps = __rest(props, ["children"]);
-    var root = useTableRowStyles(props).root;
-    return (React__default['default'].createElement("tr", __assign({ className: root }, restProps), children));
-};
-
-var TableBody = function (props) {
-    var children = props.children, restProps = __rest(props, ["children"]);
-    return React__default['default'].createElement("tbody", __assign({}, restProps), children);
-};
-
-var useTableCellStyles = core.makeStyles(function (theme) { return ({
-    root: function () { return ({
-        padding: theme.spacing(2),
-    }); },
-}); });
-
-var TableCell = function (props) {
-    var children = props.children, restProps = __rest(props, ["children"]);
-    var root = useTableCellStyles(props).root;
-    return (React__default['default'].createElement("td", __assign({ className: root }, restProps), children));
-};
-
-var useTableStyles = core.makeStyles(function (_a) {
-    var typography = _a.typography;
-    return ({
-        root: function (_a) {
-            var fullWidth = _a.fullWidth;
-            return ({
-                display: fullWidth ? 'flex' : 'inline-flex',
-                flexDirection: 'column',
-            });
-        },
-        table: function (_a) {
-            var fullWidth = _a.fullWidth;
-            return (__assign(__assign({ borderCollapse: 'collapse' }, (fullWidth && { width: '100%' })), typography.body1));
-        },
-        tableWrap: function () { return ({
-            maxWidth: '100%',
-            overflowX: 'auto',
-            overflowY: 'hidden',
-        }); },
-    });
-});
-
-var TableActionsCell = function (props) {
-    var _a = props.actions, primary = _a.primary, secondary = _a.secondary, intermediate = __rest(_a, ["primary", "secondary"]);
-    var tertiary = intermediate.tertiary, restActions = __rest(intermediate, ["tertiary"]);
-    var overflow = Object.keys(props.actions).length > 3;
-    var _b = React__default['default'].useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
-    var openMenu = function (event) {
-        setAnchorEl(event.currentTarget);
-    };
-    var closeMenu = function () {
-        setAnchorEl(null);
-    };
-    var handleItemClick = function (action) {
-        action(props.cell);
-        closeMenu();
-    };
-    return (React__default['default'].createElement(core.Box, { display: "flex" },
-        primary && primary.icon && (React__default['default'].createElement(IconButton, { size: "small", onClick: function () { return primary.action(props.cell); } },
-            React__default['default'].createElement(Icon, { icon: primary.icon }))),
-        secondary && secondary.icon && (React__default['default'].createElement(IconButton, { size: "small", onClick: function () { return secondary.action(props.cell); } },
-            React__default['default'].createElement(Icon, { icon: secondary.icon }))),
-        !overflow && tertiary && tertiary.icon && (React__default['default'].createElement(IconButton, { size: "small", onClick: function () { return tertiary.action(props.cell); } },
-            React__default['default'].createElement(Icon, { icon: tertiary.icon }))),
-        overflow && restActions && (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(IconButton, { size: "small", onClick: openMenu },
-                React__default['default'].createElement(Icon, { icon: SvgMore })),
-            React__default['default'].createElement(Menu__default['default'], { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: closeMenu }, Object.values(__assign({ tertiary: tertiary }, restActions))
-                .filter(function (value) { return value; })
-                .map(function (_a, i) {
-                var label = _a.label, action = _a.action;
-                return (React__default['default'].createElement(MenuItem__default['default'], { key: i, onClick: function () { return handleItemClick(action); } }, label));
-            }))))));
-};
-
-var makeColumns = function (config) {
-    var columns = config.columns, actions = config.actions, actionColumnId = config.actionColumnId;
-    var actionColumn;
-    var memoizedColumns = __spreadArray([], columns);
-    if (actions) {
-        var CellComponent = function (props) { return React__default['default'].createElement(TableActionsCell, __assign({}, props, { actions: actions })); };
-        actionColumn = {
-            id: actionColumnId,
-            Header: function () { return null; },
-            Cell: CellComponent,
-        };
-        memoizedColumns = __spreadArray(__spreadArray([], columns), [actionColumn]);
-    }
-    return memoizedColumns;
-};
-
-/* eslint-disable react/jsx-key */
-var Table = function (props) {
-    var actionColumnId = 'table-actions-column';
-    var rawColumns = props.columns, data = props.data, actions = props.actions, sortable = props.sortable, emptyMessage = props.emptyMessage, EmptyImage = props.EmptyImage, isLoading = props.loading, enableMinHeight = props.enableMinHeight;
-    var classes = useTableStyles(props);
-    var columns = React.useMemo(function () { return makeColumns({ columns: rawColumns, actions: actions, actionColumnId: actionColumnId }); }, [rawColumns, actions]);
-    var instance = useTable_js.useTable({ columns: columns, data: data, disableSortBy: !sortable }, useSortBy_js.useSortBy, usePagination_js.usePagination);
-    var getTableProps = instance.getTableProps, getTableBodyProps = instance.getTableBodyProps, headerGroups = instance.headerGroups, page = instance.page, prepareRow = instance.prepareRow, pageCount = instance.pageCount, gotoPage = instance.gotoPage, state = instance.state, rows = instance.rows;
-    var isPaginated = pageCount > 1;
-    var isEmpty = rows.length === 0;
-    var handlePagination = function (_e, pageNumber) {
-        gotoPage(pageNumber - 1);
-    };
-    return (React__default['default'].createElement(core.Box, { className: classes.root, minHeight: (isLoading || isEmpty) && enableMinHeight ? 618 : 'unset' },
-        React__default['default'].createElement(core.Box, { className: classes.tableWrap, minHeight: page.length > 0 && !isLoading && enableMinHeight ? 618 : 'unset' },
-            React__default['default'].createElement("table", __assign({ className: classes.table }, getTableProps()),
-                React__default['default'].createElement(TableHeader, null, headerGroups.map(function (headerGroup) { return (React__default['default'].createElement(TableHeaderRow, __assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) { return (React__default['default'].createElement(TableHeaderCell, __assign({}, column.getHeaderProps(column.getSortByToggleProps()), { column: __assign(__assign({}, column), { isActionColumn: column.id === actionColumnId }), tableProps: props }), column.render('Header'))); }))); })),
-                !isEmpty && !isLoading && (React__default['default'].createElement(TableBody, __assign({}, getTableBodyProps()), page.map(function (row) {
-                    prepareRow(row);
-                    return (React__default['default'].createElement(TableRow, __assign({}, row.getRowProps()), row.cells.map(function (cell) { return (React__default['default'].createElement(TableCell, __assign({}, cell.getCellProps()), cell.render('Cell'))); })));
-                }))))),
-        isEmpty && (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
-            EmptyImage && EmptyImage(),
-            React__default['default'].createElement(Typography, null, emptyMessage))),
-        isLoading && (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
-            React__default['default'].createElement(CircularProgress__default['default'], { size: 80, color: "inherit" }))),
-        isPaginated && !isLoading && (React__default['default'].createElement(TableFooter, null,
-            React__default['default'].createElement(lab.Pagination, { count: pageCount, page: state.pageIndex + 1, onChange: handlePagination })))));
-};
-Table.defaultProps = {
-    emptyMessage: 'No results.',
-    enableMinHeight: true,
-};
-
 var useToggleButtonStyles = styles.makeStyles(function (theme) { return ({
     root: {
         color: theme.palette.text.primary,
@@ -1815,7 +1552,6 @@ exports.PaperContent = PaperContent;
 exports.Radio = Radio;
 exports.SplitInput = SplitInput;
 exports.Switch = Switch;
-exports.Table = Table;
 exports.ToggleButton = ToggleButton;
 exports.ToggleButtonGroup = ToggleButtonGroup;
 exports.Tooltip = Tooltip;