@popmenu/ordering-ui 0.113.1 → 0.113.3

package/build/components/ItemTag/ItemTagProps.d.ts

@@ -1,7 +1,5 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
 export interface ItemTagProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
-    /** Sets the border-color and text-color for an ItemTag. */
-    color?: string;
     /** sets alt for Avatar component */
     alt?: string;
 }

package/build/components/ItemTag/itemTag.styles.d.ts

@@ -1,2 +1 @@
-import { ItemTagProps } from './ItemTagProps';
-export declare const useItemtagStyles: (props: ItemTagProps) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useItemTagStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"root" | "text">;

package/build/components/MenuDropdown/MenuDropdownProps.d.ts

@@ -10,4 +10,6 @@ export interface MenuDropdownProps {
     menuOptions: MenuDropdownOption[];
     /** current menu select value */
     selectedOptionId: number | string;
+    /** label for the dropdown */
+    label: string;
 }

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

@@ -6,9 +6,12 @@ export declare type MenuFilterOption = {
     name: string;
 };
 export declare type MenuFilterChangeHandler = (value: MenuFilterOption, event: React.MouseEvent<HTMLElement>) => void;
+export declare type MenuFilterClearHandler = () => void;
 export interface MenuFilterProps {
     /** Callback for setting menu filters  */
     onChange: MenuFilterChangeHandler;
+    /** Callback for setting menu filters  */
+    onClear: MenuFilterClearHandler;
     /** options to set menu filter with */
     options: MenuFilterOption[];
     /** selected options to set menu filter with */

package/build/index.es.js

@@ -456,24 +456,6 @@ function SvgPlusCircle(props) {
   })))));
 }
 
-var _path$1E;
-
-function _extends$3N() { _extends$3N = 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$3N.apply(this, arguments); }
-
-function SvgTag(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3N({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$1E || (_path$1E = /*#__PURE__*/React.createElement("path", {
-    d: "M13.727 8.94l-4.78 4.78a1.334 1.334 0 01-1.887 0L1.333 8V1.333H8l5.727 5.727a1.333 1.333 0 010 1.88v0zm-9.06-4.273h.007",
-    stroke: "currentColor"
-  })));
-}
-
 var _path$1u;
 
 function _extends$3u() { _extends$3u = 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$3u.apply(this, arguments); }
@@ -1368,23 +1350,16 @@ var MenuItemPrice = function (props) {
         React__default.createElement(Typography$1, null, props.price)));
 };
 
-var useItemtagStyles = makeStyles(function (theme) { return ({
-    root: function (_a) {
-        var _b, _c;
-        var _d = _a.color, color = _d === void 0 ? '' : _d;
-        var _e = color.split('.'), colorGroup = _e[0], colorVariant = _e[1];
-        return {
-            // @ts-expect-error - todo.
-            color: ((_b = theme.palette[colorGroup]) === null || _b === void 0 ? void 0 : _b[colorVariant]) || color,
-            // @ts-expect-error - todo.
-            borderColor: ((_c = theme.palette[colorGroup]) === null || _c === void 0 ? void 0 : _c[colorVariant]) || color,
-            border: '1.5px solid',
-            background: 'none',
-            height: '24px',
-            lineHeight: 1.5,
-            position: 'static',
-            width: '24px',
-        };
+var useItemTagStyles = makeStyles(function (theme) { return ({
+    root: {
+        color: theme.palette.text.primary,
+        borderColor: theme.palette.text.primary,
+        border: '1.5px solid',
+        background: 'none',
+        height: '24px',
+        lineHeight: 1.5,
+        position: 'static',
+        width: '24px',
     },
     text: {
         lineHeight: 1.5,
@@ -1392,11 +1367,12 @@ var useItemtagStyles = makeStyles(function (theme) { return ({
 }); });
 
 var ItemTag = forwardRef(function (props, ref) {
-    var _a = props.color, color = _a === void 0 ? 'gray.dark' : _a, alt = props.alt, children = props.children;
-    var classes = useItemtagStyles({ color: color });
+    var alt = props.alt, children = props.children;
+    var classes = useItemTagStyles();
     return (React__default.createElement(Avatar$1, { ref: ref, alt: alt, classes: { root: classes.root } },
         React__default.createElement(Typography, { variant: "caption", className: classes.text }, children)));
-});
+});
+ItemTag.displayName = 'ItemTag';
 
 var ItemTagGroup = function (props) {
     var children = props.children;
@@ -2049,6 +2025,10 @@ var useMenuDropdownStyles = makeStyles(function (theme) {
         },
         select: {
             '& .MuiSelect-root': (_b = {
+                    '&:focus': {
+                        outline: '2px solid #0076CB',
+                        borderRadius: 8,
+                    },
                     color: '#212121',
                     padding: theme.spacing(1, 0.5, 1, 0.5),
                     zIndex: 10
@@ -2075,7 +2055,7 @@ var MenuDropdown = function (props) {
         return breakpoints.down('md');
     });
     return (React__default.createElement(FormControl, { hiddenLabel: true, classes: { root: classes.formControl } },
-        React__default.createElement(Select, { open: open, value: selectedOptionId, id: "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(Select, { open: open, value: selectedOptionId, id: "menu-dropdown-select", "aria-label": props.label, 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: 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,
@@ -2117,7 +2097,7 @@ function SvgLeafIcon(props) {
 }
 
 var MenuFilter = function (props) {
-    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 options = props.options, onChange = props.onChange, onClear = props.onClear, value = props.value, _a = props.triggerLabel, triggerLabel = _a === void 0 ? 'Add Filter' : _a, _b = props.noOptionsLabel, noOptionsLabel = _b === void 0 ? 'Reset Filters' : _b;
     var triggerId = 'menu-filter-trigger';
     var popoverId = 'menu-filter-popover';
     var classes = useMenuFilterStyles();
@@ -2138,18 +2118,20 @@ var MenuFilter = function (props) {
     var handleClose = function () {
         setAnchorEl(null);
     };
+    var handleClear = function () {
+        onClear();
+        setAnchorEl(null);
+    };
+    if (allFiltersSelected) {
+        return (React__default.createElement(Button$1, { size: "small", startIcon: React__default.createElement(SvgLeafIcon, null), classes: { label: classes.triggerLabel }, onClick: handleClear }, noOptionsLabel));
+    }
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Button$1, { 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$1, { 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$1, { 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" }, noOptionsLabel)))))));
+        React__default.createElement(Menu, { id: popoverId, anchorEl: anchorEl, open: open, onClose: handleClose }, availableFilters.map(function (option, index) {
+            return (React__default.createElement(MenuItem$1, { 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)));
+        }))));
 };
 
 var useSelectableChipStyles = makeStyles(function (theme) { return ({
@@ -2232,9 +2214,10 @@ var useStyles$4 = makeStyles$1(function (_a) {
 var SelectedMenuFiltersList = function (props) {
     var filters = props.filters, onChipClick = props.onChipClick;
     var classes = useStyles$4();
-    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,
+    return (React__default.createElement(React__default.Fragment, null, filters.map(function (filter, index) { return (React__default.createElement(Chip, { key: filter.name + "-" + index, classes: classes, onClick: 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)) })); })));
+            React__default.createElement(Typography$1, { variant: "caption" }, filter.name),
+            React__default.createElement(Icon, { icon: SvgXCircle, size: "large" })) })); })));
 };
 
 var MenuSectionGroup = forwardRef(function (props, ref) {
@@ -2511,10 +2494,12 @@ var overrides = {
     },
     MuiCssBaseline: {
         '@global': {
-            '*:focus-visible': {
-                outline: '2px solid #0076CB',
-                outlineOffset: '-4px',
-                borderRadius: 8,
+            '*:focus-visible, a:focus-visible': {
+                '&': {
+                    outline: '2px solid #0076CB',
+                    outlineOffset: '-4px',
+                    borderRadius: 8,
+                },
             },
         },
     },