npm - @popmenu/ordering-ui - Versions diffs - 0.145.0 → 0.148.0 - Mend

@popmenu/ordering-ui 0.145.0 → 0.148.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 (61) hide show

package/build/esm/components/MenuItem/MenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.js","sources":["../../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import { Box, Card, CardActionArea, Typography } from '@material-ui/core'\nimport React, { forwardRef } from 'react'\n\nimport { Skeleton } from '@material-ui/lab'\nimport classNames from 'classnames'\nimport { StatusTag } from '../StatusTag'\nimport { useMenuItemStyles } from './MenuItem.styles'\nimport { MenuItemImg } from './MenuItemImg'\nimport { MenuItemInfo } from './MenuItemInfo'\nimport { MenuItemPrice } from './MenuItemPrice'\nimport { MenuItemProps } from './MenuItemProps'\nimport { MenuItemReactions } from './MenuItemReactions'\nimport { MenuItemTags } from './MenuItemTags'\n\nexport const MenuItem = forwardRef((props: MenuItemProps, ref) => {\n const {\n ariaLabel,\n onClick,\n ~~id,\n~~ description,\n title,\n loading,\n statusTags,\n image,\n likeCount,\n reviewCount,\n price,\n available,\n itemTags,\n className,\n ...restProps\n } = props\n const classes = useMenuItemStyles(props)\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onClick(id, event)\n }\n\n return (\n <Card\n className={classNames(classes.card, className)}\n ref={ref}\n elevation={0}\n data-component-type=\"menu-item\"\n {...restProps}\n >\n <CardActionArea\n className={classes.cardActionArea}\n onClick={handleClick}\n disabled={loading}\n aria-label={ariaLabel}\n >\n <MenuItemInfo>\n {statusTags?.featured && <StatusTag {...statusTags.featured} />}\n <Box display=\"flex\" gridGap={8} alignItems=\"center\">\n <Typography component=\"h2\" className={classes.cardTitle}>\n {loading ? <Skeleton /> : title}\n {statusTags?.outOfStock && (\n <span className={classes.statusTags}>\n <StatusTag {...statusTags.outOfStock} />\n </span>\n )}\n {statusTags?.soldOut && (\n <span className={classes.statusTags}>\n <StatusTag {...statusTags.soldOut} />\n </span>\n )}\n {statusTags?.limited && (\n <span className={classes.statusTags}>\n <StatusTag {...statusTags.limited} />\n </span>\n )}\n </Typography>\n </Box>\n <Typography className={classes.cardDescription} paragraph>\n {loading ? <Skeleton /> : description}\n </Typography>\n {loading ? (\n <Skeleton>\n <MenuItemReactions likeCount={likeCount} reviewCount={reviewCount} />\n </Skeleton>\n ) : (\n <MenuItemReactions likeCount={likeCount} reviewCount={reviewCount} />\n )}\n {loading ? (\n <Skeleton style={{ flexGrow: 1 }} width={100} height={48} />\n ) : (\n <Box display=\"flex\" justifyContent=\"space-between\" alignItems=\"end\" flexGrow={1}>\n <MenuItemPrice price={price} available={available} />\n <MenuItemTags itemTags={itemTags} />\n </Box>\n )}\n </MenuItemInfo>\n {loading ? <Skeleton height={100} width={100} /> : <MenuItemImg image={image} />}\n </CardActionArea>\n </Card>\n )\n})\n\nMenuItem.displayName = 'MenuItem'\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAca,MAAA,QAAQ,GAAG,UAAU,CAAC,CAAC,KAAoB,EAAE,GAAG,KAAI;AAC/D,IAAA,MAAM,EACJ,SAAS,EACT,OAAO,EACP,~~EAAE,EACF,~~WAAW,EACX,KAAK,EACL,OAAO,EACP,UAAU,EACV,KAAK,EACL,SAAS,EACT,WAAW,EACX,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK;AACT,IAAA,MAAM,OAAO,GAAG,iBAAiB,CAAC,KAAK,CAAC;AACxC,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;AACjE,QAAA,OAAO,CAAC,EAAE,EAAE,KAAK,CAAC;~~AACpB~~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"}
1	+ {"version":3,"file":"MenuItem.js","sources":["../../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import { Box, Card, CardActionArea, Typography } from '@material-ui/core'\nimport React, { forwardRef } from 'react'\n\nimport { Skeleton } from '@material-ui/lab'\nimport classNames from 'classnames'\nimport { StatusTag } from '../StatusTag'\nimport { useMenuItemStyles } from './MenuItem.styles'\nimport { MenuItemImg } from './MenuItemImg'\nimport { MenuItemInfo } from './MenuItemInfo'\nimport { MenuItemPrice } from './MenuItemPrice'\nimport { MenuItemProps } from './MenuItemProps'\nimport { MenuItemReactions } from './MenuItemReactions'\nimport { MenuItemTags } from './MenuItemTags'\n\nexport const MenuItem = forwardRef((props: MenuItemProps, ref) => {\n const {\n ariaLabel,\n onClick,\n description,\n title,\n loading,\n statusTags,\n image,\n likeCount,\n reviewCount,\n price,\n available,\n itemTags,\n className,\n ...restProps\n } = props\n const classes = useMenuItemStyles(props)\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onClick(props.id, event)\n }\n\n return (\n <Card\n className={classNames(classes.card, className)}\n ref={ref}\n elevation={0}\n data-component-type=\"menu-item\"\n {...restProps}\n >\n <CardActionArea\n className={classes.cardActionArea}\n onClick={handleClick}\n disabled={loading}\n aria-label={ariaLabel}\n >\n <MenuItemInfo>\n {statusTags?.featured && <StatusTag {...statusTags.featured} />}\n <Box display=\"flex\" gridGap={8} alignItems=\"center\">\n <Typography component=\"h3\" className={classes.cardTitle}>\n {loading ? <Skeleton /> : title}\n {statusTags?.outOfStock && (\n <span className={classes.statusTags}>\n <StatusTag {...statusTags.outOfStock} />\n </span>\n )}\n {statusTags?.soldOut && (\n <span className={classes.statusTags}>\n <StatusTag {...statusTags.soldOut} />\n </span>\n )}\n {statusTags?.limited && (\n <span className={classes.statusTags}>\n <StatusTag {...statusTags.limited} />\n </span>\n )}\n </Typography>\n </Box>\n <Typography className={classes.cardDescription} paragraph>\n {loading ? <Skeleton /> : description}\n </Typography>\n {loading ? (\n <Skeleton>\n <MenuItemReactions likeCount={likeCount} reviewCount={reviewCount} />\n </Skeleton>\n ) : (\n <MenuItemReactions likeCount={likeCount} reviewCount={reviewCount} />\n )}\n {loading ? (\n <Skeleton style={{ flexGrow: 1 }} width={100} height={48} />\n ) : (\n <Box display=\"flex\" justifyContent=\"space-between\" alignItems=\"end\" flexGrow={1}>\n <MenuItemPrice price={price} available={available} />\n <MenuItemTags itemTags={itemTags} />\n </Box>\n )}\n </MenuItemInfo>\n {loading ? <Skeleton height={100} width={100} /> : <MenuItemImg image={image} />}\n </CardActionArea>\n </Card>\n )\n})\n\nMenuItem.displayName = 'MenuItem'\n"],"names":["React"],"mappings":"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"}

package/build/esm/components/MenuSection/MenuSection.js CHANGED Viewed

@@ -1,14 +1,14 @@
-import React__default, { forwardRef } from 'react';
 import { Box, Typography } from '@material-ui/core';
-import { useStyles } from './MenuSectionStyles.js';
 import { Skeleton } from '@material-ui/lab';
+import React__default, { forwardRef } from 'react';
+import { useStyles } from './MenuSectionStyles.js';
 const MenuSection = forwardRef((props, ref) => {
     const { name, children, loading, ...restProps } = props;
     const classes = useStyles();
     return (React__default.createElement(Box, { ...restProps, ref, component: 'section', "data-component-type": "menu-section", style: { scrollMarginTop: '70px' } },
         React__default.createElement(Box, { marginTop: 1, marginBottom: 4 },
-            React__default.createElement(Typography, { component: "h1", className: classes.title }, loading ? React__default.createElement(Skeleton, null) : name)),
+            React__default.createElement(Typography, { component: "h2", className: classes.title, tabIndex: -1 }, loading ? React__default.createElement(Skeleton, null) : name)),
         children));
 });
 MenuSection.displayName = 'MenuSection';

package/build/esm/components/MenuSection/MenuSection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuSection.js","sources":["../../../../src/components/MenuSection/MenuSection.tsx"],"sourcesContent":["import ~~React~~, { ~~forwardRef~~ } from '~~react~~'\nimport { ~~Box,~~ ~~Typography~~ } from '@material-ui/~~core~~'\nimport { ~~MenuSectionProps~~ } from '~~./MenuSectionProps~~'\nimport { ~~useStyles~~ } from './~~MenuSectionStyles~~'\nimport { ~~Skeleton~~ } from '~~@material-ui/lab~~'\n\nexport const MenuSection = forwardRef((props: MenuSectionProps, ref) => {\n const { name, children, loading, ...restProps } = props\n const classes = useStyles()\n return (\n <Box\n {...restProps}\n {...{ ref, component: 'section' }}\n data-component-type=\"menu-section\"\n style={{ scrollMarginTop: '70px' }}\n >\n <Box marginTop={1} marginBottom={4}>\n <Typography component=\"h1\" className={classes.title}>\n {loading ? <Skeleton /> : name}\n </Typography>\n </Box>\n {children}\n </Box>\n )\n})\n\nMenuSection.displayName = 'MenuSection'\n"],"names":["React"],"mappings":";;;;;AAMa,MAAA,WAAW,GAAG,UAAU,CAAC,CAAC,KAAuB,EAAE,GAAG,KAAI;AACrE,IAAA,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;AACvD,IAAA,MAAM,OAAO,GAAG,SAAS,EAAE;IAC3B,QACEA,6BAAC,GAAG,EAAA,EAAA,GACE,SAAS,EACP,GAAG,EAAE,SAAS,EAAE,SAAS,EACX,qBAAA,EAAA,cAAc,EAClC,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,EAAA;QAElCA,cAAC,CAAA,aAAA,CAAA,GAAG,IAAC,SAAS,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAA;~~YAChCA~~,~~cAAC~~,CAAA,aAAA,~~CAAA~~,UAAU,EAAC,~~EAAA,~~SAAS,EAAC,IAAI,EAAC,SAAS,EAAE,OAAO,CAAC,KAAK,EAAA,~~EAChD,~~OAAO,GAAGA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA,CAAG,GAAG,IAAI,CACnB,CACT;QACL,QAAQ,CACL;AAEV,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}
1	+ {"version":3,"file":"MenuSection.js","sources":["../../../../src/components/MenuSection/MenuSection.tsx"],"sourcesContent":["import { Box, Typography } from '@material-ui/core'\nimport { Skeleton } from '@material-ui/lab'\nimport React, { forwardRef } from 'react'\nimport { MenuSectionProps } from './MenuSectionProps'\nimport { useStyles } from './MenuSectionStyles'\n\nexport const MenuSection = forwardRef((props: MenuSectionProps, ref) => {\n const { name, children, loading, ...restProps } = props\n const classes = useStyles()\n return (\n <Box\n {...restProps}\n {...{ ref, component: 'section' }}\n data-component-type=\"menu-section\"\n style={{ scrollMarginTop: '70px' }}\n >\n <Box marginTop={1} marginBottom={4}>\n <Typography component=\"h2\" className={classes.title} tabIndex={-1}>\n {loading ? <Skeleton /> : name}\n </Typography>\n </Box>\n {children}\n </Box>\n )\n})\n\nMenuSection.displayName = 'MenuSection'\n"],"names":["React"],"mappings":";;;;;AAMa,MAAA,WAAW,GAAG,UAAU,CAAC,CAAC,KAAuB,EAAE,GAAG,KAAI;AACrE,IAAA,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;AACvD,IAAA,MAAM,OAAO,GAAG,SAAS,EAAE;IAC3B,QACEA,6BAAC,GAAG,EAAA,EAAA,GACE,SAAS,EACP,GAAG,EAAE,SAAS,EAAE,SAAS,EACX,qBAAA,EAAA,cAAc,EAClC,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,EAAA;QAElCA,cAAC,CAAA,aAAA,CAAA,GAAG,IAAC,SAAS,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAA;AAChC,YAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,EAC9D,EAAA,OAAO,GAAGA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA,CAAG,GAAG,IAAI,CACnB,CACT;QACL,QAAQ,CACL;AAEV,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/build/esm/components/MenuTab/MenuTab.js CHANGED Viewed

@@ -1,15 +1,31 @@
 import React__default from 'react';
-import { Tab } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import { Clock } from '@popmenu/web-icons';
 import { Icon } from '@popmenu/common-ui';
+import classNames from 'classnames';
 import { useMenuTabStyles } from './MenuTab.styles.js';
 const MenuTab = (props) => {
-    const { isUnavailable, value } = props;
-    const classes = useMenuTabStyles({ isUnavailable });
-    return (React__default.createElement(Tab, { "data-tab-for-section-id": value, classes: {
-            root: classes.root,
-        }, icon: isUnavailable ? React__default.createElement(Icon, { icon: Clock, size: "large", className: classes.icon }) : undefined, ...props }));
+    const { href, value, label, onClick, selected, isUnavailable, unavailableLabel } = props;
+    const classes = useMenuTabStyles({ isUnavailable, selected });
+    const handleClick = (event) => {
+        event.preventDefault();
+        onClick(event, value);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === ' ') {
+            event.preventDefault();
+            onClick(event, value);
+        }
+    };
+    return (React__default.createElement("li", null,
+        React__default.createElement(Typography, { variant: "body2" },
+            React__default.createElement("a", { href: href, className: classNames(classes.root, { [classes.selected]: selected }), onClick: handleClick, onKeyDown: handleKeyDown, "aria-current": selected ? 'page' : undefined },
+                isUnavailable && React__default.createElement(Icon, { icon: Clock, "aria-hidden": "true", size: "large", className: classes.icon }),
+                label,
+                isUnavailable && React__default.createElement("span", { className: classes.visuallyHidden },
+                    ", ",
+                    unavailableLabel)))));
 };
 export { MenuTab };

package/build/esm/components/MenuTab/MenuTab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuTab.js","sources":["../../../../src/components/MenuTab/MenuTab.tsx"],"sourcesContent":["import React from 'react'\nimport { ~~Tab~~ } from '@material-ui/core'\nimport { Clock } from '@popmenu/web-icons'\nimport { Icon } from '@popmenu/common-ui'\n\nimport { useMenuTabStyles } from './MenuTab.styles'\nimport { MenuTabProps } from './MenuTabProps'\n\nexport const MenuTab = (props: MenuTabProps) => {\n const { ~~isUnavailable~~, value } = props\n const classes = useMenuTabStyles({ isUnavailable })\n\n ~~return~~ (\n <~~Tab~~\n ~~data-tab-for-section-id={~~value}\n ~~classes~~={{\n root: classes.~~root,\~~n }}\n ~~icon~~={~~isUnavailable~~ ? <Icon icon={Clock} size=\"large\" className={classes.icon} /> ~~: undefined~~}\n {~~...props~~}\n ~~/>\~~n )\n}\n"],"names":["React"],"mappings":"~~;;;;;;AAQa~~,MAAA,OAAO,GAAG,CAAC,KAAmB,KAAI;AAC7C,IAAA,MAAM,EAAE,~~aAAa~~,EAAE,KAAK,EAAE,GAAG,KAAK;~~IACtC~~,MAAM,OAAO,GAAG,gBAAgB,CAAC,EAAE,aAAa,EAAE,CAAC;~~AAEnD~~,IAAA,QACEA,~~cAAC~~,CAAA,aAAA,CAAA,~~GAAG,+BACuB~~,~~KAAK~~,~~EAC9B~~,OAAO,~~EAAE~~;~~YACP~~,IAAI,EAAE,OAAO,CAAC,IAAI~~;AACnB~~,~~SAAA~~,~~EACD~~,~~IAAI~~,EAAE,aAAa,~~GAAGA~~,cAAC,CAAA,aAAA,CAAA,IAAI,~~EAAC~~,~~EAAA,~~IAAI,EAAE,KAAK,~~EAAE~~,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAI,CAAA,~~GAAG~~,~~SAAS~~,EAAA,~~GACzF~~,~~KAAK~~,EAAA,~~CACT~~;~~AAEN~~;;;;"}
1	+ {"version":3,"file":"MenuTab.js","sources":["../../../../src/components/MenuTab/MenuTab.tsx"],"sourcesContent":["import React from 'react'\nimport { Typography } from '@material-ui/core'\nimport { Clock } from '@popmenu/web-icons'\nimport { Icon } from '@popmenu/common-ui'\nimport classNames from 'classnames'\n\nimport { useMenuTabStyles } from './MenuTab.styles'\nimport { MenuTabProps } from './MenuTabProps'\n\nexport const MenuTab = (props: MenuTabProps) => {\n const { href, value, label, onClick, selected, isUnavailable, unavailableLabel } = props\n const classes = useMenuTabStyles({ isUnavailable, selected })\n\n const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n event.preventDefault()\n onClick(event, value)\n }\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n if (event.key === ' ') {\n event.preventDefault()\n onClick(event, value)\n }\n }\n\n return (\n <li>\n <Typography variant=\"body2\">\n <a\n href={href}\n className={classNames(classes.root, { [classes.selected]: selected })}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n aria-current={selected ? 'page' : undefined}\n >\n {isUnavailable && <Icon icon={Clock} aria-hidden=\"true\" size=\"large\" className={classes.icon} />}\n {label}\n {isUnavailable && <span className={classes.visuallyHidden}>, {unavailableLabel}</span>}\n </a>\n </Typography>\n </li>\n )\n}\n"],"names":["React"],"mappings":";;;;;;;AASa,MAAA,OAAO,GAAG,CAAC,KAAmB,KAAI;AAC7C,IAAA,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,KAAK;IACxF,MAAM,OAAO,GAAG,gBAAgB,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC;AAE7D,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;QACjE,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC;AACvB,KAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,KAA6C,KAAI;AACtE,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YACrB,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC;;AAEzB,KAAC;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA;AACE,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,OAAO,EAAA;AACzB,YAAAA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,GAAG,QAAQ,EAAE,CAAC,EACrE,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACV,cAAA,EAAA,QAAQ,GAAG,MAAM,GAAG,SAAS,EAAA;AAE1C,gBAAA,aAAa,IAAIA,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,IAAI,EAAE,KAAK,EAAc,aAAA,EAAA,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAI,CAAA;gBAC/F,KAAK;AACL,gBAAA,aAAa,IAAIA,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,OAAO,CAAC,cAAc,EAAA;;AAAK,oBAAA,gBAAgB,CAAQ,CACpF,CACO,CACV;AAET;;;;"}

package/build/esm/components/MenuTab/MenuTab.styles.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 export interface MenuTabStylesProps {
     isUnavailable: boolean | undefined;
+    selected: boolean | undefined;
 }
 export declare const useMenuTabStyles: (props: MenuTabStylesProps) => import("@material-ui/styles").ClassNameMap<string>;

package/build/esm/components/MenuTab/MenuTab.styles.js CHANGED Viewed

@@ -3,22 +3,34 @@ import { makeStyles } from '@material-ui/core';
 const useMenuTabStyles = makeStyles(({ palette, spacing }) => ({
     icon: {
         minWidth: spacing(2.5),
+        marginRight: spacing(1),
     },
-    root: ({ isUnavailable }) => ({
-        color: isUnavailable ? `${palette.grey[700]} !important` : 'inherit',
-        '&.MuiTab-labelIcon': {
-            minHeight: 'unset',
-        },
+    root: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        textDecoration: 'none',
+        color: ({ isUnavailable }) => (isUnavailable ? palette.grey[700] : 'inherit'),
+        padding: spacing(1.5, 2),
+        whiteSpace: 'nowrap',
         maxWidth: spacing(29.5),
-        '& > .MuiTab-wrapper': {
-            flexDirection: 'row-reverse',
-            gridGap: spacing(1),
-            textAlign: 'center',
-            '& > svg': {
-                marginBottom: '0 !important',
-            },
-        },
-    }),
+        outlineOffset: -2,
+    },
+    selected: {
+        fontWeight: 500,
+        borderBottom: `2px solid ${palette.primary.main}`,
+    },
+    visuallyHidden: {
+        position: 'absolute',
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: 'hidden',
+        clip: 'rect(0, 0, 0, 0)',
+        whiteSpace: 'nowrap',
+        border: 0,
+    },
 }));
 export { useMenuTabStyles };

package/build/esm/components/MenuTab/MenuTab.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuTab.styles.js","sources":["../../../../src/components/MenuTab/MenuTab.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\n\nexport interface MenuTabStylesProps {\n isUnavailable: boolean \| undefined\n}\nexport const useMenuTabStyles = makeStyles<Theme, MenuTabStylesProps>(({ palette, spacing }) => ({\n icon: {\n minWidth: spacing(2.5),\n },\n root: ({ isUnavailable }) => (~~{\n color:~~ isUnavailable ? ~~`${~~palette.grey[700]} ~~!important`~~ : 'inherit',\n ~~'&.MuiTab-labelIcon'~~: {\n ~~minHeight~~: '~~unset~~',\n ~~},\n~~ maxWidth: spacing(29.5),\n '& > .~~MuiTab-wrapper'~~: {\n ~~flexDirection~~: '~~row-reverse~~',\n ~~gridGap~~: ~~spacing(~~1),\n ~~textAlign~~: ~~'center'~~,\n\n '& > ~~svg~~'~~: {\~~n ~~marginBottom~~: '0 ~~!important~~',\n },\n },\n }),\n}))\n"],"names":[],"mappings":";;~~AAKO~~,MAAM,gBAAgB,GAAG,UAAU,CAA4B,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM;AAC/F,IAAA,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE,OAAO,CAAC,GAAG,CAAC;~~AACvB~~,KAAA;~~IACD~~,IAAI,EAAE,~~CAAC~~,EAAE,aAAa,EAAE,~~MAAM~~;~~AAC5B~~,QAAA,KAAK,EAAE,aAAa,~~GAAG~~,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,~~CAAA~~,~~WAAA~~,~~CAAa~~,GAAG,~~SAAS~~;~~AACpE~~,QAAA,~~oBAAoB~~,EAAE;AACpB,~~YAAA~~,~~SAAS~~,EAAE,OAAO;~~AACnB~~,~~SAAA~~;AACD,~~QAAA~~,QAAQ,EAAE,OAAO,CAAC,IAAI,~~CAAC~~;~~AACvB~~,QAAA,~~qBAAqB~~,EAAE;~~AACrB~~,~~YAAA~~,~~aAAa~~,EAAE,~~aAAa~~;~~AAC5B~~,~~YAAA~~,~~OAAO~~,EAAE,OAAO,~~CAAC~~,CAAC,~~CAAC~~;~~AACnB~~,~~YAAA~~,~~SAAS~~,EAAE,QAAQ;~~AAEnB~~,~~YAAA~~,~~SAAS~~,EAAE;~~AACT~~,~~gBAAA~~,~~YAAY~~,EAAE,~~cAAc~~;~~AAC7B~~,~~aAAA;AACF~~,~~SAAA;KACF~~,CAAC;~~AACH~~,CAAA,CAAC;;;;"}
1	+ {"version":3,"file":"MenuTab.styles.js","sources":["../../../../src/components/MenuTab/MenuTab.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\n\nexport interface MenuTabStylesProps {\n isUnavailable: boolean \| undefined\n selected: boolean \| undefined\n}\n\nexport const useMenuTabStyles = makeStyles<Theme, MenuTabStylesProps>(({ palette, spacing }) => ({\n icon: {\n minWidth: spacing(2.5),\n marginRight: spacing(1),\n },\n root: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n textDecoration: 'none',\n color: ({ isUnavailable }) => (isUnavailable ? palette.grey[700] : 'inherit'),\n padding: spacing(1.5, 2),\n whiteSpace: 'nowrap',\n maxWidth: spacing(29.5),\n outlineOffset: -2,\n },\n selected: {\n fontWeight: 500,\n borderBottom: `2px solid ${palette.primary.main}`,\n },\n visuallyHidden: {\n position: 'absolute',\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n border: 0,\n },\n}))\n"],"names":[],"mappings":";;AAOO,MAAM,gBAAgB,GAAG,UAAU,CAA4B,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM;AAC/F,IAAA,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE,OAAO,CAAC,GAAG,CAAC;AACtB,QAAA,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;AACxB,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,OAAO,EAAE,aAAa;AACtB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,cAAc,EAAE,MAAM;QACtB,KAAK,EAAE,CAAC,EAAE,aAAa,EAAE,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;AAC7E,QAAA,OAAO,EAAE,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;AACxB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,QAAQ,EAAE,OAAO,CAAC,IAAI,CAAC;QACvB,aAAa,EAAE,EAAE;AAClB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,UAAU,EAAE,GAAG;AACf,QAAA,YAAY,EAAE,CAAa,UAAA,EAAA,OAAO,CAAC,OAAO,CAAC,IAAI,CAAE,CAAA;AAClD,KAAA;AACD,IAAA,cAAc,EAAE;AACd,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,EAAE;AACV,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,IAAI,EAAE,kBAAkB;AACxB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,MAAM,EAAE,CAAC;AACV,KAAA;AACF,CAAA,CAAC;;;;"}

package/build/esm/components/MenuTab/MenuTabProps.d.ts CHANGED Viewed

@@ -1,4 +1,10 @@
-import { TabProps } from '@material-ui/core/Tab';
-export type MenuTabProps = TabProps & {
+import React from 'react';
+export type MenuTabProps = {
+    onClick: (event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>, value: string) => void;
+    value: string;
+    label: string;
+    href: string;
+    selected: boolean;
     isUnavailable: boolean;
+    unavailableLabel: string;
 };

package/build/esm/components/MenuTabGroup/MenuTabGroup.js CHANGED Viewed

@@ -1,13 +1,53 @@
-import { Tabs } from '@material-ui/core';
-import React__default from 'react';
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import { IconButton } from '@material-ui/core';
+import { ChevronLeft, ChevronRight } from '@popmenu/web-icons';
+import { Icon } from '@popmenu/common-ui';
 import { useMenuTabGroupStyles } from './MenuTabGroup.styles.js';
 const MenuTabGroup = (props) => {
-    const { children, ...muiProps } = props;
+    const { children, scrollLeftLabel, scrollRightLabel, ...restProps } = props;
     const classes = useMenuTabGroupStyles();
-    return (React__default.createElement(Tabs, { scrollButtons: "on", variant: "scrollable", classes: {
-            root: classes.root,
-        }, ...muiProps }, children));
+    const scrollContainerRef = useRef(null);
+    const [showLeftButton, setShowLeftButton] = useState(false);
+    const [showRightButton, setShowRightButton] = useState(false);
+    const updateScrollButtons = useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = container;
+        setShowLeftButton(scrollLeft > 0);
+        setShowRightButton(scrollLeft + clientWidth < scrollWidth - 1);
+    }, []);
+    useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        updateScrollButtons();
+        container.addEventListener('scroll', updateScrollButtons);
+        window.addEventListener('resize', updateScrollButtons);
+        return () => {
+            container.removeEventListener('scroll', updateScrollButtons);
+            window.removeEventListener('resize', updateScrollButtons);
+        };
+    }, [updateScrollButtons]);
+    const scrollLeft = () => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        container.scrollBy({ left: -container.clientWidth, behavior: 'smooth' });
+    };
+    const scrollRight = () => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        container.scrollBy({ left: container.clientWidth, behavior: 'smooth' });
+    };
+    return (React__default.createElement("nav", { className: classes.root, ...restProps },
+        showLeftButton && (React__default.createElement(IconButton, { className: classes.scrollButtonLeft, onClick: scrollLeft, "aria-label": scrollLeftLabel, size: "small" },
+            React__default.createElement(Icon, { icon: ChevronLeft, "aria-hidden": "true" }))),
+        React__default.createElement("ul", { ref: scrollContainerRef, className: classes.flexContainer }, children),
+        showRightButton && (React__default.createElement(IconButton, { className: classes.scrollButtonRight, onClick: scrollRight, "aria-label": scrollRightLabel, size: "small" },
+            React__default.createElement(Icon, { icon: ChevronRight, "aria-hidden": "true" })))));
 };
 export { MenuTabGroup };

package/build/esm/components/MenuTabGroup/MenuTabGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuTabGroup.js","sources":["../../../../src/components/MenuTabGroup/MenuTabGroup.tsx"],"sourcesContent":["import { ~~Tabs~~ } from '@material-ui/core'\nimport ~~React~~ from '~~react~~'\nimport { MenuTabGroupProps } from './MenuTabGroupProps'\nimport { useMenuTabGroupStyles } from './MenuTabGroup.styles'\n\nexport const MenuTabGroup = (props: MenuTabGroupProps) => {\n const { children, ...~~muiProps~~ } = props\n const classes = useMenuTabGroupStyles()\n\n return (\n <~~Tabs~~\n ~~scrollButtons~~=\"on\"\n ~~variant~~=\"~~scrollable~~\"\n ~~classes~~={{\n ~~root:~~ classes.~~root,\~~n }}\n {~~...muiProps~~}\n >\n ~~{children~~}\n </~~Tabs~~>\n )\n}\n"],"names":["React"],"mappings":"~~;;;;AAKa~~,MAAA,YAAY,GAAG,CAAC,KAAwB,KAAI;~~IACvD~~,MAAM,EAAE,QAAQ,EAAE,GAAG,~~QAAQ~~,EAAE,GAAG,KAAK;~~AACvC~~,IAAA,MAAM,OAAO,GAAG,qBAAqB,EAAE;~~AAEvC~~,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,~~IAAI~~,EAAA,~~EACH~~,~~aAAa~~,~~EAAC~~,~~IAAI~~,~~EAClB~~,OAAO,~~EAAC~~,~~YAAY~~,~~EACpB~~,OAAO,~~EAAE~~;~~YACP~~,IAAI,EAAE,OAAO,CAAC,IAAI;~~AACnB~~,~~SAAA~~,EAAA,~~GACG~~,~~QAAQ~~,EAAA,~~EAEX~~,~~QAAQ~~,~~CACJ~~;~~AAEX~~;;;;"}
1	+ {"version":3,"file":"MenuTabGroup.js","sources":["../../../../src/components/MenuTabGroup/MenuTabGroup.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { IconButton } from '@material-ui/core'\nimport { ChevronLeft, ChevronRight } from '@popmenu/web-icons'\nimport { Icon } from '@popmenu/common-ui'\n\nimport { MenuTabGroupProps } from './MenuTabGroupProps'\nimport { useMenuTabGroupStyles } from './MenuTabGroup.styles'\n\nexport const MenuTabGroup = (props: MenuTabGroupProps) => {\n const { children, scrollLeftLabel, scrollRightLabel, ...restProps } = props\n const classes = useMenuTabGroupStyles()\n const scrollContainerRef = useRef<HTMLUListElement>(null)\n const [showLeftButton, setShowLeftButton] = useState(false)\n const [showRightButton, setShowRightButton] = useState(false)\n\n const updateScrollButtons = useCallback(() => {\n const container = scrollContainerRef.current\n if (!container) return\n\n const { scrollLeft, scrollWidth, clientWidth } = container\n setShowLeftButton(scrollLeft > 0)\n setShowRightButton(scrollLeft + clientWidth < scrollWidth - 1)\n }, [])\n\n useEffect(() => {\n const container = scrollContainerRef.current\n if (!container) return\n\n updateScrollButtons()\n\n container.addEventListener('scroll', updateScrollButtons)\n window.addEventListener('resize', updateScrollButtons)\n\n return () => {\n container.removeEventListener('scroll', updateScrollButtons)\n window.removeEventListener('resize', updateScrollButtons)\n }\n }, [updateScrollButtons])\n\n const scrollLeft = () => {\n const container = scrollContainerRef.current\n if (!container) return\n container.scrollBy({ left: -container.clientWidth, behavior: 'smooth' })\n }\n\n const scrollRight = () => {\n const container = scrollContainerRef.current\n if (!container) return\n container.scrollBy({ left: container.clientWidth, behavior: 'smooth' })\n }\n\n return (\n <nav className={classes.root} {...restProps}>\n {showLeftButton && (\n <IconButton className={classes.scrollButtonLeft} onClick={scrollLeft} aria-label={scrollLeftLabel} size=\"small\">\n <Icon icon={ChevronLeft} aria-hidden=\"true\" />\n </IconButton>\n )}\n\n <ul ref={scrollContainerRef} className={classes.flexContainer}>\n {children}\n </ul>\n\n {showRightButton && (\n <IconButton\n className={classes.scrollButtonRight}\n onClick={scrollRight}\n aria-label={scrollRightLabel}\n size=\"small\"\n >\n <Icon icon={ChevronRight} aria-hidden=\"true\" />\n </IconButton>\n )}\n </nav>\n )\n}\n"],"names":["React"],"mappings":"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"}

package/build/esm/components/MenuTabGroup/MenuTabGroup.styles.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const useMenuTabGroupStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"root">;
1	+ export declare const useMenuTabGroupStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"root" \| "flexContainer" \| "scrollButtonLeft" \| "scrollButtonRight">;

package/build/esm/components/MenuTabGroup/MenuTabGroup.styles.js CHANGED Viewed

@@ -1,48 +1,50 @@
 import { makeStyles } from '@material-ui/core';
+const scrollButtonBase = {
+    position: 'absolute',
+    zIndex: 1,
+    backgroundColor: 'white',
+    height: '100%',
+    top: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 40,
+    opacity: 1,
+    '& svg': {
+        height: 24,
+        width: 24,
+    },
+};
 const useMenuTabGroupStyles = makeStyles(() => ({
     root: {
-        position: 'relative' /* Establish positioning context */,
-        overflow: 'hidden' /* Prevent scroll buttons from overflowing */,
-        '& .MuiTabScrollButton-root': {
-            position: 'absolute',
-            zIndex: '1',
-            backgroundColor: 'white',
-            height: '100%' /* Inherit full height of parent */,
-            top: '0',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '40px',
-            opacity: 1,
-            /* Position scroller buttons and add gradient to inner sections */
-            '&:first-child': {
-                left: 0,
-                background: 'linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) calc(100% - 8px), rgba(255, 255, 255, 0) 100%)',
-            },
-            '&:last-child': {
-                right: 0,
-                background: 'linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) calc(100% - 8px), rgba(255, 255, 255, 0) 100%)',
-            },
-            /* Ensure tab container fills height */
-            '& .MuiSvgIcon-root': {
-                height: '24px',
-                width: '24px',
-            },
-        },
-        /* Adjust scroller to prevent tabs from being hidden */
-        '.MuiTabs-scroller': {
-            padding: '0 40px' /* Match scroll button width */,
-            height: '100%' /* Ensure it fills parent height */,
-        },
-        /* Ensure tab container fills height */
-        '.MuiTabs-flexContainer': {
-            height: '100%',
-        },
-        /* Remove buttons when scroll is all the way to the left or right */
-        '& .MuiTabScrollButton-root.Mui-disabled': {
+        position: 'relative',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    flexContainer: {
+        display: 'flex',
+        listStyle: 'none',
+        margin: 0,
+        padding: 0,
+        overflowX: 'auto',
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
+        '&::-webkit-scrollbar': {
             display: 'none',
         },
+        height: '100%',
+    },
+    scrollButtonLeft: {
+        ...scrollButtonBase,
+        left: 0,
+        background: 'linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) calc(100% - 8px), rgba(255, 255, 255, 0) 100%)',
+    },
+    scrollButtonRight: {
+        ...scrollButtonBase,
+        right: 0,
+        background: 'linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) calc(100% - 8px), rgba(255, 255, 255, 0) 100%)',
     },
 }));

package/build/esm/components/MenuTabGroup/MenuTabGroup.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuTabGroup.styles.js","sources":["../../../../src/components/MenuTabGroup/MenuTabGroup.styles.ts"],"sourcesContent":["import { makeStyles } from '@material-ui/core'\n\~~nexport~~ ~~const~~ ~~useMenuTabGroupStyles~~ = ~~makeStyles(() => (~~{\n ~~root: {\n~~ position: '~~relative~~' /* ~~Establish~~ ~~positioning context /,\~~n ~~overflow~~: '~~hidden~~' ~~/ Prevent scroll buttons from overflowing /,\~~n '& ~~.MuiTabScrollButton-root~~': {\n ~~position~~: '~~absolute~~',\n ~~zIndex~~: '1',\n ~~backgroundColor~~: '~~white~~',\n ~~height~~: '~~100%~~' / ~~Inherit~~ ~~full~~ ~~height~~ of ~~parent~~ /,\n ~~top~~: '0',\n display: 'flex',\n alignItems: 'center',\n ~~justifyContent~~: '~~center~~',\n ~~width~~: '~~40px~~',\n ~~opacity~~: 1,\n\n / ~~Position~~ ~~scroller~~ ~~buttons~~ ~~and add gradient to inner sections /\~~n '~~&:first-child~~': {\n left: 0,\n background:\n 'linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) calc(100% - 8px), rgba(255, 255, 255, 0) 100%)',\n },\n ~~'&:last-child'~~: {\n right: 0,\n background:\n 'linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) calc(100% - 8px), rgba(255, 255, 255, 0) 100%)',\n },\n\n / Ensure tab container fills height /\n '& .MuiSvgIcon-root': {\n height: '24px',\n width: '24px',\n },\n },\n\n / Adjust scroller to prevent tabs from being hidden /\n '.MuiTabs-scroller': {\n padding: '0 40px' / Match scroll button width /,\n height: '100%' / Ensure it fills parent height /,\n },\n\n / Ensure tab container fills height /\n '.MuiTabs-flexContainer': {\n height: '100%',\n },\n\n / Remove buttons when scroll is all the way to the left or right */\n '& .MuiTabScrollButton-root.Mui-disabled': {\n display: 'none',\n },\n },\n}))\n"],"names":[],"mappings":";;~~MAEa~~,~~qBAAqB~~,GAAG~~,UAAU,CAAC,OAAO~~;~~AACrD~~,IAAA,~~IAAI,EAAE;QACJ,~~QAAQ,EAAE,~~UAAU~~;~~QACpB~~,~~QAAQ~~,~~EAAE,QAAQ;AAClB,QAAA,4BAA4B,EAAE;AAC5B,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,~~MAAM,EAAE,~~GAAG~~;~~AACX~~,~~YAAA~~,eAAe,EAAE,OAAO;~~YACxB~~,MAAM,EAAE,MAAM;AACd,~~YAAA~~,GAAG,EAAE,~~GAAG~~;~~AACR~~,~~YAAA~~,OAAO,EAAE,MAAM;AACf,~~YAAA~~,UAAU,EAAE,QAAQ;AACpB,~~YAAA~~,cAAc,EAAE,QAAQ;AACxB,~~YAAA~~,KAAK,EAAE,~~MAAM~~;~~AACb~~,~~YAAA~~,OAAO,EAAE,CAAC~~;;AAGV~~,~~YAAA~~,~~eAAe~~,EAAE;~~AACf~~,~~gBAAA~~,~~IAAI~~,EAAE,~~CAAC~~;~~AACP~~,~~gBAAA~~,UAAU,~~EACR~~,~~4HAA4H~~;~~AAC/H~~,~~aAAA~~;~~AACD~~,~~YAAA~~,~~cAAc~~,EAAE;~~AACd~~,~~gBAAA~~,~~KAAK~~,EAAE,~~CAAC~~;~~AACR~~,~~gBAAA~~,UAAU,~~EACR~~,~~2HAA2H~~;~~AAC9H~~,~~aAAA;;AAGD~~,~~YAAA~~,~~oBAAoB~~,EAAE;~~AACpB~~,~~gBAAA~~,~~MAAM~~,EAAE,MAAM;~~AACd~~,~~gBAAA~~,~~KAAK~~,EAAE,MAAM;~~AACd~~,~~aAAA~~;~~AACF~~,~~SAAA;;AAGD,~~QAAA,~~mBAAmB~~,EAAE;~~YACnB~~,~~OAAO~~,EAAE,~~QAAQ~~;~~YACjB~~,MAAM,EAAE,MAAM;~~AACf~~,~~SAAA;;AAGD,~~QAAA,~~wBAAwB~~,EAAE;~~AACxB~~,YAAA,MAAM,EAAE,MAAM;AACf,~~SAAA;;AAGD~~,QAAA,~~yCAAyC~~,EAAE;~~AACzC~~,~~YAAA~~,~~OAAO~~,EAAE,~~MAAM~~;~~AAChB~~,~~SAAA~~;~~AACF~~,KAAA;AACF,CAAA,CAAC;;;;"}
1	+ {"version":3,"file":"MenuTabGroup.styles.js","sources":["../../../../src/components/MenuTabGroup/MenuTabGroup.styles.ts"],"sourcesContent":["import { makeStyles } from '@material-ui/core'\n\nconst scrollButtonBase = {\n position: 'absolute' as const,\n zIndex: 1,\n backgroundColor: 'white',\n height: '100%',\n top: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: 40,\n opacity: 1,\n '& svg': {\n height: 24,\n width: 24,\n },\n}\n\nexport const useMenuTabGroupStyles = makeStyles(() => ({\n root: {\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n },\n flexContainer: {\n display: 'flex',\n listStyle: 'none',\n margin: 0,\n padding: 0,\n overflowX: 'auto',\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n '&::-webkit-scrollbar': {\n display: 'none',\n },\n height: '100%',\n },\n scrollButtonLeft: {\n ...scrollButtonBase,\n left: 0,\n background:\n 'linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) calc(100% - 8px), rgba(255, 255, 255, 0) 100%)',\n },\n scrollButtonRight: {\n ...scrollButtonBase,\n right: 0,\n background:\n 'linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) calc(100% - 8px), rgba(255, 255, 255, 0) 100%)',\n },\n}))\n"],"names":[],"mappings":";;AAEA,MAAM,gBAAgB,GAAG;AACvB,IAAA,QAAQ,EAAE,UAAmB;AAC7B,IAAA,MAAM,EAAE,CAAC;AACT,IAAA,eAAe,EAAE,OAAO;AACxB,IAAA,MAAM,EAAE,MAAM;AACd,IAAA,GAAG,EAAE,CAAC;AACN,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,cAAc,EAAE,QAAQ;AACxB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,OAAO,EAAE;AACP,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,KAAK,EAAE,EAAE;AACV,KAAA;CACF;MAEY,qBAAqB,GAAG,UAAU,CAAC,OAAO;AACrD,IAAA,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,UAAU,EAAE,QAAQ;AACrB,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,cAAc,EAAE,MAAM;AACtB,QAAA,eAAe,EAAE,MAAM;AACvB,QAAA,sBAAsB,EAAE;AACtB,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACD,QAAA,MAAM,EAAE,MAAM;AACf,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA,GAAG,gBAAgB;AACnB,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,UAAU,EACR,4HAA4H;AAC/H,KAAA;AACD,IAAA,iBAAiB,EAAE;AACjB,QAAA,GAAG,gBAAgB;AACnB,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,UAAU,EACR,2HAA2H;AAC9H,KAAA;AACF,CAAA,CAAC;;;;"}

package/build/esm/components/MenuTabGroup/MenuTabGroupProps.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { TabsProps } from '@material-ui/core/Tabs';
-type MenuTabGroupOnChange = (event: React.ChangeEvent<Record<string, unknown>>, value: number) => void;
-export type MenuTabGroupProps = Omit<TabsProps, 'onChange'> & {
-    onChange?: MenuTabGroupOnChange;
-};
-export {};
+import React from 'react';
+export type MenuTabGroupProps = {
+    children: React.ReactNode;
+    scrollLeftLabel: string;
+    scrollRightLabel: string;
+} & React.HTMLAttributes<HTMLElement>;

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

@@ -1,2 +1,2 @@
 import { QuantityPickerProps } from './QuantityPickerProps';
-export declare const QuantityPicker: ({ value, onChange, disabled, preventManualChange, disableIncrement, variation, name, min, max, }: QuantityPickerProps) => JSX.Element;
+export declare const QuantityPicker: ({ id, value, onChange, disabled, preventManualChange, disableIncrement, variation, name, min, max, incrementButtonTitle, decrementButtonTitle, }: QuantityPickerProps) => JSX.Element;

package/build/esm/components/QuantityPicker/QuantityPicker.js CHANGED Viewed

@@ -1,21 +1,79 @@
 import { TextField } from '@material-ui/core';
 import { IconButton, Icon } from '@popmenu/common-ui';
 import { MinusCircle, PlusCircle } from '@popmenu/web-icons';
-import React__default, { useRef, useState, useEffect } from 'react';
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
 import { useQuantityPickerStyles, useQuantityInputStyles, useStartAdornmentStyles, useEndAdornmentStyles } from './QuantityPicker.styles.js';
-const QuantityPicker = ({ value, onChange, disabled, preventManualChange, disableIncrement, variation, name, min = 0, max = 99, }) => {
+const LIVE_REGION_CLEAR_DELAY = 2000;
+const QuantityPicker = ({ id, value, onChange, disabled, preventManualChange, disableIncrement, variation, name, min = 0, max = 99, incrementButtonTitle, decrementButtonTitle, }) => {
     const fieldClasses = useQuantityPickerStyles();
     const inputClasses = useQuantityInputStyles({ variation, value });
     const startAdornmentClasses = useStartAdornmentStyles({ variation, value });
     const endAdornmentClasses = useEndAdornmentStyles({ variation, value });
     const inputRef = useRef(null);
     const [shouldSelect, setShouldSelect] = useState(false);
+    const [liveRegionMessage, setLiveRegionMessage] = useState('');
+    const liveRegionTimeoutRef = useRef(null);
+    // Clear the live region message after a delay to avoid stale announcements
+    const announceLiveRegion = useCallback((message) => {
+        if (liveRegionTimeoutRef.current) {
+            clearTimeout(liveRegionTimeoutRef.current);
+        }
+        setLiveRegionMessage(message);
+        liveRegionTimeoutRef.current = setTimeout(() => {
+            setLiveRegionMessage('');
+        }, LIVE_REGION_CLEAR_DELAY);
+    }, []);
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (liveRegionTimeoutRef.current) {
+                clearTimeout(liveRegionTimeoutRef.current);
+            }
+        };
+    }, []);
     const onIncrement = (event) => {
-        onChange(event, { quantity: value + 1, reason: 'increment' });
+        const newValue = value + 1;
+        onChange(event, { quantity: newValue, reason: 'increment' });
+        announceLiveRegion(String(newValue));
     };
     const onDecrement = (event) => {
-        onChange(event, { quantity: value - 1, reason: 'decrement' });
+        const newValue = value - 1;
+        onChange(event, { quantity: newValue, reason: 'decrement' });
+        announceLiveRegion(String(newValue));
+    };
+    const handleKeyDown = (event) => {
+        let newValue = null;
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                if (value < max && !disableIncrement) {
+                    newValue = value + 1;
+                    onChange(event, { quantity: newValue, reason: 'increment' });
+                }
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (value > min) {
+                    newValue = value - 1;
+                    onChange(event, { quantity: newValue, reason: 'decrement' });
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                if (value !== min) {
+                    newValue = min;
+                    onChange(event, { quantity: newValue, reason: 'decrement' });
+                }
+                break;
+            case 'End':
+                event.preventDefault();
+                if (value !== max && !disableIncrement) {
+                    newValue = max;
+                    onChange(event, { quantity: newValue, reason: 'increment' });
+                }
+                break;
+        }
     };
     const handleChange = (event) => {
         if (preventManualChange) {
@@ -44,18 +102,35 @@ const QuantityPicker = ({ value, onChange, disabled, preventManualChange, disabl
             setShouldSelect(false);
         }
     }, [shouldSelect, value]);
-    return (React__default.createElement(TextField, { "aria-label": `${name} Quantity`, classes: fieldClasses, type: "number", variant: variation === 'itemCount' ? 'filled' : 'standard', value: value, disabled: disabled, onChange: handleChange, inputRef: inputRef, InputProps: {
-            classes: inputClasses,
-            disableUnderline: true,
-            endAdornment: (React__default.createElement(IconButton, { "aria-label": `increase quantity ${name}`, className: endAdornmentClasses.root, color: "default", onClick: onIncrement, disabled: disabled || value >= max || disableIncrement },
-                React__default.createElement(Icon, { icon: PlusCircle }))),
-            startAdornment: (React__default.createElement(IconButton, { "aria-label": `decrease quantity ${name}`, className: startAdornmentClasses.root, color: "default", onClick: onDecrement, disabled: disabled || value <= min },
-                React__default.createElement(Icon, { icon: MinusCircle }))),
-        }, inputProps: {
-            'aria-label': `${name} quantity`,
-            min,
-            max,
-        } }));
+    const isAtMin = value <= min;
+    const isAtMax = value >= max || disableIncrement;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(TextField, { id: id, classes: fieldClasses, type: "text", variant: variation === 'itemCount' ? 'filled' : 'standard', value: value, disabled: disabled, onChange: handleChange, onKeyDown: handleKeyDown, inputRef: inputRef, InputProps: {
+                classes: inputClasses,
+                disableUnderline: true,
+                endAdornment: (React__default.createElement(IconButton, { title: incrementButtonTitle, "aria-controls": id, "aria-disabled": isAtMax || disabled, tabIndex: -1, className: endAdornmentClasses.root, color: "default", onClick: onIncrement, disabled: disabled || isAtMax },
+                    React__default.createElement(Icon, { icon: PlusCircle, "aria-hidden": "true" }))),
+                startAdornment: (React__default.createElement(IconButton, { title: decrementButtonTitle, "aria-controls": id, "aria-disabled": isAtMin || disabled, tabIndex: -1, className: startAdornmentClasses.root, color: "default", onClick: onDecrement, disabled: disabled || isAtMin },
+                    React__default.createElement(Icon, { icon: MinusCircle, "aria-hidden": "true" }))),
+            }, inputProps: {
+                role: 'spinbutton',
+                inputMode: 'numeric',
+                'aria-label': `${name} quantity`,
+                'aria-valuenow': value,
+                'aria-valuemin': min,
+                'aria-valuemax': max,
+            } }),
+        React__default.createElement("output", { "aria-live": "polite", style: {
+                position: 'absolute',
+                width: 1,
+                height: 1,
+                padding: 0,
+                margin: -1,
+                overflow: 'hidden',
+                clip: 'rect(0, 0, 0, 0)',
+                whiteSpace: 'nowrap',
+                border: 0,
+            } }, liveRegionMessage)));
 };
 export { QuantityPicker };

package/build/esm/components/QuantityPicker/QuantityPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QuantityPicker.js","sources":["../../../../src/components/QuantityPicker/QuantityPicker.tsx"],"sourcesContent":["import { TextField } from '@material-ui/core'\nimport { Icon, IconButton } from '@popmenu/common-ui'\nimport { MinusCircle, PlusCircle } from '@popmenu/web-icons'\nimport React, { ChangeEvent, MouseEventHandler, useEffect, useRef, useState } from 'react'\n\nimport {\n useEndAdornmentStyles,\n useQuantityInputStyles,\n useQuantityPickerStyles,\n useStartAdornmentStyles,\n} from './QuantityPicker.styles'\nimport { QuantityPickerProps } from './QuantityPickerProps'\n\nexport const QuantityPicker = ({\n value,\n onChange,\n disabled,\n preventManualChange,\n disableIncrement,\n variation,\n name,\n min = 0,\n max = 99,\n}: QuantityPickerProps): JSX.Element => {\n const fieldClasses = useQuantityPickerStyles()\n const inputClasses = useQuantityInputStyles({ variation, value })\n const startAdornmentClasses = useStartAdornmentStyles({ variation, value })\n const endAdornmentClasses = useEndAdornmentStyles({ variation, value })\n\n const inputRef = useRef<HTMLInputElement>(null)\n const [shouldSelect, setShouldSelect] = useState(false)\n\n const onIncrement: MouseEventHandler<HTMLButtonElement> = (event) => {\n onChange(event, { quantity: value + 1, reason: 'increment' })\n }\n\n const onDecrement: MouseEventHandler<HTMLButtonElement> = (event) => {\n onChange(event, { quantity: value - 1, reason: 'decrement' })\n }\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (preventManualChange) {\n event.preventDefault()\n return\n }\n let newValue = parseInt(event.target.value, 10)\n\n if (isNaN(newValue)) {\n newValue = min\n setShouldSelect(true)\n } else {\n setShouldSelect(false)\n }\n\n // Clamp value between min and max\n if (newValue < min) newValue = min\n if (newValue > max) newValue = max\n\n onChange(event, { quantity: newValue, reason: 'change' })\n }\n\n useEffect(() => {\n if (shouldSelect && inputRef.current) {\n inputRef.current.focus()\n inputRef.current.select()\n setShouldSelect(false)\n }\n }, [shouldSelect, value])\n\n return (\n <TextField\n aria-label={`${name} Quantity`}\n classes={fieldClasses}\n type=\"number\"\n variant={variation === 'itemCount' ? 'filled' : 'standard'}\n value={value}\n disabled={disabled}\n onChange={handleChange}\n inputRef={inputRef}\n InputProps={{\n classes: inputClasses,\n disableUnderline: true,\n endAdornment: (\n <IconButton\n aria-label={`increase quantity ${name}`}\n className={endAdornmentClasses.root}\n color=\"default\"\n onClick={onIncrement}\n disabled={disabled \|\| value >= max \|\| disableIncrement}\n >\n <Icon icon={PlusCircle} />\n </IconButton>\n ),\n startAdornment: (\n <IconButton\n aria-label={`decrease quantity ${name}`}\n className={startAdornmentClasses.root}\n color=\"default\"\n onClick={onDecrement}\n disabled={disabled \|\| value <= min}\n >\n <Icon icon={MinusCircle} />\n </IconButton>\n ),\n }}\n inputProps={{\n 'aria-label': `${name} quantity`,\n min,\n max,\n }}\n />\n )\n}\n"],"names":["React"],"mappings":";;;;;;AAaO,MAAM,cAAc,GAAG,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,EACT,IAAI,EACJ,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,EAAE,GACY,KAAiB;AACrC,IAAA,MAAM,YAAY,GAAG,uBAAuB,EAAE;IAC9C,MAAM,YAAY,GAAG,sBAAsB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;IACjE,MAAM,qBAAqB,GAAG,uBAAuB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;IAC3E,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AAEvE,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;IAC/C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEvD,IAAA,MAAM,WAAW,GAAyC,CAAC,KAAK,KAAI;AAClE,QAAA,QAAQ,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAC/D,KAAC;AAED,IAAA,MAAM,WAAW,GAAyC,CAAC,KAAK,KAAI;AAClE,QAAA,QAAQ,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAC/D,KAAC;AAED,IAAA,MAAM,YAAY,GAAG,CAAC,KAAoC,KAAI;QAC5D,IAAI,mBAAmB,EAAE;YACvB,KAAK,CAAC,cAAc,EAAE;YACtB;;AAEF,QAAA,IAAI,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC;AAE/C,QAAA,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE;YACnB,QAAQ,GAAG,GAAG;YACd,eAAe,CAAC,IAAI,CAAC;;aAChB;YACL,eAAe,CAAC,KAAK,CAAC;;;QAIxB,IAAI,QAAQ,GAAG,GAAG;YAAE,QAAQ,GAAG,GAAG;QAClC,IAAI,QAAQ,GAAG,GAAG;YAAE,QAAQ,GAAG,GAAG;AAElC,QAAA,QAAQ,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;AAC3D,KAAC;IAED,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,YAAY,IAAI,QAAQ,CAAC,OAAO,EAAE;AACpC,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE;AACxB,YAAA,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE;YACzB,eAAe,CAAC,KAAK,CAAC;;AAE1B,KAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IAEzB,QACEA,6BAAC,SAAS,EAAA,EAAA,YAAA,EACI,GAAG,IAAI,CAAA,SAAA,CAAW,EAC9B,OAAO,EAAE,YAAY,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,SAAS,KAAK,WAAW,GAAG,QAAQ,GAAG,UAAU,EAC1D,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE;AACV,YAAA,OAAO,EAAE,YAAY;AACrB,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,YAAY,GACVA,cAAC,CAAA,aAAA,CAAA,UAAU,EACG,EAAA,YAAA,EAAA,CAAA,kBAAA,EAAqB,IAAI,CAAA,CAAE,EACvC,SAAS,EAAE,mBAAmB,CAAC,IAAI,EACnC,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,IAAI,KAAK,IAAI,GAAG,IAAI,gBAAgB,EAAA;AAEtD,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAE,UAAU,EAAA,CAAI,CACf,CACd;AACD,YAAA,cAAc,GACZA,cAAC,CAAA,aAAA,CAAA,UAAU,EACG,EAAA,YAAA,EAAA,CAAA,kBAAA,EAAqB,IAAI,CAAA,CAAE,EACvC,SAAS,EAAE,qBAAqB,CAAC,IAAI,EACrC,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,IAAI,KAAK,IAAI,GAAG,EAAA;AAElC,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAE,WAAW,EAAA,CAAI,CAChB,CACd;AACF,SAAA,EACD,UAAU,EAAE;YACV,YAAY,EAAE,CAAG,EAAA,IAAI,CAAW,SAAA,CAAA;YAChC,GAAG;YACH,GAAG;AACJ,SAAA,EAAA,CACD;AAEN;;;;"}
1	+ {"version":3,"file":"QuantityPicker.js","sources":["../../../../src/components/QuantityPicker/QuantityPicker.tsx"],"sourcesContent":["import { TextField } from '@material-ui/core'\nimport { Icon, IconButton } from '@popmenu/common-ui'\nimport { MinusCircle, PlusCircle } from '@popmenu/web-icons'\nimport React, { ChangeEvent, KeyboardEvent, MouseEventHandler, useCallback, useEffect, useRef, useState } from 'react'\n\nimport {\n useEndAdornmentStyles,\n useQuantityInputStyles,\n useQuantityPickerStyles,\n useStartAdornmentStyles,\n} from './QuantityPicker.styles'\nimport { QuantityPickerProps } from './QuantityPickerProps'\n\nconst LIVE_REGION_CLEAR_DELAY = 2000\n\nexport const QuantityPicker = ({\n id,\n value,\n onChange,\n disabled,\n preventManualChange,\n disableIncrement,\n variation,\n name,\n min = 0,\n max = 99,\n incrementButtonTitle,\n decrementButtonTitle,\n}: QuantityPickerProps): JSX.Element => {\n const fieldClasses = useQuantityPickerStyles()\n const inputClasses = useQuantityInputStyles({ variation, value })\n const startAdornmentClasses = useStartAdornmentStyles({ variation, value })\n const endAdornmentClasses = useEndAdornmentStyles({ variation, value })\n\n const inputRef = useRef<HTMLInputElement>(null)\n const [shouldSelect, setShouldSelect] = useState(false)\n const [liveRegionMessage, setLiveRegionMessage] = useState('')\n const liveRegionTimeoutRef = useRef<ReturnType<typeof setTimeout> \| null>(null)\n\n // Clear the live region message after a delay to avoid stale announcements\n const announceLiveRegion = useCallback((message: string) => {\n if (liveRegionTimeoutRef.current) {\n clearTimeout(liveRegionTimeoutRef.current)\n }\n setLiveRegionMessage(message)\n liveRegionTimeoutRef.current = setTimeout(() => {\n setLiveRegionMessage('')\n }, LIVE_REGION_CLEAR_DELAY)\n }, [])\n\n // Cleanup timeout on unmount\n useEffect(() => {\n return () => {\n if (liveRegionTimeoutRef.current) {\n clearTimeout(liveRegionTimeoutRef.current)\n }\n }\n }, [])\n\n const onIncrement: MouseEventHandler<HTMLButtonElement> = (event) => {\n const newValue = value + 1\n onChange(event, { quantity: newValue, reason: 'increment' })\n announceLiveRegion(String(newValue))\n }\n\n const onDecrement: MouseEventHandler<HTMLButtonElement> = (event) => {\n const newValue = value - 1\n onChange(event, { quantity: newValue, reason: 'decrement' })\n announceLiveRegion(String(newValue))\n }\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n let newValue: number \| null = null\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault()\n if (value < max && !disableIncrement) {\n newValue = value + 1\n onChange(event, { quantity: newValue, reason: 'increment' })\n }\n break\n case 'ArrowDown':\n event.preventDefault()\n if (value > min) {\n newValue = value - 1\n onChange(event, { quantity: newValue, reason: 'decrement' })\n }\n break\n case 'Home':\n event.preventDefault()\n if (value !== min) {\n newValue = min\n onChange(event, { quantity: newValue, reason: 'decrement' })\n }\n break\n case 'End':\n event.preventDefault()\n if (value !== max && !disableIncrement) {\n newValue = max\n onChange(event, { quantity: newValue, reason: 'increment' })\n }\n break\n default:\n break\n }\n }\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (preventManualChange) {\n event.preventDefault()\n return\n }\n let newValue = parseInt(event.target.value, 10)\n\n if (isNaN(newValue)) {\n newValue = min\n setShouldSelect(true)\n } else {\n setShouldSelect(false)\n }\n\n // Clamp value between min and max\n if (newValue < min) newValue = min\n if (newValue > max) newValue = max\n\n onChange(event, { quantity: newValue, reason: 'change' })\n }\n\n useEffect(() => {\n if (shouldSelect && inputRef.current) {\n inputRef.current.focus()\n inputRef.current.select()\n setShouldSelect(false)\n }\n }, [shouldSelect, value])\n\n const isAtMin = value <= min\n const isAtMax = value >= max \|\| disableIncrement\n\n return (\n <>\n <TextField\n id={id}\n classes={fieldClasses}\n type=\"text\"\n variant={variation === 'itemCount' ? 'filled' : 'standard'}\n value={value}\n disabled={disabled}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n inputRef={inputRef}\n InputProps={{\n classes: inputClasses,\n disableUnderline: true,\n endAdornment: (\n <IconButton\n title={incrementButtonTitle}\n aria-controls={id}\n aria-disabled={isAtMax \|\| disabled}\n tabIndex={-1}\n className={endAdornmentClasses.root}\n color=\"default\"\n onClick={onIncrement}\n disabled={disabled \|\| isAtMax}\n >\n <Icon icon={PlusCircle} aria-hidden=\"true\" />\n </IconButton>\n ),\n startAdornment: (\n <IconButton\n title={decrementButtonTitle}\n aria-controls={id}\n aria-disabled={isAtMin \|\| disabled}\n tabIndex={-1}\n className={startAdornmentClasses.root}\n color=\"default\"\n onClick={onDecrement}\n disabled={disabled \|\| isAtMin}\n >\n <Icon icon={MinusCircle} aria-hidden=\"true\" />\n </IconButton>\n ),\n }}\n inputProps={{\n role: 'spinbutton',\n inputMode: 'numeric',\n 'aria-label': `${name} quantity`,\n 'aria-valuenow': value,\n 'aria-valuemin': min,\n 'aria-valuemax': max,\n }}\n />\n {/* Live region for announcing value changes when buttons are pressed */}\n <output\n aria-live=\"polite\"\n style={{\n position: 'absolute',\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n border: 0,\n }}\n >\n {liveRegionMessage}\n </output>\n </>\n )\n}\n"],"names":["React"],"mappings":"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"}