@sheetxl/grid-react 0.7.19 → 0.7.21

package/types/index.d.ts

@@ -3,11 +3,11 @@ import { AxisOrientationFlags } from '@sheetxl/utils';
 import { Bounds } from '@sheetxl/utils';
 import { CellCoords } from '@sheetxl/utils';
 import { CellFinder } from '@sheetxl/utils-react';
-import { CellLayout } from '@sheetxl/utils-react';
 import { default as default_2 } from 'react';
 import { Direction } from '@sheetxl/utils';
 import { HiddenHeadersAt } from '@sheetxl/utils-react';
 import { HorizontalAlignment } from '@sheetxl/utils-react';
+import { ICellLayout } from '@sheetxl/utils-react';
 import { ICommands } from '@sheetxl/utils-react';
 import { IScrollPaneElement } from '@sheetxl/utils-react';
 import { ItemSizer } from '@sheetxl/utils-react';
@@ -37,7 +37,7 @@ export declare interface AnimatedStrokeProps {
 
 /**
  * Data grid component for rendering cells onto a virtual panel.
- * This component coordinates between CellLayout and CellRenderer.
+ * This component coordinates between ICellLayout and CellRenderer.
  * This component expects a width and height to be passed to it.
  *
  * * To support dynamic width/height based on div sizing wrap this is @see <Grid>
@@ -45,26 +45,7 @@ export declare interface AnimatedStrokeProps {
  *
  * @see GridProps
  */
-export declare const BaseGrid: default_2.FC<GridProps & GridRefAttribute>;
-
-export declare type CellEditorAttributes = {
-    /**
-     * When editor is loaded, this will be called. Note this should not use the autoFocus property. here
-     * If this is set the editor focus will be called as appropriate.
-     */
-    startEdit?(event: StartEditEvent): void;
-    submitEdit(): boolean;
-    cancelEdit(): void;
-    /**
-     * Called if the StartEditEvent event has autoFocus set.
-     * @param selector A selector string (or empty means 'default' focus)
-     */
-    autoFocus(selector?: string): void;
-    /**
-     * Returns the default line height.
-     */
-    getLineHeight: () => number;
-};
+export declare const BaseGrid: default_2.NamedExoticComponent<GridProps & default_2.RefAttributes<IGridElement>>;
 
 export declare interface CellEditorProps<CT, DT> extends default_2.HTMLAttributes<HTMLElement>, default_2.Attributes {
     /**
@@ -111,11 +92,11 @@ export declare interface CellEditorProps<CT, DT> extends default_2.HTMLAttribute
      */
     onNavigate?(direction: Direction): void;
     zoom?: number;
-}
-
-export declare type CellEditorRefAttribute = {
+    /**
+     * Reference to the underlying element
+     */
     ref?: default_2.Ref<ICellEditorElement>;
-};
+}
 
 export declare interface CellRendererProps<T = any> extends React.HTMLAttributes<HTMLElement>, React.Attributes {
     /**
@@ -133,7 +114,7 @@ export declare interface CellRendererProps<T = any> extends React.HTMLAttributes
     /**
      * The view that is rendering a collection of cells
      */
-    view: GridView;
+    view: IGridView;
     /**
      * The RangeCoords that is being rendering.
      * @remarks
@@ -155,19 +136,18 @@ export declare interface CoordOffset {
 
 /**
  * Default cell editor
+ *
  * @param props
  */
-export declare const DefaultCellEditor: default_2.FC<StringCellEditorProps & CellEditorRefAttribute>;
+export declare const DefaultCellEditor: default_2.NamedExoticComponent<Omit<StringCellEditorProps, "ref"> & default_2.RefAttributes<ICellEditorElement>>;
 
 /**
  * Default cell component capable of rendering a value
  * @param props
  */
-export declare const DefaultCellRenderer: default_2.FC<CellRendererProps>;
+export declare const DefaultCellRenderer: default_2.MemoExoticComponent<(props: CellRendererProps) => JSX.Element>;
 
-export declare const DefaultHeaderDivider: default_2.FC<HeaderDividerRendererProps & {
-    ref?: default_2.Ref<IHeaderDividerElement>;
-}>;
+export declare const DefaultHeaderDivider: default_2.NamedExoticComponent<Omit<HeaderDividerRendererProps, "ref"> & default_2.RefAttributes<IHeaderDividerElement>>;
 
 export declare const defaultSelectionRenderer: (props: SelectionProps) => JSX.Element;
 
@@ -175,7 +155,7 @@ export declare interface EditorOverlayResults {
     /**
      * Editor component to be injected.
      */
-    overlay: <T>(view: GridView, ref: default_2.Ref<T>) => default_2.ReactNode;
+    renderOverlay: <T>(view: IGridView, ref?: default_2.Ref<T>) => default_2.ReactNode;
     /**
      * Bind to keyboard event
      */
@@ -219,11 +199,14 @@ export declare interface EditState<CT, DT> {
 /**
  * Fill handle component
  */
-export declare const FillHandle: default_2.FC<FillHandleProps & FillHandleRefAttribute>;
+export declare const FillHandle: default_2.NamedExoticComponent<Omit<FillHandleProps, "ref"> & default_2.RefAttributes<FillHandleElement>>;
 
 export declare interface FillHandleAttributes {
 }
 
+export declare interface FillHandleElement extends HTMLDivElement, FillHandleAttributes {
+}
+
 export declare interface FillHandleProps extends default_2.HTMLAttributes<HTMLDivElement> {
     corner?: string;
     x?: number;
@@ -232,11 +215,11 @@ export declare interface FillHandleProps extends default_2.HTMLAttributes<HTMLDi
     borderWidth?: number;
     borderStroke?: string;
     background?: string;
-}
-
-export declare type FillHandleRefAttribute = {
+    /**
+     * Underlying element reference
+     */
     ref?: default_2.Ref<FillHandleAttributes>;
-};
+}
 
 export declare interface FrozenEdge {
     /**
@@ -251,66 +234,7 @@ export declare interface FrozenEdge {
 
 export declare const getDefaultStringEditState: (clean?: string) => EditState<string, string> | undefined;
 
-export declare const Grid: default_2.FC<GridProps & GridRefAttribute>;
-
-export declare interface GridAttributes {
-    /**
-     * The stage element for the cells
-     */
-    readonly stage: HTMLDivElement | null;
-    /**
-     * The rowCount provided by the properties
-     */
-    readonly rowCount: number;
-    /**
-     * The columnCount provided by the properties
-     */
-    readonly columnCount: number;
-    /**
-     * Invalidate either a cell or a range of cells. If no arguments are provided then the entire grid is invalidated.
-     * @param coords
-     */
-    invalidate: (coords?: CellCoords | RangeCoords) => void;
-    handleWheel: (event: globalThis.WheelEvent) => void;
-    getScrollPosition: () => TopLeft;
-    getViewport: () => RangeCoords;
-    getDimensions: () => {
-        containerWidth: number;
-        containerHeight: number;
-        totalWidth: number;
-        totalHeight: number;
-    };
-    /**
-     * Scroll the cell into view. If the coord does not have an index it will only scroll in a single direction.
-     */
-    scrollCellCoordsIntoView: (coords: Partial<CellCoords>, options?: globalThis.ScrollIntoViewOptions | boolean) => Promise<Partial<TopLeft>>;
-    /**
-     * The grid coordinates relative to the containing div (includes any padding, margins)
-     */
-    getRelativePointFromClient: (x: number, y: number) => Point | null;
-    /**
-     * Returns the view for the given point. If point is
-     * over a frozen pane it will return the frozen pane otherwise
-     * it will return the center view.
-     */
-    getViewFromClient: (x: number, y: number) => GridView;
-    /**
-     * Returns the view for the given coords. If coord is
-     * over a frozen pane it will return the frozen pane otherwise
-     * it will return the center view.
-     */
-    getViewFromCellCoords: (coords: CellCoords) => GridView;
-    /**
-     * Returns null if the view does not exist.
-     */
-    getViewFromLocation: (anchor: AnchorLocation) => GridView | null;
-    /**
-     * Called when the view has been changed.
-     * @remarks
-     * This is only called once.
-     */
-    onViewChangeOnce: (callback: () => void) => void;
-}
+export declare const Grid: default_2.NamedExoticComponent<GridProps & default_2.RefAttributes<IGridElement>>;
 
 export declare interface GridHeaderStyle extends GridSurfaceStyle {
     strokeFillShadow?: string;
@@ -355,7 +279,7 @@ export declare interface GridProps extends default_2.HTMLAttributes<HTMLDivEleme
     /**
      * The layout for the cells
      */
-    layout?: CellLayout;
+    layout?: ICellLayout;
     /**
      * Called on scroll, subject to debouncing. Used for programmatic changes. Called even on load
      */
@@ -392,11 +316,11 @@ export declare interface GridProps extends default_2.HTMLAttributes<HTMLDivEleme
     /**
      * Allow for customization of freezeTopDivider
      */
-    freezeLeftProps?: Partial<LineProps>;
+    propsFreezeLeft?: Partial<LineProps>;
     /**
      * Allow for customization of freezeTopDivider
      */
-    freezeTopProps?: Partial<LineProps>;
+    propsFreezeTop?: Partial<LineProps>;
     /**
      * Called right before a row is being rendered.
      * Will be called for frozen cells and merged cells
@@ -415,7 +339,7 @@ export declare interface GridProps extends default_2.HTMLAttributes<HTMLDivEleme
      * the pointerEvents are set to none. To enable interaction this should be
      * overwritten.
      */
-    cellRenderer?: (props: CellRendererProps) => default_2.ReactNode;
+    renderCell?: (props: CellRendererProps) => default_2.ReactNode;
     /**
      * Allow for cells to be inset. This is a way to account for borders. By default this is 1, 1, 1,x.
      */
@@ -423,18 +347,18 @@ export declare interface GridProps extends default_2.HTMLAttributes<HTMLDivEleme
     /**
      * Render elements for the view. This will be called whenever the viewport changes.
      */
-    overlays?: ((view: GridView) => default_2.ReactNode)[];
+    renderOverlays?: ((view: IGridView) => default_2.ReactNode)[];
     /**
      * Props passed to all overlayRenderers
      */
-    overlaysProps?: default_2.HTMLAttributes<HTMLDivElement>;
+    propsOverlays?: default_2.HTMLAttributes<HTMLDivElement>;
     /**
      * Used for rendering overlays. Similar to cell render but covers the entire area.
+     *
      * @param props
-     * @returns
      */
-    overlayRenderer?: <T = any>(props: OverlayRendererProps, ref: default_2.Ref<T>) => default_2.ReactNode;
-    overlayProps?: default_2.HTMLAttributes<HTMLDivElement>;
+    renderOverlay?: <T extends HTMLDivElement = HTMLDivElement>(props: OverlayRendererProps<T>) => default_2.ReactNode;
+    propsOverlay?: default_2.HTMLAttributes<HTMLDivElement>;
     /**
      * Overlays are generally clipped to fit in the viewport but
      * this allows for the properties to be overridden.
@@ -443,11 +367,11 @@ export declare interface GridProps extends default_2.HTMLAttributes<HTMLDivEleme
     /**
      * Allows users to Wrap stage children in Top level Context
      */
-    stageWrapper?: (children: default_2.ReactNode) => default_2.ReactNode;
+    wrapperStage?: (children: default_2.ReactNode) => default_2.ReactNode;
     /**
      * Props that can be injected to stage
      */
-    stageProps?: default_2.HTMLAttributes<HTMLDivElement>;
+    propsStage?: default_2.HTMLAttributes<HTMLDivElement>;
     /**
      * Show grid lines.
      * Useful for spreadsheets
@@ -463,11 +387,11 @@ export declare interface GridProps extends default_2.HTMLAttributes<HTMLDivEleme
     /**
      * Gridline props for rows.
      */
-    gridLineRowsProps?: default_2.SVGProps<SVGPathElement>;
+    propsGridLineRows?: default_2.SVGProps<SVGPathElement>;
     /**
      * Gridline props for columns.
      */
-    gridLineColumnsProps?: default_2.SVGProps<SVGPathElement>;
+    propsGridLineColumns?: default_2.SVGProps<SVGPathElement>;
     /**
      * Will skip rendering for this row and the adjacent rows in the given direction.
      */
@@ -497,7 +421,7 @@ export declare interface GridProps extends default_2.HTMLAttributes<HTMLDivEleme
      *   iterated and if hiddenCellAt does not return false then cellRender will be
      *   called.
      */
-    getVisibleCells?: (view: GridView) => ({
+    getVisibleCells?: (view: IGridView) => ({
         coords: CellCoords;
         value?: any;
         range?: RangeCoords;
@@ -525,14 +449,6 @@ export declare interface GridProps extends default_2.HTMLAttributes<HTMLDivEleme
     clipCells?: boolean;
 }
 
-export declare type GridRefAttribute = {
-    ref?: default_2.Ref<IGridElement>;
-};
-
-export declare interface GridRefProps extends GridProps {
-    ref?: default_2.Ref<HTMLDivElement>;
-}
-
 export declare interface GridStyle extends GridSurfaceStyle {
     body?: GridSurfaceStyle;
     selection?: SelectionStyle;
@@ -560,151 +476,14 @@ export declare interface GridSurfaceStyle extends PaintStyle {
     darkMode?: boolean;
 }
 
-/**
- * Describes the view of a grid.
- *
- * @remarks
- * Useful for overlay rendering.
- */
-export declare interface GridView {
-    /**
-     * Returns the underlying stage element for the view.
-     *
-     * @remarks
-     * Useful for capturing stage events.
-     */
-    getStage(): HTMLDivElement | null;
-    /**
-     * The anchor for the view.
-     */
-    getAnchor(): AnchorLocation;
-    /**
-     * Allow for dimensions to be determined for various cells.
-     * The cellLayout is inclusive of the zoom
-     */
-    getLayout(): CellLayout;
-    /**
-     * Useful for internal rendering.
-     *
-     * @remarks
-     * The cell layout will account for zoom factors already.
-     */
-    getZoom(): number;
-    /**
-     * This captures the total viewable range.
-     *
-     * @remarks
-     * Will have the sames values as {@link getVisibleRows} and {@link getVisibleColumns}.
-     */
-    getVisibleRangeCoords(): RangeCoords;
-    /**
-     * Useful for scanning. Contains a list of row offsets that are visible.
-     * Guaranteed to be non-null but may be zero length if no rows are visible.
-     */
-    getVisibleRows(): readonly number[];
-    /**
-     * Useful for scanning. Contains a list of column offsets that are visible.
-     * Guaranteed to be non-null but may be zero length if no column are visible.
-     */
-    getVisibleColumns(): readonly number[];
-    /**
-     * Returns the SizedOffsets for columns.
-     */
-    getVisibleColumnOffsets(): SizedOffset;
-    /**
-     * Returns the SizedOffsets for rows.
-     */
-    getVisibleRowOffsets(): SizedOffset;
-    /**
-     * Returns the range coords that captures the entire view.
-     */
-    getTotalRangeCoords(): RangeCoords;
-    /**
-     * Clip a rectangle against the viewport.
-     *
-     * @remarks
-     * * A negative inset will extend outside of the viewport;
-     * * Useful when elements should visually 'flow' off of the viewport. (i.e. selection with borders)
-     */
-    toClipBounds(bounds?: Bounds, insets?: number | Bounds): Bounds;
-    /**
-     * Returns the viewport bounds for an absolute bounds.
-     */
-    toViewBounds(bounds: Bounds): Bounds;
-    /**
-     * Returns the absolute bounds for a viewport bounds.
-     */
-    toAbsoluteBounds(bounds: Bounds): Bounds;
-    /**
-     * The bounds of the the overlay relative to the total view.
-     */
-    getBounds(): Bounds;
-    /**
-     * Additional inside padding.
-     */
-    getInsets(): Rectangle;
-    /**
-     * Returns the cell as a range. If this cell is merged this will be reflected.
-     * Note - This is slightly more sophisticated than rowSpan and colSpan
-     * because it allows for queries that are not on the top/left.
-     */
-    getCellCoordsAsRangeCoords(coords: CellCoords): RangeCoords;
-    /**
-     * Returns a bounds for a given range.
-     * If not specified then will return for the cellRange.
-     *
-     * @param adjustment This allows you to adjust the rect. Note - This is not like insets
-     *
-     * @remarks
-     * The bounds are relative to the view.
-     */
-    getRangeCoordsBounds(range?: RangeCoords, adjustment?: Partial<Rectangle>): Bounds;
-    /**
-     * Scroll the cell coords into view.
-     * If the coord does not have an index it will only scroll in a single direction.
-     */
-    scrollCellCoordsIntoView(coords: Partial<CellCoords>, options?: globalThis.ScrollIntoViewOptions | boolean): Promise<Partial<TopLeft>>;
-    /**
-     * Returns the coords at the offset.
-     * @param x - The x offset relative to the view
-     * @param y - The y offset relative to the view
-     * @param actualCell - Don't return the topLeft of a merge. Default value `false`.
-     */
-    getCellCoordsFromClient(x: number, y: number, actualCell?: boolean): CellCoords | null;
-    /**
-     * Indicate the allowable scroll directions.
-     */
-    getScrollOrientation(): AxisOrientationFlags;
-    getScrollTopLeft(): TopLeft;
-    getFreezeTopLeft(): TopLeft;
-    /**
-     * Returns the total size of all rendered values in pixels.
-     */
-    getTotalSize(): Size;
-    /**
-     * This is the size for all views (but not including the headers)
-     */
-    getViewportSize(): Size;
-    /**
-     * Allows for access to all current views.
-     */
-    allViews(): Partial<Record<AnchorLocation, GridView>>;
-    /**
-     * Returns a point relative to the view.
-     */
-    getRelativePointFromClient(x: number, y: number): Point | null;
-}
-
 /**
  * A divider placed between headers to provider a visual cue for various actions.
  * Resize, hide/unhide, etc.
  */
-export declare const HeaderDivider: default_2.FC<HeaderDividerAnchorProps & {
-    ref?: default_2.Ref<IHeaderDividerElement>;
-}>;
+export declare const HeaderDivider: default_2.NamedExoticComponent<Omit<HeaderDividerAnchorProps, "ref"> & default_2.RefAttributes<IHeaderDividerElement>>;
 
 export declare interface HeaderDividerAnchorProps extends HeaderDividerProps {
-    dividerRenderer?: (props: HeaderDividerRendererProps, refForward?: default_2.Ref<IHeaderDividerElement>) => default_2.ReactNode;
+    renderDivider?: (props: HeaderDividerRendererProps) => default_2.ReactNode;
     /**
      * The number of pixels to mouse before resizing starts.
      * If this number is less than 1 then it will be 1.
@@ -752,16 +531,13 @@ export declare interface HeaderDividerAnchorProps extends HeaderDividerProps {
     onDividerAutoFit?: (index: number) => void;
 }
 
-export declare interface HeaderDividerAttributes {
-}
-
 /**
  * HeaderDividers follow the header
  * // TODO - allow negative resizing (before the current) (easy to do I think)
  */
 export declare interface HeaderDividerProps extends default_2.HTMLAttributes<HTMLDivElement> {
     orientation: RangeOrientation;
-    view: GridView;
+    view: IGridView;
     index: number;
     /**
      * This should disable interaction. This should also
@@ -800,6 +576,10 @@ export declare interface HeaderDividerProps extends default_2.HTMLAttributes<HTM
     headerStyleSelect: GridHeaderStyle;
     headerStyleSelectAll: GridHeaderStyle;
     headerStyleHover?: GridHeaderStyle | ((style: GridHeaderStyle) => GridHeaderStyle);
+    /**
+     * The reference to the element.
+     */
+    ref?: default_2.Ref<IHeaderDividerElement>;
 }
 
 export declare interface HeaderDividerRendererProps extends HeaderDividerProps {
@@ -811,7 +591,7 @@ export declare interface HeaderDividerRendererProps extends HeaderDividerProps {
     onAutoFit: () => void;
 }
 
-export declare const HeaderRenderer: default_2.FC<HeaderRendererCellProps>;
+export declare const HeaderRenderer: default_2.MemoExoticComponent<(props: HeaderRendererCellProps) => JSX.Element>;
 
 export declare interface HeaderRendererCellProps extends CellRendererProps {
     orientation: RangeOrientation;
@@ -840,36 +620,257 @@ export declare interface HeaderSelectionResults {
     getCellCoordsFromClient: (x: number, y: number) => CellCoords;
 }
 
-export declare interface ICellEditorElement extends HTMLDivElement, CellEditorAttributes {
+export declare type ICellEditorAttributes = {
+    /**
+     * When editor is loaded, this will be called. Note this should not use the autoFocus property. here
+     * If this is set the editor focus will be called as appropriate.
+     */
+    startEdit?(event: StartEditEvent): void;
+    submitEdit(): boolean;
+    cancelEdit(): void;
+    /**
+     * Called if the StartEditEvent event has autoFocus set.
+     * @param selector A selector string (or empty means 'default' focus)
+     */
+    autoFocus(selector?: string): void;
+    /**
+     * Returns the default line height.
+     */
+    getLineHeight: () => number;
+};
+
+export declare interface ICellEditorElement extends HTMLDivElement, ICellEditorAttributes {
+}
+
+export declare interface IGridAttributes {
+    /**
+     * The stage element for the cells
+     */
+    readonly stage: HTMLDivElement | null;
+    /**
+     * The rowCount provided by the properties
+     */
+    readonly rowCount: number;
+    /**
+     * The columnCount provided by the properties
+     */
+    readonly columnCount: number;
+    /**
+     * Invalidate either a cell or a range of cells. If no arguments are provided then the entire grid is invalidated.
+     * @param coords
+     */
+    invalidate: (coords?: CellCoords | RangeCoords) => void;
+    handleWheel: (event: globalThis.WheelEvent) => void;
+    getScrollPosition: () => TopLeft;
+    getViewport: () => RangeCoords;
+    getDimensions: () => {
+        containerWidth: number;
+        containerHeight: number;
+        totalWidth: number;
+        totalHeight: number;
+    };
+    /**
+     * Scroll the cell into view. If the coord does not have an index it will only scroll in a single direction.
+     */
+    scrollCellCoordsIntoView: (coords: Partial<CellCoords>, options?: globalThis.ScrollIntoViewOptions | boolean) => Promise<Partial<TopLeft>>;
+    /**
+     * The grid coordinates relative to the containing div (includes any padding, margins)
+     */
+    getRelativePointFromClient: (x: number, y: number) => Point | null;
+    /**
+     * Returns the view for the given point. If point is
+     * over a frozen pane it will return the frozen pane otherwise
+     * it will return the center view.
+     */
+    getViewFromClient: (x: number, y: number) => IGridView;
+    /**
+     * Returns the view for the given coords. If coord is
+     * over a frozen pane it will return the frozen pane otherwise
+     * it will return the center view.
+     */
+    getViewFromCellCoords: (coords: CellCoords) => IGridView;
+    /**
+     * Returns null if the view does not exist.
+     */
+    getViewFromLocation: (anchor: AnchorLocation) => IGridView | null;
+    /**
+     * Called when the view has been changed.
+     * @remarks
+     * This is only called once.
+     */
+    onViewChangeOnce: (callback: () => void) => void;
+    /**
+     * Reference to the underlying element
+     */
+    ref?: default_2.Ref<HTMLDivElement>;
 }
 
 /**
  * Type returned via ref property
  */
-export declare interface IGridElement extends HTMLDivElement, GridAttributes {
+export declare interface IGridElement extends HTMLDivElement, IGridAttributes {
+}
+
+/**
+ * Describes the view of a grid.
+ *
+ * @remarks
+ * Useful for overlay rendering.
+ */
+export declare interface IGridView {
+    /**
+     * Returns the underlying stage element for the view.
+     *
+     * @remarks
+     * Useful for capturing stage events.
+     */
+    getStage(): HTMLDivElement | null;
+    /**
+     * The anchor for the view.
+     */
+    getAnchor(): AnchorLocation;
+    /**
+     * Allow for dimensions to be determined for various cells.
+     * The cellLayout is inclusive of the zoom
+     */
+    getLayout(): ICellLayout;
+    /**
+     * Useful for internal rendering.
+     *
+     * @remarks
+     * The cell layout will account for zoom factors already.
+     */
+    getZoom(): number;
+    /**
+     * This captures the total viewable range.
+     *
+     * @remarks
+     * Will have the sames values as {@link getVisibleRows} and {@link getVisibleColumns}.
+     */
+    getVisibleRangeCoords(): RangeCoords;
+    /**
+     * Useful for scanning. Contains a list of row offsets that are visible.
+     * Guaranteed to be non-null but may be zero length if no rows are visible.
+     */
+    getVisibleRows(): readonly number[];
+    /**
+     * Useful for scanning. Contains a list of column offsets that are visible.
+     * Guaranteed to be non-null but may be zero length if no column are visible.
+     */
+    getVisibleColumns(): readonly number[];
+    /**
+     * Returns the SizedOffsets for columns.
+     */
+    getVisibleColumnOffsets(): SizedOffset;
+    /**
+     * Returns the SizedOffsets for rows.
+     */
+    getVisibleRowOffsets(): SizedOffset;
+    /**
+     * Returns the range coords that captures the entire view.
+     */
+    getTotalRangeCoords(): RangeCoords;
+    /**
+     * Clip a rectangle against the viewport.
+     *
+     * @remarks
+     * * A negative inset will extend outside of the viewport;
+     * * Useful when elements should visually 'flow' off of the viewport. (i.e. selection with borders)
+     */
+    toClipBounds(bounds?: Bounds, insets?: number | Bounds): Bounds;
+    /**
+     * Returns the viewport bounds for an absolute bounds.
+     */
+    toViewBounds(bounds: Bounds): Bounds;
+    /**
+     * Returns the absolute bounds for a viewport bounds.
+     */
+    toAbsoluteBounds(bounds: Bounds): Bounds;
+    /**
+     * The bounds of the the overlay relative to the total view.
+     */
+    getBounds(): Bounds;
+    /**
+     * Additional inside padding.
+     */
+    getInsets(): Rectangle;
+    /**
+     * Returns the cell as a range. If this cell is merged this will be reflected.
+     * Note - This is slightly more sophisticated than rowSpan and colSpan
+     * because it allows for queries that are not on the top/left.
+     */
+    getCellCoordsAsRangeCoords(coords: CellCoords): RangeCoords;
+    /**
+     * Returns a bounds for a given range.
+     * If not specified then will return for the cellRange.
+     *
+     * @param adjustment This allows you to adjust the rect. Note - This is not like insets
+     *
+     * @remarks
+     * The bounds are relative to the view.
+     */
+    getRangeCoordsBounds(range?: RangeCoords, adjustment?: Partial<Rectangle>): Bounds;
+    /**
+     * Scroll the cell coords into view.
+     * If the coord does not have an index it will only scroll in a single direction.
+     */
+    scrollCellCoordsIntoView(coords: Partial<CellCoords>, options?: globalThis.ScrollIntoViewOptions | boolean): Promise<Partial<TopLeft>>;
+    /**
+     * Returns the coords at the offset.
+     * @param x - The x offset relative to the view
+     * @param y - The y offset relative to the view
+     * @param actualCell - Don't return the topLeft of a merge. Default value `false`.
+     */
+    getCellCoordsFromClient(x: number, y: number, actualCell?: boolean): CellCoords | null;
+    /**
+     * Indicate the allowable scroll directions.
+     */
+    getScrollOrientation(): AxisOrientationFlags;
+    getScrollTopLeft(): TopLeft;
+    getFreezeTopLeft(): TopLeft;
+    /**
+     * Returns the total size of all rendered values in pixels.
+     */
+    getTotalSize(): Size;
+    /**
+     * This is the size for all views (but not including the headers)
+     */
+    getViewportSize(): Size;
+    /**
+     * Allows for access to all current views.
+     */
+    allViews(): Partial<Record<AnchorLocation, IGridView>>;
+    /**
+     * Returns a point relative to the view.
+     */
+    getRelativePointFromClient(x: number, y: number): Point | null;
 }
 
-export declare interface IHeaderDividerElement extends HTMLDivElement, HeaderDividerAttributes {
+export declare interface IHeaderDividerAttributes {
+}
+
+export declare interface IHeaderDividerElement extends HTMLDivElement, IHeaderDividerAttributes {
 }
 
 export declare interface LineProps extends default_2.SVGProps<SVGSVGElement> {
     linePoints: number[];
     bounds: Bounds;
-    pathProps?: default_2.SVGProps<SVGPathElement>;
+    propsPath?: default_2.SVGProps<SVGPathElement>;
 }
 
 export declare type NewHeaderSelectionMode = "clear" | "modify" | "append";
 
 export declare type NewSelectionMode = "clear" | "modify" | "append";
 
-export declare interface OverlayRendererProps extends React.HTMLAttributes<HTMLElement>, React.Attributes {
+export declare interface OverlayRendererProps<T extends HTMLDivElement = any> extends React.HTMLAttributes<HTMLDivElement>, React.Attributes {
     /**
      * The view that is rendering a collection of cells
      */
-    view: GridView;
+    view: IGridView;
     onStageKeyDown?: (e: React.KeyboardEvent<Element>) => void;
     onStagePointerDown?: (e: React.PointerEvent<Element>) => void;
     onStageDoubleClick?: (e: React.PointerEvent<Element>) => void;
+    ref?: React.Ref<T>;
 }
 
 export declare interface PaintStyle {
@@ -885,7 +886,7 @@ export declare const safeSelectionCoords: (prev?: SelectionCoords) => SelectionC
 /**
  * ScrollableGrid. This wraps BaseGrid and manages bounds to create consistent css behavior for consumers
  */
-export declare const ScrollableGrid: default_2.FC<ScrollableGridProps & ScrollableRefAttribute>;
+export declare const ScrollableGrid: default_2.NamedExoticComponent<Omit<ScrollableGridProps, "ref"> & default_2.RefAttributes<IGridElement & IScrollPaneElement>>;
 
 export declare interface ScrollableGridProps extends GridProps, ScrollPaneProps {
     /**
@@ -893,20 +894,20 @@ export declare interface ScrollableGridProps extends GridProps, ScrollPaneProps
      * @param scrollPoint
      */
     onScrollViewport?: (scrollPoint: Partial<TopLeft>) => void;
+    /**
+     * Ref for the HTMLDivElement
+     */
+    ref?: default_2.Ref<IGridElement | IScrollPaneElement | any>;
 }
 
-export declare type ScrollableRefAttribute = {
-    ref?: default_2.Ref<IGridElement | IScrollPaneElement>;
-};
-
 declare const Selection_2: default_2.FC<SelectionProps>;
 export { Selection_2 as Selection }
 
 export declare const SELECTION_CLIP_INSETS = -10;
 
 export declare interface SelectionPointerHandlerOptions extends Omit<PointerHandlerOptions, "onPointerDown" | "onPointerMoveOrWait"> {
-    onSelectionPointerDown: (event: default_2.PointerEvent<Element>, modifiers: PointerModifiers, view?: GridView, coords?: CellCoords, pivotCoords?: CellCoords, extendSelection?: boolean, scrollToAnchor?: boolean, resetCellAnchor?: boolean) => boolean | void;
-    onSelectionPointerMoveOrWait?: (event: default_2.PointerEvent<Element>, modifiers: PointerModifiers, originalEvent: default_2.PointerEvent<Element>, view?: GridView, coords?: CellCoords, pivotCoords?: CellCoords, scrollToAnchor?: boolean, resetCellAnchor?: boolean) => void;
+    onSelectionPointerDown: (event: default_2.PointerEvent<Element>, modifiers: PointerModifiers, view?: IGridView, coords?: CellCoords, pivotCoords?: CellCoords, extendSelection?: boolean, scrollToAnchor?: boolean, resetCellAnchor?: boolean) => boolean | void;
+    onSelectionPointerMoveOrWait?: (event: default_2.PointerEvent<Element>, modifiers: PointerModifiers, originalEvent: default_2.PointerEvent<Element>, view?: IGridView, coords?: CellCoords, pivotCoords?: CellCoords, scrollToAnchor?: boolean, resetCellAnchor?: boolean) => void;
 }
 
 export declare type SelectionPolicy = "single" | "range" | "multiple";
@@ -916,7 +917,13 @@ export declare interface SelectionProps extends SVGRectProps {
      * @defaultValue false unless props are set
      */
     isAnimatedStroke?: boolean;
-    animatedStrokeProps?: AnimatedStrokeProps;
+    /**
+     * Customize props for Animated Stroke
+     */
+    propsAnimatedStroke?: AnimatedStrokeProps;
+    /**
+     * The range that this selection represents.
+     */
     range: RangeCoords;
     /**
      * An area may or may not contain an anchor cell.
@@ -954,7 +961,7 @@ export declare interface SelectionResults {
      * // TODO - make this a function that takes props and received onMouse, onKeyboard
      * (we can then make selection overlays a function that doesn't rerender the table (or sheet on move))
      */
-    overlay: (view: GridView) => default_2.ReactNode;
+    renderOverlay: (view: IGridView) => default_2.ReactNode;
     /**
      * Navigate left/right/up/down
      * @param direction The direction to navigate.
@@ -1049,8 +1056,8 @@ declare const SVGRect_2: (props: SVGRectProps) => JSX.Element;
 export { SVGRect_2 as SVGRect }
 
 export declare interface SVGRectProps extends default_2.SVGProps<SVGSVGElement> {
-    pathBounds?: Bounds;
-    pathProps?: default_2.SVGProps<SVGPathElement>;
+    boundsPath?: Bounds;
+    propsPath?: default_2.SVGProps<SVGPathElement>;
 }
 
 export declare interface TextStyle extends PaintStyle {
@@ -1063,7 +1070,7 @@ export declare interface TextStyle extends PaintStyle {
 /**
  * TouchSelectHandle component
  */
-export declare const TouchSelectHandle: default_2.NamedExoticComponent<TouchSelectHandleProps & default_2.RefAttributes<TouchSelectHandleElement>>;
+export declare const TouchSelectHandle: default_2.NamedExoticComponent<Omit<TouchSelectHandleProps, "ref"> & default_2.RefAttributes<TouchSelectHandleElement>>;
 
 export declare interface TouchSelectHandleAttributes {
 }
@@ -1080,7 +1087,7 @@ export declare interface TouchSelectHandleProps extends default_2.HTMLAttributes
      */
     anchor: 'tl' | 'br' | 'l' | 't' | 'r' | 'b';
     range: RangeCoords;
-    view: GridView;
+    view: IGridView;
     size?: number;
     borderWidth?: number;
     borderStroke?: string;
@@ -1102,16 +1109,16 @@ export declare interface TouchSelectHandleProps extends default_2.HTMLAttributes
      * @defaultValue document.body
      */
     scrollableRoot?: HTMLElement;
-}
-
-export declare type TouchSelectHandleRefAttribute = {
+    /**
+     * Reference to the underling element
+     */
     ref?: default_2.Ref<TouchSelectHandleElement>;
-};
-
-export declare interface TouchSelectHandleRefProps extends TouchSelectHandleProps, TouchSelectHandleRefAttribute {
 }
 
-export declare const useCellLayout: (props: UseCellLayoutProps | null) => CellLayout;
+/**
+ * Hook to manage cell layout
+ */
+export declare const useCellLayout: (props: UseCellLayoutProps | null) => ICellLayout;
 
 export declare interface UseCellLayoutProps {
     /**
@@ -1249,7 +1256,7 @@ export declare interface useKeyboardEditorOverlayOptions {
     /**
      * The view that is being used for rendering
      */
-    view: GridView;
+    view: IGridView;
     /**
      * Active selected cell. This is required to enable
      * the editor to activate when a key is pressed
@@ -1260,7 +1267,7 @@ export declare interface useKeyboardEditorOverlayOptions {
      * This should not return null but rather can canEdit.
      * This is called during placement after scrolling and other bookkeeping has occurred
      */
-    getCellEditor: (props: CellEditorProps<any, any> & CellEditorRefAttribute, coords: CellCoords) => default_2.ReactElement<CellEditorProps<any, any> & CellEditorRefAttribute>;
+    getCellEditor: (props: CellEditorProps<any, any>, coords: CellCoords) => default_2.ReactElement<CellEditorProps<any, any>>;
     /**
      * Callback fired before editing. Can be used to prevent editing.
      */
@@ -1298,7 +1305,7 @@ export declare interface useKeyboardEditorOverlayOptions {
      * @returns Either `true` or an `StartEditEvent`
      */
     isEditorStartPointerEvent?: (e: PointerEvent, coords: CellCoords) => boolean | StartEditEvent;
-    containerProps?: default_2.HTMLAttributes<HTMLDivElement>;
+    propsContainer?: default_2.HTMLAttributes<HTMLDivElement>;
     borderStrokeFill?: string;
     borderStrokeWidth?: number;
     /**
@@ -1307,7 +1314,10 @@ export declare interface useKeyboardEditorOverlayOptions {
     alignment?: HorizontalAlignment;
 }
 
-export declare const useSelection: ({ gridRef, commands, layout, selection: propSelection, onSelectionChange: propOnSelectionChange, onSelectionDragStart: propOnSelectionDragStart, onSelectionDragEnd: propOnSelectionDragEnd, selectionPolicy, newSelectionMode, allowDeselectSelection, onFillPreview: propOnFillPreview, onFillCancel: propOnFillCancel, onFillDone: propOnFillDone, onFill: propOnFill, disableFillDrag, fillHandleBorderColor, hiddenRowsAt: propHiddenRowsAt, hiddenColumnsAt: propHiddenColumnsAt, isContentfulCell: propsIsContentfulCell, contentfulCellFinder: propContentfulCellFinder, getDataCoords, alwaysScrollToActiveCoords, selectionBounds: propSelectionBounds, pointerDownInterceptor, pointerMoveInterceptor, mergedRanges, canSelectionSpanMergedCells, onMoveDragStart: propOnMoveDragStart, onMoveDragUpdate: propOnMoveDragUpdate, onMoveDragEnd: propOnMoveDragEnd, onMoveDragDone: propOnMoveDragDone, selectionRenderer: propSelectionRenderer, disableMoveDrag, getCellCoordsAsRangeCoords, moveDragHitSize, moveDragOutlineSize, selectionBackgroundColor, selectionBorderColor, selectionRemoveBorderColor, selectionRemoveBackgroundColor, disableTouchSelection, touchSelectHandleProps, }: UseSelectionOptions) => SelectionResults;
+/**
+ * Hook to enable selection in grid
+ */
+export declare const useSelection: ({ gridRef, commands, layout, selection: propSelection, onSelectionChange: propOnSelectionChange, onSelectionDragStart: propOnSelectionDragStart, onSelectionDragEnd: propOnSelectionDragEnd, selectionPolicy, newSelectionMode, allowDeselectSelection, onFillPreview: propOnFillPreview, onFillCancel: propOnFillCancel, onFillDone: propOnFillDone, onFill: propOnFill, disableFillDrag, fillHandleBorderColor, hiddenRowsAt: propHiddenRowsAt, hiddenColumnsAt: propHiddenColumnsAt, isContentfulCell: propsIsContentfulCell, contentfulCellFinder: propContentfulCellFinder, getDataCoords, alwaysScrollToActiveCoords, selectionBounds: propSelectionBounds, pointerDownInterceptor, pointerMoveInterceptor, mergedRanges, canSelectionSpanMergedCells, onMoveDragStart: propOnMoveDragStart, onMoveDragUpdate: propOnMoveDragUpdate, onMoveDragEnd: propOnMoveDragEnd, onMoveDragDone: propOnMoveDragDone, renderSelection: propRenderSelection, disableMoveDrag, getCellCoordsAsRangeCoords, moveDragHitSize, moveDragOutlineSize, selectionBackgroundColor, selectionBorderColor, selectionRemoveBorderColor, selectionRemoveBackgroundColor, disableTouchSelection, propsTouchSelectHandle, }: UseSelectionOptions) => SelectionResults;
 
 export declare interface UseSelectionOptions {
     /**
@@ -1318,7 +1328,7 @@ export declare interface UseSelectionOptions {
     /**
      * This is used for pageUp/pageDown and getHiddenAuto.
      */
-    layout?: CellLayout;
+    layout?: ICellLayout;
     /**
      * selections
      */
@@ -1453,11 +1463,11 @@ export declare interface UseSelectionOptions {
     /**
      * If touch is enabled.
      */
-    touchSelectHandleProps?: TouchSelectHandleProps;
+    propsTouchSelectHandle?: TouchSelectHandleProps;
     /**
      * Allow users to customize selected cells design
      */
-    selectionRenderer?: (props: SelectionProps) => default_2.ReactNode;
+    renderSelection?: (props: SelectionProps) => default_2.ReactNode;
     /**
      * Border color of selected area
      */