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

package/cjs/layout-reducer/remove-layout-element.js

@@ -0,0 +1,237 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+var pathUtils = require('../utils/pathUtils.js');
+var propUtils = require('../utils/propUtils.js');
+var typeOf = require('../utils/typeOf.js');
+var flexUtils = require('./flexUtils.js');
+var layoutUtils = require('./layoutUtils.js');
+var replaceLayoutElement = require('./replace-layout-element.js');
+
+function removeChild(layoutRoot, { path }) {
+  const target = pathUtils.followPath(layoutRoot, path);
+  let targetParent = pathUtils.followPathToParent(layoutRoot, path);
+  if (targetParent === null) {
+    return layoutRoot;
+  }
+  const { children } = propUtils.getProps(targetParent);
+  if (
+    // this is very specific to explicitly sized components
+    children.length > 1 && typeOf.typeOf(targetParent) !== "Stack" && allOtherChildrenArePlaceholders(children, path)
+  ) {
+    const {
+      style: { flexBasis, display, flexDirection, ...style }
+    } = propUtils.getProps(targetParent);
+    let containerPath = propUtils.getProp(targetParent, "path");
+    let newLayout = replaceLayoutElement.swapChild(
+      layoutRoot,
+      targetParent,
+      flexUtils.createPlaceHolder(containerPath, flexBasis, style)
+    );
+    while (targetParent = pathUtils.followPathToParent(newLayout, containerPath)) {
+      if (propUtils.getProp(targetParent, "path") === "0") {
+        break;
+      }
+      const { children: children2 } = propUtils.getProps(targetParent);
+      if (allOtherChildrenArePlaceholders(children2)) {
+        containerPath = propUtils.getProp(targetParent, "path");
+        const {
+          style: { flexBasis: flexBasis2, display: display2, flexDirection: flexDirection2, ...style2 }
+        } = propUtils.getProps(targetParent);
+        newLayout = replaceLayoutElement.swapChild(
+          layoutRoot,
+          targetParent,
+          flexUtils.createPlaceHolder(containerPath, flexBasis2, style2)
+        );
+      } else if (hasAdjacentPlaceholders(children2)) {
+        newLayout = collapsePlaceholders(
+          layoutRoot,
+          targetParent
+        );
+      } else {
+        break;
+      }
+    }
+    return newLayout;
+  }
+  return _removeChild(layoutRoot, target);
+}
+function _removeChild(container, child) {
+  const props = propUtils.getProps(container);
+  const { children: componentChildren, path, preserve } = props;
+  let { active, id: containerId } = props;
+  const { idx, finalStep } = pathUtils.nextStep(path, propUtils.getProp(child, "path"));
+  const type = typeOf.typeOf(container);
+  let children = componentChildren.slice();
+  if (finalStep) {
+    children.splice(idx, 1);
+    if (active !== void 0 && active >= idx) {
+      active = Math.max(0, active - 1);
+    }
+    if (children.length === 0 && preserve && type === "Stack") {
+      const {
+        path: path2,
+        style: { flexBasis }
+      } = propUtils.getProps(child);
+      const placeHolder = containerId === vuuUtils.VuuShellLocation.Workspace ? layoutUtils.layoutFromJson(
+        {
+          props: {
+            style: { flexGrow: 1, flexShrink: 1, flexBasis },
+            title: "Tab 1"
+          },
+          type: "Placeholder"
+        },
+        path2
+      ) : flexUtils.createPlaceHolder(path2, flexBasis);
+      children.push(placeHolder);
+    } else if (children.length === 1 && !preserve && path !== "0" && type.match(/Flexbox|Stack/)) {
+      return unwrap(container, children[0]);
+    }
+    if (!children.some(isFlexible) && children.some(canBeMadeFlexible)) {
+      children = makeFlexible(children);
+    }
+  } else {
+    children[idx] = _removeChild(children[idx], child);
+  }
+  children = children.map((child2, i) => pathUtils.resetPath(child2, `${path}.${i}`));
+  return React.cloneElement(container, { active }, children);
+}
+function unwrap(container, child) {
+  const type = typeOf.typeOf(container);
+  const {
+    path,
+    style: { flexBasis, flexGrow, flexShrink, width, height }
+  } = propUtils.getProps(container);
+  let unwrappedChild = pathUtils.resetPath(child, path);
+  if (path === "0") {
+    unwrappedChild = React.cloneElement(unwrappedChild, {
+      style: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ...child.props.style,
+        width,
+        height
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    });
+  } else if (type === "Flexbox") {
+    const dim = (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      container.props.style.flexDirection === "column" ? "height" : "width"
+    );
+    const {
+      style: { [dim]: size, ...style }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } = unwrappedChild.props;
+    unwrappedChild = React.cloneElement(unwrappedChild, {
+      flexFill: void 0,
+      style: {
+        ...style,
+        flexGrow,
+        flexShrink,
+        flexBasis,
+        width,
+        height
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    });
+  }
+  return unwrappedChild;
+}
+const isFlexible = (element) => {
+  return element.props.style?.flexGrow > 0;
+};
+const canBeMadeFlexible = (element) => {
+  if (element.props.style) {
+    const { width, height, flexGrow } = element.props.style;
+    return flexGrow === 0 && typeof width !== "number" && typeof height !== "number";
+  } else {
+    return false;
+  }
+};
+const makeFlexible = (children) => {
+  return children.map(
+    (child) => canBeMadeFlexible(child) ? React.cloneElement(child, {
+      style: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ...child.props.style,
+        flexGrow: 1
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    }) : child
+  );
+};
+const hasAdjacentPlaceholders = (children) => {
+  if (children && children.length > 0) {
+    let wasPlaceholder = propUtils.getProp(children[0], "placeholder");
+    let isPlaceholder = false;
+    for (let i = 1; i < children.length; i++) {
+      isPlaceholder = propUtils.getProp(children[i], "placeholder");
+      if (wasPlaceholder && isPlaceholder) {
+        return true;
+      }
+      wasPlaceholder = isPlaceholder;
+    }
+  }
+};
+const collapsePlaceholders = (container, target) => {
+  const { children: componentChildren, path } = propUtils.getProps(container);
+  const { idx, finalStep } = pathUtils.nextStep(path, propUtils.getProp(target, "path"));
+  let children = componentChildren.slice();
+  if (finalStep) {
+    children[idx] = _collapsePlaceHolders(target);
+  } else {
+    children[idx] = collapsePlaceholders(children[idx], target);
+  }
+  children = children.map((child, i) => pathUtils.resetPath(child, `${path}.${i}`));
+  return React.cloneElement(container, void 0, children);
+};
+const _collapsePlaceHolders = (container) => {
+  const { children } = propUtils.getProps(container);
+  const newChildren = [];
+  const placeholders = [];
+  for (let i = 0; i < children.length; i++) {
+    if (propUtils.getProp(children[i], "placeholder")) {
+      placeholders.push(children[i]);
+    } else {
+      if (placeholders.length === 1) {
+        newChildren.push(placeholders.pop());
+      } else if (placeholders.length > 0) {
+        newChildren.push(mergePlaceholders(placeholders));
+        placeholders.length = 0;
+      }
+      newChildren.push(children[i]);
+    }
+  }
+  if (placeholders.length === 1) {
+    newChildren.push(placeholders.pop());
+  } else if (placeholders.length > 0) {
+    newChildren.push(mergePlaceholders(placeholders));
+  }
+  const containerPath = propUtils.getProp(container, "path");
+  return React.cloneElement(
+    container,
+    void 0,
+    newChildren.map((child, i) => pathUtils.resetPath(child, `${containerPath}.${i}`))
+  );
+};
+const mergePlaceholders = ([placeholder, ...placeholders]) => {
+  const targetStyle = propUtils.getProp(placeholder, "style");
+  let { flexBasis, flexGrow, flexShrink } = targetStyle;
+  for (const placeholder2 of placeholders) {
+    const { style } = placeholder2.props;
+    flexBasis += style.flexBasis;
+    flexGrow = Math.max(flexGrow, style.flexGrow);
+    flexShrink = Math.max(flexShrink, style.flexShrink);
+  }
+  return React.cloneElement(placeholder, {
+    style: { ...targetStyle, flexBasis, flexGrow, flexShrink }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  });
+};
+const allOtherChildrenArePlaceholders = (children, path) => children.every(
+  (child) => propUtils.getProp(child, "placeholder") || path && propUtils.getProp(child, "path") === path
+);
+
+exports.removeChild = removeChild;
+//# sourceMappingURL=remove-layout-element.js.map

package/cjs/layout-reducer/remove-layout-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"remove-layout-element.js","sources":["../../../../packages/vuu-layout/src/layout-reducer/remove-layout-element.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport React, { ReactElement } from \"react\";\nimport {\n  followPath,\n  followPathToParent,\n  getProp,\n  getProps,\n  nextStep,\n  resetPath,\n  typeOf,\n} from \"../utils\";\nimport { createPlaceHolder } from \"./flexUtils\";\nimport { RemoveAction } from \"./layoutTypes\";\nimport { layoutFromJson } from \"./layoutUtils\";\nimport { swapChild } from \"./replace-layout-element\";\n\nexport function removeChild(layoutRoot: ReactElement, { path }: RemoveAction) {\n  const target = followPath(layoutRoot, path!) as ReactElement;\n  let targetParent = followPathToParent(layoutRoot, path!);\n  if (targetParent === null) {\n    return layoutRoot;\n  }\n  const { children } = getProps(targetParent);\n  if (\n    // this is very specific to explicitly sized components\n    children.length > 1 &&\n    typeOf(targetParent) !== \"Stack\" &&\n    allOtherChildrenArePlaceholders(children, path)\n  ) {\n    const {\n      style: { flexBasis, display, flexDirection, ...style },\n    } = getProps(targetParent);\n    let containerPath = getProp(targetParent, \"path\");\n    let newLayout = swapChild(\n      layoutRoot,\n      targetParent,\n      createPlaceHolder(containerPath, flexBasis, style),\n    );\n    while ((targetParent = followPathToParent(newLayout, containerPath))) {\n      if (getProp(targetParent, \"path\") === \"0\") {\n        break;\n      }\n      const { children } = getProps(targetParent);\n      if (allOtherChildrenArePlaceholders(children)) {\n        containerPath = getProp(targetParent, \"path\");\n        const {\n          style: { flexBasis, display, flexDirection, ...style },\n        } = getProps(targetParent);\n        newLayout = swapChild(\n          layoutRoot,\n          targetParent,\n          createPlaceHolder(containerPath, flexBasis, style),\n        );\n      } else if (hasAdjacentPlaceholders(children)) {\n        newLayout = collapsePlaceholders(\n          layoutRoot,\n          targetParent as ReactElement,\n        );\n      } else {\n        break;\n      }\n    }\n    return newLayout;\n  }\n  return _removeChild(layoutRoot, target);\n}\n\nfunction _removeChild(\n  container: ReactElement,\n  child: ReactElement,\n): ReactElement {\n  const props = getProps(container);\n  const { children: componentChildren, path, preserve } = props;\n  let { active, id: containerId } = props;\n  const { idx, finalStep } = nextStep(path, getProp(child, \"path\"));\n  const type = typeOf(container) as string;\n  let children = componentChildren.slice() as ReactElement[];\n\n  if (finalStep) {\n    children.splice(idx, 1);\n\n    if (active !== undefined && active >= idx) {\n      active = Math.max(0, active - 1);\n    }\n\n    if (children.length === 0 && preserve && type === \"Stack\") {\n      const {\n        path,\n        style: { flexBasis },\n      } = getProps(child);\n      const placeHolder =\n        containerId === VuuShellLocation.Workspace\n          ? layoutFromJson(\n              {\n                props: {\n                  style: { flexGrow: 1, flexShrink: 1, flexBasis },\n                  title: \"Tab 1\",\n                },\n                type: \"Placeholder\",\n              },\n              path,\n            )\n          : createPlaceHolder(path, flexBasis);\n      children.push(placeHolder);\n    } else if (\n      children.length === 1 &&\n      !preserve &&\n      path !== \"0\" &&\n      type.match(/Flexbox|Stack/)\n    ) {\n      return unwrap(container, children[0]);\n    }\n\n    if (!children.some(isFlexible) && children.some(canBeMadeFlexible)) {\n      children = makeFlexible(children);\n    }\n  } else {\n    children[idx] = _removeChild(children[idx], child) as ReactElement;\n  }\n\n  children = children.map((child, i) => resetPath(child, `${path}.${i}`));\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  return React.cloneElement(container, { active } as any, children);\n}\n\nfunction unwrap(container: ReactElement, child: ReactElement) {\n  const type = typeOf(container);\n  const {\n    path,\n    style: { flexBasis, flexGrow, flexShrink, width, height },\n  } = getProps(container);\n\n  let unwrappedChild = resetPath(child, path);\n  if (path === \"0\") {\n    unwrappedChild = React.cloneElement(unwrappedChild, {\n      style: {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        ...(child.props as any).style,\n        width,\n        height,\n      },\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  } else if (type === \"Flexbox\") {\n    const dim =\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (container.props as any).style.flexDirection === \"column\"\n        ? \"height\"\n        : \"width\";\n    const {\n      style: { [dim]: size, ...style },\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } = unwrappedChild.props as any;\n    unwrappedChild = React.cloneElement(unwrappedChild, {\n      flexFill: undefined,\n      style: {\n        ...style,\n        flexGrow,\n        flexShrink,\n        flexBasis,\n        width,\n        height,\n      },\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  }\n  return unwrappedChild;\n}\n\nconst isFlexible = (element: ReactElement) => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  return (element.props as any).style?.flexGrow > 0;\n};\n\nconst canBeMadeFlexible = (element: ReactElement) => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  if ((element.props as any).style) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const { width, height, flexGrow } = (element.props as any).style;\n    return (\n      flexGrow === 0 && typeof width !== \"number\" && typeof height !== \"number\"\n    );\n  } else {\n    return false;\n  }\n};\n\nconst makeFlexible = (children: ReactElement[]) => {\n  return children.map((child) =>\n    canBeMadeFlexible(child)\n      ? React.cloneElement(child, {\n          style: {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            ...(child.props as any).style,\n            flexGrow: 1,\n          },\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        } as any)\n      : child,\n  );\n};\n\nconst hasAdjacentPlaceholders = (children: ReactElement[]) => {\n  if (children && children.length > 0) {\n    let wasPlaceholder = getProp(children[0], \"placeholder\");\n    let isPlaceholder = false;\n    for (let i = 1; i < children.length; i++) {\n      isPlaceholder = getProp(children[i], \"placeholder\");\n      if (wasPlaceholder && isPlaceholder) {\n        return true;\n      }\n      wasPlaceholder = isPlaceholder;\n    }\n  }\n};\n\nconst collapsePlaceholders = (\n  container: ReactElement,\n  target: ReactElement,\n) => {\n  const { children: componentChildren, path } = getProps(container);\n  const { idx, finalStep } = nextStep(path, getProp(target, \"path\"));\n  let children = componentChildren.slice() as ReactElement[];\n  if (finalStep) {\n    children[idx] = _collapsePlaceHolders(target);\n  } else {\n    children[idx] = collapsePlaceholders(children[idx], target) as ReactElement;\n  }\n\n  children = children.map((child, i) => resetPath(child, `${path}.${i}`));\n  return React.cloneElement(container, undefined, children);\n};\n\nconst _collapsePlaceHolders = (container: ReactElement) => {\n  const { children } = getProps(container);\n  const newChildren = [];\n  const placeholders: ReactElement[] = [];\n\n  for (let i = 0; i < children.length; i++) {\n    if (getProp(children[i], \"placeholder\")) {\n      placeholders.push(children[i]);\n    } else {\n      if (placeholders.length === 1) {\n        newChildren.push(placeholders.pop());\n      } else if (placeholders.length > 0) {\n        newChildren.push(mergePlaceholders(placeholders));\n        placeholders.length = 0;\n      }\n      newChildren.push(children[i]);\n    }\n  }\n\n  if (placeholders.length === 1) {\n    newChildren.push(placeholders.pop());\n  } else if (placeholders.length > 0) {\n    newChildren.push(mergePlaceholders(placeholders));\n  }\n\n  const containerPath = getProp(container, \"path\");\n  return React.cloneElement(\n    container,\n    undefined,\n    newChildren.map((child, i) => resetPath(child, `${containerPath}.${i}`)),\n  );\n};\n\nconst mergePlaceholders = ([placeholder, ...placeholders]: ReactElement[]) => {\n  const targetStyle = getProp(placeholder, \"style\");\n  let { flexBasis, flexGrow, flexShrink } = targetStyle;\n  for (const placeholder of placeholders) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const { style } = placeholder.props as any;\n    flexBasis += style.flexBasis;\n    flexGrow = Math.max(flexGrow, style.flexGrow);\n    flexShrink = Math.max(flexShrink, style.flexShrink);\n  }\n  return React.cloneElement(placeholder, {\n    style: { ...targetStyle, flexBasis, flexGrow, flexShrink },\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  } as any);\n};\n\nconst allOtherChildrenArePlaceholders = (\n  children: ReactElement[],\n  path?: string,\n) =>\n  children.every(\n    (child) =>\n      getProp(child, \"placeholder\") ||\n      (path && getProp(child, \"path\") === path),\n  );\n"],"names":["followPath","followPathToParent","getProps","typeOf","getProp","swapChild","createPlaceHolder","children","flexBasis","display","flexDirection","style","nextStep","path","VuuShellLocation","layoutFromJson","child","resetPath","placeholder"],"mappings":"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"}

package/cjs/layout-reducer/replace-layout-element.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var React = require('react');
+var pathUtils = require('../utils/pathUtils.js');
+var propUtils = require('../utils/propUtils.js');
+var layoutUtils = require('./layoutUtils.js');
+
+function replaceChild(model, { target, replacement }) {
+  return _replaceChild(model, target, replacement);
+}
+function _replaceChild(model, child, replacement) {
+  const path = propUtils.getProp(child, "path");
+  const resizeable = propUtils.getProp(child, "resizeable");
+  const { style } = propUtils.getProps(child);
+  const newChild = layoutUtils.applyLayoutProps(
+    React.cloneElement(replacement, {
+      resizeable,
+      style: {
+        ...style,
+        ...replacement.props.style
+      }
+    }),
+    path
+  );
+  return swapChild(model, child, newChild);
+}
+function swapChild(model, child, replacement, op) {
+  if (model === child) {
+    return replacement;
+  }
+  const { idx, finalStep } = pathUtils.nextStep(
+    propUtils.getProp(model, "path"),
+    propUtils.getProp(child, "path")
+  );
+  const modelChildren = model.props.children;
+  const children = modelChildren.slice();
+  if (finalStep) {
+    if (!op) {
+      children[idx] = replacement;
+    } else if (op === "collapse") {
+      children[idx] = collapse(model, children[idx]);
+    } else if (op === "expand") {
+      children[idx] = expand(children[idx]);
+    }
+  } else {
+    children[idx] = swapChild(children[idx], child, replacement, op);
+  }
+  return React.cloneElement(model, void 0, children);
+}
+function collapse(parent, child) {
+  const { style: parentStyle } = propUtils.getProps(parent);
+  const { style: childStyle } = propUtils.getProps(child);
+  const { width, height, flexBasis, flexShrink, flexGrow, ...rest } = childStyle;
+  const restoreStyle = {
+    width,
+    height,
+    flexBasis,
+    flexShrink,
+    flexGrow
+  };
+  const style = {
+    ...rest,
+    flexBasis: 0,
+    flexGrow: 0,
+    flexShrink: 0
+  };
+  const collapsed = parentStyle.flexDirection === "row" ? "vertical" : parentStyle.flexDirection === "column" ? "horizontal" : false;
+  if (collapsed) {
+    return React.cloneElement(child, {
+      collapsed,
+      restoreStyle,
+      style
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    });
+  }
+  return child;
+}
+function expand(child) {
+  const { style: childStyle, restoreStyle } = propUtils.getProps(child);
+  const { flexBasis, flexShrink, flexGrow, ...rest } = childStyle;
+  const style = {
+    ...rest,
+    ...restoreStyle
+  };
+  return React.cloneElement(child, {
+    collapsed: false,
+    style,
+    restoreStyle: void 0
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  });
+}
+
+exports._replaceChild = _replaceChild;
+exports.replaceChild = replaceChild;
+exports.swapChild = swapChild;
+//# sourceMappingURL=replace-layout-element.js.map

package/cjs/layout-reducer/replace-layout-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"replace-layout-element.js","sources":["../../../../packages/vuu-layout/src/layout-reducer/replace-layout-element.ts"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { getProp, getProps, nextStep } from \"../utils\";\nimport { ReplaceAction } from \"./layoutTypes\";\nimport { applyLayoutProps, LayoutProps } from \"./layoutUtils\";\n\nexport function replaceChild(\n  model: ReactElement,\n  { target, replacement }: ReplaceAction,\n) {\n  return _replaceChild(model, target, replacement);\n}\n\nexport function _replaceChild(\n  model: ReactElement,\n  child: ReactElement,\n  replacement: ReactElement<LayoutProps>,\n) {\n  const path = getProp(child, \"path\");\n  const resizeable = getProp(child, \"resizeable\");\n  const { style } = getProps(child);\n  const newChild = applyLayoutProps(\n    React.cloneElement(replacement, {\n      resizeable,\n      style: {\n        ...style,\n        ...replacement.props.style,\n      },\n    }),\n    path,\n  );\n\n  return swapChild(model, child, newChild);\n}\n\nexport function swapChild(\n  model: ReactElement,\n  child: ReactElement,\n  replacement: ReactElement,\n  op?: \"collapse\" | \"expand\",\n): ReactElement {\n  if (model === child) {\n    return replacement;\n  }\n\n  const { idx, finalStep } = nextStep(\n    getProp(model, \"path\"),\n    getProp(child, \"path\"),\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const modelChildren = (model.props as any).children as ReactElement[];\n  const children = modelChildren.slice();\n\n  if (finalStep) {\n    if (!op) {\n      children[idx] = replacement;\n    } else if (op === \"collapse\") {\n      children[idx] = collapse(model, children[idx]);\n    } else if (op === \"expand\") {\n      children[idx] = expand(children[idx]);\n    }\n  } else {\n    children[idx] = swapChild(children[idx], child, replacement, op);\n  }\n  return React.cloneElement(model, undefined, children);\n}\n\nfunction collapse(parent: ReactElement, child: ReactElement) {\n  const { style: parentStyle } = getProps(parent);\n  const { style: childStyle } = getProps(child);\n\n  const { width, height, flexBasis, flexShrink, flexGrow, ...rest } =\n    childStyle;\n\n  const restoreStyle = {\n    width,\n    height,\n    flexBasis,\n    flexShrink,\n    flexGrow,\n  };\n\n  const style = {\n    ...rest,\n    flexBasis: 0,\n    flexGrow: 0,\n    flexShrink: 0,\n  };\n  const collapsed =\n    parentStyle.flexDirection === \"row\"\n      ? \"vertical\"\n      : parentStyle.flexDirection === \"column\"\n        ? \"horizontal\"\n        : false;\n\n  if (collapsed) {\n    return React.cloneElement(child, {\n      collapsed,\n      restoreStyle,\n      style,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  }\n  return child;\n}\n\nfunction expand(child: ReactElement) {\n  const { style: childStyle, restoreStyle } = getProps(child);\n\n  const { flexBasis, flexShrink, flexGrow, ...rest } = childStyle;\n\n  const style = {\n    ...rest,\n    ...restoreStyle,\n  };\n\n  return React.cloneElement(child, {\n    collapsed: false,\n    style,\n    restoreStyle: undefined,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  } as any);\n}\n"],"names":["getProp","getProps","applyLayoutProps","nextStep"],"mappings":"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"}

package/cjs/layout-reducer/resize-flex-children.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var React = require('react');
+var pathUtils = require('../utils/pathUtils.js');
+var propUtils = require('../utils/propUtils.js');
+var replaceLayoutElement = require('./replace-layout-element.js');
+
+function resizeFlexChild(layoutRoot, { path, size }) {
+  const target = pathUtils.followPath(layoutRoot, path, true);
+  const { style } = propUtils.getProps(target);
+  const newStyle = {
+    ...style,
+    width: size
+  };
+  const replacement = React.cloneElement(target, { style: newStyle });
+  return replaceLayoutElement.swapChild(layoutRoot, target, replacement);
+}
+function resizeFlexChildren(layoutRoot, { path, sizes }) {
+  const target = pathUtils.followPath(layoutRoot, path, true);
+  const { children, style } = propUtils.getProps(target);
+  const dimension2 = style.flexDirection === "column" ? "height" : "width";
+  const replacementChildren = applySizesToChildren(children, sizes, dimension2);
+  const replacement = React.cloneElement(
+    target,
+    void 0,
+    replacementChildren
+  );
+  return replaceLayoutElement.swapChild(layoutRoot, target, replacement);
+}
+function applySizesToChildren(children, sizes, dimension2) {
+  return children.map((child, i) => {
+    const {
+      style: { [dimension2]: size, flexBasis: actualFlexBasis }
+    } = propUtils.getProps(child);
+    const meta = sizes[i];
+    const { currentSize, flexBasis } = meta;
+    const hasCurrentSize = currentSize !== void 0;
+    const newSize = hasCurrentSize ? meta.currentSize : flexBasis;
+    if (newSize === void 0 || size === newSize || actualFlexBasis === newSize) {
+      return child;
+    }
+    return React.cloneElement(child, {
+      style: applySizeToChild(child.props.style, dimension2, newSize)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    });
+  });
+}
+function applySizeToChild(style, dimension2, newSize) {
+  const hasSize = typeof style[dimension2] === "number";
+  const { flexShrink = 1, flexGrow = 1 } = style;
+  return {
+    ...style,
+    [dimension2]: hasSize ? newSize : "auto",
+    flexBasis: hasSize ? "auto" : newSize,
+    flexShrink,
+    flexGrow
+  };
+}
+
+exports.resizeFlexChild = resizeFlexChild;
+exports.resizeFlexChildren = resizeFlexChildren;
+//# sourceMappingURL=resize-flex-children.js.map

package/cjs/layout-reducer/resize-flex-children.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-flex-children.js","sources":["../../../../packages/vuu-layout/src/layout-reducer/resize-flex-children.ts"],"sourcesContent":["import { dimension } from \"@vuu-ui/vuu-utils\";\nimport React, { CSSProperties, ReactElement } from \"react\";\nimport { followPath, getProps } from \"../utils\";\nimport { LayoutResizeAction, SplitterResizeAction } from \"./layoutTypes\";\nimport { swapChild } from \"./replace-layout-element\";\n\nexport function resizeFlexChild(\n  layoutRoot: ReactElement,\n  { path, size }: LayoutResizeAction,\n) {\n  const target = followPath(layoutRoot, path, true);\n\n  const { style } = getProps(target);\n\n  const newStyle = {\n    ...style,\n    width: size,\n  };\n\n  // const dimension = style.flexDirection === \"column\" ? \"height\" : \"width\";\n  // const replacementChildren = applySizesToChildren(children, sizes, dimension);\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const replacement = React.cloneElement(target, { style: newStyle } as any);\n\n  return swapChild(layoutRoot, target, replacement);\n}\n\nexport function resizeFlexChildren(\n  layoutRoot: ReactElement,\n  { path, sizes }: SplitterResizeAction,\n) {\n  const target = followPath(layoutRoot, path, true);\n  const { children, style } = getProps(target);\n\n  const dimension = style.flexDirection === \"column\" ? \"height\" : \"width\";\n  const replacementChildren = applySizesToChildren(children, sizes, dimension);\n\n  const replacement = React.cloneElement(\n    target,\n    undefined,\n    replacementChildren,\n  );\n\n  return swapChild(layoutRoot, target, replacement);\n}\n\nfunction applySizesToChildren(\n  children: ReactElement[],\n  sizes: { currentSize: number; flexBasis: number }[],\n  dimension: dimension,\n) {\n  return children.map((child, i) => {\n    const {\n      style: { [dimension]: size, flexBasis: actualFlexBasis },\n    } = getProps(child);\n    const meta = sizes[i];\n    const { currentSize, flexBasis } = meta;\n    const hasCurrentSize = currentSize !== undefined;\n    const newSize = hasCurrentSize ? meta.currentSize : flexBasis;\n\n    if (\n      newSize === undefined ||\n      size === newSize ||\n      actualFlexBasis === newSize\n    ) {\n      return child;\n    }\n    return React.cloneElement(child, {\n      style: applySizeToChild((child.props as any).style, dimension, newSize),\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  });\n}\n\nfunction applySizeToChild(\n  style: CSSProperties,\n  dimension: dimension,\n  newSize: number,\n) {\n  const hasSize = typeof style[dimension] === \"number\";\n  const { flexShrink = 1, flexGrow = 1 } = style;\n  return {\n    ...style,\n    [dimension]: hasSize ? newSize : \"auto\",\n    flexBasis: hasSize ? \"auto\" : newSize,\n    flexShrink,\n    flexGrow,\n  };\n}\n"],"names":["followPath","getProps","swapChild","dimension"],"mappings":";;;;;;;AAMO,SAAS,eACd,CAAA,UAAA,EACA,EAAE,IAAA,EAAM,MACR,EAAA;AACA,EAAA,MAAM,MAAS,GAAAA,oBAAA,CAAW,UAAY,EAAA,IAAA,EAAM,IAAI,CAAA;AAEhD,EAAA,MAAM,EAAE,KAAA,EAAU,GAAAC,kBAAA,CAAS,MAAM,CAAA;AAEjC,EAAA,MAAM,QAAW,GAAA;AAAA,IACf,GAAG,KAAA;AAAA,IACH,KAAO,EAAA;AAAA,GACT;AAMA,EAAA,MAAM,cAAc,KAAM,CAAA,YAAA,CAAa,QAAQ,EAAE,KAAA,EAAO,UAAiB,CAAA;AAEzE,EAAO,OAAAC,8BAAA,CAAU,UAAY,EAAA,MAAA,EAAQ,WAAW,CAAA;AAClD;AAEO,SAAS,kBACd,CAAA,UAAA,EACA,EAAE,IAAA,EAAM,OACR,EAAA;AACA,EAAA,MAAM,MAAS,GAAAF,oBAAA,CAAW,UAAY,EAAA,IAAA,EAAM,IAAI,CAAA;AAChD,EAAA,MAAM,EAAE,QAAA,EAAU,KAAM,EAAA,GAAIC,mBAAS,MAAM,CAAA;AAE3C,EAAA,MAAME,UAAY,GAAA,KAAA,CAAM,aAAkB,KAAA,QAAA,GAAW,QAAW,GAAA,OAAA;AAChE,EAAA,MAAM,mBAAsB,GAAA,oBAAA,CAAqB,QAAU,EAAA,KAAA,EAAOA,UAAS,CAAA;AAE3E,EAAA,MAAM,cAAc,KAAM,CAAA,YAAA;AAAA,IACxB,MAAA;AAAA,IACA,KAAA,CAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAO,OAAAD,8BAAA,CAAU,UAAY,EAAA,MAAA,EAAQ,WAAW,CAAA;AAClD;AAEA,SAAS,oBAAA,CACP,QACA,EAAA,KAAA,EACAC,UACA,EAAA;AACA,EAAA,OAAO,QAAS,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,CAAM,KAAA;AAChC,IAAM,MAAA;AAAA,MACJ,OAAO,EAAE,CAACA,UAAS,GAAG,IAAA,EAAM,WAAW,eAAgB;AAAA,KACzD,GAAIF,mBAAS,KAAK,CAAA;AAClB,IAAM,MAAA,IAAA,GAAO,MAAM,CAAC,CAAA;AACpB,IAAM,MAAA,EAAE,WAAa,EAAA,SAAA,EAAc,GAAA,IAAA;AACnC,IAAA,MAAM,iBAAiB,WAAgB,KAAA,KAAA,CAAA;AACvC,IAAM,MAAA,OAAA,GAAU,cAAiB,GAAA,IAAA,CAAK,WAAc,GAAA,SAAA;AAEpD,IAAA,IACE,OAAY,KAAA,KAAA,CAAA,IACZ,IAAS,KAAA,OAAA,IACT,oBAAoB,OACpB,EAAA;AACA,MAAO,OAAA,KAAA;AAAA;AAET,IAAO,OAAA,KAAA,CAAM,aAAa,KAAO,EAAA;AAAA,MAC/B,OAAO,gBAAkB,CAAA,KAAA,CAAM,KAAc,CAAA,KAAA,EAAOE,YAAW,OAAO;AAAA;AAAA,KAEhE,CAAA;AAAA,GACT,CAAA;AACH;AAEA,SAAS,gBAAA,CACP,KACAA,EAAAA,UAAAA,EACA,OACA,EAAA;AACA,EAAA,MAAM,OAAU,GAAA,OAAO,KAAMA,CAAAA,UAAS,CAAM,KAAA,QAAA;AAC5C,EAAA,MAAM,EAAE,UAAA,GAAa,CAAG,EAAA,QAAA,GAAW,GAAM,GAAA,KAAA;AACzC,EAAO,OAAA;AAAA,IACL,GAAG,KAAA;AAAA,IACH,CAACA,UAAS,GAAG,OAAA,GAAU,OAAU,GAAA,MAAA;AAAA,IACjC,SAAA,EAAW,UAAU,MAAS,GAAA,OAAA;AAAA,IAC9B,UAAA;AAAA,IACA;AAAA,GACF;AACF;;;;;"}

package/cjs/layout-reducer/wrap-layout-element.js

@@ -0,0 +1,211 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+var pathUtils = require('../utils/pathUtils.js');
+var propUtils = require('../utils/propUtils.js');
+var typeOf = require('../utils/typeOf.js');
+var flexUtils = require('./flexUtils.js');
+var layoutUtils = require('./layoutUtils.js');
+
+const isHtmlElement = (component) => {
+  const [firstLetter] = typeOf.typeOf(component);
+  return firstLetter === firstLetter.toLowerCase();
+};
+function wrap(container, existingComponent, newComponent, pos, clientRect, dropRect) {
+  const { children: containerChildren, path: containerPath } = propUtils.getProps(container);
+  const existingComponentPath = propUtils.getProp(existingComponent, "path");
+  const { idx, finalStep } = pathUtils.nextStep(containerPath, existingComponentPath);
+  const children = finalStep ? updateChildren(
+    container,
+    containerChildren,
+    existingComponent,
+    newComponent,
+    pos,
+    clientRect,
+    dropRect
+  ) : containerChildren.map(
+    (child, index) => index === idx ? wrap(
+      child,
+      existingComponent,
+      newComponent,
+      pos,
+      clientRect,
+      dropRect
+    ) : child
+  );
+  return React.cloneElement(container, void 0, children);
+}
+function updateChildren(container, containerChildren, existingComponent, newComponent, pos, clientRect, dropRect) {
+  const intrinsicSize = flexUtils.getIntrinsicSize(newComponent);
+  if (intrinsicSize?.width && intrinsicSize?.height) {
+    if (clientRect === void 0 || dropRect === void 0) {
+      throw Error(
+        "wrap-layout-element, updateChildren clientRect and dropRect must both be available"
+      );
+    }
+    return wrapIntrinsicSizedComponent(
+      containerChildren,
+      existingComponent,
+      newComponent,
+      pos,
+      clientRect,
+      dropRect
+    );
+  }
+  return wrapFlexComponent(
+    container,
+    containerChildren,
+    existingComponent,
+    newComponent,
+    pos
+  );
+}
+function wrapFlexComponent(container, containerChildren, existingComponent, newComponent, pos) {
+  const { version = 0 } = propUtils.getProps(newComponent);
+  const { path: existingComponentPath, title } = propUtils.getProps(existingComponent);
+  const {
+    type,
+    flexDirection: flexDirection2,
+    showTabs: showTabsProp
+  } = getLayoutSpecForWrapper(pos);
+  const [style, existingComponentStyle, newComponentStyle] = getWrappedFlexStyles(
+    type,
+    existingComponent,
+    newComponent,
+    flexDirection2,
+    pos
+  );
+  const targetFirst = isTargetFirst(pos);
+  const active = targetFirst ? 1 : 0;
+  const newComponentProps = {
+    resizeable: true,
+    style: newComponentStyle,
+    version: version + 1
+  };
+  const resizeProp = isHtmlElement(existingComponent) ? "data-resizeable" : "resizeable";
+  const existingComponentProps = {
+    [resizeProp]: true,
+    style: existingComponentStyle
+  };
+  const showTabs = type === "Stack" ? { showTabs: showTabsProp } : void 0;
+  const splitterSize = type === "Flexbox" ? {
+    splitterSize: (typeOf.typeOf(container) === "Flexbox" && container.props.splitterSize) ?? void 0
+  } : void 0;
+  const id = vuuUtils.uuid();
+  const wrapper = React.createElement(
+    vuuUtils.getLayoutComponent(type),
+    {
+      active,
+      id,
+      key: id,
+      path: propUtils.getProp(existingComponent, "path"),
+      flexFill: propUtils.getProp(existingComponent, "flexFill"),
+      ...splitterSize,
+      ...showTabs,
+      style,
+      title,
+      resizeable: propUtils.getProp(existingComponent, "resizeable")
+    },
+    targetFirst ? [
+      pathUtils.resetPath(
+        existingComponent,
+        `${existingComponentPath}.0`,
+        existingComponentProps
+      ),
+      layoutUtils.applyLayoutProps(
+        React.cloneElement(newComponent, newComponentProps),
+        `${existingComponentPath}.1`
+      )
+    ] : [
+      layoutUtils.applyLayoutProps(
+        React.cloneElement(newComponent, newComponentProps),
+        `${existingComponentPath}.0`
+      ),
+      pathUtils.resetPath(
+        existingComponent,
+        `${existingComponentPath}.1`,
+        existingComponentProps
+      )
+    ]
+  );
+  return containerChildren.map(
+    (child) => child === existingComponent ? wrapper : child
+  );
+}
+function wrapIntrinsicSizedComponent(containerChildren, existingComponent, newComponent, pos, clientRect, dropRect) {
+  const { flexDirection: flexDirection2 } = getLayoutSpecForWrapper(pos);
+  const contraDirection = flexDirection2 === "column" ? "row" : "column";
+  const targetFirst = isTargetFirst(pos);
+  const [dropLeft, dropTop, dropRight, dropBottom] = dropRect;
+  const [startPlaceholder, endPlaceholder] = flexDirection2 === "column" ? [dropTop - clientRect.top, clientRect.bottom - dropBottom] : [dropLeft - clientRect.left, clientRect.right - dropRight];
+  const pathRoot = propUtils.getProp(existingComponent, "path");
+  let pathIndex = 0;
+  const resizeProp = isHtmlElement(existingComponent) ? "data-resizeable" : "resizeable";
+  const wrappedChildren = [];
+  if (startPlaceholder) {
+    wrappedChildren.push(
+      targetFirst ? pathUtils.resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {
+        [resizeProp]: true,
+        style: { flexBasis: startPlaceholder, flexGrow: 1, flexShrink: 1 }
+      }) : flexUtils.createPlaceHolder(`${pathRoot}.${pathIndex++}`, startPlaceholder, {
+        flexGrow: 0,
+        flexShrink: 0
+      })
+    );
+  }
+  wrappedChildren.push(
+    flexUtils.wrapIntrinsicSizeComponentWithFlexbox(
+      newComponent,
+      contraDirection,
+      `${pathRoot}.${pathIndex++}`,
+      clientRect,
+      dropRect
+    )
+  );
+  if (endPlaceholder) {
+    wrappedChildren.push(
+      targetFirst ? flexUtils.createPlaceHolder(`${pathRoot}.${pathIndex++}`, 0) : pathUtils.resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {
+        [resizeProp]: true,
+        style: { flexBasis: 0, flexGrow: 1, flexShrink: 1 }
+      })
+    );
+  }
+  const wrapper = flexUtils.createFlexbox(
+    flexDirection2,
+    existingComponent.props,
+    wrappedChildren,
+    pathRoot
+  );
+  return containerChildren.map(
+    (child) => child === existingComponent ? wrapper : child
+  );
+}
+function getWrappedFlexStyles(type, existingComponent, newComponent, flexDirection2, pos) {
+  const style = {
+    ...existingComponent.props.style,
+    flexDirection: flexDirection2
+  };
+  const dimension = type === "Flexbox" && flexDirection2 === "column" ? "height" : "width";
+  const newComponentStyle = flexUtils.getFlexStyle(newComponent, dimension, pos);
+  const existingComponentStyle = flexUtils.getFlexStyle(existingComponent, dimension);
+  return [style, existingComponentStyle, newComponentStyle];
+}
+const isTargetFirst = (pos) => pos.position.SouthOrEast ? true : pos?.tab?.positionRelativeToTab === "before" ? false : pos.position.Header ? true : false;
+function getLayoutSpecForWrapper(pos) {
+  if (pos.position.Header) {
+    return {
+      type: "Stack",
+      flexDirection: "column",
+      showTabs: true
+    };
+  } else {
+    return {
+      type: "Flexbox",
+      flexDirection: pos.position.EastOrWest ? "row" : "column"
+    };
+  }
+}
+
+exports.wrap = wrap;
+//# sourceMappingURL=wrap-layout-element.js.map