Add ability to customize className applied on hover over cells and release version patch

Author: radubrehar

examples/src/pages/tests/table/props/group-by/grouping-toolbar-vertical.page.tsx

@@ -57,7 +57,7 @@ const columns: InfiniteTablePropColumns<Developer> = {
 };
 
 const dataSource: DataSourceData<Developer> = ({}) => {
-  return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers10k-sql`)
+  return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers100`)
     .then((r) => r.json())
     .then((data: Developer[]) => data);
 };
@@ -84,6 +84,9 @@ export default function App() {
             position: 'relative',
           },
         }}
+        groupColumn={{
+          field: 'id',
+        }}
         columns={columns}
         columnDefaultWidth={200}
         columnDefaultGroupable

examples/src/pages/tests/table/props/group-by/grouping-toolbar-vertical.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@testing';
+
+export default test.describe.parallel('InfiniteTable.Body', () => {
+  test('should properly render the body', async ({
+    page,
+
+    rowModel,
+  }) => {
+    await page.waitForInfinite();
+
+    expect(
+      await rowModel.getTextForCell({
+        rowIndex: 0,
+        colId: 'group-by',
+      }),
+    ).toBe('India');
+
+    expect(
+      await rowModel.getTextForCell({
+        rowIndex: 1,
+        colId: 'group-by',
+      }),
+    ).toBe('backend');
+
+    expect(
+      await rowModel.getTextForCell({
+        rowIndex: 2,
+        colId: 'group-by',
+      }),
+    ).toBe('0');
+  });
+});

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

@@ -8,10 +8,8 @@ import { RowDetailRecipe } from './components/rowDetail.css';
 import {
   boxSizingBorderBox,
   display,
-  flex,
   flexFlow,
   position,
-  transformTranslateZero,
 } from './utilities.css';
 
 export const InfiniteCls = style([
@@ -36,12 +34,6 @@ export const InfiniteCls = style([
   },
 ]);
 
-export const InfiniteBodyCls = style([
-  position.relative,
-  flex['1'],
-  transformTranslateZero,
-]);
-
 export const InfiniteClsScrolling = style(
   {
     vars: {

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { join } from '../../../../utils/join';
+import { InfiniteBodyCls } from './body.css';
+import { InfiniteTableBodyClassName } from './bodyClassName';
+
+const BodyClassName = join(InfiniteBodyCls, InfiniteTableBodyClassName);
+
+export function InfiniteTableBodyContainer(
+  props: React.HTMLAttributes<HTMLDivElement>,
+) {
+  return (
+    <div
+      {...props}
+      className={
+        props.className ? join(BodyClassName, props.className) : BodyClassName
+      }
+    />
+  );
+}

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

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

source/src/components/InfiniteTable/components/InfiniteTableBody/body.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+import { flex, position, transformTranslateZero } from '../../utilities.css';
+
+export const InfiniteBodyCls = style([
+  position.relative,
+  flex['1'],
+  transformTranslateZero,
+]);

…omponents/InfiniteTable/bodyClassName.ts …nents/InfiniteTableBody/bodyClassName.tssource/src/components/InfiniteTable/bodyClassName.ts renamed to source/src/components/InfiniteTable/components/InfiniteTableBody/bodyClassName.ts source/src/components/InfiniteTable/bodyClassName.ts renamed to source/src/components/InfiniteTable/components/InfiniteTableBody/bodyClassName.ts

@@ -1,4 +1,4 @@
-import { rootClassName } from './internalProps';
+import { rootClassName } from '../../internalProps';
 
 export const InfiniteTableBodyClassName = `${rootClassName}Body`;
 

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

@@ -0,0 +1,183 @@
+import * as React from 'react';
+import {
+  useDataSourceContextValue,
+  useMasterDetailContext,
+} from '../../../DataSource/publicHooks/useDataSourceState';
+import { HeadlessTable } from '../../../HeadlessTable';
+import { useCellRendering } from '../../hooks/useCellRendering';
+import { useInfiniteTable } from '../../hooks/useInfiniteTable';
+import { useToggleWrapRowsHorizontally } from '../../hooks/useToggleWrapRowsHorizontally';
+import {
+  CellContextMenuLocationWithEvent,
+  ContextMenuLocationWithEvent,
+} from '../../types/InfiniteTableState';
+import { InfiniteTableColumnCellClassName } from '../InfiniteTableRow/InfiniteTableColumnCellClassNames';
+import { RowHoverCls } from '../InfiniteTableRow/row.css';
+import { InfiniteTableBodyContainer } from './InfiniteTableBodyContainer';
+import { InfiniteTableBodyProps } from './InfiniteTableBodyProps';
+import { selectParentUntil } from '../../../../utils/selectParent';
+import { getCellSelector } from '../../state/getInitialState';
+import { LoadMask } from '../LoadMask';
+import { useMemo } from 'react';
+
+const _HOVERED_CLASS_NAMES = [
+  RowHoverCls,
+  `${InfiniteTableColumnCellClassName}--hovered`,
+];
+
+function InfiniteTableBody<T>(props: InfiniteTableBodyProps<T>) {
+  const context = useInfiniteTable<T>();
+
+  const masterContext = useMasterDetailContext();
+  const { state: componentState, getComputed, api } = context;
+  const {
+    renderer,
+    onRenderUpdater,
+    debugId,
+    keyboardNavigation,
+    activeRowIndex,
+    loadingText,
+    scrollStopDelay,
+    brain,
+    scrollerDOMRef,
+    components,
+    bodySize,
+    activeCellIndex,
+    rowDetailRenderer,
+    showHoverRows,
+    wrapRowsHorizontally,
+    domProps,
+    domRef,
+  } = componentState;
+
+  const LoadMaskCmp = components?.LoadMask ?? LoadMask;
+
+  const computed = getComputed();
+  const { computedRowHeight, computedRowSizeCacheForDetails } = computed;
+
+  const activeCellRowHeight =
+    computedRowSizeCacheForDetails?.getRowHeight || computedRowHeight;
+
+  const {
+    componentState: { loading },
+  } = useDataSourceContextValue<T>();
+
+  const onContextMenu = React.useCallback((event: React.MouseEvent) => {
+    const state = context.getState();
+    const target = event.target as HTMLElement;
+
+    if (!masterContext && (event as any)._from_row_detail) {
+      // originating from detail grid.
+      return;
+    }
+
+    if (masterContext) {
+      (event as any)._from_row_detail = true;
+    }
+
+    const cell = selectParentUntil(
+      target,
+      getCellSelector(),
+      state.domRef.current,
+    );
+
+    let columnId: string | undefined;
+    let colIndex: number | undefined;
+    let rowId: string | undefined;
+    let rowIndex: number | undefined;
+
+    if (cell) {
+      colIndex = Number(cell.dataset.colIndex);
+      rowIndex = Number(cell.dataset.rowIndex);
+
+      columnId = context.getComputed().computedVisibleColumns[colIndex].id;
+      rowId = context.dataSourceApi.getRowInfoArray()[rowIndex].id;
+    }
+
+    const param: ContextMenuLocationWithEvent = {
+      columnId,
+      colIndex,
+      rowId,
+      rowIndex,
+      event,
+      target: cell ?? (event.target as HTMLElement),
+    };
+
+    if (cell) {
+      state.cellContextMenu(param as CellContextMenuLocationWithEvent);
+    }
+    state.contextMenu(param);
+  }, []);
+
+  const { renderCell, renderDetailRow } = useCellRendering({
+    imperativeApi: api,
+    getComputed,
+    domRef,
+
+    bodySize,
+    computed,
+  });
+
+  const { autoFocus, tabIndex } = domProps ?? {};
+
+  useToggleWrapRowsHorizontally();
+
+  const hoverClassNames = useMemo(() => {
+    if (!showHoverRows) {
+      return undefined;
+    }
+
+    if (props.rowHoverClassName) {
+      return Array.isArray(props.rowHoverClassName)
+        ? [...InfiniteTableBody.rowHoverClassNames, ...props.rowHoverClassName]
+        : [...InfiniteTableBody.rowHoverClassNames, props.rowHoverClassName];
+    }
+
+    return InfiniteTableBody.rowHoverClassNames;
+  }, [
+    showHoverRows,
+    props.rowHoverClassName,
+    InfiniteTableBody.rowHoverClassNames,
+  ]);
+
+  return (
+    <InfiniteTableBodyContainer onContextMenu={onContextMenu}>
+      <HeadlessTable
+        forceRerenderTimestamp={componentState.forceBodyRerenderTimestamp}
+        debugId={debugId}
+        tabIndex={tabIndex ?? 0}
+        autoFocus={autoFocus ?? undefined}
+        activeRowIndex={
+          componentState.ready && keyboardNavigation === 'row'
+            ? activeRowIndex
+            : null
+        }
+        activeCellIndex={
+          componentState.ready &&
+          keyboardNavigation === 'cell' &&
+          // we want to hide the active cell indicator while column reodering is happening
+          !componentState.columnReorderDragColumnId
+            ? activeCellIndex
+            : null
+        }
+        scrollStopDelay={scrollStopDelay}
+        renderer={renderer}
+        wrapRowsHorizontally={wrapRowsHorizontally}
+        onRenderUpdater={onRenderUpdater}
+        brain={brain}
+        activeCellRowHeight={activeCellRowHeight}
+        renderCell={renderCell}
+        renderDetailRow={rowDetailRenderer ? renderDetailRow : undefined}
+        cellHoverClassNames={hoverClassNames}
+        scrollerDOMRef={scrollerDOMRef}
+        scrollVarHostRef={domRef}
+      ></HeadlessTable>
+
+      <LoadMaskCmp visible={loading}>{loadingText}</LoadMaskCmp>
+    </InfiniteTableBodyContainer>
+  );
+}
+
+InfiniteTableBody.rowHoverClassNames = _HOVERED_CLASS_NAMES;
+
+export { InfiniteTableBody };

source/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx

@@ -5,7 +5,6 @@ import {
   InfiniteTableRowInfoDataDiscriminator,
   InfiniteTable_Tree_RowInfoBase,
 } from '../../../../utils/groupAndPivot';
-// const once = (fn: Function) => fn;
 
 import { join } from '../../../../utils/join';
 
@@ -14,7 +13,6 @@ import { useDataSourceContextValue } from '../../../DataSource/publicHooks/useDa
 
 import { useCellClassName } from '../../hooks/useCellClassName';
 import { useInfiniteTable } from '../../hooks/useInfiniteTable';
-import { internalProps } from '../../internalProps';
 import { InternalVars } from '../../internalVars.css';
 import { InfiniteColumnEditorContextType } from '../../types';
 
@@ -55,8 +53,7 @@ import {
 } from './InfiniteTableCellTypes';
 import { InfiniteTableColumnEditor } from './InfiniteTableColumnEditor';
 import { TreeColumnCellExpanderCls } from './row.css';
-
-const { rootClassName } = internalProps;
+import { InfiniteTableColumnCellClassName } from './InfiniteTableColumnCellClassNames';
 
 const columnZIndexAtIndex = stripVar(InternalVars.columnZIndexAtIndex);
 const columnVisibilityAtIndex = stripVar(InternalVars.columnVisibilityAtIndex);
@@ -79,8 +76,6 @@ export const InfiniteTableColumnCellContext = React.createContext<
   InfiniteTableColumnCellContextType<any>
 >(null as any as InfiniteTableColumnCellContextType<any>);
 
-export const InfiniteTableColumnCellClassName = `${rootClassName}ColumnCell`;
-
 export const defaultRenderRowDetailIcon: InfiniteTableColumnRenderFunction<
   any
 > = (params) => {

source/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCellClassNames.tsx

@@ -0,0 +1,5 @@
+import { internalProps } from '../../internalProps';
+
+const { rootClassName } = internalProps;
+
+export const InfiniteTableColumnCellClassName = `${rootClassName}ColumnCell`;