[select] fix: mark items arrays as readonly where appropriate (#5171)

palantir · Mar 17, 2022 · dc11929 · dc11929 · blueprint-bot · Mar 17, 2022
1 parent c1b1153
commit dc11929
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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