@carbon/react 1.81.0-rc.0 → 1.82.0-rc.0

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-rc.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-rc.0",
-    "@carbon/layout": "^11.33.0-rc.0",
-    "@carbon/styles": "^1.80.0-rc.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",
@@ -79,9 +80,9 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@carbon/test-utils": "^10.36.0-rc.0",
-    "@carbon/themes": "^11.51.0-rc.0",
-    "@figma/code-connect": "^1.2.4",
+    "@carbon/test-utils": "^10.36.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",
     "@rollup/plugin-node-resolve": "^15.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": "679420306589ea6cb50db59d208c7039020ebb4f"
+  "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

package/es/tools/createPropAdapter.js

@@ -1,40 +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.
- */
-
-/**
- * Create an adapter that converts an object of props with potentially deprecated
- * prop names to the replacement prop names in a newer version. Useful for guarding
- * against breaking changes when a prop has been renamed
- *
- * @param {Array} spec - an array of options which specify a text or regex
- * matcher alongside a replacement if there is a match
- * @returns {Function}
- */
-function mapPopoverAlignProp(align) {
-  switch (align) {
-    case 'top-left':
-      return 'top-start';
-    case 'top-right':
-      return 'top-end';
-    case 'bottom-left':
-      return 'bottom-start';
-    case 'bottom-right':
-      return 'bottom-end';
-    case 'left-bottom':
-      return 'left-end';
-    case 'left-top':
-      return 'left-start';
-    case 'right-bottom':
-      return 'right-end';
-    case 'right-top':
-      return 'right-start';
-    default:
-      return align;
-  }
-}
-
-export { mapPopoverAlignProp };

package/lib/tools/createPropAdapter.js

@@ -1,44 +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 });
-
-/**
- * Create an adapter that converts an object of props with potentially deprecated
- * prop names to the replacement prop names in a newer version. Useful for guarding
- * against breaking changes when a prop has been renamed
- *
- * @param {Array} spec - an array of options which specify a text or regex
- * matcher alongside a replacement if there is a match
- * @returns {Function}
- */
-function mapPopoverAlignProp(align) {
-  switch (align) {
-    case 'top-left':
-      return 'top-start';
-    case 'top-right':
-      return 'top-end';
-    case 'bottom-left':
-      return 'bottom-start';
-    case 'bottom-right':
-      return 'bottom-end';
-    case 'left-bottom':
-      return 'left-end';
-    case 'left-top':
-      return 'left-start';
-    case 'right-bottom':
-      return 'right-end';
-    case 'right-top':
-      return 'right-start';
-    default:
-      return align;
-  }
-}
-
-exports.mapPopoverAlignProp = mapPopoverAlignProp;