@popmenu/ordering-ui 0.85.1 → 0.86.1

package/build/index.js

@@ -808,12 +808,12 @@ var Button = React.forwardRef(function (props, ref) {
 });
 Button.displayName = 'Button';
 
-var Checkbox = React.forwardRef(function (props, ref) {
+var Checkbox$1 = React.forwardRef(function (props, ref) {
     var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
     var control = React__default['default'].createElement(MuiCheckbox__default['default'], __assign({ disabled: label ? undefined : disabled }, muiProps));
     return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
 });
-Checkbox.displayName = 'Checkbox';
+Checkbox$1.displayName = 'Checkbox';
 
 var getBackground = function (theme) { return function (props) {
     var variant = props.variant, severity = props.severity;
@@ -1083,12 +1083,12 @@ Paper.defaultProps = {
     legacyStyles: false,
 };
 
-var Radio = React.forwardRef(function (props, ref) {
+var Radio$1 = React.forwardRef(function (props, ref) {
     var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
     var control = React__default['default'].createElement(MuiRadio__default['default'], __assign({ disabled: label ? undefined : disabled }, muiProps));
     return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
 });
-Radio.displayName = 'Radio';
+Radio$1.displayName = 'Radio';
 
 styles.makeStyles(function () { return ({
     textfield: {
@@ -1128,13 +1128,13 @@ var useSwitchStyles = styles.makeStyles(function (theme) { return ({
     track: {},
 }); });
 
-var Switch = React.forwardRef(function (props, ref) {
+var Switch$1 = React.forwardRef(function (props, ref) {
     var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
     var classes = useSwitchStyles(props);
     var control = React__default['default'].createElement(MuiSwitch__default['default'], __assign({ classes: classes, disabled: label ? undefined : disabled }, muiProps));
     return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
 });
-Switch.displayName = 'Switch';
+Switch$1.displayName = 'Switch';
 
 var useToggleButtonStyles = styles.makeStyles(function (theme) { return ({
     root: {
@@ -1308,8 +1308,112 @@ var MenuItemTags = function (props) {
     return (React__default['default'].createElement(ItemTagGroup, null, itemTags === null || itemTags === void 0 ? void 0 : itemTags.slice(0, 5).map(function (itemTag) { return (React__default['default'].createElement(ItemTag, { key: itemTag.name, alt: itemTag.name, color: itemTag.color }, itemTag.abbr)); })));
 };
 
+var useStatusTagStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        borderRadius: '5px',
+        display: 'flex',
+        padding: theme.spacing(1),
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 'fit-content',
+    },
+    filled: {
+        backgroundColor: theme.palette.grey[100],
+        color: theme.palette.grey[900],
+    },
+    outlined: {
+        border: "1px solid var(--surfaces-card-stroke, " + theme.palette.grey[900] + ")",
+    },
+    small: {
+        padding: theme.spacing(0.25, 0.75),
+    },
+    default: {
+        color: theme.palette.grey[900],
+    },
+    warning: {
+        borderColor: theme.palette.warning.dark,
+        color: theme.palette.warning.dark,
+    },
+    error: {
+        borderColor: theme.palette.error.main,
+        color: theme.palette.error.main,
+    },
+}); });
+
+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 StatusTag = function (props) {
+    var variant = props.variant, label = props.label, _a = props.size, size = _a === void 0 ? 'md' : _a, _b = props.color, color = _b === void 0 ? 'default' : _b;
+    var classes = useStatusTagStyles(props);
+    return (React__default['default'].createElement(core.Box, { className: classNames([classes.root, classes[color], classes[variant], size === 'sm' ? classes.small : '']) },
+        React__default['default'].createElement(Typography, { variant: "caption" }, label)));
+};
+StatusTag.defaultProps = {
+    color: 'default',
+    error: false,
+};
+StatusTag.displayName = 'StatusTag';
+
 var MenuItem = React.forwardRef(function (props, ref) {
-    var onClick = props.onClick, id = props.id, title = props.title, description = props.description;
+    var onClick = props.onClick, id = props.id, title = props.title, description = props.description, isOutOfStock = props.isOutOfStock;
     var classes = useDishCardStyles(props);
     var handleClick = function (event) {
         onClick(id, event);
@@ -1317,7 +1421,9 @@ var MenuItem = React.forwardRef(function (props, ref) {
     return (React__default['default'].createElement(core.Card, { className: classes.card, ref: ref, elevation: 0, "data-component-type": "menu-item" },
         React__default['default'].createElement(core.CardActionArea, { className: classes.cardActionArea, onClick: handleClick },
             React__default['default'].createElement(MenuItemInfo, null,
-                React__default['default'].createElement(core.Typography, { className: classes.cardTitle }, title),
+                React__default['default'].createElement(core.Box, { display: "flex", gridGap: 8, alignItems: "center" },
+                    React__default['default'].createElement(core.Typography, { className: classes.cardTitle }, title),
+                    isOutOfStock && React__default['default'].createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "sm" })),
                 React__default['default'].createElement(core.Typography, { className: classes.cardDescription, paragraph: true }, description),
                 React__default['default'].createElement(MenuItemReactions, { likeCount: props.likeCount, reviewCount: props.reviewCount }),
                 React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between", alignItems: "end", flexGrow: 1 },
@@ -1510,117 +1616,21 @@ var useLabelStyles = styles.makeStyles(function (theme) { return ({
     label: {
         margin: theme.spacing(0.5, 0),
     },
-    price: {
-        color: theme.palette.grey[700],
-    },
-}); });
-
-var useStatusTagStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        borderRadius: '5px',
-        display: 'flex',
-        padding: theme.spacing(1),
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 'fit-content',
-    },
-    filled: {
-        backgroundColor: theme.palette.grey[100],
-        color: theme.palette.grey[900],
-    },
-    outlined: {
-        border: "1px solid var(--surfaces-card-stroke, " + theme.palette.grey[900] + ")",
-    },
-    default: {
-        color: theme.palette.grey[900],
-    },
-    warning: {
-        borderColor: theme.palette.warning.dark,
+    outOfStock: {
         color: theme.palette.warning.dark,
     },
-    error: {
-        borderColor: theme.palette.error.main,
-        color: theme.palette.error.main,
+    price: {
+        color: theme.palette.grey[700],
     },
 }); });
 
-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 StatusTag = function (props) {
-    var variant = props.variant, label = props.label, _a = props.color, color = _a === void 0 ? 'default' : _a;
-    var classes = useStatusTagStyles(props);
-    return (React__default['default'].createElement(core.Box, { className: classNames([classes.root, classes[color], classes[variant]]) },
-        React__default['default'].createElement(Typography, { variant: "caption" }, label)));
-};
-StatusTag.defaultProps = {
-    color: 'default',
-    error: false,
-};
-StatusTag.displayName = 'StatusTag';
-
 var Label = function (props) {
-    var name = props.name, price = props.price, disabled = props.disabled;
+    var name = props.name, price = props.price, disabled = props.disabled, isOutOfStock = props.isOutOfStock;
     var classes = useLabelStyles();
     return (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", className: classes.label },
-        React__default['default'].createElement(core.Typography, null, name),
+        React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 8 },
+            React__default['default'].createElement(core.Typography, null, name),
+            !isOutOfStock && disabled && (React__default['default'].createElement(core.Typography, { variant: "caption", className: classes.outOfStock }, "Out of stock"))),
         price && React__default['default'].createElement(core.Typography, { className: !disabled ? classes.price : '' },
             "+ ",
             price)));
@@ -1642,9 +1652,9 @@ var CheckboxGroup = function (props) {
     };
     return (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column" }, modifiers.map(function (modifier, index) {
         var targetValue = value === null || value === void 0 ? void 0 : value.find(function (v) { return v.id == modifier.id; });
-        return (React__default['default'].createElement(core.FormControlLabel, { key: index, value: modifier.id, control: React__default['default'].createElement(core.Checkbox, { className: classes.radio, disabled: (!targetValue && disableNewSelections) || isOutOfStock }), label: React__default['default'].createElement(Label, { name: modifier.name, price: modifier.price
+        return (React__default['default'].createElement(core.FormControlLabel, { key: index, value: modifier.id, control: React__default['default'].createElement(core.Checkbox, { className: classes.radio, disabled: (!targetValue && disableNewSelections) || isOutOfStock || modifier.outOfStock }), label: React__default['default'].createElement(Label, { name: modifier.name, price: modifier.price
                     ? "" + (appContext && appContext.currencySymbol) + Number(modifier.price).toFixed(2)
-                    : null, disabled: isOutOfStock }), className: classes.root, checked: !!targetValue, onChange: handleChange }));
+                    : null, disabled: isOutOfStock || modifier.outOfStock, isOutOfStock: isOutOfStock }), className: classes.root, checked: !!targetValue, onChange: handleChange }));
     })));
 };
 var RadioGroup = function (props) {
@@ -1662,7 +1672,7 @@ var RadioGroup = function (props) {
             },
         ]);
     };
-    return (React__default['default'].createElement(MuiRadioGroup__default['default'], { name: "selectedModifiers", value: value ? value[0].id : '', onChange: handleChange }, modifiers.map(function (modifier, index) { return (React__default['default'].createElement(core.FormControlLabel, { key: index, value: modifier.id, control: React__default['default'].createElement(core.Radio, { className: classes.radio, disabled: isOutOfStock }), label: React__default['default'].createElement(Label, { name: modifier.name, price: modifier.price ? "" + (appContext && appContext.currencySymbol) + Number(modifier.price).toFixed(2) : null, disabled: isOutOfStock }) })); })));
+    return (React__default['default'].createElement(MuiRadioGroup__default['default'], { name: "selectedModifiers", value: value ? value[0].id : '', onChange: handleChange }, modifiers.map(function (modifier, index) { return (React__default['default'].createElement(core.FormControlLabel, { key: index, value: modifier.id, control: React__default['default'].createElement(core.Radio, { className: classes.radio, disabled: isOutOfStock || modifier.outOfStock }), label: React__default['default'].createElement(Label, { name: modifier.name, price: modifier.price ? "" + (appContext && appContext.currencySymbol) + Number(modifier.price).toFixed(2) : null, disabled: isOutOfStock || modifier.outOfStock, isOutOfStock: isOutOfStock }) })); })));
 };
 
 var ModifierOptionsControl = function (props) {
@@ -1680,17 +1690,18 @@ var ModifierOptionsControl = function (props) {
 var DishModifierCard = function (props) {
     var name = props.name, disableNewSelections = props.disableNewSelections, modifiers = props.modifiers, value = props.value, messages = props.messages, onChange = props.onChange, type = props.type, error = props.error, isRequired = props.isRequired, isOutOfStock = props.isOutOfStock;
     var optionalText = messages.optionalText, outOfStockText = messages.outOfStockText, requiredText = messages.requiredText, helperText = messages.helperText;
+    var isFullyOutOfStock = isOutOfStock || !modifiers.some(function (modifier) { return !modifier.outOfStock; });
     var classes = useDishModifierCardStyles();
     var color = 'default';
     switch (true) {
         case error:
             color = 'error';
-        case isOutOfStock:
+        case isFullyOutOfStock:
             color = 'warning';
     }
     var label = optionalText;
     switch (true) {
-        case isOutOfStock:
+        case isFullyOutOfStock:
             label = outOfStockText;
             break;
         case isRequired:
@@ -1702,11 +1713,11 @@ var DishModifierCard = function (props) {
             React__default['default'].createElement(core.Box, { className: classes.nameContainer },
                 React__default['default'].createElement(Typography, { className: classes.name }, name),
                 React__default['default'].createElement(core.Box, { className: classes.statusTagContainer },
-                    React__default['default'].createElement(StatusTag, { variant: isRequired || isOutOfStock ? 'outlined' : 'filled', label: label, color: color }))),
-            React__default['default'].createElement(Typography, { variant: "subtitle1", className: error ? classes.error : undefined }, helperText)),
+                    React__default['default'].createElement(StatusTag, { variant: isRequired || isFullyOutOfStock ? 'outlined' : 'filled', label: label, color: color }))),
+            !isFullyOutOfStock && (React__default['default'].createElement(Typography, { variant: "subtitle1", className: error ? classes.error : undefined }, helperText))),
         React__default['default'].createElement(core.Box, null,
             React__default['default'].createElement(core.FormControl, null,
-                React__default['default'].createElement(ModifierOptionsControl, { type: type, modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections, isOutOfStock: isOutOfStock })))));
+                React__default['default'].createElement(ModifierOptionsControl, { type: type, modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections, isOutOfStock: isFullyOutOfStock })))));
 };
 DishModifierCard.displayName = 'DishModifierCard';
 
@@ -2072,9 +2083,9 @@ var useStyles$2 = core.makeStyles(function () { return ({
 var MenuSection = React.forwardRef(function (props, ref) {
     var name = props.name, children = props.children, restProps = __rest$1(props, ["name", "children"]);
     var classes = useStyles$2();
-    return (React__default['default'].createElement(core.Box, __assign$1({}, restProps, { ref: ref }, { "data-component-type": "menu-section" }),
+    return (React__default['default'].createElement(core.Box, __assign$1({}, restProps, { ref: ref, component: 'section' }, { "data-component-type": "menu-section" }),
         React__default['default'].createElement(core.Box, { marginTop: 1, marginBottom: 4 },
-            React__default['default'].createElement(core.Typography, { className: classes.title }, name)),
+            React__default['default'].createElement(core.Typography, { component: "h2", className: classes.title }, name)),
         children));
 });
 MenuSection.displayName = 'MenuSection';
@@ -2115,7 +2126,7 @@ var DialogTitle = function (props) {
     return (React__default['default'].createElement(core.DialogTitle, null,
         React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 16 },
             Icon && Icon,
-            React__default['default'].createElement(core.Typography, { variant: "h6" }, title)),
+            React__default['default'].createElement(core.Typography, { component: "h1", variant: "h6" }, title)),
         React__default['default'].createElement(core.IconButton, { color: "inherit", className: classes.closeButton, "aria-label": "Close dialog", onClick: onClose },
             React__default['default'].createElement(SvgX, null))));
 };
@@ -2124,6 +2135,50 @@ var DialogSection = function (props) {
     return (React__default['default'].createElement(core.Box, { paddingTop: 4, paddingBottom: props.borderBottom ? 4 : 0, paddingX: props.edgeToEdge ? 0 : 2, borderBottom: props.borderBottom ? '1px solid #E0E0E0' : undefined }, props.children));
 };
 
+var Switch = core.withStyles(function (_a) {
+    var palette = _a.palette;
+    return ({
+        checked: {
+            '& $thumb': {
+                backgroundColor: palette.success.main,
+            },
+            '&& + $track': {
+                backgroundColor: palette.success.main,
+                opacity: 0.5,
+            },
+        },
+        switchBase: {
+            color: palette.grey[300],
+        },
+        thumb: {},
+        track: {},
+    });
+})(core.Switch);
+
+var Checkbox = core.withStyles(function (_a) {
+    var palette = _a.palette;
+    return ({
+        checked: {},
+        root: {
+            '&$checked': {
+                color: palette.info.main,
+            },
+        },
+    });
+})(core.Checkbox);
+
+var Radio = core.withStyles(function (_a) {
+    var palette = _a.palette;
+    return ({
+        checked: {},
+        root: {
+            '&$checked': {
+                color: palette.info.main,
+            },
+        },
+    });
+})(core.Radio);
+
 var palette = {
     primary: {
         light: '#7B7FA3',
@@ -2165,9 +2220,7 @@ var overrides = {
             textTransform: 'none',
             padding: '18px 16px',
         },
-        outlined: {
-            padding: 'inherit',
-        },
+        outlined: {},
         textPrimary: {
             color: '#0076CB',
         },
@@ -2286,6 +2339,7 @@ var orderingTheme = {
 };
 
 exports.Button = Button$1;
+exports.Checkbox = Checkbox;
 exports.DialogSection = DialogSection;
 exports.DialogTitle = DialogTitle;
 exports.DishCheckoutCard = DishCheckoutCard;
@@ -2304,12 +2358,14 @@ exports.OrderingAppContext = OrderingAppContext;
 exports.OrderingAppContextProvider = OrderingAppContextProvider;
 exports.PageSection = PageSection;
 exports.QuantityPicker = QuantityPicker;
+exports.Radio = Radio;
 exports.ReactionCounter = ReactionCounter;
 exports.ReactionCounterGroup = ReactionCounterGroup;
 exports.SelectableChip = SelectableChip;
 exports.SelectableChipGroup = SelectableChipGroup;
 exports.SelectedMenuFiltersList = SelectedMenuFiltersList;
 exports.StatusTag = StatusTag;
+exports.Switch = Switch;
 exports.orderingTheme = orderingTheme;
 exports.useOrderingAppContext = useOrderingAppContext;
 Object.keys(core).forEach(function (k) {