@vuu-ui/vuu-table 0.8.94 → 0.8.96

package/esm/useTableViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableViewport.js","sources":["../src/useTableViewport.ts"],"sourcesContent":["/**\n * This hook measures and calculates the values needed to manage layout\n * and virtualisation of the table. This includes measurements required\n * to support pinned columns.\n */\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { MeasuredSize } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  actualRowPositioning,\n  measurePinnedColumns,\n  RowAtPositionFunc,\n  RowOffsetFunc,\n  RowPositioning,\n  virtualRowPositioning,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef } from \"react\";\n\nexport interface TableViewportHookProps {\n  columns: RuntimeColumnDescriptor[];\n  headerHeight: number;\n  rowCount: number;\n  rowHeight: number;\n  /**\n   * this is the solid left/right `border` rendered on the selection block\n   */\n  selectionEndSize?: number;\n  size: MeasuredSize | undefined;\n}\n\nexport interface ViewportMeasurements {\n  appliedPageSize: number;\n  contentHeight: number;\n  horizontalScrollbarHeight: number;\n  isVirtualScroll: boolean;\n  pinnedWidthLeft: number;\n  pinnedWidthRight: number;\n  rowCount: number;\n  contentWidth: number;\n  totalHeaderHeight: number;\n  usesMeasuredHeaderHeight: boolean;\n  verticalScrollbarWidth: number;\n  viewportBodyHeight: number;\n  viewportWidth: number;\n}\n\nexport interface TableViewportHookResult extends ViewportMeasurements {\n  getRowAtPosition: RowAtPositionFunc;\n  getRowOffset: RowOffsetFunc;\n  setInSituRowOffset: (rowIndexOffset: number) => void;\n  setScrollTop: (scrollTop: number, scrollPct: number) => void;\n}\n\n// Too simplistic, it depends on rowHeight\nconst MAX_PIXEL_HEIGHT = 10_000_000;\n\nconst UNMEASURED_VIEWPORT: TableViewportHookResult = {\n  appliedPageSize: 0,\n  contentHeight: 0,\n  contentWidth: 0,\n  getRowAtPosition: () => -1,\n  getRowOffset: () => -1,\n  horizontalScrollbarHeight: 0,\n  isVirtualScroll: false,\n  pinnedWidthLeft: 0,\n  pinnedWidthRight: 0,\n  rowCount: 0,\n  setInSituRowOffset: () => undefined,\n  setScrollTop: () => undefined,\n  totalHeaderHeight: 0,\n  usesMeasuredHeaderHeight: false,\n  verticalScrollbarWidth: 0,\n  viewportBodyHeight: 0,\n  viewportWidth: 0,\n};\n\nexport const useTableViewport = ({\n  columns,\n  headerHeight,\n  rowCount,\n  rowHeight,\n  selectionEndSize = 4,\n  size,\n}: TableViewportHookProps): TableViewportHookResult => {\n  const inSituRowOffsetRef = useRef(0);\n  const pctScrollTopRef = useRef(0);\n  // TODO we are limited by pixels not an arbitrary number of rows\n  const virtualContentHeight = rowCount * rowHeight;\n  const pixelContentHeight = Math.min(virtualContentHeight, MAX_PIXEL_HEIGHT);\n  const virtualisedExtent = virtualContentHeight - pixelContentHeight;\n\n  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo(\n    () => measurePinnedColumns(columns, selectionEndSize),\n    [columns, selectionEndSize],\n  );\n\n  const [getRowOffset, getRowAtPosition, isVirtualScroll] =\n    useMemo<RowPositioning>(() => {\n      if (virtualisedExtent) {\n        const [_getRowOffset, getRowAtPosition, _isVirtual] =\n          virtualRowPositioning(rowHeight, virtualisedExtent, pctScrollTopRef);\n        const getOffset: RowOffsetFunc = (row) => {\n          return _getRowOffset(row, inSituRowOffsetRef.current);\n        };\n        return [getOffset, getRowAtPosition, _isVirtual];\n      } else {\n        return actualRowPositioning(rowHeight);\n      }\n    }, [virtualisedExtent, rowHeight]);\n\n  const setScrollTop = useCallback((_: number, scrollPct: number) => {\n    pctScrollTopRef.current = scrollPct;\n  }, []);\n\n  /**\n   * The inSituRowOffset is used to simulate scrolling through a very large dataset\n   * without actually moving the scroll position. It is triggered by keyboard\n   * navigation. A simulated scroll operation will always be of one or more rows.\n   * A value of zero is a request to reset the offset.\n   */\n  const setInSituRowOffset = useCallback((rowIndexOffset: number) => {\n    if (rowIndexOffset === 0) {\n      inSituRowOffsetRef.current = 0;\n    } else {\n      inSituRowOffsetRef.current = Math.max(\n        0,\n        inSituRowOffsetRef.current + rowIndexOffset,\n      );\n    }\n  }, []);\n\n  return useMemo(() => {\n    if (size) {\n      // TODO determine this at runtime\n      const scrollbarSize = 10;\n      const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;\n      const horizontalScrollbarHeight =\n        contentWidth > size.width ? scrollbarSize : 0;\n      const measuredHeaderHeight = headerHeight === -1 ? 0 : headerHeight;\n      const visibleRows = (size.height - measuredHeaderHeight) / rowHeight;\n      const count = Number.isInteger(visibleRows)\n        ? visibleRows\n        : Math.ceil(visibleRows);\n      const viewportBodyHeight = size.height - measuredHeaderHeight;\n      const verticalScrollbarWidth =\n        pixelContentHeight > viewportBodyHeight ? scrollbarSize : 0;\n\n      const appliedPageSize =\n        count * rowHeight * (pixelContentHeight / virtualContentHeight);\n\n      const viewportWidth = size.width;\n\n      return {\n        usesMeasuredHeaderHeight: headerHeight !== -1,\n        appliedPageSize,\n        contentHeight: pixelContentHeight,\n        contentWidth,\n        getRowAtPosition,\n        getRowOffset,\n        isVirtualScroll,\n        horizontalScrollbarHeight,\n        pinnedWidthLeft,\n        pinnedWidthRight,\n        rowCount: count,\n        setInSituRowOffset,\n        setScrollTop,\n        totalHeaderHeight: headerHeight,\n        verticalScrollbarWidth,\n        viewportBodyHeight,\n        viewportWidth,\n      };\n    } else {\n      return UNMEASURED_VIEWPORT;\n    }\n  }, [\n    getRowAtPosition,\n    getRowOffset,\n    headerHeight,\n    isVirtualScroll,\n    pinnedWidthLeft,\n    unpinnedWidth,\n    pinnedWidthRight,\n    pixelContentHeight,\n    rowHeight,\n    setInSituRowOffset,\n    setScrollTop,\n    size,\n    virtualContentHeight,\n  ]);\n};\n"],"names":["getRowAtPosition"],"mappings":"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"}
+{"version":3,"file":"useTableViewport.js","sources":["../src/useTableViewport.ts"],"sourcesContent":["/**\n * This hook measures and calculates the values needed to manage layout\n * and virtualisation of the table. This includes measurements required\n * to support pinned columns.\n */\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { MeasuredSize } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  actualRowPositioning,\n  measurePinnedColumns,\n  RowAtPositionFunc,\n  RowOffsetFunc,\n  RowPositioning,\n  virtualRowPositioning,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef } from \"react\";\n\nexport interface TableViewportHookProps {\n  columns: RuntimeColumnDescriptor[];\n  headerHeight: number;\n  rowCount: number;\n  rowHeight: number;\n  /**\n   * this is the solid left/right `border` rendered on the selection block\n   */\n  selectionEndSize?: number;\n  showPaginationControls?: boolean;\n  size: MeasuredSize;\n}\n\nexport interface ViewportMeasurements {\n  appliedPageSize: number;\n  contentHeight: number;\n  horizontalScrollbarHeight: number;\n  isVirtualScroll: boolean;\n  pinnedWidthLeft: number;\n  pinnedWidthRight: number;\n  rowCount: number;\n  contentWidth: number;\n  totalHeaderHeight: number;\n  usesMeasuredHeaderHeight: boolean;\n  verticalScrollbarWidth: number;\n  viewportBodyHeight: number;\n  viewportWidth: number;\n}\n\nexport interface TableViewportHookResult extends ViewportMeasurements {\n  getRowAtPosition: RowAtPositionFunc;\n  getRowOffset: RowOffsetFunc;\n  setInSituRowOffset: (rowIndexOffset: number) => void;\n  setScrollTop: (scrollTop: number, scrollPct: number) => void;\n}\n\n// Too simplistic, it depends on rowHeight\nconst MAX_PIXEL_HEIGHT = 10_000_000;\n\nconst UNMEASURED_VIEWPORT: TableViewportHookResult = {\n  appliedPageSize: 0,\n  contentHeight: 0,\n  contentWidth: 0,\n  getRowAtPosition: () => -1,\n  getRowOffset: () => -1,\n  horizontalScrollbarHeight: 0,\n  isVirtualScroll: false,\n  pinnedWidthLeft: 0,\n  pinnedWidthRight: 0,\n  rowCount: 0,\n  setInSituRowOffset: () => undefined,\n  setScrollTop: () => undefined,\n  totalHeaderHeight: 0,\n  usesMeasuredHeaderHeight: false,\n  verticalScrollbarWidth: 0,\n  viewportBodyHeight: 0,\n  viewportWidth: 0,\n};\n\nconst getViewportHeightProps = (\n  rowCount: number,\n  rowHeight: number,\n  size: MeasuredSize,\n  showPaginationControls = false,\n) => {\n  if (showPaginationControls) {\n    return {\n      pixelContentHeight: size.height,\n      virtualContentHeight: size.height,\n      virtualisedExtent: 0,\n    };\n  } else {\n    const virtualContentHeight = rowCount * rowHeight;\n    const pixelContentHeight = Math.min(virtualContentHeight, MAX_PIXEL_HEIGHT);\n    const virtualisedExtent = virtualContentHeight - pixelContentHeight;\n    return {\n      pixelContentHeight,\n      virtualContentHeight,\n      virtualisedExtent,\n    };\n  }\n};\n\nexport const useTableViewport = ({\n  columns,\n  headerHeight,\n  rowCount,\n  rowHeight,\n  selectionEndSize = 4,\n  showPaginationControls,\n  size,\n}: TableViewportHookProps): TableViewportHookResult => {\n  const inSituRowOffsetRef = useRef(0);\n  const pctScrollTopRef = useRef(0);\n\n  const { virtualContentHeight, pixelContentHeight, virtualisedExtent } =\n    getViewportHeightProps(rowCount, rowHeight, size, showPaginationControls);\n\n  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo(\n    () => measurePinnedColumns(columns, selectionEndSize),\n    [columns, selectionEndSize],\n  );\n\n  const [getRowOffset, getRowAtPosition, isVirtualScroll] =\n    useMemo<RowPositioning>(() => {\n      if (virtualisedExtent) {\n        const [_getRowOffset, getRowAtPosition, _isVirtual] =\n          virtualRowPositioning(rowHeight, virtualisedExtent, pctScrollTopRef);\n        const getOffset: RowOffsetFunc = (row) => {\n          return _getRowOffset(row, inSituRowOffsetRef.current);\n        };\n        return [getOffset, getRowAtPosition, _isVirtual];\n      } else {\n        return actualRowPositioning(rowHeight);\n      }\n    }, [virtualisedExtent, rowHeight]);\n\n  const setScrollTop = useCallback((_: number, scrollPct: number) => {\n    pctScrollTopRef.current = scrollPct;\n  }, []);\n\n  /**\n   * The inSituRowOffset is used to simulate scrolling through a very large dataset\n   * without actually moving the scroll position. It is triggered by keyboard\n   * navigation. A simulated scroll operation will always be of one or more rows.\n   * A value of zero is a request to reset the offset.\n   */\n  const setInSituRowOffset = useCallback((rowIndexOffset: number) => {\n    if (rowIndexOffset === 0) {\n      inSituRowOffsetRef.current = 0;\n    } else {\n      inSituRowOffsetRef.current = Math.max(\n        0,\n        inSituRowOffsetRef.current + rowIndexOffset,\n      );\n    }\n  }, []);\n\n  return useMemo(() => {\n    if (size) {\n      // TODO determine this at runtime\n      const scrollbarSize = 10;\n      const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;\n      const horizontalScrollbarHeight =\n        contentWidth > size.width ? scrollbarSize : 0;\n      const measuredHeaderHeight = headerHeight === -1 ? 0 : headerHeight;\n      const visibleRows = showPaginationControls\n        ? Math.floor((pixelContentHeight - headerHeight) / rowHeight)\n        : (size.height - headerHeight) / rowHeight;\n      const count = Number.isInteger(visibleRows)\n        ? visibleRows\n        : Math.ceil(visibleRows);\n      const viewportBodyHeight = size.height - measuredHeaderHeight;\n      const verticalScrollbarWidth = showPaginationControls\n        ? 0\n        : pixelContentHeight > viewportBodyHeight\n          ? scrollbarSize\n          : 0;\n\n      const appliedPageSize =\n        count * rowHeight * (pixelContentHeight / virtualContentHeight);\n\n      const viewportWidth = size.width;\n\n      return {\n        usesMeasuredHeaderHeight: headerHeight !== -1,\n        appliedPageSize,\n        contentHeight: pixelContentHeight,\n        contentWidth,\n        getRowAtPosition,\n        getRowOffset,\n        isVirtualScroll,\n        horizontalScrollbarHeight,\n        pinnedWidthLeft,\n        pinnedWidthRight,\n        rowCount: count,\n        setInSituRowOffset,\n        setScrollTop,\n        totalHeaderHeight: headerHeight,\n        verticalScrollbarWidth,\n        viewportBodyHeight,\n        viewportWidth,\n      };\n    } else {\n      return UNMEASURED_VIEWPORT;\n    }\n  }, [\n    size,\n    pinnedWidthLeft,\n    unpinnedWidth,\n    pinnedWidthRight,\n    headerHeight,\n    rowHeight,\n    showPaginationControls,\n    pixelContentHeight,\n    virtualContentHeight,\n    getRowAtPosition,\n    getRowOffset,\n    isVirtualScroll,\n    setInSituRowOffset,\n    setScrollTop,\n  ]);\n};\n"],"names":["getRowAtPosition"],"mappings":"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"}

package/package.json

@@ -1,21 +1,21 @@
 {
-  "version": "0.8.94",
+  "version": "0.8.96",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.94",
-    "@vuu-ui/vuu-table-types": "0.8.94",
-    "@vuu-ui/vuu-protocol-types": "0.8.94"
+    "@vuu-ui/vuu-data-types": "0.8.96",
+    "@vuu-ui/vuu-table-types": "0.8.96",
+    "@vuu-ui/vuu-protocol-types": "0.8.96"
   },
   "dependencies": {
     "@salt-ds/core": "1.34.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-react": "0.8.94",
-    "@vuu-ui/vuu-layout": "0.8.94",
-    "@vuu-ui/vuu-popups": "0.8.94",
-    "@vuu-ui/vuu-ui-controls": "0.8.94",
-    "@vuu-ui/vuu-utils": "0.8.94"
+    "@vuu-ui/vuu-data-react": "0.8.96",
+    "@vuu-ui/vuu-layout": "0.8.96",
+    "@vuu-ui/vuu-popups": "0.8.96",
+    "@vuu-ui/vuu-ui-controls": "0.8.96",
+    "@vuu-ui/vuu-utils": "0.8.96"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",

package/types/Table.d.ts

@@ -4,9 +4,14 @@ import type { DragDropState } from "@vuu-ui/vuu-ui-controls";
 import { DragStartHandler, MeasuredContainerProps, dragStrategy } from "@vuu-ui/vuu-ui-controls";
 import { FC, ForwardedRef } from "react";
 import { ScrollingAPI } from "./useTableScroll";
+import { TableCellBlock } from "./cell-block/cellblock-utils";
 export type TableNavigationStyle = "none" | "cell" | "row";
 export interface TableProps extends Omit<MeasuredContainerProps, "onDragStart" | "onDrop" | "onSelect"> {
     Row?: FC<RowProps>;
+    /**
+     * Allow a block of cells to be selected. Typically to be copied.
+     */
+    allowCellBlockSelection?: boolean;
     allowConfigEditing?: boolean;
     /**
      * Allow column headers to be dragged to re-arrange
@@ -39,6 +44,15 @@ export interface TableProps extends Omit<MeasuredContainerProps, "onDragStart" |
      * Default is cell.
      */
     highlightedIndex?: number;
+    /**
+     * Behaves in most respects like viewportRowLimit except that, when there are fewer
+     * rows available than the limit set here, the Table height will reduce. This can be
+     * useful where a Table is used in a dropdown control.
+     */
+    maxViewportRowLimit?: number;
+    /**
+     * Determines bahaviour of keyboard navigation , either row focused or cell focused.
+     */
     navigationStyle?: TableNavigationStyle;
     /**
      * required if a fully featured column picker is to be available.
@@ -61,6 +75,16 @@ export interface TableProps extends Omit<MeasuredContainerProps, "onDragStart" |
      */
     onRowClick?: TableRowClickHandler;
     onSelect?: TableRowSelectHandler;
+    /**
+     * Triggered when a block of cells is selected. CellBlock selection can be
+     * effected with either mouse or keyboard.
+     * - mouse: hold down mouse and drag over selection area
+     * - keyboard: press and hold shift key from start cell, then use arrow keys
+     *   to extend selection block.
+     *
+     * This callback is invoked when mouse is released or shift key released.
+     */
+    onSelectCellBlock?: (cellBlock: TableCellBlock) => void;
     onSelectionChange?: SelectionChangeHandler;
     renderBufferSize?: number;
     /**
@@ -96,5 +120,21 @@ export interface TableProps extends Omit<MeasuredContainerProps, "onDragStart" |
      * from contexct menu
      */
     showColumnHeaderMenus?: boolean;
+    /**
+     * if true, pagination will be used to navigate data, scrollbars will not be rendered
+     */
+    showPaginationControls?: boolean;
+    /**
+     * As an alternative to sizing the Table height via CSS or via an explicit height value,
+     * specify the number of rows to be displayed within the Viewport. The actual height
+     * will then be the product of  viewportRowLimit and rowHeight. Row Height will be
+     * determined in the usual way, it can be specified explicitly in a prop or set via
+     * CSS. If both explicit height and viewportRowLimit are provided by props, rowHeight
+     * will be derived from these. Do not pass props for all three values - height,
+     * rowHeight and viewportRowLimit. That will be rejected.
+     * Use maxViewportRowLimit rather than viewportRowLimit if the height of the table
+     * should be reduced when fewer rows are actually available than the limit specified.
+     */
+    viewportRowLimit?: number;
 }
 export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/cell-block/CellBlock.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+export interface CellBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCopy"> {
+    debugName?: string;
+    onCopy?: () => void;
+}
+export declare const CellBlock: import("react").ForwardRefExoticComponent<CellBlockProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/cell-block/cellblock-utils.d.ts

@@ -0,0 +1,37 @@
+import { VuuRange } from "@vuu-ui/vuu-protocol-types";
+export type TableCellBlock = {
+    columnRange: VuuRange;
+    rowRange: VuuRange;
+};
+export type CellBox = {
+    bottom: number;
+    left: number;
+    right: number;
+    top: number;
+};
+export declare const isNullCellBox: ({ bottom, left, right, top }: CellBox) => boolean;
+type EndCellDirection = "self" | "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
+export declare const getEndCellDirection: (startBox: CellBox, endBox: CellBox) => EndCellDirection;
+export declare const setElementBox: (el: HTMLElement, box: CellBox) => void;
+export declare const outsideBox: ({ bottom, left, right, top }: CellBox, x: number, y: number) => boolean;
+export declare const getTableCellBlock: (startCell: HTMLDivElement, endCell: HTMLDivElement) => TableCellBlock;
+export type RefState = {
+    dragState: "pending" | "active";
+    cellBlock: HTMLDivElement | null;
+    cellBlockClassName: string;
+    endBox: CellBox;
+    endCell: HTMLDivElement | null;
+    endPos: PosTuple;
+    mousePosX: number;
+    mousePosY: number;
+    mouseStartX: number;
+    mouseStartY: number;
+    startCell: HTMLDivElement | null;
+    startBox: CellBox;
+    startPos: PosTuple;
+};
+export type PosTuple = [number, number];
+export declare const refState: RefState;
+export declare const updateCellBlockClassName: (state: RefState) => void;
+export declare const getTextFromCells: (startCell: HTMLDivElement, endCell: HTMLDivElement) => string;
+export {};

package/types/cell-block/useCellBlockSelection.d.ts

@@ -0,0 +1,16 @@
+import { KeyboardEventHandler, MouseEventHandler, ReactElement, RefObject } from "react";
+import { FocusCell } from "../useCellFocus";
+import { TableCellBlock } from "./cellblock-utils";
+export interface CellblockSelectionHookProps {
+    allowCellBlockSelection?: boolean;
+    columnCount?: number;
+    containerRef: RefObject<HTMLElement>;
+    focusCell: FocusCell;
+    onSelectCellBlock?: (cellBlock: TableCellBlock) => void;
+    rowCount?: number;
+}
+export declare const useCellBlockSelection: ({ allowCellBlockSelection, columnCount, containerRef, focusCell, onSelectCellBlock, rowCount, }: CellblockSelectionHookProps) => {
+    cellBlock: ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+    onKeyDown: KeyboardEventHandler | undefined;
+    onMouseDown: MouseEventHandler | undefined;
+};

package/types/index.d.ts

@@ -7,6 +7,7 @@ export * from "./table-cell";
 export * from "./table-config";
 export * from "./table-header";
 export * from "./useControlledTableNavigation";
+export * from "./useKeyboardNavigation";
 export * from "./useTableModel";
 export * from "./useTableScroll";
 export * from "./useTableViewport";

package/types/moving-window.d.ts

@@ -1,9 +1,10 @@
 import { DataSourceRow } from "@vuu-ui/vuu-data-types";
+import { WindowRange } from "@vuu-ui/vuu-utils";
 import { VuuRange } from "@vuu-ui/vuu-protocol-types";
 export declare class MovingWindow {
+    #private;
     data: DataSourceRow[];
     rowCount: number;
-    private range;
     constructor({ from, to }: VuuRange);
     setRowCount: (rowCount: number) => void;
     add(data: DataSourceRow): void;
@@ -11,4 +12,5 @@ export declare class MovingWindow {
     isWithinRange(index: number): boolean;
     setRange({ from, to }: VuuRange): void;
     getSelectedRows(): DataSourceRow[];
+    get range(): WindowRange;
 }

package/types/pagination/PaginationControl.d.ts

@@ -0,0 +1,6 @@
+import { HtmlHTMLAttributes } from "react";
+import { DataSource } from "@vuu-ui/vuu-data-types";
+export interface PaginationControlProps extends HtmlHTMLAttributes<HTMLDivElement> {
+    dataSource: DataSource;
+}
+export declare const PaginationControl: import("react").ForwardRefExoticComponent<PaginationControlProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from "./PaginationControl";

package/types/pagination/usePagination.d.ts

@@ -0,0 +1,9 @@
+import { SyntheticEvent } from "react";
+import { DataSource } from "@vuu-ui/vuu-data-types";
+export interface PaginationHookProps {
+    dataSource: DataSource;
+}
+export declare const usePagination: ({ dataSource }: PaginationHookProps) => {
+    onPageChange: (_evt: SyntheticEvent, page: number) => void;
+    pageCount: number;
+};

package/types/table-dom-utils.d.ts

@@ -1,15 +1,20 @@
 import { RefObject } from "react";
 import { ScrollDirection } from "./useTableScroll";
+import type { ArrowKey, PageKey } from "@vuu-ui/vuu-utils";
 /**
  * [rowIndex, colIndex
  */
 export type CellPos = [number, number];
+export type NavigationKey = PageKey | ArrowKey;
 export declare const headerCellQuery: (colIdx: number) => string;
 export declare const dataCellQuery: (rowIdx: number, colIdx: number) => string;
 export declare const getTableCell: (containerRef: RefObject<HTMLElement>, [rowIdx, colIdx]: CellPos) => HTMLElement;
 export declare const cellIsEditable: (cell: HTMLDivElement | null) => boolean | undefined;
 export declare const cellDropdownShowing: (cell: HTMLDivElement | null) => boolean;
 export declare const cellIsTextInput: (cell: HTMLElement) => boolean;
-export declare function getRowIndex(rowEl?: HTMLElement): number;
+export declare const getIndexFromRowElement: (rowElement: HTMLElement | null) => number;
+export declare const getIndexFromCellElement: (cellElement: HTMLElement | null) => number;
+export declare const getTableCellPos: (tableCell: HTMLDivElement) => CellPos;
 export declare const closestRowIndex: (el: HTMLElement) => number;
+export declare function getNextCellPos(key: ArrowKey, [rowIdx, colIdx]: CellPos, columnCount: number, rowCount: number): CellPos;
 export declare const howFarIsRowOutsideViewport: (rowEl: HTMLElement, totalHeaderHeight: number, contentContainer?: Element | null) => readonly [ScrollDirection | undefined, number | undefined];

package/types/useCellFocus.d.ts

@@ -0,0 +1,13 @@
+import { RefCallback, RefObject } from "react";
+import { CellPos } from "./table-dom-utils";
+import { ScrollRequestHandler } from "./useTableScroll";
+export interface CellFocusHookProps {
+    containerRef: RefObject<HTMLElement>;
+    disableFocus?: boolean;
+    requestScroll?: ScrollRequestHandler;
+}
+export type FocusCell = (cellPos: CellPos) => void;
+export declare const useCellFocus: ({ containerRef, disableFocus, requestScroll, }: CellFocusHookProps) => {
+    focusCell: FocusCell;
+    tableBodyRef: RefCallback<HTMLDivElement>;
+};

package/types/useControlledTableNavigation.d.ts

@@ -1,4 +1,5 @@
 import { KeyboardEventHandler } from "react";
+export declare const isRowSelectionKey: (key: string) => boolean;
 export declare const useControlledTableNavigation: (initialValue: number, rowCount: number) => {
     highlightedIndexRef: import("react").MutableRefObject<number | undefined>;
     onHighlight: (idx: number) => void;

package/types/useKeyboardNavigation.d.ts

@@ -1,11 +1,11 @@
 import { VuuRange } from "@vuu-ui/vuu-protocol-types";
+import { PageKey } from "@vuu-ui/vuu-utils";
 import { KeyboardEvent, MouseEvent, RefObject } from "react";
 import { TableNavigationStyle } from "./Table";
+import { NavigationKey } from "./table-dom-utils";
 import { ScrollRequestHandler } from "./useTableScroll";
+import { FocusCell } from "./useCellFocus";
 export declare const isNavigationKey: (key: string, navigationStyle: TableNavigationStyle) => key is NavigationKey;
-type ArrowKey = "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
-type PageKey = "Home" | "End" | "PageUp" | "PageDown";
-type NavigationKey = PageKey | ArrowKey;
 export declare const isPagingKey: (key: string) => key is PageKey;
 export interface NavigationHookProps {
     containerRef: RefObject<HTMLElement>;
@@ -13,6 +13,7 @@ export interface NavigationHookProps {
     defaultHighlightedIndex?: number;
     disableFocus?: boolean;
     disableHighlightOnFocus?: boolean;
+    focusCell: FocusCell;
     highlightedIndex?: number;
     label?: string;
     navigationStyle: TableNavigationStyle;
@@ -24,7 +25,7 @@ export interface NavigationHookProps {
     selected?: unknown;
     viewportRowCount: number;
 }
-export declare const useKeyboardNavigation: ({ columnCount, containerRef, disableFocus, defaultHighlightedIndex, disableHighlightOnFocus, highlightedIndex: highlightedIndexProp, navigationStyle, requestScroll, onHighlight, rowCount, viewportRowCount, }: NavigationHookProps) => {
+export declare const useKeyboardNavigation: ({ columnCount, containerRef, defaultHighlightedIndex, disableHighlightOnFocus, focusCell, highlightedIndex: highlightedIndexProp, navigationStyle, requestScroll, onHighlight, rowCount, viewportRowCount, }: NavigationHookProps) => {
     highlightedIndexRef: import("react").MutableRefObject<number | undefined>;
     navigate: () => void;
     onClick: (evt: MouseEvent) => void;
@@ -33,4 +34,3 @@ export declare const useKeyboardNavigation: ({ columnCount, containerRef, disabl
     onMouseLeave: (() => void) | undefined;
     onMouseMove: ((evt: MouseEvent) => void) | undefined;
 };
-export {};

package/types/useMeasuredHeight.d.ts

@@ -4,7 +4,7 @@ interface MeasuredHeightHookProps {
     height?: number;
 }
 export declare const useMeasuredHeight: ({ onHeightMeasured, height: heightProp, }: MeasuredHeightHookProps) => {
-    rowHeight: number;
-    rowRef: RefCallback<HTMLDivElement>;
+    measuredHeight: number;
+    measuredRef: RefCallback<HTMLDivElement>;
 };
 export {};

package/types/useTable.d.ts

@@ -1,33 +1,33 @@
 import { DataSourceRow } from "@vuu-ui/vuu-data-types";
-import { ColumnDescriptor, DataCellEditHandler, TableRowClickHandlerInternal, RuntimeColumnDescriptor, TableColumnResizeHandler, TableConfig, TableSelectionModel } from "@vuu-ui/vuu-table-types";
 import { VuuSortType } from "@vuu-ui/vuu-protocol-types";
+import { ColumnDescriptor, DataCellEditHandler, RuntimeColumnDescriptor, TableColumnResizeHandler, TableConfig, TableRowClickHandlerInternal, TableSelectionModel } from "@vuu-ui/vuu-table-types";
 import { MeasuredProps, MeasuredSize } from "@vuu-ui/vuu-ui-controls";
-import { FocusEvent, KeyboardEvent, RefObject } from "react";
+import { FocusEvent, KeyboardEvent, MouseEventHandler, RefObject } from "react";
 import { TableProps } from "./Table";
-export interface TableHookProps extends MeasuredProps, Pick<TableProps, "allowDragDrop" | "availableColumns" | "config" | "dataSource" | "disableFocus" | "highlightedIndex" | "id" | "navigationStyle" | "onAvailableColumnsChange" | "onConfigChange" | "onDragStart" | "onDrop" | "onHighlight" | "onSelect" | "onSelectionChange" | "onRowClick" | "renderBufferSize" | "scrollingApiRef"> {
+export interface TableHookProps extends MeasuredProps, Pick<TableProps, "allowCellBlockSelection" | "allowDragDrop" | "availableColumns" | "config" | "dataSource" | "disableFocus" | "highlightedIndex" | "id" | "navigationStyle" | "onAvailableColumnsChange" | "onConfigChange" | "onDragStart" | "onDrop" | "onHighlight" | "onSelect" | "onSelectCellBlock" | "onSelectionChange" | "onRowClick" | "renderBufferSize" | "scrollingApiRef" | "showColumnHeaders" | "showPaginationControls"> {
     containerRef: RefObject<HTMLDivElement>;
     rowHeight: number;
     selectionModel: TableSelectionModel;
     size: MeasuredSize;
 }
-export declare const useTable: ({ allowDragDrop, availableColumns, config, containerRef, dataSource, disableFocus, highlightedIndex: highlightedIndexProp, id, navigationStyle, onAvailableColumnsChange, onConfigChange, onDragStart, onDrop, onHighlight, onRowClick: onRowClickProp, onSelect, onSelectionChange, renderBufferSize, rowHeight, scrollingApiRef, selectionModel, size, }: TableHookProps) => {
+export declare const useTable: ({ allowCellBlockSelection, allowDragDrop, availableColumns, config, containerRef, dataSource, disableFocus, highlightedIndex: highlightedIndexProp, id, navigationStyle, onAvailableColumnsChange, onConfigChange, onDragStart, onDrop, onHighlight, onRowClick: onRowClickProp, onSelect, onSelectCellBlock, onSelectionChange, renderBufferSize, rowHeight, scrollingApiRef, selectionModel, showColumnHeaders, showPaginationControls, size, }: TableHookProps) => {
     "aria-rowcount": number;
-    rowClassNameGenerator: import("@vuu-ui/vuu-utils").RowClassNameGenerator | undefined;
-    draggableRow: JSX.Element | undefined;
-    onBlur: import("react").FocusEventHandler;
-    onDoubleClick: (e: import("react").MouseEvent<HTMLElement, MouseEvent>) => void;
-    onFocus: (e: FocusEvent<HTMLElement>) => void;
-    onKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
-    onMouseDown: import("react").MouseEventHandler | undefined;
+    cellBlock: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     columnMap: import("@vuu-ui/vuu-utils").ColumnMap;
     columns: RuntimeColumnDescriptor[];
     data: DataSourceRow[];
+    draggableRow: JSX.Element | undefined;
     getRowOffset: import("@vuu-ui/vuu-utils").RowOffsetFunc;
     handleContextMenuAction: import("@vuu-ui/vuu-data-types").MenuActionHandler;
     headerHeight: number;
     headings: import("@vuu-ui/vuu-table-types").TableHeadings;
     highlightedIndex: number | undefined;
     menuBuilder: import("@vuu-ui/vuu-data-types").MenuBuilder;
+    onBlur: import("react").FocusEventHandler;
+    onDoubleClick: (e: import("react").MouseEvent<HTMLElement, MouseEvent>) => void;
+    onFocus: (e: FocusEvent<HTMLElement>) => void;
+    onKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
+    onMouseDown: MouseEventHandler;
     onContextMenu: (evt: import("react").MouseEvent<HTMLElement, MouseEvent>) => void;
     onDataEdited: DataCellEditHandler;
     onHeaderHeightMeasured: (height: number) => void;
@@ -38,6 +38,7 @@ export declare const useTable: ({ allowDragDrop, availableColumns, config, conta
     onSortColumn: (column: ColumnDescriptor, extendSort?: any, sortType?: VuuSortType) => void;
     onResizeColumn: TableColumnResizeHandler;
     onToggleGroup: (row: DataSourceRow, column: RuntimeColumnDescriptor) => void;
+    rowClassNameGenerator: import("@vuu-ui/vuu-utils").RowClassNameGenerator | undefined;
     scrollProps: {
         columnsWithinViewport: RuntimeColumnDescriptor[];
         scrollbarContainerRef: (el: HTMLDivElement | null) => void;
@@ -53,6 +54,7 @@ export declare const useTable: ({ allowDragDrop, availableColumns, config, conta
         rowSeparators?: boolean | undefined;
         zebraStripes?: boolean | undefined;
     };
+    tableBodyRef: import("react").RefCallback<HTMLDivElement>;
     tableConfig: Readonly<TableConfig>;
     viewportMeasurements: {
         appliedPageSize: number;

package/types/useTableScroll.d.ts

@@ -42,6 +42,7 @@ export interface TableScrollHookProps {
     rowHeight: number;
     scrollingApiRef?: ForwardedRef<ScrollingAPI>;
     setRange: (range: VuuRange) => void;
+    showPaginationControls?: boolean;
     viewportMeasurements: ViewportMeasurements;
 }
 export declare const useTableScroll: ({ columns, getRowAtPosition, onHorizontalScroll, onVerticalScroll, onVerticalScrollInSitu, rowHeight, scrollingApiRef, setRange, viewportMeasurements, }: TableScrollHookProps) => {

package/types/useTableViewport.d.ts

@@ -15,7 +15,8 @@ export interface TableViewportHookProps {
      * this is the solid left/right `border` rendered on the selection block
      */
     selectionEndSize?: number;
-    size: MeasuredSize | undefined;
+    showPaginationControls?: boolean;
+    size: MeasuredSize;
 }
 export interface ViewportMeasurements {
     appliedPageSize: number;
@@ -38,4 +39,4 @@ export interface TableViewportHookResult extends ViewportMeasurements {
     setInSituRowOffset: (rowIndexOffset: number) => void;
     setScrollTop: (scrollTop: number, scrollPct: number) => void;
 }
-export declare const useTableViewport: ({ columns, headerHeight, rowCount, rowHeight, selectionEndSize, size, }: TableViewportHookProps) => TableViewportHookResult;
+export declare const useTableViewport: ({ columns, headerHeight, rowCount, rowHeight, selectionEndSize, showPaginationControls, size, }: TableViewportHookProps) => TableViewportHookResult;