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

package/types/src/GridLayoutContext.d.ts

@@ -0,0 +1,88 @@
+import { Dispatch, DragEvent } from "react";
+import { GridLayoutDragEndHandler } from "./GridLayoutProvider";
+import { GridModel, TabStateTab, TrackSize } from "./GridModel";
+import { GridLayoutDragStartHandler } from "./useDraggable";
+import { GridLayoutModel } from "./GridLayoutModel";
+import { GridLayoutDropPosition } from "@vuu-ui/vuu-utils";
+export type GridLayoutActionType = "close";
+export type GridLayoutCloseAction = {
+    type: "close";
+    id: string;
+};
+export type GridLayoutAddChildAction = {
+    title: string;
+    type: "add-child";
+    componentTemplate: ComponentTemplate;
+    stackId?: string;
+};
+export type GridLayoutSwitchTabAction = {
+    type: "switch-tab";
+    fromId: string;
+    toId: string;
+};
+export type GridLayoutTrackAction = {
+    type: "resize-grid-column" | "resize-grid-row";
+    trackIndex: number;
+    value: TrackSize;
+};
+export type GridLayoutAction = GridLayoutCloseAction | GridLayoutAddChildAction | GridLayoutSwitchTabAction | GridLayoutTrackAction;
+export type GridLayoutDispatch = Dispatch<GridLayoutAction>;
+/**
+ * provides details of a dragged component within a stack
+ */
+export interface TabbedComponentDragSource {
+    element: HTMLElement;
+    isSelectedTab: boolean;
+    label: string;
+    layoutId: string;
+    tab: TabStateTab;
+    /** deprecated */
+    tabIndex: number;
+    tabsId: string;
+    type: "tabbed-component";
+}
+/**
+ * provides details of a dragged component
+ */
+export interface ComponentDragSource {
+    element: HTMLElement;
+    dragElement?: HTMLElement;
+    id: string;
+    label: string;
+    layoutId: string;
+    type: "component";
+}
+export interface ComponentTemplate {
+    componentJson: string;
+    label: string;
+}
+/**
+ * provides details of a template, to be used on drop to instantiate  a new component
+ */
+export interface TemplateSource extends ComponentTemplate {
+    element: HTMLElement;
+    layoutId: string;
+    type: "template";
+}
+export type DragSourceProvider = (evt: DragEvent<Element>) => DragSource;
+export type DragSource = ComponentDragSource | TemplateSource | TabbedComponentDragSource;
+export declare const sourceIsComponent: (source: DragSource | undefined) => source is ComponentDragSource;
+export declare const sourceIsTabbedComponent: (source: DragSource | undefined) => source is TabbedComponentDragSource;
+export declare const sourceIsTemplate: (source: DragSource | undefined) => source is TemplateSource;
+export type GridLayoutDropHandler = (targetId: string, dragSource: DragSource, position: GridLayoutDropPosition) => void;
+export interface GridLayoutContextProps {
+    dispatchGridLayoutAction: GridLayoutDispatch;
+    gridLayoutModel?: GridLayoutModel;
+    gridModel?: GridModel;
+    id: string;
+    onDragEnd?: GridLayoutDragEndHandler;
+    onDragStart: GridLayoutDragStartHandler;
+    onDrop: GridLayoutDropHandler;
+}
+export declare const GridLayoutContext: import("react").Context<GridLayoutContextProps>;
+export declare const useGridLayoutDispatch: () => GridLayoutDispatch;
+export declare const useGridLayoutDropHandler: () => GridLayoutDropHandler;
+export declare const useGridLayoutDragEndHandler: () => GridLayoutDragEndHandler | undefined;
+export declare const useGridLayoutDragStartHandler: () => GridLayoutDragStartHandler;
+export declare const useGridModel: () => GridModel;
+export declare const useGridLayoutId: () => string;

package/types/src/GridLayoutItem.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes, ReactElement } from "react";
+import { LayoutJSON } from "./componentToJson";
+import { GridChildItemStyle, GridModelChildItemProps } from "./GridModel";
+export interface GridLayoutItemProps extends Omit<GridModelChildItemProps, "contentDetached" | "style" | "type">, Omit<HTMLAttributes<HTMLDivElement>, "id" | "onDragStart" | "onDrop" | "style"> {
+    "data-drop-target"?: boolean | string;
+    header?: boolean;
+    /**
+     * If provided, component is fixed height
+     */
+    height?: number;
+    label?: string;
+    /**
+     * style.gridArea is optional only if stackId is provided and a separate declaration
+     * of a GridLayoutStackedItem child is included within GridLayout
+     */
+    style?: GridChildItemStyle;
+    /**
+     * If provided, component is fixed width
+     */
+    width?: number;
+}
+export declare function GridLayoutItem({ children, className: classNameProp, contentVisible: contentVisibleProp, "data-drop-target": dataDropTarget, header: headerProp, height, id, stackId, resizeable, style: styleProp, title: titleProp, width, ...htmlAttributes }: GridLayoutItemProps): import("react").JSX.Element | null;
+export declare namespace GridLayoutItem {
+    var toJSON: (element: ReactElement<GridLayoutItemProps, typeof GridLayoutItemType>) => LayoutJSON<object>;
+}
+declare const GridLayoutItemType: import("react").FunctionComponent<GridLayoutItemProps>;
+export declare const isGridLayoutItem: (element: ReactElement) => boolean;
+export {};

package/types/src/GridLayoutModel.d.ts

@@ -0,0 +1,59 @@
+import { EventEmitter, GridLayoutSplitDirection, OptionalProperty } from "@vuu-ui/vuu-utils";
+import { TrackType, type GridLayoutModelCoordinates, type GridModel, type GridModelChildItem, type GridModelEvents, type ISplitter } from "./GridModel";
+export type GridLayoutModelPosition = {
+    end: number;
+    start: number;
+};
+export type ResizeState = {
+    resizeTrackIsShared: boolean;
+    mousePos: number;
+    splitter: ISplitter;
+};
+export type GridItemRemoveReason = "drag" | "close" | "placeholder" | "unstack";
+export type GridLayoutResizeOperation = "contract" | "expand";
+export type GridLayoutResizeDirection = "vertical" | "horizontal";
+export type GridLayoutRelativePosition = "aboveInSameColumn" | "belowInSameColumn" | "rightInSameRow" | "leftInSameRow";
+export type GridLayoutTrack = "column" | "row";
+export type GridLayoutModelItemType = "content" | "placeholder" | "splitter" | "stacked-content";
+type OneOrBothGridLayoutModelCoordinates = GridLayoutModelCoordinates | OptionalProperty<GridLayoutModelCoordinates, TrackType>;
+export type GridItemUpdate = [string, OneOrBothGridLayoutModelCoordinates];
+export type GridLayoutModelEvents = Pick<GridModelEvents, "child-position-updates">;
+export declare class GridLayoutModel extends EventEmitter<GridLayoutModelEvents> {
+    private gridModel;
+    private splitters;
+    constructor(gridModel: GridModel);
+    private updateContrasToOccupySpace;
+    removeGridItem(gridItemId: string, reason: GridItemRemoveReason): void;
+    dropReplaceGridItem(droppedItemId: string, targetItemId: string): GridModelChildItem;
+    createSplitters(): ISplitter[];
+    getSplitterById(splitterId: string): ISplitter;
+    getSplitter(gridLayoutItem: GridModelChildItem, resizeDirection: GridLayoutResizeDirection): ISplitter;
+    /**
+     * We're going to resize a gridItem that shares a grid line with one or
+     * more other grid items. We need to insert a new grid line, then anchor
+     * the griditem to be resized to the new grid line.
+     */
+    addTrackForResize(trackType: TrackType, newTrackSize: number, resizeOperation: GridLayoutResizeOperation, index: number, state: ResizeState): void;
+    /**
+     * Calculate the new grid positions for a dropped item and the target item,
+     * when the target is being split in two. Generate updates for the respective
+     * grid child items.
+     *
+     * @param droppedItemId
+     * @param targetItemId
+     * @param splitDirection
+     * @param splitIndex
+     * @returns
+     */
+    private dropSplitTarget;
+    /**
+     * Dragged child item has been dropped on (NESW) quadrant of target.
+     * Split the target in two, respecting targetted quadrant and
+     * assign layout positions of each child item.
+     */
+    dropSplitGridItem(droppedItemId: string, targetItemId: string, splitDirection: GridLayoutSplitDirection, resizeDirection?: GridLayoutResizeDirection): void;
+    removeTrack(trackIndex: number, resizeDirection: GridLayoutResizeDirection): GridItemUpdate[];
+    isResizeTrackShared(splitter: ISplitter): boolean;
+    toDebugString(): string;
+}
+export {};

package/types/src/GridLayoutProvider.d.ts

@@ -0,0 +1,37 @@
+import { DragEvent, ReactElement, ReactNode } from "react";
+import { GridLayoutChangeHandler, GridLayoutDescriptor } from "./GridModel";
+import { GridLayoutItemProps } from "./GridLayoutItem";
+import { LayoutJSON } from "./componentToJson";
+export type GridChildElementsChangeHandler = (id: string, childElements: ReactElement<GridLayoutItemProps>[]) => void;
+type GridLayoutOptions = {
+    newChildItem: {
+        header: boolean;
+    };
+};
+export type ReactElementList = ReactElement[];
+export type ReactElementMap<P = any> = Record<string, ReactElement<P>>;
+export type SerializedComponentMap = Record<string, LayoutJSON>;
+export type SerializedGridLayout = {
+    components: SerializedComponentMap;
+    id: string;
+    layout: GridLayoutDescriptor;
+};
+export type DeserializedGridLayout = {
+    components: ReactElementMap<GridLayoutItemProps>;
+    id: string;
+    layout: GridLayoutDescriptor;
+};
+export type GridLayoutDragEndHandler = (evt: DragEvent<HTMLElement>) => void;
+export interface GridLayoutProviderProps {
+    children: ReactNode;
+    options?: GridLayoutOptions;
+    serializedLayout?: SerializedGridLayout;
+}
+export declare const GridLayoutProvider: (props: GridLayoutProviderProps) => ReactElement;
+export declare const useGridChangeHandler: () => {
+    onChangeChildElements: GridChildElementsChangeHandler | undefined;
+    onChangeLayout: GridLayoutChangeHandler | undefined;
+};
+export declare const useSavedGrid: () => ((id: string) => DeserializedGridLayout | undefined) | undefined;
+export declare const useGridLayoutOptions: () => GridLayoutOptions | undefined;
+export {};

package/types/src/GridLayoutStackedtem.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+import { GridLayoutItemProps } from "./GridLayoutItem";
+import { ComponentTemplate } from "./GridLayoutContext";
+export interface GridLayoutStackedItemProps extends GridLayoutItemProps {
+    allowAddTab?: boolean;
+    getNewComponent?: () => ComponentTemplate;
+    showMenu?: boolean;
+}
+export declare const GridLayoutStackedItem: ({ allowAddTab, children, className: classNameProp, header, id, getNewComponent, resizeable, showMenu, style: styleProp, title, ...htmlAttributes }: GridLayoutStackedItemProps) => import("react").JSX.Element;
+export declare const isGridLayoutStackedItem: (element: ReactElement) => boolean;

package/types/src/GridModel.d.ts

@@ -0,0 +1,350 @@
+import { EventEmitter, type OptionalProperty } from "@vuu-ui/vuu-utils";
+import { CSSProperties } from "react";
+import { DropPosition } from "./drag-drop-next/DragContextNext";
+import { GridItemRemoveReason, GridItemUpdate, GridLayoutModelPosition, GridLayoutResizeDirection } from "./GridLayoutModel";
+export type TrackUnit = "px" | "fr";
+export type CSSFraction = `${number}fr`;
+export type CSSPixels = `${number}px`;
+export type TrackSize = CSSFraction | CSSPixels;
+export declare const isFractionUnit: (trackSize: TrackSize) => trackSize is CSSFraction;
+export declare const isPixelUnit: (trackSize: TrackSize) => trackSize is CSSPixels;
+export interface GridLayoutChildItemDescriptor {
+    contentVisible?: boolean;
+    dropTarget?: boolean | string;
+    gridArea: string;
+    header?: boolean;
+    resizeable?: GridModelItemResizeable;
+    /**
+     * For GridLayoutItems that are 'stacked' (e.g. displayed in tabbed container)
+     * this is the id of the associated StackedLayoutItem.
+     */
+    stackId?: string;
+    title?: string;
+}
+export interface GridLayoutChildItemDescriptorWithComponentId extends GridLayoutChildItemDescriptor {
+    componentId: string;
+}
+export type GridLayoutChildItemDescriptors = Record<string, GridLayoutChildItemDescriptor>;
+export interface GridColumnsAndRows {
+    cols: TrackSize[];
+    rows: TrackSize[];
+}
+/**
+ * Describes a GridLayout
+ * grid rows and columns
+ * layout details of gridItems
+ */
+export interface GridLayoutDescriptor extends GridColumnsAndRows {
+    gridLayoutItems?: GridLayoutChildItemDescriptors;
+}
+export interface GridLayoutModelCoordinates {
+    column: GridLayoutModelPosition;
+    row: GridLayoutModelPosition;
+}
+export interface GridModelChildItemProps extends Omit<GridLayoutChildItemDescriptor, "gridArea"> {
+    contentVisible?: boolean;
+    fixed?: boolean;
+    height?: number;
+    id: string;
+    style?: GridChildItemStyle;
+    type?: GridModelItemType;
+    width?: number;
+}
+export type GridModelTrack = "column" | "row";
+export type AssignDirection = "bwd" | "fwd";
+export type TrackInsertionPosition = {
+    index: number;
+    position: "before" | "after";
+};
+export type GridLayoutChangeHandler = (gridId: string, gridLayoutDescriptor: GridLayoutDescriptor) => void;
+export type GridTrackAddedEvent = {
+    gridId: string;
+    trackType: TrackType;
+    newTrackIndex: number;
+    newTracks: GridTrack[];
+};
+export type GridTrackAddedHandler = (evt: GridTrackAddedEvent) => void;
+export type NonContentResetOptions = {
+    placeholders?: boolean;
+    splitters?: boolean;
+};
+export declare const NonContentResetOptions: NonContentResetOptions;
+export type GridChildPositionChangeHandler = (updates: GridItemUpdate[], nonContentResetOptions?: NonContentResetOptions) => void;
+export type TabsChangeHandler = (tabsId: string, active: number, tabs: TabStateTab[]) => void;
+export type TabSelectionChangeHandler = (tabsId: string, active: number) => void;
+export type GridModelEvents = {
+    "grid-layout-change": GridLayoutChangeHandler;
+    "grid-track-added": GridTrackAddedHandler;
+    "child-position-updates": GridChildPositionChangeHandler;
+    "tabs-change": TabsChangeHandler;
+    "tabs-created": (stackItem: GridModelChildItem) => void;
+    "tabs-removed": (tabsId: string) => void;
+    "tab-selection-change": TabSelectionChangeHandler;
+};
+export type GridModelPosition = {
+    end: number;
+    start: number;
+};
+/**
+ * Describes position of component within grid container. Position
+ * is grid column and row start and end values.
+ */
+export interface GridModelCoordinates {
+    column: GridModelPosition;
+    row: GridModelPosition;
+}
+export type GridModelItemResizeable = "h" | "v" | "hv" | false;
+export type GridModelItemType = "content" | "placeholder" | "splitter" | "stacked-content";
+/**
+ * The set of attributes that allow the management of layout and behaviour of a
+ * component laid out in a grid container.
+ */
+export interface IGridModelChildItem extends GridModelCoordinates {
+    childId?: string[];
+    closeable?: boolean;
+    contentVisible?: boolean;
+    dropTarget?: boolean | string;
+    fixed?: boolean;
+    header?: boolean;
+    height?: number;
+    id: string;
+    stackId?: string;
+    resizeable?: GridModelItemResizeable;
+    title?: string;
+    type: GridModelItemType;
+    width?: number;
+}
+export interface IPlaceholder extends IGridModelChildItem {
+    type: "placeholder";
+}
+export type GridChildItemStyle = Omit<CSSProperties, "gridArea"> & {
+    gridArea: string;
+};
+type StackedGridModelChildItem = GridModelChildItem & {
+    stackId: string;
+};
+export declare const isStackedItem: (i: GridModelChildItem) => i is StackedGridModelChildItem;
+export type GridModelStackedChildItem = GridModelChildItem & {
+    type: "stacked-content";
+};
+export declare class GridModelChildItem implements IGridModelChildItem {
+    #private;
+    id: string;
+    column: GridModelPosition;
+    contentDetached?: boolean;
+    contentVisible?: boolean;
+    dropTarget?: boolean | string;
+    header?: boolean;
+    height?: number;
+    horizontalSplitter: boolean;
+    stackId?: string;
+    resizeable: GridModelItemResizeable;
+    row: GridModelPosition;
+    title?: string;
+    type: GridModelItemType;
+    verticalSplitter: boolean;
+    width?: number;
+    constructor({ header, height, id, row, column, dropTarget, stackId, resizeable, title, type, width, contentVisible, }: OptionalProperty<IGridModelChildItem, "type">);
+    get dragging(): boolean;
+    set dragging(isDragging: boolean);
+    get gridArea(): string;
+}
+export type AriaOrientation = "horizontal" | "vertical";
+export type SplitterAlign = "start" | "end";
+export interface ISplitter extends GridLayoutModelCoordinates {
+    align: SplitterAlign;
+    ariaOrientation: AriaOrientation;
+    controls: string;
+    id: string;
+    orientation: GridLayoutResizeDirection;
+    /**
+     * Index values of the two grid tracks (column or row) whose
+     * dimension (width for columns, height for rows) can be
+     * manipulated with this splitter. The tracks will usually,
+     * but not always, be adjacent.
+     */
+    resizedGridTracks: [number, number];
+    resizedChildItems: {
+        before: string[];
+        after: string[];
+    };
+}
+export type TabStateEvent = (tabState: TabState) => void;
+export type TabStateTabEvents = {
+    "active-change": TabStateEvent;
+    "tab-added": (tabState: TabState, tab: TabStateTab) => void;
+    "tab-detached": TabStateEvent;
+    "tabs-change": (tabsId: string, active: number, tabs: TabStateTab[]) => void;
+    "tabs-removed": (tabsId: string) => void;
+};
+export type TabStateTab = {
+    id: string;
+    label: string;
+};
+export declare class TabState extends EventEmitter<TabStateTabEvents> {
+    id: string;
+    active: number;
+    tabs: TabStateTab[];
+    detachedTab: TabStateTab | undefined;
+    constructor(id: string, active: number, tabs: TabStateTab[]);
+    setActiveTab(value: string): void;
+    /**
+     * A Tab is detached when a drag operation commences. It is removed from Tabstrip, but associated component
+     * remains in DOM. The 'next' tab is selected and the associated TabPanel made visible. The tab panel associated
+     * with the detached tab remains below the selected tab panel. This allows a dragged tab panel to be repositioned
+     * vis drag drop without removing it from DOM, triggering React unmount/remount.
+     */
+    detachTab(value: string): void;
+    setNextActiveTab(): void;
+    moveTab(tab: TabStateTab, { position, target }: DropPosition, activateTab?: boolean): void;
+    addTab(tab: TabStateTab, dropPosition?: DropPosition): void;
+    removeTab(id: string): void;
+    get activeTab(): TabStateTab;
+    private getNextActiveTab;
+    private indexOfTab;
+}
+export type TrackType = "column" | "row";
+export type GridTrackResizeHandler = (trackType: TrackType, tracks: GridTrack[]) => void;
+export type GridTrackEvents = {
+    "grid-track-added": GridTrackAddedHandler;
+    "grid-track-resize": GridTrackResizeHandler;
+};
+export declare class GridTrack {
+    #private;
+    static fromTrackSize: (trackSize: TrackSize) => GridTrack;
+    constructor(trackSize: TrackSize);
+    get hasBeenMeasured(): boolean;
+    get isFraction(): boolean;
+    get isPixelValue(): boolean;
+    get isMeasured(): boolean;
+    get measuredValue(): number;
+    set measuredValue(value: number);
+    convertUnitsToPixels(): void;
+    get hasNumericValue(): boolean;
+    get numericValue(): number;
+    get trackSize(): TrackSize;
+    set trackSize(trackSize: TrackSize);
+    addFraction(trackSize: TrackSize): void;
+    increment(value: number): void;
+    toString: () => TrackSize;
+}
+export declare class GridTracks extends EventEmitter<GridTrackEvents> {
+    #private;
+    private gridId;
+    constructor(gridId: string, columns: TrackSize[], rows: TrackSize[]);
+    get columns(): TrackSize[];
+    set columns(columns: TrackSize[]);
+    get rows(): TrackSize[];
+    set rows(rows: TrackSize[]);
+    get colCount(): number;
+    get rowCount(): number;
+    getTracks(trackType: TrackType): GridTrack[];
+    /**
+     * Set the numeric track values from values read from DOM. This is invoked from a callbackRef
+     * as soom as GridLayout container is rendered into dom.
+     */
+    measure(trackType: TrackType): void;
+    getBisectingTrack(trackType: TrackType, startIndex: number, endIndex: number): number;
+    /**
+     * Split a single track into 2 equal sized tracks
+     *
+     */
+    splitTrack(trackType: TrackType, trackIndex: number): void;
+    /**
+     * Given multiple tracks (columns/rows), create a new grid line that exactly bisects
+     * given tracks.
+     */
+    splitTracks(trackType: TrackType, fromTrackLine: number, toTrackLine: number): number;
+    /**
+     * In the trackInsertionPosition, the index always indicates where the new track
+     * will be inserted. The position indicates where it falls, conceptually, in relation
+     * to the existing two tracks that it will fall between. It will overlap one, but not
+     * both of the existing track positions.
+     */
+    insertTrack(trackType: TrackType, { index, position }: TrackInsertionPosition, trackSize: number): void;
+    removeTrack(trackType: TrackType, index: number, assignDirection?: AssignDirection): void;
+    resizeTo(trackType: TrackType, trackIndex: number, value: TrackSize): void;
+    resizeBy(trackType: "row" | "column", trackIndex: number, contraTrackIndex: number, value: number): void;
+    get css(): Pick<CSSProperties, "gridTemplateColumns" | "gridTemplateRows">;
+    serialize(): {
+        cols: TrackSize[];
+        rows: TrackSize[];
+    };
+    toString(): string;
+}
+export declare class GridModel extends EventEmitter<GridModelEvents> {
+    #private;
+    id: string;
+    tracks: GridTracks;
+    constructor(id: string, { cols, gridLayoutItems, rows }: GridLayoutDescriptor);
+    get childItems(): GridModelChildItem[];
+    private handleTabsChange;
+    private handleTabsRemoved;
+    private handleTabSelectionChange;
+    private handleTabAdded;
+    private handleTabDetached;
+    getTabState: (tabsId: string, fallbackAction?: "throw" | "create") => TabState;
+    setTabState(stackId: string, childItems: GridModelChildItem[], activeItem?: number): TabState;
+    activateStackedChildItem(stackId: string, { id }: TabStateTab): void;
+    detachStackedChildItem(stackId: string, { id }: TabStateTab): void;
+    moveItemWithinTabs(tabsId: string, tab: TabStateTab, dropPosition: DropPosition, selectMovedTab: boolean): void;
+    moveItemBetweenTabs(fromTabsId: string, toTabsId: string, tab: TabStateTab, dropPosition: DropPosition): void;
+    notifyChange(): void;
+    toGridLayoutDescriptor(): GridLayoutDescriptor;
+    splitGridTrack(trackType: TrackType, trackIndex: number): void;
+    splitGridTracks(trackType: TrackType, fromTrackLine: number, toTrackLine: number): number;
+    private updateChildItemsToAccommodateNewTrack;
+    insertGridTrack(trackType: TrackType, { index, position }: TrackInsertionPosition, trackSize: number): void;
+    removeGridTrack(trackType: TrackType, trackIndex: number, assignDirection?: AssignDirection, updateChildItems?: boolean): void;
+    applyUpdates(updates: GridItemUpdate[]): void;
+    private addChildItems;
+    addChildItem(childItem: GridModelChildItem): void;
+    private addChildItemToStack;
+    updateChildColumn(childItemId: string, { start, end }: GridModelPosition): void;
+    updateChildRow(childItemId: string, { start, end }: GridModelPosition): void;
+    /**
+     * How we handle removal depends on context (the remove reason).
+     * If the child item is being deleted, we clear all references to the
+     * item in our internal structures. If the item is being dragged, we
+     * can expect it to be dropped again. We preserve some references,
+     * but mark the item as dragging.
+     */
+    removeChildItem(childItemId: string, reason: GridItemRemoveReason): void;
+    stackChildItems(targetId: string, stackedChildId: string): void;
+    getChildItem(childItemId: string, throwIfNotFound: true): GridModelChildItem;
+    getChildItem(childItemId: string, throwIfNotFound?: false): GridModelChildItem | undefined;
+    getStackedChildItems(): Map<string, StackedGridModelChildItem[]>;
+    getStackedChildItems(stackId: string): GridModelChildItem[];
+    validateChildId(childItemId: string): string;
+    clearPlaceholders(): void;
+    findUnusedGridLines(): number[][];
+    createPlaceholders(): void;
+    getPlaceholders(): GridModelChildItem[];
+    getSplitters(): ISplitter[];
+    private getSplittersForChildItem;
+    private findColumnContrasAndSiblings;
+    private findRowContrasAndSiblings;
+    toDebugString(): void;
+    private getContrasAbove;
+    private getContrasBelow;
+    private getSiblingsRight;
+    private getContrasLeft;
+    private getSiblingsBelow;
+    /**
+     * Given a column, return all childItems starting at that column
+     */
+    findByColumnStart(col: number, childItems?: GridModelChildItem[]): GridModelChildItem[] | undefined;
+    /**
+     * Given a column, return all childItems ending at that column
+     */
+    findByColumnEnd(col: number, childItems?: GridModelChildItem[]): GridModelChildItem[] | undefined;
+    /**
+     * Given a row, return all childItems starting at that row
+     */
+    findByRowStart(row: number, childItems?: GridModelChildItem[]): GridModelChildItem[] | undefined;
+    /**
+     * Given a row, return all childItems ending at that row
+     */
+    findByRowEnd(row: number, childItems?: GridModelChildItem[]): GridModelChildItem[] | undefined;
+}
+export {};

package/types/src/GridPlaceholder.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from "react";
+export interface GridPlaceholderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDrop"> {
+    debugLabel?: string;
+}
+export declare const GridPlaceholder: ({ ...htmlAttributes }: GridPlaceholderProps) => import("react").JSX.Element;

package/types/src/GridSplitter.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+import { AriaOrientation } from "./GridModel";
+import { ResizeOrientation } from "./grid-dom-utils";
+export interface GridSplitterProps extends HTMLAttributes<HTMLDivElement> {
+    "aria-controls": string;
+    ariaOrientation: AriaOrientation;
+    orientation: ResizeOrientation;
+}
+export declare const GridSplitter: ({ "aria-controls": ariaControls, ariaOrientation, orientation, ...htmlAttributes }: GridSplitterProps) => import("react").JSX.Element;

package/types/src/Icon.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
+    name: string;
+    size?: number;
+}
+export declare const Icon: ({ className, name, size, style: styleProp, ...htmlAttributes }: IconProps) => import("react").JSX.Element;

package/types/src/IconButton.d.ts

@@ -0,0 +1,6 @@
+import { ButtonProps } from "@salt-ds/core";
+export interface IconButtonProps extends Omit<ButtonProps, "children"> {
+    icon: string;
+    size?: number;
+}
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/types/src/TabMenu.d.ts

@@ -0,0 +1,6 @@
+export interface TabMenuProps {
+    allowClose?: boolean;
+    allowRename?: boolean;
+    layoutItemId: string;
+}
+export declare const TabMenu: ({ layoutItemId, }: TabMenuProps) => import("react").JSX.Element;

package/types/src/componentToJson.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties, ReactElement } from "react";
+export interface LayoutJSON<T extends object = object> {
+    active?: number;
+    children?: LayoutJSON[];
+    id?: string;
+    props?: T;
+    state?: unknown;
+    style?: CSSProperties;
+    title?: string;
+    type: string;
+}
+export interface LayoutProps {
+    active?: number;
+    "data-path"?: string;
+    children?: ReactElement[];
+    /**
+     * indicates flexDirection for Flexbox
+     */
+    column?: boolean;
+    dropTarget?: boolean;
+    i8d: string;
+    key: string;
+    path?: string;
+    resizeable?: boolean;
+    style: CSSProperties;
+    type?: string;
+    version?: number;
+}
+export declare function componentToJson(element: ReactElement): LayoutJSON;
+export declare function serializeProps(props?: LayoutProps): {
+    [key: string]: unknown;
+} | undefined;