@popmenu/ordering-ui 0.95.0 → 0.97.0

package/build/index.js

@@ -154,7 +154,7 @@ var Button = React.forwardRef(function (props, ref) {
 });
 Button.displayName = 'Button';
 
-var useDishCardStyles = styles.makeStyles(function (theme) {
+var useMenuItemStyles = styles.makeStyles(function (theme) {
     var _a, _b;
     return ({
         cardActionArea: (_a = {
@@ -200,6 +200,7 @@ var useDishCardStyles = styles.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',
@@ -516,6 +517,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__namespace.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__namespace.createElement("g", {
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.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); }
@@ -1470,7 +1490,7 @@ StatusTag.displayName = 'StatusTag';
 
 var MenuItem = React.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);
     };
@@ -1949,40 +1969,8 @@ var LocationCard = function (props) {
                     React__default['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__namespace.createElement("svg", _extends$1({
-    width: 20,
-    height: 21,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#restaurant-menu-icon_svg__clip0_3133_12817)",
-    stroke: "#2E3042",
-    strokeWidth: 1.667,
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M14.167 1.623l-10 3.333h10V1.623z",
-    strokeLinecap: "round"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M4.167 4.957h11.667v14.167H4.167z"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M6.667 10.79h6.667m-6.667 2.916h1.25m2.5 0h2.917",
-    strokeLinecap: "round"
-  }))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "restaurant-menu-icon_svg__clip0_3133_12817"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#fff",
-    transform: "translate(0 .79)",
-    d: "M0 0h20v20H0z"
-  })))));
-}
-
 var useMenuDropdownStyles = styles.makeStyles(function (theme) {
-    var _a;
+    var _a, _b;
     return ({
         formControl: (_a = {},
             _a[theme.breakpoints.up('lg')] = {
@@ -1995,11 +1983,17 @@ var useMenuDropdownStyles = styles.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],
@@ -2011,9 +2005,13 @@ var MenuDropdown = function (props) {
     var menuOptions = props.menuOptions, onSelect = props.onSelect, selectedOptionId = props.selectedOptionId;
     var classes = useMenuDropdownStyles(props);
     var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var isMobile = core.useMediaQuery(function (_a) {
+        var breakpoints = _a.breakpoints;
+        return breakpoints.down('md');
+    });
     return (React__default['default'].createElement(core.FormControl, { hiddenLabel: true, classes: { root: classes.formControl } },
         React__default['default'].createElement(core.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['default'].createElement(core.InputAdornment, { position: "start" },
-                React__default['default'].createElement(Icon, { icon: SvgRestaurantMenuIcon, size: "large" })), IconComponent: function () { return (React__default['default'].createElement(core.InputAdornment, { position: "end" },
+                React__default['default'].createElement(Icon, { icon: SvgRestaurantMenu, size: isMobile ? 'extra-large' : 'large' })), IconComponent: function () { return (React__default['default'].createElement(core.InputAdornment, { position: "end" },
                 React__default['default'].createElement(Icon, { color: "#0076CB", icon: open ? SvgChevronUp : SvgChevronDown, size: "large" }))); }, MenuProps: {
                 disablePortal: true,
                 anchorOrigin: {