[base-ui] Update props using Array to ReadonlyArray type

docs/pages/base-ui/api/use-select.json

@@ -58,8 +58,8 @@
     "open": { "type": { "name": "boolean", "description": "boolean" } },
     "options": {
       "type": {
-        "name": "SelectOptionDefinition<OptionValue>[]",
-        "description": "SelectOptionDefinition<OptionValue>[]"
+        "name": "ReadonlyArray<SelectOptionDefinition<OptionValue>>",
+        "description": "ReadonlyArray<SelectOptionDefinition<OptionValue>>"
       }
     },
     "required": { "type": { "name": "boolean", "description": "boolean" } },

docs/pages/base-ui/api/use-slider.json

@@ -1,12 +1,20 @@
 {
   "parameters": {
     "aria-labelledby": { "type": { "name": "string", "description": "string" } },
-    "defaultValue": { "type": { "name": "number | number[]", "description": "number | number[]" } },
+    "defaultValue": {
+      "type": {
+        "name": "number | ReadonlyArray<number>",
+        "description": "number | ReadonlyArray<number>"
+      }
+    },
     "disabled": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
     "disableSwap": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
     "isRtl": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
     "marks": {
-      "type": { "name": "boolean | Mark[]", "description": "boolean | Mark[]" },
+      "type": {
+        "name": "boolean | ReadonlyArray<Mark>",
+        "description": "boolean | ReadonlyArray<Mark>"
+      },
       "default": "false"
     },
     "max": { "type": { "name": "number", "description": "number" }, "default": "100" },
@@ -44,7 +52,12 @@
     "shiftStep": { "type": { "name": "number", "description": "number" }, "default": "10" },
     "step": { "type": { "name": "number | null", "description": "number | null" }, "default": "1" },
     "tabIndex": { "type": { "name": "number", "description": "number" } },
-    "value": { "type": { "name": "number | number[]", "description": "number | number[]" } }
+    "value": {
+      "type": {
+        "name": "number | ReadonlyArray<number>",
+        "description": "number | ReadonlyArray<number>"
+      }
+    }
   },
   "returnValue": {
     "active": { "type": { "name": "number", "description": "number" }, "required": true },

packages/mui-base/src/FocusTrap/FocusTrap.tsx

@@ -278,7 +278,7 @@ function FocusTrap(props: FocusTrapProps): JSX.Element {
         return;
       }
 
-      let tabbable: string[] | HTMLElement[] = [];
+      let tabbable: ReadonlyArray<string> | HTMLElement[] = [];
       if (
         doc.activeElement === sentinelStart.current ||
         doc.activeElement === sentinelEnd.current

packages/mui-base/src/FocusTrap/FocusTrap.types.ts

@@ -10,7 +10,7 @@ export interface FocusTrapProps {
    * For instance, you can provide the "tabbable" npm dependency.
    * @param {HTMLElement} root
    */
-  getTabbable?: (root: HTMLElement) => string[];
+  getTabbable?: (root: HTMLElement) => ReadonlyArray<string>;
   /**
    * This prop extends the `open` prop.
    * It allows to toggle the open state without having to wait for a rerender when changing the `open` prop.

packages/mui-base/src/useSelect/useSelect.types.ts

@@ -102,7 +102,7 @@ export interface UseSelectParameters<OptionValue, Multiple extends boolean = fal
    * An alternative way to specify the options.
    * If this parameter is set, options defined as JSX children are ignored.
    */
-  options?: SelectOptionDefinition<OptionValue>[];
+  options?: ReadonlyArray<SelectOptionDefinition<OptionValue>>;
   /**
    * A function to convert the currently selected value to a string.
    * Used to set a value of a hidden input associated with the select,

packages/mui-base/src/useSlider/useSlider.ts

@@ -136,8 +136,8 @@ function focusThumb({
 }
 
 function areValuesEqual(
-  newValue: number | Array<number>,
-  oldValue: number | Array<number>,
+  newValue: number | ReadonlyArray<number>,
+  oldValue: number | ReadonlyArray<number>,
 ): boolean {
   if (typeof newValue === 'number' && typeof oldValue === 'number') {
     return newValue === oldValue;

packages/mui-base/src/useSlider/useSlider.types.ts

@@ -8,7 +8,7 @@ export interface UseSliderParameters {
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue?: number | number[];
+  defaultValue?: number | ReadonlyArray<number>;
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -30,7 +30,7 @@ export interface UseSliderParameters {
    * If an array, it should contain objects with `value` and an optional `label` keys.
    * @default false
    */
-  marks?: boolean | Mark[];
+  marks?: boolean | ReadonlyArray<Mark>;
   /**
    * The maximum allowed value of the slider.
    * Should not be equal to min.
@@ -104,7 +104,7 @@ export interface UseSliderParameters {
    * The value of the slider.
    * For ranged sliders, provide an array with two values.
    */
-  value?: number | number[];
+  value?: number | ReadonlyArray<number>;
 }
 
 export interface Mark {

packages/mui-base/src/utils/areArraysEqual.ts

@@ -1,8 +1,8 @@
 type ItemComparer<Item> = (a: Item, b: Item) => boolean;
 
 export function areArraysEqual<Item>(
-  array1: Item[],
-  array2: Item[],
+  array1: ReadonlyArray<Item>,
+  array2: ReadonlyArray<Item>,
   itemComparer: ItemComparer<Item> = (a, b) => a === b,
 ) {
   return (