minor enhancements and release version patch

Author: radubrehar

examples/src/globals.css

@@ -1,4 +1,8 @@
-@import 'tailwindcss';
+@layer theme, base, infinite-table, components, utilities;
+
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+@import 'tailwindcss/utilities.css' layer(utilities);
 
 @import 'tw-animate-css';
 

examples/src/pages/tests/table/props/custom-components/header-cell.page.tsx

@@ -0,0 +1,143 @@
+import * as React from 'react';
+
+import {
+  InfiniteTable,
+  InfiniteTablePropColumns,
+  useInfiniteColumnCell,
+  useInfiniteHeaderCell,
+} from '@infinite-table/infinite-react';
+import { DataSource } from '@infinite-table/infinite-react';
+
+type Developer = {
+  id: number;
+
+  firstName: string;
+  lastName: string;
+
+  currency: string;
+  preferredLanguage: string;
+  stack: string;
+  canDesign: 'yes' | 'no';
+
+  age: number;
+};
+
+const data: Developer[] = [
+  {
+    id: 1,
+    firstName: 'John',
+    lastName: 'Bob',
+    age: 20,
+    canDesign: 'yes',
+    currency: 'USD',
+    preferredLanguage: 'JavaScript',
+    stack: 'frontend',
+  },
+  {
+    id: 2,
+    firstName: 'Marry',
+    lastName: 'Bob',
+    age: 25,
+    canDesign: 'yes',
+    currency: 'USD',
+    preferredLanguage: 'JavaScript',
+    stack: 'frontend',
+  },
+  {
+    id: 3,
+    firstName: 'Bill',
+    lastName: 'Bobson',
+    age: 30,
+    canDesign: 'no',
+    currency: 'CAD',
+    preferredLanguage: 'TypeScript',
+    stack: 'frontend',
+  },
+  {
+    id: 4,
+    firstName: 'Mark',
+    lastName: 'Twain',
+    age: 31,
+    canDesign: 'yes',
+    currency: 'CAD',
+    preferredLanguage: 'Rust',
+    stack: 'backend',
+  },
+  {
+    id: 5,
+    firstName: 'Matthew',
+    lastName: 'Hilson',
+    age: 29,
+    canDesign: 'yes',
+    currency: 'CAD',
+    preferredLanguage: 'Go',
+    stack: 'backend',
+  },
+];
+
+const HeaderCell = (props: React.HTMLProps<HTMLDivElement>) => {
+  const { domRef } = useInfiniteHeaderCell<Developer>();
+  return (
+    <div
+      ref={domRef}
+      {...props}
+      data-name="header-cell-firstName"
+      style={{
+        ...props.style,
+        backgroundColor: 'red',
+      }}
+    >
+      {props.children}!
+    </div>
+  );
+};
+
+const ColumnCell = (props: React.HTMLProps<HTMLDivElement>) => {
+  const { domRef } = useInfiniteColumnCell<Developer>();
+  return (
+    <div ref={domRef} {...props} data-name="column-cell-firstName">
+      {props.children}!
+    </div>
+  );
+};
+
+const columns: InfiniteTablePropColumns<Developer> = {
+  firstName: {
+    field: 'firstName',
+    components: {
+      HeaderCell,
+      ColumnCell,
+    },
+  },
+  age: {
+    field: 'age',
+    type: 'number',
+  },
+
+  stack: { field: 'stack' },
+  currency: { field: 'currency' },
+};
+
+export default () => {
+  const dataSource = React.useCallback(() => {
+    return Promise.resolve(data.slice(0, 1));
+  }, []);
+  return (
+    <>
+      <React.StrictMode>
+        <DataSource<Developer> data={dataSource} primaryKey="id">
+          <InfiniteTable<Developer>
+            columns={{
+              firstName: columns.firstName,
+            }}
+            domProps={{
+              style: {
+                minHeight: 500,
+              },
+            }}
+          />
+        </DataSource>
+      </React.StrictMode>
+    </>
+  );
+};

examples/src/pages/tests/table/props/custom-components/header-cell.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@testing';
+
+import {
+  getLocatorComputedStylePropertyValue,
+  toRGBString,
+} from '../../../testUtils';
+
+export default test.describe.parallel('Custom Header component', () => {
+  test('is correctly applied', async ({ page, headerModel }) => {
+    await page.waitForInfinite();
+
+    const locator = headerModel.getHeaderCellLocator({
+      colId: 'firstName',
+    });
+
+    const bg = await getLocatorComputedStylePropertyValue({
+      handle: locator,
+      page,
+      propertyName: 'background-color',
+    });
+    expect(toRGBString(bg)).toEqual('rgb(255, 0, 0)');
+  });
+});

source/src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBodyProps.ts

@@ -1,3 +1,3 @@
 export type InfiniteTableBodyProps<_T> = {
-  rowHoverClassName?: string | string[];
+  rowHoverClassNames?: string | string[];
 };

source/src/components/InfiniteTable/components/InfiniteTableBody/index.tsx

@@ -127,16 +127,16 @@ function InfiniteTableBody<T>(props: InfiniteTableBodyProps<T>) {
       return undefined;
     }
 
-    if (props.rowHoverClassName) {
-      return Array.isArray(props.rowHoverClassName)
-        ? [...InfiniteTableBody.rowHoverClassNames, ...props.rowHoverClassName]
-        : [...InfiniteTableBody.rowHoverClassNames, props.rowHoverClassName];
+    if (props.rowHoverClassNames) {
+      return Array.isArray(props.rowHoverClassNames)
+        ? [...InfiniteTableBody.rowHoverClassNames, ...props.rowHoverClassNames]
+        : [...InfiniteTableBody.rowHoverClassNames, props.rowHoverClassNames];
     }
 
     return InfiniteTableBody.rowHoverClassNames;
   }, [
     showHoverRows,
-    props.rowHoverClassName,
+    props.rowHoverClassNames,
     InfiniteTableBody.rowHoverClassNames,
   ]);