@axinom/mosaic-ui 0.66.0-rc.8 → 0.66.0

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/Loaders/ImageLoader/ImageLoader.spec.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React, { ReactNode, SyntheticEvent } from 'react';
 import ContentLoader from 'react-content-loader';
 import { act } from 'react-dom/test-utils';
@@ -18,7 +18,7 @@ describe('ImageLoader', () => {
     const mockWidth = 'test-width';
     const mockAlt = 'test-alt';
 
-    const wrapper = shallow(
+    const wrapper = mount(
       <ImageLoader
         imgSrc={mockSrc}
         alt={mockAlt}
@@ -39,7 +39,7 @@ describe('ImageLoader', () => {
   });
 
   it('renders the loading animation while an image is loading', () => {
-    const wrapper = shallow(<ImageLoader imgSrc="" />);
+    const wrapper = mount(<ImageLoader imgSrc="" />);
 
     const loader = wrapper.find(ContentLoader);
     const imgDisplay = wrapper.find('img').prop('style')?.display;
@@ -49,9 +49,10 @@ describe('ImageLoader', () => {
   });
 
   it('renders the image after loading has completed', () => {
-    const wrapper = shallow(<ImageLoader imgSrc="" />);
+    const wrapper = mount(<ImageLoader imgSrc="" />);
 
     wrapper.find('img').prop('onLoad')!({} as SyntheticEvent);
+    wrapper.update();
 
     const loader = wrapper.find(ContentLoader);
     const imgDisplay = wrapper.find('img').prop('style')?.display;
@@ -63,7 +64,7 @@ describe('ImageLoader', () => {
   it('emits onLoad callback with img src after successful load', () => {
     const spy = jest.fn();
     const mockUrl = 'mock-url';
-    const wrapper = shallow(<ImageLoader imgSrc={mockUrl} onLoad={spy} />);
+    const wrapper = mount(<ImageLoader imgSrc={mockUrl} onLoad={spy} />);
 
     wrapper.find('img').prop('onLoad')!({} as SyntheticEvent);
 
@@ -77,9 +78,7 @@ describe('ImageLoader', () => {
     };
     const spy = jest.fn();
     const mockUrl = 'mock-url';
-    const wrapper = shallow(
-      <ImageLoader imgSrc={mockUrl} onImageClick={spy} />,
-    );
+    const wrapper = mount(<ImageLoader imgSrc={mockUrl} onImageClick={spy} />);
 
     const image = wrapper.find('img');
 
@@ -93,9 +92,10 @@ describe('ImageLoader', () => {
   });
 
   it('renders the fallback background color when loading has failed', () => {
-    const wrapper = shallow(<ImageLoader imgSrc="" />);
+    const wrapper = mount(<ImageLoader imgSrc="" />);
 
     wrapper.find('img').prop('onError')!({} as SyntheticEvent);
+    wrapper.update();
 
     const loader = wrapper.find(ContentLoader);
     const fallbackContainer = wrapper.find('.container').at(1);
@@ -107,11 +107,12 @@ describe('ImageLoader', () => {
 
   it('renders a fallback image when loading has failed', () => {
     const mockFallbackUrl = 'mock-url';
-    const wrapper = shallow(
+    const wrapper = mount(
       <ImageLoader imgSrc="" fallbackSrc={mockFallbackUrl} />,
     );
 
     wrapper.find('img').prop('onError')!({} as SyntheticEvent);
+    wrapper.update();
 
     const loader = wrapper.find(ContentLoader);
     const images = wrapper.find('img');
@@ -127,7 +128,7 @@ describe('ImageLoader', () => {
   it('emits onError callback with img src after load failure', () => {
     const spy = jest.fn();
     const mockUrl = 'mock-url';
-    const wrapper = shallow(<ImageLoader imgSrc={mockUrl} onError={spy} />);
+    const wrapper = mount(<ImageLoader imgSrc={mockUrl} onError={spy} />);
 
     wrapper.find('img').prop('onError')!({} as SyntheticEvent);
 
@@ -142,9 +143,7 @@ describe('ImageLoader', () => {
         <circle r="50" />
       </svg>
     );
-    const wrapper = shallow(
-      <ImageLoader imgSrc="" loadingSkeleton={mockSVG} />,
-    );
+    const wrapper = mount(<ImageLoader imgSrc="" loadingSkeleton={mockSVG} />);
 
     const svg = wrapper.find(`#${mockId}`);
 

package/src/components/Loaders/ImageLoader/ImageLoader.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import React, { ReactNode, useCallback, useEffect, useState } from 'react';
 import ContentLoader from 'react-content-loader';
 import { noop } from '../../../helpers/utils';
+import { ImgElement } from '../../VisualElements/ImgElement';
 import { SquareOutlineSkeleton } from '../skeletons';
 import classes from './ImageLoader.scss';
 
@@ -140,7 +141,7 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
       )}
       <div className={classes.imageContainer}>
         {state !== ImageLoaderState.Failed && imgSrc !== undefined && (
-          <img
+          <ImgElement
             src={imgSrc}
             height={imgHeight}
             width={imgWidth}
@@ -149,7 +150,7 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
               objectFit: 'contain',
               maxWidth: '100%',
             }}
-            alt={alt}
+            alt={alt ? alt : 'Loaded content image'}
             onLoad={onLoadHandler}
             onError={onErrorHandler}
             onClick={onImageClick}
@@ -159,11 +160,12 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
         )}
         {state === ImageLoaderState.Failed &&
           (fallbackSrc ? (
-            <img
+            <ImgElement
               className={classes.fallBackImage}
               src={String(fallbackSrc)}
               height={imgHeight}
               width={imgWidth}
+              alt="Image unavailable"
             />
           ) : (
             <div

package/src/components/PageHeader/PageHeader.scss

@@ -38,7 +38,7 @@
 
       margin-top: 12px;
 
-      color: $gray;
+      color: var(--ax-neutral);
       font-size: 16px;
     }
 

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.tsx

@@ -9,6 +9,7 @@ import {
   useConfirmationDelay,
 } from '../../ConfirmDialog';
 import { IconName, Icons } from '../../Icons';
+import { ImgElement } from '../../VisualElements';
 import {
   PageHeaderActionProps,
   PageHeaderActionType,
@@ -142,7 +143,12 @@ const PageHeaderJSAction: React.FC<PageHeaderJsActionProps> = ({
         <div className={classes.icon}>
           {!confirmation &&
             (typeof icon === 'string' ? (
-              <img src={icon} alt={imgAlt} />
+              <ImgElement
+                src={icon}
+                {...(imgAlt
+                  ? { alt: imgAlt ?? `${label} icon` }
+                  : { decorative: true })}
+              />
             ) : (
               <Icons icon={icon} className={classes.pageHeaderActionsIcons} />
             ))}
@@ -208,7 +214,12 @@ const PageHeaderNavigationAction: React.FC<PageHeaderNavigationActionProps> = ({
     >
       <div className={classes.icon}>
         {typeof headerIcon === 'string' ? (
-          <img src={headerIcon} alt={imgAlt} />
+          <ImgElement
+            src={headerIcon}
+            {...(imgAlt
+              ? { alt: imgAlt ?? `${label} icon` }
+              : { decorative: true })}
+          />
         ) : (
           <Icons icon={headerIcon} className={classes.pageHeaderActionsIcons} />
         )}