@carbon/react 1.80.1 → 1.81.0

package/es/components/Accordion/AccordionItem.d.ts

@@ -33,12 +33,12 @@ export interface AccordionItemProps {
      * removed in the next major release of Carbon. Use the
      * `renderToggle` prop instead.
      */
-    renderExpando?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement;
+    renderExpando?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement<any>;
     /**
      * The callback function to render the expand button.
      * Can be a React component class.
      */
-    renderToggle?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement;
+    renderToggle?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement<any>;
     /**
      * The accordion title.
      */

package/es/components/AspectRatio/AspectRatio.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import { PropsWithChildren, ReactHTML } from 'react';
+import { PropsWithChildren, HTMLElementType } from 'react';
 export interface AspectRatioProps {
     /**
      * Provide a custom component or string to be rendered as
@@ -17,7 +17,7 @@ export interface AspectRatioProps {
      * <AspectRatio as="article">My content</AspectRatio>
      * ```
      */
-    as?: keyof ReactHTML;
+    as?: HTMLElementType;
     /**
      * Specify a class name for the outermost node
      * of the component.

package/es/components/Button/Button.js

@@ -44,6 +44,9 @@ const Button = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     tooltipPosition = 'top',
     ...rest
   } = props;
+  if (ButtonImageElement && !children && !iconDescription) {
+    console.error('Button: renderIcon property specified without also providing an iconDescription property. ' + 'This may impact accessibility for screen reader users.');
+  }
   const handleClick = evt => {
     // Prevent clicks on the tooltip from triggering the button click event
     if (evt.target === tooltipRef.current) {

package/es/components/Button/ButtonBase.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 React from 'react';
+import React, { type JSX } from 'react';
 import { ButtonProps } from './Button';
-declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
+declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any, keyof JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 export default ButtonBase;

package/es/components/ChatButton/ChatButton.js

@@ -37,8 +37,11 @@ const ChatButton = /*#__PURE__*/React__default.forwardRef(function ChatButton(_r
     kind = 'ghost';
     size = 'sm';
   } else {
-    // Do not allow size larger than `lg`
-    size = allowedSizes.includes(size) ? size : 'lg';
+    // Check if size is valid and warn if not
+    if (size && !allowedSizes.includes(size)) {
+      console.error(`Invalid size "${size}" provided to ChatButton. Size must be one of: ${allowedSizes.join(', ')}. Defaulting to "lg".`);
+      size = 'lg';
+    }
   }
   return /*#__PURE__*/React__default.createElement(Button, _extends({
     disabled: disabled,
@@ -77,7 +80,6 @@ ChatButton.propTypes = {
   /**
    * A component used to render an icon.
    */
-  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Specify the size of the `ChatButton`, from the following list of sizes:

package/es/components/CodeSnippet/CodeSnippet.js

@@ -113,6 +113,8 @@ function CodeSnippet(_ref) {
     setHasRightOverflow(horizontalOverflow && codeScrollLeft + codeClientWidth !== codeScrollWidth);
   }, [type, getCodeRefDimensions]);
   useResizeObserver({
+    // Cast the ref until the hook supports React 19
+    // https://github.com/ZeeCoder/use-resize-observer/issues/108
     ref: getCodeRef(),
     onResize: () => {
       if (codeContentRef?.current && type === 'multi') {

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

@@ -198,7 +198,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
 }
 type ComboboxComponentProps<ItemType> = PropsWithRef<PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>>;
 export interface ComboBoxComponent {
-    <ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement | null;
+    <ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement<any> | null;
 }
 declare const _default: ComboBoxComponent;
 export default _default;

package/es/components/ComboBox/ComboBox.js

@@ -37,7 +37,9 @@ const {
   ItemMouseMove,
   InputKeyDownArrowUp,
   InputKeyDownArrowDown,
-  MenuMouseLeave
+  MenuMouseLeave,
+  ItemClick,
+  FunctionSelectItem
 } = useCombobox.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -208,6 +210,8 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       prevInputLengthRef.current = inputValue.length;
     }
   }, [typeahead, inputValue, items, itemToString, autocompleteCustomFilter]);
+  const isManualClearingRef = useRef(false);
+  const [isClearing, setIsClearing] = useState(false);
   const prefix = usePrefix();
   const {
     isFluid
@@ -217,6 +221,14 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   const [isFocused, setIsFocused] = useState(false);
   const prevInputValue = useRef(inputValue);
   const prevSelectedItemProp = useRef(selectedItemProp);
+  useEffect(() => {
+    isManualClearingRef.current = isClearing;
+
+    // Reset flag after render cycle
+    if (isClearing) {
+      setIsClearing(false);
+    }
+  }, [isClearing]);
 
   // fully controlled combobox: handle changes to selectedItemProp
   useEffect(() => {
@@ -302,31 +314,38 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         }
       case InputKeyDownEnter:
         if (!allowCustomValue) {
-          const highlightedIndex = indexToHighlight(inputValue);
-          const matchingItem = items[highlightedIndex];
-          if (matchingItem) {
-            // Prevent matching items that are marked as `disabled` from
-            // being selected.
-            if (matchingItem.disabled) {
-              return state;
+          if (state.highlightedIndex !== -1) {
+            const filteredList = filterItems(items, itemToString, inputValue);
+            const highlightedItem = filteredList[state.highlightedIndex];
+            if (highlightedItem && !highlightedItem.disabled) {
+              return {
+                ...changes,
+                selectedItem: highlightedItem,
+                inputValue: itemToString(highlightedItem)
+              };
+            }
+          } else {
+            const autoIndex = indexToHighlight(inputValue);
+            if (autoIndex !== -1) {
+              const matchingItem = items[autoIndex];
+              if (matchingItem && !matchingItem.disabled) {
+                return {
+                  ...changes,
+                  selectedItem: matchingItem,
+                  inputValue: itemToString(matchingItem)
+                };
+              }
             }
 
-            // Select the matching item.
-            return {
-              ...changes,
-              selectedItem: matchingItem,
-              inputValue: itemToString(matchingItem)
-            };
-          }
-
-          // If no matching item is found and there is an existing
-          // selection, clear the selection.
-          if (state.selectedItem !== null) {
-            return {
-              ...changes,
-              selectedItem: null,
-              inputValue
-            };
+            // If no matching item is found and there is an existing
+            // selection, clear the selection.
+            if (state.selectedItem !== null) {
+              return {
+                ...changes,
+                selectedItem: null,
+                inputValue
+              };
+            }
           }
         }
 
@@ -491,13 +510,10 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         type,
         selectedItem: newSelectedItem
       });
-      if (type === useCombobox.stateChangeTypes.ItemClick && !isEqual(selectedItemProp, newSelectedItem)) {
-        onChange({
-          selectedItem: newSelectedItem
-        });
+      if (isManualClearingRef.current) {
+        return;
       }
-      if ((type === useCombobox.stateChangeTypes.FunctionSelectItem || type === useCombobox.stateChangeTypes.InputKeyDownEnter) && !isEqual(selectedItemProp, newSelectedItem) // Only fire if there's an actual change
-      ) {
+      if ((type === ItemClick || type === FunctionSelectItem || type === InputKeyDownEnter) && typeof newSelectedItem !== 'undefined' && !isEqual(selectedItemProp, newSelectedItem)) {
         onChange({
           selectedItem: newSelectedItem
         });
@@ -690,7 +706,13 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), inputValue && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
     clearSelection: () => {
+      setIsClearing(true); // This updates the state which syncs to the ref
+      setInputValue('');
+      onChange({
+        selectedItem: null
+      });
       selectItem(null);
+      handleSelectionClear();
     },
     translateWithId: translateWithId,
     disabled: disabled || readOnly,

package/es/components/ComposedModal/ComposedModal.d.ts

@@ -56,7 +56,7 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Provide a ref to return focus to once the modal is closed.
      */
-    launcherButtonRef?: RefObject<HTMLButtonElement>;
+    launcherButtonRef?: RefObject<HTMLButtonElement | null>;
     /**
      * Specify an optional handler for closing modal.
      * Returning `false` here prevents closing modal.

package/es/components/ComposedModal/ComposedModal.js

@@ -15,7 +15,7 @@ import { ModalFooter } from './ModalFooter.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import cx from 'classnames';
-import toggleClass from '../../tools/toggleClass.js';
+import { toggleClass } from '../../tools/toggleClass.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
 import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -354,7 +354,6 @@ ComposedModal.propTypes = {
   /**
    * Provide a ref to return focus to once the modal is closed.
    */
-  // @ts-expect-error: Invalid derived type
   launcherButtonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any
   })]),

package/es/components/ComposedModal/ModalFooter.js

@@ -149,7 +149,6 @@ ModalFooter.propTypes = {
   /**
    * The `ref` callback for the primary button.
    */
-  // @ts-expect-error: Invalid derived type
   inputref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any
   })]),

package/es/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -73,7 +73,6 @@ ContainedListItem.propTypes = {
   /**
    * A component used to render an icon.
    */
-  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
 

package/es/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -16,7 +16,7 @@ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>,
     /**
      * Pass in Switch components to be rendered in the ContentSwitcher
      */
-    children?: ReactElement[];
+    children?: ReactElement<any>[];
     /**
      * Specify an optional className to be added to the container node
      */

package/es/components/ContextMenu/useContextMenu.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.
  */
-type TriggerType = Element | Document | Window | React.RefObject<Element>;
+type TriggerType = Element | Document | Window | React.RefObject<Element | null>;
 export interface ContextMenuProps {
     open: boolean;
     x: number;

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

@@ -1,5 +1,5 @@
 /**
- * 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.
@@ -69,8 +69,8 @@ export interface DataTableRow<ColTypes extends any[]> {
 export interface DataTableHeader {
     key: string;
     header: React.ReactNode;
-    slug?: React.ReactElement;
-    decorator?: React.ReactElement;
+    slug?: React.ReactElement<any>;
+    decorator?: React.ReactElement<any>;
 }
 export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     headers: Array<DataTableHeader>;
@@ -184,7 +184,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     radio: boolean | undefined;
 }
 export interface DataTableProps<RowType, ColTypes extends any[]> extends TranslateWithId<TranslationKey> {
-    children?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement;
+    children?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement<any>;
     experimentalAutoAlign?: boolean;
     filterRows?: (filterRowsArgs: {
         cellsById: Record<string, DataTableCell<ColTypes>>;
@@ -198,7 +198,7 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
     locale?: string;
     overflowMenuOnHover?: boolean;
     radio?: boolean;
-    render?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement;
+    render?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement<any>;
     rows: Array<Omit<DataTableRow<ColTypes>, 'cells'>>;
     size?: DataTableSize;
     sortRow?: (cellA: any, cellB: any, sortRowOptions: {

package/es/components/DataTable/DataTable.js

@@ -15,7 +15,7 @@ import { getCellId } from './tools/cells.js';
 import denormalize from './tools/denormalize.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { defaultFilterRows } from './tools/filter.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { setupGetInstanceId } from '../../tools/setupGetInstanceId.js';
 import { Table } from './Table.js';
 import TableActionList from './TableActionList.js';
 import TableBatchAction from './TableBatchAction.js';

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

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const TableActionList: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement;
+declare const TableActionList: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement<any>;
 export default TableActionList;

package/es/components/DataTable/TableCell.js

@@ -6,18 +6,20 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
+import PropTypes from 'prop-types';
 
-const TableCell = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  let {
+const frFn = forwardRef;
+const TableCell = frFn((props, ref) => {
+  const {
     children,
     className,
     hasAILabelHeader,
     colSpan,
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix();
   const tableCellClassNames = cx(className, {
     [`${prefix}--table-cell--column-slug`]: hasAILabelHeader
@@ -29,5 +31,27 @@ const TableCell = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, rest), children);
 });
 TableCell.displayName = 'TableCell';
+TableCell.propTypes = {
+  /**
+   * Pass in children that will be embedded in the table header label
+   */
+  children: PropTypes.node,
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+  /**
+   * The width of the expanded row's internal cell
+   */
+  colSpan: PropTypes.number,
+  /**
+   * Specify if the table cell is in an AI column
+   */
+  hasAILabelHeader: PropTypes.bool,
+  /**
+   * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+   */
+  headers: PropTypes.string
+};
 
 export { TableCell as default };

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

@@ -99,7 +99,7 @@ declare const TableExpandHeader: {
          * Specify whether this row is expanded or not. This helps coordinate data
          * attributes so that `TableExpandRow` and `TableExpandedRow` work together
          */
-        isExpanded: any;
+        isExpanded: React.Validator;
         /**
          * Hook for when a listener initiates a request to expand the given row
          */

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

@@ -6,5 +6,5 @@
  */
 import { ThHTMLAttributes } from 'react';
 export type TableHeadProps = ThHTMLAttributes<HTMLTableSectionElement>;
-declare const TableHead: (props: import("../../types/common").ReactAttr<"thead">) => React.ReactElement;
+declare const TableHead: (props: import("../../types/common").ReactAttr<"thead">) => React.ReactElement<any>;
 export default TableHead;

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

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const TableToolbarContent: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement;
+declare const TableToolbarContent: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement<any>;
 export default TableToolbarContent;

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

@@ -1,5 +1,5 @@
 /**
- * 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.

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

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+/**
+ * Generates a unique cell ID by combining the row ID and header.
+ *
+ * Generic helper used to consolidate all call sites for getting a cell ID into
+ * one method.
+ */
+export declare const getCellId: (rowId: string, header: string) => string;

package/es/components/DataTable/tools/cells.js

@@ -6,13 +6,10 @@
  */
 
 /**
- * Generic helper used to consolidate all call sites for getting a cell id into
- * one method. The strategy currently is that a "cellId" is just the combination
- * of the row id and the header key used to access this field in a row.
+ * Generates a unique cell ID by combining the row ID and header.
  *
- * @param {string} rowId
- * @param {string} header
- * @returns {string}
+ * Generic helper used to consolidate all call sites for getting a cell ID into
+ * one method.
  */
 const getCellId = (rowId, header) => `${rowId}:${header}`;
 

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

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+/**
+ * Filters row IDs based on whether any of the cell values in the row include
+ * the input value as a substring. Boolean cell values are ignored.
+ */
+export declare const defaultFilterRows: ({ rowIds, headers, cellsById, inputValue, getCellId, }: {
+    /** Table row IDs. */
+    rowIds: string[];
+    /** Table headers. */
+    headers: {
+        key: string;
+    }[];
+    /** Mapping of cell IDs to their corresponding cells. */
+    cellsById: Record<string, {
+        value: unknown;
+    }>;
+    /** Input value to search for. */
+    inputValue: string;
+    /** Function that returns a cell ID given a row ID and a header. */
+    getCellId: (rowId: string, header: string) => string;
+}) => string[];

package/es/components/DataTable/tools/filter.js

@@ -6,18 +6,8 @@
  */
 
 /**
- * Default implementation of how we filter rows internally. The idea behind this
- * implementation is to use the given list of row ids and headers to get the
- * individual cell values for a row. Then, we go through each cell value and see
- * if any of them includes the given inputValue.
- *
- * @param {object} config
- * @param {Array<string>} config.rowIds array of all the row ids in the table
- * @param {Array<object>} config.headers
- * @param {object} config.cellsById object containing a map of cell id to cell
- * @param {string} config.inputValue the current input value in the Table Search
- * @param {Function} config.getCellId
- * @returns {Array<string>} rowIds
+ * Filters row IDs based on whether any of the cell values in the row include
+ * the input value as a substring. Boolean cell values are ignored.
  */
 const defaultFilterRows = _ref => {
   let {
@@ -27,15 +17,16 @@ const defaultFilterRows = _ref => {
     inputValue,
     getCellId
   } = _ref;
+  const normalizedInput = inputValue.trim().toLowerCase();
+  if (!normalizedInput) return rowIds;
   return rowIds.filter(rowId => headers.some(_ref2 => {
     let {
       key
     } = _ref2;
-    const id = getCellId(rowId, key);
-    if (typeof cellsById[id].value === 'boolean') {
-      return false;
-    }
-    return ('' + cellsById[id].value).toLowerCase().includes(inputValue.toLowerCase());
+    const cellId = getCellId(rowId, key);
+    const cell = cellsById[cellId];
+    if (typeof cell.value === 'boolean') return false;
+    return String(cell.value).toLowerCase().includes(normalizedInput);
   }));
 };
 

package/es/components/DatePicker/DatePicker.js

@@ -461,7 +461,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput]);
+  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput, datePickerType]);
 
   // this hook allows consumers to access the flatpickr calendar
   // instance for cases where functions like open() or close()

package/es/components/DatePickerInput/DatePickerInput.d.ts

@@ -4,11 +4,11 @@
  * 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 { ReactElementLike, ReactNodeArray } from 'prop-types';
+import { ReactElementLike } from 'prop-types';
 import React, { ReactNode } from 'react';
 import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
-export type ReactNodeLike = ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined;
+export type ReactNodeLike = ReactElementLike | ReadonlyArray<ReactNode> | string | number | boolean | null | undefined;
 export type func = (...args: any[]) => any;
 export interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>, ExcludedAttributes> {
     /**

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

@@ -149,7 +149,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
 export type DropdownTranslationKey = ListBoxMenuIconTranslationKey;
 type DropdownComponentProps<ItemType> = React.PropsWithoutRef<React.PropsWithChildren<DropdownProps<ItemType>> & React.RefAttributes<HTMLButtonElement>>;
 export interface DropdownComponent {
-    <ItemType>(props: DropdownComponentProps<ItemType>): React.ReactElement | null;
+    <ItemType>(props: DropdownComponentProps<ItemType>): React.ReactElement<any> | null;
 }
 declare const _default: DropdownComponent;
 export default _default;

package/es/components/Dropdown/Dropdown.js

@@ -246,9 +246,9 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 
   // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
-  const toggleButtonProps = useMemo(() => getToggleButtonProps({
+  const toggleButtonProps = getToggleButtonProps({
     'aria-label': ariaLabel || deprecatedAriaLabel
-  }), [getToggleButtonProps, ariaLabel, deprecatedAriaLabel, isOpen]);
+  });
   const helper = helperText && !isFluid ? /*#__PURE__*/React__default.createElement("div", {
     id: helperId,
     className: helperClasses
@@ -320,7 +320,10 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
     return /*#__PURE__*/React__default.isValidElement(element) ? element : null;
   }, [slug, decorator]);
-  const labelProps = ! /*#__PURE__*/isValidElement(titleText) ? getLabelProps() : null;
+  const allLabelProps = getLabelProps();
+  const labelProps = /*#__PURE__*/isValidElement(titleText) ? {
+    id: allLabelProps.id
+  } : allLabelProps;
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default.createElement("label", _extends({
@@ -367,9 +370,6 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       item,
       index
     });
-    if (item !== null && typeof item === 'object' && Object.prototype.hasOwnProperty.call(item, 'id')) {
-      itemProps.id = item['id'];
-    }
     const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
     return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
       key: itemProps.id,

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, type JSX } from 'react';
 export interface FeatureFlagsProps {
     children?: ReactNode;
     flags?: Record<string, boolean>;

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

@@ -79,5 +79,10 @@ export interface FileUploaderHandle {
      */
     clearFiles: () => void;
 }
-declare const FileUploader: React.ForwardRefExoticComponent<FileUploaderProps & React.RefAttributes<FileUploaderHandle>>;
+declare const FileUploader: {
+    <ItemType>(props: FileUploaderProps): React.ReactElement<any>;
+    propTypes?: any;
+    contextTypes?: any;
+    defaultProps?: any;
+};
 export default FileUploader;