fix showHoverRows when zebra rows is disabled and release version patch

examples/src/pages/tests/table/props/data/basic-no-zebra-no-hover.page.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+
+import {
+  InfiniteTable,
+  DataSource,
+  InfiniteTableColumn,
+} from '@infinite-table/infinite-react';
+import { CarSale } from '@examples/datasets/CarSale';
+
+const carsales: CarSale[] = [
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'RDX 2WD',
+    year: 2010,
+    sales: 15,
+    color: 'red',
+    id: 0,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'RDX 4WD',
+    year: 2007,
+    sales: 1,
+    color: 'red',
+    id: 1,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'RDX 4WD',
+    year: 2008,
+    sales: 2,
+    color: 'magenta',
+    id: 2,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'RDX 4WD',
+    year: 2009,
+    sales: 136,
+    color: 'blue',
+    id: 3,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'RDX 4WD',
+    year: 2010,
+    color: 'blue',
+    sales: 30,
+    id: 4,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'TSX',
+    year: 2009,
+    sales: 14,
+    color: 'yellow',
+    id: 5,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'TSX',
+    year: 2010,
+    sales: 14,
+    color: 'red',
+    id: 6,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Audi',
+    model: 'A3',
+    year: 2009,
+    sales: 2,
+    color: 'magenta',
+    id: 7,
+  },
+];
+
+(globalThis as any).carsales = carsales;
+
+const columns: Record<string, InfiniteTableColumn<CarSale>> = {
+  make: { field: 'make' },
+  model: { field: 'model' },
+
+  category: {
+    field: 'category',
+  },
+  count: {
+    field: 'sales',
+  },
+  year: {
+    field: 'year',
+    type: 'number',
+  },
+};
+
+export default function DataTestPage() {
+  return (
+    <React.StrictMode>
+      <DataSource<CarSale> data={carsales} primaryKey="id">
+        <InfiniteTable<CarSale>
+          domProps={{
+            style: {
+              margin: '5px',
+              height: 900,
+              border: '1px solid gray',
+              position: 'relative',
+            },
+          }}
+          showHoverRows={false}
+          showZebraRows={false}
+          columns={columns}
+        />
+      </DataSource>
+    </React.StrictMode>
+  );
+}

examples/src/pages/tests/table/props/data/basic-no-zebra-no-hover.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from '@testing';
+
+export default test.describe
+  .parallel('Hover rows when zebra is off and hover is off', () => {
+  test('', async ({ page, tableModel }) => {
+    await page.waitForInfinite();
+
+    const row1 = tableModel.withCell({
+      rowIndex: 0,
+      colIndex: 0,
+    });
+
+    const row2 = tableModel.withCell({
+      rowIndex: 1,
+      colIndex: 0,
+    });
+
+    const bg1row1 = await row1.getComputedStyleProperty('background-color');
+
+    await row1.getLocator().hover();
+
+    const bg2row1 = await row1.getComputedStyleProperty('background-color');
+
+    expect(bg2row1).toEqual(bg1row1);
+
+    const bg1row2 = await row2.getComputedStyleProperty('background-color');
+
+    expect(bg1row2).toEqual(bg1row1);
+  });
+});

examples/src/pages/tests/table/props/data/basic-no-zebra.page.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+
+import {
+  InfiniteTable,
+  DataSource,
+  InfiniteTableColumn,
+} from '@infinite-table/infinite-react';
+import { CarSale } from '@examples/datasets/CarSale';
+
+const carsales: CarSale[] = [
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'RDX 2WD',
+    year: 2010,
+    sales: 15,
+    color: 'red',
+    id: 0,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'RDX 4WD',
+    year: 2007,
+    sales: 1,
+    color: 'red',
+    id: 1,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'RDX 4WD',
+    year: 2008,
+    sales: 2,
+    color: 'magenta',
+    id: 2,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'RDX 4WD',
+    year: 2009,
+    sales: 136,
+    color: 'blue',
+    id: 3,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'RDX 4WD',
+    year: 2010,
+    color: 'blue',
+    sales: 30,
+    id: 4,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'TSX',
+    year: 2009,
+    sales: 14,
+    color: 'yellow',
+    id: 5,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'TSX',
+    year: 2010,
+    sales: 14,
+    color: 'red',
+    id: 6,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Audi',
+    model: 'A3',
+    year: 2009,
+    sales: 2,
+    color: 'magenta',
+    id: 7,
+  },
+];
+
+(globalThis as any).carsales = carsales;
+
+const columns: Record<string, InfiniteTableColumn<CarSale>> = {
+  make: { field: 'make' },
+  model: { field: 'model' },
+
+  category: {
+    field: 'category',
+  },
+  count: {
+    field: 'sales',
+  },
+  year: {
+    field: 'year',
+    type: 'number',
+  },
+};
+
+export default function DataTestPage() {
+  return (
+    <React.StrictMode>
+      <DataSource<CarSale> data={carsales} primaryKey="id">
+        <InfiniteTable<CarSale>
+          domProps={{
+            style: {
+              margin: '5px',
+              height: 900,
+              border: '1px solid gray',
+              position: 'relative',
+            },
+          }}
+          showHoverRows={true}
+          showZebraRows={false}
+          columns={columns}
+        />
+      </DataSource>
+    </React.StrictMode>
+  );
+}

examples/src/pages/tests/table/props/data/basic-no-zebra.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@testing';
+
+export default test.describe.parallel('Hover rows when zebra is off', () => {
+  test('', async ({ page, tableModel }) => {
+    await page.waitForInfinite();
+
+    const row1 = tableModel.withCell({
+      rowIndex: 0,
+      colIndex: 0,
+    });
+
+    const row2 = tableModel.withCell({
+      rowIndex: 1,
+      colIndex: 0,
+    });
+
+    const bg1row1 = await row1.getComputedStyleProperty('background-color');
+
+    await row1.getLocator().hover();
+
+    const bg2row1 = await row1.getComputedStyleProperty('background-color');
+
+    expect(bg2row1).not.toEqual(bg1row1);
+
+    const bg1row2 = await row2.getComputedStyleProperty('background-color');
+
+    expect(bg1row2).toEqual(bg1row1);
+  });
+});

examples/src/pages/tests/testUtils/TableTestingModel.ts

@@ -137,6 +137,11 @@ export class TableTestingModel {
           styleName,
         );
       },
+
+      getLocator: () => {
+        return this.rowModel.getCellLocator(cellLocation);
+      },
+
       getValue: async () => {
         return await this.rowModel.getTextForCell(cellLocation);
       },

source/src/components/InfiniteTable/components/cell.css.ts

@@ -210,7 +210,9 @@ export const ColumnCellRecipe = recipe({
       true: {},
     },
     zebra: {
-      false: {},
+      false: {
+        background: ThemeVars.components.Row.background,
+      },
       even: {
         background: ThemeVars.components.Row.background,
       },

source/src/components/InfiniteTable/index.tsx

@@ -172,6 +172,7 @@ function InfiniteTableBody<T>() {
     bodySize,
     activeCellIndex,
     rowDetailRenderer,
+    showHoverRows,
   } = componentState;
 
   const LoadMaskCmp = components?.LoadMask ?? LoadMask;
@@ -267,7 +268,7 @@ function InfiniteTableBody<T>() {
         activeCellRowHeight={activeCellRowHeight}
         renderCell={renderCell}
         renderDetailRow={rowDetailRenderer ? renderDetailRow : undefined}
-        cellHoverClassNames={HOVERED_CLASS_NAMES}
+        cellHoverClassNames={showHoverRows ? HOVERED_CLASS_NAMES : undefined}
         scrollerDOMRef={scrollerDOMRef}
       ></HeadlessTable>