@popmenu/ordering-ui 0.89.1 → 0.91.0

package/build/components/DishCheckoutCard/DishCheckoutCardProps.d.ts

@@ -21,4 +21,6 @@ export interface DishCheckoutCardProps {
     onQuantityChange: (id: number, value: number) => void;
     /** Special instructions text */
     specialInstructions?: string | null;
+    /** If item is in cart but is not unavailable */
+    warningMessage?: string;
 }

package/build/components/DishModifierCard/DishModifierCardProps.d.ts

@@ -1,25 +1,30 @@
-declare type ModifierValue = {
-    id: number;
-    price?: number;
-    quantity?: number;
+export declare type ModifierValue = Pick<Modifier, 'id' | 'price'> & {
+    quantity: number;
 };
-declare type Modifier = {
+export declare type Modifier = {
     id: number;
     name: string;
     outOfStock: boolean;
-    price?: string;
+    price: number;
+    formattedPrice: string;
+    quantity: number;
 };
-declare type OnChange = (value: Array<ModifierValue>, checked?: boolean) => void;
 interface Base {
     /** Modifier options */
     modifiers: Array<Modifier>;
     /** The values of the modifier form */
-    value: Array<ModifierValue> | undefined;
+    value: Array<ModifierValue>;
     /** Handles the change event */
-    onChange: OnChange;
+    onChange: (value: Array<ModifierValue>) => void;
     isOutOfStock: boolean;
 }
-export declare type DishModifierCardProps = Base & {
+export declare type DishModifierCardProps = {
+    /** Modifier options */
+    modifiers: Array<Modifier>;
+    /** The values of the modifier form */
+    value: Array<ModifierValue>;
+    /** Handles the change event */
+    onChange: (value: Array<ModifierValue>) => void;
     /** Name of the modifier */
     name: string;
     /** Denotes the max amount of selections have been reached */
@@ -30,7 +35,8 @@ export declare type DishModifierCardProps = Base & {
     isRequired: boolean;
     /** Denotes if modifier is out of stock */
     isOutOfStock: boolean;
-    type: 'singleSelect' | 'multipleSelect';
+    /** Selection type for modifier group */
+    type: 'singleSelect' | 'multipleSelect' | 'multipleQuantitySelect';
     /** Renders the text of the dish modifiers */
     messages: {
         optionalText: string;
@@ -43,8 +49,5 @@ export declare type RadioModifierFormProps = Base;
 export declare type CheckboxModifierFormProps = Base & {
     disableNewSelections?: boolean;
 };
-export declare type ModifierOptionsControlProps = Base & {
-    disableNewSelections?: boolean;
-    type: 'singleSelect' | 'multipleSelect';
-};
+export declare type ModifierOptionsControlProps = Pick<DishModifierCardProps, 'value' | 'modifiers' | 'isOutOfStock' | 'onChange' | 'disableNewSelections' | 'type' | 'messages'>;
 export {};

package/build/components/DishModifierCard/ModifierControls.d.ts

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

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

@@ -1,6 +1,7 @@
 export declare type MenuDropdownOption = {
     id: number | string;
     name: string;
+    isUnavailable?: boolean;
 };
 export interface MenuDropdownProps {
     /** Callback for selecting active menu  */

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

@@ -1,2 +1,5 @@
+import { QuantityPickerProps } from './QuantityPickerProps';
 export declare const useQuantityPickerStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"root">;
-export declare const useQuantityInputStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"root" | "input" | "adornedStart" | "adornedEnd">;
+export declare const useQuantityInputStyles: (props: QuantityPickerProps) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useStartAdornmentStyles: (props: QuantityPickerProps) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useEndAdornmentStyles: (props: QuantityPickerProps) => import("@material-ui/styles").ClassNameMap<string>;

package/build/components/QuantityPicker/QuantityPickerProps.d.ts

@@ -1,13 +1,19 @@
+import React, { ChangeEvent } from 'react';
 export declare type QuantityChangeEvent = {
-    target: {
-        value: number;
-    };
+    quantity: number;
+    reason: string;
 };
 export interface QuantityPickerProps {
     /** Callback for when the quantity is increased or decreased for the parent form  */
-    onChange: (event: QuantityChangeEvent, reason: string) => void;
+    onChange: (event: ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>, customEvent: QuantityChangeEvent) => void;
     /** the quantity represented by the picker */
     value: number;
     /** determines if picker is active */
     disabled?: boolean;
+    /** limits the quantity picker from increasing the value */
+    disableIncrement?: boolean;
+    /** prevents a uer from typing a new value, forcing them to use the increment/decrement buttons */
+    preventManualChange?: boolean;
+    /** indicates how the quantity picker will be used and changes styles accordingly */
+    variation: 'itemCount' | 'modifierCount';
 }

package/build/index.es.js

@@ -1,14 +1,14 @@
-import { Button as Button$2, makeStyles as makeStyles$1, Box, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Avatar as Avatar$1, Card, CardActionArea, FormControl, Select, InputAdornment, MenuItem as MenuItem$1, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$2, Radio as Radio$2, Menu, TextField, Tabs, Chip, DialogTitle as DialogTitle$1, IconButton as IconButton$1, withStyles, Switch as Switch$2 } from '@material-ui/core';
+import { Button as Button$1, makeStyles as makeStyles$1, Box, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Avatar as Avatar$1, Card, CardActionArea, FormControl, Select, InputAdornment, MenuItem as MenuItem$1, TextField, RadioGroup, FormControlLabel as FormControlLabel$1, Radio as Radio$2, FormGroup, Checkbox as Checkbox$2, Menu, Tabs, Chip, DialogTitle as DialogTitle$1, IconButton as IconButton$1, withStyles, Switch as Switch$2 } from '@material-ui/core';
 export * from '@material-ui/core';
 import * as React from 'react';
 import React__default, { forwardRef, createElement, createContext, useContext, useState } from 'react';
-import { makeStyles, useTheme, lighten } from '@material-ui/core/styles';
+import { makeStyles, lighten } from '@material-ui/core/styles';
 import '@material-ui/lab/Alert';
 import '@material-ui/core/AppBar';
 import MuiAvatar from '@material-ui/core/Avatar';
 import '@material-ui/core/Badge';
-import MuiButton from '@material-ui/core/Button';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import '@material-ui/core/Button';
+import '@material-ui/core/CircularProgress';
 import '@material-ui/core/ButtonGroup';
 import Card$1 from '@material-ui/core/Card';
 import CardActionArea$1 from '@material-ui/core/CardActionArea';
@@ -48,7 +48,6 @@ import MuiToggleButton from '@material-ui/lab/ToggleButton';
 import MuiToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import MuiTooltip from '@material-ui/core/Tooltip';
 import { Skeleton } from '@material-ui/lab';
-import MuiRadioGroup from '@material-ui/core/RadioGroup';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -86,9 +85,19 @@ function __rest$1(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || from);
 }
 
-var Button$1 = forwardRef(function (props, ref) {
+var Button = forwardRef(function (props, ref) {
     var _a = props.variation, variation = _a === void 0 ? 'primary' : _a, muiProps = __rest$1(props, ["variation"]);
     var variationProps = {};
     switch (variation) {
@@ -101,9 +110,9 @@ var Button$1 = forwardRef(function (props, ref) {
             variationProps.color = 'primary';
             break;
     }
-    return React__default.createElement(Button$2, __assign$1({}, variationProps, muiProps, { ref: ref }));
+    return React__default.createElement(Button$1, __assign$1({}, variationProps, muiProps, { ref: ref }));
 });
-Button$1.displayName = 'Button';
+Button.displayName = 'Button';
 
 var useDishCardStyles = makeStyles(function (theme) {
     var _a, _b;
@@ -431,6 +440,24 @@ function SvgTag(props) {
   })));
 }
 
+var _path$K;
+
+function _extends$1I() { _extends$1I = 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$1I.apply(this, arguments); }
+
+function SvgWarning(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1I({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$K || (_path$K = /*#__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 _path$z;
 
 function _extends$1o() { _extends$1o = 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$1o.apply(this, arguments); }
@@ -746,7 +773,7 @@ makeStyles(function (theme) { return ({
     },
 }); });
 
-var useButtonStyles = makeStyles(function () { return ({
+makeStyles(function () { return ({
     root: {
         minWidth: 'unset',
     },
@@ -758,19 +785,6 @@ var useButtonStyles = makeStyles(function () { return ({
     },
 }); });
 
-var Button = forwardRef(function (props, ref) {
-    props.textTransform; var loading = props.loading, classesOverride = props.classes, className = props.className, muiProps = __rest(props, ["textTransform", "loading", "classes", "className"]);
-    props.classes; var styleProps = __rest(props, ["classes"]);
-    var classes = useButtonStyles(styleProps);
-    var typography = useTheme().typography;
-    var loadingIndicator = {
-        startIcon: React__default.createElement(CircularProgress, { color: "inherit", size: typography.button.fontSize }),
-        disabled: true,
-    };
-    return (React__default.createElement(MuiButton, __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), className: classNames$1([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
-});
-Button.displayName = 'Button';
-
 var Checkbox$1 = forwardRef(function (props, ref) {
     var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
     var control = React__default.createElement(MuiCheckbox, __assign({ disabled: label ? undefined : disabled }, muiProps));
@@ -925,12 +939,12 @@ var useTypographyStyles = makeStyles(function (theme) {
     });
 });
 
-var Typography = forwardRef(function (props, ref) {
-    props.weight; props.color; var restProps = __rest(props, ["weight", "color"]);
+var Typography = function (props) {
+    props.weight; props.color; var TypographyRef = props.TypographyRef, restProps = __rest(props, ["weight", "color", "TypographyRef"]);
     var classes = useTypographyStyles(__assign({}, props));
     var variantMapping = { subtitle1: 'p' };
-    return React__default.createElement(Typography$1, __assign({ ref: ref, classes: classes, variantMapping: variantMapping }, restProps));
-});
+    return React__default.createElement(Typography$1, __assign({ classes: classes, variantMapping: variantMapping, ref: TypographyRef }, restProps));
+};
 Typography.displayName = 'Typography';
 Typography.defaultProps = defaultTypographyProps;
 
@@ -1457,6 +1471,11 @@ var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
     selectPaper: {
         maxHeight: theme.spacing(37),
     },
+    warning: {
+        color: theme.palette.error.main,
+        display: 'flex',
+        gridGap: theme.spacing(0.825),
+    },
 }); });
 
 var OrderingAppContext = createContext(null);
@@ -1474,7 +1493,7 @@ var OrderingAppContextProvider = function (props) {
 
 var DishCheckoutCard = function (props) {
     var _a;
-    var id = props.id, name = props.name, quantity = props.quantity, modifiers = props.modifiers, onDelete = props.onDelete, onEdit = props.onEdit, onQuantityChange = props.onQuantityChange, price = props.price, specialInstructions = props.specialInstructions, disabled = props.disabled;
+    var id = props.id, name = props.name, quantity = props.quantity, modifiers = props.modifiers, onDelete = props.onDelete, onEdit = props.onEdit, onQuantityChange = props.onQuantityChange, price = props.price, specialInstructions = props.specialInstructions, disabled = props.disabled, warningMessage = props.warningMessage;
     var classes = useDishCheckoutCardStyles(props);
     var appContext = useOrderingAppContext()[0];
     var _b = useState(false), open = _b[0], setOpen = _b[1];
@@ -1496,7 +1515,7 @@ var DishCheckoutCard = function (props) {
                     specialInstructions,
                     "\"")),
             React__default.createElement(Box, { display: "flex", gridGap: 1, height: "100%", alignItems: "center" },
-                React__default.createElement(Button$1, { disabled: disabled, className: classes.editButton, variant: "text", onClick: onEdit }, "Edit"),
+                React__default.createElement(Button, { disabled: disabled, className: classes.editButton, variant: "text", onClick: onEdit }, "Edit"),
                 React__default.createElement(IconButton, { disabled: disabled, onClick: onDelete, classes: { root: classes.deleteButton } },
                     React__default.createElement(Icon, { icon: SvgTrash, size: "large" })))),
         React__default.createElement(Box, { display: "flex", gridGap: 16, alignItems: "center" },
@@ -1515,7 +1534,11 @@ var DishCheckoutCard = function (props) {
                         getContentAnchorEl: null,
                         classes: { paper: classes.selectPaper },
                     }, className: classes.select }, Array.from({ length: 99 }, function (_, index) { return (React__default.createElement(MenuItem$1, { key: index + 1, value: index + 1 }, index + 1)); }))),
-            React__default.createElement(Typography, { className: classes.price }, formattedPrice))));
+            React__default.createElement(Typography, { className: classes.price }, formattedPrice)),
+        warningMessage && (React__default.createElement(Box, { className: classes.warning },
+            React__default.createElement(Box, { paddingTop: 0.25 },
+                React__default.createElement(Icon, { icon: SvgWarning, size: "medium" })),
+            React__default.createElement(Typography, { variant: "body2" }, warningMessage)))));
 };
 
 var DishDetailsReview = forwardRef(function (props) {
@@ -1581,98 +1604,190 @@ var useLabelStyles = makeStyles(function (theme) { return ({
     },
 }); });
 
+var useQuantityPickerStyles = makeStyles(function (theme) { return ({
+    root: {
+        height: theme.spacing(7),
+        backgroundColor: 'none',
+    },
+}); });
+var useQuantityInputStyles = makeStyles(function (theme) { return ({
+    root: {
+        height: '100%',
+        width: 'min-content',
+        borderRadius: theme.spacing(12.5),
+        background: function (props) { return (props.variation === 'modifierCount' ? 'unset' : theme.palette.grey[100]); },
+    },
+    input: {
+        '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+            display: 'none',
+        },
+        '-moz-appearance': 'textfield',
+        fontWeight: 600,
+        padding: 0,
+        textAlign: 'center',
+        zIndex: function (props) { return (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1); },
+        backgroundColor: function (props) { return (props.variation === 'modifierCount' ? theme.palette.grey[100] : 'unset'); },
+        alignSelf: function (props) { return (props.variation === 'modifierCount' ? 'stretch' : 'unset'); },
+        height: function (props) { return (props.variation === 'modifierCount' ? 'auto' : 'unset'); },
+        minWidth: function (props) { return (props.variation === 'modifierCount' ? theme.spacing(5) : theme.spacing(2.75)); },
+        borderRadius: function (props) { return (props.variation === 'modifierCount' ? theme.spacing(1) : 'unset'); },
+        margin: function (props) { return (props.variation === 'modifierCount' ? theme.spacing(0.5, 0) : 0); },
+    },
+}); });
+var useStartAdornmentStyles = makeStyles(function (theme) { return ({
+    root: {
+        color: theme.palette.text.primary,
+        zIndex: function (props) { return (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1); },
+    },
+}); });
+var useEndAdornmentStyles = makeStyles(function (theme) { return ({
+    root: {
+        color: theme.palette.text.primary,
+    },
+}); });
+
+var QuantityPicker = function (props) {
+    var value = props.value, onChange = props.onChange, disabled = props.disabled, disableIncrement = props.disableIncrement, preventManualChange = props.preventManualChange, variation = props.variation;
+    var fieldClasses = useQuantityPickerStyles();
+    var inputClasses = useQuantityInputStyles(props);
+    var startAdornmentClasses = useStartAdornmentStyles(props);
+    var endAdornmentClasses = useEndAdornmentStyles(props);
+    var onIncrement = function (event) {
+        onChange(event, { quantity: value + 1, reason: 'increment' });
+    };
+    var onDecrement = function (event) {
+        onChange(event, { quantity: value - 1, reason: 'decrement' });
+    };
+    var handleChange = function (event) {
+        if (preventManualChange) {
+            event.preventDefault();
+        }
+        if (!preventManualChange) {
+            onChange(event, { quantity: parseInt(event.target.value), reason: 'change' });
+        }
+    };
+    return (React__default.createElement(TextField, { classes: fieldClasses, type: "number", variant: variation === 'itemCount' ? 'filled' : 'standard', defaultValue: value, value: value, disabled: disabled, onChange: handleChange, InputProps: {
+            classes: inputClasses,
+            disableUnderline: true,
+            endAdornment: (React__default.createElement(IconButton, { className: endAdornmentClasses.root, color: "default", tabIndex: -1, onClick: onIncrement, disabled: disabled || disableIncrement },
+                React__default.createElement(Icon, { icon: SvgPlusCircle }))),
+            startAdornment: (React__default.createElement(IconButton, { className: startAdornmentClasses.root, color: "default", tabIndex: -1, onClick: onDecrement, disabled: disabled || value <= 0 },
+                React__default.createElement(Icon, { icon: SvgMinusCircle }))),
+        } }));
+};
+
 var Label = function (props) {
-    var name = props.name, price = props.price, disabled = props.disabled, isOutOfStock = props.isOutOfStock;
+    var name = props.name, price = props.price, outOfStock = props.outOfStock, messages = props.messages;
     var classes = useLabelStyles();
     return (React__default.createElement(Box, { display: "flex", flexDirection: "column", className: classes.label },
         React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 8 },
             React__default.createElement(Typography$1, null, name),
-            !isOutOfStock && disabled && (React__default.createElement(Typography$1, { variant: "caption", className: classes.outOfStock }, "Out of stock"))),
-        price && React__default.createElement(Typography$1, { className: !disabled ? classes.price : '' },
+            outOfStock && (React__default.createElement(Typography$1, { variant: "caption", className: classes.outOfStock }, messages.outOfStockText))),
+        price && React__default.createElement(Typography$1, null,
             "+ ",
             price)));
 };
-var CheckboxGroup = function (props) {
-    var value = props.value, modifiers = props.modifiers, onChange = props.onChange, disableNewSelections = props.disableNewSelections, isOutOfStock = props.isOutOfStock;
-    var classes = useCheckboxModifierFormStyles();
-    var appContext = useOrderingAppContext()[0];
-    var handleChange = function (event) {
-        var _a;
-        var price = (_a = modifiers.find(function (modifier) { return modifier.id === parseInt(event.target.value); })) === null || _a === void 0 ? void 0 : _a.price;
+var SingleSelectModifierControl = function (props) {
+    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, messages = props.messages;
+    var radioClasses = useRadioModifierFormStyles();
+    var makeHandleChange = function (modifier) { return function (e) {
         onChange([
             {
-                id: parseInt(event.target.value),
-                price: (price && parseInt(price)) || 0,
-                quantity: 1,
-            },
-        ], event.target.checked);
-    };
-    return (React__default.createElement(Box, { display: "flex", flexDirection: "column" }, modifiers.map(function (modifier, index) {
-        var targetValue = value === null || value === void 0 ? void 0 : value.find(function (v) { return v.id == modifier.id; });
-        return (React__default.createElement(FormControlLabel$1, { key: index, value: modifier.id, control: React__default.createElement(Checkbox$2, { className: classes.radio, disabled: (!targetValue && disableNewSelections) || isOutOfStock || modifier.outOfStock }), label: React__default.createElement(Label, { name: modifier.name, price: modifier.price
-                    ? "" + (appContext && appContext.currencySymbol) + Number(modifier.price).toFixed(2)
-                    : null, disabled: isOutOfStock || modifier.outOfStock, isOutOfStock: isOutOfStock }), className: classes.root, checked: !!targetValue, onChange: handleChange }));
-    })));
-};
-var RadioGroup = function (props) {
-    var value = props.value, modifiers = props.modifiers, onChange = props.onChange, isOutOfStock = props.isOutOfStock;
-    var classes = useRadioModifierFormStyles();
-    var appContext = useOrderingAppContext()[0];
-    var handleChange = function (event) {
-        var _a;
-        var price = (_a = modifiers.find(function (modifier) { return modifier.id === parseInt(event.target.value); })) === null || _a === void 0 ? void 0 : _a.price;
-        onChange([
-            {
-                id: parseInt(event.target.value),
-                price: (price && parseInt(price)) || 0,
+                id: Number(e.target.value),
+                price: modifier.price,
                 quantity: 1,
             },
         ]);
-    };
-    return (React__default.createElement(MuiRadioGroup, { name: "selectedModifiers", value: value ? value[0].id : '', onChange: handleChange }, modifiers.map(function (modifier, index) { return (React__default.createElement(FormControlLabel$1, { key: index, value: modifier.id, control: React__default.createElement(Radio$2, { className: classes.radio, disabled: isOutOfStock || modifier.outOfStock }), label: React__default.createElement(Label, { name: modifier.name, price: modifier.price ? "" + (appContext && appContext.currencySymbol) + Number(modifier.price).toFixed(2) : null, disabled: isOutOfStock || modifier.outOfStock, isOutOfStock: isOutOfStock }) })); })));
-};
-
-var ModifierOptionsControl = function (props) {
-    var type = props.type, modifiers = props.modifiers, value = props.value, onChange = props.onChange, disableNewSelections = props.disableNewSelections, isOutOfStock = props.isOutOfStock;
-    switch (type) {
+    }; };
+    return (React__default.createElement(FormControl, { fullWidth: true },
+        React__default.createElement(RadioGroup, null, modifiers.map(function (modifier) {
+            var _a;
+            return (React__default.createElement(FormControlLabel$1, { key: modifier.id, value: modifier.id, control: React__default.createElement(Radio$2, { checked: ((_a = value[0]) === null || _a === void 0 ? void 0 : _a.id) === modifier.id, className: radioClasses.radio, disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier) }), label: React__default.createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }) }));
+        }))));
+};
+var MultipleSelectControl = function (props) {
+    var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, messages = props.messages, disableNewSelections = props.disableNewSelections;
+    var classes = useCheckboxModifierFormStyles();
+    var makeHandleChange = function (modifier) { return function () {
+        var isModifierInValue = Boolean(value.find(function (v) { return v.id === modifier.id; }));
+        if (isModifierInValue) {
+            onChange(value.filter(function (v) { return v.id !== modifier.id; }));
+        }
+        else {
+            onChange(__spreadArray(__spreadArray([], value), [{ id: modifier.id, price: modifier.price || 0, quantity: 1 }]));
+        }
+    }; };
+    return (React__default.createElement(FormControl, { fullWidth: true },
+        React__default.createElement(FormGroup, null, modifiers.map(function (modifier) { return (React__default.createElement(FormControlLabel$1, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some(function (v) { return v.id === modifier.id; }), onChange: makeHandleChange(modifier), control: React__default.createElement(Checkbox$2, { className: classes.radio, disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React__default.createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }) })); }))));
+};
+var MultipleQuantitySelectControl = function (props) {
+    var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, messages = props.messages, disableNewSelections = props.disableNewSelections;
+    var makeHandleChange = function (modifier) { return function (_e, customEvent) {
+        var isModifierInValue = Boolean(value.find(function (v) { return v.id === modifier.id; }));
+        var isQuantityZero = customEvent.quantity === 0;
+        var shouldRemoveModifierFromValue = isModifierInValue && isQuantityZero;
+        var shouldAddModifierToValue = !isModifierInValue && !isQuantityZero;
+        var shouldUpdateModifierInValue = isModifierInValue && !isQuantityZero;
+        if (shouldRemoveModifierFromValue) {
+            onChange(value.filter(function (v) { return v.id !== modifier.id; }));
+        }
+        if (shouldAddModifierToValue) {
+            onChange(__spreadArray(__spreadArray([], value), [{ id: modifier.id, price: modifier.price, quantity: customEvent.quantity }]));
+        }
+        if (shouldUpdateModifierInValue) {
+            onChange(value.map(function (val) { return (val.id === modifier.id ? __assign$1(__assign$1({}, val), { quantity: customEvent.quantity }) : val); }));
+        }
+    }; };
+    return (React__default.createElement(FormControl, { fullWidth: true },
+        React__default.createElement(FormGroup, null, modifiers.map(function (modifier) { return (React__default.createElement(Box, { key: modifier.id, style: { justifyContent: 'space-between' }, display: "flex" },
+            React__default.createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }),
+            React__default.createElement(QuantityPicker, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier) }))); }))));
+};
+var ModifierControls = function (props) {
+    switch (props.type) {
         case 'singleSelect':
-            return React__default.createElement(RadioGroup, { modifiers: modifiers, value: value, onChange: onChange, isOutOfStock: isOutOfStock });
+            return React__default.createElement(SingleSelectModifierControl, __assign$1({}, props));
         case 'multipleSelect':
-            return (React__default.createElement(CheckboxGroup, { modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections, isOutOfStock: isOutOfStock }));
+            return React__default.createElement(MultipleSelectControl, __assign$1({}, props));
+        case 'multipleQuantitySelect':
+            return React__default.createElement(MultipleQuantitySelectControl, __assign$1({}, props));
         default:
             return null;
     }
 };
 
-var DishModifierCard = function (props) {
-    var name = props.name, disableNewSelections = props.disableNewSelections, modifiers = props.modifiers, value = props.value, messages = props.messages, onChange = props.onChange, type = props.type, error = props.error, isRequired = props.isRequired, isOutOfStock = props.isOutOfStock;
-    var optionalText = messages.optionalText, outOfStockText = messages.outOfStockText, requiredText = messages.requiredText, helperText = messages.helperText;
-    var isFullyOutOfStock = isOutOfStock || !modifiers.some(function (modifier) { return !modifier.outOfStock; });
-    var classes = useDishModifierCardStyles();
+var getStatusTagProps = function (props) {
+    var messages = props.messages, error = props.error, isRequired = props.isRequired, isOutOfStock = props.isOutOfStock;
+    var optionalText = messages.optionalText, outOfStockText = messages.outOfStockText, requiredText = messages.requiredText;
     var color = 'default';
     switch (true) {
         case error:
             color = 'error';
-        case isFullyOutOfStock:
+        case isOutOfStock:
             color = 'warning';
     }
     var label = optionalText;
     switch (true) {
-        case isFullyOutOfStock:
+        case isOutOfStock:
             label = outOfStockText;
             break;
         case isRequired:
             label = requiredText;
             break;
     }
+    var variant = isRequired || isOutOfStock ? 'outlined' : 'filled';
+    return { color: color, label: label, variant: variant };
+};
+var DishModifierCard = function (props) {
+    var name = props.name, disableNewSelections = props.disableNewSelections, modifiers = props.modifiers, value = props.value, messages = props.messages, onChange = props.onChange, type = props.type, error = props.error, isOutOfStock = props.isOutOfStock;
+    var classes = useDishModifierCardStyles();
     return (React__default.createElement(Box, { className: classes.root },
         React__default.createElement(Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content", marginBottom: 2 },
-            React__default.createElement(StatusTag, { variant: isRequired || isFullyOutOfStock ? 'outlined' : 'filled', label: label, color: color }),
-            !isFullyOutOfStock && (React__default.createElement(Typography, { variant: "subtitle1", className: error ? classes.error : undefined }, helperText))),
+            React__default.createElement(StatusTag, __assign$1({}, getStatusTagProps(props))),
+            !isOutOfStock && (React__default.createElement(Typography, { variant: "subtitle1", className: error ? classes.error : undefined }, messages.helperText))),
         React__default.createElement(Typography, { className: classes.name }, name),
         React__default.createElement(Box, null,
-            React__default.createElement(FormControl, null,
-                React__default.createElement(ModifierOptionsControl, { type: type, modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections, isOutOfStock: isFullyOutOfStock })))));
+            React__default.createElement(ModifierControls, { value: value, modifiers: modifiers, isOutOfStock: isOutOfStock, onChange: onChange, disableNewSelections: disableNewSelections, type: type, messages: messages }))));
 };
 DishModifierCard.displayName = 'DishModifierCard';
 
@@ -1792,6 +1907,11 @@ var useMenuDropdownStyles = makeStyles(function (theme) {
                 alignSelf: 'start',
             },
             _a),
+        menuItem: {
+            alignItems: 'center',
+            display: 'flex',
+            gridGap: theme.spacing(1),
+        },
         select: {
             '& .MuiSelect-root': {
                 color: '#212121',
@@ -1799,6 +1919,9 @@ var useMenuDropdownStyles = makeStyles(function (theme) {
                 zIndex: 10,
             },
         },
+        unavailable: {
+            color: theme.palette.grey[700],
+        },
     });
 });
 
@@ -1820,7 +1943,9 @@ var MenuDropdown = function (props) {
                     horizontal: 'left',
                 },
                 getContentAnchorEl: null,
-            }, className: classes.select }, menuOptions.map(function (option, index) { return (React__default.createElement(MenuItem$1, { key: index, value: option.id }, option.name)); }))));
+            }, className: classes.select, renderValue: function (selected) { var _a; return (_a = menuOptions.find(function (menuOption) { return menuOption.id === selected; })) === null || _a === void 0 ? void 0 : _a.name; } }, menuOptions.map(function (option, index) { return (React__default.createElement(MenuItem$1, { key: index, value: option.id, className: classNames(classes.menuItem, option.isUnavailable ? classes.unavailable : '') },
+            option.name,
+            option.isUnavailable && React__default.createElement(Icon, { icon: SvgClock, size: "large" }))); }))));
 };
 
 var useMenuFilterStyles = makeStyles(function (theme) { return ({
@@ -1869,7 +1994,7 @@ var MenuFilter = function (props) {
         setAnchorEl(null);
     };
     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(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); } },
@@ -1882,61 +2007,6 @@ var MenuFilter = function (props) {
                     React__default.createElement(Typography, { variant: "body1", color: "grey.500" }, noOptionsLabel)))))));
 };
 
-var useQuantityPickerStyles = makeStyles(function (theme) { return ({
-    root: {
-        height: theme.spacing(7),
-    },
-}); });
-var useQuantityInputStyles = makeStyles(function (theme) { return ({
-    root: {
-        height: '100%',
-        width: 'min-content',
-        borderRadius: theme.spacing(12.5),
-        background: theme.palette.grey[100],
-    },
-    input: {
-        '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-            display: 'none',
-        },
-        '-moz-appearance': 'textfield',
-        fontWeight: 600,
-        minWidth: theme.spacing(2.75),
-        padding: 0,
-        textAlign: 'center',
-        position: 'relative',
-        left: 1,
-    },
-    adornedStart: {
-        padding: theme.spacing(0.25),
-    },
-    adornedEnd: {
-        padding: theme.spacing(0.5),
-    },
-}); });
-
-var QuantityPicker = function (props) {
-    var value = props.value, onChange = props.onChange, disabled = props.disabled;
-    var fieldClasses = useQuantityPickerStyles();
-    var inputClasses = useQuantityInputStyles();
-    var onIncrement = function () {
-        onChange({ target: { value: value + 1 } }, 'increment');
-    };
-    var onDecrement = function () {
-        onChange({ target: { value: value - 1 } }, 'decrement');
-    };
-    var handleChange = function (event) {
-        onChange({ target: { value: parseInt(event.target.value) } }, 'change');
-    };
-    return (React__default.createElement(TextField, { classes: __assign$1({}, fieldClasses), variant: "filled", type: "number", defaultValue: value, value: value, disabled: disabled, onChange: handleChange, InputProps: {
-            classes: __assign$1({}, inputClasses),
-            disableUnderline: true,
-            endAdornment: (React__default.createElement(IconButton, { color: "default", tabIndex: -1, onClick: onIncrement, disabled: disabled },
-                React__default.createElement(Icon, { icon: SvgPlusCircle }))),
-            startAdornment: (React__default.createElement(IconButton, { color: "default", tabIndex: -1, onClick: onDecrement, disabled: disabled },
-                React__default.createElement(Icon, { icon: SvgMinusCircle }))),
-        } }));
-};
-
 var useSelectableChipStyles = makeStyles(function (theme) { return ({
     root: {
         border: '2px solid',
@@ -2294,5 +2364,5 @@ var orderingTheme = {
     props: props,
 };
 
-export { Button$1 as Button, Checkbox, DialogSection, DialogTitle, DishCheckoutCard, DishDetailsReview, DishModifierCard, ItemTag, ItemTagGroup, LocationCard, MenuDropdown, MenuFilter, MenuItem, MenuItemGroup, MenuSection, MenuSectionGroup, OrderingAppContext, OrderingAppContextProvider, PageSection, QuantityPicker, Radio, ReactionCounter, ReactionCounterGroup, SelectableChip, SelectableChipGroup, SelectedMenuFiltersList, StatusTag, Switch, orderingTheme, useOrderingAppContext };
+export { Button, Checkbox, DialogSection, DialogTitle, DishCheckoutCard, DishDetailsReview, DishModifierCard, ItemTag, ItemTagGroup, LocationCard, MenuDropdown, MenuFilter, MenuItem, MenuItemGroup, MenuSection, MenuSectionGroup, OrderingAppContext, OrderingAppContextProvider, PageSection, QuantityPicker, Radio, ReactionCounter, ReactionCounterGroup, SelectableChip, SelectableChipGroup, SelectedMenuFiltersList, StatusTag, Switch, orderingTheme, useOrderingAppContext };
 //# sourceMappingURL=index.es.js.map