@carbon/react 1.81.0 → 1.82.0

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();
       }
     }
@@ -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

@@ -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.

package/lib/components/FileUploader/FileUploaderButton.js

@@ -49,7 +49,7 @@ function FileUploaderButton(_ref) {
   const [prevOwnerLabelText, setPrevOwnerLabelText] = React.useState(ownerLabelText);
   const {
     current: inputId
-  } = React.useRef(id || uniqueId["default"]());
+  } = React.useRef(id || uniqueId.uniqueId());
   const inputNode = React.useRef(null);
   const classes = cx__default["default"](`${prefix}--btn`, className, {
     [`${prefix}--btn--${buttonKind}`]: buttonKind,

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -47,7 +47,7 @@ function FileUploaderDropContainer(_ref) {
   const inputRef = React.useRef(null);
   const {
     current: uid
-  } = React.useRef(id || uniqueId["default"]());
+  } = React.useRef(id || uniqueId.uniqueId());
   const [isActive, setActive] = React.useState(false);
   const dropareaClasses = cx__default["default"](`${prefix}--file__drop-container`, `${prefix}--file-browse-btn`, {
     [`${prefix}--file__drop-container--drag-over`]: isActive,

package/lib/components/FileUploader/FileUploaderItem.js

@@ -49,7 +49,7 @@ function FileUploaderItem(_ref) {
   const prefix = usePrefix.usePrefix();
   const {
     current: id
-  } = React.useRef(uuid || uniqueId["default"]());
+  } = React.useRef(uuid || uniqueId.uniqueId());
   const classes = cx__default["default"](`${prefix}--file__selected-file`, className, {
     [`${prefix}--file__selected-file--invalid`]: invalid,
     [`${prefix}--file__selected-file--md`]: size === 'md',

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

@@ -20,6 +20,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 var ButtonBase = require('../Button/ButtonBase.js');
 var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
 var index = require('../BadgeIndicator/index.js');
+var mapPopoverAlign = require('../../tools/mapPopoverAlign.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,19 +29,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 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["default"].forwardRef(function IconButton(_ref, ref) {
   let {
     align,
@@ -120,11 +108,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.mapPopoverAlign),
   /**
    * **Experimental**: Will attempt to automatically align the tooltip
    */

package/lib/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/lib/components/ListBox/ListBox.js

@@ -14,10 +14,11 @@ var cx = require('classnames');
 var React = require('react');
 var PropTypes = require('prop-types');
 var deprecate = require('../../prop-types/deprecate.js');
-var ListBoxPropTypes = require('./ListBoxPropTypes.js');
+require('./index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
+var ListBoxPropTypes = require('./ListBoxPropTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -38,8 +39,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["default"].forwardRef(function ListBox(_ref, ref) {
-  let {
+const ListBox = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
     children,
     className: containerClassName,
     disabled = false,
@@ -54,7 +55,7 @@ const ListBox = /*#__PURE__*/React__default["default"].forwardRef(function ListB
     light,
     isOpen,
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix.usePrefix();
   const {
     isFluid
@@ -127,12 +128,12 @@ ListBox.propTypes = {
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
-  size: ListBoxPropTypes.ListBoxSize,
+  size: ListBoxPropTypes.ListBoxSizePropType,
   /**
    * Specify the "type" of the ListBox. Currently supports either `default` or
    * `inline` as an option.
    */
-  type: ListBoxPropTypes.ListBoxType,
+  type: ListBoxPropTypes.ListBoxTypePropType,
   /**
    * Specify whether the control is currently in warning state
    */

package/lib/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/lib/components/ListBox/ListBoxMenu.js

@@ -20,12 +20,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
+const frFn = React.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["default"].forwardRef(function ListBoxMenu(_ref, ref) {
+const ListBoxMenu = frFn((_ref, ref) => {
   let {
     children,
     id,

package/lib/components/ListBox/ListBoxMenuItem.d.ts

@@ -4,8 +4,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ForwardedRef, ReactNode, type Ref } from 'react';
-import { ForwardRefReturn, ReactAttr } from '../../types/common';
+import React, { ReactNode } from 'react';
+import { ReactAttr } from '../../types/common';
 export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     /**
      * Specify any children nodes that should be rendered inside of the ListBox
@@ -29,9 +29,10 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
      */
     title?: string;
 }
-export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
-    menuItemOptionRef?: Ref<HTMLDivElement>;
-}) | null;
-export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;
-declare const _default: ListBoxMenuItemComponent;
-export default _default;
+/**
+ * `ListBoxMenuItem` is a helper component for managing the container class
+ * name, alongside any classes for any corresponding states, for a generic list
+ * box menu item.
+ */
+declare const ListBoxMenuItem: React.ForwardRefExoticComponent<ListBoxMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+export default ListBoxMenuItem;