@opengeoweb/core 4.13.1 → 4.15.0

package/index.esm.js

@@ -6,7 +6,7 @@ import React__default, { Component, useRef, useState, useEffect, useCallback } f
 import _, { debounce, isEqual, escapeRegExp, groupBy, throttle, range } from 'lodash';
 import { takeLatest, put, select, call, takeEvery, all, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
-import { CustomTooltip, ToolButton, ToolContainerDraggable, IS_JEST, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomAccordion, EnableButton, ManagerDeleteButton, AlertBanner, ManagerButton, calculateDialogSizeAndPosition, useIsMounted, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
+import { CustomTooltip, ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomAccordion, EnableButton, ManagerDeleteButton, AlertBanner, ManagerButton, calculateDialogSizeAndPosition, useIsMounted, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
 import { Pause, Play, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Add, Copy, None, Both, DragHandle as DragHandle$1, Cached, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Close, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, Speed, FastForward, Clock, Now, Animation, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { Paper, Box, Typography, IconButton, Grid, MenuItem, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, List, ListItem, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, LinearProgress, InputAdornment, Backdrop, ListItemSecondaryAction, Checkbox, Switch, styled, Slider, Menu, useTheme, Snackbar } from '@mui/material';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, clearImageCache, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
@@ -9568,7 +9568,7 @@ var columnClasses = {
   column6: 'column-6',
   column7: 'column-7'
 };
-var layerManagerStyle = Object.assign({
+var layerManagerStyle = {
   '.layerManagerContainer': {
     containerType: 'inline-size'
   },
@@ -9616,8 +9616,7 @@ var layerManagerStyle = Object.assign({
   },
   '.collapseLarge-btn': {
     display: 'none'
-  }
-}, !IS_JEST && {
+  },
   '@container (max-width: 320px)': {
     '.layermanager': {
       '.column-1': {
@@ -9716,7 +9715,7 @@ var layerManagerStyle = Object.assign({
       }
     }
   }
-});
+};
 var returnCorrectSize = function returnCorrectSize(sizeResult) {
   if (sizeResult === 'sizeSmall') return sizeSmall;
   if (sizeResult === 'sizeMedium') return sizeMedium;
@@ -10216,7 +10215,11 @@ var OpacitySelect = function OpacitySelect(_ref) {
       width: '100%',
       borderRadius: '0',
       minWidth: '49px'
-    }
+    },
+    // Safari-based browsers handle focus differently with buttons
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
+    // Use div instead to fix onBlur hander's event.relatedTarget below
+    component: "div"
   }, currentOpacityText)), /*#__PURE__*/React.createElement(Popper, {
     open: isOpen,
     anchorEl: anchorEl,
@@ -14412,7 +14415,7 @@ var ServiceListConnect = function ServiceListConnect(_ref) {
 var styles$1 = {
   servicesContainer: {
     width: '360px',
-    maxHeight: '380px',
+    maxHeight: '412px',
     top: '140px',
     backgroundColor: 'geowebColors.background.surface',
     boxShadow: 6,
@@ -14505,6 +14508,29 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
     startIcon: /*#__PURE__*/React.createElement(Add, null)
   }, "Add a new service")));
 };
+var updateServiceTitle = 'Update layers from WMS service';
+var editServiceTitle = 'Edit Service';
+var showServiceTitle = 'Show Service';
+
+var deleteServiceTitle = function deleteServiceTitle(hasActiveLayers) {
+  return hasActiveLayers ? 'Service has active layers. Cannot remove this service' : 'Delete Service';
+};
+
+var tooltipPlacement = function tooltipPlacement() {
+  return 'left';
+};
+
+var tooltipPopperProps = {
+  disablePortal: true,
+  sx: {
+    '& .MuiTooltip-tooltip': {
+      width: '200px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }
+};
 
 var Rows = function Rows(_ref2) {
   var services = _ref2.services,
@@ -14521,9 +14547,10 @@ var Rows = function Rows(_ref2) {
     return false;
   };
 
+  var sortedServices = sortByService(services);
   return /*#__PURE__*/React.createElement(List, {
     disablePadding: true
-  }, Object.keys(sortByService(services)).map(function (serviceId) {
+  }, Object.keys(sortedServices).map(function (serviceId) {
     var _services$serviceId = services[serviceId],
         serviceUrl = _services$serviceId.serviceUrl,
         serviceName = _services$serviceId.serviceName,
@@ -14553,8 +14580,10 @@ var Rows = function Rows(_ref2) {
       item: true,
       xs: 4
     }, /*#__PURE__*/React.createElement(CustomTooltip, {
-      title: "Update layers from WMS service",
-      "data-testid": "updateServiceTooltip"
+      "data-testid": "updateServiceTooltip",
+      title: updateServiceTitle,
+      placement: tooltipPlacement(),
+      PopperProps: tooltipPopperProps
     }, /*#__PURE__*/React.createElement(IconButton, {
       "data-testid": "updateServiceButton",
       "aria-label": "Update layers from WMS service",
@@ -14567,7 +14596,9 @@ var Rows = function Rows(_ref2) {
       item: true,
       xs: 4
     }, userAddedService ? /*#__PURE__*/React.createElement(CustomTooltip, {
-      title: "Edit Service"
+      title: editServiceTitle,
+      placement: tooltipPlacement(),
+      PopperProps: tooltipPopperProps
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": "edit service",
       "data-testid": "openEditServiceButton",
@@ -14582,7 +14613,9 @@ var Rows = function Rows(_ref2) {
         });
       }
     }, /*#__PURE__*/React.createElement(Edit, null)))) : /*#__PURE__*/React.createElement(CustomTooltip, {
-      title: "Show Service"
+      title: showServiceTitle,
+      placement: tooltipPlacement(),
+      PopperProps: tooltipPopperProps
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": "show service",
       "data-testid": "openShowServiceButton",
@@ -14600,7 +14633,9 @@ var Rows = function Rows(_ref2) {
       item: true,
       xs: 4
     }, userAddedService && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(CustomTooltip, {
-      title: serviceHasActiveLayers ? 'Service has active layers. Cannot remove this service' : 'Delete Service',
+      title: deleteServiceTitle(serviceHasActiveLayers),
+      PopperProps: tooltipPopperProps,
+      placement: tooltipPlacement(),
       "data-testid": "removeServiceTooltip"
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
       "data-testid": "removeServiceButton",
@@ -16194,7 +16229,7 @@ var SmallFontSlider = styled(Slider)(function () {
 
 var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
   var marks = _ref.marks,
-      layerName = _ref.layerName,
+      layerTitle = _ref.layerTitle,
       _ref$reverse = _ref.reverse,
       reverse = _ref$reverse === void 0 ? false : _ref$reverse,
       _ref$isDisabled = _ref.isDisabled,
@@ -16264,7 +16299,7 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
       if (!managedValue) setCurrentIndex(val);
     }
   }))), /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: layerName
+    title: layerTitle
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "body2",
     sx: {
@@ -16273,7 +16308,7 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
       overflow: 'hidden',
       textOverflow: 'ellipsis'
     }
-  }, layerName)));
+  }, layerTitle)));
 };
 
 /* *
@@ -16373,7 +16408,7 @@ var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref) {
     return null;
   }
 
-  var layerName = wmLayer.getLayerName();
+  var layerTitle = wmLayer.title;
   var marks = marksByDimension(wmsDimension);
   var isLayerDimensionSynced = layerDimension.synced !== undefined && layerDimension.synced === true;
   var tooltipTitle = isLayerDimensionSynced ? 'Click to disconnect layer' : 'Click to connect layer';
@@ -16401,7 +16436,7 @@ var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(Icon, null))), /*#__PURE__*/React.createElement(DimensionSelectSlider, {
     marks: marks,
-    layerName: layerName,
+    layerTitle: layerTitle,
     reverse: dimConfig ? dimConfig.reversed : false,
     managedValue: Number(layerDimension.currentValue) || layerDimension.currentValue,
     onChangeDimensionValue: function onChangeDimensionValue(value) {

package/index.umd.js

@@ -9936,7 +9936,7 @@
       column6: 'column-6',
       column7: 'column-7'
     };
-    var layerManagerStyle = __assign({
+    var layerManagerStyle = {
       '.layerManagerContainer': {
         containerType: 'inline-size'
       },
@@ -9984,8 +9984,7 @@
       },
       '.collapseLarge-btn': {
         display: 'none'
-      }
-    }, !shared.IS_JEST && {
+      },
       '@container (max-width: 320px)': {
         '.layermanager': {
           '.column-1': {
@@ -10084,7 +10083,7 @@
           }
         }
       }
-    });
+    };
     var returnCorrectSize = function returnCorrectSize(sizeResult) {
       if (sizeResult === 'sizeSmall') return sizeSmall;
       if (sizeResult === 'sizeMedium') return sizeMedium;
@@ -10646,7 +10645,11 @@
           width: '100%',
           borderRadius: '0',
           minWidth: '49px'
-        }
+        },
+        // Safari-based browsers handle focus differently with buttons
+        // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
+        // Use div instead to fix onBlur hander's event.relatedTarget below
+        component: "div"
       }, currentOpacityText)), /*#__PURE__*/React__namespace.createElement(material.Popper, {
         open: isOpen,
         anchorEl: anchorEl,
@@ -15022,7 +15025,7 @@
     var styles$1 = {
       servicesContainer: {
         width: '360px',
-        maxHeight: '380px',
+        maxHeight: '412px',
         top: '140px',
         backgroundColor: 'geowebColors.background.surface',
         boxShadow: 6,
@@ -15115,6 +15118,29 @@
         startIcon: /*#__PURE__*/React__namespace.createElement(theme.Add, null)
       }, "Add a new service")));
     };
+    var updateServiceTitle = 'Update layers from WMS service';
+    var editServiceTitle = 'Edit Service';
+    var showServiceTitle = 'Show Service';
+
+    var deleteServiceTitle = function deleteServiceTitle(hasActiveLayers) {
+      return hasActiveLayers ? 'Service has active layers. Cannot remove this service' : 'Delete Service';
+    };
+
+    var tooltipPlacement = function tooltipPlacement() {
+      return 'left';
+    };
+
+    var tooltipPopperProps = {
+      disablePortal: true,
+      sx: {
+        '& .MuiTooltip-tooltip': {
+          width: '200px',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        }
+      }
+    };
 
     var Rows = function Rows(_a) {
       var services = _a.services,
@@ -15131,9 +15157,10 @@
         return false;
       };
 
+      var sortedServices = sortByService(services);
       return /*#__PURE__*/React__namespace.createElement(material.List, {
         disablePadding: true
-      }, Object.keys(sortByService(services)).map(function (serviceId) {
+      }, Object.keys(sortedServices).map(function (serviceId) {
         var _a = services[serviceId],
             serviceUrl = _a.serviceUrl,
             serviceName = _a.serviceName,
@@ -15163,8 +15190,10 @@
           item: true,
           xs: 4
         }, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-          title: "Update layers from WMS service",
-          "data-testid": "updateServiceTooltip"
+          "data-testid": "updateServiceTooltip",
+          title: updateServiceTitle,
+          placement: tooltipPlacement(),
+          PopperProps: tooltipPopperProps
         }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
           "data-testid": "updateServiceButton",
           "aria-label": "Update layers from WMS service",
@@ -15177,7 +15206,9 @@
           item: true,
           xs: 4
         }, userAddedService ? /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-          title: "Edit Service"
+          title: editServiceTitle,
+          placement: tooltipPlacement(),
+          PopperProps: tooltipPopperProps
         }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
           "aria-label": "edit service",
           "data-testid": "openEditServiceButton",
@@ -15192,7 +15223,9 @@
             });
           }
         }, /*#__PURE__*/React__namespace.createElement(theme.Edit, null)))) : /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-          title: "Show Service"
+          title: showServiceTitle,
+          placement: tooltipPlacement(),
+          PopperProps: tooltipPopperProps
         }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
           "aria-label": "show service",
           "data-testid": "openShowServiceButton",
@@ -15210,7 +15243,9 @@
           item: true,
           xs: 4
         }, userAddedService && /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-          title: serviceHasActiveLayers ? 'Service has active layers. Cannot remove this service' : 'Delete Service',
+          title: deleteServiceTitle(serviceHasActiveLayers),
+          PopperProps: tooltipPopperProps,
+          placement: tooltipPlacement(),
           "data-testid": "removeServiceTooltip"
         }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
           "data-testid": "removeServiceButton",
@@ -16920,7 +16955,7 @@
 
     var DimensionSelectSlider = function DimensionSelectSlider(_a) {
       var marks = _a.marks,
-          layerName = _a.layerName,
+          layerTitle = _a.layerTitle,
           _b = _a.reverse,
           reverse = _b === void 0 ? false : _b,
           _c = _a.isDisabled,
@@ -16989,7 +17024,7 @@
           if (!managedValue) setCurrentIndex(val);
         }
       }))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: layerName
+        title: layerTitle
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "body2",
         sx: {
@@ -16998,7 +17033,7 @@
           overflow: 'hidden',
           textOverflow: 'ellipsis'
         }
-      }, layerName)));
+      }, layerTitle)));
     };
 
     /* *
@@ -17097,7 +17132,7 @@
         return null;
       }
 
-      var layerName = wmLayer.getLayerName();
+      var layerTitle = wmLayer.title;
       var marks = marksByDimension(wmsDimension);
       var isLayerDimensionSynced = layerDimension.synced !== undefined && layerDimension.synced === true;
       var tooltipTitle = isLayerDimensionSynced ? 'Click to disconnect layer' : 'Click to connect layer';
@@ -17125,7 +17160,7 @@
         }
       }, /*#__PURE__*/React__namespace.createElement(Icon, null))), /*#__PURE__*/React__namespace.createElement(DimensionSelectSlider, {
         marks: marks,
-        layerName: layerName,
+        layerTitle: layerTitle,
         reverse: dimConfig ? dimConfig.reversed : false,
         managedValue: Number(layerDimension.currentValue) || layerDimension.currentValue,
         onChangeDimensionValue: function onChangeDimensionValue(value) {

package/lib/components/LayerManager/LayerManagerUtils.d.ts

@@ -10,7 +10,52 @@ export declare const columnClasses: {
     column7: string;
 };
 export declare const layerManagerStyle: {
-    '@container (max-width: 320px)'?: {
+    '.layerManagerContainer': {
+        containerType: string;
+    };
+    '.is-dragging header+.MuiBox-root': {
+        overflow: string;
+    };
+    '.column-1': {
+        width: number;
+        display: string;
+        background: string;
+    };
+    '.column-2': {
+        width: string;
+    };
+    '.column-3': {
+        width: string;
+    };
+    '.column-4': {
+        width: string;
+    };
+    '.column-5': {
+        width: string;
+    };
+    '.column-6': {
+        width: number;
+        display: string;
+    };
+    '.column-7': {
+        width: string;
+    };
+    '.enable-btn-mini': {
+        display: string;
+    };
+    '.header-layermanager': {
+        containerType: string;
+    };
+    '.header-mapPresets': {
+        display: string;
+    };
+    '.medium-layermanager': {
+        display: string;
+    };
+    '.collapseLarge-btn': {
+        display: string;
+    };
+    '@container (max-width: 320px)': {
         '.layermanager': {
             '.column-1': {
                 width: string;
@@ -48,8 +93,8 @@ export declare const layerManagerStyle: {
                 display: string;
             };
         };
-    } | undefined;
-    '@container (max-width: 600px)'?: {
+    };
+    '@container (max-width: 600px)': {
         '.layermanager': {
             '.column-3, .column-4, .column-5, .column-6, .column-7': {
                 display: string;
@@ -78,8 +123,8 @@ export declare const layerManagerStyle: {
                 display: string;
             };
         };
-    } | undefined;
-    '@container (max-width: 600px) and (min-width: 321px)'?: {
+    };
+    '@container (max-width: 600px) and (min-width: 321px)': {
         '.layermanager': {
             '.medium-layermanager': {
                 display: string;
@@ -104,51 +149,6 @@ export declare const layerManagerStyle: {
                 display: string;
             };
         };
-    } | undefined;
-    '.layerManagerContainer': {
-        containerType: string;
-    };
-    '.is-dragging header+.MuiBox-root': {
-        overflow: string;
-    };
-    '.column-1': {
-        width: number;
-        display: string;
-        background: string;
-    };
-    '.column-2': {
-        width: string;
-    };
-    '.column-3': {
-        width: string;
-    };
-    '.column-4': {
-        width: string;
-    };
-    '.column-5': {
-        width: string;
-    };
-    '.column-6': {
-        width: number;
-        display: string;
-    };
-    '.column-7': {
-        width: string;
-    };
-    '.enable-btn-mini': {
-        display: string;
-    };
-    '.header-layermanager': {
-        containerType: string;
-    };
-    '.header-mapPresets': {
-        display: string;
-    };
-    '.medium-layermanager': {
-        display: string;
-    };
-    '.collapseLarge-btn': {
-        display: string;
     };
 };
 export declare const returnCorrectSize: (sizeResult: DockedLayerManagerSize | undefined) => Size;

package/lib/components/MultiMapDimensionSelect/DimensionSelectSlider.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Mark } from '../../utils/dimensionUtils';
 interface DimensionSelectSliderProps {
     marks: Mark[];
-    layerName: string;
+    layerTitle: string;
     reverse?: boolean;
     isDisabled?: boolean;
     managedValue?: number | string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "4.13.1",
+  "version": "4.15.0",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -13,30 +13,30 @@
   "dependencies": {},
   "peerDependencies": {
     "react": "^18.2.0",
-    "@opengeoweb/shared": "4.13.1",
+    "@opengeoweb/shared": "4.15.0",
     "@mui/material": "^5.10.8",
-    "@opengeoweb/theme": "4.13.1",
+    "@opengeoweb/theme": "4.15.0",
     "react-draggable": "^4.4.5",
     "re-resizable": "^6.9.0",
     "@redux-eggs/core": "^2.2.0",
     "react-redux": "^8.0.4",
-    "@opengeoweb/form-fields": "4.13.1",
-    "react-hook-form": "^7.41.5",
-    "moment": "^2.29.0",
-    "moment-timezone": "^0.5.31",
-    "@mui/x-date-pickers": "^5.0.4",
     "lodash": "^4.17.20",
     "axios": "^0.25.0",
     "date-fns": "^2.29.3",
-    "@opengeoweb/webmap": "4.13.1",
+    "moment": "^2.29.0",
+    "@opengeoweb/webmap": "4.15.0",
     "throttle-debounce": "^3.0.1",
     "proj4": "^2.6.2",
-    "@opengeoweb/api": "4.13.1",
+    "@opengeoweb/api": "4.15.0",
     "react-intl": "^5.17.5",
     "react-sortablejs": "^6.1.4",
     "sortablejs": "^1.15.0",
     "immer": "^9.0.15",
     "react-window": "^1.8.7",
+    "@opengeoweb/form-fields": "4.15.0",
+    "react-hook-form": "^7.41.5",
+    "moment-timezone": "^0.5.31",
+    "@mui/x-date-pickers": "^5.0.4",
     "@reduxjs/toolkit": "^1.8.3",
     "lodash.clonedeep": "^4.5.0",
     "@turf/turf": "^5.1.6",