@carbon/react 1.78.1 → 1.78.2

package/es/components/FeatureFlags/index.js

@@ -30,7 +30,6 @@ function FeatureFlags(_ref) {
     enableV12Overflowmenu = false,
     enableTreeviewControllable = false,
     enableExperimentalFocusWrapWithoutSentinels = false,
-    enableDialogElement = false,
     enableV12DynamicFloatingStyles = false
   } = _ref;
   const parentScope = useContext(FeatureFlagContext);
@@ -41,7 +40,6 @@ function FeatureFlags(_ref) {
     'enable-v12-overflowmenu': enableV12Overflowmenu,
     'enable-treeview-controllable': enableTreeviewControllable,
     'enable-experimental-focus-wrap-without-sentinels': enableExperimentalFocusWrapWithoutSentinels,
-    'enable-dialog-element': enableDialogElement,
     'enable-v12-dynamic-floating-styles': enableV12DynamicFloatingStyles,
     ...flags
   };
@@ -80,7 +78,6 @@ FeatureFlags.propTypes = {
   enableV12Overflowmenu: PropTypes.bool,
   enableTreeviewControllable: PropTypes.bool,
   enableExperimentalFocusWrapWithoutSentinels: PropTypes.bool,
-  enableDialogElement: PropTypes.bool,
   enableV12DynamicFloatingStyles: PropTypes.bool
 };
 

package/es/components/FileUploader/FileUploader.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * 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.

package/es/components/FileUploader/FileUploader.js

@@ -12,12 +12,12 @@ import React__default, { useState, useImperativeHandle } from 'react';
 import Filename from './Filename.js';
 import FileUploaderButton from './FileUploaderButton.js';
 import { ButtonKinds } from '../Button/Button.js';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
-import { matches } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
 import { useId } from '../../internal/useId.js';
+import { matches } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 const FileUploader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {

package/es/components/FileUploader/FileUploaderButton.js

@@ -9,13 +9,13 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useState, useRef } from 'react';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
-import { matches } from '../../internal/keyboard/match.js';
 import { ButtonKinds } from '../../prop-types/types.js';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { noopFn } from '../../internal/noopFn.js';
+import { matches } from '../../internal/keyboard/match.js';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 function FileUploaderButton(_ref) {
   let {

package/es/components/FileUploader/FileUploaderDropContainer.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * 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.

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -9,13 +9,13 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
-import { matches } from '../../internal/keyboard/match.js';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { noopFn } from '../../internal/noopFn.js';
+import { matches } from '../../internal/keyboard/match.js';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 function FileUploaderDropContainer(_ref) {
   let {
@@ -71,16 +71,14 @@ function FileUploaderDropContainer(_ref) {
   }
   function handleChange(event) {
     const files = [...(event.target.files ?? [])];
-    const filesToValidate = multiple ? files : [files[0]];
-    const addedFiles = validateFiles(filesToValidate);
+    const addedFiles = validateFiles(files);
     return onAddFiles(event, {
       addedFiles
     });
   }
   function handleDrop(event) {
     const files = [...event.dataTransfer.files];
-    const filesToValidate = multiple ? files : [files[0]];
-    const addedFiles = validateFiles(filesToValidate);
+    const addedFiles = validateFiles(files);
     return onAddFiles(event, {
       addedFiles
     });

package/es/components/FileUploader/FileUploaderItem.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * 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.

package/es/components/FileUploader/FileUploaderItem.js

@@ -10,15 +10,15 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import Filename from './Filename.js';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
-import { matches } from '../../internal/keyboard/match.js';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
+import { matches } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 function FileUploaderItem(_ref) {
   let {

package/es/components/Grid/CSSGrid.js

@@ -12,10 +12,10 @@ import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useGridSettings, GridSettings } from './GridContext.js';
 
-const CSSGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+function CSSGrid(_ref) {
   let {
     align,
-    as,
+    as: BaseComponent = 'div',
     children,
     className: customClassName,
     condensed = false,
@@ -38,8 +38,7 @@ const CSSGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       mode: "css-grid",
       subgrid: true
     }, /*#__PURE__*/React__default.createElement(Subgrid, _extends({
-      ref: ref,
-      as: as,
+      as: BaseComponent,
       className: customClassName,
       mode: mode
     }, rest), children));
@@ -54,24 +53,23 @@ const CSSGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   });
 
   // cast as any to let TypeScript allow passing in attributes to base component
-  const BaseComponent = as || 'div';
+  const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default.createElement(GridSettings, {
     mode: "css-grid",
     subgrid: true
-  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
-    className: className,
-    ref: ref
+  }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
+    className: className
   }, rest), children));
-});
+}
 CSSGrid.propTypes = {
-  /**
-   * Provide a custom element to render instead of the default <div>
-   */
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   /**
    * Specify grid alignment. Default is center
    */
   align: PropTypes.oneOf(['start', 'center', 'end']),
+  /**
+   * Provide a custom element to render instead of the default <div>
+   */
+  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   /**
    * Pass in content that will be rendered within the `Grid`
    */
@@ -95,9 +93,9 @@ CSSGrid.propTypes = {
    */
   narrow: PropTypes.bool
 };
-const Subgrid = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
+const Subgrid = _ref2 => {
   let {
-    as,
+    as: BaseComponent = 'div',
     className: customClassName,
     children,
     mode,
@@ -110,12 +108,10 @@ const Subgrid = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
     [`${prefix}--subgrid--narrow`]: mode === 'narrow',
     [`${prefix}--subgrid--wide`]: mode === 'wide'
   });
-  const BaseComponent = as || 'div';
   return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
-    ref: ref,
     className: className
   }), children);
-});
+};
 Subgrid.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>

package/es/components/Grid/FlexGrid.js

@@ -12,9 +12,9 @@ import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { GridSettings } from './GridContext.js';
 
-const FlexGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+function FlexGrid(_ref) {
   let {
-    as,
+    as: BaseComponent = 'div',
     condensed = false,
     narrow = false,
     fullWidth = false,
@@ -30,15 +30,14 @@ const FlexGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--grid--full-width`]: fullWidth
   });
   // cast as any to let TypeScript allow passing in attributes to base component
-  const BaseComponent = as || 'div';
+  const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default.createElement(GridSettings, {
     mode: "flexbox",
     subgrid: false
-  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
-    className: className,
-    ref: ref
+  }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
+    className: className
   }, rest), children));
-});
+}
 FlexGrid.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>

package/es/components/Grid/GridTypes.d.ts

@@ -4,7 +4,7 @@
  * 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 { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
+import { PolymorphicProps } from '../../types/common';
 export interface GridBaseProps {
     /**
      * Pass in content that will be rendered within the `Grid`
@@ -29,9 +29,7 @@ export interface GridBaseProps {
      */
     narrow?: boolean;
 }
-export type GridProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, GridBaseProps>;
+export type GridProps<T extends React.ElementType> = PolymorphicProps<T, GridBaseProps>;
 export interface GridComponent {
-    <T extends React.ElementType = 'div'>(props: GridProps<T>): React.ReactElement | null;
-    displayName?: string;
-    propTypes?: React.WeakValidationMap<GridProps<any>>;
+    <T extends React.ElementType>(props: GridProps<T>, context?: any): React.ReactElement<any, any> | null;
 }

package/es/components/IconButton/index.js

@@ -76,9 +76,9 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
     kind: kind,
     ref: ref,
     size: size,
-    isSelected: isSelected,
-    hasIconOnly: true,
-    className: className,
+    className: cx(`${prefix}--btn--icon-only`, {
+      [`${prefix}--btn--selected`]: isSelected
+    }, className),
     "aria-describedby": badgeCount && badgeId
   }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React__default.createElement(BadgeIndicator, {
     id: badgeId,

package/es/components/Layer/index.d.ts

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import { LayerLevel } from './LayerLevel';
-import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
+import { PolymorphicProps } from '../../types/common';
 /**
  * A custom hook that will return information about the current layer. A common
  * field to pull from this is the `level` for the layer that the component that
@@ -30,6 +30,8 @@ export interface LayerBaseProps {
      */
     level?: LayerLevel;
 }
-export type LayerProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, LayerBaseProps>;
-declare const Layer: React.ForwardRefExoticComponent<Omit<LayerProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
-export { Layer };
+export type LayerProps<T extends React.ElementType> = PolymorphicProps<T, LayerBaseProps>;
+export interface LayerComponent {
+    <T extends React.ElementType>(props: LayerProps<T>, context?: any): React.ReactElement<any, any> | null;
+}
+export declare const Layer: LayerComponent;

package/es/components/Layer/index.js

@@ -24,9 +24,9 @@ function useLayer() {
     level
   };
 }
-const Layer = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+const LayerRenderFunction = /*#__PURE__*/React__default.forwardRef(function Layer(_ref, ref) {
   let {
-    as,
+    as = 'div',
     className: customClassName,
     children,
     level: overrideLevel,
@@ -38,7 +38,7 @@ const Layer = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const className = cx(`${prefix}--layer-${levels[level]}`, customClassName);
   // The level should be between MIN_LEVEL and MAX_LEVEL
   const value = Math.max(MIN_LEVEL, Math.min(level + 1, MAX_LEVEL));
-  const BaseComponent = as || 'div';
+  const BaseComponent = as;
   return /*#__PURE__*/React__default.createElement(LayerContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
@@ -47,8 +47,8 @@ const Layer = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     className: className
   }), children));
 });
-Layer.displayName = 'Layer';
-Layer.propTypes = {
+LayerRenderFunction.displayName = 'Layer';
+LayerRenderFunction.propTypes = {
   /**
    * Specify a custom component or element to be rendered as the top-level
    * element in the component
@@ -68,5 +68,6 @@ Layer.propTypes = {
    */
   level: PropTypes.oneOf([0, 1, 2])
 };
+const Layer = LayerRenderFunction;
 
 export { Layer, useLayer };

package/es/components/Link/Link.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * 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.
@@ -31,7 +31,8 @@ export interface LinkBaseProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
      */
     inline?: boolean;
     /**
-     * A component used to render an icon.
+     * @description Optional prop to render an icon next to the link.
+     *   Can be a React component class
      */
     renderIcon?: ComponentType;
     /**

package/es/components/Link/Link.js

@@ -82,7 +82,8 @@ Link.propTypes = {
    */
   inline: PropTypes.bool,
   /**
-   * A component used to render an icon.
+   * Optional prop to render an icon next to the link.
+   * Can be a React component class
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**

package/es/components/ListBox/ListBoxMenuItem.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * 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 { ForwardedRef, ReactNode, type Ref } from 'react';
+import React, { ForwardedRef, ReactNode } from 'react';
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
 export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     /**
@@ -30,7 +30,7 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     title?: string;
 }
 export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
-    menuItemOptionRef?: Ref<HTMLDivElement>;
+    menuItemOptionRef?: React.Ref<HTMLDivElement>;
 }) | null;
 export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;
 declare const _default: ListBoxMenuItemComponent;

package/es/components/ListBox/ListBoxMenuItem.js

@@ -7,47 +7,28 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
-import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
+import React__default, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
-/**
- * Determines if the content of an element is truncated.
- *
- * Merges a forwarded ref with a local ref to check the element's dimensions.
- *
- * @template T
- * @param forwardedRef - A ref passed from the parent component.
- * @param deps - Dependencies to re-run the truncation check.
- * @returns An object containing the truncation state and the merged ref.
- */
-const useIsTruncated = function (forwardedRef) {
-  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  const localRef = useRef(null);
-  const mergedRef = useMergedRefs([...(forwardedRef ? [forwardedRef] : []), localRef]);
+function useIsTruncated(ref) {
   const [isTruncated, setIsTruncated] = useState(false);
   useEffect(() => {
-    const element = localRef.current;
-    if (element) {
-      const {
-        offsetWidth,
-        scrollWidth
-      } = element;
-      setIsTruncated(offsetWidth < scrollWidth);
-    }
-  }, [localRef, ...deps]);
-  return {
-    isTruncated,
-    ref: mergedRef
-  };
-};
+    const element = ref.current;
+    const {
+      offsetWidth,
+      scrollWidth
+    } = element;
+    setIsTruncated(offsetWidth < scrollWidth);
+  }, [ref, setIsTruncated]);
+  return isTruncated;
+}
 /**
  * `ListBoxMenuItem` is a helper component for managing the container class
  * name, alongside any classes for any corresponding states, for a generic list
  * box menu item.
  */
-const ListBoxMenuItem = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+const ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxMenuItem(_ref, forwardedRef) {
   let {
     children,
     isActive = false,
@@ -56,11 +37,8 @@ const ListBoxMenuItem = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const menuItemOptionRefProp = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef.menuItemOptionRef : undefined;
-  const {
-    isTruncated,
-    ref: menuItemOptionRef
-  } = useIsTruncated(menuItemOptionRefProp, [children]);
+  const ref = useRef(null);
+  const isTruncated = useIsTruncated(forwardedRef?.menuItemOptionRef || ref);
   const className = cx(`${prefix}--list-box__menu-item`, {
     [`${prefix}--list-box__menu-item--active`]: isActive,
     [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
@@ -70,7 +48,7 @@ const ListBoxMenuItem = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
     title: isTruncated ? title : undefined
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--list-box__menu-item__option`,
-    ref: menuItemOptionRef
+    ref: forwardedRef?.menuItemOptionRef || ref
   }, children));
 });
 ListBoxMenuItem.displayName = 'ListBoxMenuItem';

package/es/components/Menu/Menu.js

@@ -10,14 +10,14 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { forwardRef, useRef, useContext, useReducer, useMemo, useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { MenuContext, menuReducer } from './MenuContext.js';
 import { canUseDOM } from '../../internal/environment.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
 
 const spacing = 8; // distance to keep to window edges, in px
 

package/es/components/Menu/MenuItem.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2025
+ * Copyright IBM Corp. 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.
@@ -31,7 +31,7 @@ export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
      */
     onClick?: (event: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => void;
     /**
-     * A component used to render an icon.
+     * Sets the menu item's icon.
      */
     renderIcon?: FC;
     /**

package/es/components/Menu/MenuItem.js

@@ -11,8 +11,6 @@ import PropTypes from 'prop-types';
 import React__default, { forwardRef, useState, useContext, useRef, useEffect } from 'react';
 import { useFloating, autoUpdate, offset, useInteractions, useHover, safePolygon, FloatingFocusManager } from '@floating-ui/react';
 import { Checkmark, CaretLeft, CaretRight } from '@carbon/icons-react';
-import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -20,7 +18,9 @@ import { Menu } from './Menu.js';
 import { MenuContext } from './MenuContext.js';
 import '../Text/index.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
+import { match } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
+import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _Checkmark, _CaretLeft, _CaretRight;
 const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
@@ -212,7 +212,7 @@ MenuItem.propTypes = {
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onClick: PropTypes.func,
   /**
-   * A component used to render an icon.
+   * Sets the menu item's icon.
    */
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),