@popmenu/ordering-ui 0.113.2 → 0.113.5

package/build/index.js

@@ -493,24 +493,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__namespace.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__namespace.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); }
@@ -1405,23 +1387,16 @@ var MenuItemPrice = function (props) {
         React__default['default'].createElement(core.Typography, null, props.price)));
 };
 
-var useItemtagStyles = styles.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 = styles.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,
@@ -1429,11 +1404,12 @@ var useItemtagStyles = styles.makeStyles(function (theme) { return ({
 }); });
 
 var ItemTag = React.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['default'].createElement(core.Avatar, { ref: ref, alt: alt, classes: { root: classes.root } },
         React__default['default'].createElement(Typography, { variant: "caption", className: classes.text }, children)));
-});
+});
+ItemTag.displayName = 'ItemTag';
 
 var ItemTagGroup = function (props) {
     var children = props.children;
@@ -1740,6 +1716,11 @@ var useDishModifierCardStyles = styles.makeStyles(function (theme) { return ({
     },
 }); });
 var useRadioModifierFormStyles = styles.makeStyles(function (theme) { return ({
+    label: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'space-between',
+    },
     radio: {
         fontSize: theme.spacing(2),
         padding: 'unset',
@@ -1748,14 +1729,25 @@ var useRadioModifierFormStyles = styles.makeStyles(function (theme) { return ({
             color: theme.palette.info.main,
         },
     },
+    hideRadio: {
+        display: 'none',
+    },
     root: {
         justifyContent: 'space-between',
         margin: 0,
         width: 'fill-available',
+        '& > :last-child': {
+            flex: 1,
+        },
     },
 }); });
 var useCheckboxModifierFormStyles = styles.makeStyles(function (theme) { return ({
-    radio: {
+    label: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'space-between',
+    },
+    checkbox: {
         color: '#616161',
         fontSize: theme.spacing(2),
         marginRight: theme.spacing(-0.25),
@@ -1764,18 +1756,23 @@ var useCheckboxModifierFormStyles = styles.makeStyles(function (theme) { return
             color: theme.palette.info.main,
         },
     },
+    hideCheckbox: {
+        display: 'none',
+    },
     root: {
-        justifyContent: 'space-between',
         margin: 0,
         width: 'fill-available',
+        '& > :last-child': {
+            flex: 1,
+        },
     },
 }); });
 var useLabelStyles = styles.makeStyles(function (theme) { return ({
     label: {
         margin: theme.spacing(0.5, 0),
     },
-    outOfStock: {
-        color: theme.palette.warning.dark,
+    disabled: {
+        color: theme.palette.grey[500],
     },
     price: {
         color: theme.palette.grey[700],
@@ -1860,15 +1857,15 @@ var QuantityPicker = function (props) {
 };
 
 var Label = function (props) {
-    var name = props.name, price = props.price, outOfStock = props.outOfStock, messages = props.messages;
+    var _a, _b, _c;
+    var name = props.name, price = props.price, _d = props.disabled, disabled = _d === void 0 ? false : _d;
     var classes = useLabelStyles();
     return (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", className: classes.label },
         React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 8 },
-            React__default['default'].createElement(core.Typography, null, name),
-            outOfStock && (React__default['default'].createElement(core.Typography, { variant: "caption", className: classes.outOfStock }, messages.outOfStockText))),
-        price && React__default['default'].createElement(core.Typography, null,
+            React__default['default'].createElement(core.Typography, { className: classNames((_a = {}, _a[classes.disabled] = disabled, _a)) }, name)),
+        price && (React__default['default'].createElement(core.Typography, { className: classNames((_b = {}, _b[classes.price] = !disabled, _b), (_c = {}, _c[classes.disabled] = disabled, _c)) },
             "+ ",
-            price)));
+            price))));
 };
 var Options = function (props) {
     var handleOptionsClick = props.handleOptionsClick, modifierId = props.modifierId;
@@ -1879,7 +1876,7 @@ var Options = function (props) {
             React__default['default'].createElement(Icon, { icon: SvgChevronRight }))));
 };
 var SingleSelectModifierControl = function (props) {
-    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, messages = props.messages, handleOptionsClick = props.handleOptionsClick;
+    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, handleOptionsClick = props.handleOptionsClick;
     var radioClasses = useRadioModifierFormStyles();
     var makeHandleChange = function (modifier) { return function (e) {
         onChange({
@@ -1893,14 +1890,18 @@ var SingleSelectModifierControl = function (props) {
     }; };
     return (React__default['default'].createElement(core.FormControl, { fullWidth: true },
         React__default['default'].createElement(core.RadioGroup, null, modifiers.map(function (modifier) {
-            var _a;
+            var _a, _b;
+            var _c;
             return (React__default['default'].createElement(core.Box, { key: modifier.id },
-                React__default['default'].createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React__default['default'].createElement(core.Radio, { checked: ((_a = value[0]) === null || _a === void 0 ? void 0 : _a.modifierId) === modifier.id, className: radioClasses.radio, disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier) }), label: React__default['default'].createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }), labelPlacement: "start" }),
+                React__default['default'].createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React__default['default'].createElement(core.Radio, { checked: ((_c = value[0]) === null || _c === void 0 ? void 0 : _c.modifierId) === modifier.id, className: classNames((_a = {}, _a[radioClasses.hideRadio] = modifier.outOfStock, _a), (_b = {}, _b[radioClasses.radio] = !modifier.outOfStock, _b)), disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier) }), label: React__default['default'].createElement(core.Box, { className: radioClasses.label },
+                        React__default['default'].createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
+                        modifier.outOfStock && (React__default['default'].createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
+                            React__default['default'].createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
                 modifier.hasModifiers && React__default['default'].createElement(Options, { handleOptionsClick: handleOptionsClick, modifierId: modifier.id })));
         }))));
 };
 var MultipleSelectControl = function (props) {
-    var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, messages = props.messages, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick;
+    var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick;
     var classes = useCheckboxModifierFormStyles();
     var makeHandleChange = function (modifier) { return function () {
         var isModifierInValue = Boolean(value.find(function (v) { return v.modifierId === modifier.id; }));
@@ -1915,13 +1916,17 @@ var MultipleSelectControl = function (props) {
     }; };
     return (React__default['default'].createElement(core.FormControl, { fullWidth: true },
         React__default['default'].createElement(core.FormGroup, null, modifiers.map(function (modifier) {
+            var _a, _b;
             return (React__default['default'].createElement(core.Box, { key: modifier.id },
-                React__default['default'].createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some(function (v) { return v.modifierId === modifier.id; }), onChange: makeHandleChange(modifier), control: React__default['default'].createElement(core.Checkbox, { className: classes.radio, disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React__default['default'].createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }), labelPlacement: "start" }),
+                React__default['default'].createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some(function (v) { return v.modifierId === modifier.id; }), onChange: makeHandleChange(modifier), control: React__default['default'].createElement(core.Checkbox, { className: classNames((_a = {}, _a[classes.hideCheckbox] = modifier.outOfStock, _a), (_b = {}, _b[classes.checkbox] = !modifier.outOfStock, _b)), disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React__default['default'].createElement(core.Box, { className: classes.label },
+                        React__default['default'].createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
+                        modifier.outOfStock && (React__default['default'].createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
+                            React__default['default'].createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
                 modifier.hasModifiers && React__default['default'].createElement(Options, { handleOptionsClick: handleOptionsClick, modifierId: modifier.id })));
         }))));
 };
 var MultipleQuantitySelectControl = function (props) {
-    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, messages = props.messages, disableNewSelections = props.disableNewSelections;
+    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections;
     var makeHandleChange = function (modifier) { return function (_e, customEvent) {
         onChange({
             isRadio: false,
@@ -1933,9 +1938,12 @@ var MultipleQuantitySelectControl = function (props) {
         });
     }; };
     return (React__default['default'].createElement(core.FormControl, { fullWidth: true },
-        React__default['default'].createElement(core.FormGroup, null, modifiers.map(function (modifier) { return (React__default['default'].createElement(core.Box, { key: modifier.id, style: { justifyContent: 'space-between' }, display: "flex" },
-            React__default['default'].createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }),
-            React__default['default'].createElement(QuantityPicker, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier) }))); }))));
+        React__default['default'].createElement(core.FormGroup, null, modifiers.map(function (modifier) { return (React__default['default'].createElement(core.Box, { key: modifier.id, style: { justifyContent: 'space-between', alignItems: 'center' }, display: "flex" },
+            React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" },
+                React__default['default'].createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
+                modifier.outOfStock && (React__default['default'].createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
+                    React__default['default'].createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" }))),
+                !modifier.outOfStock && (React__default['default'].createElement(QuantityPicker, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier), disabled: isOutOfStock || modifier.outOfStock }))))); }))));
 };
 var ModifierControls = function (props) {
     switch (props.type) {
@@ -2158,7 +2166,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();
@@ -2179,18 +2187,20 @@ var MenuFilter = function (props) {
     var handleClose = function () {
         setAnchorEl(null);
     };
+    var handleClear = function () {
+        onClear();
+        setAnchorEl(null);
+    };
+    if (allFiltersSelected) {
+        return (React__default['default'].createElement(core.Button, { size: "small", startIcon: React__default['default'].createElement(SvgLeafIcon, null), classes: { label: classes.triggerLabel }, onClick: handleClear }, noOptionsLabel));
+    }
     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" }, noOptionsLabel)))))));
+        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)));
+        }))));
 };
 
 var useSelectableChipStyles = styles.makeStyles(function (theme) { return ({
@@ -2273,9 +2283,10 @@ var useStyles$4 = core.makeStyles(function (_a) {
 var SelectedMenuFiltersList = function (props) {
     var filters = props.filters, onChipClick = props.onChipClick;
     var classes = useStyles$4();
-    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,
+    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, onClick: 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)) })); })));
+            React__default['default'].createElement(core.Typography, { variant: "caption" }, filter.name),
+            React__default['default'].createElement(Icon, { icon: SvgXCircle, size: "large" })) })); })));
 };
 
 var MenuSectionGroup = React.forwardRef(function (props, ref) {