@infinite-table/infinite-react 0.4.13 → 0.5.1

package/src/components/InfiniteTable/hooks/useComputed.ts

@@ -0,0 +1,186 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { useDataSourceContextValue } from '../../DataSource/publicHooks/useDataSource';
+import type { DataSourceSingleSortInfo } from '../../DataSource/types';
+import { useComponentState } from '../../hooks/useComponentState';
+import type { InfiniteTableState, InfiniteTableComputedValues } from '../types';
+import { MultiRowSelector } from '../utils/MultiRowSelector';
+
+import { useColumnGroups } from './useColumnGroups';
+import { useColumnRowspan } from './useColumnRowspan';
+import { useColumnSizeFn } from './useColumnSizeFn';
+import { useColumnsWhen } from './useColumnsWhen';
+import { useComputedVisibleColumns } from './useComputedVisibleColumns';
+import { useScrollbars } from './useScrollbars';
+
+export function useComputed<T>(): InfiniteTableComputedValues<T> {
+  const { componentActions, componentState } =
+    useComponentState<InfiniteTableState<T>>();
+
+  const {
+    componentActions: dataSourceActions,
+    componentState: dataSourceState,
+    getState: getDataSourceState,
+  } = useDataSourceContextValue<T>();
+
+  const {
+    columnOrder,
+    columnVisibility,
+    columnPinning,
+    columnSizing,
+    columnTypes,
+    brain,
+    bodySize,
+    showSeparatePivotColumnForSingleAggregation,
+  } = componentState;
+
+  useState(() => {
+    componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
+      if (rowHeight) {
+        componentActions.rowHeight = rowHeight;
+      }
+    });
+    componentState.onColumnHeaderHeightCSSVarChange.onChange(
+      (columnHeaderHeight) => {
+        if (columnHeaderHeight) {
+          componentActions.columnHeaderHeight = columnHeaderHeight;
+        }
+      },
+    );
+  });
+
+  useEffect(() => {
+    dataSourceActions.showSeparatePivotColumnForSingleAggregation =
+      showSeparatePivotColumnForSingleAggregation;
+  }, [showSeparatePivotColumnForSingleAggregation]);
+
+  const { multiSort, filterValue } = dataSourceState;
+
+  useColumnGroups<T>();
+
+  const { toggleGroupRow } = useColumnsWhen<T>();
+
+  const setSortInfo = useCallback(
+    (sortInfo: DataSourceSingleSortInfo<T>[]) => {
+      const newSortInfo = getDataSourceState().multiSort
+        ? sortInfo
+        : sortInfo[0] ?? null;
+      //@ts-ignore
+      dataSourceActions.sortInfo = newSortInfo;
+    },
+    [getDataSourceState],
+  );
+
+  const columns = componentState.computedColumns;
+
+  const {
+    computedColumnOrder,
+    computedVisibleColumns,
+    computedVisibleColumnsMap,
+    computedPinnedStartColumns,
+    computedPinnedEndColumns,
+    computedUnpinnedColumns,
+    computedPinnedStartColumnsWidth,
+    computedPinnedEndColumnsWidth,
+    computedUnpinnedColumnsWidth,
+    computedUnpinnedOffset,
+    computedPinnedEndOffset,
+    computedRemainingSpace,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth,
+    renderSelectionCheckBox,
+    computedColumnsMap,
+    computedColumnsMapInInitialOrder,
+    fieldsToColumn,
+  } = useComputedVisibleColumns({
+    columns,
+    // scrollbarWidth: scrollbars.vertical ? getScrollbarWidth() : 0,
+
+    // #scrollbarverticaltag
+    // we use the default scrollbar width - using it dynamically causes issues
+    // since we can have a scenario where there is no vertical scrollbar and a horizontal resize
+    // can cause a horizontal scrollbar which in turn causes a vertical scrollbar and the scenario
+    // can loop so it's safer for now to always reserve space for the scrollbar
+    scrollbarWidth: undefined,
+    columnCssEllipsis: componentState.columnCssEllipsis,
+    columnHeaderCssEllipsis: componentState.columnHeaderCssEllipsis,
+    columnMinWidth: componentState.columnMinWidth,
+    columnMaxWidth: componentState.columnMaxWidth,
+    columnDefaultWidth: componentState.columnDefaultWidth,
+    pinnedStartMaxWidth: componentState.pinnedStartMaxWidth,
+    pinnedEndMaxWidth: componentState.pinnedEndMaxWidth,
+    bodySize,
+
+    viewportReservedWidth: componentState.viewportReservedWidth,
+    resizableColumns: componentState.resizableColumns,
+
+    sortable: componentState.sortable,
+    draggableColumns: componentState.draggableColumns,
+    sortInfo: dataSourceState.sortInfo ?? undefined,
+    multiSort,
+    setSortInfo,
+
+    columnOrder,
+
+    columnVisibility,
+    columnVisibilityAssumeVisible: true,
+
+    columnPinning,
+    filterValue,
+
+    columnSizing,
+    columnTypes,
+  });
+
+  // console.log(computedVisibleColumns);
+
+  const rowspan = useColumnRowspan(computedVisibleColumns);
+  const columnSize = useColumnSizeFn<T>(computedVisibleColumns);
+  const scrollbars = useScrollbars<T>(brain);
+
+  const computedPinnedStartOverflow = computedPinnedStartWidth
+    ? computedPinnedStartColumnsWidth > computedPinnedStartWidth
+    : false;
+  const computedPinnedEndOverflow = computedPinnedEndWidth
+    ? computedPinnedEndColumnsWidth > computedPinnedEndWidth
+    : false;
+
+  const [multiRowSelector] = useState(() => {
+    const multiRowSelector = new MultiRowSelector({
+      getIdForIndex: (index: number) =>
+        getDataSourceState().dataArray[index].id,
+    });
+
+    return multiRowSelector;
+  });
+
+  return {
+    multiRowSelector,
+    showColumnFilters: !!dataSourceState.filterValue,
+    scrollbars,
+    columnSize,
+    rowspan,
+    toggleGroupRow,
+    computedColumnsMap,
+    computedColumnsMapInInitialOrder,
+    renderSelectionCheckBox,
+    computedPinnedStartOverflow,
+    computedPinnedEndOverflow,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth,
+    computedVisibleColumns,
+    computedColumnOrder,
+    computedRemainingSpace,
+    computedVisibleColumnsMap,
+    // computedColumnVisibility: columnVisibility,
+    computedPinnedStartColumns,
+    computedPinnedEndColumns,
+    computedUnpinnedColumns,
+    computedPinnedStartColumnsWidth,
+    computedPinnedEndColumnsWidth,
+    computedUnpinnedColumnsWidth,
+    computedUnpinnedOffset,
+    computedPinnedEndOffset,
+    fieldsToColumn,
+  };
+}

package/src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts

@@ -0,0 +1,219 @@
+import { useMemo } from 'react';
+
+import type {
+  DataSourcePropFilterValue,
+  DataSourceSingleSortInfo,
+} from '../../DataSource/types';
+import type { Size } from '../../types/Size';
+import type { InfiniteTableColumn } from '../types';
+import type {
+  InfiniteTablePropColumnOrder,
+  InfiniteTablePropColumnPinning,
+  InfiniteTablePropColumnSizing,
+  InfiniteTablePropColumnTypes,
+  InfiniteTablePropColumnVisibility,
+} from '../types/InfiniteTableProps';
+import type { GetComputedVisibleColumnsResult } from '../utils/getComputedVisibleColumns';
+import { getComputedVisibleColumns } from '../utils/getComputedVisibleColumns';
+
+import { useRerenderOnKeyChange } from './useRerenderOnKeyChange';
+
+type UseComputedVisibleColumnsParam<T> = {
+  columns: Map<string, InfiniteTableColumn<T>>;
+
+  bodySize: Size;
+  columnMinWidth?: number;
+  columnMaxWidth?: number;
+  columnCssEllipsis: boolean;
+  columnHeaderCssEllipsis: boolean;
+  viewportReservedWidth?: number;
+
+  resizableColumns: boolean | undefined;
+  scrollbarWidth: number | undefined;
+
+  pinnedEndMaxWidth?: number;
+  pinnedStartMaxWidth?: number;
+
+  columnDefaultWidth?: number;
+  sortable?: boolean;
+  draggableColumns?: boolean;
+  multiSort: boolean;
+  sortInfo?: DataSourceSingleSortInfo<T>[];
+  setSortInfo: (sortInfo: DataSourceSingleSortInfo<T>[]) => void;
+
+  filterValue?: DataSourcePropFilterValue<T>;
+
+  columnPinning: InfiniteTablePropColumnPinning;
+  columnSizing: InfiniteTablePropColumnSizing;
+  columnTypes: InfiniteTablePropColumnTypes<T>;
+  columnOrder: InfiniteTablePropColumnOrder;
+  columnVisibility: InfiniteTablePropColumnVisibility;
+  columnVisibilityAssumeVisible?: boolean;
+};
+
+type UseComputedVisibleColumnsResult<T> = {
+  renderSelectionCheckBox: boolean;
+  columns: UseComputedVisibleColumnsParam<T>['columns'];
+  fieldsToColumn: GetComputedVisibleColumnsResult<T>['fieldsToColumn'];
+
+  computedColumnsMap: GetComputedVisibleColumnsResult<T>['computedColumnsMap'];
+  computedColumnsMapInInitialOrder: GetComputedVisibleColumnsResult<T>['computedColumnsMapInInitialOrder'];
+  computedRemainingSpace: GetComputedVisibleColumnsResult<T>['computedRemainingSpace'];
+  computedUnpinnedOffset: GetComputedVisibleColumnsResult<T>['computedUnpinnedOffset'];
+  computedPinnedEndOffset: GetComputedVisibleColumnsResult<T>['computedPinnedEndOffset'];
+
+  computedPinnedStartColumnsWidth: GetComputedVisibleColumnsResult<T>['computedPinnedStartColumnsWidth'];
+  computedPinnedEndColumnsWidth: GetComputedVisibleColumnsResult<T>['computedPinnedEndColumnsWidth'];
+  computedUnpinnedColumnsWidth: GetComputedVisibleColumnsResult<T>['computedUnpinnedColumnsWidth'];
+
+  computedPinnedStartColumns: GetComputedVisibleColumnsResult<T>['computedPinnedStartColumns'];
+  computedPinnedEndColumns: GetComputedVisibleColumnsResult<T>['computedPinnedEndColumns'];
+  computedUnpinnedColumns: GetComputedVisibleColumnsResult<T>['computedUnpinnedColumns'];
+
+  computedVisibleColumns: GetComputedVisibleColumnsResult<T>['computedVisibleColumns'];
+  computedVisibleColumnsMap: GetComputedVisibleColumnsResult<T>['computedVisibleColumnsMap'];
+  computedPinnedEndWidth: GetComputedVisibleColumnsResult<T>['computedPinnedEndWidth'];
+  computedPinnedStartWidth: GetComputedVisibleColumnsResult<T>['computedPinnedStartWidth'];
+
+  computedColumnOrder: GetComputedVisibleColumnsResult<T>['computedColumnOrder'];
+};
+
+export const useComputedVisibleColumns = <T extends unknown>({
+  columns,
+  bodySize,
+  columnMinWidth,
+  columnMaxWidth,
+  columnDefaultWidth,
+  sortable,
+  columnCssEllipsis,
+  columnHeaderCssEllipsis,
+  draggableColumns,
+  sortInfo,
+  multiSort,
+  setSortInfo,
+  filterValue,
+  columnOrder,
+  columnPinning,
+  scrollbarWidth,
+  columnTypes,
+  pinnedEndMaxWidth,
+  pinnedStartMaxWidth,
+  viewportReservedWidth,
+  resizableColumns,
+  columnVisibility,
+  columnVisibilityAssumeVisible,
+  columnSizing,
+}: UseComputedVisibleColumnsParam<T>): UseComputedVisibleColumnsResult<T> => {
+  const columnsRenderId = useRerenderOnKeyChange(columns);
+
+  const {
+    computedRemainingSpace,
+    computedColumnOrder,
+    computedVisibleColumns,
+    computedVisibleColumnsMap,
+    computedPinnedStartColumns,
+    computedPinnedEndColumns,
+    computedUnpinnedColumns,
+    computedPinnedStartColumnsWidth,
+    computedPinnedEndColumnsWidth,
+    computedUnpinnedColumnsWidth,
+    computedUnpinnedOffset,
+    computedPinnedEndOffset,
+    computedPinnedEndWidth,
+    computedPinnedStartWidth,
+    renderSelectionCheckBox,
+    computedColumnsMap,
+    computedColumnsMapInInitialOrder,
+    fieldsToColumn,
+  } = useMemo(() => {
+    return getComputedVisibleColumns({
+      columns,
+      scrollbarWidth,
+
+      bodySize,
+      columnMinWidth,
+      columnMaxWidth,
+      columnDefaultWidth,
+      columnCssEllipsis,
+      columnHeaderCssEllipsis,
+      viewportReservedWidth,
+      resizableColumns,
+
+      filterValue,
+
+      sortable,
+      sortInfo,
+      setSortInfo,
+      multiSort,
+      pinnedEndMaxWidth,
+      pinnedStartMaxWidth,
+
+      draggableColumns,
+      columnOrder,
+
+      columnPinning,
+
+      columnSizing,
+      columnTypes,
+
+      columnVisibility,
+      columnVisibilityAssumeVisible: columnVisibilityAssumeVisible ?? true,
+    });
+  }, [
+    columns,
+
+    bodySize.width,
+    columnMinWidth,
+    columnMaxWidth,
+    columnDefaultWidth,
+
+    viewportReservedWidth,
+    scrollbarWidth,
+
+    sortable,
+    sortInfo,
+    setSortInfo,
+    multiSort,
+
+    filterValue,
+
+    columnOrder,
+    columnVisibility,
+    columnVisibilityAssumeVisible,
+    resizableColumns,
+
+    pinnedEndMaxWidth,
+    pinnedStartMaxWidth,
+
+    columnSizing,
+    columnTypes,
+
+    columnPinning,
+
+    columnsRenderId,
+  ]);
+
+  const result: UseComputedVisibleColumnsResult<T> = {
+    renderSelectionCheckBox,
+    columns,
+    computedColumnsMap,
+    computedPinnedEndWidth,
+    computedPinnedStartWidth,
+    computedRemainingSpace,
+    computedUnpinnedOffset,
+    computedPinnedEndOffset,
+    computedPinnedStartColumnsWidth,
+    computedPinnedEndColumnsWidth,
+    computedUnpinnedColumnsWidth,
+    computedPinnedStartColumns,
+    computedPinnedEndColumns,
+    computedUnpinnedColumns,
+    computedVisibleColumns,
+    computedVisibleColumnsMap,
+    computedColumnOrder,
+    computedColumnsMapInInitialOrder,
+    fieldsToColumn,
+  };
+
+  return result;
+};

package/src/components/InfiniteTable/hooks/useDOMProps.ts

@@ -0,0 +1,306 @@
+import { CSSProperties, FocusEvent } from 'react';
+import { InfiniteTableClassName } from '..';
+import { join } from '../../../utils/join';
+import { stripVar } from '../../../utils/stripVar';
+import { getScrollbarWidth } from '../../utils/getScrollbarWidth';
+import {
+  InfiniteCls,
+  InfiniteClsHasPinnedEnd,
+  InfiniteClsHasPinnedStart,
+  InfiniteClsRecipe,
+} from '../InfiniteCls.css';
+import { InternalVars } from '../theme.css';
+import { InfiniteTableComputedColumn } from '../types';
+import {
+  getCSSVarNameForColOffset,
+  getCSSVarNameForColWidth,
+} from '../utils/infiniteDOMUtils';
+import { rafFn } from '../utils/rafFn';
+import { useInfiniteTable } from './useInfiniteTable';
+
+const scrollbarWidthHorizontal = stripVar(
+  InternalVars.scrollbarWidthHorizontal,
+);
+const scrollbarWidthVertical = stripVar(InternalVars.scrollbarWidthVertical);
+
+const columnWidthAtIndex = stripVar(InternalVars.columnWidthAtIndex);
+const columnOffsetAtIndex = stripVar(InternalVars.columnOffsetAtIndex);
+const columnZIndexAtIndex = stripVar(InternalVars.columnZIndexAtIndex);
+const scrollLeftCSSVar = stripVar(InternalVars.scrollLeft);
+// const columnReorderEffectDurationAtIndex = stripVar(
+//   InternalVars.columnReorderEffectDurationAtIndex,
+// );
+const activeCellColWidth = stripVar(InternalVars.activeCellColWidth);
+const activeCellColOffset = stripVar(InternalVars.activeCellColOffset);
+const baseZIndexForCells = stripVar(InternalVars.baseZIndexForCells);
+
+const pinnedStartWidthCSSVar = stripVar(InternalVars.pinnedStartWidth);
+
+const bodyWidthCSSVar = stripVar(InternalVars.bodyWidth);
+const bodyHeightCSSVar = stripVar(InternalVars.bodyHeight);
+const pinnedEndOffsetCSSVar = stripVar(InternalVars.pinnedEndOffset);
+
+const pinnedEndWidthCSSVar = stripVar(InternalVars.pinnedEndWidth);
+
+const computedVisibleColumnsCountCSSVar = stripVar(
+  InternalVars.computedVisibleColumnsCount,
+);
+
+export function getColumnZIndex<T>(
+  col: InfiniteTableComputedColumn<T>,
+  params: { pinnedStartColsCount: number; visibleColsCount: number },
+) {
+  let computedZIndex: number | 'auto' = 'auto';
+
+  const index = col.computedVisibleIndex;
+
+  if (col.computedPinned) {
+    if (col.computedPinned === 'start') {
+      computedZIndex =
+        params.pinnedStartColsCount - col.computedVisibleIndexInCategory;
+    } else if (col.computedPinned === 'end') {
+      computedZIndex =
+        params.visibleColsCount + col.computedVisibleIndexInCategory;
+    }
+  } else {
+    computedZIndex = -index * 10;
+  }
+
+  const zIndexValue =
+    typeof computedZIndex === 'number'
+      ? `calc( var(${baseZIndexForCells}) ` +
+        (computedZIndex < 0 ? '-' : '+') +
+        ` ${Math.abs(computedZIndex)} )`
+      : 'auto';
+
+  return zIndexValue;
+}
+
+export function useDOMProps<T>(
+  initialDOMProps?: React.HTMLProps<HTMLDivElement>,
+) {
+  const scrollbarWidth = getScrollbarWidth();
+
+  const { computed, componentState, componentActions } = useInfiniteTable<T>();
+  const {
+    focused,
+    focusedWithin,
+    domRef,
+    onBlurWithin,
+    onFocusWithin,
+    onSelfFocus,
+    onSelfBlur,
+    bodySize,
+    activeCellIndex,
+  } = componentState;
+  const {
+    computedPinnedStartColumnsWidth,
+    computedPinnedEndColumnsWidth,
+    computedPinnedStartColumns,
+    computedPinnedEndColumns,
+    computedVisibleColumns,
+    scrollbars,
+  } = computed;
+
+  const prevPinnedEndCols: InfiniteTableComputedColumn<T>[] = [];
+  const cssVars: CSSProperties = computedVisibleColumns.reduce(
+    (vars: CSSProperties, col) => {
+      const index = col.computedVisibleIndex;
+
+      //@ts-ignore
+      vars[`${columnWidthAtIndex}-${index}`] = col.computedWidth + 'px';
+
+      //@ts-ignore
+      vars[`${columnOffsetAtIndex}-${index}`] =
+        col.computedPinned === 'start'
+          ? `calc( ${col.computedOffset}px + var(${scrollLeftCSSVar}) )`
+          : col.computedPinned === 'end'
+          ? // see #startcoloffsets-pinnedend
+            `calc( var(${pinnedEndOffsetCSSVar}) ${
+              prevPinnedEndCols.length ? '+' : ''
+            } ${prevPinnedEndCols
+              .map(
+                (c) => `var(${columnWidthAtIndex}-${c.computedVisibleIndex})`,
+              )
+              .join(' + ')} + var(${scrollLeftCSSVar}) )`
+          : `${col.computedOffset}px`;
+
+      const zIndexValue = getColumnZIndex(col, {
+        pinnedStartColsCount: computedPinnedStartColumns.length,
+        visibleColsCount: computedVisibleColumns.length,
+      });
+
+      //@ts-ignore
+      vars[`${columnZIndexAtIndex}-${index}`] = `${zIndexValue}`;
+      //@ts-ignore
+      // vars[`${columnReorderEffectDurationAtIndex}-${index}`] = '0s';
+
+      if (col.computedPinned === 'end') {
+        prevPinnedEndCols.push(col);
+      }
+      return vars;
+    },
+    {},
+  );
+
+  if (activeCellIndex != null) {
+    //@ts-ignore
+    cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(
+      activeCellIndex[1],
+    )})`;
+    //@ts-ignore
+    cssVars[activeCellColOffset] = `var(${getCSSVarNameForColOffset(
+      activeCellIndex[1],
+    )})`;
+  }
+
+  //@ts-ignore
+  cssVars[computedVisibleColumnsCountCSSVar] = computedVisibleColumns.length;
+
+  //@ts-ignore
+  cssVars[scrollbarWidthHorizontal] = scrollbars.horizontal
+    ? `${scrollbarWidth}px`
+    : '0px';
+  //@ts-ignore
+  cssVars[scrollbarWidthVertical] = scrollbars.vertical
+    ? `${scrollbarWidth}px`
+    : '0px';
+  //@ts-ignore
+  cssVars[pinnedStartWidthCSSVar] =
+    `calc( ` +
+    computedPinnedStartColumns
+      .map((c) => `var(${getCSSVarNameForColWidth(c.computedVisibleIndex)})`)
+      .join(' + ') +
+    ')';
+
+  //@ts-ignore
+  cssVars[pinnedEndWidthCSSVar] =
+    `calc( ` +
+    computedPinnedEndColumns
+      .map((c) => `var(${getCSSVarNameForColWidth(c.computedVisibleIndex)})`)
+      .join(' + ') +
+    ')';
+  //@ts-ignore
+  cssVars[baseZIndexForCells] = computedVisibleColumns.length * 10;
+
+  //@ts-ignore
+  cssVars[
+    pinnedEndOffsetCSSVar
+  ] = `calc( var(${bodyWidthCSSVar}) - var(${pinnedEndWidthCSSVar}) - var(${scrollbarWidthVertical}) )`;
+
+  //@ts-ignore
+  cssVars[bodyWidthCSSVar] = `${bodySize.width}px`;
+
+  //@ts-ignore
+  cssVars[bodyHeightCSSVar] = `${bodySize.height}px`;
+
+  const setFocused = rafFn((focused: boolean) => {
+    componentActions.focused = focused;
+  });
+  const setFocusedWithin = rafFn((focused: boolean) => {
+    componentActions.focusedWithin = focused;
+  });
+
+  const onFocus = (event: FocusEvent<HTMLDivElement>) => {
+    initialDOMProps?.onFocus?.(event);
+
+    if (event.target === domRef.current) {
+      setFocused(true);
+      onSelfFocus?.(event);
+
+      if (focusedWithin) {
+        setFocusedWithin(false);
+        onBlurWithin?.(event);
+      }
+    } else {
+      if (!focusedWithin) {
+        setFocusedWithin(true);
+        onFocusWithin?.(event);
+      }
+    }
+  };
+
+  const onBlur = (event: FocusEvent<HTMLDivElement>) => {
+    initialDOMProps?.onBlur?.(event);
+
+    if (event.target === domRef.current) {
+      setFocused(false);
+      onSelfBlur?.(event);
+
+      if (focusedWithin) {
+        setFocusedWithin(false);
+        onBlurWithin?.(event);
+      }
+    } else {
+      const contained = domRef.current?.contains((event as any).relatedTarget);
+
+      if (!contained) {
+        setFocusedWithin(false);
+        onBlurWithin?.(event);
+      }
+    }
+  };
+
+  const domProps = {
+    tabIndex: 0,
+    ...initialDOMProps,
+    onFocus,
+    onBlur,
+  };
+
+  const className = join(
+    InfiniteTableClassName,
+    InfiniteCls,
+
+    domProps?.className,
+    computedPinnedStartColumnsWidth
+      ? `${InfiniteTableClassName}--has-pinned-start ${InfiniteClsHasPinnedStart}`
+      : null,
+    computedPinnedEndColumnsWidth
+      ? `${InfiniteTableClassName}--has-pinned-end  ${InfiniteClsHasPinnedEnd}`
+      : null,
+    focused ? `${InfiniteTableClassName}--focused` : null,
+    focusedWithin ? `${InfiniteTableClassName}--focused-within` : null,
+
+    focused && componentState.focusedClassName
+      ? componentState.focusedClassName
+      : null,
+    focusedWithin && componentState.focusedWithinClassName
+      ? componentState.focusedWithinClassName
+      : null,
+    computed.computedPinnedStartOverflow
+      ? `${InfiniteTableClassName}--has-pinned-start-overflow`
+      : null,
+    computed.computedPinnedEndOverflow
+      ? `${InfiniteTableClassName}--has-pinned-end-overflow`
+      : null,
+
+    InfiniteClsRecipe({
+      hasPinnedStart: !!computedPinnedStartColumnsWidth,
+      hasPinnedEnd: !!computedPinnedEndColumnsWidth,
+      // hasPinnedStartOverflow: !!computed.computedPinnedStartOverflow,
+      // hasPinnedEndOverflow: !!computed.computedPinnedEndOverflow,
+      focused,
+      focusedWithin,
+    }),
+  );
+
+  domProps.className = className;
+
+  domProps.style = {
+    ...initialDOMProps?.style,
+    ...cssVars,
+  };
+  if (focused) {
+    if (componentState.focusedStyle) {
+      Object.assign(domProps.style, componentState.focusedStyle);
+    }
+  }
+  if (focusedWithin) {
+    if (componentState.focusedWithinStyle) {
+      Object.assign(domProps.style, componentState.focusedWithinStyle);
+    }
+  }
+
+  return domProps;
+}