@infinite-table/infinite-react 0.5.0 → 0.5.2

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

@@ -1,186 +0,0 @@
-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

@@ -1,219 +0,0 @@
-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

@@ -1,306 +0,0 @@
-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;
-}