@carbon/react 1.97.0-rc.0 → 1.98.0

package/lib/internal/FloatingMenu.js

@@ -10,7 +10,6 @@
 var React = require('react');
 var FeatureFlags = require('@carbon/feature-flags');
 var ReactDOM = require('react-dom');
-var window = require('window-or-global');
 var keys = require('./keyboard/keys.js');
 var match = require('./keyboard/match.js');
 var navigation = require('./keyboard/navigation.js');
@@ -130,14 +129,16 @@ const FloatingMenu = ({
     const menuSize = menuBody.getBoundingClientRect();
     const refPosition = triggerEl ? triggerEl.getBoundingClientRect() : undefined;
     const offsetValue = typeof menuOffset === 'function' ? menuOffset(menuBody, menuDirection, triggerEl, flipped) : menuOffset;
+    const scrollX = globalThis.scrollX ?? 0;
+    const scrollY = globalThis.scrollY ?? 0;
     if (updateOrientation) {
       updateOrientation({
         menuSize,
         refPosition,
         direction: menuDirection,
         offset: offsetValue,
-        scrollX: window.pageXOffset,
-        scrollY: window.pageYOffset,
+        scrollX,
+        scrollY,
         container: {
           rect: target().getBoundingClientRect(),
           position: getComputedStyle(target()).position
@@ -157,8 +158,8 @@ const FloatingMenu = ({
         },
         offset: offsetValue,
         direction: menuDirection,
-        scrollX: window.pageXOffset,
-        scrollY: window.pageYOffset,
+        scrollX,
+        scrollY,
         container: {
           rect: target().getBoundingClientRect(),
           position: getComputedStyle(target()).position
@@ -278,7 +279,8 @@ const FloatingMenu = ({
         startTrapNode: startSentinelRef.current,
         endTrapNode: endSentinelRef.current,
         currentActiveNode: relatedTarget,
-        oldActiveNode: target
+        oldActiveNode: target,
+        prefix
       });
     }
   };

package/lib/internal/OptimizedResize.js

@@ -7,9 +7,8 @@
 
 'use strict';
 
-var window = require('window-or-global');
-
-// mdn resize function
+// Use `globalThis` for universal access to global object (browser, workers, Node).
+const win = globalThis;
 
 /**
  * A callback function to be executed on `resize`.
@@ -27,7 +26,7 @@ const OptimizedResize = (() => {
   const handleResize = () => {
     if (!running) {
       running = true;
-      window.requestAnimationFrame(runCallbacks);
+      win.requestAnimationFrame(runCallbacks);
     }
   };
   const addCallback = callback => {
@@ -40,7 +39,7 @@ const OptimizedResize = (() => {
     /** Adds a callback function to be executed on window `resize`. */
     add: callback => {
       if (!callbacks.length) {
-        window.addEventListener('resize', handleResize);
+        win.addEventListener('resize', handleResize);
       }
       addCallback(callback);
       return {

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/lib/tools/events.d.ts

@@ -14,4 +14,4 @@ import type { SyntheticEvent } from 'react';
  * @param handlers - An array of event handler functions.
  * @returns A composite event handler.
  */
-export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;
+export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent<Element, Event>>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;

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.98.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.72.0",
+    "@carbon/layout": "^11.45.0",
+    "@carbon/styles": "^1.97.0",
+    "@carbon/utilities": "^0.14.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -67,8 +67,8 @@
     "invariant": "^2.2.3",
     "prop-types": "^15.8.1",
     "react-fast-compare": "^3.2.2",
-    "tabbable": "^6.2.0",
-    "window-or-global": "^1.0.1"
+    "storybook-addon-accessibility-checker": "^9.2.0-rc.3",
+    "tabbable": "^6.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.3",
@@ -80,34 +80,29 @@
     "@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.65.0",
     "@figma/code-connect": "^1.3.5",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.4",
     "@stackblitz/sdk": "^1.11.0",
-    "@storybook/addon-docs": "^9.0.5",
-    "@storybook/addon-links": "^9.0.5",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/react-webpack5": "^9.0.5",
+    "@storybook/addon-a11y": "^9.1.8",
+    "@storybook/addon-docs": "^9.1.8",
+    "@storybook/addon-links": "^9.1.8",
+    "@storybook/builder-vite": "^9.1.8",
+    "@storybook/react-vite": "^9.1.8",
     "@types/react-is": "^19.0.0",
     "@types/use-sync-external-store": "^1",
-    "autoprefixer": "^10.4.0",
-    "babel-loader": "^10.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
     "babel-preset-carbon": "^0.8.0",
     "browserify-zlib": "^0.2.0",
     "browserslist-config-carbon": "^11.2.0",
     "clipboardy": "^4.0.0",
-    "css-loader": "^7.0.0",
     "enquirer": "^2.3.6",
     "fast-glob": "^3.3.3",
     "fs-extra": "^11.0.0",
-    "html-webpack-plugin": "^5.5.0",
-    "mini-css-extract-plugin": "^2.4.5",
-    "postcss": "^8.5.6",
-    "postcss-loader": "^8.1.1",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
     "react": "^19.0.0",
@@ -119,14 +114,12 @@
     "rollup-plugin-preserve-directives": "^0.4.0",
     "rollup-plugin-strip-banner": "^3.0.0",
     "sass": "^1.93.2",
-    "sass-loader": "^16.0.0",
-    "storybook": "^9.0.5",
+    "storybook": "^9.1.8",
+    "storybook-addon-accessibility-checker": ">=9.2.0-rc.3",
     "stream-browserify": "^3.0.0",
-    "style-loader": "^4.0.0",
-    "typescript-config-carbon": "^0.8.0",
+    "typescript-config-carbon": "^0.9.0",
     "use-sync-external-store": "^1.5.0",
-    "webpack": "^5.65.0",
-    "webpack-dev-server": "^5.0.0"
+    "vite": "^7.1.2"
   },
   "sideEffects": [
     "es/index.js",
@@ -139,5 +132,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "87ff7d321ab5e0f7147383b2a71f43936b7e34c1"
+  "gitHead": "57fdbc7bfad9349b5c4359c7d621e709cd4daa25"
 }

package/telemetry.yml

@@ -138,6 +138,7 @@ collect:
         - lowContrast
         - max
         - maxCount
+        - maxFileSize
         - menuAlignment
         - menuOffset
         - menuOffsetFlip
@@ -271,6 +272,7 @@ collect:
         # AspectRatio
         - ratio
         # ButtonSet
+        - fluid
         - stacked
         # ChatButton
         - isQuickAction