@popsure/dirty-swan 0.66.25 → 0.66.27

package/src/lib/components/table/Table.test.tsx

@@ -1,7 +1,13 @@
+import { useState } from 'react';
 import { render, screen } from '../../util/testUtils';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { Table } from './Table';
 import { TableSectionData } from './types';
 
+jest.mock('../../hooks/useMediaQuery', () => ({
+  useMediaQuery: jest.fn(() => false),
+}));
+
 const tableData: TableSectionData[] = [
   {
     section: {
@@ -139,3 +145,61 @@ describe('Table', () => {
     expect(screen.getByText('I am custom')).toBeInTheDocument();
   });
 });
+
+describe('Table on mobile with a parent-controlled section', () => {
+  const planTable: TableSectionData[] = [
+    {
+      rows: [
+        [{ text: 'Choose your plan' }, { text: 'Basic' }, { text: 'Advanced' }],
+      ],
+    },
+  ];
+
+  const ControlledTable = ({
+    onSelectionChanged,
+  }: {
+    onSelectionChanged: (index: number) => void;
+  }) => {
+    const [activeSection, setActiveSection] = useState(2);
+
+    return (
+      <Table
+        title="Plans"
+        tableData={planTable}
+        activeSection={activeSection}
+        onSelectionChanged={(index) => {
+          onSelectionChanged(index);
+          setActiveSection(index);
+        }}
+      />
+    );
+  };
+
+  beforeAll(() => {
+    HTMLElement.prototype.scroll = jest.fn();
+    (useMediaQuery as jest.Mock).mockReturnValue(true);
+  });
+
+  afterAll(() => {
+    (useMediaQuery as jest.Mock).mockReturnValue(false);
+  });
+
+  it('settles on the parent section instead of bouncing between columns', () => {
+    const reported: number[] = [];
+
+    render(
+      <ControlledTable
+        onSelectionChanged={(index) => {
+          reported.push(index);
+          if (reported.length > 5) {
+            throw new Error(`selection bounced: ${reported.join(',')}`);
+          }
+        }}
+      />
+    );
+
+    expect(reported).toEqual([2]);
+    expect(screen.getByTestId('previous-section-button')).toBeEnabled();
+    expect(screen.getByTestId('next-section-button')).toBeDisabled();
+  });
+});

package/src/lib/components/table/Table.tsx

@@ -94,13 +94,13 @@ const Table = ({
 
   const useTabs = isMobile && mobileNavigationMode === 'tabs';
 
-  const { activeSection, navigateTable, setActiveSection } = useTableNavigation(
-    {
+  const { activeSection, navigateTable, setActiveSection, syncActiveSection } =
+    useTableNavigation({
       enabled: isMobile,
       containerRef,
+      initialSection: externalActiveSection ? externalActiveSection - 1 : 0,
       onSelectionChanged,
-    }
-  );
+    });
 
   const headerRow = tableData?.[0]?.rows?.[0];
   const titleCell = {
@@ -138,7 +138,7 @@ const Table = ({
 
   useEffect(() => {
     if (externalActiveSection && externalActiveSection !== activeSection) {
-      setActiveSection(externalActiveSection - 1);
+      syncActiveSection(externalActiveSection - 1);
     }
   }, [externalActiveSection]);
 

package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.module.scss

@@ -1,7 +1,12 @@
 @use "../../../../../scss/public/grid" as *;
 @use "../../../../../scss/public/colors" as *;
 
+.wrapper {
+  height: 100%;
+}
+
 .buttonCell {
+  flex: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;

package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx

@@ -29,6 +29,7 @@ export const ButtonCell = ({
     <div
       className={classNames(
         "w100 d-flex fd-column ai-start jc-center gap8",
+        styles.wrapper,
         className,
       )}
       data-cy={dataCy}

package/src/lib/components/table/components/TableCell/TableCell.module.scss

@@ -42,6 +42,12 @@
   padding-left: 0;
 }
 
+// Lets the ButtonCell stretch (height: 100%) so buttons in the same row match
+// the tallest one; the cell still grows with its content.
+.buttonCell {
+  height: 1px;
+}
+
 .selectedColumnTop {
   border-radius: 16px 16px 0 0;
 }

package/src/lib/components/table/components/TableCell/TableCell.tsx

@@ -59,6 +59,7 @@ const TableCell = React.memo(
           [styles.navigationTitle]: isNavigation && isTopLeftCell,
           [styles.fixedCell]: isFirstCellInRow && colSpan < 1 ,
           [styles.fixedCard]: cellProps.type === 'CARD',
+          [styles.buttonCell]: cellProps.type === 'BUTTON',
           [styles.selectedColumnTop]: selectedColumnPosition === 'top',
           [styles.selectedColumnBottom]: selectedColumnPosition === 'bottom',
         })}

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;;;;"}