@opengeoweb/core 8.3.1 → 8.4.1

package/index.esm.js

@@ -1,17 +1,17 @@
 import * as React from 'react';
-import React__default, { forwardRef, useContext, useCallback, useEffect, createElement, PureComponent, useState, useRef, useLayoutEffect } from 'react';
+import React__default, { useState, forwardRef, useContext, useCallback, useEffect, createElement, PureComponent, useRef, useLayoutEffect } from 'react';
 import { Grid, Box as Box$2, MenuItem, Typography, useTheme as useTheme$2, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, Paper, List, ListItemButton, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, LinearProgress, Backdrop, ListItem, ListItemSecondaryAction, Checkbox, Switch, styled as styled$1, Slider, Menu, Card, IconButton, Select, CardContent, RadioGroup, FormControlLabel, Radio, ToggleButtonGroup, ToggleButton, Divider, Tooltip, ButtonGroup, Snackbar } from '@mui/material';
 import { CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, CustomTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, AlertBanner, CustomAccordion, ToolContainerDraggable, calculateStartSize, CustomToggleButton, SearchHighlight, dateUtils, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
 import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, Copy, None, FastForward, AutoUpdateActive, Both, Info, Visibility, VisibilityOff, Delete, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, DragHandle as DragHandle$1, Cached, Add, MapAdd, Filter, Search, Clear, Edit, Close, Layers, Equalizer, Link, LinkOff, AutoUpdateInActive, Speed, Clock, Now, Animation, Options, Pause, Play, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { useDispatch, useSelector, connect, Provider } from 'react-redux';
 import { uiTypes, uiSelectors, uiActions, layerTypes, layerUtils, layerActions, layerSelectors, serviceSelectors, serviceActions, mapSelectors, mapActions, mapEnums, mapConstants, layerSelectSelectors, layerSelectActions, filterLayers, getUserAddedServices, storeUtils, snackbarActions, layerSelectTypes, mapUtils, genericActions, syncConstants, defaultLayers, mapStoreActions, getSingularDrawtoolDrawLayerId, syncGroupsSelectors, syncGroupsSelector, snackbarModuleConfig, snackbarSelectors, coreModuleConfig, routerUtils, routerModuleConfig, appModuleConfig, appActions } from '@opengeoweb/store';
 import { ReactSortable } from 'react-sortablejs';
-import { webmapUtils, WMGetServiceFromStore, getCapabilities, LayerType, clearImageCache, WMLayer } from '@opengeoweb/webmap';
+import { WMGetServiceFromStore, getCapabilities, webmapUtils, LayerType, clearImageCache, WMLayer } from '@opengeoweb/webmap';
 import { jsx } from 'react/jsx-runtime';
 import Box$3 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
 import Grid$1 from '@mui/material/Grid';
-import { LegendLayout, MapControlButton, ZoomControls, CanvasComponent, MapView, MapViewLayer, LegendDialog, emptyGeoJSON, MapControls, publicLayers } from '@opengeoweb/webmap-react';
+import { LegendLayout, MapControlButton, ZoomControls, CanvasComponent, MapView, MapViewLayer, LegendDialog, SearchDialog, emptyGeoJSON, MapControls, publicLayers } from '@opengeoweb/webmap-react';
 import _, { isEqual as isEqual$1, debounce, groupBy, throttle as throttle$1, range } from 'lodash';
 import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
 import { useFormContext } from 'react-hook-form';
@@ -3914,93 +3914,40 @@ Sortable.mount(new AutoScrollPlugin());
 Sortable.mount(Remove, Revert);
 
 var DimensionSelect = function DimensionSelect(_ref) {
-  var layerId = _ref.layerId,
-    onLayerChangeDimension = _ref.onLayerChangeDimension,
+  var onLayerChangeDimension = _ref.onLayerChangeDimension,
     _ref$layerDimensions = _ref.layerDimensions,
     layerDimensions = _ref$layerDimensions === void 0 ? [] : _ref$layerDimensions,
-    isEnabled = _ref.isEnabled,
+    _ref$isEnabled = _ref.isEnabled,
+    isEnabled = _ref$isEnabled === void 0 ? false : _ref$isEnabled,
     icon = _ref.icon,
     nameMappings = _ref.nameMappings,
     valueMappings = _ref.valueMappings,
     _ref$tooltipPrefix = _ref.tooltipPrefix,
-    tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'Dimensions: ' : _ref$tooltipPrefix;
-  var _React$useState = React.useState(layerDimensions.length ? layerDimensions[0].name : ''),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    activeDimName = _React$useState2[0],
-    setActiveDimName = _React$useState2[1];
-  React.useEffect(function () {
-    var activeDim = layerDimensions.find(function (d) {
-      return d.name === activeDimName;
-    });
-    if (!activeDim) {
-      setActiveDimName(layerDimensions.length ? layerDimensions[0].name : '');
-    }
-  }, [layerDimensions, activeDimName]);
-  React.useEffect(function () {
-    var activeDim = layerDimensions.find(function (d) {
-      return d.name === activeDimName;
-    });
-    if (activeDim) {
-      onLayerChangeDimension(activeDim.name, activeDim.currentValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  if (!layerDimensions.length || !layerId) {
-    return null;
-  }
-  var getValuesToDisplay = function getValuesToDisplay() {
-    var activeWMJSDim = webmapUtils.getWMJSDimensionForLayerAndDimension(layerId, activeDimName) || webmapUtils.getWMJSDimensionForLayerAndDimension(layerId, layerDimensions[0].name);
-    if (!activeWMJSDim) {
-      return null;
-    }
-    var availableDimValues = [];
-    for (var j = 0; j < activeWMJSDim.size(); j += 1) {
-      availableDimValues.push(activeWMJSDim.getValueForIndex(j));
-    }
-    availableDimValues.reverse();
-    // Only display last 100 values, to avoid performance issues
-    // TODO: (2020-06-29 Tineke van Rijn) replace this with lazy loading
-    return availableDimValues.slice(0, 100);
-  };
-  var valuesToDisplay = getValuesToDisplay();
-  if (valuesToDisplay === null) {
-    return null;
-  }
-  var activeDim = layerDimensions.find(function (dim) {
-    return dim.name === activeDimName;
-  });
-  if (!activeDim) {
-    return null;
-  }
-  var selectDimensionValue = function selectDimensionValue(event) {
-    event.stopPropagation();
-    if (activeDim) {
-      onLayerChangeDimension(activeDim.name, event.target.value, layerTypes.LayerActionOrigin.layerManager);
-    }
-  };
-  var onChangeActiveDimensionName = function onChangeActiveDimensionName(event) {
-    event.stopPropagation();
-    setActiveDimName(event.target.value);
-  };
-  var dimNameList = layerDimensions.map(function (dimension) {
-    return {
-      value: dimension.name
-    };
-  });
-  var dimNameCurrentIndex = layerDimensions.findIndex(function (value) {
-    return value.name === activeDim.name;
-  });
-  var dimValueList = valuesToDisplay.map(function (value) {
-    return {
-      value: value
-    };
+    tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'Dimensions: ' : _ref$tooltipPrefix,
+    SingleValueComponent = _ref.SingleValueComponent;
+  var _a, _b;
+  var _useState = useState((_a = layerDimensions === null || layerDimensions === void 0 ? void 0 : layerDimensions[0]) === null || _a === void 0 ? void 0 : _a.name),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedDimensionName = _useState2[0],
+    setSelectedDimensionName = _useState2[1];
+  var selectedDimension = layerDimensions.find(function (dimension) {
+    return dimension.name === selectedDimensionName;
   });
-  var dimValueCurrentIndex = valuesToDisplay.findIndex(function (value) {
-    return value === activeDim.currentValue;
+  var dimensionNames = layerDimensions.map(function (dimension) {
+    return dimension.name;
   });
-  if (dimValueCurrentIndex === -1) {
+  var selectedDimensionDoesntExist = !dimensionNames.includes(selectedDimensionName);
+  React.useEffect(function () {
+    var _a, _b;
+    if (selectedDimensionDoesntExist) {
+      setSelectedDimensionName((_b = (_a = layerDimensions === null || layerDimensions === void 0 ? void 0 : layerDimensions[0]) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '');
+    }
+  }, [layerDimensions, selectedDimensionDoesntExist]);
+  if (selectedDimensionDoesntExist) {
     return null;
   }
+  var collapseDimensionDropdown = SingleValueComponent && layerDimensions.length === 1;
+  var collapseValueDropdown = SingleValueComponent && ((_b = selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.values) === null || _b === void 0 ? void 0 : _b.length) === 1;
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     direction: "row",
@@ -4009,21 +3956,63 @@ var DimensionSelect = function DimensionSelect(_ref) {
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12
-  }, /*#__PURE__*/React.createElement(TooltipSelect, {
+  }, collapseDimensionDropdown ? /*#__PURE__*/React.createElement(SingleValueComponent, Object.assign({}, layerDimensions[0], {
+    nameMappings: nameMappings,
+    valueMappings: valueMappings,
+    position: "dimension"
+  })) : /*#__PURE__*/React.createElement(SelectDimension, {
+    selectedDimensionName: selectedDimensionName,
+    setSelectedDimensionName: setSelectedDimensionName,
+    dimensionNames: dimensionNames,
+    tooltipPrefix: tooltipPrefix,
+    isEnabled: isEnabled,
+    icon: icon,
+    nameMappings: nameMappings
+  }), collapseValueDropdown ? /*#__PURE__*/React.createElement(SingleValueComponent, Object.assign({}, layerDimensions[0], {
+    nameMappings: nameMappings,
+    valueMappings: valueMappings,
+    position: "value"
+  })) : /*#__PURE__*/React.createElement(SelectDimensionValue, {
+    selectedDimension: selectedDimension,
+    onLayerChangeDimension: onLayerChangeDimension,
+    tooltipPrefix: tooltipPrefix,
+    isEnabled: isEnabled,
+    icon: icon,
+    valueMappings: valueMappings
+  })));
+};
+var SelectDimension = function SelectDimension(_ref2) {
+  var selectedDimensionName = _ref2.selectedDimensionName,
+    setSelectedDimensionName = _ref2.setSelectedDimensionName,
+    icon = _ref2.icon,
+    nameMappings = _ref2.nameMappings,
+    tooltipPrefix = _ref2.tooltipPrefix,
+    isEnabled = _ref2.isEnabled,
+    dimensionNames = _ref2.dimensionNames;
+  return /*#__PURE__*/React.createElement(TooltipSelect, {
     disableUnderline: true,
-    tooltip: "".concat(tooltipPrefix).concat(activeDimName),
+    tooltip: "".concat(tooltipPrefix).concat(selectedDimensionName),
     inputProps: {
       SelectDisplayProps: {
         'data-testid': 'selectDimension'
       }
     },
     isEnabled: isEnabled,
-    value: activeDimName,
-    list: dimNameList,
-    currentIndex: dimNameCurrentIndex,
-    onChange: onChangeActiveDimensionName,
-    onChangeMouseWheel: function onChangeMouseWheel(e) {
-      return setActiveDimName(e.value);
+    value: selectedDimensionName,
+    list: dimensionNames.map(function (name) {
+      return {
+        value: name
+      };
+    }),
+    currentIndex: dimensionNames.findIndex(function (name) {
+      return name === selectedDimensionName;
+    }),
+    onChange: function onChange(event) {
+      event.stopPropagation();
+      setSelectedDimensionName(event.target.value);
+    },
+    onChangeMouseWheel: function onChangeMouseWheel(event) {
+      setSelectedDimensionName(event.value);
     },
     style: {
       maxWidth: '50%'
@@ -4031,14 +4020,31 @@ var DimensionSelect = function DimensionSelect(_ref) {
     IconComponent: icon
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Dimension"), layerDimensions.map(function (dimension) {
+  }, "Dimension"), dimensionNames.map(function (name) {
     return /*#__PURE__*/React.createElement(MenuItem, {
-      key: dimension.name,
-      value: dimension.name
-    }, nameMappings && dimension.name && nameMappings[dimension.name] || dimension.name);
-  })), /*#__PURE__*/React.createElement(TooltipSelect, {
+      key: name,
+      value: name
+    }, (nameMappings === null || nameMappings === void 0 ? void 0 : nameMappings[name]) || name);
+  }));
+};
+var SelectDimensionValue = function SelectDimensionValue(_ref3) {
+  var isEnabled = _ref3.isEnabled,
+    tooltipPrefix = _ref3.tooltipPrefix,
+    selectedDimension = _ref3.selectedDimension,
+    icon = _ref3.icon,
+    onLayerChangeDimension = _ref3.onLayerChangeDimension,
+    valueMappings = _ref3.valueMappings;
+  var _a;
+  var dimensionValues = (_a = selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.values) === null || _a === void 0 ? void 0 : _a.split(',').slice(0, 100).reverse();
+  if (!(selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.name) || !(dimensionValues === null || dimensionValues === void 0 ? void 0 : dimensionValues.length)) {
+    return null;
+  }
+  var setDimensionValue = function setDimensionValue(dimensionValue) {
+    onLayerChangeDimension(selectedDimension.name, dimensionValue, layerTypes.LayerActionOrigin.layerManager);
+  };
+  return /*#__PURE__*/React.createElement(TooltipSelect, {
     disableUnderline: true,
-    tooltip: "".concat(tooltipPrefix).concat(activeDimName, " ").concat(activeDim.currentValue, " ").concat(activeDim.units),
+    tooltip: "".concat(tooltipPrefix).concat(selectedDimension.name, " ").concat(selectedDimension.currentValue, " ").concat(selectedDimension.units),
     inputProps: {
       SelectDisplayProps: {
         'data-testid': 'selectDimensionValue'
@@ -4046,12 +4052,21 @@ var DimensionSelect = function DimensionSelect(_ref) {
       'data-testid': 'selectDimensionValue-input'
     },
     isEnabled: isEnabled,
-    value: activeDim && activeDim.currentValue,
-    list: dimValueList,
-    currentIndex: dimValueCurrentIndex,
-    onChange: selectDimensionValue,
-    onChangeMouseWheel: function onChangeMouseWheel(e) {
-      return onLayerChangeDimension(activeDim.name, e.value, layerTypes.LayerActionOrigin.layerManager);
+    value: selectedDimension.currentValue,
+    list: dimensionValues.map(function (dimensionValue) {
+      return {
+        value: dimensionValue
+      };
+    }),
+    currentIndex: dimensionValues.findIndex(function (dimensionValue) {
+      return dimensionValue === selectedDimension.currentValue;
+    }),
+    onChange: function onChange(event) {
+      event.stopPropagation();
+      setDimensionValue(event.target.value);
+    },
+    onChangeMouseWheel: function onChangeMouseWheel(event) {
+      setDimensionValue(event.value);
     },
     style: {
       maxWidth: '50%'
@@ -4059,12 +4074,13 @@ var DimensionSelect = function DimensionSelect(_ref) {
     IconComponent: icon
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Dimension value (", valuesToDisplay.length, " options)"), valuesToDisplay.map(function (dimValue) {
+  }, "Dimension value (", dimensionValues.length, " options)"), dimensionValues.map(function (dimensionValue) {
+    var _a;
     return /*#__PURE__*/React.createElement(MenuItem, {
-      key: dimValue,
-      value: dimValue
-    }, valueMappings && activeDim.name && valueMappings[activeDim.name] && valueMappings[activeDim.name](dimValue) || /*#__PURE__*/React.createElement(React.Fragment, null, "".concat(dimValue), "\xA0", /*#__PURE__*/React.createElement("i", null, "".concat(activeDim.units))));
-  }))));
+      key: dimensionValue,
+      value: dimensionValue
+    }, ((_a = valueMappings === null || valueMappings === void 0 ? void 0 : valueMappings[selectedDimension.name]) === null || _a === void 0 ? void 0 : _a.call(valueMappings, dimensionValue)) || /*#__PURE__*/React.createElement(React.Fragment, null, "".concat(dimensionValue), "\xA0", /*#__PURE__*/React.createElement("i", null, "".concat(selectedDimension.units))));
+  }));
 };
 
 var getRenderLayersValues = function getRenderLayersValues(layerName, layers) {
@@ -4402,7 +4418,11 @@ var RenderStyles = function RenderStyles(_ref) {
   if (layerStyles && layerStyles.length > 0) {
     styles.push.apply(styles, _toConsumableArray(layerStyles));
   }
-  var currentStyle = currentLayerStyle !== '' ? currentLayerStyle : styles[0].name;
+  var layerStyleNames = layerStyles.map(function (style) {
+    return style.name;
+  });
+  var layerStyleExists = layerStyleNames.includes(currentLayerStyle);
+  var currentStyle = layerStyleExists ? currentLayerStyle : styles[0].name;
   var selectStyle = function selectStyle(event) {
     event.stopPropagation();
     onChangeLayerStyle(event.target.value);
@@ -5026,7 +5046,6 @@ var LayerRow = function LayerRow(_ref7) {
     item: true,
     className: columnClasses.column5
   }, layerDimensionLayout || /*#__PURE__*/React__default.createElement(DimensionSelect, {
-    layerId: layerId,
     layerDimensions: layerUtils.filterNonTimeDimensions(layer.dimensions),
     onLayerChangeDimension: function onLayerChangeDimension(dimensionName, dimensionValue) {
       var dimension = {
@@ -5346,8 +5365,10 @@ var DimensionSelectConnect = function DimensionSelectConnect(_ref2) {
     layerDimensions = _useLayerDimensions.layerDimensions,
     isLayerEnabled = _useLayerDimensions.isLayerEnabled,
     layerChangeDimension = _useLayerDimensions.layerChangeDimension;
+  if (!layerDimensions.length || !layerId) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(DimensionSelect, {
-    layerId: layerId,
     layerDimensions: layerDimensions,
     onLayerChangeDimension: function onLayerChangeDimension(dimensionName, dimensionValue, origin) {
       var dimension = {
@@ -10592,25 +10613,14 @@ var CustomDimensionSelectConnect = function CustomDimensionSelectConnect(_a) {
     layerDimensions = _useLayerDimensions.layerDimensions,
     isLayerEnabled = _useLayerDimensions.isLayerEnabled,
     layerChangeDimension = _useLayerDimensions.layerChangeDimension;
-  var filteredDimensions = dimensionsToShow ? layerDimensions.filter(function (dimension) {
-    var _a;
-    return dimensionsToShow.includes((_a = dimension.name) !== null && _a !== void 0 ? _a : '');
-  }) : layerDimensions;
-  if (dimensionsToShow) {
-    // also sort according to the filter array
-    filteredDimensions.sort(function (a, b) {
-      return dimensionsToShow.indexOf(a.name) - dimensionsToShow.indexOf(b.name);
+  var filteredDimensions = dimensionsToShow ? dimensionsToShow.map(function (dimensionName) {
+    return layerDimensions.find(function (dimension) {
+      return dimension.name === dimensionName;
     });
-  }
-  var singleValue = filteredDimensions.length === 1 && SingleValueComponent;
-  if (singleValue) {
-    return /*#__PURE__*/React.createElement(SingleValueComponent, Object.assign({
-      value: filteredDimensions[0].currentValue
-    }, props));
-  }
+  }).filter(Boolean) : layerDimensions;
   return /*#__PURE__*/React.createElement(DimensionSelect, Object.assign({
-    layerId: layerId,
     layerDimensions: filteredDimensions,
+    SingleValueComponent: SingleValueComponent,
     onLayerChangeDimension: function onLayerChangeDimension(dimensionName, dimensionValue, origin) {
       var dimension = {
         name: dimensionName,
@@ -14267,7 +14277,7 @@ var ServiceChip = function ServiceChip(_ref) {
     title: (service === null || service === void 0 ? void 0 : service["abstract"]) ? "Abstract: ".concat(service["abstract"]) : ''
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CustomToggleButton, {
     variant: "boxed",
-    selected: isSelected,
+    selected: Boolean(isSelected),
     tabIndex: 0,
     "data-testid": all ? 'serviceChipAll' : 'serviceChip',
     onClick: function onClick() {
@@ -14281,92 +14291,66 @@ var ServiceChip = function ServiceChip(_ref) {
   }, service ? service.serviceName : 'All')));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * 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)
+ * */
 var ServiceChipConnect = function ServiceChipConnect(_ref) {
-  var _ref$all = _ref.all,
-    all = _ref$all === void 0 ? false : _ref$all,
-    serviceId = _ref.serviceId,
-    service = _ref.service,
-    isSelected = _ref.isSelected,
-    isAllSelected = _ref.isAllSelected,
-    isDisabled = _ref.isDisabled;
+  var service = _ref.service,
+    isAllSelected = _ref.isAllSelected;
   var dispatch = useDispatch();
-  var activeServices = useSelector(function (store) {
-    return layerSelectSelectors.getActiveServices(store);
-  });
-  var setAllServicesEnabled = function setAllServicesEnabled(allServicesEnabled) {
-    dispatch(layerSelectActions.setAllServicesEnabled({
-      allServicesEnabled: allServicesEnabled
-    }));
-  };
-  var hasSelectedStyle = !isAllSelected && isSelected || isAllSelected && (service === null || service === void 0 ? void 0 : service.serviceName) === 'all';
-  var toggleChip = function toggleChip(service) {
-    if (service === 'all') {
-      if (isSelected) {
-        setAllServicesEnabled(false);
-        Object.entries(activeServices).forEach(function (_ref2) {
-          var _ref3 = _slicedToArray(_ref2, 2),
-            serviceID = _ref3[0],
-            service = _ref3[1];
-          if (service.enabled) {
-            dispatch(layerSelectActions.disableActiveService({
-              serviceId: serviceID,
-              filters: service.filterIds
-            }));
-          }
-        });
-      } else {
-        setAllServicesEnabled(true);
-        Object.entries(activeServices).forEach(function (_ref4) {
-          var _ref5 = _slicedToArray(_ref4, 2),
-            serviceID = _ref5[0],
-            service = _ref5[1];
-          if (!service.enabled) {
-            dispatch(layerSelectActions.enableActiveService({
-              serviceId: serviceID,
-              filters: service.filterIds
-            }));
-          }
-        });
-      }
-    } else if (isSelected) {
+  var serviceId = service.serviceId;
+  var toggleChip = function toggleChip() {
+    if (service.enabled) {
       if (isAllSelected) {
-        setAllServicesEnabled(false);
-        Object.entries(activeServices).forEach(function (_ref6) {
-          var _ref7 = _slicedToArray(_ref6, 2),
-            serviceID = _ref7[0],
-            service = _ref7[1];
-          var shouldDisable = service.enabled && serviceID !== serviceId;
-          if (shouldDisable) {
-            dispatch(layerSelectActions.disableActiveService({
-              serviceId: serviceID,
-              filters: service.filterIds
-            }));
-          }
-        });
-      } else {
-        dispatch(layerSelectActions.disableActiveService({
-          serviceId: serviceId,
-          filters: activeServices[serviceId].filterIds
+        dispatch(layerSelectActions.onlyThisServiceEnabled({
+          serviceId: serviceId
         }));
+        return;
       }
-    } else {
-      dispatch(layerSelectActions.enableActiveService({
-        serviceId: serviceId,
-        filters: activeServices[serviceId].filterIds
+      dispatch(layerSelectActions.disableActiveService({
+        serviceId: serviceId
       }));
+      return;
     }
+    dispatch(layerSelectActions.enableActiveService({
+      serviceId: serviceId
+    }));
   };
   return /*#__PURE__*/React.createElement(ServiceChip, {
     service: service,
-    all: all,
     toggleChip: toggleChip,
-    isSelected: hasSelectedStyle,
-    isDisabled: isDisabled
+    isSelected: isAllSelected ? false : service.enabled,
+    isDisabled: service.isLoading
+  });
+};
+var AllChipConnect = function AllChipConnect(_ref2) {
+  var isAllSelected = _ref2.isAllSelected;
+  var dispatch = useDispatch();
+  return /*#__PURE__*/React.createElement(ServiceChip, {
+    toggleChip: function toggleChip() {
+      if (!isAllSelected) {
+        dispatch(layerSelectActions.enableAllActiveServices());
+      }
+    },
+    isSelected: isAllSelected
   });
 };
 
 var ServiceList = function ServiceList(_ref) {
-  var activeServices = _ref.activeServices,
+  var activeServicesById = _ref.activeServicesById,
     setHeight = _ref.setHeight;
   var ref = React.useRef(null);
   var _React$useState = React.useState(0),
@@ -14378,11 +14362,13 @@ var ServiceList = function ServiceList(_ref) {
     if (ref && ref.current && ref.current.clientHeight) {
       setServiceListHeight(ref.current.clientHeight);
     }
-  }, [activeServices, clientHeight]);
+  }, [activeServicesById, clientHeight]);
   React.useEffect(function () {
     setHeight(serviceListHeight);
   }, [serviceListHeight, setHeight]);
-  var isAllSelected = Object.values(activeServices).every(function (activeService) {
+  var activeServicesIds = Object.keys(activeServicesById);
+  var activeServices = Object.values(activeServicesById);
+  var isAllSelected = activeServices.every(function (activeService) {
     return activeService.enabled;
   });
   return /*#__PURE__*/React.createElement(Box$2, {
@@ -14404,20 +14390,13 @@ var ServiceList = function ServiceList(_ref) {
       fontSize: '0.875rem'
     },
     ref: ref
-  }, activeServices && Object.keys(activeServices) && Object.keys(activeServices).length > 0 && /*#__PURE__*/React.createElement(ServiceChipConnect, {
-    key: "All",
-    all: true,
-    isSelected: isAllSelected
-  }), Object.keys(activeServices).map(function (serviceId) {
-    var _a, _b;
-    var service = activeServices[serviceId];
+  }, (activeServicesIds === null || activeServicesIds === void 0 ? void 0 : activeServicesIds.length) && /*#__PURE__*/React.createElement(AllChipConnect, {
+    isAllSelected: isAllSelected
+  }), activeServices.map(function (service) {
     return /*#__PURE__*/React.createElement(ServiceChipConnect, {
-      key: serviceId,
-      serviceId: serviceId,
+      key: service.serviceUrl,
       service: service,
-      isSelected: (_a = activeServices[serviceId]) === null || _a === void 0 ? void 0 : _a.enabled,
-      isAllSelected: isAllSelected,
-      isDisabled: activeServices[serviceId] === undefined || ((_b = activeServices[serviceId]) === null || _b === void 0 ? void 0 : _b.isLoading) === true
+      isAllSelected: isAllSelected
     });
   })));
 };
@@ -14445,7 +14424,7 @@ var ServiceListConnect = function ServiceListConnect(_ref) {
   });
   return /*#__PURE__*/React.createElement(ServiceList, {
     setHeight: setHeight,
-    activeServices: sortByService(activeServices)
+    activeServicesById: sortByService(activeServices)
   });
 };
 
@@ -24059,6 +24038,77 @@ var GetFeatureInfoButtonConnect = function GetFeatureInfoButtonConnect(_ref) {
   }, /*#__PURE__*/React.createElement(Info, null));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+var SearchControlButtonConnect = function SearchControlButtonConnect(_ref) {
+  var mapId = _ref.mapId,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source;
+  var dispatch = useDispatch();
+  var dialogType = "".concat(uiTypes.DialogTypes.Search, "-").concat(mapId);
+  var currentActiveMapId = useSelector(function (store) {
+    return uiSelectors.getDialogMapId(store, dialogType);
+  });
+  var isOpenInStore = useSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, dialogType);
+  });
+  var openSearchDialog = React__default.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: dialogType,
+      mapId: mapId,
+      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+      source: source
+    }));
+  }, [currentActiveMapId, dialogType, dispatch, isOpenInStore, mapId, source]);
+  return /*#__PURE__*/React__default.createElement(MapControlButton, {
+    onClick: openSearchDialog,
+    title: "Search",
+    "aria-label": "Map search"
+  }, /*#__PURE__*/React__default.createElement(Search, null));
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+var SearchControlConnect = function SearchControlConnect(_ref) {
+  var mapId = _ref.mapId;
+  var dialogType = "".concat(uiTypes.DialogTypes.Search, "-").concat(mapId);
+  var _useSetupDialog = useSetupDialog(dialogType),
+    isDialogOpen = _useSetupDialog.isDialogOpen,
+    onCloseDialog = _useSetupDialog.onCloseDialog;
+  return /*#__PURE__*/React__default.createElement(SearchDialog, {
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog
+  });
+};
+
 var titleStyle = function titleStyle(theme) {
   return {
     position: 'absolute',
@@ -24118,9 +24168,11 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     displayGetFeatureInfoButtonInMap = _a$displayGetFeatureI === void 0 ? false : _a$displayGetFeatureI,
     _a$shouldDisplayDrawC = _a.shouldDisplayDrawControls,
     shouldDisplayDrawControls = _a$shouldDisplayDrawC === void 0 ? false : _a$shouldDisplayDrawC,
+    _a$displaySearchButto = _a.displaySearchButtonInMap,
+    displaySearchButtonInMap = _a$displaySearchButto === void 0 ? false : _a$displaySearchButto,
     mapControls = _a.mapControls,
     children = _a.children,
-    props = __rest(_a, ["id", "dockedLayerManagerSize", "title", "layers", "dimensions", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "shouldShowDockedLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "shouldDisplayDrawControls", "mapControls", "children"]);
+    props = __rest(_a, ["id", "dockedLayerManagerSize", "title", "layers", "dimensions", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "shouldShowDockedLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "shouldDisplayDrawControls", "displaySearchButtonInMap", "mapControls", "children"]);
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || webmapUtils.generateMapId()).current;
   React__default.useEffect(function () {
@@ -24201,7 +24253,9 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     style: {
       top: mapControlsPositionTop
     }
-  }, /*#__PURE__*/React__default.createElement(ZoomControlConnect, {
+  }, displaySearchButtonInMap && /*#__PURE__*/React__default.createElement(SearchControlButtonConnect, {
+    mapId: mapId
+  }), /*#__PURE__*/React__default.createElement(ZoomControlConnect, {
     mapId: id
   }), displayLayerManagerAndLegendButtonInMap && /*#__PURE__*/React__default.createElement(LayerManagerMapButtonConnect, {
     mapId: mapId
@@ -24232,6 +24286,8 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     showMapId: true,
     mapId: mapId,
     multiLegend: multiLegend
+  }), /*#__PURE__*/React__default.createElement(SearchControlConnect, {
+    mapId: mapId
   }), showClock && /*#__PURE__*/React__default.createElement(TimeSliderClockConnect, {
     mapId: mapId
   }), displayGetFeatureInfoButtonInMap && /*#__PURE__*/React__default.createElement(GetFeatureInfoConnect, {
@@ -24572,12 +24628,14 @@ var componentsLookUp = function componentsLookUp(_ref) {
       {
         var mapPreset = initialProps.mapPreset,
           mapControls = initialProps.mapControls,
-          shouldDisplayDrawControls = initialProps.shouldDisplayDrawControls;
+          shouldDisplayDrawControls = initialProps.shouldDisplayDrawControls,
+          displaySearchButtonInMap = initialProps.displaySearchButtonInMap;
         return /*#__PURE__*/React__default.createElement(ConfigurableMapConnect, Object.assign({}, mapPreset, {
           id: id,
           "data-testid": "coreConfigurableMapConnect",
           displayGetFeatureInfoButtonInMap: true,
           shouldDisplayDrawControls: shouldDisplayDrawControls,
+          displaySearchButtonInMap: displaySearchButtonInMap,
           mapControls: mapControls
         }));
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "8.3.1",
+  "version": "8.4.1",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   "peerDependencies": {
     "@mui/material": "5.12.0",
     "@mui/system": "5.14.14",
-    "@opengeoweb/api": "8.3.1",
-    "@opengeoweb/form-fields": "8.3.1",
-    "@opengeoweb/shared": "8.3.1",
-    "@opengeoweb/store": "8.3.1",
-    "@opengeoweb/theme": "8.3.1",
-    "@opengeoweb/webmap": "8.3.1",
-    "@opengeoweb/webmap-react": "8.3.1",
+    "@opengeoweb/api": "8.4.1",
+    "@opengeoweb/form-fields": "8.4.1",
+    "@opengeoweb/shared": "8.4.1",
+    "@opengeoweb/store": "8.4.1",
+    "@opengeoweb/theme": "8.4.1",
+    "@opengeoweb/webmap": "8.4.1",
+    "@opengeoweb/webmap-react": "8.4.1",
     "@redux-eggs/redux-toolkit": "2.2.0",
     "@redux-eggs/saga-extension": "2.2.0",
     "@reduxjs/toolkit": "1.9.7",

package/src/lib/components/ComponentsLookUp/componentsLookUp.d.ts

@@ -12,6 +12,7 @@ export interface InitialMapProps {
     syncGroupsIds: string[];
     mapControls?: React.ReactNode;
     shouldDisplayDrawControls?: boolean;
+    displaySearchButtonInMap?: boolean;
 }
 interface InitialSliderProps {
     sliderPreset: {

package/src/lib/components/ConfigurableMap/ConfigurableMapConnect.d.ts

@@ -36,6 +36,7 @@ export interface ConfigurableMapConnectProps {
     showClock?: boolean;
     displayGetFeatureInfoButtonInMap?: boolean;
     shouldDisplayDrawControls?: boolean;
+    displaySearchButtonInMap?: boolean;
     children?: React.ReactNode;
     mapControls?: React.ReactNode;
 }

package/src/lib/components/LayerManager/LayerContainerRow/LayerRow/DimensionSelect/DimensionSelect.d.ts

@@ -1,11 +1,20 @@
 import * as React from 'react';
 import { mapTypes, layerTypes } from '@opengeoweb/store';
-interface DimensionSelectProps {
-    layerId: string;
+import { ElementType, FC } from 'react';
+export interface SingleValueComponentProps extends mapTypes.Dimension {
+    position: 'dimension' | 'value';
+    nameMappings?: {
+        [dimensionName: string]: string;
+    };
+    valueMappings?: {
+        [dimensionName: string]: (value: string) => string;
+    };
+}
+export interface DimensionSelectProps {
     layerDimensions?: mapTypes.Dimension[];
     onLayerChangeDimension: (dimensionName: string, dimensionValue: string, origin?: layerTypes.LayerActionOrigin.layerManager) => void;
     isEnabled?: boolean;
-    icon?: React.ElementType;
+    icon?: ElementType;
     nameMappings?: {
         [dimensionName: string]: string;
     };
@@ -13,6 +22,7 @@ interface DimensionSelectProps {
         [dimensionName: string]: (value: string) => string;
     };
     tooltipPrefix?: string;
+    SingleValueComponent?: React.FC<SingleValueComponentProps>;
 }
-declare const DimensionSelect: React.FC<DimensionSelectProps>;
+declare const DimensionSelect: FC<DimensionSelectProps>;
 export default DimensionSelect;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { mapTypes } from '@opengeoweb/store';
+import { SingleValueComponentProps } from './LayerContainerRow/LayerRow/DimensionSelect/DimensionSelect';
 import { Size, ToolbarButtonSettings } from './LayerManagerHeaderOptions';
 export declare const columnClasses: {
     column1: string;
@@ -223,9 +224,7 @@ export interface LayerManagerCustomSettings {
         };
         dimensions?: {
             dimensionsToShow?: string[];
-            SingleValueComponent?: React.FC<{
-                value: string;
-            }>;
+            SingleValueComponent?: React.FC<SingleValueComponentProps>;
             icon?: React.ElementType;
             tooltipPrefix?: string;
             nameMappings?: {

package/src/lib/components/LayerManager/LayerSelect/ServiceList/ServiceChipConnect.d.ts

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import { layerSelectTypes } from '@opengeoweb/store';
 export interface ServiceChipConnectProps {
-    all?: boolean;
-    serviceId?: string;
-    service?: layerSelectTypes.ActiveServiceObject;
-    isSelected?: boolean;
-    isAllSelected?: boolean;
-    isDisabled?: boolean;
+    service: layerSelectTypes.ActiveServiceObject;
+    isAllSelected: boolean;
 }
-declare const ServiceChipConnect: React.FC<ServiceChipConnectProps>;
-export default ServiceChipConnect;
+export declare const ServiceChipConnect: React.FC<ServiceChipConnectProps>;
+export declare const AllChipConnect: React.FC<{
+    isAllSelected: boolean;
+}>;

package/src/lib/components/LayerManager/LayerSelect/ServiceList/ServiceList.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { layerSelectTypes } from '@opengeoweb/store';
 interface ServiceListProps {
-    activeServices: layerSelectTypes.ActiveServiceObjectEntities;
+    activeServicesById: layerSelectTypes.ActiveServiceObjectEntities;
     setHeight: (height: number) => void;
 }
 declare const ServiceList: React.FC<ServiceListProps>;

package/src/lib/components/Search/SearchControl.stories.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const SearchControlConnectStoryLight: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const SearchControlConnectStoryDark: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/src/lib/components/Search/SearchControlButtonConnect.d.ts

@@ -0,0 +1,8 @@
+import { CustomIconProps } from '@opengeoweb/shared';
+import { uiTypes } from '@opengeoweb/store';
+import React from 'react';
+export interface SearchControlButtonConnectProps extends CustomIconProps {
+    mapId: string;
+    source?: uiTypes.Source;
+}
+export declare const SearchControlButtonConnect: React.FC<SearchControlButtonConnectProps>;

package/src/lib/components/Search/SearchControlConnect.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface SearchControlConnectProps {
+    mapId?: string;
+}
+export declare const SearchControlConnect: React.FC<SearchControlConnectProps>;

package/src/lib/components/Search/index.d.ts

@@ -0,0 +1,2 @@
+export { SearchControlButtonConnect } from './SearchControlButtonConnect';
+export { SearchControlConnect } from './SearchControlConnect';

package/src/lib/components/LayerManager/LayerSelect/ServiceList/ServiceList.spec.d.ts

@@ -1 +0,0 @@
-export {};