@vuu-ui/vuu-layout 0.8.34 → 0.8.35

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

@@ -1,58 +0,0 @@
-import React from 'react';
-import { followPath } from '../utils/pathUtils.js';
-import { getProps } from '../utils/propUtils.js';
-import { swapChild } from './replace-layout-element.js';
-
-function resizeFlexChild(layoutRoot, { path, size }) {
-  const target = followPath(layoutRoot, path, true);
-  const { style } = getProps(target);
-  const newStyle = {
-    ...style,
-    width: size
-  };
-  const replacement = React.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 dimension2 = style.flexDirection === "column" ? "height" : "width";
-  const replacementChildren = applySizesToChildren(children, sizes, dimension2);
-  const replacement = React.cloneElement(
-    target,
-    void 0,
-    replacementChildren
-  );
-  return swapChild(layoutRoot, target, replacement);
-}
-function applySizesToChildren(children, sizes, dimension2) {
-  return children.map((child, i) => {
-    const {
-      style: { [dimension2]: size, flexBasis: actualFlexBasis }
-    } = 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)
-    });
-  });
-}
-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
-  };
-}
-
-export { resizeFlexChild, resizeFlexChildren };
-//# sourceMappingURL=resize-flex-children.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"resize-flex-children.js","sources":["../../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  const replacement = React.cloneElement(target, { style: newStyle });\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.style, dimension, newSize),\n    });\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":["dimension"],"mappings":"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"}

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

@@ -1,210 +0,0 @@
-import { uuid } from '@vuu-ui/vuu-utils';
-import React from 'react';
-import { ComponentRegistry } from '../registry/ComponentRegistry.js';
-import { nextStep, resetPath } from '../utils/pathUtils.js';
-import { getProps, getProp } from '../utils/propUtils.js';
-import { typeOf } from '../utils/typeOf.js';
-import { getIntrinsicSize, createPlaceHolder, wrapIntrinsicSizeComponentWithFlexbox, createFlexbox, getFlexStyle } from './flexUtils.js';
-import { applyLayoutProps } from './layoutUtils.js';
-
-const isHtmlElement = (component) => {
-  const [firstLetter] = typeOf(component);
-  return firstLetter === firstLetter.toLowerCase();
-};
-function wrap(container, existingComponent, newComponent, pos, clientRect, dropRect) {
-  const { children: containerChildren, path: containerPath } = getProps(container);
-  const existingComponentPath = getProp(existingComponent, "path");
-  const { idx, finalStep } = 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 = 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 } = getProps(newComponent);
-  const { path: existingComponentPath, title } = 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(container) === "Flexbox" && container.props.splitterSize) ?? void 0
-  } : void 0;
-  const id = uuid();
-  const wrapper = React.createElement(
-    ComponentRegistry[type],
-    {
-      active,
-      id,
-      key: id,
-      path: getProp(existingComponent, "path"),
-      flexFill: getProp(existingComponent, "flexFill"),
-      ...splitterSize,
-      ...showTabs,
-      style,
-      title,
-      resizeable: getProp(existingComponent, "resizeable")
-    },
-    targetFirst ? [
-      resetPath(
-        existingComponent,
-        `${existingComponentPath}.0`,
-        existingComponentProps
-      ),
-      applyLayoutProps(
-        React.cloneElement(newComponent, newComponentProps),
-        `${existingComponentPath}.1`
-      )
-    ] : [
-      applyLayoutProps(
-        React.cloneElement(newComponent, newComponentProps),
-        `${existingComponentPath}.0`
-      ),
-      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 = getProp(existingComponent, "path");
-  let pathIndex = 0;
-  const resizeProp = isHtmlElement(existingComponent) ? "data-resizeable" : "resizeable";
-  const wrappedChildren = [];
-  if (startPlaceholder) {
-    wrappedChildren.push(
-      targetFirst ? resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {
-        [resizeProp]: true,
-        style: { flexBasis: startPlaceholder, flexGrow: 1, flexShrink: 1 }
-      }) : createPlaceHolder(`${pathRoot}.${pathIndex++}`, startPlaceholder, {
-        flexGrow: 0,
-        flexShrink: 0
-      })
-    );
-  }
-  wrappedChildren.push(
-    wrapIntrinsicSizeComponentWithFlexbox(
-      newComponent,
-      contraDirection,
-      `${pathRoot}.${pathIndex++}`,
-      clientRect,
-      dropRect
-    )
-  );
-  if (endPlaceholder) {
-    wrappedChildren.push(
-      targetFirst ? createPlaceHolder(`${pathRoot}.${pathIndex++}`, 0) : resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {
-        [resizeProp]: true,
-        style: { flexBasis: 0, flexGrow: 1, flexShrink: 1 }
-      })
-    );
-  }
-  const wrapper = 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 = getFlexStyle(newComponent, dimension, pos);
-  const existingComponentStyle = 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"
-    };
-  }
-}
-
-export { wrap };
-//# sourceMappingURL=wrap-layout-element.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"wrap-layout-element.js","sources":["../../src/layout-reducer/wrap-layout-element.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { rectTuple, uuid } from \"@vuu-ui/vuu-utils\";\nimport React, { ReactElement } from \"react\";\nimport { DropPos } from \"../drag-drop/dragDropTypes\";\nimport { DropTarget } from \"../drag-drop/DropTarget\";\nimport { ComponentRegistry } from \"../registry/ComponentRegistry\";\nimport { getProp, getProps, nextStep, resetPath, typeOf } from \"../utils\";\nimport {\n  createFlexbox,\n  createPlaceHolder,\n  flexDirection,\n  getFlexStyle,\n  getIntrinsicSize,\n  wrapIntrinsicSizeComponentWithFlexbox,\n} from \"./flexUtils\";\nimport { LayoutModel } from \"./layoutTypes\";\nimport { applyLayoutProps, LayoutProps } from \"./layoutUtils\";\n\nexport interface LayoutSpec {\n  type: \"Stack\" | \"Flexbox\";\n  flexDirection: \"column\" | \"row\";\n  showTabs?: boolean;\n}\n\nconst isHtmlElement = (component: LayoutModel) => {\n  const [firstLetter] = typeOf(component) as string;\n  return firstLetter === firstLetter.toLowerCase();\n};\n\nexport function wrap(\n  container: ReactElement,\n  existingComponent: ReactElement,\n  newComponent: any,\n  pos: DropPos,\n  clientRect?: DropTarget[\"clientRect\"],\n  dropRect?: DropTarget[\"dropRect\"]\n): ReactElement {\n  const { children: containerChildren, path: containerPath } =\n    getProps(container);\n\n  const existingComponentPath = getProp(existingComponent, \"path\");\n  const { idx, finalStep } = nextStep(containerPath, existingComponentPath);\n  const children = finalStep\n    ? updateChildren(\n        container,\n        containerChildren,\n        existingComponent,\n        newComponent,\n        pos,\n        clientRect,\n        dropRect\n      )\n    : containerChildren.map((child: ReactElement, index: number) =>\n        index === idx\n          ? wrap(\n              child,\n              existingComponent,\n              newComponent,\n              pos,\n              clientRect,\n              dropRect\n            )\n          : child\n      );\n\n  return React.cloneElement(container, undefined, children);\n}\n\nfunction updateChildren(\n  container: LayoutModel,\n  containerChildren: ReactElement[],\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  pos: DropPos,\n  clientRect?: DropTarget[\"clientRect\"],\n  dropRect?: rectTuple\n) {\n  const intrinsicSize = getIntrinsicSize(newComponent);\n\n  if (intrinsicSize?.width && intrinsicSize?.height) {\n    if (clientRect === undefined || dropRect === undefined) {\n      throw Error(\n        \"wrap-layout-element, updateChildren clientRect and dropRect must both be available\"\n      );\n    }\n    return wrapIntrinsicSizedComponent(\n      containerChildren,\n      existingComponent,\n      newComponent,\n      pos,\n      clientRect,\n      dropRect\n    );\n  }\n  return wrapFlexComponent(\n    container,\n    containerChildren,\n    existingComponent,\n    newComponent,\n    pos\n  );\n}\n\nfunction wrapFlexComponent(\n  container: LayoutModel,\n  containerChildren: ReactElement[],\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  pos: DropPos\n) {\n  const { version = 0 } = getProps(newComponent);\n  const { path: existingComponentPath, title } = getProps(existingComponent);\n  const {\n    type,\n    flexDirection,\n    showTabs: showTabsProp,\n  } = getLayoutSpecForWrapper(pos);\n  const [style, existingComponentStyle, newComponentStyle] =\n    getWrappedFlexStyles(\n      type,\n      existingComponent,\n      newComponent,\n      flexDirection,\n      pos\n    );\n  const targetFirst = isTargetFirst(pos);\n  const active = targetFirst ? 1 : 0;\n\n  const newComponentProps = {\n    resizeable: true,\n    style: newComponentStyle,\n    version: version + 1,\n  };\n  const resizeProp = isHtmlElement(existingComponent)\n    ? \"data-resizeable\"\n    : \"resizeable\";\n\n  const existingComponentProps = {\n    [resizeProp]: true,\n    style: existingComponentStyle,\n  };\n\n  const showTabs = type === \"Stack\" ? { showTabs: showTabsProp } : undefined;\n  const splitterSize =\n    type === \"Flexbox\"\n      ? {\n          splitterSize:\n            (typeOf(container) === \"Flexbox\" && container.props.splitterSize) ??\n            undefined,\n        }\n      : undefined;\n\n  const id = uuid();\n  const wrapper = React.createElement(\n    ComponentRegistry[type],\n    {\n      active,\n      id,\n      key: id,\n      path: getProp(existingComponent, \"path\"),\n      flexFill: getProp(existingComponent, \"flexFill\"),\n      ...splitterSize,\n      ...showTabs,\n      style,\n      title,\n      resizeable: getProp(existingComponent, \"resizeable\"),\n    } as LayoutProps,\n    targetFirst\n      ? [\n          resetPath(\n            existingComponent,\n            `${existingComponentPath}.0`,\n            existingComponentProps\n          ),\n          applyLayoutProps(\n            React.cloneElement(newComponent, newComponentProps),\n            `${existingComponentPath}.1`\n          ),\n        ]\n      : [\n          applyLayoutProps(\n            React.cloneElement(newComponent, newComponentProps),\n            `${existingComponentPath}.0`\n          ),\n          resetPath(\n            existingComponent,\n            `${existingComponentPath}.1`,\n            existingComponentProps\n          ),\n        ]\n  );\n  return containerChildren.map((child: ReactElement) =>\n    child === existingComponent ? wrapper : child\n  );\n}\n\nfunction wrapIntrinsicSizedComponent(\n  containerChildren: ReactElement[],\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  pos: DropPos,\n  clientRect: DropTarget[\"clientRect\"],\n  dropRect: rectTuple\n) {\n  const { flexDirection } = getLayoutSpecForWrapper(pos);\n  const contraDirection = flexDirection === \"column\" ? \"row\" : \"column\";\n  const targetFirst = isTargetFirst(pos);\n\n  const [dropLeft, dropTop, dropRight, dropBottom] = dropRect;\n  const [startPlaceholder, endPlaceholder] =\n    flexDirection === \"column\"\n      ? [dropTop - clientRect.top, clientRect.bottom - dropBottom]\n      : [dropLeft - clientRect.left, clientRect.right - dropRight];\n  const pathRoot = getProp(existingComponent, \"path\");\n  let pathIndex = 0;\n\n  const resizeProp = isHtmlElement(existingComponent)\n    ? \"data-resizeable\"\n    : \"resizeable\";\n\n  const wrappedChildren = [];\n  if (startPlaceholder) {\n    wrappedChildren.push(\n      targetFirst\n        ? resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {\n            [resizeProp]: true,\n            style: { flexBasis: startPlaceholder, flexGrow: 1, flexShrink: 1 },\n          })\n        : createPlaceHolder(`${pathRoot}.${pathIndex++}`, startPlaceholder, {\n            flexGrow: 0,\n            flexShrink: 0,\n          })\n    );\n  }\n  wrappedChildren.push(\n    wrapIntrinsicSizeComponentWithFlexbox(\n      newComponent,\n      contraDirection,\n      `${pathRoot}.${pathIndex++}`,\n      clientRect,\n      dropRect\n    )\n  );\n  if (endPlaceholder) {\n    wrappedChildren.push(\n      targetFirst\n        ? createPlaceHolder(`${pathRoot}.${pathIndex++}`, 0)\n        : resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {\n            [resizeProp]: true,\n            style: { flexBasis: 0, flexGrow: 1, flexShrink: 1 },\n          })\n    );\n  }\n\n  const wrapper = createFlexbox(\n    flexDirection,\n    existingComponent.props,\n    wrappedChildren,\n    pathRoot\n  );\n  return containerChildren.map((child) =>\n    child === existingComponent ? wrapper : child\n  );\n}\n\nfunction getWrappedFlexStyles(\n  type: string,\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  flexDirection: flexDirection,\n  pos: DropPos\n) {\n  const style = {\n    ...existingComponent.props.style,\n    flexDirection,\n  };\n\n  const dimension =\n    type === \"Flexbox\" && flexDirection === \"column\" ? \"height\" : \"width\";\n  const newComponentStyle = getFlexStyle(newComponent, dimension, pos);\n  const existingComponentStyle = getFlexStyle(existingComponent, dimension);\n\n  return [style, existingComponentStyle, newComponentStyle];\n}\n\nconst isTargetFirst = (pos: DropPos) =>\n  pos.position.SouthOrEast\n    ? true\n    : pos?.tab?.positionRelativeToTab === \"before\"\n    ? false\n    : pos.position.Header\n    ? true\n    : false;\n\nfunction getLayoutSpecForWrapper(pos: DropPos): LayoutSpec {\n  if (pos.position.Header) {\n    return {\n      type: \"Stack\",\n      flexDirection: \"column\",\n      showTabs: true,\n    };\n  } else {\n    return {\n      type: \"Flexbox\",\n      flexDirection: pos.position.EastOrWest ? \"row\" : \"column\",\n    };\n  }\n}\n"],"names":["flexDirection"],"mappings":"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"}

package/esm/layout-view/View.css

@@ -1,62 +0,0 @@
-.vuuView {
-  border-color: var(--vuuView-borderColor, var(--salt-container-primary-borderColor));
-  border-width: var(--vuuView-borderWidth, 1px);
-  border-style: var(--vuuView-borderStyle, none);
-
-  display: flex;
-  flex-direction: column;
-  margin: var(--vuuView-margin, 0px);
-  min-height: 50px;
-  min-width: 50px;
-  outline: none;
-  overflow: hidden;
-  position: relative;
-}
-
-.vuuView.focus-visible:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: dotted cornflowerblue 2px;
-}
-
-.vuuView.dragging {
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-}
-
-.vuuView-main {
-  /* height: var(--view-content-height);
-  width: var(--view-content-width); */
-  display: flex;
-  flex-direction: var(--vuuView-flexDirection, column);
-  flex-wrap: var(--vuuView-flex-wrap, nowrap);
-  flex: 1;
-  justify-content: var(--vuuView-justify, flex-start);
-  overflow: hidden;
-  position: relative;
-}
-
-.vuuView-main > * {
-  flex-basis: auto;
-  flex-grow: var(--vuuView-flex-grow, 1);
-  flex-shrink: var(--vuuView-flex-shrink, 1);
-}
-
-.vuuView-collapsed .vuuView-main {
-  display: none;
-}
-
-.vuuView-collapsed + .Splitter {
-  display: none;
-}
-
-.vuuView-collapsed .Toolbar-vertical {
-  border-right: solid 1px var(--grey40);
-}
-
-.vuuView-collapsed .Toolbar-vertical .toolbar-title {
-  display: none;
-}

package/esm/layout-view/View.js

@@ -1,153 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId } from '@vuu-ui/vuu-utils';
-import { useForkRef } from '@salt-ds/core';
-import cx from 'clsx';
-import React, { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
-import { Header } from '../layout-header/Header.js';
-import { registerComponent } from '../registry/ComponentRegistry.js';
-import { useView } from './useView.js';
-import { useViewResize } from './useViewResize.js';
-import '../layout-provider/LayoutProviderContext.js';
-import '../drag-drop/Draggable.js';
-import '../drag-drop/BoxModel.js';
-import { ViewContext } from '../layout-view-actions/ViewContext.js';
-
-const classBase = "vuuView";
-const getProps = (state, props) => {
-  if (state && props) {
-    return {
-      ...state,
-      ...props
-    };
-  } else
-    return state || props;
-};
-const View = forwardRef(function View2(props, forwardedRef) {
-  const {
-    Header: Header$1 = Header,
-    children,
-    className,
-    collapsed,
-    closeable,
-    "data-path": dataPath,
-    "data-resizeable": dataResizeable,
-    dropTargets,
-    expanded,
-    flexFill,
-    id: idProp,
-    header,
-    orientation = "horizontal",
-    path = dataPath,
-    resize = "responsive",
-    resizeable = dataResizeable,
-    tearOut,
-    style = {},
-    title: titleProp,
-    ...restProps
-  } = props;
-  const id = useId(idProp);
-  const rootRef = useRef(null);
-  const mainRef = useRef(null);
-  const [componentProps, _setComponentProps] = useState();
-  const {
-    contributions,
-    dispatchViewAction,
-    load,
-    loadSession,
-    onConfigChange,
-    onEditTitle,
-    purge,
-    restoredState,
-    save,
-    saveSession,
-    title
-  } = useView({
-    id,
-    rootRef,
-    path,
-    dropTargets,
-    title: titleProp
-  });
-  useViewResize({ mainRef, resize, rootRef });
-  const setComponentProps = useCallback((props2) => {
-    _setComponentProps(props2);
-  }, []);
-  const getContent = () => {
-    if (React.isValidElement(children) && (restoredState || componentProps)) {
-      return React.cloneElement(
-        children,
-        getProps(restoredState, componentProps)
-      );
-    }
-    return children;
-  };
-  const viewContextValue = useMemo(
-    () => ({
-      dispatch: dispatchViewAction,
-      id,
-      path,
-      title,
-      load,
-      loadSession,
-      onConfigChange,
-      purge,
-      save,
-      saveSession,
-      setComponentProps
-    }),
-    [
-      dispatchViewAction,
-      id,
-      load,
-      loadSession,
-      onConfigChange,
-      path,
-      purge,
-      save,
-      saveSession,
-      setComponentProps,
-      title
-    ]
-  );
-  const headerProps = typeof header === "object" ? header : {};
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restProps,
-      className: cx(classBase, className, {
-        [`${classBase}-collapsed`]: collapsed,
-        [`${classBase}-expanded`]: expanded,
-        [`${classBase}-resize-defer`]: resize === "defer"
-      }),
-      "data-resizeable": resizeable,
-      id,
-      ref: useForkRef(forwardedRef, rootRef),
-      style,
-      tabIndex: -1,
-      children: /* @__PURE__ */ jsxs(ViewContext.Provider, { value: viewContextValue, children: [
-        header ? /* @__PURE__ */ jsx(
-          Header$1,
-          {
-            ...headerProps,
-            collapsed,
-            contributions,
-            expanded,
-            closeable,
-            onEditTitle,
-            orientation,
-            tearOut,
-            title
-          }
-        ) : null,
-        /* @__PURE__ */ jsx("div", { className: `${classBase}-main`, ref: mainRef, children: getContent() })
-      ] })
-    }
-  );
-});
-View.displayName = "View";
-const MemoView = React.memo(View);
-MemoView.displayName = "View";
-registerComponent("View", MemoView, "view");
-
-export { MemoView as View };
-//# sourceMappingURL=View.js.map

package/esm/layout-view/View.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"View.js","sources":["../../src/layout-view/View.tsx"],"sourcesContent":["import { useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport React, {\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Header as VuuHeader } from \"../layout-header/Header\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport { useView } from \"./useView\";\nimport { useViewResize } from \"./useViewResize\";\nimport { ViewContext, ViewContextAPI } from \"../layout-view-actions\";\nimport { ViewProps } from \"./viewTypes\";\n\nimport \"./View.css\";\n\nconst classBase = \"vuuView\";\n\ntype Props = { [key: string]: unknown };\n\nconst getProps = (state?: Props, props?: Props) => {\n  if (state && props) {\n    return {\n      ...state,\n      ...props,\n    };\n  } else return state || props;\n};\n\n/**\n * View is the leaf-level entity managed by the Vuu layout system. It may represent a component\n * or a group of components. It also offers an API (via useViewContext) for persistence.\n */\nconst View = forwardRef(function View(\n  props: ViewProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    Header = VuuHeader,\n    children,\n    className,\n    collapsed,\n    closeable,\n    \"data-path\": dataPath,\n    \"data-resizeable\": dataResizeable,\n    dropTargets,\n    expanded,\n    flexFill,\n    id: idProp,\n    header,\n    orientation = \"horizontal\",\n    path = dataPath,\n    resize = \"responsive\",\n    resizeable = dataResizeable,\n    tearOut,\n    style = {},\n    title: titleProp,\n    ...restProps\n  } = props;\n\n  const id = useId(idProp);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const mainRef = useRef<HTMLDivElement>(null);\n  const [componentProps, _setComponentProps] = useState<Props>();\n  const {\n    contributions,\n    dispatchViewAction,\n    load,\n    loadSession,\n    onConfigChange,\n    onEditTitle,\n    purge,\n    restoredState,\n    save,\n    saveSession,\n    title,\n  } = useView({\n    id,\n    rootRef,\n    path,\n    dropTargets,\n    title: titleProp,\n  });\n\n  useViewResize({ mainRef, resize, rootRef });\n\n  const setComponentProps = useCallback((props?: Props) => {\n    _setComponentProps(props);\n  }, []);\n\n  const getContent = () => {\n    if (React.isValidElement(children) && (restoredState || componentProps)) {\n      return React.cloneElement(\n        children,\n        getProps(restoredState, componentProps)\n      );\n    }\n    return children;\n  };\n\n  const viewContextValue: ViewContextAPI = useMemo(\n    () => ({\n      dispatch: dispatchViewAction,\n      id,\n      path,\n      title,\n      load,\n      loadSession,\n      onConfigChange,\n      purge,\n      save,\n      saveSession,\n      setComponentProps,\n    }),\n    [\n      dispatchViewAction,\n      id,\n      load,\n      loadSession,\n      onConfigChange,\n      path,\n      purge,\n      save,\n      saveSession,\n      setComponentProps,\n      title,\n    ]\n  );\n\n  const headerProps = typeof header === \"object\" ? header : {};\n\n  return (\n    <div\n      {...restProps}\n      className={cx(classBase, className, {\n        [`${classBase}-collapsed`]: collapsed,\n        [`${classBase}-expanded`]: expanded,\n        [`${classBase}-resize-defer`]: resize === \"defer\",\n      })}\n      data-resizeable={resizeable}\n      id={id}\n      ref={useForkRef(forwardedRef, rootRef)}\n      style={style}\n      tabIndex={-1}\n    >\n      <ViewContext.Provider value={viewContextValue}>\n        {header ? (\n          <Header\n            {...headerProps}\n            collapsed={collapsed}\n            contributions={contributions}\n            expanded={expanded}\n            closeable={closeable}\n            onEditTitle={onEditTitle}\n            orientation={orientation}\n            tearOut={tearOut}\n            title={title}\n          />\n        ) : null}\n        <div className={`${classBase}-main`} ref={mainRef}>\n          {getContent()}\n        </div>\n      </ViewContext.Provider>\n    </div>\n  );\n});\nView.displayName = \"View\";\n\ninterface ViewComponentType {\n  (\n    props: ViewProps & {\n      ref?: ForwardedRef<HTMLDivElement>;\n    }\n  ): ReactElement<ViewProps>;\n  displayName?: string;\n}\n\nconst MemoView = React.memo(View) as ViewComponentType;\n\nMemoView.displayName = \"View\";\n\nregisterComponent(\"View\", MemoView, \"view\");\n\nexport { MemoView as View };\n"],"names":["View","Header","VuuHeader","props"],"mappings":"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"}

package/esm/layout-view/useView.js

@@ -1,90 +0,0 @@
-import { useMemo, useCallback } from 'react';
-import { useLayoutProviderDispatch } from '../layout-provider/LayoutProvider.js';
-import '../layout-provider/LayoutProviderContext.js';
-import { usePersistentState } from '../use-persistent-state.js';
-import { useViewActionDispatcher } from '../layout-view-actions/useViewActionDispatcher.js';
-
-const useView = ({
-  id,
-  rootRef,
-  path,
-  dropTargets,
-  title: titleProp
-}) => {
-  const layoutDispatch = useLayoutProviderDispatch();
-  const {
-    loadState,
-    loadSessionState,
-    purgeState,
-    saveState,
-    saveSessionState
-  } = usePersistentState();
-  const [dispatchViewAction, contributions] = useViewActionDispatcher(
-    id,
-    rootRef,
-    path,
-    dropTargets
-  );
-  const title = useMemo(
-    () => loadState("view-title") ?? titleProp,
-    [loadState, titleProp]
-  );
-  const onEditTitle = useCallback(
-    (title2) => {
-      if (path) {
-        layoutDispatch({ type: "set-title", path, title: title2 });
-      }
-    },
-    [layoutDispatch, path]
-  );
-  const restoredState = useMemo(() => loadState(id), [id, loadState]);
-  const load = useCallback(
-    (key) => loadState(id, key),
-    [id, loadState]
-  );
-  const purge = useCallback(
-    (key) => {
-      purgeState(id, key);
-      layoutDispatch({ type: "save" });
-    },
-    [id, layoutDispatch, purgeState]
-  );
-  const save = useCallback(
-    (state, key) => {
-      saveState(id, key, state);
-      layoutDispatch({ type: "save" });
-    },
-    [id, layoutDispatch, saveState]
-  );
-  const loadSession = useCallback(
-    (key) => loadSessionState(id, key),
-    [id, loadSessionState]
-  );
-  const saveSession = useCallback(
-    (state, key) => saveSessionState(id, key, state),
-    [id, saveSessionState]
-  );
-  const onConfigChange = useCallback(
-    ({ type: key, ...config }) => {
-      const { [key]: data } = config;
-      save(data, key);
-    },
-    [save]
-  );
-  return {
-    contributions,
-    dispatchViewAction,
-    load,
-    loadSession,
-    onConfigChange,
-    onEditTitle,
-    purge,
-    restoredState,
-    save,
-    saveSession,
-    title
-  };
-};
-
-export { useView };
-//# sourceMappingURL=useView.js.map

package/esm/layout-view/useView.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useView.js","sources":["../../src/layout-view/useView.tsx"],"sourcesContent":["import { RefObject, useCallback, useMemo } from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { useViewActionDispatcher } from \"../layout-view-actions/useViewActionDispatcher\";\n\nexport interface ViewHookProps {\n  id: string;\n  rootRef: RefObject<HTMLDivElement>;\n  path?: string;\n  dropTargets?: string[];\n  title?: string;\n}\n\nexport const useView = ({\n  id,\n  rootRef,\n  path,\n  dropTargets,\n  title: titleProp,\n}: ViewHookProps) => {\n  const layoutDispatch = useLayoutProviderDispatch();\n\n  const {\n    loadState,\n    loadSessionState,\n    purgeState,\n    saveState,\n    saveSessionState,\n  } = usePersistentState();\n\n  const [dispatchViewAction, contributions] = useViewActionDispatcher(\n    id,\n    rootRef,\n    path,\n    dropTargets\n  );\n\n  const title = useMemo(\n    () => loadState(\"view-title\") ?? titleProp,\n    [loadState, titleProp]\n  );\n\n  const onEditTitle = useCallback(\n    (title: string) => {\n      if (path) {\n        layoutDispatch({ type: \"set-title\", path, title });\n      }\n    },\n    [layoutDispatch, path]\n  );\n\n  const restoredState = useMemo(() => loadState(id), [id, loadState]);\n\n  const load = useCallback(\n    (key?: string) => loadState(id, key),\n    [id, loadState]\n  );\n\n  const purge = useCallback(\n    (key) => {\n      purgeState(id, key);\n      layoutDispatch({ type: \"save\" });\n    },\n    [id, layoutDispatch, purgeState]\n  );\n\n  const save = useCallback(\n    (state, key) => {\n      saveState(id, key, state);\n      layoutDispatch({ type: \"save\" });\n    },\n    [id, layoutDispatch, saveState]\n  );\n  const loadSession = useCallback(\n    (key?: string) => loadSessionState(id, key),\n    [id, loadSessionState]\n  );\n  const saveSession = useCallback(\n    (state, key) => saveSessionState(id, key, state),\n    [id, saveSessionState]\n  );\n\n  const onConfigChange = useCallback(\n    ({ type: key, ...config }) => {\n      const { [key]: data } = config;\n      save(data, key);\n    },\n    [save]\n  );\n\n  return {\n    contributions,\n    dispatchViewAction,\n    load,\n    loadSession,\n    onConfigChange,\n    onEditTitle,\n    purge,\n    restoredState,\n    save,\n    saveSession,\n    title,\n  };\n};\n"],"names":["title"],"mappings":"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"}