@axinom/mosaic-ui 0.66.0-rc.0 → 0.66.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.66.0-rc.0",
+  "version": "0.66.0-rc.2",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "33d1874b89d5afbcab34421ddef28e2ee6838d00"
+  "gitHead": "8367444991c09b4d3c680988cbb1d8feabefbb62"
 }

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

@@ -3,18 +3,18 @@ import classes from './TagsRenderer.scss';
 
 export const TagsRenderer = (val: unknown): JSX.Element => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const tagRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const [visibleItems, setVisibleItems] = useState<string[]>([]);
-  const [hiddenItems, setHiddenItems] = useState<string[]>([]);
+  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);
       return;
     }
 
     const calculateVisibleItems = (): void => {
       const container = containerRef.current;
-      if (!container || tagRefs.current.length === 0) {
+      if (!container) {
         return;
       }
 
@@ -22,17 +22,30 @@ 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 refs
+      // Measure actual tag widths using hidden temporary elements in the actual container
       const tagWidths: number[] = [];
-      tagRefs.current.forEach((tagRef) => {
-        if (tagRef) {
-          tagWidths.push(tagRef.offsetWidth);
-        }
-      });
+      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 visibleCount = 0;
+      let newVisibleCount = 0;
 
       for (let i = 0; i < val.length; i++) {
         const itemWidth = tagWidths[i] + (i > 0 ? gap : 0);
@@ -44,17 +57,17 @@ export const TagsRenderer = (val: unknown): JSX.Element => {
 
         if (requiredWidth <= containerWidth) {
           totalWidth += itemWidth;
-          visibleCount++;
+          newVisibleCount++;
         } else {
           break;
         }
       }
 
       // If we can't fit all items, reserve space for overflow indicator
-      if (visibleCount < val.length && visibleCount > 0) {
+      if (newVisibleCount < val.length && newVisibleCount > 0) {
         // Re-calculate with overflow indicator space reserved
         totalWidth = 0;
-        visibleCount = 0;
+        newVisibleCount = 0;
 
         for (let i = 0; i < val.length; i++) {
           const itemWidth = tagWidths[i] + (i > 0 ? gap : 0);
@@ -63,27 +76,37 @@ export const TagsRenderer = (val: unknown): JSX.Element => {
 
           if (requiredWidth <= containerWidth && i < val.length - 1) {
             totalWidth += itemWidth;
-            visibleCount++;
+            newVisibleCount++;
           } else {
             break;
           }
         }
       }
 
-      setVisibleItems(val.slice(0, visibleCount));
-      setHiddenItems(val.slice(visibleCount));
+      // Update state with the new visible count
+      setVisibleCount(newVisibleCount);
     };
 
-    // Initial calculation after render
-    const timer = setTimeout(() => {
-      calculateVisibleItems();
-    }, 0);
+    // Initial calculation
+    calculateVisibleItems();
 
-    const resizeObserver = new ResizeObserver(calculateVisibleItems);
+    // Debounced resize handler
+    const debouncedCalculate = (): void => {
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+      resizeTimeoutRef.current = setTimeout(() => {
+        calculateVisibleItems();
+      }, 100);
+    };
+
+    const resizeObserver = new ResizeObserver(debouncedCalculate);
     resizeObserver.observe(containerRef.current);
 
     return () => {
-      clearTimeout(timer);
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
       resizeObserver.disconnect();
     };
   }, [val]);
@@ -93,6 +116,8 @@ export const TagsRenderer = (val: unknown): JSX.Element => {
   }
 
   const stringArray = val as string[];
+  const visibleItems = stringArray.slice(0, visibleCount);
+  const hiddenItems = stringArray.slice(visibleCount);
 
   // Create tooltip text for hidden items
   const tooltipText = hiddenItems.length > 0 ? hiddenItems.join(', ') : '';
@@ -104,25 +129,11 @@ export const TagsRenderer = (val: unknown): JSX.Element => {
       data-testid="tags-container"
       title={stringArray.join(', ')}
     >
-      {stringArray.map((item, index) => {
-        const isVisible = visibleItems.includes(item);
-
-        return (
-          <div
-            key={`${item}-${index}`}
-            ref={(el) => {
-              tagRefs.current[index] = el;
-            }}
-            className={classes.tag}
-            style={{
-              visibility: isVisible ? 'visible' : 'hidden',
-              position: isVisible ? 'static' : 'absolute',
-            }}
-          >
-            {item}
-          </div>
-        );
-      })}
+      {visibleItems.map((item, index) => (
+        <div key={`${item}-${index}`} className={classes.tag}>
+          {item}
+        </div>
+      ))}
       {hiddenItems.length > 0 && (
         <div className={classes.overflowIndicator} title={tooltipText}>
           {`+${hiddenItems.length}`}