@popmenu/admin-ui 0.32.0 → 0.35.0

package/build/index.js

@@ -34,6 +34,7 @@ require('@material-ui/core/InputAdornment');
 require('@material-ui/core/LinearProgress');
 require('@material-ui/core/List');
 require('@material-ui/core/ListItem');
+require('@material-ui/core/ListItemAvatar');
 require('@material-ui/core/ListItemIcon');
 require('@material-ui/core/ListItemSecondaryAction');
 require('@material-ui/core/ListItemText');
@@ -227,19 +228,19 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$D;
+var _path$F;
 
-function _extends$16() { _extends$16 = 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$16.apply(this, arguments); }
+function _extends$1c() { _extends$1c = 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$1c.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$16({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1c({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$D || (_path$D = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$F || (_path$F = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z",
     stroke: "currentColor"
   })));
@@ -281,7 +282,7 @@ var useIconStyles = core.makeStyles(function (_a) {
     };
 });
 
-var classnames = {exports: {}};
+var classnames$1 = {exports: {}};
 
 /*!
   Copyright (c) 2018 Jed Watson.
@@ -337,9 +338,9 @@ var classnames = {exports: {}};
 		window.classNames = classNames;
 	}
 }());
-}(classnames));
+}(classnames$1));
 
-var classNames = classnames.exports;
+var classNames$1 = classnames$1.exports;
 
 var iconStaticClassName = 'pop-icon';
 var Icon = function (props) {
@@ -350,7 +351,7 @@ var Icon = function (props) {
         isValid = false;
     }
     return isValid
-        ? React.createElement(icon, __assign({ className: classNames([classes.root, iconStaticClassName, className]) }, restProps))
+        ? React.createElement(icon, __assign({ className: classNames$1([classes.root, iconStaticClassName, className]) }, restProps))
         : null;
 };
 Icon.defaultProps = {
@@ -461,7 +462,7 @@ var Button$1 = React.forwardRef(function (props, ref) {
         startIcon: React__default['default'].createElement(CircularProgress__default['default'], { color: "inherit", size: typography.button.fontSize }),
         disabled: true,
     };
-    return (React__default['default'].createElement(MuiButton__default['default'], __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), className: classNames([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
+    return (React__default['default'].createElement(MuiButton__default['default'], __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), className: classNames$1([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
 });
 Button$1.displayName = 'Button';
 
@@ -642,7 +643,7 @@ Link.defaultProps = {
 };
 Link.displayName = 'Link';
 
-var useStyles$2 = core.makeStyles(function (_a) {
+var useStyles$4 = core.makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -656,7 +657,7 @@ var useStyles$2 = core.makeStyles(function (_a) {
 });
 var Paper = React.forwardRef(function (props, ref) {
     var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
-    var classes = useStyles$2(props);
+    var classes = useStyles$4(props);
     return React__default['default'].createElement(core.Paper, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
 });
 Paper.displayName = 'Paper';
@@ -809,19 +810,19 @@ core.makeStyles(function (theme) { return ({
     },
 }); });
 
-var _g$J;
+var _g$M;
 
-function _extends$1O() { _extends$1O = 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$1O.apply(this, arguments); }
+function _extends$1R() { _extends$1R = 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$1R.apply(this, arguments); }
 
 function SvgCheckCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1O({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1R({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$J || (_g$J = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$M || (_g$M = /*#__PURE__*/React__namespace.createElement("g", {
     stroke: "currentColor"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     d: "M14.667 7.387V8a6.667 6.667 0 11-3.954-6.093"
@@ -832,10 +833,10 @@ function SvgCheckCircle(props) {
 
 var _path$14;
 
-function _extends$1M() { _extends$1M = 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$1M.apply(this, arguments); }
+function _extends$1P() { _extends$1P = 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$1P.apply(this, arguments); }
 
 function SvgX(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1M({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1P({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
@@ -848,19 +849,19 @@ function SvgX(props) {
   })));
 }
 
-var _g$E;
+var _g$H;
 
-function _extends$1C() { _extends$1C = 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$1C.apply(this, arguments); }
+function _extends$1F() { _extends$1F = 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$1F.apply(this, arguments); }
 
 function SvgHelp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1C({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1F({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$E || (_g$E = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$H || (_g$H = /*#__PURE__*/React__namespace.createElement("g", {
     stroke: "currentColor"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333z"
@@ -871,10 +872,10 @@ function SvgHelp(props) {
 
 var _path$Z;
 
-function _extends$1A() { _extends$1A = 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$1A.apply(this, arguments); }
+function _extends$1D() { _extends$1D = 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$1D.apply(this, arguments); }
 
 function SvgInfo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1A({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1D({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
@@ -889,10 +890,10 @@ function SvgInfo(props) {
 
 var _path$C;
 
-function _extends$15() { _extends$15 = 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$15.apply(this, arguments); }
+function _extends$18() { _extends$18 = 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$18.apply(this, arguments); }
 
 function SvgError(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$15({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$18({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
@@ -907,10 +908,10 @@ function SvgError(props) {
 
 var _path$B;
 
-function _extends$14() { _extends$14 = 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$14.apply(this, arguments); }
+function _extends$17() { _extends$17 = 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$17.apply(this, arguments); }
 
 function SvgWarning(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$14({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$17({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
@@ -925,10 +926,10 @@ function SvgWarning(props) {
 
 var _path$b;
 
-function _extends$p() { _extends$p = 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$p.apply(this, arguments); }
+function _extends$r() { _extends$r = 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$r.apply(this, arguments); }
 
 function SvgCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
@@ -1343,14 +1344,14 @@ var StepperActionsPreviousButton = function (props) {
     return displayPreviousButton ? (React__default['default'].createElement(Button, __assign$1({ variant: "tertiary", disabled: stepCursor === 1 }, augmentedPreviousButtonProps), previousButtonText || 'previous')) : null;
 };
 
-var useStyles$1 = styles.makeStyles({
+var useStyles$3 = styles.makeStyles({
     root: {
         fontStyle: 'italic',
     },
 });
 var StepperActionsStatusText = function (props) {
     var statusText = props.statusText;
-    var classes = useStyles$1(props);
+    var classes = useStyles$3(props);
     return statusText ? (React__default['default'].createElement(Typography, { classes: { root: classes.root }, variant: "body2" }, statusText)) : null;
 };
 
@@ -1636,7 +1637,7 @@ Toast.defaultProps = {
 };
 Toast.displayName = 'Toast';
 
-var useStyles = core.makeStyles(function (_a) {
+var useStyles$2 = core.makeStyles(function (_a) {
     var palette = _a.palette;
     return ({
         root: {
@@ -1645,7 +1646,7 @@ var useStyles = core.makeStyles(function (_a) {
     });
 });
 var DialogActions = function (props) {
-    var classes = useStyles(props);
+    var classes = useStyles$2(props);
     return React__default['default'].createElement(CommonDialogActions__default['default'], __assign$1({ classes: classes }, props));
 };
 
@@ -1659,30 +1660,46 @@ var PageBody = function (props) {
     return (React__default['default'].createElement(core.Box, __assign$1({ py: 2, px: 5.5, maxWidth: 1100, width: "100%" }, restProps), children));
 };
 
-var PageSection = function (props) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    return (React__default['default'].createElement(Card__default['default'], __assign$1({}, restProps),
+var usePageSectionStyles = core.makeStyles(function () { return ({
+    root: {
+        background: function (_a) {
+            var uncontained = _a.uncontained;
+            return (uncontained ? 'transparent' : undefined);
+        },
+    },
+}); });
+
+var PageSection = React.forwardRef(function (props, ref) {
+    var children = props.children; props.uncontained; var restProps = __rest$1(props, ["children", "uncontained"]);
+    var classes = usePageSectionStyles(props);
+    return (React__default['default'].createElement(Card__default['default'], __assign$1({ classes: { root: classes.root }, ref: ref }, restProps),
         React__default['default'].createElement(CardContent__default['default'], null, children)));
-};
+});
+PageSection.displayName = 'PageSection';
 
 var PageSections = function (props) {
     var children = props.children, restProps = __rest$1(props, ["children"]);
     return (React__default['default'].createElement(core.Box, __assign$1({ display: "flex", flexDirection: "column", gridGap: 16 }, restProps), children));
 };
 
+var PageSectionHead = function (props) {
+    var children = props.children, restProps = __rest$1(props, ["children"]);
+    return (React__default['default'].createElement(core.Box, __assign$1({ display: "flex", justifyContent: "space-between", mb: 1.5 }, restProps), children));
+};
+
 var PageSectionTitle = function (props) {
     var children = props.children, restProps = __rest$1(props, ["children"]);
-    return (React__default['default'].createElement(core.Box, __assign$1({}, restProps),
-        React__default['default'].createElement(Typography, { gutterBottom: true, variant: "h4" }, children)));
+    return (React__default['default'].createElement(Typography, __assign$1({ gutterBottom: true, variant: "h5" }, restProps), children));
 };
 
 var SettingsIndexCardGroup = function (props) {
     var children = props.children, restProps = __rest$1(props, ["children"]);
-    return (React__default['default'].createElement(core.Box, __assign$1({ display: "grid", gridGap: 16, gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))" }, restProps), children));
+    return (React__default['default'].createElement(core.Box, __assign$1({ display: "grid", gridGap: 16, gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))" }, restProps), children));
 };
 
 var useSettingsIndexCardStyles = styles.makeStyles(function (theme) { return ({
     cardRoot: {
+        border: "1px solid " + theme.palette.grey[300],
         alignSelf: 'stretch',
         flexGrow: 1,
         '&:hover': {
@@ -1712,6 +1729,120 @@ var SettingsIndexCard = React.forwardRef(function (props, ref) {
 });
 SettingsIndexCard.displayName = 'SettingsIndexCard';
 
+var classnames = {exports: {}};
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				} else {
+					classes.push(arg.toString());
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+}(classnames));
+
+var classNames = classnames.exports;
+
+var useStyles$1 = core.makeStyles(function (theme) { return ({
+    root: {
+        '&$uncontained > li > *:first-child': {
+            background: theme.palette.background.paper,
+            borderRadius: theme.spacing(1),
+        },
+        '& > li > *:first-child': {
+            borderBottom: "1px solid " + theme.palette.grey[300],
+        },
+        '& > li:last-child > *:first-child': {
+            borderBottom: 'none',
+        },
+    },
+    uncontained: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+    },
+}); });
+
+var List = function (props) {
+    var _a;
+    var children = props.children, uncontained = props.uncontained, className = props.className, restProps = __rest$1(props, ["children", "uncontained", "className"]);
+    var classes = useStyles$1(props);
+    return (React__default['default'].createElement(core.List, __assign$1({ classes: classes, className: classNames((_a = {}, _a[classes.uncontained] = uncontained, _a), className) }, restProps), children));
+};
+
+var useStyles = core.makeStyles(function (theme) { return ({
+    chipRoot: {
+        marginRight: theme.spacing(4),
+        cursor: 'pointer',
+    },
+}); });
+/**
+ * TODO
+ * - clean props util
+ * - Avatar size and shape
+ */
+var StandardListItem = function (props) {
+    props.itemId; var title = props.title, meta = props.meta, body = props.body, image = props.image, status = props.status, secondaryAction = props.secondaryAction, onClick = props.onClick, restProps = __rest$1(props, ["itemId", "title", "meta", "body", "image", "status", "secondaryAction", "onClick"]);
+    var classes = useStyles(props);
+    return (React__default['default'].createElement(core.ListItem, __assign$1({ button: Boolean(onClick), onClick: function (e) { return onClick && onClick(e, props); } }, restProps),
+        image && (React__default['default'].createElement(core.ListItemAvatar, null,
+            React__default['default'].createElement(Avatar, { src: image.src, alt: image.alt }, image.Icon && React__default['default'].createElement(Icon, { icon: image.Icon })))),
+        React__default['default'].createElement(core.ListItemText, { disableTypography: true },
+            React__default['default'].createElement(Typography, { variant: "h6" }, title),
+            meta && (React__default['default'].createElement(Typography, { variant: "body2", color: "secondary.light" }, meta)),
+            body && (React__default['default'].createElement(Typography, { variant: "body2", color: "grey.700" }, body))),
+        status && (React__default['default'].createElement(core.Chip, { classes: { root: classes.chipRoot }, icon: status.Icon && React__default['default'].createElement(Icon, { icon: status.Icon }), label: status.text })),
+        secondaryAction && (React__default['default'].createElement(core.ListItemSecondaryAction, null,
+            React__default['default'].createElement(core.IconButton, { style: { color: 'black' }, "aria-label": secondaryAction['aria-label'], onClick: function (e) { return secondaryAction.onClick(e, props); } },
+                React__default['default'].createElement(Icon, { icon: secondaryAction.Icon }))))));
+};
+
 var useFullScreenStepperContext = function () { return React.useContext(FullScreenStepperContext); };
 
 /**
@@ -1759,6 +1890,15 @@ var useSelectableCard = function (config) {
     return { card: { onClick: onClick, selection: selection }, selection: selection, setSelection: setSelection };
 };
 
+var useDialog = function () {
+    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var toggle = function () { return setOpen(function (current) { return !current; }); };
+    var close = function () { return setOpen(false); };
+    var triggerProps = { onClick: toggle };
+    var dialogProps = { open: open, onClose: close };
+    return [triggerProps, dialogProps, { open: open, setOpen: setOpen, toggle: toggle, close: close }];
+};
+
 var fonts = ['"Poppins"', '"sans-serif"'];
 var adminThemeTypography = {
     htmlFontSize: 16,
@@ -2012,19 +2152,23 @@ exports.FeatureIntro = FeatureIntro;
 exports.FullScreenStepper = FullScreenStepper;
 exports.FullScreenStepperContent = FullScreenStepperContent;
 exports.FullScreenStepperContext = FullScreenStepperContext;
+exports.List = List;
 exports.Page = Page;
 exports.PageBody = PageBody;
 exports.PageSection = PageSection;
+exports.PageSectionHead = PageSectionHead;
 exports.PageSectionTitle = PageSectionTitle;
 exports.PageSections = PageSections;
 exports.SelectableCard = SelectableCard;
 exports.SettingsIndexCard = SettingsIndexCard;
 exports.SettingsIndexCardGroup = SettingsIndexCardGroup;
+exports.StandardListItem = StandardListItem;
 exports.Toast = Toast;
 exports.adminDark = adminDark;
 exports.adminDarkOptions = adminDarkOptions;
 exports.adminLight = adminLight;
 exports.adminLightOptions = adminLightOptions;
+exports.useDialog = useDialog;
 exports.useFullScreenStepperContext = useFullScreenStepperContext;
 exports.useSelectableCard = useSelectableCard;
 //# sourceMappingURL=index.js.map