@popsure/dirty-swan 0.55.3 → 0.56.1

package/src/lib/components/modal/index.ts

@@ -1,7 +1,9 @@
 import { BottomModal } from './bottomModal';
 import { RegularModal } from './regularModal';
 import { BottomOrRegularModal } from './bottomOrRegularModal';
+import { FullScreenModal } from './fullScreenModal';
 import { ReactNode } from 'react';
+import { GenericModalClassNames } from './genericModal';
 
 export interface Props {
   title?: ReactNode;
@@ -10,9 +12,10 @@ export interface Props {
   onClose: () => void;
   onModalScroll?: (scrollTop: number, element: HTMLDivElement) => void;
   className?: string;
+  classNames?: GenericModalClassNames;
   dismissible?: boolean;
   size?: 'default' | 'large';
   footer?: ReactNode;
 }
 
-export { BottomModal, RegularModal, BottomOrRegularModal };
+export { BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal };

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

@@ -1,23 +1,28 @@
 import { Props } from '..';
 import styles from './style.module.scss';
-import classNames from 'classnames';
+import classNamesUtil from 'classnames';
 import { GenericModal } from '../genericModal';
 
-const RegularModal = ({ className = '', size, ...rest }: Props) => (
+const RegularModal = ({ className = '', classNames, size, ...rest }: Props) => (
   <GenericModal
     classNames={{
-      wrapper: ({ isClosing }) => classNames(
-        'd-flex ai-center w90 mx-auto my0',
-        className,
-        styles.wrapper, {
-          [styles.wrapperClose]: isClosing,
-        }
-      ),
-      container: classNames(
+      ...classNames,
+      wrapper: ({ isClosing }) =>
+        classNamesUtil(
+          'd-flex ai-center w90 mx-auto my0',
+          className,
+          styles.wrapper,
+          classNames?.wrapper,
+          {
+            [styles.wrapperClose]: isClosing,
+          }
+        ),
+      container: classNamesUtil(
         'bg-white br8 d-flex ai-center fd-column mx-auto my0',
         styles.container,
-        size === 'large' ? 'wmx10' : 'wmx8'
-      )
+        size === 'large' ? 'wmx10' : 'wmx8',
+        classNames?.container
+      ),
     }}
     {...rest}
   />

package/src/lib/hooks/useEscapeKey.ts

@@ -0,0 +1,18 @@
+import { useCallback, useEffect } from 'react';
+
+export const useEscapeKey = (callback: () => void) => {
+  const handleOnEscape = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        callback();
+      }
+    },
+    [callback]
+  );
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleOnEscape);
+
+    return () => window.removeEventListener('keydown', handleOnEscape);
+  }, [handleOnEscape]);
+};

package/src/lib/hooks/useFocusWithin.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+export const useFocusWithin = (
+  ref: HTMLElement | null,
+  callback: (isFocusWithin: boolean) => void
+) => {
+  useEffect(() => {
+    const handleOnFocusIn = () => {
+      if (!ref) {
+        return;
+      }
+
+      const hasFocus = ref?.contains(document.activeElement);
+
+      callback(Boolean(hasFocus));
+    };
+
+    document.addEventListener('focusin', handleOnFocusIn);
+
+    return () => document?.removeEventListener('focusin', handleOnFocusIn);
+  }, [callback, ref]);
+};

package/src/lib/index.tsx

@@ -23,6 +23,7 @@ import {
   BottomModal,
   RegularModal,
   BottomOrRegularModal,
+  FullScreenModal,
 } from './components/modal';
 import { InfoCard, CardButton } from './components/cards';
 import { Card, CardProps } from './components/cards/card';
@@ -48,6 +49,8 @@ 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';
+import { useEscapeKey } from './hooks/useEscapeKey';
+import { useFocusWithin } from './hooks/useFocusWithin';
 
 export * from './components/icon';
 
@@ -63,6 +66,7 @@ export {
   BottomModal,
   RegularModal,
   BottomOrRegularModal,
+  FullScreenModal,
   InfoCard,
   Card,
   CardButton,
@@ -90,6 +94,8 @@ export {
   Toggle,
   Toaster,
   toast,
+  useEscapeKey,
+  useFocusWithin,
 };
 
 export type {