@shopgate/engage 7.32.0-beta.2 → 7.32.0-beta.20

package/components/v2/ButtonBase/ButtonBase.js

@@ -1,87 +1,254 @@
 import "core-js/modules/es.array.includes.js";
-import React, { forwardRef } from 'react';
+import "core-js/modules/es.string.replace.js";
+import React, { forwardRef, useEffect } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useReduceMotion } from '@shopgate/engage/a11y/hooks';
+// Imported from the defining modules instead of the `core` barrels on purpose: `core/hooks` imports
+// from `engage/components`, so going through a barrel would create a circular import.
+import { useNavigation } from '@shopgate/engage/core/hooks/useNavigation';
+import { hasWebBridge } from '@shopgate/engage/core/helpers/bridge';
 import Ripple from "./Ripple";
 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.
+ */
+
 /**
  * The ButtonBase component serves as a foundational button element that can be extended with
  * additional styles and functionality. It handles basic button behavior, including disabled
  * state and type validation.
  */
-const ButtonBase = /*#__PURE__*/forwardRef((props, ref) => {
+function ButtonBase(props, ref) {
   const {
+    component,
+    href,
+    linkOptions,
     disabled = false,
     disableRipple: disableRippleProp = false,
+    disableBaseClassName = false,
+    className,
+    classes: classesProp,
+    testId,
+    children,
+    ...rest
+  } = props;
+  const {
     type = 'button',
+    onClick,
+    onKeyDown,
     onPointerDown,
     onPointerUp,
     onPointerLeave,
     onPointerCancel,
-    className,
-    children,
     ...other
-  } = props;
+  } = rest;
   const {
     classes,
     cx
   } = useStyles(undefined, {
     props: {
-      classes: props.classes
+      classes: classesProp
     }
   });
   const {
     ripples,
     start,
-    end
+    end,
+    clearAll
   } = usePressRipple();
   const reduceMotion = useReduceMotion();
+  const {
+    push,
+    replace
+  } = useNavigation();
   const disableRipple = disableRippleProp || reduceMotion;
+
+  // A button that disables itself on click gets `pointer-events: none`, which makes the browser
+  // drop the pointer capture. The pointer up then lands somewhere else and the ripple would never
+  // be told to finish, so it's cleared here instead.
+  useEffect(() => {
+    if (disabled) {
+      clearAll();
+    }
+  }, [disabled, clearAll]);
+
+  // A real anchor is only safe on web builds. Inside the app webview `preventDefault()` sometimes
+  // fails and the page navigates for real, so link buttons stay `<button>` there.
+  const Component = component || (href && hasWebBridge() ? 'a' : 'button');
+  const isButtonElement = Component === 'button';
+
+  /**
+   * Hands the target over to the app router. Deferred like the `Link` component does, so the
+   * current event finishes dispatching before the route changes.
+   */
+  const navigate = () => {
+    if (!href) {
+      return;
+    }
+    const state = {
+      ...linkOptions?.state,
+      ...(linkOptions?.target ? {
+        target: linkOptions.target
+      } : {})
+    };
+    const params = {
+      pathname: href,
+      ...(Object.keys(state).length ? {
+        state
+      } : {})
+    };
+    setTimeout(() => {
+      if (linkOptions?.replace) {
+        replace(params);
+      } else {
+        push(params);
+      }
+    }, 0);
+  };
+  const handleClick = event => {
+    if (disabled) {
+      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;
+    }
+    event.preventDefault();
+    navigate();
+  };
+  const handleKeyDown = event => {
+    onKeyDown?.(event);
+    if (isButtonElement || disabled || event.defaultPrevented) {
+      return;
+    }
+    if (event.key !== 'Enter' && event.key !== ' ') {
+      return;
+    }
+
+    // Only buttons activate on Enter and Space. Preventing the default also stops an anchor from
+    // firing its own click on Enter, so the element is activated exactly once.
+    event.preventDefault();
+    event.currentTarget.click();
+  };
   const handlePointerDown = event => {
-    if (!disabled && !disableRipple) {
+    if (disabled) {
+      return;
+    }
+    if (!disableRipple) {
       event.currentTarget.setPointerCapture?.(event.pointerId);
       start(event);
     }
     onPointerDown?.(event);
   };
+
+  /**
+   * Gives up pointer capture that was taken on pointer down. While an element captures the pointer,
+   * hit testing is redirected to it, so it keeps matching `:hover` and never receives a leave event.
+   * @param event The pointer event.
+   */
+  const releaseCapture = event => {
+    const target = event.currentTarget;
+    if (target.hasPointerCapture?.(event.pointerId)) {
+      target.releasePointerCapture(event.pointerId);
+    }
+  };
   const handlePointerUp = event => {
+    releaseCapture(event);
     if (!disableRipple) {
       end(event.pointerId);
     }
+    if (disabled) {
+      return;
+    }
     onPointerUp?.(event);
   };
   const handlePointerCancel = event => {
+    releaseCapture(event);
     if (!disableRipple) {
       end(event.pointerId);
     }
+    if (disabled) {
+      return;
+    }
     onPointerCancel?.(event);
   };
+
+  /**
+   * Fires whenever the capture taken on pointer down ends - including when the browser drops it
+   * because the element stopped being hit testable. Without this the ripple would stay behind.
+   * @param event The pointer event.
+   */
+  const handleLostPointerCapture = event => {
+    if (!disableRipple) {
+      end(event.pointerId);
+    }
+  };
   const handlePointerLeave = event => {
     if (!disableRipple && event.buttons === 1) {
       end(event.pointerId);
     }
+    if (disabled) {
+      return;
+    }
     onPointerLeave?.(event);
   };
-  return /*#__PURE__*/_jsxs("button", {
+  return /*#__PURE__*/_jsxs(Component, {
     ref: ref,
-    className: cx(classes.root, className),
-    disabled: disabled,
+    "data-test-id": testId,
+    className: cx(classes.root, !disableBaseClassName && 'engage__button-base', className),
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
     onPointerDown: handlePointerDown,
     onPointerUp: handlePointerUp,
     onPointerCancel: handlePointerCancel,
-    onPointerLeave: handlePointerLeave
-    // eslint-disable-next-line react/button-has-type
-    ,
-    type: supportedButtonTypes.includes(type) ? type : 'button',
+    onPointerLeave: handlePointerLeave,
+    onLostPointerCapture: handleLostPointerCapture,
+    ...(isButtonElement ? {
+      disabled,
+      type: supportedButtonTypes.includes(type) ? type : 'button'
+    } : {
+      'aria-disabled': disabled || undefined,
+      ...(href ? {
+        href
+      } : {})
+    }),
     ...other,
     children: [children, !disableRipple && /*#__PURE__*/_jsx(Ripple, {
       ripples: ripples
     })]
   });
-});
+}
 const useStyles = makeStyles({
   name: 'ButtonBase'
 })({
@@ -109,9 +276,17 @@ const useStyles = makeStyles({
       borderStyle: 'none'
     },
     '&:disabled': {
+      cursor: 'not-allowed'
+    },
+    '&[aria-disabled="true"]': {
       pointerEvents: 'none',
       cursor: 'default'
     }
   }
 });
-export default ButtonBase;
+const ButtonBaseWithRef = /*#__PURE__*/forwardRef(ButtonBase);
+ButtonBaseWithRef.displayName = 'ButtonBase';
+
+// `forwardRef` erases the generic, so the call signature is restored with a cast. Same approach as
+// the Typography component.
+export default ButtonBaseWithRef;

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

@@ -1,6 +1,5 @@
 export interface RippleItem {
     key: number;
-    pointerId: number;
     x: number;
     y: number;
     size: number;

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

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/hooks.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc;;mBAKM,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC;qBA2B7B,MAAM;;EA0B3C"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/hooks.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc;;mBAYM,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC;qBAqC7B,MAAM;;EA2C3C"}

package/components/v2/ButtonBase/hooks.js

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { RIPPLE_MIN_VISIBLE_MS } from "./constants";
 /**
  * Manages the active ripple queue.
@@ -12,39 +12,63 @@ import { RIPPLE_MIN_VISIBLE_MS } from "./constants";
 export function usePressRipple() {
   const [ripples, setRipples] = useState([]);
   const nextKey = useRef(0);
-  const startedAtByPointer = useRef(new Map());
+  const startedAtByKey = useRef(new Map());
+  const activeKeyByPointer = useRef(new Map());
+  const pendingTimeouts = useRef(new Set());
+  useEffect(() => () => {
+    pendingTimeouts.current.forEach(timeoutId => window.clearTimeout(timeoutId));
+    pendingTimeouts.current.clear();
+  }, []);
   const start = useCallback(event => {
     const element = event.currentTarget;
     const rect = element.getBoundingClientRect();
-    const rippleX = Math.round(event.clientX - rect.left);
-    const rippleY = Math.round(event.clientY - rect.top);
+    const hasPointerPosition = Number.isFinite(event.clientX) && Number.isFinite(event.clientY);
+    const rippleX = hasPointerPosition ? Math.round(event.clientX - rect.left) : Math.round(element.clientWidth / 2);
+    const rippleY = hasPointerPosition ? Math.round(event.clientY - rect.top) : Math.round(element.clientHeight / 2);
     const sizeX = Math.max(element.clientWidth - rippleX, rippleX) * 2 + 2;
     const sizeY = Math.max(element.clientHeight - rippleY, rippleY) * 2 + 2;
     const rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
-    startedAtByPointer.current.set(event.pointerId, performance.now());
     nextKey.current += 1;
+    const key = nextKey.current;
+    startedAtByKey.current.set(key, performance.now());
+
+    // A mouse reuses one pointerId for every press, so the pointer only ever points at the newest
+    // one. Keying the rest by ripple instead means an earlier press can no longer end this one.
+    activeKeyByPointer.current.set(event.pointerId, key);
     setRipples(prev => [].concat(prev, [{
-      key: nextKey.current,
-      pointerId: event.pointerId,
+      key,
       x: rippleX,
       y: rippleY,
       size: rippleSize
     }]));
   }, []);
   const end = useCallback(pointerId => {
-    const startedAt = startedAtByPointer.current.get(pointerId);
+    const key = activeKeyByPointer.current.get(pointerId);
+    if (key == null) {
+      return;
+    }
+
+    // Pointer up, cancel, leave and lost capture can all fire for a single press, and the press is
+    // over after whichever comes first.
+    activeKeyByPointer.current.delete(pointerId);
+    const startedAt = startedAtByKey.current.get(key);
     if (startedAt == null) {
       return;
     }
     const elapsed = performance.now() - startedAt;
     const delay = Math.max(0, RIPPLE_MIN_VISIBLE_MS - elapsed);
-    window.setTimeout(() => {
-      setRipples(prev => prev.filter(ripple => ripple.pointerId !== pointerId));
-      startedAtByPointer.current.delete(pointerId);
+    const timeoutId = window.setTimeout(() => {
+      pendingTimeouts.current.delete(timeoutId);
+      setRipples(prev => prev.filter(ripple => ripple.key !== key));
+      startedAtByKey.current.delete(key);
     }, delay);
+    pendingTimeouts.current.add(timeoutId);
   }, []);
   const clearAll = useCallback(() => {
-    startedAtByPointer.current.clear();
+    pendingTimeouts.current.forEach(timeoutId => window.clearTimeout(timeoutId));
+    pendingTimeouts.current.clear();
+    startedAtByKey.current.clear();
+    activeKeyByPointer.current.clear();
     setRipples([]);
   }, []);
   return {

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" | "contained" | "disableElevation" | "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;
@@ -24,21 +24,27 @@ export interface ButtonGroupOwnProps {
      * @default 'medium'
      */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * If true, the buttons use reduced padding.
+     * @default false
+     */
+    dense?: boolean;
     /**
      * The orientation of the buttons in the group.
      * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';
     /**
-     * If true, no elevation is used for contained buttons.
+     * If true, a drop shadow is added to the group. Button groups are flat by default.
      * @default false
      */
-    disableElevation?: boolean;
+    enableElevation?: boolean;
     /**
-     * The color of the component.
+     * The color of the component. Besides the palette colors, `cta` is supported. It resolves to the
+     * merchant configurable call to action color from `components.ctaButton`.
      * @default 'inherit'
      */
-    color?: PaletteColorsWithMain | 'inherit';
+    color?: PaletteColorsWithMain | 'inherit' | 'cta';
     /**
      * If true, the buttons will take up the full width of their container.
      * @default false

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,mIA4Df,CAAC;AAEH,QAAA,MAAM,SAAS;;cAoDM,CAAA;;;;;;CAmFnB,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,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC1C;;;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;AAEzF,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

@@ -9,13 +9,15 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     variant = 'contained',
     size = 'medium',
+    dense = false,
     orientation = 'horizontal',
-    disableElevation = false,
+    enableElevation = false,
     fullWidth = false,
     disableRipple = false,
     disabled = false,
     color = 'inherit',
     className,
+    classes: classesProp,
     children,
     ...other
   } = props;
@@ -27,7 +29,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
     variant
   }, {
     props: {
-      classes: props.classes
+      classes: classesProp
     }
   });
   const buttonClassName = cx(classes.grouped, classes[`grouped${capitalize(orientation)}`], classes[`grouped${capitalize(variant)}`], classes[`grouped${capitalize(variant)}${capitalize(orientation)}`], {
@@ -36,11 +38,18 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/_jsx("div", {
     role: "group",
     className: cx(classes.root, {
-      [classes.contained]: variant === 'contained',
       [classes.vertical]: orientation === 'vertical',
       [classes.fullWidth]: fullWidth,
-      [classes.disableElevation]: disableElevation
-    }, className),
+      [classes.enableElevation]: enableElevation && variant === 'contained'
+    }, 'engage__button-group', className),
+    "data-variant": variant,
+    "data-color": color,
+    "data-size": size,
+    "data-orientation": orientation,
+    "data-dense": dense || undefined,
+    "data-full-width": fullWidth || undefined,
+    "data-enable-elevation": enableElevation || undefined,
+    "data-disabled": disabled || undefined,
     ref: ref,
     ...other,
     children: React.Children.map(children, child => {
@@ -51,15 +60,22 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
         className: cx(buttonClassName, child.props.className),
         color: child.props.color || color,
         disabled: child.props.disabled || disabled,
-        disableElevation: child.props.disableElevation || disableElevation,
+        enableElevation: child.props.enableElevation || enableElevation,
         disableRipple,
         fullWidth,
         size: child.props.size || size,
+        dense: child.props.dense || dense,
         variant: child.props.variant || variant
       });
     })
   });
 });
+
+/**
+ * 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) => {
@@ -68,27 +84,35 @@ const useStyles = makeStyles({
     variant
   } = props;
   let cssColor = '';
-  if (color !== 'inherit') {
+  let darkCssColor = '';
+  if (color === 'cta') {
+    cssColor = theme.components.ctaButton.background;
+  } else if (color !== 'inherit') {
     cssColor = color && theme.palette?.[color]?.main ? theme.palette[color].main : theme.palette.primary.main;
   } 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: `var(${theme.vars.components.button.borderRadius}, ${theme.shape.borderRadius})`
-    },
-    contained: {
-      boxShadow: theme.shadows[2]
+      borderRadius: theme.components.button.borderRadius
     },
     disabled: {},
-    disableElevation: {
-      boxShadow: 'none'
+    enableElevation: {
+      boxShadow: theme.shadows[2]
     },
     fullWidth: {
       width: '100%'
@@ -127,8 +151,8 @@ const useStyles = makeStyles({
       '&:not(:last-of-type)': {
         borderRightWidth: 1,
         borderRightStyle: 'solid',
-        borderRightColor: theme.darken('var(--button-group-color)'),
-        '&:disabled': {
+        borderRightColor: 'var(--button-group-divider)',
+        '&:disabled, &[aria-disabled="true"]': {
           borderRightColor: 'var(--disabledColor)'
         }
       }
@@ -137,18 +161,14 @@ const useStyles = makeStyles({
       '&:not(:last-of-type)': {
         borderBottomWidth: 1,
         borderBottomStyle: 'solid',
-        borderBottomColor: theme.darken('var(--button-group-color)'),
-        '&:disabled': {
+        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': {
+      '&:disabled, &[aria-disabled="true"]': {
         borderColor: 'var(--disabledColor) !important'
       }
     },
@@ -168,13 +188,15 @@ const useStyles = makeStyles({
         borderBottomColor: 'transparent !important'
       }
     },
+    // Text buttons need no shared styles, but the key has to exist because the class is looked up
+    // dynamically as `grouped${capitalize(variant)}`.
     groupedText: {},
     groupedTextHorizontal: {
       '&&:not(:last-of-type)': {
         borderRightWidth: 1,
         borderRightStyle: 'solid',
-        borderRightColor: `${theme.lighten('var(--button-group-color)', 0.5)}`,
-        '&:disabled': {
+        borderRightColor: 'var(--button-group-separator)',
+        '&:disabled, &[aria-disabled="true"]': {
           borderRightColor: 'var(--disabledColor)'
         }
       }
@@ -183,8 +205,8 @@ const useStyles = makeStyles({
       '&&:not(:last-of-type)': {
         borderBottomWidth: 1,
         borderBottomStyle: 'solid',
-        borderBottomColor: `${theme.lighten('var(--button-group-color)', 0.5)}`,
-        '&:disabled': {
+        borderBottomColor: 'var(--button-group-separator)',
+        '&:disabled, &[aria-disabled="true"]': {
           borderBottomColor: 'var(--disabledColor)'
         }
       }
@@ -192,4 +214,5 @@ const useStyles = makeStyles({
     /* eslint-enable tss-unused-classes/unused-classes */
   };
 });
+ButtonGroup.displayName = 'ButtonGroup';
 export default ButtonGroup;

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

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../../../components/v2/CircularProgress/CircularProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAIrE;;;GAGG;AACH,QAAA,MAAM,gBAAgB,8FA6DpB,CAAC;AA0BH,QAAA,MAAM,SAAS;;cA4BX,CAAA;;;;;;CAeF,CAAC;AAEH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC1C;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;CAC5D;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../../../components/v2/CircularProgress/CircularProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAIrE;;;GAGG;AACH,QAAA,MAAM,gBAAgB,8FAiEpB,CAAC;AA0BH,QAAA,MAAM,SAAS;;cAuBN,CAAC;;;;;;CAoBR,CAAC;AAEH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC1C;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;CAC5D;AAID,eAAe,gBAAgB,CAAC"}

package/components/v2/CircularProgress/CircularProgress.js

@@ -17,6 +17,7 @@ const CircularProgress = /*#__PURE__*/forwardRef((props, ref) => {
     thickness = 3.6,
     style,
     className,
+    classes: classesProp,
     ...other
   } = props;
   const {
@@ -26,7 +27,7 @@ const CircularProgress = /*#__PURE__*/forwardRef((props, ref) => {
     color
   }, {
     props: {
-      classes: props.classes
+      classes: classesProp
     }
   });
   const circleStyle = {};
@@ -40,10 +41,10 @@ const CircularProgress = /*#__PURE__*/forwardRef((props, ref) => {
     rootStyle.transform = 'rotate(-90deg)';
   }
   return /*#__PURE__*/_jsx("div", {
-    className: cx(classes.root, className, {
+    className: cx(classes.root, {
       [classes.indeterminate]: variant === 'indeterminate',
       [classes.determinate]: variant === 'determinate'
-    }),
+    }, 'engage__circular-progress', className),
     style: {
       width: size,
       height: size,
@@ -52,6 +53,9 @@ const CircularProgress = /*#__PURE__*/forwardRef((props, ref) => {
     },
     ref: ref,
     role: "progressbar",
+    "data-variant": variant,
+    "data-color": color,
+    "data-disable-shrink": disableShrink || undefined,
     ...rootProps,
     ...other,
     children: /*#__PURE__*/_jsx("svg", {
@@ -108,8 +112,8 @@ const useStyles = makeStyles({
   return {
     root: {
       display: 'inline-block',
-      '--sg-circular-progress-circle-color': cssColor,
-      color: 'var(--sg-circular-progress-circle-color)'
+      '--circular-progress-color': cssColor,
+      color: 'var(--circular-progress-color)'
     },
     svg: {
       display: 'block'
@@ -136,4 +140,5 @@ const useStyles = makeStyles({
     }
   };
 });
+CircularProgress.displayName = 'CircularProgress';
 export default CircularProgress;