@carbon/react 1.81.0 → 1.82.0-rc.0

package/lib/components/TreeView/TreeNode.js

@@ -54,7 +54,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
   const enableTreeviewControllable = index.useFeatureFlag('enable-treeview-controllable');
   const {
     current: id
-  } = React.useRef(nodeId || uniqueId["default"]());
+  } = React.useRef(nodeId || uniqueId.uniqueId());
   const controllableExpandedState = useControllableState.useControllableState({
     value: isExpanded,
     onChange: newValue => {
@@ -211,6 +211,18 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
     }
     if (match.matches(event, [keys.Enter, keys.Space])) {
       event.preventDefault();
+      if (match.match(event, keys.Enter) && children) {
+        // Toggle expansion state for parent nodes
+        if (!enableTreeviewControllable) {
+          onToggle?.(event, {
+            id,
+            isExpanded: !expanded,
+            label,
+            value
+          });
+        }
+        setExpanded(!expanded);
+      }
       if (href) {
         currentNode.current?.click();
       }

package/lib/components/TreeView/TreeView.js

@@ -44,7 +44,7 @@ const TreeView = _ref => {
   const enableTreeviewControllable = index.useFeatureFlag('enable-treeview-controllable');
   const {
     current: treeId
-  } = React.useRef(rest.id || uniqueId["default"]());
+  } = React.useRef(rest.id || uniqueId.uniqueId());
   const prefix = usePrefix.usePrefix();
   const treeClasses = cx__default["default"](className, `${prefix}--tree`, {
     // @ts-ignore - will always be false according to prop types

package/lib/index.js

@@ -110,8 +110,8 @@ var SkeletonPlaceholder = require('./components/SkeletonPlaceholder/SkeletonPlac
 var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
 var index$d = require('./components/Slider/index.js');
 var HStack = require('./components/Stack/HStack.js');
-var VStack = require('./components/Stack/VStack.js');
 var Stack = require('./components/Stack/Stack.js');
+var VStack = require('./components/Stack/VStack.js');
 var StructuredList = require('./components/StructuredList/StructuredList.js');
 var StructuredList_Skeleton = require('./components/StructuredList/StructuredList.Skeleton.js');
 var Switch = require('./components/Switch/Switch.js');
@@ -366,8 +366,8 @@ exports.SkeletonPlaceholder = SkeletonPlaceholder["default"];
 exports.SkeletonText = SkeletonText["default"];
 exports.Slider = index$d["default"];
 exports.HStack = HStack.HStack;
-exports.VStack = VStack.VStack;
 exports.Stack = Stack.Stack;
+exports.VStack = VStack.VStack;
 exports.StructuredListBody = StructuredList.StructuredListBody;
 exports.StructuredListCell = StructuredList.StructuredListCell;
 exports.StructuredListHead = StructuredList.StructuredListHead;

package/lib/internal/FloatingMenu.js

@@ -275,13 +275,17 @@ const FloatingMenu = _ref2 => {
    * Blur handler used when focus trapping is enabled.
    */
   const handleBlur = event => {
-    if (menuBodyRef.current && startSentinelRef.current && endSentinelRef.current) {
-      wrapFocus["default"]({
+    const {
+      target,
+      relatedTarget
+    } = event;
+    if (menuBodyRef.current && startSentinelRef.current && endSentinelRef.current && target instanceof HTMLElement && relatedTarget instanceof HTMLElement) {
+      wrapFocus.wrapFocus({
         bodyNode: menuBodyRef.current,
         startTrapNode: startSentinelRef.current,
         endTrapNode: endSentinelRef.current,
-        currentActiveNode: event.relatedTarget,
-        oldActiveNode: event.target
+        currentActiveNode: relatedTarget,
+        oldActiveNode: target
       });
     }
   };
@@ -290,7 +294,7 @@ const FloatingMenu = _ref2 => {
    * Keydown handler for focus wrapping when experimental focus trap is enabled.
    */
   const handleKeyDown = event => {
-    if (match.match(event, keys.Tab) && menuBodyRef.current) {
+    if (match.match(event, keys.Tab) && menuBodyRef.current && event.target instanceof HTMLElement) {
       wrapFocus.wrapFocusWithoutSentinels({
         containerNode: menuBodyRef.current,
         currentActiveNode: event.target,

package/lib/internal/environment.js

@@ -15,9 +15,16 @@ 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);
 
 exports.canUseDOM = canUseDOM;

package/lib/internal/keyboard/navigation.d.ts

@@ -17,16 +17,6 @@ import { KeyboardEvent } from 'react';
  *  getNextIndex(keyCodes.RIGHT, 0, 4)
  */
 export declare const getNextIndex: (key: KeyboardEvent | number | string, index: number, arrayLength: number) => number | undefined;
-/**
- * A flag `node.compareDocumentPosition(target)` returns that indicates
- * `target` is located earlier than `node` in the document or `target` contains `node`.
- */
-export declare const DOCUMENT_POSITION_BROAD_PRECEDING: number;
-/**
- * A flag `node.compareDocumentPosition(target)` returns that indicates
- * `target` is located later than `node` in the document or `node` contains `target`.
- */
-export declare const DOCUMENT_POSITION_BROAD_FOLLOWING: number;
 /**
  * CSS selector that selects major nodes that are sequentially focusable.
  */

package/lib/internal/keyboard/navigation.js

@@ -33,18 +33,6 @@ const getNextIndex = (key, index, arrayLength) => {
   return;
 };
 
-/**
- * A flag `node.compareDocumentPosition(target)` returns that indicates
- * `target` is located earlier than `node` in the document or `target` contains `node`.
- */
-const DOCUMENT_POSITION_BROAD_PRECEDING = typeof Node !== 'undefined' ? Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS : 0;
-
-/**
- * A flag `node.compareDocumentPosition(target)` returns that indicates
- * `target` is located later than `node` in the document or `node` contains `target`.
- */
-const DOCUMENT_POSITION_BROAD_FOLLOWING = typeof Node !== 'undefined' ? Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY : 0;
-
 /**
  * CSS selector that selects major nodes that are sequentially focusable.
  */
@@ -65,8 +53,6 @@ const selectorFocusable = `
   iframe, object, embed, *[tabindex]:not([disabled]), *[contenteditable=true]
 `;
 
-exports.DOCUMENT_POSITION_BROAD_FOLLOWING = DOCUMENT_POSITION_BROAD_FOLLOWING;
-exports.DOCUMENT_POSITION_BROAD_PRECEDING = DOCUMENT_POSITION_BROAD_PRECEDING;
 exports.getNextIndex = getNextIndex;
 exports.selectorFocusable = selectorFocusable;
 exports.selectorTabbable = selectorTabbable;

package/lib/internal/useNoInteractiveChildren.js

@@ -14,11 +14,15 @@ var React = require('react');
 function useNoInteractiveChildren(ref) {
   let message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'component should have no interactive child nodes';
   if (process.env.NODE_ENV !== 'production') {
+    // TODO: https://github.com/carbon-design-system/carbon/issues/19005
+    /*
     // eslint-disable-next-line react-hooks/rules-of-hooks
+    */
     React.useEffect(() => {
       const node = ref.current ? getInteractiveContent(ref.current) : false;
       if (node) {
         const errorMessage = `Error: ${message}.\n\nInstead found: ${node.outerHTML}`;
+        // eslint-disable-next-line no-console
         console.error(errorMessage);
         throw new Error(errorMessage);
       }
@@ -28,7 +32,10 @@ function useNoInteractiveChildren(ref) {
 function useInteractiveChildrenNeedDescription(ref) {
   let message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : `interactive child node(s) should have an \`aria-describedby\` property`;
   if (process.env.NODE_ENV !== 'production') {
+    // TODO: https://github.com/carbon-design-system/carbon/issues/19005
+    /*
     // eslint-disable-next-line react-hooks/rules-of-hooks
+    */
     React.useEffect(() => {
       const node = ref.current ? getInteractiveContent(ref.current) : false;
       if (node && !node.hasAttribute('aria-describedby')) {

package/lib/internal/useOutsideClick.js

@@ -23,7 +23,10 @@ const useOutsideClick = (ref, callback) => {
   // treated as a constant as it will be false when executed in a Node.js
   // environment and true when executed in the browser
   if (environment.canUseDOM) {
+    // TODO: https://github.com/carbon-design-system/carbon/issues/19005
+    /*
     // eslint-disable-next-line react-hooks/rules-of-hooks
+    */
     useEvent.useWindowEvent('click', event => {
       const {
         target

package/lib/internal/wrapFocus.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+/**
+ * Checks whether the given node or one of its ancestors matches any of the
+ * specified floating menu selectors.
+ *
+ * @param {Node} node - A DOM node.
+ * @param {string[]} selectorsFloatingMenus - Additional CSS selectors that
+ * match floating menus.
+ * @returns {boolean} Whether the node or one of its ancestors is in a floating
+ * menu.
+ */
+export declare const elementOrParentIsFloatingMenu: (node: Node, selectorsFloatingMenus?: 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, }: {
+    /** The DOM node of the container. */
+    bodyNode: HTMLElement | null;
+    /** The start sentinel node for focus trapping. */
+    startTrapNode: HTMLElement | null;
+    /** The end sentinel node for focus trapping. */
+    endTrapNode: HTMLElement | null;
+    /** The current active node (i.e., the one with focus). */
+    currentActiveNode: HTMLElement;
+    /** The previous active node (i.e., the one that had focus before). */
+    oldActiveNode: HTMLElement;
+    /** CSS selectors for floating menus. */
+    selectorsFloatingMenus?: string[];
+}) => void;
+/**
+ * Ensures the focus is kept in the given container, implementing "focus-wrap"
+ * behavior.
+ *
+ * Note: This must be called *before* focus moves using `onKeyDown` or similar.
+ */
+export declare const wrapFocusWithoutSentinels: ({ containerNode, currentActiveNode, event, }: {
+    /** The container node within which to keep focus. */
+    containerNode: HTMLElement;
+    /** The current active node (i.e., the one with focus). */
+    currentActiveNode: HTMLElement;
+    /** The event that triggered this function. */
+    event: React.KeyboardEvent | KeyboardEvent;
+}) => void;

package/lib/internal/wrapFocus.js

@@ -10,33 +10,45 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var navigation = require('./keyboard/navigation.js');
 var tabbable = require('tabbable');
+var navigation = require('./keyboard/navigation.js');
 
 /**
- * @param {Node} node A DOM node.
- * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
- * @returns {boolean} `true` of the given `node` is in a floating menu.
+ * A flag `node.compareDocumentPosition(target)` returns that indicates
+ * `target` is located earlier than `node` in the document or `target` contains `node`.
  */
-function elementOrParentIsFloatingMenu(node) {
+const DOCUMENT_POSITION_BROAD_PRECEDING = typeof Node !== 'undefined' ? Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS : 0;
+
+/**
+ * A flag `node.compareDocumentPosition(target)` returns that indicates
+ * `target` is located later than `node` in the document or `node` contains `target`.
+ */
+const DOCUMENT_POSITION_BROAD_FOLLOWING = typeof Node !== 'undefined' ? Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY : 0;
+
+/**
+ * Checks whether the given node or one of its ancestors matches any of the
+ * specified floating menu selectors.
+ *
+ * @param {Node} node - A DOM node.
+ * @param {string[]} selectorsFloatingMenus - Additional CSS selectors that
+ * match floating menus.
+ * @returns {boolean} Whether the node or one of its ancestors is in a floating
+ * menu.
+ */
+const elementOrParentIsFloatingMenu = function (node) {
   let selectorsFloatingMenus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  if (node && typeof node.closest === 'function') {
-    const allSelectorsFloatingMenus = [`.cds--overflow-menu-options`, `.cds--tooltip`, '.flatpickr-calendar', ...selectorsFloatingMenus];
-    return allSelectorsFloatingMenus.some(selector => node.closest(selector));
+  if (node instanceof Element && typeof node.closest === 'function') {
+    const allSelectorsFloatingMenus = ['.cds--overflow-menu-options', '.cds--tooltip', '.flatpickr-calendar', ...selectorsFloatingMenus];
+    return allSelectorsFloatingMenus.some(selector => !!node.closest(selector));
   }
-}
+  return false;
+};
 
 /**
- * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
- * @param {object} options The options.
- * @param {Node|null} options.bodyNode
- * @param {Node|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
- * @param {Node|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
- * @param {Node} options.currentActiveNode The DOM node that has focus.
- * @param {Node} options.oldActiveNode The DOM node that previously had focus.
- * @param {string[]} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus.
+ * Ensures the focus is kept within the given container by implementing
+ * "focus-wrap" behavior.
  */
-function wrapFocus(_ref) {
+const wrapFocus = _ref => {
   let {
     bodyNode,
     startTrapNode,
@@ -47,60 +59,61 @@ function wrapFocus(_ref) {
   } = _ref;
   if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
     const comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
-    if (currentActiveNode === startTrapNode || comparisonResult & navigation.DOCUMENT_POSITION_BROAD_PRECEDING) {
-      const tabbable = [...bodyNode.querySelectorAll(navigation.selectorTabbable)].reverse().find(elem => Boolean(elem.offsetParent));
-      if (tabbable) {
-        tabbable.focus();
+    if (currentActiveNode === startTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_PRECEDING) {
+      const tabbableElement = Array.from(bodyNode.querySelectorAll(navigation.selectorTabbable)).reverse().find(_ref2 => {
+        let {
+          offsetParent
+        } = _ref2;
+        return Boolean(offsetParent);
+      });
+      if (tabbableElement) {
+        tabbableElement.focus();
       } else if (bodyNode !== oldActiveNode) {
         bodyNode.focus();
       }
-    } else if (currentActiveNode === endTrapNode || comparisonResult & navigation.DOCUMENT_POSITION_BROAD_FOLLOWING) {
-      const tabbable = Array.prototype.find.call(bodyNode.querySelectorAll(navigation.selectorTabbable), elem => Boolean(elem.offsetParent));
-      if (tabbable) {
-        tabbable.focus();
+    } else if (currentActiveNode === endTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_FOLLOWING) {
+      const tabbableElement = Array.from(bodyNode.querySelectorAll(navigation.selectorTabbable)).find(_ref3 => {
+        let {
+          offsetParent
+        } = _ref3;
+        return Boolean(offsetParent);
+      });
+      if (tabbableElement) {
+        tabbableElement.focus();
       } else if (bodyNode !== oldActiveNode) {
         bodyNode.focus();
       }
     }
   }
-}
+};
 
 /**
- * Ensures the focus is kept in the given `containerNode`, implementing "focus-wrap" behavior.
- * Note: This must be called *before* focus moves using onKeyDown or similar.
- * @param {object} options The options.
- * @param {Node|null} options.containerNode
- * @param {EventTarget} options.currentActiveNode The DOM node that has focus.
- * @param {React.KeyboardEvent} options.event The DOM event
+ * Ensures the focus is kept in the given container, implementing "focus-wrap"
+ * behavior.
+ *
+ * Note: This must be called *before* focus moves using `onKeyDown` or similar.
  */
-function wrapFocusWithoutSentinels(_ref2) {
+const wrapFocusWithoutSentinels = _ref4 => {
   let {
     containerNode,
     currentActiveNode,
     event
-  } = _ref2;
-  if (['blur', 'focusout', 'focusin', 'focus'].includes(event.type) && process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(() => {
+  } = _ref4;
+  if (!containerNode) return;
+  React.useEffect(() => {
+    if (['blur', 'focusout', 'focusin', 'focus'].includes(event.type) && process.env.NODE_ENV !== 'production') {
       throw new Error(`Error: wrapFocusWithoutSentinels(...) called in unsupported ${event.type} event.\n\nCall wrapFocusWithoutSentinels(...) from onKeyDown instead.`);
-    });
-  }
+    }
+  }, []);
 
-  // The reason we're using tabbable is because it returns the tabbable
-  // items *in tab order*, whereas using our `selectorTabbable` only
-  // returns in DOM order
+  // Use `tabbable` to get the focusable elements in tab order.
+  // `selectorTabbable` returns elements in DOM order which is why it's not
+  // used.
   const tabbables = tabbable.tabbable(containerNode);
   const firstTabbable = tabbables[0];
   const lastTabbable = tabbables[tabbables.length - 1];
 
-  // console.log(`---------------------------------`);
-  // console.log(containerNode);
-  // console.log(tabbables);
-  // console.log(firstTabbable);
-  // console.log(lastTabbable);
-  // console.log(currentActiveNode);
-
-  // The shift key is used to determine if focus is moving forwards or backwards
+  // The shift key indicates if focus is moving forwards or backwards.
   if (currentActiveNode === lastTabbable && !event.shiftKey) {
     // Cancel the current movement of focus because we're going to place it ourselves
     event.preventDefault();
@@ -111,8 +124,8 @@ function wrapFocusWithoutSentinels(_ref2) {
     event.preventDefault();
     lastTabbable.focus();
   }
-}
+};
 
-exports["default"] = wrapFocus;
 exports.elementOrParentIsFloatingMenu = elementOrParentIsFloatingMenu;
+exports.wrapFocus = wrapFocus;
 exports.wrapFocusWithoutSentinels = wrapFocusWithoutSentinels;

package/lib/tools/events.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 type { SyntheticEvent } from 'react';
+/**
+ * Composes multiple event handler functions into a single event handler. The
+ * composed handler calls each provided function sequentially with the event and
+ * any additional arguments. If any handler calls `event.preventDefault()`,
+ * further handlers are skipped.
+ *
+ * @param handlers - An array of event handler functions.
+ * @returns A composite event handler.
+ */
+export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent<Element, Event>>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;

package/lib/tools/events.js

@@ -9,28 +9,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-// @ts-check
-
 /**
- * Generic utility to compose event handlers so that consumers can supply their
- * own event listeners on table components. The default heuristic here is to
- * iterate through the given functions until `preventDefault` is called on the
- * given event.
+ * Composes multiple event handler functions into a single event handler. The
+ * composed handler calls each provided function sequentially with the event and
+ * any additional arguments. If any handler calls `event.preventDefault()`,
+ * further handlers are skipped.
  *
- * @param {Array<Function|undefined>} fns array of functions to apply to the event
- * @returns {any}
+ * @param handlers - An array of event handler functions.
+ * @returns A composite event handler.
  */
-const composeEventHandlers = fns => function (event) {
+const composeEventHandlers = handlers => function (event) {
   for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     args[_key - 1] = arguments[_key];
   }
-  for (let i = 0; i < fns.length; i++) {
+  for (const handler of handlers) {
     if (event.defaultPrevented) {
       break;
     }
-    const fn = fns[i];
-    if (typeof fn === 'function') {
-      fn(event, ...args);
+    if (typeof handler === 'function') {
+      handler(event, ...args);
     }
   }
 };

package/lib/tools/mapPopoverAlign.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 type { Placement } from '@floating-ui/react';
+/**
+ * Maps popover alignment values to their corresponding replacement values.
+ *
+ * @param align - The original align value.
+ * @returns The new align value based on mapping or the original align if no
+ *          mapping exists.
+ */
+export declare const mapPopoverAlign: (align: string) => Placement;

package/lib/tools/mapPopoverAlign.js

@@ -0,0 +1,32 @@
+/**
+ * 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 });
+
+const popoverAlignMapping = {
+  'top-left': 'top-start',
+  'top-right': 'top-end',
+  'bottom-left': 'bottom-start',
+  'bottom-right': 'bottom-end',
+  'left-bottom': 'left-end',
+  'left-top': 'left-start',
+  'right-bottom': 'right-end',
+  'right-top': 'right-start'
+};
+
+/**
+ * Maps popover alignment values to their corresponding replacement values.
+ *
+ * @param align - The original align value.
+ * @returns The new align value based on mapping or the original align if no
+ *          mapping exists.
+ */
+const mapPopoverAlign = align => popoverAlignMapping[align] ?? align;
+
+exports.mapPopoverAlign = mapPopoverAlign;

package/lib/tools/uniqueId.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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 uniqueId: (prefix?: string) => string;

package/lib/tools/uniqueId.js

@@ -10,10 +10,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 let lastId = 0;
-function uniqueId() {
+const uniqueId = function () {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'id';
   lastId++;
   return `${prefix}${lastId}`;
-}
+};
 
-exports["default"] = uniqueId;
+exports.uniqueId = uniqueId;

package/lib/types/common.d.ts

@@ -6,8 +6,6 @@
  */
 import * as React from 'react';
 export type ReactAttr<T = HTMLElement> = React.HTMLAttributes<T>;
-export type ForwardRefProps<T, P = unknown> = React.PropsWithoutRef<React.PropsWithChildren<P>> & React.RefAttributes<T>;
-export type ForwardRefReturn<T, P = unknown> = React.ForwardRefExoticComponent<ForwardRefProps<T, P>>;
 /**
  * For "as" props.  Creates an "as" property that supports native html tags such as 'span', 'a', 'button' as well as custom functional components
  * All native props for the supplied html tag/component are inferred as part of the base component props, allowing us to use props like `href` on an 'a' element etc

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.81.0",
+  "version": "1.82.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,9 +53,10 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@carbon/feature-flags": "^0.26.0",
-    "@carbon/icons-react": "^11.59.0",
-    "@carbon/layout": "^11.33.0",
-    "@carbon/styles": "^1.80.0",
+    "@carbon/icons-react": "^11.60.0-rc.0",
+    "@carbon/layout": "^11.34.0-rc.0",
+    "@carbon/styles": "^1.81.0-rc.0",
+    "@carbon/utilities": "^0.5.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -80,7 +81,7 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@carbon/test-utils": "^10.36.0",
-    "@carbon/themes": "^11.51.0",
+    "@carbon/themes": "^11.52.0-rc.0",
     "@figma/code-connect": "^1.3.2",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
@@ -92,7 +93,6 @@
     "@storybook/addon-docs": "^8.4.7",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-storysource": "^8.4.7",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/blocks": "^8.4.7",
     "@storybook/manager-api": "^8.4.7",
@@ -147,5 +147,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "01b2d2b1c2d901921c615dcbdb85e0a2340b67e6"
+  "gitHead": "3b78e2acacf62b0a9e5425e5f3b43e6798cd209f"
 }

package/telemetry.yml

@@ -172,6 +172,7 @@ collect:
         - orientation
         - overflowMenuOnHover
         - page
+        - pageActions
         - paragraph
         - passiveModal
         - pattern
@@ -457,7 +458,8 @@ collect:
         - wrapperClassName
         # PageHeaderContent
         - contextualActions
-        - pageActions
+        # PageHeaderContentPageActions
+        - menuButtonLabel
         # PageSelector
         - currentPage
         - totalPages