Merge branch 'main' of https://github.com/devtron-labs/devtron-fe-common-lib into refactor/app-details

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.22.3-beta-1",
+    "version": "1.22.6",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -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'> {
+export interface DrawerProps extends Pick<DTFocusTrapType, 'initialFocus' | 'avoidFocusTrap' > {
     position: 'left' | 'right' | 'bottom' | 'top'
     children?: any
     backdrop?: boolean
@@ -45,6 +45,7 @@ export const Drawer = ({
     onClose,
     disableTransition,
     initialFocus = undefined,
+    avoidFocusTrap = false,
 }: DrawerProps) => {
     const drawerRef = useRef(null)
     useEffect(() => {
@@ -69,6 +70,7 @@ export const Drawer = ({
             onEscape={onEscape}
             close={onClose}
             initialFocus={initialFocus}
+            avoidFocusTrap={avoidFocusTrap}
         >
             <aside
                 style={style}

src/Assets/IconV2/ic-curved-arrow.svg

@@ -27,6 +27,7 @@ export class VisibleModal extends React.Component<{
     close?: (e?) => void
     onEscape?: (e?) => void
     initialFocus?: DTFocusTrapType['initialFocus']
+    avoidFocusTrap?: boolean
 }> {
     constructor(props) {
         super(props)
@@ -56,6 +57,7 @@ export class VisibleModal extends React.Component<{
                 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/Assets/IconV2/ic-nav-cursor.svg

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

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

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

src/Common/Drawer/Drawer.tsx

@@ -46,6 +46,7 @@ const ConfirmationModalBody = ({
     shouldCloseOnEscape = true,
     isLandscapeView = false,
     showConfetti = false,
+    avoidFocusTrap = false,
 }: ConfirmationModalBodyProps) => {
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
 
@@ -92,6 +93,7 @@ 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`}