@vuu-ui/vuu-layout 2.1.18 → 2.1.19-beta.2

package/src/utils/pathUtils.js

@@ -0,0 +1,212 @@
+import { isContainer } from "@vuu-ui/vuu-utils";
+import react, { isValidElement } from "react";
+import { getProp, getProps } from "./propUtils.js";
+import { typeOf } from "./typeOf.js";
+const removeFinalPathSegment = (path)=>{
+    const pos = path.lastIndexOf(".");
+    if (-1 === pos) return path;
+    return path.slice(0, pos);
+};
+const getChildren = (c)=>react.isValidElement(c.props.children) ? [
+        c.props.children
+    ] : c.props.children;
+const resolvePath = (source, path = "")=>{
+    const [step1, ...steps] = path.split(".");
+    if (step1?.startsWith("#")) {
+        const node = findTargetById(source, step1.slice(1), true);
+        if (node && steps.length) return resolvePath(node, steps.join("."));
+    } else if ("ACTIVE_CHILD" === step1) {
+        const { active } = getProps(source);
+        const children = getChildren(source);
+        const { path } = getProps(children[active]);
+        return path;
+    }
+    return "";
+};
+const resolveJSONPath = (source, path = "")=>{
+    const [step1, ...steps] = path.split(".");
+    if (step1?.startsWith("#")) {
+        const node = findTargetJSONById(source, step1.slice(1), true);
+        if (node && steps.length) return resolveJSONPath(node, steps.join("."));
+    } else if ("ACTIVE_CHILD" === step1) {
+        const { children, props } = source;
+        const { active } = props;
+        if ("number" == typeof active && children?.[active]) return children[active];
+    }
+};
+function followPathToParent(source, path) {
+    const { "data-path": dataPath, path: sourcePath = dataPath } = getProps(source);
+    if ("0" === path) return null;
+    if (path === sourcePath) return null;
+    return followPath(source, removeFinalPathSegment(path), true);
+}
+function findTarget(source, test) {
+    if (source) {
+        const { children, ...props } = getProps(source);
+        if (test(props)) return source;
+        if (react.Children.count(children) > 0) {
+            const array = react.isValidElement(children) ? [
+                children
+            ] : children;
+            for (const child of array){
+                const target = findTarget(child, test);
+                if (target) return target;
+            }
+        }
+    }
+}
+function containerOf(source, target) {
+    if (target === source) return null;
+    const { path: sourcePath, children } = getProps(source);
+    const { idx, finalStep } = pathUtils_nextStep(sourcePath, getProp(target, "path"));
+    if (finalStep) return source;
+    if (void 0 === children || void 0 === children[idx]) return null;
+    return containerOf(children[idx], target);
+}
+const getChild = (children, idx)=>{
+    if (react.isValidElement(children) && 0 == idx) return children;
+    if (Array.isArray(children)) return children[idx];
+};
+function followPathToComponent(component, path) {
+    const paths = path.split(".");
+    let children = [
+        component
+    ];
+    for(let i = 0; i < paths.length; i++){
+        const idx = parseInt(paths[i]);
+        const child = children[idx];
+        if (i === paths.length - 1) return child;
+        children = getChildren(child);
+    }
+}
+const findTargetById = (source, id, throwIfNotFound = true)=>{
+    const { children, id: idProp } = source.props;
+    if (idProp === id) return source;
+    if (react.Children.count(children) > 0) {
+        const childArray = isValidElement(children) ? [
+            children
+        ] : children;
+        for (const child of childArray)if (isValidElement(child)) {
+            const target = findTargetById(child, id, false);
+            if (target) return target;
+        }
+    }
+    if (true === throwIfNotFound) throw Error(`pathUtils.findTargetById id #${id} not found in source`);
+};
+const findTargetJSONById = (source, id, throwIfNotFound = true)=>{
+    const { children, id: idProp } = source;
+    if (idProp === id) return source;
+    if (Array.isArray(children) && children.length > 0) {
+        for (const child of children)if (null !== child && "object" == typeof child) {
+            const target = findTargetJSONById(child, id, false);
+            if (target) return target;
+        }
+    }
+    if (true === throwIfNotFound) throw Error(`pathUtils.findTargetJSONById id #${id} not found in source`);
+};
+function followPath(source, path, throwIfNotFound = false) {
+    if (path.startsWith("#")) return findTargetById(source, path.slice(1), throwIfNotFound);
+    const { "data-path": dataPath, path: sourcePath = dataPath } = getProps(source);
+    if (0 !== path.indexOf(sourcePath)) throw Error(`pathUtils.followPath path ${path} is not within source path ${sourcePath}`);
+    const route = path.slice(sourcePath.length + 1);
+    if ("" === route) return source;
+    let target = source;
+    const paths = route.split(".");
+    for(let i = 0; i < paths.length; i++){
+        if (0 === react.Children.count(target.props.children)) {
+            const message = `element at 0.${paths.slice(0, i).join(".")} has no children, so cannot fulfill rest of path ${paths.slice(i).join(".")}`;
+            if (!throwIfNotFound) return void console.warn(message);
+            throw Error(message);
+        }
+        target = getChild(target.props.children, parseInt(paths[i]));
+        if (void 0 === target) {
+            const message = `model at 0.${paths.slice(0, i).join(".")} has no children that fulfill next step of path ${paths.slice(i).join(".")}`;
+            if (throwIfNotFound) throw Error(message);
+            console.warn(message);
+        }
+    }
+    return target;
+}
+function nextLeaf(root, path) {
+    const parent = followPathToParent(root, path);
+    let pathIndices = path.split(".").map((idx)=>parseInt(idx, 10));
+    if (parent) {
+        const lastIdx = pathIndices.pop();
+        const { children } = parent.props;
+        if (children.length - 1 > lastIdx) return firstLeaf(children[lastIdx + 1]);
+        {
+            const parentIdx = pathIndices.pop();
+            const nextParent = followPathToParent(root, getProp(parent, "path"));
+            if (nextParent && "number" == typeof parentIdx) {
+                pathIndices = nextParent.props.path.split(".").map((idx)=>parseInt(idx, 10));
+                if (nextParent.props.children.length - 1 > parentIdx) {
+                    const nextStep = nextParent.props.children[parentIdx + 1];
+                    if (isContainer(typeOf(nextStep))) return firstLeaf(nextStep);
+                    return nextStep;
+                }
+            }
+        }
+    }
+    return firstLeaf(root);
+}
+function previousLeaf(root, path) {
+    const pathIndices = path.split(".").map((idx)=>parseInt(idx, 10));
+    let lastIdx = pathIndices.pop();
+    let parent = followPathToParent(root, path);
+    if (null != parent && "number" == typeof lastIdx) {
+        const { children } = parent.props;
+        if (lastIdx > 0) return lastLeaf(children[lastIdx - 1]);
+        while(pathIndices.length > 1){
+            lastIdx = pathIndices.pop();
+            parent = followPathToParent(root, getProp(parent, "path"));
+            if (lastIdx > 0) {
+                const nextStep = parent.props.children[lastIdx - 1];
+                if (isContainer(typeOf(nextStep))) return lastLeaf(nextStep);
+                return nextStep;
+            }
+        }
+    }
+    return lastLeaf(root);
+}
+function firstLeaf(layoutRoot) {
+    if (isContainer(typeOf(layoutRoot))) {
+        const { children } = layoutRoot.props || layoutRoot;
+        return firstLeaf(children[0]);
+    }
+    return layoutRoot;
+}
+function lastLeaf(root) {
+    if (isContainer(typeOf(root))) {
+        const { children } = root.props || root;
+        return lastLeaf(children[children.length - 1]);
+    }
+    return root;
+}
+function pathUtils_nextStep(pathSoFar, targetPath, followPathToEnd = false) {
+    if (pathSoFar === targetPath) return {
+        idx: -1,
+        finalStep: true
+    };
+    const pathVisited = `${pathSoFar}.`;
+    if (!targetPath.startsWith(pathVisited)) throw Error("pathUtils nextStep has strayed from the path");
+    const endOfTheLine = followPathToEnd ? 0 : 1;
+    const paths = targetPath.replace(pathVisited, "").split(".").map((n)=>parseInt(n, 10));
+    return {
+        idx: paths[0],
+        finalStep: paths.length === endOfTheLine
+    };
+}
+function resetPath(model, path, additionalProps) {
+    if (getProp(model, "path") === path) return model;
+    const children = [];
+    react.Children.forEach(model.props.children, (child, i)=>{
+        if (getProp(child, "path")) children.push(resetPath(child, `${path}.${i}`));
+        else children.push(child);
+    });
+    const pathPropName = model.props["data-path"] ? "data-path" : "path";
+    return react.cloneElement(model, {
+        [pathPropName]: path,
+        ...additionalProps
+    }, children);
+}
+export { containerOf, findTarget, followPath, followPathToComponent, followPathToParent, getChild, nextLeaf, pathUtils_nextStep as nextStep, previousLeaf, resetPath, resolveJSONPath, resolvePath };

package/src/utils/propUtils.js

@@ -0,0 +1,15 @@
+const NO_PROPS = {};
+const getProp = (component, propName)=>{
+    const props = getProps(component);
+    return props[propName] ?? props[`data-${propName}`];
+};
+const getProps = (component)=>component?.props || component || NO_PROPS;
+const getChildProp = (container)=>{
+    const props = getProps(container);
+    if (props.children) {
+        const { children: [target, ...rest] } = props;
+        if (rest.length > 0) console.warn(`getChild expected a single child, found ${rest.length + 1}`);
+        return target;
+    }
+};
+export { getChildProp, getProp, getProps };

package/src/utils/refUtils.js

@@ -0,0 +1,5 @@
+function setRef(ref, value) {
+    if ("function" == typeof ref) ref(value);
+    else if (ref) ref.current = value;
+}
+export { setRef };

package/src/utils/styleUtils.js

@@ -0,0 +1,9 @@
+const expandFlex = (flex)=>{
+    if ('number' != typeof flex) throw Error(`"no support yet for flex value ${flex}`);
+    return {
+        flexBasis: 0,
+        flexGrow: 1,
+        flexShrink: 1
+    };
+};
+export { expandFlex };

package/src/utils/typeOf.js

@@ -0,0 +1,15 @@
+function typeOf(element) {
+    if (element) {
+        const type = element.type;
+        if ("function" == typeof type || "object" == typeof type) {
+            const elementName = type.displayName || type.name || type.type?.name;
+            if ("string" == typeof elementName) return elementName;
+        }
+        if ("string" == typeof element.type) return element.type;
+        if (element.constructor) return element.constructor.displayName;
+        throw Error("typeOf unable to determine type of element");
+    }
+}
+const isTypeOf = (element, type)=>typeOf(element) === type;
+const isLayoutJSON = (layout)=>void 0 !== layout && "type" in layout;
+export { isLayoutJSON, isTypeOf, typeOf };

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-runtime").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-runtime").JSX.Element;
+declare namespace Drawer {
+    var displayName: string;
+}
 export default Drawer;

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

@@ -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-runtime").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) => import("react/jsx-runtime").JSX.Element>;

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/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-runtime").JSX.Element;
+export declare namespace Placeholder {
+    var displayName: string;
+}

package/types/responsive/overflowUtils.d.ts

@@ -1,2 +1,2 @@
-export function getOverflowedItems(containerRef: any, height?: number): any[][];
-export function findFirstOverflow(elements: any, height: any): number;
+export declare const getOverflowedItems: (containerRef: any, height?: number) => any[][];
+export declare const findFirstOverflow: (elements: any, height: any) => number;

package/types/stack/StackLayout.d.ts

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

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-runtime").JSX.Element;
+export declare function XXXnormalizeStyles(layoutStyle?: {}, visualStyle?: {}): {};

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

@@ -1,5 +1,5 @@
-export function LayoutTreeViewer({ layout, onSelect: _, style }: {
+export declare const LayoutTreeViewer: ({ layout, onSelect: _, style }: {
     layout: any;
     onSelect: any;
     style: any;
-}): import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").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;

package/cjs/Component.js

@@ -1,14 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-
-const Component = React.forwardRef(function Component2({ resizeable, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: "Component", ref });
-});
-Component.displayName = "Component";
-vuuUtils.registerComponent("Component", Component, "component");
-
-module.exports = Component;
-//# sourceMappingURL=Component.js.map

package/cjs/Component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Component.js","sources":["../../../packages/vuu-layout/src/Component.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from \"react\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\n\nexport interface ComponentProps extends HTMLAttributes<HTMLDivElement> {\n  resizeable?: boolean;\n}\n\nconst Component = forwardRef(function Component(\n  { resizeable, ...props }: ComponentProps,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  return <div {...props} className=\"Component\" ref={ref} />;\n}) as React.FunctionComponent<ComponentProps>;\nComponent.displayName = \"Component\";\n\nexport default Component;\n\nregisterComponent(\"Component\", Component, \"component\");\n"],"names":["forwardRef","Component","registerComponent"],"mappings":";;;;;;AAOM,MAAA,SAAA,GAAYA,iBAAW,SAASC,UAAAA,CACpC,EAAE,UAAY,EAAA,GAAG,KAAM,EAAA,EACvB,GACA,EAAA;AACA,EAAA,sCAAQ,KAAK,EAAA,EAAA,GAAG,KAAO,EAAA,SAAA,EAAU,aAAY,GAAU,EAAA,CAAA;AACzD,CAAC;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;AAIxBC,0BAAkB,CAAA,WAAA,EAAa,WAAW,WAAW,CAAA;;;;"}

package/cjs/LayoutContainer.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var layoutContainerCss = ".vuuLayoutContainer {\n  display: inline-block;\n  outline: none;\n}\n\n[data-dragging=\"true\"] {\n  position: absolute !important;\n  z-index: 100;\n}\n\n.vuuSimpleDraggableWrapper {\n  background-color: white;\n  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);\n}\n.vuuSimpleDraggableWrapper > * {\n  height: 100%;\n  width: 100%;\n}\n";
-
-module.exports = layoutContainerCss;
-//# sourceMappingURL=LayoutContainer.css.js.map

package/cjs/LayoutContainer.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LayoutContainer.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/LayoutContainer.js

@@ -1,33 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var cx = require('clsx');
-var React = require('react');
-var LayoutContainer$1 = require('./LayoutContainer.css.js');
-
-const LayoutContainer = React.forwardRef(function LayoutContainer2({
-  children,
-  className: classNameProp,
-  dropTarget,
-  resizeable: _,
-  // ignore, its just a marker used by the layout system
-  ...htmlAttributes
-}, forwardedRef) {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "vuu-layout-container",
-    css: LayoutContainer$1,
-    window: targetWindow
-  });
-  const className = cx("vuuLayoutContainer", classNameProp);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, ref: forwardedRef, ...htmlAttributes, children });
-});
-const componentName = "LayoutContainer";
-LayoutContainer.displayName = componentName;
-vuuUtils.registerComponent(componentName, LayoutContainer, "container");
-
-exports.LayoutContainer = LayoutContainer;
-//# sourceMappingURL=LayoutContainer.js.map

package/cjs/LayoutContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LayoutContainer.js","sources":["../../../packages/vuu-layout/src/LayoutContainer.tsx"],"sourcesContent":["import { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\n\nimport layoutContainerCss from \"./LayoutContainer.css\";\n\nexport interface LayoutContainerProps extends HTMLAttributes<HTMLDivElement> {\n  dropTarget?: boolean;\n  resizeable?: boolean;\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const LayoutContainer = forwardRef(function LayoutContainer(\n  {\n    children,\n    className: classNameProp,\n    dropTarget,\n    resizeable: _, // ignore, its just a marker used by the layout system\n    ...htmlAttributes\n  }: LayoutContainerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-container\",\n    css: layoutContainerCss,\n    window: targetWindow,\n  });\n\n  const className = cx(\"vuuLayoutContainer\", classNameProp);\n  return (\n    <div className={className} ref={forwardedRef} {...htmlAttributes}>\n      {children}\n    </div>\n  );\n});\n\nconst componentName = \"LayoutContainer\";\n\nLayoutContainer.displayName = componentName;\n\nregisterComponent(componentName, LayoutContainer, \"container\");\n"],"names":["forwardRef","LayoutContainer","useWindow","useComponentCssInjection","layoutContainerCss","registerComponent"],"mappings":";;;;;;;;;;AAaa,MAAA,eAAA,GAAkBA,gBAAW,CAAA,SAASC,gBACjD,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,UAAA;AAAA,EACA,UAAY,EAAA,CAAA;AAAA;AAAA,EACZ,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,oBAAA,EAAsB,aAAa,CAAA;AACxD,EAAA,sCACG,KAAI,EAAA,EAAA,SAAA,EAAsB,KAAK,YAAe,EAAA,GAAG,gBAC/C,QACH,EAAA,CAAA;AAEJ,CAAC;AAED,MAAM,aAAgB,GAAA,iBAAA;AAEtB,eAAA,CAAgB,WAAc,GAAA,aAAA;AAE9BC,0BAAkB,CAAA,aAAA,EAAe,iBAAiB,WAAW,CAAA;;;;"}

package/cjs/dock-layout/DockLayout.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var dockLayoutCss = ".vuuDockLayout {\n  --chest-bg: var(--hw-chest-bg, inherit);\n  --drawer-bg: var(--hw-drawer-bg, inherit);\n  --drawer-size: var(--hw-drawer-size, 200px);\n  --drawer-peek-size: var(--hw-drawer-peek-size, 32px);\n  --drawer-transition-duration: var(--hw-drawer-transition-duration, 0.4s);\n  background-color: var(--chest-bg);\n  display: flex;\n}\n\n.vuuDockLayout-horizontal {\n  flex-direction: row;\n}\n\n.vuuDockLayout-vertical {\n  flex-direction: column;\n}\n\n.vuuDockLayout-content {\n  background-color: var(--chest-bg);\n  flex-grow: 1;\n  flex-shrink: 1;\n  overflow: hidden;\n  /* position: relative; */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vuuDockLayout-horizontal .vuuDockLayout-content {\n  flex-basis: 100%;\n}\n\n.vuuDockLayout-vertical .vuuDockLayout-content {\n  flex-basis: 100%;\n}\n";
-
-module.exports = dockLayoutCss;
-//# sourceMappingURL=DockLayout.css.js.map

package/cjs/dock-layout/DockLayout.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DockLayout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}