fix(types): improve e.detail type for dispatched events (#1907)

* fix(types): improve `e.detail` type for dispatched events * Run "yarn build:docs" * test: assert new types
carbon-design-system · Feb 1, 2024 · 6590457 · 6590457
1 parent f1cafd4
commit 6590457
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 35 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -2151,9 +2151,9 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail |
-| :--------- | :--------- | :----- |
-| clear      | dispatched | --     |
+| Event name | Type       | Detail                                       |
+| :--------- | :--------- | :------------------------------------------- |
+| clear      | dispatched | <code>KeyboardEvent &#124; MouseEvent</code> |
 
 ## `ListItem`
 
@@ -3530,13 +3530,13 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail |
-| :--------- | :--------- | :----- |
-| click      | forwarded  | --     |
-| mouseover  | forwarded  | --     |
-| mouseenter | forwarded  | --     |
-| mouseleave | forwarded  | --     |
-| change     | dispatched | --     |
+| Event name | Type       | Detail              |
+| :--------- | :--------- | :------------------ |
+| change     | dispatched | <code>number</code> |
+| click      | forwarded  | --                  |
+| mouseover  | forwarded  | --                  |
+| mouseenter | forwarded  | --                  |
+| mouseleave | forwarded  | --                  |
 
 ## `SliderSkeleton`
 
@@ -3578,13 +3578,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  | --                  |
 
 ## `StructuredListBody`
 
@@ -3966,11 +3966,11 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail |
-| :--------- | :--------- | :----- |
-| keypress   | forwarded  | --     |
-| click      | forwarded  | --     |
-| change     | dispatched | --     |
+| Event name | Type       | Detail              |
+| :--------- | :--------- | :------------------ |
+| change     | dispatched | <code>number</code> |
+| keypress   | forwarded  | --                  |
+| click      | forwarded  | --                  |
 
 ## `TabsSkeleton`
 

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -6294,7 +6294,13 @@
       ],
       "moduleExports": [],
       "slots": [],
-      "events": [{ "type": "dispatched", "name": "clear" }],
+      "events": [
+        {
+          "type": "dispatched",
+          "name": "clear",
+          "detail": "KeyboardEvent | MouseEvent"
+        }
+      ],
       "typedefs": [
         {
           "type": "\"clearAll\" | \"clearSelection\"",
@@ -11354,11 +11360,11 @@
         }
       ],
       "events": [
+        { "type": "dispatched", "name": "change", "detail": "number" },
         { "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" }
@@ -11446,11 +11452,11 @@
       "moduleExports": [],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "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" }
@@ -12245,9 +12251,9 @@
         { "name": "content", "default": false, "slot_props": "{}" }
       ],
       "events": [
+        { "type": "dispatched", "name": "change", "detail": "number" },
         { "type": "forwarded", "name": "keypress", "element": "div" },
-        { "type": "forwarded", "name": "click", "element": "a" },
-        { "type": "dispatched", "name": "change" }
+        { "type": "forwarded", "name": "click", "element": "a" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }

diff --git a/src/ListBox/ListBoxSelection.svelte b/src/ListBox/ListBoxSelection.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {KeyboardEvent | MouseEvent} clear
+   */
+
   /**
    * @typedef {"clearAll" | "clearSelection"} ListBoxSelectionTranslationId
    */

diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {number} change
+   */
+
   /** Specify the value of the slider */
   export let value = 0;
 

diff --git a/src/StructuredList/StructuredList.svelte b/src/StructuredList/StructuredList.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {string} change
+   */
+
   /**
    * Specify the selected structured list row value
    * @type {string}

diff --git a/src/Tabs/Tabs.svelte b/src/Tabs/Tabs.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {number} change
+   */
+
   /** Specify the selected tab index */
   export let selected = 0;
 

diff --git a/tests/Slider.test.svelte b/tests/Slider.test.svelte
@@ -11,6 +11,9 @@
   maxLabel="990 MB"
   value="{100}"
   fullWidth
+  on:change="{(e) => {
+    console.log(e.detail); // number
+  }}"
 />
 
 <Slider

diff --git a/tests/StructuredList.test.svelte b/tests/StructuredList.test.svelte
@@ -11,7 +11,13 @@
   import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
 </script>
 
-<StructuredList>
+<StructuredList
+  selection
+  selected="row-1-value"
+  on:change="{(e) => {
+    console.log(e.detail); // string
+  }}"
+>
   <StructuredListHead>
     <StructuredListRow head>
       <StructuredListCell head>Column A</StructuredListCell>

diff --git a/tests/Tabs.test.svelte b/tests/Tabs.test.svelte
@@ -2,7 +2,11 @@
   import { Tabs, Tab, TabContent, TabsSkeleton } from "../types";
 </script>
 
-<Tabs>
+<Tabs
+  on:change="{(e) => {
+    console.log(e.detail); // number
+  }}"
+>
   <Tab label="Tab label 1" />
   <Tab label="Tab label 2" />
   <Tab label="Tab label 3" />

diff --git a/types/ListBox/ListBoxSelection.svelte.d.ts b/types/ListBox/ListBoxSelection.svelte.d.ts
@@ -35,7 +35,7 @@ export interface ListBoxSelectionProps extends RestProps {
 
 export default class ListBoxSelection extends SvelteComponentTyped<
   ListBoxSelectionProps,
-  { clear: CustomEvent<any> },
+  { clear: CustomEvent<KeyboardEvent | MouseEvent> },
   {}
 > {
   /**

diff --git a/types/Slider/Slider.svelte.d.ts b/types/Slider/Slider.svelte.d.ts
@@ -126,11 +126,11 @@ export interface SliderProps extends RestProps {
 export default class Slider extends SvelteComponentTyped<
   SliderProps,
   {
+    change: CustomEvent<number>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
-    change: CustomEvent<any>;
   },
   { labelText: {} }
 > {}
diff --git a/types/StructuredList/StructuredList.svelte.d.ts b/types/StructuredList/StructuredList.svelte.d.ts
@@ -34,11 +34,11 @@ export interface StructuredListProps extends RestProps {
 export default class StructuredList extends SvelteComponentTyped<
   StructuredListProps,
   {
+    change: CustomEvent<string>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
-    change: CustomEvent<any>;
   },
   { default: {} }
 > {}
diff --git a/types/Tabs/Tabs.svelte.d.ts b/types/Tabs/Tabs.svelte.d.ts
@@ -40,9 +40,9 @@ export interface TabsProps extends RestProps {
 export default class Tabs extends SvelteComponentTyped<
   TabsProps,
   {
+    change: CustomEvent<number>;
     keypress: WindowEventMap["keypress"];
     click: WindowEventMap["click"];
-    change: CustomEvent<any>;
   },
   { default: {}; content: {} }
 > {}