fix type issues

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

@@ -1,5 +1,5 @@
+import { rect } from "@finos/vuu-utils";
 import { ReactElement } from "react";
-import { rect } from "../common-types";
 import { LayoutModel } from "../layout-reducer";
 import { findTarget, followPath, getProps } from "../utils";
 import { BoxModel, Measurements, Position } from "./BoxModel";

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

@@ -1,4 +1,4 @@
-import { rect, rectTuple } from "../common-types";
+import { rect, rectTuple } from "@finos/vuu-utils";
 import { LayoutModel } from "../layout-reducer";
 import { getProps, typeOf } from "../utils";
 import {

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

@@ -1,6 +1,5 @@
-import { uuid } from "@finos/vuu-utils";
+import { dimension, rect, rectTuple, uuid } from "@finos/vuu-utils";
 import React, { CSSProperties, ReactElement, ReactNode } from "react";
-import { dimension, rect, rectTuple } from "../common-types";
 import { DropPos } from "../drag-drop/dragDropTypes";
 import { ComponentRegistry } from "../registry/ComponentRegistry";
 import { getProps, resetPath } from "../utils";
@@ -91,13 +90,14 @@ export function getFlexStyle(
 }
 
 export function hasUnboundedFlexStyle(component: ReactElement) {
-  const { style: { flex, flexGrow, flexShrink, flexBasis } = NO_STYLE } = component.props;
+  const { style: { flex, flexGrow, flexShrink, flexBasis } = NO_STYLE } =
+    component.props;
   if (typeof flex === "number") {
     return true;
-  } 
+  }
   if (flexBasis === 0 && flexGrow === 1 && flexShrink === 1) {
     return true;
-  } 
+  }
   if (typeof flexBasis === "number") {
     return false;
   }
@@ -212,11 +212,14 @@ export function wrapIntrinsicSizeComponentWithFlexbox(
   );
 }
 
-const getFlexValue = (flexBasis: number, flexFill: boolean): number | undefined => {
+const getFlexValue = (
+  flexBasis: number,
+  flexFill: boolean
+): number | undefined => {
   if (flexFill) {
     return undefined;
   }
-  return flexBasis === 0 ? 1 : 0
+  return flexBasis === 0 ? 1 : 0;
 };
 
 export function createFlexbox(

vuu-ui/packages/vuu-layout/src/layout-reducer/insert-layout-element.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { uuid } from "@finos/vuu-utils";
+import { rectTuple, uuid } from "@finos/vuu-utils";
 import React, { ReactElement } from "react";
-import { rectTuple } from "../common-types";
 import { DropPos } from "../drag-drop";
 import { DropTarget } from "../drag-drop/DropTarget";
 import { getProp, getProps, nextStep, resetPath, typeOf } from "../utils";
@@ -11,7 +10,7 @@ import {
   getFlexDimensions,
   getFlexOrIntrinsicStyle,
   getIntrinsicSize,
-  wrapIntrinsicSizeComponentWithFlexbox
+  wrapIntrinsicSizeComponentWithFlexbox,
 } from "./flexUtils";
 import { LayoutModel } from "./layoutTypes";
 import { getManagedDimension, LayoutProps } from "./layoutUtils";
@@ -325,12 +324,14 @@ function getStyledComponents(
   newComponent: ReactElement,
   targetRect: DropTarget["clientRect"]
 ): [ReactElement, ReactElement] {
-  const id = uuid()
+  const id = uuid();
   let { version = 0 } = getProps(newComponent);
   version += 1;
   if (typeOf(container) === "Flexbox") {
     const [dim] = getManagedDimension(container.props.style);
     const splitterSize = 6;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     const size = { [dim]: (targetRect[dim] - splitterSize) / 2 };
     const existingComponentStyle = getFlexOrIntrinsicStyle(
       existingComponent,

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

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { uuid } from "@finos/vuu-utils";
+import { dimension, uuid } from "@finos/vuu-utils";
 import React, { cloneElement, CSSProperties, ReactElement } from "react";
-import { dimension } from "../common-types";
 import {
   ComponentWithId,
   ComponentRegistry,

vuu-ui/packages/vuu-layout/src/layout-reducer/resize-flex-children.ts

@@ -1,5 +1,5 @@
+import { dimension } from "@finos/vuu-utils";
 import React, { CSSProperties, ReactElement } from "react";
-import { dimension } from "../common-types";
 import { followPath, getProps } from "../utils";
 import { LayoutResizeAction, SplitterResizeAction } from "./layoutTypes";
 import { swapChild } from "./replace-layout-element";

vuu-ui/packages/vuu-layout/src/layout-reducer/wrap-layout-element.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { uuid } from "@finos/vuu-utils";
+import { rectTuple, uuid } from "@finos/vuu-utils";
 import React, { ReactElement } from "react";
-import { rectTuple } from "../common-types";
 import { DropPos } from "../drag-drop/dragDropTypes";
 import { DropTarget } from "../drag-drop/DropTarget";
 import { ComponentRegistry } from "../registry/ComponentRegistry";
@@ -12,7 +11,7 @@ import {
   flexDirection,
   getFlexStyle,
   getIntrinsicSize,
-  wrapIntrinsicSizeComponentWithFlexbox
+  wrapIntrinsicSizeComponentWithFlexbox,
 } from "./flexUtils";
 import { LayoutModel } from "./layoutTypes";
 import { applyLayoutProps, LayoutProps } from "./layoutUtils";

vuu-ui/packages/vuu-layout/src/overflow-container/OverflowContainer.css

@@ -3,7 +3,7 @@
     --overflow-direction: row; 
     --overflow-width: 0px;
     --border-size: calc((var(--overflow-container-height) - 24px) / 2);
-    background-color: var(--vuuOverflowContainer-background, black);
+    background-color: var(--vuuOverflowContainer-background);
     height: var(--overflow-container-height);
 }
 

vuu-ui/packages/vuu-layout/src/overflow-container/OverflowContainer.tsx

@@ -57,6 +57,10 @@ const WrapContainer = React.memo(
       orientation,
     });
 
+    console.log(
+      `Overflow container WRAPPER ${React.Children.count(children)} children`
+    );
+
     const height = orientation === "vertical" ? "100%" : `${heightProp}px`;
     // TODO measure the height, if not provided
     const style = {
@@ -137,6 +141,9 @@ export const OverflowContainer = forwardRef(function OverflowContainer(
   forwardedRef: ForwardedRef<HTMLDivElement>
 ) {
   const id = useId(idProp);
+
+  console.log(`Overflow container ${React.Children.count(children)} children`);
+
   return (
     <div
       {...htmlAttributes}

vuu-ui/packages/vuu-layout/src/overflow-container/useOverflowContainer.ts

@@ -107,7 +107,10 @@ export const useOverflowContainer = ({
     let currentSize = 0;
     return new ResizeObserver((entries: ResizeObserverEntry[]) => {
       for (const entry of entries) {
-        const { [sizeProp]: size } = entry.contentRect;
+        const { [sizeProp]: actualSize } = entry.contentRect;
+        // This is important. Sometimes tiny sub-pixel differeces
+        // can be reported, which break the layout assumptions
+        const size = Math.round(actualSize as number);
         if (isValidNumber(size) && currentSize !== size) {
           currentSize = size;
           handleResize();

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

@@ -54,7 +54,10 @@ export const PaletteItem = memo(
 PaletteItem.displayName = "PaletteItem";
 
 export interface PaletteProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  extends Omit<
+    HTMLAttributes<HTMLDivElement>,
+    "onDragStart" | "onDrop" | "onSelect"
+  > {
   children: ReactElement[];
   itemHeight?: number;
   orientation: "horizontal" | "vertical";

vuu-ui/packages/vuu-table/src/table-next/TableNext.tsx

@@ -3,7 +3,10 @@ import { TableProps } from "@finos/vuu-table";
 import { isGroupColumn, metadataKeys, notHidden } from "@finos/vuu-utils";
 import cx from "classnames";
 import { CSSProperties, useEffect, useRef } from "react";
-import { GroupHeaderCell, HeaderCell } from "./header-cell";
+import {
+  GroupHeaderCellNext as GroupHeaderCell,
+  HeaderCell,
+} from "./header-cell";
 import { Row as DefaultRow } from "./Row";
 import { useTable } from "./useTableNext";
 import { MeasuredContainer, useId } from "@finos/vuu-layout";

vuu-ui/packages/vuu-table/src/table-next/header-cell/GroupHeaderCellNext.tsx

@@ -8,12 +8,23 @@ import { ColumnResizer, useTableColumnResize } from "../column-resizing";
 import { HeaderCellProps } from "./HeaderCell";
 import { useCell } from "../useCell";
 import { ColumnHeaderPill, GroupColumnPill } from "../column-header-pill";
-import { OverflowContainer } from "@finos/vuu-layout";
+import { OverflowContainer, useLayoutEffectSkipFirst } from "@finos/vuu-layout";
 
 import "./GroupHeaderCell.css";
 
 const classBase = "vuuTableNextGroupHeaderCell";
 
+const switchIfChanged = (
+  columns: KeyedColumnDescriptor[],
+  newColumns: KeyedColumnDescriptor[]
+) => {
+  if (columns === newColumns) {
+    return columns;
+  } else {
+    return newColumns;
+  }
+};
+
 export interface GroupHeaderCellNextProps
   extends Omit<HeaderCellProps, "onDragStart" | "onDrag" | "onDragEnd"> {
   column: GroupColumnDescriptor;
@@ -27,7 +38,6 @@ export const GroupHeaderCellNext = ({
   onResize,
   ...htmlAttributes
 }: GroupHeaderCellNextProps) => {
-  console.log({ groupColumn });
   const rootRef = useRef<HTMLTableCellElement>(null);
   const { isResizing, ...resizeProps } = useTableColumnResize({
     column: groupColumn,
@@ -36,9 +46,7 @@ export const GroupHeaderCellNext = ({
   });
 
   const [columns, setColumns] = useState(groupColumn.columns);
-
   const { className, style } = useCell(groupColumn, classBase, true);
-
   const columnPillProps =
     columns.length > 1
       ? {
@@ -47,8 +55,7 @@ export const GroupHeaderCellNext = ({
         }
       : undefined;
 
-  const handleDrop = useCallback((fromIndex, toIndex) => {
-    console.log(`handle drop from ${fromIndex} to ${toIndex}`);
+  const handleMoveItem = useCallback((fromIndex, toIndex) => {
     setColumns((cols) => {
       const newCols = cols.slice();
       const [tab] = newCols.splice(fromIndex, 1);
@@ -61,6 +68,10 @@ export const GroupHeaderCellNext = ({
     });
   }, []);
 
+  useLayoutEffectSkipFirst(() => {
+    setColumns((cols) => switchIfChanged(cols, groupColumn.columns));
+  }, [groupColumn.columns]);
+
   return (
     <div
       {...htmlAttributes}
@@ -75,7 +86,7 @@ export const GroupHeaderCellNext = ({
         allowDragDrop
         className={`${classBase}-inner`}
         height={24}
-        onMoveItem={handleDrop}
+        onMoveItem={handleMoveItem}
         overflowPosition="start"
       >
         {columns.map((column) => {

vuu-ui/packages/vuu-ui-controls/src/drag-drop/Draggable.tsx

@@ -14,7 +14,7 @@ import "./Draggable.css";
 const makeClassNames = (classNames: string) =>
   classNames.split(" ").map((className) => `vuuDraggable-${className}`);
 export const Draggable = forwardRef<
-  HTMLElement,
+  HTMLDivElement,
   {
     wrapperClassName: string;
     element: HTMLElement;

vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropIndicator.tsx

@@ -24,7 +24,6 @@ const NOT_OVERFLOWED = ':not([data-overflowed="true"])';
 const NOT_HIDDEN = ':not([aria-hidden="true"])';
 
 export const useDragDropIndicator = ({
-  draggableRef,
   onDrop,
   orientation = "horizontal",
   containerRef,
@@ -94,7 +93,12 @@ export const useDragDropIndicator = ({
         const dragPos = dragPosRef.current;
         const midPos = dragPos + size / 2;
         const { current: dropTargets } = measuredDropTargets;
-        const nextDropTarget = getNextDropTarget(dropTargets, midPos, "fwd");
+        const nextDropTarget = getNextDropTarget(
+          dropTargets,
+          midPos,
+          size,
+          "fwd"
+        );
         if (nextDropTarget) {
           if (atEnd && scrollDirection === "fwd") {
             positionDropIndicator(dropTargets[dropTargets.length - 1], "start");
@@ -217,14 +221,15 @@ export const useDragDropIndicator = ({
       const { current: draggedItem } = draggedItemRef;
 
       if (draggedItem) {
-        if (draggableRef.current && containerRef.current) {
+        if (containerRef.current) {
           const START = orientation === "horizontal" ? "left" : "top";
           dragPosRef.current = dragPos;
 
           const { current: dropTargets } = measuredDropTargets;
           const nextDropTarget = getNextDropTarget(
             dropTargets,
             dragPos,
+            draggedItem.size,
             mouseMoveDirection
           );
 
@@ -273,7 +278,7 @@ export const useDragDropIndicator = ({
         }
       }
     },
-    [draggableRef, containerRef, orientation, positionDropIndicator]
+    [containerRef, orientation, positionDropIndicator]
   );
 
   const drop = useCallback(() => {
@@ -297,17 +302,32 @@ export const useDragDropIndicator = ({
 
       //TODO why is this different from Natural Movement ?
       if (overflowMenuShowingRef.current) {
-        onDrop(fromIndex, -1);
+        onDrop(fromIndex, -1, {
+          fromIndex,
+          roIndex: -1,
+        });
       } else {
         if (fromIndex < originalDropTargetIndex) {
           onDrop(
             fromIndex,
-            dropBefore ? currentDropTargetIndex : currentDropTargetIndex + 1
+            dropBefore ? currentDropTargetIndex : currentDropTargetIndex + 1,
+            {
+              fromIndex,
+              toIndex: dropBefore
+                ? currentDropTargetIndex
+                : currentDropTargetIndex + 1,
+            }
           );
         } else {
           onDrop(
             fromIndex,
-            dropBefore ? originalDropTargetIndex : originalDropTargetIndex + 1
+            dropBefore ? originalDropTargetIndex : originalDropTargetIndex + 1,
+            {
+              fromIndex,
+              toIndex: dropBefore
+                ? originalDropTargetIndex
+                : originalDropTargetIndex + 1,
+            }
           );
         }
       }
@@ -316,13 +336,18 @@ export const useDragDropIndicator = ({
     setShowOverflow(false);
   }, [clearSpacer, onDrop]);
 
+  const releaseDrag = useCallback(() => {
+    // TODO
+  }, []);
+
   return {
     beginDrag,
     drag,
     drop,
     dropIndicator,
     handleScrollStart,
     handleScrollStop,
+    releaseDrag,
     revealOverflowedItems: showOverflow,
   };
 };

vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropNext.tsx

@@ -528,6 +528,9 @@ export const useDragDropNext: DragDropHook = ({
   const mouseDownHandler: MouseEventHandler = useCallback(
     (evt) => {
       const { current: container } = containerRef;
+      // We don't want to prevent other handlers on this element from working
+      // but we do want to stop a drag drop being initiated on a bubbled event.
+      evt.stopPropagation();
       if (container && !evt.defaultPrevented) {
         const { clientX, clientY } = evt;
         mousePosRef.current.x = startPosRef.current.x = clientX;