@shopgate/engage 7.32.0-beta.8 → 7.32.0-beta.9

package/account/components/Profile/Profile.provider.d.ts

@@ -37,8 +37,8 @@ declare const _default: import("react-redux").ConnectedComponent<{
         formContainerRef: null;
     };
 }, {
-    children: NonNullable<PropTypes.ReactNodeLike>;
     push: (...args: any[]) => any;
+    children: NonNullable<PropTypes.ReactNodeLike>;
     userLocation: NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
     fetchContacts: (...args: any[]) => any;
     deleteContact: (...args: any[]) => any;

package/admin-preview/components/FrontendSettingsPreviewBridge/FrontendSettingsPreviewBridge.js

@@ -47,7 +47,7 @@ const FrontendSettingsPreviewBridge = () => {
 
       // setMode rejects unsupported schemes as well, but this message arrives from another origin,
       // so it is worth naming the admin as the source of the bad value. The `colorScheme` guard also
-      // narrows away the defensive `undefined`, so `modes.includes` and `setMode` typecheck strictly.
+      // narrows away the defensive `undefined`, so the check and `setMode` typecheck strictly.
       if (!colorScheme || !modes.includes(colorScheme)) {
         logger.warn(`FrontendSettingsPreviewBridge: received unsupported color scheme "${colorScheme}"`);
         return;

package/cart/components/CartItem/CartItemQuantityPicker.js

@@ -8,6 +8,7 @@ const useStyles = makeStyles()(theme => ({
   inputStyle: {
     border: 'none',
     background: theme.palette.background.emphasized,
+    color: theme.contrastColor(theme.palette.background.emphasized),
     display: 'block',
     fontSize: theme.typography.caption.fontSize,
     textAlign: 'center',

package/components/Badge/spec.js

@@ -2,46 +2,23 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 // Loaded at runtime by utils/unit-tests/envSetup.js; imported here for the matcher types.
 import '@testing-library/jest-dom';
-import { ThemeProvider, createTheme } from '@shopgate/engage/styles';
 import Badge from "./Badge";
-
-// ThemeProvider resolves the active breakpoint via matchMedia, which jsdom doesn't implement.
 import { jsx as _jsx } from "react/jsx-runtime";
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: query => ({
-    matches: false,
-    media: query,
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn()
-  })
-});
-const theme = createTheme();
-
-/**
- * Renders the subject within a theme context.
- * @param ui The element to render.
- * @returns The render result.
- */
-const renderWithTheme = ui => render(/*#__PURE__*/_jsx(ThemeProvider, {
-  theme: theme,
-  children: ui
-}));
 describe('<Badge />', () => {
   it('should render the count', () => {
-    renderWithTheme(/*#__PURE__*/_jsx(Badge, {
+    render(/*#__PURE__*/_jsx(Badge, {
       count: 3
     }));
     expect(screen.getByText('3')).toBeInTheDocument();
   });
   it('should render nothing when the count is zero', () => {
-    renderWithTheme(/*#__PURE__*/_jsx(Badge, {
+    render(/*#__PURE__*/_jsx(Badge, {
       count: 0
     }));
     expect(screen.queryByText('0')).not.toBeInTheDocument();
   });
   it('should cap the count at max', () => {
-    renderWithTheme(/*#__PURE__*/_jsx(Badge, {
+    render(/*#__PURE__*/_jsx(Badge, {
       count: 6,
       max: 5
     }));
@@ -49,14 +26,14 @@ describe('<Badge />', () => {
     expect(screen.queryByText('6')).not.toBeInTheDocument();
   });
   it('should render the exact count when it equals max', () => {
-    renderWithTheme(/*#__PURE__*/_jsx(Badge, {
+    render(/*#__PURE__*/_jsx(Badge, {
       count: 5,
       max: 5
     }));
     expect(screen.getByText('5')).toBeInTheDocument();
   });
   it('should render an empty bubble when showCount is false', () => {
-    renderWithTheme(/*#__PURE__*/_jsx(Badge, {
+    render(/*#__PURE__*/_jsx(Badge, {
       count: 7,
       showCount: false
     }));
@@ -64,7 +41,7 @@ describe('<Badge />', () => {
     expect(document.querySelector('.theme__badge')).toBeInTheDocument();
   });
   it('should apply the shared badge class so themes can target it', () => {
-    renderWithTheme(/*#__PURE__*/_jsx(Badge, {
+    render(/*#__PURE__*/_jsx(Badge, {
       count: 1,
       className: "custom-position"
     }));

package/components/NavigationHandler/index.d.ts

@@ -1,15 +1,15 @@
 declare const _default: import("react-redux").ConnectedComponent<typeof NavigationHandler, {
-    children: NonNullable<PropTypes.ReactNodeLike>;
     pop?: ((...args: any[]) => any) | null | undefined;
     push?: ((...args: any[]) => any) | null | undefined;
+    children: NonNullable<PropTypes.ReactNodeLike>;
     reset?: ((...args: any[]) => any) | null | undefined;
     replace?: ((...args: any[]) => any) | null | undefined;
     context?: import("react-redux/es/components/Context").ReactReduxContextInstance | undefined;
     store?: import("redux").Store | undefined;
 } | {
-    children: NonNullable<PropTypes.ReactNodeLike>;
     pop?: ((...args: any[]) => any) | null | undefined;
     push?: ((...args: any[]) => any) | null | undefined;
+    children: NonNullable<PropTypes.ReactNodeLike>;
     reset?: ((...args: any[]) => any) | null | undefined;
     replace?: ((...args: any[]) => any) | null | undefined;
     store?: import("redux").Store | undefined;

package/components/Paper/spec.js

@@ -1,28 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { ThemeProvider, createTheme } from '@shopgate/engage/styles';
 import Paper from "./Paper";
 
-// ThemeProvider resolves the active breakpoint via matchMedia, which jsdom doesn't implement.
-import { jsx as _jsx } from "react/jsx-runtime";
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: query => ({
-    matches: false,
-    media: query,
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn()
-  })
-});
-const theme = createTheme();
-const renderWithTheme = ui => render(/*#__PURE__*/_jsx(ThemeProvider, {
-  theme: theme,
-  children: ui
-}));
-
 // tss keeps injected rules in the document across tests, so assertions have to be scoped to the
 // element under test — a global sweep would also match rules another test left behind.
+import { jsx as _jsx } from "react/jsx-runtime";
 const styleTextFor = element => Array.from(document.styleSheets).flatMap(sheet => {
   try {
     return Array.from(sheet.cssRules);
@@ -31,12 +14,12 @@ const styleTextFor = element => Array.from(document.styleSheets).flatMap(sheet =
   }
 }).filter(rule => rule instanceof CSSStyleRule && element.matches(rule.selectorText)).map(rule => rule.cssText).join('');
 const renderPaper = ui => {
-  renderWithTheme(ui);
+  render(ui);
   return styleTextFor(screen.getByTestId('paper'));
 };
 describe('<Paper />', () => {
   it('renders children and the engage__paper class next to a caller className', () => {
-    renderWithTheme(/*#__PURE__*/_jsx(Paper, {
+    render(/*#__PURE__*/_jsx(Paper, {
       className: "custom",
       "data-testid": "paper",
       children: "content"
@@ -47,7 +30,7 @@ describe('<Paper />', () => {
     expect(el).toHaveClass('custom');
   });
   it('renders as the given component', () => {
-    renderWithTheme(/*#__PURE__*/_jsx(Paper, {
+    render(/*#__PURE__*/_jsx(Paper, {
       component: "section",
       "data-testid": "paper",
       children: "x"
@@ -55,7 +38,7 @@ describe('<Paper />', () => {
     expect(screen.getByTestId('paper').tagName).toBe('SECTION');
   });
   it('passes data attributes through to the element', () => {
-    renderWithTheme(/*#__PURE__*/_jsx(Paper, {
+    render(/*#__PURE__*/_jsx(Paper, {
       "data-testid": "paper",
       "data-foo": "bar",
       children: "x"

package/components/Typography/Typography.d.ts

@@ -9,7 +9,7 @@ declare const useStyles: (params: void, muiStyleOverridesParams?: {
     props: Record<string, unknown>;
     ownerState?: Record<string, unknown> | undefined;
 } | undefined) => {
-    classes: Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "root" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "fontWeightLight" | "fontWeightRegular" | "fontWeightMedium" | "fontWeightBold" | "gutterBottom" | "noWrap" | "paragraph" | "srOnly" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "colorInherit" | "colorPrimary" | "colorSecondary" | "colorTextPrimary" | "colorTextSecondary" | "colorError" | "colorWarning" | "colorSuccess" | "displayInline" | "displayBlock", string>;
+    classes: Record<"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | "root" | "fontWeightLight" | "fontWeightRegular" | "fontWeightMedium" | "fontWeightBold" | "gutterBottom" | "noWrap" | "paragraph" | "srOnly" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "colorInherit" | "colorPrimary" | "colorSecondary" | "colorTextPrimary" | "colorTextSecondary" | "colorError" | "colorWarning" | "colorSuccess" | "displayInline" | "displayBlock", string>;
     theme: import("@shopgate/engage/styles").Theme;
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;

package/components/v2/Button/Button.d.ts

@@ -5,7 +5,7 @@ declare const useStyles: (params: ButtonOwnProps, muiStyleOverridesParams?: {
     props: Record<string, unknown>;
     ownerState?: Record<string, unknown> | undefined;
 } | undefined) => {
-    classes: Record<"text" | "icon" | "small" | "large" | "label" | "link" | "root" | "disabled" | "dense" | "denseSmall" | "denseLarge" | "outlined" | "contained" | "enableElevation" | "fullWidth" | "startIcon" | "endIcon" | "loader" | "loadingPlaceholder" | "loadingIndicator", string>;
+    classes: Record<"small" | "large" | "text" | "icon" | "label" | "link" | "root" | "disabled" | "dense" | "denseSmall" | "denseLarge" | "outlined" | "contained" | "enableElevation" | "fullWidth" | "startIcon" | "endIcon" | "loader" | "loadingPlaceholder" | "loadingIndicator", string>;
     theme: import("@shopgate/engage/styles").Theme;
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;

package/components/v2/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../components/v2/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAGrE,OAAO,KAAK,EAAsB,eAAe,EAAE,MAAM,eAAe,CAAC;AAsHzE,QAAA,MAAM,SAAS;;cAlBI,CAAC;;;;;;CAgSlB,CAAC;AAEH,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IACrD;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,qBAAqB,GAAG,SAAS,GAAG,KAAK,CAAC;IAClD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;CAC5D;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAC5D,cAAc,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;wBAON,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EACrE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;CAAE,KACpE,KAAK,CAAC,YAAY,GAAG,IAAI;AAF9B,wBAE+B"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../components/v2/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAGrE,OAAO,KAAK,EAAsB,eAAe,EAAE,MAAM,eAAe,CAAC;AAsIzE,QAAA,MAAM,SAAS;;cAlCI,CAAC;;;;;;CAkVlB,CAAC;AAEH,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IACrD;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,qBAAqB,GAAG,SAAS,GAAG,KAAK,CAAC;IAClD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;CAC5D;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAC5D,cAAc,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;wBAON,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EACrE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;CAAE,KACpE,KAAK,CAAC,YAAY,GAAG,IAAI;AAF9B,wBAE+B"}

package/components/v2/Button/Button.js

@@ -105,6 +105,22 @@ function Button(props, ref) {
     })
   });
 }
+
+/**
+ * Opacity of the overlay that the text and outlined variants tint themselves with on hover. The
+ * dark scheme needs more of it: the overlay takes the color of the label, and a light tint over a
+ * dark surface reads as a far smaller change than a dark tint over a light one.
+ */
+const HOVER_OVERLAY_OPACITY = 0.1;
+const HOVER_OVERLAY_OPACITY_DARK = 0.28;
+
+/**
+ * Opacity the outlined border rests at, leaving it somewhere to go on hover where it returns to the
+ * full color. The dark scheme keeps more of it: fading toward a dark backdrop cuts the brightness
+ * of the border, where fading toward a light one mostly cuts its saturation.
+ */
+const OUTLINED_BORDER_OPACITY = 0.5;
+const OUTLINED_BORDER_OPACITY_DARK = 0.7;
 const useStyles = makeStyles({
   name: 'Button'
 })((theme, props) => {
@@ -118,6 +134,7 @@ const useStyles = makeStyles({
   } = props;
   let cssColor = '';
   let contrastText = '';
+  let darkCssColor = '';
   if (color === 'cta') {
     // The call to action color is not part of the palette. It's a component token so that merchants
     // can configure it separately from the primary color via `--color-button-cta`.
@@ -127,8 +144,12 @@ const useStyles = makeStyles({
     cssColor = color && theme.palette?.[color]?.main ? theme.palette[color].main : theme.palette.primary.main;
     contrastText = color && theme.palette?.[color]?.contrastText ? theme.palette[color].contrastText : theme.palette.primary.contrastText;
   } else if (variant === 'contained') {
+    // The numeric grey scale is absolute rather than per scheme, so it stays light in both. The
+    // light value is kept as it is and only the dark scheme swaps in a surface that its inherited
+    // text color can be read on.
     // eslint-disable-next-line prefer-destructuring
     cssColor = theme.palette.grey[200];
+    darkCssColor = theme.palette.background.emphasized;
     contrastText = 'inherit';
   } else {
     cssColor = 'currentColor';
@@ -141,12 +162,20 @@ const useStyles = makeStyles({
       // turn these into `var(undefined, ...)`.
       '--button-color': `var(${theme.vars.components.button.color}, ${cssColor})`,
       '--text-color': `var(${theme.vars.components.button.textColor}, ${contrastText})`,
+      // A single `applyStyles` call for the whole scheme. A second one would land on the same
+      // object key and quietly replace this one.
+      ...theme.applyStyles('dark', {
+        ...(darkCssColor ? {
+          '--button-color': `var(${theme.vars.components.button.color}, ${darkCssColor})`
+        } : {}),
+        '--variant-outlinedBorder': theme.alpha('var(--button-color)', OUTLINED_BORDER_OPACITY_DARK)
+      }),
       '--border-radius': theme.components.button.borderRadius,
       '--font-size': theme.typography.button.fontSize,
       '--variant-textColor': 'var(--button-color)',
       '--variant-textDisabledColor': theme.palette.action.disabled,
       '--variant-outlinedColor': 'var(--button-color)',
-      '--variant-outlinedBorder': 'var(--button-color)',
+      '--variant-outlinedBorder': theme.alpha('var(--button-color)', OUTLINED_BORDER_OPACITY),
       '--variant-outlinedDisabledColor': theme.palette.action.disabled,
       '--variant-outlinedDisabledBorder': theme.palette.action.disabled,
       '--variant-containedColor': 'var(--text-color)',
@@ -166,16 +195,31 @@ const useStyles = makeStyles({
       }),
       borderRadius: 'var(--border-radius)',
       '&:hover': {
-        '--variant-textBg': theme.alpha(cssColor, 0.1),
-        '--variant-outlinedBg': theme.alpha(cssColor, 0.1),
         textDecoration: 'none',
-        '&:disabled, &[aria-disabled="true"]': {
-          backgroundColor: 'transparent'
-        },
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
+      },
+      // A disabled button keeps taking pointer events so that it can show a not-allowed cursor,
+      // which leaves it matching `:hover`. Its hover backgrounds stay unset instead, so the colors
+      // the variants give it while disabled are what remains visible.
+      '&:hover:not(:disabled):not([aria-disabled="true"])': {
+        '--variant-textBg': theme.alpha(cssColor, HOVER_OVERLAY_OPACITY),
+        '--variant-outlinedBg': theme.alpha(cssColor, HOVER_OVERLAY_OPACITY),
+        // The resting border sits at a fraction of the color, so hover brings it back to the full
+        // one. The root transition covers `border`, which carries the change over.
+        '--variant-outlinedBorder': 'var(--button-color)',
+        ...theme.applyStyles('dark', {
+          '--variant-textBg': theme.alpha(cssColor, HOVER_OVERLAY_OPACITY_DARK),
+          '--variant-outlinedBg': theme.alpha(cssColor, HOVER_OVERLAY_OPACITY_DARK)
+        }),
+        '@media (hover: none)': {
+          '--variant-outlinedBorder': theme.alpha('var(--button-color)', OUTLINED_BORDER_OPACITY),
+          ...theme.applyStyles('dark', {
+            '--variant-outlinedBorder': theme.alpha('var(--button-color)', OUTLINED_BORDER_OPACITY_DARK)
+          })
+        }
       }
     },
     small: {
@@ -203,7 +247,9 @@ const useStyles = makeStyles({
       border: 0,
       textTransform: 'none',
       color: 'var(--variant-textColor)',
-      '&:active': {
+      // Scoped like the hover backgrounds are: a disabled button stays hit testable for its
+      // not-allowed cursor, so it would otherwise dim on press like an operable one.
+      '&:active:not(:disabled):not([aria-disabled="true"])': {
         opacity: 0.5
       },
       '&:disabled, &[aria-disabled="true"]': {

package/components/v2/ButtonBase/ButtonBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAOrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAkO5E,QAAA,MAAM,SAAS;;cAjJF,CAAC;;;;;;CAmLZ,CAAC;AAEH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ;IACxE;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAChE,kBAAkB,CAAC,CAAC,CAAC,GACrB,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;wBAQhC,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EACzE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;CAAE,KACxE,KAAK,CAAC,YAAY,GAAG,IAAI;AAF9B,wBAE+B"}
+{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAOrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AA0Q5E,QAAA,MAAM,SAAS;;cArLJ,CAAC;;;;;;CAuNV,CAAC;AAEH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ;IACxE;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAChE,kBAAkB,CAAC,CAAC,CAAC,GACrB,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;wBAQhC,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EACzE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;CAAE,KACxE,KAAK,CAAC,YAAY,GAAG,IAAI;AAF9B,wBAE+B"}

package/components/v2/ButtonBase/ButtonBase.js

@@ -12,6 +12,23 @@ import { usePressRipple } from "./hooks";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const supportedButtonTypes = ['button', 'submit', 'reset'];
 
+/**
+ * Whether a pointer position sits within the bounds of an element.
+ * @param element The element to measure.
+ * @param clientX Horizontal position of the pointer.
+ * @param clientY Vertical position of the pointer.
+ * @returns Whether the position is inside the element.
+ */
+const containsPoint = (element, clientX, clientY) => {
+  const {
+    top,
+    right,
+    bottom,
+    left
+  } = element.getBoundingClientRect();
+  return clientX >= left && clientX <= right && clientY >= top && clientY <= bottom;
+};
+
 /**
  * Props read off the resolved element rather than declared on `ButtonBaseOwnProps`. Typed loosely
  * because the element type is generic - `React.ComponentPropsWithRef<C>` keeps consumers exact.
@@ -114,6 +131,15 @@ function ButtonBase(props, ref) {
       event.preventDefault();
       return;
     }
+
+    // The pointer capture taken on pointer down redirects the release to this element, so a pointer
+    // that went up somewhere else still arrives here as a click. Without the capture the browser
+    // would have dropped it. Keyboard activation reports no button presses and carries no position,
+    // so it never takes this path.
+    if (event.detail > 0 && !containsPoint(event.currentTarget, event.clientX, event.clientY)) {
+      event.preventDefault();
+      return;
+    }
     onClick?.(event);
     if (!href || event.defaultPrevented) {
       return;
@@ -136,7 +162,10 @@ function ButtonBase(props, ref) {
     event.currentTarget.click();
   };
   const handlePointerDown = event => {
-    if (!disabled && !disableRipple) {
+    if (disabled) {
+      return;
+    }
+    if (!disableRipple) {
       event.currentTarget.setPointerCapture?.(event.pointerId);
       start(event);
     }
@@ -159,6 +188,9 @@ function ButtonBase(props, ref) {
     if (!disableRipple) {
       end(event.pointerId);
     }
+    if (disabled) {
+      return;
+    }
     onPointerUp?.(event);
   };
   const handlePointerCancel = event => {
@@ -166,6 +198,9 @@ function ButtonBase(props, ref) {
     if (!disableRipple) {
       end(event.pointerId);
     }
+    if (disabled) {
+      return;
+    }
     onPointerCancel?.(event);
   };
 
@@ -183,6 +218,9 @@ function ButtonBase(props, ref) {
     if (!disableRipple && event.buttons === 1) {
       end(event.pointerId);
     }
+    if (disabled) {
+      return;
+    }
     onPointerLeave?.(event);
   };
   return /*#__PURE__*/_jsxs(Component, {

package/components/v2/ButtonGroup/ButtonGroup.d.ts

@@ -8,7 +8,7 @@ declare const useStyles: (params: Omit<ButtonGroupOwnProps, "children">, muiStyl
     props: Record<string, unknown>;
     ownerState?: Record<string, unknown> | undefined;
 } | undefined) => {
-    classes: Record<"root" | "disabled" | "enableElevation" | "fullWidth" | "vertical" | "grouped" | "groupedHorizontal" | "groupedVertical" | "groupedContained" | "groupedContainedHorizontal" | "groupedContainedVertical" | "groupedOutlined" | "groupedOutlinedHorizontal" | "groupedOutlinedVertical" | "groupedText" | "groupedTextHorizontal" | "groupedTextVertical", string>;
+    classes: Record<"root" | "disabled" | "vertical" | "enableElevation" | "fullWidth" | "grouped" | "groupedHorizontal" | "groupedVertical" | "groupedContained" | "groupedContainedHorizontal" | "groupedContainedVertical" | "groupedOutlined" | "groupedOutlinedHorizontal" | "groupedOutlinedVertical" | "groupedText" | "groupedTextHorizontal" | "groupedTextVertical", string>;
     theme: import("@shopgate/engage/styles").Theme;
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;

package/components/v2/ButtonGroup/ButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAErE;;GAEG;AACH,QAAA,MAAM,WAAW,mIAsEf,CAAC;AAEH,QAAA,MAAM,SAAS;;cAqCX,CAAJ;;;;;;CAiGE,CAAC;AAEH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5C;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,qBAAqB,GAAG,SAAS,GAAG,KAAK,CAAC;IAClD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAIzF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAErE;;GAEG;AACH,QAAA,MAAM,WAAW,mIAsEf,CAAC;AAQH,QAAA,MAAM,SAAS;;cAyB8B,CAAC;;;;;;CAqH5C,CAAC;AAEH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5C;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,qBAAqB,GAAG,SAAS,GAAG,KAAK,CAAC;IAClD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAIzF,eAAe,WAAW,CAAC"}

package/components/v2/ButtonGroup/ButtonGroup.js

@@ -70,6 +70,12 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
     })
   });
 });
+
+/**
+ * Opacity the separator between grouped text buttons defaults to. Published as a custom property
+ * below, so the value is not baked into the border declarations.
+ */
+const SEPARATOR_OPACITY = '0.5';
 const useStyles = makeStyles({
   name: 'ButtonGroup'
 })((theme, props) => {
@@ -78,6 +84,7 @@ const useStyles = makeStyles({
     variant
   } = props;
   let cssColor = '';
+  let darkCssColor = '';
   if (color === 'cta') {
     cssColor = theme.components.ctaButton.background;
   } else if (color !== 'inherit') {
@@ -85,13 +92,21 @@ const useStyles = makeStyles({
   } else if (variant === 'contained') {
     // eslint-disable-next-line prefer-destructuring
     cssColor = theme.palette.grey[200];
+    darkCssColor = theme.palette.background.emphasized;
   } else {
     cssColor = 'currentColor';
   }
   return {
     root: {
       '--button-group-color': `var(${theme.vars.components.button.color}, ${cssColor})`,
+      '--button-group-divider': theme.darken('var(--button-group-color)'),
+      ...(darkCssColor ? theme.applyStyles('dark', {
+        '--button-group-color': `var(${theme.vars.components.button.color}, ${darkCssColor})`,
+        '--button-group-divider': theme.lighten('var(--button-group-color)')
+      }) : {}),
       '--disabledColor': theme.palette.action.disabled,
+      '--button-group-separator-opacity': SEPARATOR_OPACITY,
+      '--button-group-separator': theme.alpha('var(--button-group-color)', 'var(--button-group-separator-opacity)'),
       display: 'inline-flex',
       borderRadius: theme.components.button.borderRadius
     },
@@ -136,7 +151,7 @@ const useStyles = makeStyles({
       '&:not(:last-of-type)': {
         borderRightWidth: 1,
         borderRightStyle: 'solid',
-        borderRightColor: theme.darken('var(--button-group-color)'),
+        borderRightColor: 'var(--button-group-divider)',
         '&:disabled, &[aria-disabled="true"]': {
           borderRightColor: 'var(--disabledColor)'
         }
@@ -146,17 +161,13 @@ const useStyles = makeStyles({
       '&:not(:last-of-type)': {
         borderBottomWidth: 1,
         borderBottomStyle: 'solid',
-        borderBottomColor: theme.darken('var(--button-group-color)'),
+        borderBottomColor: 'var(--button-group-divider)',
         '&:disabled, &[aria-disabled="true"]': {
           borderBottomColor: 'var(--disabledColor)'
         }
       }
     },
     groupedOutlined: {
-      borderColor: `${theme.lighten('var(--button-group-color)', 0.5)} !important`,
-      '&:hover': {
-        borderColor: 'var(--button-group-color)'
-      },
       '&:disabled, &[aria-disabled="true"]': {
         borderColor: 'var(--disabledColor) !important'
       }
@@ -184,7 +195,7 @@ const useStyles = makeStyles({
       '&&:not(:last-of-type)': {
         borderRightWidth: 1,
         borderRightStyle: 'solid',
-        borderRightColor: `${theme.lighten('var(--button-group-color)', 0.5)}`,
+        borderRightColor: 'var(--button-group-separator)',
         '&:disabled, &[aria-disabled="true"]': {
           borderRightColor: 'var(--disabledColor)'
         }
@@ -194,7 +205,7 @@ const useStyles = makeStyles({
       '&&:not(:last-of-type)': {
         borderBottomWidth: 1,
         borderBottomStyle: 'solid',
-        borderBottomColor: `${theme.lighten('var(--button-group-color)', 0.5)}`,
+        borderBottomColor: 'var(--button-group-separator)',
         '&:disabled, &[aria-disabled="true"]': {
           borderBottomColor: 'var(--disabledColor)'
         }

package/locations/components/StoreList/StoreListSearch.js

@@ -76,6 +76,7 @@ const useStyles = makeStyles()(theme => ({
   },
   input: {
     margin: '3px 0',
+    color: theme.palette.text.primary,
     width: '100%',
     lineHeight: '28px',
     outline: 'none',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.32.0-beta.8",
+  "version": "7.32.0-beta.9",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -18,12 +18,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.34",
-    "@shopgate/pwa-common": "7.32.0-beta.8",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.8",
-    "@shopgate/pwa-core": "7.32.0-beta.8",
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.8",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.8",
-    "@shopgate/pwa-ui-shared": "7.32.0-beta.8",
+    "@shopgate/pwa-common": "7.32.0-beta.9",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.9",
+    "@shopgate/pwa-core": "7.32.0-beta.9",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.9",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.9",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.9",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",

package/product/components/ProductCard/index.js

@@ -19,7 +19,13 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.components.productCard.imagePadding
   },
   details: {
-    padding: theme.components.productCard.textPadding
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    padding: theme.components.productCard.textPadding,
+    '& div:empty': {
+      display: 'none'
+    }
   },
   title: {
     fontSize: theme.typography.body2.fontSize,

package/product/components/ProductGrid/components/Item/components/ItemDetails/index.js

@@ -11,6 +11,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 const useStyles = makeStyles()(theme => ({
   root: {
     lineHeight: 1.2,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(0.5),
     ':not(:empty)': {
       padding: theme.components.tiles.textPadding,
       // Floored at the favorites button overhang so a small configured inner padding
@@ -19,7 +22,9 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   quantityHint: {
-    paddingTop: 8
+    ':empty': {
+      display: 'none'
+    }
   }
 }));
 

package/product/components/ProductGrid/components/Layout/index.js

@@ -9,7 +9,8 @@ const useStyles = makeStyles()((theme, {
   root: {
     padding: '0 16px',
     ':not(:empty)': {
-      marginTop: 16
+      marginTop: 16,
+      marginBottom: 16
     },
     ...(columns <= 2 ? {
       rowGap: 16,

package/product/components/ProductGridPrice/index.js

@@ -7,7 +7,6 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   priceWrapper: {
-    marginTop: 4,
     alignItems: 'center'
   },
   strikedPrice: {

package/product/components/ProductSlider/index.js

@@ -9,7 +9,7 @@ import { WIDGET_ID } from "./constants";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   container: {
-    padding: '8px 9px 16px !important'
+    padding: '8px 0 16px !important'
   }
 });
 const items = {

package/product/components/UnitQuantityPicker/UnitQuantityPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnitQuantityPicker.d.ts","sourceRoot":"","sources":["../../../../product/components/UnitQuantityPicker/UnitQuantityPicker.jsx"],"names":[],"mappings":";AA6FA;;;GAGG;AACH;;;;;;;;;;;;;;;;;IAFa,GAAG,CAAC,OAAO,CAqMvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAjSqB,YAAY"}
+{"version":3,"file":"UnitQuantityPicker.d.ts","sourceRoot":"","sources":["../../../../product/components/UnitQuantityPicker/UnitQuantityPicker.jsx"],"names":[],"mappings":";AA8FA;;;GAGG;AACH;;;;;;;;;;;;;;;;;IAFa,GAAG,CAAC,OAAO,CAqMvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAlSqB,YAAY"}