@vuu-ui/vuu-layout 0.8.8-debug → 0.8.9-debug

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

@@ -1,4 +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) => (action: DragStartAction) => void;
+export declare const useLayoutDragDrop: (rootLayoutRef: MutableRefObject<ReactElement>, dispatch: LayoutProviderDispatch, pathToDropTarget?: string) => (action: DragStartAction) => void;

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

@@ -1,5 +1,5 @@
+import { dimension, rect, rectTuple } from "@vuu-ui/vuu-utils";
 import React, { CSSProperties, ReactElement, ReactNode } from "react";
-import { dimension, rect, rectTuple } from "../common-types";
 import { DropPos } from "../drag-drop/dragDropTypes";
 export type flexDirection = "row" | "column";
 type contraDimension = dimension;

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

@@ -120,6 +120,7 @@ export type LayoutResizeAction = {
     type: typeof LayoutActionType.LAYOUT_RESIZE;
 };
 export type SwitchTabAction = {
+    id?: string;
     nextIdx: number;
     path: string;
     type: typeof LayoutActionType.SWITCH_TAB;
@@ -157,3 +158,9 @@ export type DragStartAction = {
     path: string;
     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 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

@@ -1,5 +1,5 @@
+import { dimension } from "@vuu-ui/vuu-utils";
 import React, { CSSProperties, ReactElement } from "react";
-import { dimension } from "../common-types";
 import { ComponentWithId } from "../registry/ComponentRegistry";
 import { LayoutJSON, LayoutModel, layoutType } from "./layoutTypes";
 export declare const getManagedDimension: (style: CSSProperties) => [dimension, dimension];
@@ -18,6 +18,9 @@ export interface LayoutProps extends ComponentWithId {
     type?: string;
     version?: number;
 }
+/**
+ * parse the declarative JSX and clone adding layout attributes
+ */
 export declare const processLayoutElement: (layoutElement: ReactElement, previousLayout?: ReactElement) => ReactElement;
 export declare const applyLayout: (type: layoutType, props: LayoutProps, previousLayout?: LayoutModel) => LayoutModel;
 export declare function layoutFromJson({ id, type, children, props, state }: LayoutJSON, path: string): ReactElement;

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

@@ -1,7 +1,16 @@
 import React, { SyntheticEvent } from "react";
 import { ViewAction } from "./viewTypes";
 export type ViewDispatch = <Action extends ViewAction = ViewAction>(action: Action, evt?: SyntheticEvent) => Promise<boolean | void>;
-export interface ViewContextProps {
+/**
+ * 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 {
+    /**
+     * disdpatcher for View actions. These are a subset of LayoutActions, specifically for
+     * View manipulation
+     */
     dispatch?: ViewDispatch | null;
     id?: string;
     load?: (key?: string) => unknown;
@@ -16,6 +25,6 @@ export interface ViewContextProps {
     }) => void;
     title?: string;
 }
-export declare const ViewContext: React.Context<ViewContextProps>;
+export declare const ViewContext: React.Context<ViewContextAPI>;
 export declare const useViewDispatch: () => ViewDispatch | null;
-export declare const useViewContext: () => ViewContextProps;
+export declare const useViewContext: () => ViewContextAPI;

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+import { MeasuredSize } from "./useMeasuredContainer";
+import "./MeasuredContainer.css";
+export interface MeasuredContainerProps extends HTMLAttributes<HTMLDivElement> {
+    height?: number | string;
+    onResize?: (size: MeasuredSize) => void;
+    width?: number | string;
+}
+export declare const MeasuredContainer: import("react").ForwardRefExoticComponent<MeasuredContainerProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export * from "./MeasuredContainer";
+export * from "./useMeasuredContainer";

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

@@ -0,0 +1,22 @@
+import { CSSProperties, RefObject } from "react";
+import { MeasuredContainerProps } from "./MeasuredContainer";
+export interface ClientSize {
+    clientHeight: number;
+    clientWidth: number;
+}
+export interface MeasuredProps extends Pick<MeasuredContainerProps, "height" | "onResize" | "width"> {
+    defaultHeight?: number;
+    defaultWidth?: number;
+}
+export type CssSize = Pick<CSSProperties, "height" | "width">;
+export interface MeasuredSize {
+    height: number;
+    width: number;
+}
+export interface MeasuredContainerHookResult {
+    containerRef: RefObject<HTMLDivElement>;
+    cssSize: CssSize;
+    outerSize: CssSize;
+    innerSize?: MeasuredSize;
+}
+export declare const useMeasuredContainer: ({ defaultHeight, defaultWidth, height, onResize: onResizeProp, width, }: MeasuredProps) => MeasuredContainerHookResult;

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

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

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

@@ -3,10 +3,13 @@ import React, { HTMLAttributes } from "react";
 import { OverflowItem } from "./overflow-utils";
 import "./OverflowContainer.css";
 export interface OverflowContainerProps extends HTMLAttributes<HTMLDivElement> {
+    allowDragDrop?: boolean;
     debugId?: string;
     height: number;
+    onMoveItem?: (fromIndex: number, toIndex: number) => void;
     onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;
     orientation?: orientationType;
     overflowIcon?: string;
+    overflowPosition?: "start" | "end" | number;
 }
 export declare const OverflowContainer: React.ForwardRefExoticComponent<OverflowContainerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,4 @@
-import { orientationType } from "@salt-ds/lab";
+import { orientationType } from "@vuu-ui/vuu-utils";
 export type OverflowItem = {
     index: string;
     label: string;

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

@@ -1,13 +1,20 @@
+/// <reference types="react" />
 import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
-import { orientationType } from "@vuu-ui/vuu-utils";
 import { OverflowItem } from "./overflow-utils";
-export interface OverflowContainerHookProps {
+import { OverflowContainerProps } from "./OverflowContainer";
+export interface OverflowContainerHookProps extends Pick<OverflowContainerProps, "allowDragDrop" | "onMoveItem" | "orientation"> {
     itemCount: number;
     onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;
-    orientation?: orientationType;
 }
-export declare const useOverflowContainer: ({ itemCount, onSwitchWrappedItemIntoView, orientation, }: OverflowContainerHookProps) => {
+export declare const useOverflowContainer: ({ allowDragDrop, itemCount, onMoveItem, onSwitchWrappedItemIntoView, orientation, }: OverflowContainerHookProps) => {
+    draggable?: JSX.Element | undefined;
+    dropIndicator?: JSX.Element | undefined;
+    draggedItemIndex?: number | undefined;
+    isDragging: boolean;
+    isScrolling: import("react").RefObject<boolean>;
+    revealOverflowedItems: boolean;
     menuActionHandler: MenuActionHandler;
     menuBuilder: MenuBuilder<string, unknown>;
+    onItemMouseDown: import("react").MouseEventHandler<Element> | undefined;
     rootRef: (el: HTMLDivElement | null) => void;
 };

package/types/palette/Palette.d.ts

@@ -1,4 +1,4 @@
-import { ListItemProps } from "@salt-ds/lab";
+import { ListItemProps } from "@vuu-ui/vuu-ui-controls";
 import { HTMLAttributes, ReactElement } from "react";
 import { ViewProps } from "../layout-view";
 import "./Palette.css";
@@ -11,10 +11,11 @@ export interface PaletteItemProps extends ListItemProps {
     resizeable?: boolean;
 }
 export declare const PaletteItem: import("react").MemoExoticComponent<({ className, children: component, idx, resizeable, header, closeable, ...props }: PaletteItemProps) => JSX.Element>;
-export interface PaletteProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+export interface PaletteProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDragStart" | "onDrop" | "onSelect"> {
     children: ReactElement[];
+    itemHeight?: number;
     orientation: "horizontal" | "vertical";
     selection?: string;
     ViewProps?: Partial<ViewProps>;
 }
-export declare const Palette: ({ children, className, orientation, ViewProps, ...props }: PaletteProps) => JSX.Element;
+export declare const Palette: ({ children, className, itemHeight, orientation, ViewProps, ...props }: PaletteProps) => JSX.Element;

package/types/toolbar/Toolbar.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { OverflowContainerProps } from "../overflow-container";
+import { SelectionStrategy, SpecialKeyMultipleSelection } from "@vuu-ui/vuu-ui-controls";
+import "./Toolbar.css";
+export interface ToolbarProps extends OverflowContainerProps {
+    activeItemIndex?: number[];
+    defaultActiveItemIndex?: number[];
+    onActiveChange?: (tabIndex: number[]) => void;
+    selectionStrategy?: SelectionStrategy | SpecialKeyMultipleSelection;
+}
+export declare const Toolbar: ({ activeItemIndex: activeItemIndexProp, defaultActiveItemIndex, children, className: classNameProp, id: idProp, onActiveChange, orientation, selectionStrategy, ...props }: ToolbarProps) => JSX.Element;

package/types/toolbar/index.d.ts

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

package/types/toolbar/tabstrip-dom-utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getIndexOfSelectedTab: (container: HTMLElement | null) => number;
+export declare const getIndexOfEditedItem: (container: HTMLElement | null) => number;

package/types/toolbar/useKeyboardNavigation.d.ts

@@ -0,0 +1,29 @@
+import { orientationType } from "@vuu-ui/vuu-utils";
+import { FocusEvent, FocusEventHandler, KeyboardEvent, MouseEvent as ReactMouseEvent, MouseEventHandler, RefObject } from "react";
+export interface ContainerNavigationProps {
+    onBlur: FocusEventHandler;
+    onFocus: FocusEventHandler;
+    onMouseDownCapture: MouseEventHandler;
+    onMouseLeave: MouseEventHandler;
+}
+interface TabstripNavigationHookProps {
+    containerRef: RefObject<HTMLElement>;
+    defaultHighlightedIdx?: number;
+    highlightedIdx?: number;
+    keyBoardActivation?: "manual" | "automatic";
+    orientation: orientationType;
+    selectedIndex: number[];
+}
+interface TabstripNavigationHookResult {
+    containerProps: ContainerNavigationProps;
+    highlightedIdx: number;
+    focusItem: (itemIndex: number, immediateFocus?: boolean, withKeyboard?: boolean, delay?: number) => void;
+    focusVisible: number;
+    focusIsWithinComponent: boolean;
+    onClick: (evt: ReactMouseEvent, tabIndex: number) => void;
+    onFocus: (evt: FocusEvent<HTMLElement>) => void;
+    onKeyDown: (evt: KeyboardEvent) => void;
+    setHighlightedIdx: (highlightedIndex: number) => void;
+}
+export declare const useKeyboardNavigation: ({ containerRef, defaultHighlightedIdx, highlightedIdx: highlightedIdxProp, keyBoardActivation, orientation, selectedIndex: selectedItemIndex, }: TabstripNavigationHookProps) => TabstripNavigationHookResult;
+export {};

package/types/toolbar/useSelection.d.ts

@@ -0,0 +1,22 @@
+import { SelectionStrategy, SpecialKeyMultipleSelection } from "@vuu-ui/vuu-ui-controls";
+import { MouseEvent, RefObject } from "react";
+export interface SelectionHookProps {
+    containerRef: RefObject<HTMLElement>;
+    defaultSelected?: number[];
+    highlightedIdx: number;
+    itemQuery: string;
+    onSelectionChange?: (selectedIndices: number[]) => void;
+    selected?: number[];
+    selectionStrategy: SelectionStrategy | SpecialKeyMultipleSelection;
+}
+export interface ItemHandlers {
+    onClick?: (e: MouseEvent, itemIndex: number) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+}
+export interface SelectionHookResult {
+    activateItem: (tabIndex: number) => void;
+    itemHandlers: ItemHandlers;
+    isControlled: boolean;
+    selected: number[];
+}
+export declare const useSelection: ({ containerRef, defaultSelected, highlightedIdx, itemQuery, onSelectionChange, selected: selectedProp, selectionStrategy, }: SelectionHookProps) => SelectionHookResult;

package/types/toolbar/useToolbar.d.ts

@@ -0,0 +1,22 @@
+import type { OverflowItem, ToolbarProps } from "@vuu-ui/vuu-layout";
+import { KeyboardEvent, MouseEvent as ReactMouseEvent, RefObject } from "react";
+export interface ToolbarHookProps extends Pick<ToolbarProps, "activeItemIndex" | "defaultActiveItemIndex" | "onActiveChange">, Required<Pick<ToolbarProps, "orientation" | "selectionStrategy">> {
+    containerRef: RefObject<HTMLElement>;
+    itemQuery?: string;
+}
+export declare const useToolbar: ({ activeItemIndex: activeItemIndexProp, defaultActiveItemIndex, containerRef, itemQuery, onActiveChange, orientation, selectionStrategy, }: ToolbarHookProps) => {
+    activeItemIndex: number[];
+    focusVisible: number;
+    containerProps: {
+        onSwitchWrappedItemIntoView: (item: OverflowItem) => void;
+        onBlur: import("react").FocusEventHandler<Element>;
+        onFocus: import("react").FocusEventHandler<Element>;
+        onMouseDownCapture: import("react").MouseEventHandler<Element>;
+        onMouseLeave: import("react").MouseEventHandler<Element>;
+    };
+    itemProps: {
+        onClick: (evt: ReactMouseEvent<HTMLElement>) => void;
+        onFocus: (evt: import("react").FocusEvent<HTMLElement, Element>) => void;
+        onKeyDown: (evt: KeyboardEvent) => void;
+    };
+};

package/types/utils/pathUtils.d.ts

@@ -1,5 +1,18 @@
 import React, { ReactElement } from "react";
-import { LayoutModel } from "../layout-reducer";
+import { LayoutJSON, LayoutModel } from "../layout-reducer";
+/**
+ * This is a very specific function at the moment. It resolves a path of the form
+ * '#{componentid}.ACTIVE_CHILD'
+ * It allows a templated path to be resolved to a concrete path at runtime.
+ * The above pattern is used to identify a layout drop target. Further patterns
+ * will be added if needed.
+ */
+export declare const resolvePath: (source: ReactElement, path?: string) => string;
+/**
+ * Similar to resolvePath but operates on a JSON
+ * layout structure and returns the matching JSON node.
+ */
+export declare const resolveJSONPath: (source: LayoutJSON, path?: string) => LayoutJSON | undefined;
 export declare function followPathToParent(source: ReactElement, path: string): ReactElement | null;
 export declare function findTarget(source: LayoutModel, test: (props: any) => boolean): LayoutModel | undefined;
 export declare function containerOf(source: LayoutModel, target: LayoutModel): LayoutModel | null;

package/types/utils/propUtils.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
 import { LayoutModel } from "../layout-reducer";
-export declare const getProp: (component: LayoutModel, propName: string) => any;
+export declare const getProp: (component: LayoutModel | undefined, propName: string) => any;
 export declare const getProps: (component?: LayoutModel) => any;
 export declare const getChildProp: (container: LayoutModel) => ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;

package/types/common-types.d.ts

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