@carbon/ibm-products 2.63.0 → 2.64.0

package/lib/components/Tearsheet/TearsheetShell.js

@@ -25,7 +25,8 @@ var useFocus = require('../../global/js/hooks/useFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-var _excluded = ["actions", "decorator", "ariaLabel", "children", "className", "closeIconDescription", "currentStep", "description", "hasCloseIcon", "hasError", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
+var _excluded = ["children"],
+  _excluded2 = ["actions", "decorator", "ariaLabel", "children", "className", "closeIconDescription", "currentStep", "description", "hasCloseIcon", "hasError", "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';
@@ -58,6 +59,18 @@ var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon
   return hasCloseIcon !== null && hasCloseIcon !== void 0 ? hasCloseIcon : tearsheetIsPassive(actions);
 };
 
+/**
+ * Since the Tearsheet has an H3 heading, any headings inside the Tearsheet should start at H4.
+ * This is a helper to do that.
+ */
+var SectionLevel3 = function SectionLevel3(_ref) {
+  var children = _ref.children,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(react.Section, _rollupPluginBabelHelpers.extends({
+    level: 3
+  }, rest), children);
+};
+
 /**
  *  TearSheetShell is used internally by TearSheet and TearSheetNarrow
  *
@@ -65,36 +78,36 @@ var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon
  *
  * See the canvas tab for the component API details.
  * */
-var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var actions = _ref.actions,
-    decorator = _ref.decorator,
-    ariaLabel = _ref.ariaLabel,
-    children = _ref.children,
-    className = _ref.className,
-    _ref$closeIconDescrip = _ref.closeIconDescription,
-    closeIconDescription = _ref$closeIconDescrip === void 0 ? 'Close' : _ref$closeIconDescrip,
-    currentStep = _ref.currentStep,
-    description = _ref.description,
-    hasCloseIcon = _ref.hasCloseIcon,
-    hasError = _ref.hasError,
-    headerActions = _ref.headerActions,
-    influencer = _ref.influencer,
-    influencerPosition = _ref.influencerPosition,
-    influencerWidth = _ref.influencerWidth,
-    label = _ref.label,
-    navigation = _ref.navigation,
-    onClose = _ref.onClose,
-    open = _ref.open,
-    portalTargetIn = _ref.portalTarget,
-    selectorPrimaryFocus = _ref.selectorPrimaryFocus,
-    _ref$selectorsFloatin = _ref.selectorsFloatingMenus,
-    selectorsFloatingMenus = _ref$selectorsFloatin === void 0 ? [] : _ref$selectorsFloatin,
-    size = _ref.size,
-    deprecated_slug = _ref.slug,
-    title = _ref.title,
-    verticalPosition = _ref.verticalPosition,
-    launcherButtonRef = _ref.launcherButtonRef,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var actions = _ref2.actions,
+    decorator = _ref2.decorator,
+    ariaLabel = _ref2.ariaLabel,
+    children = _ref2.children,
+    className = _ref2.className,
+    _ref2$closeIconDescri = _ref2.closeIconDescription,
+    closeIconDescription = _ref2$closeIconDescri === void 0 ? 'Close' : _ref2$closeIconDescri,
+    currentStep = _ref2.currentStep,
+    description = _ref2.description,
+    hasCloseIcon = _ref2.hasCloseIcon,
+    hasError = _ref2.hasError,
+    headerActions = _ref2.headerActions,
+    influencer = _ref2.influencer,
+    influencerPosition = _ref2.influencerPosition,
+    influencerWidth = _ref2.influencerWidth,
+    label = _ref2.label,
+    navigation = _ref2.navigation,
+    onClose = _ref2.onClose,
+    open = _ref2.open,
+    portalTargetIn = _ref2.portalTarget,
+    selectorPrimaryFocus = _ref2.selectorPrimaryFocus,
+    _ref2$selectorsFloati = _ref2.selectorsFloatingMenus,
+    selectorsFloatingMenus = _ref2$selectorsFloati === void 0 ? [] : _ref2$selectorsFloati,
+    size = _ref2.size,
+    deprecated_slug = _ref2.slug,
+    title = _ref2.title,
+    verticalPosition = _ref2.verticalPosition,
+    launcherButtonRef = _ref2.launcherButtonRef,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
   var carbonPrefix = react.usePrefix();
   var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
   var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
@@ -106,9 +119,9 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     width = _useResizeObserver.width;
   var prevOpen = usePreviousValue.usePreviousValue(open);
   var _useFocus = useFocus.useFocus(modalRef, selectorPrimaryFocus),
-    firstElement = _useFocus.firstElement,
-    keyDownListener = _useFocus.keyDownListener;
-  var modalRefValue = modalRef.current;
+    keyDownListener = _useFocus.keyDownListener,
+    claimFocus = _useFocus.claimFocus;
+  modalRef.current;
   var descriptionRef = React.useRef(null);
   var isOverflowing = checkForOverflow.checkHeightOverflow(descriptionRef.current);
   var descriptionContent = /*#__PURE__*/React.createElement("span", {
@@ -144,18 +157,32 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setPosition(newPosition);
   }
   React.useEffect(function () {
-    if (open && position === depth) {
-      // Focusing the first element or selectorPrimaryFocus element
-      useFocus.claimFocus(firstElement, modalRef, selectorPrimaryFocus);
+    if (open) {
+      claimFocus();
     }
-  }, [currentStep, depth, firstElement, modalRef, modalRefValue, open, position, selectorPrimaryFocus, hasError]);
+  }, [open, currentStep, effectiveHasCloseIcon, claimFocus]);
   React.useEffect(function () {
-    if (prevOpen && !open && launcherButtonRef) {
+    if (prevOpen && !open && launcherButtonRef !== null && launcherButtonRef !== void 0 && launcherButtonRef.current) {
       setTimeout(function () {
-        launcherButtonRef.current.focus();
+        launcherButtonRef === null || launcherButtonRef === void 0 || launcherButtonRef.current.focus();
       }, 0);
     }
-  }, [launcherButtonRef, open, prevOpen]);
+  }, [open, prevOpen, launcherButtonRef]);
+  React.useEffect(function () {
+    requestAnimationFrame(function () {
+      var _modalRef$current;
+      if (open && depth === position && !(modalRef !== null && modalRef !== void 0 && (_modalRef$current = modalRef.current) !== null && _modalRef$current !== void 0 && _modalRef$current.contains(document.activeElement))) {
+        claimFocus();
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [claimFocus, depth, modalRef, position]);
+  React.useEffect(function () {
+    var _modalRef$current2;
+    if (hasError && !(modalRef !== null && modalRef !== void 0 && (_modalRef$current2 = modalRef.current) !== null && _modalRef$current2 !== void 0 && _modalRef$current2.contains(document.activeElement))) {
+      claimFocus();
+    }
+  }, [claimFocus, hasError, modalRef]);
   React.useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
@@ -205,10 +232,10 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width);
     };
     if (modalRef.current) {
-      Object.entries(setScaleValues()).map(function (_ref4) {
-        var _ref5 = _rollupPluginBabelHelpers.slicedToArray(_ref4, 2),
-          key = _ref5[0],
-          value = _ref5[1];
+      Object.entries(setScaleValues()).map(function (_ref5) {
+        var _ref6 = _rollupPluginBabelHelpers.slicedToArray(_ref5, 2),
+          key = _ref6[0],
+          value = _ref6[1];
         modalRef.current.style.setProperty(key, String(value));
       });
     }
@@ -272,7 +299,8 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(carbonPrefix, "--modal-content ").concat(bc, "__body")
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: cx(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
-      neverRender: influencerPosition === 'right'
+      neverRender: influencerPosition === 'right',
+      element: SectionLevel3
     }, influencer), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: "".concat(bc, "__right")
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
@@ -281,10 +309,12 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: "".concat(bc, "__content"),
       alwaysRender: !!(influencer && influencerPosition === 'right'),
-      tabIndex: -1
+      tabIndex: -1,
+      element: SectionLevel3
     }, children), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: cx(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
-      neverRender: influencerPosition !== 'right'
+      neverRender: influencerPosition !== 'right',
+      element: SectionLevel3
     }, influencer)), includeActions && /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: "".concat(bc, "__button-container")
     }, /*#__PURE__*/React.createElement(ActionSet.ActionSet, {

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

@@ -11,5 +11,5 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
         all: any;
         specified: any;
     };
+    claimFocus: () => void;
 };
-export function claimFocus(firstElement: any, modalRef: any, selectorPrimaryFocus?: string | undefined): void;

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

@@ -17,7 +17,7 @@ var getSpecificElement = function getSpecificElement(parentEl, elementId) {
   return elementId && !(element !== null && element !== void 0 && element.disabled) ? element : null;
 };
 var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
-  var _getFocusable2, _getFocusable3, _getFocusable4, _getFocusable5;
+  var _getFocusable3, _getFocusable4, _getFocusable5, _getFocusable6;
   var carbonPrefix = react.usePrefix();
   var tearsheetBaseClass = "".concat(settings.pkg.prefix, "--tearsheet");
   var sidePanelBaseClass = "".concat(settings.pkg.prefix, "--side-panel");
@@ -92,40 +92,31 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
       return _ref.apply(this, arguments);
     };
   }();
+  var claimFocus = React.useCallback(function () {
+    var _window2;
+    var _getFocusable2 = getFocusable(),
+      first = _getFocusable2.first,
+      specified = _getFocusable2.specified;
+    if (specified && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specified)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none' && (specified === null || specified === void 0 ? void 0 : specified.tabIndex) !== -1) {
+      setTimeout(function () {
+        return specified.focus();
+      }, 0);
+    } else {
+      setTimeout(function () {
+        return first === null || first === void 0 ? void 0 : first.focus();
+      }, 0);
+    }
+  }, [getFocusable]);
   return {
-    firstElement: (_getFocusable2 = getFocusable()) === null || _getFocusable2 === void 0 ? void 0 : _getFocusable2.first,
-    lastElement: (_getFocusable3 = getFocusable()) === null || _getFocusable3 === void 0 ? void 0 : _getFocusable3.last,
-    allElements: (_getFocusable4 = getFocusable()) === null || _getFocusable4 === void 0 ? void 0 : _getFocusable4.all,
-    specifiedElement: (_getFocusable5 = getFocusable()) === null || _getFocusable5 === void 0 ? void 0 : _getFocusable5.specified,
+    firstElement: (_getFocusable3 = getFocusable()) === null || _getFocusable3 === void 0 ? void 0 : _getFocusable3.first,
+    lastElement: (_getFocusable4 = getFocusable()) === null || _getFocusable4 === void 0 ? void 0 : _getFocusable4.last,
+    allElements: (_getFocusable5 = getFocusable()) === null || _getFocusable5 === void 0 ? void 0 : _getFocusable5.all,
+    specifiedElement: (_getFocusable6 = getFocusable()) === null || _getFocusable6 === void 0 ? void 0 : _getFocusable6.specified,
     keyDownListener: handleKeyDown,
-    getFocusable: getFocusable
+    getFocusable: getFocusable,
+    claimFocus: claimFocus
   };
 };
 
-/**
- *
- * @param {*} firstElement
- * @param {*} modalRef
- * @param {string | undefined} selectorPrimaryFocus
- */
-var claimFocus = function claimFocus(firstElement, modalRef) {
-  var _window2, _specifiedEl;
-  var selectorPrimaryFocus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
-  var specifiedEl;
-  if (selectorPrimaryFocus) {
-    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' && ((_specifiedEl = specifiedEl) === null || _specifiedEl === void 0 ? void 0 : _specifiedEl.tabIndex) !== -1) {
-    setTimeout(function () {
-      return specifiedEl.focus();
-    }, 0);
-  } else {
-    setTimeout(function () {
-      return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-    }, 0);
-  }
-};
-
-exports.claimFocus = claimFocus;
 exports.getSpecificElement = getSpecificElement;
 exports.useFocus = useFocus;

package/lib/node_modules/@carbon/icons-react/es/Icon.js

@@ -10,7 +10,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../../icon-helpers/es/index.js');
+var index = require('../node_modules/@carbon/icon-helpers/es/index.js');
 var index$1 = require('../../../../_virtual/index.js');
 var React = require('react');
 

package/lib/node_modules/@carbon/{icon-helpers → icons-react/node_modules/@carbon/icon-helpers}/es/index.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.63.0",
+  "version": "2.64.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -53,11 +53,11 @@
     "telemetry-config": "ibmtelemetry-config generate --id 495342db-5046-4ecf-85ea-9ffceb6f8cdf --endpoint https://collector-prod.1am6wm210aow.us-south.codeengine.appdomain.cloud/v1/metrics --files ./src/components/**/*.(tsx|js|jsx)",
     "test": "jest --colors",
     "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency), chalk (issue #1596)",
-    "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^namor|^framer-motion)/'"
+    "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^namor)/'"
   },
   "devDependencies": {
     "@babel/cli": "^7.26.4",
-    "@babel/core": "^7.26.9",
+    "@babel/core": "^7.26.10",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-export-default-from": "^7.25.9",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
@@ -67,12 +67,12 @@
     "@babel/preset-typescript": "^7.26.0",
     "@ibm/telemetry-js-config-generator": "^2.0.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.2",
-    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.2",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.21.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.22.0",
     "chalk": "^4.1.2",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
@@ -81,22 +81,22 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.22.0",
+    "jest-config-ibm-cloud-cognitive": "^1.23.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^17.1.15",
     "npm-run-all": "^4.1.5",
     "rimraf": "^6.0.1",
-    "rollup": "^4.34.8",
+    "rollup": "^4.35.0",
     "rollup-plugin-strip-banner": "^3.1.0",
     "sass": "^1.85.1",
     "typescript-config-carbon": "^0.3.0",
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.9",
+    "@babel/runtime": "^7.26.10",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.59.0",
+    "@carbon/ibm-products-styles": "^2.60.0",
     "@carbon/telemetry": "^0.1.0",
     "@carbon/utilities": "^0.4.0",
     "@dnd-kit/core": "^6.3.1",
@@ -104,7 +104,6 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@ibm/telemetry-js": "^1.9.1",
-    "framer-motion": "^6.5.1 < 7",
     "react-table": "^7.8.0",
     "react-window": "^1.8.11"
   },
@@ -118,5 +117,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0"
   },
-  "gitHead": "5e391143783f07e648878658b2895f160395fe93"
+  "gitHead": "cc3ffcb1d51b9f3d99550cb9768deb8bc22eab5e"
 }

package/telemetry.yml

@@ -230,6 +230,7 @@ collect:
         - onContextMenuValue
         - onDataUpdate
         - onFocus
+        - onKeyDown
         - onMount
         - onMouseEnter
         - onMouseLeave
@@ -504,7 +505,6 @@ collect:
         - componentName
         # Card
         - getStarted
-        - onKeyDown
         # CardFooter
         - hasButton
         # CardHeader