@infinite-table/infinite-react 6.0.20 → 6.1.0-canary.0

package/index.css

@@ -1798,9 +1798,11 @@
   height: var(--infinite-header-cell-icon-size);
 }
 
-/* vanilla-extract-css-ns:src/components/InfiniteTable/components/icons/ExpandCollapseIcon.css.ts.vanilla.css?source=LkV4cGFuZENvbGxhcHNlSWNvbl9FeHBhbmRlckljb25DbHNfXzZyZG15ZzAgewogIGZpbGw6IHZhcigtLWluZmluaXRlLWV4cGFuZC1jb2xsYXBzZS1pY29uLWNvbG9yKTsKfQouRXhwYW5kQ29sbGFwc2VJY29uX0V4cGFuZGVySWNvbkNsc1ZhcmlhbnRzX2Rpc2FibGVkX3RydWVfXzZyZG15ZzYgewogIGN1cnNvcjogYXV0bzsKICBvcGFjaXR5OiAwLjQ7Cn0= */
+/* vanilla-extract-css-ns:src/components/InfiniteTable/components/icons/ExpandCollapseIcon.css.ts.vanilla.css?source=LkV4cGFuZENvbGxhcHNlSWNvbl9FeHBhbmRlckljb25DbHNfXzZyZG15ZzAgewogIGZpbGw6IHZhcigtLWluZmluaXRlLWV4cGFuZC1jb2xsYXBzZS1pY29uLWNvbG9yKTsKICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgdmVydGljYWwtYWxpZ246IGJvdHRvbTsKfQouRXhwYW5kQ29sbGFwc2VJY29uX0V4cGFuZGVySWNvbkNsc1ZhcmlhbnRzX2Rpc2FibGVkX3RydWVfXzZyZG15ZzYgewogIGN1cnNvcjogYXV0bzsKICBvcGFjaXR5OiAwLjQ7Cn0= */
 .ExpandCollapseIcon_ExpanderIconCls__6rdmyg0 {
   fill: var(--infinite-expand-collapse-icon-color);
+  display: inline-block;
+  vertical-align: bottom;
 }
 .ExpandCollapseIcon_ExpanderIconClsVariants_disabled_true__6rdmyg6 {
   cursor: auto;

package/index.d.ts

@@ -78,7 +78,7 @@ declare type Pair<KeyType, ValueType> = {
     length: number;
     revision?: number;
 };
-declare type DeepMapVisitFn<KeyType, ValueType> = (pair: Pair<KeyType, ValueType>, keys: KeyType[], next: VoidFn$1) => void;
+declare type DeepMapVisitFn<KeyType, ValueType, ReturnType = void> = (pair: Pair<KeyType, ValueType>, keys: KeyType[], next: VoidFn$1) => ReturnType;
 declare class DeepMap<KeyType, ValueType> {
     private map;
     private length;
@@ -105,9 +105,11 @@ declare class DeepMap<KeyType, ValueType> {
     has(keys: KeyType[]): boolean;
     private visitKey;
     visit: (fn: DeepMapVisitFn<KeyType, ValueType>) => void;
+    visitSome: (fn: (value: ValueType, keys: KeyType[], indexInGroup: number, next?: VoidFn$1 | undefined) => boolean) => void;
     visitDepthFirst: (fn: (value: ValueType, keys: KeyType[], indexInGroup: number, next?: VoidFn$1 | undefined) => void) => void;
     private visitWithNext;
     private getArray;
+    rawKeysAt(keys: KeyType[]): KeyType[];
     valuesAt(keys: KeyType[]): ValueType[];
     values(): Generator<ValueType, void, unknown>;
     keys(): Generator<KeyType[], void, unknown>;
@@ -1522,86 +1524,6 @@ declare class RowDetailState<KeyType = any> extends BooleanCollectionState<RowDe
     toggleRowDetails(key: KeyType): void;
 }
 
-declare type SubscriptionCallbackOnChangeFn<T> = (node: T | null) => void;
-interface SubscriptionCallback<T> {
-    (node: T, callback?: () => void): void;
-    get: () => T | null;
-    destroy: VoidFn;
-    onChange: (fn: SubscriptionCallbackOnChangeFn<T>) => VoidFn;
-}
-
-/**
- * This class abstracts the following behavior:
- *
- * in the DOM, we have a list (flat, so no nesting) of elements that represent table cells
- * At any one time, just a fraction of all table cells are rendered/present in the DOM
- * and we need to keep track and know for each element what cell represents and for each
- * rendered cell, to what element it is currently mapped (so we need a bi-directional mapping)
- *
- * This class has tests - see tests/mapped-cells.spec.ts
- */
-declare class MappedCells<T_ADDITIONAL_CELL_INFO = any> extends Logger {
-    /**
-     * This is the mapping from element index to cell info.
-     * The index in the array is the element index while the value at the position is an array where
-     * the first number is the row index and the second number is the column index.
-     */
-    private elementIndexToCell;
-    /**
-     * This is the mapping from cell address to element index.
-     * The key in the map is the cell address (built like this: `${rowIndex}:${columnIndex}`)
-     * while the value is the element index it is being rendered to.
-     */
-    private cellToElementIndex;
-    private cellAdditionalInfo;
-    /**
-     * Keeps the JSX of rendered elements in memory, so we can possibly reuse it later.
-     */
-    private renderedElements;
-    private withCellAdditionalInfo;
-    constructor(opts?: {
-        withCellAdditionalInfo: boolean;
-    });
-    getElementFromListForColumn: (elementsOutsideItemRange: number[], colIndex: number) => number | undefined;
-    getElementFromListForRow: (elementsOutsideItemRange: number[], _rowIndex: number) => number | undefined;
-    init(): void;
-    reset(): void;
-    destroy(): void;
-    /**
-     * Retrieves the elements that contain rendered cells that are outside
-     * of the specified range
-     *
-     * @param start in [rowIndex, colIndex] format - represents the topmost-leftmost cell visible of the render range
-     * @param end in [rowIndex, colIndex] format - represents the bottom-right corner of the visible range. The end is not inclusive,
-     * so the last visible cell will be [rowIndex-1, colIndex-1]
-     *
-     * @returns an array of element indexes that are outside the specified range
-     */
-    getElementsOutsideRenderRange: (range: TableRenderRange) => number[];
-    isCellRendered: (rowIndex: number, columnIndex: number) => boolean;
-    getCellAdditionalInfo: (rowIndex: number, columnIndex: number) => T_ADDITIONAL_CELL_INFO | undefined;
-    isElementRendered: (elementIndex: number) => boolean;
-    getElementsForRowIndex: (rowIndex: number) => number[];
-    getAdditionalInfoForRowIndex: (rowIndex: number) => T_ADDITIONAL_CELL_INFO[];
-    getRenderedNodeAtElement: (elementIndex: number) => Renderable | null;
-    getRenderedCellAtElement: (elementIndex: number) => [
-        number,
-        number
-    ] | null;
-    getRenderedNodeForCell: (rowIndex: number, columnIndex: number) => Renderable | null;
-    getElementIndexForCell: (rowIndex: number, columnIndex: number) => number | null;
-    renderCellAtElement: (rowIndex: number, colIndex: number, elementIndex: number, renderNode: Renderable | undefined, cellAdditionalInfo?: T_ADDITIONAL_CELL_INFO | undefined) => void;
-    discardCell: (rowIndex: number, colIndex: number) => void;
-    discardElement: (elementIndex: number) => [
-        number,
-        number
-    ] | null;
-    discardElementsStartingWith: (elIndex: number, callback?: ((index: number, cell: [
-        number,
-        number
-    ] | null) => void) | undefined) => boolean;
-}
-
 declare type TableRenderCellFnParam = {
     domRef: RefCallback<HTMLElement>;
     rowIndex: number;
@@ -1638,25 +1560,140 @@ declare type RenderRangeOptions = {
 declare type HorizontalLayoutColVisibilityOptions = {
     horizontalLayoutPageIndex?: number;
 };
-declare class ReactHeadlessTableRenderer extends Logger {
+
+interface GridCellInterface<T_ADDITIONAL_CELL_INFO = any> {
+    debugId: string;
+    update(content: Renderable, additionalInfo?: T_ADDITIONAL_CELL_INFO): void;
+    getElement(): HTMLElement | null;
+    getNode(): Renderable;
+    destroy(): void;
+    onMount(callback: (cell: GridCellInterface<T_ADDITIONAL_CELL_INFO>) => void): void;
+    getAdditionalInfo(): T_ADDITIONAL_CELL_INFO | undefined;
+    ref: (htmlElement: HTMLElement) => void;
+}
+
+declare type CellPos = [number, number];
+
+declare class GridCellManager<T_ADDITIONAL_CELL_INFO> extends Logger {
+    private matrix;
+    private matrixWithHistory;
+    private cellToMatrixPosition;
+    private pool;
+    debugId: string;
+    private offRemoveCell;
+    constructor(debugId: string);
+    private onRemoveCell;
+    set poolSize(cellCount: number);
+    get poolSize(): number;
+    getDetachedCell(): GridCellInterface<T_ADDITIONAL_CELL_INFO>;
+    private setCellPositionInMatrix;
+    renderNodeAtCell(node: Renderable, cell: GridCellInterface<T_ADDITIONAL_CELL_INFO>, cellPos: CellPos, additionalInfo?: T_ADDITIONAL_CELL_INFO): GridCellInterface<T_ADDITIONAL_CELL_INFO>;
+    getCellPosition(cell: GridCellInterface<T_ADDITIONAL_CELL_INFO>): CellPos | null;
+    getCellAt(cellPos: CellPos): GridCellInterface<T_ADDITIONAL_CELL_INFO> | undefined;
+    /**
+     * This gets a cell for a given position.
+     * If there's already a cell currently attached at that position, it will be returned.
+     *
+     * Otherwise, we try to return the most optimal cell to use for that position.
+     * If the optimise parameter is set to 'row', we will try to return a detached cell
+     * that was last rendered in that row.
+     *
+     * If the optimise parameter is set to 'column', we will try to return a detached cell
+     * that was last rendered in that column.
+     *
+     * @param cellPos [rowIndex, colIndex]
+     * @param optimise 'row' | 'column'
+     */
+    getCellFor(cellPos: CellPos, optimise: 'row' | 'column'): GridCellInterface<T_ADDITIONAL_CELL_INFO>;
+    isCellAttached(cell: GridCellInterface<T_ADDITIONAL_CELL_INFO>): boolean;
+    isCellAttachedAt(cellPos: CellPos): boolean;
+    getMatrix(): Renderable[][];
+    getAllCells(): GridCellInterface<T_ADDITIONAL_CELL_INFO>[];
+    getCellsForRow(rowIndex: number): GridCellInterface<T_ADDITIONAL_CELL_INFO>[];
+    getOneAttachedCell(): any;
+    getRowsWithCells(): number[];
+    getColumnsWithCells(): number[];
+    isRowAttached(rowIndex: number): boolean;
+    isColumnAttached(colIndex: number): boolean;
+    detachRow(rowIndex: number): void;
+    detachCol(colIndex: number): void;
+    detachCell(cell: GridCellInterface<T_ADDITIONAL_CELL_INFO>): void;
+    detachCells(cells: Set<GridCellInterface<T_ADDITIONAL_CELL_INFO>>): void;
+    detachRowsStartingWith(rowIndex: number): void;
+    detachColsStartingWith(colIndex: number): void;
+    detachCellsStartingAt(cellPos: CellPos): void;
+    detachCellAt(cellPos: CellPos): void;
+    getCellsOutsideRenderRange: (range: TableRenderRange) => Set<GridCellInterface<T_ADDITIONAL_CELL_INFO>>;
+    getCellFromListForRow(cells: Set<GridCellInterface<T_ADDITIONAL_CELL_INFO>>, rowIndex: number): GridCellInterface<T_ADDITIONAL_CELL_INFO> | undefined;
+    getCellFromListForColumn(cells: Set<GridCellInterface<T_ADDITIONAL_CELL_INFO>>, colIndex: number): GridCellInterface<T_ADDITIONAL_CELL_INFO> | undefined;
+    getCellCountInMatrix(): number;
+    destroy(): void;
+    reset(): void;
+    makeDetachedCellsEmpty(): void;
+}
+
+/**
+ * This is only used for rendering Detail rows in a master-detail DataGrid
+ */
+interface ListRowInterface {
+    debugId: string;
+    update(content: Renderable): void;
+    getElement(): HTMLElement | null;
+    getNode(): Renderable;
+    destroy(): void;
+    onMount(callback: (row: ListRowInterface) => void): void;
+    ref: (htmlElement: HTMLElement) => void;
+}
+
+declare class ListRowManager extends Logger {
+    private pool;
+    private indexToRow;
+    private rowToIndex;
+    debugId: string;
+    private offRemoveRow;
+    constructor(debugId: string);
+    private onRemoveRow;
+    set poolSize(rowCount: number);
+    get poolSize(): number;
+    getDetachedRow(): ListRowInterface;
+    /**
+     * This gets a row for a given position.
+     * If there's already a row currently attached at that position, it will be returned.
+     *
+     * Otherwise, we return another row.
+     * @param rowIndex
+     */
+    getRowFor(rowIndex: number): ListRowInterface;
+    private setRowIndexInList;
+    detachStartingWith(rowIndex: number): void;
+    getRowAt(rowPos: number): ListRowInterface | undefined;
+    getRowIndex(row: ListRowInterface): number | undefined;
+    isRowAttached(row: ListRowInterface): boolean;
+    isRowAttachedAt(rowIndex: number): boolean;
+    getList(): Renderable[];
+    getAttachedCount(): number;
+    forEachAttachedRow(fn: (row: ListRowInterface) => void): void;
+    getAttachedIndexes(): number[];
+    getAllRows(): ListRowInterface[];
+    detachRowAt(rowIndex: number): void;
+    detachRow(row: ListRowInterface): void;
+    renderNodeAtRow(node: Renderable, row: ListRowInterface, rowIndex: number): ListRowInterface;
+    makeDetachedRowsEmpty(): void;
+    destroy(): void;
+    reset(): void;
+}
+
+declare class GridRenderer extends Logger {
     protected brain: MatrixBrain;
     debugId: string;
     protected destroyed: boolean;
     private scrolling;
     cellHoverClassNames: string[];
-    private itemDOMElements;
-    protected itemDOMRefs: RefCallback<HTMLElement>[];
-    protected updaters: SubscriptionCallback<Renderable>[];
-    private detailRowDOMElements;
-    private detailRowDOMRefs;
-    private detailRowUpdaters;
-    protected mappedCells: MappedCells<{
+    protected cellManager: GridCellManager<{
         renderRowIndex: number;
         renderColIndex: number;
     }>;
-    private mappedDetailRows;
-    private items;
-    private detailItems;
+    protected rowManager: ListRowManager;
     private lastEnteredRow;
     private lastExitedRow;
     private onDestroy;
@@ -1710,8 +1747,6 @@ declare class ReactHeadlessTableRenderer extends Logger {
         mapped: boolean;
     };
     renderRange(range: TableRenderRange, { renderCell, renderDetailRow, force, onRender }: RenderRangeOptions): Renderable[];
-    private renderElement;
-    private renderDetailElement;
     getFixedRanges: (currentRenderRange: TableRenderRange) => TableRenderRange[];
     protected isCellFixed: (rowIndex: number, colIndex: number) => {
         row: FixedPosition;
@@ -1723,13 +1758,16 @@ declare class ReactHeadlessTableRenderer extends Logger {
         rowIndex: number;
         colIndex: number;
     };
-    protected renderCellAtElement(rowIndex: number, colIndex: number, elementIndex: number, renderCell: TableRenderCellFn): void;
+    protected renderCellAt(rowIndex: number, colIndex: number, cell: GridCellInterface, renderCell: TableRenderCellFn): void;
     protected onMouseEnter: (rowIndex: number) => void;
     private addHoverClass;
     protected onMouseLeave: (rowIndex: number) => void;
     private removeHoverClass;
     protected updateHoverClassNamesForRow: (rowIndex: number) => void;
-    protected updateElementPosition: (elementIndex: number, options?: {
+    protected updateElementPosition: (cell: GridCellInterface<{
+        renderRowIndex: number;
+        renderColIndex: number;
+    }>, options?: {
         hidden: boolean;
         rowspan: number;
         colspan: number;
@@ -1742,6 +1780,14 @@ declare class ReactHeadlessTableRenderer extends Logger {
     reset(): void;
 }
 
+declare type SubscriptionCallbackOnChangeFn<T> = (node: T | null) => void;
+interface SubscriptionCallback<T> {
+    (node: T, callback?: () => void): void;
+    get: () => T | null;
+    destroy: VoidFn;
+    onChange: (fn: SubscriptionCallbackOnChangeFn<T>) => VoidFn;
+}
+
 declare class ScrollListener {
     private scrollPosition;
     private onScrollFns;
@@ -1769,7 +1815,7 @@ declare type ContextMenuLocationWithEvent = Partial<CellContextMenuLocation> & {
 interface InfiniteTableSetupState<T> {
     brain: MatrixBrain;
     headerBrain: MatrixBrain;
-    renderer: ReactHeadlessTableRenderer;
+    renderer: GridRenderer;
     onRenderUpdater: SubscriptionCallback<Renderable>;
     forceBodyRerenderTimestamp: number;
     lastRowToExpandRef: MutableRefObject<any | null>;