@carbon/ibm-products 2.79.0 → 2.80.0

package/es/global/js/hooks/useCreateComponentFocus.js

@@ -28,11 +28,41 @@ const useCreateComponentFocus = _ref => {
       await wait(10);
       elm.focus();
     };
+    // FUNCTION TO ENSURE THE ELEMENT TARGETED IS NOT CONTAINED IN AN ELEMENT MARKED 'INERT'
+    const isNotContainedInInert = elm => {
+      if (!elm) return false;
+      const inertParent = elm.closest('[inert]');
+      return !inertParent || !inertParent.hasAttribute('inert') && !elm.disabled;
+    };
+    const getActiveStep = () => {
+      const allSteps = Array.from(document.querySelectorAll(blockClass));
+      return allSteps.find(el => {
+        let currentStep = el;
+        while (currentStep) {
+          if (currentStep.hasAttribute('inert')) return false;
+          currentStep = currentStep.parentElement;
+        }
+        return true;
+      });
+    };
+    const getFocusableElement = containingElement => {
+      const focusElementQuery = `button, input[type="button"], input, select, textarea, a[href]`;
+      // PREFER THE USER DEFINED firstFocusElement IF IT EXISTS
+      const firstFocusEl = containingElement.querySelector(firstFocusElement);
+      if (firstFocusEl && isNotContainedInInert(firstFocusEl) && !firstFocusEl.disabled) {
+        return firstFocusEl;
+      }
+      // BACKUP TO INTERACTIVE ELEMENT LIST
+      const bakFocusEl = Array.from(containingElement.querySelectorAll(focusElementQuery));
+      return bakFocusEl.find(el => isNotContainedInInert(el) && !el.disabled);
+    };
     if (previousState?.currentStep !== currentStep && currentStep > 0) {
-      if (firstFocusElement) {
-        const elm = document.querySelector(firstFocusElement);
-        if (elm) {
-          awaitFocus(elm);
+      // GET THE CURRENT STEP ELEMENT
+      const activeStepElement = getActiveStep();
+      if (activeStepElement && isNotContainedInInert(activeStepElement)) {
+        const focusEl = getFocusableElement(activeStepElement);
+        if (focusEl) {
+          awaitFocus(focusEl);
         }
       }
     }

package/es/global/js/hooks/useIsomorphicEffect.d.ts

@@ -1,2 +1,8 @@
-export const useIsomorphicEffect: typeof useEffect;
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
 import { useEffect } from 'react';
+export declare const useIsomorphicEffect: typeof useEffect;

package/es/global/js/hooks/useIsomorphicEffect.js

@@ -7,8 +7,7 @@
 
 import { useLayoutEffect, useEffect } from 'react';
 
-// Originally from `@carbon/react`, https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/internal/useIsomorphicEffect.js
-// useLayoutEffect on the client, useEffect on the server
+// Custom hook that uses either `useLayoutEffect` or `useEffect` based on the environment (client-side or server-side).
 const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 export { useIsomorphicEffect };

package/es/global/js/hooks/useResizeObserver.js

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect.js';
 
 const useResizeObserver = (ref, onResize) => {
   const [width, setWidth] = useState(-1);
@@ -13,7 +14,7 @@ const useResizeObserver = (ref, onResize) => {
   const entriesToHandle = useRef(null);
   const cb = useRef(onResize);
   useEffect(() => {
-    // ref for onResize removes it as dependency from useLayoutEffect
+    // ref for onResize removes it as dependency from useIsomorphicEffect
     // This significantly reduces repeated calls if a function is redefined on every
     // render
     cb.current = onResize;
@@ -35,7 +36,7 @@ const useResizeObserver = (ref, onResize) => {
     // Ignoring exhaustive-deps as we do NOT want to include the ref in dep array
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [width, height]);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     if (!ref?.current) {
       return;
     }

package/es/global/js/hooks/useWindowResize.js

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useRef, useLayoutEffect } from 'react';
+import { useRef } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect.js';
 
 const windowExists = typeof window !== `undefined`;
 const getWindowSize = () => {
@@ -47,7 +48,7 @@ const useWindowResize = function (effect, deps) {
     windowSize.current = newVal.current;
     throttleTimeout.current = null;
   };
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const handleResize = () => {
       if (throttleInterval) {
         if (throttleTimeout.current === null) {

package/es/global/js/hooks/useWindowScroll.js

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useRef, useLayoutEffect } from 'react';
+import { useRef } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect.js';
 import { scrollableAncestor } from '../utils/scrollableAncestor.js';
 
 const windowExists = typeof window !== `undefined`;
@@ -44,7 +45,7 @@ const useTargetScroll = function (target, effect, deps, throttleInterval) {
     scrollPosition.current = newVal.current;
     throttleTimeout.current = null;
   };
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const handleScroll = () => {
       if (throttleInterval) {
         if (throttleTimeout.current === null) {

package/es/index.js

@@ -62,8 +62,8 @@ export { TruncatedText as preview__TruncatedText } from './components/TruncatedT
 export { FeatureFlags as preview__FeatureFlags, useFeatureFlag as preview__useFeatureFlag, useFeatureFlags as preview__useFeatureFlags } from './components/FeatureFlags/index.js';
 import * as index$3 from './components/PageHeader/next/index.js';
 export { index$3 as preview__PageHeader };
-import * as index$4 from './components/Tearsheet/next/index.js';
-export { index$4 as preview__Tearsheet };
+export { Tearsheet as preview__Tearsheet } from './components/Tearsheet/next/Tearsheet.js';
+export { StackProvider } from './components/Tearsheet/next/StackContext.js';
 export { BigNumber as previewCandidate__BigNumber } from './components/BigNumber/BigNumber.js';
 export { Coachmark as previewCandidate__Coachmark } from './components/Coachmark/Coachmark.js';
 export { BEACON_KIND, COACHMARK_ALIGNMENT, COACHMARK_OVERLAY_KIND } from './components/Coachmark/utils/enums.js';

package/lib/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/lib/components/Coachmark/Coachmark.js

@@ -38,6 +38,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__*/React.forwardRef((_ref, ref) => {
@@ -217,6 +218,11 @@ const overlayRefType = typeof HTMLElement === 'undefined' ? index.default.object
 // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
 index.default.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/lib/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/lib/components/Coachmark/CoachmarkDragbar.js

@@ -35,6 +35,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.forwardRef((_ref, ref) => {
   let {
@@ -97,6 +98,12 @@ const CoachmarkDragbar = /*#__PURE__*/React.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/lib/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/lib/components/Coachmark/CoachmarkHeader.js

@@ -29,6 +29,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.forwardRef((_ref, ref) => {
   let {
@@ -55,6 +56,12 @@ const CoachmarkHeader = /*#__PURE__*/React.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/lib/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/lib/components/Coachmark/CoachmarkOverlay.js

@@ -34,6 +34,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__*/React.forwardRef((props, ref) => {
   const {

package/lib/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/lib/components/Coachmark/CoachmarkTagline.js

@@ -30,6 +30,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.forwardRef((_ref, ref) => {
   let {
@@ -66,6 +67,12 @@ const CoachmarkTagline = /*#__PURE__*/React.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/lib/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubble.js

@@ -12,6 +12,7 @@ var cx = require('classnames');
 var react = require('@carbon/react');
 var React = require('react');
 var settings = require('../../../../../settings.js');
+var useIsomorphicEffect = require('../../../../../global/js/hooks/useIsomorphicEffect.js');
 var floatingUi_reactDom = require('../../../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
 var floatingUi_dom = require('../../../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 
@@ -34,7 +35,7 @@ const CoachmarkBubble = /*#__PURE__*/React.forwardRef((props, ref) => {
   const tooltipRef = React.useRef(null);
   const arrowRef = React.useRef(null);
   const targetRef = React.useRef(null);
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     if (target) {
       if (typeof target === 'string') {
         if (target === '#' || target.trim() === '') {

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

@@ -9,6 +9,7 @@
 
 var React = require('react');
 var enums = require('./enums.js');
+var useIsomorphicEffect = require('../../../global/js/hooks/useIsomorphicEffect.js');
 
 /**
  * Detects when a user clicks outside of the element
@@ -21,10 +22,10 @@ var enums = require('./enums.js');
 function useClickOutsideElement(coachmarkRef, overlayRef, overlayKind, callback) {
   const cb = React.useRef(undefined);
   const isTooltip = overlayKind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     cb.current = callback;
   }, [callback]);
-  React.useEffect(() => {
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     function handleClickOutside(event) {
       const isOverlayOutside = overlayRef.current && !overlayRef.current.contains(event.target);
       const isOutsideCoachmark = coachmarkRef.current && !coachmarkRef.current.contains(event.target);

package/lib/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/lib/components/CoachmarkBeacon/CoachmarkBeacon.js

@@ -25,6 +25,7 @@ const defaults = {
 };
 /**
  * Use beacon for the target prop of a Coachmark component.
+ * @deprecated This component is deprecated.
  */
 const CoachmarkBeacon = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -53,6 +54,12 @@ const CoachmarkBeacon = /*#__PURE__*/React.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/lib/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/lib/components/CoachmarkButton/CoachmarkButton.js

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

package/lib/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/lib/components/CoachmarkFixed/CoachmarkFixed.js

@@ -40,6 +40,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.forwardRef((_ref, ref) => {
   let {
@@ -165,6 +166,12 @@ const CoachmarkFixed = /*#__PURE__*/React.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/lib/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/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js

@@ -21,6 +21,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.forwardRef((_ref, ref) => {
   let {

package/lib/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/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -49,6 +49,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.forwardRef((_ref, ref) => {
   let {

package/lib/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/lib/components/CoachmarkStack/CoachmarkStack.js

@@ -47,6 +47,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.forwardRef((_ref, ref) => {
   let {
@@ -215,6 +216,12 @@ const CoachmarkStack = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }), portalNode?.current ? /*#__PURE__*/ReactDOM.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/lib/components/CreateFullPage/CreateFullPage.js

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

package/lib/components/CreateTearsheet/CreateTearsheet.js

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

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -92,31 +92,11 @@ const CreateTearsheetStep = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   React.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.
   React.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);
@@ -141,7 +121,8 @@ const CreateTearsheetStep = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     return null;
   };
   return stepsContext ? /*#__PURE__*/React.createElement("div", {
-    ref: stepRef
+    ref: stepRef,
+    inert: stepNumber !== stepsContext?.currentStep
   }, /*#__PURE__*/React.createElement(react.Grid, _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className, {
       [`${blockClass}__step--hidden-step`]: stepNumber !== stepsContext?.currentStep,

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -13,11 +13,12 @@ var react = require('@carbon/react');
 var cx = require('classnames');
 var settings = require('../../../settings.js');
 var stateReducer = require('./addons/stateReducer.js');
+var useIsomorphicEffect = require('../../../global/js/hooks/useIsomorphicEffect.js');
 
 const blockClass = `${settings.pkg.prefix}--datagrid`;
 const SelectAll = datagridState => {
   const [windowSize, setWindowSize] = React.useState();
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     setWindowSize(window.innerWidth);
     /* istanbul ignore next */
     function updateSize() {

package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -16,6 +16,7 @@ var cx = require('classnames');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var settings = require('../../../settings.js');
+var useIsomorphicEffect = require('../../../global/js/hooks/useIsomorphicEffect.js');
 
 const blockClass = `${settings.pkg.prefix}--datagrid`;
 const SELECT_ALL_PAGE_ROWS = 'pageRows';
@@ -44,7 +45,7 @@ const SelectAllWithToggle = _ref => {
     }
   }, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
   const [windowSize, setWindowSize] = React.useState();
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);

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

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