@axinom/mosaic-ui 0.65.3 → 0.65.4

package/package.json

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

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);