@axinom/mosaic-ui 0.66.0-rc.19 → 0.66.0-rc.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.66.0-rc.19",
+  "version": "0.66.0-rc.20",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d5bfb15cb919ad43e6ab189fa81429c2a5b600d1"
+  "gitHead": "b3810ba1b0cda52a789d68955d474086d8745eda"
 }

package/src/components/DynamicDataList/DynamicDataList.scss

@@ -8,5 +8,4 @@
   grid-template-rows: 1fr;
   grid-template-columns: 1fr;
   row-gap: var(--dynamic-list-row-gap, $dynamic-list-row-gap);
-  position: relative;
 }

package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.scss

@@ -1,15 +1,5 @@
 @import '../../../styles/common.scss';
 
-.resizeIndicator {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background-color: var(--explorer-list-row-border, #dddddd);
-  pointer-events: none;
-  z-index: 10;
-}
-
 .container {
   background-color: var(
     --explorer-background-color,

package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.tsx

@@ -70,24 +70,20 @@ export const DynamicListHeader = <T extends Data>({
     customStyles.top = 0;
   }
 
-  const { cols, mouseDown, isResizing, resizePosition, containerRef } =
-    useResize(columns, onColumnSizesChanged);
+  const { cols, mouseDown, ResizeIndicator } = useResize(
+    columns,
+    onColumnSizesChanged,
+  );
 
   return (
     <>
-      {isResizing && resizePosition !== undefined && (
-        <div
-          className={classes.resizeIndicator}
-          style={{ left: `${resizePosition}px` }}
-        />
-      )}
+      {ResizeIndicator}
       <div
         className={clsx(
           classes.container,
           'dynamic-list-header-container',
           className,
         )}
-        ref={containerRef}
         style={customStyles}
         data-test-id="dynamic-list-header"
       >

package/src/components/List/List.scss

@@ -12,7 +12,6 @@
     $explorer-background-color
   );
   overflow-x: auto;
-  position: relative;
 
   .LoadingData {
     margin: 1rem 0;

package/src/components/List/ListHeader/ListHeader.scss

@@ -1,15 +1,5 @@
 @import '../../../styles/common.scss';
 
-.resizeIndicator {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background-color: var(--explorer-list-row-border, #dddddd);
-  pointer-events: none;
-  z-index: 1;
-}
-
 .container {
   padding-left: 5px;
   display: grid;

package/src/components/List/ListHeader/ListHeader.tsx

@@ -85,22 +85,18 @@ export const ListHeader = <T extends Data>({
     alignItems: verticalTextAlign,
   } as React.CSSProperties;
 
-  const { cols, mouseDown, isResizing, resizePosition, containerRef } =
-    useResize(columns, onColumnSizesChanged);
+  const { cols, mouseDown, ResizeIndicator } = useResize(
+    columns,
+    onColumnSizesChanged,
+  );
 
   return (
     <>
-      {isResizing && resizePosition !== undefined && (
-        <div
-          className={classes.resizeIndicator}
-          style={{ left: `${resizePosition}px` }}
-        />
-      )}
+      {ResizeIndicator}
       <div
         className={clsx(classes.container, 'list-header-container', className)}
         style={customStyles}
         data-test-id="list-header"
-        ref={containerRef}
       >
         {columns.map((column, i) => (
           <div

package/src/hooks/useResize/ResizeIndicator.scss

@@ -0,0 +1,7 @@
+.resizeIndicator {
+  position: fixed;
+  width: 1px;
+  background-color: var(--explorer-list-row-border, #dddddd);
+  pointer-events: none;
+  z-index: 10;
+}

package/src/hooks/useResize/ResizeIndicator.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import classes from './ResizeIndicator.scss';
+
+interface ResizeIndicatorProps {
+  resizePosition: number | undefined;
+  isResizing: boolean;
+}
+
+export const ResizeIndicator: React.FC<ResizeIndicatorProps> = ({
+  resizePosition,
+  isResizing,
+}) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const getResizeIndicatorBounds = (): React.CSSProperties => {
+    if (containerRef.current) {
+      const listWrapper = containerRef.current.parentElement;
+      if (listWrapper) {
+        const rect = listWrapper.getBoundingClientRect();
+        return {
+          left: `${resizePosition}px`,
+          top: `${rect.top}px`,
+          height: `${rect.height}px`,
+        };
+      }
+    }
+    return { left: `${resizePosition}px` };
+  };
+
+  return (
+    <div ref={containerRef}>
+      {isResizing && resizePosition !== undefined && (
+        <div
+          className={classes.resizeIndicator}
+          style={getResizeIndicatorBounds()}
+        />
+      )}
+    </div>
+  );
+};

package/src/hooks/useResize/{useResize.ts → useResize.tsx}

@@ -2,13 +2,15 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { DynamicListColumn } from '../../components';
 import { Column } from '../../components/List/List.model';
 import { Data } from '../../types';
+import { ResizeIndicator } from './ResizeIndicator';
 
 /**
  * Handles the resizing logic of the columns
  * @param columns The list of column definitions
  * @param onColumnSizesChanged Callback that will be called when the column sizes change
- * @returns an object containing the refs to the columns (add these to all column header elements)
- *          and the mouseDown handler (add this to the element that should be used to resize the column)
+ * @returns an object containing the refs to the columns (add these to all column header elements),
+ *          the mouseDown handler (add this to the element that should be used to resize the column),
+ *          and the ResizeIndicator element (render this to show the resize indicator)
  */
 export const useResize = <T extends Data>(
   columns: Column<T>[] | DynamicListColumn<T>[],
@@ -19,12 +21,9 @@ export const useResize = <T extends Data>(
     orgSize: string | undefined;
   }[];
   mouseDown: (index: number) => void;
-  isResizing: boolean;
-  resizePosition: number | undefined;
-  containerRef: React.RefObject<HTMLDivElement>;
+  ResizeIndicator: JSX.Element;
 } => {
   const currentGridColumns = React.useRef<string | undefined>(undefined);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const minCellWidth = 50;
 
@@ -68,11 +67,9 @@ export const useResize = <T extends Data>(
           return;
         }
 
-        // Calculate position relative to container
-        if (containerRef.current) {
-          const containerRect = containerRef.current.getBoundingClientRect();
-          setResizePosition(e.clientX - containerRect.left);
-        }
+        // Calculate position (clientX gives viewport position for fixed positioning)
+
+        setResizePosition(e.clientX);
 
         const gridColumns = cols.map((col, i) => {
           if (!col.ref.current) {
@@ -134,8 +131,11 @@ export const useResize = <T extends Data>(
   return {
     cols,
     mouseDown,
-    isResizing: activeIndex !== undefined,
-    resizePosition,
-    containerRef,
+    ResizeIndicator: (
+      <ResizeIndicator
+        resizePosition={resizePosition}
+        isResizing={activeIndex !== undefined}
+      />
+    ),
   };
 };