@vuu-ui/vuu-layout 0.5.14 → 0.5.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuu-ui/vuu-layout",
-  "version": "0.5.14",
+  "version": "0.5.16",
   "description": "VUU Layout Components",
   "author": "heswell",
   "license": "Apache-2.0",
@@ -8,7 +8,7 @@
     "@salt-ds/core": "1.0.0",
     "@salt-ds/icons": "1.0.0",
     "@heswell/salt-lab": "1.0.0-alpha.0",
-    "@vuu-ui/vuu-utils": "0.5.14",
+    "@vuu-ui/vuu-utils": "0.5.16",
     "classnames": "^2.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
@@ -18,8 +18,10 @@
     "esm",
     "index.css",
     "index.css.map",
-    "README.md"
+    "README.md",
+    "/types"
   ],
   "module": "esm/index.js",
-  "main": "cjs/index.js"
+  "main": "cjs/index.js",
+  "types": "types/index.d.ts"
 }

package/types/vuu-layout/src/Component.d.ts

@@ -0,0 +1,7 @@
+import React, { HTMLAttributes } from 'react';
+import './Component.css';
+export interface ComponentProps extends HTMLAttributes<HTMLDivElement> {
+    resizeable?: boolean;
+}
+declare const Component: React.FunctionComponent<ComponentProps>;
+export default Component;

package/types/vuu-layout/src/DraggableLayout.d.ts

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

package/types/vuu-layout/src/chest-of-drawers/Chest.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, ReactElement } from "react";
+import "./Chest.css";
+export interface ChestProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactElement[];
+}
+declare const Chest: {
+    (props: ChestProps): JSX.Element;
+    displayName: string;
+};
+export default Chest;

package/types/vuu-layout/src/chest-of-drawers/Drawer.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from "react";
+import "./Drawer.css";
+export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
+    clickToOpen?: boolean;
+    defaultOpen: boolean;
+    inline?: boolean;
+    open?: boolean;
+    peekaboo?: boolean;
+    position?: "left" | "right" | "top" | "bottom";
+    sizeOpen?: number;
+    sizeClosed?: number;
+    toggleButton?: "start" | "end";
+}
+declare const Drawer: {
+    ({ children, className: classNameProp, clickToOpen, defaultOpen, sizeOpen, sizeClosed, style: styleProp, open: openProp, position, inline, onClick, peekaboo, toggleButton, ...props }: DrawerProps): JSX.Element;
+    displayName: string;
+};
+export default Drawer;

package/types/vuu-layout/src/chest-of-drawers/index.d.ts

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

package/types/vuu-layout/src/common-types.d.ts

@@ -0,0 +1,8 @@
+export interface rect {
+    bottom: number;
+    left: number;
+    right: number;
+    top: number;
+}
+export declare type rectTuple = [number, number, number, number];
+export declare type dimension = 'width' | 'height';

package/types/vuu-layout/src/debug.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from 'react';
+export declare const tree: (el: ReactElement, depth?: number) => string;

package/types/vuu-layout/src/drag-drop/BoxModel.d.ts

@@ -0,0 +1,143 @@
+import { ReactElement } from "react";
+import { LayoutModel } from "../layout-reducer";
+import { DragDropRect, DropPos, RelativePosition } from "./dragDropTypes";
+export declare const positionValues: {
+    north: number;
+    east: number;
+    south: number;
+    west: number;
+    header: number;
+    centre: number;
+    absolute: number;
+};
+export declare const RelativeDropPosition: {
+    AFTER: RelativePosition;
+    BEFORE: RelativePosition;
+};
+export declare const Position: Readonly<{
+    North: Readonly<{
+        offset: number;
+        valueOf: () => number;
+        toString: () => "header" | "absolute" | "north" | "east" | "south" | "west" | "centre";
+        North: boolean;
+        South: boolean;
+        East: boolean;
+        West: boolean;
+        Header: boolean;
+        Centre: boolean;
+        NorthOrSouth: boolean;
+        EastOrWest: boolean;
+        NorthOrWest: boolean;
+        SouthOrEast: boolean;
+        Absolute: boolean;
+    }>;
+    East: Readonly<{
+        offset: number;
+        valueOf: () => number;
+        toString: () => "header" | "absolute" | "north" | "east" | "south" | "west" | "centre";
+        North: boolean;
+        South: boolean;
+        East: boolean;
+        West: boolean;
+        Header: boolean;
+        Centre: boolean;
+        NorthOrSouth: boolean;
+        EastOrWest: boolean;
+        NorthOrWest: boolean;
+        SouthOrEast: boolean;
+        Absolute: boolean;
+    }>;
+    South: Readonly<{
+        offset: number;
+        valueOf: () => number;
+        toString: () => "header" | "absolute" | "north" | "east" | "south" | "west" | "centre";
+        North: boolean;
+        South: boolean;
+        East: boolean;
+        West: boolean;
+        Header: boolean;
+        Centre: boolean;
+        NorthOrSouth: boolean;
+        EastOrWest: boolean;
+        NorthOrWest: boolean;
+        SouthOrEast: boolean;
+        Absolute: boolean;
+    }>;
+    West: Readonly<{
+        offset: number;
+        valueOf: () => number;
+        toString: () => "header" | "absolute" | "north" | "east" | "south" | "west" | "centre";
+        North: boolean;
+        South: boolean;
+        East: boolean;
+        West: boolean;
+        Header: boolean;
+        Centre: boolean;
+        NorthOrSouth: boolean;
+        EastOrWest: boolean;
+        NorthOrWest: boolean;
+        SouthOrEast: boolean;
+        Absolute: boolean;
+    }>;
+    Header: Readonly<{
+        offset: number;
+        valueOf: () => number;
+        toString: () => "header" | "absolute" | "north" | "east" | "south" | "west" | "centre";
+        North: boolean;
+        South: boolean;
+        East: boolean;
+        West: boolean;
+        Header: boolean;
+        Centre: boolean;
+        NorthOrSouth: boolean;
+        EastOrWest: boolean;
+        NorthOrWest: boolean;
+        SouthOrEast: boolean;
+        Absolute: boolean;
+    }>;
+    Centre: Readonly<{
+        offset: number;
+        valueOf: () => number;
+        toString: () => "header" | "absolute" | "north" | "east" | "south" | "west" | "centre";
+        North: boolean;
+        South: boolean;
+        East: boolean;
+        West: boolean;
+        Header: boolean;
+        Centre: boolean;
+        NorthOrSouth: boolean;
+        EastOrWest: boolean;
+        NorthOrWest: boolean;
+        SouthOrEast: boolean;
+        Absolute: boolean;
+    }>;
+    Absolute: Readonly<{
+        offset: number;
+        valueOf: () => number;
+        toString: () => "header" | "absolute" | "north" | "east" | "south" | "west" | "centre";
+        North: boolean;
+        South: boolean;
+        East: boolean;
+        West: boolean;
+        Header: boolean;
+        Centre: boolean;
+        NorthOrSouth: boolean;
+        EastOrWest: boolean;
+        NorthOrWest: boolean;
+        SouthOrEast: boolean;
+        Absolute: boolean;
+    }>;
+}>;
+export interface Measurements {
+    [key: string]: DragDropRect;
+}
+export declare class BoxModel {
+    static measure(model: ReactElement, dropTargetPaths?: string[]): Measurements;
+    static allBoxesContainingPoint(layout: LayoutModel, measurements: Measurements, x: number, y: number, validDropTargets?: string[]): LayoutModel[];
+}
+export declare function pointPositionWithinRect(x: number, y: number, rect: DragDropRect, borderZone?: number): {
+    pctX: number;
+    pctY: number;
+    closeToTheEdge: number;
+};
+export declare function getPosition(x: number, y: number, rect: DragDropRect, targetOrientation?: "row" | "column"): DropPos;

package/types/vuu-layout/src/drag-drop/DragState.d.ts

@@ -0,0 +1,46 @@
+import { DragDropRect } from './dragDropTypes';
+export declare type IntrinsicSizes = {
+    height?: number;
+    width?: number;
+};
+interface ZoneRange {
+    hi: number;
+    lo: number;
+}
+declare 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/vuu-layout/src/drag-drop/Draggable.d.ts

@@ -0,0 +1,23 @@
+import { ReactElement } from "react";
+import { rect } from "../common-types";
+import { IntrinsicSizes } from "./DragState";
+import { DropTarget } from "./DropTarget";
+export declare type DragStartCallback = (e: MouseEvent, x: number, y: number) => void;
+export declare type DragMoveCallback = (x: number | undefined, y: number | undefined) => void;
+export declare type DragEndCallback = (droppedTarget: Partial<DropTarget>) => void;
+export declare type DragInstructions = {
+    DoNotRemove?: boolean;
+    DoNotTransform?: boolean;
+    dragThreshold?: number;
+    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/vuu-layout/src/drag-drop/DropMenu.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from "react";
+import { DropTarget } from "./DropTarget";
+import "./DropMenu.css";
+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/vuu-layout/src/drag-drop/DropTarget.d.ts

@@ -0,0 +1,61 @@
+import { rectTuple } from "../common-types";
+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 declare 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/vuu-layout/src/drag-drop/DropTargetRenderer.d.ts

@@ -0,0 +1,18 @@
+import { DragDropRect } from "./dragDropTypes";
+import { DragState } from "./DragState";
+import { DropTarget } from "./DropTarget";
+import "./DropTargetRenderer.css";
+declare type Point = [number, number];
+declare 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/vuu-layout/src/drag-drop/dragDropTypes.d.ts

@@ -0,0 +1,51 @@
+import type { rect } from '../common-types';
+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 declare type RelativePosition = 'after' | 'before';
+export declare 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/vuu-layout/src/drag-drop/index.d.ts

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

package/types/vuu-layout/src/editable-label/EditableLabel.d.ts

@@ -0,0 +1,9 @@
+import { FocusEvent, HTMLAttributes, KeyboardEvent, MouseEvent } from 'react';
+import './EditableLabel.css';
+export interface EditableLabelProps extends HTMLAttributes<HTMLDivElement> {
+    onEnterEditMode?: (evt: MouseEvent) => void;
+    onExitEditMode?: (evt: FocusEvent | KeyboardEvent, value: string) => void;
+    value: string;
+}
+declare const EditableLabel: ({ className: classNameProp, onEnterEditMode, onExitEditMode, value: valueProp }: EditableLabelProps) => JSX.Element;
+export default EditableLabel;

package/types/vuu-layout/src/editable-label/index.d.ts

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

package/types/vuu-layout/src/flexbox/Flexbox.d.ts

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

package/types/vuu-layout/src/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/vuu-layout/src/flexbox/FluidGrid.d.ts

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

package/types/vuu-layout/src/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/vuu-layout/src/flexbox/Splitter.d.ts

@@ -0,0 +1,13 @@
+import React, { HTMLAttributes } from 'react';
+import './Splitter.css';
+export declare type SplitterDragStartHandler = (index: number) => void;
+export declare type SplitterDragHandler = (index: number, distance: number) => void;
+export declare 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/vuu-layout/src/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/vuu-layout/src/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: ReactElement[];
+    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 declare type SplitterFactory = (index: number) => ReactElement<SplitterProps>;
+export declare type ContentMeta = {
+    currentSize?: number;
+    flexOpen?: boolean;
+    flexBasis?: number;
+    intrinsicSize?: number;
+    minSize?: number;
+    placeholder?: boolean;
+    resizeable?: boolean;
+    shim?: boolean;
+    splitter?: boolean;
+};
+export declare type FlexSize = {
+    size: number;
+    minSize: number;
+};
+export declare type BreakPoint = "xs" | "sm" | "md" | "lg" | "xl";
+export declare type BreakPoints = BreakPoint[];
+export declare type BreakPointsProp = {
+    [keys in BreakPoint]?: number;
+};

package/types/vuu-layout/src/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/vuu-layout/src/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/vuu-layout/src/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/vuu-layout/src/index.d.ts

@@ -0,0 +1,19 @@
+export * from "@vuu-ui/vuu-popups/src/dialog";
+export * from "./chest-of-drawers";
+export * from "./common-types";
+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-view";
+export * from "./palette";
+export * from "./placeholder";
+export * from "./registry";
+export * from "./responsive";
+export * from "./stack";
+export * from "./tools";
+export * from "./use-persistent-state";
+export * from "./utils";

package/types/vuu-layout/src/layout-action.d.ts

@@ -0,0 +1,21 @@
+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;
+    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/vuu-layout/src/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;