@popmenu/ordering-ui 0.77.0 → 0.78.0

package/build/index.js

@@ -20,7 +20,7 @@ require('@material-ui/core/CardHeader');
 require('@material-ui/core/CardMedia');
 var MuiCheckbox = require('@material-ui/core/Checkbox');
 var FormControlLabel = require('@material-ui/core/FormControlLabel');
-var MuiChip = require('@material-ui/core/Chip');
+require('@material-ui/core/Chip');
 require('@material-ui/core/Collapse');
 require('@material-ui/core/Dialog');
 require('@material-ui/core/DialogActions');
@@ -83,7 +83,6 @@ 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 MuiChip__default = /*#__PURE__*/_interopDefaultLegacy(MuiChip);
 var MuiIconButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiIconButton);
 var MuiRadio__default = /*#__PURE__*/_interopDefaultLegacy(MuiRadio);
 var MuiSwitch__default = /*#__PURE__*/_interopDefaultLegacy(MuiSwitch);
@@ -187,77 +186,6 @@ function __rest(s, e) {
     return t;
 }
 
-var _g$1n;
-
-function _extends$2r() { _extends$2r = 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$2r.apply(this, arguments); }
-
-function SvgCheckCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2r({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$1n || (_g$1n = /*#__PURE__*/React__namespace.createElement("g", {
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M14.667 7.387V8a6.667 6.667 0 11-3.954-6.093"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M14.667 2.667L8 9.34l-2-2"
-  }))));
-}
-
-var _g$1l$1, _defs$J$1;
-
-function _extends$2o$1() { _extends$2o$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$2o$1.apply(this, arguments); }
-
-function SvgXCircle$1(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2o$1({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$1l$1 || (_g$1l$1 = /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#x-circle_svg__clip0_8_6136)",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM10 6l-4 4m0-4l4 4"
-  }))), _defs$J$1 || (_defs$J$1 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "x-circle_svg__clip0_8_6136"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M0 0h16v16H0z"
-  })))));
-}
-
-var _g$1c, _defs$D;
-
-function _extends$2c() { _extends$2c = 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$2c.apply(this, arguments); }
-
-function SvgInfo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2c({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$1c || (_g$1c = /*#__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$D || (_defs$D = /*#__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 _path$M;
 
 function _extends$1L() { _extends$1L = 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$1L.apply(this, arguments); }
@@ -276,49 +204,6 @@ function SvgUser(props) {
   })));
 }
 
-var _g$Y, _defs$u;
-
-function _extends$1H() { _extends$1H = 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$1H.apply(this, arguments); }
-
-function SvgError(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1H({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$Y || (_g$Y = /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#error_svg__clip0_8_5411)",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M5.24 1.333h5.52l3.907 3.907v5.52l-3.907 3.907H5.24L1.333 10.76V5.24L5.24 1.333zm2.76 4V8m0 2.666h.008"
-  }))), _defs$u || (_defs$u = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "error_svg__clip0_8_5411"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M0 0h16v16H0z"
-  })))));
-}
-
-var _path$J;
-
-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 SvgWarning(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), _path$J || (_path$J = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M6.86 2.573L1.213 12a1.334 1.334 0 001.14 2h11.294a1.332 1.332 0 001.14-2L9.14 2.573a1.333 1.333 0 00-2.28 0v0zM8 6v2.667m0 2.667h.007",
-    stroke: "currentColor"
-  })));
-}
-
 var useIconStyles = core.makeStyles(function (_a) {
     var spacing = _a.spacing, palette = _a.palette;
     var getFontSize = function (_a) {
@@ -626,7 +511,7 @@ var getBorder = function (theme) { return function (props) {
     }
     return borderColor;
 }; };
-var useChipStyles = styles.makeStyles(function (theme) { return ({
+styles.makeStyles(function (theme) { return ({
     root: {
         background: getBackground(theme),
         color: getColor(theme),
@@ -643,21 +528,6 @@ var useChipStyles = styles.makeStyles(function (theme) { return ({
     },
 }); });
 
-var IconDictionary = {
-    error: SvgError,
-    info: SvgInfo,
-    success: SvgCheckCircle,
-    warning: SvgWarning,
-};
-var Chip = function (props) {
-    var severity = props.severity, restProps = __rest(props, ["severity"]);
-    var classes = useChipStyles(props);
-    var icon = severity ? React__default['default'].createElement(IconDictionary[severity]) : undefined;
-    var deleteIcon = React__default['default'].createElement(SvgXCircle$1);
-    return React__default['default'].createElement(MuiChip__default['default'], __assign({ classes: classes, icon: icon, deleteIcon: deleteIcon }, restProps));
-};
-Chip.displayName = 'Chip';
-
 var defaultTypographyProps = {
     variant: 'body1',
 };
@@ -828,7 +698,7 @@ Link.defaultProps = {
 };
 Link.displayName = 'Link';
 
-var useStyles = core.makeStyles(function (_a) {
+var useStyles$1 = core.makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -842,7 +712,7 @@ var useStyles = core.makeStyles(function (_a) {
 });
 var Paper = React.forwardRef(function (props, ref) {
     var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
-    var classes = useStyles(props);
+    var classes = useStyles$1(props);
     return React__default['default'].createElement(core.Paper, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
 });
 Paper.displayName = 'Paper';
@@ -1444,6 +1314,9 @@ var useDishCheckoutCardStyles = styles.makeStyles(function (theme) { return ({
         height: theme.spacing(2.5),
         color: theme.palette.info.main,
     },
+    editButton: {
+        color: theme.palette.info.main,
+    },
     price: {
         fontSize: '18px',
     },
@@ -1493,7 +1366,7 @@ var DishCheckoutCard = function (props) {
                     specialInstructions,
                     "\"")),
             React__default['default'].createElement(core.Box, { display: "flex", gridGap: 1, height: "100%" },
-                React__default['default'].createElement(Button$1, { variant: "text", onClick: onEdit }, "Edit"),
+                React__default['default'].createElement(Button$1, { className: classes.editButton, variant: "text", onClick: onEdit }, "Edit"),
                 React__default['default'].createElement(IconButton, { onClick: onDelete },
                     React__default['default'].createElement(Icon, { icon: SvgTrash, className: classes.deleteIcon })))),
         React__default['default'].createElement(core.Box, { display: "flex", gridGap: 16, alignItems: "center" },
@@ -1841,6 +1714,12 @@ var MenuDropdown = function (props) {
             }, className: classes.select }, menuOptions.map(function (option, index) { return (React__default['default'].createElement(core.MenuItem, { key: index, value: option.id }, option.name)); }))));
 };
 
+var useMenuFilterStyles = styles.makeStyles(function () { return ({
+    triggerLabel: {
+        whiteSpace: 'nowrap',
+    },
+}); });
+
 var _path;
 
 function _extends() { _extends = 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.apply(this, arguments); }
@@ -1857,74 +1736,40 @@ function SvgLeafIcon(props) {
   })));
 }
 
-var useMenuFilterStyles = styles.makeStyles(function (theme) { return ({
-    chipButton: {
-        position: 'static',
-    },
-    container: {
-        alignItems: 'center',
-        display: 'flex',
-        flexWrap: 'wrap',
-        gridGap: theme.spacing(0.5),
-    },
-    filterButton: {
-        maxHeight: theme.spacing(4.5),
-        position: 'static',
-        textTransform: 'none',
-    },
-    tagText: {
-        color: theme.palette.grey[900],
-    },
-}); });
-
 var MenuFilter = function (props) {
-    var filterOptions = props.filterOptions, onFilter = props.onFilter, activeFilters = props.activeFilters;
-    var _a = React.useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
-    var open = Boolean(anchorEl);
-    var hasActiveFilters = activeFilters.length > 0;
-    var allFiltersActive = filterOptions.length === 0;
+    var options = props.options, onChange = props.onChange, value = props.value, _a = props.triggerLabel, triggerLabel = _a === void 0 ? 'Add Filter' : _a, _b = props.noOptionsLabel, noOptionsLabel = _b === void 0 ? 'All filters have been added' : _b;
+    var triggerId = 'menu-filter-trigger';
+    var popoverId = 'menu-filter-popover';
     var classes = useMenuFilterStyles();
-    var handleChange = function (event) {
-        onFilter({ target: { value: event.currentTarget.value } });
+    var _c = React.useState(null), anchorEl = _c[0], setAnchorEl = _c[1];
+    var open = Boolean(anchorEl);
+    var optionIds = options.map(function (opt) { return opt.id; });
+    var valueIds = value.map(function (val) { return val.id; });
+    var availableIds = optionIds.filter(function (optionId) { return !valueIds.includes(optionId); });
+    var availableFilters = options.filter(function (opt) { return availableIds.includes(opt.id); });
+    var allFiltersSelected = availableFilters.length === 0;
+    var handleChange = function (value, event) {
+        onChange(value, event);
         setAnchorEl(null);
     };
-    var handleClick = function (event) {
+    var handleTriggerClick = function (event) {
         setAnchorEl(event.currentTarget);
     };
     var handleClose = function () {
         setAnchorEl(null);
     };
-    var handleChipDelete = function (filterId) {
-        onFilter({ target: { value: filterId } });
-        setAnchorEl(null);
-    };
-    return (React__default['default'].createElement(core.Box, { display: "flex" },
-        React__default['default'].createElement(core.Box, { className: classes.container },
-            React__default['default'].createElement(core.Button, { id: "menu-filter-button", "aria-controls": open ? 'filter-menu' : undefined, "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, onClick: handleClick, size: "small", className: classes.filterButton },
-                React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", padding: 1 },
-                    React__default['default'].createElement(Icon, { icon: SvgLeafIcon }),
-                    React__default['default'].createElement(core.Box, { marginLeft: 1 },
-                        React__default['default'].createElement(Typography, { variant: "caption", color: "info.light" }, "Add Filter")))),
-            hasActiveFilters &&
-                activeFilters.map(function (filter, index) { return (React__default['default'].createElement(Chip, { key: index, onClick: function () { return handleChipDelete(filter.id); }, className: classes.chipButton, label: React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center" },
-                        React__default['default'].createElement(core.Box, { marginLeft: -0.75, marginRight: 0.75 },
-                            React__default['default'].createElement(ItemTag, { alt: filter.abbr, color: filter.color }, filter.abbr)),
-                        React__default['default'].createElement(Typography, { className: classes.tagText, variant: "caption" }, filter.name),
-                        React__default['default'].createElement(core.Box, { display: "flex", marginLeft: 0.75, marginRight: -0.75 },
-                            React__default['default'].createElement(Icon, { icon: SvgXCircle, size: "large", color: "#9E9E9E" }))) })); })),
-        React__default['default'].createElement(core.Menu, { id: "menu-filter-menu", anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
-                'aria-labelledby': 'menu-filter-button',
-            } },
-            !allFiltersActive &&
-                filterOptions.map(function (option, index) {
-                    return (React__default['default'].createElement(core.MenuItem, { key: index, value: option.id, onClick: handleChange },
-                        React__default['default'].createElement(ItemTag, { alt: option.abbr, color: option.color }, option.abbr),
-                        React__default['default'].createElement(core.Box, { ml: 1 }, option.name)));
-                }),
-            allFiltersActive && (React__default['default'].createElement(core.MenuItem, { onClick: handleClose },
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(core.Button, { id: triggerId, "aria-controls": popoverId, "aria-haspopup": "true", "aria-expanded": open, onClick: handleTriggerClick, size: "small", startIcon: React__default['default'].createElement(SvgLeafIcon, null), classes: { label: classes.triggerLabel } }, triggerLabel),
+        React__default['default'].createElement(core.Menu, { id: popoverId, anchorEl: anchorEl, open: open, onClose: handleClose },
+            availableFilters.map(function (option, index) {
+                return (React__default['default'].createElement(core.MenuItem, { key: index, value: option.id, onClick: function (event) { return handleChange(option, event); } },
+                    React__default['default'].createElement(ItemTag, { alt: option.abbr, color: option.color }, option.abbr),
+                    React__default['default'].createElement(core.Box, { ml: 1 }, option.name)));
+            }),
+            allFiltersSelected && (React__default['default'].createElement(core.MenuItem, { onClick: handleClose },
                 React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", alignItems: "center" },
                     React__default['default'].createElement(Icon, { icon: SvgTag, color: "#9E9E9E", size: "large" }),
-                    React__default['default'].createElement(Typography, { variant: "body1", color: "grey.500" }, "All filters have been added")))))));
+                    React__default['default'].createElement(Typography, { variant: "body1", color: "grey.500" }, noOptionsLabel)))))));
 };
 
 var useQuantityPickerStyles = styles.makeStyles(function (theme) { return ({
@@ -2040,6 +1885,30 @@ var SelectableChipGroup = function (props) {
         React__default['default'].createElement(core.Box, { minWidth: "1px" })));
 };
 
+var useStyles = core.makeStyles(function (_a) {
+    var spacing = _a.spacing;
+    return ({
+        root: {
+            padding: spacing(0.5, 0),
+            height: 'unset',
+            borderRadius: 4,
+        },
+        label: {
+            paddingLeft: 8,
+            display: 'flex',
+            gridGap: 8,
+            alignItems: 'center',
+        },
+    });
+});
+var SelectedMenuFiltersList = function (props) {
+    var filters = props.filters, onChipClick = props.onChipClick;
+    var classes = useStyles();
+    return (React__default['default'].createElement(React__default['default'].Fragment, null, filters.map(function (filter, index) { return (React__default['default'].createElement(core.Chip, { key: filter.name + "-" + index, classes: classes, deleteIcon: React__default['default'].createElement(SvgXCircle, null), onDelete: function (event) { return onChipClick(filter, event); }, label: React__default['default'].createElement(React__default['default'].Fragment, null,
+            React__default['default'].createElement(ItemTag, { alt: filter.abbr, color: filter.color }, filter.abbr),
+            React__default['default'].createElement(core.Typography, { variant: "caption" }, filter.name)) })); })));
+};
+
 var palette = {
     primary: {
         light: '#7B7FA3',
@@ -2169,6 +2038,7 @@ exports.ReactionCounter = ReactionCounter;
 exports.ReactionCounterGroup = ReactionCounterGroup;
 exports.SelectableChip = SelectableChip;
 exports.SelectableChipGroup = SelectableChipGroup;
+exports.SelectedMenuFiltersList = SelectedMenuFiltersList;
 exports.StatusTag = StatusTag;
 exports.orderingTheme = orderingTheme;
 Object.keys(core).forEach(function (k) {