@carbon/react 1.99.0 → 1.100.0

package/es/components/UIShell/SideNavIcon.d.ts

@@ -1,9 +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 PropTypes from 'prop-types';
 import React from 'react';
 export interface SideNavIconProps {
     /**
@@ -21,5 +22,22 @@ export interface SideNavIconProps {
      */
     small?: boolean;
 }
-declare const SideNavIcon: React.FC<SideNavIconProps>;
+declare const SideNavIcon: {
+    ({ children, className: customClassName, small, }: SideNavIconProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Provide a single icon as the child to `SideNavIcon` to render in the
+         * container
+         */
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * Provide an optional class to be applied to the containing node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the icon should be placed in a smaller bounding box
+         */
+        small: PropTypes.Requireable<boolean>;
+    };
+};
 export default SideNavIcon;

package/es/components/UIShell/SideNavItem.d.ts

@@ -1,9 +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 PropTypes from 'prop-types';
 import React from 'react';
 export interface SideNavItemProps {
     /**
@@ -20,5 +21,22 @@ export interface SideNavItemProps {
      */
     large?: boolean;
 }
-declare const SideNavItem: React.FC<SideNavItemProps>;
+declare const SideNavItem: {
+    ({ className: customClassName, children, large, }: SideNavItemProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Provide a single icon as the child to `SideNavItem` to render in the
+         * container
+         */
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * Provide an optional class to be applied to the containing node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if this is a large variation of the SideNavItem
+         */
+        large: PropTypes.Requireable<boolean>;
+    };
+};
 export default SideNavItem;

package/es/components/UIShell/SideNavItems.d.ts

@@ -1,9 +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 PropTypes from 'prop-types';
 import React from 'react';
 export interface SideNavItemsProps {
     /**
@@ -21,5 +22,24 @@ export interface SideNavItemsProps {
      */
     isSideNavExpanded?: boolean;
 }
-declare const SideNavItems: React.FC<SideNavItemsProps>;
+declare const SideNavItems: {
+    ({ className: customClassName, children, isSideNavExpanded, }: SideNavItemsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide a single icon as the child to `SideNavIcon` to render in the
+         * container
+         */
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * Provide an optional class to be applied to the containing node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Property to indicate if the side nav container is open (or not). Use to
+         * keep local state and styling in step with the SideNav expansion state.
+         */
+        isSideNavExpanded: PropTypes.Requireable<boolean>;
+    };
+};
 export default SideNavItems;

package/es/components/UIShell/SideNavLink.d.ts

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

@@ -18,16 +18,18 @@ import { SideNavContext } from './SideNav.js';
 
 // First define a non-generic base component to work with forwardRef
 
-const SideNavLinkBase = ({
-  children,
-  className: customClassName,
-  renderIcon: IconElement,
-  isActive,
-  isSideNavExpanded,
-  large = false,
-  tabIndex,
-  ...rest
-}, ref) => {
+const frFn = forwardRef;
+const SideNavLink = frFn((props, ref) => {
+  const {
+    children,
+    className: customClassName,
+    renderIcon: IconElement,
+    isActive,
+    isSideNavExpanded,
+    large = false,
+    tabIndex,
+    ...rest
+  } = props;
   const isRail = useContext(SideNavContext);
   const prefix = usePrefix();
   const className = cx({
@@ -44,10 +46,8 @@ const SideNavLinkBase = ({
   }), IconElement && /*#__PURE__*/React.createElement(SideNavIcon, {
     small: true
   }, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement(SideNavLinkText, null, children)));
-};
-
-// Use forwardRef with the non-generic function and cast to the generic component type
-const SideNavLink = /*#__PURE__*/forwardRef(SideNavLinkBase);
+  // Cast preserves the generic call signature for consumers after forwardRef.
+});
 SideNavLink.displayName = 'SideNavLink';
 SideNavLink.propTypes = {
   ...LinkPropTypes,

package/es/components/UIShell/SideNavMenu.d.ts

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

@@ -8,7 +8,7 @@
 import { ChevronDown } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext, useState } from 'react';
+import React, { forwardRef, useContext, useState } from 'react';
 import SideNavIcon from './SideNavIcon.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -16,7 +16,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { SideNavContext } from './SideNav.js';
 
 var _ChevronDown;
-const SideNavMenu = /*#__PURE__*/React.forwardRef(({
+const SideNavMenu = /*#__PURE__*/forwardRef(({
   className: customClassName,
   children,
   defaultExpanded = false,

package/es/components/UIShell/SideNavMenuItem.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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, { ElementType, ComponentProps } from 'react';
+import React, { type ComponentProps, type ElementType } from 'react';
 import Link from './Link';
 export type SideNavMenuItemProps = ComponentProps<typeof Link> & {
     /**

package/es/components/UIShell/SideNavMenuItem.js

@@ -8,12 +8,12 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import SideNavLinkText from './SideNavLinkText.js';
 import Link from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const SideNavMenuItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+const SideNavMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
   const prefix = usePrefix();
   const {
     children,

package/es/components/UIShell/SwitcherDivider.d.ts

@@ -4,12 +4,20 @@
  * 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 PropTypes from 'prop-types';
 export interface SwitcherDividerProps {
     /**
      * Optionally provide a custom class to apply to the underlying `<li>` node
      */
     className?: string;
 }
-declare const SwitcherDivider: React.FC<SwitcherDividerProps>;
+declare const SwitcherDivider: {
+    ({ className: customClassName, ...other }: SwitcherDividerProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Optionally provide a custom class to apply to the underlying `<li>` node
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 export default SwitcherDivider;

package/es/internal/FloatingMenu.d.ts

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

@@ -153,8 +153,6 @@ const FloatingMenu = ({
       // Re-check after setting the position if not already adjusting.
       if (!isAdjustment) {
         const newMenuSize = menuBody.getBoundingClientRect();
-        // TODO: Was there a bug in the old code? How could one `DOMRect` be
-        // compared to another using `!==`?
         if (newMenuSize.width !== menuSize.width || newMenuSize.height !== menuSize.height) {
           updateMenuPosition(true);
         }

package/es/internal/PolymorphicProps.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2025
+ * Copyright IBM Corp. 2025, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,9 +8,9 @@ type AsProp<C extends React.ElementType> = {
     as?: C;
 };
 type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
-export type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+export type PolymorphicComponentProp<C extends React.ElementType, Props = Record<string, never>> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
 export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
-export type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = {}> = PolymorphicComponentProp<C, Props> & {
+export type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = Record<string, never>> = PolymorphicComponentProp<C, Props> & {
     ref?: PolymorphicRef<C>;
 };
 export {};

package/es/internal/useNoInteractiveChildren.d.ts

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

@@ -8,13 +8,12 @@
 import { useEffect } from 'react';
 
 const useNoInteractiveChildren = (ref, message = 'component should have no interactive child nodes') => {
-  // TODO: Why can't the condition go inside the hook?
   if (process.env.NODE_ENV !== 'production') {
-    // TODO: https://github.com/carbon-design-system/carbon/issues/19005
-    /*
+    // This hook is intentionally called conditionally because it is
+    // stripped from production builds. In development it runs once
+    // to enforce accessibility constraints.
+    //
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    */
-    // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
     useEffect(() => {
       const node = ref.current ? getInteractiveContent(ref.current) : false;
       if (node) {
@@ -28,13 +27,12 @@ const useNoInteractiveChildren = (ref, message = 'component should have no inter
   }
 };
 const useInteractiveChildrenNeedDescription = (ref, message = `interactive child node(s) should have an \`aria-describedby\` property`) => {
-  // TODO: Why can't the condition go inside the hook?
   if (process.env.NODE_ENV !== 'production') {
-    // TODO: https://github.com/carbon-design-system/carbon/issues/19005
-    /*
+    // This hook is intentionally called conditionally because it is
+    // stripped from production builds. In development it runs once
+    // to enforce accessibility constraints.
+    //
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    */
-    // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
     useEffect(() => {
       const node = ref.current ? getInteractiveContent(ref.current) : false;
       if (node && !node.hasAttribute('aria-describedby')) {

package/es/internal/useOutsideClick.d.ts

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

@@ -19,11 +19,7 @@ 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 (canUseDOM) {
-    // TODO: https://github.com/carbon-design-system/carbon/issues/19005
-    /*
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    */
-    // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
     useWindowEvent('click', event => {
       const {
         target

package/lib/components/BadgeIndicator/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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/lib/components/BadgeIndicator/index.js

@@ -15,11 +15,13 @@ var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
 
-const BadgeIndicator = /*#__PURE__*/React.forwardRef(function BadgeIndicatorContent({
-  className: customClassName,
-  count,
-  ...rest
-}, ref) {
+const frFn = React.forwardRef;
+const BadgeIndicator = frFn((props, ref) => {
+  const {
+    className: customClassName,
+    count,
+    ...rest
+  } = props;
   const prefix = usePrefix.usePrefix();
   const classNames = cx(`${prefix}--badge-indicator`, customClassName, {
     [`${prefix}--badge-indicator--count`]: count

package/lib/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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/lib/components/Breadcrumb/BreadcrumbItem.js

@@ -37,10 +37,9 @@ const BreadcrumbItem = frFn((props, ref) => {
     [`${prefix}--breadcrumb-item--current`]: isCurrentPage && ariaCurrent !== 'page',
     [customClassName]: !!customClassName
   });
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-  const child = children;
-  if (child.type && child.type.displayName !== undefined && child.type.displayName.includes('OverflowMenu')) {
+  const child = /*#__PURE__*/React.isValidElement(children) ? children : null;
+  const childType = child?.type;
+  if (child && typeof child.type !== 'string' && childType?.displayName?.includes('OverflowMenu')) {
     const horizontalOverflowIcon = /*#__PURE__*/React.createElement(iconsReact.OverflowMenuHorizontal, {
       className: `${prefix}--overflow-menu__icon`
     });
@@ -70,10 +69,10 @@ const BreadcrumbItem = frFn((props, ref) => {
   return /*#__PURE__*/React.createElement("li", _rollupPluginBabelHelpers.extends({
     className: className,
     ref: ref
-  }, rest), /*#__PURE__*/React.cloneElement(child, {
+  }, rest), child ? /*#__PURE__*/React.cloneElement(child, {
     'aria-current': ariaCurrent,
     className: cx(`${prefix}--link`, child.props.className)
-  }));
+  }) : children);
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 BreadcrumbItem.propTypes = {

package/lib/components/Button/Button.Skeleton.d.ts

@@ -1,9 +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 PropTypes from 'prop-types';
 import React from 'react';
 import { ButtonSize } from './Button';
 export interface ButtonSkeletonProps extends React.HTMLAttributes<HTMLElement> {
@@ -23,6 +24,31 @@ export interface ButtonSkeletonProps extends React.HTMLAttributes<HTMLElement> {
      */
     small?: boolean;
 }
-declare const ButtonSkeleton: React.FC<ButtonSkeletonProps>;
+declare const ButtonSkeleton: {
+    ({ className, small, href, size, ...rest }: ButtonSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Optionally specify an href for your Button to become an `<a>` element
+         */
+        href: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the button, from a list of available sizes.
+         * For `default` buttons, this prop can remain unspecified or use `default`.
+         * In the next major release of Carbon, `default`, `field`, and `small` will be removed
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * @deprecated This property will be removed in the next major Carbon version,
+         * use size={sm} instead.
+         *
+         * Specify whether the Button should be a small variant
+         */
+        small: PropTypes.Requireable<boolean>;
+    };
+};
 export default ButtonSkeleton;
 export { ButtonSkeleton };

package/lib/components/Button/Button.js

@@ -25,8 +25,6 @@ function isIconOnlyButton(hasIconOnly, _kind) {
   }
   return false;
 }
-
-// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
 const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     as,
@@ -108,7 +106,10 @@ const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
     );
   }
 });
+
+// @ts-expect-error - `displayName` isn't typed.
 Button.displayName = 'Button';
+// @ts-expect-error - `propTypes` isn't typed.
 Button.propTypes = {
   /**
    * Specify how the button itself should be rendered.

package/lib/components/ChatButton/ChatButton.d.ts

@@ -4,7 +4,8 @@
  * 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, { type ComponentType, type FunctionComponent } from 'react';
+import React, { type ComponentProps } from 'react';
+import Button from '../Button';
 export type ChatButtonKind = 'primary' | 'secondary' | 'danger' | 'ghost' | 'tertiary';
 export type ChatButtonSize = 'sm' | 'md' | 'lg';
 export interface ChatButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -35,7 +36,7 @@ export interface ChatButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     /**
      * A component used to render an icon.
      */
-    renderIcon?: ComponentType | FunctionComponent;
+    renderIcon?: ComponentProps<typeof Button>['renderIcon'];
     /**
      * Specify the size of the `ChatButton`, from the following list of sizes:
      */

package/lib/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -4,7 +4,8 @@
  * 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, { type ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { type ReactNode } from 'react';
 export interface CheckboxGroupProps {
     children?: ReactNode;
     className?: string;
@@ -28,5 +29,62 @@ export interface CustomType {
     size: string;
     kind: string;
 }
-declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+declare const CheckboxGroup: {
+    ({ children, className, decorator, helperText, invalid, invalidText, legendId, legendText, readOnly, warn, warnText, slug, orientation, ...rest }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Provide the children form elements to be rendered inside of the <fieldset>
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom className to be applied to the containing <fieldset> node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * **Experimental**: Provide a decorator component to be rendered inside the `CheckboxGroup` component
+         */
+        decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide text for the form group for additional help
+         */
+        helperText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify whether the form group is currently invalid
+         */
+        invalid: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the text that is displayed when the form group is in an invalid state
+         */
+        invalidText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide id for the fieldset <legend> which corresponds to the fieldset
+         * `aria-labelledby`
+         */
+        legendId: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide the text to be rendered inside of the fieldset <legend>
+         */
+        legendText: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * Provide the orientation for how the checkbox should be displayed
+         */
+        orientation: PropTypes.Requireable<string>;
+        /**
+         * Whether the CheckboxGroup should be read-only
+         */
+        readOnly: PropTypes.Requireable<boolean>;
+        /**
+         * **Experimental**: Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
+         */
+        slug: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
+        /**
+         * Specify whether the form group is currently in warning state
+         */
+        warn: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the text that is displayed when the form group is in warning state
+         */
+        warnText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+};
 export default CheckboxGroup;

package/lib/components/ComboBox/ComboBox.d.ts

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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 { UseComboboxProps, UseComboboxActions } from 'downshift';
-import React, { type ComponentType, type InputHTMLAttributes, type MouseEvent, type PropsWithChildren, type PropsWithRef, type ReactElement, type ReactNode, type RefAttributes } from 'react';
+import { type InputHTMLAttributes, type MouseEvent, type PropsWithChildren, type ReactElement, type ReactNode, type RefAttributes, type RefObject } from 'react';
 import { type ListBoxMenuIconTranslationKey, type ListBoxSelectionTranslationKey, type ListBoxSize } from '../ListBox';
 import type { TranslateWithId } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
@@ -74,7 +74,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      * cases they can not be shimmed by Carbon to shield you from potentially breaking
      * changes.
      */
-    downshiftActions?: React.MutableRefObject<UseComboboxActions<ItemType> | undefined>;
+    downshiftActions?: RefObject<UseComboboxActions<ItemType> | undefined>;
     /**
      * Provide helper text that is used alongside the control label for
      * additional help
@@ -98,10 +98,9 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     invalidText?: ReactNode;
     /**
-     * Optional function to render items as custom components instead of strings.
-     * Defaults to null and is overridden by a getter
+     * Renders an item as a custom React node instead of a string.
      */
-    itemToElement?: ComponentType<ItemType> | null;
+    itemToElement?: ((item: ItemType) => ReactNode) | null;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field
@@ -196,7 +195,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }
-type ComboboxComponentProps<ItemType> = PropsWithRef<PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>>;
+type ComboboxComponentProps<ItemType> = PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>;
 export interface ComboBoxComponent {
     <ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement<any> | null;
 }