fix(data-table): restore target and currentTarget types (#2345)

Fixes #2344

Author: metonym

COMPONENT_INDEX.md

@@ -1014,18 +1014,18 @@ export type DataTableCell<Row = DataTableRow> = {
 
 ### Events
 
-| Event name           | Type       | Detail                                                                                                        | Description |
-| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------------ | :---------- |
-| click                | dispatched | <code>{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }</code>                         | --          |
-| click:header--expand | dispatched | <code>{ expanded: boolean; }</code>                                                                           | --          |
-| click:header         | dispatched | <code>{ header: DataTableHeader<Row>; sortDirection?: "ascending" &#124; "descending" &#124; "none"; }</code> | --          |
-| click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code>                                                   | --          |
-| click:row            | dispatched | <code>{ row: Row; }</code>                                                                                    | --          |
-| mouseenter:row       | dispatched | <code>Row</code>                                                                                              | --          |
-| mouseleave:row       | dispatched | <code>Row</code>                                                                                              | --          |
-| click:row--expand    | dispatched | <code>{ expanded: boolean; row: Row; }</code>                                                                 | --          |
-| click:row--select    | dispatched | <code>{ selected: boolean; row: Row; }</code>                                                                 | --          |
-| click:cell           | dispatched | <code>{ cell: DataTableCell<Row>; }</code>                                                                    | --          |
+| Event name           | Type       | Detail                                                                                                                                                         | Description |
+| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- |
+| click                | dispatched | <code>{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }</code>                                                                          | --          |
+| click:header--expand | dispatched | <code>{ expanded: boolean; }</code>                                                                                                                            | --          |
+| click:header         | dispatched | <code>{ header: DataTableHeader<Row>; sortDirection?: "ascending" &#124; "descending" &#124; "none"; target: EventTarget; currentTarget: EventTarget; }</code> | --          |
+| click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code>                                                                                                    | --          |
+| click:row            | dispatched | <code>{ row: Row; target: EventTarget; currentTarget: EventTarget; }</code>                                                                                    | --          |
+| mouseenter:row       | dispatched | <code>Row</code>                                                                                                                                               | --          |
+| mouseleave:row       | dispatched | <code>Row</code>                                                                                                                                               | --          |
+| click:row--expand    | dispatched | <code>{ expanded: boolean; row: Row; }</code>                                                                                                                  | --          |
+| click:row--select    | dispatched | <code>{ selected: boolean; row: Row; }</code>                                                                                                                  | --          |
+| click:cell           | dispatched | <code>{ cell: DataTableCell<Row>; target: EventTarget; currentTarget: EventTarget; }</code>                                                                    | --          |
 
 ## `DataTableSkeleton`
 

docs/src/COMPONENT_API.json

@@ -3473,7 +3473,7 @@
         {
           "type": "dispatched",
           "name": "click:header",
-          "detail": "{\n  header: DataTableHeader<Row>;\n  sortDirection?:\n    | \"ascending\"\n    | \"descending\"\n    | \"none\";\n}"
+          "detail": "{\n  header: DataTableHeader<Row>;\n  sortDirection?:\n    | \"ascending\"\n    | \"descending\"\n    | \"none\";\n  target: EventTarget;\n  currentTarget: EventTarget;\n}"
         },
         {
           "type": "dispatched",
@@ -3483,7 +3483,7 @@
         {
           "type": "dispatched",
           "name": "click:row",
-          "detail": "{ row: Row }"
+          "detail": "{\n  row: Row;\n  target: EventTarget;\n  currentTarget: EventTarget;\n}"
         },
         {
           "type": "dispatched",
@@ -3508,7 +3508,7 @@
         {
           "type": "dispatched",
           "name": "click:cell",
-          "detail": "{\n  cell: DataTableCell<Row>;\n}"
+          "detail": "{\n  cell: DataTableCell<Row>;\n  target: EventTarget;\n  currentTarget: EventTarget;\n}"
         }
       ],
       "typedefs": [

src/DataTable/DataTable.svelte

@@ -42,13 +42,17 @@
    * @type {object}
    * @property {DataTableHeader<Row>} header
    * @property {"ascending" | "descending" | "none"} [sortDirection]
+   * @property {EventTarget} target
+   * @property {EventTarget} currentTarget
    * @event click:header--select
    * @type {object}
    * @property {boolean} indeterminate
    * @property {boolean} selected
    * @event click:row
    * @type {object}
    * @property {Row} row
+   * @property {EventTarget} target
+   * @property {EventTarget} currentTarget
    * @event {Row} mouseenter:row
    * @event {Row} mouseleave:row
    * @event click:row--expand
@@ -62,6 +66,8 @@
    * @event click:cell
    * @type {object}
    * @property {DataTableCell<Row>} cell
+   * @property {EventTarget} target
+   * @property {EventTarget} currentTarget
    * @restProps {div}
    */
 

tests/DataTable/DataTable.test.ts

@@ -1,4 +1,6 @@
 import { render, screen } from "@testing-library/svelte";
+import type DataTableComponent from "carbon-components-svelte/DataTable/DataTable.svelte";
+import type { ComponentEvents } from "svelte";
 import { tick } from "svelte";
 import { user } from "../setup-tests";
 import DataTable from "./DataTable.test.svelte";
@@ -1157,4 +1159,57 @@ describe("DataTable", () => {
     expect(detail).toHaveProperty("currentTarget");
     expect(detail).toHaveProperty("row");
   });
+
+  // Regression test for issue https://github.com/carbon-design-system/carbon-components-svelte/issues/2344
+  describe("TypeScript event type definitions", () => {
+    it("click:row event type includes target and currentTarget", () => {
+      type Events = ComponentEvents<DataTableComponent<(typeof rows)[number]>>;
+      type ClickRowEventType = Events["click:row"];
+      type ClickRowEvent = ClickRowEventType extends CustomEvent<infer T>
+        ? T
+        : never;
+
+      expectTypeOf<ClickRowEvent>().toHaveProperty("row");
+      expectTypeOf<ClickRowEvent>().toHaveProperty("target");
+      expectTypeOf<ClickRowEvent>().toHaveProperty("currentTarget");
+      expectTypeOf<ClickRowEvent["target"]>().toEqualTypeOf<EventTarget>();
+      expectTypeOf<
+        ClickRowEvent["currentTarget"]
+      >().toEqualTypeOf<EventTarget>();
+    });
+
+    it("click:cell event type includes target and currentTarget", () => {
+      type Events = ComponentEvents<DataTableComponent<(typeof rows)[number]>>;
+      type ClickCellEventType = Events["click:cell"];
+      type ClickCellEvent = ClickCellEventType extends CustomEvent<infer T>
+        ? T
+        : never;
+
+      expectTypeOf<ClickCellEvent>().toHaveProperty("cell");
+      expectTypeOf<ClickCellEvent>().toHaveProperty("target");
+      expectTypeOf<ClickCellEvent>().toHaveProperty("currentTarget");
+      expectTypeOf<ClickCellEvent["target"]>().toEqualTypeOf<EventTarget>();
+      expectTypeOf<
+        ClickCellEvent["currentTarget"]
+      >().toEqualTypeOf<EventTarget>();
+    });
+
+    it("click:header event type includes target and currentTarget", () => {
+      type Events = ComponentEvents<DataTableComponent<(typeof rows)[number]>>;
+      type ClickHeaderEventType = Events["click:header"];
+      type ClickHeaderEvent = ClickHeaderEventType extends CustomEvent<infer T>
+        ? T
+        : never;
+
+      expectTypeOf<ClickHeaderEvent>().toHaveProperty("header");
+      expectTypeOf<ClickHeaderEvent>().toHaveProperty("target");
+      expectTypeOf<ClickHeaderEvent>().toHaveProperty("currentTarget");
+      expectTypeOf<ClickHeaderEvent["target"]>().toEqualTypeOf<EventTarget>();
+      expectTypeOf<
+        ClickHeaderEvent["currentTarget"]
+      >().toEqualTypeOf<EventTarget>();
+
+      expectTypeOf<ClickHeaderEvent>().toHaveProperty("sortDirection");
+    });
+  });
 });

types/DataTable/DataTable.svelte.d.ts

@@ -221,17 +221,27 @@ export default class DataTable<
     "click:header": CustomEvent<{
       header: DataTableHeader<Row>;
       sortDirection?: "ascending" | "descending" | "none";
+      target: EventTarget;
+      currentTarget: EventTarget;
     }>;
     "click:header--select": CustomEvent<{
       indeterminate: boolean;
       selected: boolean;
     }>;
-    "click:row": CustomEvent<{ row: Row }>;
+    "click:row": CustomEvent<{
+      row: Row;
+      target: EventTarget;
+      currentTarget: EventTarget;
+    }>;
     "mouseenter:row": CustomEvent<Row>;
     "mouseleave:row": CustomEvent<Row>;
     "click:row--expand": CustomEvent<{ expanded: boolean; row: Row }>;
     "click:row--select": CustomEvent<{ selected: boolean; row: Row }>;
-    "click:cell": CustomEvent<{ cell: DataTableCell<Row> }>;
+    "click:cell": CustomEvent<{
+      cell: DataTableCell<Row>;
+      target: EventTarget;
+      currentTarget: EventTarget;
+    }>;
   },
   {
     cell: {