From 8f5925a2d76c3170a2c141a8e8dcaaf5ae1fc358 Mon Sep 17 00:00:00 2001
From: Gregory Douglas <2968519+ggdouglas@users.noreply.github.com>
Date: Mon, 14 Oct 2024 16:07:38 -0400
Subject: [PATCH 1/4] Use generic for specifying select item mutability

---
 .../select/src/common/itemListRenderer.ts     | 14 +++--
 packages/select/src/common/listItemsProps.ts  | 12 ++--
 packages/select/src/common/predicate.ts       |  2 +-
 .../components/multi-select/multiSelect.tsx   | 29 +++++-----
 .../select/src/components/omnibar/omnibar.tsx |  8 +--
 .../src/components/query-list/queryList.tsx   | 55 ++++++++++++-------
 .../select/src/components/select/select.tsx   | 16 +++---
 .../select/src/components/suggest/suggest.tsx | 21 ++++---
 8 files changed, 90 insertions(+), 67 deletions(-)

diff --git a/packages/select/src/common/itemListRenderer.ts b/packages/select/src/common/itemListRenderer.ts
index 180f762fad..5368ad2511 100644
--- a/packages/select/src/common/itemListRenderer.ts
+++ b/packages/select/src/common/itemListRenderer.ts
@@ -20,7 +20,7 @@ import type { CreateNewItem } from "./listItemsUtils";
  * An object describing how to render the list of items.
  * An `itemListRenderer` receives this object as its sole argument.
  */
-export interface ItemListRendererProps<T> {
+export interface ItemListRendererProps<T, A extends readonly T[] = T[]> {
     /**
      * The currently focused item (for keyboard interactions), or `null` to
      * indicate that no item is active.
@@ -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: A;
 
     /**
      * Array of all items in the list.
      * See `filteredItems` for a filtered array based on `query` and predicate props.
      */
-    items: T[];
+    items: A;
 
     /**
      * The current query string.
@@ -75,15 +75,17 @@ export interface ItemListRendererProps<T> {
 }
 
 /** Type alias for a function that renders the list of items. */
-export type ItemListRenderer<T> = (itemListProps: ItemListRendererProps<T>) => React.JSX.Element | null;
+export type ItemListRenderer<T, A extends readonly T[] = T[]> = (
+    itemListProps: ItemListRendererProps<T, A>,
+) => React.JSX.Element | null;
 
 /**
  * `ItemListRenderer` helper method for rendering each item in `filteredItems`,
  * with optional support for `noResults` (when filtered items is empty)
  * and `initialContent` (when query is empty).
  */
-export function renderFilteredItems(
-    props: ItemListRendererProps<any>,
+export function renderFilteredItems<T, A extends readonly T[] = T[]>(
+    props: ItemListRendererProps<T, A>,
     noResults?: React.ReactNode,
     initialContent?: React.ReactNode | null,
 ): React.ReactNode {
diff --git a/packages/select/src/common/listItemsProps.ts b/packages/select/src/common/listItemsProps.ts
index 2beb4431b3..23eb60de40 100644
--- a/packages/select/src/common/listItemsProps.ts
+++ b/packages/select/src/common/listItemsProps.ts
@@ -34,7 +34,7 @@ export type ItemsEqualComparator<T> = (itemA: T, itemB: T) => boolean;
 export type ItemsEqualProp<T> = ItemsEqualComparator<T> | keyof T;
 
 /** Reusable generic props for a component that operates on a filterable, selectable list of `items`. */
-export interface ListItemsProps<T> extends Props {
+export interface ListItemsProps<T, A extends readonly T[] = T[]> extends Props {
     /**
      * The currently focused item for keyboard interactions, or `null` to
      * indicate that no item is active. If omitted or `undefined`, this prop will be
@@ -44,7 +44,7 @@ export interface ListItemsProps<T> extends Props {
     activeItem?: T | CreateNewItem | null;
 
     /** Array of items in the list. */
-    items: T[];
+    items: A;
 
     /**
      * Specifies how to test if two items are equal. By default, simple strict
@@ -75,7 +75,7 @@ export interface ListItemsProps<T> extends Props {
      *
      * If `itemPredicate` is also defined, this prop takes priority and the other will be ignored.
      */
-    itemListPredicate?: ItemListPredicate<T>;
+    itemListPredicate?: ItemListPredicate<T, A>;
 
     /**
      * Customize querying of individual items.
@@ -110,7 +110,7 @@ export interface ListItemsProps<T> extends Props {
      * and wraps them all in a `Menu` element. If the query is empty then `initialContent` is returned,
      * and if there are no items that match the predicate then `noResults` is returned.
      */
-    itemListRenderer?: ItemListRenderer<T>;
+    itemListRenderer?: ItemListRenderer<T, A>;
 
     /**
      * React content to render when query is empty.
@@ -157,7 +157,7 @@ export interface ListItemsProps<T> extends Props {
     /**
      * Callback invoked when multiple items are selected at once via pasting.
      */
-    onItemsPaste?: (items: T[]) => void;
+    onItemsPaste?: (items: A) => void;
 
     /**
      * Callback invoked when the query string changes.
@@ -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 | A;
 
     /**
      * Custom renderer to transform the current query string into a selectable
diff --git a/packages/select/src/common/predicate.ts b/packages/select/src/common/predicate.ts
index 8011cbe033..e308689bcf 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 `ListItemsProps`.
  */
-export type ItemListPredicate<T> = (query: string, items: T[]) => T[];
+export type ItemListPredicate<T, A extends readonly T[] = T[]> = (query: string, items: A) => A;
 
 /**
  * A custom predicate for filtering items based on the provided query.
diff --git a/packages/select/src/components/multi-select/multiSelect.tsx b/packages/select/src/components/multi-select/multiSelect.tsx
index 1d69815585..39db60641a 100644
--- a/packages/select/src/components/multi-select/multiSelect.tsx
+++ b/packages/select/src/components/multi-select/multiSelect.tsx
@@ -39,12 +39,12 @@ import { Cross } from "@blueprintjs/icons";
 import { Classes, type ListItemsProps, type SelectPopoverProps } from "../../common";
 import { QueryList, type QueryListRendererProps } from "../query-list/queryList";
 
-export interface MultiSelectProps<T> extends ListItemsProps<T>, SelectPopoverProps {
+export interface MultiSelectProps<T, A extends readonly T[] = T[]> extends ListItemsProps<T, A>, SelectPopoverProps {
     /**
      * 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: A, 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: A;
 
     /**
      * Props to pass to the [TagInput component](##core/components/tag-input).
@@ -142,7 +142,10 @@ export interface MultiSelectState {
  *
  * @see https://blueprintjs.com/docs/#select/multi-select
  */
-export class MultiSelect<T> extends AbstractPureComponent<MultiSelectProps<T>, MultiSelectState> {
+export class MultiSelect<T, A extends readonly T[] = T[]> extends AbstractPureComponent<
+    MultiSelectProps<T, A>,
+    MultiSelectState
+> {
     public static displayName = `${DISPLAYNAME_PREFIX}.MultiSelect`;
 
     private listboxId = Utils.uniqueId("listbox");
@@ -164,19 +167,19 @@ export class MultiSelect<T> extends AbstractPureComponent<MultiSelectProps<T>, M
 
     public input: HTMLInputElement | null = null;
 
-    public queryList: QueryList<T> | null = null;
+    public queryList: QueryList<T, A> | null = null;
 
     private refHandlers: {
         input: React.RefCallback<HTMLInputElement>;
         popover: React.RefObject<Popover>;
-        queryList: React.RefCallback<QueryList<T>>;
+        queryList: React.RefCallback<QueryList<T, A>>;
     } = {
         input: refHandler(this, "input", this.props.tagInputProps?.inputRef),
         popover: React.createRef(),
-        queryList: (ref: QueryList<T> | null) => (this.queryList = ref),
+        queryList: (ref: QueryList<T, A> | null) => (this.queryList = ref),
     };
 
-    public componentDidUpdate(prevProps: MultiSelectProps<T>) {
+    public componentDidUpdate(prevProps: MultiSelectProps<T, A>) {
         if (prevProps.tagInputProps?.inputRef !== this.props.tagInputProps?.inputRef) {
             setRef(prevProps.tagInputProps?.inputRef, null);
             this.refHandlers.input = refHandler(this, "input", this.props.tagInputProps?.inputRef);
@@ -195,7 +198,7 @@ export class MultiSelect<T> extends AbstractPureComponent<MultiSelectProps<T>, M
         const { menuProps, openOnKeyDown, popoverProps, tagInputProps, customTarget, ...restProps } = this.props;
 
         return (
-            <QueryList<T>
+            <QueryList<T, A>
                 {...restProps}
                 menuProps={{
                     "aria-label": "selectable options",
@@ -211,7 +214,7 @@ export class MultiSelect<T> extends AbstractPureComponent<MultiSelectProps<T>, M
         );
     }
 
-    private renderQueryList = (listProps: QueryListRendererProps<T>) => {
+    private renderQueryList = (listProps: QueryListRendererProps<T, A>) => {
         const { disabled, popoverContentProps = {}, popoverProps = {} } = this.props;
         const { handleKeyDown, handleKeyUp } = listProps;
 
@@ -267,7 +270,7 @@ export class MultiSelect<T> extends AbstractPureComponent<MultiSelectProps<T>, M
     // the "fill" prop. Note that we must take `isOpen` as an argument to force this render function to be called
     // again after that state changes.
     private getPopoverTargetRenderer =
-        (listProps: QueryListRendererProps<T>, isOpen: boolean) =>
+        (listProps: QueryListRendererProps<T, A>, isOpen: boolean) =>
         // N.B. pull out `isOpen` so that it's not forwarded to the DOM, but remember not to use it directly
         // since it may be stale (`renderTarget` is not re-invoked on this.state changes).
         // eslint-disable-next-line react/display-name
@@ -304,7 +307,7 @@ export class MultiSelect<T> extends AbstractPureComponent<MultiSelectProps<T>, M
             );
         };
 
-    private getTagInput = (listProps: QueryListRendererProps<T>, className?: string) => {
+    private getTagInput = (listProps: QueryListRendererProps<T, A>, className?: string) => {
         const { disabled, fill, onClear, placeholder, selectedItems, tagInputProps = {} } = this.props;
 
         const maybeClearButton =
@@ -408,7 +411,7 @@ export class MultiSelect<T> extends AbstractPureComponent<MultiSelectProps<T>, M
     };
 
     private getTagInputAddHandler =
-        (listProps: QueryListRendererProps<T>) => (values: any[], method: TagInputAddMethod) => {
+        (listProps: QueryListRendererProps<T, A>) => (values: any[], method: TagInputAddMethod) => {
             if (method === "paste") {
                 listProps.handlePaste(values);
             }
diff --git a/packages/select/src/components/omnibar/omnibar.tsx b/packages/select/src/components/omnibar/omnibar.tsx
index 8491a76b8d..2d251161d5 100644
--- a/packages/select/src/components/omnibar/omnibar.tsx
+++ b/packages/select/src/components/omnibar/omnibar.tsx
@@ -23,7 +23,7 @@ import { Search } from "@blueprintjs/icons";
 import { Classes, type ListItemsProps } from "../../common";
 import { QueryList, type QueryListRendererProps } from "../query-list/queryList";
 
-export interface OmnibarProps<T> extends ListItemsProps<T> {
+export interface OmnibarProps<T, A extends readonly T[] = T[]> extends ListItemsProps<T, A> {
     /**
      * Props to spread to the query `InputGroup`. Use `query` and
      * `onQueryChange` instead of `inputProps.value` and `inputProps.onChange`
@@ -58,7 +58,7 @@ export interface OmnibarProps<T> extends ListItemsProps<T> {
  *
  * @see https://blueprintjs.com/docs/#select/omnibar
  */
-export class Omnibar<T> extends React.PureComponent<OmnibarProps<T>> {
+export class Omnibar<T, A extends readonly T[] = T[]> extends React.PureComponent<OmnibarProps<T, A>> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Omnibar`;
 
     public static ofType<U>() {
@@ -71,7 +71,7 @@ export class Omnibar<T> extends React.PureComponent<OmnibarProps<T>> {
         const initialContent = "initialContent" in this.props ? this.props.initialContent : null;
 
         return (
-            <QueryList<T>
+            <QueryList<T, A>
                 {...restProps}
                 // Omnibar typically does not keep track of and/or show its selection state like other
                 // select components, so it's more of a menu than a listbox. This means that users should return
@@ -83,7 +83,7 @@ export class Omnibar<T> extends React.PureComponent<OmnibarProps<T>> {
         );
     }
 
-    private renderQueryList = (listProps: QueryListRendererProps<T>) => {
+    private renderQueryList = (listProps: QueryListRendererProps<T, A>) => {
         const { inputProps = {}, isOpen, overlayProps = {} } = this.props;
         const { handleKeyDown, handleKeyUp } = listProps;
         const handlers = isOpen ? { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp } : {};
diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx
index e326843711..20b0974f60 100644
--- a/packages/select/src/components/query-list/queryList.tsx
+++ b/packages/select/src/components/query-list/queryList.tsx
@@ -30,7 +30,7 @@ import {
     renderFilteredItems,
 } from "../../common";
 
-export interface QueryListProps<T> extends ListItemsProps<T> {
+export interface QueryListProps<T, A extends readonly T[] = T[]> extends ListItemsProps<T, A> {
     /**
      * Initial active item, useful if the parent component is controlling its selectedItem but
      * not activeItem.
@@ -60,7 +60,7 @@ export interface QueryListProps<T> extends ListItemsProps<T> {
      * Customize rendering of the component.
      * Receives an object with props that should be applied to elements as necessary.
      */
-    renderer: (listProps: QueryListRendererProps<T>) => React.JSX.Element;
+    renderer: (listProps: QueryListRendererProps<T, A>) => React.JSX.Element;
 
     /**
      * Whether the list is disabled.
@@ -74,8 +74,8 @@ export interface QueryListProps<T> extends ListItemsProps<T> {
  * An object describing how to render a `QueryList`.
  * A `QueryList` `renderer` receives this object as its sole argument.
  */
-export interface QueryListRendererProps<T> // Omit `createNewItem`, because it's used strictly for internal tracking.
-    extends Pick<QueryListState<T>, "activeItem" | "filteredItems" | "query">,
+export interface QueryListRendererProps<T, A extends readonly T[] = T[]> // Omit `createNewItem`, because it's used strictly for internal tracking.
+    extends Pick<QueryListState<T, A>, "activeItem" | "filteredItems" | "query">,
         Props {
     /**
      * Selection handler that should be invoked when a new item has been chosen,
@@ -124,7 +124,7 @@ export interface QueryListRendererProps<T> // Omit `createNewItem`, because it's
 }
 
 /** Exported for testing, not part of public API */
-export interface QueryListState<T> {
+export interface QueryListState<T, A extends readonly T[] = T[]> {
     /** The currently focused item (for keyboard interactions). */
     activeItem: T | CreateNewItem | null;
 
@@ -134,10 +134,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 | A | undefined;
 
     /** The original `items` array filtered by `itemListPredicate` or `itemPredicate`. */
-    filteredItems: T[];
+    filteredItems: A;
 
     /** The current query string. */
     query: string;
@@ -148,7 +148,10 @@ export interface QueryListState<T> {
  *
  * @see https://blueprintjs.com/docs/#select/query-list
  */
-export class QueryList<T> extends AbstractComponent<QueryListProps<T>, QueryListState<T>> {
+export class QueryList<T, A extends readonly T[] = T[]> extends AbstractComponent<
+    QueryListProps<T, A>,
+    QueryListState<T, A>
+> {
     public static displayName = `${DISPLAYNAME_PREFIX}.QueryList`;
 
     public static defaultProps = {
@@ -198,7 +201,7 @@ export class QueryList<T> extends AbstractComponent<QueryListProps<T>, QueryList
      */
     private isEnterKeyPressed = false;
 
-    public constructor(props: QueryListProps<T>) {
+    public constructor(props: QueryListProps<T, A>) {
         super(props);
 
         const { query = "" } = props;
@@ -238,7 +241,7 @@ export class QueryList<T> extends AbstractComponent<QueryListProps<T>, QueryList
         });
     }
 
-    public componentDidUpdate(prevProps: QueryListProps<T>) {
+    public componentDidUpdate(prevProps: QueryListProps<T, A>) {
         if (this.props.activeItem !== undefined && this.props.activeItem !== this.state.activeItem) {
             this.shouldCheckActiveItemInViewport = true;
             this.setState({ activeItem: this.props.activeItem });
@@ -354,7 +357,7 @@ export class QueryList<T> extends AbstractComponent<QueryListProps<T>, QueryList
     }
 
     /** default `itemListRenderer` implementation */
-    private renderItemList = (listProps: ItemListRendererProps<T>) => {
+    private renderItemList = (listProps: ItemListRendererProps<T, A>) => {
         const { initialContent, noResults } = this.props;
 
         // omit noResults if createNewItemFromQuery and createNewItemRenderer are both supplied, and query is not empty
@@ -485,7 +488,7 @@ export class QueryList<T> extends AbstractComponent<QueryListProps<T>, QueryList
         // Find an exising item that exactly matches each pasted value, or
         // create a new item if possible. Ignore unmatched values if creating
         // items is disabled.
-        const pastedItemsToEmit = [];
+        const pastedItemsToEmit: T[] = [];
 
         for (const query of queries) {
             const equalItem = getMatchingItem(query, this.props);
@@ -515,7 +518,7 @@ export class QueryList<T> extends AbstractComponent<QueryListProps<T>, QueryList
             this.setActiveItem(nextActiveItem);
         }
 
-        onItemsPaste?.(pastedItemsToEmit);
+        onItemsPaste?.(pastedItemsToEmit as readonly T[] as A);
     };
 
     private handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
@@ -584,7 +587,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 | A): boolean {
         return (
             this.canCreateItems() &&
             this.state.query !== "" &&
@@ -603,7 +606,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 | A) {
         // 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 => {
@@ -623,7 +626,10 @@ function pxToNumber(value: string | null) {
     return value == null ? 0 : parseInt(value.slice(0, -2), 10);
 }
 
-function getMatchingItem<T>(query: string, { items, itemPredicate }: QueryListProps<T>): T | undefined {
+function getMatchingItem<T, A extends readonly T[] = T[]>(
+    query: string,
+    { items, itemPredicate }: QueryListProps<T, A>,
+): T | undefined {
     if (Utils.isFunction(itemPredicate)) {
         // .find() doesn't exist in ES5. Alternative: use a for loop instead of
         // .filter() so that we can return as soon as we find the first match.
@@ -637,12 +643,15 @@ function getMatchingItem<T>(query: string, { items, itemPredicate }: QueryListPr
     return undefined;
 }
 
-function getFilteredItems<T>(query: string, { items, itemPredicate, itemListPredicate }: QueryListProps<T>) {
+function getFilteredItems<T, A extends readonly T[] = T[]>(
+    query: string,
+    { items, itemPredicate, itemListPredicate }: QueryListProps<T, A>,
+) {
     if (Utils.isFunction(itemListPredicate)) {
         // note that implementations can reorder the items here
         return itemListPredicate(query, items);
     } else if (Utils.isFunction(itemPredicate)) {
-        return items.filter((item, index) => itemPredicate(query, item, index));
+        return items.filter((item, index) => itemPredicate(query, item, index)) as readonly T[] as A;
     }
     return items;
 }
@@ -657,7 +666,11 @@ function wrapNumber(value: number, min: number, max: number) {
     return value;
 }
 
-function isItemDisabled<T>(item: T | null, index: number, itemDisabled?: ListItemsProps<T>["itemDisabled"]) {
+function isItemDisabled<T, A extends readonly T[] = T[]>(
+    item: T | null,
+    index: number,
+    itemDisabled?: ListItemsProps<T, A>["itemDisabled"],
+) {
     if (itemDisabled == null || item == null) {
         return false;
     } else if (Utils.isFunction(itemDisabled)) {
@@ -675,8 +688,8 @@ function isItemDisabled<T>(item: T | null, index: number, itemDisabled?: ListIte
  * @param direction amount to move in each iteration, typically +/-1
  * @param startIndex which index to begin moving from
  */
-export function getFirstEnabledItem<T>(
-    items: T[],
+export function getFirstEnabledItem<T, A extends readonly T[] = T[]>(
+    items: A,
     itemDisabled?: keyof T | ((item: T, index: number) => boolean),
     direction = 1,
     startIndex = items.length - 1,
diff --git a/packages/select/src/components/select/select.tsx b/packages/select/src/components/select/select.tsx
index 827217a1ed..5cdb9245fd 100644
--- a/packages/select/src/components/select/select.tsx
+++ b/packages/select/src/components/select/select.tsx
@@ -37,7 +37,7 @@ import { Cross, Search } from "@blueprintjs/icons";
 import { Classes, type ListItemsProps, type SelectPopoverProps } from "../../common";
 import { QueryList, type QueryListRendererProps } from "../query-list/queryList";
 
-export interface SelectProps<T> extends ListItemsProps<T>, SelectPopoverProps {
+export interface SelectProps<T, A extends readonly T[] = T[]> extends ListItemsProps<T, A>, SelectPopoverProps {
     /**
      * Element which triggers the select popover. In most cases, you should display
      * the name or label of the curently selected item here.
@@ -108,7 +108,7 @@ export interface SelectState {
  *
  * @see https://blueprintjs.com/docs/#select/select
  */
-export class Select<T> extends AbstractPureComponent<SelectProps<T>, SelectState> {
+export class Select<T, A extends readonly T[] = T[]> extends AbstractPureComponent<SelectProps<T, A>, SelectState> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Select`;
 
     /** @deprecated no longer necessary now that the TypeScript parser supports type arguments on JSX element tags */
@@ -120,7 +120,7 @@ export class Select<T> extends AbstractPureComponent<SelectProps<T>, SelectState
 
     public inputElement: HTMLInputElement | null = null;
 
-    private queryList: QueryList<T> | null = null;
+    private queryList: QueryList<T, A> | null = null;
 
     private previousFocusedElement: HTMLElement | undefined;
 
@@ -130,7 +130,7 @@ export class Select<T> extends AbstractPureComponent<SelectProps<T>, SelectState
         this.props.inputProps?.inputRef,
     );
 
-    private handleQueryListRef = (ref: QueryList<T> | null) => (this.queryList = ref);
+    private handleQueryListRef = (ref: QueryList<T, A> | null) => (this.queryList = ref);
 
     private listboxId = Utils.uniqueId("listbox");
 
@@ -139,7 +139,7 @@ export class Select<T> extends AbstractPureComponent<SelectProps<T>, SelectState
         const { filterable, inputProps, menuProps, popoverProps, ...restProps } = this.props;
 
         return (
-            <QueryList<T>
+            <QueryList<T, A>
                 {...restProps}
                 menuProps={{ "aria-label": "selectable options", ...menuProps, id: this.listboxId }}
                 onItemSelect={this.handleItemSelect}
@@ -149,7 +149,7 @@ export class Select<T> extends AbstractPureComponent<SelectProps<T>, SelectState
         );
     }
 
-    public componentDidUpdate(prevProps: SelectProps<T>, prevState: SelectState) {
+    public componentDidUpdate(prevProps: SelectProps<T, A>, prevState: SelectState) {
         if (prevProps.inputProps?.inputRef !== this.props.inputProps?.inputRef) {
             setRef(prevProps.inputProps?.inputRef, null);
             this.handleInputRef = refHandler(this, "inputElement", this.props.inputProps?.inputRef);
@@ -161,7 +161,7 @@ export class Select<T> extends AbstractPureComponent<SelectProps<T>, SelectState
         }
     }
 
-    private renderQueryList = (listProps: QueryListRendererProps<T>) => {
+    private renderQueryList = (listProps: QueryListRendererProps<T, A>) => {
         // not using defaultProps cuz they're hard to type with generics (can't use <T> on static members)
         const {
             filterable = true,
@@ -220,7 +220,7 @@ export class Select<T> extends AbstractPureComponent<SelectProps<T>, SelectState
     // the "fill" prop. Note that we must take `isOpen` as an argument to force this render function to be called
     // again after that state changes.
     private getPopoverTargetRenderer =
-        (listProps: QueryListRendererProps<T>, isOpen: boolean) =>
+        (listProps: QueryListRendererProps<T, A>, isOpen: boolean) =>
         // N.B. pull out `isOpen` so that it's not forwarded to the DOM, but remember not to use it directly
         // since it may be stale (`renderTarget` is not re-invoked on this.state changes).
         // eslint-disable-next-line react/display-name
diff --git a/packages/select/src/components/suggest/suggest.tsx b/packages/select/src/components/suggest/suggest.tsx
index 9cc3b87173..1424ee1f4a 100644
--- a/packages/select/src/components/suggest/suggest.tsx
+++ b/packages/select/src/components/suggest/suggest.tsx
@@ -35,7 +35,9 @@ import {
 import { Classes, type ListItemsProps, type SelectPopoverProps } from "../../common";
 import { QueryList, type QueryListRendererProps } from "../query-list/queryList";
 
-export interface SuggestProps<T> extends ListItemsProps<T>, Omit<SelectPopoverProps, "popoverTargetProps"> {
+export interface SuggestProps<T, A extends readonly T[] = T[]>
+    extends ListItemsProps<T, A>,
+        Omit<SelectPopoverProps, "popoverTargetProps"> {
     /**
      * Whether the popover should close after selecting an item.
      *
@@ -117,7 +119,10 @@ export interface SuggestState<T> {
  *
  * @see https://blueprintjs.com/docs/#select/suggest
  */
-export class Suggest<T> extends AbstractPureComponent<SuggestProps<T>, SuggestState<T>> {
+export class Suggest<T, A extends readonly T[] = T[]> extends AbstractPureComponent<
+    SuggestProps<T, A>,
+    SuggestState<T>
+> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Suggest`;
 
     public static defaultProps: Partial<SuggestProps<any>> = {
@@ -139,7 +144,7 @@ export class Suggest<T> extends AbstractPureComponent<SuggestProps<T>, SuggestSt
 
     public inputElement: HTMLInputElement | null = null;
 
-    private queryList: QueryList<T> | null = null;
+    private queryList: QueryList<T, A> | null = null;
 
     private handleInputRef: React.Ref<HTMLInputElement> = refHandler(
         this,
@@ -147,7 +152,7 @@ export class Suggest<T> extends AbstractPureComponent<SuggestProps<T>, SuggestSt
         this.props.inputProps?.inputRef,
     );
 
-    private handleQueryListRef = (ref: QueryList<T> | null) => (this.queryList = ref);
+    private handleQueryListRef = (ref: QueryList<T, A> | null) => (this.queryList = ref);
 
     private listboxId = Utils.uniqueId("listbox");
 
@@ -156,7 +161,7 @@ export class Suggest<T> extends AbstractPureComponent<SuggestProps<T>, SuggestSt
         const { disabled, inputProps, menuProps, popoverProps, ...restProps } = this.props;
 
         return (
-            <QueryList<T>
+            <QueryList<T, A>
                 {...restProps}
                 menuProps={{ "aria-label": "selectable options", ...menuProps, id: this.listboxId }}
                 initialActiveItem={this.props.selectedItem ?? undefined}
@@ -167,7 +172,7 @@ export class Suggest<T> extends AbstractPureComponent<SuggestProps<T>, SuggestSt
         );
     }
 
-    public componentDidUpdate(prevProps: SuggestProps<T>, prevState: SuggestState<T>) {
+    public componentDidUpdate(prevProps: SuggestProps<T, A>, prevState: SuggestState<T>) {
         if (prevProps.inputProps?.inputRef !== this.props.inputProps?.inputRef) {
             setRef(prevProps.inputProps?.inputRef, null);
             this.handleInputRef = refHandler(this, "inputElement", this.props.inputProps?.inputRef);
@@ -191,7 +196,7 @@ export class Suggest<T> extends AbstractPureComponent<SuggestProps<T>, SuggestSt
         }
     }
 
-    private renderQueryList = (listProps: QueryListRendererProps<T>) => {
+    private renderQueryList = (listProps: QueryListRendererProps<T, A>) => {
         const { popoverContentProps = {}, popoverProps = {}, popoverRef } = this.props;
         const { isOpen } = this.state;
         const { handleKeyDown, handleKeyUp } = listProps;
@@ -226,7 +231,7 @@ export class Suggest<T> extends AbstractPureComponent<SuggestProps<T>, SuggestSt
     // the "fill" prop. Note that we must take `isOpen` as an argument to force this render function to be called
     // again after that state changes.
     private getPopoverTargetRenderer =
-        (listProps: QueryListRendererProps<T>, isOpen: boolean) =>
+        (listProps: QueryListRendererProps<T, A>, isOpen: boolean) =>
         // eslint-disable-next-line react/display-name
         ({
             // pull out `isOpen` so that it's not forwarded to the DOM

From 19cdbeec25bdc51d8382f611920f4f6660bd5347 Mon Sep 17 00:00:00 2001
From: Gregory Douglas <gdouglas@palantir.com>
Date: Wed, 30 Oct 2024 14:28:24 -0400
Subject: [PATCH 2/4] Update examples and tests to use readonly array

---
 .../select-examples/multiSelectExample.tsx    | 20 +++++++++--------
 .../select-examples/omnibarExample.tsx        |  2 +-
 .../select-examples/selectExample.tsx         | 10 ++++-----
 .../select-examples/suggestExample.tsx        |  6 ++---
 .../select/src/__examples__/filmSelect.tsx    |  8 +++----
 packages/select/src/__examples__/films.tsx    | 22 +++++++++----------
 packages/select/test/multiSelectTests.tsx     | 12 +++++-----
 packages/select/test/queryListTests.tsx       |  4 +++-
 packages/select/test/selectComponentSuite.tsx |  4 ++--
 packages/select/test/selectTests.tsx          |  6 ++---
 packages/select/test/suggestTests.tsx         |  6 ++---
 11 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx b/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
index ff5d0129c2..c9c6cae76c 100644
--- a/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
@@ -40,13 +40,13 @@ const INTENTS = [Intent.NONE, Intent.PRIMARY, Intent.SUCCESS, Intent.DANGER, Int
 
 export interface MultiSelectExampleState {
     allowCreate: boolean;
-    createdItems: Film[];
+    createdItems: readonly Film[];
     disabled: boolean;
     fill: boolean;
-    films: Film[];
+    films: readonly Film[];
     hasInitialContent: boolean;
     intent: boolean;
-    items: Film[];
+    items: readonly Film[];
     matchTargetWidth: boolean;
     openOnKeyDown: boolean;
     popoverMinimal: boolean;
@@ -124,7 +124,7 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiS
 
         return (
             <Example options={this.renderOptions()} {...this.props}>
-                <MultiSelect<Film>
+                <MultiSelect
                     {...flags}
                     createNewItemFromQuery={allowCreate ? createFilms : undefined}
                     createNewItemRenderer={allowCreate ? renderCreateFilmsMenuItem : null}
@@ -251,7 +251,9 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiS
         );
     }
 
-    private renderCustomTarget = (selectedItems: Film[]) => <MultiSelectCustomTarget count={selectedItems.length} />;
+    private renderCustomTarget = (selectedItems: readonly Film[]) => (
+        <MultiSelectCustomTarget count={selectedItems.length} />
+    );
 
     private renderTag = (film: Film) => film.title;
 
@@ -287,7 +289,7 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiS
         this.selectFilms([film]);
     }
 
-    private selectFilms(filmsToSelect: Film[]) {
+    private selectFilms(filmsToSelect: readonly Film[]) {
         this.setState(({ createdItems, films, items }) => {
             let nextCreatedItems = createdItems.slice();
             let nextFilms = films.slice();
@@ -295,8 +297,8 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiS
 
             filmsToSelect.forEach(film => {
                 const results = maybeAddCreatedFilmToArrays(nextItems, nextCreatedItems, film);
-                nextItems = results.items;
-                nextCreatedItems = results.createdItems;
+                nextItems = results.items.slice();
+                nextCreatedItems = results.createdItems.slice();
                 // Avoid re-creating an item that is already selected (the "Create
                 // Item" option will be shown even if it matches an already selected
                 // item).
@@ -336,7 +338,7 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiS
         }
     };
 
-    private handleFilmsPaste = (films: Film[]) => {
+    private handleFilmsPaste = (films: readonly Film[]) => {
         // On paste, don't bother with deselecting already selected values, just
         // add the new ones.
         this.selectFilms(films);
diff --git a/packages/docs-app/src/examples/select-examples/omnibarExample.tsx b/packages/docs-app/src/examples/select-examples/omnibarExample.tsx
index 19d4596ef0..b30c197123 100644
--- a/packages/docs-app/src/examples/select-examples/omnibarExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/omnibarExample.tsx
@@ -92,7 +92,7 @@ export class OmnibarExample extends React.PureComponent<ExampleProps, OmnibarExa
                         <KeyComboTag combo="shift + o" />
                     </span>
 
-                    <Omnibar<Film>
+                    <Omnibar
                         {...this.state}
                         createNewItemFromQuery={maybeCreateNewItemFromQuery}
                         createNewItemRenderer={maybeCreateNewItemRenderer}
diff --git a/packages/docs-app/src/examples/select-examples/selectExample.tsx b/packages/docs-app/src/examples/select-examples/selectExample.tsx
index 18759c67f5..2b0a74b313 100644
--- a/packages/docs-app/src/examples/select-examples/selectExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/selectExample.tsx
@@ -24,7 +24,7 @@ import { type Film, FilmSelect, filterFilm, TOP_100_FILMS } from "@blueprintjs/s
 export interface SelectExampleState {
     allowCreate: boolean;
     createFirst: boolean;
-    createdItems: Film[];
+    createdItems: readonly Film[];
     disableItems: boolean;
     disabled: boolean;
     fill: boolean;
@@ -169,7 +169,7 @@ export class SelectExample extends React.PureComponent<ExampleProps, SelectExamp
         return /[0-9]/.test(firstLetter) ? "0-9" : firstLetter;
     }
 
-    private getGroupedItems = (filteredItems: Film[]) => {
+    private getGroupedItems = (filteredItems: readonly Film[]) => {
         return filteredItems.reduce<Array<{ group: string; index: number; items: Film[]; key: number }>>(
             (acc, item, index) => {
                 const group = this.getGroup(item);
@@ -193,7 +193,7 @@ export class SelectExample extends React.PureComponent<ExampleProps, SelectExamp
         ) : undefined;
     };
 
-    private groupedItemListPredicate = (query: string, items: Film[]) => {
+    private groupedItemListPredicate = (query: string, items: readonly Film[]) => {
         return items
             .filter((item, index) => filterFilm(query, item, index))
             .sort((a, b) => this.getGroup(a).localeCompare(this.getGroup(b)));
@@ -208,7 +208,7 @@ export class SelectExample extends React.PureComponent<ExampleProps, SelectExamp
 
     private isItemDisabled = (film: Film) => this.state.disableItems && film.year < 2000;
 
-    private renderGroupedItemList = (listProps: ItemListRendererProps<Film>) => {
+    private renderGroupedItemList = (listProps: ItemListRendererProps<Film, readonly Film[]>) => {
         const initialContent = this.getInitialContent();
         const noResults = <MenuItem disabled={true} text="No results." roleStructure="listoption" />;
 
@@ -231,7 +231,7 @@ export class SelectExample extends React.PureComponent<ExampleProps, SelectExamp
     };
 
     private renderGroupedMenuContent = (
-        listProps: ItemListRendererProps<Film>,
+        listProps: ItemListRendererProps<Film, readonly Film[]>,
         noResults?: React.ReactNode,
         initialContent?: React.ReactNode | null,
     ) => {
diff --git a/packages/docs-app/src/examples/select-examples/suggestExample.tsx b/packages/docs-app/src/examples/select-examples/suggestExample.tsx
index 835ae1411a..4e6d3941ad 100644
--- a/packages/docs-app/src/examples/select-examples/suggestExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/suggestExample.tsx
@@ -34,10 +34,10 @@ import {
 export interface SuggestExampleState {
     allowCreate: boolean;
     closeOnSelect: boolean;
-    createdItems: Film[];
+    createdItems: readonly Film[];
     disabled: boolean;
     fill: boolean;
-    items: Film[];
+    items: readonly Film[];
     matchTargetWidth: boolean;
     minimal: boolean;
     openOnKeyDown: boolean;
@@ -92,7 +92,7 @@ export class SuggestExample extends React.PureComponent<ExampleProps, SuggestExa
 
         return (
             <Example options={this.renderOptions()} {...this.props}>
-                <Suggest<Film>
+                <Suggest
                     {...flags}
                     createNewItemFromQuery={maybeCreateNewItemFromQuery}
                     createNewItemRenderer={maybeCreateNewItemRenderer}
diff --git a/packages/select/src/__examples__/filmSelect.tsx b/packages/select/src/__examples__/filmSelect.tsx
index c3735a37ab..92b9708a7c 100644
--- a/packages/select/src/__examples__/filmSelect.tsx
+++ b/packages/select/src/__examples__/filmSelect.tsx
@@ -35,7 +35,7 @@ import {
 } from "./films";
 
 type FilmSelectProps = Omit<
-    SelectProps<Film>,
+    SelectProps<Film, readonly Film[]>,
     | "createNewItemFromQuery"
     | "createNewItemRenderer"
     | "itemPredicate"
@@ -49,8 +49,8 @@ type FilmSelectProps = Omit<
 };
 
 export function FilmSelect({ allowCreate = false, fill, ...restProps }: FilmSelectProps) {
-    const [items, setItems] = React.useState([...TOP_100_FILMS]);
-    const [createdItems, setCreatedItems] = React.useState<Film[]>([]);
+    const [items, setItems] = React.useState<readonly Film[]>([...TOP_100_FILMS]);
+    const [createdItems, setCreatedItems] = React.useState<readonly Film[]>([]);
     const [selectedFilm, setSelectedFilm] = React.useState<Film | undefined>(undefined);
     const handleItemSelect = React.useCallback(
         (newFilm: Film) => {
@@ -82,7 +82,7 @@ export function FilmSelect({ allowCreate = false, fill, ...restProps }: FilmSele
     );
 
     return (
-        <Select<Film>
+        <Select
             createNewItemFromQuery={allowCreate ? createFilm : undefined}
             createNewItemRenderer={allowCreate ? renderCreateFilmMenuItem : undefined}
             fill={fill}
diff --git a/packages/select/src/__examples__/films.tsx b/packages/select/src/__examples__/films.tsx
index d627a6f1cf..16d0475db4 100644
--- a/packages/select/src/__examples__/films.tsx
+++ b/packages/select/src/__examples__/films.tsx
@@ -30,7 +30,7 @@ export interface Film {
 }
 
 /** Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top */
-export const TOP_100_FILMS: Film[] = [
+export const TOP_100_FILMS: readonly Film[] = [
     { title: "The Shawshank Redemption", year: 1994 },
     { title: "The Godfather", year: 1972 },
     { title: "The Godfather: Part II", year: 1974 },
@@ -270,7 +270,7 @@ export function createFilm(title: string): Film {
     };
 }
 
-export function createFilms(query: string): Film[] {
+export function createFilms(query: string): readonly Film[] {
     const titles = query.split(", ");
     return titles.map((title, index) => ({
         rank: 100 + Math.floor(Math.random() * 100 + index),
@@ -288,23 +288,23 @@ export function doesFilmEqualQuery(film: Film, query: string) {
     return film.title.toLowerCase() === query.toLowerCase();
 }
 
-export function arrayContainsFilm(films: Film[], filmToFind: Film): boolean {
+export function arrayContainsFilm(films: readonly Film[], filmToFind: Film): boolean {
     return films.some((film: Film) => film.title === filmToFind.title);
 }
 
-export function addFilmToArray(films: Film[], filmToAdd: Film) {
+export function addFilmToArray(films: readonly Film[], filmToAdd: Film): readonly Film[] {
     return [...films, filmToAdd];
 }
 
-export function deleteFilmFromArray(films: Film[], filmToDelete: Film) {
+export function deleteFilmFromArray(films: readonly Film[], filmToDelete: Film): readonly Film[] {
     return films.filter(film => film !== filmToDelete);
 }
 
 export function maybeAddCreatedFilmToArrays(
-    items: Film[],
-    createdItems: Film[],
+    items: readonly Film[],
+    createdItems: readonly Film[],
     film: Film,
-): { createdItems: Film[]; items: Film[] } {
+): { createdItems: readonly Film[]; items: readonly Film[] } {
     const isNewlyCreatedItem = !arrayContainsFilm(items, film);
     return {
         createdItems: isNewlyCreatedItem ? addFilmToArray(createdItems, film) : createdItems,
@@ -314,10 +314,10 @@ export function maybeAddCreatedFilmToArrays(
 }
 
 export function maybeDeleteCreatedFilmFromArrays(
-    items: Film[],
-    createdItems: Film[],
+    items: readonly Film[],
+    createdItems: readonly Film[],
     film: Film | undefined,
-): { createdItems: Film[]; items: Film[] } {
+): { createdItems: readonly Film[]; items: readonly Film[] } {
     if (film === undefined) {
         return {
             createdItems,
diff --git a/packages/select/test/multiSelectTests.tsx b/packages/select/test/multiSelectTests.tsx
index a56cefb9e9..9587ab3713 100644
--- a/packages/select/test/multiSelectTests.tsx
+++ b/packages/select/test/multiSelectTests.tsx
@@ -33,7 +33,7 @@ describe("<MultiSelect>", () => {
         items: TOP_100_FILMS,
         popoverProps: { isOpen: true, usePortal: false },
         query: "",
-        selectedItems: [] as Film[],
+        selectedItems: [] as readonly Film[],
         tagRenderer: renderTag,
     };
     let handlers: {
@@ -50,9 +50,9 @@ describe("<MultiSelect>", () => {
         };
     });
 
-    selectComponentSuite<MultiSelectProps<Film>, MultiSelectState>(props =>
+    selectComponentSuite<MultiSelectProps<Film, readonly Film[]>, MultiSelectState>(props =>
         mount(
-            <MultiSelect<Film>
+            <MultiSelect
                 selectedItems={[]}
                 {...props}
                 popoverProps={{ isOpen: true, usePortal: false }}
@@ -135,7 +135,7 @@ describe("<MultiSelect>", () => {
             popoverProps: { usePortal: false },
         };
 
-        const wrapper = mount(<MultiSelect<Film> {...defaultProps} {...handlers} {...props} />, {
+        const wrapper = mount(<MultiSelect {...defaultProps} {...handlers} {...props} />, {
             attachTo: containerElement,
         });
 
@@ -167,9 +167,9 @@ describe("<MultiSelect>", () => {
         containerElement?.remove();
     });
 
-    function multiselect(props: Partial<MultiSelectProps<Film>> = {}, query?: string) {
+    function multiselect(props: Partial<MultiSelectProps<Film, readonly Film[]>> = {}, query?: string) {
         const wrapper = mount(
-            <MultiSelect<Film> {...defaultProps} {...handlers} {...props}>
+            <MultiSelect {...defaultProps} {...handlers} {...props}>
                 <article />
             </MultiSelect>,
         );
diff --git a/packages/select/test/queryListTests.tsx b/packages/select/test/queryListTests.tsx
index 87dccf112d..4783606988 100644
--- a/packages/select/test/queryListTests.tsx
+++ b/packages/select/test/queryListTests.tsx
@@ -82,7 +82,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: readonly Film[]) =>
+                films.filter(f => f.year === +query),
+            );
             shallow(<QueryList<Film> {...testProps} itemListPredicate={predicate} query="1994" />);
 
             assert.equal(predicate.callCount, 1, "called once for entire list");
diff --git a/packages/select/test/selectComponentSuite.tsx b/packages/select/test/selectComponentSuite.tsx
index 553d9bc526..0074af4c8f 100644
--- a/packages/select/test/selectComponentSuite.tsx
+++ b/packages/select/test/selectComponentSuite.tsx
@@ -32,8 +32,8 @@ import {
     TOP_100_FILMS,
 } from "../src/__examples__";
 
-export function selectComponentSuite<P extends ListItemsProps<Film>, S>(
-    render: (props: ListItemsProps<Film>) => ReactWrapper<P, S>,
+export function selectComponentSuite<P extends ListItemsProps<Film, readonly Film[]>, S>(
+    render: (props: ListItemsProps<Film, readonly Film[]>) => ReactWrapper<P, S>,
     findInput: (wrapper: ReactWrapper<P, S>) => ReactWrapper<HTMLInputProps> = wrapper =>
         wrapper.find("input") as ReactWrapper<HTMLInputProps>,
     findItems: (wrapper: ReactWrapper<P, S>) => ReactWrapper = wrapper => wrapper.find("a"),
diff --git a/packages/select/test/selectTests.tsx b/packages/select/test/selectTests.tsx
index c23c80b7e0..bd6799d9c2 100644
--- a/packages/select/test/selectTests.tsx
+++ b/packages/select/test/selectTests.tsx
@@ -58,7 +58,7 @@ describe("<Select>", () => {
         testsContainerElement?.remove();
     });
 
-    selectComponentSuite<SelectProps<Film>, SelectState>(props =>
+    selectComponentSuite<SelectProps<Film, readonly Film[]>, SelectState>(props =>
         mount(<Select {...props} popoverProps={{ isOpen: true, usePortal: false }} />),
     );
 
@@ -179,9 +179,9 @@ describe("<Select>", () => {
         assert.isTrue(wrapper.find(Popover).prop("isOpen"));
     });
 
-    function select(props: Partial<SelectProps<Film>> = {}, query?: string) {
+    function select(props: Partial<SelectProps<Film, readonly Film[]>> = {}, query?: string) {
         const wrapper = mount(
-            <Select<Film> {...defaultProps} {...handlers} {...props}>
+            <Select {...defaultProps} {...handlers} {...props}>
                 <Button data-testid="target-button" text="Target" />
             </Select>,
             { attachTo: testsContainerElement },
diff --git a/packages/select/test/suggestTests.tsx b/packages/select/test/suggestTests.tsx
index 2002c8dc29..b9f16836ab 100644
--- a/packages/select/test/suggestTests.tsx
+++ b/packages/select/test/suggestTests.tsx
@@ -57,7 +57,7 @@ describe("Suggest", () => {
         testsContainerElement?.remove();
     });
 
-    selectComponentSuite<SuggestProps<Film>, SuggestState<Film>>(props =>
+    selectComponentSuite<SuggestProps<Film, readonly Film[]>, SuggestState<Film>>(props =>
         mount(
             <Suggest
                 {...props}
@@ -338,8 +338,8 @@ describe("Suggest", () => {
         });
     });
 
-    function suggest(props: Partial<SuggestProps<Film>> = {}) {
-        return mount<Suggest<Film>>(<Suggest<Film> {...defaultProps} {...handlers} {...props} />, {
+    function suggest(props: Partial<SuggestProps<Film, readonly Film[]>> = {}) {
+        return mount<SuggestProps<Film, readonly Film[]>>(<Suggest {...defaultProps} {...handlers} {...props} />, {
             attachTo: testsContainerElement,
         });
     }

From 5b8c385361d358ba90e18980189eb5ddc683f6b1 Mon Sep 17 00:00:00 2001
From: Gregory Douglas <gdouglas@palantir.com>
Date: Thu, 31 Oct 2024 11:09:15 -0400
Subject: [PATCH 3/4] Remove slice around readonly arrays

---
 .../examples/select-examples/multiSelectExample.tsx    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx b/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
index c9c6cae76c..5006a5ac08 100644
--- a/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
@@ -291,14 +291,14 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiS
 
     private selectFilms(filmsToSelect: readonly Film[]) {
         this.setState(({ createdItems, films, items }) => {
-            let nextCreatedItems = createdItems.slice();
-            let nextFilms = films.slice();
-            let nextItems = items.slice();
+            let nextCreatedItems = createdItems;
+            let nextFilms = films;
+            let nextItems = items;
 
             filmsToSelect.forEach(film => {
                 const results = maybeAddCreatedFilmToArrays(nextItems, nextCreatedItems, film);
-                nextItems = results.items.slice();
-                nextCreatedItems = results.createdItems.slice();
+                nextItems = results.items;
+                nextCreatedItems = results.createdItems;
                 // Avoid re-creating an item that is already selected (the "Create
                 // Item" option will be shown even if it matches an already selected
                 // item).

From 25f1aa5b6cc2534a17ee53d4be39f462d2cc7c4d Mon Sep 17 00:00:00 2001
From: Gregory Douglas <gdouglas@palantir.com>
Date: Thu, 31 Oct 2024 11:18:10 -0400
Subject: [PATCH 4/4] Fix typo in Suggest tests

---
 packages/select/test/suggestTests.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/select/test/suggestTests.tsx b/packages/select/test/suggestTests.tsx
index b9f16836ab..64d58e3c23 100644
--- a/packages/select/test/suggestTests.tsx
+++ b/packages/select/test/suggestTests.tsx
@@ -339,7 +339,7 @@ describe("Suggest", () => {
     });
 
     function suggest(props: Partial<SuggestProps<Film, readonly Film[]>> = {}) {
-        return mount<SuggestProps<Film, readonly Film[]>>(<Suggest {...defaultProps} {...handlers} {...props} />, {
+        return mount<Suggest<Film>>(<Suggest {...defaultProps} {...handlers} {...props} />, {
             attachTo: testsContainerElement,
         });
     }