diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js index 1eb9a0c697..9499302531 100644 --- a/components/lib/confirmpopup/ConfirmPopup.js +++ b/components/lib/confirmpopup/ConfirmPopup.js @@ -57,15 +57,14 @@ export const ConfirmPopup = React.memo( const acceptLabel = getPropValue('acceptLabel') || localeOption('accept'); const rejectLabel = getPropValue('rejectLabel') || localeOption('reject'); - const displayOrder = useDisplayOrder('dialog', visibleState); + const isCloseOnEscape = props.dismissable && props.closeOnEscape && visibleState; + const displayOrder = useDisplayOrder('dialog', isCloseOnEscape); useGlobalOnEscapeKey({ callback: () => { - if (props.dismissable && props.closeOnEscape) { - hide('hide'); - } + hide('hide'); }, - when: visibleState && displayOrder, + when: isCloseOnEscape && displayOrder, priority: [ESC_KEY_HANDLING_PRIORITIES.DIALOG, displayOrder] }); diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js index f7df4d0799..5bcf2a1c86 100644 --- a/components/lib/dialog/Dialog.js +++ b/components/lib/dialog/Dialog.js @@ -37,7 +37,8 @@ export const Dialog = React.forwardRef((inProps, ref) => { const focusElementOnHide = React.useRef(null); const maximized = props.onMaximize ? props.maximized : maximizedState; const shouldBlockScroll = visibleState && (props.blockScroll || (props.maximizable && maximized)); - const displayOrder = useDisplayOrder('dialog', visibleState); + const isCloseOnEscape = props.closable && props.closeOnEscape && visibleState; + const displayOrder = useDisplayOrder('dialog', isCloseOnEscape); const { ptm, cx, sx, isUnstyled } = DialogBase.setMetaData({ props, @@ -53,11 +54,9 @@ export const Dialog = React.forwardRef((inProps, ref) => { useGlobalOnEscapeKey({ callback: (event) => { - if (props.closable && props.closeOnEscape) { - onClose(event); - } + onClose(event); }, - when: visibleState && displayOrder, + when: isCloseOnEscape && displayOrder, priority: [ESC_KEY_HANDLING_PRIORITIES.DIALOG, displayOrder] }); diff --git a/components/lib/dialog/DialogBase.js b/components/lib/dialog/DialogBase.js index b28511927c..affa53ccca 100644 --- a/components/lib/dialog/DialogBase.js +++ b/components/lib/dialog/DialogBase.js @@ -257,6 +257,7 @@ export const DialogBase = ComponentBase.extend({ closable: true, closeIcon: null, closeOnEscape: true, + content: null, contentClassName: null, contentStyle: null, dismissableMask: false, diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js index 5eaf360bd3..273de66245 100644 --- a/components/lib/image/Image.js +++ b/components/lib/image/Image.js @@ -43,11 +43,9 @@ export const Image = React.memo( useGlobalOnEscapeKey({ callback: () => { - if (props.closeOnEscape) { - hide(); - } + hide(); }, - when: maskVisibleState, + when: props.closeOnEscape && maskVisibleState, priority: [ ESC_KEY_HANDLING_PRIORITIES.IMAGE, // Assume that there could be only one image mask activated, so it's safe diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js index d8a5a414e4..0f7b948491 100644 --- a/components/lib/menu/Menu.js +++ b/components/lib/menu/Menu.js @@ -33,13 +33,14 @@ export const Menu = React.memo( const menuRef = React.useRef(null); const listRef = React.useRef(null); const targetRef = React.useRef(null); - const popupMenuDisplayOrder = useDisplayOrder('menu', !!(visibleState && props.popup)); + const isCloseOnEscape = !!(visibleState && props.popup && props.closeOnEscape); + const popupMenuDisplayOrder = useDisplayOrder('menu', isCloseOnEscape); useGlobalOnEscapeKey({ callback: (event) => { hide(event); }, - when: visibleState && props.popup && props.closeOnEscape && popupMenuDisplayOrder, + when: isCloseOnEscape && popupMenuDisplayOrder, priority: [ESC_KEY_HANDLING_PRIORITIES.MENU, popupMenuDisplayOrder] }); diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js index 167315272a..f3d81f02dc 100644 --- a/components/lib/overlaypanel/OverlayPanel.js +++ b/components/lib/overlaypanel/OverlayPanel.js @@ -54,13 +54,14 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => { when: visibleState }); - const overlayPanelDisplayOrder = useDisplayOrder('overlay-panel', visibleState); + const isCloseOnEscape = visibleState && props.closeOnEscape; + const overlayPanelDisplayOrder = useDisplayOrder('overlay-panel', isCloseOnEscape); useGlobalOnEscapeKey({ callback: () => { hide(); }, - when: visibleState && props.closeOnEscape && overlayPanelDisplayOrder, + when: isCloseOnEscape && overlayPanelDisplayOrder, priority: [ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, overlayPanelDisplayOrder] }); diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js index 8e43aa4a13..512500b939 100644 --- a/components/lib/sidebar/Sidebar.js +++ b/components/lib/sidebar/Sidebar.js @@ -28,13 +28,14 @@ export const Sidebar = React.forwardRef((inProps, ref) => { const sidebarRef = React.useRef(null); const maskRef = React.useRef(null); const closeIconRef = React.useRef(null); - const sidebarDisplayOrder = useDisplayOrder('sidebar', visibleState); + const isCloseOnEscape = visibleState && props.closeOnEscape; + const sidebarDisplayOrder = useDisplayOrder('sidebar', isCloseOnEscape); useGlobalOnEscapeKey({ callback: (event) => { onClose(event); }, - when: visibleState && props.closeOnEscape && sidebarDisplayOrder, + when: isCloseOnEscape && sidebarDisplayOrder, priority: [ESC_KEY_HANDLING_PRIORITIES.SIDEBAR, sidebarDisplayOrder] }); diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js index 19a16ad76f..e3a67fb3da 100644 --- a/components/lib/slidemenu/SlideMenu.js +++ b/components/lib/slidemenu/SlideMenu.js @@ -34,13 +34,14 @@ export const SlideMenu = React.memo( const targetRef = React.useRef(null); const backward = React.useRef(null); const slideMenuContent = React.useRef(null); - const slideMenuDisplayOrder = useDisplayOrder('slide-menu', visibleState); + const isCloseOnEscape = visibleState && props.popup && props.closeOnEscape; + const slideMenuDisplayOrder = useDisplayOrder('slide-menu', isCloseOnEscape); useGlobalOnEscapeKey({ callback: (event) => { hide(event); }, - when: visibleState && props.popup && props.closeOnEscape && slideMenuDisplayOrder, + when: isCloseOnEscape && slideMenuDisplayOrder, priority: [ESC_KEY_HANDLING_PRIORITIES.SLIDE_MENU, slideMenuDisplayOrder] });