@vuu-ui/vuu-layout 0.8.12 → 0.8.13

package/types/layout-persistence/LocalLayoutPersistenceManager.d.ts

@@ -1,17 +1,16 @@
-import { LayoutMetadata } from "@vuu-ui/vuu-shell";
-import { LayoutJSON, LayoutPersistenceManager } from "@vuu-ui/vuu-layout";
+import { LayoutMetadata, LayoutMetadataDto } from "@vuu-ui/vuu-shell";
+import { ApplicationJSON, LayoutJSON, LayoutPersistenceManager } from "@vuu-ui/vuu-layout";
 export declare class LocalLayoutPersistenceManager implements LayoutPersistenceManager {
     #private;
     constructor(urlKey?: string);
-    createLayout(metadata: Omit<LayoutMetadata, "id">, layout: LayoutJSON): Promise<string>;
-    updateLayout(id: string, newMetadata: Omit<LayoutMetadata, "id">, newLayout: LayoutJSON): Promise<void>;
+    createLayout(metadata: LayoutMetadataDto, layout: LayoutJSON): Promise<LayoutMetadata>;
+    updateLayout(id: string, newMetadata: LayoutMetadataDto, newLayout: LayoutJSON): Promise<void>;
     deleteLayout(id: string): Promise<void>;
     loadLayout(id: string): Promise<LayoutJSON>;
     loadMetadata(): Promise<LayoutMetadata[]>;
-    loadApplicationLayout(): Promise<LayoutJSON>;
-    saveApplicationLayout(layout: LayoutJSON): Promise<void>;
+    loadApplicationJSON(): Promise<ApplicationJSON>;
+    saveApplicationJSON(applicationJSON: ApplicationJSON): Promise<void>;
     private loadLayouts;
-    private appendAndPersist;
     private saveLayoutsWithMetadata;
     private validateIds;
     private validateId;

package/types/layout-persistence/RemoteLayoutPersistenceManager.d.ts

@@ -0,0 +1,21 @@
+import { LayoutMetadata, LayoutMetadataDto } from "@vuu-ui/vuu-shell";
+import { LayoutPersistenceManager } from "./LayoutPersistenceManager";
+import { ApplicationJSON, LayoutJSON } from "../layout-reducer";
+export type CreateLayoutResponseDto = {
+    metadata: LayoutMetadata;
+};
+export type GetLayoutResponseDto = {
+    definition: LayoutJSON;
+};
+export type GetApplicationResponseDto = {
+    definition: ApplicationJSON;
+};
+export declare class RemoteLayoutPersistenceManager implements LayoutPersistenceManager {
+    createLayout(metadata: LayoutMetadataDto, layout: LayoutJSON): Promise<LayoutMetadata>;
+    updateLayout(id: string, metadata: LayoutMetadataDto, newLayoutJson: LayoutJSON): Promise<void>;
+    deleteLayout(id: string): Promise<void>;
+    loadLayout(id: string): Promise<LayoutJSON>;
+    loadMetadata(): Promise<LayoutMetadata[]>;
+    saveApplicationJSON(applicationJSON: ApplicationJSON): Promise<void>;
+    loadApplicationJSON(): Promise<ApplicationJSON>;
+}

package/types/layout-persistence/defaultApplicationJson.d.ts

@@ -0,0 +1,4 @@
+import { ApplicationJSON, LayoutJSON } from "../layout-reducer";
+export declare const warningLayout: LayoutJSON;
+export declare const loadingApplicationJson: Readonly<ApplicationJSON>;
+export declare const defaultApplicationJson: ApplicationJSON;

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

@@ -1,4 +1,5 @@
-export * from "./data";
+export * from "./defaultApplicationJson";
 export * from "./LayoutPersistenceManager";
 export * from "./LocalLayoutPersistenceManager";
+export * from "./RemoteLayoutPersistenceManager";
 export * from "./useLayoutContextMenuItems";

package/types/layout-persistence/useLayoutContextMenuItems.d.ts

@@ -1,8 +1,6 @@
 import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
-import { ReactElement } from "react";
-export declare const useLayoutContextMenuItems: () => {
+import { SetDialog } from "@vuu-ui/vuu-popups";
+export declare const useLayoutContextMenuItems: (setDialogState: SetDialog) => {
     buildMenuOptions: MenuBuilder<string, unknown>;
-    dialogContent: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    handleCloseDialog: () => void;
     handleMenuAction: MenuActionHandler;
 };

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

@@ -1,6 +1,6 @@
 import { Dispatch, ReactElement } from "react";
-import { DragStartAction, LayoutReducerAction, SaveAction } from "../layout-reducer";
-export type LayoutProviderDispatch = Dispatch<LayoutReducerAction | SaveAction | DragStartAction>;
+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;

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

@@ -17,6 +17,16 @@ export interface LayoutRoot extends WithProps {
     children?: ReactElement[];
     type: string;
 }
+export interface ApplicationSettings {
+    leftNav?: {
+        activeTabIndex: number;
+        expanded: boolean;
+    };
+}
+export interface ApplicationJSON {
+    layout: LayoutJSON;
+    settings?: ApplicationSettings;
+}
 export interface LayoutJSON extends WithType {
     active?: number;
     children?: LayoutJSON[];
@@ -41,6 +51,7 @@ export declare const LayoutActionType: {
     readonly MAXIMIZE: "maximize";
     readonly MINIMIZE: "minimize";
     readonly MOVE_CHILD: "move-child";
+    readonly QUERY: "query";
     readonly REMOVE: "remove";
     readonly REPLACE: "replace";
     readonly RESTORE: "restore";
@@ -77,6 +88,11 @@ export type MoveChildAction = {
     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;
@@ -161,7 +177,7 @@ export type DragStartAction = {
     type: typeof LayoutActionType.DRAG_START;
 };
 export type LayoutLevelChange = "switch-active-tab" | "edit-feature-title" | "save-feature-props" | "resize-component" | "remove-component" | "drag-drop-operation";
-export type ApplicationLevelChange = "switch-active-layout" | "open-layout" | "close-layout" | "rename-layout";
+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;

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

@@ -1,6 +1,7 @@
 import { dimension } from "@vuu-ui/vuu-utils";
 import React, { CSSProperties, ReactElement } from "react";
 import { ComponentWithId } from "../registry/ComponentRegistry";
+import { TabLabelFactory } from "../stack";
 import { LayoutJSON, LayoutModel, layoutType } from "./layoutTypes";
 export declare const getManagedDimension: (style: CSSProperties) => [dimension, dimension];
 export declare const applyLayoutProps: (component: ReactElement, path?: string) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
@@ -29,3 +30,9 @@ 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;

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

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

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

@@ -6,4 +6,4 @@ export interface LayoutSpec {
     flexDirection: "column" | "row";
     showTabs?: boolean;
 }
-export declare function wrap(container: ReactElement, existingComponent: any, newComponent: any, pos: DropPos, clientRect?: DropTarget["clientRect"], dropRect?: DropTarget["dropRect"]): ReactElement;
+export declare function wrap(container: ReactElement, existingComponent: ReactElement, newComponent: any, pos: DropPos, clientRect?: DropTarget["clientRect"], dropRect?: DropTarget["dropRect"]): ReactElement;

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

@@ -1,6 +1,9 @@
 import React, { SyntheticEvent } from "react";
 import { ViewAction } from "./viewTypes";
-export type ViewDispatch = <Action extends ViewAction = ViewAction>(action: Action, evt?: SyntheticEvent) => Promise<boolean | void>;
+export type QueryReponse = {
+    [key: string]: unknown;
+};
+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
@@ -8,7 +11,7 @@ export type ViewDispatch = <Action extends ViewAction = ViewAction>(action: Acti
  */
 export interface ViewContextAPI {
     /**
-     * disdpatcher for View actions. These are a subset of LayoutActions, specifically for
+     * dispatcher for View actions. These are a subset of LayoutActions, specifically for
      * View manipulation
      */
     dispatch?: ViewDispatch | null;

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

@@ -1,7 +1,7 @@
 import { FunctionComponent, HTMLAttributes } from "react";
 import { HeaderProps } from "../layout-header";
-import { AddToolbarContributionViewAction, MaximizeAction, MinimizeAction, MousedownViewAction, RemoveAction, RemoveToolbarContributionViewAction, RestoreAction, TearoutAction } from "../layout-reducer";
-export type ViewAction = MaximizeAction | MinimizeAction | MousedownViewAction | RemoveAction | RestoreAction | TearoutAction | AddToolbarContributionViewAction | RemoveToolbarContributionViewAction;
+import { AddToolbarContributionViewAction, MaximizeAction, MinimizeAction, MousedownViewAction, QueryAction, RemoveAction, RemoveToolbarContributionViewAction, RestoreAction, TearoutAction } from "../layout-reducer";
+export type ViewAction = MaximizeAction | MinimizeAction | MousedownViewAction | QueryAction | RemoveAction | RestoreAction | TearoutAction | AddToolbarContributionViewAction | RemoveToolbarContributionViewAction;
 export type ResizeStrategy = "defer" | "responsive";
 export interface ViewProps extends HTMLAttributes<HTMLDivElement> {
     Header?: FunctionComponent<HeaderProps>;

package/types/measured-container/MeasuredContainer.d.ts

@@ -2,6 +2,12 @@ import { HTMLAttributes } from "react";
 import { MeasuredSize } from "./useMeasuredContainer";
 import "./MeasuredContainer.css";
 export interface MeasuredContainerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * A numeric value for height will result in a fixed height. To adapt to container
+     * use either a percentage height or 'auto'. Always use 'auto' when rendering
+     * within a column based flex container, together with a flex value (use the
+     * --vuuMeasuredContainer-flex CSS custom property))
+     */
     height?: number | string;
     onResize?: (size: MeasuredSize) => void;
     width?: number | string;

package/types/overflow-container/useOverflowContainer.d.ts

@@ -12,7 +12,7 @@ export declare const useOverflowContainer: ({ allowDragDrop, itemCount, onMoveIt
     draggedItemIndex?: number | undefined;
     isDragging: boolean;
     isScrolling: import("react").RefObject<boolean>;
-    revealOverflowedItems: boolean;
+    revealOverflowedItems?: boolean | undefined;
     menuActionHandler: MenuActionHandler;
     menuBuilder: MenuBuilder<string, unknown>;
     onItemMouseDown: import("react").MouseEventHandler<Element> | undefined;

package/types/placeholder/LayoutStartPanel.d.ts

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

package/types/placeholder/Placeholder.d.ts

@@ -1,12 +1,18 @@
-import { HTMLAttributes } from "react";
+/// <reference types="react" />
+import { ViewProps } from "@vuu-ui/vuu-layout";
 import "./Placeholder.css";
-export interface PlaceholderProps extends HTMLAttributes<HTMLDivElement> {
+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, closeable, flexFill, resizeable, shim, ...props }: PlaceholderProps): JSX.Element;
+    ({ className: classNameProp, showStartMenu, ...viewProps }: PlaceholderProps): JSX.Element;
     displayName: string;
 };

package/types/stack/stackTypes.d.ts

@@ -1,11 +1,12 @@
 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 type TabPosition = "top" | "left" | "right" | "bottom";
 export interface StackProps extends Omit<HTMLAttributes<HTMLDivElement>, "onMouseDown"> {
     active?: number;
     createNewChild?: (index: number) => ReactElement;
     getTabIcon?: (component: ReactElement, index: number) => string | undefined;
-    getTabLabel?: (component: ReactElement, index: number) => string | undefined;
+    getTabLabel?: TabLabelFactory;
     keyBoardActivation?: "automatic" | "manual";
     onAddTab?: () => void;
     onMoveTab?: (fromIndex: number, toIndex: number) => void;

package/types/toolbar/Toolbar.d.ts

@@ -6,6 +6,7 @@ export type ActiveItemChangeHandler = (itemIndex: number[]) => void;
 export type NavigationOutOfBoundsHandler = (direction: "start" | "end") => void;
 export interface ToolbarProps extends OverflowContainerProps {
     activeItemIndex?: number[];
+    alignItems?: "start" | "center" | "end";
     defaultActiveItemIndex?: number[];
     onActiveChange?: ActiveItemChangeHandler;
     /**
@@ -15,5 +16,6 @@ export interface ToolbarProps extends OverflowContainerProps {
      */
     onNavigateOutOfBounds?: NavigationOutOfBoundsHandler;
     selectionStrategy?: SelectionStrategy | SpecialKeyMultipleSelection;
+    showSeparators?: boolean;
 }
-export declare const Toolbar: ({ activeItemIndex: activeItemIndexProp, defaultActiveItemIndex, children, className: classNameProp, id: idProp, onActiveChange, onNavigateOutOfBounds, orientation, selectionStrategy, ...props }: ToolbarProps) => JSX.Element;
+export declare const Toolbar: ({ activeItemIndex: activeItemIndexProp, alignItems, defaultActiveItemIndex, children, className, id: idProp, onActiveChange, onNavigateOutOfBounds, orientation, selectionStrategy, showSeparators, ...props }: ToolbarProps) => JSX.Element;

package/types/layout-persistence/data.d.ts

@@ -1,3 +0,0 @@
-import { LayoutJSON } from "../layout-reducer";
-export declare const warningLayout: LayoutJSON;
-export declare const defaultLayout: LayoutJSON;