@popmenu/ordering-ui 0.156.1 → 0.158.0

package/build/cjs/components/NestedModsV2DishModifierCard/DishModifierCardProps.d.ts

@@ -73,9 +73,11 @@ export type NestedModsV2DishModifierCardProps = {
     }>;
     /** Optional feature-gated options for nested modifier controls */
     modifierControlsOptions?: ModifierControlsOptions;
+    /** Optional slot rendered directly after a modifier row, keyed by the parent modifier id */
+    renderAfterModifier?: (modifierId: number) => React.ReactNode;
     /** Removes the card border and border-radius, for use inside a container that provides its own card styling */
     disableCardStyle?: boolean;
     /** Hides the group name heading, useful when the name is already shown by a parent container */
     hideName?: boolean;
 };
-export type ModifierOptionsControlProps = Pick<NestedModsV2DishModifierCardProps, 'value' | 'modifiers' | 'isOutOfStock' | 'isRequired' | 'onChange' | 'disableNewSelections' | 'type' | 'messages' | 'handleOptionsClick' | 'aggregatePrice' | 'selectionQuantity' | 'name' | 'modifierControlsOptions'>;
+export type ModifierOptionsControlProps = Pick<NestedModsV2DishModifierCardProps, 'value' | 'modifiers' | 'isOutOfStock' | 'isRequired' | 'onChange' | 'disableNewSelections' | 'type' | 'messages' | 'handleOptionsClick' | 'aggregatePrice' | 'selectionQuantity' | 'name' | 'modifierControlsOptions' | 'renderAfterModifier'>;

package/build/cjs/index.js

@@ -1683,14 +1683,16 @@ const useExpandableModifierGroupStyles = core.makeStyles((theme) => ({
 const ExpandableModifierGroup = ({ name, children, defaultExpanded = true, selectedSummary, }) => {
     const [expanded, setExpanded] = React.useState(defaultExpanded);
     const classes = useExpandableModifierGroupStyles();
+    const generatedContentId = React.useId();
+    const contentId = `expandable-${generatedContentId}`;
     return (React.createElement("div", { className: classes.root },
-        React.createElement("button", { className: classNames(classes.header, { [classes.headerExpanded]: expanded }), onClick: () => setExpanded((prev) => !prev), type: "button", "aria-expanded": expanded },
+        React.createElement("button", { className: classNames(classes.header, { [classes.headerExpanded]: expanded }), onClick: () => setExpanded((prev) => !prev), type: "button", "aria-expanded": expanded, "aria-controls": contentId },
             React.createElement(core.Typography, { className: classes.name }, name),
             React.createElement(commonUi.Icon, { icon: webIcons.ChevronRight, className: classNames(classes.chevron, { [classes.chevronExpanded]: expanded }) })),
         !expanded && selectedSummary && (React.createElement("div", { className: classes.summary },
             React.createElement(commonUi.Icon, { icon: webIcons.CheckCircle, size: "medium", className: classes.summaryIcon }),
             React.createElement(core.Typography, { variant: "caption", className: classes.summaryText }, selectedSummary))),
-        React.createElement("div", { hidden: !expanded }, children)));
+        React.createElement("div", { id: contentId, hidden: !expanded }, children)));
 };
 ExpandableModifierGroup.displayName = 'ExpandableModifierGroup';
 
@@ -1700,6 +1702,7 @@ const useDishModifierCardStyles = core.makeStyles((theme) => ({
         flexDirection: 'column',
         padding: theme.spacing(2.5),
         color: `${theme.palette.grey[900]} !important`,
+        width: '100%',
     },
     card: {
         borderRadius: '8px',
@@ -1785,9 +1788,11 @@ const useCheckboxModifierFormStyles = core.makeStyles((theme) => ({
 const useLabelStyles = core.makeStyles((theme) => ({
     label: {
         margin: theme.spacing(0.5, 0),
+        minWidth: 0,
     },
     selectedLabel: {
         margin: theme.spacing(0.5, 0),
+        minWidth: 0,
     },
     disabled: {
         color: theme.palette.grey[500],
@@ -1797,6 +1802,10 @@ const useLabelStyles = core.makeStyles((theme) => ({
     },
     selectedSummary: {
         color: theme.palette.grey[700],
+        overflow: 'hidden',
+        overflowWrap: 'anywhere',
+        whiteSpace: 'normal',
+        wordBreak: 'break-word',
     },
     selectedSummaryInlineRow: {
         alignItems: 'center',
@@ -1821,11 +1830,16 @@ const useLabelStyles = core.makeStyles((theme) => ({
         fontWeight: theme.typography.fontWeightRegular,
         lineHeight: 1.2,
         overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
+        overflowWrap: 'anywhere',
+        whiteSpace: 'normal',
+        wordBreak: 'break-word',
+    },
+    disabledText: {
+        color: theme.palette.grey[500],
     },
     selectedSummaryIcon: {
         color: theme.palette.success.main,
+        flexShrink: 0,
     },
 }));
 const useOptionsStyles = core.makeStyles((theme) => ({
@@ -1838,6 +1852,7 @@ const useOptionsStyles = core.makeStyles((theme) => ({
     inlineOptions: {
         alignItems: 'center',
         display: 'inline-flex',
+        flexShrink: 0,
         justifyContent: 'center',
         height: 'auto',
         marginBottom: 0,
@@ -1859,13 +1874,13 @@ const Label = (props) => {
     const numericPrice = price ? parseFloat(price.replace(/[^0-9.-]/g, '')) : NaN;
     const shouldHidePrice = hidePrice || !price || numericPrice === 0 || isNaN(numericPrice);
     const showSelectedSummary = Boolean(enableSelectedModifierStyles && isSelected && selectedSummary);
-    return (React.createElement(core.Box, { display: "flex", flexDirection: "column", className: classNames({ [classes.label]: !showSelectedSummary, [classes.selectedLabel]: showSelectedSummary }) },
+    return (React.createElement(core.Box, { display: "flex", flexDirection: "column", style: { flex: 1, minWidth: 0 }, className: classNames({ [classes.label]: !showSelectedSummary, [classes.selectedLabel]: showSelectedSummary }) },
         React.createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 8 },
             React.createElement(core.Typography, { className: classNames({
                     [classes.disabled]: disabled,
                 }) }, name)),
         !shouldHidePrice && (React.createElement(core.Typography, { className: classNames({ [classes.price]: !disabled }, { [classes.disabled]: disabled }) }, `+ ${price}`)),
-        showSelectedSummary && React.createElement(core.Typography, { className: classes.selectedSummary }, selectedSummary)));
+        showSelectedSummary && (React.createElement(core.Typography, { className: classNames(classes.selectedSummary, { [classes.disabledText]: disabled }) }, selectedSummary))));
 };
 const Options = (props) => {
     const { handleOptionsClick, actionLabel, hidden = false, inline = false } = props;
@@ -1879,6 +1894,9 @@ const Options = (props) => {
             !inline && React.createElement(commonUi.Icon, { icon: webIcons.ChevronRight }))));
 };
 const getIsSelected = (modifierId, value) => value.some((modifierValue) => modifierValue.modifierId === modifierId && modifierValue.quantity > 0);
+const getIsModifierDisabled = (modifier, props, isSelected) => Boolean(props.isOutOfStock ||
+    modifier.outOfStock ||
+    (!isSelected && props.disableNewSelections && props.type !== 'singleSelect'));
 const getActionLabel = (isSelected, props) => props.modifierControlsOptions?.showUpdateButton && isSelected ? 'UPDATE' : 'OPTIONS';
 const shouldHideNestedOptionsButton = (isSelected, props) => Boolean(props.modifierControlsOptions?.hideNestedOptionsButton ||
     (props.modifierControlsOptions?.enableSelectedModifierStyles && !isSelected));
@@ -1893,7 +1911,7 @@ const getModifierActionState = (modifier, isSelected, props) => ({
     selectedSummary: props.modifierControlsOptions?.selectedNestedSummaryByModifierId?.[modifier.id],
 });
 const NestedModifierActions = (props) => {
-    const { modifier, handleOptionsClick, state, renderRegularButton = true } = props;
+    const { modifier, handleOptionsClick, state, disabled = false, renderRegularButton = true } = props;
     const labelClasses = useLabelStyles();
     if (!modifier.hasModifiers || modifier.outOfStock)
         return null;
@@ -1901,7 +1919,7 @@ const NestedModifierActions = (props) => {
         state.showInlineAction && state.selectedSummary && (React.createElement(core.Box, { className: labelClasses.selectedSummaryInlineRow },
             React.createElement(core.Box, { className: labelClasses.selectedSummaryPrimary },
                 React.createElement(commonUi.Icon, { icon: webIcons.CheckCircle, size: "medium", className: labelClasses.selectedSummaryIcon }),
-                React.createElement(core.Typography, { variant: "caption", className: labelClasses.selectedSummaryPrimaryText }, state.selectedSummary)),
+                React.createElement(core.Typography, { variant: "caption", className: classNames(labelClasses.selectedSummaryPrimaryText, { [labelClasses.disabledText]: disabled }) }, state.selectedSummary)),
             React.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id), actionLabel: state.actionLabel, inline: true, hidden: state.shouldHideNestedOptions }))),
         renderRegularButton && (React.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id), actionLabel: state.actionLabel, hidden: state.shouldHideNestedOptions || (state.showInlineAction && Boolean(state.selectedSummary)) }))));
 };
@@ -1924,16 +1942,19 @@ const SingleSelectModifierControl = (props) => {
     };
     return (React.createElement(core.FormControl, { fullWidth: true },
         React.createElement(core.RadioGroup, { className: radioClasses.radioGroup, "aria-label": name }, modifiers.map((modifier) => {
-            const modifierActionState = getModifierActionState(modifier, getIsSelected(modifier.id, value), props);
+            const isSelected = getIsSelected(modifier.id, value);
+            const isModifierDisabled = getIsModifierDisabled(modifier, props, isSelected);
+            const modifierActionState = getModifierActionState(modifier, isSelected, props);
             return (React.createElement(core.Box, { key: modifier.id },
                 React.createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React.createElement(core.Radio, { checked: value[0]?.modifierId === modifier.id, className: classNames({
                             [radioClasses.hideRadio]: modifier.outOfStock,
                             [radioClasses.radio]: !modifier.outOfStock,
                         }), disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier), required: isRequired }), label: React.createElement(core.Box, { className: radioClasses.label },
-                        React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, hidePrice: modifier.hidePrice, isSelected: modifierActionState.isSelected, enableSelectedModifierStyles: props.modifierControlsOptions?.enableSelectedModifierStyles, selectedSummary: modifierActionState.showInlineAction ? undefined : modifierActionState.selectedSummary }),
+                        React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isModifierDisabled, hidePrice: modifier.hidePrice, isSelected: modifierActionState.isSelected, enableSelectedModifierStyles: props.modifierControlsOptions?.enableSelectedModifierStyles, selectedSummary: modifierActionState.showInlineAction ? undefined : modifierActionState.selectedSummary }),
                         modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
                             React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
-                React.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState })));
+                React.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState, disabled: isModifierDisabled }),
+                props.renderAfterModifier?.(modifier.id)));
         }))));
 };
 const QuantityButtonControl = (props) => {
@@ -1957,18 +1978,20 @@ const QuantityButtonControl = (props) => {
         React.createElement(core.FormGroup, { className: radioClasses.radioGroup, "aria-label": name }, modifiers.map((modifier) => {
             const selectedModifier = value.find((v) => v.modifierId === modifier.id && v.quantity > 0);
             const isSelected = Boolean(selectedModifier);
+            const isModifierDisabled = getIsModifierDisabled(modifier, props, isSelected);
             const modifierActionState = getModifierActionState(modifier, isSelected, props);
             return (React.createElement(core.Box, { key: modifier.id },
                 React.createElement(core.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" },
-                    React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, hidePrice: modifier.hidePrice, isSelected: modifierActionState.isSelected, enableSelectedModifierStyles: props.modifierControlsOptions?.enableSelectedModifierStyles, selectedSummary: modifierActionState.showInlineAction ? undefined : modifierActionState.selectedSummary }),
+                    React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isModifierDisabled, hidePrice: modifier.hidePrice, isSelected: modifierActionState.isSelected, enableSelectedModifierStyles: props.modifierControlsOptions?.enableSelectedModifierStyles, selectedSummary: modifierActionState.showInlineAction ? undefined : modifierActionState.selectedSummary }),
                     modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
                         React.createElement(StatusTag, { color: "warning", label: props.messages.outOfStockText, variant: "outlined", size: "md" }))),
                     !modifier.outOfStock && (React.createElement(QuantityPicker, { incrementButtonTitle: `Add ${modifier.name}`, decrementButtonTitle: `Remove ${modifier.name}`, id: `${modifier.id}-quantity-picker`, variation: "modifierCount", value: selectedModifier?.quantity ?? 0, min: 0, max: isSingleSelect ? 1 : undefined, preventManualChange: true, disableIncrement: !isSingleSelect && disableNewSelections, onChange: makeHandleChange(modifier, isSelected), disabled: isOutOfStock || modifier.outOfStock, name: modifier.name }))),
-                React.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState, renderRegularButton: false })));
+                React.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState, disabled: isModifierDisabled, renderRegularButton: false }),
+                props.renderAfterModifier?.(modifier.id)));
         }))));
 };
 const MultipleSelectControl = (props) => {
-    const { modifiers, value, isOutOfStock, onChange, disableNewSelections, handleOptionsClick, aggregatePrice } = props;
+    const { modifiers, value, onChange, handleOptionsClick, aggregatePrice } = props;
     const classes = useCheckboxModifierFormStyles();
     const makeHandleChange = (modifier) => () => {
         const isModifierInValue = Boolean(value.find((v) => v.modifierId === modifier.id));
@@ -1986,13 +2009,16 @@ const MultipleSelectControl = (props) => {
     };
     return (React.createElement(core.FormControl, { fullWidth: true },
         React.createElement(core.FormGroup, { className: classes.formGroup }, modifiers.map((modifier) => {
-            const modifierActionState = getModifierActionState(modifier, getIsSelected(modifier.id, value), props);
+            const isSelected = getIsSelected(modifier.id, value);
+            const isModifierDisabled = getIsModifierDisabled(modifier, props, isSelected);
+            const modifierActionState = getModifierActionState(modifier, isSelected, props);
             return (React.createElement(core.Box, { key: modifier.id },
-                React.createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some((v) => v.modifierId === modifier.id), onChange: makeHandleChange(modifier), control: React.createElement(core.Checkbox, { className: classNames({ [classes.hideCheckbox]: modifier.outOfStock }, { [classes.checkbox]: !modifier.outOfStock }), disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React.createElement(core.Box, { className: classes.label },
-                        React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, hidePrice: modifier.hidePrice, isSelected: modifierActionState.isSelected, enableSelectedModifierStyles: props.modifierControlsOptions?.enableSelectedModifierStyles, selectedSummary: modifierActionState.showInlineAction ? undefined : modifierActionState.selectedSummary }),
+                React.createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some((v) => v.modifierId === modifier.id), onChange: makeHandleChange(modifier), control: React.createElement(core.Checkbox, { className: classNames({ [classes.hideCheckbox]: modifier.outOfStock }, { [classes.checkbox]: !modifier.outOfStock }), disabled: isModifierDisabled }), label: React.createElement(core.Box, { className: classes.label },
+                        React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isModifierDisabled, hidePrice: modifier.hidePrice, isSelected: modifierActionState.isSelected, enableSelectedModifierStyles: props.modifierControlsOptions?.enableSelectedModifierStyles, selectedSummary: modifierActionState.showInlineAction ? undefined : modifierActionState.selectedSummary }),
                         modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
                             React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
-                React.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState })));
+                React.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState, disabled: isModifierDisabled }),
+                props.renderAfterModifier?.(modifier.id)));
         }))));
 };
 const MultipleQuantitySelectControl = (props) => {
@@ -2010,13 +2036,14 @@ const MultipleQuantitySelectControl = (props) => {
     return (React.createElement(core.FormControl, { fullWidth: true },
         React.createElement(core.FormGroup, null, modifiers.map((modifier) => {
             const modifierActionState = getModifierActionState(modifier, modifier.quantity > 0, props);
+            const isModifierDisabled = getIsModifierDisabled(modifier, props, modifierActionState.isSelected);
             return (React.createElement(core.Box, { key: modifier.id, style: { justifyContent: 'space-between', flexDirection: 'column' }, display: "flex" },
                 React.createElement(core.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" },
-                    React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, hidePrice: modifier.hidePrice, isSelected: modifierActionState.isSelected, enableSelectedModifierStyles: props.modifierControlsOptions?.enableSelectedModifierStyles, selectedSummary: modifierActionState.showInlineAction ? undefined : modifierActionState.selectedSummary }),
+                    React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isModifierDisabled, hidePrice: modifier.hidePrice, isSelected: modifierActionState.isSelected, enableSelectedModifierStyles: props.modifierControlsOptions?.enableSelectedModifierStyles, selectedSummary: modifierActionState.showInlineAction ? undefined : modifierActionState.selectedSummary }),
                     modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
                         React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" }))),
                     !modifier.outOfStock && (React.createElement(QuantityPicker, { incrementButtonTitle: `Add ${modifier.name}`, decrementButtonTitle: `Remove ${modifier.name}`, id: `${modifier.id}-quantity-picker`, variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier), disabled: isOutOfStock || modifier.outOfStock, name: modifier.name }))),
-                React.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState, renderRegularButton: false }),
+                React.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState, disabled: isModifierDisabled, renderRegularButton: false }),
                 React.createElement(core.Box, { display: "flex", alignItems: "flex-start", gridGap: 4 },
                     modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id), actionLabel: modifierActionState.actionLabel, hidden: modifierActionState.shouldHideNestedOptions ||
                             (modifierActionState.showInlineAction && Boolean(modifierActionState.selectedSummary)) })),
@@ -2027,7 +2054,8 @@ const MultipleQuantitySelectControl = (props) => {
                         selectionQuantity[modifier.id].currentSelectionCount,
                         "/",
                         selectionQuantity[modifier.id].requiredSelectionCount,
-                        " selected")))));
+                        " selected"))),
+                props.renderAfterModifier?.(modifier.id)));
         }))));
 };
 const ModifierControls = (props) => {
@@ -2074,7 +2102,7 @@ const getStatusTagProps = (props) => {
     return { color, label, variant };
 };
 const NestedModsV2DishModifierCard = (props) => {
-    const { aggregatePrice, name, disableNewSelections, modifiers, value, messages, onChange, type, error, isOutOfStock, isRequired, handleOptionsClick, selectionQuantity, modifierControlsOptions, disableCardStyle = false, hideName = false, } = props;
+    const { aggregatePrice, name, disableNewSelections, modifiers, value, messages, onChange, type, error, isOutOfStock, isRequired, handleOptionsClick, selectionQuantity, modifierControlsOptions, renderAfterModifier, disableCardStyle = false, hideName = false, } = props;
     const classes = useDishModifierCardStyles();
     return (React.createElement(commonUi.Box, { className: classNames(classes.root, { [classes.card]: !disableCardStyle }) },
         React.createElement(commonUi.Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content", marginBottom: 2 },
@@ -2083,7 +2111,7 @@ const NestedModsV2DishModifierCard = (props) => {
             !isOutOfStock && (React.createElement(commonUi.Typography, { variant: "subtitle1", className: classNames({ [classes.error]: error, [classes.helperText]: !error }) }, messages.helperText))),
         !hideName && (React.createElement(commonUi.Typography, { component: "h3", className: classes.name }, name)),
         React.createElement(commonUi.Box, null,
-            React.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, modifierControlsOptions: modifierControlsOptions }))));
+            React.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, modifierControlsOptions: modifierControlsOptions, renderAfterModifier: renderAfterModifier }))));
 };
 NestedModsV2DishModifierCard.displayName = 'NestedModsV2DishModifierCard';