@vuu-ui/vuu-layout 4.1.0 → 5.0.0-alpha.2

package/package.json

@@ -1,30 +1,30 @@
 {
-  "version": "4.1.0",
+  "version": "5.0.0-alpha.2",
   "description": "VUU Layout Components",
   "main": "./src/index.js",
+  "type": "module",
   "author": "heswell",
   "license": "Apache-2.0",
   "scripts": {
-    "build:dev": "node ../../scripts/run-build.mjs",
     "build": "node ../../scripts/run-build-rslib.ts",
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "types": "types/index.d.ts",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.1.0",
-    "@vuu-ui/vuu-filter-types": "4.1.0"
+    "@vuu-ui/vuu-data-types": "5.0.0-alpha.2",
+    "@vuu-ui/vuu-filter-types": "5.0.0-alpha.2"
   },
   "dependencies": {
     "@salt-ds/core": "1.74.0",
     "@salt-ds/styles": "0.4.2",
     "@salt-ds/window": "0.1.2",
-    "@vuu-ui/vuu-data-react": "4.1.0",
-    "@vuu-ui/vuu-datatable": "4.1.0",
-    "@vuu-ui/vuu-filters": "4.1.0",
-    "@vuu-ui/vuu-popups": "4.1.0",
-    "@vuu-ui/vuu-table": "4.1.0",
-    "@vuu-ui/vuu-ui-controls": "4.1.0",
-    "@vuu-ui/vuu-utils": "4.1.0"
+    "@vuu-ui/vuu-data-react": "5.0.0-alpha.2",
+    "@vuu-ui/vuu-datatable": "5.0.0-alpha.2",
+    "@vuu-ui/vuu-filters": "5.0.0-alpha.2",
+    "@vuu-ui/vuu-popups": "5.0.0-alpha.2",
+    "@vuu-ui/vuu-table": "5.0.0-alpha.2",
+    "@vuu-ui/vuu-ui-controls": "5.0.0-alpha.2",
+    "@vuu-ui/vuu-utils": "5.0.0-alpha.2"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",
@@ -39,12 +39,11 @@
   ],
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
       "import": "./src/index.js",
-      "default": "./src/index.js",
-      "types": "./types/index.d.ts"
+      "default": "./src/index.js"
     }
   },
   "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/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;

package/types/src/Component.d.ts

@@ -1,6 +0,0 @@
-import React, { HTMLAttributes } from "react";
-export interface ComponentProps extends HTMLAttributes<HTMLDivElement> {
-    resizeable?: boolean;
-}
-declare const Component: React.FunctionComponent<ComponentProps>;
-export default Component;

package/types/src/LayoutContainer.d.ts

@@ -1,6 +0,0 @@
-import { HTMLAttributes } from "react";
-export interface LayoutContainerProps extends HTMLAttributes<HTMLDivElement> {
-    dropTarget?: boolean;
-    resizeable?: boolean;
-}
-export declare const LayoutContainer: import("react").ForwardRefExoticComponent<LayoutContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/debug.d.ts

@@ -1,2 +0,0 @@
-import { ReactElement } from "react";
-export declare const tree: (el: ReactElement, depth?: number) => string;

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

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

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

@@ -1,17 +0,0 @@
-import { HTMLAttributes } from "react";
-export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
-    clickToOpen?: boolean;
-    defaultOpen?: boolean;
-    inline?: boolean;
-    open?: boolean;
-    peekaboo?: boolean;
-    position?: "left" | "right" | "top" | "bottom";
-    sizeOpen?: number;
-    sizeClosed?: number;
-    toggleButton?: "start" | "end";
-}
-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/src/dock-layout/index.d.ts

@@ -1,2 +0,0 @@
-export { default as DockLayout } from "./DockLayout";
-export { default as Drawer } from "./Drawer";

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

@@ -1,143 +0,0 @@
-import { ReactElement } from "react";
-import { LayoutModel } from "@vuu-ui/vuu-utils";
-import { DragDropRect, DropPos, RelativePosition } from "./dragDropTypes";
-export declare const positionValues: {
-    north: number;
-    east: number;
-    south: number;
-    west: number;
-    header: number;
-    centre: number;
-    absolute: number;
-};
-export declare const RelativeDropPosition: {
-    AFTER: RelativePosition;
-    BEFORE: RelativePosition;
-};
-export declare const Position: Readonly<{
-    North: Readonly<{
-        offset: number;
-        valueOf: () => number;
-        toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
-        North: boolean;
-        South: boolean;
-        East: boolean;
-        West: boolean;
-        Header: boolean;
-        Centre: boolean;
-        NorthOrSouth: boolean;
-        EastOrWest: boolean;
-        NorthOrWest: boolean;
-        SouthOrEast: boolean;
-        Absolute: boolean;
-    }>;
-    East: Readonly<{
-        offset: number;
-        valueOf: () => number;
-        toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
-        North: boolean;
-        South: boolean;
-        East: boolean;
-        West: boolean;
-        Header: boolean;
-        Centre: boolean;
-        NorthOrSouth: boolean;
-        EastOrWest: boolean;
-        NorthOrWest: boolean;
-        SouthOrEast: boolean;
-        Absolute: boolean;
-    }>;
-    South: Readonly<{
-        offset: number;
-        valueOf: () => number;
-        toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
-        North: boolean;
-        South: boolean;
-        East: boolean;
-        West: boolean;
-        Header: boolean;
-        Centre: boolean;
-        NorthOrSouth: boolean;
-        EastOrWest: boolean;
-        NorthOrWest: boolean;
-        SouthOrEast: boolean;
-        Absolute: boolean;
-    }>;
-    West: Readonly<{
-        offset: number;
-        valueOf: () => number;
-        toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
-        North: boolean;
-        South: boolean;
-        East: boolean;
-        West: boolean;
-        Header: boolean;
-        Centre: boolean;
-        NorthOrSouth: boolean;
-        EastOrWest: boolean;
-        NorthOrWest: boolean;
-        SouthOrEast: boolean;
-        Absolute: boolean;
-    }>;
-    Header: Readonly<{
-        offset: number;
-        valueOf: () => number;
-        toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
-        North: boolean;
-        South: boolean;
-        East: boolean;
-        West: boolean;
-        Header: boolean;
-        Centre: boolean;
-        NorthOrSouth: boolean;
-        EastOrWest: boolean;
-        NorthOrWest: boolean;
-        SouthOrEast: boolean;
-        Absolute: boolean;
-    }>;
-    Centre: Readonly<{
-        offset: number;
-        valueOf: () => number;
-        toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
-        North: boolean;
-        South: boolean;
-        East: boolean;
-        West: boolean;
-        Header: boolean;
-        Centre: boolean;
-        NorthOrSouth: boolean;
-        EastOrWest: boolean;
-        NorthOrWest: boolean;
-        SouthOrEast: boolean;
-        Absolute: boolean;
-    }>;
-    Absolute: Readonly<{
-        offset: number;
-        valueOf: () => number;
-        toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
-        North: boolean;
-        South: boolean;
-        East: boolean;
-        West: boolean;
-        Header: boolean;
-        Centre: boolean;
-        NorthOrSouth: boolean;
-        EastOrWest: boolean;
-        NorthOrWest: boolean;
-        SouthOrEast: boolean;
-        Absolute: boolean;
-    }>;
-}>;
-export interface Measurements {
-    [key: string]: DragDropRect;
-}
-export declare class BoxModel {
-    static measure(model: ReactElement, dropTargetPaths?: string[]): Measurements;
-    static allBoxesContainingPoint(layout: LayoutModel, measurements: Measurements, x: number, y: number, validDropTargets?: string[]): LayoutModel[];
-}
-export declare function pointPositionWithinRect(x: number, y: number, rect: DragDropRect, borderZone?: number): {
-    pctX: number;
-    pctY: number;
-    closeToTheEdge: number;
-};
-export declare function getPosition(x: number, y: number, rect: DragDropRect, targetOrientation?: "row" | "column"): DropPos;

package/types/src/drag-drop/DragState.d.ts

@@ -1,46 +0,0 @@
-import { DragDropRect } from './dragDropTypes';
-export type IntrinsicSizes = {
-    height?: number;
-    width?: number;
-};
-interface ZoneRange {
-    hi: number;
-    lo: number;
-}
-type DragConstraint = {
-    zone: {
-        x: ZoneRange;
-        y: ZoneRange;
-    };
-    pos: {
-        x: ZoneRange;
-        y: ZoneRange;
-    };
-    mouse: {
-        x: ZoneRange;
-        y: ZoneRange;
-    };
-};
-interface ExtendedZoneRange {
-    lo: boolean;
-    hi: boolean;
-    mousePct: number;
-    mousePos: number;
-    pos: number;
-}
-export declare class DragState {
-    constraint: DragConstraint;
-    x: ExtendedZoneRange;
-    y: ExtendedZoneRange;
-    intrinsicSize: IntrinsicSizes | undefined;
-    constructor(zone: DragDropRect, mouseX: number, mouseY: number, measurements: DragDropRect, intrinsicSize?: IntrinsicSizes);
-    init(zone: DragDropRect, mouseX: number, mouseY: number, rect: DragDropRect, intrinsicSize?: IntrinsicSizes): void;
-    outOfBounds(): boolean;
-    inBounds(): boolean;
-    dropX(): number;
-    dropY(): number;
-    hasIntrinsicSize(): number | undefined;
-    update(xy: 'x' | 'y', mousePos: number): boolean;
-    private dropXY;
-}
-export {};

package/types/src/drag-drop/Draggable.d.ts

@@ -1,24 +0,0 @@
-import { rect } from "@vuu-ui/vuu-utils";
-import { ReactElement } from "react";
-import { IntrinsicSizes } from "./DragState";
-import { DropTarget } from "./DropTarget";
-export type DragStartCallback = (e: MouseEvent, x: number, y: number) => void;
-export type DragMoveCallback = (x: number | undefined, y: number | undefined) => void;
-export type DragEndCallback = (droppedTarget?: Partial<DropTarget>) => void;
-export type DragInstructions = {
-    DoNotRemove?: boolean;
-    DoNotTransform?: boolean;
-    dragThreshold?: number;
-    DriftHomeIfNoDropTarget?: boolean;
-    RemoveDraggableOnDragEnd?: boolean;
-};
-export declare const Draggable: {
-    handleMousedown(e: MouseEvent, dragStartCallback: DragStartCallback, dragInstructions?: DragInstructions): void;
-    initDrag(rootContainer: ReactElement, dragContainerPath: string, { top, left, right, bottom }: rect, dragPos: {
-        x: number;
-        y: number;
-    }, dragHandler: {
-        drag: DragMoveCallback;
-        drop: DragEndCallback;
-    }, intrinsicSize?: IntrinsicSizes, dropTargets?: string[]): string;
-};