@opengeoweb/core 6.0.3 → 6.0.4

package/index.esm.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import React__default, { forwardRef, useContext, useCallback, useEffect, createElement, PureComponent, useState, Component, cloneElement, useRef, isValidElement, createRef, 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, Tooltip, IconButton, ButtonGroup, Divider, Snackbar } from '@mui/material';
 import { CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, CustomTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, AlertBanner, CustomAccordion, ToolContainerDraggable, calculateDialogSizeAndPosition, CustomToggleButton, SearchHighlight, dateUtils, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
-import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Add, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Close, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateInActive, Speed, Clock, Now, Animation, Options, Pause, Play, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, Location, DrawPolygon, DrawRegion, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Close, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateInActive, Speed, Clock, Now, Animation, Options, Pause, Play, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, Location, DrawPolygon, DrawRegion, 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, filterLayers, getUserAddedServices, layerSelectSelectors, layerSelectActions, storeUtils, snackbarActions, layerSelectTypes, mapUtils, genericActions, drawSelectors, drawActions, syncConstants, defaultLayers, syncGroupsSelectors, syncGroupsSelector, snackbarModuleConfig, snackbarSelectors, coreModuleConfig, routerUtils, routerModuleConfig, appModuleConfig, appActions } from '@opengeoweb/store';
 import { ReactSortable } from 'react-sortablejs';
@@ -882,7 +882,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
     _ref$tooltipTitle = _ref.tooltipTitle,
     tooltipTitle = _ref$tooltipTitle === void 0 ? 'Open the layer selector' : _ref$tooltipTitle,
     _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(Add, {
+    icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(LayersAdd, {
       "data-testid": "layerSelectButtonConnectIcon"
     }) : _ref$icon,
     _ref$isMultiMap = _ref.isMultiMap,
@@ -4861,109 +4861,130 @@ var getTextAndColor = function getTextAndColor(layerIsInsideAcceptanceTime) {
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-var LayerRow = function LayerRow(_ref) {
-  var layerId = _ref.layerId,
+var LeftButtons = function LeftButtons(_ref) {
+  var size = _ref.size,
+    dragHandle = _ref.dragHandle,
     layer = _ref.layer,
-    layerName = _ref.layerName,
-    services = _ref.services,
-    mapId = _ref.mapId,
-    _ref$onLayerRowClick = _ref.onLayerRowClick,
-    onLayerRowClick = _ref$onLayerRowClick === void 0 ? function () {} : _ref$onLayerRowClick,
-    _ref$isEnabled = _ref.isEnabled,
-    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
-    _ref$isLayerMissing = _ref.isLayerMissing,
-    isLayerMissing = _ref$isLayerMissing === void 0 ? false : _ref$isLayerMissing,
-    onLayerEnable = _ref.onLayerEnable,
-    onLayerChangeName = _ref.onLayerChangeName,
-    onLayerChangeStyle = _ref.onLayerChangeStyle,
-    _onLayerChangeOpacity = _ref.onLayerChangeOpacity,
-    _onLayerChangeDimension = _ref.onLayerChangeDimension,
-    onLayerDelete = _ref.onLayerDelete,
-    onLayerDuplicate = _ref.onLayerDuplicate,
-    _onChangeAcceptanceTime = _ref.onChangeAcceptanceTime,
+    layerMissingDataLayout = _ref.layerMissingDataLayout,
     layerEnableLayout = _ref.layerEnableLayout,
-    layerServicesLayout = _ref.layerServicesLayout,
-    layerStylesLayout = _ref.layerStylesLayout,
-    layerOpacityLayout = _ref.layerOpacityLayout,
-    layerDimensionLayout = _ref.layerDimensionLayout,
-    layerDeleteLayout = _ref.layerDeleteLayout,
-    layerMenuLayout = _ref.layerMenuLayout,
-    layerActiveLayout = _ref.layerActiveLayout,
+    isEnabled = _ref.isEnabled,
     disableActivateLayer = _ref.disableActivateLayer,
-    dragHandle = _ref.dragHandle,
-    layerAcceptanceTimeLayout = _ref.layerAcceptanceTimeLayout,
-    layerMissingDataLayout = _ref.layerMissingDataLayout;
+    layerActiveLayout = _ref.layerActiveLayout,
+    onChangeEnable = _ref.onChangeEnable,
+    onChangeActive = _ref.onChangeActive;
+  return /*#__PURE__*/React__default.createElement(Box$2, {
+    sx: leftButtonsStyle
+  }, dragHandle, layerMissingDataLayout || /*#__PURE__*/React__default.createElement(MissingData, {
+    layerIsInsideAcceptanceTime: "equal"
+  }), layerEnableLayout || /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    shouldShowAsDisabled: !layer.enabled,
+    tooltipTitle: layer.name,
+    onClick: onChangeEnable,
+    "data-testid": "enableButton".concat(size)
+  }, isEnabled ? /*#__PURE__*/React__default.createElement(Visibility, null) : /*#__PURE__*/React__default.createElement(VisibilityOff, null)), !disableActivateLayer && (layerActiveLayout || /*#__PURE__*/React__default.createElement(ActivateLayer, {
+    onChange: onChangeActive,
+    current: AutoOptions.BOTH,
+    isEnabled: true
+  })));
+};
+var Styles = function Styles(_ref2) {
+  var style = _ref2.style,
+    onChangeStyle = _ref2.onChangeStyle;
+  return /*#__PURE__*/React__default.createElement(RenderStyles, {
+    layerStyles: [],
+    currentLayerStyle: style,
+    onChangeLayerStyle: onChangeStyle
+  });
+};
+var Opacity = function Opacity(_ref3) {
+  var opacity = _ref3.opacity,
+    onChangeOpacity = _ref3.onChangeOpacity;
+  return /*#__PURE__*/React__default.createElement(OpacitySelect, {
+    currentOpacity: opacity,
+    onLayerChangeOpacity: onChangeOpacity
+  });
+};
+var DeleteLayer = function DeleteLayer(_ref4) {
+  var onClick = _ref4.onClick;
+  return /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    tooltipTitle: "Delete",
+    onClick: onClick,
+    "data-testid": "deleteButton"
+  }, /*#__PURE__*/React__default.createElement(Delete, null));
+};
+var Acceptance = function Acceptance(_ref5) {
+  var acceptanceTime = _ref5.acceptanceTime,
+    onChangeAcceptanceTime = _ref5.onChangeAcceptanceTime;
+  return /*#__PURE__*/React__default.createElement(AcceptanceTime, {
+    acceptanceTimeInMinutes: acceptanceTime,
+    onChangeAcceptanceTime: onChangeAcceptanceTime
+  });
+};
+var LayerRow = function LayerRow(_ref6) {
+  var layerId = _ref6.layerId,
+    layer = _ref6.layer,
+    layerName = _ref6.layerName,
+    services = _ref6.services,
+    mapId = _ref6.mapId,
+    _ref6$onLayerRowClick = _ref6.onLayerRowClick,
+    onLayerRowClick = _ref6$onLayerRowClick === void 0 ? function () {} : _ref6$onLayerRowClick,
+    _ref6$isEnabled = _ref6.isEnabled,
+    isEnabled = _ref6$isEnabled === void 0 ? true : _ref6$isEnabled,
+    _ref6$isLayerMissing = _ref6.isLayerMissing,
+    isLayerMissing = _ref6$isLayerMissing === void 0 ? false : _ref6$isLayerMissing,
+    onLayerEnable = _ref6.onLayerEnable,
+    onLayerChangeName = _ref6.onLayerChangeName,
+    onLayerChangeStyle = _ref6.onLayerChangeStyle,
+    onLayerChangeOpacity = _ref6.onLayerChangeOpacity,
+    _onLayerChangeDimension = _ref6.onLayerChangeDimension,
+    onLayerDelete = _ref6.onLayerDelete,
+    onLayerDuplicate = _ref6.onLayerDuplicate,
+    onChangeAcceptanceTime = _ref6.onChangeAcceptanceTime,
+    layerEnableLayout = _ref6.layerEnableLayout,
+    layerServicesLayout = _ref6.layerServicesLayout,
+    layerStylesLayout = _ref6.layerStylesLayout,
+    layerOpacityLayout = _ref6.layerOpacityLayout,
+    layerDimensionLayout = _ref6.layerDimensionLayout,
+    layerDeleteLayout = _ref6.layerDeleteLayout,
+    layerMenuLayout = _ref6.layerMenuLayout,
+    layerActiveLayout = _ref6.layerActiveLayout,
+    disableActivateLayer = _ref6.disableActivateLayer,
+    dragHandle = _ref6.dragHandle,
+    layerAcceptanceTimeLayout = _ref6.layerAcceptanceTimeLayout,
+    layerMissingDataLayout = _ref6.layerMissingDataLayout;
   var onClickRow = function onClickRow() {
     return onLayerRowClick(layerId);
   };
-  var LeftButtons = function LeftButtons(_ref2) {
-    var size = _ref2.size;
-    return /*#__PURE__*/React__default.createElement(Box$2, {
-      sx: leftButtonsStyle
-    }, dragHandle, layerMissingDataLayout || /*#__PURE__*/React__default.createElement(MissingData, {
-      layerIsInsideAcceptanceTime: "equal"
-    }), layerEnableLayout || /*#__PURE__*/React__default.createElement(CustomIconButton, {
-      shouldShowAsDisabled: !layer.enabled,
-      tooltipTitle: layer.name,
-      onClick: function onClick(event) {
-        event.stopPropagation();
-        onLayerEnable({
-          layerId: layerId,
-          enabled: !isEnabled
-        });
-      },
-      "data-testid": "enableButton".concat(size)
-    }, isEnabled ? /*#__PURE__*/React__default.createElement(Visibility, null) : /*#__PURE__*/React__default.createElement(VisibilityOff, null)), !disableActivateLayer && (layerActiveLayout || /*#__PURE__*/React__default.createElement(ActivateLayer, {
-      onChange: onClickRow,
-      current: AutoOptions.BOTH,
-      isEnabled: true
-    })));
+  var changeEnable = function changeEnable(event) {
+    event.stopPropagation();
+    onLayerEnable({
+      layerId: layerId,
+      enabled: !isEnabled
+    });
   };
-  var Styles = function Styles() {
-    return layerStylesLayout || /*#__PURE__*/React__default.createElement(RenderStyles, {
-      layerStyles: [],
-      currentLayerStyle: layer.style,
-      onChangeLayerStyle: function onChangeLayerStyle(style) {
-        onLayerChangeStyle({
-          layerId: layerId,
-          style: style
-        });
-      }
+  var changeStyle = function changeStyle(style) {
+    onLayerChangeStyle({
+      layerId: layerId,
+      style: style
     });
   };
-  var Opacity = function Opacity() {
-    return layerOpacityLayout || /*#__PURE__*/React__default.createElement(OpacitySelect, {
-      currentOpacity: layer.opacity,
-      onLayerChangeOpacity: function onLayerChangeOpacity(_opacity) {
-        _onLayerChangeOpacity({
-          layerId: layer.id,
-          opacity: _opacity
-        });
-      }
+  var changeOpacity = function changeOpacity(opacity) {
+    onLayerChangeOpacity({
+      layerId: layer.id,
+      opacity: opacity
     });
   };
-  var Acceptance = function Acceptance() {
-    return layerAcceptanceTimeLayout || /*#__PURE__*/React__default.createElement(AcceptanceTime, {
-      acceptanceTimeInMinutes: layer.acceptanceTimeInMinutes,
-      onChangeAcceptanceTime: function onChangeAcceptanceTime(acceptanceTime) {
-        _onChangeAcceptanceTime === null || _onChangeAcceptanceTime === void 0 ? void 0 : _onChangeAcceptanceTime({
-          layerId: layerId,
-          acceptanceTime: acceptanceTime
-        });
-      }
+  var changeAcceptanceTime = function changeAcceptanceTime(acceptanceTime) {
+    onChangeAcceptanceTime === null || onChangeAcceptanceTime === void 0 ? void 0 : onChangeAcceptanceTime({
+      layerId: layerId,
+      acceptanceTime: acceptanceTime
     });
   };
-  var DeleteLayer = function DeleteLayer() {
-    return layerDeleteLayout || /*#__PURE__*/React__default.createElement(CustomIconButton, {
-      tooltipTitle: "Delete",
-      onClick: function onClick() {
-        onLayerDelete({
-          mapId: mapId,
-          layerId: layerId
-        });
-      },
-      "data-testid": "deleteButton"
-    }, /*#__PURE__*/React__default.createElement(Delete, null));
+  var deleteLayer = function deleteLayer() {
+    return onLayerDelete({
+      mapId: mapId,
+      layerId: layerId
+    });
   };
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -4986,17 +5007,49 @@ var LayerRow = function LayerRow(_ref) {
     },
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Accordion, {
-    LeftButtons: LeftButtons,
+    LeftButtons: /*#__PURE__*/React__default.createElement(LeftButtons, {
+      size: "-medium",
+      dragHandle: dragHandle,
+      layer: layer,
+      layerMissingDataLayout: layerMissingDataLayout,
+      layerEnableLayout: layerEnableLayout,
+      isEnabled: isEnabled,
+      disableActivateLayer: disableActivateLayer,
+      layerActiveLayout: layerActiveLayout,
+      onChangeEnable: changeEnable,
+      onChangeActive: onClickRow
+    }),
     layerName: layerName,
-    Styles: Styles,
-    Opacity: Opacity,
-    Acceptance: Acceptance,
-    DeleteLayer: DeleteLayer
+    Styles: layerStylesLayout || /*#__PURE__*/React__default.createElement(Styles, {
+      style: layer.style,
+      onChangeStyle: changeStyle
+    }),
+    Opacity: layerOpacityLayout || /*#__PURE__*/React__default.createElement(Opacity, {
+      opacity: layer.opacity,
+      onChangeOpacity: changeOpacity
+    }),
+    Acceptance: layerAcceptanceTimeLayout || /*#__PURE__*/React__default.createElement(Acceptance, {
+      acceptanceTime: layer.acceptanceTimeInMinutes,
+      onChangeAcceptanceTime: changeAcceptanceTime
+    }),
+    DeleteLayer: layerDeleteLayout || /*#__PURE__*/React__default.createElement(DeleteLayer, {
+      onClick: deleteLayer
+    })
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column1,
     alignItems: "center"
-  }, /*#__PURE__*/React__default.createElement(LeftButtons, null)), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(LeftButtons, {
+    dragHandle: dragHandle,
+    layer: layer,
+    layerMissingDataLayout: layerMissingDataLayout,
+    layerEnableLayout: layerEnableLayout,
+    isEnabled: isEnabled,
+    disableActivateLayer: disableActivateLayer,
+    layerActiveLayout: layerActiveLayout,
+    onChangeEnable: changeEnable,
+    onChangeActive: onClickRow
+  })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column2
   }, layerServicesLayout || /*#__PURE__*/React__default.createElement(RenderLayers, {
@@ -5017,10 +5070,16 @@ var LayerRow = function LayerRow(_ref) {
   })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column3
-  }, /*#__PURE__*/React__default.createElement(Styles, null)), /*#__PURE__*/React__default.createElement(Grid, {
+  }, layerStylesLayout || /*#__PURE__*/React__default.createElement(Styles, {
+    style: layer.style,
+    onChangeStyle: changeStyle
+  })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column4
-  }, /*#__PURE__*/React__default.createElement(Opacity, null)), /*#__PURE__*/React__default.createElement(Grid, {
+  }, layerOpacityLayout || /*#__PURE__*/React__default.createElement(Opacity, {
+    opacity: layer.opacity,
+    onChangeOpacity: changeOpacity
+  })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column5
   }, layerDimensionLayout || /*#__PURE__*/React__default.createElement(DimensionSelect, {
@@ -5040,23 +5099,28 @@ var LayerRow = function LayerRow(_ref) {
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.acceptanceTime
-  }, /*#__PURE__*/React__default.createElement(Acceptance, null))), /*#__PURE__*/React__default.createElement(Grid, {
+  }, layerAcceptanceTimeLayout || /*#__PURE__*/React__default.createElement(Acceptance, {
+    acceptanceTime: layer.acceptanceTimeInMinutes,
+    onChangeAcceptanceTime: changeAcceptanceTime
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column6,
     alignItems: "center"
-  }, /*#__PURE__*/React__default.createElement(DeleteLayer, null), layerMenuLayout || /*#__PURE__*/React__default.createElement(LayerManagerMenuButton, {
+  }, layerDeleteLayout || /*#__PURE__*/React__default.createElement(DeleteLayer, {
+    onClick: deleteLayer
+  }), layerMenuLayout || /*#__PURE__*/React__default.createElement(LayerManagerMenuButton, {
     mapId: mapId,
     layerId: layerId,
     onLayerDuplicate: onLayerDuplicate
   })));
 };
-var Accordion = function Accordion(_ref3) {
-  var Styles = _ref3.Styles,
-    Acceptance = _ref3.Acceptance,
-    DeleteLayer = _ref3.DeleteLayer,
-    Opacity = _ref3.Opacity,
-    layerName = _ref3.layerName,
-    LeftButtons = _ref3.LeftButtons;
+var Accordion = function Accordion(_ref7) {
+  var Styles = _ref7.Styles,
+    Acceptance = _ref7.Acceptance,
+    DeleteLayer = _ref7.DeleteLayer,
+    Opacity = _ref7.Opacity,
+    layerName = _ref7.layerName,
+    LeftButtons = _ref7.LeftButtons;
   return /*#__PURE__*/React__default.createElement(CustomAccordion, {
     className: "medium-layermanager",
     defaultExpanded: false,
@@ -5071,9 +5135,7 @@ var Accordion = function Accordion(_ref3) {
         padding: 0
       }
     },
-    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LeftButtons, {
-      size: "-medium"
-    }), /*#__PURE__*/React__default.createElement(Typography, {
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, LeftButtons, /*#__PURE__*/React__default.createElement(Typography, {
       sx: {
         fontWeight: '500',
         fontSize: '12px',
@@ -5092,7 +5154,7 @@ var Accordion = function Accordion(_ref3) {
     item: true
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, "Style"), /*#__PURE__*/React__default.createElement(Styles, null)), /*#__PURE__*/React__default.createElement(Grid, {
+  }, "Style"), Styles), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true,
     sx: {
@@ -5105,19 +5167,19 @@ var Accordion = function Accordion(_ref3) {
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, "Opacity"), /*#__PURE__*/React__default.createElement(Opacity, null)), /*#__PURE__*/React__default.createElement(Grid, {
+  }, "Opacity"), Opacity), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, "Acc Time"), /*#__PURE__*/React__default.createElement(Acceptance, null)), /*#__PURE__*/React__default.createElement(Grid, {
+  }, "Acc Time"), Acceptance), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true,
     justifyContent: "center"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     sx: {}
-  }, /*#__PURE__*/React__default.createElement(DeleteLayer, null)))));
+  }, DeleteLayer))));
 };
 
 /* *
@@ -11739,7 +11801,7 @@ var AddLayersButton = function AddLayersButton(_ref) {
     "data-testid": "addLayersButton",
     ref: ref,
     tooltipTitle: tooltip
-  }, /*#__PURE__*/React.createElement(Add, null)), /*#__PURE__*/React.createElement(AddLayersPopup, {
+  }, /*#__PURE__*/React.createElement(MapAdd, null)), /*#__PURE__*/React.createElement(AddLayersPopup, {
     open: open,
     handleClose: handleClose,
     onRenderTree: onRenderTree,
@@ -11764,15 +11826,25 @@ var AddLayersButton = function AddLayersButton(_ref) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var BaseLayerRow = function BaseLayerRow(_ref) {
-  var mapId = _ref.mapId,
-    _ref$preloadedAvailab = _ref.preloadedAvailableBaseLayers,
-    preloadedAvailableBaseLayers = _ref$preloadedAvailab === void 0 ? availableDefaultBaseLayers : _ref$preloadedAvailab,
-    _ref$preloadedService = _ref.preloadedServices,
-    preloadedServices = _ref$preloadedService === void 0 ? preloadedDefaultBaseServices : _ref$preloadedService,
-    _ref$tooltip = _ref.tooltip,
-    tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip,
-    settings = _ref.settings;
+var _onRenderTree = function onRenderTree(_ref) {
+  var service = _ref.service,
+    mapId = _ref.mapId,
+    layerType = _ref.layerType;
+  return /*#__PURE__*/React.createElement(WMSLayerTreeConnect, {
+    mapId: mapId,
+    service: service,
+    layerType: layerType
+  });
+};
+var BaseLayerRow = function BaseLayerRow(_ref2) {
+  var mapId = _ref2.mapId,
+    _ref2$preloadedAvaila = _ref2.preloadedAvailableBaseLayers,
+    preloadedAvailableBaseLayers = _ref2$preloadedAvaila === void 0 ? availableDefaultBaseLayers : _ref2$preloadedAvaila,
+    _ref2$preloadedServic = _ref2.preloadedServices,
+    preloadedServices = _ref2$preloadedServic === void 0 ? preloadedDefaultBaseServices : _ref2$preloadedServic,
+    _ref2$tooltip = _ref2.tooltip,
+    tooltip = _ref2$tooltip === void 0 ? '' : _ref2$tooltip,
+    settings = _ref2.settings;
   var _a, _b, _c, _d, _e;
   var theme = useTheme$2();
   return /*#__PURE__*/React.createElement(Grid, {
@@ -11794,7 +11866,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
     preloadedServices: preloadedServices,
     tooltip: tooltip,
     onRenderTree: function onRenderTree(service) {
-      return /*#__PURE__*/React.createElement(WMSLayerTreeConnect, {
+      return _onRenderTree({
         mapId: mapId,
         service: service,
         layerType: layerTypes.LayerType.baseLayer
@@ -12361,6 +12433,14 @@ var KeywordFilterButtonConnect = function KeywordFilterButtonConnect(_ref) {
 var isURL = function isURL(string) {
   return /^https?:\/\//.test(string);
 };
+var ClearButton = function ClearButton(_ref) {
+  var onClick = _ref.onClick;
+  return /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    tooltipTitle: "Clear",
+    sx: buttonStyle,
+    onClick: onClick
+  }, /*#__PURE__*/React__default.createElement(Clear, null));
+};
 var buttonStyle = {
   '&.MuiButtonBase-root.MuiIconButton-root': {
     width: 48,
@@ -12368,25 +12448,20 @@ var buttonStyle = {
     marginRight: '-12px'
   }
 };
-var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
-  var localSearchString = _ref.localSearchString,
-    onClickClear = _ref.onClickClear,
-    setPopupIsOpen = _ref.setPopupIsOpen;
-  var ClearButton = function ClearButton() {
-    return /*#__PURE__*/React__default.createElement(CustomIconButton, {
-      tooltipTitle: "Clear",
-      sx: buttonStyle,
-      onClick: function onClick() {
-        onClickClear();
-      }
-    }, /*#__PURE__*/React__default.createElement(Clear, null));
-  };
+var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref2) {
+  var localSearchString = _ref2.localSearchString,
+    onClickClear = _ref2.onClickClear,
+    setPopupIsOpen = _ref2.setPopupIsOpen;
   if (isURL(localSearchString)) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
       style: {
         marginRight: '15px'
       }
-    }, /*#__PURE__*/React__default.createElement(ClearButton, null)), /*#__PURE__*/React__default.createElement(Button, {
+    }, /*#__PURE__*/React__default.createElement(ClearButton, {
+      onClick: function onClick() {
+        return onClickClear();
+      }
+    })), /*#__PURE__*/React__default.createElement(Button, {
       variant: "tertiary",
       onClick: function onClick() {
         return setPopupIsOpen(true);
@@ -12394,7 +12469,11 @@ var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
     }, "Save"));
   }
   if (localSearchString) {
-    return /*#__PURE__*/React__default.createElement(ClearButton, null);
+    return /*#__PURE__*/React__default.createElement(ClearButton, {
+      onClick: function onClick() {
+        return onClickClear();
+      }
+    });
   }
   return /*#__PURE__*/React__default.createElement(CustomIconButton, {
     tooltipTitle: "Search",
@@ -16386,12 +16465,20 @@ var handleMomentISOString = function handleMomentISOString(dateIn) {
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref) {
-  var layerId = _ref.layerId,
-    dimConfig = _ref.dimConfig,
-    dimensionName = _ref.dimensionName,
-    handleDimensionValueChanged = _ref.handleDimensionValueChanged,
-    handleSyncChanged = _ref.handleSyncChanged;
+var Icon$1 = function Icon(_ref) {
+  var isLayerDimensionSynced = _ref.isLayerDimensionSynced;
+  return isLayerDimensionSynced ? /*#__PURE__*/React.createElement(Link, {
+    "data-testid": "syncIcon"
+  }) : /*#__PURE__*/React.createElement(LinkOff, {
+    "data-testid": "syncDisIcon"
+  });
+};
+var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref2) {
+  var layerId = _ref2.layerId,
+    dimConfig = _ref2.dimConfig,
+    dimensionName = _ref2.dimensionName,
+    handleDimensionValueChanged = _ref2.handleDimensionValueChanged,
+    handleSyncChanged = _ref2.handleSyncChanged;
   var layerDimension = useSelector(function (store) {
     return layerSelectors.getLayerDimension(store, layerId, dimensionName);
   });
@@ -16407,13 +16494,6 @@ var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref) {
   var marks = marksByDimension(wmsDimension);
   var isLayerDimensionSynced = layerDimension.synced !== undefined && layerDimension.synced === true;
   var tooltipTitle = isLayerDimensionSynced ? 'Click to disconnect layer' : 'Click to connect layer';
-  var Icon = function Icon() {
-    return isLayerDimensionSynced ? /*#__PURE__*/React.createElement(Link, {
-      "data-testid": "syncIcon"
-    }) : /*#__PURE__*/React.createElement(LinkOff, {
-      "data-testid": "syncDisIcon"
-    });
-  };
   return /*#__PURE__*/React.createElement(Grid, {
     key: layerId,
     item: true,
@@ -16427,7 +16507,9 @@ var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref) {
     sx: {
       margin: '5px'
     }
-  }, /*#__PURE__*/React.createElement(Icon, null)), /*#__PURE__*/React.createElement(DimensionSelectSlider, {
+  }, /*#__PURE__*/React.createElement(Icon$1, {
+    isLayerDimensionSynced: isLayerDimensionSynced
+  })), /*#__PURE__*/React.createElement(DimensionSelectSlider, {
     marks: marks,
     layerTitle: layerTitle,
     reverse: dimConfig ? dimConfig.reversed : false,
@@ -30834,6 +30916,7 @@ var TimeSliderClock = function TimeSliderClock(_ref2) {
     options: options,
     controls: controls
   }), /*#__PURE__*/React__default.createElement(Draggable, {
+    cancel: ".MuiButtonBase-root",
     nodeRef: clockElement,
     bounds: "parent",
     position: position,

package/package.json

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { layerSelectTypes, layerTypes } from '@opengeoweb/store';
 interface AddLayerButtonProps {
-    onRenderTree?: (service: layerSelectTypes.LayerSelectService) => React.ReactChild;
+    onRenderTree?: (service: layerSelectTypes.LayerSelectService) => React.ReactNode;
     preloadedServices?: layerSelectTypes.LayerSelectService[];
     tooltip?: string;
     layerType?: layerTypes.LayerType;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { layerSelectTypes, layerTypes } from '@opengeoweb/store';
 interface AddLayerPopupProps {
-    onRenderTree?: (service: layerSelectTypes.LayerSelectService) => React.ReactChild;
+    onRenderTree?: (service: layerSelectTypes.LayerSelectService) => React.ReactNode;
     preloadedServices?: layerSelectTypes.LayerSelectService[];
     open?: boolean;
     handleClose?: () => void;

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { layerSelectTypes } from '@opengeoweb/store';
 interface WMSLoaderProps {
     onClickService?: (serviceURL: string, layerName: string) => void;
-    onRenderTree?: (service: layerSelectTypes.LayerSelectService) => React.ReactChild;
+    onRenderTree?: (service: layerSelectTypes.LayerSelectService) => React.ReactNode;
     highlightedLayers?: [];
     preloadedServices?: layerSelectTypes.LayerSelectService[];
     tooltip?: string;