@vuu-ui/vuu-layout 3.3.11 → 4.0.0-alpha.2

package/package.json

@@ -1,7 +1,8 @@
 {
-  "version": "3.3.11",
+  "version": "4.0.0-alpha.2",
   "description": "VUU Layout Components",
   "main": "./src/index.js",
+  "type": "module",
   "author": "heswell",
   "license": "Apache-2.0",
   "scripts": {
@@ -11,20 +12,20 @@
   },
   "types": "types/index.d.ts",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "3.3.11",
-    "@vuu-ui/vuu-filter-types": "3.3.11"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.2",
+    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.2"
   },
   "dependencies": {
-    "@salt-ds/core": "1.54.1",
+    "@salt-ds/core": "1.67.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-react": "3.3.11",
-    "@vuu-ui/vuu-datatable": "3.3.11",
-    "@vuu-ui/vuu-filters": "3.3.11",
-    "@vuu-ui/vuu-popups": "3.3.11",
-    "@vuu-ui/vuu-table": "3.3.11",
-    "@vuu-ui/vuu-ui-controls": "3.3.11",
-    "@vuu-ui/vuu-utils": "3.3.11"
+    "@vuu-ui/vuu-data-react": "4.0.0-alpha.2",
+    "@vuu-ui/vuu-datatable": "4.0.0-alpha.2",
+    "@vuu-ui/vuu-filters": "4.0.0-alpha.2",
+    "@vuu-ui/vuu-popups": "4.0.0-alpha.2",
+    "@vuu-ui/vuu-table": "4.0.0-alpha.2",
+    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.2",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.2"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",
@@ -44,6 +45,5 @@
     }
   },
   "module": "./src/index.js",
-  "name": "@vuu-ui/vuu-layout",
-  "type": "module"
+  "name": "@vuu-ui/vuu-layout"
 }

package/src/tools/config-wrapper/ConfigWrapper.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import react, { useState } from "react";
-import { LayoutConfigurator, LayoutTreeViewer } from "../index.js";
+import { LayoutConfigurator } from "../devtools-box/layout-configurator.js";
+import { LayoutTreeViewer } from "../devtools-tree/layout-tree-viewer.js";
 import { followPathToComponent } from "../../index.js";
 const ConfigWrapper = ({ children })=>{
     const designMode = false;

package/src/tools/devtools-box/layout-configurator.js

@@ -0,0 +1,293 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FormField, Input } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import layout_configurator from "./layout-configurator.css";
+const NO_STYLE = {};
+const DIMENSIONS = {
+    margin: {
+        top: "marginTop",
+        right: "marginRight",
+        bottom: "marginBottom",
+        left: "marginLeft"
+    },
+    border: {
+        top: "borderTopWidth",
+        right: "borderRightWidth",
+        bottom: "borderBottomWidth",
+        left: "borderLeftWidth"
+    },
+    padding: {
+        top: "paddingTop",
+        right: "paddingRight",
+        bottom: "paddingBottom",
+        left: "paddingLeft"
+    }
+};
+const LayoutBox = ({ feature, children, style, onChange })=>/*#__PURE__*/ jsxs("div", {
+        className: `LayoutBox layout-${feature} layout-outer`,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "layout-top",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "layout-title",
+                        children: feature
+                    }),
+                    /*#__PURE__*/ jsx(FormField, {
+                        className: "layout-input",
+                        style: {
+                            width: 30
+                        },
+                        children: /*#__PURE__*/ jsx(Input, {
+                            value: style.top,
+                            onChange: (evt, value)=>onChange(feature, "top", value)
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "layout-inner",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "layout-left",
+                        children: /*#__PURE__*/ jsx(FormField, {
+                            className: "layout-input",
+                            style: {
+                                width: 30
+                            },
+                            children: /*#__PURE__*/ jsx(Input, {
+                                value: style.left,
+                                onChange: (evt, value)=>onChange(feature, "left", value)
+                            })
+                        })
+                    }),
+                    children,
+                    /*#__PURE__*/ jsx("div", {
+                        className: "layout-right",
+                        children: /*#__PURE__*/ jsx(FormField, {
+                            className: "layout-input",
+                            style: {
+                                width: 30
+                            },
+                            children: /*#__PURE__*/ jsx(Input, {
+                                value: style.right,
+                                onChange: (evt, value)=>onChange(feature, "right", value)
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "layout-bottom",
+                children: /*#__PURE__*/ jsx(FormField, {
+                    className: "layout-input",
+                    style: {
+                        width: 30
+                    },
+                    children: /*#__PURE__*/ jsx(Input, {
+                        value: style.bottom,
+                        onChange: (evt, value)=>onChange(feature, "bottom", value)
+                    })
+                })
+            })
+        ]
+    });
+const MARGIN_STYLES = {
+    margin: true,
+    marginTop: true,
+    marginRight: true,
+    marginBottom: true,
+    marginLeft: true
+};
+const PADDING_STYLES = {
+    padding: true,
+    paddingTop: true,
+    paddingRight: true,
+    paddingBottom: true,
+    paddingLeft: true
+};
+const BORDER_STYLES = {
+    border: true,
+    borderColor: true,
+    borderWidth: true,
+    borderTopWidth: true,
+    borderRightWidth: true,
+    borderBottomWidth: true,
+    borderLeftWidth: true
+};
+const CSS_DIGIT = "(\\d+)(?:px)?";
+const CSS_MEASURE = `^(?:${CSS_DIGIT}(?:\\s${CSS_DIGIT}(?:\\s${CSS_DIGIT}(?:\\s${CSS_DIGIT})?)?)?)$`;
+const CSS_REX = new RegExp(CSS_MEASURE);
+const BORDER_REX = /^(?:(\d+)(?:px)\ssolid\s([a-zA-Z,0-9().]+))$/;
+const LayoutConfigurator = ({ height, managedStyle, onChange, style, width })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-layout-configurator",
+        css: layout_configurator,
+        window: targetWindow
+    });
+    const state = normalizeStyle(managedStyle);
+    const handleChange = (feature, dimension, strValue)=>{
+        const value = parseInt(strValue || "0", 10);
+        const property = DIMENSIONS[feature][dimension];
+        onChange(property, value);
+    };
+    const { marginTop: mt = 0, marginRight: mr = 0, marginBottom: mb = 0, marginLeft: ml = 0 } = state;
+    const { borderTopWidth: bt = 0, borderRightWidth: br = 0, borderBottomWidth: bb = 0, borderLeftWidth: bl = 0 } = state;
+    const { paddingTop: pt = 0, paddingRight: pr = 0, paddingBottom: pb = 0, paddingLeft: pl = 0 } = state;
+    return /*#__PURE__*/ jsx("div", {
+        className: "LayoutConfigurator",
+        style: {
+            width,
+            height,
+            ...style
+        },
+        children: /*#__PURE__*/ jsx(LayoutBox, {
+            feature: "margin",
+            style: {
+                top: mt,
+                right: mr,
+                bottom: mb,
+                left: ml
+            },
+            onChange: handleChange,
+            children: /*#__PURE__*/ jsx(LayoutBox, {
+                feature: "border",
+                style: {
+                    top: bt,
+                    right: br,
+                    bottom: bb,
+                    left: bl
+                },
+                onChange: handleChange,
+                children: /*#__PURE__*/ jsx(LayoutBox, {
+                    feature: "padding",
+                    style: {
+                        top: pt,
+                        right: pr,
+                        bottom: pb,
+                        left: pl
+                    },
+                    onChange: handleChange,
+                    children: /*#__PURE__*/ jsx("div", {
+                        className: "layout-content"
+                    })
+                })
+            })
+        })
+    });
+};
+function XXXnormalizeStyles(layoutStyle = NO_STYLE, visualStyle = NO_STYLE) {
+    const { margin, marginTop, marginRight, marginBottom, marginLeft, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, ...style } = layoutStyle;
+    if ("number" == typeof margin) style.marginTop = style.marginRight = style.marginBottom = style.marginLeft = margin;
+    else if ("string" == typeof margin) {
+        const match = CSS_REX.exec(margin);
+        if (null === match) console.error(`Invalid css value for margin '${margin}'`);
+        else {
+            const [, pos1, pos2, pos3, pos4] = match;
+            const pos123 = pos1 && pos2 && pos3;
+            if (pos123 && pos4) {
+                style.marginTop = parseInt(pos1, 10);
+                style.marginRight = parseInt(pos2, 10);
+                style.marginBottom = parseInt(pos3, 10);
+                style.marginLeft = parseInt(pos4, 10);
+            } else if (pos123) {
+                style.marginTop = parseInt(pos1, 10);
+                style.marginRight = style.marginLeft = parseInt(pos2, 10);
+                style.marginBottom = parseInt(pos3, 10);
+            } else if (pos1 && pos2) {
+                style.marginTop = style.marginBottom = parseInt(pos1, 10);
+                style.marginRight = style.marginLeft = parseInt(pos2, 10);
+            } else style.marginTop = style.marginRight = style.marginBottom = style.marginLeft = parseInt(pos1, 10);
+        }
+    }
+    if ("number" == typeof marginTop) style.marginTop = marginTop;
+    if ("number" == typeof marginRight) style.marginRight = marginRight;
+    if ("number" == typeof marginBottom) style.marginBottom = marginBottom;
+    if ("number" == typeof marginLeft) style.marginLeft = marginLeft;
+    if ("number" == typeof padding) style.paddingTop = style.paddingRight = style.paddingBottom = style.paddingLeft = padding;
+    else if ("string" == typeof padding) {
+        const match = CSS_REX.exec(padding);
+        if (null === match) console.error(`Invalid css value for padding '${padding}'`);
+        else {
+            const [, pos1, pos2, pos3, pos4] = match;
+            const pos123 = pos1 && pos2 && pos3;
+            if (pos123 && pos4) {
+                style.paddingTop = parseInt(pos1, 10);
+                style.paddingRight = parseInt(pos2, 10);
+                style.paddingBottom = parseInt(pos3, 10);
+                style.paddingLeft = parseInt(pos4, 10);
+            } else if (pos123) {
+                style.paddingTop = parseInt(pos1, 10);
+                style.paddingRight = style.paddingLeft = parseInt(pos2, 10);
+                style.paddingBottom = parseInt(pos3, 10);
+            } else if (pos1 && pos2) {
+                style.paddingTop = style.paddingBottom = parseInt(pos1, 10);
+                style.paddingRight = style.paddingLeft = parseInt(pos2, 10);
+            } else style.paddingTop = style.paddingRight = style.paddingBottom = style.paddinggLeft = parseInt(pos1, 10);
+        }
+    }
+    if ("number" == typeof paddingTop) style.paddingTop = paddingTop;
+    if ("number" == typeof paddingRight) style.paddingRight = paddingRight;
+    if ("number" == typeof paddingBottom) style.paddingBottom = paddingBottom;
+    if ("number" == typeof paddingLeft) style.paddingLeft = paddingLeft;
+    return normalizeStyle(style);
+}
+function normalizeStyle(managedStyle = NO_STYLE) {
+    const style = {
+        ...managedStyle
+    };
+    let match;
+    let { border, borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderColor, margin, marginTop, marginRight, marginBottom, marginLeft, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, ...rest } = style;
+    let marginStyles = {};
+    let paddingStyles = {};
+    if ("number" == typeof margin) {
+        style.marginTop = style.marginRight = style.marginBottom = style.marginLeft = margin;
+        marginStyles = {
+            marginTop: margin,
+            marginRight: margin,
+            marginBottom: margin,
+            marginLeft: margin
+        };
+    }
+    if ("number" == typeof padding) {
+        style.paddingTop = style.paddingRight = style.paddingBottom = style.paddingLeft = padding;
+        paddingStyles = {
+            paddingTop: padding,
+            paddingRight: padding,
+            paddingBottom: padding,
+            paddingLeft: padding
+        };
+    }
+    if (!border && !borderWidth && !borderTopWidth && !borderRightWidth && !borderBottomWidth && !borderLeftWidth) return style;
+    {
+        if ("string" == typeof border && (match = BORDER_REX.exec(border))) {
+            [, borderWidth, borderColor] = match;
+            borderWidth = parseInt(borderWidth, 10);
+        }
+        if (borderWidth) {
+            borderTopWidth = void 0 === borderTopWidth ? borderWidth : borderTopWidth;
+            borderRightWidth = void 0 === borderRightWidth ? borderWidth : borderRightWidth;
+            borderBottomWidth = void 0 === borderBottomWidth ? borderWidth : borderBottomWidth;
+            borderLeftWidth = void 0 === borderLeftWidth ? borderWidth : borderLeftWidth;
+        }
+        borderColor = borderColor || "black";
+        const boxShadow = `
+                ${borderColor} ${borderLeftWidth || 0}px ${borderTopWidth || 0}px 0 0 inset,
+                ${borderColor} ${-borderRightWidth || 0}px ${-borderBottomWidth || 0}px 0 0 inset`;
+        return {
+            ...rest,
+            ...marginStyles,
+            ...paddingStyles,
+            borderTopWidth,
+            borderRightWidth,
+            borderBottomWidth,
+            borderLeftWidth,
+            borderColor,
+            borderStyle: "solid",
+            boxShadow
+        };
+    }
+}
+export { BORDER_STYLES, LayoutConfigurator, MARGIN_STYLES, PADDING_STYLES, XXXnormalizeStyles };

package/src/tools/devtools-tree/layout-tree-viewer.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { typeOf } from "../../utils/index.js";
+import layout_tree_viewer from "./layout-tree-viewer.css";
+import { TreeTable } from "@vuu-ui/vuu-datatable";
+const classBaseTree = "hwLayoutTreeViewer";
+const toTreeJson = (component, path = "0")=>({
+        label: typeOf(component),
+        path,
+        childNodes: react.Children.map(component.props.children, (child, i)=>toTreeJson(child, path ? `${path}.${i}` : `${i}`))
+    });
+const LayoutTreeViewer = ({ layout, onSelect: _, style })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-layout-tree-viewer",
+        css: layout_tree_viewer,
+        window: targetWindow
+    });
+    const treeJson = [
+        toTreeJson(layout)
+    ];
+    const handleSelection = (row)=>{
+        console.log({
+            row
+        });
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: clsx(classBaseTree),
+        style: style,
+        children: /*#__PURE__*/ jsx(TreeTable, {
+            source: treeJson,
+            selectionModel: "single",
+            onSelect: handleSelection
+        })
+    });
+};
+export { LayoutTreeViewer };

package/types/dock-layout/DockLayout.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from "react";
 export type DockLayoutProps = HTMLAttributes<HTMLDivElement>;
-declare const DockLayout: {
-    (props: DockLayoutProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function DockLayout(props: DockLayoutProps): import("react").JSX.Element;
+declare namespace DockLayout {
+    var displayName: string;
+}
 export default DockLayout;

package/types/dock-layout/Drawer.d.ts

@@ -10,8 +10,8 @@ export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
     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): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Drawer({ children, className: classNameProp, clickToOpen, defaultOpen, sizeOpen, sizeClosed, style: styleProp, open: openProp, position, inline, onClick, peekaboo, toggleButton, ...props }: DrawerProps): import("react").JSX.Element;
+declare namespace Drawer {
+    var displayName: string;
+}
 export default Drawer;

package/types/drag-drop/BoxModel.d.ts

@@ -1,6 +1,6 @@
-import { ReactElement } from "react";
-import { LayoutModel } from "@vuu-ui/vuu-utils";
-import { DragDropRect, DropPos, RelativePosition } from "./dragDropTypes";
+import type { ReactElement } from "react";
+import { type LayoutModel } from "@vuu-ui/vuu-utils";
+import type { DragDropRect, DropPos, RelativePosition } from "./dragDropTypes";
 export declare const positionValues: {
     north: number;
     east: number;
@@ -18,7 +18,7 @@ export declare const Position: Readonly<{
     North: Readonly<{
         offset: number;
         valueOf: () => number;
-        toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
+        toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
         North: boolean;
         South: boolean;
         East: boolean;
@@ -34,7 +34,7 @@ export declare const Position: Readonly<{
     East: Readonly<{
         offset: number;
         valueOf: () => number;
-        toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
+        toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
         North: boolean;
         South: boolean;
         East: boolean;
@@ -50,7 +50,7 @@ export declare const Position: Readonly<{
     South: Readonly<{
         offset: number;
         valueOf: () => number;
-        toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
+        toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
         North: boolean;
         South: boolean;
         East: boolean;
@@ -66,7 +66,7 @@ export declare const Position: Readonly<{
     West: Readonly<{
         offset: number;
         valueOf: () => number;
-        toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
+        toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
         North: boolean;
         South: boolean;
         East: boolean;
@@ -82,7 +82,7 @@ export declare const Position: Readonly<{
     Header: Readonly<{
         offset: number;
         valueOf: () => number;
-        toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
+        toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
         North: boolean;
         South: boolean;
         East: boolean;
@@ -98,7 +98,7 @@ export declare const Position: Readonly<{
     Centre: Readonly<{
         offset: number;
         valueOf: () => number;
-        toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
+        toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
         North: boolean;
         South: boolean;
         East: boolean;
@@ -114,7 +114,7 @@ export declare const Position: Readonly<{
     Absolute: Readonly<{
         offset: number;
         valueOf: () => number;
-        toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
+        toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
         North: boolean;
         South: boolean;
         East: boolean;

package/types/flexbox/FlexboxLayout.d.ts

@@ -1,5 +1,5 @@
 import { FlexboxLayoutProps } from "./flexboxTypes";
-export declare const FlexboxLayout: {
-    (props: FlexboxLayoutProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare function FlexboxLayout(props: FlexboxLayoutProps): import("react").JSX.Element;
+export declare namespace FlexboxLayout {
+    var displayName: string;
+}

package/types/flexbox/Splitter.d.ts

@@ -9,4 +9,4 @@ export interface SplitterProps extends Omit<HTMLAttributes<HTMLDivElement>, "onD
     onDrag: SplitterDragHandler;
     onDragEnd: SplitterDragEndHandler;
 }
-export declare const Splitter: React.NamedExoticComponent<SplitterProps>;
+export declare const Splitter: React.MemoExoticComponent<({ column, index, onDrag, onDragEnd, onDragStart, style, }: SplitterProps) => React.JSX.Element>;

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

@@ -4,5 +4,5 @@ export interface ActionButtonProps extends Omit<HTMLAttributes<HTMLButtonElement
     iconName?: string;
     onClick: (evt: MouseEvent, actionId: "maximize" | "minimize" | "restore" | "tearout") => void;
 }
-declare const ActionButton: ({ actionId, className, iconName, onClick, ...props }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const ActionButton: ({ actionId, className, iconName, onClick, ...props }: ActionButtonProps) => import("react").JSX.Element;
 export default ActionButton;

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

@@ -12,4 +12,4 @@ export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
     orientation?: "horizontal" | "vertical";
     tearOut?: boolean;
 }
-export declare const Header: ({ allowRename, className: classNameProp, contributions, collapsed, closeable, onCollapse, onEditTitle, onExpand, orientation: orientationProp, style, title, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Header: ({ allowRename, className: classNameProp, contributions, collapsed, closeable, onCollapse, onEditTitle, onExpand, orientation: orientationProp, style, title, }: HeaderProps) => import("react").JSX.Element;

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

@@ -8,7 +8,7 @@ export interface LayoutProviderProps {
     workspaceJSON?: LayoutJSON | LayoutJSON[];
     onLayoutChange?: LayoutChangeHandler;
 }
-export declare const LayoutProviderVersion: () => import("react/jsx-runtime").JSX.Element;
+export declare const LayoutProviderVersion: () => import("react").JSX.Element;
 export declare const LayoutProvider: (props: LayoutProviderProps) => ReactElement;
 export declare const useLayoutProviderDispatch: () => LayoutProviderDispatch;
 export declare const useLayoutOperation: () => {

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

@@ -7,7 +7,7 @@ interface ComponentWithId {
     [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 declare const applyLayoutProps: (component: ReactElement, path?: string) => ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export interface LayoutProps extends ComponentWithId {
     active?: number;
     "data-path"?: string;

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

@@ -1,3 +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>>;
+export declare function removeChild(layoutRoot: ReactElement, { path }: RemoveAction): ReactElement<unknown, string | React.JSXElementConstructor<any>>;

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

@@ -1,6 +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 replaceChild(model: ReactElement, { target, replacement }: ReplaceAction): ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function _replaceChild(model: ReactElement, child: ReactElement, replacement: ReactElement<LayoutProps>): 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

@@ -1,4 +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>>;
+export declare function resizeFlexChild(layoutRoot: ReactElement, { path, size }: LayoutResizeAction): ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function resizeFlexChildren(layoutRoot: ReactElement, { path, sizes }: SplitterResizeAction): ReactElement<unknown, string | React.JSXElementConstructor<any>>;

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

@@ -9,7 +9,7 @@ export interface ViewHookProps {
 }
 export declare const useView: ({ id, rootRef, path, dropTargets, title: titleProp, }: ViewHookProps) => {
     contributions: import("./viewTypes").Contribution[] | undefined;
-    dispatchViewAction: import("../layout-view-actions/ViewContext").ViewDispatch;
+    dispatchViewAction: import("..").ViewDispatch;
     load: (key?: string) => any;
     onConfigChange: ConfigChangeHandler;
     onEditTitle: (title: string) => void;

package/types/palette/Palette.d.ts

@@ -10,7 +10,7 @@ export interface PaletteItemProps extends OptionProps {
     component: ReactElement;
     idx?: number;
 }
-export declare const PaletteItem: import("react").MemoExoticComponent<({ className, component, idx, key, value, ViewProps, ...props }: PaletteItemProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const PaletteItem: import("react").MemoExoticComponent<({ className, component, idx, key, value, ViewProps, ...props }: PaletteItemProps) => import("react").JSX.Element>;
 export interface PaletteProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDragStart" | "onDrop" | "onSelect"> {
     ListBoxProps?: Partial<ListBoxProps>;
     ViewProps?: Partial<ViewProps>;
@@ -18,4 +18,4 @@ export interface PaletteProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDr
     orientation: "horizontal" | "vertical";
     selection?: string;
 }
-export declare const Palette: ({ ListBoxProps, ViewProps, children, className, orientation, ...props }: PaletteProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Palette: ({ ListBoxProps, ViewProps, children, className, orientation, ...props }: PaletteProps) => import("react").JSX.Element;

package/types/placeholder/LayoutStartPanel.d.ts

@@ -2,4 +2,4 @@ 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;
+export declare const LayoutStartPanel: (htmlAttributes: LayoutStartPanelProps) => import("react").JSX.Element | null;

package/types/placeholder/Placeholder.d.ts

@@ -10,7 +10,7 @@ export interface PlaceholderProps extends ViewProps {
      */
     shim?: boolean;
 }
-export declare const Placeholder: {
-    ({ className: classNameProp, showStartMenu, ...viewProps }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare function Placeholder({ className: classNameProp, showStartMenu, ...viewProps }: PlaceholderProps): import("react").JSX.Element;
+export declare namespace Placeholder {
+    var displayName: string;
+}

package/types/stack/StackLayout.d.ts

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

package/types/tabs/TabPanel.d.ts

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

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

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

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

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

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

@@ -1,5 +1,6 @@
-export function LayoutTreeViewer({ layout, onSelect: _, style }: {
+import React from "react";
+export declare const LayoutTreeViewer: ({ layout, onSelect: _, style }: {
     layout: any;
     onSelect: any;
     style: any;
-}): import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;

package/types/utils/pathUtils.d.ts

@@ -17,7 +17,7 @@ export declare function followPathToParent(source: ReactElement, path: string):
 export declare function findTarget(source: LayoutModel | undefined, test: (props: any) => boolean): LayoutModel | undefined;
 export declare function containerOf(source: LayoutModel, target: LayoutModel): LayoutModel | null;
 export declare const getChild: (children: ReactElement[], idx: number) => ReactElement | undefined;
-export declare function followPathToComponent(component: ReactElement, path: string): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
+export declare function followPathToComponent(component: ReactElement, path: string): ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
 export declare function followPath(source: LayoutModel, path: string): LayoutModel | undefined;
 export declare function followPath(source: ReactElement, path: string, throwIfNotFound: true): ReactElement;
 export declare function nextLeaf(root: ReactElement, path: string): any;