@carbon/ibm-products 2.54.0-canary.70 → 2.54.0-canary.71

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -196,7 +196,8 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     slug: slug,
     title: title,
     verticalPosition: verticalPosition,
-    closeIconDescription: ''
+    closeIconDescription: '',
+    currentStep: currentStep
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef

package/es/components/Tearsheet/TearsheetShell.d.ts

@@ -19,6 +19,10 @@ interface TearsheetShellProps extends PropsWithChildren {
      * An optional class or classes to be added to the outermost element.
      */
     className?: string;
+    /**
+     * Used to track the current step on components which use `StepsContext` and `TearsheetShell`
+     */
+    currentStep?: number;
     /**
      * A description of the flow, displayed in the header area of the tearsheet.
      */

package/es/components/Tearsheet/TearsheetShell.js

@@ -21,7 +21,7 @@ import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import { useFocus, claimFocus } from '../../global/js/hooks/useFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 
-var _excluded = ["actions", "aiLabel", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
+var _excluded = ["actions", "aiLabel", "ariaLabel", "children", "className", "closeIconDescription", "currentStep", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(pkg.prefix, "--tearsheet");
 var componentName = 'TearsheetShell';
@@ -68,6 +68,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     children = _ref.children,
     className = _ref.className,
     closeIconDescription = _ref.closeIconDescription,
+    currentStep = _ref.currentStep,
     description = _ref.description,
     hasCloseIcon = _ref.hasCloseIcon,
     headerActions = _ref.headerActions,
@@ -100,8 +101,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var prevOpen = usePreviousValue(open);
   var _useFocus = useFocus(modalRef, selectorPrimaryFocus),
     firstElement = _useFocus.firstElement,
-    keyDownListener = _useFocus.keyDownListener,
-    specifiedElement = _useFocus.specifiedElement;
+    keyDownListener = _useFocus.keyDownListener;
   var modalRefValue = modalRef.current;
 
   // Function to strip html tags out of a string.
@@ -137,23 +137,12 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     setDepth(newDepth);
     setPosition(newPosition);
   }
-  handleStackChange.checkFocus = function () {
-    // if we are now the topmost tearsheet, ensure we have focus
-    if (open && position === depth && modalRefValue && !modalRefValue.contains(document.activeElement)) {
-      handleStackChange.claimFocus();
-    }
-  };
-
-  // Callback to give the tearsheet the opportunity to claim focus
-  handleStackChange.claimFocus = function () {
-    claimFocus(firstElement, modalRef, selectorPrimaryFocus);
-  };
   useEffect(function () {
-    if (open) {
+    if (open && position === depth) {
       // Focusing the first element or selectorPrimaryFocus element
       claimFocus(firstElement, modalRef, selectorPrimaryFocus);
     }
-  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
+  }, [currentStep, depth, firstElement, modalRef, modalRefValue, open, position, selectorPrimaryFocus]);
   useEffect(function () {
     if (prevOpen && !open && launcherButtonRef) {
       setTimeout(function () {
@@ -161,22 +150,10 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       }, 0);
     }
   }, [launcherButtonRef, open, prevOpen]);
-  useEffect(function () {
-    if (open && position !== depth) {
-      setTimeout(function () {
-        if (selectorPrimaryFocus) {
-          return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
-        }
-        firstElement === null || firstElement === void 0 || firstElement.focus();
-      }, 0);
-    }
-  }, [position, depth, firstElement, open, specifiedElement, selectorPrimaryFocus]);
   useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
-        var _handler$checkFocus;
         handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
-        (_handler$checkFocus = handler.checkFocus) === null || _handler$checkFocus === void 0 || _handler$checkFocus.call(handler);
       });
     };
 
@@ -211,14 +188,6 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       }
     };
   }, [open, size]);
-  function handleFocus() {
-    // If something within us is receiving focus but we are not the topmost
-    // stacked tearsheet, transfer focus to the topmost tearsheet instead
-    if (position < depth) {
-      var _stack$open$claimFocu, _stack$open;
-      (_stack$open$claimFocu = (_stack$open = stack.open[stack.open.length - 1]).claimFocus) === null || _stack$open$claimFocu === void 0 || _stack$open$claimFocu.call(_stack$open);
-    }
-  }
   if (position <= depth) {
     var _prevDepth$current;
     // Include a modal header if and only if one or more of these is given.
@@ -250,7 +219,6 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       onClose: onClose,
       open: open,
       selectorPrimaryFocus: selectorPrimaryFocus,
-      onFocus: handleFocus,
       onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,

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

@@ -12,4 +12,4 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
         specified: any;
     };
 };
-export function claimFocus(firstElement: any, modalRef: any, selectorPrimaryFocus?: string | undefined): any;
+export function claimFocus(firstElement: any, modalRef: any, selectorPrimaryFocus?: string | undefined): void;

package/es/global/js/hooks/useFocus.js

@@ -116,12 +116,15 @@ var claimFocus = function claimFocus(firstElement, modalRef) {
     var _window2;
     var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
     if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
-      return specifiedEl.focus();
+      setTimeout(function () {
+        return specifiedEl.focus();
+      }, 0);
     }
+  } else {
+    setTimeout(function () {
+      return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+    }, 0);
   }
-  setTimeout(function () {
-    return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-  }, 0);
 };
 
 export { claimFocus, getSpecificElement, useFocus };

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -198,7 +198,8 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     slug: slug,
     title: title,
     verticalPosition: verticalPosition,
-    closeIconDescription: ''
+    closeIconDescription: '',
+    currentStep: currentStep
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef

package/lib/components/Tearsheet/TearsheetShell.d.ts

@@ -19,6 +19,10 @@ interface TearsheetShellProps extends PropsWithChildren {
      * An optional class or classes to be added to the outermost element.
      */
     className?: string;
+    /**
+     * Used to track the current step on components which use `StepsContext` and `TearsheetShell`
+     */
+    currentStep?: number;
     /**
      * A description of the flow, displayed in the header area of the tearsheet.
      */

package/lib/components/Tearsheet/TearsheetShell.js

@@ -23,7 +23,7 @@ var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
-var _excluded = ["actions", "aiLabel", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
+var _excluded = ["actions", "aiLabel", "ariaLabel", "children", "className", "closeIconDescription", "currentStep", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(settings.pkg.prefix, "--tearsheet");
 var componentName = 'TearsheetShell';
@@ -70,6 +70,7 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children = _ref.children,
     className = _ref.className,
     closeIconDescription = _ref.closeIconDescription,
+    currentStep = _ref.currentStep,
     description = _ref.description,
     hasCloseIcon = _ref.hasCloseIcon,
     headerActions = _ref.headerActions,
@@ -102,8 +103,7 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var prevOpen = usePreviousValue.usePreviousValue(open);
   var _useFocus = useFocus.useFocus(modalRef, selectorPrimaryFocus),
     firstElement = _useFocus.firstElement,
-    keyDownListener = _useFocus.keyDownListener,
-    specifiedElement = _useFocus.specifiedElement;
+    keyDownListener = _useFocus.keyDownListener;
   var modalRefValue = modalRef.current;
 
   // Function to strip html tags out of a string.
@@ -139,23 +139,12 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setDepth(newDepth);
     setPosition(newPosition);
   }
-  handleStackChange.checkFocus = function () {
-    // if we are now the topmost tearsheet, ensure we have focus
-    if (open && position === depth && modalRefValue && !modalRefValue.contains(document.activeElement)) {
-      handleStackChange.claimFocus();
-    }
-  };
-
-  // Callback to give the tearsheet the opportunity to claim focus
-  handleStackChange.claimFocus = function () {
-    useFocus.claimFocus(firstElement, modalRef, selectorPrimaryFocus);
-  };
   React.useEffect(function () {
-    if (open) {
+    if (open && position === depth) {
       // Focusing the first element or selectorPrimaryFocus element
       useFocus.claimFocus(firstElement, modalRef, selectorPrimaryFocus);
     }
-  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
+  }, [currentStep, depth, firstElement, modalRef, modalRefValue, open, position, selectorPrimaryFocus]);
   React.useEffect(function () {
     if (prevOpen && !open && launcherButtonRef) {
       setTimeout(function () {
@@ -163,22 +152,10 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }, 0);
     }
   }, [launcherButtonRef, open, prevOpen]);
-  React.useEffect(function () {
-    if (open && position !== depth) {
-      setTimeout(function () {
-        if (selectorPrimaryFocus) {
-          return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
-        }
-        firstElement === null || firstElement === void 0 || firstElement.focus();
-      }, 0);
-    }
-  }, [position, depth, firstElement, open, specifiedElement, selectorPrimaryFocus]);
   React.useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
-        var _handler$checkFocus;
         handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
-        (_handler$checkFocus = handler.checkFocus) === null || _handler$checkFocus === void 0 || _handler$checkFocus.call(handler);
       });
     };
 
@@ -213,14 +190,6 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     };
   }, [open, size]);
-  function handleFocus() {
-    // If something within us is receiving focus but we are not the topmost
-    // stacked tearsheet, transfer focus to the topmost tearsheet instead
-    if (position < depth) {
-      var _stack$open$claimFocu, _stack$open;
-      (_stack$open$claimFocu = (_stack$open = stack.open[stack.open.length - 1]).claimFocus) === null || _stack$open$claimFocu === void 0 || _stack$open$claimFocu.call(_stack$open);
-    }
-  }
   if (position <= depth) {
     var _prevDepth$current;
     // Include a modal header if and only if one or more of these is given.
@@ -252,7 +221,6 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onClose: onClose,
       open: open,
       selectorPrimaryFocus: selectorPrimaryFocus,
-      onFocus: handleFocus,
       onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,

package/lib/global/js/hooks/useFocus.d.ts

@@ -12,4 +12,4 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
         specified: any;
     };
 };
-export function claimFocus(firstElement: any, modalRef: any, selectorPrimaryFocus?: string | undefined): any;
+export function claimFocus(firstElement: any, modalRef: any, selectorPrimaryFocus?: string | undefined): void;

package/lib/global/js/hooks/useFocus.js

@@ -118,12 +118,15 @@ var claimFocus = function claimFocus(firstElement, modalRef) {
     var _window2;
     var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
     if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
-      return specifiedEl.focus();
+      setTimeout(function () {
+        return specifiedEl.focus();
+      }, 0);
     }
+  } else {
+    setTimeout(function () {
+      return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+    }, 0);
   }
-  setTimeout(function () {
-    return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-  }, 0);
 };
 
 exports.claimFocus = claimFocus;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.54.0-canary.70+13e845c84",
+  "version": "2.54.0-canary.71+1c918d160",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "13e845c84e1583e4cdc5d037f31a8c3b826fabfc"
+  "gitHead": "1c918d1605f2a370988d7ade503c1e57e0d43df1"
 }