@carbon/react 1.96.0 → 1.97.0

package/es/components/ComboBox/ComboBox.js

@@ -531,6 +531,10 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   });
+
+  // Keep the dropdown highlight in sync with either the controlled value or
+  // Downshift's own selection when uncontrolled.
+  const menuSelectedItem = typeof selectedItemProp !== 'undefined' ? selectedItemProp : selectedItem;
   useEffect(() => {
     // Used to expose the downshift actions to consumers for use with downshiftProps
     // An odd pattern, here we mutate the value stored in the ref provided from the consumer.
@@ -758,13 +762,13 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     } = itemProps;
     return /*#__PURE__*/React.createElement(ListBox.MenuItem, _extends({
       key: itemProps.id,
-      isActive: isEqual(selectedItem, item),
+      isActive: isEqual(menuSelectedItem, item),
       isHighlighted: highlightedIndex === index,
       title: title,
       disabled: disabled
     }, modifiedItemProps), ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _extends({
       key: itemProps.id
-    }, item)) : itemToString(item), isEqual(selectedItem, item) && /*#__PURE__*/React.createElement(Checkmark, {
+    }, item)) : itemToString(item), isEqual(menuSelectedItem, item) && /*#__PURE__*/React.createElement(Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
   }) : null)), helperText && !invalid && !warn && !isFluid && /*#__PURE__*/React.createElement(Text, {

package/es/components/ComposedModal/ComposedModal.js

@@ -206,7 +206,7 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
     // behavior by explicitly setting preventCloseOnClickOutside to false,
     // rather than just leaving it undefined.
     !isPassive && preventCloseOnClickOutside === false;
-    if (shouldCloseOnOutsideClick && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
+    if (shouldCloseOnOutsideClick && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus, prefix) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
       closeModal(evt);
     }
   }
@@ -230,7 +230,8 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
         endTrapNode: endSentinelNode,
         currentActiveNode,
         oldActiveNode,
-        selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean)
+        selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean),
+        prefix
       });
     }
 

package/es/components/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.

package/es/components/DataTableSkeleton/DataTableSkeleton.js

@@ -62,7 +62,7 @@ const DataTableSkeleton = ({
   }, rest), /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, columnsArray.map(i => /*#__PURE__*/React.createElement("th", {
     key: i
   }, headers ? /*#__PURE__*/React.createElement("div", {
-    className: "cds--table-header-label"
+    className: `${prefix}--table-header-label`
   }, headers[i]?.header) : _span2 || (_span2 = /*#__PURE__*/React.createElement("span", null)))))), /*#__PURE__*/React.createElement("tbody", null, rows)));
 };
 DataTableSkeleton.propTypes = {

package/es/components/Modal/Modal.js

@@ -167,7 +167,7 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
     // behavior by explicitly setting preventCloseOnClickOutside to false,
     // rather than just leaving it undefined.
     !passiveModal && preventCloseOnClickOutside === false;
-    if (shouldCloseOnOutsideClick && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
+    if (shouldCloseOnOutsideClick && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus, prefix) && innerModal.current && !innerModal.current.contains(target)) {
       onRequestClose(evt);
     }
   }
@@ -194,7 +194,8 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
           endTrapNode,
           currentActiveNode,
           oldActiveNode,
-          selectorsFloatingMenus
+          selectorsFloatingMenus,
+          prefix
         });
         if (wrapFocusTimeout.current) {
           clearTimeout(wrapFocusTimeout.current);

package/es/components/Notification/Notification.js

@@ -509,7 +509,7 @@ function ActionableNotification({
   const focusTrapWithoutSentinels = focusTrapWithoutSentinelsFlag || deprecatedFlag;
   useIsomorphicEffect(() => {
     if (hasFocus && role === 'alertdialog') {
-      const button = document.querySelector('button.cds--actionable-notification__action-button');
+      const button = document.querySelector(`button.${prefix}--actionable-notification__action-button`);
       button?.focus();
     }
   });
@@ -532,7 +532,8 @@ function ActionableNotification({
         startTrapNode,
         endTrapNode,
         currentActiveNode,
-        oldActiveNode
+        oldActiveNode,
+        prefix
       });
     }
   }

package/es/components/Popover/index.js

@@ -116,8 +116,8 @@ forwardRef) {
       // If a value is not set via a custom property, provide a default value that matches the
       // default values defined in the sass style file
       const getStyle = window.getComputedStyle(popover.current, null);
-      const offsetProperty = getStyle.getPropertyValue('--cds-popover-offset');
-      const caretProperty = getStyle.getPropertyValue('--cds-popover-caret-height');
+      const offsetProperty = getStyle.getPropertyValue(`--${prefix}-popover-offset`);
+      const caretProperty = getStyle.getPropertyValue(`--${prefix}-popover-caret-height`);
 
       // Handle if the property values are in px or rem.
       // We want to store just the base number value without a unit suffix

package/es/components/RadioTile/RadioTile.d.ts

@@ -69,5 +69,5 @@ export interface RadioTileProps {
      */
     required?: boolean;
 }
-declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps & React.RefAttributes<HTMLInputElement>>;
+declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps & React.AriaAttributes & React.RefAttributes<HTMLInputElement>>;
 export default RadioTile;

package/es/components/RadioTile/RadioTile.js

@@ -51,6 +51,11 @@ const RadioTile = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--tile--decorator`]: decorator,
     [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   });
+  const {
+    'aria-describedby': ariaDescribedBy,
+    'aria-labelledby': ariaLabelledBy,
+    ...labelProps
+  } = rest;
   const v12TileRadioIcons = useFeatureFlag('enable-v12-tile-radio-icons');
   function icon() {
     if (v12TileRadioIcons) {
@@ -79,7 +84,7 @@ const RadioTile = /*#__PURE__*/React.forwardRef(({
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
     size: 'xs'
   }) : candidate;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", _extends({
     checked: checked,
     className: `${prefix}--tile-input`,
     disabled: disabled,
@@ -89,10 +94,15 @@ const RadioTile = /*#__PURE__*/React.forwardRef(({
     onKeyDown: !disabled ? handleOnKeyDown : undefined,
     tabIndex: !disabled ? tabIndex : undefined,
     type: "radio",
-    value: value,
+    value: value
+  }, ariaDescribedBy && {
+    'aria-describedby': ariaDescribedBy
+  }, ariaLabelledBy && {
+    'aria-labelledby': ariaLabelledBy
+  }, {
     ref: ref,
     required: required
-  }), /*#__PURE__*/React.createElement("label", _extends({}, rest, {
+  })), /*#__PURE__*/React.createElement("label", _extends({}, labelProps, {
     htmlFor: inputId,
     className: className
   }), /*#__PURE__*/React.createElement("span", {

package/es/components/Tooltip/Tooltip.js

@@ -36,6 +36,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
   closeOnActivation = false,
   dropShadow = false,
   highContrast = true,
+  // TODO: remove in v12, highContrast should not be configurable
   ...rest
 }, ref) => {
   const tooltipRef = useRef(null);
@@ -167,7 +168,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
       align: align,
       className: cx(`${prefix}--tooltip`, customClassName),
       dropShadow: dropShadow,
-      highContrast: highContrast,
+      highContrast: highContrast // TODO: v12 hard-set highContrast to true
+      ,
       onKeyDown: onKeyDown,
       onMouseLeave: onMouseLeave,
       open: open
@@ -250,6 +252,8 @@ Tooltip.propTypes = {
    * Render the component using the high-contrast theme
    */
   highContrast: PropTypes.bool,
+  // TODO: remove in v12, highContrast should not be configurable
+
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.

package/es/internal/FloatingMenu.js

@@ -257,7 +257,8 @@ const FloatingMenu = ({
         startTrapNode: startSentinelRef.current,
         endTrapNode: endSentinelRef.current,
         currentActiveNode: relatedTarget,
-        oldActiveNode: target
+        oldActiveNode: target,
+        prefix
       });
     }
   };

package/es/internal/wrapFocus.d.ts

@@ -14,12 +14,12 @@
  * @returns {boolean} Whether the node or one of its ancestors is in a floating
  * menu.
  */
-export declare const elementOrParentIsFloatingMenu: (node: Node, selectorsFloatingMenus?: string[]) => boolean;
+export declare const elementOrParentIsFloatingMenu: (node: Node, selectorsFloatingMenus?: string[], prefix?: string) => boolean;
 /**
  * Ensures the focus is kept within the given container by implementing
  * "focus-wrap" behavior.
  */
-export declare const wrapFocus: ({ bodyNode, startTrapNode, endTrapNode, currentActiveNode, oldActiveNode, selectorsFloatingMenus, }: {
+export declare const wrapFocus: ({ bodyNode, startTrapNode, endTrapNode, currentActiveNode, oldActiveNode, selectorsFloatingMenus, prefix, }: {
     /** The DOM node of the container. */
     bodyNode: HTMLElement | null;
     /** The start sentinel node for focus trapping. */
@@ -32,6 +32,8 @@ export declare const wrapFocus: ({ bodyNode, startTrapNode, endTrapNode, current
     oldActiveNode: HTMLElement;
     /** CSS selectors for floating menus. */
     selectorsFloatingMenus?: string[];
+    /** Classname prefix for Carbon selectors. */
+    prefix?: string;
 }) => void;
 /**
  * Ensures the focus is kept in the given container, implementing "focus-wrap"

package/es/internal/wrapFocus.js

@@ -30,9 +30,9 @@ const DOCUMENT_POSITION_BROAD_FOLLOWING = typeof Node !== 'undefined' ? Node.DOC
  * @returns {boolean} Whether the node or one of its ancestors is in a floating
  * menu.
  */
-const elementOrParentIsFloatingMenu = (node, selectorsFloatingMenus = []) => {
+const elementOrParentIsFloatingMenu = (node, selectorsFloatingMenus = [], prefix = 'cds') => {
   if (node instanceof Element && typeof node.closest === 'function') {
-    const allSelectorsFloatingMenus = ['.cds--overflow-menu-options', '.cds--tooltip', '.flatpickr-calendar', ...selectorsFloatingMenus];
+    const allSelectorsFloatingMenus = [`.${prefix}--overflow-menu-options`, `.${prefix}--tooltip`, '.flatpickr-calendar', ...selectorsFloatingMenus];
     return allSelectorsFloatingMenus.some(selector => !!node.closest(selector));
   }
   return false;
@@ -48,9 +48,10 @@ const wrapFocus = ({
   endTrapNode,
   currentActiveNode,
   oldActiveNode,
-  selectorsFloatingMenus
+  selectorsFloatingMenus,
+  prefix = 'cds'
 }) => {
-  if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
+  if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus, prefix)) {
     const comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
     if (currentActiveNode === startTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_PRECEDING) {
       const tabbableElement = Array.from(bodyNode.querySelectorAll(selectorTabbable)).reverse().find(({

package/lib/components/ComboBox/ComboBox.js

@@ -535,6 +535,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     }
   });
+
+  // Keep the dropdown highlight in sync with either the controlled value or
+  // Downshift's own selection when uncontrolled.
+  const menuSelectedItem = typeof selectedItemProp !== 'undefined' ? selectedItemProp : selectedItem;
   React.useEffect(() => {
     // Used to expose the downshift actions to consumers for use with downshiftProps
     // An odd pattern, here we mutate the value stored in the ref provided from the consumer.
@@ -762,13 +766,13 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = itemProps;
     return /*#__PURE__*/React.createElement(index$2.default.MenuItem, _rollupPluginBabelHelpers.extends({
       key: itemProps.id,
-      isActive: isEqual(selectedItem, item),
+      isActive: isEqual(menuSelectedItem, item),
       isHighlighted: highlightedIndex === index,
       title: title,
       disabled: disabled
     }, modifiedItemProps), ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
       key: itemProps.id
-    }, item)) : itemToString(item), isEqual(selectedItem, item) && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
+    }, item)) : itemToString(item), isEqual(menuSelectedItem, item) && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
   }) : null)), helperText && !invalid && !warn && !isFluid && /*#__PURE__*/React.createElement(Text.Text, {

package/lib/components/ComposedModal/ComposedModal.js

@@ -210,7 +210,7 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
     // behavior by explicitly setting preventCloseOnClickOutside to false,
     // rather than just leaving it undefined.
     !isPassive && preventCloseOnClickOutside === false;
-    if (shouldCloseOnOutsideClick && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
+    if (shouldCloseOnOutsideClick && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus, prefix) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
       closeModal(evt);
     }
   }
@@ -234,7 +234,8 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
         endTrapNode: endSentinelNode,
         currentActiveNode,
         oldActiveNode,
-        selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean)
+        selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean),
+        prefix
       });
     }
 

package/lib/components/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.

package/lib/components/DataTableSkeleton/DataTableSkeleton.js

@@ -66,7 +66,7 @@ const DataTableSkeleton = ({
   }, rest), /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, columnsArray.map(i => /*#__PURE__*/React.createElement("th", {
     key: i
   }, headers ? /*#__PURE__*/React.createElement("div", {
-    className: "cds--table-header-label"
+    className: `${prefix}--table-header-label`
   }, headers[i]?.header) : _span2 || (_span2 = /*#__PURE__*/React.createElement("span", null)))))), /*#__PURE__*/React.createElement("tbody", null, rows)));
 };
 DataTableSkeleton.propTypes = {

package/lib/components/Modal/Modal.js

@@ -171,7 +171,7 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
     // behavior by explicitly setting preventCloseOnClickOutside to false,
     // rather than just leaving it undefined.
     !passiveModal && preventCloseOnClickOutside === false;
-    if (shouldCloseOnOutsideClick && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
+    if (shouldCloseOnOutsideClick && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus, prefix) && innerModal.current && !innerModal.current.contains(target)) {
       onRequestClose(evt);
     }
   }
@@ -198,7 +198,8 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
           endTrapNode,
           currentActiveNode,
           oldActiveNode,
-          selectorsFloatingMenus
+          selectorsFloatingMenus,
+          prefix
         });
         if (wrapFocusTimeout.current) {
           clearTimeout(wrapFocusTimeout.current);

package/lib/components/Notification/Notification.js

@@ -511,7 +511,7 @@ function ActionableNotification({
   const focusTrapWithoutSentinels = focusTrapWithoutSentinelsFlag || deprecatedFlag;
   useIsomorphicEffect.default(() => {
     if (hasFocus && role === 'alertdialog') {
-      const button = document.querySelector('button.cds--actionable-notification__action-button');
+      const button = document.querySelector(`button.${prefix}--actionable-notification__action-button`);
       button?.focus();
     }
   });
@@ -534,7 +534,8 @@ function ActionableNotification({
         startTrapNode,
         endTrapNode,
         currentActiveNode,
-        oldActiveNode
+        oldActiveNode,
+        prefix
       });
     }
   }

package/lib/components/Popover/index.js

@@ -118,8 +118,8 @@ forwardRef) {
       // If a value is not set via a custom property, provide a default value that matches the
       // default values defined in the sass style file
       const getStyle = window.getComputedStyle(popover.current, null);
-      const offsetProperty = getStyle.getPropertyValue('--cds-popover-offset');
-      const caretProperty = getStyle.getPropertyValue('--cds-popover-caret-height');
+      const offsetProperty = getStyle.getPropertyValue(`--${prefix}-popover-offset`);
+      const caretProperty = getStyle.getPropertyValue(`--${prefix}-popover-caret-height`);
 
       // Handle if the property values are in px or rem.
       // We want to store just the base number value without a unit suffix

package/lib/components/RadioTile/RadioTile.d.ts

@@ -69,5 +69,5 @@ export interface RadioTileProps {
      */
     required?: boolean;
 }
-declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps & React.RefAttributes<HTMLInputElement>>;
+declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps & React.AriaAttributes & React.RefAttributes<HTMLInputElement>>;
 export default RadioTile;

package/lib/components/RadioTile/RadioTile.js

@@ -55,6 +55,11 @@ const RadioTile = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--tile--decorator`]: decorator,
     [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   });
+  const {
+    'aria-describedby': ariaDescribedBy,
+    'aria-labelledby': ariaLabelledBy,
+    ...labelProps
+  } = rest;
   const v12TileRadioIcons = index.useFeatureFlag('enable-v12-tile-radio-icons');
   function icon() {
     if (v12TileRadioIcons) {
@@ -83,7 +88,7 @@ const RadioTile = /*#__PURE__*/React.forwardRef(({
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'xs'
   }) : candidate;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", _rollupPluginBabelHelpers.extends({
     checked: checked,
     className: `${prefix}--tile-input`,
     disabled: disabled,
@@ -93,10 +98,15 @@ const RadioTile = /*#__PURE__*/React.forwardRef(({
     onKeyDown: !disabled ? handleOnKeyDown : undefined,
     tabIndex: !disabled ? tabIndex : undefined,
     type: "radio",
-    value: value,
+    value: value
+  }, ariaDescribedBy && {
+    'aria-describedby': ariaDescribedBy
+  }, ariaLabelledBy && {
+    'aria-labelledby': ariaLabelledBy
+  }, {
     ref: ref,
     required: required
-  }), /*#__PURE__*/React.createElement("label", _rollupPluginBabelHelpers.extends({}, rest, {
+  })), /*#__PURE__*/React.createElement("label", _rollupPluginBabelHelpers.extends({}, labelProps, {
     htmlFor: inputId,
     className: className
   }), /*#__PURE__*/React.createElement("span", {

package/lib/components/Tooltip/Tooltip.js

@@ -38,6 +38,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
   closeOnActivation = false,
   dropShadow = false,
   highContrast = true,
+  // TODO: remove in v12, highContrast should not be configurable
   ...rest
 }, ref) => {
   const tooltipRef = React.useRef(null);
@@ -169,7 +170,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
       align: align,
       className: cx(`${prefix}--tooltip`, customClassName),
       dropShadow: dropShadow,
-      highContrast: highContrast,
+      highContrast: highContrast // TODO: v12 hard-set highContrast to true
+      ,
       onKeyDown: onKeyDown,
       onMouseLeave: onMouseLeave,
       open: open
@@ -252,6 +254,8 @@ Tooltip.propTypes = {
    * Render the component using the high-contrast theme
    */
   highContrast: PropTypes.bool,
+  // TODO: remove in v12, highContrast should not be configurable
+
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.

package/lib/internal/FloatingMenu.js

@@ -278,7 +278,8 @@ const FloatingMenu = ({
         startTrapNode: startSentinelRef.current,
         endTrapNode: endSentinelRef.current,
         currentActiveNode: relatedTarget,
-        oldActiveNode: target
+        oldActiveNode: target,
+        prefix
       });
     }
   };

package/lib/internal/wrapFocus.d.ts

@@ -14,12 +14,12 @@
  * @returns {boolean} Whether the node or one of its ancestors is in a floating
  * menu.
  */
-export declare const elementOrParentIsFloatingMenu: (node: Node, selectorsFloatingMenus?: string[]) => boolean;
+export declare const elementOrParentIsFloatingMenu: (node: Node, selectorsFloatingMenus?: string[], prefix?: string) => boolean;
 /**
  * Ensures the focus is kept within the given container by implementing
  * "focus-wrap" behavior.
  */
-export declare const wrapFocus: ({ bodyNode, startTrapNode, endTrapNode, currentActiveNode, oldActiveNode, selectorsFloatingMenus, }: {
+export declare const wrapFocus: ({ bodyNode, startTrapNode, endTrapNode, currentActiveNode, oldActiveNode, selectorsFloatingMenus, prefix, }: {
     /** The DOM node of the container. */
     bodyNode: HTMLElement | null;
     /** The start sentinel node for focus trapping. */
@@ -32,6 +32,8 @@ export declare const wrapFocus: ({ bodyNode, startTrapNode, endTrapNode, current
     oldActiveNode: HTMLElement;
     /** CSS selectors for floating menus. */
     selectorsFloatingMenus?: string[];
+    /** Classname prefix for Carbon selectors. */
+    prefix?: string;
 }) => void;
 /**
  * Ensures the focus is kept in the given container, implementing "focus-wrap"

package/lib/internal/wrapFocus.js

@@ -32,9 +32,9 @@ const DOCUMENT_POSITION_BROAD_FOLLOWING = typeof Node !== 'undefined' ? Node.DOC
  * @returns {boolean} Whether the node or one of its ancestors is in a floating
  * menu.
  */
-const elementOrParentIsFloatingMenu = (node, selectorsFloatingMenus = []) => {
+const elementOrParentIsFloatingMenu = (node, selectorsFloatingMenus = [], prefix = 'cds') => {
   if (node instanceof Element && typeof node.closest === 'function') {
-    const allSelectorsFloatingMenus = ['.cds--overflow-menu-options', '.cds--tooltip', '.flatpickr-calendar', ...selectorsFloatingMenus];
+    const allSelectorsFloatingMenus = [`.${prefix}--overflow-menu-options`, `.${prefix}--tooltip`, '.flatpickr-calendar', ...selectorsFloatingMenus];
     return allSelectorsFloatingMenus.some(selector => !!node.closest(selector));
   }
   return false;
@@ -50,9 +50,10 @@ const wrapFocus = ({
   endTrapNode,
   currentActiveNode,
   oldActiveNode,
-  selectorsFloatingMenus
+  selectorsFloatingMenus,
+  prefix = 'cds'
 }) => {
-  if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
+  if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus, prefix)) {
     const comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
     if (currentActiveNode === startTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_PRECEDING) {
       const tabbableElement = Array.from(bodyNode.querySelectorAll(navigation.selectorTabbable)).reverse().find(({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.96.0",
+  "version": "1.97.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,11 +52,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.3",
-    "@carbon/feature-flags": "0.32.0",
-    "@carbon/icons-react": "^11.70.0",
-    "@carbon/layout": "^11.43.0",
-    "@carbon/styles": "^1.95.0",
-    "@carbon/utilities": "^0.12.0",
+    "@carbon/feature-flags": ">=0.32.0",
+    "@carbon/icons-react": "^11.71.0",
+    "@carbon/layout": "^11.44.0",
+    "@carbon/styles": "^1.96.0",
+    "@carbon/utilities": "^0.13.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -80,7 +80,7 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.38.0",
-    "@carbon/themes": "^11.63.0",
+    "@carbon/themes": "^11.64.0",
     "@figma/code-connect": "^1.3.5",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "d2ccae94e5aa3defcce07cc9ea90058fda6c9705"
+  "gitHead": "4a42de3036ca693bf2c6477e917824982fafd7af"
 }