@popsure/dirty-swan 0.66.25 → 0.66.26

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

@@ -80,4 +80,62 @@ describe('useTableNavigation', () => {
     });
     expect(onSelectionChanged).toHaveBeenCalledWith(0);
   });
+
+  it('starts on the section passed by the parent instead of the first one', () => {
+    const { result } = renderHook(() =>
+      useTableNavigation({
+        enabled: true,
+        containerRef,
+        onSelectionChanged,
+        initialSection: 1,
+      })
+    );
+
+    expect(result.current.activeSection).toBe(2);
+    expect(containerRef.current?.scroll).toHaveBeenCalledWith({
+      top: 0,
+      left: 400,
+      behavior: 'smooth',
+    });
+  });
+
+  it('does not report a section pushed in by the parent as a user selection', () => {
+    const { result } = renderHook(() =>
+      useTableNavigation({
+        enabled: true,
+        containerRef,
+        onSelectionChanged,
+      })
+    );
+    onSelectionChanged.mockClear();
+
+    act(() => {
+      result.current.syncActiveSection(1);
+    });
+
+    expect(result.current.activeSection).toBe(2);
+    expect(onSelectionChanged).not.toHaveBeenCalled();
+  });
+
+  it('keeps reporting user navigation after a parent sync', () => {
+    const { result } = renderHook(() =>
+      useTableNavigation({
+        enabled: true,
+        containerRef,
+        onSelectionChanged,
+      })
+    );
+
+    act(() => {
+      result.current.syncActiveSection(1);
+    });
+    onSelectionChanged.mockClear();
+
+    act(() => {
+      result.current.navigateTable(false);
+    });
+
+    expect(result.current.activeSection).toBe(1);
+    expect(onSelectionChanged).toHaveBeenCalledWith(1);
+  });
 });

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

@@ -1,24 +1,38 @@
 import debounce from "lodash.debounce";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 interface UseTableNavigationReturn {
   activeSection: number;
   navigateTable: (increase?: boolean) => void;
   setActiveSection: (section: number) => void;
+  syncActiveSection: (section: number) => void;
 }
 
 interface UseTableNavigationProps {
   containerRef: React.RefObject<HTMLElement>,
   enabled?: boolean,
+  initialSection?: number,
   onSelectionChanged?: (index: number) => void
 }
 
 export const useTableNavigation = ({
   enabled,
   containerRef,
+  initialSection = 0,
   onSelectionChanged
 }: UseTableNavigationProps): UseTableNavigationReturn => {
-  const [activeSection, setActiveSection] = useState(0);
+  const [activeSection, setActiveSection] = useState(initialSection);
+  const activeSectionRef = useRef(initialSection);
+  const skipNextReportRef = useRef(false);
+
+  const syncActiveSection = useCallback((section: number) => {
+    if (section === activeSectionRef.current) {
+      return;
+    }
+
+    skipNextReportRef.current = true;
+    setActiveSection(section);
+  }, []);
 
   const handleScrollToSection = (increase?: boolean) => {
     if (!enabled) {
@@ -55,11 +69,18 @@ export const useTableNavigation = ({
   }, [enabled]);
 
   useEffect(() => {
+    activeSectionRef.current = activeSection;
+
+    const skipReport = skipNextReportRef.current;
+    skipNextReportRef.current = false;
+
     if (!enabled) {
       return
     }
 
-    onSelectionChanged?.(activeSection + 1);
+    if (!skipReport) {
+      onSelectionChanged?.(activeSection + 1);
+    }
 
     if (containerRef.current) {
       const containerWidth = containerRef.current.getBoundingClientRect().width;
@@ -77,5 +98,6 @@ export const useTableNavigation = ({
     activeSection: activeSection + 1,
     navigateTable: handleScrollToSection,
     setActiveSection,
+    syncActiveSection,
   }
 }

package/dist/esm/useTableNavigation-CrxoXTVd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTableNavigation-CrxoXTVd.js","sources":["../../../src/lib/components/table/utils/useTableNavigation/useTableNavigation.ts"],"sourcesContent":["import debounce from \"lodash.debounce\";\nimport { useCallback, useEffect, useState } from \"react\";\n\ninterface UseTableNavigationReturn {\n  activeSection: number;\n  navigateTable: (increase?: boolean) => void;\n  setActiveSection: (section: number) => void;\n}\n\ninterface UseTableNavigationProps {\n  containerRef: React.RefObject<HTMLElement>,\n  enabled?: boolean,\n  onSelectionChanged?: (index: number) => void\n}\n\nexport const useTableNavigation = ({\n  enabled,\n  containerRef,\n  onSelectionChanged\n}: UseTableNavigationProps): UseTableNavigationReturn => {\n  const [activeSection, setActiveSection] = useState(0);\n\n  const handleScrollToSection = (increase?: boolean) => {\n    if (!enabled) {\n      return;\n    }\n\n    setActiveSection((prevSection) => \n      prevSection + (increase ? 1 : -1)\n    );\n  };\n\n  const handleTableScroll = useCallback(() => {\n    if (!containerRef.current || !enabled) {\n      return;\n    }\n\n    const containerWidth = containerRef.current.getBoundingClientRect().width;\n    const scrollLeft = containerRef.current.scrollLeft * 1.1;\n    const cellWidth = containerWidth / 2;\n\n    setActiveSection(Math.floor(scrollLeft / cellWidth));\n   }, [activeSection, containerRef, enabled]);\n\n  const debouncedTableScroll = debounce(handleTableScroll, 150);\n\n  useEffect(() => {\n    const container = containerRef.current;\n\n    container?.addEventListener('scroll', debouncedTableScroll, {\n      passive: true,\n    });\n\n    return container?.removeEventListener('scroll', handleTableScroll);\n  }, [enabled]);\n\n  useEffect(() => {\n    if (!enabled) {\n      return\n    }\n\n    onSelectionChanged?.(activeSection + 1);\n\n    if (containerRef.current) {\n      const containerWidth = containerRef.current.getBoundingClientRect().width;\n      const cellWidth = containerWidth / 2;\n\n      containerRef.current.scroll({\n        top: 0,\n        left: cellWidth * activeSection,\n        behavior: 'smooth',\n      });\n    }\n  }, [enabled, activeSection]);\n\n  return {\n    activeSection: activeSection + 1,\n    navigateTable: handleScrollToSection,\n    setActiveSection,\n  }\n}"],"names":[],"mappings":";;;AAeO,IAAM,kBAAkB,GAAG,UAAC,EAIT,EAAA;AAHxB,IAAA,IAAA,OAAO,aAAA,EACP,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,kBAAkB,GAAA,EAAA,CAAA,kBAAA;IAEZ,IAAA,EAAA,GAAoC,QAAQ,CAAC,CAAC,CAAC,EAA9C,aAAa,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,gBAAgB,GAAA,EAAA,CAAA,CAAA,CAAe;IAErD,IAAM,qBAAqB,GAAG,UAAC,QAAkB,EAAA;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ;QACF;QAEA,gBAAgB,CAAC,UAAC,WAAW,EAAA;AAC3B,YAAA,OAAA,WAAW,IAAI,QAAQ,GAAG,CAAC,GAAG,EAAE,CAAC;AAAjC,QAAA,CAAiC,CAClC;AACH,IAAA,CAAC;IAED,IAAM,iBAAiB,GAAG,WAAW,CAAC,YAAA;QACpC,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;YACrC;QACF;QAEA,IAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK;QACzE,IAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,UAAU,GAAG,GAAG;AACxD,QAAA,IAAM,SAAS,GAAG,cAAc,GAAG,CAAC;QAEpC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC;IAE3C,IAAM,oBAAoB,GAAG,QAAQ,CAAC,iBAAiB,EAAE,GAAG,CAAC;AAE7D,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO;QAEtC,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE;AAC1D,YAAA,OAAO,EAAE,IAAI;AACd,SAAA,CAAC;AAEF,QAAA,OAAO,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,CAAC;AACpE,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,SAAS,CAAC,YAAA;QACR,IAAI,CAAC,OAAO,EAAE;YACZ;QACF;QAEA,kBAAkB,KAAA,IAAA,IAAlB,kBAAkB,KAAA,MAAA,GAAA,MAAA,GAAlB,kBAAkB,CAAG,aAAa,GAAG,CAAC,CAAC;AAEvC,QAAA,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,IAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK;AACzE,YAAA,IAAM,SAAS,GAAG,cAAc,GAAG,CAAC;AAEpC,YAAA,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC;AAC1B,gBAAA,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,SAAS,GAAG,aAAa;AAC/B,gBAAA,QAAQ,EAAE,QAAQ;AACnB,aAAA,CAAC;QACJ;AACF,IAAA,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IAE5B,OAAO;QACL,aAAa,EAAE,aAAa,GAAG,CAAC;AAChC,QAAA,aAAa,EAAE,qBAAqB;AACpC,QAAA,gBAAgB,EAAA,gBAAA;KACjB;AACH;;;;"}