refactor: remove avoidFocusTrap prop from multiple components and delete unused illustration

Author: arunjaindev

src/Assets/Illustration/cmd-bar-visual.webp

@@ -19,7 +19,7 @@ import { VisibleModal } from '../Modals/VisibleModal'
 import './Drawer.scss'
 import { DTFocusTrapType } from '@Shared/Components/DTFocusTrap'
 
-export interface DrawerProps extends Pick<DTFocusTrapType, 'initialFocus' | 'avoidFocusTrap' > {
+export interface DrawerProps extends Pick<DTFocusTrapType, 'initialFocus'> {
     position: 'left' | 'right' | 'bottom' | 'top'
     children?: any
     backdrop?: boolean
@@ -45,7 +45,6 @@ export const Drawer = ({
     onClose,
     disableTransition,
     initialFocus = undefined,
-    avoidFocusTrap = false,
 }: DrawerProps) => {
     const drawerRef = useRef(null)
     useEffect(() => {
@@ -70,7 +69,6 @@ export const Drawer = ({
             onEscape={onEscape}
             close={onClose}
             initialFocus={initialFocus}
-            avoidFocusTrap={avoidFocusTrap}
         >
             <aside
                 style={style}

src/Common/Drawer/Drawer.tsx

@@ -27,7 +27,6 @@ export class VisibleModal extends Component<PropsWithChildren<{
     close?: (e?) => void
     onEscape?: (e?) => void
     initialFocus?: DTFocusTrapType['initialFocus']
-    avoidFocusTrap?: boolean
 }>> {
     constructor(props) {
         super(props)
@@ -57,7 +56,6 @@ export class VisibleModal extends Component<PropsWithChildren<{
                 onEscape={this.escFunction}
                 onClick={this.handleBodyClick}
                 initialFocus={this.props.initialFocus ?? undefined}
-                avoidFocusTrap={this.props.avoidFocusTrap}
             >
                 <div className={this.props.parentClassName}>
                     <div className={`visible-modal__body ${this.props.className || ''}`}>{this.props.children}</div>

src/Common/Modals/VisibleModal.tsx

@@ -33,7 +33,6 @@ const Backdrop = ({
     deactivateFocusOnEscape = true,
     initialFocus,
     returnFocusOnDeactivate,
-    avoidFocusTrap,
 }: BackdropProps) => {
     // STATES
     const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null)
@@ -93,7 +92,6 @@ const Backdrop = ({
             deactivateFocusOnEscape={deactivateFocusOnEscape}
             initialFocus={initialFocus ?? undefined}
             returnFocusOnDeactivate={returnFocusOnDeactivate}
-            avoidFocusTrap={avoidFocusTrap}
         >
             <motion.div
                 initial={{ opacity: 0 }}

src/Shared/Components/Backdrop/Backdrop.tsx

@@ -20,7 +20,7 @@ import { DTFocusTrapType } from '../DTFocusTrap'
 
 export interface BackdropProps extends Pick<
     DTFocusTrapType,
-    'deactivateFocusOnEscape' | 'initialFocus' | 'onEscape' | 'returnFocusOnDeactivate' | 'avoidFocusTrap'
+    'deactivateFocusOnEscape' | 'initialFocus' | 'onEscape' | 'returnFocusOnDeactivate'
 > {
     /**
      * The content to be rendered within the backdrop component.

src/Shared/Components/Backdrop/types.ts

@@ -46,7 +46,6 @@ const ConfirmationModalBody = ({
     shouldCloseOnEscape = true,
     isLandscapeView = false,
     showConfetti = false,
-    avoidFocusTrap = false,
 }: ConfirmationModalBodyProps) => {
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
 
@@ -93,7 +92,6 @@ const ConfirmationModalBody = ({
             deactivateFocusOnEscape={shouldCloseOnEscape}
             // Since when custom input is present, we auto focus on input, else focus on primary button
             initialFocus={confirmationConfig ? false : `#${PRIMARY_BUTTON_ID}`}
-            avoidFocusTrap={avoidFocusTrap}
         >
             <motion.div
                 className={`${isLandscapeView ? 'w-500' : 'w-400'} confirmation-modal border__secondary flexbox-col br-8 bg__primary dc__m-auto mt-40`}

src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx

@@ -104,7 +104,6 @@ export type ConfirmationModalProps<isConfig extends boolean = false> = PropsWith
      * @default false
      */
     showConfetti?: boolean
-    avoidFocusTrap?: boolean
 }> &
     ButtonConfigAndVariantType<isConfig> &
     (isConfig extends false

src/Shared/Components/ConfirmationModal/types.ts

@@ -28,7 +28,6 @@ const DTFocusTrap = ({
     children,
     initialFocus = undefined,
     returnFocusOnDeactivate = true,
-    avoidFocusTrap = false,
 }: DTFocusTrapType) => {
     const handleEscape = useCallback(
         (e?: KeyboardEvent | MouseEvent) => {
@@ -38,30 +37,16 @@ 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)
-            }
         }
     }, [])
 
     return (
         <FocusTrap
-            active={!avoidFocusTrap}
             focusTrapOptions={{
                 escapeDeactivates: handleEscape,
                 initialFocus,

src/Shared/Components/DTFocusTrap/DTFocusTrap.tsx

@@ -50,5 +50,4 @@ export interface DTFocusTrapType extends Pick<FocusTrapProps['focusTrapOptions']
      * Setting this option to undefined (or to a function that returns undefined) will result in the first element in the focus trap's tab order receiving focus.
      */
     initialFocus?: FocusTargetOrFalse | undefined | (() => void)
-    avoidFocusTrap?: boolean
 }

src/Shared/Components/DTFocusTrap/types.ts

@@ -87,18 +87,13 @@ const GenericModal = ({
     onEscape = noop,
     closeOnBackdropClick = false,
     children,
-    avoidFocusTrap = false,
     borderVariant = 'secondary',
     alignCenter = false,
 }: PropsWithChildren<GenericModalProps>) => (
     <AnimatePresence>
         {open && (
             <GenericModalProvider value={{ name, onClose }}>
-                <Backdrop
-                    onEscape={onEscape}
-                    onClick={closeOnBackdropClick ? onClose : noop}
-                    avoidFocusTrap={avoidFocusTrap}
-                >
+                <Backdrop onEscape={onEscape} onClick={closeOnBackdropClick ? onClose : noop}>
                     <motion.div
                         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 } }}