@popmenu/ordering-ui 0.125.1 → 0.125.3

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/index.es.js

@@ -1899,7 +1899,7 @@ var Options = function (props) {
             React__default.createElement(Icon, { icon: SvgChevronRight }))));
 };
 var SingleSelectModifierControl = function (props) {
-    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, handleOptionsClick = props.handleOptionsClick, aggregatePrice = props.aggregatePrice, isRequired = props.isRequired;
+    var modifiers = props.modifiers, name = props.name, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, handleOptionsClick = props.handleOptionsClick, aggregatePrice = props.aggregatePrice, isRequired = props.isRequired;
     var radioClasses = useRadioModifierFormStyles();
     var makeHandleChange = function (modifier) { return function (e) {
         var isModifierInValue = Boolean(value.find(function (v) { return v.modifierId === modifier.id; }));
@@ -1916,11 +1916,14 @@ var SingleSelectModifierControl = function (props) {
         });
     }; };
     return (React__default.createElement(FormControl, { fullWidth: true },
-        React__default.createElement(RadioGroup, null, modifiers.map(function (modifier) {
-            var _a, _b;
-            var _c;
+        React__default.createElement(RadioGroup, { "aria-label": name }, modifiers.map(function (modifier) {
+            var _a;
+            var _b;
             return (React__default.createElement(Box, { key: modifier.id },
-                React__default.createElement(FormControlLabel$1, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React__default.createElement(Radio$2, { 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), required: isRequired }), label: React__default.createElement(Box, { className: radioClasses.label },
+                React__default.createElement(FormControlLabel$1, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React__default.createElement(Radio$2, { checked: ((_b = value[0]) === null || _b === void 0 ? void 0 : _b.modifierId) === modifier.id, className: classNames((_a = {},
+                            _a[radioClasses.hideRadio] = modifier.outOfStock,
+                            _a[radioClasses.radio] = !modifier.outOfStock,
+                            _a)), disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier), required: isRequired }), label: React__default.createElement(Box, { className: radioClasses.label },
                         React__default.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || 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" })))), labelPlacement: "start" }),
@@ -2032,7 +2035,7 @@ var DishModifierCard = function (props) {
             !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';
 
@@ -2659,6 +2662,21 @@ var typography = {
         fontSize: '1.25rem',
         lineHeight: '1.875rem',
     },
+    h4: {
+        fontWeight: 500,
+        fontSize: '1.125rem',
+        lineHeight: '1.6875rem',
+    },
+    h5: {
+        fontWeight: 500,
+        fontSize: '1.125rem',
+        lineHeight: '1.6875rem',
+    },
+    h6: {
+        fontWeight: 500,
+        fontSize: '1.125rem',
+        lineHeight: '1.6875rem',
+    },
     body1: {
         fontWeight: 400,
         fontSize: '1rem',