@carbon/react 1.83.0-rc.0 → 1.83.0

package/es/index.js

@@ -33,7 +33,29 @@ export { default as useContextMenu } from './components/ContextMenu/useContextMe
 export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
 export { default as DangerButton } from './components/DangerButton/DangerButton.js';
-import './components/DataTable/index.js';
+export { default as DataTable } from './components/DataTable/DataTable.js';
+export { Table } from './components/DataTable/Table.js';
+export { default as TableActionList } from './components/DataTable/TableActionList.js';
+export { default as TableBatchAction } from './components/DataTable/TableBatchAction.js';
+export { default as TableBatchActions } from './components/DataTable/TableBatchActions.js';
+export { default as TableBody } from './components/DataTable/TableBody.js';
+export { default as TableCell } from './components/DataTable/TableCell.js';
+export { default as TableContainer } from './components/DataTable/TableContainer.js';
+export { default as TableExpandHeader } from './components/DataTable/TableExpandHeader.js';
+export { default as TableDecoratorRow } from './components/DataTable/TableDecoratorRow.js';
+export { default as TableExpandRow } from './components/DataTable/TableExpandRow.js';
+export { default as TableExpandedRow } from './components/DataTable/TableExpandedRow.js';
+export { default as TableHead } from './components/DataTable/TableHead.js';
+export { default as TableHeader } from './components/DataTable/TableHeader.js';
+export { default as TableRow } from './components/DataTable/TableRow.js';
+export { default as TableSelectAll } from './components/DataTable/TableSelectAll.js';
+export { default as TableSelectRow } from './components/DataTable/TableSelectRow.js';
+export { default as TableSlugRow } from './components/DataTable/TableSlugRow.js';
+export { default as TableToolbar } from './components/DataTable/TableToolbar.js';
+export { default as TableToolbarAction } from './components/DataTable/TableToolbarAction.js';
+export { default as TableToolbarContent } from './components/DataTable/TableToolbarContent.js';
+export { default as TableToolbarSearch } from './components/DataTable/TableToolbarSearch.js';
+export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';
 export { default as DataTableSkeleton } from './components/DataTableSkeleton/DataTableSkeleton.js';
 export { default as DatePicker } from './components/DatePicker/DatePicker.js';
 export { default as DatePickerSkeleton } from './components/DatePicker/DatePicker.Skeleton.js';
@@ -218,26 +240,3 @@ export { default as ContainedList } from './components/ContainedList/ContainedLi
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { Text as unstable_Text } from './components/Text/Text.js';
 export { TextDirection as unstable_TextDirection } from './components/Text/TextDirection.js';
-export { default as DataTable } from './components/DataTable/DataTable.js';
-export { Table } from './components/DataTable/Table.js';
-export { default as TableActionList } from './components/DataTable/TableActionList.js';
-export { default as TableBatchAction } from './components/DataTable/TableBatchAction.js';
-export { default as TableBatchActions } from './components/DataTable/TableBatchActions.js';
-export { default as TableBody } from './components/DataTable/TableBody.js';
-export { default as TableCell } from './components/DataTable/TableCell.js';
-export { default as TableContainer } from './components/DataTable/TableContainer.js';
-export { default as TableDecoratorRow } from './components/DataTable/TableDecoratorRow.js';
-export { default as TableExpandHeader } from './components/DataTable/TableExpandHeader.js';
-export { default as TableExpandRow } from './components/DataTable/TableExpandRow.js';
-export { default as TableExpandedRow } from './components/DataTable/TableExpandedRow.js';
-export { default as TableHead } from './components/DataTable/TableHead.js';
-export { default as TableHeader } from './components/DataTable/TableHeader.js';
-export { default as TableRow } from './components/DataTable/TableRow.js';
-export { default as TableSelectAll } from './components/DataTable/TableSelectAll.js';
-export { default as TableSelectRow } from './components/DataTable/TableSelectRow.js';
-export { default as TableSlugRow } from './components/DataTable/TableSlugRow.js';
-export { default as TableToolbar } from './components/DataTable/TableToolbar.js';
-export { default as TableToolbarAction } from './components/DataTable/TableToolbarAction.js';
-export { default as TableToolbarContent } from './components/DataTable/TableToolbarContent.js';
-export { default as TableToolbarSearch } from './components/DataTable/TableToolbarSearch.js';
-export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';

package/es/internal/FloatingMenu.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default, { useContext, useState, useRef, useCallback, useEffect, cloneElement } from 'react';
+import React, { useContext, useState, useRef, useCallback, useEffect, cloneElement } from 'react';
 import * as FeatureFlags from '@carbon/feature-flags';
 import ReactDOM from 'react-dom';
 import window from 'window-or-global';
@@ -276,15 +276,15 @@ const FloatingMenu = _ref2 => {
   const focusTrapWithoutSentinels = FeatureFlags.enabled('enable-experimental-focus-wrap-without-sentinels');
   if (typeof document !== 'undefined') {
     const portalTarget = target ? target() : document.body;
-    return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
       onBlur: focusTrap && !focusTrapWithoutSentinels ? handleBlur : undefined,
       onKeyDown: focusTrapWithoutSentinels ? handleKeyDown : undefined
-    }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
+    }, !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("span", {
       ref: startSentinelRef,
       tabIndex: 0,
       role: "link",
       className: `${prefix}--visually-hidden`
-    }, "Focus sentinel"), getChildrenWithProps(), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
+    }, "Focus sentinel"), getChildrenWithProps(), !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("span", {
       ref: endSentinelRef,
       tabIndex: 0,
       role: "link",

package/es/internal/__mocks__/mockHTMLElement.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+export declare const mockHTMLElement: (options: HTMLElement) => {
+    mockRestore: () => void;
+};

package/es/internal/createClassWrapper.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import React from 'react';
 
 /**
  * Wrap a class component with a functional component. This prevents an end-user
@@ -13,7 +13,7 @@ import React__default from 'react';
  */
 const createClassWrapper = Component => {
   const ClassWrapper = props => {
-    return /*#__PURE__*/React__default.createElement(Component, props);
+    return /*#__PURE__*/React.createElement(Component, props);
   };
   const name = Component.displayName || Component.name;
   ClassWrapper.displayName = `ClassWrapper(${name})`;

package/es/internal/useId.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default, { useState, useEffect, useLayoutEffect } from 'react';
+import React, { useState, useEffect, useLayoutEffect } from 'react';
 import { setupGetInstanceId } from '../tools/setupGetInstanceId.js';
 import { canUseDOM } from './environment.js';
 import { useIdPrefix } from './useIdPrefix.js';
@@ -17,7 +17,7 @@ import { useIdPrefix } from './useIdPrefix.js';
 // https://github.com/webpack/webpack/issues/14814
 // https://github.com/mui/material-ui/issues/41190
 const _React = {
-  ...React__default
+  ...React
 };
 const instanceId = setupGetInstanceId();
 const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;

package/es/internal/useIdPrefix.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import React from 'react';
 
-const IdPrefixContext = /*#__PURE__*/React__default.createContext(null);
+const IdPrefixContext = /*#__PURE__*/React.createContext(null);
 function useIdPrefix() {
-  return React__default.useContext(IdPrefixContext);
+  return React.useContext(IdPrefixContext);
 }
 
 export { IdPrefixContext, useIdPrefix };

package/es/internal/useNormalizedInputProps.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import React from 'react';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import '../components/Text/index.js';
 import { usePrefix } from './usePrefix.js';
@@ -43,14 +43,14 @@ const useNormalizedInputProps = _ref => {
   };
   if (normalizedProps.invalid) {
     normalizedProps.icon = WarningFilled;
-    normalizedProps.validation = /*#__PURE__*/React__default.createElement(Text, {
+    normalizedProps.validation = /*#__PURE__*/React.createElement(Text, {
       as: "div",
       className: `${prefix}--form-requirement`,
       id: normalizedProps.invalidId
     }, invalidText);
   } else if (normalizedProps.warn) {
     normalizedProps.icon = WarningAltFilled;
-    normalizedProps.validation = /*#__PURE__*/React__default.createElement(Text, {
+    normalizedProps.validation = /*#__PURE__*/React.createElement(Text, {
       as: "div",
       className: `${prefix}--form-requirement`,
       id: normalizedProps.warnId

package/es/internal/usePrefix.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import React from 'react';
 
-const PrefixContext = /*#__PURE__*/React__default.createContext('cds');
+const PrefixContext = /*#__PURE__*/React.createContext('cds');
 function usePrefix() {
-  return React__default.useContext(PrefixContext);
+  return React.useContext(PrefixContext);
 }
 
 export { PrefixContext, usePrefix };

package/es/internal/useResizeObserver.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 { RefObject } from 'react';
+export declare const useResizeObserver: ({ ref, onResize, }: {
+    ref: RefObject<HTMLElement>;
+    onResize?: (rect: DOMRectReadOnly) => void;
+}) => {
+    width: number;
+    height: number;
+};

package/es/internal/useResizeObserver.js

@@ -0,0 +1,74 @@
+/**
+ * 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.
+ */
+
+import { useState, useRef, useEffect, useLayoutEffect } from 'react';
+
+const useResizeObserver = _ref => {
+  let {
+    ref,
+    onResize
+  } = _ref;
+  const [width, setWidth] = useState(-1);
+  const [height, setHeight] = useState(-1);
+  const entriesToHandle = useRef(null);
+  const cb = useRef(onResize);
+  useEffect(() => {
+    // ref for onResize removes it as dependency from useLayoutEffect
+    // This significantly reduces repeated calls if a function is redefined on every
+    // render
+    cb.current = onResize;
+  }, [onResize]);
+  useEffect(() => {
+    const getInitialSize = () => {
+      if (ref.current) {
+        const refComputedStyle = window.getComputedStyle(ref.current);
+        const initialWidth = (ref.current?.offsetWidth ?? 0) - (typeof refComputedStyle?.paddingLeft === 'string' && refComputedStyle?.paddingLeft.length ? parseFloat(refComputedStyle?.paddingLeft) : 0) - (typeof refComputedStyle?.paddingRight === 'string' && refComputedStyle?.paddingRight.length ? parseFloat(refComputedStyle?.paddingRight) : 0);
+        const initialHeight = (ref.current?.offsetHeight ?? 0) - (typeof refComputedStyle?.paddingTop === 'string' && refComputedStyle?.paddingTop.length ? parseFloat(refComputedStyle?.paddingTop) : 0) - (typeof refComputedStyle?.paddingBottom === 'string' && refComputedStyle?.paddingBottom.length ? parseFloat(refComputedStyle?.paddingBottom) : 0);
+        setWidth(initialWidth);
+        setHeight(initialHeight);
+      }
+    };
+    if (!ref?.current || width >= 0 && height >= 0) {
+      return;
+    }
+    getInitialSize();
+  }, [width, height]);
+  useLayoutEffect(() => {
+    if (!ref?.current) {
+      return;
+    }
+    const doCallbacks = () => {
+      if (!ref?.current || !Array.isArray(entriesToHandle?.current)) {
+        return;
+      }
+      const entry = entriesToHandle.current[0];
+      setWidth(entry.contentRect.width);
+      setHeight(entry.contentRect.height);
+      cb.current && cb.current(entry.contentRect);
+    };
+    const observer = new ResizeObserver(entries => {
+      // always update entriesToHandle
+      entriesToHandle.current = entries;
+      window.requestAnimationFrame(() => {
+        // do callbacks
+        doCallbacks();
+      });
+    });
+
+    // observe all refs passed
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return {
+    width,
+    height
+  };
+};
+
+export { useResizeObserver };

package/es/internal/wrapFocus.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useEffect } from 'react';
 import { tabbable } from 'tabbable';
 import { selectorTabbable } from './keyboard/navigation.js';
 
@@ -96,11 +95,9 @@ const wrapFocusWithoutSentinels = _ref4 => {
     event
   } = _ref4;
   if (!containerNode) return;
-  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.`);
-    }
-  }, []);
+  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.`);
+  }
 
   // Use `tabbable` to get the focusable elements in tab order.
   // `selectorTabbable` returns elements in DOM order which is why it's not

package/es/tools/wrapComponent.d.ts

@@ -1,11 +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 from 'react';
-import { ReactAttr } from '../types/common';
+import React, { type HTMLAttributes } from 'react';
 type HTMLTagName = keyof HTMLElementTagNameMap;
 type WrapComponentArgs<T extends HTMLTagName> = {
     name: string;
@@ -16,5 +15,5 @@ type WrapComponentArgs<T extends HTMLTagName> = {
  * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
  * @returns
  */
-declare const wrapComponent: <T extends HTMLTagName>({ name, className: getClassName, type, }: WrapComponentArgs<T>) => ((props: ReactAttr<T>) => React.ReactElement<any>);
+declare const wrapComponent: <T extends HTMLTagName>({ name, className: getClassName, type, }: WrapComponentArgs<T>) => ((props: HTMLAttributes<T>) => React.ReactElement<any>);
 export default wrapComponent;

package/es/tools/wrapComponent.js

@@ -7,7 +7,7 @@
 
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { usePrefix } from '../internal/usePrefix.js';
 
 /**
@@ -32,7 +32,7 @@ const wrapComponent = _ref => {
     } = _ref2;
     const prefix = usePrefix();
     const componentClass = cx(typeof getClassName === 'function' ? getClassName(prefix) : getClassName, baseClassName);
-    return /*#__PURE__*/React__default.createElement(type, {
+    return /*#__PURE__*/React.createElement(type, {
       ...other,
       // Prevent Weird quirk where `cx` will evaluate to an empty string, '',
       // and so we have empty `class` attributes in the resulting markup

package/es/types/common.d.ts

@@ -4,8 +4,6 @@
  * 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 * as React from 'react';
-export type ReactAttr<T = HTMLElement> = React.HTMLAttributes<T>;
 /**
  * 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/lib/components/CodeSnippet/CodeSnippet.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
-var useResizeObserver = require('use-resize-observer');
+var useResizeObserver = require('../../internal/useResizeObserver.js');
 var iconsReact = require('@carbon/icons-react');
 var Copy = require('../Copy/Copy.js');
 var Button = require('../Button/Button.js');
@@ -31,7 +31,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
 var copy__default = /*#__PURE__*/_interopDefaultLegacy(copy);
 
 const rowHeightInPixels = 16;
@@ -112,7 +111,7 @@ function CodeSnippet(_ref) {
     setHasLeftOverflow(horizontalOverflow && !!codeScrollLeft);
     setHasRightOverflow(horizontalOverflow && codeScrollLeft + codeClientWidth !== codeScrollWidth);
   }, [type, getCodeRefDimensions]);
-  useResizeObserver__default["default"]({
+  useResizeObserver.useResizeObserver({
     // Cast the ref until the hook supports React 19
     // https://github.com/ZeeCoder/use-resize-observer/issues/108
     ref: getCodeRef(),

package/lib/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -28,6 +28,10 @@ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>,
      *     been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
      */
     light?: boolean;
+    /**
+     * `true` to use the low contrast version.
+     */
+    lowContrast?: boolean;
     /**
      * Specify an `onChange` handler that is called whenever the ContentSwitcher
      * changes which item is selected
@@ -72,6 +76,10 @@ export default class ContentSwitcher extends React.Component<ContentSwitcherProp
          * `true` to use the light variant.
          */
         light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * `true` to use the low contrast version.
+         */
+        lowContrast: PropTypes.Requireable<boolean>;
         /**
          * Specify an `onChange` handler that is called whenever the ContentSwitcher
          * changes which item is selected

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -111,6 +111,7 @@ class ContentSwitcher extends React__default["default"].Component {
       children,
       className,
       light,
+      lowContrast,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       selectedIndex = 0,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -128,7 +129,8 @@ class ContentSwitcher extends React__default["default"].Component {
       [`${prefix}--content-switcher--${size}`]: size,
       // TODO: V12 - Remove this class
       [`${prefix}--layout--size-${size}`]: size,
-      [`${prefix}--content-switcher--icon-only`]: isIconOnly
+      [`${prefix}--content-switcher--icon-only`]: isIconOnly,
+      [`${prefix}--content-switcher--low-contrast`]: lowContrast
     });
     return /*#__PURE__*/React__default["default"].createElement(index.LayoutConstraint, _rollupPluginBabelHelpers["extends"]({
       size: {
@@ -163,6 +165,10 @@ _rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "propTypes", {
    * `true` to use the light variant.
    */
   light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `ContentSwitcher` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
+  /**
+   * `true` to use the low contrast version.
+   */
+  lowContrast: PropTypes__default["default"].bool,
   /**
    * Specify an `onChange` handler that is called whenever the ContentSwitcher
    * changes which item is selected