@vuu-ui/vuu-layout 0.5.15 → 0.5.17

package/types/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/{src/flexbox/index.ts → types/flexbox/index.d.ts}

@@ -2,4 +2,3 @@ export { default as Flexbox } from './Flexbox';
 export * from './FlexboxLayout';
 export * from './FluidGrid';
 export * from './FluidGridLayout';
-

package/types/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/flexbox/useSplitterResizing.d.ts

@@ -0,0 +1,2 @@
+import { SplitterHookProps, SplitterHookResult } from "./flexboxTypes";
+export declare const useSplitterResizing: ({ children: childrenProp, onSplitterMoved, style, }: SplitterHookProps) => SplitterHookResult;

package/{src/index.ts → types/index.d.ts}

@@ -1,4 +1,3 @@
-export * from "@vuu-ui/vuu-popups/src/dialog";
 export * from "./chest-of-drawers";
 export * from "./common-types";
 export { default as Component } from "./Component";

package/types/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/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;

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

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

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

@@ -0,0 +1,14 @@
+import { ReactElement } from "react";
+import { LayoutJSON } from "../layout-reducer";
+import { LayoutProviderDispatch } from "./LayoutProviderContext";
+declare type LayoutChangeHandler = (layout: LayoutJSON, source: string) => void;
+export interface LayoutProviderProps {
+    children: ReactElement;
+    layout?: LayoutJSON;
+    onLayoutChange?: LayoutChangeHandler;
+}
+export declare const LayoutProviderVersion: () => JSX.Element;
+export declare const LayoutProvider: (props: LayoutProviderProps) => ReactElement;
+export declare const useLayoutProviderDispatch: () => LayoutProviderDispatch;
+export declare const useLayoutProviderVersion: () => number;
+export {};

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

@@ -0,0 +1,8 @@
+import { Dispatch } from 'react';
+import { DragStartAction, LayoutReducerAction, SaveAction } from '../layout-reducer';
+export declare type LayoutProviderDispatch = Dispatch<LayoutReducerAction | SaveAction | DragStartAction>;
+export interface LayoutProviderContextProps {
+    dispatchLayoutProvider: LayoutProviderDispatch;
+    version: number;
+}
+export declare const LayoutProviderContext: import("react").Context<LayoutProviderContextProps>;

package/{src/layout-provider/index.ts → types/layout-provider/index.d.ts}

@@ -1,3 +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) => (action: DragStartAction) => void;

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

@@ -0,0 +1,22 @@
+import React, { CSSProperties, ReactElement, ReactNode } from "react";
+import { dimension, rect, rectTuple } from "../common-types";
+import { DropPos } from "../drag-drop/dragDropTypes";
+export declare type flexDirection = "row" | "column";
+declare type contraDimension = dimension;
+declare type flexDimensionTuple = [dimension, contraDimension, flexDirection];
+export declare type position = {
+    height?: number;
+    width?: number;
+};
+export declare const getFlexDimensions: (flexDirection?: flexDirection) => flexDimensionTuple;
+export declare const getIntrinsicSize: (component: ReactElement) => {
+    height?: number | undefined;
+    width?: number | undefined;
+} | 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/{src/layout-reducer/index.ts → types/layout-reducer/index.d.ts}

@@ -2,4 +2,3 @@ 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 { ReactElement } from "react";
+import { DropPos } from "../drag-drop";
+import { LayoutModel } from "./layoutTypes";
+declare type insertionPosition = "before" | "after";
+export declare function getInsertTabBeforeAfter(stack: LayoutModel, pos: DropPos): any[];
+export declare function insertIntoContainer(container: ReactElement, targetContainer: ReactElement, newComponent: 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,130 @@
+import { ReactElement } from "react";
+import { DragDropRect, DragInstructions } from "../drag-drop";
+import { DropTarget } from "../drag-drop/DropTarget";
+export interface WithProps {
+    props?: {
+        [key: string]: any;
+    };
+}
+export interface WithType {
+    props?: any;
+    title?: string;
+    type: string;
+}
+export interface LayoutRoot extends WithProps {
+    active?: number;
+    children?: ReactElement[];
+    type: string;
+}
+export interface LayoutJSON extends WithType {
+    children?: LayoutJSON[];
+    id?: string;
+    props?: {
+        [key: string]: any;
+    };
+    state?: any;
+    type: string;
+}
+export interface WithActive {
+    active?: number;
+}
+export declare type LayoutModel = LayoutRoot | ReactElement | WithType;
+export declare type layoutType = "Flexbox" | "View" | "DraggableLayout" | "Stack";
+export declare const LayoutActionType: {
+    readonly ADD: "add";
+    readonly DRAG_START: "drag-start";
+    readonly DRAG_DROP: "drag-drop";
+    readonly MAXIMIZE: "maximize";
+    readonly MINIMIZE: "minimize";
+    readonly REMOVE: "remove";
+    readonly REPLACE: "replace";
+    readonly RESTORE: "restore";
+    readonly SAVE: "save";
+    readonly SET_TITLE: "set-title";
+    readonly SPLITTER_RESIZE: "splitter-resize";
+    readonly SWITCH_TAB: "switch-tab";
+    readonly TEAROUT: "tearout";
+};
+export declare type AddAction = {
+    component: any;
+    path: string;
+    type: typeof LayoutActionType.ADD;
+};
+export declare type DragDropAction = {
+    draggedReactElement: ReactElement;
+    dragInstructions: any;
+    dropTarget: Partial<DropTarget>;
+    type: typeof LayoutActionType.DRAG_DROP;
+};
+export declare type MaximizeAction = {
+    path?: string;
+    type: typeof LayoutActionType.MAXIMIZE;
+};
+export declare type MinimizeAction = {
+    path?: string;
+    type: typeof LayoutActionType.MINIMIZE;
+};
+export declare type RemoveAction = {
+    path?: string;
+    type: typeof LayoutActionType.REMOVE;
+};
+export declare type ReplaceAction = {
+    replacement: any;
+    target: any;
+    type: typeof LayoutActionType.REPLACE;
+};
+export declare type RestoreAction = {
+    path?: string;
+    type: typeof LayoutActionType.RESTORE;
+};
+export declare type SetTitleAction = {
+    path: string;
+    title: string;
+    type: typeof LayoutActionType.SET_TITLE;
+};
+export declare type SplitterResizeAction = {
+    path: string;
+    sizes: {
+        currentSize: number;
+        flexBasis: number;
+    }[];
+    type: typeof LayoutActionType.SPLITTER_RESIZE;
+};
+export declare type SwitchTabAction = {
+    nextIdx: number;
+    path: string;
+    type: typeof LayoutActionType.SWITCH_TAB;
+};
+export declare type TearoutAction = {
+    path?: string;
+    type: typeof LayoutActionType.TEAROUT;
+};
+export declare type LayoutReducerAction = AddAction | DragDropAction | MaximizeAction | MinimizeAction | RemoveAction | ReplaceAction | RestoreAction | SetTitleAction | SplitterResizeAction | SwitchTabAction;
+export declare type SaveAction = {
+    type: typeof LayoutActionType.SAVE;
+};
+export declare type AddToolbarContributionViewAction = {
+    content: ReactElement;
+    location: string;
+    type: "add-toolbar-contribution";
+};
+export declare type RemoveToolbarContributionViewAction = {
+    location: string;
+    type: "remove-toolbar-contribution";
+};
+export declare type MousedownViewAction = {
+    preDragActivity?: any;
+    index?: number;
+    type: "mousedown";
+};
+export declare type DragStartAction = {
+    payload?: ReactElement;
+    dragContainerPath?: string;
+    dragElement?: HTMLElement;
+    dragRect: DragDropRect;
+    dropTargets?: string[];
+    evt: MouseEvent;
+    instructions?: DragInstructions;
+    path: string;
+    type: typeof LayoutActionType.DRAG_START;
+};

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

@@ -0,0 +1,28 @@
+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];
+export declare const applyLayoutProps: (component: ReactElement, path?: string) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export interface LayoutProps extends ComponentWithId {
+    active?: number;
+    "data-path"?: string;
+    children?: ReactElement[];
+    column?: any;
+    dropTarget?: any;
+    key: string;
+    layout?: any;
+    path?: string;
+    resizeable?: boolean;
+    style: CSSProperties;
+    type?: string;
+    version?: number;
+}
+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;
+export declare function layoutToJSON(component: ReactElement): LayoutJSON;
+export declare function componentToJson(component: ReactElement): LayoutJSON;
+export declare function serializeProps(props?: LayoutProps): {
+    [key: string]: any;
+} | undefined;

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<any, 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<any, string | React.JSXElementConstructor<any>>;
+export declare function _replaceChild(model: ReactElement, child: ReactElement, replacement: ReactElement<LayoutProps>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare function swapChild(model: ReactElement, child: ReactElement, replacement: ReactElement, op?: 'maximize' | 'minimize' | 'restore'): ReactElement;

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

@@ -0,0 +1,3 @@
+import React, { ReactElement } from 'react';
+import { SplitterResizeAction } from './layoutTypes';
+export declare function resizeFlexChildren(layoutRoot: ReactElement, { path, sizes }: SplitterResizeAction): React.ReactElement<any, 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: any, newComponent: any, pos: DropPos, clientRect?: DropTarget["clientRect"], dropRect?: DropTarget["dropRect"]): ReactElement;

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { ViewProps } from "./viewTypes";
+import "./View.css";
+declare const MemoView: React.FunctionComponent<ViewProps>;
+export { MemoView as View };

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

@@ -0,0 +1,18 @@
+import React, { SyntheticEvent } from "react";
+import { ViewAction } from "./viewTypes";
+export declare type ViewDispatch = <Action extends ViewAction = ViewAction>(action: Action, evt?: SyntheticEvent) => Promise<boolean | void>;
+export interface ViewContextProps {
+    dispatch?: ViewDispatch | null;
+    id?: string;
+    load?: (key?: string) => unknown;
+    loadSession?: (key?: string) => unknown;
+    onConfigChange?: (config: unknown) => void;
+    path?: string;
+    purge?: (key: string) => void;
+    save?: (state: unknown, key: string) => void;
+    saveSession?: (state: unknown, key: string) => void;
+    title?: string;
+}
+export declare const ViewContext: React.Context<ViewContextProps>;
+export declare const useViewDispatch: () => ViewDispatch | null;
+export declare const useViewContext: () => ViewContextProps;

package/{src/layout-view/index.ts → types/layout-view/index.d.ts}

@@ -2,4 +2,3 @@ export * from './useViewActionDispatcher';
 export * from './View';
 export * from './ViewContext';
 export * from './viewTypes';
-

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

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

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

@@ -0,0 +1,8 @@
+import { ReactElement, RefObject } from "react";
+import { ViewDispatch } from "./ViewContext";
+export declare type Contribution = {
+    index?: number;
+    location?: string;
+    content: ReactElement;
+};
+export declare const useViewActionDispatcher: (id: string, root: RefObject<HTMLDivElement>, viewPath?: string, dropTargets?: string[]) => [ViewDispatch, Contribution[] | undefined];

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

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

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

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from "react";
+import { HeaderProps } from "../layout-header";
+import { AddToolbarContributionViewAction, MaximizeAction, MinimizeAction, MousedownViewAction, RemoveAction, RemoveToolbarContributionViewAction, RestoreAction, TearoutAction } from "../layout-reducer";
+export declare type ViewAction = MaximizeAction | MinimizeAction | MousedownViewAction | RemoveAction | RestoreAction | TearoutAction | AddToolbarContributionViewAction | RemoveToolbarContributionViewAction;
+export interface ViewProps extends HTMLAttributes<HTMLDivElement> {
+    closeable?: boolean;
+    collapsed?: boolean;
+    "data-resizeable"?: boolean;
+    dropTargets?: string[];
+    expanded?: boolean;
+    flexFill?: any;
+    header?: boolean | Partial<HeaderProps>;
+    orientation?: "vertical" | "horizontal";
+    path?: string;
+    resize?: "defer" | "responsive";
+    resizeable?: boolean;
+    tearOut?: boolean;
+}

package/types/palette/Palette.d.ts

@@ -0,0 +1,18 @@
+import { ListItemProps } from "@heswell/salt-lab";
+import { HTMLAttributes, ReactElement } from "react";
+import "./Palette.css";
+export interface PaletteItemProps extends ListItemProps {
+    children: ReactElement;
+    closeable?: boolean;
+    header?: boolean;
+    idx?: number;
+    resize?: "defer";
+    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"> {
+    children: ReactElement[];
+    orientation: "horizontal" | "vertical";
+    selection?: string;
+}
+export declare const Palette: ({ children, className, orientation, ...props }: PaletteProps) => JSX.Element;

package/types/palette/PaletteSalt.d.ts

@@ -0,0 +1,14 @@
+import { ListItemProps, ListProps } from "@heswell/salt-lab";
+import { ReactElement } from "react";
+import "./PaletteSalt.css";
+export interface PaletteListItemProps extends ListItemProps {
+    children: ReactElement;
+    ViewProps: {
+        header?: boolean;
+        closeable?: boolean;
+        resizeable?: boolean;
+    };
+    template: boolean;
+}
+export declare const PaletteListItem: (props: PaletteListItemProps) => JSX.Element;
+export declare const PaletteSalt: ({ className, ...props }: ListProps) => JSX.Element;

package/{src/palette/index.ts → types/palette/index.d.ts}

@@ -1,3 +1,2 @@
 export * from "./Palette";
 export * from "./PaletteSalt";
-

package/types/placeholder/Placeholder.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from "react";
+import "./Placeholder.css";
+export interface PlaceholderProps extends HTMLAttributes<HTMLDivElement> {
+    closeable?: boolean;
+    flexFill?: boolean;
+    resizeable?: boolean;
+    shim?: boolean;
+}
+export declare const Placeholder: {
+    ({ className, closeable, flexFill, resizeable, shim, ...props }: PlaceholderProps): JSX.Element;
+    displayName: string;
+};

package/types/registry/ComponentRegistry.d.ts

@@ -0,0 +1,14 @@
+import { FunctionComponent } from "react";
+export declare type layoutComponentType = "component" | "container" | "view";
+export interface ComponentWithId {
+    id: string;
+    [key: string]: unknown;
+}
+export declare const ComponentRegistry: {
+    [key: string]: FunctionComponent<ComponentWithId>;
+};
+export declare function isContainer(componentType: string): boolean;
+export declare function isView(componentType: string): boolean;
+export declare const isLayoutComponent: (type: string) => boolean;
+export declare const isRegistered: (className: string) => boolean;
+export declare function registerComponent(componentName: string, component: FunctionComponent<any>, type?: layoutComponentType): void;

package/types/responsive/breakpoints.d.ts

@@ -0,0 +1,4 @@
+import { BreakPointsProp } from "../flexbox/flexboxTypes";
+export declare type BreakPointRamp = [string, number, number];
+export declare const breakpointRamp: (breakpoints: BreakPointsProp) => BreakPointRamp[];
+export declare const getBreakPoints: (themeName?: string) => BreakPointRamp[];

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/use-breakpoints.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from "react";
+import { BreakPointsProp } from "../flexbox/flexboxTypes";
+export interface BreakpointsHookProps {
+    breakPoints?: BreakPointsProp;
+    smallerThan?: string;
+}
+export declare const useBreakpoints: ({ breakPoints: breakPointsProp, smallerThan }: BreakpointsHookProps, ref: RefObject<HTMLElement>) => string | boolean;

package/types/responsive/useResizeObserver.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+export declare const WidthHeight: string[];
+export declare const HeightOnly: string[];
+export declare const WidthOnly: string[];
+export declare type measurements<T = string | number> = {
+    height?: T;
+    scrollHeight?: T;
+    scrollWidth?: T;
+    width?: T;
+};
+export declare type ResizeHandler = (measurements: measurements<number>) => void;
+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;
+declare type Props = {
+    [key: string]: any;
+};
+export declare const extractResponsiveProps: (props: Props) => [Props, Props];
+export {};

package/types/stack/Stack.d.ts

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

package/types/stack/StackLayout.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { StackProps } from "./stackTypes";
+import "./Stack.css";
+export declare const StackLayout: {
+    (props: StackProps): JSX.Element;
+    displayName: string;
+};

package/{src/stack/index.ts → types/stack/index.d.ts}

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