@popmenu/common-ui 0.18.4-alpha.1 → 0.18.4-alpha.2

package/build/components/index.d.ts

@@ -63,7 +63,6 @@ export { default as StepLabel, StepLabelProps } from './StepLabel';
 export { default as Stepper, StepperProps } from './Stepper';
 export { default as SplitInput, SplitInputProps } from './SplitInput';
 export { default as Switch, SwitchProps } from './Switch';
-export { default as Table, TableProps } from './Table';
 export { default as Tab, TabProps } from './Tab';
 export { default as Tabs, TabsProps } from './Tabs';
 export { default as TextField, TextFieldProps } from './TextField';

package/build/index.es.js

@@ -40,17 +40,13 @@ export { default as ListItem } from '@material-ui/core/ListItem';
 export { default as ListItemIcon } from '@material-ui/core/ListItemIcon';
 export { default as ListItemSecondaryAction } from '@material-ui/core/ListItemSecondaryAction';
 export { default as ListItemText } from '@material-ui/core/ListItemText';
-import Menu from '@material-ui/core/Menu';
 export { default as Menu } from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
 export { default as MenuItem } from '@material-ui/core/MenuItem';
 export { default as MenuList } from '@material-ui/core/MenuList';
 import MuiRadio from '@material-ui/core/Radio';
 import TextField from '@material-ui/core/TextField';
 export { default as TextField } from '@material-ui/core/TextField';
 import MuiSwitch from '@material-ui/core/Switch';
-import { useTable, useSortBy, usePagination } from 'react-table';
-import { Pagination } from '@material-ui/lab';
 export { default as Tab } from '@material-ui/core/Tab';
 export { default as Tabs } from '@material-ui/core/Tabs';
 import MuiToggleButton from '@material-ui/lab/ToggleButton';
@@ -93,70 +89,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.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$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$1f;
@@ -1058,203 +990,6 @@ var Switch = forwardRef(function (props, ref) {
 });
 Switch.displayName = 'Switch';
 
-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(props, ["children"]);
-    return React__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 = 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 = 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.createElement("th", __assign({ 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(props, ["children"]);
-    return React__default.createElement("tr", __assign({}, 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(props, ["children"]);
-    var root = useTableRowStyles(props).root;
-    return (React__default.createElement("tr", __assign({ className: root }, restProps), children));
-};
-
-var TableBody = function (props) {
-    var children = props.children, restProps = __rest(props, ["children"]);
-    return React__default.createElement("tbody", __assign({}, 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(props, ["children"]);
-    var root = useTableCellStyles(props).root;
-    return (React__default.createElement("td", __assign({ 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(__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.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({ 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({}, 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({ className: classes.table }, getTableProps()),
-                React__default.createElement(TableHeader, null, headerGroups.map(function (headerGroup) { return (React__default.createElement(TableHeaderRow, __assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) { return (React__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.createElement(TableBody, __assign({}, getTableBodyProps()), page.map(function (row) {
-                    prepareRow(row);
-                    return (React__default.createElement(TableRow, __assign({}, row.getRowProps()), row.cells.map(function (cell) { return (React__default.createElement(TableCell, __assign({}, 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 useToggleButtonStyles = makeStyles$1(function (theme) { return ({
     root: {
         color: theme.palette.text.primary,
@@ -1333,5 +1068,5 @@ var useCollapsibleText = function () {
     };
 };
 
-export { AudioPlayer, Avatar, Button, Checkbox, CollapsibleText, Divider, Icon, IconButton, Link, Paper, PaperContent, Radio, SplitInput, Switch, Table, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useCollapsibleText };
+export { AudioPlayer, Avatar, Button, Checkbox, CollapsibleText, Divider, Icon, IconButton, Link, Paper, PaperContent, Radio, SplitInput, Switch, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useCollapsibleText };
 //# sourceMappingURL=index.es.js.map