@vuu-ui/vuu-layout 0.13.4 → 0.13.5

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;

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

@@ -0,0 +1,2 @@
+export * from "./useViewActionDispatcher";
+export * from "./ViewContext";

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

@@ -0,0 +1,4 @@
+import { RefObject } from "react";
+import { ViewDispatch } from "./ViewContext";
+import type { Contribution } from "../layout-view";
+export declare const useViewActionDispatcher: (id: string, rootRef: RefObject<HTMLDivElement | null>, viewPath?: string, dropTargets?: string[]) => [ViewDispatch, Contribution[] | undefined];

package/types/palette/Palette.d.ts

@@ -0,0 +1,24 @@
+import { ListBoxProps, OptionProps } from "@salt-ds/core";
+import { HTMLAttributes, ReactElement } from "react";
+import { ViewProps } from "../layout-view";
+export interface PaletteItemProps extends OptionProps {
+    /**
+     * This is the payload that will be created when the
+     * palette item is dropped
+     */
+    component: ReactElement;
+    closeable?: boolean;
+    header?: boolean;
+    idx?: number;
+    resize?: "defer";
+    resizeable?: boolean;
+}
+export declare const PaletteItem: import("react").MemoExoticComponent<({ className, component, idx, key, resizeable, header, closeable, ...props }: PaletteItemProps) => import("react/jsx-runtime").JSX.Element>;
+export interface PaletteProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDragStart" | "onDrop" | "onSelect"> {
+    ListBoxProps?: Partial<ListBoxProps>;
+    ViewProps?: Partial<ViewProps>;
+    children: ReactElement[];
+    orientation: "horizontal" | "vertical";
+    selection?: string;
+}
+export declare const Palette: ({ ListBoxProps, ViewProps, children, className, orientation, ...props }: PaletteProps) => import("react/jsx-runtime").JSX.Element;

package/types/palette/index.d.ts

@@ -0,0 +1 @@
+export * from "./Palette";

package/types/placeholder/LayoutStartPanel.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from "react";
+export interface LayoutStartPanelProps extends HTMLAttributes<HTMLDivElement> {
+    label?: string;
+}
+export declare const LayoutStartPanel: (htmlAttributes: LayoutStartPanelProps) => import("react/jsx-runtime").JSX.Element | null;

package/types/placeholder/Placeholder.d.ts

@@ -0,0 +1,16 @@
+import type { ViewProps } from "../layout-view/viewTypes";
+export interface PlaceholderProps extends ViewProps {
+    closeable?: boolean;
+    flexFill?: boolean;
+    resizeable?: boolean;
+    showStartMenu?: boolean;
+    /**
+     * shim is only when we're dealing with intrinsically sized children, which is never
+     * in an actual application. Intrinsic sizing is still experimental.
+     */
+    shim?: boolean;
+}
+export declare const Placeholder: {
+    ({ className: classNameProp, showStartMenu, ...viewProps }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/types/placeholder/index.d.ts

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

package/types/responsive/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useResizeObserver";
+export * from "./utils";

package/types/responsive/measureMinimumNodeSize.d.ts

@@ -0,0 +1 @@
+export declare function measureMinimumNodeSize(node: HTMLElement, dimension?: 'width' | 'height'): number;

package/types/responsive/overflowUtils.d.ts

@@ -0,0 +1,2 @@
+export function getOverflowedItems(containerRef: any, height?: number): any[][];
+export function findFirstOverflow(elements: any, height: any): number;

package/types/responsive/useResizeObserver.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from "react";
+export declare const WidthHeight: string[];
+export declare const HeightOnly: string[];
+export declare const WidthOnly: string[];
+export type measurements<T = string | number> = {
+    height?: T;
+    scrollHeight?: T;
+    scrollWidth?: T;
+    width?: T;
+};
+export type ResizeHandler = (measurements: measurements<number>) => void;
+export declare const resizeObserver: ResizeObserver;
+export declare function useResizeObserver(ref: RefObject<Element | HTMLElement | null>, dimensions: string[], onResize: ResizeHandler, reportInitialSize?: boolean): void;

package/types/responsive/utils.d.ts

@@ -0,0 +1,6 @@
+export declare const isResponsiveAttribute: (propName: string) => boolean;
+type Props = {
+    [key: string]: any;
+};
+export declare const extractResponsiveProps: (props: Props) => [Props, Props];
+export {};

package/types/stack/Stack.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { StackProps } from "./stackTypes";
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;

package/types/stack/StackLayout.d.ts

@@ -0,0 +1,5 @@
+import { StackProps } from "./stackTypes";
+export declare const StackLayout: {
+    (props: StackProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/types/stack/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Stack";
+export * from "./StackLayout";
+export * from "./stackTypes";

package/types/stack/stackTypes.d.ts

@@ -0,0 +1,24 @@
+import { TabstripProps } from "@vuu-ui/vuu-ui-controls";
+import { HTMLAttributes, MouseEvent, ReactElement, ReactNode } from "react";
+export type TabLabelFactory = (component: ReactElement, index: number, existingLabels: string[]) => string;
+export interface SerializableStackProps {
+    active?: number;
+    /** should the Stack display a Tabstrip and where ? default top */
+    showTabs?: false | TabPosition;
+}
+export type TabPosition = "top" | "left" | "right" | "bottom";
+export interface StackProps extends SerializableStackProps, Omit<HTMLAttributes<HTMLDivElement>, "onMouseDown"> {
+    TabstripProps?: Partial<TabstripProps>;
+    createNewChild?: (index: number) => ReactElement;
+    getTabIcon?: (component: ReactElement, index: number) => string | undefined;
+    getTabLabel?: TabLabelFactory;
+    keyBoardActivation?: "automatic" | "manual";
+    onAddTab?: () => void;
+    onMoveTab?: (fromIndex: number, toIndex: number) => void;
+    onMouseDown?: (e: MouseEvent, tabIndex: number) => void;
+    onTabClose?: (tabIndex: number) => void;
+    onTabEdit?: (tabIndex: number, label: string) => void;
+    onTabSelectionChanged?: (nextIndex: number) => void;
+    path?: string;
+    toolbarContent?: ReactNode;
+}

package/types/tabs/TabPanel.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+import './TabPanel.css';
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    ariaLabelledBy: string;
+}
+declare const TabPanel: ({ ariaLabelledBy, children, id }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default TabPanel;

package/types/tabs/index.d.ts

@@ -0,0 +1 @@
+export { default as TabPanel } from './TabPanel';

package/types/tools/config-wrapper/ConfigWrapper.d.ts

@@ -0,0 +1 @@
+export declare const ConfigWrapper: ({ children }: any) => import("react/jsx-runtime").JSX.Element;

package/types/tools/config-wrapper/index.d.ts

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

package/types/tools/devtools-box/layout-configurator.d.ts

@@ -0,0 +1,31 @@
+export function XXXnormalizeStyles(layoutStyle?: {}, visualStyle?: {}): {};
+export namespace MARGIN_STYLES {
+    let margin: boolean;
+    let marginTop: boolean;
+    let marginRight: boolean;
+    let marginBottom: boolean;
+    let marginLeft: boolean;
+}
+export namespace PADDING_STYLES {
+    let padding: boolean;
+    let paddingTop: boolean;
+    let paddingRight: boolean;
+    let paddingBottom: boolean;
+    let paddingLeft: boolean;
+}
+export namespace BORDER_STYLES {
+    let border: boolean;
+    let borderColor: boolean;
+    let borderWidth: boolean;
+    let borderTopWidth: boolean;
+    let borderRightWidth: boolean;
+    let borderBottomWidth: boolean;
+    let borderLeftWidth: boolean;
+}
+export function LayoutConfigurator({ height, managedStyle, onChange, style, width, }: {
+    height: any;
+    managedStyle: any;
+    onChange: any;
+    style: any;
+    width: any;
+}): import("react/jsx-runtime").JSX.Element;

package/types/tools/devtools-tree/layout-tree-viewer.d.ts

@@ -0,0 +1,5 @@
+export function LayoutTreeViewer({ layout, onSelect: _, style }: {
+    layout: any;
+    onSelect: any;
+    style: any;
+}): import("react/jsx-runtime").JSX.Element;

package/types/tools/index.d.ts

@@ -0,0 +1,3 @@
+export * from './config-wrapper';
+export * from './devtools-box/layout-configurator';
+export * from './devtools-tree/layout-tree-viewer';