From dc119299e107492673ffc394747763ef614fb43e Mon Sep 17 00:00:00 2001
From: Mac Lockard <maclockard@gmail.com>
Date: Thu, 17 Mar 2022 11:46:05 -0700
Subject: [PATCH] [select] fix: mark items arrays as readonly where appropriate
 (#5171)

---
 packages/select/src/common/listItemsProps.ts            | 2 +-
 packages/select/src/common/predicate.ts                 | 2 +-
 packages/select/src/components/query-list/queryList.tsx | 9 +++++----
 packages/select/src/components/select/multiSelect.tsx   | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/select/src/common/listItemsProps.ts b/packages/select/src/common/listItemsProps.ts
index 68caf8a12f..32bc5d327d 100644
--- a/packages/select/src/common/listItemsProps.ts
+++ b/packages/select/src/common/listItemsProps.ts
@@ -44,7 +44,7 @@ export interface IListItemsProps<T> extends Props {
     activeItem?: T | ICreateNewItem | null;
 
     /** Array of items in the list. */
-    items: T[];
+    items: readonly T[];
 
     /**
      * Specifies how to test if two items are equal. By default, simple strict
diff --git a/packages/select/src/common/predicate.ts b/packages/select/src/common/predicate.ts
index 62624a45b8..2fb2243980 100644
--- a/packages/select/src/common/predicate.ts
+++ b/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 `IListItemsProps`.
  */
-export type ItemListPredicate<T> = (query: string, items: T[]) => T[];
+export type ItemListPredicate<T> = (query: string, items: T[]) => readonly T[];
 
 /**
  * A custom predicate for filtering items based on the provided query.
diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx
index d813930bcf..b14330e612 100644
--- a/packages/select/src/components/query-list/queryList.tsx
+++ b/packages/select/src/components/query-list/queryList.tsx
@@ -134,7 +134,7 @@ export interface IQueryListState<T> {
     createNewItem: T | undefined;
 
     /** The original `items` array filtered by `itemListPredicate` or `itemPredicate`. */
-    filteredItems: T[];
+    filteredItems: readonly T[];
 
     /** The current query string. */
     query: string;
@@ -218,7 +218,8 @@ export class QueryList<T> extends AbstractComponent2<QueryListProps<T>, IQueryLi
             handleQueryChange: this.handleInputQueryChange,
             itemList: itemListRenderer({
                 ...spreadableState,
-                items,
+                filteredItems: spreadableState.filteredItems.slice(),
+                items: items.slice(),
                 itemsParentRef: this.refHandlers.itemsParent,
                 renderCreateItem: this.renderCreateItemMenuItem,
                 renderItem: this.renderItem,
@@ -609,7 +610,7 @@ function getMatchingItem<T>(query: string, { items, itemPredicate }: QueryListPr
 function getFilteredItems<T>(query: string, { items, itemPredicate, itemListPredicate }: QueryListProps<T>) {
     if (Utils.isFunction(itemListPredicate)) {
         // note that implementations can reorder the items here
-        return itemListPredicate(query, items);
+        return itemListPredicate(query, items.slice());
     } else if (Utils.isFunction(itemPredicate)) {
         return items.filter((item, index) => itemPredicate(query, item, index));
     }
@@ -645,7 +646,7 @@ function isItemDisabled<T>(item: T | null, index: number, itemDisabled?: IListIt
  * @param startIndex which index to begin moving from
  */
 export function getFirstEnabledItem<T>(
-    items: T[],
+    items: readonly T[],
     itemDisabled?: keyof T | ((item: T, index: number) => boolean),
     direction = 1,
     startIndex = items.length - 1,
diff --git a/packages/select/src/components/select/multiSelect.tsx b/packages/select/src/components/select/multiSelect.tsx
index db20c42545..8857d3977b 100644
--- a/packages/select/src/components/select/multiSelect.tsx
+++ b/packages/select/src/components/select/multiSelect.tsx
@@ -83,7 +83,7 @@ export interface IMultiSelectProps<T> extends IListItemsProps<T> {
     popoverProps?: Partial<IPopoverProps> & object;
 
     /** Controlled selected values. */
-    selectedItems?: T[];
+    selectedItems?: readonly T[];
 
     /** Props to spread to `TagInput`. Use `query` and `onQueryChange` to control the input. */
     // eslint-disable-next-line @typescript-eslint/ban-types