fix(typescript): updated all array types to be readonly

packages/alert/src/MessageQueueContext.tsx

@@ -141,7 +141,7 @@ export type RestartVisibilityTimer = () => void;
  * notifications. This will return the current queue at the time of reset if you
  * would like to do some manual logic for adding items to the queue.
  */
-export type ResetQueue<M extends Message> = () => M[];
+export type ResetQueue<M extends Message> = () => readonly M[];
 
 /**
  * @internal
@@ -207,12 +207,12 @@ export function useMessageQueueActions<
 /**
  * @internal
  */
-export const MessageQueueContext = createContext<Message[]>([]);
+export const MessageQueueContext = createContext<readonly Message[]>([]);
 
 /**
  * This hook will allow you to get the current queue. This probably shouldn't be
  * used that much.
  */
-export function useQueue<M extends Message>(): M[] {
-  return useContext(MessageQueueContext) as M[];
+export function useQueue<M extends Message>(): readonly M[] {
+  return useContext(MessageQueueContext) as readonly M[];
 }

packages/alert/src/SnackbarQueue.tsx

@@ -22,7 +22,7 @@ export type ActionEventHandler<M extends ToastMessage> = (
 
 export interface SnackbarQueueProps<M extends ToastMessage>
   extends SnackbarProps {
-  queue: M[];
+  queue: readonly M[];
   onActionClick?: ActionEventHandler<M>;
 }
 

packages/alert/src/useMessageQueue.ts

@@ -75,10 +75,10 @@ export type MessageActions<M extends Message = ToastMessage> =
  * @internal
  */
 export function handleAddMessage<M extends Message = ToastMessage>(
-  state: M[],
+  state: readonly M[],
   message: M,
   duplicates: DuplicateBehavior
-): M[] {
+): readonly M[] {
   if (state.length === 0) {
     return [message];
   }
@@ -132,17 +132,17 @@ export function handleAddMessage<M extends Message = ToastMessage>(
 }
 
 type MessageQueueReducer<M extends Message = ToastMessage> = Reducer<
-  M[],
+  readonly M[],
   MessageActions<M>
 >;
 
 /**
  * @internal
  */
 export function reducer<M extends Message = ToastMessage>(
-  state: M[],
+  state: readonly M[],
   action: MessageActions<M>
-): M[] {
+): readonly M[] {
   switch (action.type) {
     case ADD_MESSAGE:
       return handleAddMessage(state, action.message, action.duplicates);
@@ -158,12 +158,12 @@ export function reducer<M extends Message = ToastMessage>(
 export interface MessageQueueOptions<M extends Message = ToastMessage> {
   timeout?: number;
   duplicates?: DuplicateBehavior;
-  defaultQueue?: M[];
+  defaultQueue?: readonly M[];
 }
 
 export interface MessageQueueResult<M extends Message = ToastMessage>
   extends MessageQueueActions<M> {
-  queue: M[];
+  queue: readonly M[];
   visible: boolean;
   addMessage: AddMessage<M>;
 }

packages/autocomplete/src/AutoComplete.tsx

@@ -27,7 +27,7 @@ const DEFAULT_FILTER_OPTIONS = {
   ignoreWhitespace: true,
 };
 
-const EMPTY_LIST: string[] = [];
+const EMPTY_LIST: readonly string[] = [];
 
 /**
  * An AutoComplete is an accessible combobox widget that allows for real-time

packages/dev-utils/src/indexer/types.ts

@@ -92,7 +92,7 @@ export interface RouteNavItem {
   href: string;
   children: string;
   leftAddon?: ReactNode;
-  routes?: NavItem[];
+  routes?: readonly NavItem[];
 }
 
 export interface DividerNavItem {

packages/dialog/src/NestedDialogContext.tsx

@@ -10,7 +10,7 @@ import React, {
 } from "react";
 
 interface NestedDialogContext {
-  stack: string[];
+  stack: readonly string[];
   add: (dialogId: string) => void;
   remove: (dialogId: string) => void;
 }
@@ -47,7 +47,7 @@ export interface NestedDialogContextProviderProps {
 export function NestedDialogContextProvider({
   children,
 }: NestedDialogContextProviderProps): ReactElement {
-  const [stack, setStack] = useState<string[]>([]);
+  const [stack, setStack] = useState<readonly string[]>([]);
   const add = useCallback((dialogId: string) => {
     setStack((prevStack) => {
       /* istanbul ignore next */

packages/documentation/src/constants/navItems.tsx

@@ -27,7 +27,7 @@ import { snakeCase } from "lodash";
 const uuid = createIdGenerator("nav");
 const TSDOCS_PREFIX = "/tsdocs/modules/_react_md_";
 
-const getPackageRoutes = (name: string): RouteNavItem[] => {
+const getPackageRoutes = (name: string): readonly RouteNavItem[] => {
   const routes: RouteNavItem[] = [];
 
   if (name === "form") {
@@ -76,7 +76,7 @@ const getPackageRoutes = (name: string): RouteNavItem[] => {
   return routes;
 };
 
-const routes: NavItem[] = [
+const routes: readonly NavItem[] = [
   {
     href: "/",
     children: "Home",

packages/expansion-panel/src/usePanels.ts

@@ -46,7 +46,7 @@ export interface UsePanelsOptions {
    * When this is omitted and `undefined`, no panels will be expanded by
    * default.
    */
-  defaultExpandedIndex?: number | number[];
+  defaultExpandedIndex?: number | readonly number[];
 }
 
 /**
@@ -91,13 +91,13 @@ export interface ProvidedPanelProps {
   onExpandClick(): void;
 }
 
-type ExpandedIds = string[];
+type ExpandedIds = readonly string[];
 type CreateExpandById = (panelId: string) => () => void;
 type ExpansionDispatcher = Dispatch<SetStateAction<ExpandedIds>>;
 type ExpansionPanelKeyDownHandler = KeyboardEventHandler<HTMLDivElement>;
 
 type ReturnValue = [
-  ProvidedPanelProps[],
+  readonly ProvidedPanelProps[],
   ExpansionPanelKeyDownHandler,
   ExpandedIds,
   ExpansionDispatcher,
@@ -109,7 +109,7 @@ type PanelMemo = Pick<ProvidedPanelProps, "id" | "headerRef">;
 /**
  * @internal
  */
-const attemptFocus = (index: number, panels: PanelMemo[]): void => {
+const attemptFocus = (index: number, panels: readonly PanelMemo[]): void => {
   const panel = panels[index]?.headerRef.current;
   if (panel) {
     panel.focus();
@@ -217,7 +217,7 @@ export function usePanels({
     }
   }
 
-  const panels = useMemo<PanelMemo[]>(
+  const panels = useMemo<readonly PanelMemo[]>(
     () =>
       Array.from({ length: count }, (_, i) => ({
         id: `${idPrefix}-${i + 1}`,

packages/form/README.md

@@ -104,7 +104,7 @@ const App = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [rememberMe, setRememberMe] = useChecked(false);
-  const [errors, setErrors] = useState<string[]>([]);
+  const [errors, setErrors] = useState<readonly string[]>([]);
 
   const handleSubmit = async () => {
     const response = await fetch("/login", {

packages/form/src/file-input/useFileUpload.ts

@@ -39,7 +39,7 @@ export interface FileUploadState<CustomError = never> {
    * Each key in this object is the {@link BaseFileUploadStats.key} generated
    * once the upload starts pending.
    */
-  stats: Record<string, FileUploadStats>;
+  stats: Readonly<Record<string, Readonly<FileUploadStats>>>;
 
   /**
    * A list of validation errors that have occurred before starting the upload
@@ -66,7 +66,7 @@ export interface FileUploadHookState<CustomError = never>
    *
    * Note: Once an upload has completed, the reader will be removed.
    */
-  readers: Record<string, FileReader>;
+  readers: Readonly<Record<string, FileReader>>;
 }
 
 /**
@@ -155,7 +155,7 @@ export interface FileUploadHookReturnValue<
    *
    * @see {@link getSplitFileUploads} for separating by status
    */
-  stats: readonly FileUploadStats[];
+  stats: readonly Readonly<FileUploadStats>[];
 
   /**
    * The total number of bytes for all the files that exist in the
@@ -218,9 +218,8 @@ export function useFileUpload<E extends HTMLElement, CustomError = never>({
   onChange: propOnChange,
   validateFiles = defaultValidateFiles,
   getFileParser = defaultGetFileParser,
-}: FileUploadOptions<E, CustomError> = {}): FileUploadHookReturnValue<
-  E,
-  CustomError
+}: FileUploadOptions<E, CustomError> = {}): Readonly<
+  FileUploadHookReturnValue<E, CustomError>
 > {
   const [state, dispatch] = useReducer(
     function reducer(

packages/form/src/select/Listbox.tsx

@@ -62,7 +62,7 @@ export interface ListboxOptions extends RenderConditionalPortalProps {
   /**
    * The list of options to display within the listbox.
    */
-  options: ListboxOption[];
+  options: readonly ListboxOption[];
 
   /**
    * A key to use that extracts the display label for an option from the options

packages/form/src/select/NativeSelect.tsx

@@ -79,7 +79,7 @@ export interface NativeSelectProps
    *
    * If the `multiple` prop is enabled, this **must** be a list of strings.
    */
-  value?: string | string[];
+  value?: string | readonly string[];
 
   /**
    * The default value for the text field which will make it uncontrolled. If
@@ -89,7 +89,7 @@ export interface NativeSelectProps
    *
    * If the `multiple` prop is enabled, this **must** be a list of strings.
    */
-  defaultValue?: string | string[];
+  defaultValue?: string | readonly string[];
 }
 
 const block = bem("rmd-native-select");

packages/form/src/text-field/TextField.tsx

@@ -117,7 +117,7 @@ export interface TextFieldProps
 
 const block = bem("rmd-text-field");
 
-const SPECIAL_TYPES: SupportedInputTypes[] = [
+const SPECIAL_TYPES: readonly SupportedInputTypes[] = [
   "date",
   "time",
   "datetime-local",

packages/form/src/toggle/Radio.tsx

@@ -7,7 +7,7 @@ export interface RadioProps extends InputToggleProps {
   /**
    * A value is required for a radio button unlike a checkbox.
    */
-  value: string[] | string | number;
+  value: readonly string[] | string | number;
 }
 
 /**

packages/form/src/useChoice.ts

@@ -5,8 +5,8 @@ type ChangeEventHandler<E extends InputElement> = React.ChangeEventHandler<E>;
 type DefaultValue =
   | string
   | number
-  | string[]
-  | (() => string | number | string[]);
+  | readonly string[]
+  | (() => string | number | readonly string[]);
 type SetValue<T extends DefaultValue> = Dispatch<SetStateAction<T>>;
 
 /**
@@ -26,7 +26,7 @@ export function useChoice<
 >(
   defaultValue: T,
   onChange?: ChangeEventHandler<E>
-): [T, ChangeEventHandler<E>, SetValue<T>] {
+): readonly [T, ChangeEventHandler<E>, SetValue<T>] {
   const [value, setValue] = useState<T>(defaultValue);
   const handleChange = useCallback<ChangeEventHandler<E>>(
     (event) => {

packages/form/src/useFieldStates.ts

@@ -29,8 +29,8 @@ interface EventHandlers<E extends FormElement> {
  * @remarks \@since 2.5.2
  */
 interface FieldStatesOptions<E extends FormElement> extends EventHandlers<E> {
-  value?: string | string[];
-  defaultValue?: string | string[];
+  value?: string | readonly string[];
+  defaultValue?: string | readonly string[];
 }
 
 /**

packages/form/src/useIndeterminateChecked.ts

@@ -240,7 +240,7 @@ export function useIndeterminateChecked<V extends string>(
  * }
  *
  *
- * const [data, setData] = useState<ServerFetchedData[]>([]);
+ * const [data, setData] = useState<readonly ServerFetchedData[]>([]);
  * const { getProps, rootProps, setCheckedValues } = useIndeterminateChecked(
  *   data.map(({ id }) => id),
  * );
@@ -252,7 +252,7 @@ export function useIndeterminateChecked<V extends string>(
  *     const json = await response.json();
  *     if (!cancelled) {
  *       // pretend validation and sanity checks
- *       setData(json as ServerFetchedData[]);
+ *       setData(json);
  *       setCheckedValues(json[0].id);
  *     }
  *   })();

packages/layout/src/useLayoutNavigation.ts

@@ -36,7 +36,8 @@ export interface LayoutNavigationState<
 const getParentIds = (
   itemId: TreeItemId,
   navItems: TreeData<BaseTreeItem>
-): TreeItemId[] => getItemsFrom(navItems, itemId).map(({ itemId }) => itemId);
+): readonly TreeItemId[] =>
+  getItemsFrom(navItems, itemId).map(({ itemId }) => itemId);
 
 /**
  * This is used to disable the item select and multi item select functionality

packages/material-icons/scripts/create.ts

@@ -69,7 +69,7 @@ async function parseSVGFileAndCreateComponents(
   ]);
 }
 
-async function createIndexFile(components: string[]): Promise<void> {
+async function createIndexFile(components: readonly string[]): Promise<void> {
   const contents = `// This is a generated file from running the "createIcons" script. This file should not be updated manually.
 ${components.reduce(
   (s, c) => `${s ? `${s}\n` : ""}export * from "./${c}";`,

packages/menu/src/DropdownMenu.tsx

@@ -59,7 +59,7 @@ export interface BaseDropdownMenuProps
    * A list of menu items to render. Each item will be passed to the
    * `menuItemRenderer` function.
    */
-  items: ValidMenuItem[];
+  items: readonly ValidMenuItem[];
 
   /**
    * A function to call for each `item` in the `items` list to render a

packages/menu/src/defaultMenuRenderer.tsx

@@ -54,7 +54,7 @@ export type InjectedMenuProps = LabelRequiredForA11y<AllInjectedMenuProps>;
  */
 export type MenuRenderer = (
   props: InjectedMenuProps,
-  items: ValidMenuItem[]
+  items: readonly ValidMenuItem[]
 ) => ReactNode;
 
 /**

packages/states/src/ripples/types.ts

@@ -24,7 +24,7 @@ export interface RippleState {
   exiting: boolean;
   entered: boolean;
 }
-export type RipplesState = RippleState[];
+export type RipplesState = readonly RippleState[];
 
 export type MergableRippleHandlerNames =
   | "onKeyDown"

packages/tabs/src/TabsManager.tsx

@@ -45,7 +45,7 @@ export interface TabsManagerContext {
   /**
    * The list of tabs that should be controlled by the tabs manager.
    */
-  tabs: InitializedTabConfig[];
+  tabs: readonly InitializedTabConfig[];
 }
 
 export type InitializedTabsManagerContext = Required<TabsManagerContext>;

packages/tabs/src/useTabsMovement.ts

@@ -26,7 +26,7 @@ interface Options {
 }
 
 interface ReturnValue {
-  tabs: ReactNode[];
+  tabs: readonly ReactNode[];
   itemRefs: ItemRefList;
   handleClick: MouseEventHandler<HTMLDivElement>;
   handleKeyDown: KeyboardEventHandler<HTMLDivElement>;

packages/tree/src/types.ts

@@ -86,7 +86,9 @@ export type TreeData<T extends BaseTreeItem> = Record<TreeItemId, T>;
  * - `[c1, c2, c3]`
  * - `[a, b, c]`
  */
-export type TreeItemSorter<T extends BaseTreeItem> = (items: T[]) => T[];
+export type TreeItemSorter<T extends BaseTreeItem> = (
+  items: readonly T[]
+) => readonly T[];
 
 /**
  * A render function that allows you to add additional functionality to or