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

package/types/placeholder/Placeholder.d.ts

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

package/types/responsive/overflowUtils.d.ts

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

package/types/stack/StackLayout.d.ts

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

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

@@ -1,31 +1,31 @@
-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, }: {
+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, }: {
     height: any;
     managedStyle: any;
     onChange: any;
     style: any;
     width: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare function XXXnormalizeStyles(layoutStyle?: {}, visualStyle?: {}): {};
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
-export declare const LayoutTreeViewer: ({ layout, onSelect: _, style }: {
+export function 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): ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
+export declare function followPathToComponent(component: ReactElement, path: string): React.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/src/Component.js

@@ -1,14 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { registerComponent } from "@vuu-ui/vuu-utils";
-const Component_Component = /*#__PURE__*/ forwardRef(function({ resizeable, ...props }, ref) {
-    return /*#__PURE__*/ jsx("div", {
-        ...props,
-        className: "Component",
-        ref: ref
-    });
-});
-Component_Component.displayName = "Component";
-var src_Component = Component_Component;
-registerComponent("Component", Component_Component, "component");
-export default src_Component;

package/src/LayoutContainer.css.js

@@ -1,24 +0,0 @@
-const css = `
-.vuuLayoutContainer {
-  outline: none;
-  display: inline-block;
-}
-
-[data-dragging="true"] {
-  z-index: 100;
-  position: absolute !important;
-}
-
-.vuuSimpleDraggableWrapper {
-  background-color: #fff;
-  box-shadow: 0 6px 10px #0003;
-}
-
-.vuuSimpleDraggableWrapper > * {
-  width: 100%;
-  height: 100%;
-}
-
-
-`;
-export default css;

package/src/LayoutContainer.js

@@ -1,26 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { registerComponent } from "@vuu-ui/vuu-utils";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import clsx from "clsx";
-import { forwardRef } from "react";
-import LayoutContainer_0 from "./LayoutContainer.css";
-const LayoutContainer_LayoutContainer = /*#__PURE__*/ forwardRef(function({ children, className: classNameProp, dropTarget, resizeable: _, ...htmlAttributes }, forwardedRef) {
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-layout-container",
-        css: LayoutContainer_0,
-        window: targetWindow
-    });
-    const className = clsx("vuuLayoutContainer", classNameProp);
-    return /*#__PURE__*/ jsx("div", {
-        className: className,
-        ref: forwardedRef,
-        ...htmlAttributes,
-        children: children
-    });
-});
-const componentName = "LayoutContainer";
-LayoutContainer_LayoutContainer.displayName = componentName;
-registerComponent(componentName, LayoutContainer_LayoutContainer, "container");
-export { LayoutContainer_LayoutContainer as LayoutContainer };

package/src/debug.js

@@ -1,16 +0,0 @@
-import { typeOf } from "./utils/index.js";
-const tree = (el, depth = 0)=>{
-    const type = typeOf(el);
-    const spaces = "          ";
-    let str = `\n${spaces.slice(0, depth)}${type}`;
-    if ("View" !== type) {
-        const els = el.props.children || [];
-        (Array.isArray(els) ? els : [
-            els
-        ]).forEach((child)=>{
-            str += tree(child, depth + 1);
-        });
-    }
-    return str;
-};
-export { tree };

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

@@ -1,36 +0,0 @@
-const css = `
-.vuuDockLayout {
-  --chest-bg: var(--hw-chest-bg, inherit);
-  --drawer-bg: var(--hw-drawer-bg, inherit);
-  --drawer-size: var(--hw-drawer-size, 200px);
-  --drawer-peek-size: var(--hw-drawer-peek-size, 32px);
-  --drawer-transition-duration: var(--hw-drawer-transition-duration, .4s);
-  background-color: var(--chest-bg);
-  display: flex;
-}
-
-.vuuDockLayout-horizontal {
-  flex-direction: row;
-}
-
-.vuuDockLayout-vertical {
-  flex-direction: column;
-}
-
-.vuuDockLayout-content {
-  background-color: var(--chest-bg);
-  flex-grow: 1;
-  flex-shrink: 1;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  overflow: hidden;
-}
-
-.vuuDockLayout-horizontal .vuuDockLayout-content, .vuuDockLayout-vertical .vuuDockLayout-content {
-  flex-basis: 100%;
-}
-
-
-`;
-export default css;

package/src/dock-layout/DockLayout.js

@@ -1,43 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { asReactElements, partition, registerComponent } from "@vuu-ui/vuu-utils";
-import clsx from "clsx";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { useMemo } from "react";
-import Drawer from "./Drawer.js";
-import DockLayout from "./DockLayout.css";
-const isDrawer = (component)=>component.type === Drawer;
-const isVertical = (element)=>element.props.position && element.props.position.match(/top|bottom/);
-const classBase = "vuuDockLayout";
-const DockLayout_DockLayout = (props)=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-dock-layput",
-        css: DockLayout,
-        window: targetWindow
-    });
-    const { children, className: classNameProp, id, style } = props;
-    const childElements = useMemo(()=>asReactElements(children), [
-        children
-    ]);
-    const [drawers, content] = partition(childElements, isDrawer);
-    const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);
-    const orientation = 0 === verticalDrawers.length ? "horizontal" : 0 === horizontalDrawers.length ? "vertical" : "both";
-    const className = clsx(classBase, classNameProp, `${classBase}-${orientation}`);
-    return /*#__PURE__*/ jsxs("div", {
-        className: className,
-        id: id,
-        style: style,
-        children: [
-            drawers,
-            /*#__PURE__*/ jsx("div", {
-                className: `${classBase}-content`,
-                children: content
-            })
-        ]
-    });
-};
-DockLayout_DockLayout.displayName = "DockLayout";
-var dock_layout_DockLayout = DockLayout_DockLayout;
-registerComponent("DockLayout", DockLayout_DockLayout, "container");
-export default dock_layout_DockLayout;

package/src/dock-layout/Drawer.css.js

@@ -1,150 +0,0 @@
-const css = `
-.vuuDrawer {
-  --drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);
-  --vuu-close-icon-svg: var(--svg-chevron-double-right);
-  transition: flex-basis;
-  transition-duration: var(--drawer-transition-duration);
-  z-index: 1;
-  flex: 1 1 0;
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-  position: relative;
-}
-
-.vuuDrawer-peekaboo {
-  flex-basis: var(--drawer-peek-size);
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.vuuDrawer-inline.vuuDrawer-open {
-  flex-basis: var(--drawer-size);
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.vuuDrawer-liner {
-  background-color: var(--drawer-bg);
-  position: relative;
-  overflow: hidden;
-}
-
-.vuuDrawer-content {
-  height: 100%;
-  top: 0;
-  right: var(--drawer-peek-size);
-  transition: right;
-  transition-duration: var(--drawer-transition-duration);
-  flex: 100%;
-  width: 100%;
-  position: absolute;
-  overflow: hidden;
-}
-
-.vuuDrawer-open .vuuDrawer-content {
-  right: 0;
-}
-
-.vuuDrawer-left {
-  border-right: var(--drawer-leading-edge-border);
-}
-
-.vuuDrawer-right {
-  border-left: var(--drawer-leading-edge-border);
-}
-
-.vuuDrawer-top {
-  border-bottom: var(--drawer-leading-edge-border);
-}
-
-.vuuDrawer-bottom {
-  border-top: var(--drawer-leading-edge-border);
-}
-
-.vuuDrawer-left .vuuDrawer-liner, .vuuDrawer-right .vuuDrawer-liner {
-  height: 100%;
-  transition: width;
-}
-
-.vuuDrawer-top .vuuDrawer-liner, .vuuDrawer-bottom .vuuDrawer-liner {
-  width: 100%;
-  transition: height;
-}
-
-.vuuDrawer-inline .vuuDrawer-liner {
-  width: 100%;
-  height: 100%;
-}
-
-.vuuDrawer-over .vuuDrawer-liner {
-  transition-duration: .4s;
-  position: absolute;
-}
-
-.vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner {
-  width: 0;
-  top: 0;
-  left: 0;
-}
-
-.vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner {
-  width: 0;
-  top: 0;
-  right: 0;
-}
-
-.vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner {
-  height: 0;
-  top: 0;
-  left: 0;
-}
-
-.vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner {
-  height: 0;
-  bottom: 0;
-  left: 0;
-}
-
-.vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner, .vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {
-  width: var(--drawer-peek-size);
-}
-
-.vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner, .vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {
-  height: var(--drawer-peek-size);
-}
-
-.vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner, .vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {
-  width: var(--drawer-size);
-}
-
-.vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner, .vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {
-  height: var(--drawer-size);
-}
-
-.vuuDrawer-top, .vuuDrawer-left {
-  order: 0;
-}
-
-.vuuDrawer-bottom, .vuuDrawer-right {
-  order: 99;
-}
-
-.vuuDrawer-left, .vuuDrawer-right {
-  flex-direction: column;
-}
-
-.vuuToggleButton-container {
-  --saltButton-height: 28px;
-  --saltButton-width: 28px;
-  --vuu-icon-size: 12px;
-  flex: 0 0 28px;
-}
-
-.vuuDrawer-open {
-  --vuu-close-icon-svg: var(--svg-chevron-double-left);
-}
-
-
-`;
-export default css;

package/src/dock-layout/Drawer.js

@@ -1,82 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, useControlled } from "@salt-ds/core";
-import clsx from "clsx";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { useCallback } from "react";
-import Drawer from "./Drawer.css";
-const classBase = "vuuDrawer";
-const sizeAttribute = (value)=>"string" == typeof value ? value : value + "px";
-const getStyle = (styleProp, sizeOpen, sizeClosed)=>{
-    const hasSizeOpen = void 0 !== sizeOpen;
-    const hasSizeClosed = void 0 !== sizeClosed;
-    if (!styleProp && !hasSizeClosed && !hasSizeOpen) return;
-    if (!hasSizeClosed && !hasSizeOpen) return styleProp;
-    return {
-        ...styleProp,
-        "--drawer-size": hasSizeOpen ? sizeAttribute(sizeOpen) : void 0,
-        "--drawer-peek-size": hasSizeClosed ? sizeAttribute(sizeClosed) : void 0
-    };
-};
-const Drawer_Drawer = ({ children, className: classNameProp, clickToOpen, defaultOpen, sizeOpen, sizeClosed, style: styleProp, open: openProp, position = "left", inline, onClick, peekaboo = false, toggleButton, ...props })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-drawer",
-        css: Drawer,
-        window: targetWindow
-    });
-    const [open, setOpen] = useControlled({
-        controlled: openProp,
-        default: defaultOpen ?? false,
-        name: "Drawer",
-        state: "open"
-    });
-    const className = clsx(classBase, classNameProp, `${classBase}-${position}`, {
-        [`${classBase}-open`]: open,
-        [`${classBase}-inline`]: inline,
-        [`${classBase}-over`]: !inline,
-        [`${classBase}-peekaboo`]: peekaboo
-    });
-    const toggleDrawer = useCallback(()=>{
-        setOpen(!open);
-    }, [
-        open,
-        setOpen
-    ]);
-    const style = getStyle(styleProp, sizeOpen, sizeClosed);
-    const handleClick = clickToOpen ? toggleDrawer : onClick;
-    const renderToggleButton = ()=>/*#__PURE__*/ jsx("div", {
-            className: clsx("vuuToggleButton-container"),
-            children: open ? /*#__PURE__*/ jsx(Button, {
-                "aria-label": "close",
-                onClick: toggleDrawer,
-                "data-icon": "close",
-                variant: "secondary"
-            }) : /*#__PURE__*/ jsx(Button, {
-                "aria-label": "open",
-                onClick: toggleDrawer,
-                "data-icon": "close",
-                variant: "secondary"
-            })
-        });
-    return /*#__PURE__*/ jsxs("div", {
-        ...props,
-        className: className,
-        onClick: handleClick,
-        style: style,
-        children: [
-            "start" == toggleButton ? renderToggleButton() : null,
-            /*#__PURE__*/ jsx("div", {
-                className: `${classBase}-liner`,
-                children: /*#__PURE__*/ jsx("div", {
-                    className: `${classBase}-content`,
-                    children: children
-                })
-            }),
-            "end" == toggleButton ? renderToggleButton() : null
-        ]
-    });
-};
-Drawer_Drawer.displayName = "Drawer";
-var dock_layout_Drawer = Drawer_Drawer;
-export default dock_layout_Drawer;

package/src/dock-layout/index.js

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