@axinom/mosaic-ui 0.65.0-rc.6 → 0.65.0-rc.8

package/package.json

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

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/ListRow/Renderers/TagsRenderer/TagsRenderer.spec.tsx

@@ -128,11 +128,10 @@ describe('TagsRenderer', () => {
   });
 
   it('handles empty array', () => {
-    render(<RendererWrapper {...defaultProps} value={[]} />);
-
-    // Should render container but with no tags
-    const container = screen.getByTestId('tags-container');
-    expect(container).toBeInTheDocument();
+    const { container } = render(
+      <RendererWrapper {...defaultProps} value={[]} />,
+    );
+    expect(container.firstChild).toBeNull();
   });
 
   it('cleans up ResizeObserver on unmount', () => {

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

@@ -8,13 +8,7 @@ export const TagsRenderer = (val: unknown): JSX.Element => {
   const [hiddenItems, setHiddenItems] = useState<string[]>([]);
 
   useEffect(() => {
-    if (!Array.isArray(val) || !containerRef.current) {
-      return;
-    }
-
-    if (val.length === 0) {
-      setVisibleItems([]);
-      setHiddenItems([]);
+    if (!Array.isArray(val) || !containerRef.current || val.length === 0) {
       return;
     }
 
@@ -94,7 +88,7 @@ export const TagsRenderer = (val: unknown): JSX.Element => {
     };
   }, [val]);
 
-  if (!Array.isArray(val)) {
+  if (!Array.isArray(val) || val.length === 0) {
     return <></>;
   }
 

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