@carbon/react 1.84.0-rc.0 → 1.85.0-rc.0

package/lib/components/TreeView/TreeView.js

@@ -17,7 +17,7 @@ var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var useControllableState = require('../../internal/useControllableState.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var uniqueId = require('../../tools/uniqueId.js');
+var useId = require('../../internal/useId.js');
 var index = require('../FeatureFlags/index.js');
 var TreeNode = require('./TreeNode.js');
 
@@ -43,7 +43,7 @@ const TreeView = ({
   const enableTreeviewControllable = index.useFeatureFlag('enable-treeview-controllable');
   const {
     current: treeId
-  } = React.useRef(rest.id || uniqueId.uniqueId());
+  } = React.useRef(rest.id || useId.useId());
   const prefix = usePrefix.usePrefix();
   const treeClasses = cx__default["default"](className, `${prefix}--tree`, {
     // @ts-ignore - will always be false according to prop types
@@ -122,7 +122,7 @@ const TreeView = ({
   function enhanceTreeNodes(children) {
     return React__default["default"].Children.map(children, child => {
       if (! /*#__PURE__*/React__default["default"].isValidElement(child)) return child;
-      const isTreeNode = child.type.displayName === 'TreeNode';
+      const isTreeNode = child.type === TreeNode["default"];
       if (isTreeNode) {
         const node = child;
         const sharedNodeProps = {

package/lib/components/UIShell/Content.d.ts

@@ -75,6 +75,8 @@ declare const Content: {
         inert?: boolean | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -149,7 +151,7 @@ declare const Content: {
         onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
         onChange?: React.FormEventHandler<HTMLElement> | undefined;
         onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
-        onBeforeInput?: React.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInput?: React.InputEventHandler<HTMLElement> | undefined;
         onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
         onInput?: React.FormEventHandler<HTMLElement> | undefined;
         onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
@@ -199,8 +201,6 @@ declare const Content: {
         onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
         onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onResize?: React.ReactEventHandler<HTMLElement> | undefined;
-        onResizeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
         onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
         onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
         onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;
@@ -281,6 +281,8 @@ declare const Content: {
         onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
         onScroll?: React.UIEventHandler<HTMLElement> | undefined;
         onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
+        onScrollEnd?: React.UIEventHandler<HTMLElement> | undefined;
+        onScrollEndCapture?: React.UIEventHandler<HTMLElement> | undefined;
         onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
         onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
         onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;

package/lib/components/UIShell/HeaderMenuItem.js

@@ -34,6 +34,7 @@ const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItem({
   ...rest
 }, ref) {
   const prefix = usePrefix.usePrefix();
+  const resolvedTabIndex = tabIndex ?? 0;
   if (isCurrentPage) {
     isActive = isCurrentPage;
   }
@@ -52,7 +53,7 @@ const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItem({
     "aria-current": hasCurrentClass ? true : ariaCurrent,
     className: linkClassName,
     ref: ref,
-    tabIndex: tabIndex
+    tabIndex: resolvedTabIndex
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--text-truncate--end`
   }, children)));

package/lib/components/UIShell/HeaderPanel.d.ts

@@ -1,10 +1,10 @@
 /**
- * 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.
  */
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export interface HeaderPanelProps {
     /**
      * Specify whether focus and blur listeners are added. They are by default.

package/lib/components/UIShell/HeaderPanel.js

@@ -18,6 +18,7 @@ var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var useEvent = require('../../internal/useEvent.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
+var Switcher = require('./Switcher.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -68,10 +69,13 @@ const HeaderPanel = /*#__PURE__*/React__default["default"].forwardRef(function H
     };
   }
   useEvent.useWindowEvent('click', () => {
-    const focusedElement = document.activeElement;
-    setLastClickedElement(focusedElement);
-    const childJsxElement = children;
-    if (childJsxElement?.type?.displayName === 'Switcher' && !focusedElement?.closest(`.${prefix}--header-panel--expanded`) && !focusedElement?.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
+    const {
+      activeElement
+    } = document;
+    if (!(activeElement instanceof HTMLElement)) return;
+    setLastClickedElement(activeElement);
+    const isChildASwitcher = /*#__PURE__*/React.isValidElement(children) && typeof children.type !== 'string' && children.type === Switcher["default"];
+    if (isChildASwitcher && !activeElement.closest(`.${prefix}--header-panel--expanded`) && !activeElement.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
       setExpandedState(false);
       onHeaderPanelFocus();
     }

package/lib/index.js

@@ -424,7 +424,7 @@ exports.SelectableTile = Tile.SelectableTile;
 exports.Tile = Tile.Tile;
 exports.TileAboveTheFoldContent = Tile.TileAboveTheFoldContent;
 exports.TileBelowTheFoldContent = Tile.TileBelowTheFoldContent;
-exports.TileGroup = TileGroup["default"];
+exports.TileGroup = TileGroup.TileGroup;
 exports.TimePicker = TimePicker["default"];
 exports.TimePickerSelect = TimePickerSelect["default"];
 exports.Toggle = Toggle.Toggle;

package/lib/internal/Selection.js

@@ -25,9 +25,14 @@ const callOnChangeHandler = ({
 }) => {
   if (isControlled) {
     if (isMounted && onChangeHandlerControlled) {
-      onChangeHandlerControlled({
-        selectedItems
-      });
+      // Use setTimeout to defer the controlled onChange call,
+      // avoiding React’s warning: "Cannot update a component while rendering a different component".
+      // This ensures the parent state updates after rendering completes.
+      setTimeout(() => {
+        onChangeHandlerControlled({
+          selectedItems
+        });
+      }, 0);
     }
   } else {
     onChangeHandlerUncontrolled(selectedItems);

package/lib/internal/environment.js

@@ -14,17 +14,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
  *
  * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
  */
-const canUseDOM = !!(typeof window !== 'undefined' &&
-// TODO: `ssr-friendly` doesn't support ESLint v9.
-// https://github.com/kopiro/eslint-plugin-ssr-friendly/issues/30
-// https://github.com/carbon-design-system/carbon/issues/18991
-/*
-// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-*/
-window.document &&
-/*
-// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-*/
-window.document.createElement);
+const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
 
 exports.canUseDOM = canUseDOM;

package/lib/internal/{__mocks__/mockHTMLElement.d.ts → index.d.ts}

@@ -1,9 +1,7 @@
 /**
- * Copyright IBM Corp. 2025, 2025
+ * Copyright IBM Corp. 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.
  */
-export declare const mockHTMLElement: (options: HTMLElement) => {
-    mockRestore: () => void;
-};
+export * from './utils';

package/lib/internal/useOverflowItems.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2025, 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.
+ */
+import { ReactNode, RefObject } from 'react';
+type Item = {
+    id: string;
+};
+/**
+ * Manages overflow items in a container by automatically hiding items that don't fit.
+ * @param items - Array of items to manage for overflow, each must have an `id` property.
+ * @param containerRef - React ref to the container element that holds the items.
+ * @param offsetRef - Optional ref to an offset element (like a "more" button) whose width is reserved when calculating available space.
+ * @param maxItems - Optional maximum number of visible items. If undefined, only container space constrains visibility.
+ * @param onChange - Optional callback called when hidden items change. Receives array of currently hidden items.
+ * @returns Object with `visibleItems` (items to display), `hiddenItems` (items that don't fit), and `itemRefHandler` (function to attach refs to items for width measurement).
+ */
+declare const useOverflowItems: <T extends Item>(items: T[] | ReactNode, containerRef: RefObject<HTMLDivElement>, offsetRef?: RefObject<HTMLDivElement>, maxItems?: number, onChange?: (hiddenItems: T[]) => void) => {
+    visibleItems: T[];
+    hiddenItems: T[];
+    itemRefHandler: () => void;
+} | {
+    visibleItems: T[];
+    itemRefHandler: (id: string, node: HTMLDivElement | null) => () => void;
+    hiddenItems: T[];
+};
+export default useOverflowItems;

package/lib/internal/useOverflowItems.js

@@ -0,0 +1,126 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useResizeObserver = require('./useResizeObserver.js');
+var usePreviousValue = require('./usePreviousValue.js');
+
+/**
+ * Manages overflow items in a container by automatically hiding items that don't fit.
+ * @param items - Array of items to manage for overflow, each must have an `id` property.
+ * @param containerRef - React ref to the container element that holds the items.
+ * @param offsetRef - Optional ref to an offset element (like a "more" button) whose width is reserved when calculating available space.
+ * @param maxItems - Optional maximum number of visible items. If undefined, only container space constrains visibility.
+ * @param onChange - Optional callback called when hidden items change. Receives array of currently hidden items.
+ * @returns Object with `visibleItems` (items to display), `hiddenItems` (items that don't fit), and `itemRefHandler` (function to attach refs to items for width measurement).
+ */
+
+const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) => {
+  const itemsRef = React.useRef(null);
+  const [maxWidth, setMaxWidth] = React.useState(0);
+  if (!items || !Array.isArray(items)) {
+    return {
+      visibleItems: [],
+      hiddenItems: [],
+      itemRefHandler: () => {}
+    };
+  }
+  const handleResize = () => {
+    if (containerRef.current) {
+      const offset = offsetRef?.current?.offsetWidth || 0;
+      const newMax = containerRef.current.offsetWidth - offset;
+      setMaxWidth(newMax);
+    }
+  };
+  useResizeObserver.useResizeObserver({
+    ref: containerRef,
+    onResize: handleResize
+  });
+  const getMap = () => {
+    if (!itemsRef.current) {
+      itemsRef.current = new Map();
+    }
+    return itemsRef.current;
+  };
+  const itemRefHandler = (id, node) => {
+    const map = getMap();
+    if (node) {
+      const style = getComputedStyle?.(node);
+      const totalWidth = node.offsetWidth + parseInt(style.marginLeft) + parseInt(style.marginRight);
+      map.set(id, totalWidth);
+    }
+    return () => {
+      map.delete(id);
+    };
+  };
+  const getVisibleItems = () => {
+    if (!items || Array.isArray(items) === false) {
+      return [];
+    }
+    if (!containerRef) {
+      return items;
+    }
+    const map = getMap();
+    let maxReached = false;
+    let accumulatedWidth = 0;
+    const visibleItems = items.slice(0, maxItems).reduce((prev, cur) => {
+      if (maxReached) {
+        return prev;
+      }
+      const itemWidth = map.get(cur.id) || 0;
+      const willFit = accumulatedWidth + itemWidth <= maxWidth;
+      if (willFit) {
+        accumulatedWidth += itemWidth;
+        prev.push(cur);
+      } else {
+        maxReached = true;
+      }
+      return prev;
+    }, []);
+    return visibleItems;
+  };
+
+  // Memoize visible items calculation to avoid recalculating on every render
+  const visibleItems = React.useMemo(() => {
+    if (!Array.isArray(items)) {
+      return [];
+    }
+    return getVisibleItems();
+  }, [items, maxWidth, maxItems]);
+
+  // Memoize hidden items calculation
+  const hiddenItems = React.useMemo(() => {
+    if (!Array.isArray(items)) {
+      return [];
+    }
+    return items.slice(visibleItems.length);
+  }, [items, visibleItems]);
+
+  // Use previous value to compare and only call onChange when needed
+  const previousHiddenItems = usePreviousValue.usePreviousValue(hiddenItems);
+
+  // Only call onChange if hidden items actually changed
+  React.useEffect(() => {
+    if (previousHiddenItems && onChange) {
+      const hasChanged = hiddenItems.length !== previousHiddenItems.length || hiddenItems.some((item, index) => item !== previousHiddenItems[index]);
+      if (hasChanged) {
+        onChange(hiddenItems);
+      }
+    }
+  }, [hiddenItems, previousHiddenItems, onChange]);
+  return {
+    visibleItems,
+    itemRefHandler,
+    hiddenItems
+  };
+};
+
+exports["default"] = useOverflowItems;

package/lib/internal/useResizeObserver.d.ts

@@ -6,7 +6,7 @@
  */
 import { RefObject } from 'react';
 export declare const useResizeObserver: ({ ref, onResize, }: {
-    ref: RefObject<HTMLElement>;
+    ref: RefObject<HTMLElement | null>;
     onResize?: (rect: DOMRectReadOnly) => void;
 }) => {
     width: number;

package/lib/internal/utils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+import { type ComponentType, type ReactElement, type ReactNode } from 'react';
+/**
+ * Checks if an element is a valid React element of a given component type.
+ *
+ * @param element - The element to test.
+ * @param component - The component to match.
+ */
+export declare const isComponentElement: <P>(element: ReactNode, component: ComponentType<P>) => element is ReactElement<P>;

package/lib/internal/utils.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * Checks if an element is a valid React element of a given component type.
+ *
+ * @param element - The element to test.
+ * @param component - The component to match.
+ */
+const isComponentElement = (element, component) => /*#__PURE__*/React.isValidElement(element) && element.type === component;
+
+exports.isComponentElement = isComponentElement;

package/lib/tools/uniqueId.d.ts

@@ -1,7 +1,2 @@
-/**
- * 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.
- */
+export declare const uniqueIdDeprecationMessage = "The `uniqueId()` helper function from @carbon/react was called. This function should no longer be used.\n\n@carbon/react components should use the internal/useId.js hook instead. Other projects can use React's `useId()` hook: https://react.dev/reference/react/useId";
 export declare const uniqueId: (prefix?: string) => string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.84.0-rc.0",
+  "version": "1.85.0-rc.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.27.0-rc.0",
-    "@carbon/icons-react": "^11.61.0-rc.0",
-    "@carbon/layout": "^11.35.0-rc.0",
-    "@carbon/styles": "^1.83.0-rc.0",
-    "@carbon/utilities": "^0.7.0-rc.0",
+    "@carbon/feature-flags": "^0.27.0",
+    "@carbon/icons-react": "^11.62.0-rc.0",
+    "@carbon/layout": "^11.36.0-rc.0",
+    "@carbon/styles": "^1.84.0-rc.0",
+    "@carbon/utilities": "^0.7.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -80,30 +80,23 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.36.0",
-    "@carbon/themes": "^11.54.0-rc.0",
+    "@carbon/themes": "^11.55.0-rc.0",
     "@figma/code-connect": "^1.3.2",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
     "@stackblitz/sdk": "^1.11.0",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-actions": "^8.4.7",
-    "@storybook/addon-docs": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/manager-api": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-webpack5": "^8.4.7",
-    "@storybook/theming": "^8.4.7",
+    "@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",
     "@types/react-is": "^19.0.0",
     "@types/use-sync-external-store": "^1",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^9.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-carbon": "^0.7.0-rc.0",
+    "babel-preset-carbon": "^0.7.0",
     "browserify-zlib": "^0.2.0",
     "browserslist-config-carbon": "^11.2.0",
     "clipboardy": "^2.1.0",
@@ -122,14 +115,12 @@
     "react-dom": "^19.0.0",
     "react-is": "^16.13.1 || ^17.0.2 || ^18.3.1 || ^19.0.0",
     "remark-gfm": "^4.0.0",
-    "requestanimationframe": "^0.0.23",
     "rimraf": "^6.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-strip-banner": "^3.0.0",
     "sass": "^1.77.7",
     "sass-loader": "^16.0.0",
-    "storybook": "^8.4.7",
-    "storybook-addon-accessibility-checker": "^3.1.61-rc.3",
+    "storybook": "^9.0.5",
     "stream-browserify": "^3.0.0",
     "style-loader": "^4.0.0",
     "typescript-config-carbon": "^0.5.0",
@@ -148,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "fcae2645f1b5a1a01b5629926df471ec1945d1e6"
+  "gitHead": "80ee492dc5079b90b8bca04f49497a90b60a366e"
 }

package/telemetry.yml

@@ -326,6 +326,7 @@ collect:
         # Dialog
         - ariaDescribedBy
         - ariaLabelledBy
+        - focusAfterCloseRef
         - modal
         # DismissibleTag
         - dismissTooltipLabel
@@ -474,6 +475,8 @@ collect:
         # PageHeaderContentPageActions
         - actions
         - menuButtonLabel
+        # PageHeaderTabBar
+        - tags
         # PageSelector
         - currentPage
         - totalPages

package/es/tools/uniqueId.js

@@ -1,14 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-let lastId = 0;
-const uniqueId = (prefix = 'id') => {
-  lastId++;
-  return `${prefix}${lastId}`;
-};
-
-export { uniqueId };

package/lib/tools/uniqueId.js

@@ -1,18 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-let lastId = 0;
-const uniqueId = (prefix = 'id') => {
-  lastId++;
-  return `${prefix}${lastId}`;
-};
-
-exports.uniqueId = uniqueId;