[Bug]: Incorrect typings for Filterable Multi Select

[FBachini]

Package

@carbon/react

Browser

No response

Package version

v1.57.0

React version

No response

Description

Some optional props were marked as required in the ts migration for the FilterableMultiSelect component. This causes some problems, we are required to declare unused props and override functions we do not want to override. And not doing it, we have tsc build issues (and end up using ts-ignore to avoid it 😄).

In FilterableMultiSelect.tsx, filterItems should be optional (so we can use the default Sorter):

FilterableMultiSelect.tsx
/**
   * Default sorter is assigned if not provided.
   */
  filterItems(
    items: readonly Item[],
    extra: {
      inputValue: string | null;
      itemToString: NonNullable<
        UseMultipleSelectionProps<Item>['itemToString']
      >;
    }
  ): Item[];

Also, it extends SortingPropTypes (which also has wrong required props) when it should be extending MultiSelectSortingProps. This causes compareItems and sortItems to be required. Also, it requires ItemType to extend { disabled?: boolean }, which seems incorrect.

MultiSelectPropTypes.ts     * Wrong and probably not used anywhere else * 
export interface SortingPropTypes<Item extends ItemBase> {
  /**
   * Provide a compare function that is used
   * to determine the ordering of options.
   */
  compareItems(itemA: string, itemB: string, ctx: { locale: string }): number;

  /**
   * Provide a method that sorts all options in the control. Overriding this
   * prop means that you also have to handle the sort logic for selected versus
   * un-selected items. If you just want to control ordering, consider the
   * `compareItems` prop instead.
   */
  sortItems(
    items: Item[],
    state: {
      selectedItems: Item[];
      itemToString(item: Item): string;
      compareItems(
        itemA: string,
        itemB: string,
        ctx: { locale: string }
      ): number;
      locale: string;
    }
  ): Item[];
}

---

MultiSelect.tsx            * Correct *
interface MultiSelectSortingProps<ItemType> {
  /**
   * Provide a compare function that is used to determine the ordering of
   * options. See 'sortItems' for more control.
   */
  compareItems?(
    item1: ItemType,
    item2: ItemType,
    options: SharedOptions
  ): number;

  /**
   * Provide a method that sorts all options in the control. Overriding this
   * prop means that you also have to handle the sort logic for selected versus
   * un-selected items. If you just want to control ordering, consider the
   * `compareItems` prop instead.
   *
   * The return value should be a number whose sign indicates the relative order
   * of the two elements: negative if a is less than b, positive if a is greater
   * than b, and zero if they are equal.
   *
   * sortItems :
   *   (items: Array<Item>, {
   *     selectedItems: Array<Item>,
   *     itemToString: Item => string,
   *     compareItems: (itemA: string, itemB: string, {
   *       locale: string
   *     }) => number,
   *     locale: string,
   *   }) => Array<Item>
   */
  sortItems?(
    items: ReadonlyArray<ItemType>,
    options: SortItemsOptions<ItemType>
  ): ItemType[];
}

Reproduction/example

Tsx related, templates are jsx

Steps to reproduce

Declare FilterableMultiSelect in a tsx file and do not declare filterItems, compareItems or sortItems.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems