@carbon/react 1.81.0 → 1.82.0-rc.0

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

@@ -9,76 +9,43 @@ import { getCellId } from './cells.js';
 import { sortStates } from '../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 {
@@ -92,16 +59,20 @@ const sortRows = _ref => {
   return rowIds.slice().sort((a, b) => {
     const cellA = cellsById[getCellId(a, key)];
     const cellB = cellsById[getCellId(b, key)];
-    return sortRow(cellA && cellA.value, cellB && cellB.value, {
+    return sortRow(cellA?.value, cellB?.value, {
       key,
       sortDirection,
-      locale,
       sortStates,
+      locale,
       compare,
       rowIds: [a, b]
     });
   });
 };
+
+/**
+ * Sorts table rows based on the sort direction.
+ */
 const defaultSortRow = (cellA, cellB, _ref2) => {
   let {
     sortDirection,
@@ -114,4 +85,4 @@ const defaultSortRow = (cellA, cellB, _ref2) => {
   return compare(cellB, cellA, locale);
 };
 
-export { compare, compareStrings, defaultSortRow, sortRows };
+export { compare, defaultSortRow, sortRows };

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

@@ -173,13 +173,14 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     }
   }, []);
   const lastStartValue = useRef('');
+  const calendarRef = useRef(null);
   const [calendarCloseEvent, setCalendarCloseEvent] = useState(null);
 
   // fix datepicker deleting the selectedDate when the calendar closes
   const handleCalendarClose = 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);
@@ -207,7 +208,6 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     }
   }, [calendarCloseEvent, handleCalendarClose]);
   const endInputField = useRef(null);
-  const calendarRef = useRef(null);
   const savedOnChange = useSavedCallback(onChange);
   const savedOnOpen = useSavedCallback(onOpen);
   const datePickerClasses = cx(`${prefix}--date-picker`, {
@@ -324,7 +324,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     const {
       current: end
     } = endInputField;
-    const flatpickerconfig = {
+    const flatpickerConfig = {
       inline: inline ?? false,
       onClose: onCalendarClose,
       disableMobile: true,
@@ -370,7 +370,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       },
       onValueUpdate: onHook
     };
-    const calendar = flatpickr(start, flatpickerconfig);
+    const calendar = flatpickr(start, flatpickerConfig);
     calendarRef.current = calendar;
     function handleArrowDown(event) {
       if (match(event, Escape)) {
@@ -383,10 +383,10 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
         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();
       }
     }
@@ -472,44 +472,44 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     }
   }));
   useEffect(() => {
-    if (calendarRef?.current?.set) {
+    if (calendarRef.current?.set) {
       calendarRef.current.set({
         dateFormat
       });
     }
   }, [dateFormat]);
   useEffect(() => {
-    if (calendarRef?.current?.set) {
+    if (calendarRef.current?.set) {
       calendarRef.current.set('minDate', minDate);
     }
   }, [minDate]);
   useEffect(() => {
-    if (calendarRef?.current?.set) {
+    if (calendarRef.current?.set) {
       calendarRef.current.set('allowInput', allowInput);
     }
   }, [allowInput]);
   useEffect(() => {
-    if (calendarRef?.current?.set) {
+    if (calendarRef.current?.set) {
       calendarRef.current.set('maxDate', maxDate);
     }
   }, [maxDate]);
   useEffect(() => {
-    if (calendarRef?.current?.set && disable) {
+    if (calendarRef.current?.set && disable) {
       calendarRef.current.set('disable', disable);
     }
   }, [disable]);
   useEffect(() => {
-    if (calendarRef?.current?.set && enable) {
+    if (calendarRef.current?.set && enable) {
       calendarRef.current.set('enable', enable);
     }
   }, [enable]);
   useEffect(() => {
-    if (calendarRef?.current?.set && inline) {
+    if (calendarRef.current?.set && inline) {
       calendarRef.current.set('inline', inline);
     }
   }, [inline]);
   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) {
@@ -528,9 +528,9 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       }
     };
     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'
       });
     };
@@ -540,7 +540,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     };
   }, [calendarRef, startInputField, endInputField, onCalendarClose]);
   useEffect(() => {
-    if (calendarRef?.current?.set) {
+    if (calendarRef.current?.set) {
       if (value !== undefined) {
         calendarRef.current.setDate(value);
       }
@@ -554,7 +554,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
   useEffect(() => {
     if (!calendarRef.current || !startInputField.current) return;
     const handleKeyDown = event => {
-      if (match(event, Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
+      if (match(event, Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current?.isOpen) {
         calendarRef.current.close();
         onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
       }

package/es/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/es/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/es/components/Dropdown/Dropdown.Skeleton.js

@@ -11,7 +11,7 @@ import React__default from 'react';
 import cx from 'classnames';
 import '../ListBox/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
+import { ListBoxSizePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const DropdownSkeleton = _ref => {
   let {
@@ -44,7 +44,7 @@ DropdownSkeleton.propTypes = {
   /**
    * Specify the size of the ListBox.
    */
-  size: ListBoxSize
+  size: ListBoxSizePropType
 };
 
 export { DropdownSkeleton, DropdownSkeleton as default };

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

@@ -20,7 +20,7 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { useId } from '../../internal/useId.js';
 import { useFloating, size, flip, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
-import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
+import { ListBoxSizePropType, ListBoxTypePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
   ItemMouseMove,
@@ -384,6 +384,10 @@ const Dropdown = /*#__PURE__*/React__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 = {
   /**
@@ -497,7 +501,7 @@ Dropdown.propTypes = {
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
-  size: ListBoxSize,
+  size: ListBoxSizePropType,
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
    */
@@ -514,7 +518,7 @@ Dropdown.propTypes = {
   /**
    * The dropdown type, `default` or `inline`
    */
-  type: ListBoxType,
+  type: ListBoxTypePropType,
   /**
    * Specify whether the control is currently in warning state
    */

package/es/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.

package/es/components/FileUploader/FileUploaderButton.js

@@ -12,7 +12,7 @@ import React__default, { useState, useRef } from 'react';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { ButtonKinds } from '../../prop-types/types.js';
-import uniqueId from '../../tools/uniqueId.js';
+import { uniqueId } from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { noopFn } from '../../internal/noopFn.js';

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
-import uniqueId from '../../tools/uniqueId.js';
+import { uniqueId } from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';

package/es/components/FileUploader/FileUploaderItem.js

@@ -12,7 +12,7 @@ import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import Filename from './Filename.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
-import uniqueId from '../../tools/uniqueId.js';
+import { uniqueId } from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';

package/es/components/FluidDropdown/FluidDropdown.d.ts

@@ -97,5 +97,5 @@ export interface FluidDropdownProps<ItemType> extends DropdownProps<ItemType> {
      */
     warnText?: React.ReactNode;
 }
-declare const FluidDropdown: React.ForwardRefExoticComponent<Omit<FluidDropdownProps<unknown>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const FluidDropdown: React.ForwardRefExoticComponent<FluidDropdownProps<unknown> & React.RefAttributes<HTMLButtonElement>>;
 export default FluidDropdown;

package/es/components/FluidSearch/FluidSearch.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 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 React, { type ChangeEvent } from 'react';
 export interface FluidSearchProps {
     /**
      * Specify an optional value for the `autocomplete` property on the underlying
@@ -38,10 +38,7 @@ export interface FluidSearchProps {
     /**
      * Optional callback called when the search value changes.
      */
-    onChange?(e: {
-        target: HTMLInputElement;
-        type: 'change';
-    }): void;
+    onChange?(event: ChangeEvent<HTMLInputElement>): void;
     /**
      * Optional callback called when the search value is cleared.
      */

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

@@ -16,21 +16,9 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import ButtonBase from '../Button/ButtonBase.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 import { BadgeIndicator } from '../BadgeIndicator/index.js';
+import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 
 const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
-const propMappingFunction = deprecatedValue => {
-  const mapping = {
-    'top-left': 'top-start',
-    'top-right': 'top-end',
-    'bottom-left': 'bottom-start',
-    'bottom-right': 'bottom-end',
-    'left-bottom': 'left-end',
-    'left-top': 'left-start',
-    'right-bottom': 'right-end',
-    'right-top': 'right-start'
-  };
-  return mapping[deprecatedValue];
-};
 const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_ref, ref) {
   let {
     align,
@@ -110,11 +98,7 @@ IconButton.propTypes = {
   // deprecated use right-start instead
 
   // new values to match floating-ui
-  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
-  //allowed prop values
-  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
-  //optional mapper function
-  propMappingFunction),
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign),
   /**
    * **Experimental**: Will attempt to automatically align the tooltip
    */

package/es/components/ListBox/ListBox.d.ts

@@ -1,12 +1,12 @@
 /**
- * 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 { ListBoxType, ListBoxSize } from './ListBoxPropTypes';
-import { ForwardRefReturn, ReactAttr } from '../../types/common';
+import { type ListBoxSize, type ListBoxType } from '.';
+import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'onKeyDown' | 'onKeyPress' | 'ref';
 export interface ListBoxProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
     /**
@@ -59,10 +59,9 @@ export interface ListBoxProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAt
      */
     warnTextId?: string;
 }
-export type ListBoxComponent = ForwardRefReturn<HTMLDivElement, ListBoxProps>;
 /**
  * `ListBox` is a generic container component that handles creating the
  * container class name in response to certain props.
  */
-declare const ListBox: ListBoxComponent;
+declare const ListBox: React.ForwardRefExoticComponent<ListBoxProps & React.RefAttributes<HTMLDivElement>>;
 export default ListBox;

package/es/components/ListBox/ListBox.js

@@ -7,13 +7,14 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
-import React__default, { useContext } from 'react';
+import React__default, { forwardRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 import deprecate from '../../prop-types/deprecate.js';
-import { ListBoxSize, ListBoxType } from './ListBoxPropTypes.js';
+import './index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import { ListBoxSizePropType, ListBoxTypePropType } from './ListBoxPropTypes.js';
 
 const handleOnKeyDown = event => {
   if (event.keyCode === 27) {
@@ -28,8 +29,8 @@ const handleClick = event => {
  * `ListBox` is a generic container component that handles creating the
  * container class name in response to certain props.
  */
-const ListBox = /*#__PURE__*/React__default.forwardRef(function ListBox(_ref, ref) {
-  let {
+const ListBox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
     children,
     className: containerClassName,
     disabled = false,
@@ -44,7 +45,7 @@ const ListBox = /*#__PURE__*/React__default.forwardRef(function ListBox(_ref, re
     light,
     isOpen,
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix();
   const {
     isFluid
@@ -117,12 +118,12 @@ ListBox.propTypes = {
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
-  size: ListBoxSize,
+  size: ListBoxSizePropType,
   /**
    * Specify the "type" of the ListBox. Currently supports either `default` or
    * `inline` as an option.
    */
-  type: ListBoxType,
+  type: ListBoxTypePropType,
   /**
    * Specify whether the control is currently in warning state
    */

package/es/components/ListBox/ListBoxMenu.d.ts

@@ -1,10 +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 { ForwardRefReturn, ReactAttr } from '../../types/common';
+import React from 'react';
+import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id';
 export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLUListElement>, ExcludedAttributes> {
     children?: any;
@@ -13,11 +14,10 @@ export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLUListElement>, Excl
      */
     id: string;
 }
-export type ListBoxMenuComponent = ForwardRefReturn<HTMLUListElement, ListBoxMenuProps>;
 /**
  * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
  * class into a single component. It is also being used to validate given
  * `children` components.
  */
-declare const ListBoxMenu: ListBoxMenuComponent;
+declare const ListBoxMenu: React.ForwardRefExoticComponent<ListBoxMenuProps & React.RefAttributes<HTMLUListElement>>;
 export default ListBoxMenu;

package/es/components/ListBox/ListBoxMenu.js

@@ -6,17 +6,19 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import PropTypes from 'prop-types';
 import ListBoxMenuItem from './ListBoxMenuItem.js';
 
+const frFn = forwardRef;
+
 /**
  * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
  * class into a single component. It is also being used to validate given
  * `children` components.
  */
-const ListBoxMenu = /*#__PURE__*/React__default.forwardRef(function ListBoxMenu(_ref, ref) {
+const ListBoxMenu = frFn((_ref, ref) => {
   let {
     children,
     id,