@popmenu/ordering-ui 0.157.0 → 0.159.0

package/build/esm/components/ExpandableModifierGroup/ExpandableModifierGroup.js

@@ -2,20 +2,22 @@ import { Typography } from '@material-ui/core';
 import { Icon } from '@popmenu/common-ui';
 import { ChevronRight, CheckCircle } from '@popmenu/web-icons';
 import classNames from 'classnames';
-import React__default, { useState } from 'react';
+import React__default, { useState, useId } from 'react';
 import { useExpandableModifierGroupStyles } from './ExpandableModifierGroup.styles.js';
 
 const ExpandableModifierGroup = ({ name, children, defaultExpanded = true, selectedSummary, }) => {
     const [expanded, setExpanded] = useState(defaultExpanded);
     const classes = useExpandableModifierGroupStyles();
+    const generatedContentId = useId();
+    const contentId = `expandable-${generatedContentId}`;
     return (React__default.createElement("div", { className: classes.root },
-        React__default.createElement("button", { className: classNames(classes.header, { [classes.headerExpanded]: expanded }), onClick: () => setExpanded((prev) => !prev), type: "button", "aria-expanded": expanded },
+        React__default.createElement("button", { className: classNames(classes.header, { [classes.headerExpanded]: expanded }), onClick: () => setExpanded((prev) => !prev), type: "button", "aria-expanded": expanded, "aria-controls": contentId },
             React__default.createElement(Typography, { className: classes.name }, name),
             React__default.createElement(Icon, { icon: ChevronRight, className: classNames(classes.chevron, { [classes.chevronExpanded]: expanded }) })),
         !expanded && selectedSummary && (React__default.createElement("div", { className: classes.summary },
             React__default.createElement(Icon, { icon: CheckCircle, size: "medium", className: classes.summaryIcon }),
             React__default.createElement(Typography, { variant: "caption", className: classes.summaryText }, selectedSummary))),
-        React__default.createElement("div", { hidden: !expanded }, children)));
+        React__default.createElement("div", { id: contentId, hidden: !expanded }, children)));
 };
 ExpandableModifierGroup.displayName = 'ExpandableModifierGroup';
 

package/build/esm/components/ExpandableModifierGroup/ExpandableModifierGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableModifierGroup.js","sources":["../../../../src/components/ExpandableModifierGroup/ExpandableModifierGroup.tsx"],"sourcesContent":["import { Typography } from '@material-ui/core'\nimport { Icon } from '@popmenu/common-ui'\nimport { CheckCircle, ChevronRight } from '@popmenu/web-icons'\nimport classNames from 'classnames'\nimport React, { useState } from 'react'\n\nimport { useExpandableModifierGroupStyles } from './ExpandableModifierGroup.styles'\nimport { ExpandableModifierGroupProps } from './ExpandableModifierGroupProps'\n\nexport const ExpandableModifierGroup = ({\n  name,\n  children,\n  defaultExpanded = true,\n  selectedSummary,\n}: ExpandableModifierGroupProps) => {\n  const [expanded, setExpanded] = useState(defaultExpanded)\n  const classes = useExpandableModifierGroupStyles()\n\n  return (\n    <div className={classes.root}>\n      <button\n        className={classNames(classes.header, { [classes.headerExpanded]: expanded })}\n        onClick={() => setExpanded((prev) => !prev)}\n        type=\"button\"\n        aria-expanded={expanded}\n      >\n        <Typography className={classes.name}>{name}</Typography>\n        <Icon icon={ChevronRight} className={classNames(classes.chevron, { [classes.chevronExpanded]: expanded })} />\n      </button>\n      {!expanded && selectedSummary && (\n        <div className={classes.summary}>\n          <Icon icon={CheckCircle} size=\"medium\" className={classes.summaryIcon} />\n          <Typography variant=\"caption\" className={classes.summaryText}>\n            {selectedSummary}\n          </Typography>\n        </div>\n      )}\n      <div hidden={!expanded}>{children}</div>\n    </div>\n  )\n}\n\nExpandableModifierGroup.displayName = 'ExpandableModifierGroup'\n"],"names":["React"],"mappings":";;;;;;;AASa,MAAA,uBAAuB,GAAG,CAAC,EACtC,IAAI,EACJ,QAAQ,EACR,eAAe,GAAG,IAAI,EACtB,eAAe,GACc,KAAI;IACjC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC;AACzD,IAAA,MAAM,OAAO,GAAG,gCAAgC,EAAE;AAElD,IAAA,QACEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,OAAO,CAAC,IAAI,EAAA;AAC1B,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,OAAO,CAAC,cAAc,GAAG,QAAQ,EAAE,CAAC,EAC7E,OAAO,EAAE,MAAM,WAAW,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,EAC3C,IAAI,EAAC,QAAQ,mBACE,QAAQ,EAAA;YAEvBA,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAG,EAAA,IAAI,CAAc;YACxDA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,eAAe,GAAG,QAAQ,EAAE,CAAC,EAAA,CAAI,CACtG;QACR,CAAC,QAAQ,IAAI,eAAe,KAC3BA,sCAAK,SAAS,EAAE,OAAO,CAAC,OAAO,EAAA;AAC7B,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAI,CAAA;AACzE,YAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAA,EACzD,eAAe,CACL,CACT,CACP;QACDA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,MAAM,EAAE,CAAC,QAAQ,IAAG,QAAQ,CAAO,CACpC;AAEV;AAEA,uBAAuB,CAAC,WAAW,GAAG,yBAAyB;;;;"}
+{"version":3,"file":"ExpandableModifierGroup.js","sources":["../../../../src/components/ExpandableModifierGroup/ExpandableModifierGroup.tsx"],"sourcesContent":["import { Typography } from '@material-ui/core'\nimport { Icon } from '@popmenu/common-ui'\nimport { CheckCircle, ChevronRight } from '@popmenu/web-icons'\nimport classNames from 'classnames'\nimport React, { useId, useState } from 'react'\n\nimport { useExpandableModifierGroupStyles } from './ExpandableModifierGroup.styles'\nimport { ExpandableModifierGroupProps } from './ExpandableModifierGroupProps'\n\nexport const ExpandableModifierGroup = ({\n  name,\n  children,\n  defaultExpanded = true,\n  selectedSummary,\n}: ExpandableModifierGroupProps) => {\n  const [expanded, setExpanded] = useState(defaultExpanded)\n  const classes = useExpandableModifierGroupStyles()\n  const generatedContentId = useId()\n  const contentId = `expandable-${generatedContentId}`\n\n  return (\n    <div className={classes.root}>\n      <button\n        className={classNames(classes.header, { [classes.headerExpanded]: expanded })}\n        onClick={() => setExpanded((prev) => !prev)}\n        type=\"button\"\n        aria-expanded={expanded}\n        aria-controls={contentId}\n      >\n        <Typography className={classes.name}>{name}</Typography>\n        <Icon icon={ChevronRight} className={classNames(classes.chevron, { [classes.chevronExpanded]: expanded })} />\n      </button>\n      {!expanded && selectedSummary && (\n        <div className={classes.summary}>\n          <Icon icon={CheckCircle} size=\"medium\" className={classes.summaryIcon} />\n          <Typography variant=\"caption\" className={classes.summaryText}>\n            {selectedSummary}\n          </Typography>\n        </div>\n      )}\n      <div id={contentId} hidden={!expanded}>\n        {children}\n      </div>\n    </div>\n  )\n}\n\nExpandableModifierGroup.displayName = 'ExpandableModifierGroup'\n"],"names":["React"],"mappings":";;;;;;;AASa,MAAA,uBAAuB,GAAG,CAAC,EACtC,IAAI,EACJ,QAAQ,EACR,eAAe,GAAG,IAAI,EACtB,eAAe,GACc,KAAI;IACjC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC;AACzD,IAAA,MAAM,OAAO,GAAG,gCAAgC,EAAE;AAClD,IAAA,MAAM,kBAAkB,GAAG,KAAK,EAAE;AAClC,IAAA,MAAM,SAAS,GAAG,CAAc,WAAA,EAAA,kBAAkB,EAAE;AAEpD,IAAA,QACEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,OAAO,CAAC,IAAI,EAAA;AAC1B,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,OAAO,CAAC,cAAc,GAAG,QAAQ,EAAE,CAAC,EAC7E,OAAO,EAAE,MAAM,WAAW,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,EAC3C,IAAI,EAAC,QAAQ,EACE,eAAA,EAAA,QAAQ,mBACR,SAAS,EAAA;YAExBA,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAG,EAAA,IAAI,CAAc;YACxDA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,eAAe,GAAG,QAAQ,EAAE,CAAC,EAAA,CAAI,CACtG;QACR,CAAC,QAAQ,IAAI,eAAe,KAC3BA,sCAAK,SAAS,EAAE,OAAO,CAAC,OAAO,EAAA;AAC7B,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAI,CAAA;AACzE,YAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAA,EACzD,eAAe,CACL,CACT,CACP;AACD,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,QAAQ,EAClC,EAAA,QAAQ,CACL,CACF;AAEV;AAEA,uBAAuB,CAAC,WAAW,GAAG,yBAAyB;;;;"}

package/build/esm/components/ItemTagGroup/ItemTagGroup.d.ts

@@ -1,2 +1,2 @@
-import { HTMLAttributes, PropsWithChildren } from 'react';
-export declare const ItemTagGroup: (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => JSX.Element;
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+export declare const ItemTagGroup: (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => React.JSX.Element;

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

@@ -1,2 +1,3 @@
+import React from 'react';
 import { LocationCardProps } from './LocationCardProps';
-export declare const LocationCard: (props: LocationCardProps) => JSX.Element;
+export declare const LocationCard: (props: LocationCardProps) => React.JSX.Element;

package/build/esm/components/MenuBanner/MenuBanner.d.ts

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

package/build/esm/components/MenuBanner/MenuBannerIcons.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 export declare const BannerTypeIcons: {
-    alert: JSX.Element;
-    info: JSX.Element;
-    offer: JSX.Element;
+    alert: React.JSX.Element;
+    info: React.JSX.Element;
+    offer: React.JSX.Element;
 };

package/build/esm/components/MenuItemCard/MenuItemCardImg.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { MenuItemCardProps } from './MenuItemCardProps';
-export declare const MenuItemCardImg: (props: Pick<MenuItemCardProps, "image">) => JSX.Element | null;
+export declare const MenuItemCardImg: (props: Pick<MenuItemCardProps, "image">) => React.JSX.Element | null;

package/build/esm/components/MenuItemCard/MenuItemCardInfo.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const MenuItemCardInfo: (props: {
     children: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/build/esm/components/MenuItemCard/MenuItemCardPrice.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { MenuItemCardProps } from './MenuItemCardProps';
-export declare const MenuItemCardPrice: (props: Pick<MenuItemCardProps, "price" | "available">) => JSX.Element;
+export declare const MenuItemCardPrice: (props: Pick<MenuItemCardProps, "price" | "available">) => React.JSX.Element;

package/build/esm/components/MenuItemCard/MenuItemCardReactions.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { MenuItemCardProps } from './MenuItemCardProps';
-export declare const MenuItemCardReactions: (props: Pick<MenuItemCardProps, "likeCount" | "reviewCount">) => JSX.Element;
+export declare const MenuItemCardReactions: (props: Pick<MenuItemCardProps, "likeCount" | "reviewCount">) => React.JSX.Element;

package/build/esm/components/MenuItemCard/MenuItemCardTags.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { MenuItemCardProps } from './MenuItemCardProps';
-export declare const MenuItemCardTags: (props: Pick<MenuItemCardProps, "itemTags">) => JSX.Element;
+export declare const MenuItemCardTags: (props: Pick<MenuItemCardProps, "itemTags">) => React.JSX.Element;

package/build/esm/components/MenuItemModifiersList/MenuItemModifiersList.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import { ModifierGroupsType } from '../DishCheckoutCard/DishCheckoutCardProps';
 export declare const MenuItemModifiersList: ({ modifierGroups, specialInstructions, }: {
     modifierGroups: ModifierGroupsType[];
     specialInstructions: string | null;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/build/esm/components/MenuItemModifiersList/ModifierGroup.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { ModifierGroupsType } from '../DishCheckoutCard/DishCheckoutCardProps';
-export declare const ModifierGroup: (group: ModifierGroupsType, isNested: boolean) => JSX.Element;
+export declare const ModifierGroup: (group: ModifierGroupsType, isNested: boolean) => React.JSX.Element;

package/build/esm/components/MenuTab/MenuTab.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { MenuTabProps } from './MenuTabProps';
-export declare const MenuTab: (props: MenuTabProps) => JSX.Element;
+export declare const MenuTab: (props: MenuTabProps) => React.JSX.Element;

package/build/esm/components/MenuTabGroup/MenuTabGroup.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { MenuTabGroupProps } from './MenuTabGroupProps';
-export declare const MenuTabGroup: (props: MenuTabGroupProps) => JSX.Element;
+export declare const MenuTabGroup: (props: MenuTabGroupProps) => React.JSX.Element;

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

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

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

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

package/build/esm/components/OrderingAppContext/OrderingAppContext.d.ts

@@ -14,5 +14,5 @@ export declare const useOrderingAppContext: () => OrderingAppContextType;
 type OrderingAppContextProviderProps = PropsWithChildren<{
     defaultContext: OrderingAppContextValue;
 }>;
-export declare const OrderingAppContextProvider: (props: OrderingAppContextProviderProps) => JSX.Element;
+export declare const OrderingAppContextProvider: (props: OrderingAppContextProviderProps) => React.JSX.Element;
 export {};

package/build/esm/components/PageSection/PageSection.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const PageSection: (props: {
     children: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/build/esm/components/ReactionCounter/ReactionCounter.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { ReactionCounterProps } from './ReactionCounterProps';
-export declare const ReactionCounter: (props: ReactionCounterProps) => JSX.Element;
+export declare const ReactionCounter: (props: ReactionCounterProps) => React.JSX.Element;

package/build/esm/components/ReactionCounterGroup/ReactionCounterGroup.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, PropsWithChildren } from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
 type ReactionCounterGroupProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
-export declare const ReactionCounterGroup: (props: ReactionCounterGroupProps) => JSX.Element;
+export declare const ReactionCounterGroup: (props: ReactionCounterGroupProps) => React.JSX.Element;
 export {};

package/build/esm/components/SelectableChip/SelectableChip.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { SelectableChipProps } from './SelectableChipProps';
-export declare const SelectableChip: (props: SelectableChipProps) => JSX.Element;
+export declare const SelectableChip: (props: SelectableChipProps) => React.JSX.Element;

package/build/esm/components/SelectableChipGroup/SelectableChipGroup.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 type SelectableChipGroupProps = {
     children: React.ReactNode;
 } & React.HTMLAttributes<HTMLElement>;
-export declare const SelectableChipGroup: (props: SelectableChipGroupProps) => JSX.Element;
+export declare const SelectableChipGroup: (props: SelectableChipGroupProps) => React.JSX.Element;
 export {};

package/build/esm/components/SelectedMenuFiltersList/SelectedMenuFiltersList.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { SelectedMenuFiltersListProps } from './SelectedMenuFiltersListProps';
-export declare const SelectedMenuFiltersList: (props: SelectedMenuFiltersListProps) => JSX.Element;
+export declare const SelectedMenuFiltersList: (props: SelectedMenuFiltersListProps) => React.JSX.Element;

package/build/esm/components/StatusTag/StatusTag.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import { StatusTagProps } from './StatusTagProps';
 export declare const StatusTag: {
-    ({ color, label, size, variant }: StatusTagProps): JSX.Element;
+    ({ color, label, size, variant }: StatusTagProps): React.JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popmenu/ordering-ui",
-  "version": "0.157.0",
+  "version": "0.159.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": "0870590d9a2151f24a11f67adf0bf150787f2078"
+  "gitHead": "7b8a4a84b2f3d1ed0d68cee82a9e550ff4342abc"
 }