feat(data-table): dispatch on:click:header--select event (#1453)

* feat(data-table): dispatch `on:click:header--select` event * Run "yarn build:docs"
carbon-design-system · Aug 17, 2022 · f794cb5 · f794cb5
1 parent e2a9000
commit f794cb5
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 0 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -1004,6 +1004,7 @@ export interface DataTableCell {
 | click                | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code>                    |
 | click:header--expand | dispatched | <code>{ expanded: boolean; }</code>                                                                     |
 | click:header         | dispatched | <code>{ header: DataTableHeader; sortDirection?: "ascending" &#124; "descending" &#124; "none" }</code> |
+| click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code>                                             |
 | click:row            | dispatched | <code>DataTableRow</code>                                                                               |
 | mouseenter:row       | dispatched | <code>DataTableRow</code>                                                                               |
 | mouseleave:row       | dispatched | <code>DataTableRow</code>                                                                               |

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -2647,6 +2647,11 @@
           "name": "click:header",
           "detail": "{ header: DataTableHeader; sortDirection?: \"ascending\" | \"descending\" | \"none\" }"
         },
+        {
+          "type": "dispatched",
+          "name": "click:header--select",
+          "detail": "{ indeterminate: boolean; selected: boolean; }"
+        },
         { "type": "dispatched", "name": "click:row", "detail": "DataTableRow" },
         {
           "type": "dispatched",

diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
@@ -14,6 +14,7 @@
    * @event {{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }} click
    * @event {{ expanded: boolean; }} click:header--expand
    * @event {{ header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }} click:header
+   * @event {{ indeterminate: boolean; selected: boolean; }} click:header--select
    * @event {DataTableRow} click:row
    * @event {DataTableRow} mouseenter:row
    * @event {DataTableRow} mouseleave:row
@@ -316,6 +317,11 @@
               checked="{selectAll}"
               indeterminate="{indeterminate}"
               on:change="{(e) => {
+                dispatch('click:header--select', {
+                  indeterminate,
+                  selected: !indeterminate && e.target.checked,
+                });
+
                 if (indeterminate) {
                   e.target.checked = false;
                   selectAll = false;

diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts
@@ -191,6 +191,10 @@ export default class DataTable extends SvelteComponentTyped<
       header: DataTableHeader;
       sortDirection?: "ascending" | "descending" | "none";
     }>;
+    ["click:header--select"]: CustomEvent<{
+      indeterminate: boolean;
+      selected: boolean;
+    }>;
     ["click:row"]: CustomEvent<DataTableRow>;
     ["mouseenter:row"]: CustomEvent<DataTableRow>;
     ["mouseleave:row"]: CustomEvent<DataTableRow>;