@tap-payments/os-micro-frontend-shared 0.1.440-test.1 → 0.1.440-test.2-test.3

package/build/components/VirtualTables/SheetViewVirtualTable/features/resize/hooks/useColumnResize.js

@@ -1,33 +1,20 @@
-import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import { getColumnWidth as getStoredColumnWidth } from '../../../../../../utils/index.js';
 import { getColumnId, parseColumnWidth, clampWidth, cleanupEventListeners as cleanupEventListenersUtil, createMouseMoveHandler, getColumnWidthFromState, createResizeEndHandler, } from '../utils/resize';
 export const useColumnResize = ({ columns, onColumnResize, handleColumnClick, windowId, serviceCode, tableContainerRef }) => {
-    // Stable column key derived from column IDs — used to detect when real columns replace skeleton columns
-    const columnKey = useMemo(() => columns.map((col) => getColumnId(col)).join(','), [columns]);
-    // Memoize initial column widths to prevent unnecessary recalculations
-    const initialColumnWidths = useMemo(() => {
-        return columns.reduce((acc, col) => {
-            const columnId = getColumnId(col);
-            const defaultWidth = parseColumnWidth(col.width);
-            // Try to get width from localStorage if windowId and serviceCode are provided
-            let finalWidth = defaultWidth;
-            if (windowId && serviceCode) {
-                try {
-                    const storedWidth = getStoredColumnWidth(windowId, serviceCode, columnId, defaultWidth);
-                    finalWidth = storedWidth !== null && storedWidth !== void 0 ? storedWidth : defaultWidth;
-                }
-                catch (error) {
-                    console.warn(`Failed to load stored width for column ${columnId}:`, error);
-                    finalWidth = defaultWidth;
-                }
-            }
-            acc[columnId] = clampWidth(finalWidth);
-            return acc;
-        }, {});
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [windowId, serviceCode, columnKey]);
+    const buildWidths = (cols) => cols.reduce((acc, col) => {
+        const columnId = getColumnId(col);
+        const defaultWidth = parseColumnWidth(col.width);
+        let finalWidth = defaultWidth;
+        if (windowId && serviceCode) {
+            const storedWidth = getStoredColumnWidth(windowId, serviceCode, columnId, defaultWidth);
+            finalWidth = storedWidth !== null && storedWidth !== void 0 ? storedWidth : defaultWidth;
+        }
+        acc[columnId] = clampWidth(finalWidth);
+        return acc;
+    }, {});
     const [{ columnWidths, isResizing, resizingColumn, resizeIndicatorX }, setResizeState] = useState(() => ({
-        columnWidths: initialColumnWidths,
+        columnWidths: buildWidths(columns),
         isResizing: false,
         resizingColumn: null,
         startX: 0,
@@ -35,6 +22,13 @@ export const useColumnResize = ({ columns, onColumnResize, handleColumnClick, wi
         resizeIndicatorX: 0,
     }));
     const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+    const prevColumnCountRef = useRef(columns.length);
+    useEffect(() => {
+        if (columns.length === prevColumnCountRef.current)
+            return;
+        prevColumnCountRef.current = columns.length;
+        setResizeState((prev) => (Object.assign(Object.assign({}, prev), { columnWidths: Object.assign(Object.assign({}, buildWidths(columns)), prev.columnWidths) })));
+    }, [columns.length]);
     // Refs for managing resize state and event listeners
     const isResizingRef = useRef(false);
     const initialCursorYRef = useRef(0);
@@ -43,21 +37,6 @@ export const useColumnResize = ({ columns, onColumnResize, handleColumnClick, wi
     const startWidthRef = useRef(0);
     const mouseMoveRef = useRef();
     const mouseUpRef = useRef();
-    useEffect(() => {
-        setResizeState((prev) => {
-            const currentKeys = new Set(Object.keys(prev.columnWidths));
-            const newKeys = new Set(Object.keys(initialColumnWidths));
-            if (currentKeys.size !== newKeys.size) {
-                return Object.assign(Object.assign({}, prev), { columnWidths: initialColumnWidths });
-            }
-            const hasChanged = Array.from(newKeys).some((key) => !currentKeys.has(key) || prev.columnWidths[key] !== initialColumnWidths[key]);
-            if (!hasChanged) {
-                return prev;
-            }
-            return Object.assign(Object.assign({}, prev), { columnWidths: initialColumnWidths });
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [initialColumnWidths]);
     const getColumnWidth = useCallback((columnId) => {
         return getColumnWidthFromState(columnWidths, columnId);
     }, [columnWidths]);

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.440-test.1",
-  "testVersion": 1,
+  "version": "0.1.440-test.2-test.3",
+  "testVersion": 3,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",