@vuu-ui/vuu-layout 0.6.25-debug → 0.6.26-debug

package/esm/index.js

@@ -1,7 +1,29 @@
-// src/chest-of-drawers/Chest.tsx
+// src/dock-layout/DockLayout.tsx
+import { partition } from "@vuu-ui/vuu-utils";
 import cx2 from "classnames";
 
-// src/chest-of-drawers/Drawer.tsx
+// src/registry/ComponentRegistry.ts
+var _containers = {};
+var _views = {};
+var ComponentRegistry = {};
+function isContainer(componentType) {
+  return _containers[componentType] === true;
+}
+function isView(componentType) {
+  return _views[componentType] === true;
+}
+var isLayoutComponent = (type) => isContainer(type) || isView(type);
+var isRegistered = (className) => !!ComponentRegistry[className];
+function registerComponent(componentName2, component, type = "component") {
+  ComponentRegistry[componentName2] = component;
+  if (type === "container") {
+    _containers[componentName2] = true;
+  } else if (type === "view") {
+    _views[componentName2] = true;
+  }
+}
+
+// src/dock-layout/Drawer.tsx
 import { Button, useControlled } from "@salt-ds/core";
 import cx from "classnames";
 import { useCallback } from "react";
@@ -54,7 +76,6 @@ var Drawer = ({
     [`${classBase}-peekaboo`]: peekaboo
   });
   const toggleDrawer = useCallback(() => {
-    console.log("toggleDrawer");
     setOpen(!open);
   }, [open, setOpen]);
   const style = getStyle(styleProp, sizeOpen, sizeClosed);
@@ -85,49 +106,25 @@ var Drawer = ({
 Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 
-// src/chest-of-drawers/Chest.tsx
-import { partition } from "@vuu-ui/vuu-utils";
-
-// src/registry/ComponentRegistry.ts
-var _containers = {};
-var _views = {};
-var ComponentRegistry = {};
-function isContainer(componentType) {
-  return _containers[componentType] === true;
-}
-function isView(componentType) {
-  return _views[componentType] === true;
-}
-var isLayoutComponent = (type) => isContainer(type) || isView(type);
-var isRegistered = (className) => !!ComponentRegistry[className];
-function registerComponent(componentName2, component, type = "component") {
-  ComponentRegistry[componentName2] = component;
-  if (type === "container") {
-    _containers[componentName2] = true;
-  } else if (type === "view") {
-    _views[componentName2] = true;
-  }
-}
-
-// src/chest-of-drawers/Chest.tsx
+// src/dock-layout/DockLayout.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var isDrawer = (component) => component.type === Drawer_default;
 var isVertical = ({ props: { position = "left" } }) => position.match(/top|bottom/);
-var Chest = (props) => {
+var DockLayout = (props) => {
   const { children, className: classNameProp, id, style } = props;
-  const classBase8 = "hwChest";
+  const classBase9 = "vuuDockLayout";
   const [drawers, content] = partition(children, isDrawer);
   const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);
   const orientation = verticalDrawers.length === 0 ? "horizontal" : horizontalDrawers.length === 0 ? "vertical" : "both";
-  const className = cx2(classBase8, classNameProp, `${classBase8}-${orientation}`);
+  const className = cx2(classBase9, classNameProp, `${classBase9}-${orientation}`);
   return /* @__PURE__ */ jsxs2("div", { className, id, style, children: [
     drawers,
-    /* @__PURE__ */ jsx2("div", { className: `${classBase8}-content`, children: content })
+    /* @__PURE__ */ jsx2("div", { className: `${classBase9}-content`, children: content })
   ] });
 };
-Chest.displayName = "Chest";
-var Chest_default = Chest;
-registerComponent("Chest", Chest, "container");
+DockLayout.displayName = "DockLayout";
+var DockLayout_default = DockLayout;
+registerComponent("DockLayout", DockLayout, "container");
 
 // src/Component.tsx
 import { forwardRef } from "react";
@@ -1679,6 +1676,8 @@ var DraggableLayout = forwardRef2(function DraggableLayout2({
   children,
   className: classNameProp,
   dropTarget,
+  resizeable: _,
+  // ignore, its just a marker used by the layout system
   ...htmlAttributes
 }, forwardedRef) {
   const className = classnames("DraggableLayout", classNameProp);
@@ -2129,7 +2128,7 @@ function getLeadingResizeablePos(contentMeta, idx) {
 function getTrailingResizeablePos(contentMeta, idx) {
   let pos = idx, resizeable = false;
   const count = contentMeta.length;
-  while (pos < count && !resizeable) {
+  while (pos < count - 1 && !resizeable) {
     pos = pos + 1;
     resizeable = isResizeable(contentMeta, pos);
   }
@@ -4336,7 +4335,7 @@ registerComponent("FluidGrid", FluidGridLayout, "container");
 import classnames2 from "classnames";
 import React15, {
   useRef as useRef10,
-  useState as useState6
+  useState as useState7
 } from "react";
 
 // src/layout-view/useViewActionDispatcher.ts
@@ -4440,8 +4439,10 @@ import { useForkRef as useForkRef3, useIdMemo as useId } from "@salt-ds/core";
 import cx8 from "classnames";
 import React14, {
   forwardRef as forwardRef5,
+  useCallback as useCallback14,
   useMemo as useMemo4,
-  useRef as useRef9
+  useRef as useRef9,
+  useState as useState6
 } from "react";
 
 // src/layout-view/useView.tsx
@@ -4582,8 +4583,19 @@ var useViewContext = () => useContext2(ViewContext);
 
 // src/layout-view/View.tsx
 import { jsx as jsx14, jsxs as jsxs3 } from "react/jsx-runtime";
+var classBase6 = "vuuView";
+var getProps2 = (state, props) => {
+  if (state && props) {
+    return {
+      ...state,
+      ...props
+    };
+  } else
+    return state || props;
+};
 var View = forwardRef5(function View2(props, forwardedRef) {
   const {
+    Header: Header2 = Header,
     children,
     className,
     collapsed,
@@ -4606,6 +4618,7 @@ var View = forwardRef5(function View2(props, forwardedRef) {
   const id = useId(idProp);
   const rootRef = useRef9(null);
   const mainRef = useRef9(null);
+  const [componentProps, _setComponentProps] = useState6();
   const {
     contributions,
     dispatchViewAction,
@@ -4626,10 +4639,15 @@ var View = forwardRef5(function View2(props, forwardedRef) {
     title: titleProp
   });
   useViewResize({ mainRef, resize, rootRef });
-  const classBase8 = "vuuView";
+  const setComponentProps = useCallback14((props2) => {
+    _setComponentProps(props2);
+  }, []);
   const getContent = () => {
-    if (React14.isValidElement(children) && restoredState) {
-      return React14.cloneElement(children, restoredState);
+    if (React14.isValidElement(children) && (restoredState || componentProps)) {
+      return React14.cloneElement(
+        children,
+        getProps2(restoredState, componentProps)
+      );
     }
     return children;
   };
@@ -4644,7 +4662,8 @@ var View = forwardRef5(function View2(props, forwardedRef) {
       onConfigChange,
       purge,
       save,
-      saveSession
+      saveSession,
+      setComponentProps
     }),
     [
       dispatchViewAction,
@@ -4656,6 +4675,7 @@ var View = forwardRef5(function View2(props, forwardedRef) {
       purge,
       save,
       saveSession,
+      setComponentProps,
       title
     ]
   );
@@ -4664,10 +4684,10 @@ var View = forwardRef5(function View2(props, forwardedRef) {
     "div",
     {
       ...restProps,
-      className: cx8(classBase8, className, {
-        [`${classBase8}-collapsed`]: collapsed,
-        [`${classBase8}-expanded`]: expanded,
-        [`${classBase8}-resize-defer`]: resize === "defer"
+      className: cx8(classBase6, className, {
+        [`${classBase6}-collapsed`]: collapsed,
+        [`${classBase6}-expanded`]: expanded,
+        [`${classBase6}-resize-defer`]: resize === "defer"
       }),
       "data-resizeable": resizeable,
       id,
@@ -4676,7 +4696,7 @@ var View = forwardRef5(function View2(props, forwardedRef) {
       tabIndex: -1,
       children: /* @__PURE__ */ jsxs3(ViewContext.Provider, { value: viewContextValue, children: [
         header ? /* @__PURE__ */ jsx14(
-          Header,
+          Header2,
           {
             ...headerProps,
             collapsed,
@@ -4689,7 +4709,7 @@ var View = forwardRef5(function View2(props, forwardedRef) {
             title
           }
         ) : null,
-        /* @__PURE__ */ jsx14("div", { className: `${classBase8}-main`, ref: mainRef, children: getContent() })
+        /* @__PURE__ */ jsx14("div", { className: `${classBase6}-main`, ref: mainRef, children: getContent() })
       ] })
     }
   );
@@ -4720,11 +4740,11 @@ var Header = ({
   title = "Untitled"
 }) => {
   const labelFieldRef = useRef10(null);
-  const [value, setValue] = useState6(title);
-  const [editing, setEditing] = useState6(false);
+  const [value, setValue] = useState7(title);
+  const [editing, setEditing] = useState7(false);
   const viewDispatch = useViewDispatch();
   const handleClose = (evt) => viewDispatch == null ? void 0 : viewDispatch({ type: "remove" }, evt);
-  const classBase8 = "vuuHeader";
+  const classBase9 = "vuuHeader";
   const handleTitleMouseDown = () => {
     var _a;
     (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
@@ -4734,9 +4754,9 @@ var Header = ({
   };
   const orientation = collapsed || orientationProp;
   const className = classnames2(
-    classBase8,
+    classBase9,
     classNameProp,
-    `${classBase8}-${orientation}`
+    `${classBase9}-${orientation}`
   );
   const handleEnterEditMode = () => {
     setEditing(true);
@@ -4763,8 +4783,19 @@ var Header = ({
     viewDispatch == null ? void 0 : viewDispatch({ type: "mousedown" }, e);
   };
   const toolbarItems = [];
-  const contributedItems = [];
+  const postTitleContributedItems = [];
   const actionButtons = [];
+  contributions == null ? void 0 : contributions.forEach((contribution, i) => {
+    switch (contribution.location) {
+      case "pre-title":
+        toolbarItems.push(React15.cloneElement(contribution.content, { key: i }));
+        break;
+      default:
+        postTitleContributedItems.push(
+          React15.cloneElement(contribution.content, { key: i })
+        );
+    }
+  });
   title && toolbarItems.push(
     /* @__PURE__ */ jsx15(ToolbarField, { className: "vuuHeader-title", children: /* @__PURE__ */ jsx15(
       EditableLabel,
@@ -4782,9 +4813,6 @@ var Header = ({
       "title"
     ) }, "title")
   );
-  contributions == null ? void 0 : contributions.forEach((contribution, i) => {
-    contributedItems.push(React15.cloneElement(contribution.content, { key: i }));
-  });
   closeable && actionButtons.push(
     /* @__PURE__ */ jsxs4(
       ToolbarButton,
@@ -4799,8 +4827,8 @@ var Header = ({
       "close"
     )
   );
-  contributedItems.length > 0 && toolbarItems.push(
-    /* @__PURE__ */ jsx15(Tooltray, { "data-align-end": true, children: contributedItems }, "contributions")
+  postTitleContributedItems.length > 0 && toolbarItems.push(
+    /* @__PURE__ */ jsx15(Tooltray, { "data-align-end": true, children: postTitleContributedItems }, "contributions")
   );
   actionButtons.length > 0 && toolbarItems.push(
     /* @__PURE__ */ jsx15(Tooltray, { "data-align-end": true, children: actionButtons }, "actions")
@@ -4809,7 +4837,6 @@ var Header = ({
     Toolbar,
     {
       className,
-      id: "stevo",
       orientation: orientationProp,
       style,
       onMouseDown: handleMouseDown,
@@ -4861,7 +4888,7 @@ var Palette = ({
   ...props
 }) => {
   const dispatch = useLayoutProviderDispatch();
-  const classBase8 = "vuuPalette";
+  const classBase9 = "vuuPalette";
   function handleMouseDown(evt) {
     var _a;
     const target = evt.target;
@@ -4908,7 +4935,7 @@ var Palette = ({
     {
       ...props,
       borderless: true,
-      className: cx9(classBase8, className, `${classBase8}-${orientation}`),
+      className: cx9(classBase9, className, `${classBase9}-${orientation}`),
       maxHeight: 800,
       selected: null,
       children: children.map(
@@ -4927,7 +4954,7 @@ import { uuid as uuid6 } from "@vuu-ui/vuu-utils";
 import { List as List2, ListItem as ListItem2 } from "@heswell/salt-lab";
 import cx10 from "classnames";
 import { jsx as jsx17 } from "react/jsx-runtime";
-var classBase6 = "vuuPalette";
+var classBase7 = "vuuPalette";
 var PaletteListItem = (props) => {
   const { children, ViewProps, label, onMouseDown, template, ...restProps } = props;
   const dispatch = useLayoutProviderDispatch();
@@ -4964,7 +4991,7 @@ var PaletteSalt = ({ className, ...props }) => {
     List2,
     {
       ...props,
-      className: cx10(classBase6, className),
+      className: cx10(classBase7, className),
       height: "100%",
       selectionStrategy: "none"
     }
@@ -4978,10 +5005,10 @@ import { useIdMemo as useId2 } from "@salt-ds/core";
 import cx11 from "classnames";
 import React16, {
   forwardRef as forwardRef6,
-  useCallback as useCallback14
+  useCallback as useCallback15
 } from "react";
 import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
-var classBase7 = "Tabs";
+var classBase8 = "Tabs";
 var getDefaultTabIcon = () => void 0;
 var getDefaultTabLabel = (component, tabIndex) => {
   var _a, _b;
@@ -5041,7 +5068,7 @@ var Stack = forwardRef6(function Stack2({
       onMouseDown == null ? void 0 : onMouseDown(e, tabIndex);
     }
   };
-  const handleExitEditMode = useCallback14(
+  const handleExitEditMode = useCallback15(
     (_oldText, newText, _allowDeactivation, tabIndex) => {
       onTabEdit == null ? void 0 : onTabEdit(tabIndex, newText);
     },
@@ -5078,8 +5105,8 @@ var Stack = forwardRef6(function Stack2({
   return /* @__PURE__ */ jsxs5(
     "div",
     {
-      className: cx11(classBase7, classNameProp, {
-        [`${classBase7}-horizontal`]: (TabstripProps == null ? void 0 : TabstripProps.orientation) === "vertical"
+      className: cx11(classBase8, classNameProp, {
+        [`${classBase8}-horizontal`]: (TabstripProps == null ? void 0 : TabstripProps.orientation) === "vertical"
       }),
       style,
       id,
@@ -5221,12 +5248,12 @@ StackLayout.displayName = "Stack";
 registerComponent("Stack", StackLayout, "container");
 
 // src/tools/config-wrapper/ConfigWrapper.tsx
-import React18, { useState as useState7 } from "react";
+import React18, { useState as useState8 } from "react";
 import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
 var ConfigWrapper = ({ children }) => {
   const designMode = false;
-  const [layout, setLayout] = useState7(children);
-  const [selectedComponent, setSelectedComponent] = useState7(children);
+  const [layout, setLayout] = useState8(children);
+  const [selectedComponent, setSelectedComponent] = useState8(children);
   const handleSelection = (selectedPath) => {
     const targetComponent = followPathToComponent(layout, selectedPath);
     setSelectedComponent(targetComponent);
@@ -5606,10 +5633,10 @@ var LayoutTreeViewer = ({ layout, onSelect, style }) => {
 export {
   Action,
   BORDER_STYLES,
-  Chest_default as Chest,
   Component_default as Component,
   ComponentRegistry,
   ConfigWrapper,
+  DockLayout_default as DockLayout,
   Draggable,
   DraggableLayout,
   Drawer_default as Drawer,