@axinom/mosaic-ui 0.65.3 → 0.65.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.65.3",
+  "version": "0.65.5",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cac34831ec1092ebcbe246bb09f610a64edc81a6"
+  "gitHead": "2dccfe1c1492cbb54be6b6e9af3602e717cdce57"
 }

package/src/components/Explorer/Explorer.stories.tsx

@@ -21,6 +21,7 @@ import {
 } from '../FormStation';
 import { IconName } from '../Icons';
 import { ListSelectMode } from '../List';
+import { createConnectionRenderer } from '../Utils';
 import { generateBulkEditMutation } from './BulkEdit/GenerateMutation';
 import { Explorer } from './Explorer';
 import { QuickEditContext } from './QuickEdit/QuickEditContext';
@@ -34,6 +35,7 @@ interface ExplorerStoryData {
   title: string;
   date?: Date;
   desc: string;
+  tags?: { nodes: { name: string }[] };
 }
 
 type ExplorerStoryType = typeof Explorer<ExplorerStoryData>;
@@ -120,6 +122,14 @@ const generateData = (
       title: `${usePrefix ? `Index ${index}: ` : ''}${faker.random.words(
         faker.datatype.number({ min: 1, max: 3 }),
       )}`,
+      tags: {
+        nodes: Array.from(
+          { length: faker.datatype.number({ min: 0, max: 10 }) },
+          () => ({
+            name: faker.random.word(),
+          }),
+        ),
+      },
     };
   });
 
@@ -140,6 +150,13 @@ export const Default: StoryObj<ExplorerStoryType> = {
         propertyName: 'title',
         label: 'Title',
       },
+      {
+        propertyName: 'tags',
+        label: 'Tags',
+        render: createConnectionRenderer<{ nodes: { name: string }[] }>(
+          (tag) => tag.name,
+        ),
+      },
       {
         propertyName: 'date',
         label: 'Date',

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

@@ -34,27 +34,6 @@ describe('TagsRenderer', () => {
     expect(container.firstChild).toBeInTheDocument();
   });
 
-  it('returns empty content when value is not an array', () => {
-    const { container } = render(
-      <RendererWrapper {...defaultProps} value="not-an-array" />,
-    );
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('returns empty content when value is null', () => {
-    const { container } = render(
-      <RendererWrapper {...defaultProps} value={null} />,
-    );
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('returns empty content when value is undefined', () => {
-    const { container } = render(
-      <RendererWrapper {...defaultProps} value={undefined} />,
-    );
-    expect(container.firstChild).toBeNull();
-  });
-
   it('renders tags when array is provided', () => {
     const mockTags = ['tag1', 'tag2', 'tag3'];
 
@@ -127,13 +106,6 @@ describe('TagsRenderer', () => {
     expect(container).toBeInTheDocument();
   });
 
-  it('handles empty array', () => {
-    const { container } = render(
-      <RendererWrapper {...defaultProps} value={[]} />,
-    );
-    expect(container.firstChild).toBeNull();
-  });
-
   it('cleans up ResizeObserver on unmount', () => {
     const mockDisconnect = jest.fn();
     (global.ResizeObserver as jest.Mock).mockImplementation(() => ({

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

@@ -6,91 +6,120 @@ export const TagsRenderer = (val: unknown): JSX.Element => {
   const resizeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [visibleCount, setVisibleCount] = useState<number>(0);
 
-  useEffect(() => {
-    if (!Array.isArray(val) || !containerRef.current || val.length === 0) {
-      setVisibleCount(0);
+  const prevValRef = useRef<string[]>([]);
+  const valRef = useRef(val);
+  valRef.current = val; // Update on every render
+
+  // Shared calculation function that uses valRef for current value
+  const calculateVisibleItems = (): void => {
+    const currentVal = valRef.current;
+    const container = containerRef.current;
+
+    if (!container || !Array.isArray(currentVal) || currentVal.length === 0) {
       return;
     }
 
-    const calculateVisibleItems = (): void => {
-      const container = containerRef.current;
-      if (!container) {
-        return;
-      }
+    const containerWidth = container.offsetWidth;
+    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));
+    }
 
-      const containerWidth = container.offsetWidth;
-      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 {
-        (val 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));
+    // Calculate how many items can fit
+    let totalWidth = 0;
+    let newVisibleCount = 0;
+
+    for (let i = 0; i < (currentVal as string[]).length; i++) {
+      const itemWidth = tagWidths[i] + (i > 0 ? gap : 0);
+      const wouldNeedOverflow = i < (currentVal as string[]).length - 1;
+      const requiredWidth =
+        totalWidth +
+        itemWidth +
+        (wouldNeedOverflow ? overflowIndicatorWidth + gap : 0);
+
+      if (requiredWidth <= containerWidth) {
+        totalWidth += itemWidth;
+        newVisibleCount++;
+      } else {
+        break;
       }
+    }
 
-      // Calculate how many items can fit
-      let totalWidth = 0;
-      let newVisibleCount = 0;
+    // If we can't fit all items, reserve space for overflow indicator
+    if (
+      newVisibleCount < (currentVal as string[]).length &&
+      newVisibleCount > 0
+    ) {
+      // Re-calculate with overflow indicator space reserved
+      totalWidth = 0;
+      newVisibleCount = 0;
 
-      for (let i = 0; i < val.length; i++) {
+      for (let i = 0; i < (currentVal as string[]).length; i++) {
         const itemWidth = tagWidths[i] + (i > 0 ? gap : 0);
-        const wouldNeedOverflow = i < val.length - 1;
         const requiredWidth =
-          totalWidth +
-          itemWidth +
-          (wouldNeedOverflow ? overflowIndicatorWidth + gap : 0);
+          totalWidth + itemWidth + overflowIndicatorWidth + gap;
 
-        if (requiredWidth <= containerWidth) {
+        if (
+          requiredWidth <= containerWidth &&
+          i < (currentVal as string[]).length - 1
+        ) {
           totalWidth += itemWidth;
           newVisibleCount++;
         } else {
           break;
         }
       }
+    }
 
-      // If we can't fit all items, reserve space for overflow indicator
-      if (newVisibleCount < val.length && newVisibleCount > 0) {
-        // Re-calculate with overflow indicator space reserved
-        totalWidth = 0;
-        newVisibleCount = 0;
-
-        for (let i = 0; i < val.length; i++) {
-          const itemWidth = tagWidths[i] + (i > 0 ? gap : 0);
-          const requiredWidth =
-            totalWidth + itemWidth + overflowIndicatorWidth + gap;
-
-          if (requiredWidth <= containerWidth && i < val.length - 1) {
-            totalWidth += itemWidth;
-            newVisibleCount++;
-          } else {
-            break;
-          }
-        }
-      }
+    // Update state with the new visible count
+    setVisibleCount(newVisibleCount);
+  };
 
-      // Update state with the new visible count
-      setVisibleCount(newVisibleCount);
-    };
+  // Effect 1: Handle tag changes (runs when val changes)
+  useEffect(() => {
+    if (!Array.isArray(val) || val.length === 0) {
+      setVisibleCount(0);
+      prevValRef.current = [];
+      return;
+    }
+
+    // Check if array contents actually changed
+    const valArray = val as string[];
+    const hasChanged =
+      valArray.length !== prevValRef.current.length ||
+      valArray.some((item, index) => item !== prevValRef.current[index]);
+
+    if (hasChanged) {
+      calculateVisibleItems();
+      prevValRef.current = [...valArray];
+    }
+  }, [val]);
 
-    // Initial calculation
-    calculateVisibleItems();
+  // Effect 2: Set up ResizeObserver (runs once on mount)
+  useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
 
-    // Debounced resize handler
     const debouncedCalculate = (): void => {
       if (resizeTimeoutRef.current) {
         clearTimeout(resizeTimeoutRef.current);
@@ -109,13 +138,9 @@ export const TagsRenderer = (val: unknown): JSX.Element => {
       }
       resizeObserver.disconnect();
     };
-  }, [val]);
-
-  if (!Array.isArray(val) || val.length === 0) {
-    return <></>;
-  }
+  }, []); // Empty deps - only runs once
 
-  const stringArray = val as string[];
+  const stringArray = Array.isArray(val) ? (val as string[]) : [];
   const visibleItems = stringArray.slice(0, visibleCount);
   const hiddenItems = stringArray.slice(visibleCount);
 

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

@@ -1,14 +1,5 @@
-import { TagsRenderer } from '../../List';
 import { createConnectionRenderer } from './CreateConnectionRenderer';
 
-jest.mock('../../List', () => ({
-  TagsRenderer: jest.fn(),
-}));
-
-const mockTagsRenderer = TagsRenderer as jest.MockedFunction<
-  typeof TagsRenderer
->;
-
 interface TestConnection {
   nodes: { id: string; name: string }[];
 }
@@ -18,70 +9,7 @@ interface StringConnection {
 }
 
 describe('createConnectionRenderer', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('with renderAsTags = true (default)', () => {
-    it('should call TagsRenderer with mapped values when renderAsTags is true', () => {
-      const mockReturnValue = 'Mocked Tags JSX Element';
-      mockTagsRenderer.mockReturnValue(mockReturnValue as any);
-
-      const connection: TestConnection = {
-        nodes: [
-          { id: '1', name: 'Item 1' },
-          { id: '2', name: 'Item 2' },
-        ],
-      };
-
-      const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
-      const result = renderer(connection);
-
-      expect(mockTagsRenderer).toHaveBeenCalledWith(['Item 1', 'Item 2']);
-      expect(result).toBe(mockReturnValue);
-    });
-
-    it('should throw error when 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);
-
-      expect(() => renderer(connection)).toThrow();
-      expect(mockTagsRenderer).not.toHaveBeenCalled();
-    });
-
-    it('should throw error when value is null', () => {
-      const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
-
-      expect(() => renderer(null)).toThrow();
-      expect(mockTagsRenderer).not.toHaveBeenCalled();
-    });
-
-    it('should throw error when value is undefined', () => {
-      const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
-
-      expect(() => renderer(undefined)).toThrow();
-      expect(mockTagsRenderer).not.toHaveBeenCalled();
-    });
-
-    it('should call TagsRenderer with empty array when nodes is empty', () => {
-      const mockReturnValue = 'Empty Tags JSX Element';
-      mockTagsRenderer.mockReturnValue(mockReturnValue as any);
-
-      const connection: TestConnection = { nodes: [] };
-      const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
-      const result = renderer(connection);
-
-      expect(mockTagsRenderer).toHaveBeenCalledWith([]);
-      expect(result).toBe(mockReturnValue);
-    });
-  });
-
-  describe('with renderAsTags = false', () => {
+  describe('basic functionality', () => {
     it('should return comma-separated string using selector', () => {
       const connection: TestConnection = {
         nodes: [
@@ -92,13 +20,9 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(
-        selector,
-        false,
-      );
+      const renderer = createConnectionRenderer<TestConnection>(selector);
       const result = renderer(connection);
 
-      expect(mockTagsRenderer).not.toHaveBeenCalled();
       expect(result).toBe('Item 1, Item 2, Item 3');
     });
 
@@ -108,10 +32,7 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: string) => item;
-      const renderer = createConnectionRenderer<StringConnection>(
-        selector,
-        false,
-      );
+      const renderer = createConnectionRenderer<StringConnection>(selector);
       const result = renderer(connection);
 
       expect(result).toBe('apple, banana, cherry');
@@ -127,10 +48,7 @@ describe('createConnectionRenderer', () => {
 
       const selector = (item: { id: string; name: string }, index: number) =>
         `${index + 1}. ${item.name} (${item.id})`;
-      const renderer = createConnectionRenderer<TestConnection>(
-        selector,
-        false,
-      );
+      const renderer = createConnectionRenderer<TestConnection>(selector);
       const result = renderer(connection);
 
       expect(result).toBe('1. Item 1 (1), 2. Item 2 (2)');
@@ -139,10 +57,7 @@ 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,
-        false,
-      );
+      const renderer = createConnectionRenderer<TestConnection>(selector);
       const result = renderer(connection);
 
       expect(result).toBe('');
@@ -160,25 +75,33 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: { id: number; value: number }) => item.value;
-      const renderer = createConnectionRenderer<NumberConnection>(
-        selector,
-        false,
-      );
+      const renderer = createConnectionRenderer<NumberConnection>(selector);
       const result = renderer(connection);
 
       expect(result).toBe('100, 200');
     });
 
-    it('should throw error when connection.nodes is undefined and renderAsTags is false', () => {
+    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,
-        false,
-      );
+      const renderer = createConnectionRenderer<TestConnection>(selector);
 
       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);
+
+      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);
+
+      expect(() => renderer(undefined)).toThrow();
+    });
   });
 
   describe('edge cases', () => {
@@ -188,10 +111,7 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: string) => item;
-      const renderer = createConnectionRenderer<StringConnection>(
-        selector,
-        false,
-      );
+      const renderer = createConnectionRenderer<StringConnection>(selector);
       const result = renderer(connection);
 
       expect(result).toBe('item, with comma, item with "quotes", normal item');
@@ -207,10 +127,7 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(
-        selector,
-        false,
-      );
+      const renderer = createConnectionRenderer<TestConnection>(selector);
       const result = renderer(connection);
 
       expect(result).toBe(', Item 2, ');
@@ -222,10 +139,7 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(
-        selector,
-        false,
-      );
+      const renderer = createConnectionRenderer<TestConnection>(selector);
       const result = renderer(connection);
 
       expect(result).toBe('Single Item');
@@ -247,10 +161,7 @@ describe('createConnectionRenderer', () => {
 
       const selector = (item: { customField: number; label: string }) =>
         `${item.label}: ${item.customField}`;
-      const renderer = createConnectionRenderer<CustomConnection>(
-        selector,
-        false,
-      );
+      const renderer = createConnectionRenderer<CustomConnection>(selector);
       const result = renderer(connection);
 
       expect(result).toBe('Custom 1: 42, Custom 2: 84');

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

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { TagsRenderer } from '../../List';
 
 interface Connection {
   nodes: unknown[];
@@ -19,14 +18,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(', ');
   };