@carbon/ibm-products 2.43.0 → 2.43.1-canary.0

package/es/components/OptionsTile/OptionsTile.js

@@ -118,6 +118,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         paddingTop = _getComputedStyle2.paddingTop,
         paddingBottom = _getComputedStyle2.paddingBottom,
         height = _getComputedStyle2.height;
+      var animationDuration = Number(carbonMotion.moderate01.replace('ms', ''));
       var animation = contentRef.current.animate([{
         paddingTop: paddingTop,
         paddingBottom: paddingBottom,
@@ -129,14 +130,22 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         height: 0,
         opacity: 0
       }], {
-        duration: Number(carbonMotion.moderate01.replace('ms', '')),
+        duration: animationDuration,
         easing: carbonMotion.easings.entrance.productive
       });
       var callback = function callback() {
         setIsOpen(false);
         setClosing(false);
       };
-      animation.onfinish = callback;
+
+      //This is to fix the flicking issue while collapsing.
+      //root cause : after the animation is finished , isOpen is still true until onFinish callback is triggered.For that minute duration , collapsed content will again show.
+      // To avoid this , isOpen is set to false after the 90% of animation duration.
+      setTimeout(function () {
+        callback();
+      }, animationDuration * 0.9);
+
+      // animation.onfinish = callback;
       animation.oncancel = callback;
     } else {
       // in case the ref is not set or the user prefers reduced motion, skip the animation

package/lib/components/OptionsTile/OptionsTile.js

@@ -146,6 +146,7 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
         paddingTop = _getComputedStyle2.paddingTop,
         paddingBottom = _getComputedStyle2.paddingBottom,
         height = _getComputedStyle2.height;
+      var animationDuration = Number(carbonMotion__namespace.moderate01.replace('ms', ''));
       var animation = contentRef.current.animate([{
         paddingTop: paddingTop,
         paddingBottom: paddingBottom,
@@ -157,14 +158,22 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
         height: 0,
         opacity: 0
       }], {
-        duration: Number(carbonMotion__namespace.moderate01.replace('ms', '')),
+        duration: animationDuration,
         easing: carbonMotion__namespace.easings.entrance.productive
       });
       var callback = function callback() {
         setIsOpen(false);
         setClosing(false);
       };
-      animation.onfinish = callback;
+
+      //This is to fix the flicking issue while collapsing.
+      //root cause : after the animation is finished , isOpen is still true until onFinish callback is triggered.For that minute duration , collapsed content will again show.
+      // To avoid this , isOpen is set to false after the 90% of animation duration.
+      setTimeout(function () {
+        callback();
+      }, animationDuration * 0.9);
+
+      // animation.onfinish = callback;
       animation.oncancel = callback;
     } else {
       // in case the ref is not set or the user prefers reduced motion, skip the animation

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.0",
+  "version": "2.43.1-canary.0+0be8378ce",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -121,5 +121,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "4deacf2fbc44a543db6141a63a0f4d988900a0c5"
+  "gitHead": "0be8378ceeec3aa2c9af5495dbb8f9fa636bc237"
 }