@popsure/dirty-swan 0.53.3 → 0.53.5

package/src/lib/components/table/utils/useScrollSync/useScrollSync.test.tsx

@@ -0,0 +1,76 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useScrollSync } from './useScrollSync';
+
+describe('useScrollSync', () => {
+  it('should sync scrollLeft of source and target elements', () => {
+    const sourceRef = { current: document.createElement('div') };
+    const targetRef = { current: document.createElement('div') };
+
+    renderHook(() => useScrollSync(sourceRef, targetRef));
+
+    act(() => {
+      sourceRef.current.scrollLeft = 100;
+      targetRef.current.scrollLeft = 0;
+      sourceRef.current.dispatchEvent(new Event('scroll'));
+    });
+
+    expect(targetRef.current.scrollLeft).toBe(100);
+
+    act(() => {
+      targetRef.current.scrollLeft = 200;
+      sourceRef.current.scrollLeft = 0;
+      targetRef.current.dispatchEvent(new Event('scroll'));
+    });
+
+    expect(sourceRef.current.scrollLeft).toBe(200);
+  });
+
+  it('should not sync scrollLeft if enabled is false', () => {
+    const sourceRef = { current: document.createElement('div') };
+    const targetRef = { current: document.createElement('div') };
+
+    renderHook(() => useScrollSync(sourceRef, targetRef, false));
+
+    act(() => {
+      sourceRef.current.scrollLeft = 100;
+      targetRef.current.scrollLeft = 0;
+      sourceRef.current.dispatchEvent(new Event('scroll'));
+    });
+
+    expect(targetRef.current.scrollLeft).toBe(0);
+
+    act(() => {
+      targetRef.current.scrollLeft = 200;
+      sourceRef.current.scrollLeft = 0;
+      targetRef.current.dispatchEvent(new Event('scroll'));
+    });
+
+    expect(sourceRef.current.scrollLeft).toBe(0);
+  });
+
+  it('should not sync scrollLeft if source or target elements are not available', () => {
+    const sourceRef = { current: null };
+    const targetRef = { current: document.createElement('div') };
+
+    renderHook(() => useScrollSync(sourceRef, targetRef));
+
+    act(() => {
+      targetRef.current.scrollLeft = 200;
+      targetRef.current.dispatchEvent(new Event('scroll'));
+    });
+
+    expect(sourceRef.current).toBeNull();
+
+    const sourceRef2 = { current: document.createElement('div') };
+    const targetRef2 = { current: null };
+
+    renderHook(() => useScrollSync(sourceRef2, targetRef2));
+
+    act(() => {
+      sourceRef2.current.scrollLeft = 100;
+      sourceRef2.current.dispatchEvent(new Event('scroll'));
+    });
+
+    expect(targetRef2.current).toBeNull();
+  });
+});

package/src/lib/components/table/utils/useScrollSync/useScrollSync.ts

@@ -0,0 +1,40 @@
+import { useEffect, RefObject } from "react";
+
+export const useScrollSync = (
+  sourceRef: RefObject<HTMLDivElement>,
+  targetRef: RefObject<HTMLDivElement>,
+  enabled = true
+) => {
+  useEffect(() => {
+    if (!sourceRef.current || !targetRef.current || !enabled) {
+      return;
+    }
+
+    const sourceElement = sourceRef?.current;
+    const targetElement = targetRef?.current;
+
+    const handleScroll = (
+      source?: HTMLDivElement | null,
+      target?: HTMLDivElement | null
+    ) => {
+      if (source && target) {
+        target.scrollLeft = source.scrollLeft;
+      }
+    };
+
+    const syncScroll1 = () => handleScroll(sourceElement, targetElement);
+    const syncScroll2 = () => handleScroll(targetElement, sourceElement);
+
+    if (sourceElement && targetElement) {
+      sourceElement.addEventListener("scroll", syncScroll1);
+      targetElement.addEventListener("scroll", syncScroll2);
+    }
+
+    return () => {
+      if (sourceElement && targetElement) {
+        sourceElement.removeEventListener("scroll", syncScroll1);
+        targetElement.removeEventListener("scroll", syncScroll2);
+      }
+    };
+  }, [enabled, sourceRef, targetRef]);
+};

package/src/lib/components/table/utils/useTableNavigation/useTableNavigation.test.tsx

@@ -0,0 +1,83 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useTableNavigation } from './useTableNavigation';
+import { RefObject } from 'react';
+const defaultContainerRef = {
+  current: {
+    scroll: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    getBoundingClientRect: jest.fn(() => ({ width: 800 })),
+  },
+} as unknown as RefObject<HTMLElement>;
+
+describe('useTableNavigation', () => {
+  let onSelectionChanged = jest.fn();
+  let containerRef = defaultContainerRef;
+
+  beforeEach(() => {
+    containerRef = defaultContainerRef;
+    onSelectionChanged = jest.fn();
+  });
+
+  it('should not navigate when enabled is false', () => {
+    const { result } = renderHook(() =>
+      useTableNavigation({
+        enabled: false,
+        containerRef,
+        onSelectionChanged,
+      })
+    );
+
+    act(() => {
+      result.current.navigateTable(true);
+    });
+
+    expect(result.current.activeSection).toBe(1);
+    expect(containerRef.current?.scroll).not.toHaveBeenCalled();
+    expect(onSelectionChanged).not.toHaveBeenCalled();
+  });
+
+  it('should navigate to the next section when increase is true', () => {
+    const { result } = renderHook(() =>
+      useTableNavigation({
+        enabled: true,
+        containerRef,
+        onSelectionChanged,
+      })
+    );
+
+    act(() => {
+      result.current.navigateTable(true);
+    });
+
+    expect(result.current.activeSection).toBe(2);
+    expect(containerRef.current?.scroll).toHaveBeenCalledWith({
+      top: 0,
+      left: expect.any(Number),
+      behavior: 'smooth',
+    });
+    expect(onSelectionChanged).toHaveBeenCalledWith(2);
+  });
+
+  it('should navigate to the previous section when increase is false', () => {
+    const { result } = renderHook(() =>
+      useTableNavigation({
+        enabled: true,
+        containerRef,
+        onSelectionChanged,
+      })
+    );
+
+    act(() => {
+      result.current.navigateTable(false);
+    });
+
+    expect(result.current.activeSection).toBe(0);
+    expect(containerRef.current?.scroll).toHaveBeenCalledWith({
+      top: 0,
+      left: expect.any(Number),
+      behavior: 'smooth',
+    });
+    expect(onSelectionChanged).toHaveBeenCalledWith(0);
+  });
+});

package/src/lib/components/table/utils/useTableNavigation/useTableNavigation.ts

@@ -0,0 +1,79 @@
+import debounce from "lodash.debounce";
+import { useCallback, useEffect, useState } from "react";
+
+interface UseTableNavigationReturn {
+  activeSection: number;
+  navigateTable: (increase?: boolean) => void;
+}
+
+interface UseTableNavigationProps {
+  containerRef: React.RefObject<HTMLElement>,
+  enabled?: boolean,
+  onSelectionChanged?: (index: number) => void
+}
+
+export const useTableNavigation = ({
+  enabled,
+  containerRef,
+  onSelectionChanged
+}: UseTableNavigationProps): UseTableNavigationReturn => {
+  const [activeSection, setActiveSection] = useState(0);
+
+  const handleScrollToSection = (increase?: boolean) => {
+    if (!enabled) {
+      return;
+    }
+
+    setActiveSection((prevSection) => 
+      prevSection + (increase ? 1 : -1)
+    );
+  };
+
+  const handleTableScroll = useCallback(() => {
+    if (!containerRef.current || !enabled) {
+      return;
+    }
+
+    const containerWidth = containerRef.current.getBoundingClientRect().width;
+    const scrollLeft = containerRef.current.scrollLeft;
+    const cellWidth = containerWidth / 2;
+
+    setActiveSection(Math.floor(scrollLeft / cellWidth));
+   }, [activeSection, containerRef, enabled]);
+
+  const debouncedTableScroll = debounce(handleTableScroll, 150);
+
+  useEffect(() => {
+    const container = containerRef.current;
+
+    container?.addEventListener('scroll', debouncedTableScroll, {
+      passive: true,
+    });
+
+    return container?.removeEventListener('scroll', handleTableScroll);
+  }, [enabled]);
+
+  useEffect(() => {
+    if (!enabled) {
+      return
+    }
+
+    onSelectionChanged?.(activeSection + 1);
+
+    if (containerRef.current) {
+      const containerWidth = containerRef.current.getBoundingClientRect().width;
+      const cellWidth = containerWidth / 2;
+
+      containerRef.current.scroll({
+        top: 0,
+        left: cellWidth * activeSection,
+        behavior: 'smooth',
+      });
+    }
+  }, [enabled, activeSection]);
+
+  return {
+    activeSection: activeSection + 1,
+    navigateTable: handleScrollToSection,
+  }
+}

package/src/lib/hooks/useMediaQuery.test.ts

@@ -0,0 +1,113 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import {
+  Breakpoint,
+  BreakpointData,
+  breakpointLookup,
+  breakpointsArray,
+  useMediaQuery,
+} from './useMediaQuery';
+
+beforeAll(() => {
+  window.matchMedia =
+    window.matchMedia ||
+    function () {
+      return {
+        matches: true,
+        addEventListener() {},
+        removeEventListener() {},
+      };
+    };
+});
+
+describe('useMediaQuery hook', () => {
+  it('should return the correct value pair for each breakpoint from lookup table', () => {
+    const expectedValues: { [k in Breakpoint]: BreakpointData } = {
+      BELOW_MOBILE: {
+        initialValue: window.innerWidth <= 544,
+        queryString: '(max-width: 34rem)',
+      },
+      BELOW_TABLET: {
+        initialValue: window.innerWidth <= 720,
+        queryString: '(max-width: 45rem)',
+      },
+      BELOW_DESKTOP: {
+        initialValue: window.innerWidth <= 1024,
+        queryString: '(max-width: 64rem)',
+      },
+      ABOVE_MOBILE: {
+        initialValue: window.innerWidth >= 544,
+        queryString: '(min-width: 34rem)',
+      },
+      ABOVE_TABLET: {
+        initialValue: window.innerWidth >= 720,
+        queryString: '(min-width: 45rem)',
+      },
+      ABOVE_DESKTOP: {
+        initialValue: window.innerWidth >= 1024,
+        queryString: '(min-width: 64rem)',
+      },
+    };
+
+    breakpointsArray.forEach((bp) => {
+      expect(breakpointLookup(bp)).toEqual(expectedValues[bp]);
+    });
+  });
+
+  it('should output the correct (initial) value', () => {
+    const inputValues: {
+      breakpoint: Breakpoint;
+      below: number;
+      above: number;
+      expectedValues: boolean[];
+    }[] = [
+      {
+        breakpoint: 'BELOW_MOBILE',
+        below: 300,
+        above: 600,
+        expectedValues: [true, false],
+      },
+      {
+        breakpoint: 'ABOVE_MOBILE',
+        below: 300,
+        above: 600,
+        expectedValues: [false, true],
+      },
+      {
+        breakpoint: 'BELOW_TABLET',
+        below: 600,
+        above: 800,
+        expectedValues: [true, false],
+      },
+      {
+        breakpoint: 'ABOVE_TABLET',
+        below: 600,
+        above: 800,
+        expectedValues: [false, true],
+      },
+      {
+        breakpoint: 'BELOW_DESKTOP',
+        below: 800,
+        above: 1100,
+        expectedValues: [true, false],
+      },
+      {
+        breakpoint: 'ABOVE_DESKTOP',
+        below: 800,
+        above: 1100,
+        expectedValues: [false, true],
+      },
+    ];
+    let view;
+
+    inputValues.forEach(({ breakpoint, below, above, expectedValues }) => {
+      window.innerWidth = below;
+      view = renderHook(() => useMediaQuery(breakpoint));
+      expect(view.result.current).toEqual(expectedValues[0]);
+
+      window.innerWidth = above;
+      view = renderHook(() => useMediaQuery(breakpoint));
+      expect(view.result.current).toEqual(expectedValues[1]);
+    });
+  });
+});

package/src/lib/hooks/useMediaQuery.ts

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+
+// USAGE:
+// const isMobile = useMediaQuery('BELOW_MOBILE');
+
+export const breakpointsArray = [
+  'ABOVE_MOBILE',
+  'ABOVE_TABLET',
+  'ABOVE_DESKTOP',
+  'BELOW_MOBILE',
+  'BELOW_TABLET',
+  'BELOW_DESKTOP',
+] as const;
+
+export type Breakpoint = typeof breakpointsArray[number];
+export type BreakpointData = { initialValue: boolean; queryString: string };
+
+export const breakpointLookup = (breakpoint: Breakpoint): BreakpointData => {
+  switch (breakpoint) {
+    case 'BELOW_MOBILE':
+    default:
+      return {
+        initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}
+        queryString: '(max-width: 34rem)',
+      };
+    case 'BELOW_TABLET':
+      return {
+        initialValue: window.innerWidth <= 720, // 45rem = 720px = tablet breakpoint
+        queryString: '(max-width: 45rem)',
+      };
+    case 'BELOW_DESKTOP':
+      return {
+        initialValue: window.innerWidth <= 1024, // 64rem = 1024px = desktop breakpoint
+        queryString: '(max-width: 64rem)',
+      };
+    case 'ABOVE_MOBILE':
+      return {
+        initialValue: window.innerWidth >= 544, // 34rem = 544px = mobile breakpoint}
+        queryString: '(min-width: 34rem)',
+      };
+    case 'ABOVE_TABLET':
+      return {
+        initialValue: window.innerWidth >= 720, // 45rem = 720px = tablet breakpoint
+        queryString: '(min-width: 45rem)',
+      };
+    case 'ABOVE_DESKTOP':
+      return {
+        initialValue: window.innerWidth >= 1024, // 64rem = 1024px = desktop breakpoint
+        queryString: '(min-width: 64rem)',
+      };
+  }
+};
+
+export const useMediaQuery = (breakpoint: Breakpoint) => {
+  const { initialValue, queryString } = breakpointLookup(breakpoint);
+
+  const [matchesBreakpoint, setMatchesBreakpoint] = useState(initialValue);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(queryString);
+
+    const updateMediaQuery = (e: MediaQueryListEvent) =>
+      setMatchesBreakpoint(e.matches);
+
+    mediaQuery.addEventListener('change', updateMediaQuery);
+
+    return () => {
+      mediaQuery.removeEventListener('change', updateMediaQuery);
+    };
+  }, [queryString]);
+
+  return matchesBreakpoint;
+};

package/src/lib/index.tsx

@@ -10,7 +10,10 @@ import {
   UploadStatus,
 } from './components/multiDropzone';
 import { DownloadButton } from './components/downloadButton';
-import { InformationBox, InformationBoxProps } from './components/informationBox';
+import {
+  InformationBox,
+  InformationBoxProps,
+} from './components/informationBox';
 import IbanInput from './components/input/iban';
 import { CurrencyInput } from './components/input/currency';
 import { Badge } from './components/badge';
@@ -22,7 +25,7 @@ import {
   BottomOrRegularModal,
 } from './components/modal';
 import { InfoCard, CardButton } from './components/cards';
-import { Card, CardProps  } from './components/cards/card';
+import { Card, CardProps } from './components/cards/card';
 import { Button } from './components/button';
 import { AutoSuggestMultiSelect } from './components/input/autoSuggestMultiSelect';
 import Chip from './components/chip';
@@ -44,6 +47,7 @@ import { Toggle } from './components/input/toggle';
 import { Toaster, toast } from './components/toast';
 import { IconWrapperProps } from './components/icon/IconWrapper';
 import { Accordion, AccordionProps } from './components/accordion';
+import { Table, TableData, TableProps } from './components/table/Table';
 
 export * from './components/icon';
 
@@ -82,6 +86,7 @@ export {
   images,
   illustrations,
   Spinner,
+  Table,
   Toggle,
   Toaster,
   toast,
@@ -97,7 +102,9 @@ export type {
   UploadedFile,
   UploadStatus,
   CardProps,
-  IconWrapperProps
+  IconWrapperProps,
+  TableData,
+  TableProps,
 };
 
 export type { DownloadStatus } from './models/download';

package/src/setupTests.js

@@ -1,5 +1,7 @@
 import '@testing-library/jest-dom';
 
+const noop = () => {};
+
 window.google = {
   maps: {
     StyledMapType: class {},
@@ -54,3 +56,16 @@ window.google = {
     Geocoder: class {},
   },
 };
+
+Object.defineProperty(window, 'scrollTo', { value: noop, writable: true });
+
+Object.defineProperty(window, 'matchMedia', {
+  value() {
+    return {
+      matches: true,
+      addEventListener() {},
+      removeEventListener() {},
+    };
+  },
+  writable: true,
+});

package/dist/esm/_commonjsHelpers-e7f67fd8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_commonjsHelpers-e7f67fd8.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}