npm - @popmenu/ordering-ui - Versions diffs - 0.152.0 → 0.154.0 - Mend

@popmenu/ordering-ui 0.152.0 → 0.154.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/build/esm/components/NestedModsV2DishModifierCard/DishModifierCard.styles.js ADDED Viewed

@@ -0,0 +1,165 @@
+import { makeStyles } from '@material-ui/core';
+const useDishModifierCardStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: theme.spacing(2.5),
+        color: `${theme.palette.grey[900]} !important`,
+    },
+    card: {
+        borderRadius: '8px',
+        border: '1px solid var(--surfaces-card-stroke, #E0E0E0)',
+    },
+    error: {
+        color: theme.palette.error.main,
+    },
+    helperText: {
+        color: theme.palette.grey[700],
+    },
+    optionalStatusTag: {
+        '& > div': {
+            backgroundColor: theme.palette.grey[300],
+        },
+    },
+    name: {
+        fontSize: '1.125rem',
+        fontWeight: theme.typography.fontWeightBold,
+        marginBottom: theme.spacing(2),
+    },
+}));
+const useRadioModifierFormStyles = makeStyles((theme) => ({
+    radioGroup: {
+        gap: theme.spacing(2),
+    },
+    label: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+    radio: {
+        fontSize: '1rem',
+        padding: 'unset',
+        marginRight: theme.spacing(-0.25),
+        '&.Mui-checked': {
+            color: theme.palette.info.main,
+        },
+    },
+    hideRadio: {
+        display: 'none',
+    },
+    root: {
+        justifyContent: 'space-between',
+        margin: 0,
+        width: '100%',
+        '& > :last-child': {
+            flex: 1,
+        },
+    },
+}));
+const useCheckboxModifierFormStyles = makeStyles((theme) => ({
+    formGroup: {
+        gap: theme.spacing(2),
+    },
+    label: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+    checkbox: {
+        color: theme.palette.grey[700],
+        fontSize: '1rem',
+        marginRight: theme.spacing(-0.25),
+        padding: 'unset',
+        '&.Mui-checked': {
+            color: theme.palette.info.main,
+        },
+    },
+    hideCheckbox: {
+        display: 'none',
+    },
+    root: {
+        margin: 0,
+        width: '100%',
+        '& > :last-child': {
+            flex: 1,
+        },
+    },
+}));
+const useLabelStyles = makeStyles((theme) => ({
+    label: {
+        margin: theme.spacing(0.5, 0),
+    },
+    selectedLabel: {
+        margin: theme.spacing(0.5, 0),
+    },
+    disabled: {
+        color: theme.palette.grey[500],
+    },
+    price: {
+        color: theme.palette.grey[700],
+    },
+    selectedSummary: {
+        color: theme.palette.grey[700],
+    },
+    selectedSummaryInlineRow: {
+        alignItems: 'center',
+        color: theme.palette.grey[700],
+        columnGap: theme.spacing(1),
+        display: 'flex',
+        justifyContent: 'space-between',
+        marginTop: theme.spacing(0.5),
+        minHeight: theme.spacing(2.5),
+        width: '100%',
+    },
+    selectedSummaryPrimary: {
+        alignItems: 'center',
+        columnGap: theme.spacing(1),
+        display: 'flex',
+        flex: 1,
+        minWidth: 0,
+    },
+    // TODO [sc-162475]: 0.625rem (10px) is below the recommended minimum font size for accessibility — address in followup
+    selectedSummaryPrimaryText: {
+        color: theme.palette.grey[700],
+        fontSize: '0.625rem',
+        fontWeight: theme.typography.fontWeightRegular,
+        lineHeight: 1.2,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
+    selectedSummaryIcon: {
+        color: theme.palette.success.main,
+    },
+}));
+const useOptionsStyles = makeStyles((theme) => ({
+    options: {
+        color: theme.palette.info.main,
+        marginBottom: theme.spacing(1.5),
+        minWidth: 'unset',
+        padding: 0,
+    },
+    inlineOptions: {
+        alignItems: 'center',
+        display: 'inline-flex',
+        justifyContent: 'center',
+        height: 'auto',
+        marginBottom: 0,
+        minHeight: 'unset',
+        paddingBottom: 0,
+        paddingLeft: '10px',
+        paddingRight: 0,
+        paddingTop: 0,
+        '& .MuiTypography-root': {
+            // TODO [sc-162475]: 0.625rem (10px) is below the recommended minimum font size for accessibility — address in followup
+            fontSize: '0.625rem',
+            lineHeight: 1.2,
+        },
+    },
+}));
+export { useCheckboxModifierFormStyles, useDishModifierCardStyles, useLabelStyles, useOptionsStyles, useRadioModifierFormStyles };
+//# sourceMappingURL=DishModifierCard.styles.js.map

package/build/esm/components/NestedModsV2DishModifierCard/DishModifierCard.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DishModifierCard.styles.js","sources":["../../../../src/components/NestedModsV2DishModifierCard/DishModifierCard.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\n\nexport const useDishModifierCardStyles = makeStyles<Theme>((theme) => ({\n root: {\n display: 'flex',\n flexDirection: 'column',\n padding: theme.spacing(2.5),\n color: `${theme.palette.grey[900]} !important`,\n },\n card: {\n borderRadius: '8px',\n border: '1px solid var(--surfaces-card-stroke, #E0E0E0)',\n },\n error: {\n color: theme.palette.error.main,\n },\n helperText: {\n color: theme.palette.grey[700],\n },\n optionalStatusTag: {\n '& > div': {\n backgroundColor: theme.palette.grey[300],\n },\n },\n name: {\n fontSize: '1.125rem',\n fontWeight: theme.typography.fontWeightBold,\n marginBottom: theme.spacing(2),\n },\n}))\n\nexport const useRadioModifierFormStyles = makeStyles<Theme>((theme) => ({\n radioGroup: {\n gap: theme.spacing(2),\n },\n label: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n },\n radio: {\n fontSize: '1rem',\n padding: 'unset',\n marginRight: theme.spacing(-0.25),\n\n '&.Mui-checked': {\n color: theme.palette.info.main,\n },\n },\n hideRadio: {\n display: 'none',\n },\n root: {\n justifyContent: 'space-between',\n margin: 0,\n width: '100%',\n\n '& > :last-child': {\n flex: 1,\n },\n },\n}))\n\nexport const useCheckboxModifierFormStyles = makeStyles<Theme>((theme) => ({\n formGroup: {\n gap: theme.spacing(2),\n },\n label: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n },\n checkbox: {\n color: theme.palette.grey[700],\n fontSize: '1rem',\n marginRight: theme.spacing(-0.25),\n padding: 'unset',\n\n '&.Mui-checked': {\n color: theme.palette.info.main,\n },\n },\n hideCheckbox: {\n display: 'none',\n },\n root: {\n margin: 0,\n width: '100%',\n\n '& > :last-child': {\n flex: 1,\n },\n },\n}))\n\nexport const useLabelStyles = makeStyles<Theme>((theme) => ({\n label: {\n margin: theme.spacing(0.5, 0),\n },\n selectedLabel: {\n margin: theme.spacing(0.5, 0),\n },\n disabled: {\n color: theme.palette.grey[500],\n },\n price: {\n color: theme.palette.grey[700],\n },\n selectedSummary: {\n color: theme.palette.grey[700],\n },\n selectedSummaryInlineRow: {\n alignItems: 'center',\n color: theme.palette.grey[700],\n columnGap: theme.spacing(1),\n display: 'flex',\n justifyContent: 'space-between',\n marginTop: theme.spacing(0.5),\n minHeight: theme.spacing(2.5),\n width: '100%',\n },\n selectedSummaryPrimary: {\n alignItems: 'center',\n columnGap: theme.spacing(1),\n display: 'flex',\n flex: 1,\n minWidth: 0,\n },\n // TODO [sc-162475]: 0.625rem (10px) is below the recommended minimum font size for accessibility — address in followup\n selectedSummaryPrimaryText: {\n color: theme.palette.grey[700],\n fontSize: '0.625rem',\n fontWeight: theme.typography.fontWeightRegular,\n lineHeight: 1.2,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n selectedSummaryIcon: {\n color: theme.palette.success.main,\n },\n}))\n\nexport const useOptionsStyles = makeStyles<Theme>((theme) => ({\n options: {\n color: theme.palette.info.main,\n marginBottom: theme.spacing(1.5),\n minWidth: 'unset',\n padding: 0,\n },\n inlineOptions: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n height: 'auto',\n marginBottom: 0,\n minHeight: 'unset',\n paddingBottom: 0,\n paddingLeft: '10px',\n paddingRight: 0,\n paddingTop: 0,\n '& .MuiTypography-root': {\n // TODO [sc-162475]: 0.625rem (10px) is below the recommended minimum font size for accessibility — address in followup\n fontSize: '0.625rem',\n lineHeight: 1.2,\n },\n },\n}))\n"],"names":[],"mappings":"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"}

package/build/esm/components/NestedModsV2DishModifierCard/DishModifierCardProps.d.ts ADDED Viewed

@@ -0,0 +1,79 @@
+export type ModifierValue = {
+    groupId: number;
+    modifierId: number;
+    parentModifierId?: number | null;
+    price: number;
+    quantity: number;
+    isRadio?: boolean;
+};
+export type Modifier = {
+    id: number;
+    hasModifiers: boolean;
+    name: string;
+    outOfStock: boolean;
+    price: number;
+    formattedPrice: string;
+    hidePrice?: boolean;
+    quantity: number;
+    parentModifierGroupId: number;
+    parentModifierGroupItemId?: number | null;
+};
+export type OnChangeValueType = ModifierValue;
+export type ModifierControlsOptions = {
+    /** Applies selected modifier visual treatment used by nested mods V2 */
+    enableSelectedModifierStyles?: boolean;
+    /** Changes the action label to UPDATE when a modifier is selected */
+    showUpdateButton?: boolean;
+    /** Optional selected modifier summary text shown below selected modifier names */
+    selectedNestedSummaryByModifierId?: Record<number, string>;
+    /**
+     * Suppresses the inline OPTIONS / UPDATE action on every modifier row,
+     * regardless of selection state, AND prevents the built-in auto-trigger
+     * of `handleOptionsClick` when a modifier with `hasModifiers: true` is
+     * selected.
+     */
+    hideNestedOptionsButton?: boolean;
+};
+export type NestedModsV2DishModifierCardProps = {
+    /** Aggregate price of the modifier and its nested children modifiers */
+    aggregatePrice: Record<number, string>;
+    /** Modifier options */
+    modifiers: Array<Modifier>;
+    /** The values of the modifier form */
+    value: Array<ModifierValue>;
+    /** Handles the change event */
+    onChange: (value: OnChangeValueType) => void;
+    /** Name of the modifier */
+    name: string;
+    /** Denotes the max amount of selections have been reached */
+    disableNewSelections?: boolean;
+    /** Denotes if modifier has an error */
+    error: boolean;
+    /** Denotes if modifier is required */
+    isRequired: boolean;
+    /** Denotes if modifier is out of stock */
+    isOutOfStock: boolean;
+    /** Selection type for modifier group */
+    type: 'singleSelect' | 'multipleSelect' | 'multipleQuantitySelect';
+    /** Renders the text of the dish modifiers */
+    messages: {
+        optionalText: string;
+        outOfStockText: string;
+        requiredText: string;
+        helperText: string;
+    };
+    /** Handles the dialog change for nested modifiers */
+    handleOptionsClick: (id: number) => void;
+    /** Used by parent modifier quantity tracking: parent modifier quantity denotes requiredSelectionCount and currentSelectionCount is the total quantity of the child modifier */
+    selectionQuantity: Record<number, {
+        requiredSelectionCount: number;
+        currentSelectionCount: number;
+    }>;
+    /** Optional feature-gated options for nested modifier controls */
+    modifierControlsOptions?: ModifierControlsOptions;
+    /** 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'>;

package/build/esm/components/NestedModsV2DishModifierCard/ModifierControls.d.ts ADDED Viewed

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

package/build/esm/components/NestedModsV2DishModifierCard/ModifierControls.js ADDED Viewed

@@ -0,0 +1,171 @@
+import { FormControl, FormGroup, Box, Typography, FormControlLabel, Checkbox, RadioGroup, Radio } from '@material-ui/core';
+import { Icon } from '@popmenu/common-ui';
+import { CheckCircle, ChevronRight } from '@popmenu/web-icons';
+import classNames from 'classnames';
+import React__default from 'react';
+import { Button } from '../Button/Button.js';
+import { QuantityPicker } from '../QuantityPicker/QuantityPicker.js';
+import { StatusTag } from '../StatusTag/StatusTag.js';
+import { useCheckboxModifierFormStyles, useRadioModifierFormStyles, useLabelStyles, useOptionsStyles } from './DishModifierCard.styles.js';
+const Label = (props) => {
+    const { name, price, disabled = false, hidePrice = false, isSelected = false, selectedSummary, enableSelectedModifierStyles = false, } = props;
+    const classes = useLabelStyles();
+    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__default.createElement(Box, { display: "flex", flexDirection: "column", className: classNames({ [classes.label]: !showSelectedSummary, [classes.selectedLabel]: showSelectedSummary }) },
+        React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 8 },
+            React__default.createElement(Typography, { className: classNames({
+                    [classes.disabled]: disabled,
+                }) }, name)),
+        !shouldHidePrice && (React__default.createElement(Typography, { className: classNames({ [classes.price]: !disabled }, { [classes.disabled]: disabled }) }, `+ ${price}`)),
+        showSelectedSummary && React__default.createElement(Typography, { className: classes.selectedSummary }, selectedSummary)));
+};
+const Options = (props) => {
+    const { handleOptionsClick, actionLabel, hidden = false, inline = false } = props;
+    const classes = useOptionsStyles();
+    const displayActionLabel = inline ? (actionLabel === 'UPDATE' ? 'Update' : 'Options') : actionLabel;
+    if (hidden)
+        return null;
+    return (React__default.createElement(Box, null,
+        React__default.createElement(Button, { variation: "none", className: classNames(classes.options, { [classes.inlineOptions]: inline }), onClick: handleOptionsClick },
+            React__default.createElement(Typography, { variant: "caption" }, displayActionLabel),
+            !inline && React__default.createElement(Icon, { icon: ChevronRight }))));
+};
+const getIsSelected = (modifierId, value) => value.some((modifierValue) => modifierValue.modifierId === modifierId && modifierValue.quantity > 0);
+const getActionLabel = (isSelected, props) => props.modifierControlsOptions?.showUpdateButton && isSelected ? 'UPDATE' : 'OPTIONS';
+const shouldHideNestedOptionsButton = (isSelected, props) => Boolean(props.modifierControlsOptions?.hideNestedOptionsButton ||
+    (props.modifierControlsOptions?.enableSelectedModifierStyles && !isSelected));
+const shouldShowInlineAction = (isSelected, props) => Boolean(isSelected &&
+    props.modifierControlsOptions?.enableSelectedModifierStyles &&
+    !props.modifierControlsOptions?.hideNestedOptionsButton);
+const getModifierActionState = (modifier, isSelected, props) => ({
+    isSelected,
+    shouldHideNestedOptions: shouldHideNestedOptionsButton(isSelected, props),
+    showInlineAction: shouldShowInlineAction(isSelected, props),
+    actionLabel: getActionLabel(isSelected, props),
+    selectedSummary: props.modifierControlsOptions?.selectedNestedSummaryByModifierId?.[modifier.id],
+});
+const NestedModifierActions = (props) => {
+    const { modifier, handleOptionsClick, state, renderRegularButton = true } = props;
+    const labelClasses = useLabelStyles();
+    if (!modifier.hasModifiers || modifier.outOfStock)
+        return null;
+    return (React__default.createElement(React__default.Fragment, null,
+        state.showInlineAction && state.selectedSummary && (React__default.createElement(Box, { className: labelClasses.selectedSummaryInlineRow },
+            React__default.createElement(Box, { className: labelClasses.selectedSummaryPrimary },
+                React__default.createElement(Icon, { icon: CheckCircle, size: "medium", className: labelClasses.selectedSummaryIcon }),
+                React__default.createElement(Typography, { variant: "caption", className: labelClasses.selectedSummaryPrimaryText }, state.selectedSummary)),
+            React__default.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id), actionLabel: state.actionLabel, inline: true, hidden: state.shouldHideNestedOptions }))),
+        renderRegularButton && (React__default.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id), actionLabel: state.actionLabel, hidden: state.shouldHideNestedOptions || (state.showInlineAction && Boolean(state.selectedSummary)) }))));
+};
+const SingleSelectModifierControl = (props) => {
+    const { modifiers, name, isOutOfStock, onChange, value, handleOptionsClick, aggregatePrice, isRequired } = props;
+    const radioClasses = useRadioModifierFormStyles();
+    const makeHandleChange = (modifier) => (e) => {
+        const isModifierInValue = Boolean(value.find((v) => v.modifierId === modifier.id));
+        if (!isModifierInValue && modifier.hasModifiers && !props.modifierControlsOptions?.hideNestedOptionsButton) {
+            handleOptionsClick(modifier.id);
+        }
+        onChange({
+            isRadio: true,
+            modifierId: Number(e.target.value),
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: 1,
+        });
+    };
+    return (React__default.createElement(FormControl, { fullWidth: true },
+        React__default.createElement(RadioGroup, { className: radioClasses.radioGroup, "aria-label": name }, modifiers.map((modifier) => {
+            const modifierActionState = getModifierActionState(modifier, getIsSelected(modifier.id, value), props);
+            return (React__default.createElement(Box, { key: modifier.id },
+                React__default.createElement(FormControlLabel, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React__default.createElement(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__default.createElement(Box, { className: radioClasses.label },
+                        React__default.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 }),
+                        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" }),
+                React__default.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState })));
+        }))));
+};
+const MultipleSelectControl = (props) => {
+    const { modifiers, value, isOutOfStock, onChange, disableNewSelections, handleOptionsClick, aggregatePrice } = props;
+    const classes = useCheckboxModifierFormStyles();
+    const makeHandleChange = (modifier) => () => {
+        const isModifierInValue = Boolean(value.find((v) => v.modifierId === modifier.id));
+        if (!isModifierInValue && modifier.hasModifiers && !props.modifierControlsOptions?.hideNestedOptionsButton) {
+            handleOptionsClick(modifier.id);
+        }
+        onChange({
+            isRadio: false,
+            modifierId: modifier.id,
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: isModifierInValue ? 0 : 1,
+        });
+    };
+    return (React__default.createElement(FormControl, { fullWidth: true },
+        React__default.createElement(FormGroup, { className: classes.formGroup }, modifiers.map((modifier) => {
+            const modifierActionState = getModifierActionState(modifier, getIsSelected(modifier.id, value), props);
+            return (React__default.createElement(Box, { key: modifier.id },
+                React__default.createElement(FormControlLabel, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some((v) => v.modifierId === modifier.id), onChange: makeHandleChange(modifier), control: React__default.createElement(Checkbox, { className: classNames({ [classes.hideCheckbox]: modifier.outOfStock }, { [classes.checkbox]: !modifier.outOfStock }), disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React__default.createElement(Box, { className: classes.label },
+                        React__default.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 }),
+                        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" }),
+                React__default.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState })));
+        }))));
+};
+const MultipleQuantitySelectControl = (props) => {
+    const { modifiers, isOutOfStock, onChange, disableNewSelections, handleOptionsClick, selectionQuantity, aggregatePrice, } = props;
+    const makeHandleChange = (modifier) => (_e, customEvent) => {
+        onChange({
+            isRadio: false,
+            modifierId: modifier.id,
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: customEvent.quantity,
+        });
+    };
+    return (React__default.createElement(FormControl, { fullWidth: true },
+        React__default.createElement(FormGroup, null, modifiers.map((modifier) => {
+            const modifierActionState = getModifierActionState(modifier, modifier.quantity > 0, props);
+            return (React__default.createElement(Box, { key: modifier.id, style: { justifyContent: 'space-between', flexDirection: 'column' }, display: "flex" },
+                React__default.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" },
+                    React__default.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 }),
+                    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, { 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__default.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState, renderRegularButton: false }),
+                React__default.createElement(Box, { display: "flex", alignItems: "flex-start", gridGap: 4 },
+                    modifier.hasModifiers && !modifier.outOfStock && (React__default.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id), actionLabel: modifierActionState.actionLabel, hidden: modifierActionState.shouldHideNestedOptions ||
+                            (modifierActionState.showInlineAction && Boolean(modifierActionState.selectedSummary)) })),
+                    selectionQuantity[modifier.id] &&
+                        selectionQuantity[modifier.id].requiredSelectionCount > 0 &&
+                        selectionQuantity[modifier.id].requiredSelectionCount !==
+                            selectionQuantity[modifier.id].currentSelectionCount && (React__default.createElement(Typography, { variant: "caption", color: "error" },
+                        selectionQuantity[modifier.id].currentSelectionCount,
+                        "/",
+                        selectionQuantity[modifier.id].requiredSelectionCount,
+                        " selected")))));
+        }))));
+};
+const ModifierControls = (props) => {
+    switch (props.type) {
+        case 'singleSelect':
+            return React__default.createElement(SingleSelectModifierControl, { ...props });
+        case 'multipleSelect':
+            return React__default.createElement(MultipleSelectControl, { ...props });
+        case 'multipleQuantitySelect':
+            return React__default.createElement(MultipleQuantitySelectControl, { ...props });
+        default:
+            return null;
+    }
+};
+export { ModifierControls };
+//# sourceMappingURL=ModifierControls.js.map

package/build/esm/components/NestedModsV2DishModifierCard/ModifierControls.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ModifierControls.js","sources":["../../../../src/components/NestedModsV2DishModifierCard/ModifierControls.tsx"],"sourcesContent":["import {\n Box,\n Checkbox,\n FormControl,\n FormControlLabel,\n FormGroup,\n Radio,\n RadioGroup,\n Typography,\n} from '@material-ui/core'\nimport { Icon } from '@popmenu/common-ui'\nimport { CheckCircle, ChevronRight } from '@popmenu/web-icons'\nimport classNames from 'classnames'\nimport React from 'react'\nimport { Button } from '../Button'\nimport type { QuantityChangeEvent } from '../QuantityPicker'\nimport { QuantityPicker } from '../QuantityPicker'\nimport { StatusTag } from '../StatusTag'\nimport {\n useCheckboxModifierFormStyles,\n useLabelStyles,\n useOptionsStyles,\n useRadioModifierFormStyles,\n} from './DishModifierCard.styles'\nimport { Modifier, ModifierOptionsControlProps } from './DishModifierCardProps'\n\nconst Label = (props: {\n name: string\n price: string\n disabled?: boolean\n hidePrice?: boolean\n isSelected?: boolean\n selectedSummary?: string\n enableSelectedModifierStyles?: boolean\n}) => {\n const {\n name,\n price,\n disabled = false,\n hidePrice = false,\n isSelected = false,\n selectedSummary,\n enableSelectedModifierStyles = false,\n } = props\n const classes = useLabelStyles()\n const numericPrice = price ? parseFloat(price.replace(/[^0-9.-]/g, '')) : NaN\n const shouldHidePrice = hidePrice || !price || numericPrice === 0 || isNaN(numericPrice)\n const showSelectedSummary = Boolean(enableSelectedModifierStyles && isSelected && selectedSummary)\n\n return (\n <Box\n display=\"flex\"\n flexDirection=\"column\"\n className={classNames({ [classes.label]: !showSelectedSummary, [classes.selectedLabel]: showSelectedSummary })}\n >\n <Box display=\"flex\" alignItems=\"center\" gridGap={8}>\n <Typography\n className={classNames({\n [classes.disabled]: disabled,\n })}\n >\n {name}\n </Typography>\n </Box>\n {!shouldHidePrice && (\n <Typography className={classNames({ [classes.price]: !disabled }, { [classes.disabled]: disabled })}>\n {`+ ${price}`}\n </Typography>\n )}\n {showSelectedSummary && <Typography className={classes.selectedSummary}>{selectedSummary}</Typography>}\n </Box>\n )\n}\n\nconst Options = (props: {\n handleOptionsClick: () => void\n actionLabel: 'OPTIONS' | 'UPDATE'\n hidden?: boolean\n inline?: boolean\n}) => {\n const { handleOptionsClick, actionLabel, hidden = false, inline = false } = props\n const classes = useOptionsStyles()\n const displayActionLabel = inline ? (actionLabel === 'UPDATE' ? 'Update' : 'Options') : actionLabel\n if (hidden) return null\n\n return (\n <Box>\n <Button\n variation=\"none\"\n className={classNames(classes.options, { [classes.inlineOptions]: inline })}\n onClick={handleOptionsClick}\n >\n <Typography variant=\"caption\">{displayActionLabel}</Typography>\n {!inline && <Icon icon={ChevronRight} />}\n </Button>\n </Box>\n )\n}\n\nconst getIsSelected = (modifierId: number, value: ModifierOptionsControlProps['value']) =>\n value.some((modifierValue) => modifierValue.modifierId === modifierId && modifierValue.quantity > 0)\n\nconst getActionLabel = (isSelected: boolean, props: ModifierOptionsControlProps) =>\n props.modifierControlsOptions?.showUpdateButton && isSelected ? 'UPDATE' : 'OPTIONS'\n\nconst shouldHideNestedOptionsButton = (isSelected: boolean, props: ModifierOptionsControlProps) =>\n Boolean(\n props.modifierControlsOptions?.hideNestedOptionsButton ||\n (props.modifierControlsOptions?.enableSelectedModifierStyles && !isSelected),\n )\n\nconst shouldShowInlineAction = (isSelected: boolean, props: ModifierOptionsControlProps) =>\n Boolean(\n isSelected &&\n props.modifierControlsOptions?.enableSelectedModifierStyles &&\n !props.modifierControlsOptions?.hideNestedOptionsButton,\n )\n\nconst getModifierActionState = (\n modifier: Modifier,\n isSelected: boolean,\n props: ModifierOptionsControlProps,\n): {\n isSelected: boolean\n shouldHideNestedOptions: boolean\n showInlineAction: boolean\n actionLabel: 'OPTIONS' | 'UPDATE'\n selectedSummary?: string\n} => ({\n isSelected,\n shouldHideNestedOptions: shouldHideNestedOptionsButton(isSelected, props),\n showInlineAction: shouldShowInlineAction(isSelected, props),\n actionLabel: getActionLabel(isSelected, props),\n selectedSummary: props.modifierControlsOptions?.selectedNestedSummaryByModifierId?.[modifier.id],\n})\n\nconst NestedModifierActions = (props: {\n modifier: Modifier\n handleOptionsClick: (id: number) => void\n state: ReturnType<typeof getModifierActionState>\n renderRegularButton?: boolean\n}) => {\n const { modifier, handleOptionsClick, state, renderRegularButton = true } = props\n const labelClasses = useLabelStyles()\n\n if (!modifier.hasModifiers || modifier.outOfStock) return null\n\n return (\n <>\n {state.showInlineAction && state.selectedSummary && (\n <Box className={labelClasses.selectedSummaryInlineRow}>\n <Box className={labelClasses.selectedSummaryPrimary}>\n <Icon icon={CheckCircle} size=\"medium\" className={labelClasses.selectedSummaryIcon} />\n <Typography variant=\"caption\" className={labelClasses.selectedSummaryPrimaryText}>\n {state.selectedSummary}\n </Typography>\n </Box>\n <Options\n handleOptionsClick={() => handleOptionsClick(modifier.id)}\n actionLabel={state.actionLabel}\n inline\n hidden={state.shouldHideNestedOptions}\n />\n </Box>\n )}\n {renderRegularButton && (\n <Options\n handleOptionsClick={() => handleOptionsClick(modifier.id)}\n actionLabel={state.actionLabel}\n hidden={state.shouldHideNestedOptions || (state.showInlineAction && Boolean(state.selectedSummary))}\n />\n )}\n </>\n )\n}\n\nconst SingleSelectModifierControl = (props: ModifierOptionsControlProps) => {\n const { modifiers, name, isOutOfStock, onChange, value, handleOptionsClick, aggregatePrice, isRequired } = props\n const radioClasses = useRadioModifierFormStyles()\n const makeHandleChange = (modifier: Modifier) => (e: React.ChangeEvent<HTMLInputElement>) => {\n const isModifierInValue = Boolean(value.find((v) => v.modifierId === modifier.id))\n if (!isModifierInValue && modifier.hasModifiers && !props.modifierControlsOptions?.hideNestedOptionsButton) {\n handleOptionsClick(modifier.id)\n }\n\n onChange({\n isRadio: true,\n modifierId: Number(e.target.value),\n groupId: modifier.parentModifierGroupId,\n parentModifierId: modifier.parentModifierGroupItemId,\n price: modifier.price || 0,\n quantity: 1,\n })\n }\n return (\n <FormControl fullWidth>\n <RadioGroup className={radioClasses.radioGroup} aria-label={name}>\n {modifiers.map((modifier) => {\n const modifierActionState = getModifierActionState(modifier, getIsSelected(modifier.id, value), props)\n return (\n <Box key={modifier.id}>\n <FormControlLabel\n key={modifier.id}\n value={modifier.id}\n className={radioClasses.root}\n control={\n <Radio\n checked={value[0]?.modifierId === modifier.id}\n className={classNames({\n [radioClasses.hideRadio]: modifier.outOfStock,\n [radioClasses.radio]: !modifier.outOfStock,\n })}\n disabled={isOutOfStock || modifier.outOfStock}\n onChange={makeHandleChange(modifier)}\n required={isRequired}\n />\n }\n label={\n <Box className={radioClasses.label}>\n <Label\n name={modifier.name}\n price={aggregatePrice[modifier.id] || modifier.formattedPrice}\n disabled={isOutOfStock || modifier.outOfStock}\n hidePrice={modifier.hidePrice}\n isSelected={modifierActionState.isSelected}\n enableSelectedModifierStyles={props.modifierControlsOptions?.enableSelectedModifierStyles}\n selectedSummary={\n modifierActionState.showInlineAction ? undefined : modifierActionState.selectedSummary\n }\n />\n {modifier.outOfStock && (\n <Box minWidth=\"90px\" marginLeft={2}>\n <StatusTag color=\"warning\" label=\"Out of stock\" variant=\"outlined\" size=\"md\" />\n </Box>\n )}\n </Box>\n }\n labelPlacement=\"start\"\n />\n <NestedModifierActions\n modifier={modifier}\n handleOptionsClick={handleOptionsClick}\n state={modifierActionState}\n />\n </Box>\n )\n })}\n </RadioGroup>\n </FormControl>\n )\n}\n\nconst MultipleSelectControl = (props: ModifierOptionsControlProps) => {\n const { modifiers, value, isOutOfStock, onChange, disableNewSelections, handleOptionsClick, aggregatePrice } = props\n const classes = useCheckboxModifierFormStyles()\n const makeHandleChange = (modifier: Modifier) => () => {\n const isModifierInValue = Boolean(value.find((v) => v.modifierId === modifier.id))\n if (!isModifierInValue && modifier.hasModifiers && !props.modifierControlsOptions?.hideNestedOptionsButton) {\n handleOptionsClick(modifier.id)\n }\n\n onChange({\n isRadio: false,\n modifierId: modifier.id,\n groupId: modifier.parentModifierGroupId,\n parentModifierId: modifier.parentModifierGroupItemId,\n price: modifier.price || 0,\n quantity: isModifierInValue ? 0 : 1,\n })\n }\n\n return (\n <FormControl fullWidth>\n <FormGroup className={classes.formGroup}>\n {modifiers.map((modifier) => {\n const modifierActionState = getModifierActionState(modifier, getIsSelected(modifier.id, value), props)\n return (\n <Box key={modifier.id}>\n <FormControlLabel\n key={modifier.id}\n value={modifier.id}\n className={classes.root}\n checked={value.some((v) => v.modifierId === modifier.id)}\n onChange={makeHandleChange(modifier)}\n control={\n <Checkbox\n className={classNames(\n { [classes.hideCheckbox]: modifier.outOfStock },\n { [classes.checkbox]: !modifier.outOfStock },\n )}\n disabled={isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections)}\n />\n }\n label={\n <Box className={classes.label}>\n <Label\n name={modifier.name}\n price={aggregatePrice[modifier.id] || modifier.formattedPrice}\n disabled={isOutOfStock || modifier.outOfStock}\n hidePrice={modifier.hidePrice}\n isSelected={modifierActionState.isSelected}\n enableSelectedModifierStyles={props.modifierControlsOptions?.enableSelectedModifierStyles}\n selectedSummary={\n modifierActionState.showInlineAction ? undefined : modifierActionState.selectedSummary\n }\n />\n {modifier.outOfStock && (\n <Box minWidth=\"90px\" marginLeft={2}>\n <StatusTag color=\"warning\" label=\"Out of stock\" variant=\"outlined\" size=\"md\" />\n </Box>\n )}\n </Box>\n }\n labelPlacement=\"start\"\n />\n <NestedModifierActions\n modifier={modifier}\n handleOptionsClick={handleOptionsClick}\n state={modifierActionState}\n />\n </Box>\n )\n })}\n </FormGroup>\n </FormControl>\n )\n}\nconst MultipleQuantitySelectControl = (props: ModifierOptionsControlProps) => {\n const {\n modifiers,\n isOutOfStock,\n onChange,\n disableNewSelections,\n handleOptionsClick,\n selectionQuantity,\n aggregatePrice,\n } = props\n const makeHandleChange = (modifier: Modifier) => (_e: unknown, customEvent: QuantityChangeEvent) => {\n onChange({\n isRadio: false,\n modifierId: modifier.id,\n groupId: modifier.parentModifierGroupId,\n parentModifierId: modifier.parentModifierGroupItemId,\n price: modifier.price || 0,\n quantity: customEvent.quantity,\n })\n }\n return (\n <FormControl fullWidth>\n <FormGroup>\n {modifiers.map((modifier) => {\n const modifierActionState = getModifierActionState(modifier, modifier.quantity > 0, props)\n return (\n <Box key={modifier.id} style={{ justifyContent: 'space-between', flexDirection: 'column' }} display=\"flex\">\n <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n <Label\n name={modifier.name}\n price={aggregatePrice[modifier.id] || modifier.formattedPrice}\n disabled={isOutOfStock || modifier.outOfStock}\n hidePrice={modifier.hidePrice}\n isSelected={modifierActionState.isSelected}\n enableSelectedModifierStyles={props.modifierControlsOptions?.enableSelectedModifierStyles}\n selectedSummary={\n modifierActionState.showInlineAction ? undefined : modifierActionState.selectedSummary\n }\n />\n {modifier.outOfStock && (\n <Box minWidth=\"90px\" marginLeft={2}>\n <StatusTag color=\"warning\" label=\"Out of stock\" variant=\"outlined\" size=\"md\" />\n </Box>\n )}\n {!modifier.outOfStock && (\n <QuantityPicker\n incrementButtonTitle={`Add ${modifier.name}`}\n decrementButtonTitle={`Remove ${modifier.name}`}\n id={`${modifier.id}-quantity-picker`}\n variation=\"modifierCount\"\n value={modifier.quantity}\n disableIncrement={disableNewSelections}\n preventManualChange={true}\n onChange={makeHandleChange(modifier)}\n disabled={isOutOfStock || modifier.outOfStock}\n name={modifier.name}\n />\n )}\n </Box>\n <NestedModifierActions\n modifier={modifier}\n handleOptionsClick={handleOptionsClick}\n state={modifierActionState}\n renderRegularButton={false}\n />\n <Box display=\"flex\" alignItems=\"flex-start\" gridGap={4}>\n {modifier.hasModifiers && !modifier.outOfStock && (\n <Options\n handleOptionsClick={() => handleOptionsClick(modifier.id)}\n actionLabel={modifierActionState.actionLabel}\n hidden={\n modifierActionState.shouldHideNestedOptions ||\n (modifierActionState.showInlineAction && Boolean(modifierActionState.selectedSummary))\n }\n />\n )}\n {selectionQuantity[modifier.id] &&\n selectionQuantity[modifier.id].requiredSelectionCount > 0 &&\n selectionQuantity[modifier.id].requiredSelectionCount !==\n selectionQuantity[modifier.id].currentSelectionCount && (\n <Typography variant=\"caption\" color=\"error\">\n {selectionQuantity[modifier.id].currentSelectionCount}/\n {selectionQuantity[modifier.id].requiredSelectionCount} selected\n </Typography>\n )}\n </Box>\n </Box>\n )\n })}\n </FormGroup>\n </FormControl>\n )\n}\n\nexport const ModifierControls = (props: ModifierOptionsControlProps) => {\n switch (props.type) {\n case 'singleSelect':\n return <SingleSelectModifierControl {...props} />\n case 'multipleSelect':\n return <MultipleSelectControl {...props} />\n case 'multipleQuantitySelect':\n return <MultipleQuantitySelectControl {...props} />\n default:\n return null\n }\n}\n"],"names":["React"],"mappings":"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"}

package/build/esm/components/NestedModsV2DishModifierCard/NestedModsV2DishModifierCard.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import React from 'react';
+import { NestedModsV2DishModifierCardProps } from './DishModifierCardProps';
+export declare const NestedModsV2DishModifierCard: {
+    (props: NestedModsV2DishModifierCardProps): React.JSX.Element;
+    displayName: string;
+};

package/build/esm/components/NestedModsV2DishModifierCard/NestedModsV2DishModifierCard.js ADDED Viewed

@@ -0,0 +1,47 @@
+import { Box, Typography } from '@popmenu/common-ui';
+import React__default from 'react';
+import classNames from 'classnames';
+import { StatusTag } from '../StatusTag/StatusTag.js';
+import { useDishModifierCardStyles } from './DishModifierCard.styles.js';
+import { ModifierControls } from './ModifierControls.js';
+const getStatusTagProps = (props) => {
+    const { messages, error, isRequired, isOutOfStock } = props;
+    const { optionalText, outOfStockText, requiredText } = messages;
+    let color = 'default';
+    switch (true) {
+        case error:
+            color = 'error';
+            break;
+        case isOutOfStock:
+            color = 'warning';
+            break;
+    }
+    let label = optionalText;
+    switch (true) {
+        case isOutOfStock:
+            label = outOfStockText;
+            break;
+        case isRequired:
+            label = requiredText;
+            break;
+    }
+    const variant = isRequired || isOutOfStock ? 'outlined' : 'filled';
+    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 classes = useDishModifierCardStyles();
+    return (React__default.createElement(Box, { className: classNames(classes.root, { [classes.card]: !disableCardStyle }) },
+        React__default.createElement(Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content", marginBottom: 2 },
+            React__default.createElement(Box, { className: classNames({ [classes.optionalStatusTag]: !isRequired && !isOutOfStock }) },
+                React__default.createElement(StatusTag, { ...getStatusTagProps(props) })),
+            !isOutOfStock && (React__default.createElement(Typography, { variant: "subtitle1", className: classNames({ [classes.error]: error, [classes.helperText]: !error }) }, messages.helperText))),
+        !hideName && (React__default.createElement(Typography, { component: "h3", className: classes.name }, name)),
+        React__default.createElement(Box, null,
+            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, modifierControlsOptions: modifierControlsOptions }))));
+};
+NestedModsV2DishModifierCard.displayName = 'NestedModsV2DishModifierCard';
+export { NestedModsV2DishModifierCard };
+//# sourceMappingURL=NestedModsV2DishModifierCard.js.map

package/build/esm/components/NestedModsV2DishModifierCard/NestedModsV2DishModifierCard.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NestedModsV2DishModifierCard.js","sources":["../../../../src/components/NestedModsV2DishModifierCard/NestedModsV2DishModifierCard.tsx"],"sourcesContent":["import { Box, Typography } from '@popmenu/common-ui'\nimport React from 'react'\n\nimport classNames from 'classnames'\nimport type { StatusTagProps } from '../StatusTag'\nimport { StatusTag } from '../StatusTag'\nimport { useDishModifierCardStyles } from './DishModifierCard.styles'\nimport { NestedModsV2DishModifierCardProps } from './DishModifierCardProps'\nimport { ModifierControls } from './ModifierControls'\n\nconst getStatusTagProps = (props: NestedModsV2DishModifierCardProps): StatusTagProps => {\n const { messages, error, isRequired, isOutOfStock } = props\n const { optionalText, outOfStockText, requiredText } = messages\n\n let color: StatusTagProps['color'] = 'default'\n switch (true) {\n case error:\n color = 'error'\n break\n case isOutOfStock:\n color = 'warning'\n break\n }\n\n let label: string = optionalText\n switch (true) {\n case isOutOfStock:\n label = outOfStockText\n break\n case isRequired:\n label = requiredText\n break\n }\n\n const variant = isRequired || isOutOfStock ? 'outlined' : 'filled'\n return { color, label, variant }\n}\n\nexport const NestedModsV2DishModifierCard = (props: NestedModsV2DishModifierCardProps) => {\n const {\n aggregatePrice,\n name,\n disableNewSelections,\n modifiers,\n value,\n messages,\n onChange,\n type,\n error,\n isOutOfStock,\n isRequired,\n handleOptionsClick,\n selectionQuantity,\n modifierControlsOptions,\n disableCardStyle = false,\n hideName = false,\n } = props\n const classes = useDishModifierCardStyles()\n\n return (\n <Box className={classNames(classes.root, { [classes.card]: !disableCardStyle })}>\n <Box\n display=\"flex\"\n justifyContent=\"space-between\"\n width=\"100%\"\n alignItems=\"center\"\n height=\"fit-content\"\n marginBottom={2}\n >\n <Box className={classNames({ [classes.optionalStatusTag]: !isRequired && !isOutOfStock })}>\n <StatusTag {...getStatusTagProps(props)} />\n </Box>\n {!isOutOfStock && (\n <Typography\n variant=\"subtitle1\"\n className={classNames({ [classes.error]: error, [classes.helperText]: !error })}\n >\n {messages.helperText}\n </Typography>\n )}\n </Box>\n {!hideName && (\n <Typography component=\"h3\" className={classes.name}>\n {name}\n </Typography>\n )}\n <Box>\n <ModifierControls\n name={name}\n value={value}\n modifiers={modifiers}\n isOutOfStock={isOutOfStock}\n isRequired={isRequired}\n onChange={onChange}\n disableNewSelections={disableNewSelections}\n type={type}\n messages={messages}\n handleOptionsClick={handleOptionsClick}\n aggregatePrice={aggregatePrice}\n selectionQuantity={selectionQuantity}\n modifierControlsOptions={modifierControlsOptions}\n />\n </Box>\n </Box>\n )\n}\n\nNestedModsV2DishModifierCard.displayName = 'NestedModsV2DishModifierCard'\n"],"names":["React"],"mappings":"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"}

package/build/esm/components/NestedModsV2DishModifierCard/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { NestedModsV2DishModifierCard } from './NestedModsV2DishModifierCard';
2	+ export type { NestedModsV2DishModifierCardProps } from './DishModifierCardProps';

package/build/esm/components/index.d.ts CHANGED Viewed

@@ -48,3 +48,7 @@ export { Checkbox } from './Checkbox';
 export { Radio } from './Radio';
 export { MenuBanner } from './MenuBanner';
 export type { MenuBannerProps } from './MenuBanner';
+export { ExpandableModifierGroup } from './ExpandableModifierGroup';
+export type { ExpandableModifierGroupProps } from './ExpandableModifierGroup';
+export { NestedModsV2DishModifierCard } from './NestedModsV2DishModifierCard';
+export type { NestedModsV2DishModifierCardProps } from './NestedModsV2DishModifierCard';

package/build/esm/index.js CHANGED Viewed

@@ -30,5 +30,7 @@ export { Switch } from './components/Switch/Switch.js';
 export { Checkbox } from './components/Checkbox/Checkbox.js';
 export { Radio } from './components/Radio/Radio.js';
 export { MenuBanner } from './components/MenuBanner/MenuBanner.js';
+export { ExpandableModifierGroup } from './components/ExpandableModifierGroup/ExpandableModifierGroup.js';
+export { NestedModsV2DishModifierCard } from './components/NestedModsV2DishModifierCard/NestedModsV2DishModifierCard.js';
 export { orderingTheme } from './theme/theme.js';
 //# sourceMappingURL=index.js.map

package/build/esm/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@popmenu/ordering-ui",
-  "version": "0.152.0",
+  "version": "0.154.0",
   "license": "MIT",
   "author": "Popmenu Design System Team",
   "description": "React components specifically for the popmenu Online Ordering web app.",
@@ -32,5 +32,5 @@
     "react": "18.x || 19.x"
   },
   "sideEffects": false,
-  "gitHead": "befcac06eaf85377080f4455bc1e7fe253b9f453"
+  "gitHead": "5a7633f43ac0b6a3af67866a1d2467143fb7a946"
 }