@carbon/react 1.100.0-rc.0 → 1.101.0-rc.0

package/es/components/AILabel/index.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/AILabel/index.js

@@ -23,20 +23,9 @@ const AILabelContent = /*#__PURE__*/React.forwardRef(function AILabelContent({
 }, ref // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
 ) {
   const prefix = usePrefix();
-  const hasAILabelActions = React.Children.toArray(children).some(child => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-    const item = child;
-    // TODO: Is there supposed to be a `return` here? If so, this issue would
-    // have been caught by ESLint. It's concerning that this code is 7 months
-    // old and no one has noticed any issues with it. It also makes me question
-    // whether the code is necessary.
-    // https://github.com/carbon-design-system/carbon/issues/18991
-    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-    item.type === AILabelActions;
-  });
   const aiLabelContentClasses = cx(className, {
     [`${prefix}--ai-label-content`]: true,
-    [`${prefix}--ai-label-content--with-actions`]: hasAILabelActions
+    [`${prefix}--ai-label-content--with-actions`]: false
   });
   return /*#__PURE__*/React.createElement(ToggletipContent, {
     className: aiLabelContentClasses

package/es/components/Checkbox/Checkbox.js

@@ -42,11 +42,12 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;
   const checkboxGroupInstanceId = useId();
-  const helperId = !helperText ? undefined : `checkbox-helper-text-${checkboxGroupInstanceId}`;
-  const helper = helperText ? /*#__PURE__*/React.createElement("div", {
+  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
+  const helperId = !hasHelper ? undefined : `checkbox-helper-text-${checkboxGroupInstanceId}`;
+  const helper = hasHelper && /*#__PURE__*/React.createElement("div", {
     id: helperId,
     className: `${prefix}--form__helper-text`
-  }, helperText) : null;
+  }, helperText);
   const wrapperClasses = cx(`${prefix}--form-item`, `${prefix}--checkbox-wrapper`, className, {
     [`${prefix}--checkbox-wrapper--readonly`]: readOnly,
     [`${prefix}--checkbox-wrapper--invalid`]: !readOnly && invalid,
@@ -106,6 +107,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     className: `${prefix}--checkbox-label`,
     title: title
   }, /*#__PURE__*/React.createElement(Text, {
+    as: "div",
     className: innerLabelClasses
   }, labelText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--checkbox-wrapper-inner--decorator`

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -38,11 +38,12 @@ const CheckboxGroup = ({
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;
   const checkboxGroupInstanceId = useId();
-  const helperId = !helperText ? undefined : `checkbox-group-helper-text-${checkboxGroupInstanceId}`;
-  const helper = helperText ? /*#__PURE__*/React.createElement("div", {
+  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
+  const helperId = !hasHelper ? undefined : `checkbox-group-helper-text-${checkboxGroupInstanceId}`;
+  const helper = hasHelper && /*#__PURE__*/React.createElement("div", {
     id: helperId,
     className: `${prefix}--form__helper-text`
-  }, helperText) : null;
+  }, helperText);
   const fieldsetClasses = cx(`${prefix}--checkbox-group`, className, {
     [`${prefix}--checkbox-group--${orientation}`]: orientation === 'horizontal',
     [`${prefix}--checkbox-group--readonly`]: readOnly,

package/es/components/CodeSnippet/CodeSnippet.d.ts

@@ -111,7 +111,7 @@ declare namespace CodeSnippet {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * Specify a label to be read by screen readers on the containing textbox
          * node

package/es/components/ComboBox/ComboBox.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { UseComboboxProps, UseComboboxActions } from 'downshift';
-import { type ComponentType, type InputHTMLAttributes, type MouseEvent, type PropsWithChildren, type ReactElement, type ReactNode, type RefAttributes, type RefObject } 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';
@@ -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

package/es/components/ComboBox/ComboBox.js

@@ -23,6 +23,7 @@ import { useId } from '../../internal/useId.js';
 import { mergeRefs } from '../../tools/mergeRefs.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useFloating, autoUpdate, flip, hide } from '@floating-ui/react';
@@ -247,8 +248,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   useEffect(() => {
     if (prevInputValue.current !== inputValue) {
       prevInputValue.current = inputValue;
-      // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-      onInputChange && onInputChange(inputValue);
+      onInputChange?.(inputValue);
     }
     // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, [inputValue]);
@@ -423,11 +423,19 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       event?.persist?.();
     }
   };
-  const showWarning = !invalid && warn;
+  const normalizedProps = useNormalizedInputProps({
+    id,
+    readOnly,
+    disabled: disabled || false,
+    invalid: invalid || false,
+    invalidText,
+    warn: warn || false,
+    warnText
+  });
   const className = cx(`${prefix}--combo-box`, {
     [`${prefix}--combo-box--invalid--focused`]: invalid && isFocused,
     [`${prefix}--list-box--up`]: direction === 'top',
-    [`${prefix}--combo-box--warning`]: showWarning,
+    [`${prefix}--combo-box--warning`]: normalizedProps.warn,
     [`${prefix}--combo-box--readonly`]: readOnly,
     [`${prefix}--autoalign`]: enableFloatingStyles
   });
@@ -450,9 +458,6 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     [`${prefix}--combo-box--input--focus`]: isFocused
   });
 
-  // needs to be Capitalized for react to render it correctly
-  const ItemToElement = itemToElement;
-
   // AILabel always size `mini`
   const candidate = slug ?? decorator;
   const candidateIsAILabel = isComponentElement(candidate, AILabel);
@@ -600,7 +605,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   // The input should be described by the appropriate message text id
   // when both the message is supplied *and* when the component is in
   // the matching state (invalid, warn, etc).
-  const ariaDescribedBy = invalid && invalidText && invalidTextId || warn && warnText && warnTextId || helperText && !isFluid && helperTextId || undefined;
+  const ariaDescribedBy = normalizedProps.invalid && invalidText && invalidTextId || normalizedProps.warn && warnText && warnTextId || helperText && !isFluid && helperTextId || undefined;
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = useMemo(() => getMenuProps({
@@ -628,13 +633,13 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     onBlur: handleFocus,
     className: className,
     disabled: disabled,
-    invalid: invalid,
+    invalid: normalizedProps.invalid,
     invalidText: invalidText,
     invalidTextId: invalidTextId,
     isOpen: isOpen,
     light: light,
     size: size,
-    warn: warn,
+    warn: normalizedProps.warn,
     ref: enableFloatingStyles ? refs.setReference : null,
     warnText: warnText,
     warnTextId: warnTextId
@@ -736,9 +741,9 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   }), rest, readOnlyEventHandlers, {
     readOnly: readOnly,
     "aria-describedby": ariaDescribedBy
-  })), invalid && /*#__PURE__*/React.createElement(WarningFilled, {
+  })), normalizedProps.invalid && /*#__PURE__*/React.createElement(WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
-  }), showWarning && /*#__PURE__*/React.createElement(WarningAltFilled, {
+  }), normalizedProps.warn && /*#__PURE__*/React.createElement(WarningAltFilled, {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), inputValue && /*#__PURE__*/React.createElement(ListBoxSelection, {
     clearSelection: () => {
@@ -784,12 +789,10 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       isHighlighted: highlightedIndex === index,
       title: title,
       disabled: disabled
-    }, modifiedItemProps), ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _extends({
-      key: itemProps.id
-    }, item)) : itemToString(item), isEqual(currentSelectedItem, item) && /*#__PURE__*/React.createElement(Checkmark, {
+    }, modifiedItemProps), itemToElement ? itemToElement(item) : itemToString(item), isEqual(currentSelectedItem, item) && /*#__PURE__*/React.createElement(Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
-  }) : null)), helperText && !invalid && !warn && !isFluid && /*#__PURE__*/React.createElement(Text, {
+  }) : null)), helperText && !normalizedProps.invalid && !normalizedProps.warn && !isFluid && /*#__PURE__*/React.createElement(Text, {
     as: "div",
     id: helperTextId,
     className: helperClasses
@@ -882,8 +885,7 @@ ComboBox.propTypes = {
    */
   invalidText: PropTypes.node,
   /**
-   * 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: PropTypes.func,
   /**

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

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

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useRef, useLayoutEffect } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ChevronDown } from '@carbon/icons-react';
@@ -18,6 +18,7 @@ import '../Menu/MenuItem.js';
 import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { flip, hide, size, useFloating, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { mergeRefs } from '../../tools/mergeRefs.js';
@@ -94,7 +95,7 @@ const ComboButton = /*#__PURE__*/React.forwardRef(function ComboButton({
     handleMousedown: handleTriggerMousedown,
     handleClose
   } = useAttachedMenu(containerRef);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const updatedFloatingStyles = {
       ...floatingStyles,
       visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'

package/es/components/ComposedModal/ComposedModal.js

@@ -6,9 +6,8 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useRef, useContext, useEffect, Children, cloneElement } from 'react';
+import React, { useRef, useContext, useEffect, cloneElement, Children } from 'react';
 import { useResizeObserver } from '../../internal/useResizeObserver.js';
-import { isElement } from 'react-is';
 import PropTypes from 'prop-types';
 import { Layer } from '../Layer/index.js';
 import { ModalHeader } from './ModalHeader.js';
@@ -259,29 +258,25 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
   const containerClass = cx(`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
 
   // Generate aria-label based on Modal Header label if one is not provided (L253)
+  //
+  // TODO: Confirm whether `ModalHeader` `label` should allow `ReactNode`. If
+  // so, define how to derive a string for `aria-label`.
   let generatedAriaLabel;
   const childrenWithProps = React.Children.toArray(children).map(child => {
-    switch (true) {
-      case isElement(child) && child.type === /*#__PURE__*/React.createElement(ModalHeader).type:
-        {
-          const el = child;
-          generatedAriaLabel = el.props.label;
-          return /*#__PURE__*/React.cloneElement(el, {
-            closeModal
-          });
-        }
-      case isElement(child) && child.type === /*#__PURE__*/React.createElement(ModalFooter).type:
-        {
-          const el = child;
-          return /*#__PURE__*/React.cloneElement(el, {
-            closeModal,
-            inputref: button,
-            danger
-          });
-        }
-      default:
-        return child;
+    if (isComponentElement(child, ModalHeader)) {
+      generatedAriaLabel = child.props.label;
+      return /*#__PURE__*/cloneElement(child, {
+        closeModal
+      });
+    }
+    if (isComponentElement(child, ModalFooter)) {
+      return /*#__PURE__*/cloneElement(child, {
+        closeModal,
+        inputref: button,
+        danger
+      });
     }
+    return child;
   });
 
   // Modals without a footer are considered passive and carry limitations as

package/es/components/ComposedModal/ModalHeader.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.
@@ -40,7 +40,7 @@ export interface ModalHeaderProps extends DivProps {
     /**
      * Specify an optional label to be displayed
      */
-    label?: ReactNode;
+    label?: string;
     /**
      * Specify an optional className to be applied to the modal header label
      */

package/es/components/ComposedModal/ModalHeader.js

@@ -94,7 +94,7 @@ ModalHeader.propTypes = {
   /**
    * Specify an optional label to be displayed
    */
-  label: PropTypes.node,
+  label: PropTypes.string,
   /**
    * Specify an optional className to be applied to the modal header label
    */

package/es/components/Copy/Copy.d.ts

@@ -50,7 +50,7 @@ declare namespace Copy {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/es/components/CopyButton/CopyButton.d.ts

@@ -51,7 +51,7 @@ declare namespace CopyButton {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/es/components/DataTable/DataTable.d.ts

@@ -51,6 +51,7 @@ export interface DataTableHeader {
     header: ReactNode;
     slug?: ReactElement;
     decorator?: ReactElement;
+    isSortable?: boolean;
 }
 export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     /**
@@ -435,6 +436,7 @@ export declare const DataTable: {
         headers: PropTypes.Validator<(PropTypes.InferProps<{
             key: PropTypes.Validator<string>;
             header: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+            isSortable: PropTypes.Requireable<boolean>;
         }> | null | undefined)[]>;
         /**
          * Specify whether the table should be able to be sorted by its headers

package/es/components/DataTable/DataTable.js

@@ -96,7 +96,7 @@ const DataTable = props => {
     render,
     translateWithId: t = defaultTranslateWithId,
     size,
-    isSortable: isSortableProp,
+    isSortable,
     useZebraStyles,
     useStaticWidth,
     stickyHeader,
@@ -135,7 +135,7 @@ const DataTable = props => {
   const getHeaderProps = ({
     header,
     onClick,
-    isSortable = isSortableProp,
+    isSortable: headerIsSortable,
     ...rest
   }) => {
     const {
@@ -151,7 +151,7 @@ const DataTable = props => {
       ...rest,
       key,
       sortDirection,
-      isSortable,
+      isSortable: headerIsSortable ?? header.isSortable ?? isSortable,
       isSortHeader: sortHeaderKey === key,
       slug,
       decorator,
@@ -310,7 +310,7 @@ const DataTable = props => {
     return {
       useZebraStyles,
       size: size ?? 'lg',
-      isSortable: isSortableProp,
+      isSortable,
       useStaticWidth,
       stickyHeader,
       overflowMenuOnHover: overflowMenuOnHover ?? false,
@@ -600,7 +600,8 @@ DataTable.propTypes = {
    */
   headers: PropTypes.arrayOf(PropTypes.shape({
     key: PropTypes.string.isRequired,
-    header: PropTypes.node.isRequired
+    header: PropTypes.node.isRequired,
+    isSortable: PropTypes.bool
   })).isRequired,
   /**
    * Specify whether the table should be able to be sorted by its headers

package/es/components/DataTable/Table.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/DataTable/Table.js

@@ -70,12 +70,18 @@ const Table = ({
     [`${prefix}--data-table--visible-overflow-menu`]: !overflowMenuOnHover
   });
   const toggleTableBodyAlignmentClass = useCallback((alignTop = false) => {
-    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-    alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-body`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-body`);
+    if (alignTop) {
+      tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-body`);
+    } else {
+      tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-body`);
+    }
   }, [prefix]);
   const toggleTableHeaderAlignmentClass = useCallback((alignTop = false) => {
-    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-    alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-header`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-header`);
+    if (alignTop) {
+      tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-header`);
+    } else {
+      tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-header`);
+    }
   }, [prefix]);
   const setTableAlignment = useCallback(() => {
     if (experimentalAutoAlign) {

package/es/components/DataTable/state/sorting.d.ts

@@ -43,7 +43,8 @@ export declare const getNextSortDirection: (prevHeader: string, currentHeader: s
  * @param state - Current table state.
  * @param key - Header key to sort by.
  */
-export declare const getNextSortState: <ColTypes extends any[]>(props: Props, state: State<ColTypes>, { key }: {
+export declare const getNextSortState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+props: Props, state: State<ColTypes>, { key }: {
     key: string;
 }) => Pick<State<ColTypes>, "sortHeaderKey" | "sortDirection" | "rowIds">;
 /**
@@ -54,5 +55,6 @@ export declare const getNextSortState: <ColTypes extends any[]>(props: Props, st
  * @param key - Header key to sort by.
  * @param sortDirection - Sort direction to apply.
  */
-export declare const getSortedState: <ColTypes extends any[]>({ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
+export declare const getSortedState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+{ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
 export {};

package/es/components/Dropdown/Dropdown.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022, 2025
+ * Copyright IBM Corp. 2022, 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.
@@ -78,10 +78,9 @@ export interface DropdownProps<ItemType> extends Omit<HTMLAttributes<HTMLDivElem
      */
     invalidText?: ReactNode;
     /**
-     * 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?: React.JSXElementConstructor<ItemType> | null;
+    itemToElement?: ((item: ItemType) => NonNullable<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

package/es/components/Dropdown/Dropdown.js

@@ -252,9 +252,6 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--list-box__wrapper--slug`]: slug,
     [`${prefix}--list-box__wrapper--decorator`]: decorator
   });
-
-  // needs to be Capitalized for react to render it correctly
-  const ItemToElement = itemToElement;
   const toggleButtonProps = getToggleButtonProps({
     'aria-label': ariaLabel || deprecatedAriaLabel
   });
@@ -270,10 +267,20 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   const [currTimer, setCurrTimer] = useState();
   const [isTyping, setIsTyping] = useState(false);
   const onKeyDownHandler = useCallback(evt => {
-    if (evt.code !== 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
+    const navigationKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
+
+    // If the key is not a navigation key, the user is typing
+    if (!navigationKeys.includes(evt.key)) {
       setIsTyping(true);
-    }
-    if (isTyping && evt.code === 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
+      // Reset the timer for typing timeout
+      if (currTimer) {
+        clearTimeout(currTimer);
+      }
+      setCurrTimer(setTimeout(() => {
+        setIsTyping(false);
+      }, 3000));
+    } else if (isTyping && evt.key === ' ') {
+      // If user is typing and presses space, reset the timer
       if (currTimer) {
         clearTimeout(currTimer);
       }
@@ -377,21 +384,18 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
   }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(ListBox.Menu, menuProps, isOpen && items.map((item, index) => {
-    const isObject = item !== null && typeof item === 'object';
     const itemProps = getItemProps({
       item,
       index
     });
-    const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
+    const title = itemToString(item);
     return /*#__PURE__*/React.createElement(ListBox.MenuItem, _extends({
       key: itemProps.id,
       isActive: selectedItem === item,
       isHighlighted: highlightedIndex === index,
       title: title,
       disabled: itemProps['aria-disabled']
-    }, itemProps), typeof item === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React.createElement(ItemToElement, _extends({
-      key: itemProps.id
-    }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React.createElement(Checkmark, {
+    }, itemProps), itemToElement ? itemToElement(item) : itemToString(item), selectedItem === item && /*#__PURE__*/React.createElement(Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
   }))), !inline && !isFluid && !normalizedProps.validation && helper, !inline && !isFluid && normalizedProps.validation);
@@ -471,8 +475,7 @@ Dropdown.propTypes = {
    */
   invalidText: PropTypes.node,
   /**
-   * 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: PropTypes.func,
   /**

package/es/components/FileUploader/FileUploaderItem.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/FileUploader/FileUploaderItem.js

@@ -8,13 +8,14 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useState, useLayoutEffect } from 'react';
+import React, { useRef, useState } from 'react';
 import Filename from './Filename.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { Text } from '../Text/Text.js';
 import '../Text/TextDirection.js';
 import '../Tooltip/DefinitionTooltip.js';
@@ -58,7 +59,7 @@ function FileUploaderItem({
     setIsEllipsisApplied(isActive);
     return isActive;
   };
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     isEllipsisActive(textRef.current);
   }, [prefix, name]);
   return /*#__PURE__*/React.createElement("span", _extends({

package/es/components/FluidComboBox/FluidComboBox.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2022, 2025
+ * Copyright IBM Corp. 2022, 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, { ComponentType, type ComponentProps } from 'react';
+import React, { type ComponentProps } from 'react';
 import ComboBox from '../ComboBox';
 import { ComboBoxProps } from '../ComboBox/ComboBox';
 type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
@@ -46,11 +46,6 @@ export interface FluidComboBoxProps<ItemType> extends ComboBoxProps<ItemType>, P
      * Specify if the `FluidComboBox` should render its menu items in condensed mode
      */
     isCondensed?: boolean;
-    /**
-     * Function to render items as custom components instead of strings.
-     * Defaults to null and is overridden by a getter
-     */
-    itemToElement?: ComponentType<ItemType> | 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

package/es/components/FluidComboBox/FluidComboBox.js

@@ -66,8 +66,7 @@ FluidComboBox.propTypes = {
    */
   isCondensed: PropTypes.bool,
   /**
-   * 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: PropTypes.func,
   /**