Accept ReadonlyArray<T> for items and more in Select

packages/docs-app/src/examples/select-examples/selectExample.tsx

@@ -195,7 +195,7 @@ const getGroup = (item: Film) => {
     return /[0-9]/.test(firstLetter) ? "0-9" : firstLetter;
 };
 
-const getGroupedItems = (filteredItems: Film[]) => {
+const getGroupedItems = (filteredItems: ReadonlyArray<Film>) => {
     return filteredItems.reduce<
         Array<{ group: string; index: number; items: Film[]; key: number }>
     >((acc, item, index) => {
@@ -212,7 +212,7 @@ const getGroupedItems = (filteredItems: Film[]) => {
     }, []);
 };
 
-const groupedItemListPredicate = (query: string, items: Film[]) => {
+const groupedItemListPredicate = (query: string, items: ReadonlyArray<Film>) => {
     return items
         .filter((item, index) => filterFilm(query, item, index))
         .sort((a, b) => getGroup(a).localeCompare(getGroup(b)));

packages/docs-theme/src/components/navigator.tsx

@@ -90,7 +90,7 @@ export class Navigator extends PureComponent<NavigatorProps> {
     }
 
     private filterMatches: ItemListPredicate<NavigationSection> = (query, items) =>
-        filter(items, query, {
+        filter([...items], query, {
             key: "route",
             maxInners: items.length / 5,
             maxResults: 10,

packages/select/src/common/itemListRenderer.ts

@@ -35,13 +35,13 @@ export interface ItemListRendererProps<T> {
      * map each item in this array through `renderItem`, with support for
      * optional `noResults` and `initialContent` states.
      */
-    filteredItems: T[];
+    filteredItems: ReadonlyArray<T>;
 
     /**
      * Array of all items in the list.
      * See `filteredItems` for a filtered array based on `query` and predicate props.
      */
-    items: T[];
+    items: ReadonlyArray<T>;
 
     /**
      * The current query string.

packages/select/src/common/listItemsProps.ts

@@ -44,7 +44,7 @@ export interface ListItemsProps<T> extends Props {
     activeItem?: T | CreateNewItem | null;
 
     /** Array of items in the list. */
-    items: T[];
+    items: ReadonlyArray<T>;
 
     /**
      * Specifies how to test if two items are equal. By default, simple strict
@@ -170,7 +170,7 @@ export interface ListItemsProps<T> extends Props {
      * created, either by pressing the `Enter` key or by clicking on the "Create
      * Item" option. It transforms a query string into one or many items type.
      */
-    createNewItemFromQuery?: (query: string) => T | T[];
+    createNewItemFromQuery?: (query: string) => T | ReadonlyArray<T>;
 
     /**
      * Custom renderer to transform the current query string into a selectable

packages/select/src/common/predicate.ts

@@ -18,7 +18,7 @@
  * A custom predicate for returning an entirely new `items` array based on the provided query.
  * See usage sites in `ListItemsProps`.
  */
-export type ItemListPredicate<T> = (query: string, items: T[]) => T[];
+export type ItemListPredicate<T> = (query: string, items: ReadonlyArray<T>) => T[];
 
 /**
  * A custom predicate for filtering items based on the provided query.

packages/select/src/components/multi-select/multiSelect.tsx

@@ -44,7 +44,7 @@ export interface MultiSelectProps<T> extends ListItemsProps<T>, SelectPopoverPro
      * Element which triggers the multiselect popover. Providing this prop will replace the default TagInput
      * target thats rendered and move the search functionality to within the Popover.
      */
-    customTarget?: (selectedItems: T[], isOpen: boolean) => React.ReactNode;
+    customTarget?: (selectedItems: ReadonlyArray<T>, isOpen: boolean) => React.ReactNode;
 
     /**
      * Whether the component is non-interactive.
@@ -104,7 +104,7 @@ export interface MultiSelectProps<T> extends ListItemsProps<T>, SelectPopoverPro
     placeholder?: string;
 
     /** Controlled selected values. */
-    selectedItems: T[];
+    selectedItems: ReadonlyArray<T>;
 
     /**
      * Props to pass to the [TagInput component](##core/components/tag-input).

packages/select/src/components/query-list/queryList.test.tsx

@@ -77,7 +77,9 @@ describe("<QueryList>", () => {
         });
 
         it("itemListPredicate filters entire list by query", () => {
-            const predicate = sinon.spy((query: string, films: Film[]) => films.filter(f => f.year === +query));
+            const predicate = sinon.spy((query: string, films: ReadonlyArray<Film>) =>
+                films.filter(f => f.year === +query),
+            );
             shallow(<QueryList<Film> {...testProps} itemListPredicate={predicate} query="1994" />);
 
             expect(predicate.callCount).toBe(1);

packages/select/src/components/query-list/queryList.tsx

@@ -148,10 +148,10 @@ export interface QueryListState<T> {
      * this element will be used to hide the "Create Item" option if its value
      * matches the current `query`.
      */
-    createNewItem: T | T[] | undefined;
+    createNewItem: T | ReadonlyArray<T> | undefined;
 
     /** The original `items` array filtered by `itemListPredicate` or `itemPredicate`. */
-    filteredItems: T[];
+    filteredItems: ReadonlyArray<T>;
 
     /** The current query string. */
     query: string;
@@ -619,7 +619,7 @@ export class QueryList<T> extends AbstractComponent<QueryListProps<T>, QueryList
      * @param createNewItem Checks if this item would match the current query. Cannot check this.state.createNewItem
      *  every time since state may not have been updated yet.
      */
-    private isCreateItemRendered(createNewItem?: T | T[]): boolean {
+    private isCreateItemRendered(createNewItem?: T | ReadonlyArray<T>): boolean {
         return (
             this.canCreateItems() &&
             this.state.query !== "" &&
@@ -638,7 +638,7 @@ export class QueryList<T> extends AbstractComponent<QueryListProps<T>, QueryList
         return this.props.createNewItemFromQuery != null && this.props.createNewItemRenderer != null;
     }
 
-    private wouldCreatedItemMatchSomeExistingItem(createNewItem?: T | T[]) {
+    private wouldCreatedItemMatchSomeExistingItem(createNewItem?: T | ReadonlyArray<T>) {
         // search only the filtered items, not the full items list, because we
         // only need to check items that match the current query.
         return this.state.filteredItems.some(item => {
@@ -688,7 +688,10 @@ function getMatchingItem<T>(query: string, { items, itemPredicate }: QueryListPr
     return undefined;
 }
 
-function getFilteredItems<T>(query: string, { items, itemPredicate, itemListPredicate }: QueryListProps<T>) {
+function getFilteredItems<T>(
+    query: string,
+    { items, itemPredicate, itemListPredicate }: QueryListProps<T>,
+): ReadonlyArray<T> {
     if (Utils.isFunction(itemListPredicate)) {
         // note that implementations can reorder the items here
         return itemListPredicate(query, items);
@@ -727,7 +730,7 @@ function isItemDisabled<T>(item: T | null, index: number, itemDisabled?: ListIte
  * @param startIndex which index to begin moving from
  */
 export function getFirstEnabledItem<T>(
-    items: T[],
+    items: ReadonlyArray<T>,
     itemDisabled?: keyof T | ((item: T, index: number) => boolean),
     direction = 1,
     startIndex = items.length - 1,