@shopgate/pwa-ui-shared 7.30.0-alpha.12 → 7.30.0-alpha.13

package/Ripple/components/RippleAnimation/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useMemo } from 'react';
+import React, { memo, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
@@ -27,68 +27,62 @@ function RippleAnimation({
   y
 }) {
   const nodeRef = useRef(null);
-
-  // Trigger the animation immediately
-  const inProp = true;
   const baseStyle = useMemo(() => ({
-    position: 'absolute',
     backgroundColor: color,
     height: size,
     width: size,
     left: x,
     top: y,
-    borderRadius: '50%',
-    transform: 'translate3d(-50%, -50%, 0) scale3d(0, 0, 1)',
     opacity: 0.25,
+    transform: 'translate3d(-50%, -50%, 0) scale3d(0, 0, 1)',
     transition: `opacity ${duration}ms cubic-bezier(0.25, 0.1, 0.25, 1), transform ${duration}ms cubic-bezier(0.25, 0.1, 0.25, 1)`,
-    pointerEvents: 'none'
-  }), [color, duration, size, x, y]);
-  const transitionStyles = useMemo(() => ({
-    entering: {
-      transform: 'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',
-      opacity: 0
-    },
-    entered: {
-      transform: 'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',
-      opacity: 0
-    },
-    exiting: {},
-    exited: {},
-    unmounted: {}
+    willChange: 'transform, opacity'
+  }), [color, size, x, y, duration]);
+  const activeStyle = useMemo(() => ({
+    transform: 'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',
+    opacity: 0
   }), []);
 
-  // Run callback when transition ends
-  useEffect(() => {
-    const el = nodeRef.current;
-    if (!el) return undefined;
-
-    /**
-     * Handles the transition end event and calls onComplete for relevant properties.
-     * @param {TransitionEvent} e - The transition event object
-     */
-    const handleEnd = e => {
-      // Only handle transform or opacity transitions
-      if (e.propertyName === 'transform' || e.propertyName === 'opacity') {
-        onComplete();
-      }
-    };
-    el.addEventListener('transitionend', handleEnd);
-    return () => el.removeEventListener('transitionend', handleEnd);
-  }, [onComplete]);
+  /**
+   * Resolves ripple animation styles for a given transition state.
+   *
+   * @param {string} state React Transition state.
+   * @returns {React.CSSProperties} Computed inline styles.
+   */
+  const getStyleForState = state => {
+    // Transition states: 'entering', 'entered', 'exiting', 'exited'
+    if (state === 'entering' || state === 'entered') {
+      return {
+        ...baseStyle,
+        ...activeStyle
+      };
+    }
+    return baseStyle;
+  };
   return /*#__PURE__*/_jsx(Transition, {
-    in: inProp,
-    timeout: duration,
+    in: true,
+    timeout: {
+      appear: duration,
+      enter: duration,
+      exit: 0
+    },
     appear: true,
     mountOnEnter: true,
     unmountOnExit: true,
     nodeRef: nodeRef,
+    onEnter: () => {
+      // Force layout/reflow so Safari & Chrome reliably apply the transition
+      // before switching to the "entering" styles.
+      if (nodeRef.current) {
+        // eslint-disable-next-line no-unused-expressions
+        nodeRef.current.offsetHeight;
+      }
+    },
+    onEntered: onComplete,
     children: state => /*#__PURE__*/_jsx("div", {
       ref: nodeRef,
       className: style.ripple,
-      style: {
-        ...baseStyle,
-        ...transitionStyles[state]
-      }
+      style: getStyleForState(state)
     })
   });
 }
@@ -100,4 +94,4 @@ RippleAnimation.defaultProps = {
   x: 0,
   y: 0
 };
-export default /*#__PURE__*/React.memo(RippleAnimation);
+export default /*#__PURE__*/memo(RippleAnimation);

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "7.30.0-alpha.12",
+  "version": "7.30.0-alpha.13",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "7.30.0-alpha.12",
-    "@shopgate/pwa-ui-material": "7.30.0-alpha.12"
+    "@shopgate/pwa-ui-ios": "7.30.0-alpha.13",
+    "@shopgate/pwa-ui-material": "7.30.0-alpha.13"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "7.30.0-alpha.12",
-    "@shopgate/pwa-common-commerce": "7.30.0-alpha.12",
+    "@shopgate/pwa-common": "7.30.0-alpha.13",
+    "@shopgate/pwa-common-commerce": "7.30.0-alpha.13",
     "classnames": "2.5.1",
     "react": "^17.0.2"
   },