@carbon/react 1.78.1 → 1.78.2

package/lib/components/Grid/CSSGrid.js

@@ -22,10 +22,10 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const CSSGrid = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+function CSSGrid(_ref) {
   let {
     align,
-    as,
+    as: BaseComponent = 'div',
     children,
     className: customClassName,
     condensed = false,
@@ -48,8 +48,7 @@ const CSSGrid = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
       mode: "css-grid",
       subgrid: true
     }, /*#__PURE__*/React__default["default"].createElement(Subgrid, _rollupPluginBabelHelpers["extends"]({
-      ref: ref,
-      as: as,
+      as: BaseComponent,
       className: customClassName,
       mode: mode
     }, rest), children));
@@ -64,24 +63,23 @@ const CSSGrid = /*#__PURE__*/React__default["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["default"].createElement(GridContext.GridSettings, {
     mode: "css-grid",
     subgrid: true
-  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
-    className: className,
-    ref: ref
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
+    className: className
   }, rest), children));
-});
+}
 CSSGrid.propTypes = {
-  /**
-   * Provide a custom element to render instead of the default <div>
-   */
-  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
   /**
    * Specify grid alignment. Default is center
    */
   align: PropTypes__default["default"].oneOf(['start', 'center', 'end']),
+  /**
+   * Provide a custom element to render instead of the default <div>
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
   /**
    * Pass in content that will be rendered within the `Grid`
    */
@@ -105,9 +103,9 @@ CSSGrid.propTypes = {
    */
   narrow: PropTypes__default["default"].bool
 };
-const Subgrid = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref) => {
+const Subgrid = _ref2 => {
   let {
-    as,
+    as: BaseComponent = 'div',
     className: customClassName,
     children,
     mode,
@@ -120,12 +118,10 @@ const Subgrid = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref) =
     [`${prefix}--subgrid--narrow`]: mode === 'narrow',
     [`${prefix}--subgrid--wide`]: mode === 'wide'
   });
-  const BaseComponent = as || 'div';
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
-    ref: ref,
     className: className
   }), children);
-});
+};
 Subgrid.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>

package/lib/components/Grid/FlexGrid.js

@@ -22,9 +22,9 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const FlexGrid = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+function FlexGrid(_ref) {
   let {
-    as,
+    as: BaseComponent = 'div',
     condensed = false,
     narrow = false,
     fullWidth = false,
@@ -40,15 +40,14 @@ const FlexGrid = /*#__PURE__*/React__default["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["default"].createElement(GridContext.GridSettings, {
     mode: "flexbox",
     subgrid: false
-  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
-    className: className,
-    ref: ref
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
+    className: className
   }, rest), children));
-});
+}
 FlexGrid.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>

package/lib/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/lib/components/IconButton/index.js

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

package/lib/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/lib/components/Layer/index.js

@@ -34,9 +34,9 @@ function useLayer() {
     level
   };
 }
-const Layer = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+const LayerRenderFunction = /*#__PURE__*/React__default["default"].forwardRef(function Layer(_ref, ref) {
   let {
-    as,
+    as = 'div',
     className: customClassName,
     children,
     level: overrideLevel,
@@ -48,7 +48,7 @@ const Layer = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   const className = cx__default["default"](`${prefix}--layer-${LayerLevel.levels[level]}`, customClassName);
   // The level should be between MIN_LEVEL and MAX_LEVEL
   const value = Math.max(LayerLevel.MIN_LEVEL, Math.min(level + 1, LayerLevel.MAX_LEVEL));
-  const BaseComponent = as || 'div';
+  const BaseComponent = as;
   return /*#__PURE__*/React__default["default"].createElement(LayerContext.LayerContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
@@ -57,8 +57,8 @@ const Layer = /*#__PURE__*/React__default["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
@@ -78,6 +78,7 @@ Layer.propTypes = {
    */
   level: PropTypes__default["default"].oneOf([0, 1, 2])
 };
+const Layer = LayerRenderFunction;
 
 exports.Layer = Layer;
 exports.useLayer = useLayer;

package/lib/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/lib/components/Link/Link.js

@@ -92,7 +92,8 @@ Link.propTypes = {
    */
   inline: PropTypes__default["default"].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__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**

package/lib/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/lib/components/ListBox/ListBoxMenuItem.js

@@ -14,7 +14,6 @@ var cx = require('classnames');
 var React = require('react');
 var PropTypes = require('prop-types');
 var usePrefix = require('../../internal/usePrefix.js');
-var useMergedRefs = require('../../internal/useMergedRefs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,42 +21,24 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-/**
- * 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 = React.useRef(null);
-  const mergedRef = useMergedRefs.useMergedRefs([...(forwardedRef ? [forwardedRef] : []), localRef]);
+function useIsTruncated(ref) {
   const [isTruncated, setIsTruncated] = React.useState(false);
   React.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__*/React.forwardRef((_ref, forwardedRef) => {
+const ListBoxMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function ListBoxMenuItem(_ref, forwardedRef) {
   let {
     children,
     isActive = false,
@@ -66,11 +47,8 @@ const ListBoxMenuItem = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const menuItemOptionRefProp = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef.menuItemOptionRef : undefined;
-  const {
-    isTruncated,
-    ref: menuItemOptionRef
-  } = useIsTruncated(menuItemOptionRefProp, [children]);
+  const ref = React.useRef(null);
+  const isTruncated = useIsTruncated(forwardedRef?.menuItemOptionRef || ref);
   const className = cx__default["default"](`${prefix}--list-box__menu-item`, {
     [`${prefix}--list-box__menu-item--active`]: isActive,
     [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
@@ -80,7 +58,7 @@ const ListBoxMenuItem = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
     title: isTruncated ? title : undefined
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__menu-item__option`,
-    ref: menuItemOptionRef
+    ref: forwardedRef?.menuItemOptionRef || ref
   }, children));
 });
 ListBoxMenuItem.displayName = 'ListBoxMenuItem';

package/lib/components/Menu/Menu.js

@@ -14,14 +14,14 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var ReactDOM = require('react-dom');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var MenuContext = require('./MenuContext.js');
 var environment = require('../../internal/environment.js');
 var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/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/lib/components/Menu/MenuItem.js

@@ -15,8 +15,6 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var react = require('@floating-ui/react');
 var iconsReact = require('@carbon/icons-react');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
 var useControllableState = require('../../internal/useControllableState.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -24,7 +22,9 @@ var Menu = require('./Menu.js');
 var MenuContext = require('./MenuContext.js');
 require('../Text/index.js');
 var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
+var match = require('../../internal/keyboard/match.js');
 var Text = require('../Text/Text.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -222,7 +222,7 @@ MenuItem.propTypes = {
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onClick: PropTypes__default["default"].func,
   /**
-   * A component used to render an icon.
+   * Sets the menu item's icon.
    */
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),