@popmenu/admin-ui 0.10.1 → 0.12.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';
 
@@ -163,7 +302,7 @@ var getColorHover = function (palette, props) {
     }
     return color;
 };
-var getBackground$1 = function (palette, props) {
+var getBackground = function (palette, props) {
     var backgroundColor = 'inherit';
     if (['info', 'success', 'warning', 'error'].includes(props.variant)) {
         backgroundColor = palette[props.variant].main;
@@ -180,7 +319,7 @@ var getBackground$1 = function (palette, props) {
     }
     return backgroundColor;
 };
-var getBackgroundHover$1 = function (palette, props) {
+var getBackgroundHover = function (palette, props) {
     var backgroundHoverColor = 'inherit';
     if (['primary', 'info', 'success', 'warning', 'error'].includes(props.variant)) {
         backgroundHoverColor = palette[props.variant].dark;
@@ -207,13 +346,13 @@ var useButtonStyles = core.makeStyles(function (_a) {
         root: function (props) { return ({
             minWidth: 'unset',
             color: getColor(palette, props),
-            background: getBackground$1(palette, props),
-            backgroundColor: props.variant === 'primary' ? palette.primary.dark : getBackground$1(palette, props),
+            background: getBackground(palette, props),
+            backgroundColor: props.variant === 'primary' ? palette.primary.dark : getBackground(palette, props),
             borderRadius: spacing(6),
             transition: 'all 200ms ease-in-out',
             '&:hover': {
                 color: getColorHover(palette, props),
-                background: getBackgroundHover$1(palette, props),
+                background: getBackgroundHover(palette, props),
             },
         }); },
         disabled: {
@@ -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';
 
@@ -528,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 }))));
 };
@@ -602,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 })));
 };
 
@@ -703,58 +850,6 @@ var FullScreenStepperContent = function (props) {
     return (React__default['default'].createElement(commonUi.Box, __assign({ py: 8 }, boxProps), props.children));
 };
 
-var getBackground = function (palette, props) {
-    var backgrounds = {
-        // @ts-expect-error gradient colors are included in the extended palette.
-        primary: "linear-gradient(97.36deg, " + palette.primary.gradientStart + " 17.03%, " + palette.primary.gradientEnd + " 72.96%)",
-        secondary: 'white',
-        tertiary: palette.secondary.main,
-    };
-    return backgrounds[props.variant || 'primary'];
-};
-var getBackgroundHover = function (palette, props) {
-    var backgrounds = {
-        primary: palette.primary.dark,
-        secondary: palette.secondary.main,
-        tertiary: palette.secondary.light,
-    };
-    return backgrounds[props.variant || 'primary'];
-};
-var useIconButtonStyles = core.makeStyles(function (_a) {
-    var palette = _a.palette, spacing = _a.spacing;
-    return ({
-        root: {
-            background: function (props) { return getBackground(palette, props); },
-            backgroundColor: function (props) { return (props.variant === 'primary' ? palette.primary.dark : getBackground(palette, props)); },
-            border: function (props) { return (props.variant === 'secondary' ? "1px solid " + palette.secondary.main : 'none'); },
-            color: function (props) { return (props.variant === 'secondary' ? palette.secondary.main : 'white'); },
-            transition: 'all 200ms ease-in-out',
-            '&:hover': {
-                background: function (props) { return getBackgroundHover(palette, props); },
-                color: 'white',
-            },
-            fontSize: spacing(2),
-        },
-        disabled: {
-            '&$root': {
-                background: palette.action.disabled,
-                border: 'none',
-            },
-        },
-    });
-});
-
-var IconButton = React.forwardRef(function (props, ref) {
-    props.children; var icon = props.icon, muiProps = __rest(props, ["children", "icon"]);
-    var classes = useIconButtonStyles(props);
-    return (React__default['default'].createElement(core.IconButton, __assign({ ref: ref, classes: classes }, muiProps),
-        React__default['default'].createElement(commonUi.NewIcon, { icon: icon })));
-});
-IconButton.displayName = 'IconButton';
-IconButton.defaultProps = {
-    variant: 'primary',
-};
-
 var useSelectableCardStyles = styles.makeStyles(function (theme) {
     var _a = theme.palette, info = _a.info, grey = _a.grey, getContrastText = _a.getContrastText, spacing = theme.spacing;
     var selectedBackgroundColor = styles.lighten(theme.palette.info.light, 0.9);
@@ -807,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';
@@ -883,43 +978,36 @@ var useSelectableCard = function (config) {
     return { card: { onClick: onClick, selection: selection }, selection: selection, setSelection: setSelection };
 };
 
-var baseFonts = ['"IBM Plex Sans"', '"sans-serif"'];
-var headingFonts = __spreadArray(['"IBM Plex Serif"'], baseFonts).join(', ');
+var fonts = ['"Poppins"', '"sans-serif"'];
 var adminThemeTypography = {
     htmlFontSize: 16,
-    fontFamily: baseFonts.join(', '),
+    fontFamily: fonts.join(', '),
     h1: {
-        fontFamily: headingFonts,
         fontWeight: 400,
         fontSize: '6rem',
         lineHeight: '7.75rem',
     },
     h2: {
-        fontFamily: headingFonts,
         fontWeight: 400,
         fontSize: '3.75rem',
         lineHeight: '4.875rem',
     },
     h3: {
-        fontFamily: headingFonts,
         fontWeight: 400,
         fontSize: '3rem',
         lineHeight: '3.875rem',
     },
     h4: {
-        fontFamily: headingFonts,
         fontWeight: 400,
         fontSize: '2.125rem',
         lineHeight: '2.75rem',
     },
     h5: {
-        fontFamily: headingFonts,
         fontWeight: 700,
         fontSize: '1.5rem',
         lineHeight: '2rem',
     },
     h6: {
-        fontFamily: headingFonts,
         fontWeight: 700,
         fontSize: '1.25rem',
         lineHeight: '1.625rem',
@@ -934,6 +1022,12 @@ var adminThemeTypography = {
         fontSize: '0.875rem',
         lineHeight: '1.25rem',
     },
+    button: {
+        fontWeight: 500,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
+        textTransform: 'capitalize',
+    },
 };
 
 var adminThemeBreakpoints = {
@@ -1069,6 +1163,19 @@ var adminThemeZIndex = {
  */
 var adminThemeDefaultProps = {
     props: {
+        MuiCard: {
+            elevation: 0,
+        },
+        MuiTooltip: {
+            title: '',
+            placement: 'right',
+        },
+        MuiPaper: {
+            elevation: 0,
+        },
+        MuiAppBar: {
+            position: 'static',
+        },
         MuiInputBase: {
             color: 'secondary',
         },
@@ -1078,11 +1185,15 @@ var adminThemeDefaultProps = {
     },
 };
 
-var options$1 = __assign(__assign(__assign(__assign({ themeName: 'Admin Light', palette: __assign(__assign({}, basePalette), adminLightPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography }, adminLightPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
-var adminLight = createTheme__default['default'](options$1);
+var adminOverrides = {
+    overrides: {},
+};
+
+var adminLightOptions = __assign(__assign(__assign(__assign(__assign({ themeName: 'Admin Light', palette: __assign(__assign({}, basePalette), adminLightPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography }, adminLightPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps), adminOverrides);
+var adminLight = createTheme__default['default'](adminLightOptions);
 
-var options = __assign(__assign(__assign(__assign({ themeName: 'Admin Dark', palette: __assign(__assign({}, basePalette), adminDarkPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography }, adminDarkPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
-var adminDark = createTheme__default['default'](options);
+var adminDarkOptions = __assign(__assign(__assign(__assign(__assign({ themeName: 'Admin Dark', palette: __assign(__assign({}, basePalette), adminDarkPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography }, adminDarkPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps), adminOverrides);
+var adminDark = createTheme__default['default'](adminDarkOptions);
 
 exports.Alert = Alert;
 exports.AlertDialog = AlertDialog;
@@ -1094,11 +1205,12 @@ exports.FeatureIntro = FeatureIntro;
 exports.FullScreenStepper = FullScreenStepper;
 exports.FullScreenStepperContent = FullScreenStepperContent;
 exports.FullScreenStepperContext = FullScreenStepperContext;
-exports.IconButton = IconButton;
 exports.SelectableCard = SelectableCard;
 exports.Toast = Toast;
 exports.adminDark = adminDark;
+exports.adminDarkOptions = adminDarkOptions;
 exports.adminLight = adminLight;
+exports.adminLightOptions = adminLightOptions;
 exports.useFullScreenStepperContext = useFullScreenStepperContext;
 exports.useSelectableCard = useSelectableCard;
 //# sourceMappingURL=index.js.map