@popsure/dirty-swan 0.66.23 → 0.66.25

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/lib/hooks/useFocusWithin.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport const useFocusWithin = (\n  ref: HTMLElement | null,\n  callback: (isFocusWithin: boolean) => void\n) => {\n  useEffect(() => {\n    const handleOnFocusIn = () => {\n      if (!ref) {\n        return;\n      }\n\n      const hasFocus = ref?.contains(document.activeElement);\n\n      callback(Boolean(hasFocus));\n    };\n\n    document.addEventListener('focusin', handleOnFocusIn);\n\n    return () => document?.removeEventListener('focusin', handleOnFocusIn);\n  }, [callback, ref]);\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAM,cAAc,GAAG,UAC5B,GAAuB,EACvB,QAA0C,EAAA;AAE1C,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAM,eAAe,GAAG,YAAA;YACtB,IAAI,CAAC,GAAG,EAAE;gBACR;YACF;AAEA,YAAA,IAAM,QAAQ,GAAG,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;AAEtD,YAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;AAC7B,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,CAAC;AAErD,QAAA,OAAO,cAAM,OAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,uBAAR,QAAQ,CAAE,mBAAmB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAA,CAAzD,CAAyD;AACxE,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;AACrB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/lib/hooks/useFocusWithin.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport const useFocusWithin = (\n  ref: HTMLElement | null,\n  callback: (isFocusWithin: boolean) => void\n) => {\n  useEffect(() => {\n    const handleOnFocusIn = () => {\n      if (!ref) {\n        return;\n      }\n\n      const hasFocus = ref?.contains(document.activeElement);\n\n      callback(Boolean(hasFocus));\n    };\n\n    document.addEventListener('focusin', handleOnFocusIn);\n\n    return () => document?.removeEventListener('focusin', handleOnFocusIn);\n  }, [callback, ref]);\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAM,cAAc,GAAG,UAC5B,GAAuB,EACvB,QAA0C,EAAA;AAE1C,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAM,eAAe,GAAG,YAAA;YACtB,IAAI,CAAC,GAAG,EAAE;gBACR;YACF;AAEA,YAAA,IAAM,QAAQ,GAAG,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;AAEtD,YAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;AAC7B,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,CAAC;AAErD,QAAA,OAAO,cAAM,OAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,uBAAR,QAAQ,CAAE,mBAAmB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAA,CAAzD,CAAyD;AACxE,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;AACrB;;;;"}

package/dist/esm/lib/context.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+interface DirtySwanContextValue {
+    onModalOpen: () => void;
+    onModalClose: () => void;
+}
+interface DirtySwanProviderProps {
+    children: ReactNode;
+    onModalChange?: (isModalOpen: boolean) => void;
+}
+export declare const DirtySwanProvider: ({ children, onModalChange, }: DirtySwanProviderProps) => JSX.Element;
+export declare const useDirtySwan: () => DirtySwanContextValue | null;
+export declare const useModalTrack: (isVisible: boolean) => void;
+export {};

package/dist/esm/lib/context.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/lib/index.d.ts

@@ -41,7 +41,8 @@ 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';
-export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SearchableDropdown, SegmentedControl, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Tabs, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, useOnClickOutside, useMediaQuery, LogoColor, LogoWhite, LogoBlack, LogoOrangeBox, LogoInvertedColor, LogoInverted, LogoPositiveColor, LogoPositiveBlack, };
+export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SearchableDropdown, SegmentedControl, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Tabs, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, useOnClickOutside, useMediaQuery, LogoColor, LogoWhite, LogoBlack, LogoOrangeBox, LogoInvertedColor, LogoInverted, LogoPositiveColor, LogoPositiveBlack, DirtySwanProvider, useDirtySwan, useModalTrack, };
 export type { AccordionProps, SearchableDropdownProps, SearchableDropdownOption, BadgeProps, IllustrationKeys, InformationBoxProps, InputProps, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps, TabItem, TabsProps, TableData, TableProps, };
 export type { DownloadStatus } from './models/download';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.66.23",
+  "version": "0.66.25",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/index.tsx

@@ -54,6 +54,9 @@ export {
   LogoPositiveColor,
   LogoPositiveBlack,
   SearchableDropdown,
+  DirtySwanProvider,
+  useDirtySwan,
+  useModalTrack,
 } from './lib';
 
 export * from './lib/components/icon';

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/segmentedControl/index.tsx

@@ -45,6 +45,8 @@ const SegmentedControl = ({
           style={{ height: `${height}px` }}
         >
           {values.map((value: TitleWithSubtitle | string, index: number) => {
+            const selectedColor = selectedIndex === index ? 'tc-white' : 'tc-neutral-900';
+
             return (
               <div
                 role="button"
@@ -62,27 +64,19 @@ const SegmentedControl = ({
               >
                 {typeof value === 'string' ? (
                   <div
-                    className={`p-h4 ta-center ${
-                      selectedIndex === index ? '' : 'tc-purple-600'
-                    }`}
+                    className={`p-h4 ta-center ${selectedColor} ${styles['text-color']}`}
                   >
                     {value}
                   </div>
                 ) : (
                   <>
                     <div
-                      className={`p-h4 ta-center ${
-                        selectedIndex === index ? '' : 'tc-purple-600'
-                      }`}
+                      className={`p-h4 ta-center ${selectedColor} ${styles['text-color']}`}
                     >
                       {value.title}
                     </div>
                     <div
-                      className={`p-p--small ta-center ${
-                        selectedIndex === index
-                          ? 'tc-neutral-600'
-                          : 'tc-purple-600'
-                      }`}
+                      className={`p-p--small ta-center ${selectedColor} ${styles['text-color']}`}
                     >
                       {value.subtitle}
                     </div>

package/src/lib/components/segmentedControl/style.module.scss

@@ -2,7 +2,7 @@
   position: relative;
   display: inline-block;
 
-  background-color: var(--ds-purple-100);
+  background-color: var(--ds-orange-50);
   border-radius: 8px;
 
   padding: 0 8px;
@@ -22,7 +22,7 @@
   padding-right: 16px;
 
   &:focus {
-    outline-color: var(--ds-purple-600);
+    outline-color: var(--ds-primary-900);
     outline-offset: 2px;
   }
 }
@@ -30,7 +30,7 @@
 .select-chip-background {
   position: absolute;
 
-  background-color: white;
+  background-color: var(--ds-neutral-900);
   border-radius: 8px;
 
   top: 8px;
@@ -39,3 +39,7 @@
 
   transition: width 0.3s, left 0.3s;
 }
+
+.text-color {
+  transition: color 0.15s ease-in;
+}

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 {