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

package/cjs/index.js

@@ -32,10 +32,10 @@ var src_exports = {};
 __export(src_exports, {
   Action: () => Action,
   BORDER_STYLES: () => BORDER_STYLES,
-  Chest: () => Chest_default,
   Component: () => Component_default,
   ComponentRegistry: () => ComponentRegistry,
   ConfigWrapper: () => ConfigWrapper,
+  DockLayout: () => DockLayout_default,
   Draggable: () => Draggable,
   DraggableLayout: () => DraggableLayout,
   Drawer: () => Drawer_default,
@@ -107,10 +107,32 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/chest-of-drawers/Chest.tsx
+// src/dock-layout/DockLayout.tsx
+var import_vuu_utils = require("@vuu-ui/vuu-utils");
 var import_classnames2 = __toESM(require("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
 var import_core = require("@salt-ds/core");
 var import_classnames = __toESM(require("classnames"));
 var import_react = require("react");
@@ -163,7 +185,6 @@ var Drawer = ({
     [`${classBase}-peekaboo`]: peekaboo
   });
   const toggleDrawer = (0, import_react.useCallback)(() => {
-    console.log("toggleDrawer");
     setOpen(!open);
   }, [open, setOpen]);
   const style = getStyle(styleProp, sizeOpen, sizeClosed);
@@ -194,49 +215,25 @@ var Drawer = ({
 Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 
-// src/chest-of-drawers/Chest.tsx
-var import_vuu_utils = require("@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
 var import_jsx_runtime2 = require("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] = (0, import_vuu_utils.partition)(children, isDrawer);
   const [verticalDrawers, horizontalDrawers] = (0, import_vuu_utils.partition)(drawers, isVertical);
   const orientation = verticalDrawers.length === 0 ? "horizontal" : horizontalDrawers.length === 0 ? "vertical" : "both";
-  const className = (0, import_classnames2.default)(classBase8, classNameProp, `${classBase8}-${orientation}`);
+  const className = (0, import_classnames2.default)(classBase9, classNameProp, `${classBase9}-${orientation}`);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, id, style, children: [
     drawers,
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${classBase8}-content`, children: content })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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
 var import_react2 = require("react");
@@ -1788,6 +1785,8 @@ var DraggableLayout = (0, import_react4.forwardRef)(function DraggableLayout2({
   children,
   className: classNameProp,
   dropTarget,
+  resizeable: _,
+  // ignore, its just a marker used by the layout system
   ...htmlAttributes
 }, forwardedRef) {
   const className = (0, import_classnames4.default)("DraggableLayout", classNameProp);
@@ -2233,7 +2232,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);
   }
@@ -4664,8 +4663,19 @@ var useViewContext = () => (0, import_react28.useContext)(ViewContext);
 
 // src/layout-view/View.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
+var classBase6 = "vuuView";
+var getProps2 = (state, props) => {
+  if (state && props) {
+    return {
+      ...state,
+      ...props
+    };
+  } else
+    return state || props;
+};
 var View = (0, import_react29.forwardRef)(function View2(props, forwardedRef) {
   const {
+    Header: Header2 = Header,
     children,
     className,
     collapsed,
@@ -4688,6 +4698,7 @@ var View = (0, import_react29.forwardRef)(function View2(props, forwardedRef) {
   const id = (0, import_core4.useIdMemo)(idProp);
   const rootRef = (0, import_react29.useRef)(null);
   const mainRef = (0, import_react29.useRef)(null);
+  const [componentProps, _setComponentProps] = (0, import_react29.useState)();
   const {
     contributions,
     dispatchViewAction,
@@ -4708,10 +4719,15 @@ var View = (0, import_react29.forwardRef)(function View2(props, forwardedRef) {
     title: titleProp
   });
   useViewResize({ mainRef, resize, rootRef });
-  const classBase8 = "vuuView";
+  const setComponentProps = (0, import_react29.useCallback)((props2) => {
+    _setComponentProps(props2);
+  }, []);
   const getContent = () => {
-    if (import_react29.default.isValidElement(children) && restoredState) {
-      return import_react29.default.cloneElement(children, restoredState);
+    if (import_react29.default.isValidElement(children) && (restoredState || componentProps)) {
+      return import_react29.default.cloneElement(
+        children,
+        getProps2(restoredState, componentProps)
+      );
     }
     return children;
   };
@@ -4726,7 +4742,8 @@ var View = (0, import_react29.forwardRef)(function View2(props, forwardedRef) {
       onConfigChange,
       purge,
       save,
-      saveSession
+      saveSession,
+      setComponentProps
     }),
     [
       dispatchViewAction,
@@ -4738,6 +4755,7 @@ var View = (0, import_react29.forwardRef)(function View2(props, forwardedRef) {
       purge,
       save,
       saveSession,
+      setComponentProps,
       title
     ]
   );
@@ -4746,10 +4764,10 @@ var View = (0, import_react29.forwardRef)(function View2(props, forwardedRef) {
     "div",
     {
       ...restProps,
-      className: (0, import_classnames9.default)(classBase8, className, {
-        [`${classBase8}-collapsed`]: collapsed,
-        [`${classBase8}-expanded`]: expanded,
-        [`${classBase8}-resize-defer`]: resize === "defer"
+      className: (0, import_classnames9.default)(classBase6, className, {
+        [`${classBase6}-collapsed`]: collapsed,
+        [`${classBase6}-expanded`]: expanded,
+        [`${classBase6}-resize-defer`]: resize === "defer"
       }),
       "data-resizeable": resizeable,
       id,
@@ -4758,7 +4776,7 @@ var View = (0, import_react29.forwardRef)(function View2(props, forwardedRef) {
       tabIndex: -1,
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ViewContext.Provider, { value: viewContextValue, children: [
         header ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          Header,
+          Header2,
           {
             ...headerProps,
             collapsed,
@@ -4771,7 +4789,7 @@ var View = (0, import_react29.forwardRef)(function View2(props, forwardedRef) {
             title
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `${classBase8}-main`, ref: mainRef, children: getContent() })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `${classBase6}-main`, ref: mainRef, children: getContent() })
       ] })
     }
   );
@@ -4800,7 +4818,7 @@ var Header = ({
   const [editing, setEditing] = (0, import_react30.useState)(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();
@@ -4810,9 +4828,9 @@ var Header = ({
   };
   const orientation = collapsed || orientationProp;
   const className = (0, import_classnames10.default)(
-    classBase8,
+    classBase9,
     classNameProp,
-    `${classBase8}-${orientation}`
+    `${classBase9}-${orientation}`
   );
   const handleEnterEditMode = () => {
     setEditing(true);
@@ -4839,8 +4857,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(import_react30.default.cloneElement(contribution.content, { key: i }));
+        break;
+      default:
+        postTitleContributedItems.push(
+          import_react30.default.cloneElement(contribution.content, { key: i })
+        );
+    }
+  });
   title && toolbarItems.push(
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_salt_lab2.ToolbarField, { className: "vuuHeader-title", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       import_salt_lab2.EditableLabel,
@@ -4858,9 +4887,6 @@ var Header = ({
       "title"
     ) }, "title")
   );
-  contributions == null ? void 0 : contributions.forEach((contribution, i) => {
-    contributedItems.push(import_react30.default.cloneElement(contribution.content, { key: i }));
-  });
   closeable && actionButtons.push(
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       import_salt_lab2.ToolbarButton,
@@ -4875,8 +4901,8 @@ var Header = ({
       "close"
     )
   );
-  contributedItems.length > 0 && toolbarItems.push(
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_salt_lab2.Tooltray, { "data-align-end": true, children: contributedItems }, "contributions")
+  postTitleContributedItems.length > 0 && toolbarItems.push(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_salt_lab2.Tooltray, { "data-align-end": true, children: postTitleContributedItems }, "contributions")
   );
   actionButtons.length > 0 && toolbarItems.push(
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_salt_lab2.Tooltray, { "data-align-end": true, children: actionButtons }, "actions")
@@ -4885,7 +4911,6 @@ var Header = ({
     import_salt_lab2.Toolbar,
     {
       className,
-      id: "stevo",
       orientation: orientationProp,
       style,
       onMouseDown: handleMouseDown,
@@ -4934,7 +4959,7 @@ var Palette = ({
   ...props
 }) => {
   const dispatch = useLayoutProviderDispatch();
-  const classBase8 = "vuuPalette";
+  const classBase9 = "vuuPalette";
   function handleMouseDown(evt) {
     var _a;
     const target = evt.target;
@@ -4981,7 +5006,7 @@ var Palette = ({
     {
       ...props,
       borderless: true,
-      className: (0, import_classnames11.default)(classBase8, className, `${classBase8}-${orientation}`),
+      className: (0, import_classnames11.default)(classBase9, className, `${classBase9}-${orientation}`),
       maxHeight: 800,
       selected: null,
       children: children.map(
@@ -5000,7 +5025,7 @@ var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
 var import_salt_lab4 = require("@heswell/salt-lab");
 var import_classnames12 = __toESM(require("classnames"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var classBase6 = "vuuPalette";
+var classBase7 = "vuuPalette";
 var PaletteListItem = (props) => {
   const { children, ViewProps, label, onMouseDown, template, ...restProps } = props;
   const dispatch = useLayoutProviderDispatch();
@@ -5037,7 +5062,7 @@ var PaletteSalt = ({ className, ...props }) => {
     import_salt_lab4.List,
     {
       ...props,
-      className: (0, import_classnames12.default)(classBase6, className),
+      className: (0, import_classnames12.default)(classBase7, className),
       height: "100%",
       selectionStrategy: "none"
     }
@@ -5051,7 +5076,7 @@ var import_core5 = require("@salt-ds/core");
 var import_classnames13 = __toESM(require("classnames"));
 var import_react32 = __toESM(require("react"));
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var classBase7 = "Tabs";
+var classBase8 = "Tabs";
 var getDefaultTabIcon = () => void 0;
 var getDefaultTabLabel = (component, tabIndex) => {
   var _a, _b;
@@ -5148,8 +5173,8 @@ var Stack = (0, import_react32.forwardRef)(function Stack2({
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
-      className: (0, import_classnames13.default)(classBase7, classNameProp, {
-        [`${classBase7}-horizontal`]: (TabstripProps == null ? void 0 : TabstripProps.orientation) === "vertical"
+      className: (0, import_classnames13.default)(classBase8, classNameProp, {
+        [`${classBase8}-horizontal`]: (TabstripProps == null ? void 0 : TabstripProps.orientation) === "vertical"
       }),
       style,
       id,