[core] feat: make component props readonly

packages/core/src/components/breadcrumbs/breadcrumbs.tsx

@@ -58,7 +58,7 @@ export interface IBreadcrumbsProps extends Props {
      * All breadcrumbs to display. Breadcrumbs that do not fit in the container
      * will be rendered in an overflow menu instead.
      */
-    items: BreadcrumbProps[];
+    items: readonly BreadcrumbProps[];
 
     /**
      * The minimum number of visible breadcrumbs that should never collapse into
@@ -102,7 +102,7 @@ export class Breadcrumbs extends AbstractPureComponent2<BreadcrumbsProps> {
         );
     }
 
-    private renderOverflow = (items: BreadcrumbProps[]) => {
+    private renderOverflow = (items: readonly BreadcrumbProps[]) => {
         const { collapseFrom } = this.props;
         const position = collapseFrom === Boundary.END ? Position.BOTTOM_RIGHT : Position.BOTTOM_LEFT;
         let orderedItems = items;

packages/core/src/components/forms/radioGroup.tsx

@@ -59,7 +59,7 @@ export interface IRadioGroupProps extends Props {
      * with `children`: either provide an array of `OptionProps` objects or
      * provide `<Radio>` children elements.
      */
-    options?: OptionProps[];
+    options?: readonly OptionProps[];
 
     /** Value of the selected radio. The child with this value will be `:checked`. */
     selectedValue?: string | number;

packages/core/src/components/hotkeys/hotkeysDialog2.tsx

@@ -30,7 +30,7 @@ export interface HotkeysDialog2Props extends DialogProps {
      */
     globalGroupName?: string;
 
-    hotkeys: HotkeyConfig[];
+    hotkeys: readonly HotkeyConfig[];
 }
 
 export const HotkeysDialog2: React.FC<HotkeysDialog2Props> = ({ globalGroupName = "Global", hotkeys, ...props }) => {

packages/core/src/components/hotkeys/hotkeysTarget2.tsx

@@ -34,7 +34,7 @@ export interface HotkeysTarget2Props {
     children: JSX.Element | ((props: HotkeysTarget2RenderProps) => JSX.Element);
 
     /** Hotkey definitions. */
-    hotkeys: HotkeyConfig[];
+    hotkeys: readonly HotkeyConfig[];
 
     /** Hook customization options. */
     options?: UseHotkeysOptions;

packages/core/src/components/html-select/htmlSelect.tsx

@@ -56,7 +56,7 @@ export interface IHTMLSelectProps
      * `{ label?, value }` objects. If no `label` is supplied, `value`
      * will be used as the label.
      */
-    options?: Array<string | number | OptionProps>;
+    options?: ReadonlyArray<string | number | OptionProps>;
 
     /** Controlled value of this component. */
     value?: string | number;

packages/core/src/components/overflow-list/overflowList.tsx

@@ -58,7 +58,7 @@ export interface IOverflowListProps<T> extends Props {
      * All items to display in the list. Items that do not fit in the container
      * will be rendered in the overflow instead.
      */
-    items: T[];
+    items: readonly T[];
 
     /**
      * The minimum number of visible items that should never collapse into the
@@ -124,8 +124,8 @@ export interface IOverflowListState<T> {
     direction: OverflowDirection;
     /** Length of last overflow to dedupe `onOverflow` calls during smooth resizing. */
     lastOverflowCount: number;
-    overflow: T[];
-    visible: T[];
+    overflow: readonly T[];
+    visible: readonly T[];
 }
 
 export class OverflowList<T> extends React.Component<OverflowListProps<T>, IOverflowListState<T>> {
@@ -198,7 +198,7 @@ export class OverflowList<T> extends React.Component<OverflowListProps<T>, IOver
             direction !== prevState.direction &&
             overflow.length !== lastOverflowCount
         ) {
-            this.props.onOverflow?.(overflow);
+            this.props.onOverflow?.(overflow.slice());
         }
     }
 
@@ -229,10 +229,10 @@ export class OverflowList<T> extends React.Component<OverflowListProps<T>, IOver
         if (overflow.length === 0 && !this.props.alwaysRenderOverflow) {
             return null;
         }
-        return this.props.overflowRenderer(overflow);
+        return this.props.overflowRenderer(overflow.slice());
     }
 
-    private resize = (entries: ResizeEntry[]) => {
+    private resize = (entries: readonly ResizeEntry[]) => {
         // if any parent is growing, assume we have more room than before
         const growing = entries.some(entry => {
             const previousWidth = this.previousWidths.get(entry.target) || 0;

packages/core/src/components/panel-stack2/panelStack2.tsx

@@ -67,7 +67,7 @@ export interface PanelStack2Props<T extends Panel<object>> extends Props {
      * The full stack of panels in controlled mode. The last panel in the stack
      * will be displayed.
      */
-    stack?: T[];
+    stack?: readonly T[];
 }
 
 interface PanelStack2Component {

packages/core/src/components/slider/multiSlider.tsx

@@ -52,7 +52,7 @@ export interface ISliderBaseProps extends Props, IntentProps {
      * Array of specific values for the label placement. This prop is mutually exclusive with
      * `labelStepSize`.
      */
-    labelValues?: number[];
+    labelValues?: readonly number[];
 
     /**
      * Number of decimal places to use when rendering label value. Default value is the number of
@@ -444,7 +444,7 @@ export class MultiSlider extends AbstractPureComponent2<MultiSliderProps, ISlide
         const { labelStepSize, labelValues, min, max } = this.props;
         let values: number[] = [];
         if (labelValues !== undefined) {
-            values = labelValues;
+            values = labelValues.slice();
         } else {
             for (let i = min!; i < max! || Utils.approxEqual(i, max!); i += labelStepSize ?? 1) {
                 values.push(i);

packages/core/src/components/tag-input/tagInput.tsx

@@ -181,7 +181,7 @@ export interface ITagInputProps extends IntentProps, Props {
      * subtype, such as `string` or `ReactChild`, you can use that type on all your handlers
      * to simplify type logic.
      */
-    values: React.ReactNode[];
+    values: readonly React.ReactNode[];
 }
 
 export interface ITagInputState {

packages/core/src/components/tree/tree.tsx

@@ -37,7 +37,7 @@ export interface ITreeProps<T = {}> extends Props {
     /**
      * The data specifying the contents and appearance of the tree.
      */
-    contents: Array<TreeNodeInfo<T>>;
+    contents: ReadonlyArray<TreeNodeInfo<T>>;
 
     /**
      * Invoked when a node is clicked anywhere other than the caret for expanding/collapsing the node.
@@ -85,7 +85,10 @@ export class Tree<T = {}> extends React.Component<TreeProps<T>> {
         return Tree as new (props: TreeProps<U>) => Tree<U>;
     }
 
-    public static nodeFromPath<U>(path: number[], treeNodes?: Array<TreeNodeInfo<U>>): TreeNodeInfo<U> {
+    public static nodeFromPath<U>(
+        path: readonly number[],
+        treeNodes?: ReadonlyArray<TreeNodeInfo<U>>,
+    ): TreeNodeInfo<U> {
         if (path.length === 1) {
             return treeNodes![path[0]];
         } else {
@@ -112,7 +115,11 @@ export class Tree<T = {}> extends React.Component<TreeProps<T>> {
         return this.nodeRefs[nodeId];
     }
 
-    private renderNodes(treeNodes: Array<TreeNodeInfo<T>> | undefined, currentPath?: number[], className?: string) {
+    private renderNodes(
+        treeNodes: ReadonlyArray<TreeNodeInfo<T>> | undefined,
+        currentPath?: number[],
+        className?: string,
+    ) {
         if (treeNodes == null) {
             return null;
         }

packages/core/src/hooks/hotkeys/useHotkeys.ts

@@ -48,7 +48,7 @@ export interface UseHotkeysReturnValue {
  * @param keys list of hotkeys to configure
  * @param options hook options
  */
-export function useHotkeys(keys: HotkeyConfig[], options: UseHotkeysOptions = {}): UseHotkeysReturnValue {
+export function useHotkeys(keys: readonly HotkeyConfig[], options: UseHotkeysOptions = {}): UseHotkeysReturnValue {
     const { document = getDefaultDocument(), showDialogKeyCombo = "?" } = options;
     const localKeys = React.useMemo(
         () =>