@carbon/react 1.81.0-rc.0 → 1.82.0-rc.0

package/lib/components/DataTable/TableCell.js

@@ -13,20 +13,23 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var PropTypes = require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-const TableCell = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
+const frFn = React.forwardRef;
+const TableCell = frFn((props, ref) => {
+  const {
     children,
     className,
     hasAILabelHeader,
     colSpan,
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix.usePrefix();
   const tableCellClassNames = cx__default["default"](className, {
     [`${prefix}--table-cell--column-slug`]: hasAILabelHeader
@@ -38,5 +41,27 @@ const TableCell = /*#__PURE__*/React__default["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__default["default"].node,
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * The width of the expanded row's internal cell
+   */
+  colSpan: PropTypes__default["default"].number,
+  /**
+   * Specify if the table cell is in an AI column
+   */
+  hasAILabelHeader: PropTypes__default["default"].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__default["default"].string
+};
 
 exports["default"] = TableCell;

package/lib/components/DataTable/TableToolbarAction.d.ts

@@ -1,11 +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 React from 'react';
-import { ForwardRefReturn } from '../../types/common';
 export interface TableToolbarActionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
     /**
      * Pass in the children that will be rendered inside the TableToolbarAction
@@ -16,6 +15,5 @@ export interface TableToolbarActionProps extends Omit<React.HTMLAttributes<HTMLD
      */
     onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
-export type TableToolbarActionComponent = ForwardRefReturn<HTMLDivElement, TableToolbarActionProps>;
-declare const TableToolbarAction: TableToolbarActionComponent;
+declare const TableToolbarAction: React.ForwardRefExoticComponent<TableToolbarActionProps & React.RefAttributes<HTMLDivElement>>;
 export default TableToolbarAction;

package/lib/components/DataTable/TableToolbarAction.js

@@ -19,11 +19,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TableToolbarAction = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
+const frFn = React.forwardRef;
+const TableToolbarAction = frFn((props, ref) => {
+  const {
     children,
     ...rest
-  } = _ref;
+  } = props;
   return /*#__PURE__*/React__default["default"].createElement(OverflowMenuItem["default"], _rollupPluginBabelHelpers["extends"]({
     ref: ref,
     itemText: children

package/lib/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/lib/components/DataTable/tools/cells.js

@@ -10,13 +10,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /**
- * 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/lib/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/lib/components/DataTable/tools/filter.js

@@ -10,18 +10,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /**
- * 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 {
@@ -31,15 +21,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/lib/components/DataTable/tools/sorting.d.ts

@@ -0,0 +1,42 @@
+/**
+ * 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 { type DataTableSortState } from '../state/sortStates';
+/**
+ * Compare two values to determine their order. If both values have the same
+ * type, the default sort algorithm will be used for those types. Otherwise, the
+ * values will be converted to strings for comparison.
+ */
+export declare const compare: (a: any, b: any, locale?: string) => number;
+interface Cell {
+    id: string;
+    value: any;
+}
+interface SortRowParams {
+    key: string;
+    sortDirection: DataTableSortState;
+    sortStates: Record<DataTableSortState, DataTableSortState>;
+    locale: string;
+    compare: typeof compare;
+    rowIds: string[];
+}
+interface SortRowsConfig {
+    rowIds: string[];
+    cellsById: Record<string, Cell>;
+    key: string;
+    sortDirection: DataTableSortState;
+    locale?: string;
+    sortRow?: (cellA: any, cellB: any, params: SortRowParams) => number;
+}
+/**
+ * Sorts table rows based on the provided column key and direction.
+ */
+export declare const sortRows: ({ rowIds, cellsById, sortDirection, key, locale, sortRow, }: SortRowsConfig) => string[];
+/**
+ * Sorts table rows based on the sort direction.
+ */
+export declare const defaultSortRow: (cellA: any, cellB: any, { sortDirection, sortStates, locale, }: Pick<SortRowParams, "locale" | "sortDirection" | "sortStates">) => number;
+export {};

package/lib/components/DataTable/tools/sorting.js

@@ -13,76 +13,43 @@ var cells = require('./cells.js');
 var sortStates = require('../state/sortStates.js');
 
 /**
- * Compare two primitives to determine which comes first. Initially, this method
- * will try and figure out if both entries are the same type. If so, it will
- * apply the default sort algorithm for those types. Otherwise, it defaults to a
- * string conversion.
- *
- * @param {number|string} a
- * @param {number|string} b
- * @param {string} locale
- * @returns {number}
+ * Compare two values to determine their order. If both values have the same
+ * type, the default sort algorithm will be used for those types. Otherwise, the
+ * values will be converted to strings for comparison.
  */
 const compare = function (a, b) {
   let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
   // prevent multiple null values in one column (sorting breaks)
-  a === null ? a = '' : null;
-  b === null ? b = '' : null;
+  if (a === null) a = '';
+  if (b === null) b = '';
   if (typeof a === 'number' && typeof b === 'number') {
     return a - b;
   }
   if (typeof a === 'string' && typeof b === 'string') {
     return compareStrings(a, b, locale);
   }
-
-  // if column has React elements, this should sort by the child string if there is one
-  if (typeof a === 'object' && typeof b === 'object') {
-    if (typeof a.props?.children === 'string' && typeof b.props?.children === 'string') {
-      return compareStrings(a.props.children, b.props.children, locale);
-    }
+  const aChild = a?.props?.children;
+  const bChild = b?.props?.children;
+  if (typeof aChild === 'string' && typeof bChild === 'string') {
+    return compareStrings(aChild, bChild, locale);
   }
-  return compareStrings('' + a, '' + b, locale);
+  return compareStrings(String(a), String(b), locale);
 };
 
 /**
- * Use the built-in `localeCompare` function available on strings to compare two
- * strings.
+ * Compares two strings using `localeCompare`.
  *
- * @param {string} a
- * @param {string} b
- * @param {string} locale
- * @returns {number}
+ * Note: Uses numeric comparison if strings are numeric.
  */
 const compareStrings = function (a, b) {
   let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
-  // Only set `numeric: true` if the string only contains numbers
-  // https://stackoverflow.com/a/175787
-  if (!isNaN(a) && !isNaN(parseFloat(a)) && !isNaN(b) && !isNaN(parseFloat(b))) {
-    return a.localeCompare(b, locale, {
-      numeric: true
-    });
-  }
-  return a.localeCompare(b, locale);
+  const isNumeric = !isNaN(parseFloat(a)) && !isNaN(parseFloat(b));
+  return a.localeCompare(b, locale, {
+    numeric: isNumeric
+  });
 };
-
 /**
- * Default implementation of how we sort rows internally. The idea behind this
- * implementation is to use the given list of row ids to look up the cells in
- * the row by the given key. We then use the value of these cells and pipe them
- * into our local `compareStrings` method, including the locale where
- * appropriate.
- *
- * @param {object} config
- * @param {Array[string]} config.rowIds array of all the row ids in the table
- * @param {object} config.cellsById object containing a mapping of cell id to
- * cell
- * @param {string} config.key the header key that we use to lookup the cell
- * @param {string} [config.locale] optional locale used in the comparison
- * function
- * @param {string} config.sortDirection the sort direction used to determine the
- * order the comparison is called in
- * @param {Function} config.sortRow
- * @returns {Array[string]} array of sorted rowIds
+ * Sorts table rows based on the provided column key and direction.
  */
 const sortRows = _ref => {
   let {
@@ -96,16 +63,20 @@ const sortRows = _ref => {
   return rowIds.slice().sort((a, b) => {
     const cellA = cellsById[cells.getCellId(a, key)];
     const cellB = cellsById[cells.getCellId(b, key)];
-    return sortRow(cellA && cellA.value, cellB && cellB.value, {
+    return sortRow(cellA?.value, cellB?.value, {
       key,
       sortDirection,
-      locale,
       sortStates: sortStates.sortStates,
+      locale,
       compare,
       rowIds: [a, b]
     });
   });
 };
+
+/**
+ * Sorts table rows based on the sort direction.
+ */
 const defaultSortRow = (cellA, cellB, _ref2) => {
   let {
     sortDirection,
@@ -119,6 +90,5 @@ const defaultSortRow = (cellA, cellB, _ref2) => {
 };
 
 exports.compare = compare;
-exports.compareStrings = compareStrings;
 exports.defaultSortRow = defaultSortRow;
 exports.sortRows = sortRows;

package/lib/components/DatePicker/DatePicker.d.ts

@@ -120,7 +120,7 @@ export interface DatePickerProps {
      * The value of the date value provided to flatpickr, could
      * be a date, a date number, a date string, an array of dates.
      */
-    value?: string | number | (string | number | object)[] | object | undefined;
+    value?: DateOption | DateOption[];
     /**
      * Specify whether the control is currently in warning state (Fluid only)
      */

package/lib/components/DatePicker/DatePicker.js

@@ -185,13 +185,14 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     }
   }, []);
   const lastStartValue = React.useRef('');
+  const calendarRef = React.useRef(null);
   const [calendarCloseEvent, setCalendarCloseEvent] = React.useState(null);
 
   // fix datepicker deleting the selectedDate when the calendar closes
   const handleCalendarClose = React.useCallback((selectedDates, dateStr, instance) => {
     if (lastStartValue.current && selectedDates[0] && !startInputField.current.value) {
       startInputField.current.value = lastStartValue.current;
-      calendarRef.current.setDate([startInputField.current.value, endInputField?.current?.value], true, calendarRef.current.config.dateFormat);
+      calendarRef.current?.setDate([startInputField.current.value, endInputField?.current?.value], true, calendarRef.current.config.dateFormat);
     }
     if (onClose) {
       onClose(selectedDates, dateStr, instance);
@@ -219,7 +220,6 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     }
   }, [calendarCloseEvent, handleCalendarClose]);
   const endInputField = React.useRef(null);
-  const calendarRef = React.useRef(null);
   const savedOnChange = useSavedCallback.useSavedCallback(onChange);
   const savedOnOpen = useSavedCallback.useSavedCallback(onOpen);
   const datePickerClasses = cx__default["default"](`${prefix}--date-picker`, {
@@ -336,7 +336,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     const {
       current: end
     } = endInputField;
-    const flatpickerconfig = {
+    const flatpickerConfig = {
       inline: inline ?? false,
       onClose: onCalendarClose,
       disableMobile: true,
@@ -382,7 +382,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       },
       onValueUpdate: onHook
     };
-    const calendar = flatpickr__default["default"](start, flatpickerconfig);
+    const calendar = flatpickr__default["default"](start, flatpickerConfig);
     calendarRef.current = calendar;
     function handleArrowDown(event) {
       if (match.match(event, keys.Escape)) {
@@ -395,10 +395,10 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
         const {
           calendarContainer,
           selectedDateElem: fpSelectedDateElem,
-          todayDateElem: fptodayDateElem
+          todayDateElem: fpTodayDateElem
         } = calendar;
         const selectedDateElem = calendarContainer.querySelector('.selected') && fpSelectedDateElem;
-        const todayDateElem = calendarContainer.querySelector('.today') && fptodayDateElem;
+        const todayDateElem = calendarContainer.querySelector('.today') && fpTodayDateElem;
         (selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer).focus();
       }
     }
@@ -473,7 +473,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       }
     };
     // 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()
@@ -484,44 +484,44 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     }
   }));
   React.useEffect(() => {
-    if (calendarRef?.current?.set) {
+    if (calendarRef.current?.set) {
       calendarRef.current.set({
         dateFormat
       });
     }
   }, [dateFormat]);
   React.useEffect(() => {
-    if (calendarRef?.current?.set) {
+    if (calendarRef.current?.set) {
       calendarRef.current.set('minDate', minDate);
     }
   }, [minDate]);
   React.useEffect(() => {
-    if (calendarRef?.current?.set) {
+    if (calendarRef.current?.set) {
       calendarRef.current.set('allowInput', allowInput);
     }
   }, [allowInput]);
   React.useEffect(() => {
-    if (calendarRef?.current?.set) {
+    if (calendarRef.current?.set) {
       calendarRef.current.set('maxDate', maxDate);
     }
   }, [maxDate]);
   React.useEffect(() => {
-    if (calendarRef?.current?.set && disable) {
+    if (calendarRef.current?.set && disable) {
       calendarRef.current.set('disable', disable);
     }
   }, [disable]);
   React.useEffect(() => {
-    if (calendarRef?.current?.set && enable) {
+    if (calendarRef.current?.set && enable) {
       calendarRef.current.set('enable', enable);
     }
   }, [enable]);
   React.useEffect(() => {
-    if (calendarRef?.current?.set && inline) {
+    if (calendarRef.current?.set && inline) {
       calendarRef.current.set('inline', inline);
     }
   }, [inline]);
   React.useEffect(() => {
-    //when value prop is set to empty, this clears the faltpicker's calendar instance and text input
+    //when value prop is set to empty, this clears the flatpicker's calendar instance and text input
     if (value === '') {
       calendarRef.current?.clear();
       if (startInputField.current) {
@@ -540,9 +540,9 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       }
     };
     const closeCalendar = event => {
-      calendarRef.current.close();
+      calendarRef.current?.close();
       // Remove focus from endDate calendar input
-      onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, {
+      onCalendarClose(calendarRef.current?.selectedDates, '', calendarRef.current, {
         type: 'clickOutside'
       });
     };
@@ -552,7 +552,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     };
   }, [calendarRef, startInputField, endInputField, onCalendarClose]);
   React.useEffect(() => {
-    if (calendarRef?.current?.set) {
+    if (calendarRef.current?.set) {
       if (value !== undefined) {
         calendarRef.current.setDate(value);
       }
@@ -566,7 +566,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
   React.useEffect(() => {
     if (!calendarRef.current || !startInputField.current) return;
     const handleKeyDown = event => {
-      if (match.match(event, keys.Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
+      if (match.match(event, keys.Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current?.isOpen) {
         calendarRef.current.close();
         onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
       }

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2014, 2024
+ * Copyright IBM Corp. 2014, 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/lib/components/Dropdown/Dropdown.Skeleton.d.ts

@@ -1,11 +1,11 @@
 /**
- * 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 React from 'react';
-import { ListBoxSize } from '../ListBox';
+import { type ListBoxSize } from '../ListBox';
 import { ReactAttr } from '../../types/common';
 export interface DropdownSkeletonProps extends ReactAttr<HTMLDivElement> {
     /**

package/lib/components/Dropdown/Dropdown.Skeleton.js

@@ -54,7 +54,7 @@ DropdownSkeleton.propTypes = {
   /**
    * Specify the size of the ListBox.
    */
-  size: ListBoxPropTypes.ListBoxSize
+  size: ListBoxPropTypes.ListBoxSizePropType
 };
 
 exports.DropdownSkeleton = DropdownSkeleton;

package/lib/components/Dropdown/Dropdown.d.ts

@@ -4,15 +4,15 @@
  * 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, { ReactNode } from 'react';
+import React, { ReactNode, Ref } from 'react';
 import { UseSelectProps } from 'downshift';
-import { type ListBoxMenuIconTranslationKey, ListBoxSize, ListBoxType } from '../ListBox';
+import { type ListBoxMenuIconTranslationKey, type ListBoxSize, type ListBoxType } from '../ListBox';
 import { TranslateWithId, ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange';
 export interface OnChangeData<ItemType> {
     selectedItem: ItemType | null;
 }
-export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes>, TranslateWithId<ListBoxMenuIconTranslationKey>, React.RefAttributes<HTMLDivElement> {
+export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes>, TranslateWithId<ListBoxMenuIconTranslationKey> {
     /**
      * Specify a label to be read by screen readers on the container node
      * 'aria-label' of the ListBox component.
@@ -147,9 +147,10 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
     warnText?: ReactNode;
 }
 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<any> | null;
+interface DropdownComponent {
+    <ItemType>(props: DropdownProps<ItemType> & {
+        ref?: Ref<HTMLButtonElement>;
+    }): React.ReactElement<any> | null;
 }
 declare const _default: DropdownComponent;
 export default _default;

package/lib/components/Dropdown/Dropdown.js

@@ -256,9 +256,9 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
 
   // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
-  const toggleButtonProps = React.useMemo(() => getToggleButtonProps({
+  const toggleButtonProps = getToggleButtonProps({
     'aria-label': ariaLabel || deprecatedAriaLabel
-  }), [getToggleButtonProps, ariaLabel, deprecatedAriaLabel, isOpen]);
+  });
   const helper = helperText && !isFluid ? /*#__PURE__*/React__default["default"].createElement("div", {
     id: helperId,
     className: helperClasses
@@ -330,7 +330,10 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     }
     return /*#__PURE__*/React__default["default"].isValidElement(element) ? element : null;
   }, [slug, decorator]);
-  const labelProps = ! /*#__PURE__*/React.isValidElement(titleText) ? getLabelProps() : null;
+  const allLabelProps = getLabelProps();
+  const labelProps = /*#__PURE__*/React.isValidElement(titleText) ? {
+    id: allLabelProps.id
+  } : allLabelProps;
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
@@ -377,9 +380,6 @@ const Dropdown = /*#__PURE__*/React__default["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["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
@@ -394,6 +394,10 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     }));
   }))), !inline && !invalid && !warn && helper);
 });
+
+// Workaround problems with forwardRef() and generics.  In the long term, should stop using forwardRef().
+// See https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref.
+
 Dropdown.displayName = 'Dropdown';
 Dropdown.propTypes = {
   /**
@@ -507,7 +511,7 @@ Dropdown.propTypes = {
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
-  size: ListBoxPropTypes.ListBoxSize,
+  size: ListBoxPropTypes.ListBoxSizePropType,
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
    */
@@ -524,7 +528,7 @@ Dropdown.propTypes = {
   /**
    * The dropdown type, `default` or `inline`
    */
-  type: ListBoxPropTypes.ListBoxType,
+  type: ListBoxPropTypes.ListBoxTypePropType,
   /**
    * Specify whether the control is currently in warning state
    */

package/lib/components/FileUploader/FileUploaderButton.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.