@vuu-ui/vuu-layout 0.0.26

package/types/drag-drop/DragState.d.ts

@@ -0,0 +1,46 @@
+import { DragDropRect } from './dragDropTypes';
+export type IntrinsicSizes = {
+    height?: number;
+    width?: number;
+};
+interface ZoneRange {
+    hi: number;
+    lo: number;
+}
+type DragConstraint = {
+    zone: {
+        x: ZoneRange;
+        y: ZoneRange;
+    };
+    pos: {
+        x: ZoneRange;
+        y: ZoneRange;
+    };
+    mouse: {
+        x: ZoneRange;
+        y: ZoneRange;
+    };
+};
+interface ExtendedZoneRange {
+    lo: boolean;
+    hi: boolean;
+    mousePct: number;
+    mousePos: number;
+    pos: number;
+}
+export declare class DragState {
+    constraint: DragConstraint;
+    x: ExtendedZoneRange;
+    y: ExtendedZoneRange;
+    intrinsicSize: IntrinsicSizes | undefined;
+    constructor(zone: DragDropRect, mouseX: number, mouseY: number, measurements: DragDropRect, intrinsicSize?: IntrinsicSizes);
+    init(zone: DragDropRect, mouseX: number, mouseY: number, rect: DragDropRect, intrinsicSize?: IntrinsicSizes): void;
+    outOfBounds(): boolean;
+    inBounds(): boolean;
+    dropX(): number;
+    dropY(): number;
+    hasIntrinsicSize(): number | undefined;
+    update(xy: 'x' | 'y', mousePos: number): boolean;
+    private dropXY;
+}
+export {};

package/types/drag-drop/Draggable.d.ts

@@ -0,0 +1,24 @@
+import { rect } from "@vuu-ui/vuu-utils";
+import { ReactElement } from "react";
+import { IntrinsicSizes } from "./DragState";
+import { DropTarget } from "./DropTarget";
+export type DragStartCallback = (e: MouseEvent, x: number, y: number) => void;
+export type DragMoveCallback = (x: number | undefined, y: number | undefined) => void;
+export type DragEndCallback = (droppedTarget?: Partial<DropTarget>) => void;
+export type DragInstructions = {
+    DoNotRemove?: boolean;
+    DoNotTransform?: boolean;
+    dragThreshold?: number;
+    DriftHomeIfNoDropTarget?: boolean;
+    RemoveDraggableOnDragEnd?: boolean;
+};
+export declare const Draggable: {
+    handleMousedown(e: MouseEvent, dragStartCallback: DragStartCallback, dragInstructions?: DragInstructions): void;
+    initDrag(rootContainer: ReactElement, dragContainerPath: string, { top, left, right, bottom }: rect, dragPos: {
+        x: number;
+        y: number;
+    }, dragHandler: {
+        drag: DragMoveCallback;
+        drop: DragEndCallback;
+    }, intrinsicSize?: IntrinsicSizes, dropTargets?: string[]): string;
+};

package/types/drag-drop/DropMenu.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+import { DropTarget } from "./DropTarget";
+export declare function computeMenuPosition(dropTarget: DropTarget, offsetTop?: number, offsetLeft?: number): [number, number, "left" | "bottom" | "right" | "top"];
+export interface DropMenuProps extends HTMLAttributes<HTMLDivElement> {
+    dropTarget: DropTarget;
+    onHover: (target: DropTarget | null) => void;
+    orientation?: "left" | "top" | "right" | "bottom";
+}
+export declare const DropMenu: ({ className, dropTarget, onHover, orientation, }: DropMenuProps) => JSX.Element;

package/types/drag-drop/DropTarget.d.ts

@@ -0,0 +1,61 @@
+import { rectTuple } from "@vuu-ui/vuu-utils";
+import { LayoutModel } from "../layout-reducer";
+import { Measurements } from "./BoxModel";
+import { DragDropRect, DropPos, DropPosTab } from "./dragDropTypes";
+import { DragState } from "./DragState";
+export declare const isTabstrip: (dropTarget: DropTarget) => boolean | undefined;
+export interface DropTargetProps {
+    component: LayoutModel;
+    pos: DropPos;
+    clientRect: DragDropRect;
+    nextDropTarget: DropTarget | null;
+}
+export type GuideLine = [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number
+];
+export interface TargetDropOutline {
+    l: number;
+    r: number;
+    t: number;
+    b: number;
+    tabLeft?: number;
+    tabWidth?: number;
+    tabHeight?: number;
+    guideLines?: GuideLine;
+}
+export declare class DropTarget {
+    private active;
+    box: unknown;
+    clientRect: DragDropRect;
+    component: LayoutModel;
+    dropRect: rectTuple | undefined;
+    nextDropTarget: DropTarget | null;
+    pos: DropPos;
+    constructor({ component, pos, clientRect, nextDropTarget, }: DropTargetProps);
+    targetTabPos(tab: DropPosTab): number;
+    /**
+     * Determine what will be rendered by the dropTargetRenderer
+     *
+     * @param {*} lineWidth
+     * @param {*} dragState
+     * @returns {l, t, r, b, tabLeft, tabWidth, tabHeight}
+     */
+    getTargetDropOutline(lineWidth: number, dragState?: DragState): TargetDropOutline;
+    getDropTabOutline(lineWidth: number, tab: DropPosTab): TargetDropOutline;
+    getIntrinsicDropRect(dragState: DragState): TargetDropOutline;
+    /**
+     * @returns  [left, top, right, bottom]
+     */
+    getDropRectOutline(lineWidth: number, dragState?: DragState): number[] | null;
+    activate(): this;
+    toArray(this: DropTarget): DropTarget[];
+    static getActiveDropTarget(dropTarget: DropTarget | null): DropTarget | null;
+}
+export declare function identifyDropTarget(x: number, y: number, rootLayout: LayoutModel, measurements: Measurements, intrinsicSize?: number, validDropTargets?: string[]): DropTarget | null;

package/types/drag-drop/DropTargetRenderer.d.ts

@@ -0,0 +1,17 @@
+import { DragDropRect } from "./dragDropTypes";
+import { DragState } from "./DragState";
+import { DropTarget } from "./DropTarget";
+type Point = [number, number];
+type TabMode = "full-view" | "tab-only";
+export default class DropTargetCanvas {
+    private currentPath;
+    private tabMode;
+    constructor();
+    prepare(dragRect: DragDropRect, tabMode?: TabMode): void;
+    clear(): void;
+    get hoverDropTarget(): DropTarget | null;
+    getPoints(x: number, y: number, width: number, height: number, tabLeft?: number, tabWidth?: number, tabHeight?: number): Point[];
+    draw(dropTarget: DropTarget, dragState: DragState): void;
+    drawTarget(dropTarget: DropTarget, dragState?: DragState): void;
+}
+export {};

package/types/drag-drop/dragDropTypes.d.ts

@@ -0,0 +1,51 @@
+import type { rect } from "@vuu-ui/vuu-utils";
+export interface DragDropRect extends rect {
+    children?: DragDropRect[];
+    header?: {
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        titleWidth?: number;
+    };
+    height: number;
+    scrolling?: {
+        id: string;
+        scrollTop: number;
+        scrollHeight: number;
+    };
+    Stack?: {
+        left: number;
+        right: number;
+    }[];
+    width: number;
+}
+export interface DropPosition {
+    Absolute: boolean;
+    Centre: boolean;
+    East: boolean;
+    EastOrWest: boolean;
+    Header: boolean;
+    North: boolean;
+    NorthOrSouth: boolean;
+    offset: number;
+    South: boolean;
+    SouthOrEast: boolean;
+    West: boolean;
+}
+export type RelativePosition = "after" | "before";
+export type DropPosTab = {
+    index: number;
+    left: number;
+    positionRelativeToTab: RelativePosition;
+    width: number;
+};
+export interface DropPos {
+    closeToTheEdge: number;
+    height?: number;
+    position: DropPosition;
+    tab?: DropPosTab;
+    width?: number;
+    x: number;
+    y: number;
+}

package/types/drag-drop/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./dragDropTypes";
+export * from "./Draggable";
+export * from "./DropMenu";
+export * from "./DropTarget";

package/types/flexbox/Flexbox.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FlexboxProps } from "./flexboxTypes";
+declare const Flexbox: import("react").ForwardRefExoticComponent<FlexboxProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Flexbox;

package/types/flexbox/FlexboxLayout.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FlexboxLayoutProps } from "./flexboxTypes";
+export declare const FlexboxLayout: {
+    (props: FlexboxLayoutProps): JSX.Element;
+    displayName: string;
+};

package/types/flexbox/FluidGrid.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FlexboxProps } from "./flexboxTypes";
+export interface FluidGridProps extends FlexboxProps {
+    showGrid?: boolean;
+}
+export declare const FluidGrid: import("react").ForwardRefExoticComponent<FluidGridProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/flexbox/FluidGridLayout.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FluidGridProps } from './FluidGrid';
+export declare const FluidGridLayout: {
+    (props: FluidGridProps): JSX.Element;
+    displayName: string;
+};

package/types/flexbox/Splitter.d.ts

@@ -0,0 +1,12 @@
+import React, { HTMLAttributes } from "react";
+export type SplitterDragStartHandler = (index: number) => void;
+export type SplitterDragHandler = (index: number, distance: number) => void;
+export type SplitterDragEndHandler = () => void;
+export interface SplitterProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDrag" | "onDragStart"> {
+    column: boolean;
+    index: number;
+    onDragStart: SplitterDragStartHandler;
+    onDrag: SplitterDragHandler;
+    onDragEnd: SplitterDragEndHandler;
+}
+export declare const Splitter: React.NamedExoticComponent<SplitterProps>;

package/types/flexbox/flexbox-utils.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from "react";
+import type { BreakPoint, ContentMeta } from "./flexboxTypes";
+export declare const SPLITTER = 1;
+export declare const PLACEHOLDER = 2;
+export declare const gatherChildMeta: (children: ReactElement[], dimension: "width" | "height", breakPoints?: BreakPoint[]) => {
+    index: number;
+    flexOpen: boolean;
+    intrinsicSize: number | undefined;
+    resizeable: any;
+}[];
+export declare const findSplitterAndPlaceholderPositions: (childMeta: ContentMeta[]) => any[];
+export declare const identifyResizeParties: (contentMeta: ContentMeta[], idx: number) => (number[] | undefined)[];

package/types/flexbox/flexboxTypes.d.ts

@@ -0,0 +1,51 @@
+import { CSSProperties, HTMLAttributes, MutableRefObject, ReactElement, ReactNode } from "react";
+import { SplitterProps } from "./Splitter";
+export interface LayoutContainerProps {
+    resizeable?: boolean;
+}
+export interface FlexboxProps extends LayoutContainerProps, HTMLAttributes<HTMLDivElement> {
+    breakPoints?: BreakPointsProp;
+    children?: ReactNode;
+    cols?: number;
+    column?: true;
+    fullPage?: number;
+    flexFill?: boolean;
+    gap?: number;
+    onSplitterMoved?: (content: ContentMeta[]) => void;
+    row?: true;
+    spacing?: number;
+    splitterSize?: number;
+}
+export interface FlexboxLayoutProps extends FlexboxProps {
+    path?: string;
+}
+export interface SplitterHookProps {
+    children: ReactNode;
+    onSplitterMoved?: (content: ContentMeta[]) => void;
+    style?: CSSProperties;
+}
+export interface SplitterHookResult {
+    content: ReactElement[];
+    rootRef: MutableRefObject<HTMLDivElement | null>;
+}
+export type SplitterFactory = (index: number) => ReactElement<SplitterProps>;
+export type ContentMeta = {
+    currentSize?: number;
+    flexOpen?: boolean;
+    flexBasis?: number;
+    intrinsicSize?: number;
+    minSize?: number;
+    placeholder?: boolean;
+    resizeable?: boolean;
+    shim?: boolean;
+    splitter?: boolean;
+};
+export type FlexSize = {
+    size: number;
+    minSize: number;
+};
+export type BreakPoint = "xs" | "sm" | "md" | "lg" | "xl";
+export type BreakPoints = BreakPoint[];
+export type BreakPointsProp = {
+    [keys in BreakPoint]?: number;
+};

package/types/flexbox/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Flexbox } from './Flexbox';
+export * from './FlexboxLayout';
+export * from './FluidGrid';
+export * from './FluidGridLayout';

package/types/flexbox/useResponsiveSizing.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, ReactElement } from "react";
+export declare const useResponsiveSizing: ({ children: childrenProp, cols: colsProp, style, }: {
+    children: ReactElement[];
+    cols?: number | undefined;
+    style?: CSSProperties | undefined;
+}) => {
+    cols: number;
+    content: ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | undefined;
+    rootRef: import("react").MutableRefObject<null>;
+};

package/types/flexbox/useSplitterResizing.d.ts

@@ -0,0 +1,2 @@
+import { SplitterHookProps, SplitterHookResult } from "./flexboxTypes";
+export declare const useSplitterResizing: ({ children: childrenProp, onSplitterMoved, style, }: SplitterHookProps) => SplitterHookResult;

package/types/index.d.ts

@@ -0,0 +1,18 @@
+export * from "./dock-layout";
+export { default as Component } from "./Component";
+export * from "./drag-drop";
+export * from "./DraggableLayout";
+export * from "./flexbox";
+export { Action } from "./layout-action";
+export * from "./layout-header";
+export * from "./layout-provider";
+export * from "./layout-reducer";
+export * from "./layout-view";
+export * from "./layout-view-actions";
+export * from "./palette";
+export * from "./placeholder";
+export * from "./registry";
+export * from "./responsive";
+export * from "./stack";
+export * from "./use-persistent-state";
+export * from "./utils";

package/types/layout-action.d.ts

@@ -0,0 +1,22 @@
+export declare const Action: {
+    ADD: string;
+    BLUR: string;
+    BLUR_SPLITTER: string;
+    DRAG_START: string;
+    DRAG_STARTED: string;
+    DRAG_DROP: string;
+    FOCUS: string;
+    FOCUS_SPLITTER: string;
+    INITIALIZE: string;
+    LAYOUT_RESIZE: string;
+    MAXIMIZE: string;
+    MINIMIZE: string;
+    REMOVE: string;
+    REPLACE: string;
+    RESTORE: string;
+    SAVE: string;
+    SET_TITLE: string;
+    SPLITTER_RESIZE: string;
+    SWITCH_TAB: string;
+    TEAR_OUT: string;
+};

package/types/layout-header/ActionButton.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes, MouseEvent } from "react";
+export interface ActionButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
+    actionId: "maximize" | "minimize" | "restore" | "tearout";
+    iconName?: string;
+    onClick: (evt: MouseEvent, actionId: "maximize" | "minimize" | "restore" | "tearout") => void;
+}
+declare const ActionButton: ({ actionId, className, iconName, onClick, ...props }: ActionButtonProps) => JSX.Element;
+export default ActionButton;

package/types/layout-header/Header.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from "react";
+import { Contribution } from "../layout-view-actions";
+export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
+    collapsed?: boolean;
+    contributions?: Contribution[];
+    expanded?: boolean;
+    closeable?: boolean;
+    onEditTitle: (value: string) => void;
+    orientation?: "horizontal" | "vertical";
+    tearOut?: boolean;
+}
+export declare const Header: ({ className: classNameProp, contributions, collapsed, closeable, onEditTitle, orientation: orientationProp, style, title, }: HeaderProps) => JSX.Element;

package/types/layout-header/index.d.ts

@@ -0,0 +1 @@
+export * from './Header';

package/types/layout-provider/LayoutProvider.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from "react";
+import { LayoutChangeHandler, LayoutJSON } from "../layout-reducer";
+import { LayoutProviderDispatch } from "./LayoutProviderContext";
+export interface LayoutProviderProps {
+    children: ReactElement;
+    createNewChild?: (index?: number) => ReactElement;
+    pathToDropTarget?: string;
+    layout?: LayoutJSON;
+    onLayoutChange?: LayoutChangeHandler;
+}
+export declare const LayoutProviderVersion: () => JSX.Element;
+export declare const LayoutProvider: (props: LayoutProviderProps) => ReactElement;
+export declare const useLayoutProviderDispatch: () => LayoutProviderDispatch;
+export declare const useLayoutCreateNewChild: () => ((index?: number | undefined) => ReactElement<any, string | import("react").JSXElementConstructor<any>>) | undefined;
+export declare const useLayoutProviderVersion: () => number;

package/types/layout-provider/LayoutProviderContext.d.ts

@@ -0,0 +1,9 @@
+import { Dispatch, ReactElement } from "react";
+import { DragStartAction, LayoutReducerAction, QueryAction, SaveAction } from "../layout-reducer";
+export type LayoutProviderDispatch = Dispatch<LayoutReducerAction | SaveAction | DragStartAction | QueryAction>;
+export interface LayoutProviderContextProps {
+    createNewChild?: (index?: number) => ReactElement;
+    dispatchLayoutProvider: LayoutProviderDispatch;
+    version: number;
+}
+export declare const LayoutProviderContext: import("react").Context<LayoutProviderContextProps>;

package/types/layout-provider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './LayoutProvider';
+export * from './LayoutProviderContext';

package/types/layout-provider/useLayoutDragDrop.d.ts

@@ -0,0 +1,4 @@
+import { MutableRefObject, ReactElement } from "react";
+import { DragStartAction } from "../layout-reducer";
+import { LayoutProviderDispatch } from "./LayoutProviderContext";
+export declare const useLayoutDragDrop: (rootLayoutRef: MutableRefObject<ReactElement>, dispatch: LayoutProviderDispatch, pathToDropTarget?: string) => (action: DragStartAction) => void;

package/types/layout-reducer/flexUtils.d.ts

@@ -0,0 +1,22 @@
+import { dimension, rect, rectTuple } from "@vuu-ui/vuu-utils";
+import React, { CSSProperties, ReactElement, ReactNode } from "react";
+import { DropPos } from "../drag-drop/dragDropTypes";
+export type flexDirection = "row" | "column";
+type contraDimension = dimension;
+type flexDimensionTuple = [dimension, contraDimension, flexDirection];
+export type position = {
+    height?: number;
+    width?: number;
+};
+export declare const getFlexDimensions: (flexDirection?: flexDirection) => flexDimensionTuple;
+export declare const getIntrinsicSize: (component: ReactElement) => {
+    height?: number | undefined;
+    width?: number | undefined;
+} | undefined;
+export declare function getFlexStyle(component: ReactElement, dimension: dimension, pos?: DropPos): any;
+export declare function hasUnboundedFlexStyle(component: ReactElement): boolean;
+export declare function getFlexOrIntrinsicStyle(component: ReactElement, dimension: dimension, pos: position): any;
+export declare function wrapIntrinsicSizeComponentWithFlexbox(component: ReactElement, flexDirection: flexDirection, path: string, clientRect?: rect, dropRect?: rectTuple): React.FunctionComponentElement<any>;
+export declare function createFlexbox(flexDirection: flexDirection, props: any, children: ReactNode, path: string): React.FunctionComponentElement<any>;
+export declare function createPlaceHolder(path: string, size: number, style?: CSSProperties, props?: any): React.DetailedReactHTMLElement<any, HTMLElement>;
+export {};

package/types/layout-reducer/index.d.ts

@@ -0,0 +1,4 @@
+export * from './flexUtils';
+export * from './layout-reducer';
+export * from './layoutTypes';
+export * from './layoutUtils';

package/types/layout-reducer/insert-layout-element.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from "react";
+import { DropPos } from "../drag-drop";
+import { LayoutModel } from "./layoutTypes";
+type insertionPosition = "before" | "after";
+export declare function getInsertTabBeforeAfter(stack: LayoutModel, pos: DropPos): any[];
+export declare function insertIntoContainer(container: ReactElement, targetContainer: ReactElement, newComponent: ReactElement): ReactElement;
+export declare function insertBesideChild(container: ReactElement, existingComponent: any, newComponent: any, insertionPosition: insertionPosition, pos?: DropPos, clientRect?: any, dropRect?: any): ReactElement;
+export {};

package/types/layout-reducer/layout-reducer.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from "react";
+import { LayoutReducerAction } from "./layoutTypes";
+export declare const layoutReducer: (state: ReactElement, action: LayoutReducerAction) => ReactElement;