@vuu-ui/vuu-datatable 0.6.10-debug → 0.6.11

package/package.json

@@ -6,7 +6,7 @@
     "@salt-ds/core": "1.0.0",
     "@salt-ds/icons": "1.0.0",
     "@heswell/salt-lab": "1.0.0-alpha.0-vuu.1",
-    "@vuu-ui/vuu-utils": "0.6.10-debug",
+    "@vuu-ui/vuu-utils": "0.6.11",
     "classnames": "^2.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
@@ -16,9 +16,11 @@
     "index.css",
     "index.js.map",
     "index.css.map",
-    "/src"
+    "/src",
+    "/types"
   ],
   "module": "esm/index.js",
   "main": "cjs/index.js",
-  "version": "0.6.10-debug"
+  "version": "0.6.11",
+  "types": "types/index.d.ts"
 }

package/types/ColumnBasedTable.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TableImplementationProps } from "./dataTableTypes";
+export declare const ColumnBasedTable: ({ columns, data, headerHeight, onHeaderCellDragEnd, rowHeight, }: TableImplementationProps) => JSX.Element;

package/types/ColumnResizer.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import "./ColumnResizer.css";
+export interface TableColumnResizerProps {
+    onDrag: (evt: MouseEvent, moveBy: number) => void;
+    onDragEnd: (evt: MouseEvent) => void;
+    onDragStart: (evt: React.MouseEvent) => void;
+}
+export declare const ColumnResizer: ({ onDrag, onDragEnd, onDragStart, }: TableColumnResizerProps) => JSX.Element;

package/types/DataTable.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TableProps } from "./dataTableTypes";
+import "./DataTable.css";
+export declare const DataTable: ({ allowConfigEditing: showSettings, className, config, dataSource, headerHeight, height, id: idProp, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSelectionChange, onShowConfigEditor: onShowSettings, renderBufferSize, rowHeight, selectionModel, style: styleProp, tableLayout: tableLayoutProp, width, ...props }: TableProps) => JSX.Element;

package/types/DragVisualizer.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from "react";
+import "./DragVisualizer.css";
+export declare const useListViz: () => unknown;
+export interface DragVisualizerProps {
+    children: ReactNode;
+    orientation?: "vertical" | "horizontal";
+}
+export declare const DragVisualizer: React.FC<DragVisualizerProps>;

package/types/KeySet.d.ts

@@ -0,0 +1,12 @@
+import { DataSourceRow } from "@vuu-ui/vuu-data";
+import { VuuRange } from "@vuu-ui/vuu-protocol-types";
+export declare class KeySet {
+    private keys;
+    private free;
+    private nextKeyValue;
+    constructor(range: VuuRange);
+    next(): number;
+    reset({ from, to }: VuuRange): void;
+    keyFor(rowIndex: number): number;
+    withKeys(data: DataSourceRow[]): DataSourceRow[];
+}

package/types/RowBasedTable.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TableImplementationProps } from "./dataTableTypes";
+export declare const RowBasedTable: ({ columns, data, headings, onColumnResize, onHeaderCellDragStart, onContextMenu, onRemoveColumnFromGroupBy, onRowClick, onSort, onToggleGroup, rowCount, rowHeight, }: TableImplementationProps) => JSX.Element;

package/types/SortIndicator.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ColumnSort } from "@vuu-ui/vuu-datagrid-types";
+import "./SortIndicator.css";
+export interface SortIndicatorProps {
+    sorted?: ColumnSort;
+}
+export declare const SortIndicator: ({ sorted }: SortIndicatorProps) => JSX.Element | null;

package/types/TableCell.d.ts

@@ -0,0 +1,9 @@
+import { DataSourceRow } from "@vuu-ui/vuu-data";
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { HTMLAttributes } from "react";
+import "./TableCell.css";
+export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
+    column: KeyedColumnDescriptor;
+    row: DataSourceRow;
+}
+export declare const TableCell: import("react").MemoExoticComponent<({ className: classNameProp, column, row }: TableCellProps) => JSX.Element>;

package/types/TableGroupCell.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { DataSourceRow } from "@vuu-ui/vuu-data";
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { TableCellProps } from "./TableCell";
+import "./TableGroupCell.css";
+export declare const getGroupValueAndOffset: (columns: KeyedColumnDescriptor[], row: DataSourceRow) => [unknown, number];
+export declare const TableGroupCell: ({ column, onClick, row, }: TableCellProps) => JSX.Element;

package/types/TableGroupHeaderCell.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from "react";
+import { TableHeaderCellProps } from "./TableHeaderCell";
+import "./TableGroupHeaderCell.css";
+import { GroupColumnDescriptor, KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+export interface ColHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
+    column: KeyedColumnDescriptor;
+    onRemoveColumn?: (column: KeyedColumnDescriptor) => void;
+}
+export interface TableGroupHeaderCellProps extends Omit<TableHeaderCellProps, "onDragStart" | "onDrag" | "onDragEnd"> {
+    column: GroupColumnDescriptor;
+    onRemoveColumn?: (column: KeyedColumnDescriptor) => void;
+}
+export declare const TableGroupHeaderCell: ({ column, className: classNameProp, onRemoveColumn, onResize, ...props }: TableGroupHeaderCellProps) => JSX.Element;

package/types/TableHeaderCell.d.ts

@@ -0,0 +1,11 @@
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { HTMLAttributes, MouseEvent } from "react";
+import { TableColumnResizeHandler } from "./dataTableTypes";
+import "./TableHeaderCell.css";
+export interface TableHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {
+    column: KeyedColumnDescriptor;
+    debugString?: string;
+    onDragStart?: (evt: MouseEvent) => void;
+    onResize?: TableColumnResizeHandler;
+}
+export declare const TableHeaderCell: ({ column, className: classNameProp, onClick, onDragStart, onResize, ...props }: TableHeaderCellProps) => JSX.Element;

package/types/TableRow.d.ts

@@ -0,0 +1,14 @@
+import { DataSourceRow } from "@vuu-ui/vuu-data";
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { HTMLAttributes } from "react";
+import { RowClickHandler } from "./dataTableTypes";
+import "./TableRow.css";
+export interface RowProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onClick"> {
+    columns: KeyedColumnDescriptor[];
+    height: number;
+    index: number;
+    onClick?: RowClickHandler;
+    onToggleGroup?: (row: DataSourceRow) => void;
+    row: DataSourceRow;
+}
+export declare const TableRow: import("react").NamedExoticComponent<RowProps>;

package/types/context-menu/buildContextMenuDescriptors.d.ts

@@ -0,0 +1,4 @@
+import { DataSource } from "@vuu-ui/vuu-data";
+import { MenuBuilder } from "@vuu-ui/vuu-popups";
+export type ContextMenuLocation = "header" | "filter" | "grid";
+export declare const buildContextMenuDescriptors: (dataSource?: DataSource) => MenuBuilder;

package/types/context-menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./buildContextMenuDescriptors";
+export * from "./useContextMenu";

package/types/context-menu/useContextMenu.d.ts

@@ -0,0 +1,16 @@
+import { DataSource } from "@vuu-ui/vuu-data";
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { Filter } from "@vuu-ui/vuu-filter-types";
+import { MenuActionHandler } from "@vuu-ui/vuu-popups";
+import { VuuFilter } from "@vuu-ui/vuu-protocol-types";
+import { PersistentColumnAction } from "../useTableModel";
+export interface ContextMenuOptions {
+    column?: KeyedColumnDescriptor;
+    filter?: Filter;
+    sort?: VuuFilter;
+}
+export interface ContextMenuHookProps {
+    dataSource?: DataSource;
+    onPersistentColumnOperation: (action: PersistentColumnAction) => void;
+}
+export declare const useContextMenu: ({ dataSource, onPersistentColumnOperation, }: ContextMenuHookProps) => MenuActionHandler;

package/types/dataTableTypes.d.ts

@@ -0,0 +1,67 @@
+import { DataSource, DataSourceRow, VuuFeatureInvocationMessage, VuuFeatureMessage } from "@vuu-ui/vuu-data";
+import { KeyedColumnDescriptor, GridConfig, TableHeadings, SelectionChangeHandler, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
+import { HTMLAttributes, MouseEvent } from "react";
+export type tableLayoutType = "row" | "column";
+export interface TableProps extends HTMLAttributes<HTMLDivElement> {
+    allowConfigEditing?: boolean;
+    config: Omit<GridConfig, "headings">;
+    dataSource: DataSource;
+    headerHeight?: number;
+    height?: number;
+    onConfigChange?: (config: Omit<GridConfig, "headings">) => void;
+    /**
+     * Features like context menu actions and visual links are enabled by the Vuu server.
+     * This callback allows us to receive a notification when such a feature is available.
+     * The options provided must then be used to configure appropriate UI affordances.
+     */
+    onFeatureEnabled?: (message: VuuFeatureMessage) => void;
+    /**
+     * When a Vuu feature e.g. context menu action, has been invoked, the Vuu server
+     * response must be handled. This callback provides that response.
+     */
+    onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
+    onShowConfigEditor?: () => void;
+    onSelectionChange?: SelectionChangeHandler;
+    renderBufferSize?: number;
+    rowHeight?: number;
+    selectionModel?: TableSelectionModel;
+    tableLayout?: tableLayoutType;
+    width?: number;
+}
+export type TableColumnResizeHandler = (phase: "begin" | "resize" | "end", columnName: string, width?: number) => void;
+export interface TableImplementationProps {
+    columns: KeyedColumnDescriptor[];
+    data: DataSourceRow[];
+    headerHeight: number;
+    headings: TableHeadings;
+    onColumnResize?: TableColumnResizeHandler;
+    onHeaderCellDragEnd?: () => void;
+    onHeaderCellDragStart?: (evt: MouseEvent) => void;
+    onContextMenu?: (evt: MouseEvent<HTMLElement>) => void;
+    onRemoveColumnFromGroupBy?: (column: KeyedColumnDescriptor) => void;
+    onRowClick?: RowClickHandler;
+    onSort: (column: KeyedColumnDescriptor, isAdditive: boolean) => void;
+    onToggleGroup?: (row: DataSourceRow) => void;
+    rowCount: number;
+    rowHeight: number;
+}
+type MeasureStatus = "unmeasured" | "measured";
+export interface TableMeasurements {
+    contentHeight: number;
+    left: number;
+    right: number;
+    scrollbarSize: number;
+    scrollContentHeight: number;
+    status: MeasureStatus;
+    top: number;
+}
+export interface Viewport {
+    fillerHeight: number;
+    maxScrollContainerScrollHorizontal: number;
+    maxScrollContainerScrollVertical: number;
+    pinnedWidthLeft: number;
+    rowCount: number;
+    scrollContentWidth: number;
+}
+export type RowClickHandler = (row: DataSourceRow, rangeSelect: boolean, keepExistingSelection: boolean) => void;
+export {};

package/types/filter-indicator.d.ts

@@ -0,0 +1,13 @@
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { Filter } from "@vuu-ui/vuu-filter-types";
+import { HTMLAttributes } from "react";
+import "./filter-indicator.css";
+export declare const Direction: {
+    ASC: string;
+    DSC: string;
+};
+export interface FilterIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    column: KeyedColumnDescriptor;
+    filter?: Filter;
+}
+export declare const FilterIndicator: ({ column, filter }: FilterIndicatorProps) => JSX.Element | null;

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./dataTableTypes";
+export * from "./DataTable";
+export * from "./useMeasuredContainer";

package/types/keyUtils.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export declare const ArrowUp = "ArrowUp";
+export declare const ArrowDown = "ArrowDown";
+export declare const ArrowLeft = "ArrowLeft";
+export declare const ArrowRight = "ArrowRight";
+export declare const Enter = "Enter";
+export declare const Escape = "Escape";
+export declare const Home = "Home";
+export declare const End = "End";
+export declare const PageUp = "PageUp";
+export declare const PageDown = "PageDown";
+export declare const Space = " ";
+export declare const Tab = "Tab";
+export declare const isCharacterKey: (evt: React.KeyboardEvent) => boolean;
+export type ArrowKey = "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
+export type PageKey = "Home" | "End" | "PageUp" | "PageDown";
+export type NavigationKey = PageKey | ArrowKey;
+export declare const isPagingKey: (key: string) => key is PageKey;
+export declare const isNavigationKey: (key: string) => key is NavigationKey;

package/types/useDataSource.d.ts

@@ -0,0 +1,40 @@
+import { DataSource, DataSourceConfigMessage, DataSourceRow, DataSourceSubscribedMessage, VuuFeatureMessage, VuuFeatureInvocationMessage } from "@vuu-ui/vuu-data";
+import { VuuRange, VuuSortCol } from "@vuu-ui/vuu-protocol-types";
+export type SubscriptionDetails = {
+    columnNames?: string[];
+    range: {
+        from: number;
+        to: number;
+    };
+    sort?: VuuSortCol[];
+};
+export interface DataSourceHookProps {
+    dataSource: DataSource;
+    onConfigChange?: (message: DataSourceConfigMessage) => void;
+    onFeatureEnabled?: (message: VuuFeatureMessage) => void;
+    onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
+    onSizeChange: (size: number) => void;
+    onSubscribed: (subscription: DataSourceSubscribedMessage) => void;
+    range?: VuuRange;
+    renderBufferSize?: number;
+    viewportRowCount: number;
+}
+export declare function useDataSource({ dataSource, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSizeChange, onSubscribed, range, renderBufferSize, viewportRowCount, }: DataSourceHookProps): {
+    data: DataSourceRow[];
+    getSelectedRows: () => DataSourceRow[];
+    range: VuuRange;
+    setRange: (range: VuuRange) => void;
+    dataSource: DataSource;
+};
+export declare class MovingWindow {
+    data: DataSourceRow[];
+    rowCount: number;
+    private range;
+    constructor({ from, to }: VuuRange);
+    setRowCount: (rowCount: number) => void;
+    add(data: DataSourceRow): void;
+    getAtIndex(index: number): DataSourceRow | undefined;
+    isWithinRange(index: number): boolean;
+    setRange({ from, to }: VuuRange): void;
+    getSelectedRows(): DataSourceRow[];
+}

package/types/useDataTable.d.ts

@@ -0,0 +1,63 @@
+import { DataSource, DataSourceRow, VuuFeatureInvocationMessage, VuuFeatureMessage } from "@vuu-ui/vuu-data";
+import { GridConfig, KeyedColumnDescriptor, SelectionChangeHandler, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
+import { VuuSortType } from "@vuu-ui/vuu-protocol-types";
+import { MouseEvent } from "react";
+import { TableColumnResizeHandler, tableLayoutType } from "./dataTableTypes";
+import { MeasuredProps } from "./useMeasuredContainer";
+export interface DataTableHookProps extends MeasuredProps {
+    config: Omit<GridConfig, "headings">;
+    dataSource: DataSource;
+    headerHeight: number;
+    onConfigChange?: (config: Omit<GridConfig, "headings">) => void;
+    onFeatureEnabled?: (message: VuuFeatureMessage) => void;
+    onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
+    renderBufferSize?: number;
+    rowHeight: number;
+    onSelectionChange?: SelectionChangeHandler;
+    selectionModel: TableSelectionModel;
+    tableLayout: tableLayoutType;
+}
+export declare const useDataTable: ({ config, dataSource, headerHeight, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSelectionChange, renderBufferSize, rowHeight, selectionModel, tableLayout, ...measuredProps }: DataTableHookProps) => {
+    draggable: JSX.Element | undefined;
+    draggedItemIndex: number | undefined;
+    tableLayout: "row" | "column";
+    onHeaderCellDragStart: ((evt: MouseEvent<Element, globalThis.MouseEvent>) => void) | undefined;
+    containerMeasurements: import("./useMeasuredContainer").MeasuredContainerHookResult;
+    containerProps: {
+        onClick: (evt: MouseEvent<Element, globalThis.MouseEvent>) => void;
+        onFocus: () => void;
+        onKeyDown: (e: import("react").KeyboardEvent<Element>) => void;
+    };
+    columns: KeyedColumnDescriptor[];
+    data: DataSourceRow[];
+    dispatchColumnAction: import("react").Dispatch<import("./useTableModel").GridModelAction>;
+    handleContextMenuAction: import("@vuu-ui/vuu-popups").MenuActionHandler;
+    headings: import("@vuu-ui/vuu-datagrid-types").TableHeadings;
+    onColumnResize: TableColumnResizeHandler;
+    onContextMenu: (evt: MouseEvent<HTMLElement>) => void;
+    onRemoveColumnFromGroupBy: (column: KeyedColumnDescriptor) => void;
+    onRowClick: import("./dataTableTypes").RowClickHandler;
+    onSort: (column: KeyedColumnDescriptor, extendSort?: any, sortType?: VuuSortType) => void;
+    onToggleGroup: (row: DataSourceRow) => void;
+    scrollProps: {
+        onScrollbarContainerScroll: () => void;
+        onContentContainerScroll: () => void;
+        onTableContainerScroll: () => void;
+        contentContainerRef: import("react").RefObject<HTMLDivElement>;
+        scrollbarContainerRef: import("react").RefObject<HTMLDivElement>;
+        tableContainerRef: import("react").RefObject<HTMLDivElement>;
+    };
+    rowCount: number;
+    viewportMeasurements: {
+        fillerHeight: number;
+        maxScrollContainerScrollHorizontal: number;
+        maxScrollContainerScrollVertical: number;
+        pinnedWidthLeft: number;
+        pinnedWidthRight: number;
+        rowCount: number;
+        scrollContentHeight: number;
+        scrollbarSize: number;
+        scrollContentWidth: number;
+        totalHeaderHeight: number;
+    };
+};

package/types/useDraggableColumn.d.ts

@@ -0,0 +1,12 @@
+import { MouseEvent, RefObject } from "react";
+export interface DraggableColumnHookProps {
+    onDrop: (fromIndex: number, toIndex: number) => void;
+    tableContainerRef: RefObject<HTMLDivElement>;
+    tableLayout: "column" | "row";
+}
+export declare const useDraggableColumn: ({ onDrop, tableContainerRef, tableLayout: tableLayoutProp, }: DraggableColumnHookProps) => {
+    draggable: JSX.Element | undefined;
+    draggedItemIndex: number | undefined;
+    tableLayout: "row" | "column";
+    onHeaderCellDragStart: ((evt: MouseEvent) => void) | undefined;
+};

package/types/useKeyboardNavigation.d.ts

@@ -0,0 +1,22 @@
+import { DataSourceRow } from "@vuu-ui/vuu-data";
+import { VuuRange } from "@vuu-ui/vuu-protocol-types";
+import { KeyboardEvent, MouseEvent, RefObject } from "react";
+import { ScrollRequestHandler } from "./useTableScroll";
+export type CellPos = [number, number];
+export interface NavigationHookProps {
+    containerRef: RefObject<HTMLElement>;
+    columnCount?: number;
+    data: DataSourceRow[];
+    disableHighlightOnFocus?: boolean;
+    label?: string;
+    viewportRange: VuuRange;
+    requestScroll?: ScrollRequestHandler;
+    restoreLastFocus?: boolean;
+    rowCount?: number;
+    selected?: unknown;
+}
+export declare const useKeyboardNavigation: ({ columnCount, containerRef, disableHighlightOnFocus, data, requestScroll, rowCount, viewportRange, }: NavigationHookProps) => {
+    onClick: (evt: MouseEvent) => void;
+    onFocus: () => void;
+    onKeyDown: (e: KeyboardEvent) => void;
+};

package/types/useMeasuredContainer.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from "react";
+export interface ClientSize {
+    clientHeight: number;
+    clientWidth: number;
+}
+export interface MeasuredProps {
+    defaultHeight?: number;
+    defaultWidth?: number;
+    height?: number;
+    width?: number;
+}
+export interface Size {
+    height: number | "100%";
+    width: number | "100%";
+}
+export interface MeasuredSize {
+    height: number;
+    width: number;
+}
+export interface MeasuredContainerHookResult {
+    containerRef: RefObject<HTMLDivElement>;
+    outerSize: Size;
+    innerSize?: MeasuredSize;
+}
+export declare const useMeasuredContainer: ({ defaultHeight, defaultWidth, height, width, }: MeasuredProps) => MeasuredContainerHookResult;

package/types/useMeasuredSize.d.ts

@@ -0,0 +1,26 @@
+import { RefObject } from "react";
+export type Size = {
+    pixelHeight: number;
+    pixelWidth: number;
+    clientHeight?: number;
+    clientWidth?: number;
+    height: number | "100%";
+    width: number | "100%";
+};
+export type FullSize = {
+    clientHeight?: number;
+    clientWidth?: number;
+    height: "100%";
+    width: "100%";
+};
+export type ClientSize = {
+    clientHeight: number;
+    clientWidth: number;
+};
+export type MeasuredSize = ClientSize & {
+    height: number | "100%";
+    width: number | "100%";
+};
+export declare const isMeasured: (size: Size | MeasuredSize) => size is MeasuredSize;
+export declare const isFullSize: (size: Size | MeasuredSize | FullSize) => size is FullSize;
+export declare const useMeasuredSize: (containerRef: RefObject<HTMLDivElement>, height?: number | "100%", width?: number | "100%") => Size;

package/types/useResizeObserver.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from "react";
+export declare const WidthHeight: string[];
+export declare const WidthOnly: string[];
+export type measurements<T = string | number> = {
+    height?: T;
+    clientHeight?: number;
+    clientWidth?: number;
+    contentHeight?: number;
+    contentWidth?: number;
+    scrollHeight?: number;
+    scrollWidth?: number;
+    width?: T;
+};
+export type ResizeHandler = (measurements: measurements<number>) => void;
+export declare function useResizeObserver(ref: RefObject<Element | HTMLElement | null>, dimensions: string[], onResize: ResizeHandler, reportInitialSize?: boolean): void;

package/types/useSelection.d.ts

@@ -0,0 +1,7 @@
+import { SelectionChangeHandler, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
+import { RowClickHandler } from "./dataTableTypes";
+export interface SelectionHookProps {
+    selectionModel: TableSelectionModel;
+    onSelectionChange: SelectionChangeHandler;
+}
+export declare const useSelection: ({ selectionModel, onSelectionChange, }: SelectionHookProps) => RowClickHandler;

package/types/useTableColumnResize.d.ts

@@ -0,0 +1,17 @@
+import { Heading, KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { RefObject } from "react";
+export type ResizeHandler = (evt: MouseEvent, moveBy: number) => void;
+export interface CellResizeHookProps {
+    column: KeyedColumnDescriptor | Heading;
+    onResize?: (phase: resizePhase, columnName: string, width?: number) => void;
+    rootRef: RefObject<HTMLDivElement>;
+}
+type resizePhase = "begin" | "resize" | "end";
+export interface CellResizeHookResult {
+    isResizing: boolean;
+    onDrag: (evt: MouseEvent, moveBy: number) => void;
+    onDragStart: (evt: React.MouseEvent) => void;
+    onDragEnd: (evt: MouseEvent) => void;
+}
+export declare const useTableColumnResize: ({ column, onResize, rootRef, }: CellResizeHookProps) => CellResizeHookResult;
+export {};

package/types/useTableModel.d.ts

@@ -0,0 +1,66 @@
+import { ColumnDescriptor, GridConfig, KeyedColumnDescriptor, PinLocation } from "@vuu-ui/vuu-datagrid-types";
+import { Reducer } from "react";
+import { VuuColumnDataType } from "@vuu-ui/vuu-protocol-types";
+import { DataSourceConfig } from "@vuu-ui/vuu-data";
+export interface GridModel extends Omit<GridConfig, "columns"> {
+    columns: KeyedColumnDescriptor[];
+}
+export interface ColumnActionInit {
+    type: "init";
+    tableConfig: Omit<GridConfig, "headings">;
+    dataSourceConfig?: DataSourceConfig;
+}
+export interface ColumnActionHide {
+    type: "hideColumn";
+    column: KeyedColumnDescriptor;
+}
+export interface ColumnActionMove {
+    type: "moveColumn";
+    column: KeyedColumnDescriptor;
+    moveBy?: 1 | -1;
+    moveTo?: number;
+}
+export interface ColumnActionPin {
+    type: "pinColumn";
+    column: ColumnDescriptor;
+    pin?: PinLocation;
+}
+export interface ColumnActionResize {
+    type: "resizeColumn";
+    column: KeyedColumnDescriptor;
+    phase: "begin" | "resize" | "end";
+    width?: number;
+}
+export interface ColumnActionSetTypes {
+    type: "setTypes";
+    columnNames: string[];
+    serverDataTypes: VuuColumnDataType[];
+}
+export interface ColumnActionUpdate {
+    type: "updateColumn";
+    column: ColumnDescriptor;
+}
+export interface ColumnActionUpdateProp {
+    align?: ColumnDescriptor["align"];
+    column: KeyedColumnDescriptor;
+    hidden?: ColumnDescriptor["hidden"];
+    label?: ColumnDescriptor["label"];
+    resizing?: KeyedColumnDescriptor["resizing"];
+    type: "updateColumnProp";
+    width?: ColumnDescriptor["width"];
+}
+export interface ColumnActionTableConfig extends DataSourceConfig {
+    type: "tableConfig";
+}
+/**
+ * PersistentColumnActions are those actions that require us to persist user changes across sessions
+ */
+export type PersistentColumnAction = ColumnActionPin | ColumnActionHide;
+export type GridModelAction = ColumnActionHide | ColumnActionInit | ColumnActionMove | ColumnActionPin | ColumnActionResize | ColumnActionSetTypes | ColumnActionUpdate | ColumnActionUpdateProp | ColumnActionTableConfig;
+export type GridModelReducer = Reducer<GridModel, GridModelAction>;
+export type ColumnActionDispatch = (action: GridModelAction) => void;
+export declare const useTableModel: (tableConfig: Omit<GridConfig, "headings">, dataSourceConfig?: DataSourceConfig) => {
+    columns: KeyedColumnDescriptor[];
+    dispatchColumnAction: import("react").Dispatch<GridModelAction>;
+    headings: import("@vuu-ui/vuu-datagrid-types").TableHeadings;
+};

package/types/useTableScroll.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { Viewport } from "./dataTableTypes";
+export interface ScrollRequestEnd {
+    type: "scroll-end";
+    direction: "home" | "end";
+}
+export interface ScrollRequestPage {
+    type: "scroll-page";
+    direction: "up" | "down";
+}
+export interface ScrollRequestDistance {
+    type: "scroll-distance";
+    distance: number;
+}
+export type ScrollRequest = ScrollRequestPage | ScrollRequestDistance | ScrollRequestEnd;
+export type ScrollRequestHandler = (request: ScrollRequest) => void;
+export interface TableScrollHookProps {
+    onRangeChange: (from: number, to: number) => void;
+    rowHeight: number;
+    viewportHeight: number;
+    viewport: Viewport;
+}
+export declare const useTableScroll: ({ onRangeChange, rowHeight, viewport, }: TableScrollHookProps) => {
+    onScrollbarContainerScroll: () => void;
+    onContentContainerScroll: () => void;
+    onTableContainerScroll: () => void;
+    requestScroll: ScrollRequestHandler;
+    contentContainerRef: import("react").RefObject<HTMLDivElement>;
+    scrollbarContainerRef: import("react").RefObject<HTMLDivElement>;
+    tableContainerRef: import("react").RefObject<HTMLDivElement>;
+};

package/types/useTableViewport.d.ts

@@ -0,0 +1,39 @@
+/**
+ * This hook measures and calculates the values needed to manage layout
+ * and virtualisation of the table. This includes measurements required
+ * to support pinned columns.
+ */
+import { KeyedColumnDescriptor, TableHeadings } from "@vuu-ui/vuu-datagrid-types";
+import { MeasuredSize } from "./useMeasuredContainer";
+export interface TableViewportHookProps {
+    columns: KeyedColumnDescriptor[];
+    headerHeight: number;
+    headings: TableHeadings;
+    rowCount: number;
+    rowHeight: number;
+    size?: MeasuredSize;
+}
+export interface ViewportMeasurements {
+    fillerHeight: number;
+    maxScrollContainerScrollHorizontal: number;
+    maxScrollContainerScrollVertical: number;
+    pinnedWidthLeft: number;
+    pinnedWidthRight: number;
+    rowCount: number;
+    scrollContentHeight: number;
+    scrollbarSize: number;
+    scrollContentWidth: number;
+    totalHeaderHeight: number;
+}
+export declare const useTableViewport: ({ columns, headerHeight, headings, rowCount, rowHeight, size, }: TableViewportHookProps) => {
+    fillerHeight: number;
+    maxScrollContainerScrollHorizontal: number;
+    maxScrollContainerScrollVertical: number;
+    pinnedWidthLeft: number;
+    pinnedWidthRight: number;
+    rowCount: number;
+    scrollContentHeight: number;
+    scrollbarSize: number;
+    scrollContentWidth: number;
+    totalHeaderHeight: number;
+};