@axinom/mosaic-ui 0.64.0-rc.6 → 0.64.0

package/src/components/List/ListRowRenderer/ListRowRenderer.spec.tsx

@@ -0,0 +1,353 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import { Column } from '../List.model';
+import { ListRow } from '../ListRow/ListRow';
+import { ListRowRenderer } from './ListRowRenderer';
+
+interface TestData {
+  id: string;
+  title: string;
+  desc: string;
+}
+
+const mockColumns: Column<TestData>[] = [
+  {
+    propertyName: 'id',
+    size: '1fr',
+    label: 'ID',
+  },
+  {
+    propertyName: 'title',
+    size: '2fr',
+    label: 'Title',
+  },
+  {
+    propertyName: 'desc',
+    size: '1fr',
+    label: 'Description',
+  },
+];
+
+const mockTestData: TestData = {
+  id: '1',
+  title: 'Test Item',
+  desc: 'Test Description',
+};
+
+const mockListRowProps = {
+  columns: mockColumns,
+  data: mockTestData,
+  itemSelected: false,
+  isTrigger: false,
+  isRowDisabled: false,
+  columnSizes: '1fr 2fr 1fr',
+  columnGap: '5px',
+  rowHeight: '44px',
+  actionSize: '50px',
+  horizontalTextAlign: 'left' as const,
+  verticalTextAlign: 'center' as const,
+  textWrap: false,
+  selectionMode: undefined,
+  showActionButton: false,
+  showCheckMark: false,
+  showItemCheckbox: false,
+  onItemClicked: jest.fn(),
+  onTriggered: jest.fn(),
+  onItemSelected: jest.fn(),
+};
+
+describe('ListRowRenderer', () => {
+  const mountRowRenderer = (overrideProps = {}) => {
+    const defaultProps = {
+      listRowProps: mockListRowProps,
+      ...overrideProps,
+    };
+
+    return mount(<ListRowRenderer {...defaultProps} />);
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('default behavior', () => {
+    it('should render default ListRow when no custom renderer provided', () => {
+      const wrapper = mountRowRenderer();
+
+      expect(wrapper.find(ListRow)).toHaveLength(1);
+      expect(wrapper.find(ListRow).prop('data')).toEqual(mockTestData);
+    });
+
+    it('should pass all props to default ListRow', () => {
+      const wrapper = mountRowRenderer();
+      const listRowProps = wrapper.find(ListRow).props();
+
+      expect(listRowProps).toEqual(expect.objectContaining(mockListRowProps));
+    });
+  });
+
+  describe('custom row renderer', () => {
+    it('should use custom renderer when provided', () => {
+      const customRenderer = jest.fn(() => (
+        <div data-test-id="custom-row">Custom Content</div>
+      ));
+
+      const wrapper = mountRowRenderer({
+        customRowRenderer: customRenderer,
+      });
+
+      expect(customRenderer).toHaveBeenCalledTimes(1);
+      expect(wrapper.find('[data-test-id="custom-row"]')).toHaveLength(1);
+      expect(wrapper.find(ListRow)).toHaveLength(0);
+      expect(wrapper.text()).toContain('Custom Content');
+    });
+
+    it('should pass complete ListRowProps to custom renderer', () => {
+      const customRenderer = jest.fn(() => (
+        <div data-test-id="custom-row">Custom</div>
+      ));
+
+      const customListRowProps = {
+        ...mockListRowProps,
+        itemSelected: true,
+        isRowDisabled: true,
+      };
+
+      mountRowRenderer({
+        customRowRenderer: customRenderer,
+        listRowProps: customListRowProps,
+      });
+
+      expect(customRenderer).toHaveBeenCalledWith(customListRowProps);
+    });
+
+    it('should fallback to default ListRow when custom renderer returns null', () => {
+      const customRenderer = jest.fn(() => null);
+
+      const wrapper = mountRowRenderer({
+        customRowRenderer: customRenderer,
+      });
+
+      expect(customRenderer).toHaveBeenCalledTimes(1);
+      expect(wrapper.find(ListRow)).toHaveLength(1);
+      expect(wrapper.find('[data-test-id="custom-row"]')).toHaveLength(0);
+    });
+
+    it('should fallback to default ListRow when custom renderer returns undefined', () => {
+      const customRenderer = jest.fn(() => undefined as any);
+
+      const wrapper = mountRowRenderer({
+        customRowRenderer: customRenderer,
+      });
+
+      expect(customRenderer).toHaveBeenCalledTimes(1);
+      expect(wrapper.find(ListRow)).toHaveLength(1);
+    });
+  });
+
+  describe('pagination trigger', () => {
+    const windowIntersectionObserver = window.IntersectionObserver;
+    const observe = jest.fn();
+    const disconnect = jest.fn();
+
+    beforeEach(() => {
+      window.IntersectionObserver = jest.fn().mockImplementation(() => ({
+        observe,
+        disconnect,
+      }));
+    });
+
+    afterEach(() => {
+      window.IntersectionObserver = windowIntersectionObserver;
+      jest.clearAllMocks();
+    });
+
+    describe('default ListRow renderer', () => {
+      it('creates the IntersectionObserver when isTrigger===true', () => {
+        const onTriggeredSpy = jest.fn();
+
+        const wrapper = mountRowRenderer({
+          listRowProps: mockListRowProps,
+          isTrigger: true,
+          onTriggered: onTriggeredSpy,
+        });
+
+        expect(window.IntersectionObserver).toHaveBeenCalledTimes(1);
+        expect(observe).toHaveBeenCalledWith(wrapper.getDOMNode());
+        expect(onTriggeredSpy).not.toHaveBeenCalled();
+      });
+
+      it('does not create IntersectionObserver when isTrigger===false', () => {
+        const onTriggeredSpy = jest.fn();
+
+        mountRowRenderer({
+          listRowProps: mockListRowProps,
+          isTrigger: false,
+          onTriggered: onTriggeredSpy,
+        });
+
+        expect(window.IntersectionObserver).not.toHaveBeenCalled();
+        expect(onTriggeredSpy).not.toHaveBeenCalled();
+      });
+
+      it('triggers onTriggered when IntersectionObserver observes entry', () => {
+        let intersectionFn: IntersectionObserverCallback = () => null;
+        const onTriggeredSpy = jest.fn();
+
+        (window.IntersectionObserver as jest.Mock).mockImplementation((fn) => {
+          intersectionFn = fn;
+          return { observe, disconnect };
+        });
+
+        mountRowRenderer({
+          listRowProps: mockListRowProps,
+          isTrigger: true,
+          onTriggered: onTriggeredSpy,
+        });
+
+        // Manually trigger the intersection callback
+        intersectionFn(
+          [{ isIntersecting: true } as IntersectionObserverEntry],
+          {} as IntersectionObserver,
+        );
+
+        expect(onTriggeredSpy).toHaveBeenCalledTimes(1);
+      });
+
+      it('does not trigger when entry is not intersecting', () => {
+        let intersectionFn: IntersectionObserverCallback = () => null;
+        const onTriggeredSpy = jest.fn();
+
+        (window.IntersectionObserver as jest.Mock).mockImplementation((fn) => {
+          intersectionFn = fn;
+          return { observe, disconnect };
+        });
+
+        mountRowRenderer({
+          listRowProps: mockListRowProps,
+          isTrigger: true,
+          onTriggered: onTriggeredSpy,
+        });
+
+        // Manually trigger the intersection callback with non-intersecting entry
+        intersectionFn(
+          [{ isIntersecting: false } as IntersectionObserverEntry],
+          {} as IntersectionObserver,
+        );
+
+        expect(onTriggeredSpy).not.toHaveBeenCalled();
+      });
+
+      it.todo('sets ref if row is trigger'); // https://github.com/airbnb/enzyme/issues/2215
+    });
+
+    describe('custom row renderer', () => {
+      it('creates the IntersectionObserver when isTrigger===true for custom renderer', () => {
+        const customRenderer = jest.fn(() => (
+          <div data-test-id="custom-row">Custom Content</div>
+        ));
+        const onTriggeredSpy = jest.fn();
+
+        const wrapper = mountRowRenderer({
+          listRowProps: mockListRowProps,
+          isTrigger: true,
+          onTriggered: onTriggeredSpy,
+          customRowRenderer: customRenderer,
+        });
+
+        expect(window.IntersectionObserver).toHaveBeenCalledTimes(1);
+        expect(observe).toHaveBeenCalledWith(wrapper.getDOMNode());
+        expect(onTriggeredSpy).not.toHaveBeenCalled();
+      });
+
+      it('does not create IntersectionObserver when isTrigger===false for custom renderer', () => {
+        const customRenderer = jest.fn(() => (
+          <div data-test-id="custom-row">Custom Content</div>
+        ));
+        const onTriggeredSpy = jest.fn();
+
+        mountRowRenderer({
+          listRowProps: mockListRowProps,
+          isTrigger: false,
+          onTriggered: onTriggeredSpy,
+          customRowRenderer: customRenderer,
+        });
+
+        expect(window.IntersectionObserver).not.toHaveBeenCalled();
+        expect(onTriggeredSpy).not.toHaveBeenCalled();
+      });
+
+      it('triggers onTriggered when IntersectionObserver observes entry for custom renderer', () => {
+        let intersectionFn: IntersectionObserverCallback = () => null;
+        const customRenderer = jest.fn(() => (
+          <div data-test-id="custom-row">Custom Content</div>
+        ));
+        const onTriggeredSpy = jest.fn();
+
+        (window.IntersectionObserver as jest.Mock).mockImplementation((fn) => {
+          // Remember the callback function
+          intersectionFn = fn;
+          // Return the mocked object
+          return { observe, disconnect };
+        });
+
+        mountRowRenderer({
+          listRowProps: mockListRowProps,
+          isTrigger: true,
+          onTriggered: onTriggeredSpy,
+          customRowRenderer: customRenderer,
+        });
+
+        // Manually trigger the intersection callback
+        intersectionFn(
+          [{ isIntersecting: true } as IntersectionObserverEntry],
+          {} as IntersectionObserver,
+        );
+
+        expect(onTriggeredSpy).toHaveBeenCalledTimes(1);
+      });
+
+      it.todo('sets ref if row is trigger'); // https://github.com/airbnb/enzyme/issues/2215
+    });
+
+    describe('observer cleanup', () => {
+      it('disconnects observer when isTrigger changes from true to false', () => {
+        const onTriggeredSpy = jest.fn();
+
+        const wrapper = mountRowRenderer({
+          listRowProps: mockListRowProps,
+          isTrigger: true,
+          onTriggered: onTriggeredSpy,
+        });
+
+        expect(window.IntersectionObserver).toHaveBeenCalledTimes(1);
+
+        // Change isTrigger to false
+        wrapper.setProps({
+          listRowProps: {
+            ...mockListRowProps,
+          },
+          isTrigger: false,
+        });
+
+        expect(disconnect).toHaveBeenCalledTimes(1);
+      });
+
+      it('disconnects observer on component unmount', () => {
+        const onTriggeredSpy = jest.fn();
+
+        const wrapper = mountRowRenderer({
+          listRowProps: mockListRowProps,
+          isTrigger: true,
+          onTriggered: onTriggeredSpy,
+        });
+
+        expect(window.IntersectionObserver).toHaveBeenCalledTimes(1);
+
+        wrapper.unmount();
+
+        expect(disconnect).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});

package/src/components/List/ListRowRenderer/ListRowRenderer.tsx

@@ -0,0 +1,68 @@
+import React, { useCallback, useRef } from 'react';
+import { Data } from '../../../types/data';
+import { ListRow, ListRowProps } from '../ListRow/ListRow';
+
+interface RowRendererProps<T extends Data> {
+  /**
+   * Custom renderer for the list row.
+   * If provided, it will override the default ListRow rendering.
+   * In case it returns null, the default ListRow will not be rendered.
+   */
+  customRowRenderer?: (props: ListRowProps<T>) => React.ReactElement | null;
+  /** Props passed to the ListRow and custom renderer */
+  listRowProps: ListRowProps<T>;
+  /** Whether or not the item is a trigger for pagination (default: false) */
+  isTrigger?: boolean;
+  /**
+   * A function that is getting called, when the element acts as a trigger (`isTrigger = true`) and gets into view.
+   */
+  onTriggered?: () => void;
+}
+
+export const ListRowRenderer = <T extends Data>({
+  listRowProps,
+  isTrigger = false,
+  customRowRenderer,
+  onTriggered,
+}: RowRendererProps<T>): React.ReactElement<
+  T,
+  string | React.JSXElementConstructor<T>
+> | null => {
+  // Pagination trigger logic
+  // Trigger based on: https://www.youtube.com/watch?v=NZKUirTtxcg
+  const onTriggeredHandler = useCallback(() => {
+    onTriggered && onTriggered();
+  }, [onTriggered]);
+
+  const observer = useRef<IntersectionObserver>();
+  const elementRef = useCallback(
+    (node: HTMLDivElement) => {
+      if (isTrigger === false) {
+        return;
+      }
+      if (observer.current) {
+        observer.current.disconnect();
+      }
+      observer.current = new IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting) {
+          onTriggeredHandler();
+        }
+      });
+
+      if (node) {
+        observer.current.observe(node);
+      }
+    },
+    [isTrigger, onTriggeredHandler],
+  );
+
+  if (customRowRenderer) {
+    const customElement = customRowRenderer(listRowProps);
+
+    if (customElement) {
+      return <div ref={isTrigger ? elementRef : null}>{customElement}</div>;
+    }
+  }
+
+  return <ListRow {...listRowProps} ref={isTrigger ? elementRef : null} />;
+};

package/src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup.scss

@@ -32,46 +32,46 @@
     background-color: white;
 
     z-index: 2;
-  }
-}
 
-.dropDown {
-  height: unset;
-  width: unset;
+    .dropDown {
+      height: unset;
+      width: unset;
 
-  display: grid;
-  grid-template-columns: 1fr 40px;
-  grid-template-rows: 1fr;
+      display: grid;
+      grid-template-columns: 1fr 40px;
+      grid-template-rows: 1fr;
 
-  // icon
-  div:first-child {
-    display: grid;
-    align-items: center;
-    grid-row: 1 / span 1;
-    justify-items: start;
-    grid-column: 2 / span 1;
-    padding: 0px;
+      // icon
+      div:first-child {
+        display: grid;
+        align-items: center;
+        grid-row: 1 / span 1;
+        justify-items: start;
+        grid-column: 2 / span 1;
+        padding: 0px;
 
-    svg,
-    img {
-      height: 30px;
-    }
-  }
+        svg,
+        img {
+          height: 30px;
+        }
+      }
 
-  // label
-  div:last-child {
-    display: grid;
-    align-items: center;
-    grid-column: 1 / span 1;
-    justify-items: start;
+      // label
+      div:last-child {
+        display: grid;
+        align-items: center;
+        grid-column: 1 / span 1;
+        justify-items: start;
 
-    padding: 0px 0px 0px 20px;
+        padding: 0px 0px 0px 20px;
 
-    span {
-      height: 30px;
+        span {
+          height: 30px;
 
-      display: grid;
-      align-items: center;
+          display: grid;
+          align-items: center;
+        }
+      }
     }
   }
 }