@popmenu/ordering-ui 0.87.0 → 0.89.0

package/build/components/DialogTitle/DialogTitle.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 interface DialogTitleProps {
     title: string;
     Icon?: ReactNode;
-    onClose: () => void;
+    onClose?: () => void;
 }
 export declare const DialogTitle: (props: DialogTitleProps) => JSX.Element;
 export {};

package/build/components/MenuItem/MenuItemProps.d.ts

@@ -22,6 +22,8 @@ export interface MenuItemProps {
     }>;
     /** Number of likes */
     likeCount?: Maybe<number>;
+    /** when true, shows a skeleton in place of content */
+    loading?: boolean;
     /** Number of reviews */
     reviewCount?: Maybe<number>;
     /** Callback for when the DishCard is clicked */

package/build/components/MenuSection/MenuSectionProps.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
 export interface MenuSectionProps {
+    /** when true, will render a skeleton in place of the section title */
+    loading?: boolean;
+    /** the name of a section, will render as the section's title */
     name: string;
     children: React.ReactNode;
 }

package/build/index.es.js

@@ -47,6 +47,7 @@ import '@material-ui/core/Tabs';
 import MuiToggleButton from '@material-ui/lab/ToggleButton';
 import MuiToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import MuiTooltip from '@material-ui/core/Tooltip';
+import { Skeleton } from '@material-ui/lab';
 import MuiRadioGroup from '@material-ui/core/RadioGroup';
 
 /*! *****************************************************************************
@@ -135,6 +136,7 @@ var useDishCardStyles = makeStyles(function (theme) {
             _b.overflow = 'visible',
             _b),
         cardTitle: {
+            flexGrow: 1,
             fontWeight: 500,
             fontSize: 18,
             lineHeight: '27px',
@@ -623,7 +625,8 @@ 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"]);
-    if (!restProps['aria-label'] && restProps['aria-hidden'] === undefined) {
+    var hasAccessibleAttr = Boolean(restProps['aria-describedby'] || restProps['aria-label']);
+    if (!hasAccessibleAttr && restProps['aria-hidden'] === undefined) {
         restProps['aria-hidden'] = true;
     }
     var classes = useIconStyles(props);
@@ -1373,23 +1376,24 @@ StatusTag.defaultProps = {
 StatusTag.displayName = 'StatusTag';
 
 var MenuItem = 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.createElement(Card, { className: classes.card, ref: ref, elevation: 0, "data-component-type": "menu-item" },
-        React__default.createElement(CardActionArea, { className: classes.cardActionArea, onClick: handleClick },
+        React__default.createElement(CardActionArea, { className: classes.cardActionArea, onClick: handleClick, disabled: loading },
             React__default.createElement(MenuItemInfo, null,
                 React__default.createElement(Box, { display: "flex", gridGap: 8, alignItems: "center" },
-                    React__default.createElement(Typography$1, { className: classes.cardTitle }, title),
+                    React__default.createElement(Typography$1, { className: classes.cardTitle }, loading ? React__default.createElement(Skeleton, null) : title),
                     isOutOfStock && React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "sm" })),
-                React__default.createElement(Typography$1, { className: classes.cardDescription, paragraph: true }, description),
-                React__default.createElement(MenuItemReactions, { likeCount: props.likeCount, reviewCount: props.reviewCount }),
-                React__default.createElement(Box, { display: "flex", justifyContent: "space-between", alignItems: "end", flexGrow: 1 },
+                React__default.createElement(Typography$1, { className: classes.cardDescription, paragraph: true }, loading ? React__default.createElement(Skeleton, null) : description),
+                loading ? (React__default.createElement(Skeleton, null,
+                    React__default.createElement(MenuItemReactions, { likeCount: props.likeCount, reviewCount: props.reviewCount }))) : (React__default.createElement(MenuItemReactions, { likeCount: props.likeCount, reviewCount: props.reviewCount })),
+                loading ? (React__default.createElement(Skeleton, { style: { flexGrow: 1 }, width: 100, height: 48 })) : (React__default.createElement(Box, { display: "flex", justifyContent: "space-between", alignItems: "end", flexGrow: 1 },
                     React__default.createElement(MenuItemPrice, { price: props.price, available: props.available }),
-                    React__default.createElement(MenuItemTags, { itemTags: props.itemTags }))),
-            React__default.createElement(MenuItemImg, { image: props.image }))));
+                    React__default.createElement(MenuItemTags, { itemTags: props.itemTags })))),
+            loading ? React__default.createElement(Skeleton, { height: 100, width: 100 }) : React__default.createElement(MenuItemImg, { image: props.image }))));
 });
 MenuItem.displayName = 'MenuItem';
 
@@ -1955,6 +1959,7 @@ var useSelectableChipStyles = makeStyles(function (theme) { return ({
         minHeight: 'unset',
         opacity: 'unset',
         textTransform: 'none',
+        textAlign: 'left',
         '&::-webkit-scrollbar': {
             display: 'none',
         },
@@ -2041,11 +2046,11 @@ var useStyles$2 = makeStyles$1(function () { return ({
 }); });
 
 var MenuSection = 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.createElement(Box, __assign$1({}, restProps, { ref: ref, component: 'section' }, { "data-component-type": "menu-section" }),
         React__default.createElement(Box, { marginTop: 1, marginBottom: 4 },
-            React__default.createElement(Typography$1, { component: "h2", className: classes.title }, name)),
+            React__default.createElement(Typography$1, { component: "h2", className: classes.title }, loading ? React__default.createElement(Skeleton, null) : name)),
         children));
 });
 MenuSection.displayName = 'MenuSection';
@@ -2087,8 +2092,8 @@ var DialogTitle = function (props) {
         React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 16 },
             Icon && Icon,
             React__default.createElement(Typography$1, { component: "h1", variant: "h6" }, title)),
-        React__default.createElement(IconButton$1, { color: "inherit", className: classes.closeButton, "aria-label": "Close dialog", onClick: onClose },
-            React__default.createElement(SvgX, null))));
+        onClose && (React__default.createElement(IconButton$1, { color: "inherit", className: classes.closeButton, "aria-label": "Close dialog", onClick: onClose },
+            React__default.createElement(SvgX, null)))));
 };
 
 var DialogSection = function (props) {