refactor: consolidate defaultItemToString implementations (#20402)

adamalston · web-flow · commit ae67e80afa89 · 2025-09-02T12:52:45.000Z
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -48,7 +48,7 @@ import { autoUpdate, flip, hide, useFloating } from '@floating-ui/react';
 import { TranslateWithId } from '../../types/common';
 import { useFeatureFlag } from '../FeatureFlags';
 import { AILabel } from '../AILabel';
-import { isComponentElement } from '../../internal';
+import { defaultItemToString, isComponentElement } from '../../internal';
 
 const {
   InputBlur,
@@ -63,24 +63,6 @@ const {
   FunctionSelectItem,
 } = useCombobox.stateChangeTypes;
 
-const defaultItemToString = <ItemType,>(item: ItemType | null) => {
-  if (typeof item === 'string') {
-    return item;
-  }
-  if (typeof item === 'number') {
-    return `${item}`;
-  }
-  if (
-    item !== null &&
-    typeof item === 'object' &&
-    'label' in item &&
-    typeof item['label'] === 'string'
-  ) {
-    return item['label'];
-  }
-  return '';
-};
-
 const defaultShouldFilterItem = () => true;
 
 const autocompleteCustomFilter = ({
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -57,31 +57,13 @@ import {
 } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags';
 import { AILabel } from '../AILabel';
-import { isComponentElement } from '../../internal';
+import { defaultItemToString, isComponentElement } from '../../internal';
 
 const { ItemMouseMove, MenuMouseLeave } =
   useSelect.stateChangeTypes as UseSelectInterface['stateChangeTypes'] & {
     ToggleButtonClick: UseSelectStateChangeTypes.ToggleButtonClick;
   };
 
-const defaultItemToString = <ItemType,>(item?: ItemType | null): string => {
-  if (typeof item === 'string') {
-    return item;
-  }
-  if (typeof item === 'number') {
-    return `${item}`;
-  }
-  if (
-    item !== null &&
-    typeof item === 'object' &&
-    'label' in item &&
-    typeof item['label'] === 'string'
-  ) {
-    return item['label'];
-  }
-  return '';
-};
-
 type ExcludedAttributes = 'id' | 'onChange';
 
 export interface OnChangeData<ItemType> {
diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx
@@ -40,6 +40,7 @@ import { Menu } from './Menu';
 import { MenuContext } from './MenuContext';
 import { useLayoutDirection } from '../LayoutDirection';
 import { Text } from '../Text';
+import { defaultItemToString } from '../../internal';
 
 export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
   /**
@@ -480,8 +481,6 @@ MenuItemGroup.propTypes = {
   label: PropTypes.string.isRequired,
 };
 
-const defaultItemToString = (item) => item.toString();
-
 export interface MenuItemRadioGroupProps<Item>
   extends Omit<ComponentProps<'ul'>, 'onChange'> {
   /**
@@ -495,7 +494,7 @@ export interface MenuItemRadioGroupProps<Item>
   defaultSelectedItem?: Item;
 
   /**
-   * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
+   * Converts an item into a string for display.
    */
   itemToString?: (item: Item) => string;
 
@@ -586,7 +585,7 @@ MenuItemRadioGroup.propTypes = {
   defaultSelectedItem: PropTypes.any,
 
   /**
-   * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
+   * Converts an item into a string for display.
    */
   itemToString: PropTypes.func,
 
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -50,7 +50,6 @@ import ListBox, {
 import Checkbox from '../Checkbox';
 import { ListBoxTrigger, ListBoxSelection } from '../ListBox/next';
 import { match, keys } from '../../internal/keyboard';
-import { defaultItemToString } from './tools/itemToString';
 import mergeRefs from '../../tools/mergeRefs';
 import { deprecate } from '../../prop-types/deprecate';
 import { useId } from '../../internal/useId';
@@ -67,7 +66,7 @@ import {
 } from '@floating-ui/react';
 import { TranslateWithId } from '../../types/common';
 import { AILabel } from '../AILabel';
-import { isComponentElement } from '../../internal';
+import { defaultItemToString, isComponentElement } from '../../internal';
 
 const {
   InputBlur,
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -58,7 +58,7 @@ import {
 } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags';
 import { AILabel } from '../AILabel';
-import { isComponentElement } from '../../internal';
+import { defaultItemToString, isComponentElement } from '../../internal';
 
 const {
   ItemClick,
@@ -78,24 +78,6 @@ const {
   ToggleButtonClick: UseSelectStateChangeTypes.ToggleButtonClick;
 };
 
-const defaultItemToString = <ItemType,>(item?: ItemType): string => {
-  if (typeof item === 'string') {
-    return item;
-  }
-  if (typeof item === 'number') {
-    return `${item}`;
-  }
-  if (
-    item !== null &&
-    typeof item === 'object' &&
-    'label' in item &&
-    typeof item['label'] === 'string'
-  ) {
-    return item['label'];
-  }
-  return '';
-};
-
 interface selectedItemType {
   text: string;
 }
diff --git a/packages/react/src/components/MultiSelect/tools/itemToString.js b/packages/react/src/components/MultiSelect/tools/itemToString.js
diff --git a/packages/react/src/internal/__tests__/defaultItemToString-test.js b/packages/react/src/internal/__tests__/defaultItemToString-test.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright IBM Corp. 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 { defaultItemToString } from '../defaultItemToString';
+
+describe('defaultItemToString', () => {
+  it('should return strings as is', () => {
+    expect(defaultItemToString('hello')).toBe('hello');
+    expect(defaultItemToString('')).toBe('');
+  });
+
+  it('should stringify numbers', () => {
+    expect(defaultItemToString(0)).toBe('0');
+    expect(defaultItemToString(42)).toBe('42');
+    expect(defaultItemToString(-7)).toBe('-7');
+  });
+
+  it('should handle nullish values', () => {
+    expect(defaultItemToString(null)).toBe('');
+    expect(defaultItemToString(undefined)).toBe('');
+  });
+
+  it('should return the label when the object has a string label', () => {
+    expect(defaultItemToString({ label: 'Option A' })).toBe('Option A');
+    expect(defaultItemToString({ label: '' })).toBe('');
+  });
+
+  it('should ignore non-string labels', () => {
+    expect(defaultItemToString({ label: 123 })).toBe('');
+    expect(defaultItemToString({ label: false })).toBe('');
+    expect(defaultItemToString({ label: null })).toBe('');
+    expect(defaultItemToString({ label: undefined })).toBe('');
+  });
+
+  it('should ignore objects without labels', () => {
+    expect(defaultItemToString({})).toBe('');
+    expect(defaultItemToString({ name: 'nope' })).toBe('');
+  });
+
+  it('should ignore arrays unless they have a string label property', () => {
+    const arr = [];
+
+    expect(defaultItemToString(arr)).toBe('');
+
+    arr.label = 'from array';
+
+    expect(defaultItemToString(arr)).toBe('from array');
+  });
+
+  it('should read inherited labels from prototype chain', () => {
+    const proto = { label: 'from proto' };
+    const obj = Object.create(proto);
+
+    expect(defaultItemToString(obj)).toBe('from proto');
+  });
+
+  it('should return empty strings for functions, bigints, and symbols', () => {
+    expect(defaultItemToString(() => {})).toBe('');
+    expect(defaultItemToString(10n)).toBe('');
+    expect(defaultItemToString(Symbol('x'))).toBe('');
+  });
+
+  it('should return empty string for boxed primitives (Number, String, Boolean)', () => {
+    expect(defaultItemToString(new Number(5))).toBe('');
+    expect(defaultItemToString(new String('hello'))).toBe('');
+    expect(defaultItemToString(new Boolean(true))).toBe('');
+  });
+
+  it('should handle objects with non-enumerable string label', () => {
+    const object = {};
+
+    Object.defineProperty(object, 'label', {
+      value: 'hidden label',
+      enumerable: false,
+    });
+
+    expect(defaultItemToString(object)).toBe('hidden label');
+  });
+});
diff --git a/packages/react/src/internal/defaultItemToString.ts b/packages/react/src/internal/defaultItemToString.ts
@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+
+export const defaultItemToString = <ItemType>(item: ItemType | null) => {
+  if (typeof item === 'string') return item;
+  if (typeof item === 'number') return `${item}`;
+  if (
+    item &&
+    typeof item === 'object' &&
+    'label' in item &&
+    typeof item.label === 'string'
+  ) {
+    return item.label;
+  }
+
+  return '';
+};
diff --git a/packages/react/src/internal/index.ts b/packages/react/src/internal/index.ts
@@ -5,4 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+export * from './defaultItemToString';
 export * from './utils';
