@popmenu/admin-ui 0.18.4-alpha.2 → 0.19.2

package/build/components/index.d.ts

@@ -8,5 +8,4 @@ export { default as FeatureIntro, FeatureIntroProps } from './FeatureIntro';
 export { default as FullScreenStepper, FullScreenStepperProps, FullScreenStepperContext } from './FullScreenStepper';
 export { default as FullScreenStepperContent } from './FullScreenStepperContent';
 export { default as SelectableCard, SelectableCardProps } from './SelectableCard';
-export { default as Table, TableProps } from './Table';
 export { default as Toast, ToastProps } from './Toast';

package/build/index.es.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import React__default, { createElement, forwardRef, createContext, useState, useMemo, useContext } from 'react';
+import React__default, { createElement, forwardRef, createContext, useState, useContext } from 'react';
 import CommonAlert from '@material-ui/lab/Alert';
-import { makeStyles, Paper as Paper$1, Box, useTheme as useTheme$1 } from '@material-ui/core';
+import { makeStyles, Paper as Paper$1, Box } from '@material-ui/core';
 import '@material-ui/core/AppBar';
 import MuiIconButton from '@material-ui/core/IconButton';
 import MuiTypography from '@material-ui/core/Typography';
@@ -36,8 +36,8 @@ import '@material-ui/core/ListItem';
 import '@material-ui/core/ListItemIcon';
 import '@material-ui/core/ListItemSecondaryAction';
 import '@material-ui/core/ListItemText';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
+import '@material-ui/core/Menu';
+import '@material-ui/core/MenuItem';
 import '@material-ui/core/MenuList';
 import MuiRadio from '@material-ui/core/Radio';
 import '@material-ui/core/TextField';
@@ -49,8 +49,6 @@ import MuiToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import MuiTooltip from '@material-ui/core/Tooltip';
 import MuiAlertTitle from '@material-ui/lab/AlertTitle';
 import Box$1 from '@material-ui/core/Box';
-import { Pagination } from '@material-ui/lab';
-import { useTable, useSortBy, usePagination } from 'react-table';
 import MuiSnackbar from '@material-ui/core/Snackbar';
 import createTheme from '@material-ui/core/styles/createTheme';
 
@@ -835,24 +833,6 @@ function SvgInfo(props) {
   })));
 }
 
-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.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.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$3a;
 
 function _extends$3q() { _extends$3q = 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$3q.apply(this, arguments); }
@@ -889,42 +869,6 @@ function SvgWarning(props) {
   })));
 }
 
-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.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.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.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.createElement("path", {
-    d: "M12 10L8 6l-4 4"
-  })));
-}
-
 var _path$S;
 
 function _extends$10() { _extends$10 = 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$10.apply(this, arguments); }
@@ -1612,203 +1556,6 @@ var SelectableCard = function (props) {
 };
 SelectableCard.displayName = 'SelectableCard';
 
-var TableFooter = function (props) {
-    return (React__default.createElement(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$1(props, ["children"]);
-    return React__default.createElement("thead", __assign$1({}, 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 = 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$1(props, ["children", "column", "tableProps"]);
-    var root = useTableHeaderCellStyles(props).root;
-    var _a = useTheme$1(), 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.createElement("th", __assign$1({ className: root }, restProps),
-        React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: spacing(1) },
-            children,
-            showSortIndicator && (React__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$1(props, ["children"]);
-    return React__default.createElement("tr", __assign$1({}, restProps), children);
-};
-
-var useTableRowStyles = 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$1(props, ["children"]);
-    var root = useTableRowStyles(props).root;
-    return (React__default.createElement("tr", __assign$1({ className: root }, restProps), children));
-};
-
-var TableBody = function (props) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    return React__default.createElement("tbody", __assign$1({}, restProps), children);
-};
-
-var useTableCellStyles = makeStyles(function (theme) { return ({
-    root: function () { return ({
-        padding: theme.spacing(2),
-    }); },
-}); });
-
-var TableCell = function (props) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    var root = useTableCellStyles(props).root;
-    return (React__default.createElement("td", __assign$1({ className: root }, restProps), children));
-};
-
-var useTableStyles = 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$1(__assign$1({ 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$1(_a, ["primary", "secondary"]);
-    var tertiary = intermediate.tertiary, restActions = __rest$1(intermediate, ["tertiary"]);
-    var overflow = Object.keys(props.actions).length > 3;
-    var _b = React__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.createElement(Box, { display: "flex" },
-        primary && primary.icon && (React__default.createElement(IconButton, { size: "small", onClick: function () { return primary.action(props.cell); } },
-            React__default.createElement(Icon, { icon: primary.icon }))),
-        secondary && secondary.icon && (React__default.createElement(IconButton, { size: "small", onClick: function () { return secondary.action(props.cell); } },
-            React__default.createElement(Icon, { icon: secondary.icon }))),
-        !overflow && tertiary && tertiary.icon && (React__default.createElement(IconButton, { size: "small", onClick: function () { return tertiary.action(props.cell); } },
-            React__default.createElement(Icon, { icon: tertiary.icon }))),
-        overflow && restActions && (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(IconButton, { size: "small", onClick: openMenu },
-                React__default.createElement(Icon, { icon: SvgMore })),
-            React__default.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: closeMenu }, Object.values(__assign$1({ tertiary: tertiary }, restActions))
-                .filter(function (value) { return value; })
-                .map(function (_a, i) {
-                var label = _a.label, action = _a.action;
-                return (React__default.createElement(MenuItem, { 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.createElement(TableActionsCell, __assign$1({}, 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 = useMemo(function () { return makeColumns({ columns: rawColumns, actions: actions, actionColumnId: actionColumnId }); }, [rawColumns, actions]);
-    // @ts-expect-error @types/react-table issue
-    var instance = useTable({ columns: columns, data: data, disableSortBy: !sortable }, useSortBy, usePagination);
-    // @ts-expect-error @types/react-table issue
-    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.createElement(Box, { className: classes.root, minHeight: (isLoading || isEmpty) && enableMinHeight ? 618 : 'unset' },
-        React__default.createElement(Box, { className: classes.tableWrap, minHeight: page.length > 0 && !isLoading && enableMinHeight ? 618 : 'unset' },
-            React__default.createElement("table", __assign$1({ className: classes.table }, getTableProps()),
-                React__default.createElement(TableHeader, null, headerGroups.map(function (headerGroup) { return (React__default.createElement(TableHeaderRow, __assign$1({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) { return (React__default.createElement(TableHeaderCell, __assign$1({}, column.getHeaderProps(column.getSortByToggleProps()), { column: __assign$1(__assign$1({}, column), { isActionColumn: column.id === actionColumnId }), tableProps: props }), column.render('Header'))); }))); })),
-                !isEmpty && !isLoading && (React__default.createElement(TableBody, __assign$1({}, getTableBodyProps()), page.map(function (row) {
-                    prepareRow(row);
-                    return (React__default.createElement(TableRow, __assign$1({}, row.getRowProps()), row.cells.map(function (cell) { return (React__default.createElement(TableCell, __assign$1({}, cell.getCellProps()), cell.render('Cell'))); })));
-                }))))),
-        isEmpty && (React__default.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
-            EmptyImage && EmptyImage(),
-            React__default.createElement(Typography, null, emptyMessage))),
-        isLoading && (React__default.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
-            React__default.createElement(CircularProgress, { size: 80, color: "inherit" }))),
-        isPaginated && !isLoading && (React__default.createElement(TableFooter, null,
-            React__default.createElement(Pagination, { count: pageCount, page: state.pageIndex + 1, onChange: handlePagination })))));
-};
-Table.defaultProps = {
-    emptyMessage: 'No results.',
-    enableMinHeight: true,
-};
-
 var useToastStyles = makeStyles$1(function (theme) { return ({
     root: {
         boxSizing: 'border-box',
@@ -2097,5 +1844,5 @@ var adminLight = createTheme(adminLightOptions);
 var adminDarkOptions = __assign$1(__assign$1(__assign$1(__assign$1(__assign$1({ themeName: 'Admin Dark', palette: __assign$1(__assign$1({}, basePalette), adminDarkPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography }, adminDarkPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps), adminOverrides);
 var adminDark = createTheme(adminDarkOptions);
 
-export { Alert, AlertDialog, AlertDialogHeader, AlertTitle, Button, ButtonGroup, FeatureIntro, FullScreenStepper, FullScreenStepperContent, FullScreenStepperContext, SelectableCard, Table, Toast, adminDark, adminDarkOptions, adminLight, adminLightOptions, useFullScreenStepperContext, useSelectableCard };
+export { Alert, AlertDialog, AlertDialogHeader, AlertTitle, Button, ButtonGroup, FeatureIntro, FullScreenStepper, FullScreenStepperContent, FullScreenStepperContext, SelectableCard, Toast, adminDark, adminDarkOptions, adminLight, adminLightOptions, useFullScreenStepperContext, useSelectableCard };
 //# sourceMappingURL=index.es.js.map