@popmenu/ordering-ui 0.77.0 → 0.78.0

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

@@ -1 +1 @@
-export declare const useMenuFilterStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"chipButton" | "container" | "filterButton" | "tagText">;
+export declare const useMenuFilterStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"triggerLabel">;

package/build/components/MenuFilter/MenuFilterProps.d.ts

@@ -1,18 +1,20 @@
-export declare type MenuFilterChangeEvent = {
-    target: {
-        value: number;
-    };
-};
+/// <reference types="react" />
 export declare type MenuFilterOption = {
     id: number;
     abbr: string;
     color: string;
     name: string;
 };
+export declare type MenuFilterChangeHandler = (value: MenuFilterOption, event: React.MouseEvent<HTMLElement>) => void;
 export interface MenuFilterProps {
     /** Callback for setting menu filters  */
-    onFilter: (event: MenuFilterChangeEvent) => void;
+    onChange: MenuFilterChangeHandler;
     /** options to set menu filter with */
-    filterOptions: (MenuFilterOption | undefined)[];
-    activeFilters: (MenuFilterOption | undefined)[];
+    options: MenuFilterOption[];
+    /** selected options to set menu filter with */
+    value: MenuFilterOption[];
+    /** label for menu filter button */
+    triggerLabel?: string;
+    /** label used when no options are available for selection */
+    noOptionsLabel?: string;
 }

package/build/components/MenuFilter/index.d.ts

@@ -1,2 +1,2 @@
 export { MenuFilter as default } from './MenuFilter';
-export { MenuFilterProps, MenuFilterChangeEvent, MenuFilterOption } from './MenuFilterProps';
+export { MenuFilterProps, MenuFilterOption, MenuFilterChangeHandler } from './MenuFilterProps';

package/build/components/SelectedMenuFiltersList/SelectedMenuFiltersList.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SelectedMenuFiltersListProps } from './SelectedMenuFiltersListProps';
+export declare const SelectedMenuFiltersList: (props: SelectedMenuFiltersListProps) => JSX.Element;

package/build/components/SelectedMenuFiltersList/SelectedMenuFiltersListProps.d.ts

@@ -0,0 +1,6 @@
+import { MenuFilterOption } from '../MenuFilter';
+import { MenuFilterChangeHandler } from '../MenuFilter';
+export interface SelectedMenuFiltersListProps {
+    filters: MenuFilterOption[];
+    onChipClick: MenuFilterChangeHandler;
+}

package/build/components/SelectedMenuFiltersList/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectedMenuFiltersList } from './SelectedMenuFiltersList';
+export { SelectedMenuFiltersListProps } from './SelectedMenuFiltersListProps';

package/build/components/index.d.ts

@@ -8,10 +8,11 @@ export { default as ItemTag, ItemTagProps } from './ItemTag';
 export { default as ItemTagGroup } from './ItemTagGroup';
 export { default as LocationCard, LocationCardProps } from './LocationCard';
 export { default as MenuDropdown, MenuDropdownProps, MenuDropdownOption } from './MenuDropdown';
-export { default as MenuFilter, MenuFilterProps, MenuFilterChangeEvent, MenuFilterOption } from './MenuFilter';
+export { default as MenuFilter, MenuFilterProps, MenuFilterOption, MenuFilterChangeHandler } from './MenuFilter';
 export { default as ReactionCounter, ReactionCounterProps } from './ReactionCounter';
 export { default as ReactionCounterGroup } from './ReactionCounterGroup';
 export { default as QuantityPicker, QuantityPickerProps, QuantityChangeEvent } from './QuantityPicker';
 export { default as SelectableChip } from './SelectableChip';
 export { default as SelectableChipGroup, SelectableChipGroupProps } from './SelectableChipGroup';
 export { default as StatusTag, StatusTagProps } from './StatusTag';
+export { SelectedMenuFiltersList, SelectedMenuFiltersListProps } from './SelectedMenuFiltersList';

package/build/index.es.js

@@ -1,4 +1,4 @@
-import { Button as Button$2, makeStyles, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Box, Avatar as Avatar$1, useTheme as useTheme$1, FormControl, Select, InputAdornment, MenuItem, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, Radio as Radio$1, Menu, TextField } from '@material-ui/core';
+import { Button as Button$2, makeStyles, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Box, Avatar as Avatar$1, useTheme as useTheme$1, FormControl, Select, InputAdornment, MenuItem, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, Radio as Radio$1, Menu, TextField, Chip } from '@material-ui/core';
 export * from '@material-ui/core';
 import * as React from 'react';
 import React__default, { forwardRef, createElement, useState } from 'react';
@@ -18,7 +18,7 @@ import '@material-ui/core/CardHeader';
 import '@material-ui/core/CardMedia';
 import MuiCheckbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import MuiChip from '@material-ui/core/Chip';
+import '@material-ui/core/Chip';
 import '@material-ui/core/Collapse';
 import '@material-ui/core/Dialog';
 import '@material-ui/core/DialogActions';
@@ -142,77 +142,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.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.createElement("g", {
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M14.667 7.387V8a6.667 6.667 0 11-3.954-6.093"
-  }), /*#__PURE__*/React.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.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.createElement("g", {
-    clipPath: "url(#x-circle_svg__clip0_8_6136)",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.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.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "x-circle_svg__clip0_8_6136"
-  }, /*#__PURE__*/React.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.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.createElement("g", {
-    clipPath: "url(#info_svg__clip0_8_5377)",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.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.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "info_svg__clip0_8_5377"
-  }, /*#__PURE__*/React.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); }
@@ -231,49 +160,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.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.createElement("g", {
-    clipPath: "url(#error_svg__clip0_8_5411)",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.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.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "error_svg__clip0_8_5411"
-  }, /*#__PURE__*/React.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.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.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 = makeStyles(function (_a) {
     var spacing = _a.spacing, palette = _a.palette;
     var getFontSize = function (_a) {
@@ -581,7 +467,7 @@ var getBorder = function (theme) { return function (props) {
     }
     return borderColor;
 }; };
-var useChipStyles = makeStyles$1(function (theme) { return ({
+makeStyles$1(function (theme) { return ({
     root: {
         background: getBackground(theme),
         color: getColor(theme),
@@ -598,21 +484,6 @@ var useChipStyles = makeStyles$1(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.createElement(IconDictionary[severity]) : undefined;
-    var deleteIcon = React__default.createElement(SvgXCircle$1);
-    return React__default.createElement(MuiChip, __assign({ classes: classes, icon: icon, deleteIcon: deleteIcon }, restProps));
-};
-Chip.displayName = 'Chip';
-
 var defaultTypographyProps = {
     variant: 'body1',
 };
@@ -783,7 +654,7 @@ Link.defaultProps = {
 };
 Link.displayName = 'Link';
 
-var useStyles = makeStyles(function (_a) {
+var useStyles$1 = makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -797,7 +668,7 @@ var useStyles = makeStyles(function (_a) {
 });
 var Paper = forwardRef(function (props, ref) {
     var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
-    var classes = useStyles(props);
+    var classes = useStyles$1(props);
     return React__default.createElement(Paper$1, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
 });
 Paper.displayName = 'Paper';
@@ -1399,6 +1270,9 @@ var useDishCheckoutCardStyles = makeStyles$1(function (theme) { return ({
         height: theme.spacing(2.5),
         color: theme.palette.info.main,
     },
+    editButton: {
+        color: theme.palette.info.main,
+    },
     price: {
         fontSize: '18px',
     },
@@ -1448,7 +1322,7 @@ var DishCheckoutCard = function (props) {
                     specialInstructions,
                     "\"")),
             React__default.createElement(Box, { display: "flex", gridGap: 1, height: "100%" },
-                React__default.createElement(Button$1, { variant: "text", onClick: onEdit }, "Edit"),
+                React__default.createElement(Button$1, { className: classes.editButton, variant: "text", onClick: onEdit }, "Edit"),
                 React__default.createElement(IconButton, { onClick: onDelete },
                     React__default.createElement(Icon, { icon: SvgTrash, className: classes.deleteIcon })))),
         React__default.createElement(Box, { display: "flex", gridGap: 16, alignItems: "center" },
@@ -1796,6 +1670,12 @@ var MenuDropdown = function (props) {
             }, className: classes.select }, menuOptions.map(function (option, index) { return (React__default.createElement(MenuItem, { key: index, value: option.id }, option.name)); }))));
 };
 
+var useMenuFilterStyles = makeStyles$1(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); }
@@ -1812,74 +1692,40 @@ function SvgLeafIcon(props) {
   })));
 }
 
-var useMenuFilterStyles = makeStyles$1(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 = 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 = 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.createElement(Box, { display: "flex" },
-        React__default.createElement(Box, { className: classes.container },
-            React__default.createElement(Button$2, { 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.createElement(Box, { display: "flex", alignItems: "center", padding: 1 },
-                    React__default.createElement(Icon, { icon: SvgLeafIcon }),
-                    React__default.createElement(Box, { marginLeft: 1 },
-                        React__default.createElement(Typography, { variant: "caption", color: "info.light" }, "Add Filter")))),
-            hasActiveFilters &&
-                activeFilters.map(function (filter, index) { return (React__default.createElement(Chip, { key: index, onClick: function () { return handleChipDelete(filter.id); }, className: classes.chipButton, label: React__default.createElement(Box, { display: "flex", alignItems: "center" },
-                        React__default.createElement(Box, { marginLeft: -0.75, marginRight: 0.75 },
-                            React__default.createElement(ItemTag, { alt: filter.abbr, color: filter.color }, filter.abbr)),
-                        React__default.createElement(Typography, { className: classes.tagText, variant: "caption" }, filter.name),
-                        React__default.createElement(Box, { display: "flex", marginLeft: 0.75, marginRight: -0.75 },
-                            React__default.createElement(Icon, { icon: SvgXCircle, size: "large", color: "#9E9E9E" }))) })); })),
-        React__default.createElement(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.createElement(MenuItem, { key: index, value: option.id, onClick: handleChange },
-                        React__default.createElement(ItemTag, { alt: option.abbr, color: option.color }, option.abbr),
-                        React__default.createElement(Box, { ml: 1 }, option.name)));
-                }),
-            allFiltersActive && (React__default.createElement(MenuItem, { onClick: handleClose },
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Button$2, { id: triggerId, "aria-controls": popoverId, "aria-haspopup": "true", "aria-expanded": open, onClick: handleTriggerClick, size: "small", startIcon: React__default.createElement(SvgLeafIcon, null), classes: { label: classes.triggerLabel } }, triggerLabel),
+        React__default.createElement(Menu, { id: popoverId, anchorEl: anchorEl, open: open, onClose: handleClose },
+            availableFilters.map(function (option, index) {
+                return (React__default.createElement(MenuItem, { key: index, value: option.id, onClick: function (event) { return handleChange(option, event); } },
+                    React__default.createElement(ItemTag, { alt: option.abbr, color: option.color }, option.abbr),
+                    React__default.createElement(Box, { ml: 1 }, option.name)));
+            }),
+            allFiltersSelected && (React__default.createElement(MenuItem, { onClick: handleClose },
                 React__default.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "center" },
                     React__default.createElement(Icon, { icon: SvgTag, color: "#9E9E9E", size: "large" }),
-                    React__default.createElement(Typography, { variant: "body1", color: "grey.500" }, "All filters have been added")))))));
+                    React__default.createElement(Typography, { variant: "body1", color: "grey.500" }, noOptionsLabel)))))));
 };
 
 var useQuantityPickerStyles = makeStyles$1(function (theme) { return ({
@@ -1995,6 +1841,30 @@ var SelectableChipGroup = function (props) {
         React__default.createElement(Box, { minWidth: "1px" })));
 };
 
+var useStyles = 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.createElement(React__default.Fragment, null, filters.map(function (filter, index) { return (React__default.createElement(Chip, { key: filter.name + "-" + index, classes: classes, deleteIcon: React__default.createElement(SvgXCircle, null), onDelete: function (event) { return onChipClick(filter, event); }, label: React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(ItemTag, { alt: filter.abbr, color: filter.color }, filter.abbr),
+            React__default.createElement(Typography$1, { variant: "caption" }, filter.name)) })); })));
+};
+
 var palette = {
     primary: {
         light: '#7B7FA3',
@@ -2109,5 +1979,5 @@ var orderingTheme = {
     props: props,
 };
 
-export { Button$1 as Button, DishCard, DishCheckoutCard, DishDetailsReview, DishModifierCard, ItemTag, ItemTagGroup, LocationCard, MenuDropdown, MenuFilter, QuantityPicker, ReactionCounter, ReactionCounterGroup, SelectableChip, SelectableChipGroup, StatusTag, orderingTheme };
+export { Button$1 as Button, DishCard, DishCheckoutCard, DishDetailsReview, DishModifierCard, ItemTag, ItemTagGroup, LocationCard, MenuDropdown, MenuFilter, QuantityPicker, ReactionCounter, ReactionCounterGroup, SelectableChip, SelectableChipGroup, SelectedMenuFiltersList, StatusTag, orderingTheme };
 //# sourceMappingURL=index.es.js.map