@popmenu/ordering-ui 0.95.0 → 0.97.0

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

@@ -1 +1 @@
-export declare const useDishCardStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"cardActionArea" | "card" | "cardTitle" | "cardDescription">;
+export declare const useMenuItemStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"cardActionArea" | "card" | "cardTitle" | "cardDescription">;

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

@@ -26,7 +26,7 @@ export interface MenuItemProps {
     loading?: boolean;
     /** Number of reviews */
     reviewCount?: Maybe<number>;
-    /** Callback for when the DishCard is clicked */
+    /** Callback for when MenuItem is clicked */
     onClick: (id: string, event: React.MouseEvent<HTMLButtonElement>) => void;
     /** Whether or not the menu item is available for ordering */
     available: boolean;

package/build/index.es.js

@@ -1,4 +1,4 @@
-import { Button as Button$1, makeStyles as makeStyles$1, Box, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Avatar as Avatar$1, Card, CardActionArea, FormControl, Select, InputAdornment, MenuItem as MenuItem$1, TextField, RadioGroup, FormControlLabel as FormControlLabel$1, Radio as Radio$2, FormGroup, Checkbox as Checkbox$2, Menu, Tabs, Chip, DialogTitle as DialogTitle$1, IconButton as IconButton$1, withStyles, Switch as Switch$2 } from '@material-ui/core';
+import { Button as Button$1, makeStyles as makeStyles$1, Box, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Avatar as Avatar$1, Card, CardActionArea, FormControl, Select, InputAdornment, MenuItem as MenuItem$1, TextField, RadioGroup, FormControlLabel as FormControlLabel$1, Radio as Radio$2, FormGroup, Checkbox as Checkbox$2, useMediaQuery, Menu, Tabs, Chip, DialogTitle as DialogTitle$1, IconButton as IconButton$1, withStyles, Switch as Switch$2 } from '@material-ui/core';
 export * from '@material-ui/core';
 import * as React from 'react';
 import React__default, { forwardRef, createContext, createElement, useContext, useState } from 'react';
@@ -114,7 +114,7 @@ var Button = forwardRef(function (props, ref) {
 });
 Button.displayName = 'Button';
 
-var useDishCardStyles = makeStyles(function (theme) {
+var useMenuItemStyles = makeStyles(function (theme) {
     var _a, _b;
     return ({
         cardActionArea: (_a = {
@@ -160,6 +160,7 @@ var useDishCardStyles = makeStyles(function (theme) {
             fontWeight: 400,
             fontSize: 14,
             lineHeight: '20px',
+            marginBottom: theme.spacing(1),
             color: theme.palette.grey[700],
             '-webkit-line-clamp': 2,
             display: '-webkit-box',
@@ -476,6 +477,25 @@ function SvgTrash(props) {
   })));
 }
 
+var _g$11;
+
+function _extends$1G() { _extends$1G = 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$1G.apply(this, arguments); }
+
+function SvgRestaurantMenu(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1G({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$11 || (_g$11 = /*#__PURE__*/React.createElement("g", {
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11.334.667l-8 2.666h8V.667zM3.333 3.333h9.333v11.333H3.333zM5.333 8h5.334m-5.334 2.333h1m2 0h2.334"
+  }))));
+}
+
 var _path$h, _path2$3;
 
 function _extends$C() { _extends$C = 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$C.apply(this, arguments); }
@@ -1430,7 +1450,7 @@ StatusTag.displayName = 'StatusTag';
 
 var MenuItem = forwardRef(function (props, ref) {
     var onClick = props.onClick, id = props.id, description = props.description, isOutOfStock = props.isOutOfStock, title = props.title, loading = props.loading;
-    var classes = useDishCardStyles(props);
+    var classes = useMenuItemStyles(props);
     var handleClick = function (event) {
         onClick(id, event);
     };
@@ -1909,40 +1929,8 @@ var LocationCard = function (props) {
                     React__default.createElement(Typography, { variant: "body2" }, availability)))))));
 };
 
-var _g, _defs;
-
-function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
-
-function SvgRestaurantMenuIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    width: 20,
-    height: 21,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#restaurant-menu-icon_svg__clip0_3133_12817)",
-    stroke: "#2E3042",
-    strokeWidth: 1.667,
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M14.167 1.623l-10 3.333h10V1.623z",
-    strokeLinecap: "round"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M4.167 4.957h11.667v14.167H4.167z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M6.667 10.79h6.667m-6.667 2.916h1.25m2.5 0h2.917",
-    strokeLinecap: "round"
-  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "restaurant-menu-icon_svg__clip0_3133_12817"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    transform: "translate(0 .79)",
-    d: "M0 0h20v20H0z"
-  })))));
-}
-
 var useMenuDropdownStyles = makeStyles(function (theme) {
-    var _a;
+    var _a, _b;
     return ({
         formControl: (_a = {},
             _a[theme.breakpoints.up('lg')] = {
@@ -1955,11 +1943,17 @@ var useMenuDropdownStyles = makeStyles(function (theme) {
             gridGap: theme.spacing(1),
         },
         select: {
-            '& .MuiSelect-root': {
-                color: '#212121',
-                padding: theme.spacing(1, 0.5, 1, 0.5),
-                zIndex: 10,
-            },
+            '& .MuiSelect-root': (_b = {
+                    color: '#212121',
+                    padding: theme.spacing(1, 0.5, 1, 0.5),
+                    zIndex: 10
+                },
+                _b[theme.breakpoints.down('md')] = {
+                    width: 0,
+                    minWidth: 0,
+                    padding: 0,
+                },
+                _b),
         },
         unavailable: {
             color: theme.palette.grey[700],
@@ -1971,9 +1965,13 @@ var MenuDropdown = function (props) {
     var menuOptions = props.menuOptions, onSelect = props.onSelect, selectedOptionId = props.selectedOptionId;
     var classes = useMenuDropdownStyles(props);
     var _a = useState(false), open = _a[0], setOpen = _a[1];
+    var isMobile = useMediaQuery(function (_a) {
+        var breakpoints = _a.breakpoints;
+        return breakpoints.down('md');
+    });
     return (React__default.createElement(FormControl, { hiddenLabel: true, classes: { root: classes.formControl } },
         React__default.createElement(Select, { open: open, value: selectedOptionId, labelId: "menu-dropdown-select", onClick: function () { return setOpen(!open); }, disableUnderline: true, onChange: function (event) { return onSelect(event.target.value); }, fullWidth: true, startAdornment: React__default.createElement(InputAdornment, { position: "start" },
-                React__default.createElement(Icon, { icon: SvgRestaurantMenuIcon, size: "large" })), IconComponent: function () { return (React__default.createElement(InputAdornment, { position: "end" },
+                React__default.createElement(Icon, { icon: SvgRestaurantMenu, size: isMobile ? 'extra-large' : 'large' })), IconComponent: function () { return (React__default.createElement(InputAdornment, { position: "end" },
                 React__default.createElement(Icon, { color: "#0076CB", icon: open ? SvgChevronUp : SvgChevronDown, size: "large" }))); }, MenuProps: {
                 disablePortal: true,
                 anchorOrigin: {