@popmenu/ordering-ui 0.104.0 → 0.105.0

package/build/index.js

@@ -12,10 +12,10 @@ require('@material-ui/core/Badge');
 require('@material-ui/core/Button');
 require('@material-ui/core/CircularProgress');
 require('@material-ui/core/ButtonGroup');
-var Card = require('@material-ui/core/Card');
-var CardActionArea = require('@material-ui/core/CardActionArea');
+require('@material-ui/core/Card');
+require('@material-ui/core/CardActionArea');
 require('@material-ui/core/CardActions');
-var CardContent = require('@material-ui/core/CardContent');
+require('@material-ui/core/CardContent');
 require('@material-ui/core/CardHeader');
 require('@material-ui/core/CardMedia');
 var MuiCheckbox = require('@material-ui/core/Checkbox');
@@ -76,9 +76,6 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var MuiAvatar__default = /*#__PURE__*/_interopDefaultLegacy(MuiAvatar);
-var Card__default = /*#__PURE__*/_interopDefaultLegacy(Card);
-var CardActionArea__default = /*#__PURE__*/_interopDefaultLegacy(CardActionArea);
-var CardContent__default = /*#__PURE__*/_interopDefaultLegacy(CardContent);
 var MuiCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(MuiCheckbox);
 var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
 var MuiIconButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiIconButton);
@@ -392,6 +389,31 @@ function SvgHeart(props) {
   })));
 }
 
+var _g$2l, _defs$1s;
+
+function _extends$4l() { _extends$4l = 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$4l.apply(this, arguments); }
+
+function SvgInfo(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4l({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$2l || (_g$2l = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#info_svg__clip0_8_5377)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-4V8m0-2.667h.007"
+  }))), _defs$1s || (_defs$1s = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "info_svg__clip0_8_5377"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
 var _g$2k;
 
 function _extends$4k() { _extends$4k = 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$4k.apply(this, arguments); }
@@ -1936,23 +1958,26 @@ var DishModifierCard = function (props) {
 DishModifierCard.displayName = 'DishModifierCard';
 
 var useLocationCardStyles = styles.makeStyles(function (theme) {
-    var _a = theme.palette, info = _a.info, grey = _a.grey, secondary = _a.secondary, spacing = theme.spacing;
-    var selectedBackgroundColor = styles.lighten(theme.palette.info.light, 0.9);
-    var backgroundColor = theme.palette.background.default;
+    var _a = theme.palette, info = _a.info, grey = _a.grey, secondary = _a.secondary, background = _a.background, spacing = theme.spacing;
+    var selectedBackgroundColor = styles.lighten(info.light, 0.9);
+    var backgroundColor = background.default;
     return {
         root: {
-            background: '#FFF',
             border: function (_a) {
                 var selected = _a.selected;
                 return selected ? "1px solid " + info.light : '1px solid var(--surfaces-card-stroke, #E0E0E0)';
             },
             display: 'flex',
-            cursor: 'pointer',
             borderRadius: '10px',
             color: grey[900],
             backgroundColor: function (_a) {
-                var selected = _a.selected;
-                return (selected ? selectedBackgroundColor : backgroundColor);
+                var selected = _a.selected, outOfRange = _a.outOfRange;
+                return selected ? selectedBackgroundColor : outOfRange ? grey[200] : backgroundColor;
+            },
+        },
+        actionAreaFocusHighlight: {
+            '&:disabled': {
+                backgroundColor: 'inherit',
             },
         },
         availability: {
@@ -1986,30 +2011,36 @@ var useLocationCardStyles = styles.makeStyles(function (theme) {
             fontSize: '1.125rem',
             fontWeight: 500,
         },
+        greyText: {
+            color: grey[800],
+        },
     };
 });
 
 var LocationCard = function (props) {
-    var name = props.name, address = props.address, distance = props.distance, generalAvailability = props.generalAvailability, pickupAvailability = props.pickupAvailability, deliveryAvailability = props.deliveryAvailability, onClick = props.onClick, selected = props.selected, value = props.value, CardActionAreaProps = props.CardActionAreaProps, muiProps = __rest$1(props, ["name", "address", "distance", "generalAvailability", "pickupAvailability", "deliveryAvailability", "onClick", "selected", "value", "CardActionAreaProps"]);
+    var name = props.name, address = props.address, distance = props.distance, generalAvailability = props.generalAvailability, pickupAvailability = props.pickupAvailability, deliveryAvailability = props.deliveryAvailability, onClick = props.onClick, selected = props.selected, value = props.value, outOfRange = props.outOfRange, outOfRangeMessage = props.outOfRangeMessage, CardActionAreaProps = props.CardActionAreaProps, muiProps = __rest$1(props, ["name", "address", "distance", "generalAvailability", "pickupAvailability", "deliveryAvailability", "onClick", "selected", "value", "outOfRange", "outOfRangeMessage", "CardActionAreaProps"]);
     var classes = useLocationCardStyles(props);
     var anyAvailability = generalAvailability || pickupAvailability || deliveryAvailability;
     var handleClick = function () {
         onClick(value);
     };
-    return (React__default['default'].createElement(Card__default['default'], __assign$1({ className: classes.root }, muiProps),
-        React__default['default'].createElement(CardActionArea__default['default'], __assign$1({ onClick: handleClick, role: "checkbox", "aria-checked": selected }, CardActionAreaProps),
-            React__default['default'].createElement(CardContent__default['default'], { className: classes.content },
+    return (React__default['default'].createElement(core.Card, __assign$1({ className: classes.root }, muiProps),
+        React__default['default'].createElement(core.CardActionArea, __assign$1({ onClick: handleClick, role: "checkbox", "aria-checked": selected, disabled: outOfRange, classes: { focusHighlight: classes.actionAreaFocusHighlight } }, CardActionAreaProps),
+            React__default['default'].createElement(core.CardContent, { className: classes.content },
                 React__default['default'].createElement(core.Box, { className: classes.locationInfo },
                     React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between" },
-                        React__default['default'].createElement(Typography, { className: classes.name }, name),
+                        React__default['default'].createElement(core.Typography, { className: classes.name }, name),
                         selected && React__default['default'].createElement(Icon, { icon: SvgCheck, size: "extra-large", className: classes.checkIcon })),
-                    address && (React__default['default'].createElement(Typography, { color: "grey.800", variant: "body2" }, address)),
-                    React__default['default'].createElement(Typography, { className: classes.distance }, distance)),
+                    address && (React__default['default'].createElement(core.Typography, { className: classes.greyText, variant: "body2" }, address)),
+                    !outOfRange && React__default['default'].createElement(core.Typography, { className: classes.distance }, distance)),
                 anyAvailability && (React__default['default'].createElement(core.Box, { className: classes.availability },
                     React__default['default'].createElement(Icon, { icon: SvgClock, size: "large" }),
-                    generalAvailability && (React__default['default'].createElement(Typography, { className: classes.availabilityMessage, variant: "body2" }, generalAvailability)),
-                    pickupAvailability && (React__default['default'].createElement(Typography, { className: classes.availabilityMessage, variant: "body2" }, pickupAvailability)),
-                    deliveryAvailability && (React__default['default'].createElement(Typography, { className: classes.availabilityMessage, variant: "body2" }, deliveryAvailability))))))));
+                    generalAvailability && (React__default['default'].createElement(core.Typography, { className: classes.availabilityMessage, variant: "body2" }, generalAvailability)),
+                    pickupAvailability && (React__default['default'].createElement(core.Typography, { className: classes.availabilityMessage, variant: "body2" }, pickupAvailability)),
+                    deliveryAvailability && (React__default['default'].createElement(core.Typography, { className: classes.availabilityMessage, variant: "body2" }, deliveryAvailability)))),
+                outOfRange && (React__default['default'].createElement(core.Box, { display: "flex", gridGap: 8, alignItems: "center", color: "grey.800" },
+                    React__default['default'].createElement(Icon, { icon: SvgInfo, size: "large", color: "inherit" }),
+                    React__default['default'].createElement(core.Typography, { variant: "body2", className: classes.greyText }, outOfRangeMessage)))))));
 };
 
 var useMenuDropdownStyles = styles.makeStyles(function (theme) {