@vuu-ui/vuu-layout 0.7.6-debug → 0.8.0-debug

package/esm/index.js

@@ -137,7 +137,7 @@ var Component_default = Component;
 registerComponent("Component", Component);
 
 // src/utils/pathUtils.ts
-import React2 from "react";
+import React2, { isValidElement } from "react";
 
 // src/utils/propUtils.ts
 var NO_PROPS = {};
@@ -251,7 +251,30 @@ function followPathToComponent(component, path) {
     children = getChildren(child);
   }
 }
+var findTargetById = (source, id, throwIfNotFound = true) => {
+  const { children, id: idProp } = source.props;
+  if (idProp === id) {
+    return source;
+  }
+  if (React2.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 (throwIfNotFound === true) {
+    throw Error(`pathUtils.findTargetById 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 (path.indexOf(sourcePath) !== 0) {
     throw Error(
@@ -1730,7 +1753,11 @@ registerComponent("Placeholder", Placeholder);
 
 // src/flexbox/Splitter.tsx
 import cx5 from "classnames";
-import React3, { useCallback as useCallback2, useRef, useState } from "react";
+import React3, {
+  useCallback as useCallback2,
+  useRef,
+  useState
+} from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var Splitter = React3.memo(function Splitter2({
   column,
@@ -2409,6 +2436,7 @@ var Action = {
   FOCUS: "focus",
   FOCUS_SPLITTER: "focus-splitter",
   INITIALIZE: "initialize",
+  LAYOUT_RESIZE: "layout-resize",
   MAXIMIZE: "maximize",
   MINIMIZE: "minimize",
   REMOVE: "remove",
@@ -2954,12 +2982,15 @@ var LayoutActionType = {
   ADD: "add",
   DRAG_START: "drag-start",
   DRAG_DROP: "drag-drop",
+  LAYOUT_RESIZE: "layout-resize",
   MAXIMIZE: "maximize",
   MINIMIZE: "minimize",
   REMOVE: "remove",
   REPLACE: "replace",
   RESTORE: "restore",
   SAVE: "save",
+  SET_PROP: "set-prop",
+  SET_PROPS: "set-props",
   SET_TITLE: "set-title",
   SPLITTER_RESIZE: "splitter-resize",
   SWITCH_TAB: "switch-tab",
@@ -3242,12 +3273,26 @@ var allOtherChildrenArePlaceholders = (children, path) => children.every(
 
 // src/layout-reducer/resize-flex-children.ts
 import React10 from "react";
+function resizeFlexChild(layoutRoot, { path, size }) {
+  const target = followPath(layoutRoot, path, true);
+  const { style } = getProps(target);
+  const newStyle = {
+    ...style,
+    width: size
+  };
+  const replacement = React10.cloneElement(target, { style: newStyle });
+  return swapChild(layoutRoot, target, replacement);
+}
 function resizeFlexChildren(layoutRoot, { path, sizes }) {
   const target = followPath(layoutRoot, path, true);
   const { children, style } = getProps(target);
   const dimension = style.flexDirection === "column" ? "height" : "width";
   const replacementChildren = applySizesToChildren(children, sizes, dimension);
-  const replacement = React10.cloneElement(target, void 0, replacementChildren);
+  const replacement = React10.cloneElement(
+    target,
+    void 0,
+    replacementChildren
+  );
   return swapChild(layoutRoot, target, replacement);
 }
 function applySizesToChildren(children, sizes, dimension) {
@@ -3497,10 +3542,21 @@ var layoutReducer = (state, action) => {
       return removeChild(state, action);
     case LayoutActionType.REPLACE:
       return replaceChild(state, action);
+    case LayoutActionType.SET_PROP:
+      return setProp(state, action);
+    case LayoutActionType.SET_PROPS:
+      return setProps(state, action);
     case LayoutActionType.SET_TITLE:
-      return setTitle(state, action);
+      return setProp(state, {
+        type: "set-prop",
+        path: action.path,
+        propName: "title",
+        propValue: action.title
+      });
     case LayoutActionType.SPLITTER_RESIZE:
       return resizeFlexChildren(state, action);
+    case LayoutActionType.LAYOUT_RESIZE:
+      return resizeFlexChild(state, action);
     case LayoutActionType.SWITCH_TAB:
       return switchTab(state, action);
     default:
@@ -3514,13 +3570,18 @@ var switchTab = (state, { path, nextIdx }) => {
   });
   return swapChild(state, target, replacement);
 };
-var setTitle = (state, { path, title }) => {
+var setProp = (state, { path, propName, propValue }) => {
   const target = followPath(state, path, true);
   const replacement = React12.cloneElement(target, {
-    title
+    [propName]: propValue
   });
   return swapChild(state, target, replacement);
 };
+var setProps = (state, { path, props }) => {
+  const target = followPath(state, path, true);
+  const replacement = React12.cloneElement(target, props);
+  return swapChild(state, target, replacement);
+};
 var setChildProps = (state, { path, type }) => {
   if (path) {
     const target = followPath(state, path, true);
@@ -4200,7 +4261,7 @@ var extractResponsiveProps = (props) => {
 import { getUniqueId as getUniqueId2 } from "@vuu-ui/vuu-utils";
 import {
   cloneElement as cloneElement2,
-  isValidElement,
+  isValidElement as isValidElement2,
   useCallback as useCallback10,
   useMemo as useMemo2,
   useRef as useRef7
@@ -4219,7 +4280,7 @@ var useResponsiveSizing = ({
   const isColumn = (style == null ? void 0 : style.flexDirection) === "column";
   const dimension = isColumn ? "height" : "width";
   const children = useMemo2(
-    () => Array.isArray(childrenProp) ? childrenProp : isValidElement(childrenProp) ? [childrenProp] : [],
+    () => Array.isArray(childrenProp) ? childrenProp : isValidElement2(childrenProp) ? [childrenProp] : [],
     [childrenProp]
   );
   const buildContent2 = useCallback10(
@@ -5096,7 +5157,7 @@ var Stack = forwardRef6(function Stack2({
         draggable: true,
         id: rootId,
         label: getTabLabel(child2, idx),
-        closeable,
+        closeable: closeable && (TabstripProps == null ? void 0 : TabstripProps.enableCloseTab) !== false,
         editable: (TabstripProps == null ? void 0 : TabstripProps.enableRenameTab) !== false
       },
       childId != null ? childId : idx
@@ -5129,6 +5190,7 @@ var Stack = forwardRef6(function Stack2({
                   Tabstrip,
                   {
                     ...TabstripProps,
+                    activeTabIndex: (_a = TabstripProps == null ? void 0 : TabstripProps.activeTabIndex) != null ? _a : child === null ? -1 : active,
                     enableRenameTab: (TabstripProps == null ? void 0 : TabstripProps.enableRenameTab) !== false,
                     enableAddTab,
                     enableCloseTab: enableCloseTabs,
@@ -5138,7 +5200,6 @@ var Stack = forwardRef6(function Stack2({
                     onCloseTab: handleTabClose,
                     onExitEditMode: handleExitEditMode,
                     onMouseDown: handleMouseDown,
-                    activeTabIndex: (_a = TabstripProps == null ? void 0 : TabstripProps.activeTabIndex) != null ? _a : child === null ? -1 : active,
                     children: renderTabs()
                   }
                 )