@carbon/react 1.97.0-rc.0 → 1.97.0

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/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/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/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.97.0-rc.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.96.0-rc.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.64.0-rc.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": "87ff7d321ab5e0f7147383b2a71f43936b7e34c1"
+  "gitHead": "4a42de3036ca693bf2c6477e917824982fafd7af"
 }