fix(data-table): expandable rows should work with zebra styles (#1200)

Fixes #1199

docs/src/pages/components/DataTable.svx

@@ -1139,6 +1139,10 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
 
 <FileSource src="/framed/DataTable/DataTableNonExpandableRows" />
 
+### Expandable (zebra styles)
+
+<FileSource src="/framed/DataTable/DataTableExpandableZebra" />
+
 ### Expandable (compact size)
 
 <DataTable size="compact" expandable

docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte

@@ -0,0 +1,65 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+</script>
+
+<DataTable
+  zebra
+  expandable
+  nonExpandableRowIds="{['a', 'd']}"
+  headers="{[
+    { key: 'name', value: 'Name' },
+    { key: 'protocol', value: 'Protocol' },
+    { key: 'port', value: 'Port' },
+    { key: 'rule', value: 'Rule' },
+  ]}"
+  rows="{[
+    {
+      id: 'a',
+      name: 'Load Balancer 3',
+      protocol: 'HTTP',
+      port: 3000,
+      rule: 'Round robin',
+    },
+    {
+      id: 'b',
+      name: 'Load Balancer 1',
+      protocol: 'HTTP',
+      port: 443,
+      rule: 'Round robin',
+    },
+    {
+      id: 'c',
+      name: 'Load Balancer 2',
+      protocol: 'HTTP',
+      port: 80,
+      rule: 'DNS delegation',
+    },
+    {
+      id: 'd',
+      name: 'Load Balancer 6',
+      protocol: 'HTTP',
+      port: 3000,
+      rule: 'Round robin',
+    },
+    {
+      id: 'e',
+      name: 'Load Balancer 4',
+      protocol: 'HTTP',
+      port: 443,
+      rule: 'Round robin',
+    },
+    {
+      id: 'f',
+      name: 'Load Balancer 5',
+      protocol: 'HTTP',
+      port: 80,
+      rule: 'DNS delegation',
+    },
+  ]}"
+>
+  <svelte:fragment slot="expanded-row" let:row>
+    <pre>
+      {JSON.stringify(row, null, 2)}
+    </pre>
+  </svelte:fragment>
+</DataTable>

src/DataTable/DataTable.svelte

@@ -356,6 +356,7 @@
       {#each sorting ? displayedSortedRows : displayedRows as row, i (row.id)}
         <TableRow
           id="row-{row.id}"
+          data-parent-row="{expandable ? true : undefined}"
           class="{selectedRowIds.includes(row.id)
             ? 'bx--data-table--selected'
             : ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable
@@ -483,14 +484,16 @@
           {/each}
         </TableRow>
 
-        {#if expandable && expandedRows[row.id] && !nonExpandableRowIds.includes(row.id)}
+        {#if expandable}
           <tr
             data-child-row
             class:bx--expandable-row="{true}"
             on:mouseenter="{() => {
+              if (nonExpandableRowIds.includes(row.id)) return;
               parentRowId = row.id;
             }}"
             on:mouseleave="{() => {
+              if (nonExpandableRowIds.includes(row.id)) return;
               parentRowId = null;
             }}"
           >