@popsure/dirty-swan 0.66.24 → 0.66.26

package/src/lib/components/modal/genericModal/index.tsx

@@ -1,5 +1,6 @@
 import { Props } from '..';
 import useOnClose, { OnCloseReturn } from '../hooks/useOnClose';
+import { useModalTrack } from '../../../context';
 
 import styles from './style.module.scss';
 import classNamesUtil from 'classnames';
@@ -156,6 +157,7 @@ const InnerModal = ({
 export const GenericModal = (props: GenericModalProps) => {
   const { isOpen, onClose, dismissible = true } = props;
   const { isVisible, ...rest } = useOnClose(onClose, isOpen, dismissible);
+  useModalTrack(isVisible);
 
   if (!isVisible) {
     return null;

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/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/src/lib/context.stories.tsx

@@ -0,0 +1,136 @@
+import { useState } from 'react';
+import { DirtySwanProvider } from './context';
+import { BottomOrRegularModal } from './components/modal';
+import { Button } from './components/button';
+
+const story = {
+  title: 'JSX/DirtySwanProvider',
+  component: DirtySwanProvider,
+  argTypes: {
+    onModalChange: {
+      description:
+        'Callback fired when the modal open state changes. Receives `true` when the first modal opens and `false` when the last modal closes.',
+      action: true,
+      table: {
+        category: 'Callbacks',
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'An optional context provider that notifies consumers when any modal is open or closed. It tracks nested modals using a counter — `onModalChange(true)` fires when the first modal opens, and `onModalChange(false)` only fires when the last one closes.',
+      },
+    },
+  },
+};
+
+export const SingleModal = {
+  render: ({ onModalChange }: { onModalChange: (isOpen: boolean) => void }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const handleModalChange = (open: boolean) => {
+      setIsModalOpen(open);
+      onModalChange(open);
+    };
+
+    return (
+      <DirtySwanProvider onModalChange={handleModalChange}>
+        <div className="d-flex fd-column gap16">
+          <div>
+            Modal state: <strong>{isModalOpen ? 'open' : 'closed'}</strong>
+          </div>
+          <Button className="wmn2" onClick={() => setIsOpen(true)}>
+            Open modal
+          </Button>
+        </div>
+
+        <BottomOrRegularModal
+          title="Single modal"
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+        >
+          <div style={{ padding: '0 24px 24px 24px' }}>
+            Opening this modal triggered onModalChange(true). Closing it will
+            trigger onModalChange(false).
+            <Button className="mt24 wmn3" onClick={() => setIsOpen(false)}>
+              Close
+            </Button>
+          </div>
+        </BottomOrRegularModal>
+      </DirtySwanProvider>
+    );
+  },
+  name: 'Single modal',
+};
+
+export const NestedModals = {
+  render: ({ onModalChange }: { onModalChange: (isOpen: boolean) => void }) => {
+    const [isFirstOpen, setIsFirstOpen] = useState(false);
+    const [isSecondOpen, setIsSecondOpen] = useState(false);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const handleModalChange = (open: boolean) => {
+      setIsModalOpen(open);
+      onModalChange(open);
+    };
+
+    return (
+      <DirtySwanProvider onModalChange={handleModalChange}>
+        <div className="d-flex fd-column gap16">
+          <div>
+            Modal state: <strong>{isModalOpen ? 'open' : 'closed'}</strong>
+          </div>
+          <Button className="wmn2" onClick={() => setIsFirstOpen(true)}>
+            Open first modal
+          </Button>
+        </div>
+
+        <BottomOrRegularModal
+          title="First modal"
+          isOpen={isFirstOpen}
+          onClose={() => setIsFirstOpen(false)}
+        >
+          <div style={{ padding: '0 24px 24px 24px' }}>
+            This is the first modal. Open a second one to see that
+            onModalChange(false) only fires when both are closed.
+            <div className="d-flex fd-row gap8 mt24">
+              <Button className="wmn3" onClick={() => setIsSecondOpen(true)}>
+                Open second modal
+              </Button>
+              <Button
+                variant="textBlack"
+                className="wmn3"
+                onClick={() => setIsFirstOpen(false)}
+              >
+                Close
+              </Button>
+            </div>
+          </div>
+        </BottomOrRegularModal>
+
+        <BottomOrRegularModal
+          title="Second modal"
+          isOpen={isSecondOpen}
+          onClose={() => setIsSecondOpen(false)}
+        >
+          <div style={{ padding: '0 24px 24px 24px' }}>
+            This is the second (nested) modal. Closing this one will not trigger
+            onModalChange(false) because the first modal is still open.
+            <Button
+              className="mt24 wmn3"
+              onClick={() => setIsSecondOpen(false)}
+            >
+              Close
+            </Button>
+          </div>
+        </BottomOrRegularModal>
+      </DirtySwanProvider>
+    );
+  },
+  name: 'Nested modals',
+};
+
+export default story;

package/src/lib/context.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen, fireEvent } from './util/testUtils';
+import { DirtySwanProvider, useDirtySwan } from './context';
+
+const TestConsumer = () => {
+  const ctx = useDirtySwan();
+
+  return (
+    <div>
+      <button onClick={() => ctx?.onModalOpen()}>open</button>
+      <button onClick={() => ctx?.onModalClose()}>close</button>
+    </div>
+  );
+};
+
+describe('DirtySwanProvider', () => {
+  it('calls onModalChange(true) when first modal opens', () => {
+    const onModalChange = jest.fn();
+    render(
+      <DirtySwanProvider onModalChange={onModalChange}>
+        <TestConsumer />
+      </DirtySwanProvider>
+    );
+
+    fireEvent.click(screen.getByText('open'));
+
+    expect(onModalChange).toHaveBeenCalledWith(true);
+  });
+
+  it('calls onModalChange(false) when last modal closes', () => {
+    const onModalChange = jest.fn();
+    render(
+      <DirtySwanProvider onModalChange={onModalChange}>
+        <TestConsumer />
+      </DirtySwanProvider>
+    );
+
+    fireEvent.click(screen.getByText('open'));
+    fireEvent.click(screen.getByText('close'));
+
+    expect(onModalChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it('does not call onModalChange(false) when nested modals are still open', () => {
+    const onModalChange = jest.fn();
+    render(
+      <DirtySwanProvider onModalChange={onModalChange}>
+        <TestConsumer />
+      </DirtySwanProvider>
+    );
+
+    fireEvent.click(screen.getByText('open'));
+    fireEvent.click(screen.getByText('open'));
+    fireEvent.click(screen.getByText('close'));
+
+    expect(onModalChange).toHaveBeenCalledTimes(1);
+    expect(onModalChange).toHaveBeenCalledWith(true);
+  });
+
+  it('calls onModalChange(false) when all nested modals close', () => {
+    const onModalChange = jest.fn();
+    render(
+      <DirtySwanProvider onModalChange={onModalChange}>
+        <TestConsumer />
+      </DirtySwanProvider>
+    );
+
+    fireEvent.click(screen.getByText('open'));
+    fireEvent.click(screen.getByText('open'));
+    fireEvent.click(screen.getByText('close'));
+    fireEvent.click(screen.getByText('close'));
+
+    expect(onModalChange).toHaveBeenCalledTimes(2);
+    expect(onModalChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it('returns null when used outside provider', () => {
+    let contextValue: ReturnType<typeof useDirtySwan> = undefined as any;
+
+    const Spy = () => {
+      contextValue = useDirtySwan();
+      return null;
+    };
+
+    render(<Spy />);
+
+    expect(contextValue).toBeNull();
+  });
+});

package/src/lib/context.tsx

@@ -0,0 +1,60 @@
+import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+
+interface DirtySwanContextValue {
+  onModalOpen: () => void;
+  onModalClose: () => void;
+}
+
+const DirtySwanContext = createContext<DirtySwanContextValue | null>(null);
+
+interface DirtySwanProviderProps {
+  children: ReactNode;
+  onModalChange?: (isModalOpen: boolean) => void;
+}
+
+export const DirtySwanProvider = ({
+  children,
+  onModalChange,
+}: DirtySwanProviderProps) => {
+  const countRef = useRef(0);
+  const onModalChangeRef = useRef(onModalChange);
+  onModalChangeRef.current = onModalChange;
+
+  const onModalOpen = useCallback(() => {
+    countRef.current += 1;
+    if (countRef.current === 1) {
+      onModalChangeRef.current?.(true);
+    }
+  }, []);
+
+  const onModalClose = useCallback(() => {
+    countRef.current -= 1;
+    if (countRef.current === 0) {
+      onModalChangeRef.current?.(false);
+    }
+  }, []);
+
+  const value = useMemo(
+    () => ({ onModalOpen, onModalClose }),
+    [onModalOpen, onModalClose]
+  );
+
+  return (
+    <DirtySwanContext.Provider value={value}>
+      {children}
+    </DirtySwanContext.Provider>
+  );
+};
+
+export const useDirtySwan = () => useContext(DirtySwanContext);
+
+export const useModalTrack = (isVisible: boolean) => {
+  const dirtySwan = useDirtySwan();
+
+  useEffect(() => {
+    if (!isVisible) return;
+
+    dirtySwan?.onModalOpen();
+    return () => dirtySwan?.onModalClose();
+  }, [isVisible, dirtySwan]);
+};

package/src/lib/index.tsx

@@ -67,6 +67,7 @@ import { LogoInvertedColor } from './components/logo/LogoInvertedColor';
 import { LogoInverted } from './components/logo/LogoInverted';
 import { LogoPositiveColor } from './components/logo/LogoPositiveColor';
 import { LogoPositiveBlack } from './components/logo/LogoPositiveBlack';
+import { DirtySwanProvider, useDirtySwan, useModalTrack } from './context';
 
 export * from './components/icon';
 
@@ -124,6 +125,9 @@ export {
   LogoInverted,
   LogoPositiveColor,
   LogoPositiveBlack,
+  DirtySwanProvider,
+  useDirtySwan,
+  useModalTrack,
 };
 
 export type {

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