@infinite-table/infinite-react 0.3.3 → 0.3.6

package/index.d.ts

@@ -1,6 +1,6 @@
 import * as _vanilla_extract_private from '@vanilla-extract/private';
 import * as React$1 from 'react';
-import { MutableRefObject, CSSProperties, HTMLProps } from 'react';
+import { RefCallback, MutableRefObject, CSSProperties, HTMLProps } from 'react';
 
 declare function debounce(fn: Function, { wait }: {
     wait: number;
@@ -303,7 +303,7 @@ declare class MatrixBrain extends Logger {
         x: number;
         y: number;
     };
-    private getItemOffsetFor;
+    getItemOffsetFor: (itemIndex: number, direction: 'horizontal' | 'vertical') => number;
     private computeCacheFor;
     private getItemSizeCacheFor;
     private computeItemSpanUpTo;
@@ -358,6 +358,89 @@ declare class MatrixBrain extends Logger {
     destroy: () => void;
 }
 
+declare type TableRenderCellFnParam = {
+    domRef: RefCallback<HTMLElement>;
+    rowIndex: number;
+    colIndex: number;
+    rowspan: number;
+    colspan: number;
+    hidden: boolean;
+    width: number;
+    height: number;
+    widthWithColspan: number;
+    heightWithRowspan: number;
+    rowFixed: FixedPosition;
+    colFixed: FixedPosition;
+    onMouseEnter: VoidFunction;
+    onMouseLeave: VoidFunction;
+};
+declare type TableRenderCellFn = (param: TableRenderCellFnParam) => Renderable;
+declare class ReactHeadlessTableRenderer extends Logger {
+    private brain;
+    private destroyed;
+    private scrolling;
+    cellHoverClassNames: string[];
+    private itemDOMElements;
+    private itemDOMRefs;
+    private updaters;
+    private mappedCells;
+    private items;
+    private currentHoveredRow;
+    private onDestroy;
+    private hoverRowUpdatesInProgress;
+    constructor(brain: MatrixBrain);
+    getFullyVisibleRowsRange: () => {
+        start: number;
+        end: number;
+    } | null;
+    getScrollPositionForScrollRowIntoView: (rowIndex: number, config?: {
+        scrollAdjustPosition?: ScrollAdjustPosition;
+        offset?: number;
+    }) => ScrollPosition;
+    getScrollPositionForScrollColumnIntoView: (colIndex: number, config?: {
+        scrollAdjustPosition?: ScrollAdjustPosition;
+        offset?: number;
+    }) => ScrollPosition;
+    getScrollPositionForScrollCellIntoView: (rowIndex: number, colIndex: number, config?: {
+        rowScrollAdjustPosition?: ScrollAdjustPosition;
+        colScrollAdjustPosition?: ScrollAdjustPosition;
+        scrollAdjustPosition?: ScrollAdjustPosition;
+        offsetTop: number;
+        offsetLeft: number;
+    }) => ScrollPosition;
+    isRowFullyVisible: (rowIndex: number, offsetMargin?: number) => boolean;
+    isRowVisible: (rowIndex: number, offsetMargin?: number) => boolean;
+    isRowRendered: (rowIndex: number) => boolean;
+    isCellVisible: (rowIndex: number, colIndex: number) => boolean;
+    isCellFullyVisible: (rowIndex: number, colIndex: number) => boolean;
+    isColumnFullyVisible: (colIndex: number, offsetMargin?: number) => boolean;
+    isColumnVisible: (colIndex: number, offsetMargin?: number) => boolean;
+    isCellRendered: (rowIndex: number, colIndex: number) => boolean;
+    isColumnRendered: (colIndex: number) => boolean;
+    getExtraSpanCellsForRange: (range: TableRenderRange) => [number, number][];
+    renderRange: (range: TableRenderRange, { renderCell, force, onRender, }: {
+        force?: boolean | undefined;
+        renderCell: TableRenderCellFn;
+        onRender: (items: Renderable[]) => void;
+    }) => Renderable[];
+    private renderElement;
+    getFixedRanges: (currentRenderRange: TableRenderRange) => TableRenderRange[];
+    private isCellFixed;
+    private isCellCovered;
+    private renderCellAtElement;
+    private onMouseEnter;
+    private addHoverClass;
+    private onMouseLeave;
+    private removeHoverClass;
+    private updateHoverClassNamesForRow;
+    private updateElementPosition;
+    private onScrollStart;
+    private onScrollStop;
+    adjustFixedElementsOnScroll: (scrollPosition?: ScrollPosition) => void;
+    destroy: () => void;
+    reset(): void;
+}
+
 declare type ComponentStateContext<T_STATE, T_ACTIONS> = {
     getComponentState: () => T_STATE;
     componentState: T_STATE;
@@ -395,6 +478,8 @@ declare class ScrollListener {
 }
 
 interface InfiniteTableSetupState<T> {
+    renderer: ReactHeadlessTableRenderer;
+    onRenderUpdater: SubscriptionCallback<Renderable>;
     propsCache: Map<keyof InfiniteTableProps<T>, WeakMap<any, any>>;
     columnsWhenInlineGroupRenderStrategy?: Map<string, InfiniteTableColumn<T>>;
     domRef: MutableRefObject<HTMLDivElement | null>;
@@ -423,6 +508,7 @@ interface InfiniteTableMappedState<T> {
     viewportReservedWidth: InfiniteTableProps<T>['viewportReservedWidth'];
     groupColumn: InfiniteTableProps<T>['groupColumn'];
     headerOptions: NonUndefined<InfiniteTableProps<T>['headerOptions']>;
+    keyboardNavigation: NonUndefined<InfiniteTableProps<T>['keyboardNavigation']>;
     onScrollbarsChange: InfiniteTableProps<T>['onScrollbarsChange'];
     loadingText: InfiniteTableProps<T>['loadingText'];
     components: InfiniteTableProps<T>['components'];
@@ -434,6 +520,8 @@ interface InfiniteTableMappedState<T> {
     onFocusWithin: InfiniteTableProps<T>['onFocusWithin'];
     onBlurWithin: InfiniteTableProps<T>['onBlurWithin'];
     autoSizeColumnsKey: InfiniteTableProps<T>['autoSizeColumnsKey'];
+    activeRowIndex: InfiniteTableProps<T>['activeRowIndex'];
+    activeCellIndex: InfiniteTableProps<T>['activeCellIndex'];
     scrollStopDelay: NonUndefined<InfiniteTableProps<T>['scrollStopDelay']>;
     onScrollToTop: InfiniteTableProps<T>['onScrollToTop'];
     onScrollToBottom: InfiniteTableProps<T>['onScrollToBottom'];
@@ -453,7 +541,6 @@ interface InfiniteTableMappedState<T> {
     pinnedEndMaxWidth: InfiniteTableProps<T>['pinnedEndMaxWidth'];
     pivotColumn: InfiniteTableProps<T>['pivotColumn'];
     pivotColumnGroups: InfiniteTablePropColumnGroupsMap;
-    activeIndex: NonUndefined<InfiniteTableProps<T>['activeIndex']>;
     columnMinWidth: NonUndefined<InfiniteTableProps<T>['columnMinWidth']>;
     columnMaxWidth: NonUndefined<InfiniteTableProps<T>['columnMaxWidth']>;
     columnDefaultWidth: NonUndefined<InfiniteTableProps<T>['columnDefaultWidth']>;
@@ -536,6 +623,7 @@ declare type InfiniteTableColumnType<T> = {
     verticalAlign?: InfiniteTableColumn<T>['verticalAlign'];
     cssEllipsis?: boolean;
     headerCssEllipsis?: boolean;
+    field?: keyof T;
     components?: InfiniteTableColumn<T>['components'];
     renderValue?: InfiniteTableColumn<T>['renderValue'];
     render?: InfiniteTableColumn<T>['render'];
@@ -555,6 +643,18 @@ declare type InfiniteTableImperativeApi<T> = {
     setColumnOrder: (columnOrder: InfiniteTablePropColumnOrder) => void;
     setColumnVisibility: (columnVisibility: InfiniteTablePropColumnVisibility) => void;
     x?: T;
+    scrollRowIntoView: (rowIndex: number, config?: {
+        scrollAdjustPosition?: ScrollAdjustPosition;
+        offset?: number;
+    }) => void;
+    scrollColumnIntoView: (colId: string, config?: {
+        scrollAdjustPosition?: ScrollAdjustPosition;
+        offset?: number;
+    }) => void;
+    scrollCellIntoView: (rowIndex: number, colIdOrIndex: string | number, config?: {
+        scrollAdjustPosition?: ScrollAdjustPosition;
+        offset?: number;
+    }) => void;
     getState: () => InfiniteTableState<T>;
     getDataSourceState: () => DataSourceState<T>;
 };
@@ -661,6 +761,13 @@ interface InfiniteTableProps<T> {
     showZebraRows?: boolean;
     showHoverRows?: boolean;
     sortable?: boolean;
+    keyboardNavigation?: InfiniteTablePropKeyboardNavigation;
+    defaultActiveRowIndex?: number | null;
+    activeRowIndex?: number | null;
+    onActiveRowIndexChange?: (activeRowIndex: number) => void;
+    onActiveCellIndexChange?: (activeCellIndex: [number, number]) => void;
+    activeCellIndex?: [number, number] | null;
+    defaultActiveCellIndex?: [number, number] | null;
     draggableColumns?: boolean;
     header?: boolean;
     headerOptions?: InfiniteTablePropHeaderOptions;
@@ -676,8 +783,6 @@ interface InfiniteTableProps<T> {
     resizableColumns?: boolean;
     virtualizeColumns?: InfiniteTablePropVirtualizeColumns<T>;
     virtualizeRows?: boolean;
-    defaultActiveIndex?: number;
-    activeIndex?: number;
     onSelfFocus?: (event: React$1.FocusEvent<HTMLDivElement>) => void;
     onSelfBlur?: (event: React$1.FocusEvent<HTMLDivElement>) => void;
     onFocusWithin?: (event: React$1.FocusEvent<HTMLDivElement>) => void;
@@ -698,6 +803,7 @@ interface InfiniteTableProps<T> {
     scrollTopKey?: string | number;
     autoSizeColumnsKey?: InfiniteTablePropAutoSizeColumnsKey;
 }
+declare type InfiniteTablePropKeyboardNavigation = 'cell' | 'row' | false;
 declare type InfiniteTablePropHeaderOptions = {
     alwaysReserveSpaceForSortIcon: boolean;
 };
@@ -711,6 +817,7 @@ declare type Scrollbars = {
     vertical: boolean;
     horizontal: boolean;
 };
+declare type ScrollAdjustPosition = 'start' | 'end' | 'center';
 
 interface InfiniteTableComputedValues<T> {
     scrollbars: {
@@ -792,6 +899,7 @@ declare type InfiniteTableColumnRenderParamBase<DATA_TYPE, COL_TYPE = InfiniteTa
     value: string | number | Renderable;
     groupRowInfo: InfiniteTableRowInfo<DATA_TYPE> | null;
     rowIndex: number;
+    rowActive: boolean;
     column: COL_TYPE;
     toggleCurrentGroupRow: () => void;
     toggleGroupRow: InfiniteTableToggleGroupRowFn;
@@ -969,10 +1077,12 @@ declare type InfiniteTableRowInfo<T> = InfiniteTable_HasGrouping_RowInfoNormal<T
 declare type InfiniteTableRowInfoDataDiscriminator<T> = {
     data: T;
     isGroupRow: false;
+    rowActive: boolean;
     rowInfo: InfiniteTable_NoGrouping_RowInfoNormal<T> | InfiniteTable_HasGrouping_RowInfoNormal<T>;
     field?: keyof T;
     value: any;
 } | {
+    rowActive: boolean;
     data: Partial<T> | null;
     rowInfo: InfiniteTable_HasGrouping_RowInfoGroup<T>;
     isGroupRow: true;
@@ -1255,6 +1365,7 @@ declare type DataSourceSingleSortInfo<T> = MultisortInfo<T> & {
 declare type DataSourceGroupBy<T> = GroupBy<T, any>;
 declare type DataSourcePivotBy<T> = PivotBy<T, any>;
 declare type DataSourceSortInfo<T> = null | DataSourceSingleSortInfo<T> | DataSourceSingleSortInfo<T>[];
+declare type DataSourcePropSortInfo<T> = DataSourceSortInfo<T>;
 declare type DataSourceRemoteData<T> = {
     data: T[] | LazyGroupDataItem<T>[];
     mappings?: DataSourceMappings;
@@ -1278,6 +1389,7 @@ interface DataSourceMappedState<T> {
     lazyLoad: DataSourceProps<T>['lazyLoad'];
     onDataParamsChange: DataSourceProps<T>['onDataParamsChange'];
     data: DataSourceProps<T>['data'];
+    sortMode: DataSourceProps<T>['sortMode'];
     filterFunction: DataSourceProps<T>['filterFunction'];
     filterValue: DataSourceProps<T>['filterValue'];
     filterTypes: NonUndefined<DataSourceProps<T>['filterTypes']>;
@@ -1399,7 +1511,8 @@ declare type DataSourceProps<T> = {
     livePaginationCursor?: DataSourcePropLivePaginationCursor<T>;
     onLivePaginationCursorChange?: (livePaginationCursor: DataSourceLivePaginationCursorValue) => void;
     filterFunction?: DataSourcePropFilterFunction<T>;
-    filterMode?: 'client' | 'server';
+    sortMode?: 'local' | 'remote';
+    filterMode?: 'local' | 'remote';
     filterValue?: DataSourcePropFilterValue<T>;
     defaultFilterValue?: DataSourcePropFilterValue<T>;
     onFilterValueChange?: (filterValue: DataSourcePropFilterValue<T>) => void;
@@ -1502,9 +1615,9 @@ declare function useDataSource<T>(): DataSourceState<T>;
 
 declare function DataSource<T>(props: DataSourceProps<T>): JSX.Element;
 
-declare type ForwardPropsToStateFnResult<TYPE_PROPS, TYPE_RESULT> = Partial<{
+declare type ForwardPropsToStateFnResult<TYPE_PROPS, TYPE_RESULT> = {
     [propName in keyof TYPE_PROPS & keyof TYPE_RESULT]: 1 | ((value: TYPE_PROPS[propName]) => TYPE_RESULT[propName]);
-}>;
+};
 declare type ComponentStateRootConfig<T_PROPS, COMPONENT_MAPPED_STATE, COMPONENT_SETUP_STATE = {}, COMPONENT_DERIVED_STATE = {}, T_ACTIONS = {}, T_PARENT_STATE = {}> = {
     debugName?: string;
     initSetupState?: () => COMPONENT_SETUP_STATE;
@@ -1557,4 +1670,4 @@ declare const defaultFilterEditors: InfiniteTablePropFilterEditors<unknown>;
 declare function StringFilterEditor<T>(props: InfiniteTableFilterEditorProps<T>): JSX.Element;
 declare function NumberFilterEditor<T>(props: InfiniteTableFilterEditorProps<T>): JSX.Element;
 
-export { ColumnTypeWithInherit, DataSource, DataSourceAction, DataSourceActionType, DataSourceAggregationReducer, DataSourceComponentActions, DataSourceContextValue, DataSourceData, DataSourceDataParams, DataSourceDataParamsChanges, DataSourceDerivedState, DataSourceFilterFunctionParam, DataSourceFilterOperator, DataSourceFilterOperatorFunction, DataSourceFilterOperatorFunctionParam, DataSourceFilterType, DataSourceFilterValueItem, DataSourceFilterValueItemValueGetter, DataSourceGroupBy, DataSourceGroupRowsList, DataSourceLivePaginationCursorFn, DataSourceLivePaginationCursorParams, DataSourceLivePaginationCursorValue, DataSourceMappedState, DataSourceMappings, DataSourcePivotBy, DataSourcePropAggregationReducers, DataSourcePropFilterFunction, DataSourcePropFilterTypes, DataSourcePropFilterValue, DataSourcePropGroupBy, DataSourcePropGroupRowsStateObject, DataSourcePropLivePaginationCursor, DataSourcePropPivotBy, DataSourcePropSortTypes, DataSourceProps, DataSourceReducer, DataSourceRemoteData, DataSourceSetupState, DataSourceSingleSortInfo, DataSourceSortInfo, DataSourceState, GroupRowsState, InfiniteTable, InfiniteTableAction, InfiniteTableActionType, InfiniteTableClassName, InfiniteTableColumn, InfiniteTableColumnAggregator, InfiniteTableColumnComparer, InfiniteTableColumnGroup, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam, InfiniteTableColumnRowspanParam, InfiniteTableColumnSizingOptions, InfiniteTableComponent, InfiniteTableComputedColumn, InfiniteTableComputedValues, InfiniteTableContextValue, InfiniteTableFilterEditorProps, InfiniteTableGroupColumnBase, InfiniteTableGroupColumnFunction, InfiniteTableGroupColumnGetterOptions, InfiniteTableGroupColumnRenderIconFunction, InfiniteTableImperativeApi, InfiniteTablePivotColumn, InfiniteTablePropAutoSizeColumnsKey, InfiniteTablePropColumnGroups, InfiniteTablePropColumnOrder, InfiniteTablePropColumnPinning, InfiniteTablePropColumnSizing, InfiniteTablePropColumnTypes, InfiniteTablePropColumnVisibility, InfiniteTablePropColumns, InfiniteTablePropColumnsMap, InfiniteTablePropComponents, InfiniteTablePropFilterEditors, InfiniteTablePropGroupColumn, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropHeaderOptions, InfiniteTablePropRowClassName, InfiniteTablePropRowStyle, InfiniteTableProps, InfiniteTableRowClassNameFn, InfiniteTableRowInfo, InfiniteTableRowStyleFn, InfiniteTableState, LazyGroupDataDeepMap, LazyGroupDataItem, LazyRowInfoGroup, NumberFilterEditor, Scrollbars, StringFilterEditor, debounce, defaultFilterEditors, defaultFilterTypes, defaultFilterTypes as filterTypes, flatten, getComponentStateRoot, group, interceptMap, multisort, useComponentState, useDataSource, useEffectWithChanges, useInfiniteColumnCell, useInfiniteHeaderCell };
+export { ColumnTypeWithInherit, DataSource, DataSourceAction, DataSourceActionType, DataSourceAggregationReducer, DataSourceComponentActions, DataSourceContextValue, DataSourceData, DataSourceDataParams, DataSourceDataParamsChanges, DataSourceDerivedState, DataSourceFilterFunctionParam, DataSourceFilterOperator, DataSourceFilterOperatorFunction, DataSourceFilterOperatorFunctionParam, DataSourceFilterType, DataSourceFilterValueItem, DataSourceFilterValueItemValueGetter, DataSourceGroupBy, DataSourceGroupRowsList, DataSourceLivePaginationCursorFn, DataSourceLivePaginationCursorParams, DataSourceLivePaginationCursorValue, DataSourceMappedState, DataSourceMappings, DataSourcePivotBy, DataSourcePropAggregationReducers, DataSourcePropFilterFunction, DataSourcePropFilterTypes, DataSourcePropFilterValue, DataSourcePropGroupBy, DataSourcePropGroupRowsStateObject, DataSourcePropLivePaginationCursor, DataSourcePropPivotBy, DataSourcePropSortInfo, DataSourcePropSortTypes, DataSourceProps, DataSourceReducer, DataSourceRemoteData, DataSourceSetupState, DataSourceSingleSortInfo, DataSourceSortInfo, DataSourceState, GroupRowsState, InfiniteTable, InfiniteTableAction, InfiniteTableActionType, InfiniteTableClassName, InfiniteTableColumn, InfiniteTableColumnAggregator, InfiniteTableColumnComparer, InfiniteTableColumnGroup, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam, InfiniteTableColumnRowspanParam, InfiniteTableColumnSizingOptions, InfiniteTableComponent, InfiniteTableComputedColumn, InfiniteTableComputedValues, InfiniteTableContextValue, InfiniteTableFilterEditorProps, InfiniteTableGroupColumnBase, InfiniteTableGroupColumnFunction, InfiniteTableGroupColumnGetterOptions, InfiniteTableGroupColumnRenderIconFunction, InfiniteTableImperativeApi, InfiniteTablePivotColumn, InfiniteTablePropAutoSizeColumnsKey, InfiniteTablePropColumnGroups, InfiniteTablePropColumnOrder, InfiniteTablePropColumnPinning, InfiniteTablePropColumnSizing, InfiniteTablePropColumnTypes, InfiniteTablePropColumnVisibility, InfiniteTablePropColumns, InfiniteTablePropColumnsMap, InfiniteTablePropComponents, InfiniteTablePropFilterEditors, InfiniteTablePropGroupColumn, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropHeaderOptions, InfiniteTablePropKeyboardNavigation, InfiniteTablePropRowClassName, InfiniteTablePropRowStyle, InfiniteTableProps, InfiniteTableRowClassNameFn, InfiniteTableRowInfo, InfiniteTableRowStyleFn, InfiniteTableState, LazyGroupDataDeepMap, LazyGroupDataItem, LazyRowInfoGroup, NumberFilterEditor, Scrollbars, StringFilterEditor, debounce, defaultFilterEditors, defaultFilterTypes, defaultFilterTypes as filterTypes, flatten, getComponentStateRoot, group, interceptMap, multisort, useComponentState, useDataSource, useEffectWithChanges, useInfiniteColumnCell, useInfiniteHeaderCell };

package/index.esm.css

@@ -1,4 +1,4 @@
-/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/theme.css.ts.vanilla.css?source=#H4sIAAAAAAAAA+1ZzW7jIBi85ymQcmmkdRX/Ja17WWmfBAO2UWyIMEmTXfXdF1ynjrGhidqV9oBQDskMfDDzgUZKJjiX4M8CgCCgrKCMShK0e4hIsM7AWpDmZQ4LFfYYRqkNjzRuh2MNW9FEo1srnGYgtGEbhTnqbjVsRZ8yEDkmP2cgtuqhxEqmYMGZDFr6+13MucoDo5N0M1d+4EQ2ZQZKJ+2Tm5PMKjjgqU3FgbKxKDkwtjY1O0oBG1qfM0BZRQSVBgXxmosMLJMnPQwQIkTUChdOUWzXSWxwci4wEYGAmB7aDByheJj26MqcBNGuFPzAcAZeK/WLgTeUBRWhZSXV4dfr/cnAaw5x0MB2F0hykqPlRJnDhyhNf1w+yiOz/DCdH4mo4Xm0Qing+dMJXB2MyrNuAVORgdwLN6/8QNtDjCkrLeKl9t27tR+h5iIVgRpEpK5Hh18SrIeD3e82OFn2G7tKXSafvzB5MnW2wOoW1mkFHPWwgGWpaSOBcIJjbHp+PY0izrqLqXp3M2nda2bLhXynN1CoSq4J13twnGyg2ZTsL/Om0GP6GhwadqFebmA8vYBdrX4pdBBCPRO/9Lc5Wt+HrxTLSp1wfi33HYgmblra5argZKnJZlag5TXFYIk2ejj2TtmRtjSvlaWMM/O1umbe9w4K/uoy1m6mnsgxHndm56h5DI3uJ4WWKEcpSq3cvhEYaWXnykwLaFqln0PjeuR6zHD3nDKp2OSomqUN1LNfK12Q4HXdlYAHyV8Wb4vHWnedD0o+KPmg5IOSD0o+KPmg5IOSD0rToDQ8dD4x+cTkE5NPTD4x+cTkE5NPTD4xzScmDMXOzEmjEuE6TMJnl/OqyS7eRjCOYtt71t8FFOtx6wsZ5lEYmeW/65ZaVI3zZJsm/7R7okRJFTru+YdM16nWm/Xfm/WzIZhC8LAXpCCifWeom1eRRr1n2sBV52D28d/3LW7e6edtjt7r6fe5ep+vX3D2Hm8/dxeAt8XbX/5qGSO1IAAA */
+/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/theme.css.ts.vanilla.css?source=#H4sIAAAAAAAAA+1ay27iMBTd8xWW2BRpXJEX0HQz0nyJYzvEIrGRYyjMqP8+dhoa4sQpqJ1qFpbFgt5zfe1zHz5ITaUQCvyZAQAh4znjTFFY7xGmcJmCpaTV85gt0LbHIExc9tDY3ebImJ3W2FjXTnOSgsBlW2nbRNy1MTutmxSEE85PKYicfGiy4qExF1zBmv1+I3MscodoKF2Nhe8woYuZDtJQu5nGxKMMdvbExWIHWTmY7BBrF5sNJEcVK88pYLygkikLgkUpZArm8cYsy4gwpnqHCybP18s4sjCZkIRKKBFhhzoFRyQfhjW6sJ0Q3m2lOHCSgpdC/8WyV4zDgrJtofTll8v9ybKXAhFYoXoHFT2p3nZym6GHMEl+XD46R3b4zl0cqSzRubfDVqLzhw5CX4ypsykBm5EO3BI3znwH2yNCGN86yEvcp5/mvme1NykoMkZMy7J3+TklZk2g29PCk+O80VSoi/P5E84D19EAi1tQpwWYiEck2m4NrEcQiUlE7JxfuzEseNOYunZXg9K9RtZCqjd4haSONOVwfYaJm3UwF5NtM69ys4bT4FDxC/TSgdGwAZtY7Vb4IKUeE7/MtzFYW4cvjKhC33B8r+keCAfZdJTLVcDBVoPDLEAtSkbAHK/Mmjg740dWs6zUKeWC29PqGnnfHERYsWN/g1qdTRiC6mLQhiNwJ6sj2CZfEGpm1uub0TolQfx0MzzTb1GQTMHfCxSicl+gN/lyhwOECulMwAPPBT7UlDQCydpAipepjnF3iXEUhPRbvmkVuz6MdT8INMcZTrB9nw7bdhintWrKfaS3DKww74w1dzKzRrB7wbjSaHrUXVhD/Z5qdmosRVk2IdBBiefZ6+yxNO3sFahXoF6BegXqFahXoF6BegXqFahXoN+mQLsXxEtRL0W9FPVS1EtRL0W9FPVS1EtRL0W/VYoSJHe2AO2FCJZBHNi57rWUrrNL04QoCiPXQ9EOGRyZdevTE2RhENrhv2r8OViNsnidxP+0esJYU2UX6PUAfafp+ueCT9Z/n6yfFSUMgYe9pDmVdTsCa1zQqpngcrdoMpi+/xvMLdm8M5+3ZfTenH5dVu/L6ycye09uP84uAK+z1780rAoBwCQAAA== */
 :root {
   --infinite-space-0: 0rem;
   --infinite-space-1: 0.125rem;
@@ -47,6 +47,13 @@
   --infinite-cell-border: var(--infinite-cell-border-width) solid #c6c6c6;
   --infinite-cell-border-invisible: none;
   --infinite-cell-border-radius: var(--infinite-space-2);
+  --infinite-active-cell-border-style: dashed;
+  --infinite-active-cell-border-width: 1px;
+  --infinite-active-cell-border-color--r: 77;
+  --infinite-active-cell-border-color--g: 149;
+  --infinite-active-cell-border-color--b: 215;
+  --infinite-active-cell-background-alpha: 0.25;
+  --infinite-active-cell-background-alpha--table-unfocused: 0.1;
   --infinite-row-background: var(--infinite-background);
   --infinite-row-odd-background: #f6f6f6;
   --infinite-group-row-background: #cbc5c5;
@@ -102,6 +109,13 @@
   --infinite-cell-border: var(--infinite-cell-border-width) solid #c6c6c6;
   --infinite-cell-border-invisible: none;
   --infinite-cell-border-radius: var(--infinite-space-2);
+  --infinite-active-cell-border-style: dashed;
+  --infinite-active-cell-border-width: 1px;
+  --infinite-active-cell-border-color--r: 77;
+  --infinite-active-cell-border-color--g: 149;
+  --infinite-active-cell-border-color--b: 215;
+  --infinite-active-cell-background-alpha: 0.25;
+  --infinite-active-cell-background-alpha--table-unfocused: 0.1;
   --infinite-row-background: var(--infinite-background);
   --infinite-row-odd-background: #f6f6f6;
   --infinite-group-row-background: #cbc5c5;
@@ -157,6 +171,13 @@
   --infinite-cell-border: var(--infinite-cell-border-width) solid #c6c6c6;
   --infinite-cell-border-invisible: none;
   --infinite-cell-border-radius: var(--infinite-space-2);
+  --infinite-active-cell-border-style: dashed;
+  --infinite-active-cell-border-width: 1px;
+  --infinite-active-cell-border-color--r: 77;
+  --infinite-active-cell-border-color--g: 149;
+  --infinite-active-cell-border-color--b: 215;
+  --infinite-active-cell-background-alpha: 0.25;
+  --infinite-active-cell-background-alpha--table-unfocused: 0.1;
   --infinite-row-background: var(--infinite-background);
   --infinite-row-odd-background: #f6f6f6;
   --infinite-group-row-background: #cbc5c5;
@@ -200,7 +221,7 @@
   }
 }
 
-/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/utilities.css.ts.vanilla.css?source=#H4sIAAAAAAAAA5WU0Y6bMBBF3/MVvFRKq7KC3W12Qx/7IZUxA8xibGqbkKTqv3diVpuMiVaJ8oJyzx3sYeY+/M43qs9xypK/qyQpzT51eETdFPRsK7Ap/fVz9W/18AEWJdTGwu28qD3Ym/Hk2x3ovWchx12nyQM4GIcejS4SC0p43AGDHiNIlM6o0XPoKYKcR9kdGPIcITXuoWLEj0DUqFSRyNFa0P6XUcYyaHMB7YRdpynqGjV6SIWUZEnlyfOVmV6CyXlrOvik9ivDbq6+nfstZNdYM+qqSFC3YNEzSgTKW6EdfdS+mB+p4fBUrbPv9ONVyzt5GfPWeILX26yChqNVQKkNztiCPglqGhpGzDNXK9gXSc6U+kLRRvMxaIJ4pKZVS2cbiRlTMVYzrr8tdQ50VwBOqEBU6AYlDkW4A9N7rpfKyI4BmgOoFWpIl5wJ3Oho5RwokP5Kq4bAtIBNSzI/6B+m0U2+MHne7wkr38ZOdyktjH4eETPEtvEsLEy7oCmoF8ecLpSFbf8eQt6bPjYemLawHoNsr3Umzy61hTPPP6YzrZWZaNcpq3rNoccYsmbixBxnQmGjU9r93lEhWCxJ/rzEKDzAy5Zzc7C9jZSK9YEShCppf73k5joaDuu8sDxT8pdPcNA8XvM53swO7HztFqsKot5sI0aM3nBCRMQOHZaKD3devs+hUqlshW6gOCcTJ+fYmtpTxLpBSDjtymTFwLE5sjzsfXp+NSiFg0NH6H/3/ukv6gcAAA== */
+/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/utilities.css.ts.vanilla.css?source=#H4sIAAAAAAAAA5WU3Y6bMBCF7/MU3FRKq3oVNt0/etkHqYwZYDbGprYJSaq+eycm2mRMtErEDeJ8Z7DH4/PwO3/WXY7jKvu7yLLS7oTHA5qmoHdXgRP06efi3+LhAyxKqK2D23lZB3A349m3O9B710KOu1aTR7C3HgNaU2QOtAy4BQY9JpAsvdVD4NA6gXxAtdkz5EeC1LiDihFPkahR6yJTg3Ngwi+rrWPQ8wW0lW4pBJoaDQYQUimyCHX0fGWml2jywdkNfFL7lWE3V3+b+i3VpnF2MFWRoWnBYWCUjFRw0ng61K6YXqnhsK6Wq+/08KrlnbxKeWcDwcu3VQUNR6uIUhu8dQUdCRoaGkbA6bCiImBLO/dFZqzhx15Ph6FhV2Q5U5oLZWZro3ig3lZzJybiiqnvqbri+mauc0BfATjRRaJC32u5L+IemG64XmqrNgywHECj0YCYc33kBk8d9qBBhSut+hOZFrBpSeYLdUyjnXxhso/yiFVoU2e4lGbGYZok26e27VmYmcaoaahny9xdKDPb/pRVIdguNR6YNrPmU6i7a63J80ttbn38GE9RaztSJlCmdYZD6xRyduTElGlSY2MEZURHd+QYEsllyp/mGIUMBNVybsq294HSs95T0lAlE66XfLmOxsX6IB3Pnvz1ExwMj+F8yjO7BTdtu8WqgqQ3MmHkECwnyoTYosdS8+nO1WkQtRaqlaaB4pxgnJwya2yPUex7qeB4WUYne45NwRVgF8T516A19h49of8BIc15bhIIAAA= */
 ._16lm1iw0 {
   box-sizing: border-box;
 }
@@ -260,114 +281,117 @@
   cursor: pointer;
 }
 ._16lm1iwe {
-  flex: 1;
+  pointer-events: none;
 }
 ._16lm1iwf {
-  flex: none;
+  flex: 1;
 }
 ._16lm1iwg {
-  z-index: 1;
+  flex: none;
 }
 ._16lm1iwh {
-  z-index: 10;
+  z-index: 1;
 }
 ._16lm1iwi {
-  z-index: 1000;
+  z-index: 10;
 }
 ._16lm1iwj {
-  z-index: 10000;
+  z-index: 1000;
 }
 ._16lm1iwk {
-  z-index: 100000;
+  z-index: 10000;
 }
 ._16lm1iwl {
-  display: flex;
+  z-index: 100000;
 }
 ._16lm1iwm {
-  display: block;
+  display: flex;
 }
 ._16lm1iwn {
-  display: inline-block;
+  display: block;
 }
 ._16lm1iwo {
+  display: inline-block;
+}
+._16lm1iwp {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
-._16lm1iwp {
+._16lm1iwq {
   height: 0;
 }
-._16lm1iwq {
+._16lm1iwr {
   height: 100%;
 }
-._16lm1iwr {
+._16lm1iws {
   width: 0;
 }
-._16lm1iws {
+._16lm1iwt {
   width: 100%;
 }
-._16lm1iwt {
+._16lm1iwu {
   top: 0;
 }
-._16lm1iwu {
+._16lm1iwv {
   top: 100%;
 }
-._16lm1iwv {
+._16lm1iww {
   left: 0;
 }
-._16lm1iww {
+._16lm1iwx {
   left: 100%;
 }
-._16lm1iwx {
+._16lm1iwy {
   bottom: 0;
 }
-._16lm1iwy {
+._16lm1iwz {
   bottom: 100%;
 }
-._16lm1iwz {
+._16lm1iw10 {
   right: 0;
 }
-._16lm1iw10 {
+._16lm1iw11 {
   right: 100%;
 }
-._16lm1iw11 {
+._16lm1iw12 {
   flex-flow: column;
 }
-._16lm1iw12 {
+._16lm1iw13 {
   flex-flow: row;
 }
-._16lm1iw13 {
+._16lm1iw14 {
   align-items: center;
 }
-._16lm1iw14 {
+._16lm1iw15 {
   align-items: stretch;
 }
-._16lm1iw15 {
+._16lm1iw16 {
   justify-content: center;
 }
-._16lm1iw16 {
+._16lm1iw17 {
   justify-content: flex-start;
 }
-._16lm1iw17 {
+._16lm1iw18 {
   justify-content: flex-end;
 }
-._16lm1iw18 {
+._16lm1iw19 {
   overflow: hidden;
 }
-._16lm1iw19 {
+._16lm1iw1a {
   overflow: auto;
 }
-._16lm1iw1a {
+._16lm1iw1b {
   overflow: visible;
 }
-._16lm1iw1b {
+._16lm1iw1c {
   will-change: transform;
 }
-._16lm1iw1c {
+._16lm1iw1d {
   white-space: nowrap;
 }
-._16lm1iw1d {
+._16lm1iw1e {
   text-overflow: ellipsis;
 }
 
@@ -381,11 +405,12 @@
   will-change: transform;
 }
 
-/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/VirtualScrollContainer/VirtualScrollContainer.css.ts.vanilla.css?source=Ll8xdWVpamNvMCB7CiAgYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogIC13ZWJraXQtb3ZlcmZsb3ctc2Nyb2xsaW5nOiB0b3VjaDsKICBwb3NpdGlvbjogZml4ZWQ7CiAgaGVpZ2h0OiAxMDAlOwogIHdpZHRoOiAxMDAlOwogIGxlZnQ6IDA7CiAgdG9wOiAwOwp9Ci5fMXVlaWpjbzAgPiA6Zmlyc3QtY2hpbGQgewogIHBvc2l0aW9uOiBzdGlja3k7CiAgdG9wOiAwOwogIGxlZnQ6IDA7Cn0KLl8xdWVpamNvMSB7CiAgb3ZlcmZsb3c6IGF1dG87Cn0KLl8xdWVpamNvMiB7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKfQouXzF1ZWlqY28zIHsKICBvdmVyZmxvdzogdmlzaWJsZTsKfQouXzF1ZWlqY280IHsKICBvdmVyZmxvdzogYXV0bzsKfQouXzF1ZWlqY281IHsKICBvdmVyZmxvdzogaGlkZGVuOwp9Ci5fMXVlaWpjbzYgewogIG92ZXJmbG93LXg6IGF1dG87Cn0KLl8xdWVpamNvNyB7CiAgb3ZlcmZsb3cteDogaGlkZGVuOwp9Ci5fMXVlaWpjbzggewogIG92ZXJmbG93LXg6IHZpc2libGU7Cn0KLl8xdWVpamNvOSB7CiAgb3ZlcmZsb3cteDogYXV0bzsKfQouXzF1ZWlqY29hIHsKICBvdmVyZmxvdy14OiBoaWRkZW47Cn0KLl8xdWVpamNvYiB7CiAgb3ZlcmZsb3cteTogYXV0bzsKfQouXzF1ZWlqY29jIHsKICBvdmVyZmxvdy15OiBoaWRkZW47Cn0KLl8xdWVpamNvZCB7CiAgb3ZlcmZsb3cteTogdmlzaWJsZTsKfQouXzF1ZWlqY29lIHsKICBvdmVyZmxvdy15OiBhdXRvOwp9Ci5fMXVlaWpjb2YgewogIG92ZXJmbG93LXk6IGhpZGRlbjsKfQ== */
+/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/VirtualScrollContainer/VirtualScrollContainer.css.ts.vanilla.css?source=Ll8xdWVpamNvMCB7CiAgYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogIC13ZWJraXQtb3ZlcmZsb3ctc2Nyb2xsaW5nOiB0b3VjaDsKICBvdXRsaW5lOiBub25lOwogIHBvc2l0aW9uOiBmaXhlZDsKICBoZWlnaHQ6IDEwMCU7CiAgd2lkdGg6IDEwMCU7CiAgbGVmdDogMDsKICB0b3A6IDA7Cn0KLl8xdWVpamNvMCA+IDpmaXJzdC1jaGlsZCB7CiAgcG9zaXRpb246IHN0aWNreTsKICB0b3A6IDA7CiAgbGVmdDogMDsKfQouXzF1ZWlqY28xIHsKICBvdmVyZmxvdzogYXV0bzsKfQouXzF1ZWlqY28yIHsKICBvdmVyZmxvdzogaGlkZGVuOwp9Ci5fMXVlaWpjbzMgewogIG92ZXJmbG93OiB2aXNpYmxlOwp9Ci5fMXVlaWpjbzQgewogIG92ZXJmbG93OiBhdXRvOwp9Ci5fMXVlaWpjbzUgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLl8xdWVpamNvNiB7CiAgb3ZlcmZsb3cteDogYXV0bzsKfQouXzF1ZWlqY283IHsKICBvdmVyZmxvdy14OiBoaWRkZW47Cn0KLl8xdWVpamNvOCB7CiAgb3ZlcmZsb3cteDogdmlzaWJsZTsKfQouXzF1ZWlqY285IHsKICBvdmVyZmxvdy14OiBhdXRvOwp9Ci5fMXVlaWpjb2EgewogIG92ZXJmbG93LXg6IGhpZGRlbjsKfQouXzF1ZWlqY29iIHsKICBvdmVyZmxvdy15OiBhdXRvOwp9Ci5fMXVlaWpjb2MgewogIG92ZXJmbG93LXk6IGhpZGRlbjsKfQouXzF1ZWlqY29kIHsKICBvdmVyZmxvdy15OiB2aXNpYmxlOwp9Ci5fMXVlaWpjb2UgewogIG92ZXJmbG93LXk6IGF1dG87Cn0KLl8xdWVpamNvZiB7CiAgb3ZlcmZsb3cteTogaGlkZGVuOwp9 */
 ._1ueijco0 {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-overflow-scrolling: touch;
+  outline: none;
   position: fixed;
   height: 100%;
   width: 100%;
@@ -444,8 +469,34 @@
   overflow-y: hidden;
 }
 
-/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/InfiniteCls.css.ts.vanilla.css?source=Ll8xeWV1YjJ2MCB7CiAgZm9udC1mYW1pbHk6IHZhcigtLWluZmluaXRlLWZvbnQtZmFtaWx5KTsKICBjb2xvcjogdmFyKC0taW5maW5pdGUtY29sb3IpOwogIGJhY2tncm91bmQ6IHZhcigtLWluZmluaXRlLWJhY2tncm91bmQpOwogIG1pbi1oZWlnaHQ6IHZhcigtLWluZmluaXRlLW1pbi1oZWlnaHQpOwp9Ci5fMXlldWIydjEgewogIC0taW5maW5pdGUtcm93LXBvaW50ZXItZXZlbnRzLXdoaWxlLXNjcm9sbGluZzogbm9uZTsKfQouXzF5ZXViMnZoIHsKICBib3JkZXItcmlnaHQ6IHZhcigtLWluZmluaXRlLWNlbGwtYm9yZGVyKTsKfQouXzF5ZXViMnZpIHsKICBib3JkZXItbGVmdDogdmFyKC0taW5maW5pdGUtY2VsbC1ib3JkZXIpOwp9 */
+/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/components/ActiveRowIndicator.css.ts.vanilla.css?source=LmoyNmxyeDAgewogIC0taW5maW5pdGUtYWN0aXZlLXJvdy1ib3JkZXItc3R5bGU6IHZhcigtLWluZmluaXRlLWFjdGl2ZS1yb3ctYm9yZGVyLXN0eWxlLCB2YXIoLS1pbmZpbml0ZS1hY3RpdmUtY2VsbC1ib3JkZXItc3R5bGUpKTsKICBib3JkZXI6IHZhcigtLWluZmluaXRlLWFjdGl2ZS1yb3ctYm9yZGVyLCB2YXIoLS1pbmZpbml0ZS1hY3RpdmUtcm93LWJvcmRlci13aWR0aCwgdmFyKC0taW5maW5pdGUtYWN0aXZlLWNlbGwtYm9yZGVyLXdpZHRoKSkgdmFyKC0taW5maW5pdGUtYWN0aXZlLXJvdy1ib3JkZXItc3R5bGUsIHZhcigtLWluZmluaXRlLWFjdGl2ZS1jZWxsLWJvcmRlci1zdHlsZSkpIHZhcigtLWluZmluaXRlLWFjdGl2ZS1yb3ctYm9yZGVyLWNvbG9yLCByZ2IodmFyKC0taW5maW5pdGUtYWN0aXZlLWNlbGwtYm9yZGVyLWNvbG9yLS1yKSB2YXIoLS1pbmZpbml0ZS1hY3RpdmUtY2VsbC1ib3JkZXItY29sb3ItLWcpIHZhcigtLWluZmluaXRlLWFjdGl2ZS1jZWxsLWJvcmRlci1jb2xvci0tYikpKSk7CiAgYmFja2dyb3VuZDogdmFyKC0taW5maW5pdGUtYWN0aXZlLXJvdy1iYWNrZ3JvdW5kLCB2YXIoLS1pbmZpbml0ZS1hY3RpdmUtY2VsbC1iYWNrZ3JvdW5kLCByZ2JhKHZhcigtLWluZmluaXRlLWFjdGl2ZS1jZWxsLWJvcmRlci1jb2xvci0tciksIHZhcigtLWluZmluaXRlLWFjdGl2ZS1jZWxsLWJvcmRlci1jb2xvci0tZyksIHZhcigtLWluZmluaXRlLWFjdGl2ZS1jZWxsLWJvcmRlci1jb2xvci0tYiksIHZhcigtLWluZmluaXRlLWFjdGl2ZS1yb3ctYmFja2dyb3VuZC1hbHBoYSwgdmFyKC0taW5maW5pdGUtYWN0aXZlLWNlbGwtYmFja2dyb3VuZC1hbHBoYSkpKSkpOwp9Ci5qMjZscngxIHsKICBkaXNwbGF5OiBibG9jazsKfQouajI2bHJ4MiB7CiAgZGlzcGxheTogbm9uZTsKfQ== */
+.j26lrx0 {
+  --infinite-active-row-border-style: var(--infinite-active-row-border-style, var(--infinite-active-cell-border-style));
+  border: var(--infinite-active-row-border, var(--infinite-active-row-border-width, var(--infinite-active-cell-border-width)) var(--infinite-active-row-border-style, var(--infinite-active-cell-border-style)) var(--infinite-active-row-border-color, rgb(var(--infinite-active-cell-border-color--r) var(--infinite-active-cell-border-color--g) var(--infinite-active-cell-border-color--b))));
+  background: var(--infinite-active-row-background, var(--infinite-active-cell-background, rgba(var(--infinite-active-cell-border-color--r), var(--infinite-active-cell-border-color--g), var(--infinite-active-cell-border-color--b), var(--infinite-active-row-background-alpha, var(--infinite-active-cell-background-alpha)))));
+}
+.j26lrx1 {
+  display: block;
+}
+.j26lrx2 {
+  display: none;
+}
+
+/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/components/ActiveCellIndicator.css.ts.vanilla.css?source=Lm54YnExYzAgewogIGJvcmRlcjogdmFyKC0taW5maW5pdGUtYWN0aXZlLWNlbGwtYm9yZGVyLCB2YXIoLS1pbmZpbml0ZS1hY3RpdmUtY2VsbC1ib3JkZXItd2lkdGgpIHZhcigtLWluZmluaXRlLWFjdGl2ZS1jZWxsLWJvcmRlci1zdHlsZSkgdmFyKC0taW5maW5pdGUtYWN0aXZlLWNlbGwtYm9yZGVyLWNvbG9yLCByZ2IodmFyKC0taW5maW5pdGUtYWN0aXZlLWNlbGwtYm9yZGVyLWNvbG9yLS1yKSB2YXIoLS1pbmZpbml0ZS1hY3RpdmUtY2VsbC1ib3JkZXItY29sb3ItLWcpIHZhcigtLWluZmluaXRlLWFjdGl2ZS1jZWxsLWJvcmRlci1jb2xvci0tYikpKSk7CiAgYmFja2dyb3VuZDogdmFyKC0taW5maW5pdGUtYWN0aXZlLWNlbGwtYmFja2dyb3VuZCwgcmdiYSh2YXIoLS1pbmZpbml0ZS1hY3RpdmUtY2VsbC1ib3JkZXItY29sb3ItLXIpLCB2YXIoLS1pbmZpbml0ZS1hY3RpdmUtY2VsbC1ib3JkZXItY29sb3ItLWcpLCB2YXIoLS1pbmZpbml0ZS1hY3RpdmUtY2VsbC1ib3JkZXItY29sb3ItLWIpLCB2YXIoLS1pbmZpbml0ZS1hY3RpdmUtY2VsbC1iYWNrZ3JvdW5kLWFscGhhKSkpOwp9Ci5ueGJxMWMxIHsKICBkaXNwbGF5OiBibG9jazsKfQoubnhicTFjMiB7CiAgZGlzcGxheTogbm9uZTsKfQ== */
+.nxbq1c0 {
+  border: var(--infinite-active-cell-border, var(--infinite-active-cell-border-width) var(--infinite-active-cell-border-style) var(--infinite-active-cell-border-color, rgb(var(--infinite-active-cell-border-color--r) var(--infinite-active-cell-border-color--g) var(--infinite-active-cell-border-color--b))));
+  background: var(--infinite-active-cell-background, rgba(var(--infinite-active-cell-border-color--r), var(--infinite-active-cell-border-color--g), var(--infinite-active-cell-border-color--b), var(--infinite-active-cell-background-alpha)));
+}
+.nxbq1c1 {
+  display: block;
+}
+.nxbq1c2 {
+  display: none;
+}
+
+/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/InfiniteCls.css.ts.vanilla.css?source=Ll8xeWV1YjJ2MCB7CiAgb3V0bGluZTogbm9uZTsKICBmb250LWZhbWlseTogdmFyKC0taW5maW5pdGUtZm9udC1mYW1pbHkpOwogIGNvbG9yOiB2YXIoLS1pbmZpbml0ZS1jb2xvcik7CiAgYmFja2dyb3VuZDogdmFyKC0taW5maW5pdGUtYmFja2dyb3VuZCk7CiAgbWluLWhlaWdodDogdmFyKC0taW5maW5pdGUtbWluLWhlaWdodCk7Cn0KLl8xeWV1YjJ2MSB7CiAgLS1pbmZpbml0ZS1yb3ctcG9pbnRlci1ldmVudHMtd2hpbGUtc2Nyb2xsaW5nOiBub25lOwp9Ci5fMXlldWIydmUgewogIC0taW5maW5pdGUtYWN0aXZlLWNlbGwtYmFja2dyb3VuZC1hbHBoYTogdmFyKC0taW5maW5pdGUtYWN0aXZlLWNlbGwtYmFja2dyb3VuZC1hbHBoYS0tdGFibGUtdW5mb2N1c2VkKTsKICAtLWluZmluaXRlLWFjdGl2ZS1yb3ctYmFja2dyb3VuZC1hbHBoYTogdmFyKC0taW5maW5pdGUtYWN0aXZlLXJvdy1iYWNrZ3JvdW5kLWFscGhhLS10YWJsZS11bmZvY3VzZWQsIHZhcigtLWluZmluaXRlLWFjdGl2ZS1jZWxsLWJhY2tncm91bmQtYWxwaGEtLXRhYmxlLXVuZm9jdXNlZCkpOwp9Ci5fMXlldWIydmkgewogIGJvcmRlci1yaWdodDogdmFyKC0taW5maW5pdGUtY2VsbC1ib3JkZXIpOwp9Ci5fMXlldWIydmogewogIGJvcmRlci1sZWZ0OiB2YXIoLS1pbmZpbml0ZS1jZWxsLWJvcmRlcik7Cn0= */
 ._1yeub2v0 {
+  outline: none;
   font-family: var(--infinite-font-family);
   color: var(--infinite-color);
   background: var(--infinite-background);
@@ -454,14 +505,18 @@
 ._1yeub2v1 {
   --infinite-row-pointer-events-while-scrolling: none;
 }
-._1yeub2vh {
-  border-right: var(--infinite-cell-border);
+._1yeub2ve {
+  --infinite-active-cell-background-alpha: var(--infinite-active-cell-background-alpha--table-unfocused);
+  --infinite-active-row-background-alpha: var(--infinite-active-row-background-alpha--table-unfocused, var(--infinite-active-cell-background-alpha--table-unfocused));
 }
 ._1yeub2vi {
+  border-right: var(--infinite-cell-border);
+}
+._1yeub2vj {
   border-left: var(--infinite-cell-border);
 }
 
-/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/components/cell.css.ts.vanilla.css?source=#H4sIAAAAAAAAA6WSTU7DMBCF9zmFl2ThKm1BSOEwyPFPanA90XjSFCHuTuMUYdNAKGwsWfO95zczXj2utT7KjajYa8HYUx/ImhcuwZP2VDN5OjU+FG/F6oNcz5PG6SMPJJAyerNMs+lmHAw1Qxg46oPGoDOfbfQhFD5YsuBr5rQhtq2qfcjA2wvQg8+97iLSCaWsb2t2EHjDufXGekuaS+0cPxfLMV0DqDTy8b15+AwMVtGuZAGcVVOATuCp28QDbbv7q0nSwH1sQIIDnDeLpTLTNFHTCPncIvReXQjHyX+Wc7H8jRiU+tZATQZTjwRdnCZHoWwffpzHhKR7aIAI9tcbJGnM1zRxL/+Kc71DkiekeRb/SK6lVLv0R0fpO7PTscPzAwAA */
+/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/components/cell.css.ts.vanilla.css?source=#H4sIAAAAAAAAA6WS0U7DMAxF3/sVeWQPmboNhFQ+BmWJ2wayuHLcbQjx76zpEAkrlMFLpMjn3lzbWT6uAI56rUrxWgjx1Ae29YvU6Bk8V0KfTqCH4q1YfpCrabJ2cJSBFXFGr+dpMd5qh4dKEB4kwR4oQOaziT5MygfLFn0lHNQsNmW5Cxl4ewF69LnXXUQ6ZYz1TSX2im6ktL623jJIDc7Jc3ExpNsiGSA5vDcNn4GDNdwuREBnzRigU3TqNvEg27R/NUkauI8NaHRI02axtMg0Jmq2Sj83hL03F8Jh8p/lXAy/EaMx3xrUo8HYI2MXpylJGduHH+cxIuketsiMu+sNkjTt1zRxL/+Kc71DkqdP88z+kVy7T7Vzf3SQvgPi+03E8wMAAA== */
 ._1eexc2a0 {
   justify-content: center;
 }
@@ -486,28 +541,28 @@
 ._1eexc2a7 {
   color: var(--infinite-cell-color);
 }
-._1eexc2ab {
+._1eexc2ad {
   background: var(--infinite-row-background);
 }
-._1eexc2ac {
+._1eexc2ae {
   background: var(--infinite-row-odd-background);
 }
-._1eexc2ad {
+._1eexc2af {
   border-top-left-radius: var(--infinite-cell-border-radius);
   border-bottom-left-radius: var(--infinite-cell-border-radius);
 }
-._1eexc2af {
+._1eexc2ah {
   border-top-right-radius: var(--infinite-cell-border-radius);
   border-bottom-right-radius: var(--infinite-cell-border-radius);
 }
-._1eexc2as {
+._1eexc2au {
   border-right: var(--infinite-cell-border);
 }
-._1eexc2at {
+._1eexc2av {
   border-left: var(--infinite-cell-border);
 }
 
-/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts.vanilla.css?source=#H4sIAAAAAAAAA61V21KkMBR8n6/Iy1bJQ6YAdVeZj7ECCXBqY0KFDI5j+e+SizMJc1HQR8LpPp1O52T9lOX7WpZZit5WCJWk+t8ouRW0QANRNxiDqEGAZrhlhDKFjxXJZgTIjlSgXwuUrh/Nd0coBdGcoCvGOfY/k6AQc1brAuVptzOr+xFB2c4spJvV+2r9KS+38p6JakB4zHl9tlEvlcZQSYEdIom4bn+R6y7kUtC0PyG7t2QchAE5rtS4UkuhcQ97VqDMG1VKZUgVobDtC3Sf/oncz1xVJ3vQIEWBSNlLvtXMrGpFxOe6lt14dHlv12XnG/qN5IYl0Pd3WUZOeFO3A63ls/0IWvxb1qKSXKqLzpufsdOVbXO0RzFONAzWHjkwVXP5UqAWKGUiAlILPMQ0i9XXTr0/m7NpsDFwFbGkJsSeTeVFaDsHil+A6jZBYx6Auix0RDGhN/Okf+eUHCI+qkNGY+v41Nh0Ml4eZrSkijSNmS5R76CbCB0b82ldO9ymK+a5kiTwyuV4PkGgppuqsf7/SM58hkDP7mrI/SyelXI0ol/ZtswHgqZE52FXRYMYoIeSs1i3n+xz7tBRWBUIu/sNYUsHgX8GLr2kYc6PD2qIf1gyQ0OCx6sCTp7yKHlfT41lppDJHfkK+gEMuLU72QgAAA== */
+/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts.vanilla.css?source=#H4sIAAAAAAAAA61Vy3KjMBC8+yt0SdVykAvYTbKLP2ZLIAFTK0uUkLHjVP590SO2hB8JJEfEdE+r1Rqt/2b5sZZllqLXFUIlqf41Su4ELdBA1A+MQdQgQDPcMkKZwueKZDMCZEcq0C8FStd/zHdHKAXRXKArxjn2P5OgEHNW6wLlaXcwq8cRQdnBLKSb1dtq/S4vt/K2RDUgPOa6Ptuol0pjqKTADpFEXD+/ketXyKWgab9C9mjJOAgDclypcaWWQuMejqxAmTeqlMqQKkJh1xfoMX2I3M9cVSd70CBFgUjZS77TzKxqRcT7upbdeHR5b9dl5xv6jeSGJdD3tCwjF7yp24HWcms/ghbPy1pUkkt103nzM3a6sm3O9ijGiYbB2iMHpmou9wVqgVImIiC1wFNMs1h97dT7s7maBhsDVxFLakLs1VTehLZzoHgPVLcJGvMA1GWhI4oJvZkn/TOn5BDxUZ0yGlsnpsamk/Hye0ZLqkjTmOkS9Q66daFjYz6ta6fbdMc8V5IEXrkczycI1KipGuv/l+TMZwj0HO+G3M+8WSlHI/qF7cp8IGhKdB12VzSIAXooOYt1+wE65w6dhVWBsKfvELZ0EPgZeOslDXN+flBDPFkyQ0OC8q6Ai6c8St7HU2OZKdXkjnwE/Q94NTs92QgAAA== */
 ._12zfob10 {
   background: var(--infinite-header-background);
   opacity: 0.9;
@@ -563,47 +618,47 @@
   background: var(--infinite-header-cell-background);
   padding: 0;
 }
-._12zfob1l {
+._12zfob1n {
   z-index: 100;
   opacity: 0.8;
   background: var(--infinite-header-cell-dragging-background);
 }
-._12zfob1n {
+._12zfob1p {
   border-top-left-radius: var(--infinite-cell-border-radius);
   border-bottom-left-radius: var(--infinite-cell-border-radius);
 }
-._12zfob1p {
+._12zfob1r {
   border-top-right-radius: var(--infinite-cell-border-radius);
   border-bottom-right-radius: var(--infinite-cell-border-radius);
 }
-._12zfob1x {
+._12zfob1z {
   z-index: 10;
 }
-._12zfob112 {
+._12zfob114 {
   border-right: var(--infinite-cell-border);
 }
-._1yeub2va ._12zfob112 {
+._1yeub2va ._12zfob114 {
   --infinite-cell-border: var(--infinite-cell-border-invisible);
 }
-._12zfob113 {
+._12zfob115 {
   border-left: var(--infinite-cell-border);
 }
-._1yeub2vc ._12zfob114 {
+._1yeub2vc ._12zfob116 {
   --infinite-cell-border: var(--infinite-cell-border-invisible);
   border-right: var(--infinite-cell-border);
 }
-._12zfob115 {
+._12zfob117 {
   padding: var(--infinite-header-cell-padding);
 }
-._12zfob118 {
+._12zfob11a {
   background: var(--infinite-header-background);
 }
-._12zfob119 {
+._12zfob11b {
   padding: var(--infinite-cell-padding);
   border-bottom: var(--infinite-cell-border);
   border-right: var(--infinite-cell-border);
 }
-._12zfob11a {
+._12zfob11c {
   border-top: var(--infinite-cell-border);
 }