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

package/es/components/Datagrid/useSelectAllToggle.d.ts

@@ -1,2 +1,9 @@
+/**
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Hooks } from 'react-table';
+declare const useSelectAllToggle: (hooks: Hooks) => void;
 export default useSelectAllToggle;
-declare function useSelectAllToggle(hooks: any): void;

package/es/components/Datagrid/useSelectAllToggle.js

@@ -20,9 +20,10 @@ var useSelectAllToggle = function useSelectAllToggle(hooks) {
 };
 var useSelectAllWithToggleComponent = function useSelectAllWithToggleComponent(hooks) {
   var useInstance = function useInstance(instance) {
-    var headers = instance.headers,
-      DatagridPagination = instance.DatagridPagination;
-    var headersWithSelectAllToggle = headers.map(function (header) {
+    var _ref = instance,
+      headers = _ref.headers,
+      DatagridPagination = _ref.DatagridPagination;
+    var headersWithSelectAllToggle = headers === null || headers === void 0 ? void 0 : headers.map(function (header) {
       if (header.id === selectionColumnId && DatagridPagination) {
         Object.assign(header, {
           Header: Header
@@ -54,10 +55,10 @@ var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
   hooks.getCellProps.push(function (props, data) {
     var _columns$;
     var column = data.cell.column;
-    var _data$instance = data.instance,
-      DatagridPagination = _data$instance.DatagridPagination,
-      columns = _data$instance.columns,
-      withStickyColumn = _data$instance.withStickyColumn;
+    var _ref2 = data.instance,
+      DatagridPagination = _ref2.DatagridPagination,
+      columns = _ref2.columns,
+      withStickyColumn = _ref2.withStickyColumn;
     var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
     if (column.id === selectionColumnId && DatagridPagination) {
       return [props, {

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/Datagrid/useSelectAllToggle.d.ts

@@ -1,2 +1,9 @@
+/**
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Hooks } from 'react-table';
+declare const useSelectAllToggle: (hooks: Hooks) => void;
 export default useSelectAllToggle;
-declare function useSelectAllToggle(hooks: any): void;

package/lib/components/Datagrid/useSelectAllToggle.js

@@ -29,9 +29,10 @@ var useSelectAllToggle = function useSelectAllToggle(hooks) {
 };
 var useSelectAllWithToggleComponent = function useSelectAllWithToggleComponent(hooks) {
   var useInstance = function useInstance(instance) {
-    var headers = instance.headers,
-      DatagridPagination = instance.DatagridPagination;
-    var headersWithSelectAllToggle = headers.map(function (header) {
+    var _ref = instance,
+      headers = _ref.headers,
+      DatagridPagination = _ref.DatagridPagination;
+    var headersWithSelectAllToggle = headers === null || headers === void 0 ? void 0 : headers.map(function (header) {
       if (header.id === commonColumnIds.selectionColumnId && DatagridPagination) {
         Object.assign(header, {
           Header: Header
@@ -63,10 +64,10 @@ var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
   hooks.getCellProps.push(function (props, data) {
     var _columns$;
     var column = data.cell.column;
-    var _data$instance = data.instance,
-      DatagridPagination = _data$instance.DatagridPagination,
-      columns = _data$instance.columns,
-      withStickyColumn = _data$instance.withStickyColumn;
+    var _ref2 = data.instance,
+      DatagridPagination = _ref2.DatagridPagination,
+      columns = _ref2.columns,
+      withStickyColumn = _ref2.withStickyColumn;
     var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
     if (column.id === commonColumnIds.selectionColumnId && DatagridPagination) {
       return [props, {

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.1+2f1e993c3",
   "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": "2f1e993c3f547c4e7ca0f2f79b4d94232b979f8b"
 }