@axinom/mosaic-ui 0.65.0-rc.1 → 0.65.0-rc.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.65.0-rc.1",
+  "version": "0.65.0-rc.10",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e0d14e838bd4adb3476dd12bfaab15588d8dfa1e"
+  "gitHead": "1db91b67fe80347707fd3960cea16505ea3aedcf"
 }

package/src/components/Explorer/BulkEdit/useBulkEdit.tsx

@@ -75,7 +75,6 @@ export const useBulkEdit = <T extends Data>({
         ? {
             label: bulkEditRegistration.label ?? 'Edit',
             icon: bulkEditRegistration.icon ?? IconName.BulkEdit,
-            tag: 'BETA',
             onClick: () => setIsBulkEditMode((prev) => !prev),
           }
         : undefined,

package/src/components/Filters/Filter/Filter.tsx

@@ -18,18 +18,29 @@ import { MultiOptionsFilter } from '../SelectionTypes/MultiOptionFilter/MultiOpt
 import { NumericTextFilter } from '../SelectionTypes/NumericTextFilter/NumericTextFilter';
 import { OptionsFilter } from '../SelectionTypes/OptionsFilter/OptionsFilter';
 import { SearcheableOptionsFilter } from '../SelectionTypes/SearcheableOptionsFilter/SearcheableOptionsFilter';
+import { renderSearcheableOptionsFilterValue } from '../SelectionTypes/SearcheableOptionsFilter/helpers';
 import classes from './Filter.scss';
 
 export interface FilterProps<T extends Data> {
+  /** Focus on the element when the filter is opened. (default: true) */
   selectOnFocus?: boolean;
+  /** Filter options */
   options: FilterType<T>;
+  /** Current value of the filter */
   value?: FilterValue;
+  /** Index of the filter in the list of filters */
   index?: number;
+  /** Wether or not the filter is active. */
   isActive: boolean;
+  /** Additional classNames to add to the filter container */
   className?: string;
+  /** Custom renderer for the selected value */
   selectedValueRenderer?: (value: FilterValue) => string;
+  /** Callback triggered when a new filter value is selected */
   onFilterChange: (prop: keyof T, value: FilterValue, index: number) => void;
+  /** Callback triggered for custom validations of the filter */
   onValidate?: (currentValue: FilterValue) => string | null | undefined;
+  /** Callback triggered when the filter is clicked */
   onFilterClicked: () => void;
 }
 
@@ -101,7 +112,12 @@ export const Filter = <T extends Data>({
         return selectedVal.join(', ');
       }
       case FilterTypes.SearcheableOptions:
-        return stringValue;
+        return renderSearcheableOptionsFilterValue(
+          value,
+          stringValue,
+          setStringValue,
+          options,
+        );
       default:
         return stringValue ?? String(value);
     }

package/src/components/Filters/Filters.model.ts

@@ -12,10 +12,15 @@ export enum FilterTypes {
 }
 
 export interface FilterConfig<T extends Data> {
+  /** Label displayed for the filter */
   label: string;
+  /** Property of the data the filter applies to */
   property: keyof T;
+  /** Type of the filter */
   type: FilterTypes;
+  /** Custom renderer for the selected value */
   selectedValueRenderer?: SelectedValueRenderer;
+  /** Callback triggered when the filter is validated */
   onValidate?: FilterValidatorFunction<T>;
 }
 
@@ -45,8 +50,11 @@ export interface MultipleOptions<T extends Data> extends FilterConfig<T> {
 export interface SearcheableOptionsFilter<T extends Data>
   extends FilterConfig<T> {
   type: FilterTypes.SearcheableOptions;
-  optionsProvider: (searchText: string) => Option[];
+  /** Callback triggered when the search input changes. This is also used to resolve the selected option from the value. */
+  optionsProvider: (searchText: string, value?: unknown) => Option[];
+  /** Placeholder for the search input */
   searchInputPlaceholder?: string;
+  /** Maximum number of items to display */
   maxItems?: number;
 }
 

package/src/components/Filters/SelectionTypes/SearcheableOptionsFilter/helpers.ts

@@ -0,0 +1,24 @@
+import { Data } from '../../../../types';
+import { FilterValue, SearcheableOptionsFilter } from '../../Filters.model';
+
+export function renderSearcheableOptionsFilterValue<T extends Data>(
+  value: FilterValue,
+  stringValue: string | undefined,
+  setStringValue: (val: string) => void,
+  options: SearcheableOptionsFilter<T>,
+): string {
+  if (stringValue !== undefined) {
+    return stringValue;
+  }
+
+  const selectedVal = options
+    .optionsProvider('', value)
+    .find((option) => option.value === value)?.label;
+
+  if (selectedVal !== undefined) {
+    setStringValue(selectedVal);
+    return selectedVal;
+  }
+
+  return String(value);
+}

package/src/components/List/List.stories.tsx

@@ -12,12 +12,13 @@ import { List, ListProps } from './List';
 import { Column, ColumnMap, ListSelectMode, SortData } from './List.model';
 import { sortStoryData, useLocalSort } from './List.stories.helper';
 import { ListRowProps } from './ListRow/ListRow';
-import { createStateRenderer } from './ListRow/Renderers';
+import { TagsRenderer, createStateRenderer } from './ListRow/Renderers';
 
 interface ListStoryData {
   id: number;
   desc: string;
   title: string;
+  tags: string[];
 }
 
 // Extracted the type into a new file, as Typescript has issues with the syntax
@@ -31,6 +32,7 @@ interface StateStoryData {
   state: string;
   title: string;
   desc: string;
+  tags: string[];
 }
 
 type StateStoryType = ListProps<StateStoryData>;
@@ -49,8 +51,16 @@ const defaultColumns: Column<ListStoryData>[] = [
     propertyName: 'desc',
     label: 'Description',
   },
+  {
+    propertyName: 'tags',
+    label: 'Tags',
+    sortable: false,
+    render: TagsRenderer,
+  },
 ];
 
+const defaultTags = faker.lorem.words(10).split(' ');
+
 const generateData = (amount: number): ListStoryData[] =>
   generateItemArray(amount, (index) => ({
     id: index + 1,
@@ -60,6 +70,10 @@ const generateData = (amount: number): ListStoryData[] =>
     title: `Item ${index + 1}: ${faker.random.words(
       faker.datatype.number({ min: 1, max: 3 }),
     )}`,
+    tags: faker.helpers.arrayElements(
+      defaultTags,
+      faker.datatype.number({ min: 1, max: 10 }),
+    ),
   }));
 
 const selectionOptions = enumToObj(ListSelectMode);
@@ -511,6 +525,10 @@ export const PagedData: StoryObj<StoryListType> = {
             title: `Item ${index + dataIndexes}: ${faker.random.words(
               faker.datatype.number({ min: 1, max: 3 }),
             )}`,
+            tags: faker.helpers.arrayElements(
+              ['Tag1', 'Tag2', 'Tag3', 'Tag4', 'Tag5'],
+              faker.datatype.number({ min: 1, max: 3 }),
+            ),
           }));
           setMockIsLoading(false);
           setData(sortStoryData(sort, [...data, ...newData]));

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

@@ -0,0 +1,25 @@
+@import '../../../../../styles/common.scss';
+
+.container {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: min-content;
+  gap: 5px;
+  align-items: center;
+
+  .tag {
+    background-color: var(
+      --list-tag-background-color,
+      $list-tag-background-color
+    );
+    padding: 5px;
+  }
+
+  .overflowIndicator {
+    color: var(
+      --list-tag-overflow-background-color,
+      $list-tag-overflow-background-color
+    );
+    padding: 5px;
+  }
+}

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

@@ -0,0 +1,153 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { TagsRenderer } from './TagsRenderer';
+
+// Mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
+interface RendererWrapperProps {
+  /** Column data */
+  value: unknown;
+}
+
+const RendererWrapper: React.FC<RendererWrapperProps> = ({ value }) => {
+  return <>{TagsRenderer(value)}</>;
+};
+
+const defaultProps: RendererWrapperProps = {
+  value: [],
+};
+
+describe('TagsRenderer', () => {
+  beforeEach(() => {
+    // Reset mocks
+    jest.clearAllMocks();
+  });
+
+  it('renders the component without crashing', () => {
+    const { container } = render(<RendererWrapper value={['test']} />);
+    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'];
+
+    // Mock container width measurement
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 300, // Assume container width of 300px
+    });
+
+    render(<RendererWrapper {...defaultProps} value={mockTags} />);
+
+    // Since we're mocking ResizeObserver, simulate the callback
+    const resizeObserverCallback = (global.ResizeObserver as jest.Mock).mock
+      .calls[0]?.[0];
+
+    if (resizeObserverCallback) {
+      resizeObserverCallback([]);
+    }
+
+    // Check that container exists
+    const container = screen.getByTestId('tags-container');
+    expect(container).toBeInTheDocument();
+  });
+
+  it('displays overflow indicator when configured', () => {
+    const mockTags = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'];
+
+    // Mock container and tag measurements to force overflow
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 100, // Small container width to force overflow
+    });
+
+    // 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;
+    });
+
+    render(<RendererWrapper {...defaultProps} value={mockTags} />);
+
+    // Simulate ResizeObserver callback
+    const resizeObserverCallback = (global.ResizeObserver as jest.Mock).mock
+      .calls[0]?.[0];
+
+    if (resizeObserverCallback) {
+      resizeObserverCallback([]);
+    }
+
+    // Test passes if no errors occur - the overflow logic depends on real DOM measurements
+    expect(screen.getByTestId('tags-container')).toBeInTheDocument();
+
+    // Restore
+    document.createElement = originalCreateElement;
+  });
+
+  it('handles overflow behavior', () => {
+    const mockTags = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'];
+
+    render(<RendererWrapper {...defaultProps} value={mockTags} />);
+
+    // Test that the component renders without errors
+    const container = screen.getByTestId('tags-container');
+    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(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: mockDisconnect,
+    }));
+
+    const { unmount } = render(
+      <RendererWrapper {...defaultProps} value={['tag1', 'tag2']} />,
+    );
+
+    unmount();
+
+    expect(mockDisconnect).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,133 @@
+import React, { useEffect, useRef, useState } from 'react';
+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[]>([]);
+
+  useEffect(() => {
+    if (!Array.isArray(val) || !containerRef.current || val.length === 0) {
+      return;
+    }
+
+    const calculateVisibleItems = (): void => {
+      const container = containerRef.current;
+      if (!container || tagRefs.current.length === 0) {
+        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 refs
+      const tagWidths: number[] = [];
+      tagRefs.current.forEach((tagRef) => {
+        if (tagRef) {
+          tagWidths.push(tagRef.offsetWidth);
+        }
+      });
+
+      // Calculate how many items can fit
+      let totalWidth = 0;
+      let visibleCount = 0;
+
+      for (let i = 0; i < val.length; i++) {
+        const itemWidth = tagWidths[i] + (i > 0 ? gap : 0);
+        const wouldNeedOverflow = i < val.length - 1;
+        const requiredWidth =
+          totalWidth +
+          itemWidth +
+          (wouldNeedOverflow ? overflowIndicatorWidth + gap : 0);
+
+        if (requiredWidth <= containerWidth) {
+          totalWidth += itemWidth;
+          visibleCount++;
+        } else {
+          break;
+        }
+      }
+
+      // If we can't fit all items, reserve space for overflow indicator
+      if (visibleCount < val.length && visibleCount > 0) {
+        // Re-calculate with overflow indicator space reserved
+        totalWidth = 0;
+        visibleCount = 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;
+            visibleCount++;
+          } else {
+            break;
+          }
+        }
+      }
+
+      setVisibleItems(val.slice(0, visibleCount));
+      setHiddenItems(val.slice(visibleCount));
+    };
+
+    // Initial calculation after render
+    const timer = setTimeout(() => {
+      calculateVisibleItems();
+    }, 0);
+
+    const resizeObserver = new ResizeObserver(calculateVisibleItems);
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      clearTimeout(timer);
+      resizeObserver.disconnect();
+    };
+  }, [val]);
+
+  if (!Array.isArray(val) || val.length === 0) {
+    return <></>;
+  }
+
+  const stringArray = val as string[];
+
+  // Create tooltip text for hidden items
+  const tooltipText = hiddenItems.length > 0 ? hiddenItems.join(', ') : '';
+
+  return (
+    <div
+      ref={containerRef}
+      className={classes.container}
+      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>
+        );
+      })}
+      {hiddenItems.length > 0 && (
+        <div className={classes.overflowIndicator} title={tooltipText}>
+          {`+${hiddenItems.length}`}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/List/ListRow/Renderers/index.ts

@@ -2,4 +2,5 @@ export { BooleanDotRenderer } from './BooleanDotRenderer/BooleanDotRenderer';
 export { DateRenderer } from './DateRenderer/DateRenderer';
 export { createExternalLinkRenderer } from './ExternalLinkRenderer/ExternalLinkRenderer';
 export { createStateRenderer } from './StateRenderer/StateRenderer';
+export { TagsRenderer } from './TagsRenderer/TagsRenderer';
 export { TimestampRenderer } from './TimestampRenderer/TimestampRenderer';

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

@@ -87,8 +87,11 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
   useEffect(() => {
     if (imgSrc === undefined) {
       setState(ImageLoaderState.Failed);
+    } else if (state !== ImageLoaderState.Loading) {
+      setState(ImageLoaderState.Loading);
     }
-    setState(ImageLoaderState.Loading);
+    // else: already loading, don't reset
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imgSrc]);
 
   // Fallback if the image source fails to load in time