@carbon/ibm-products 2.79.0 → 2.80.0-rc.0

package/es/components/Coachmark/Coachmark.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * Copyright IBM Corp. 2023, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -87,6 +87,7 @@ export interface CoachmarkProps {
  * Coachmarks are used to call out specific functionality or concepts
  * within the UI that may not be intuitive but are important for the
  * user to gain understanding of the product's main value and discover new use cases.
+ * @deprecated This component is deprecated.
  */
 export declare const Coachmark: React.ForwardRefExoticComponent<CoachmarkProps & React.RefAttributes<HTMLElement>>;
 export declare const deprecatedProps: {

package/es/components/Coachmark/Coachmark.js

@@ -36,6 +36,7 @@ const defaults = {
  * Coachmarks are used to call out specific functionality or concepts
  * within the UI that may not be intuitive but are important for the
  * user to gain understanding of the product's main value and discover new use cases.
+ * @deprecated This component is deprecated.
  */
 
 const Coachmark = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -215,6 +216,11 @@ const overlayRefType = typeof HTMLElement === 'undefined' ? PropTypes.object :
 // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
 PropTypes.instanceOf(HTMLElement);
 
+/**@ts-ignore*/
+Coachmark.deprecated = {
+  level: 'warn',
+  details: `${componentName} is deprecated.`
+};
 // Return a placeholder if not released and not enabled by feature flag
 
 // The display name of the component, used by React. Note that displayName

package/es/components/Coachmark/CoachmarkDragbar.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * Copyright IBM Corp. 2023, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -35,6 +35,7 @@ interface CoachmarkDragbarProps {
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
+ * @deprecated This component is deprecated.
  */
 export declare const CoachmarkDragbar: React.ForwardRefExoticComponent<Omit<CoachmarkDragbarProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export {};

package/es/components/Coachmark/CoachmarkDragbar.js

@@ -33,6 +33,7 @@ const defaults = {
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
+ * @deprecated This component is deprecated.
  */
 const CoachmarkDragbar = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
@@ -95,6 +96,12 @@ const CoachmarkDragbar = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }));
 });
 
+/**@ts-ignore*/
+CoachmarkDragbar.deprecated = {
+  level: 'warn',
+  details: `${componentName} is deprecated.`
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 
 // The display name of the component, used by React. Note that displayName

package/es/components/Coachmark/CoachmarkHeader.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * Copyright IBM Corp. 2023, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -22,6 +22,7 @@ interface CoachmarkHeaderProps {
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
+ * @deprecated This component is deprecated.
  */
 export declare const CoachmarkHeader: React.ForwardRefExoticComponent<CoachmarkHeaderProps & React.RefAttributes<HTMLElement>>;
 export {};

package/es/components/Coachmark/CoachmarkHeader.js

@@ -27,6 +27,7 @@ const defaults = {
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
+ * @deprecated This component is deprecated.
  */
 const CoachmarkHeader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
@@ -53,6 +54,12 @@ const CoachmarkHeader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   })));
 });
 
+/**@ts-ignore*/
+CoachmarkHeader.deprecated = {
+  level: 'warn',
+  details: `${componentName} is deprecated.`
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 
 // The display name of the component, used by React. Note that displayName

package/es/components/Coachmark/CoachmarkOverlay.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * Copyright IBM Corp. 2023, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -41,6 +41,7 @@ interface CoachmarkOverlayProps {
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
+ * @deprecated This component is deprecated.
  */
 export declare const CoachmarkOverlay: React.ForwardRefExoticComponent<Omit<CoachmarkOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/es/components/Coachmark/CoachmarkOverlay.js

@@ -32,6 +32,7 @@ const defaults = {
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
+ * @deprecated This component is deprecated.
  */
 const CoachmarkOverlay = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/es/components/Coachmark/CoachmarkTagline.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * Copyright IBM Corp. 2023, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -26,6 +26,7 @@ interface CoachmarkTaglineProps {
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
+ * @deprecated This component is deprecated.
  */
 export declare const CoachmarkTagline: React.ForwardRefExoticComponent<CoachmarkTaglineProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/es/components/Coachmark/CoachmarkTagline.js

@@ -28,6 +28,7 @@ const defaults = {
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
+ * @deprecated This component is deprecated.
  */
 const CoachmarkTagline = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
@@ -64,6 +65,12 @@ const CoachmarkTagline = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   })));
 });
 
+/**@ts-ignore*/
+CoachmarkTagline.deprecated = {
+  level: 'warn',
+  details: `${componentName} is deprecated.`
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 
 // The display name of the component, used by React. Note that displayName

package/es/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubble.js

@@ -8,8 +8,9 @@
 import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import { useTheme, usePrefix } from '@carbon/react';
-import React__default, { forwardRef, useRef, useLayoutEffect } from 'react';
+import React__default, { forwardRef, useRef } from 'react';
 import { pkg } from '../../../../../settings.js';
+import { useIsomorphicEffect } from '../../../../../global/js/hooks/useIsomorphicEffect.js';
 import { offset, flip, shift, arrow } from '../../../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
 import { autoUpdate, computePosition } from '../../../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
 
@@ -32,7 +33,7 @@ const CoachmarkBubble = /*#__PURE__*/forwardRef((props, ref) => {
   const tooltipRef = useRef(null);
   const arrowRef = useRef(null);
   const targetRef = useRef(null);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     if (target) {
       if (typeof target === 'string') {
         if (target === '#' || target.trim() === '') {

package/es/components/Coachmark/utils/hooks.js

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useRef, useLayoutEffect, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 import { COACHMARK_OVERLAY_KIND } from './enums.js';
+import { useIsomorphicEffect } from '../../../global/js/hooks/useIsomorphicEffect.js';
 
 /**
  * Detects when a user clicks outside of the element
@@ -19,10 +20,10 @@ import { COACHMARK_OVERLAY_KIND } from './enums.js';
 function useClickOutsideElement(coachmarkRef, overlayRef, overlayKind, callback) {
   const cb = useRef(undefined);
   const isTooltip = overlayKind === COACHMARK_OVERLAY_KIND.TOOLTIP;
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     cb.current = callback;
   }, [callback]);
-  useEffect(() => {
+  useIsomorphicEffect(() => {
     function handleClickOutside(event) {
       const isOverlayOutside = overlayRef.current && !overlayRef.current.contains(event.target);
       const isOutsideCoachmark = coachmarkRef.current && !coachmarkRef.current.contains(event.target);

package/es/components/CoachmarkBeacon/CoachmarkBeacon.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * Copyright IBM Corp. 2023, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -35,5 +35,6 @@ export interface CoachmarkBeaconProps {
 }
 /**
  * Use beacon for the target prop of a Coachmark component.
+ * @deprecated This component is deprecated.
  */
 export declare const CoachmarkBeacon: React.ForwardRefExoticComponent<CoachmarkBeaconProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/CoachmarkBeacon/CoachmarkBeacon.js

@@ -23,6 +23,7 @@ const defaults = {
 };
 /**
  * Use beacon for the target prop of a Coachmark component.
+ * @deprecated This component is deprecated.
  */
 const CoachmarkBeacon = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
@@ -51,6 +52,12 @@ const CoachmarkBeacon = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   })))));
 });
 
+/**@ts-ignore*/
+CoachmarkBeacon.deprecated = {
+  level: 'warn',
+  details: `${componentName} is deprecated.`
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 
 // The display name of the component, used by React. Note that displayName

package/es/components/CoachmarkButton/CoachmarkButton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * Copyright IBM Corp. 2023, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -17,5 +17,6 @@ export interface CoachmarkButtonProps {
 }
 /**
  * Use CoachmarkButton for the target prop of a Coachmark component.
+ * @deprecated This component is deprecated.
  */
 export declare const CoachmarkButton: React.ForwardRefExoticComponent<CoachmarkButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/es/components/CoachmarkButton/CoachmarkButton.js

@@ -43,6 +43,7 @@ const componentName = 'CoachmarkButton';
 
 /**
  * Use CoachmarkButton for the target prop of a Coachmark component.
+ * @deprecated This component is deprecated.
  */
 const CoachmarkButton = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {

package/es/components/CoachmarkFixed/CoachmarkFixed.d.ts

@@ -47,5 +47,6 @@ export interface CoachmarkFixedProps {
  * within the UI that may not be intuitive but are important for the
  * user to gain understanding of the product's main value and discover new use cases.
  * This variant allows the a coachmark overlay to be displayed by interacting with the tagline.
+ * @deprecated This component is deprecated.
  */
 export declare const CoachmarkFixed: React.ForwardRefExoticComponent<CoachmarkFixedProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/CoachmarkFixed/CoachmarkFixed.js

@@ -38,6 +38,7 @@ const defaults = {
  * within the UI that may not be intuitive but are important for the
  * user to gain understanding of the product's main value and discover new use cases.
  * This variant allows the a coachmark overlay to be displayed by interacting with the tagline.
+ * @deprecated This component is deprecated.
  */
 const CoachmarkFixed = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
@@ -163,6 +164,12 @@ const CoachmarkFixed = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   portalNode?.current)));
 });
 
+/**@ts-ignore*/
+CoachmarkFixed.deprecated = {
+  level: 'warn',
+  details: `${componentName} is deprecated.`
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 
 // The display name of the component, used by React. Note that displayName

package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * Copyright IBM Corp. 2023, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -28,5 +28,6 @@ export interface CoachmarkOverlayElementProps {
  * Component to be displayed within a CoachmarkOverlayElements container.
  * Can be used 1 to N number, to display content in a Coachmark's overlay
  * in a carousel fashion.
+ * @deprecated This component is deprecated.
  */
 export declare const CoachmarkOverlayElement: React.ForwardRefExoticComponent<CoachmarkOverlayElementProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js

@@ -19,6 +19,7 @@ const componentName = 'CoachmarkOverlayElement';
  * Component to be displayed within a CoachmarkOverlayElements container.
  * Can be used 1 to N number, to display content in a Coachmark's overlay
  * in a carousel fashion.
+ * @deprecated This component is deprecated.
  */
 const CoachmarkOverlayElement = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {

package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * Copyright IBM Corp. 2023, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -52,5 +52,6 @@ export interface CoachmarkOverlayElementsProps {
 /**
  * Composable container to allow for the displaying of CoachmarkOverlayElement
  * components in a carousel fashion.
+ * @deprecated This component is deprecated.
  */
 export declare const CoachmarkOverlayElements: React.ForwardRefExoticComponent<CoachmarkOverlayElementsProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -47,6 +47,7 @@ const defaults = {
 /**
  * Composable container to allow for the displaying of CoachmarkOverlayElement
  * components in a carousel fashion.
+ * @deprecated This component is deprecated.
  */
 const CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {

package/es/components/CoachmarkStack/CoachmarkStack.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * Copyright IBM Corp. 2023, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -66,6 +66,7 @@ interface CoachmarkStackProps {
  * within the UI that may not be intuitive but are important for the
  * user to gain understanding of the product's main value and discover new use cases.
  * This variant allows the stacking of multiple coachmark overlays to be displayed by interacting with the tagline.
+ * @deprecated This component is deprecated.
  */
 export declare const CoachmarkStack: React.ForwardRefExoticComponent<CoachmarkStackProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/es/components/CoachmarkStack/CoachmarkStack.js

@@ -45,6 +45,7 @@ const defaults = {
  * within the UI that may not be intuitive but are important for the
  * user to gain understanding of the product's main value and discover new use cases.
  * This variant allows the stacking of multiple coachmark overlays to be displayed by interacting with the tagline.
+ * @deprecated This component is deprecated.
  */
 const CoachmarkStack = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
@@ -213,6 +214,12 @@ const CoachmarkStack = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }), portalNode?.current ? /*#__PURE__*/createPortal(wrappedChildren, portalNode?.current) : null));
 });
 
+/**@ts-ignore*/
+CoachmarkStack.deprecated = {
+  level: 'warn',
+  details: `${componentName} is deprecated.`
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 
 // The display name of the component, used by React. Note that displayName

package/es/components/CreateFullPage/CreateFullPage.js

@@ -111,7 +111,7 @@ const CreateFullPage = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   useCreateComponentFocus({
     previousState,
     currentStep,
-    blockClass,
+    blockClass: `.${blockClass} .${pkg.prefix}--create-full-page__step`,
     onMount,
     firstFocusElement
   });

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -99,9 +99,9 @@ const CreateTearsheet = /*#__PURE__*/forwardRef((_ref, ref) => {
   useCreateComponentFocus({
     previousState,
     currentStep,
-    blockClass,
+    blockClass: `.${blockClass} .${pkg.prefix}--tearsheet-create__step`,
     onMount,
-    firstFocusElement
+    firstFocusElement: firstFocusElement || selectorPrimaryFocus
   });
   useValidCreateStepCount(stepData.length, componentName);
   useResetCreateComponent({

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -90,31 +90,11 @@ const CreateTearsheetStep = /*#__PURE__*/forwardRef((_ref, ref) => {
   useEffect(() => {
     setShouldIncludeStep(includeStep);
   }, [includeStep, stepsContext, title]);
-  const setFocusChildrenTabIndex = (childInputs, value) => {
-    if (childInputs?.length) {
-      childInputs.forEach(child => {
-        child.tabIndex = value;
-      });
-    }
-  };
 
   // Whenever we are the current step, supply our disableSubmit and onNext values to the
   // steps container context so that it can manage the 'Next' button appropriately.
   useEffect(() => {
-    const focusElementQuery = `button, input, select, textarea, a`;
-    if (stepNumber !== stepsContext?.currentStep) {
-      // Specify tab-index -1 for focusable elements not contained
-      // in the current step so that the useFocus hook can exclude
-      // from the focus trap
-      const childInputs = stepRefValue?.querySelectorAll(focusElementQuery);
-      setFocusChildrenTabIndex(childInputs, -1);
-    }
     if (stepNumber === stepsContext?.currentStep) {
-      // Specify tab-index 0 for current step focusable elements
-      // for the useFocus hook to know which elements to include
-      // in focus trap
-      const childInputs = stepRefValue?.querySelectorAll(focusElementQuery);
-      setFocusChildrenTabIndex(childInputs, 0);
       stepsContext.setIsDisabled(!!disableSubmit);
       stepsContext?.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
       stepsContext?.setOnPrevious(onPrevious);
@@ -139,7 +119,8 @@ const CreateTearsheetStep = /*#__PURE__*/forwardRef((_ref, ref) => {
     return null;
   };
   return stepsContext ? /*#__PURE__*/React__default.createElement("div", {
-    ref: stepRef
+    ref: stepRef,
+    inert: stepNumber !== stepsContext?.currentStep
   }, /*#__PURE__*/React__default.createElement(Grid, _extends({}, rest, {
     className: cx(blockClass, className, {
       [`${blockClass}__step--hidden-step`]: stepNumber !== stepsContext?.currentStep,

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -6,16 +6,17 @@
  */
 
 import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useLayoutEffect, useCallback } from 'react';
+import React__default, { useState, useCallback } from 'react';
 import { TableSelectAll } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings.js';
 import { handleOnPageSelectAllRowData, handleSelectAllRowData } from './addons/stateReducer.js';
+import { useIsomorphicEffect } from '../../../global/js/hooks/useIsomorphicEffect.js';
 
 const blockClass = `${pkg.prefix}--datagrid`;
 const SelectAll = datagridState => {
   const [windowSize, setWindowSize] = useState();
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     setWindowSize(window.innerWidth);
     /* istanbul ignore next */
     function updateSize() {

package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -6,12 +6,13 @@
  */
 
 import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useEffect, useLayoutEffect } from 'react';
+import React__default, { useState, useEffect } from 'react';
 import PropTypes from '../../../_virtual/index.js';
 import cx from 'classnames';
 import { Checkbox, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { CaretDown } from '@carbon/react/icons';
 import { pkg } from '../../../settings.js';
+import { useIsomorphicEffect } from '../../../global/js/hooks/useIsomorphicEffect.js';
 
 const blockClass = `${pkg.prefix}--datagrid`;
 const SELECT_ALL_PAGE_ROWS = 'pageRows';
@@ -40,7 +41,7 @@ const SelectAllWithToggle = _ref => {
     }
   }, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
   const [windowSize, setWindowSize] = useState();
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -93,6 +93,10 @@ const CustomizeColumnsTearsheet = _ref => {
   }, [columnObjects]);
   const string = searchText.trim().toLowerCase();
   useEffect(() => {
+    // prevent this effect from running when columns are being resized
+    if (!isOpen) {
+      return;
+    }
     if (prevColumnDefinitions.current !== columnDefinitions) {
       setColumnObjects(columnDefinitions);
     }

package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js

@@ -89,7 +89,8 @@ const FilterFlyout = _ref => {
   const [shouldDisableButtons, setShouldDisableButtons] = useShouldDisableButtons({
     initialValue: true,
     filtersState,
-    prevFiltersRef
+    prevFiltersRef,
+    open
   });
 
   // Skip resize testing

package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js

@@ -97,7 +97,8 @@ const FilterPanel = _ref => {
   const [shouldDisableButtons, setShouldDisableButtons] = useShouldDisableButtons({
     initialValue: true,
     filtersState,
-    prevFiltersRef
+    prevFiltersRef,
+    open: panelOpen
   });
   const shouldReduceMotion = usePrefersReducedMotion();
   const exitAnimationName = shouldReduceMotion ? 'filter-panel-exit-reduced' : 'filter-panel-exit-left';

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.d.ts

@@ -6,4 +6,4 @@ export default useShouldDisableButtons;
  * @param  {object} prevFiltersRef - reference of the prev filterState
  * @returns {Array} returns a tuple of the state and setter function
  */
-declare function useShouldDisableButtons({ initialValue, filtersState, prevFiltersRef, }: string): any[];
+declare function useShouldDisableButtons({ initialValue, filtersState, prevFiltersRef, open, }: string): any[];

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js

@@ -23,10 +23,15 @@ const useShouldDisableButtons = _ref => {
     initialValue,
     // initially the buttons should be disabled
     filtersState,
-    prevFiltersRef
+    prevFiltersRef,
+    open
   } = _ref;
   const [shouldDisableButtons, setShouldDisableButtons] = useState(initialValue);
   useEffect(function updateDisabledButtonsState() {
+    // prevent this effect from running when columns are being resized
+    if (!open) {
+      return;
+    }
     setShouldDisableButtons(deepCompareObject(filtersState, JSON.parse(prevFiltersRef.current)));
   }, [filtersState, prevFiltersRef]);
   return [shouldDisableButtons, setShouldDisableButtons];

package/es/components/Datagrid/useResizeTable.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useLayoutEffect } from 'react';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 const useResizeTable = hooks => {
   const useInstanceBeforeDimensions = instance => {
@@ -14,7 +14,7 @@ const useResizeTable = hooks => {
       handleResize
     } = instance;
     const parent = rootRef && rootRef.current && rootRef.current.parentElement;
-    useLayoutEffect(() => {
+    useIsomorphicEffect(() => {
       if (!parent) {
         return () => {};
       }

package/es/components/Datagrid/useSelectRows.js

@@ -6,13 +6,14 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useLayoutEffect, useCallback } from 'react';
+import React__default, { useState, useCallback } from 'react';
 import cx from 'classnames';
 import { usePrefix, TableSelectRow } from '@carbon/react';
 import { SelectAll } from './Datagrid/DatagridSelectAll.js';
 import { selectionColumnId } from './common-column-ids.js';
 import { pkg } from '../../settings.js';
 import { handleToggleRowSelected } from './Datagrid/addons/stateReducer.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 const blockClass = `${pkg.prefix}--datagrid`;
 const checkboxClass = `${pkg.prefix}--datagrid__checkbox-cell`;
@@ -85,7 +86,7 @@ const SelectRow = datagridState => {
     getRowId
   } = datagridState;
   const [windowSize, setWindowSize] = useState();
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);

package/es/components/Datagrid/useStickyColumn.js

@@ -5,10 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useRef, useState, useEffect, useLayoutEffect } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { debounce } from '../../global/js/utils/debounce.js';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 const blockClass = `${pkg.prefix}--datagrid`;
 const styleClassPrefix = `${blockClass}__right-sticky-column`;
@@ -21,7 +22,7 @@ const useStickyColumn = hooks => {
   useEffect(() => {
     setWindowSize(window?.innerWidth);
   }, []);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     /* istanbul ignore next */
     function updateSize() {
       setWindowSize(window.innerWidth);