making popper dissapear on esc click

packages/geoview-core/src/core/components/app-bar/buttons/version.tsx

@@ -51,7 +51,6 @@ export default function Version(): JSX.Element {
       borderRadius: '5px',
       boxShadow: 2,
       marginLeft: '15px',
-      zIndex: 300,
       padding: '10px',
       '& a': {
         color: (theme: Theme) =>
@@ -84,7 +83,7 @@ export default function Version(): JSX.Element {
           </SvgIcon>
         </IconButton>
 
-        <Popper sx={{ zIndex: '150' }} open={open} anchorEl={anchorEl} placement="right-end" container={mapElem}>
+        <Popper open={open} anchorEl={anchorEl} placement="right-end" onClose={handleClickAway} container={mapElem}>
           <Paper sx={sxClasses.versionInfoPanel}>
             <Typography sx={sxClasses.versionsInfoTitle} component="h3">
               {t('appbar.version')}

packages/geoview-core/src/core/components/common/layer-list.tsx

@@ -38,7 +38,14 @@ const LayerListItem = memo(function LayerListItem({ isSelected, layer, onListIte
   const sxClasses = getSxClasses(theme);
   const { t } = useTranslation<string>();
 
-  const isDisabled = layer.numOffeatures === 0;
+  const isDisabled = layer?.numOffeatures === 0 || layer?.features === null;
+
+  const isLoading =
+    layer?.numOffeatures === 0 ||
+    layer?.features === null ||
+    layer.queryStatus === 'processing' ||
+    layer.layerStatus === 'loading' ||
+    layer.layerStatus === 'processing';
 
   const renderLayerIcon = () => {
     switch (layer.layerStatus) {
@@ -126,7 +133,7 @@ const LayerListItem = memo(function LayerListItem({ isSelected, layer, onListIte
             <ListItemButton
               selected={isSelected}
               // disable when layer features has null value.
-              disabled={layer?.numOffeatures === 0 || layer?.features === null}
+              disabled={isDisabled || isLoading}
               onClick={() => onListItemClick(layer)}
             >
               {renderLayerIcon()}

packages/geoview-core/src/core/components/notifications/notifications.tsx

@@ -125,7 +125,7 @@ export default function Notifications(): JSX.Element {
           </IconButton>
         </Badge>
 
-        <Popper open={open} anchorEl={anchorEl} placement="right-end" container={mapElem}>
+        <Popper open={open} anchorEl={anchorEl} placement="right-end" onClose={handleClickAway} container={mapElem}>
           <Paper sx={sxClasses.notificationPanel}>
             <Typography component="h3" sx={sxClasses.notificationsTitle}>
               {t('appbar.notifications')}

packages/geoview-core/src/ui/popper/popper.tsx

@@ -1,12 +1,34 @@
-/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useRef } from 'react';
 import { Popper as MaterialPopper, PopperProps } from '@mui/material';
 
+interface EnhancedPopperProps extends PopperProps {
+  onClose?: () => void;
+}
+
 /**
  * Create a popover component
  *
- * @param {PopperProps} props popover properties
+ * @param {EnhancedPopperProps} props popover properties
  * @returns {JSX.Element} returns popover component
  */
-export function Popper(props: PopperProps): JSX.Element {
-  return <MaterialPopper {...props} />;
-}
+/* eslint-disable-next-line react/function-component-definition */
+export const Popper: React.FC<EnhancedPopperProps> = ({ open, onClose, ...restProps }) => {
+  const popperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && open && onClose) {
+        // Close the Popper when 'Escape' key is pressed
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscapeKey);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey);
+    };
+  }, [open, onClose]);
+
+  return <MaterialPopper sx={{ zIndex: '2000' }} {...restProps} open={open} ref={popperRef} />;
+};