Sync with Finos main

vuu-ui/packages/vuu-layout/src/drag-drop/Draggable.ts

@@ -267,9 +267,6 @@ function dragMouseupHandler() {
 }
 
 function onDragEnd() {
-  if (!_dragContainer) { 
-    return 
-  }
   if (_dropTarget) {
     const dropTarget =
       _dropTargetRenderer.hoverDropTarget ||

vuu-ui/packages/vuu-layout/src/drag-drop/DropTarget.ts

@@ -7,7 +7,7 @@ import {
   Measurements,
   Position,
   positionValues,
-  RelativeDropPosition
+  RelativeDropPosition,
 } from "./BoxModel";
 import { DragDropRect, DropPos, DropPosTab } from "./dragDropTypes";
 import { DragState } from "./DragState";

vuu-ui/packages/vuu-layout/src/flexbox/Flexbox.tsx

@@ -1,5 +1,6 @@
+import { useForkRef } from "@salt-ds/core";
 import cx from "classnames";
-import { CSSProperties, forwardRef } from "react";
+import { CSSProperties, ForwardedRef, forwardRef } from "react";
 import { FlexboxProps } from "./flexboxTypes";
 import { useSplitterResizing } from "./useSplitterResizing";
 
@@ -9,10 +10,12 @@ const classBase = "hwFlexbox";
 
 const Flexbox = forwardRef(function Flexbox(
   props: FlexboxProps,
+  ref: ForwardedRef<HTMLDivElement>
 ) {
   const {
     breakPoints,
     children,
+    // cols: colsProp,
     column,
     className: classNameProp,
     flexFill,
@@ -28,8 +31,9 @@ const Flexbox = forwardRef(function Flexbox(
     ...rest
   } = props;
 
-  const { content } = useSplitterResizing({
+  const { content, rootRef } = useSplitterResizing({
     children,
+    // cols: colsProp,
     onSplitterMoved,
     style,
   });
@@ -45,8 +49,10 @@ const Flexbox = forwardRef(function Flexbox(
     <div
       {...rest}
       className={className}
+      // data-cols={cols}
       data-resizeable={resizeable || undefined}
       id={id}
+      ref={useForkRef(rootRef, ref)}
       style={
         {
           ...style,

vuu-ui/packages/vuu-layout/src/flexbox/FlexboxLayout.tsx

@@ -1,11 +1,10 @@
-import { useCallback } from 'react';
-import { useLayoutProviderDispatch } from '../layout-provider';
-import { registerComponent } from '../registry/ComponentRegistry';
-import Flexbox from './Flexbox';
-
-type FlexboxLayoutProps = {
-  path: string
-}
+import { useCallback } from "react";
+import { Action } from "../layout-action";
+import { useLayoutProviderDispatch } from "../layout-provider";
+import { SplitterResizeAction } from "../layout-reducer";
+import { registerComponent } from "../registry/ComponentRegistry";
+import Flexbox from "./Flexbox";
+import { FlexboxLayoutProps } from "./flexboxTypes";
 
 export const FlexboxLayout = function FlexboxLayout(props: FlexboxLayoutProps) {
   const { path } = props;
@@ -14,16 +13,16 @@ export const FlexboxLayout = function FlexboxLayout(props: FlexboxLayoutProps) {
   const handleSplitterMoved = useCallback(
     (sizes) => {
       dispatch({
-        type: "splitter-resize",
+        type: Action.SPLITTER_RESIZE,
         path,
-        sizes
-      });
+        sizes,
+      } as SplitterResizeAction);
     },
     [dispatch, path]
   );
 
   return <Flexbox {...props} onSplitterMoved={handleSplitterMoved} />;
 };
-FlexboxLayout.displayName = 'Flexbox';
+FlexboxLayout.displayName = "Flexbox";
 
-registerComponent('Flexbox', FlexboxLayout, 'container');
+registerComponent("Flexbox", FlexboxLayout, "container");

vuu-ui/packages/vuu-layout/src/flexbox/flexboxTypes.ts

@@ -3,7 +3,7 @@ import {
   HTMLAttributes,
   MutableRefObject,
   ReactElement,
-  ReactNode
+  ReactNode,
 } from "react";
 import { SplitterProps } from "./Splitter";
 

vuu-ui/packages/vuu-layout/src/flexbox/useSplitterResizing.ts

@@ -4,7 +4,7 @@ import React, {
   useCallback,
   useMemo,
   useRef,
-  useState
+  useState,
 } from "react";
 import { Placeholder } from "../placeholder";
 import { Splitter } from "./Splitter";
@@ -14,14 +14,14 @@ import {
   gatherChildMeta,
   identifyResizeParties,
   PLACEHOLDER,
-  SPLITTER
+  SPLITTER,
 } from "./flexbox-utils";
 import {
   ContentMeta,
   FlexSize,
   SplitterFactory,
   SplitterHookProps,
-  SplitterHookResult
+  SplitterHookResult,
 } from "./flexboxTypes";
 
 const originalContentOnly = (meta: ContentMeta) =>

vuu-ui/packages/vuu-layout/src/layout-reducer/layoutUtils.ts

@@ -6,12 +6,12 @@ import {
   ComponentWithId,
   ComponentRegistry,
   isContainer,
-  isLayoutComponent
+  isLayoutComponent,
 } from "../registry/ComponentRegistry";
 import {
   getPersistentState,
   hasPersistentState,
-  setPersistentState
+  setPersistentState,
 } from "../use-persistent-state";
 import { expandFlex, getProps, typeOf } from "../utils";
 import { LayoutJSON, LayoutModel, layoutType } from "./layoutTypes";
@@ -234,6 +234,7 @@ export function layoutFromJson(
       id,
       ...props,
       key: id,
+      path,
     },
     children
       ? children.map((child, i) => layoutFromJson(child, `${path}.${i}`))

vuu-ui/packages/vuu-layout/src/palette/Palette.tsx

@@ -6,7 +6,7 @@ import {
   HTMLAttributes,
   memo,
   MouseEvent,
-  ReactElement
+  ReactElement,
 } from "react";
 import { useLayoutProviderDispatch } from "../layout-provider";
 import { View, ViewProps } from "../layout-view";