From f68fb08722a34e1d8ebb085a867e6eed9dc11ec2 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Tue, 3 Oct 2023 11:07:10 -0700
Subject: [PATCH] fix(radio): strongly type dispatched change/select events

---
 COMPONENT_INDEX.md                            | 20 +++++++++----------
 docs/src/COMPONENT_API.json                   |  8 +++++---
 src/RadioButtonGroup/RadioButtonGroup.svelte  |  4 ++++
 src/Tile/TileGroup.svelte                     |  4 ++++
 tests/RadioButton.test.svelte                 |  8 +++++++-
 tests/RadioTile.test.svelte                   |  7 ++++++-
 .../RadioButtonGroup.svelte.d.ts              |  2 +-
 types/Tile/TileGroup.svelte.d.ts              |  2 +-
 8 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 46ab0b7826..65dc8c5e37 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2983,13 +2983,13 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail |
-| :--------- | :--------- | :----- |
-| click      | forwarded  | --     |
-| mouseover  | forwarded  | --     |
-| mouseenter | forwarded  | --     |
-| mouseleave | forwarded  | --     |
-| change     | dispatched | --     |
+| Event name | Type       | Detail              |
+| :--------- | :--------- | :------------------ |
+| change     | dispatched | <code>string</code> |
+| click      | forwarded  | --                  |
+| mouseover  | forwarded  | --                  |
+| mouseenter | forwarded  | --                  |
+| mouseleave | forwarded  | --                  |
 
 ## `RadioButtonSkeleton`
 
@@ -4248,9 +4248,9 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
 
 ### Events
 
-| Event name | Type       | Detail |
-| :--------- | :--------- | :----- |
-| select     | dispatched | --     |
+| Event name | Type       | Detail              |
+| :--------- | :--------- | :------------------ |
+| select     | dispatched | <code>string</code> |
 
 ## `TimePicker`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index a2407cbb71..d040209cec 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -9615,11 +9615,11 @@
         }
       ],
       "events": [
+        { "type": "dispatched", "name": "change", "detail": "string" },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
-        { "type": "forwarded", "name": "mouseleave", "element": "div" },
-        { "type": "dispatched", "name": "change" }
+        { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
@@ -13125,7 +13125,9 @@
       ],
       "moduleExports": [],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
-      "events": [{ "type": "dispatched", "name": "select" }],
+      "events": [
+        { "type": "dispatched", "name": "select", "detail": "string" }
+      ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "fieldset" }
     },
diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte
index 7ae8a4552a..d78d893029 100644
--- a/src/RadioButtonGroup/RadioButtonGroup.svelte
+++ b/src/RadioButtonGroup/RadioButtonGroup.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {string} change
+   */
+
   /**
    * Set the selected radio button value
    * @type {string}
diff --git a/src/Tile/TileGroup.svelte b/src/Tile/TileGroup.svelte
index ada2fc648f..0a625e34b4 100644
--- a/src/Tile/TileGroup.svelte
+++ b/src/Tile/TileGroup.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {string} select
+   */
+
   /**
    * Specify the selected tile value
    * @type {string}
diff --git a/tests/RadioButton.test.svelte b/tests/RadioButton.test.svelte
index 7060aad1f5..d93d342a4a 100644
--- a/tests/RadioButton.test.svelte
+++ b/tests/RadioButton.test.svelte
@@ -2,7 +2,13 @@
   import { RadioButton, RadioButtonSkeleton, RadioButtonGroup } from "../types";
 </script>
 
-<RadioButtonGroup legendText="Storage tier (disk)" selected="standard">
+<RadioButtonGroup
+  legendText="Storage tier (disk)"
+  selected="standard"
+  on:change="{(e) => {
+    console.log(e.detail); // string
+  }}"
+>
   <RadioButton labelText="Free (1 GB)" value="free" />
   <RadioButton labelText="Standard (10 GB)" value="standard" />
   <RadioButton labelText="Pro (128 GB)" value="pro" />
diff --git a/tests/RadioTile.test.svelte b/tests/RadioTile.test.svelte
index d22a7b65e2..a010ec7d1a 100644
--- a/tests/RadioTile.test.svelte
+++ b/tests/RadioTile.test.svelte
@@ -2,7 +2,12 @@
   import { TileGroup, RadioTile } from "../types";
 </script>
 
-<TileGroup legend="Service pricing tiers">
+<TileGroup
+  legend="Service pricing tiers"
+  on:select="{(e) => {
+    console.log(e.detail); // string
+  }}"
+>
   <RadioTile value="0" checked>Lite plan</RadioTile>
   <RadioTile value="1">Standard plan</RadioTile>
   <RadioTile value="2">Plus plan</RadioTile>
diff --git a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
index 0e259fde43..25bbeb92bc 100644
--- a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
+++ b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
@@ -64,11 +64,11 @@ export interface RadioButtonGroupProps extends RestProps {
 export default class RadioButtonGroup extends SvelteComponentTyped<
   RadioButtonGroupProps,
   {
+    change: CustomEvent<string>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
-    change: CustomEvent<any>;
   },
   { default: {}; legendText: {} }
 > {}
diff --git a/types/Tile/TileGroup.svelte.d.ts b/types/Tile/TileGroup.svelte.d.ts
index 66c1da47f5..c4ebaed2ec 100644
--- a/types/Tile/TileGroup.svelte.d.ts
+++ b/types/Tile/TileGroup.svelte.d.ts
@@ -27,6 +27,6 @@ export interface TileGroupProps extends RestProps {
 
 export default class TileGroup extends SvelteComponentTyped<
   TileGroupProps,
-  { select: CustomEvent<any> },
+  { select: CustomEvent<string> },
   { default: {} }
 > {}