@popmenu/ordering-ui 0.124.1 → 0.125.0

package/build/components/DialogTitle/DialogTitle.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 interface DialogTitleProps {
     title: string;
+    titleId: string;
     Icon?: ReactNode;
     onClose?: () => void;
 }

package/build/components/DishDetailsReview/DishDetailsReviewProps.d.ts

@@ -7,4 +7,6 @@ export interface DishDetailsReviewProps {
     content: string;
     /** time since the review was created */
     createdAgo: string;
+    /** image description, a11y requirement */
+    alt: string;
 }

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

@@ -67,5 +67,5 @@ export declare type RadioModifierFormProps = Base;
 export declare type CheckboxModifierFormProps = Base & {
     disableNewSelections?: boolean;
 };
-export declare type ModifierOptionsControlProps = Pick<DishModifierCardProps, 'value' | 'modifiers' | 'isOutOfStock' | 'isRequired' | 'onChange' | 'disableNewSelections' | 'type' | 'messages' | 'handleOptionsClick' | 'aggregatePrice' | 'selectionQuantity'>;
+export declare type ModifierOptionsControlProps = Pick<DishModifierCardProps, 'value' | 'modifiers' | 'isOutOfStock' | 'isRequired' | 'onChange' | 'disableNewSelections' | 'type' | 'messages' | 'handleOptionsClick' | 'aggregatePrice' | 'selectionQuantity' | 'name'>;
 export {};

package/build/components/LocationCard/LocationCardProps.d.ts

@@ -24,5 +24,5 @@ export interface LocationCardProps extends Omit<MuiCardProps, 'onClick'> {
     /** The value of a card in respects to selection state. */
     value: number;
     /** Props passed to the CardActionArea rendered by SelectableCard. */
-    CardActionAreaProps?: CardActionAreaProps;
+    CardActionAreaProps?: CardActionAreaProps & Record<`data-${string}`, string>;
 }

package/build/components/MenuItem/MenuItemProps.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 export declare type Maybe<T> = T | null;
 export interface MenuItemProps {
+    /** Label for the CardActionArea. */
+    ariaLabel: string;
     /** Renders the title of the dish */
     title?: Maybe<string>;
     /** Renders the price of the dish */

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

@@ -16,4 +16,6 @@ export interface QuantityPickerProps {
     preventManualChange?: boolean;
     /** indicates how the quantity picker will be used and changes styles accordingly */
     variation: 'itemCount' | 'modifierCount';
+    /** name of the modifier the quantity picker is assigned to */
+    name: string;
 }

package/build/index.es.js

@@ -176,12 +176,12 @@ var useStyles$6 = makeStyles$1(function () { return ({
 }); });
 var MenuItemImg = function (props) {
     var _a = props.image, image = _a === void 0 ? {} : _a;
-    var src = image.src, alt = image.alt;
+    var src = image.src;
     var classes = useStyles$6();
-    if (!src || !alt) {
+    if (!src) {
         return null;
     }
-    return (React__default.createElement(Box, { width: 125, height: "100%", borderRadius: 16, overflow: "hidden", flexShrink: 0 }, React__default.createElement("img", { src: src, alt: alt, className: classes.img })));
+    return (React__default.createElement(Box, { width: 125, height: "100%", borderRadius: 16, overflow: "hidden", flexShrink: 0 }, React__default.createElement("img", { src: src, alt: "", className: classes.img })));
 };
 
 var MenuItemInfo = function (props) {
@@ -1502,13 +1502,13 @@ StatusTag.defaultProps = {
 StatusTag.displayName = 'StatusTag';
 
 var MenuItem = forwardRef(function (props, ref) {
-    var onClick = props.onClick, id = props.id, description = props.description, isOutOfStock = props.isOutOfStock, title = props.title, loading = props.loading, isFeatured = props.isFeatured, image = props.image, likeCount = props.likeCount, reviewCount = props.reviewCount, price = props.price, available = props.available, itemTags = props.itemTags, className = props.className, restProps = __rest$1(props, ["onClick", "id", "description", "isOutOfStock", "title", "loading", "isFeatured", "image", "likeCount", "reviewCount", "price", "available", "itemTags", "className"]);
+    var ariaLabel = props.ariaLabel, onClick = props.onClick, id = props.id, description = props.description, isOutOfStock = props.isOutOfStock, title = props.title, loading = props.loading, isFeatured = props.isFeatured, image = props.image, likeCount = props.likeCount, reviewCount = props.reviewCount, price = props.price, available = props.available, itemTags = props.itemTags, className = props.className, restProps = __rest$1(props, ["ariaLabel", "onClick", "id", "description", "isOutOfStock", "title", "loading", "isFeatured", "image", "likeCount", "reviewCount", "price", "available", "itemTags", "className"]);
     var classes = useMenuItemStyles(props);
     var handleClick = function (event) {
         onClick(id, event);
     };
     return (React__default.createElement(Card, __assign$1({ className: classNames(classes.card, className), ref: ref, elevation: 0, "data-component-type": "menu-item" }, restProps),
-        React__default.createElement(CardActionArea, { className: classes.cardActionArea, onClick: handleClick, disabled: loading },
+        React__default.createElement(CardActionArea, { className: classes.cardActionArea, onClick: handleClick, disabled: loading, "aria-label": ariaLabel },
             React__default.createElement(MenuItemInfo, null,
                 isFeatured && React__default.createElement(StatusTag, { color: "highlight", label: "Featured", variant: "filled", size: "sm" }),
                 React__default.createElement(Box, { display: "flex", gridGap: 8, alignItems: "center" },
@@ -1622,7 +1622,7 @@ var OrderingAppContextProvider = function (props) {
 var DishCheckoutCard = function (props) {
     var _a;
     var id = props.id, name = props.name, quantity = props.quantity, modifierGroups = props.modifierGroups, onDelete = props.onDelete, onEdit = props.onEdit, onQuantityChange = props.onQuantityChange, price = props.price, specialInstructions = props.specialInstructions, disabled = props.disabled, warningMessage = props.warningMessage, _b = props.image, image = _b === void 0 ? {} : _b, messages = props.messages;
-    var src = image.src, alt = image.alt;
+    var src = image.src;
     var classes = useDishCheckoutCardStyles(props);
     var appContext = useOrderingAppContext()[0];
     var _c = useState(false), open = _c[0], setOpen = _c[1];
@@ -1668,7 +1668,7 @@ var DishCheckoutCard = function (props) {
     };
     return (React__default.createElement(Box, { className: classes.root },
         React__default.createElement(Box, { display: "flex", gridGap: 3 },
-            src && alt && React__default.createElement("img", { src: src, alt: alt, className: classes.img }),
+            src && React__default.createElement("img", { src: src, alt: "", className: classes.img }),
             React__default.createElement(Box, { flexGrow: 1 },
                 React__default.createElement(Typography, { variant: "h2", className: classes.name }, name),
                 modifierGroups && formatModifiers(modifierGroups),
@@ -1682,7 +1682,7 @@ var DishCheckoutCard = function (props) {
                     React__default.createElement(Icon, { icon: SvgTrash, size: "large" })))),
         React__default.createElement(Box, { display: "flex", gridGap: 16, alignItems: "center" },
             React__default.createElement(FormControl, { variant: "outlined", hiddenLabel: true },
-                React__default.createElement(Select, { disabled: disabled, open: open, value: quantity, labelId: "select-label-" + id, "aria-label": labelString(name) + " quantity select", onClick: function () { return setOpen(!open); }, disableUnderline: true, onChange: handleQuantityChange, fullWidth: true, startAdornment: React__default.createElement(InputAdornment, { position: "start" },
+                React__default.createElement(Select, { disabled: disabled, value: quantity, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, SelectDisplayProps: { 'aria-label': labelString(name) + " quantity select" }, disableUnderline: true, onChange: handleQuantityChange, fullWidth: true, startAdornment: React__default.createElement(InputAdornment, { position: "start" },
                         React__default.createElement(Icon, { icon: open ? SvgChevronUp : SvgChevronDown, size: "large" })), inputProps: { shrink: false }, MenuProps: {
                         disablePortal: true,
                         anchorOrigin: {
@@ -1704,13 +1704,13 @@ var DishCheckoutCard = function (props) {
 };
 
 var DishDetailsReview = forwardRef(function (props) {
-    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, createdAgo = props.createdAgo;
+    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, createdAgo = props.createdAgo, alt = props.alt;
     return (React__default.createElement(Box, { display: "flex" },
         React__default.createElement(Box, { mr: 1 },
-            React__default.createElement(Avatar, { size: "small", src: userAvatarUrl })),
+            React__default.createElement(Avatar, { size: "small", src: userAvatarUrl, alt: alt })),
         React__default.createElement(Box, { width: "100%" },
             React__default.createElement(Box, { display: "flex", justifyContent: "space-between", mb: 1 },
-                React__default.createElement(Typography, { color: "grey.600", style: { display: 'flex', alignItems: 'center' } }, userName),
+                React__default.createElement(Typography, { variant: "body1", variantMapping: { body1: 'h3' }, color: "grey.600", style: { display: 'flex', alignItems: 'center' } }, userName),
                 React__default.createElement(Typography, { color: "grey.600", variant: "subtitle1", style: { display: 'flex', alignItems: 'center' } }, createdAgo)),
             React__default.createElement(Typography, { color: "grey.900", weight: "regular" }, content))));
 });
@@ -1728,6 +1728,9 @@ var useDishModifierCardStyles = makeStyles(function (theme) { return ({
     error: {
         color: theme.palette.error.main,
     },
+    helperText: {
+        color: theme.palette.text.primary,
+    },
     name: {
         fontSize: theme.spacing(2.25),
         marginBottom: theme.spacing(2),
@@ -1847,7 +1850,7 @@ var useEndAdornmentStyles = makeStyles(function (theme) { return ({
 }); });
 
 var QuantityPicker = function (props) {
-    var value = props.value, onChange = props.onChange, disabled = props.disabled, disableIncrement = props.disableIncrement, preventManualChange = props.preventManualChange, variation = props.variation;
+    var value = props.value, onChange = props.onChange, disabled = props.disabled, disableIncrement = props.disableIncrement, preventManualChange = props.preventManualChange, variation = props.variation, name = props.name;
     var fieldClasses = useQuantityPickerStyles();
     var inputClasses = useQuantityInputStyles(props);
     var startAdornmentClasses = useStartAdornmentStyles(props);
@@ -1869,9 +1872,9 @@ var QuantityPicker = function (props) {
     return (React__default.createElement(TextField, { classes: fieldClasses, type: "number", variant: variation === 'itemCount' ? 'filled' : 'standard', value: value, disabled: disabled, onChange: handleChange, InputProps: {
             classes: inputClasses,
             disableUnderline: true,
-            endAdornment: (React__default.createElement(IconButton, { "aria-label": "plus one", className: endAdornmentClasses.root, color: "default", onClick: onIncrement, disabled: disabled || disableIncrement },
+            endAdornment: (React__default.createElement(IconButton, { "aria-label": "increase quantity " + name, className: endAdornmentClasses.root, color: "default", onClick: onIncrement, disabled: disabled || disableIncrement },
                 React__default.createElement(Icon, { icon: SvgPlusCircle }))),
-            startAdornment: (React__default.createElement(IconButton, { "aria-label": "minus one", className: startAdornmentClasses.root, color: "default", onClick: onDecrement, disabled: disabled || value <= 0 },
+            startAdornment: (React__default.createElement(IconButton, { "aria-label": "decrease quantity " + name, className: startAdornmentClasses.root, color: "default", onClick: onDecrement, disabled: disabled || value <= 0 },
                 React__default.createElement(Icon, { icon: SvgMinusCircle }))),
         } }));
 };
@@ -1953,7 +1956,7 @@ var MultipleSelectControl = function (props) {
         }))));
 };
 var MultipleQuantitySelectControl = function (props) {
-    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick, selectionQuantity = props.selectionQuantity;
+    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick, selectionQuantity = props.selectionQuantity, name = props.name;
     var makeHandleChange = function (modifier) { return function (_e, customEvent) {
         onChange({
             isRadio: false,
@@ -1970,7 +1973,7 @@ var MultipleQuantitySelectControl = function (props) {
                 React__default.createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
                 modifier.outOfStock && (React__default.createElement(Box, { minWidth: "90px", marginLeft: 2 },
                     React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" }))),
-                !modifier.outOfStock && (React__default.createElement(QuantityPicker, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier), disabled: isOutOfStock || modifier.outOfStock }))),
+                !modifier.outOfStock && (React__default.createElement(QuantityPicker, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier), disabled: isOutOfStock || modifier.outOfStock, name: name }))),
             React__default.createElement(Box, { display: "flex", alignItems: "flex-start", gridGap: 4 },
                 modifier.hasModifiers && !modifier.outOfStock && (React__default.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } })),
                 selectionQuantity[modifier.id] &&
@@ -2020,15 +2023,16 @@ var getStatusTagProps = function (props) {
     return { color: color, label: label, variant: variant };
 };
 var DishModifierCard = function (props) {
+    var _a;
     var aggregatePrice = props.aggregatePrice, 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, isRequired = props.isRequired, handleOptionsClick = props.handleOptionsClick, selectionQuantity = props.selectionQuantity;
     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, __assign$1({}, getStatusTagProps(props))),
-            !isOutOfStock && (React__default.createElement(Typography, { variant: "subtitle1", className: error ? classes.error : undefined }, messages.helperText))),
+            !isOutOfStock && (React__default.createElement(Typography, { variant: "subtitle1", className: classNames((_a = {}, _a[classes.error] = error, _a[classes.helperText] = !error, _a)) }, messages.helperText))),
         React__default.createElement(Typography, { className: classes.name }, name),
         React__default.createElement(Box, null,
-            React__default.createElement(ModifierControls, { value: value, modifiers: modifiers, isOutOfStock: isOutOfStock, isRequired: isRequired, onChange: onChange, disableNewSelections: disableNewSelections, type: type, messages: messages, handleOptionsClick: handleOptionsClick, aggregatePrice: aggregatePrice, selectionQuantity: selectionQuantity }))));
+            React__default.createElement(ModifierControls, { name: name, value: value, modifiers: modifiers, isOutOfStock: isOutOfStock, isRequired: isRequired, onChange: onChange, disableNewSelections: disableNewSelections, type: type, messages: messages, handleOptionsClick: handleOptionsClick, aggregatePrice: aggregatePrice, selectionQuantity: selectionQuantity }))));
 };
 DishModifierCard.displayName = 'DishModifierCard';
 
@@ -2100,7 +2104,7 @@ var LocationCard = function (props) {
         onClick(value);
     };
     return (React__default.createElement(Card, __assign$1({ className: classes.root }, muiProps),
-        React__default.createElement(CardActionArea, __assign$1({ onClick: handleClick, role: "checkbox", "aria-checked": selected, disabled: outOfRange || Boolean(anyAvailability), classes: { focusHighlight: classes.actionAreaFocusHighlight } }, CardActionAreaProps),
+        React__default.createElement(CardActionArea, __assign$1({ onClick: handleClick, role: "radio", "aria-checked": selected, disabled: outOfRange || Boolean(anyAvailability), classes: { focusHighlight: classes.actionAreaFocusHighlight } }, CardActionAreaProps),
             React__default.createElement(CardContent, { className: classes.content },
                 React__default.createElement(Box, { className: classes.locationInfo },
                     React__default.createElement(Box, { display: "flex", justifyContent: "space-between" },
@@ -2163,7 +2167,8 @@ 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", "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("label", { id: "menu-dropdown-label", className: "sr-only" }, props.label),
+        React__default.createElement(Select, { SelectDisplayProps: { 'aria-labelledby': 'menu-dropdown-label' }, value: selectedOptionId, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, 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,
@@ -2274,7 +2279,7 @@ var useSelectableChipStyles = makeStyles(function (theme) { return ({
 
 var SelectableChip = function (props) {
     var classes = useSelectableChipStyles(props);
-    return (React__default.createElement(Tab, __assign$1({ classes: {
+    return (React__default.createElement(Tab, __assign$1({ "data-tab-for-section-id": props.value, classes: {
             root: classes.root,
             selected: classes.selected,
         } }, props)));
@@ -2386,12 +2391,12 @@ var useStyles$1 = makeStyles$1(function () { return ({
     },
 }); });
 var DialogTitle = function (props) {
-    var Icon = props.Icon, title = props.title, onClose = props.onClose;
+    var Icon = props.Icon, title = props.title, titleId = props.titleId, onClose = props.onClose;
     var classes = useStyles$1();
     return (React__default.createElement(DialogTitle$1, null,
         React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 16 },
             Icon && Icon,
-            React__default.createElement(Typography$1, { component: "h1", variant: "h6" }, title)),
+            React__default.createElement(Typography$1, { component: "h1", style: { fontSize: '1.25rem', fontWeight: 500, lineHeight: 1.6 }, id: titleId }, title)),
         onClose && (React__default.createElement(IconButton$1, { color: "inherit", className: classes.closeButton, "aria-label": "Close dialog", onClick: onClose },
             React__default.createElement(SvgX, null)))));
 };
@@ -2606,11 +2611,22 @@ var overrides = {
         '@global': {
             '*:focus-visible, a:focus-visible': {
                 '&': {
-                    outline: '2px solid #0076CB',
-                    outlineOffset: '-4px',
+                    outline: '2px solid #0076CB !important',
+                    outlineOffset: -4,
                     borderRadius: 8,
                 },
             },
+            'sr-only': {
+                position: 'absolute',
+                width: 1,
+                height: 1,
+                padding: 0,
+                margin: -1,
+                overflow: 'hidden',
+                clip: 'rect(0, 0, 0, 0)',
+                whiteSpace: 'nowrap',
+                borderWidth: 0,
+            },
         },
     },
 };
@@ -2630,30 +2646,15 @@ var typography = {
     fontFamily: fonts.join(', '),
     h1: {
         fontWeight: 400,
-        fontSize: '6rem',
-        lineHeight: '9rem',
+        fontSize: '1.25rem',
+        lineHeight: '1.875rem',
     },
     h2: {
-        fontWeight: 400,
-        fontSize: '3.75rem',
-        lineHeight: '5.625rem',
-    },
-    h3: {
-        fontWeight: 400,
-        fontSize: '3rem',
-        lineHeight: '4.5rem',
-    },
-    h4: {
-        fontWeight: 400,
-        fontSize: '2.125rem',
-        lineHeight: '3.25rem',
-    },
-    h5: {
         fontWeight: 500,
-        fontSize: '1.5rem',
-        lineHeight: '2.25rem',
+        fontSize: '1.125rem',
+        lineHeight: '1.6875rem',
     },
-    h6: {
+    h3: {
         fontWeight: 500,
         fontSize: '1.25rem',
         lineHeight: '1.875rem',