@vuu-ui/vuu-layout 0.13.4 → 0.13.6

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

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

package/types/flexbox/Flexbox.d.ts

@@ -0,0 +1,3 @@
+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,5 @@
+import { FlexboxLayoutProps } from "./flexboxTypes";
+export declare const FlexboxLayout: {
+    (props: FlexboxLayoutProps): import("react/jsx-runtime").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,52 @@
+import { CSSProperties, HTMLAttributes, MutableRefObject, ReactElement, ReactNode } from "react";
+import { SplitterProps } from "./Splitter";
+export interface LayoutContainerProps {
+    resizeable?: boolean;
+}
+export type SplitterMoveHandler = (content: ContentMeta[]) => void;
+export interface FlexboxProps extends LayoutContainerProps, HTMLAttributes<HTMLDivElement> {
+    breakPoints?: BreakPointsProp;
+    children?: ReactNode;
+    cols?: number;
+    column?: true;
+    fullPage?: number;
+    flexFill?: boolean;
+    gap?: number;
+    onSplitterMoved?: SplitterMoveHandler;
+    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,2 @@
+export { default as Flexbox } from "./Flexbox";
+export * from "./FlexboxLayout";

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,17 @@
+export * from "./dock-layout";
+export { default as Component } from "./Component";
+export * from "./drag-drop";
+export * from "./LayoutContainer";
+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 "./responsive";
+export * from "./stack";
+export * from "./use-persistent-state";
+export * from "./utils";

package/types/layout-action.d.ts

@@ -0,0 +1,19 @@
+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;
+    SPLITTER_RESIZE: 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) => import("react/jsx-runtime").JSX.Element;
+export default ActionButton;

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

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

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

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

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

@@ -0,0 +1,20 @@
+import { KeyboardEvent, MouseEventHandler } from "react";
+import type { HeaderProps } from "./Header";
+export interface HeaderHookProps extends Pick<HeaderProps, "onCollapse" | "onEditTitle" | "onExpand"> {
+    debugString?: string;
+    title: string;
+}
+export declare const useHeader: ({ onCollapse, onEditTitle, onExpand, title, }: HeaderHookProps) => {
+    editing: boolean;
+    focusTitle: () => void;
+    labelFieldRef: import("react").RefObject<HTMLDivElement | null>;
+    onClickEdit: () => void;
+    onClose: MouseEventHandler;
+    onExitEditMode: (originalValue?: string, finalValue?: string, allowDeactivation?: boolean, editCancelled?: boolean) => void;
+    onMouseDown: MouseEventHandler;
+    onToggleCollapse: MouseEventHandler;
+    onToggleExpand: MouseEventHandler;
+    onTitleKeyDown: (evt: KeyboardEvent<HTMLDivElement>) => void;
+    setValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    value: string;
+};

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

@@ -0,0 +1,20 @@
+import { type LayoutJSON } from "@vuu-ui/vuu-utils";
+import { type ReactElement } from "react";
+import { type LayoutChangeHandler } from "../layout-reducer";
+import { LayoutProviderDispatch } from "./LayoutProviderContext";
+export interface LayoutProviderProps {
+    children: ReactElement;
+    createNewChild?: (index?: number) => ReactElement;
+    workspaceJSON?: LayoutJSON | LayoutJSON[];
+    onLayoutChange?: LayoutChangeHandler;
+}
+export declare const LayoutProviderVersion: () => import("react/jsx-runtime").JSX.Element;
+export declare const LayoutProvider: (props: LayoutProviderProps) => ReactElement;
+export declare const useLayoutProviderDispatch: () => LayoutProviderDispatch;
+export declare const useLayoutOperation: () => {
+    addComponentToWorkspace: (component: ReactElement) => void;
+    showComponentInContextPanel: (component: ReactElement | LayoutJSON, title?: string, onContextPanelClose?: () => void) => void;
+    switchWorkspace: (idx: number) => void;
+};
+export declare const useLayoutCreateNewChild: () => (index?: number) => ReactElement;
+export declare const useLayoutProviderVersion: () => number;

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

@@ -0,0 +1,15 @@
+import { Dispatch, ReactElement } from "react";
+import { DragStartAction, LayoutReducerAction, QueryAction } from "../layout-reducer";
+import { SaveAction } from "../layout-view";
+import { LayoutJSON } from "@vuu-ui/vuu-utils";
+export declare const isUnconfiguredProperty: (property: unknown) => boolean;
+export type LayoutProviderDispatch = Dispatch<LayoutReducerAction | SaveAction | DragStartAction | QueryAction>;
+export interface LayoutProviderContextProps {
+    addComponentToWorkspace: (component: ReactElement) => void;
+    createNewChild?: (index?: number) => ReactElement;
+    dispatchLayoutProvider: LayoutProviderDispatch;
+    showComponentInContextPanel: (component: ReactElement | LayoutJSON, title?: string, onContextPanelClose?: () => void) => void;
+    switchWorkspace: (idx: number) => void;
+    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;
+    width?: number;
+} | 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 { LayoutModel } from "@vuu-ui/vuu-utils";
+import { ReactElement } from "react";
+import { DropPos } from "../drag-drop";
+type insertionPosition = "before" | "after";
+export declare function getInsertTabBeforeAfter(stack: LayoutModel, pos: DropPos): any[];
+export declare function insertIntoContainer(container: ReactElement, targetContainer: ReactElement, newComponent: ReactElement | 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;

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

@@ -0,0 +1,135 @@
+import { LayoutJSON } from "@vuu-ui/vuu-utils";
+import { ReactElement } from "react";
+import { DragDropRect, DragInstructions } from "../drag-drop";
+import { DropTarget } from "../drag-drop/DropTarget";
+export type layoutType = "Flexbox" | "View" | "LayoutContainer" | "Stack";
+export declare const LayoutActionType: {
+    readonly ADD: "add";
+    readonly DRAG_START: "drag-start";
+    readonly DRAG_DROP: "drag-drop";
+    readonly LAYOUT_RESIZE: "layout-resize";
+    readonly MAXIMIZE: "maximize";
+    readonly MINIMIZE: "minimize";
+    readonly MOVE_CHILD: "move-child";
+    readonly QUERY: "query";
+    readonly REMOVE: "remove";
+    readonly REPLACE: "replace";
+    readonly RESTORE: "restore";
+    readonly SET_PROP: "set-prop";
+    readonly SET_PROPS: "set-props";
+    readonly SET_TITLE: "set-title";
+    readonly SPLITTER_RESIZE: "splitter-resize";
+    readonly SWITCH_TAB: "switch-tab";
+    readonly TEAROUT: "tearout";
+};
+export type AddAction = {
+    component: any;
+    path: string;
+    type: typeof LayoutActionType.ADD;
+};
+export type DragDropAction = {
+    draggedReactElement: ReactElement;
+    dragInstructions: any;
+    dropTarget: Partial<DropTarget>;
+    type: typeof LayoutActionType.DRAG_DROP;
+};
+export type MaximizeAction = {
+    path?: string;
+    type: typeof LayoutActionType.MAXIMIZE;
+};
+export type CollapseAction = {
+    path?: string;
+    type: "collapse";
+};
+export type ExpandAction = {
+    path?: string;
+    type: "expand";
+};
+export type MoveChildAction = {
+    fromIndex: number;
+    toIndex: number;
+    path: string;
+    type: typeof LayoutActionType.MOVE_CHILD;
+};
+export type QueryAction = {
+    path?: string;
+    query: string;
+    type: typeof LayoutActionType.QUERY;
+};
+export type RemoveAction = {
+    path?: string;
+    type: typeof LayoutActionType.REMOVE;
+};
+export type ReplaceAction = {
+    replacement: any;
+    target: any;
+    type: typeof LayoutActionType.REPLACE;
+};
+export type RestoreAction = {
+    path?: string;
+    type: typeof LayoutActionType.RESTORE;
+};
+export type SetPropAction = {
+    path: string;
+    propName: string;
+    propValue: string | number | boolean;
+    type: typeof LayoutActionType.SET_PROP;
+};
+export type SetPropsAction = {
+    path: string;
+    props: {
+        [key: string]: unknown;
+    };
+    type: typeof LayoutActionType.SET_PROPS;
+};
+export type SetTitleAction = {
+    path: string;
+    title: string;
+    type: typeof LayoutActionType.SET_TITLE;
+};
+export type SplitterResizeAction = {
+    path: string;
+    sizes: {
+        currentSize: number;
+        flexBasis: number;
+    }[];
+    type: typeof LayoutActionType.SPLITTER_RESIZE;
+};
+export type LayoutResizeAction = {
+    path: string;
+    size: number;
+    type: typeof LayoutActionType.LAYOUT_RESIZE;
+};
+export type SwitchTabAction = {
+    id?: string;
+    nextIdx: number;
+    path: string;
+    type: typeof LayoutActionType.SWITCH_TAB;
+};
+export type TearoutAction = {
+    path?: string;
+    type: typeof LayoutActionType.TEAROUT;
+};
+export type LayoutReducerAction = AddAction | DragDropAction | LayoutResizeAction | CollapseAction | ExpandAction | MoveChildAction | RemoveAction | ReplaceAction | RestoreAction | SetPropAction | SetPropsAction | SetTitleAction | SplitterResizeAction | SwitchTabAction;
+export type MousedownViewAction = {
+    preDragActivity?: unknown;
+    index?: number;
+    type: "mousedown";
+};
+export type DragStartAction = {
+    payload?: ReactElement;
+    dragContainerPath?: string;
+    dragElement?: HTMLElement;
+    dragRect: DragDropRect;
+    dropTargets?: string[];
+    evt: MouseEvent;
+    instructions?: DragInstructions;
+    path: string;
+    type: typeof LayoutActionType.DRAG_START;
+};
+export type LayoutLevelChange = "add-component" | "drag-drop-operation" | "edit-feature-title" | "remove-component" | "resize-component" | "switch-active-tab" | "save-feature-props";
+export type ApplicationLevelChange = "switch-active-layout" | "open-layout" | "close-layout" | "rename-layout" | "resize-application-chrome";
+export type LayoutChangeReason = LayoutLevelChange | ApplicationLevelChange;
+export type LayoutChangeHandler = (layout: LayoutJSON, layoutChangeReason: LayoutChangeReason) => void;
+export declare const isApplicationLevelChange: (layoutChangeReason: LayoutChangeReason) => layoutChangeReason is ApplicationLevelChange;
+export declare const isLayoutLevelChange: (layoutChangeReason: LayoutChangeReason) => layoutChangeReason is LayoutLevelChange;

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

@@ -0,0 +1,44 @@
+import { LayoutJSON, LayoutModel, dimension } from "@vuu-ui/vuu-utils";
+import React, { CSSProperties, ReactElement } from "react";
+import { TabLabelFactory } from "../stack";
+import { layoutType } from "./layoutTypes";
+interface ComponentWithId {
+    id: string;
+    [key: string]: unknown;
+}
+export declare const getManagedDimension: (style: CSSProperties) => [dimension, dimension];
+export declare const applyLayoutProps: (component: ReactElement, path?: string) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export interface LayoutProps extends ComponentWithId {
+    active?: number;
+    "data-path"?: string;
+    children?: ReactElement[];
+    column?: boolean;
+    dropTarget?: boolean;
+    key: string;
+    layout?: LayoutJSON;
+    path?: string;
+    resizeable?: boolean;
+    style: CSSProperties;
+    type?: string;
+    version?: number;
+}
+/**
+ * parse the declarative JSX and clone adding layout attributes
+ */
+export declare const cloneElementAddLayoutProps: (layoutElement: ReactElement, previousLayout?: ReactElement) => ReactElement;
+export declare const applyLayout: (type: layoutType, props: LayoutProps, previousLayout?: LayoutModel) => LayoutModel;
+export declare function layoutFromJson({ active, id, type, children, props, state }: LayoutJSON, path: string): ReactElement;
+export declare function layoutToJSON(component: ReactElement): LayoutJSON<{
+    [key: string]: any;
+}>;
+export declare function componentToJson(component: ReactElement): LayoutJSON;
+export declare function serializeProps(props?: LayoutProps): {
+    [key: string]: any;
+} | undefined;
+export type LayoutQuery = "PARENT_CONTAINER";
+export declare const layoutQuery: (query: LayoutQuery, path?: string, layoutRoot?: ReactElement) => {
+    parentContainerId: any;
+    parentContainerType: string | undefined;
+} | undefined;
+export declare const getDefaultTabLabel: TabLabelFactory;
+export {};

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

@@ -0,0 +1,3 @@
+import { ReactElement } from "react";
+import { MoveChildAction } from "./layoutTypes";
+export declare function moveChild(layoutRoot: ReactElement, { fromIndex, path, toIndex }: MoveChildAction): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -0,0 +1,3 @@
+import React, { ReactElement } from "react";
+import { RemoveAction } from "./layoutTypes";
+export declare function removeChild(layoutRoot: ReactElement, { path }: RemoveAction): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

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

@@ -0,0 +1,6 @@
+import React, { ReactElement } from "react";
+import { ReplaceAction } from "./layoutTypes";
+import { LayoutProps } from "./layoutUtils";
+export declare function replaceChild(model: ReactElement, { target, replacement }: ReplaceAction): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function _replaceChild(model: ReactElement, child: ReactElement, replacement: ReactElement<LayoutProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function swapChild(model: ReactElement, child: ReactElement, replacement: ReactElement, op?: "collapse" | "expand"): ReactElement;

package/types/layout-reducer/resize-flex-children.d.ts

@@ -0,0 +1,4 @@
+import React, { ReactElement } from "react";
+import { LayoutResizeAction, SplitterResizeAction } from "./layoutTypes";
+export declare function resizeFlexChild(layoutRoot: ReactElement, { path, size }: LayoutResizeAction): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function resizeFlexChildren(layoutRoot: ReactElement, { path, sizes }: SplitterResizeAction): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

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

@@ -0,0 +1,9 @@
+import { ReactElement } from "react";
+import { DropPos } from "../drag-drop/dragDropTypes";
+import { DropTarget } from "../drag-drop/DropTarget";
+export interface LayoutSpec {
+    type: "Stack" | "Flexbox";
+    flexDirection: "column" | "row";
+    showTabs?: boolean;
+}
+export declare function wrap(container: ReactElement, existingComponent: ReactElement, newComponent: any, pos: DropPos, clientRect?: DropTarget["clientRect"], dropRect?: DropTarget["dropRect"]): ReactElement;

package/types/layout-view/View.d.ts

@@ -0,0 +1,10 @@
+import { ForwardedRef, ReactElement } from "react";
+import { ViewProps } from "./viewTypes";
+interface ViewComponentType {
+    (props: ViewProps & {
+        ref?: ForwardedRef<HTMLDivElement>;
+    }): ReactElement<ViewProps>;
+    displayName?: string;
+}
+declare const MemoView: ViewComponentType;
+export { MemoView as View };

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

@@ -0,0 +1,3 @@
+export * from "./useViewBroadcastChannel";
+export * from "./View";
+export * from "./viewTypes";

package/types/layout-view/useView.d.ts

@@ -0,0 +1,22 @@
+import { RefObject } from "react";
+import { ConfigChangeHandler } from "../layout-view-actions";
+export interface ViewHookProps {
+    id: string;
+    rootRef: RefObject<HTMLDivElement | null>;
+    path?: string;
+    dropTargets?: string[];
+    title?: string;
+}
+export declare const useView: ({ id, rootRef, path, dropTargets, title: titleProp, }: ViewHookProps) => {
+    contributions: import("./viewTypes").Contribution[] | undefined;
+    dispatchViewAction: import("../layout-view-actions").ViewDispatch;
+    load: (key?: string) => any;
+    loadSession: (key?: string) => any;
+    onConfigChange: ConfigChangeHandler;
+    onEditTitle: (title: string) => void;
+    purge: (key: string) => void;
+    restoredState: any;
+    save: (state: unknown, key: string) => void;
+    saveSession: (state: unknown, key: string) => void;
+    title: any;
+};

package/types/layout-view/useViewBroadcastChannel.d.ts

@@ -0,0 +1,7 @@
+export interface ViewBroadcastMessage {
+    path?: string;
+    targetId?: string;
+    type: "highlight-on" | "highlight-off" | "layout-closed";
+}
+export type BroadcastMessageHandler = (message: ViewBroadcastMessage) => void;
+export declare const useViewBroadcastChannel: (id?: string, path?: string, onMessageReceived?: BroadcastMessageHandler) => (message: ViewBroadcastMessage) => void;

package/types/layout-view/useViewResize.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from "react";
+export interface ViewResizeHookProps {
+    mainRef: RefObject<HTMLDivElement | null>;
+    resize?: "defer" | "responsive";
+    rootRef: RefObject<HTMLDivElement | null>;
+}
+export declare const useViewResize: ({ mainRef, resize, rootRef, }: ViewResizeHookProps) => void;

package/types/layout-view/viewTypes.d.ts

@@ -0,0 +1,48 @@
+import { CSSProperties, FunctionComponent, HTMLAttributes, ReactElement } from "react";
+import { HeaderProps } from "../layout-header";
+import { MaximizeAction, CollapseAction, ExpandAction, MousedownViewAction, QueryAction, RemoveAction, RestoreAction, TearoutAction } from "../layout-reducer";
+import { ViewBroadcastMessage } from "./useViewBroadcastChannel";
+export type SaveAction = {
+    type: "save";
+};
+export type ContributionLocation = "post-title" | "pre-title";
+export type Contribution = {
+    index?: number;
+    location?: ContributionLocation;
+    content: ReactElement;
+};
+export type AddToolbarContributionViewAction = {
+    content: ReactElement;
+    location: ContributionLocation;
+    type: "add-toolbar-contribution";
+};
+export type RemoveToolbarContributionViewAction = {
+    location: ContributionLocation;
+    type: "remove-toolbar-contribution";
+};
+export type BroadcastMessageViewAction = {
+    type: "broadcast-message";
+    message: ViewBroadcastMessage;
+};
+export type ViewAction = BroadcastMessageViewAction | MaximizeAction | CollapseAction | ExpandAction | MousedownViewAction | QueryAction | RemoveAction | RestoreAction | TearoutAction | AddToolbarContributionViewAction | RemoveToolbarContributionViewAction;
+export type ResizeStrategy = "defer" | "responsive";
+export interface ViewProps extends HTMLAttributes<HTMLDivElement> {
+    Header?: FunctionComponent<HeaderProps>;
+    allowRename?: boolean;
+    closeable?: boolean;
+    collapsed?: boolean;
+    "data-path"?: string;
+    "data-resizeable"?: boolean;
+    dropTargets?: string[];
+    expanded?: boolean;
+    flexFill?: boolean;
+    header?: boolean | Partial<HeaderProps>;
+    onCollapse?: () => void;
+    onExpand?: () => void;
+    orientation?: "vertical" | "horizontal";
+    path?: string;
+    resize?: ResizeStrategy;
+    resizeable?: boolean;
+    restoreStyle?: CSSProperties;
+    tearOut?: boolean;
+}

package/types/layout-view-actions/ViewContext.d.ts

@@ -0,0 +1,37 @@
+import React, { SyntheticEvent } from "react";
+import type { ViewAction } from "../layout-view";
+export type QueryReponse = {
+    [key: string]: unknown;
+};
+export type ConfigChangeHandler = (config: {
+    [key: string]: unknown;
+    type: string;
+}) => void;
+export type ViewDispatch = <Action extends ViewAction = ViewAction>(action: Action, evt?: SyntheticEvent) => Promise<boolean | QueryReponse | void>;
+/**
+ * This API is available to any Feature hosted within Vuu (as all Features are wrapped
+ * with View component). It offers metadata about the View as well as access to the
+ * Vuu persistencew API;
+ */
+export interface ViewContextAPI {
+    /**
+     * dispatcher for View actions. These are a subset of LayoutActions, specifically for
+     * View manipulation
+     */
+    dispatch?: ViewDispatch | null;
+    id?: string;
+    load?: <T = unknown>(key?: string) => T;
+    loadSession?: (key?: string) => unknown;
+    onConfigChange?: ConfigChangeHandler;
+    path?: string;
+    purge?: (key: string) => void;
+    save?: (state: unknown, key: string) => void;
+    saveSession?: (state: unknown, key: string) => void;
+    setComponentProps: (props: {
+        [key: string]: unknown;
+    }) => void;
+    title?: string;
+}
+export declare const ViewContext: React.Context<ViewContextAPI>;
+export declare const useViewDispatch: () => ViewDispatch | null;
+export declare const useViewContext: () => ViewContextAPI;