@popmenu/ordering-ui 0.147.0 → 0.149.0

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

@@ -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

@@ -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;;;;"}
+{"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

@@ -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

@@ -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

@@ -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;;;;"}
+{"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

@@ -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

@@ -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

@@ -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;;;;"}
+{"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

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

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

@@ -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

@@ -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;;;;"}
+{"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

@@ -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

@@ -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

@@ -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

@@ -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;;;;"}
+{"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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"}

package/build/esm/components/QuantityPicker/QuantityPicker.styles.js

@@ -4,6 +4,9 @@ const useQuantityPickerStyles = makeStyles((theme) => ({
     root: {
         height: theme.spacing(7),
         backgroundColor: 'none',
+        '&:has(:focus-visible)': {
+            outline: `2px solid ${theme.palette.info.main}`,
+        },
     },
 }));
 const useQuantityInputStyles = makeStyles((theme) => ({
@@ -19,15 +22,17 @@ const useQuantityInputStyles = makeStyles((theme) => ({
         },
         '-moz-appearance': 'textfield',
         fontWeight: 600,
-        padding: 0,
         textAlign: 'center',
         zIndex: (props) => (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1),
         backgroundColor: (props) => (props.variation === 'modifierCount' ? theme.palette.grey[100] : 'unset'),
         alignSelf: (props) => (props.variation === 'modifierCount' ? 'stretch' : 'unset'),
         height: (props) => (props.variation === 'modifierCount' ? 'auto' : 'unset'),
-        minWidth: (props) => (props.variation === 'modifierCount' ? theme.spacing(5) : theme.spacing(2.75)),
+        minHeight: theme.spacing(3),
+        minWidth: (props) => (props.variation === 'modifierCount' ? theme.spacing(5) : theme.spacing(3)),
         borderRadius: (props) => (props.variation === 'modifierCount' ? theme.spacing(1) : 'unset'),
-        margin: (props) => (props.variation === 'modifierCount' ? theme.spacing(0.5, 0) : 0),
+        margin: theme.spacing(1),
+        padding: 0,
+        outline: 'none !important',
     },
 }));
 const useStartAdornmentStyles = makeStyles((theme) => ({

package/build/esm/components/QuantityPicker/QuantityPicker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuantityPicker.styles.js","sources":["../../../../src/components/QuantityPicker/QuantityPicker.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { QuantityPickerProps } from './QuantityPickerProps'\n\nexport const useQuantityPickerStyles = makeStyles((theme) => ({\n  root: {\n    height: theme.spacing(7),\n    backgroundColor: 'none',\n  },\n}))\n\nexport const useQuantityInputStyles = makeStyles<Theme, Pick<QuantityPickerProps, 'variation' | 'value'>>((theme) => ({\n  root: {\n    height: '100%',\n    width: 'min-content',\n    borderRadius: theme.spacing(12.5),\n    background: (props) => (props.variation === 'modifierCount' ? 'unset' : theme.palette.grey[100]),\n  },\n  input: {\n    '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\n      display: 'none',\n    },\n    '-moz-appearance': 'textfield',\n    fontWeight: 600,\n    padding: 0,\n    textAlign: 'center',\n    zIndex: (props) => (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1),\n    backgroundColor: (props) => (props.variation === 'modifierCount' ? theme.palette.grey[100] : 'unset'),\n    alignSelf: (props) => (props.variation === 'modifierCount' ? 'stretch' : 'unset'),\n    height: (props) => (props.variation === 'modifierCount' ? 'auto' : 'unset'),\n    minWidth: (props) => (props.variation === 'modifierCount' ? theme.spacing(5) : theme.spacing(2.75)),\n    borderRadius: (props) => (props.variation === 'modifierCount' ? theme.spacing(1) : 'unset'),\n    margin: (props) => (props.variation === 'modifierCount' ? theme.spacing(0.5, 0) : 0),\n  },\n}))\n\nexport const useStartAdornmentStyles = makeStyles<Theme, Pick<QuantityPickerProps, 'variation' | 'value'>>((theme) => ({\n  root: {\n    color: theme.palette.text.primary,\n    zIndex: (props) => (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1),\n  },\n}))\n\nexport const useEndAdornmentStyles = makeStyles<Theme, Pick<QuantityPickerProps, 'variation' | 'value'>>((theme) => ({\n  root: {\n    color: theme.palette.text.primary,\n  },\n}))\n"],"names":[],"mappings":";;AAGa,MAAA,uBAAuB,GAAG,UAAU,CAAC,CAAC,KAAK,MAAM;AAC5D,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACxB,QAAA,eAAe,EAAE,MAAM;AACxB,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,sBAAsB,GAAG,UAAU,CAA0D,CAAC,KAAK,MAAM;AACpH,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QACjC,UAAU,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACjG,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,qFAAqF,EAAE;AACrF,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACD,QAAA,iBAAiB,EAAE,WAAW;AAC9B,QAAA,UAAU,EAAE,GAAG;AACf,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,SAAS,EAAE,QAAQ;QACnB,MAAM,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,KAAK,KAAK,CAAC,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,EAAE,GAAG,CAAC,CAAC;QACtF,eAAe,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC;QACrG,SAAS,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,SAAS,GAAG,OAAO,CAAC;QACjF,MAAM,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAC3E,QAAA,QAAQ,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACnG,YAAY,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC;QAC3F,MAAM,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;AACrF,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,uBAAuB,GAAG,UAAU,CAA0D,CAAC,KAAK,MAAM;AACrH,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;QACjC,MAAM,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,KAAK,KAAK,CAAC,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,EAAE,GAAG,CAAC,CAAC;AACvF,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,qBAAqB,GAAG,UAAU,CAA0D,CAAC,KAAK,MAAM;AACnH,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;AAClC,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"QuantityPicker.styles.js","sources":["../../../../src/components/QuantityPicker/QuantityPicker.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { QuantityPickerProps } from './QuantityPickerProps'\n\nexport const useQuantityPickerStyles = makeStyles((theme) => ({\n  root: {\n    height: theme.spacing(7),\n    backgroundColor: 'none',\n    '&:has(:focus-visible)': {\n      outline: `2px solid ${theme.palette.info.main}`,\n    },\n  },\n}))\n\nexport const useQuantityInputStyles = makeStyles<Theme, Pick<QuantityPickerProps, 'variation' | 'value'>>((theme) => ({\n  root: {\n    height: '100%',\n    width: 'min-content',\n    borderRadius: theme.spacing(12.5),\n    background: (props) => (props.variation === 'modifierCount' ? 'unset' : theme.palette.grey[100]),\n  },\n  input: {\n    '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\n      display: 'none',\n    },\n    '-moz-appearance': 'textfield',\n    fontWeight: 600,\n    textAlign: 'center',\n    zIndex: (props) => (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1),\n    backgroundColor: (props) => (props.variation === 'modifierCount' ? theme.palette.grey[100] : 'unset'),\n    alignSelf: (props) => (props.variation === 'modifierCount' ? 'stretch' : 'unset'),\n    height: (props) => (props.variation === 'modifierCount' ? 'auto' : 'unset'),\n    minHeight: theme.spacing(3),\n    minWidth: (props) => (props.variation === 'modifierCount' ? theme.spacing(5) : theme.spacing(3)),\n    borderRadius: (props) => (props.variation === 'modifierCount' ? theme.spacing(1) : 'unset'),\n    margin: theme.spacing(1),\n    padding: 0,\n    outline: 'none !important',\n  },\n}))\n\nexport const useStartAdornmentStyles = makeStyles<Theme, Pick<QuantityPickerProps, 'variation' | 'value'>>((theme) => ({\n  root: {\n    color: theme.palette.text.primary,\n    zIndex: (props) => (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1),\n  },\n}))\n\nexport const useEndAdornmentStyles = makeStyles<Theme, Pick<QuantityPickerProps, 'variation' | 'value'>>((theme) => ({\n  root: {\n    color: theme.palette.text.primary,\n  },\n}))\n"],"names":[],"mappings":";;AAGa,MAAA,uBAAuB,GAAG,UAAU,CAAC,CAAC,KAAK,MAAM;AAC5D,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACxB,QAAA,eAAe,EAAE,MAAM;AACvB,QAAA,uBAAuB,EAAE;YACvB,OAAO,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAE,CAAA;AAChD,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,sBAAsB,GAAG,UAAU,CAA0D,CAAC,KAAK,MAAM;AACpH,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QACjC,UAAU,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACjG,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,qFAAqF,EAAE;AACrF,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACD,QAAA,iBAAiB,EAAE,WAAW;AAC9B,QAAA,UAAU,EAAE,GAAG;AACf,QAAA,SAAS,EAAE,QAAQ;QACnB,MAAM,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,KAAK,KAAK,CAAC,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,EAAE,GAAG,CAAC,CAAC;QACtF,eAAe,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC;QACrG,SAAS,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,SAAS,GAAG,OAAO,CAAC;QACjF,MAAM,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAC3E,QAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC3B,QAAA,QAAQ,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAChG,YAAY,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC;AAC3F,QAAA,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACxB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,OAAO,EAAE,iBAAiB;AAC3B,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,uBAAuB,GAAG,UAAU,CAA0D,CAAC,KAAK,MAAM;AACrH,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;QACjC,MAAM,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,KAAK,KAAK,CAAC,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,EAAE,GAAG,CAAC,CAAC;AACvF,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,qBAAqB,GAAG,UAAU,CAA0D,CAAC,KAAK,MAAM;AACnH,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;AAClC,KAAA;AACF,CAAA,CAAC;;;;"}

package/build/esm/components/QuantityPicker/QuantityPickerProps.d.ts

@@ -4,8 +4,10 @@ export type QuantityChangeEvent = {
     reason: string;
 };
 export interface QuantityPickerProps {
+    /** Unique ID for the spinbutton input - required for aria-controls on buttons */
+    id: string;
     /** Callback for when the quantity is increased or decreased for the parent form  */
-    onChange: (event: ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>, change: QuantityChangeEvent) => void;
+    onChange: (event: ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLInputElement>, change: QuantityChangeEvent) => void;
     /** the quantity represented by the picker */
     value: number;
     /** determines if picker is active */
@@ -22,4 +24,8 @@ export interface QuantityPickerProps {
     variation: 'itemCount' | 'modifierCount';
     /** name of the modifier the quantity picker is assigned to */
     name: string;
+    /** Accessible title for the increment button (e.g., "Add adult") - used for i18n */
+    incrementButtonTitle: string;
+    /** Accessible title for the decrement button (e.g., "Remove adult") - used for i18n */
+    decrementButtonTitle: string;
 }