feat: enhance GenericModal with border variant and alignment options; add escape key handling for focus trap

Author: arunjaindev

src/Shared/Components/DTFocusTrap/DTFocusTrap.tsx

@@ -38,11 +38,24 @@ const DTFocusTrap = ({
         [onEscape, deactivateFocusOnEscape],
     )
 
+    // Focus escape key bind when focus trap is avoided
+    const handleEscapeKeyBind = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+            onEscape(e)
+        }
+    }
+
     useEffect(() => {
+        if (avoidFocusTrap) {
+            document.addEventListener('keydown', handleEscapeKeyBind)
+        }
         preventBodyScroll(true)
 
         return () => {
             preventBodyScroll(false)
+            if (avoidFocusTrap) {
+                document.removeEventListener('keydown', handleEscapeKeyBind)
+            }
         }
     }, [])
 

src/Shared/Components/GenericModal/GenericModal.component.tsx

@@ -21,7 +21,7 @@ import { noop, stopPropagation } from '@Common/Helper'
 import { Backdrop, Button, ButtonStyleType, ButtonVariantType, Icon } from '@Shared/Components'
 import { ComponentSizeType } from '@Shared/constants'
 
-import { MODAL_WIDTH_TO_CLASS_NAME_MAP } from './constants'
+import { BORDER_VARIANT_TO_CLASS_NAME_MAP, MODAL_WIDTH_TO_CLASS_NAME_MAP } from './constants'
 import { GenericModalProvider, useGenericModalContext } from './GenericModal.context'
 import { GenericModalFooterProps, GenericModalHeaderProps, GenericModalProps } from './types'
 
@@ -88,6 +88,8 @@ const GenericModal = ({
     closeOnBackdropClick = false,
     children,
     avoidFocusTrap = false,
+    borderVariant = 'secondary',
+    alignCenter = false,
 }: PropsWithChildren<GenericModalProps>) => (
     <AnimatePresence>
         {open && (
@@ -98,7 +100,7 @@ const GenericModal = ({
                     avoidFocusTrap={avoidFocusTrap}
                 >
                     <motion.div
-                        className={`shadow__modal flexbox-col bg__primary border__secondary br-${borderRadius} dc__m-auto mt-40 dc__overflow-hidden ${MODAL_WIDTH_TO_CLASS_NAME_MAP[width]}`}
+                        className={`shadow__modal flexbox-col bg__primary ${BORDER_VARIANT_TO_CLASS_NAME_MAP[borderVariant]} br-${borderRadius} dc__m-auto ${alignCenter ? '' : 'mt-40'} dc__overflow-hidden ${MODAL_WIDTH_TO_CLASS_NAME_MAP[width]}`}
                         exit={{ y: 100, opacity: 0, scale: 0.75, transition: { duration: 0.35 } }}
                         initial={{ y: 100, opacity: 0, scale: 0.75 }}
                         animate={{ y: 0, opacity: 1, scale: 1 }}

src/Shared/Components/GenericModal/constants.ts

@@ -14,11 +14,17 @@
  * limitations under the License.
  */
 
-import { GenericModalProps } from './types'
+import { BorderVariantType, GenericModalProps } from './types'
 
 export const MODAL_WIDTH_TO_CLASS_NAME_MAP: Record<GenericModalProps['width'], string> = {
     450: 'w-450',
     500: 'w-500',
     600: 'w-600',
     800: 'w-800',
 }
+
+export const BORDER_VARIANT_TO_CLASS_NAME_MAP: Record<BorderVariantType, string> = {
+    secondary: 'border__secondary',
+    none: '',
+    'secondary-translucent': 'border__secondary-translucent',
+}

src/Shared/Components/GenericModal/types.ts

@@ -17,6 +17,8 @@
 import { BackdropProps } from '../Backdrop'
 import { ButtonProps } from '../Button'
 
+export type BorderVariantType = 'secondary' | 'none' | 'secondary-translucent'
+
 export interface GenericModalProps extends Partial<Pick<BackdropProps, 'onEscape' | 'avoidFocusTrap'>> {
     /** Unique identifier for the modal */
     name: string
@@ -35,6 +37,8 @@ export interface GenericModalProps extends Partial<Pick<BackdropProps, 'onEscape
      * @default false
      */
     closeOnBackdropClick?: boolean
+    borderVariant?: BorderVariantType
+    alignCenter?: boolean
 }
 
 export interface GenericModalContextType extends Pick<GenericModalProps, 'name' | 'onClose'> {}