@popmenu/ordering-ui 0.86.1 → 0.88.0

package/build/index.js

@@ -49,6 +49,7 @@ require('@material-ui/core/Tabs');
 var MuiToggleButton = require('@material-ui/lab/ToggleButton');
 var MuiToggleButtonGroup = require('@material-ui/lab/ToggleButtonGroup');
 var MuiTooltip = require('@material-ui/core/Tooltip');
+var lab = require('@material-ui/lab');
 var MuiRadioGroup = require('@material-ui/core/RadioGroup');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -178,6 +179,7 @@ var useDishCardStyles = styles.makeStyles(function (theme) {
             _b.overflow = 'visible',
             _b),
         cardTitle: {
+            flexGrow: 1,
             fontWeight: 500,
             fontSize: 18,
             lineHeight: '27px',
@@ -666,6 +668,10 @@ var classNames$1 = classnames$1.exports;
 var iconStaticClassName = 'pop-icon';
 var Icon = function (props) {
     var icon = props.icon, className = props.className, restProps = __rest(props, ["icon", "className"]);
+    var hasAccessibleAttr = Boolean(restProps['aria-describedby'] || restProps['aria-label']);
+    if (!hasAccessibleAttr && restProps['aria-hidden'] === undefined) {
+        restProps['aria-hidden'] = true;
+    }
     var classes = useIconStyles(props);
     var isValid = true;
     if (!icon || (typeof icon === 'function' && icon({}) === undefined)) {
@@ -1413,23 +1419,24 @@ StatusTag.defaultProps = {
 StatusTag.displayName = 'StatusTag';
 
 var MenuItem = React.forwardRef(function (props, ref) {
-    var onClick = props.onClick, id = props.id, title = props.title, description = props.description, isOutOfStock = props.isOutOfStock;
+    var onClick = props.onClick, id = props.id, description = props.description, isOutOfStock = props.isOutOfStock, title = props.title, loading = props.loading;
     var classes = useDishCardStyles(props);
     var handleClick = function (event) {
         onClick(id, event);
     };
     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(core.CardActionArea, { className: classes.cardActionArea, onClick: handleClick, disabled: loading },
             React__default['default'].createElement(MenuItemInfo, null,
                 React__default['default'].createElement(core.Box, { display: "flex", gridGap: 8, alignItems: "center" },
-                    React__default['default'].createElement(core.Typography, { className: classes.cardTitle }, title),
+                    React__default['default'].createElement(core.Typography, { className: classes.cardTitle }, loading ? React__default['default'].createElement(lab.Skeleton, null) : 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 },
+                React__default['default'].createElement(core.Typography, { className: classes.cardDescription, paragraph: true }, loading ? React__default['default'].createElement(lab.Skeleton, null) : description),
+                loading ? (React__default['default'].createElement(lab.Skeleton, null,
+                    React__default['default'].createElement(MenuItemReactions, { likeCount: props.likeCount, reviewCount: props.reviewCount }))) : (React__default['default'].createElement(MenuItemReactions, { likeCount: props.likeCount, reviewCount: props.reviewCount })),
+                loading ? (React__default['default'].createElement(lab.Skeleton, { style: { flexGrow: 1 }, width: 100, height: 48 })) : (React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between", alignItems: "end", flexGrow: 1 },
                     React__default['default'].createElement(MenuItemPrice, { price: props.price, available: props.available }),
-                    React__default['default'].createElement(MenuItemTags, { itemTags: props.itemTags }))),
-            React__default['default'].createElement(MenuItemImg, { image: props.image }))));
+                    React__default['default'].createElement(MenuItemTags, { itemTags: props.itemTags })))),
+            loading ? React__default['default'].createElement(lab.Skeleton, { height: 100, width: 100 }) : React__default['default'].createElement(MenuItemImg, { image: props.image }))));
 });
 MenuItem.displayName = 'MenuItem';
 
@@ -1995,6 +2002,7 @@ var useSelectableChipStyles = styles.makeStyles(function (theme) { return ({
         minHeight: 'unset',
         opacity: 'unset',
         textTransform: 'none',
+        textAlign: 'left',
         '&::-webkit-scrollbar': {
             display: 'none',
         },
@@ -2081,11 +2089,11 @@ 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 name = props.name, children = props.children, loading = props.loading, restProps = __rest$1(props, ["name", "children", "loading"]);
     var classes = useStyles$2();
     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, { component: "h2", className: classes.title }, name)),
+            React__default['default'].createElement(core.Typography, { component: "h2", className: classes.title }, loading ? React__default['default'].createElement(lab.Skeleton, null) : name)),
         children));
 });
 MenuSection.displayName = 'MenuSection';