@popmenu/admin-ui 0.9.0 → 0.11.0

package/build/index.js

@@ -14,6 +14,27 @@ var createTheme = require('@material-ui/core/styles/createTheme');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () {
+                        return e[k];
+                    }
+                });
+            }
+        });
+    }
+    n['default'] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var MuiAlertTitle__default = /*#__PURE__*/_interopDefaultLegacy(MuiAlertTitle);
 var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
@@ -107,8 +128,119 @@ function __spreadArray(to, from, pack) {
     return to.concat(ar || from);
 }
 
+var _path$4n, _path2$1p;
+
+function _extends$4E() { _extends$4E = 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$4E.apply(this, arguments); }
+
+function SvgCheckCircle(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4E({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$4n || (_path$4n = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M14.667 7.387V8a6.666 6.666 0 11-3.954-6.093"
+  })), _path2$1p || (_path2$1p = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M14.667 2.667L8 9.34l-2-2"
+  })));
+}
+
+var _path$4k;
+
+function _extends$4B() { _extends$4B = 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$4B.apply(this, arguments); }
+
+function SvgX(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4B({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$4k || (_path$4k = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M12 4l-8 8m0-8l8 8"
+  })));
+}
+
+var _path$3$;
+
+function _extends$4g() { _extends$4g = 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$4g.apply(this, arguments); }
+
+function SvgInfo(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4g({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$3$ || (_path$3$ = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.333a6.667 6.667 0 000 13.334zm0-4V8m0-2.667h.007"
+  })));
+}
+
+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); }
+
+function SvgError(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3q({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$3a || (_path$3a = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M5.24 1.333h5.52l3.907 3.907v5.52l-3.907 3.907H5.24L1.333 10.76V5.24L5.24 1.333zm2.76 4V8m0 2.667h.008"
+  })));
+}
+
+var _path$39;
+
+function _extends$3p() { _extends$3p = 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$3p.apply(this, arguments); }
+
+function SvgWarning(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3p({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$39 || (_path$39 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M6.86 2.573L1.213 12a1.333 1.333 0 001.14 2h11.294a1.334 1.334 0 001.14-2L9.14 2.573a1.333 1.333 0 00-2.28 0v0zM8 6v2.667m0 2.666h.007"
+  })));
+}
+
+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); }
+
+function SvgCircle(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$10({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$S || (_path$S = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.333a6.667 6.667 0 000 13.334z"
+  })));
+}
+
 var useAlertStyles = styles.makeStyles(function (theme) { return ({
     root: {
+        alignItems: 'center',
         width: function (_a) {
             var fullWidth = _a.fullWidth;
             return (fullWidth ? '100%' : 'unset');
@@ -120,14 +252,21 @@ var useAlertStyles = styles.makeStyles(function (theme) { return ({
     },
 }); });
 
+var severityIcons$1 = {
+    info: SvgInfo,
+    error: SvgError,
+    warning: SvgWarning,
+    success: SvgCheckCircle,
+};
 var Alert = React.forwardRef(function (props, ref) {
     var children = props.children, link = props.link, _a = props.severity, severity = _a === void 0 ? 'error' : _a, _b = props.variant, variant = _b === void 0 ? 'outlined' : _b, onClose = props.onClose, muiProps = __rest(props, ["children", "link", "severity", "variant", "onClose"]);
     var classes = useAlertStyles(props);
     var validLink = link && link.href && link.text && { href: link.href, children: link.text };
     var Action = (React__default['default'].createElement(React__default['default'].Fragment, null,
         validLink && React__default['default'].createElement(commonUi.Link, __assign({}, validLink)),
-        React__default['default'].createElement(commonUi.IconButton, { onClick: onClose, icon: "cancel" })));
-    return (React__default['default'].createElement(commonUi.Alert, __assign({ ref: ref, classes: classes, icon: React__default['default'].createElement(commonUi.Icon, { size: "medium", name: severity }), action: Action, variant: variant, severity: severity }, muiProps), children));
+        React__default['default'].createElement(commonUi.IconButton, { onClick: onClose },
+            React__default['default'].createElement(commonUi.Icon, { icon: SvgX }))));
+    return (React__default['default'].createElement(commonUi.Alert, __assign({ ref: ref, classes: classes, icon: React__default['default'].createElement(commonUi.Icon, { icon: severityIcons$1[severity] }), action: Action, variant: variant, severity: severity }, muiProps), children));
 });
 Alert.displayName = 'Alert';
 
@@ -325,19 +464,26 @@ var useAlertDialogStyles = styles.makeStyles(function (theme) { return ({
     },
 }); });
 
+var severityIcons = {
+    info: SvgInfo,
+    error: SvgError,
+    warning: SvgWarning,
+    success: SvgCheckCircle,
+};
 var AlertDialog = React.forwardRef(function (props, ref) {
     var children = props.children, labelId = props.labelId, descriptionId = props.descriptionId, _a = props.severity, severity = _a === void 0 ? 'info' : _a, _b = props.proceedButtonText, proceedButtonText = _b === void 0 ? 'proceed' : _b, onClose = props.onClose, onCancel = props.onCancel, onProceed = props.onProceed, DialogProps = __rest(props, ["children", "labelId", "descriptionId", "severity", "proceedButtonText", "onClose", "onCancel", "onProceed"]);
     var classes = useAlertDialogStyles(props);
     return (React__default['default'].createElement(commonUi.Dialog, __assign({ ref: ref, classes: { paper: classes.root } }, DialogProps),
         React__default['default'].createElement(commonUi.Card, { classes: { root: classes.card }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": labelId, "aria-describedby": descriptionId },
-            React__default['default'].createElement(commonUi.IconButton, { className: classes.cancelIcon, icon: "cancel", size: "small", onClick: onClose }),
+            React__default['default'].createElement(commonUi.IconButton, { className: classes.cancelIcon, onClick: onClose },
+                React__default['default'].createElement(commonUi.Icon, { icon: SvgX })),
             React__default['default'].createElement(commonUi.CardContent, null,
                 React__default['default'].createElement(commonUi.Box, { display: "flex" },
-                    React__default['default'].createElement(commonUi.Icon, { className: classes.icon, color: severity, name: severity }),
+                    React__default['default'].createElement(commonUi.Icon, { className: classes.icon, color: severity, icon: severityIcons[severity] }),
                     React__default['default'].createElement(commonUi.Box, { pl: 2, pr: 3 }, children))),
             React__default['default'].createElement(commonUi.CardActions, { classes: { root: classes.cardActions } },
                 React__default['default'].createElement(Button, { onClick: onCancel, variant: "ghost" }, "Cancel"),
-                React__default['default'].createElement(Button, { onClick: onProceed, variant: severity }, proceedButtonText)))));
+                React__default['default'].createElement(Button, { onClick: onProceed, variant: "ghost" }, proceedButtonText)))));
 });
 AlertDialog.displayName = 'AlertDialog';
 
@@ -400,126 +546,41 @@ var ButtonGroup = React.forwardRef(function (props, ref) {
 });
 ButtonGroup.displayName = 'ButtonGroup';
 
-var useDimensions = function () {
-    var _a = React.useState(undefined), width = _a[0], setWidth = _a[1];
-    var _b = React.useState(undefined), height = _b[0], setHeight = _b[1];
-    var ref = React.useRef(null);
-    React.useEffect(function () {
-        var observer = new ResizeObserver(function (entries) {
-            setWidth(entries[0].borderBoxSize[0].inlineSize);
-            setHeight(entries[0].contentRect.height);
-        });
-        var node = ref.current;
-        observer.observe(node);
-        return function () {
-            observer.unobserve(node);
-        };
-    });
-    return { height: height, ref: ref, width: width };
-};
-
 var useFeatureIntroStyles = styles.makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
-            display: 'grid',
-            gridTemplateColumns: function (_a) {
-                var columnWidth = _a.columnWidth;
-                return "repeat(auto-fit, minmax(" + columnWidth + "px, 1fr))";
-            },
-            rowGap: spacing(2),
-            columnGap: spacing(2),
-            padding: function (_a) {
-                var singleColumn = _a.singleColumn;
-                return (singleColumn ? spacing(0, 4) : spacing(8));
-            },
-            alignItems: 'center',
-            justifyItems: 'center',
-        },
-        info: {
-            gridColumn: 1,
-            display: 'grid',
-            alignContent: 'center',
-            justifyItems: function (_a) {
-                var singleColumn = _a.singleColumn;
-                return (singleColumn ? 'center' : 'start');
-            },
-            gridTemplateRows: "auto " + spacing(2) + "px auto " + spacing(6) + "px auto",
-        },
-        body: {
-            gridRowStart: 3,
-            textAlign: function (_a) {
-                var singleColumn = _a.singleColumn;
-                return (singleColumn ? 'center' : 'start');
-            },
+            gap: spacing(3),
         },
         actions: {
-            display: 'inline-grid',
-            width: 'fit-content',
-            paddingBlockEnd: function (_a) {
-                var singleColumn = _a.singleColumn;
-                return (singleColumn ? spacing(4) : 0);
-            },
-            gridTemplateColumns: 'auto',
-            gridTemplateRows: "auto " + spacing(3) + "px auto",
-            gridRowStart: 5,
-        },
-        secondaryAction: {
-            gridRowStart: 3,
+            gap: spacing(3),
         },
         image: {
-            gridRow: function (_a) {
-                var singleColumn = _a.singleColumn;
-                return (singleColumn ? 1 : 'unset');
-            },
-            paddingBlockStart: function (_a) {
-                var singleColumn = _a.singleColumn;
-                return (singleColumn ? spacing(4) : 0);
-            },
-            maxHeight: 450,
-            maxWidth: 450,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            overflow: 'hidden',
-            '& img': {
-                width: '100%',
-                height: function (_a) {
-                    var singleColumn = _a.singleColumn;
-                    return (singleColumn ? 300 : 450);
-                },
-                objectFit: 'contain',
-            },
+            width: '100%',
+            objectFit: 'contain',
         },
     });
 });
 
-var useStyleProps = function (props, width) {
-    var columnWidth = 250;
-    // column widths*2 + column gap + 2XL-spacing*2
-    var breakpoint = columnWidth * 2 + 16 + 64 * 2;
-    var singleColumn = width ? width < breakpoint : true;
-    return __assign(__assign({}, props), { columnWidth: columnWidth, singleColumn: singleColumn, width: width });
-};
 var FeatureIntro = function (props) {
     var title = props.title, body = props.body, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, image = props.image;
     var primaryActionLabel = primaryAction.label, primaryActionProps = __rest(primaryAction, ["label"]);
-    var secondaryActionLabel = secondaryAction.label, secondaryActionProps = __rest(secondaryAction, ["label"]);
-    var _a = useDimensions(), width = _a.width, ref = _a.ref;
-    var styleProps = useStyleProps(props, width);
-    var classes = useFeatureIntroStyles(styleProps);
+    var _a = secondaryAction || {}, secondaryActionLabel = _a.label, secondaryActionProps = __rest(_a, ["label"]);
+    var classes = useFeatureIntroStyles(props);
     var validImage = (image === null || image === void 0 ? void 0 : image.src) && (image === null || image === void 0 ? void 0 : image.alt);
     return (
     /** Needed to use extra ts syntax to trick Box into accepting ref, issue to be fixed in MUI v5 */
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    React__default['default'].createElement(commonUi.Box, __assign({}, { ref: ref }, { className: classes.root }),
-        React__default['default'].createElement(commonUi.Box, { className: classes.info },
-            React__default['default'].createElement(commonUi.Typography, { variant: "h4" }, title),
-            React__default['default'].createElement(commonUi.Box, { className: classes.body }, body),
-            React__default['default'].createElement(commonUi.Box, { className: classes.actions },
+    React__default['default'].createElement(commonUi.Box, { className: classes.root, padding: { xs: 4, sm: 8 }, flexDirection: { xs: 'column-reverse', sm: 'row' }, display: "flex", justifyContent: "center", alignItems: "center" },
+        React__default['default'].createElement(commonUi.Box, { display: "flex", flexDirection: "column", width: { xs: '100%', sm: '50%' }, alignItems: { xs: 'center', sm: 'unset' } },
+            React__default['default'].createElement(commonUi.Box, { textAlign: { xs: 'center', sm: 'start' }, marginBottom: 2 },
+                React__default['default'].createElement(commonUi.Typography, { align: "inherit", variant: "h4" }, title)),
+            React__default['default'].createElement(commonUi.Box, { textAlign: { xs: 'center', sm: 'start' }, marginBottom: 6 }, body),
+            React__default['default'].createElement(commonUi.Box, { className: classes.actions, display: "flex", flexDirection: "column", width: "fit-content" },
                 primaryAction && React__default['default'].createElement(Button, __assign({}, primaryActionProps), primaryActionLabel),
-                secondaryAction && (React__default['default'].createElement(Button, __assign({ className: classes.secondaryAction, variant: "tertiary" }, secondaryActionProps), secondaryActionLabel)))),
-        React__default['default'].createElement(commonUi.Box, { className: classes.image }, validImage && React__default['default'].createElement("img", { src: image.src, alt: image.alt }))));
+                secondaryAction && (React__default['default'].createElement(Button, __assign({ variant: "tertiary" }, secondaryActionProps), secondaryActionLabel)))),
+        React__default['default'].createElement(commonUi.Box, { display: "flex", width: { xs: '100%', sm: '50%' }, alignItems: "center", justifyContent: "center" },
+            React__default['default'].createElement(commonUi.Box, { display: "flex", maxWidth: 450, maxHeight: 450 }, validImage && React__default['default'].createElement("img", { src: image.src, alt: image.alt, className: classes.image })))));
 };
 FeatureIntro.displayName = 'FeatureIntro';
 
@@ -613,7 +674,7 @@ var FullScreenStepperActions = function (props) {
             React__default['default'].createElement(StepperActionsStatusText, { statusText: statusText })),
         React__default['default'].createElement(commonUi.Box, { className: classes.inlineEndActions },
             actions &&
-                actions.map(function (action, i) { return (React__default['default'].createElement(Button, { key: "custom-action-" + stepCursor + "-" + i, variant: "ghost", onClick: action.onClick }, action.text)); }),
+                actions.map(function (action, i) { return (React__default['default'].createElement(Button, __assign({ key: "custom-action-" + stepCursor + "-" + i, variant: "ghost", onClick: action.onClick }, action.props), action.text)); }),
             React__default['default'].createElement(StepperActionsCancelButton, { setStepCursor: setStepCursor, stepCursor: stepCursor, cancelButtonText: cancelButtonText, cancelButtonProps: cancelButtonProps, handleCancelClick: handleCancelClick, displayCancelButton: displayCancelButton }),
             React__default['default'].createElement(StepperActionsNextButton, { handleNextClick: handleNextClick, nextButtonProps: nextButtonProps, setStepCursor: setStepCursor, stepCursor: stepCursor, stepCount: stepCount, finishButtonText: finishButtonText, nextButtonText: nextButtonText }))));
 };
@@ -687,7 +748,8 @@ var FullScreenStepperHeader = function (props) {
             stepCursor,
             " of ",
             stepCount),
-        React__default['default'].createElement(commonUi.IconButton, { className: classes.closeButton, icon: "cancel", onClick: onClose }),
+        React__default['default'].createElement(commonUi.IconButton, { className: classes.closeButton, onClick: onClose },
+            React__default['default'].createElement(commonUi.Icon, { icon: SvgX })),
         React__default['default'].createElement(FullScreenStepperProgress, { stepCount: stepCount, stepCursor: stepCursor })));
 };
 
@@ -840,7 +902,7 @@ var SelectableCard = function (props) {
     };
     return (React__default['default'].createElement(commonUi.Card, __assign({ classes: { root: classes.root } }, muiProps),
         React__default['default'].createElement(commonUi.CardActionArea, { onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected, "aria-labelledby": labelId },
-            React__default['default'].createElement(commonUi.Icon, { className: classes.icon, name: selected ? 'check-circle' : 'unchecked', size: "medium" }),
+            React__default['default'].createElement(commonUi.Icon, { className: classes.icon, icon: selected ? SvgCheckCircle : SvgCircle, size: "medium" }),
             React__default['default'].createElement(commonUi.CardContent, { classes: { root: classes.cardContent } }, children))));
 };
 SelectableCard.displayName = 'SelectableCard';