@vuu-ui/grid-layout 4.0.0-alpha.1

package/types/src/drag-drop-next/DragContextNext.d.ts

@@ -0,0 +1,73 @@
+import { EventEmitter, type orientationType } from "@vuu-ui/vuu-utils";
+import { DragSource } from "../GridLayoutContext";
+type DragSourceDescriptor = {
+    dropTargets: string[];
+    orientation?: orientationType;
+    payloadType?: string;
+};
+export type DropPosition = {
+    position: "before" | "after";
+    target: string;
+};
+export type DragSources = {
+    [key: string]: DragSourceDescriptor;
+};
+export type DropProps<T extends DragSource = DragSource> = {
+    dragSource: T;
+    toId?: string;
+    tabsId?: string;
+    dropPosition?: DropPosition;
+};
+export type DropHandler<T extends DragSource = DragSource> = (dropProps: DropProps<T>) => void;
+export type DragContextDropEvent = {
+    type: "drop";
+    dragSource: DragSource;
+    tabsId: string;
+    dropPosition: DropPosition;
+};
+export type DragContextDetachTabEvent = {
+    gridId: string;
+    type: "detach-tab";
+    tabsId: string;
+    value: string;
+};
+export type DragContextDropHandler = (evt: DragContextDropEvent) => void;
+export type DragContextDetachTabHandler = (evt: DragContextDetachTabEvent) => void;
+export type DragContextEvents = {
+    drop: DragContextDropHandler;
+    "detach-tab": DragContextDetachTabHandler;
+};
+/**
+ * This context is a global singleton. Even when DragDropProviders are nested,
+ * a single instance of this context object is always used.
+ */
+export declare class DragContext extends EventEmitter<DragContextEvents> {
+    #private;
+    beginDrag(e: DragEvent, dragSource: DragSource): void;
+    endDrag(): void;
+    /**
+     * A 'detached' tab is one that has been dragged from its place in tabstrip
+     * but not yet dropped. If it is the selected tab, we want to avoid unmounting
+     * the react component in the associated TabPanel. By marking it as 'detached'
+     * the TabPanel is still rendered but not visible. When the tab is dropped, the
+     * TabPanel can be assigned its new location (might still be within tabstrip, might
+     * not be) and made visible, without ever having to unmount/remount.
+     */
+    detachTab(gridId: string, tabsId: string, value: string): void;
+    drop: ({ tabsId, dropPosition, }: Pick<DragContextDropEvent, "tabsId" | "dropPosition">) => void;
+    registerTabsForDragDrop: (id: string) => void;
+    get draggedElement(): HTMLElement;
+    get dragElementWidth(): number;
+    get dragLabelWidth(): number;
+    get dragSource(): DragSource | undefined;
+    get internalDragSources(): Map<string, DragSourceDescriptor>;
+    set dragSources(dragSources: DragSources);
+    set dropHandler(dropHandler: DropHandler);
+    get dropped(): boolean;
+    get x(): number;
+    set x(value: number);
+    get y(): number;
+    set y(value: number);
+    private buildDragSources;
+}
+export {};

package/types/src/drag-drop-next/DragDropProviderNext.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+import { DragContext, DragContextDetachTabHandler, DragContextDropHandler, type DragSources } from "./DragContextNext";
+export type DragDropRegistrationFn = (id: string) => void;
+export type DragDropBeginDrag = (id: string, draggedElement: HTMLElement) => void;
+export type DragDropEndDrag = (id: string) => void;
+export type DragSourceRegistrationHandler = (id: string) => void;
+export interface DragDropNextProviderProps {
+    children: ReactNode;
+    dragSources: DragSources;
+    onDetachTab: DragContextDetachTabHandler;
+    onDrop: DragContextDropHandler;
+}
+export type MeasuredTarget = {
+    bottom: number;
+    left: number;
+    right: number;
+    top: number;
+};
+export declare const DragDropProviderNext: ({ children, onDetachTab, onDrop, }: DragDropNextProviderProps) => import("react").JSX.Element;
+export declare const useDragContext: () => DragContext;

package/types/src/drag-drop-next/SpaceMan.d.ts

@@ -0,0 +1,35 @@
+import type { RefCallback } from "react";
+import { type orientationType } from "@vuu-ui/vuu-utils";
+import type { DragContext, DropPosition } from "./DragContextNext";
+export type State = "initial" | "away" | "1spacer" | "2spacer";
+type Direction = "fwd" | "bwd";
+export declare class SpaceMan {
+    #private;
+    id: string;
+    constructor(dragContext: DragContext, id: string, orientation?: orientationType);
+    get mouseOffset(): {
+        x: number;
+        y: number;
+    };
+    set mouseOffset(offset: {
+        x: number;
+        y: number;
+    });
+    get dropPosition(): DropPosition | undefined;
+    get positionRelativeToTargetTab(): "before" | "after";
+    setDragContainer: RefCallback<HTMLElement>;
+    enterDragContainer(): void;
+    leaveDragContainer(): void;
+    dragStart(index: number | string): void;
+    dragEnter(index: number, direction: Direction): void;
+    insertSpacer(index: number | string, size: number): void;
+    private clearSpacers;
+    cleanup(): void;
+    drop(x: number, y: number): Promise<void>;
+    dragEnd(): void;
+    private getPositionOfDragContainer;
+    private getPositionOfDropTarget;
+    private setSpacerSizes;
+    private createDragSpacer;
+}
+export {};

package/types/src/drag-drop-next/tabstrip-drag-drop.d.ts

@@ -0,0 +1,3 @@
+import { orientationType } from "@vuu-ui/vuu-utils";
+import { DragContext } from "./DragContextNext";
+export declare function initializeDragContainer(containerEl: HTMLElement, dragContext: DragContext, orientation?: orientationType): () => void;

package/types/src/grid-dom-utils.d.ts

@@ -0,0 +1,17 @@
+import { GridLayoutModelPosition, GridLayoutResizeDirection } from "./GridLayoutModel";
+import { GridModelChildItem } from "./GridModel";
+export declare const classNameLayoutItem = "vuuGridLayoutItem";
+export declare const classNameGridSplitter = "vuuGridSplitter";
+export type ResizeOrientation = "horizontal" | "vertical";
+type GridPos = [number, number];
+export declare const getGridSplitter: (el: HTMLElement) => HTMLElement;
+export declare const getGridLayoutItem: (el: HTMLElement) => HTMLElement;
+export declare const getColumn: (el: HTMLElement) => GridPos;
+export declare const getRow: (el: HTMLElement | undefined) => GridPos;
+export declare const getRowIndex: (el: HTMLElement) => number;
+export declare const setGridColumn: (target: string | HTMLElement, { start, end }: GridLayoutModelPosition) => void;
+export declare const setGridRow: (target: string | HTMLElement, { start, end }: GridLayoutModelPosition) => void;
+export declare const spansMultipleTracks: (gridItem: GridModelChildItem, direction: GridLayoutResizeDirection) => boolean;
+export declare function getClosestGridLayout(source: string): string;
+export declare function getClosestGridLayout(source: HTMLElement): string;
+export {};

package/types/src/grid-layout-utils.d.ts

@@ -0,0 +1,80 @@
+import { GridLayoutDropPosition, GridLayoutSplitDirection } from "@vuu-ui/vuu-utils";
+import { GridItemUpdate, GridLayoutModelPosition, GridLayoutResizeDirection } from "./GridLayoutModel";
+import { GridLayoutChildItemDescriptor, GridLayoutModelCoordinates, GridModelChildItem, GridModelCoordinates, ISplitter, TrackType } from "./GridModel";
+export declare const splitTrack: (tracks: number[], trackIndex: number) => number[];
+export type ContrasAndSiblings = {
+    contras: GridModelChildItem[];
+    position: GridLayoutModelPosition;
+    siblings: GridModelChildItem[];
+};
+/**
+ * Siblings are gridLayoutItem(s) starting on same trackEdge as
+ * gridItem. Contras are gridLayoutItems ending on same trackEdge
+ * as gridItem.
+ * We are measuring here for a horizontal splitter,siblings are
+ * gridItems to the immediate right of gridItem, contras are
+ * gridItems ending in the row immediately above gridItem.
+ * @param gridLayoutItem
+ * @param siblings 0 or more siblings
+ * @param contras 1 or more contras
+ * @returns
+ */
+export declare const getMatchingColspan: (targetGridItem: GridModelChildItem, siblings: GridModelChildItem[], contras: GridModelChildItem[]) => ContrasAndSiblings | undefined;
+/**
+ * Siblings are gridLayoutItem(s) starting on same trackEdge as
+ * gridItem. Contras are gridLayoutItems ending on same trackEdge
+ * as gridItem.
+ * We are measuring here for a vertical splitter,siblings are
+ * gridItems immediately below gridItem, contras are
+ * gridItems ending in the col immediately left of gridItem.
+ * @param gridLayoutItem
+ * @param siblings 0 or more siblings
+ * @param contras 1 or more contras
+ * @returns
+ */
+export declare const getMatchingRowspan: (gridItem: GridModelChildItem, siblings: GridModelChildItem[], contras: GridModelChildItem[]) => ContrasAndSiblings | undefined;
+/**
+ * Resize requires new track if the splitter being used for resize is on the same
+ * trackEdge as another splitter
+ *
+ * @param splitters
+ * @param splitter
+ * @returns
+ */
+export declare const doesResizeRequireNewTrack: (splitters: ISplitter[], splitter: ISplitter) => boolean;
+/**
+ *
+ * @param moveBy positive or negative number
+ * @param adjustmentAmount positive number, never greater than abs(moveBy)
+ * @returns
+ */
+export declare const adjustDistance: (moveBy: number, adjustmentAmount: number) => number;
+export declare const byColumnStart: (item1: GridModelChildItem, item2: GridModelChildItem) => number;
+export declare const byRowStart: (item1: GridModelChildItem, item2: GridModelChildItem) => number;
+export declare const gridResizeDirectionFromDropPosition: (dropPosition: GridLayoutDropPosition) => GridLayoutResizeDirection;
+export declare const byColumnPosition: ({ column: pos1 }: GridModelChildItem, { column: pos2 }: GridModelChildItem) => -1 | 0 | 1;
+export declare const byRowPosition: ({ row: pos1 }: GridModelChildItem, { row: pos2 }: GridModelChildItem) => -1 | 0 | 1;
+export declare const itemsFillColumn: (items: GridModelChildItem[], pos: GridLayoutModelPosition) => boolean;
+export declare const itemsFillRow: (items: GridModelChildItem[], row: GridLayoutModelPosition) => boolean;
+/**
+ * This assumes that tracks have already been prepared, such that 'position'
+ * spans at least two tracks in the split direction
+ *
+ * @param position
+ * @param splitDirection
+ * @returns [droppedItemPosition, targetPosition]
+ */
+export declare const splitGridChildPosition: ({ column: { start: colStart, end: colEnd }, row: { start: rowStart, end: rowEnd }, }: GridLayoutModelCoordinates, splitDirection: GridLayoutSplitDirection, splitTrackIndex: number) => [GridLayoutModelCoordinates, GridLayoutModelCoordinates];
+export declare const isFixedHeightChildItem: (item: GridModelChildItem) => boolean;
+export declare const isFixedWidthChildItem: (item: GridModelChildItem) => boolean;
+export declare const getGridArea: ({ column, row }: GridLayoutModelCoordinates) => string;
+export declare const getActiveIndex: (childItems: GridModelChildItem[]) => number;
+export declare const getSharedGridPosition: (childItems: GridModelChildItem[]) => GridLayoutModelCoordinates;
+export declare const getGridPosition: (gridArea: GridLayoutChildItemDescriptor["gridArea"]) => GridModelCoordinates;
+export declare const getTrackType: (splitter: ISplitter) => TrackType;
+export declare const setTrackStart: (trackType: TrackType, gridItem: GridModelChildItem, adjustment?: number) => GridItemUpdate;
+export declare const setTrackEnd: (trackType: TrackType, gridItem: GridModelChildItem, adjustment?: number) => GridItemUpdate;
+export declare const setColumnEnd: (gridItem: GridModelChildItem) => GridItemUpdate;
+export declare const setRowEnd: (gridItem: GridModelChildItem) => GridItemUpdate;
+export declare const moveColumn: ({ id, column: { start, end }, }: GridModelChildItem) => GridItemUpdate;
+export declare const moveRow: ({ id, row: { start, end }, }: GridModelChildItem) => GridItemUpdate;

package/types/src/grid-matrix.d.ts

@@ -0,0 +1,5 @@
+import { GridModelChildItem } from "./GridModel";
+export type GridMatrix = number[][];
+export declare const getGridMatrix: (gridItems: GridModelChildItem[], rowCount: number, colCount: number) => GridMatrix;
+export declare const printGrid: (grid: number[][]) => void;
+export declare function getEmptyExtents(grid: GridMatrix): GridModelChildItem[];

package/types/src/index.d.ts

@@ -0,0 +1,10 @@
+export { GridLayout } from "./GridLayout";
+export { GridLayoutItem } from "./GridLayoutItem";
+export { GridLayoutStackedItem } from "./GridLayoutStackedtem";
+export { GridLayoutProvider, type SerializedGridLayout, } from "./GridLayoutProvider";
+export type { GridLayoutChangeHandler, GridLayoutDescriptor, TrackSize, } from "./GridModel";
+export { layoutFromJson } from "./layoutFromJson";
+export { type ComponentTemplate, type DragSource, type TemplateSource, useGridLayoutDispatch, useGridModel, useGridLayoutDragStartHandler, } from "./GridLayoutContext";
+export { useDraggable } from "./useDraggable";
+export { DragDropProviderNext } from "./drag-drop-next/DragDropProviderNext";
+export type { DragSources, DropHandler, } from "./drag-drop-next/DragContextNext";

package/types/src/layoutFromJson.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from "react";
+import { LayoutJSON } from "./componentToJson";
+export declare function layoutFromJson({ active, id, type, children, props, state }: LayoutJSON, path: string): ReactElement;

package/types/src/layoutToJson.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from "react";
+export declare function layoutToJSON(component: ReactElement): import("./componentToJson").LayoutJSON<object>;

package/types/src/propUtils.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from "react";
+import { LayoutModel } from "@vuu-ui/vuu-utils";
+export declare const getProp: (component: LayoutModel | undefined, propName: string) => any;
+export declare const getProps: (component?: LayoutModel) => {};
+export declare const getChildProp: (container: LayoutModel) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;

package/types/src/react-element-utils.d.ts

@@ -0,0 +1,3 @@
+import React, { ReactElement } from "react";
+export declare const getGridItemChild: (gridItems: ReactElement[], gridItemId: string) => ReactElement;
+export declare const addChildToStackedGridItem: (stackElement: ReactElement, childElement: ReactElement) => ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/types/src/typeOf.d.ts

@@ -0,0 +1,6 @@
+import { LayoutModel, WithType } from "@vuu-ui/vuu-utils";
+import { ReactElement } from "react";
+import { LayoutJSON } from "./componentToJson";
+export declare function typeOf(element?: LayoutModel | WithType): string | undefined;
+export declare const isTypeOf: (element: ReactElement, type: string) => boolean;
+export declare const isLayoutJSON: (layout: LayoutJSON) => layout is LayoutJSON;

package/types/src/useAsDropTarget.d.ts

@@ -0,0 +1,7 @@
+import { DragEventHandler } from "react";
+export declare const useAsDropTarget: () => {
+    onDragEnter: DragEventHandler;
+    onDragOver: DragEventHandler;
+    onDragLeave: DragEventHandler;
+    onDrop: DragEventHandler;
+};

package/types/src/useDraggable.d.ts

@@ -0,0 +1,23 @@
+import { DragEvent, DragEventHandler } from "react";
+import { GridLayoutDragEndHandler } from "./GridLayoutProvider";
+import { DragSourceProvider } from "./GridLayoutContext";
+import { LayoutJSON } from "./componentToJson";
+export type DragStartIdOptions = {
+    id: string;
+    type: "text/plain";
+};
+export type DragStartJsonOptions = {
+    payload: LayoutJSON;
+    type: "text/json";
+};
+export type GridLayoutDragStartHandler = (evt: DragEvent<HTMLElement>, dragStartOptions: DragStartIdOptions | DragStartJsonOptions) => void;
+export interface DraggableHookProps {
+    draggableClassName?: string;
+    getDragSource: DragSourceProvider;
+    onDragEnd?: GridLayoutDragEndHandler;
+    onDragStart?: GridLayoutDragStartHandler;
+}
+export declare const useDraggable: ({ getDragSource, onDragEnd, onDragStart, }: DraggableHookProps) => {
+    onDragEnd: DragEventHandler<HTMLElement>;
+    onDragStart: DragEventHandler<HTMLElement>;
+};

package/types/src/useGridChildProps.d.ts

@@ -0,0 +1,13 @@
+import { GridModelChildItemProps } from "./GridModel";
+export declare const useGridChildProps: ({ contentVisible, dropTarget, header, height, id, stackId, resizeable, style, title, type, width, }: GridModelChildItemProps) => {
+    contentDetached: boolean | undefined;
+    contentVisible: boolean | undefined;
+    dragging: boolean;
+    dropTarget: string | boolean | undefined;
+    gridArea: string;
+    header: boolean | undefined;
+    horizontalSplitter: boolean;
+    stacked: boolean;
+    title: string | undefined;
+    verticalSplitter: boolean;
+};

package/types/src/useGridLayout.d.ts

@@ -0,0 +1,43 @@
+import { ReactElement, ReactNode, RefCallback } from "react";
+import { DragContextDetachTabHandler, DragContextDropHandler } from "./drag-drop-next/DragContextNext";
+import { GridLayoutDispatch, GridLayoutDropHandler } from "./GridLayoutContext";
+import { GridLayoutItemProps } from "./GridLayoutItem";
+import { GridLayoutModel } from "./GridLayoutModel";
+import { GridLayoutDragEndHandler } from "./GridLayoutProvider";
+import { GridColumnsAndRows, GridLayoutChangeHandler, GridModel, GridModelChildItem, ISplitter } from "./GridModel";
+import { GridLayoutDragStartHandler } from "./useDraggable";
+export type GridLayoutHookProps = {
+    children: ReactNode;
+    id: string;
+    colsAndRows?: GridColumnsAndRows;
+    onChange?: GridLayoutChangeHandler;
+};
+type GridLayoutItemElements = Array<ReactElement<GridLayoutItemProps>>;
+type NonContentGridItems = {
+    splitters: ISplitter[];
+    placeholders: GridModelChildItem[];
+    stackedItems: GridModelChildItem[];
+};
+/**
+ * Create the GridModel and bind model changes to DOM changes.
+ * The GridModel is constructed from a GridLayoutDescriptor, which may
+ * have been passed explicitly or extracted from GridLayoutItems.
+ *
+ * Create the list of GridLayoutItem elements to be rendered.
+ * The GridLayoutItem elements may be explicitly coded in JSX.
+ */
+export declare const useGridLayout: ({ children: childrenProp, id, colsAndRows, onChange, }: GridLayoutHookProps) => {
+    children: GridLayoutItemElements;
+    containerCallback: RefCallback<HTMLDivElement>;
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    dispatchGridLayoutAction: GridLayoutDispatch;
+    gridLayoutModel: GridLayoutModel;
+    gridModel: GridModel;
+    nonContentGridItems: NonContentGridItems;
+    onDetachTab: DragContextDetachTabHandler;
+    onDragEnd: GridLayoutDragEndHandler;
+    onDragStart: GridLayoutDragStartHandler;
+    onDrop: GridLayoutDropHandler;
+    onDropStackedItem: DragContextDropHandler;
+};
+export {};

package/types/src/useGridSplitterResizing.d.ts

@@ -0,0 +1,12 @@
+import { MouseEventHandler } from "react";
+import { GridLayoutProps } from "./GridLayout";
+import { GridLayoutModel } from "./GridLayoutModel";
+import { GridModel } from "./GridModel";
+export type SplitterResizingHookProps = Pick<GridLayoutProps, "id" | "onClick"> & {
+    gridLayoutModel: GridLayoutModel;
+    gridModel: GridModel;
+};
+export declare const useGridSplitterResizing: ({ gridLayoutModel: layoutModel, gridModel, onClick: onClickProp, }: SplitterResizingHookProps) => {
+    onClick: MouseEventHandler<HTMLDivElement>;
+    onMouseDown: MouseEventHandler;
+};

package/types/src/useNotDropTarget.d.ts

@@ -0,0 +1 @@
+export declare const useNotDropTarget: () => {};

package/types/typeOf.d.ts

@@ -0,0 +1,6 @@
+import { LayoutModel, WithType } from "@vuu-ui/vuu-utils";
+import { ReactElement } from "react";
+import { LayoutJSON } from "./componentToJson";
+export declare function typeOf(element?: LayoutModel | WithType): string | undefined;
+export declare const isTypeOf: (element: ReactElement, type: string) => boolean;
+export declare const isLayoutJSON: (layout: LayoutJSON) => layout is LayoutJSON;

package/types/useAsDropTarget.d.ts

@@ -0,0 +1,7 @@
+import { type DragEventHandler } from "react";
+export declare const useAsDropTarget: () => {
+    onDragEnter: DragEventHandler;
+    onDragOver: DragEventHandler;
+    onDragLeave: DragEventHandler;
+    onDrop: DragEventHandler;
+};

package/types/useDraggable.d.ts

@@ -0,0 +1,24 @@
+import { type DragEvent, type DragEventHandler } from "react";
+import type { GridLayoutDragEndHandler } from "./GridLayoutProvider";
+import { type DragSourceProvider } from "./GridLayoutContext";
+import type { LayoutJSON } from "./componentToJson";
+import type { JsonValue } from "./json-value";
+export type DragStartIdOptions = {
+    id: string;
+    type: "text/plain";
+};
+export type DragStartJsonOptions = {
+    payload: JsonValue | LayoutJSON;
+    type: "text/json";
+};
+export type GridLayoutDragStartHandler = (evt: DragEvent<HTMLElement>, dragStartOptions: DragStartIdOptions | DragStartJsonOptions) => void;
+export interface DraggableHookProps {
+    draggableClassName?: string;
+    getDragSource: DragSourceProvider;
+    onDragEnd?: GridLayoutDragEndHandler;
+    onDragStart?: GridLayoutDragStartHandler;
+}
+export declare const useDraggable: ({ getDragSource, onDragEnd, onDragStart, }: DraggableHookProps) => {
+    onDragEnd: DragEventHandler<HTMLElement>;
+    onDragStart: DragEventHandler<HTMLElement>;
+};

package/types/useEditTabName.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentTemplateWithoutLabel } from "./GridLayoutContext";
+export interface EditTabNameHookProps {
+    getNewComponent?: () => ComponentTemplateWithoutLabel;
+    id: string;
+    mode?: "add" | "edit";
+    tabLabel?: string;
+}
+export declare const useEditTabName: ({ getNewComponent, id, mode, tabLabel, }: EditTabNameHookProps) => {
+    dialog: import("react").JSX.Element | null;
+    showTabEditDialog: () => void;
+};

package/types/useGridChildProps.d.ts

@@ -0,0 +1,13 @@
+import type { GridModelChildItemProps } from "./GridModel";
+export declare const useGridChildProps: (props: GridModelChildItemProps) => {
+    contentDetached: boolean | undefined;
+    contentVisible: boolean | undefined;
+    dragging: boolean | undefined;
+    dropTarget: string | boolean | undefined;
+    gridArea: string;
+    header: boolean | undefined;
+    horizontalSplitter: boolean | undefined;
+    stacked: boolean;
+    title: string | undefined;
+    verticalSplitter: boolean | undefined;
+};

package/types/useGridControllerSnapshot.d.ts

@@ -0,0 +1,7 @@
+import type { GridController } from "./GridController";
+import type { GridSnapshot } from "./GridSnapshot";
+/**
+ * Subscribe React to the canonical snapshot owned by a GridController.
+ * Revision-only transaction commits preserve the visible snapshot identity.
+ */
+export declare const useGridControllerSnapshot: (controller: GridController) => GridSnapshot;

package/types/useGridLayout.d.ts

@@ -0,0 +1,53 @@
+import { type ReactElement, type ReactNode, type RefCallback } from "react";
+import type { DragContextCancelTabDragHandler, DragContextDetachTabHandler, DragContextDropHandler } from "./drag-drop-next/DragContextNext";
+import { type GridLayoutDispatch, type GridLayoutDropHandler } from "./GridLayoutContext";
+import { type GridLayoutItemProps } from "./GridLayoutItem";
+import { GridLayoutModel } from "./GridLayoutModel";
+import { type GridLayoutDragEndHandler } from "./GridLayoutProvider";
+import { type GridColumnsAndRows, type GridLayoutChangeHandler, GridModel, type ISplitter } from "./GridModel";
+import type { GridLayoutDragStartHandler } from "./useDraggable";
+import { GridController } from "./GridController";
+export type GridLayoutHookProps = {
+    children: ReactNode;
+    id: string;
+    colsAndRows?: GridColumnsAndRows;
+    onChange?: GridLayoutChangeHandler;
+};
+type NonContentGridItems = {
+    placeholders: Array<{
+        id: string;
+        snapshotId: string;
+    }>;
+    splitters: ISplitter[];
+    stackIds: string[];
+};
+/**
+ * Create the GridModel and bind model changes to DOM changes.
+ * The GridModel is constructed from a GridLayoutDescriptor, which may
+ * have been passed explicitly or extracted from GridLayoutItems.
+ *
+ * Create the list of GridLayoutItem elements to be rendered.
+ * The GridLayoutItem elements may be explicitly coded in JSX.
+ */
+export declare const useGridLayout: ({ children: childrenProp, id, colsAndRows, onChange, }: GridLayoutHookProps) => {
+    children: ReactElement<GridLayoutItemProps, string | import("react").JSXElementConstructor<any>>[];
+    containerCallback: RefCallback<HTMLDivElement>;
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    dispatchGridLayoutAction: GridLayoutDispatch;
+    gridController: GridController;
+    gridLayoutModel: GridLayoutModel;
+    gridModel: GridModel;
+    gridSnapshot: import("./GridSnapshot").GridSnapshot;
+    nonContentGridItems: NonContentGridItems;
+    onCancelDrag: () => void;
+    onCancelTabDrag: DragContextCancelTabDragHandler;
+    onDetachTab: DragContextDetachTabHandler;
+    onDragEnd: GridLayoutDragEndHandler;
+    onDragLeave: () => void;
+    onDragPreview: GridLayoutDropHandler;
+    onDragStart: GridLayoutDragStartHandler;
+    onDrop: GridLayoutDropHandler;
+    onDropStackedItem: DragContextDropHandler;
+    stackTemplates: Map<string, ReactElement<GridLayoutItemProps, string | import("react").JSXElementConstructor<any>>>;
+};
+export {};

package/types/useGridSplitterResizing.d.ts

@@ -0,0 +1,14 @@
+import { type MouseEventHandler } from "react";
+import type { GridLayoutProps } from "./GridLayout";
+import type { GridLayoutModel } from "./GridLayoutModel";
+import { type GridModel } from "./GridModel";
+import type { GridController } from "./GridController";
+export type SplitterResizingHookProps = Pick<GridLayoutProps, "id" | "onClick" | "rowResizeDistribution"> & {
+    gridController: GridController;
+    gridLayoutModel: GridLayoutModel;
+    gridModel: GridModel;
+};
+export declare const useGridSplitterResizing: ({ gridController, gridLayoutModel: layoutModel, gridModel, onClick: onClickProp, rowResizeDistribution, }: SplitterResizingHookProps) => {
+    onClick: MouseEventHandler<HTMLDivElement>;
+    onMouseDown: MouseEventHandler;
+};

package/types/useNotDropTarget.d.ts

@@ -0,0 +1 @@
+export declare const useNotDropTarget: () => {};