@opengeoweb/core 9.32.0 → 9.33.0

package/index.esm.js

@@ -5,7 +5,7 @@ import { Grid2, Box, MenuItem, Typography, useTheme, Popper, Fade, Tooltip, styl
 import { SHARED_NAMESPACE, sharedTranslations, CustomIconButton, TooltipSelect, AlertIcon, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomTooltip, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, PROJECTION, calculateStartSize, ToolContainerDraggable, useDebounce, dateUtils, withEggs, ErrorBoundary } from '@opengeoweb/shared';
 import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Layers, ExitDomain, Info, Search, Exclamation, MyLocation, Close, ThemeWrapper, lightTheme, FlagBritain, FlagNetherlands, FlagFinland, FlagNorway } from '@opengeoweb/theme';
 import i18n from 'i18next';
-import { useTranslation, initReactI18next, I18nextProvider } from 'react-i18next';
+import { initReactI18next, useTranslation, I18nextProvider } from 'react-i18next';
 import { TIMESLIDER_NAMESPACE, timesliderTranslations, defaultTimeSpan, TIME_SLIDER_LEGEND_HEIGHT, SpeedButton, TimeStepButton, AnimationLengthButton, AnimationLength, TimeSpanButton, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, OptionsMenuButton, PlayButton, defaultTimeStep, BackwardForwardStepButton, AutoUpdateButton, NowButton, handleSetNowEvent, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSlider, onsetNewDateDebounced, getFilteredTime, ControlButtons, OptionsMenu, TimeSliderClock } from '@opengeoweb/timeslider';
 import { WEBMAP_REACT_NAMESPACE, webmapReactTranslations, WEBMAP_NAMESPACE, webmapTranslations, LayerInfoButton, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, ZoomControls, MapView, MapViewLayer, LegendDialog, LegendButton, registerDrawFunction, emptyGeoJSON, MapControls, publicLayers } from '@opengeoweb/webmap-react';
 import { useDispatch, useSelector, connect, useStore, Provider } from 'react-redux';
@@ -17,7 +17,7 @@ import { Box as Box$1, styled as styled$1 } from '@mui/system';
 import _, { isEqual, range } from 'lodash';
 import { LayerSelectButtonConnect, LayerSelectConnect, layerSelectConfig } from '@opengeoweb/layer-select';
 import axios from 'axios';
-import * as DOMPurify from 'dompurify';
+import DOMPurify from 'dompurify';
 import { SnackbarWrapperConnect } from '@opengeoweb/snackbar';
 import { useNavigate } from 'react-router-dom';
 import * as Sentry from '@sentry/react';
@@ -8683,11 +8683,31 @@ const TOUCH_PAN_STEP_PERCENTAGE = 0.02;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
-const useKeyboardZoomAndPan = (mapIsActive, mapId) => {
+const isDialogOpen = mapRef => {
+  const backdrops = Array.from(document.querySelectorAll('.MuiBackdrop-root'));
+  return backdrops.find(backdropNode => {
+    var _backdropNode$parentE;
+    return (_backdropNode$parentE = backdropNode.parentElement) == null ? void 0 : _backdropNode$parentE.contains(mapRef);
+  }) !== undefined;
+};
+const isMapKeyboardControlsAllowed = (target, mapRef) => {
+  if (isDialogOpen(mapRef)) {
+    return false;
+  }
+  if (target.tagName !== 'BODY') {
+    if (target.tagName === 'BUTTON') {
+      // return true for element is active but not focus visible to the user
+      return !target.classList.contains('Mui-focusVisible');
+    }
+    return false;
+  }
+  return true;
+};
+const useKeyboardZoomAndPan = (mapIsActive, mapId, mapRef) => {
   React.useEffect(() => {
     const keysPressedDown = {};
     const handleKeyPress = event => {
@@ -8698,7 +8718,7 @@ const useKeyboardZoomAndPan = (mapIsActive, mapId) => {
         type
       } = event;
       keysPressedDown[key] = type === 'keydown';
-      if (map && target.tagName !== 'INPUT' && mapIsActive) {
+      if (map && mapIsActive && isMapKeyboardControlsAllowed(target, mapRef)) {
         if (keysPressedDown['+']) {
           map.zoomIn(1);
         } else if (keysPressedDown['-']) {
@@ -8734,7 +8754,7 @@ const useKeyboardZoomAndPan = (mapIsActive, mapId) => {
       document.removeEventListener('keydown', handleKeyPress);
       document.removeEventListener('keyup', handleKeyPress);
     };
-  }, [mapIsActive, mapId]);
+  }, [mapIsActive, mapId, mapRef]);
 };
 const PAN_STEP_PERCENTAGE = 0.02;
 
@@ -8758,6 +8778,7 @@ const MapViewConnect = _ref => {
       children
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  const mapRef = React.useRef(null);
   const store = useStore();
   const mapDimensions = useSelector(store => mapSelectors.getMapDimensions(store, mapId));
   const layers = useSelector(store => mapSelectors.getMapLayers(store, mapId));
@@ -8851,7 +8872,7 @@ const MapViewConnect = _ref => {
     }));
   }, [dispatch, store]);
   const isActiveWindowId = useSelector(store => uiSelectors.getIsActiveWindowId(store, mapId));
-  useKeyboardZoomAndPan(isActiveWindowId, mapId);
+  useKeyboardZoomAndPan(isActiveWindowId, mapId, mapRef.current);
   useTouchZoomPan(isActiveWindowId, mapId);
   const unRegister = React.useCallback(mapId => {
     unregisterMap({
@@ -8902,6 +8923,7 @@ const MapViewConnect = _ref => {
     style: {
       height: '100%'
     },
+    ref: mapRef,
     children: jsxs(MapView, Object.assign({}, props, {
       mapId: mapId,
       srs: srs,
@@ -9162,8 +9184,8 @@ const getLayersToUpdate = (layers, mapId) => {
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
-const sanitizeHTML = htmlToBeSanitezed => ({
-  __html: DOMPurify.sanitize(htmlToBeSanitezed, {
+const sanitizeHTML = htmlToBeSanitized => ({
+  __html: DOMPurify.sanitize(htmlToBeSanitized, {
     ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'table', 'td', 'tr', 'br', 'hr', 'th'],
     ALLOWED_ATTR: ['href']
   })
@@ -11820,4 +11842,4 @@ const LanguageSelect = ({
   });
 };
 
-export { CORE_NAMESPACE, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DemoWrapper, DemoWrapperConnect, HarmonieTempAndPrecipPreset, LanguageSelect, LayerInfoButtonConnect, LayerInfoDialogConnect, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, MapViewConnect, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, MyMapLocation, RouterWrapperConnect, SearchControlButtonConnect, SearchControlConnect, SearchDialog, SentryRecordButton, SyncGroupViewerConnect, ThemeWrapperWithModules, TimeSliderConnect, ZoomControlConnect, componentsLookUp, coreTranslations, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, filterTimeSeriesServices, testLayers, useFetchServices, useUpdateTimeSpan, useUpdateTimestep };
+export { CORE_NAMESPACE, ConfigurableMapConnect, CoreI18nProvider, CoreThemeProvider, CoreThemeStoreProvider, DemoWrapper, DemoWrapperConnect, HarmonieTempAndPrecipPreset, LanguageSelect, LayerInfoButtonConnect, LayerInfoDialogConnect, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, MapViewConnect, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, MyMapLocation, RouterWrapperConnect, SearchControlButtonConnect, SearchControlConnect, SearchDialog, SentryRecordButton, SyncGroupViewerConnect, ThemeWrapperWithModules, TimeSliderConnect, ZoomControlConnect, componentsLookUp, coreTranslations, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, filterTimeSeriesServices, testLayers, useFetchServices, useUpdateTimeSpan, useUpdateTimestep };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "9.32.0",
+  "version": "9.33.0",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {

package/src/lib/components/MapViewConnect/useKeyboardZoomAndPan.d.ts

@@ -1 +1,3 @@
-export declare const useKeyboardZoomAndPan: (mapIsActive: boolean, mapId: string) => void;
+export declare const isDialogOpen: (mapRef: HTMLElement | null) => boolean;
+export declare const isMapKeyboardControlsAllowed: (target: Element, mapRef: HTMLElement | null) => boolean;
+export declare const useKeyboardZoomAndPan: (mapIsActive: boolean, mapId: string, mapRef: HTMLElement | null) => void;

package/src/lib/components/Providers/Providers.d.ts

@@ -6,6 +6,9 @@ interface CoreThemeProviderProps {
     children?: React.ReactNode;
     theme?: Theme;
 }
+interface CoreTranslationWrapperProps {
+    children?: React.ReactNode;
+}
 /**
  * A Provider component which provides the GeoWeb theme
  * @param children
@@ -23,6 +26,7 @@ interface CoreThemeStoreProviderProps extends CoreThemeProviderProps {
  * @returns
  */
 export declare const CoreThemeStoreProvider: React.FC<CoreThemeStoreProviderProps>;
+export declare const CoreI18nProvider: React.FC<CoreTranslationWrapperProps>;
 export declare const DemoWrapper: React.FC<CoreThemeProviderProps>;
 export declare const DemoWrapperConnect: React.FC<CoreThemeStoreProviderProps>;
 export {};

package/src/lib/utils/sanitizeHTML.d.ts

@@ -1,3 +1,3 @@
-export declare const sanitizeHTML: (htmlToBeSanitezed: string) => {
+export declare const sanitizeHTML: (htmlToBeSanitized: string) => {
     __html: string;
 };