breaking(types): type arrays as read-only (#1335)

Closes #1259

* breaking(types): type arrays as read-only

* Run "yarn build:docs"

* test: assert read-only arrays

tests/ContextMenu.test.svelte

@@ -9,13 +9,16 @@
   import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
   import Cut from "carbon-icons-svelte/lib/Cut.svelte";
 
+  let ref: HTMLElement;
   let selectedId = "0";
   let selectedIds = [];
 
   $: console.log("selectedId", selectedId);
 </script>
 
-<ContextMenu open on:open="{(e) => console.log(e.detail)}">
+<div bind:this="{ref}"></div>
+
+<ContextMenu target="{null}" open on:open="{(e) => console.log(e.detail)}">
   <ContextMenuOption
     kind="danger"
     indented
@@ -42,7 +45,7 @@
   </ContextMenuGroup>
 </ContextMenu>
 
-<ContextMenu on:open on:close>
+<ContextMenu target="{[null, ref]}" on:open on:close>
   <ContextMenuOption indented labelText="Open" />
   <ContextMenuDivider />
   <ContextMenuRadioGroup bind:selectedId labelText="Radio group">

tests/Dropdown.test.svelte

@@ -1,16 +1,41 @@
 <script lang="ts">
   import { Dropdown, DropdownSkeleton } from "../types";
+  import type { DropdownProps } from "../types/Dropdown/Dropdown.svelte";
+
+  let items: DropdownProps["items"] = [
+    { id: 0, text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ] as const;
+
+  let itemsWithoutConst = [...items];
+
+  type FieldId = typeof items[number]["id"]; // 'foo' | 'bar' | 'baz'
+
+  export const fieldId: FieldId = "bar";
+
+  // @ts-expect-error
+  $: items[0] = { id: "0", text: "Slack" };
+  $: {
+    // @ts-expect-error
+    items[0] = { id: "0", text: "Slack" };
+  }
+  $: {
+    items = [...items, { id: "3", text: "Email" }];
+    items = items.map((item, index) => {
+      if (index === 0) {
+        return { id: "0", text: "Slack" };
+      }
+      return item;
+    });
+  }
 </script>
 
 <Dropdown
   direction="top"
   titleText="Contact"
   selectedId="0"
-  items="{[
-    { id: 0, text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax', disabled: true },
-  ]}"
+  items="{items}"
   on:select="{(e) => {
     console.log(e.detail.selectedId);
   }}"
@@ -31,11 +56,7 @@
   }}"
   titleText="Contact"
   selectedId="0"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items="{itemsWithoutConst}"
 />
 
 <Dropdown

tests/FileUploader.test.svelte

@@ -6,8 +6,15 @@
     FileUploaderItem,
     FileUploaderSkeleton,
   } from "../types";
+  import type { FileUploaderProps } from "../types/FileUploader/FileUploader.svelte";
 
   let fileUploader: FileUploader;
+  let files: FileUploaderProps["files"] = [];
+
+  $: {
+    // @ts-expect-error
+    files[0] = null;
+  }
 
   $: fileUploader?.clearFiles();
 </script>
@@ -27,6 +34,7 @@
   labelDescription="Only JPEG files are accepted."
   accept="{['.jpg', '.jpeg']}"
   status="complete"
+  bind:files
   on:add="{(e) => {
     console.log(e.detail); // File[]
   }}"

tests/MultiSelect.test.svelte

@@ -1,5 +1,13 @@
 <script lang="ts">
   import { MultiSelect } from "../types";
+  import type { MultiSelectProps } from "../types/MultiSelect/MultiSelect.svelte";
+
+  let selectedIds: MultiSelectProps["selectedIds"] = [0];
+
+  $: {
+    // @ts-expect-error
+    selectedIds[0] = [0];
+  }
 </script>
 
 <MultiSelect
@@ -7,6 +15,7 @@
   titleText="Contact"
   label="Select contact methods..."
   hideLabel
+  bind:selectedIds
   items="{[
     { id: 0, text: 'Slack' },
     { id: '1', text: 'Email' },