@vuu-ui/vuu-layout 0.0.26

package/esm/layout-reducer/layoutUtils.js

@@ -0,0 +1,215 @@
+import { uuid } from '@vuu-ui/vuu-utils';
+import React, { cloneElement } from 'react';
+import { isContainer, ComponentRegistry, isLayoutComponent } from '../registry/ComponentRegistry.js';
+import { setPersistentState, hasPersistentState, getPersistentState } from '../use-persistent-state.js';
+import { followPathToParent } from '../utils/pathUtils.js';
+import { getProps } from '../utils/propUtils.js';
+import { expandFlex } from '../utils/styleUtils.js';
+import { typeOf } from '../utils/typeOf.js';
+
+const getManagedDimension = (style) => style.flexDirection === "column" ? ["height", "width"] : ["width", "height"];
+const theKidHasNoStyle = {};
+const applyLayoutProps = (component, path = "0") => {
+  const [layoutProps, children] = getChildLayoutProps(
+    typeOf(component),
+    component.props,
+    path
+  );
+  return React.cloneElement(component, layoutProps, children);
+};
+const processLayoutElement = (layoutElement, previousLayout) => {
+  const type = typeOf(layoutElement);
+  const [layoutProps, children] = getChildLayoutProps(
+    type,
+    layoutElement.props,
+    "0",
+    void 0,
+    previousLayout
+  );
+  return cloneElement(layoutElement, layoutProps, children);
+};
+const applyLayout = (type, props, previousLayout) => {
+  const [layoutProps, children] = getChildLayoutProps(
+    type,
+    props,
+    "0",
+    void 0,
+    previousLayout
+  );
+  return {
+    ...props,
+    ...layoutProps,
+    type,
+    children
+  };
+};
+function getLayoutProps(type, props, path = "0", parentType = null, previousLayout) {
+  const {
+    active: prevActive = 0,
+    "data-path": dataPath,
+    path: prevPath = dataPath,
+    id: prevId,
+    style: prevStyle
+  } = getProps(previousLayout);
+  const prevMatch = typeOf(previousLayout) === type && path === prevPath;
+  const id = prevMatch ? prevId : props.id ?? uuid();
+  const active = type === "Stack" ? props.active ?? prevActive : void 0;
+  const key = id;
+  const style = prevMatch ? prevStyle : getStyle(type, props, parentType);
+  return isLayoutComponent(type) ? { id, key, path, style, type, active } : { id, key, style, "data-path": path };
+}
+function getChildLayoutProps(type, props, path, parentType = null, previousLayout) {
+  const layoutProps = getLayoutProps(
+    type,
+    props,
+    path,
+    parentType,
+    previousLayout
+  );
+  if (props.layout && !previousLayout) {
+    return [layoutProps, [layoutFromJson(props.layout, `${path}.0`)]];
+  }
+  const previousChildren = previousLayout?.children ?? previousLayout?.props?.children;
+  const hasDynamicChildren = props.dropTarget && previousChildren;
+  const children = hasDynamicChildren ? previousChildren : getLayoutChildren(type, props.children, path, previousChildren);
+  return [layoutProps, children];
+}
+function getLayoutChildren(type, children, path = "0", previousChildren) {
+  const kids = Array.isArray(children) ? children : React.isValidElement(children) ? [children] : [];
+  return isContainer(type) ? kids.map((child, i) => {
+    const childType = typeOf(child);
+    const previousType = typeOf(previousChildren?.[i]);
+    if (!previousType || childType === previousType) {
+      const [layoutProps, children2] = getChildLayoutProps(
+        childType,
+        child.props,
+        `${path}.${i}`,
+        type,
+        previousChildren?.[i]
+      );
+      return React.cloneElement(child, layoutProps, children2);
+    }
+    return previousChildren?.[i];
+  }) : children;
+}
+const getStyle = (type, props, parentType) => {
+  let { style = theKidHasNoStyle } = props;
+  if (type === "Flexbox") {
+    style = {
+      flexDirection: props.column ? "column" : "row",
+      ...style,
+      display: "flex"
+    };
+  }
+  if (style.flex) {
+    const { flex, ...otherStyles } = style;
+    style = {
+      ...otherStyles,
+      ...expandFlex(typeof flex === "number" ? flex : 0)
+    };
+  } else if (parentType === "Stack") {
+    style = {
+      ...style,
+      ...expandFlex(1)
+    };
+  } else if (parentType === "Flexbox" && (style.width || style.height) && style.flexBasis === void 0) {
+    style = {
+      ...style,
+      flexBasis: "auto",
+      flexGrow: 0,
+      flexShrink: 0
+    };
+  }
+  return style;
+};
+function layoutFromJson({ id = uuid(), type, children, props, state }, path) {
+  const componentType = type.match(/^[a-z]/) ? type : ComponentRegistry[type];
+  if (componentType === void 0) {
+    throw Error(
+      `layoutUtils unable to create component from JSON, unknown type ${type}`
+    );
+  }
+  if (state) {
+    setPersistentState(id, state);
+  }
+  return React.createElement(
+    componentType,
+    {
+      id,
+      ...props,
+      key: id,
+      path
+    },
+    children ? children.map((child, i) => layoutFromJson(child, `${path}.${i}`)) : void 0
+  );
+}
+function layoutToJSON(component) {
+  return componentToJson(component);
+}
+function componentToJson(component) {
+  const type = typeOf(component);
+  const { id, children, type: _omit, ...props } = getProps(component);
+  const state = hasPersistentState(id) ? getPersistentState(id) : void 0;
+  return {
+    id,
+    type,
+    props: serializeProps(props),
+    state,
+    children: React.Children.map(children, componentToJson)
+  };
+}
+function serializeProps(props) {
+  if (props) {
+    const { path, ...otherProps } = props;
+    const result = {};
+    for (const [key, value] of Object.entries(otherProps)) {
+      result[key] = serializeValue(value);
+    }
+    return result;
+  }
+}
+function serializeValue(value) {
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return value;
+  } else if (Array.isArray(value)) {
+    return value.map(serializeValue);
+  } else if (typeof value === "object" && value !== null) {
+    const result = {};
+    for (const [k, v] of Object.entries(value)) {
+      result[k] = serializeValue(v);
+    }
+    return result;
+  }
+}
+const layoutQuery = (query, path, layoutRoot) => {
+  if (path && layoutRoot) {
+    const parentElement = followPathToParent(layoutRoot, path);
+    if (parentElement) {
+      const { id: parentContainerId } = getProps(parentElement);
+      const parentContainerType = typeOf(parentElement);
+      return {
+        parentContainerId,
+        parentContainerType
+      };
+    }
+    return {
+      parentContainerType: "Stack",
+      parentContainerId: "blah"
+    };
+  }
+};
+const getDefaultTabLabel = (component, tabIndex, existingLabels = []) => {
+  let label = component.props?.title ?? component.props?.["data-tab-title"];
+  if (label) {
+    return label;
+  } else {
+    let count = tabIndex;
+    do {
+      label = `Tab ${++count}`;
+    } while (existingLabels.includes(label));
+    return label;
+  }
+};
+
+export { applyLayout, applyLayoutProps, componentToJson, getDefaultTabLabel, getManagedDimension, layoutFromJson, layoutQuery, layoutToJSON, processLayoutElement, serializeProps };
+//# sourceMappingURL=layoutUtils.js.map

package/esm/layout-reducer/layoutUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layoutUtils.js","sources":["../../src/layout-reducer/layoutUtils.ts"],"sourcesContent":["import { dimension, uuid } from \"@vuu-ui/vuu-utils\";\nimport React, { cloneElement, CSSProperties, ReactElement } from \"react\";\nimport {\n  ComponentWithId,\n  ComponentRegistry,\n  isContainer,\n  isLayoutComponent,\n} from \"../registry/ComponentRegistry\";\nimport { TabLabelFactory } from \"../stack\";\nimport {\n  getPersistentState,\n  hasPersistentState,\n  setPersistentState,\n} from \"../use-persistent-state\";\nimport { expandFlex, followPathToParent, getProps, typeOf } from \"../utils\";\nimport { LayoutJSON, LayoutModel, layoutType } from \"./layoutTypes\";\n\nexport const getManagedDimension = (\n  style: CSSProperties\n): [dimension, dimension] =>\n  style.flexDirection === \"column\" ? [\"height\", \"width\"] : [\"width\", \"height\"];\n\nconst theKidHasNoStyle: CSSProperties = {};\n\nexport const applyLayoutProps = (component: ReactElement, path = \"0\") => {\n  const [layoutProps, children] = getChildLayoutProps(\n    typeOf(component) as string,\n    component.props,\n    path\n  );\n  return React.cloneElement(component, layoutProps, children);\n};\n\nexport interface LayoutProps extends ComponentWithId {\n  active?: number;\n  \"data-path\"?: string;\n  children?: ReactElement[];\n  column?: any;\n  dropTarget?: any;\n  key: string;\n  layout?: any;\n  path?: string;\n  resizeable?: boolean;\n  style: CSSProperties;\n  type?: string;\n  version?: number;\n}\n\n/**\n * parse the declarative JSX and clone adding layout attributes\n */\nexport const processLayoutElement = (\n  layoutElement: ReactElement,\n  previousLayout?: ReactElement\n): ReactElement => {\n  const type = typeOf(layoutElement) as string;\n  const [layoutProps, children] = getChildLayoutProps(\n    type,\n    layoutElement.props,\n    \"0\",\n    undefined,\n    previousLayout\n  );\n  return cloneElement(layoutElement, layoutProps, children);\n};\n\nexport const applyLayout = (\n  type: layoutType,\n  props: LayoutProps,\n  previousLayout?: LayoutModel\n): LayoutModel => {\n  const [layoutProps, children] = getChildLayoutProps(\n    type,\n    props,\n    \"0\",\n    undefined,\n    previousLayout\n  );\n  return {\n    ...props,\n    ...layoutProps,\n    type,\n    children,\n  };\n};\n\nfunction getLayoutProps(\n  type: string,\n  props: LayoutProps,\n  path = \"0\",\n  parentType: string | null = null,\n  previousLayout?: LayoutModel\n): LayoutProps {\n  const {\n    active: prevActive = 0,\n    \"data-path\": dataPath,\n    path: prevPath = dataPath,\n    id: prevId,\n    style: prevStyle,\n  } = getProps(previousLayout);\n\n  const prevMatch = typeOf(previousLayout) === type && path === prevPath;\n  const id = prevMatch ? prevId : props.id ?? uuid();\n  const active = type === \"Stack\" ? props.active ?? prevActive : undefined;\n\n  const key = id;\n  const style = prevMatch ? prevStyle : getStyle(type, props, parentType);\n  return isLayoutComponent(type)\n    ? { id, key, path, style, type, active }\n    : { id, key, style, \"data-path\": path };\n}\n\nfunction getChildLayoutProps(\n  type: string,\n  props: LayoutProps,\n  path: string,\n  parentType: string | null = null,\n  previousLayout?: LayoutModel\n): [LayoutProps, ReactElement[]] {\n  const layoutProps = getLayoutProps(\n    type,\n    props,\n    path,\n    parentType,\n    previousLayout\n  );\n\n  if (props.layout && !previousLayout) {\n    return [layoutProps, [layoutFromJson(props.layout, `${path}.0`)]];\n  }\n\n  const previousChildren =\n    (previousLayout as any)?.children ?? previousLayout?.props?.children;\n  const hasDynamicChildren = props.dropTarget && previousChildren;\n  const children = hasDynamicChildren\n    ? previousChildren\n    : getLayoutChildren(type, props.children, path, previousChildren);\n  return [layoutProps, children];\n}\n\nfunction getLayoutChildren(\n  type: string,\n  children?: ReactElement[],\n  path = \"0\",\n  previousChildren?: ReactElement[]\n) {\n  const kids = Array.isArray(children)\n    ? children\n    : React.isValidElement(children)\n    ? [children]\n    : [];\n  return isContainer(type)\n    ? kids.map((child, i) => {\n        const childType = typeOf(child) as string;\n        const previousType = typeOf(previousChildren?.[i]);\n\n        if (!previousType || childType === previousType) {\n          const [layoutProps, children] = getChildLayoutProps(\n            childType,\n            child.props,\n            `${path}.${i}`,\n            type,\n            previousChildren?.[i]\n          );\n          return React.cloneElement(child, layoutProps, children);\n        }\n\n        return previousChildren?.[i];\n      })\n    : children;\n}\n\nconst getStyle = (\n  type: string,\n  props: LayoutProps,\n  parentType?: string | null\n) => {\n  let { style = theKidHasNoStyle } = props;\n  if (type === \"Flexbox\") {\n    style = {\n      flexDirection: props.column ? \"column\" : \"row\",\n      ...style,\n      display: \"flex\",\n    };\n  }\n\n  if (style.flex) {\n    const { flex, ...otherStyles } = style;\n    style = {\n      ...otherStyles,\n      ...expandFlex(typeof flex === \"number\" ? flex : 0),\n    };\n  } else if (parentType === \"Stack\") {\n    style = {\n      ...style,\n      ...expandFlex(1),\n    };\n  } else if (\n    parentType === \"Flexbox\" &&\n    (style.width || style.height) &&\n    style.flexBasis === undefined\n  ) {\n    style = {\n      ...style,\n      flexBasis: \"auto\",\n      flexGrow: 0,\n      flexShrink: 0,\n    };\n  }\n\n  return style;\n};\n\nexport function layoutFromJson(\n  { id = uuid(), type, children, props, state }: LayoutJSON,\n  path: string\n): ReactElement {\n  const componentType = type.match(/^[a-z]/) ? type : ComponentRegistry[type];\n\n  if (componentType === undefined) {\n    throw Error(\n      `layoutUtils unable to create component from JSON, unknown type ${type}`\n    );\n  }\n\n  if (state) {\n    setPersistentState(id, state);\n  }\n\n  return React.createElement(\n    componentType,\n    {\n      id,\n      ...props,\n      key: id,\n      path,\n    },\n    children\n      ? children.map((child, i) => layoutFromJson(child, `${path}.${i}`))\n      : undefined\n  );\n}\n\nexport function layoutToJSON(component: ReactElement) {\n  return componentToJson(component);\n}\n\nexport function componentToJson(component: ReactElement): LayoutJSON {\n  const type = typeOf(component) as string;\n  const { id, children, type: _omit, ...props } = getProps(component);\n\n  const state = hasPersistentState(id) ? getPersistentState(id) : undefined;\n\n  return {\n    id,\n    type,\n    props: serializeProps(props as LayoutProps),\n    state,\n    children: React.Children.map(children, componentToJson),\n  };\n}\n\nexport function serializeProps(props?: LayoutProps) {\n  if (props) {\n    const { path, ...otherProps } = props;\n    const result: { [key: string]: any } = {};\n    for (const [key, value] of Object.entries(otherProps)) {\n      result[key] = serializeValue(value);\n    }\n    return result;\n  }\n}\n\nfunction serializeValue(value: unknown): any {\n  if (\n    typeof value === \"string\" ||\n    typeof value === \"number\" ||\n    typeof value === \"boolean\"\n  ) {\n    return value;\n  } else if (Array.isArray(value)) {\n    return value.map(serializeValue);\n  } else if (typeof value === \"object\" && value !== null) {\n    const result: { [key: string]: any } = {};\n    for (const [k, v] of Object.entries(value)) {\n      result[k] = serializeValue(v);\n    }\n    return result;\n  }\n}\n\n// This is experimental and the only query we support to start off with is\n// PARENT_CONTAINER\nexport type LayoutQuery = \"PARENT_CONTAINER\";\n\nexport const layoutQuery = (\n  query: LayoutQuery,\n  path?: string,\n  layoutRoot?: ReactElement\n) => {\n  if (path && layoutRoot) {\n    const parentElement = followPathToParent(layoutRoot, path);\n    if (parentElement) {\n      const { id: parentContainerId } = getProps(parentElement);\n      const parentContainerType = typeOf(parentElement);\n      return {\n        parentContainerId,\n        parentContainerType,\n      };\n    }\n    return {\n      parentContainerType: \"Stack\",\n      parentContainerId: \"blah\",\n    };\n  }\n};\n\nexport const getDefaultTabLabel: TabLabelFactory = (\n  component,\n  tabIndex,\n  existingLabels = []\n): string => {\n  let label = component.props?.title ?? component.props?.[\"data-tab-title\"];\n  if (label) {\n    return label;\n  } else {\n    let count = tabIndex;\n    do {\n      label = `Tab ${++count}`;\n    } while (existingLabels.includes(label));\n    return label;\n  }\n};\n"],"names":["children"],"mappings":";;;;;;;;;AAiBO,MAAM,mBAAsB,GAAA,CACjC,KAEA,KAAA,KAAA,CAAM,aAAkB,KAAA,QAAA,GAAW,CAAC,QAAA,EAAU,OAAO,CAAA,GAAI,CAAC,OAAA,EAAS,QAAQ,EAAA;AAE7E,MAAM,mBAAkC,EAAC,CAAA;AAElC,MAAM,gBAAmB,GAAA,CAAC,SAAyB,EAAA,IAAA,GAAO,GAAQ,KAAA;AACvE,EAAM,MAAA,CAAC,WAAa,EAAA,QAAQ,CAAI,GAAA,mBAAA;AAAA,IAC9B,OAAO,SAAS,CAAA;AAAA,IAChB,SAAU,CAAA,KAAA;AAAA,IACV,IAAA;AAAA,GACF,CAAA;AACA,EAAA,OAAO,KAAM,CAAA,YAAA,CAAa,SAAW,EAAA,WAAA,EAAa,QAAQ,CAAA,CAAA;AAC5D,EAAA;AAoBa,MAAA,oBAAA,GAAuB,CAClC,aAAA,EACA,cACiB,KAAA;AACjB,EAAM,MAAA,IAAA,GAAO,OAAO,aAAa,CAAA,CAAA;AACjC,EAAM,MAAA,CAAC,WAAa,EAAA,QAAQ,CAAI,GAAA,mBAAA;AAAA,IAC9B,IAAA;AAAA,IACA,aAAc,CAAA,KAAA;AAAA,IACd,GAAA;AAAA,IACA,KAAA,CAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AACA,EAAO,OAAA,YAAA,CAAa,aAAe,EAAA,WAAA,EAAa,QAAQ,CAAA,CAAA;AAC1D,EAAA;AAEO,MAAM,WAAc,GAAA,CACzB,IACA,EAAA,KAAA,EACA,cACgB,KAAA;AAChB,EAAM,MAAA,CAAC,WAAa,EAAA,QAAQ,CAAI,GAAA,mBAAA;AAAA,IAC9B,IAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAA;AAAA,IACA,KAAA,CAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AACA,EAAO,OAAA;AAAA,IACL,GAAG,KAAA;AAAA,IACH,GAAG,WAAA;AAAA,IACH,IAAA;AAAA,IACA,QAAA;AAAA,GACF,CAAA;AACF,EAAA;AAEA,SAAS,eACP,IACA,EAAA,KAAA,EACA,OAAO,GACP,EAAA,UAAA,GAA4B,MAC5B,cACa,EAAA;AACb,EAAM,MAAA;AAAA,IACJ,QAAQ,UAAa,GAAA,CAAA;AAAA,IACrB,WAAa,EAAA,QAAA;AAAA,IACb,MAAM,QAAW,GAAA,QAAA;AAAA,IACjB,EAAI,EAAA,MAAA;AAAA,IACJ,KAAO,EAAA,SAAA;AAAA,GACT,GAAI,SAAS,cAAc,CAAA,CAAA;AAE3B,EAAA,MAAM,SAAY,GAAA,MAAA,CAAO,cAAc,CAAA,KAAM,QAAQ,IAAS,KAAA,QAAA,CAAA;AAC9D,EAAA,MAAM,EAAK,GAAA,SAAA,GAAY,MAAS,GAAA,KAAA,CAAM,MAAM,IAAK,EAAA,CAAA;AACjD,EAAA,MAAM,MAAS,GAAA,IAAA,KAAS,OAAU,GAAA,KAAA,CAAM,UAAU,UAAa,GAAA,KAAA,CAAA,CAAA;AAE/D,EAAA,MAAM,GAAM,GAAA,EAAA,CAAA;AACZ,EAAA,MAAM,QAAQ,SAAY,GAAA,SAAA,GAAY,QAAS,CAAA,IAAA,EAAM,OAAO,UAAU,CAAA,CAAA;AACtE,EAAA,OAAO,kBAAkB,IAAI,CAAA,GACzB,EAAE,EAAA,EAAI,KAAK,IAAM,EAAA,KAAA,EAAO,IAAM,EAAA,MAAA,KAC9B,EAAE,EAAA,EAAI,GAAK,EAAA,KAAA,EAAO,aAAa,IAAK,EAAA,CAAA;AAC1C,CAAA;AAEA,SAAS,oBACP,IACA,EAAA,KAAA,EACA,IACA,EAAA,UAAA,GAA4B,MAC5B,cAC+B,EAAA;AAC/B,EAAA,MAAM,WAAc,GAAA,cAAA;AAAA,IAClB,IAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AAEA,EAAI,IAAA,KAAA,CAAM,MAAU,IAAA,CAAC,cAAgB,EAAA;AACnC,IAAO,OAAA,CAAC,WAAa,EAAA,CAAC,cAAe,CAAA,KAAA,CAAM,QAAQ,CAAG,EAAA,IAAI,CAAI,EAAA,CAAA,CAAC,CAAC,CAAA,CAAA;AAAA,GAClE;AAEA,EAAA,MAAM,gBACH,GAAA,cAAA,EAAwB,QAAY,IAAA,cAAA,EAAgB,KAAO,EAAA,QAAA,CAAA;AAC9D,EAAM,MAAA,kBAAA,GAAqB,MAAM,UAAc,IAAA,gBAAA,CAAA;AAC/C,EAAM,MAAA,QAAA,GAAW,qBACb,gBACA,GAAA,iBAAA,CAAkB,MAAM,KAAM,CAAA,QAAA,EAAU,MAAM,gBAAgB,CAAA,CAAA;AAClE,EAAO,OAAA,CAAC,aAAa,QAAQ,CAAA,CAAA;AAC/B,CAAA;AAEA,SAAS,iBACP,CAAA,IAAA,EACA,QACA,EAAA,IAAA,GAAO,KACP,gBACA,EAAA;AACA,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,OAAQ,CAAA,QAAQ,CAC/B,GAAA,QAAA,GACA,KAAM,CAAA,cAAA,CAAe,QAAQ,CAAA,GAC7B,CAAC,QAAQ,IACT,EAAC,CAAA;AACL,EAAA,OAAO,YAAY,IAAI,CAAA,GACnB,KAAK,GAAI,CAAA,CAAC,OAAO,CAAM,KAAA;AACrB,IAAM,MAAA,SAAA,GAAY,OAAO,KAAK,CAAA,CAAA;AAC9B,IAAA,MAAM,YAAe,GAAA,MAAA,CAAO,gBAAmB,GAAA,CAAC,CAAC,CAAA,CAAA;AAEjD,IAAI,IAAA,CAAC,YAAgB,IAAA,SAAA,KAAc,YAAc,EAAA;AAC/C,MAAM,MAAA,CAAC,WAAaA,EAAAA,SAAQ,CAAI,GAAA,mBAAA;AAAA,QAC9B,SAAA;AAAA,QACA,KAAM,CAAA,KAAA;AAAA,QACN,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,CAAC,CAAA,CAAA;AAAA,QACZ,IAAA;AAAA,QACA,mBAAmB,CAAC,CAAA;AAAA,OACtB,CAAA;AACA,MAAA,OAAO,KAAM,CAAA,YAAA,CAAa,KAAO,EAAA,WAAA,EAAaA,SAAQ,CAAA,CAAA;AAAA,KACxD;AAEA,IAAA,OAAO,mBAAmB,CAAC,CAAA,CAAA;AAAA,GAC5B,CACD,GAAA,QAAA,CAAA;AACN,CAAA;AAEA,MAAM,QAAW,GAAA,CACf,IACA,EAAA,KAAA,EACA,UACG,KAAA;AACH,EAAI,IAAA,EAAE,KAAQ,GAAA,gBAAA,EAAqB,GAAA,KAAA,CAAA;AACnC,EAAA,IAAI,SAAS,SAAW,EAAA;AACtB,IAAQ,KAAA,GAAA;AAAA,MACN,aAAA,EAAe,KAAM,CAAA,MAAA,GAAS,QAAW,GAAA,KAAA;AAAA,MACzC,GAAG,KAAA;AAAA,MACH,OAAS,EAAA,MAAA;AAAA,KACX,CAAA;AAAA,GACF;AAEA,EAAA,IAAI,MAAM,IAAM,EAAA;AACd,IAAA,MAAM,EAAE,IAAA,EAAM,GAAG,WAAA,EAAgB,GAAA,KAAA,CAAA;AACjC,IAAQ,KAAA,GAAA;AAAA,MACN,GAAG,WAAA;AAAA,MACH,GAAG,UAAW,CAAA,OAAO,IAAS,KAAA,QAAA,GAAW,OAAO,CAAC,CAAA;AAAA,KACnD,CAAA;AAAA,GACF,MAAA,IAAW,eAAe,OAAS,EAAA;AACjC,IAAQ,KAAA,GAAA;AAAA,MACN,GAAG,KAAA;AAAA,MACH,GAAG,WAAW,CAAC,CAAA;AAAA,KACjB,CAAA;AAAA,GACF,MAAA,IACE,eAAe,SACd,KAAA,KAAA,CAAM,SAAS,KAAM,CAAA,MAAA,CAAA,IACtB,KAAM,CAAA,SAAA,KAAc,KACpB,CAAA,EAAA;AACA,IAAQ,KAAA,GAAA;AAAA,MACN,GAAG,KAAA;AAAA,MACH,SAAW,EAAA,MAAA;AAAA,MACX,QAAU,EAAA,CAAA;AAAA,MACV,UAAY,EAAA,CAAA;AAAA,KACd,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,KAAA,CAAA;AACT,CAAA,CAAA;AAEgB,SAAA,cAAA,CACd,EAAE,EAAA,GAAK,IAAK,EAAA,EAAG,MAAM,QAAU,EAAA,KAAA,EAAO,KAAM,EAAA,EAC5C,IACc,EAAA;AACd,EAAA,MAAM,gBAAgB,IAAK,CAAA,KAAA,CAAM,QAAQ,CAAI,GAAA,IAAA,GAAO,kBAAkB,IAAI,CAAA,CAAA;AAE1E,EAAA,IAAI,kBAAkB,KAAW,CAAA,EAAA;AAC/B,IAAM,MAAA,KAAA;AAAA,MACJ,kEAAkE,IAAI,CAAA,CAAA;AAAA,KACxE,CAAA;AAAA,GACF;AAEA,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,kBAAA,CAAmB,IAAI,KAAK,CAAA,CAAA;AAAA,GAC9B;AAEA,EAAA,OAAO,KAAM,CAAA,aAAA;AAAA,IACX,aAAA;AAAA,IACA;AAAA,MACE,EAAA;AAAA,MACA,GAAG,KAAA;AAAA,MACH,GAAK,EAAA,EAAA;AAAA,MACL,IAAA;AAAA,KACF;AAAA,IACA,QACI,GAAA,QAAA,CAAS,GAAI,CAAA,CAAC,OAAO,CAAM,KAAA,cAAA,CAAe,KAAO,EAAA,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,CAAC,CAAA,CAAE,CAAC,CAChE,GAAA,KAAA,CAAA;AAAA,GACN,CAAA;AACF,CAAA;AAEO,SAAS,aAAa,SAAyB,EAAA;AACpD,EAAA,OAAO,gBAAgB,SAAS,CAAA,CAAA;AAClC,CAAA;AAEO,SAAS,gBAAgB,SAAqC,EAAA;AACnE,EAAM,MAAA,IAAA,GAAO,OAAO,SAAS,CAAA,CAAA;AAC7B,EAAM,MAAA,EAAE,IAAI,QAAU,EAAA,IAAA,EAAM,OAAO,GAAG,KAAA,EAAU,GAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAElE,EAAA,MAAM,QAAQ,kBAAmB,CAAA,EAAE,CAAI,GAAA,kBAAA,CAAmB,EAAE,CAAI,GAAA,KAAA,CAAA,CAAA;AAEhE,EAAO,OAAA;AAAA,IACL,EAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA,EAAO,eAAe,KAAoB,CAAA;AAAA,IAC1C,KAAA;AAAA,IACA,QAAU,EAAA,KAAA,CAAM,QAAS,CAAA,GAAA,CAAI,UAAU,eAAe,CAAA;AAAA,GACxD,CAAA;AACF,CAAA;AAEO,SAAS,eAAe,KAAqB,EAAA;AAClD,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,MAAM,EAAE,IAAA,EAAM,GAAG,UAAA,EAAe,GAAA,KAAA,CAAA;AAChC,IAAA,MAAM,SAAiC,EAAC,CAAA;AACxC,IAAA,KAAA,MAAW,CAAC,GAAK,EAAA,KAAK,KAAK,MAAO,CAAA,OAAA,CAAQ,UAAU,CAAG,EAAA;AACrD,MAAO,MAAA,CAAA,GAAG,CAAI,GAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAAA,KACpC;AACA,IAAO,OAAA,MAAA,CAAA;AAAA,GACT;AACF,CAAA;AAEA,SAAS,eAAe,KAAqB,EAAA;AAC3C,EACE,IAAA,OAAO,UAAU,QACjB,IAAA,OAAO,UAAU,QACjB,IAAA,OAAO,UAAU,SACjB,EAAA;AACA,IAAO,OAAA,KAAA,CAAA;AAAA,GACE,MAAA,IAAA,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AAC/B,IAAO,OAAA,KAAA,CAAM,IAAI,cAAc,CAAA,CAAA;AAAA,GACtB,MAAA,IAAA,OAAO,KAAU,KAAA,QAAA,IAAY,UAAU,IAAM,EAAA;AACtD,IAAA,MAAM,SAAiC,EAAC,CAAA;AACxC,IAAA,KAAA,MAAW,CAAC,CAAG,EAAA,CAAC,KAAK,MAAO,CAAA,OAAA,CAAQ,KAAK,CAAG,EAAA;AAC1C,MAAO,MAAA,CAAA,CAAC,CAAI,GAAA,cAAA,CAAe,CAAC,CAAA,CAAA;AAAA,KAC9B;AACA,IAAO,OAAA,MAAA,CAAA;AAAA,GACT;AACF,CAAA;AAMO,MAAM,WAAc,GAAA,CACzB,KACA,EAAA,IAAA,EACA,UACG,KAAA;AACH,EAAA,IAAI,QAAQ,UAAY,EAAA;AACtB,IAAM,MAAA,aAAA,GAAgB,kBAAmB,CAAA,UAAA,EAAY,IAAI,CAAA,CAAA;AACzD,IAAA,IAAI,aAAe,EAAA;AACjB,MAAA,MAAM,EAAE,EAAA,EAAI,iBAAkB,EAAA,GAAI,SAAS,aAAa,CAAA,CAAA;AACxD,MAAM,MAAA,mBAAA,GAAsB,OAAO,aAAa,CAAA,CAAA;AAChD,MAAO,OAAA;AAAA,QACL,iBAAA;AAAA,QACA,mBAAA;AAAA,OACF,CAAA;AAAA,KACF;AACA,IAAO,OAAA;AAAA,MACL,mBAAqB,EAAA,OAAA;AAAA,MACrB,iBAAmB,EAAA,MAAA;AAAA,KACrB,CAAA;AAAA,GACF;AACF,EAAA;AAEO,MAAM,qBAAsC,CACjD,SAAA,EACA,QACA,EAAA,cAAA,GAAiB,EACN,KAAA;AACX,EAAA,IAAI,QAAQ,SAAU,CAAA,KAAA,EAAO,KAAS,IAAA,SAAA,CAAU,QAAQ,gBAAgB,CAAA,CAAA;AACxE,EAAA,IAAI,KAAO,EAAA;AACT,IAAO,OAAA,KAAA,CAAA;AAAA,GACF,MAAA;AACL,IAAA,IAAI,KAAQ,GAAA,QAAA,CAAA;AACZ,IAAG,GAAA;AACD,MAAQ,KAAA,GAAA,CAAA,IAAA,EAAO,EAAE,KAAK,CAAA,CAAA,CAAA;AAAA,KACxB,QAAS,cAAe,CAAA,QAAA,CAAS,KAAK,CAAA,EAAA;AACtC,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AACF;;;;"}

package/esm/layout-reducer/move-layout-element.js

@@ -0,0 +1,29 @@
+import { cloneElement } from 'react';
+import { followPath } from '../utils/pathUtils.js';
+import { getProps } from '../utils/propUtils.js';
+import { swapChild } from './replace-layout-element.js';
+
+function moveChild(layoutRoot, { fromIndex, path, toIndex }) {
+  const target = followPath(layoutRoot, path, true);
+  const { children } = getProps(target);
+  const replacementChildren = moveChildWithinChildren(
+    children,
+    fromIndex,
+    toIndex
+  );
+  const replacement = cloneElement(target, void 0, replacementChildren);
+  return swapChild(layoutRoot, target, replacement);
+}
+function moveChildWithinChildren(children, fromIndex, toIndex) {
+  const newChildren = children.slice();
+  const [child] = newChildren.splice(fromIndex, 1);
+  if (toIndex === -1) {
+    return newChildren.concat(child);
+  } else {
+    newChildren.splice(toIndex, 0, child);
+    return newChildren;
+  }
+}
+
+export { moveChild };
+//# sourceMappingURL=move-layout-element.js.map

package/esm/layout-reducer/move-layout-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"move-layout-element.js","sources":["../../src/layout-reducer/move-layout-element.ts"],"sourcesContent":["import { cloneElement, ReactElement } from \"react\";\nimport { followPath, getProps } from \"../utils\";\nimport { MoveChildAction } from \"./layoutTypes\";\nimport { swapChild } from \"./replace-layout-element\";\n\nexport function moveChild(\n  layoutRoot: ReactElement,\n  { fromIndex, path, toIndex }: MoveChildAction\n) {\n  const target = followPath(layoutRoot, path, true);\n  const { children } = getProps(target);\n  const replacementChildren = moveChildWithinChildren(\n    children,\n    fromIndex,\n    toIndex\n  );\n  const replacement = cloneElement(target, undefined, replacementChildren);\n  return swapChild(layoutRoot, target, replacement);\n}\n\nfunction moveChildWithinChildren(\n  children: ReactElement[],\n  fromIndex: number,\n  toIndex: number\n) {\n  const newChildren = children.slice();\n  const [child] = newChildren.splice(fromIndex, 1);\n  if (toIndex === -1) {\n    return newChildren.concat(child);\n  } else {\n    newChildren.splice(toIndex, 0, child);\n    return newChildren;\n  }\n}\n"],"names":[],"mappings":";;;;;AAKO,SAAS,UACd,UACA,EAAA,EAAE,SAAW,EAAA,IAAA,EAAM,SACnB,EAAA;AACA,EAAA,MAAM,MAAS,GAAA,UAAA,CAAW,UAAY,EAAA,IAAA,EAAM,IAAI,CAAA,CAAA;AAChD,EAAA,MAAM,EAAE,QAAA,EAAa,GAAA,QAAA,CAAS,MAAM,CAAA,CAAA;AACpC,EAAA,MAAM,mBAAsB,GAAA,uBAAA;AAAA,IAC1B,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AACA,EAAA,MAAM,WAAc,GAAA,YAAA,CAAa,MAAQ,EAAA,KAAA,CAAA,EAAW,mBAAmB,CAAA,CAAA;AACvE,EAAO,OAAA,SAAA,CAAU,UAAY,EAAA,MAAA,EAAQ,WAAW,CAAA,CAAA;AAClD,CAAA;AAEA,SAAS,uBAAA,CACP,QACA,EAAA,SAAA,EACA,OACA,EAAA;AACA,EAAM,MAAA,WAAA,GAAc,SAAS,KAAM,EAAA,CAAA;AACnC,EAAA,MAAM,CAAC,KAAK,CAAA,GAAI,WAAY,CAAA,MAAA,CAAO,WAAW,CAAC,CAAA,CAAA;AAC/C,EAAA,IAAI,YAAY,CAAI,CAAA,EAAA;AAClB,IAAO,OAAA,WAAA,CAAY,OAAO,KAAK,CAAA,CAAA;AAAA,GAC1B,MAAA;AACL,IAAY,WAAA,CAAA,MAAA,CAAO,OAAS,EAAA,CAAA,EAAG,KAAK,CAAA,CAAA;AACpC,IAAO,OAAA,WAAA,CAAA;AAAA,GACT;AACF;;;;"}

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

@@ -0,0 +1,221 @@
+import React from 'react';
+import { createPlaceHolder } from './flexUtils.js';
+import { layoutFromJson } from './layoutUtils.js';
+import { swapChild } from './replace-layout-element.js';
+import { followPath, followPathToParent, nextStep, resetPath } from '../utils/pathUtils.js';
+import { getProps, getProp } from '../utils/propUtils.js';
+import { typeOf } from '../utils/typeOf.js';
+
+function removeChild(layoutRoot, { path }) {
+  const target = followPath(layoutRoot, path);
+  let targetParent = followPathToParent(layoutRoot, path);
+  if (targetParent === null) {
+    return layoutRoot;
+  }
+  const { children } = getProps(targetParent);
+  if (
+    // this is very specific to explicitly sized components
+    children.length > 1 && typeOf(targetParent) !== "Stack" && allOtherChildrenArePlaceholders(children, path)
+  ) {
+    const {
+      style: { flexBasis, display, flexDirection, ...style }
+    } = getProps(targetParent);
+    let containerPath = getProp(targetParent, "path");
+    let newLayout = swapChild(
+      layoutRoot,
+      targetParent,
+      createPlaceHolder(containerPath, flexBasis, style)
+    );
+    while (targetParent = followPathToParent(newLayout, containerPath)) {
+      if (getProp(targetParent, "path") === "0") {
+        break;
+      }
+      const { children: children2 } = getProps(targetParent);
+      if (allOtherChildrenArePlaceholders(children2)) {
+        containerPath = getProp(targetParent, "path");
+        const {
+          style: { flexBasis: flexBasis2, display: display2, flexDirection: flexDirection2, ...style2 }
+        } = getProps(targetParent);
+        newLayout = swapChild(
+          layoutRoot,
+          targetParent,
+          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 = getProps(container);
+  const { children: componentChildren, path, preserve } = props;
+  let { active, id: containerId } = props;
+  const { idx, finalStep } = nextStep(path, getProp(child, "path"));
+  const type = 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 }
+      } = getProps(child);
+      const placeHolder = containerId === "main-tabs" ? layoutFromJson(
+        {
+          props: {
+            style: { flexGrow: 1, flexShrink: 1, flexBasis },
+            title: "Tab 1"
+          },
+          type: "Placeholder"
+        },
+        path2
+      ) : 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) => resetPath(child2, `${path}.${i}`));
+  return React.cloneElement(container, { active }, children);
+}
+function unwrap(container, child) {
+  const type = typeOf(container);
+  const {
+    path,
+    style: { flexBasis, flexGrow, flexShrink, width, height }
+  } = getProps(container);
+  let unwrappedChild = resetPath(child, path);
+  if (path === "0") {
+    unwrappedChild = React.cloneElement(unwrappedChild, {
+      style: {
+        ...child.props.style,
+        width,
+        height
+      }
+    });
+  } else if (type === "Flexbox") {
+    const dim = container.props.style.flexDirection === "column" ? "height" : "width";
+    const {
+      style: { [dim]: size, ...style }
+    } = unwrappedChild.props;
+    unwrappedChild = React.cloneElement(unwrappedChild, {
+      flexFill: void 0,
+      style: {
+        ...style,
+        flexGrow,
+        flexShrink,
+        flexBasis,
+        width,
+        height
+      }
+    });
+  }
+  return unwrappedChild;
+}
+const isFlexible = (element) => {
+  return element.props.style.flexGrow > 0;
+};
+const canBeMadeFlexible = (element) => {
+  const { width, height, flexGrow } = element.props.style;
+  return flexGrow === 0 && typeof width !== "number" && typeof height !== "number";
+};
+const makeFlexible = (children) => {
+  return children.map(
+    (child) => canBeMadeFlexible(child) ? React.cloneElement(child, {
+      style: {
+        ...child.props.style,
+        flexGrow: 1
+      }
+    }) : child
+  );
+};
+const hasAdjacentPlaceholders = (children) => {
+  if (children && children.length > 0) {
+    let wasPlaceholder = getProp(children[0], "placeholder");
+    let isPlaceholder = false;
+    for (let i = 1; i < children.length; i++) {
+      isPlaceholder = getProp(children[i], "placeholder");
+      if (wasPlaceholder && isPlaceholder) {
+        return true;
+      }
+      wasPlaceholder = isPlaceholder;
+    }
+  }
+};
+const collapsePlaceholders = (container, target) => {
+  const { children: componentChildren, path } = getProps(container);
+  const { idx, finalStep } = nextStep(path, 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) => resetPath(child, `${path}.${i}`));
+  return React.cloneElement(container, void 0, children);
+};
+const _collapsePlaceHolders = (container) => {
+  const { children } = getProps(container);
+  const newChildren = [];
+  const placeholders = [];
+  for (let i = 0; i < children.length; i++) {
+    if (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 = getProp(container, "path");
+  return React.cloneElement(
+    container,
+    void 0,
+    newChildren.map((child, i) => resetPath(child, `${containerPath}.${i}`))
+  );
+};
+const mergePlaceholders = ([placeholder, ...placeholders]) => {
+  const targetStyle = getProp(placeholder, "style");
+  let { flexBasis, flexGrow, flexShrink } = targetStyle;
+  for (const {
+    props: { style }
+  } of placeholders) {
+    flexBasis += style.flexBasis;
+    flexGrow = Math.max(flexGrow, style.flexGrow);
+    flexShrink = Math.max(flexShrink, style.flexShrink);
+  }
+  return React.cloneElement(placeholder, {
+    style: { ...targetStyle, flexBasis, flexGrow, flexShrink }
+  });
+};
+const allOtherChildrenArePlaceholders = (children, path) => children.every(
+  (child) => getProp(child, "placeholder") || path && getProp(child, "path") === path
+);
+
+export { removeChild };
+//# sourceMappingURL=remove-layout-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"remove-layout-element.js","sources":["../../src/layout-reducer/remove-layout-element.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport React, { ReactElement } from \"react\";\nimport { createPlaceHolder } from \"./flexUtils\";\nimport { layoutFromJson } from \"./layoutUtils\";\nimport { swapChild } from \"./replace-layout-element\";\n\nimport {\n  followPath,\n  followPathToParent,\n  getProp,\n  getProps,\n  nextStep,\n  resetPath,\n  typeOf,\n} from \"../utils\";\nimport { RemoveAction } from \"./layoutTypes\";\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 === \"main-tabs\"\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  return React.cloneElement(container, { active }, 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        ...child.props.style,\n        width,\n        height,\n      },\n    });\n  } else if (type === \"Flexbox\") {\n    const dim =\n      container.props.style.flexDirection === \"column\" ? \"height\" : \"width\";\n    const {\n      style: { [dim]: size, ...style },\n    } = unwrappedChild.props;\n    unwrappedChild = React.cloneElement(unwrappedChild, {\n      flexFill: undefined,\n      style: {\n        ...style,\n        flexGrow,\n        flexShrink,\n        flexBasis,\n        width,\n        height,\n      },\n    });\n  }\n  return unwrappedChild;\n}\n\nconst isFlexible = (element: ReactElement) => {\n  return element.props.style.flexGrow > 0;\n};\n\nconst canBeMadeFlexible = (element: ReactElement) => {\n  const { width, height, flexGrow } = element.props.style;\n  return (\n    flexGrow === 0 && typeof width !== \"number\" && typeof height !== \"number\"\n  );\n};\n\nconst makeFlexible = (children: ReactElement[]) => {\n  return children.map((child) =>\n    canBeMadeFlexible(child)\n      ? React.cloneElement(child, {\n          style: {\n            ...child.props.style,\n            flexGrow: 1,\n          },\n        })\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 {\n    props: { style },\n  } of placeholders) {\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  });\n};\n\nconst allOtherChildrenArePlaceholders = (\n  children: ReactElement[],\n  path?: string\n) =>\n  children.every(\n    (child) =>\n      getProp(child, \"placeholder\") || (path && getProp(child, \"path\") === path)\n  );\n"],"names":["children","flexBasis","display","flexDirection","style","path","child"],"mappings":"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"}

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Action } from '../layout-action.js';
+import { nextStep } from '../utils/pathUtils.js';
+import { getProp, getProps } from '../utils/propUtils.js';
+import { applyLayoutProps } from './layoutUtils.js';
+
+function replaceChild(model, { target, replacement }) {
+  return _replaceChild(model, target, replacement);
+}
+function _replaceChild(model, child, replacement) {
+  const path = getProp(child, "path");
+  const resizeable = getProp(child, "resizeable");
+  const { style } = getProps(child);
+  const newChild = 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 } = nextStep(getProp(model, "path"), getProp(child, "path"));
+  const children = model.props.children.slice();
+  if (finalStep) {
+    if (!op) {
+      children[idx] = replacement;
+    } else if (op === Action.MINIMIZE) {
+      children[idx] = minimize(model, children[idx]);
+    } else if (op === Action.RESTORE) {
+      children[idx] = restore(children[idx]);
+    }
+  } else {
+    children[idx] = swapChild(children[idx], child, replacement, op);
+  }
+  return React.cloneElement(model, void 0, children);
+}
+function minimize(parent, child) {
+  const { style: parentStyle } = getProps(parent);
+  const { style: childStyle } = 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
+    });
+  }
+  return child;
+}
+function restore(child) {
+  const { style: childStyle, restoreStyle } = getProps(child);
+  const { flexBasis, flexShrink, flexGrow, ...rest } = childStyle;
+  const style = {
+    ...rest,
+    ...restoreStyle
+  };
+  return React.cloneElement(child, {
+    collapsed: false,
+    style,
+    restoreStyle: void 0
+  });
+}
+
+export { _replaceChild, replaceChild, swapChild };
+//# sourceMappingURL=replace-layout-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"replace-layout-element.js","sources":["../../src/layout-reducer/replace-layout-element.ts"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Action } from '../layout-action';\nimport { getProp, getProps, nextStep } from '../utils';\nimport { ReplaceAction } from './layoutTypes';\nimport { applyLayoutProps, LayoutProps } from './layoutUtils';\n\nexport function replaceChild(model: ReactElement, { target, replacement }: ReplaceAction) {\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 =\n    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?: 'maximize' | 'minimize' | 'restore'\n): ReactElement {\n  if (model === child) {\n    return replacement;\n  }\n  \n  const { idx, finalStep } = nextStep(getProp(model, 'path'), getProp(child, 'path'));\n  const children = model.props.children.slice();\n  \n  if (finalStep) {\n    if (!op) {\n      children[idx] = replacement;\n    } else if (op === Action.MINIMIZE) {\n      children[idx] = minimize(model, children[idx]);\n    } else if (op === Action.RESTORE) {\n      children[idx] = restore(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 minimize(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 } = 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    });\n  }\n  return child;\n}\n\nfunction restore(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  });\n}\n"],"names":[],"mappings":"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"}