@axinom/mosaic-ui 0.66.0-rc.13 → 0.66.0-rc.15

package/src/components/List/ListRow/Renderers/TagsRenderer/TagsRenderer.spec.tsx

@@ -1,125 +1,236 @@
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
+import * as idleCallbackHelpers from '../../../../../helpers/idleCallbackHelpers';
+import { noop } from '../../../../../helpers/utils';
 import { TagsRenderer } from './TagsRenderer';
 
-// Mock ResizeObserver
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-}));
-
-interface RendererWrapperProps {
-  /** Column data */
+// Wrapper component to properly render TagsRenderer
+interface TagsRendererWrapperProps {
   value: unknown;
 }
 
-const RendererWrapper: React.FC<RendererWrapperProps> = ({ value }) => {
+const TagsRendererWrapper: React.FC<TagsRendererWrapperProps> = ({ value }) => {
   return <>{TagsRenderer(value)}</>;
 };
 
-const defaultProps: RendererWrapperProps = {
-  value: [],
+// Helper to trigger ResizeObserver callback
+const triggerResizeObserver = (): void => {
+  const resizeObserverCallback = (global.ResizeObserver as jest.Mock).mock
+    .calls[0]?.[0];
+  if (resizeObserverCallback) {
+    act(() => {
+      resizeObserverCallback([]);
+    });
+  }
 };
 
 describe('TagsRenderer', () => {
+  let mockResizeObserver: {
+    observe: jest.Mock;
+    unobserve: jest.Mock;
+    disconnect: jest.Mock;
+  };
+  let mockScheduleIdleCallback: jest.SpyInstance;
+  let mockCancelScheduledCallback: jest.SpyInstance;
+
   beforeEach(() => {
-    // Reset mocks
-    jest.clearAllMocks();
+    // Setup ResizeObserver mock
+    mockResizeObserver = {
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    };
+
+    global.ResizeObserver = jest
+      .fn()
+      .mockImplementation(() => mockResizeObserver);
+
+    // Setup scheduleIdleCallback mock
+    mockScheduleIdleCallback = jest
+      .spyOn(idleCallbackHelpers, 'scheduleIdleCallback')
+      .mockImplementation((callback) => {
+        callback({
+          didTimeout: false,
+          timeRemaining: () => 50,
+        } as IdleDeadline);
+        return 1;
+      });
+
+    // Setup cancelScheduledCallback mock
+    mockCancelScheduledCallback = jest
+      .spyOn(idleCallbackHelpers, 'cancelScheduledCallback')
+      .mockImplementation(noop);
+
+    // Mock window.getComputedStyle for font size calculations
+    window.getComputedStyle = jest.fn().mockReturnValue({
+      fontSize: '14px',
+    });
+
+    // Mock offsetWidth for container
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      writable: true,
+      value: 300,
+    });
   });
 
-  it('renders the component without crashing', () => {
-    const { container } = render(<RendererWrapper value={['test']} />);
-    expect(container.firstChild).toBeInTheDocument();
+  afterEach(() => {
+    // Don't use jest.clearAllMocks() as it removes mock implementations
+    // Instead, manually clear just the mock call history
+    mockResizeObserver.observe.mockClear();
+    mockResizeObserver.unobserve.mockClear();
+    mockResizeObserver.disconnect.mockClear();
+    mockScheduleIdleCallback.mockClear();
+    mockCancelScheduledCallback.mockClear();
   });
 
-  it('renders tags when array is provided', () => {
-    const mockTags = ['tag1', 'tag2', 'tag3'];
+  describe('rendering', () => {
+    it('should render empty container when value is empty array', () => {
+      render(<TagsRendererWrapper value={[]} />);
 
-    // Mock container width measurement
-    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
-      configurable: true,
-      value: 300, // Assume container width of 300px
+      const container = screen.getByTestId('tags-container');
+      expect(container).toBeInTheDocument();
+      expect(container).toBeEmptyDOMElement();
     });
 
-    render(<RendererWrapper {...defaultProps} value={mockTags} />);
+    it('should render container with title attribute containing all tags', () => {
+      const tags = ['tag1', 'tag2', 'tag3'];
 
-    // Since we're mocking ResizeObserver, simulate the callback
-    const resizeObserverCallback = (global.ResizeObserver as jest.Mock).mock
-      .calls[0]?.[0];
+      render(<TagsRendererWrapper value={tags} />);
 
-    if (resizeObserverCallback) {
-      resizeObserverCallback([]);
-    }
+      const container = screen.getByTestId('tags-container');
+      expect(container).toHaveAttribute('title', 'tag1, tag2, tag3');
+    });
 
-    // Check that container exists
-    const container = screen.getByTestId('tags-container');
-    expect(container).toBeInTheDocument();
-  });
+    it('should render tags when array is provided', () => {
+      const tags = ['tag1', 'tag2', 'tag3'];
 
-  it('displays overflow indicator when configured', () => {
-    const mockTags = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'];
+      render(<TagsRendererWrapper value={tags} />);
 
-    // Mock container and tag measurements to force overflow
-    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
-      configurable: true,
-      value: 100, // Small container width to force overflow
+      const container = screen.getByTestId('tags-container');
+      expect(container).toBeInTheDocument();
+
+      triggerResizeObserver();
+
+      expect(mockScheduleIdleCallback).toHaveBeenCalled();
     });
 
-    // Mock document.createElement to control tag width measurements
-    const originalCreateElement = document.createElement;
-    document.createElement = jest.fn().mockImplementation((tagName) => {
-      const element = originalCreateElement.call(document, tagName);
-      if (tagName === 'div') {
-        Object.defineProperty(element, 'offsetWidth', {
-          value: 50, // Each tag is 50px wide
-        });
-      }
-      return element;
+    it('should render tags with proper text content', async () => {
+      const tags = ['JavaScript', 'React', 'Testing'];
+      Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+        configurable: true,
+        writable: true,
+        value: 500,
+      });
+
+      render(<TagsRendererWrapper value={tags} />);
+
+      triggerResizeObserver();
+
+      await waitFor(() => {
+        expect(screen.getByText('JavaScript')).toBeInTheDocument();
+        expect(screen.getByText('React')).toBeInTheDocument();
+        expect(screen.getByText('Testing')).toBeInTheDocument();
+      });
     });
+  });
 
-    render(<RendererWrapper {...defaultProps} value={mockTags} />);
+  describe('overflow behavior', () => {
+    it('should handle overflow with small container width', () => {
+      const tags = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'];
 
-    // Simulate ResizeObserver callback
-    const resizeObserverCallback = (global.ResizeObserver as jest.Mock).mock
-      .calls[0]?.[0];
+      Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+        configurable: true,
+        writable: true,
+        value: 100,
+      });
 
-    if (resizeObserverCallback) {
-      resizeObserverCallback([]);
-    }
+      render(<TagsRendererWrapper value={tags} />);
+
+      const container = screen.getByTestId('tags-container');
+      expect(container).toBeInTheDocument();
 
-    // Test passes if no errors occur - the overflow logic depends on real DOM measurements
-    expect(screen.getByTestId('tags-container')).toBeInTheDocument();
+      triggerResizeObserver();
 
-    // Restore
-    document.createElement = originalCreateElement;
+      expect(mockScheduleIdleCallback).toHaveBeenCalled();
+    });
+
+    it('should display overflow indicator when not all tags fit', async () => {
+      const tags = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'];
+
+      Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+        configurable: true,
+        writable: true,
+        value: 150,
+      });
+
+      render(<TagsRendererWrapper value={tags} />);
+
+      triggerResizeObserver();
+
+      // The overflow indicator may or may not appear depending on calculations
+      // This test verifies the component handles the scenario without errors
+      const container = screen.getByTestId('tags-container');
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should handle empty tag list gracefully', () => {
+      render(<TagsRendererWrapper value={[]} />);
+
+      const container = screen.getByTestId('tags-container');
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should handle non-array values gracefully', () => {
+      render(<TagsRendererWrapper value={null} />);
+
+      const container = screen.getByTestId('tags-container');
+      expect(container).toBeInTheDocument();
+    });
   });
 
-  it('handles overflow behavior', () => {
-    const mockTags = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'];
+  describe('ResizeObserver integration', () => {
+    it('should observe container on mount', () => {
+      render(<TagsRendererWrapper value={['tag1', 'tag2']} />);
 
-    render(<RendererWrapper {...defaultProps} value={mockTags} />);
+      expect(mockResizeObserver.observe).toHaveBeenCalledTimes(1);
+    });
+
+    it('should trigger calculations when ResizeObserver fires', () => {
+      render(<TagsRendererWrapper value={['tag1', 'tag2', 'tag3']} />);
+
+      expect(mockScheduleIdleCallback).not.toHaveBeenCalled();
+
+      triggerResizeObserver();
 
-    // Test that the component renders without errors
-    const container = screen.getByTestId('tags-container');
-    expect(container).toBeInTheDocument();
+      expect(mockScheduleIdleCallback).toHaveBeenCalled();
+    });
   });
 
-  it('cleans up ResizeObserver on unmount', () => {
-    const mockDisconnect = jest.fn();
-    (global.ResizeObserver as jest.Mock).mockImplementation(() => ({
-      observe: jest.fn(),
-      unobserve: jest.fn(),
-      disconnect: mockDisconnect,
-    }));
+  describe('cleanup', () => {
+    it('should disconnect ResizeObserver on unmount', () => {
+      const { unmount } = render(
+        <TagsRendererWrapper value={['tag1', 'tag2']} />,
+      );
 
-    const { unmount } = render(
-      <RendererWrapper {...defaultProps} value={['tag1', 'tag2']} />,
-    );
+      expect(mockResizeObserver.disconnect).not.toHaveBeenCalled();
 
-    unmount();
+      unmount();
 
-    expect(mockDisconnect).toHaveBeenCalled();
+      expect(mockResizeObserver.disconnect).toHaveBeenCalledTimes(1);
+    });
+
+    it('should cancel idle callback on unmount if pending', () => {
+      const { unmount } = render(
+        <TagsRendererWrapper value={['tag1', 'tag2']} />,
+      );
+
+      triggerResizeObserver();
+
+      unmount();
+
+      expect(mockCancelScheduledCallback).toHaveBeenCalled();
+    });
   });
 });

package/src/components/List/ListRow/Renderers/TagsRenderer/TagsRenderer.tsx

@@ -1,17 +1,45 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  cancelScheduledCallback,
+  scheduleIdleCallback,
+  type IdleCallbackHandle,
+} from '../../../../../helpers';
 import classes from './TagsRenderer.scss';
 
 export const TagsRenderer = (val: unknown): JSX.Element => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const resizeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [visibleCount, setVisibleCount] = useState<number>(0);
+  const [visibleCount, setVisibleCount] = useState<number | null>(null);
 
   const prevValRef = useRef<string[]>([]);
   const valRef = useRef(val);
   valRef.current = val; // Update on every render
 
+  // Estimate tag width based on text content without DOM manipulation
+  const estimateTagWidth = useCallback((text: string): number => {
+    const container = containerRef.current;
+    if (!container) {
+      return 0;
+    }
+
+    // Get computed font size from the container
+    const computedStyle = window.getComputedStyle(container);
+    const fontSize = parseFloat(computedStyle.fontSize) || 14;
+
+    // Average character width is approximately 0.6 of font size for typical fonts
+    // This is a reasonable approximation for most monospace and sans-serif fonts
+    const avgCharWidth = fontSize * 0.55;
+
+    // Tag padding is 5px on each side (10px total) from SCSS
+    const padding = 10;
+
+    // Estimate text width
+    const textWidth = text.length * avgCharWidth;
+
+    return textWidth + padding;
+  }, []);
+
   // Shared calculation function that uses valRef for current value
-  const calculateVisibleItems = (): void => {
+  const calculateVisibleItems = useCallback((): void => {
     const currentVal = valRef.current;
     const container = containerRef.current;
 
@@ -23,26 +51,10 @@ export const TagsRenderer = (val: unknown): JSX.Element => {
     const gap = 5; // Gap between items from SCSS
     const overflowIndicatorWidth = 60; // Approximate width for "... +X"
 
-    // Measure actual tag widths using hidden temporary elements in the actual container
-    const tagWidths: number[] = [];
-    const tempElements: HTMLDivElement[] = [];
-
-    try {
-      (currentVal as string[]).forEach((item) => {
-        const tempTag = document.createElement('div');
-        tempTag.className = classes.tag;
-        tempTag.textContent = item;
-        tempTag.style.position = 'absolute';
-        tempTag.style.visibility = 'hidden';
-        tempTag.style.pointerEvents = 'none';
-        container.appendChild(tempTag);
-        tempElements.push(tempTag);
-        tagWidths.push(tempTag.offsetWidth);
-      });
-    } finally {
-      // Clean up temporary elements
-      tempElements.forEach((el) => container.removeChild(el));
-    }
+    // Estimate tag widths based on text content
+    const tagWidths: number[] = (currentVal as string[]).map((item) =>
+      estimateTagWidth(item),
+    );
 
     // Calculate how many items can fit
     let totalWidth = 0;
@@ -92,7 +104,7 @@ export const TagsRenderer = (val: unknown): JSX.Element => {
 
     // Update state with the new visible count
     setVisibleCount(newVisibleCount);
-  };
+  }, [estimateTagWidth]);
 
   // Effect 1: Handle tag changes (runs when val changes)
   useEffect(() => {
@@ -112,35 +124,52 @@ export const TagsRenderer = (val: unknown): JSX.Element => {
       calculateVisibleItems();
       prevValRef.current = [...valArray];
     }
-  }, [val]);
+  }, [val, calculateVisibleItems]);
+
+  // Ref to store the idle callback ID
+  const idleCallbackRef = useRef<IdleCallbackHandle | null>(null);
 
-  // Effect 2: Set up ResizeObserver (runs once on mount)
+  // // Effect 2: Set up ResizeObserver (runs once on mount)
   useEffect(() => {
     if (!containerRef.current) {
       return;
     }
 
     const debouncedCalculate = (): void => {
-      if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
+      if (idleCallbackRef.current) {
+        cancelScheduledCallback(idleCallbackRef.current);
       }
-      resizeTimeoutRef.current = setTimeout(() => {
+      idleCallbackRef.current = scheduleIdleCallback(() => {
         calculateVisibleItems();
-      }, 100);
+      });
     };
 
+    // const resizeObserver = new ResizeObserver(calculateVisibleItems);
     const resizeObserver = new ResizeObserver(debouncedCalculate);
     resizeObserver.observe(containerRef.current);
 
     return () => {
-      if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
+      if (idleCallbackRef.current) {
+        cancelScheduledCallback(idleCallbackRef.current);
       }
       resizeObserver.disconnect();
     };
-  }, []); // Empty deps - only runs once
+  }, [calculateVisibleItems]);
 
   const stringArray = Array.isArray(val) ? (val as string[]) : [];
+
+  // Don't render items until we've calculated the visible count
+  if (visibleCount === null) {
+    return (
+      <div
+        ref={containerRef}
+        className={classes.container}
+        data-testid="tags-container"
+        title={stringArray.join(', ')}
+      />
+    );
+  }
+
   const visibleItems = stringArray.slice(0, visibleCount);
   const hiddenItems = stringArray.slice(visibleCount);
 

package/src/components/Utils/Postgraphile/CreateConnectionRenderer.spec.ts

@@ -20,7 +20,10 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('Item 1, Item 2, Item 3');
@@ -32,7 +35,10 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: string) => item;
-      const renderer = createConnectionRenderer<StringConnection>(selector);
+      const renderer = createConnectionRenderer<StringConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('apple, banana, cherry');
@@ -48,7 +54,10 @@ describe('createConnectionRenderer', () => {
 
       const selector = (item: { id: string; name: string }, index: number) =>
         `${index + 1}. ${item.name} (${item.id})`;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('1. Item 1 (1), 2. Item 2 (2)');
@@ -57,7 +66,10 @@ describe('createConnectionRenderer', () => {
     it('should return empty string when nodes array is empty', () => {
       const connection: TestConnection = { nodes: [] };
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('');
@@ -75,7 +87,10 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: { id: number; value: number }) => item.value;
-      const renderer = createConnectionRenderer<NumberConnection>(selector);
+      const renderer = createConnectionRenderer<NumberConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('100, 200');
@@ -84,21 +99,30 @@ describe('createConnectionRenderer', () => {
     it('should throw error when connection.nodes is undefined', () => {
       const connection = { nodes: undefined } as unknown as TestConnection;
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
 
       expect(() => renderer(connection)).toThrow();
     });
 
     it('should throw error when value is null', () => {
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
 
       expect(() => renderer(null)).toThrow();
     });
 
     it('should throw error when value is undefined', () => {
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
 
       expect(() => renderer(undefined)).toThrow();
     });
@@ -111,7 +135,10 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: string) => item;
-      const renderer = createConnectionRenderer<StringConnection>(selector);
+      const renderer = createConnectionRenderer<StringConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('item, with comma, item with "quotes", normal item');
@@ -127,7 +154,10 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe(', Item 2, ');
@@ -139,7 +169,10 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('Single Item');
@@ -161,7 +194,10 @@ describe('createConnectionRenderer', () => {
 
       const selector = (item: { customField: number; label: string }) =>
         `${item.label}: ${item.customField}`;
-      const renderer = createConnectionRenderer<CustomConnection>(selector);
+      const renderer = createConnectionRenderer<CustomConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('Custom 1: 42, Custom 2: 84');

package/src/components/Utils/Postgraphile/CreateConnectionRenderer.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { TagsRenderer } from '../../List';
 
 interface Connection {
   nodes: unknown[];
@@ -18,14 +19,14 @@ export type SelectorFunction<T> = (
  */
 export function createConnectionRenderer<T extends Connection>(
   selector: SelectorFunction<T['nodes'][number]>,
-  // renderAsTags = true,
+  renderAsTags = true,
 ): (val: unknown) => string | ReactNode {
   const ConnectionRenderer = (val: unknown): string | ReactNode => {
     const value = val as T;
 
-    // if (renderAsTags) {
-    //   return TagsRenderer(value.nodes.map(selector));
-    // }
+    if (renderAsTags) {
+      return TagsRenderer(value.nodes.map(selector));
+    }
 
     return value.nodes.map(selector).join(', ');
   };